ASCII text
1
//This is the RIGHT PLACE to edit the stylesheet
2
//let's start by telling people not to edit the generated CSS:
4
$cakeisalie: "This stylesheet is generated, DO NOT EDIT";
5
/* #{$cakeisalie} */
6
/* Copyright 2009, 2015 Red Hat, Inc.
8
*
9
* Portions adapted from Mx's data/style/default.css
10
* Copyright 2009 Intel Corporation
11
*
12
* This program is free software; you can redistribute it and/or modify it
13
* under the terms and conditions of the GNU Lesser General Public License,
14
* version 2.1, as published by the Free Software Foundation.
15
*
16
* This program is distributed in the hope it will be useful, but WITHOUT ANY
17
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
18
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for
19
* more details.
20
*
21
* You should have received a copy of the GNU Lesser General Public License
22
* along with this program; if not, write to the Free Software Foundation,
23
* Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
24
*/
25
/* GLOBALS */
28
stage {
29
font-family: $font-family;
30
@include font(body-1);
31
color: $text;
32
}
33
/* WIDGETS */
35
/* Buttons */
37
.button {
38
min-height: $medium-size;
39
padding: 0 16px;
40
border-width: 0;
41
border-radius: $corner-radius;
42
@include font(button);
43
@include button(flat-normal);
44
&:hover { @include button(flat-hover); }
45
&:active { @include button(flat-active); }
46
&:insensitive { @include button(flat-insensitive); }
47
&:focus { @include button(flat-focus); }
48
}
50
.modal-dialog-linked-button {
52
min-height: $medium-size;
53
margin: $container-padding;
54
padding: 0 8px;
55
margin-right: 0;
56
border-right-width: 0;
57
border-radius: $corner-radius;
58
@include font(button);
59
@include button(flat-normal);
60
&:hover { @include button(flat-hover); }
61
&:active { @include button(flat-active); }
62
&:insensitive { @include button(flat-insensitive); }
63
&:focus { @include button(flat-focus); }
64
&:first-child {
66
border-radius: $corner-radius;
67
}
68
&:last-child {
69
margin-right: $container-padding;
70
border-right-width: 0px;
71
border-radius: $corner-radius;
72
}
73
&:first-child:last-child {
74
margin-right: $container-padding;
75
border-right-width: 0px;
76
border-radius: $corner-radius;
77
}
78
}
79
/* Entries */
81
StEntry {
82
min-height: $medium-size;
83
padding: 0 8px;
84
border-radius: $corner-radius $corner-radius 0 0;
85
border-width: 0;
86
color: $text;
87
selection-background-color: $overlay-selected;
88
selected-color: $text;
89
@include font(subheading);
90
@include entry(normal);
91
&:hover { @include entry(hover);}
92
&:focus { @include entry(focus);}
93
&:insensitive { @include entry(insensitive);}
94
StIcon.capslock-warning {
95
icon-size: 16px;
96
warning-color: $warning;
97
padding: 0 0;
98
}
99
}
100
/* Scrollbars */
103
StScrollView {
105
&.vfade { -st-vfade-offset: 32px; }
106
&.hfade { -st-hfade-offset: 32px; }
107
}
108
StScrollBar {
110
padding: 0;
111
StScrollView & {
113
min-width: 16px;
114
min-height: 16px;
115
}
116
StBin#trough {
118
margin: 4px;
119
border-radius: 100px;
120
background-color: $track-disabled;
121
}
122
StButton#vhandle, StButton#hhandle {
124
transition-duration: $duration;
125
border-radius: 100px;
126
background-color: $text-disabled;
127
//border: 4px solid transparent; //would be nice to margin or at least to transparent
128
margin: 4px;
129
&:hover { background-color: $text-secondary; }
130
&:active { background-color: $text; }
131
}
132
}
133
%overview_scrollbar {
135
StBin#trough {
136
background-color: on(dark, track-disabled);
137
}
138
StButton#vhandle, StButton#hhandle {
140
background-color: on(dark, disabled);
141
&:hover { background-color: on(dark, secondary); }
142
&:active { background-color: on(dark); }
143
}
144
}
145
/* Slider */
147
.slider {
149
height: 20px;
150
color: $primary;
151
-slider-height: 2px;
152
-slider-background-color: $track; //background of the trough
153
-slider-border-color: transparent; //trough border color
154
-slider-active-background-color: $primary; //active trough fill
155
-slider-active-border-color: transparent; //active trough border
156
-slider-border-width: 0;
157
-slider-handle-radius: 6px;
158
}
159
/* Check Boxes */
161
.check-box {
163
* {
164
min-height: $medium-size - 8px * 2;
165
padding: 8px 0;
166
}
167
StBoxLayout { spacing: 8px; }
168
StBin {
169
transition-duration: $duration;
170
width: 24px;
171
height: 24px;
172
padding: ($medium-size - 24px) / 2;
173
border-radius: 100px;
174
background-image: url("assets/checkbox-off.svg");
175
}
176
&:focus StBin {
177
background-image: url("assets/checkbox-off.svg");
178
}
179
&:hover StBin {
180
background-color: $overlay-hover;
181
}
182
&:active StBin {
183
transition-duration: $duration-ripple;
184
background-color: $overlay-active;
185
}
186
&:checked StBin {
187
background-image: url("assets/checkbox.svg");
188
}
189
&:focus:checked StBin {
190
background-image: url("assets/checkbox.svg");
191
}
192
&:hover:checked StBin {
193
background-color: rgba($primary, 0.08);
194
}
195
&:active:checked StBin {
196
background-color: rgba($primary, 0.2);
197
}
198
}
199
/* Switches */
201
.toggle-switch {
202
width: 40px;
203
height: 20px;
204
background-size: contain;
205
}
206
@each $v in us, intl {
208
.toggle-switch-#{$v} {
209
background-image: url("assets/toggle-off.svg");
210
&:checked { background-image: url("assets/toggle-on.svg"); }
211
}
212
}
213
/* links */
215
.shell-link {
216
transition-duration: $duration;
217
border-radius: $corner-radius;
218
color: $link;
219
&:hover {
220
color: $link;
221
background-color: rgba($link, 0.08);
222
}
223
&:active {
224
transition-duration: $duration-ripple;
225
color: $link;
226
background-color: rgba($link, 0.2);
227
}
228
}
229
/* Modal Dialogs */
231
.headline { @include font(title); }
233
.lightbox { background-color: black; }
234
.flashspot { background-color: white; }
235
.modal-dialog {
237
border-radius: $corner-radius;
238
color: $text;
239
background-color: $surface;
240
border: none;
241
box-shadow: $shadow-4;
242
.modal-dialog-content-box {
243
padding: 24px;
244
}
245
.run-dialog-entry { width: 20em; margin-bottom: 0; }
246
.run-dialog-error-box {
247
padding-top: 16px;
248
spacing: 6px;
249
}
250
.run-dialog-button-box { padding-top: 1em; }
251
.run-dialog-label {
252
font-size: 1em;
253
font-weight: normal;
254
color: $text-secondary;
255
padding-bottom: .4em;
256
}
257
}
259
.mount-dialog-subject,
261
.end-session-dialog-subject { //this should be a generic header class
262
@include font(title);
263
}
264
/* Message Dialog */
266
.message-dialog-main-layout {
267
padding: 12px 20px 0;
268
spacing: 12px;
269
}
270
.message-dialog-content {
272
max-width: 28em;
273
spacing: 20px;
274
}
275
.message-dialog-icon {
277
min-width: 48px;
278
icon-size: 48px;
279
}
280
.message-dialog-title {
282
font-weight: bold;
283
}
284
.message-dialog-subtitle {
286
color: $text-secondary;
287
font-weight: bold;
288
}
289
/* End Session Dialog */
291
.end-session-dialog {
292
spacing: 42px;
293
border: none;
294
}
295
.end-session-dialog-list {
297
padding-top: 20px;
298
}
299
.end-session-dialog-layout {
301
padding-left: 17px;
302
&:rtl { padding-right: 17px; }
303
}
304
.end-session-dialog-description {
306
width: 28em;
307
padding-bottom: 10px;
308
&:rtl {
309
text-align: right;
310
}
311
}
312
.end-session-dialog-warning {
314
width: 28em;
315
color: $warning;
316
padding-top: 6px;
317
&:rtl {
318
text-align: right;
319
}
320
}
321
.end-session-dialog-logout-icon {
323
//border: 2px solid #8b8b8b;
324
border-radius: 5px;
325
width: 48px;
326
height: 48px;
327
background-size: contain;
328
}
329
.end-session-dialog-shutdown-icon {
331
color: $text-disabled;
332
width: 48px;
333
height: 48px;
334
}
335
.end-session-dialog-inhibitor-layout {
337
spacing: 16px;
338
max-height: 200px;
339
padding-right: 65px;
340
padding-left: 65px;
341
}
342
.end-session-dialog-session-list,
344
.end-session-dialog-app-list {
345
spacing: 1em;
346
}
347
.end-session-dialog-list-header {
349
font-weight: bold;
350
&:rtl { text-align: right; }
351
}
352
.end-session-dialog-app-list-item,
354
.end-session-dialog-session-list-item {
355
spacing: 1em;
356
}
357
.end-session-dialog-app-list-item-name,
359
.end-session-dialog-session-list-item-name {
360
font-weight: bold;
361
}
362
.end-session-dialog-app-list-item-description {
364
color: $text-secondary;
365
font-size: 1em;
366
}
367
/* ShellMountOperation Dialogs */
369
.shell-mount-operation-icon { icon-size: 48px; }
370
.mount-dialog {
372
spacing: 24px;
373
.message-dialog-title {
375
padding-top: 10px;
376
padding-left: 17px;
377
padding-bottom: 6px;
378
max-width: 34em;
379
}
380
.message-dialog-title:rtl {
382
padding-left: 0px;
383
padding-right: 17px;
384
}
385
.message-dialog-body {
387
padding-left: 17px;
388
width: 28em;
389
}
390
.message-dialog-body:rtl {
392
padding-left: 0px;
393
padding-right: 17px;
394
}
395
}
396
.mount-dialog-app-list {
398
max-height: 200px;
399
padding-top: 24px;
400
padding-left: 49px;
401
padding-right: 32px;
402
}
403
.mount-dialog-app-list:rtl {
405
padding-right: 49px;
406
padding-left: 32px;
407
}
408
.mount-dialog-app-list-item {
410
color: $text;
411
&:hover { color: $text; }
412
&:ltr { padding-right: 1em; }
413
&:rtl { padding-left: 1em; }
414
}
415
.mount-dialog-app-list-item-icon {
417
&:ltr { padding-right: 17px; }
418
&:rtl { padding-left: 17px; }
419
}
420
.mount-dialog-app-list-item-name {
422
font-size: 1em;
423
}
424
/* Password or Authentication Dialog */
427
.prompt-dialog {
429
//this is the width of the entire modal popup
430
width: 34em;
431
border: none;
432
.message-dialog-main-layout { spacing: 24px; padding: 10px; }
434
.message-dialog-content { spacing: 16px; }
435
.message-dialog-title { @include font(title); color: $text; }
436
}
437
.prompt-dialog-description:rtl {
439
text-align: right;
440
}
441
.prompt-dialog-password-box {
443
spacing: 1em;
444
padding-bottom: 1em;
445
}
446
.prompt-dialog-error-label {
448
font-size: 1em;
449
color: $error;
450
padding-bottom: 8px;
451
}
452
.prompt-dialog-info-label {
454
font-size: 1em;
455
padding-bottom: 8px;
456
}
457
.hidden {
459
color: rgba(0,0,0,0);
460
}
461
.prompt-dialog-null-label {
463
font-size: 1em;
464
padding-bottom: 8px;
465
}
466
/* Polkit Dialog */
469
.polkit-dialog-user-layout {
471
padding-left: 10px;
472
spacing: 10px;
473
&:rtl {
474
padding-left: 0px;
475
padding-right: 10px;
476
}
477
}
478
.polkit-dialog-user-root-label {
480
color: $warning;
481
}
482
.polkit-dialog-user-icon {
484
border-radius: 5px;
485
background-size: contain;
486
width: 48px;
487
height: 48px;
488
}
489
/* Audio selection dialog */
491
.audio-device-selection-dialog {
492
spacing: 30px;
493
}
494
.audio-selection-content {
496
spacing: 20px;
497
padding: 24px;
498
}
499
.audio-selection-title {
501
font-weight: bold;
502
text-align: center;
503
}
504
.audio-selection-box {
506
spacing: 20px;
507
}
508
.audio-selection-device {
510
border: none;
511
border-radius: $corner-radius;
512
&:focus { background-color: $overlay-focus; }
513
&:hover { background-color: $overlay-hover; }
514
&:active { background-color: $overlay-active; }
515
}
516
.audio-selection-device-box {
518
padding: 20px;
519
spacing: 20px;
520
}
521
.audio-selection-device-icon {
523
icon-size: 64px;
524
}
525
/* Access Dialog */
527
.access-dialog {
528
spacing: 30px;
529
}
530
/* Geolocation Dialog */
532
.geolocation-dialog {
533
spacing: 30px;
534
}
535
/* Extension Dialog */
537
.extension-dialog {
538
.message-dialog-main-layout { spacing: 24px; padding: 10px; }
539
.message-dialog-title { color: $text-secondary; }
540
}
541
/* Inhibit-Shortcuts Dialog */
543
.inhibit-shortcuts-dialog {
544
spacing: 30px;
545
}
546
/* Network Agent Dialog */
548
.network-dialog-secret-table {
550
spacing-rows: 15px;
551
spacing-columns: 1em;
552
}
553
.keyring-dialog-control-table {
555
spacing-rows: 15px;
556
spacing-columns: 1em;
557
}
558
/* Popovers/Menus */
560
.popup-menu {
562
min-width: 200px;
563
.popup-menu-arrow { } //defined globally in the TOP BAR
565
.popup-sub-menu {
566
background-color: $fill;
567
box-shadow: $shadow-0;
568
}
569
.popup-menu-content { padding: 8px 0; }
571
.popup-menu-item {
572
// min-height: $menuitem-size - 4px * 2;
573
spacing: 8px;
574
transition-duration: $duration;
575
&:ltr { padding: 0.4em 24px 0.4em 0; }
577
&:rtl { padding: 0.4em 0 0.4em 24px; }
578
&:checked {
579
background-color: $overlay-selected;
580
box-shadow: $shadow-0;
581
font-weight: normal;
582
&.selected {
583
background-color: rgba($primary, 0.4);
584
}
585
&:active {
586
background-color: rgba($primary, 0.6);
587
}
588
}
589
&.selected {
590
background-color: $overlay-hover;
591
color: $text;
592
transition-duration: 0ms;
593
}
594
&:active {
595
background-color: $overlay-active;
596
color: $text;
597
transition-duration: $duration-ripple;
598
}
599
&.selected:active { color: $text; }
600
&:insensitive { color: $text-disabled; }
601
}
602
.popup-inactive-menu-item { //all icons and other graphical elements
604
color: $text;
605
&:insensitive { color: $text-disabled; }
607
}
608
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
609
&.panel-menu {
610
-boxpointer-gap: 4px;
611
margin-bottom: 1.75em;
612
}
613
}
614
.popup-menu-ornament {
618
text-align: right;
619
width: 16px;
620
height: 16px;
621
}
622
.popup-menu-boxpointer,
623
.candidate-popup-boxpointer {
624
-arrow-border-radius: 0;
625
-arrow-background-color: transparent;
626
-arrow-border-width: 0;
627
-arrow-border-color: transparent;
628
-arrow-base: 0;
629
-arrow-rise: 0;
630
-arrow-box-shadow: none; //dreaming. bug #689995
631
margin: 5px 8px 8px;
632
background-color: $surface;
633
border-radius: $corner-radius;
634
box-shadow: $shadow-2;
635
}
636
.popup-separator-menu-item {
638
//-margin-horizontal: 24px;
639
height: 1px; //not really the whole box
640
margin: 8px 64px - 24px;
641
background-color: $divider;
642
border-color: transparent;
643
border-bottom-width: 0;
644
border-bottom-style: none;
645
}
646
// Background menu
649
.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0; }
650
/* fallback menu
652
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
653
app menu inside the main app window itself rather than the top bar
654
*/
655
/* OSD */
658
.osd-window {
659
text-align: center;
660
font-weight: bold;
661
spacing: 1em;
662
margin: 32px;
663
min-width: 64px;
664
min-height: 64px;
665
.osd-monitor-label { @include font(display-2); }
667
.level {
668
height: 8px;
669
border-radius: 0;
670
background-color: $track-disabled;
671
color: $text;
672
}
673
.level-bar {
674
background-color: $primary;
675
border-radius: 0;
676
}
677
}
678
/* Pad OSD */
680
.pad-osd-window {
681
padding: 32px;
682
background-color: $scrim;
683
.pad-osd-title-box { spacing: 12px; }
685
.pad-osd-title-menu-box { spacing: 6px; }
686
}
687
.combo-box-label {
689
width: 15em;
690
}
691
/* App Switcher */
693
.switcher-popup {
694
padding: 8px;
695
spacing: 16px;
696
}
697
.osd-window,
699
.resize-popup,
700
.switcher-list {
701
@extend %osd-panel;
702
}
703
.switcher-list-item-container { spacing: 8px; }
705
.switcher-list .item-box {
707
transition-duration: $duration;
708
padding: 8px;
709
border-radius: $corner-radius;
710
}
711
.switcher-list .item-box:outlined {
713
padding: 8px;
714
border: none;
715
background-color: $track-disabled;
716
color: $text; // for Ubuntu session
717
}
718
.switcher-list .item-box:selected {
720
background-color: $overlay-selected;
721
color: $text;
722
}
723
.switcher-list .thumbnail-box {
725
padding: 2px;
726
spacing: 4px;
727
}
728
.switcher-list .thumbnail {
730
width: 256px;
731
}
732
.switcher-list .separator {
734
width: 1px;
735
background: $divider;
736
}
737
.switcher-arrow {
739
transition-duration: $duration;
740
border-color: rgba(0,0,0,0);
741
color: $text-secondary;
742
&:highlighted {
743
color: $text;
744
}
745
}
746
.input-source-switcher-symbol {
748
@include font(display-2);
749
width: 96px;
750
height: 96px;
751
}
752
/* Window Cycler */
754
.cycler-highlight { border: 4px solid $primary; }
755
/* Workspace Switcher */
757
.workspace-switcher-group { padding: 8px; }
758
.workspace-switcher-container {
760
@extend %osd-panel;
761
}
762
.workspace-switcher {
764
background: transparent;
765
border: 0px;
766
border-radius: 0px;
767
padding: 0px;
768
spacing: 8px;
769
}
770
.ws-switcher-active-up, .ws-switcher-active-down {
772
height: 48px;
773
background-color: $primary;
774
color: on($primary);
775
background-size: 32px;
776
border-radius: $corner-radius;
777
}
778
.ws-switcher-box {
780
height: 48px;
781
border: none;
782
background: $track-disabled;
783
border-radius: $corner-radius;
784
}
785
%osd-panel {
787
color: $text;
788
background-color: $surface;
789
border: none;
790
box-shadow: $shadow-4;
791
border-radius: $corner-radius;
792
padding: 12px;
793
}
794
/* Tiled window previews */
796
.tile-preview {
797
background-color: rgba($primary-light, 0.3);
798
border: 1px solid $primary-light;
799
}
800
.tile-preview-left.on-primary {
802
border-radius: 0;
803
}
804
.tile-preview-right.on-primary {
806
border-radius: 0;
807
}
808
.tile-preview-left.tile-preview-right.on-primary {
810
border-radius: 0;
811
}
812
/* TOP BAR */
814
#panel {
816
background-color: $scrim;
817
/* transition from solid to transparent */
818
transition-duration: $duration-panel;
819
font-weight: bold;
820
height: $menuitem-size;
821
&:overview,
823
&.unlock-screen,
824
&.login-screen,
825
&.lock-screen {
826
background-color: transparent;
827
}
828
#panelLeft, #panelCenter { // spacing between activities<>app menu and such
830
spacing: 0;
831
}
832
.panel-corner {
834
-panel-corner-radius: 0;
835
-panel-corner-background-color: $scrim;
836
-panel-corner-border-width: 2px;
837
-panel-corner-border-color: transparent;
838
&:active, &:overview, &:focus {
840
-panel-corner-border-color: on($scrim);
841
}
842
&.lock-screen, &.login-screen, &.unlock-screen {
844
-panel-corner-radius: 0;
845
-panel-corner-background-color: transparent;
846
-panel-corner-border-color: transparent;
847
}
848
}
849
.panel-button {
851
-natural-hpadding: 12px;
852
-minimum-hpadding: 6px;
853
font-weight: bold;
854
color: on($scrim, secondary);
855
text-shadow: none;
856
transition-duration: $duration;
857
.app-menu-icon {
859
-st-icon-style: symbolic;
860
margin-left: 4px;
861
margin-right: 4px;
862
//dimensions of the icon are hardcoded
863
}
864
.system-status-icon,
866
.app-menu-icon > StIcon,
867
.popup-menu-arrow {
868
icon-shadow: none;
869
}
870
&:hover {
872
color: on($scrim);
873
text-shadow: none;
874
.system-status-icon,
876
.app-menu-icon > StIcon,
877
.popup-menu-arrow {
878
icon-shadow: none;
879
}
880
}
881
&:active, &:overview, &:focus, &:checked {
883
// Trick due to St limitations. It needs a background to draw
884
// a box-shadow
885
background-color: rgba($scrim, 0.01);
886
box-shadow: inset 0 -2px 0px on($scrim);
887
color: on($scrim);
888
& > .system-status-icon { icon-shadow: none; }
890
}
891
.system-status-icon { icon-size: em(16px); padding: 0 4px; }
893
.unlock-screen &,
894
.login-screen &,
895
.lock-screen & {
896
color: on($scrim, secondary);
897
&:focus, &:hover, &:active { color: on($scrim); }
898
}
899
}
900
.panel-status-indicators-box,
902
.panel-status-menu-box {
903
spacing: 2px;
904
}
905
// spacing between power icon and (optional) percentage label
907
.power-status.panel-status-indicators-box {
908
spacing: 0;
909
}
910
.screencast-indicator { color: $warning; }
912
&.solid {
914
background-color: $panel;
915
/* transition from transparent to solid */
916
transition-duration: $duration-panel;
917
background-gradient-direction: none; // for Ubuntu session
918
text-shadow: none; // for Ubuntu session
919
&:overview { background-color: transparent; } // for Ubuntu session
921
.panel-corner {
923
-panel-corner-background-color: $panel;
924
}
925
.panel-button {
927
color: on($panel, secondary);
928
text-shadow: none;
929
&:hover, &:active, &:overview, &:focus, &:checked {
931
color: on($panel);
932
}
933
}
934
.system-status-icon,
936
.app-menu-icon > StIcon,
937
.popup-menu-arrow {
938
icon-shadow: none;
939
}
940
}
941
}
942
// calendar popover
944
#calendarArea {
945
padding: 8px 16px;
946
}
947
.calendar {
949
margin-bottom: 0;
950
}
951
.calendar,
953
.datemenu-today-button,
954
.datemenu-displays-box,
955
.message-list-sections {
956
margin: 0 8px;
957
}
958
.datemenu-calendar-column { spacing: 8px; }
960
.datemenu-displays-section { padding-bottom: 0; }
961
.datemenu-displays-box { spacing: 8px; }
962
.datemenu-calendar-column {
964
border: 0 solid $divider;
965
&:ltr { border-left-width: 0; }
966
&:rtl { border-right-width: 0; }
967
}
968
.datemenu-today-button,
970
.world-clocks-button,
971
.weather-button,
972
.events-section-title {
973
min-height: $menuitem-size - 4px * 2;
974
padding: 4px 8px;
975
border-radius: $corner-radius;
976
}
977
.datemenu-today-button {
979
min-height: $menuitem-size * 2 - 4px * 2;
980
}
981
.message-list-section-list:ltr {
983
padding-left: 0;
984
}
985
.message-list-section-list:rtl {
987
padding-right: 0;
988
}
989
.datemenu-today-button,
991
.world-clocks-button,
992
.weather-button,
993
.events-section-title {
994
transition-duration: $duration;
995
&:hover,&:focus { color: $text; background-color: $overlay-hover; }
996
&:active {
997
transition-duration: $duration-ripple;
998
color: $text;
999
background-color: $overlay-active;
1000
}
1001
}
1002
.datemenu-today-button .day-label {
1004
}
1005
.datemenu-today-button .date-label {
1007
@include font(headline);
1008
}
1009
.world-clocks-header,
1011
.weather-header,
1012
.events-section-title {
1013
color: $text-secondary;
1014
font-weight: bold;
1015
}
1016
.world-clocks-grid {
1018
spacing-rows: 0.4em;
1019
}
1020
.weather-box {
1022
spacing: 0.4em;
1023
}
1024
.calendar-month-label {
1026
transition-duration: $duration;
1027
height: $menuitem-size - 6px * 2;
1028
margin: 2px;
1029
padding: 6px 16px;
1030
border-radius: $corner-radius;
1031
color: $text;
1032
font-weight: bold;
1033
text-align: center;
1034
&:focus { background-color: $overlay-focus; }
1035
}
1036
.pager-button {
1038
transition-duration: $duration;
1039
width: $menuitem-size;
1040
height: $menuitem-size;
1041
margin: 2px;
1042
border-radius: 100px;
1043
background-color: transparent;
1044
color: $text;
1045
&:hover, &:focus { background-color: $overlay-hover; }
1046
&:active { background-color: $overlay-active; transition-duration: $duration-ripple; }
1047
}
1048
.calendar-change-month-back { //arrow back
1050
background-image: url("assets/calendar-arrow-left.svg");
1051
&:rtl { background-image: url("assets/calendar-arrow-right.svg"); }
1052
}
1053
.calendar-change-month-forward { //arrow foreward
1054
background-image: url("assets/calendar-arrow-right.svg");
1055
&:rtl { background-image: url("assets/calendar-arrow-left.svg"); }
1056
}
1057
.calendar-day-base {
1059
transition-duration: $duration;
1060
@include font(caption);
1061
text-align: center;
1062
width: $menuitem-size; height: $menuitem-size;
1063
padding: 0;
1064
margin: 2px;
1065
border-radius: 100px;
1066
&:hover,&:focus { background-color: $overlay-hover; }
1067
&:active {
1068
transition-duration: $duration-ripple;
1069
color: inherit;
1070
background-color: $overlay-active;
1071
border-color: transparent; //avoid jumparound due to today
1072
}
1073
&:selected {
1074
color: $text;
1075
background-color: $overlay-selected;
1076
border-color: transparent; //avoid jumparound due to today
1077
}
1078
&.calendar-day-heading { //day of week heading
1079
width: $menuitem-size; height: $menuitem-size - 7px;
1080
margin-top: 2px;
1081
padding: 7px 0 0;
1082
border-radius: 100px;
1083
background-color: transparent;
1084
color: $text-disabled;
1085
@include font(caption);
1086
font-weight: bold;
1087
text-align: center;
1088
}
1089
}
1090
.calendar-day { //border collapse hack - see calendar.js
1091
border-width: 0;
1092
}
1093
.calendar-day-top { border-top-width: 0; }
1094
.calendar-day-left { border-left-width: 0; }
1095
.calendar-work-day {
1096
}
1098
.calendar-nonwork-day {
1099
color: $text;
1100
}
1101
.calendar-today {
1102
font-weight: bold !important;
1103
//color: $text;
1104
//background-color: transparent;
1105
border: none;
1106
}
1107
.calendar-day-with-events {
1108
color: $link;
1109
font-weight: normal;
1110
text-decoration: underline;
1111
background-image: none;
1112
}
1113
.calendar-other-month-day {
1114
color: $text-secondary-disabled;
1115
opacity: 0.5;
1116
}
1117
.calendar-week-number {
1118
width: $menuitem-size; height: $menuitem-size - 7px;
1119
margin: 2px;
1120
padding: 7px 0 0;
1121
border-radius: 100px;
1122
background-color: transparent;
1123
color: $text-disabled;
1124
font-size: inherit;
1125
font-weight: bold;
1126
text-align: center;
1127
}
1128
/* Message list */
1130
.message-list {
1131
width: 420px;
1132
}
1133
.message-list-clear-button.button {
1135
background-color: transparent;
1136
&:hover,&:focus { background-color: $overlay-hover; }
1137
&:active { background-color: $overlay-active; }
1138
margin: 8px 8px 0;
1139
}
1140
.message-list-sections {
1142
spacing: 8px;
1143
}
1144
.message-list-section,
1146
.message-list-section-list {
1147
spacing: 8px;
1148
}
1149
.message {
1151
transition-duration: $duration;
1152
min-height: $menuitem-size * 2;
1153
background-color: transparent;
1154
&:hover,&:focus { background-color: $overlay-hover; }
1155
&:active {
1156
transition-duration: $duration-ripple;
1157
background-color: $overlay-active;
1158
}
1159
border-radius: $corner-radius;
1160
}
1161
.message-icon-bin {
1163
padding: 8px 0px 8px 8px;
1164
&:rtl { padding: 8px 8px 8px 0px; }
1165
}
1166
.message-icon-bin > StIcon {
1168
color: $text;
1169
icon-size: em(16px);
1170
-st-icon-style: requested;
1171
margin: 4px 0px 4px 4px;
1172
&:rtl { margin: 4px 4px 4px 0px; }
1173
}
1174
.message-secondary-bin {
1176
padding: 0 8px;
1177
}
1178
.message-secondary-bin > .event-time {
1180
min-height: $small-size - 2px;
1181
padding-top: 2px;
1182
color: $text-secondary;
1183
font-size: 1em;
1184
/* HACK: the label should be baseline-aligned with a 1em label,
1185
fake this with some bottom padding */
1186
padding-bottom: 0;
1187
}
1188
.message-secondary-bin > StIcon {
1190
icon-size: em(16px);
1191
}
1192
.message-title {
1194
min-height: $small-size - 2px;
1195
padding-top: 2px;
1196
color: $text;
1197
font-weight: bold;
1198
font-size: 1em;
1199
}
1200
.message-content {
1202
min-height: $menuitem-size * 2 - 8px * 2;
1203
padding: 8px;
1204
color: $text-secondary;
1205
font-size: 1em;
1206
}
1207
.message-content * > StIcon {
1209
transition-duration: $duration;
1210
icon-size: 16px;
1211
border-radius: 16px;
1212
padding: ($small-size - 16px) / 2;
1213
color: $text-secondary;
1214
}
1215
/* FIXME: how do you do this in sass? */
1217
.message-content *:hover > StIcon,
1218
.message-content *:focus > StIcon {
1219
color: $text;
1220
background-color: $overlay-hover;
1221
}
1222
.message-content *:active > StIcon {
1224
transition-duration: $duration-ripple;
1225
color: $text;
1226
background-color: $overlay-active;
1227
}
1228
.message-media-control {
1230
transition-duration: $duration;
1231
margin: 16px 0;
1232
padding: 8px;
1233
border-radius: 100px;
1234
color: $text-secondary;
1235
&:hover,&:focus { color: $text; background-color: $overlay-hover; }
1236
&:active { color: $text; background-color: $overlay-active; transition-duration: $duration-ripple; }
1237
&:insensitive { color: $text-secondary-disabled; }
1238
&:last-child:ltr { margin-right: 16px; padding-right: 8px; }
1240
&:last-child:rtl { margin-left: 16px; padding-left: 8px; }
1241
}
1242
.media-message-cover-icon {
1244
icon-size: 32px !important;
1245
margin: 8px 0px 8px 4px !important;
1246
&:rtl { margin: 8px 4px 8px 0px !important; }
1247
&.fallback {
1248
icon-size: 16px !important;
1249
padding: 8px;
1250
border: none;
1251
border-radius: $corner-radius;
1252
background-color: $track-disabled;
1253
color: $text-disabled;
1254
}
1255
}
1256
// a little unstructured mess:
1259
.system-switch-user-submenu-icon.user-icon {
1261
icon-size: 20px;
1262
padding: 0 2px;
1263
}
1264
.system-switch-user-submenu-icon.default-icon {
1265
icon-size: 16px;
1266
padding: 0 4px;
1267
}
1268
#appMenu {
1270
spinner-image: url("process-working.svg");
1271
spacing: 4px;
1272
.label-shadow { color: transparent; }
1274
}
1275
.aggregate-menu {
1277
min-width: 280px;
1278
.popup-menu-icon { padding: 0 4px; }
1279
.popup-sub-menu .popup-menu-item > :first-child {
1280
&:ltr { /* 8px spacing + 2*4px padding */
1281
padding-left: 16px; margin-left: em(16px); }
1282
&:rtl { /* 8px spacing + 2*4px padding */
1283
padding-right: 16px; margin-right: em(16px); }
1284
}
1285
}
1286
.system-menu-action {
1288
color: $text-secondary;
1289
border-radius: 100px; /* wish we could do 50% */
1290
padding: ($large-size - 16px) / 2;
1291
border: none;
1292
transition-duration: $duration;
1293
&:hover, &:focus {
1295
background-color: $overlay-hover;
1296
color: $text;
1297
border: none;
1298
padding: ($large-size - 16px) / 2;
1299
}
1300
&:active { background-color: $overlay-active; color: $text; transition-duration: $duration-ripple; }
1301
& > StIcon { icon-size: 16px; }
1303
}
1304
//Activities Ripples
1306
.ripple-box {
1307
width: 48px;
1308
height: 48px;
1309
border-radius: 0 0 48px 0;
1310
background-color: on(dark, track);
1311
background-image: none;
1312
background-size: auto;
1313
}
1314
.ripple-box:rtl {
1316
border-radius: 0 0 0 48px;
1317
background-image: none;
1318
}
1319
// not really top bar only
1321
.popup-menu-arrow { width: 16px; height: 16px; }
1322
.popup-menu-icon { icon-size: em(16px); }
1323
//close buttons
1325
.window-close {
1327
// FIXME: unless disable the transition, button will distort when hovering
1328
// transition-duration: $duration;
1329
height: $medium-size;
1330
width: $medium-size;
1331
-shell-close-overlap: $medium-size / 2;
1332
-st-background-image-shadow: $shadow-1;
1333
background-image: url("assets/window-close.svg");
1334
background-size: $medium-size;
1335
&:hover {
1337
-st-background-image-shadow: $shadow-2;
1338
background-image: url("assets/window-close.svg");
1339
}
1340
&:active {
1341
// transition-duration: $duration-ripple;
1342
background-image: url("assets/window-close-active.svg");
1343
}
1344
// For backward compatibility of 3.26.0
1346
&:rtl { -st-background-image-shadow: $shadow-1; }
1347
&:rtl:hover { -st-background-image-shadow: $shadow-2; }
1348
}
1349
/* NETWORK DIALOGS */
1351
.nm-dialog {
1353
max-height: 34em;
1354
min-height: 31em;
1355
min-width: 32em;
1356
}
1357
.nm-dialog-content {
1359
spacing: 20px;
1360
padding: 24px;
1361
}
1362
.nm-dialog-header-hbox { spacing: 10px; }
1363
.nm-dialog-airplane-box { spacing: 12px; }
1364
.nm-dialog-airplane-headline {
1366
font-weight: bold;
1367
text-align: center;
1368
}
1369
.nm-dialog-airplane-text { color: $text; }
1371
.nm-dialog-header-icon { icon-size: 32px; }
1372
.nm-dialog-scroll-view { border: none; }
1373
.nm-dialog-header { @include font(title); }
1374
.nm-dialog-item {
1376
transition-duration: $duration;
1377
font-size: 1em;
1378
border-bottom: none;
1379
border-radius: $corner-radius;
1380
padding: 12px;
1381
spacing: 20px;
1382
&:hover, &:focus { background-color: $overlay-hover; }
1383
&:active {
1384
transition-duration: $duration-ripple;
1385
background-color: $overlay-active;
1386
}
1387
}
1388
.nm-dialog-item:selected {
1390
background-color: $overlay-selected;
1391
color: $text;
1392
}
1393
.nm-dialog-icons { spacing: .5em; }
1395
.nm-dialog-icon { icon-size: 16px; }
1396
.no-networks-label { color: $text-disabled; }
1397
.no-networks-box { spacing: 12px; }
1398
/* OVERVIEW */
1400
#overview {
1402
spacing: 24px; //
1403
StScrollBar { @extend %overview_scrollbar; }
1404
}
1405
.overview-controls {
1407
padding-bottom: 32px;
1408
}
1409
.window-picker { //container around window thumbnails
1411
-horizontal-spacing: 16px;
1412
-vertical-spacing: 16px;
1413
padding: 0 16px 32px;
1414
&.external-monitor { padding: 16px; }
1416
}
1417
.window-clone-border {
1419
border: 4px solid on(dark, track);
1420
border-radius: $corner-radius;
1421
// For window decorations with round corners we can't match
1422
// the exact shape when the window is scaled. So apply a shadow
1423
// to fix that case
1424
box-shadow: inset 0 0 0 1px on(dark, track);
1425
}
1426
.window-caption {
1427
spacing: 25px;
1428
color: on($scrim);
1429
background-color: $scrim;
1430
border-radius: $corner-radius;
1431
padding: 4px 8px;
1432
}
1433
//search entry
1435
.search-entry {
1436
width: 320px - 8px * 2;
1437
padding: 0 8px;
1438
border-radius: $corner-radius $corner-radius 0 0;
1439
color: on(dark, disabled);
1440
selection-background-color: on(dark, track);
1441
selected-color: on(dark);
1442
@include entry(normal,$fc:on(dark, track));
1443
&:hover { @include entry(hover,$fc:on(dark, track)); }
1444
&:focus {
1445
@include entry(focus,$fc:on(dark));
1446
padding: 0 8px;
1447
border-width: 0;
1448
color: on(dark);
1449
}
1450
.search-entry-icon { icon-size: 16px; padding: 0 0; color: on(dark, secondary); }
1452
&:hover, &:focus {
1454
.search-entry-icon { color: on(dark); }
1455
}
1456
}
1457
//search results
1459
#searchResultsBin {
1461
max-width: 1000px;
1462
}
1463
#searchResultsContent {
1465
padding-left: 20px;
1466
padding-right: 20px;
1467
spacing: 16px;
1468
}
1469
.search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
1471
.search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container
1472
.search-statustext { // "no results"
1473
@extend %status_text;
1474
}
1475
.list-search-results { spacing: 3px; }
1476
.search-section-separator { height: 1px; background-color: on(dark, divider); }
1478
.list-search-result-content { spacing: 30px; }
1480
.list-search-result-title { @include font(subheading); color: on(dark); spacing: 12px; }
1481
.list-search-result-description { color: on(dark, secondary); }
1482
.list-search-provider-details { width: 150px; color: on(dark, secondary); margin-top: 0.24em; }
1483
.list-search-provider-content { spacing: 20px; }
1484
.search-provider-icon { padding: 15px; }
1485
/* DASHBOARD */
1488
#dash {
1490
transition-duration: $duration-panel;
1491
font-size: 1em;
1492
color: on(dark);
1493
background-color: $scrim-inverse;
1494
padding: 3px 0;
1495
border: none;
1496
border-left: 0px;
1497
border-radius: 0px $corner-radius $corner-radius 0px;
1498
&:rtl {
1500
border-radius: $corner-radius 0 0 $corner-radius;
1501
}
1502
.placeholder {
1504
background-image: url("assets/dash-placeholder.svg");
1505
background-size: contain;
1506
height: 24px;
1507
}
1508
.empty-dash-drop-target {
1510
width: 24px;
1511
height: 24px;
1512
}
1513
}
1515
.dash-item-container > StWidget {
1517
padding: 3px 6px;
1518
}
1519
.dash-label { //osd tooltip
1521
// min-height: 32px - 6px * 2;
1522
border-radius: $corner-radius;
1523
padding: 7px 8px;
1524
color: $text;
1525
background-color: $surface;
1526
box-shadow: $shadow-2;
1527
text-align: center;
1528
-x-offset: 8px;
1529
}
1530
/* App Vault/Grid */
1532
.icon-grid {
1533
spacing: 30px;
1534
-shell-grid-horizontal-item-size: 136px;
1535
-shell-grid-vertical-item-size: 136px;
1536
.overview-icon { icon-size: 96px; }
1538
}
1539
//.app-display { spacing: 20px; }
1540
.system-action-icon {
1542
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); // FIXME: this should really have a highlight
1543
background-color: $grey_900;
1544
color: $white;
1545
border-radius: 99px;
1546
icon-size: 48px;
1547
}
1548
.app-view-controls { //favorties | all toggle container
1550
width: 320px;
1551
padding-bottom: 32px;
1552
}
1553
.app-view-control { //favorties | all toggle button
1554
padding: 0 16px;
1555
font-weight: bold;
1556
color: on(dark, secondary);
1557
&:hover {
1558
color: on(dark);
1559
background-color: $inverse-overlay-hover !important;
1560
}
1561
&:active {
1562
color: on(dark);
1563
background-color: $inverse-overlay-active !important;
1564
}
1565
&:checked {
1566
color: on(dark);
1567
background-color: rgba($scrim, 0.01) !important;
1568
box-shadow: inset 0 2px 0 on(dark);
1569
}
1570
&:first-child {
1571
border-right-width: 0;
1572
border-radius: $corner-radius;
1573
&:checked { border-radius: 0; }
1574
}
1575
&:last-child {
1576
border-radius: $corner-radius;
1577
&:checked { border-radius: 0; }
1578
}
1579
}
1580
//Icon tile
1582
.search-provider-icon,
1583
.list-search-result {
1584
@extend %icon_tile;
1585
&:focus, &:selected, &:hover {
1586
background-color: $inverse-overlay-hover;
1587
transition-duration: 0ms;
1588
}
1589
&:active, &:checked {
1590
background-color: $inverse-overlay-active;
1591
transition-duration: $duration-ripple;
1592
}
1593
}
1594
.app-well-app,
1595
.app-well-app.app-folder,
1596
.show-apps,
1597
.grid-search-result {
1598
& .overview-icon {
1599
@extend %icon_tile;
1600
}
1601
&:hover .overview-icon,
1602
&:focus .overview-icon,
1603
&:selected .overview-icon {
1604
background-color: $inverse-overlay-hover;
1605
transition-duration: 0ms;
1606
border-image: none;
1607
background-image: none;
1608
}
1609
&:active .overview-icon,
1610
&:checked .overview-icon {
1611
background-color: $inverse-overlay-active;
1612
box-shadow: $shadow-0;
1613
transition-duration: $duration-ripple;
1614
}
1615
}
1617
.app-well-app-running-dot { //running apps indicator
1619
width: 32px; height: 2px;
1620
background-color: on(dark);
1621
margin-bottom: 0;
1622
}
1623
%icon_tile {
1625
color: on(dark);
1626
border-radius: $corner-radius;
1627
padding: 6px;
1628
border: none;
1629
transition-duration: $duration;
1630
text-align: center;
1631
}
1632
.app-well-app.app-folder > .overview-icon {
1634
background-color: $scrim-inverse;
1635
}
1636
.show-apps .show-apps-icon {
1638
color: on(dark, secondary);
1639
}
1640
.show-apps:hover .show-apps-icon,
1642
.show-apps:active .show-apps-icon,
1643
.show-apps:checked .show-apps-icon,
1644
.show-apps:focus .show-apps-icon {
1645
color: on(dark);
1646
transition-duration: $duration;
1647
}
1648
// Collections
1651
.app-folder-popup { //expanded collection
1652
-arrow-border-radius: $corner-radius;
1653
-arrow-background-color: $scrim-inverse;
1654
-arrow-base: 24px;
1655
-arrow-rise: 12px;
1656
}
1657
.app-folder-popup-bin { padding: 5px; }
1658
.app-folder-icon {
1659
padding: 5px;
1660
spacing-rows: 5px;
1661
spacing-columns: 5px;
1662
}
1663
.page-indicator {
1665
padding: 15px 20px;
1666
.page-indicator-icon {
1668
width: 12px;
1669
height: 12px;
1670
border-radius: 12px;
1671
background-image: none;
1672
background-color: on(dark, secondary-disabled);
1673
transition-duration: $duration;
1674
}
1675
&:hover .page-indicator-icon {
1676
background-image: none;
1677
background-color: on(dark, disabled);
1678
}
1679
&:active .page-indicator-icon {
1680
background-image: none;
1681
background-color: on(dark, secondary);
1682
}
1683
&:checked .page-indicator-icon {
1684
background-image: none;
1685
background-color: on(dark);
1686
transition-duration: 0ms;
1687
}
1688
&:checked:active { background-image: none; }
1689
}
1690
.no-frequent-applications-label { @extend %status_text; }
1692
.app-well-app > .overview-icon.overview-icon-with-label,
1694
.grid-search-result .overview-icon.overview-icon-with-label {
1695
padding: 10px 8px 5px 8px;
1696
spacing: 4px;
1697
}
1698
// Workspace pager
1700
.workspace-thumbnails { //container ala dash
1701
@extend %overview-panel;
1702
visible-width: 32px; //amount visible before hover
1703
spacing: 12px;
1704
padding: 12px;
1705
border-radius: $corner-radius 0 0 $corner-radius;
1706
//border-width: 0; //fixme: can't have non unoform borders :(
1707
&:rtl { border-radius: 0 $corner-radius $corner-radius 0;}
1708
.placeholder {
1710
background-image: url("assets/dash-placeholder.svg");
1711
background-size: contain;
1712
height: 24px;
1713
}
1714
}
1715
.workspace-thumbnail-indicator {
1716
border: 0 solid on(dark);
1717
border-left-width: 2px;
1718
padding: 6px 10px;
1719
border-radius: 0;
1720
}
1721
//Some hacks I don't even
1723
.search-display > StBoxLayout,
1724
.all-apps,
1725
.frequent-apps > StBoxLayout {
1726
// horizontal padding to make sure scrollbars or dash don't overlap content
1727
padding: 0px 88px 10px 88px;
1728
}
1729
%overview-panel {
1731
transition-duration: $duration-panel;
1732
color: on(dark);
1733
background-color: $scrim-inverse;
1734
border: none;
1735
}
1736
%status_text {
1738
@include font(display-2);
1739
color: on(dark, disabled);
1740
}
1741
/* NOTIFICATIONS & MESSAGE TRAY */
1743
.url-highlighter { link-color: $link; }
1745
// Banners
1747
.notification-banner {
1748
font-size: 1em;
1749
width: 34em;
1750
min-height: $menuitem-size * 2;
1751
margin: 5px;
1752
border-radius: $corner-radius;
1753
color: $text;
1754
background-color: $surface;
1755
border: none;
1756
box-shadow: $shadow-2;
1757
&:hover { background-color: $surface; }
1758
&:focus { background-color: $surface; }
1759
.notification-icon { padding: 5px; }
1761
.notification-content { padding: 5px; spacing: 5px; }
1762
.secondary-icon { icon-size: em(16px); }
1763
.notification-actions {
1764
background-color: transparent;
1765
padding-top: 0;
1766
padding: $container-padding;
1767
spacing: $container-padding;
1768
}
1769
.notification-button {
1770
transition-duration: $duration;
1771
min-height: $medium-size;
1772
padding: 0 8px;
1773
border-radius: $corner-radius;
1774
background-color: transparent;
1775
color: $text-secondary;
1776
font-weight: 500;
1777
&:first-child { border-radius: $corner-radius; }
1778
&:last-child { border-radius: $corner-radius; }
1779
&:hover, &focus { background-color: $overlay-hover; color: $text; }
1780
&:active {
1781
transition-duration: $duration-ripple;
1782
background-color: $overlay-active;
1783
color: $text;
1784
}
1785
}
1786
}
1787
.summary-source-counter {
1788
font-size: 1em;
1789
font-weight: bold;
1790
height: 1.6em; width: 1.6em;
1791
-shell-counter-overlap-x: 3px;
1792
-shell-counter-overlap-y: 3px;
1793
background-color: $primary;
1794
color: on($primary);
1795
border: 2px solid on($primary);
1796
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
1797
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
1798
}
1799
.secondary-icon { icon-size: em(16px); }
1801
//chat bubbles
1803
.chat-body { spacing: 5px; }
1804
.chat-response { margin: 5px; }
1805
.chat-log-message { color: $text; }
1806
.chat-new-group { padding-top: 1em; }
1807
.chat-received {
1808
padding-left: 4px;
1809
&:rtl { padding-left: 0px; padding-right: 4px; }
1810
}
1811
.chat-sent {
1812
padding-left: 18pt;
1813
color: $text-secondary;
1814
&:rtl { padding-left: 0; padding-right: 18pt; }
1815
}
1816
.chat-meta-message {
1817
padding-left: 4px;
1818
@include font(caption);
1819
color: $text-secondary;
1820
&:rtl { padding-left: 0; padding-right: 4px; }
1821
}
1822
//hotplug
1824
.hotplug-transient-box {
1825
spacing: 6px;
1826
padding: 2px 72px 2px 12px;
1827
}
1828
.hotplug-notification-item {
1829
padding: 2px 10px;
1830
&:focus { padding: 1px 71px 1px 11px; }
1831
}
1832
.hotplug-notification-item-icon {
1834
icon-size: 24px;
1835
padding: 2px 5px;
1836
}
1837
.hotplug-resident-box { spacing: 8px; }
1839
.hotplug-resident-mount {
1841
transition-duration: $duration;
1842
spacing: 8px;
1843
border-radius: $corner-radius;
1844
&:hover { background-color: $overlay-hover; }
1845
&:active {
1846
transition-duration: $duration-ripple;
1847
background-color: $overlay-active;
1848
}
1849
}
1850
.hotplug-resident-mount-label {
1852
color: inherit;
1853
padding-left: 6px;
1854
}
1855
.hotplug-resident-mount-icon {
1857
icon-size: 24px;
1858
padding-left: 6px;
1859
}
1860
.hotplug-resident-eject-icon {
1862
icon-size: 16px;
1863
}
1864
.hotplug-resident-eject-button {
1866
padding: 7px;
1867
border-radius: $corner-radius;
1868
color: $text;
1869
}
1870
/* Eeeky things */
1872
//magnifier
1874
.magnifier-zoom-region {
1876
border: 2px solid $primary;
1877
&.full-screen { border-width: 0; }
1878
}
1879
//Keyboard
1881
/* On-screen Keyboard */
1882
#keyboard {
1884
background-color: $scrim-alt;
1885
}
1886
.keyboard-layout {
1888
spacing: 10px;
1889
padding: 10px;
1890
}
1891
.keyboard-row { spacing: 15px; }
1893
.keyboard-key {
1895
min-height: 1.2em;
1896
min-width: 1.2em;
1897
font-size: 2em;
1898
font-weight: 500;
1899
border-radius: $corner-radius;
1900
border: none;
1901
@include button(normal);
1902
&:focus { @include button(focus); }
1903
&:hover,&:checked { @include button(hover); }
1904
&:active { @include button(active);}
1905
&:grayed { //FIXME
1906
background-color: $scrim-alt;
1907
color: on($scrim-alt);
1908
border-color: $scrim-alt;
1909
}
1910
}
1911
.keyboard-subkeys { //long press on a key popup
1913
color: inherit;
1914
padding: 5px;
1915
-arrow-border-radius: 0;
1916
-arrow-background-color: transparent;
1917
-arrow-border-width: 0;
1918
-arrow-border-color: transparent;
1919
-arrow-base: 0;
1920
-arrow-rise: 0;
1921
-boxpointer-gap: 5px;
1922
background-color: $surface;
1923
border-radius: $corner-radius;
1924
box-shadow: $shadow-2;
1925
}
1926
// IBus Candidate Popup
1928
.candidate-popup-content {
1930
padding: 8px;
1931
spacing: 0;
1932
}
1933
.candidate-index {
1935
padding: 0 4px 0 0;
1936
color: $text-secondary;
1937
}
1938
.candidate-box {
1940
transition-duration: $duration;
1941
min-height: $menuitem-size;
1942
padding: 0 8px;
1943
border-radius: $corner-radius;
1944
&:hover { background-color: $overlay-hover; color: $text; transition-duration: 0ms; }
1945
&:active { background-color: $overlay-active; color: $text; transition-duration: $duration-ripple; }
1946
&:selected { background-color: $overlay-selected; color: $text; transition-duration: 0ms; }
1947
}
1948
.candidate-page-button-box {
1950
height: $menuitem-size;
1951
.vertical & { padding-top: 0; }
1952
.horizontal & { padding-left: 0; }
1953
}
1954
.candidate-page-button {
1956
min-width: $menuitem-size;
1957
min-height: $menuitem-size;
1958
padding: 0;
1959
}
1960
.candidate-page-button-previous { border-radius: $corner-radius; border-right-width: 0; }
1962
.candidate-page-button-next { border-radius: $corner-radius; }
1963
.candidate-page-button-icon { icon-size: em(16px); }
1964
/* Auth Dialogs & Screen Shield */
1966
.framed-user-icon {
1968
background-size: contain;
1969
border: none;
1970
color: on($os-background);
1971
border-radius: $corner-radius;
1972
&:hover {
1973
border-color: on($os-background);
1974
color: on($os-background);
1975
}
1976
}
1977
// LOGIN DIALOG
1979
.login-dialog-banner-view {
1981
padding-top: 24px;
1982
max-width: 23em;
1983
}
1984
.login-dialog {
1986
//reset
1987
border: none;
1988
background-color: transparent;
1989
StEntry {
1991
color: on($os-background);
1992
selection-background-color: on($os-background, track);
1993
selected-color: on($os-background);
1994
@include entry(normal, $fc:on($os-background, track));
1995
&:focus { @include entry(focus, $fc:on($os-background)); }
1996
&:insensitive {
1997
@include entry(insensitive, $fc:on($os-background, track-disabled));
1998
color: on($os-background, disabled);
1999
}
2000
}
2001
.modal-dialog-button-box { spacing: 3px; }
2003
.modal-dialog-button {
2004
padding: 0 16px;
2005
@include button(flat-normal, $tc: on($os-background));
2006
&:hover,&:focus { @include button(flat-hover, $tc: on($os-background)); }
2007
&:active { @include button(flat-active, $tc: on($os-background)); }
2008
&:insensitive { @include button(flat-insensitive, $tc: on($os-background)); }
2009
&:default {
2011
@include button(normal, $c: $suggested, $tc: on($suggested));
2012
&:hover,&:focus { @include button(hover, $c: $suggested, $tc: on($suggested)); }
2013
&:active { @include button(active, $c: $suggested, $tc: on($suggested)); }
2014
&:insensitive { @include button(insensitive, $c: on($os-background, fill), $tc: on($os-background, disabled)); }
2015
}
2016
}
2017
}
2018
.login-dialog-logo-bin { padding: 24px 0px; }
2020
.login-dialog-banner { color: on($os-background, secondary); }
2021
.login-dialog-button-box { spacing: 5px; }
2022
.login-dialog-message-warning { color: $warning; }
2023
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
2024
.login-dialog-user-selection-box { padding: 100px 0px; }
2025
.login-dialog-not-listed-label {
2026
padding-left: 2px;
2027
.login-dialog-not-listed-button:focus &,
2028
.login-dialog-not-listed-button:hover & {
2029
color: on($os-background);
2030
}
2031
}
2032
.login-dialog-not-listed-label {
2033
transition-duration: $duration;
2034
font-size: 1em;
2035
font-weight: bold;
2036
color: on($os-background, secondary);
2037
padding-top: 1em;
2038
border-radius: $corner-radius;
2039
&:hover {
2040
background-color: $inverse-overlay-hover;
2041
color: on($os-background);
2042
}
2043
&:focus { background-color: $inverse-overlay-focus; }
2044
&:active {
2045
transition-duration: $duration-ripple;
2046
background-color: $inverse-overlay-active;
2047
color: on($os-background);
2048
}
2049
}
2050
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
2052
.login-dialog-user-list {
2053
spacing: 12px;
2054
padding: .2em;
2055
width: 23em;
2056
&:expanded .login-dialog-user-list-item:selected { background-color: $inverse-overlay-focus; color: on($os-background); }
2057
&:expanded .login-dialog-user-list-item:hover { background-color: $inverse-overlay-hover; color: on($os-background); }
2058
&:expanded .login-dialog-user-list-item:active { background-color: $inverse-overlay-active; color: on($os-background); }
2059
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid on($os-background); }
2060
}
2061
.login-dialog-user-list-item {
2062
transition-duration: $duration;
2063
border-radius: $corner-radius;
2064
padding: 4px 4px 0;
2065
color: on($os-background, secondary);
2066
&:ltr { padding-right: 1em; }
2067
&:rtl { padding-left: 1em; }
2068
&:hover {
2069
background-color: $inverse-overlay-hover;
2070
color: on($os-background);
2071
}
2072
&:active {
2073
transition-duration: $duration-ripple;
2074
background-color: $inverse-overlay-active;
2075
color: on($os-background);
2076
}
2077
.login-dialog-timed-login-indicator {
2078
height: 2px;
2079
margin: 2px 0 0 0;
2080
background-color: on($os-background);
2081
}
2082
&:focus .login-dialog-timed-login-indicator { background-color: on($os-background); }
2083
}
2084
.login-dialog-username,
2086
.user-widget-label {
2087
color: on($os-background);
2088
@include font(title);
2089
text-align: left;
2090
padding-left: 15px;
2091
}
2092
.user-widget-label {
2093
&:ltr { padding-left: 18px; }
2094
&:rtl { padding-right: 18px; }
2095
}
2096
.login-dialog-prompt-layout {
2098
padding-top: 24px;
2099
padding-bottom: 12px;
2100
spacing: 8px;
2101
width: 23em;
2102
}
2103
.login-dialog-prompt-label {
2105
color: on($os-background, secondary);
2106
font-size: 1em;
2107
padding-top: 1em;
2108
}
2109
.login-dialog-session-list-button StIcon {
2111
icon-size: 1.25em;
2112
}
2113
.login-dialog-session-list-button {
2115
color: on($os-background, secondary);
2116
&:hover,&:focus { color: on($os-background); }
2117
&:active { color: on($os-background); }
2118
}
2119
//SCREEN SHIELD
2121
.screen-shield-arrows {
2123
padding-bottom: 3em;
2124
}
2125
.screen-shield-arrows Gjs_Arrow {
2127
color: white;
2128
width: 80px;
2129
height: 48px;
2130
-arrow-thickness: 12px;
2131
-arrow-shadow: $shadow-1;
2132
}
2133
.screen-shield-clock {
2135
color: white;
2136
text-shadow: $shadow-1;
2137
font-weight: normal;
2138
text-align: center;
2139
padding-bottom: 1.5em;
2140
}
2141
.screen-shield-clock-time {
2143
@include font(display-4);
2144
text-shadow: $shadow-1;
2145
}
2146
.screen-shield-clock-date { @include font(display-2); }
2148
.screen-shield-notifications-container {
2150
spacing: 6px;
2151
width: 30em;
2152
background-color: transparent;
2153
max-height: 500px;
2154
.summary-notification-stack-scrollview {
2155
padding-top: 0;
2156
padding-bottom: 0;
2157
}
2158
.notification,
2160
.screen-shield-notification-source {
2161
padding: 8px;
2162
border: none;
2163
background-color: $scrim-alt;
2164
color: on($scrim-alt);
2165
border-radius: $corner-radius;
2166
}
2167
.notification { margin-right: 16px; } //compensate for space allocated to the scrollbar
2168
}
2169
.screen-shield-notification-label {
2172
min-height: $small-size - 2px;
2173
padding: 2px 0px 0px 16px;
2174
font-weight: bold;
2175
}
2176
.screen-shield-notification-count-text {
2178
min-height: $small-size - 2px;
2179
padding: 2px 0px 0px 16px;
2180
color: on($scrim-alt, secondary);
2181
}
2182
#panel.lock-screen { background-color: $scrim-alt; }
2184
.screen-shield-background { //just the shadow, really
2186
background: black;
2187
box-shadow: $shadow-5;
2188
}
2189
#lockDialogGroup {
2191
background: $os-background;
2192
background-size: cover;
2193
}
2194
#screenShieldNotifications {
2196
StScrollBar { @extend %overview_scrollbar; }
2197
}
2198
// Looking Glass
2201
#LookingGlassDialog {
2202
background-color: $surface;
2203
spacing: 4px;
2204
padding: 0;
2205
border: none;
2206
border-radius: $corner-radius;
2207
box-shadow: $shadow-4;
2208
& > #Toolbar {
2209
padding: 0 8px;
2210
border: none;
2211
border-radius: 0;
2212
background-color: rgba($surface, 0.01);
2213
box-shadow: inset 0 -1px 0 $divider;
2214
}
2215
.labels { spacing: 0; }
2216
.notebook-tab {
2217
-natural-hpadding: 12px;
2218
-minimum-hpadding: 6px;
2219
font-weight: bold;
2220
color: $text-secondary;
2221
transition-duration: $duration;
2222
padding-left: 16px;
2223
padding-right: 16px;
2224
min-height: $medium-size;
2225
padding: 0 16px * 2;
2226
&:hover {
2227
background-color: $overlay-hover;
2228
color: $text;
2229
text-shadow: none;
2230
}
2231
&:active {
2232
background-color: $overlay-active;
2233
color: $text;
2234
transition-duration: $duration-ripple;
2235
}
2236
&:selected {
2237
border-bottom-width: 0;
2238
border-color: transparent;
2239
background-color: rgba($surface, 0.01);
2240
box-shadow: inset 0 -2px 0px $primary;
2241
color: $text;
2242
text-shadow: none;
2243
}
2244
}
2245
StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
2246
StBoxLayout#ResultsArea { spacing: 4px; }
2247
}
2248
.lg-dialog {
2250
StEntry {
2251
selection-background-color: $overlay-selected;
2252
selected-color: $text;
2253
}
2254
.shell-link {
2255
color: $link;
2256
&:hover { color: $link; }
2257
}
2258
}
2259
.lg-completions-text {
2261
font-size: 1em;
2262
font-style: italic;
2263
}
2264
.lg-obj-inspector-title {
2266
spacing: 4px;
2267
}
2268
.lg-obj-inspector-button {
2270
min-height: $medium-size;
2271
padding: 0 16px;
2272
border: none;
2273
border-radius: $corner-radius;
2274
@include font(button);
2275
@include button(flat-normal);
2276
&:hover { @include button(flat-hover); }
2277
&:active { @include button(flat-active); }
2278
&:insensitive { @include button(flat-insensitive); }
2279
&:focus { @include button(flat-focus); }
2280
&:hover { border: none; }
2281
}
2282
#lookingGlassExtensions { padding: 4px; }
2284
.lg-extensions-list {
2286
padding: 4px;
2287
spacing: 6px;
2288
}
2289
.lg-extension {
2291
border: none;
2292
border-radius: $corner-radius;
2293
padding: 4px;
2294
}
2295
.lg-extension-name {
2297
@include font(headline);
2298
}
2299
.lg-extension-meta {
2301
spacing: 6px;
2302
}
2303
#LookingGlassPropertyInspector {
2305
background: $surface;
2306
border: none;
2307
border-radius: $corner-radius;
2308
padding: 6px;
2309
box-shadow: $shadow-4;
2310
}
2311