ASCII text
1
/* Buttons */
2
.button, %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, %bubble_button {
17
min-height: $medium-size;
18
min-width: 64px - 8px * 2;
19
margin: $container-padding;
20
margin-right: 0;
21
padding: 0 8px;
22
border-top: 0;
23
border-right-width: 0;
24
border-radius: $corner-radius;
25
@include type(button);
26
@include button(flat-normal);
27
&:focus { @include button(flat-focus); }
28
&:hover { @include button(flat-hover); }
29
&:active { @include button(flat-active); }
30
&:insensitive { @include button(flat-insensitive); }
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
-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
-slider-handle-border-width: 0;
106
-slider-handle-border-color: transparent;
107
color: $primary;
108
&:hover { color: $primary; }
109
&:active { color: $primary; }
110
}
111
/* Check Boxes */
113
.check-box {
115
* {
116
min-height: $medium-size - 8px * 2;
117
padding: 8px 0;
118
}
119
StBoxLayout { spacing: 8px; }
120
StBin {
121
transition-duration: $duration;
122
width: 24px;
123
height: 24px;
124
padding: ($medium-size - 24px) / 2;
125
border-radius: 100px;
126
background-image: url("assets/checkbox-off.svg");
127
}
128
&:focus StBin {
129
background-image: url("assets/checkbox-off.svg");
130
}
131
&:hover StBin {
132
background-color: $overlay-hover;
133
}
134
&:active StBin {
135
transition-duration: $duration-ripple;
136
background-color: $overlay-active;
137
}
138
&:checked StBin {
139
background-image: url("assets/checkbox.svg");
140
}
141
&:focus:checked StBin {
142
background-image: url("assets/checkbox.svg");
143
}
144
&:hover:checked StBin {
145
background-color: rgba($primary, 0.08);
146
}
147
&:active:checked StBin {
148
background-color: rgba($primary, 0.2);
149
}
150
}
151
/* Switches */
153
.toggle-switch {
154
color: transparent;
155
width: 40px;
156
height: 20px;
157
background-size: contain;
158
background-image: url("assets/toggle-off.svg");
159
&:checked { background-image: url("assets/toggle-on.svg"); }
160
}
161
/* Modal Dialogs */
163
.headline { @include type(headline6); }
165
.lightbox { background-color: black; }
166
.flashspot { background-color: white; }
167
.modal-dialog {
169
border-radius: $corner-radius;
170
@extend %bubble-panel;
171
box-shadow: $shadow-4;
172
.modal-dialog-content-box {
173
padding: 24px;
174
}
175
.run-dialog-entry { width: 20em; margin-bottom: 0; }
176
.run-dialog-error-box {
177
padding-top: 16px;
178
spacing: 6px;
179
}
180
.run-dialog-button-box { padding-top: 1em; }
181
.run-dialog-label {
182
font-size: 1em;
183
font-weight: normal;
184
color: $text2;
185
padding-bottom: .4em;
186
}
187
}
189
.mount-dialog-subject,
191
.end-session-dialog-subject { //this should be a generic header class
192
@include type(headline6);
193
}
194
/* Message Dialog */
196
.message-dialog-main-layout {
197
padding: 12px 20px 0;
198
spacing: 12px;
199
}
200
.message-dialog-content {
202
max-width: 28em;
203
spacing: 20px;
204
}
205
.message-dialog-icon {
207
min-width: 48px;
208
icon-size: 48px;
209
}
210
.message-dialog-title {
212
font-weight: bold;
213
}
214
.message-dialog-subtitle {
216
color: $text2;
217
font-weight: normal;
218
}
219
/* End Session Dialog */
221
.end-session-dialog {
222
spacing: 42px;
223
border: none;
224
}
225
.end-session-dialog-list {
227
padding-top: 20px;
228
}
229
.end-session-dialog-layout {
231
padding-left: 17px;
232
&:rtl { padding-right: 17px; }
233
}
234
.end-session-dialog-description {
236
width: 28em;
237
padding-bottom: 10px;
238
&:rtl {
239
text-align: right;
240
}
241
}
242
.end-session-dialog-warning {
244
width: 28em;
245
color: $warning;
246
padding-top: 6px;
247
&:rtl {
248
text-align: right;
249
}
250
}
251
.end-session-dialog-logout-icon {
253
border-radius: $circular-radius;
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
@extend %bubble-panel;
359
//this is the width of the entire modal popup
360
width: 34em;
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
.prompt-dialog-pim-box {
397
spacing: 1em;
398
}
399
.prompt-dialog-grid {
401
spacing-rows: 15px;
402
spacing-columns: 1em;
403
}
404
.prompt-dialog-keyfiles-box {
406
spacing: 1em;
407
}
408
.prompt-dialog-button.button {
410
padding: 0 8px;
411
}
412
/* Polkit Dialog */
415
.polkit-dialog-user-layout {
417
padding-left: 10px;
418
spacing: 10px;
419
&:rtl {
420
padding-left: 0px;
421
padding-right: 10px;
422
}
423
}
424
.polkit-dialog-user-root-label {
426
color: $warning;
427
}
428
.polkit-dialog-user-icon {
430
border-radius: $circular-radius;
431
background-size: contain;
432
width: 48px;
433
height: 48px;
434
}
435
/* Audio selection dialog */
437
.audio-device-selection-dialog {
438
@extend %bubble-panel;
439
spacing: 30px;
440
}
441
.audio-selection-content {
443
spacing: 20px;
444
padding: 24px;
445
}
446
.audio-selection-title {
448
font-weight: bold;
449
text-align: center;
450
}
451
.audio-selection-box {
453
spacing: 20px;
454
}
455
.audio-selection-device {
457
border: none;
458
border-radius: $corner-radius;
459
&:focus { background-color: $overlay-focus; }
460
&:hover { background-color: $overlay-hover; }
461
&:active {
462
background-color: $overlay-active;
463
color: $text;
464
}
465
}
466
.audio-selection-device-box {
468
padding: 20px;
469
spacing: 20px;
470
}
471
.audio-selection-device-icon {
473
icon-size: 64px;
474
}
475
/* Access Dialog */
477
.access-dialog {
478
@extend %bubble-panel;
479
spacing: 30px;
480
}
481
/* Geolocation Dialog */
483
.geolocation-dialog {
484
@extend %bubble-panel;
485
spacing: 30px;
486
}
487
/* Extension Dialog */
489
.extension-dialog {
490
@extend %bubble-panel;
491
.message-dialog-main-layout { spacing: 24px; padding: 10px; }
492
.message-dialog-title { font-weight: normal; color: $text2; }
493
}
494
/* Inhibit-Shortcuts Dialog */
496
.inhibit-shortcuts-dialog {
497
@extend %bubble-panel;
498
spacing: 30px;
499
}
500
/* Network Agent Dialog */
502
.network-dialog-secret-table {
504
spacing-rows: 15px;
505
spacing-columns: 1em;
506
}
507
.keyring-dialog-control-table {
509
spacing-rows: 15px;
510
spacing-columns: 1em;
511
}
512
/* Popovers/Menus */
514
.popup-menu {
516
min-width: 200px;
517
color: $text;
518
border-color: transparent;
519
.popup-menu-arrow { } //defined globally in the TOP BAR
521
.popup-sub-menu {
522
padding-bottom: 0;
523
background-color: $entry-fill;
524
box-shadow: $shadow-0;
525
}
526
.popup-menu-content { padding: 8px 0; }
528
.popup-menu-item {
529
// min-height: $menuitem-size - 4px * 2;
530
spacing: 8px;
531
transition-duration: $duration;
532
&:ltr { padding: 0.4em 24px 0.4em 0; }
534
&:rtl { padding: 0.4em 0 0.4em 24px; }
535
&:checked {
536
background-color: $overlay-selected;
537
box-shadow: $shadow-0;
538
font-weight: normal;
539
&.selected {
540
background-color: rgba($primary, 0.4);
541
}
542
&:active {
543
background-color: rgba($primary, 0.6);
544
}
545
}
546
&.selected {
547
background-color: $overlay-hover;
548
color: $text;
549
transition-duration: 0ms;
550
}
551
&:active {
552
background-color: $overlay-active;
553
color: $text;
554
transition-duration: $duration-ripple;
555
}
556
&.selected:active { color: $text; }
557
&:insensitive { color: $text-disabled; }
558
}
559
.popup-inactive-menu-item { //all icons and other graphical elements
561
color: $text;
562
&:insensitive { color: $text-disabled; }
564
}
565
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
566
&.panel-menu {
567
-boxpointer-gap: 4px;
568
margin-bottom: 1.75em;
569
}
570
}
571
.popup-menu-ornament {
575
text-align: right;
576
width: 16px;
577
height: 16px;
578
}
579
.popup-menu-boxpointer,
580
.candidate-popup-boxpointer {
581
-arrow-border-radius: 20px; // This is necessary for the weird bug: materia-theme#296
582
-arrow-background-color: transparent;
583
-arrow-border-width: 0;
584
-arrow-border-color: transparent;
585
-arrow-base: 0;
586
-arrow-rise: 0;
587
-arrow-box-shadow: none; //dreaming. bug #689995
588
@at-root .popup-menu-content,
590
.candidate-popup-content {
591
margin: 5px 8px 8px;
592
background-color: $surface;
593
border-radius: $corner-radius;
594
box-shadow: $shadow-2;
595
}
596
}
597
.popup-separator-menu-item {
599
//-margin-horizontal: 24px;
600
height: 1px; //not really the whole box
601
margin: 8px 64px - 24px;
602
background-color: $divider;
603
border-color: transparent;
604
border-bottom-width: 0;
605
border-bottom-style: none;
606
}
607
// Rename popup
609
.rename-folder-popup {
610
.rename-folder-popup-item {
611
spacing: 6px;
612
&:ltr, &:rtl { padding: 0, 12px; }
613
}
614
}
615
// Background menu
617
.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0; }
618
/* fallback menu
620
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
621
app menu inside the main app window itself rather than the top bar
622
*/
623
/* OSD */
625
.osd-window {
626
text-align: center;
627
font-weight: bold;
628
spacing: 1em;
629
margin: 32px;
630
min-width: 64px;
631
min-height: 64px;
632
.osd-monitor-label { @include type(headline3); }
634
.level {
635
height: 8px;
636
-barlevel-height: 8px;
637
-barlevel-background-color: $stroke-disabled;
638
-barlevel-active-background-color: $primary;
639
-barlevel-overdrive-color: $error;
640
-barlevel-overdrive-separator-width: 2px;
641
}
642
}
643
/* Pad OSD */
645
.pad-osd-window {
646
padding: 32px;
647
background-color: $scrim;
648
.pad-osd-title-box { spacing: 12px; }
650
.pad-osd-title-menu-box { spacing: 6px; }
651
}
652
.combo-box-label {
654
width: 15em;
655
}
656
/* App Switcher */
658
.switcher-popup {
659
padding: 8px;
660
spacing: 16px;
661
}
662
.osd-window,
664
.resize-popup,
665
.switcher-list {
666
@extend %osd-panel;
667
}
668
.switcher-list-item-container { spacing: 8px; }
670
.switcher-list .item-box {
672
transition-duration: $duration;
673
padding: 8px;
674
border-radius: $corner-radius;
675
}
676
.switcher-list .item-box:outlined {
678
padding: 8px;
679
border: none;
680
background-color: $stroke-disabled;
681
color: $text; // for Ubuntu session
682
}
683
.switcher-list .item-box:selected {
685
background-color: $overlay-selected;
686
color: $text;
687
}
688
.switcher-list .thumbnail-box {
690
padding: 2px;
691
spacing: 4px;
692
}
693
.switcher-list .thumbnail {
695
width: 256px;
696
}
697
.switcher-list .separator {
699
width: 1px;
700
background: $divider;
701
}
702
.switcher-arrow {
704
transition-duration: $duration;
705
border-color: rgba(0,0,0,0);
706
color: $text2;
707
&:highlighted {
708
color: $text;
709
}
710
}
711
.input-source-switcher-symbol {
713
@include type(headline3);
714
width: 96px;
715
height: 96px;
716
}
717
/* Window Cycler */
719
.cycler-highlight { border: 4px solid $primary; }
720
/* Workspace Switcher */
722
.workspace-switcher-group { padding: 8px; }
723
.workspace-switcher-container {
725
@extend %osd-panel;
726
}
727
.workspace-switcher {
729
background: transparent;
730
border: 0px;
731
border-radius: 0px;
732
padding: 0px;
733
spacing: 8px;
734
}
735
.ws-switcher-active-up, .ws-switcher-active-down,
737
.ws-switcher-active-left, .ws-switcher-active-right {
738
height: 48px;
739
background-color: $primary;
740
color: on($primary);
741
background-size: 32px;
742
border-radius: $corner-radius;
743
}
744
.ws-switcher-box {
746
height: 48px;
747
border: none;
748
background: $stroke-disabled;
749
border-radius: $corner-radius;
750
}
751
%osd-panel {
753
color: $text;
754
background-color: $surface;
755
border: none;
756
box-shadow: $shadow-4;
757
border-radius: $corner-radius;
758
padding: 12px;
759
}
760
%bubble-panel {
762
color: $text;
763
background-color: $surface;
764
border: none;
765
StEntry { @extend %entry; }
767
.button { @extend %button; }
768
}
769
/* Tiled window previews */
771
.tile-preview {
772
background-color: rgba(on(dark, primary), 0.3);
773
border: 1px solid on(dark, primary);
774
}
775
.tile-preview-left.on-primary {
777
border-radius: 0;
778
}
779
.tile-preview-right.on-primary {
781
border-radius: 0;
782
}
783
.tile-preview-left.tile-preview-right.on-primary {
785
border-radius: 0;
786
}
787
/* TOP BAR */
789
#panel {
791
background-color: $panel;
792
/* transition from solid to transparent */
793
transition-duration: $duration-panel;
794
font-weight: bold;
795
height: $menuitem-size;
796
font-feature-settings: "tnum";
797
&:overview,
799
&.unlock-screen,
800
&.login-screen,
801
&.lock-screen {
802
background-color: transparent;
803
}
804
#panelLeft, #panelCenter { // spacing between activities<>app menu and such
806
spacing: 0;
807
}
808
.panel-corner {
810
-panel-corner-radius: 0;
811
-panel-corner-background-color: transparent;
812
-panel-corner-border-width: 0;
813
-panel-corner-border-color: transparent;
814
&:active, &:overview, &:focus {
816
-panel-corner-border-color: transparent;
817
}
818
&.lock-screen, &.login-screen, &.unlock-screen {
820
-panel-corner-radius: 0;
821
-panel-corner-background-color: transparent;
822
-panel-corner-border-color: transparent;
823
}
824
}
825
.panel-button {
827
-natural-hpadding: $panel-button-hpadding;
828
-minimum-hpadding: $panel-button-hpadding / 2;
829
font-weight: bold;
830
color: on($panel, text2);
831
text-shadow: none;
832
transition-duration: $duration;
833
.app-menu-icon {
835
-st-icon-style: symbolic;
836
margin-left: 4px;
837
margin-right: 4px;
838
//dimensions of the icon are hardcoded
839
}
840
.system-status-icon,
842
.app-menu-icon > StIcon,
843
.popup-menu-arrow {
844
icon-shadow: none;
845
}
846
&:hover {
848
color: on($panel);
849
text-shadow: none;
850
.system-status-icon,
852
.app-menu-icon > StIcon,
853
.popup-menu-arrow {
854
icon-shadow: none;
855
}
856
}
857
&:active, &:overview, &:focus, &:checked {
859
// Trick due to St limitations. It needs a background to draw
860
// a box-shadow
861
background-color: rgba($panel, 0.01);
862
box-shadow: inset 0 -2px 0px on($panel);
863
color: on($panel);
864
& > .system-status-icon { icon-shadow: none; }
866
}
867
.system-status-icon { icon-size: em(16px); padding: 0 4px; }
869
.unlock-screen &,
870
.login-screen &,
871
.lock-screen & {
872
color: on($panel, text2);
873
&:focus, &:hover, &:active { color: on($panel); }
874
}
875
}
876
.panel-status-indicators-box,
878
.panel-status-menu-box {
879
spacing: 2px;
880
}
881
// spacing between power icon and (optional) percentage label
883
.power-status.panel-status-indicators-box {
884
spacing: 0;
885
}
886
.screencast-indicator { color: $warning; }
888
.remote-access-indicator { color: $warning; }
890
&.solid {
892
background-color: $panel;
893
/* transition from transparent to solid */
894
transition-duration: $duration-panel;
895
background-gradient-direction: none; // for Ubuntu session
896
text-shadow: none; // for Ubuntu session
897
&:overview { background-color: transparent; } // for Ubuntu session
899
.panel-corner {
901
-panel-corner-background-color: $panel;
902
}
903
.panel-button {
905
color: on($panel, text2);
906
text-shadow: none;
907
&:hover, &:active, &:overview, &:focus, &:checked {
909
color: on($panel);
910
}
911
}
912
.system-status-icon,
914
.app-menu-icon > StIcon,
915
.popup-menu-arrow {
916
icon-shadow: none;
917
}
918
}
919
}
920
// calendar popover
922
#calendarArea {
923
padding: 8px 16px;
924
}
925
.calendar {
927
margin-bottom: 0;
928
}
929
.calendar,
931
.datemenu-today-button,
932
.datemenu-displays-box,
933
.message-list-sections {
934
margin: 0 8px;
935
}
936
.datemenu-calendar-column { spacing: 8px; }
938
.datemenu-displays-section { padding-bottom: 0; }
939
.datemenu-displays-box { spacing: 8px; }
940
.datemenu-calendar-column {
942
border: 0 solid $divider;
943
&:ltr { border-left-width: 0; }
944
&:rtl { border-right-width: 0; }
945
}
946
.datemenu-today-button,
948
.world-clocks-button,
949
.weather-button,
950
.events-section-title {
951
min-height: $menuitem-size - 4px * 2;
952
padding: 4px 8px;
953
border-radius: $corner-radius;
954
}
955
.datemenu-today-button {
957
min-height: $menuitem-size * 2 - 4px * 2;
958
}
959
.message-list-section-list:ltr {
961
padding-left: 0;
962
}
963
.message-list-section-list:rtl {
965
padding-right: 0;
966
}
967
.datemenu-today-button,
969
.world-clocks-button,
970
.weather-button,
971
.events-section-title {
972
transition-duration: $duration;
973
&:hover,&:focus { color: $text; background-color: $overlay-hover; }
974
&:active {
975
transition-duration: $duration-ripple;
976
color: $text;
977
background-color: $overlay-active;
978
}
979
}
980
.datemenu-today-button .day-label {
982
}
983
.datemenu-today-button .date-label {
985
@include type(headline5);
986
}
987
.world-clocks-header,
989
.weather-header,
990
.events-section-title {
991
color: $text2;
992
font-weight: bold;
993
}
994
.weather-header.location {
996
font-weight: normal;
997
font-size: 1em;
998
}
999
.world-clocks-grid,
1001
.weather-grid {
1002
spacing-rows: 0.4em;
1003
spacing-columns: 0.8em;
1004
}
1005
.weather-box {
1007
spacing: 0.4em;
1008
}
1009
.world-clocks-city {
1011
font-weight: normal;
1012
font-size: 1em;
1013
}
1014
.world-clocks-time {
1016
color: $text2;
1017
font-feature-settings: "tnum";
1018
font-size: 1em;
1019
}
1020
.world-clocks-timezone {
1022
color: $text-disabled;
1023
font-feature-settings: "tnum";
1024
font-size: 1em;
1025
}
1026
.weather-forecast-icon {
1028
icon-size: em(32px);
1029
}
1030
.weather-forecast-time {
1032
color: $text2;
1033
@include type(caption);
1034
}
1035
.calendar-month-label {
1037
transition-duration: $duration;
1038
height: $menuitem-size - 6px * 2;
1039
margin: 2px;
1040
padding: 6px 16px;
1041
border-radius: $corner-radius;
1042
color: $text;
1043
font-weight: bold;
1044
text-align: center;
1045
&:focus { background-color: $overlay-focus; }
1046
}
1047
.pager-button {
1049
transition-duration: $duration;
1050
width: $menuitem-size;
1051
height: $menuitem-size;
1052
margin: 2px;
1053
border-radius: 100px;
1054
background-color: transparent;
1055
color: $text2;
1056
&:hover, &:focus { background-color: $overlay-hover; color: $text; }
1057
&:active { background-color: $overlay-active; color: $text; transition-duration: $duration-ripple; }
1058
}
1059
.calendar-change-month-back StIcon, .calendar-change-month-forward StIcon { // arrows
1061
icon-size: em(16px);
1062
}
1063
.calendar-day-base {
1065
transition-duration: $duration;
1066
@include type(caption);
1067
text-align: center;
1068
width: $menuitem-size; height: $menuitem-size;
1069
padding: 0;
1070
margin: 2px;
1071
border-radius: 100px;
1072
font-feature-settings: "tnum";
1073
&:hover,&:focus { background-color: $overlay-hover; }
1074
&:active {
1075
transition-duration: $duration-ripple;
1076
color: inherit;
1077
background-color: $overlay-active;
1078
border-color: transparent; //avoid jumparound due to today
1079
}
1080
&:selected {
1081
color: $text;
1082
background-color: $overlay-selected;
1083
border-color: transparent; //avoid jumparound due to today
1084
}
1085
&.calendar-day-heading { //day of week heading
1086
width: $menuitem-size; height: $menuitem-size - 7px;
1087
margin-top: 2px;
1088
padding: 7px 0 0;
1089
border-radius: 100px;
1090
background-color: transparent;
1091
color: $text-disabled;
1092
@include type(caption);
1093
font-weight: bold;
1094
text-align: center;
1095
}
1096
}
1097
.calendar-day { //border collapse hack - see calendar.js
1098
border-width: 0;
1099
}
1100
.calendar-day-top { border-top-width: 0; }
1101
.calendar-day-left { border-left-width: 0; }
1102
.calendar-work-day {
1103
}
1105
.calendar-nonwork-day {
1106
color: $text;
1107
}
1108
.calendar-today {
1109
font-weight: bold !important;
1110
//color: $text;
1111
//background-color: transparent;
1112
border: none;
1113
}
1114
.calendar-day-with-events {
1115
color: $primary;
1116
font-weight: normal;
1117
text-decoration: underline;
1118
background-image: none;
1119
}
1120
.calendar-other-month-day {
1121
color: $text2-disabled;
1122
}
1123
.calendar-week-number {
1124
width: $menuitem-size; height: $menuitem-size - 7px;
1125
margin: 2px;
1126
padding: 7px 0 0;
1127
border-radius: 100px;
1128
background-color: transparent;
1129
color: $text-disabled;
1130
font-size: inherit;
1131
font-weight: bold;
1132
text-align: center;
1133
}
1134
/* Message list */
1136
.message-list {
1137
width: 420px;
1138
}
1139
.message-list-clear-button.button {
1141
@extend %button;
1142
margin: 8px 8px 0;
1143
}
1144
.message-list-sections {
1146
spacing: 8px;
1147
}
1148
.message-list-section,
1150
.message-list-section-list {
1151
spacing: 8px;
1152
}
1153
.message {
1155
transition-duration: $duration;
1156
min-height: $menuitem-size * 2;
1157
border: none;
1158
background-color: transparent;
1159
&:hover,&:focus { background-color: $overlay-hover; }
1160
&:active {
1161
transition-duration: $duration-ripple;
1162
background-color: $overlay-active;
1163
}
1164
border-radius: $corner-radius;
1165
}
1166
.message-icon-bin {
1168
padding: 8px 0px 8px 8px;
1169
&:rtl { padding: 8px 8px 8px 0px; }
1170
}
1171
.message-icon-bin > StIcon {
1173
color: $text;
1174
icon-size: em(16px);
1175
-st-icon-style: requested;
1176
margin: 4px 0px 4px 4px;
1177
&:rtl { margin: 4px 4px 4px 0px; }
1178
}
1179
.message-icon-bin > .fallback-window-icon {
1181
width: em(16px);
1182
height: em(16px);
1183
}
1184
.message-secondary-bin {
1186
padding: 0 8px;
1187
}
1188
.message-secondary-bin > .event-time {
1190
min-height: $small-size - 2px;
1191
padding-top: 2px;
1192
color: $text2;
1193
font-size: 1em;
1194
/* HACK: the label should be baseline-aligned with a 1em label,
1195
fake this with some bottom padding */
1196
padding-bottom: 0;
1197
}
1198
.message-secondary-bin > StIcon {
1200
icon-size: em(16px);
1201
}
1202
.message-title {
1204
min-height: $small-size - 2px;
1205
padding-top: 2px;
1206
color: $text;
1207
font-weight: bold;
1208
font-size: 1em;
1209
}
1210
.message-content {
1212
min-height: $menuitem-size * 2 - 8px * 2;
1213
padding: 8px;
1214
color: $text2;
1215
font-size: 1em;
1216
}
1217
.message-content * > StIcon {
1219
transition-duration: $duration;
1220
icon-size: 16px;
1221
border-radius: 16px;
1222
padding: ($small-size - 16px) / 2;
1223
color: $text2;
1224
}
1225
/* FIXME: how do you do this in sass? */
1227
.message-content *:hover > StIcon,
1228
.message-content *:focus > StIcon {
1229
color: $text;
1230
background-color: $overlay-hover;
1231
}
1232
.message-content *:active > StIcon {
1234
transition-duration: $duration-ripple;
1235
color: $text;
1236
background-color: $overlay-active;
1237
}
1238
.message-media-control {
1240
transition-duration: $duration;
1241
margin: 16px 0;
1242
padding: 8px;
1243
border-radius: 100px;
1244
color: $text2;
1245
&:hover,&:focus { color: $text; background-color: $overlay-hover; }
1246
&:active { color: $text; background-color: $overlay-active; transition-duration: $duration-ripple; }
1247
&:insensitive { color: $text2-disabled; }
1248
&:last-child:ltr { margin-right: 16px; padding-right: 8px; }
1250
&:last-child:rtl { margin-left: 16px; padding-left: 8px; }
1251
}
1252
.media-message-cover-icon {
1254
icon-size: 32px !important;
1255
margin: 8px 0px 8px 4px !important;
1256
&:rtl { margin: 8px 4px 8px 0px !important; }
1257
&.fallback {
1258
icon-size: 16px !important;
1259
padding: 8px;
1260
border: none;
1261
border-radius: $corner-radius;
1262
background-color: $stroke-disabled;
1263
color: $text-disabled;
1264
}
1265
}
1266
// a little unstructured mess:
1269
#appMenu {
1271
spacing: 4px;
1272
.label-shadow { color: transparent; }
1274
}
1275
.app-menu,
1277
.app-well-menu {
1278
max-width: 27.25em;
1279
}
1280
.aggregate-menu {
1282
min-width: 280px;
1283
.popup-menu-icon { padding: 0 4px; }
1284
.popup-sub-menu .popup-menu-item > :first-child {
1285
&:ltr { /* 8px spacing + 2*4px padding */
1286
padding-left: 16px; margin-left: em(16px); }
1287
&:rtl { /* 8px spacing + 2*4px padding */
1288
padding-right: 16px; margin-right: em(16px); }
1289
}
1290
}
1291
.system-menu-action {
1293
-st-icon-style: symbolic;
1294
color: $text2;
1295
border-radius: 100px; /* wish we could do 50% */
1296
padding: ($large-size - 16px) / 2;
1297
border: none;
1298
transition-duration: $duration;
1299
&:hover, &:focus {
1301
background-color: $overlay-hover;
1302
color: $text;
1303
border: none;
1304
padding: ($large-size - 16px) / 2;
1305
}
1306
&:active { background-color: $overlay-active; color: $text; transition-duration: $duration-ripple; }
1307
& > StIcon { icon-size: 16px; }
1309
}
1310
// Activities Ripples
1312
.ripple-box {
1313
width: 48px;
1314
height: 48px;
1315
border-radius: 0 0 48px 0; // radius the size of the box give us the curve
1316
background-color: on(dark, stroke);
1317
background-image: none;
1318
background-size: auto;
1319
box-shadow: none;
1320
}
1321
.ripple-box:rtl {
1323
border-radius: 0 0 0 48px; // just a simple change to the border radius position
1324
background-image: none;
1325
}
1326
// Rubberband for select-area screenshots
1328
.select-area-rubberband {
1329
background-color: rgba(on(dark, primary), 0.3);
1330
border: 1px solid on(dark, primary);
1331
}
1332
// Pointer location
1334
.ripple-pointer-location {
1335
width: 50px;
1336
height: 50px;
1337
border-radius: 25px; // radius the size of the box give us the curve
1338
background-color: $overlay-selected;
1339
box-shadow: none;
1340
}
1341
// not really top bar only
1343
.popup-menu-arrow { icon-size: em(16px); }
1344
.popup-menu-icon { icon-size: em(16px); }
1345
//close buttons
1347
.window-close {
1349
// FIXME: unless disable the transition, button will distort when hovering
1350
// transition-duration: $duration;
1351
background-color: transparent;
1352
border-radius: 0;
1353
border: none;
1354
box-shadow: none;
1355
color: transparent;
1356
height: $medium-size;
1357
width: $medium-size;
1358
-shell-close-overlap: $medium-size / 2;
1359
-st-background-image-shadow: $shadow-1;
1360
background-image: url("assets/window-close.svg");
1361
background-size: $medium-size;
1362
&:hover {
1364
background-color: transparent;
1365
border-color: transparent;
1366
color: transparent;
1367
-st-background-image-shadow: $shadow-2;
1368
background-image: url("assets/window-close.svg");
1369
}
1370
&:active {
1372
background-color: transparent;
1373
border-color: transparent;
1374
color: transparent;
1375
// transition-duration: $duration-ripple;
1376
background-image: url("assets/window-close-active.svg");
1377
}
1378
// For backward compatibility of 3.26.0
1380
&:rtl { -st-background-image-shadow: $shadow-1; }
1381
&:rtl:hover { -st-background-image-shadow: $shadow-2; }
1382
}
1383
// Pointer accessibility notifications
1385
.pie-timer {
1386
width: 60px;
1387
height: 60px;
1388
-pie-border-width: 0;
1389
-pie-border-color: transparent;
1390
-pie-background-color: $overlay-selected;
1391
}
1392
/* NETWORK DIALOGS */
1394
.nm-dialog {
1396
@extend %bubble-panel;
1397
max-height: 34em;
1398
min-height: 31em;
1399
min-width: 32em;
1400
}
1401
.nm-dialog-content {
1403
spacing: 20px;
1404
padding: 24px;
1405
}
1406
.nm-dialog-header-hbox { spacing: 10px; }
1407
.nm-dialog-airplane-box { spacing: 12px; }
1408
.nm-dialog-airplane-headline {
1410
font-weight: bold;
1411
text-align: center;
1412
}
1413
.nm-dialog-airplane-text { color: $text; }
1415
.nm-dialog-header-icon { icon-size: 32px; }
1416
.nm-dialog-scroll-view { border: none; }
1417
.nm-dialog-header { @include type(headline6); }
1418
.nm-dialog-item {
1420
transition-duration: $duration;
1421
font-size: 1em;
1422
border-bottom: none;
1423
border-radius: $corner-radius;
1424
padding: 12px;
1425
spacing: 20px;
1426
&:hover, &:focus { background-color: $overlay-hover; }
1427
&:active {
1428
transition-duration: $duration-ripple;
1429
background-color: $overlay-active;
1430
}
1431
}
1432
.nm-dialog-item:selected {
1434
background-color: $overlay-selected;
1435
color: $text;
1436
}
1437
.nm-dialog-icons { spacing: .5em; }
1439
.nm-dialog-icon { icon-size: 16px; }
1440
.no-networks-label { color: $text-disabled; }
1441
.no-networks-box { spacing: 12px; }
1442
/* OVERVIEW */
1444
#overview {
1446
spacing: 24px; //
1447
StScrollBar { @extend %overview_scrollbar; }
1448
}
1449
.overview-controls {
1451
padding-bottom: 32px;
1452
}
1453
.window-picker { //container around window thumbnails
1455
-horizontal-spacing: 16px;
1456
-vertical-spacing: 16px;
1457
padding: 0 16px 32px;
1458
&.external-monitor { padding: 16px; }
1460
}
1461
.window-clone-border {
1463
border: 4px solid on(dark, stroke);
1464
border-radius: $corner-radius;
1465
// For window decorations with round corners we can't match
1466
// the exact shape when the window is scaled. So apply a shadow
1467
// to fix that case
1468
box-shadow: inset 0 0 0 1px on(dark, stroke);
1469
}
1470
.window-caption {
1471
spacing: 25px;
1472
color: on($scrim);
1473
background-color: $scrim;
1474
border-radius: $corner-radius;
1475
padding: 4px 8px;
1476
}
1477
//search entry
1479
.search-entry, %search_entry {
1480
width: 320px - 8px * 2;
1481
padding: 0 8px;
1482
border-radius: $corner-radius $corner-radius 0 0;
1483
color: on(dark, text-disabled);
1484
selection-background-color: on(dark, stroke);
1485
selected-color: on(dark);
1486
@include entry(normal,$fc:on(dark, stroke));
1487
&:hover { @include entry(hover,$fc:on(dark, stroke)); }
1488
&:focus {
1489
@include entry(focus,$fc:on(dark));
1490
padding: 0 8px;
1491
border-width: 0;
1492
color: on(dark);
1493
}
1494
.search-entry-icon { icon-size: 16px; padding: 0 0; color: on(dark, text2); }
1496
&:hover, &:focus {
1498
.search-entry-icon { color: on(dark); }
1499
}
1500
}
1501
//search results
1503
#searchResultsContent {
1505
max-width: 1000px;
1506
padding-left: 20px;
1507
padding-right: 20px;
1508
spacing: 16px;
1509
}
1510
.search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
1512
.search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container
1513
.search-statustext { // "no results"
1514
@extend %status_text;
1515
}
1516
.list-search-results { spacing: 3px; }
1517
.search-section-separator { height: 1px; background-color: on(dark, divider); }
1519
.search-section:last-child .search-section-separator { background-color: transparent; }
1521
.list-search-result-content { spacing: 30px; }
1523
.list-search-result-title { @include type(subtitle1); color: on(dark); spacing: 12px; }
1524
.list-search-result-description { color: on(dark, text2); }
1525
.list-search-provider-details { width: 150px; color: on(dark, text2); margin-top: 0.24em; }
1526
.list-search-provider-content { spacing: 20px; }
1527
.search-provider-icon { padding: 15px; }
1528
/* DASHBOARD */
1531
#dash {
1533
@extend %overview-panel;
1534
font-size: 1em;
1535
padding: 3px 0;
1536
border-radius: 0px $corner-radius $corner-radius 0px;
1537
&:rtl {
1539
border-radius: $corner-radius 0 0 $corner-radius;
1540
}
1541
.placeholder {
1543
background-image: url("assets/dash-placeholder.svg");
1544
background-size: contain;
1545
height: 24px;
1546
}
1547
.empty-dash-drop-target {
1549
width: 24px;
1550
height: 24px;
1551
}
1552
}
1554
.dash-item-container > StWidget {
1556
padding: 3px 6px;
1557
}
1558
.dash-label { //osd tooltip
1560
// min-height: 32px - 6px * 2;
1561
border-radius: $corner-radius;
1562
padding: 7px 8px;
1563
color: $text;
1564
background-color: $surface;
1565
box-shadow: $shadow-2;
1566
border: none;
1567
text-align: center;
1568
-x-offset: 8px;
1569
}
1570
/* App Vault/Grid */
1572
.icon-grid {
1573
spacing: 30px;
1574
-shell-grid-horizontal-item-size: 136px;
1575
-shell-grid-vertical-item-size: 136px;
1576
.overview-icon { icon-size: 96px; }
1578
}
1579
//.app-display { spacing: 20px; }
1580
.system-action-icon {
1582
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); // FIXME: this should really have a highlight
1583
background-color: $grey_900;
1584
color: $white;
1585
border-radius: 99px;
1586
icon-size: 48px;
1587
}
1588
.app-view-controls { //favorties | all toggle container
1590
width: 320px;
1591
padding-bottom: 32px;
1592
}
1593
.app-view-control { //favorties | all toggle button
1594
padding: 0 8px;
1595
margin: 0;
1596
font-weight: bold;
1597
color: on(dark, text2);
1598
&, &:hover, &:active, &:checked { @include button(flat-normal, $tc: on(dark)); }
1600
&:hover {
1602
color: on(dark);
1603
background-color: $inverse-overlay-hover !important;
1604
}
1605
&:active {
1606
color: on(dark);
1607
background-color: $inverse-overlay-active !important;
1608
}
1609
&:checked {
1610
color: on(dark);
1611
background-color: rgba($scrim, 0.01) !important;
1612
box-shadow: inset 0 2px 0 on(dark);
1613
}
1614
&:first-child {
1615
border-right-width: 0;
1616
border-radius: $corner-radius;
1617
&:checked { border-radius: 0; }
1618
}
1619
&:last-child {
1620
border-radius: $corner-radius;
1621
&:checked { border-radius: 0; }
1622
}
1623
}
1624
//Icon tile
1626
.search-provider-icon,
1627
.list-search-result {
1628
@extend %icon_tile;
1629
&:focus, &:selected, &:hover {
1630
background-color: $inverse-overlay-hover;
1631
transition-duration: 0ms;
1632
}
1633
&:active, &:checked {
1634
background-color: $inverse-overlay-active;
1635
transition-duration: $duration-ripple;
1636
}
1637
}
1638
.app-well-app,
1639
.app-well-app.app-folder,
1640
.show-apps,
1641
.grid-search-result {
1642
& .overview-icon {
1643
@extend %icon_tile;
1644
}
1645
&:hover .overview-icon,
1646
&:focus .overview-icon,
1647
&:selected .overview-icon {
1648
background-color: $inverse-overlay-hover;
1649
transition-duration: 0ms;
1650
border-image: none;
1651
background-image: none;
1652
}
1653
&:drop .overview-icon {
1654
background-color: $inverse-overlay-hover;
1655
}
1656
&:active .overview-icon,
1657
&:checked .overview-icon {
1658
background-color: $inverse-overlay-active;
1659
box-shadow: $shadow-0;
1660
transition-duration: $duration-ripple;
1661
}
1662
}
1664
.app-well-app-running-dot { //running apps indicator
1666
width: 32px; height: 2px;
1667
background-color: on(dark);
1668
margin-bottom: 0;
1669
}
1670
%icon_tile {
1672
color: on(dark);
1673
border-radius: $corner-radius;
1674
padding: 6px;
1675
border: none;
1676
transition-duration: $duration;
1677
text-align: center;
1678
}
1679
.app-well-app.app-folder > .overview-icon {
1681
background-color: on(dark, fill);
1682
}
1683
.show-apps .show-apps-icon {
1685
color: on(dark, text2);
1686
}
1687
.show-apps:hover .show-apps-icon,
1689
.show-apps:active .show-apps-icon,
1690
.show-apps:checked .show-apps-icon,
1691
.show-apps:focus .show-apps-icon {
1692
color: on(dark);
1693
transition-duration: $duration;
1694
}
1695
// Collections
1698
.app-folder-popup { //expanded collection
1699
-arrow-border-radius: $corner-radius;
1700
-arrow-background-color: on(dark, fill);
1701
-arrow-base: 24px;
1702
-arrow-rise: 12px;
1703
}
1704
.app-folder-popup-bin { padding: 5px; }
1705
.app-folder-icon {
1706
padding: 5px;
1707
spacing-rows: 5px;
1708
spacing-columns: 5px;
1709
}
1710
.page-indicator {
1712
padding: 15px 20px;
1713
.page-indicator-icon {
1715
width: 12px;
1716
height: 12px;
1717
border: none;
1718
border-radius: 12px;
1719
background-image: none;
1720
background-color: on(dark, text2-disabled);
1721
transition-duration: $duration;
1722
}
1723
&:hover .page-indicator-icon {
1724
border-color: transparent;
1725
background-image: none;
1726
background-color: on(dark, text-disabled);
1727
}
1728
&:active .page-indicator-icon {
1729
border: none;
1730
margin: 0;
1731
background-image: none;
1732
background-color: on(dark, text2);
1733
}
1734
&:checked .page-indicator-icon,
1735
&:checked:active .page-indicator-icon {
1736
background-image: none;
1737
background-color: on(dark);
1738
transition-duration: 0ms;
1739
}
1740
&:checked:active { background-image: none; background-color: transparent; }
1741
}
1742
.no-frequent-applications-label { @extend %status_text; }
1744
.app-well-app > .overview-icon.overview-icon-with-label,
1746
.grid-search-result .overview-icon.overview-icon-with-label {
1747
padding: 10px 8px 5px 8px;
1748
spacing: 4px;
1749
}
1750
// Workspace pager
1752
.workspace-thumbnails { //container ala dash
1753
@extend %overview-panel;
1754
visible-width: 32px; //amount visible before hover
1755
spacing: 12px;
1756
padding: 12px;
1757
border-radius: $corner-radius 0 0 $corner-radius;
1758
//border-width: 0; //fixme: can't have non unoform borders :(
1759
&:rtl { border-radius: 0 $corner-radius $corner-radius 0;}
1760
.placeholder {
1762
background-image: url("assets/dash-placeholder.svg");
1763
background-size: contain;
1764
height: 24px;
1765
}
1766
}
1767
.workspace-thumbnail-indicator {
1768
border: 0 solid on(dark);
1769
border-left-width: 2px;
1770
padding: 6px 10px;
1771
border-radius: 0;
1772
}
1773
//Some hacks I don't even
1775
.all-apps,
1776
.frequent-apps > StBoxLayout {
1777
// horizontal padding to make sure scrollbars or dash don't overlap content
1778
padding: 0px 88px 10px 88px;
1779
}
1780
%overview-panel {
1782
transition-duration: $duration-panel;
1783
color: on(dark);
1784
background-color: on(dark, fill);
1785
border: none;
1786
}
1787
%status_text {
1789
@include type(headline3);
1790
color: on(dark, text-disabled);
1791
}
1792
/* NOTIFICATIONS & MESSAGE TRAY */
1794
.url-highlighter { link-color: $primary; }
1796
// Banners
1798
.notification-banner {
1799
font-size: 1em;
1800
width: 34em;
1801
min-height: $menuitem-size * 2;
1802
margin: 5px;
1803
border-radius: $corner-radius;
1804
color: $text;
1805
background-color: $surface;
1806
border: none;
1807
box-shadow: $shadow-2;
1808
&:hover { background: $surface; }
1809
&, &:focus, &:active {
1810
background-color: $surface;
1811
.message-title { color: $text; }
1812
.message-content { color: $text2; }
1813
}
1814
.message-icon-bin > StIcon {
1816
color: $text;
1817
}
1818
StEntry { @extend %entry; }
1820
.notification-icon { padding: 5px; }
1822
.notification-content { padding: 5px; spacing: 5px; }
1823
.secondary-icon { icon-size: em(16px); }
1824
.notification-actions {
1825
background-color: transparent;
1826
padding-top: 0;
1827
color: inherit;
1828
border-top: none;
1829
spacing: 0;
1830
}
1831
.notification-button {
1832
@extend %bubble_button;
1833
&:focus { box-shadow: none; }
1834
min-height: $medium-size;
1835
padding: 0 8px;
1836
border: none;
1837
}
1838
}
1839
.summary-source-counter {
1840
font-size: 1em;
1841
font-weight: bold;
1842
height: 1.6em; width: 1.6em;
1843
-shell-counter-overlap-x: 3px;
1844
-shell-counter-overlap-y: 3px;
1845
background-color: $primary;
1846
color: on($primary);
1847
border: 2px solid on($primary);
1848
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
1849
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
1850
}
1851
.secondary-icon { icon-size: em(16px); }
1853
//chat bubbles
1855
.chat-body { spacing: 5px; }
1856
.chat-response { margin: 5px; }
1857
.chat-log-message { color: $text; }
1858
.chat-new-group { padding-top: 1em; }
1859
.chat-received {
1860
padding-left: 4px;
1861
&:rtl { padding-left: 0px; padding-right: 4px; }
1862
}
1863
.chat-sent {
1864
padding-left: 18pt;
1865
color: $text2;
1866
&:rtl { padding-left: 0; padding-right: 18pt; }
1867
}
1868
.chat-meta-message {
1869
padding-left: 4px;
1870
@include type(caption);
1871
color: $text2;
1872
&:rtl { padding-left: 0; padding-right: 4px; }
1873
}
1874
//hotplug
1876
.hotplug-transient-box {
1877
spacing: 6px;
1878
padding: 2px 72px 2px 12px;
1879
}
1880
.hotplug-notification-item {
1881
@extend %bubble_button;
1882
border: none; box-shadow: none;
1883
padding: 2px 10px;
1884
&:focus { padding: 1px 71px 1px 11px; }
1885
}
1886
.hotplug-notification-item-icon {
1888
icon-size: 24px;
1889
padding: 2px 5px;
1890
}
1891
.hotplug-resident-box { spacing: 8px; }
1893
.hotplug-resident-mount {
1895
transition-duration: $duration;
1896
spacing: 8px;
1897
border-radius: $corner-radius;
1898
&:hover { background-color: $overlay-hover; }
1899
&:active {
1900
transition-duration: $duration-ripple;
1901
background-color: $overlay-active;
1902
}
1903
}
1904
.hotplug-resident-mount-label {
1906
color: inherit;
1907
padding-left: 6px;
1908
}
1909
.hotplug-resident-mount-icon {
1911
icon-size: 24px;
1912
padding-left: 6px;
1913
}
1914
.hotplug-resident-eject-icon {
1916
icon-size: 16px;
1917
}
1918
.hotplug-resident-eject-button {
1920
padding: 7px;
1921
border-radius: $corner-radius;
1922
color: $text;
1923
}
1924
/* Eeeky things */
1926
//magnifier
1928
.magnifier-zoom-region {
1930
border: 2px solid $primary;
1931
&.full-screen { border-width: 0; }
1932
}
1933
//Keyboard
1935
/* On-screen Keyboard */
1936
.word-suggestions {
1937
@include type(subtitle1);
1938
spacing: 12px;
1939
min-height: 20pt;
1940
}
1941
#keyboard {
1943
background-color: $scrim-alt;
1944
.page-indicator {
1946
padding: 4px 4px;
1947
.page-indicator-icon {
1949
width: 8px;
1950
height: 8px
1951
}
1952
}
1953
}
1954
.key-container {
1956
padding: 4px;
1957
spacing: 4px;
1958
}
1959
.keyboard-key {
1961
min-height: 1.2em;
1962
min-width: 1.2em;
1963
font-size: 2em;
1964
font-weight: 500;
1965
border-radius: $corner-radius;
1966
border: none;
1967
@include button(normal);
1968
&:focus { @include button(focus); }
1969
&:hover,&:checked { @include button(hover); }
1970
&:active { @include button(active);}
1971
&:grayed { //FIXME
1972
background-color: $scrim-alt;
1973
color: on($scrim-alt);
1974
border-color: $scrim-alt;
1975
}
1976
&.default-key {
1977
border-color: transparent;
1978
background-color: $surface;
1979
background-size: 24px;
1980
&:hover, &:checked { background-color: $surface; }
1981
&:active { background-color: mix($text, $surface, percentage(0.2)); }
1982
}
1983
&.enter-key {
1984
border-color: transparent;
1985
background-color: $primary;
1986
background-image: url("assets/key-enter.svg");
1987
&:hover, &:checked { background-color: $primary; }
1988
&:active { background-color: mix(on($primary), $primary, percentage(0.2)); }
1989
}
1990
&.shift-key-lowercase {
1991
background-image: url("assets/key-shift.svg");
1992
}
1993
&.shift-key-uppercase {
1994
background-image: url("assets/key-shift-uppercase.svg");
1995
}
1996
&.shift-key-uppercase:latched {
1997
background-image: url("assets/key-shift-latched-uppercase.svg");
1998
}
1999
&.hide-key {
2000
background-image: url("assets/key-hide.svg");
2001
}
2002
&.layout-key {
2003
background-image: url("assets/key-layout.svg");
2004
}
2005
}
2006
.keyboard-subkeys { //long press on a key popup
2008
color: inherit;
2009
padding: 5px;
2010
-arrow-border-radius: 0;
2011
-arrow-background-color: transparent;
2012
-arrow-border-width: 0;
2013
-arrow-border-color: transparent;
2014
-arrow-base: 0;
2015
-arrow-rise: 0;
2016
-boxpointer-gap: 5px;
2017
background-color: $surface;
2018
border-radius: $corner-radius;
2019
box-shadow: $shadow-2;
2020
}
2021
.emoji-page {
2023
.keyboard-key {
2024
border: none;
2025
@include button(flat-normal, $tc: on($scrim-alt));
2026
&:hover, &:focus { @include button(flat-hover, $tc: on($scrim-alt)); }
2027
&:active { @include button(flat-active, $tc: on($scrim-alt)); }
2028
}
2029
}
2030
.emoji-panel {
2032
.keyboard-key:latched {
2033
border-color: transparent;
2034
background-color: $primary;
2035
color: on($primary);
2036
}
2037
}
2038
// IBus Candidate Popup
2040
.candidate-popup-content {
2042
padding: 8px;
2043
spacing: 0;
2044
}
2045
.candidate-index {
2047
padding: 0 4px 0 0;
2048
color: $text2;
2049
}
2050
.candidate-box {
2052
transition-duration: $duration;
2053
min-height: $menuitem-size;
2054
padding: 0 8px;
2055
border-radius: $corner-radius;
2056
&:hover { background-color: $overlay-hover; color: $text; transition-duration: 0ms; }
2057
&:active { background-color: $overlay-active; color: $text; transition-duration: $duration-ripple; }
2058
&:selected { background-color: $overlay-selected; color: $text; transition-duration: 0ms; }
2059
}
2060
.candidate-page-button-box {
2062
height: $menuitem-size;
2063
.vertical & { padding-top: 0; }
2064
.horizontal & { padding-left: 0; }
2065
}
2066
.candidate-page-button {
2068
min-width: $menuitem-size;
2069
min-height: $menuitem-size;
2070
padding: 0;
2071
}
2072
.candidate-page-button-previous { border-radius: $corner-radius; border-right-width: 0; }
2074
.candidate-page-button-next { border-radius: $corner-radius; }
2075
.candidate-page-button-icon { icon-size: em(16px); }
2076
/* Auth Dialogs & Screen Shield */
2078
.user-icon {
2080
background-size: contain;
2081
border: none;
2082
color: on($os-background);
2083
border-radius: $circular-radius;
2084
&:hover {
2085
border-color: on($os-background);
2086
color: on($os-background);
2087
}
2088
}
2089
// LOGIN DIALOG
2091
.login-dialog-banner-view {
2093
padding-top: 24px;
2094
max-width: 23em;
2095
}
2096
.login-dialog {
2098
//reset
2099
border: none;
2100
background-color: transparent;
2101
StEntry {
2103
color: on($os-background);
2104
selection-background-color: on($os-background, stroke);
2105
selected-color: on($os-background);
2106
@include entry(normal, $fc:on($os-background, stroke));
2107
&:focus { @include entry(focus, $fc:on($os-background)); }
2108
&:insensitive {
2109
@include entry(insensitive, $fc:on($os-background, stroke-disabled));
2110
color: on($os-background, text-disabled);
2111
}
2112
}
2113
.modal-dialog-button-box { spacing: 3px; }
2115
.modal-dialog-button {
2116
min-width: 64px - 8px * 2;
2117
padding: 0 8px;
2118
@include button(flat-normal, $tc: on($os-background));
2119
&:hover,&:focus { @include button(flat-hover, $tc: on($os-background)); }
2120
&:active { @include button(flat-active, $tc: on($os-background)); }
2121
&:insensitive { @include button(flat-insensitive, $tc: on($os-background)); }
2122
&:default {
2124
min-width: 64px - 16px * 2;
2125
padding: 0 16px;
2126
@include button(normal, $c: $primary, $tc: on($primary));
2127
&:hover,&:focus { @include button(hover, $c: $primary, $tc: on($primary)); }
2128
&:active { @include button(active, $c: $primary, $tc: on($primary)); }
2129
&:insensitive { @include button(insensitive, $c: on($os-background, fill), $tc: on($os-background, text-disabled)); }
2130
}
2131
}
2132
}
2133
.login-dialog-logo-bin { padding: 24px 0px; }
2135
.login-dialog-banner { color: on($os-background, text2); }
2136
.login-dialog-button-box { spacing: 5px; }
2137
.login-dialog-message-warning { color: on($os-background, error); }
2138
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
2139
.login-dialog-user-selection-box { padding: 100px 0px; }
2140
.login-dialog-not-listed-label {
2141
padding-left: 2px;
2142
.login-dialog-not-listed-button:focus &,
2143
.login-dialog-not-listed-button:hover & {
2144
color: on($os-background);
2145
}
2146
}
2147
.login-dialog-not-listed-label {
2148
transition-duration: $duration;
2149
font-size: 1em;
2150
font-weight: bold;
2151
color: on($os-background, text2);
2152
padding-top: 1em;
2153
border-radius: $corner-radius;
2154
&:hover {
2155
background-color: $inverse-overlay-hover;
2156
color: on($os-background);
2157
}
2158
&:focus { background-color: $inverse-overlay-focus; }
2159
&:active {
2160
transition-duration: $duration-ripple;
2161
background-color: $inverse-overlay-active;
2162
color: on($os-background);
2163
}
2164
}
2165
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
2167
.login-dialog-user-list {
2168
spacing: 12px;
2169
width: 23em;
2170
&:expanded .login-dialog-user-list-item:selected { background-color: $inverse-overlay-focus; color: on($os-background); }
2171
&:expanded .login-dialog-user-list-item:hover { background-color: $inverse-overlay-hover; color: on($os-background); }
2172
&:expanded .login-dialog-user-list-item:active { background-color: $inverse-overlay-active; color: on($os-background); }
2173
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid on($os-background); }
2174
}
2175
.login-dialog-user-list-item {
2176
transition-duration: $duration;
2177
border-radius: $corner-radius;
2178
padding: 6px;
2179
color: on($os-background, text2);
2180
&:ltr .user-widget { padding-right: 1em; }
2181
&:rtl .user-widget { padding-left: 1em; }
2182
&:hover {
2183
background-color: $inverse-overlay-hover;
2184
color: on($os-background);
2185
}
2186
&:active {
2187
transition-duration: $duration-ripple;
2188
background-color: $inverse-overlay-active;
2189
color: on($os-background);
2190
}
2191
.login-dialog-timed-login-indicator {
2192
height: 2px;
2193
margin-top: 6px;
2194
background-color: on($os-background);
2195
}
2196
&:focus .login-dialog-timed-login-indicator { background-color: on($os-background); }
2197
}
2198
.login-dialog-username,
2200
.user-widget-label {
2201
color: on($os-background);
2202
@include type(headline6);
2203
text-align: left;
2204
padding-left: 15px;
2205
}
2206
.user-widget-label {
2207
&:ltr { padding-left: 14px; }
2208
&:rtl { padding-right: 14px; }
2209
}
2210
.login-dialog-prompt-layout {
2212
padding-top: 24px;
2213
padding-bottom: 12px;
2214
spacing: 8px;
2215
width: 23em;
2216
}
2217
.login-dialog-prompt-label {
2219
color: on($os-background, text2);
2220
font-size: 1em;
2221
padding-top: 1em;
2222
}
2223
.login-dialog-session-list-button StIcon {
2225
icon-size: 1.25em;
2226
}
2227
.login-dialog-session-list-button {
2229
color: on($os-background, text2);
2230
&:hover,&:focus { color: on($os-background); }
2231
&:active { color: on($os-background); }
2232
}
2233
//SCREEN SHIELD
2235
.screen-shield-arrows {
2237
padding-bottom: 3em;
2238
}
2239
.screen-shield-arrows Gjs_Arrow {
2241
color: white;
2242
width: 80px;
2243
height: 48px;
2244
-arrow-thickness: 12px;
2245
-arrow-shadow: $shadow-1;
2246
}
2247
.screen-shield-clock {
2249
color: white;
2250
text-shadow: $shadow-1;
2251
font-weight: normal;
2252
text-align: center;
2253
padding-bottom: 1.5em;
2254
}
2255
.screen-shield-clock-time {
2257
@include type(headline1);
2258
text-shadow: $shadow-1;
2259
font-feature-settings: "tnum";
2260
}
2261
.screen-shield-clock-date { @include type(headline4); }
2263
.screen-shield-notifications-container {
2265
spacing: 6px;
2266
width: 30em;
2267
background-color: transparent;
2268
max-height: 500px;
2269
.summary-notification-stack-scrollview {
2270
padding-top: 0;
2271
padding-bottom: 0;
2272
}
2273
.notification,
2275
.screen-shield-notification-source {
2276
padding: 8px;
2277
border: none;
2278
background-color: $scrim-alt;
2279
color: on($scrim-alt);
2280
border-radius: $corner-radius;
2281
}
2282
.notification { margin-right: 16px; } //compensate for space allocated to the scrollbar
2283
}
2284
.screen-shield-notification-label {
2287
min-height: $small-size - 2px;
2288
padding: 2px 0px 0px 16px;
2289
font-weight: bold;
2290
}
2291
.screen-shield-notification-count-text {
2293
min-height: $small-size - 2px;
2294
padding: 2px 0px 0px 16px;
2295
color: on($scrim-alt, text2);
2296
}
2297
#panel.lock-screen { background-color: $scrim-alt; }
2299
.screen-shield-background { //just the shadow, really
2301
background: black;
2302
box-shadow: $shadow-5;
2303
}
2304
#lockDialogGroup {
2306
background: $os-background;
2307
background-size: cover;
2308
color: on($os-background, text2);
2309
}
2310
#screenShieldNotifications {
2312
StScrollBar { @extend %overview_scrollbar; }
2313
}
2314
// Looking Glass
2317
#LookingGlassDialog {
2318
background-color: $surface;
2319
spacing: 4px;
2320
padding: 0;
2321
border: none;
2322
border-radius: $corner-radius;
2323
box-shadow: $shadow-4;
2324
& > #Toolbar {
2325
padding: 0 8px;
2326
border: none;
2327
border-radius: 0;
2328
background-color: rgba($surface, 0.01);
2329
box-shadow: inset 0 -1px 0 $divider;
2330
}
2331
.labels { spacing: 0; }
2332
.notebook-tab {
2333
-natural-hpadding: 12px;
2334
-minimum-hpadding: 6px;
2335
font-weight: bold;
2336
color: $text2;
2337
transition-duration: $duration;
2338
padding-left: 16px;
2339
padding-right: 16px;
2340
min-height: $medium-size;
2341
padding: 0 16px * 2;
2342
&:hover {
2343
background-color: $overlay-hover;
2344
color: $text;
2345
text-shadow: none;
2346
}
2347
&:active {
2348
background-color: $overlay-active;
2349
color: $text;
2350
transition-duration: $duration-ripple;
2351
}
2352
&:selected {
2353
border-bottom-width: 0;
2354
border-color: transparent;
2355
background-color: rgba($surface, 0.01);
2356
box-shadow: inset 0 -2px 0px $primary;
2357
color: $text;
2358
text-shadow: none;
2359
}
2360
}
2361
StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
2362
StBoxLayout#ResultsArea { spacing: 4px; }
2363
}
2364
.lg-dialog {
2366
StEntry {
2367
selection-background-color: $overlay-selected;
2368
selected-color: $text;
2369
}
2370
.shell-link {
2371
color: $primary;
2372
&:hover { color: $primary; }
2373
}
2374
}
2375
.lg-completions-text {
2377
font-size: 1em;
2378
font-style: italic;
2379
}
2380
.lg-obj-inspector-title {
2382
spacing: 4px;
2383
}
2384
.lg-obj-inspector-button {
2386
min-height: $medium-size;
2387
min-width: 64px - 8px * 2;
2388
padding: 0 8px;
2389
border: none;
2390
border-radius: $corner-radius;
2391
@include type(button);
2392
@include button(flat-normal);
2393
&:hover { @include button(flat-hover); }
2394
&:active { @include button(flat-active); }
2395
&:insensitive { @include button(flat-insensitive); }
2396
&:focus { @include button(flat-focus); }
2397
&:hover { border: none; }
2398
}
2399
#lookingGlassExtensions { padding: 4px; }
2401
.lg-extensions-list {
2403
padding: 4px;
2404
spacing: 6px;
2405
}
2406
.lg-extension {
2408
border: none;
2409
border-radius: $corner-radius;
2410
padding: 4px;
2411
}
2412
.lg-extension-name {
2414
@include type(headline5);
2415
}
2416
.lg-extension-meta {
2418
spacing: 6px;
2419
}
2420
#LookingGlassPropertyInspector {
2422
background: $surface;
2423
border: none;
2424
border-radius: $corner-radius;
2425
padding: 6px;
2426
box-shadow: $shadow-4;
2427
}
2428