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
* {
29
// transition-timing-function: $deceleration_curve;
30
transition-duration: $longer_duration;
31
}
32
stage {
34
font-family: $font-family;
35
@include font(body-1);
36
color: $fg_color;
37
}
38
/* WIDGETS */
40
/* Buttons */
42
.button {
43
min-height: $medium_size;
44
padding: 0 16px;
45
border-width: 0;
46
border-radius: 2px;
47
@include font(button);
48
@include button(flat-normal);
49
&:hover { @include button(flat-hover); }
50
&:active { @include button(flat-active); }
51
&:insensitive { @include button(flat-insensitive); }
52
&:focus { @include button(flat-focus); }
53
}
55
.modal-dialog-linked-button {
57
min-height: $medium_size;
58
margin: $container_padding;
59
padding: 0 8px;
60
margin-right: 0;
61
border-right-width: 0;
62
border-radius: 2px;
63
@include font(button);
64
@include button(flat-normal);
65
&:hover { @include button(flat-hover); }
66
&:active { @include button(flat-active); }
67
&:insensitive { @include button(flat-insensitive); }
68
&:focus { @include button(flat-focus); }
69
&:first-child {
71
border-radius: 2px;
72
}
73
&:last-child {
74
margin-right: $container_padding;
75
border-right-width: 0px;
76
border-radius: 2px;
77
}
78
&:first-child:last-child {
79
margin-right: $container_padding;
80
border-right-width: 0px;
81
border-radius: 2px;
82
}
83
}
84
/* Entries */
86
StEntry {
87
min-height: $medium_size;
88
padding: 0 8px;
89
border-radius: 0;
90
border-width: 0;
91
color: $fg_color;
92
selection-background-color: $primary_color;
93
selected-color: $inverse_fg_color;
94
@include font(subheading);
95
@include entry(normal);
96
//&:hover { @include entry(hover);}
97
&:focus { @include entry(focus);}
98
&:insensitive { @include entry(insensitive);}
99
StIcon.capslock-warning {
100
icon-size: 16px;
101
warning-color: $warning_color;
102
padding: 0 0;
103
}
104
}
105
/* Scrollbars */
108
StScrollView {
110
&.vfade { -st-vfade-offset: 32px; }
111
&.hfade { -st-hfade-offset: 32px; }
112
}
113
StScrollBar {
115
padding: 0;
116
StScrollView & {
118
min-width: 16px;
119
min-height: 16px;
120
}
121
StBin#trough {
123
margin: 4px;
124
border-radius: 100px;
125
background-color: $divider_color;
126
}
127
StButton#vhandle, StButton#hhandle {
129
border-radius: 100px;
130
background-color: $hint_fg_color;
131
//border: 4px solid transparent; //would be nice to margin or at least to transparent
132
margin: 4px;
133
&:hover { background-color: $secondary_fg_color; }
134
&:active { background-color: $fg_color; }
135
}
136
}
137
%overview_scrollbar {
139
StBin#trough {
140
background-color: $inverse_divider_color;
141
}
142
StButton#vhandle, StButton#hhandle {
144
background-color: $inverse_hint_fg_color;
145
&:hover { background-color: $inverse_secondary_fg_color; }
146
&:active { background-color: $inverse_fg_color; }
147
}
148
}
149
/* Slider */
151
.slider {
153
height: 20px;
154
color: $accent_color;
155
-slider-height: 2px;
156
-slider-background-color: $track_color; //background of the trough
157
-slider-border-color: transparent; //trough border color
158
-slider-active-background-color: $accent_color; //active trough fill
159
-slider-active-border-color: transparent; //active trough border
160
-slider-border-width: 0;
161
-slider-handle-radius: 6px;
162
}
163
/* Check Boxes */
165
.check-box {
167
* {
168
min-height: $medium_size - 8px * 2;
169
padding: 8px 0;
170
}
171
StBoxLayout { spacing: 8px; }
172
StBin {
173
width: 24px;
174
height: 24px;
175
padding: ($medium_size - 24px) / 2;
176
border-radius: 100px;
177
background-image: url("assets/checkbox-off.svg");
178
}
179
&:focus StBin {
180
background-image: url("assets/checkbox-off.svg");
181
}
182
&:hover StBin {
183
background-color: $divider_color;
184
}
185
&:active StBin {
186
background-color: $track_color;
187
}
188
&:checked StBin {
189
background-image: url("assets/checkbox.svg");
190
}
191
&:focus:checked StBin {
192
background-image: url("assets/checkbox.svg");
193
}
194
&:hover:checked StBin {
195
background-color: rgba($accent_color, 0.12);
196
}
197
&:active:checked StBin {
198
background-color: rgba($accent_color, 0.24);
199
}
200
}
201
/* Switches */
203
.toggle-switch {
204
width: 40px;
205
height: 20px;
206
background-size: contain;
207
}
208
@each $v in us, intl {
210
.toggle-switch-#{$v} {
211
background-image: url("assets/toggle-off.svg");
212
&:checked { background-image: url("assets/toggle-on.svg"); }
213
}
214
}
215
/* links */
217
.shell-link {
218
border-radius: 2px;
219
color: $link_color;
220
&:hover {
221
color: $link_color;
222
background-color: rgba($link_color, 0.12);
223
}
224
&:active {
225
color: $link_color;
226
background-color: rgba($link_color, 0.24);
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: 2px;
238
color: $fg_color;
239
background-color: $popup_bg_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: $hint_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: $hint_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: $hint_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: 2px;
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: $hint_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: $hint_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: $alt_lighter_bg_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: $primary_color;
605
color: $inverse_fg_color;
606
box-shadow: $shadow_0;
607
font-weight: normal;
608
&.selected {
609
background-color: mix($inverse_fg_color, $primary_color, percentage(0.12));
610
color: $inverse_fg_color;
611
}
612
&:active {
613
background-color: mix($inverse_fg_color, $primary_color, percentage(0.24));
614
color: $inverse_fg_color !important;
615
}
616
&:insensitive { color: $inverse_disabled_fg_color; }
617
}
618
&.selected {
619
background-color: $divider_color;
620
color: $fg_color;
621
transition-duration: 0ms;
622
}
623
&:active {
624
background-color: $track_color;
625
color: $fg_color;
626
transition-duration: $longer_duration;
627
}
628
&.selected:active { color: $fg_color; }
629
&:insensitive { color: $disabled_fg_color; }
630
}
631
.popup-inactive-menu-item { //all icons and other graphical elements
633
color: $fg_color;
634
&:insensitive { color: $hint_fg_color; }
636
}
637
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
638
&.panel-menu {
639
-boxpointer-gap: 4px;
640
margin-bottom: 1.75em;
641
}
642
}
643
.popup-menu-ornament {
647
text-align: right;
648
width: 16px;
649
height: 16px;
650
}
651
.popup-menu-boxpointer,
652
.candidate-popup-boxpointer {
653
-arrow-border-radius: 0;
654
-arrow-background-color: transparent;
655
-arrow-border-width: 0;
656
-arrow-border-color: transparent;
657
-arrow-base: 0;
658
-arrow-rise: 0;
659
-arrow-box-shadow: none; //dreaming. bug #689995
660
margin: 5px 8px 8px;
661
background-color: $popup_bg_color;
662
border-radius: 2px;
663
box-shadow: $shadow_2;
664
}
665
.popup-separator-menu-item {
667
//-margin-horizontal: 24px;
668
height: 1px; //not really the whole box
669
margin: 8px 64px - 24px;
670
background-color: transparent;
671
border-color: $border_color;
672
border-bottom-width: 1px;
673
border-bottom-style: solid;
674
}
675
// Background menu
678
.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0; }
679
/* fallback menu
681
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
682
app menu inside the main app window itself rather than the top bar
683
*/
684
/* OSD */
687
.osd-window {
688
text-align: center;
689
font-weight: bold;
690
spacing: 1em;
691
margin: 32px;
692
min-width: 64px;
693
min-height: 64px;
694
.osd-monitor-label { @include font(display-2); }
696
.level {
697
height: 8px;
698
border-radius: 0;
699
background-color: $divider_color;
700
color: $fg_color;
701
}
702
.level-bar {
703
background-color: $primary_color;
704
border-radius: 0;
705
}
706
}
707
/* Pad OSD */
709
.pad-osd-window {
710
padding: 32px;
711
background-color: $panel_bg_color;
712
}
713
.combo-box-label {
715
width: 15em;
716
}
717
/* App Switcher */
719
.switcher-popup {
720
padding: 8px;
721
spacing: 16px;
722
}
723
.osd-window,
725
.resize-popup,
726
.switcher-list {
727
@extend %osd-panel;
728
}
729
.switcher-list-item-container { spacing: 8px; }
731
.switcher-list .item-box {
733
padding: 8px;
734
border-radius: 2px;
735
}
736
.switcher-list .item-box:outlined {
738
padding: 8px;
739
border: none;
740
background-color: $divider_color;
741
}
742
.switcher-list .item-box:selected {
744
background-color: $primary_color;
745
color: $inverse_fg_color;
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_color;
760
}
761
.switcher-arrow {
763
border-color: rgba(0,0,0,0);
764
color: $hint_fg_color;
765
&:highlighted {
766
color: $fg_color;
767
}
768
}
769
.input-source-switcher-symbol {
771
@include font(display-2);
772
width: 96px;
773
height: 96px;
774
}
775
/* Window Cycler */
777
.cycler-highlight { border: 4px solid $primary_color; }
778
/* Workspace Switcher */
780
.workspace-switcher-group { padding: 8px; }
781
.workspace-switcher-container {
783
@extend %osd-panel;
784
}
785
.workspace-switcher {
787
background: transparent;
788
border: 0px;
789
border-radius: 0px;
790
padding: 0px;
791
spacing: 8px;
792
}
793
.ws-switcher-active-up, .ws-switcher-active-down {
795
height: 48px;
796
background-color: $primary_color;
797
color: $inverse_fg_color;
798
background-size: 32px;
799
border-radius: 2px;
800
}
801
.ws-switcher-box {
803
height: 48px;
804
border: none;
805
background: $divider_color;
806
border-radius: 2px;
807
}
808
%osd-panel {
810
color: $fg_color;
811
background-color: $popup_bg_color;
812
border: none;
813
box-shadow: $shadow_4;
814
border-radius: 2px;
815
padding: 12px;
816
}
817
/* Tiled window previews */
819
.tile-preview {
820
background-color: rgba($alt_primary_color, 0.3);
821
border: 1px solid $alt_primary_color;
822
}
823
.tile-preview-left.on-primary {
825
border-radius: $panel-corner-radius 0 0 0;
826
}
827
.tile-preview-right.on-primary {
829
border-radius: 0 $panel-corner-radius 0 0;
830
}
831
.tile-preview-left.tile-preview-right.on-primary {
833
border-radius: $panel-corner-radius $panel-corner-radius 0 0;
834
}
835
/* TOP BAR */
837
#panel {
839
background-color: $solid_panel_bg_color;
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: $panel-corner-radius;
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: $longer_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: 2px;
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
&:hover,&:focus { color: $fg_color; background-color: $divider_color; }
964
&:active {
965
color: $fg_color;
966
background-color: $track_color;
967
}
968
}
969
.datemenu-today-button .day-label {
971
}
972
.datemenu-today-button .date-label {
974
@include font(headline);
975
}
976
.world-clocks-header,
978
.message-list-section-title {
979
color: $secondary_fg_color;
980
font-weight: bold;
981
}
982
.world-clocks-grid {
984
spacing-rows: 0.4em;
985
}
986
.calendar-month-label {
988
height: $menuitem_size - 6px * 2;
989
margin: 2px;
990
padding: 6px 16px;
991
border-radius: 2px;
992
color: $fg_color;
993
font-weight: bold;
994
text-align: center;
995
&:focus { background-color: $divider_color; }
996
}
997
.pager-button {
999
width: $menuitem_size;
1000
height: $menuitem_size;
1001
margin: 2px;
1002
border-radius: 100px;
1003
background-color: transparent;
1004
color: $fg_color;
1005
&:hover, &:focus { background-color: $divider_color; }
1006
&:active { background-color: $track_color; }
1007
}
1008
.calendar-change-month-back { //arrow back
1010
background-image: url("assets/calendar-arrow-left.svg");
1011
&:rtl { background-image: url("assets/calendar-arrow-right.svg"); }
1012
}
1013
.calendar-change-month-forward { //arrow foreward
1014
background-image: url("assets/calendar-arrow-right.svg");
1015
&:rtl { background-image: url("assets/calendar-arrow-left.svg"); }
1016
}
1017
.calendar-day-base {
1019
@include font(caption);
1020
text-align: center;
1021
width: $menuitem_size; height: $menuitem_size;
1022
padding: 0;
1023
margin: 2px;
1024
border-radius: 100px;
1025
&:hover,&:focus { background-color: $divider_color; }
1026
// &:active { background-color: $track_color; }
1027
&:active, &:selected {
1028
color: $inverse_fg_color;
1029
background-color: $primary_color !important;
1030
border-color: transparent; //avoid jumparound due to today
1031
}
1032
&.calendar-day-heading { //day of week heading
1033
width: $menuitem_size; height: $menuitem_size - 7px;
1034
margin-top: 2px;
1035
padding: 7px 0 0;
1036
border-radius: 100px;
1037
background-color: transparent;
1038
color: $hint_fg_color;
1039
@include font(caption);
1040
font-weight: bold;
1041
text-align: center;
1042
}
1043
}
1044
.calendar-day { //border collapse hack - see calendar.js
1045
border-width: 0;
1046
}
1047
.calendar-day-top { border-top-width: 0; }
1048
.calendar-day-left { border-left-width: 0; }
1049
.calendar-work-day {
1050
}
1052
.calendar-nonwork-day {
1053
color: $fg_color;
1054
}
1055
.calendar-today {
1056
font-weight: bold !important;
1057
//color: $fg_color;
1058
//background-color: transparent;
1059
border: none;
1060
}
1061
.calendar-day-with-events {
1062
color: $link_color;
1063
font-weight: normal;
1064
text-decoration: underline;
1065
background-image: none;
1066
}
1067
.calendar-other-month-day {
1068
color: $disabled_secondary_fg_color;
1069
opacity: 0.5;
1070
}
1071
.calendar-week-number {
1072
width: $menuitem_size; height: $menuitem_size - 7px;
1073
margin: 2px;
1074
padding: 7px 0 0;
1075
border-radius: 100px;
1076
background-color: transparent;
1077
color: $hint_fg_color;
1078
font-size: inherit;
1079
font-weight: bold;
1080
text-align: center;
1081
}
1082
/* Message list */
1084
.message-list {
1085
width: 420px;
1086
}
1087
.message-list-sections {
1089
spacing: 8px;
1090
}
1091
.message-list-section,
1093
.message-list-section-list {
1094
spacing: 8px;
1095
}
1096
.message-list-section-title-box {
1098
spacing: 8px;
1099
}
1100
.message-list-section-close > StIcon {
1102
icon-size: 16px;
1103
border-radius: 16px;
1104
padding: ($menuitem_size - 16px) / 2;
1105
color: $secondary_fg_color;
1106
background-color: transparent;
1107
}
1108
/* FIXME: how do you do this in sass? */
1110
.message-list-section-close:hover > StIcon,
1111
.message-list-section-close:focus > StIcon {
1112
color: $fg_color;
1113
background-color: $divider_color;
1114
}
1115
.message-list-section-close:active > StIcon {
1117
color: $fg_color;
1118
background-color: $track_color;
1119
}
1120
.message {
1122
min-height: $menuitem_size * 2;
1123
background-color: transparent;
1124
&:hover,&:focus { background-color: $divider_color; }
1125
&:active { background-color: $track_color; }
1126
border-radius: 2px;
1127
}
1128
.message-icon-bin {
1130
padding: 8px 0px 8px 8px;
1131
&:rtl { padding: 8px 8px 8px 0px; }
1132
}
1133
.message-icon-bin > StIcon {
1135
icon-size: 32px;
1136
}
1137
.message-secondary-bin {
1139
&:ltr { padding-left: 8px; }
1140
&:rtl { padding-right: 8px; }
1141
}
1142
.message-secondary-bin {
1144
color: $secondary_fg_color;
1145
}
1146
.message-secondary-bin > StIcon {
1148
icon-size: 16px;
1149
}
1150
.message-title {
1152
min-height: $small_size - 2px;
1153
padding-top: 2px;
1154
color: $fg_color;
1155
font-weight: bold;
1156
font-size: 1em;
1157
}
1158
.message-content {
1160
min-height: $menuitem_size * 2 - 8px * 2;
1161
padding: 8px;
1162
color: $secondary_fg_color;
1163
font-size: 1em;
1164
}
1165
.message-content * > StIcon {
1167
icon-size: 16px;
1168
border-radius: 16px;
1169
padding: ($small_size - 16px) / 2;
1170
color: $secondary_fg_color;
1171
}
1172
/* FIXME: how do you do this in sass? */
1174
.message-content *:hover > StIcon,
1175
.message-content *:focus > StIcon {
1176
color: $fg_color;
1177
background-color: $divider_color;
1178
}
1179
.message-content *:active > StIcon {
1181
color: $fg_color;
1182
background-color: $track_color;
1183
}
1184
.message-media-control {
1186
margin: 16px 0;
1187
padding: 8px;
1188
border-radius: 100px;
1189
color: $secondary_fg_color;
1190
&:hover,&:focus { color: $fg_color; background-color: $divider_color; }
1191
&:active { color: $fg_color; background-color: $track_color; }
1192
&:insensitive { color: $disabled_secondary_fg_color; }
1193
&:last-child:ltr { margin-right: 16px; padding-right: 8px; }
1195
&:last-child:rtl { margin-left: 16px; padding-left: 8px; }
1196
}
1197
.media-message-cover-icon {
1199
icon-size: 32px;
1200
&.fallback {
1201
icon-size: 16px;
1202
padding: 8px;
1203
border: none;
1204
border-radius: 2px;
1205
background-color: $divider_color;
1206
color: $hint_fg_color;
1207
}
1208
}
1209
// a little unstructured mess:
1212
.system-switch-user-submenu-icon.user-icon {
1214
icon-size: 20px;
1215
padding: 0 2px;
1216
}
1217
.system-switch-user-submenu-icon.default-icon {
1218
icon-size: 16px;
1219
padding: 0 4px;
1220
}
1221
#appMenu {
1223
spinner-image: url("process-working.svg");
1224
spacing: 4px;
1225
.label-shadow { color: transparent; }
1227
}
1228
.aggregate-menu {
1230
min-width: 280px;
1231
.popup-menu-icon { padding: 0 4px; }
1232
.popup-sub-menu .popup-menu-item :first-child {
1233
&:ltr { /* 8px spacing + 2*4px padding */
1234
padding-left: 16px; margin-left: em(16px); }
1235
&:rtl { /* 8px spacing + 2*4px padding */
1236
padding-right: 16px; margin-right: em(16px); }
1237
}
1238
}
1239
.system-menu-action {
1241
color: $secondary_fg_color;
1242
border-radius: 100px; /* wish we could do 50% */
1243
padding: ($large_size - 16px) / 2;
1244
border: none;
1245
&:hover, &:focus {
1247
background-color: $divider_color;
1248
color: $fg_color;
1249
border: none;
1250
padding: ($large_size - 16px) / 2;
1251
}
1252
&:active { background-color: $track_color; color: $fg_color; }
1253
& > StIcon { icon-size: 16px; }
1255
}
1256
//Activities Ripples
1258
.ripple-box {
1259
width: 48px;
1260
height: 48px;
1261
border-radius: 0 0 48px 0;
1262
background-color: $inverse_track_color;
1263
background-image: none;
1264
background-size: auto;
1265
}
1266
.ripple-box:rtl {
1268
border-radius: 0 0 0 48px;
1269
background-image: none;
1270
}
1271
// not really top bar only
1273
.popup-menu-arrow { width: 16px; height: 16px; }
1274
.popup-menu-icon { icon-size: em(16px); }
1275
//close buttons
1277
.window-close {
1279
transition-duration: 0ms; // FIXME: unless disable the transition, button will distort when hovering
1280
height: $medium_size;
1281
width: $medium_size;
1282
-st-background-image-shadow: $shadow_1;
1283
background-image: url("assets/window-close.svg");
1284
background-size: $medium_size;
1285
&:hover { -st-background-image-shadow: $shadow_2; }
1286
&:active { background-image: url("assets/window-close-active.svg"); }
1287
}
1288
.window-close {
1289
-shell-close-overlap: $medium_size / 2;
1290
&:rtl { -st-background-image-shadow: $shadow_1; }
1291
&:rtl:hover { -st-background-image-shadow: $shadow_2; }
1292
}
1293
/* NETWORK DIALOGS */
1295
.nm-dialog {
1297
max-height: 500px;
1298
min-height: 450px;
1299
min-width: 470px;
1300
}
1301
.nm-dialog-content {
1303
spacing: 20px;
1304
padding: 24px;
1305
}
1306
.nm-dialog-header-hbox { spacing: 10px; }
1307
.nm-dialog-airplane-box { spacing: 12px; }
1308
.nm-dialog-airplane-headline {
1310
font-weight: bold;
1311
text-align: center;
1312
}
1313
.nm-dialog-airplane-text { color: $fg_color; }
1315
.nm-dialog-header-icon { icon-size: 32px; }
1316
.nm-dialog-scroll-view { border: none; }
1317
.nm-dialog-header { @include font(title); }
1318
.nm-dialog-item {
1320
font-size: 1em;
1321
border-bottom: none;
1322
border-radius: 2px;
1323
padding: 12px;
1324
spacing: 20px;
1325
&:hover, &:focus { background-color: $divider_color; }
1326
&:active { background-color: $track_color; }
1327
}
1328
.nm-dialog-item:selected {
1330
background-color: $primary_color;
1331
color: $inverse_fg_color;
1332
}
1333
.nm-dialog-icons { spacing: .5em; }
1335
.nm-dialog-icon { icon-size: 16px; }
1336
.no-networks-label { color: $hint_fg_color; }
1337
.no-networks-box { spacing: 12px; }
1338
/* OVERVIEW */
1340
#overview {
1342
spacing: 24px; //
1343
StScrollBar { @extend %overview_scrollbar; }
1344
}
1345
.overview-controls {
1347
padding-bottom: 32px;
1348
}
1349
.window-picker { //container around window thumbnails
1351
-horizontal-spacing: 32px;
1352
-vertical-spacing: 32px;
1353
padding-left: 32px;
1354
padding-right: 32px;
1355
padding-bottom: 48px;
1356
&.external-monitor { padding: 32px; }
1358
}
1359
.window-clone-border {
1361
border: 4px solid $inverse_track_color;
1362
border-radius: 2px;
1363
// For window decorations with round corners we can't match
1364
// the exact shape when the window is scaled. So apply a shadow
1365
// to fix that case
1366
box-shadow: inset 0 0 0 1px $inverse_track_color;
1367
}
1368
.window-caption {
1369
spacing: 25px;
1370
color: $inverse_fg_color;
1371
background-color: transparent;
1372
border-radius: 2px;
1373
padding: 4px 8px;
1374
-shell-caption-spacing: 12px;
1375
&:hover { background-color: $inverse_track_color; color: $inverse_fg_color; }
1376
}
1377
//search entry
1379
.search-entry {
1380
width: 320px - 8px * 2;
1381
padding: 0 8px;
1382
border-radius: 0;
1383
color: $inverse_hint_fg_color;
1384
selection-background-color: $inverse_track_color;
1385
selected-color: $inverse_fg_color;
1386
@include entry(normal,$fc:$inverse_track_color);
1387
&:focus {
1388
@include entry(focus,$fc:$inverse_fg_color);
1389
padding: 0 8px;
1390
border-width: 0;
1391
color: $inverse_fg_color;
1392
}
1393
.search-entry-icon { icon-size: 16px; padding: 0 0; color: $inverse_hint_fg_color; }
1395
&:hover, &:focus {
1397
.search-entry-icon { color: $inverse_fg_color; }
1398
}
1399
}
1400
//search results
1402
#searchResultsBin {
1404
max-width: 1000px;
1405
}
1406
#searchResultsContent {
1408
padding-left: 20px;
1409
padding-right: 20px;
1410
spacing: 16px;
1411
}
1412
.search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
1414
.search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container
1415
.search-statustext { // "no results"
1416
@extend %status_text;
1417
}
1418
.list-search-results { spacing: 3px; }
1419
.search-section-separator {
1421
-gradient-height: 1px;
1422
-gradient-start: rgba(255,255,255,0);
1423
-gradient-end: rgba(255,255,255,0.4);
1424
-margin-horizontal: 1.5em;
1425
height: 1px;
1426
}
1427
.list-search-result-content { spacing: 12px; padding: 12px; }
1429
.list-search-result-title { @include font(headline); color: $inverse_fg_color; }
1430
.list-search-result-description { color: $inverse_secondary_fg_color; }
1431
.search-provider-icon { padding: 15px; }
1432
.search-provider-icon-more {
1433
width: 16px;
1434
height: 16px;
1435
background-image: url("assets/more-results.svg");
1436
}
1437
/* DASHBOARD */
1440
#dash {
1442
font-size: 1em;
1443
color: $inverse_fg_color;
1444
background-color: $inverse_panel_bg_color;
1445
padding: 3px 0;
1446
border: none;
1447
border-left: 0px;
1448
border-radius: 0px 2px 2px 0px;
1449
&:rtl {
1451
border-radius: 2px 0 0 2px;
1452
}
1453
.placeholder {
1455
background-image: url("assets/dash-placeholder.svg");
1456
background-size: contain;
1457
height: 24px;
1458
}
1459
.empty-dash-drop-target {
1461
width: 24px;
1462
height: 24px;
1463
}
1464
}
1466
.dash-item-container > StWidget {
1468
padding: 3px 6px;
1469
}
1470
.dash-label { //osd tooltip
1472
// min-height: 32px - 6px * 2;
1473
border-radius: 2px;
1474
padding: 7px 8px;
1475
color: $fg_color;
1476
background-color: $popup_bg_color;
1477
box-shadow: $shadow_2;
1478
text-align: center;
1479
-x-offset: 8px;
1480
}
1481
/* App Vault/Grid */
1483
.icon-grid {
1484
spacing: 30px;
1485
-shell-grid-horizontal-item-size: 136px;
1486
-shell-grid-vertical-item-size: 136px;
1487
.overview-icon { icon-size: 96px; }
1489
}
1490
//.app-display { spacing: 20px; }
1491
.app-view-controls { //favorties | all toggle container
1493
width: 320px;
1494
padding-bottom: 32px;
1495
}
1496
.app-view-control { //favorties | all toggle button
1497
padding: 0 16px;
1498
font-weight: bold;
1499
color: $inverse_secondary_fg_color;
1500
&:hover {
1501
color: $inverse_fg_color;
1502
background-color: $inverse_divider_color !important;
1503
}
1504
&:active {
1505
color: $inverse_fg_color;
1506
background-color: $inverse_track_color !important;
1507
}
1508
&:checked {
1509
color: $inverse_fg_color;
1510
background-color: rgba($panel_bg_color, 0.01) !important;
1511
box-shadow: inset 0 2px 0 $inverse_fg_color;
1512
}
1513
&:first-child {
1514
border-right-width: 0;
1515
border-radius: 2px;
1516
&:checked { border-radius: 0; }
1517
}
1518
&:last-child {
1519
border-radius: 2px;
1520
&:checked { border-radius: 0; }
1521
}
1522
}
1523
//Icon tile
1525
.search-provider-icon,
1526
.list-search-result {
1527
@extend %icon_tile;
1528
&:focus, &:selected, &:hover {
1529
background-color: $inverse_divider_color;
1530
transition-duration: 0ms;
1531
}
1532
&:active, &:checked {
1533
background-color: $inverse_track_color;
1534
transition-duration: $longer_duration;
1535
}
1536
}
1537
.app-well-app,
1538
.app-well-app.app-folder,
1539
.show-apps,
1540
.grid-search-result {
1541
& .overview-icon {
1542
@extend %icon_tile;
1543
}
1544
&:hover .overview-icon,
1545
&:focus .overview-icon,
1546
&:selected .overview-icon {
1547
background-color: $inverse_divider_color;
1548
transition-duration: 0ms;
1549
border-image: none;
1550
background-image: none;
1551
}
1552
&:active .overview-icon,
1553
&:checked .overview-icon {
1554
background-color: $inverse_track_color;
1555
box-shadow: $shadow_0;
1556
transition-duration: $longer_duration;
1557
}
1558
}
1560
.app-well-app-running-dot { //running apps indicator
1562
width: 32px; height: 2px;
1563
background-color: $inverse_fg_color;
1564
margin-bottom: 0;
1565
}
1566
%icon_tile {
1568
color: $inverse_fg_color;
1569
border-radius: 2px;
1570
padding: 6px;
1571
border: none;
1572
transition-duration: $longer_duration;
1573
text-align: center;
1574
}
1575
.app-well-app.app-folder > .overview-icon {
1577
background-color: $inverse_panel_bg_color;
1578
}
1579
.show-apps .show-apps-icon {
1581
color: $inverse_secondary_fg_color;
1582
}
1583
.show-apps:hover .show-apps-icon,
1585
.show-apps:active .show-apps-icon,
1586
.show-apps:checked .show-apps-icon,
1587
.show-apps:focus .show-apps-icon {
1588
color: $inverse_fg_color;
1589
transition-duration: $longer_duration;
1590
}
1591
// Collections
1594
.app-folder-popup { //expanded collection
1595
-arrow-border-radius: 2px;
1596
-arrow-background-color: $inverse_panel_bg_color;
1597
-arrow-base: 24px;
1598
-arrow-rise: 12px;
1599
}
1600
.app-folder-popup-bin { padding: 5px; }
1601
.app-folder-icon {
1602
padding: 5px;
1603
spacing-rows: 5px;
1604
spacing-columns: 5px;
1605
}
1606
.page-indicator {
1608
padding: 15px 20px;
1609
.page-indicator-icon {
1611
width: 12px;
1612
height: 12px;
1613
border-radius: 12px;
1614
background-image: none;
1615
background-color: $inverse_disabled_secondary_fg_color;
1616
}
1617
&:hover .page-indicator-icon {
1618
background-image: none;
1619
background-color: $inverse_disabled_fg_color;
1620
}
1621
&:active .page-indicator-icon {
1622
background-image: none;
1623
background-color: $inverse_secondary_fg_color;
1624
}
1625
&:checked .page-indicator-icon {
1626
background-image: none;
1627
background-color: $inverse_fg_color;
1628
transition-duration: 0ms;
1629
}
1630
&:checked:active { background-image: none; }
1631
}
1632
.no-frequent-applications-label { @extend %status_text; }
1634
.app-well-app > .overview-icon.overview-icon-with-label,
1636
.grid-search-result .overview-icon.overview-icon-with-label {
1637
padding: 10px 8px 5px 8px;
1638
spacing: 4px;
1639
}
1640
// Workspace pager
1642
.workspace-thumbnails { //container ala dash
1643
@extend %overview-panel;
1644
visible-width: 32px; //amount visible before hover
1645
spacing: 12px;
1646
padding: 12px;
1647
border-radius: 2px 0 0 2px;
1648
//border-width: 0; //fixme: can't have non unoform borders :(
1649
&:rtl { border-radius: 0 2px 2px 0;}
1650
.placeholder {
1652
background-image: url("assets/dash-placeholder.svg");
1653
background-size: contain;
1654
height: 24px;
1655
}
1656
}
1657
.workspace-thumbnail-indicator {
1658
border: 0 solid $inverse_fg_color;
1659
border-left-width: 2px;
1660
padding: 6px;
1661
border-radius: 0;
1662
}
1663
//Some hacks I don't even
1665
.search-display > StBoxLayout,
1666
.all-apps,
1667
.frequent-apps > StBoxLayout {
1668
// horizontal padding to make sure scrollbars or dash don't overlap content
1669
padding: 0px 88px 10px 88px;
1670
}
1671
%overview-panel {
1673
color: $inverse_fg_color;
1674
background-color: $inverse_panel_bg_color;
1675
border: none;
1676
}
1677
%status_text {
1679
@include font(display-2);
1680
color: $inverse_hint_fg_color;
1681
}
1682
/* NOTIFICATIONS & MESSAGE TRAY */
1684
.url-highlighter { link-color: $link_color; }
1686
// Banners
1688
.notification-banner {
1689
font-size: 1em;
1690
width: 34em;
1691
min-height: $menuitem_size * 2;
1692
margin: 5px;
1693
border-radius: 2px;
1694
color: $fg_color;
1695
background-color: $popup_bg_color;
1696
border: none;
1697
box-shadow: $shadow_2;
1698
&:hover { background-color: $popup_bg_color; }
1699
&:focus { background-color: $popup_bg_color; }
1700
.notification-icon { padding: 5px; }
1702
.notification-content { padding: 5px; spacing: 5px; }
1703
.secondary-icon { icon-size: em(16px); }
1704
.notification-actions {
1705
background-color: transparent;
1706
padding-top: 0;
1707
padding: $container_padding;
1708
spacing: $container_padding;
1709
}
1710
.notification-button {
1711
min-height: $medium_size;
1712
padding: 0 8px;
1713
background-color: transparent;
1714
color: $secondary_fg_color;
1715
font-weight: 500;
1716
&:first-child { border-radius: 2px; }
1717
&:last-child { border-radius: 2px; }
1718
&:hover, &focus { background-color: $divider_color; color: $fg_color; }
1719
&:active { background-color: $track_color; color: $fg_color; }
1720
}
1721
}
1722
.summary-source-counter {
1723
font-size: 1em;
1724
font-weight: bold;
1725
height: 1.6em; width: 1.6em;
1726
-shell-counter-overlap-x: 3px;
1727
-shell-counter-overlap-y: 3px;
1728
background-color: $primary_color;
1729
color: $inverse_fg_color;
1730
border: 2px solid $inverse_fg_color;
1731
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
1732
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
1733
}
1734
.secondary-icon { icon-size: em(16px); }
1736
//chat bubbles
1738
.chat-body { spacing: 5px; }
1739
.chat-response { margin: 5px; }
1740
.chat-log-message { color: $fg_color; }
1741
.chat-new-group { padding-top: 1em; }
1742
.chat-received {
1743
padding-left: 4px;
1744
&:rtl { padding-left: 0px; padding-right: 4px; }
1745
}
1746
.chat-sent {
1747
padding-left: 18pt;
1748
color: $secondary_fg_color;
1749
&:rtl { padding-left: 0; padding-right: 18pt; }
1750
}
1751
.chat-meta-message {
1752
padding-left: 4px;
1753
@include font(caption);
1754
color: $hint_fg_color;
1755
&:rtl { padding-left: 0; padding-right: 4px; }
1756
}
1757
//hotplug
1759
.hotplug-transient-box {
1760
spacing: 6px;
1761
padding: 2px 72px 2px 12px;
1762
}
1763
.hotplug-notification-item {
1764
padding: 2px 10px;
1765
&:focus { padding: 1px 71px 1px 11px; }
1766
}
1767
.hotplug-notification-item-icon {
1769
icon-size: 24px;
1770
padding: 2px 5px;
1771
}
1772
.hotplug-resident-box { spacing: 8px; }
1774
.hotplug-resident-mount {
1776
spacing: 8px;
1777
border-radius: 2px;
1778
&:hover { background-color: $divider_color; }
1779
&:active { background-color: $track_color; }
1780
}
1781
.hotplug-resident-mount-label {
1783
color: inherit;
1784
padding-left: 6px;
1785
}
1786
.hotplug-resident-mount-icon {
1788
icon-size: 24px;
1789
padding-left: 6px;
1790
}
1791
.hotplug-resident-eject-icon {
1793
icon-size: 16px;
1794
}
1795
.hotplug-resident-eject-button {
1797
padding: 7px;
1798
border-radius: 2px;
1799
color: $fg_color;
1800
}
1801
/* Eeeky things */
1803
$legacy_icon_size: 24px;
1805
.legacy-tray {
1807
background-color: $panel_bg_color;
1808
color: $inverse_fg_color;
1809
border: none;
1810
border-bottom-width: 0;
1811
&:ltr { border-radius: 0 2px 0 0; border-left-width: 0; }
1812
&:rtl { border-radius: 2px 0 0 0; border-right-width: 0; }
1813
}
1814
.legacy-tray-handle,
1816
.legacy-tray-icon {
1817
padding: 6px;
1818
& StIcon { icon-size: $legacy_icon_size; }
1819
&:hover,&:focus { background-color: $inverse_divider_color; }
1820
&:active { background-color: $inverse_track_color; }
1821
}
1822
.legacy-tray-icon-box {
1824
spacing: 12px;
1825
&:ltr { padding-left: 12px; }
1826
&:rtl { padding-right: 12px; }
1827
& StButton { width: $legacy_icon_size; height: $legacy_icon_size }
1828
}
1829
//magnifier
1831
.magnifier-zoom-region {
1833
border: 2px solid $primary_color;
1834
&.full-screen { border-width: 0; }
1835
}
1836
//Keyboard
1838
/* On-screen Keyboard */
1839
#keyboard {
1841
background-color: $alt_panel_bg_color;
1842
}
1843
.keyboard-layout {
1845
spacing: 10px;
1846
padding: 10px;
1847
}
1848
.keyboard-row { spacing: 15px; }
1850
.keyboard-key {
1852
min-height: $medium_size * 2;
1853
min-width: $medium_size * 2;
1854
font-size: 2em;
1855
font-weight: 500;
1856
border-radius: 2px;
1857
border: none;
1858
color: inherit;
1859
@include button(normal);
1860
&:focus { @include button(focus); }
1861
&:hover,&:checked { @include button(hover); }
1862
&:active { @include button(active);}
1863
&:grayed { //FIXME
1864
background-color: $alt_panel_bg_color;
1865
color: $inverse_fg_color;
1866
border-color: $alt_panel_bg_color;
1867
}
1868
}
1869
.keyboard-subkeys { //long press on a key popup
1871
color: inherit;
1872
padding: 5px;
1873
-arrow-border-radius: 0;
1874
-arrow-background-color: transparent;
1875
-arrow-border-width: 0;
1876
-arrow-border-color: transparent;
1877
-arrow-base: 0;
1878
-arrow-rise: 0;
1879
-boxpointer-gap: 5px;
1880
background-color: $popup_bg_color;
1881
border-radius: 2px;
1882
box-shadow: $shadow_2;
1883
}
1884
// IBus Candidate Popup
1886
.candidate-popup-content {
1888
padding: 8px;
1889
spacing: 0;
1890
}
1891
.candidate-index {
1893
padding: 0 4px 0 0;
1894
color: $hint_fg_color;
1895
.candidate-box:selected & { color: $inverse_hint_fg_color; }
1896
}
1897
.candidate-box {
1899
transition-duration: 0ms; // FIXME: needs more natural transitions
1900
min-height: $menuitem_size;
1901
padding: 0 8px;
1902
border-radius: 2px;
1903
&:hover { background-color: $divider_color; color: $fg_color; }
1904
&:active { background-color: $track_color; color: $fg_color; }
1905
&:selected { background-color: $primary_color; color: $inverse_fg_color; }
1906
}
1907
.candidate-page-button-box {
1909
height: $menuitem_size;
1910
.vertical & { padding-top: 0; }
1911
.horizontal & { padding-left: 0; }
1912
}
1913
.candidate-page-button {
1915
min-width: $menuitem_size;
1916
min-height: $menuitem_size;
1917
padding: 0;
1918
}
1919
.candidate-page-button-previous { border-radius: 2px; border-right-width: 0; }
1921
.candidate-page-button-next { border-radius: 2px; }
1922
.candidate-page-button-icon { icon-size: em(16px); }
1923
/* Auth Dialogs & Screen Shield */
1925
.framed-user-icon {
1927
background-size: contain;
1928
border: none;
1929
color: $inverse_fg_color;
1930
border-radius: 2px;
1931
&:hover {
1932
border-color: $inverse_fg_color;
1933
color: $inverse_fg_color;
1934
}
1935
}
1936
// LOGIN DIALOG
1938
.login-dialog-banner-view {
1940
padding-top: 24px;
1941
max-width: 23em;
1942
}
1943
.login-dialog {
1945
//reset
1946
border: none;
1947
background-color: transparent;
1948
StEntry {
1950
color: $inverse_fg_color;
1951
selection-background-color: $inverse_track_color;
1952
selected-color: $inverse_fg_color;
1953
@include entry(normal, $fc:$inverse_track_color);
1954
&:focus { @include entry(focus, $fc:$inverse_fg_color); }
1955
&:insensitive {
1956
@include entry(insensitive, $fc:$inverse_divider_color);
1957
color: $inverse_disabled_fg_color;
1958
}
1959
}
1960
.modal-dialog-button-box { spacing: 3px; }
1962
.modal-dialog-button {
1963
padding: 0 16px;
1964
@include button(flat-normal, $tc: $inverse_fg_color);
1965
&:hover,&:focus { @include button(flat-hover, $tc: $inverse_fg_color); }
1966
&:active { @include button(flat-active, $tc: $inverse_fg_color); }
1967
&:insensitive { @include button(flat-insensitive, $tc: $inverse_fg_color); }
1968
&:default {
1970
@include button(normal, $c: $suggested_color, $tc: $inverse_fg_color);
1971
&:hover,&:focus { @include button(hover, $c: $suggested_color, $tc: $inverse_fg_color); }
1972
&:active { @include button(active, $c: $suggested_color, $tc: $inverse_fg_color); }
1973
&:insensitive { @include button(insensitive, $c: $inverse_divider_color, $tc: $inverse_disabled_fg_color); }
1974
}
1975
}
1976
}
1977
.login-dialog-logo-bin { padding: 24px 0px; }
1979
.login-dialog-banner { color: $inverse_secondary_fg_color; }
1980
.login-dialog-button-box { spacing: 5px; }
1981
.login-dialog-message-warning { color: $warning_color; }
1982
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
1983
.login-dialog-user-selection-box {
1984
padding: 100px 0px;
1985
.login-dialog-not-listed-label {
1986
padding-left: 2px;
1987
.login-dialog-not-listed-button:focus &,
1988
.login-dialog-not-listed-button:hover & {
1989
color: $inverse_fg_color;
1990
}
1991
}
1992
}
1993
.login-dialog-not-listed-label {
1994
font-size: 1em;
1995
font-weight: bold;
1996
color: $inverse_secondary_fg_color;
1997
padding-top: 1em;
1998
&:hover { color: $inverse_fg_color; }
1999
&:focus { background-color: $inverse_divider_color; }
2000
}
2001
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
2003
.login-dialog-user-list {
2004
spacing: 12px;
2005
padding: .2em;
2006
width: 23em;
2007
&:expanded .login-dialog-user-list-item:focus { background-color: $inverse_divider_color; color: $inverse_fg_color; }
2008
&:expanded .login-dialog-user-list-item:hover { background-color: $inverse_divider_color; color: $inverse_fg_color; }
2009
&:expanded .login-dialog-user-list-item:active { background-color: $inverse_track_color; color: $inverse_fg_color; }
2010
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $inverse_fg_color; }
2011
}
2012
.login-dialog-user-list-item {
2013
border-radius: 2px;
2014
padding: 4px 4px 0;
2015
color: $inverse_secondary_fg_color;
2016
&:ltr { padding-right: 1em; }
2017
&:rtl { padding-left: 1em; }
2018
&:hover { background-color: $inverse_divider_color; color: $inverse_fg_color; }
2019
&:active { background-color: $inverse_track_color; color: $inverse_fg_color; }
2020
.login-dialog-timed-login-indicator {
2021
height: 2px;
2022
margin: 2px 0 0 0;
2023
background-color: $inverse_fg_color;
2024
}
2025
&:focus .login-dialog-timed-login-indicator { background-color: $inverse_fg_color; }
2026
}
2027
.login-dialog-username,
2029
.user-widget-label {
2030
color: $inverse_fg_color;
2031
@include font(title);
2032
text-align: left;
2033
padding-left: 15px;
2034
}
2035
.user-widget-label {
2036
&:ltr { padding-left: 18px; }
2037
&:rtl { padding-right: 18px; }
2038
}
2039
.login-dialog-prompt-layout {
2041
padding-top: 24px;
2042
padding-bottom: 12px;
2043
spacing: 8px;
2044
width: 23em;
2045
}
2046
.login-dialog-prompt-label {
2048
color: $inverse_hint_fg_color;
2049
font-size: 1em;
2050
padding-top: 1em;
2051
}
2052
.login-dialog-session-list-button StIcon {
2054
icon-size: 1.25em;
2055
}
2056
.login-dialog-session-list-button {
2058
color: $inverse_secondary_fg_color;
2059
&:hover,&:focus { color: $inverse_fg_color; }
2060
&:active { color: $inverse_fg_color; }
2061
}
2062
//SCREEN SHIELD
2064
.screen-shield-arrows {
2066
padding-bottom: 3em;
2067
}
2068
.screen-shield-arrows Gjs_Arrow {
2070
color: white;
2071
width: 80px;
2072
height: 48px;
2073
-arrow-thickness: 12px;
2074
-arrow-shadow: $shadow_1;
2075
}
2076
.screen-shield-clock {
2078
color: white;
2079
text-shadow: $shadow_1;
2080
font-weight: normal;
2081
text-align: center;
2082
padding-bottom: 1.5em;
2083
}
2084
.screen-shield-clock-time {
2086
@include font(display-4);
2087
text-shadow: $shadow_1;
2088
}
2089
.screen-shield-clock-date { @include font(display-2); }
2091
.screen-shield-notifications-container {
2093
spacing: 6px;
2094
width: 30em;
2095
background-color: transparent;
2096
max-height: 500px;
2097
.summary-notification-stack-scrollview {
2098
padding-top: 0;
2099
padding-bottom: 0;
2100
}
2101
.notification,
2103
.screen-shield-notification-source {
2104
padding: 8px;
2105
border: none;
2106
background-color: $alt_panel_bg_color;
2107
color: $inverse_fg_color;
2108
border-radius: 2px;
2109
}
2110
.notification { margin-right: 16px; } //compensate for space allocated to the scrollbar
2111
}
2112
.screen-shield-notification-label {
2115
min-height: $small_size - 2px;
2116
padding: 2px 0px 0px 16px;
2117
font-weight: bold;
2118
}
2119
.screen-shield-notification-count-text {
2121
min-height: $small_size - 2px;
2122
padding: 2px 0px 0px 16px;
2123
color: $inverse_secondary_fg_color;
2124
}
2125
#panel.lock-screen { background-color: $alt_panel_bg_color; }
2127
.screen-shield-background { //just the shadow, really
2129
background: black;
2130
box-shadow: $shadow_5;
2131
}
2132
#lockDialogGroup {
2134
background: $gdm_bg_color;
2135
background-size: cover;
2136
}
2137
#screenShieldNotifications {
2139
StScrollBar { @extend %overview_scrollbar; }
2140
}
2141
// Looking Glass
2144
#LookingGlassDialog {
2145
background-color: $popup_bg_color;
2146
spacing: 4px;
2147
padding: 0;
2148
border: none;
2149
border-radius: 2px;
2150
box-shadow: $shadow_4;
2151
& > #Toolbar {
2152
padding: 0 8px;
2153
border: none;
2154
border-radius: 0;
2155
background-color: rgba($popup_bg_color, 0.01);
2156
box-shadow: inset 0 -1px 0 $border_color;
2157
}
2158
.labels { spacing: 0; }
2159
.notebook-tab {
2160
-natural-hpadding: 12px;
2161
-minimum-hpadding: 6px;
2162
font-weight: bold;
2163
color: $hint_fg_color;
2164
transition-duration: $longer_duration;
2165
padding-left: 16px;
2166
padding-right: 16px;
2167
min-height: $medium_size;
2168
padding: 0 16px * 2;
2169
&:hover {
2170
box-shadow: inset 0 -2px 0px $track_color;
2171
color: $fg_color;
2172
text-shadow: none;
2173
}
2174
&:selected {
2175
border-bottom-width: 0;
2176
border-color: transparent;
2177
background-color: rgba($popup_bg_color, 0.01);
2178
box-shadow: inset 0 -2px 0px $primary_color;
2179
color: $fg_color;
2180
text-shadow: none;
2181
}
2182
}
2183
StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
2184
StBoxLayout#ResultsArea { spacing: 4px; }
2185
}
2186
.lg-dialog {
2188
StEntry {
2189
selection-background-color: $primary_color;
2190
selected-color: $inverse_fg_color;
2191
}
2192
.shell-link {
2193
color: $link_color;
2194
&:hover { color: $link_color; }
2195
}
2196
}
2197
.lg-completions-text {
2199
font-size: 1em;
2200
font-style: italic;
2201
}
2202
.lg-obj-inspector-title {
2204
spacing: 4px;
2205
}
2206
.lg-obj-inspector-button {
2208
min-height: $medium_size;
2209
padding: 0 16px;
2210
border: none;
2211
border-radius: 2px;
2212
@include font(button);
2213
@include button(flat-normal);
2214
&:hover { @include button(flat-hover); }
2215
&:active { @include button(flat-active); }
2216
&:insensitive { @include button(flat-insensitive); }
2217
&:focus { @include button(flat-focus); }
2218
&:hover { border: none; }
2219
}
2220
#lookingGlassExtensions { padding: 4px; }
2222
.lg-extensions-list {
2224
padding: 4px;
2225
spacing: 6px;
2226
}
2227
.lg-extension {
2229
border: none;
2230
border-radius: 2px;
2231
padding: 4px;
2232
}
2233
.lg-extension-name {
2235
@include font(headline);
2236
}
2237
.lg-extension-meta {
2239
spacing: 6px;
2240
}
2241
#LookingGlassPropertyInspector {
2243
background: $popup_bg_color;
2244
border: none;
2245
border-radius: 2px;
2246
padding: 6px;
2247
box-shadow: $shadow_4;
2248
}
2249