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