Skip to content

Commit 5875562

Browse files
amnwebamnweb
committed
chore(config): replace weather widget with open_meteo widget
- Changed the weather widget to open_meteo in default config.
1 parent e880091 commit 5875562

2 files changed

Lines changed: 175 additions & 59 deletions

File tree

‎src/config.yaml‎

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ bars:
4949
- "clock"
5050
right:
5151
- "media"
52-
- "weather"
52+
- "open_meteo"
5353
- "microphone"
5454
- "volume"
5555
- "notifications"
@@ -108,8 +108,8 @@ widgets:
108108
offset: [ 1, 1 ]
109109
scrolling_label:
110110
enabled: true
111-
update_interval_ms: 50
112-
style: "left" # can be "left", "right", "bounce", "bounce-ease"
111+
update_interval_ms: 40
112+
style: "bounce" # can be "left", "right", "bounce", "bounce-ease"
113113
separator: " | "
114114
label_padding: 1
115115
callbacks:
@@ -186,50 +186,46 @@ widgets:
186186
on_left: "next_layout"
187187
on_middle: "toggle_monocle"
188188
on_right: "prev_layout"
189-
weather:
190-
type: "yasb.weather.WeatherWidget"
189+
open_meteo:
190+
type: "yasb.open_meteo.OpenMeteoWidget"
191191
options:
192192
label: "<span>{icon}</span> {temp}"
193193
label_alt: "{location}: Min {min_temp}, Max {max_temp}, Humidity {humidity}"
194-
api_key: env
194+
tooltip: true
195195
update_interval: 600
196196
hide_decimal: true
197-
location: env
197+
units: "metric"
198198
callbacks:
199199
on_left: "toggle_card"
200200
on_middle: "do_nothing"
201201
on_right: "toggle_label"
202-
icons:
203-
sunnyDay: "\ue30d"
204-
clearNight: "\ue32b"
205-
cloudyDay: "\ue312"
206-
cloudyNight: "\ue311"
207-
rainyDay: "\ue308"
208-
rainyNight: "\ue333"
209-
snowyDay: "\ue30a"
210-
snowyNight: "\ue335"
211-
blizzardDay: "\udb83\udf36"
212-
blizzardNight: "\udb83\udf36"
213-
foggyDay: "\ue303"
214-
foggyNight: "\ue346"
215-
thunderstormDay: "\ue30f"
216-
thunderstormNight: "\ue338"
217-
default: "\uebaa"
218202
weather_card:
219203
blur: false
220-
round_corners: false
221204
alignment: "right"
222205
direction: "down"
223-
icon_size: 64
206+
icon_size: 32
224207
show_hourly_forecast: true
225208
time_format: "24h"
226209
hourly_point_spacing: 76
227-
hourly_icon_size: 32
210+
hourly_icon_size: 16
228211
icon_smoothing: true
229212
temp_line_width: 2
230213
current_line_color: "#8EAEE8"
231214
current_line_width: 1
232215
current_line_style: "dot"
216+
hourly_forecast_buttons:
217+
enabled: true
218+
default_view: "temperature"
219+
temperature_icon: "\udb81\udd99"
220+
rain_icon: "\udb81\udd96"
221+
snow_icon: "\udb81\udd98"
222+
weather_animation:
223+
enabled: true
224+
snow_overrides_rain: true
225+
temp_line_animation_style: both
226+
rain_effect_intensity: 1.0
227+
snow_effect_intensity: 1.0
228+
scale_with_chance: true
233229
volume:
234230
type: "yasb.volume.VolumeWidget"
235231
options:

‎src/styles.css‎

