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: $fg_color;
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: $fg_color;
87
selection-background-color: $selected_overlay_color;
88
selected-color: $fg_color;
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_color;
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_color;
121
}
122
StButton#vhandle, StButton#hhandle {
124
transition-duration: $shorter_duration;
125
border-radius: 100px;
126
background-color: $disabled_fg_color;
127
//border: 4px solid transparent; //would be nice to margin or at least to transparent
128
margin: 4px;
129
&:hover { background-color: $secondary_fg_color; }
130
&:active { background-color: $fg_color; }
131
}
132
}
133
%overview_scrollbar {
135
StBin#trough {
136
background-color: $inverse_divider_color;
137
}
138
StButton#vhandle, StButton#hhandle {
140
background-color: $inverse_disabled_fg_color;
141
&:hover { background-color: $inverse_secondary_fg_color; }
142
&:active { background-color: $inverse_fg_color; }
143
}
144
}
145
/* Slider */
147
.slider {
149
height: 20px;
150
color: $primary_color;
151
-slider-height: 2px;
152
-slider-background-color: $track_color; //background of the trough
153
-slider-border-color: transparent; //trough border color
154
-slider-active-background-color: $primary_color; //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: $hover_overlay_color;
181
}
182
&:active StBin {
183
transition-duration: $longer_duration;
184
background-color: $active_overlay_color;
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_color, 0.08);
194
}
195
&:active:checked StBin {
196
background-color: rgba($primary_color, 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_color;
219
&:hover {
220
color: $link_color;
221
background-color: rgba($link_color, 0.08);
222
}
223
&:active {
224
transition-duration: $longer_duration;
225
color: $link_color;
226
background-color: rgba($link_color, 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: $fg_color;
239
background-color: $surface_color;
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: $secondary_fg_color;
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_color;
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: $disabled_fg_color;
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: $secondary_fg_color;
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: 500px;
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: $fg_color;
394
&:hover { color: $fg_color; }
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: 500px;
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: $fg_color;
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_color;
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_color;
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_color;
504
border-radius: $material_radius;
505
&:active,&:hover,&:focus { background-color: $primary_color; }
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: $secondary_fg_color;
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: $secondary_fg_color;
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_color;
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: $selected_overlay_color;
605
box-shadow: $shadow_0;
606
font-weight: normal;
607
&.selected {
608
background-color: rgba($primary_color, 0.4);
609
}
610
&:active {
611
background-color: rgba($primary_color, 0.6);
612
}
613
}
614
&.selected {
615
background-color: $hover_overlay_color;
616
color: $fg_color;
617
transition-duration: 0ms;
618
}
619
&:active {
620
background-color: $active_overlay_color;
621
color: $fg_color;
622
transition-duration: $longer_duration;
623
}
624
&.selected:active { color: $fg_color; }
625
&:insensitive { color: $disabled_fg_color; }
626
}
627
.popup-inactive-menu-item { //all icons and other graphical elements
629
color: $fg_color;
630
&:insensitive { color: $disabled_fg_color; }
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_color;
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_color;
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_color;
696
color: $fg_color;
697
}
698
.level-bar {
699
background-color: $primary_color;
700
border-radius: 0;
701
}
702
}
703
/* Pad OSD */
705
.pad-osd-window {
706
padding: 32px;
707
background-color: $panel_bg_color;
708
}
709
.combo-box-label {
711
width: 15em;
712
}
713
/* App Switcher */
715
.switcher-popup {
716
padding: 8px;
717
spacing: 16px;
718
}
719
.osd-window,
721
.resize-popup,
722
.switcher-list {
723
@extend %osd-panel;
724
}
725
.switcher-list-item-container { spacing: 8px; }
727
.switcher-list .item-box {
729
transition-duration: $shorter_duration;
730
padding: 8px;
731
border-radius: $material_radius;
732
}
733
.switcher-list .item-box:outlined {
735
padding: 8px;
736
border: none;
737
background-color: $divider_color;
738
}
739
.switcher-list .item-box:selected {
741
background-color: $selected_overlay_color;
742
color: $fg_color;
743
}
744
.switcher-list .thumbnail-box {
746
padding: 2px;
747
spacing: 4px;
748
}
749
.switcher-list .thumbnail {
751
width: 256px;
752
}
753
.switcher-list .separator {
755
width: 1px;
756
background: $border_color;
757
}
758
.switcher-arrow {
760
transition-duration: $shorter_duration;
761
border-color: rgba(0,0,0,0);
762
color: $secondary_fg_color;
763
&:highlighted {
764
color: $fg_color;
765
}
766
}
767
.input-source-switcher-symbol {
769
@include font(display-2);
770
width: 96px;
771
height: 96px;
772
}
773
/* Window Cycler */
775
.cycler-highlight { border: 4px solid $primary_color; }
776
/* Workspace Switcher */
778
.workspace-switcher-group { padding: 8px; }
779
.workspace-switcher-container {
781
@extend %osd-panel;
782
}
783
.workspace-switcher {
785
background: transparent;
786
border: 0px;
787
border-radius: 0px;
788
padding: 0px;
789
spacing: 8px;
790
}
791
.ws-switcher-active-up, .ws-switcher-active-down {
793
height: 48px;
794
background-color: $primary_color;
795
color: $inverse_fg_color;
796
background-size: 32px;
797
border-radius: $material_radius;
798
}
799
.ws-switcher-box {
801
height: 48px;
802
border: none;
803
background: $divider_color;
804
border-radius: $material_radius;
805
}
806
%osd-panel {
808
color: $fg_color;
809
background-color: $surface_color;
810
border: none;
811
box-shadow: $shadow_4;
812
border-radius: $material_radius;
813
padding: 12px;
814
}
815
/* Tiled window previews */
817
.tile-preview {
818
background-color: rgba($alt_primary_color, 0.3);
819
border: 1px solid $alt_primary_color;
820
}
821
.tile-preview-left.on-primary {
823
border-radius: 0;
824
}
825
.tile-preview-right.on-primary {
827
border-radius: 0;
828
}
829
.tile-preview-left.tile-preview-right.on-primary {
831
border-radius: 0;
832
}
833
/* TOP BAR */
835
#panel {
837
background-color: $solid_panel_bg_color;
838
/* transition from solid to transparent */
839
transition-duration: $panel_duration;
840
font-weight: bold;
841
height: $menuitem_size;
842
&:overview,
844
&.unlock-screen,
845
&.login-screen,
846
&.lock-screen {
847
background-color: transparent;
848
}
849
#panelLeft, #panelCenter { // spacing between activities<>app menu and such
851
spacing: 0;
852
}
853
.panel-corner {
855
-panel-corner-radius: 0;
856
-panel-corner-background-color: $panel_bg_color;
857
-panel-corner-border-width: 2px;
858
-panel-corner-border-color: transparent;
859
&:active, &:overview, &:focus {
861
-panel-corner-border-color: $inverse_fg_color;
862
}
863
&.lock-screen, &.login-screen, &.unlock-screen {
865
-panel-corner-radius: 0;
866
-panel-corner-background-color: transparent;
867
-panel-corner-border-color: transparent;
868
}
869
}
870
.panel-button {
872
-natural-hpadding: 12px;
873
-minimum-hpadding: 6px;
874
font-weight: bold;
875
color: $inverse_secondary_fg_color;
876
transition-duration: $shorter_duration;
877
.app-menu-icon {
879
-st-icon-style: symbolic;
880
margin-left: 4px;
881
margin-right: 4px;
882
//dimensions of the icon are hardcoded
883
}
884
&:hover {
886
color: $inverse_fg_color;
887
}
888
&:active, &:overview, &:focus, &:checked {
890
// Trick due to St limitations. It needs a background to draw
891
// a box-shadow
892
background-color: rgba($panel_bg_color, 0.01);
893
box-shadow: inset 0 -2px 0px $inverse_fg_color;
894
color: $inverse_fg_color;
895
& > .system-status-icon { icon-shadow: none; }
897
}
898
.system-status-icon { icon-size: em(16px); padding: 0 4px; }
900
.unlock-screen &,
901
.login-screen &,
902
.lock-screen & {
903
color: $inverse_secondary_fg_color;
904
&:focus, &:hover, &:active { color: $inverse_fg_color; }
905
}
906
}
907
.panel-status-indicators-box,
909
.panel-status-menu-box {
910
spacing: 2px;
911
}
912
// spacing between power icon and (optional) percentage label
914
.power-status.panel-status-indicators-box {
915
spacing: 0;
916
}
917
.screencast-indicator { color: $warning_color; }
919
}
920
// calendar popover
922
#calendarArea {
923
padding: 8px 16px;
924
}
925
.calendar {
927
margin-bottom: 0;
928
}
929
.calendar,
931
.datemenu-today-button,
932
.datemenu-displays-box,
933
.message-list-sections {
934
margin: 0 8px;
935
}
936
.datemenu-calendar-column { spacing: 8px; }
938
.datemenu-displays-section { padding-bottom: 0; }
939
.datemenu-today-button,
941
.world-clocks-button,
942
.message-list-section-title {
943
min-height: $menuitem_size - 4px * 2;
944
padding: 4px 8px;
945
border-radius: $material_radius;
946
}
947
.datemenu-today-button {
949
min-height: $menuitem_size * 2 - 4px * 2;
950
}
951
.message-list-section-list:ltr {
953
padding-left: 0;
954
}
955
.message-list-section-list:rtl {
957
padding-right: 0;
958
}
959
.datemenu-today-button,
961
.world-clocks-button,
962
.message-list-section-title {
963
transition-duration: $shorter_duration;
964
&:hover,&:focus { color: $fg_color; background-color: $hover_overlay_color; }
965
&:active {
966
transition-duration: $longer_duration;
967
color: $fg_color;
968
background-color: $active_overlay_color;
969
}
970
}
971
.datemenu-today-button .day-label {
973
}
974
.datemenu-today-button .date-label {
976
@include font(headline);
977
}
978
.world-clocks-header,
980
.message-list-section-title {
981
color: $secondary_fg_color;
982
font-weight: bold;
983
}
984
.world-clocks-grid {
986
spacing-rows: 0.4em;
987
}
988
.calendar-month-label {
990
transition-duration: $shorter_duration;
991
height: $menuitem_size - 6px * 2;
992
margin: 2px;
993
padding: 6px 16px;
994
border-radius: $material_radius;
995
color: $fg_color;
996
font-weight: bold;
997
text-align: center;
998
&:focus { background-color: $focus_overlay_color; }
999
}
1000
.pager-button {
1002
transition-duration: $shorter_duration;
1003
width: $menuitem_size;
1004
height: $menuitem_size;
1005
margin: 2px;
1006
border-radius: 100px;
1007
background-color: transparent;
1008
color: $fg_color;
1009
&:hover, &:focus { background-color: $hover_overlay_color; }
1010
&:active { background-color: $active_overlay_color; transition-duration: $longer_duration; }
1011
}
1012
.calendar-change-month-back { //arrow back
1014
background-image: url("assets/calendar-arrow-left.svg");
1015
&:rtl { background-image: url("assets/calendar-arrow-right.svg"); }
1016
}
1017
.calendar-change-month-forward { //arrow foreward
1018
background-image: url("assets/calendar-arrow-right.svg");
1019
&:rtl { background-image: url("assets/calendar-arrow-left.svg"); }
1020
}
1021
.calendar-day-base {
1023
transition-duration: $shorter_duration;
1024
@include font(caption);
1025
text-align: center;
1026
width: $menuitem_size; height: $menuitem_size;
1027
padding: 0;
1028
margin: 2px;
1029
border-radius: 100px;
1030
&:hover,&:focus { background-color: $hover_overlay_color; }
1031
// &:active { background-color: $active_overlay_color; }
1032
&:active, &:selected {
1033
transition-duration: $longer_duration;
1034
color: $fg_color;
1035
background-color: $selected_overlay_color !important;
1036
border-color: transparent; //avoid jumparound due to today
1037
}
1038
&.calendar-day-heading { //day of week heading
1039
width: $menuitem_size; height: $menuitem_size - 7px;
1040
margin-top: 2px;
1041
padding: 7px 0 0;
1042
border-radius: 100px;
1043
background-color: transparent;
1044
color: $disabled_fg_color;
1045
@include font(caption);
1046
font-weight: bold;
1047
text-align: center;
1048
}
1049
}
1050
.calendar-day { //border collapse hack - see calendar.js
1051
border-width: 0;
1052
}
1053
.calendar-day-top { border-top-width: 0; }
1054
.calendar-day-left { border-left-width: 0; }
1055
.calendar-work-day {
1056
}
1058
.calendar-nonwork-day {
1059
color: $fg_color;
1060
}
1061
.calendar-today {
1062
font-weight: bold !important;
1063
//color: $fg_color;
1064
//background-color: transparent;
1065
border: none;
1066
}
1067
.calendar-day-with-events {
1068
color: $link_color;
1069
font-weight: normal;
1070
text-decoration: underline;
1071
background-image: none;
1072
}
1073
.calendar-other-month-day {
1074
color: $disabled_secondary_fg_color;
1075
opacity: 0.5;
1076
}
1077
.calendar-week-number {
1078
width: $menuitem_size; height: $menuitem_size - 7px;
1079
margin: 2px;
1080
padding: 7px 0 0;
1081
border-radius: 100px;
1082
background-color: transparent;
1083
color: $disabled_fg_color;
1084
font-size: inherit;
1085
font-weight: bold;
1086
text-align: center;
1087
}
1088
/* Message list */
1090
.message-list {
1091
width: 420px;
1092
}
1093
.message-list-sections {
1095
spacing: 8px;
1096
}
1097
.message-list-section,
1099
.message-list-section-list {
1100
spacing: 8px;
1101
}
1102
.message-list-section-title-box {
1104
spacing: 8px;
1105
}
1106
.message-list-section-close > StIcon {
1108
icon-size: 16px;
1109
border-radius: 16px;
1110
padding: ($menuitem_size - 16px) / 2;
1111
color: $secondary_fg_color;
1112
background-color: transparent;
1113
}
1114
/* FIXME: how do you do this in sass? */
1116
.message-list-section-close:hover > StIcon,
1117
.message-list-section-close:focus > StIcon {
1118
color: $fg_color;
1119
background-color: $hover_overlay_color;
1120
}
1121
.message-list-section-close:active > StIcon {
1123
color: $fg_color;
1124
background-color: $active_overlay_color;
1125
}
1126
.message {
1128
transition-duration: $shorter_duration;
1129
min-height: $menuitem_size * 2;
1130
background-color: transparent;
1131
&:hover,&:focus { background-color: $hover_overlay_color; }
1132
&:active {
1133
transition-duration: $longer_duration;
1134
background-color: $active_overlay_color;
1135
}
1136
border-radius: $material_radius;
1137
}
1138
.message-icon-bin {
1140
padding: 8px 0px 8px 8px;
1141
&:rtl { padding: 8px 8px 8px 0px; }
1142
}
1143
.message-icon-bin > StIcon {
1145
icon-size: 32px;
1146
}
1147
.message-secondary-bin {
1149
&:ltr { padding-left: 8px; }
1150
&:rtl { padding-right: 8px; }
1151
}
1152
.message-secondary-bin {
1154
color: $secondary_fg_color;
1155
}
1156
.message-secondary-bin > StIcon {
1158
icon-size: 16px;
1159
}
1160
.message-title {
1162
min-height: $small_size - 2px;
1163
padding-top: 2px;
1164
color: $fg_color;
1165
font-weight: bold;
1166
font-size: 1em;
1167
}
1168
.message-content {
1170
min-height: $menuitem_size * 2 - 8px * 2;
1171
padding: 8px;
1172
color: $secondary_fg_color;
1173
font-size: 1em;
1174
}
1175
.message-content * > StIcon {
1177
transition-duration: $shorter_duration;
1178
icon-size: 16px;
1179
border-radius: 16px;
1180
padding: ($small_size - 16px) / 2;
1181
color: $secondary_fg_color;
1182
}
1183
/* FIXME: how do you do this in sass? */
1185
.message-content *:hover > StIcon,
1186
.message-content *:focus > StIcon {
1187
color: $fg_color;
1188
background-color: $hover_overlay_color;
1189
}
1190
.message-content *:active > StIcon {
1192
transition-duration: $longer_duration;
1193
color: $fg_color;
1194
background-color: $active_overlay_color;
1195
}
1196
.message-media-control {
1198
transition-duration: $shorter_duration;
1199
margin: 16px 0;
1200
padding: 8px;
1201
border-radius: 100px;
1202
color: $secondary_fg_color;
1203
&:hover,&:focus { color: $fg_color; background-color: $hover_overlay_color; }
1204
&:active { color: $fg_color; background-color: $active_overlay_color; transition-duration: $longer_duration; }
1205
&:insensitive { color: $disabled_secondary_fg_color; }
1206
&:last-child:ltr { margin-right: 16px; padding-right: 8px; }
1208
&:last-child:rtl { margin-left: 16px; padding-left: 8px; }
1209
}
1210
.media-message-cover-icon {
1212
icon-size: 32px;
1213
&.fallback {
1214
icon-size: 16px;
1215
padding: 8px;
1216
border: none;
1217
border-radius: $material_radius;
1218
background-color: $divider_color;
1219
color: $disabled_fg_color;
1220
}
1221
}
1222
// a little unstructured mess:
1225
.system-switch-user-submenu-icon.user-icon {
1227
icon-size: 20px;
1228
padding: 0 2px;
1229
}
1230
.system-switch-user-submenu-icon.default-icon {
1231
icon-size: 16px;
1232
padding: 0 4px;
1233
}
1234
#appMenu {
1236
spinner-image: url("process-working.svg");
1237
spacing: 4px;
1238
.label-shadow { color: transparent; }
1240
}
1241
.aggregate-menu {
1243
min-width: 280px;
1244
.popup-menu-icon { padding: 0 4px; }
1245
.popup-sub-menu .popup-menu-item > :first-child {
1246
&:ltr { /* 8px spacing + 2*4px padding */
1247
padding-left: 16px; margin-left: em(16px); }
1248
&:rtl { /* 8px spacing + 2*4px padding */
1249
padding-right: 16px; margin-right: em(16px); }
1250
}
1251
}
1252
.system-menu-action {
1254
color: $secondary_fg_color;
1255
border-radius: 100px; /* wish we could do 50% */
1256
padding: ($large_size - 16px) / 2;
1257
border: none;
1258
transition-duration: $shorter_duration;
1259
&:hover, &:focus {
1261
background-color: $hover_overlay_color;
1262
color: $fg_color;
1263
border: none;
1264
padding: ($large_size - 16px) / 2;
1265
}
1266
&:active { background-color: $active_overlay_color; color: $fg_color; transition-duration: $longer_duration; }
1267
& > StIcon { icon-size: 16px; }
1269
}
1270
//Activities Ripples
1272
.ripple-box {
1273
width: 48px;
1274
height: 48px;
1275
border-radius: 0 0 48px 0;
1276
background-color: $inverse_track_color;
1277
background-image: none;
1278
background-size: auto;
1279
}
1280
.ripple-box:rtl {
1282
border-radius: 0 0 0 48px;
1283
background-image: none;
1284
}
1285
// not really top bar only
1287
.popup-menu-arrow { width: 16px; height: 16px; }
1288
.popup-menu-icon { icon-size: em(16px); }
1289
//close buttons
1291
.window-close {
1293
// FIXME: unless disable the transition, button will distort when hovering
1294
// transition-duration: $shorter_duration;
1295
height: $medium_size;
1296
width: $medium_size;
1297
-st-background-image-shadow: $shadow_1;
1298
background-image: url("assets/window-close.svg");
1299
background-size: $medium_size;
1300
&:hover { -st-background-image-shadow: $shadow_2; }
1301
&:active {
1302
// transition-duration: $longer_duration;
1303
background-image: url("assets/window-close-active.svg");
1304
}
1305
}
1306
.window-close {
1307
-shell-close-overlap: $medium_size / 2;
1308
&:rtl { -st-background-image-shadow: $shadow_1; }
1309
&:rtl:hover { -st-background-image-shadow: $shadow_2; }
1310
}
1311
/* NETWORK DIALOGS */
1313
.nm-dialog {
1315
max-height: 500px;
1316
min-height: 450px;
1317
min-width: 470px;
1318
}
1319
.nm-dialog-content {
1321
spacing: 20px;
1322
padding: 24px;
1323
}
1324
.nm-dialog-header-hbox { spacing: 10px; }
1325
.nm-dialog-airplane-box { spacing: 12px; }
1326
.nm-dialog-airplane-headline {
1328
font-weight: bold;
1329
text-align: center;
1330
}
1331
.nm-dialog-airplane-text { color: $fg_color; }
1333
.nm-dialog-header-icon { icon-size: 32px; }
1334
.nm-dialog-scroll-view { border: none; }
1335
.nm-dialog-header { @include font(title); }
1336
.nm-dialog-item {
1338
transition-duration: $shorter_duration;
1339
font-size: 1em;
1340
border-bottom: none;
1341
border-radius: $material_radius;
1342
padding: 12px;
1343
spacing: 20px;
1344
&:hover, &:focus { background-color: $hover_overlay_color; }
1345
&:active {
1346
transition-duration: $longer_duration;
1347
background-color: $active_overlay_color;
1348
}
1349
}
1350
.nm-dialog-item:selected {
1352
background-color: $selected_overlay_color;
1353
color: $fg_color;
1354
}
1355
.nm-dialog-icons { spacing: .5em; }
1357
.nm-dialog-icon { icon-size: 16px; }
1358
.no-networks-label { color: $disabled_fg_color; }
1359
.no-networks-box { spacing: 12px; }
1360
/* OVERVIEW */
1362
#overview {
1364
spacing: 24px; //
1365
StScrollBar { @extend %overview_scrollbar; }
1366
}
1367
.overview-controls {
1369
padding-bottom: 32px;
1370
}
1371
.window-picker { //container around window thumbnails
1373
-horizontal-spacing: 32px;
1374
-vertical-spacing: 32px;
1375
padding-left: 32px;
1376
padding-right: 32px;
1377
padding-bottom: 48px;
1378
&.external-monitor { padding: 32px; }
1380
}
1381
.window-clone-border {
1383
border: 4px solid $inverse_track_color;
1384
border-radius: $material_radius;
1385
// For window decorations with round corners we can't match
1386
// the exact shape when the window is scaled. So apply a shadow
1387
// to fix that case
1388
box-shadow: inset 0 0 0 1px $inverse_track_color;
1389
}
1390
.window-caption {
1391
spacing: 25px;
1392
color: $inverse_fg_color;
1393
background-color: transparent;
1394
border-radius: $material_radius;
1395
padding: 4px 8px;
1396
-shell-caption-spacing: 12px;
1397
&:hover { background-color: $inverse_track_color; color: $inverse_fg_color; }
1398
}
1399
//search entry
1401
.search-entry {
1402
width: 320px - 8px * 2;
1403
padding: 0 8px;
1404
border-radius: $material_radius $material_radius 0 0;
1405
color: $inverse_disabled_fg_color;
1406
selection-background-color: $inverse_track_color;
1407
selected-color: $inverse_fg_color;
1408
@include entry(normal,$fc:$inverse_track_color);
1409
&:hover { @include entry(hover,$fc:$inverse_track_color); }
1410
&:focus {
1411
@include entry(focus,$fc:$inverse_fg_color);
1412
padding: 0 8px;
1413
border-width: 0;
1414
color: $inverse_fg_color;
1415
}
1416
.search-entry-icon { icon-size: 16px; padding: 0 0; color: $inverse_secondary_fg_color; }
1418
&:hover, &:focus {
1420
.search-entry-icon { color: $inverse_fg_color; }
1421
}
1422
}
1423
//search results
1425
#searchResultsBin {
1427
max-width: 1000px;
1428
}
1429
#searchResultsContent {
1431
padding-left: 20px;
1432
padding-right: 20px;
1433
spacing: 16px;
1434
}
1435
.search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
1437
.search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container
1438
.search-statustext { // "no results"
1439
@extend %status_text;
1440
}
1441
.list-search-results { spacing: 3px; }
1442
.search-section-separator {
1444
-gradient-height: 1px;
1445
-gradient-start: rgba(255,255,255,0);
1446
-gradient-end: rgba(255,255,255,0.4);
1447
-margin-horizontal: 1.5em;
1448
height: 1px;
1449
}
1450
.list-search-result-content { spacing: 12px; padding: 12px; }
1452
.list-search-result-title { @include font(headline); color: $inverse_fg_color; }
1453
.list-search-result-description { color: $inverse_secondary_fg_color; }
1454
.search-provider-icon { padding: 15px; }
1455
.search-provider-icon-more {
1456
width: 16px;
1457
height: 16px;
1458
background-image: url("assets/more-results.svg");
1459
}
1460
/* DASHBOARD */
1463
#dash {
1465
transition-duration: $panel_duration;
1466
font-size: 1em;
1467
color: $inverse_fg_color;
1468
background-color: $inverse_panel_bg_color;
1469
padding: 3px 0;
1470
border: none;
1471
border-left: 0px;
1472
border-radius: 0px $material_radius $material_radius 0px;
1473
&:rtl {
1475
border-radius: $material_radius 0 0 $material_radius;
1476
}
1477
.placeholder {
1479
background-image: url("assets/dash-placeholder.svg");
1480
background-size: contain;
1481
height: 24px;
1482
}
1483
.empty-dash-drop-target {
1485
width: 24px;
1486
height: 24px;
1487
}
1488
}
1490
.dash-item-container > StWidget {
1492
padding: 3px 6px;
1493
}
1494
.dash-label { //osd tooltip
1496
// min-height: 32px - 6px * 2;
1497
border-radius: $material_radius;
1498
padding: 7px 8px;
1499
color: $fg_color;
1500
background-color: $surface_color;
1501
box-shadow: $shadow_2;
1502
text-align: center;
1503
-x-offset: 8px;
1504
}
1505
/* App Vault/Grid */
1507
.icon-grid {
1508
spacing: 30px;
1509
-shell-grid-horizontal-item-size: 136px;
1510
-shell-grid-vertical-item-size: 136px;
1511
.overview-icon { icon-size: 96px; }
1513
}
1514
//.app-display { spacing: 20px; }
1515
.app-view-controls { //favorties | all toggle container
1517
width: 320px;
1518
padding-bottom: 32px;
1519
}
1520
.app-view-control { //favorties | all toggle button
1521
padding: 0 16px;
1522
font-weight: bold;
1523
color: $inverse_secondary_fg_color;
1524
&:hover {
1525
color: $inverse_fg_color;
1526
background-color: $inverse_hover_overlay_color !important;
1527
}
1528
&:active {
1529
color: $inverse_fg_color;
1530
background-color: $inverse_active_overlay_color !important;
1531
}
1532
&:checked {
1533
color: $inverse_fg_color;
1534
background-color: rgba($panel_bg_color, 0.01) !important;
1535
box-shadow: inset 0 2px 0 $inverse_fg_color;
1536
}
1537
&:first-child {
1538
border-right-width: 0;
1539
border-radius: $material_radius;
1540
&:checked { border-radius: 0; }
1541
}
1542
&:last-child {
1543
border-radius: $material_radius;
1544
&:checked { border-radius: 0; }
1545
}
1546
}
1547
//Icon tile
1549
.search-provider-icon,
1550
.list-search-result {
1551
@extend %icon_tile;
1552
&:focus, &:selected, &:hover {
1553
background-color: $inverse_hover_overlay_color;
1554
transition-duration: 0ms;
1555
}
1556
&:active, &:checked {
1557
background-color: $inverse_active_overlay_color;
1558
transition-duration: $longer_duration;
1559
}
1560
}
1561
.app-well-app,
1562
.app-well-app.app-folder,
1563
.show-apps,
1564
.grid-search-result {
1565
& .overview-icon {
1566
@extend %icon_tile;
1567
}
1568
&:hover .overview-icon,
1569
&:focus .overview-icon,
1570
&:selected .overview-icon {
1571
background-color: $inverse_hover_overlay_color;
1572
transition-duration: 0ms;
1573
border-image: none;
1574
background-image: none;
1575
}
1576
&:active .overview-icon,
1577
&:checked .overview-icon {
1578
background-color: $inverse_active_overlay_color;
1579
box-shadow: $shadow_0;
1580
transition-duration: $longer_duration;
1581
}
1582
}
1584
.app-well-app-running-dot { //running apps indicator
1586
width: 32px; height: 2px;
1587
background-color: $inverse_fg_color;
1588
margin-bottom: 0;
1589
}
1590
%icon_tile {
1592
color: $inverse_fg_color;
1593
border-radius: $material_radius;
1594
padding: 6px;
1595
border: none;
1596
transition-duration: $shorter_duration;
1597
text-align: center;
1598
}
1599
.app-well-app.app-folder > .overview-icon {
1601
background-color: $inverse_panel_bg_color;
1602
}
1603
.show-apps .show-apps-icon {
1605
color: $inverse_secondary_fg_color;
1606
}
1607
.show-apps:hover .show-apps-icon,
1609
.show-apps:active .show-apps-icon,
1610
.show-apps:checked .show-apps-icon,
1611
.show-apps:focus .show-apps-icon {
1612
color: $inverse_fg_color;
1613
transition-duration: $shorter_duration;
1614
}
1615
// Collections
1618
.app-folder-popup { //expanded collection
1619
-arrow-border-radius: $material_radius;
1620
-arrow-background-color: $inverse_panel_bg_color;
1621
-arrow-base: 24px;
1622
-arrow-rise: 12px;
1623
}
1624
.app-folder-popup-bin { padding: 5px; }
1625
.app-folder-icon {
1626
padding: 5px;
1627
spacing-rows: 5px;
1628
spacing-columns: 5px;
1629
}
1630
.page-indicator {
1632
padding: 15px 20px;
1633
.page-indicator-icon {
1635
width: 12px;
1636
height: 12px;
1637
border-radius: 12px;
1638
background-image: none;
1639
background-color: $inverse_disabled_secondary_fg_color;
1640
transition-duration: $shorter_duration;
1641
}
1642
&:hover .page-indicator-icon {
1643
background-image: none;
1644
background-color: $inverse_disabled_fg_color;
1645
}
1646
&:active .page-indicator-icon {
1647
background-image: none;
1648
background-color: $inverse_secondary_fg_color;
1649
}
1650
&:checked .page-indicator-icon {
1651
background-image: none;
1652
background-color: $inverse_fg_color;
1653
transition-duration: 0ms;
1654
}
1655
&:checked:active { background-image: none; }
1656
}
1657
.no-frequent-applications-label { @extend %status_text; }
1659
.app-well-app > .overview-icon.overview-icon-with-label,
1661
.grid-search-result .overview-icon.overview-icon-with-label {
1662
padding: 10px 8px 5px 8px;
1663
spacing: 4px;
1664
}
1665
// Workspace pager
1667
.workspace-thumbnails { //container ala dash
1668
@extend %overview-panel;
1669
visible-width: 32px; //amount visible before hover
1670
spacing: 12px;
1671
padding: 12px;
1672
border-radius: $material_radius 0 0 $material_radius;
1673
//border-width: 0; //fixme: can't have non unoform borders :(
1674
&:rtl { border-radius: 0 $material_radius $material_radius 0;}
1675
.placeholder {
1677
background-image: url("assets/dash-placeholder.svg");
1678
background-size: contain;
1679
height: 24px;
1680
}
1681
}
1682
.workspace-thumbnail-indicator {
1683
border: 0 solid $inverse_fg_color;
1684
border-left-width: 2px;
1685
padding: 6px 10px;
1686
border-radius: 0;
1687
}
1688
//Some hacks I don't even
1690
.search-display > StBoxLayout,
1691
.all-apps,
1692
.frequent-apps > StBoxLayout {
1693
// horizontal padding to make sure scrollbars or dash don't overlap content
1694
padding: 0px 88px 10px 88px;
1695
}
1696
%overview-panel {
1698
transition-duration: $panel_duration;
1699
color: $inverse_fg_color;
1700
background-color: $inverse_panel_bg_color;
1701
border: none;
1702
}
1703
%status_text {
1705
@include font(display-2);
1706
color: $inverse_disabled_fg_color;
1707
}
1708
/* NOTIFICATIONS & MESSAGE TRAY */
1710
.url-highlighter { link-color: $link_color; }
1712
// Banners
1714
.notification-banner {
1715
font-size: 1em;
1716
width: 34em;
1717
min-height: $menuitem_size * 2;
1718
margin: 5px;
1719
border-radius: $material_radius;
1720
color: $fg_color;
1721
background-color: $surface_color;
1722
border: none;
1723
box-shadow: $shadow_2;
1724
&:hover { background-color: $surface_color; }
1725
&:focus { background-color: $surface_color; }
1726
.notification-icon { padding: 5px; }
1728
.notification-content { padding: 5px; spacing: 5px; }
1729
.secondary-icon { icon-size: em(16px); }
1730
.notification-actions {
1731
background-color: transparent;
1732
padding-top: 0;
1733
padding: $container_padding;
1734
spacing: $container_padding;
1735
}
1736
.notification-button {
1737
transition-duration: $shorter_duration;
1738
min-height: $medium_size;
1739
padding: 0 8px;
1740
border-radius: $material_radius;
1741
background-color: transparent;
1742
color: $secondary_fg_color;
1743
font-weight: 500;
1744
&:first-child { border-radius: $material_radius; }
1745
&:last-child { border-radius: $material_radius; }
1746
&:hover, &focus { background-color: $hover_overlay_color; color: $fg_color; }
1747
&:active {
1748
transition-duration: $longer_duration;
1749
background-color: $active_overlay_color;
1750
color: $fg_color;
1751
}
1752
}
1753
}
1754
.summary-source-counter {
1755
font-size: 1em;
1756
font-weight: bold;
1757
height: 1.6em; width: 1.6em;
1758
-shell-counter-overlap-x: 3px;
1759
-shell-counter-overlap-y: 3px;
1760
background-color: $primary_color;
1761
color: $inverse_fg_color;
1762
border: 2px solid $inverse_fg_color;
1763
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
1764
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
1765
}
1766
.secondary-icon { icon-size: em(16px); }
1768
//chat bubbles
1770
.chat-body { spacing: 5px; }
1771
.chat-response { margin: 5px; }
1772
.chat-log-message { color: $fg_color; }
1773
.chat-new-group { padding-top: 1em; }
1774
.chat-received {
1775
padding-left: 4px;
1776
&:rtl { padding-left: 0px; padding-right: 4px; }
1777
}
1778
.chat-sent {
1779
padding-left: 18pt;
1780
color: $secondary_fg_color;
1781
&:rtl { padding-left: 0; padding-right: 18pt; }
1782
}
1783
.chat-meta-message {
1784
padding-left: 4px;
1785
@include font(caption);
1786
color: $secondary_fg_color;
1787
&:rtl { padding-left: 0; padding-right: 4px; }
1788
}
1789
//hotplug
1791
.hotplug-transient-box {
1792
spacing: 6px;
1793
padding: 2px 72px 2px 12px;
1794
}
1795
.hotplug-notification-item {
1796
padding: 2px 10px;
1797
&:focus { padding: 1px 71px 1px 11px; }
1798
}
1799
.hotplug-notification-item-icon {
1801
icon-size: 24px;
1802
padding: 2px 5px;
1803
}
1804
.hotplug-resident-box { spacing: 8px; }
1806
.hotplug-resident-mount {
1808
transition-duration: $shorter_duration;
1809
spacing: 8px;
1810
border-radius: $material_radius;
1811
&:hover { background-color: $hover_overlay_color; }
1812
&:active {
1813
transition-duration: $longer_duration;
1814
background-color: $active_overlay_color;
1815
}
1816
}
1817
.hotplug-resident-mount-label {
1819
color: inherit;
1820
padding-left: 6px;
1821
}
1822
.hotplug-resident-mount-icon {
1824
icon-size: 24px;
1825
padding-left: 6px;
1826
}
1827
.hotplug-resident-eject-icon {
1829
icon-size: 16px;
1830
}
1831
.hotplug-resident-eject-button {
1833
padding: 7px;
1834
border-radius: $material_radius;
1835
color: $fg_color;
1836
}
1837
/* Eeeky things */
1839
$legacy_icon_size: 24px;
1841
.legacy-tray {
1843
background-color: $panel_bg_color;
1844
color: $inverse_fg_color;
1845
border: none;
1846
border-bottom-width: 0;
1847
&:ltr { border-radius: 0 $material_radius 0 0; border-left-width: 0; }
1848
&:rtl { border-radius: $material_radius 0 0 0; border-right-width: 0; }
1849
}
1850
.legacy-tray-handle,
1852
.legacy-tray-icon {
1853
padding: 6px;
1854
& StIcon { icon-size: $legacy_icon_size; }
1855
&:hover,&:focus { background-color: $inverse_hover_overlay_color; }
1856
&:active { background-color: $inverse_active_overlay_color; }
1857
}
1858
.legacy-tray-icon-box {
1860
spacing: 12px;
1861
&:ltr { padding-left: 12px; }
1862
&:rtl { padding-right: 12px; }
1863
& StButton { width: $legacy_icon_size; height: $legacy_icon_size }
1864
}
1865
//magnifier
1867
.magnifier-zoom-region {
1869
border: 2px solid $primary_color;
1870
&.full-screen { border-width: 0; }
1871
}
1872
//Keyboard
1874
/* On-screen Keyboard */
1875
#keyboard {
1877
background-color: $alt_panel_bg_color;
1878
}
1879
.keyboard-layout {
1881
spacing: 10px;
1882
padding: 10px;
1883
}
1884
.keyboard-row { spacing: 15px; }
1886
.keyboard-key {
1888
min-height: 2em;
1889
min-width: 2em;
1890
font-size: 2em;
1891
font-weight: 500;
1892
border-radius: $material_radius;
1893
border: none;
1894
@include button(normal);
1895
&:focus { @include button(focus); }
1896
&:hover,&:checked { @include button(hover); }
1897
&:active { @include button(active);}
1898
&:grayed { //FIXME
1899
background-color: $alt_panel_bg_color;
1900
color: $inverse_fg_color;
1901
border-color: $alt_panel_bg_color;
1902
}
1903
}
1904
.keyboard-subkeys { //long press on a key popup
1906
color: inherit;
1907
padding: 5px;
1908
-arrow-border-radius: 0;
1909
-arrow-background-color: transparent;
1910
-arrow-border-width: 0;
1911
-arrow-border-color: transparent;
1912
-arrow-base: 0;
1913
-arrow-rise: 0;
1914
-boxpointer-gap: 5px;
1915
background-color: $surface_color;
1916
border-radius: $material_radius;
1917
box-shadow: $shadow_2;
1918
}
1919
// IBus Candidate Popup
1921
.candidate-popup-content {
1923
padding: 8px;
1924
spacing: 0;
1925
}
1926
.candidate-index {
1928
padding: 0 4px 0 0;
1929
color: $secondary_fg_color;
1930
}
1931
.candidate-box {
1933
transition-duration: $shorter_duration;
1934
min-height: $menuitem_size;
1935
padding: 0 8px;
1936
border-radius: $material_radius;
1937
&:hover { background-color: $hover_overlay_color; color: $fg_color; transition-duration: 0ms; }
1938
&:active { background-color: $active_overlay_color; color: $fg_color; transition-duration: $longer_duration; }
1939
&:selected { background-color: $selected_overlay_color; color: $fg_color; transition-duration: 0ms; }
1940
}
1941
.candidate-page-button-box {
1943
height: $menuitem_size;
1944
.vertical & { padding-top: 0; }
1945
.horizontal & { padding-left: 0; }
1946
}
1947
.candidate-page-button {
1949
min-width: $menuitem_size;
1950
min-height: $menuitem_size;
1951
padding: 0;
1952
}
1953
.candidate-page-button-previous { border-radius: $material_radius; border-right-width: 0; }
1955
.candidate-page-button-next { border-radius: $material_radius; }
1956
.candidate-page-button-icon { icon-size: em(16px); }
1957
/* Auth Dialogs & Screen Shield */
1959
.framed-user-icon {
1961
background-size: contain;
1962
border: none;
1963
color: $inverse_fg_color;
1964
border-radius: $material_radius;
1965
&:hover {
1966
border-color: $inverse_fg_color;
1967
color: $inverse_fg_color;
1968
}
1969
}
1970
// LOGIN DIALOG
1972
.login-dialog-banner-view {
1974
padding-top: 24px;
1975
max-width: 23em;
1976
}
1977
.login-dialog {
1979
//reset
1980
border: none;
1981
background-color: transparent;
1982
StEntry {
1984
color: $inverse_fg_color;
1985
selection-background-color: $inverse_track_color;
1986
selected-color: $inverse_fg_color;
1987
@include entry(normal, $fc:$inverse_track_color);
1988
&:focus { @include entry(focus, $fc:$inverse_fg_color); }
1989
&:insensitive {
1990
@include entry(insensitive, $fc:$inverse_divider_color);
1991
color: $inverse_disabled_fg_color;
1992
}
1993
}
1994
.modal-dialog-button-box { spacing: 3px; }
1996
.modal-dialog-button {
1997
padding: 0 16px;
1998
@include button(flat-normal, $tc: $inverse_fg_color);
1999
&:hover,&:focus { @include button(flat-hover, $tc: $inverse_fg_color); }
2000
&:active { @include button(flat-active, $tc: $inverse_fg_color); }
2001
&:insensitive { @include button(flat-insensitive, $tc: $inverse_fg_color); }
2002
&:default {
2004
@include button(normal, $c: $suggested_color, $tc: $inverse_fg_color);
2005
&:hover,&:focus { @include button(hover, $c: $suggested_color, $tc: $inverse_fg_color); }
2006
&:active { @include button(active, $c: $suggested_color, $tc: $inverse_fg_color); }
2007
&:insensitive { @include button(insensitive, $c: $inverse_fill_color, $tc: $inverse_disabled_fg_color); }
2008
}
2009
}
2010
}
2011
.login-dialog-logo-bin { padding: 24px 0px; }
2013
.login-dialog-banner { color: $inverse_secondary_fg_color; }
2014
.login-dialog-button-box { spacing: 5px; }
2015
.login-dialog-message-warning { color: $warning_color; }
2016
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
2017
.login-dialog-user-selection-box {
2018
padding: 100px 0px;
2019
.login-dialog-not-listed-label {
2020
padding-left: 2px;
2021
.login-dialog-not-listed-button:focus &,
2022
.login-dialog-not-listed-button:hover & {
2023
color: $inverse_fg_color;
2024
}
2025
}
2026
}
2027
.login-dialog-not-listed-label {
2028
transition-duration: $shorter_duration;
2029
font-size: 1em;
2030
font-weight: bold;
2031
color: $inverse_secondary_fg_color;
2032
padding-top: 1em;
2033
border-radius: $material_radius;
2034
&:hover {
2035
background-color: $inverse_hover_overlay_color;
2036
color: $inverse_fg_color;
2037
}
2038
&:focus { background-color: $inverse_focus_overlay_color; }
2039
&:active {
2040
transition-duration: $longer_duration;
2041
background-color: $inverse_active_overlay_color;
2042
color: $inverse_fg_color;
2043
}
2044
}
2045
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
2047
.login-dialog-user-list {
2048
spacing: 12px;
2049
padding: .2em;
2050
width: 23em;
2051
&:expanded .login-dialog-user-list-item:focus { background-color: $inverse_focus_overlay_color; color: $inverse_fg_color; }
2052
&:expanded .login-dialog-user-list-item:hover { background-color: $inverse_hover_overlay_color; color: $inverse_fg_color; }
2053
&:expanded .login-dialog-user-list-item:active { background-color: $inverse_active_overlay_color; color: $inverse_fg_color; }
2054
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $inverse_fg_color; }
2055
}
2056
.login-dialog-user-list-item {
2057
transition-duration: $shorter_duration;
2058
border-radius: $material_radius;
2059
padding: 4px 4px 0;
2060
color: $inverse_secondary_fg_color;
2061
&:ltr { padding-right: 1em; }
2062
&:rtl { padding-left: 1em; }
2063
&:hover {
2064
background-color: $inverse_hover_overlay_color;
2065
color: $inverse_fg_color;
2066
}
2067
&:active {
2068
transition-duration: $longer_duration;
2069
background-color: $inverse_active_overlay_color;
2070
color: $inverse_fg_color;
2071
}
2072
.login-dialog-timed-login-indicator {
2073
height: 2px;
2074
margin: 2px 0 0 0;
2075
background-color: $inverse_fg_color;
2076
}
2077
&:focus .login-dialog-timed-login-indicator { background-color: $inverse_fg_color; }
2078
}
2079
.login-dialog-username,
2081
.user-widget-label {
2082
color: $inverse_fg_color;
2083
@include font(title);
2084
text-align: left;
2085
padding-left: 15px;
2086
}
2087
.user-widget-label {
2088
&:ltr { padding-left: 18px; }
2089
&:rtl { padding-right: 18px; }
2090
}
2091
.login-dialog-prompt-layout {
2093
padding-top: 24px;
2094
padding-bottom: 12px;
2095
spacing: 8px;
2096
width: 23em;
2097
}
2098
.login-dialog-prompt-label {
2100
color: $inverse_secondary_fg_color;
2101
font-size: 1em;
2102
padding-top: 1em;
2103
}
2104
.login-dialog-session-list-button StIcon {
2106
icon-size: 1.25em;
2107
}
2108
.login-dialog-session-list-button {
2110
color: $inverse_secondary_fg_color;
2111
&:hover,&:focus { color: $inverse_fg_color; }
2112
&:active { color: $inverse_fg_color; }
2113
}
2114
//SCREEN SHIELD
2116
.screen-shield-arrows {
2118
padding-bottom: 3em;
2119
}
2120
.screen-shield-arrows Gjs_Arrow {
2122
color: white;
2123
width: 80px;
2124
height: 48px;
2125
-arrow-thickness: 12px;
2126
-arrow-shadow: $shadow_1;
2127
}
2128
.screen-shield-clock {
2130
color: white;
2131
text-shadow: $shadow_1;
2132
font-weight: normal;
2133
text-align: center;
2134
padding-bottom: 1.5em;
2135
}
2136
.screen-shield-clock-time {
2138
@include font(display-4);
2139
text-shadow: $shadow_1;
2140
}
2141
.screen-shield-clock-date { @include font(display-2); }
2143
.screen-shield-notifications-container {
2145
spacing: 6px;
2146
width: 30em;
2147
background-color: transparent;
2148
max-height: 500px;
2149
.summary-notification-stack-scrollview {
2150
padding-top: 0;
2151
padding-bottom: 0;
2152
}
2153
.notification,
2155
.screen-shield-notification-source {
2156
padding: 8px;
2157
border: none;
2158
background-color: $alt_panel_bg_color;
2159
color: $inverse_fg_color;
2160
border-radius: $material_radius;
2161
}
2162
.notification { margin-right: 16px; } //compensate for space allocated to the scrollbar
2163
}
2164
.screen-shield-notification-label {
2167
min-height: $small_size - 2px;
2168
padding: 2px 0px 0px 16px;
2169
font-weight: bold;
2170
}
2171
.screen-shield-notification-count-text {
2173
min-height: $small_size - 2px;
2174
padding: 2px 0px 0px 16px;
2175
color: $inverse_secondary_fg_color;
2176
}
2177
#panel.lock-screen { background-color: $alt_panel_bg_color; }
2179
.screen-shield-background { //just the shadow, really
2181
background: black;
2182
box-shadow: $shadow_5;
2183
}
2184
#lockDialogGroup {
2186
background: $gdm_bg_color;
2187
background-size: cover;
2188
}
2189
#screenShieldNotifications {
2191
StScrollBar { @extend %overview_scrollbar; }
2192
}
2193
// Looking Glass
2196
#LookingGlassDialog {
2197
background-color: $surface_color;
2198
spacing: 4px;
2199
padding: 0;
2200
border: none;
2201
border-radius: $material_radius;
2202
box-shadow: $shadow_4;
2203
& > #Toolbar {
2204
padding: 0 8px;
2205
border: none;
2206
border-radius: 0;
2207
background-color: rgba($surface_color, 0.01);
2208
box-shadow: inset 0 -1px 0 $border_color;
2209
}
2210
.labels { spacing: 0; }
2211
.notebook-tab {
2212
-natural-hpadding: 12px;
2213
-minimum-hpadding: 6px;
2214
font-weight: bold;
2215
color: $secondary_fg_color;
2216
transition-duration: $shorter_duration;
2217
padding-left: 16px;
2218
padding-right: 16px;
2219
min-height: $medium_size;
2220
padding: 0 16px * 2;
2221
&:hover {
2222
background-color: $hover_overlay_color;
2223
color: $fg_color;
2224
text-shadow: none;
2225
}
2226
&:active {
2227
background-color: $active_overlay_color;
2228
color: $fg_color;
2229
}
2230
&:selected {
2231
border-bottom-width: 0;
2232
border-color: transparent;
2233
background-color: rgba($surface_color, 0.01);
2234
box-shadow: inset 0 -2px 0px $primary_color;
2235
color: $fg_color;
2236
text-shadow: none;
2237
transition-duration: $longer_duration;
2238
}
2239
}
2240
StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
2241
StBoxLayout#ResultsArea { spacing: 4px; }
2242
}
2243
.lg-dialog {
2245
StEntry {
2246
selection-background-color: $selected_overlay_color;
2247
selected-color: $fg_color;
2248
}
2249
.shell-link {
2250
color: $link_color;
2251
&:hover { color: $link_color; }
2252
}
2253
}
2254
.lg-completions-text {
2256
font-size: 1em;
2257
font-style: italic;
2258
}
2259
.lg-obj-inspector-title {
2261
spacing: 4px;
2262
}
2263
.lg-obj-inspector-button {
2265
min-height: $medium_size;
2266
padding: 0 16px;
2267
border: none;
2268
border-radius: $material_radius;
2269
@include font(button);
2270
@include button(flat-normal);
2271
&:hover { @include button(flat-hover); }
2272
&:active { @include button(flat-active); }
2273
&:insensitive { @include button(flat-insensitive); }
2274
&:focus { @include button(flat-focus); }
2275
&:hover { border: none; }
2276
}
2277
#lookingGlassExtensions { padding: 4px; }
2279
.lg-extensions-list {
2281
padding: 4px;
2282
spacing: 6px;
2283
}
2284
.lg-extension {
2286
border: none;
2287
border-radius: $material_radius;
2288
padding: 4px;
2289
}
2290
.lg-extension-name {
2292
@include font(headline);
2293
}
2294
.lg-extension-meta {
2296
spacing: 6px;
2297
}
2298
#LookingGlassPropertyInspector {
2300
background: $surface_color;
2301
border: none;
2302
border-radius: $material_radius;
2303
padding: 6px;
2304
box-shadow: $shadow_4;
2305
}
2306