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 */
27
* {
28
transition-timing-function : $standard_curve;
29
transition-duration: $shorter_duration;
30
}
31
stage {
33
font-family: $font-family;
34
@include font(body-1);
35
color: $fg_color;
36
}
37
/* WIDGETS */
39
/* Buttons */
41
.button {
42
min-height: $medium_size;
43
padding: 0 16px;
44
border-width: 0;
45
border-radius: 2px;
46
@include font(button);
47
@include button(flat-normal);
48
&:hover { @include button(flat-hover); }
49
&:active { @include button(flat-active); }
50
&:insensitive { @include button(flat-insensitive); }
51
&:focus { @include button(flat-focus); }
52
}
54
.modal-dialog-linked-button {
56
min-height: 40px;
57
padding: 0 16px;
58
border-top: 1px solid $borders_color !important;
59
border-right-width: 0;
60
@include font(button);
61
@include button(flat-normal);
62
&:hover { @include button(flat-hover); }
63
&:active { @include button(flat-active); }
64
&:insensitive { @include button(flat-insensitive); }
65
&:focus { @include button(flat-focus); }
66
&:first-child {
68
border-radius: 0px 0px 0px 2px;
69
}
70
&:last-child {
71
border-right-width: 0px;
72
border-radius: 0px 0px 2px 0px;
73
}
74
&:first-child:last-child {
75
border-right-width: 0px;
76
border-radius: 0px 0px 2px 2px;
77
}
78
}
79
/* Entries */
81
StEntry {
82
min-height: $medium_size;
83
padding: 0 8px;
84
border-radius: 0;
85
border-width: 0;
86
color: $fg_color;
87
selection-background-color: $selected_bg_color;
88
selected-color: $selected_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: $insensitive_track_color;
121
}
122
StButton#vhandle, StButton#hhandle {
124
border-radius: 100px;
125
background-color: $tertiary_fg_color;
126
//border: 4px solid transparent; //would be nice to margin or at least to transparent
127
margin: 4px;
128
&:hover { background-color: $secondary_fg_color; }
129
&:active { background-color: $fg_color; }
130
}
131
}
132
%overview_scrollbar {
134
StBin#trough {
135
background-color: $selected_insensitive_track_color;
136
}
137
StButton#vhandle, StButton#hhandle {
139
background-color: $tertiary_selected_fg_color;
140
&:hover { background-color: $secondary_selected_fg_color; }
141
&:active { background-color: $selected_fg_color; }
142
}
143
}
144
/* Slider */
146
.slider {
148
height: 20px;
149
color: $accent_bg_color;
150
-slider-height: 4px;
151
-slider-background-color: $track_color; //background of the trough
152
-slider-border-color: transparent; //trough border color
153
-slider-active-background-color: $accent_bg_color; //active trough fill
154
-slider-active-border-color: transparent; //active trough border
155
-slider-border-width: 0;
156
-slider-handle-radius: 8px;
157
}
158
/* Check Boxes */
160
.check-box {
162
* {
163
min-height: $medium_size - 8px * 2;
164
padding: 8px 0;
165
}
166
StBoxLayout { spacing: 8px; }
167
StBin {
168
width: 24px;
169
height: 24px;
170
padding: ($medium_size - 24px) / 2;
171
border-radius: 100px;
172
background-image: url("assets/checkbox-off.svg");
173
}
174
&:focus StBin {
175
background-image: url("assets/checkbox-off.svg");
176
}
177
&:hover StBin {
178
background-color: $semi_track_color;
179
}
180
&:active StBin {
181
background-color: $track_color;
182
}
183
&:checked StBin {
184
background-image: url("assets/checkbox.svg");
185
}
186
&:focus:checked StBin {
187
background-image: url("assets/checkbox.svg");
188
}
189
&:hover:checked StBin {
190
background-color: scale-alpha($accent_bg_color, $lower_opacity / 2);
191
}
192
&:active:checked StBin {
193
background-color: scale-alpha($accent_bg_color, $lower_opacity);
194
}
195
}
196
/* Switches */
198
.toggle-switch {
199
width: 40px;
200
height: 20px;
201
background-size: contain;
202
}
203
@each $v in us, intl {
205
.toggle-switch-#{$v} {
206
background-image: url("assets/toggle-off.svg");
207
&:checked { background-image: url("assets/toggle-on.svg"); }
208
}
209
}
210
/* links */
212
.shell-link {
213
border-radius: 2px;
214
color: $link_color;
215
&:hover {
216
color: $link_color;
217
background-color: scale-alpha($link_color, $lower_opacity / 2);
218
}
219
&:active {
220
color: $link_color;
221
background-color: scale-alpha($link_color, $lower_opacity);
222
}
223
}
224
/* Modal Dialogs */
226
.headline { @include font(title); }
228
.lightbox { background-color: black; }
229
.flashspot { background-color: white; }
230
.modal-dialog {
232
border-radius: 2px;
233
color: $fg_color;
234
background-color: $base_color;
235
border: none;
236
box-shadow: $z-depth-4;
237
.modal-dialog-content-box {
238
padding: 24px;
239
}
240
.run-dialog-entry { width: 20em; margin-bottom: 6px; }
241
.run-dialog-error-box {
242
padding-top: 16px;
243
spacing: 6px;
244
}
245
.run-dialog-button-box { padding-top: 1em; }
246
.run-dialog-label {
247
font-size: 1em;
248
font-weight: normal;
249
color: $tertiary_fg_color;
250
padding-bottom: .4em;
251
}
252
}
254
.show-processes-dialog-subject,
256
.mount-question-dialog-subject,
257
.end-session-dialog-subject { //this should be a generic header class
258
@include font(title);
259
}
260
/* End Session Dialog */
262
.end-session-dialog {
263
spacing: 42px;
264
border: none;
265
}
266
.end-session-dialog-list {
268
padding-top: 20px;
269
}
270
.end-session-dialog-layout {
272
padding-left: 17px;
273
&:rtl { padding-right: 17px; }
274
}
275
.end-session-dialog-description {
277
width: 28em;
278
padding-bottom: 10px;
279
&:rtl {
280
text-align: right;
281
}
282
}
283
.end-session-dialog-warning {
285
width: 28em;
286
color: $warning_color;
287
padding-top: 6px;
288
&:rtl {
289
text-align: right;
290
}
291
}
292
.end-session-dialog-logout-icon {
294
//border: 2px solid #8b8b8b;
295
border-radius: 5px;
296
width: 48px;
297
height: 48px;
298
background-size: contain;
299
}
300
.end-session-dialog-shutdown-icon {
302
color: $tertiary_fg_color;
303
width: 48px;
304
height: 48px;
305
}
306
.end-session-dialog-inhibitor-layout {
308
spacing: 16px;
309
max-height: 200px;
310
padding-right: 65px;
311
padding-left: 65px;
312
}
313
.end-session-dialog-session-list,
315
.end-session-dialog-app-list {
316
spacing: 1em;
317
}
318
.end-session-dialog-list-header {
320
font-weight: bold;
321
&:rtl { text-align: right; }
322
}
323
.end-session-dialog-app-list-item,
325
.end-session-dialog-session-list-item {
326
spacing: 1em;
327
}
328
.end-session-dialog-app-list-item-name,
330
.end-session-dialog-session-list-item-name {
331
font-weight: bold;
332
}
333
.end-session-dialog-app-list-item-description {
335
color: $tertiary_fg_color;
336
font-size: 1em;
337
}
338
/* ShellMountOperation Dialogs */
340
.shell-mount-operation-icon { icon-size: 48px; }
341
.show-processes-dialog,
343
.mount-question-dialog {
344
spacing: 24px;
345
}
346
.show-processes-dialog-subject,
348
.mount-question-dialog-subject {
349
padding-top: 10px;
350
padding-left: 17px;
351
padding-bottom: 6px;
352
}
353
.mount-question-dialog-subject {
355
max-width: 500px;
356
}
357
.show-processes-dialog-subject:rtl,
359
.mount-question-dialog-subject:rtl {
360
padding-left: 0px;
361
padding-right: 17px;
362
}
363
.show-processes-dialog-description,
365
.mount-question-dialog-description {
366
padding-left: 17px;
367
width: 28em;
368
}
369
.show-processes-dialog-description:rtl,
371
.mount-question-dialog-description:rtl {
372
padding-right: 17px;
373
}
374
.show-processes-dialog-app-list {
376
max-height: 200px;
377
padding-top: 24px;
378
padding-left: 49px;
379
padding-right: 32px;
380
}
381
.show-processes-dialog-app-list:rtl {
383
padding-right: 49px;
384
padding-left: 32px;
385
}
386
.show-processes-dialog-app-list-item {
388
color: $fg_color;
389
&:hover { color: $fg_color; }
390
&:ltr { padding-right: 1em; }
391
&:rtl { padding-left: 1em; }
392
}
393
.show-processes-dialog-app-list-item-icon {
395
&:ltr { padding-right: 17px; }
396
&:rtl { padding-left: 17px; }
397
}
398
.show-processes-dialog-app-list-item-name {
400
font-size: 1em;
401
}
402
/* Password or Authentication Dialog */
405
.prompt-dialog {
407
//this is the width of the entire modal popup
408
width: 500px;
409
border: none;
410
}
411
.prompt-dialog-main-layout {
413
spacing: 24px;
414
padding: 10px;
415
}
416
.prompt-dialog-message-layout {
418
spacing: 16px;
419
}
420
.prompt-dialog-headline {
422
@include font(title);
423
color: $fg_color;
424
}
425
.prompt-dialog-description:rtl {
427
text-align: right;
428
}
429
.prompt-dialog-password-box {
431
spacing: 1em;
432
padding-bottom: 1em;
433
}
434
.prompt-dialog-error-label {
436
font-size: 1em;
437
color: $error_color;
438
padding-bottom: 8px;
439
}
440
.prompt-dialog-info-label {
442
font-size: 1em;
443
padding-bottom: 8px;
444
}
445
.hidden {
447
color: rgba(0,0,0,0);
448
}
449
.prompt-dialog-null-label {
451
font-size: 1em;
452
padding-bottom: 8px;
453
}
454
/* Polkit Dialog */
457
.polkit-dialog-user-layout {
459
padding-left: 10px;
460
spacing: 10px;
461
&:rtl {
462
padding-left: 0px;
463
padding-right: 10px;
464
}
465
}
466
.polkit-dialog-user-root-label {
468
color: $warning_color;
469
}
470
.polkit-dialog-user-icon {
472
border-radius: 5px;
473
background-size: contain;
474
width: 48px;
475
height: 48px;
476
}
477
/* Audio selection dialog */
479
.audio-device-selection-dialog {
480
spacing: 30px;
481
}
482
.audio-selection-content {
484
spacing: 20px;
485
padding: 24px;
486
}
487
.audio-selection-title {
489
font-weight: bold;
490
text-align: center;
491
}
492
.audio-selection-box {
494
spacing: 20px;
495
}
496
.audio-selection-device {
498
border: 1px solid $borders_color;
499
border-radius: 2px;
500
&:active,&:hover,&:focus { background-color: $selected_bg_color; }
501
}
502
.audio-selection-device-box {
504
padding: 20px;
505
spacing: 20px;
506
}
507
.audio-selection-device-icon {
509
icon-size: 64px;
510
}
511
/* Access Dialog */
513
.access-dialog {
514
spacing: 30px;
515
}
516
.access-dialog-main-layout {
518
padding: 12px 20px 0;
519
spacing: 12px;
520
}
521
.access-dialog-content {
523
max-width: 28em;
524
spacing: 20px;
525
}
526
.access-dialog-icon {
528
min-width: 48px;
529
icon-size: 48px;
530
}
531
.access-dialog-title {
533
font-weight: bold;
534
}
535
.access-dialog-subtitle {
537
color: $tertiary_fg_color;
538
font-weight: bold;
539
}
540
/* Geolocation Dialog */
542
.geolocation-dialog {
543
spacing: 30px;
544
}
545
.geolocation-dialog-main-layout {
547
spacing: 12px;
548
}
549
.geolocation-dialog-content {
551
spacing: 20px;
552
}
553
.geolocation-dialog-icon {
555
icon-size: 48px;
556
}
557
.geolocation-dialog-title {
559
font-weight: bold;
560
}
561
.geolocation-dialog-reason {
563
color: $tertiary_fg_color;
564
font-weight: bold;
565
}
566
/* Network Agent Dialog */
568
.network-dialog-secret-table {
570
spacing-rows: 15px;
571
spacing-columns: 1em;
572
}
573
.keyring-dialog-control-table {
575
spacing-rows: 15px;
576
spacing-columns: 1em;
577
}
578
/* Popovers/Menus */
580
.popup-menu {
582
min-width: 200px;
583
.popup-menu-arrow { } //defined globally in the TOP BAR
585
.popup-sub-menu {
586
background-color: $secondary_base_color;
587
box-shadow: $z-depth-0;
588
}
589
.popup-menu-content { padding: 8px 0; }
591
.popup-menu-item {
592
// min-height: $menuitem_size - 4px * 2;
593
spacing: 8px;
594
transition-duration: 0s;
595
&:ltr { padding: 0.4em 24px 0.4em 0; }
597
&:rtl { padding: 0.4em 0 0.4em 24px; }
598
&:checked {
599
background-color: $selected_bg_color;
600
color: $selected_fg_color;
601
box-shadow: $z-depth-0;
602
font-weight: normal;
603
&.selected {
604
background-color: mix($selected_fg_color, $selected_bg_color, percentage($lower_opacity / 2));
605
color: $selected_fg_color;
606
}
607
&:active {
608
background-color: mix($selected_fg_color, $selected_bg_color, percentage($lower_opacity));
609
color: $selected_fg_color !important;
610
}
611
&:insensitive { color: $insensitive_selected_fg_color; }
612
}
613
&.selected {
614
background-color: $semi_track_color;
615
color: $fg_color;
616
}
617
&:active {
618
background-color: $track_color;
619
color: $fg_color;
620
transition-duration: 0.2s;
621
}
622
&.selected:active { color: $fg_color; }
623
&:insensitive { color: $insensitive_fg_color; }
624
}
625
.popup-inactive-menu-item { //all icons and other graphical elements
627
color: $fg_color;
628
&:insensitive { color: $tertiary_fg_color; }
630
}
631
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
632
&.panel-menu {
633
-boxpointer-gap: 4px;
634
margin-bottom: 1.75em;
635
}
636
}
637
.popup-menu-ornament {
641
text-align: right;
642
width: 16px;
643
height: 16px;
644
}
645
.popup-menu-boxpointer,
646
.candidate-popup-boxpointer {
647
-arrow-border-radius: 0;
648
-arrow-background-color: transparent;
649
-arrow-border-width: 0;
650
-arrow-border-color: transparent;
651
-arrow-base: 0;
652
-arrow-rise: 0;
653
-arrow-box-shadow: none; //dreaming. bug #689995
654
margin: 5px 8px 8px;
655
background-color: $base_color;
656
border-radius: 2px;
657
box-shadow: $z-depth-2;
658
}
659
.popup-separator-menu-item {
661
//-margin-horizontal: 24px;
662
height: 1px; //not really the whole box
663
margin: 8px 64px - 24px;
664
background-color: transparent;
665
border-color: $borders_color;
666
border-bottom-width: 1px;
667
border-bottom-style: solid;
668
}
669
// Background menu
672
.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0; }
673
/* fallback menu
675
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
676
app menu inside the main app window itself rather than the top bar
677
*/
678
/* OSD */
681
.osd-window {
682
text-align: center;
683
font-weight: bold;
684
spacing: 1em;
685
margin: 32px;
686
min-width: 64px;
687
min-height: 64px;
688
.osd-monitor-label { @include font(display-2); }
690
.level {
691
height: 0.6em;
692
border-radius: 4px;
693
background-color: $track_color;
694
color: $fg_color;
695
}
696
.level-bar {
697
background-color: $selected_bg_color;
698
border-radius: 2px;
699
}
700
}
701
/* App Switcher */
703
.switcher-popup {
704
padding: 8px;
705
spacing: 16px;
706
}
707
.osd-window,
709
.resize-popup,
710
.switcher-list {
711
@extend %osd-panel;
712
}
713
.switcher-list-item-container { spacing: 8px; }
715
.switcher-list .item-box {
717
padding: 8px;
718
border-radius: 2px;
719
}
720
.switcher-list .item-box:outlined {
722
padding: 8px;
723
border: none;
724
background-color: $insensitive_track_color;
725
}
726
.switcher-list .item-box:selected {
728
background-color: $selected_bg_color;
729
color: $selected_fg_color;
730
}
731
.switcher-list .thumbnail-box {
733
padding: 2px;
734
spacing: 4px;
735
}
736
.switcher-list .thumbnail {
738
width: 256px;
739
}
740
.switcher-list .separator {
742
width: 1px;
743
background: $borders_color;
744
}
745
.switcher-arrow {
747
border-color: rgba(0,0,0,0);
748
color: $tertiary_fg_color;
749
&:highlighted {
750
color: $fg_color;
751
}
752
}
753
.input-source-switcher-symbol {
755
@include font(display-2);
756
width: 96px;
757
height: 96px;
758
}
759
/* Window Cycler */
761
.cycler-highlight { border: 4px solid $selected_bg_color; }
762
/* Workspace Switcher */
764
.workspace-switcher-group { padding: 8px; }
765
.workspace-switcher-container {
767
@extend %osd-panel;
768
}
769
.workspace-switcher {
771
background: transparent;
772
border: 0px;
773
border-radius: 0px;
774
padding: 0px;
775
spacing: 8px;
776
}
777
.ws-switcher-active-up, .ws-switcher-active-down {
779
height: 48px;
780
background-color: $selected_bg_color;
781
color: $selected_fg_color;
782
background-size: 32px;
783
border-radius: 2px;
784
}
785
.ws-switcher-box {
787
height: 48px;
788
border: none;
789
background: $insensitive_track_color;
790
border-radius: 2px;
791
}
792
%osd-panel {
794
color: $fg_color;
795
background-color: $base_color;
796
border: none;
797
box-shadow: $z-depth-4;
798
border-radius: 2px;
799
padding: 12px;
800
}
801
/* Tiled window previews */
803
.tile-preview {
804
background-color: scale-alpha($secondary_selected_bg_color, $lower_opacity);
805
border: 1px solid $secondary_selected_bg_color;
806
}
807
.tile-preview-left.on-primary {
809
border-radius: $panel-corner-radius $panel-corner-radius 0 0;
810
}
811
.tile-preview-right.on-primary {
813
border-radius: 0 $panel-corner-radius 0 0;
814
}
815
.tile-preview-left.tile-preview-right.on-primary {
817
border-radius: $panel-corner-radius $panel-corner-radius 0 0;
818
}
819
/* TOP BAR */
821
#panel {
823
background-color: $topbar_color;
824
font-weight: bold;
825
height: $menuitem_size;
826
&:overview,
828
&.unlock-screen,
829
&.login-screen,
830
&.lock-screen {
831
background-color: transparent;
832
}
833
#panelLeft, #panelCenter { // spacing between activities<>app menu and such
835
spacing: 0;
836
}
837
.panel-corner {
839
-panel-corner-radius: $panel-corner-radius;
840
-panel-corner-background-color: $bg_color;
841
-panel-corner-border-width: 2px;
842
-panel-corner-border-color: transparent;
843
&:active, &:overview, &:focus {
845
-panel-corner-border-color: $selected_fg_color;
846
}
847
&.lock-screen, &.login-screen, &.unlock-screen {
849
-panel-corner-radius: 0;
850
-panel-corner-background-color: transparent;
851
-panel-corner-border-color: transparent;
852
}
853
}
854
.panel-button {
856
-natural-hpadding: 12px;
857
-minimum-hpadding: 6px;
858
font-weight: bold;
859
color: $secondary_selected_fg_color;
860
transition-duration: 0.2s;
861
.app-menu-icon {
863
-st-icon-style: symbolic;
864
margin-left: 4px;
865
margin-right: 4px;
866
//dimensions of the icon are hardcoded
867
}
868
&:hover {
870
color: $selected_fg_color;
871
}
872
&:active, &:overview, &:focus, &:checked {
874
// Trick due to St limitations. It needs a background to draw
875
// a box-shadow
876
background-color: rgba($bg_color, 0.01);
877
box-shadow: inset 0 -2px 0px $selected_fg_color;
878
color: $selected_fg_color;
879
& > .system-status-icon { icon-shadow: none; }
881
}
882
.system-status-icon { @include em(16px); padding: 0 4px; }
884
.unlock-screen &,
885
.login-screen &,
886
.lock-screen & {
887
color: $secondary_selected_fg_color;
888
&:focus, &:hover, &:active { color: $selected_fg_color; }
889
}
890
}
891
.panel-status-indicators-box,
893
.panel-status-menu-box {
894
spacing: 2px;
895
}
896
// spacing between power icon and (optional) percentage label
898
.power-status.panel-status-indicators-box {
899
spacing: 0;
900
}
901
.screencast-indicator { color: $warning_color; }
903
}
904
// calendar popover
906
#calendarArea {
907
padding: 8px 16px;
908
}
909
.calendar {
911
margin-bottom: 0;
912
}
913
.calendar,
915
.datemenu-today-button,
916
.datemenu-displays-box,
917
.message-list-sections {
918
margin: 0 8px;
919
}
920
.datemenu-calendar-column { spacing: 8px; }
922
.datemenu-displays-section { padding-bottom: 0; }
923
.datemenu-today-button,
925
.world-clocks-button,
926
.message-list-section-title {
927
min-height: $menuitem_size - 4px * 2;
928
padding: 4px 8px;
929
border-radius: 2px;
930
}
931
.datemenu-today-button {
933
min-height: $menuitem_size * 2 - 4px * 2;
934
}
935
.message-list-section-list:ltr {
937
padding-left: 0;
938
}
939
.message-list-section-list:rtl {
941
padding-right: 0;
942
}
943
.datemenu-today-button,
945
.world-clocks-button,
946
.message-list-section-title {
947
&:hover,&:focus { color: $fg_color; background-color: $semi_track_color; }
948
&:active {
949
color: $fg_color;
950
background-color: $track_color;
951
}
952
}
953
.datemenu-today-button .day-label {
955
}
956
.datemenu-today-button .date-label {
958
@include font(headline);
959
}
960
.world-clocks-header,
962
.message-list-section-title {
963
color: $secondary_fg_color;
964
font-weight: bold;
965
}
966
.world-clocks-grid {
968
spacing-rows: 0.4em;
969
}
970
.calendar-month-label {
972
height: $menuitem_size - 6px * 2;
973
margin: 2px;
974
padding: 6px 16px;
975
border-radius: 2px;
976
color: $fg_color;
977
font-weight: bold;
978
text-align: center;
979
&:focus { background-color: $semi_track_color; }
980
}
981
.pager-button {
983
width: $menuitem_size;
984
height: $menuitem_size;
985
margin: 2px;
986
border-radius: 100px;
987
background-color: transparent;
988
color: $fg_color;
989
&:hover, &:focus { background-color: $semi_track_color; }
990
&:active { background-color: $track_color; }
991
}
992
.calendar-change-month-back { //arrow back
994
background-image: url("assets/calendar-arrow-left.svg");
995
&:rtl { background-image: url("assets/calendar-arrow-right.svg"); }
996
}
997
.calendar-change-month-forward { //arrow foreward
998
background-image: url("assets/calendar-arrow-right.svg");
999
&:rtl { background-image: url("assets/calendar-arrow-left.svg"); }
1000
}
1001
.calendar-day-base {
1003
@include font(caption);
1004
text-align: center;
1005
width: $menuitem_size; height: $menuitem_size;
1006
padding: 0;
1007
margin: 2px;
1008
border-radius: 100px;
1009
&:hover,&:focus { background-color: $semi_track_color; }
1010
// &:active { background-color: $track_color; }
1011
&:active, &:selected {
1012
color: $selected_fg_color;
1013
background-color: $selected_bg_color !important;
1014
border-color: transparent; //avoid jumparound due to today
1015
}
1016
&.calendar-day-heading { //day of week heading
1017
width: $menuitem_size; height: $menuitem_size - 7px;
1018
margin-top: 2px;
1019
padding: 7px 0 0;
1020
border-radius: 100px;
1021
background-color: transparent;
1022
color: $tertiary_fg_color;
1023
@include font(caption);
1024
font-weight: bold;
1025
text-align: center;
1026
}
1027
}
1028
.calendar-day { //border collapse hack - see calendar.js
1029
border-width: 0;
1030
}
1031
.calendar-day-top { border-top-width: 0; }
1032
.calendar-day-left { border-left-width: 0; }
1033
.calendar-work-day {
1034
}
1036
.calendar-nonwork-day {
1037
color: $fg_color;
1038
}
1039
.calendar-today {
1040
font-weight: bold !important;
1041
//color: $fg_color;
1042
//background-color: transparent;
1043
border: none;
1044
}
1045
.calendar-day-with-events {
1046
color: $link_color;
1047
font-weight: normal;
1048
text-decoration: underline;
1049
background-image: none;
1050
}
1051
.calendar-other-month-day {
1052
color: $insensitive_fg_color;
1053
opacity: 0.5;
1054
}
1055
.calendar-week-number {
1056
width: $menuitem_size; height: $menuitem_size - 7px;
1057
margin: 2px;
1058
padding: 7px 0 0;
1059
border-radius: 100px;
1060
background-color: transparent;
1061
color: $tertiary_fg_color;
1062
font-size: inherit;
1063
font-weight: bold;
1064
text-align: center;
1065
}
1066
/* Message list */
1068
.message-list {
1069
width: 420px;
1070
}
1071
.message-list-sections {
1073
spacing: 8px;
1074
}
1075
.message-list-section,
1077
.message-list-section-list {
1078
spacing: 8px;
1079
}
1080
.message-list-section-title-box {
1082
spacing: 8px;
1083
}
1084
.message-list-section-close > StIcon {
1086
icon-size: 16px;
1087
border-radius: 16px;
1088
padding: ($menuitem_size - 16px) / 2;
1089
color: $secondary_fg_color;
1090
background-color: transparent;
1091
}
1092
/* FIXME: how do you do this in sass? */
1094
.message-list-section-close:hover > StIcon,
1095
.message-list-section-close:focus > StIcon {
1096
color: $fg_color;
1097
background-color: $semi_track_color;
1098
}
1099
.message-list-section-close:active > StIcon {
1101
color: $fg_color;
1102
background-color: $track_color;
1103
}
1104
.message {
1106
min-height: $menuitem_size * 2;
1107
background-color: transparent;
1108
&:hover,&:focus { background-color: $semi_track_color; }
1109
&:active { background-color: $track_color; }
1110
border-radius: 2px;
1111
}
1112
.message-icon-bin {
1114
padding: 8px 0px 8px 8px;
1115
&:rtl { padding: 8px 8px 8px 0px; }
1116
}
1117
.message-icon-bin > StIcon {
1119
icon-size: 32px;
1120
}
1121
.message-secondary-bin {
1123
&:ltr { padding-left: 8px; }
1124
&:rtl { padding-right: 8px; }
1125
}
1126
.message-secondary-bin {
1128
color: $tertiary_fg_color;
1129
}
1130
.message-secondary-bin > StIcon {
1132
icon-size: 16px;
1133
}
1134
.message-title {
1136
min-height: $small_size - 2px;
1137
padding-top: 2px;
1138
color: $fg_color;
1139
font-weight: bold;
1140
font-size: 1em;
1141
}
1142
.message-content {
1144
padding: 8px;
1145
color: $secondary_fg_color;
1146
font-size: 1em;
1147
}
1148
.message-content * > StIcon {
1150
icon-size: 16px;
1151
border-radius: 16px;
1152
padding: ($small_size - 16px) / 2;
1153
color: $secondary_fg_color;
1154
}
1155
/* FIXME: how do you do this in sass? */
1157
.message-content *:hover > StIcon,
1158
.message-content *:focus > StIcon {
1159
color: $fg_color;
1160
background-color: $semi_track_color;
1161
}
1162
.message-content *:active > StIcon {
1164
color: $fg_color;
1165
background-color: $track_color;
1166
}
1167
.message-media-control {
1169
margin: 16px 0;
1170
padding: 8px;
1171
border-radius: 100px;
1172
color: $secondary_fg_color;
1173
&:hover,&:focus { color: $fg_color; background-color: $semi_track_color; }
1174
&:active { color: $fg_color; background-color: $track_color; }
1175
&:insensitive { color: $insensitive_secondary_fg_color; }
1176
&:last-child:ltr { margin-right: 16px; padding-right: 8px; }
1178
&:last-child:rtl { margin-left: 16px; padding-left: 8px; }
1179
}
1180
.media-message-cover-icon {
1182
icon-size: 32px;
1183
&.fallback {
1184
icon-size: 16px;
1185
padding: 8px;
1186
border: none;
1187
border-radius: 2px;
1188
background-color: $semi_track_color;
1189
color: $tertiary_fg_color;
1190
}
1191
}
1192
// a little unstructured mess:
1195
.system-switch-user-submenu-icon.user-icon {
1197
icon-size: 20px;
1198
padding: 0 2px;
1199
}
1200
.system-switch-user-submenu-icon.default-icon {
1201
icon-size: 16px;
1202
padding: 0 4px;
1203
}
1204
#appMenu {
1206
spinner-image: url("process-working.svg");
1207
spacing: 4px;
1208
.label-shadow { color: transparent; }
1210
}
1211
.aggregate-menu {
1213
min-width: 280px;
1214
.popup-menu-icon { padding: 0 4px; }
1215
}
1216
.system-menu-action {
1218
color: $secondary_fg_color;
1219
border-radius: 100px; /* wish we could do 50% */
1220
padding: ($large_size - 16px) / 2;
1221
border: none;
1222
&:hover, &:focus {
1224
background-color: $semi_track_color;
1225
color: $fg_color;
1226
border: none;
1227
padding: ($large_size - 16px) / 2;
1228
}
1229
&:active { background-color: $track_color; color: $fg_color; }
1230
& > StIcon { icon-size: 16px; }
1232
}
1233
//Activities Ripples
1235
.ripple-box {
1236
width: 48px;
1237
height: 48px;
1238
background-image: url("assets/corner-ripple-ltr.svg");
1239
background-size: contain;
1240
}
1241
.ripple-box:rtl {
1243
background-image: url("assets/corner-ripple-rtl.svg");
1244
}
1245
// not really top bar only
1247
.popup-menu-arrow { width: 16px; height: 16px; }
1248
.popup-menu-icon { @include em(16px); }
1249
//close buttons
1251
.window-close {
1253
height: $medium_size;
1254
width: $medium_size;
1255
-st-background-image-shadow: $z-depth-1;
1256
background-image: url("assets/window-close.svg");
1257
background-size: $medium_size;
1258
&:hover { -st-background-image-shadow: $z-depth-2; }
1259
&:active { background-image: url("assets/window-close-active.svg"); }
1260
}
1261
.window-close {
1262
-shell-close-overlap: $medium_size / 2;
1263
&:rtl { -st-background-image-shadow: $z-depth-1; }
1264
&:rtl:hover { -st-background-image-shadow: $z-depth-2; }
1265
}
1266
/* NETWORK DIALOGS */
1268
.nm-dialog {
1270
max-height: 500px;
1271
min-height: 450px;
1272
min-width: 470px;
1273
}
1274
.nm-dialog-content {
1276
spacing: 20px;
1277
padding: 24px;
1278
}
1279
.nm-dialog-header-hbox { spacing: 10px; }
1280
.nm-dialog-airplane-box { spacing: 12px; }
1281
.nm-dialog-airplane-headline {
1283
font-weight: bold;
1284
text-align: center;
1285
}
1286
.nm-dialog-airplane-text { color: $fg_color; }
1288
.nm-dialog-header-icon { icon-size: 32px; }
1289
.nm-dialog-scroll-view { border: none; }
1290
.nm-dialog-header { @include font(title); }
1291
.nm-dialog-item {
1293
font-size: 1em;
1294
border-bottom: none;
1295
border-radius: 2px;
1296
padding: 12px;
1297
spacing: 20px;
1298
&:hover, &:focus { background-color: $semi_track_color; }
1299
&:active { background-color: $track_color; }
1300
}
1301
.nm-dialog-item:selected {
1303
background-color: $selected_bg_color;
1304
color: $selected_fg_color;
1305
}
1306
.nm-dialog-icons { spacing: .5em; }
1308
.nm-dialog-icon { icon-size: 16px; }
1309
.no-networks-label { color: $tertiary_fg_color; }
1310
.no-networks-box { spacing: 12px; }
1311
/* OVERVIEW */
1313
#overview {
1315
spacing: 24px; //
1316
StScrollBar { @extend %overview_scrollbar; }
1317
}
1318
.overview-controls {
1320
padding-bottom: 32px;
1321
}
1322
.window-picker { //container around window thumbnails
1324
-horizontal-spacing: 32px;
1325
-vertical-spacing: 32px;
1326
padding-left: 32px;
1327
padding-right: 32px;
1328
padding-bottom: 48px;
1329
&.external-monitor { padding: 32px; }
1331
}
1332
.window-clone-border {
1334
border: 4px solid $selected_track_color;
1335
border-radius: 2px;
1336
// For window decorations with round corners we can't match
1337
// the exact shape when the window is scaled. So apply a shadow
1338
// to fix that case
1339
box-shadow: inset 0 0 0 1px $selected_track_color;
1340
}
1341
.window-caption {
1342
spacing: 25px;
1343
color: $selected_fg_color;
1344
background-color: transparent;
1345
border-radius: 2px;
1346
padding: 4px 8px;
1347
-shell-caption-spacing: 12px;
1348
&:hover { background-color: $selected_track_color; color: $selected_fg_color; }
1349
}
1350
//search entry
1352
.search-entry {
1353
width: 320px - 8px * 2;
1354
padding: 0 8px;
1355
border-radius: 0;
1356
color: $tertiary_selected_fg_color;
1357
selection-background-color: $selected_track_color;
1358
selected-color: $selected_fg_color;
1359
@include entry(normal,$fc:$selected_track_color);
1360
&:focus {
1361
@include entry(focus,$fc:$selected_fg_color);
1362
padding: 0 8px;
1363
border-width: 0;
1364
color: $selected_fg_color;
1365
}
1366
.search-entry-icon { icon-size: 16px; padding: 0 0; color: $tertiary_selected_fg_color; }
1368
&:hover, &:focus {
1370
.search-entry-icon { color: $selected_fg_color; }
1371
}
1372
}
1373
//search results
1375
#searchResultsBin {
1377
max-width: 1000px;
1378
}
1379
#searchResultsContent {
1381
padding-left: 20px;
1382
padding-right: 20px;
1383
spacing: 16px;
1384
}
1385
.search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
1387
.search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container
1388
.search-statustext { // "no results"
1389
@extend %status_text;
1390
}
1391
.list-search-results { spacing: 3px; }
1392
.search-section-separator {
1394
-gradient-height: 1px;
1395
-gradient-start: rgba(255,255,255,0);
1396
-gradient-end: rgba(255,255,255,0.4);
1397
-margin-horizontal: 1.5em;
1398
height: 1px;
1399
}
1400
.list-search-result-content { spacing: 12px; padding: 12px; }
1402
.list-search-result-title { @include font(headline); color: $selected_fg_color; }
1403
.list-search-result-description { color: $secondary_selected_fg_color; }
1404
.search-provider-icon { padding: 15px; }
1405
.search-provider-icon-more {
1406
width: 16px;
1407
height: 16px;
1408
background-image: url("assets/more-results.svg");
1409
}
1410
/* DASHBOARD */
1413
#dash {
1415
font-size: 1em;
1416
color: $selected_fg_color;
1417
background-color: $overview_bg_color;
1418
padding: 3px 0;
1419
border: none;
1420
border-left: 0px;
1421
border-radius: 0px 2px 2px 0px;
1422
&:rtl {
1424
border-radius: 2px 0 0 2px;
1425
}
1426
.placeholder {
1428
background-image: url("assets/dash-placeholder.svg");
1429
background-size: contain;
1430
height: 24px;
1431
}
1432
.empty-dash-drop-target {
1434
width: 24px;
1435
height: 24px;
1436
}
1437
}
1439
.dash-item-container > StWidget {
1441
padding: 3px 6px;
1442
}
1443
.dash-label { //osd tooltip
1445
// min-height: 32px - 6px * 2;
1446
border-radius: 2px;
1447
padding: 7px 8px;
1448
color: $fg_color;
1449
background-color: $base_color;
1450
box-shadow: $z-depth-2;
1451
text-align: center;
1452
-x-offset: 8px;
1453
}
1454
/* App Vault/Grid */
1456
.icon-grid {
1457
spacing: 30px;
1458
-shell-grid-horizontal-item-size: 136px;
1459
-shell-grid-vertical-item-size: 136px;
1460
.overview-icon { icon-size: 96px; }
1462
}
1463
//.app-display { spacing: 20px; }
1464
.app-view-controls { //favorties | all toggle container
1466
width: 320px;
1467
padding-bottom: 32px;
1468
}
1469
.app-view-control { //favorties | all toggle button
1470
padding: 0 16px;
1471
font-weight: bold;
1472
color: $secondary_selected_fg_color;
1473
&:hover {
1474
color: $selected_fg_color;
1475
background-color: $selected_semi_track_color !important;
1476
}
1477
&:active {
1478
color: $selected_fg_color;
1479
background-color: $selected_track_color !important;
1480
}
1481
&:checked {
1482
color: $selected_fg_color;
1483
background-color: rgba($bg_color, 0.01) !important;
1484
box-shadow: inset 0 2px 0 $selected_fg_color;
1485
}
1486
&:first-child {
1487
border-right-width: 0;
1488
border-radius: 2px;
1489
&:checked { border-radius: 0; }
1490
}
1491
&:last-child {
1492
border-radius: 2px;
1493
&:checked { border-radius: 0; }
1494
}
1495
}
1496
//Icon tile
1498
.search-provider-icon,
1499
.list-search-result {
1500
@extend %icon_tile;
1501
&:focus, &:selected, &:hover {
1502
background-color: $selected_semi_track_color;
1503
transition-duration: 0s;
1504
}
1505
&:active, &:checked {
1506
background-color: $selected_track_color;
1507
transition-duration: 0.2s;
1508
}
1509
}
1510
.app-well-app,
1511
.app-well-app.app-folder,
1512
.show-apps,
1513
.grid-search-result {
1514
& .overview-icon {
1515
@extend %icon_tile;
1516
}
1517
&:hover .overview-icon,
1518
&:focus .overview-icon,
1519
&:selected .overview-icon {
1520
background-color: $selected_semi_track_color;
1521
transition-duration: 0s;
1522
border-image: none;
1523
background-image: none;
1524
}
1525
&:active .overview-icon,
1526
&:checked .overview-icon {
1527
background-color: $selected_track_color;
1528
box-shadow: $z-depth-0;
1529
transition-duration: 0.2s;
1530
}
1531
}
1533
.app-well-app-running-dot { //running apps indicator
1535
width: 32px; height: 2px;
1536
background-color: $selected_fg_color;
1537
margin-bottom: 0;
1538
}
1539
%icon_tile {
1541
color: $selected_fg_color;
1542
border-radius: 2px;
1543
padding: 6px;
1544
border: none;
1545
transition-duration: 0.2s;
1546
text-align: center;
1547
}
1548
.app-well-app.app-folder > .overview-icon {
1550
background-color: $overview_bg_color;
1551
}
1552
.show-apps .show-apps-icon {
1554
color: $secondary_selected_fg_color;
1555
}
1556
.show-apps:hover .show-apps-icon,
1558
.show-apps:active .show-apps-icon,
1559
.show-apps:checked .show-apps-icon,
1560
.show-apps:focus .show-apps-icon {
1561
color: $selected_fg_color;
1562
transition-duration: 0.2s;
1563
}
1564
// Collections
1567
.app-folder-popup { //expanded collection
1568
-arrow-border-radius: 2px;
1569
-arrow-background-color: $overview_bg_color;
1570
-arrow-base: 24px;
1571
-arrow-rise: 12px;
1572
}
1573
.app-folder-popup-bin { padding: 5px; }
1574
.app-folder-icon {
1575
padding: 5px;
1576
spacing-rows: 5px;
1577
spacing-columns: 5px;
1578
}
1579
.page-indicator {
1581
padding: 15px 20px;
1582
.page-indicator-icon {
1584
width: 12px;
1585
height: 12px;
1586
border-radius: 12px;
1587
background-image: none;
1588
background-color: scale-alpha($selected_fg_color, $lower_opacity);
1589
}
1590
&:hover .page-indicator-icon {
1591
background-image: none;
1592
background-color: scale-alpha($selected_fg_color, $middle_opacity);
1593
}
1594
&:active .page-indicator-icon {
1595
background-image: none;
1596
background-color: scale-alpha($selected_fg_color, $higher_opacity);
1597
}
1598
&:checked .page-indicator-icon,
1599
&:checked:active {
1600
background-image: none;
1601
background-color: $selected_fg_color;
1602
transition-duration: 0s;
1603
}
1604
}
1605
.no-frequent-applications-label { @extend %status_text; }
1607
.app-well-app > .overview-icon.overview-icon-with-label,
1609
.grid-search-result .overview-icon.overview-icon-with-label {
1610
padding: 10px 8px 5px 8px;
1611
spacing: 4px;
1612
}
1613
// Workspace pager
1615
.workspace-thumbnails { //container ala dash
1616
@extend %overview-panel;
1617
visible-width: 32px; //amount visible before hover
1618
spacing: 12px;
1619
padding: 12px;
1620
border-radius: 2px 0 0 2px;
1621
//border-width: 0; //fixme: can't have non unoform borders :(
1622
&:rtl { border-radius: 0 2px 2px 0;}
1623
}
1624
.workspace-thumbnail-indicator {
1625
border: 0 solid $selected_fg_color;
1626
border-left-width: 2px;
1627
padding: 6px;
1628
border-radius: 0;
1629
}
1630
//Some hacks I don't even
1632
.search-display > StBoxLayout,
1633
.all-apps,
1634
.frequent-apps > StBoxLayout {
1635
// horizontal padding to make sure scrollbars or dash don't overlap content
1636
padding: 0px 88px 10px 88px;
1637
}
1638
%overview-panel {
1640
color: $selected_fg_color;
1641
background-color: $overview_bg_color;
1642
border: none;
1643
}
1644
%status_text {
1646
@include font(display-2);
1647
color: $tertiary_selected_fg_color;
1648
}
1649
/* NOTIFICATIONS & MESSAGE TRAY */
1651
.url-highlighter { link-color: $link_color; }
1653
// Banners
1655
.notification-banner {
1656
font-size: 1em;
1657
width: 34em;
1658
min-height: $menuitem_size * 2;
1659
margin: 5px;
1660
border-radius: 2px;
1661
color: $fg_color;
1662
background-color: $base_color;
1663
border: none;
1664
box-shadow: $z-depth-2;
1665
&:hover { background-color: $base_color; }
1666
&:focus { background-color: $base_color; }
1667
.notification-icon { padding: 5px; }
1669
.notification-content { padding: 5px; spacing: 5px; }
1670
.secondary-icon { @include em(16px); }
1671
.notification-actions {
1672
background-color: transparent;
1673
padding-top: 0;
1674
border-top: 1px solid $borders_color;
1675
spacing: 1px;
1676
}
1677
.notification-button {
1678
min-height: 40px;
1679
padding: 0 16px;
1680
background-color: transparent;
1681
color: $secondary_fg_color;
1682
font-weight: 500;
1683
&:first-child { border-radius: 0 0 0 2px; }
1684
&:last-child { border-radius: 0 0 2px 0; }
1685
&:hover, &focus { background-color: $semi_track_color; color: $fg_color; }
1686
&:active { background-color: $track_color; color: $fg_color; }
1687
}
1688
}
1689
.summary-source-counter {
1690
font-size: 1em;
1691
font-weight: bold;
1692
height: 1.6em; width: 1.6em;
1693
-shell-counter-overlap-x: 3px;
1694
-shell-counter-overlap-y: 3px;
1695
background-color: $selected_bg_color;
1696
color: $selected_fg_color;
1697
border: 2px solid $selected_fg_color;
1698
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
1699
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
1700
}
1701
.secondary-icon { @include em(16px); }
1703
//chat bubbles
1705
.chat-body { spacing: 5px; }
1706
.chat-response { margin: 5px; }
1707
.chat-log-message { color: $fg_color; }
1708
.chat-new-group { padding-top: 1em; }
1709
.chat-received {
1710
padding-left: 4px;
1711
&:rtl { padding-left: 0px; padding-right: 4px; }
1712
}
1713
.chat-sent {
1714
padding-left: 18pt;
1715
color: $secondary_fg_color;
1716
&:rtl { padding-left: 0; padding-right: 18pt; }
1717
}
1718
.chat-meta-message {
1719
padding-left: 4px;
1720
@include font(caption);
1721
color: $tertiary_fg_color;
1722
&:rtl { padding-left: 0; padding-right: 4px; }
1723
}
1724
//hotplug
1726
.hotplug-transient-box {
1727
spacing: 6px;
1728
padding: 2px 72px 2px 12px;
1729
}
1730
.hotplug-notification-item {
1731
padding: 2px 10px;
1732
&:focus { padding: 1px 71px 1px 11px; }
1733
}
1734
.hotplug-notification-item-icon {
1736
icon-size: 24px;
1737
padding: 2px 5px;
1738
}
1739
.hotplug-resident-box { spacing: 8px; }
1741
.hotplug-resident-mount {
1743
spacing: 8px;
1744
border-radius: 2px;
1745
&:hover { background-color: $semi_track_color; }
1746
&:active { background-color: $track_color; }
1747
}
1748
.hotplug-resident-mount-label {
1750
color: inherit;
1751
padding-left: 6px;
1752
}
1753
.hotplug-resident-mount-icon {
1755
icon-size: 24px;
1756
padding-left: 6px;
1757
}
1758
.hotplug-resident-eject-icon {
1760
icon-size: 16px;
1761
}
1762
.hotplug-resident-eject-button {
1764
padding: 7px;
1765
border-radius: 2px;
1766
color: $fg_color;
1767
}
1768
/* Eeeky things */
1770
$legacy_icon_size: 24px;
1772
.legacy-tray {
1774
background-color: $bg_color;
1775
color: $selected_fg_color;
1776
border: none;
1777
border-bottom-width: 0;
1778
&:ltr { border-radius: 0 2px 0 0; border-left-width: 0; }
1779
&:rtl { border-radius: 2px 0 0 0; border-right-width: 0; }
1780
}
1781
.legacy-tray-handle,
1783
.legacy-tray-icon {
1784
padding: 6px;
1785
& StIcon { icon-size: $legacy_icon_size; }
1786
&:hover,&:focus { background-color: $selected_semi_track_color; }
1787
&:active { background-color: $selected_track_color; }
1788
}
1789
.legacy-tray-icon-box {
1791
spacing: 12px;
1792
&:ltr { padding-left: 12px; }
1793
&:rtl { padding-right: 12px; }
1794
& StButton { width: $legacy_icon_size; height: $legacy_icon_size }
1795
}
1796
//magnifier
1798
.magnifier-zoom-region {
1800
border: 2px solid $selected_bg_color;
1801
&.full-screen { border-width: 0; }
1802
}
1803
//Keyboard
1805
/* On-screen Keyboard */
1806
#keyboard {
1808
background-color: $osd_bg_color;
1809
}
1810
.keyboard-layout {
1812
spacing: 10px;
1813
padding: 10px;
1814
}
1815
.keyboard-row { spacing: 15px; }
1817
.keyboard-key {
1819
min-height: $medium_size * 2;
1820
min-width: $medium_size * 2;
1821
font-size: 2em;
1822
font-weight: 500;
1823
border-radius: 2px;
1824
border: none;
1825
color: inherit;
1826
@include button(normal);
1827
&:focus { @include button(focus); }
1828
&:hover,&:checked { @include button(hover); }
1829
&:active { @include button(active);}
1830
&:grayed { //FIXME
1831
background-color: $osd_bg_color;
1832
color: $selected_fg_color;
1833
border-color: $osd_bg_color;
1834
}
1835
}
1836
.keyboard-subkeys { //long press on a key popup
1838
color: inherit;
1839
padding: 5px;
1840
-arrow-border-radius: 0;
1841
-arrow-background-color: transparent;
1842
-arrow-border-width: 0;
1843
-arrow-border-color: transparent;
1844
-arrow-base: 0;
1845
-arrow-rise: 0;
1846
-boxpointer-gap: 5px;
1847
background-color: $base_color;
1848
border-radius: 2px;
1849
box-shadow: $z-depth-2;
1850
}
1851
// IBus Candidate Popup
1853
.candidate-popup-content {
1855
padding: 8px;
1856
spacing: 0;
1857
}
1858
.candidate-index {
1860
padding: 0 4px 0 0;
1861
color: $tertiary_fg_color;
1862
.candidate-box:selected & { color: $tertiary_selected_fg_color; }
1863
}
1864
.candidate-box {
1866
transition-duration: 0s;
1867
min-height: $menuitem_size;
1868
padding: 0 8px;
1869
border-radius: 2px;
1870
&:hover { background-color: $semi_track_color; color: $fg_color; }
1871
&:active { background-color: $track_color; color: $fg_color; }
1872
&:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
1873
}
1874
.candidate-page-button-box {
1876
height: $menuitem_size;
1877
.vertical & { padding-top: 0; }
1878
.horizontal & { padding-left: 0; }
1879
}
1880
.candidate-page-button {
1882
min-width: $menuitem_size;
1883
min-height: $menuitem_size;
1884
padding: 0;
1885
}
1886
.candidate-page-button-previous { border-radius: 2px; border-right-width: 0; }
1888
.candidate-page-button-next { border-radius: 2px; }
1889
.candidate-page-button-icon { @include em(16px); }
1890
/* Auth Dialogs & Screen Shield */
1892
.framed-user-icon {
1894
background-size: contain;
1895
border: none;
1896
color: $selected_fg_color;
1897
border-radius: 2px;
1898
&:hover {
1899
border-color: $selected_fg_color;
1900
color: $selected_fg_color;
1901
}
1902
}
1903
// LOGIN DIALOG
1905
.login-dialog-banner-view {
1907
padding-top: 24px;
1908
max-width: 23em;
1909
}
1910
.login-dialog {
1912
//reset
1913
border: none;
1914
background-color: transparent;
1915
StEntry {
1917
color: $selected_fg_color;
1918
selection-background-color: $selected_track_color;
1919
selected-color: $selected_fg_color;
1920
@include entry(normal, $fc:$selected_track_color);
1921
&:focus { @include entry(focus, $fc:$selected_fg_color); }
1922
&:insensitive {
1923
@include entry(insensitive, $fc:$selected_insensitive_track_color);
1924
color: $insensitive_selected_fg_color;
1925
}
1926
}
1927
.modal-dialog-button-box { spacing: 3px; }
1929
.modal-dialog-button {
1930
padding: 0 16px;
1931
@include button(flat-normal, $tc:$secondary_selected_fg_color);
1932
&:hover,&:focus { @include button(flat-hover, $c:$selected_semi_track_color, $tc:$selected_fg_color); }
1933
&:active { @include button(flat-active, $c:$selected_track_color, $tc:$selected_fg_color); }
1934
&:insensitive { @include button(flat-insensitive, $tc:$insensitive_secondary_selected_fg_color); }
1935
&:default {
1936
@include button(normal, $c:$suggested_color, $tc:$selected_fg_color);
1937
&:hover,&:focus { @include button(hover, $c:$suggested_color, $tc:$selected_fg_color); }
1938
&:active { @include button(active, $c:$suggested_color, $tc:$selected_fg_color); }
1939
&:insensitive { @include button(insensitive, $c:$selected_insensitive_track_color, $tc:$insensitive_selected_fg_color); }
1940
}
1942
}
1943
}
1945
.login-dialog-logo-bin { padding: 24px 0px; }
1947
.login-dialog-banner { color: $secondary_selected_fg_color; }
1948
.login-dialog-button-box { spacing: 5px; }
1949
.login-dialog-message-warning { color: $warning_color; }
1950
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
1951
.login-dialog-user-selection-box {
1952
padding: 100px 0px;
1953
.login-dialog-not-listed-label {
1954
padding-left: 2px;
1955
.login-dialog-not-listed-button:focus &,
1956
.login-dialog-not-listed-button:hover & {
1957
color: $selected_fg_color;
1958
}
1959
}
1960
}
1961
.login-dialog-not-listed-label {
1962
font-size: 1em;
1963
font-weight: bold;
1964
color: $secondary_selected_fg_color;
1965
padding-top: 1em;
1966
&:hover { color: $selected_fg_color; }
1967
&:focus { background-color: $selected_semi_track_color; }
1968
}
1969
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
1971
.login-dialog-user-list {
1972
spacing: 12px;
1973
padding: .2em;
1974
width: 23em;
1975
&:expanded .login-dialog-user-list-item:focus { background-color: $selected_semi_track_color; color: $selected_fg_color; }
1976
&:expanded .login-dialog-user-list-item:hover { background-color: $selected_semi_track_color; color: $selected_fg_color; }
1977
&:expanded .login-dialog-user-list-item:active { background-color: $selected_track_color; color: $selected_fg_color; }
1978
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_fg_color; }
1979
}
1980
.login-dialog-user-list-item {
1981
border-radius: 2px;
1982
padding: 4px 4px 0;
1983
color: $secondary_selected_fg_color;
1984
&:ltr { padding-right: 1em; }
1985
&:rtl { padding-left: 1em; }
1986
&:hover { background-color: $selected_semi_track_color; color: $selected_fg_color; }
1987
&:active { background-color: $selected_track_color; color: $selected_fg_color; }
1988
.login-dialog-timed-login-indicator {
1989
height: 2px;
1990
margin: 2px 0 0 0;
1991
background-color: $selected_fg_color;
1992
}
1993
&:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
1994
}
1995
.login-dialog-username,
1997
.user-widget-label {
1998
color: $selected_fg_color;
1999
@include font(title);
2000
text-align: left;
2001
padding-left: 15px;
2002
}
2003
.user-widget-label {
2004
&:ltr { padding-left: 18px; }
2005
&:rtl { padding-right: 18px; }
2006
}
2007
.login-dialog-prompt-layout {
2009
padding-top: 24px;
2010
padding-bottom: 12px;
2011
spacing: 8px;
2012
width: 23em;
2013
}
2014
.login-dialog-prompt-label {
2016
color: $tertiary_selected_fg_color;
2017
font-size: 1em;
2018
padding-top: 1em;
2019
}
2020
.login-dialog-session-list-button StIcon {
2022
icon-size: 1.25em;
2023
}
2024
.login-dialog-session-list-button {
2026
color: $secondary_selected_fg_color;
2027
&:hover,&:focus { color: $selected_fg_color; }
2028
&:active { color: $selected_fg_color; }
2029
}
2030
//SCREEN SHIELD
2032
.screen-shield-arrows {
2034
padding-bottom: 3em;
2035
}
2036
.screen-shield-arrows Gjs_Arrow {
2038
color: white;
2039
width: 80px;
2040
height: 48px;
2041
-arrow-thickness: 12px;
2042
-arrow-shadow: $z-depth-1;
2043
}
2044
.screen-shield-clock {
2046
color: white;
2047
text-shadow: $z-depth-1;
2048
font-weight: normal;
2049
text-align: center;
2050
padding-bottom: 1.5em;
2051
}
2052
.screen-shield-clock-time {
2054
@include font(display-4);
2055
text-shadow: $z-depth-1;
2056
}
2057
.screen-shield-clock-date { @include font(display-2); }
2059
.screen-shield-notifications-container {
2061
spacing: 6px;
2062
width: 30em;
2063
background-color: transparent;
2064
max-height: 500px;
2065
.summary-notification-stack-scrollview {
2066
padding-top: 0;
2067
padding-bottom: 0;
2068
}
2069
.notification,
2071
.screen-shield-notification-source {
2072
padding: 8px;
2073
border: none;
2074
background-color: $osd_bg_color;
2075
color: $selected_fg_color;
2076
border-radius: 2px;
2077
}
2078
.notification { margin-right: 16px; } //compensate for space allocated to the scrollbar
2079
}
2080
.screen-shield-notification-label {
2083
min-height: $small_size - 2px;
2084
padding: 2px 0px 0px 16px;
2085
font-weight: bold;
2086
}
2087
.screen-shield-notification-count-text {
2089
min-height: $small_size - 2px;
2090
padding: 2px 0px 0px 16px;
2091
color: $secondary_selected_fg_color;
2092
}
2093
#panel.lock-screen { background-color: $osd_bg_color; }
2095
.screen-shield-background { //just the shadow, really
2097
background: black;
2098
box-shadow: $z-depth-5;
2099
}
2100
#lockDialogGroup {
2102
background: #607D8B url("assets/noise-texture.svg");
2103
background-size: cover;
2104
}
2105
#screenShieldNotifications {
2107
StScrollBar { @extend %overview_scrollbar; }
2108
}
2109
// Looking Glass
2112
#LookingGlassDialog {
2113
background-color: $base_color;
2114
spacing: 4px;
2115
padding: 0;
2116
border: none;
2117
border-radius: 2px;
2118
box-shadow: $z-depth-4;
2119
& > #Toolbar {
2120
padding: 0 8px;
2121
border: none;
2122
border-radius: 0;
2123
background-color: rgba($base_color, 0.01);
2124
box-shadow: inset 0 -1px 0 $borders_color;
2125
}
2126
.labels { spacing: 0; }
2127
.notebook-tab {
2128
-natural-hpadding: 12px;
2129
-minimum-hpadding: 6px;
2130
font-weight: bold;
2131
color: $tertiary_fg_color;
2132
transition-duration: 0.2s;
2133
padding-left: 16px;
2134
padding-right: 16px;
2135
min-height: $medium_size;
2136
padding: 0 16px * 2;
2137
&:hover {
2138
box-shadow: inset 0 -2px 0px $track_color;
2139
color: $fg_color;
2140
text-shadow: none;
2141
}
2142
&:selected {
2143
border-bottom-width: 0;
2144
border-color: transparent;
2145
background-color: rgba($base_color, 0.01);
2146
box-shadow: inset 0 -2px 0px $selected_bg_color;
2147
color: $fg_color;
2148
text-shadow: none;
2149
}
2150
}
2151
StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
2152
StBoxLayout#ResultsArea { spacing: 4px; }
2153
}
2154
.lg-dialog {
2156
StEntry {
2157
selection-background-color: $selected_bg_color;
2158
selected-color: $selected_fg_color;
2159
}
2160
.shell-link {
2161
color: $link_color;
2162
&:hover { color: $link_color; }
2163
}
2164
}
2165
.lg-completions-text {
2167
font-size: 1em;
2168
font-style: italic;
2169
}
2170
.lg-obj-inspector-title {
2172
spacing: 4px;
2173
}
2174
.lg-obj-inspector-button {
2176
min-height: $medium_size;
2177
padding: 0 16px;
2178
border: none;
2179
border-radius: 2px;
2180
@include font(button);
2181
@include button(flat-normal);
2182
&:hover { @include button(flat-hover); }
2183
&:active { @include button(flat-active); }
2184
&:insensitive { @include button(flat-insensitive); }
2185
&:focus { @include button(flat-focus); }
2186
&:hover { border: none; }
2187
}
2188
#lookingGlassExtensions { padding: 4px; }
2190
.lg-extensions-list {
2192
padding: 4px;
2193
spacing: 6px;
2194
}
2195
.lg-extension {
2197
border: none;
2198
border-radius: 2px;
2199
padding: 4px;
2200
}
2201
.lg-extension-name {
2203
@include font(headline);
2204
}
2205
.lg-extension-meta {
2207
spacing: 6px;
2208
}
2209
#LookingGlassPropertyInspector {
2211
background: $base_color;
2212
border: none;
2213
border-radius: 2px;
2214
padding: 6px;
2215
box-shadow: $z-depth-4;
2216
}
2217