A fork of the Materia GTK theme.

Important information: Google announced that, from September 2026, Android devices will require ALL apps to be signed by Google, effectively leading to an iOS situation. Value your right to a computer that does what you want; do not tolerate this monopolistic practice! Contact me if you don't understand why it is bad. Click to learn more.

 gnome-shell-dark.css

View raw Download
text/plain • 75.97 kiB
ASCII text, with very long lines (824)
        
            
1
/* Copyright 2009, 2015 Red Hat, Inc.
2
*
3
* Portions adapted from Mx's data/style/default.css
4
* Copyright 2009 Intel Corporation
5
*
6
* This program is free software; you can redistribute it and/or modify it
7
* under the terms and conditions of the GNU Lesser General Public License,
8
* version 2.1, as published by the Free Software Foundation.
9
*
10
* This program is distributed in the hope it will be useful, but WITHOUT ANY
11
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
12
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for
13
* more details.
14
*
15
* You should have received a copy of the GNU Lesser General Public License
16
* along with this program; if not, write to the Free Software Foundation,
17
* Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
18
*/
19
stage {
20
color: rgba(255, 255, 255, 0.87);
21
font-size: 10.5pt;
22
font-weight: 400;
23
font-family: "M+ 1c", Roboto, Cantarell, Sans-Serif;
24
}
25
26
.shell-link {
27
transition-duration: 100ms;
28
border-radius: 4px;
29
color: #8ab4f8;
30
}
31
32
.shell-link:hover {
33
background-color: rgba(138, 180, 248, 0.08);
34
color: #8ab4f8;
35
}
36
37
.shell-link:active {
38
transition-duration: 200ms;
39
background-color: rgba(138, 180, 248, 0.2);
40
color: #8ab4f8;
41
}
42
43
.lowres-icon {
44
icon-shadow: none;
45
}
46
47
.icon-dropshadow {
48
icon-shadow: none;
49
}
50
51
/* Entries */
52
.lg-dialog StEntry,
53
StEntry {
54
min-height: 36px;
55
padding: 0 8px;
56
border-width: 0;
57
border-radius: 4px 4px 0 0;
58
color: rgba(255, 255, 255, 0.87);
59
selection-background-color: rgba(138, 180, 248, 0.24);
60
selected-color: rgba(255, 255, 255, 0.87);
61
font-size: 12pt;
62
font-weight: 400;
63
transition-duration: 100ms;
64
background-color: rgba(255, 255, 255, 0.04);
65
border-color: transparent;
66
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.26);
67
}
68
69
.lg-dialog StEntry:hover,
70
StEntry:hover {
71
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.87);
72
}
73
74
.lg-dialog StEntry:focus,
75
StEntry:focus {
76
border-color: transparent;
77
box-shadow: inset 0 -2px #8ab4f8;
78
}
79
80
.lg-dialog StEntry:insensitive,
81
StEntry:insensitive {
82
color: rgba(255, 255, 255, 0.38);
83
border-color: transparent;
84
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
85
}
86
87
.lg-dialog StEntry StIcon.capslock-warning,
88
StEntry StIcon.capslock-warning {
89
icon-size: 16px;
90
padding: 0 4px;
91
warning-color: #fdd633;
92
}
93
94
.lg-dialog StEntry StIcon.peek-password,
95
StEntry StIcon.peek-password {
96
icon-size: 16px;
97
padding: 0 4px;
98
color: rgba(255, 255, 255, 0.6);
99
}
100
101
.lg-dialog StEntry StIcon.peek-password:hover,
102
StEntry StIcon.peek-password:hover {
103
color: rgba(255, 255, 255, 0.87);
104
}
105
106
.lg-dialog StEntry StLabel.hint-text,
107
StEntry StLabel.hint-text {
108
margin-left: 2px;
109
color: rgba(255, 255, 255, 0.6);
110
}
111
112
/* Buttons */
113
.notification-banner .notification-button, .hotplug-notification-item, .modal-dialog .modal-dialog-linked-button, .message-list-clear-button.button, .app-folder-dialog .folder-name-container .edit-folder-button, .lg-obj-inspector-button,
114
.button {
115
min-height: 36px;
116
min-width: 48px;
117
padding: 0 8px;
118
border: 0;
119
border-radius: 4px;
120
font-size: 10.5pt;
121
font-weight: 500;
122
color: #8ab4f8;
123
background-color: transparent;
124
border-color: transparent;
125
box-shadow: 0 0 transparent;
126
text-shadow: none;
127
icon-shadow: none;
128
transition-duration: 100ms;
129
}
130
131
.notification-banner .notification-button:focus, .hotplug-notification-item:focus, .modal-dialog .modal-dialog-linked-button:focus, .message-list-clear-button.button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .lg-obj-inspector-button:focus,
132
.button:focus {
133
color: #8ab4f8;
134
background-color: rgba(138, 180, 248, 0.12);
135
text-shadow: none;
136
icon-shadow: none;
137
box-shadow: 0 0 transparent;
138
}
139
140
.notification-banner .notification-button:hover, .hotplug-notification-item:hover, .modal-dialog .modal-dialog-linked-button:hover, .message-list-clear-button.button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .lg-obj-inspector-button:hover,
141
.button:hover {
142
color: #8ab4f8;
143
background-color: rgba(138, 180, 248, 0.08);
144
border-color: transparent;
145
box-shadow: 0 0 transparent;
146
text-shadow: none;
147
icon-shadow: none;
148
}
149
150
.notification-banner .notification-button:active, .hotplug-notification-item:active, .modal-dialog .modal-dialog-linked-button:active, .message-list-clear-button.button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .lg-obj-inspector-button:active,
151
.button:active {
152
color: #8ab4f8;
153
background-color: rgba(138, 180, 248, 0.2);
154
border-color: transparent;
155
box-shadow: 0 0 transparent;
156
text-shadow: none;
157
icon-shadow: none;
158
transition-duration: 200ms;
159
}
160
161
.notification-banner .notification-button:insensitive, .hotplug-notification-item:insensitive, .modal-dialog .modal-dialog-linked-button:insensitive, .message-list-clear-button.button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .lg-obj-inspector-button:insensitive,
162
.button:insensitive {
163
color: rgba(255, 255, 255, 0.26);
164
background-color: transparent;
165
border-color: transparent;
166
box-shadow: 0 0 transparent;
167
text-shadow: none;
168
icon-shadow: none;
169
}
170
171
.notification-banner .notification-button, .hotplug-notification-item, .modal-dialog .modal-dialog-linked-button {
172
margin: 6px;
173
margin-right: 0;
174
}
175
176
.notification-banner .notification-button:first-child, .hotplug-notification-item:first-child, .modal-dialog .modal-dialog-linked-button:first-child, .notification-banner .notification-button:last-child, .hotplug-notification-item:last-child, .modal-dialog .modal-dialog-linked-button:last-child, .notification-banner .notification-button:first-child:last-child, .hotplug-notification-item:first-child:last-child, .modal-dialog .modal-dialog-linked-button:first-child:last-child {
177
border-radius: 4px;
178
}
179
180
.notification-banner .notification-button:last-child, .hotplug-notification-item:last-child, .modal-dialog .modal-dialog-linked-button:last-child, .notification-banner .notification-button:first-child:last-child, .hotplug-notification-item:first-child:last-child, .modal-dialog .modal-dialog-linked-button:first-child:last-child {
181
margin-right: 6px;
182
border-right-width: 0;
183
}
184
185
/* Check Boxes */
186
.check-box StBoxLayout {
187
spacing: 8px;
188
}
189
190
.check-box StBin {
191
transition-duration: 100ms;
192
width: 24px;
193
height: 24px;
194
padding: 6px;
195
border-radius: 18px;
196
}
197
198
.check-box StBin,
199
.check-box:focus StBin {
200
background-image: url("assets/checkbox-off.svg");
201
}
202
203
.check-box:focus StBin {
204
background-color: rgba(255, 255, 255, 0.12);
205
}
206
207
.check-box:hover StBin {
208
background-color: rgba(255, 255, 255, 0.08);
209
}
210
211
.check-box:active StBin {
212
transition-duration: 200ms;
213
background-color: rgba(255, 255, 255, 0.2);
214
}
215
216
.check-box:checked StBin,
217
.check-box:checked:focus StBin {
218
background-image: url("assets/checkbox.svg");
219
}
220
221
.check-box:checked:focus StBin {
222
background-color: rgba(138, 180, 248, 0.08);
223
}
224
225
.check-box:checked:hover StBin {
226
background-color: rgba(138, 180, 248, 0.08);
227
}
228
229
.check-box:checked:active StBin {
230
background-color: rgba(138, 180, 248, 0.2);
231
}
232
233
/* Switches */
234
.toggle-switch {
235
color: inherit;
236
width: 40px;
237
height: 20px;
238
background-size: contain;
239
background-image: url("assets/toggle-off.svg");
240
}
241
242
.toggle-switch:checked {
243
background-image: url("assets/toggle-on.svg");
244
}
245
246
/* Slider */
247
.slider {
248
height: 20px;
249
-slider-height: 2px;
250
-slider-border-width: 0;
251
-slider-border-color: transparent;
252
-slider-background-color: rgba(255, 255, 255, 0.26);
253
-slider-active-border-color: transparent;
254
-slider-active-background-color: #8ab4f8;
255
-slider-handle-radius: 6px;
256
-slider-handle-border-width: 0;
257
-slider-handle-border-color: transparent;
258
}
259
260
.slider, .slider:hover, .slider:active {
261
color: #8ab4f8;
262
}
263
264
/* Scrollbars */
265
StScrollView.vfade {
266
-st-vfade-offset: 32px;
267
}
268
269
StScrollView.hfade {
270
-st-hfade-offset: 32px;
271
}
272
273
StScrollBar {
274
padding: 0;
275
}
276
277
StScrollView StScrollBar {
278
min-width: 16px;
279
min-height: 16px;
280
}
281
282
StScrollBar StBin#trough {
283
margin: 4px;
284
border-radius: 4px;
285
background-color: rgba(255, 255, 255, 0.12);
286
}
287
288
StScrollBar StButton#vhandle,
289
StScrollBar StButton#hhandle {
290
transition-duration: 100ms;
291
margin: 4px;
292
border-radius: 4px;
293
background-color: rgba(255, 255, 255, 0.38);
294
}
295
296
StScrollBar StButton#vhandle:hover,
297
StScrollBar StButton#hhandle:hover {
298
background-color: rgba(255, 255, 255, 0.6);
299
}
300
301
StScrollBar StButton#vhandle:active,
302
StScrollBar StButton#hhandle:active {
303
background-color: rgba(255, 255, 255, 0.87);
304
}
305
306
#overview StScrollBar StBin#trough, #screenShieldNotifications StScrollBar StBin#trough {
307
background-color: rgba(255, 255, 255, 0.12);
308
}
309
310
#overview StScrollBar StButton#vhandle, #screenShieldNotifications StScrollBar StButton#vhandle,
311
#overview StScrollBar StButton#hhandle,
312
#screenShieldNotifications StScrollBar StButton#hhandle {
313
background-color: rgba(255, 255, 255, 0.5);
314
}
315
316
#overview StScrollBar StButton#vhandle:hover, #screenShieldNotifications StScrollBar StButton#vhandle:hover,
317
#overview StScrollBar StButton#hhandle:hover,
318
#screenShieldNotifications StScrollBar StButton#hhandle:hover {
319
background-color: rgba(255, 255, 255, 0.7);
320
}
321
322
#overview StScrollBar StButton#vhandle:active, #screenShieldNotifications StScrollBar StButton#vhandle:active,
323
#overview StScrollBar StButton#hhandle:active,
324
#screenShieldNotifications StScrollBar StButton#hhandle:active {
325
background-color: white;
326
}
327
328
/* Popovers/Menus */
329
.popup-menu-boxpointer, .candidate-popup-boxpointer {
330
-arrow-base: 0;
331
-arrow-rise: 0;
332
-arrow-border-width: 0;
333
-arrow-border-color: transparent;
334
-arrow-border-radius: 20px;
335
-arrow-box-shadow: none;
336
-arrow-background-color: transparent;
337
}
338
339
.popup-menu {
340
min-width: 15em;
341
border-color: transparent;
342
color: inherit;
343
}
344
345
.popup-menu.panel-menu {
346
-boxpointer-gap: 4px;
347
margin-bottom: 1.75em;
348
}
349
350
.popup-menu-content, .candidate-popup-content {
351
margin: 5px 8px 8px;
352
padding: 8px 0;
353
border-radius: 4px;
354
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
355
background-color: #343434;
356
color: rgba(255, 255, 255, 0.87);
357
}
358
359
.popup-menu-item {
360
spacing: 8px;
361
padding: 0;
362
transition-duration: 100ms;
363
}
364
365
.popup-menu-item:ltr {
366
padding: 0.4em;
367
padding-right: 24px;
368
padding-left: 0;
369
}
370
371
.popup-menu-item:rtl {
372
padding: 0.4em;
373
padding-right: 0;
374
padding-left: 24px;
375
}
376
377
.popup-menu-item.selected {
378
background-color: rgba(255, 255, 255, 0.08);
379
transition-duration: 0ms;
380
}
381
382
.popup-menu-item.selected, .popup-menu-item.selected:active {
383
color: rgba(255, 255, 255, 0.87);
384
}
385
386
.popup-menu-item:active {
387
background-color: rgba(255, 255, 255, 0.2);
388
color: rgba(255, 255, 255, 0.87);
389
transition-duration: 200ms;
390
}
391
392
.popup-menu-item:checked {
393
box-shadow: none;
394
background-color: rgba(138, 180, 248, 0.24);
395
font-weight: normal;
396
}
397
398
.popup-menu-item:checked.selected {
399
background-color: rgba(138, 180, 248, 0.4);
400
}
401
402
.popup-menu-item:checked:active {
403
background-color: rgba(138, 180, 248, 0.6);
404
}
405
406
.popup-menu-item:insensitive {
407
color: rgba(255, 255, 255, 0.38);
408
}
409
410
.popup-inactive-menu-item {
411
color: rgba(255, 255, 255, 0.87);
412
}
413
414
.popup-inactive-menu-item:insensitive {
415
color: rgba(255, 255, 255, 0.38);
416
}
417
418
.popup-menu-arrow {
419
width: 16px;
420
height: 16px;
421
}
422
423
.popup-menu-icon {
424
icon-size: 16px;
425
}
426
427
.popup-sub-menu {
428
border-top: 0;
429
border-bottom: 0;
430
padding-bottom: 0;
431
box-shadow: none;
432
background-color: rgba(255, 255, 255, 0.04);
433
}
434
435
.popup-menu-ornament {
436
text-align: right;
437
width: 16px;
438
height: 16px;
439
}
440
441
.popup-separator-menu-item {
442
height: 1px;
443
margin: 8px 40px;
444
border: 0;
445
background-color: rgba(255, 255, 255, 0.12);
446
}
447
448
.background-menu {
449
-boxpointer-gap: 4px;
450
-arrow-rise: 0;
451
}
452
453
.aggregate-menu {
454
min-width: 21em;
455
}
456
457
.aggregate-menu .popup-menu-icon {
458
padding: 0;
459
margin: 0 4px;
460
-st-icon-style: symbolic;
461
}
462
463
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr {
464
padding-left: 16px;
465
margin-left: 16px;
466
}
467
468
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl {
469
padding-right: 16px;
470
margin-right: 16px;
471
}
472
473
.system-switch-user-submenu-icon.user-icon {
474
icon-size: 20px;
475
padding: 0 2px;
476
}
477
478
.system-switch-user-submenu-icon.default-icon {
479
icon-size: 16px;
480
padding: 0 4px;
481
}
482
483
.system-menu-action {
484
-st-icon-style: symbolic;
485
padding: 16px;
486
border: 0;
487
border-radius: 24px;
488
color: rgba(255, 255, 255, 0.6);
489
transition-duration: 100ms;
490
}
491
492
.system-menu-action:hover, .system-menu-action:focus {
493
padding: 16px;
494
border: 0;
495
color: rgba(255, 255, 255, 0.6);
496
}
497
498
.system-menu-action:focus {
499
background-color: rgba(255, 255, 255, 0.12);
500
}
501
502
.system-menu-action:hover {
503
background-color: rgba(255, 255, 255, 0.08);
504
}
505
506
.system-menu-action:active {
507
background-color: rgba(255, 255, 255, 0.2);
508
color: rgba(255, 255, 255, 0.6);
509
transition-duration: 200ms;
510
}
511
512
.system-menu-action > StIcon {
513
icon-size: 16px;
514
}
515
516
/* Date/Time Menu */
517
.events-section-title, .datemenu-today-button, .calendar, .world-clocks-button, .weather-button, .message {
518
margin: 0;
519
border: 0;
520
border-radius: 4px;
521
}
522
523
.events-section-title, .datemenu-today-button, .calendar, .world-clocks-button, .weather-button, .message, .events-section-title:focus, .datemenu-today-button:focus, .calendar:focus, .world-clocks-button:focus, .weather-button:focus, .message:focus, .events-section-title:hover, .datemenu-today-button:hover, .calendar:hover, .world-clocks-button:hover, .weather-button:hover, .message:hover, .events-section-title:active, .datemenu-today-button:active, .calendar:active, .world-clocks-button:active, .weather-button:active, .message:active {
524
border-color: transparent;
525
box-shadow: none;
526
background-color: transparent;
527
color: inherit;
528
text-shadow: none;
529
icon-shadow: none;
530
transition-duration: 100ms;
531
}
532
533
.events-section-title:focus, .datemenu-today-button:focus, .calendar:focus, .world-clocks-button:focus, .weather-button:focus, .message:focus {
534
background-color: rgba(255, 255, 255, 0.12);
535
}
536
537
.events-section-title:hover, .datemenu-today-button:hover, .calendar:hover, .world-clocks-button:hover, .weather-button:hover, .message:hover {
538
background-color: rgba(255, 255, 255, 0.08);
539
}
540
541
.events-section-title:active, .datemenu-today-button:active, .calendar:active, .world-clocks-button:active, .weather-button:active, .message:active {
542
background-color: rgba(255, 255, 255, 0.2);
543
transition-duration: 200ms;
544
}
545
546
.clock-display-box {
547
spacing: 0;
548
}
549
550
.clock-display-box .clock {
551
padding-left: 12px;
552
padding-right: 12px;
553
}
554
555
#calendarArea {
556
padding: 8px 16px;
557
}
558
559
.datemenu-calendar-column {
560
spacing: 8px;
561
padding: 0;
562
border: 0 solid rgba(255, 255, 255, 0.12);
563
}
564
565
.datemenu-calendar-column:ltr {
566
margin-right: 0;
567
border-left-width: 0;
568
}
569
570
.datemenu-calendar-column:rtl {
571
margin-left: 0;
572
border-right-width: 0;
573
}
574
575
.datemenu-calendar-column .datemenu-displays-section {
576
padding-bottom: 0;
577
}
578
579
.datemenu-calendar-column .datemenu-displays-box {
580
spacing: 8px;
581
margin: 0 8px;
582
}
583
584
.events-section-title {
585
min-height: 24px;
586
padding: 4px 8px;
587
color: rgba(255, 255, 255, 0.6) !important;
588
font-weight: bold;
589
}
590
591
/* today button (the date) */
592
.datemenu-today-button {
593
margin: 0 8px;
594
min-height: 56px;
595
padding: 4px 8px;
596
}
597
598
.datemenu-today-button .day-label {
599
font-weight: normal;
600
font-size: 1em;
601
}
602
603
.datemenu-today-button .date-label {
604
font-size: 18pt;
605
font-weight: 400;
606
}
607
608
/* Calendar */
609
.calendar {
610
margin: 0 8px;
611
margin-bottom: 0;
612
padding: 0;
613
}
614
615
.calendar .calendar-month-label {
616
transition-duration: 100ms;
617
height: 20px;
618
margin: 2px;
619
padding: 6px 8px;
620
border-radius: 4px;
621
color: inherit;
622
font-weight: bold;
623
text-align: center;
624
}
625
626
.calendar .calendar-month-label:focus {
627
background-color: rgba(255, 255, 255, 0.12);
628
}
629
630
.calendar .calendar-change-month-back {
631
background-image: url("assets/calendar-arrow-left.svg");
632
}
633
634
.calendar .calendar-change-month-back:rtl {
635
background-image: url("assets/calendar-arrow-right.svg");
636
}
637
638
.calendar .calendar-change-month-forward {
639
background-image: url("assets/calendar-arrow-right.svg");
640
}
641
642
.calendar .calendar-change-month-forward:rtl {
643
background-image: url("assets/calendar-arrow-left.svg");
644
}
645
646
.calendar .pager-button {
647
transition-duration: 100ms;
648
width: 32px;
649
height: 32px;
650
margin: 2px;
651
border-radius: 16px;
652
background-color: transparent;
653
color: rgba(255, 255, 255, 0.6);
654
}
655
656
.calendar .pager-button:focus {
657
background-color: rgba(255, 255, 255, 0.12);
658
}
659
660
.calendar .pager-button:hover {
661
background-color: rgba(255, 255, 255, 0.08);
662
}
663
664
.calendar .pager-button:active {
665
background-color: rgba(255, 255, 255, 0.2);
666
transition-duration: 200ms;
667
}
668
669
.calendar .calendar-day-base {
670
transition-duration: 100ms;
671
width: 32px;
672
height: 32px;
673
margin: 2px;
674
padding: 0;
675
border: 0;
676
border-radius: 16px;
677
font-size: 9pt;
678
font-weight: 400;
679
font-feature-settings: "tnum";
680
text-align: center;
681
}
682
683
.calendar .calendar-day-base:focus {
684
background-color: rgba(255, 255, 255, 0.12);
685
}
686
687
.calendar .calendar-day-base:hover {
688
background-color: rgba(255, 255, 255, 0.08);
689
}
690
691
.calendar .calendar-day-base:active {
692
transition-duration: 200ms;
693
border-color: transparent;
694
background-color: rgba(255, 255, 255, 0.2);
695
color: inherit;
696
}
697
698
.calendar .calendar-day-base:selected {
699
border-color: transparent;
700
background-color: rgba(138, 180, 248, 0.24);
701
color: inherit;
702
}
703
704
.calendar .calendar-day-base.calendar-day-heading {
705
width: 32px;
706
height: 25px;
707
margin-top: 2px;
708
padding: 7px 0 0;
709
border-radius: 16px;
710
background-color: transparent;
711
color: rgba(255, 255, 255, 0.38);
712
font-size: 9pt;
713
font-weight: 400;
714
font-weight: bold;
715
text-align: center;
716
}
717
718
.calendar .calendar-day-base.calendar-day-heading:focus {
719
background-color: rgba(255, 255, 255, 0.12);
720
}
721
722
.calendar .calendar-day {
723
border-width: 0;
724
}
725
726
.calendar .calendar-day-top {
727
border-top-width: 0;
728
}
729
730
.calendar .calendar-day-left {
731
border-left-width: 0;
732
}
733
734
.calendar .calendar-nonwork-day {
735
color: inherit;
736
}
737
738
.calendar .calendar-today {
739
border: 0;
740
background-color: transparent;
741
color: inherit;
742
font-weight: bold !important;
743
}
744
745
.calendar .calendar-today:focus {
746
background-color: rgba(255, 255, 255, 0.12);
747
color: inherit;
748
}
749
750
.calendar .calendar-today:hover {
751
background-color: rgba(255, 255, 255, 0.08);
752
color: inherit;
753
}
754
755
.calendar .calendar-today:active, .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus {
756
background-color: rgba(255, 255, 255, 0.2);
757
color: inherit;
758
}
759
760
.calendar .calendar-today:selected, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus {
761
background-color: rgba(138, 180, 248, 0.24);
762
color: inherit;
763
}
764
765
.calendar .calendar-day-with-events {
766
background-image: none;
767
color: #8ab4f8 !important;
768
font-weight: normal;
769
text-decoration: underline;
770
}
771
772
.calendar .calendar-other-month-day {
773
color: rgba(255, 255, 255, 0.26) !important;
774
}
775
776
.calendar .calendar-week-number {
777
width: 32px;
778
height: 25px;
779
margin: 2px;
780
padding: 7px 0 0;
781
border-radius: 16px;
782
background-color: transparent;
783
color: rgba(255, 255, 255, 0.38);
784
font-weight: bold;
785
font-size: 1em;
786
text-align: center;
787
}
788
789
/* World clocks */
790
.world-clocks-button {
791
min-height: 24px;
792
padding: 4px 8px;
793
}
794
795
.world-clocks-button .world-clocks-grid {
796
spacing-rows: .4em;
797
spacing-columns: .8em;
798
}
799
800
.world-clocks-button .world-clocks-header {
801
color: rgba(255, 255, 255, 0.6);
802
font-weight: bold;
803
}
804
805
.world-clocks-button .world-clocks-city {
806
color: inherit;
807
font-weight: normal;
808
font-size: 1em;
809
}
810
811
.world-clocks-button .world-clocks-time {
812
color: rgba(255, 255, 255, 0.6);
813
font-weight: normal;
814
font-size: 1em;
815
font-feature-settings: "tnum";
816
text-align: right;
817
}
818
819
.world-clocks-button .world-clocks-timezone {
820
color: rgba(255, 255, 255, 0.38);
821
font-size: 1em;
822
font-feature-settings: "tnum";
823
}
824
825
/* Weather */
826
.weather-button {
827
min-height: 24px;
828
padding: 4px 8px;
829
}
830
831
.weather-button .weather-box {
832
spacing: 0.4em;
833
}
834
835
.weather-button .weather-header-box {
836
spacing: 8px;
837
}
838
839
.weather-button .weather-header {
840
color: rgba(255, 255, 255, 0.6);
841
font-weight: bold;
842
}
843
844
.weather-button .weather-header.location {
845
font-weight: normal;
846
font-size: 1em;
847
}
848
849
.weather-button .weather-grid {
850
spacing-rows: .4em;
851
spacing-columns: .8em;
852
}
853
854
.weather-button .weather-forecast-time {
855
padding-top: 0;
856
padding-bottom: 0;
857
color: rgba(255, 255, 255, 0.6);
858
font-size: 9pt;
859
font-weight: 400;
860
font-feature-settings: "tnum";
861
}
862
863
.weather-button .weather-forecast-icon {
864
icon-size: 32px;
865
}
866
867
.weather-button .weather-forecast-temp {
868
font-weight: bold;
869
}
870
871
/* Message List */
872
.message-list {
873
width: 31.5em;
874
padding: 0;
875
}
876
877
.message-list .message-list-placeholder {
878
spacing: 12px;
879
}
880
881
.message-list-sections {
882
spacing: 8px;
883
margin: 0 8px;
884
}
885
886
.message-list-section,
887
.message-list-section-list {
888
spacing: 8px;
889
}
890
891
.message-list-section-list:ltr {
892
padding-left: 0;
893
}
894
895
.message-list-section-list:rtl {
896
padding-right: 0;
897
}
898
899
.message-list-clear-button.button {
900
margin: 8px 8px 0;
901
}
902
903
.message {
904
min-height: 64px;
905
}
906
907
.message .message-icon-bin {
908
padding: 12px 0 12px 12px;
909
}
910
911
.message .message-icon-bin:rtl {
912
padding: 12px 12px 12px 0;
913
}
914
915
.message .message-icon-bin > StIcon {
916
-st-icon-style: requested;
917
icon-size: 16px;
918
color: inherit;
919
}
920
921
.message .message-icon-bin > StIcon, .message .message-icon-bin > StIcon:rtl {
922
margin: 0;
923
}
924
925
.message .message-icon-bin > .fallback-app-icon {
926
width: 16px;
927
height: 16px;
928
}
929
930
.message .message-content {
931
min-height: 48px;
932
padding: 8px;
933
spacing: 0;
934
color: inherit;
935
font-size: 1em;
936
}
937
938
.message .message-title {
939
min-height: 22px;
940
padding-top: 2px;
941
color: inherit;
942
font-weight: bold;
943
font-size: 1em;
944
}
945
946
.message .message-secondary-bin {
947
padding: 0 8px;
948
}
949
950
.message .message-secondary-bin > .event-time {
951
min-height: 22px;
952
padding-top: 2px;
953
color: rgba(255, 255, 255, 0.6);
954
font-size: 1em;
955
text-align: right;
956
padding-bottom: 0;
957
}
958
959
.message .message-secondary-bin > StIcon {
960
icon-size: 16px;
961
}
962
963
.message .message-content > StBoxLayout > StButton {
964
transition-duration: 100ms;
965
icon-size: 16px;
966
padding: 4px;
967
border-radius: 12px;
968
}
969
970
.message .message-content > StBoxLayout > StButton, .message .message-content > StBoxLayout > StButton:hover, .message .message-content > StBoxLayout > StButton:active {
971
color: rgba(255, 255, 255, 0.6);
972
}
973
974
.message .message-content > StBoxLayout > StButton:focus {
975
background-color: rgba(255, 255, 255, 0.12);
976
}
977
978
.message .message-content > StBoxLayout > StButton:hover {
979
background-color: rgba(255, 255, 255, 0.08);
980
}
981
982
.message .message-content > StBoxLayout > StButton:active {
983
transition-duration: 200ms;
984
background-color: rgba(255, 255, 255, 0.2);
985
}
986
987
.message .message-body {
988
color: rgba(255, 255, 255, 0.6);
989
}
990
991
.url-highlighter {
992
link-color: #8ab4f8;
993
}
994
995
/* Media Controls */
996
.message-media-control {
997
transition-duration: 100ms;
998
margin: 16px 0;
999
padding: 8px;
1000
border-radius: 16px;
1001
}
1002
1003
.message-media-control, .message-media-control:focus, .message-media-control:hover, .message-media-control:active {
1004
color: rgba(255, 255, 255, 0.6);
1005
}
1006
1007
.message-media-control:focus {
1008
background-color: rgba(255, 255, 255, 0.12);
1009
}
1010
1011
.message-media-control:hover {
1012
background-color: rgba(255, 255, 255, 0.08);
1013
}
1014
1015
.message-media-control:active {
1016
background-color: rgba(255, 255, 255, 0.2);
1017
transition-duration: 200ms;
1018
}
1019
1020
.message-media-control:insensitive {
1021
color: rgba(255, 255, 255, 0.26);
1022
}
1023
1024
.message-media-control:last-child:ltr {
1025
margin-right: 16px;
1026
padding-right: 8px;
1027
border-radius: 16px;
1028
}
1029
1030
.message-media-control:last-child:rtl {
1031
margin-left: 16px;
1032
padding-left: 8px;
1033
border-radius: 16px;
1034
}
1035
1036
.media-message-cover-icon {
1037
icon-size: 32px !important;
1038
margin: 4px 0 !important;
1039
border-radius: 0;
1040
}
1041
1042
.media-message-cover-icon.fallback {
1043
icon-size: 16px !important;
1044
padding: 8px;
1045
border: 0;
1046
border-radius: 4px;
1047
background-color: rgba(255, 255, 255, 0.08);
1048
color: rgba(255, 255, 255, 0.38) !important;
1049
}
1050
1051
.candidate-popup-content {
1052
padding: 8px;
1053
spacing: 0;
1054
}
1055
1056
.candidate-index {
1057
padding: 0 4px 0 0;
1058
color: rgba(255, 255, 255, 0.6);
1059
}
1060
1061
.candidate-box {
1062
transition-duration: 100ms;
1063
min-height: 32px;
1064
padding: 0 8px;
1065
border-radius: 4px;
1066
}
1067
1068
.candidate-box:hover {
1069
background-color: rgba(255, 255, 255, 0.08);
1070
color: inherit;
1071
transition-duration: 0ms;
1072
}
1073
1074
.candidate-box:active {
1075
background-color: rgba(255, 255, 255, 0.2);
1076
transition-duration: 200ms;
1077
}
1078
1079
.candidate-box:selected {
1080
background-color: rgba(138, 180, 248, 0.24);
1081
color: inherit;
1082
transition-duration: 0ms;
1083
}
1084
1085
.candidate-page-button-box {
1086
height: 32px;
1087
}
1088
1089
.vertical .candidate-page-button-box {
1090
padding-top: 0;
1091
}
1092
1093
.horizontal .candidate-page-button-box {
1094
padding-left: 0;
1095
}
1096
1097
.candidate-page-button {
1098
min-width: 32px;
1099
min-height: 32px;
1100
padding: 0;
1101
}
1102
1103
.candidate-page-button-previous {
1104
border-right-width: 0;
1105
border-radius: 4px;
1106
}
1107
1108
.candidate-page-button-next {
1109
border-radius: 4px;
1110
}
1111
1112
.candidate-page-button-icon {
1113
icon-size: 16px;
1114
}
1115
1116
/* Notifications & Mesage Tray */
1117
.notification-banner {
1118
min-height: 64px;
1119
width: 34em;
1120
margin: 5px;
1121
border: 0;
1122
border-radius: 4px;
1123
font-size: 1em;
1124
}
1125
1126
.notification-banner, .notification-banner:focus, .notification-banner:hover, .notification-banner:active {
1127
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1128
background-color: #343434;
1129
color: rgba(255, 255, 255, 0.87);
1130
}
1131
1132
.notification-banner .notification-actions {
1133
spacing: 0;
1134
padding-top: 0;
1135
border-top: 0;
1136
background-color: transparent;
1137
color: inherit;
1138
}
1139
1140
.summary-source-counter {
1141
-shell-counter-overlap-x: 3px;
1142
-shell-counter-overlap-y: 3px;
1143
height: 1.6em;
1144
width: 1.6em;
1145
border: 0;
1146
border-radius: .8em;
1147
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1148
background-color: #8ab4f8;
1149
color: rgba(0, 0, 0, 0.87);
1150
font-weight: bold;
1151
font-size: 1em;
1152
}
1153
1154
.chat-body {
1155
spacing: 5px;
1156
}
1157
1158
.chat-response {
1159
margin: 5px;
1160
}
1161
1162
.chat-log-message {
1163
color: rgba(255, 255, 255, 0.87);
1164
}
1165
1166
.chat-new-group {
1167
padding-top: 1em;
1168
}
1169
1170
.chat-received {
1171
padding-left: 4px;
1172
}
1173
1174
.chat-received:rtl {
1175
padding-left: 0;
1176
padding-right: 4px;
1177
}
1178
1179
.chat-sent {
1180
padding-left: 18pt;
1181
color: rgba(255, 255, 255, 0.6);
1182
}
1183
1184
.chat-sent:rtl {
1185
padding-left: 0;
1186
padding-right: 18pt;
1187
}
1188
1189
.chat-meta-message {
1190
padding-left: 4px;
1191
color: rgba(255, 255, 255, 0.6);
1192
font-size: 9pt;
1193
font-weight: 400;
1194
}
1195
1196
.chat-meta-message:rtl {
1197
padding-left: 0;
1198
padding-right: 4px;
1199
}
1200
1201
.hotplug-notification-item-icon {
1202
icon-size: 24px;
1203
padding: 0 4px;
1204
}
1205
1206
/* Modal Dialogs */
1207
.headline {
1208
font-size: 15pt;
1209
font-weight: 500;
1210
}
1211
1212
.modal-dialog {
1213
border: 0;
1214
border-radius: 4px;
1215
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
1216
background-color: #343434;
1217
color: rgba(255, 255, 255, 0.87);
1218
}
1219
1220
.modal-dialog .modal-dialog-content-box {
1221
padding: 24px;
1222
}
1223
1224
/* End Session Dialog */
1225
.end-session-dialog {
1226
spacing: 42px;
1227
border: 0;
1228
}
1229
1230
.end-session-dialog-subject {
1231
font-size: 15pt;
1232
font-weight: 500;
1233
}
1234
1235
.end-session-dialog-list {
1236
padding-top: 20px;
1237
}
1238
1239
.end-session-dialog-layout {
1240
padding-left: 17px;
1241
}
1242
1243
.end-session-dialog-layout:rtl {
1244
padding-right: 17px;
1245
}
1246
1247
.end-session-dialog-description {
1248
width: 28em;
1249
padding-bottom: 10px;
1250
}
1251
1252
.end-session-dialog-description:rtl {
1253
text-align: right;
1254
}
1255
1256
.end-session-dialog-warning {
1257
width: 28em;
1258
padding-top: 6px;
1259
color: #fdd633;
1260
}
1261
1262
.end-session-dialog-warning:rtl {
1263
text-align: right;
1264
}
1265
1266
.end-session-dialog-logout-icon {
1267
width: 48px;
1268
height: 48px;
1269
border-radius: 9999px;
1270
background-size: contain;
1271
}
1272
1273
.end-session-dialog-shutdown-icon {
1274
width: 48px;
1275
height: 48px;
1276
color: rgba(255, 255, 255, 0.6);
1277
}
1278
1279
.end-session-dialog-inhibitor-layout {
1280
max-height: 200px;
1281
padding-right: 64px;
1282
padding-left: 64px;
1283
spacing: 16px;
1284
}
1285
1286
.end-session-dialog-session-list,
1287
.end-session-dialog-app-list {
1288
spacing: 1em;
1289
}
1290
1291
.end-session-dialog-list-header {
1292
font-weight: bold;
1293
}
1294
1295
.end-session-dialog-list-header:rtl {
1296
text-align: right;
1297
}
1298
1299
.end-session-dialog-app-list-item,
1300
.end-session-dialog-session-list-item {
1301
spacing: 1em;
1302
}
1303
1304
.end-session-dialog-app-list-item-name,
1305
.end-session-dialog-session-list-item-name {
1306
font-weight: bold;
1307
}
1308
1309
.end-session-dialog-app-list-item-description {
1310
color: rgba(255, 255, 255, 0.6);
1311
font-size: 1em;
1312
}
1313
1314
/* Message Dialog */
1315
.message-dialog-main-layout {
1316
padding: 12px 20px 0;
1317
spacing: 12px;
1318
}
1319
1320
.message-dialog-content {
1321
max-width: 28em;
1322
spacing: 20px;
1323
}
1324
1325
.message-dialog-icon {
1326
min-width: 48px;
1327
icon-size: 48px;
1328
}
1329
1330
.message-dialog-title {
1331
font-weight: bold;
1332
}
1333
1334
.message-dialog-subtitle {
1335
color: rgba(255, 255, 255, 0.6);
1336
font-weight: normal;
1337
}
1338
1339
/* Dialog List */
1340
.dialog-list {
1341
spacing: 18px;
1342
}
1343
1344
.dialog-list .dialog-list-title {
1345
text-align: inherit;
1346
font-weight: bold;
1347
}
1348
1349
.dialog-list .dialog-list-scrollview {
1350
max-height: 200px;
1351
}
1352
1353
.dialog-list .dialog-list-box {
1354
spacing: 1em;
1355
}
1356
1357
.dialog-list .dialog-list-box .dialog-list-item {
1358
spacing: 1em;
1359
}
1360
1361
.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title {
1362
font-weight: bold;
1363
}
1364
1365
.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description {
1366
color: rgba(255, 255, 255, 0.6);
1367
font-size: 1em;
1368
}
1369
1370
/* Run Dialog */
1371
.run-dialog .run-dialog-label {
1372
padding-bottom: .4em;
1373
color: rgba(255, 255, 255, 0.6);
1374
font-weight: normal;
1375
font-size: 1em;
1376
}
1377
1378
.run-dialog .run-dialog-entry {
1379
width: 20em;
1380
margin-bottom: 0;
1381
}
1382
1383
.run-dialog .run-dialog-error-box {
1384
padding-top: 16px;
1385
spacing: 6px;
1386
color: #f28b82;
1387
}
1388
1389
.run-dialog .run-dialog-button-box {
1390
padding-top: 1em;
1391
}
1392
1393
/* Password or Authentication Dialog */
1394
.prompt-dialog {
1395
width: 34em;
1396
}
1397
1398
.prompt-dialog .message-dialog-main-layout {
1399
spacing: 24px;
1400
padding: 10px;
1401
}
1402
1403
.prompt-dialog .message-dialog-content {
1404
spacing: 16px;
1405
}
1406
1407
.prompt-dialog .message-dialog-title {
1408
color: inherit;
1409
font-size: 15pt;
1410
font-weight: 500;
1411
}
1412
1413
.prompt-dialog-description:rtl {
1414
text-align: right;
1415
}
1416
1417
.prompt-dialog-password-box {
1418
spacing: 1em;
1419
padding-bottom: 1em;
1420
}
1421
1422
.prompt-dialog-error-label,
1423
.prompt-dialog-info-label,
1424
.prompt-dialog-null-label {
1425
font-size: 1em;
1426
padding-bottom: 8px;
1427
}
1428
1429
.prompt-dialog-error-label {
1430
color: #f28b82;
1431
}
1432
1433
/* Polkit Dialog */
1434
.polkit-dialog-user-layout {
1435
spacing: 10px;
1436
padding-left: 10px;
1437
}
1438
1439
.polkit-dialog-user-layout:rtl {
1440
padding-left: 0;
1441
padding-right: 10px;
1442
}
1443
1444
.polkit-dialog-user-layout .polkit-dialog-user-icon {
1445
border-radius: 9999px;
1446
background-size: contain;
1447
width: 48px;
1448
height: 48px;
1449
}
1450
1451
.polkit-dialog-user-layout .polkit-dialog-user-root-label {
1452
color: #fdd633;
1453
}
1454
1455
/* Audio selection dialog */
1456
.audio-device-selection-dialog {
1457
spacing: 30px;
1458
}
1459
1460
.audio-device-selection-dialog .audio-selection-content {
1461
spacing: 20px;
1462
padding: 24px;
1463
}
1464
1465
.audio-device-selection-dialog .audio-selection-title {
1466
font-weight: bold;
1467
text-align: inherit;
1468
}
1469
1470
.audio-device-selection-dialog .audio-selection-box {
1471
spacing: 20px;
1472
}
1473
1474
.audio-selection-device {
1475
transition-duration: 100ms;
1476
border: 0;
1477
border-radius: 4px;
1478
}
1479
1480
.audio-selection-device:focus {
1481
background-color: rgba(255, 255, 255, 0.12);
1482
}
1483
1484
.audio-selection-device:hover {
1485
background-color: rgba(255, 255, 255, 0.08);
1486
}
1487
1488
.audio-selection-device:active {
1489
transition-duration: 200ms;
1490
background-color: rgba(255, 255, 255, 0.2);
1491
color: inherit;
1492
}
1493
1494
.audio-selection-device-box {
1495
padding: 20px;
1496
spacing: 20px;
1497
}
1498
1499
.audio-selection-device-icon {
1500
icon-size: 64px;
1501
}
1502
1503
/* ShellMountOperation Dialogs */
1504
.shell-mount-operation-icon {
1505
icon-size: 48px;
1506
}
1507
1508
.mount-dialog-subject {
1509
font-size: 15pt;
1510
font-weight: 500;
1511
}
1512
1513
.mount-dialog {
1514
spacing: 24px;
1515
}
1516
1517
.mount-dialog .message-dialog-title {
1518
max-width: 34em;
1519
padding-top: 10px;
1520
padding-bottom: 6px;
1521
padding-left: 17px;
1522
}
1523
1524
.mount-dialog .message-dialog-title:rtl {
1525
padding-left: 0;
1526
padding-right: 17px;
1527
}
1528
1529
.mount-dialog .message-dialog-body {
1530
width: 28em;
1531
padding-left: 17px;
1532
}
1533
1534
.mount-dialog .message-dialog-body:rtl {
1535
padding-left: 0;
1536
padding-right: 17px;
1537
}
1538
1539
.mount-dialog-app-list {
1540
max-height: 200px;
1541
padding-top: 24px;
1542
padding-left: 48px;
1543
padding-right: 32px;
1544
}
1545
1546
.mount-dialog-app-list:rtl {
1547
padding-right: 48px;
1548
padding-left: 32px;
1549
}
1550
1551
.mount-dialog-app-list-item, .mount-dialog-app-list-item:hover {
1552
color: inherit;
1553
}
1554
1555
.mount-dialog-app-list-item:ltr {
1556
padding-right: 1em;
1557
}
1558
1559
.mount-dialog-app-list-item:rtl {
1560
padding-left: 1em;
1561
}
1562
1563
.mount-dialog-app-list-item-icon:ltr {
1564
padding-right: 16px;
1565
}
1566
1567
.mount-dialog-app-list-item-icon:rtl {
1568
padding-left: 16px;
1569
}
1570
1571
.mount-dialog-app-list-item-name {
1572
font-size: 1em;
1573
}
1574
1575
/* Access Dialog */
1576
.access-dialog {
1577
spacing: 30px;
1578
}
1579
1580
/* Geolocation Dialog */
1581
.geolocation-dialog {
1582
spacing: 30px;
1583
}
1584
1585
/* Extension Dialog */
1586
.extension-dialog .message-dialog-main-layout {
1587
spacing: 24px;
1588
padding: 10px;
1589
}
1590
1591
.extension-dialog .message-dialog-title {
1592
color: rgba(255, 255, 255, 0.6);
1593
font-weight: normal;
1594
}
1595
1596
/* Inhibit-Shortcuts Dialog */
1597
.inhibit-shortcuts-dialog {
1598
spacing: 30px;
1599
}
1600
1601
/* Network Agent Dialog */
1602
.network-dialog-secret-table {
1603
spacing-rows: 15px;
1604
spacing-columns: 1em;
1605
}
1606
1607
.keyring-dialog-control-table {
1608
spacing-rows: 15px;
1609
spacing-columns: 1em;
1610
}
1611
1612
/* Network Dialogs */
1613
.nm-dialog {
1614
max-height: 34em;
1615
min-height: 31em;
1616
min-width: 32em;
1617
}
1618
1619
.nm-dialog-content {
1620
spacing: 20px;
1621
padding: 24px;
1622
}
1623
1624
.nm-dialog-airplane-box {
1625
spacing: 12px;
1626
}
1627
1628
.nm-dialog-airplane-headline {
1629
font-weight: bold;
1630
text-align: inherit;
1631
}
1632
1633
.nm-dialog-airplane-text {
1634
color: inherit;
1635
}
1636
1637
.nm-dialog-header {
1638
font-size: 15pt;
1639
font-weight: 500;
1640
}
1641
1642
.nm-dialog-header-icon {
1643
icon-size: 32px;
1644
}
1645
1646
.nm-dialog-header-hbox {
1647
spacing: 10px;
1648
}
1649
1650
.nm-dialog-scroll-view {
1651
border: 0;
1652
padding: 0;
1653
background-color: transparent;
1654
}
1655
1656
.nm-dialog-item {
1657
transition-duration: 100ms;
1658
padding: 12px;
1659
spacing: 20px;
1660
border-bottom: 0;
1661
border-radius: 4px;
1662
font-size: 1em;
1663
}
1664
1665
.nm-dialog-item:focus {
1666
background-color: rgba(255, 255, 255, 0.12);
1667
}
1668
1669
.nm-dialog-item:hover {
1670
background-color: rgba(255, 255, 255, 0.08);
1671
}
1672
1673
.nm-dialog-item:active {
1674
transition-duration: 200ms;
1675
background-color: rgba(255, 255, 255, 0.2);
1676
}
1677
1678
.nm-dialog-item:selected {
1679
background-color: rgba(138, 180, 248, 0.24);
1680
color: rgba(255, 255, 255, 0.87);
1681
}
1682
1683
.nm-dialog-icon {
1684
icon-size: 16px;
1685
}
1686
1687
.nm-dialog-icons {
1688
spacing: .5em;
1689
}
1690
1691
.no-networks-label {
1692
color: rgba(255, 255, 255, 0.6);
1693
}
1694
1695
.no-networks-box {
1696
spacing: 12px;
1697
}
1698
1699
/* OSD */
1700
.osd-window, .resize-popup, .switcher-list, .workspace-switcher-container {
1701
padding: 12px;
1702
border: none;
1703
border-radius: 4px;
1704
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
1705
background-color: #343434;
1706
color: rgba(255, 255, 255, 0.87);
1707
}
1708
1709
.osd-window {
1710
text-align: center;
1711
font-weight: bold;
1712
spacing: 12px;
1713
margin: 32px;
1714
min-width: 64px;
1715
min-height: 64px;
1716
}
1717
1718
.osd-window StIcon {
1719
icon-size: 96px;
1720
}
1721
1722
.osd-window .osd-monitor-label {
1723
font-size: 48px;
1724
font-weight: 400;
1725
}
1726
1727
.osd-window .level {
1728
height: 8px;
1729
border-radius: 0;
1730
background-color: rgba(255, 255, 255, 0.12);
1731
color: rgba(255, 255, 255, 0.87);
1732
}
1733
1734
.osd-window .level-bar {
1735
border-radius: 0;
1736
background-color: #8ab4f8;
1737
}
1738
1739
/* Pad OSD */
1740
.pad-osd-window {
1741
padding: 32px;
1742
background-color: rgba(0, 0, 0, 0.6);
1743
}
1744
1745
.pad-osd-window .pad-osd-title-box {
1746
spacing: 12px;
1747
}
1748
1749
.pad-osd-window .pad-osd-title-menu-box {
1750
spacing: 6px;
1751
}
1752
1753
.combo-box-label {
1754
width: 15em;
1755
}
1756
1757
/* App Switcher */
1758
.switcher-popup {
1759
padding: 8px;
1760
spacing: 16px;
1761
}
1762
1763
.switcher-list .switcher-list-item-container {
1764
spacing: 8px;
1765
}
1766
1767
.switcher-list .item-box {
1768
transition-duration: 100ms;
1769
padding: 8px;
1770
border: 0;
1771
border-radius: 4px;
1772
}
1773
1774
.switcher-list .item-box:outlined {
1775
padding: 8px;
1776
border: 0;
1777
box-shadow: none;
1778
background-color: rgba(255, 255, 255, 0.12);
1779
color: inherit;
1780
}
1781
1782
.switcher-list .item-box:selected {
1783
background-color: rgba(138, 180, 248, 0.24);
1784
color: inherit;
1785
}
1786
1787
.switcher-list .thumbnail-box {
1788
padding: 2px;
1789
spacing: 4px;
1790
}
1791
1792
.switcher-list .thumbnail {
1793
width: 256px;
1794
}
1795
1796
.switcher-list .separator {
1797
width: 1px;
1798
background: rgba(255, 255, 255, 0.12);
1799
}
1800
1801
.switcher-arrow {
1802
transition-duration: 100ms;
1803
border-color: transparent;
1804
color: rgba(255, 255, 255, 0.6);
1805
}
1806
1807
.switcher-arrow:highlighted {
1808
color: rgba(255, 255, 255, 0.87);
1809
}
1810
1811
.input-source-switcher-symbol {
1812
width: 96px;
1813
height: 96px;
1814
font-size: 48px;
1815
font-weight: 400;
1816
}
1817
1818
.cycler-highlight {
1819
border: 4px solid #8ab4f8;
1820
}
1821
1822
/* Workspace Switcher */
1823
.workspace-switcher-group {
1824
padding: 8px;
1825
}
1826
1827
.workspace-switcher {
1828
background: transparent;
1829
border: 0;
1830
border-radius: 0;
1831
padding: 0;
1832
spacing: 8px;
1833
}
1834
1835
.ws-switcher-box {
1836
height: 48px;
1837
border: 0;
1838
border-radius: 4px;
1839
background-color: rgba(255, 255, 255, 0.12);
1840
background-size: 0;
1841
}
1842
1843
.ws-switcher-active-up,
1844
.ws-switcher-active-down,
1845
.ws-switcher-active-left,
1846
.ws-switcher-active-right {
1847
height: 48px;
1848
border: 0;
1849
border-radius: 4px;
1850
background-color: #8ab4f8;
1851
background-size: 0;
1852
color: inherit;
1853
}
1854
1855
/* Top Bar */
1856
#panel {
1857
transition-duration: 250ms;
1858
height: 32px;
1859
background-color: rgba(0, 0, 0, 0.6);
1860
font-weight: bold;
1861
font-feature-settings: "tnum";
1862
}
1863
1864
#panel #panelLeft,
1865
#panel #panelCenter {
1866
spacing: 0;
1867
}
1868
1869
#panel .panel-corner {
1870
-panel-corner-radius: 0;
1871
-panel-corner-background-color: transparent;
1872
-panel-corner-border-width: 0;
1873
-panel-corner-border-color: transparent;
1874
}
1875
1876
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
1877
-panel-corner-border-color: transparent;
1878
}
1879
1880
#panel .panel-button {
1881
-natural-hpadding: 12px;
1882
-minimum-hpadding: 6px;
1883
transition-duration: 100ms;
1884
color: rgba(255, 255, 255, 0.7);
1885
text-shadow: none;
1886
font-weight: bold;
1887
}
1888
1889
#panel .panel-button .system-status-icon,
1890
#panel .panel-button .app-menu-icon > StIcon,
1891
#panel .panel-button .popup-menu-arrow {
1892
icon-shadow: none;
1893
}
1894
1895
#panel .panel-button:hover {
1896
color: white;
1897
text-shadow: none;
1898
}
1899
1900
#panel .panel-button:hover .system-status-icon,
1901
#panel .panel-button:hover .app-menu-icon > StIcon,
1902
#panel .panel-button:hover .popup-menu-arrow {
1903
icon-shadow: none;
1904
}
1905
1906
#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
1907
box-shadow: inset 0 -2px white;
1908
background-color: rgba(0, 0, 0, 0.01);
1909
color: white;
1910
}
1911
1912
#panel .panel-button:active > .system-status-icon, #panel .panel-button:overview > .system-status-icon, #panel .panel-button:focus > .system-status-icon, #panel .panel-button:checked > .system-status-icon {
1913
icon-shadow: none;
1914
}
1915
1916
#panel .panel-button .system-status-icon {
1917
icon-size: 16px;
1918
padding: 0 4px;
1919
}
1920
1921
#panel .panel-button .app-menu-icon {
1922
-st-icon-style: symbolic;
1923
margin-left: 4px;
1924
margin-right: 4px;
1925
}
1926
1927
#panel .panel-status-indicators-box,
1928
#panel .panel-status-menu-box {
1929
spacing: 2px;
1930
}
1931
1932
#panel .power-status.panel-status-indicators-box {
1933
spacing: 0;
1934
}
1935
1936
#panel .screencast-indicator,
1937
#panel .remote-access-indicator {
1938
color: #fdd633;
1939
}
1940
1941
#panel:overview, #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
1942
background-color: transparent;
1943
}
1944
1945
#panel:overview .panel-corner, #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel.lock-screen .panel-corner {
1946
-panel-corner-radius: 0;
1947
-panel-corner-background-color: transparent;
1948
-panel-corner-border-color: transparent;
1949
}
1950
1951
#panel:overview .panel-button, #panel.unlock-screen .panel-button, #panel.login-screen .panel-button, #panel.lock-screen .panel-button {
1952
color: rgba(255, 255, 255, 0.7);
1953
}
1954
1955
#panel:overview .panel-button:hover, #panel.unlock-screen .panel-button:hover, #panel.login-screen .panel-button:hover, #panel.lock-screen .panel-button:hover, #panel:overview .panel-button:active, #panel.unlock-screen .panel-button:active, #panel.login-screen .panel-button:active, #panel.lock-screen .panel-button:active, #panel:overview .panel-button:overview, #panel.unlock-screen .panel-button:overview, #panel.login-screen .panel-button:overview, #panel.lock-screen .panel-button:overview, #panel:overview .panel-button:focus, #panel.unlock-screen .panel-button:focus, #panel.login-screen .panel-button:focus, #panel.lock-screen .panel-button:focus, #panel:overview .panel-button:checked, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:checked, #panel.lock-screen .panel-button:checked {
1956
color: white;
1957
}
1958
1959
#panel.lock-screen {
1960
background-color: rgba(0, 0, 0, 0.3);
1961
}
1962
1963
#panel.solid {
1964
transition-duration: 250ms;
1965
background-color: #1f1f1f;
1966
}
1967
1968
#panel.solid .panel-corner {
1969
-panel-corner-background-color: transparent;
1970
}
1971
1972
#panel.solid .panel-button {
1973
color: rgba(255, 255, 255, 0.7);
1974
text-shadow: none;
1975
}
1976
1977
#panel.solid .panel-button:hover, #panel.solid .panel-button:active, #panel.solid .panel-button:overview, #panel.solid .panel-button:focus, #panel.solid .panel-button:checked {
1978
color: white;
1979
}
1980
1981
#panel.solid .system-status-icon,
1982
#panel.solid .app-menu-icon > StIcon,
1983
#panel.solid .popup-menu-arrow {
1984
icon-shadow: none;
1985
}
1986
1987
#appMenu {
1988
spacing: 4px;
1989
spinner-image: url("process-working.svg");
1990
}
1991
1992
#appMenu .label-shadow {
1993
color: transparent;
1994
}
1995
1996
/* Activities Ripple */
1997
.ripple-box {
1998
width: 48px;
1999
height: 48px;
2000
border-radius: 0 0 48px 0;
2001
box-shadow: none;
2002
background-color: rgba(255, 255, 255, 0.3);
2003
background-image: none;
2004
background-size: auto;
2005
}
2006
2007
.ripple-box:rtl {
2008
border-radius: 0 0 0 48px;
2009
background-image: none;
2010
}
2011
2012
/* OVERVIEW */
2013
#overview {
2014
spacing: 24px;
2015
background-color: transparent;
2016
color: white;
2017
}
2018
2019
.overview-controls {
2020
padding-bottom: 32px;
2021
}
2022
2023
#dash, .workspace-thumbnails {
2024
transition-duration: 250ms;
2025
border: 0;
2026
background-color: rgba(255, 255, 255, 0.08);
2027
color: white;
2028
}
2029
2030
.search-statustext, .no-frequent-applications-label {
2031
font-size: 48px;
2032
font-weight: 400;
2033
color: rgba(255, 255, 255, 0.5);
2034
}
2035
2036
.search-provider-icon, .list-search-result, .app-well-app .overview-icon, .grid-search-result .overview-icon, .show-apps .overview-icon {
2037
padding: 6px;
2038
border: 0;
2039
border-radius: 4px;
2040
background-color: transparent;
2041
color: inherit;
2042
text-align: center;
2043
transition-duration: 100ms;
2044
}
2045
2046
.search-provider-icon:focus, .list-search-result:focus, .app-well-app:focus .overview-icon, .grid-search-result:focus .overview-icon, .show-apps:focus .overview-icon {
2047
border-image: none;
2048
background-image: none;
2049
background-color: rgba(255, 255, 255, 0.12);
2050
color: inherit;
2051
transition-duration: 0ms;
2052
}
2053
2054
.search-provider-icon:hover, .list-search-result:hover, .search-provider-icon:selected, .list-search-result:selected, .app-well-app:drop .overview-icon, .grid-search-result:drop .overview-icon, .show-apps:drop .overview-icon, .app-well-app:hover .overview-icon, .grid-search-result:hover .overview-icon, .show-apps:hover .overview-icon, .app-well-app:selected .overview-icon, .grid-search-result:selected .overview-icon, .show-apps:selected .overview-icon {
2055
border-image: none;
2056
background-image: none;
2057
background-color: rgba(255, 255, 255, 0.08);
2058
color: inherit;
2059
transition-duration: 0ms;
2060
}
2061
2062
.search-provider-icon:active, .list-search-result:active, .search-provider-icon:checked, .list-search-result:checked, .app-well-app:active .overview-icon, .grid-search-result:active .overview-icon, .show-apps:active .overview-icon, .app-well-app:checked .overview-icon, .grid-search-result:checked .overview-icon, .show-apps:checked .overview-icon {
2063
box-shadow: none;
2064
background-color: rgba(255, 255, 255, 0.2);
2065
color: inherit;
2066
transition-duration: 200ms;
2067
}
2068
2069
/* Window Picker */
2070
.window-picker {
2071
-horizontal-spacing: 16px;
2072
-vertical-spacing: 16px;
2073
padding: 0 16px 32px;
2074
}
2075
2076
.window-picker.external-monitor {
2077
padding: 16px;
2078
}
2079
2080
.window-clone-border {
2081
border: 4px solid rgba(255, 255, 255, 0.3);
2082
border-radius: 4px;
2083
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
2084
}
2085
2086
.window-caption {
2087
spacing: 0;
2088
padding: 4px 8px;
2089
border: 0;
2090
border-radius: 4px;
2091
background-color: rgba(0, 0, 0, 0.6);
2092
color: white;
2093
font-size: 1em;
2094
font-weight: normal;
2095
}
2096
2097
.window-close {
2098
-shell-close-overlap: 18px;
2099
height: 36px;
2100
width: 36px;
2101
padding: 0;
2102
border: 0;
2103
border-radius: 0;
2104
box-shadow: none;
2105
background-color: transparent;
2106
color: transparent;
2107
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2108
background-image: url("assets/window-close.svg");
2109
background-size: 36px;
2110
}
2111
2112
.window-close:hover {
2113
border-color: transparent;
2114
background-color: transparent;
2115
color: transparent;
2116
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2117
background-image: url("assets/window-close.svg");
2118
}
2119
2120
.window-close:active {
2121
border-color: transparent;
2122
background-color: transparent;
2123
color: transparent;
2124
background-image: url("assets/window-close-active.svg");
2125
}
2126
2127
2128
.search-entry {
2129
width: 304px;
2130
padding: 0 8px;
2131
border-radius: 4px 4px 0 0;
2132
color: rgba(255, 255, 255, 0.5);
2133
selection-background-color: rgba(255, 255, 255, 0.3);
2134
selected-color: white;
2135
transition-duration: 100ms;
2136
background-color: rgba(255, 255, 255, 0.04);
2137
border-color: transparent;
2138
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2139
}
2140
2141
2142
.search-entry:hover {
2143
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2144
color: rgba(255, 255, 255, 0.5);
2145
}
2146
2147
2148
.search-entry:focus {
2149
border-color: transparent;
2150
box-shadow: inset 0 -2px white;
2151
padding: 0 8px;
2152
border: 0;
2153
color: white;
2154
}
2155
2156
2157
.search-entry StLabel.hint-text {
2158
color: rgba(255, 255, 255, 0.7);
2159
}
2160
2161
2162
.search-entry .search-entry-icon {
2163
icon-size: 16px;
2164
padding: 0 4px;
2165
color: rgba(255, 255, 255, 0.7);
2166
}
2167
2168
2169
.search-entry:hover .search-entry-icon,
2170
.search-entry:focus .search-entry-icon {
2171
color: white;
2172
}
2173
2174
/* Search */
2175
#searchResultsBin {
2176
max-width: 1024px;
2177
}
2178
2179
#searchResultsContent {
2180
padding-left: 16px;
2181
padding-right: 16px;
2182
spacing: 16px;
2183
}
2184
2185
.search-section {
2186
spacing: 16px;
2187
}
2188
2189
.search-section .search-section-separator {
2190
height: 1px;
2191
background-color: rgba(255, 255, 255, 0.12);
2192
}
2193
2194
.search-section:last-child .search-section-separator {
2195
height: 0;
2196
background-color: transparent;
2197
}
2198
2199
.search-section-content {
2200
spacing: 32px;
2201
padding: 0;
2202
border: 0;
2203
border-radius: 0;
2204
box-shadow: none;
2205
background-color: transparent;
2206
color: inherit;
2207
text-shadow: none;
2208
}
2209
2210
.search-provider-icon .list-search-provider-content {
2211
spacing: 20px;
2212
}
2213
2214
.search-provider-icon .list-search-provider-content .list-search-provider-details {
2215
width: 150px;
2216
margin-top: 0;
2217
color: rgba(255, 255, 255, 0.7);
2218
}
2219
2220
.list-search-results {
2221
spacing: 4px;
2222
}
2223
2224
.list-search-result .list-search-result-content {
2225
spacing: 30px;
2226
}
2227
2228
.list-search-result .list-search-result-title {
2229
spacing: 12px;
2230
color: inherit;
2231
font-size: 12pt;
2232
font-weight: 400;
2233
}
2234
2235
.list-search-result .list-search-result-description {
2236
color: rgba(255, 255, 255, 0.7);
2237
}
2238
2239
/* App Grid */
2240
.icon-grid {
2241
-shell-grid-horizontal-item-size: 136px;
2242
-shell-grid-vertical-item-size: 136px;
2243
spacing: 32px;
2244
}
2245
2246
.icon-grid .overview-icon {
2247
icon-size: 96px;
2248
}
2249
2250
/* App Icons */
2251
.app-well-app .overview-icon.overview-icon-with-label,
2252
.grid-search-result .overview-icon.overview-icon-with-label,
2253
.app-well-app.app-folder .overview-icon.overview-icon-with-label {
2254
padding: 8px;
2255
spacing: 0;
2256
}
2257
2258
.app-well-app .overview-icon.overview-icon-with-label > StBoxLayout,
2259
.grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout,
2260
.app-well-app.app-folder .overview-icon.overview-icon-with-label > StBoxLayout {
2261
spacing: 4px;
2262
}
2263
2264
/* App Folders */
2265
.app-well-app.app-folder {
2266
border-radius: 4px;
2267
background-color: rgba(255, 255, 255, 0.08);
2268
}
2269
2270
.app-folder-dialog {
2271
spacing: 12px;
2272
border: 0;
2273
border-radius: 4px;
2274
background-color: #343434;
2275
color: rgba(255, 255, 255, 0.87);
2276
}
2277
2278
.app-folder-dialog .folder-name-container {
2279
padding: 24px 36px 0;
2280
spacing: 12px;
2281
}
2282
2283
.app-folder-dialog .folder-name-container .folder-name-label,
2284
.app-folder-dialog .folder-name-container .folder-name-entry {
2285
font-size: 15pt;
2286
font-weight: 500;
2287
}
2288
2289
.app-folder-dialog .folder-name-container .folder-name-entry {
2290
width: 300px;
2291
}
2292
2293
.app-folder-dialog .folder-name-container .folder-name-label {
2294
padding: 0 8px;
2295
color: inherit;
2296
}
2297
2298
.app-folder-dialog .folder-name-container .edit-folder-button {
2299
width: 36px;
2300
height: 36px;
2301
min-width: 0;
2302
min-height: 0;
2303
padding: 0;
2304
border-radius: 18px;
2305
}
2306
2307
.app-folder-dialog .folder-name-container .edit-folder-button > StIcon {
2308
icon-size: 16px;
2309
}
2310
2311
.app-folder-dialog .app-well-app:focus .overview-icon {
2312
background-color: rgba(255, 255, 255, 0.12);
2313
}
2314
2315
.app-folder-dialog .app-well-app:drop .overview-icon, .app-folder-dialog .app-well-app:hover .overview-icon, .app-folder-dialog .app-well-app:selected .overview-icon {
2316
background-color: rgba(255, 255, 255, 0.08);
2317
}
2318
2319
.app-folder-dialog .app-well-app:active .overview-icon, .app-folder-dialog .app-well-app:checked .overview-icon {
2320
background-color: rgba(255, 255, 255, 0.2);
2321
}
2322
2323
.app-folder-dialog-container {
2324
width: 800px;
2325
height: 600px;
2326
padding: 12px;
2327
}
2328
2329
.app-folder-popup {
2330
-arrow-base: 24px;
2331
-arrow-rise: 12px;
2332
-arrow-border-radius: 4px;
2333
-arrow-background-color: rgba(255, 255, 255, 0.08);
2334
}
2335
2336
.app-folder-popup-bin {
2337
padding: 6px;
2338
}
2339
2340
.app-folder-icon {
2341
padding: 5px;
2342
spacing-rows: 10px;
2343
spacing-columns: 10px;
2344
}
2345
2346
.app-well-app-running-dot {
2347
height: 2px;
2348
width: 32px;
2349
margin-bottom: 0;
2350
border-radius: 0;
2351
background-color: white;
2352
}
2353
2354
.rename-folder-popup .rename-folder-popup-item {
2355
spacing: 6px;
2356
}
2357
2358
.rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl {
2359
padding: 0 12px;
2360
}
2361
2362
.app-menu,
2363
.app-well-menu {
2364
max-width: 27.25em;
2365
}
2366
2367
.page-indicator {
2368
padding: 15px 20px;
2369
}
2370
2371
.page-indicator .page-indicator-icon {
2372
width: 12px;
2373
height: 12px;
2374
border: 0;
2375
border-radius: 12px;
2376
background-image: none;
2377
background-color: rgba(255, 255, 255, 0.3);
2378
transition-duration: 100ms;
2379
}
2380
2381
.page-indicator:hover .page-indicator-icon {
2382
border-color: transparent;
2383
background-image: none;
2384
background-color: rgba(255, 255, 255, 0.5);
2385
}
2386
2387
.page-indicator:active .page-indicator-icon {
2388
margin: 0;
2389
border: 0;
2390
background-image: none;
2391
background-color: rgba(255, 255, 255, 0.7);
2392
}
2393
2394
.page-indicator:checked .page-indicator-icon,
2395
.page-indicator:checked:active .page-indicator-icon {
2396
background-image: none;
2397
background-color: white;
2398
transition-duration: 0ms;
2399
}
2400
2401
.page-indicator:checked:active {
2402
background-image: none;
2403
background-color: transparent;
2404
}
2405
2406
.search-display > StBoxLayout,
2407
.all-apps,
2408
.frequent-apps > StBoxLayout {
2409
padding: 0 88px 10px;
2410
}
2411
2412
.system-action-icon {
2413
icon-size: 48px;
2414
border-radius: 9999px;
2415
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
2416
background-color: #212121;
2417
color: white;
2418
}
2419
2420
/* Frequent | All toggle */
2421
.app-view-controls {
2422
width: 320px;
2423
padding-bottom: 32px;
2424
}
2425
2426
.app-view-control {
2427
margin: 0;
2428
padding: 0 8px;
2429
}
2430
2431
.app-view-control, .app-view-control:focus, .app-view-control:hover, .app-view-control:active, .app-view-control:checked {
2432
color: rgba(255, 255, 255, 0.7);
2433
background-color: transparent;
2434
border-color: transparent;
2435
box-shadow: 0 0 transparent;
2436
text-shadow: none;
2437
icon-shadow: none;
2438
transition-duration: 100ms;
2439
}
2440
2441
.app-view-control:hover {
2442
background-color: rgba(255, 255, 255, 0.08);
2443
}
2444
2445
.app-view-control:active {
2446
background-color: rgba(255, 255, 255, 0.2);
2447
transition-duration: 200ms;
2448
}
2449
2450
.app-view-control:checked {
2451
box-shadow: inset 0 2px 0 white;
2452
background-color: rgba(0, 0, 0, 0.01);
2453
color: white;
2454
}
2455
2456
.app-view-control:focus {
2457
background-color: rgba(255, 255, 255, 0.12);
2458
}
2459
2460
.app-view-control:first-child {
2461
border-right-width: 0;
2462
border-radius: 4px;
2463
}
2464
2465
.app-view-control:last-child {
2466
border-radius: 4px;
2467
}
2468
2469
.app-view-control:checked {
2470
border-radius: 0;
2471
}
2472
2473
/* Dash */
2474
#dash {
2475
font-size: 1em;
2476
padding: 3px 0;
2477
border-left-width: 0;
2478
border-radius: 0 4px 4px 0;
2479
}
2480
2481
#dash:rtl {
2482
border-right-width: 0;
2483
border-radius: 4px 0 0 4px;
2484
}
2485
2486
#dash .placeholder {
2487
height: 24px;
2488
background-image: url("assets/dash-placeholder.svg");
2489
background-size: contain;
2490
}
2491
2492
#dash .empty-dash-drop-target {
2493
width: 24px;
2494
height: 24px;
2495
}
2496
2497
.dash-item-container > StWidget {
2498
padding: 3px 6px;
2499
}
2500
2501
.dash-label {
2502
padding: 7px 8px;
2503
border: 0;
2504
border-radius: 4px;
2505
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2506
background-color: #343434;
2507
color: rgba(255, 255, 255, 0.87);
2508
text-align: center;
2509
-x-offset: 8px;
2510
}
2511
2512
.show-apps {
2513
color: rgba(255, 255, 255, 0.7);
2514
}
2515
2516
.show-apps:checked {
2517
color: white;
2518
}
2519
2520
/* Workspace pager */
2521
.workspace-thumbnails {
2522
visible-width: 32px;
2523
spacing: 12px;
2524
padding: 12px;
2525
border-right-width: 0;
2526
border-radius: 4px 0 0 4px;
2527
}
2528
2529
.workspace-thumbnails:rtl {
2530
border-left-width: 0;
2531
border-radius: 0 4px 4px 0;
2532
}
2533
2534
.workspace-thumbnails .placeholder {
2535
height: 24px;
2536
background-image: url("assets/dash-placeholder.svg");
2537
background-size: contain;
2538
}
2539
2540
.workspace-thumbnail-indicator {
2541
padding: 6px 10px;
2542
border: 0 solid white;
2543
border-left-width: 2px;
2544
border-radius: 0;
2545
}
2546
2547
.select-area-rubberband {
2548
border: 1px solid #8ab4f8;
2549
background-color: rgba(138, 180, 248, 0.3);
2550
}
2551
2552
.framed-user-icon {
2553
border: 0;
2554
border-radius: 9999px;
2555
background-size: contain;
2556
color: inherit;
2557
}
2558
2559
.framed-user-icon:hover {
2560
border-color: transparent;
2561
color: inherit;
2562
}
2563
2564
.lightbox {
2565
background-color: black;
2566
}
2567
2568
.flashspot {
2569
background-color: white;
2570
}
2571
2572
.hidden {
2573
color: transparent;
2574
}
2575
2576
.caps-lock-warning-label {
2577
text-align: center;
2578
padding-bottom: 8px;
2579
font-size: 1em;
2580
color: #fdd633;
2581
}
2582
2583
.ripple-pointer-location {
2584
width: 50px;
2585
height: 50px;
2586
border-radius: 25px;
2587
box-shadow: none;
2588
background-color: rgba(138, 180, 248, 0.24);
2589
}
2590
2591
.pie-timer {
2592
width: 60px;
2593
height: 60px;
2594
-pie-border-width: 0;
2595
-pie-border-color: transparent;
2596
-pie-background-color: rgba(138, 180, 248, 0.24);
2597
}
2598
2599
.magnifier-zoom-region {
2600
border: 2px solid #8ab4f8;
2601
}
2602
2603
.magnifier-zoom-region.full-screen {
2604
border-width: 0;
2605
}
2606
2607
/* Tiled window previews */
2608
.tile-preview {
2609
border: 1px solid #8ab4f8;
2610
background-color: rgba(138, 180, 248, 0.3);
2611
}
2612
2613
.tile-preview-left.on-primary {
2614
border-radius: 0;
2615
}
2616
2617
.tile-preview-right.on-primary {
2618
border-radius: 0;
2619
}
2620
2621
.tile-preview-left.tile-preview-right.on-primary {
2622
border-radius: 0;
2623
}
2624
2625
/* On-screen Keyboard */
2626
#keyboard {
2627
background-color: rgba(0, 0, 0, 0.3);
2628
box-shadow: none;
2629
}
2630
2631
#keyboard .page-indicator {
2632
padding: 4px;
2633
}
2634
2635
#keyboard .page-indicator .page-indicator-icon {
2636
width: 8px;
2637
height: 8px;
2638
}
2639
2640
.keyboard-layout {
2641
spacing: 10px;
2642
padding: 10px;
2643
}
2644
2645
.keyboard-row {
2646
spacing: 15px;
2647
}
2648
2649
.keyboard-key {
2650
min-height: 1.2em;
2651
min-width: 1.2em;
2652
font-size: 2em;
2653
font-weight: 500;
2654
border: 0;
2655
border-width: 0;
2656
border-style: none;
2657
border-radius: 4px;
2658
}
2659
2660
.keyboard-key, .keyboard-key.default-key {
2661
color: rgba(255, 255, 255, 0.87);
2662
background-color: #343434;
2663
border-color: transparent;
2664
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2665
text-shadow: none;
2666
icon-shadow: none;
2667
transition-duration: 100ms;
2668
}
2669
2670
.keyboard-key:focus, .keyboard-key.default-key:focus {
2671
color: rgba(255, 255, 255, 0.87);
2672
text-shadow: none;
2673
icon-shadow: none;
2674
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2675
}
2676
2677
.keyboard-key:hover, .keyboard-key:checked, .keyboard-key.default-key:hover, .keyboard-key.default-key:checked {
2678
color: rgba(255, 255, 255, 0.87);
2679
background-color: #343434;
2680
border-color: transparent;
2681
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2682
text-shadow: none;
2683
icon-shadow: none;
2684
}
2685
2686
.keyboard-key:active, .keyboard-key.default-key:active {
2687
color: rgba(255, 255, 255, 0.87);
2688
background-color: rgba(92, 92, 92, 0.9688);
2689
border-color: transparent;
2690
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2691
text-shadow: none;
2692
icon-shadow: none;
2693
transition-duration: 200ms;
2694
}
2695
2696
.keyboard-key:grayed {
2697
border-color: transparent;
2698
background-color: rgba(0, 0, 0, 0.3);
2699
color: white;
2700
}
2701
2702
.keyboard-key.enter-key {
2703
color: rgba(0, 0, 0, 0.87);
2704
background-color: #8ab4f8;
2705
border-color: transparent;
2706
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2707
text-shadow: none;
2708
icon-shadow: none;
2709
transition-duration: 100ms;
2710
}
2711
2712
.keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked {
2713
color: rgba(0, 0, 0, 0.87);
2714
background-color: #8ab4f8;
2715
border-color: transparent;
2716
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2717
text-shadow: none;
2718
icon-shadow: none;
2719
}
2720
2721
.keyboard-key.enter-key:active {
2722
color: rgba(0, 0, 0, 0.87);
2723
background-color: rgba(111, 145, 199, 0.9688);
2724
border-color: transparent;
2725
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2726
text-shadow: none;
2727
icon-shadow: none;
2728
transition-duration: 200ms;
2729
}
2730
2731
.keyboard-key.default-key {
2732
background-size: 24px;
2733
}
2734
2735
.keyboard-key.enter-key {
2736
background-image: url("assets/key-enter.svg");
2737
}
2738
2739
.keyboard-key.shift-key-lowercase {
2740
background-image: url("assets/key-shift.svg");
2741
}
2742
2743
.keyboard-key.shift-key-uppercase {
2744
background-image: url("assets/key-shift-uppercase.svg");
2745
}
2746
2747
.keyboard-key.shift-key-uppercase:latched {
2748
background-image: url("assets/key-shift-latched-uppercase.svg");
2749
}
2750
2751
.keyboard-key.hide-key {
2752
background-image: url("assets/key-hide.svg");
2753
}
2754
2755
.keyboard-key.layout-key {
2756
background-image: url("assets/key-layout.svg");
2757
}
2758
2759
.keyboard-subkeys {
2760
-boxpointer-gap: 5px;
2761
-arrow-base: 0;
2762
-arrow-rise: 0;
2763
-arrow-border-width: 0;
2764
-arrow-border-color: transparent;
2765
-arrow-border-radius: 0;
2766
-arrow-background-color: transparent;
2767
padding: 5px;
2768
border-radius: 4px;
2769
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2770
background-color: #343434;
2771
color: rgba(255, 255, 255, 0.87);
2772
}
2773
2774
.keyboard-subkeys .keyboard-key {
2775
border-radius: 4px;
2776
color: #8ab4f8;
2777
background-color: transparent;
2778
border-color: transparent;
2779
box-shadow: 0 0 transparent;
2780
text-shadow: none;
2781
icon-shadow: none;
2782
transition-duration: 100ms;
2783
}
2784
2785
.keyboard-subkeys .keyboard-key:focus {
2786
color: #8ab4f8;
2787
background-color: rgba(138, 180, 248, 0.12);
2788
text-shadow: none;
2789
icon-shadow: none;
2790
box-shadow: 0 0 transparent;
2791
}
2792
2793
.keyboard-subkeys .keyboard-key:hover, .keyboard-subkeys .keyboard-key:checked {
2794
color: #8ab4f8;
2795
background-color: rgba(138, 180, 248, 0.08);
2796
border-color: transparent;
2797
box-shadow: 0 0 transparent;
2798
text-shadow: none;
2799
icon-shadow: none;
2800
}
2801
2802
.keyboard-subkeys .keyboard-key:active {
2803
color: #8ab4f8;
2804
background-color: rgba(138, 180, 248, 0.2);
2805
border-color: transparent;
2806
box-shadow: 0 0 transparent;
2807
text-shadow: none;
2808
icon-shadow: none;
2809
transition-duration: 200ms;
2810
}
2811
2812
.emoji-page .keyboard-key {
2813
border: 0;
2814
color: rgba(255, 255, 255, 0.7);
2815
background-color: transparent;
2816
border-color: transparent;
2817
box-shadow: 0 0 transparent;
2818
text-shadow: none;
2819
icon-shadow: none;
2820
transition-duration: 100ms;
2821
}
2822
2823
.emoji-page .keyboard-key:focus {
2824
color: rgba(255, 255, 255, 0.7);
2825
background-color: rgba(255, 255, 255, 0.12);
2826
text-shadow: none;
2827
icon-shadow: none;
2828
box-shadow: 0 0 transparent;
2829
}
2830
2831
.emoji-page .keyboard-key:hover {
2832
color: rgba(255, 255, 255, 0.7);
2833
background-color: rgba(255, 255, 255, 0.08);
2834
border-color: transparent;
2835
box-shadow: 0 0 transparent;
2836
text-shadow: none;
2837
icon-shadow: none;
2838
}
2839
2840
.emoji-page .keyboard-key:active {
2841
color: rgba(255, 255, 255, 0.7);
2842
background-color: rgba(255, 255, 255, 0.2);
2843
border-color: transparent;
2844
box-shadow: 0 0 transparent;
2845
text-shadow: none;
2846
icon-shadow: none;
2847
transition-duration: 200ms;
2848
}
2849
2850
.emoji-panel .keyboard-key:latched {
2851
border-color: transparent;
2852
background-color: #8ab4f8;
2853
color: rgba(0, 0, 0, 0.87);
2854
}
2855
2856
.word-suggestions {
2857
font-size: 12pt;
2858
font-weight: 400;
2859
spacing: 12px;
2860
min-height: 20pt;
2861
}
2862
2863
/* Looking Glass */
2864
#LookingGlassDialog {
2865
spacing: 0;
2866
padding: 0;
2867
border: 0;
2868
border-radius: 4px;
2869
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2870
background-color: #343434;
2871
color: rgba(255, 255, 255, 0.87);
2872
}
2873
2874
#LookingGlassDialog > #Toolbar {
2875
padding: 0 8px;
2876
border: 0;
2877
border-radius: 0;
2878
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
2879
background-color: rgba(52, 52, 52, 0.01);
2880
}
2881
2882
#LookingGlassDialog .labels {
2883
spacing: 0;
2884
}
2885
2886
#LookingGlassDialog .notebook-tab {
2887
-natural-hpadding: 12px;
2888
-minimum-hpadding: 6px;
2889
transition-duration: 100ms;
2890
min-height: 36px;
2891
padding-left: 32px;
2892
padding-right: 32px;
2893
border: 0;
2894
color: rgba(255, 255, 255, 0.6);
2895
font-weight: bold;
2896
}
2897
2898
#LookingGlassDialog .notebook-tab:hover {
2899
background-color: rgba(255, 255, 255, 0.08);
2900
color: rgba(255, 255, 255, 0.6);
2901
text-shadow: none;
2902
}
2903
2904
#LookingGlassDialog .notebook-tab:active {
2905
transition-duration: 200ms;
2906
background-color: rgba(255, 255, 255, 0.2);
2907
}
2908
2909
#LookingGlassDialog .notebook-tab:selected {
2910
border: 0;
2911
box-shadow: inset 0 -2px #8ab4f8;
2912
background-color: rgba(52, 52, 52, 0.01);
2913
color: rgba(255, 255, 255, 0.87);
2914
text-shadow: none;
2915
}
2916
2917
#LookingGlassDialog StBoxLayout#EvalBox {
2918
padding: 8px;
2919
spacing: 4px;
2920
}
2921
2922
#LookingGlassDialog StBoxLayout#ResultsArea {
2923
spacing: 4px;
2924
}
2925
2926
.lg-dialog .shell-link, .lg-dialog .shell-link:hover, .lg-dialog .shell-link:active {
2927
color: #8ab4f8;
2928
}
2929
2930
.lg-completions-text {
2931
font-size: 1em;
2932
font-style: italic;
2933
}
2934
2935
.lg-obj-inspector-title {
2936
spacing: 4px;
2937
}
2938
2939
.lg-obj-inspector-button, .lg-obj-inspector-button:hover {
2940
border: 0;
2941
}
2942
2943
#Windows {
2944
padding: 8px;
2945
}
2946
2947
#lookingGlassExtensions {
2948
padding: 8px;
2949
}
2950
2951
.lg-extensions-list {
2952
padding: 0;
2953
spacing: 6px;
2954
}
2955
2956
.lg-extension {
2957
padding: 4px;
2958
border: 0;
2959
border-radius: 0;
2960
background-color: transparent;
2961
}
2962
2963
.lg-extension-name {
2964
font-size: 15pt;
2965
font-weight: 500;
2966
}
2967
2968
.lg-extension-meta {
2969
spacing: 6px;
2970
}
2971
2972
#LookingGlassPropertyInspector {
2973
padding: 6px;
2974
border: 0;
2975
border-radius: 4px;
2976
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2977
background-color: #343434;
2978
color: rgba(255, 255, 255, 0.87);
2979
}
2980
2981
/* Login Dialog */
2982
.login-dialog-banner-view {
2983
padding-top: 24px;
2984
max-width: 23em;
2985
}
2986
2987
.login-dialog {
2988
border: 0;
2989
background-color: transparent;
2990
}
2991
2992
.login-dialog StEntry {
2993
transition-duration: 100ms;
2994
background-color: rgba(255, 255, 255, 0.04);
2995
border-color: transparent;
2996
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2997
color: white;
2998
selection-background-color: rgba(255, 255, 255, 0.3);
2999
selected-color: white;
3000
}
3001
3002
.login-dialog StEntry:focus {
3003
border-color: transparent;
3004
box-shadow: inset 0 -2px white;
3005
}
3006
3007
.login-dialog StEntry:insensitive {
3008
color: rgba(255, 255, 255, 0.38);
3009
border-color: transparent;
3010
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
3011
color: rgba(255, 255, 255, 0.5);
3012
}
3013
3014
.login-dialog StEntry StLabel.hint-text {
3015
color: rgba(255, 255, 255, 0.7);
3016
}
3017
3018
.login-dialog StEntry StIcon.peek-password {
3019
color: rgba(255, 255, 255, 0.7);
3020
}
3021
3022
.login-dialog StEntry StIcon.peek-password:hover {
3023
color: white;
3024
}
3025
3026
.login-dialog .modal-dialog-button-box {
3027
spacing: 3px;
3028
}
3029
3030
.login-dialog .modal-dialog-button {
3031
color: rgba(255, 255, 255, 0.7);
3032
background-color: transparent;
3033
border-color: transparent;
3034
box-shadow: 0 0 transparent;
3035
text-shadow: none;
3036
icon-shadow: none;
3037
transition-duration: 100ms;
3038
}
3039
3040
.login-dialog .modal-dialog-button:focus {
3041
color: rgba(255, 255, 255, 0.7);
3042
background-color: rgba(255, 255, 255, 0.12);
3043
text-shadow: none;
3044
icon-shadow: none;
3045
box-shadow: 0 0 transparent;
3046
}
3047
3048
.login-dialog .modal-dialog-button:hover {
3049
color: rgba(255, 255, 255, 0.7);
3050
background-color: rgba(255, 255, 255, 0.08);
3051
border-color: transparent;
3052
box-shadow: 0 0 transparent;
3053
text-shadow: none;
3054
icon-shadow: none;
3055
}
3056
3057
.login-dialog .modal-dialog-button:active {
3058
color: rgba(255, 255, 255, 0.7);
3059
background-color: rgba(255, 255, 255, 0.2);
3060
border-color: transparent;
3061
box-shadow: 0 0 transparent;
3062
text-shadow: none;
3063
icon-shadow: none;
3064
transition-duration: 200ms;
3065
}
3066
3067
.login-dialog .modal-dialog-button:insensitive {
3068
color: rgba(255, 255, 255, 0.3);
3069
background-color: transparent;
3070
border-color: transparent;
3071
box-shadow: 0 0 transparent;
3072
text-shadow: none;
3073
icon-shadow: none;
3074
}
3075
3076
.login-dialog .modal-dialog-button:default {
3077
min-width: 32px;
3078
padding: 0 16px;
3079
color: rgba(0, 0, 0, 0.87);
3080
background-color: #8ab4f8;
3081
border-color: transparent;
3082
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
3083
text-shadow: none;
3084
icon-shadow: none;
3085
transition-duration: 100ms;
3086
}
3087
3088
.login-dialog .modal-dialog-button:default:focus {
3089
color: rgba(0, 0, 0, 0.87);
3090
text-shadow: none;
3091
icon-shadow: none;
3092
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
3093
}
3094
3095
.login-dialog .modal-dialog-button:default:hover {
3096
color: rgba(0, 0, 0, 0.87);
3097
background-color: #8ab4f8;
3098
border-color: transparent;
3099
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
3100
text-shadow: none;
3101
icon-shadow: none;
3102
}
3103
3104
.login-dialog .modal-dialog-button:default:active {
3105
color: rgba(0, 0, 0, 0.87);
3106
background-color: rgba(111, 145, 199, 0.9688);
3107
border-color: transparent;
3108
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
3109
text-shadow: none;
3110
icon-shadow: none;
3111
transition-duration: 200ms;
3112
}
3113
3114
.login-dialog .modal-dialog-button:default:insensitive {
3115
color: rgba(255, 255, 255, 0.5);
3116
background-color: rgba(255, 255, 255, 0.08);
3117
border-color: transparent;
3118
box-shadow: 0 0 transparent;
3119
text-shadow: none;
3120
icon-shadow: none;
3121
}
3122
3123
.login-dialog-logo-bin {
3124
padding: 24px 0;
3125
}
3126
3127
.login-dialog-banner {
3128
color: rgba(255, 255, 255, 0.7);
3129
}
3130
3131
.login-dialog-button-box {
3132
spacing: 5px;
3133
}
3134
3135
.caps-lock-warning-label,
3136
.login-dialog-message-warning {
3137
color: #f28b82;
3138
}
3139
3140
.login-dialog-message-hint {
3141
padding-top: 0;
3142
padding-bottom: 20px;
3143
color: rgba(255, 255, 255, 0.7);
3144
}
3145
3146
.login-dialog-user-selection-box {
3147
padding: 100px 0;
3148
}
3149
3150
.login-dialog-not-listed-button {
3151
transition-duration: 100ms;
3152
min-height: 32px;
3153
padding: 0 8px;
3154
margin-top: 1em;
3155
border-radius: 4px;
3156
color: rgba(255, 255, 255, 0.7);
3157
font-size: 10.5pt;
3158
font-weight: 500;
3159
}
3160
3161
.login-dialog-not-listed-button:focus {
3162
background-color: rgba(255, 255, 255, 0.12);
3163
}
3164
3165
.login-dialog-not-listed-button:hover {
3166
background-color: rgba(255, 255, 255, 0.08);
3167
}
3168
3169
.login-dialog-not-listed-button:active {
3170
transition-duration: 200ms;
3171
background-color: rgba(255, 255, 255, 0.2);
3172
}
3173
3174
.login-dialog-user-list-view {
3175
-st-vfade-offset: 1em;
3176
}
3177
3178
.login-dialog-user-list {
3179
spacing: 12px;
3180
width: 23em;
3181
}
3182
3183
.login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
3184
background-color: rgba(255, 255, 255, 0.12);
3185
}
3186
3187
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
3188
border-right: 2px solid white;
3189
}
3190
3191
.login-dialog-user-list-item {
3192
transition-duration: 100ms;
3193
padding: 6px;
3194
border-radius: 4px;
3195
color: inherit;
3196
}
3197
3198
.login-dialog-user-list-item:focus {
3199
background-color: rgba(255, 255, 255, 0.12);
3200
}
3201
3202
.login-dialog-user-list-item:hover {
3203
background-color: rgba(255, 255, 255, 0.08);
3204
}
3205
3206
.login-dialog-user-list-item:active {
3207
transition-duration: 200ms;
3208
background-color: rgba(255, 255, 255, 0.2);
3209
}
3210
3211
.login-dialog-user-list-item:ltr .user-widget {
3212
padding-right: 1em;
3213
}
3214
3215
.login-dialog-user-list-item:rtl .user-widget {
3216
padding-left: 1em;
3217
}
3218
3219
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
3220
height: 2px;
3221
margin-top: 6px;
3222
background-color: white;
3223
}
3224
3225
.login-dialog-username,
3226
.user-widget-label {
3227
padding-left: 16px;
3228
font-size: 15pt;
3229
font-weight: 500;
3230
text-align: left;
3231
}
3232
3233
.user-widget-label:ltr {
3234
padding-left: 14px;
3235
}
3236
3237
.user-widget-label:rtl {
3238
padding-right: 14px;
3239
}
3240
3241
.login-dialog-prompt-layout {
3242
width: 23em;
3243
padding-top: 24px;
3244
padding-bottom: 12px;
3245
spacing: 8px;
3246
}
3247
3248
.login-dialog-prompt-label {
3249
color: rgba(255, 255, 255, 0.7);
3250
font-size: 1em;
3251
padding-top: 1em;
3252
}
3253
3254
.cancel-button,
3255
.switch-user-button,
3256
.login-dialog-session-list-button {
3257
transition-duration: 100ms;
3258
width: 36px;
3259
height: 36px;
3260
min-width: 0;
3261
min-height: 0;
3262
padding: 0;
3263
border-radius: 18px;
3264
color: rgba(255, 255, 255, 0.7);
3265
}
3266
3267
.cancel-button:focus,
3268
.switch-user-button:focus,
3269
.login-dialog-session-list-button:focus {
3270
background-color: rgba(255, 255, 255, 0.12);
3271
}
3272
3273
.cancel-button:hover,
3274
.switch-user-button:hover,
3275
.login-dialog-session-list-button:hover {
3276
background-color: rgba(255, 255, 255, 0.08);
3277
}
3278
3279
.cancel-button:active,
3280
.switch-user-button:active,
3281
.login-dialog-session-list-button:active {
3282
transition-duration: 200ms;
3283
background-color: rgba(255, 255, 255, 0.2);
3284
}
3285
3286
.cancel-button StIcon,
3287
.switch-user-button StIcon,
3288
.login-dialog-session-list-button StIcon {
3289
icon-size: 16px;
3290
}
3291
3292
/* Screen Shield */
3293
.screen-shield-arrows {
3294
padding-bottom: 3em;
3295
}
3296
3297
.screen-shield-arrows Gjs_Arrow {
3298
width: 80px;
3299
height: 48px;
3300
color: white;
3301
-arrow-thickness: 12px;
3302
-arrow-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
3303
}
3304
3305
.screen-shield-clock {
3306
padding-bottom: 1.5em;
3307
color: white;
3308
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
3309
font-weight: normal;
3310
text-align: center;
3311
}
3312
3313
.screen-shield-clock-time {
3314
font-size: 96px;
3315
font-weight: 300;
3316
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
3317
font-feature-settings: "tnum";
3318
}
3319
3320
.screen-shield-clock-date {
3321
font-size: 34px;
3322
font-weight: 400;
3323
}
3324
3325
.screen-shield-notifications-container {
3326
spacing: 6px;
3327
width: 30em;
3328
max-height: 500px;
3329
background-color: transparent;
3330
}
3331
3332
.screen-shield-notifications-container .summary-notification-stack-scrollview {
3333
padding-top: 0;
3334
padding-bottom: 0;
3335
}
3336
3337
.screen-shield-notifications-container .notification,
3338
.screen-shield-notifications-container .screen-shield-notification-source {
3339
padding: 8px;
3340
border: 0;
3341
border-radius: 4px;
3342
background-color: rgba(0, 0, 0, 0.3);
3343
color: white;
3344
}
3345
3346
.screen-shield-notifications-container .notification {
3347
margin-right: 16px;
3348
}
3349
3350
.screen-shield-notification-label {
3351
min-height: 22px;
3352
padding: 2px 0 0 16px;
3353
font-weight: bold;
3354
}
3355
3356
.screen-shield-notification-count-text {
3357
min-height: 22px;
3358
padding: 2px 0 0 16px;
3359
color: rgba(255, 255, 255, 0.7);
3360
}
3361
3362
#lockDialogGroup {
3363
background-color: #181818;
3364
background-repeat: repeat;
3365
color: white;
3366
}
3367
3368
.screen-shield-background {
3369
background: black;
3370
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
3371
}
3372
3373
/* Dash to Dock */
3374
#dashtodockContainer #dash {
3375
background-color: rgba(0, 0, 0, 0.6);
3376
}
3377
3378
#dashtodockContainer:overview #dash {
3379
background-color: rgba(255, 255, 255, 0.08);
3380
}
3381
3382
#dashtodockContainer.extended:overview #dash {
3383
background-color: transparent;
3384
}
3385
3386
#dashtodockContainer.left #dash,
3387
#dashtodockContainer.right #dash {
3388
padding: 3px 0;
3389
}
3390
3391
#dashtodockContainer.top #dash,
3392
#dashtodockContainer.bottom #dash {
3393
padding: 0 3px;
3394
}
3395
3396
#dashtodockContainer.extended #dash {
3397
padding: 0;
3398
border-radius: 0;
3399
}
3400
3401
#dashtodockContainer.left .dash-item-container > StWidget,
3402
#dashtodockContainer.right .dash-item-container > StWidget,
3403
#dashtodockContainer.extended.left .dash-item-container > StWidget,
3404
#dashtodockContainer.extended.right .dash-item-container > StWidget {
3405
padding: 3px 6px;
3406
}
3407
3408
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
3409
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
3410
padding: 6px 6px 3px 6px;
3411
}
3412
3413
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
3414
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
3415
padding: 3px 6px 6px 6px;
3416
}
3417
3418
#dashtodockContainer.top .dash-item-container > StWidget,
3419
#dashtodockContainer.bottom .dash-item-container > StWidget,
3420
#dashtodockContainer.extended.top .dash-item-container > StWidget,
3421
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
3422
padding: 6px 3px;
3423
}
3424
3425
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
3426
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
3427
padding: 6px 3px 6px 6px;
3428
}
3429
3430
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
3431
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
3432
padding: 6px 6px 6px 3px;
3433
}
3434
3435
#dashtodockContainer .focused .overview-icon {
3436
background-color: rgba(255, 255, 255, 0.12);
3437
}
3438
3439
#dashtodockContainer .default.focused .overview-icon {
3440
background-color: transparent;
3441
}
3442
3443
#dashtodockContainer .app-well-app-running-dot {
3444
background-color: transparent;
3445
}
3446
3447
#dashtodockContainer .default {
3448
background-size: cover;
3449
}
3450
3451
#dashtodockContainer.left .default.running1 {
3452
background-image: url("assets/dash/left-running1.svg");
3453
}
3454
3455
#dashtodockContainer.left .default.running1.focused {
3456
background-image: url("assets/dash/left-running1-focused.svg");
3457
}
3458
3459
#dashtodockContainer.left .default.running2 {
3460
background-image: url("assets/dash/left-running2.svg");
3461
}
3462
3463
#dashtodockContainer.left .default.running2.focused {
3464
background-image: url("assets/dash/left-running2-focused.svg");
3465
}
3466
3467
#dashtodockContainer.left .default.running3 {
3468
background-image: url("assets/dash/left-running3.svg");
3469
}
3470
3471
#dashtodockContainer.left .default.running3.focused {
3472
background-image: url("assets/dash/left-running3-focused.svg");
3473
}
3474
3475
#dashtodockContainer.left .default.running4 {
3476
background-image: url("assets/dash/left-running4.svg");
3477
}
3478
3479
#dashtodockContainer.left .default.running4.focused {
3480
background-image: url("assets/dash/left-running4-focused.svg");
3481
}
3482
3483
#dashtodockContainer.right .default.running1 {
3484
background-image: url("assets/dash/right-running1.svg");
3485
}
3486
3487
#dashtodockContainer.right .default.running1.focused {
3488
background-image: url("assets/dash/right-running1-focused.svg");
3489
}
3490
3491
#dashtodockContainer.right .default.running2 {
3492
background-image: url("assets/dash/right-running2.svg");
3493
}
3494
3495
#dashtodockContainer.right .default.running2.focused {
3496
background-image: url("assets/dash/right-running2-focused.svg");
3497
}
3498
3499
#dashtodockContainer.right .default.running3 {
3500
background-image: url("assets/dash/right-running3.svg");
3501
}
3502
3503
#dashtodockContainer.right .default.running3.focused {
3504
background-image: url("assets/dash/right-running3-focused.svg");
3505
}
3506
3507
#dashtodockContainer.right .default.running4 {
3508
background-image: url("assets/dash/right-running4.svg");
3509
}
3510
3511
#dashtodockContainer.right .default.running4.focused {
3512
background-image: url("assets/dash/right-running4-focused.svg");
3513
}
3514
3515
#dashtodockContainer.top .default.running1 {
3516
background-image: url("assets/dash/top-running1.svg");
3517
}
3518
3519
#dashtodockContainer.top .default.running1.focused {
3520
background-image: url("assets/dash/top-running1-focused.svg");
3521
}
3522
3523
#dashtodockContainer.top .default.running2 {
3524
background-image: url("assets/dash/top-running2.svg");
3525
}
3526
3527
#dashtodockContainer.top .default.running2.focused {
3528
background-image: url("assets/dash/top-running2-focused.svg");
3529
}
3530
3531
#dashtodockContainer.top .default.running3 {
3532
background-image: url("assets/dash/top-running3.svg");
3533
}
3534
3535
#dashtodockContainer.top .default.running3.focused {
3536
background-image: url("assets/dash/top-running3-focused.svg");
3537
}
3538
3539
#dashtodockContainer.top .default.running4 {
3540
background-image: url("assets/dash/top-running4.svg");
3541
}
3542
3543
#dashtodockContainer.top .default.running4.focused {
3544
background-image: url("assets/dash/top-running4-focused.svg");
3545
}
3546
3547
#dashtodockContainer.bottom .default.running1 {
3548
background-image: url("assets/dash/bottom-running1.svg");
3549
}
3550
3551
#dashtodockContainer.bottom .default.running1.focused {
3552
background-image: url("assets/dash/bottom-running1-focused.svg");
3553
}
3554
3555
#dashtodockContainer.bottom .default.running2 {
3556
background-image: url("assets/dash/bottom-running2.svg");
3557
}
3558
3559
#dashtodockContainer.bottom .default.running2.focused {
3560
background-image: url("assets/dash/bottom-running2-focused.svg");
3561
}
3562
3563
#dashtodockContainer.bottom .default.running3 {
3564
background-image: url("assets/dash/bottom-running3.svg");
3565
}
3566
3567
#dashtodockContainer.bottom .default.running3.focused {
3568
background-image: url("assets/dash/bottom-running3-focused.svg");
3569
}
3570
3571
#dashtodockContainer.bottom .default.running4 {
3572
background-image: url("assets/dash/bottom-running4.svg");
3573
}
3574
3575
#dashtodockContainer.bottom .default.running4.focused {
3576
background-image: url("assets/dash/bottom-running4-focused.svg");
3577
}
3578
3579
/* Simple Dock */
3580
#dash:desktop {
3581
background-color: rgba(0, 0, 0, 0.6);
3582
}
3583
3584
/* GPaste */
3585
.popup-menu .search-entry {
3586
color: rgba(255, 255, 255, 0.87);
3587
selection-background-color: rgba(138, 180, 248, 0.24);
3588
selected-color: rgba(255, 255, 255, 0.87);
3589
transition-duration: 100ms;
3590
background-color: rgba(255, 255, 255, 0.04);
3591
border-color: transparent;
3592
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.26);
3593
}
3594
3595
.popup-menu .search-entry:hover {
3596
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.87);
3597
}
3598
3599
.popup-menu .search-entry:focus {
3600
border-color: transparent;
3601
box-shadow: inset 0 -2px #8ab4f8;
3602
color: rgba(255, 255, 255, 0.87);
3603
}
3604
3605
.popup-menu .search-entry .search-entry-icon {
3606
color: rgba(255, 255, 255, 0.6);
3607
}
3608
3609
.popup-menu .search-entry:hover .search-entry-icon, .popup-menu .search-entry:focus .search-entry-icon {
3610
color: rgba(255, 255, 255, 0.87);
3611
}
3612