dotfiles
My PC Dotfiles & Websitegit clone https://github.com/maydayv7/dotfiles
files/windows/yasb/styles.css (63404B)
1/* ---- YASB Panel Style ---- */
2:root {
3 /* Fonts */
4 --font-primary: "Segoe UI Variable Text", "Segoe UI", system-ui;
5 --font-text: "Segoe UI Variable Text", "Segoe UI", system-ui;
6 --font-mono: "MesloLGS NF";
7 --font-icon: "Segoe Fluent Icons", "MesloLGS NF";
8 --font-icon-2: "MesloLGS NF", "Segoe UI";
9
10 /* Typography */
11 --font-size-caption: 10px;
12 --font-size-body: 12px;
13 --font-size-body-strong: 14px;
14 --font-size-subtitle: 16px;
15 --font-size-title: 20px;
16 --font-size-icon-large: 32px;
17 --font-size-display: 48px;
18
19 --font-weight-regular: 400;
20 --font-weight-semibold: 600;
21 --font-weight-bold: 700;
22
23 /* Spacing */
24 --space-2: 2px;
25 --space-4: 4px;
26 --space-6: 6px;
27 --space-8: 8px;
28 --space-12: 12px;
29 --space-16: 16px;
30 --space-24: 24px;
31
32 /* Dimensions */
33 --width-menu-sm: 160px;
34 --width-menu-md: 280px;
35 --width-menu-lg: 380px;
36 --size-icon-btn: 28px;
37 --size-app-icon: 24px;
38 --height-item-md: 36px;
39 --height-item-lg: 80px;
40
41 /* Border radii */
42 --radius-small: 4px;
43 --radius-medium: 6px;
44 --radius-large: 8px;
45
46 /* -- Light Theme -- */
47 --color-background-base: rgba(243, 243, 243, 0.9);
48 --color-background-elevated: rgba(252, 252, 252, 0.9);
49 --color-background-elevated-x2: rgba(255, 255, 255, 0.7);
50
51 --color-taskbar: rgba(243, 243, 243, 0.85);
52 --color-widget-container: rgba(212, 212, 212, 0.7);
53
54 /* Surface Colors */
55 --color-surface-secondary: rgba(0, 0, 0, 0.0241);
56 --color-surface-disabled: rgba(0, 0, 0, 0.0241);
57
58 /* Text Colors */
59 --color-text-primary: rgba(0, 0, 0, 0.9);
60 --color-text-secondary: rgba(0, 0, 0, 0.6063);
61 --color-text-tertiary: rgba(0, 0, 0, 0.4458);
62 --color-text-disabled: rgba(0, 0, 0, 0.3614);
63
64 /* Accent Colors */
65 --color-accent-default: #0078d4;
66 --color-accent-secondary: #005a9e;
67
68 /* Semantic Colors */
69 --color-success: #107c10;
70 --color-warning: #9d5d00;
71 --color-error: #c42b1c;
72
73 /* Component Colors */
74 --color-traffic-download: #1a7c0d;
75 --color-traffic-upload: #c41022;
76 --color-success-bg: rgba(16, 124, 16, 0.15);
77 --color-error-bg: rgba(196, 43, 28, 0.15);
78
79 /* Interactive States */
80 --color-subtle-fill-rest: rgba(0, 0, 0, 0.0373);
81 --color-subtle-fill-hover: rgba(0, 0, 0, 0.0578);
82 --color-subtle-fill-pressed: rgba(0, 0, 0, 0.0241);
83
84 /* Stroke/Border Colors */
85 --color-stroke-surface: rgba(0, 0, 0, 0.0578);
86 --color-stroke-control-default: rgba(0, 0, 0, 0.0578);
87 --color-stroke-divider: rgba(0, 0, 0, 0.0578);
88 --color-stroke-focus: rgba(0, 0, 0, 0.0893);
89
90 /* -- Dark Theme -- */
91 --color-dark-background-base: rgba(30, 30, 30, 0.7);
92 --color-dark-background-elevated: rgba(22, 22, 22, 0.25);
93 --color-dark-background-elevated-x2: rgba(22, 22, 22, 0.8);
94
95 --color-dark-taskbar: rgba(43, 44, 45, 0.85);
96 --color-dark-widget-container: rgba(60, 60, 60, 0.7);
97
98 /* Surface Colors */
99 --color-dark-surface-secondary: rgba(255, 255, 255, 0.0419);
100 --color-dark-surface-disabled: rgba(255, 255, 255, 0.0419);
101
102 /* Text Colors */
103 --color-dark-text-primary: rgba(255, 255, 255, 1);
104 --color-dark-text-secondary: rgba(255, 255, 255, 0.786);
105 --color-dark-text-tertiary: rgba(255, 255, 255, 0.544);
106 --color-dark-text-disabled: rgba(255, 255, 255, 0.362);
107
108 /* Accent Colors */
109 --color-dark-accent-default: #60cdff;
110 --color-dark-accent-secondary: #0078d4;
111 --color-dark-accent-tertiary: rgba(96, 205, 255, 0.5);
112
113 /* Semantic Colors */
114 --color-dark-success: #6ccb5f;
115 --color-dark-warning: #fce100;
116 --color-dark-error: #ff99a4;
117
118 /* Component Colors */
119 --color-dark-traffic-download: var(--color-dark-success);
120 --color-dark-traffic-upload: var(--color-dark-error);
121 --color-dark-success-bg: rgba(108, 203, 95, 0.2);
122 --color-dark-error-bg: rgba(255, 153, 164, 0.2);
123
124 /* Interactive States */
125 --color-dark-subtle-fill-rest: rgba(255, 255, 255, 0.0605);
126 --color-dark-subtle-fill-hover: rgba(255, 255, 255, 0.0837);
127 --color-dark-subtle-fill-pressed: rgba(255, 255, 255, 0.0512);
128
129 /* Stroke/Border Colors */
130 --color-dark-stroke-surface: rgba(255, 255, 255, 0.0698);
131 --color-dark-stroke-control-default: rgba(255, 255, 255, 0.0838);
132 --color-dark-stroke-divider: rgba(255, 255, 255, 0.0838);
133 --color-dark-stroke-focus: rgba(255, 255, 255, 0.1047);
134}
135
136/* ----------------------------------------------------------------------------
137 Global reset
138 ---------------------------------------------------------------------------- */
139* {
140 font-size: var(--font-size-body);
141 color: var(--color-text-primary);
142 font-weight: var(--font-weight-regular);
143 font-family: var(--font-primary);
144 margin: 0;
145 padding: 0;
146}
147
148.dark * {
149 color: var(--color-dark-text-primary);
150}
151
152/* ----------------------------------------------------------------------------
153 Bar layout and labels
154 ---------------------------------------------------------------------------- */
155.yasb-panel {
156 padding: 0 var(--space-4);
157 margin: 0;
158 background-color: var(--color-background-base);
159 border-bottom: 1px solid var(--color-stroke-control-default);
160}
161
162.yasb-panel.dark {
163 background-color: var(--color-dark-background-base);
164 border-bottom: 1px solid var(--color-dark-stroke-control-default);
165}
166
167.widget {
168 padding: 0 var(--space-2);
169 margin: 0;
170}
171
172.widget .label {
173 padding: 0 var(--space-4);
174 font-size: var(--font-size-body);
175 color: var(--color-text-secondary);
176}
177
178*.dark .widget .label {
179 color: var(--color-dark-text-secondary);
180}
181
182.widget .label.alt {
183 padding: 0 var(--space-4);
184}
185
186.widget .label:hover {
187 color: var(--color-text-primary);
188}
189
190*.dark .widget .label:hover {
191 color: var(--color-dark-text-primary);
192}
193
194.widget .icon {
195 padding-top: 1px;
196 font-family: var(--font-icon);
197 font-size: var(--font-size-body);
198 color: var(--color-text-secondary);
199 margin-right: var(--space-4);
200}
201
202*.dark .widget .icon {
203 color: var(--color-dark-text-secondary);
204}
205
206.widget:hover .icon {
207 color: var(--color-text-primary);
208}
209
210*.dark .widget:hover .icon {
211 color: var(--color-dark-text-primary);
212}
213
214/* ----------------------------------------------------------------------------
215 Tooltips
216 ---------------------------------------------------------------------------- */
217.tooltip {
218 background-color: var(--color-background-elevated-x2);
219 border: 1px solid var(--color-stroke-surface);
220 border-radius: var(--radius-medium);
221 padding: var(--space-8) var(--space-12);
222 margin-top: var(--space-12);
223 font-size: var(--font-size-body);
224 font-family: var(--font-primary);
225 color: var(--color-text-primary);
226 font-weight: var(--font-weight-regular);
227}
228
229*.dark .tooltip,
230.tooltip.dark {
231 background-color: var(--color-dark-background-elevated-x2);
232 border: 1px solid var(--color-dark-stroke-surface);
233 color: var(--color-dark-text-primary);
234}
235
236/* ----------------------------------------------------------------------------
237 Context menus
238 ---------------------------------------------------------------------------- */
239.context-menu {
240 background-color: var(--color-dark-background-elevated);
241 border: 1px solid var(--color-dark-stroke-surface);
242 border-radius: var(--radius-medium);
243 padding: var(--space-4) 0;
244 font-family: var(--font-primary);
245 font-size: var(--font-size-body);
246 color: var(--color-dark-text-primary);
247}
248
249.context-menu .menu-checkbox {
250 font-family: var(--font-primary);
251 font-size: var(--font-size-body);
252 color: var(--color-dark-text-primary);
253 background-color: transparent;
254 padding: var(--space-4) var(--space-8);
255 margin: var(--space-2) var(--space-4);
256 border-radius: var(--radius-small);
257 border: 0;
258 min-width: var(--width-menu-sm);
259}
260
261.context-menu::right-arrow {
262 width: var(--space-8);
263 height: var(--space-8);
264 padding-right: var(--space-24);
265}
266
267.context-menu::item {
268 background-color: transparent;
269 padding: var(--space-4) var(--space-8);
270 margin: var(--space-2) var(--space-4);
271 border-radius: var(--radius-small);
272 border: 0;
273 min-width: var(--width-menu-sm);
274}
275
276.context-menu::item:selected,
277.context-menu .menu-checkbox:hover {
278 background-color: var(--color-dark-subtle-fill-hover) !important;
279 color: var(--color-dark-text-primary) !important;
280}
281
282.context-menu::separator {
283 height: 1px;
284 background-color: var(--color-dark-stroke-divider) !important;
285 margin: var(--space-4) var(--space-8);
286}
287
288.context-menu::item:disabled {
289 color: var(--color-dark-text-disabled) !important;
290 background-color: transparent;
291}
292
293.context-menu .menu-checkbox .checkbox {
294 border: none;
295 padding: var(--space-4) var(--space-12);
296 font-size: var(--font-size-body);
297 margin: 0;
298 color: var(--color-dark-text-primary) !important;
299 font-family: var(--font-primary);
300}
301
302.context-menu .submenu::item:disabled {
303 margin: 0;
304 padding-left: var(--space-16);
305}
306
307.context-menu .menu-checkbox .checkbox:unchecked {
308 color: var(--color-dark-text-tertiary) !important;
309}
310
311.context-menu .menu-checkbox .checkbox::indicator {
312 width: var(--space-12);
313 height: var(--space-12);
314 margin-left: 0;
315 margin-right: var(--space-8);
316}
317
318.context-menu .menu-checkbox .checkbox::indicator:unchecked {
319 background-color: var(--color-dark-surface-secondary) !important;
320 border-radius: var(--radius-small);
321}
322
323.context-menu .menu-checkbox .checkbox::indicator:checked {
324 background-color: var(--color-dark-accent-secondary) !important;
325 border-radius: var(--radius-small);
326}
327
328.context-menu .menu-checkbox .checkbox:focus {
329 outline: none;
330}
331
332/* ----------------------------------------------------------------------------
333 Widget containers
334 ---------------------------------------------------------------------------- */
335.widget-container {
336 padding: 1px var(--space-4);
337 margin: var(--space-2) 0;
338 background-color: var(--color-background-elevated);
339 border-radius: var(--radius-medium);
340 border: 1px solid var(--color-stroke-control-default);
341}
342
343*.dark .widget-container {
344 background-color: var(--color-dark-background-elevated);
345 border: 1px solid var(--color-dark-stroke-control-default);
346}
347
348.widget-container:hover {
349 background-color: var(--color-widget-container);
350 border-color: var(--color-stroke-focus);
351}
352
353*.dark .widget-container:hover {
354 background-color: var(--color-dark-widget-container);
355 border-color: var(--color-dark-stroke-focus);
356}
357
358/* ----------------------------------------------------------------------------
359 Shared bar widget styling
360 ---------------------------------------------------------------------------- */
361.microphone-widget .widget-container .label,
362.volume-widget .widget-container .label,
363.brightness-widget .widget-container .label,
364.wifi-widget .widget-container .label,
365.bluetooth-widget .widget-container .label,
366.battery-widget .widget-container .label {
367 color: var(--color-text-secondary);
368 font-family: var(--font-text);
369 font-weight: var(--font-weight-semibold);
370}
371
372*.dark .microphone-widget .widget-container .label,
373*.dark .volume-widget .widget-container .label,
374*.dark .brightness-widget .widget-container .label,
375*.dark .wifi-widget .widget-container .label,
376*.dark .bluetooth-widget .widget-container .label,
377*.dark .battery-widget .widget-container .label {
378 color: var(--color-dark-text-secondary);
379}
380
381.active-window-widget .widget-container .label,
382.cpu-widget .widget-container .label,
383.gpu-widget .widget-container .label,
384.memory-widget .widget-container .label,
385.disk-widget .widget-container .label {
386 color: var(--color-text-secondary);
387 font-family: var(--font-mono);
388 font-weight: var(--font-weight-semibold);
389}
390
391*.dark .active-window-widget .widget-container .label,
392*.dark .cpu-widget .widget-container .label,
393*.dark .gpu-widget .widget-container .label,
394*.dark .memory-widget .widget-container .label,
395*.dark .disk-widget .widget-container .label {
396 color: var(--color-dark-text-secondary);
397}
398
399.microphone-widget .icon,
400.volume-widget .icon,
401.brightness-widget .widget-container .icon,
402.wifi-widget .widget-container .icon,
403.bluetooth-widget .widget-container .icon,
404.battery-widget .widget-container .icon {
405 padding-left: var(--space-4);
406}
407
408.cpu-widget .widget-container .icon,
409.gpu-widget .widget-container .icon,
410.memory-widget .widget-container .icon {
411 padding-right: var(--space-4);
412}
413
414.task-view-widget .widget-container,
415.home-widget .widget-container,
416.power-menu-widget .widget-container {
417 background-color: transparent;
418 border: 0;
419}
420
421.task-view-widget .widget-container:hover,
422.home-widget .widget-container:hover,
423.power-menu-widget .widget-container:hover {
424 background-color: transparent;
425}
426
427/* ----------------------------------------------------------------------------
428 Shared flyout surfaces
429 ---------------------------------------------------------------------------- */
430.brightness-menu,
431.audio-menu,
432.microphone-menu,
433.wifi-menu,
434.bluetooth-menu,
435.calendar,
436.media-menu,
437.open-meteo-card {
438 background-color: rgba(249, 249, 249, 0.94);
439 color: var(--color-text-primary);
440 border: 1px solid var(--color-stroke-surface);
441 border-radius: var(--radius-large);
442 padding: var(--space-12);
443}
444
445*.dark .brightness-menu,
446*.dark .audio-menu,
447*.dark .microphone-menu,
448*.dark .wifi-menu,
449*.dark .bluetooth-menu,
450*.dark .calendar,
451*.dark .media-menu,
452*.dark .open-meteo-card {
453 background-color: rgba(32, 32, 32, 0.9);
454 color: var(--color-dark-text-primary);
455 border-color: var(--color-dark-stroke-control-default);
456}
457
458/* ----------------------------------------------------------------------------
459 Shared sound and brightness controls
460 ---------------------------------------------------------------------------- */
461.audio-menu,
462.microphone-menu {
463 min-width: var(--width-menu-md);
464 max-width: 360px;
465}
466
467.microphone-menu .microphone-container .device,
468.audio-menu .audio-container .device {
469 background-color: transparent;
470 border: none;
471 padding: var(--space-4) var(--space-8);
472 margin: var(--space-2) 0;
473 font-size: var(--font-size-body);
474 color: var(--color-text-secondary);
475 border-radius: var(--radius-small);
476}
477
478*.dark .microphone-menu .microphone-container .device,
479*.dark .audio-menu .audio-container .device {
480 color: var(--color-dark-text-secondary);
481}
482
483.microphone-menu .microphone-container .device:hover,
484.audio-menu .audio-container .device:hover {
485 background-color: var(--color-subtle-fill-hover);
486 color: var(--color-text-primary);
487}
488
489*.dark .microphone-menu .microphone-container .device:hover,
490*.dark .audio-menu .audio-container .device:hover {
491 background-color: var(--color-dark-subtle-fill-hover);
492 color: var(--color-dark-text-primary);
493}
494
495.microphone-menu .microphone-container .device.selected,
496.audio-menu .audio-container .device.selected {
497 background-color: var(--color-subtle-fill-rest);
498 color: var(--color-text-primary);
499}
500
501*.dark .microphone-menu .microphone-container .device.selected,
502*.dark .audio-menu .audio-container .device.selected {
503 background-color: var(--color-dark-subtle-fill-rest);
504 color: var(--color-dark-text-primary);
505}
506
507.audio-menu QSlider,
508.microphone-menu QSlider,
509.brightness-menu QSlider {
510 min-height: 24px;
511 border: none;
512 background-color: transparent;
513}
514
515.audio-menu QSlider::groove:horizontal,
516.microphone-menu QSlider::groove:horizontal,
517.brightness-menu QSlider::groove:horizontal {
518 height: 4px;
519 border: none;
520 border-radius: 2px;
521 background-color: rgba(0, 0, 0, 0.38);
522}
523
524*.dark .audio-menu QSlider::groove:horizontal,
525*.dark .microphone-menu QSlider::groove:horizontal,
526*.dark .brightness-menu QSlider::groove:horizontal {
527 background-color: rgba(255, 255, 255, 0.35);
528}
529
530.audio-menu QSlider::sub-page:horizontal,
531.microphone-menu QSlider::sub-page:horizontal,
532.brightness-menu QSlider::sub-page:horizontal {
533 background-color: var(--color-accent-default);
534 border-radius: 2px;
535}
536
537*.dark .audio-menu QSlider::sub-page:horizontal,
538*.dark .microphone-menu QSlider::sub-page:horizontal,
539*.dark .brightness-menu QSlider::sub-page:horizontal {
540 background-color: var(--color-dark-accent-default);
541}
542
543.audio-menu QSlider::handle:horizontal,
544.microphone-menu QSlider::handle:horizontal,
545.brightness-menu QSlider::handle:horizontal {
546 width: 10px;
547 height: 10px;
548 margin: -7px 0;
549 border: 4px solid #ffffff;
550 border-radius: 9px;
551 background-color: var(--color-accent-default);
552}
553
554*.dark .audio-menu QSlider::handle:horizontal,
555*.dark .microphone-menu QSlider::handle:horizontal,
556*.dark .brightness-menu QSlider::handle:horizontal {
557 background-color: var(--color-dark-accent-default);
558}
559
560.audio-menu QSlider::handle:horizontal:hover,
561.microphone-menu QSlider::handle:horizontal:hover,
562.brightness-menu QSlider::handle:horizontal:hover {
563 border-width: 3px;
564}
565
566.audio-menu QSlider::handle:horizontal:pressed,
567.microphone-menu QSlider::handle:horizontal:pressed,
568.brightness-menu QSlider::handle:horizontal:pressed {
569 border-width: 5px;
570}
571
572.audio-menu QSlider::sub-page:horizontal:disabled,
573.microphone-menu QSlider::sub-page:horizontal:disabled,
574.brightness-menu QSlider::sub-page:horizontal:disabled {
575 background-color: var(--color-text-disabled);
576}
577
578/* ----------------------------------------------------------------------------
579 Shared connection flyout controls
580 ---------------------------------------------------------------------------- */
581.wifi-menu .wifi-item,
582.bluetooth-menu .bluetooth-item {
583 min-height: var(--height-item-md);
584 padding: var(--space-4) var(--space-12);
585 margin: var(--space-2) var(--space-8) var(--space-2) var(--space-2);
586 border-radius: var(--radius-small);
587 border: 1px solid transparent;
588}
589
590.wifi-menu .wifi-item:hover,
591.bluetooth-menu .bluetooth-item:hover {
592 background-color: var(--color-subtle-fill-hover);
593 border-color: var(--color-stroke-control-default);
594}
595
596*.dark .wifi-menu .wifi-item:hover,
597*.dark .bluetooth-menu .bluetooth-item:hover {
598 background-color: var(--color-dark-subtle-fill-hover);
599 border-color: var(--color-dark-stroke-control-default);
600}
601
602.wifi-menu .wifi-item[active="true"],
603.bluetooth-menu .bluetooth-item.active {
604 background-color: var(--color-subtle-fill-rest);
605 min-height: var(--height-item-lg);
606}
607
608*.dark .wifi-menu .wifi-item[active="true"],
609*.dark .bluetooth-menu .bluetooth-item.active {
610 background-color: var(--color-dark-subtle-fill-rest);
611}
612
613.wifi-menu .header,
614.bluetooth-menu .header .title {
615 font-family: var(--font-text);
616 font-size: var(--font-size-subtitle);
617 font-weight: var(--font-weight-semibold);
618 padding: var(--space-12);
619}
620
621.wifi-menu .wifi-item .name,
622.bluetooth-menu .bluetooth-item .name {
623 font-size: var(--font-size-body-strong);
624 font-weight: var(--font-weight-semibold);
625}
626
627.wifi-menu .wifi-item .icon,
628.bluetooth-menu .bluetooth-item .icon {
629 font-family: var(--font-icon);
630 font-size: var(--font-size-title);
631 margin-right: var(--space-12);
632}
633
634.wifi-menu .wifi-item .connect,
635.bluetooth-menu .bluetooth-item .connect {
636 background-color: var(--color-accent-default);
637 color: white;
638 padding: var(--space-4) var(--space-16);
639 border-radius: var(--radius-small);
640 border: none;
641 font-weight: var(--font-weight-semibold);
642 margin-top: var(--space-8);
643}
644
645*.dark .wifi-menu .wifi-item .connect,
646*.dark .bluetooth-menu .bluetooth-item .connect {
647 background-color: var(--color-dark-accent-default);
648 color: black;
649}
650
651.wifi-menu .wifi-item .connect:hover,
652.bluetooth-menu .bluetooth-item .connect:hover {
653 background-color: var(--color-accent-secondary);
654}
655
656*.dark .wifi-menu .wifi-item .connect:hover,
657*.dark .bluetooth-menu .bluetooth-item .connect:hover {
658 background-color: var(--color-dark-accent-tertiary);
659 color: var(--color-dark-text-primary);
660}
661
662.wifi-menu .wifi-item .status,
663.bluetooth-menu .bluetooth-item .status {
664 font-size: var(--font-size-caption);
665 color: var(--color-text-tertiary);
666}
667
668*.dark .wifi-menu .wifi-item .status,
669*.dark .bluetooth-menu .bluetooth-item .status {
670 color: var(--color-dark-text-tertiary);
671}
672
673.wifi-menu .footer,
674.bluetooth-menu .footer {
675 padding: var(--space-8);
676 margin-top: var(--space-8);
677 border-top: 1px solid var(--color-stroke-divider);
678}
679
680.wifi-menu,
681.bluetooth-menu {
682 min-width: 340px;
683 max-width: var(--width-menu-lg);
684}
685
686.wifi-menu .footer .refresh-icon {
687 color: var(--color-text-primary);
688 font-family: var(--font-icon);
689 font-size: var(--font-size-subtitle);
690 font-weight: var(--font-weight-regular);
691 background-color: transparent;
692 border: none;
693 border-radius: var(--radius-small);
694 min-width: var(--size-icon-btn);
695 min-height: var(--size-icon-btn);
696}
697
698*.dark .wifi-menu .footer .refresh-icon {
699 color: var(--color-dark-text-primary);
700}
701
702.wifi-menu .footer .refresh-icon:hover {
703 color: var(--color-accent-default);
704 background-color: var(--color-subtle-fill-hover);
705}
706
707.wifi-menu .footer .settings-button,
708.bluetooth-menu .footer .settings-button {
709 background-color: transparent;
710 border: 1px solid transparent;
711 border-radius: var(--radius-small);
712 font-family: var(--font-text);
713 color: var(--color-text-secondary);
714 padding: var(--space-6) var(--space-8);
715}
716
717*.dark .wifi-menu .footer .settings-button,
718*.dark .bluetooth-menu .footer .settings-button {
719 color: var(--color-dark-text-secondary);
720}
721
722.wifi-menu .footer .settings-button:hover,
723.bluetooth-menu .footer .settings-button:hover {
724 background-color: var(--color-subtle-fill-hover);
725}
726
727*.dark .wifi-menu .footer .settings-button:hover,
728*.dark .bluetooth-menu .footer .settings-button:hover {
729 background-color: var(--color-dark-subtle-fill-hover);
730}
731
732.bluetooth-menu .footer .scan-icon {
733 font-family: var(--font-icon);
734 font-size: var(--font-size-subtitle);
735 font-weight: var(--font-weight-regular);
736 background-color: transparent;
737 border: none;
738 border-radius: var(--radius-small);
739 min-width: var(--size-icon-btn);
740 min-height: var(--size-icon-btn);
741}
742
743.bluetooth-menu .footer .scan-icon:hover {
744 background-color: var(--color-subtle-fill-hover);
745}
746
747*.dark .bluetooth-menu .footer .scan-icon:hover,
748*.dark .wifi-menu .footer .refresh-icon:hover {
749 background-color: var(--color-dark-subtle-fill-hover);
750}
751
752.wifi-menu .progress-bar,
753.bluetooth-menu .progress-bar {
754 min-height: 2px;
755 max-height: 2px;
756 color: var(--color-accent-default);
757 background-color: transparent;
758}
759
760*.dark .wifi-menu .progress-bar,
761*.dark .bluetooth-menu .progress-bar {
762 color: var(--color-dark-accent-default);
763}
764
765.wifi-menu .error-message,
766.bluetooth-menu .error-message {
767 padding: var(--space-8);
768 border-radius: var(--radius-small);
769 color: var(--color-error);
770 background-color: var(--color-error-bg);
771}
772
773*.dark .wifi-menu .error-message,
774*.dark .bluetooth-menu .error-message {
775 color: var(--color-dark-error);
776 background-color: var(--color-dark-error-bg);
777}
778
779/* ----------------------------------------------------------------------------
780 Task View
781 ---------------------------------------------------------------------------- */
782.task-view-widget .icon {
783 font-family: var(--font-icon);
784 font-size: var(--font-size-subtitle);
785 color: var(--color-text-secondary);
786}
787
788*.dark .task-view-widget .icon {
789 color: var(--color-dark-text-secondary);
790}
791
792.task-view-widget .icon:hover {
793 color: var(--color-accent-default);
794}
795
796*.dark .task-view-widget .icon:hover {
797 color: var(--color-dark-accent-default);
798}
799
800/* ----------------------------------------------------------------------------
801 Home
802 ---------------------------------------------------------------------------- */
803.home-widget .icon {
804 font-family: var(--font-icon-2);
805 font-size: var(--font-size-subtitle);
806 color: var(--color-text-secondary);
807}
808
809*.dark .home-widget .icon {
810 color: var(--color-dark-text-secondary);
811}
812
813.home-widget .icon:hover {
814 color: var(--color-accent-default);
815}
816
817*.dark .home-widget .icon:hover {
818 color: var(--color-dark-accent-default);
819}
820
821.home-menu {
822 background-color: var(--color-background-elevated);
823 border: 1px solid var(--color-stroke-surface);
824 border-radius: var(--radius-medium);
825 padding: var(--space-8) 0;
826 font-family: var(--font-primary);
827 font-size: var(--font-size-body);
828 color: var(--color-text-primary);
829}
830
831*.dark .home-menu {
832 background-color: var(--color-dark-background-elevated);
833 border: 1px solid var(--color-dark-stroke-surface);
834 color: var(--color-dark-text-primary);
835}
836
837.home-menu .menu-item {
838 background-color: transparent;
839 padding: var(--space-8) var(--space-12);
840 margin: var(--space-2) var(--space-8);
841 border-radius: var(--radius-small);
842 font-family: var(--font-icon-2);
843 border: 0;
844 min-width: 180px;
845}
846
847.home-menu .menu-item:hover {
848 background-color: var(--color-subtle-fill-hover);
849 color: var(--color-text-primary);
850}
851
852*.dark .home-menu .menu-item:hover {
853 background-color: var(--color-dark-subtle-fill-hover);
854 color: var(--color-dark-text-primary);
855}
856
857.home-menu .separator {
858 height: 1px;
859 min-height: 1px;
860 max-height: 1px;
861 background-color: var(--color-stroke-divider);
862 margin: var(--space-4) var(--space-8);
863}
864
865*.dark .home-menu .separator {
866 background-color: var(--color-dark-stroke-divider);
867}
868
869/* ----------------------------------------------------------------------------
870 Windows desktops
871 ---------------------------------------------------------------------------- */
872.windows-desktops .ws-btn {
873 color: var(--color-text-tertiary);
874 background-color: transparent;
875 border: none;
876 font-size: var(--font-size-body-strong);
877 padding: 1px 3px;
878 margin: -1px 0 0 0;
879 border-radius: var(--radius-small);
880 min-width: var(--space-16);
881 box-shadow: 0px 0px 1px black;
882}
883
884*.dark .windows-desktops .ws-btn {
885 color: var(--color-dark-text-tertiary);
886}
887
888.windows-desktops .ws-btn:hover {
889 color: var(--color-text-secondary);
890}
891
892*.dark .windows-desktops .ws-btn:hover {
893 color: var(--color-dark-text-secondary);
894}
895
896.windows-desktops .ws-btn.active {
897 color: var(--color-accent-default);
898 font-weight: var(--font-weight-semibold);
899}
900
901*.dark .windows-desktops .ws-btn.active {
902 color: var(--color-dark-accent-default);
903}
904
905.windows-desktops .context-menu {
906 background-color: var(--color-background-elevated);
907 border: 1px solid var(--color-stroke-surface);
908 border-radius: var(--radius-medium);
909 padding: var(--space-4);
910}
911
912*.dark .windows-desktops .context-menu {
913 background-color: var(--color-dark-background-elevated);
914 border: 1px solid var(--color-dark-stroke-surface);
915}
916
917.windows-desktops .context-menu .menu-item {
918 padding: var(--space-8) var(--space-16);
919 border-radius: var(--radius-small);
920 color: var(--color-text-secondary);
921}
922
923*.dark .windows-desktops .context-menu .menu-item {
924 color: var(--color-dark-text-secondary);
925}
926
927.windows-desktops .context-menu .menu-item:hover {
928 background-color: var(--color-subtle-fill-hover);
929 color: var(--color-text-primary);
930}
931
932*.dark .windows-desktops .context-menu .menu-item:hover {
933 background-color: var(--color-dark-subtle-fill-hover);
934 color: var(--color-dark-text-primary);
935}
936
937.windows-desktops .context-menu .separator {
938 height: 1px;
939 background-color: var(--color-stroke-divider);
940 margin: var(--space-4) 0;
941}
942
943*.dark .windows-desktops .context-menu .separator {
944 background-color: var(--color-dark-stroke-divider);
945}
946
947/* ----------------------------------------------------------------------------
948 Active window
949 ---------------------------------------------------------------------------- */
950.active-window-widget .widget-container .icon {
951 font-family: var(--font-icon);
952 font-size: var(--font-size-body);
953 padding-left: var(--space-6);
954}
955
956.active-window-widget .icon {
957 padding: 0;
958}
959
960/* ----------------------------------------------------------------------------
961 Taskbar
962 ---------------------------------------------------------------------------- */
963.taskbar-widget .app-container {
964 padding: 0 var(--space-4);
965 margin: 0 var(--space-2);
966 border-radius: var(--radius-small);
967}
968
969.taskbar-widget .app-container:hover {
970 background-color: var(--color-subtle-fill-hover);
971}
972
973*.dark .taskbar-widget .app-container:hover {
974 background-color: var(--color-dark-subtle-fill-hover);
975}
976
977.taskbar-widget .app-container.foreground {
978 background-color: var(--color-subtle-fill-rest);
979 border-left: 2px solid var(--color-accent-default);
980}
981
982*.dark .taskbar-widget .app-container.foreground {
983 background-color: var(--color-dark-subtle-fill-rest);
984 border-left: 2px solid var(--color-dark-accent-default);
985}
986
987.taskbar-widget .app-container .app-title {
988 padding-left: var(--space-4);
989 color: var(--color-text-secondary);
990 font-size: var(--font-size-body);
991}
992
993*.dark .taskbar-widget .app-container .app-title {
994 color: var(--color-dark-text-secondary);
995}
996
997.taskbar-widget .app-container.foreground .app-title {
998 color: var(--color-text-primary);
999 font-weight: var(--font-weight-semibold);
1000}
1001
1002*.dark .taskbar-widget .app-container.foreground .app-title {
1003 color: var(--color-dark-text-primary);
1004}
1005
1006.taskbar-preview {
1007 background-color: var(--color-taskbar);
1008 border: 1px solid var(--color-stroke-surface);
1009 border-radius: var(--radius-medium);
1010 padding: var(--space-8);
1011}
1012
1013*.dark .taskbar-preview {
1014 background-color: var(--color-dark-taskbar);
1015 border: 1px solid var(--color-dark-stroke-surface);
1016}
1017
1018.taskbar-preview .header {
1019 padding-bottom: var(--space-8);
1020 padding-top: var(--space-8);
1021}
1022
1023.taskbar-preview .header .title {
1024 color: var(--color-text-primary);
1025 font-weight: var(--font-weight-bold);
1026 font-size: var(--font-size-body);
1027}
1028
1029*.dark .taskbar-preview .header .title {
1030 color: var(--color-dark-text-primary);
1031}
1032
1033/* ----------------------------------------------------------------------------
1034 Applications
1035 ---------------------------------------------------------------------------- */
1036.apps-widget .widget-container {
1037 padding: 0 var(--space-4);
1038}
1039
1040.apps-widget .label {
1041 font-size: var(--font-size-body);
1042 color: var(--color-text-secondary);
1043}
1044
1045*.dark .apps-widget .label {
1046 color: var(--color-dark-text-secondary);
1047}
1048
1049.apps-widget .label:hover {
1050 color: var(--color-accent-default);
1051}
1052
1053*.dark .apps-widget .label:hover {
1054 color: var(--color-dark-accent-default);
1055}
1056
1057/* ----------------------------------------------------------------------------
1058 Media
1059 ---------------------------------------------------------------------------- */
1060.media-menu .title,
1061.media-menu .artist,
1062.media-menu .source {
1063 font-family: var(--font-text);
1064 margin-left: var(--space-12);
1065}
1066
1067.media-widget .label,
1068.media-widget .label.alt {
1069 margin-left: var(--space-4);
1070 padding: 0 var(--space-4) 0 22px;
1071 background-image: url("icons/music-note-light.svg");
1072 background-repeat: no-repeat;
1073 background-position: left center;
1074 background-origin: padding;
1075}
1076
1077*.dark .media-widget .label,
1078*.dark .media-widget .label.alt {
1079 background-image: url("icons/music-note-dark.svg");
1080}
1081
1082.media-widget .btn {
1083 font-family: var(--font-icon);
1084 font-size: var(--font-size-body-strong);
1085 color: var(--color-text-secondary);
1086 padding: var(--space-2) var(--space-4);
1087 margin: 0 var(--space-2);
1088 background-color: transparent;
1089 border: none;
1090 border-radius: var(--radius-small);
1091}
1092
1093*.dark .media-widget .btn {
1094 color: var(--color-dark-text-secondary);
1095}
1096
1097.media-widget .btn:hover {
1098 color: var(--color-text-primary);
1099 background-color: var(--color-subtle-fill-hover);
1100}
1101
1102*.dark .media-widget .btn:hover {
1103 color: var(--color-dark-text-primary);
1104 background-color: var(--color-dark-subtle-fill-hover);
1105}
1106
1107.media-widget .btn:pressed {
1108 background-color: var(--color-subtle-fill-pressed);
1109}
1110
1111*.dark .media-widget .btn:pressed {
1112 background-color: var(--color-dark-subtle-fill-pressed);
1113}
1114
1115.media-menu {
1116 min-width: var(--width-menu-lg);
1117 max-width: var(--width-menu-lg);
1118}
1119
1120.media-menu .title {
1121 font-size: var(--font-size-body-strong);
1122 font-weight: var(--font-weight-semibold);
1123 color: var(--color-text-primary);
1124}
1125
1126.media-menu .artist {
1127 font-size: var(--font-size-body);
1128 color: var(--color-text-secondary);
1129 margin-top: var(--space-2);
1130 margin-bottom: var(--space-4);
1131}
1132
1133.media-menu .source {
1134 font-size: var(--font-size-caption);
1135 color: var(--color-text-tertiary);
1136}
1137
1138*.dark .media-menu .title {
1139 color: var(--color-dark-text-primary);
1140}
1141
1142*.dark .media-menu .artist {
1143 color: var(--color-dark-text-secondary);
1144}
1145
1146*.dark .media-menu .source {
1147 color: var(--color-dark-text-tertiary);
1148}
1149
1150.media-menu .btn {
1151 font-family: var(--font-icon);
1152 font-size: var(--font-size-subtitle);
1153 margin: var(--space-12) var(--space-8) 0;
1154 min-width: var(--size-icon-btn);
1155 max-width: var(--size-icon-btn);
1156 min-height: var(--size-icon-btn);
1157 max-height: var(--size-icon-btn);
1158 border-radius: var(--radius-large);
1159 color: var(--color-text-secondary);
1160 background-color: var(--color-subtle-fill-rest);
1161 border: 1px solid var(--color-stroke-control-default);
1162}
1163
1164*.dark .media-menu .btn {
1165 color: var(--color-dark-text-secondary);
1166 background-color: var(--color-dark-subtle-fill-rest);
1167 border: 1px solid var(--color-dark-stroke-control-default);
1168}
1169
1170.media-menu .btn:hover {
1171 background-color: var(--color-subtle-fill-hover);
1172 color: var(--color-text-primary);
1173}
1174
1175*.dark .media-menu .btn:hover {
1176 background-color: var(--color-dark-subtle-fill-hover);
1177 color: var(--color-dark-text-primary);
1178}
1179
1180.media-menu .btn.prev {
1181 margin-left: var(--space-16);
1182}
1183
1184.media-menu .btn.play {
1185 background-color: var(--color-accent-default);
1186 color: var(--color-background-base);
1187 border-color: transparent;
1188}
1189
1190*.dark .media-menu .btn.play {
1191 background-color: var(--color-dark-accent-default);
1192 color: var(--color-dark-background-base);
1193}
1194
1195.media-menu .btn.play:hover {
1196 background-color: var(--color-accent-secondary);
1197}
1198
1199*.dark .media-menu .btn.play:hover {
1200 background-color: var(--color-dark-accent-secondary);
1201}
1202
1203.media-menu .btn.disabled,
1204.media-menu .btn.disabled:hover {
1205 color: var(--color-text-disabled);
1206 background-color: var(--color-surface-disabled);
1207 cursor: not-allowed;
1208}
1209
1210*.dark .media-menu .btn.disabled,
1211*.dark .media-menu .btn.disabled:hover {
1212 color: var(--color-dark-text-disabled);
1213 background-color: var(--color-dark-surface-disabled);
1214}
1215
1216.media-menu .playback-time {
1217 font-size: var(--font-size-caption);
1218 font-family: var(--font-text);
1219 color: var(--color-text-tertiary);
1220 margin-top: var(--space-16);
1221 min-width: 100px;
1222}
1223
1224*.dark .media-menu .playback-time {
1225 color: var(--color-dark-text-tertiary);
1226}
1227
1228.media-menu .progress-slider {
1229 border-radius: var(--radius-small);
1230 min-height: 20px;
1231 margin: var(--space-4) 0;
1232 background-color: transparent;
1233}
1234
1235.media-menu .progress-slider::groove:horizontal {
1236 height: 4px;
1237 background-color: rgba(0, 0, 0, 0.35);
1238 border: none;
1239 border-radius: 2px;
1240}
1241
1242*.dark .media-menu .progress-slider::groove:horizontal {
1243 background-color: rgba(255, 255, 255, 0.3);
1244}
1245
1246.media-menu .progress-slider::sub-page:horizontal {
1247 height: var(--space-4);
1248 background-color: var(--color-accent-default);
1249 border-radius: 2px;
1250}
1251
1252*.dark .media-menu .progress-slider::sub-page:horizontal {
1253 background-color: var(--color-dark-accent-default);
1254}
1255
1256.media-menu .progress-slider::handle:horizontal {
1257 width: 6px;
1258 height: 6px;
1259 margin: -4px 0;
1260 border: 3px solid #ffffff;
1261 border-radius: 6px;
1262 background-color: var(--color-accent-default);
1263}
1264
1265*.dark .media-menu .progress-slider::handle:horizontal {
1266 background-color: var(--color-dark-accent-default);
1267}
1268
1269/* ----------------------------------------------------------------------------
1270 CPU
1271 ---------------------------------------------------------------------------- */
1272.cpu-widget {
1273 cursor: crosshair;
1274}
1275
1276.cpu-widget .widget-container {
1277 padding: 0;
1278}
1279
1280/* ----------------------------------------------------------------------------
1281 Memory
1282 ---------------------------------------------------------------------------- */
1283.memory-widget .widget-container .label.status-low {
1284 color: var(--color-success);
1285}
1286
1287*.dark .memory-widget .widget-container .label.status-low {
1288 color: var(--color-dark-success);
1289}
1290
1291.memory-widget .widget-container .label.status-medium {
1292 color: var(--color-warning);
1293}
1294
1295*.dark .memory-widget .widget-container .label.status-medium {
1296 color: var(--color-dark-warning);
1297}
1298
1299.memory-widget .widget-container .label.status-high {
1300 color: var(--color-accent-default);
1301}
1302
1303*.dark .memory-widget .widget-container .label.status-high {
1304 color: var(--color-dark-accent-default);
1305}
1306
1307.memory-widget .widget-container .label.status-critical {
1308 color: var(--color-error);
1309}
1310
1311*.dark .memory-widget .widget-container .label.status-critical {
1312 color: var(--color-dark-error);
1313}
1314
1315/* ----------------------------------------------------------------------------
1316 Traffic
1317 ---------------------------------------------------------------------------- */
1318.traffic-widget .download,
1319.traffic-widget .upload {
1320 font-family: var(--font-mono);
1321 font-weight: var(--font-weight-semibold);
1322}
1323
1324.traffic-widget .download {
1325 color: var(--color-traffic-download);
1326}
1327
1328.traffic-widget .upload {
1329 color: var(--color-traffic-upload);
1330}
1331
1332.traffic-widget {
1333 width: 200px;
1334 min-width: 200px;
1335 max-width: 200px;
1336}
1337
1338*.dark .traffic-widget .download {
1339 color: var(--color-dark-traffic-download);
1340}
1341
1342*.dark .traffic-widget .upload {
1343 color: var(--color-dark-traffic-upload);
1344}
1345
1346.traffic-menu {
1347 background-color: var(--color-background-elevated);
1348 border: 1px solid var(--color-stroke-surface);
1349 border-radius: var(--radius-medium);
1350 min-width: var(--width-menu-md);
1351 padding: var(--space-12);
1352}
1353
1354*.dark .traffic-menu {
1355 background-color: var(--color-dark-background-elevated);
1356 border: 1px solid var(--color-dark-stroke-surface);
1357}
1358
1359.traffic-menu .header .title {
1360 padding: var(--space-12);
1361 font-size: var(--font-size-subtitle);
1362 font-weight: var(--font-weight-bold);
1363 color: var(--color-text-primary);
1364}
1365
1366*.dark .traffic-menu .header .title {
1367 color: var(--color-dark-text-primary);
1368}
1369
1370.traffic-menu .header .reset-button {
1371 font-size: var(--font-size-caption);
1372 padding: var(--space-4) var(--space-8);
1373 margin-right: var(--space-12);
1374 border-radius: var(--radius-medium);
1375 font-weight: var(--font-weight-semibold);
1376 background-color: transparent;
1377 border: 1px solid transparent;
1378 color: var(--color-text-secondary);
1379}
1380
1381*.dark .traffic-menu .header .reset-button {
1382 color: var(--color-dark-text-secondary);
1383}
1384
1385.traffic-menu .reset-button:hover {
1386 color: var(--color-text-primary);
1387 background-color: var(--color-subtle-fill-hover);
1388 border: 1px solid var(--color-stroke-control-default);
1389}
1390
1391*.dark .traffic-menu .reset-button:hover {
1392 color: var(--color-dark-text-primary);
1393 background-color: var(--color-dark-subtle-fill-hover);
1394 border: 1px solid var(--color-dark-stroke-control-default);
1395}
1396
1397.traffic-menu .download-speed,
1398.traffic-menu .upload-speed {
1399 background-color: transparent;
1400 padding: var(--space-8);
1401 margin: var(--space-12) var(--space-8) 0;
1402}
1403
1404.traffic-menu .speed-separator {
1405 max-width: 1px;
1406 background-color: var(--color-stroke-divider);
1407 margin: var(--space-24) 0 var(--space-12) 0;
1408}
1409
1410*.dark .traffic-menu .speed-separator {
1411 background-color: var(--color-dark-stroke-divider);
1412}
1413
1414.traffic-menu .upload-speed-value,
1415.traffic-menu .download-speed-value {
1416 font-size: var(--font-size-title);
1417 font-weight: var(--font-weight-bold);
1418 color: var(--color-text-primary);
1419}
1420
1421*.dark .traffic-menu .upload-speed-value,
1422*.dark .traffic-menu .download-speed-value {
1423 color: var(--color-dark-text-primary);
1424}
1425
1426.traffic-menu .upload-speed-unit,
1427.traffic-menu .download-speed-unit {
1428 font-size: var(--font-size-body);
1429 font-weight: var(--font-weight-semibold);
1430 padding-top: var(--space-4);
1431 color: var(--color-text-secondary);
1432}
1433
1434*.dark .traffic-menu .upload-speed-unit,
1435*.dark .traffic-menu .download-speed-unit {
1436 color: var(--color-dark-text-secondary);
1437}
1438
1439.traffic-menu .upload-speed-placeholder,
1440.traffic-menu .download-speed-placeholder {
1441 color: var(--color-text-tertiary);
1442 font-size: var(--font-size-caption);
1443 padding-bottom: var(--space-12);
1444}
1445
1446*.dark .traffic-menu .upload-speed-placeholder,
1447*.dark .traffic-menu .download-speed-placeholder {
1448 color: var(--color-dark-text-tertiary);
1449}
1450
1451.traffic-menu .section-title {
1452 font-size: var(--font-size-caption);
1453 font-weight: var(--font-weight-semibold);
1454 color: var(--color-text-primary);
1455 margin-bottom: var(--space-4);
1456}
1457
1458*.dark .traffic-menu .section-title {
1459 color: var(--color-dark-text-primary);
1460}
1461
1462.traffic-menu .session-section,
1463.traffic-menu .today-section,
1464.traffic-menu .alltime-section {
1465 margin: var(--space-8);
1466 padding: 0 var(--space-8) var(--space-8);
1467 background-color: transparent;
1468}
1469
1470.traffic-menu .data-text {
1471 font-size: var(--font-size-body);
1472 color: var(--color-text-secondary);
1473 padding: var(--space-2);
1474}
1475
1476*.dark .traffic-menu .data-text {
1477 color: var(--color-dark-text-secondary);
1478}
1479
1480.traffic-menu .data-value {
1481 font-weight: var(--font-weight-semibold);
1482 font-size: var(--font-size-body);
1483 padding: var(--space-2);
1484 color: var(--color-text-primary);
1485}
1486
1487*.dark .traffic-menu .data-value {
1488 color: var(--color-dark-text-primary);
1489}
1490
1491.traffic-menu .interface-info {
1492 margin-top: var(--space-8);
1493 border-top: 1px solid var(--color-stroke-divider);
1494 padding: var(--space-4) 0;
1495 font-size: var(--font-size-caption);
1496 color: var(--color-text-secondary);
1497 font-family: var(--font-text);
1498}
1499
1500*.dark .traffic-menu .interface-info {
1501 border-top: 1px solid var(--color-dark-stroke-divider);
1502 color: var(--color-dark-text-secondary);
1503}
1504
1505.traffic-menu .internet-info {
1506 font-size: var(--font-size-caption);
1507 color: var(--color-text-secondary);
1508 padding: var(--space-4) 0;
1509 font-family: var(--font-text);
1510}
1511
1512*.dark .traffic-menu .internet-info {
1513 color: var(--color-dark-text-secondary);
1514}
1515
1516.traffic-menu .internet-info.connected {
1517 background-color: var(--color-success-bg);
1518 color: var(--color-success);
1519 padding: var(--space-4) var(--space-8);
1520 border-radius: var(--radius-small);
1521}
1522
1523*.dark .traffic-menu .internet-info.connected {
1524 background-color: var(--color-dark-success-bg);
1525 color: var(--color-dark-success);
1526}
1527
1528.traffic-menu .internet-info.disconnected {
1529 background-color: var(--color-error-bg);
1530 color: var(--color-error);
1531 padding: var(--space-4) var(--space-8);
1532 border-radius: var(--radius-small);
1533}
1534
1535*.dark .traffic-menu .internet-info.disconnected {
1536 background-color: var(--color-dark-error-bg);
1537 color: var(--color-dark-error);
1538}
1539
1540/* ----------------------------------------------------------------------------
1541 Disks
1542 ---------------------------------------------------------------------------- */
1543.disk-widget .widget-container .icon {
1544 font-family: var(--font-icon-2);
1545 font-size: var(--font-size-body);
1546}
1547
1548.disk-group {
1549 background-color: var(--color-background-elevated);
1550 border: 1px solid var(--color-stroke-surface);
1551 border-radius: var(--radius-medium);
1552 padding: var(--space-8);
1553}
1554
1555*.dark .disk-group {
1556 background-color: var(--color-dark-background-elevated);
1557 border: 1px solid var(--color-dark-stroke-surface);
1558}
1559
1560.disk-group-row {
1561 min-width: 250px;
1562 max-width: 300px;
1563 min-height: var(--height-item-md);
1564 max-height: var(--height-item-md);
1565 margin: 0;
1566 padding: var(--space-12);
1567 border-radius: var(--radius-medium);
1568 border: 1px solid transparent;
1569}
1570
1571.disk-group-row:hover {
1572 background-color: var(--color-subtle-fill-hover);
1573 border: 1px solid var(--color-stroke-control-default);
1574}
1575
1576*.dark .disk-group-row:hover {
1577 background-color: var(--color-dark-subtle-fill-hover);
1578 border: 1px solid var(--color-dark-stroke-control-default);
1579}
1580
1581.disk-group-label-bar {
1582 margin-bottom: var(--space-8);
1583 max-height: var(--space-6);
1584 border: 0px solid transparent;
1585 background-color: var(--color-surface-secondary);
1586 border-radius: var(--radius-small);
1587}
1588
1589*.dark .disk-group-label-bar {
1590 background-color: var(--color-dark-surface-secondary);
1591}
1592
1593.disk-group-label-bar::chunk {
1594 background-color: var(--color-success);
1595 border-radius: var(--radius-small);
1596}
1597
1598*.dark .disk-group-label-bar::chunk {
1599 background-color: var(--color-dark-success);
1600}
1601
1602.disk-group-label {
1603 font-size: var(--font-size-body);
1604 color: var(--color-text-primary);
1605}
1606
1607*.dark .disk-group-label {
1608 color: var(--color-dark-text-primary);
1609}
1610
1611.disk-group-label-size {
1612 font-size: var(--font-size-body);
1613 color: var(--color-text-secondary);
1614}
1615
1616*.dark .disk-group-label-size {
1617 color: var(--color-dark-text-secondary);
1618}
1619
1620/* ----------------------------------------------------------------------------
1621 Volume and app mixer
1622 ---------------------------------------------------------------------------- */
1623.audio-menu .toggle-apps {
1624 background-color: transparent;
1625 border: none;
1626 padding: 0;
1627 margin: 0 0 0 var(--space-8);
1628 min-height: var(--size-icon-btn);
1629 max-height: var(--size-icon-btn);
1630 min-width: var(--size-icon-btn);
1631 max-width: var(--size-icon-btn);
1632 border-radius: var(--radius-small);
1633 font-family: var(--font-icon);
1634}
1635
1636.audio-menu .toggle-apps:hover {
1637 background-color: var(--color-subtle-fill-hover);
1638}
1639
1640*.dark .audio-menu .toggle-apps:hover {
1641 background-color: var(--color-dark-subtle-fill-hover);
1642}
1643
1644.audio-menu .toggle-apps.expanded {
1645 background-color: var(--color-subtle-fill-rest);
1646}
1647
1648*.dark .audio-menu .toggle-apps.expanded {
1649 background-color: var(--color-dark-subtle-fill-rest);
1650}
1651
1652.audio-menu .apps-container {
1653 padding: var(--space-8);
1654 margin-top: var(--space-12);
1655 border-radius: var(--radius-medium);
1656 background-color: var(--color-surface-secondary);
1657 border: 1px solid var(--color-stroke-divider);
1658}
1659
1660*.dark .audio-menu .apps-container {
1661 background-color: var(--color-dark-surface-secondary);
1662 border: 1px solid var(--color-dark-stroke-divider);
1663}
1664
1665.audio-menu .apps-container .app-volume .app-icon-container {
1666 min-width: var(--size-app-icon);
1667 min-height: var(--size-app-icon);
1668 max-width: var(--size-app-icon);
1669 max-height: var(--size-app-icon);
1670 border-radius: var(--radius-small);
1671 margin-right: var(--space-8);
1672}
1673
1674.audio-menu .apps-container .app-volume .app-icon-container:hover {
1675 background-color: var(--color-subtle-fill-hover);
1676}
1677
1678*.dark .audio-menu .apps-container .app-volume .app-icon-container:hover {
1679 background-color: var(--color-dark-subtle-fill-hover);
1680}
1681
1682*.dark .audio-menu .apps-container .app-label {
1683 color: var(--color-dark-text-secondary);
1684}
1685
1686.audio-menu .apps-container .app-volume {
1687 margin: var(--space-4) 0;
1688}
1689
1690.audio-menu .apps-container .app-label {
1691 font-family: var(--font-text);
1692 color: var(--color-text-secondary);
1693 font-weight: var(--font-weight-semibold);
1694 margin-bottom: var(--space-2);
1695}
1696
1697.audio-menu .app-slider::handle:horizontal:disabled {
1698 background-color: var(--color-text-disabled);
1699 border-color: var(--color-background-base);
1700}
1701
1702*.dark .audio-menu .app-slider::handle:horizontal:disabled {
1703 background-color: var(--color-dark-text-disabled);
1704 border-color: var(--color-dark-background-base);
1705}
1706
1707/* ----------------------------------------------------------------------------
1708 Brightness
1709 ---------------------------------------------------------------------------- */
1710.brightness-menu {
1711 min-width: 300px;
1712 max-width: 340px;
1713}
1714
1715.brightness-menu .monitor-row {
1716 margin: 10px;
1717}
1718
1719.brightness-menu .monitor-title {
1720 font-size: var(--font-size-body-strong);
1721 font-weight: var(--font-weight-semibold);
1722 margin: 0;
1723}
1724
1725.brightness-menu .monitor-subtitle {
1726 font-size: var(--font-size-body);
1727 color: var(--color-text-secondary);
1728 margin: var(--space-4) 0 var(--space-8) 0;
1729}
1730
1731*.dark .brightness-menu .monitor-subtitle {
1732 color: var(--color-dark-text-secondary);
1733}
1734
1735.brightness-menu .slider-rows {
1736 background-color: var(--color-surface-secondary);
1737 border: 1px solid var(--color-stroke-control-default);
1738 border-radius: var(--radius-medium);
1739 padding: var(--space-8);
1740}
1741
1742*.dark .brightness-menu .slider-rows {
1743 background-color: var(--color-dark-surface-secondary);
1744 border-color: var(--color-dark-stroke-control-default);
1745}
1746
1747.brightness-menu .slider-row {
1748 padding: 0;
1749}
1750
1751.brightness-menu .slider-icon {
1752 font-family: var(--font-icon);
1753 font-size: var(--font-size-subtitle);
1754 font-weight: var(--font-weight-regular);
1755 min-width: 24px;
1756 margin-right: var(--space-4);
1757}
1758
1759/* ----------------------------------------------------------------------------
1760 Wi-Fi
1761 ---------------------------------------------------------------------------- */
1762.wifi-menu {
1763 font-family: var(--font-primary);
1764 min-height: 280px;
1765 max-height: 400px;
1766}
1767
1768.wifi-menu .header {
1769 margin-bottom: 0;
1770 background-color: transparent;
1771 color: var(--color-text-primary);
1772 border-bottom: 1px solid var(--color-stroke-divider);
1773}
1774
1775*.dark .wifi-menu .header {
1776 color: var(--color-dark-text-primary);
1777 border-bottom: 1px solid var(--color-dark-stroke-divider);
1778}
1779
1780.wifi-menu .wifi-list {
1781 background-color: transparent;
1782 margin: var(--space-2);
1783}
1784
1785.wifi-menu .wifi-item[active="true"] {
1786 border: 1px solid var(--color-accent-default);
1787}
1788
1789*.dark .wifi-menu .wifi-item[active="true"] {
1790 border: 1px solid var(--color-dark-accent-default);
1791}
1792
1793.wifi-menu .wifi-item .icon {
1794 color: var(--color-text-secondary);
1795}
1796
1797*.dark .wifi-menu .wifi-item .icon {
1798 color: var(--color-dark-text-secondary);
1799}
1800
1801.wifi-menu .wifi-item .name {
1802 color: var(--color-text-primary);
1803}
1804
1805*.dark .wifi-menu .wifi-item .name {
1806 color: var(--color-dark-text-primary);
1807}
1808
1809.wifi-menu .footer {
1810 font-size: var(--font-size-caption);
1811 color: var(--color-text-tertiary);
1812 background-color: transparent;
1813}
1814
1815*.dark .wifi-menu .footer {
1816 color: var(--color-dark-text-tertiary);
1817 border-top: 1px solid var(--color-dark-stroke-divider);
1818}
1819
1820.wifi-menu .wifi-item .strength {
1821 color: var(--color-text-secondary);
1822 font-size: var(--font-size-body);
1823}
1824
1825*.dark .wifi-menu .wifi-item .strength {
1826 color: var(--color-dark-text-secondary);
1827}
1828
1829/* ----------------------------------------------------------------------------
1830 Bluetooth
1831 ---------------------------------------------------------------------------- */
1832.bluetooth-widget .icon.bt-off,
1833.bluetooth-widget .label.bt-off {
1834 color: var(--color-text-disabled);
1835}
1836
1837*.dark .bluetooth-widget .icon.bt-off,
1838*.dark .bluetooth-widget .label.bt-off {
1839 color: var(--color-dark-text-disabled);
1840}
1841
1842.bluetooth-widget .icon.bt-connected {
1843 color: var(--color-accent-default);
1844}
1845
1846*.dark .bluetooth-widget .icon.bt-connected {
1847 color: var(--color-dark-accent-default);
1848}
1849
1850.bluetooth-menu {
1851 min-height: 240px;
1852 max-height: 460px;
1853}
1854
1855.bluetooth-menu .bluetooth-list {
1856 background-color: transparent;
1857 border: none;
1858 margin: var(--space-2);
1859}
1860
1861.bluetooth-menu .section {
1862 background-color: transparent;
1863 border: none;
1864}
1865
1866.bluetooth-menu .header {
1867 padding: 0;
1868 border-bottom: 1px solid var(--color-stroke-divider);
1869}
1870
1871*.dark .bluetooth-menu .header {
1872 border-color: var(--color-dark-stroke-divider);
1873}
1874
1875.bluetooth-menu .header .title {
1876 margin: 0;
1877}
1878
1879.bluetooth-menu .header .power-button {
1880 margin-right: var(--space-12);
1881 padding: var(--space-4) var(--space-16);
1882 border: 1px solid var(--color-stroke-control-default);
1883 border-radius: var(--radius-small);
1884 background-color: var(--color-subtle-fill-rest);
1885}
1886
1887.bluetooth-menu .header .power-button:checked {
1888 background-color: var(--color-accent-default);
1889 color: white;
1890}
1891
1892*.dark .bluetooth-menu .header .power-button {
1893 border-color: var(--color-dark-stroke-control-default);
1894 background-color: var(--color-dark-subtle-fill-rest);
1895}
1896
1897*.dark .bluetooth-menu .header .power-button:checked {
1898 background-color: var(--color-dark-accent-default);
1899 color: #1a1a1a;
1900}
1901
1902.bluetooth-menu .section-title {
1903 padding: var(--space-12) var(--space-12) var(--space-4) var(--space-12);
1904 color: var(--color-text-secondary);
1905 font-weight: var(--font-weight-semibold);
1906}
1907
1908*.dark .bluetooth-menu .section-title {
1909 color: var(--color-dark-text-secondary);
1910}
1911
1912.bluetooth-menu .bluetooth-item.active {
1913 border-color: var(--color-accent-default);
1914}
1915
1916*.dark .bluetooth-menu .bluetooth-item.active {
1917 border-color: var(--color-dark-accent-default);
1918}
1919
1920.bluetooth-menu .bluetooth-item .icon {
1921 font-weight: var(--font-weight-regular);
1922 min-width: 24px;
1923}
1924
1925.bluetooth-menu .bluetooth-item .battery-icon {
1926 font-family: var(--font-icon);
1927 font-size: var(--font-size-title);
1928 font-weight: var(--font-weight-regular);
1929 min-width: 24px;
1930 margin-right: var(--space-12);
1931}
1932
1933.bluetooth-menu .bluetooth-item .battery {
1934 color: var(--color-text-secondary);
1935}
1936
1937*.dark .bluetooth-menu .bluetooth-item .battery {
1938 color: var(--color-dark-text-secondary);
1939}
1940
1941.bluetooth-menu .bluetooth-item .controls-container {
1942 padding: 0;
1943}
1944
1945*.dark .bluetooth-menu .footer {
1946 border-color: var(--color-dark-stroke-divider);
1947}
1948
1949/* ----------------------------------------------------------------------------
1950 Battery
1951 ---------------------------------------------------------------------------- */
1952.battery-widget .widget-container .icon.status-critical {
1953 color: var(--color-error);
1954}
1955
1956*.dark .battery-widget .widget-container .icon.status-critical {
1957 color: var(--color-dark-error);
1958}
1959
1960.battery-widget .widget-container .icon.status-low {
1961 color: var(--color-warning);
1962}
1963
1964*.dark .battery-widget .widget-container .icon.status-low {
1965 color: var(--color-dark-warning);
1966}
1967
1968.battery-widget .widget-container .icon.status-medium {
1969 color: var(--color-text-secondary);
1970}
1971
1972*.dark .battery-widget .widget-container .icon.status-medium {
1973 color: var(--color-dark-text-secondary);
1974}
1975
1976.battery-widget .widget-container .icon.status-high,
1977.battery-widget .widget-container .icon.status-full {
1978 color: var(--color-text-secondary);
1979}
1980
1981*.dark .battery-widget .widget-container .icon.status-high,
1982*.dark .battery-widget .widget-container .icon.status-full {
1983 color: var(--color-dark-text-secondary);
1984}
1985
1986.battery-widget .widget-container .icon.status-charging {
1987 color: var(--color-accent-default);
1988}
1989
1990*.dark .battery-widget .widget-container .icon.status-charging {
1991 color: var(--color-dark-accent-default);
1992}
1993
1994/* ----------------------------------------------------------------------------
1995 Clock and calendar
1996 ---------------------------------------------------------------------------- */
1997.calendar .day-label,
1998.calendar .month-label,
1999.calendar .date-label {
2000 font-family: var(--font-primary);
2001 color: var(--color-text-primary);
2002 min-width: var(--width-menu-sm);
2003 max-width: var(--width-menu-sm);
2004}
2005
2006.clock-widget .label {
2007 font-family: var(--font-text);
2008 font-size: var(--font-size-body-strong);
2009 font-weight: var(--font-weight-regular);
2010}
2011
2012.clock-widget .widget-container {
2013 background-color: transparent;
2014 border: transparent;
2015}
2016
2017.clock-widget .widget-container .icon {
2018 margin-right: var(--space-8);
2019 padding-left: var(--space-4);
2020}
2021
2022.calendar .calendar-table::item:selected {
2023 background-color: var(--color-accent-default);
2024 color: #ffffff;
2025}
2026
2027*.dark .calendar .calendar-table::item:selected {
2028 background-color: var(--color-dark-accent-default);
2029 color: #1a1a1a;
2030}
2031
2032.calendar .day-label {
2033 font-size: var(--font-size-subtitle);
2034 font-weight: var(--font-weight-semibold);
2035 margin-top: var(--space-8);
2036}
2037
2038.calendar .month-label {
2039 font-size: var(--font-size-body-strong);
2040 font-weight: var(--font-weight-semibold);
2041 margin-top: var(--space-16);
2042}
2043
2044.calendar .date-label {
2045 font-size: var(--font-size-display);
2046 font-weight: var(--font-weight-bold);
2047 margin-top: -var(--space-8);
2048}
2049
2050*.dark .calendar .day-label,
2051*.dark .calendar .month-label,
2052*.dark .calendar .date-label {
2053 color: var(--color-dark-text-primary);
2054}
2055
2056.calendar QCalendarWidget {
2057 min-width: 280px;
2058 max-width: 280px;
2059}
2060
2061.calendar .calendar-table {
2062 background: qlineargradient(
2063 x1: 0,
2064 y1: 0,
2065 x2: 1,
2066 y2: 0,
2067 stop: 0 rgba(0, 0, 0, 0.025),
2068 stop: 0.1428 rgba(0, 0, 0, 0.025),
2069 stop: 0.1429 transparent,
2070 stop: 0.8571 transparent,
2071 stop: 0.8572 rgba(0, 0, 0, 0.025),
2072 stop: 1 rgba(0, 0, 0, 0.025)
2073 );
2074 background-origin: content;
2075 background-clip: content;
2076 alternate-background-color: transparent;
2077 border: none;
2078 border-left: 1px solid var(--color-stroke-divider);
2079 margin-left: var(--space-8);
2080 padding-left: var(--space-12);
2081 outline: none;
2082}
2083
2084*.dark .calendar .calendar-table {
2085 background: qlineargradient(
2086 x1: 0,
2087 y1: 0,
2088 x2: 1,
2089 y2: 0,
2090 stop: 0 rgba(255, 255, 255, 0.035),
2091 stop: 0.1428 rgba(255, 255, 255, 0.035),
2092 stop: 0.1429 transparent,
2093 stop: 0.8571 transparent,
2094 stop: 0.8572 rgba(255, 255, 255, 0.035),
2095 stop: 1 rgba(255, 255, 255, 0.035)
2096 );
2097 border-left-color: var(--color-dark-stroke-divider);
2098}
2099
2100.calendar .calendar-table::item {
2101 background-color: transparent;
2102 border: none;
2103 border-radius: var(--radius-small);
2104}
2105
2106/* ----------------------------------------------------------------------------
2107 Weather
2108 ---------------------------------------------------------------------------- */
2109.open-meteo-card {
2110 min-width: 520px;
2111 max-width: 600px;
2112}
2113
2114.open-meteo-widget .widget-container {
2115 background-color: transparent;
2116 border: none;
2117}
2118
2119.open-meteo-widget .icon {
2120 font-family: var(--font-icon-2);
2121 margin-right: var(--space-8);
2122 padding-left: var(--space-4);
2123}
2124
2125.open-meteo-widget .label {
2126 font-family: var(--font-text);
2127 font-size: var(--font-size-body-strong);
2128 font-weight: var(--font-weight-regular);
2129}
2130
2131.open-meteo-card-today {
2132 padding: var(--space-8);
2133}
2134
2135.open-meteo-card-today .label {
2136 color: var(--color-text-secondary);
2137 font-size: var(--font-size-body);
2138}
2139
2140*.dark .open-meteo-card-today .label {
2141 color: var(--color-dark-text-secondary);
2142}
2143
2144.open-meteo-card-today .label.location {
2145 font-size: var(--font-size-title);
2146 font-weight: var(--font-weight-semibold);
2147 color: var(--color-text-primary);
2148 margin-bottom: var(--space-8);
2149}
2150
2151*.dark .open-meteo-card-today .label.location {
2152 color: var(--color-dark-text-primary);
2153}
2154
2155.open-meteo-card-today .label.sunrisesunset-icon {
2156 font-family: var(--font-icon-2);
2157}
2158
2159.open-meteo-card-today .label.sunrisesunset {
2160 color: var(--color-text-secondary);
2161 margin-top: var(--space-8);
2162}
2163
2164*.dark .open-meteo-card-today .label.sunrisesunset {
2165 color: var(--color-dark-text-secondary);
2166}
2167
2168.open-meteo-card-day {
2169 border: 1px solid var(--color-stroke-control-default);
2170 border-radius: var(--radius-medium);
2171 background-color: var(--color-surface-secondary);
2172 padding: var(--space-4);
2173 min-width: 56px;
2174}
2175
2176*.dark .open-meteo-card-day {
2177 border-color: var(--color-dark-stroke-control-default);
2178 background-color: var(--color-dark-surface-secondary);
2179}
2180
2181.open-meteo-card-day:hover,
2182.open-meteo-card-day.active {
2183 background-color: var(--color-subtle-fill-hover);
2184 border-color: var(--color-accent-default);
2185}
2186
2187*.dark .open-meteo-card-day:hover,
2188*.dark .open-meteo-card-day.active {
2189 background-color: var(--color-dark-subtle-fill-hover);
2190 border-color: var(--color-dark-accent-default);
2191}
2192
2193.open-meteo-card-day .day-name,
2194.open-meteo-card-day .day-temp-min {
2195 color: var(--color-text-secondary);
2196 font-size: var(--font-size-body);
2197}
2198
2199*.dark .open-meteo-card-day .day-name,
2200*.dark .open-meteo-card-day .day-temp-min {
2201 color: var(--color-dark-text-secondary);
2202}
2203
2204.open-meteo-card-day .day-temp-max {
2205 font-size: var(--font-size-body-strong);
2206 font-weight: var(--font-weight-semibold);
2207}
2208
2209.open-meteo-card .hourly-container {
2210 min-height: 120px;
2211 background-color: transparent;
2212 border: none;
2213}
2214
2215.open-meteo-card .hourly-data {
2216 font-family: var(--font-text);
2217 font-size: var(--font-size-body);
2218}
2219
2220.open-meteo-card .hourly-data.temperature {
2221 background-color: var(--color-accent-default);
2222}
2223
2224*.dark .open-meteo-card .hourly-data.temperature {
2225 background-color: var(--color-dark-accent-default);
2226}
2227
2228.open-meteo-card .hourly-data.rain {
2229 background-color: #4a90e2;
2230}
2231
2232.open-meteo-card .hourly-data.snow {
2233 background-color: #a0c4ff;
2234}
2235
2236.open-meteo-card .search-head {
2237 font-size: var(--font-size-subtitle);
2238 font-weight: var(--font-weight-semibold);
2239 padding-bottom: var(--space-8);
2240}
2241
2242.open-meteo-card .search-description,
2243.open-meteo-card .no-data-text {
2244 color: var(--color-text-secondary);
2245 padding-bottom: var(--space-12);
2246}
2247
2248*.dark .open-meteo-card .search-description,
2249*.dark .open-meteo-card .no-data-text {
2250 color: var(--color-dark-text-secondary);
2251}
2252
2253.open-meteo-card .no-data-icon {
2254 font-size: var(--font-size-display);
2255 font-family: var(--font-icon-2);
2256}
2257
2258.open-meteo-card .search-input {
2259 padding: var(--space-8) var(--space-12);
2260 border: 1px solid var(--color-stroke-control-default);
2261 border-bottom: 2px solid var(--color-text-tertiary);
2262 border-radius: var(--radius-small);
2263 background-color: var(--color-surface-secondary);
2264}
2265
2266*.dark .open-meteo-card .search-input {
2267 border-color: var(--color-dark-stroke-control-default);
2268 border-bottom-color: var(--color-dark-text-tertiary);
2269 background-color: var(--color-dark-surface-secondary);
2270}
2271
2272.open-meteo-card .search-input:focus {
2273 border-bottom-color: var(--color-accent-default);
2274}
2275
2276*.dark .open-meteo-card .search-input:focus {
2277 border-bottom-color: var(--color-dark-accent-default);
2278}
2279
2280.open-meteo-card .search-results {
2281 background-color: transparent;
2282 border: none;
2283}
2284
2285.open-meteo-card .search-results::item {
2286 padding: var(--space-8);
2287 border-radius: var(--radius-small);
2288}
2289
2290.open-meteo-card .search-results::item:hover,
2291.open-meteo-card .search-results::item:selected {
2292 background-color: var(--color-subtle-fill-hover);
2293}
2294
2295*.dark .open-meteo-card .search-results::item:hover,
2296*.dark .open-meteo-card .search-results::item:selected {
2297 background-color: var(--color-dark-subtle-fill-hover);
2298}
2299
2300/* ----------------------------------------------------------------------------
2301 Power menu
2302 ---------------------------------------------------------------------------- */
2303.power-menu-widget .label {
2304 font-family: var(--font-icon);
2305 font-size: var(--font-size-body);
2306 color: var(--color-dark-error);
2307 font-weight: var(--font-weight-semibold);
2308}
2309
2310*.dark .power-menu-widget .label {
2311 color: var(--color-dark-error);
2312}
2313
2314.power-menu-widget .label:hover {
2315 color: var(--color-accent-default);
2316}
2317
2318*.dark .power-menu-widget .label:hover {
2319 color: var(--color-dark-accent-default);
2320}
2321
2322.power-menu-popup {
2323 border-radius: var(--radius-large);
2324 border: 1px solid var(--color-dark-stroke-surface);
2325 padding: var(--space-12);
2326}
2327
2328.power-menu-popup .button {
2329 width: var(--width-menu-sm);
2330 height: var(--height-item-lg);
2331 padding: var(--space-12);
2332 margin: var(--space-4);
2333 background-color: var(--color-dark-subtle-fill-rest);
2334 border: 1px solid var(--color-dark-stroke-control-default);
2335 border-radius: var(--radius-medium);
2336 color: var(--color-dark-text-primary);
2337 font-family: var(--font-primary);
2338 cursor: pointer;
2339}
2340
2341.power-menu-popup .button:hover,
2342.power-menu-popup .button.hover {
2343 background-color: var(--color-dark-subtle-fill-hover);
2344 border-color: var(--color-dark-stroke-focus);
2345}
2346
2347.power-menu-popup .button:pressed {
2348 background-color: var(--color-dark-subtle-fill-pressed);
2349}
2350
2351.power-menu-popup .button .label {
2352 font-size: var(--font-size-body-strong);
2353 font-weight: var(--font-weight-semibold);
2354 color: var(--color-dark-text-primary);
2355 margin-bottom: var(--space-4);
2356}
2357
2358.power-menu-popup .button .icon {
2359 font-size: var(--font-size-icon-large);
2360 color: var(--color-dark-text-tertiary);
2361 margin-top: var(--space-12);
2362}
2363
2364.power-menu-popup .button.shutdown .icon {
2365 font-family: var(--font-icon);
2366 color: var(--color-dark-accent-default);
2367}
2368
2369.power-menu-popup .button.cancel .icon {
2370 color: var(--color-dark-error);
2371}
2372
2373.uptime {
2374 font-size: var(--font-size-subtitle);
2375 font-weight: var(--font-weight-semibold);
2376 color: var(--color-dark-text-primary);
2377 margin-bottom: var(--space-8);
2378}