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-light-compact.css

View raw Download
text/plain • 75 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(0, 0, 0, 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: #1a73e8;
30
}
31
32
.shell-link:hover {
33
background-color: rgba(26, 115, 232, 0.08);
34
color: #1a73e8;
35
}
36
37
.shell-link:active {
38
transition-duration: 200ms;
39
background-color: rgba(26, 115, 232, 0.2);
40
color: #1a73e8;
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: 32px;
55
padding: 0 8px;
56
border-width: 0;
57
border-radius: 4px 4px 0 0;
58
color: rgba(0, 0, 0, 0.87);
59
selection-background-color: rgba(26, 115, 232, 0.24);
60
selected-color: rgba(0, 0, 0, 0.87);
61
font-size: 11.25pt;
62
font-weight: 400;
63
transition-duration: 100ms;
64
background-color: rgba(0, 0, 0, 0.04);
65
border-color: transparent;
66
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
67
}
68
69
.lg-dialog StEntry:hover,
70
StEntry:hover {
71
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
72
}
73
74
.lg-dialog StEntry:focus,
75
StEntry:focus {
76
border-color: transparent;
77
box-shadow: inset 0 -2px #1a73e8;
78
}
79
80
.lg-dialog StEntry:insensitive,
81
StEntry:insensitive {
82
color: rgba(0, 0, 0, 0.38);
83
border-color: transparent;
84
box-shadow: inset 0 -1px rgba(0, 0, 0, 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: #f4b400;
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(0, 0, 0, 0.6);
99
}
100
101
.lg-dialog StEntry StIcon.peek-password:hover,
102
StEntry StIcon.peek-password:hover {
103
color: rgba(0, 0, 0, 0.87);
104
}
105
106
.lg-dialog StEntry StLabel.hint-text,
107
StEntry StLabel.hint-text {
108
margin-left: 2px;
109
color: rgba(0, 0, 0, 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: 32px;
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: #1a73e8;
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: #1a73e8;
134
background-color: rgba(26, 115, 232, 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: #1a73e8;
143
background-color: rgba(26, 115, 232, 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: #1a73e8;
153
background-color: rgba(26, 115, 232, 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(0, 0, 0, 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: 4px;
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: 4px;
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: 4px;
195
border-radius: 16px;
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(0, 0, 0, 0.12);
205
}
206
207
.check-box:hover StBin {
208
background-color: rgba(0, 0, 0, 0.08);
209
}
210
211
.check-box:active StBin {
212
transition-duration: 200ms;
213
background-color: rgba(0, 0, 0, 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(26, 115, 232, 0.08);
223
}
224
225
.check-box:checked:hover StBin {
226
background-color: rgba(26, 115, 232, 0.08);
227
}
228
229
.check-box:checked:active StBin {
230
background-color: rgba(26, 115, 232, 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(0, 0, 0, 0.26);
253
-slider-active-border-color: transparent;
254
-slider-active-background-color: #1a73e8;
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: #1a73e8;
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(0, 0, 0, 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(0, 0, 0, 0.38);
294
}
295
296
StScrollBar StButton#vhandle:hover,
297
StScrollBar StButton#hhandle:hover {
298
background-color: rgba(0, 0, 0, 0.6);
299
}
300
301
StScrollBar StButton#vhandle:active,
302
StScrollBar StButton#hhandle:active {
303
background-color: rgba(0, 0, 0, 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: #ffffff;
356
color: rgba(0, 0, 0, 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(0, 0, 0, 0.08);
379
transition-duration: 0ms;
380
}
381
382
.popup-menu-item.selected, .popup-menu-item.selected:active {
383
color: rgba(0, 0, 0, 0.87);
384
}
385
386
.popup-menu-item:active {
387
background-color: rgba(0, 0, 0, 0.2);
388
color: rgba(0, 0, 0, 0.87);
389
transition-duration: 200ms;
390
}
391
392
.popup-menu-item:checked {
393
box-shadow: none;
394
background-color: rgba(26, 115, 232, 0.24);
395
font-weight: normal;
396
}
397
398
.popup-menu-item:checked.selected {
399
background-color: rgba(26, 115, 232, 0.4);
400
}
401
402
.popup-menu-item:checked:active {
403
background-color: rgba(26, 115, 232, 0.6);
404
}
405
406
.popup-menu-item:insensitive {
407
color: rgba(0, 0, 0, 0.38);
408
}
409
410
.popup-inactive-menu-item {
411
color: rgba(0, 0, 0, 0.87);
412
}
413
414
.popup-inactive-menu-item:insensitive {
415
color: rgba(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 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: 12px;
486
border: 0;
487
border-radius: 20px;
488
color: rgba(0, 0, 0, 0.6);
489
transition-duration: 100ms;
490
}
491
492
.system-menu-action:hover, .system-menu-action:focus {
493
padding: 12px;
494
border: 0;
495
color: rgba(0, 0, 0, 0.6);
496
}
497
498
.system-menu-action:focus {
499
background-color: rgba(0, 0, 0, 0.12);
500
}
501
502
.system-menu-action:hover {
503
background-color: rgba(0, 0, 0, 0.08);
504
}
505
506
.system-menu-action:active {
507
background-color: rgba(0, 0, 0, 0.2);
508
color: rgba(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 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: 8px;
552
padding-right: 8px;
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(0, 0, 0, 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: 20px;
586
padding: 4px 8px;
587
color: rgba(0, 0, 0, 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: 48px;
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: 16px;
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(0, 0, 0, 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: 28px;
649
height: 28px;
650
margin: 2px;
651
border-radius: 14px;
652
background-color: transparent;
653
color: rgba(0, 0, 0, 0.6);
654
}
655
656
.calendar .pager-button:focus {
657
background-color: rgba(0, 0, 0, 0.12);
658
}
659
660
.calendar .pager-button:hover {
661
background-color: rgba(0, 0, 0, 0.08);
662
}
663
664
.calendar .pager-button:active {
665
background-color: rgba(0, 0, 0, 0.2);
666
transition-duration: 200ms;
667
}
668
669
.calendar .calendar-day-base {
670
transition-duration: 100ms;
671
width: 28px;
672
height: 28px;
673
margin: 2px;
674
padding: 0;
675
border: 0;
676
border-radius: 14px;
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(0, 0, 0, 0.12);
685
}
686
687
.calendar .calendar-day-base:hover {
688
background-color: rgba(0, 0, 0, 0.08);
689
}
690
691
.calendar .calendar-day-base:active {
692
transition-duration: 200ms;
693
border-color: transparent;
694
background-color: rgba(0, 0, 0, 0.2);
695
color: inherit;
696
}
697
698
.calendar .calendar-day-base:selected {
699
border-color: transparent;
700
background-color: rgba(26, 115, 232, 0.24);
701
color: inherit;
702
}
703
704
.calendar .calendar-day-base.calendar-day-heading {
705
width: 28px;
706
height: 21px;
707
margin-top: 2px;
708
padding: 7px 0 0;
709
border-radius: 14px;
710
background-color: transparent;
711
color: rgba(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 0.12);
747
color: inherit;
748
}
749
750
.calendar .calendar-today:hover {
751
background-color: rgba(0, 0, 0, 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(0, 0, 0, 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(26, 115, 232, 0.24);
762
color: inherit;
763
}
764
765
.calendar .calendar-day-with-events {
766
background-image: none;
767
color: #1a73e8 !important;
768
font-weight: normal;
769
text-decoration: underline;
770
}
771
772
.calendar .calendar-other-month-day {
773
color: rgba(0, 0, 0, 0.26) !important;
774
}
775
776
.calendar .calendar-week-number {
777
width: 28px;
778
height: 21px;
779
margin: 2px;
780
padding: 7px 0 0;
781
border-radius: 14px;
782
background-color: transparent;
783
color: rgba(0, 0, 0, 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: 20px;
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(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 0.38);
821
font-size: 1em;
822
font-feature-settings: "tnum";
823
}
824
825
/* Weather */
826
.weather-button {
827
min-height: 20px;
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(0, 0, 0, 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(0, 0, 0, 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: 56px;
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: 40px;
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(0, 0, 0, 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(0, 0, 0, 0.6);
972
}
973
974
.message .message-content > StBoxLayout > StButton:focus {
975
background-color: rgba(0, 0, 0, 0.12);
976
}
977
978
.message .message-content > StBoxLayout > StButton:hover {
979
background-color: rgba(0, 0, 0, 0.08);
980
}
981
982
.message .message-content > StBoxLayout > StButton:active {
983
transition-duration: 200ms;
984
background-color: rgba(0, 0, 0, 0.2);
985
}
986
987
.message .message-body {
988
color: rgba(0, 0, 0, 0.6);
989
}
990
991
.url-highlighter {
992
link-color: #1a73e8;
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(0, 0, 0, 0.6);
1005
}
1006
1007
.message-media-control:focus {
1008
background-color: rgba(0, 0, 0, 0.12);
1009
}
1010
1011
.message-media-control:hover {
1012
background-color: rgba(0, 0, 0, 0.08);
1013
}
1014
1015
.message-media-control:active {
1016
background-color: rgba(0, 0, 0, 0.2);
1017
transition-duration: 200ms;
1018
}
1019
1020
.message-media-control:insensitive {
1021
color: rgba(0, 0, 0, 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(0, 0, 0, 0.08);
1048
color: rgba(0, 0, 0, 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(0, 0, 0, 0.6);
1059
}
1060
1061
.candidate-box {
1062
transition-duration: 100ms;
1063
min-height: 28px;
1064
padding: 0 8px;
1065
border-radius: 4px;
1066
}
1067
1068
.candidate-box:hover {
1069
background-color: rgba(0, 0, 0, 0.08);
1070
color: inherit;
1071
transition-duration: 0ms;
1072
}
1073
1074
.candidate-box:active {
1075
background-color: rgba(0, 0, 0, 0.2);
1076
transition-duration: 200ms;
1077
}
1078
1079
.candidate-box:selected {
1080
background-color: rgba(26, 115, 232, 0.24);
1081
color: inherit;
1082
transition-duration: 0ms;
1083
}
1084
1085
.candidate-page-button-box {
1086
height: 28px;
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: 28px;
1099
min-height: 28px;
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: 56px;
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: #ffffff;
1129
color: rgba(0, 0, 0, 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: #1a73e8;
1149
color: white;
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(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 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: #ffffff;
1217
color: rgba(0, 0, 0, 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: #f4b400;
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(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 0.6);
1367
font-size: 1em;
1368
}
1369
1370
/* Run Dialog */
1371
.run-dialog .run-dialog-label {
1372
padding-bottom: .4em;
1373
color: rgba(0, 0, 0, 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: #d93025;
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: #d93025;
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: #f4b400;
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(0, 0, 0, 0.12);
1482
}
1483
1484
.audio-selection-device:hover {
1485
background-color: rgba(0, 0, 0, 0.08);
1486
}
1487
1488
.audio-selection-device:active {
1489
transition-duration: 200ms;
1490
background-color: rgba(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 0.12);
1667
}
1668
1669
.nm-dialog-item:hover {
1670
background-color: rgba(0, 0, 0, 0.08);
1671
}
1672
1673
.nm-dialog-item:active {
1674
transition-duration: 200ms;
1675
background-color: rgba(0, 0, 0, 0.2);
1676
}
1677
1678
.nm-dialog-item:selected {
1679
background-color: rgba(26, 115, 232, 0.24);
1680
color: rgba(0, 0, 0, 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(0, 0, 0, 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: #ffffff;
1706
color: rgba(0, 0, 0, 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(0, 0, 0, 0.12);
1731
color: rgba(0, 0, 0, 0.87);
1732
}
1733
1734
.osd-window .level-bar {
1735
border-radius: 0;
1736
background-color: #1a73e8;
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(0, 0, 0, 0.12);
1779
color: inherit;
1780
}
1781
1782
.switcher-list .item-box:selected {
1783
background-color: rgba(26, 115, 232, 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(0, 0, 0, 0.12);
1799
}
1800
1801
.switcher-arrow {
1802
transition-duration: 100ms;
1803
border-color: transparent;
1804
color: rgba(0, 0, 0, 0.6);
1805
}
1806
1807
.switcher-arrow:highlighted {
1808
color: rgba(0, 0, 0, 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 #1a73e8;
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(0, 0, 0, 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: #1a73e8;
1851
background-size: 0;
1852
color: inherit;
1853
}
1854
1855
/* Top Bar */
1856
#panel {
1857
transition-duration: 250ms;
1858
height: 28px;
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: 8px;
1882
-minimum-hpadding: 4px;
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: #f4b400;
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: rgba(0, 0, 0, 0.6);
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: 16px;
2099
height: 32px;
2100
width: 32px;
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: 32px;
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: 11.25pt;
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: #ffffff;
2275
color: rgba(0, 0, 0, 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: 32px;
2300
height: 32px;
2301
min-width: 0;
2302
min-height: 0;
2303
padding: 0;
2304
border-radius: 16px;
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(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 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: #ffffff;
2507
color: rgba(0, 0, 0, 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: #f4b400;
2581
}
2582
2583
.ripple-pointer-location {
2584
width: 50px;
2585
height: 50px;
2586
border-radius: 25px;
2587
box-shadow: none;
2588
background-color: rgba(26, 115, 232, 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(26, 115, 232, 0.24);
2597
}
2598
2599
.magnifier-zoom-region {
2600
border: 2px solid #1a73e8;
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
.key-container {
2641
padding: 4px;
2642
spacing: 4px;
2643
}
2644
2645
.keyboard-key {
2646
min-height: 1.2em;
2647
min-width: 1.2em;
2648
font-size: 2em;
2649
font-weight: 500;
2650
border: 0;
2651
border-width: 0;
2652
border-style: none;
2653
border-radius: 4px;
2654
}
2655
2656
.keyboard-key, .keyboard-key.default-key {
2657
color: rgba(0, 0, 0, 0.87);
2658
background-color: #ffffff;
2659
border-color: transparent;
2660
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2661
text-shadow: none;
2662
icon-shadow: none;
2663
transition-duration: 100ms;
2664
}
2665
2666
.keyboard-key:focus, .keyboard-key.default-key:focus {
2667
color: rgba(0, 0, 0, 0.87);
2668
text-shadow: none;
2669
icon-shadow: none;
2670
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2671
}
2672
2673
.keyboard-key:hover, .keyboard-key:checked, .keyboard-key.default-key:hover, .keyboard-key.default-key:checked {
2674
color: rgba(0, 0, 0, 0.87);
2675
background-color: #ffffff;
2676
border-color: transparent;
2677
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2678
text-shadow: none;
2679
icon-shadow: none;
2680
}
2681
2682
.keyboard-key:active, .keyboard-key.default-key:active {
2683
color: rgba(0, 0, 0, 0.87);
2684
background-color: rgba(205, 205, 205, 0.9688);
2685
border-color: transparent;
2686
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2687
text-shadow: none;
2688
icon-shadow: none;
2689
transition-duration: 200ms;
2690
}
2691
2692
.keyboard-key:grayed {
2693
border-color: transparent;
2694
background-color: rgba(0, 0, 0, 0.3);
2695
color: white;
2696
}
2697
2698
.keyboard-key.enter-key {
2699
color: white;
2700
background-color: #1a73e8;
2701
border-color: transparent;
2702
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2703
text-shadow: none;
2704
icon-shadow: none;
2705
transition-duration: 100ms;
2706
}
2707
2708
.keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked {
2709
color: white;
2710
background-color: #1a73e8;
2711
border-color: transparent;
2712
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2713
text-shadow: none;
2714
icon-shadow: none;
2715
}
2716
2717
.keyboard-key.enter-key:active {
2718
color: white;
2719
background-color: #5195ee;
2720
border-color: transparent;
2721
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2722
text-shadow: none;
2723
icon-shadow: none;
2724
transition-duration: 200ms;
2725
}
2726
2727
.keyboard-key.default-key {
2728
background-size: 24px;
2729
}
2730
2731
.keyboard-key.enter-key {
2732
background-image: url("assets/key-enter.svg");
2733
}
2734
2735
.keyboard-key.shift-key-lowercase {
2736
background-image: url("assets/key-shift.svg");
2737
}
2738
2739
.keyboard-key.shift-key-uppercase {
2740
background-image: url("assets/key-shift-uppercase.svg");
2741
}
2742
2743
.keyboard-key.shift-key-uppercase:latched {
2744
background-image: url("assets/key-shift-latched-uppercase.svg");
2745
}
2746
2747
.keyboard-key.hide-key {
2748
background-image: url("assets/key-hide.svg");
2749
}
2750
2751
.keyboard-key.layout-key {
2752
background-image: url("assets/key-layout.svg");
2753
}
2754
2755
.keyboard-subkeys {
2756
-boxpointer-gap: 5px;
2757
-arrow-base: 0;
2758
-arrow-rise: 0;
2759
-arrow-border-width: 0;
2760
-arrow-border-color: transparent;
2761
-arrow-border-radius: 0;
2762
-arrow-background-color: transparent;
2763
padding: 5px;
2764
border-radius: 4px;
2765
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2766
background-color: #ffffff;
2767
color: rgba(0, 0, 0, 0.87);
2768
}
2769
2770
.keyboard-subkeys .keyboard-key {
2771
border-radius: 4px;
2772
color: #1a73e8;
2773
background-color: transparent;
2774
border-color: transparent;
2775
box-shadow: 0 0 transparent;
2776
text-shadow: none;
2777
icon-shadow: none;
2778
transition-duration: 100ms;
2779
}
2780
2781
.keyboard-subkeys .keyboard-key:focus {
2782
color: #1a73e8;
2783
background-color: rgba(26, 115, 232, 0.12);
2784
text-shadow: none;
2785
icon-shadow: none;
2786
box-shadow: 0 0 transparent;
2787
}
2788
2789
.keyboard-subkeys .keyboard-key:hover, .keyboard-subkeys .keyboard-key:checked {
2790
color: #1a73e8;
2791
background-color: rgba(26, 115, 232, 0.08);
2792
border-color: transparent;
2793
box-shadow: 0 0 transparent;
2794
text-shadow: none;
2795
icon-shadow: none;
2796
}
2797
2798
.keyboard-subkeys .keyboard-key:active {
2799
color: #1a73e8;
2800
background-color: rgba(26, 115, 232, 0.2);
2801
border-color: transparent;
2802
box-shadow: 0 0 transparent;
2803
text-shadow: none;
2804
icon-shadow: none;
2805
transition-duration: 200ms;
2806
}
2807
2808
.emoji-page .keyboard-key {
2809
border: 0;
2810
color: rgba(255, 255, 255, 0.7);
2811
background-color: transparent;
2812
border-color: transparent;
2813
box-shadow: 0 0 transparent;
2814
text-shadow: none;
2815
icon-shadow: none;
2816
transition-duration: 100ms;
2817
}
2818
2819
.emoji-page .keyboard-key:focus {
2820
color: rgba(255, 255, 255, 0.7);
2821
background-color: rgba(255, 255, 255, 0.12);
2822
text-shadow: none;
2823
icon-shadow: none;
2824
box-shadow: 0 0 transparent;
2825
}
2826
2827
.emoji-page .keyboard-key:hover {
2828
color: rgba(255, 255, 255, 0.7);
2829
background-color: rgba(255, 255, 255, 0.08);
2830
border-color: transparent;
2831
box-shadow: 0 0 transparent;
2832
text-shadow: none;
2833
icon-shadow: none;
2834
}
2835
2836
.emoji-page .keyboard-key:active {
2837
color: rgba(255, 255, 255, 0.7);
2838
background-color: rgba(255, 255, 255, 0.2);
2839
border-color: transparent;
2840
box-shadow: 0 0 transparent;
2841
text-shadow: none;
2842
icon-shadow: none;
2843
transition-duration: 200ms;
2844
}
2845
2846
.emoji-panel .keyboard-key:latched {
2847
border-color: transparent;
2848
background-color: #1a73e8;
2849
color: white;
2850
}
2851
2852
.word-suggestions {
2853
font-size: 11.25pt;
2854
font-weight: 400;
2855
spacing: 12px;
2856
min-height: 20pt;
2857
}
2858
2859
/* Looking Glass */
2860
#LookingGlassDialog {
2861
spacing: 0;
2862
padding: 0;
2863
border: 0;
2864
border-radius: 4px;
2865
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2866
background-color: #ffffff;
2867
color: rgba(0, 0, 0, 0.87);
2868
}
2869
2870
#LookingGlassDialog > #Toolbar {
2871
padding: 0 8px;
2872
border: 0;
2873
border-radius: 0;
2874
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
2875
background-color: rgba(255, 255, 255, 0.01);
2876
}
2877
2878
#LookingGlassDialog .labels {
2879
spacing: 0;
2880
}
2881
2882
#LookingGlassDialog .notebook-tab {
2883
-natural-hpadding: 12px;
2884
-minimum-hpadding: 6px;
2885
transition-duration: 100ms;
2886
min-height: 32px;
2887
padding-left: 32px;
2888
padding-right: 32px;
2889
border: 0;
2890
color: rgba(0, 0, 0, 0.6);
2891
font-weight: bold;
2892
}
2893
2894
#LookingGlassDialog .notebook-tab:hover {
2895
background-color: rgba(0, 0, 0, 0.08);
2896
color: rgba(0, 0, 0, 0.6);
2897
text-shadow: none;
2898
}
2899
2900
#LookingGlassDialog .notebook-tab:active {
2901
transition-duration: 200ms;
2902
background-color: rgba(0, 0, 0, 0.2);
2903
}
2904
2905
#LookingGlassDialog .notebook-tab:selected {
2906
border: 0;
2907
box-shadow: inset 0 -2px #1a73e8;
2908
background-color: rgba(255, 255, 255, 0.01);
2909
color: rgba(0, 0, 0, 0.87);
2910
text-shadow: none;
2911
}
2912
2913
#LookingGlassDialog StBoxLayout#EvalBox {
2914
padding: 8px;
2915
spacing: 4px;
2916
}
2917
2918
#LookingGlassDialog StBoxLayout#ResultsArea {
2919
spacing: 4px;
2920
}
2921
2922
.lg-dialog .shell-link, .lg-dialog .shell-link:hover, .lg-dialog .shell-link:active {
2923
color: #1a73e8;
2924
}
2925
2926
.lg-completions-text {
2927
font-size: 1em;
2928
font-style: italic;
2929
}
2930
2931
.lg-obj-inspector-title {
2932
spacing: 4px;
2933
}
2934
2935
.lg-obj-inspector-button, .lg-obj-inspector-button:hover {
2936
border: 0;
2937
}
2938
2939
#Windows {
2940
padding: 8px;
2941
}
2942
2943
#lookingGlassExtensions {
2944
padding: 8px;
2945
}
2946
2947
.lg-extensions-list {
2948
padding: 0;
2949
spacing: 6px;
2950
}
2951
2952
.lg-extension {
2953
padding: 4px;
2954
border: 0;
2955
border-radius: 0;
2956
background-color: transparent;
2957
}
2958
2959
.lg-extension-name {
2960
font-size: 15pt;
2961
font-weight: 500;
2962
}
2963
2964
.lg-extension-meta {
2965
spacing: 6px;
2966
}
2967
2968
#LookingGlassPropertyInspector {
2969
padding: 6px;
2970
border: 0;
2971
border-radius: 4px;
2972
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2973
background-color: #ffffff;
2974
color: rgba(0, 0, 0, 0.87);
2975
}
2976
2977
/* Login Dialog */
2978
.login-dialog-banner-view {
2979
padding-top: 24px;
2980
max-width: 23em;
2981
}
2982
2983
.login-dialog {
2984
border: 0;
2985
background-color: transparent;
2986
}
2987
2988
.login-dialog StEntry {
2989
transition-duration: 100ms;
2990
background-color: rgba(255, 255, 255, 0.04);
2991
border-color: transparent;
2992
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2993
color: white;
2994
selection-background-color: rgba(255, 255, 255, 0.3);
2995
selected-color: white;
2996
}
2997
2998
.login-dialog StEntry:focus {
2999
border-color: transparent;
3000
box-shadow: inset 0 -2px white;
3001
}
3002
3003
.login-dialog StEntry:insensitive {
3004
color: rgba(0, 0, 0, 0.38);
3005
border-color: transparent;
3006
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
3007
color: rgba(255, 255, 255, 0.5);
3008
}
3009
3010
.login-dialog StEntry StLabel.hint-text {
3011
color: rgba(255, 255, 255, 0.7);
3012
}
3013
3014
.login-dialog StEntry StIcon.peek-password {
3015
color: rgba(255, 255, 255, 0.7);
3016
}
3017
3018
.login-dialog StEntry StIcon.peek-password:hover {
3019
color: white;
3020
}
3021
3022
.login-dialog .modal-dialog-button-box {
3023
spacing: 3px;
3024
}
3025
3026
.login-dialog .modal-dialog-button {
3027
color: rgba(255, 255, 255, 0.7);
3028
background-color: transparent;
3029
border-color: transparent;
3030
box-shadow: 0 0 transparent;
3031
text-shadow: none;
3032
icon-shadow: none;
3033
transition-duration: 100ms;
3034
}
3035
3036
.login-dialog .modal-dialog-button:focus {
3037
color: rgba(255, 255, 255, 0.7);
3038
background-color: rgba(255, 255, 255, 0.12);
3039
text-shadow: none;
3040
icon-shadow: none;
3041
box-shadow: 0 0 transparent;
3042
}
3043
3044
.login-dialog .modal-dialog-button:hover {
3045
color: rgba(255, 255, 255, 0.7);
3046
background-color: rgba(255, 255, 255, 0.08);
3047
border-color: transparent;
3048
box-shadow: 0 0 transparent;
3049
text-shadow: none;
3050
icon-shadow: none;
3051
}
3052
3053
.login-dialog .modal-dialog-button:active {
3054
color: rgba(255, 255, 255, 0.7);
3055
background-color: rgba(255, 255, 255, 0.2);
3056
border-color: transparent;
3057
box-shadow: 0 0 transparent;
3058
text-shadow: none;
3059
icon-shadow: none;
3060
transition-duration: 200ms;
3061
}
3062
3063
.login-dialog .modal-dialog-button:insensitive {
3064
color: rgba(255, 255, 255, 0.3);
3065
background-color: transparent;
3066
border-color: transparent;
3067
box-shadow: 0 0 transparent;
3068
text-shadow: none;
3069
icon-shadow: none;
3070
}
3071
3072
.login-dialog .modal-dialog-button:default {
3073
min-width: 32px;
3074
padding: 0 16px;
3075
color: white;
3076
background-color: #1a73e8;
3077
border-color: transparent;
3078
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
3079
text-shadow: none;
3080
icon-shadow: none;
3081
transition-duration: 100ms;
3082
}
3083
3084
.login-dialog .modal-dialog-button:default:focus {
3085
color: white;
3086
text-shadow: none;
3087
icon-shadow: none;
3088
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
3089
}
3090
3091
.login-dialog .modal-dialog-button:default:hover {
3092
color: white;
3093
background-color: #1a73e8;
3094
border-color: transparent;
3095
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
3096
text-shadow: none;
3097
icon-shadow: none;
3098
}
3099
3100
.login-dialog .modal-dialog-button:default:active {
3101
color: white;
3102
background-color: #5195ee;
3103
border-color: transparent;
3104
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
3105
text-shadow: none;
3106
icon-shadow: none;
3107
transition-duration: 200ms;
3108
}
3109
3110
.login-dialog .modal-dialog-button:default:insensitive {
3111
color: rgba(255, 255, 255, 0.5);
3112
background-color: rgba(255, 255, 255, 0.08);
3113
border-color: transparent;
3114
box-shadow: 0 0 transparent;
3115
text-shadow: none;
3116
icon-shadow: none;
3117
}
3118
3119
.login-dialog-logo-bin {
3120
padding: 24px 0;
3121
}
3122
3123
.login-dialog-banner {
3124
color: rgba(255, 255, 255, 0.7);
3125
}
3126
3127
.login-dialog-button-box {
3128
spacing: 5px;
3129
}
3130
3131
.caps-lock-warning-label,
3132
.login-dialog-message-warning {
3133
color: #f28b82;
3134
}
3135
3136
.login-dialog-message-hint {
3137
padding-top: 0;
3138
padding-bottom: 20px;
3139
color: rgba(255, 255, 255, 0.7);
3140
}
3141
3142
.login-dialog-user-selection-box {
3143
padding: 100px 0;
3144
}
3145
3146
.login-dialog-not-listed-button {
3147
transition-duration: 100ms;
3148
min-height: 32px;
3149
padding: 0 8px;
3150
margin-top: 1em;
3151
border-radius: 4px;
3152
color: rgba(255, 255, 255, 0.7);
3153
font-size: 10.5pt;
3154
font-weight: 500;
3155
}
3156
3157
.login-dialog-not-listed-button:focus {
3158
background-color: rgba(255, 255, 255, 0.12);
3159
}
3160
3161
.login-dialog-not-listed-button:hover {
3162
background-color: rgba(255, 255, 255, 0.08);
3163
}
3164
3165
.login-dialog-not-listed-button:active {
3166
transition-duration: 200ms;
3167
background-color: rgba(255, 255, 255, 0.2);
3168
}
3169
3170
.login-dialog-user-list-view {
3171
-st-vfade-offset: 1em;
3172
}
3173
3174
.login-dialog-user-list {
3175
spacing: 12px;
3176
width: 23em;
3177
}
3178
3179
.login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
3180
background-color: rgba(255, 255, 255, 0.12);
3181
}
3182
3183
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
3184
border-right: 2px solid white;
3185
}
3186
3187
.login-dialog-user-list-item {
3188
transition-duration: 100ms;
3189
padding: 6px;
3190
border-radius: 4px;
3191
color: inherit;
3192
}
3193
3194
.login-dialog-user-list-item:focus {
3195
background-color: rgba(255, 255, 255, 0.12);
3196
}
3197
3198
.login-dialog-user-list-item:hover {
3199
background-color: rgba(255, 255, 255, 0.08);
3200
}
3201
3202
.login-dialog-user-list-item:active {
3203
transition-duration: 200ms;
3204
background-color: rgba(255, 255, 255, 0.2);
3205
}
3206
3207
.login-dialog-user-list-item:ltr .user-widget {
3208
padding-right: 1em;
3209
}
3210
3211
.login-dialog-user-list-item:rtl .user-widget {
3212
padding-left: 1em;
3213
}
3214
3215
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
3216
height: 2px;
3217
margin-top: 6px;
3218
background-color: white;
3219
}
3220
3221
.login-dialog-username,
3222
.user-widget-label {
3223
padding-left: 16px;
3224
font-size: 15pt;
3225
font-weight: 500;
3226
text-align: left;
3227
}
3228
3229
.user-widget-label:ltr {
3230
padding-left: 14px;
3231
}
3232
3233
.user-widget-label:rtl {
3234
padding-right: 14px;
3235
}
3236
3237
.login-dialog-prompt-layout {
3238
width: 23em;
3239
padding-top: 24px;
3240
padding-bottom: 12px;
3241
spacing: 8px;
3242
}
3243
3244
.login-dialog-prompt-label {
3245
color: rgba(255, 255, 255, 0.7);
3246
font-size: 1em;
3247
padding-top: 1em;
3248
}
3249
3250
.cancel-button,
3251
.switch-user-button,
3252
.login-dialog-session-list-button {
3253
transition-duration: 100ms;
3254
width: 32px;
3255
height: 32px;
3256
min-width: 0;
3257
min-height: 0;
3258
padding: 0;
3259
border-radius: 16px;
3260
color: rgba(255, 255, 255, 0.7);
3261
}
3262
3263
.cancel-button:focus,
3264
.switch-user-button:focus,
3265
.login-dialog-session-list-button:focus {
3266
background-color: rgba(255, 255, 255, 0.12);
3267
}
3268
3269
.cancel-button:hover,
3270
.switch-user-button:hover,
3271
.login-dialog-session-list-button:hover {
3272
background-color: rgba(255, 255, 255, 0.08);
3273
}
3274
3275
.cancel-button:active,
3276
.switch-user-button:active,
3277
.login-dialog-session-list-button:active {
3278
transition-duration: 200ms;
3279
background-color: rgba(255, 255, 255, 0.2);
3280
}
3281
3282
.cancel-button StIcon,
3283
.switch-user-button StIcon,
3284
.login-dialog-session-list-button StIcon {
3285
icon-size: 16px;
3286
}
3287
3288
/* Screen Shield */
3289
.screen-shield-arrows {
3290
padding-bottom: 3em;
3291
}
3292
3293
.screen-shield-arrows Gjs_Arrow {
3294
width: 80px;
3295
height: 48px;
3296
color: white;
3297
-arrow-thickness: 12px;
3298
-arrow-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
3299
}
3300
3301
.screen-shield-clock {
3302
padding-bottom: 1.5em;
3303
color: white;
3304
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
3305
font-weight: normal;
3306
text-align: center;
3307
}
3308
3309
.screen-shield-clock-time {
3310
font-size: 96px;
3311
font-weight: 300;
3312
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
3313
font-feature-settings: "tnum";
3314
}
3315
3316
.screen-shield-clock-date {
3317
font-size: 34px;
3318
font-weight: 400;
3319
}
3320
3321
.screen-shield-notifications-container {
3322
spacing: 6px;
3323
width: 30em;
3324
max-height: 500px;
3325
background-color: transparent;
3326
}
3327
3328
.screen-shield-notifications-container .summary-notification-stack-scrollview {
3329
padding-top: 0;
3330
padding-bottom: 0;
3331
}
3332
3333
.screen-shield-notifications-container .notification,
3334
.screen-shield-notifications-container .screen-shield-notification-source {
3335
padding: 8px;
3336
border: 0;
3337
border-radius: 4px;
3338
background-color: rgba(0, 0, 0, 0.3);
3339
color: white;
3340
}
3341
3342
.screen-shield-notifications-container .notification {
3343
margin-right: 16px;
3344
}
3345
3346
.screen-shield-notification-label {
3347
min-height: 22px;
3348
padding: 2px 0 0 16px;
3349
font-weight: bold;
3350
}
3351
3352
.screen-shield-notification-count-text {
3353
min-height: 22px;
3354
padding: 2px 0 0 16px;
3355
color: rgba(255, 255, 255, 0.7);
3356
}
3357
3358
#lockDialogGroup {
3359
background-color: #181818;
3360
background-repeat: repeat;
3361
color: white;
3362
}
3363
3364
.screen-shield-background {
3365
background: black;
3366
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
3367
}
3368
3369
/* Dash to Dock */
3370
#dashtodockContainer #dash {
3371
background-color: rgba(0, 0, 0, 0.6);
3372
}
3373
3374
#dashtodockContainer:overview #dash {
3375
background-color: rgba(255, 255, 255, 0.08);
3376
}
3377
3378
#dashtodockContainer.extended:overview #dash {
3379
background-color: transparent;
3380
}
3381
3382
#dashtodockContainer.left #dash,
3383
#dashtodockContainer.right #dash {
3384
padding: 3px 0;
3385
}
3386
3387
#dashtodockContainer.top #dash,
3388
#dashtodockContainer.bottom #dash {
3389
padding: 0 3px;
3390
}
3391
3392
#dashtodockContainer.extended #dash {
3393
padding: 0;
3394
border-radius: 0;
3395
}
3396
3397
#dashtodockContainer.left .dash-item-container > StWidget,
3398
#dashtodockContainer.right .dash-item-container > StWidget,
3399
#dashtodockContainer.extended.left .dash-item-container > StWidget,
3400
#dashtodockContainer.extended.right .dash-item-container > StWidget {
3401
padding: 3px 6px;
3402
}
3403
3404
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
3405
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
3406
padding: 6px 6px 3px 6px;
3407
}
3408
3409
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
3410
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
3411
padding: 3px 6px 6px 6px;
3412
}
3413
3414
#dashtodockContainer.top .dash-item-container > StWidget,
3415
#dashtodockContainer.bottom .dash-item-container > StWidget,
3416
#dashtodockContainer.extended.top .dash-item-container > StWidget,
3417
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
3418
padding: 6px 3px;
3419
}
3420
3421
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
3422
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
3423
padding: 6px 3px 6px 6px;
3424
}
3425
3426
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
3427
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
3428
padding: 6px 6px 6px 3px;
3429
}
3430
3431
#dashtodockContainer .focused .overview-icon {
3432
background-color: rgba(0, 0, 0, 0.12);
3433
}
3434
3435
#dashtodockContainer .default.focused .overview-icon {
3436
background-color: transparent;
3437
}
3438
3439
#dashtodockContainer .app-well-app-running-dot {
3440
background-color: transparent;
3441
}
3442
3443
#dashtodockContainer .default {
3444
background-size: cover;
3445
}
3446
3447
#dashtodockContainer.left .default.running1 {
3448
background-image: url("assets/dash/left-running1.svg");
3449
}
3450
3451
#dashtodockContainer.left .default.running1.focused {
3452
background-image: url("assets/dash/left-running1-focused.svg");
3453
}
3454
3455
#dashtodockContainer.left .default.running2 {
3456
background-image: url("assets/dash/left-running2.svg");
3457
}
3458
3459
#dashtodockContainer.left .default.running2.focused {
3460
background-image: url("assets/dash/left-running2-focused.svg");
3461
}
3462
3463
#dashtodockContainer.left .default.running3 {
3464
background-image: url("assets/dash/left-running3.svg");
3465
}
3466
3467
#dashtodockContainer.left .default.running3.focused {
3468
background-image: url("assets/dash/left-running3-focused.svg");
3469
}
3470
3471
#dashtodockContainer.left .default.running4 {
3472
background-image: url("assets/dash/left-running4.svg");
3473
}
3474
3475
#dashtodockContainer.left .default.running4.focused {
3476
background-image: url("assets/dash/left-running4-focused.svg");
3477
}
3478
3479
#dashtodockContainer.right .default.running1 {
3480
background-image: url("assets/dash/right-running1.svg");
3481
}
3482
3483
#dashtodockContainer.right .default.running1.focused {
3484
background-image: url("assets/dash/right-running1-focused.svg");
3485
}
3486
3487
#dashtodockContainer.right .default.running2 {
3488
background-image: url("assets/dash/right-running2.svg");
3489
}
3490
3491
#dashtodockContainer.right .default.running2.focused {
3492
background-image: url("assets/dash/right-running2-focused.svg");
3493
}
3494
3495
#dashtodockContainer.right .default.running3 {
3496
background-image: url("assets/dash/right-running3.svg");
3497
}
3498
3499
#dashtodockContainer.right .default.running3.focused {
3500
background-image: url("assets/dash/right-running3-focused.svg");
3501
}
3502
3503
#dashtodockContainer.right .default.running4 {
3504
background-image: url("assets/dash/right-running4.svg");
3505
}
3506
3507
#dashtodockContainer.right .default.running4.focused {
3508
background-image: url("assets/dash/right-running4-focused.svg");
3509
}
3510
3511
#dashtodockContainer.top .default.running1 {
3512
background-image: url("assets/dash/top-running1.svg");
3513
}
3514
3515
#dashtodockContainer.top .default.running1.focused {
3516
background-image: url("assets/dash/top-running1-focused.svg");
3517
}
3518
3519
#dashtodockContainer.top .default.running2 {
3520
background-image: url("assets/dash/top-running2.svg");
3521
}
3522
3523
#dashtodockContainer.top .default.running2.focused {
3524
background-image: url("assets/dash/top-running2-focused.svg");
3525
}
3526
3527
#dashtodockContainer.top .default.running3 {
3528
background-image: url("assets/dash/top-running3.svg");
3529
}
3530
3531
#dashtodockContainer.top .default.running3.focused {
3532
background-image: url("assets/dash/top-running3-focused.svg");
3533
}
3534
3535
#dashtodockContainer.top .default.running4 {
3536
background-image: url("assets/dash/top-running4.svg");
3537
}
3538
3539
#dashtodockContainer.top .default.running4.focused {
3540
background-image: url("assets/dash/top-running4-focused.svg");
3541
}
3542
3543
#dashtodockContainer.bottom .default.running1 {
3544
background-image: url("assets/dash/bottom-running1.svg");
3545
}
3546
3547
#dashtodockContainer.bottom .default.running1.focused {
3548
background-image: url("assets/dash/bottom-running1-focused.svg");
3549
}
3550
3551
#dashtodockContainer.bottom .default.running2 {
3552
background-image: url("assets/dash/bottom-running2.svg");
3553
}
3554
3555
#dashtodockContainer.bottom .default.running2.focused {
3556
background-image: url("assets/dash/bottom-running2-focused.svg");
3557
}
3558
3559
#dashtodockContainer.bottom .default.running3 {
3560
background-image: url("assets/dash/bottom-running3.svg");
3561
}
3562
3563
#dashtodockContainer.bottom .default.running3.focused {
3564
background-image: url("assets/dash/bottom-running3-focused.svg");
3565
}
3566
3567
#dashtodockContainer.bottom .default.running4 {
3568
background-image: url("assets/dash/bottom-running4.svg");
3569
}
3570
3571
#dashtodockContainer.bottom .default.running4.focused {
3572
background-image: url("assets/dash/bottom-running4-focused.svg");
3573
}
3574
3575
/* Simple Dock */
3576
#dash:desktop {
3577
background-color: rgba(0, 0, 0, 0.6);
3578
}
3579
3580
/* GPaste */
3581
.popup-menu .search-entry {
3582
color: rgba(0, 0, 0, 0.87);
3583
selection-background-color: rgba(26, 115, 232, 0.24);
3584
selected-color: rgba(0, 0, 0, 0.87);
3585
transition-duration: 100ms;
3586
background-color: rgba(0, 0, 0, 0.04);
3587
border-color: transparent;
3588
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
3589
}
3590
3591
.popup-menu .search-entry:hover {
3592
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
3593
}
3594
3595
.popup-menu .search-entry:focus {
3596
border-color: transparent;
3597
box-shadow: inset 0 -2px #1a73e8;
3598
color: rgba(0, 0, 0, 0.87);
3599
}
3600
3601
.popup-menu .search-entry .search-entry-icon {
3602
color: rgba(0, 0, 0, 0.6);
3603
}
3604
3605
.popup-menu .search-entry:hover .search-entry-icon, .popup-menu .search-entry:focus .search-entry-icon {
3606
color: rgba(0, 0, 0, 0.87);
3607
}
3608