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
&:focus { @include button(flat-focus); }
11
&:hover { @include button(flat-hover); }
12
&:active { @include button(flat-active); }
13
&:insensitive { @include button(flat-insensitive); }
14
}
15
.modal-dialog-linked-button {
17
min-height: $medium-size;
18
min-width: 64px - 8px * 2;
19
margin: $container-padding;
20
padding: 0 8px;
21
margin-right: 0;
22
border-right-width: 0;
23
border-radius: $corner-radius;
24
@include type(button);
25
@include button(flat-normal);
26
&:focus { @include button(flat-focus); }
27
&:hover { @include button(flat-hover); }
28
&:active { @include button(flat-active); }
29
&:insensitive { @include button(flat-insensitive); }
30
&:first-child {
32
border-radius: $corner-radius;
33
}
34
&:last-child {
35
margin-right: $container-padding;
36
border-right-width: 0px;
37
border-radius: $corner-radius;
38
}
39
&:first-child:last-child {
40
margin-right: $container-padding;
41
border-right-width: 0px;
42
border-radius: $corner-radius;
43
}
44
}
45
/* Scrollbars */
47
StScrollView {
49
&.vfade { -st-vfade-offset: 32px; }
50
&.hfade { -st-hfade-offset: 32px; }
51
}
52
StScrollBar {
54
padding: 0;
55
StScrollView & {
57
min-width: 16px;
58
min-height: 16px;
59
}
60
StBin#trough {
62
margin: 4px;
63
border-radius: 100px;
64
background-color: $stroke-disabled;
65
}
66
StButton#vhandle, StButton#hhandle {
68
transition-duration: $duration;
69
border-radius: 100px;
70
background-color: $text-disabled;
71
//border: 4px solid transparent; //would be nice to margin or at least to transparent
72
margin: 4px;
73
&:hover { background-color: $text2; }
74
&:active { background-color: $text; }
75
}
76
}
77
%overview_scrollbar {
79
StBin#trough {
80
background-color: on(dark, stroke-disabled);
81
}
82
StButton#vhandle, StButton#hhandle {
84
background-color: on(dark, text-disabled);
85
&:hover { background-color: on(dark, text2); }
86
&:active { background-color: on(dark); }
87
}
88
}
89
/* Slider */
91
.slider {
93
height: 20px;
94
color: $primary;
95
-barlevel-height: 2px;
96
-barlevel-background-color: $stroke; //background of the trough
97
-barlevel-border-color: transparent; //trough border color
98
-barlevel-active-background-color: $primary; //active trough fill
99
-barlevel-active-border-color: transparent; //active trough border
100
-barlevel-overdrive-color: $error;
101
-barlevel-overdrive-border-color: transparent;
102
-barlevel-overdrive-separator-width: 2px;
103
-barlevel-border-width: 0;
104
-slider-handle-radius: 6px;
105
}
106
/* Check Boxes */
108
.check-box {
110
* {
111
min-height: $medium-size - 8px * 2;
112
padding: 8px 0;
113
}
114
StBoxLayout { spacing: 8px; }
115
StBin {
116
transition-duration: $duration;
117
width: 24px;
118
height: 24px;
119
padding: ($medium-size - 24px) / 2;
120
border-radius: 100px;
121
background-image: url("assets/checkbox-off.svg");
122
}
123
&:focus StBin {
124
background-image: url("assets/checkbox-off.svg");
125
}
126
&:hover StBin {
127
background-color: $overlay-hover;
128
}
129
&:active StBin {
130
transition-duration: $duration-ripple;
131
background-color: $overlay-active;
132
}
133
&:checked StBin {
134
background-image: url("assets/checkbox.svg");
135
}
136
&:focus:checked StBin {
137
background-image: url("assets/checkbox.svg");
138
}
139
&:hover:checked StBin {
140
background-color: rgba($primary, 0.08);
141
}
142
&:active:checked StBin {
143
background-color: rgba($primary, 0.2);
144
}
145
}
146
/* Switches */
148
.toggle-switch {
149
width: 40px;
150
height: 20px;
151
background-size: contain;
152
}
153
@each $v in us, intl {
155
.toggle-switch-#{$v} {
156
background-image: url("assets/toggle-off.svg");
157
&:checked { background-image: url("assets/toggle-on.svg"); }
158
}
159
}
160
/* Modal Dialogs */
162
.headline { @include type(headline6); }
164
.lightbox { background-color: black; }
165
.flashspot { background-color: white; }
166
.modal-dialog {
168
border-radius: $corner-radius;
169
color: $text;
170
background-color: $surface;
171
border: none;
172
box-shadow: $shadow-4;
173
.modal-dialog-content-box {
174
padding: 24px;
175
}
176
.run-dialog-entry { width: 20em; margin-bottom: 0; }
177
.run-dialog-error-box {
178
padding-top: 16px;
179
spacing: 6px;
180
}
181
.run-dialog-button-box { padding-top: 1em; }
182
.run-dialog-label {
183
font-size: 1em;
184
font-weight: normal;
185
color: $text2;
186
padding-bottom: .4em;
187
}
188
}
190
.mount-dialog-subject,
192
.end-session-dialog-subject { //this should be a generic header class
193
@include type(headline6);
194
}
195
/* Message Dialog */
197
.message-dialog-main-layout {
198
padding: 12px 20px 0;
199
spacing: 12px;
200
}
201
.message-dialog-content {
203
max-width: 28em;
204
spacing: 20px;
205
}
206
.message-dialog-icon {
208
min-width: 48px;
209
icon-size: 48px;
210
}
211
.message-dialog-title {
213
font-weight: bold;
214
}
215
.message-dialog-subtitle {
217
color: $text2;
218
font-weight: normal;
219
}
220
/* End Session Dialog */
222
.end-session-dialog {
223
spacing: 42px;
224
border: none;
225
}
226
.end-session-dialog-list {
228
padding-top: 20px;
229
}
230
.end-session-dialog-layout {
232
padding-left: 17px;
233
&:rtl { padding-right: 17px; }
234
}
235
.end-session-dialog-description {
237
width: 28em;
238
padding-bottom: 10px;
239
&:rtl {
240
text-align: right;
241
}
242
}
243
.end-session-dialog-warning {
245
width: 28em;
246
color: $warning;
247
padding-top: 6px;
248
&:rtl {
249
text-align: right;
250
}
251
}
252
.end-session-dialog-logout-icon {
254
//border: 2px solid #8b8b8b;
255
border-radius: 5px;
256
width: 48px;
257
height: 48px;
258
background-size: contain;
259
}
260
.end-session-dialog-shutdown-icon {
262
color: $text-disabled;
263
width: 48px;
264
height: 48px;
265
}
266
.end-session-dialog-inhibitor-layout {
268
spacing: 16px;
269
max-height: 200px;
270
padding-right: 65px;
271
padding-left: 65px;
272
}
273
.end-session-dialog-session-list,
275
.end-session-dialog-app-list {
276
spacing: 1em;
277
}
278
.end-session-dialog-list-header {
280
font-weight: bold;
281
&:rtl { text-align: right; }
282
}
283
.end-session-dialog-app-list-item,
285
.end-session-dialog-session-list-item {
286
spacing: 1em;
287
}
288
.end-session-dialog-app-list-item-name,
290
.end-session-dialog-session-list-item-name {
291
font-weight: bold;
292
}
293
.end-session-dialog-app-list-item-description {
295
color: $text2;
296
font-size: 1em;
297
}
298
/* ShellMountOperation Dialogs */
300
.shell-mount-operation-icon { icon-size: 48px; }
301
.mount-dialog {
303
spacing: 24px;
304
.message-dialog-title {
306
padding-top: 10px;
307
padding-left: 17px;
308
padding-bottom: 6px;
309
max-width: 34em;
310
}
311
.message-dialog-title:rtl {
313
padding-left: 0px;
314
padding-right: 17px;
315
}
316
.message-dialog-body {
318
padding-left: 17px;
319
width: 28em;
320
}
321
.message-dialog-body:rtl {
323
padding-left: 0px;
324
padding-right: 17px;
325
}
326
}
327
.mount-dialog-app-list {
329
max-height: 200px;
330
padding-top: 24px;
331
padding-left: 49px;
332
padding-right: 32px;
333
}
334
.mount-dialog-app-list:rtl {
336
padding-right: 49px;
337
padding-left: 32px;
338
}
339
.mount-dialog-app-list-item {
341
color: $text;
342
&:hover { color: $text; }
343
&:ltr { padding-right: 1em; }
344
&:rtl { padding-left: 1em; }
345
}
346
.mount-dialog-app-list-item-icon {
348
&:ltr { padding-right: 17px; }
349
&:rtl { padding-left: 17px; }
350
}
351
.mount-dialog-app-list-item-name {
353
font-size: 1em;
354
}
355
/* Password or Authentication Dialog */
358
.prompt-dialog {
360
//this is the width of the entire modal popup
361
width: 34em;
362
border: none;
363
.message-dialog-main-layout { spacing: 24px; padding: 10px; }
365
.message-dialog-content { spacing: 16px; }
366
.message-dialog-title { @include type(headline6); color: $text; }
367
}
368
.prompt-dialog-description:rtl {
370
text-align: right;
371
}
372
.prompt-dialog-password-box {
374
spacing: 1em;
375
padding-bottom: 1em;
376
}
377
.prompt-dialog-error-label {
379
font-size: 1em;
380
color: $error;
381
padding-bottom: 8px;
382
}
383
.prompt-dialog-info-label {
385
font-size: 1em;
386
padding-bottom: 8px;
387
}
388
.hidden {
390
color: rgba(0,0,0,0);
391
}
392
.prompt-dialog-null-label {
394
font-size: 1em;
395
padding-bottom: 8px;
396
}
397
/* Polkit Dialog */
400
.polkit-dialog-user-layout {
402
padding-left: 10px;
403
spacing: 10px;
404
&:rtl {
405
padding-left: 0px;
406
padding-right: 10px;
407
}
408
}
409
.polkit-dialog-user-root-label {
411
color: $warning;
412
}
413
.polkit-dialog-user-icon {
415
border-radius: 5px;
416
background-size: contain;
417
width: 48px;
418
height: 48px;
419
}
420
/* Audio selection dialog */
422
.audio-device-selection-dialog {
423
spacing: 30px;
424
}
425
.audio-selection-content {
427
spacing: 20px;
428
padding: 24px;
429
}
430
.audio-selection-title {
432
font-weight: bold;
433
text-align: center;
434
}
435
.audio-selection-box {
437
spacing: 20px;
438
}
439
.audio-selection-device {
441
border: none;
442
border-radius: $corner-radius;
443
&:focus { background-color: $overlay-focus; }
444
&:hover { background-color: $overlay-hover; }
445
&:active { background-color: $overlay-active; }
446
}
447
.audio-selection-device-box {
449
padding: 20px;
450
spacing: 20px;
451
}
452
.audio-selection-device-icon {
454
icon-size: 64px;
455
}
456
/* Access Dialog */
458
.access-dialog {
459
spacing: 30px;
460
}
461
/* Geolocation Dialog */
463
.geolocation-dialog {
464
spacing: 30px;
465
}
466
/* Extension Dialog */
468
.extension-dialog {
469
.message-dialog-main-layout { spacing: 24px; padding: 10px; }
470
.message-dialog-title { color: $text2; }
471
}
472
/* Inhibit-Shortcuts Dialog */
474
.inhibit-shortcuts-dialog {
475
spacing: 30px;
476
}
477
/* Network Agent Dialog */
479
.network-dialog-secret-table {
481
spacing-rows: 15px;
482
spacing-columns: 1em;
483
}
484
.keyring-dialog-control-table {
486
spacing-rows: 15px;
487
spacing-columns: 1em;
488
}
489
/* Popovers/Menus */
491
.popup-menu {
493
min-width: 200px;
494
.popup-menu-arrow { } //defined globally in the TOP BAR
496
.popup-sub-menu {
497
background-color: $entry-fill;
498
box-shadow: $shadow-0;
499
}
500
.popup-menu-content { padding: 8px 0; }
502
.popup-menu-item {
503
// min-height: $menuitem-size - 4px * 2;
504
spacing: 8px;
505
transition-duration: $duration;
506
&:ltr { padding: 0.4em 24px 0.4em 0; }
508
&:rtl { padding: 0.4em 0 0.4em 24px; }
509
&:checked {
510
background-color: $overlay-selected;
511
box-shadow: $shadow-0;
512
font-weight: normal;
513
&.selected {
514
background-color: rgba($primary, 0.4);
515
}
516
&:active {
517
background-color: rgba($primary, 0.6);
518
}
519
}
520
&.selected {
521
background-color: $overlay-hover;
522
color: $text;
523
transition-duration: 0ms;
524
}
525
&:active {
526
background-color: $overlay-active;
527
color: $text;
528
transition-duration: $duration-ripple;
529
}
530
&.selected:active { color: $text; }
531
&:insensitive { color: $text-disabled; }
532
}
533
.popup-inactive-menu-item { //all icons and other graphical elements
535
color: $text;
536
&:insensitive { color: $text-disabled; }
538
}
539
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
540
&.panel-menu {
541
-boxpointer-gap: 4px;
542
margin-bottom: 1.75em;
543
}
544
}
545
.popup-menu-ornament {
549
text-align: right;
550
width: 16px;
551
height: 16px;
552
}
553
.popup-menu-boxpointer,
554
.candidate-popup-boxpointer {
555
-arrow-border-radius: 20px; // This is necessary for the weird bug: materia-theme#296
556
-arrow-background-color: transparent;
557
-arrow-border-width: 0;
558
-arrow-border-color: transparent;
559
-arrow-base: 0;
560
-arrow-rise: 0;
561
-arrow-box-shadow: none; //dreaming. bug #689995
562
margin: 5px 8px 8px;
563
background-color: $surface;
564
border-radius: $corner-radius;
565
box-shadow: $shadow-2;
566
}
567
.popup-separator-menu-item {
569
//-margin-horizontal: 24px;
570
height: 1px; //not really the whole box
571
margin: 8px 64px - 24px;
572
background-color: $divider;
573
border-color: transparent;
574
border-bottom-width: 0;
575
border-bottom-style: none;
576
}
577
// Background menu
580
.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0; }
581
/* fallback menu
583
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
584
app menu inside the main app window itself rather than the top bar
585
*/
586
/* OSD */
589
.osd-window {
590
text-align: center;
591
font-weight: bold;
592
spacing: 1em;
593
margin: 32px;
594
min-width: 64px;
595
min-height: 64px;
596
.osd-monitor-label { @include type(headline3); }
598
.level {
599
height: 8px;
600
-barlevel-height: 8px;
601
-barlevel-background-color: $stroke-disabled;
602
-barlevel-active-background-color: $primary;
603
-barlevel-overdrive-color: $error;
604
-barlevel-overdrive-separator-width: 2px;
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
font-feature-settings: "tnum";
751
&:overview,
753
&.unlock-screen,
754
&.login-screen,
755
&.lock-screen {
756
background-color: transparent;
757
}
758
#panelLeft, #panelCenter { // spacing between activities<>app menu and such
760
spacing: 0;
761
}
762
.panel-corner {
764
-panel-corner-radius: 0;
765
-panel-corner-background-color: $scrim;
766
-panel-corner-border-width: 2px;
767
-panel-corner-border-color: transparent;
768
&:active, &:overview, &:focus {
770
-panel-corner-border-color: on($scrim);
771
}
772
&.lock-screen, &.login-screen, &.unlock-screen {
774
-panel-corner-radius: 0;
775
-panel-corner-background-color: transparent;
776
-panel-corner-border-color: transparent;
777
}
778
}
779
.panel-button {
781
-natural-hpadding: $panel-button-hpadding;
782
-minimum-hpadding: $panel-button-hpadding / 2;
783
font-weight: bold;
784
color: on($scrim, text2);
785
text-shadow: none;
786
transition-duration: $duration;
787
.app-menu-icon {
789
-st-icon-style: symbolic;
790
margin-left: 4px;
791
margin-right: 4px;
792
//dimensions of the icon are hardcoded
793
}
794
.system-status-icon,
796
.app-menu-icon > StIcon,
797
.popup-menu-arrow {
798
icon-shadow: none;
799
}
800
&:hover {
802
color: on($scrim);
803
text-shadow: none;
804
.system-status-icon,
806
.app-menu-icon > StIcon,
807
.popup-menu-arrow {
808
icon-shadow: none;
809
}
810
}
811
&:active, &:overview, &:focus, &:checked {
813
// Trick due to St limitations. It needs a background to draw
814
// a box-shadow
815
background-color: rgba($scrim, 0.01);
816
box-shadow: inset 0 -2px 0px on($scrim);
817
color: on($scrim);
818
& > .system-status-icon { icon-shadow: none; }
820
}
821
.system-status-icon { icon-size: em(16px); padding: 0 4px; }
823
.unlock-screen &,
824
.login-screen &,
825
.lock-screen & {
826
color: on($scrim, text2);
827
&:focus, &:hover, &:active { color: on($scrim); }
828
}
829
}
830
.panel-status-indicators-box,
832
.panel-status-menu-box {
833
spacing: 2px;
834
}
835
// spacing between power icon and (optional) percentage label
837
.power-status.panel-status-indicators-box {
838
spacing: 0;
839
}
840
.screencast-indicator { color: $warning; }
842
.remote-access-indicator { color: $warning; }
844
&.solid {
846
background-color: $panel;
847
/* transition from transparent to solid */
848
transition-duration: $duration-panel;
849
background-gradient-direction: none; // for Ubuntu session
850
text-shadow: none; // for Ubuntu session
851
&:overview { background-color: transparent; } // for Ubuntu session
853
.panel-corner {
855
-panel-corner-background-color: $panel;
856
}
857
.panel-button {
859
color: on($panel, text2);
860
text-shadow: none;
861
&:hover, &:active, &:overview, &:focus, &:checked {
863
color: on($panel);
864
}
865
}
866
.system-status-icon,
868
.app-menu-icon > StIcon,
869
.popup-menu-arrow {
870
icon-shadow: none;
871
}
872
}
873
}
874
// calendar popover
876
#calendarArea {
877
padding: 8px 16px;
878
}
879
.calendar {
881
margin-bottom: 0;
882
}
883
.calendar,
885
.datemenu-today-button,
886
.datemenu-displays-box,
887
.message-list-sections {
888
margin: 0 8px;
889
}
890
.datemenu-calendar-column { spacing: 8px; }
892
.datemenu-displays-section { padding-bottom: 0; }
893
.datemenu-displays-box { spacing: 8px; }
894
.datemenu-calendar-column {
896
border: 0 solid $divider;
897
&:ltr { border-left-width: 0; }
898
&:rtl { border-right-width: 0; }
899
}
900
.datemenu-today-button,
902
.world-clocks-button,
903
.weather-button,
904
.events-section-title {
905
min-height: $menuitem-size - 4px * 2;
906
padding: 4px 8px;
907
border-radius: $corner-radius;
908
}
909
.datemenu-today-button {
911
min-height: $menuitem-size * 2 - 4px * 2;
912
}
913
.message-list-section-list:ltr {
915
padding-left: 0;
916
}
917
.message-list-section-list:rtl {
919
padding-right: 0;
920
}
921
.datemenu-today-button,
923
.world-clocks-button,
924
.weather-button,
925
.events-section-title {
926
transition-duration: $duration;
927
&:hover,&:focus { color: $text; background-color: $overlay-hover; }
928
&:active {
929
transition-duration: $duration-ripple;
930
color: $text;
931
background-color: $overlay-active;
932
}
933
}
934
.datemenu-today-button .day-label {
936
}
937
.datemenu-today-button .date-label {
939
@include type(headline5);
940
}
941
.world-clocks-header,
943
.weather-header,
944
.events-section-title {
945
color: $text2;
946
font-weight: bold;
947
}
948
.world-clocks-grid {
950
spacing-rows: 0.4em;
951
}
952
.weather-box {
954
spacing: 0.4em;
955
}
956
.calendar-month-label {
958
transition-duration: $duration;
959
height: $menuitem-size - 6px * 2;
960
margin: 2px;
961
padding: 6px 16px;
962
border-radius: $corner-radius;
963
color: $text;
964
font-weight: bold;
965
text-align: center;
966
&:focus { background-color: $overlay-focus; }
967
}
968
.pager-button {
970
transition-duration: $duration;
971
width: $menuitem-size;
972
height: $menuitem-size;
973
margin: 2px;
974
border-radius: 100px;
975
background-color: transparent;
976
color: $text;
977
&:hover, &:focus { background-color: $overlay-hover; }
978
&:active { background-color: $overlay-active; transition-duration: $duration-ripple; }
979
}
980
.calendar-change-month-back { //arrow back
982
background-image: url("assets/calendar-arrow-left.svg");
983
&:rtl { background-image: url("assets/calendar-arrow-right.svg"); }
984
}
985
.calendar-change-month-forward { //arrow foreward
986
background-image: url("assets/calendar-arrow-right.svg");
987
&:rtl { background-image: url("assets/calendar-arrow-left.svg"); }
988
}
989
.calendar-day-base {
991
transition-duration: $duration;
992
@include type(caption);
993
text-align: center;
994
width: $menuitem-size; height: $menuitem-size;
995
padding: 0;
996
margin: 2px;
997
border-radius: 100px;
998
font-feature-settings: "tnum";
999
&:hover,&:focus { background-color: $overlay-hover; }
1000
&:active {
1001
transition-duration: $duration-ripple;
1002
color: inherit;
1003
background-color: $overlay-active;
1004
border-color: transparent; //avoid jumparound due to today
1005
}
1006
&:selected {
1007
color: $text;
1008
background-color: $overlay-selected;
1009
border-color: transparent; //avoid jumparound due to today
1010
}
1011
&.calendar-day-heading { //day of week heading
1012
width: $menuitem-size; height: $menuitem-size - 7px;
1013
margin-top: 2px;
1014
padding: 7px 0 0;
1015
border-radius: 100px;
1016
background-color: transparent;
1017
color: $text-disabled;
1018
@include type(caption);
1019
font-weight: bold;
1020
text-align: center;
1021
}
1022
}
1023
.calendar-day { //border collapse hack - see calendar.js
1024
border-width: 0;
1025
}
1026
.calendar-day-top { border-top-width: 0; }
1027
.calendar-day-left { border-left-width: 0; }
1028
.calendar-work-day {
1029
}
1031
.calendar-nonwork-day {
1032
color: $text;
1033
}
1034
.calendar-today {
1035
font-weight: bold !important;
1036
//color: $text;
1037
//background-color: transparent;
1038
border: none;
1039
}
1040
.calendar-day-with-events {
1041
color: $primary;
1042
font-weight: normal;
1043
text-decoration: underline;
1044
background-image: none;
1045
}
1046
.calendar-other-month-day {
1047
color: $text2-disabled;
1048
}
1049
.calendar-week-number {
1050
width: $menuitem-size; height: $menuitem-size - 7px;
1051
margin: 2px;
1052
padding: 7px 0 0;
1053
border-radius: 100px;
1054
background-color: transparent;
1055
color: $text-disabled;
1056
font-size: inherit;
1057
font-weight: bold;
1058
text-align: center;
1059
}
1060
/* Message list */
1062
.message-list {
1063
width: 420px;
1064
}
1065
.message-list-clear-button.button {
1067
background-color: transparent;
1068
&:focus { background-color: $primary-overlay-focus; }
1069
&:hover { background-color: $primary-overlay-hover; }
1070
&:active { background-color: $primary-overlay-active; }
1071
margin: 8px 8px 0;
1072
}
1073
.message-list-sections {
1075
spacing: 8px;
1076
}
1077
.message-list-section,
1079
.message-list-section-list {
1080
spacing: 8px;
1081
}
1082
.message {
1084
transition-duration: $duration;
1085
min-height: $menuitem-size * 2;
1086
background-color: transparent;
1087
&:hover,&:focus { background-color: $overlay-hover; }
1088
&:active {
1089
transition-duration: $duration-ripple;
1090
background-color: $overlay-active;
1091
}
1092
border-radius: $corner-radius;
1093
}
1094
.message-icon-bin {
1096
padding: 8px 0px 8px 8px;
1097
&:rtl { padding: 8px 8px 8px 0px; }
1098
}
1099
.message-icon-bin > StIcon {
1101
color: $text;
1102
icon-size: em(16px);
1103
-st-icon-style: requested;
1104
margin: 4px 0px 4px 4px;
1105
&:rtl { margin: 4px 4px 4px 0px; }
1106
}
1107
.message-secondary-bin {
1109
padding: 0 8px;
1110
}
1111
.message-secondary-bin > .event-time {
1113
min-height: $small-size - 2px;
1114
padding-top: 2px;
1115
color: $text2;
1116
font-size: 1em;
1117
/* HACK: the label should be baseline-aligned with a 1em label,
1118
fake this with some bottom padding */
1119
padding-bottom: 0;
1120
}
1121
.message-secondary-bin > StIcon {
1123
icon-size: em(16px);
1124
}
1125
.message-title {
1127
min-height: $small-size - 2px;
1128
padding-top: 2px;
1129
color: $text;
1130
font-weight: bold;
1131
font-size: 1em;
1132
}
1133
.message-content {
1135
min-height: $menuitem-size * 2 - 8px * 2;
1136
padding: 8px;
1137
color: $text2;
1138
font-size: 1em;
1139
}
1140
.message-content * > StIcon {
1142
transition-duration: $duration;
1143
icon-size: 16px;
1144
border-radius: 16px;
1145
padding: ($small-size - 16px) / 2;
1146
color: $text2;
1147
}
1148
/* FIXME: how do you do this in sass? */
1150
.message-content *:hover > StIcon,
1151
.message-content *:focus > StIcon {
1152
color: $text;
1153
background-color: $overlay-hover;
1154
}
1155
.message-content *:active > StIcon {
1157
transition-duration: $duration-ripple;
1158
color: $text;
1159
background-color: $overlay-active;
1160
}
1161
.message-media-control {
1163
transition-duration: $duration;
1164
margin: 16px 0;
1165
padding: 8px;
1166
border-radius: 100px;
1167
color: $text2;
1168
&:hover,&:focus { color: $text; background-color: $overlay-hover; }
1169
&:active { color: $text; background-color: $overlay-active; transition-duration: $duration-ripple; }
1170
&:insensitive { color: $text2-disabled; }
1171
&:last-child:ltr { margin-right: 16px; padding-right: 8px; }
1173
&:last-child:rtl { margin-left: 16px; padding-left: 8px; }
1174
}
1175
.media-message-cover-icon {
1177
icon-size: 32px !important;
1178
margin: 8px 0px 8px 4px !important;
1179
&:rtl { margin: 8px 4px 8px 0px !important; }
1180
&.fallback {
1181
icon-size: 16px !important;
1182
padding: 8px;
1183
border: none;
1184
border-radius: $corner-radius;
1185
background-color: $stroke-disabled;
1186
color: $text-disabled;
1187
}
1188
}
1189
// a little unstructured mess:
1192
.system-switch-user-submenu-icon.user-icon {
1194
icon-size: 20px;
1195
padding: 0 2px;
1196
}
1197
.system-switch-user-submenu-icon.default-icon {
1198
icon-size: 16px;
1199
padding: 0 4px;
1200
}
1201
#appMenu {
1203
spinner-image: url("process-working.svg");
1204
spacing: 4px;
1205
.label-shadow { color: transparent; }
1207
}
1208
.aggregate-menu {
1210
min-width: 280px;
1211
.popup-menu-icon { padding: 0 4px; }
1212
.popup-sub-menu .popup-menu-item > :first-child {
1213
&:ltr { /* 8px spacing + 2*4px padding */
1214
padding-left: 16px; margin-left: em(16px); }
1215
&:rtl { /* 8px spacing + 2*4px padding */
1216
padding-right: 16px; margin-right: em(16px); }
1217
}
1218
}
1219
.system-menu-action {
1221
-st-icon-style: symbolic;
1222
color: $text2;
1223
border-radius: 100px; /* wish we could do 50% */
1224
padding: ($large-size - 16px) / 2;
1225
border: none;
1226
transition-duration: $duration;
1227
&:hover, &:focus {
1229
background-color: $overlay-hover;
1230
color: $text;
1231
border: none;
1232
padding: ($large-size - 16px) / 2;
1233
}
1234
&:active { background-color: $overlay-active; color: $text; transition-duration: $duration-ripple; }
1235
& > StIcon { icon-size: 16px; }
1237
}
1238
//Activities Ripples
1240
.ripple-box {
1241
width: 48px;
1242
height: 48px;
1243
border-radius: 0 0 48px 0;
1244
background-color: on(dark, stroke);
1245
background-image: none;
1246
background-size: auto;
1247
}
1248
.ripple-box:rtl {
1250
border-radius: 0 0 0 48px;
1251
background-image: none;
1252
}
1253
// not really top bar only
1255
.popup-menu-arrow { width: 16px; height: 16px; }
1256
.popup-menu-icon { icon-size: em(16px); }
1257
//close buttons
1259
.window-close {
1261
// FIXME: unless disable the transition, button will distort when hovering
1262
// transition-duration: $duration;
1263
height: $medium-size;
1264
width: $medium-size;
1265
-shell-close-overlap: $medium-size / 2;
1266
-st-background-image-shadow: $shadow-1;
1267
background-image: url("assets/window-close.svg");
1268
background-size: $medium-size;
1269
&:hover {
1271
-st-background-image-shadow: $shadow-2;
1272
background-image: url("assets/window-close.svg");
1273
}
1274
&:active {
1275
// transition-duration: $duration-ripple;
1276
background-image: url("assets/window-close-active.svg");
1277
}
1278
// For backward compatibility of 3.26.0
1280
&:rtl { -st-background-image-shadow: $shadow-1; }
1281
&:rtl:hover { -st-background-image-shadow: $shadow-2; }
1282
}
1283
/* NETWORK DIALOGS */
1285
.nm-dialog {
1287
max-height: 34em;
1288
min-height: 31em;
1289
min-width: 32em;
1290
}
1291
.nm-dialog-content {
1293
spacing: 20px;
1294
padding: 24px;
1295
}
1296
.nm-dialog-header-hbox { spacing: 10px; }
1297
.nm-dialog-airplane-box { spacing: 12px; }
1298
.nm-dialog-airplane-headline {
1300
font-weight: bold;
1301
text-align: center;
1302
}
1303
.nm-dialog-airplane-text { color: $text; }
1305
.nm-dialog-header-icon { icon-size: 32px; }
1306
.nm-dialog-scroll-view { border: none; }
1307
.nm-dialog-header { @include type(headline6); }
1308
.nm-dialog-item {
1310
transition-duration: $duration;
1311
font-size: 1em;
1312
border-bottom: none;
1313
border-radius: $corner-radius;
1314
padding: 12px;
1315
spacing: 20px;
1316
&:hover, &:focus { background-color: $overlay-hover; }
1317
&:active {
1318
transition-duration: $duration-ripple;
1319
background-color: $overlay-active;
1320
}
1321
}
1322
.nm-dialog-item:selected {
1324
background-color: $overlay-selected;
1325
color: $text;
1326
}
1327
.nm-dialog-icons { spacing: .5em; }
1329
.nm-dialog-icon { icon-size: 16px; }
1330
.no-networks-label { color: $text-disabled; }
1331
.no-networks-box { spacing: 12px; }
1332
/* OVERVIEW */
1334
#overview {
1336
spacing: 24px; //
1337
StScrollBar { @extend %overview_scrollbar; }
1338
}
1339
.overview-controls {
1341
padding-bottom: 32px;
1342
}
1343
.window-picker { //container around window thumbnails
1345
-horizontal-spacing: 16px;
1346
-vertical-spacing: 16px;
1347
padding: 0 16px 32px;
1348
&.external-monitor { padding: 16px; }
1350
}
1351
.window-clone-border {
1353
border: 4px solid on(dark, stroke);
1354
border-radius: $corner-radius;
1355
// For window decorations with round corners we can't match
1356
// the exact shape when the window is scaled. So apply a shadow
1357
// to fix that case
1358
box-shadow: inset 0 0 0 1px on(dark, stroke);
1359
}
1360
.window-caption {
1361
spacing: 25px;
1362
color: on($scrim);
1363
background-color: $scrim;
1364
border-radius: $corner-radius;
1365
padding: 4px 8px;
1366
}
1367
//search entry
1369
.search-entry {
1370
width: 320px - 8px * 2;
1371
padding: 0 8px;
1372
border-radius: $corner-radius $corner-radius 0 0;
1373
color: on(dark, text-disabled);
1374
selection-background-color: on(dark, stroke);
1375
selected-color: on(dark);
1376
@include entry(normal,$fc:on(dark, stroke));
1377
&:hover { @include entry(hover,$fc:on(dark, stroke)); }
1378
&:focus {
1379
@include entry(focus,$fc:on(dark));
1380
padding: 0 8px;
1381
border-width: 0;
1382
color: on(dark);
1383
}
1384
.search-entry-icon { icon-size: 16px; padding: 0 0; color: on(dark, text2); }
1386
&:hover, &:focus {
1388
.search-entry-icon { color: on(dark); }
1389
}
1390
}
1391
//search results
1393
#searchResultsBin {
1395
max-width: 1000px;
1396
}
1397
#searchResultsContent {
1399
padding-left: 20px;
1400
padding-right: 20px;
1401
spacing: 16px;
1402
}
1403
.search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
1405
.search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container
1406
.search-statustext { // "no results"
1407
@extend %status_text;
1408
}
1409
.list-search-results { spacing: 3px; }
1410
.search-section-separator { height: 1px; background-color: on(dark, divider); }
1412
.list-search-result-content { spacing: 30px; }
1414
.list-search-result-title { @include type(subtitle1); color: on(dark); spacing: 12px; }
1415
.list-search-result-description { color: on(dark, text2); }
1416
.list-search-provider-details { width: 150px; color: on(dark, text2); margin-top: 0.24em; }
1417
.list-search-provider-content { spacing: 20px; }
1418
.search-provider-icon { padding: 15px; }
1419
/* DASHBOARD */
1422
#dash {
1424
transition-duration: $duration-panel;
1425
font-size: 1em;
1426
color: on(dark);
1427
background-color: on(dark, fill);
1428
padding: 3px 0;
1429
border: none;
1430
border-left: 0px;
1431
border-radius: 0px $corner-radius $corner-radius 0px;
1432
&:rtl {
1434
border-radius: $corner-radius 0 0 $corner-radius;
1435
}
1436
.placeholder {
1438
background-image: url("assets/dash-placeholder.svg");
1439
background-size: contain;
1440
height: 24px;
1441
}
1442
.empty-dash-drop-target {
1444
width: 24px;
1445
height: 24px;
1446
}
1447
}
1449
.dash-item-container > StWidget {
1451
padding: 3px 6px;
1452
}
1453
.dash-label { //osd tooltip
1455
// min-height: 32px - 6px * 2;
1456
border-radius: $corner-radius;
1457
padding: 7px 8px;
1458
color: $text;
1459
background-color: $surface;
1460
box-shadow: $shadow-2;
1461
text-align: center;
1462
-x-offset: 8px;
1463
}
1464
/* App Vault/Grid */
1466
.icon-grid {
1467
spacing: 30px;
1468
-shell-grid-horizontal-item-size: 136px;
1469
-shell-grid-vertical-item-size: 136px;
1470
.overview-icon { icon-size: 96px; }
1472
}
1473
//.app-display { spacing: 20px; }
1474
.system-action-icon {
1476
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); // FIXME: this should really have a highlight
1477
background-color: $grey_900;
1478
color: $white;
1479
border-radius: 99px;
1480
icon-size: 48px;
1481
}
1482
.app-view-controls { //favorties | all toggle container
1484
width: 320px;
1485
padding-bottom: 32px;
1486
}
1487
.app-view-control { //favorties | all toggle button
1488
padding: 0 8px;
1489
font-weight: bold;
1490
color: on(dark, text2);
1491
&:hover {
1492
color: on(dark);
1493
background-color: $inverse-overlay-hover !important;
1494
}
1495
&:active {
1496
color: on(dark);
1497
background-color: $inverse-overlay-active !important;
1498
}
1499
&:checked {
1500
color: on(dark);
1501
background-color: rgba($scrim, 0.01) !important;
1502
box-shadow: inset 0 2px 0 on(dark);
1503
}
1504
&:first-child {
1505
border-right-width: 0;
1506
border-radius: $corner-radius;
1507
&:checked { border-radius: 0; }
1508
}
1509
&:last-child {
1510
border-radius: $corner-radius;
1511
&:checked { border-radius: 0; }
1512
}
1513
}
1514
//Icon tile
1516
.search-provider-icon,
1517
.list-search-result {
1518
@extend %icon_tile;
1519
&:focus, &:selected, &:hover {
1520
background-color: $inverse-overlay-hover;
1521
transition-duration: 0ms;
1522
}
1523
&:active, &:checked {
1524
background-color: $inverse-overlay-active;
1525
transition-duration: $duration-ripple;
1526
}
1527
}
1528
.app-well-app,
1529
.app-well-app.app-folder,
1530
.show-apps,
1531
.grid-search-result {
1532
& .overview-icon {
1533
@extend %icon_tile;
1534
}
1535
&:hover .overview-icon,
1536
&:focus .overview-icon,
1537
&:selected .overview-icon {
1538
background-color: $inverse-overlay-hover;
1539
transition-duration: 0ms;
1540
border-image: none;
1541
background-image: none;
1542
}
1543
&:active .overview-icon,
1544
&:checked .overview-icon {
1545
background-color: $inverse-overlay-active;
1546
box-shadow: $shadow-0;
1547
transition-duration: $duration-ripple;
1548
}
1549
}
1551
.app-well-app-running-dot { //running apps indicator
1553
width: 32px; height: 2px;
1554
background-color: on(dark);
1555
margin-bottom: 0;
1556
}
1557
%icon_tile {
1559
color: on(dark);
1560
border-radius: $corner-radius;
1561
padding: 6px;
1562
border: none;
1563
transition-duration: $duration;
1564
text-align: center;
1565
}
1566
.app-well-app.app-folder > .overview-icon {
1568
background-color: on(dark, fill);
1569
}
1570
.show-apps .show-apps-icon {
1572
color: on(dark, text2);
1573
}
1574
.show-apps:hover .show-apps-icon,
1576
.show-apps:active .show-apps-icon,
1577
.show-apps:checked .show-apps-icon,
1578
.show-apps:focus .show-apps-icon {
1579
color: on(dark);
1580
transition-duration: $duration;
1581
}
1582
// Collections
1585
.app-folder-popup { //expanded collection
1586
-arrow-border-radius: $corner-radius;
1587
-arrow-background-color: on(dark, fill);
1588
-arrow-base: 24px;
1589
-arrow-rise: 12px;
1590
}
1591
.app-folder-popup-bin { padding: 5px; }
1592
.app-folder-icon {
1593
padding: 5px;
1594
spacing-rows: 5px;
1595
spacing-columns: 5px;
1596
}
1597
.page-indicator {
1599
padding: 15px 20px;
1600
.page-indicator-icon {
1602
width: 12px;
1603
height: 12px;
1604
border-radius: 12px;
1605
background-image: none;
1606
background-color: on(dark, text2-disabled);
1607
transition-duration: $duration;
1608
}
1609
&:hover .page-indicator-icon {
1610
background-image: none;
1611
background-color: on(dark, text-disabled);
1612
}
1613
&:active .page-indicator-icon {
1614
background-image: none;
1615
background-color: on(dark, text2);
1616
}
1617
&:checked .page-indicator-icon {
1618
background-image: none;
1619
background-color: on(dark);
1620
transition-duration: 0ms;
1621
}
1622
&:checked:active { background-image: none; }
1623
}
1624
.no-frequent-applications-label { @extend %status_text; }
1626
.app-well-app > .overview-icon.overview-icon-with-label,
1628
.grid-search-result .overview-icon.overview-icon-with-label {
1629
padding: 10px 8px 5px 8px;
1630
spacing: 4px;
1631
}
1632
// Workspace pager
1634
.workspace-thumbnails { //container ala dash
1635
@extend %overview-panel;
1636
visible-width: 32px; //amount visible before hover
1637
spacing: 12px;
1638
padding: 12px;
1639
border-radius: $corner-radius 0 0 $corner-radius;
1640
//border-width: 0; //fixme: can't have non unoform borders :(
1641
&:rtl { border-radius: 0 $corner-radius $corner-radius 0;}
1642
.placeholder {
1644
background-image: url("assets/dash-placeholder.svg");
1645
background-size: contain;
1646
height: 24px;
1647
}
1648
}
1649
.workspace-thumbnail-indicator {
1650
border: 0 solid on(dark);
1651
border-left-width: 2px;
1652
padding: 6px 10px;
1653
border-radius: 0;
1654
}
1655
//Some hacks I don't even
1657
.search-display > StBoxLayout,
1658
.all-apps,
1659
.frequent-apps > StBoxLayout {
1660
// horizontal padding to make sure scrollbars or dash don't overlap content
1661
padding: 0px 88px 10px 88px;
1662
}
1663
%overview-panel {
1665
transition-duration: $duration-panel;
1666
color: on(dark);
1667
background-color: on(dark, fill);
1668
border: none;
1669
}
1670
%status_text {
1672
@include type(headline3);
1673
color: on(dark, text-disabled);
1674
}
1675
/* NOTIFICATIONS & MESSAGE TRAY */
1677
.url-highlighter { link-color: $primary; }
1679
// Banners
1681
.notification-banner {
1682
font-size: 1em;
1683
width: 34em;
1684
min-height: $menuitem-size * 2;
1685
margin: 5px;
1686
border-radius: $corner-radius;
1687
color: $text;
1688
background-color: $surface;
1689
border: none;
1690
box-shadow: $shadow-2;
1691
&:hover { background-color: $surface; }
1692
&:focus { background-color: $surface; }
1693
.notification-icon { padding: 5px; }
1695
.notification-content { padding: 5px; spacing: 5px; }
1696
.secondary-icon { icon-size: em(16px); }
1697
.notification-actions {
1698
background-color: transparent;
1699
padding-top: 0;
1700
padding: $container-padding;
1701
spacing: $container-padding;
1702
}
1703
.notification-button {
1704
transition-duration: $duration;
1705
min-height: $medium-size;
1706
padding: 0 8px;
1707
border-radius: $corner-radius;
1708
background-color: transparent;
1709
color: $primary;
1710
font-weight: 500;
1711
&:first-child { border-radius: $corner-radius; }
1712
&:last-child { border-radius: $corner-radius; }
1713
&:focus { background-color: $primary-overlay-focus; }
1714
&:hover { background-color: $primary-overlay-hover; }
1715
&:active {
1716
transition-duration: $duration-ripple;
1717
background-color: $primary-overlay-active;
1718
}
1719
}
1720
}
1721
.summary-source-counter {
1722
font-size: 1em;
1723
font-weight: bold;
1724
height: 1.6em; width: 1.6em;
1725
-shell-counter-overlap-x: 3px;
1726
-shell-counter-overlap-y: 3px;
1727
background-color: $primary;
1728
color: on($primary);
1729
border: 2px solid on($primary);
1730
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
1731
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
1732
}
1733
.secondary-icon { icon-size: em(16px); }
1735
//chat bubbles
1737
.chat-body { spacing: 5px; }
1738
.chat-response { margin: 5px; }
1739
.chat-log-message { color: $text; }
1740
.chat-new-group { padding-top: 1em; }
1741
.chat-received {
1742
padding-left: 4px;
1743
&:rtl { padding-left: 0px; padding-right: 4px; }
1744
}
1745
.chat-sent {
1746
padding-left: 18pt;
1747
color: $text2;
1748
&:rtl { padding-left: 0; padding-right: 18pt; }
1749
}
1750
.chat-meta-message {
1751
padding-left: 4px;
1752
@include type(caption);
1753
color: $text2;
1754
&:rtl { padding-left: 0; padding-right: 4px; }
1755
}
1756
//hotplug
1758
.hotplug-transient-box {
1759
spacing: 6px;
1760
padding: 2px 72px 2px 12px;
1761
}
1762
.hotplug-notification-item {
1763
padding: 2px 10px;
1764
&:focus { padding: 1px 71px 1px 11px; }
1765
}
1766
.hotplug-notification-item-icon {
1768
icon-size: 24px;
1769
padding: 2px 5px;
1770
}
1771
.hotplug-resident-box { spacing: 8px; }
1773
.hotplug-resident-mount {
1775
transition-duration: $duration;
1776
spacing: 8px;
1777
border-radius: $corner-radius;
1778
&:hover { background-color: $overlay-hover; }
1779
&:active {
1780
transition-duration: $duration-ripple;
1781
background-color: $overlay-active;
1782
}
1783
}
1784
.hotplug-resident-mount-label {
1786
color: inherit;
1787
padding-left: 6px;
1788
}
1789
.hotplug-resident-mount-icon {
1791
icon-size: 24px;
1792
padding-left: 6px;
1793
}
1794
.hotplug-resident-eject-icon {
1796
icon-size: 16px;
1797
}
1798
.hotplug-resident-eject-button {
1800
padding: 7px;
1801
border-radius: $corner-radius;
1802
color: $text;
1803
}
1804
/* Eeeky things */
1806
//magnifier
1808
.magnifier-zoom-region {
1810
border: 2px solid $primary;
1811
&.full-screen { border-width: 0; }
1812
}
1813
//Keyboard
1815
/* On-screen Keyboard */
1816
.word-suggestions {
1817
@include type(subtitle1);
1818
spacing: 12px;
1819
min-height: 20pt;
1820
}
1821
#keyboard {
1823
background-color: $scrim-alt;
1824
}
1825
.key-container {
1827
padding: 4px;
1828
spacing: 4px;
1829
}
1830
.keyboard-key {
1832
min-height: 1.2em;
1833
min-width: 1.2em;
1834
font-size: 2em;
1835
font-weight: 500;
1836
border-radius: $corner-radius;
1837
border: none;
1838
@include button(normal);
1839
&:focus { @include button(focus); }
1840
&:hover,&:checked { @include button(hover); }
1841
&:active { @include button(active);}
1842
&:grayed { //FIXME
1843
background-color: $scrim-alt;
1844
color: on($scrim-alt);
1845
border-color: $scrim-alt;
1846
}
1847
&.default-key {
1848
border-color: transparent;
1849
background-color: $surface;
1850
background-size: 24px;
1851
&:active { background-color: mix($text, $surface, percentage(0.2)); }
1852
}
1853
&.enter-key {
1854
border-color: transparent;
1855
background-color: $primary;
1856
background-image: url("assets/key-enter.svg");
1857
&:active { background-color: mix(on($primary), $primary, percentage(0.2)); }
1858
}
1859
&.shift-key-lowercase {
1860
background-image: url("assets/key-shift.svg");
1861
}
1862
&.shift-key-uppercase {
1863
background-image: url("assets/key-shift-uppercase.svg");
1864
}
1865
&.shift-key-uppercase:latched {
1866
background-image: url("assets/key-shift-latched-uppercase.svg");
1867
}
1868
&.hide-key {
1869
background-image: url("assets/key-hide.svg");
1870
}
1871
&.layout-key {
1872
background-image: url("assets/key-layout.svg");
1873
}
1874
}
1875
.keyboard-subkeys { //long press on a key popup
1877
color: inherit;
1878
padding: 5px;
1879
-arrow-border-radius: 0;
1880
-arrow-background-color: transparent;
1881
-arrow-border-width: 0;
1882
-arrow-border-color: transparent;
1883
-arrow-base: 0;
1884
-arrow-rise: 0;
1885
-boxpointer-gap: 5px;
1886
background-color: $surface;
1887
border-radius: $corner-radius;
1888
box-shadow: $shadow-2;
1889
}
1890
// IBus Candidate Popup
1892
.candidate-popup-content {
1894
padding: 8px;
1895
spacing: 0;
1896
}
1897
.candidate-index {
1899
padding: 0 4px 0 0;
1900
color: $text2;
1901
}
1902
.candidate-box {
1904
transition-duration: $duration;
1905
min-height: $menuitem-size;
1906
padding: 0 8px;
1907
border-radius: $corner-radius;
1908
&:hover { background-color: $overlay-hover; color: $text; transition-duration: 0ms; }
1909
&:active { background-color: $overlay-active; color: $text; transition-duration: $duration-ripple; }
1910
&:selected { background-color: $overlay-selected; color: $text; transition-duration: 0ms; }
1911
}
1912
.candidate-page-button-box {
1914
height: $menuitem-size;
1915
.vertical & { padding-top: 0; }
1916
.horizontal & { padding-left: 0; }
1917
}
1918
.candidate-page-button {
1920
min-width: $menuitem-size;
1921
min-height: $menuitem-size;
1922
padding: 0;
1923
}
1924
.candidate-page-button-previous { border-radius: $corner-radius; border-right-width: 0; }
1926
.candidate-page-button-next { border-radius: $corner-radius; }
1927
.candidate-page-button-icon { icon-size: em(16px); }
1928
/* Auth Dialogs & Screen Shield */
1930
.framed-user-icon {
1932
background-size: contain;
1933
border: none;
1934
color: on($os-background);
1935
border-radius: $corner-radius;
1936
&:hover {
1937
border-color: on($os-background);
1938
color: on($os-background);
1939
}
1940
}
1941
// LOGIN DIALOG
1943
.login-dialog-banner-view {
1945
padding-top: 24px;
1946
max-width: 23em;
1947
}
1948
.login-dialog {
1950
//reset
1951
border: none;
1952
background-color: transparent;
1953
StEntry {
1955
color: on($os-background);
1956
selection-background-color: on($os-background, stroke);
1957
selected-color: on($os-background);
1958
@include entry(normal, $fc:on($os-background, stroke));
1959
&:focus { @include entry(focus, $fc:on($os-background)); }
1960
&:insensitive {
1961
@include entry(insensitive, $fc:on($os-background, stroke-disabled));
1962
color: on($os-background, text-disabled);
1963
}
1964
}
1965
.modal-dialog-button-box { spacing: 3px; }
1967
.modal-dialog-button {
1968
min-width: 64px - 8px * 2;
1969
padding: 0 8px;
1970
@include button(flat-normal, $tc: on($os-background));
1971
&:hover,&:focus { @include button(flat-hover, $tc: on($os-background)); }
1972
&:active { @include button(flat-active, $tc: on($os-background)); }
1973
&:insensitive { @include button(flat-insensitive, $tc: on($os-background)); }
1974
&:default {
1976
min-width: 64px - 16px * 2;
1977
padding: 0 16px;
1978
@include button(normal, $c: $primary, $tc: on($primary));
1979
&:hover,&:focus { @include button(hover, $c: $primary, $tc: on($primary)); }
1980
&:active { @include button(active, $c: $primary, $tc: on($primary)); }
1981
&:insensitive { @include button(insensitive, $c: on($os-background, fill), $tc: on($os-background, text-disabled)); }
1982
}
1983
}
1984
}
1985
.login-dialog-logo-bin { padding: 24px 0px; }
1987
.login-dialog-banner { color: on($os-background, text2); }
1988
.login-dialog-button-box { spacing: 5px; }
1989
.login-dialog-message-warning { color: on($os-background, error); }
1990
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
1991
.login-dialog-user-selection-box { padding: 100px 0px; }
1992
.login-dialog-not-listed-label {
1993
padding-left: 2px;
1994
.login-dialog-not-listed-button:focus &,
1995
.login-dialog-not-listed-button:hover & {
1996
color: on($os-background);
1997
}
1998
}
1999
.login-dialog-not-listed-label {
2000
transition-duration: $duration;
2001
font-size: 1em;
2002
font-weight: bold;
2003
color: on($os-background, text2);
2004
padding-top: 1em;
2005
border-radius: $corner-radius;
2006
&:hover {
2007
background-color: $inverse-overlay-hover;
2008
color: on($os-background);
2009
}
2010
&:focus { background-color: $inverse-overlay-focus; }
2011
&:active {
2012
transition-duration: $duration-ripple;
2013
background-color: $inverse-overlay-active;
2014
color: on($os-background);
2015
}
2016
}
2017
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
2019
.login-dialog-user-list {
2020
spacing: 12px;
2021
width: 23em;
2022
&:expanded .login-dialog-user-list-item:selected { background-color: $inverse-overlay-focus; color: on($os-background); }
2023
&:expanded .login-dialog-user-list-item:hover { background-color: $inverse-overlay-hover; color: on($os-background); }
2024
&:expanded .login-dialog-user-list-item:active { background-color: $inverse-overlay-active; color: on($os-background); }
2025
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid on($os-background); }
2026
}
2027
.login-dialog-user-list-item {
2028
transition-duration: $duration;
2029
border-radius: $corner-radius;
2030
padding: 6px;
2031
color: on($os-background, text2);
2032
&:ltr .user-widget { padding-right: 1em; }
2033
&:rtl .user-widget { padding-left: 1em; }
2034
&:hover {
2035
background-color: $inverse-overlay-hover;
2036
color: on($os-background);
2037
}
2038
&:active {
2039
transition-duration: $duration-ripple;
2040
background-color: $inverse-overlay-active;
2041
color: on($os-background);
2042
}
2043
.login-dialog-timed-login-indicator {
2044
height: 2px;
2045
margin-top: 6px;
2046
background-color: on($os-background);
2047
}
2048
&:focus .login-dialog-timed-login-indicator { background-color: on($os-background); }
2049
}
2050
.login-dialog-username,
2052
.user-widget-label {
2053
color: on($os-background);
2054
@include type(headline6);
2055
text-align: left;
2056
padding-left: 15px;
2057
}
2058
.user-widget-label {
2059
&:ltr { padding-left: 14px; }
2060
&:rtl { padding-right: 14px; }
2061
}
2062
.login-dialog-prompt-layout {
2064
padding-top: 24px;
2065
padding-bottom: 12px;
2066
spacing: 8px;
2067
width: 23em;
2068
}
2069
.login-dialog-prompt-label {
2071
color: on($os-background, text2);
2072
font-size: 1em;
2073
padding-top: 1em;
2074
}
2075
.login-dialog-session-list-button StIcon {
2077
icon-size: 1.25em;
2078
}
2079
.login-dialog-session-list-button {
2081
color: on($os-background, text2);
2082
&:hover,&:focus { color: on($os-background); }
2083
&:active { color: on($os-background); }
2084
}
2085
//SCREEN SHIELD
2087
.screen-shield-arrows {
2089
padding-bottom: 3em;
2090
}
2091
.screen-shield-arrows Gjs_Arrow {
2093
color: white;
2094
width: 80px;
2095
height: 48px;
2096
-arrow-thickness: 12px;
2097
-arrow-shadow: $shadow-1;
2098
}
2099
.screen-shield-clock {
2101
color: white;
2102
text-shadow: $shadow-1;
2103
font-weight: normal;
2104
text-align: center;
2105
padding-bottom: 1.5em;
2106
}
2107
.screen-shield-clock-time {
2109
@include type(headline1);
2110
text-shadow: $shadow-1;
2111
font-feature-settings: "tnum";
2112
}
2113
.screen-shield-clock-date { @include type(headline4); }
2115
.screen-shield-notifications-container {
2117
spacing: 6px;
2118
width: 30em;
2119
background-color: transparent;
2120
max-height: 500px;
2121
.summary-notification-stack-scrollview {
2122
padding-top: 0;
2123
padding-bottom: 0;
2124
}
2125
.notification,
2127
.screen-shield-notification-source {
2128
padding: 8px;
2129
border: none;
2130
background-color: $scrim-alt;
2131
color: on($scrim-alt);
2132
border-radius: $corner-radius;
2133
}
2134
.notification { margin-right: 16px; } //compensate for space allocated to the scrollbar
2135
}
2136
.screen-shield-notification-label {
2139
min-height: $small-size - 2px;
2140
padding: 2px 0px 0px 16px;
2141
font-weight: bold;
2142
}
2143
.screen-shield-notification-count-text {
2145
min-height: $small-size - 2px;
2146
padding: 2px 0px 0px 16px;
2147
color: on($scrim-alt, text2);
2148
}
2149
#panel.lock-screen { background-color: $scrim-alt; }
2151
.screen-shield-background { //just the shadow, really
2153
background: black;
2154
box-shadow: $shadow-5;
2155
}
2156
#lockDialogGroup {
2158
background: $os-background;
2159
background-size: cover;
2160
color: on($os-background, text2);
2161
}
2162
#screenShieldNotifications {
2164
StScrollBar { @extend %overview_scrollbar; }
2165
}
2166
// Looking Glass
2169
#LookingGlassDialog {
2170
background-color: $surface;
2171
spacing: 4px;
2172
padding: 0;
2173
border: none;
2174
border-radius: $corner-radius;
2175
box-shadow: $shadow-4;
2176
& > #Toolbar {
2177
padding: 0 8px;
2178
border: none;
2179
border-radius: 0;
2180
background-color: rgba($surface, 0.01);
2181
box-shadow: inset 0 -1px 0 $divider;
2182
}
2183
.labels { spacing: 0; }
2184
.notebook-tab {
2185
-natural-hpadding: 12px;
2186
-minimum-hpadding: 6px;
2187
font-weight: bold;
2188
color: $text2;
2189
transition-duration: $duration;
2190
padding-left: 16px;
2191
padding-right: 16px;
2192
min-height: $medium-size;
2193
padding: 0 16px * 2;
2194
&:hover {
2195
background-color: $overlay-hover;
2196
color: $text;
2197
text-shadow: none;
2198
}
2199
&:active {
2200
background-color: $overlay-active;
2201
color: $text;
2202
transition-duration: $duration-ripple;
2203
}
2204
&:selected {
2205
border-bottom-width: 0;
2206
border-color: transparent;
2207
background-color: rgba($surface, 0.01);
2208
box-shadow: inset 0 -2px 0px $primary;
2209
color: $text;
2210
text-shadow: none;
2211
}
2212
}
2213
StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
2214
StBoxLayout#ResultsArea { spacing: 4px; }
2215
}
2216
.lg-dialog {
2218
StEntry {
2219
selection-background-color: $overlay-selected;
2220
selected-color: $text;
2221
}
2222
.shell-link {
2223
color: $primary;
2224
&:hover { color: $primary; }
2225
}
2226
}
2227
.lg-completions-text {
2229
font-size: 1em;
2230
font-style: italic;
2231
}
2232
.lg-obj-inspector-title {
2234
spacing: 4px;
2235
}
2236
.lg-obj-inspector-button {
2238
min-height: $medium-size;
2239
min-width: 64px - 8px * 2;
2240
padding: 0 8px;
2241
border: none;
2242
border-radius: $corner-radius;
2243
@include type(button);
2244
@include button(flat-normal);
2245
&:hover { @include button(flat-hover); }
2246
&:active { @include button(flat-active); }
2247
&:insensitive { @include button(flat-insensitive); }
2248
&:focus { @include button(flat-focus); }
2249
&:hover { border: none; }
2250
}
2251
#lookingGlassExtensions { padding: 4px; }
2253
.lg-extensions-list {
2255
padding: 4px;
2256
spacing: 6px;
2257
}
2258
.lg-extension {
2260
border: none;
2261
border-radius: $corner-radius;
2262
padding: 4px;
2263
}
2264
.lg-extension-name {
2266
@include type(headline5);
2267
}
2268
.lg-extension-meta {
2270
spacing: 6px;
2271
}
2272
#LookingGlassPropertyInspector {
2274
background: $surface;
2275
border: none;
2276
border-radius: $corner-radius;
2277
padding: 6px;
2278
box-shadow: $shadow-4;
2279
}
2280