Weather Station / ECOWITT / DNT
1.container {
2 width: 100%;
3 max-width: 1200px;
4 margin: 0 auto;
5 padding: 2rem 1.5rem 3rem;
6 display: flex;
7 flex-direction: column;
8 gap: 1.75rem;
9}
10
11.header {
12 display: flex;
13 flex-direction: column;
14 gap: 0.5rem;
15}
16
17.title {
18 font-size: clamp(1.75rem, 2.5vw, 2.5rem);
19 font-weight: 600;
20 color: var(--foreground-strong, #0f172a);
21}
22
23.subtitle {
24 font-size: 0.95rem;
25 color: var(--foreground-muted, #475569);
26 max-width: 720px;
27}
28
29.card {
30 background: var(--surface-elevated, #ffffff);
31 border: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.08));
32 border-radius: 1rem;
33 padding: 1.5rem;
34 display: flex;
35 flex-direction: column;
36 gap: 1.25rem;
37 box-shadow: 0 25px 45px -35px rgba(15, 23, 42, 0.35);
38}
39
40@media (prefers-color-scheme: dark) {
41 .card {
42 background: rgba(15, 23, 42, 0.8);
43 border-color: rgba(148, 163, 184, 0.25);
44 box-shadow: 0 25px 45px -35px rgba(15, 23, 42, 0.8);
45 }
46 .title {
47 color: var(--foreground-strong, #e2e8f0);
48 }
49 .subtitle {
50 color: var(--foreground-muted, #94a3b8);
51 }
52}
53
54.controlGrid {
55 display: grid;
56 gap: 1rem;
57 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
58}
59
60.toggleRow {
61 display: flex;
62 align-items: center;
63 gap: 0.75rem;
64 font-size: 0.95rem;
65 color: var(--foreground-strong, #0f172a);
66}
67
68.inputField {
69 display: flex;
70 flex-direction: column;
71 gap: 0.4rem;
72}
73
74.inputLabel {
75 font-size: 0.85rem;
76 font-weight: 500;
77 color: var(--foreground-muted, #64748b);
78}
79
80.select,
81.checkbox {
82 border-radius: 0.75rem;
83 border: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.15));
84 background: var(--surface, #f8fafc);
85 color: var(--foreground-strong, #0f172a);
86 padding: 0.65rem 0.75rem;
87 font-size: 0.95rem;
88 transition: border-color 0.2s ease, box-shadow 0.2s ease;
89}
90
91.select:focus {
92 outline: none;
93 border-color: var(--accent, #3b82f6);
94 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
95}
96
97.rangeRow {
98 display: flex;
99 flex-wrap: wrap;
100 align-items: flex-end;
101 gap: 1rem;
102}
103
104.rangeControls {
105 flex: 1;
106 min-width: 260px;
107}
108
109.confirmButton {
110 width: 44px;
111 height: 44px;
112 border-radius: 999px;
113 border: none;
114 display: grid;
115 place-items: center;
116 background: var(--accent, #16a34a);
117 color: #ffffff;
118 cursor: pointer;
119 transition: transform 0.2s ease, box-shadow 0.2s ease;
120}
121
122.confirmButton:disabled {
123 background: var(--border-subtle, rgba(15, 23, 42, 0.08));
124 color: rgba(15, 23, 42, 0.35);
125 cursor: not-allowed;
126 box-shadow: none;
127}
128
129.confirmButton:not(:disabled):hover {
130 transform: translateY(-1px);
131 box-shadow: 0 12px 25px -12px rgba(22, 163, 74, 0.65);
132}
133
134.tabsWrapper {
135 display: flex;
136 flex-direction: column;
137 gap: 0.75rem;
138}
139
140.tabList,
141.secondaryTabList {
142 display: flex;
143 gap: 0.5rem;
144 overflow-x: auto;
145 padding-bottom: 0.25rem;
146}
147
148.tabList {
149 border-bottom: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.12));
150 padding-bottom: 0.5rem;
151}
152
153.tabButton,
154.secondaryTabButton {
155 appearance: none;
156 border: none;
157 background: transparent;
158 border-radius: 999px;
159 padding: 0.45rem 0.95rem;
160 font-size: 0.95rem;
161 font-weight: 500;
162 color: var(--foreground-muted, #64748b);
163 cursor: pointer;
164 transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
165 white-space: nowrap;
166}
167
168.tabButtonActive,
169.secondaryTabButtonActive {
170 background: var(--accent-soft, rgba(59, 130, 246, 0.12));
171 color: var(--accent-strong, #1d4ed8);
172 box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.25);
173}
174
175@media (prefers-color-scheme: dark) {
176 .tabList {
177 border-color: rgba(148, 163, 184, 0.2);
178 }
179 .tabButton,
180 .secondaryTabButton {
181 color: #cbd5f5;
182 }
183 .tabButtonActive,
184 .secondaryTabButtonActive {
185 color: #f8fafc;
186 }
187}
188
189.statusMessage {
190 border-radius: 0.75rem;
191 padding: 1rem 1.25rem;
192 font-size: 0.9rem;
193 font-weight: 500;
194}
195
196.statusInfo {
197 background: rgba(250, 204, 21, 0.12);
198 color: #854d0e;
199 border: 1px solid rgba(250, 204, 21, 0.25);
200}
201
202.statusError {
203 background: rgba(248, 113, 113, 0.12);
204 color: #991b1b;
205 border: 1px solid rgba(248, 113, 113, 0.25);
206}
207
208.statusError + .statusError {
209 margin-top: 0.5rem;
210}
211
212.emptyState {
213 padding: 1.5rem;
214 border-radius: 0.85rem;
215 background: rgba(148, 163, 184, 0.12);
216 border: 1px dashed rgba(148, 163, 184, 0.35);
217 color: var(--foreground-muted, #475569);
218 text-align: center;
219 font-size: 0.95rem;
220}
221
222.contentSections {
223 display: flex;
224 flex-direction: column;
225 gap: 1.5rem;
226}
227
228.sectionCard {
229 background: var(--surface, rgba(15, 23, 42, 0.02));
230 border-radius: 1rem;
231 padding: 1.25rem;
232 border: 1px solid transparent;
233}
234
235@media (prefers-color-scheme: dark) {
236 .sectionCard {
237 background: rgba(15, 23, 42, 0.45);
238 border-color: rgba(148, 163, 184, 0.08);
239 }
240}
241
242.sectionTitle {
243 font-size: 1.1rem;
244 font-weight: 600;
245 margin-bottom: 0.85rem;
246 color: var(--foreground-strong, #0f172a);
247}
248
249@media (prefers-color-scheme: dark) {
250 .sectionTitle {
251 color: #e2e8f0;
252 }
253}
254
255.channelScroller {
256 display: flex;
257 align-items: center;
258 gap: 0.5rem;
259 overflow-x: auto;
260 padding-bottom: 0.25rem;
261}
262
263.channelScroller::-webkit-scrollbar {
264 height: 6px;
265}
266
267.channelScroller::-webkit-scrollbar-thumb {
268 background: rgba(100, 116, 139, 0.4);
269 border-radius: 999px;
270}
271
272@media (max-width: 768px) {
273 .container {
274 padding: 1.5rem 1rem 2.5rem;
275 }
276 .card {
277 padding: 1.25rem;
278 }
279 .controlGrid {
280 grid-template-columns: 1fr;
281 }
282 .rangeRow {
283 align-items: stretch;
284 }
285 .confirmButton {
286 width: 50px;
287 height: 50px;
288 }
289}