source: arc-theme/trunk/fuentes/arc-theme/common/gnome-shell/3.18/sass/_common.scss @ 2104

Last change on this file since 2104 was 2104, checked in by hectorgh, 3 years ago

updating theme

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