|
111 | 111 | text-transform: uppercase; |
112 | 112 | gap: 4px; |
113 | 113 | background: color-mix(in srgb, var(--accent-color) 10%, transparent); |
114 | | - padding: 10px; |
115 | | - border-radius: 8px; |
| 114 | + padding: 4px; |
| 115 | + border-radius: 5px; |
116 | 116 | transition: all 0.3s ease; |
117 | 117 | margin: 4px; |
118 | 118 | } |
|
143 | 143 | text-align: center; |
144 | 144 | color: var(--accent-color); |
145 | 145 | text-transform: uppercase; |
146 | | - gap: 10px; |
| 146 | + gap: 4px; |
147 | 147 | background: color-mix(in srgb, var(--accent-color) 10%, transparent); |
148 | | - padding: 10px; |
| 148 | + padding: 4px; |
149 | 149 | border-radius: 8px; |
150 | 150 | transition: all 0.3s ease; |
151 | 151 | margin: 4px; |
|
156 | 156 | flex-direction: column; |
157 | 157 | align-items: center; |
158 | 158 | justify-content: center; |
159 | | - gap: 10px; |
| 159 | + gap: 4px; |
160 | 160 | transition: all 0.3s ease; |
161 | 161 | background: color-mix(in srgb, var(--content-color) 3%, transparent); |
162 | | - padding: 8px; |
163 | | - border-radius: 8px; |
| 162 | + padding: 4px; |
| 163 | + border-radius: 5px; |
164 | 164 | transition: all 0.3s ease; |
165 | 165 | margin: 4px; |
166 | 166 | } |
|
198 | 198 | text-align: center; |
199 | 199 | color: var(--accent-color); |
200 | 200 | text-transform: uppercase; |
201 | | - gap: 10px; |
| 201 | + gap: 4px; |
202 | 202 | background: color-mix(in srgb, var(--accent-color) 10%, transparent); |
203 | | - padding: 10px; |
204 | | - border-radius: 8px; |
| 203 | + padding: 4px; |
| 204 | + border-radius: 5px; |
205 | 205 | transition: all 0.3s ease; |
206 | 206 | margin: 4px; |
207 | 207 | } |
208 | 208 |
|
209 | 209 | .forecast-grid.horizontal .pollen-label-header .pollen-icon { |
210 | | - width: 48px; |
211 | | - height: 48px; |
| 210 | + width: 42px; |
| 211 | + height: 42px; |
212 | 212 | } |
213 | 213 |
|
214 | 214 | .forecast-grid.horizontal .day-row { |
|
242 | 242 | color: var(--accent-color); |
243 | 243 | background: color-mix(in srgb, var(--accent-color) 10%, transparent); |
244 | 244 | text-transform: uppercase; |
245 | | - padding: 10px; |
246 | | - border-radius: 8px; |
| 245 | + padding: 4%; |
| 246 | + border-radius: 5px; |
247 | 247 | transition: all 0.3s ease; |
248 | 248 | margin: 4px; |
249 | 249 | } |
|
258 | 258 | flex-direction: column; |
259 | 259 | align-items: center; |
260 | 260 | justify-content: center; |
261 | | - gap: 10px; |
| 261 | + gap: 4px; |
262 | 262 | background: color-mix(in srgb, var(--content-color) 3%, transparent); |
263 | | - padding: 10px; |
264 | | - border-radius: 8px; |
| 263 | + padding: 4px; |
| 264 | + border-radius: 5px; |
265 | 265 | transition: all 0.3s ease; |
266 | 266 | margin: 4px; |
267 | 267 | } |
|
273 | 273 | } |
274 | 274 |
|
275 | 275 | .pollen-icon { |
276 | | - width: 48px; |
277 | | - height: 48px; |
| 276 | + width: 42px; |
| 277 | + height: 42px; |
278 | 278 | } |
279 | 279 |
|
280 | 280 | .pollen-indicator { |
|
440 | 440 | date.setDate(date.getDate() + index); |
441 | 441 |
|
442 | 442 | const today = new Date(); |
443 | | - today.setHours(0, 0, 0, 0); // heutige Mitternacht |
| 443 | + today.setHours(0, 0, 0, 0); |
| 444 | + |
444 | 445 | const targetDate = new Date(date); |
445 | | - targetDate.setHours(0, 0, 0, 0); // Mitternacht des Zieltags |
| 446 | + targetDate.setHours(0, 0, 0, 0); |
446 | 447 |
|
447 | | - // Prüfen, ob es heute ist |
448 | | - const isToday = today.getTime() === targetDate.getTime(); |
| 448 | + const diffDays = Math.round((targetDate - today) / 86400000); |
449 | 449 |
|
450 | | - // Label bestimmen |
451 | 450 | let label; |
452 | | - if (isToday) { |
| 451 | + |
| 452 | + if (diffDays === 0) { |
453 | 453 | label = translate('Today'); |
454 | | - } else if (index === 1) { |
| 454 | + } else if (diffDays === 1) { |
455 | 455 | label = translate('Tomorrow'); |
456 | | - } else if (index === 2) { |
| 456 | + } else if (diffDays === 2) { |
457 | 457 | label = translate('In 2 days'); |
458 | 458 | } else { |
459 | | - // Andernfalls Wochentag |
460 | 459 | label = translate(date.toLocaleDateString('en-US', { weekday: 'long' })); |
461 | 460 | } |
462 | 461 |
|
|
557 | 556 | const mapping = pollenNameMapping[pollenKey]; |
558 | 557 | const icon = mapping ? pollenIcons[mapping.icon] : ''; |
559 | 558 | const displayName = mapping ? mapping.displayName : pollenKey; |
560 | | - console.log('Pollen Icon:', pollenKey, '->', displayName); |
| 559 | + //console.log('Pollen Icon:', pollenKey, '->', displayName); |
561 | 560 |
|
562 | 561 | const label = document.createElement('div'); |
563 | 562 | label.className = 'pollen-label'; |
|
0 commit comments