Weather Station / ECOWITT / DNT
1/* Statistics page styles (external CSS per user rule)
2 Uses Tailwind via @apply for consistent design without inline style bloat. */
3
4/* Grid helpers */
5.stat-grid {
6 display: grid;
7 gap: 0.75rem; /* ~gap-3 */
8 grid-template-columns: repeat(1, minmax(0, 1fr));
9}
10@media (min-width: 640px) { /* sm */
11 .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
12}
13@media (min-width: 1024px) { /* lg */
14 .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
15}
16
17/* Variant: 4 columns on large screens (for TopExtremes) */
18@media (min-width: 1024px) { /* lg */
19 .stat-grid--extremes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
20}
21
22/* Card */
23.stat-card {
24 border-radius: 0.5rem; /* rounded */
25 border: 1px solid #e5e7eb; /* gray-200 */
26 padding: 0.75rem; /* p-3 */
27 background-color: #f9fafb; /* gray-50 */
28 box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* shadow-sm */
29}
30.stat-card .kpi-label {
31 font-size: 0.75rem; /* text-xs */
32 text-transform: uppercase;
33 letter-spacing: 0.05em; /* tracking-wide */
34 color: #6b7280; /* gray-500 */
35}
36.stat-card .kpi-value {
37 font-size: 1.5rem; /* text-2xl */
38 font-weight: 600; /* font-semibold */
39}
40.stat-card .kpi-sub {
41 font-size: 0.75rem; /* text-xs */
42 color: #6b7280; /* gray-500 */
43}
44
45/* Badge (generic) */
46.stat-badge {
47 display: inline-block;
48 padding: 0.125rem 0.375rem; /* py-0.5 px-1.5 */
49 border-radius: 0.375rem; /* rounded */
50 font-size: 0.75rem; /* text-xs */
51 font-weight: 500; /* font-medium */
52 background-color: #f3f4f6; /* gray-100 */
53}
54
55/* Temperature color classes to mirror logic in tempColorClass() */
56.stat-temp--very-cold { color: #1e3a8a; }
57.stat-temp--cold { color: #3b82f6; }
58.stat-temp--mild { color: #16a34a; }
59.stat-temp--warm { color: #f97316; }
60.stat-temp--hot { color: #ea580c; }
61.stat-temp--very-hot { color: #ef4444; }
62
63/* Legend */
64.stat-legend { margin: 0.75rem 0; }
65.stat-legend .title { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; }
66.stat-legend .bar {
67 height: 0.5rem;
68 border-radius: 0.25rem;
69 /* Gradient approximating −10→0→20→25→30 */
70 background: linear-gradient(
71 to right,
72 #1e3a8a 0%, /* dark blue */
73 #3b82f6 20%, /* light blue */
74 #16a34a 55%, /* green */
75 #f97316 75%, /* orange */
76 #ef4444 100% /* red */
77 );
78}
79.stat-legend .ticks { display: flex; justify-content: space-between; font-size: 10px; color: #6b7280; margin-top: 0.25rem; }
80
81/* Sparklines */
82.stat-spark { margin-top: 0.5rem; }
83.stat-spark svg {
84 width: 100%;
85 height: 40px;
86 display: block;
87}
88.stat-spark .line-max { stroke: #ef4444; fill: none; stroke-width: 1.5; }
89.stat-spark .line-min { stroke: #3b82f6; fill: none; stroke-width: 1.2; opacity: 0.7; }
90.stat-spark .line-rain { stroke: #3b82f6; fill: none; stroke-width: 1; opacity: 0.8; }
91
92/* Rain amount color helpers (text) */
93.stat-rain--none { color: #4b5563; }
94.stat-rain--low { color: #60a5fa; }
95.stat-rain--med { color: #2563eb; }
96.stat-rain--high { color: #1d4ed8; }
97.stat-rain--very-high { color: #7c3aed; }
98
99/* Calendar heatmap */
100.cal-wrap { margin: 12px 0; --cal-cell: 12px; --cal-gap: 2px; }
101.cal-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; }
102.cal-grid {
103 display: grid;
104 grid-template-columns: repeat(53, var(--cal-cell, 12px));
105 grid-template-rows: repeat(7, var(--cal-cell, 12px));
106 gap: var(--cal-gap, 2px);
107}
108.cal-cell { width: var(--cal-cell, 12px); height: var(--cal-cell, 12px); border-radius: 2px; }
109.cal-cell--rain { box-shadow: inset 0 -2px 0 0 #3b82f6; }
110.cal-weekday { font-size: 10px; color: #6b7280; margin-right: 8px; }
111
112/* Scroll container for small screens */
113.cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
114
115/* Mobile tweaks */
116@media (max-width: 640px) {
117 .cal-wrap { --cal-cell: 8px; --cal-gap: 1px; }
118}
119
120/* Background color classes for heatmap buckets (5°C steps) */
121.bg-temp-none { background-color: #d1d5db; }
122.bg-temp-neg-15 { background-color: #312e81; }
123.bg-temp-neg-10 { background-color: #1e3a8a; }
124.bg-temp-neg-5 { background-color: #1d4ed8; }
125.bg-temp-0 { background-color: #3b82f6; }
126.bg-temp-5 { background-color: #60a5fa; }
127.bg-temp-10 { background-color: #0ea5e9; }
128.bg-temp-15 { background-color: #34d399; }
129.bg-temp-20 { background-color: #22c55e; }
130.bg-temp-25 { background-color: #84cc16; }
131.bg-temp-30 { background-color: #facc15; }
132.bg-temp-35 { background-color: #fb923c; }
133.bg-temp-40 { background-color: #ef4444; }
134
135/* Legend scale styling */
136.stat-legend .scale { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.5rem; }
137.stat-legend .chip { display: flex; flex-direction: column; align-items: center; font-size: 0.625rem; color: #4b5563; }
138.stat-legend .chip .swatch { width: 26px; height: 14px; border-radius: 4px; margin-bottom: 0.25rem; }
139
140/* Shimmer skeleton */
141@keyframes shimmer {
142 0% { background-position: -200% 0; }
143 100% { background-position: 200% 0; }
144}
145.skeleton {
146 background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%);
147 background-size: 400% 100%;
148 animation: shimmer 1.6s infinite;
149 border-radius: 0.25rem;
150}
151.skeleton-line { height: 0.75rem; margin: 0.25rem 0; }
152.skeleton-block { height: 2rem; margin: 0.25rem 0; }
153.skeleton-pill { height: 1rem; border-radius: 9999px; }
154.skeleton-spark { height: 40px; margin-top: 0.5rem; }
155.skeleton-heatmap { height: 96px; }