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
$panel-corner-radius: 0;
8
/* Copyright 2009, 2015 Red Hat, Inc.
10
*
11
* Portions adapted from Mx's data/style/default.css
12
* Copyright 2009 Intel Corporation
13
*
14
* This program is free software; you can redistribute it and/or modify it
15
* under the terms and conditions of the GNU Lesser General Public License,
16
* version 2.1, as published by the Free Software Foundation.
17
*
18
* This program is distributed in the hope it will be useful, but WITHOUT ANY
19
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
20
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for
21
* more details.
22
*
23
* You should have received a copy of the GNU Lesser General Public License
24
* along with this program; if not, write to the Free Software Foundation,
25
* Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
26
*/
27
$menuitem_size: 32px;
30
$small_size: 24px;
31
$medium_size: 36px;
32
$large_size: 48px;
33
* {
35
transition-timing-function : cubic-bezier(0.4, 0, 0.2, 1);
36
transition-duration: 0.2s;
37
}
38
/* GLOBALS */
40
$root-font-size: 14px;
41
$font-family: "M+ 1c", Roboto, Cantarell, Sans-Serif;
42
$large-font-family: Roboto, "M+ 1c", Cantarell, Sans-Serif;
43
stage {
45
font-family: $font-family;
46
@include font(body-1);
47
color: $fg_color;
48
}
49
/* WIDGETS */
51
/* Buttons */
53
.button {
54
min-height: $medium_size;
55
padding: 0 16px;
56
border-width: 0;
57
border-radius: 2px;
58
@include font(button);
59
@include button(flat-normal);
60
&:hover { @include button(flat-hover); }
61
&:active { @include button(flat-active); }
62
&:insensitive { @include button(flat-insensitive); }
63
&:focus { @include button(flat-focus); }
64
}
66
.modal-dialog-linked-button {
68
min-height: 40px;
69
padding: 0 16px;
70
border-top: 1px solid $borders_color !important;
71
border-right-width: 0;
72
@include font(button);
73
@include button(flat-normal);
74
&:hover { @include button(flat-hover); }
75
&:active { @include button(flat-active); }
76
&:insensitive { @include button(flat-insensitive); }
77
&:focus { @include button(flat-focus); }
78
&:first-child {
80
border-radius: 0px 0px 0px 2px;
81
}
82
&:last-child {
83
border-right-width: 0px;
84
border-radius: 0px 0px 2px 0px;
85
}
86
&:first-child:last-child {
87
border-right-width: 0px;
88
border-radius: 0px 0px 2px 2px;
89
}
90
}
91
/* Entries */
93
StEntry {
94
min-height: $medium_size;
95
padding: 0 8px;
96
border-radius: 0;
97
border-width: 0;
98
color: $fg_color;
99
selection-background-color: $selected_bg_color;
100
selected-color: $selected_fg_color;
101
@include font(subheading);
102
@include entry(normal);
103
//&:hover { @include entry(hover);}
104
&:focus { @include entry(focus);}
105
&:insensitive { @include entry(insensitive);}
106
StIcon.capslock-warning {
107
icon-size: 16px;
108
warning-color: $warning_color;
109
padding: 0 0;
110
}
111
}
112
/* Scrollbars */
115
StScrollView {
117
&.vfade { -st-vfade-offset: 32px; }
118
&.hfade { -st-hfade-offset: 32px; }
119
}
120
StScrollBar {
122
padding: 0;
123
StScrollView & {
125
min-width: 16px;
126
min-height: 16px;
127
}
128
StBin#trough {
130
margin: 4px;
131
border-radius: 100px;
132
background-color: $insensitive_track_color;
133
}
134
StButton#vhandle, StButton#hhandle {
136
border-radius: 100px;
137
background-color: $tertiary_fg_color;
138
//border: 4px solid transparent; //would be nice to margin or at least to transparent
139
margin: 4px;
140
&:hover { background-color: $secondary_fg_color; }
141
&:active { background-color: $fg_color; }
142
}
143
}
144
%overview_scrollbar {
146
StBin#trough {
147
background-color: $selected_insensitive_track_color;
148
}
149
StButton#vhandle, StButton#hhandle {
151
background-color: $tertiary_selected_fg_color;
152
&:hover { background-color: $secondary_selected_fg_color; }
153
&:active { background-color: $selected_fg_color; }
154
}
155
}
156
/* Slider */
158
.slider {
160
height: 20px;
161
color: $accent_bg_color;
162
-slider-height: 4px;
163
-slider-background-color: $track_color; //background of the trough
164
-slider-border-color: transparent; //trough border color
165
-slider-active-background-color: $accent_bg_color; //active trough fill
166
-slider-active-border-color: transparent; //active trough border
167
-slider-border-width: 0;
168
-slider-handle-radius: 8px;
169
}
170
/* Check Boxes */
172
.check-box {
174
* {
175
min-height: $medium_size - 8px * 2;
176
padding: 8px 0;
177
}
178
StBoxLayout { spacing: 8px; }
179
StBin {
180
width: 24px;
181
height: 24px;
182
padding: ($medium_size - 24px) / 2;
183
border-radius: 100px;
184
background-image: url("assets/checkbox-off.svg");
185
}
186
&:focus StBin {
187
background-image: url("assets/checkbox-off.svg");
188
}
189
&:hover StBin {
190
background-color: $semi_track_color;
191
}
192
&:active StBin {
193
background-color: $track_color;
194
}
195
&:checked StBin {
196
background-image: url("assets/checkbox.svg");
197
}
198
&:focus:checked StBin {
199
background-image: url("assets/checkbox.svg");
200
}
201
&:hover:checked StBin {
202
background-color: scale-alpha($accent_bg_color, $lower_opacity / 2);
203
}
204
&:active:checked StBin {
205
background-color: scale-alpha($accent_bg_color, $lower_opacity);
206
}
207
}
208
/* Switches */
210
.toggle-switch {
211
width: 40px;
212
height: 20px;
213
background-size: contain;
214
}
215
@each $v in us, intl {
217
.toggle-switch-#{$v} {
218
background-image: url("assets/toggle-off.svg");
219
&:checked { background-image: url("assets/toggle-on.svg"); }
220
}
221
}
222
/* links */
224
.shell-link {
225
border-radius: 2px;
226
color: $link_color;
227
&:hover {
228
color: $link_color;
229
background-color: scale-alpha($link_color, $lower_opacity / 2);
230
}
231
&:active {
232
color: $link_color;
233
background-color: scale-alpha($link_color, $lower_opacity);
234
}
235
}
236
/* Modal Dialogs */
238
.headline { @include font(title); }
240
.lightbox { background-color: black; }
241
.flashspot { background-color: white; }
242
.modal-dialog {
244
border-radius: 2px;
245
color: $fg_color;
246
background-color: $base_color;
247
border: none;
248
box-shadow: $z-depth-4;
249
.modal-dialog-content-box {
250
padding: 24px;
251
}
252
.run-dialog-entry { width: 20em; margin-bottom: 6px; }
253
.run-dialog-error-box {
254
padding-top: 16px;
255
spacing: 6px;
256
}
257
.run-dialog-button-box { padding-top: 1em; }
258
.run-dialog-label {
259
font-size: 1em;
260
font-weight: normal;
261
color: $tertiary_fg_color;
262
padding-bottom: .4em;
263
}
264
}
266
.show-processes-dialog-subject,
268
.mount-question-dialog-subject,
269
.end-session-dialog-subject { //this should be a generic header class
270
@include font(title);
271
}
272
/* End Session Dialog */
274
.end-session-dialog {
275
spacing: 42px;
276
border: none;
277
}
278
.end-session-dialog-list {
280
padding-top: 20px;
281
}
282
.end-session-dialog-layout {
284
padding-left: 17px;
285
&:rtl { padding-right: 17px; }
286
}
287
.end-session-dialog-description {
289
width: 28em;
290
padding-bottom: 10px;
291
&:rtl {
292
text-align: right;
293
}
294
}
295
.end-session-dialog-warning {
297
width: 28em;
298
color: $warning_color;
299
padding-top: 6px;
300
&:rtl {
301
text-align: right;
302
}
303
}
304
.end-session-dialog-logout-icon {
306
//border: 2px solid #8b8b8b;
307
border-radius: 5px;
308
width: 48px;
309
height: 48px;
310
background-size: contain;
311
}
312
.end-session-dialog-shutdown-icon {
314
color: $tertiary_fg_color;
315
width: 48px;
316
height: 48px;
317
}
318
.end-session-dialog-inhibitor-layout {
320
spacing: 16px;
321
max-height: 200px;
322
padding-right: 65px;
323
padding-left: 65px;
324
}
325
.end-session-dialog-session-list,
327
.end-session-dialog-app-list {
328
spacing: 1em;
329
}
330
.end-session-dialog-list-header {
332
font-weight: bold;
333
&:rtl { text-align: right; }
334
}
335
.end-session-dialog-app-list-item,
337
.end-session-dialog-session-list-item {
338
spacing: 1em;
339
}
340
.end-session-dialog-app-list-item-name,
342
.end-session-dialog-session-list-item-name {
343
font-weight: bold;
344
}
345
.end-session-dialog-app-list-item-description {
347
color: $tertiary_fg_color;
348
font-size: 1em;
349
}
350
/* ShellMountOperation Dialogs */
352
.shell-mount-operation-icon { icon-size: 48px; }
353
.show-processes-dialog,
355
.mount-question-dialog {
356
spacing: 24px;
357
}
358
.show-processes-dialog-subject,
360
.mount-question-dialog-subject {
361
padding-top: 10px;
362
padding-left: 17px;
363
padding-bottom: 6px;
364
}
365
.mount-question-dialog-subject {
367
max-width: 500px;
368
}
369
.show-processes-dialog-subject:rtl,
371
.mount-question-dialog-subject:rtl {
372
padding-left: 0px;
373
padding-right: 17px;
374
}
375
.show-processes-dialog-description,
377
.mount-question-dialog-description {
378
padding-left: 17px;
379
width: 28em;
380
}
381
.show-processes-dialog-description:rtl,
383
.mount-question-dialog-description:rtl {
384
padding-right: 17px;
385
}
386
.show-processes-dialog-app-list {
388
max-height: 200px;
389
padding-top: 24px;
390
padding-left: 49px;
391
padding-right: 32px;
392
}
393
.show-processes-dialog-app-list:rtl {
395
padding-right: 49px;
396
padding-left: 32px;
397
}
398
.show-processes-dialog-app-list-item {
400
color: $fg_color;
401
&:hover { color: $fg_color; }
402
&:ltr { padding-right: 1em; }
403
&:rtl { padding-left: 1em; }
404
}
405
.show-processes-dialog-app-list-item-icon {
407
&:ltr { padding-right: 17px; }
408
&:rtl { padding-left: 17px; }
409
}
410
.show-processes-dialog-app-list-item-name {
412
font-size: 1em;
413
}
414
/* Password or Authentication Dialog */
417
.prompt-dialog {
419
//this is the width of the entire modal popup
420
width: 500px;
421
border: none;
422
}
423
.prompt-dialog-main-layout {
425
spacing: 24px;
426
padding: 10px;
427
}
428
.prompt-dialog-message-layout {
430
spacing: 16px;
431
}
432
.prompt-dialog-headline {
434
@include font(title);
435
color: $fg_color;
436
}
437
.prompt-dialog-description:rtl {
439
text-align: right;
440
}
441
.prompt-dialog-password-box {
443
spacing: 1em;
444
padding-bottom: 1em;
445
}
446
.prompt-dialog-error-label {
448
font-size: 1em;
449
color: $error_color;
450
padding-bottom: 8px;
451
}
452
.prompt-dialog-info-label {
454
font-size: 1em;
455
padding-bottom: 8px;
456
}
457
.hidden {
459
color: rgba(0,0,0,0);
460
}
461
.prompt-dialog-null-label {
463
font-size: 1em;
464
padding-bottom: 8px;
465
}
466
/* Polkit Dialog */
469
.polkit-dialog-user-layout {
471
padding-left: 10px;
472
spacing: 10px;
473
&:rtl {
474
padding-left: 0px;
475
padding-right: 10px;
476
}
477
}
478
.polkit-dialog-user-root-label {
480
color: $warning_color;
481
}
482
.polkit-dialog-user-icon {
484
border-radius: 5px;
485
background-size: contain;
486
width: 48px;
487
height: 48px;
488
}
489
/* Audio selection dialog */
491
.audio-device-selection-dialog {
492
spacing: 30px;
493
}
494
.audio-selection-content {
496
spacing: 20px;
497
padding: 24px;
498
}
499
.audio-selection-title {
501
font-weight: bold;
502
text-align: center;
503
}
504
.audio-selection-box {
506
spacing: 20px;
507
}
508
.audio-selection-device {
510
border: 1px solid $borders_color;
511
border-radius: 2px;
512
&:active,&:hover,&:focus { background-color: $selected_bg_color; }
513
}
514
.audio-selection-device-box {
516
padding: 20px;
517
spacing: 20px;
518
}
519
.audio-selection-device-icon {
521
icon-size: 64px;
522
}
523
/* Geolocation Dialog */
525
.geolocation-dialog {
526
spacing: 30px;
527
}
528
.geolocation-dialog-main-layout {
530
spacing: 12px;
531
}
532
.geolocation-dialog-content {
534
spacing: 20px;
535
}
536
.geolocation-dialog-icon {
538
icon-size: 48px;
539
}
540
.geolocation-dialog-title {
542
font-weight: bold;
543
}
544
.geolocation-dialog-reason {
546
color: $tertiary_fg_color;
547
font-weight: bold;
548
}
549
/* Network Agent Dialog */
551
.network-dialog-secret-table {
553
spacing-rows: 15px;
554
spacing-columns: 1em;
555
}
556
.keyring-dialog-control-table {
558
spacing-rows: 15px;
559
spacing-columns: 1em;
560
}
561
/* Popovers/Menus */
563
.popup-menu {
565
min-width: 200px;
566
.popup-menu-arrow { } //defined globally in the TOP BAR
568
.popup-sub-menu {
569
background-color: $secondary_base_color;
570
box-shadow: $z-depth-0;
571
}
572
.popup-menu-content { padding: 8px 0; }
574
.popup-menu-item {
575
// min-height: $menuitem_size - 4px * 2;
576
spacing: 8px;
577
transition-duration: 0s;
578
&:ltr { padding: 0.4em 24px 0.4em 0; }
580
&:rtl { padding: 0.4em 0 0.4em 24px; }
581
&:checked {
582
background-color: $selected_bg_color;
583
color: $selected_fg_color;
584
box-shadow: $z-depth-0;
585
font-weight: normal;
586
&.selected {
587
background-color: mix($selected_fg_color, $selected_bg_color, percentage($lower_opacity / 2));
588
color: $selected_fg_color;
589
}
590
&:active {
591
background-color: mix($selected_fg_color, $selected_bg_color, percentage($lower_opacity));
592
color: $selected_fg_color !important;
593
}
594
&:insensitive { color: $insensitive_selected_fg_color; }
595
}
596
&.selected {
597
background-color: $semi_track_color;
598
color: $fg_color;
599
}
600
&:active {
601
background-color: $track_color;
602
color: $fg_color;
603
transition-duration: 0.2s;
604
}
605
&.selected:active { color: $fg_color; }
606
&:insensitive { color: $insensitive_fg_color; }
607
}
608
.popup-inactive-menu-item { //all icons and other graphical elements
610
color: $fg_color;
611
&:insensitive { color: $tertiary_fg_color; }
613
}
614
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
615
&.panel-menu {
616
-boxpointer-gap: 4px;
617
margin-bottom: 1.75em;
618
}
619
}
620
.popup-menu-ornament {
624
text-align: right;
625
width: 16px;
626
height: 16px;
627
}
628
.popup-menu-boxpointer,
629
.candidate-popup-boxpointer {
630
-arrow-border-radius: 0;
631
-arrow-background-color: transparent;
632
-arrow-border-width: 0;
633
-arrow-border-color: transparent;
634
-arrow-base: 0;
635
-arrow-rise: 0;
636
-arrow-box-shadow: none; //dreaming. bug #689995
637
margin: 5px 8px 8px;
638
background-color: $base_color;
639
border-radius: 2px;
640
box-shadow: $z-depth-2;
641
}
642
.popup-separator-menu-item {
644
//-margin-horizontal: 24px;
645
height: 1px; //not really the whole box
646
margin: 8px 64px - 24px;
647
background-color: transparent;
648
border-color: $borders_color;
649
border-bottom-width: 1px;
650
border-bottom-style: solid;
651
}
652
// Background menu
655
.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0; }
656
/* fallback menu
658
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
659
app menu inside the main app window itself rather than the top bar
660
*/
661
/* OSD */
664
.osd-window {
665
text-align: center;
666
font-weight: bold;
667
spacing: 1em;
668
margin: 32px;
669
min-width: 64px;
670
min-height: 64px;
671
.osd-monitor-label { @include font(display-2); }
673
.level {
674
height: 0.6em;
675
border-radius: 4px;
676
background-color: $track_color;
677
color: $fg_color;
678
}
679
.level-bar {
680
background-color: $selected_bg_color;
681
border-radius: 2px;
682
}
683
}
684
/* App Switcher */
686
.switcher-popup {
687
padding: 8px;
688
spacing: 16px;
689
}
690
.osd-window,
692
.resize-popup,
693
.switcher-list {
694
@extend %osd-panel;
695
}
696
.switcher-list-item-container { spacing: 8px; }
698
.switcher-list .item-box {
700
padding: 8px;
701
border-radius: 2px;
702
}
703
.switcher-list .item-box:outlined {
705
padding: 8px;
706
border: none;
707
background-color: $insensitive_track_color;
708
}
709
.switcher-list .item-box:selected {
711
background-color: $selected_bg_color;
712
color: $selected_fg_color;
713
}
714
.switcher-list .thumbnail-box {
716
padding: 2px;
717
spacing: 4px;
718
}
719
.switcher-list .thumbnail {
721
width: 256px;
722
}
723
.switcher-list .separator {
725
width: 1px;
726
background: $borders_color;
727
}
728
.switcher-arrow {
730
border-color: rgba(0,0,0,0);
731
color: $tertiary_fg_color;
732
&:highlighted {
733
color: $fg_color;
734
}
735
}
736
.input-source-switcher-symbol {
738
@include font(display-2);
739
width: 96px;
740
height: 96px;
741
}
742
/* Workspace Switcher */
744
.workspace-switcher-group { padding: 8px; }
745
.workspace-switcher-container {
747
@extend %osd-panel;
748
}
749
.workspace-switcher {
751
background: transparent;
752
border: 0px;
753
border-radius: 0px;
754
padding: 0px;
755
spacing: 8px;
756
}
757
.ws-switcher-active-up, .ws-switcher-active-down {
759
height: $large_size;
760
background-color: $selected_bg_color;
761
color: $selected_fg_color;
762
background-size: 32px;
763
border-radius: 2px;
764
}
765
.ws-switcher-box {
767
height: $large_size;
768
border: none;
769
background: $insensitive_track_color;
770
border-radius: 2px;
771
}
772
%osd-panel {
774
color: $fg_color;
775
background-color: $base_color;
776
border: none;
777
box-shadow: $z-depth-4;
778
border-radius: 2px;
779
padding: 12px;
780
}
781
/* Tiled window previews */
783
.tile-preview {
784
background-color: scale-alpha($secondary_selected_bg_color, $lower_opacity);
785
border: 1px solid $secondary_selected_bg_color;
786
}
787
.tile-preview-left.on-primary {
789
border-radius: $panel-corner-radius $panel-corner-radius 0 0;
790
}
791
.tile-preview-right.on-primary {
793
border-radius: 0 $panel-corner-radius 0 0;
794
}
795
.tile-preview-left.tile-preview-right.on-primary {
797
border-radius: $panel-corner-radius $panel-corner-radius 0 0;
798
}
799
/* TOP BAR */
801
#panel {
803
background-color: $topbar_color;
804
font-weight: bold;
805
height: $menuitem_size;
806
&:overview,
808
&.unlock-screen,
809
&.login-screen,
810
&.lock-screen {
811
background-color: transparent;
812
}
813
#panelLeft, #panelCenter { // spacing between activities<>app menu and such
815
spacing: 0;
816
}
817
.panel-corner {
819
-panel-corner-radius: $panel-corner-radius;
820
-panel-corner-background-color: $bg_color;
821
-panel-corner-border-width: 2px;
822
-panel-corner-border-color: transparent;
823
&:active, &:overview, &:focus {
825
-panel-corner-border-color: $selected_fg_color;
826
}
827
&.lock-screen, &.login-screen, &.unlock-screen {
829
-panel-corner-radius: 0;
830
-panel-corner-background-color: transparent;
831
-panel-corner-border-color: transparent;
832
}
833
}
834
.panel-button {
836
-natural-hpadding: 12px;
837
-minimum-hpadding: 6px;
838
font-weight: bold;
839
color: $secondary_selected_fg_color;
840
transition-duration: 0.2s;
841
.app-menu-icon {
843
-st-icon-style: symbolic;
844
margin-left: 4px;
845
margin-right: 4px;
846
//dimensions of the icon are hardcoded
847
}
848
&:hover {
850
color: $selected_fg_color;
851
}
852
&:active, &:overview, &:focus, &:checked {
854
// Trick due to St limitations. It needs a background to draw
855
// a box-shadow
856
background-color: rgba($bg_color, 0.01);
857
box-shadow: inset 0 -2px 0px $selected_fg_color;
858
color: $selected_fg_color;
859
& > .system-status-icon { icon-shadow: none; }
861
}
862
.system-status-icon { @include px-to-em(16px); padding: 0 4px; }
864
.unlock-screen &,
865
.login-screen &,
866
.lock-screen & {
867
color: $secondary_selected_fg_color;
868
&:focus, &:hover, &:active { color: $selected_fg_color; }
869
}
870
}
871
.panel-status-indicators-box,
873
.panel-status-menu-box {
874
spacing: 2px;
875
}
876
// spacing between power icon and (optional) percentage label
878
.power-status.panel-status-indicators-box {
879
spacing: 0;
880
}
881
.screencast-indicator { color: $warning_color; }
883
}
884
// calendar popover
886
#calendarArea {
887
padding: 8px 16px;
888
}
889
.calendar {
891
margin-bottom: 0;
892
}
893
.calendar,
895
.datemenu-today-button,
896
.datemenu-displays-box,
897
.message-list-sections {
898
margin: 0 8px;
899
}
900
.datemenu-calendar-column { spacing: 8px; }
902
.datemenu-displays-section { padding-bottom: 0; }
903
.datemenu-today-button,
905
.world-clocks-button,
906
.message-list-section-title {
907
min-height: $menuitem_size - 4px * 2;
908
padding: 4px 8px;
909
border-radius: 2px;
910
}
911
.datemenu-today-button {
913
min-height: $menuitem_size * 2 - 4px * 2;
914
}
915
.message-list-section-list:ltr {
917
padding-left: 0;
918
}
919
.message-list-section-list:rtl {
921
padding-right: 0;
922
}
923
.datemenu-today-button,
925
.world-clocks-button,
926
.message-list-section-title {
927
&:hover,&:focus { color: $fg_color; background-color: $semi_track_color; }
928
&:active {
929
color: $fg_color;
930
background-color: $track_color;
931
}
932
}
933
.datemenu-today-button .day-label {
935
}
936
.datemenu-today-button .date-label {
938
@include font(headline);
939
}
940
.world-clocks-header,
942
.message-list-section-title {
943
color: $secondary_fg_color;
944
font-weight: bold;
945
}
946
.world-clocks-grid {
948
spacing-rows: 0.4em;
949
}
950
.calendar-month-label {
952
height: $menuitem_size - 6px * 2;
953
margin: 2px;
954
padding: 6px 16px;
955
border-radius: 2px;
956
color: $fg_color;
957
font-weight: bold;
958
text-align: center;
959
&:focus { background-color: $semi_track_color; }
960
}
961
.pager-button {
963
width: $menuitem_size;
964
height: $menuitem_size;
965
margin: 2px;
966
border-radius: 100px;
967
background-color: transparent;
968
color: $fg_color;
969
&:hover, &:focus { background-color: $semi_track_color; }
970
&:active { background-color: $track_color; }
971
}
972
.calendar-change-month-back { //arrow back
974
background-image: url("assets/calendar-arrow-left.svg");
975
&:rtl { background-image: url("assets/calendar-arrow-right.svg"); }
976
}
977
.calendar-change-month-forward { //arrow foreward
978
background-image: url("assets/calendar-arrow-right.svg");
979
&:rtl { background-image: url("assets/calendar-arrow-left.svg"); }
980
}
981
.calendar-day-base {
983
@include font(caption);
984
text-align: center;
985
width: $menuitem_size; height: $menuitem_size;
986
padding: 0;
987
margin: 2px;
988
border-radius: 100px;
989
&:hover,&:focus { background-color: $semi_track_color; }
990
// &:active { background-color: $track_color; }
991
&:active, &:selected {
992
color: $selected_fg_color;
993
background-color: $selected_bg_color !important;
994
border-color: transparent; //avoid jumparound due to today
995
}
996
&.calendar-day-heading { //day of week heading
997
width: $menuitem_size; height: $menuitem_size - 7px;
998
margin-top: 2px;
999
padding: 7px 0 0;
1000
border-radius: 100px;
1001
background-color: transparent;
1002
color: $tertiary_fg_color;
1003
@include font(caption);
1004
font-weight: bold;
1005
text-align: center;
1006
}
1007
}
1008
.calendar-day { //border collapse hack - see calendar.js
1009
border-width: 0;
1010
}
1011
.calendar-day-top { border-top-width: 0; }
1012
.calendar-day-left { border-left-width: 0; }
1013
.calendar-work-day {
1014
}
1016
.calendar-nonwork-day {
1017
color: $fg_color;
1018
}
1019
.calendar-today {
1020
font-weight: bold !important;
1021
//color: $fg_color;
1022
//background-color: transparent;
1023
border: none;
1024
}
1025
.calendar-day-with-events {
1026
color: $link_color;
1027
font-weight: normal;
1028
text-decoration: underline;
1029
background-image: none;
1030
}
1031
.calendar-other-month-day {
1032
color: $insensitive_fg_color;
1033
opacity: 0.5;
1034
}
1035
.calendar-week-number {
1036
width: $menuitem_size; height: $menuitem_size - 7px;
1037
margin: 2px;
1038
padding: 7px 0 0;
1039
border-radius: 100px;
1040
background-color: transparent;
1041
color: $tertiary_fg_color;
1042
font-size: inherit;
1043
font-weight: bold;
1044
text-align: center;
1045
}
1046
/* Message list */
1048
.message-list {
1049
width: 420px;
1050
}
1051
.message-list-sections {
1053
spacing: 8px;
1054
}
1055
.message-list-section,
1057
.message-list-section-list {
1058
spacing: 8px;
1059
}
1060
.message-list-section-title-box {
1062
spacing: 8px;
1063
}
1064
.message-list-section-close > StIcon {
1066
icon-size: 16px;
1067
border-radius: 16px;
1068
padding: 8px;
1069
color: $secondary_fg_color;
1070
background-color: transparent;
1071
}
1072
/* FIXME: how do you do this in sass? */
1074
.message-list-section-close:hover > StIcon,
1075
.message-list-section-close:focus > StIcon {
1076
color: $fg_color;
1077
background-color: $semi_track_color;
1078
}
1079
.message-list-section-close:active > StIcon {
1081
color: $fg_color;
1082
background-color: $track_color;
1083
}
1084
.message {
1086
min-height: $menuitem_size * 2;
1087
background-color: transparent;
1088
&:hover,&:focus { background-color: $semi_track_color; }
1089
&:active { background-color: $track_color; }
1090
border-radius: 2px;
1091
}
1092
.message-icon-bin {
1094
padding: 8px 0px 8px 8px;
1095
&:rtl { padding: 8px 8px 8px 0px; }
1096
}
1097
.message-icon-bin > StIcon {
1099
icon-size: 32px;
1100
}
1101
.message-secondary-bin {
1103
&:ltr { padding-left: 8px; }
1104
&:rtl { padding-right: 8px; }
1105
}
1106
.message-secondary-bin {
1108
color: $tertiary_fg_color;
1109
}
1110
.message-secondary-bin > StIcon {
1112
icon-size: 16px;
1113
}
1114
.message-title {
1116
min-height: $small_size - 2px;
1117
padding-top: 2px;
1118
color: $fg_color;
1119
font-weight: bold;
1120
font-size: 1em;
1121
}
1122
.message-content {
1124
padding: 8px;
1125
color: $secondary_fg_color;
1126
font-size: 1em;
1127
}
1128
.message-content * > StIcon {
1130
icon-size: 16px;
1131
border-radius: 16px;
1132
padding: 4px;
1133
color: $secondary_fg_color;
1134
}
1135
/* FIXME: how do you do this in sass? */
1137
.message-content *:hover > StIcon,
1138
.message-content *:focus > StIcon {
1139
color: $fg_color;
1140
background-color: $semi_track_color;
1141
}
1142
.message-content *:active > StIcon {
1144
color: $fg_color;
1145
background-color: $track_color;
1146
}
1147
.message-media-control {
1149
margin: 16px 0;
1150
padding: 8px;
1151
border-radius: 100px;
1152
color: $secondary_fg_color;
1153
&:hover,&:focus { color: $fg_color; background-color: $semi_track_color; }
1154
&:active { color: $fg_color; background-color: $track_color; }
1155
&:insensitive { color: $insensitive_secondary_fg_color; }
1156
&:last-child:ltr { margin-right: 16px; padding-right: 8px; }
1158
&:last-child:rtl { margin-left: 16px; padding-left: 8px; }
1159
}
1160
.media-message-cover-icon {
1162
icon-size: 32px;
1163
&.fallback {
1164
icon-size: 16px;
1165
padding: 8px;
1166
border: none;
1167
border-radius: 2px;
1168
background-color: $semi_track_color;
1169
color: $tertiary_fg_color;
1170
}
1171
}
1172
// a little unstructured mess:
1175
.system-switch-user-submenu-icon.user-icon {
1177
icon-size: 24px;
1178
padding: 0 0;
1179
}
1180
.system-switch-user-submenu-icon.default-icon {
1181
icon-size: 16px;
1182
padding: 0 4px;
1183
}
1184
#appMenu {
1186
spinner-image: url("process-working.svg");
1187
spacing: 4px;
1188
.label-shadow { color: transparent; }
1190
}
1191
.aggregate-menu {
1193
min-width: 280px;
1194
.popup-menu-icon { padding: 0 4px; }
1195
}
1196
.system-menu-action {
1198
color: $secondary_fg_color;
1199
border-radius: 100px; /* wish we could do 50% */
1200
padding: ($large_size - 16px) / 2;
1201
border: none;
1202
&:hover, &:focus {
1204
background-color: $semi_track_color;
1205
color: $fg_color;
1206
border: none;
1207
padding: 16px;
1208
}
1209
&:active { background-color: $track_color; color: $fg_color; }
1210
& > StIcon { icon-size: 16px; }
1212
}
1213
//Activities Ripples
1215
.ripple-box {
1216
width: 48px;
1217
height: 48px;
1218
background-image: url("assets/corner-ripple-ltr.svg");
1219
background-size: contain;
1220
}
1221
.ripple-box:rtl {
1223
background-image: url("assets/corner-ripple-rtl.svg");
1224
}
1225
// not really top bar only
1227
.popup-menu-arrow { width: 16px; height: 16px; }
1228
.popup-menu-icon { @include px-to-em(16px); }
1229
//close buttons
1231
.window-close {
1233
height: $medium_size;
1234
width: $medium_size;
1235
-st-background-image-shadow: $z-depth-1;
1236
background-image: url("assets/window-close.svg");
1237
background-size: $medium_size;
1238
&:hover { -st-background-image-shadow: $z-depth-2; }
1239
&:active { background-image: url("assets/window-close-active.svg"); }
1240
}
1241
.window-close {
1242
-shell-close-overlap: $medium_size / 2;
1243
&:rtl { -st-background-image-shadow: $z-depth-1; }
1244
&:rtl:hover { -st-background-image-shadow: $z-depth-2; }
1245
}
1246
/* NETWORK DIALOGS */
1248
.nm-dialog {
1250
max-height: 500px;
1251
min-height: 450px;
1252
min-width: 470px;
1253
}
1254
.nm-dialog-content {
1256
spacing: 20px;
1257
padding: 24px;
1258
}
1259
.nm-dialog-header-hbox { spacing: 10px; }
1260
.nm-dialog-airplane-box { spacing: 12px; }
1261
.nm-dialog-airplane-headline {
1263
font-weight: bold;
1264
text-align: center;
1265
}
1266
.nm-dialog-airplane-text { color: $fg_color; }
1268
.nm-dialog-header-icon { icon-size: 32px; }
1269
.nm-dialog-scroll-view { border: 2px solid $borders_color; }
1270
.nm-dialog-header { font-weight: bold; }
1271
.nm-dialog-item {
1273
@include font(subheading);
1274
border-bottom: 1px solid $borders_color;
1275
padding: 12px;
1276
spacing: 20px;
1277
}
1278
.nm-dialog-item:selected {
1280
background-color: $selected_bg_color;
1281
color: $selected_fg_color;
1282
}
1283
.nm-dialog-icons { spacing: .5em; }
1285
.nm-dialog-icon { icon-size: 16px; }
1286
.no-networks-label { color: $tertiary_fg_color; }
1287
.no-networks-box { spacing: 12px; }
1288
/* OVERVIEW */
1290
#overview {
1292
spacing: 24px; //
1293
StScrollBar { @extend %overview_scrollbar; }
1294
}
1295
.overview-controls {
1297
padding-bottom: 32px;
1298
}
1299
.window-picker { //container around window thumbnails
1301
-horizontal-spacing: 32px;
1302
-vertical-spacing: 32px;
1303
padding-left: 32px;
1304
padding-right: 32px;
1305
padding-bottom: 48px;
1306
&.external-monitor { padding: 32px; }
1308
}
1309
.window-clone-border {
1311
border: 4px solid $selected_track_color;
1312
border-radius: 2px;
1313
// For window decorations with round corners we can't match
1314
// the exact shape when the window is scaled. So apply a shadow
1315
// to fix that case
1316
box-shadow: inset 0 0 0 1px $selected_track_color;
1317
}
1318
.window-caption {
1319
spacing: 25px;
1320
color: $selected_fg_color;
1321
background-color: transparent;
1322
border-radius: 2px;
1323
padding: 4px 8px;
1324
-shell-caption-spacing: 12px;
1325
&:hover { background-color: $selected_track_color; color: $selected_fg_color; }
1326
}
1327
//search entry
1329
.search-entry {
1330
width: 320px - 8px * 2;
1331
padding: 0 8px;
1332
border-radius: 0;
1333
color: $tertiary_selected_fg_color;
1334
selection-background-color: $selected_track_color;
1335
selected-color: $selected_fg_color;
1336
@include entry(normal,$fc:$selected_track_color);
1337
&:focus {
1338
@include entry(focus,$fc:$selected_fg_color);
1339
padding: 0 8px;
1340
border-width: 0;
1341
color: $selected_fg_color;
1342
}
1343
.search-entry-icon { icon-size: 16px; padding: 0 0; color: $tertiary_selected_fg_color; }
1345
&:hover, &:focus {
1347
.search-entry-icon { color: $selected_fg_color; }
1348
}
1349
}
1350
//search results
1352
#searchResultsBin {
1354
max-width: 1000px;
1355
}
1356
#searchResultsContent {
1358
padding-left: 20px;
1359
padding-right: 20px;
1360
spacing: 16px;
1361
}
1362
.search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
1364
.search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container
1365
.search-statustext { // "no results"
1366
@extend %status_text;
1367
}
1368
.list-search-results { spacing: 3px; }
1369
.search-section-separator {
1371
-gradient-height: 1px;
1372
-gradient-start: rgba(255,255,255,0);
1373
-gradient-end: rgba(255,255,255,0.4);
1374
-margin-horizontal: 1.5em;
1375
height: 1px;
1376
}
1377
.list-search-result-content { spacing: 12px; padding: 12px; }
1379
.list-search-result-title { @include font(headline); color: $selected_fg_color; }
1380
.list-search-result-description { color: $secondary_selected_fg_color; }
1381
.search-provider-icon { padding: 15px; }
1382
.search-provider-icon-more {
1383
width: 16px;
1384
height: 16px;
1385
background-image: url("assets/more-results.svg");
1386
}
1387
/* DASHBOARD */
1390
#dash {
1392
font-size: 1em;
1393
color: $selected_fg_color;
1394
background-color: $overview_bg_color;
1395
padding: 3px 0;
1396
border: none;
1397
border-left: 0px;
1398
border-radius: 0px 2px 2px 0px;
1399
&:rtl {
1401
border-radius: 2px 0 0 2px;
1402
}
1403
.placeholder {
1405
background-image: url("assets/dash-placeholder.svg");
1406
background-size: contain;
1407
height: 24px;
1408
}
1409
.empty-dash-drop-target {
1411
width: 24px;
1412
height: 24px;
1413
}
1414
}
1416
.dash-item-container > StWidget {
1418
padding: 3px 6px;
1419
}
1420
.dash-label { //osd tooltip
1422
min-height: 28px - 4px * 2;
1423
border-radius: 2px;
1424
padding: 4px 12px;
1425
color: $fg_color;
1426
background-color: $base_color;
1427
box-shadow: $z-depth-2;
1428
text-align: center;
1429
-x-offset: 8px;
1430
}
1431
/* App Vault/Grid */
1433
.icon-grid {
1434
spacing: 30px;
1435
-shell-grid-horizontal-item-size: 136px;
1436
-shell-grid-vertical-item-size: 136px;
1437
.overview-icon { icon-size: 96px; }
1439
}
1440
//.app-display { spacing: 20px; }
1441
.app-view-controls { //favorties | all toggle container
1443
width: 320px;
1444
padding-bottom: 32px;
1445
}
1446
.app-view-control { //favorties | all toggle button
1447
padding: 0 16px;
1448
font-weight: bold;
1449
color: $secondary_selected_fg_color;
1450
&:hover {
1451
color: $selected_fg_color;
1452
background-color: $selected_semi_track_color !important;
1453
}
1454
&:active {
1455
color: $selected_fg_color;
1456
background-color: $selected_track_color !important;
1457
}
1458
&:checked {
1459
color: $selected_fg_color;
1460
background-color: rgba($bg_color, 0.01) !important;
1461
box-shadow: inset 0 2px 0 $selected_fg_color;
1462
}
1463
&:first-child {
1464
border-right-width: 0;
1465
border-radius: 2px;
1466
&:checked { border-radius: 0; }
1467
}
1468
&:last-child {
1469
border-radius: 2px;
1470
&:checked { border-radius: 0; }
1471
}
1472
}
1473
//Icon tile
1475
.search-provider-icon,
1476
.list-search-result {
1477
@extend %icon_tile;
1478
&:focus, &:selected, &:hover {
1479
background-color: $selected_semi_track_color;
1480
transition-duration: 0s;
1481
}
1482
&:active, &:checked {
1483
background-color: $selected_track_color;
1484
transition-duration: 0.2s;
1485
}
1486
}
1487
.app-well-app,
1488
.app-well-app.app-folder,
1489
.show-apps,
1490
.grid-search-result {
1491
& .overview-icon {
1492
@extend %icon_tile;
1493
}
1494
&:hover .overview-icon,
1495
&:focus .overview-icon,
1496
&:selected .overview-icon {
1497
background-color: $selected_semi_track_color;
1498
transition-duration: 0s;
1499
border-image: none;
1500
background-image: none;
1501
}
1502
&:active .overview-icon,
1503
&:checked .overview-icon {
1504
background-color: $selected_track_color;
1505
box-shadow: $z-depth-0;
1506
transition-duration: 0.2s;
1507
}
1508
}
1510
.app-well-app-running-dot { //running apps indicator
1512
width: 32px; height: 2px;
1513
background-color: $selected_fg_color;
1514
margin-bottom: 0;
1515
}
1516
%icon_tile {
1518
color: $selected_fg_color;
1519
border-radius: 2px;
1520
padding: 6px;
1521
border: none;
1522
transition-duration: 0.2s;
1523
text-align: center;
1524
}
1525
.app-well-app.app-folder > .overview-icon {
1527
background-color: $overview_bg_color;
1528
}
1529
.show-apps .show-apps-icon {
1531
color: $secondary_selected_fg_color;
1532
}
1533
.show-apps:hover .show-apps-icon,
1535
.show-apps:active .show-apps-icon,
1536
.show-apps:checked .show-apps-icon,
1537
.show-apps:focus .show-apps-icon {
1538
color: $selected_fg_color;
1539
transition-duration: 0.2s;
1540
}
1541
// Collections
1544
.app-folder-popup { //expanded collection
1545
-arrow-border-radius: 2px;
1546
-arrow-background-color: $overview_bg_color;
1547
-arrow-base: 24px;
1548
-arrow-rise: 12px;
1549
}
1550
.app-folder-popup-bin { padding: 5px; }
1551
.app-folder-icon {
1552
padding: 5px;
1553
spacing-rows: 5px;
1554
spacing-columns: 5px;
1555
}
1556
.page-indicator {
1558
padding: 15px 20px;
1559
.page-indicator-icon {
1561
width: 12px;
1562
height: 12px;
1563
border-radius: 12px;
1564
background-image: none;
1565
background-color: scale-alpha($selected_fg_color, $lower_opacity);
1566
}
1567
&:hover .page-indicator-icon {
1568
background-image: none;
1569
background-color: scale-alpha($selected_fg_color, $middle_opacity);
1570
}
1571
&:active .page-indicator-icon {
1572
background-image: none;
1573
background-color: scale-alpha($selected_fg_color, $higher_opacity);
1574
}
1575
&:checked .page-indicator-icon,
1576
&:checked:active {
1577
background-image: none;
1578
background-color: $selected_fg_color;
1579
transition-duration: 0s;
1580
}
1581
}
1582
.no-frequent-applications-label { @extend %status_text; }
1584
.app-well-app > .overview-icon.overview-icon-with-label,
1586
.grid-search-result .overview-icon.overview-icon-with-label {
1587
padding: 10px 8px 5px 8px;
1588
spacing: 4px;
1589
}
1590
// Workspace pager
1592
.workspace-thumbnails { //container ala dash
1593
@extend %overview-panel;
1594
visible-width: 32px; //amount visible before hover
1595
spacing: 12px;
1596
padding: 12px;
1597
border-radius: 2px 0 0 2px;
1598
//border-width: 0; //fixme: can't have non unoform borders :(
1599
&:rtl { border-radius: 0 2px 2px 0;}
1600
}
1601
.workspace-thumbnail-indicator {
1602
border: 0 solid $selected_fg_color;
1603
border-left-width: 2px;
1604
padding: 6px;
1605
border-radius: 0;
1606
}
1607
//Some hacks I don't even
1609
.search-display > StBoxLayout,
1610
.all-apps,
1611
.frequent-apps > StBoxLayout {
1612
// horizontal padding to make sure scrollbars or dash don't overlap content
1613
padding: 0px 88px 10px 88px;
1614
}
1615
%overview-panel {
1617
color: $selected_fg_color;
1618
background-color: $overview_bg_color;
1619
border: none;
1620
}
1621
%status_text {
1623
@include font(display-2);
1624
color: $tertiary_selected_fg_color;
1625
}
1626
/* NOTIFICATIONS & MESSAGE TRAY */
1628
.url-highlighter { link-color: $link_color; }
1630
// Banners
1632
.notification-banner {
1633
font-size: 1em;
1634
width: 34em;
1635
min-height: $menuitem_size * 2;
1636
margin: 5px;
1637
border-radius: 2px;
1638
color: $fg_color;
1639
background-color: $base_color;
1640
border: none;
1641
box-shadow: $z-depth-2;
1642
&:hover { background-color: $base_color; }
1643
&:focus { background-color: $base_color; }
1644
.notification-icon { padding: 5px; }
1646
.notification-content { padding: 5px; spacing: 5px; }
1647
.secondary-icon { @include px-to-em(16px); }
1648
.notification-actions {
1649
background-color: transparent;
1650
padding-top: 0;
1651
border-top: 1px solid $borders_color;
1652
spacing: 1px;
1653
}
1654
.notification-button {
1655
min-height: 40px;
1656
padding: 0 16px;
1657
background-color: transparent;
1658
color: $secondary_fg_color;
1659
font-weight: 500;
1660
&:first-child { border-radius: 0 0 0 2px; }
1661
&:last-child { border-radius: 0 0 2px 0; }
1662
&:hover, &focus { background-color: $semi_track_color; color: $fg_color; }
1663
&:active { background-color: $track_color; color: $fg_color; }
1664
}
1665
}
1666
.summary-source-counter {
1667
font-size: 1em;
1668
font-weight: bold;
1669
height: 1.6em; width: 1.6em;
1670
-shell-counter-overlap-x: 3px;
1671
-shell-counter-overlap-y: 3px;
1672
background-color: $selected_bg_color;
1673
color: $selected_fg_color;
1674
border: 2px solid $selected_fg_color;
1675
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
1676
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
1677
}
1678
.secondary-icon { @include px-to-em(16px); }
1680
//chat bubbles
1682
.chat-body { spacing: 5px; }
1683
.chat-response { margin: 5px; }
1684
.chat-log-message { color: $fg_color; }
1685
.chat-new-group { padding-top: 1em; }
1686
.chat-received {
1687
padding-left: 4px;
1688
&:rtl { padding-left: 0px; padding-right: 4px; }
1689
}
1690
.chat-sent {
1691
padding-left: 18pt;
1692
color: $secondary_fg_color;
1693
&:rtl { padding-left: 0; padding-right: 18pt; }
1694
}
1695
.chat-meta-message {
1696
padding-left: 4px;
1697
@include font(caption);
1698
color: $tertiary_fg_color;
1699
&:rtl { padding-left: 0; padding-right: 4px; }
1700
}
1701
//hotplug
1703
.hotplug-transient-box {
1704
spacing: 6px;
1705
padding: 2px 72px 2px 12px;
1706
}
1707
.hotplug-notification-item {
1708
padding: 2px 10px;
1709
&:focus { padding: 1px 71px 1px 11px; }
1710
}
1711
.hotplug-notification-item-icon {
1713
icon-size: 24px;
1714
padding: 2px 5px;
1715
}
1716
.hotplug-resident-box { spacing: 8px; }
1718
.hotplug-resident-mount {
1720
spacing: 8px;
1721
border-radius: 2px;
1722
&:hover { background-color: $semi_track_color; }
1723
&:active { background-color: $track_color; }
1724
}
1725
.hotplug-resident-mount-label {
1727
color: inherit;
1728
padding-left: 6px;
1729
}
1730
.hotplug-resident-mount-icon {
1732
icon-size: 24px;
1733
padding-left: 6px;
1734
}
1735
.hotplug-resident-eject-icon {
1737
icon-size: 16px;
1738
}
1739
.hotplug-resident-eject-button {
1741
padding: 7px;
1742
border-radius: 2px;
1743
color: $fg_color;
1744
}
1745
/* Eeeky things */
1747
$legacy_icon_size: 24px;
1749
.legacy-tray {
1751
background-color: $bg_color;
1752
color: $selected_fg_color;
1753
border: none;
1754
border-bottom-width: 0;
1755
&:ltr { border-radius: 0 2px 0 0; border-left-width: 0; }
1756
&:rtl { border-radius: 2px 0 0 0; border-right-width: 0; }
1757
}
1758
.legacy-tray-handle,
1760
.legacy-tray-icon {
1761
padding: 6px;
1762
& StIcon { icon-size: $legacy_icon_size; }
1763
&:hover,&:focus { background-color: $selected_semi_track_color; }
1764
&:active { background-color: $selected_track_color; }
1765
}
1766
.legacy-tray-icon-box {
1768
spacing: 12px;
1769
&:ltr { padding-left: 12px; }
1770
&:rtl { padding-right: 12px; }
1771
& StButton { width: $legacy_icon_size; height: $legacy_icon_size }
1772
}
1773
//magnifier
1775
.magnifier-zoom-region {
1777
border: 2px solid $selected_bg_color;
1778
&.full-screen { border-width: 0; }
1779
}
1780
//Keyboard
1782
/* On-screen Keyboard */
1783
#keyboard {
1785
background-color: $osd_bg_color;
1786
}
1787
.keyboard-layout {
1789
spacing: 10px;
1790
padding: 10px;
1791
}
1792
.keyboard-row { spacing: 15px; }
1794
.keyboard-key {
1796
min-height: $medium_size * 2;
1797
min-width: $medium_size * 2;
1798
font-size: 2em;
1799
font-weight: 500;
1800
border-radius: 2px;
1801
border: none;
1802
color: inherit;
1803
@include button(normal);
1804
&:focus { @include button(focus); }
1805
&:hover,&:checked { @include button(hover); }
1806
&:active { @include button(active);}
1807
&:grayed { //FIXME
1808
background-color: $osd_bg_color;
1809
color: $selected_fg_color;
1810
border-color: $osd_bg_color;
1811
}
1812
}
1813
.keyboard-subkeys { //long press on a key popup
1815
color: inherit;
1816
padding: 5px;
1817
-arrow-border-radius: 0;
1818
-arrow-background-color: transparent;
1819
-arrow-border-width: 0;
1820
-arrow-border-color: transparent;
1821
-arrow-base: 0;
1822
-arrow-rise: 0;
1823
-boxpointer-gap: 5px;
1824
background-color: $base_color;
1825
border-radius: 2px;
1826
box-shadow: $z-depth-2;
1827
}
1828
// IBus Candidate Popup
1830
.candidate-popup-content {
1832
padding: 8px;
1833
spacing: 0;
1834
}
1835
.candidate-index {
1837
padding: 0 4px 0 0;
1838
color: $tertiary_fg_color;
1839
.candidate-box:selected & { color: $tertiary_selected_fg_color; }
1840
}
1841
.candidate-box {
1843
transition-duration: 0s;
1844
min-height: $menuitem_size;
1845
padding: 0 8px;
1846
border-radius: 2px;
1847
&:hover { background-color: $semi_track_color; color: $fg_color; }
1848
&:active { background-color: $track_color; color: $fg_color; }
1849
&:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
1850
}
1851
.candidate-page-button-box {
1853
height: $menuitem_size;
1854
.vertical & { padding-top: 0; }
1855
.horizontal & { padding-left: 0; }
1856
}
1857
.candidate-page-button {
1859
min-width: $menuitem_size;
1860
min-height: $menuitem_size;
1861
padding: 0;
1862
}
1863
.candidate-page-button-previous { border-radius: 2px; border-right-width: 0; }
1865
.candidate-page-button-next { border-radius: 2px; }
1866
.candidate-page-button-icon { @include px-to-em(16px); }
1867
/* Auth Dialogs & Screen Shield */
1869
.framed-user-icon {
1871
background-size: contain;
1872
border: none;
1873
color: $selected_fg_color;
1874
border-radius: 2px;
1875
&:hover {
1876
border-color: $selected_fg_color;
1877
color: $selected_fg_color;
1878
}
1879
}
1880
// LOGIN DIALOG
1882
.login-dialog-banner-view {
1884
padding-top: 24px;
1885
max-width: 23em;
1886
}
1887
.login-dialog {
1889
//reset
1890
border: none;
1891
background-color: transparent;
1892
StEntry {
1894
color: $selected_fg_color;
1895
selection-background-color: $selected_track_color;
1896
selected-color: $selected_fg_color;
1897
@include entry(normal, $fc:$selected_track_color);
1898
&:focus { @include entry(focus, $fc:$selected_fg_color); }
1899
&:insensitive {
1900
@include entry(insensitive, $fc:$selected_insensitive_track_color);
1901
color: $insensitive_selected_fg_color;
1902
}
1903
}
1904
.modal-dialog-button-box { spacing: 3px; }
1906
.modal-dialog-button {
1907
padding: 0 16px;
1908
@include button(flat-normal, $tc:$secondary_selected_fg_color);
1909
&:hover,&:focus { @include button(flat-hover, $c:$selected_semi_track_color, $tc:$selected_fg_color); }
1910
&:active { @include button(flat-active, $c:$selected_track_color, $tc:$selected_fg_color); }
1911
&:insensitive { @include button(flat-insensitive, $tc:$insensitive_secondary_selected_fg_color); }
1912
&:default {
1913
@include button(normal, $c:$suggested_color, $tc:$selected_fg_color);
1914
&:hover,&:focus { @include button(hover, $c:$suggested_color, $tc:$selected_fg_color); }
1915
&:active { @include button(active, $c:$suggested_color, $tc:$selected_fg_color); }
1916
&:insensitive { @include button(insensitive, $c:$selected_insensitive_track_color, $tc:$insensitive_selected_fg_color); }
1917
}
1919
}
1920
}
1922
.login-dialog-logo-bin { padding: 24px 0px; }
1924
.login-dialog-banner { color: $secondary_selected_fg_color; }
1925
.login-dialog-button-box { spacing: 5px; }
1926
.login-dialog-message-warning { color: $warning_color; }
1927
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
1928
.login-dialog-user-selection-box {
1929
padding: 100px 0px;
1930
.login-dialog-not-listed-label {
1931
padding-left: 2px;
1932
.login-dialog-not-listed-button:focus &,
1933
.login-dialog-not-listed-button:hover & {
1934
color: $selected_fg_color;
1935
}
1936
}
1937
}
1938
.login-dialog-not-listed-label {
1939
font-size: 1em;
1940
font-weight: bold;
1941
color: $secondary_selected_fg_color;
1942
padding-top: 1em;
1943
&:hover { color: $selected_fg_color; }
1944
&:focus { background-color: $selected_semi_track_color; }
1945
}
1946
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
1948
.login-dialog-user-list {
1949
spacing: 12px;
1950
padding: .2em;
1951
width: 23em;
1952
&:expanded .login-dialog-user-list-item:focus { background-color: $selected_semi_track_color; color: $selected_fg_color; }
1953
&:expanded .login-dialog-user-list-item:hover { background-color: $selected_semi_track_color; color: $selected_fg_color; }
1954
&:expanded .login-dialog-user-list-item:active { background-color: $selected_track_color; color: $selected_fg_color; }
1955
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_fg_color; }
1956
}
1957
.login-dialog-user-list-item {
1958
border-radius: 2px;
1959
padding: .2em;
1960
color: $secondary_selected_fg_color;
1961
&:ltr { padding-right: 1em; }
1962
&:rtl { padding-left: 1em; }
1963
&:hover { background-color: $selected_semi_track_color; color: $selected_fg_color; }
1964
&:active { background-color: $selected_track_color; color: $selected_fg_color; }
1965
.login-dialog-timed-login-indicator {
1966
height: 2px;
1967
margin: 2px 0 0 0;
1968
background-color: $selected_fg_color;
1969
}
1970
&:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
1971
}
1972
.login-dialog-username,
1974
.user-widget-label {
1975
color: $selected_fg_color;
1976
@include font(title);
1977
text-align: left;
1978
padding-left: 15px;
1979
}
1980
.user-widget-label {
1981
&:ltr { padding-left: 18px; }
1982
&:rtl { padding-right: 18px; }
1983
}
1984
.login-dialog-prompt-layout {
1986
padding-top: 24px;
1987
padding-bottom: 12px;
1988
spacing: 8px;
1989
width: 23em;
1990
}
1991
.login-dialog-prompt-label {
1993
color: $tertiary_selected_fg_color;
1994
font-size: 1em;
1995
padding-top: 1em;
1996
}
1997
.login-dialog-session-list-button StIcon {
1999
icon-size: 1.25em;
2000
}
2001
.login-dialog-session-list-button {
2003
color: $secondary_selected_fg_color;
2004
&:hover,&:focus { color: $selected_fg_color; }
2005
&:active { color: $selected_fg_color; }
2006
}
2007
//SCREEN SHIELD
2009
.screen-shield-arrows {
2011
padding-bottom: 3em;
2012
}
2013
.screen-shield-arrows Gjs_Arrow {
2015
color: white;
2016
width: 80px;
2017
height: 48px;
2018
-arrow-thickness: 12px;
2019
-arrow-shadow: $z-depth-1;
2020
}
2021
.screen-shield-clock {
2023
color: white;
2024
text-shadow: $z-depth-1;
2025
font-weight: normal;
2026
text-align: center;
2027
padding-bottom: 1.5em;
2028
}
2029
.screen-shield-clock-time {
2031
@include font(display-4);
2032
text-shadow: $z-depth-1;
2033
}
2034
.screen-shield-clock-date { @include font(display-2); }
2036
.screen-shield-notifications-container {
2038
spacing: 6px;
2039
width: 30em;
2040
background-color: transparent;
2041
max-height: 500px;
2042
.summary-notification-stack-scrollview {
2043
padding-top: 0;
2044
padding-bottom: 0;
2045
}
2046
.notification,
2048
.screen-shield-notification-source {
2049
padding: 8px;
2050
border: none;
2051
background-color: $osd_bg_color;
2052
color: $selected_fg_color;
2053
border-radius: 2px;
2054
}
2055
.notification { margin-right: 16px; } //compensate for space allocated to the scrollbar
2056
}
2057
.screen-shield-notification-label {
2060
min-height: $small_size - 2px;
2061
padding: 2px 0px 0px 16px;
2062
font-weight: bold;
2063
}
2064
.screen-shield-notification-count-text {
2066
min-height: $small_size - 2px;
2067
padding: 2px 0px 0px 16px;
2068
color: $secondary_selected_fg_color;
2069
}
2070
#panel.lock-screen { background-color: $osd_bg_color; }
2072
.screen-shield-background { //just the shadow, really
2074
background: black;
2075
box-shadow: $z-depth-5;
2076
}
2077
#lockDialogGroup {
2079
background: #607D8B url("assets/noise-texture.svg");
2080
background-size: cover;
2081
}
2082
#screenShieldNotifications {
2084
StScrollBar { @extend %overview_scrollbar; }
2085
}
2086
// Looking Glass
2089
#LookingGlassDialog {
2090
background-color: $base_color;
2091
spacing: 4px;
2092
padding: 0;
2093
border: none;
2094
border-radius: 2px;
2095
box-shadow: $z-depth-4;
2096
& > #Toolbar {
2097
padding: 0 8px;
2098
border: none;
2099
border-radius: 0;
2100
background-color: rgba($base_color, 0.01);
2101
box-shadow: inset 0 -1px 0 $borders_color;
2102
}
2103
.labels { spacing: 0; }
2104
.notebook-tab {
2105
-natural-hpadding: 12px;
2106
-minimum-hpadding: 6px;
2107
font-weight: bold;
2108
color: $tertiary_fg_color;
2109
transition-duration: 0.2s;
2110
padding-left: 16px;
2111
padding-right: 16px;
2112
min-height: $medium_size;
2113
padding: 0 16px * 2;
2114
&:hover {
2115
box-shadow: inset 0 -2px 0px $track_color;
2116
color: $fg_color;
2117
text-shadow: none;
2118
}
2119
&:selected {
2120
border-bottom-width: 0;
2121
border-color: transparent;
2122
background-color: rgba($base_color, 0.01);
2123
box-shadow: inset 0 -2px 0px $selected_bg_color;
2124
color: $fg_color;
2125
text-shadow: none;
2126
}
2127
}
2128
StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
2129
StBoxLayout#ResultsArea { spacing: 4px; }
2130
}
2131
.lg-dialog {
2133
StEntry {
2134
selection-background-color: $selected_bg_color;
2135
selected-color: $selected_fg_color;
2136
}
2137
.shell-link {
2138
color: $link_color;
2139
&:hover { color: $link_color; }
2140
}
2141
}
2142
.lg-completions-text {
2144
font-size: 1em;
2145
font-style: italic;
2146
}
2147
.lg-obj-inspector-title {
2149
spacing: 4px;
2150
}
2151
.lg-obj-inspector-button {
2153
min-height: $medium_size;
2154
padding: 0 16px;
2155
border: none;
2156
border-radius: 2px;
2157
@include font(button);
2158
@include button(flat-normal);
2159
&:hover { @include button(flat-hover); }
2160
&:active { @include button(flat-active); }
2161
&:insensitive { @include button(flat-insensitive); }
2162
&:focus { @include button(flat-focus); }
2163
&:hover { border: none; }
2164
}
2165
#lookingGlassExtensions { padding: 4px; }
2167
.lg-extensions-list {
2169
padding: 4px;
2170
spacing: 6px;
2171
}
2172
.lg-extension {
2174
border: none;
2175
border-radius: 2px;
2176
padding: 4px;
2177
}
2178
.lg-extension-name {
2180
@include font(headline);
2181
}
2182
.lg-extension-meta {
2184
spacing: 6px;
2185
}
2186
#LookingGlassPropertyInspector {
2188
background: $base_color;
2189
border: none;
2190
border-radius: 2px;
2191
padding: 6px;
2192
box-shadow: $z-depth-4;
2193
}
2194