1.ripple-pointer-location {
2  width: 48px;
3  height: 48px;
4  border-radius: 24px;
5  background-color: rgba(250, 226, 237, 0.3);
6  box-shadow: 0 0 2px 2px #f3b6d2;
7}
8
9.pie-timer {
10  width: 60px;
11  height: 60px;
12  -pie-border-width: 3px;
13  -pie-border-color: #E55E9C;
14  -pie-background-color: rgba(255, 255, 255, 0.3);
15}
16
17.magnifier-zoom-region {
18  border: 2px solid #E55E9C;
19}
20
21.magnifier-zoom-region.full-screen {
22  border-width: 0;
23}
24
25/* App Icons */
26.show-apps,
27.app-well-app,
28.grid-search-result {
29  font-size: 9.75pt;
30  font-weight: 400;
31}
32
33.show-apps .overview-icon,
34.app-well-app .overview-icon,
35.grid-search-result .overview-icon {
36  color: rgba(255, 255, 255, 0.85);
37  border-radius: 12px;
38  padding: 8px;
39  border: none;
40  transition-duration: 100ms;
41  text-align: center;
42}
43
44.show-apps:hover .overview-icon, .show-apps:focus .overview-icon, .show-apps:selected .overview-icon,
45.app-well-app:hover .overview-icon,
46.app-well-app:focus .overview-icon,
47.app-well-app:selected .overview-icon,
48.grid-search-result:hover .overview-icon,
49.grid-search-result:focus .overview-icon,
50.grid-search-result:selected .overview-icon {
51  background-color: rgba(255, 255, 255, 0.15);
52  border-image: none;
53  background-image: none;
54}
55
56.show-apps:active .overview-icon, .show-apps:checked .overview-icon,
57.app-well-app:active .overview-icon,
58.app-well-app:checked .overview-icon,
59.grid-search-result:active .overview-icon,
60.grid-search-result:checked .overview-icon {
61  background-color: rgba(255, 255, 255, 0.3);
62  box-shadow: none;
63}
64
65.app-folder {
66  background: none;
67}
68
69.app-folder .overview-icon {
70  background-color: rgba(255, 255, 255, 0.15);
71  border-radius: 10px;
72}
73
74.app-folder:hover .overview-icon {
75  background-color: rgba(255, 255, 255, 0.2);
76}
77
78.app-folder-dialog {
79  border-radius: 32px;
80  border: 0 solid rgba(255, 255, 255, 0.15);
81  padding: 12px;
82  background-color: rgba(51, 51, 51, 0.9);
83}
84
85.app-folder-dialog .folder-name-container {
86  padding: 24px 36px 0;
87  spacing: 12px;
88  /* FIXME: this is to keep the label in sync with the entry */
89}
90
91.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry {
92  font-size: 18pt;
93  font-weight: bold;
94}
95
96.app-folder-dialog .folder-name-container .folder-name-entry {
97  width: 300px;
98}
99
100.app-folder-dialog .folder-name-container .folder-name-label {
101  padding: 5px 7px;
102  color: rgba(255, 255, 255, 0.85);
103}
104
105.app-folder-dialog .folder-name-container .edit-folder-button {
106  background-color: rgba(255, 255, 255, 0.15);
107  color: rgba(255, 255, 255, 0.85);
108  border: none;
109  padding: 0;
110  width: 36px;
111  height: 36px;
112  border-radius: 18px;
113}
114
115.app-folder-dialog .folder-name-container .edit-folder-button > StIcon {
116  icon-size: 16px;
117}
118
119.app-folder-dialog .folder-name-container .edit-folder-button:hover {
120  background-color: rgba(255, 255, 255, 0.15);
121}
122
123.app-folder-dialog .folder-name-container .edit-folder-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:active {
124  background-color: rgba(255, 255, 255, 0.3);
125}
126
127.app-folder-dialog .icon-grid {
128  row-spacing: 12px;
129  column-spacing: 30px;
130  page-padding-top: 0;
131  page-padding-bottom: 0;
132  page-padding-left: 0;
133  page-padding-right: 0;
134}
135
136.app-folder-dialog .page-indicators {
137  margin-bottom: 18px;
138}
139
140.app-folder-dialog-container {
141  padding: 6px;
142  width: 620px;
143  height: 620px;
144}
145
146.app-well-app-running-dot {
147  width: 5px;
148  height: 5px;
149  border-radius: 3px;
150  background-color: rgba(255, 255, 255, 0.85);
151  margin-bottom: 0;
152}
153
154StWidget.focused .app-well-app-running-dot {
155  background-color: #E55E9C;
156}
157
158.page-indicator {
159  padding: 16px 20px;
160}
161
162.page-indicator .page-indicator-icon {
163  width: 12px;
164  height: 12px;
165  border-radius: 9999px;
166  background-image: none;
167  color: transparent;
168  border: none;
169  box-shadow: none;
170  background-color: rgba(255, 255, 255, 0.35);
171}
172
173.page-indicator:hover .page-indicator-icon {
174  background-image: none;
175  background-color: rgba(255, 255, 255, 0.45);
176}
177
178.page-indicator:active .page-indicator-icon {
179  background-image: none;
180  color: transparent;
181  border: none;
182  box-shadow: none;
183  background-color: rgba(255, 255, 255, 0.85);
184}
185
186.page-indicator:checked .page-indicator-icon {
187  background-image: none;
188  background-color: rgba(255, 255, 255, 0.85);
189}
190
191.page-indicator:checked:active {
192  background-image: none;
193}
194
195.app-menu,
196.app-well-menu {
197  max-width: 27.25em;
198}
199
200.rename-folder-popup .rename-folder-popup-item {
201  spacing: 6px;
202}
203
204.rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl {
205  padding: 0 12px;
206}
207
208.system-action-icon {
209  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
210  background-color: rgba(0, 0, 0, 0.6);
211  color: white;
212  border-radius: 100px;
213  icon-size: 48px;
214}
215
216.shell-link {
217  border-radius: 5px;
218  color: #3484e2;
219}
220
221.shell-link:hover {
222  color: #3484e2;
223  background-color: rgba(52, 132, 226, 0.15);
224}
225
226.shell-link:active {
227  color: #3484e2;
228  background-color: rgba(52, 132, 226, 0.3);
229}
230
231.lowres-icon {
232  icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
233}
234
235.icon-dropshadow {
236  icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
237}
238
239/* Buttons */
240.button {
241  min-height: 32px;
242  padding: 0 16px;
243  border-radius: 5px;
244}
245
246.button, .popup-menu .button {
247  color: #afafaf;
248  background-color: transparent;
249  border-color: transparent;
250  box-shadow: none;
251  text-shadow: none;
252  icon-shadow: none;
253  border: none;
254}
255
256.button:hover, .popup-menu .button:hover {
257  color: #dedede;
258  background-color: rgba(255, 255, 255, 0.06);
259  border-color: transparent;
260  box-shadow: none;
261  text-shadow: none;
262  icon-shadow: none;
263}
264
265.button:active, .popup-menu .button:active {
266  color: #dedede;
267  background-color: rgba(255, 255, 255, 0.1);
268  border-color: transparent;
269  box-shadow: none;
270  text-shadow: none;
271  icon-shadow: none;
272}
273
274.button:insensitive, .popup-menu .button:insensitive {
275  color: rgba(222, 222, 222, 0.35);
276  background-color: transparent;
277  border-color: transparent;
278  box-shadow: none;
279  text-shadow: none;
280  icon-shadow: none;
281}
282
283.button:focus, .popup-menu .button:focus {
284  color: #dedede;
285  text-shadow: none;
286  icon-shadow: none;
287  box-shadow: none;
288}
289
290/* Date/Time Menu */
291.popup-menu .message, .world-clocks-button,
292.weather-button,
293.events-button {
294  border-radius: 8px;
295  border: 1px solid rgba(0, 0, 0, 0.5);
296  color: #afafaf;
297  background-color: #383838;
298  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
299  text-shadow: none;
300}
301
302.popup-menu .message:hover, .world-clocks-button:hover,
303.weather-button:hover,
304.events-button:hover, .popup-menu .message:focus, .world-clocks-button:focus,
305.weather-button:focus,
306.events-button:focus {
307  color: #dedede;
308  background-color: rgba(74, 74, 74, 0.75);
309  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
310}
311
312.popup-menu .message:active, .world-clocks-button:active,
313.weather-button:active,
314.events-button:active {
315  color: #dedede;
316  background-color: rgba(62, 62, 62, 0.75);
317  box-shadow: none;
318}
319
320.clock-display-box {
321  spacing: 2px;
322}
323
324.clock-display-box .clock {
325  padding-left: 12px;
326  padding-right: 12px;
327}
328
329#calendarArea {
330  padding: 6px 0 0 0;
331}
332
333.datemenu-calendar-column {
334  spacing: 6px;
335  border: 0 solid rgba(255, 255, 255, 0.12);
336  padding: 0 12px;
337}
338
339.datemenu-calendar-column:ltr {
340  margin-right: 8px;
341  border-left-width: 0;
342}
343
344.datemenu-calendar-column:rtl {
345  margin-left: 8px;
346  border-right-width: 0;
347}
348
349.datemenu-calendar-column .datemenu-displays-section {
350  padding-bottom: 0;
351}
352
353.datemenu-calendar-column .datemenu-displays-box {
354  spacing: 6px;
355}
356
357.world-clocks-header,
358.weather-header,
359.events-section-title {
360  color: #afafaf;
361  font-weight: bold;
362}
363
364.datemenu-today-button,
365.datemenu-displays-box,
366.message-list-sections {
367  margin: 4px 8px;
368}
369
370/* today button (the date) */
371.datemenu-today-button {
372  border: none;
373  box-shadow: none;
374  background: none;
375  padding: 6px;
376  margin: 0 12px;
377  text-shadow: none;
378  color: #afafaf;
379  border-radius: 6px;
380}
381
382.datemenu-today-button:hover, .datemenu-today-button:focus {
383  color: #dedede;
384  background-color: #454545;
385}
386
387.datemenu-today-button:active {
388  color: #dedede;
389  background-color: #404040;
390}
391
392.datemenu-today-button .day-label {
393  font-size: 15pt;
394  font-weight: 500;
395  font-weight: bold;
396}
397
398.datemenu-today-button .date-label {
399  font-size: 18pt;
400  font-weight: 400;
401}
402
403/* Calendar */
404.calendar {
405  padding: 6px !important;
406  margin: 0 12px !important;
407  border-radius: 8px;
408  border: 1px solid rgba(0, 0, 0, 0.5);
409  color: #afafaf;
410  background-color: #383838;
411  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
412  text-shadow: none;
413}
414
415.calendar .calendar-month-label {
416  margin: 0;
417  padding: 6px 0;
418  color: #dedede;
419  font-weight: bold;
420  font-size: 1em !important;
421  text-align: center;
422  text-shadow: none;
423}
424
425.calendar .calendar-month-label:focus {
426  background-color: rgba(255, 255, 255, 0.06);
427}
428
429.calendar .calendar-change-month-back,
430.calendar .calendar-change-month-forward {
431  padding: 2px !important;
432  margin: 0 !important;
433}
434
435.calendar .calendar-change-month-back StIcon,
436.calendar .calendar-change-month-forward StIcon {
437  icon-size: 16px !important;
438}
439
440.calendar .pager-button {
441  width: 28px;
442  height: 28px;
443  margin: 2px;
444  border-radius: 9999px;
445  background-color: transparent;
446  color: #dedede;
447}
448
449.calendar .pager-button:hover, .calendar .pager-button:focus {
450  background-color: rgba(255, 255, 255, 0.06);
451}
452
453.calendar .pager-button:active {
454  background-color: rgba(255, 255, 255, 0.1);
455}
456
457.calendar .calendar-day-base {
458  font-size: 9pt;
459  font-weight: 400;
460  text-align: center;
461  width: 28px;
462  height: 28px;
463  padding: 2px;
464  margin: 2px;
465  border-radius: 9999px;
466  color: #afafaf;
467  font-feature-settings: "tnum";
468}
469
470.calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus {
471  background-color: rgba(255, 255, 255, 0.06);
472}
473
474.calendar .calendar-day-base:active {
475  color: #afafaf;
476  background-color: rgba(255, 255, 255, 0.1);
477  border-color: transparent;
478}
479
480.calendar .calendar-day-base:selected {
481  color: #dedede;
482  background-color: rgba(255, 255, 255, 0.1);
483  border-color: transparent;
484}
485
486.calendar .calendar-day-base.calendar-day-heading {
487  width: 28px;
488  height: 21px;
489  margin-top: 2px;
490  padding: 7px 0 0;
491  border-radius: 9999px;
492  background-color: transparent;
493  color: #999999;
494  font-size: 9pt;
495  font-weight: 400;
496  font-weight: bold;
497  text-align: center;
498}
499
500.calendar .calendar-day {
501  border-width: 0;
502}
503
504.calendar .calendar-day-top {
505  border-top-width: 0;
506}
507
508.calendar .calendar-day-left {
509  border-left-width: 0;
510}
511
512.calendar .calendar-nonwork-day {
513  color: rgba(222, 222, 222, 0.35);
514}
515
516.calendar .calendar-today {
517  font-weight: bold;
518  color: #afafaf !important;
519  background-color: rgba(222, 222, 222, 0.1);
520  border: none;
521}
522
523.calendar .calendar-today:hover, .calendar .calendar-today:focus {
524  background-color: rgba(222, 222, 222, 0.15);
525  color: #dedede !important;
526}
527
528.calendar .calendar-today:active {
529  background-color: #e1488f;
530  color: white !important;
531}
532
533.calendar .calendar-today:selected {
534  background-color: #E55E9C;
535  color: white !important;
536}
537
538.calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus {
539  background-color: #eb81b2;
540  color: white !important;
541}
542
543.calendar .calendar-day-with-events {
544  color: #999999;
545  background-image: url("assets/calendar-today.svg");
546}
547
548.calendar .calendar-day-with-events.calendar-work-day {
549  color: #999999;
550  font-weight: bold;
551}
552
553.calendar .calendar-other-month-day {
554  color: rgba(222, 222, 222, 0.35);
555  opacity: 0.5;
556}
557
558.calendar .calendar-week-number {
559  width: 22px;
560  height: 16px;
561  margin: 6px 6px 6px 4px;
562  padding: 0 0;
563  border-radius: 5px;
564  background-color: rgba(255, 255, 255, 0.05);
565  color: #999999;
566  font-size: inherit;
567  font-weight: bold;
568  text-align: center;
569}
570
571.world-clocks-button,
572.weather-button,
573.events-button {
574  padding: 12px !important;
575  margin: 2px 4px !important;
576}
577
578.events-button .events-box {
579  spacing: 6px;
580}
581
582.events-button .events-list {
583  spacing: 12px;
584  text-shadow: none;
585}
586
587.events-button .events-title {
588  color: #999999;
589  font-weight: bold;
590  text-shadow: none;
591}
592
593.events-button .event-time {
594  color: #999999;
595  font-feature-settings: "tnum";
596  font-size: 9pt;
597}
598
599.world-clocks-button .world-clocks-city {
600  color: #999999;
601  font-weight: bold;
602  font-size: 10pt;
603}
604
605.world-clocks-button .world-clocks-time {
606  color: #999999;
607  font-feature-settings: "tnum";
608  font-size: 10pt;
609}
610
611.world-clocks-button .world-clocks-time:ltr {
612  text-align: right;
613}
614
615.world-clocks-button .world-clocks-time:rtl {
616  text-align: left;
617}
618
619.world-clocks-button .world-clocks-timezone {
620  color: #999999;
621  font-feature-settings: "tnum";
622  font-size: 9pt;
623}
624
625.world-clocks-grid,
626.weather-grid {
627  spacing-rows: 0.4em;
628  spacing-columns: 0.8em;
629}
630
631.weather-button {
632  margin-bottom: 6px !important;
633}
634
635.weather-button .weather-box {
636  spacing: 10px;
637}
638
639.weather-button .weather-header-box {
640  spacing: 6px;
641}
642
643.weather-button .weather-header {
644  color: #afafaf;
645  font-weight: bold;
646}
647
648.weather-button .weather-header.location {
649  font-weight: normal;
650  color: #999999;
651  font-size: 9pt;
652}
653
654.weather-button .weather-grid {
655  spacing-rows: 6px;
656  spacing-columns: 12px;
657}
658
659.weather-button .weather-forecast-time {
660  color: #afafaf;
661  font-feature-settings: "tnum";
662  font-size: 8pt;
663  font-weight: normal;
664  padding-top: 0.2em;
665  padding-bottom: 0.4em;
666}
667
668.weather-button .weather-forecast-icon {
669  icon-size: 32px;
670}
671
672.weather-button .weather-forecast-temp {
673  font-weight: bold;
674}
675
676/* Check Boxes */
677.check-box StBoxLayout {
678  spacing: .8em;
679}
680
681.check-box StBin {
682  width: 24px;
683  height: 24px;
684  padding: 4px;
685  border-radius: 100px;
686  background-image: url("assets/checkbox-off.svg");
687}
688
689.check-box:focus StBin {
690  background-image: url("assets/checkbox-off.svg");
691}
692
693.check-box:hover StBin {
694  background-color: rgba(255, 255, 255, 0.06);
695}
696
697.check-box:active StBin {
698  background-color: rgba(255, 255, 255, 0.1);
699}
700
701.check-box:checked StBin {
702  background-image: url("assets/checkbox.svg");
703}
704
705.check-box:focus:checked StBin {
706  background-image: url("assets/checkbox.svg");
707}
708
709.check-box:hover:checked StBin {
710  background-color: rgba(229, 94, 156, 0.15);
711}
712
713.check-box:active:checked StBin {
714  background-color: rgba(229, 94, 156, 0.3);
715}
716
717/* Activities Ripple */
718.ripple-box {
719  background-color: rgba(229, 94, 156, 0.35);
720  box-shadow: 0 0 2px 2px #f3b6d2;
721  width: 52px;
722  height: 52px;
723  border-radius: 0 0 52px 0;
724}
725
726.ripple-box:rtl {
727  border-radius: 0 0 0 52px;
728}
729
730/* Dash */
731#dash {
732  font-size: 9.75pt;
733  font-weight: 400;
734}
735
736#dash .empty-dash-drop-target {
737  width: 32px;
738  height: 32px;
739}
740
741.dash-label {
742  color: rgba(255, 255, 255, 0.9);
743  background-color: rgba(34, 34, 34, 0.95);
744  border-radius: 5px;
745  padding: 6px 12px;
746  box-shadow: none;
747  border: none;
748  text-align: center;
749  -y-offset: 12px;
750  -x-offset: 8px;
751  font-size: 9.75pt;
752  font-weight: 400;
753}
754
755/* Modal Dialogs */
756.candidate-popup-content, .modal-dialog {
757  background-color: rgba(36, 36, 36, 0.95);
758  border-radius: 6px;
759  border: solid rgba(0, 0, 0, 0.75);
760  border-width: 1px;
761  box-shadow: 3px 3px 8px -3px rgba(0, 0, 0, 0.65);
762}
763
764.modal-dialog-linked-button:last-child {
765  color: white;
766  background-color: #E55E9C;
767  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
768}
769
770.modal-dialog-linked-button:hover:last-child {
771  color: white;
772  background-color: #eb86b4;
773}
774
775.modal-dialog-linked-button:active:last-child {
776  color: white;
777  background-color: #e1488f;
778}
779
780.modal-dialog-linked-button:insensitive:last-child {
781  background-color: rgba(229, 94, 156, 0.05);
782  color: rgba(229, 94, 156, 0.35);
783}
784
785.headline {
786  font-size: 15pt;
787  font-weight: 500;
788}
789
790.modal-dialog {
791  color: #dedede;
792  padding: 0 5px 6px 5px;
793}
794
795.modal-dialog-linked-button {
796  min-height: 40px;
797  padding: 0 16px;
798  margin: 3px 3px;
799  border: none !important;
800  border-radius: 5px;
801  font-size: 9.75pt;
802  font-weight: 500;
803  color: #afafaf;
804  background-color: transparent;
805  border-color: transparent;
806  box-shadow: none;
807  text-shadow: none;
808  icon-shadow: none;
809}
810
811.modal-dialog-linked-button:hover {
812  color: #dedede;
813  background-color: rgba(255, 255, 255, 0.06);
814  border-color: transparent;
815  box-shadow: none;
816  text-shadow: none;
817  icon-shadow: none;
818}
819
820.modal-dialog-linked-button:active {
821  color: #dedede;
822  background-color: rgba(255, 255, 255, 0.1);
823  border-color: transparent;
824  box-shadow: none;
825  text-shadow: none;
826  icon-shadow: none;
827}
828
829.modal-dialog-linked-button:insensitive {
830  color: rgba(222, 222, 222, 0.35);
831  background-color: transparent;
832  border-color: transparent;
833  box-shadow: none;
834  text-shadow: none;
835  icon-shadow: none;
836}
837
838.modal-dialog-linked-button:focus {
839  color: #dedede;
840  text-shadow: none;
841  icon-shadow: none;
842  box-shadow: none;
843}
844
845.modal-dialog-linked-button:first-child {
846  background: #242424;
847}
848
849.modal-dialog-linked-button:first-child:hover {
850  color: #dedede;
851  background-color: rgba(255, 255, 255, 0.06);
852  border-color: transparent;
853  box-shadow: none;
854  text-shadow: none;
855  icon-shadow: none;
856}
857
858.modal-dialog-linked-button:first-child:active {
859  color: #dedede;
860  background-color: rgba(255, 255, 255, 0.1);
861  border-color: transparent;
862  box-shadow: none;
863  text-shadow: none;
864  icon-shadow: none;
865}
866
867.modal-dialog .modal-dialog-content-box {
868  margin: 32px 40px;
869  spacing: 32px;
870  max-width: 28em;
871}
872
873.end-session-dialog {
874  width: 30em;
875}
876
877.end-session-dialog .end-session-dialog-battery-warning,
878.end-session-dialog .dialog-list-title {
879  color: #F27835;
880}
881
882.message-dialog-content {
883  spacing: 18px;
884}
885
886.message-dialog-content .message-dialog-title {
887  text-align: center;
888  font-size: 18pt;
889  font-weight: 800;
890}
891
892.message-dialog-content .message-dialog-title.lightweight {
893  font-size: 13pt;
894  font-weight: 800;
895}
896
897.message-dialog-content .message-dialog-description {
898  text-align: center;
899}
900
901.dialog-list {
902  spacing: 18px;
903}
904
905.dialog-list .dialog-list-title {
906  text-align: center;
907  font-weight: bold;
908}
909
910.dialog-list .dialog-list-scrollview {
911  max-height: 200px;
912}
913
914.dialog-list .dialog-list-box {
915  spacing: 1em;
916}
917
918.dialog-list .dialog-list-box .dialog-list-item {
919  spacing: 1em;
920}
921
922.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title {
923  font-weight: bold;
924}
925
926.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description {
927  color: #afafaf;
928  font-size: 15pt;
929  font-weight: 500;
930}
931
932.run-dialog .modal-dialog-content-box {
933  margin-top: 24px;
934  margin-bottom: 14px;
935}
936
937.run-dialog .run-dialog-entry {
938  width: 20em;
939}
940
941.run-dialog .run-dialog-description {
942  text-align: center;
943  color: #afafaf;
944  font-size: 15pt;
945  font-weight: 500;
946}
947
948.prompt-dialog {
949  width: 28em;
950}
951
952.prompt-dialog .modal-dialog-content-box {
953  margin-bottom: 24px;
954}
955
956.prompt-dialog-password-grid {
957  spacing-rows: 8px;
958  spacing-columns: 4px;
959}
960
961.prompt-dialog-password-grid .prompt-dialog-password-entry {
962  width: auto;
963}
964
965.prompt-dialog-password-grid .prompt-dialog-password-entry:ltr {
966  margin-left: 20px;
967}
968
969.prompt-dialog-password-grid .prompt-dialog-password-entry:rtl {
970  margin-right: 20px;
971}
972
973.prompt-dialog-password-grid {
974  spacing-rows: 8px;
975  spacing-columns: 4px;
976}
977
978.prompt-dialog-password-grid .prompt-dialog-password-entry {
979  width: auto;
980}
981
982.prompt-dialog-password-grid .prompt-dialog-password-entry:ltr {
983  margin-left: 20px;
984}
985
986.prompt-dialog-password-grid .prompt-dialog-password-entry:rtl {
987  margin-right: 20px;
988}
989
990.prompt-dialog-password-layout {
991  spacing: 8px;
992}
993
994.prompt-dialog-password-entry {
995  width: 20em;
996}
997
998.prompt-dialog-error-label,
999.prompt-dialog-info-label,
1000.prompt-dialog-null-label {
1001  text-align: center;
1002  font-size: 15pt;
1003  font-weight: 500;
1004  margin: 6px;
1005}
1006
1007.prompt-dialog-error-label {
1008  color: #FC4138;
1009}
1010
1011.prompt-dialog-info-label,
1012.prompt-dialog-null-label {
1013  color: #999999;
1014}
1015
1016.polkit-dialog-user-layout {
1017  text-align: center;
1018  spacing: 8px;
1019  margin-bottom: 6px;
1020}
1021
1022.polkit-dialog-user-layout .polkit-dialog-user-root-label {
1023  color: #F27835;
1024}
1025
1026.audio-device-selection-dialog .modal-dialog-content-box {
1027  margin-bottom: 28px;
1028}
1029
1030.audio-device-selection-dialog .audio-selection-box {
1031  spacing: 20px;
1032}
1033
1034.audio-selection-device {
1035  border: 1px solid rgba(255, 255, 255, 0.12);
1036  border-radius: 5px;
1037}
1038
1039.audio-selection-device:hover, .audio-selection-device:focus {
1040  background-color: rgba(255, 255, 255, 0.08);
1041}
1042
1043.audio-selection-device:active {
1044  background-color: #E55E9C;
1045  color: white;
1046}
1047
1048.audio-selection-device-box {
1049  padding: 20px;
1050  spacing: 20px;
1051}
1052
1053.audio-selection-device-icon {
1054  icon-size: 64px;
1055}
1056
1057.welcome-dialog-image {
1058  background-image: url("resource:///org/gnome/shell/theme/gnome-shell-start.svg");
1059  background-size: contain;
1060  height: 300px;
1061  width: 300px;
1062}
1063
1064/* Entries */
1065StEntry, .popup-menu .search-entry {
1066  min-height: 28px;
1067  padding: 2px 10px;
1068  margin: 2px;
1069  border-radius: 5px;
1070  color: #dedede;
1071  caret-color: #dedede;
1072  selection-background-color: #E55E9C;
1073  selected-color: rgba(255, 255, 255, 0.85);
1074  font-size: 11.25pt;
1075  font-weight: 400;
1076  color: #dedede;
1077  background-color: #212121;
1078  border-radius: 8px;
1079  border: 2px solid transparent;
1080  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
1081}
1082
1083StEntry:focus, .popup-menu .search-entry:focus {
1084  color: #dedede;
1085  border: 2px solid #f0a0c5;
1086  box-shadow: none;
1087}
1088
1089StEntry:insensitive, .popup-menu .search-entry:insensitive {
1090  color: rgba(222, 222, 222, 0.35);
1091  box-shadow: none;
1092}
1093
1094StEntry StIcon.capslock-warning, .popup-menu .search-entry StIcon.capslock-warning {
1095  icon-size: 16px;
1096  warning-color: #F27835;
1097  padding: 0 0;
1098}
1099
1100StEntry StIcon.peek-password, .popup-menu .search-entry StIcon.peek-password {
1101  icon-size: 16px;
1102  padding: 0 4px;
1103}
1104
1105StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
1106  margin-left: 2px;
1107  color: rgba(222, 222, 222, 0.7);
1108}
1109
1110.hotplug-notification-item {
1111  color: #dedede;
1112  background-color: #242424;
1113  border: 1px solid rgba(0, 0, 0, 0.15);
1114  text-shadow: none;
1115  icon-shadow: none;
1116  padding: 12px;
1117  border-style: solid;
1118  border-width: 0;
1119  border-left-width: 0;
1120  border-bottom-width: 0;
1121}
1122
1123.hotplug-notification-item:insensitive {
1124  color: rgba(222, 222, 222, 0.35);
1125  background-color: rgba(255, 255, 255, 0.06);
1126  border-color: rgba(0, 0, 0, 0.15);
1127  text-shadow: none;
1128  icon-shadow: none;
1129}
1130
1131.hotplug-notification-item:hover {
1132  color: #dedede;
1133  border-color: rgba(0, 0, 0, 0.15);
1134  background-color: #2c2c2c;
1135  text-shadow: none;
1136  icon-shadow: none;
1137}
1138
1139.hotplug-notification-item:focus {
1140  color: #dedede;
1141  text-shadow: none;
1142  icon-shadow: none;
1143}
1144
1145.hotplug-notification-item:active {
1146  color: white;
1147  background-color: #E55E9C;
1148  border-color: rgba(0, 0, 0, 0.15);
1149  text-shadow: none;
1150  icon-shadow: none;
1151}
1152
1153.hotplug-notification-item:first-child {
1154  border-radius: 0 0 0 5px;
1155}
1156
1157.hotplug-notification-item:last-child {
1158  border-right-width: 0;
1159  border-radius: 0 0 5px 0;
1160}
1161
1162.hotplug-notification-item:first-child:last-child {
1163  border-radius: 0 0 5px 5px;
1164}
1165
1166.hotplug-notification-item-icon {
1167  icon-size: 24px;
1168  padding: 0 4px;
1169}
1170
1171.candidate-popup-boxpointer {
1172  -arrow-border-radius: 2px;
1173  -arrow-background-color: transparent;
1174  -arrow-border-width: 0;
1175  -arrow-border-color: transparent;
1176  -arrow-base: 64px;
1177  -arrow-rise: 12px;
1178  background-color: transparent;
1179  color: #999999;
1180}
1181
1182.candidate-popup-content {
1183  color: #999999;
1184  box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.25);
1185  border: 1px solid rgba(0, 0, 0, 0.75);
1186  margin: 3px 12px 18px;
1187  padding: 8px;
1188  spacing: 6px;
1189}
1190
1191.candidate-index {
1192  padding: 0 0.5em 0 0;
1193  color: #999999;
1194}
1195
1196.candidate-box:selected .candidate-index {
1197  color: rgba(255, 255, 255, 0.5);
1198}
1199
1200.candidate-box {
1201  padding: 0.3em 0.5em 0.3em 0.5em;
1202  margin-right: 2px;
1203  border-radius: 5px;
1204  color: #999999;
1205}
1206
1207.candidate-box:hover {
1208  background-color: rgba(255, 255, 255, 0.06);
1209  color: #dedede;
1210}
1211
1212.candidate-box:active {
1213  background-color: rgba(255, 255, 255, 0.1);
1214  color: #dedede;
1215}
1216
1217.candidate-box:selected {
1218  background-color: #E55E9C;
1219  color: rgba(255, 255, 255, 0.85);
1220}
1221
1222.candidate-box:last-child {
1223  margin-right: 0;
1224}
1225
1226.candidate-page-button-box {
1227  height: 2em;
1228}
1229
1230.vertical .candidate-page-button-box {
1231  padding-top: 0.5em;
1232}
1233
1234.horizontal .candidate-page-button-box {
1235  padding-left: 0.5em;
1236}
1237
1238.candidate-page-button {
1239  padding: 4px;
1240}
1241
1242.candidate-page-button-previous,
1243.candidate-page-button-next {
1244  border-radius: 5px;
1245  box-shadow: none;
1246}
1247
1248.candidate-page-button-icon {
1249  icon-size: 1em;
1250}
1251
1252/* On-screen Keyboard */
1253#keyboard {
1254  background-color: rgba(0, 0, 0, 0.25);
1255  box-shadow: none;
1256}
1257
1258#keyboard .page-indicator {
1259  padding: 6px;
1260}
1261
1262#keyboard .page-indicator .page-indicator-icon {
1263  width: 8px;
1264  height: 8px;
1265}
1266
1267.key-container,
1268.keyboard-layout {
1269  padding: 4px;
1270  spacing: 4px;
1271}
1272
1273.keyboard-key {
1274  font-size: 16pt;
1275  font-weight: bold;
1276  min-height: 1.2em;
1277  min-width: 1.2em;
1278  border-radius: 6px;
1279  border: none;
1280  color: #afafaf;
1281  background-color: #555555;
1282  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
1283}
1284
1285.keyboard-key:focus, .keyboard-key:hover {
1286  color: #dedede;
1287  background-color: #6f6f6f;
1288}
1289
1290.keyboard-key:checked, .keyboard-key:active {
1291  color: #dedede;
1292  background-color: #3c3c3c;
1293}
1294
1295.keyboard-key:grayed {
1296  background-color: rgba(0, 0, 0, 0.3);
1297  color: rgba(255, 255, 255, 0.85);
1298  border-color: rgba(0, 0, 0, 0.3);
1299}
1300
1301.keyboard-key.default-key {
1302  background-color: #242424;
1303  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
1304}
1305
1306.keyboard-key.default-key:focus, .keyboard-key.default-key:hover {
1307  color: #dedede;
1308  background-color: #3e3e3e;
1309}
1310
1311.keyboard-key.default-key:checked, .keyboard-key.default-key:active {
1312  color: #dedede;
1313  background-color: #0b0b0b;
1314}
1315
1316.keyboard-key.enter-key {
1317  color: white;
1318  background-color: #E55E9C;
1319  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
1320}
1321
1322.keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover {
1323  color: white;
1324  background-color: #e974aa;
1325}
1326
1327.keyboard-key.enter-key:checked, .keyboard-key.enter-key:active {
1328  color: white;
1329  background-color: #de3281;
1330}
1331
1332.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 {
1333  color: #E55E9C;
1334}
1335
1336.keyboard-key StIcon {
1337  icon-size: 1.125em;
1338}
1339
1340.keyboard-subkeys {
1341  color: inherit;
1342  -arrow-border-radius: 5px;
1343  -arrow-background-color: rgba(0, 0, 0, 0.45);
1344  -arrow-border-width: 0;
1345  -arrow-border-color: transparent;
1346  -arrow-base: 20px;
1347  -arrow-rise: 10px;
1348  -boxpointer-gap: 5px;
1349  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
1350}
1351
1352.emoji-page .keyboard-key {
1353  background-color: transparent;
1354  border: none;
1355  color: initial;
1356}
1357
1358.emoji-panel .keyboard-key:latched {
1359  border-color: #e974aa;
1360  background-color: #E55E9C;
1361}
1362
1363.word-suggestions {
1364  font-size: 14pt;
1365  spacing: 12px;
1366  min-height: 20pt;
1367}
1368
1369/* Login Dialog */
1370#lockDialogGroup {
1371  background: url("assets/background.png");
1372  background-size: cover;
1373}
1374
1375.login-dialog-banner-view {
1376  padding-top: 24px;
1377  max-width: 23em;
1378}
1379
1380.login-dialog,
1381.unlock-dialog {
1382  border: none;
1383  background-color: transparent;
1384}
1385
1386.login-dialog StEntry,
1387.unlock-dialog StEntry {
1388  selection-background-color: #E55E9C;
1389  selected-background-color: #E55E9C;
1390  selected-color: white;
1391  padding: 4px 8px;
1392  min-height: 20px;
1393  border-radius: 9999px;
1394  caret-color: #dedede;
1395}
1396
1397.login-dialog StEntry StLabel.hint-text,
1398.unlock-dialog StEntry StLabel.hint-text {
1399  color: rgba(255, 255, 255, 0.45);
1400}
1401
1402.login-dialog .modal-dialog-button-box,
1403.unlock-dialog .modal-dialog-button-box {
1404  spacing: 3px;
1405}
1406
1407.login-dialog .modal-dialog-button,
1408.unlock-dialog .modal-dialog-button {
1409  padding: 0 16px;
1410  border: none;
1411  color: rgba(255, 255, 255, 0.85);
1412  background-color: transparent;
1413  border-color: transparent;
1414  box-shadow: none;
1415  text-shadow: none;
1416  icon-shadow: none;
1417}
1418
1419.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus,
1420.unlock-dialog .modal-dialog-button:hover,
1421.unlock-dialog .modal-dialog-button:focus {
1422  color: white;
1423  background-color: rgba(255, 255, 255, 0.15);
1424  border-color: transparent;
1425  box-shadow: none;
1426  text-shadow: none;
1427  icon-shadow: none;
1428}
1429
1430.login-dialog .modal-dialog-button:active,
1431.unlock-dialog .modal-dialog-button:active {
1432  color: white;
1433  background-color: rgba(255, 255, 255, 0.3);
1434  border-color: transparent;
1435  box-shadow: none;
1436  text-shadow: none;
1437  icon-shadow: none;
1438}
1439
1440.login-dialog .modal-dialog-button:insensitive,
1441.unlock-dialog .modal-dialog-button:insensitive {
1442  color: rgba(222, 222, 222, 0.35);
1443  background-color: transparent;
1444  border-color: transparent;
1445  box-shadow: none;
1446  text-shadow: none;
1447  icon-shadow: none;
1448}
1449
1450.login-dialog .modal-dialog-button:default,
1451.unlock-dialog .modal-dialog-button:default {
1452  color: white;
1453  background-color: #242424;
1454  border: 1px solid rgba(0, 0, 0, 0.15);
1455  text-shadow: none;
1456  icon-shadow: none;
1457}
1458
1459.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus,
1460.unlock-dialog .modal-dialog-button:default:hover,
1461.unlock-dialog .modal-dialog-button:default:focus {
1462  color: white;
1463  border-color: rgba(0, 0, 0, 0.15);
1464  background-color: #2c2c2c;
1465  text-shadow: none;
1466  icon-shadow: none;
1467}
1468
1469.login-dialog .modal-dialog-button:default:active,
1470.unlock-dialog .modal-dialog-button:default:active {
1471  color: white;
1472  background-color: #E55E9C;
1473  border-color: rgba(0, 0, 0, 0.15);
1474  text-shadow: none;
1475  icon-shadow: none;
1476}
1477
1478.login-dialog .modal-dialog-button:default:insensitive,
1479.unlock-dialog .modal-dialog-button:default:insensitive {
1480  color: rgba(255, 255, 255, 0.45);
1481  background-color: rgba(255, 255, 255, 0.06);
1482  border-color: rgba(0, 0, 0, 0.15);
1483  text-shadow: none;
1484  icon-shadow: none;
1485}
1486
1487.login-dialog .cancel-button,
1488.login-dialog .switch-user-button,
1489.login-dialog .login-dialog-session-list-button,
1490.unlock-dialog .cancel-button,
1491.unlock-dialog .switch-user-button,
1492.unlock-dialog .login-dialog-session-list-button {
1493  padding: 0;
1494  border-radius: 100px;
1495  width: 32px;
1496  height: 32px;
1497  border: none;
1498  background-color: rgba(255, 255, 255, 0.1);
1499  color: white;
1500}
1501
1502.login-dialog .cancel-button StIcon,
1503.login-dialog .switch-user-button StIcon,
1504.login-dialog .login-dialog-session-list-button StIcon,
1505.unlock-dialog .cancel-button StIcon,
1506.unlock-dialog .switch-user-button StIcon,
1507.unlock-dialog .login-dialog-session-list-button StIcon {
1508  icon-size: 16px;
1509}
1510
1511.login-dialog .login-dialog-message-warning,
1512.unlock-dialog .login-dialog-message-warning {
1513  color: rgba(255, 255, 255, 0.85);
1514}
1515
1516.login-dialog-logo-bin {
1517  padding: 24px 0px;
1518}
1519
1520.login-dialog-banner {
1521  color: rgba(255, 255, 255, 0.85);
1522}
1523
1524.login-dialog-button-box {
1525  spacing: 5px;
1526}
1527
1528.login-dialog-message {
1529  text-align: center;
1530}
1531
1532.login-dialog-message-warning {
1533  color: #F27835;
1534}
1535
1536.login-dialog-message-hint {
1537  padding-top: 0;
1538  padding-bottom: 20px;
1539}
1540
1541.login-dialog-user-selection-box {
1542  padding: 100px 0px;
1543}
1544
1545.login-dialog-not-listed-label {
1546  padding-left: 2px;
1547}
1548
1549.login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
1550  color: white;
1551}
1552
1553.login-dialog-not-listed-label {
1554  font-size: 1em;
1555  font-weight: bold;
1556  color: rgba(255, 255, 255, 0.85);
1557  padding-top: 1em;
1558}
1559
1560.login-dialog-not-listed-label:hover {
1561  color: rgba(255, 255, 255, 0.85);
1562}
1563
1564.login-dialog-not-listed-label:focus {
1565  background-color: rgba(255, 255, 255, 0.15);
1566}
1567
1568.login-dialog-user-list-view {
1569  -st-vfade-offset: 1em;
1570}
1571
1572.login-dialog-user-list {
1573  spacing: 12px;
1574  padding: .2em;
1575  width: 23em;
1576}
1577
1578.login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
1579  background-color: rgba(255, 255, 255, 0.15);
1580  color: rgba(255, 255, 255, 0.85);
1581}
1582
1583.login-dialog-user-list:expanded .login-dialog-user-list-item:hover {
1584  background-color: rgba(255, 255, 255, 0.15);
1585  color: rgba(255, 255, 255, 0.85);
1586}
1587
1588.login-dialog-user-list:expanded .login-dialog-user-list-item:active {
1589  background-color: rgba(255, 255, 255, 0.3);
1590  color: rgba(255, 255, 255, 0.85);
1591}
1592
1593.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
1594  border-right: 2px solid #E55E9C;
1595}
1596
1597.login-dialog-user-list-item {
1598  border-radius: 6px;
1599  padding: 6px;
1600  color: rgba(255, 255, 255, 0.85);
1601}
1602
1603.login-dialog-user-list-item:ltr .user-widget {
1604  padding-right: 1em;
1605}
1606
1607.login-dialog-user-list-item:rtl .user-widget {
1608  padding-left: 1em;
1609}
1610
1611.login-dialog-user-list-item:focus {
1612  background-color: rgba(255, 255, 255, 0.03) !important;
1613}
1614
1615.login-dialog-user-list-item:hover, .login-dialog-user-list-item:focus:hover {
1616  background-color: rgba(255, 255, 255, 0.06) !important;
1617  color: rgba(255, 255, 255, 0.85);
1618}
1619
1620.login-dialog-user-list-item:active, .login-dialog-user-list-item:focus:active {
1621  background-color: rgba(255, 255, 255, 0.1) !important;
1622  color: rgba(255, 255, 255, 0.85);
1623}
1624
1625.login-dialog-user-list-item .login-dialog-timed-login-indicator {
1626  height: 2px;
1627  margin: 6px 0 0 0;
1628  background-color: rgba(255, 255, 255, 0.08) !important;
1629}
1630
1631.user-widget-label {
1632  color: rgba(255, 255, 255, 0.85);
1633}
1634
1635.user-widget.horizontal .user-widget-label {
1636  font-size: 13pt;
1637  font-weight: bold;
1638  padding-left: 15px;
1639}
1640
1641.user-widget.horizontal .user-widget-label:ltr {
1642  padding-left: 14px;
1643  text-align: left;
1644}
1645
1646.user-widget.horizontal .user-widget-label:rtl {
1647  padding-right: 14px;
1648  text-align: right;
1649}
1650
1651.user-widget.vertical .user-widget-label {
1652  font-size: 16pt;
1653  text-align: center;
1654  font-weight: normal;
1655  padding-top: 16px;
1656}
1657
1658.login-dialog-prompt-layout {
1659  padding-top: 24px;
1660  padding-bottom: 12px;
1661  spacing: 12px;
1662  width: 23em;
1663}
1664
1665.login-dialog-prompt-entry {
1666  height: 1.5em;
1667}
1668
1669.login-dialog-prompt-label {
1670  color: rgba(255, 255, 255, 0.5);
1671  font-size: 12pt;
1672  padding-top: 1em;
1673}
1674
1675/* Looking Glass */
1676#LookingGlassDialog {
1677  background-color: #242424;
1678  spacing: 4px;
1679  padding: 0;
1680  border: none;
1681  border-radius: 5px;
1682  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25);
1683  color: #dedede;
1684}
1685
1686#LookingGlassDialog > #Toolbar {
1687  color: #dedede;
1688  padding: 0 8px;
1689  border: none;
1690  border-radius: 0;
1691  background-color: rgba(36, 36, 36, 0.01);
1692  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
1693}
1694
1695#LookingGlassDialog .labels {
1696  spacing: 0;
1697}
1698
1699#LookingGlassDialog .notebook-tab {
1700  -natural-hpadding: 12px;
1701  -minimum-hpadding: 6px;
1702  font-weight: bold;
1703  color: #afafaf;
1704  padding-left: 16px;
1705  padding-right: 16px;
1706  min-height: 32px;
1707  padding: 0 32px;
1708  transition-duration: 100ms;
1709  border-bottom-width: 0;
1710}
1711
1712#LookingGlassDialog .notebook-tab:hover {
1713  border-bottom-width: 0;
1714  box-shadow: inset 0 -2px 0px #E55E9C;
1715  color: #dedede;
1716  text-shadow: none;
1717}
1718
1719#LookingGlassDialog .notebook-tab:selected {
1720  border-bottom-width: 0;
1721  border-color: transparent;
1722  background-color: rgba(36, 36, 36, 0.01);
1723  box-shadow: inset 0 -2px 0px #E55E9C;
1724  color: #dedede;
1725  text-shadow: none;
1726}
1727
1728#LookingGlassDialog StBoxLayout#EvalBox {
1729  padding: 4px;
1730  spacing: 4px;
1731}
1732
1733#LookingGlassDialog StBoxLayout#ResultsArea {
1734  spacing: 4px;
1735}
1736
1737.lg-dialog StEntry {
1738  min-height: 22px;
1739  selection-background-color: #E55E9C;
1740  selected-color: rgba(255, 255, 255, 0.85);
1741}
1742
1743.lg-dialog .shell-link {
1744  color: #3484e2;
1745}
1746
1747.lg-dialog .shell-link:hover {
1748  color: #619fe8;
1749}
1750
1751.lg-dialog .shell-link:active {
1752  color: #1c6bc7;
1753}
1754
1755.lg-dialog .actor-link {
1756  color: #afafaf;
1757}
1758
1759.lg-dialog .actor-link:hover {
1760  color: #e2e2e2;
1761}
1762
1763.lg-dialog .actor-link:active {
1764  color: #7c7c7c;
1765}
1766
1767.lg-completions-text {
1768  font-size: .9em;
1769  font-style: italic;
1770}
1771
1772.lg-obj-inspector-title {
1773  spacing: 6px;
1774}
1775
1776.lg-obj-inspector-button {
1777  padding: 0 16px;
1778  border: none;
1779  border-radius: 5px;
1780  font-size: 9.75pt;
1781  font-weight: 500;
1782}
1783
1784.lg-obj-inspector-button:hover {
1785  border: none;
1786}
1787
1788#lookingGlassExtensions {
1789  padding: 4px;
1790}
1791
1792.lg-extensions-list {
1793  padding: 4px;
1794  spacing: 6px;
1795}
1796
1797.lg-extension {
1798  border: 1px solid rgba(255, 255, 255, 0.12);
1799  border-radius: 5px;
1800  background-color: #242424;
1801  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.06);
1802  padding: 6px;
1803  text-shadow: none;
1804}
1805
1806.lg-extension-name {
1807  font-weight: bold;
1808}
1809
1810.lg-extension-meta {
1811  spacing: 6px;
1812}
1813
1814#LookingGlassPropertyInspector {
1815  background: #242424;
1816  border: none;
1817  border-radius: 5px;
1818  padding: 6px;
1819  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25);
1820}
1821
1822/* Message List */
1823.message-list {
1824  width: 31.5em;
1825  padding: 0 12px;
1826  text-shadow: none;
1827}
1828
1829.message-list .message-list-placeholder {
1830  spacing: 12px;
1831}
1832
1833.message-list-sections {
1834  margin: 0 16px;
1835}
1836
1837.message-list-section,
1838.message-list-sections,
1839.message-list-section-list {
1840  spacing: 6px;
1841}
1842
1843.message-list-controls {
1844  margin: 8px 16px 0;
1845  padding: 4px;
1846  spacing: 12px;
1847}
1848
1849.message {
1850  margin: 0 4px 6px;
1851}
1852
1853.message .message-icon-bin {
1854  margin: 8px 0;
1855  padding: 8px 0px 8px 8px;
1856}
1857
1858.message .message-icon-bin:rtl {
1859  padding: 8px 8px 8px 0px;
1860}
1861
1862.message .message-icon-bin > StIcon {
1863  icon-size: 32px;
1864  -st-icon-style: symbolic;
1865}
1866
1867.message .message-icon-bin > .fallback-app-icon {
1868  width: 16px;
1869  height: 16px;
1870}
1871
1872.message .message-secondary-bin {
1873  padding: 0 8px;
1874}
1875
1876.message .message-secondary-bin > .event-time {
1877  min-height: 18px;
1878  color: #999999;
1879  font-size: 1em;
1880  text-align: right;
1881  /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
1882  padding-bottom: 0.13em;
1883}
1884
1885.message .message-title {
1886  min-height: 18px;
1887  padding-top: 2px;
1888  color: #dedede;
1889  font-weight: bold;
1890  font-size: 1em;
1891}
1892
1893.message .message-content {
1894  min-height: 40px;
1895  padding: 8px;
1896  color: #999999;
1897  font-size: 1em;
1898}
1899
1900.message .message-close-button {
1901  color: #afafaf;
1902  padding: 0;
1903  height: 24px;
1904  width: 24px;
1905  border-radius: 100px;
1906}
1907
1908.message .message-close-button:hover, .message .message-close-button:active {
1909  color: #dedede;
1910}
1911
1912.message .message-close-button:hover, .message .message-close-button:focus {
1913  background-color: rgba(255, 255, 255, 0.06);
1914}
1915
1916.message .message-close-button:active {
1917  background-color: rgba(255, 255, 255, 0.1);
1918}
1919
1920.message .message-body {
1921  color: #999999;
1922}
1923
1924.url-highlighter {
1925  link-color: #3484e2;
1926}
1927
1928.message-media-control {
1929  margin: 16px 4px;
1930  padding: 8px;
1931  border-radius: 100px;
1932  color: #afafaf;
1933}
1934
1935.message-media-control:hover, .message-media-control:focus {
1936  color: #dedede;
1937  background-color: rgba(255, 255, 255, 0.06);
1938}
1939
1940.message-media-control:active {
1941  color: #dedede;
1942  background-color: rgba(255, 255, 255, 0.1);
1943}
1944
1945.message-media-control:insensitive {
1946  color: rgba(222, 222, 222, 0.35);
1947}
1948
1949.message-media-control:last-child:ltr {
1950  margin-right: 16px;
1951  padding-right: 8px;
1952}
1953
1954.message-media-control:last-child:rtl {
1955  margin-left: 16px;
1956  padding-left: 8px;
1957}
1958
1959.media-message-cover-icon {
1960  icon-size: 32px !important;
1961  margin: 0 0px 0 4px !important;
1962}
1963
1964.media-message-cover-icon:rtl {
1965  margin: 0 4px 0 0px !important;
1966}
1967
1968.media-message-cover-icon.fallback {
1969  icon-size: 16px !important;
1970  padding: 8px;
1971  border: none;
1972  border-radius: 5px;
1973  background-color: rgba(255, 255, 255, 0.06);
1974  color: #999999;
1975}
1976
1977.select-area-rubberband {
1978  background-color: rgba(229, 94, 156, 0.3);
1979  border: 1px solid #E55E9C;
1980  border-radius: 3px;
1981}
1982
1983.user-icon {
1984  background-size: contain;
1985  color: rgba(255, 255, 255, 0.85);
1986  border-radius: 9999px;
1987  border: none;
1988  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
1989  icon-size: 64px;
1990}
1991
1992.user-icon:hover {
1993  color: white;
1994}
1995
1996.user-icon StIcon {
1997  background-color: rgba(255, 255, 255, 0);
1998  border-radius: 9999px;
1999  padding: 12px;
2000  width: 40px;
2001  height: 40px;
2002}
2003
2004.user-icon.user-avatar {
2005  border: 2px #dadada;
2006}
2007
2008.user-widget.vertical .user-icon {
2009  icon-size: 96px;
2010}
2011
2012.user-widget.vertical .user-icon StIcon {
2013  padding: 20px;
2014  padding-top: 18px;
2015  padding-bottom: 22px;
2016  width: 88px;
2017  height: 88px;
2018}
2019
2020.lightbox {
2021  background-color: black;
2022}
2023
2024.flashspot {
2025  background-color: white;
2026}
2027
2028.hidden {
2029  color: rgba(0, 0, 0, 0);
2030}
2031
2032.caps-lock-warning-label {
2033  text-align: center;
2034  padding-bottom: 8px;
2035  font-size: 9.75pt;
2036  font-weight: 400;
2037  color: #F27835;
2038}
2039
2040/* Network Dialogs */
2041.nm-dialog {
2042  max-height: 34em;
2043  min-height: 31em;
2044  min-width: 32em;
2045}
2046
2047.nm-dialog-content {
2048  spacing: 20px;
2049  padding: 24px;
2050}
2051
2052.nm-dialog-header-hbox {
2053  spacing: 10px;
2054}
2055
2056.nm-dialog-airplane-box {
2057  spacing: 12px;
2058}
2059
2060.nm-dialog-airplane-headline {
2061  font-weight: bold;
2062  text-align: center;
2063}
2064
2065.nm-dialog-airplane-text {
2066  color: #dedede;
2067}
2068
2069.nm-dialog-header {
2070  font-weight: bold;
2071}
2072
2073.nm-dialog-header-icon {
2074  icon-size: 32px;
2075}
2076
2077.nm-dialog-header-hbox {
2078  spacing: 10px;
2079}
2080
2081.nm-dialog-scroll-view {
2082  border: 1px solid rgba(255, 255, 255, 0.12);
2083  padding: 0;
2084  background-color: rgba(0, 0, 0, 0.1);
2085  border-radius: 5px;
2086}
2087
2088.nm-dialog-item {
2089  font-size: 11pt;
2090  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
2091  padding: 12px;
2092  spacing: 0px;
2093}
2094
2095.nm-dialog-item:selected {
2096  background-color: #E55E9C;
2097  color: rgba(255, 255, 255, 0.85);
2098}
2099
2100.nm-dialog-item:hover, .nm-dialog-item:focus {
2101  background-color: rgba(255, 255, 255, 0.06);
2102}
2103
2104.nm-dialog-item:active {
2105  background-color: rgba(255, 255, 255, 0.1);
2106}
2107
2108.nm-dialog-icon {
2109  icon-size: 16px;
2110}
2111
2112.nm-dialog-icons {
2113  spacing: 12px;
2114}
2115
2116.no-networks-label {
2117  color: #999999;
2118}
2119
2120.no-networks-box {
2121  spacing: 6px;
2122}
2123
2124/* Notifications & Message Tray */
2125.notification-banner {
2126  font-size: 1em;
2127  width: 34em;
2128  min-height: 56px;
2129  margin: 5px;
2130  border-radius: 5px;
2131  color: #dedede;
2132  background-color: rgba(51, 51, 51, 0.95);
2133  border: none;
2134  text-shadow: none;
2135  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
2136}
2137
2138.notification-banner:hover {
2139  background-color: #333333;
2140  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
2141}
2142
2143.notification-banner:focus {
2144  background-color: rgba(51, 51, 51, 0.95);
2145}
2146
2147.notification-banner .notification-icon {
2148  padding: 5px;
2149}
2150
2151.notification-banner .notification-content {
2152  padding: 5px;
2153  spacing: 5px;
2154}
2155
2156.notification-banner .secondary-icon {
2157  icon-size: 1.2307692308em;
2158}
2159
2160.notification-banner .notification-actions {
2161  background-color: transparent;
2162  padding-top: 0;
2163  border-top: 1px solid rgba(255, 255, 255, 0.12);
2164  spacing: 1px;
2165}
2166
2167.notification-banner .notification-button {
2168  min-height: 40px;
2169  padding: 0 16px;
2170  background-color: transparent;
2171  color: #afafaf;
2172  font-weight: 500;
2173  border-width: 0;
2174}
2175
2176.notification-banner .notification-button:first-child {
2177  border-radius: 0 0 0 5px;
2178}
2179
2180.notification-banner .notification-button:last-child {
2181  border-radius: 0 0 5px 0;
2182}
2183
2184.notification-banner .notification-button:only-child, .notification-banner .notification-button:first-child:last-child {
2185  border-radius: 0 0 5px 5px;
2186}
2187
2188.notification-banner .notification-button:focus {
2189  background-color: transparent;
2190  color: #afafaf;
2191  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06);
2192}
2193
2194.notification-banner .notification-button:hover, .notification-banner .notification-button:focus:hover {
2195  background-color: rgba(255, 255, 255, 0.06);
2196  color: #dedede;
2197  box-shadow: none;
2198}
2199
2200.notification-banner .notification-button:active {
2201  background-color: rgba(255, 255, 255, 0.1);
2202  color: #dedede;
2203}
2204
2205.summary-source-counter {
2206  font-size: 10pt;
2207  font-weight: bold;
2208  height: 1.6em;
2209  width: 1.6em;
2210  -shell-counter-overlap-x: 3px;
2211  -shell-counter-overlap-y: 3px;
2212  background-color: #E55E9C;
2213  color: rgba(255, 255, 255, 0.85);
2214  border: 2px solid #E55E9C;
2215  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
2216  border-radius: 0.9em;
2217}
2218
2219.chat-body {
2220  spacing: 5px;
2221}
2222
2223.chat-response {
2224  margin: 5px;
2225}
2226
2227.chat-log-message {
2228  color: #dedede;
2229}
2230
2231.chat-new-group {
2232  padding-top: 1em;
2233}
2234
2235.chat-received {
2236  padding-left: 4px;
2237}
2238
2239.chat-received:rtl {
2240  padding-left: 0px;
2241  padding-right: 4px;
2242}
2243
2244.chat-sent {
2245  padding-left: 18pt;
2246  color: #afafaf;
2247}
2248
2249.chat-sent:rtl {
2250  padding-left: 0;
2251  padding-right: 18pt;
2252}
2253
2254.chat-meta-message {
2255  padding-left: 4px;
2256  font-size: 9pt;
2257  font-weight: 400;
2258  color: #999999;
2259}
2260
2261.chat-meta-message:rtl {
2262  padding-left: 0;
2263  padding-right: 4px;
2264}
2265
2266/* OSD */
2267.workspace-switcher-container, .switcher-list, .resize-popup, .osd-window {
2268  color: #dedede;
2269  background-color: #242424;
2270  border: 1px solid rgba(0, 0, 0, 0.75);
2271  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25);
2272  border-radius: 5px;
2273  padding: 12px;
2274}
2275
2276.osd-window {
2277  text-align: center;
2278  font-weight: bold;
2279  spacing: 1em;
2280  margin: 32px;
2281  min-width: 64px;
2282  min-height: 64px;
2283}
2284
2285.osd-window StIcon {
2286  icon-size: 96px;
2287}
2288
2289.osd-window .osd-monitor-label {
2290  font-size: 3em;
2291}
2292
2293.osd-window .level {
2294  height: 4px;
2295  border-radius: 3px;
2296  background-color: rgba(0, 0, 0, 0.1);
2297  color: #dedede;
2298  -barlevel-height: 4px;
2299  -barlevel-background-color: rgba(0, 0, 0, 0.1);
2300  -barlevel-active-background-color: #E55E9C;
2301  -barlevel-overdrive-color: #f8464c;
2302  -barlevel-overdrive-separator-width: 2px;
2303  -barlevel-border-width: 0;
2304  -barlevel-border-color: rgba(0, 0, 0, 0.15);
2305}
2306
2307.osd-window .level-bar {
2308  background-color: white;
2309  border-radius: 16px;
2310}
2311
2312.pad-osd-window {
2313  padding: 32px;
2314  background-color: rgba(0, 0, 0, 0.6);
2315}
2316
2317.pad-osd-window .pad-osd-title-box {
2318  spacing: 12px;
2319}
2320
2321.pad-osd-window .pad-osd-title-menu-box {
2322  spacing: 6px;
2323}
2324
2325.combo-box-label {
2326  width: 15em;
2327}
2328
2329.overview-controls {
2330  padding-bottom: 32px;
2331}
2332
2333/* Top Bar */
2334#panel {
2335  background-color: rgba(42, 42, 42, 0.85);
2336  font-weight: normal;
2337  height: 28px;
2338  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
2339  color: #dadada;
2340  transition-duration: 250ms;
2341  text-shadow: none;
2342  font-size: 9.75pt;
2343  font-weight: 400;
2344}
2345
2346#panel:overview, #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
2347  background-color: transparent;
2348  box-shadow: none;
2349}
2350
2351#panel:overview StLabel, #panel:overview StIcon, #panel.unlock-screen StLabel, #panel.unlock-screen StIcon, #panel.login-screen StLabel, #panel.login-screen StIcon, #panel.lock-screen StLabel, #panel.lock-screen StIcon {
2352  color: rgba(255, 255, 255, 0.85);
2353}
2354
2355#panel:overview .panel-button:hover, #panel.unlock-screen .panel-button:hover, #panel.login-screen .panel-button:hover, #panel.lock-screen .panel-button:hover {
2356  color: white;
2357  background-color: rgba(255, 255, 255, 0.15);
2358  text-shadow: none;
2359}
2360
2361#panel:overview .panel-button:active, #panel:overview .panel-button:active:hover, #panel:overview .panel-button:overview, #panel:overview .panel-button:overview:hover, #panel:overview .panel-button:focus, #panel:overview .panel-button:focus:hover, #panel:overview .panel-button:checked, #panel:overview .panel-button:checked:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:active:hover, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:overview:hover, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:focus:hover, #panel.unlock-screen .panel-button:checked, #panel.unlock-screen .panel-button:checked:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:active:hover, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:overview:hover, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:focus:hover, #panel.login-screen .panel-button:checked, #panel.login-screen .panel-button:checked:hover, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:active:hover, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:overview:hover, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:focus:hover, #panel.lock-screen .panel-button:checked, #panel.lock-screen .panel-button:checked:hover {
2362  color: white;
2363  background-color: rgba(255, 255, 255, 0.3);
2364  text-shadow: none;
2365}
2366
2367#panel:overview .panel-corner, #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel.lock-screen .panel-corner {
2368  -panel-corner-radius: 0;
2369  -panel-corner-background-color: transparent;
2370  -panel-corner-border-color: transparent;
2371}
2372
2373#panel .panel-corner {
2374  -panel-corner-radius: 0;
2375  -panel-corner-background-color: rgba(42, 42, 42, 0.85);
2376  -panel-corner-border-width: 2px;
2377  -panel-corner-border-color: transparent;
2378  -panel-corner-opacity: 1;
2379  transition-duration: 250ms;
2380}
2381
2382#panel .panel-button {
2383  -natural-hpadding: 8px;
2384  -minimum-hpadding: 8px;
2385  font-weight: normal;
2386  color: #dadada;
2387  text-shadow: none;
2388  transition-duration: 150ms;
2389  border-radius: 0;
2390}
2391
2392#panel .panel-button StLabel {
2393  padding: 0 2px;
2394}
2395
2396#panel .panel-button:hover {
2397  color: #dadada;
2398  background-color: rgba(255, 255, 255, 0.15);
2399  text-shadow: none;
2400}
2401
2402#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 {
2403  background-color: #E55E9C;
2404  color: rgba(255, 255, 255, 0.85);
2405  text-shadow: none;
2406  box-shadow: none;
2407}
2408
2409.unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel .panel-button {
2410  color: #dadada;
2411}
2412
2413.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 {
2414  color: #dadada;
2415}
2416
2417#panel .panel-button.clock-display .clock {
2418  border: none;
2419  border-radius: 0;
2420  background: none;
2421  box-shadow: none;
2422}
2423
2424#panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
2425  box-shadow: none;
2426}
2427
2428#panel .panel-button.clock-display:hover, #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked {
2429  box-shadow: none;
2430}
2431
2432#panel .panel-button.clock-display:hover .clock, #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock {
2433  box-shadow: none;
2434}
2435
2436#panel .panel-button .system-status-icon {
2437  icon-size: 16px;
2438  padding: 5px;
2439  margin: 0 4px;
2440}
2441
2442#panel .panel-button .panel-status-indicators-box .system-status-icon,
2443#panel .panel-button .panel-status-menu-box .system-status-icon {
2444  margin: 0;
2445}
2446
2447#panel .panel-button .app-menu-icon {
2448  -st-icon-style: symbolic;
2449}
2450
2451#panel #panelActivities.panel-button {
2452  -natural-hpadding: 18px;
2453}
2454
2455#panel.unlock-screen .panel-button:hover, #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:hover, #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:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked {
2456  box-shadow: none;
2457}
2458
2459#panel.unlock-screen .panel-button.clock-display:hover, #panel.unlock-screen .panel-button.clock-display:active, #panel.unlock-screen .panel-button.clock-display:overview, #panel.unlock-screen .panel-button.clock-display:focus, #panel.unlock-screen .panel-button.clock-display:checked, #panel.login-screen .panel-button.clock-display:hover, #panel.login-screen .panel-button.clock-display:active, #panel.login-screen .panel-button.clock-display:overview, #panel.login-screen .panel-button.clock-display:focus, #panel.login-screen .panel-button.clock-display:checked, #panel:overview .panel-button.clock-display:hover, #panel:overview .panel-button.clock-display:active, #panel:overview .panel-button.clock-display:overview, #panel:overview .panel-button.clock-display:focus, #panel:overview .panel-button.clock-display:checked {
2460  box-shadow: none;
2461}
2462
2463#panel.unlock-screen .panel-button.clock-display:hover .clock, #panel.unlock-screen .panel-button.clock-display:active .clock, #panel.unlock-screen .panel-button.clock-display:overview .clock, #panel.unlock-screen .panel-button.clock-display:focus .clock, #panel.unlock-screen .panel-button.clock-display:checked .clock, #panel.login-screen .panel-button.clock-display:hover .clock, #panel.login-screen .panel-button.clock-display:active .clock, #panel.login-screen .panel-button.clock-display:overview .clock, #panel.login-screen .panel-button.clock-display:focus .clock, #panel.login-screen .panel-button.clock-display:checked .clock, #panel:overview .panel-button.clock-display:hover .clock, #panel:overview .panel-button.clock-display:active .clock, #panel:overview .panel-button.clock-display:overview .clock, #panel:overview .panel-button.clock-display:focus .clock, #panel:overview .panel-button.clock-display:checked .clock {
2464  box-shadow: none;
2465}
2466
2467#panel .panel-status-indicators-box,
2468#panel .panel-status-menu-box {
2469  spacing: 2px;
2470}
2471
2472#panel .power-status.panel-status-indicators-box {
2473  spacing: 0;
2474}
2475
2476#panel .screencast-indicator,
2477#panel .remote-access-indicator {
2478  color: #F27835;
2479}
2480
2481#panel #panelActivities.panel-button > * {
2482  background-image: url("assets/activities.svg");
2483  background-position: center top;
2484  width: 24px;
2485  height: 24px;
2486  background-color: transparent !important;
2487  background-gradient-direction: none !important;
2488  border: none;
2489  color: transparent;
2490}
2491
2492#panel #panelActivities.panel-button:active, #panel #panelActivities.panel-button:overview, #panel #panelActivities.panel-button:focus, #panel #panelActivities.panel-button:checked {
2493  background-color: transparent;
2494  border: none;
2495}
2496
2497/* Popovers/Menus */
2498.popup-menu-boxpointer {
2499  -arrow-border-radius: 2px;
2500  -arrow-background-color: transparent;
2501  -arrow-border-width: 0;
2502  -arrow-border-color: transparent;
2503  -arrow-base: 64px;
2504  -arrow-rise: 0;
2505  -arrow-box-shadow: none;
2506  background: transparent;
2507}
2508
2509.popup-menu {
2510  min-width: 12em;
2511  color: #dedede;
2512  font-weight: normal;
2513  padding: 3px 0;
2514  font-size: 9.75pt;
2515  font-weight: 400;
2516  border-image: url("assets/menu.svg") 24 32 28 28;
2517}
2518
2519.popup-menu .popup-menu-content {
2520  padding: 10px 0;
2521  font-weight: normal;
2522}
2523
2524.popup-menu .popup-menu-item {
2525  spacing: 12px;
2526  padding: 6px;
2527  color: #afafaf;
2528  text-shadow: none;
2529  border-radius: 2px;
2530  font-weight: normal;
2531}
2532
2533.popup-menu .popup-menu-item:ltr {
2534  padding-right: 1.5em;
2535  padding-left: 0;
2536}
2537
2538.popup-menu .popup-menu-item:rtl {
2539  padding-right: 0;
2540  padding-left: 1.5em;
2541}
2542
2543.popup-menu .popup-menu-item:checked {
2544  font-weight: normal;
2545  background: none;
2546  box-shadow: none;
2547  border-image: url("assets/submenu-open.svg") 28 28 2 2;
2548}
2549
2550.popup-menu .popup-menu-item.selected:checked {
2551  color: rgba(255, 255, 255, 0.85);
2552  background: none;
2553  background-color: transparent;
2554  border-image: url("assets/menu-hover.svg") 28 28 2 2;
2555  transition-duration: 0ms;
2556  animation: none;
2557  box-shadow: none;
2558}
2559
2560.popup-menu .popup-menu-item:checked:active {
2561  color: rgba(255, 255, 255, 0.85);
2562  background: none;
2563  background-color: transparent;
2564  border-image: url("assets/menu-active.svg") 28 28 2 2;
2565  transition-duration: 100ms;
2566  animation: none;
2567  box-shadow: none;
2568}
2569
2570.popup-menu .popup-menu-item:checked:insensitive {
2571  color: rgba(255, 255, 255, 0.45);
2572}
2573
2574.popup-menu .popup-menu-item.selected {
2575  color: rgba(255, 255, 255, 0.85);
2576  background: none;
2577  background-color: transparent;
2578  border-image: url("assets/menu-hover.svg") 28 28 2 2;
2579  transition-duration: 0ms;
2580  animation: none;
2581  box-shadow: none;
2582}
2583
2584.popup-menu .popup-menu-item:active, .popup-menu .popup-menu-item.selected:active {
2585  color: rgba(255, 255, 255, 0.85);
2586  background: none;
2587  background-color: transparent;
2588  border-image: url("assets/menu-active.svg") 28 28 2 2;
2589  transition-duration: 100ms;
2590  animation: none;
2591  box-shadow: none;
2592}
2593
2594.popup-menu .popup-menu-item:insensitive {
2595  color: rgba(222, 222, 222, 0.35);
2596}
2597
2598.popup-menu .popup-sub-menu {
2599  background: none;
2600  box-shadow: none;
2601  border-image: url("assets/submenu.svg") 28 28 2 2;
2602}
2603
2604.popup-menu .popup-inactive-menu-item {
2605  color: #afafaf;
2606}
2607
2608.popup-menu .popup-inactive-menu-item:insensitive {
2609  color: rgba(222, 222, 222, 0.35);
2610}
2611
2612.popup-menu.panel-menu {
2613  -boxpointer-gap: 4px;
2614  margin-bottom: 1.75em;
2615}
2616
2617.popup-menu StEntry {
2618  selection-background-color: rgba(255, 255, 255, 0.85);
2619  selected-background-color: rgba(255, 255, 255, 0.85);
2620  selected-color: #E55E9C;
2621  caret-color: #dedede;
2622}
2623
2624.popup-menu StEntry StLabel.hint-text {
2625  margin-left: 2px;
2626  color: rgba(222, 222, 222, 0.7);
2627}
2628
2629.popup-menu .search-entry {
2630  border-radius: 9999px;
2631}
2632
2633.popup-menu-arrow,
2634.popup-menu-icon {
2635  icon-size: 16px;
2636}
2637
2638.popup-menu-ornament {
2639  width: 1.2em;
2640}
2641
2642.popup-menu-ornament:ltr {
2643  text-align: right;
2644}
2645
2646.popup-menu-ornament:rtl {
2647  text-align: left;
2648}
2649
2650.popup-separator-menu-item {
2651  margin: 0;
2652  padding: 0 0;
2653  background: none;
2654  border: none;
2655  height: 1px;
2656}
2657
2658.popup-separator-menu-item .popup-separator-menu-item-separator {
2659  height: 1px;
2660  margin: 0 40px;
2661  background-color: rgba(255, 255, 255, 0.12);
2662  padding: 0 0;
2663}
2664
2665.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator {
2666  padding: 0 0;
2667  margin: 0 58px 0 24px;
2668}
2669
2670.background-menu {
2671  -boxpointer-gap: 4px;
2672  -arrow-rise: 0px;
2673}
2674
2675.aggregate-menu {
2676  min-width: 21em;
2677}
2678
2679.aggregate-menu .popup-menu-icon {
2680  padding: 0;
2681  margin: 0 0;
2682  -st-icon-style: symbolic;
2683}
2684
2685.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr {
2686  /* 12px spacing + 2*4px padding */
2687  padding-left: 16px;
2688  margin-left: 1em;
2689}
2690
2691.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl {
2692  /* 12px spacing + 2*4px padding */
2693  padding-right: 16px;
2694  margin-right: 1em;
2695}
2696
2697/* Screen Shield */
2698.unlock-dialog-clock {
2699  color: white;
2700  font-weight: 300;
2701  text-align: center;
2702  spacing: 24px;
2703  padding-bottom: 2.5em;
2704}
2705
2706.unlock-dialog-clock-time {
2707  font-size: 64pt;
2708  padding-top: 42px;
2709  font-feature-settings: "tnum";
2710}
2711
2712.unlock-dialog-clock-date {
2713  font-size: 16pt;
2714  font-weight: normal;
2715}
2716
2717.unlock-dialog-clock-hint {
2718  font-weight: normal;
2719  padding-top: 48px;
2720}
2721
2722.unlock-dialog-notifications-container {
2723  margin: 12px 0;
2724  spacing: 6px;
2725  width: 23em;
2726  background-color: transparent;
2727}
2728
2729.unlock-dialog-notifications-container .summary-notification-stack-scrollview {
2730  padding-top: 0;
2731  padding-bottom: 0;
2732}
2733
2734.unlock-dialog-notifications-container .notification,
2735.unlock-dialog-notifications-container .unlock-dialog-notification-source {
2736  padding: 12px 6px;
2737  border: none;
2738  background-color: rgba(0, 0, 0, 0.6);
2739  color: white;
2740  border-radius: 5px;
2741}
2742
2743.unlock-dialog-notifications-container .notification.critical,
2744.unlock-dialog-notifications-container .unlock-dialog-notification-source.critical {
2745  background-color: rgba(0, 0, 0, 0.3);
2746}
2747
2748.unlock-dialog-notification-label {
2749  padding: 0px 0px 0px 12px;
2750}
2751
2752.unlock-dialog-notification-count-text {
2753  weight: bold;
2754  padding: 0 6px;
2755  color: white;
2756  background-color: #E55E9C;
2757  border-radius: 99px;
2758  margin-right: 12px;
2759}
2760
2761.screen-shield-background {
2762  background: black;
2763  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
2764}
2765
2766#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle {
2767  background-color: rgba(51, 51, 51, 0.3);
2768}
2769
2770#unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus {
2771  background-color: rgba(51, 51, 51, 0.5);
2772}
2773
2774#unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active {
2775  background-color: rgba(229, 94, 156, 0.5);
2776}
2777
2778/* Search */
2779.list-search-result, .search-provider-icon {
2780  border-radius: 5px;
2781  padding: 6px;
2782  transition-duration: 100ms;
2783  text-align: center;
2784}
2785
2786.list-search-result:focus, .search-provider-icon:focus, .list-search-result:hover, .search-provider-icon:hover, .list-search-result:selected, .search-provider-icon:selected {
2787  background-color: rgba(255, 255, 255, 0.15);
2788  transition-duration: 200ms;
2789}
2790
2791.list-search-result:active, .search-provider-icon:active, .list-search-result:checked, .search-provider-icon:checked {
2792  background-color: rgba(255, 255, 255, 0.3);
2793}
2794
2795#searchResultsContent {
2796  max-width: 1024px;
2797  spacing: 8px;
2798  font-size: 9.75pt;
2799  font-weight: 400;
2800}
2801
2802.search-section {
2803  spacing: 8px;
2804}
2805
2806.search-section .search-section-separator {
2807  height: 0;
2808  background-color: rgba(255, 255, 255, 0.15);
2809}
2810
2811.search-section-content {
2812  spacing: 8px;
2813  border-radius: 16px;
2814  padding: 18px;
2815  border: none;
2816  box-shadow: none;
2817  background: rgba(255, 255, 255, 0.15);
2818  text-shadow: none;
2819  color: rgba(255, 255, 255, 0.85);
2820}
2821
2822.search-statustext {
2823  font-size: 2em;
2824  font-weight: bold;
2825  color: rgba(255, 255, 255, 0.5);
2826}
2827
2828.grid-search-results {
2829  spacing: 36px;
2830}
2831
2832.search-provider-icon .list-search-provider-content {
2833  spacing: 12px;
2834}
2835
2836.search-provider-icon .list-search-provider-content .list-search-provider-details {
2837  width: 120px;
2838  margin-top: 0;
2839  color: rgba(255, 255, 255, 0.5);
2840}
2841
2842.list-search-results {
2843  spacing: 6px;
2844}
2845
2846.list-search-result .list-search-result-content {
2847  spacing: 6px;
2848}
2849
2850.list-search-result .list-search-result-title {
2851  spacing: 12px;
2852}
2853
2854.list-search-result .list-search-result-description {
2855  color: rgba(255, 255, 255, 0.85);
2856}
2857
2858/* Scrollbars */
2859StScrollView.vfade {
2860  -st-vfade-offset: 32px;
2861}
2862
2863StScrollView.hfade {
2864  -st-hfade-offset: 32px;
2865}
2866
2867StScrollBar {
2868  padding: 0;
2869}
2870
2871StScrollView StScrollBar {
2872  min-width: 16px;
2873  min-height: 16px;
2874}
2875
2876StScrollBar StBin#trough {
2877  margin: 6px;
2878  border-radius: 100px;
2879  background-color: rgba(255, 255, 255, 0.06);
2880}
2881
2882StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
2883  border-radius: 100px;
2884  background-color: #999999;
2885  margin: 6px;
2886}
2887
2888StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover {
2889  background-color: #afafaf;
2890}
2891
2892StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
2893  background-color: #dedede;
2894}
2895
2896.app-folder-dialog .folder-name-container .folder-name-entry, .search-entry {
2897  width: 320px;
2898  min-height: 28px;
2899  padding: 2px 10px;
2900  border: none;
2901  color: rgba(255, 255, 255, 0.5);
2902  caret-color: rgba(255, 255, 255, 0.85);
2903  selection-background-color: rgba(255, 255, 255, 0.3);
2904  selected-color: rgba(255, 255, 255, 0.85);
2905  color: rgba(255, 255, 255, 0.3);
2906  background-color: rgba(255, 255, 255, 0.12);
2907  border-radius: 8px;
2908  border-color: transparent;
2909  box-shadow: none;
2910}
2911
2912.app-folder-dialog .folder-name-container .folder-name-entry:focus, .search-entry:focus {
2913  color: rgba(255, 255, 255, 0.85);
2914  border-color: transparent;
2915  background-color: rgba(255, 255, 255, 0.18);
2916  border: none;
2917  color: rgba(255, 255, 255, 0.85);
2918}
2919
2920.app-folder-dialog .folder-name-container .folder-name-entry .search-entry-icon, .search-entry .search-entry-icon {
2921  icon-size: 16px;
2922  padding: 0 0;
2923  color: rgba(255, 255, 255, 0.5);
2924}
2925
2926.app-folder-dialog .folder-name-container .folder-name-entry:hover .search-entry-icon, .app-folder-dialog .folder-name-container .folder-name-entry:focus .search-entry-icon, .search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
2927  color: rgba(255, 255, 255, 0.85);
2928}
2929
2930.app-folder-dialog .folder-name-container .folder-name-entry:insensitive, .search-entry:insensitive {
2931  border: none;
2932  color: rgba(255, 255, 255, 0.45);
2933}
2934
2935.app-folder-dialog .folder-name-container .folder-name-entry StLabel.hint-text, .search-entry StLabel.hint-text {
2936  color: rgba(255, 255, 255, 0.5);
2937}
2938
2939/* Slider */
2940.slider {
2941  height: 20px;
2942  color: white;
2943  -slider-height: 2px;
2944  -slider-background-color: rgba(255, 255, 255, 0.1);
2945  -slider-border-color: transparent;
2946  -slider-active-background-color: #E55E9C;
2947  -slider-active-border-color: transparent;
2948  -slider-border-width: 0;
2949  -slider-handle-radius: 7px;
2950  -slider-handle-border-width: 1px;
2951  -slider-handle-border-color: rgba(0, 0, 0, 0.15);
2952  -barlevel-height: 2px;
2953  -barlevel-background-color: rgba(255, 255, 255, 0.1);
2954  -barlevel-border-color: transparent;
2955  -barlevel-active-background-color: #E55E9C;
2956  -barlevel-active-border-color: transparent;
2957  -barlevel-overdrive-color: #f8464c;
2958  -barlevel-overdrive-border-color: transparent;
2959  -barlevel-overdrive-separator-width: 2px;
2960  -barlevel-border-width: 0;
2961}
2962
2963.popup-menu-item.selected .slider {
2964  color: white;
2965  -slider-background-color: rgba(255, 255, 255, 0.1);
2966  -slider-active-background-color: rgba(255, 255, 255, 0.45);
2967  -barlevel-background-color: rgba(255, 255, 255, 0.1);
2968  -barlevel-active-background-color: rgba(255, 255, 255, 0.45);
2969}
2970
2971/* App Switcher */
2972.switcher-popup {
2973  padding: 8px;
2974  spacing: 24px;
2975}
2976
2977.switcher-list .item-box {
2978  padding: 8px;
2979  border-radius: 5px;
2980  border: 1px solid transparent;
2981}
2982
2983.switcher-list .item-box:outlined {
2984  background-color: rgba(255, 255, 255, 0.06);
2985  color: #dedede;
2986}
2987
2988.switcher-list .item-box:selected {
2989  background-color: #E55E9C;
2990  color: rgba(255, 255, 255, 0.85);
2991}
2992
2993.switcher-list .thumbnail-box {
2994  padding: 2px;
2995  spacing: 6px;
2996}
2997
2998.switcher-list .thumbnail {
2999  width: 256px;
3000}
3001
3002.switcher-list .separator {
3003  width: 1px;
3004  background: rgba(255, 255, 255, 0.12);
3005}
3006
3007.switcher-list .switcher-list-item-container {
3008  spacing: 12px;
3009}
3010
3011.switcher-arrow {
3012  border-color: rgba(0, 0, 0, 0);
3013  color: #999999;
3014}
3015
3016.switcher-arrow:highlighted {
3017  color: #dedede;
3018}
3019
3020.input-source-switcher-symbol {
3021  font-size: 34pt;
3022  width: 96px;
3023  height: 96px;
3024}
3025
3026.cycler-highlight {
3027  border: 5px solid #E55E9C;
3028}
3029
3030/* Switches */
3031.toggle-switch {
3032  width: 40px;
3033  height: 24px;
3034  background-size: contain;
3035  background-image: url("assets/toggle-off.svg");
3036}
3037
3038.toggle-switch:checked {
3039  background-image: url("assets/toggle-on.svg");
3040}
3041
3042.popup-menu-item.selected .toggle-switch {
3043  background-image: url("assets/toggle-off.svg");
3044}
3045
3046.popup-menu-item.selected .toggle-switch:checked {
3047  background-image: url("assets/toggle-on.svg");
3048}
3049
3050/* Tiled window previews */
3051.tile-preview {
3052  background-color: rgba(229, 94, 156, 0.3);
3053  border: 1px solid #E55E9C;
3054}
3055
3056.tile-preview-left.on-primary {
3057  border-radius: 6px 0 0 0;
3058}
3059
3060.tile-preview-right.on-primary {
3061  border-radius: 0 6px 0 0;
3062}
3063
3064.tile-preview-left.tile-preview-right.on-primary {
3065  border-radius: 6px 6px 0 0;
3066}
3067
3068/* Workspace Switcher */
3069.workspace-switcher-group {
3070  padding: 12px;
3071}
3072
3073.workspace-switcher {
3074  background: transparent;
3075  border: none;
3076  border-radius: 0;
3077  padding: 0;
3078  spacing: 12px;
3079}
3080
3081.ws-switcher-box {
3082  background: transparent;
3083  height: 50px;
3084  background-size: 32px;
3085  background: rgba(255, 255, 255, 0.06);
3086  border-radius: 5px;
3087}
3088
3089.ws-switcher-active-up,
3090.ws-switcher-active-down,
3091.ws-switcher-active-left,
3092.ws-switcher-active-right {
3093  height: 52px;
3094  background-color: #E55E9C;
3095  color: rgba(255, 255, 255, 0.85);
3096  border-radius: 8px;
3097  border: none;
3098}
3099
3100.icon-grid {
3101  row-spacing: 12px;
3102  column-spacing: 12px;
3103  max-row-spacing: 72px;
3104  max-column-spacing: 72px;
3105  page-padding-top: 24px;
3106  page-padding-bottom: 24px;
3107  page-padding-left: 12px;
3108  page-padding-right: 12px;
3109}
3110
3111.apps-scroll-view {
3112  padding: 0;
3113}
3114
3115.page-navigation-hint {
3116  width: 300px;
3117}
3118
3119.page-navigation-hint.dnd {
3120  background: rgba(255, 255, 255, 0.1);
3121}
3122
3123.page-navigation-hint.next:ltr, .page-navigation-hint.previous:rtl {
3124  background-gradient-start: rgba(255, 255, 255, 0.05);
3125  background-gradient-end: transparent;
3126  background-gradient-direction: horizontal;
3127  border-radius: 15px 0px 0px 15px;
3128}
3129
3130.page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl {
3131  background-gradient-start: transparent;
3132  background-gradient-end: rgba(255, 255, 255, 0.05);
3133  background-gradient-direction: horizontal;
3134  border-radius: 0px 15px 15px 0px;
3135}
3136
3137.page-navigation-arrow {
3138  margin: 6px;
3139  width: 24px;
3140  height: 24px;
3141}
3142
3143#dash {
3144  margin-top: 12px;
3145  padding: 0 10px;
3146}
3147
3148#dash .placeholder {
3149  background-image: none;
3150  background-size: contain;
3151  height: 32px;
3152}
3153
3154#dash .overview-icon {
3155  padding: 5px;
3156}
3157
3158#dash .app-well-app-running-dot {
3159  background-color: rgba(255, 255, 255, 0.75);
3160}
3161
3162.dash-background {
3163  background-color: rgba(34, 34, 34, 0.75);
3164  margin-bottom: 16px;
3165  padding: 10px;
3166  border-radius: 22px;
3167}
3168
3169.dash-item-container .app-well-app, .show-apps {
3170  padding: 10px 1.5px 26px;
3171}
3172
3173.dash-separator {
3174  width: 1px;
3175  margin: 0 6.5px 16px;
3176  background-color: rgba(255, 255, 255, 0.25);
3177}
3178
3179.workspace-animation {
3180  background-color: #2a2a2a;
3181}
3182
3183.calendar .calendar-change-month-back,
3184.calendar .calendar-change-month-forward {
3185  padding: 0 2px;
3186}
3187
3188.controls-manager, .secondary-monitor-workspaces {
3189  spacing: 12px;
3190}
3191
3192#overviewGroup {
3193  background-color: #2a2a2a;
3194  background-image: url("assets/background.png");
3195  background-repeat: no-repeat;
3196  background-size: cover;
3197}
3198
3199#appMenu {
3200  spacing: 6px;
3201}
3202
3203#appMenu .label-shadow {
3204  color: transparent;
3205}
3206
3207#appMenu .panel-status-menu-box {
3208  padding: 0 6px;
3209  spacing: 6px;
3210}
3211
3212#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle {
3213  background-color: rgba(51, 51, 51, 0.3);
3214}
3215
3216#unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus {
3217  background-color: rgba(51, 51, 51, 0.5);
3218}
3219
3220#unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active {
3221  background-color: rgba(229, 94, 156, 0.5);
3222}
3223
3224.search-entry {
3225  margin-top: 24px;
3226  margin-bottom: 6px;
3227}
3228
3229.window-picker {
3230  spacing: 6px;
3231}
3232
3233.window-caption {
3234  color: #dadada;
3235  background-color: #2a2a2a;
3236  border-radius: 9999px;
3237  padding: 6px 12px;
3238  font-size: 9.75pt;
3239  font-weight: 400;
3240}
3241
3242.window-close {
3243  background-color: #f8464c;
3244  color: white;
3245  border-radius: 21px;
3246  padding: 3px;
3247  height: 30px;
3248  width: 30px;
3249  box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5);
3250  transition-duration: 300ms;
3251}
3252
3253.window-close StIcon {
3254  icon-size: 1px;
3255}
3256
3257.window-close:hover {
3258  color: white;
3259  background-color: #f96369;
3260}
3261
3262.window-close:active {
3263  color: white;
3264  background-color: #f7292f;
3265}
3266
3267.workspace-background {
3268  border-radius: 30px;
3269  background-color: #2a2a2a;
3270  box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.3);
3271}
3272
3273/* Workspace pager */
3274.workspace-thumbnails {
3275  visible-width: 32px;
3276  spacing: 6px;
3277  padding: 6px;
3278}
3279
3280.workspace-thumbnails .workspace-thumbnail {
3281  color: rgba(255, 255, 255, 0.85);
3282  background-color: rgba(255, 255, 255, 0.15);
3283  border: none;
3284  border-radius: 5px;
3285}
3286
3287.workspace-thumbnails .placeholder {
3288  background-image: url("assets/dash-placeholder.svg");
3289  background-size: contain;
3290  width: 18px;
3291  height: 24px;
3292}
3293
3294.workspace-thumbnail-indicator {
3295  border: 3px solid #E55E9C;
3296  border-radius: 3px;
3297  padding: 0px;
3298}
3299
3300.bottom #dashtodockDashScrollview,
3301.top #dashtodockDashScrollview {
3302  -st-hfade-offset: 24px;
3303}
3304
3305.left #dashtodockDashScrollview,
3306.right #dashtodockDashScrollview {
3307  -st-vfade-offset: 24px;
3308}
3309
3310#dashtodockContainer {
3311  background-color: transparent;
3312}
3313
3314#dashtodockContainer .number-overlay {
3315  color: white;
3316  background-color: rgba(0, 0, 0, 0.75);
3317  text-align: center;
3318}
3319
3320#dashtodockContainer .notification-badge {
3321  color: white;
3322  background-color: #E55E9C;
3323  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
3324  border-radius: 1000px;
3325  margin: 2px;
3326  padding: 0.2em 0.6em;
3327  font-weight: bold;
3328  text-align: center;
3329}
3330
3331#dashtodockContainer.straight-corner #dash .dash-background, #dashtodockContainer.shrink.straight-corner #dash .dash-background {
3332  border-radius: 0;
3333  margin: 0;
3334}
3335
3336#dashtodockContainer.extended.top #dash, #dashtodockContainer.extended.bottom #dash {
3337  border-left: 0;
3338  border-right: 0;
3339  padding-top: 0;
3340  padding-bottom: 0;
3341  margin-top: 0;
3342}
3343
3344#dashtodockContainer.extended.top .dash-background, #dashtodockContainer.extended.bottom .dash-background {
3345  margin-bottom: 0;
3346}
3347
3348#dashtodockContainer.extended.right #dash, #dashtodockContainer.extended.left #dash {
3349  border-top: 0;
3350  border-bottom: 0;
3351  padding-top: 0;
3352  padding-bottom: 0;
3353  margin-top: 0;
3354}
3355
3356#dashtodockContainer.extended.right .dash-background, #dashtodockContainer.extended.left .dash-background {
3357  margin-bottom: 0;
3358}
3359
3360#dashtodockContainer.dashtodock #dash {
3361  background: none;
3362}
3363
3364#dashtodockContainer #dash {
3365  background: none;
3366}
3367
3368#dashtodockContainer #dash StWidget.focused .app-well-app-running-dot {
3369  background-color: #E55E9C;
3370}
3371
3372#dashtodockContainer #dash .app-well-app:hover .overview-icon, #dashtodockContainer #dash .app-well-app:focus .overview-icon, #dashtodockContainer #dash .app-well-app:selected .overview-icon,
3373#dashtodockContainer #dash .show-apps:hover .overview-icon,
3374#dashtodockContainer #dash .show-apps:focus .overview-icon,
3375#dashtodockContainer #dash .show-apps:selected .overview-icon {
3376  background-color: rgba(222, 222, 222, 0.15);
3377}
3378
3379#dashtodockContainer #dash .app-well-app:active .overview-icon, #dashtodockContainer #dash .app-well-app:checked .overview-icon,
3380#dashtodockContainer #dash .show-apps:active .overview-icon,
3381#dashtodockContainer #dash .show-apps:checked .overview-icon {
3382  background-color: rgba(222, 222, 222, 0.25);
3383}
3384
3385#dashtodockContainer #dash .show-apps, #dashtodockContainer #dash .show-apps .show-apps-icon, #dashtodockContainer #dash .show-apps .overview-icon {
3386  color: #dedede;
3387}
3388
3389#dashtodockContainer .dash-background {
3390  background-color: rgba(34, 34, 34, 0.75);
3391  border: 1px solid rgba(0, 0, 0, 0.75);
3392  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
3393}
3394
3395#dashtodockContainer:overview #dash {
3396  background: none;
3397}
3398
3399#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,
3400#dashtodockContainer:overview #dash .show-apps:hover .overview-icon,
3401#dashtodockContainer:overview #dash .show-apps:focus .overview-icon,
3402#dashtodockContainer:overview #dash .show-apps:selected .overview-icon {
3403  background-color: rgba(255, 255, 255, 0.15);
3404}
3405
3406#dashtodockContainer:overview #dash .app-well-app:active .overview-icon, #dashtodockContainer:overview #dash .app-well-app:checked .overview-icon,
3407#dashtodockContainer:overview #dash .show-apps:active .overview-icon,
3408#dashtodockContainer:overview #dash .show-apps:checked .overview-icon {
3409  background-color: rgba(255, 255, 255, 0.3);
3410}
3411
3412#dashtodockContainer:overview #dash .show-apps, #dashtodockContainer:overview #dash .show-apps .show-apps-icon, #dashtodockContainer:overview #dash .show-apps .overview-icon {
3413  color: rgba(255, 255, 255, 0.85);
3414}
3415
3416#dashtodockContainer:overview #dash .dash-background {
3417  background-color: rgba(255, 255, 255, 0.15);
3418  border: 1px solid rgba(0, 0, 0, 0.08);
3419  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
3420}
3421
3422#dashtodockContainer:overview #dash .app-well-app-running-dot {
3423  background-color: rgba(255, 255, 255, 0.85);
3424}
3425
3426#dashtodockContainer:overview #dash StWidget.focused .app-well-app-running-dot {
3427  background-color: #E55E9C;
3428}
3429
3430#dashtodockContainer.opaque:overview #dash, #dashtodockContainer.transparent:overview #dash {
3431  background-color: transparent !important;
3432  box-shadow: none !important;
3433}
3434
3435#dashtodockContainer.opaque:overview .dash-background, #dashtodockContainer.transparent:overview .dash-background {
3436  background-color: transparent !important;
3437}
3438
3439#dashtodockContainer.extended:overview #dash, #dashtodockContainer.opaque.extended:overview #dash, #dashtodockContainer.transparent.extended:overview #dash {
3440  background: none;
3441}
3442
3443#dashtodockContainer.running-dots .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton {
3444  transition-duration: 250ms;
3445  background-size: contain;
3446}
3447
3448#dashtodockContainer.shrink .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton {
3449  padding: 1px 2px;
3450}
3451
3452#dashtodockContainer .app-well-app .overview-icon,
3453#dashtodockContainer .show-apps .overview-icon {
3454  padding: 8px;
3455  background-size: contain;
3456}
3457
3458#dashtodockContainer.extended .app-well-app .overview-icon,
3459#dashtodockContainer.extended .show-apps .overview-icon, #dashtodockContainer.extended:overview .app-well-app .overview-icon,
3460#dashtodockContainer.extended:overview .show-apps .overview-icon {
3461  border-radius: 5px;
3462}
3463
3464#dashtodockContainer .metro .overview-icon {
3465  border-radius: 0;
3466}
3467
3468.dashtodock-app-well-preview-menu-item {
3469  padding: 1em 1em 0.5em 1em;
3470}
3471
3472#dashtodockPreviewSeparator.popup-separator-menu-item-horizontal {
3473  width: 1px;
3474  height: auto;
3475  border-right-width: 1px;
3476  margin: 32px 0;
3477}
3478
3479.openweather-button, .openweather-button-action, .openweather-menu-button-container, .openweather-button-box {
3480  border: 1px solid transparent !important;
3481}
3482
3483.openweather-provider {
3484  padding: 0 16px;
3485  font-weight: 500;
3486  color: #afafaf;
3487  background-color: transparent;
3488  border-color: transparent;
3489  box-shadow: none;
3490  text-shadow: none;
3491  icon-shadow: none;
3492  border: 1px solid transparent !important;
3493}
3494
3495.openweather-provider:hover {
3496  color: #dedede;
3497  background-color: rgba(255, 255, 255, 0.06);
3498  border-color: transparent;
3499  box-shadow: none;
3500  text-shadow: none;
3501  icon-shadow: none;
3502}
3503
3504.openweather-provider:focus {
3505  color: #dedede;
3506  text-shadow: none;
3507  icon-shadow: none;
3508  box-shadow: none;
3509}
3510
3511.openweather-provider:active {
3512  color: #dedede;
3513  background-color: rgba(255, 255, 255, 0.1);
3514  border-color: transparent;
3515  box-shadow: none;
3516  text-shadow: none;
3517  icon-shadow: none;
3518}
3519
3520.openweather-current-icon, .openweather-current-summary, .openweather-current-summarybox {
3521  background: none;
3522  color: #dedede;
3523}
3524
3525.openweather-current-databox-values {
3526  background: none;
3527  color: #999999;
3528}
3529
3530.openweather-current-databox-captions {
3531  background: none;
3532  color: #999999;
3533}
3534
3535.openweather-forecast-icon, .openweather-forecast-summary {
3536  background: none;
3537  color: #afafaf;
3538}
3539
3540.openweather-forecast-day, .openweather-forecast-temperature {
3541  background: none;
3542  color: #999999;
3543}
3544
3545.openweather-sunrise-icon, .openweather-sunset-icon, .openweather-build-icon {
3546  color: #afafaf;
3547}
3548
3549.gsconnect-device-name {
3550  font-size: 0.9em;
3551}
3552
3553.gsconnect-device-menu .popup-separator-menu-item {
3554  min-height: 16px !important;
3555}
3556
3557.gsconnect-device-menu .popup-menu-item {
3558  min-width: 6px !important;
3559}
3560
3561.gsconnect-device-menu .popup-menu-item > :first-child:ltr {
3562  padding-left: 0 !important;
3563  margin-left: 0 !important;
3564}
3565
3566.gsconnect-device-menu .popup-menu-item > :first-child:rtl {
3567  padding-right: 0 !important;
3568  margin-right: 0 !important;
3569}
3570