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
//close buttons
27
.window-close {
29
// FIXME: unless disable the transition, button will distort when hovering
30
// transition-duration: $duration;
31
height: $medium-size;
32
width: $medium-size;
33
-shell-close-overlap: $medium-size / 2;
34
-st-background-image-shadow: $shadow-1;
35
background-image: url("assets/window-close.svg");
36
background-size: $medium-size;
37
&:hover {
39
-st-background-image-shadow: $shadow-2;
40
background-image: url("assets/window-close.svg");
41
}
42
&:active {
43
// transition-duration: $duration-ripple;
44
background-image: url("assets/window-close-active.svg");
45
}
46
// For backward compatibility of 3.26.0
48
&:rtl { -st-background-image-shadow: $shadow-1; }
49
&:rtl:hover { -st-background-image-shadow: $shadow-2; }
50
}
51
.window-picker { //container around window thumbnails
53
-horizontal-spacing: 16px;
54
-vertical-spacing: 16px;
55
padding: 0 16px 32px;
56
&.external-monitor { padding: 16px; }
58
}
59
.window-clone-border {
61
border: 4px solid on(dark, stroke);
62
border-radius: $corner-radius;
63
// For window decorations with round corners we can't match
64
// the exact shape when the window is scaled. So apply a shadow
65
// to fix that case
66
box-shadow: inset 0 0 0 1px on(dark, stroke);
67
}
68
.window-caption {
69
spacing: 25px;
70
color: on($scrim);
71
background-color: $scrim;
72
border-radius: $corner-radius;
73
padding: 4px 8px;
74
}
75
//search entry
77
.search-entry {
78
width: 320px - 8px * 2;
79
padding: 0 8px;
80
border-radius: $corner-radius $corner-radius 0 0;
81
color: on(dark, text-disabled);
82
selection-background-color: on(dark, stroke);
83
selected-color: on(dark);
84
@include entry(normal,$fc:on(dark, stroke));
85
&:hover { @include entry(hover,$fc:on(dark, stroke)); }
86
&:focus {
87
@include entry(focus,$fc:on(dark));
88
padding: 0 8px;
89
border-width: 0;
90
color: on(dark);
91
}
92
.search-entry-icon { icon-size: 16px; padding: 0 0; color: on(dark, text2); }
94
&:hover, &:focus {
96
.search-entry-icon { color: on(dark); }
97
}
98
}
99
//search results
101
#searchResultsBin {
103
max-width: 1000px;
104
}
105
#searchResultsContent {
107
padding-left: 20px;
108
padding-right: 20px;
109
spacing: 16px;
110
}
111
.search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
113
.search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container
114
.search-statustext { // "no results"
115
@extend %status_text;
116
}
117
.list-search-results { spacing: 3px; }
118
.search-section-separator { height: 1px; background-color: on(dark, divider); }
120
.list-search-result-content { spacing: 30px; }
122
.list-search-result-title { @include type(subtitle1); color: on(dark); spacing: 12px; }
123
.list-search-result-description { color: on(dark, text2); }
124
.list-search-provider-details { width: 150px; color: on(dark, text2); margin-top: 0.24em; }
125
.list-search-provider-content { spacing: 20px; }
126
.search-provider-icon { padding: 15px; }
127
/* DASHBOARD */
130
#dash {
132
transition-duration: $duration-panel;
133
font-size: 1em;
134
color: on(dark);
135
background-color: on(dark, fill);
136
padding: 3px 0;
137
border: none;
138
border-left: 0px;
139
border-radius: 0px $corner-radius $corner-radius 0px;
140
&:rtl {
142
border-radius: $corner-radius 0 0 $corner-radius;
143
}
144
.placeholder {
146
background-image: url("assets/dash-placeholder.svg");
147
background-size: contain;
148
height: 24px;
149
}
150
.empty-dash-drop-target {
152
width: 24px;
153
height: 24px;
154
}
155
}
157
.dash-item-container > StWidget {
159
padding: 3px 6px;
160
}
161
.dash-label { //osd tooltip
163
// min-height: 32px - 6px * 2;
164
border-radius: $corner-radius;
165
padding: 7px 8px;
166
color: $text;
167
background-color: $surface;
168
box-shadow: $shadow-2;
169
text-align: center;
170
-x-offset: 8px;
171
}
172
/* App Vault/Grid */
174
.icon-grid {
175
spacing: 30px;
176
-shell-grid-horizontal-item-size: 136px;
177
-shell-grid-vertical-item-size: 136px;
178
.overview-icon { icon-size: 96px; }
180
}
181
//.app-display { spacing: 20px; }
182
.system-action-icon {
184
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); // FIXME: this should really have a highlight
185
background-color: $grey_900;
186
color: $white;
187
border-radius: 99px;
188
icon-size: 48px;
189
}
190
.app-view-controls { //favorties | all toggle container
192
width: 320px;
193
padding-bottom: 32px;
194
}
195
.app-view-control { //favorties | all toggle button
196
padding: 0 8px;
197
font-weight: bold;
198
color: on(dark, text2);
199
&:hover {
200
color: on(dark);
201
background-color: $inverse-overlay-hover !important;
202
}
203
&:active {
204
color: on(dark);
205
background-color: $inverse-overlay-active !important;
206
}
207
&:checked {
208
color: on(dark);
209
background-color: rgba($scrim, 0.01) !important;
210
box-shadow: inset 0 2px 0 on(dark);
211
}
212
&:first-child {
213
border-right-width: 0;
214
border-radius: $corner-radius;
215
&:checked { border-radius: 0; }
216
}
217
&:last-child {
218
border-radius: $corner-radius;
219
&:checked { border-radius: 0; }
220
}
221
}
222
//Icon tile
224
.search-provider-icon,
225
.list-search-result {
226
@extend %icon_tile;
227
&:focus, &:selected, &:hover {
228
background-color: $inverse-overlay-hover;
229
transition-duration: 0ms;
230
}
231
&:active, &:checked {
232
background-color: $inverse-overlay-active;
233
transition-duration: $duration-ripple;
234
}
235
}
236
.app-well-app,
237
.app-well-app.app-folder,
238
.show-apps,
239
.grid-search-result {
240
& .overview-icon {
241
@extend %icon_tile;
242
}
243
&:hover .overview-icon,
244
&:focus .overview-icon,
245
&:selected .overview-icon {
246
background-color: $inverse-overlay-hover;
247
transition-duration: 0ms;
248
border-image: none;
249
background-image: none;
250
}
251
&:active .overview-icon,
252
&:checked .overview-icon {
253
background-color: $inverse-overlay-active;
254
box-shadow: $shadow-0;
255
transition-duration: $duration-ripple;
256
}
257
}
259
.app-well-app-running-dot { //running apps indicator
261
width: 32px; height: 2px;
262
background-color: on(dark);
263
margin-bottom: 0;
264
}
265
.app-well-app.app-folder > .overview-icon {
267
background-color: on(dark, fill);
268
}
269
.show-apps .show-apps-icon {
271
color: on(dark, text2);
272
}
273
.show-apps:hover .show-apps-icon,
275
.show-apps:active .show-apps-icon,
276
.show-apps:checked .show-apps-icon,
277
.show-apps:focus .show-apps-icon {
278
color: on(dark);
279
transition-duration: $duration;
280
}
281
// Collections
284
.app-folder-popup { //expanded collection
285
-arrow-border-radius: $corner-radius;
286
-arrow-background-color: on(dark, fill);
287
-arrow-base: 24px;
288
-arrow-rise: 12px;
289
}
290
.app-folder-popup-bin { padding: 5px; }
291
.app-folder-icon {
292
padding: 5px;
293
spacing-rows: 5px;
294
spacing-columns: 5px;
295
}
296
.page-indicator {
298
padding: 15px 20px;
299
.page-indicator-icon {
301
width: 12px;
302
height: 12px;
303
border-radius: 12px;
304
background-image: none;
305
background-color: on(dark, text2-disabled);
306
transition-duration: $duration;
307
}
308
&:hover .page-indicator-icon {
309
background-image: none;
310
background-color: on(dark, text-disabled);
311
}
312
&:active .page-indicator-icon {
313
background-image: none;
314
background-color: on(dark, text2);
315
}
316
&:checked .page-indicator-icon {
317
background-image: none;
318
background-color: on(dark);
319
transition-duration: 0ms;
320
}
321
&:checked:active { background-image: none; }
322
}
323
.no-frequent-applications-label { @extend %status_text; }
325
.app-well-app > .overview-icon.overview-icon-with-label,
327
.grid-search-result .overview-icon.overview-icon-with-label {
328
padding: 10px 8px 5px 8px;
329
spacing: 4px;
330
}
331
// Workspace pager
333
.workspace-thumbnails { //container ala dash
334
@extend %overview-panel;
335
visible-width: 32px; //amount visible before hover
336
spacing: 12px;
337
padding: 12px;
338
border-radius: $corner-radius 0 0 $corner-radius;
339
//border-width: 0; //fixme: can't have non unoform borders :(
340
&:rtl { border-radius: 0 $corner-radius $corner-radius 0;}
341
.placeholder {
343
background-image: url("assets/dash-placeholder.svg");
344
background-size: contain;
345
height: 24px;
346
}
347
}
348
.workspace-thumbnail-indicator {
349
border: 0 solid on(dark);
350
border-left-width: 2px;
351
padding: 6px 10px;
352
border-radius: 0;
353
}
354
//Some hacks I don't even
356
.search-display > StBoxLayout,
357
.all-apps,
358
.frequent-apps > StBoxLayout {
359
// horizontal padding to make sure scrollbars or dash don't overlap content
360
padding: 0px 88px 10px 88px;
361
}
362
/* Eeeky things */
364
//magnifier
366
.magnifier-zoom-region {
368
border: 2px solid $primary;
369
&.full-screen { border-width: 0; }
370
}
371
//Keyboard
373
/* On-screen Keyboard */
374
.word-suggestions {
375
@include type(subtitle1);
376
spacing: 12px;
377
min-height: 20pt;
378
}
379
#keyboard {
381
background-color: $scrim-alt;
382
}
383
.key-container {
385
padding: 4px;
386
spacing: 4px;
387
}
388
.keyboard-key {
390
min-height: 1.2em;
391
min-width: 1.2em;
392
font-size: 2em;
393
font-weight: 500;
394
border-radius: $corner-radius;
395
border: none;
396
@include button(normal);
397
&:focus { @include button(focus); }
398
&:hover,&:checked { @include button(hover); }
399
&:active { @include button(active);}
400
&:grayed { //FIXME
401
background-color: $scrim-alt;
402
color: on($scrim-alt);
403
border-color: $scrim-alt;
404
}
405
&.default-key {
406
border-color: transparent;
407
background-color: $surface;
408
background-size: 24px;
409
&:active { background-color: mix($text, $surface, percentage(0.2)); }
410
}
411
&.enter-key {
412
border-color: transparent;
413
background-color: $primary;
414
background-image: url("assets/key-enter.svg");
415
&:active { background-color: mix(on($primary), $primary, percentage(0.2)); }
416
}
417
&.shift-key-lowercase {
418
background-image: url("assets/key-shift.svg");
419
}
420
&.shift-key-uppercase {
421
background-image: url("assets/key-shift-uppercase.svg");
422
}
423
&.shift-key-uppercase:latched {
424
background-image: url("assets/key-shift-latched-uppercase.svg");
425
}
426
&.hide-key {
427
background-image: url("assets/key-hide.svg");
428
}
429
&.layout-key {
430
background-image: url("assets/key-layout.svg");
431
}
432
}
433
.keyboard-subkeys { //long press on a key popup
435
color: inherit;
436
padding: 5px;
437
-arrow-border-radius: 0;
438
-arrow-background-color: transparent;
439
-arrow-border-width: 0;
440
-arrow-border-color: transparent;
441
-arrow-base: 0;
442
-arrow-rise: 0;
443
-boxpointer-gap: 5px;
444
background-color: $surface;
445
border-radius: $corner-radius;
446
box-shadow: $shadow-2;
447
}
448
/* Auth Dialogs & Screen Shield */
450
.framed-user-icon {
452
background-size: contain;
453
border: none;
454
color: on($os-background);
455
border-radius: $corner-radius;
456
&:hover {
457
border-color: on($os-background);
458
color: on($os-background);
459
}
460
}
461
// LOGIN DIALOG
463
.login-dialog-banner-view {
465
padding-top: 24px;
466
max-width: 23em;
467
}
468
.login-dialog {
470
//reset
471
border: none;
472
background-color: transparent;
473
StEntry {
475
color: on($os-background);
476
selection-background-color: on($os-background, stroke);
477
selected-color: on($os-background);
478
@include entry(normal, $fc:on($os-background, stroke));
479
&:focus { @include entry(focus, $fc:on($os-background)); }
480
&:insensitive {
481
@include entry(insensitive, $fc:on($os-background, stroke-disabled));
482
color: on($os-background, text-disabled);
483
}
484
}
485
.modal-dialog-button-box { spacing: 3px; }
487
.modal-dialog-button {
488
min-width: 64px - 8px * 2;
489
padding: 0 8px;
490
@include button(flat-normal, $tc: on($os-background));
491
&:hover,&:focus { @include button(flat-hover, $tc: on($os-background)); }
492
&:active { @include button(flat-active, $tc: on($os-background)); }
493
&:insensitive { @include button(flat-insensitive, $tc: on($os-background)); }
494
&:default {
496
min-width: 64px - 16px * 2;
497
padding: 0 16px;
498
@include button(normal, $c: $primary, $tc: on($primary));
499
&:hover,&:focus { @include button(hover, $c: $primary, $tc: on($primary)); }
500
&:active { @include button(active, $c: $primary, $tc: on($primary)); }
501
&:insensitive { @include button(insensitive, $c: on($os-background, fill), $tc: on($os-background, text-disabled)); }
502
}
503
}
504
}
505
.login-dialog-logo-bin { padding: 24px 0px; }
507
.login-dialog-banner { color: on($os-background, text2); }
508
.login-dialog-button-box { spacing: 5px; }
509
.login-dialog-message-warning { color: on($os-background, error); }
510
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
511
.login-dialog-user-selection-box { padding: 100px 0px; }
512
.login-dialog-not-listed-label {
513
padding-left: 2px;
514
.login-dialog-not-listed-button:focus &,
515
.login-dialog-not-listed-button:hover & {
516
color: on($os-background);
517
}
518
}
519
.login-dialog-not-listed-label {
520
transition-duration: $duration;
521
font-size: 1em;
522
font-weight: bold;
523
color: on($os-background, text2);
524
padding-top: 1em;
525
border-radius: $corner-radius;
526
&:hover {
527
background-color: $inverse-overlay-hover;
528
color: on($os-background);
529
}
530
&:focus { background-color: $inverse-overlay-focus; }
531
&:active {
532
transition-duration: $duration-ripple;
533
background-color: $inverse-overlay-active;
534
color: on($os-background);
535
}
536
}
537
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
539
.login-dialog-user-list {
540
spacing: 12px;
541
width: 23em;
542
&:expanded .login-dialog-user-list-item:selected { background-color: $inverse-overlay-focus; color: on($os-background); }
543
&:expanded .login-dialog-user-list-item:hover { background-color: $inverse-overlay-hover; color: on($os-background); }
544
&:expanded .login-dialog-user-list-item:active { background-color: $inverse-overlay-active; color: on($os-background); }
545
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid on($os-background); }
546
}
547
.login-dialog-user-list-item {
548
transition-duration: $duration;
549
border-radius: $corner-radius;
550
padding: 6px;
551
color: on($os-background, text2);
552
&:ltr .user-widget { padding-right: 1em; }
553
&:rtl .user-widget { padding-left: 1em; }
554
&:hover {
555
background-color: $inverse-overlay-hover;
556
color: on($os-background);
557
}
558
&:active {
559
transition-duration: $duration-ripple;
560
background-color: $inverse-overlay-active;
561
color: on($os-background);
562
}
563
.login-dialog-timed-login-indicator {
564
height: 2px;
565
margin-top: 6px;
566
background-color: on($os-background);
567
}
568
&:focus .login-dialog-timed-login-indicator { background-color: on($os-background); }
569
}
570
.login-dialog-username,
572
.user-widget-label {
573
color: on($os-background);
574
@include type(headline6);
575
text-align: left;
576
padding-left: 15px;
577
}
578
.user-widget-label {
579
&:ltr { padding-left: 14px; }
580
&:rtl { padding-right: 14px; }
581
}
582
.login-dialog-prompt-layout {
584
padding-top: 24px;
585
padding-bottom: 12px;
586
spacing: 8px;
587
width: 23em;
588
}
589
.login-dialog-prompt-label {
591
color: on($os-background, text2);
592
font-size: 1em;
593
padding-top: 1em;
594
}
595
.login-dialog-session-list-button StIcon {
597
icon-size: 1.25em;
598
}
599
.login-dialog-session-list-button {
601
color: on($os-background, text2);
602
&:hover,&:focus { color: on($os-background); }
603
&:active { color: on($os-background); }
604
}
605
//SCREEN SHIELD
607
.screen-shield-arrows {
609
padding-bottom: 3em;
610
}
611
.screen-shield-arrows Gjs_Arrow {
613
color: white;
614
width: 80px;
615
height: 48px;
616
-arrow-thickness: 12px;
617
-arrow-shadow: $shadow-1;
618
}
619
.screen-shield-clock {
621
color: white;
622
text-shadow: $shadow-1;
623
font-weight: normal;
624
text-align: center;
625
padding-bottom: 1.5em;
626
}
627
.screen-shield-clock-time {
629
@include type(headline1);
630
text-shadow: $shadow-1;
631
font-feature-settings: "tnum";
632
}
633
.screen-shield-clock-date { @include type(headline4); }
635
.screen-shield-notifications-container {
637
spacing: 6px;
638
width: 30em;
639
background-color: transparent;
640
max-height: 500px;
641
.summary-notification-stack-scrollview {
642
padding-top: 0;
643
padding-bottom: 0;
644
}
645
.notification,
647
.screen-shield-notification-source {
648
padding: 8px;
649
border: none;
650
background-color: $scrim-alt;
651
color: on($scrim-alt);
652
border-radius: $corner-radius;
653
}
654
.notification { margin-right: 16px; } //compensate for space allocated to the scrollbar
655
}
656
.screen-shield-notification-label {
659
min-height: $small-size - 2px;
660
padding: 2px 0px 0px 16px;
661
font-weight: bold;
662
}
663
.screen-shield-notification-count-text {
665
min-height: $small-size - 2px;
666
padding: 2px 0px 0px 16px;
667
color: on($scrim-alt, text2);
668
}
669
#panel.lock-screen { background-color: $scrim-alt; }
671
.screen-shield-background { //just the shadow, really
673
background: black;
674
box-shadow: $shadow-5;
675
}
676
#lockDialogGroup {
678
background: $os-background;
679
background-size: cover;
680
color: on($os-background, text2);
681
}
682
#screenShieldNotifications {
684
StScrollBar { @extend %overview_scrollbar; }
685
}
686
// Looking Glass
689
#LookingGlassDialog {
690
background-color: $surface;
691
spacing: 4px;
692
padding: 0;
693
border: none;
694
border-radius: $corner-radius;
695
box-shadow: $shadow-4;
696
& > #Toolbar {
697
padding: 0 8px;
698
border: none;
699
border-radius: 0;
700
background-color: rgba($surface, 0.01);
701
box-shadow: inset 0 -1px 0 $divider;
702
}
703
.labels { spacing: 0; }
704
.notebook-tab {
705
-natural-hpadding: 12px;
706
-minimum-hpadding: 6px;
707
font-weight: bold;
708
color: $text2;
709
transition-duration: $duration;
710
padding-left: 16px;
711
padding-right: 16px;
712
min-height: $medium-size;
713
padding: 0 16px * 2;
714
&:hover {
715
background-color: $overlay-hover;
716
color: $text;
717
text-shadow: none;
718
}
719
&:active {
720
background-color: $overlay-active;
721
color: $text;
722
transition-duration: $duration-ripple;
723
}
724
&:selected {
725
border-bottom-width: 0;
726
border-color: transparent;
727
background-color: rgba($surface, 0.01);
728
box-shadow: inset 0 -2px 0px $primary;
729
color: $text;
730
text-shadow: none;
731
}
732
}
733
StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
734
StBoxLayout#ResultsArea { spacing: 4px; }
735
}
736
.lg-dialog {
738
StEntry {
739
selection-background-color: $overlay-selected;
740
selected-color: $text;
741
}
742
.shell-link {
743
color: $primary;
744
&:hover { color: $primary; }
745
}
746
}
747
.lg-completions-text {
749
font-size: 1em;
750
font-style: italic;
751
}
752
.lg-obj-inspector-title {
754
spacing: 4px;
755
}
756
.lg-obj-inspector-button {
758
min-height: $medium-size;
759
min-width: 64px - 8px * 2;
760
padding: 0 8px;
761
border: none;
762
border-radius: $corner-radius;
763
@include type(button);
764
@include button(flat-normal);
765
&:hover { @include button(flat-hover); }
766
&:active { @include button(flat-active); }
767
&:insensitive { @include button(flat-insensitive); }
768
&:focus { @include button(flat-focus); }
769
&:hover { border: none; }
770
}
771
#lookingGlassExtensions { padding: 4px; }
773
.lg-extensions-list {
775
padding: 4px;
776
spacing: 6px;
777
}
778
.lg-extension {
780
border: none;
781
border-radius: $corner-radius;
782
padding: 4px;
783
}
784
.lg-extension-name {
786
@include type(headline5);
787
}
788
.lg-extension-meta {
790
spacing: 6px;
791
}
792
#LookingGlassPropertyInspector {
794
background: $surface;
795
border: none;
796
border-radius: $corner-radius;
797
padding: 6px;
798
box-shadow: $shadow-4;
799
}
800