1$corner-radius: 2px;
2
3
4/* GLOBALS */
5$font-size: 10;
6$_bubble_bg_color: $osd_bg_color;
7$_bubble_fg_color: $fg_color;
8$_bubble_borders_color: $fg_color;
9$_bubble_transparent: transparentize($osd_bg_color, 0.17);
10$topbar_bg_color: transparentize($dracula,0);
11
12stage {
13  @include fontsize($font-size);
14  color: $fg_color;
15}
16
17/* WIDGETS */
18
19/* Buttons */
20.button {
21  @include button(normal);
22  border-radius: 4px;
23  border-width: 0;
24  padding: 4px 32px;
25  &:focus { @include button(focus); }
26  &:insensitive { @include button(insensitive); }
27  &:active { @include button(active); }
28  &:hover {
29    @include button(hover);
30  }
31}
32
33.modal-dialog-linked-button {
34  padding: 10px;
35  border: 1px solid $borders_color;
36  color: $fg_color;
37  background: $main_dark;
38  text-shadow: none;
39  icon-shadow: none;
40  box-shadow: none;
41  &:insensitive { @include button(insensitive); }
42  &:active {
43    @include button(active);
44  }
45  &:focus {
46    @include button(focus);
47    &:hover {
48      @include button(focus);
49    }
50  }
51  &:hover {
52    @include button(hover);
53  }
54
55  &:first-child { border-radius: 0px 0px 0px 2px; }
56  &:last-child { border-radius: 0px 0px 2px 0px; }
57  &:first-child:last-child { border-radius: 0px 0px 2px 2px; }
58}
59
60/* Entries */
61StEntry {
62  @include entry(normal);
63  border-radius: 2px;
64  padding: 4px;
65  border-width: 0;
66  color: $fg_color;
67  //&:hover { @include entry(hover);}
68  &:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));}
69  &:insensitive { @include entry(insensitive);}
70  selection-background-color: $selected_bg_color;
71  selected-color: $selected_fg_color;
72  StIcon.capslock-warning {
73    icon-size: 16px;
74    warning-color: $warning_color;
75    padding: 0 4px;
76  }
77
78  StLabel.hint-text { color: transparentize($fg_color, 0.3); }
79
80}
81
82
83/* Scrollbars */
84
85StScrollView {
86  &.vfade { -st-vfade-offset: 68px; }
87  &.hfade { -st-hfade-offset: 68px; }
88}
89
90StScrollBar {
91  padding: 0;
92
93  StScrollView & {
94    min-width: 14px;
95    min-height: 14px;
96  }
97
98  StBin#trough {
99    border-radius: 0;
100    background-color: transparent;
101  }
102
103  StButton#vhandle, StButton#hhandle {
104    border-radius: 8px;
105    background-color: mix($fg_color, $bg_color, 20%);
106    //border: 3px solid transparent; //would be nice to margin or at least to transparent
107    margin: 3px;
108    &:hover { background-color: mix($fg_color, $bg_color, 80%); }
109    &:active { background-color: $selected_bg_color; }
110  }
111}
112
113/* Slider */
114
115.slider {
116  height: 1em;
117  color: $selected_fg_color;
118  border-color: black;
119  -slider-height: 0.3em;
120  -slider-background-color: $gray; //background of the trough
121  -slider-border-color: black; //trough border color
122  -slider-active-background-color: $selected_bg_color; //active trough fill
123  -slider-active-border-color: $lime; //active trough border
124  -slider-border-width: 0;
125  -slider-handle-radius: 6px;
126
127  -barlevel-height: 0.3em;
128  -barlevel-background-color: $gray;
129  -barlevel-border-color: black;
130  -barlevel-active-background-color: $selected_bg_color;
131  -barlevel-active-border-color: $lime;
132  -barlevel-border-width: 0;
133  -barlevel-handle-radius: 6px;
134  -barlevel-overdrive-color: $selected_bg_color;
135  -barlevel-overdrive-border-color: transparent;
136  -barlevel-overdrive-separator-width: 0px;
137}
138
139/* Check Boxes */
140
141.check-box {
142  StBoxLayout { spacing: .8em; }
143  StBin {
144    width: 24px;
145    height: 22px;
146    background-image: url("assets/checkbox-off.svg");
147  }
148  &:focus, &:hover StBin {
149    background-image: url("assets/checkbox-off-focused.svg");
150  }
151  &:checked StBin { background-image: url("assets/checkbox.svg"); }
152  &:focus:checked StBin { background-image: url("assets/checkbox-focused.svg"); }
153}
154
155/* Switches */
156.toggle-switch {
157  width: 65px;
158  height: 22px;
159  background-size: contain;
160  //Gnome 3.32//
161  background-image: url("assets/toggle-off.svg");
162  &:checked { background-image: url("assets/toggle-on.svg"); }
163}
164
165  @each $v in us, intl {
166    .toggle-switch-#{$v} {
167      background-image: url("assets/toggle-off.svg");
168      &:checked { background-image: url("assets/toggle-on.svg"); }
169    }
170  }
171
172/* links */
173.shell-link {
174  color: $link_color;
175  &:hover { color: lighten($link_color,10%); }
176}
177
178/* Modal Dialogs */
179
180.headline { font-size: 110%; }
181.lightbox { background-color: black; }
182.flashspot { background-color: white; }
183
184.modal-dialog {
185  border: none;
186  border-radius: 2px;
187  color: $osd_fg_color;
188  background-color: darken($osd_bg_color,5%);
189  box-shadow: $depth6;
190
191  .modal-dialog-content-box { padding: 24px; }
192  .run-dialog-entry {
193    width: 20em;
194    margin-bottom: 6px;
195  }
196  .run-dialog-error-box {
197    color: $error_color;
198    padding-top: 16px;
199    spacing: 6px;
200  }
201  .run-dialog-button-box { padding-top: 1em; }
202  .run-dialog-label {
203    @include fontsize($font-size + 1.1);
204    font-weight: bold;
205    color: darken($osd_fg_color,10%);
206    padding-bottom: .4em;
207  }
208
209  .run-dialog-description {
210    color: $fg_color;
211  }
212
213}
214
215  .mount-dialog-subject,
216  .end-session-dialog-subject { //this should be a generic header class
217    @include fontsize($font-size * 1.3);
218  }
219
220/* Message Dialog */
221  .message-dialog-main-layout {
222    padding: 12px 20px 0;
223    spacing: 12px;
224  }
225
226  .message-dialog-content {
227    max-width: 28em;
228    spacing: 20px;
229  }
230
231  .message-dialog-icon {
232    min-width: 48px;
233    icon-size: 48px;
234  }
235
236  .message-dialog-title {
237    font-weight: bold;
238  }
239
240  .message-dialog-subtitle {
241    color: darken($fg_color,40%);
242    font-weight: bold;
243  }
244
245/* End Session Dialog */
246.end-session-dialog {
247  spacing: 42px;
248  border: none;
249  & .modal-dialog-linked-button:last-child {
250    background: $error_color;
251    &:hover, &:focus {
252      background: lighten($error_color, 3%);
253      color: #fff;
254    }
255  }
256}
257
258  .end-session-dialog-list {
259      padding-top: 20px;
260  }
261
262  .end-session-dialog-layout {
263    padding-left: 17px;
264    &:rtl { padding-right: 17px; }
265  }
266
267  .end-session-dialog-description {
268    width: 28em;
269    padding-bottom: 10px;
270    &:rtl {
271      text-align: right;
272    }
273  }
274
275  .end-session-dialog-warning {
276    width: 28em;
277    color: $warning_color;
278    padding-top: 6px;
279    &:rtl {
280      text-align: right;
281    }
282  }
283
284  .end-session-dialog-logout-icon {
285    //border: 2px solid #8b8b8b;
286    border-radius: 3px;
287    width: 48px;
288    height: 48px;
289    background-size: contain;
290  }
291
292  .end-session-dialog-shutdown-icon {
293    color: $error_color;
294    width: 48px;
295    height: 48px;
296  }
297
298  .end-session-dialog-inhibitor-layout {
299    spacing: 16px;
300    max-height: 200px;
301    padding-right: 65px;
302    padding-left: 65px;
303  }
304
305  .end-session-dialog-session-list,
306  .end-session-dialog-app-list {
307    spacing: 1em;
308  }
309
310  .end-session-dialog-list-header {
311    font-weight: bold;
312    &:rtl { text-align: right; }
313  }
314
315  .end-session-dialog-app-list-item,
316  .end-session-dialog-session-list-item {
317    spacing: 1em;
318  }
319
320  .end-session-dialog-app-list-item-name,
321  .end-session-dialog-session-list-item-name {
322    font-weight: bold;
323  }
324
325  .end-session-dialog-app-list-item-description {
326    color: darken($fg_color,5%);
327    font-size: 10pt;
328  }
329
330/* ShellMountOperation Dialogs */
331.shell-mount-operation-icon { icon-size: 48px; }
332
333  .mount-dialog {
334    spacing: 24px;
335
336    .message-dialog-title {
337      padding-top: 10px;
338      padding-left: 17px;
339      padding-bottom: 6px;
340      max-width: 34em;
341    }
342
343    .message-dialog-title:rtl {
344      padding-left: 0px;
345      padding-right: 17px;
346    }
347
348    .message-dialog-body {
349      padding-left: 17px;
350      width: 28em;
351    }
352
353    .message-dialog-body:rtl {
354      padding-left: 0px;
355      padding-right: 17px;
356    }
357  }
358
359  .mount-dialog-app-list {
360    max-height: 200px;
361    padding-top: 24px;
362    padding-left: 49px;
363    padding-right: 32px;
364  }
365
366  .mount-dialog-app-list:rtl {
367    padding-right: 49px;
368    padding-left: 32px;
369  }
370
371  .mount-dialog-app-list-item {
372    color: darken($fg_color,10%);
373    &:hover { color: $fg_color; }
374    &:ltr { padding-right: 1em; }
375    &:rtl { padding-left: 1em; }
376  }
377
378  .mount-dialog-app-list-item-icon {
379    &:ltr { padding-right: 17px; }
380    &:rtl { padding-left: 17px; }
381  }
382
383  .mount-dialog-app-list-item-name {
384    font-size: 10pt;
385  }
386
387
388/* Password or Authentication Dialog */
389
390.prompt-dialog {
391  //this is the width of the entire modal popup
392  width: 34em;
393  border: none;
394  border-radius: 2px;
395
396  .message-dialog-main-layout { spacing: 24px; padding: 10px; }
397  .message-dialog-content { spacing: 16px; }
398  .message-dialog-title { color: darken($osd_fg_color,25%); }
399}
400
401  .prompt-dialog-description:rtl {
402    text-align: right;
403  }
404
405  .prompt-dialog-password-box {
406    spacing: 1em;
407    padding-bottom: 1em;
408  }
409
410  .prompt-dialog-error-label {
411    font-size: 10pt;
412    color: $error_color;
413    padding-bottom: 8px;
414  }
415
416  .prompt-dialog-info-label {
417    font-size: 10pt;
418    padding-bottom: 8px;
419  }
420
421  .hidden {
422    color: rgba(0,0,0,0);
423  }
424
425  .prompt-dialog-null-label {
426    font-size: 10pt;
427    padding-bottom: 8px;
428  }
429
430
431/* Polkit Dialog */
432
433.polkit-dialog-user-layout {
434  padding-left: 10px;
435  spacing: 10px;
436  &:rtl {
437    padding-left: 0px;
438    padding-right: 10px;
439  }
440}
441
442  .polkit-dialog-user-root-label {
443    color: $warning_color;
444  }
445
446  .polkit-dialog-user-icon {
447    border-radius: 3px;
448    background-size: contain;
449    width: 48px;
450    height: 48px;
451  }
452
453/* Audio selection dialog */
454.audio-device-selection-dialog {
455  spacing: 30px;
456}
457
458  .audio-selection-content {
459    spacing: 20px;
460    padding: 24px;
461  }
462
463  .audio-selection-title {
464    font-weight: bold;
465    text-align: center;
466  }
467
468  .audio-selection-box {
469    spacing: 20px;
470  }
471
472  .audio-selection-device {
473    border: 1px solid $_bubble_borders_color;
474    border-radius: 12px;
475    &:active,&:hover,&:focus { background-color: $selected_bg_color; }
476  }
477
478  .audio-selection-device-box {
479    padding: 20px;
480    spacing: 20px;
481  }
482
483  .audio-selection-device-icon {
484    icon-size: 64px;
485  }
486
487/* Access Dialog */
488.access-dialog {
489  spacing: 30px;
490}
491
492/* Geolocation Dialog */
493.geolocation-dialog {
494  spacing: 30px;
495}
496
497/* Extension Dialog */
498.extension-dialog {
499  .message-dialog-main-layout { spacing: 24px; padding: 10px; }
500  .message-dialog-title { color: darken($osd_fg_color,25%); }
501}
502
503/* Inhibit-Shortcuts Dialog */
504.inhibit-shortcuts-dialog {
505  spacing: 30px;
506}
507
508/* Network Agent Dialog */
509
510.network-dialog-secret-table {
511  spacing-rows: 15px;
512  spacing-columns: 1em;
513}
514
515.keyring-dialog-control-table {
516  spacing-rows: 15px;
517  spacing-columns: 1em;
518}
519
520/* Popovers/Menus */
521
522.popup-menu {
523  min-width: 15em;
524  background-color: transparent;
525  color: $fg_color;
526  .popup-menu-arrow { } //defined globally in the TOP BAR
527  .popup-sub-menu {
528    background-color:  transparentize(darken($main_dark,57%), 0.8);
529    box-shadow: $depth6;
530  }
531
532  .popup-menu-content {
533    padding: 16px 0;
534    background-color: $bg_color;
535    border-radius: 5px;
536  }
537  .popup-menu-item {
538    spacing: 6px;
539    padding: 6px;
540
541    &:ltr { padding-right: 1.75em; padding-left: 0; }
542    &:rtl { padding-right: 0; padding-left: 1.75em; }
543
544    &:checked {
545      background-color: transparentize($selected_bg_color,0.1);
546      color: $selected_fg_color;
547      box-shadow: inset 0 1px 0px lighten($borders_color,5%);
548      font-weight: bold;
549      &:hover{
550        background-color: transparentize($selected_bg_color,0.1);
551        color: $selected_fg_color;
552      }
553    }
554    &.selected { background-color: transparentize($fg_color,0.9); color: $fg_color; }
555    &:active { background-color: $selected_bg_color; color: $selected_fg_color; }
556    &:insensitive { color: transparentize($fg_color,.5); }
557  }
558
559  .popup-inactive-menu-item { //all icons and other graphical elements
560    color: $fg_color;
561
562    &:insensitive { color: transparentize($fg_color,0.5); }
563  }
564  //.popup-status-menu-item { font-weight: normal;  color: pink; } //dunno what that is
565  &.panel-menu {
566    -boxpointer-gap: 4px;
567    margin-bottom: 1.75em;
568  }
569}
570
571  .popup-menu-ornament {
572    text-align: right;
573    width: 1.2em;
574  }
575  .popup-menu-boxpointer,
576  .candidate-popup-boxpointer {
577    -arrow-border-radius: 5px;
578    -arrow-background-color: $bg_color;
579    -arrow-border-width: 1px;
580    -arrow-border-color: $borders_color;
581    -arrow-base: 24px;
582    -arrow-rise: 11px;
583    -arrow-box-shadow: 0 1px 3px black; //dreaming. bug #689995
584  }
585
586  .popup-separator-menu-item {
587
588    &-separator {
589      //-margin-horizontal: 24px;
590      height: 1px; //not really the whole box
591      margin: 6px 64px;
592      background-color: transparent;
593      border-color: transparent;
594      border-bottom-width: 1px;
595      border-bottom-style: solid;
596    }
597    .popup-sub-menu & &-separator { //submenu separators
598      margin: 0 64px 0 32px;
599      background: transparent;
600    }
601  }
602
603
604// Background menu
605.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; }
606
607/* fallback menu
608- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
609  app menu inside the main app window itself rather than the top bar
610*/
611
612
613/* OSD */
614.osd-window {
615  text-align: center;
616  font-weight: bold;
617  spacing: 1em;
618  margin: 32px;
619  min-width: 64px;
620  min-height: 64px;
621
622  .osd-monitor-label { font-size: 3em; }
623  .level {
624    height: 0.4em;
625    border-radius: 0.3em;
626    color: $osd_fg_color;
627    border: 1px solid $borders_color;
628
629    -barlevel-height: 0.4em;
630    -barlevel-background-color: transparentize(darken($main_dark,15%),0.5);
631    -barlevel-active-background-color: $selected_bg_color;
632    -barlevel-overdrive-color: $red;
633    -barlevel-overdrive-separator-width: 0.2em;
634  }
635  .level-bar {
636    background-color: $selected_bg_color;
637    border-radius: 0.3em;
638  }
639}
640
641/* Pad OSD */
642.pad-osd-window {
643    padding: 32px;
644    background-color: transparentize(black, 0.2);
645
646  .pad-osd-title-box { spacing: 12px; }
647  .pad-osd-title-menu-box { spacing: 6px; }
648}
649
650.combo-box-label {
651    width: 15em;
652}
653
654/* App Switcher */
655.switcher-popup {
656  padding: 8px;
657  spacing: 16px;
658}
659
660.osd-window,
661.resize-popup,
662.switcher-list {
663  @extend %osd-panel;
664}
665
666  .switcher-list-item-container { spacing: 8px;  }
667
668  .switcher-list .item-box {
669    padding: 8px;
670    border-radius: 4px;
671  }
672
673  .switcher-list .item-box:outlined {
674    padding: 6px;
675    border: 2px solid darken($borders_color,10%);
676  }
677
678  .switcher-list .item-box:selected {
679    background-color: $selected_bg_color;
680    color: $selected_fg_color;
681  }
682
683  .switcher-list .thumbnail-box {
684    padding: 2px;
685    spacing: 4px;
686  }
687
688  .switcher-list .thumbnail {
689    width:  256px;
690  }
691
692  .switcher-list .separator {
693    width: 1px;
694    background: $borders_color;
695  }
696
697  .switcher-arrow {
698    border-color: rgba(0,0,0,0);
699    color: transparentize($fg_color,0.2);
700    &:highlighted {
701      color: $fg_color;
702    }
703  }
704
705  .input-source-switcher-symbol {
706    font-size: 34pt;
707    width: 96px;
708    height: 96px;
709  }
710
711/* Window Cycler */
712.cycler-highlight { border: 5px solid $selected_bg_color; }
713
714/* Workspace Switcher */
715.workspace-switcher-group { padding: 12px; }
716
717  .workspace-switcher-container {
718    @extend %osd-panel;
719  }
720
721  .workspace-switcher {
722    background: transparent;
723    border: 0px;
724    border-radius: 0px;
725    padding: 0px;
726    spacing: 8px;
727  }
728
729  .ws-switcher-active-up,
730  .ws-switcher-active-down,
731  .ws-switcher-active-left,
732  .ws-switcher-active-right {
733    height: 50px;
734    background-color: $selected_bg_color;
735    color: $selected_fg_color;
736    //background-image: url("resource:///org/gnome/shell/theme/assets/ws-switch-arrow-up.png");
737    background-size: 32px;
738    border-radius: 8px;
739    border-color: $selected_bg_color;
740  }
741  .ws-switcher-active-up {
742    background-image: url("assets/ws-switch-arrow-up.png"); }
743
744  .ws-switcher-active-down {
745    background-image: url("assets/ws-switch-arrow-down.png"); }
746
747  .ws-switcher-box {
748    height: 50px;
749    border: 1px solid transparentize($osd_fg_color,0.9);
750    background: darken($_bubble_bg_color, 10%);
751    border-radius: 8px;
752  }
753
754%osd-panel {
755  color: $_bubble_fg_color;
756  background-color: $_bubble_bg_color;
757  border: 1px solid $borders_color;
758  box-shadow: 0px 0px 5px $borders_color;
759  border-radius: 5px;
760  padding: 12px;
761}
762
763/* Tiled window previews */
764.tile-preview {
765  background-color: transparentize($selected_bg_color,0.5);
766  border: 1px solid $selected_bg_color;
767}
768
769  .tile-preview-left.on-primary {
770    border-radius: $corner-radius $corner-radius 0 0;
771  }
772
773  .tile-preview-right.on-primary {
774    border-radius: 0 $corner-radius 0 0;
775  }
776
777  .tile-preview-left.tile-preview-right.on-primary {
778    border-radius: $corner-radius $corner-radius 0 0;
779  }
780
781/* TOP BAR */
782
783#panel {
784  background-gradient-direction: none;
785  background-color: $topbar_bg_color;
786  /* transition from solid to transparent */
787  transition-duration: 500ms;
788  font-weight: bold;
789  height: 1.86em;
790  padding: 0px 0px;
791
792  &.unlock-screen,
793  &.login-screen,
794  &.lock-screen {
795    background-color: transparent;
796  }
797
798  #panelLeft, #panelCenter { // spacing between activities<>app menu and such
799    spacing: 4px;
800  }
801
802  .panel-corner {
803    -panel-corner-radius: 0px;
804    -panel-corner-background-color: rgba(0, 0, 0, 0.2);
805    -panel-corner-border-width: 2px;
806    -panel-corner-border-color: transparent;
807
808    &:active, &:overview, &:focus {
809      -panel-corner-border-color: lighten($selected_bg_color,5%);
810    }
811
812    &.lock-screen, &.login-screen, &.unlock-screen {
813      -panel-corner-radius: 0;
814      -panel-corner-background-color: transparent;
815      -panel-corner-border-color: transparent;
816    }
817  }
818
819  .panel-button {
820    -natural-hpadding: 12px;
821    -minimum-hpadding: 6px;
822    font-weight: bold;
823    color: $topbar_color;
824    transition-duration: 100ms;
825
826    .app-menu-icon {
827      -st-icon-style: symbolic;
828      margin-left: 4px;
829      margin-right: 4px;
830      //dimensions of the icon are hardcoded
831    }
832
833    &:hover {
834      background: lighten($topbar_bg_color, 10%);
835      color: lighten($topbar_color, 10%);
836    }
837
838    &:active, &:overview, &:focus, &:checked {
839      // Trick due to St limitations. It needs a background to draw
840      // a box-shadow
841      background: $selected_bg_color;
842      box-shadow: inset 0 -2px 0px lighten($selected_bg_color,5%);
843      color: #fff;
844    }
845
846    .system-status-icon { icon-size: 1.09em; padding: 0 5px; }
847    .unlock-screen &,
848    .login-screen &,
849    .lock-screen & {
850      color: lighten($fg_color, 10%);
851      &:focus, &:hover, &:active { color: lighten($fg_color, 10%); }
852    }
853
854    // Remove default bottom border
855    &.clock-display {
856      &:active, &:overview, &:focus, &:checked {
857        box-shadow: none;
858        .clock {
859          box-shadow: none;
860        }
861      }
862    }
863  }
864
865  .panel-status-indicators-box,
866  .panel-status-menu-box {
867    spacing: 2px;
868  }
869
870  // spacing between power icon and (optional) percentage label
871  .power-status.panel-status-indicators-box {
872    spacing: 0;
873  }
874
875  .screencast-indicator { color: $warning_color; }
876
877  &.solid {
878    background-color: $dracula;
879    /* transition from transparent to solid */
880    transition-duration: 300ms;
881
882    .panel-corner {
883      -panel-corner-background-color: black;
884    }
885    .system-status-icon,
886    .app-menu-icon > StIcon,
887    .popup-menu-arrow {
888      icon-shadow: none;
889    }
890  }
891}
892
893  // calendar popover
894  #calendarArea {
895    padding: 0.75em 1.0em;
896  }
897
898  .calendar {
899    margin-bottom: 1em;
900  }
901
902  .calendar, .world-clocks-button, .weather-button, .events-button {
903    background: transparent;
904    border: none;
905  }
906
907    .calendar,
908    .datemenu-today-button,
909    .datemenu-displays-box,
910    .message-list-sections {
911      margin: 0 1.5em;
912    }
913
914    .datemenu-calendar-column { spacing: 0.5em; }
915    .datemenu-displays-section { padding-bottom: 3em; }
916    .datemenu-displays-box { spacing: 1em; }
917
918    .datemenu-calendar-column {
919      border: 0 solid transparent;
920      &:ltr { border-left-width: 1px; }
921      &:rtl { border-right-width: 1px; }
922    }
923
924    .datemenu-today-button,
925    .world-clocks-button,
926    .weather-button,
927    .events-section-title,
928    .message-list-section-title,
929    .events-button {
930      border-radius: 4px;
931      color: $fg_color;
932      padding: .4em;
933    }
934
935    .message-list-section-list:ltr {
936      padding-left: .4em;
937    }
938
939    .message-list-section-list:rtl {
940      padding-right: .4em;
941    }
942
943    .datemenu-today-button,
944    .world-clocks-button,
945    .weather-button,
946    .events-section-title,
947    .message-list-section-title,
948    .events-button {
949      &:hover,&:focus { background-color: lighten($bg_color,5%); }
950      &:active {
951        color: lighten($selected_fg_color,5%);
952        background-color: $selected_bg_color;
953      }
954    }
955
956    .datemenu-today-button .day-label {
957    }
958
959    .datemenu-today-button .date-label {
960      font-size: 1.5em;
961    }
962
963    .world-clocks-header,
964    .weather-header,
965    .events-section-title,
966    .message-list-section-title,
967    .events-title {
968      color: darken($fg_color, 40%);
969      font-weight: bold;
970    }
971
972    .events-button .event-time {
973      color: darken($fg_color, 4%);
974    }
975
976    .world-clocks-grid {
977      spacing-rows: 0.4em;
978    }
979
980    .weather-box {
981      spacing: 0.4em;
982    }
983
984    .calendar-month-label {
985      color: darken($fg_color,5%);
986      font-weight: bold;
987      padding: 8px 0;
988      &:focus {}
989    }
990
991    .pager-button {
992      color: white;
993      background-color: transparent;
994      width: 32px;
995      border-radius: 4px;
996      &:hover, &:focus { background-color: transparentize($fg_color,0.95); }
997      &:active { background-color: transparentize($bg_color,0.95); }
998    }
999
1000      .calendar-change-month-back { //arrow back
1001        background-image: url("assets/calendar-arrow-left.svg");
1002        &:rtl { background-image: url("assets/calendar-arrow-right.svg"); }
1003      }
1004      .calendar-change-month-forward { //arrow foreward
1005        background-image: url("assets/calendar-arrow-right.svg");
1006        &:rtl { background-image: url("assets/calendar-arrow-left.svg"); }
1007      }
1008
1009      .calendar-change-month-back StIcon,
1010      .calendar-change-month-forward StIcon {
1011        color:darken($fg_color, 7%);
1012      }
1013
1014    .calendar-day-base {
1015      font-size: 80%;
1016      text-align: center;
1017      width: 2.4em; height: 2.4em;
1018      padding: 0.1em;
1019      margin: 2px;
1020      border-radius: 1.4em;
1021      color: $fg_color;
1022      &:hover,&:focus { background-color: lighten($bg_color,5%); }
1023      &:active,&:selected {
1024        color: lighten($selected_fg_color,5%);
1025        background-color: $selected_bg_color;
1026        border-color: transparent; //avoid jumparound due to today
1027      }
1028      &.calendar-day-heading {  //day of week heading
1029        color: darken($fg_color,40%);
1030        margin-top: 1em;
1031        font-size: 70%;
1032      }
1033    }
1034      .calendar-day { //border collapse hack - see calendar.js
1035        border-width: 0;
1036      }
1037      .calendar-day-top { border-top-width: 1px; }
1038      .calendar-day-left { border-left-width: 1px; }
1039      .calendar-work-day {
1040
1041      }
1042      .calendar-nonwork-day {
1043        color: $insensitive_fg_color;
1044      }
1045      .calendar-today {
1046        font-weight: bold;
1047        //color: lighten($fg_color,10%);
1048        //background-color: darken($bg_color,5%);
1049        border: 1px solid transparentize($borders_color,0.5);
1050      }
1051      .calendar-day-with-events {
1052        color: lighten($fg_color,10%);
1053        font-weight: bold;
1054        background-image: url("assets/calendar-today.svg");
1055      }
1056      .calendar-other-month-day {
1057        color: $insensitive_fg_color;
1058        opacity: 0.5;
1059      }
1060      .calendar-week-number {
1061        font-size: 70%;
1062        font-weight: bold;
1063        width: 2.3em; height: 1.8em;
1064        border-radius: 2px;
1065        padding: 0.5em 0 0;
1066        margin: 6px;
1067        background-color: transparentize($fg_color,0.7);
1068        color: $bg_color;
1069      }
1070
1071      /* Message list */
1072      .message-list {
1073        width: 31.5em;
1074        .message-title, .message-content, .message-body {
1075          color: darken($fg_color, 5%);
1076        }
1077      }
1078
1079        .message-list-clear-button.button {
1080         // background-color: transparent;
1081          border: 1px solid $borders_color;
1082          box-shadow: none;
1083          &:hover,&:focus { background-color: lighten($bg_color,5%); }
1084          margin: 1.5em 1.5em 0;
1085        }
1086
1087        .message-list-sections {
1088          spacing: 1em;
1089        }
1090
1091        .message-list-section,
1092        .message-list-section-list {
1093          spacing: 0.4em;
1094        }
1095        .message-list-section-close{
1096          & > StIcon {
1097            icon-size: 16px;
1098            border-radius: 16px;
1099            padding: 8px;
1100            color: $fg_color;
1101            background-color: transparent;
1102          }
1103          &:hover > StIcon,
1104          &:focus > StIcon
1105          &:active > StIcon{
1106            color: $red;
1107            background: transparent;
1108          }
1109        }
1110
1111        .message {
1112          &:hover,&:focus {
1113            background-color: lighten($bg_color,2%);
1114            box-shadow: 3px 0px 0px 0px $selected_bg_color inset;
1115           }
1116          border: 1px solid $borders_color;
1117          border-radius: 3px;
1118          background: darken($bg_color, 0.7%);
1119          box-shadow: none;
1120        }
1121
1122          .message-icon-bin {
1123            padding: 10px 3px 10px 10px;
1124            &:rtl { padding: 10px 10px 10px 3px; }
1125          }
1126
1127          .message-icon-bin > StIcon {
1128            icon-size: 16px;
1129            -st-icon-style: symbolic;
1130          }
1131
1132          .message-secondary-bin {
1133            padding: 0 12px;
1134          }
1135
1136          .message-secondary-bin > .event-time {
1137            color: darken($fg_color, 15%);
1138            font-size: 0.7em;
1139            /* HACK: the label should be baseline-aligned with a 1em label,
1140                     fake this with some bottom padding */
1141            padding-bottom: 0.13em;
1142
1143          }
1144
1145          .message-secondary-bin > StIcon {
1146            icon-size: 16px;
1147          }
1148
1149          .message-title {
1150            //color: darken($fg_color,5%);
1151
1152          }
1153
1154          .message-content {
1155          //  color: darken($fg_color,20%);
1156            padding: 10px;
1157            *:hover > StIcon,
1158            *:focus > StIcon, {
1159              color: $red;
1160            }
1161          }
1162
1163          .message-media-control {
1164            padding: 12px;
1165            color: darken($fg_color, 20%);
1166
1167            &:last-child:ltr { padding-right: 18px; }
1168            &:last-child:rtl { padding-left: 18px; }
1169            &:hover { color: $fg_color; }
1170            &:insensitive { color: darken($fg_color,40%); }
1171          }
1172
1173          .media-message-cover-icon {
1174            icon-size: 48px !important;
1175            &.fallback {
1176              color: lighten($bg_color,10%);
1177              background-color: $bg_color;
1178              border: 2px solid $bg_color;
1179              border-radius: 2px;
1180              icon-size: 16px;
1181              padding: 8px; }
1182          }
1183
1184/* World clocks */
1185.world-clocks-button {
1186
1187  // city label
1188  .world-clocks-city {
1189    color: $fg_color;
1190    font-weight: normal;
1191  }
1192
1193  // timezone time
1194  .world-clocks-time {
1195    font-weight: bold;
1196    color: $fg_color;
1197    font-feature-settings: "lnum";
1198    text-align: right;
1199  }
1200
1201  // timezone offset label
1202  .world-clocks-timezone {
1203    color: darken($fg_color,20%);
1204    font-feature-settings: "tnum";
1205  }
1206}
1207
1208
1209/* Weather */
1210.weather-button {
1211
1212  .weather-header {
1213    color: darken($fg_color, 10%);
1214    font-weight: bold;
1215
1216    &.location {
1217      font-weight: normal;
1218    }
1219  }
1220
1221  .weather-forecast-time {
1222    color: darken($fg_color, 10%);
1223    font-feature-settings: "tnum";
1224    font-weight: normal;
1225    padding-top: 0.2em;
1226    padding-bottom: 0.4em;
1227  }
1228
1229  .weather-forecast-temp {
1230    font-weight: bold;
1231  }
1232}
1233
1234  // a little unstructured mess:
1235
1236  .system-switch-user-submenu-icon.user-icon {
1237    icon-size: 20px;
1238    padding: 0 2px;
1239  }
1240  .system-switch-user-submenu-icon.default-icon {
1241    icon-size: 16px;
1242    padding: 0 4px;
1243  }
1244
1245  #appMenu {
1246    spinner-image: url("assets/process-working.svg");
1247    spacing: 4px;
1248
1249    .label-shadow { color: transparent; }
1250  }
1251
1252  .aggregate-menu {
1253    min-width: 21em;
1254    .popup-menu-icon { padding: 0 4px; }
1255  }
1256
1257  .system-menu-action {
1258
1259    color: $fg_color;
1260
1261    border-radius: 32px; /* wish we could do 50% */
1262    border: 1px solid $borders_color;
1263    background: darken($bg_color, 3%);
1264    padding: 13px;
1265
1266    &:hover, &:focus {
1267      border: 1px solid $selected_bg_color;
1268      color: $selected_bg_color;
1269      background: transparent;
1270    }
1271    &:active { background-color: darken($selected_bg_color, 10%); color: $selected_fg_color;}
1272
1273    & > StIcon { icon-size: 16px; }
1274  }
1275
1276//Activities Ripples
1277.ripple-box {
1278  width: 52px;
1279  height: 52px;
1280  background-image: url("assets/corner-ripple-ltr.png");
1281  background-size: contain;
1282}
1283
1284.ripple-box:rtl {
1285  background-image: url("assets/corner-ripple-rtl.png");
1286}
1287
1288// not really top bar only
1289.popup-menu-arrow { width: 16px; height: 16px; }
1290.popup-menu-icon { icon-size: 1.09em; }
1291
1292//close buttons
1293
1294.window-close {
1295  background-color: transparent;
1296  background-image: url("assets/close-window.svg");
1297  background-size: 32px;
1298  border: none;
1299  box-shadow: none;
1300  color: transparent;
1301  height: 32px;
1302  width: 32px;
1303}
1304  .window-close {
1305    -shell-close-overlap: 16px;
1306    &:rtl { -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5); }
1307  }
1308
1309/* NETWORK DIALOGS */
1310
1311.nm-dialog {
1312  max-height: 34em;
1313  min-height: 31em;
1314  min-width: 32em;
1315}
1316
1317  .nm-dialog-content {
1318    spacing: 20px;
1319    padding: 24px;
1320  }
1321  .nm-dialog-header-hbox { spacing: 10px; }
1322  .nm-dialog-airplane-box { spacing: 12px; }
1323
1324  .nm-dialog-airplane-headline {
1325    font-weight: bold;
1326    text-align: center;
1327  }
1328
1329  .nm-dialog-airplane-text { color: $fg_color; }
1330  .nm-dialog-header-icon { icon-size: 32px; }
1331  .nm-dialog-scroll-view { border: 2px solid $borders_color; background: transparent; }
1332  .nm-dialog-header { font-weight: bold; }
1333
1334  .nm-dialog-item {
1335    font-size: 110%;
1336    border-bottom: 1px solid $borders_color;
1337    padding: 12px;
1338    spacing: 20px;
1339  }
1340
1341  .nm-dialog-item:selected {
1342    background-color: $selected_bg_color;
1343    color: $selected_fg_color;
1344  }
1345
1346  .nm-dialog-icons { spacing: .5em; }
1347  .nm-dialog-icon { icon-size: 16px; }
1348  .no-networks-label { color: #999999; }
1349  .no-networks-box { spacing: 12px; }
1350
1351/* OVERVIEW */
1352
1353#overview {
1354  spacing: 24px; //
1355}
1356
1357#overview.cosmic-solid-bg {
1358  background-color: $topbar_bg_color !important;
1359}
1360
1361.overview-controls {
1362  padding-bottom: 32px;
1363}
1364
1365  .window-picker { //container around window thumbnails
1366    -horizontal-spacing: 16px;
1367    -vertical-spacing: 16px;
1368    padding: 0 16px 16px;
1369
1370    &.external-monitor { padding: 16px; }
1371  }
1372
1373  .window-clone-border {
1374    border: 4px solid transparentize($selected_bg_color, .7);
1375    border-radius: 0px;
1376    // For window decorations with round corners we can't match
1377    // the exact shape when the window is scaled. So apply a shadow
1378    // to fix that case
1379    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
1380  }
1381  .window-caption {
1382    spacing: 20px;
1383    color: $fg_color;
1384    background-color: transparentize($osd_bg_color,.3);
1385    border-radius: 2px;
1386    padding: 4px 8px;
1387  }
1388
1389  //search entry
1390  .search-entry {
1391    width: 320px;
1392    padding: 9px;
1393    border-radius: 2px;
1394    border: none;
1395    color: $fg_color;
1396    background-color: transparentize($bg_color, 0.4);
1397    box-shadow: $depth;
1398    &:focus {
1399      border-width: 0;
1400      color: $fg_color;
1401      background-color: transparentize($bg_color, 0.2);
1402      box-shadow: $depth2;
1403    }
1404
1405    .search-entry-icon { icon-size: 1em; padding: 0 4px; color: transparentize($fg_color,.3); }
1406
1407    &:hover, &:focus {
1408      background-color: transparentize($bg_color, 0.2);
1409      .search-entry-icon { color: $fg_color; }
1410    }
1411  }
1412
1413  //search results
1414
1415  %search-section-content-item {
1416    &:focus,
1417    &:hover,
1418    &:selected {
1419      background-color: transparentize($osd_fg_color, .9);
1420      transition-duration: 200ms;
1421    }
1422
1423    &:active,
1424    &:checked {
1425      background-color: transparentize(darken($osd_bg_color, 10%), .1);
1426    }
1427  }
1428
1429  #searchResultsBin {
1430    max-width: 1000px;
1431  }
1432
1433  #searchResultsContent {
1434    padding-left: 20px;
1435    padding-right: 20px;
1436    spacing: 16px;
1437  }
1438
1439  .search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
1440
1441  .search-section-content {
1442    background-color: transparent;
1443    border-radius: 0;
1444    border: none;
1445    box-shadow: none;
1446    // This is the space between the provider icon and the results container
1447    spacing: 32px;
1448  }
1449
1450  .search-statustext { // "no results"
1451    @extend %status_text;
1452  }
1453  .list-search-results { spacing: 3px; }
1454
1455  .search-section-separator { height: 2px; background-color: $gray; }
1456
1457  .list-search-result-content { spacing: 30px; }
1458  .list-search-result-title { color: lighten($topbar_color,5%); spacing: 12px; }
1459  .list-search-result-description { color: transparentize(lighten($topbar_color,15%), 0.5); }
1460  .list-search-provider-details { width: 150px; color: lighten($topbar_color,5%); margin-top: 0.24em; }
1461  .list-search-provider-content { spacing: 20px; }
1462  .search-provider-icon { padding: 15px; }
1463
1464  //Icon tile
1465  .search-provider-icon,
1466  .list-search-result {
1467    @extend %search-section-content-item;
1468  }
1469
1470
1471  /* DASHBOARD */
1472
1473  #dash {
1474    font-size: 9pt;
1475    color: $topbar_color;
1476    background-color: $topbar_bg_color;
1477    padding: 6px 0;
1478    border: 1px solid $borders_color;
1479    border-left: 0px;
1480    border-radius: 0px 5px 5px 0px;
1481
1482    &:rtl {
1483      border-radius: 9px 0 0 9px;
1484    }
1485
1486    .placeholder {
1487      background-image: url("assets/dash-placeholder.svg");
1488      background-size: contain;
1489      height: 24px;
1490    }
1491
1492    .empty-dash-drop-target {
1493      width: 24px;
1494      height: 24px;
1495    }
1496
1497  }
1498
1499  .dash-item-container > StWidget {
1500    padding: 4px 8px;
1501  }
1502
1503  .dash-label { //osd tooltip
1504    border-radius: 7px;
1505    padding: 4px 12px;
1506    color: $topbar_color;
1507    background-color: $topbar_bg_color;
1508    text-align: center;
1509    -x-offset: 8px;
1510  }
1511
1512  /* App Vault/Grid */
1513  .icon-grid {
1514    spacing: 30px;
1515    -shell-grid-horizontal-item-size: 136px;
1516    -shell-grid-vertical-item-size: 136px;
1517
1518    .overview-icon { icon-size: 96px; }
1519  }
1520  //.app-display { spacing: 20px; }
1521
1522  .system-action-icon {
1523    background-color: black;
1524    color: white;
1525    border-radius: 99px;
1526    icon-size: 48px;
1527  }
1528
1529  .app-view-controls { //favorties | all toggle container
1530    padding-bottom: 32px;
1531
1532  }
1533  .app-view-control { //favorties | all toggle button
1534    padding: 4px 32px;
1535    &:checked { @include button(active); }
1536    &:first-child {
1537      border-right-width: 0;
1538      border-radius: 3px 0 0 3px;
1539    }
1540    &:last-child {
1541     border-radius: 0 3px 3px 0;
1542    }
1543  }
1544
1545  .app-well-app,
1546  .app-well-app.app-folder,
1547  .show-apps,
1548  .grid-search-result {
1549
1550    border: none;
1551    & .overview-icon {
1552      @extend %icon_tile;
1553    }
1554    &:active .overview-icon,
1555    &:checked .overview-icon {
1556      background-color: transparentize(darken($osd_bg_color,7%),.1);
1557      box-shadow: inset $depth2;
1558      color: $fg_color;
1559    }
1560    &:hover .overview-icon,
1561    &:focus .overview-icon,
1562    &:selected .overview-icon {
1563      background-color: transparentize($bg_color,.5);
1564      transition-duration: 0ms;
1565      border-image: none;
1566      background-image: none;
1567    }
1568
1569  }
1570
1571  .app-well-app-running-dot { //running apps indicator
1572    width: 4px; height: 4px;
1573    background-color: $selected_bg_color;
1574    border-radius: 10px !important;
1575    box-shadow: 0px 0px 5px 4px transparentize($selected_bg_color,0.2);
1576    margin-bottom: 0px;
1577  }
1578
1579  %icon_tile {
1580    color: $selected_fg_color;
1581    border-radius: 2px;
1582    padding: 7px 6px;
1583    border: none;
1584    transition-duration: 100ms;
1585    text-align: center;
1586    box-shadow: $depth;
1587  }
1588
1589  .app-well-app.app-folder > .overview-icon {
1590    background-color: transparentize($osd_bg_color,.6);
1591  }
1592  .show-apps .show-apps-icon {
1593    color: $topbar_color;
1594  }
1595  .show-apps:checked .show-apps-icon,
1596  .show-apps:focus .show-apps-icon {
1597    color: $fg_color;
1598    transition-duration: 100ms;
1599  }
1600
1601
1602  // Collections
1603  .app-folder-popup { //expanded collection
1604    -arrow-border-radius: 8px;
1605    -arrow-background-color: transparentize($bg_color,0.5);
1606    -arrow-base: 24px;
1607    -arrow-rise: 11px;
1608  }
1609  .app-folder-popup-bin { padding: 5px; background: transparentize($bg_color,.5);;}
1610  .app-folder-icon {
1611    padding: 5px;
1612    spacing-rows: 5px;
1613    spacing-columns: 5px;
1614  }
1615
1616  .page-indicator {
1617    padding: 15px 20px;
1618
1619    .page-indicator-icon {
1620      width: 12px;
1621      height: 12px;
1622      border-radius: 12px;
1623      background-image: none;
1624      background-color: rgba(255, 255, 255, 0.3);
1625    }
1626
1627    &:hover .page-indicator-icon {
1628      background-image: none;
1629      background-color: rgba(255, 255, 255, 0.5);
1630    }
1631    &:active .page-indicator-icon {
1632      background-image: none;
1633      background-color: rgba(255, 255, 255, 0.7);
1634    }
1635    &:checked .page-indicator-icon{
1636      background-image: none;
1637      background-color: #FFFFFF;
1638      transition-duration: 0s;
1639    }
1640  }
1641
1642  .no-frequent-applications-label { @extend %status_text; }
1643
1644  .app-well-app > .overview-icon.overview-icon-with-label,
1645  .grid-search-result .overview-icon.overview-icon-with-label {
1646    padding: 10px 8px 5px 8px;
1647    spacing: 4px;
1648  }
1649
1650  // Workspace pager
1651  .workspace-thumbnails { //container ala dash
1652    @extend %overview-panel;
1653    visible-width: 32px; //amount visible before hover
1654    spacing: 11px;
1655    padding: 8px;
1656    border-radius: 0;
1657    //border-width: 1px 0 1px 1px; //fixme: can't have non unoform borders :(
1658    &:rtl { border-radius: 0;}
1659  }
1660  .workspace-thumbnail-indicator {
1661    border: 4px solid transparentize($selected_bg_color, .2);
1662    box-shadow: $depth;
1663    padding: 0;
1664  }
1665
1666  //Some hacks I don't even
1667  .search-display > StBoxLayout,
1668  .all-apps,
1669  .frequent-apps > StBoxLayout {
1670    // horizontal padding to make sure scrollbars or dash don't overlap content
1671    padding: 0px 88px 10px 88px;
1672  }
1673
1674%overview-panel {
1675  color:  $_bubble_fg_color;
1676  background-color: transparent;
1677  border: none;
1678}
1679
1680%status_text {
1681  font-size: 2em;
1682  font-weight: bold;
1683  color: $fg_color;
1684}
1685
1686/* NOTIFICATIONS & MESSAGE TRAY */
1687
1688  .url-highlighter { link-color: lighten($selected_bg_color,10%); }
1689
1690  // Banners
1691  .notification-banner {
1692    font-size: 11pt;
1693    width: 34em;
1694    margin: 5px;
1695    border-radius: 3px;
1696    color: $topbar_color;
1697    background-color: $bg_color;
1698    border: 1px solid $borders_color;
1699    box-shadow: 0 1px 4px black;
1700    &:hover { background-color: transparentize($bg_color, 0.04); }
1701    &:focus { background-color: transparentize($bg_color, 0.04); }
1702    *{ color: $topbar_color; }
1703
1704    .notification-icon { padding: 5px; }
1705    .notification-content { padding: 5px; spacing: 5px; }
1706    .secondary-icon { icon-size: 1.09em; }
1707    .notification-actions {
1708      background-color: darken($bg_color, 2%);
1709      padding-top: 2px;
1710      spacing: 1px;
1711    }
1712    .notification-button {
1713      padding: 5px;
1714      background-color: transparentize($bg_color, 0.1);
1715      box-shadow: none;
1716      &:first-child { border-radius: 0 0 0 3px; }
1717      &:last-child { border-radius: 0 0 3px 0; }
1718      &:hover, &focus { background-color: darken($bg_color,2%); color: $selected_bg_color;}
1719    }
1720  }
1721  .summary-source-counter {
1722    font-size: 10pt;
1723    font-weight: bold;
1724    height: 1.6em; width: 1.6em;
1725    -shell-counter-overlap-x: 3px;
1726    -shell-counter-overlap-y: 3px;
1727    background-color: $selected_bg_color;
1728    color: $selected_fg_color;
1729    border: 2px solid $osd_fg_color;
1730    box-shadow: 0 2px 2px rgba(0,0,0,0.5);
1731    border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
1732  }
1733
1734  .secondary-icon { icon-size: 1.09em; }
1735
1736  //chat bubbles
1737  .chat-body { spacing: 5px; }
1738  .chat-response { margin: 5px; }
1739  .chat-log-message { color: darken($fg_color,10%); }
1740  .chat-new-group { padding-top: 1em; }
1741  .chat-received {
1742    padding-left: 4px;
1743    &:rtl { padding-left: 0px; padding-right: 4px; }
1744  }
1745  .chat-sent {
1746    padding-left: 18pt;
1747    color: darken($fg_color, 15%);
1748    &:rtl { padding-left: 0; padding-right: 18pt; }
1749  }
1750  .chat-meta-message {
1751    padding-left: 4px;
1752    font-size: 9pt;
1753    font-weight: bold;
1754    color: darken($fg_color,20%);
1755    &:rtl { padding-left: 0; padding-right: 4px; }
1756  }
1757
1758  //hotplug
1759  .hotplug-transient-box {
1760    spacing: 6px;
1761    padding: 2px 72px 2px 12px;
1762  }
1763    .hotplug-notification-item {
1764      padding: 2px 10px;
1765      &:focus { padding: 1px 71px 1px 11px; }
1766    }
1767
1768    .hotplug-notification-item-icon {
1769      icon-size: 24px;
1770      padding: 2px 5px;
1771    }
1772
1773    .hotplug-resident-box { spacing: 8px; }
1774
1775    .hotplug-resident-mount {
1776      spacing: 8px;
1777      border-radius: 4px;
1778      &:hover { background-color: transparentize($bg_color,0.7); }
1779    }
1780
1781    .hotplug-resident-mount-label {
1782      color: inherit;
1783      padding-left: 6px;
1784    }
1785
1786    .hotplug-resident-mount-icon {
1787      icon-size: 24px;
1788      padding-left: 6px;
1789    }
1790
1791    .hotplug-resident-eject-icon {
1792      icon-size: 16px;
1793    }
1794
1795    .hotplug-resident-eject-button {
1796      padding: 7px;
1797      border-radius: 5px;
1798      color: pink;
1799    }
1800
1801/* Eeeky things */
1802
1803//magnifier
1804
1805.magnifier-zoom-region {
1806  border: 2px solid $selected_bg_color;
1807  &.full-screen { border-width: 0; }
1808}
1809
1810//Keyboard
1811/* On-screen Keyboard */
1812
1813#keyboard {
1814    background-color: transparentize($osd_bg_color, 0.3);
1815}
1816
1817  .keyboard-layout {
1818    spacing: 10px;
1819    padding: 10px;
1820  }
1821
1822  .keyboard-row { spacing: 15px; }
1823
1824  .keyboard-key {
1825   @include button(normal);
1826    background-color: $base_color;
1827    min-height: 2em;
1828    min-width: 2em;
1829    font-size: 14pt;
1830    font-weight: bold;
1831    border-radius: 5px;
1832    &:focus { @include button(focus); }
1833    &:hover,&:checked { @include button(hover); }
1834    &:active { @include button(active);}
1835    &:grayed { //FIXME
1836      background-color: $osd_bg_color;
1837      color: $osd_fg_color;
1838      border-color: $osd_borders_color;
1839    }
1840  }
1841
1842  .keyboard-subkeys { //long press on a key popup
1843    color: white;
1844    padding: 5px;
1845    -arrow-border-radius: 10px;
1846    -arrow-background-color: transparentize($osd_bg_color, 0.3);
1847    -arrow-border-width: 2px;
1848    -arrow-border-color: $_bubble_borders_color;
1849    -arrow-base: 20px;
1850    -arrow-rise: 10px;
1851    -boxpointer-gap: 5px;
1852  }
1853
1854// IBus Candidate Popup
1855
1856.candidate-popup-content {
1857  padding: 0.5em;
1858  spacing: 0.3em;
1859}
1860
1861  .candidate-index {
1862    padding: 0 0.5em 0 0;
1863    color: darken($fg_color,10%);
1864  }
1865
1866  .candidate-box {
1867    padding: 0.3em 0.5em 0.3em 0.5em;
1868    border-radius: 4px;
1869    &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; }
1870  }
1871
1872  .candidate-page-button-box {
1873    height: 2em;
1874    .vertical & { padding-top: 0.5em; }
1875    .horizontal & { padding-left: 0.5em; }
1876  }
1877
1878  .candidate-page-button {
1879    padding: 4px;
1880  }
1881
1882  .candidate-page-button-previous { border-radius: 4px 0px 0px 4px; border-right-width: 0; }
1883  .candidate-page-button-next { border-radius: 0px 4px 4px 0px;  }
1884  .candidate-page-button-icon { icon-size: 1em; }
1885
1886/* Auth Dialogs & Screen Shield */
1887
1888.framed-user-icon {
1889  background-size: contain;
1890  border: 2px solid $osd_fg_color;
1891  color: $osd_fg_color;
1892  border-radius: 3px;
1893  &:hover {
1894    border-color: lighten($osd_fg_color,30%);
1895    color: lighten($osd_fg_color,30%);
1896  }
1897}
1898
1899// LOGIN DIALOG
1900
1901.login-dialog-banner-view {
1902  padding-top: 24px;
1903  max-width: 23em;
1904}
1905
1906.login-dialog {
1907  //reset
1908  border: none;
1909  background-color: transparent;
1910
1911  .modal-dialog-button-box { spacing: 3px; }
1912  .modal-dialog-button {
1913    padding: 3px 18px;
1914    &:default {
1915      @include button(normal,$c:$selected_bg_color);
1916      &:hover,&:focus { @include button(hover,$c:$selected_bg_color); }
1917      &:active { @include button(active,$c:$selected_bg_color); }
1918      &:insensitive { @include button(insensitive); }
1919
1920    }
1921  }
1922
1923}
1924
1925  .login-dialog-logo-bin { padding: 24px 0px; }
1926  .login-dialog-banner { color: darken($osd_fg_color,10%); }
1927  .login-dialog-button-box { spacing: 5px; }
1928  .login-dialog-message-warning { color: $warning_color; }
1929  .login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
1930  .login-dialog-user-selection-box { padding: 100px 0px; }
1931  .login-dialog-not-listed-label {
1932    padding-left: 2px;
1933    .login-dialog-not-listed-button:focus &,
1934    .login-dialog-not-listed-button:hover & {
1935      color: $osd_fg_color;
1936    }
1937  }
1938  .login-dialog-not-listed-label {
1939    font-size: 90%;
1940    font-weight: bold;
1941    color: darken($osd_fg_color,30%);
1942    padding-top: 1em;
1943  }
1944
1945  .login-dialog-user-list-view { -st-vfade-offset: 1em; }
1946  .login-dialog-user-list {
1947    spacing: 12px;
1948    padding: .2em;
1949    width: 23em;
1950    &:expanded .login-dialog-user-list-item:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
1951    &:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; }
1952  }
1953  .login-dialog-user-list-item {
1954    border-radius: 5px;
1955    padding: .2em;
1956    color: darken($osd_fg_color,30%);
1957    &:ltr { padding-right: 1em; }
1958    &:rtl { padding-left: 1em; }
1959    .login-dialog-timed-login-indicator {
1960      height: 2px;
1961      margin: 2px 0 0 0;
1962      background-color: $osd_fg_color;
1963    }
1964    &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
1965  }
1966
1967  .login-dialog-username,
1968  .user-widget-label {
1969    color: $osd_fg_color;
1970    font-size: 120%;
1971    font-weight: bold;
1972    text-align: left;
1973    padding-left: 15px;
1974  }
1975    .user-widget-label {
1976      &:ltr { padding-left: 18px; }
1977      &:rtl { padding-right: 18px; }
1978    }
1979
1980  .login-dialog-prompt-layout {
1981      padding-top: 24px;
1982      padding-bottom: 12px;
1983      spacing: 8px;
1984      width: 23em;
1985  }
1986
1987  .login-dialog-prompt-label {
1988      color: darken($osd_fg_color, 20%);
1989      font-size: 110%;
1990      padding-top: 1em;
1991  }
1992
1993  .login-dialog-session-list-button StIcon {
1994      icon-size: 1.25em;
1995  }
1996
1997  .login-dialog-session-list-button {
1998      color: darken($osd_fg_color,30%);
1999      &:hover,&:focus { color: $osd_fg_color; }
2000      &:active { color: darken($osd_fg_color, 50%); }
2001  }
2002
2003//SCREEN SHIELD
2004
2005.screen-shield-arrows {
2006    padding-bottom: 3em;
2007}
2008
2009.screen-shield-arrows Gjs_Arrow {
2010    color: white;
2011    width: 80px;
2012    height: 48px;
2013    -arrow-thickness: 12px;
2014    -arrow-shadow: 0 1px 1px rgba(0,0,0,0.4);
2015}
2016
2017.screen-shield-clock {
2018  color: white;
2019  text-shadow: 0px 1px 2px rgba(0,0,0,0.6);
2020  font-weight: bold;
2021  text-align: center;
2022  padding-bottom: 1.5em;
2023}
2024
2025.screen-shield-clock-time {
2026  font-size: 72pt;
2027  text-shadow: 0px 2px 2px rgba(0,0,0,0.4);
2028}
2029
2030.screen-shield-clock-date { font-size: 28pt; }
2031
2032.screen-shield-notifications-container {
2033  spacing: 6px;
2034  width: 30em;
2035  background-color: transparent;
2036  max-height: 500px;
2037  .summary-notification-stack-scrollview {
2038    padding-top: 0;
2039    padding-bottom: 0;
2040  }
2041
2042  .notification,
2043  .screen-shield-notification-source {
2044    padding: 12px 6px;
2045    border: 1px solid $_bubble_borders_color;
2046    background-color: transparentize($osd_bg_color,0.5);
2047    color: $_bubble_fg_color;
2048    border-radius: 4px;
2049  }
2050  .notification { margin-right: 15px; } //compensate for space allocated to the scrollbar
2051}
2052
2053
2054.screen-shield-notification-label {
2055  font-weight: bold;
2056  padding: 0px 0px 0px 12px;
2057}
2058
2059.screen-shield-notification-count-text { padding: 0px 0px 0px 12px; }
2060
2061#panel.lock-screen { background-color: transparentize($_bubble_bg_color, 0.5); }
2062
2063.screen-shield-background { //just the shadow, really
2064  background: black;
2065  box-shadow: 0px 2px 4px transparentize(black,0.6);
2066}
2067
2068#lockDialogGroup {
2069  background: #2e3436 url(resource:///org/gnome/shell/theme/noise-texture.png);
2070  background-repeat: repeat;
2071}
2072
2073#screenShieldNotifications {
2074  StButton#vhandle, StButton#hhandle {
2075    background-color: transparentize($bg_color,0.7);
2076    &:hover, &:focus { background-color: transparentize($bg_color,0.5); }
2077    &:active { background-color: transparentize($selected_bg_color,0.5); }
2078  }
2079}
2080
2081
2082// Looking Glass
2083#LookingGlassDialog {
2084  background-color: rgba(0,0,0,0.80);
2085  spacing: 4px;
2086  padding: 4px;
2087  border: 2px solid grey;
2088  border-radius: 4px;
2089  & > #Toolbar {
2090    border: 1px solid grey;
2091    border-radius: 4px;
2092  }
2093  .labels { spacing: 4px; }
2094  .notebook-tab {
2095    -natural-hpadding: 12px;
2096    -minimum-hpadding: 6px;
2097    font-weight: bold;
2098    color: #ccc;
2099    transition-duration: 100ms;
2100    padding-left: .3em;
2101    padding-right: .3em;
2102    &:hover {
2103      color: white;
2104      text-shadow: black 0px 2px 2px;
2105    }
2106    &:selected {
2107      border-bottom-width: 2px;
2108      border-color: lighten($selected_bg_color,5%);
2109      color: white;
2110      text-shadow: black 0px 2px 2px;
2111    }
2112  }
2113  StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
2114  StBoxLayout#ResultsArea { spacing: 4px; }
2115}
2116
2117  .lg-dialog {
2118    StEntry {
2119      selection-background-color: #bbbbbb;
2120      selected-color: #333333;
2121    }
2122    .shell-link {
2123      color: #999999;
2124      &:hover { color: #dddddd; }
2125     }
2126  }
2127
2128  .lg-completions-text {
2129      font-size: .9em;
2130      font-style: italic;
2131  }
2132
2133  .lg-obj-inspector-title {
2134      spacing: 4px;
2135  }
2136
2137  .lg-obj-inspector-button {
2138      border: 1px solid gray;
2139      padding: 4px;
2140      border-radius: 4px;
2141      &:hover { border: 1px solid #ffffff; }
2142  }
2143
2144  #lookingGlassExtensions { padding: 4px; }
2145
2146  .lg-extensions-list {
2147      padding: 4px;
2148      spacing: 6px;
2149  }
2150
2151  .lg-extension {
2152      border: 1px solid #6f6f6f;
2153      border-radius: 4px;
2154      padding: 4px;
2155  }
2156
2157  .lg-extension-name {
2158      font-weight: bold;
2159  }
2160
2161  .lg-extension-meta {
2162      spacing: 6px;
2163  }
2164
2165  #LookingGlassPropertyInspector {
2166    background: rgba(0, 0, 0, 0.8);
2167    border: 2px solid grey;
2168    border-radius: 4px;
2169    padding: 6px;
2170  }
2171