ASCII text
1
/* Buttons */
2
.button {
3
min-height: $medium-size;
4
min-width: 64px - 8px * 2;
5
padding: 0 8px;
6
border-width: 0;
7
border-radius: $corner-radius;
8
@include type(button);
9
@include button(flat-normal);
10
&:hover { @include button(flat-hover); }
11
&:active { @include button(flat-active); }
12
&:insensitive { @include button(flat-insensitive); }
13
&:focus { @include button(flat-focus); }
14
}
16
.modal-dialog-linked-button {
18
min-height: $medium-size;
19
min-width: 64px - 8px * 2;
20
margin: $container-padding;
21
padding: 0 8px;
22
margin-right: 0;
23
border-right-width: 0;
24
border-radius: $corner-radius;
25
@include type(button);
26
@include button(flat-normal);
27
&:hover { @include button(flat-hover); }
28
&:active { @include button(flat-active); }
29
&:insensitive { @include button(flat-insensitive); }
30
&:focus { @include button(flat-focus); }
31
&:first-child {
33
border-radius: $corner-radius;
34
}
35
&:last-child {
36
margin-right: $container-padding;
37
border-right-width: 0px;
38
border-radius: $corner-radius;
39
}
40
&:first-child:last-child {
41
margin-right: $container-padding;
42
border-right-width: 0px;
43
border-radius: $corner-radius;
44
}
45
}
46
/* Scrollbars */
48
StScrollView {
50
&.vfade { -st-vfade-offset: 32px; }
51
&.hfade { -st-hfade-offset: 32px; }
52
}
53
StScrollBar {
55
padding: 0;
56
StScrollView & {
58
min-width: 16px;
59
min-height: 16px;
60
}
61
StBin#trough {
63
margin: 4px;
64
border-radius: 100px;
65
background-color: $stroke-disabled;
66
}
67
StButton#vhandle, StButton#hhandle {
69
transition-duration: $duration;
70
border-radius: 100px;
71
background-color: $text-disabled;
72
//border: 4px solid transparent; //would be nice to margin or at least to transparent
73
margin: 4px;
74
&:hover { background-color: $text2; }
75
&:active { background-color: $text; }
76
}
77
}
78
%overview_scrollbar {
80
StBin#trough {
81
background-color: on(dark, stroke-disabled);
82
}
83
StButton#vhandle, StButton#hhandle {
85
background-color: on(dark, text-disabled);
86
&:hover { background-color: on(dark, text2); }
87
&:active { background-color: on(dark); }
88
}
89
}
90
/* Slider */
92
.slider {
94
height: 20px;
95
color: $primary;
96
-slider-height: 2px;
97
-slider-background-color: $stroke; //background of the trough
98
-slider-border-color: transparent; //trough border color
99
-slider-active-background-color: $primary; //active trough fill
100
-slider-active-border-color: transparent; //active trough border
101
-slider-border-width: 0;
102
-slider-handle-radius: 6px;
103
}
104
/* Check Boxes */
106
.check-box {
108
* {
109
min-height: $medium-size - 8px * 2;
110
padding: 8px 0;
111
}
112
StBoxLayout { spacing: 8px; }
113
StBin {
114
transition-duration: $duration;
115
width: 24px;
116
height: 24px;
117
padding: ($medium-size - 24px) / 2;
118
border-radius: 100px;
119
background-image: url("assets/checkbox-off.svg");
120
}
121
&:focus StBin {
122
background-image: url("assets/checkbox-off.svg");
123
}
124
&:hover StBin {
125
background-color: $overlay-hover;
126
}
127
&:active StBin {
128
transition-duration: $duration-ripple;
129
background-color: $overlay-active;
130
}
131
&:checked StBin {
132
background-image: url("assets/checkbox.svg");
133
}
134
&:focus:checked StBin {
135
background-image: url("assets/checkbox.svg");
136
}
137
&:hover:checked StBin {
138
background-color: rgba($primary, 0.08);
139
}
140
&:active:checked StBin {
141
background-color: rgba($primary, 0.2);
142
}
143
}
144
/* Switches */
146
.toggle-switch {
147
width: 40px;
148
height: 20px;
149
background-size: contain;
150
}
151
@each $v in us, intl {
153
.toggle-switch-#{$v} {
154
background-image: url("assets/toggle-off.svg");
155
&:checked { background-image: url("assets/toggle-on.svg"); }
156
}
157
}
158
/* Modal Dialogs */
160
.headline { @include type(headline6); }
162
.lightbox { background-color: black; }
163
.flashspot { background-color: white; }
164
.modal-dialog {
166
border-radius: $corner-radius;
167
color: $text;
168
background-color: $surface;
169
border: none;
170
box-shadow: $shadow-4;
171
.modal-dialog-content-box {
172
padding: 24px;
173
}
174
.run-dialog-entry { width: 20em; margin-bottom: 0; }
175
.run-dialog-error-box {
176
padding-top: 16px;
177
spacing: 6px;
178
}
179
.run-dialog-button-box { padding-top: 1em; }
180
.run-dialog-label {
181
font-size: 1em;
182
font-weight: normal;
183
color: $text2;
184
padding-bottom: .4em;
185
}
186
}
188
.mount-dialog-subject,
190
.end-session-dialog-subject { //this should be a generic header class
191
@include type(headline6);
192
}
193
/* Message Dialog */
195
.message-dialog-main-layout {
196
padding: 12px 20px 0;
197
spacing: 12px;
198
}
199
.message-dialog-content {
201
max-width: 28em;
202
spacing: 20px;
203
}
204
.message-dialog-icon {
206
min-width: 48px;
207
icon-size: 48px;
208
}
209
.message-dialog-title {
211
font-weight: bold;
212
}
213
.message-dialog-subtitle {
215
color: $text2;
216
font-weight: normal;
217
}
218
/* End Session Dialog */
220
.end-session-dialog {
221
spacing: 42px;
222
border: none;
223
}
224
.end-session-dialog-list {
226
padding-top: 20px;
227
}
228
.end-session-dialog-layout {
230
padding-left: 17px;
231
&:rtl { padding-right: 17px; }
232
}
233
.end-session-dialog-description {
235
width: 28em;
236
padding-bottom: 10px;
237
&:rtl {
238
text-align: right;
239
}
240
}
241
.end-session-dialog-warning {
243
width: 28em;
244
color: $warning;
245
padding-top: 6px;
246
&:rtl {
247
text-align: right;
248
}
249
}
250
.end-session-dialog-logout-icon {
252
//border: 2px solid #8b8b8b;
253
border-radius: 5px;
254
width: 48px;
255
height: 48px;
256
background-size: contain;
257
}
258
.end-session-dialog-shutdown-icon {
260
color: $text-disabled;
261
width: 48px;
262
height: 48px;
263
}
264
.end-session-dialog-inhibitor-layout {
266
spacing: 16px;
267
max-height: 200px;
268
padding-right: 65px;
269
padding-left: 65px;
270
}
271
.end-session-dialog-session-list,
273
.end-session-dialog-app-list {
274
spacing: 1em;
275
}
276
.end-session-dialog-list-header {
278
font-weight: bold;
279
&:rtl { text-align: right; }
280
}
281
.end-session-dialog-app-list-item,
283
.end-session-dialog-session-list-item {
284
spacing: 1em;
285
}
286
.end-session-dialog-app-list-item-name,
288
.end-session-dialog-session-list-item-name {
289
font-weight: bold;
290
}
291
.end-session-dialog-app-list-item-description {
293
color: $text2;
294
font-size: 1em;
295
}
296
/* ShellMountOperation Dialogs */
298
.shell-mount-operation-icon { icon-size: 48px; }
299
.mount-dialog {
301
spacing: 24px;
302
.message-dialog-title {
304
padding-top: 10px;
305
padding-left: 17px;
306
padding-bottom: 6px;
307
max-width: 34em;
308
}
309
.message-dialog-title:rtl {
311
padding-left: 0px;
312
padding-right: 17px;
313
}
314
.message-dialog-body {
316
padding-left: 17px;
317
width: 28em;
318
}
319
.message-dialog-body:rtl {
321
padding-left: 0px;
322
padding-right: 17px;
323
}
324
}
325
.mount-dialog-app-list {
327
max-height: 200px;
328
padding-top: 24px;
329
padding-left: 49px;
330
padding-right: 32px;
331
}
332
.mount-dialog-app-list:rtl {
334
padding-right: 49px;
335
padding-left: 32px;
336
}
337
.mount-dialog-app-list-item {
339
color: $text;
340
&:hover { color: $text; }
341
&:ltr { padding-right: 1em; }
342
&:rtl { padding-left: 1em; }
343
}
344
.mount-dialog-app-list-item-icon {
346
&:ltr { padding-right: 17px; }
347
&:rtl { padding-left: 17px; }
348
}
349
.mount-dialog-app-list-item-name {
351
font-size: 1em;
352
}
353
/* Password or Authentication Dialog */
356
.prompt-dialog {
358
//this is the width of the entire modal popup
359
width: 34em;
360
border: none;
361
.message-dialog-main-layout { spacing: 24px; padding: 10px; }
363
.message-dialog-content { spacing: 16px; }
364
.message-dialog-title { @include type(headline6); color: $text; }
365
}
366
.prompt-dialog-description:rtl {
368
text-align: right;
369
}
370
.prompt-dialog-password-box {
372
spacing: 1em;
373
padding-bottom: 1em;
374
}
375
.prompt-dialog-error-label {
377
font-size: 1em;
378
color: $error;
379
padding-bottom: 8px;
380
}
381
.prompt-dialog-info-label {
383
font-size: 1em;
384
padding-bottom: 8px;
385
}
386
.hidden {
388
color: rgba(0,0,0,0);
389
}
390
.prompt-dialog-null-label {
392
font-size: 1em;
393
padding-bottom: 8px;
394
}
395
/* Polkit Dialog */
398
.polkit-dialog-user-layout {
400
padding-left: 10px;
401
spacing: 10px;
402
&:rtl {
403
padding-left: 0px;
404
padding-right: 10px;
405
}
406
}
407
.polkit-dialog-user-root-label {
409
color: $warning;
410
}
411
.polkit-dialog-user-icon {
413
border-radius: 5px;
414
background-size: contain;
415
width: 48px;
416
height: 48px;
417
}
418
/* Audio selection dialog */
420
.audio-device-selection-dialog {
421
spacing: 30px;
422
}
423
.audio-selection-content {
425
spacing: 20px;
426
padding: 24px;
427
}
428
.audio-selection-title {
430
font-weight: bold;
431
text-align: center;
432
}
433
.audio-selection-box {
435
spacing: 20px;
436
}
437
.audio-selection-device {
439
border: none;
440
border-radius: $corner-radius;
441
&:focus { background-color: $overlay-focus; }
442
&:hover { background-color: $overlay-hover; }
443
&:active { background-color: $overlay-active; }
444
}
445
.audio-selection-device-box {
447
padding: 20px;
448
spacing: 20px;
449
}
450
.audio-selection-device-icon {
452
icon-size: 64px;
453
}
454
/* Access Dialog */
456
.access-dialog {
457
spacing: 30px;
458
}
459
/* Geolocation Dialog */
461
.geolocation-dialog {
462
spacing: 30px;
463
}
464
/* Extension Dialog */
466
.extension-dialog {
467
.message-dialog-main-layout { spacing: 24px; padding: 10px; }
468
.message-dialog-title { color: $text2; }
469
}
470
/* Inhibit-Shortcuts Dialog */
472
.inhibit-shortcuts-dialog {
473
spacing: 30px;
474
}
475
/* Network Agent Dialog */
477
.network-dialog-secret-table {
479
spacing-rows: 15px;
480
spacing-columns: 1em;
481
}
482
.keyring-dialog-control-table {
484
spacing-rows: 15px;
485
spacing-columns: 1em;
486
}
487
/* Popovers/Menus */
489
.popup-menu {
491
min-width: 200px;
492
.popup-menu-arrow { } //defined globally in the TOP BAR
494
.popup-sub-menu {
495
background-color: $entry-fill;
496
box-shadow: $shadow-0;
497
}
498
.popup-menu-content { padding: 8px 0; }
500
.popup-menu-item {
501
// min-height: $menuitem-size - 4px * 2;
502
spacing: 8px;
503
transition-duration: $duration;
504
&:ltr { padding: 0.4em 24px 0.4em 0; }
506
&:rtl { padding: 0.4em 0 0.4em 24px; }
507
&:checked {
508
background-color: $overlay-selected;
509
box-shadow: $shadow-0;
510
font-weight: normal;
511
&.selected {
512
background-color: rgba($primary, 0.4);
513
}
514
&:active {
515
background-color: rgba($primary, 0.6);
516
}
517
}
518
&.selected {
519
background-color: $overlay-hover;
520
color: $text;
521
transition-duration: 0ms;
522
}
523
&:active {
524
background-color: $overlay-active;
525
color: $text;
526
transition-duration: $duration-ripple;
527
}
528
&.selected:active { color: $text; }
529
&:insensitive { color: $text-disabled; }
530
}
531
.popup-inactive-menu-item { //all icons and other graphical elements
533
color: $text;
534
&:insensitive { color: $text-disabled; }
536
}
537
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
538
&.panel-menu {
539
-boxpointer-gap: 4px;
540
margin-bottom: 1.75em;
541
}
542
}
543
.popup-menu-ornament {
547
text-align: right;
548
width: 16px;
549
height: 16px;
550
}
551
.popup-menu-boxpointer,
552
.candidate-popup-boxpointer {
553
-arrow-border-radius: 20px; // This is necessary for the weird bug: materia-theme#296
554
-arrow-background-color: transparent;
555
-arrow-border-width: 0;
556
-arrow-border-color: transparent;
557
-arrow-base: 0;
558
-arrow-rise: 0;
559
-arrow-box-shadow: none; //dreaming. bug #689995
560
margin: 5px 8px 8px;
561
background-color: $surface;
562
border-radius: $corner-radius;
563
box-shadow: $shadow-2;
564
}
565
.popup-separator-menu-item {
567
//-margin-horizontal: 24px;
568
height: 1px; //not really the whole box
569
margin: 8px 64px - 24px;
570
background-color: $divider;
571
border-color: transparent;
572
border-bottom-width: 0;
573
border-bottom-style: none;
574
}
575
// Background menu
578
.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0; }
579
/* fallback menu
581
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
582
app menu inside the main app window itself rather than the top bar
583
*/
584
/* OSD */
587
.osd-window {
588
text-align: center;
589
font-weight: bold;
590
spacing: 1em;
591
margin: 32px;
592
min-width: 64px;
593
min-height: 64px;
594
.osd-monitor-label { @include type(headline3); }
596
.level {
597
height: 8px;
598
border-radius: 0;
599
background-color: $stroke-disabled;
600
color: $text;
601
}
602
.level-bar {
603
background-color: $primary;
604
border-radius: 0;
605
}
606
}
607
/* Pad OSD */
609
.pad-osd-window {
610
padding: 32px;
611
background-color: $scrim;
612
.pad-osd-title-box { spacing: 12px; }
614
.pad-osd-title-menu-box { spacing: 6px; }
615
}
616
.combo-box-label {
618
width: 15em;
619
}
620
/* App Switcher */
622
.switcher-popup {
623
padding: 8px;
624
spacing: 16px;
625
}
626
.osd-window,
628
.resize-popup,
629
.switcher-list {
630
@extend %osd-panel;
631
}
632
.switcher-list-item-container { spacing: 8px; }
634
.switcher-list .item-box {
636
transition-duration: $duration;
637
padding: 8px;
638
border-radius: $corner-radius;
639
}
640
.switcher-list .item-box:outlined {
642
padding: 8px;
643
border: none;
644
background-color: $stroke-disabled;
645
color: $text; // for Ubuntu session
646
}
647
.switcher-list .item-box:selected {
649
background-color: $overlay-selected;
650
color: $text;
651
}
652
.switcher-list .thumbnail-box {
654
padding: 2px;
655
spacing: 4px;
656
}
657
.switcher-list .thumbnail {
659
width: 256px;
660
}
661
.switcher-list .separator {
663
width: 1px;
664
background: $divider;
665
}
666
.switcher-arrow {
668
transition-duration: $duration;
669
border-color: rgba(0,0,0,0);
670
color: $text2;
671
&:highlighted {
672
color: $text;
673
}
674
}
675
.input-source-switcher-symbol {
677
@include type(headline3);
678
width: 96px;
679
height: 96px;
680
}
681
/* Window Cycler */
683
.cycler-highlight { border: 4px solid $primary; }
684
/* Workspace Switcher */
686
.workspace-switcher-group { padding: 8px; }
687
.workspace-switcher-container {
689
@extend %osd-panel;
690
}
691
.workspace-switcher {
693
background: transparent;
694
border: 0px;
695
border-radius: 0px;
696
padding: 0px;
697
spacing: 8px;
698
}
699
.ws-switcher-active-up, .ws-switcher-active-down {
701
height: 48px;
702
background-color: $primary;
703
color: on($primary);
704
background-size: 32px;
705
border-radius: $corner-radius;
706
}
707
.ws-switcher-box {
709
height: 48px;
710
border: none;
711
background: $stroke-disabled;
712
border-radius: $corner-radius;
713
}
714
%osd-panel {
716
color: $text;
717
background-color: $surface;
718
border: none;
719
box-shadow: $shadow-4;
720
border-radius: $corner-radius;
721
padding: 12px;
722
}
723
/* Tiled window previews */
725
.tile-preview {
726
background-color: rgba(on(dark, primary), 0.3);
727
border: 1px solid on(dark, primary);
728
}
729
.tile-preview-left.on-primary {
731
border-radius: 0;
732
}
733
.tile-preview-right.on-primary {
735
border-radius: 0;
736
}
737
.tile-preview-left.tile-preview-right.on-primary {
739
border-radius: 0;
740
}
741
/* TOP BAR */
743
#panel {
745
background-color: $scrim;
746
/* transition from solid to transparent */
747
transition-duration: $duration-panel;
748
font-weight: bold;
749
height: $menuitem-size;
750
&:overview,
752
&.unlock-screen,
753
&.login-screen,
754
&.lock-screen {
755
background-color: transparent;
756
}
757
#panelLeft, #panelCenter { // spacing between activities<>app menu and such
759
spacing: 0;
760
}
761
.panel-corner {
763
-panel-corner-radius: 0;
764
-panel-corner-background-color: $scrim;
765
-panel-corner-border-width: 2px;
766
-panel-corner-border-color: transparent;
767
&:active, &:overview, &:focus {
769
-panel-corner-border-color: on($scrim);
770
}
771
&.lock-screen, &.login-screen, &.unlock-screen {
773
-panel-corner-radius: 0;
774
-panel-corner-background-color: transparent;
775
-panel-corner-border-color: transparent;
776
}
777
}
778
.panel-button {
780
-natural-hpadding: $panel-button-hpadding;
781
-minimum-hpadding: $panel-button-hpadding / 2;
782
font-weight: bold;
783
color: on($scrim, text2);
784
text-shadow: none;
785
transition-duration: $duration;
786
.app-menu-icon {
788
-st-icon-style: symbolic;
789
margin-left: 4px;
790
margin-right: 4px;
791
//dimensions of the icon are hardcoded
792
}
793
.system-status-icon,
795
.app-menu-icon > StIcon,
796
.popup-menu-arrow {
797
icon-shadow: none;
798
}
799
&:hover {
801
color: on($scrim);
802
text-shadow: none;
803
.system-status-icon,
805
.app-menu-icon > StIcon,
806
.popup-menu-arrow {
807
icon-shadow: none;
808
}
809
}
810
&:active, &:overview, &:focus, &:checked {
812
// Trick due to St limitations. It needs a background to draw
813
// a box-shadow
814
background-color: rgba($scrim, 0.01);
815
box-shadow: inset 0 -2px 0px on($scrim);
816
color: on($scrim);
817
& > .system-status-icon { icon-shadow: none; }
819
}
820
.system-status-icon { icon-size: em(16px); padding: 0 4px; }
822
.unlock-screen &,
823
.login-screen &,
824
.lock-screen & {
825
color: on($scrim, text2);
826
&:focus, &:hover, &:active { color: on($scrim); }
827
}
828
}
829
.panel-status-indicators-box,
831
.panel-status-menu-box {
832
spacing: 2px;
833
}
834
// spacing between power icon and (optional) percentage label
836
.power-status.panel-status-indicators-box {
837
spacing: 0;
838
}
839
.screencast-indicator { color: $warning; }
841
&.solid {
843
background-color: $panel;
844
/* transition from transparent to solid */
845
transition-duration: $duration-panel;
846
background-gradient-direction: none; // for Ubuntu session
847
text-shadow: none; // for Ubuntu session
848
&:overview { background-color: transparent; } // for Ubuntu session
850
.panel-corner {
852
-panel-corner-background-color: $panel;
853
}
854
.panel-button {
856
color: on($panel, text2);
857
text-shadow: none;
858
&:hover, &:active, &:overview, &:focus, &:checked {
860
color: on($panel);
861
}
862
}
863
.system-status-icon,
865
.app-menu-icon > StIcon,
866
.popup-menu-arrow {
867
icon-shadow: none;
868
}
869
}
870
}
871
// calendar popover
873
#calendarArea {
874
padding: 8px 16px;
875
}
876
.calendar {
878
margin-bottom: 0;
879
}
880
.calendar,
882
.datemenu-today-button,
883
.datemenu-displays-box,
884
.message-list-sections {
885
margin: 0 8px;
886
}
887
.datemenu-calendar-column { spacing: 8px; }
889
.datemenu-displays-section { padding-bottom: 0; }
890
.datemenu-displays-box { spacing: 8px; }
891
.datemenu-calendar-column {
893
border: 0 solid $divider;
894
&:ltr { border-left-width: 0; }
895
&:rtl { border-right-width: 0; }
896
}
897
.datemenu-today-button,
899
.world-clocks-button,
900
.weather-button,
901
.events-section-title {
902
min-height: $menuitem-size - 4px * 2;
903
padding: 4px 8px;
904
border-radius: $corner-radius;
905
}
906
.datemenu-today-button {
908
min-height: $menuitem-size * 2 - 4px * 2;
909
}
910
.message-list-section-list:ltr {
912
padding-left: 0;
913
}
914
.message-list-section-list:rtl {
916
padding-right: 0;
917
}
918
.datemenu-today-button,
920
.world-clocks-button,
921
.weather-button,
922
.events-section-title {
923
transition-duration: $duration;
924
&:hover,&:focus { color: $text; background-color: $overlay-hover; }
925
&:active {
926
transition-duration: $duration-ripple;
927
color: $text;
928
background-color: $overlay-active;
929
}
930
}
931
.datemenu-today-button .day-label {
933
}
934
.datemenu-today-button .date-label {
936
@include type(headline5);
937
}
938
.world-clocks-header,
940
.weather-header,
941
.events-section-title {
942
color: $text2;
943
font-weight: bold;
944
}
945
.world-clocks-grid {
947
spacing-rows: 0.4em;
948
}
949
.weather-box {
951
spacing: 0.4em;
952
}
953
.calendar-month-label {
955
transition-duration: $duration;
956
height: $menuitem-size - 6px * 2;
957
margin: 2px;
958
padding: 6px 16px;
959
border-radius: $corner-radius;
960
color: $text;
961
font-weight: bold;
962
text-align: center;
963
&:focus { background-color: $overlay-focus; }
964
}
965
.pager-button {
967
transition-duration: $duration;
968
width: $menuitem-size;
969
height: $menuitem-size;
970
margin: 2px;
971
border-radius: 100px;
972
background-color: transparent;
973
color: $text;
974
&:hover, &:focus { background-color: $overlay-hover; }
975
&:active { background-color: $overlay-active; transition-duration: $duration-ripple; }
976
}
977
.calendar-change-month-back { //arrow back
979
background-image: url("assets/calendar-arrow-left.svg");
980
&:rtl { background-image: url("assets/calendar-arrow-right.svg"); }
981
}
982
.calendar-change-month-forward { //arrow foreward
983
background-image: url("assets/calendar-arrow-right.svg");
984
&:rtl { background-image: url("assets/calendar-arrow-left.svg"); }
985
}
986
.calendar-day-base {
988
transition-duration: $duration;
989
@include type(caption);
990
text-align: center;
991
width: $menuitem-size; height: $menuitem-size;
992
padding: 0;
993
margin: 2px;
994
border-radius: 100px;
995
&:hover,&:focus { background-color: $overlay-hover; }
996
&:active {
997
transition-duration: $duration-ripple;
998
color: inherit;
999
background-color: $overlay-active;
1000
border-color: transparent; //avoid jumparound due to today
1001
}
1002
&:selected {
1003
color: $text;
1004
background-color: $overlay-selected;
1005
border-color: transparent; //avoid jumparound due to today
1006
}
1007
&.calendar-day-heading { //day of week heading
1008
width: $menuitem-size; height: $menuitem-size - 7px;
1009
margin-top: 2px;
1010
padding: 7px 0 0;
1011
border-radius: 100px;
1012
background-color: transparent;
1013
color: $text-disabled;
1014
@include type(caption);
1015
font-weight: bold;
1016
text-align: center;
1017
}
1018
}
1019
.calendar-day { //border collapse hack - see calendar.js
1020
border-width: 0;
1021
}
1022
.calendar-day-top { border-top-width: 0; }
1023
.calendar-day-left { border-left-width: 0; }
1024
.calendar-work-day {
1025
}
1027
.calendar-nonwork-day {
1028
color: $text;
1029
}
1030
.calendar-today {
1031
font-weight: bold !important;
1032
//color: $text;
1033
//background-color: transparent;
1034
border: none;
1035
}
1036
.calendar-day-with-events {
1037
color: $primary;
1038
font-weight: normal;
1039
text-decoration: underline;
1040
background-image: none;
1041
}
1042
.calendar-other-month-day {
1043
color: $text2-disabled;
1044
}
1045
.calendar-week-number {
1046
width: $menuitem-size; height: $menuitem-size - 7px;
1047
margin: 2px;
1048
padding: 7px 0 0;
1049
border-radius: 100px;
1050
background-color: transparent;
1051
color: $text-disabled;
1052
font-size: inherit;
1053
font-weight: bold;
1054
text-align: center;
1055
}
1056
/* Message list */
1058
.message-list {
1059
width: 420px;
1060
}
1061
.message-list-clear-button.button {
1063
background-color: transparent;
1064
&:focus { background-color: $primary-overlay-focus; }
1065
&:hover { background-color: $primary-overlay-hover; }
1066
&:active { background-color: $primary-overlay-active; }
1067
margin: 8px 8px 0;
1068
}
1069
.message-list-sections {
1071
spacing: 8px;
1072
}
1073
.message-list-section,
1075
.message-list-section-list {
1076
spacing: 8px;
1077
}
1078
.message {
1080
transition-duration: $duration;
1081
min-height: $menuitem-size * 2;
1082
background-color: transparent;
1083
&:hover,&:focus { background-color: $overlay-hover; }
1084
&:active {
1085
transition-duration: $duration-ripple;
1086
background-color: $overlay-active;
1087
}
1088
border-radius: $corner-radius;
1089
}
1090
.message-icon-bin {
1092
padding: 8px 0px 8px 8px;
1093
&:rtl { padding: 8px 8px 8px 0px; }
1094
}
1095
.message-icon-bin > StIcon {
1097
color: $text;
1098
icon-size: em(16px);
1099
-st-icon-style: requested;
1100
margin: 4px 0px 4px 4px;
1101
&:rtl { margin: 4px 4px 4px 0px; }
1102
}
1103
.message-secondary-bin {
1105
padding: 0 8px;
1106
}
1107
.message-secondary-bin > .event-time {
1109
min-height: $small-size - 2px;
1110
padding-top: 2px;
1111
color: $text2;
1112
font-size: 1em;
1113
/* HACK: the label should be baseline-aligned with a 1em label,
1114
fake this with some bottom padding */
1115
padding-bottom: 0;
1116
}
1117
.message-secondary-bin > StIcon {
1119
icon-size: em(16px);
1120
}
1121
.message-title {
1123
min-height: $small-size - 2px;
1124
padding-top: 2px;
1125
color: $text;
1126
font-weight: bold;
1127
font-size: 1em;
1128
}
1129
.message-content {
1131
min-height: $menuitem-size * 2 - 8px * 2;
1132
padding: 8px;
1133
color: $text2;
1134
font-size: 1em;
1135
}
1136
.message-content * > StIcon {
1138
transition-duration: $duration;
1139
icon-size: 16px;
1140
border-radius: 16px;
1141
padding: ($small-size - 16px) / 2;
1142
color: $text2;
1143
}
1144
/* FIXME: how do you do this in sass? */
1146
.message-content *:hover > StIcon,
1147
.message-content *:focus > StIcon {
1148
color: $text;
1149
background-color: $overlay-hover;
1150
}
1151
.message-content *:active > StIcon {
1153
transition-duration: $duration-ripple;
1154
color: $text;
1155
background-color: $overlay-active;
1156
}
1157
.message-media-control {
1159
transition-duration: $duration;
1160
margin: 16px 0;
1161
padding: 8px;
1162
border-radius: 100px;
1163
color: $text2;
1164
&:hover,&:focus { color: $text; background-color: $overlay-hover; }
1165
&:active { color: $text; background-color: $overlay-active; transition-duration: $duration-ripple; }
1166
&:insensitive { color: $text2-disabled; }
1167
&:last-child:ltr { margin-right: 16px; padding-right: 8px; }
1169
&:last-child:rtl { margin-left: 16px; padding-left: 8px; }
1170
}
1171
.media-message-cover-icon {
1173
icon-size: 32px !important;
1174
margin: 8px 0px 8px 4px !important;
1175
&:rtl { margin: 8px 4px 8px 0px !important; }
1176
&.fallback {
1177
icon-size: 16px !important;
1178
padding: 8px;
1179
border: none;
1180
border-radius: $corner-radius;
1181
background-color: $stroke-disabled;
1182
color: $text-disabled;
1183
}
1184
}
1185
// a little unstructured mess:
1188
.system-switch-user-submenu-icon.user-icon {
1190
icon-size: 20px;
1191
padding: 0 2px;
1192
}
1193
.system-switch-user-submenu-icon.default-icon {
1194
icon-size: 16px;
1195
padding: 0 4px;
1196
}
1197
#appMenu {
1199
spinner-image: url("process-working.svg");
1200
spacing: 4px;
1201
.label-shadow { color: transparent; }
1203
}
1204
.aggregate-menu {
1206
min-width: 280px;
1207
.popup-menu-icon { padding: 0 4px; }
1208
.popup-sub-menu .popup-menu-item > :first-child {
1209
&:ltr { /* 8px spacing + 2*4px padding */
1210
padding-left: 16px; margin-left: em(16px); }
1211
&:rtl { /* 8px spacing + 2*4px padding */
1212
padding-right: 16px; margin-right: em(16px); }
1213
}
1214
}
1215
.system-menu-action {
1217
color: $text2;
1218
border-radius: 100px; /* wish we could do 50% */
1219
padding: ($large-size - 16px) / 2;
1220
border: none;
1221
transition-duration: $duration;
1222
&:hover, &:focus {
1224
background-color: $overlay-hover;
1225
color: $text;
1226
border: none;
1227
padding: ($large-size - 16px) / 2;
1228
}
1229
&:active { background-color: $overlay-active; color: $text; transition-duration: $duration-ripple; }
1230
& > StIcon { icon-size: 16px; }
1232
}
1233
//Activities Ripples
1235
.ripple-box {
1236
width: 48px;
1237
height: 48px;
1238
border-radius: 0 0 48px 0;
1239
background-color: on(dark, stroke);
1240
background-image: none;
1241
background-size: auto;
1242
}
1243
.ripple-box:rtl {
1245
border-radius: 0 0 0 48px;
1246
background-image: none;
1247
}
1248
// not really top bar only
1250
.popup-menu-arrow { width: 16px; height: 16px; }
1251
.popup-menu-icon { icon-size: em(16px); }
1252
//close buttons
1254
.window-close {
1256
// FIXME: unless disable the transition, button will distort when hovering
1257
// transition-duration: $duration;
1258
height: $medium-size;
1259
width: $medium-size;
1260
-shell-close-overlap: $medium-size / 2;
1261
-st-background-image-shadow: $shadow-1;
1262
background-image: url("assets/window-close.svg");
1263
background-size: $medium-size;
1264
&:hover {
1266
-st-background-image-shadow: $shadow-2;
1267
background-image: url("assets/window-close.svg");
1268
}
1269
&:active {
1270
// transition-duration: $duration-ripple;
1271
background-image: url("assets/window-close-active.svg");
1272
}
1273
// For backward compatibility of 3.26.0
1275
&:rtl { -st-background-image-shadow: $shadow-1; }
1276
&:rtl:hover { -st-background-image-shadow: $shadow-2; }
1277
}
1278
/* NETWORK DIALOGS */
1280
.nm-dialog {
1282
max-height: 34em;
1283
min-height: 31em;
1284
min-width: 32em;
1285
}
1286
.nm-dialog-content {
1288
spacing: 20px;
1289
padding: 24px;
1290
}
1291
.nm-dialog-header-hbox { spacing: 10px; }
1292
.nm-dialog-airplane-box { spacing: 12px; }
1293
.nm-dialog-airplane-headline {
1295
font-weight: bold;
1296
text-align: center;
1297
}
1298
.nm-dialog-airplane-text { color: $text; }
1300
.nm-dialog-header-icon { icon-size: 32px; }
1301
.nm-dialog-scroll-view { border: none; }
1302
.nm-dialog-header { @include type(headline6); }
1303
.nm-dialog-item {
1305
transition-duration: $duration;
1306
font-size: 1em;
1307
border-bottom: none;
1308
border-radius: $corner-radius;
1309
padding: 12px;
1310
spacing: 20px;
1311
&:hover, &:focus { background-color: $overlay-hover; }
1312
&:active {
1313
transition-duration: $duration-ripple;
1314
background-color: $overlay-active;
1315
}
1316
}
1317
.nm-dialog-item:selected {
1319
background-color: $overlay-selected;
1320
color: $text;
1321
}
1322
.nm-dialog-icons { spacing: .5em; }
1324
.nm-dialog-icon { icon-size: 16px; }
1325
.no-networks-label { color: $text-disabled; }
1326
.no-networks-box { spacing: 12px; }
1327
/* OVERVIEW */
1329
#overview {
1331
spacing: 24px; //
1332
StScrollBar { @extend %overview_scrollbar; }
1333
}
1334
.overview-controls {
1336
padding-bottom: 32px;
1337
}
1338
.window-picker { //container around window thumbnails
1340
-horizontal-spacing: 16px;
1341
-vertical-spacing: 16px;
1342
padding: 0 16px 32px;
1343
&.external-monitor { padding: 16px; }
1345
}
1346
.window-clone-border {
1348
border: 4px solid on(dark, stroke);
1349
border-radius: $corner-radius;
1350
// For window decorations with round corners we can't match
1351
// the exact shape when the window is scaled. So apply a shadow
1352
// to fix that case
1353
box-shadow: inset 0 0 0 1px on(dark, stroke);
1354
}
1355
.window-caption {
1356
spacing: 25px;
1357
color: on($scrim);
1358
background-color: $scrim;
1359
border-radius: $corner-radius;
1360
padding: 4px 8px;
1361
}
1362
//search entry
1364
.search-entry {
1365
width: 320px - 8px * 2;
1366
padding: 0 8px;
1367
border-radius: $corner-radius $corner-radius 0 0;
1368
color: on(dark, text-disabled);
1369
selection-background-color: on(dark, stroke);
1370
selected-color: on(dark);
1371
@include entry(normal,$fc:on(dark, stroke));
1372
&:hover { @include entry(hover,$fc:on(dark, stroke)); }
1373
&:focus {
1374
@include entry(focus,$fc:on(dark));
1375
padding: 0 8px;
1376
border-width: 0;
1377
color: on(dark);
1378
}
1379
.search-entry-icon { icon-size: 16px; padding: 0 0; color: on(dark, text2); }
1381
&:hover, &:focus {
1383
.search-entry-icon { color: on(dark); }
1384
}
1385
}
1386
//search results
1388
#searchResultsBin {
1390
max-width: 1000px;
1391
}
1392
#searchResultsContent {
1394
padding-left: 20px;
1395
padding-right: 20px;
1396
spacing: 16px;
1397
}
1398
.search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
1400
.search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container
1401
.search-statustext { // "no results"
1402
@extend %status_text;
1403
}
1404
.list-search-results { spacing: 3px; }
1405
.search-section-separator { height: 1px; background-color: on(dark, divider); }
1407
.list-search-result-content { spacing: 30px; }
1409
.list-search-result-title { @include type(subtitle1); color: on(dark); spacing: 12px; }
1410
.list-search-result-description { color: on(dark, text2); }
1411
.list-search-provider-details { width: 150px; color: on(dark, text2); margin-top: 0.24em; }
1412
.list-search-provider-content { spacing: 20px; }
1413
.search-provider-icon { padding: 15px; }
1414
/* DASHBOARD */
1417
#dash {
1419
transition-duration: $duration-panel;
1420
font-size: 1em;
1421
color: on(dark);
1422
background-color: on(dark, fill);
1423
padding: 3px 0;
1424
border: none;
1425
border-left: 0px;
1426
border-radius: 0px $corner-radius $corner-radius 0px;
1427
&:rtl {
1429
border-radius: $corner-radius 0 0 $corner-radius;
1430
}
1431
.placeholder {
1433
background-image: url("assets/dash-placeholder.svg");
1434
background-size: contain;
1435
height: 24px;
1436
}
1437
.empty-dash-drop-target {
1439
width: 24px;
1440
height: 24px;
1441
}
1442
}
1444
.dash-item-container > StWidget {
1446
padding: 3px 6px;
1447
}
1448
.dash-label { //osd tooltip
1450
// min-height: 32px - 6px * 2;
1451
border-radius: $corner-radius;
1452
padding: 7px 8px;
1453
color: $text;
1454
background-color: $surface;
1455
box-shadow: $shadow-2;
1456
text-align: center;
1457
-x-offset: 8px;
1458
}
1459
/* App Vault/Grid */
1461
.icon-grid {
1462
spacing: 30px;
1463
-shell-grid-horizontal-item-size: 136px;
1464
-shell-grid-vertical-item-size: 136px;
1465
.overview-icon { icon-size: 96px; }
1467
}
1468
//.app-display { spacing: 20px; }
1469
.system-action-icon {
1471
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); // FIXME: this should really have a highlight
1472
background-color: $grey_900;
1473
color: $white;
1474
border-radius: 99px;
1475
icon-size: 48px;
1476
}
1477
.app-view-controls { //favorties | all toggle container
1479
width: 320px;
1480
padding-bottom: 32px;
1481
}
1482
.app-view-control { //favorties | all toggle button
1483
padding: 0 8px;
1484
font-weight: bold;
1485
color: on(dark, text2);
1486
&:hover {
1487
color: on(dark);
1488
background-color: $inverse-overlay-hover !important;
1489
}
1490
&:active {
1491
color: on(dark);
1492
background-color: $inverse-overlay-active !important;
1493
}
1494
&:checked {
1495
color: on(dark);
1496
background-color: rgba($scrim, 0.01) !important;
1497
box-shadow: inset 0 2px 0 on(dark);
1498
}
1499
&:first-child {
1500
border-right-width: 0;
1501
border-radius: $corner-radius;
1502
&:checked { border-radius: 0; }
1503
}
1504
&:last-child {
1505
border-radius: $corner-radius;
1506
&:checked { border-radius: 0; }
1507
}
1508
}
1509
//Icon tile
1511
.search-provider-icon,
1512
.list-search-result {
1513
@extend %icon_tile;
1514
&:focus, &:selected, &:hover {
1515
background-color: $inverse-overlay-hover;
1516
transition-duration: 0ms;
1517
}
1518
&:active, &:checked {
1519
background-color: $inverse-overlay-active;
1520
transition-duration: $duration-ripple;
1521
}
1522
}
1523
.app-well-app,
1524
.app-well-app.app-folder,
1525
.show-apps,
1526
.grid-search-result {
1527
& .overview-icon {
1528
@extend %icon_tile;
1529
}
1530
&:hover .overview-icon,
1531
&:focus .overview-icon,
1532
&:selected .overview-icon {
1533
background-color: $inverse-overlay-hover;
1534
transition-duration: 0ms;
1535
border-image: none;
1536
background-image: none;
1537
}
1538
&:active .overview-icon,
1539
&:checked .overview-icon {
1540
background-color: $inverse-overlay-active;
1541
box-shadow: $shadow-0;
1542
transition-duration: $duration-ripple;
1543
}
1544
}
1546
.app-well-app-running-dot { //running apps indicator
1548
width: 32px; height: 2px;
1549
background-color: on(dark);
1550
margin-bottom: 0;
1551
}
1552
%icon_tile {
1554
color: on(dark);
1555
border-radius: $corner-radius;
1556
padding: 6px;
1557
border: none;
1558
transition-duration: $duration;
1559
text-align: center;
1560
}
1561
.app-well-app.app-folder > .overview-icon {
1563
background-color: on(dark, fill);
1564
}
1565
.show-apps .show-apps-icon {
1567
color: on(dark, text2);
1568
}
1569
.show-apps:hover .show-apps-icon,
1571
.show-apps:active .show-apps-icon,
1572
.show-apps:checked .show-apps-icon,
1573
.show-apps:focus .show-apps-icon {
1574
color: on(dark);
1575
transition-duration: $duration;
1576
}
1577
// Collections
1580
.app-folder-popup { //expanded collection
1581
-arrow-border-radius: $corner-radius;
1582
-arrow-background-color: on(dark, fill);
1583
-arrow-base: 24px;
1584
-arrow-rise: 12px;
1585
}
1586
.app-folder-popup-bin { padding: 5px; }
1587
.app-folder-icon {
1588
padding: 5px;
1589
spacing-rows: 5px;
1590
spacing-columns: 5px;
1591
}
1592
.page-indicator {
1594
padding: 15px 20px;
1595
.page-indicator-icon {
1597
width: 12px;
1598
height: 12px;
1599
border-radius: 12px;
1600
background-image: none;
1601
background-color: on(dark, text2-disabled);
1602
transition-duration: $duration;
1603
}
1604
&:hover .page-indicator-icon {
1605
background-image: none;
1606
background-color: on(dark, text-disabled);
1607
}
1608
&:active .page-indicator-icon {
1609
background-image: none;
1610
background-color: on(dark, text2);
1611
}
1612
&:checked .page-indicator-icon {
1613
background-image: none;
1614
background-color: on(dark);
1615
transition-duration: 0ms;
1616
}
1617
&:checked:active { background-image: none; }
1618
}
1619
.no-frequent-applications-label { @extend %status_text; }
1621
.app-well-app > .overview-icon.overview-icon-with-label,
1623
.grid-search-result .overview-icon.overview-icon-with-label {
1624
padding: 10px 8px 5px 8px;
1625
spacing: 4px;
1626
}
1627
// Workspace pager
1629
.workspace-thumbnails { //container ala dash
1630
@extend %overview-panel;
1631
visible-width: 32px; //amount visible before hover
1632
spacing: 12px;
1633
padding: 12px;
1634
border-radius: $corner-radius 0 0 $corner-radius;
1635
//border-width: 0; //fixme: can't have non unoform borders :(
1636
&:rtl { border-radius: 0 $corner-radius $corner-radius 0;}
1637
.placeholder {
1639
background-image: url("assets/dash-placeholder.svg");
1640
background-size: contain;
1641
height: 24px;
1642
}
1643
}
1644
.workspace-thumbnail-indicator {
1645
border: 0 solid on(dark);
1646
border-left-width: 2px;
1647
padding: 6px 10px;
1648
border-radius: 0;
1649
}
1650
//Some hacks I don't even
1652
.search-display > StBoxLayout,
1653
.all-apps,
1654
.frequent-apps > StBoxLayout {
1655
// horizontal padding to make sure scrollbars or dash don't overlap content
1656
padding: 0px 88px 10px 88px;
1657
}
1658
%overview-panel {
1660
transition-duration: $duration-panel;
1661
color: on(dark);
1662
background-color: on(dark, fill);
1663
border: none;
1664
}
1665
%status_text {
1667
@include type(headline3);
1668
color: on(dark, text-disabled);
1669
}
1670
/* NOTIFICATIONS & MESSAGE TRAY */
1672
.url-highlighter { link-color: $primary; }
1674
// Banners
1676
.notification-banner {
1677
font-size: 1em;
1678
width: 34em;
1679
min-height: $menuitem-size * 2;
1680
margin: 5px;
1681
border-radius: $corner-radius;
1682
color: $text;
1683
background-color: $surface;
1684
border: none;
1685
box-shadow: $shadow-2;
1686
&:hover { background-color: $surface; }
1687
&:focus { background-color: $surface; }
1688
.notification-icon { padding: 5px; }
1690
.notification-content { padding: 5px; spacing: 5px; }
1691
.secondary-icon { icon-size: em(16px); }
1692
.notification-actions {
1693
background-color: transparent;
1694
padding-top: 0;
1695
padding: $container-padding;
1696
spacing: $container-padding;
1697
}
1698
.notification-button {
1699
transition-duration: $duration;
1700
min-height: $medium-size;
1701
padding: 0 8px;
1702
border-radius: $corner-radius;
1703
background-color: transparent;
1704
color: $primary;
1705
font-weight: 500;
1706
&:first-child { border-radius: $corner-radius; }
1707
&:last-child { border-radius: $corner-radius; }
1708
&:focus { background-color: $primary-overlay-focus; }
1709
&:hover { background-color: $primary-overlay-hover; }
1710
&:active {
1711
transition-duration: $duration-ripple;
1712
background-color: $primary-overlay-active;
1713
}
1714
}
1715
}
1716
.summary-source-counter {
1717
font-size: 1em;
1718
font-weight: bold;
1719
height: 1.6em; width: 1.6em;
1720
-shell-counter-overlap-x: 3px;
1721
-shell-counter-overlap-y: 3px;
1722
background-color: $primary;
1723
color: on($primary);
1724
border: 2px solid on($primary);
1725
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
1726
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
1727
}
1728
.secondary-icon { icon-size: em(16px); }
1730
//chat bubbles
1732
.chat-body { spacing: 5px; }
1733
.chat-response { margin: 5px; }
1734
.chat-log-message { color: $text; }
1735
.chat-new-group { padding-top: 1em; }
1736
.chat-received {
1737
padding-left: 4px;
1738
&:rtl { padding-left: 0px; padding-right: 4px; }
1739
}
1740
.chat-sent {
1741
padding-left: 18pt;
1742
color: $text2;
1743
&:rtl { padding-left: 0; padding-right: 18pt; }
1744
}
1745
.chat-meta-message {
1746
padding-left: 4px;
1747
@include type(caption);
1748
color: $text2;
1749
&:rtl { padding-left: 0; padding-right: 4px; }
1750
}
1751
//hotplug
1753
.hotplug-transient-box {
1754
spacing: 6px;
1755
padding: 2px 72px 2px 12px;
1756
}
1757
.hotplug-notification-item {
1758
padding: 2px 10px;
1759
&:focus { padding: 1px 71px 1px 11px; }
1760
}
1761
.hotplug-notification-item-icon {
1763
icon-size: 24px;
1764
padding: 2px 5px;
1765
}
1766
.hotplug-resident-box { spacing: 8px; }
1768
.hotplug-resident-mount {
1770
transition-duration: $duration;
1771
spacing: 8px;
1772
border-radius: $corner-radius;
1773
&:hover { background-color: $overlay-hover; }
1774
&:active {
1775
transition-duration: $duration-ripple;
1776
background-color: $overlay-active;
1777
}
1778
}
1779
.hotplug-resident-mount-label {
1781
color: inherit;
1782
padding-left: 6px;
1783
}
1784
.hotplug-resident-mount-icon {
1786
icon-size: 24px;
1787
padding-left: 6px;
1788
}
1789
.hotplug-resident-eject-icon {
1791
icon-size: 16px;
1792
}
1793
.hotplug-resident-eject-button {
1795
padding: 7px;
1796
border-radius: $corner-radius;
1797
color: $text;
1798
}
1799
/* Eeeky things */
1801
//magnifier
1803
.magnifier-zoom-region {
1805
border: 2px solid $primary;
1806
&.full-screen { border-width: 0; }
1807
}
1808
//Keyboard
1810
/* On-screen Keyboard */
1811
.word-suggestions {
1812
@include type(subtitle1);
1813
spacing: 12px;
1814
min-height: 20pt;
1815
}
1816
#keyboard {
1818
background-color: $scrim-alt;
1819
}
1820
.key-container {
1822
padding: 4px;
1823
spacing: 4px;
1824
}
1825
.keyboard-key {
1827
min-height: 1.2em;
1828
min-width: 1.2em;
1829
font-size: 2em;
1830
font-weight: 500;
1831
border-radius: $corner-radius;
1832
border: none;
1833
@include button(normal);
1834
&:focus { @include button(focus); }
1835
&:hover,&:checked { @include button(hover); }
1836
&:active { @include button(active);}
1837
&:grayed { //FIXME
1838
background-color: $scrim-alt;
1839
color: on($scrim-alt);
1840
border-color: $scrim-alt;
1841
}
1842
&.default-key {
1843
border-color: transparent;
1844
background-color: $surface;
1845
background-size: 24px;
1846
&:active { background-color: mix($text, $surface, percentage(0.2)); }
1847
}
1848
&.enter-key {
1849
border-color: transparent;
1850
background-color: $primary;
1851
background-image: url("assets/key-enter.svg");
1852
&:active { background-color: mix(on($primary), $primary, percentage(0.2)); }
1853
}
1854
&.shift-key-lowercase {
1855
background-image: url("assets/key-shift.svg");
1856
}
1857
&.shift-key-uppercase {
1858
background-image: url("assets/key-shift-uppercase.svg");
1859
}
1860
&.shift-key-uppercase:latched {
1861
background-image: url("assets/key-shift-latched-uppercase.svg");
1862
}
1863
&.hide-key {
1864
background-image: url("assets/key-hide.svg");
1865
}
1866
&.layout-key {
1867
background-image: url("assets/key-layout.svg");
1868
}
1869
}
1870
.keyboard-subkeys { //long press on a key popup
1872
color: inherit;
1873
padding: 5px;
1874
-arrow-border-radius: 0;
1875
-arrow-background-color: transparent;
1876
-arrow-border-width: 0;
1877
-arrow-border-color: transparent;
1878
-arrow-base: 0;
1879
-arrow-rise: 0;
1880
-boxpointer-gap: 5px;
1881
background-color: $surface;
1882
border-radius: $corner-radius;
1883
box-shadow: $shadow-2;
1884
}
1885
// IBus Candidate Popup
1887
.candidate-popup-content {
1889
padding: 8px;
1890
spacing: 0;
1891
}
1892
.candidate-index {
1894
padding: 0 4px 0 0;
1895
color: $text2;
1896
}
1897
.candidate-box {
1899
transition-duration: $duration;
1900
min-height: $menuitem-size;
1901
padding: 0 8px;
1902
border-radius: $corner-radius;
1903
&:hover { background-color: $overlay-hover; color: $text; transition-duration: 0ms; }
1904
&:active { background-color: $overlay-active; color: $text; transition-duration: $duration-ripple; }
1905
&:selected { background-color: $overlay-selected; color: $text; transition-duration: 0ms; }
1906
}
1907
.candidate-page-button-box {
1909
height: $menuitem-size;
1910
.vertical & { padding-top: 0; }
1911
.horizontal & { padding-left: 0; }
1912
}
1913
.candidate-page-button {
1915
min-width: $menuitem-size;
1916
min-height: $menuitem-size;
1917
padding: 0;
1918
}
1919
.candidate-page-button-previous { border-radius: $corner-radius; border-right-width: 0; }
1921
.candidate-page-button-next { border-radius: $corner-radius; }
1922
.candidate-page-button-icon { icon-size: em(16px); }
1923
/* Auth Dialogs & Screen Shield */
1925
.framed-user-icon {
1927
background-size: contain;
1928
border: none;
1929
color: on($os-background);
1930
border-radius: $corner-radius;
1931
&:hover {
1932
border-color: on($os-background);
1933
color: on($os-background);
1934
}
1935
}
1936
// LOGIN DIALOG
1938
.login-dialog-banner-view {
1940
padding-top: 24px;
1941
max-width: 23em;
1942
}
1943
.login-dialog {
1945
//reset
1946
border: none;
1947
background-color: transparent;
1948
StEntry {
1950
color: on($os-background);
1951
selection-background-color: on($os-background, stroke);
1952
selected-color: on($os-background);
1953
@include entry(normal, $fc:on($os-background, stroke));
1954
&:focus { @include entry(focus, $fc:on($os-background)); }
1955
&:insensitive {
1956
@include entry(insensitive, $fc:on($os-background, stroke-disabled));
1957
color: on($os-background, text-disabled);
1958
}
1959
}
1960
.modal-dialog-button-box { spacing: 3px; }
1962
.modal-dialog-button {
1963
min-width: 64px - 8px * 2;
1964
padding: 0 8px;
1965
@include button(flat-normal, $tc: on($os-background));
1966
&:hover,&:focus { @include button(flat-hover, $tc: on($os-background)); }
1967
&:active { @include button(flat-active, $tc: on($os-background)); }
1968
&:insensitive { @include button(flat-insensitive, $tc: on($os-background)); }
1969
&:default {
1971
min-width: 64px - 16px * 2;
1972
padding: 0 16px;
1973
@include button(normal, $c: $primary, $tc: on($primary));
1974
&:hover,&:focus { @include button(hover, $c: $primary, $tc: on($primary)); }
1975
&:active { @include button(active, $c: $primary, $tc: on($primary)); }
1976
&:insensitive { @include button(insensitive, $c: on($os-background, fill), $tc: on($os-background, text-disabled)); }
1977
}
1978
}
1979
}
1980
.login-dialog-logo-bin { padding: 24px 0px; }
1982
.login-dialog-banner { color: on($os-background, text2); }
1983
.login-dialog-button-box { spacing: 5px; }
1984
.login-dialog-message-warning { color: on($os-background, error); }
1985
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
1986
.login-dialog-user-selection-box { padding: 100px 0px; }
1987
.login-dialog-not-listed-label {
1988
padding-left: 2px;
1989
.login-dialog-not-listed-button:focus &,
1990
.login-dialog-not-listed-button:hover & {
1991
color: on($os-background);
1992
}
1993
}
1994
.login-dialog-not-listed-label {
1995
transition-duration: $duration;
1996
font-size: 1em;
1997
font-weight: bold;
1998
color: on($os-background, text2);
1999
padding-top: 1em;
2000
border-radius: $corner-radius;
2001
&:hover {
2002
background-color: $inverse-overlay-hover;
2003
color: on($os-background);
2004
}
2005
&:focus { background-color: $inverse-overlay-focus; }
2006
&:active {
2007
transition-duration: $duration-ripple;
2008
background-color: $inverse-overlay-active;
2009
color: on($os-background);
2010
}
2011
}
2012
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
2014
.login-dialog-user-list {
2015
spacing: 12px;
2016
padding: .2em;
2017
width: 23em;
2018
&:expanded .login-dialog-user-list-item:selected { background-color: $inverse-overlay-focus; color: on($os-background); }
2019
&:expanded .login-dialog-user-list-item:hover { background-color: $inverse-overlay-hover; color: on($os-background); }
2020
&:expanded .login-dialog-user-list-item:active { background-color: $inverse-overlay-active; color: on($os-background); }
2021
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid on($os-background); }
2022
}
2023
.login-dialog-user-list-item {
2024
transition-duration: $duration;
2025
border-radius: $corner-radius;
2026
padding: 4px 4px 0;
2027
color: on($os-background, text2);
2028
&:ltr { padding-right: 1em; }
2029
&:rtl { padding-left: 1em; }
2030
&:hover {
2031
background-color: $inverse-overlay-hover;
2032
color: on($os-background);
2033
}
2034
&:active {
2035
transition-duration: $duration-ripple;
2036
background-color: $inverse-overlay-active;
2037
color: on($os-background);
2038
}
2039
.login-dialog-timed-login-indicator {
2040
height: 2px;
2041
margin: 2px 0 0 0;
2042
background-color: on($os-background);
2043
}
2044
&:focus .login-dialog-timed-login-indicator { background-color: on($os-background); }
2045
}
2046
.login-dialog-username,
2048
.user-widget-label {
2049
color: on($os-background);
2050
@include type(headline6);
2051
text-align: left;
2052
padding-left: 15px;
2053
}
2054
.user-widget-label {
2055
&:ltr { padding-left: 18px; }
2056
&:rtl { padding-right: 18px; }
2057
}
2058
.login-dialog-prompt-layout {
2060
padding-top: 24px;
2061
padding-bottom: 12px;
2062
spacing: 8px;
2063
width: 23em;
2064
}
2065
.login-dialog-prompt-label {
2067
color: on($os-background, text2);
2068
font-size: 1em;
2069
padding-top: 1em;
2070
}
2071
.login-dialog-session-list-button StIcon {
2073
icon-size: 1.25em;
2074
}
2075
.login-dialog-session-list-button {
2077
color: on($os-background, text2);
2078
&:hover,&:focus { color: on($os-background); }
2079
&:active { color: on($os-background); }
2080
}
2081
//SCREEN SHIELD
2083
.screen-shield-arrows {
2085
padding-bottom: 3em;
2086
}
2087
.screen-shield-arrows Gjs_Arrow {
2089
color: white;
2090
width: 80px;
2091
height: 48px;
2092
-arrow-thickness: 12px;
2093
-arrow-shadow: $shadow-1;
2094
}
2095
.screen-shield-clock {
2097
color: white;
2098
text-shadow: $shadow-1;
2099
font-weight: normal;
2100
text-align: center;
2101
padding-bottom: 1.5em;
2102
}
2103
.screen-shield-clock-time {
2105
@include type(headline1);
2106
text-shadow: $shadow-1;
2107
}
2108
.screen-shield-clock-date { @include type(headline4); }
2110
.screen-shield-notifications-container {
2112
spacing: 6px;
2113
width: 30em;
2114
background-color: transparent;
2115
max-height: 500px;
2116
.summary-notification-stack-scrollview {
2117
padding-top: 0;
2118
padding-bottom: 0;
2119
}
2120
.notification,
2122
.screen-shield-notification-source {
2123
padding: 8px;
2124
border: none;
2125
background-color: $scrim-alt;
2126
color: on($scrim-alt);
2127
border-radius: $corner-radius;
2128
}
2129
.notification { margin-right: 16px; } //compensate for space allocated to the scrollbar
2130
}
2131
.screen-shield-notification-label {
2134
min-height: $small-size - 2px;
2135
padding: 2px 0px 0px 16px;
2136
font-weight: bold;
2137
}
2138
.screen-shield-notification-count-text {
2140
min-height: $small-size - 2px;
2141
padding: 2px 0px 0px 16px;
2142
color: on($scrim-alt, text2);
2143
}
2144
#panel.lock-screen { background-color: $scrim-alt; }
2146
.screen-shield-background { //just the shadow, really
2148
background: black;
2149
box-shadow: $shadow-5;
2150
}
2151
#lockDialogGroup {
2153
background: $os-background;
2154
background-size: cover;
2155
color: on($os-background, text2);
2156
}
2157
#screenShieldNotifications {
2159
StScrollBar { @extend %overview_scrollbar; }
2160
}
2161
// Looking Glass
2164
#LookingGlassDialog {
2165
background-color: $surface;
2166
spacing: 4px;
2167
padding: 0;
2168
border: none;
2169
border-radius: $corner-radius;
2170
box-shadow: $shadow-4;
2171
& > #Toolbar {
2172
padding: 0 8px;
2173
border: none;
2174
border-radius: 0;
2175
background-color: rgba($surface, 0.01);
2176
box-shadow: inset 0 -1px 0 $divider;
2177
}
2178
.labels { spacing: 0; }
2179
.notebook-tab {
2180
-natural-hpadding: 12px;
2181
-minimum-hpadding: 6px;
2182
font-weight: bold;
2183
color: $text2;
2184
transition-duration: $duration;
2185
padding-left: 16px;
2186
padding-right: 16px;
2187
min-height: $medium-size;
2188
padding: 0 16px * 2;
2189
&:hover {
2190
background-color: $overlay-hover;
2191
color: $text;
2192
text-shadow: none;
2193
}
2194
&:active {
2195
background-color: $overlay-active;
2196
color: $text;
2197
transition-duration: $duration-ripple;
2198
}
2199
&:selected {
2200
border-bottom-width: 0;
2201
border-color: transparent;
2202
background-color: rgba($surface, 0.01);
2203
box-shadow: inset 0 -2px 0px $primary;
2204
color: $text;
2205
text-shadow: none;
2206
}
2207
}
2208
StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
2209
StBoxLayout#ResultsArea { spacing: 4px; }
2210
}
2211
.lg-dialog {
2213
StEntry {
2214
selection-background-color: $overlay-selected;
2215
selected-color: $text;
2216
}
2217
.shell-link {
2218
color: $primary;
2219
&:hover { color: $primary; }
2220
}
2221
}
2222
.lg-completions-text {
2224
font-size: 1em;
2225
font-style: italic;
2226
}
2227
.lg-obj-inspector-title {
2229
spacing: 4px;
2230
}
2231
.lg-obj-inspector-button {
2233
min-height: $medium-size;
2234
min-width: 64px - 8px * 2;
2235
padding: 0 8px;
2236
border: none;
2237
border-radius: $corner-radius;
2238
@include type(button);
2239
@include button(flat-normal);
2240
&:hover { @include button(flat-hover); }
2241
&:active { @include button(flat-active); }
2242
&:insensitive { @include button(flat-insensitive); }
2243
&:focus { @include button(flat-focus); }
2244
&:hover { border: none; }
2245
}
2246
#lookingGlassExtensions { padding: 4px; }
2248
.lg-extensions-list {
2250
padding: 4px;
2251
spacing: 6px;
2252
}
2253
.lg-extension {
2255
border: none;
2256
border-radius: $corner-radius;
2257
padding: 4px;
2258
}
2259
.lg-extension-name {
2261
@include type(headline5);
2262
}
2263
.lg-extension-meta {
2265
spacing: 6px;
2266
}
2267
#LookingGlassPropertyInspector {
2269
background: $surface;
2270
border: none;
2271
border-radius: $corner-radius;
2272
padding: 6px;
2273
box-shadow: $shadow-4;
2274
}
2275