From e7283ba10d45b42e1274cd13c3d6aabec57c85b4 Mon Sep 17 00:00:00 2001 From: Ariel Costas Guerrero Date: Sun, 30 Nov 2025 17:58:55 +0100 Subject: feat: add Tailwind CSS support and create ConsolidatedCirculationCard styles - Added Tailwind CSS and its Vite plugin to the project dependencies. - Updated Vite configuration to include Tailwind CSS plugin. - Created a new CSS file for the Consolidated Circulation Card component with styles for various states and responsive design. --- .../Stops/ConsolidatedCirculationCard.css | 214 +++++++++++++++++++++ 1 file changed, 214 insertions(+) create mode 100644 src/frontend/app/components/Stops/ConsolidatedCirculationCard.css (limited to 'src/frontend/app/components/Stops/ConsolidatedCirculationCard.css') diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css new file mode 100644 index 0000000..8a442c3 --- /dev/null +++ b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css @@ -0,0 +1,214 @@ +@reference "../../root.css"; + +.consolidated-circulation-card { + all: unset; + flex: 0 0 auto; + display: flex; + flex-direction: column; + gap: 0.5rem; + background-color: var(--message-background-color); + border-radius: 12px; + border: 1px solid var(--border-color); + padding: 0.65rem 0.85rem; + transition: all 0.2s ease; +} + +.consolidated-circulation-card.has-gps { + cursor: pointer; +} + +.consolidated-circulation-card.no-gps { + cursor: not-allowed; + opacity: 0.7; +} + +.consolidated-circulation-card.has-gps:hover { + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); + border-color: var(--button-background-color); + background-color: color-mix( + in oklab, + var(--button-background-color) 5%, + var(--message-background-color) + ); +} + +.consolidated-circulation-card.has-gps:active { + transform: scale(0.98); +} + +.consolidated-circulation-card:disabled { + pointer-events: none; +} + + +.consolidated-circulation-card .card-row { + display: flex; + align-items: center; + gap: 0.65rem; +} + +.consolidated-circulation-card .card-row.main { + min-height: 48px; +} + +.consolidated-circulation-card .line-info { + flex-shrink: 0; +} + +.consolidated-circulation-card .route-info { + flex: 1; + min-width: 0; +} + +.consolidated-circulation-card .route-info strong { + font-size: 1rem; + color: var(--text-color); + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; + line-height: 1.25; +} + +.consolidated-circulation-card .eta-badge { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.3rem 0.45rem; + border-radius: 12px; +} + +.consolidated-circulation-card .eta-text { + display: flex; + flex-direction: column; + align-items: center; + line-height: 1; +} + +.consolidated-circulation-card .eta-value { + font-size: 1.15rem; + font-weight: 700; +} + +.consolidated-circulation-card .eta-unit { + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.consolidated-circulation-card .eta-badge.time-running { + background: rgba(34, 197, 94, 0.12); + color: #1a9e56; +} + +.consolidated-circulation-card .eta-badge.time-delayed { + background: rgba(255, 106, 0, 0.12); + color: #d06100; +} + +.consolidated-circulation-card .eta-badge.time-scheduled { + background: rgba(11, 61, 145, 0.12); + color: #0b3d91; +} + +[data-theme="dark"] .consolidated-circulation-card .eta-badge.time-scheduled { + color: #8fb4ff; +} + +.consolidated-circulation-card .card-row.meta { + flex-wrap: wrap; + justify-content: flex-start; + gap: 0.4rem; +} + +.meta-chip { + font-size: 0.75rem; + padding: 0.2rem 0.55rem; + border-radius: 999px; + background: rgba(0, 0, 0, 0.03); + + @apply flex items-center justify-center gap-1 flex-shrink-0 bg-gray-200/30 dark:bg-gray-600/30; +} + +.meta-chip.delay-ok { + @apply bg-green-400/30 dark:bg-green-600/30 border-green-500 dark:border-green-700 text-green-800 dark:text-green-200; +} + +.meta-chip.delay-warn { + @apply bg-yellow-400/30 dark:bg-yellow-600/30 border-yellow-500 dark:border-yellow-700 text-yellow-800 dark:text-yellow-200; +} + +.meta-chip.delay-critical { + @apply bg-red-400/30 dark:bg-red-600/30 border-red-500 dark:border-red-700 text-white; +} + +.meta-chip.delay-early { + @apply bg-blue-400/30 dark:bg-blue-600/30 border-blue-500 dark:border-blue-700 text-blue-800 dark:text-blue-200; +} + +/* GPS Indicator */ +.gps-indicator { + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + flex-shrink: 0; + position: relative; +} + +.gps-pulse { + position: absolute; + width: 8px; + height: 8px; + background: #22c55e; + border-radius: 50%; + box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2); + animation: gpsPulse 2s ease-in-out infinite; +} + +.gps-pulse.previous-trip { + background: #ff9800; + box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2); + animation: gpsPulseOrange 2s ease-in-out infinite; +} + +@keyframes gpsPulse { + 0% { + box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2); + } + 50% { + box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.1); + } + 100% { + box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2); + } +} + +@keyframes gpsPulseOrange { + 0% { + box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2); + } + 50% { + box-shadow: 0 0 0 6px rgba(255, 152, 0, 0.1); + } + 100% { + box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2); + } +} + +@media (max-width: 480px) { + .consolidated-circulation-card { + padding: 0.65rem 0.75rem; + } + + .consolidated-circulation-card .card-row { + gap: 0.5rem; + } + + .consolidated-circulation-card .eta-badge { + padding: 0.25rem 0.4rem; + } +} -- cgit v1.3