ASCII text
1
.lightbox { background-color: black; }
2
.flashspot { background-color: white; }
3
.hidden {
5
color: rgba(0,0,0,0);
6
}
7
/* Tiled window previews */
9
.tile-preview {
10
background-color: rgba(on(dark, primary), 0.3);
11
border: 1px solid on(dark, primary);
12
}
13
.tile-preview-left.on-primary {
15
border-radius: 0;
16
}
17
.tile-preview-right.on-primary {
19
border-radius: 0;
20
}
21
.tile-preview-left.tile-preview-right.on-primary {
23
border-radius: 0;
24
}
25
.app-menu,
27
.app-well-menu {
28
max-width: 27.25em;
29
}
30
// Rubberband for select-area screenshots
32
.select-area-rubberband {
33
background-color: rgba(on(dark, primary), 0.3);
34
border: 1px solid on(dark, primary);
35
}
36
//close buttons
38
.window-close {
40
// FIXME: unless disable the transition, button will distort when hovering
41
// transition-duration: $duration;
42
background-color: transparent;
43
border-radius: 0;
44
border: none;
45
box-shadow: none;
46
color: transparent;
47
height: $medium-size;
48
width: $medium-size;
49
-shell-close-overlap: $medium-size / 2;
50
-st-background-image-shadow: $shadow-1;
51
background-image: url("assets/window-close.svg");
52
background-size: $medium-size;
53
&:hover {
55
background-color: transparent;
56
border-color: transparent;
57
color: transparent;
58
-st-background-image-shadow: $shadow-2;
59
background-image: url("assets/window-close.svg");
60
}
61
&:active {
63
background-color: transparent;
64
border-color: transparent;
65
color: transparent;
66
// transition-duration: $duration-ripple;
67
background-image: url("assets/window-close-active.svg");
68
}
69
// For backward compatibility of 3.26.0
71
&:rtl { -st-background-image-shadow: $shadow-1; }
72
&:rtl:hover { -st-background-image-shadow: $shadow-2; }
73
}
74
/* OVERVIEW */
76
#overview {
78
spacing: 24px; //
79
StScrollBar { @extend %overview_scrollbar; }
80
}
81
.overview-controls {
83
padding-bottom: 32px;
84
}
85
.window-picker { //container around window thumbnails
87
-horizontal-spacing: 16px;
88
-vertical-spacing: 16px;
89
padding: 0 16px 32px;
90
&.external-monitor { padding: 16px; }
92
}
93
.window-clone-border {
95
border: 4px solid on(dark, stroke);
96
border-radius: $corner-radius;
97
// For window decorations with round corners we can't match
98
// the exact shape when the window is scaled. So apply a shadow
99
// to fix that case
100
box-shadow: inset 0 0 0 1px on(dark, stroke);
101
}
102
.window-caption {
103
spacing: 25px;
104
color: on($scrim);
105
background-color: $scrim;
106
border-radius: $corner-radius;
107
padding: 4px 8px;
108
}
109
//search entry
111
.search-entry {
112
width: 320px - 8px * 2;
113
padding: 0 8px;
114
border-radius: $corner-radius $corner-radius 0 0;
115
color: on(dark, text-disabled);
116
selection-background-color: on(dark, stroke);
117
selected-color: on(dark);
118
@include entry(normal,$fc:on(dark, stroke));
119
&:hover { @include entry(hover,$fc:on(dark, stroke)); }
120
&:focus {
121
@include entry(focus,$fc:on(dark));
122
padding: 0 8px;
123
border-width: 0;
124
color: on(dark);
125
}
126
.search-entry-icon { icon-size: 16px; padding: 0 0; color: on(dark, text2); }
128
&:hover, &:focus {
130
.search-entry-icon { color: on(dark); }
131
}
132
}
133
//search results
135
#searchResultsBin {
137
max-width: 1000px;
138
}
139
#searchResultsContent {
141
padding-left: 20px;
142
padding-right: 20px;
143
spacing: 16px;
144
}
145
.search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
147
.search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container
148
.search-statustext { // "no results"
149
@extend %status_text;
150
}
151
.list-search-results { spacing: 3px; }
152
.search-section-separator { height: 1px; background-color: on(dark, divider); }
154
.search-section:last-child .search-section-separator { background-color: transparent; }
156
.list-search-result-content { spacing: 30px; }
158
.list-search-result-title { @include type(subtitle1); color: on(dark); spacing: 12px; }
159
.list-search-result-description { color: on(dark, text2); }
160
.list-search-provider-details { width: 150px; color: on(dark, text2); margin-top: 0.24em; }
161
.list-search-provider-content { spacing: 20px; }
162
.search-provider-icon { padding: 15px; }
163
/* DASHBOARD */
166
#dash {
168
transition-duration: $duration-panel;
169
font-size: 1em;
170
color: on(dark);
171
background-color: on(dark, fill);
172
padding: 3px 0;
173
border: none;
174
border-left: 0px;
175
border-radius: 0px $corner-radius $corner-radius 0px;
176
&:rtl {
178
border-radius: $corner-radius 0 0 $corner-radius;
179
}
180
.placeholder {
182
background-image: url("assets/dash-placeholder.svg");
183
background-size: contain;
184
height: 24px;
185
}
186
.empty-dash-drop-target {
188
width: 24px;
189
height: 24px;
190
}
191
}
193
.dash-item-container > StWidget {
195
padding: 3px 6px;
196
}
197
.dash-label { //osd tooltip
199
// min-height: 32px - 6px * 2;
200
border-radius: $corner-radius;
201
padding: 7px 8px;
202
color: $text;
203
background-color: $surface;
204
box-shadow: $shadow-2;
205
text-align: center;
206
-x-offset: 8px;
207
}
208
/* App Vault/Grid */
210
.icon-grid {
211
spacing: 30px;
212
-shell-grid-horizontal-item-size: 136px;
213
-shell-grid-vertical-item-size: 136px;
214
.overview-icon { icon-size: 96px; }
216
}
217
//.app-display { spacing: 20px; }
218
.system-action-icon {
220
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); // FIXME: this should really have a highlight
221
background-color: $grey_900;
222
color: $white;
223
border-radius: 99px;
224
icon-size: 48px;
225
}
226
.app-view-controls { //favorties | all toggle container
228
width: 320px;
229
padding-bottom: 32px;
230
}
231
.app-view-control { //favorties | all toggle button
232
padding: 0 8px;
233
font-weight: bold;
234
color: on(dark, text2);
235
&:hover {
236
color: on(dark);
237
background-color: $inverse-overlay-hover !important;
238
}
239
&:active {
240
color: on(dark);
241
background-color: $inverse-overlay-active !important;
242
}
243
&:checked {
244
color: on(dark);
245
background-color: rgba($scrim, 0.01) !important;
246
box-shadow: inset 0 2px 0 on(dark);
247
}
248
&:first-child {
249
border-right-width: 0;
250
border-radius: $corner-radius;
251
&:checked { border-radius: 0; }
252
}
253
&:last-child {
254
border-radius: $corner-radius;
255
&:checked { border-radius: 0; }
256
}
257
}
258
//Icon tile
260
.search-provider-icon,
261
.list-search-result {
262
@extend %icon_tile;
263
&:focus, &:selected, &:hover {
264
background-color: $inverse-overlay-hover;
265
transition-duration: 0ms;
266
}
267
&:active, &:checked {
268
background-color: $inverse-overlay-active;
269
transition-duration: $duration-ripple;
270
}
271
}
272
.app-well-app,
273
.app-well-app.app-folder,
274
.show-apps,
275
.grid-search-result {
276
& .overview-icon {
277
@extend %icon_tile;
278
}
279
&:hover .overview-icon,
280
&:focus .overview-icon,
281
&:selected .overview-icon {
282
background-color: $inverse-overlay-hover;
283
transition-duration: 0ms;
284
border-image: none;
285
background-image: none;
286
}
287
&:active .overview-icon,
288
&:checked .overview-icon {
289
background-color: $inverse-overlay-active;
290
box-shadow: $shadow-0;
291
transition-duration: $duration-ripple;
292
}
293
}
295
.app-well-app-running-dot { //running apps indicator
297
width: 32px; height: 2px;
298
background-color: on(dark);
299
margin-bottom: 0;
300
}
301
%icon_tile {
303
color: on(dark);
304
border-radius: $corner-radius;
305
padding: 6px;
306
border: none;
307
transition-duration: $duration;
308
text-align: center;
309
}
310
.app-well-app.app-folder > .overview-icon {
312
background-color: on(dark, fill);
313
}
314
.show-apps .show-apps-icon {
316
color: on(dark, text2);
317
}
318
.show-apps:hover .show-apps-icon,
320
.show-apps:active .show-apps-icon,
321
.show-apps:checked .show-apps-icon,
322
.show-apps:focus .show-apps-icon {
323
color: on(dark);
324
transition-duration: $duration;
325
}
326
// Collections
329
.app-folder-popup { //expanded collection
330
-arrow-border-radius: $corner-radius;
331
-arrow-background-color: on(dark, fill);
332
-arrow-base: 24px;
333
-arrow-rise: 12px;
334
}
335
.app-folder-popup-bin { padding: 5px; }
336
.app-folder-icon {
337
padding: 5px;
338
spacing-rows: 5px;
339
spacing-columns: 5px;
340
}
341
.page-indicator {
343
padding: 15px 20px;
344
.page-indicator-icon {
346
width: 12px;
347
height: 12px;
348
border: none;
349
border-radius: 12px;
350
background-image: none;
351
background-color: on(dark, text2-disabled);
352
transition-duration: $duration;
353
}
354
&:hover .page-indicator-icon {
355
border-color: transparent;
356
background-image: none;
357
background-color: on(dark, text-disabled);
358
}
359
&:active .page-indicator-icon {
360
border: none;
361
margin: 0;
362
background-image: none;
363
background-color: on(dark, text2);
364
}
365
&:checked .page-indicator-icon,
366
&:checked:active .page-indicator-icon {
367
background-image: none;
368
background-color: on(dark);
369
transition-duration: 0ms;
370
}
371
&:checked:active { background-image: none; background-color: transparent; }
372
}
373
.no-frequent-applications-label { @extend %status_text; }
375
.app-well-app > .overview-icon.overview-icon-with-label,
377
.grid-search-result .overview-icon.overview-icon-with-label {
378
padding: 10px 8px 5px 8px;
379
spacing: 4px;
380
}
381
// Workspace pager
383
.workspace-thumbnails { //container ala dash
384
@extend %overview-panel;
385
visible-width: 32px; //amount visible before hover
386
spacing: 12px;
387
padding: 12px;
388
border-radius: $corner-radius 0 0 $corner-radius;
389
//border-width: 0; //fixme: can't have non unoform borders :(
390
&:rtl { border-radius: 0 $corner-radius $corner-radius 0;}
391
.placeholder {
393
background-image: url("assets/dash-placeholder.svg");
394
background-size: contain;
395
height: 24px;
396
}
397
}
398
.workspace-thumbnail-indicator {
399
border: 0 solid on(dark);
400
border-left-width: 2px;
401
padding: 6px 10px;
402
border-radius: 0;
403
}
404
//Some hacks I don't even
406
.search-display > StBoxLayout,
407
.all-apps,
408
.frequent-apps > StBoxLayout {
409
// horizontal padding to make sure scrollbars or dash don't overlap content
410
padding: 0px 88px 10px 88px;
411
}
412
%overview-panel {
414
transition-duration: $duration-panel;
415
color: on(dark);
416
background-color: on(dark, fill);
417
border: none;
418
}
419
%status_text {
421
@include type(headline3);
422
color: on(dark, text-disabled);
423
}
424
/* Eeeky things */
426
//magnifier
428
.magnifier-zoom-region {
430
border: 2px solid $primary;
431
&.full-screen { border-width: 0; }
432
}
433
//Keyboard
435
/* On-screen Keyboard */
436
.word-suggestions {
437
@include type(subtitle1);
438
spacing: 12px;
439
min-height: 20pt;
440
}
441
#keyboard {
443
background-color: $scrim-alt;
444
.page-indicator {
446
padding: 4px 4px;
447
.page-indicator-icon {
449
width: 8px;
450
height: 8px
451
}
452
}
453
}
454
.key-container {
456
padding: 4px;
457
spacing: 4px;
458
}
459
.keyboard-key {
461
min-height: 1.2em;
462
min-width: 1.2em;
463
font-size: 2em;
464
font-weight: 500;
465
border-radius: $corner-radius;
466
border: none;
467
@include button(normal);
468
&:focus { @include button(focus); }
469
&:hover,&:checked { @include button(hover); }
470
&:active { @include button(active);}
471
&:grayed { //FIXME
472
background-color: $scrim-alt;
473
color: on($scrim-alt);
474
border-color: $scrim-alt;
475
}
476
&.default-key {
477
border-color: transparent;
478
background-color: $surface;
479
background-size: 24px;
480
&:active { background-color: mix($text, $surface, percentage(0.2)); }
481
}
482
&.enter-key {
483
border-color: transparent;
484
background-color: $primary;
485
background-image: url("assets/key-enter.svg");
486
&:active { background-color: mix(on($primary), $primary, percentage(0.2)); }
487
}
488
&.shift-key-lowercase {
489
background-image: url("assets/key-shift.svg");
490
}
491
&.shift-key-uppercase {
492
background-image: url("assets/key-shift-uppercase.svg");
493
}
494
&.shift-key-uppercase:latched {
495
background-image: url("assets/key-shift-latched-uppercase.svg");
496
}
497
&.hide-key {
498
background-image: url("assets/key-hide.svg");
499
}
500
&.layout-key {
501
background-image: url("assets/key-layout.svg");
502
}
503
}
504
.keyboard-subkeys { //long press on a key popup
506
color: inherit;
507
padding: 5px;
508
-arrow-border-radius: 0;
509
-arrow-background-color: transparent;
510
-arrow-border-width: 0;
511
-arrow-border-color: transparent;
512
-arrow-base: 0;
513
-arrow-rise: 0;
514
-boxpointer-gap: 5px;
515
background-color: $surface;
516
border-radius: $corner-radius;
517
box-shadow: $shadow-2;
518
}
519
.emoji-page {
521
.keyboard-key {
522
border: none;
523
@include button(flat-normal, $tc: on($scrim-alt));
524
&:hover, &:focus { @include button(flat-hover, $tc: on($scrim-alt)); }
525
&:active { @include button(flat-active, $tc: on($scrim-alt)); }
526
}
527
}
528
.emoji-panel {
530
.keyboard-key:latched {
531
border-color: transparent;
532
background-color: $primary;
533
color: on($primary);
534
}
535
}
536
/* Auth Dialogs & Screen Shield */
538
.user-icon {
540
background-size: contain;
541
border: none;
542
color: on($os-background);
543
border-radius: $circular-radius;
544
&:hover {
545
border-color: on($os-background);
546
color: on($os-background);
547
}
548
}
549
// LOGIN DIALOG
551
.login-dialog-banner-view {
553
padding-top: 24px;
554
max-width: 23em;
555
}
556
.login-dialog {
558
//reset
559
border: none;
560
background-color: transparent;
561
StEntry {
563
color: on($os-background);
564
selection-background-color: on($os-background, stroke);
565
selected-color: on($os-background);
566
@include entry(normal, $fc:on($os-background, stroke));
567
&:focus { @include entry(focus, $fc:on($os-background)); }
568
&:insensitive {
569
@include entry(insensitive, $fc:on($os-background, stroke-disabled));
570
color: on($os-background, text-disabled);
571
}
572
}
573
.modal-dialog-button-box { spacing: 3px; }
575
.modal-dialog-button {
576
min-width: 64px - 8px * 2;
577
padding: 0 8px;
578
@include button(flat-normal, $tc: on($os-background));
579
&:hover,&:focus { @include button(flat-hover, $tc: on($os-background)); }
580
&:active { @include button(flat-active, $tc: on($os-background)); }
581
&:insensitive { @include button(flat-insensitive, $tc: on($os-background)); }
582
&:default {
584
min-width: 64px - 16px * 2;
585
padding: 0 16px;
586
@include button(normal, $c: $primary, $tc: on($primary));
587
&:hover,&:focus { @include button(hover, $c: $primary, $tc: on($primary)); }
588
&:active { @include button(active, $c: $primary, $tc: on($primary)); }
589
&:insensitive { @include button(insensitive, $c: on($os-background, fill), $tc: on($os-background, text-disabled)); }
590
}
591
}
592
}
593
.login-dialog-logo-bin { padding: 24px 0px; }
595
.login-dialog-banner { color: on($os-background, text2); }
596
.login-dialog-button-box { spacing: 5px; }
597
.login-dialog-message-warning { color: on($os-background, error); }
598
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
599
.login-dialog-user-selection-box { padding: 100px 0px; }
600
.login-dialog-not-listed-label {
601
padding-left: 2px;
602
.login-dialog-not-listed-button:focus &,
603
.login-dialog-not-listed-button:hover & {
604
color: on($os-background);
605
}
606
}
607
.login-dialog-not-listed-label {
608
transition-duration: $duration;
609
font-size: 1em;
610
font-weight: bold;
611
color: on($os-background, text2);
612
padding-top: 1em;
613
border-radius: $corner-radius;
614
&:hover {
615
background-color: $inverse-overlay-hover;
616
color: on($os-background);
617
}
618
&:focus { background-color: $inverse-overlay-focus; }
619
&:active {
620
transition-duration: $duration-ripple;
621
background-color: $inverse-overlay-active;
622
color: on($os-background);
623
}
624
}
625
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
627
.login-dialog-user-list {
628
spacing: 12px;
629
width: 23em;
630
&:expanded .login-dialog-user-list-item:selected { background-color: $inverse-overlay-focus; color: on($os-background); }
631
&:expanded .login-dialog-user-list-item:hover { background-color: $inverse-overlay-hover; color: on($os-background); }
632
&:expanded .login-dialog-user-list-item:active { background-color: $inverse-overlay-active; color: on($os-background); }
633
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid on($os-background); }
634
}
635
.login-dialog-user-list-item {
636
transition-duration: $duration;
637
border-radius: $corner-radius;
638
padding: 6px;
639
color: on($os-background, text2);
640
&:ltr .user-widget { padding-right: 1em; }
641
&:rtl .user-widget { padding-left: 1em; }
642
&:hover {
643
background-color: $inverse-overlay-hover;
644
color: on($os-background);
645
}
646
&:active {
647
transition-duration: $duration-ripple;
648
background-color: $inverse-overlay-active;
649
color: on($os-background);
650
}
651
.login-dialog-timed-login-indicator {
652
height: 2px;
653
margin-top: 6px;
654
background-color: on($os-background);
655
}
656
&:focus .login-dialog-timed-login-indicator { background-color: on($os-background); }
657
}
658
.login-dialog-username,
660
.user-widget-label {
661
color: on($os-background);
662
@include type(headline6);
663
text-align: left;
664
padding-left: 15px;
665
}
666
.user-widget-label {
667
&:ltr { padding-left: 14px; }
668
&:rtl { padding-right: 14px; }
669
}
670
.login-dialog-prompt-layout {
672
padding-top: 24px;
673
padding-bottom: 12px;
674
spacing: 8px;
675
width: 23em;
676
}
677
.login-dialog-prompt-label {
679
color: on($os-background, text2);
680
font-size: 1em;
681
padding-top: 1em;
682
}
683
.login-dialog-session-list-button StIcon {
685
icon-size: 1.25em;
686
}
687
.login-dialog-session-list-button {
689
color: on($os-background, text2);
690
&:hover,&:focus { color: on($os-background); }
691
&:active { color: on($os-background); }
692
}
693
//SCREEN SHIELD
695
.screen-shield-arrows {
697
padding-bottom: 3em;
698
}
699
.screen-shield-arrows Gjs_Arrow {
701
color: white;
702
width: 80px;
703
height: 48px;
704
-arrow-thickness: 12px;
705
-arrow-shadow: $shadow-1;
706
}
707
.screen-shield-clock {
709
color: white;
710
text-shadow: $shadow-1;
711
font-weight: normal;
712
text-align: center;
713
padding-bottom: 1.5em;
714
}
715
.screen-shield-clock-time {
717
@include type(headline1);
718
text-shadow: $shadow-1;
719
font-feature-settings: "tnum";
720
}
721
.screen-shield-clock-date { @include type(headline4); }
723
.screen-shield-notifications-container {
725
spacing: 6px;
726
width: 30em;
727
background-color: transparent;
728
max-height: 500px;
729
.summary-notification-stack-scrollview {
730
padding-top: 0;
731
padding-bottom: 0;
732
}
733
.notification,
735
.screen-shield-notification-source {
736
padding: 8px;
737
border: none;
738
background-color: $scrim-alt;
739
color: on($scrim-alt);
740
border-radius: $corner-radius;
741
}
742
.notification { margin-right: 16px; } //compensate for space allocated to the scrollbar
743
}
744
.screen-shield-notification-label {
747
min-height: $small-size - 2px;
748
padding: 2px 0px 0px 16px;
749
font-weight: bold;
750
}
751
.screen-shield-notification-count-text {
753
min-height: $small-size - 2px;
754
padding: 2px 0px 0px 16px;
755
color: on($scrim-alt, text2);
756
}
757
#panel.lock-screen { background-color: $scrim-alt; }
759
.screen-shield-background { //just the shadow, really
761
background: black;
762
box-shadow: $shadow-5;
763
}
764
#lockDialogGroup {
766
background: $os-background;
767
background-size: cover;
768
color: on($os-background, text2);
769
}
770
#screenShieldNotifications {
772
StScrollBar { @extend %overview_scrollbar; }
773
}
774
// Looking Glass
777
#LookingGlassDialog {
778
background-color: $surface;
779
spacing: 4px;
780
padding: 0;
781
border: none;
782
border-radius: $corner-radius;
783
box-shadow: $shadow-4;
784
& > #Toolbar {
785
padding: 0 8px;
786
border: none;
787
border-radius: 0;
788
background-color: rgba($surface, 0.01);
789
box-shadow: inset 0 -1px 0 $divider;
790
}
791
.labels { spacing: 0; }
792
.notebook-tab {
793
-natural-hpadding: 12px;
794
-minimum-hpadding: 6px;
795
font-weight: bold;
796
color: $text2;
797
transition-duration: $duration;
798
padding-left: 16px;
799
padding-right: 16px;
800
min-height: $medium-size;
801
padding: 0 16px * 2;
802
&:hover {
803
background-color: $overlay-hover;
804
color: $text;
805
text-shadow: none;
806
}
807
&:active {
808
background-color: $overlay-active;
809
color: $text;
810
transition-duration: $duration-ripple;
811
}
812
&:selected {
813
border-bottom-width: 0;
814
border-color: transparent;
815
background-color: rgba($surface, 0.01);
816
box-shadow: inset 0 -2px 0px $primary;
817
color: $text;
818
text-shadow: none;
819
}
820
}
821
StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
822
StBoxLayout#ResultsArea { spacing: 4px; }
823
}
824
.lg-dialog {
826
StEntry {
827
selection-background-color: $overlay-selected;
828
selected-color: $text;
829
}
830
.shell-link {
831
color: $primary;
832
&:hover { color: $primary; }
833
}
834
}
835
.lg-completions-text {
837
font-size: 1em;
838
font-style: italic;
839
}
840
.lg-obj-inspector-title {
842
spacing: 4px;
843
}
844
.lg-obj-inspector-button {
846
min-height: $medium-size;
847
min-width: 64px - 8px * 2;
848
padding: 0 8px;
849
border: none;
850
border-radius: $corner-radius;
851
@include type(button);
852
@include button(flat-normal);
853
&:hover { @include button(flat-hover); }
854
&:active { @include button(flat-active); }
855
&:insensitive { @include button(flat-insensitive); }
856
&:focus { @include button(flat-focus); }
857
&:hover { border: none; }
858
}
859
#lookingGlassExtensions { padding: 4px; }
861
.lg-extensions-list {
863
padding: 4px;
864
spacing: 6px;
865
}
866
.lg-extension {
868
border: none;
869
border-radius: $corner-radius;
870
padding: 4px;
871
}
872
.lg-extension-name {
874
@include type(headline5);
875
}
876
.lg-extension-meta {
878
spacing: 6px;
879
}
880
#LookingGlassPropertyInspector {
882
background: $surface;
883
border: none;
884
border-radius: $corner-radius;
885
padding: 6px;
886
box-shadow: $shadow-4;
887
}
888