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: $material_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: $material_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: $material_radius;
67
}
68
&:last-child {
69
margin-right: $container_padding;
70
border-right-width: 0px;
71
border-radius: $material_radius;
72
}
73
&:first-child:last-child {
74
margin-right: $container_padding;
75
border-right-width: 0px;
76
border-radius: $material_radius;
77
}
78
}
79
/* Entries */
81
StEntry {
82
min-height: $medium_size;
83
padding: 0 8px;
84
border-radius: $material_radius $material_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: $divider;
121
}
122
StButton#vhandle, StButton#hhandle {
124
transition-duration: $shorter_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: $inverse-divider;
137
}
138
StButton#vhandle, StButton#hhandle {
140
background-color: $inverse-text-disabled;
141
&:hover { background-color: $inverse-text-secondary; }
142
&:active { background-color: $inverse-text; }
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: $shorter_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: $longer_duration;
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: $shorter_duration;
217
border-radius: $material_radius;
218
color: $link;
219
&:hover {
220
color: $link;
221
background-color: rgba($link, 0.08);
222
}
223
&:active {
224
transition-duration: $longer_duration;
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: $material_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
.show-processes-dialog-subject,
261
.mount-question-dialog-subject,
262
.end-session-dialog-subject { //this should be a generic header class
263
@include font(title);
264
}
265
/* End Session Dialog */
267
.end-session-dialog {
268
spacing: 42px;
269
border: none;
270
}
271
.end-session-dialog-list {
273
padding-top: 20px;
274
}
275
.end-session-dialog-layout {
277
padding-left: 17px;
278
&:rtl { padding-right: 17px; }
279
}
280
.end-session-dialog-description {
282
width: 28em;
283
padding-bottom: 10px;
284
&:rtl {
285
text-align: right;
286
}
287
}
288
.end-session-dialog-warning {
290
width: 28em;
291
color: $warning;
292
padding-top: 6px;
293
&:rtl {
294
text-align: right;
295
}
296
}
297
.end-session-dialog-logout-icon {
299
//border: 2px solid #8b8b8b;
300
border-radius: 5px;
301
width: 48px;
302
height: 48px;
303
background-size: contain;
304
}
305
.end-session-dialog-shutdown-icon {
307
color: $text-disabled;
308
width: 48px;
309
height: 48px;
310
}
311
.end-session-dialog-inhibitor-layout {
313
spacing: 16px;
314
max-height: 200px;
315
padding-right: 65px;
316
padding-left: 65px;
317
}
318
.end-session-dialog-session-list,
320
.end-session-dialog-app-list {
321
spacing: 1em;
322
}
323
.end-session-dialog-list-header {
325
font-weight: bold;
326
&:rtl { text-align: right; }
327
}
328
.end-session-dialog-app-list-item,
330
.end-session-dialog-session-list-item {
331
spacing: 1em;
332
}
333
.end-session-dialog-app-list-item-name,
335
.end-session-dialog-session-list-item-name {
336
font-weight: bold;
337
}
338
.end-session-dialog-app-list-item-description {
340
color: $text-secondary;
341
font-size: 1em;
342
}
343
/* ShellMountOperation Dialogs */
345
.shell-mount-operation-icon { icon-size: 48px; }
346
.show-processes-dialog,
348
.mount-question-dialog {
349
spacing: 24px;
350
}
351
.show-processes-dialog-subject,
353
.mount-question-dialog-subject {
354
padding-top: 10px;
355
padding-left: 17px;
356
padding-bottom: 6px;
357
}
358
.mount-question-dialog-subject {
360
max-width: 34em;
361
}
362
.show-processes-dialog-subject:rtl,
364
.mount-question-dialog-subject:rtl {
365
padding-left: 0px;
366
padding-right: 17px;
367
}
368
.show-processes-dialog-description,
370
.mount-question-dialog-description {
371
padding-left: 17px;
372
width: 28em;
373
}
374
.show-processes-dialog-description:rtl,
376
.mount-question-dialog-description:rtl {
377
padding-right: 17px;
378
}
379
.show-processes-dialog-app-list {
381
max-height: 200px;
382
padding-top: 24px;
383
padding-left: 49px;
384
padding-right: 32px;
385
}
386
.show-processes-dialog-app-list:rtl {
388
padding-right: 49px;
389
padding-left: 32px;
390
}
391
.show-processes-dialog-app-list-item {
393
color: $text;
394
&:hover { color: $text; }
395
&:ltr { padding-right: 1em; }
396
&:rtl { padding-left: 1em; }
397
}
398
.show-processes-dialog-app-list-item-icon {
400
&:ltr { padding-right: 17px; }
401
&:rtl { padding-left: 17px; }
402
}
403
.show-processes-dialog-app-list-item-name {
405
font-size: 1em;
406
}
407
/* Password or Authentication Dialog */
410
.prompt-dialog {
412
//this is the width of the entire modal popup
413
width: 34em;
414
border: none;
415
}
416
.prompt-dialog-main-layout {
418
spacing: 24px;
419
padding: 10px;
420
}
421
.prompt-dialog-message-layout {
423
spacing: 16px;
424
}
425
.prompt-dialog-headline {
427
@include font(title);
428
color: $text;
429
}
430
.prompt-dialog-description:rtl {
432
text-align: right;
433
}
434
.prompt-dialog-password-box {
436
spacing: 1em;
437
padding-bottom: 1em;
438
}
439
.prompt-dialog-error-label {
441
font-size: 1em;
442
color: $error;
443
padding-bottom: 8px;
444
}
445
.prompt-dialog-info-label {
447
font-size: 1em;
448
padding-bottom: 8px;
449
}
450
.hidden {
452
color: rgba(0,0,0,0);
453
}
454
.prompt-dialog-null-label {
456
font-size: 1em;
457
padding-bottom: 8px;
458
}
459
/* Polkit Dialog */
462
.polkit-dialog-user-layout {
464
padding-left: 10px;
465
spacing: 10px;
466
&:rtl {
467
padding-left: 0px;
468
padding-right: 10px;
469
}
470
}
471
.polkit-dialog-user-root-label {
473
color: $warning;
474
}
475
.polkit-dialog-user-icon {
477
border-radius: 5px;
478
background-size: contain;
479
width: 48px;
480
height: 48px;
481
}
482
/* Audio selection dialog */
484
.audio-device-selection-dialog {
485
spacing: 30px;
486
}
487
.audio-selection-content {
489
spacing: 20px;
490
padding: 24px;
491
}
492
.audio-selection-title {
494
font-weight: bold;
495
text-align: center;
496
}
497
.audio-selection-box {
499
spacing: 20px;
500
}
501
.audio-selection-device {
503
border: 1px solid $border;
504
border-radius: $material_radius;
505
&:active,&:hover,&:focus { background-color: $primary; }
506
}
507
.audio-selection-device-box {
509
padding: 20px;
510
spacing: 20px;
511
}
512
.audio-selection-device-icon {
514
icon-size: 64px;
515
}
516
/* Access Dialog */
518
.access-dialog {
519
spacing: 30px;
520
}
521
.access-dialog-main-layout {
523
padding: 12px 20px 0;
524
spacing: 12px;
525
}
526
.access-dialog-content {
528
max-width: 28em;
529
spacing: 20px;
530
}
531
.access-dialog-icon {
533
min-width: 48px;
534
icon-size: 48px;
535
}
536
.access-dialog-title {
538
font-weight: bold;
539
}
540
.access-dialog-subtitle {
542
color: $text-secondary;
543
font-weight: bold;
544
}
545
/* Geolocation Dialog */
547
.geolocation-dialog {
548
spacing: 30px;
549
}
550
.geolocation-dialog-main-layout {
552
spacing: 12px;
553
}
554
.geolocation-dialog-content {
556
spacing: 20px;
557
}
558
.geolocation-dialog-icon {
560
icon-size: 48px;
561
}
562
.geolocation-dialog-title {
564
font-weight: bold;
565
}
566
.geolocation-dialog-reason {
568
color: $text-secondary;
569
font-weight: bold;
570
}
571
/* Network Agent Dialog */
573
.network-dialog-secret-table {
575
spacing-rows: 15px;
576
spacing-columns: 1em;
577
}
578
.keyring-dialog-control-table {
580
spacing-rows: 15px;
581
spacing-columns: 1em;
582
}
583
/* Popovers/Menus */
585
.popup-menu {
587
min-width: 200px;
588
.popup-menu-arrow { } //defined globally in the TOP BAR
590
.popup-sub-menu {
591
background-color: $fill;
592
box-shadow: $shadow_0;
593
}
594
.popup-menu-content { padding: 8px 0; }
596
.popup-menu-item {
597
// min-height: $menuitem_size - 4px * 2;
598
spacing: 8px;
599
transition-duration: $shorter_duration;
600
&:ltr { padding: 0.4em 24px 0.4em 0; }
602
&:rtl { padding: 0.4em 0 0.4em 24px; }
603
&:checked {
604
background-color: $overlay-selected;
605
box-shadow: $shadow_0;
606
font-weight: normal;
607
&.selected {
608
background-color: rgba($primary, 0.4);
609
}
610
&:active {
611
background-color: rgba($primary, 0.6);
612
}
613
}
614
&.selected {
615
background-color: $overlay-hover;
616
color: $text;
617
transition-duration: 0ms;
618
}
619
&:active {
620
background-color: $overlay-active;
621
color: $text;
622
transition-duration: $longer_duration;
623
}
624
&.selected:active { color: $text; }
625
&:insensitive { color: $text-disabled; }
626
}
627
.popup-inactive-menu-item { //all icons and other graphical elements
629
color: $text;
630
&:insensitive { color: $text-disabled; }
632
}
633
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
634
&.panel-menu {
635
-boxpointer-gap: 4px;
636
margin-bottom: 1.75em;
637
}
638
}
639
.popup-menu-ornament {
643
text-align: right;
644
width: 16px;
645
height: 16px;
646
}
647
.popup-menu-boxpointer,
648
.candidate-popup-boxpointer {
649
-arrow-border-radius: 0;
650
-arrow-background-color: transparent;
651
-arrow-border-width: 0;
652
-arrow-border-color: transparent;
653
-arrow-base: 0;
654
-arrow-rise: 0;
655
-arrow-box-shadow: none; //dreaming. bug #689995
656
margin: 5px 8px 8px;
657
background-color: $surface;
658
border-radius: $material_radius;
659
box-shadow: $shadow_2;
660
}
661
.popup-separator-menu-item {
663
//-margin-horizontal: 24px;
664
height: 1px; //not really the whole box
665
margin: 8px 64px - 24px;
666
background-color: transparent;
667
border-color: $border;
668
border-bottom-width: 1px;
669
border-bottom-style: solid;
670
}
671
// Background menu
674
.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0; }
675
/* fallback menu
677
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
678
app menu inside the main app window itself rather than the top bar
679
*/
680
/* OSD */
683
.osd-window {
684
text-align: center;
685
font-weight: bold;
686
spacing: 1em;
687
margin: 32px;
688
min-width: 64px;
689
min-height: 64px;
690
.osd-monitor-label { @include font(display-2); }
692
.level {
693
height: 8px;
694
border-radius: 0;
695
background-color: $divider;
696
color: $text;
697
}
698
.level-bar {
699
background-color: $primary;
700
border-radius: 0;
701
}
702
}
703
/* Pad OSD */
705
.pad-osd-window {
706
padding: 32px;
707
background-color: $scrim;
708
.pad-osd-title-box { spacing: 12px; }
710
.pad-osd-title-menu-box { spacing: 6px; }
711
}
712
.combo-box-label {
714
width: 15em;
715
}
716
/* App Switcher */
718
.switcher-popup {
719
padding: 8px;
720
spacing: 16px;
721
}
722
.osd-window,
724
.resize-popup,
725
.switcher-list {
726
@extend %osd-panel;
727
}
728
.switcher-list-item-container { spacing: 8px; }
730
.switcher-list .item-box {
732
transition-duration: $shorter_duration;
733
padding: 8px;
734
border-radius: $material_radius;
735
}
736
.switcher-list .item-box:outlined {
738
padding: 8px;
739
border: none;
740
background-color: $divider;
741
}
742
.switcher-list .item-box:selected {
744
background-color: $overlay-selected;
745
color: $text;
746
}
747
.switcher-list .thumbnail-box {
749
padding: 2px;
750
spacing: 4px;
751
}
752
.switcher-list .thumbnail {
754
width: 256px;
755
}
756
.switcher-list .separator {
758
width: 1px;
759
background: $border;
760
}
761
.switcher-arrow {
763
transition-duration: $shorter_duration;
764
border-color: rgba(0,0,0,0);
765
color: $text-secondary;
766
&:highlighted {
767
color: $text;
768
}
769
}
770
.input-source-switcher-symbol {
772
@include font(display-2);
773
width: 96px;
774
height: 96px;
775
}
776
/* Window Cycler */
778
.cycler-highlight { border: 4px solid $primary; }
779
/* Workspace Switcher */
781
.workspace-switcher-group { padding: 8px; }
782
.workspace-switcher-container {
784
@extend %osd-panel;
785
}
786
.workspace-switcher {
788
background: transparent;
789
border: 0px;
790
border-radius: 0px;
791
padding: 0px;
792
spacing: 8px;
793
}
794
.ws-switcher-active-up, .ws-switcher-active-down {
796
height: 48px;
797
background-color: $primary;
798
color: $inverse-text;
799
background-size: 32px;
800
border-radius: $material_radius;
801
}
802
.ws-switcher-box {
804
height: 48px;
805
border: none;
806
background: $divider;
807
border-radius: $material_radius;
808
}
809
%osd-panel {
811
color: $text;
812
background-color: $surface;
813
border: none;
814
box-shadow: $shadow_4;
815
border-radius: $material_radius;
816
padding: 12px;
817
}
818
/* Tiled window previews */
820
.tile-preview {
821
background-color: rgba($primary-alt, 0.3);
822
border: 1px solid $primary-alt;
823
}
824
.tile-preview-left.on-primary {
826
border-radius: 0;
827
}
828
.tile-preview-right.on-primary {
830
border-radius: 0;
831
}
832
.tile-preview-left.tile-preview-right.on-primary {
834
border-radius: 0;
835
}
836
/* TOP BAR */
838
#panel {
840
background-color: $panel;
841
/* transition from solid to transparent */
842
transition-duration: $panel_duration;
843
font-weight: bold;
844
height: $menuitem_size;
845
&:overview,
847
&.unlock-screen,
848
&.login-screen,
849
&.lock-screen {
850
background-color: transparent;
851
}
852
#panelLeft, #panelCenter { // spacing between activities<>app menu and such
854
spacing: 0;
855
}
856
.panel-corner {
858
-panel-corner-radius: 0;
859
-panel-corner-background-color: $scrim;
860
-panel-corner-border-width: 2px;
861
-panel-corner-border-color: transparent;
862
&:active, &:overview, &:focus {
864
-panel-corner-border-color: $inverse-text;
865
}
866
&.lock-screen, &.login-screen, &.unlock-screen {
868
-panel-corner-radius: 0;
869
-panel-corner-background-color: transparent;
870
-panel-corner-border-color: transparent;
871
}
872
}
873
.panel-button {
875
-natural-hpadding: 12px;
876
-minimum-hpadding: 6px;
877
font-weight: bold;
878
color: $inverse-text-secondary;
879
transition-duration: $shorter_duration;
880
.app-menu-icon {
882
-st-icon-style: symbolic;
883
margin-left: 4px;
884
margin-right: 4px;
885
//dimensions of the icon are hardcoded
886
}
887
&:hover {
889
color: $inverse-text;
890
}
891
&:active, &:overview, &:focus, &:checked {
893
// Trick due to St limitations. It needs a background to draw
894
// a box-shadow
895
background-color: rgba($scrim, 0.01);
896
box-shadow: inset 0 -2px 0px $inverse-text;
897
color: $inverse-text;
898
& > .system-status-icon { icon-shadow: none; }
900
}
901
.system-status-icon { icon-size: em(16px); padding: 0 4px; }
903
.unlock-screen &,
904
.login-screen &,
905
.lock-screen & {
906
color: $inverse-text-secondary;
907
&:focus, &:hover, &:active { color: $inverse-text; }
908
}
909
}
910
.panel-status-indicators-box,
912
.panel-status-menu-box {
913
spacing: 2px;
914
}
915
// spacing between power icon and (optional) percentage label
917
.power-status.panel-status-indicators-box {
918
spacing: 0;
919
}
920
.screencast-indicator { color: $warning; }
922
}
923
// calendar popover
925
#calendarArea {
926
padding: 8px 16px;
927
}
928
.calendar {
930
margin-bottom: 0;
931
}
932
.calendar,
934
.datemenu-today-button,
935
.datemenu-displays-box,
936
.message-list-sections {
937
margin: 0 8px;
938
}
939
.datemenu-calendar-column { spacing: 8px; }
941
.datemenu-displays-section { padding-bottom: 0; }
942
.datemenu-displays-box { spacing: 8px; }
943
.datemenu-calendar-column {
945
border: 0 solid $border;
946
&:ltr { border-left-width: 0; }
947
&:rtl { border-right-width: 0; }
948
}
949
.datemenu-today-button,
951
.world-clocks-button,
952
.weather-button,
953
.events-section-title {
954
min-height: $menuitem_size - 4px * 2;
955
padding: 4px 8px;
956
border-radius: $material_radius;
957
}
958
.datemenu-today-button {
960
min-height: $menuitem_size * 2 - 4px * 2;
961
}
962
.message-list-section-list:ltr {
964
padding-left: 0;
965
}
966
.message-list-section-list:rtl {
968
padding-right: 0;
969
}
970
.datemenu-today-button,
972
.world-clocks-button,
973
.weather-button,
974
.events-section-title {
975
transition-duration: $shorter_duration;
976
&:hover,&:focus { color: $text; background-color: $overlay-hover; }
977
&:active {
978
transition-duration: $longer_duration;
979
color: $text;
980
background-color: $overlay-active;
981
}
982
}
983
.datemenu-today-button .day-label {
985
}
986
.datemenu-today-button .date-label {
988
@include font(headline);
989
}
990
.world-clocks-header,
992
.weather-header,
993
.events-section-title {
994
color: $text-secondary;
995
font-weight: bold;
996
}
997
.world-clocks-grid {
999
spacing-rows: 0.4em;
1000
}
1001
.weather-box {
1003
spacing: 0.4em;
1004
}
1005
.calendar-month-label {
1007
transition-duration: $shorter_duration;
1008
height: $menuitem_size - 6px * 2;
1009
margin: 2px;
1010
padding: 6px 16px;
1011
border-radius: $material_radius;
1012
color: $text;
1013
font-weight: bold;
1014
text-align: center;
1015
&:focus { background-color: $overlay-focus; }
1016
}
1017
.pager-button {
1019
transition-duration: $shorter_duration;
1020
width: $menuitem_size;
1021
height: $menuitem_size;
1022
margin: 2px;
1023
border-radius: 100px;
1024
background-color: transparent;
1025
color: $text;
1026
&:hover, &:focus { background-color: $overlay-hover; }
1027
&:active { background-color: $overlay-active; transition-duration: $longer_duration; }
1028
}
1029
.calendar-change-month-back { //arrow back
1031
background-image: url("assets/calendar-arrow-left.svg");
1032
&:rtl { background-image: url("assets/calendar-arrow-right.svg"); }
1033
}
1034
.calendar-change-month-forward { //arrow foreward
1035
background-image: url("assets/calendar-arrow-right.svg");
1036
&:rtl { background-image: url("assets/calendar-arrow-left.svg"); }
1037
}
1038
.calendar-day-base {
1040
transition-duration: $shorter_duration;
1041
@include font(caption);
1042
text-align: center;
1043
width: $menuitem_size; height: $menuitem_size;
1044
padding: 0;
1045
margin: 2px;
1046
border-radius: 100px;
1047
&:hover,&:focus { background-color: $overlay-hover; }
1048
&:active {
1049
transition-duration: $longer_duration;
1050
color: inherit;
1051
background-color: $overlay-active;
1052
border-color: transparent; //avoid jumparound due to today
1053
}
1054
&:selected {
1055
color: $text;
1056
background-color: $overlay-selected;
1057
border-color: transparent; //avoid jumparound due to today
1058
}
1059
&.calendar-day-heading { //day of week heading
1060
width: $menuitem_size; height: $menuitem_size - 7px;
1061
margin-top: 2px;
1062
padding: 7px 0 0;
1063
border-radius: 100px;
1064
background-color: transparent;
1065
color: $text-disabled;
1066
@include font(caption);
1067
font-weight: bold;
1068
text-align: center;
1069
}
1070
}
1071
.calendar-day { //border collapse hack - see calendar.js
1072
border-width: 0;
1073
}
1074
.calendar-day-top { border-top-width: 0; }
1075
.calendar-day-left { border-left-width: 0; }
1076
.calendar-work-day {
1077
}
1079
.calendar-nonwork-day {
1080
color: $text;
1081
}
1082
.calendar-today {
1083
font-weight: bold !important;
1084
//color: $text;
1085
//background-color: transparent;
1086
border: none;
1087
}
1088
.calendar-day-with-events {
1089
color: $link;
1090
font-weight: normal;
1091
text-decoration: underline;
1092
background-image: none;
1093
}
1094
.calendar-other-month-day {
1095
color: $text-secondary-disabled;
1096
opacity: 0.5;
1097
}
1098
.calendar-week-number {
1099
width: $menuitem_size; height: $menuitem_size - 7px;
1100
margin: 2px;
1101
padding: 7px 0 0;
1102
border-radius: 100px;
1103
background-color: transparent;
1104
color: $text-disabled;
1105
font-size: inherit;
1106
font-weight: bold;
1107
text-align: center;
1108
}
1109
/* Message list */
1111
.message-list {
1112
width: 420px;
1113
}
1114
.message-list-clear-button.button {
1116
background-color: transparent;
1117
&:hover,&:focus { background-color: $overlay-hover; }
1118
&:active { background-color: $overlay-active; }
1119
margin: 8px 8px 0;
1120
}
1121
.message-list-sections {
1123
spacing: 8px;
1124
}
1125
.message-list-section,
1127
.message-list-section-list {
1128
spacing: 8px;
1129
}
1130
.message {
1132
transition-duration: $shorter_duration;
1133
min-height: $menuitem_size * 2;
1134
background-color: transparent;
1135
&:hover,&:focus { background-color: $overlay-hover; }
1136
&:active {
1137
transition-duration: $longer_duration;
1138
background-color: $overlay-active;
1139
}
1140
border-radius: $material_radius;
1141
}
1142
.message-icon-bin {
1144
padding: 8px 0px 8px 8px;
1145
&:rtl { padding: 8px 8px 8px 0px; }
1146
}
1147
.message-icon-bin > StIcon {
1149
color: $text;
1150
icon-size: em(16px);
1151
-st-icon-style: requested;
1152
margin: 4px 0px 4px 4px;
1153
&:rtl { margin: 4px 4px 4px 0px; }
1154
}
1155
.message-secondary-bin {
1157
padding: 0 8px;
1158
}
1159
.message-secondary-bin > .event-time {
1161
min-height: $small_size - 2px;
1162
padding-top: 2px;
1163
color: $text-secondary;
1164
font-size: 1em;
1165
/* HACK: the label should be baseline-aligned with a 1em label,
1166
fake this with some bottom padding */
1167
padding-bottom: 0;
1168
}
1169
.message-secondary-bin > StIcon {
1171
icon-size: em(16px);
1172
}
1173
.message-title {
1175
min-height: $small_size - 2px;
1176
padding-top: 2px;
1177
color: $text;
1178
font-weight: bold;
1179
font-size: 1em;
1180
}
1181
.message-content {
1183
min-height: $menuitem_size * 2 - 8px * 2;
1184
padding: 8px;
1185
color: $text-secondary;
1186
font-size: 1em;
1187
}
1188
.message-content * > StIcon {
1190
transition-duration: $shorter_duration;
1191
icon-size: 16px;
1192
border-radius: 16px;
1193
padding: ($small_size - 16px) / 2;
1194
color: $text-secondary;
1195
}
1196
/* FIXME: how do you do this in sass? */
1198
.message-content *:hover > StIcon,
1199
.message-content *:focus > StIcon {
1200
color: $text;
1201
background-color: $overlay-hover;
1202
}
1203
.message-content *:active > StIcon {
1205
transition-duration: $longer_duration;
1206
color: $text;
1207
background-color: $overlay-active;
1208
}
1209
.message-media-control {
1211
transition-duration: $shorter_duration;
1212
margin: 16px 0;
1213
padding: 8px;
1214
border-radius: 100px;
1215
color: $text-secondary;
1216
&:hover,&:focus { color: $text; background-color: $overlay-hover; }
1217
&:active { color: $text; background-color: $overlay-active; transition-duration: $longer_duration; }
1218
&:insensitive { color: $text-secondary-disabled; }
1219
&:last-child:ltr { margin-right: 16px; padding-right: 8px; }
1221
&:last-child:rtl { margin-left: 16px; padding-left: 8px; }
1222
}
1223
.media-message-cover-icon {
1225
icon-size: 32px !important;
1226
margin: 8px 0px 8px 4px !important;
1227
&:rtl { margin: 8px 4px 8px 0px !important; }
1228
&.fallback {
1229
icon-size: 16px !important;
1230
padding: 8px;
1231
border: none;
1232
border-radius: $material_radius;
1233
background-color: $divider;
1234
color: $text-disabled;
1235
}
1236
}
1237
// a little unstructured mess:
1240
.system-switch-user-submenu-icon.user-icon {
1242
icon-size: 20px;
1243
padding: 0 2px;
1244
}
1245
.system-switch-user-submenu-icon.default-icon {
1246
icon-size: 16px;
1247
padding: 0 4px;
1248
}
1249
#appMenu {
1251
spinner-image: url("process-working.svg");
1252
spacing: 4px;
1253
.label-shadow { color: transparent; }
1255
}
1256
.aggregate-menu {
1258
min-width: 280px;
1259
.popup-menu-icon { padding: 0 4px; }
1260
.popup-sub-menu .popup-menu-item > :first-child {
1261
&:ltr { /* 8px spacing + 2*4px padding */
1262
padding-left: 16px; margin-left: em(16px); }
1263
&:rtl { /* 8px spacing + 2*4px padding */
1264
padding-right: 16px; margin-right: em(16px); }
1265
}
1266
}
1267
.system-menu-action {
1269
color: $text-secondary;
1270
border-radius: 100px; /* wish we could do 50% */
1271
padding: ($large_size - 16px) / 2;
1272
border: none;
1273
transition-duration: $shorter_duration;
1274
&:hover, &:focus {
1276
background-color: $overlay-hover;
1277
color: $text;
1278
border: none;
1279
padding: ($large_size - 16px) / 2;
1280
}
1281
&:active { background-color: $overlay-active; color: $text; transition-duration: $longer_duration; }
1282
& > StIcon { icon-size: 16px; }
1284
}
1285
//Activities Ripples
1287
.ripple-box {
1288
width: 48px;
1289
height: 48px;
1290
border-radius: 0 0 48px 0;
1291
background-color: $inverse-track;
1292
background-image: none;
1293
background-size: auto;
1294
}
1295
.ripple-box:rtl {
1297
border-radius: 0 0 0 48px;
1298
background-image: none;
1299
}
1300
// not really top bar only
1302
.popup-menu-arrow { width: 16px; height: 16px; }
1303
.popup-menu-icon { icon-size: em(16px); }
1304
//close buttons
1306
.window-close {
1308
// FIXME: unless disable the transition, button will distort when hovering
1309
// transition-duration: $shorter_duration;
1310
height: $medium_size;
1311
width: $medium_size;
1312
-st-background-image-shadow: $shadow_1;
1313
background-image: url("assets/window-close.svg");
1314
background-size: $medium_size;
1315
&:hover { -st-background-image-shadow: $shadow_2; }
1316
&:active {
1317
// transition-duration: $longer_duration;
1318
background-image: url("assets/window-close-active.svg");
1319
}
1320
}
1321
.window-close {
1322
-shell-close-overlap: $medium_size / 2;
1323
&:rtl { -st-background-image-shadow: $shadow_1; }
1324
&:rtl:hover { -st-background-image-shadow: $shadow_2; }
1325
}
1326
/* NETWORK DIALOGS */
1328
.nm-dialog {
1330
max-height: 34em;
1331
min-height: 31em;
1332
min-width: 32em;
1333
}
1334
.nm-dialog-content {
1336
spacing: 20px;
1337
padding: 24px;
1338
}
1339
.nm-dialog-header-hbox { spacing: 10px; }
1340
.nm-dialog-airplane-box { spacing: 12px; }
1341
.nm-dialog-airplane-headline {
1343
font-weight: bold;
1344
text-align: center;
1345
}
1346
.nm-dialog-airplane-text { color: $text; }
1348
.nm-dialog-header-icon { icon-size: 32px; }
1349
.nm-dialog-scroll-view { border: none; }
1350
.nm-dialog-header { @include font(title); }
1351
.nm-dialog-item {
1353
transition-duration: $shorter_duration;
1354
font-size: 1em;
1355
border-bottom: none;
1356
border-radius: $material_radius;
1357
padding: 12px;
1358
spacing: 20px;
1359
&:hover, &:focus { background-color: $overlay-hover; }
1360
&:active {
1361
transition-duration: $longer_duration;
1362
background-color: $overlay-active;
1363
}
1364
}
1365
.nm-dialog-item:selected {
1367
background-color: $overlay-selected;
1368
color: $text;
1369
}
1370
.nm-dialog-icons { spacing: .5em; }
1372
.nm-dialog-icon { icon-size: 16px; }
1373
.no-networks-label { color: $text-disabled; }
1374
.no-networks-box { spacing: 12px; }
1375
/* OVERVIEW */
1377
#overview {
1379
spacing: 24px; //
1380
StScrollBar { @extend %overview_scrollbar; }
1381
}
1382
.overview-controls {
1384
padding-bottom: 32px;
1385
}
1386
.window-picker { //container around window thumbnails
1388
-horizontal-spacing: 32px;
1389
-vertical-spacing: 32px;
1390
padding-left: 32px;
1391
padding-right: 32px;
1392
padding-bottom: 48px;
1393
&.external-monitor { padding: 32px; }
1395
}
1396
.window-clone-border {
1398
border: 4px solid $inverse-track;
1399
border-radius: $material_radius;
1400
// For window decorations with round corners we can't match
1401
// the exact shape when the window is scaled. So apply a shadow
1402
// to fix that case
1403
box-shadow: inset 0 0 0 1px $inverse-track;
1404
}
1405
.window-caption {
1406
spacing: 25px;
1407
color: $inverse-text;
1408
background-color: transparent;
1409
border-radius: $material_radius;
1410
padding: 4px 8px;
1411
-shell-caption-spacing: 12px;
1412
&:hover { background-color: $inverse-track; color: $inverse-text; }
1413
}
1414
//search entry
1416
.search-entry {
1417
width: 320px - 8px * 2;
1418
padding: 0 8px;
1419
border-radius: $material_radius $material_radius 0 0;
1420
color: $inverse-text-disabled;
1421
selection-background-color: $inverse-track;
1422
selected-color: $inverse-text;
1423
@include entry(normal,$fc:$inverse-track);
1424
&:hover { @include entry(hover,$fc:$inverse-track); }
1425
&:focus {
1426
@include entry(focus,$fc:$inverse-text);
1427
padding: 0 8px;
1428
border-width: 0;
1429
color: $inverse-text;
1430
}
1431
.search-entry-icon { icon-size: 16px; padding: 0 0; color: $inverse-text-secondary; }
1433
&:hover, &:focus {
1435
.search-entry-icon { color: $inverse-text; }
1436
}
1437
}
1438
//search results
1440
#searchResultsBin {
1442
max-width: 1000px;
1443
}
1444
#searchResultsContent {
1446
padding-left: 20px;
1447
padding-right: 20px;
1448
spacing: 16px;
1449
}
1450
.search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
1452
.search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container
1453
.search-statustext { // "no results"
1454
@extend %status_text;
1455
}
1456
.list-search-results { spacing: 3px; }
1457
.search-section-separator {
1459
-gradient-height: 1px;
1460
-gradient-start: rgba(255,255,255,0);
1461
-gradient-end: rgba(255,255,255,0.4);
1462
-margin-horizontal: 1.5em;
1463
height: 1px;
1464
}
1465
.list-search-result-content { spacing: 12px; padding: 12px; }
1467
.list-search-result-title { @include font(headline); color: $inverse-text; }
1468
.list-search-result-description { color: $inverse-text-secondary; }
1469
.search-provider-icon { padding: 15px; }
1470
.search-provider-icon-more {
1471
width: 16px;
1472
height: 16px;
1473
background-image: url("assets/more-results.svg");
1474
}
1475
/* DASHBOARD */
1478
#dash {
1480
transition-duration: $panel_duration;
1481
font-size: 1em;
1482
color: $inverse-text;
1483
background-color: $scrim-inverse;
1484
padding: 3px 0;
1485
border: none;
1486
border-left: 0px;
1487
border-radius: 0px $material_radius $material_radius 0px;
1488
&:rtl {
1490
border-radius: $material_radius 0 0 $material_radius;
1491
}
1492
.placeholder {
1494
background-image: url("assets/dash-placeholder.svg");
1495
background-size: contain;
1496
height: 24px;
1497
}
1498
.empty-dash-drop-target {
1500
width: 24px;
1501
height: 24px;
1502
}
1503
}
1505
.dash-item-container > StWidget {
1507
padding: 3px 6px;
1508
}
1509
.dash-label { //osd tooltip
1511
// min-height: 32px - 6px * 2;
1512
border-radius: $material_radius;
1513
padding: 7px 8px;
1514
color: $text;
1515
background-color: $surface;
1516
box-shadow: $shadow_2;
1517
text-align: center;
1518
-x-offset: 8px;
1519
}
1520
/* App Vault/Grid */
1522
.icon-grid {
1523
spacing: 30px;
1524
-shell-grid-horizontal-item-size: 136px;
1525
-shell-grid-vertical-item-size: 136px;
1526
.overview-icon { icon-size: 96px; }
1528
}
1529
//.app-display { spacing: 20px; }
1530
.app-view-controls { //favorties | all toggle container
1532
width: 320px;
1533
padding-bottom: 32px;
1534
}
1535
.app-view-control { //favorties | all toggle button
1536
padding: 0 16px;
1537
font-weight: bold;
1538
color: $inverse-text-secondary;
1539
&:hover {
1540
color: $inverse-text;
1541
background-color: $inverse-overlay-hover !important;
1542
}
1543
&:active {
1544
color: $inverse-text;
1545
background-color: $inverse-overlay-active !important;
1546
}
1547
&:checked {
1548
color: $inverse-text;
1549
background-color: rgba($scrim, 0.01) !important;
1550
box-shadow: inset 0 2px 0 $inverse-text;
1551
}
1552
&:first-child {
1553
border-right-width: 0;
1554
border-radius: $material_radius;
1555
&:checked { border-radius: 0; }
1556
}
1557
&:last-child {
1558
border-radius: $material_radius;
1559
&:checked { border-radius: 0; }
1560
}
1561
}
1562
//Icon tile
1564
.search-provider-icon,
1565
.list-search-result {
1566
@extend %icon_tile;
1567
&:focus, &:selected, &:hover {
1568
background-color: $inverse-overlay-hover;
1569
transition-duration: 0ms;
1570
}
1571
&:active, &:checked {
1572
background-color: $inverse-overlay-active;
1573
transition-duration: $longer_duration;
1574
}
1575
}
1576
.app-well-app,
1577
.app-well-app.app-folder,
1578
.show-apps,
1579
.grid-search-result {
1580
& .overview-icon {
1581
@extend %icon_tile;
1582
}
1583
&:hover .overview-icon,
1584
&:focus .overview-icon,
1585
&:selected .overview-icon {
1586
background-color: $inverse-overlay-hover;
1587
transition-duration: 0ms;
1588
border-image: none;
1589
background-image: none;
1590
}
1591
&:active .overview-icon,
1592
&:checked .overview-icon {
1593
background-color: $inverse-overlay-active;
1594
box-shadow: $shadow_0;
1595
transition-duration: $longer_duration;
1596
}
1597
}
1599
.app-well-app-running-dot { //running apps indicator
1601
width: 32px; height: 2px;
1602
background-color: $inverse-text;
1603
margin-bottom: 0;
1604
}
1605
%icon_tile {
1607
color: $inverse-text;
1608
border-radius: $material_radius;
1609
padding: 6px;
1610
border: none;
1611
transition-duration: $shorter_duration;
1612
text-align: center;
1613
}
1614
.app-well-app.app-folder > .overview-icon {
1616
background-color: $scrim-inverse;
1617
}
1618
.show-apps .show-apps-icon {
1620
color: $inverse-text-secondary;
1621
}
1622
.show-apps:hover .show-apps-icon,
1624
.show-apps:active .show-apps-icon,
1625
.show-apps:checked .show-apps-icon,
1626
.show-apps:focus .show-apps-icon {
1627
color: $inverse-text;
1628
transition-duration: $shorter_duration;
1629
}
1630
// Collections
1633
.app-folder-popup { //expanded collection
1634
-arrow-border-radius: $material_radius;
1635
-arrow-background-color: $scrim-inverse;
1636
-arrow-base: 24px;
1637
-arrow-rise: 12px;
1638
}
1639
.app-folder-popup-bin { padding: 5px; }
1640
.app-folder-icon {
1641
padding: 5px;
1642
spacing-rows: 5px;
1643
spacing-columns: 5px;
1644
}
1645
.page-indicator {
1647
padding: 15px 20px;
1648
.page-indicator-icon {
1650
width: 12px;
1651
height: 12px;
1652
border-radius: 12px;
1653
background-image: none;
1654
background-color: $inverse-text-secondary-disabled;
1655
transition-duration: $shorter_duration;
1656
}
1657
&:hover .page-indicator-icon {
1658
background-image: none;
1659
background-color: $inverse-text-disabled;
1660
}
1661
&:active .page-indicator-icon {
1662
background-image: none;
1663
background-color: $inverse-text-secondary;
1664
}
1665
&:checked .page-indicator-icon {
1666
background-image: none;
1667
background-color: $inverse-text;
1668
transition-duration: 0ms;
1669
}
1670
&:checked:active { background-image: none; }
1671
}
1672
.no-frequent-applications-label { @extend %status_text; }
1674
.app-well-app > .overview-icon.overview-icon-with-label,
1676
.grid-search-result .overview-icon.overview-icon-with-label {
1677
padding: 10px 8px 5px 8px;
1678
spacing: 4px;
1679
}
1680
// Workspace pager
1682
.workspace-thumbnails { //container ala dash
1683
@extend %overview-panel;
1684
visible-width: 32px; //amount visible before hover
1685
spacing: 12px;
1686
padding: 12px;
1687
border-radius: $material_radius 0 0 $material_radius;
1688
//border-width: 0; //fixme: can't have non unoform borders :(
1689
&:rtl { border-radius: 0 $material_radius $material_radius 0;}
1690
.placeholder {
1692
background-image: url("assets/dash-placeholder.svg");
1693
background-size: contain;
1694
height: 24px;
1695
}
1696
}
1697
.workspace-thumbnail-indicator {
1698
border: 0 solid $inverse-text;
1699
border-left-width: 2px;
1700
padding: 6px 10px;
1701
border-radius: 0;
1702
}
1703
//Some hacks I don't even
1705
.search-display > StBoxLayout,
1706
.all-apps,
1707
.frequent-apps > StBoxLayout {
1708
// horizontal padding to make sure scrollbars or dash don't overlap content
1709
padding: 0px 88px 10px 88px;
1710
}
1711
%overview-panel {
1713
transition-duration: $panel_duration;
1714
color: $inverse-text;
1715
background-color: $scrim-inverse;
1716
border: none;
1717
}
1718
%status_text {
1720
@include font(display-2);
1721
color: $inverse-text-disabled;
1722
}
1723
/* NOTIFICATIONS & MESSAGE TRAY */
1725
.url-highlighter { link-color: $link; }
1727
// Banners
1729
.notification-banner {
1730
font-size: 1em;
1731
width: 34em;
1732
min-height: $menuitem_size * 2;
1733
margin: 5px;
1734
border-radius: $material_radius;
1735
color: $text;
1736
background-color: $surface;
1737
border: none;
1738
box-shadow: $shadow_2;
1739
&:hover { background-color: $surface; }
1740
&:focus { background-color: $surface; }
1741
.notification-icon { padding: 5px; }
1743
.notification-content { padding: 5px; spacing: 5px; }
1744
.secondary-icon { icon-size: em(16px); }
1745
.notification-actions {
1746
background-color: transparent;
1747
padding-top: 0;
1748
padding: $container_padding;
1749
spacing: $container_padding;
1750
}
1751
.notification-button {
1752
transition-duration: $shorter_duration;
1753
min-height: $medium_size;
1754
padding: 0 8px;
1755
border-radius: $material_radius;
1756
background-color: transparent;
1757
color: $text-secondary;
1758
font-weight: 500;
1759
&:first-child { border-radius: $material_radius; }
1760
&:last-child { border-radius: $material_radius; }
1761
&:hover, &focus { background-color: $overlay-hover; color: $text; }
1762
&:active {
1763
transition-duration: $longer_duration;
1764
background-color: $overlay-active;
1765
color: $text;
1766
}
1767
}
1768
}
1769
.summary-source-counter {
1770
font-size: 1em;
1771
font-weight: bold;
1772
height: 1.6em; width: 1.6em;
1773
-shell-counter-overlap-x: 3px;
1774
-shell-counter-overlap-y: 3px;
1775
background-color: $primary;
1776
color: $inverse-text;
1777
border: 2px solid $inverse-text;
1778
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
1779
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
1780
}
1781
.secondary-icon { icon-size: em(16px); }
1783
//chat bubbles
1785
.chat-body { spacing: 5px; }
1786
.chat-response { margin: 5px; }
1787
.chat-log-message { color: $text; }
1788
.chat-new-group { padding-top: 1em; }
1789
.chat-received {
1790
padding-left: 4px;
1791
&:rtl { padding-left: 0px; padding-right: 4px; }
1792
}
1793
.chat-sent {
1794
padding-left: 18pt;
1795
color: $text-secondary;
1796
&:rtl { padding-left: 0; padding-right: 18pt; }
1797
}
1798
.chat-meta-message {
1799
padding-left: 4px;
1800
@include font(caption);
1801
color: $text-secondary;
1802
&:rtl { padding-left: 0; padding-right: 4px; }
1803
}
1804
//hotplug
1806
.hotplug-transient-box {
1807
spacing: 6px;
1808
padding: 2px 72px 2px 12px;
1809
}
1810
.hotplug-notification-item {
1811
padding: 2px 10px;
1812
&:focus { padding: 1px 71px 1px 11px; }
1813
}
1814
.hotplug-notification-item-icon {
1816
icon-size: 24px;
1817
padding: 2px 5px;
1818
}
1819
.hotplug-resident-box { spacing: 8px; }
1821
.hotplug-resident-mount {
1823
transition-duration: $shorter_duration;
1824
spacing: 8px;
1825
border-radius: $material_radius;
1826
&:hover { background-color: $overlay-hover; }
1827
&:active {
1828
transition-duration: $longer_duration;
1829
background-color: $overlay-active;
1830
}
1831
}
1832
.hotplug-resident-mount-label {
1834
color: inherit;
1835
padding-left: 6px;
1836
}
1837
.hotplug-resident-mount-icon {
1839
icon-size: 24px;
1840
padding-left: 6px;
1841
}
1842
.hotplug-resident-eject-icon {
1844
icon-size: 16px;
1845
}
1846
.hotplug-resident-eject-button {
1848
padding: 7px;
1849
border-radius: $material_radius;
1850
color: $text;
1851
}
1852
/* Eeeky things */
1854
$legacy_icon_size: 24px;
1856
.legacy-tray {
1858
background-color: $scrim;
1859
color: $inverse-text;
1860
border: none;
1861
border-bottom-width: 0;
1862
&:ltr { border-radius: 0 $material_radius 0 0; border-left-width: 0; }
1863
&:rtl { border-radius: $material_radius 0 0 0; border-right-width: 0; }
1864
}
1865
.legacy-tray-handle,
1867
.legacy-tray-icon {
1868
padding: 6px;
1869
& StIcon { icon-size: $legacy_icon_size; }
1870
&:hover,&:focus { background-color: $inverse-overlay-hover; }
1871
&:active { background-color: $inverse-overlay-active; }
1872
}
1873
.legacy-tray-icon-box {
1875
spacing: 12px;
1876
&:ltr { padding-left: 12px; }
1877
&:rtl { padding-right: 12px; }
1878
& StButton { width: $legacy_icon_size; height: $legacy_icon_size }
1879
}
1880
//magnifier
1882
.magnifier-zoom-region {
1884
border: 2px solid $primary;
1885
&.full-screen { border-width: 0; }
1886
}
1887
//Keyboard
1889
/* On-screen Keyboard */
1890
#keyboard {
1892
background-color: $scrim-alt;
1893
}
1894
.keyboard-layout {
1896
spacing: 10px;
1897
padding: 10px;
1898
}
1899
.keyboard-row { spacing: 15px; }
1901
.keyboard-key {
1903
min-height: 2em;
1904
min-width: 2em;
1905
font-size: 2em;
1906
font-weight: 500;
1907
border-radius: $material_radius;
1908
border: none;
1909
@include button(normal);
1910
&:focus { @include button(focus); }
1911
&:hover,&:checked { @include button(hover); }
1912
&:active { @include button(active);}
1913
&:grayed { //FIXME
1914
background-color: $scrim-alt;
1915
color: $inverse-text;
1916
border-color: $scrim-alt;
1917
}
1918
}
1919
.keyboard-subkeys { //long press on a key popup
1921
color: inherit;
1922
padding: 5px;
1923
-arrow-border-radius: 0;
1924
-arrow-background-color: transparent;
1925
-arrow-border-width: 0;
1926
-arrow-border-color: transparent;
1927
-arrow-base: 0;
1928
-arrow-rise: 0;
1929
-boxpointer-gap: 5px;
1930
background-color: $surface;
1931
border-radius: $material_radius;
1932
box-shadow: $shadow_2;
1933
}
1934
// IBus Candidate Popup
1936
.candidate-popup-content {
1938
padding: 8px;
1939
spacing: 0;
1940
}
1941
.candidate-index {
1943
padding: 0 4px 0 0;
1944
color: $text-secondary;
1945
}
1946
.candidate-box {
1948
transition-duration: $shorter_duration;
1949
min-height: $menuitem_size;
1950
padding: 0 8px;
1951
border-radius: $material_radius;
1952
&:hover { background-color: $overlay-hover; color: $text; transition-duration: 0ms; }
1953
&:active { background-color: $overlay-active; color: $text; transition-duration: $longer_duration; }
1954
&:selected { background-color: $overlay-selected; color: $text; transition-duration: 0ms; }
1955
}
1956
.candidate-page-button-box {
1958
height: $menuitem_size;
1959
.vertical & { padding-top: 0; }
1960
.horizontal & { padding-left: 0; }
1961
}
1962
.candidate-page-button {
1964
min-width: $menuitem_size;
1965
min-height: $menuitem_size;
1966
padding: 0;
1967
}
1968
.candidate-page-button-previous { border-radius: $material_radius; border-right-width: 0; }
1970
.candidate-page-button-next { border-radius: $material_radius; }
1971
.candidate-page-button-icon { icon-size: em(16px); }
1972
/* Auth Dialogs & Screen Shield */
1974
.framed-user-icon {
1976
background-size: contain;
1977
border: none;
1978
color: $inverse-text;
1979
border-radius: $material_radius;
1980
&:hover {
1981
border-color: $inverse-text;
1982
color: $inverse-text;
1983
}
1984
}
1985
// LOGIN DIALOG
1987
.login-dialog-banner-view {
1989
padding-top: 24px;
1990
max-width: 23em;
1991
}
1992
.login-dialog {
1994
//reset
1995
border: none;
1996
background-color: transparent;
1997
StEntry {
1999
color: $inverse-text;
2000
selection-background-color: $inverse-track;
2001
selected-color: $inverse-text;
2002
@include entry(normal, $fc:$inverse-track);
2003
&:focus { @include entry(focus, $fc:$inverse-text); }
2004
&:insensitive {
2005
@include entry(insensitive, $fc:$inverse-divider);
2006
color: $inverse-text-disabled;
2007
}
2008
}
2009
.modal-dialog-button-box { spacing: 3px; }
2011
.modal-dialog-button {
2012
padding: 0 16px;
2013
@include button(flat-normal, $tc: $inverse-text);
2014
&:hover,&:focus { @include button(flat-hover, $tc: $inverse-text); }
2015
&:active { @include button(flat-active, $tc: $inverse-text); }
2016
&:insensitive { @include button(flat-insensitive, $tc: $inverse-text); }
2017
&:default {
2019
@include button(normal, $c: $suggested, $tc: $inverse-text);
2020
&:hover,&:focus { @include button(hover, $c: $suggested, $tc: $inverse-text); }
2021
&:active { @include button(active, $c: $suggested, $tc: $inverse-text); }
2022
&:insensitive { @include button(insensitive, $c: $inverse-fill, $tc: $inverse-text-disabled); }
2023
}
2024
}
2025
}
2026
.login-dialog-logo-bin { padding: 24px 0px; }
2028
.login-dialog-banner { color: $inverse-text-secondary; }
2029
.login-dialog-button-box { spacing: 5px; }
2030
.login-dialog-message-warning { color: $warning; }
2031
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
2032
.login-dialog-user-selection-box { padding: 100px 0px; }
2033
.login-dialog-not-listed-label {
2034
padding-left: 2px;
2035
.login-dialog-not-listed-button:focus &,
2036
.login-dialog-not-listed-button:hover & {
2037
color: $inverse-text;
2038
}
2039
}
2040
.login-dialog-not-listed-label {
2041
transition-duration: $shorter_duration;
2042
font-size: 1em;
2043
font-weight: bold;
2044
color: $inverse-text-secondary;
2045
padding-top: 1em;
2046
border-radius: $material_radius;
2047
&:hover {
2048
background-color: $inverse-overlay-hover;
2049
color: $inverse-text;
2050
}
2051
&:focus { background-color: $inverse-overlay-focus; }
2052
&:active {
2053
transition-duration: $longer_duration;
2054
background-color: $inverse-overlay-active;
2055
color: $inverse-text;
2056
}
2057
}
2058
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
2060
.login-dialog-user-list {
2061
spacing: 12px;
2062
padding: .2em;
2063
width: 23em;
2064
&:expanded .login-dialog-user-list-item:focus { background-color: $inverse-overlay-focus; color: $inverse-text; }
2065
&:expanded .login-dialog-user-list-item:hover { background-color: $inverse-overlay-hover; color: $inverse-text; }
2066
&:expanded .login-dialog-user-list-item:active { background-color: $inverse-overlay-active; color: $inverse-text; }
2067
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $inverse-text; }
2068
}
2069
.login-dialog-user-list-item {
2070
transition-duration: $shorter_duration;
2071
border-radius: $material_radius;
2072
padding: 4px 4px 0;
2073
color: $inverse-text-secondary;
2074
&:ltr { padding-right: 1em; }
2075
&:rtl { padding-left: 1em; }
2076
&:hover {
2077
background-color: $inverse-overlay-hover;
2078
color: $inverse-text;
2079
}
2080
&:active {
2081
transition-duration: $longer_duration;
2082
background-color: $inverse-overlay-active;
2083
color: $inverse-text;
2084
}
2085
.login-dialog-timed-login-indicator {
2086
height: 2px;
2087
margin: 2px 0 0 0;
2088
background-color: $inverse-text;
2089
}
2090
&:focus .login-dialog-timed-login-indicator { background-color: $inverse-text; }
2091
}
2092
.login-dialog-username,
2094
.user-widget-label {
2095
color: $inverse-text;
2096
@include font(title);
2097
text-align: left;
2098
padding-left: 15px;
2099
}
2100
.user-widget-label {
2101
&:ltr { padding-left: 18px; }
2102
&:rtl { padding-right: 18px; }
2103
}
2104
.login-dialog-prompt-layout {
2106
padding-top: 24px;
2107
padding-bottom: 12px;
2108
spacing: 8px;
2109
width: 23em;
2110
}
2111
.login-dialog-prompt-label {
2113
color: $inverse-text-secondary;
2114
font-size: 1em;
2115
padding-top: 1em;
2116
}
2117
.login-dialog-session-list-button StIcon {
2119
icon-size: 1.25em;
2120
}
2121
.login-dialog-session-list-button {
2123
color: $inverse-text-secondary;
2124
&:hover,&:focus { color: $inverse-text; }
2125
&:active { color: $inverse-text; }
2126
}
2127
//SCREEN SHIELD
2129
.screen-shield-arrows {
2131
padding-bottom: 3em;
2132
}
2133
.screen-shield-arrows Gjs_Arrow {
2135
color: white;
2136
width: 80px;
2137
height: 48px;
2138
-arrow-thickness: 12px;
2139
-arrow-shadow: $shadow_1;
2140
}
2141
.screen-shield-clock {
2143
color: white;
2144
text-shadow: $shadow_1;
2145
font-weight: normal;
2146
text-align: center;
2147
padding-bottom: 1.5em;
2148
}
2149
.screen-shield-clock-time {
2151
@include font(display-4);
2152
text-shadow: $shadow_1;
2153
}
2154
.screen-shield-clock-date { @include font(display-2); }
2156
.screen-shield-notifications-container {
2158
spacing: 6px;
2159
width: 30em;
2160
background-color: transparent;
2161
max-height: 500px;
2162
.summary-notification-stack-scrollview {
2163
padding-top: 0;
2164
padding-bottom: 0;
2165
}
2166
.notification,
2168
.screen-shield-notification-source {
2169
padding: 8px;
2170
border: none;
2171
background-color: $scrim-alt;
2172
color: $inverse-text;
2173
border-radius: $material_radius;
2174
}
2175
.notification { margin-right: 16px; } //compensate for space allocated to the scrollbar
2176
}
2177
.screen-shield-notification-label {
2180
min-height: $small_size - 2px;
2181
padding: 2px 0px 0px 16px;
2182
font-weight: bold;
2183
}
2184
.screen-shield-notification-count-text {
2186
min-height: $small_size - 2px;
2187
padding: 2px 0px 0px 16px;
2188
color: $inverse-text-secondary;
2189
}
2190
#panel.lock-screen { background-color: $scrim-alt; }
2192
.screen-shield-background { //just the shadow, really
2194
background: black;
2195
box-shadow: $shadow_5;
2196
}
2197
#lockDialogGroup {
2199
background: $os-background;
2200
background-size: cover;
2201
}
2202
#screenShieldNotifications {
2204
StScrollBar { @extend %overview_scrollbar; }
2205
}
2206
// Looking Glass
2209
#LookingGlassDialog {
2210
background-color: $surface;
2211
spacing: 4px;
2212
padding: 0;
2213
border: none;
2214
border-radius: $material_radius;
2215
box-shadow: $shadow_4;
2216
& > #Toolbar {
2217
padding: 0 8px;
2218
border: none;
2219
border-radius: 0;
2220
background-color: rgba($surface, 0.01);
2221
box-shadow: inset 0 -1px 0 $border;
2222
}
2223
.labels { spacing: 0; }
2224
.notebook-tab {
2225
-natural-hpadding: 12px;
2226
-minimum-hpadding: 6px;
2227
font-weight: bold;
2228
color: $text-secondary;
2229
transition-duration: $shorter_duration;
2230
padding-left: 16px;
2231
padding-right: 16px;
2232
min-height: $medium_size;
2233
padding: 0 16px * 2;
2234
&:hover {
2235
background-color: $overlay-hover;
2236
color: $text;
2237
text-shadow: none;
2238
}
2239
&:active {
2240
background-color: $overlay-active;
2241
color: $text;
2242
transition-duration: $longer_duration;
2243
}
2244
&:selected {
2245
border-bottom-width: 0;
2246
border-color: transparent;
2247
background-color: rgba($surface, 0.01);
2248
box-shadow: inset 0 -2px 0px $primary;
2249
color: $text;
2250
text-shadow: none;
2251
}
2252
}
2253
StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
2254
StBoxLayout#ResultsArea { spacing: 4px; }
2255
}
2256
.lg-dialog {
2258
StEntry {
2259
selection-background-color: $overlay-selected;
2260
selected-color: $text;
2261
}
2262
.shell-link {
2263
color: $link;
2264
&:hover { color: $link; }
2265
}
2266
}
2267
.lg-completions-text {
2269
font-size: 1em;
2270
font-style: italic;
2271
}
2272
.lg-obj-inspector-title {
2274
spacing: 4px;
2275
}
2276
.lg-obj-inspector-button {
2278
min-height: $medium_size;
2279
padding: 0 16px;
2280
border: none;
2281
border-radius: $material_radius;
2282
@include font(button);
2283
@include button(flat-normal);
2284
&:hover { @include button(flat-hover); }
2285
&:active { @include button(flat-active); }
2286
&:insensitive { @include button(flat-insensitive); }
2287
&:focus { @include button(flat-focus); }
2288
&:hover { border: none; }
2289
}
2290
#lookingGlassExtensions { padding: 4px; }
2292
.lg-extensions-list {
2294
padding: 4px;
2295
spacing: 6px;
2296
}
2297
.lg-extension {
2299
border: none;
2300
border-radius: $material_radius;
2301
padding: 4px;
2302
}
2303
.lg-extension-name {
2305
@include font(headline);
2306
}
2307
.lg-extension-meta {
2309
spacing: 6px;
2310
}
2311
#LookingGlassPropertyInspector {
2313
background: $surface;
2314
border: none;
2315
border-radius: $material_radius;
2316
padding: 6px;
2317
box-shadow: $shadow_4;
2318
}
2319