source: arc-theme/trunk/fuentes/arc-theme/common/cinnamon/sass/_common.scss @ 2104

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

updating theme

File size: 31.0 KB
Line 
1$asset_path: if($variant == 'dark', dark-assets, light-assets);
2
3//
4// Globals
5//
6$font-size: 9;
7$font-family: Futura Bk bt, sans, Sans-Serif;
8$_bubble_bg_color: opacify($osd_bg_color,0.25);
9$_bubble_fg_color: $osd_fg_color;
10$_bubble_borders_color: transparentize($osd_fg_color,0.8);
11
12stage {
13  font-family: $font-family;
14  @include fontsize($font-size);
15  color: $fg_color;
16}
17
18.label-shadow {
19  color: rgba(0, 0, 0, 0);
20}
21
22%reset_style {
23  background-color: transparent !important;
24  background-gradient-direction: none !important;
25  border: none !important;
26  border-radius: 0 !important;
27}
28
29//
30// Buttons
31//
32%button {
33  min-height: 20px;
34  padding: 5px 32px;
35  transition-duration: 0;
36
37  &, &:focus, &:hover, &:hover:focus, &:active, &:active:focus, &:insensitive {
38    border-radius: 2px;
39  }
40
41  @include button(normal);
42
43  &:focus { @include button(focus); }
44  &:hover { @include button(hover); }
45  &:hover:focus { @include button(focus-hover); }
46  &:active, &:active:focus { @include button(active); }
47  &:insensitive { @include button(insensitive); }
48}
49
50%osd_button {
51  min-height: 20px;
52  padding: 5px 32px;
53  transition-duration: 0;
54  border-radius: 2px;
55
56  @include button(osd);
57
58  &:hover { @include button(osd-hover); }
59  &:focus { color: $selected_bg_color; }
60  &:active { @include button(osd-active); }
61  &:insensitive { @include button(osd-insensitive); }
62}
63
64//
65// Entries
66//
67%entry {
68  padding: 7px;
69  caret-size: 1px;
70  selection-background-color: $selected_bg_color;
71  selected-color: $selected_fg_color;
72  transition-duration: 300ms;
73  border-radius: 3px;
74
75  @include entry(normal);
76
77  &:focus, &:hover { @include entry(focus); }
78  &:insensitive { @include entry(insensitive); }
79
80  StIcon.capslock-warning {
81    icon-size: 16px;
82    warning-color: $warning_color;
83    padding: 0 4px;
84  }
85}
86
87%osd_entry {
88  padding: 7px;
89  caret-size: 1px;
90  caret-color: $osd_fg_color;
91  selection-background-color: $selected_bg_color;
92  selected-color: $selected_fg_color;
93  transition-duration: 300ms;
94  border-radius: 3px;
95
96  @include entry(osd);
97
98  &:focus { @include entry(osd-focus); }
99  &:insensitive { @include entry(osd-insensitive); }
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: 2px;
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.separator {
137  -gradient-height: 1px;
138  -gradient-start: rgba(0,0,0,0);
139  -gradient-end: rgba(0,0,0,0);
140  -margin-horizontal: 1.5em;
141  height: 1em;
142}
143
144//
145// Slider
146//
147.popup-slider-menu-item,
148.slider {
149  -slider-height: 4px;
150  -slider-background-color: $button_border;                   //background of the trough
151  -slider-border-color: transparentize(black, 1);             //trough border color
152  -slider-active-background-color: $selected_bg_color;        //active trough fill
153  -slider-active-border-color: transparentize(black, 1);      //active trough border
154  -slider-border-width: 0;
155  -slider-handle-radius: 4px;
156  height: 18px;
157  min-width: 15em;
158  border: 0 solid transparent;
159  border-right-width: 1px;
160  border-left-width: 5px;
161  color: transparent;
162
163  .popup-menu-item:active & {
164    -slider-background-color: transparentize(black, 0.8);
165    -slider-active-background-color: $selected_fg_color;
166  }
167}
168
169//
170// Check Boxes
171//
172.check-box {
173
174  CinnamonGenericContainer {
175    spacing: .2em;
176    min-height: 30px;
177    padding-top: 2px;
178  }
179
180  StLabel { font-weight: normal; }
181
182  StBin {
183    width: 16px;
184    height: 16px;
185    background-image: url("#{$asset_path}/checkbox/checkbox-unchecked.svg");
186  }
187
188  &:focus StBin { background-image: url("#{$asset_path}/checkbox/checkbox-unchecked-focused.svg"); }
189
190  &:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked.svg"); }
191
192  &:focus:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked-focused.svg"); }
193}
194
195//
196// Radio Buttons
197//
198.radiobutton {
199
200  CinnamonGenericContainer {
201    spacing: .2em;
202    height: 26px;
203    padding-top: 2px;
204  }
205
206  StLabel {
207    padding-top: 4px;
208    font-size: 0.9em;
209    box-shadow: none;
210  }
211
212  StBin {
213    width: 16px;
214    height: 16px;
215    background-image: url("#{$asset_path}/checkbox/checkbox-unchecked.svg");
216  }
217
218  &:focus StBin { background-image: url("#{$asset_path}/checkbox/checkbox-unchecked-focused.svg"); }
219
220  &:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked.svg"); }
221
222  &:focus:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked-focused.svg"); }
223}
224
225//
226// Switches
227//
228.toggle-switch {
229  width: 50px;
230  height: 20px;
231  background-size: contain;
232  background-image: url("#{$asset_path}/switch/switch-off.svg");
233
234  &:checked { background-image: url("#{$asset_path}/switch/switch-on.svg"); }
235
236  .popup-menu-item:active & {
237    background-image: url("common-assets/switch/switch-off-selected.svg");
238
239    &:checked { background-image: url("common-assets/switch/switch-on-selected.svg"); }
240  }
241}
242
243//
244// Links
245//
246.cinnamon-link {
247  color: $link_color;
248  text-decoration: underline;
249
250  &:hover { color: lighten($link_color,10%); }
251}
252
253//
254// Tooltip
255//
256#Tooltip {
257  border-radius: 3px;
258  padding: 5px 12px;
259  background-color: $osd_bg_color;
260  color: $osd_fg_color;
261  font-size: 1em;
262  font-weight: normal;
263  text-align: center;
264}
265
266//
267// Popvers/Menus
268//
269.popup-menu {
270  color: white;
271  min-width: 200px;
272  color: $fg_color;
273  border-image: url("#{$asset_path}/menu/menu.svg") 9 9 9 9;
274
275  &-arrow { icon-size: 16px; }
276
277  .popup-sub-menu {
278    background-gradient-direction: none;
279    box-shadow: none;
280    border-image: url("#{$asset_path}/menu/submenu.svg") 9 9 9 9;
281
282    .popup-menu-item:ltr { padding-right: 0em; }
283    .popup-menu-item:rtl { padding-left: 0em; }
284
285    StScrollBar {
286      padding: 4px;
287      StBin#trough, StBin#vhandle { border-width: 0; }
288    }
289  }
290
291  .popup-menu-content { padding: 1em 0em 1em 0em; }
292  .popup-menu-item {
293    padding: .4em 1.75em;
294    spacing: 1em;
295
296    &:active {
297      color: $selected_fg_color;
298      background-color: transparent;
299      border-image: url("common-assets/menu/menu-hover.svg") 9 9 1 1;
300    }
301    &:insensitive {
302      color: transparentize($fg_color, 0.5);
303      background: none;
304    }
305  }
306
307  .popup-inactive-menu-item { //all icons and other graphical elements
308    color: $fg_color;
309
310    &:insensitive { color: $insensitive_fg_color; }
311  }
312
313  .popup-menu-item:active .popup-inactive-menu-item { color: $selected_fg_color; }
314
315  &-icon { icon-size: 16px; }
316}
317
318.popup-menu-boxpointer {
319  -arrow-border-radius: 3px;
320  -arrow-background-color:  rgba(0,0,0,0.0);
321  -arrow-border-width: 1px;
322  -arrow-border-color: rgba(0,0,0,0.0);
323  -arrow-base: 0;
324  -arrow-rise: 0;
325}
326
327/*Don't know what this does*/
328.popup-combo-menu {
329  background-color: rgba(0,0,0,0.4);
330  padding: 1em 0em;
331  color: red;
332  border: 1px solid rgba(0,0,0,0.6);
333  border-radius: 3px;
334}
335.popup-image-menu-item {}
336
337.popup-combobox-item { spacing: 1em; }
338
339.popup-separator-menu-item {
340  height: 2px; //not really the whole box
341  margin: 10px 0px;
342  background-color: transparent;
343  border: none;
344  border-image: url("common-assets/menu-separator.svg") 1 1 1 1;
345}
346
347.popup-alternating-menu-item:alternate {
348  font-weight: normal;
349}
350
351.popup-device-menu-item { spacing: .5em; }
352
353.popup-subtitle-menu-item { font-weight: normal; }
354
355.nm-menu-item-icons { spacing: .5em; }
356
357//
358// Panel
359//
360#panel {
361  font-weight: bold;
362  height: 2.1em;
363  min-height: 27px;
364
365  &Left {
366    spacing: 4px;
367
368    &:dnd {
369      background-gradient-direction: vertical;
370      background-gradient-start: rgba(255,0,0,0.05);
371      background-gradient-end: rgba(255,0,0,0.2);
372    }
373    &:ltr ·{ padding-right: 4px; }
374    &:rtl ·{ padding-left: 4px; }
375  }
376
377  &Right {
378
379    &:dnd {
380      background-gradient-direction: vertical;
381      background-gradient-start: rgba(0,0,255,0.05);
382      background-gradient-end: rgba(0,0,255,0.2);
383    }
384    &:ltr ·{ padding-left: 4px; spacing: 0px; }
385    &:rtl ·{ padding-right: 4px; spacing: 0px; }
386  }
387
388  &Center {
389    spacing: 4px;
390
391    &:dnd {
392      background-gradient-direction: vertical;
393      background-gradient-start: rgba(0,255,0,0.05);
394      background-gradient-end: rgba(0,255,0,0.2);
395    }
396  }
397}
398
399.panel {
400
401  &-top, &-bottom {
402    color: $selected_fg_color;
403    font-size: 1em;
404    padding: 0px;
405  }
406
407  &-top { border-image: url('common-assets/panel/panel-top.svg') 1 1 1 1; }
408  &-bottom { border-image: url('common-assets/panel/panel-bottom.svg') 1 1 1 1; }
409
410  &-status-button {
411    border-widht: 0;
412    -natural-hpadding: 3px;
413    -minimum-hpadding: 3px;
414    font-weight: bold;
415    color: white;
416    height: 22px;
417
418    &:hover {}
419  }
420
421  &-button {
422    -natural-hpadding: 6px;
423    -minimum-hpadding: 2px;
424    font-weight: bold;
425    color: green;
426    transition-duration: 100;
427
428    &:hover {}
429  }
430}
431
432.system-status-icon {
433  icon-size: 16px;
434  padding: 0 1px;
435}
436
437//
438// Overview
439//
440#overview { spacing: 12px; }
441
442.window-caption {
443  background-color: $osd_bg_color;
444  border: 1px solid $osd_bg_color;
445  color: $osd_fg_color;
446  spacing: 25px;
447  border-radius: 2px;
448  font-size: 9pt;
449  padding: 5px 8px;
450  -cinnamon-caption-spacing: 4px;
451
452  &#selected {
453    background-color: $selected_bg_color;
454    color: $selected_fg_color;
455    border: 1px solid $selected_bg_color;
456    spacing: 25px;
457  }
458}
459
460.expo-workspaces-name-entry,
461.expo-workspaces-name-entry#selected {
462  height: 15px;
463  border-radius: 2px;
464  font-size: 9pt;
465  padding: 5px 8px;
466  -cinnamon-caption-spacing: 4px;
467  @include entry(osd);
468
469  &:focus {
470    border: 1px solid $selected_bg_color;
471    background-color: $selected_bg_color;
472    color: $selected_fg_color;
473    font-style: italic;
474    transition-duration: 300;
475    selection-background-color: $selected_fg_color;
476    selected-color: $selected_bg_color;
477  }
478}
479
480.expo-workspace-thumbnail-frame {
481  border: 4px solid rgba(255,255,255,0.0);
482  background-color: rgba(255,255,255,0.0);
483  border-radius: 2px;
484
485  &#active {
486    border: 4px solid $selected_bg_color;
487    background-color: black;
488    border-radius: 2px;
489  }
490}
491
492.expo-background {
493  background-color: opacify($osd_bg_color, 1);
494}
495
496.workspace {
497  //&-controls { visible-height: 32px; }
498
499  &-thumbnails {
500    spacing: 26px;
501
502    &-background, &-background:rtl { padding: 8px; }
503  }
504
505  &-add-button {
506    background-image: url("common-assets/misc/add-workspace.svg");
507    height: 200px;
508    width: 35px;
509    transition-duration: 100;
510
511    &:hover {
512      background-image: url("common-assets/misc/add-workspace-hover.svg");
513      transition-duration: 100;
514    }
515    &:active {
516      background-image: url("common-assets/misc/add-workspace-active.svg");
517      transition-duration: 100;
518    }
519  }
520  &-overview-background-shade { background-color: rgba(0,0,0,0.5); }
521}
522
523.workspace-close-button,
524.window-close {
525  background-image: url("common-assets/misc/close.svg");
526  background-size: 26px;
527  height: 26px;
528  width: 26px;
529  -cinnamon-close-overlap: 10px;
530
531  &:hover {
532    background-image: url("common-assets/misc/close-hover.svg");
533    background-size: 26px;
534    height: 26px;
535    width: 26px;
536  }
537  &:active {
538    background-image: url("common-assets/misc/close-active.svg");
539    background-size: 26px;
540    height: 26px;
541    width: 26px;
542  }
543}
544
545//.workspace-thumbnail-indicator {
546//  outline: 2px solid red;
547//  border: 1px solid green;
548//}
549//
550//.window-close:rtl {
551//  -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5);
552//}
553
554.window-close-area {
555  background-image: url("common-assets/misc/trash-icon.svg");
556  height: 120px;
557  width: 400px;
558}
559
560//
561// About Dialog (applet.js and desklet.js)
562//
563.about {
564  &-content {
565    width: 550px;
566    height: 250px;
567    spacing: 8px;
568    padding-bottom: 10px;
569  }
570  &-title {
571    font-size: 2em;
572    font-weight: bold;
573  }
574  &-uuid {
575    font-size: 10px;
576    color: #888;
577  }
578  &-icon {
579    padding-right: 20px;
580    padding-bottom: 14px;
581  }
582  &-scrollBox {
583    border: 1px solid $borders_color;
584    border-radius: 2px;
585    background-color: $base_color;
586    padding: 4px;
587    padding-right: 0;
588    border-radius: 0;
589
590    &-innerBox {
591      padding: 1.2em;
592      spacing: 1.2em;
593    }
594  }
595  &-description {
596    padding-top: 4px;
597    padding-bottom: 16px;
598  }
599  &-version {
600    padding-left: 7px;
601    font-size: 10px;
602    color: #888;
603  }
604}
605
606
607//
608// Calendar
609//
610.calendar {
611  padding: .4em 1.75em;
612  spacing-rows: 0px;
613  spacing-columns: 0px;
614}
615
616.calendar-month-label {
617  color: $fg_color;
618  font-weight: bold;
619  padding: 8px 0;
620}
621
622.calendar-change-month-back,
623.calendar-change-month-forward {
624  width: 16px;
625  height: 16px;
626}
627
628//arrow back
629.calendar-change-month-back {
630  background-image: url("common-assets/misc/calendar-arrow-left.svg");
631
632  &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); }
633
634  &:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); }
635
636  &:rtl {
637    background-image: url("common-assets/misc/calendar-arrow-right.svg");
638
639    &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); }
640
641    &:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); }
642  }
643}
644
645//arrow forward
646.calendar-change-month-forward {
647  background-image: url("common-assets/misc/calendar-arrow-right.svg");
648
649  &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); }
650
651  &:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); }
652
653  &:rtl {
654    background-image: url("common-assets/misc/calendar-arrow-left.svg");
655
656    &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); }
657
658    &:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); }
659  }
660}
661
662.datemenu-date-label {
663  padding: .4em 1.75em;
664  font-weight: bold;
665  text-align: center;
666  color: $fg_color;
667  border-radius: 2px;
668}
669
670.calendar-day-base {
671  font-size: 80%;
672  text-align: center;
673  width: 25px;
674  height: 25px;
675  padding: 0.1em;
676  margin: 2px;
677  border-radius: 12.5px;
678}
679
680.calendar-day-heading {
681  color: transparentize($fg_color, 0.15);
682  margin-top: 1em;
683  font-size: 70%;
684}
685
686.calendar-day {
687  border-width: 0;
688  color: transparentize($fg_color, 0.2);
689}
690
691.calendar-day-top {
692  border-top-width: 0;
693}
694
695.calendar-day-left {
696  border-left-width: 0;
697}
698
699.calendar-nonwork-day {
700  color: $fg_color;
701  background-color: transparent;
702  font-weight: bold;
703}
704
705.calendar-today,
706.calendar-today:active,
707.calendar-today:focus,
708.calendar-today:hover {
709  font-weight: bold;
710  color: $selected_fg_color;
711  background-color: $selected_bg_color;
712  border-width: 0;
713}
714
715.calendar-other-month-day {
716  color: transparentize($fg_color, 0.7);
717  opacity: 1;
718}
719
720//
721// Notifications
722//
723#notification {
724  border-radius: 3px;
725  border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
726  padding: 13px;
727  spacing-rows: 10px;
728  spacing-columns: 10px;
729  margin-from-right-edge-of-screen: 20px;
730  width: 34em;
731  color: $osd_fg_color;
732
733  .popup-menu & {
734    color: $fg_color;
735    border-image: url("#{$asset_path}/misc/message.svg") 9 9 9 9;
736
737    .notification-button, .notification-icon-button {
738      @extend %button;
739      padding: 5px;
740    }
741
742    StEntry { @extend %entry; }
743  }
744
745  &.multi-line-notification {
746    padding-bottom: 13px;
747    color: $osd_fg_color;
748  }
749
750  &-scrollview {
751    max-height: 10em;
752
753    > .top-shadow, > .bottom-shadow { height: 1em; }
754
755    &:ltr > StScrollBar { padding-left: 6px; }
756    &:rtl > StScrollBar { padding-right: 6px; }
757  }
758
759  &-body { spacing: 5px; }
760  &-actions { spacing: 10px; }
761}
762
763.notification {
764
765  &-with-image {
766    min-height: 159px;
767    color: $osd_fg_color;
768  }
769
770  &-button, &-icon-button {
771    @extend %osd_button;
772    padding: 5px;
773  }
774
775  &-icon-button > StIcon { icon-size: 36px; }
776
777  StEntry { @extend %osd_entry; }
778}
779
780//
781// Alt Tab
782///
783#altTabPopup {
784  padding: 8px;
785  spacing: 16px;
786}
787
788.switcher-list {
789  color: $osd_fg_color;
790  background: none;
791  border: none;
792  border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
793  border-radius: 3px;
794  padding: 20px;
795
796  > StBoxLayout {
797    padding: 4px;
798  }
799
800  &-item-container { spacing: 8px; }
801
802  .item-box {
803    padding: 8px;
804    border-radius: 2px;
805
806    &:outlined {
807      padding: 8px;
808      border: 1px solid $selected_bg_color;
809    }
810
811    &:selected {
812      color: $selected_fg_color;
813      background-color: $selected_bg_color;
814      border: 0px solid $selected_bg_color;
815    }
816  }
817
818  .thumbnail { width: 256px; }
819
820  .thumbnail-box {
821    padding: 2px;
822    spacing: 4px;
823  }
824  .separator {
825    width: 1px;
826    background: rgba(255,255,255,0.2);
827  }
828}
829
830.switcher-arrow {
831  border-color: rgba(0,0,0,0);
832  color: $osd_fg_color;
833
834  &:highlighted {
835    border-color: rgba(0,0,0,0);
836    color: $selected_fg_color;
837  }
838}
839
840//.switcher-preview-backdrop { background-color: rgba(25,25,25,0.95); }
841
842.thumbnail-scroll-gradient-left {
843  background-color: rgba(0, 0, 0, 0);
844  border-radius: 24px;
845  border-radius-topright: 0px;
846  border-radius-bottomright: 0px;
847  width: 60px;
848}
849
850.thumbnail-scroll-gradient-right {
851  background-color: rgba(0, 0, 0, 0);
852  border-radius: 24px;
853  border-radius-topleft: 0px;
854  border-radius-bottomleft: 0px;
855  width: 60px;
856}
857
858//
859//Activities Ripples
860//
861.ripple-box {
862  width: 104px;
863  height: 104px;
864  background-image: url("common-assets/misc/corner-ripple.svg");
865  background-size: contain;
866}
867
868//
869// Modal dialogs
870//
871.lightbox { background-color: rgba(0, 0, 0, 0.4); }
872.flashspot { background-color: white; }
873
874.modal-dialog {
875  color: $fg_color;
876  background-color: transparentize($bg_color, 1);
877  border: none;
878  border-image: url("#{$asset_path}/misc/modal.svg") 9 9 9 67;
879  padding: 0 5px 6px 5px;
880
881  > StBoxLayout:first-child {
882    padding: 20px 10px 10px 10px;
883  }
884
885  &-button-box {
886    spacing: 0;
887    margin: 0px;
888    padding: 14px 10px;
889    background: none;
890    border: none;
891    border-image: url("#{$asset_path}/misc/button-box.svg") 9 9 9 9;
892
893    .modal-dialog-button {
894      padding-top: 0;
895      padding-bottom: 0;
896      height: 30px;
897
898      @extend %osd_button;
899    }
900  }
901}
902
903//
904// Run dialog
905//
906.run-dialog {
907  padding: 0px 15px 10px 15px;
908  border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
909
910  > * { padding: 0; }
911
912  &-label {
913    font-size: 0;
914    font-weight: bold;
915    color: $osd_fg_color;
916    padding-bottom: 0;
917  }
918
919  &-error-label { color: $error_color; }
920
921  &-error-box {
922    padding-top: 15px;
923    spacing: 5px;
924  }
925  &-completion-box {
926    padding-left: 15px;
927    font-size: 10px;
928  }
929  &-entry {
930    width: 21em;
931    padding: 7px;
932    border-radius: 3px;
933    caret-color: $osd_fg_color;
934    selected-color: $selected_fg_color;
935    selection-background-color: $selected_bg_color;
936
937    @include entry(osd);
938
939    &:focus { @include entry(osd-focus); }
940  }
941  .modal-dialog-button-box {
942    border: none;
943    box-shadow: none;
944    background: none;
945    background-gradient-direction: none;
946  }
947}
948
949/* CinnamonMountOperation Dialogs */
950.cinnamon-mount-operation-icon {
951  icon-size: 48px;
952}
953
954.mount-password-reask {
955  color: $warning_color;
956}
957
958.show-processes-dialog,
959.mount-question-dialog {
960  spacing: 24px;
961
962  &-subject {
963    padding-top: 10px;
964    padding-left: 17px;
965    padding-bottom: 6px;
966
967    &:rtl {
968      padding-left: 0px;
969      padding-right: 17px;
970    }
971  }
972  &-description {
973    padding-left: 17px;
974    width: 28em;
975
976    &:rtl { padding-right: 17px; }
977  }
978}
979
980.show-processes-dialog-app-list {
981  max-height: 200px;
982  padding-top: 24px;
983  padding-left: 49px;
984  padding-right: 32px;
985
986  &:rtl {
987    padding-right: 49px;
988    padding-left: 32px;
989  }
990
991  &-item {
992    color: #ccc;
993
994    &:hover { color: white }
995
996    &:ltr { padding-right: 1em; }
997    &:rtl { padding-left: 1em; }
998
999    &-icon:ltr { padding-right: 17px; }
1000    &-icon:rtl { padding-left: 17px; }
1001
1002    &-name { font-size: 1.1em; }
1003  }
1004}
1005
1006//
1007// Magnifier
1008//
1009.magnifier-zoom-region {
1010  border: 2px solid rgba(128, 0, 0, 1);
1011
1012  .full-screen { border-width: 0px; }
1013}
1014
1015//
1016// On-Screen Keyboard
1017//
1018#keyboard {
1019  background-color: $osd_bg_color;
1020  border-width: 0;
1021  border-top-width: 1px;
1022  border-color: transparentize(black, 0.6);
1023}
1024
1025.keyboard-layout {
1026  spacing: 10px;
1027  padding: 10px;
1028}
1029
1030.keyboard-row {
1031  spacing: 15px;
1032}
1033
1034.keyboard-key {
1035  min-height: 2em;
1036  min-width: 2em;
1037  font-size: 14pt;
1038  font-weight: bold;
1039  border-radius: 3px;
1040  box-shadow: none;
1041
1042  @include button(osd);
1043
1044  &:hover { @include button(osd-hover); }
1045  &:active, &:checked { @include button(osd-active); }
1046
1047  &:grayed { @include button(osd-insensitive); }
1048}                             
1049
1050.keyboard-subkeys { //long press on a key popup
1051  color: $osd_fg_color;
1052  padding: 5px;
1053  -arrow-border-radius: 2px;
1054  -arrow-background-color: $osd_bg_color;
1055  -arrow-border-width: 1px;
1056  -arrow-border-color: transparentize(black, 0.6);;
1057  -arrow-base: 20px;
1058  -arrow-rise: 10px;
1059  -boxpointer-gap: 5px;
1060}
1061
1062//
1063// Cinnamon Specific Section
1064//
1065
1066//
1067// Menu (menu.js)
1068//
1069.menu {
1070  &-favorites-box {
1071    margin: auto;
1072    padding: 10px;
1073    transition-duration: 300;
1074    background-color: $bg_color;
1075    border: 1px solid $borders_color;
1076  }
1077
1078  &-favorites-button {
1079    padding: 10px;
1080    border: 1px solid rgba(0,0,0,0);
1081
1082    &:hover { @extend %button:hover; }
1083  }
1084
1085  &-places {
1086
1087    &-box {
1088      margin: auto;
1089      padding: 10px;
1090      border: 0px solid red;
1091    }
1092
1093    &-button { padding: 10px; }
1094  }
1095
1096  &-categories-box { padding: 10px 30px 10px 30px; }
1097
1098  &-applications-inner-box,
1099  &-applications-outer-box { padding: 10px 10px 0 10px; }
1100
1101  &-application-button {
1102    padding: 7px;
1103    border: 1px solid rgba(0,0,0,0);
1104
1105    // This style is used in menu application buttons for applications which were newly installed
1106    &:highlighted { font-weight: bold; }
1107
1108    &-selected {
1109      padding: 7px;
1110      @extend %button:hover;
1111
1112      &:highlighted { font-weight: bold; }
1113    }
1114
1115    &-label:ltr { padding-left: 5px; }
1116    &-label:rtl { padding-right: 5px; }
1117  }
1118
1119  &-category-button {
1120    padding: 7px;
1121    border: 1px solid rgba(0,0,0,0);
1122
1123    &-selected {
1124      padding: 7px;
1125      @extend %button:hover;
1126    }
1127    &-hover {
1128      background-color: red;
1129      border-radius: 2px;
1130    }
1131    &-greyed {
1132      padding: 7px;
1133      color: $insensitive_fg_color;
1134      border: 1px solid rgba(0,0,0,0);
1135    }
1136
1137    &-label:ltr { padding-left: 5px; }
1138    &-label:rtl { padding-right: 5px; }
1139  }
1140
1141  // Name and description of the currently hovered item in the menu
1142  // This appears on the bottom right hand corner of the menu
1143  &-selected-app-box {
1144    padding-right: 30px;
1145    padding-left: 28px;
1146    text-align: right;
1147    height: 30px;
1148
1149    &:rtl {
1150      padding-top: 10px;
1151      height: 30px;
1152    }
1153  }
1154
1155  &-selected-app-title { font-weight: bold; }
1156
1157  &-selected-app-description { max-width: 150px; }
1158
1159  &-search-box:ltr { padding-left: 30px; }
1160  &-search-box-rtl { padding-right: 30px; }
1161}
1162
1163#menu-search-entry {
1164  width: 250px;
1165  height: 15px;
1166  font-weight: normal;
1167  caret-color: $fg_color;
1168
1169  @extend %entry;
1170}
1171
1172.menu-search-entry-icon {
1173  icon-size: 1em;
1174  color: $fg_color;
1175}
1176
1177/* Context menu (at the moment only for favorites) */
1178.menu-context-menu {
1179}
1180
1181//
1182// OSD
1183//
1184.info-osd {
1185  text-align: center;
1186  font-weight: bold;
1187  spacing: 1em;
1188  padding: 16px;
1189  color: $selected_fg_color;
1190  border-image: url("common-assets/misc/osd.svg") 9 9 9 9;
1191}
1192
1193.osd-window {
1194  text-align: center;
1195  font-weight: bold;
1196  spacing: 1em;
1197  padding: 20px;
1198  margin: 32px;
1199  min-width: 64px;
1200  min-height: 64px;
1201
1202  color: $selected_fg_color;
1203  background: none;
1204  border: none;
1205  border-radius: 5px;
1206  border-image: url("common-assets/misc/osd.svg") 9 9 9 9;
1207
1208.osd-monitor-label { font-size: 3em; }
1209
1210  .level {
1211    padding: 0;
1212    height: 4px;
1213    background-color: transparentize(black, 0.5);
1214    border-radius: 2px;
1215    color: $selected_bg_color;
1216  }
1217}
1218
1219//
1220// Window list (windowList.js)
1221//
1222.window-list {
1223
1224  &-box {
1225    spacing: 6px;
1226    padding-left: 10px;
1227
1228    .panel-bottom & { padding-top: 1px; }
1229    .panel-top & { padding-bottom: 1px; }
1230  }
1231
1232  &-item-label {
1233    font-weight: bold;
1234    width: 15em;
1235    min-width: 5px;
1236  }
1237
1238  &-item-box {
1239    font-weight: bold;
1240    background-image: none;
1241    padding-left: 8px;
1242    padding-right: 8px;
1243    transition-duration: 100;
1244    color: transparentize($selected_fg_color, 0.4);
1245
1246    &:hover {color: $selected_fg_color;}
1247
1248    &:active,
1249    &:checked,
1250    &:focus {
1251      color: $selected_fg_color;
1252
1253      .panel-bottom & { border-image: url("common-assets/panel/window-list-active-bottom.svg") 3 3 1 3; }
1254
1255      .panel-top & { border-image: url("common-assets/panel/window-list-active-top.svg") 3 3 3 1; }
1256    }
1257  }
1258
1259  &-item-demands-attention {
1260    background-gradient-start: $warning_color;
1261    background-gradient-end: $warning_color;
1262  }
1263}
1264
1265///
1266// Sound Applet (status/volume.js)
1267//
1268.sound-button {
1269  width: 22px;
1270  height: 13px;
1271  padding: 8px;
1272
1273  @extend %button;
1274
1275  &-container {
1276    padding-right: 3px;
1277    padding-left: 3px;
1278  }
1279  StIcon { icon-size: 1.4em; }
1280}
1281
1282.sound-track {
1283  &-infos { padding: 5px; }
1284  &-info {
1285    padding-top: 2px;
1286    padding-bottom: 2px;
1287
1288    StIcon { icon-size: 16px; }
1289
1290    StLabel {
1291      padding-left: 5px;
1292      padding-right: 5px;
1293    }
1294  }
1295  &-box {
1296    padding-left: 15px;
1297    padding-right: 15px;
1298    max-width: 220px;
1299  }
1300}
1301
1302.sound-seek-box {
1303  padding-left: 15px;
1304
1305  StLabel { padding-top: 2px; }
1306  StIcon { icon-size: 16px; }
1307}
1308
1309.sound-seek-slider { width: 140px; }
1310
1311.sound-volume-menu-item {
1312  padding: .4em 1.75em;
1313
1314  StIcon {
1315    icon-size: 1.14em;
1316    padding-left: 8px;
1317    padding-right: 8px;
1318  }
1319}
1320
1321.sound-playback-control { padding: 5px 10px 10px 10px; }
1322
1323// 2.8
1324.sound-player {
1325  padding: 0 4px;
1326
1327  > StBoxLayout:first-child {
1328    padding: 5px 10px 12px 10px;
1329    spacing: 0.5em;
1330
1331    StButton:small {
1332      width: 16px;
1333      height: 8px;
1334      padding: 1px;
1335
1336      StIcon { icon-size: 12px; }
1337    }
1338  }
1339
1340  &-generic-coverart {
1341    background: rgba(0,0,0,0.2);
1342  }
1343
1344  &-overlay {
1345    width: 290px;
1346    height: 70px;
1347    padding: 15px;
1348    spacing: 0.5em;
1349    background: transparentize(darken($osd_bg_color, 5%), 0.1);
1350    border: 0px solid darken($osd_bg_color, 10%);
1351    border-bottom: 1px ;
1352    color: $osd_fg_color;
1353
1354    StButton {
1355      width: 22px;
1356      height: 13px;
1357      padding: 5px;
1358      color: $osd_fg_color;
1359      border-radius: 2px;
1360      border: 1px solid transparentize($osd_bg_color,1);
1361
1362      StIcon { icon-size: 16px; }
1363
1364      &:hover{ @include button(osd-hover); }
1365      &:active { @include button(active); }
1366    }
1367
1368    StBoxLayout {
1369      padding-top: 2px;
1370    }
1371  }
1372
1373  .slider {
1374    height: 0.5em;
1375    padding: 0;
1376    border: none;
1377    -slider-height: 0.5em;
1378    -slider-background-color: if($variant == 'light', $button_border, darken($bg_color, 5%));
1379    -slider-border-color: rgba(0,0,0,0);
1380    -slider-active-background-color: $selected_bg_color;
1381    -slider-active-border-color: rgba(0,0,0,0);
1382    -slider-border-width: 0px;
1383    -slider-handle-radius: 0px;
1384  }
1385}
1386
1387//
1388// Workspace Switcher applet (workspaceSwitcher.js)
1389//
1390#workspaceSwitcher {
1391  spacing: 0px;
1392  padding: 3px;
1393}
1394
1395/* Controls the styling when using the "Simple buttons" option */
1396.workspace-switcher {
1397  padding-left: 3px;
1398  padding-right: 3px;
1399}
1400
1401.workspace-button {
1402  width: 20px;
1403  height: 10px;
1404  color: $selected_fg_color;
1405  padding: 3px;
1406  padding-top: 4px;
1407  transition-duration: 300;
1408
1409  &:outlined, &:outlined:hover { color: $selected_bg_color; }
1410  &:hover { color: transparentize($selected_bg_color, 0.5) }
1411}
1412
1413/* Controls the style when using the "Visual representation" option */
1414.workspace-graph {
1415  padding: 3px;
1416  spacing: 3px;
1417}
1418
1419.workspace-graph .workspace {
1420  border: 1px solid transparentize(black, 0.6);
1421  background-gradient-direction: none;
1422  background-color: transparentize(black, 0.8);
1423}
1424
1425.workspace-graph .workspace:active {
1426  border: 1px solid $selected_bg_color;
1427  background-gradient-direction: none;
1428}
1429
1430.workspace-graph .workspace .windows {
1431  -active-window-background: lighten($panel_bg, 15%);
1432  -active-window-border: rgba(0, 0, 0, 0.8);
1433  -inactive-window-background: lighten($panel_bg, 15%);
1434  -inactive-window-border: rgba(0, 0, 0, 0.8);
1435}
1436
1437.workspace-graph .workspace:active .windows {
1438  -active-window-background: lighten($panel_bg, 20%);
1439  -active-window-border: rgba(0, 0, 0, 0.8);
1440  -inactive-window-background: lighten($panel_bg, 5%);
1441  -inactive-window-border: rgba(0, 0, 0, 0.8);
1442}
1443
1444//
1445// Panel Launchers Applet (panelLaunchers.js)
1446//
1447#panel-launchers-box {
1448  padding-left: 7px;
1449}
1450
1451.panel-launcher {
1452  margin: 1px;
1453  padding: 1px;
1454  transition-duration: 200;
1455
1456  &:hover {
1457    background-gradient-direction: none;
1458    border: 0px solid $selected_bg_color;
1459
1460    .panel-bottom & { border-bottom-width: 1px; }
1461    .panel-top & { border-top-width: 1px; }
1462  }
1463}
1464
1465//
1466// Overview corner
1467//
1468#overview-corner {
1469  background-image: url("common-assets/misc/overview.png");
1470
1471  &:hover { background-image: url("common-assets/misc/overview-hover.png"); }
1472}
1473
1474//
1475// Applets (applet.js)
1476//
1477.applet {
1478  &-separator { padding: 1px 4px; }
1479
1480  &-separator-line {
1481    width: 1px;
1482    background: rgba(255,255,255, 0.12);
1483  }
1484
1485  &-box {
1486    padding-left: 3px;
1487    padding-right: 3px;
1488    color: $selected_fg_color;
1489    text-shadow: none;
1490    transition-duration: 100;
1491
1492    &:hover {
1493      color: $selected_fg_color;
1494      background-color: $selected_bg_color;
1495    }
1496  }
1497
1498  &-label {
1499    font-weight: bold;
1500    color: $selected_fg_color;
1501
1502    &:hover, .applet-box:hover > & {
1503      color: $selected_fg_color;
1504      text-shadow: none;
1505    }
1506  }
1507
1508  &-icon {
1509    color: $selected_fg_color;
1510    icon-size: 22px;
1511
1512    &:hover, .applet-box:hover > & {
1513      color: $selected_fg_color;
1514      text-shadow: none;
1515    }
1516  }
1517
1518}
1519
1520//
1521// User Applet
1522//
1523.user-icon {
1524    width: 32px;
1525    height: 32px;
1526    background-color: transparent;
1527    border: none;
1528    border-radius: 0;
1529}
1530
1531.user-label {
1532    color: $fg_color;
1533    font-size: 1em;
1534    font-weight: bold;
1535    margin: 0px;
1536}
1537
1538//
1539// Desklets (desklet.js)
1540//
1541.desklet {
1542  color: $osd_fg_color;
1543
1544  &-with-borders {
1545    border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
1546    color: $osd_fg_color;
1547    padding: 12px;
1548    padding-bottom: 16px;
1549  }
1550  &-with-borders-and-header {
1551    border-image: url("common-assets/misc/desklet.svg") 9 9 9 9;
1552    color: $osd_fg_color;
1553    border-radius: 0;
1554    border-radius-topleft: 0;
1555    border-radius-topright: 0;
1556    padding: 12px;
1557    padding-bottom: 17px;
1558  }
1559  &-header {
1560    border-image: url("common-assets/misc/desklet-header.svg") 9 9 9 9;
1561    color: $osd_fg_color;
1562    font-size: 1em;
1563    padding: 12px;
1564    padding-bottom: 6px;
1565  }
1566  &-drag-placeholder { 
1567    border: 2px solid $selected_bg_color;
1568    background-color: transparentize($selected_bg_color, 0.7);
1569  }
1570}
1571
1572.photoframe-box {
1573  border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
1574  color: $osd_fg_color;
1575  padding: 12px;
1576  padding-bottom: 16px;
1577}
1578
1579//
1580// Workspace OSD
1581//
1582/*FIXME*/
1583.workspace-osd {
1584  /*color: red;*/
1585  text-shadow: black 5px 5px 5px;
1586  font-weight: bold;
1587  font-size: 48pt;
1588}
1589
1590//
1591// Notification Applet
1592//
1593.notification-applet-padding { padding: .5em 1em; }
1594
1595.notification-applet-container { max-height: 100px; }
1596
1597//
1598// Tile Preview
1599//
1600.tile-preview, .tile-preview.snap,
1601.tile-hud, .tile-hud.snap {
1602  background-color: transparentize($selected_bg_color, 0.7);
1603  border: 1px solid $selected_bg_color;
1604}
1605
1606//
1607// Xkcd Desklet
1608//
1609.xkcd-box {
1610  padding: 6px;
1611  border: 0px;
1612  background-color: rgba(0,0,0,0);
1613  border-radius: 0px;
1614}
Note: See TracBrowser for help on using the repository browser.