1/* This stylesheet is generated, DO NOT EDIT */
2/* Copyright 2009, 2015 Red Hat, Inc.
3 *
4 * Portions adapted from Mx's data/style/default.css
5 * Copyright 2009 Intel Corporation
6 *
7 * This program is free software; you can redistribute it and/or modify it
8 * under the terms and conditions of the GNU Lesser General Public License,
9 * version 2.1, as published by the Free Software Foundation.
10 *
11 * This program is distributed in the hope it will be useful, but WITHOUT ANY
12 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
13 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for
14 * more details.
15 *
16 * You should have received a copy of the GNU Lesser General Public License
17 * along with this program; if not, write to the Free Software Foundation,
18 * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
19 */
20/* General Typography */
21.search-statustext, .app-folder-dialog .folder-name-container .folder-name-label,
22.app-folder-dialog .folder-name-container .folder-name-entry {
23 font-weight: 800;
24 font-size: 20pt;
25}
26
27.message-list .message-list-placeholder, .lg-debug-flags-header {
28 font-weight: 800;
29 font-size: 15pt;
30}
31
32.quick-toggle-menu .header .title {
33 font-weight: 700;
34 font-size: 15pt;
35}
36
37.bt-menu-placeholder.popup-menu-item {
38 font-weight: 700;
39 font-size: 13pt;
40}
41
42.background-app-item .title, .message-list-controls, .world-clocks-button .world-clocks-header, .calendar .calendar-month-label, .lg-extension-name {
43 font-weight: 700;
44 font-size: 11pt;
45}
46
47.quick-toggle-menu .header .subtitle, .app-menu .popup-inactive-menu-item:first-child > StLabel {
48 font-weight: 700;
49 font-size: 9pt;
50}
51
52.icon-label-button-container, .background-app-item .subtitle, .message .message-header .message-header-content .event-time {
53 font-weight: 400;
54 font-size: 9pt;
55}
56
57.calendar .calendar-week-number, .calendar .calendar-day-heading {
58 font-weight: 400;
59 font-size: 8pt;
60}
61
62.calendar .calendar-day-heading {
63 font-feature-settings: 'tnum';
64}
65
66.ripple-pointer-location {
67 width: 48px;
68 height: 48px;
69 border-radius: 24px;
70 background-color: rgba(255, 255, 255, 0.3);
71 box-shadow: 0 0 2px 2px white;
72}
73
74.pie-timer {
75 width: 60px;
76 height: 60px;
77 -pie-border-width: 3px;
78 -pie-border-color: #cba6f7;
79 -pie-background-color: rgba(255, 255, 255, 0.3);
80}
81
82.magnifier-zoom-region {
83 border: 2px solid #cba6f7;
84}
85
86.magnifier-zoom-region.full-screen {
87 border-width: 0;
88}
89
90.shell-link {
91 border-radius: 12px;
92 color: #8fcbe8;
93}
94
95.shell-link:hover {
96 color: #8fcbe8;
97 background-color: rgba(143, 203, 232, 0.15);
98}
99
100.shell-link:active {
101 color: #8fcbe8;
102 background-color: rgba(143, 203, 232, 0.25);
103}
104
105.lowres-icon {
106 icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
107}
108
109.icon-dropshadow {
110 icon-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
111}
112
113/* Buttons */
114.quick-settings-system-item .icon-button, .quick-settings-system-item .background-app-item .close-button, .background-app-item .quick-settings-system-item .close-button, .quick-settings-system-item .message .message-header .message-expand-button, .message .message-header .quick-settings-system-item .message-expand-button,
115.quick-settings-system-item .message .message-header .message-close-button,
116.message .message-header .quick-settings-system-item .message-close-button, .hotplug-notification-item, .button {
117 color: #eff1f5;
118 background-color: #313244;
119 box-shadow: none !important;
120}
121
122.quick-settings-system-item .icon-button:focus, .quick-settings-system-item .background-app-item .close-button:focus, .background-app-item .quick-settings-system-item .close-button:focus, .quick-settings-system-item .message .message-header .message-expand-button:focus, .message .message-header .quick-settings-system-item .message-expand-button:focus,
123.quick-settings-system-item .message .message-header .message-close-button:focus,
124.message .message-header .quick-settings-system-item .message-close-button:focus, .hotplug-notification-item:focus, .button:focus {
125 color: #eff1f5;
126 background-color: rgba(239, 241, 245, 0.08);
127 box-shadow: none !important;
128}
129
130.quick-settings-system-item .icon-button:hover, .quick-settings-system-item .background-app-item .close-button:hover, .background-app-item .quick-settings-system-item .close-button:hover, .quick-settings-system-item .message .message-header .message-expand-button:hover, .message .message-header .quick-settings-system-item .message-expand-button:hover,
131.quick-settings-system-item .message .message-header .message-close-button:hover,
132.message .message-header .quick-settings-system-item .message-close-button:hover, .hotplug-notification-item:hover, .button:hover {
133 color: #eff1f5;
134 background-color: rgba(239, 241, 245, 0.12);
135 box-shadow: none !important;
136}
137
138.quick-settings-system-item .icon-button:active, .quick-settings-system-item .background-app-item .close-button:active, .background-app-item .quick-settings-system-item .close-button:active, .quick-settings-system-item .message .message-header .message-expand-button:active, .message .message-header .quick-settings-system-item .message-expand-button:active,
139.quick-settings-system-item .message .message-header .message-close-button:active,
140.message .message-header .quick-settings-system-item .message-close-button:active, .hotplug-notification-item:active, .button:active {
141 color: #eff1f5;
142 background-color: rgba(239, 241, 245, 0.2);
143 box-shadow: none !important;
144}
145
146.quick-settings-system-item .icon-button:insensitive, .quick-settings-system-item .background-app-item .close-button:insensitive, .background-app-item .quick-settings-system-item .close-button:insensitive, .quick-settings-system-item .message .message-header .message-expand-button:insensitive, .message .message-header .quick-settings-system-item .message-expand-button:insensitive,
147.quick-settings-system-item .message .message-header .message-close-button:insensitive,
148.message .message-header .quick-settings-system-item .message-close-button:insensitive, .hotplug-notification-item:insensitive, .button:insensitive {
149 color: rgba(239, 241, 245, 0.35);
150 background-color: #313244;
151 box-shadow: none !important;
152}
153
154.lg-obj-inspector-button, .candidate-page-button, .modal-dialog-linked-button, .icon-button.flat, .background-app-item .flat.close-button, .message .message-header .flat.message-expand-button,
155.message .message-header .flat.message-close-button, .button.flat, .popup-menu .button {
156 color: #eff1f5;
157 background-color: transparent;
158 box-shadow: none !important;
159}
160
161.lg-obj-inspector-button:focus, .candidate-page-button:focus, .modal-dialog-linked-button:focus, .icon-button.flat:focus, .background-app-item .flat.close-button:focus, .message .message-header .flat.message-expand-button:focus,
162.message .message-header .flat.message-close-button:focus, .button.flat:focus, .popup-menu .button:focus {
163 color: #eff1f5;
164 background-color: rgba(239, 241, 245, 0.08);
165 box-shadow: none !important;
166}
167
168.lg-obj-inspector-button:hover, .candidate-page-button:hover, .modal-dialog-linked-button:hover, .icon-button.flat:hover, .background-app-item .flat.close-button:hover, .message .message-header .flat.message-expand-button:hover,
169.message .message-header .flat.message-close-button:hover, .button.flat:hover, .popup-menu .button:hover {
170 color: #eff1f5;
171 background-color: rgba(239, 241, 245, 0.12);
172}
173
174.lg-obj-inspector-button:active, .candidate-page-button:active, .modal-dialog-linked-button:active, .icon-button.flat:active, .background-app-item .flat.close-button:active, .message .message-header .flat.message-expand-button:active,
175.message .message-header .flat.message-close-button:active, .button.flat:active, .popup-menu .button:active {
176 color: #eff1f5;
177 background-color: rgba(239, 241, 245, 0.2);
178 box-shadow: none !important;
179}
180
181.lg-obj-inspector-button:insensitive, .candidate-page-button:insensitive, .modal-dialog-linked-button:insensitive, .icon-button.flat:insensitive, .background-app-item .flat.close-button:insensitive, .message .message-header .flat.message-expand-button:insensitive,
182.message .message-header .flat.message-close-button:insensitive, .button.flat:insensitive, .popup-menu .button:insensitive {
183 background-color: transparent;
184 color: rgba(239, 241, 245, 0.35);
185 box-shadow: none !important;
186}
187
188.icon-button.default, .background-app-item .default.close-button, .message .message-header .default.message-expand-button,
189.message .message-header .default.message-close-button, .button.default {
190 color: rgba(30, 30, 46, 0.87);
191 background-color: #cba6f7;
192 box-shadow: none !important;
193}
194
195.icon-button.default:focus, .background-app-item .default.close-button:focus, .message .message-header .default.message-expand-button:focus,
196.message .message-header .default.message-close-button:focus, .button.default:focus {
197 color: rgba(30, 30, 46, 0.87);
198 background-color: rgba(30, 30, 46, 0.08);
199 box-shadow: none !important;
200}
201
202.icon-button.default:hover, .background-app-item .default.close-button:hover, .message .message-header .default.message-expand-button:hover,
203.message .message-header .default.message-close-button:hover, .button.default:hover {
204 color: rgba(30, 30, 46, 0.87);
205 background-color: rgba(30, 30, 46, 0.12);
206 box-shadow: none !important;
207}
208
209.icon-button.default:insensitive, .background-app-item .default.close-button:insensitive, .message .message-header .default.message-expand-button:insensitive,
210.message .message-header .default.message-close-button:insensitive, .button.default:insensitive {
211 color: rgba(30, 30, 46, 0.35);
212 background-color: #cba6f7;
213 box-shadow: none !important;
214}
215
216.icon-button.default:active, .background-app-item .default.close-button:active, .message .message-header .default.message-expand-button:active,
217.message .message-header .default.message-close-button:active, .button.default:active {
218 color: rgba(30, 30, 46, 0.87);
219 background-color: rgba(30, 30, 46, 0.2);
220 box-shadow: none !important;
221}
222
223.button {
224 min-height: 20px;
225 padding: 6px 12px;
226 border-radius: 12px;
227 border: none;
228}
229
230.icon-button, .background-app-item .close-button, .message .message-header .message-expand-button,
231.message .message-header .message-close-button {
232 border-radius: 9999px;
233 padding: 6px;
234 min-height: 1.091em;
235}
236
237.icon-button StIcon, .background-app-item .close-button StIcon, .message .message-header .message-expand-button StIcon,
238.message .message-header .message-close-button StIcon {
239 icon-size: 1.091em;
240 -st-icon-style: symbolic;
241}
242
243.screenshot-ui-show-pointer-button, .screenshot-ui-type-button {
244 color: #eff1f5;
245 background-color: transparent;
246 box-shadow: none !important;
247}
248
249.screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive {
250 color: rgba(239, 241, 245, 0.35);
251 background-color: #1e1e2e;
252 box-shadow: none !important;
253}
254
255.screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus {
256 color: #eff1f5;
257 background-color: rgba(239, 241, 245, 0.08);
258 box-shadow: none !important;
259}
260
261.screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover {
262 color: #eff1f5;
263 background-color: rgba(239, 241, 245, 0.12);
264 box-shadow: none !important;
265}
266
267.screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active {
268 color: #eff1f5;
269 background-color: rgba(239, 241, 245, 0.2);
270 box-shadow: none !important;
271}
272
273.screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked {
274 color: rgba(30, 30, 46, 0.87);
275 background-color: #cba6f7;
276 box-shadow: none !important;
277}
278
279/* Check Boxes */
280.check-box StBoxLayout {
281 spacing: 0.8em;
282}
283
284.check-box StBin {
285 width: 24px;
286 height: 24px;
287 padding: 3px;
288}
289
290.check-box StBin, .check-box:focus StBin {
291 background-image: url("assets/checkbox-off.svg");
292}
293
294.check-box:hover StBin {
295 background-image: url("assets/checkbox-off-hover.svg");
296}
297
298.check-box:active StBin {
299 background-image: url("assets/checkbox-off-active.svg");
300}
301
302.check-box:checked StBin, .check-box:focus:checked StBin {
303 background-image: url("assets/checkbox-dark.svg");
304}
305
306/* Activities Ripple */
307.ripple-box {
308 background-color: rgba(203, 166, 247, 0.35);
309 box-shadow: 0 0 2px 2px white;
310 width: 52px;
311 height: 52px;
312 border-radius: 0 0 52px 0;
313}
314
315.ripple-box:rtl {
316 border-radius: 0 0 0 52px;
317}
318
319/* Modal Dialogs */
320.candidate-popup-content, .modal-dialog {
321 background-color: #292c3c;
322 border-radius: 21px;
323 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
324}
325
326.modal-dialog-linked-button:last-child {
327 color: #1e1e2e;
328 background-color: #cba6f7;
329}
330
331.modal-dialog-linked-button:hover:last-child {
332 color: #1e1e2e;
333 background-color: #e4d0fb;
334}
335
336.modal-dialog-linked-button:active:last-child {
337 color: #1e1e2e;
338 background-color: #bd8ff5;
339}
340
341.modal-dialog-linked-button:insensitive:last-child {
342 color: #1e1e2e;
343 background-color: rgba(203, 166, 247, 0.05);
344}
345
346.headline {
347 font-size: 13pt;
348}
349
350.modal-dialog {
351 color: rgba(239, 241, 245, 0.7);
352 padding: 0 6px 6px 6px;
353}
354
355.modal-dialog-linked-button {
356 min-height: 32px !important;
357 padding: 6px !important;
358 margin: 3px !important;
359 border: none !important;
360 border-radius: 12px;
361}
362
363.modal-dialog-linked-button:first-child {
364 background-color: rgba(239, 241, 245, 0.04);
365}
366
367.modal-dialog-linked-button:first-child:focus {
368 color: #eff1f5;
369 background-color: rgba(239, 241, 245, 0.08);
370 box-shadow: none !important;
371}
372
373.modal-dialog-linked-button:first-child:hover {
374 color: #eff1f5;
375 background-color: rgba(239, 241, 245, 0.12);
376}
377
378.modal-dialog-linked-button:first-child:active {
379 color: #eff1f5;
380 background-color: rgba(239, 241, 245, 0.2);
381 box-shadow: none !important;
382}
383
384.modal-dialog .modal-dialog-content-box {
385 margin: 30px 42px;
386 spacing: 30px;
387 max-width: 28em;
388}
389
390.end-session-dialog {
391 width: 30em;
392}
393
394.end-session-dialog .end-session-dialog-battery-warning,
395.end-session-dialog .dialog-list-title {
396 color: #df8e1d;
397}
398
399.message-dialog-content {
400 spacing: 18px;
401}
402
403.message-dialog-content .message-dialog-title {
404 text-align: center;
405 font-size: 18pt;
406 font-weight: 800;
407}
408
409.message-dialog-content .message-dialog-title.lightweight {
410 font-size: 13pt;
411 font-weight: 800;
412}
413
414.message-dialog-content .message-dialog-description {
415 text-align: center;
416}
417
418.dialog-list {
419 spacing: 18px;
420}
421
422.dialog-list .dialog-list-title {
423 text-align: center;
424 font-weight: bold;
425}
426
427.dialog-list .dialog-list-scrollview {
428 max-height: 200px;
429}
430
431.dialog-list .dialog-list-box {
432 spacing: 1em;
433}
434
435.dialog-list .dialog-list-box .dialog-list-item {
436 spacing: 1em;
437}
438
439.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title {
440 font-weight: bold;
441}
442
443.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description {
444 color: rgba(239, 241, 245, 0.7);
445 font-size: 11pt;
446}
447
448.run-dialog .modal-dialog-content-box {
449 margin-top: 24px;
450 margin-bottom: 12px;
451}
452
453.run-dialog .run-dialog-entry {
454 width: 20em;
455}
456
457.run-dialog .run-dialog-description {
458 text-align: center;
459 color: rgba(239, 241, 245, 0.7);
460 font-size: 11pt;
461}
462
463.prompt-dialog {
464 width: 28em;
465}
466
467.prompt-dialog .modal-dialog-content-box {
468 margin-bottom: 24px;
469}
470
471.prompt-dialog-password-grid {
472 spacing-rows: 8px;
473 spacing-columns: 4px;
474}
475
476.prompt-dialog-password-grid .prompt-dialog-password-entry {
477 width: auto;
478}
479
480.prompt-dialog-password-grid .prompt-dialog-password-entry:ltr {
481 margin-left: 20px;
482}
483
484.prompt-dialog-password-grid .prompt-dialog-password-entry:rtl {
485 margin-right: 20px;
486}
487
488.prompt-dialog-password-layout {
489 spacing: 8px;
490}
491
492.prompt-dialog-password-entry {
493 width: 20em;
494}
495
496.prompt-dialog-error-label,
497.prompt-dialog-info-label,
498.prompt-dialog-null-label {
499 text-align: center;
500 font-size: 11pt;
501 margin: 6px;
502}
503
504.prompt-dialog-error-label {
505 color: #d20f39;
506}
507
508.prompt-dialog-info-label,
509.prompt-dialog-null-label {
510 color: rgba(239, 241, 245, 0.5);
511}
512
513.polkit-dialog-user-layout {
514 text-align: center;
515 spacing: 8px;
516 margin-bottom: 6px;
517}
518
519.polkit-dialog-user-layout .polkit-dialog-user-root-label {
520 color: #df8e1d;
521}
522
523.audio-device-selection-dialog .modal-dialog-content-box {
524 margin-bottom: 28px;
525}
526
527.audio-device-selection-dialog .audio-selection-box {
528 spacing: 20px;
529}
530
531.audio-selection-device {
532 border: 1px solid rgba(239, 241, 245, 0.12);
533 border-radius: 12px;
534}
535
536.audio-selection-device:hover, .audio-selection-device:focus {
537 background-color: rgba(239, 241, 245, 0.12);
538}
539
540.audio-selection-device:active {
541 background-color: #cba6f7;
542 color: rgba(30, 30, 46, 0.87);
543}
544
545.audio-selection-device-box {
546 padding: 18px;
547 spacing: 18px;
548}
549
550.audio-selection-device-icon {
551 icon-size: 64px;
552}
553
554.welcome-dialog-image {
555 background-image: url("resource:///org/gnome/shell/theme/gnome-shell-start.svg");
556 background-size: contain;
557 height: 300px;
558 width: 300px;
559}
560
561/* Entries */
562StEntry,
563.popup-menu .search-entry {
564 min-height: 20px;
565 padding: 6px 12px;
566 margin: 2px;
567 border-radius: 12px;
568 color: #eff1f5;
569 caret-color: #eff1f5;
570 selection-background-color: #cba6f7;
571 selected-color: rgba(30, 30, 46, 0.87);
572 color: #eff1f5;
573 background-color: rgba(239, 241, 245, 0.04);
574 border: 2px solid transparent !important;
575 box-shadow: none !important;
576}
577
578StEntry:hover,
579.popup-menu .search-entry:hover {
580 color: #eff1f5;
581 background-color: rgba(239, 241, 245, 0.04);
582 border: 2px solid rgba(239, 241, 245, 0.3) !important;
583 box-shadow: none !important;
584}
585
586StEntry:focus,
587.popup-menu .search-entry:focus {
588 color: #eff1f5;
589 background-color: rgba(239, 241, 245, 0.04);
590 border: 2px solid #cba6f7 !important;
591 box-shadow: none !important;
592}
593
594StEntry:insensitive,
595.popup-menu .search-entry:insensitive {
596 background-color: rgba(239, 241, 245, 0.04);
597 color: rgba(239, 241, 245, 0.35);
598 box-shadow: none !important;
599}
600
601StEntry StIcon.capslock-warning,
602.popup-menu .search-entry StIcon.capslock-warning {
603 icon-size: 16px;
604 warning-color: #df8e1d;
605 padding: 0;
606}
607
608StEntry StIcon.peek-password,
609.popup-menu .search-entry StIcon.peek-password {
610 icon-size: 16px;
611 padding: 0 4px;
612}
613
614StEntry StLabel.hint-text,
615.popup-menu .search-entry StLabel.hint-text {
616 margin-left: 2px;
617 color: rgba(239, 241, 245, 0.5);
618}
619
620.hotplug-notification-item {
621 padding: 12px;
622 border-style: solid;
623 border-width: 0;
624 border-left-width: 0;
625 border-bottom-width: 0;
626}
627
628.hotplug-notification-item:first-child {
629 border-radius: 0 0 0 12px;
630}
631
632.hotplug-notification-item:last-child {
633 border-right-width: 0;
634 border-radius: 0 0 12px 0;
635}
636
637.hotplug-notification-item:first-child:last-child {
638 border-radius: 0 0 12px 12px;
639}
640
641.hotplug-notification-item-icon {
642 icon-size: 24px;
643 padding: 0 4px;
644}
645
646.candidate-popup-boxpointer {
647 -arrow-border-radius: 2px;
648 -arrow-background-color: transparent;
649 -arrow-border-width: 0;
650 -arrow-border-color: transparent;
651 -arrow-base: 64px;
652 -arrow-rise: 12px;
653}
654
655.candidate-popup-content {
656 color: rgba(239, 241, 245, 0.7);
657 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
658 border: none;
659 margin: 3px 8px;
660 padding: 6px;
661 spacing: 6px;
662 border-radius: 12px;
663}
664
665.candidate-index {
666 padding: 0 0.5em 0 0;
667 color: rgba(239, 241, 245, 0.7);
668}
669
670.candidate-box:selected .candidate-index {
671 color: rgba(30, 30, 46, 0.6);
672}
673
674.candidate-box {
675 padding: 0.3em 0.5em 0.3em 0.5em;
676 margin-right: 2px;
677 border-radius: 6px;
678 color: rgba(239, 241, 245, 0.7);
679}
680
681.candidate-box:hover {
682 background-color: rgba(239, 241, 245, 0.12);
683 color: #eff1f5;
684}
685
686.candidate-box:active {
687 background-color: rgba(239, 241, 245, 0.3);
688 color: #eff1f5;
689}
690
691.candidate-box:selected {
692 background-color: #cba6f7;
693 color: rgba(30, 30, 46, 0.87);
694}
695
696.candidate-box:last-child {
697 margin-right: 0;
698}
699
700.candidate-page-button-box {
701 height: 2em;
702}
703
704.vertical .candidate-page-button-box {
705 padding-top: 0.5em;
706}
707
708.horizontal .candidate-page-button-box {
709 padding-left: 0.5em;
710}
711
712.candidate-page-button {
713 padding: 4px 8px;
714 border-radius: 6px;
715}
716
717.candidate-page-button-previous,
718.candidate-page-button-next {
719 border-radius: 6px;
720}
721
722.candidate-page-button-icon {
723 icon-size: 1em;
724}
725
726/* On-screen Keyboard */
727#keyboard {
728 background-color: #1d1d1d;
729 box-shadow: none;
730}
731
732#keyboard .page-indicator {
733 padding: 6px;
734}
735
736#keyboard .page-indicator .page-indicator-icon {
737 width: 8px;
738 height: 8px;
739}
740
741.key-container,
742.keyboard-layout {
743 padding: 4px;
744 spacing: 4px;
745}
746
747.keyboard-key {
748 font-size: 17pt;
749 font-weight: bold;
750 min-height: 1.2em;
751 min-width: 1.2em;
752 padding: 0 !important;
753 border-radius: 15px;
754 border: none;
755 color: rgba(239, 241, 245, 0.7);
756 background-color: #707070;
757 box-shadow: inset 0 -1px rgba(0, 0, 0, 0.85);
758}
759
760.keyboard-key:focus, .keyboard-key:hover {
761 color: #eff1f5;
762 background-color: #656565;
763}
764
765.keyboard-key:checked, .keyboard-key:active {
766 color: #eff1f5;
767 background-color: #717171;
768}
769
770.keyboard-key:grayed {
771 background-color: #4b4b4b;
772 color: rgba(239, 241, 245, 0.7);
773}
774
775.keyboard-key.default-key {
776 background-color: #4b4b4b;
777 box-shadow: inset 0 -1px rgba(0, 0, 0, 0.85);
778}
779
780.keyboard-key.default-key:focus, .keyboard-key.default-key:hover {
781 color: #eff1f5;
782 background-color: #585858;
783}
784
785.keyboard-key.default-key:checked, .keyboard-key.default-key:active {
786 color: #eff1f5;
787 background-color: #6a6a6a;
788}
789
790.keyboard-key.enter-key {
791 color: rgba(30, 30, 46, 0.87);
792 background-color: #cba6f7;
793}
794
795.keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover {
796 color: rgba(30, 30, 46, 0.87);
797 background-color: #d9bdf9;
798}
799
800.keyboard-key.enter-key:checked, .keyboard-key.enter-key:active {
801 color: rgba(30, 30, 46, 0.87);
802 background-color: #b077f3;
803}
804
805.keyboard-key.shift-key-uppercase, .keyboard-key.shift-key-uppercase:focus, .keyboard-key.shift-key-uppercase:hover, .keyboard-key.shift-key-uppercase:checked, .keyboard-key.shift-key-uppercase:active {
806 color: #cba6f7;
807}
808
809.keyboard-key StIcon {
810 icon-size: 1.125em;
811}
812
813.keyboard-subkeys {
814 color: inherit;
815 -arrow-border-radius: 18px;
816 -arrow-background-color: #323233;
817 -arrow-border-width: 0;
818 -arrow-border-color: transparent;
819 -arrow-base: 20px;
820 -arrow-rise: 10px;
821 -boxpointer-gap: 6px;
822 box-shadow: inset 0 -1px rgba(0, 0, 0, 0.85);
823}
824
825.emoji-page .keyboard-key {
826 background-color: transparent;
827 border: none;
828 color: initial;
829}
830
831.emoji-panel .keyboard-key:latched {
832 border: none;
833 background-color: #cba6f7;
834}
835
836.word-suggestions {
837 font-size: 14pt;
838 spacing: 12px;
839 min-height: 20pt;
840}
841
842/* Login Dialog */
843#lockDialogGroup {
844 background-color: #1e1e2e;
845}
846
847.login-dialog-banner-view {
848 padding-top: 24px;
849 max-width: 23em;
850}
851
852.login-dialog,
853.unlock-dialog {
854 border: none;
855 background-color: transparent;
856}
857
858.login-dialog StEntry,
859.unlock-dialog StEntry {
860 selection-background-color: #cba6f7;
861 selected-color: rgba(30, 30, 46, 0.87);
862 padding: 4px 8px;
863 min-height: 26px;
864 border-radius: 9999px;
865 caret-color: rgba(30, 30, 46, 0.87);
866 background-color: rgba(239, 241, 245, 0.04);
867 border-radius: 0;
868 border: none !important;
869 box-shadow: inset 0 -1px rgba(30, 30, 46, 0.15) !important;
870 color: rgba(30, 30, 46, 0.87);
871}
872
873.login-dialog StEntry:focus,
874.unlock-dialog StEntry:focus {
875 border: none !important;
876 background-color: rgba(239, 241, 245, 0.04);
877 box-shadow: inset 0 -2px #cba6f7 !important;
878 color: rgba(30, 30, 46, 0.87);
879}
880
881.login-dialog StEntry:insensitive,
882.unlock-dialog StEntry:insensitive {
883 border: none !important;
884 background-color: rgba(239, 241, 245, 0.04);
885 color: rgba(30, 30, 46, 0.35);
886}
887
888.login-dialog StEntry StLabel.hint-text,
889.unlock-dialog StEntry StLabel.hint-text {
890 color: rgba(30, 30, 46, 0.38);
891}
892
893.login-dialog .modal-dialog-button-box,
894.unlock-dialog .modal-dialog-button-box {
895 spacing: 3px;
896}
897
898.login-dialog .modal-dialog-button,
899.unlock-dialog .modal-dialog-button {
900 padding: 0 16px;
901 border: none;
902 color: rgba(30, 30, 46, 0.87);
903 background-color: transparent;
904 box-shadow: none !important;
905}
906
907.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus,
908.unlock-dialog .modal-dialog-button:hover,
909.unlock-dialog .modal-dialog-button:focus {
910 color: rgba(30, 30, 46, 0.87);
911 background-color: rgba(239, 241, 245, 0.12);
912}
913
914.login-dialog .modal-dialog-button:active,
915.unlock-dialog .modal-dialog-button:active {
916 color: rgba(30, 30, 46, 0.87);
917 background-color: rgba(239, 241, 245, 0.2);
918 box-shadow: none !important;
919}
920
921.login-dialog .modal-dialog-button:insensitive,
922.unlock-dialog .modal-dialog-button:insensitive {
923 background-color: transparent;
924 color: rgba(30, 30, 46, 0.35);
925 box-shadow: none !important;
926}
927
928.login-dialog .modal-dialog-button:default,
929.unlock-dialog .modal-dialog-button:default {
930 color: rgba(30, 30, 46, 0.87);
931 background-color: #313244;
932 box-shadow: none !important;
933}
934
935.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus,
936.unlock-dialog .modal-dialog-button:default:hover,
937.unlock-dialog .modal-dialog-button:default:focus {
938 color: rgba(30, 30, 46, 0.87);
939 background-color: rgba(239, 241, 245, 0.12);
940 box-shadow: none !important;
941}
942
943.login-dialog .modal-dialog-button:default:active,
944.unlock-dialog .modal-dialog-button:default:active {
945 color: rgba(30, 30, 46, 0.87);
946 background-color: rgba(239, 241, 245, 0.2);
947 box-shadow: none !important;
948}
949
950.login-dialog .modal-dialog-button:default:insensitive,
951.unlock-dialog .modal-dialog-button:default:insensitive {
952 color: rgba(30, 30, 46, 0.35);
953 background-color: #313244;
954 box-shadow: none !important;
955}
956
957.login-dialog .cancel-button,
958.login-dialog .switch-user-button,
959.login-dialog .login-dialog-session-list-button,
960.unlock-dialog .cancel-button,
961.unlock-dialog .switch-user-button,
962.unlock-dialog .login-dialog-session-list-button {
963 padding: 0;
964 border-radius: 100px;
965 width: 32px;
966 height: 32px;
967 border: none;
968 background-color: rgba(239, 241, 245, 0.12);
969 color: #eff1f5;
970}
971
972.login-dialog .cancel-button StIcon,
973.login-dialog .switch-user-button StIcon,
974.login-dialog .login-dialog-session-list-button StIcon,
975.unlock-dialog .cancel-button StIcon,
976.unlock-dialog .switch-user-button StIcon,
977.unlock-dialog .login-dialog-session-list-button StIcon {
978 icon-size: 16px;
979}
980
981.login-dialog .login-dialog-message-warning,
982.unlock-dialog .login-dialog-message-warning {
983 color: rgba(239, 241, 245, 0.7);
984}
985
986.login-dialog-logo-bin {
987 padding: 24px 0px;
988}
989
990.login-dialog-banner {
991 color: rgba(239, 241, 245, 0.7);
992}
993
994.login-dialog-button-box {
995 spacing: 5px;
996}
997
998.login-dialog-message {
999 text-align: center;
1000}
1001
1002.login-dialog-message-warning {
1003 color: #df8e1d;
1004}
1005
1006.login-dialog-message-hint {
1007 padding-top: 0;
1008 padding-bottom: 20px;
1009}
1010
1011.login-dialog-user-selection-box {
1012 padding: 100px 0px;
1013}
1014
1015.login-dialog-not-listed-label {
1016 padding-left: 2px;
1017}
1018
1019.login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
1020 color: #eff1f5;
1021}
1022
1023.login-dialog-not-listed-label {
1024 font-size: 1em;
1025 font-weight: bold;
1026 color: rgba(239, 241, 245, 0.7);
1027 padding-top: 1em;
1028}
1029
1030.login-dialog-not-listed-label:hover {
1031 color: rgba(239, 241, 245, 0.7);
1032}
1033
1034.login-dialog-not-listed-label:focus {
1035 background-color: rgba(239, 241, 245, 0.12);
1036}
1037
1038.login-dialog-user-list-view {
1039 -st-vfade-offset: 1em;
1040}
1041
1042.login-dialog-user-list {
1043 spacing: 12px;
1044 padding: 0.2em;
1045 width: 23em;
1046}
1047
1048.login-dialog-user-list:expanded .login-dialog-user-list-item:selected, .login-dialog-user-list:expanded .login-dialog-user-list-item:hover, .login-dialog-user-list:expanded .login-dialog-user-list-item:active {
1049 background-color: rgba(239, 241, 245, 0.3);
1050 color: rgba(239, 241, 245, 0.7);
1051}
1052
1053.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
1054 border-right: 2px solid #cba6f7;
1055}
1056
1057.login-dialog-user-list-item {
1058 border-radius: 18px;
1059 padding: 6px;
1060 color: rgba(239, 241, 245, 0.7);
1061}
1062
1063.login-dialog-user-list-item:ltr .user-widget {
1064 padding-right: 1em;
1065}
1066
1067.login-dialog-user-list-item:rtl .user-widget {
1068 padding-left: 1em;
1069}
1070
1071.login-dialog-user-list-item:focus {
1072 background-color: rgba(239, 241, 245, 0.04) !important;
1073}
1074
1075.login-dialog-user-list-item:hover, .login-dialog-user-list-item:focus:hover {
1076 background-color: rgba(239, 241, 245, 0.12) !important;
1077 color: rgba(239, 241, 245, 0.7);
1078}
1079
1080.login-dialog-user-list-item:active, .login-dialog-user-list-item:focus:active {
1081 background-color: rgba(239, 241, 245, 0.3) !important;
1082 color: rgba(239, 241, 245, 0.7);
1083}
1084
1085.login-dialog-user-list-item .login-dialog-timed-login-indicator {
1086 height: 2px;
1087 margin: 6px 0 0 0;
1088 background-color: rgba(239, 241, 245, 0.12) !important;
1089}
1090
1091.user-widget-label {
1092 color: rgba(239, 241, 245, 0.7);
1093}
1094
1095.user-widget.horizontal .user-widget-label {
1096 font-size: 14pt;
1097 font-weight: bold;
1098 padding-left: 15px;
1099}
1100
1101.user-widget.horizontal .user-widget-label:ltr {
1102 padding-left: 14px;
1103 text-align: left;
1104}
1105
1106.user-widget.horizontal .user-widget-label:rtl {
1107 padding-right: 14px;
1108 text-align: right;
1109}
1110
1111.user-widget.vertical .user-widget-label {
1112 font-size: 17pt;
1113 text-align: center;
1114 font-weight: normal;
1115 padding-top: 16px;
1116}
1117
1118.login-dialog-prompt-layout {
1119 padding-top: 24px;
1120 padding-bottom: 12px;
1121 spacing: 12px;
1122 width: 23em;
1123}
1124
1125.login-dialog-prompt-entry {
1126 height: 1.5em;
1127}
1128
1129.login-dialog-prompt-label {
1130 color: rgba(239, 241, 245, 0.7);
1131 font-size: 13pt;
1132 padding-top: 1em;
1133}
1134
1135/* Looking Glass */
1136#LookingGlassDialog {
1137 background-color: #313244;
1138 padding: 0;
1139 spacing: 6px;
1140 margin: 6px;
1141 border-radius: 20px;
1142 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25);
1143 color: #eff1f5;
1144}
1145
1146#LookingGlassDialog > #Toolbar {
1147 padding: 0 6px;
1148 border: none;
1149 border-radius: 20px 20px 0 0;
1150 background-color: rgba(239, 241, 245, 0.04);
1151 box-shadow: inset 0 -1px 0 rgba(239, 241, 245, 0.12);
1152 spacing: 6px;
1153}
1154
1155#LookingGlassDialog .labels {
1156 spacing: 6px;
1157}
1158
1159#LookingGlassDialog .notebook-tab {
1160 -natural-hpadding: 12px;
1161 -minimum-hpadding: 12px;
1162 font-weight: bold;
1163 color: rgba(239, 241, 245, 0.5);
1164 padding-left: 16px;
1165 padding-right: 16px;
1166 min-height: 32px;
1167 padding: 3px 30px;
1168 transition-duration: 100ms;
1169 border: none;
1170 background-color: transparent;
1171 border-radius: 0;
1172}
1173
1174#LookingGlassDialog .notebook-tab:hover {
1175 background-color: rgba(239, 241, 245, 0.04);
1176 color: #eff1f5;
1177 text-shadow: none;
1178}
1179
1180#LookingGlassDialog .notebook-tab:selected {
1181 border-color: transparent;
1182 background-color: rgba(239, 241, 245, 0.12);
1183 box-shadow: inset 0 -2px 0px #e6e9ef;
1184 color: #eff1f5;
1185 text-shadow: none;
1186}
1187
1188#LookingGlassDialog StBoxLayout#EvalBox {
1189 padding: 4px;
1190 spacing: 6px;
1191 padding: 6px;
1192}
1193
1194#LookingGlassDialog StBoxLayout#ResultsArea {
1195 spacing: 6px;
1196 padding: 6px;
1197}
1198
1199.lg-dialog StEntry {
1200 min-height: 22px;
1201 selection-background-color: #cba6f7;
1202 selected-color: rgba(30, 30, 46, 0.87);
1203}
1204
1205.lg-dialog .shell-link {
1206 color: #8fcbe8;
1207}
1208
1209.lg-dialog .shell-link:hover {
1210 color: #b9dff1;
1211}
1212
1213.lg-dialog .shell-link:active {
1214 color: #65b7df;
1215}
1216
1217.lg-dialog .actor-link {
1218 color: rgba(239, 241, 245, 0.5);
1219}
1220
1221.lg-dialog .actor-link:hover {
1222 color: #eff1f5;
1223}
1224
1225.lg-dialog .actor-link:active {
1226 color: rgba(239, 241, 245, 0.7);
1227}
1228
1229.lg-dialog .actor-link StIcon {
1230 icon-size: 12px;
1231}
1232
1233.lg-completions-text {
1234 font-size: 0.9em;
1235 font-style: italic;
1236 color: rgba(239, 241, 245, 0.7);
1237}
1238
1239.lg-obj-inspector-title {
1240 spacing: 6px;
1241 color: rgba(239, 241, 245, 0.7);
1242}
1243
1244.lg-obj-inspector-button {
1245 padding: 0 16px;
1246 border: none;
1247 border-radius: 12px;
1248}
1249
1250.lg-obj-inspector-button:hover {
1251 border: none;
1252}
1253
1254#lookingGlassExtensions {
1255 padding: 6px;
1256 color: rgba(239, 241, 245, 0.7);
1257}
1258
1259.lg-extensions-list {
1260 padding: 6px;
1261 spacing: 6px;
1262 color: rgba(239, 241, 245, 0.7);
1263}
1264
1265.lg-extension {
1266 border: none;
1267 border-radius: 12px;
1268 background-color: rgba(239, 241, 245, 0.04);
1269 color: rgba(239, 241, 245, 0.7);
1270 padding: 12px;
1271}
1272
1273.lg-extension:hover {
1274 color: #eff1f5;
1275 background-color: rgba(239, 241, 245, 0.12);
1276}
1277
1278.lg-extension:active {
1279 color: #eff1f5;
1280 background-color: rgba(239, 241, 245, 0.3);
1281}
1282
1283.lg-extension-meta {
1284 spacing: 6px;
1285 color: rgba(239, 241, 245, 0.7);
1286}
1287
1288#LookingGlassPropertyInspector {
1289 color: rgba(239, 241, 245, 0.7);
1290 background: #313244;
1291 border: none;
1292 border-radius: 12px;
1293 padding: 6px;
1294 margin: 5px 8px 11px;
1295 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25);
1296}
1297
1298.lg-debug-flag-button {
1299 color: rgba(239, 241, 245, 0.7);
1300}
1301
1302.lg-debug-flag-button StLabel {
1303 padding: 6px, 12px;
1304}
1305
1306.lg-debug-flag-button:hover {
1307 color: #eff1f5;
1308}
1309
1310.lg-debug-flag-button:active {
1311 color: #eff1f5;
1312}
1313
1314.lg-debug-flags-header {
1315 padding-top: 12px;
1316 padding: 6px;
1317}
1318
1319.select-area-rubberband {
1320 background-color: rgba(203, 166, 247, 0.3);
1321 border: 1px solid #cba6f7;
1322 border-radius: 12px;
1323}
1324
1325.user-icon {
1326 background-size: contain;
1327 color: rgba(239, 241, 245, 0.7);
1328 border-radius: 9999px;
1329 border: none;
1330 box-shadow: none;
1331 icon-size: 64px;
1332}
1333
1334.modal-dialog .user-icon {
1335 box-shadow: none;
1336}
1337
1338.user-icon:hover {
1339 color: #eff1f5;
1340}
1341
1342.user-icon StIcon {
1343 background-color: #eff1f5;
1344 border-radius: 9999px;
1345 padding: 12px;
1346 width: 40px;
1347 height: 40px;
1348}
1349
1350.user-icon.user-avatar {
1351 border: 2px solid #cba6f7;
1352}
1353
1354.user-widget.vertical .user-icon {
1355 icon-size: 96px;
1356}
1357
1358.user-widget.vertical .user-icon StIcon {
1359 padding: 20px;
1360 padding-top: 18px;
1361 padding-bottom: 22px;
1362 width: 88px;
1363 height: 88px;
1364}
1365
1366.lightbox {
1367 background-color: black;
1368}
1369
1370.flashspot {
1371 background-color: white;
1372}
1373
1374.hidden {
1375 color: rgba(0, 0, 0, 0);
1376}
1377
1378.caps-lock-warning-label {
1379 text-align: center;
1380 padding-bottom: 8px;
1381 font-size: 11pt;
1382 color: #df8e1d;
1383}
1384
1385/* Network Dialogs */
1386.nm-dialog {
1387 max-height: 34em;
1388 min-height: 31em;
1389 min-width: 32em;
1390}
1391
1392.nm-dialog-content {
1393 spacing: 20px;
1394 padding: 24px;
1395}
1396
1397.nm-dialog-header-hbox {
1398 spacing: 10px;
1399}
1400
1401.nm-dialog-airplane-box {
1402 spacing: 12px;
1403}
1404
1405.nm-dialog-airplane-headline {
1406 font-weight: bold;
1407 text-align: center;
1408}
1409
1410.nm-dialog-airplane-text {
1411 color: #eff1f5;
1412}
1413
1414.nm-dialog-header {
1415 font-weight: bold;
1416}
1417
1418.nm-dialog-header-icon {
1419 icon-size: 32px;
1420}
1421
1422.nm-dialog-header-hbox {
1423 spacing: 10px;
1424}
1425
1426.nm-dialog-scroll-view {
1427 border: none;
1428 padding: 0;
1429 background-color: rgba(239, 241, 245, 0.04);
1430 border-radius: 12px;
1431}
1432
1433.nm-dialog-item {
1434 font-size: 12pt;
1435 border-bottom: none;
1436 padding: 12px;
1437 spacing: 0px;
1438}
1439
1440.nm-dialog-item:selected {
1441 background-color: #cba6f7;
1442 color: rgba(30, 30, 46, 0.87);
1443}
1444
1445.nm-dialog-item:hover, .nm-dialog-item:focus {
1446 background-color: rgba(239, 241, 245, 0.12);
1447}
1448
1449.nm-dialog-item:active {
1450 background-color: rgba(239, 241, 245, 0.3);
1451}
1452
1453.nm-dialog-icon {
1454 icon-size: 16px;
1455}
1456
1457.nm-dialog-icons {
1458 spacing: 12px;
1459}
1460
1461.no-networks-label {
1462 color: rgba(239, 241, 245, 0.5);
1463}
1464
1465.no-networks-box {
1466 spacing: 6px;
1467}
1468
1469/* OSD */
1470.screenshot-ui-panel, .workspace-switcher-container, .switcher-list, .resize-popup, .osd-window {
1471 color: rgba(239, 241, 245, 0.7);
1472 background-color: #1e1e2e;
1473 border: none;
1474 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25);
1475 margin: 5px 8px 11px;
1476 border-radius: 18px;
1477 padding: 12px;
1478}
1479
1480.osd-window {
1481 text-align: center;
1482 font-weight: bold;
1483}
1484
1485.osd-window .osd-monitor-label {
1486 font-size: 3em;
1487}
1488
1489.osd-window .level {
1490 height: 2px;
1491 border-radius: 2px;
1492 background-color: rgba(239, 241, 245, 0.12);
1493 color: #eff1f5;
1494 -barlevel-height: 2px;
1495 -barlevel-background-color: rgba(239, 241, 245, 0.12);
1496 -barlevel-active-background-color: #cba6f7;
1497 -barlevel-overdrive-color: #d20f39;
1498 -barlevel-overdrive-separator-width: 2px;
1499 -barlevel-border-width: 0;
1500 -barlevel-border-color: rgba(239, 241, 245, 0.12);
1501}
1502
1503.osd-window .level-bar {
1504 background-color: white;
1505 border-radius: 2px;
1506}
1507
1508.pad-osd-window {
1509 padding: 32px;
1510 background-color: #1e1e2e;
1511}
1512
1513.pad-osd-window .pad-osd-title-box {
1514 spacing: 12px;
1515}
1516
1517.pad-osd-window .pad-osd-title-menu-box {
1518 spacing: 6px;
1519}
1520
1521.combo-box-label {
1522 width: 15em;
1523}
1524
1525#overview StScrollBar StBin#trough {
1526 background-color: rgba(239, 241, 245, 0.12);
1527}
1528
1529#overview StScrollBar StButton#vhandle,
1530#overview StScrollBar StButton#hhandle {
1531 background-color: rgba(239, 241, 245, 0.5);
1532}
1533
1534#overview StScrollBar StButton#vhandle:hover,
1535#overview StScrollBar StButton#hhandle:hover {
1536 background-color: rgba(239, 241, 245, 0.7);
1537}
1538
1539#overview StScrollBar StButton#vhandle:active,
1540#overview StScrollBar StButton#hhandle:active {
1541 background-color: #eff1f5;
1542}
1543
1544#overview {
1545 spacing: 24px;
1546}
1547
1548.overview-controls {
1549 padding-bottom: 30px;
1550}
1551
1552/* Top Bar */
1553#panel {
1554 background-color: rgba(19, 16, 32, 0.4);
1555 font-weight: bold;
1556 border-radius: 40px;
1557 height: 40px;
1558 width: 60%; /* Dock-like width */
1559 max-width: 1000px; /* Limit the width for larger screens */
1560 margin: 15px 100px 5px 100px; /* Center and float */
1561 left: 50%;
1562 transform: translateX(-50%);
1563 color: rgba(217, 224, 238, 0.7);
1564 font-feature-settings: "tnum";
1565 transition-duration: 250ms;
1566 font-size: 10pt;
1567 padding: 0 15px;
1568}
1569
1570#panel:hover {
1571 background-color: rgba(19, 16, 32, 0.9); /* Slightly lighter on hover */
1572 color: rgba(217, 224, 238, 1); /* Make text brighter on hover */
1573}
1574
1575#panel .panel-corner {
1576 -panel-corner-radius: 0;
1577 -panel-corner-background-color: rgba(30, 30, 46, 0.6);
1578 -panel-corner-border-width: 2px;
1579 -panel-corner-border-color: transparent;
1580 -panel-corner-opacity: 1;
1581 transition-duration: 250ms;
1582}
1583
1584#panel .panel-button {
1585 -natural-hpadding: 12px;
1586 -minimum-hpadding: 12px;
1587 font-weight: bold;
1588 color: #eff1f5;
1589 transition-duration: 150ms;
1590 border-radius: 12px;
1591 text-shadow: none;
1592 box-shadow: none;
1593 border: 3px solid transparent;
1594}
1595
1596#panel .panel-button.clock-display {
1597 box-shadow: none;
1598}
1599
1600#panel .panel-button.clock-display .clock {
1601 transition-duration: 150ms;
1602 border-radius: 12px;
1603}
1604
1605#panel .panel-button:hover {
1606 color: #cba6f7;
1607 background-color: transparent;
1608 box-shadow: inset 0 0 0 1000px rgba(57, 57, 72, 0.624);
1609}
1610
1611#panel .panel-button:hover.clock-display {
1612 box-shadow: none;
1613 color: rgba(239, 241, 245, 0.7);
1614}
1615
1616#panel .panel-button:hover.clock-display .clock {
1617 color: #cba6f7;
1618 box-shadow: inset 0 0 0 1000px rgba(57, 57, 72, 0.624);
1619}
1620
1621#panel .panel-button:active, #panel .panel-button:active:hover, #panel .panel-button:overview, #panel .panel-button:overview:hover, #panel .panel-button:focus, #panel .panel-button:focus:hover, #panel .panel-button:checked, #panel .panel-button:checked:hover {
1622 color: #cba6f7;
1623 background-color: transparent;
1624 box-shadow: inset 0 0 0 1000px rgba(80, 81, 94, 0.648);
1625}
1626
1627#panel .panel-button:active.clock-display, #panel .panel-button:overview.clock-display, #panel .panel-button:focus.clock-display, #panel .panel-button:checked.clock-display {
1628 box-shadow: none;
1629 color: rgba(239, 241, 245, 0.7);
1630}
1631
1632#panel .panel-button:active.clock-display .clock, #panel .panel-button:overview.clock-display .clock, #panel .panel-button:focus.clock-display .clock, #panel .panel-button:checked.clock-display .clock {
1633 color: #cba6f7;
1634 box-shadow: inset 0 0 0 1000px rgba(80, 81, 94, 0.648);
1635}
1636
1637.unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel .panel-button {
1638 color: #eff1f5;
1639}
1640
1641.unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel .panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active {
1642 color: #eff1f5;
1643}
1644
1645#panel .panel-button .system-status-icon {
1646 icon-size: 16px;
1647 padding: 6px;
1648 margin: 0;
1649 -st-icon-style: symbolic;
1650}
1651
1652#panel .panel-button .appindicator-trayicons-box {
1653 margin: 0 6px;
1654}
1655
1656#panel .panel-button .app-menu-icon {
1657 -st-icon-style: symbolic;
1658}
1659
1660#panel .panel-button#panelActivities {
1661 -natural-hpadding: 18px;
1662 display: none;
1663}
1664
1665#panel .panel-button#panelActivities StBoxLayout {
1666 padding: 0 3px;
1667 spacing: 6px;
1668 display: none;
1669}
1670
1671#panel .panel-button#panelActivities .workspace-dot {
1672 border-radius: 9999px;
1673 min-width: 8px;
1674 min-height: 8px;
1675 background-color: #eff1f5;
1676 display: none;
1677}
1678
1679#panel:overview, #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
1680 background-color: transparent;
1681 box-shadow: none;
1682 border: 2px solid transparent;
1683}
1684
1685#panel:overview StLabel,
1686#panel:overview StIcon, #panel.unlock-screen StLabel,
1687#panel.unlock-screen StIcon, #panel.login-screen StLabel,
1688#panel.login-screen StIcon, #panel.lock-screen StLabel,
1689#panel.lock-screen StIcon {
1690 color: rgba(239, 241, 245, 0.7);
1691}
1692
1693#panel:overview .panel-button:hover, #panel.unlock-screen .panel-button:hover, #panel.login-screen .panel-button:hover, #panel.lock-screen .panel-button:hover {
1694 color: #eff1f5;
1695 background-color: transparent;
1696 box-shadow: inset 0 0 0 1000px rgba(239, 241, 245, 0.12);
1697}
1698
1699#panel:overview .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.lock-screen .panel-button:hover.clock-display {
1700 box-shadow: none;
1701 color: #eff1f5;
1702}
1703
1704#panel:overview .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.lock-screen .panel-button:hover.clock-display .clock {
1705 color: #eff1f5;
1706 box-shadow: inset 0 0 0 1000px rgba(239, 241, 245, 0.12);
1707}
1708
1709#panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:checked {
1710 color: #eff1f5;
1711 background-color: transparent;
1712 box-shadow: inset 0 0 0 1000px rgba(239, 241, 245, 0.2);
1713}
1714
1715#panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel.lock-screen .panel-button:active.clock-display, #panel.lock-screen .panel-button:overview.clock-display, #panel.lock-screen .panel-button:focus.clock-display, #panel.lock-screen .panel-button:checked.clock-display {
1716 box-shadow: none;
1717 color: #eff1f5;
1718}
1719
1720#panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel.lock-screen .panel-button:active.clock-display .clock, #panel.lock-screen .panel-button:overview.clock-display .clock, #panel.lock-screen .panel-button:focus.clock-display .clock, #panel.lock-screen .panel-button:checked.clock-display .clock {
1721 box-shadow: inset 0 0 0 1000px rgba(239, 241, 245, 0.2);
1722 color: #eff1f5;
1723}
1724
1725#panel:overview .panel-button#panelActivities .workspace-dot, #panel.unlock-screen .panel-button#panelActivities .workspace-dot, #panel.login-screen .panel-button#panelActivities .workspace-dot, #panel.lock-screen .panel-button#panelActivities .workspace-dot {
1726 background-color: #eff1f5;
1727}
1728
1729#panel:overview .panel-corner, #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel.lock-screen .panel-corner {
1730 -panel-corner-radius: 0;
1731 -panel-corner-background-color: transparent;
1732 -panel-corner-border-color: transparent;
1733}
1734
1735#panel Gjs_status_keyboard_InputSourceIndicator.panel-button,
1736#panel Gjs_appindicatorsupport_rgcjonas_gmail_com_indicatorStatusIcon_IndicatorStatusIcon.panel-button,
1737#panel Gjs_appindicatorsupport_rgcjonas_gmail_com_indicatorStatusIcon_AppIndicatorsIndicatorStatusIcon.panel-button {
1738 -natural-hpadding: 18px !important;
1739 -minimum-hpadding: 18px !important;
1740}
1741
1742#panel .screencast-indicator,
1743#panel .remote-access-indicator {
1744 color: #df8e1d;
1745}
1746
1747/* Popovers/Menus */
1748.popup-menu-boxpointer {
1749 -arrow-border-radius: 18px;
1750 -arrow-background-color: transparent;
1751 -arrow-border-width: 0;
1752 -arrow-border-color: transparent;
1753 -arrow-base: 12px;
1754 -arrow-rise: 0;
1755 -arrow-box-shadow: none;
1756 background: transparent;
1757}
1758
1759.popup-menu {
1760 min-width: 12em;
1761 color: rgba(239, 241, 245, 0.7) !important;
1762 padding: 0;
1763 font-weight: normal;
1764 border-radius: 18px;
1765 box-shadow: none;
1766 margin: 6px 6px 8px;
1767 font-size: 11pt;
1768}
1769
1770.popup-menu .popup-menu-content {
1771 padding: 6px;
1772 /* background-color: $popover; */
1773 background-color: #1e1e2e;
1774 border-radius: 18px;
1775 margin: 0;
1776 box-shadow: 0 6px 15px -6px rgba(0, 0, 0, 0.25);
1777 border: none;
1778 font-weight: normal;
1779}
1780
1781.popup-menu .popup-menu-item {
1782 spacing: 6px;
1783 color: rgba(239, 241, 245, 0.7) !important;
1784 text-shadow: none;
1785 border-radius: 12px;
1786 margin: 0;
1787 transition-duration: 100ms;
1788 font-weight: normal;
1789 background-color: transparent;
1790}
1791
1792.popup-menu .popup-menu-item:checked {
1793 font-weight: normal;
1794 border: none;
1795 box-shadow: none;
1796 color: #eff1f5 !important;
1797 background-color: rgba(239, 241, 245, 0.12) !important;
1798 border-radius: 12px 12px 0 0 !important;
1799}
1800
1801.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item:checked.selected {
1802 color: #eff1f5 !important;
1803 background-color: alpha(currentColor, 0.08) !important;
1804}
1805
1806.popup-menu .popup-menu-item:checked:active {
1807 color: #eff1f5 !important;
1808 background-color: alpha(currentColor, 0.12) !important;
1809}
1810
1811.popup-menu .popup-menu-item:checked:insensitive {
1812 color: rgba(239, 241, 245, 0.32) !important;
1813}
1814
1815.popup-menu .popup-menu-item:focus, .popup-menu .popup-menu-item:hover, .popup-menu .popup-menu-item.selected {
1816 color: #cba6f7 !important;
1817 background-color: rgba(239, 241, 245, 0.12) !important;
1818 transition-duration: 0;
1819}
1820
1821.popup-menu .popup-menu-item:active, .popup-menu .popup-menu-item.selected:active {
1822 color: #cba6f7 !important;
1823 background-color: rgba(239, 241, 245, 0.3) !important;
1824}
1825
1826.popup-menu .popup-menu-item:insensitive {
1827 color: rgba(239, 241, 245, 0.32) !important;
1828}
1829
1830.popup-menu .popup-sub-menu {
1831 background-color: rgba(239, 241, 245, 0.12) !important;
1832 color: rgba(239, 241, 245, 0.7) !important;
1833 border: none;
1834 box-shadow: none;
1835 margin: 0;
1836 border-radius: 0 0 12px 12px !important;
1837}
1838
1839.popup-menu .popup-sub-menu .popup-menu-item {
1840 margin: 0;
1841}
1842
1843.popup-menu .popup-sub-menu .popup-menu-item:focus, .popup-menu .popup-sub-menu .popup-menu-item:hover, .popup-menu .popup-sub-menu .popup-menu-item.selected {
1844 color: #eff1f5 !important;
1845 background-color: rgba(239, 241, 245, 0.12) !important;
1846}
1847
1848.popup-menu .popup-sub-menu .popup-menu-item:active, .popup-menu .popup-sub-menu .popup-menu-item.selected:active {
1849 color: #eff1f5 !important;
1850 background-color: rgba(239, 241, 245, 0.3) !important;
1851}
1852
1853.popup-menu .popup-sub-menu .popup-menu-item:insensitive {
1854 color: rgba(239, 241, 245, 0.32) !important;
1855}
1856
1857.popup-menu .popup-inactive-menu-item {
1858 color: rgba(239, 241, 245, 0.7) !important;
1859}
1860
1861.popup-menu .popup-inactive-menu-item:insensitive {
1862 color: rgba(239, 241, 245, 0.32) !important;
1863}
1864
1865.popup-menu.panel-menu {
1866 -boxpointer-gap: 4px;
1867 margin-bottom: 1.75em;
1868}
1869
1870.popup-menu-arrow,
1871.popup-menu-icon {
1872 icon-size: 16px;
1873}
1874
1875.popup-ornamented-menu-item:ltr {
1876 padding-left: 6px;
1877}
1878
1879.popup-ornamented-menu-item:rtl {
1880 padding-right: 6px;
1881}
1882
1883.background-menu {
1884 -boxpointer-gap: 4px;
1885 -arrow-rise: 0px;
1886}
1887
1888.aggregate-menu {
1889 min-width: 20em;
1890}
1891
1892.aggregate-menu .popup-menu-icon {
1893 padding: 0;
1894 margin: 0 3px;
1895 -st-icon-style: symbolic;
1896}
1897
1898.app-menu {
1899 max-width: 27.25em;
1900}
1901
1902.app-menu .popup-menu-ornament {
1903 width: 0 !important;
1904}
1905
1906.app-menu .popup-inactive-menu-item:first-child > StLabel:ltr {
1907 margin-right: 8px;
1908}
1909
1910.app-menu .popup-inactive-menu-item:first-child > StLabel:rtl {
1911 margin-left: 8px;
1912}
1913
1914/* Screen Shield */
1915.unlock-dialog-clock {
1916 color: white;
1917 font-weight: 300;
1918 text-align: center;
1919 spacing: 24px;
1920 padding-bottom: 2.5em;
1921}
1922
1923.unlock-dialog-clock-time {
1924 font-size: 64pt;
1925 padding-top: 42px;
1926 font-feature-settings: 'tnum';
1927}
1928
1929.unlock-dialog-clock-date {
1930 font-size: 16pt;
1931 font-weight: normal;
1932}
1933
1934.unlock-dialog-clock-hint {
1935 font-weight: normal;
1936 padding-top: 48px;
1937}
1938
1939.unlock-dialog-notifications-container {
1940 margin: 12px 0;
1941 spacing: 6px;
1942 width: 23em;
1943 background-color: transparent;
1944}
1945
1946.unlock-dialog-notifications-container .summary-notification-stack-scrollview {
1947 padding-top: 0;
1948 padding-bottom: 0;
1949}
1950
1951.unlock-dialog-notifications-container .notification,
1952.unlock-dialog-notifications-container .unlock-dialog-notification-source {
1953 padding: 12px 6px;
1954 border: none;
1955 background-color: #1e1e2e;
1956 color: #eff1f5;
1957 border-radius: 18px;
1958}
1959
1960.unlock-dialog-notifications-container .notification.critical,
1961.unlock-dialog-notifications-container .unlock-dialog-notification-source.critical {
1962 background-color: #2e2e47;
1963}
1964
1965.unlock-dialog-notification-label {
1966 padding: 0px 0px 0px 12px;
1967}
1968
1969.unlock-dialog-notification-count-text {
1970 weight: bold;
1971 padding: 0 6px;
1972 color: rgba(30, 30, 46, 0.87);
1973 background-color: #cba6f7;
1974 border-radius: 9999px;
1975 margin-right: 12px;
1976}
1977
1978.screen-shield-background {
1979 background: black;
1980 box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
1981}
1982
1983#unlockDialogNotifications StButton#vhandle,
1984#unlockDialogNotifications StButton#hhandle {
1985 background-color: rgba(30, 30, 46, 0.3);
1986}
1987
1988#unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus,
1989#unlockDialogNotifications StButton#hhandle:hover,
1990#unlockDialogNotifications StButton#hhandle:focus {
1991 background-color: rgba(30, 30, 46, 0.5);
1992}
1993
1994#unlockDialogNotifications StButton#vhandle:active,
1995#unlockDialogNotifications StButton#hhandle:active {
1996 background-color: rgba(203, 166, 247, 0.5);
1997}
1998
1999/* Scrollbars */
2000StScrollView.vfade {
2001 -st-vfade-offset: 32px;
2002}
2003
2004StScrollView.hfade {
2005 -st-hfade-offset: 32px;
2006}
2007
2008StScrollBar {
2009 padding: 0;
2010}
2011
2012StScrollView StScrollBar {
2013 min-width: 12px;
2014 min-height: 12px;
2015}
2016
2017StScrollBar StBin#trough {
2018 border-radius: 9999px;
2019 background-color: rgba(239, 241, 245, 0.12);
2020 margin: 3px;
2021}
2022
2023StScrollBar StButton#vhandle,
2024StScrollBar StButton#hhandle {
2025 border-radius: 9999px;
2026 background-color: rgba(239, 241, 245, 0.5);
2027 border: 3px solid transparent;
2028 margin: 3px;
2029}
2030
2031StScrollBar StButton#vhandle:hover,
2032StScrollBar StButton#hhandle:hover {
2033 background-color: rgba(239, 241, 245, 0.7);
2034}
2035
2036StScrollBar StButton#vhandle:active,
2037StScrollBar StButton#hhandle:active {
2038 background-color: #eff1f5;
2039}
2040
2041
2042.search-entry {
2043 width: 320px;
2044 min-height: 32px;
2045 padding: 0 12px;
2046 color: rgba(239, 241, 245, 0.7);
2047 transition-duration: 150ms;
2048 border-radius: 12px;
2049 caret-color: #eff1f5;
2050 selection-background-color: rgba(239, 241, 245, 0.12);
2051 selected-color: rgba(30, 30, 46, 0.87) !important;
2052 color: #eff1f5;
2053 background-color: #313244;
2054 border: 2px solid transparent !important;
2055 box-shadow: none !important;
2056}
2057
2058
2059.search-entry:hover {
2060 color: #eff1f5;
2061 background-color: #313244;
2062 border: 2px solid rgba(239, 241, 245, 0.3) !important;
2063 box-shadow: none !important;
2064}
2065
2066
2067.search-entry:focus {
2068 color: #eff1f5;
2069 background-color: #313244;
2070 border: 2px solid #cba6f7 !important;
2071 box-shadow: none !important;
2072}
2073
2074
2075.search-entry .search-entry-icon {
2076 icon-size: 16px;
2077 padding: 0;
2078 color: rgba(239, 241, 245, 0.32);
2079}
2080
2081
2082.search-entry:hover .search-entry-icon,
2083.search-entry:focus .search-entry-icon {
2084 color: rgba(239, 241, 245, 0.7);
2085}
2086
2087
2088.search-entry:insensitive {
2089 border: none;
2090 color: rgba(239, 241, 245, 0.32);
2091}
2092
2093
2094.search-entry StLabel.hint-text {
2095 color: rgba(239, 241, 245, 0.5);
2096}
2097
2098/* Slider */
2099.slider {
2100 height: 20px;
2101 color: #313244;
2102 -slider-height: 2px;
2103 -slider-background-color: rgba(239, 241, 245, 0.3);
2104 -slider-border-color: #cba6f7;
2105 -slider-active-background-color: #cba6f7;
2106 -slider-active-border-color: #cba6f7;
2107 -slider-border-width: 2px;
2108 -slider-handle-radius: 7px;
2109 -slider-handle-border-width: 2px;
2110 -slider-handle-border-color: #cba6f7;
2111 -barlevel-height: 15px;
2112 -barlevel-background-color: rgba(239, 241, 245, 0.3);
2113 -barlevel-border-color: transparent;
2114 -barlevel-active-background-color: #cba6f7;
2115 -barlevel-active-border-color: transparent;
2116 -barlevel-overdrive-color: #d20f39;
2117 -barlevel-overdrive-border-color: transparent;
2118 -barlevel-overdrive-separator-width: 2px;
2119 -barlevel-border-width: 0;
2120}
2121
2122/* App Switcher */
2123.switcher-popup {
2124 padding: 8px;
2125 spacing: 24px;
2126}
2127
2128.switcher-list .item-box {
2129 padding: 8px;
2130 border-radius: 12px;
2131 border: 1px solid transparent;
2132 background-color: transparent;
2133}
2134
2135.switcher-list .item-box:outlined {
2136 background-color: rgba(239, 241, 245, 0.12);
2137 color: #eff1f5;
2138}
2139
2140.switcher-list .item-box:selected {
2141 background-color: #cba6f7;
2142 color: rgba(30, 30, 46, 0.87);
2143}
2144
2145.switcher-list .thumbnail-box {
2146 padding: 2px;
2147 spacing: 6px;
2148}
2149
2150.switcher-list .thumbnail {
2151 width: 256px;
2152}
2153
2154.switcher-list .separator {
2155 width: 1px;
2156 background: rgba(239, 241, 245, 0.12);
2157}
2158
2159.switcher-list .switcher-list-item-container {
2160 spacing: 12px;
2161}
2162
2163.switcher-arrow {
2164 border-color: rgba(0, 0, 0, 0);
2165 color: rgba(239, 241, 245, 0.5);
2166}
2167
2168.switcher-arrow:highlighted {
2169 color: #eff1f5;
2170}
2171
2172.input-source-switcher-symbol {
2173 font-size: 34pt;
2174 width: 96px;
2175 height: 96px;
2176}
2177
2178.cycler-highlight {
2179 border: 5px solid #cba6f7;
2180}
2181
2182/* Switches */
2183.toggle-switch {
2184 width: 46px;
2185 height: 24px;
2186 background-size: contain;
2187}
2188
2189.toggle-switch, .popup-sub-menu .toggle-switch {
2190 background-image: url("assets/toggle-off.svg");
2191}
2192
2193.toggle-switch:checked, .popup-sub-menu .toggle-switch:checked {
2194 background-image: url("assets/toggle-on-dark.svg");
2195}
2196
2197/* Tiled window previews */
2198.tile-preview {
2199 background-color: rgba(203, 166, 247, 0.3);
2200 border: 1px solid #cba6f7;
2201}
2202
2203.tile-preview-left.on-primary {
2204 border-radius: 13px 0 0 0;
2205}
2206
2207.tile-preview-right.on-primary {
2208 border-radius: 0 13px 0 0;
2209}
2210
2211.tile-preview-left.tile-preview-right.on-primary {
2212 border-radius: 13px 13px 0 0;
2213}
2214
2215/* Workspace Switcher */
2216.workspace-switcher-group {
2217 padding: 12px;
2218 display: none;
2219}
2220
2221.workspace-switcher {
2222 background: transparent;
2223 border: none;
2224 border-radius: 0;
2225 padding: 0;
2226 spacing: 12px;
2227 display: none;
2228}
2229
2230.ws-switcher-box {
2231 background: transparent;
2232 height: 50px;
2233 background-size: 32px;
2234 background: rgba(239, 241, 245, 0.12);
2235 border-radius: 12px;
2236}
2237
2238.ws-switcher-active-up,
2239.ws-switcher-active-down,
2240.ws-switcher-active-left,
2241.ws-switcher-active-right {
2242 height: 52px;
2243 background-color: #cba6f7;
2244 color: rgba(30, 30, 46, 0.87);
2245 border-radius: 15px;
2246 border: none;
2247}
2248
2249/* App Icons */
2250.icon-grid {
2251 row-spacing: 12px;
2252 column-spacing: 12px;
2253 max-row-spacing: 36px;
2254 max-column-spacing: 36px;
2255 page-padding-top: 24px;
2256 page-padding-bottom: 24px;
2257 page-padding-left: 18px;
2258 page-padding-right: 18px;
2259}
2260
2261.overview-tile, .grid-search-result {
2262 color: rgba(239, 241, 245, 0.7);
2263 border-radius: 30px;
2264 padding: 15px;
2265 border: none;
2266 transition-duration: 100ms;
2267 text-align: center;
2268 background-color: transparent;
2269}
2270
2271.overview-tile:hover, .grid-search-result:hover, .overview-tile:focus, .grid-search-result:focus, .overview-tile:selected, .grid-search-result:selected {
2272 color: #eff1f5;
2273 background-color: rgba(203, 166, 247, 0.3);
2274 border-image: none;
2275 background-image: none;
2276}
2277
2278.overview-tile:active, .grid-search-result:active, .overview-tile:checked, .grid-search-result:checked {
2279 color: #eff1f5;
2280 background-color: rgba(203, 166, 247, 0.6);
2281 box-shadow: none;
2282}
2283
2284.app-folder {
2285 background-color: rgba(203, 166, 247, 0.3);
2286 border-radius: 30px;
2287 color: rgba(239, 241, 245, 0.7);
2288}
2289
2290.app-folder .overview-icon {
2291 background-color: transparent;
2292 border-radius: 30px;
2293}
2294
2295.app-folder:hover {
2296 background-color: rgba(203, 166, 247, 0.6);
2297 color: #eff1f5;
2298}
2299
2300.app-folder:active {
2301 background-color: rgba(239, 241, 245, 0.3);
2302 color: #eff1f5;
2303}
2304
2305.app-grid-running-dot {
2306 width: 6px;
2307 height: 3px;
2308 border-radius: 2px;
2309 background-color: rgba(239, 241, 245, 0.3);
2310 margin-bottom: 0;
2311}
2312
2313StWidget.focused .app-grid-running-dot {
2314 width: 24px;
2315 background-color: #eff1f5 !important;
2316}
2317
2318.app-folder-dialog-container {
2319 padding-top: 32px;
2320}
2321
2322.app-folder-dialog {
2323 width: 720px;
2324 height: 720px;
2325 border-radius: 54px;
2326 padding: 12px;
2327 box-shadow: none;
2328 border: none;
2329 background-color: #1e1e2e;
2330}
2331
2332.app-folder-dialog .folder-name-container {
2333 padding: 24px 36px;
2334 padding-bottom: 0;
2335}
2336
2337.app-folder-dialog .folder-name-container .folder-name-entry {
2338 width: 12em;
2339 border: none;
2340 caret-color: #eff1f5;
2341}
2342
2343.app-folder-dialog .folder-name-container .folder-name-entry:focus {
2344 background-color: rgba(239, 241, 245, 0.12);
2345 color: #eff1f5;
2346}
2347
2348.app-folder-dialog .icon-button, .app-folder-dialog .background-app-item .close-button, .background-app-item .app-folder-dialog .close-button, .app-folder-dialog .message .message-header .message-expand-button, .message .message-header .app-folder-dialog .message-expand-button,
2349.app-folder-dialog .message .message-header .message-close-button,
2350.message .message-header .app-folder-dialog .message-close-button {
2351 background-color: rgba(239, 241, 245, 0.06);
2352 color: rgba(239, 241, 245, 0.7);
2353 border: none;
2354 padding: 0;
2355 width: 36px;
2356 height: 36px;
2357 border-radius: 9999px;
2358}
2359
2360.app-folder-dialog .icon-button > StIcon, .app-folder-dialog .background-app-item .close-button > StIcon, .background-app-item .app-folder-dialog .close-button > StIcon, .app-folder-dialog .message .message-header .message-expand-button > StIcon, .message .message-header .app-folder-dialog .message-expand-button > StIcon,
2361.app-folder-dialog .message .message-header .message-close-button > StIcon,
2362.message .message-header .app-folder-dialog .message-close-button > StIcon {
2363 icon-size: 16px;
2364}
2365
2366.app-folder-dialog .icon-button:hover, .app-folder-dialog .background-app-item .close-button:hover, .background-app-item .app-folder-dialog .close-button:hover, .app-folder-dialog .message .message-header .message-expand-button:hover, .message .message-header .app-folder-dialog .message-expand-button:hover,
2367.app-folder-dialog .message .message-header .message-close-button:hover,
2368.message .message-header .app-folder-dialog .message-close-button:hover {
2369 background-color: rgba(239, 241, 245, 0.12);
2370}
2371
2372.app-folder-dialog .icon-button:checked, .app-folder-dialog .background-app-item .close-button:checked, .background-app-item .app-folder-dialog .close-button:checked, .app-folder-dialog .message .message-header .message-expand-button:checked, .message .message-header .app-folder-dialog .message-expand-button:checked,
2373.app-folder-dialog .message .message-header .message-close-button:checked,
2374.message .message-header .app-folder-dialog .message-close-button:checked, .app-folder-dialog .icon-button:active, .app-folder-dialog .background-app-item .close-button:active, .background-app-item .app-folder-dialog .close-button:active, .app-folder-dialog .message .message-header .message-expand-button:active, .message .message-header .app-folder-dialog .message-expand-button:active,
2375.app-folder-dialog .message .message-header .message-close-button:active,
2376.message .message-header .app-folder-dialog .message-close-button:active {
2377 background-color: #eff1f5;
2378 color: rgba(30, 30, 46, 0.87);
2379}
2380
2381.app-folder-dialog .page-indicators {
2382 margin-bottom: 18px;
2383}
2384
2385.rename-folder-popup .rename-folder-popup-item {
2386 spacing: 6px;
2387}
2388
2389.rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl {
2390 padding: 0 12px;
2391}
2392
2393.system-action-icon {
2394 box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
2395 background-color: #1e1e2e;
2396 color: #eff1f5;
2397 border-radius: 9999px;
2398 icon-size: 48px;
2399}
2400
2401.page-navigation-hint.dnd {
2402 background: rgba(255, 255, 255, 0.1);
2403}
2404
2405.page-navigation-hint.next:ltr, .page-navigation-hint.previous:rtl {
2406 background-gradient-start: rgba(255, 255, 255, 0.05);
2407 background-gradient-end: transparent;
2408 background-gradient-direction: horizontal;
2409 border-radius: 27px 0px 0px 27px;
2410}
2411
2412.page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl {
2413 background-gradient-start: transparent;
2414 background-gradient-end: rgba(255, 255, 255, 0.05);
2415 background-gradient-direction: horizontal;
2416 border-radius: 0px 27px 27px 0px;
2417}
2418
2419.page-navigation-arrow {
2420 margin: 6px;
2421 padding: 18px;
2422 width: 24px;
2423 height: 24px;
2424 border-radius: 9999px;
2425 transition-duration: 100ms;
2426 color: rgba(239, 241, 245, 0.7);
2427 background-color: transparent;
2428}
2429
2430.page-navigation-arrow > StIcon {
2431 color: #eff1f5;
2432}
2433
2434.page-navigation-arrow:insensitive {
2435 background-color: transparent;
2436 color: rgba(239, 241, 245, 0.5);
2437}
2438
2439.page-navigation-arrow:hover {
2440 background-color: rgba(239, 241, 245, 0.12);
2441 color: #eff1f5;
2442}
2443
2444.page-navigation-arrow:active {
2445 background-color: rgba(239, 241, 245, 0.3);
2446 color: #eff1f5;
2447}
2448
2449/* Date/Time Menu */
2450.popup-menu .message, .world-clocks-button,
2451.weather-button,
2452.events-button {
2453 color: rgba(239, 241, 245, 0.7);
2454 background-color: rgba(239, 241, 245, 0.04);
2455 border-radius: 12px;
2456 border: none;
2457 box-shadow: none;
2458 text-shadow: none;
2459}
2460
2461.popup-menu .message:hover, .world-clocks-button:hover,
2462.weather-button:hover,
2463.events-button:hover, .popup-menu .message:focus, .world-clocks-button:focus,
2464.weather-button:focus,
2465.events-button:focus {
2466 color: #eff1f5;
2467 background-color: rgba(239, 241, 245, 0.12);
2468 box-shadow: none;
2469}
2470
2471.popup-menu .message:active, .world-clocks-button:active,
2472.weather-button:active,
2473.events-button:active {
2474 color: #eff1f5;
2475 background-color: rgba(239, 241, 245, 0.2);
2476 box-shadow: none;
2477}
2478
2479#calendarArea {
2480 padding: 0;
2481}
2482
2483.datemenu-calendar-column {
2484 spacing: 6px;
2485 border: none;
2486 padding: 0 !important;
2487 margin: 0 !important;
2488}
2489
2490.datemenu-calendar-column:ltr {
2491 margin-right: 0;
2492 border-left-width: 0;
2493}
2494
2495.datemenu-calendar-column:rtl {
2496 margin-left: 0;
2497 border-right-width: 0;
2498}
2499
2500.datemenu-calendar-column .datemenu-displays-section {
2501 padding-bottom: 0;
2502}
2503
2504.datemenu-calendar-column .datemenu-displays-box {
2505 spacing: 6px;
2506}
2507
2508.world-clocks-header,
2509.weather-header,
2510.events-section-title {
2511 color: rgba(239, 241, 245, 0.7);
2512 font-weight: bold;
2513}
2514
2515.datemenu-today-button,
2516.datemenu-displays-box {
2517 margin: 4px 6px;
2518}
2519
2520/* today button (the date) */
2521.datemenu-today-button {
2522 border: none;
2523 box-shadow: none;
2524 background: none;
2525 padding: 6px 12px;
2526 margin: 0;
2527 text-shadow: none;
2528 color: rgba(239, 241, 245, 0.7);
2529 border-radius: 12px;
2530 margin: 4px;
2531}
2532
2533.datemenu-today-button:ltr {
2534 margin-left: 4px;
2535}
2536
2537.datemenu-today-button:rtl {
2538 margin-right: 4px;
2539}
2540
2541.datemenu-today-button:hover, .datemenu-today-button:focus {
2542 background-color: rgba(239, 241, 245, 0.12);
2543}
2544
2545.datemenu-today-button:active {
2546 background-color: rgba(239, 241, 245, 0.2);
2547}
2548
2549.datemenu-today-button .day-label {
2550 font-size: 13pt;
2551 font-weight: bold;
2552}
2553
2554.datemenu-today-button .date-label {
2555 font-size: 19pt;
2556 font-weight: normal;
2557}
2558
2559/* Calendar */
2560.calendar {
2561 border: none;
2562 box-shadow: none;
2563 background-color: transparent;
2564 padding: 0 !important;
2565 margin: 0 !important;
2566 text-shadow: none;
2567 border-radius: 18px;
2568 color: rgba(239, 241, 245, 0.7);
2569}
2570
2571.calendar .calendar-month-label {
2572 padding: 6px 0;
2573 color: rgba(239, 241, 245, 0.7) !important;
2574 font-weight: bold;
2575 text-align: center;
2576 text-shadow: none;
2577 background-color: transparent;
2578}
2579
2580.calendar .calendar-change-month-back,
2581.calendar .calendar-change-month-forward {
2582 padding: 0 !important;
2583 margin: 3px 0 !important;
2584}
2585
2586.calendar .calendar-change-month-back StIcon,
2587.calendar .calendar-change-month-forward StIcon {
2588 icon-size: 16px;
2589}
2590
2591.calendar .pager-button {
2592 width: 32px !important;
2593 height: 32px !important;
2594 margin: 2px !important;
2595 border-radius: 9999px;
2596 background-color: transparent;
2597 color: #eff1f5;
2598 box-shadow: none !important;
2599}
2600
2601.calendar .pager-button:hover, .calendar .pager-button:focus {
2602 background-color: rgba(239, 241, 245, 0.12);
2603 box-shadow: none !important;
2604}
2605
2606.calendar .pager-button:active {
2607 background-color: rgba(239, 241, 245, 0.3);
2608 box-shadow: none !important;
2609}
2610
2611.calendar .calendar-day {
2612 font-size: 11pt;
2613 text-align: center;
2614 width: 34px !important;
2615 height: 34px !important;
2616 padding: 0 !important;
2617 margin: 2px !important;
2618 border-radius: 9999px;
2619 color: rgba(239, 241, 245, 0.7) !important;
2620 border: none;
2621 font-feature-settings: 'tnum';
2622 background-color: transparent;
2623}
2624
2625.calendar .calendar-day:hover, .calendar .calendar-day:focus {
2626 background-color: rgba(239, 241, 245, 0.12);
2627 box-shadow: none !important;
2628 outline: none !important;
2629}
2630
2631.calendar .calendar-day:active, .calendar .calendar-day:selected {
2632 color: #eff1f5 !important;
2633 background-color: rgba(239, 241, 245, 0.3);
2634 border-color: transparent !important;
2635 box-shadow: none !important;
2636 outline: none !important;
2637}
2638
2639.calendar .calendar-day.calendar-weekend {
2640 color: rgba(239, 241, 245, 0.5) !important;
2641}
2642
2643.calendar .calendar-day {
2644 border-width: 0;
2645}
2646
2647.calendar .calendar-day-top {
2648 border-top-width: 0;
2649}
2650
2651.calendar .calendar-day-left {
2652 border-left-width: 0;
2653}
2654
2655.calendar .calendar-nonwork-day {
2656 color: #eff1f5;
2657}
2658
2659.calendar .calendar-today {
2660 font-weight: bold;
2661 color: rgba(239, 241, 245, 0.7) !important;
2662 background-color: rgba(239, 241, 245, 0.06);
2663 border: none;
2664}
2665
2666.calendar .calendar-today:hover, .calendar .calendar-today:focus {
2667 background-color: rgba(239, 241, 245, 0.12);
2668 color: #eff1f5 !important;
2669}
2670
2671.calendar .calendar-today:active {
2672 background-color: #bd8ff5;
2673 color: rgba(30, 30, 46, 0.87) !important;
2674}
2675
2676.calendar .calendar-today:selected {
2677 background-color: #cba6f7;
2678 color: #1e1e2e !important;
2679}
2680
2681.calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus {
2682 background-color: #e1cbfa;
2683 color: #1e1e2e !important;
2684}
2685
2686.calendar .calendar-day-with-events {
2687 color: rgba(239, 241, 245, 0.7);
2688 background-image: url("assets/calendar-today.svg");
2689}
2690
2691.calendar .calendar-day-with-events.calendar-work-day {
2692 color: rgba(239, 241, 245, 0.7);
2693 font-weight: bold;
2694}
2695
2696.calendar .calendar-other-month {
2697 color: rgba(239, 241, 245, 0.32) !important;
2698 font-weight: normal;
2699}
2700
2701.calendar .calendar-other-month.calendar-weekend {
2702 color: rgba(239, 241, 245, 0.32) !important;
2703}
2704
2705.calendar .calendar-day-heading {
2706 font-weight: bold;
2707 text-align: center;
2708 margin: 4px;
2709 padding: 3px 6px;
2710 border-radius: 12px;
2711 background-color: transparent;
2712 color: #eff1f5;
2713}
2714
2715.calendar .calendar-week-number {
2716 width: 26px;
2717 height: 20px;
2718 margin: 6px 2px !important;
2719 padding: 0;
2720 border-radius: 12px;
2721 background-color: rgba(239, 241, 245, 0.04);
2722 color: rgba(239, 241, 245, 0.5);
2723 font-weight: bold;
2724 font-feature-settings: 'tnum';
2725 text-align: center;
2726}
2727
2728.world-clocks-button,
2729.weather-button,
2730.events-button {
2731 padding: 12px !important;
2732 margin: 4px 0 0 !important;
2733}
2734
2735.events-button .events-box {
2736 spacing: 6px;
2737}
2738
2739.events-button .events-list {
2740 spacing: 12px;
2741 text-shadow: none;
2742 color: rgba(239, 241, 245, 0.7);
2743}
2744
2745.events-button .events-title {
2746 font-weight: bold;
2747 text-shadow: none;
2748 color: rgba(239, 241, 245, 0.5);
2749}
2750
2751.events-button .event-time {
2752 font-feature-settings: 'tnum';
2753 font-size: 11pt;
2754 color: rgba(239, 241, 245, 0.5);
2755}
2756
2757.world-clocks-button .world-clocks-grid {
2758 spacing-rows: 6px;
2759 spacing-columns: 12px;
2760}
2761
2762.world-clocks-button .world-clocks-header {
2763 color: rgba(239, 241, 245, 0.5);
2764}
2765
2766.world-clocks-button .world-clocks-city {
2767 font-weight: bold;
2768 font-size: 12pt;
2769 color: rgba(239, 241, 245, 0.7);
2770}
2771
2772.world-clocks-button .world-clocks-time {
2773 font-feature-settings: 'tnum';
2774 font-size: 12pt;
2775 color: #eff1f5;
2776}
2777
2778.world-clocks-button .world-clocks-time:ltr {
2779 text-align: right;
2780}
2781
2782.world-clocks-button .world-clocks-time:rtl {
2783 text-align: left;
2784}
2785
2786.world-clocks-button .world-clocks-timezone {
2787 font-feature-settings: 'tnum';
2788 font-size: 11pt;
2789 color: rgba(239, 241, 245, 0.5);
2790}
2791
2792.world-clocks-grid,
2793.weather-grid {
2794 spacing-rows: 0.4em;
2795 spacing-columns: 0.8em;
2796}
2797
2798.weather-button .weather-box {
2799 spacing: 10px;
2800}
2801
2802.weather-button .weather-header-box {
2803 spacing: 6px;
2804}
2805
2806.weather-button .weather-header {
2807 font-weight: bold;
2808 color: rgba(239, 241, 245, 0.7);
2809}
2810
2811.weather-button .weather-header.location {
2812 font-weight: normal;
2813 font-size: 11pt;
2814 color: rgba(239, 241, 245, 0.5);
2815}
2816
2817.weather-button .weather-grid {
2818 spacing-rows: 6px;
2819 spacing-columns: 12px;
2820}
2821
2822.weather-button .weather-forecast-time {
2823 font-feature-settings: 'tnum';
2824 font-size: 10pt;
2825 font-weight: normal;
2826 padding-top: 0.2em;
2827 padding-bottom: 0.4em;
2828 color: rgba(239, 241, 245, 0.7);
2829}
2830
2831.weather-button .weather-forecast-icon {
2832 icon-size: 32px;
2833}
2834
2835.weather-button .weather-forecast-temp {
2836 font-weight: bold;
2837}
2838
2839/* Dash */
2840#dash {
2841 margin-top: 16px;
2842}
2843
2844#dash .dash-background {
2845 background-color: rgba(49, 50, 68, 0.65);
2846 box-shadow: inset 0 0 0 1px rgba(239, 241, 245, 0.12);
2847 border: none;
2848 /* remove black border on ubuntu */
2849 padding: 4px 3px;
2850 border-radius: 23px;
2851}
2852
2853#dash .dash-item-container .placeholder {
2854 background-image: none;
2855 background-size: contain;
2856 height: 32px;
2857}
2858
2859#dash .dash-item-container .empty-dash-drop-target {
2860 width: 32px;
2861 height: 32px;
2862}
2863
2864#dash .dash-item-container .show-apps,
2865#dash .dash-item-container .overview-tile,
2866#dash .dash-item-container .grid-search-result {
2867 background: none;
2868 box-shadow: none;
2869 border: none;
2870 border-radius: 0;
2871 padding: 0;
2872 margin: 0 2px;
2873 padding-bottom: 16px;
2874}
2875
2876#dash .dash-item-container .show-apps .overview-icon,
2877#dash .dash-item-container .overview-tile .overview-icon,
2878#dash .dash-item-container .grid-search-result .overview-icon {
2879 border-radius: 18px;
2880 padding: 6px;
2881 spacing: 6px;
2882 text-align: center;
2883 transition-duration: 100ms;
2884 background-color: transparent;
2885 color: #eff1f5;
2886}
2887
2888#dash .dash-item-container .show-apps:focus .overview-icon,
2889#dash .dash-item-container .overview-tile:focus .overview-icon,
2890#dash .dash-item-container .grid-search-result:focus .overview-icon {
2891 background-color: rgba(239, 241, 245, 0.12);
2892}
2893
2894#dash .dash-item-container .show-apps:hover .overview-icon,
2895#dash .dash-item-container .overview-tile:hover .overview-icon,
2896#dash .dash-item-container .grid-search-result:hover .overview-icon {
2897 background-color: rgba(239, 241, 245, 0.15);
2898 box-shadow: inset 0 0 0 1px rgba(239, 241, 245, 0.15);
2899}
2900
2901#dash .dash-item-container .show-apps:active .overview-icon,
2902#dash .dash-item-container .overview-tile:active .overview-icon,
2903#dash .dash-item-container .grid-search-result:active .overview-icon {
2904 background-color: rgba(239, 241, 245, 0.3);
2905}
2906
2907#dash .dash-item-container .show-apps:checked .overview-icon,
2908#dash .dash-item-container .overview-tile:checked .overview-icon,
2909#dash .dash-item-container .grid-search-result:checked .overview-icon {
2910 background-color: rgba(239, 241, 245, 0.12);
2911}
2912
2913#dash .dash-item-container .app-well-app-running-dot,
2914#dash .dash-item-container .app-grid-running-dot {
2915 margin-bottom: 12px;
2916 offset-y: 8px;
2917 width: 6px;
2918 height: 6px;
2919 border-radius: 9999px;
2920 background-color: #eff1f5;
2921}
2922
2923#dash .dash-separator {
2924 width: 1px;
2925 margin-left: 4px;
2926 margin-right: 4px;
2927 background-color: rgba(239, 241, 245, 0.25);
2928}
2929
2930#dash .dash-separator,
2931#dash .dash-background {
2932 margin-bottom: 16px;
2933}
2934
2935.dash-label {
2936 color: #eff1f5;
2937 background-color: rgba(49, 50, 68, 0.65);
2938 border-radius: 12px;
2939 padding: 6px 12px;
2940 box-shadow: none;
2941 border: none;
2942 text-align: center;
2943 -y-offset: 12px;
2944 -x-offset: 8px;
2945}
2946
2947/* Message List */
2948.message-list {
2949 width: 29em;
2950 text-shadow: none;
2951 border: solid rgba(239, 241, 245, 0.12);
2952 padding: 0;
2953}
2954
2955.message-list:ltr {
2956 margin-left: 0;
2957 margin-right: 8px;
2958 padding-right: 10px;
2959 border-right-width: 0;
2960}
2961
2962.message-list:rtl {
2963 margin-right: 0;
2964 margin-left: 8px;
2965 padding-left: 10px;
2966 border-left-width: 0;
2967}
2968
2969.message-list .message-list-placeholder {
2970 spacing: 12px;
2971 color: rgba(239, 241, 245, 0.32);
2972}
2973
2974.message-list .message-list-placeholder > StIcon {
2975 icon-size: 96px;
2976 margin-bottom: 12px;
2977 -st-icon-style: symbolic;
2978}
2979
2980.message-list-sections {
2981 margin: 0;
2982 padding-bottom: 6px;
2983}
2984
2985.message-list-sections:ltr {
2986 margin-right: 0;
2987}
2988
2989.message-list-sections:rtl {
2990 margin-left: 0;
2991}
2992
2993.message-list-section,
2994.message-list-sections,
2995.message-list-section-list {
2996 spacing: 6px;
2997}
2998
2999.message-list-controls {
3000 margin: 8px 16px 0;
3001 padding: 6px;
3002 spacing: 6px;
3003}
3004
3005.message-list-controls .dnd-button {
3006 border-width: 2px;
3007 border-color: transparent;
3008 border-radius: 32px;
3009 border-style: solid;
3010}
3011
3012.message-list-controls .dnd-button:focus {
3013 border-color: rgba(203, 166, 247, 0.6);
3014}
3015
3016.message {
3017 padding: 0;
3018 margin: 3px;
3019 border-radius: 20px;
3020}
3021
3022.popup-menu .message {
3023 border-radius: 12px;
3024}
3025
3026.popup-menu .message .notification-button:first-child:ltr {
3027 border-radius: 0 0 0 12px;
3028}
3029
3030.popup-menu .message .notification-button:last-child:ltr {
3031 border-radius: 0 0 12px;
3032}
3033
3034.popup-menu .message .notification-button:first-child:rtl {
3035 border-radius: 0 0 12px;
3036}
3037
3038.popup-menu .message .notification-button:last-child:rtl {
3039 border-radius: 0 0 0 12px;
3040}
3041
3042.popup-menu .message .notification-button:first-child:last-child {
3043 border-radius: 0 0 12px 12px;
3044}
3045
3046.message .message-header {
3047 padding: 0 0.409em;
3048 margin: 6px;
3049 margin-bottom: 0;
3050 spacing: 6px;
3051 color: rgba(239, 241, 245, 0.5);
3052}
3053
3054.message .message-header .message-source-icon {
3055 icon-size: 1.091em;
3056 -st-icon-style: symbolic;
3057}
3058
3059.message .message-header .message-header-content {
3060 spacing: 6px;
3061 min-height: 1.637em;
3062 padding-bottom: 6px;
3063}
3064
3065.message .message-header .message-header-content .message-source-title {
3066 font-weight: bold;
3067}
3068
3069.message .message-header .message-header-content .event-time {
3070 padding-bottom: 0.068em;
3071 color: rgba(239, 241, 245, 0.5);
3072}
3073
3074.message .message-header .message-header-content .event-time:ltr {
3075 text-align: right;
3076}
3077
3078.message .message-header .message-header-content .event-time:rtl {
3079 text-align: left;
3080}
3081
3082.message .message-header .message-expand-button,
3083.message .message-header .message-close-button {
3084 color: #eff1f5;
3085 background-color: rgba(239, 241, 245, 0.04);
3086 padding: 4px;
3087 border: none;
3088}
3089
3090.message .message-header .message-expand-button, .message .message-header .message-expand-button:hover, .message .message-header .message-expand-button:active,
3091.message .message-header .message-close-button,
3092.message .message-header .message-close-button:hover,
3093.message .message-header .message-close-button:active {
3094 color: #eff1f5;
3095}
3096
3097.message .message-header .message-expand-button:hover, .message .message-header .message-expand-button:focus,
3098.message .message-header .message-close-button:hover,
3099.message .message-header .message-close-button:focus {
3100 background-color: rgba(239, 241, 245, 0.12);
3101}
3102
3103.message .message-header .message-expand-button:active, .message .message-header .message-expand-button:active:hover,
3104.message .message-header .message-close-button:active,
3105.message .message-header .message-close-button:active:hover {
3106 background-color: rgba(239, 241, 245, 0.3);
3107}
3108
3109.message .message-header .message-expand-button:insensitive,
3110.message .message-header .message-close-button:insensitive {
3111 background-color: rgba(239, 241, 245, 0.04);
3112}
3113
3114.message .message-header .message-expand-button {
3115 padding: 4px;
3116 border: none;
3117}
3118
3119.message .message-header .message-expand-button:ltr {
3120 margin-right: 6px;
3121}
3122
3123.message .message-header .message-expand-button:rtl {
3124 margin-left: 6px;
3125}
3126
3127.message .message-box {
3128 padding: 6px;
3129 margin: 6px;
3130 margin-top: 0;
3131 spacing: 6px;
3132}
3133
3134.message .message-box .message-icon {
3135 icon-size: 48px;
3136 -st-icon-style: symbolic;
3137}
3138
3139.message .message-box .message-icon:ltr {
3140 margin-right: 6px;
3141}
3142
3143.message .message-box .message-icon:rtl {
3144 margin-left: 6px;
3145}
3146
3147.message .message-box .message-icon.message-themed-icon {
3148 border-radius: 9999px;
3149 icon-size: 16px;
3150 min-width: 48px;
3151 min-height: 48px;
3152 color: rgba(239, 241, 245, 0.5);
3153 background-color: rgba(239, 241, 245, 0.12);
3154}
3155
3156.message .message-box:first-child {
3157 margin-top: 12px;
3158}
3159
3160.message .message-box .message-content {
3161 spacing: 4px;
3162}
3163
3164.message .message-box .message-content .message-title {
3165 font-weight: bold;
3166}
3167
3168.url-highlighter {
3169 link-color: #8fcbe8;
3170}
3171
3172.message-media-control {
3173 margin: 4px 6px;
3174 padding: 12px;
3175 border-radius: 9999px;
3176 border: none;
3177 color: rgba(239, 241, 245, 0.7);
3178}
3179
3180.message-media-control:hover, .message-media-control:focus {
3181 background-color: rgba(239, 241, 245, 0.12);
3182}
3183
3184.message-media-control:active {
3185 background-color: rgba(239, 241, 245, 0.3);
3186}
3187
3188.message-media-control:hover, .message-media-control:focus, .message-media-control:active {
3189 color: #eff1f5;
3190}
3191
3192.message-media-control:insensitive {
3193 color: rgba(239, 241, 245, 0.5);
3194}
3195
3196.message-media-control StIcon {
3197 icon-size: 16px;
3198}
3199
3200.media-message .message-icon {
3201 border-radius: 6px !important;
3202}
3203
3204.media-message .message-icon.message-themed-icon {
3205 icon-size: 32px !important;
3206}
3207
3208.workspace-animation {
3209 background-color: #1e1e2e;
3210}
3211
3212.calendar .calendar-change-month-back,
3213.calendar .calendar-change-month-forward {
3214 padding: 0 2px;
3215}
3216
3217/* Notifications & Message Tray */
3218.notification-banner {
3219 min-height: 64px;
3220 width: 34em;
3221 margin: 20px;
3222 border-radius: 12px;
3223 color: rgba(239, 241, 245, 0.7);
3224 background-color: #292c3c;
3225 border: none;
3226 text-shadow: none;
3227 box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
3228 border-radius: 18px;
3229}
3230
3231.notification-banner:hover, .notification-banner:active {
3232 color: #eff1f5;
3233 background-color: #292c3c;
3234 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
3235 margin: 20px;
3236}
3237
3238.notification-banner:focus {
3239 color: #eff1f5;
3240 background-color: #292c3c;
3241}
3242
3243.notification-buttons-bin {
3244 background-color: transparent;
3245 padding-top: 0;
3246 border: none;
3247 border-top: 1px solid rgba(239, 241, 245, 0.12);
3248 spacing: 0;
3249}
3250
3251.notification-button {
3252 min-height: 44px;
3253 padding: 0 18px;
3254 background-color: transparent;
3255 color: rgba(239, 241, 245, 0.7);
3256 font-weight: 500;
3257 border: none;
3258}
3259
3260.notification-button:focus {
3261 background-color: transparent;
3262 color: #eff1f5;
3263 box-shadow: inset 0 0 0 2px rgba(239, 241, 245, 0.12);
3264}
3265
3266.notification-button:hover, .notification-button:focus:hover {
3267 background-color: rgba(239, 241, 245, 0.12);
3268 color: #eff1f5;
3269 box-shadow: none;
3270}
3271
3272.notification-button:active {
3273 background-color: rgba(239, 241, 245, 0.3);
3274 color: #eff1f5;
3275}
3276
3277.notification-button:first-child:ltr {
3278 border-radius: 0 0 0 18px;
3279}
3280
3281.notification-button:last-child:ltr {
3282 border-radius: 0 0 18px;
3283 margin-right: 0 !important;
3284}
3285
3286.notification-button:first-child:rtl {
3287 border-radius: 0 0 18px;
3288}
3289
3290.notification-button:last-child:rtl {
3291 border-radius: 0 0 0 18px;
3292 margin-left: 0 !important;
3293}
3294
3295.notification-button:first-child:last-child {
3296 border-radius: 0 0 18px 18px;
3297 margin-left: 0 !important;
3298 margin-right: 0 !important;
3299}
3300
3301.controls-manager,
3302.secondary-monitor-workspaces {
3303 spacing: 12px;
3304}
3305
3306#overviewGroup {
3307 background-color: #11111b;
3308}
3309
3310.osd-window {
3311 spacing: 12px;
3312 padding: 12px 18px;
3313 margin-bottom: 4em;
3314}
3315
3316.osd-window > * {
3317 spacing: 8px;
3318}
3319
3320.osd-window StIcon {
3321 icon-size: 32px;
3322}
3323
3324.osd-window StLabel:ltr {
3325 margin-right: 6px;
3326}
3327
3328.osd-window StLabel:rtl {
3329 margin-left: 6px;
3330}
3331
3332#appMenu {
3333 spacing: 6px;
3334}
3335
3336#appMenu .label-shadow {
3337 color: transparent;
3338}
3339
3340#appMenu .panel-status-menu-box {
3341 padding: 0 6px;
3342 spacing: 6px;
3343}
3344
3345.popup-menu .popup-menu-item {
3346 padding: 9px 12px;
3347}
3348
3349.popup-separator-menu-item {
3350 padding: 3px 0 !important;
3351}
3352
3353.popup-separator-menu-item .popup-menu-ornament {
3354 width: 0 !important;
3355}
3356
3357.popup-separator-menu-item .popup-separator-menu-item-separator {
3358 height: 1px;
3359 background-color: rgba(239, 241, 245, 0.12);
3360 margin: 6px 32px;
3361 padding: 0 !important;
3362}
3363
3364.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator {
3365 padding: 0 !important;
3366 margin: 0 32px 0 0;
3367 height: 1px;
3368}
3369
3370.popup-menu-ornament {
3371 icon-size: 16px !important;
3372 width: 16px;
3373}
3374
3375/* Quick Settings */
3376.quick-settings {
3377 padding: 18px !important;
3378 border-radius: 24px !important;
3379 margin-top: 6px !important;
3380}
3381
3382.quick-settings .icon-button, .quick-settings .background-app-item .close-button, .background-app-item .quick-settings .close-button, .quick-settings .message .message-header .message-expand-button, .message .message-header .quick-settings .message-expand-button,
3383.quick-settings .message .message-header .message-close-button,
3384.message .message-header .quick-settings .message-close-button,
3385.quick-settings .button {
3386 padding: 10.5px;
3387}
3388
3389.quick-settings .icon-button > StIcon, .quick-settings .background-app-item .close-button > StIcon, .background-app-item .quick-settings .close-button > StIcon, .quick-settings .message .message-header .message-expand-button > StIcon, .message .message-header .quick-settings .message-expand-button > StIcon,
3390.quick-settings .message .message-header .message-close-button > StIcon,
3391.message .message-header .quick-settings .message-close-button > StIcon,
3392.quick-settings .button > StIcon {
3393 icon-size: 16px;
3394}
3395
3396.quick-settings-grid {
3397 spacing-rows: 12px;
3398 spacing-columns: 12px;
3399}
3400
3401.quick-toggle,
3402.quick-menu-toggle {
3403 border-radius: 12px;
3404 min-width: 12em;
3405 max-width: 12em;
3406 min-height: 44px;
3407 border: none;
3408 margin: 1px;
3409}
3410
3411.quick-toggle {
3412 background-color: rgba(239, 241, 245, 0.08) !important;
3413 /* Move padding into the box; this is to allow menu arrows
3414 to extend to the border */
3415}
3416
3417.quick-toggle:hover {
3418 background-color: rgba(239, 241, 245, 0.12) !important;
3419}
3420
3421.quick-toggle:active {
3422 background-color: rgba(239, 241, 245, 0.15) !important;
3423}
3424
3425.quick-toggle:checked {
3426 background-color: rgba(203, 166, 247, 0.95) !important;
3427 color: #1e1e2e;
3428}
3429
3430.quick-toggle:checked:hover {
3431 background-color: #d9c4f6 !important;
3432 color: #1e1e2e;
3433}
3434
3435.quick-toggle:checked:active {
3436 background-color: #d2b5f7 !important;
3437 color: #1e1e2e;
3438}
3439
3440.quick-toggle > StBoxLayout {
3441 spacing: 6px;
3442}
3443
3444.quick-toggle.button {
3445 padding: 0;
3446}
3447
3448.quick-toggle > StBoxLayout {
3449 padding: 0 12px;
3450}
3451
3452.quick-toggle:ltr > StBoxLayout {
3453 padding-left: 15px;
3454}
3455
3456.quick-toggle:rtl > StBoxLayout {
3457 padding-right: 15px;
3458}
3459
3460.quick-toggle .quick-toggle-title {
3461 font-weight: bold;
3462}
3463
3464.quick-toggle StBoxLayout > .quick-toggle-subtitle {
3465 font-weight: normal;
3466 font-size: 12px;
3467}
3468
3469.quick-toggle .quick-toggle-icon {
3470 icon-size: 16px;
3471}
3472
3473.quick-menu-toggle .quick-toggle {
3474 min-width: auto;
3475 max-width: auto;
3476}
3477
3478.quick-menu-toggle .quick-toggle:ltr {
3479 border-radius: 12px 0 0 12px;
3480}
3481
3482.quick-menu-toggle .quick-toggle:ltr > StBoxLayout {
3483 padding-right: 9px;
3484}
3485
3486.quick-menu-toggle .quick-toggle:rtl {
3487 border-radius: 0 12px 12px 0;
3488}
3489
3490.quick-menu-toggle .quick-toggle:rtr > StBoxLayout {
3491 padding-left: 9px;
3492}
3493
3494.quick-menu-toggle .quick-toggle:ltr:last-child {
3495 border-radius: 12px;
3496}
3497
3498.quick-menu-toggle .quick-toggle:rtl:last-child {
3499 border-radius: 12px;
3500}
3501
3502.quick-menu-toggle .quick-toggle-arrow {
3503 background-color: rgba(239, 241, 245, 0.08) !important;
3504 padding: 6px 10.5px;
3505 border: none !important;
3506 color: #eff1f5;
3507 margin: 1px;
3508}
3509
3510.quick-menu-toggle .quick-toggle-arrow:hover {
3511 background-color: rgba(239, 241, 245, 0.12) !important;
3512}
3513
3514.quick-menu-toggle .quick-toggle-arrow:active {
3515 background-color: rgba(239, 241, 245, 0.15) !important;
3516}
3517
3518.quick-menu-toggle .quick-toggle-arrow:checked {
3519 background-color: rgba(203, 166, 247, 0.75) !important;
3520 color: #1e1e2e;
3521}
3522
3523.quick-menu-toggle .quick-toggle-arrow:checked:hover {
3524 background-color: #d9c4f6 !important;
3525 color: #1e1e2e;
3526}
3527
3528.quick-menu-toggle .quick-toggle-arrow:checked:active {
3529 background-color: #d2b5f7 !important;
3530 color: #1e1e2e;
3531}
3532
3533.quick-menu-toggle .quick-toggle-arrow:ltr {
3534 border-radius: 0 12px 12px 0;
3535}
3536
3537.quick-menu-toggle .quick-toggle-arrow:rtl {
3538 border-radius: 12px 0 0 12px;
3539}
3540
3541.quick-slider > StBoxLayout {
3542 spacing: 6px;
3543}
3544
3545.quick-slider .slider-bin {
3546 min-height: 16px;
3547 padding: 6px;
3548 border-radius: 9999px;
3549}
3550
3551.quick-slider .slider-bin:focus {
3552 color: #eff1f5;
3553 background-color: rgba(239, 241, 245, 0.08);
3554 box-shadow: none !important;
3555}
3556
3557.quick-slider .quick-toggle-icon {
3558 icon-size: 16px;
3559}
3560
3561.quick-slider .icon-button, .quick-slider .background-app-item .close-button, .background-app-item .quick-slider .close-button, .quick-slider .message .message-header .message-expand-button, .message .message-header .quick-slider .message-expand-button,
3562.quick-slider .message .message-header .message-close-button,
3563.message .message-header .quick-slider .message-close-button {
3564 background-color: rgba(239, 241, 245, 0.08) !important;
3565 color: #cba6f7 !important;
3566 border-radius: 12px;
3567 padding: 9px;
3568}
3569
3570.quick-slider .icon-button:hover, .quick-slider .background-app-item .close-button:hover, .background-app-item .quick-slider .close-button:hover, .quick-slider .message .message-header .message-expand-button:hover, .message .message-header .quick-slider .message-expand-button:hover,
3571.quick-slider .message .message-header .message-close-button:hover,
3572.message .message-header .quick-slider .message-close-button:hover {
3573 background-color: rgba(239, 241, 245, 0.12) !important;
3574}
3575
3576.quick-slider .icon-button:active, .quick-slider .background-app-item .close-button:active, .background-app-item .quick-slider .close-button:active, .quick-slider .message .message-header .message-expand-button:active, .message .message-header .quick-slider .message-expand-button:active,
3577.quick-slider .message .message-header .message-close-button:active,
3578.message .message-header .quick-slider .message-close-button:active {
3579 background-color: rgba(239, 241, 245, 0.04);
3580}
3581
3582.quick-toggle-menu {
3583 background-color: #292c3c !important;
3584 color: #eff1f5 !important;
3585 border-radius: 24px !important;
3586 padding: 12px;
3587 margin: 12px 18px 0;
3588}
3589
3590.quick-toggle-menu .popup-menu-item {
3591 border-radius: 12px !important;
3592}
3593
3594.quick-toggle-menu .popup-menu-item:focus, .quick-toggle-menu .popup-menu-item:hover, .quick-toggle-menu .popup-menu-item.selected {
3595 color: #cba6f7 !important;
3596 background-color: rgba(239, 241, 245, 0.1) !important;
3597}
3598
3599.quick-toggle-menu .popup-menu-item:active {
3600 color: #eff1f5 !important;
3601 background-color: rgba(239, 241, 245, 0.2) !important;
3602}
3603
3604.quick-toggle-menu .popup-menu-item > StIcon {
3605 -st-icon-style: symbolic;
3606}
3607
3608.quick-toggle-menu .header {
3609 spacing-rows: 3px;
3610 spacing-columns: 12px;
3611 padding-bottom: 12px;
3612}
3613
3614.quick-toggle-menu .header .icon {
3615 icon-size: 24px;
3616 border-radius: 12px;
3617 padding: 9px;
3618 background-color: rgba(239, 241, 245, 0.12) !important;
3619}
3620
3621.quick-toggle-menu .header .icon.active {
3622 background-color: #cba6f7 !important;
3623 color: rgba(30, 30, 46, 0.87);
3624}
3625
3626.quick-settings-system-item > StBoxLayout {
3627 spacing: 12px;
3628}
3629
3630.quick-settings-system-item .icon-button, .quick-settings-system-item .background-app-item .close-button, .background-app-item .quick-settings-system-item .close-button, .quick-settings-system-item .message .message-header .message-expand-button, .message .message-header .quick-settings-system-item .message-expand-button,
3631.quick-settings-system-item .message .message-header .message-close-button,
3632.message .message-header .quick-settings-system-item .message-close-button {
3633 background-color: rgba(239, 241, 245, 0.08);
3634 color: #cba6f7 !important;
3635 border-radius: 12px;
3636}
3637
3638.quick-settings-system-item .icon-button > StIcon, .quick-settings-system-item .background-app-item .close-button > StIcon, .background-app-item .quick-settings-system-item .close-button > StIcon, .quick-settings-system-item .message .message-header .message-expand-button > StIcon, .message .message-header .quick-settings-system-item .message-expand-button > StIcon,
3639.quick-settings-system-item .message .message-header .message-close-button > StIcon,
3640.message .message-header .quick-settings-system-item .message-close-button > StIcon {
3641 -st-icon-style: symbolic;
3642 icon-size: 16px;
3643}
3644
3645.quick-settings-system-item .power-item {
3646 color: #cba6f7 !important;
3647 min-height: 0;
3648 min-width: 0;
3649}
3650
3651.quick-settings-system-item .power-item:insensitive {
3652 color: #eff1f5;
3653 background-color: #313244;
3654 box-shadow: none !important;
3655 background-color: transparent;
3656}
3657
3658.nm-network-item .wireless-secure-icon {
3659 icon-size: 8px;
3660}
3661
3662.bt-device-item .popup-menu-icon {
3663 -st-icon-style: symbolic;
3664}
3665
3666.bt-menu-placeholder.popup-menu-item {
3667 text-align: center;
3668 padding: 2em 4em;
3669}
3670
3671.device-subtitle {
3672 color: rgba(239, 241, 245, 0.5);
3673}
3674
3675.background-apps-quick-toggle {
3676 min-height: 40px;
3677 background-color: transparent;
3678}
3679
3680.background-apps-quick-toggle StIcon {
3681 icon-size: 16px !important;
3682}
3683
3684.background-app-item .popup-menu-icon {
3685 icon-size: 32px !important;
3686 -st-icon-style: regular !important;
3687}
3688
3689.background-app-item .close-button {
3690 padding: 6px;
3691}
3692
3693.background-app-item.popup-inactive-menu-item {
3694 color: #eff1f5;
3695}
3696
3697.search-entry {
3698 margin-top: 24px;
3699 margin-bottom: 6px;
3700}
3701
3702/* Search */
3703.list-search-result, .search-provider-icon {
3704 border-radius: 12px;
3705 padding: 6px;
3706 transition-duration: 100ms;
3707 text-align: center;
3708 background-color: transparent;
3709}
3710
3711.list-search-result:focus, .search-provider-icon:focus, .list-search-result:hover, .search-provider-icon:hover, .list-search-result:selected, .search-provider-icon:selected {
3712 background-color: rgba(239, 241, 245, 0.12);
3713 transition-duration: 0;
3714}
3715
3716.list-search-result:active, .search-provider-icon:active, .list-search-result:checked, .search-provider-icon:checked {
3717 background-color: rgba(239, 241, 245, 0.2);
3718}
3719
3720#searchResults {
3721 margin: 0 4px;
3722}
3723
3724#searchResultsContent {
3725 max-width: 1044px;
3726}
3727
3728.search-section {
3729 spacing: 18px;
3730}
3731
3732.search-section .search-section-separator {
3733 height: 8px;
3734 background-color: transparent;
3735}
3736
3737.search-section-content {
3738 border-radius: 27px;
3739 padding: 12px;
3740 margin: 0 12px;
3741 border: none;
3742 box-shadow: none;
3743 background: none;
3744 text-shadow: none;
3745 color: rgba(239, 241, 245, 0.7);
3746 background-color: rgba(239, 241, 245, 0.12);
3747}
3748
3749.search-statustext {
3750 color: rgba(239, 241, 245, 0.5);
3751}
3752
3753.grid-search-results {
3754 spacing: 30px;
3755 margin: 0 12px;
3756}
3757
3758.search-provider-icon:ltr {
3759 margin-right: 4px;
3760}
3761
3762.search-provider-icon:rtl {
3763 margin-left: 4px;
3764}
3765
3766.search-provider-icon .list-search-provider-content {
3767 spacing: 12px;
3768}
3769
3770.search-provider-icon .list-search-provider-content .list-search-provider-details {
3771 width: 120px;
3772 color: rgba(239, 241, 245, 0.7);
3773}
3774
3775.list-search-results {
3776 spacing: 6px;
3777}
3778
3779.list-search-result .list-search-result-content {
3780 spacing: 6px;
3781}
3782
3783.list-search-result .list-search-result-title {
3784 spacing: 12px;
3785}
3786
3787.list-search-result .list-search-result-description {
3788 color: rgba(239, 241, 245, 0.7);
3789}
3790
3791.icon-label-button-container {
3792 spacing: 6px;
3793}
3794
3795.icon-label-button-container StIcon {
3796 icon-size: 32px;
3797}
3798
3799.screenshot-ui-panel {
3800 border-radius: 39px;
3801 padding: 18px;
3802 padding-bottom: 12px;
3803 margin-bottom: 4em;
3804 spacing: 12px;
3805}
3806
3807.screenshot-ui-close-button {
3808 padding: 6px !important;
3809 margin-top: 12px;
3810 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
3811}
3812
3813.screenshot-ui-close-button.left {
3814 margin-left: 12px;
3815}
3816
3817.screenshot-ui-close-button.right {
3818 margin-right: 12px;
3819}
3820
3821.screenshot-ui-type-button {
3822 min-width: 48px;
3823 padding: 12px 18px !important;
3824 border-radius: 21px;
3825}
3826
3827.screenshot-ui-capture-button {
3828 width: 36px;
3829 height: 36px;
3830 border-radius: 9999px;
3831 border: 4px #eff1f5;
3832 padding: 4px;
3833}
3834
3835.screenshot-ui-capture-button .screenshot-ui-capture-button-circle {
3836 background-color: #eff1f5;
3837 transition-duration: 200ms;
3838 border-radius: 9999px;
3839}
3840
3841.screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus {
3842 background-color: rgba(239, 241, 245, 0.12);
3843}
3844
3845.screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle {
3846 background-color: #c0c8d8;
3847}
3848
3849.screenshot-ui-capture-button:active .screenshot-ui-capture-button-circle {
3850 background-color: #586a8d;
3851}
3852
3853.screenshot-ui-capture-button:cast .screenshot-ui-capture-button-circle {
3854 background-color: #d20f39;
3855}
3856
3857.screenshot-ui-capture-button:cast:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:cast:focus .screenshot-ui-capture-button-circle {
3858 background-color: #ea113f;
3859}
3860
3861.screenshot-ui-capture-button:cast:active .screenshot-ui-capture-button-circle {
3862 background-color: #b10d30;
3863}
3864
3865.screenshot-ui-shot-cast-container {
3866 background-color: #28283d;
3867 border-radius: 18px;
3868 padding: 3px;
3869 spacing: 3px;
3870}
3871
3872.screenshot-ui-shot-cast-container:ltr {
3873 margin-left: 3px;
3874}
3875
3876.screenshot-ui-shot-cast-container:rtl {
3877 margin-right: 3px;
3878}
3879
3880.screenshot-ui-shot-cast-button {
3881 padding: 6px 12px;
3882 background-color: transparent;
3883 border-radius: 15px;
3884}
3885
3886.screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus {
3887 background-color: #32324d;
3888}
3889
3890.screenshot-ui-shot-cast-button:active {
3891 background-color: rgba(239, 241, 245, 0.3);
3892}
3893
3894.screenshot-ui-shot-cast-button:checked {
3895 background-color: #eff1f5;
3896 color: #1e1e2e;
3897}
3898
3899.screenshot-ui-shot-cast-button:insensitive {
3900 color: rgba(239, 241, 245, 0.5);
3901}
3902
3903.screenshot-ui-shot-cast-button StIcon {
3904 icon-size: 16px;
3905}
3906
3907.screenshot-ui-show-pointer-button {
3908 border-radius: 9999px;
3909 padding: 12px !important;
3910}
3911
3912.screenshot-ui-show-pointer-button StIcon {
3913 icon-size: 16px;
3914}
3915
3916.screenshot-ui-area-indicator-shade {
3917 background-color: rgba(0, 0, 0, 0.3);
3918}
3919
3920.screenshot-ui-area-selector .screenshot-ui-area-indicator-shade {
3921 background-color: rgba(0, 0, 0, 0.5);
3922}
3923
3924.screenshot-ui-area-selector .screenshot-ui-area-indicator-selection {
3925 border: 2px solid #eff1f5;
3926}
3927
3928.screenshot-ui-area-selector-handle {
3929 border-radius: 9999px;
3930 background-color: #cba6f7;
3931 box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.2);
3932 width: 24px;
3933 height: 24px;
3934}
3935
3936.screenshot-ui-window-selector {
3937 background-color: #292c3c;
3938}
3939
3940.screenshot-ui-window-selector .screenshot-ui-window-selector-window-container {
3941 margin: 100px;
3942}
3943
3944.screenshot-ui-window-selector:primary-monitor .screenshot-ui-window-selector-window-container {
3945 margin-bottom: 200px;
3946}
3947
3948.screenshot-ui-window-selector-window-border {
3949 transition-duration: 200ms;
3950 border-radius: 18px;
3951 border: 6px transparent;
3952}
3953
3954.screenshot-ui-window-selector-check {
3955 transition-duration: 200ms;
3956 color: transparent;
3957 border-radius: 9999px;
3958 border-width: 12px;
3959 icon-size: 24px;
3960}
3961
3962.screenshot-ui-window-selector-window:hover .screenshot-ui-window-selector-window-border {
3963 border-color: #a260f1;
3964}
3965
3966.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-window-border {
3967 border-color: #cba6f7;
3968 background-color: rgba(203, 166, 247, 0.2);
3969}
3970
3971.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-check {
3972 color: rgba(30, 30, 46, 0.87);
3973 background-color: #cba6f7;
3974}
3975
3976.screenshot-ui-screen-selector {
3977 transition-duration: 200ms;
3978 background-color: rgba(0, 0, 0, 0.5);
3979}
3980
3981.screenshot-ui-screen-selector:hover {
3982 background-color: rgba(0, 0, 0, 0.3);
3983}
3984
3985.screenshot-ui-screen-selector:active {
3986 background-color: rgba(0, 0, 0, 0.7);
3987}
3988
3989.screenshot-ui-screen-selector:checked {
3990 background-color: transparent;
3991 border: 2px solid #eff1f5;
3992}
3993
3994.screenshot-ui-tooltip {
3995 color: #eff1f5;
3996 background-color: #1e1e2e;
3997 border-radius: 9999px;
3998 padding: 6px 12px;
3999 text-align: center;
4000 -y-offset: 24px;
4001}
4002
4003.window-picker {
4004 spacing: 6px;
4005}
4006
4007.window-caption {
4008 color: #eff1f5;
4009 background-color: #1e1e2e;
4010 border-radius: 9999px;
4011 padding: 6px 12px;
4012}
4013
4014.window-close, .screenshot-ui-close-button {
4015 background-color: #292c3c;
4016 color: #eff1f5;
4017 border-radius: 9999px;
4018 padding: 3px;
4019 height: 30px;
4020 width: 30px;
4021 box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5);
4022 transition-duration: 300ms;
4023}
4024
4025.window-close:hover, .screenshot-ui-close-button:hover {
4026 color: #eff1f5;
4027 background-color: #35394e;
4028}
4029
4030.window-close:active, .screenshot-ui-close-button:active {
4031 color: #eff1f5;
4032 background-color: #1d1f2a;
4033}
4034
4035.workspace-background {
4036 border-radius: 30px;
4037 background-color: #1e1e2e;
4038 box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.3);
4039}
4040
4041/* Workspace pager */
4042.workspace-thumbnails {
4043 visible-width: 32px;
4044 spacing: 6px;
4045 padding: 6px;
4046}
4047
4048.workspace-thumbnails .workspace-thumbnail {
4049 color: rgba(239, 241, 245, 0.7);
4050 background-color: rgba(239, 241, 245, 0.12);
4051 border: none;
4052 border-radius: 12px;
4053}
4054
4055.workspace-thumbnails .placeholder {
4056 background-image: url("assets/dash-placeholder.svg");
4057 background-size: contain;
4058 width: 18px;
4059 height: 24px;
4060}
4061
4062.workspace-thumbnail-indicator {
4063 border: 3px solid #cba6f7;
4064 border-radius: 3px;
4065 padding: 0px;
4066}
4067
4068.bottom #dashtodockDashScrollview,
4069.top #dashtodockDashScrollview {
4070 -st-hfade-offset: 24px;
4071}
4072
4073.left #dashtodockDashScrollview,
4074.right #dashtodockDashScrollview {
4075 -st-vfade-offset: 24px;
4076}
4077
4078#dashtodockContainer {
4079 background-color: transparent;
4080}
4081
4082#dashtodockContainer .number-overlay {
4083 color: #eff1f5;
4084 background-color: rgba(0, 0, 0, 0.75);
4085 text-align: center;
4086}
4087
4088#dashtodockContainer .notification-badge {
4089 color: rgba(30, 30, 46, 0.87);
4090 background-color: #cba6f7;
4091 box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
4092 border-radius: 9999px;
4093 margin: 2px;
4094 padding: 0.25em 0.6em;
4095 font-weight: bold;
4096 text-align: center;
4097}
4098
4099#dashtodockContainer.straight-corner #dash, #dashtodockContainer.shrink.straight-corner #dash {
4100 border-radius: 0;
4101 margin: 0;
4102}
4103
4104#dashtodockContainer.straight-corner #dash .dash-background, #dashtodockContainer.shrink.straight-corner #dash .dash-background {
4105 border-radius: 0;
4106}
4107
4108#dashtodockContainer.extended.top #dash, #dashtodockContainer.extended.bottom #dash, #dashtodockContainer.extended.right #dash, #dashtodockContainer.extended.left #dash {
4109 margin-left: 0;
4110 margin-right: 0;
4111 margin-top: 0;
4112 margin-bottom: 0;
4113 padding: 0 0;
4114}
4115
4116#dashtodockContainer.extended.top #dash .dash-background, #dashtodockContainer.extended.bottom #dash .dash-background, #dashtodockContainer.extended.right #dash .dash-background, #dashtodockContainer.extended.left #dash .dash-background {
4117 border-radius: 0;
4118 margin-left: 0;
4119 margin-right: 0;
4120 margin-top: 0;
4121 margin-bottom: 0;
4122}
4123
4124#dashtodockContainer.left #dash, #dashtodockContainer.right #dash {
4125 margin-top: 0;
4126 padding: 12px 0;
4127}
4128
4129#dashtodockContainer.left #dash .dash-background, #dashtodockContainer.right #dash .dash-background {
4130 margin-bottom: 0;
4131}
4132
4133#dashtodockContainer.left .dash-item-container .app-well-app,
4134#dashtodockContainer.left .show-apps, #dashtodockContainer.right .dash-item-container .app-well-app,
4135#dashtodockContainer.right .show-apps {
4136 padding: 6px;
4137}
4138
4139#dashtodockContainer.left #dash {
4140 margin-left: 6px;
4141}
4142
4143#dashtodockContainer.right #dash {
4144 margin-right: 6px;
4145}
4146
4147#dashtodockContainer.dashtodock #dash .dash-background {
4148 background-color: rgba(30, 30, 46, 0.6);
4149}
4150
4151#dashtodockContainer #dash .dash-background {
4152 background-color: rgba(30, 30, 46, 0.85);
4153}
4154
4155#dashtodockContainer .app-well-app-running-dot {
4156 background-color: rgba(239, 241, 245, 0.3) !important;
4157}
4158
4159#dashtodockContainer StWidget.focused .app-well-app-running-dot {
4160 background-color: #e6e9ef !important;
4161}
4162
4163#dashtodockContainer:overview #dash .app-well-app-running-dot {
4164 background-color: rgba(239, 241, 245, 0.3) !important;
4165}
4166
4167#dashtodockContainer:overview #dash StWidget.focused .app-well-app-running-dot {
4168 background-color: #eff1f5 !important;
4169}
4170
4171#dashtodockContainer .show-apps .overview-icon,
4172#dashtodockContainer .app-well-app .overview-icon {
4173 color: rgba(239, 241, 245, 0.7);
4174}
4175
4176#dashtodockContainer .show-apps:hover .overview-icon, #dashtodockContainer .show-apps:focus .overview-icon, #dashtodockContainer .show-apps:selected .overview-icon,
4177#dashtodockContainer .app-well-app:hover .overview-icon,
4178#dashtodockContainer .app-well-app:focus .overview-icon,
4179#dashtodockContainer .app-well-app:selected .overview-icon {
4180 background-color: rgba(239, 241, 245, 0.12);
4181}
4182
4183#dashtodockContainer .show-apps:active .overview-icon, #dashtodockContainer .show-apps:checked .overview-icon,
4184#dashtodockContainer .app-well-app:active .overview-icon,
4185#dashtodockContainer .app-well-app:checked .overview-icon {
4186 background-color: rgba(239, 241, 245, 0.3);
4187}
4188
4189#dashtodockContainer:overview #dash .show-apps .overview-icon, #dashtodockContainer:overview #dash .app-well-app .overview-icon {
4190 color: rgba(239, 241, 245, 0.7);
4191}
4192
4193#dashtodockContainer:overview #dash .show-apps:hover .overview-icon, #dashtodockContainer:overview #dash .show-apps:focus .overview-icon, #dashtodockContainer:overview #dash .show-apps:selected .overview-icon, #dashtodockContainer:overview #dash .app-well-app:hover .overview-icon, #dashtodockContainer:overview #dash .app-well-app:focus .overview-icon, #dashtodockContainer:overview #dash .app-well-app:selected .overview-icon {
4194 background-color: rgba(239, 241, 245, 0.12);
4195}
4196
4197#dashtodockContainer:overview #dash .show-apps:active .overview-icon, #dashtodockContainer:overview #dash .show-apps:checked .overview-icon, #dashtodockContainer:overview #dash .app-well-app:active .overview-icon, #dashtodockContainer:overview #dash .app-well-app:checked .overview-icon {
4198 background-color: rgba(239, 241, 245, 0.3);
4199}
4200
4201#dashtodockContainer .app-well-app-running-dot {
4202 background-color: rgba(239, 241, 245, 0.3);
4203}
4204
4205#dashtodockContainer StWidget.focused .app-well-app-running-dot {
4206 background-color: #e6e9ef;
4207}
4208
4209#dashtodockContainer.opaque #dash .dash-background {
4210 background-color: rgba(30, 30, 46, 0.6);
4211}
4212
4213#dashtodockContainer.transparent #dash .dash-background {
4214 background-color: rgba(30, 30, 46, 0.35);
4215}
4216
4217#dashtodockContainer:overview #dash .dash-background {
4218 background-color: rgba(239, 241, 245, 0.12);
4219 border: 2px solid transparent;
4220}
4221
4222#dashtodockContainer.opaque:overview #dash .dash-background, #dashtodockContainer.transparent:overview #dash .dash-background {
4223 background-color: transparent !important;
4224 box-shadow: none !important;
4225}
4226
4227#dashtodockContainer.extended:overview #dash .dash-background, #dashtodockContainer.opaque.extended:overview #dash .dash-background, #dashtodockContainer.transparent.extended:overview #dash .dash-background {
4228 background-color: rgba(30, 30, 46, 0.6);
4229}
4230
4231#dashtodockContainer.running-dots .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton {
4232 transition-duration: 250ms;
4233 background-size: contain;
4234}
4235
4236#dashtodockContainer.extended .app-well-app .overview-icon,
4237#dashtodockContainer.extended .show-apps .overview-icon, #dashtodockContainer.extended:overview .app-well-app .overview-icon,
4238#dashtodockContainer.extended:overview .show-apps .overview-icon {
4239 border-radius: 12px;
4240}
4241
4242#dashtodockContainer .metro .overview-icon {
4243 border-radius: 0;
4244}
4245
4246.dashtodock-app-well-preview-menu-item {
4247 padding: 1em 1em 0.5em 1em;
4248}
4249
4250#dashtodockPreviewSeparator.popup-separator-menu-item-horizontal {
4251 background-color: red !important;
4252 width: 1px;
4253 height: auto;
4254 border-right-width: 1px;
4255 margin: 32px 0;
4256}
4257
4258.openweather-button, .openweather-button-action, .openweather-menu-button-container, .openweather-button-box {
4259 border: 1px solid transparent;
4260}
4261
4262.openweather-provider {
4263 padding: 0 16px;
4264 font-weight: 500;
4265 border: 1px solid transparent;
4266}
4267
4268.openweather-current-icon, .openweather-current-summary, .openweather-current-summarybox {
4269 background: none;
4270 color: #eff1f5;
4271}
4272
4273.openweather-current-databox-values {
4274 background: none;
4275 color: rgba(239, 241, 245, 0.5);
4276}
4277
4278.openweather-current-databox-captions {
4279 background: none;
4280 color: rgba(239, 241, 245, 0.5);
4281}
4282
4283.openweather-forecast-icon, .openweather-forecast-summary {
4284 background: none;
4285 color: rgba(239, 241, 245, 0.7);
4286}
4287
4288.openweather-forecast-day, .openweather-forecast-temperature {
4289 background: none;
4290 color: rgba(239, 241, 245, 0.5);
4291}
4292
4293.openweather-sunrise-icon, .openweather-sunset-icon, .openweather-build-icon {
4294 color: rgba(239, 241, 245, 0.7);
4295}
4296
4297.cosmic-dock #dock {
4298 border-radius: 16px !important;
4299 border: none !important;
4300 margin: 6px !important;
4301 background-color: rgba(49, 50, 68, 0.65) !important;
4302 box-shadow: inset 0 1px rgba(255, 255, 255, 0.08) !important;
4303}
4304
4305.cosmic-dock #dock .dash-background {
4306 background-color: transparent !important;
4307 margin-bottom: 0 !important;
4308 padding: 0;
4309 box-shadow: none !important;
4310}
4311
4312.cosmic-application-dialog {
4313 border-radius: 18px;
4314 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
4315 background-color: #292c3c;
4316 color: #eff1f5;
4317}
4318
4319.cosmic-application-dialog .overview-icon {
4320 color: #eff1f5;
4321}
4322
4323.cosmic-applications-separator {
4324 background: rgba(239, 241, 245, 0.12);
4325}
4326
4327.cosmic-folder-edit-button {
4328 box-shadow: none;
4329 border-radius: 12px;
4330 border-width: 0;
4331 color: #eff1f5;
4332 background: rgba(239, 241, 245, 0.04);
4333}
4334
4335.cosmic-folder-edit-button .cosmic-folder-edit-button:hover {
4336 background: rgba(239, 241, 245, 0.12);
4337}
4338
4339.cosmic-applications-icon {
4340 color: rgba(239, 241, 245, 0.7);
4341}
4342
4343.cosmic-applications-folder-title {
4344 color: rgba(239, 241, 245, 0.7);
4345}
4346
4347.cosmic-applications-available {
4348 color: #eff1f5;
4349}
4350
4351.pop-shell-active-hint {
4352 border-style: solid;
4353 border-color: #df8e1d;
4354 border-radius: 12px;
4355 box-shadow: none;
4356}
4357
4358.pop-shell-overlay {
4359 background-color: rgba(203, 166, 247, 0.3);
4360}
4361
4362.pop-shell-search-element:select {
4363 background: rgba(239, 241, 245, 0.12);
4364 border-radius: 12px;
4365 color: #eff1f5;
4366}
4367
4368.pop-shell-tab {
4369 border: 1px solid rgba(239, 241, 245, 0.12);
4370 color: #eff1f5;
4371}
4372
4373.pop-shell-tab-active {
4374 background: #df8e1d;
4375}
4376
4377.pop-shell-tab-inactive {
4378 background: rgba(223, 142, 29, 0.35);
4379}
4380
4381.pop-shell-tab-urgent {
4382 background: #d20f39;
4383}
4384
4385#panel.light-panel .panel-button,
4386#panel.dark-panel .panel-button,
4387#panel.transparent-panel .panel-button {
4388 color: rgba(239, 241, 245, 0.7) !important;
4389}
4390
4391#panel.light-panel .panel-button.clock-display .clock,
4392#panel.dark-panel .panel-button.clock-display .clock,
4393#panel.transparent-panel .panel-button.clock-display .clock {
4394 color: rgba(239, 241, 245, 0.7) !important;
4395}
4396
4397#panel.light-panel .panel-button:hover,
4398#panel.dark-panel .panel-button:hover,
4399#panel.transparent-panel .panel-button:hover {
4400 color: rgba(239, 241, 245, 0.7) !important;
4401 background-color: rgba(239, 241, 245, 0.12) !important;
4402}
4403
4404#panel.light-panel .panel-button:hover.clock-display .clock,
4405#panel.dark-panel .panel-button:hover.clock-display .clock,
4406#panel.transparent-panel .panel-button:hover.clock-display .clock {
4407 background-color: rgba(239, 241, 245, 0.12) !important;
4408}
4409
4410#panel.light-panel .panel-button:active, #panel.light-panel .panel-button:checked, #panel.light-panel .panel-button:focus,
4411#panel.dark-panel .panel-button:active,
4412#panel.dark-panel .panel-button:checked,
4413#panel.dark-panel .panel-button:focus,
4414#panel.transparent-panel .panel-button:active,
4415#panel.transparent-panel .panel-button:checked,
4416#panel.transparent-panel .panel-button:focus {
4417 color: #eff1f5 !important;
4418 background-color: rgba(239, 241, 245, 0.3) !important;
4419}
4420
4421#panel.light-panel .panel-button:active.clock-display .clock, #panel.light-panel .panel-button:checked.clock-display .clock, #panel.light-panel .panel-button:focus.clock-display .clock,
4422#panel.dark-panel .panel-button:active.clock-display .clock,
4423#panel.dark-panel .panel-button:checked.clock-display .clock,
4424#panel.dark-panel .panel-button:focus.clock-display .clock,
4425#panel.transparent-panel .panel-button:active.clock-display .clock,
4426#panel.transparent-panel .panel-button:checked.clock-display .clock,
4427#panel.transparent-panel .panel-button:focus.clock-display .clock {
4428 background-color: rgba(239, 241, 245, 0.3) !important;
4429}
4430
4431#panel.light-panel .panel-button:hover.clock-display, #panel.light-panel .panel-button:active.clock-display, #panel.light-panel .panel-button:overview.clock-display, #panel.light-panel .panel-button:focus.clock-display, #panel.light-panel .panel-button:checked.clock-display,
4432#panel.dark-panel .panel-button:hover.clock-display,
4433#panel.dark-panel .panel-button:active.clock-display,
4434#panel.dark-panel .panel-button:overview.clock-display,
4435#panel.dark-panel .panel-button:focus.clock-display,
4436#panel.dark-panel .panel-button:checked.clock-display,
4437#panel.transparent-panel .panel-button:hover.clock-display,
4438#panel.transparent-panel .panel-button:active.clock-display,
4439#panel.transparent-panel .panel-button:overview.clock-display,
4440#panel.transparent-panel .panel-button:focus.clock-display,
4441#panel.transparent-panel .panel-button:checked.clock-display {
4442 background-color: transparent !important;
4443}
4444
4445#panel.light-panel .panel-button:hover.clock-display .clock, #panel.light-panel .panel-button:active.clock-display .clock, #panel.light-panel .panel-button:overview.clock-display .clock, #panel.light-panel .panel-button:focus.clock-display .clock, #panel.light-panel .panel-button:checked.clock-display .clock,
4446#panel.dark-panel .panel-button:hover.clock-display .clock,
4447#panel.dark-panel .panel-button:active.clock-display .clock,
4448#panel.dark-panel .panel-button:overview.clock-display .clock,
4449#panel.dark-panel .panel-button:focus.clock-display .clock,
4450#panel.dark-panel .panel-button:checked.clock-display .clock,
4451#panel.transparent-panel .panel-button:hover.clock-display .clock,
4452#panel.transparent-panel .panel-button:active.clock-display .clock,
4453#panel.transparent-panel .panel-button:overview.clock-display .clock,
4454#panel.transparent-panel .panel-button:focus.clock-display .clock,
4455#panel.transparent-panel .panel-button:checked.clock-display .clock {
4456 color: #eff1f5 !important;
4457}
4458
4459.overview-components-transparent .search-entry,
4460.overview-components-light .search-entry,
4461.overview-components-dark .search-entry {
4462 caret-color: #eff1f5 !important;
4463}
4464
4465.overview-components-transparent .search-entry .search-entry-icon,
4466.overview-components-light .search-entry .search-entry-icon,
4467.overview-components-dark .search-entry .search-entry-icon {
4468 color: rgba(239, 241, 245, 0.7) !important;
4469}
4470
4471.overview-components-transparent .search-entry StLabel.hint-text,
4472.overview-components-light .search-entry StLabel.hint-text,
4473.overview-components-dark .search-entry StLabel.hint-text {
4474 color: rgba(239, 241, 245, 0.3) !important;
4475}
4476
4477.overview-components-transparent .search-section-content,
4478.overview-components-light .search-section-content,
4479.overview-components-dark .search-section-content {
4480 border-radius: 16px;
4481}
4482
4483.overview-components-transparent .search-section-separator,
4484.overview-components-light .search-section-separator,
4485.overview-components-dark .search-section-separator {
4486 height: 0 !important;
4487 background-color: transparent !important;
4488}
4489