src/frontend/app/components/arrivals/ArrivalCard.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

@import "../../tailwind.css";

.arrival-card {
  display: grid;
  grid-template-areas:
    "icon route minutes"
    "meta meta meta";

  grid-template-columns: auto 1fr auto;
}

arrival-card--icon {
  grid-area: icon;
}
.arrival-card--route {
  grid-area: route;
  min-width: 0;
}
.arrival-card--minutes {
  grid-area: minutes;
}
.arrival-card--meta {
  grid-area: meta;
}

.time-running {
  @apply bg-green-600/20 dark:bg-green-600/25 text-[#1a9e56] dark:text-[#22c55e];
}

.time-delayed {
  @apply bg-orange-600/20 dark:bg-orange-600/25 text-[#d06100] dark:text-[#fb923c];
}

.time-past {
  @apply bg-gray-600/20 dark:bg-gray-600/25 text-gray-600 dark:text-gray-400;
}

.time-scheduled {
  @apply bg-primary/20 dark:bg-primary/25 text-primary dark:text-primary;
}