Lines changed: 153 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,15 @@ For more information about configuration options, please visit the Wiki https://
4141
.context-menu,
4242
.context-menu .menu-checkbox {
4343
background-color: var(--bg-color1);
44-
border: none;
4544
padding: 4px 0px;
4645
font-family: 'Segoe UI';
4746
font-size: 12px;
4847
color: var(--text1)
4948
}
49+
.context-menu {
50+
border-radius: 8px;
51+
border: 1px solid rgba(255, 255, 255, 0.075);
52+
}
5053
.context-menu::right-arrow {
5154
width: 8px;
5255
height: 8px;
@@ -66,7 +69,6 @@ For more information about configuration options, please visit the Wiki https://
6669
background-color: var(--bg-color2);
6770
color: #FFFFFF;
6871
}
69-
7072
.context-menu::separator {
7173
height: 1px;
7274
background-color: #404040;
@@ -76,7 +78,6 @@ For more information about configuration options, please visit the Wiki https://
7678
color: #666666;
7779
background-color: transparent;
7880
}
79-
8081
.context-menu .menu-checkbox .checkbox {
8182
border: none;
8283
padding: 8px 16px;
@@ -109,7 +110,6 @@ For more information about configuration options, please visit the Wiki https://
109110
.context-menu .menu-checkbox .checkbox:focus {
110111
outline: none;
111112
}
112-
113113
.widget {
114114
padding: 0 12px;
115115
margin: 0;
@@ -231,57 +231,177 @@ For more information about configuration options, please visit the Wiki https://
231231
color: var(--blue);
232232
margin: 0px 2px 0 0;
233233
}
234-
.weather-widget,
234+
.open-meteo-widget,
235235
.volume-widget {
236236
padding: 0 6px;
237237
}
238-
.weather-widget .icon {
238+
.open-meteo-widget .icon {
239239
font-size: 18px;
240240
margin: 0 2px 1px 0;
241241
color: var(--yellow);
242242
}
243-
.weather-card {
243+
.open-meteo-widget .label {
244+
font-size: 13px;
245+
font-family: "Segoe UI";
246+
font-weight: 400;
247+
color: rgba(255, 255, 255, 0.8);
248+
padding-left: 4px;
249+
}
250+
.open-meteo-card {
244251
background-color: var(--bg-color1);
245252
border-radius: 8px;
246-
min-width: 540px;
247253
border: 1px solid var(--bg-color2);
254+
min-width: 500px;
248255
}
249-
.weather-card-today .label {
250-
font-size: 12px;
256+
.open-meteo-card-today .label {
257+
font-size: 13px;
258+
font-family: "Segoe UI";
259+
font-weight: 400;
260+
color: rgb(163, 163, 163);
251261
}
252-
.weather-card-today .label.location {
253-
font-size: 24px;
262+
.open-meteo-card-today .label.location {
263+
font-size: 32px;
254264
font-weight: 700;
265+
font-family: "Segoe UI";
266+
color: rgb(255, 255, 255);
267+
}
268+
.open-meteo-card-today .label.sunrisesunset {
269+
font-size: 18px;
270+
font-family: "Segoe UI";
271+
font-weight: 600;
272+
color: rgb(201, 204, 159);
273+
}
274+
.open-meteo-card-today .label.sunrisesunset-icon {
275+
font-size: 18px;
276+
color: rgb(201, 204, 159);
277+
font-family: "JetBrainsMono NFP";
278+
}
279+
.open-meteo-card-day {
280+
border: 1px solid rgba(255, 255, 255, 0.1);
281+
border-radius: 8px;
282+
background-color: rgba(0, 0, 0, 0);
283+
padding: 4px;
284+
min-width: 70px;
255285
}
256-
.weather-card-today .label.alert {
286+
.open-meteo-card-day .day-name {
287+
font-family: "Segoe UI";
288+
color: rgba(255, 255, 255, 0.6);
257289
font-size: 12px;
290+
font-weight: 600;
291+
}
292+
.open-meteo-card-day .day-temp-max {
293+
font-family: "Segoe UI";
258294
font-weight: 700;
259-
background-color: rgba(247, 199, 42, 0.05);
260-
border: 1px solid rgba(247, 209, 42, 0.1);
261-
color: rgba(196, 181, 162, 0.85);
262-
border-radius: 6px;
263-
padding: 5px 0;
295+
font-size: 16px;
296+
color: rgb(255, 255, 255);
264297
}
265-
.weather-card-day {
266-
border: 1px solid transparent;
267-
border-radius: 8px;
268-
background-color: rgba(17, 17, 27, 0.2);
298+
.open-meteo-card-day .day-temp-min {
299+
font-family: "Segoe UI";
300+
color: rgb(255, 255, 255);
301+
font-weight: 400;
302+
font-size: 13px;
269303
}
270-
.weather-card-day.active {
271-
border: 1px solid rgb(61, 61, 80);
304+
.open-meteo-card-day.active {
305+
background-color: rgba(255, 255, 255, 0.05);
306+
border: 1px solid rgba(255, 255, 255, 0.08);
272307
}
273-
.weather-card-day .label {
274-
font-size: 12px;
308+
.open-meteo-card-day:hover {
309+
background-color: rgba(255, 255, 255, 0.04);
275310
}
276-
.weather-card .hourly-container {
311+
.open-meteo-card .hourly-container {
312+
border: none;
277313
background-color: transparent;
278-
min-height: 150px;
279-
border: none
314+
min-height: 120px;
280315
}
281-
.weather-card .hourly-data {
282-
background-color: #FAE93F;
283-
font-size: 12px;
284-
font-weight: bold;
316+
.open-meteo-card .hourly-data {
317+
font-size: 11px;
318+
font-weight: 700;
319+
font-family: "Segoe UI";
320+
}
321+
.open-meteo-card .hourly-data.temperature {
322+
background-color: #c9be48;
323+
}
324+
.open-meteo-card .hourly-data.rain {
325+
background-color: #4a90e2;
326+
}
327+
.open-meteo-card .hourly-data.snow {
328+
background-color: #a0c4ff;
329+
}
330+
.open-meteo-card .hourly-data .hourly-rain-animation {
331+
color: rgba(150, 200, 255, 40);
332+
background-color: rgba(0, 0, 0, 0);
333+
}
334+
.open-meteo-card .hourly-data .hourly-snow-animation {
335+
color: rgba(255, 255, 255, 150);
336+
background-color: rgba(0, 0, 0, 0);
337+
}
338+
.open-meteo-card .hourly-data-buttons {
339+
margin-top: 11px;
340+
margin-left: 11px;
341+
}
342+
.open-meteo-card .hourly-data-button {
343+
border-radius: 4px;
344+
min-height: 24px;
345+
min-width: 24px;
346+
max-width: 24px;
347+
max-height: 24px;
348+
font-size: 14px;
349+
color: rgba(255, 255, 255, 0.3);
350+
border: 1px solid transparent;
351+
}
352+
.open-meteo-card .hourly-data-button.active {
353+
color: #fff;
354+
background-color: rgba(255, 255, 255, 0.1);
355+
border: 1px solid rgba(255, 255, 255, 0.1);
356+
}
357+
.open-meteo-card .search-head {
358+
font-size: 18px;
359+
font-family: "Segoe UI";
360+
font-weight: 600;
361+
color: rgba(255, 255, 255, 0.9);
362+
}
363+
.open-meteo-card .search-description {
364+
font-size: 14px;
365+
font-family: "Segoe UI";
366+
font-weight: 400;
367+
color: rgba(255, 255, 255, 0.7);
368+
padding-bottom: 8px;
369+
}
370+
.open-meteo-card .no-data-icon {
371+
font-size: 88px;
372+
}
373+
.open-meteo-card .no-data-text {
374+
font-size: 16px;
375+
font-family: "Segoe UI";
376+
font-weight: 400;
377+
}
378+
/* search dialog */
379+
.open-meteo-card .search-input {
380+
padding: 8px 12px;
381+
border: 1px solid #5e6070;
382+
border-radius: 6px;
383+
background-color: rgba(17, 17, 27, 0.1);
384+
color: #cdd6f4;
385+
font-family: "Segoe UI";
386+
font-size: 14px;
387+
}
388+
.open-meteo-card .search-input:focus {
389+
border: 1px solid #89b4fa;
390+
background-color: rgba(17, 17, 27, 0.2);
391+
}
392+
.open-meteo-card .search-results {
393+
border: 1px solid #45475a00;
394+
border-radius: 6px;
395+
background-color: rgba(0, 0, 0, 0);
396+
color: #cbced8;
397+
font-size: 13px;
398+
font-family: "Segoe UI";
399+
}
400+
.open-meteo-card .search-results::item {
401+
padding: 6px;
402+
}
403+
.open-meteo-card .search-results::item:hover {
404+
background-color: rgba(255, 255, 255, 0.05);
285405
}
286406
.media-widget {
287407
padding: 0;

0 commit comments

Comments
 (0)