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
.window-picker { //container around window thumbnails
76
-horizontal-spacing: 16px;
77
-vertical-spacing: 16px;
78
padding: 0 16px 32px;
79
&.external-monitor { padding: 16px; }
81
}
82
.window-clone-border {
84
border: 4px solid on(dark, stroke);
85
border-radius: $corner-radius;
86
// For window decorations with round corners we can't match
87
// the exact shape when the window is scaled. So apply a shadow
88
// to fix that case
89
box-shadow: inset 0 0 0 1px on(dark, stroke);
90
}
91
.window-caption {
92
spacing: 25px;
93
color: on($scrim);
94
background-color: $scrim;
95
border-radius: $corner-radius;
96
padding: 4px 8px;
97
}
98
//search entry
100
.search-entry {
101
width: 320px - 8px * 2;
102
padding: 0 8px;
103
border-radius: $corner-radius $corner-radius 0 0;
104
color: on(dark, text-disabled);
105
selection-background-color: on(dark, stroke);
106
selected-color: on(dark);
107
@include entry(normal,$fc:on(dark, stroke));
108
&:hover { @include entry(hover,$fc:on(dark, stroke)); }
109
&:focus {
110
@include entry(focus,$fc:on(dark));
111
padding: 0 8px;
112
border-width: 0;
113
color: on(dark);
114
}
115
.search-entry-icon { icon-size: 16px; padding: 0 0; color: on(dark, text2); }
117
&:hover, &:focus {
119
.search-entry-icon { color: on(dark); }
120
}
121
}
122
//search results
124
#searchResultsBin {
126
max-width: 1000px;
127
}
128
#searchResultsContent {
130
padding-left: 20px;
131
padding-right: 20px;
132
spacing: 16px;
133
}
134
.search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
136
.search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container
137
.search-statustext { // "no results"
138
@extend %status_text;
139
}
140
.list-search-results { spacing: 3px; }
141
.search-section-separator { height: 1px; background-color: on(dark, divider); }
143
.search-section:last-child .search-section-separator { background-color: transparent; }
145
.list-search-result-content { spacing: 30px; }
147
.list-search-result-title { @include type(subtitle1); color: on(dark); spacing: 12px; }
148
.list-search-result-description { color: on(dark, text2); }
149
.list-search-provider-details { width: 150px; color: on(dark, text2); margin-top: 0.24em; }
150
.list-search-provider-content { spacing: 20px; }
151
.search-provider-icon { padding: 15px; }
152
/* DASHBOARD */
155
#dash {
157
transition-duration: $duration-panel;
158
font-size: 1em;
159
color: on(dark);
160
background-color: on(dark, fill);
161
padding: 3px 0;
162
border: none;
163
border-left: 0px;
164
border-radius: 0px $corner-radius $corner-radius 0px;
165
&:rtl {
167
border-radius: $corner-radius 0 0 $corner-radius;
168
}
169
.placeholder {
171
background-image: url("assets/dash-placeholder.svg");
172
background-size: contain;
173
height: 24px;
174
}
175
.empty-dash-drop-target {
177
width: 24px;
178
height: 24px;
179
}
180
}
182
.dash-item-container > StWidget {
184
padding: 3px 6px;
185
}
186
.dash-label { //osd tooltip
188
// min-height: 32px - 6px * 2;
189
border-radius: $corner-radius;
190
padding: 7px 8px;
191
color: $text;
192
background-color: $surface;
193
box-shadow: $shadow-2;
194
text-align: center;
195
-x-offset: 8px;
196
}
197
/* App Vault/Grid */
199
.icon-grid {
200
spacing: 30px;
201
-shell-grid-horizontal-item-size: 136px;
202
-shell-grid-vertical-item-size: 136px;
203
.overview-icon { icon-size: 96px; }
205
}
206
//.app-display { spacing: 20px; }
207
.system-action-icon {
209
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); // FIXME: this should really have a highlight
210
background-color: $grey_900;
211
color: $white;
212
border-radius: 99px;
213
icon-size: 48px;
214
}
215
.app-view-controls { //favorties | all toggle container
217
width: 320px;
218
padding-bottom: 32px;
219
}
220
.app-view-control { //favorties | all toggle button
221
padding: 0 8px;
222
font-weight: bold;
223
color: on(dark, text2);
224
&:hover {
225
color: on(dark);
226
background-color: $inverse-overlay-hover !important;
227
}
228
&:active {
229
color: on(dark);
230
background-color: $inverse-overlay-active !important;
231
}
232
&:checked {
233
color: on(dark);
234
background-color: rgba($scrim, 0.01) !important;
235
box-shadow: inset 0 2px 0 on(dark);
236
}
237
&:first-child {
238
border-right-width: 0;
239
border-radius: $corner-radius;
240
&:checked { border-radius: 0; }
241
}
242
&:last-child {
243
border-radius: $corner-radius;
244
&:checked { border-radius: 0; }
245
}
246
}
247
//Icon tile
249
.search-provider-icon,
250
.list-search-result {
251
@extend %icon_tile;
252
&:focus, &:selected, &:hover {
253
background-color: $inverse-overlay-hover;
254
transition-duration: 0ms;
255
}
256
&:active, &:checked {
257
background-color: $inverse-overlay-active;
258
transition-duration: $duration-ripple;
259
}
260
}
261
.app-well-app,
262
.app-well-app.app-folder,
263
.show-apps,
264
.grid-search-result {
265
& .overview-icon {
266
@extend %icon_tile;
267
}
268
&:hover .overview-icon,
269
&:focus .overview-icon,
270
&:selected .overview-icon {
271
background-color: $inverse-overlay-hover;
272
transition-duration: 0ms;
273
border-image: none;
274
background-image: none;
275
}
276
&:active .overview-icon,
277
&:checked .overview-icon {
278
background-color: $inverse-overlay-active;
279
box-shadow: $shadow-0;
280
transition-duration: $duration-ripple;
281
}
282
}
284
.app-well-app-running-dot { //running apps indicator
286
width: 32px; height: 2px;
287
background-color: on(dark);
288
margin-bottom: 0;
289
}
290
.app-well-app.app-folder > .overview-icon {
292
background-color: on(dark, fill);
293
}
294
.show-apps .show-apps-icon {
296
color: on(dark, text2);
297
}
298
.show-apps:hover .show-apps-icon,
300
.show-apps:active .show-apps-icon,
301
.show-apps:checked .show-apps-icon,
302
.show-apps:focus .show-apps-icon {
303
color: on(dark);
304
transition-duration: $duration;
305
}
306
// Collections
309
.app-folder-popup { //expanded collection
310
-arrow-border-radius: $corner-radius;
311
-arrow-background-color: on(dark, fill);
312
-arrow-base: 24px;
313
-arrow-rise: 12px;
314
}
315
.app-folder-popup-bin { padding: 5px; }
316
.app-folder-icon {
317
padding: 5px;
318
spacing-rows: 5px;
319
spacing-columns: 5px;
320
}
321
.page-indicator {
323
padding: 15px 20px;
324
.page-indicator-icon {
326
width: 12px;
327
height: 12px;
328
border: none;
329
border-radius: 12px;
330
background-image: none;
331
background-color: on(dark, text2-disabled);
332
transition-duration: $duration;
333
}
334
&:hover .page-indicator-icon {
335
border-color: transparent;
336
background-image: none;
337
background-color: on(dark, text-disabled);
338
}
339
&:active .page-indicator-icon {
340
border: none;
341
margin: 0;
342
background-image: none;
343
background-color: on(dark, text2);
344
}
345
&:checked .page-indicator-icon,
346
&:checked:active .page-indicator-icon {
347
background-image: none;
348
background-color: on(dark);
349
transition-duration: 0ms;
350
}
351
&:checked:active { background-image: none; background-color: transparent; }
352
}
353
.no-frequent-applications-label { @extend %status_text; }
355
.app-well-app > .overview-icon.overview-icon-with-label,
357
.grid-search-result .overview-icon.overview-icon-with-label {
358
padding: 10px 8px 5px 8px;
359
spacing: 4px;
360
}
361
// Workspace pager
363
.workspace-thumbnails { //container ala dash
364
@extend %overview-panel;
365
visible-width: 32px; //amount visible before hover
366
spacing: 12px;
367
padding: 12px;
368
border-radius: $corner-radius 0 0 $corner-radius;
369
//border-width: 0; //fixme: can't have non unoform borders :(
370
&:rtl { border-radius: 0 $corner-radius $corner-radius 0;}
371
.placeholder {
373
background-image: url("assets/dash-placeholder.svg");
374
background-size: contain;
375
height: 24px;
376
}
377
}
378
.workspace-thumbnail-indicator {
379
border: 0 solid on(dark);
380
border-left-width: 2px;
381
padding: 6px 10px;
382
border-radius: 0;
383
}
384
//Some hacks I don't even
386
.search-display > StBoxLayout,
387
.all-apps,
388
.frequent-apps > StBoxLayout {
389
// horizontal padding to make sure scrollbars or dash don't overlap content
390
padding: 0px 88px 10px 88px;
391
}
392
/* Eeeky things */
394
//magnifier
396
.magnifier-zoom-region {
398
border: 2px solid $primary;
399
&.full-screen { border-width: 0; }
400
}
401
//Keyboard
403
/* On-screen Keyboard */
404
.word-suggestions {
405
@include type(subtitle1);
406
spacing: 12px;
407
min-height: 20pt;
408
}
409
#keyboard {
411
background-color: $scrim-alt;
412
.page-indicator {
414
padding: 4px 4px;
415
.page-indicator-icon {
417
width: 8px;
418
height: 8px
419
}
420
}
421
}
422
.key-container {
424
padding: 4px;
425
spacing: 4px;
426
}
427
.keyboard-key {
429
min-height: 1.2em;
430
min-width: 1.2em;
431
font-size: 2em;
432
font-weight: 500;
433
border-radius: $corner-radius;
434
border: none;
435
@include button(normal);
436
&:focus { @include button(focus); }
437
&:hover,&:checked { @include button(hover); }
438
&:active { @include button(active);}
439
&:grayed { //FIXME
440
background-color: $scrim-alt;
441
color: on($scrim-alt);
442
border-color: $scrim-alt;
443
}
444
&.default-key {
445
border-color: transparent;
446
background-color: $surface;
447
background-size: 24px;
448
&:active { background-color: mix($text, $surface, percentage(0.2)); }
449
}
450
&.enter-key {
451
border-color: transparent;
452
background-color: $primary;
453
background-image: url("assets/key-enter.svg");
454
&:active { background-color: mix(on($primary), $primary, percentage(0.2)); }
455
}
456
&.shift-key-lowercase {
457
background-image: url("assets/key-shift.svg");
458
}
459
&.shift-key-uppercase {
460
background-image: url("assets/key-shift-uppercase.svg");
461
}
462
&.shift-key-uppercase:latched {
463
background-image: url("assets/key-shift-latched-uppercase.svg");
464
}
465
&.hide-key {
466
background-image: url("assets/key-hide.svg");
467
}
468
&.layout-key {
469
background-image: url("assets/key-layout.svg");
470
}
471
}
472
.keyboard-subkeys { //long press on a key popup
474
color: inherit;
475
padding: 5px;
476
-arrow-border-radius: 0;
477
-arrow-background-color: transparent;
478
-arrow-border-width: 0;
479
-arrow-border-color: transparent;
480
-arrow-base: 0;
481
-arrow-rise: 0;
482
-boxpointer-gap: 5px;
483
background-color: $surface;
484
border-radius: $corner-radius;
485
box-shadow: $shadow-2;
486
}
487
.emoji-page {
489
.keyboard-key {
490
border: none;
491
@include button(flat-normal, $tc: on($scrim-alt));
492
&:hover, &:focus { @include button(flat-hover, $tc: on($scrim-alt)); }
493
&:active { @include button(flat-active, $tc: on($scrim-alt)); }
494
}
495
}
496
.emoji-panel {
498
.keyboard-key:latched {
499
border-color: transparent;
500
background-color: $primary;
501
color: on($primary);
502
}
503
}
504
/* Auth Dialogs & Screen Shield */
506
.user-icon {
508
background-size: contain;
509
border: none;
510
color: on($os-background);
511
border-radius: $circular-radius;
512
&:hover {
513
border-color: on($os-background);
514
color: on($os-background);
515
}
516
}
517
// LOGIN DIALOG
519
.login-dialog-banner-view {
521
padding-top: 24px;
522
max-width: 23em;
523
}
524
.login-dialog {
526
//reset
527
border: none;
528
background-color: transparent;
529
StEntry {
531
color: on($os-background);
532
selection-background-color: on($os-background, stroke);
533
selected-color: on($os-background);
534
@include entry(normal, $fc:on($os-background, stroke));
535
&:focus { @include entry(focus, $fc:on($os-background)); }
536
&:insensitive {
537
@include entry(insensitive, $fc:on($os-background, stroke-disabled));
538
color: on($os-background, text-disabled);
539
}
540
}
541
.modal-dialog-button-box { spacing: 3px; }
543
.modal-dialog-button {
544
min-width: 64px - 8px * 2;
545
padding: 0 8px;
546
@include button(flat-normal, $tc: on($os-background));
547
&:hover,&:focus { @include button(flat-hover, $tc: on($os-background)); }
548
&:active { @include button(flat-active, $tc: on($os-background)); }
549
&:insensitive { @include button(flat-insensitive, $tc: on($os-background)); }
550
&:default {
552
min-width: 64px - 16px * 2;
553
padding: 0 16px;
554
@include button(normal, $c: $primary, $tc: on($primary));
555
&:hover,&:focus { @include button(hover, $c: $primary, $tc: on($primary)); }
556
&:active { @include button(active, $c: $primary, $tc: on($primary)); }
557
&:insensitive { @include button(insensitive, $c: on($os-background, fill), $tc: on($os-background, text-disabled)); }
558
}
559
}
560
}
561
.login-dialog-logo-bin { padding: 24px 0px; }
563
.login-dialog-banner { color: on($os-background, text2); }
564
.login-dialog-button-box { spacing: 5px; }
565
.login-dialog-message-warning { color: on($os-background, error); }
566
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
567
.login-dialog-user-selection-box { padding: 100px 0px; }
568
.login-dialog-not-listed-label {
569
padding-left: 2px;
570
.login-dialog-not-listed-button:focus &,
571
.login-dialog-not-listed-button:hover & {
572
color: on($os-background);
573
}
574
}
575
.login-dialog-not-listed-label {
576
transition-duration: $duration;
577
font-size: 1em;
578
font-weight: bold;
579
color: on($os-background, text2);
580
padding-top: 1em;
581
border-radius: $corner-radius;
582
&:hover {
583
background-color: $inverse-overlay-hover;
584
color: on($os-background);
585
}
586
&:focus { background-color: $inverse-overlay-focus; }
587
&:active {
588
transition-duration: $duration-ripple;
589
background-color: $inverse-overlay-active;
590
color: on($os-background);
591
}
592
}
593
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
595
.login-dialog-user-list {
596
spacing: 12px;
597
width: 23em;
598
&:expanded .login-dialog-user-list-item:selected { background-color: $inverse-overlay-focus; color: on($os-background); }
599
&:expanded .login-dialog-user-list-item:hover { background-color: $inverse-overlay-hover; color: on($os-background); }
600
&:expanded .login-dialog-user-list-item:active { background-color: $inverse-overlay-active; color: on($os-background); }
601
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid on($os-background); }
602
}
603
.login-dialog-user-list-item {
604
transition-duration: $duration;
605
border-radius: $corner-radius;
606
padding: 6px;
607
color: on($os-background, text2);
608
&:ltr .user-widget { padding-right: 1em; }
609
&:rtl .user-widget { padding-left: 1em; }
610
&:hover {
611
background-color: $inverse-overlay-hover;
612
color: on($os-background);
613
}
614
&:active {
615
transition-duration: $duration-ripple;
616
background-color: $inverse-overlay-active;
617
color: on($os-background);
618
}
619
.login-dialog-timed-login-indicator {
620
height: 2px;
621
margin-top: 6px;
622
background-color: on($os-background);
623
}
624
&:focus .login-dialog-timed-login-indicator { background-color: on($os-background); }
625
}
626
.login-dialog-username,
628
.user-widget-label {
629
color: on($os-background);
630
@include type(headline6);
631
text-align: left;
632
padding-left: 15px;
633
}
634
.user-widget-label {
635
&:ltr { padding-left: 14px; }
636
&:rtl { padding-right: 14px; }
637
}
638
.login-dialog-prompt-layout {
640
padding-top: 24px;
641
padding-bottom: 12px;
642
spacing: 8px;
643
width: 23em;
644
}
645
.login-dialog-prompt-label {
647
color: on($os-background, text2);
648
font-size: 1em;
649
padding-top: 1em;
650
}
651
.login-dialog-session-list-button StIcon {
653
icon-size: 1.25em;
654
}
655
.login-dialog-session-list-button {
657
color: on($os-background, text2);
658
&:hover,&:focus { color: on($os-background); }
659
&:active { color: on($os-background); }
660
}
661
//SCREEN SHIELD
663
.screen-shield-arrows {
665
padding-bottom: 3em;
666
}
667
.screen-shield-arrows Gjs_Arrow {
669
color: white;
670
width: 80px;
671
height: 48px;
672
-arrow-thickness: 12px;
673
-arrow-shadow: $shadow-1;
674
}
675
.screen-shield-clock {
677
color: white;
678
text-shadow: $shadow-1;
679
font-weight: normal;
680
text-align: center;
681
padding-bottom: 1.5em;
682
}
683
.screen-shield-clock-time {
685
@include type(headline1);
686
text-shadow: $shadow-1;
687
font-feature-settings: "tnum";
688
}
689
.screen-shield-clock-date { @include type(headline4); }
691
.screen-shield-notifications-container {
693
spacing: 6px;
694
width: 30em;
695
background-color: transparent;
696
max-height: 500px;
697
.summary-notification-stack-scrollview {
698
padding-top: 0;
699
padding-bottom: 0;
700
}
701
.notification,
703
.screen-shield-notification-source {
704
padding: 8px;
705
border: none;
706
background-color: $scrim-alt;
707
color: on($scrim-alt);
708
border-radius: $corner-radius;
709
}
710
.notification { margin-right: 16px; } //compensate for space allocated to the scrollbar
711
}
712
.screen-shield-notification-label {
715
min-height: $small-size - 2px;
716
padding: 2px 0px 0px 16px;
717
font-weight: bold;
718
}
719
.screen-shield-notification-count-text {
721
min-height: $small-size - 2px;
722
padding: 2px 0px 0px 16px;
723
color: on($scrim-alt, text2);
724
}
725
#panel.lock-screen { background-color: $scrim-alt; }
727
.screen-shield-background { //just the shadow, really
729
background: black;
730
box-shadow: $shadow-5;
731
}
732
#lockDialogGroup {
734
background: $os-background;
735
background-size: cover;
736
color: on($os-background, text2);
737
}
738
#screenShieldNotifications {
740
StScrollBar { @extend %overview_scrollbar; }
741
}
742
// Looking Glass
745
#LookingGlassDialog {
746
background-color: $surface;
747
spacing: 4px;
748
padding: 0;
749
border: none;
750
border-radius: $corner-radius;
751
box-shadow: $shadow-4;
752
& > #Toolbar {
753
padding: 0 8px;
754
border: none;
755
border-radius: 0;
756
background-color: rgba($surface, 0.01);
757
box-shadow: inset 0 -1px 0 $divider;
758
}
759
.labels { spacing: 0; }
760
.notebook-tab {
761
-natural-hpadding: 12px;
762
-minimum-hpadding: 6px;
763
font-weight: bold;
764
color: $text2;
765
transition-duration: $duration;
766
padding-left: 16px;
767
padding-right: 16px;
768
min-height: $medium-size;
769
padding: 0 16px * 2;
770
&:hover {
771
background-color: $overlay-hover;
772
color: $text;
773
text-shadow: none;
774
}
775
&:active {
776
background-color: $overlay-active;
777
color: $text;
778
transition-duration: $duration-ripple;
779
}
780
&:selected {
781
border-bottom-width: 0;
782
border-color: transparent;
783
background-color: rgba($surface, 0.01);
784
box-shadow: inset 0 -2px 0px $primary;
785
color: $text;
786
text-shadow: none;
787
}
788
}
789
StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
790
StBoxLayout#ResultsArea { spacing: 4px; }
791
}
792
.lg-dialog {
794
StEntry {
795
selection-background-color: $overlay-selected;
796
selected-color: $text;
797
}
798
.shell-link {
799
color: $primary;
800
&:hover { color: $primary; }
801
}
802
}
803
.lg-completions-text {
805
font-size: 1em;
806
font-style: italic;
807
}
808
.lg-obj-inspector-title {
810
spacing: 4px;
811
}
812
.lg-obj-inspector-button {
814
min-height: $medium-size;
815
min-width: 64px - 8px * 2;
816
padding: 0 8px;
817
border: none;
818
border-radius: $corner-radius;
819
@include type(button);
820
@include button(flat-normal);
821
&:hover { @include button(flat-hover); }
822
&:active { @include button(flat-active); }
823
&:insensitive { @include button(flat-insensitive); }
824
&:focus { @include button(flat-focus); }
825
&:hover { border: none; }
826
}
827
#lookingGlassExtensions { padding: 4px; }
829
.lg-extensions-list {
831
padding: 4px;
832
spacing: 6px;
833
}
834
.lg-extension {
836
border: none;
837
border-radius: $corner-radius;
838
padding: 4px;
839
}
840
.lg-extension-name {
842
@include type(headline5);
843
}
844
.lg-extension-meta {
846
spacing: 6px;
847
}
848
#LookingGlassPropertyInspector {
850
background: $surface;
851
border: none;
852
border-radius: $corner-radius;
853
padding: 6px;
854
box-shadow: $shadow-4;
855
}
856