ASCII text, with very long lines (618)
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: 1em;
22
}
23
.shell-link {
25
transition-duration: 100ms;
26
border-radius: 4px;
27
color: #8ab4f8;
28
}
29
.shell-link:hover {
31
background-color: rgba(138, 180, 248, 0.08);
32
color: #8ab4f8;
33
}
34
.shell-link:active {
36
transition-duration: 200ms;
37
background-color: rgba(138, 180, 248, 0.2);
38
color: #8ab4f8;
39
}
40
.lowres-icon {
42
icon-shadow: none;
43
}
44
.icon-dropshadow {
46
icon-shadow: none;
47
}
48
/* Entries */
50
.lg-dialog StEntry,
51
StEntry {
52
min-height: 32px;
53
padding: 0 8px;
54
border-width: 0;
55
border-radius: 4px 4px 0 0;
56
color: rgba(255, 255, 255, 0.87);
57
selection-background-color: rgba(138, 180, 248, 0.24);
58
selected-color: rgba(255, 255, 255, 0.87);
59
font-size: 11.25pt;
60
font-weight: 400;
61
transition-duration: 100ms;
62
background-color: rgba(255, 255, 255, 0.04);
63
border-color: transparent;
64
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.26);
65
}
66
.lg-dialog StEntry:hover,
68
StEntry:hover {
69
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.87);
70
}
71
.lg-dialog StEntry:focus,
73
StEntry:focus {
74
border-color: transparent;
75
box-shadow: inset 0 -2px #8ab4f8;
76
}
77
.lg-dialog StEntry:insensitive,
79
StEntry:insensitive {
80
color: rgba(255, 255, 255, 0.38);
81
border-color: transparent;
82
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
83
}
84
.lg-dialog StEntry StIcon.capslock-warning,
86
StEntry StIcon.capslock-warning {
87
icon-size: 16px;
88
padding: 0 4px;
89
warning-color: #fdd633;
90
}
91
.lg-dialog StEntry StIcon.peek-password,
93
StEntry StIcon.peek-password {
94
icon-size: 16px;
95
padding: 0 4px;
96
color: rgba(255, 255, 255, 0.6);
97
}
98
.lg-dialog StEntry StIcon.peek-password:hover,
100
StEntry StIcon.peek-password:hover {
101
color: rgba(255, 255, 255, 0.87);
102
}
103
.lg-dialog StEntry StLabel.hint-text,
105
StEntry StLabel.hint-text {
106
margin-left: 2px;
107
color: rgba(255, 255, 255, 0.6);
108
}
109
/* Buttons */
111
.notification-banner .notification-button, .hotplug-notification-item, .modal-dialog .modal-dialog-linked-button, .app-folder-dialog .folder-name-container .edit-folder-button, .lg-obj-inspector-button,
112
.button {
113
min-height: 32px;
114
min-width: 48px;
115
padding: 0 8px;
116
border: 0;
117
border-radius: 4px;
118
font-size: 10.5pt;
119
font-weight: 500;
120
color: #8ab4f8;
121
background-color: transparent;
122
border-color: transparent;
123
box-shadow: 0 0 transparent;
124
text-shadow: none;
125
icon-shadow: none;
126
transition-duration: 100ms;
127
}
128
.notification-banner .notification-button:focus, .hotplug-notification-item:focus, .modal-dialog .modal-dialog-linked-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .lg-obj-inspector-button:focus,
130
.button:focus {
131
color: #8ab4f8;
132
background-color: rgba(138, 180, 248, 0.12);
133
text-shadow: none;
134
icon-shadow: none;
135
box-shadow: 0 0 transparent;
136
}
137
.notification-banner .notification-button:hover, .hotplug-notification-item:hover, .modal-dialog .modal-dialog-linked-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .lg-obj-inspector-button:hover,
139
.button:hover {
140
color: #8ab4f8;
141
background-color: rgba(138, 180, 248, 0.08);
142
border-color: transparent;
143
box-shadow: 0 0 transparent;
144
text-shadow: none;
145
icon-shadow: none;
146
}
147
.notification-banner .notification-button:active, .hotplug-notification-item:active, .modal-dialog .modal-dialog-linked-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .lg-obj-inspector-button:active,
149
.button:active {
150
color: #8ab4f8;
151
background-color: rgba(138, 180, 248, 0.2);
152
border-color: transparent;
153
box-shadow: 0 0 transparent;
154
text-shadow: none;
155
icon-shadow: none;
156
transition-duration: 200ms;
157
}
158
.notification-banner .notification-button:insensitive, .hotplug-notification-item:insensitive, .modal-dialog .modal-dialog-linked-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .lg-obj-inspector-button:insensitive,
160
.button:insensitive {
161
color: rgba(255, 255, 255, 0.26);
162
background-color: transparent;
163
border-color: transparent;
164
box-shadow: 0 0 transparent;
165
text-shadow: none;
166
icon-shadow: none;
167
}
168
.notification-banner .notification-button, .hotplug-notification-item, .modal-dialog .modal-dialog-linked-button {
170
margin: 4px;
171
margin-right: 0;
172
}
173
.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 {
175
border-radius: 4px;
176
}
177
.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 {
179
margin-right: 4px;
180
border-right-width: 0;
181
}
182
/* Check Boxes */
184
.check-box StBoxLayout {
185
spacing: 8px;
186
}
187
.check-box StBin {
189
transition-duration: 100ms;
190
width: 24px;
191
height: 24px;
192
padding: 4px;
193
border-radius: 16px;
194
}
195
.check-box StBin,
197
.check-box:focus StBin {
198
background-image: url("assets/checkbox-off.svg");
199
}
200
.check-box:focus StBin {
202
background-color: rgba(255, 255, 255, 0.12);
203
}
204
.check-box:hover StBin {
206
background-color: rgba(255, 255, 255, 0.08);
207
}
208
.check-box:active StBin {
210
transition-duration: 200ms;
211
background-color: rgba(255, 255, 255, 0.2);
212
}
213
.check-box:checked StBin,
215
.check-box:checked:focus StBin {
216
background-image: url("assets/checkbox.svg");
217
}
218
.check-box:checked:focus StBin {
220
background-color: rgba(138, 180, 248, 0.08);
221
}
222
.check-box:checked:hover StBin {
224
background-color: rgba(138, 180, 248, 0.08);
225
}
226
.check-box:checked:active StBin {
228
background-color: rgba(138, 180, 248, 0.2);
229
}
230
/* Switches */
232
.toggle-switch {
233
color: inherit;
234
width: 40px;
235
height: 20px;
236
background-size: contain;
237
background-image: url("assets/toggle-off.svg");
238
}
239
.toggle-switch:checked {
241
background-image: url("assets/toggle-on.svg");
242
}
243
/* Slider */
245
.slider {
246
height: 20px;
247
-barlevel-height: 2px;
248
-barlevel-border-width: 0;
249
-barlevel-border-color: transparent;
250
-barlevel-background-color: rgba(255, 255, 255, 0.26);
251
-barlevel-active-border-color: transparent;
252
-barlevel-active-background-color: #8ab4f8;
253
-barlevel-overdrive-color: #f28b82;
254
-barlevel-overdrive-border-color: transparent;
255
-barlevel-overdrive-separator-width: 2px;
256
-slider-handle-radius: 6px;
257
-slider-handle-border-width: 0;
258
-slider-handle-border-color: transparent;
259
}
260
.slider, .slider:hover, .slider:active {
262
color: #8ab4f8;
263
}
264
/* Scrollbars */
266
StScrollView.vfade {
267
-st-vfade-offset: 32px;
268
}
269
StScrollView.hfade {
271
-st-hfade-offset: 32px;
272
}
273
StScrollBar {
275
padding: 0;
276
}
277
StScrollView StScrollBar {
279
min-width: 16px;
280
min-height: 16px;
281
}
282
StScrollBar StBin#trough {
284
margin: 4px;
285
border-radius: 4px;
286
background-color: rgba(255, 255, 255, 0.12);
287
}
288
StScrollBar StButton#vhandle,
290
StScrollBar StButton#hhandle {
291
transition-duration: 100ms;
292
margin: 4px;
293
border-radius: 4px;
294
background-color: rgba(255, 255, 255, 0.38);
295
}
296
StScrollBar StButton#vhandle:hover,
298
StScrollBar StButton#hhandle:hover {
299
background-color: rgba(255, 255, 255, 0.6);
300
}
301
StScrollBar StButton#vhandle:active,
303
StScrollBar StButton#hhandle:active {
304
background-color: rgba(255, 255, 255, 0.87);
305
}
306
#overview StScrollBar StBin#trough, #unlockDialogNotifications StScrollBar StBin#trough {
308
background-color: rgba(255, 255, 255, 0.12);
309
}
310
#overview StScrollBar StButton#vhandle, #unlockDialogNotifications StScrollBar StButton#vhandle,
312
#overview StScrollBar StButton#hhandle,
313
#unlockDialogNotifications StScrollBar StButton#hhandle {
314
background-color: rgba(255, 255, 255, 0.5);
315
}
316
#overview StScrollBar StButton#vhandle:hover, #unlockDialogNotifications StScrollBar StButton#vhandle:hover,
318
#overview StScrollBar StButton#hhandle:hover,
319
#unlockDialogNotifications StScrollBar StButton#hhandle:hover {
320
background-color: rgba(255, 255, 255, 0.7);
321
}
322
#overview StScrollBar StButton#vhandle:active, #unlockDialogNotifications StScrollBar StButton#vhandle:active,
324
#overview StScrollBar StButton#hhandle:active,
325
#unlockDialogNotifications StScrollBar StButton#hhandle:active {
326
background-color: white;
327
}
328
/* Popovers/Menus */
330
.popup-menu-boxpointer, .candidate-popup-boxpointer {
331
-arrow-base: 0;
332
-arrow-rise: 0;
333
-arrow-border-width: 0;
334
-arrow-border-color: transparent;
335
-arrow-border-radius: 20px;
336
-arrow-box-shadow: none;
337
-arrow-background-color: transparent;
338
}
339
.popup-menu {
341
min-width: 15em;
342
border-color: transparent;
343
color: inherit;
344
}
345
.popup-menu.panel-menu {
347
-boxpointer-gap: 4px;
348
margin-bottom: 1.75em;
349
}
350
.popup-menu-content, .candidate-popup-content {
352
margin: 5px 8px 8px;
353
padding: 8px 0;
354
border-radius: 4px;
355
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
356
background-color: #343434;
357
color: rgba(255, 255, 255, 0.87);
358
}
359
.popup-menu-item {
361
spacing: 8px;
362
padding: 0;
363
transition-duration: 100ms;
364
}
365
.popup-menu-item:ltr {
367
padding: 0.4em;
368
padding-right: 24px;
369
padding-left: 0;
370
}
371
.popup-menu-item:rtl {
373
padding: 0.4em;
374
padding-right: 0;
375
padding-left: 24px;
376
}
377
.popup-menu-item.selected {
379
background-color: rgba(255, 255, 255, 0.08);
380
transition-duration: 0ms;
381
}
382
.popup-menu-item.selected, .popup-menu-item.selected:active {
384
color: rgba(255, 255, 255, 0.87);
385
}
386
.popup-menu-item:active {
388
background-color: rgba(255, 255, 255, 0.2);
389
color: rgba(255, 255, 255, 0.87);
390
transition-duration: 200ms;
391
}
392
.popup-menu-item:checked {
394
box-shadow: none;
395
background-color: rgba(138, 180, 248, 0.24);
396
font-weight: normal;
397
}
398
.popup-menu-item:checked.selected {
400
background-color: rgba(138, 180, 248, 0.4);
401
}
402
.popup-menu-item:checked:active {
404
background-color: rgba(138, 180, 248, 0.6);
405
}
406
.popup-menu-item:insensitive {
408
color: rgba(255, 255, 255, 0.38);
409
}
410
.popup-inactive-menu-item {
412
color: rgba(255, 255, 255, 0.87);
413
}
414
.popup-inactive-menu-item:insensitive {
416
color: rgba(255, 255, 255, 0.38);
417
}
418
.popup-menu-arrow {
420
icon-size: 16px;
421
}
422
.popup-menu-icon {
424
icon-size: 16px;
425
}
426
.popup-sub-menu {
428
border-top: 0;
429
border-bottom: 0;
430
padding-bottom: 0;
431
box-shadow: none;
432
background-color: rgba(255, 255, 255, 0.04);
433
}
434
.popup-menu-ornament {
436
text-align: right;
437
width: 16px;
438
height: 16px;
439
}
440
.popup-separator-menu-item {
442
padding: 0;
443
}
444
.popup-separator-menu-item .popup-separator-menu-item-separator {
446
height: 1px;
447
margin: 8px 0;
448
background-color: rgba(255, 255, 255, 0.12);
449
}
450
.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator {
452
margin: 8px 0;
453
background-color: rgba(255, 255, 255, 0.12);
454
}
455
.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator:ltr {
457
margin-right: 32px;
458
}
459
.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator:rtl {
461
margin-left: 32px;
462
}
463
.background-menu {
465
-boxpointer-gap: 4px;
466
-arrow-rise: 0;
467
}
468
.aggregate-menu {
470
min-width: 21em;
471
}
472
.aggregate-menu .popup-menu-icon {
474
padding: 0;
475
margin: 0 4px;
476
-st-icon-style: symbolic;
477
}
478
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr {
480
padding-left: 16px;
481
margin-left: 16px;
482
}
483
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl {
485
padding-right: 16px;
486
margin-right: 16px;
487
}
488
/* Date/Time Menu */
490
.events-section-title, .datemenu-today-button, .calendar, .world-clocks-button, .weather-button, .message {
491
margin: 0;
492
border: 0;
493
border-radius: 4px;
494
}
495
.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 {
497
border-color: transparent;
498
box-shadow: none;
499
background-color: transparent;
500
color: inherit;
501
text-shadow: none;
502
icon-shadow: none;
503
transition-duration: 100ms;
504
}
505
.events-section-title:focus, .datemenu-today-button:focus, .calendar:focus, .world-clocks-button:focus, .weather-button:focus, .message:focus {
507
background-color: rgba(255, 255, 255, 0.12);
508
}
509
.events-section-title:hover, .datemenu-today-button:hover, .calendar:hover, .world-clocks-button:hover, .weather-button:hover, .message:hover {
511
background-color: rgba(255, 255, 255, 0.08);
512
}
513
.events-section-title:active, .datemenu-today-button:active, .calendar:active, .world-clocks-button:active, .weather-button:active, .message:active {
515
background-color: rgba(255, 255, 255, 0.2);
516
transition-duration: 200ms;
517
}
518
.clock-display-box {
520
spacing: 0;
521
}
522
.clock-display-box .clock {
524
padding-left: 8px;
525
padding-right: 8px;
526
}
527
#calendarArea {
529
padding: 8px 16px;
530
}
531
.datemenu-calendar-column {
533
spacing: 8px;
534
padding: 0;
535
border: 0 solid rgba(255, 255, 255, 0.12);
536
}
537
.datemenu-calendar-column:ltr {
539
margin-right: 0;
540
border-left-width: 0;
541
}
542
.datemenu-calendar-column:rtl {
544
margin-left: 0;
545
border-right-width: 0;
546
}
547
.datemenu-calendar-column .datemenu-displays-section {
549
padding-bottom: 0;
550
}
551
.datemenu-calendar-column .datemenu-displays-box {
553
spacing: 8px;
554
margin: 0 8px;
555
}
556
.events-section-title {
558
min-height: 20px;
559
padding: 4px 8px;
560
color: rgba(255, 255, 255, 0.6) !important;
561
font-weight: bold;
562
}
563
/* today button (the date) */
565
.datemenu-today-button {
566
margin: 0 8px;
567
min-height: 48px;
568
padding: 4px 8px;
569
}
570
.datemenu-today-button .day-label {
572
font-weight: normal;
573
font-size: 1em;
574
}
575
.datemenu-today-button .date-label {
577
font-size: 18pt;
578
font-weight: 400;
579
}
580
/* Calendar */
582
.calendar {
583
margin: 0 8px;
584
margin-bottom: 0;
585
padding: 0;
586
}
587
.calendar .calendar-month-label {
589
transition-duration: 100ms;
590
height: 16px;
591
margin: 2px;
592
padding: 6px 8px;
593
border-radius: 4px;
594
color: inherit;
595
font-weight: bold;
596
text-align: center;
597
}
598
.calendar .calendar-month-label:focus {
600
background-color: rgba(255, 255, 255, 0.12);
601
}
602
.calendar .calendar-change-month-back StIcon,
604
.calendar .calendar-change-month-forward StIcon {
605
icon-size: 16px;
606
}
607
.calendar .pager-button {
609
transition-duration: 100ms;
610
width: 28px;
611
height: 28px;
612
margin: 2px;
613
border-radius: 14px;
614
background-color: transparent;
615
color: rgba(255, 255, 255, 0.6);
616
}
617
.calendar .pager-button:focus {
619
background-color: rgba(255, 255, 255, 0.12);
620
}
621
.calendar .pager-button:hover {
623
background-color: rgba(255, 255, 255, 0.08);
624
}
625
.calendar .pager-button:active {
627
background-color: rgba(255, 255, 255, 0.2);
628
transition-duration: 200ms;
629
}
630
.calendar .calendar-day-base {
632
transition-duration: 100ms;
633
width: 28px;
634
height: 28px;
635
margin: 2px;
636
padding: 0;
637
border: 0;
638
border-radius: 14px;
639
font-size: 9pt;
640
font-weight: 400;
641
font-feature-settings: "tnum";
642
text-align: center;
643
}
644
.calendar .calendar-day-base:focus {
646
background-color: rgba(255, 255, 255, 0.12);
647
}
648
.calendar .calendar-day-base:hover {
650
background-color: rgba(255, 255, 255, 0.08);
651
}
652
.calendar .calendar-day-base:active {
654
transition-duration: 200ms;
655
border-color: transparent;
656
background-color: rgba(255, 255, 255, 0.2);
657
color: inherit;
658
}
659
.calendar .calendar-day-base:selected {
661
border-color: transparent;
662
background-color: rgba(138, 180, 248, 0.24);
663
color: inherit;
664
}
665
.calendar .calendar-day-base.calendar-day-heading {
667
width: 28px;
668
height: 21px;
669
margin-top: 2px;
670
padding: 7px 0 0;
671
border-radius: 14px;
672
background-color: transparent;
673
color: rgba(255, 255, 255, 0.38);
674
font-size: 9pt;
675
font-weight: 400;
676
font-weight: bold;
677
text-align: center;
678
}
679
.calendar .calendar-day-base.calendar-day-heading:focus {
681
background-color: rgba(255, 255, 255, 0.12);
682
}
683
.calendar .calendar-day {
685
border-width: 0;
686
}
687
.calendar .calendar-day-top {
689
border-top-width: 0;
690
}
691
.calendar .calendar-day-left {
693
border-left-width: 0;
694
}
695
.calendar .calendar-nonwork-day {
697
color: inherit;
698
}
699
.calendar .calendar-today {
701
border: 0;
702
background-color: transparent;
703
color: inherit;
704
font-weight: bold !important;
705
}
706
.calendar .calendar-today:focus {
708
background-color: rgba(255, 255, 255, 0.12);
709
color: inherit;
710
}
711
.calendar .calendar-today:hover {
713
background-color: rgba(255, 255, 255, 0.08);
714
color: inherit;
715
}
716
.calendar .calendar-today:active, .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus {
718
background-color: rgba(255, 255, 255, 0.2);
719
color: inherit;
720
}
721
.calendar .calendar-today:selected, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus {
723
background-color: rgba(138, 180, 248, 0.24);
724
color: inherit;
725
}
726
.calendar .calendar-day-with-events {
728
background-image: none;
729
color: #8ab4f8 !important;
730
font-weight: normal;
731
text-decoration: underline;
732
}
733
.calendar .calendar-other-month-day {
735
color: rgba(255, 255, 255, 0.26) !important;
736
}
737
.calendar .calendar-week-number {
739
width: 28px;
740
height: 21px;
741
margin: 2px;
742
padding: 7px 0 0;
743
border-radius: 14px;
744
background-color: transparent;
745
color: rgba(255, 255, 255, 0.38);
746
font-weight: bold;
747
font-size: 1em;
748
text-align: center;
749
}
750
/* World clocks */
752
.world-clocks-button {
753
min-height: 20px;
754
padding: 4px 8px;
755
}
756
.world-clocks-button .world-clocks-grid {
758
spacing-rows: .4em;
759
spacing-columns: .8em;
760
}
761
.world-clocks-button .world-clocks-header {
763
color: rgba(255, 255, 255, 0.6);
764
font-weight: bold;
765
}
766
.world-clocks-button .world-clocks-city {
768
color: inherit;
769
font-weight: normal;
770
font-size: 1em;
771
}
772
.world-clocks-button .world-clocks-time {
774
color: rgba(255, 255, 255, 0.6);
775
font-weight: normal;
776
font-size: 1em;
777
font-feature-settings: "tnum";
778
text-align: right;
779
}
780
.world-clocks-button .world-clocks-timezone {
782
color: rgba(255, 255, 255, 0.38);
783
font-size: 1em;
784
font-feature-settings: "tnum";
785
}
786
/* Weather */
788
.weather-button {
789
min-height: 20px;
790
padding: 4px 8px;
791
}
792
.weather-button .weather-box {
794
spacing: 0.4em;
795
}
796
.weather-button .weather-header-box {
798
spacing: 8px;
799
}
800
.weather-button .weather-header {
802
color: rgba(255, 255, 255, 0.6);
803
font-weight: bold;
804
}
805
.weather-button .weather-header.location {
807
font-weight: normal;
808
font-size: 1em;
809
}
810
.weather-button .weather-grid {
812
spacing-rows: .4em;
813
spacing-columns: .8em;
814
}
815
.weather-button .weather-forecast-time {
817
padding-top: 0;
818
padding-bottom: 0;
819
color: rgba(255, 255, 255, 0.6);
820
font-size: 9pt;
821
font-weight: 400;
822
font-feature-settings: "tnum";
823
}
824
.weather-button .weather-forecast-icon {
826
icon-size: 32px;
827
}
828
.weather-button .weather-forecast-temp {
830
font-weight: bold;
831
}
832
/* Message List */
834
.message-list {
835
width: 31.5em;
836
padding: 0;
837
}
838
.message-list .message-list-placeholder {
840
spacing: 12px;
841
}
842
.message-list-sections {
844
spacing: 8px;
845
margin: 0 8px;
846
}
847
.message-list-section,
849
.message-list-section-list {
850
spacing: 8px;
851
}
852
.message-list-section-list:ltr {
854
padding-left: 0;
855
}
856
.message-list-section-list:rtl {
858
padding-right: 0;
859
}
860
.message-list-controls {
862
margin: 8px 8px 0;
863
padding: 0;
864
spacing: 8px;
865
}
866
.message {
868
min-height: 56px;
869
}
870
.message .message-icon-bin {
872
padding: 12px 0 12px 12px;
873
}
874
.message .message-icon-bin:rtl {
876
padding: 12px 12px 12px 0;
877
}
878
.message .message-icon-bin > StIcon {
880
-st-icon-style: requested;
881
icon-size: 16px;
882
color: inherit;
883
}
884
.message .message-icon-bin > StIcon, .message .message-icon-bin > StIcon:rtl {
886
margin: 0;
887
}
888
.message .message-icon-bin > .fallback-app-icon {
890
width: 16px;
891
height: 16px;
892
}
893
.message .message-content {
895
min-height: 40px;
896
padding: 8px;
897
spacing: 0;
898
color: inherit;
899
font-size: 1em;
900
}
901
.message .message-title {
903
min-height: 22px;
904
padding-top: 2px;
905
color: inherit;
906
font-weight: bold;
907
font-size: 1em;
908
}
909
.message .message-secondary-bin {
911
padding: 0 8px;
912
}
913
.message .message-secondary-bin > .event-time {
915
min-height: 22px;
916
padding-top: 2px;
917
color: rgba(255, 255, 255, 0.6);
918
font-size: 1em;
919
text-align: right;
920
padding-bottom: 0;
921
}
922
.message .message-secondary-bin > StIcon {
924
icon-size: 16px;
925
}
926
.message .message-close-button {
928
transition-duration: 100ms;
929
icon-size: 16px;
930
padding: 4px;
931
border-radius: 12px;
932
}
933
.message .message-close-button, .message .message-close-button:hover, .message .message-close-button:active {
935
color: rgba(255, 255, 255, 0.6);
936
}
937
.message .message-close-button:focus {
939
background-color: rgba(255, 255, 255, 0.12);
940
}
941
.message .message-close-button:hover {
943
background-color: rgba(255, 255, 255, 0.08);
944
}
945
.message .message-close-button:active {
947
transition-duration: 200ms;
948
background-color: rgba(255, 255, 255, 0.2);
949
}
950
.message .message-body {
952
color: rgba(255, 255, 255, 0.6);
953
}
954
.url-highlighter {
956
link-color: #8ab4f8;
957
}
958
/* Media Controls */
960
.message-media-control {
961
transition-duration: 100ms;
962
margin: 16px 0;
963
padding: 8px;
964
border-radius: 16px;
965
}
966
.message-media-control, .message-media-control:focus, .message-media-control:hover, .message-media-control:active {
968
color: rgba(255, 255, 255, 0.6);
969
}
970
.message-media-control:focus {
972
background-color: rgba(255, 255, 255, 0.12);
973
}
974
.message-media-control:hover {
976
background-color: rgba(255, 255, 255, 0.08);
977
}
978
.message-media-control:active {
980
background-color: rgba(255, 255, 255, 0.2);
981
transition-duration: 200ms;
982
}
983
.message-media-control:insensitive {
985
color: rgba(255, 255, 255, 0.26);
986
}
987
.message-media-control:last-child:ltr {
989
margin-right: 16px;
990
padding-right: 8px;
991
border-radius: 16px;
992
}
993
.message-media-control:last-child:rtl {
995
margin-left: 16px;
996
padding-left: 8px;
997
border-radius: 16px;
998
}
999
.media-message-cover-icon {
1001
icon-size: 32px !important;
1002
margin: 4px 0 !important;
1003
border-radius: 0;
1004
}
1005
.media-message-cover-icon.fallback {
1007
icon-size: 16px !important;
1008
padding: 8px;
1009
border: 0;
1010
border-radius: 4px;
1011
background-color: rgba(255, 255, 255, 0.08);
1012
color: rgba(255, 255, 255, 0.38) !important;
1013
}
1014
.candidate-popup-content {
1016
padding: 8px;
1017
spacing: 0;
1018
}
1019
.candidate-index {
1021
padding: 0 4px 0 0;
1022
color: rgba(255, 255, 255, 0.6);
1023
}
1024
.candidate-box {
1026
transition-duration: 100ms;
1027
min-height: 28px;
1028
padding: 0 8px;
1029
border-radius: 4px;
1030
}
1031
.candidate-box:hover {
1033
background-color: rgba(255, 255, 255, 0.08);
1034
color: inherit;
1035
transition-duration: 0ms;
1036
}
1037
.candidate-box:active {
1039
background-color: rgba(255, 255, 255, 0.2);
1040
transition-duration: 200ms;
1041
}
1042
.candidate-box:selected {
1044
background-color: rgba(138, 180, 248, 0.24);
1045
color: inherit;
1046
transition-duration: 0ms;
1047
}
1048
.candidate-page-button-box {
1050
height: 28px;
1051
}
1052
.vertical .candidate-page-button-box {
1054
padding-top: 0;
1055
}
1056
.horizontal .candidate-page-button-box {
1058
padding-left: 0;
1059
}
1060
.candidate-page-button {
1062
min-width: 28px;
1063
min-height: 28px;
1064
padding: 0;
1065
}
1066
.candidate-page-button-previous {
1068
border-right-width: 0;
1069
border-radius: 4px;
1070
}
1071
.candidate-page-button-next {
1073
border-radius: 4px;
1074
}
1075
.candidate-page-button-icon {
1077
icon-size: 16px;
1078
}
1079
/* Notifications & Mesage Tray */
1081
.notification-banner {
1082
min-height: 56px;
1083
width: 34em;
1084
margin: 5px;
1085
border: 0;
1086
border-radius: 4px;
1087
font-size: 1em;
1088
}
1089
.notification-banner, .notification-banner:focus, .notification-banner:hover, .notification-banner:active {
1091
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1092
background-color: #343434;
1093
color: rgba(255, 255, 255, 0.87);
1094
}
1095
.notification-banner .notification-actions {
1097
spacing: 0;
1098
padding-top: 0;
1099
border-top: 0;
1100
background-color: transparent;
1101
color: inherit;
1102
}
1103
.summary-source-counter {
1105
-shell-counter-overlap-x: 3px;
1106
-shell-counter-overlap-y: 3px;
1107
height: 1.6em;
1108
width: 1.6em;
1109
border: 0;
1110
border-radius: .8em;
1111
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1112
background-color: #8ab4f8;
1113
color: rgba(0, 0, 0, 0.87);
1114
font-weight: bold;
1115
font-size: 1em;
1116
}
1117
.chat-body {
1119
spacing: 5px;
1120
}
1121
.chat-response {
1123
margin: 5px;
1124
}
1125
.chat-log-message {
1127
color: rgba(255, 255, 255, 0.87);
1128
}
1129
.chat-new-group {
1131
padding-top: 1em;
1132
}
1133
.chat-received {
1135
padding-left: 4px;
1136
}
1137
.chat-received:rtl {
1139
padding-left: 0;
1140
padding-right: 4px;
1141
}
1142
.chat-sent {
1144
padding-left: 18pt;
1145
color: rgba(255, 255, 255, 0.6);
1146
}
1147
.chat-sent:rtl {
1149
padding-left: 0;
1150
padding-right: 18pt;
1151
}
1152
.chat-meta-message {
1154
padding-left: 4px;
1155
color: rgba(255, 255, 255, 0.6);
1156
font-size: 9pt;
1157
font-weight: 400;
1158
}
1159
.chat-meta-message:rtl {
1161
padding-left: 0;
1162
padding-right: 4px;
1163
}
1164
.hotplug-notification-item-icon {
1166
icon-size: 24px;
1167
padding: 0 4px;
1168
}
1169
/* Modal Dialogs */
1171
.headline {
1172
font-size: 15pt;
1173
font-weight: 500;
1174
}
1175
.modal-dialog {
1177
border: 0;
1178
border-radius: 4px;
1179
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
1180
background-color: #343434;
1181
color: rgba(255, 255, 255, 0.87);
1182
}
1183
.modal-dialog .modal-dialog-content-box {
1185
max-width: 28em;
1186
margin: 32px 40px;
1187
spacing: 32px;
1188
}
1189
/* End Session Dialog */
1191
.end-session-dialog {
1192
width: 30em;
1193
}
1194
.end-session-dialog .end-session-dialog-battery-warning,
1196
.end-session-dialog .dialog-list-title {
1197
color: #fdd633;
1198
}
1199
/* Message Dialog */
1201
.message-dialog-content {
1202
spacing: 18px;
1203
}
1204
.message-dialog-content .message-dialog-title {
1206
font-size: 15pt;
1207
font-weight: 500;
1208
text-align: inherit;
1209
}
1210
.message-dialog-content .message-dialog-title.leightweight {
1212
font-size: 15pt;
1213
font-weight: 500;
1214
}
1215
.message-dialog-content .message-dialog-description {
1217
color: rgba(255, 255, 255, 0.6);
1218
text-align: inherit;
1219
}
1220
/* Dialog List */
1222
.dialog-list {
1223
spacing: 18px;
1224
}
1225
.dialog-list .dialog-list-title {
1227
text-align: inherit;
1228
font-weight: bold;
1229
}
1230
.dialog-list .dialog-list-scrollview {
1232
max-height: 200px;
1233
}
1234
.dialog-list .dialog-list-box {
1236
spacing: 1em;
1237
}
1238
.dialog-list .dialog-list-box .dialog-list-item {
1240
spacing: 1em;
1241
}
1242
.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title {
1244
font-weight: bold;
1245
}
1246
.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description {
1248
color: rgba(255, 255, 255, 0.6);
1249
font-size: 1em;
1250
}
1251
/* Run Dialog */
1253
.run-dialog .modal-dialog-content-box {
1254
margin-top: 24px;
1255
margin-bottom: 16px;
1256
}
1257
.run-dialog .run-dialog-entry {
1259
width: 20em;
1260
}
1261
.run-dialog .run-dialog-description {
1263
text-align: inherit;
1264
color: rgba(255, 255, 255, 0.6);
1265
font-size: 1em;
1266
}
1267
/* Password or Authentication Dialog */
1269
.prompt-dialog {
1270
width: 28em;
1271
}
1272
.prompt-dialog .modal-dialog-content-box {
1274
margin-bottom: 24px;
1275
}
1276
.prompt-dialog-password-grid {
1278
spacing-rows: 8px;
1279
spacing-columns: 4px;
1280
}
1281
.prompt-dialog-password-grid .prompt-dialog-password-entry {
1283
width: auto;
1284
}
1285
.prompt-dialog-password-grid .prompt-dialog-password-entry:ltr {
1287
margin-left: 20px;
1288
}
1289
.prompt-dialog-password-grid .prompt-dialog-password-entry:rtl {
1291
margin-right: 20px;
1292
}
1293
.prompt-dialog-password-layout {
1295
spacing: 8px;
1296
}
1297
.prompt-dialog-password-entry {
1299
width: 20em;
1300
}
1301
.prompt-dialog-error-label,
1303
.prompt-dialog-info-label,
1304
.prompt-dialog-null-label {
1305
font-size: 1em;
1306
text-align: inherit;
1307
}
1308
.prompt-dialog-error-label {
1310
color: #f28b82;
1311
}
1312
/* Polkit Dialog */
1314
.polkit-dialog-user-layout {
1315
text-align: inherit;
1316
spacing: 8px;
1317
margin-bottom: 6px;
1318
}
1319
.polkit-dialog-user-layout .polkit-dialog-user-icon {
1321
border-radius: 9999px;
1322
background-size: contain;
1323
}
1324
.polkit-dialog-user-layout .polkit-dialog-user-root-label {
1326
color: #fdd633;
1327
}
1328
/* Audio selection dialog */
1330
.audio-device-selection-dialog .modal-dialog-content-box {
1331
margin-bottom: 28px;
1332
}
1333
.audio-device-selection-dialog .audio-selection-box {
1335
spacing: 20px;
1336
}
1337
.audio-selection-device {
1339
transition-duration: 100ms;
1340
border: 0;
1341
border-radius: 4px;
1342
}
1343
.audio-selection-device:focus {
1345
background-color: rgba(255, 255, 255, 0.12);
1346
}
1347
.audio-selection-device:hover {
1349
background-color: rgba(255, 255, 255, 0.08);
1350
}
1351
.audio-selection-device:active {
1353
transition-duration: 200ms;
1354
background-color: rgba(255, 255, 255, 0.2);
1355
color: inherit;
1356
}
1357
.audio-selection-device-box {
1359
padding: 20px;
1360
spacing: 20px;
1361
}
1362
.audio-selection-device-icon {
1364
icon-size: 64px;
1365
}
1366
/* Network Dialogs */
1368
.nm-dialog {
1369
max-height: 34em;
1370
min-height: 31em;
1371
min-width: 32em;
1372
}
1373
.nm-dialog-content {
1375
spacing: 20px;
1376
padding: 24px;
1377
}
1378
.nm-dialog-airplane-box {
1380
spacing: 12px;
1381
}
1382
.nm-dialog-airplane-headline {
1384
font-weight: bold;
1385
text-align: inherit;
1386
}
1387
.nm-dialog-airplane-text {
1389
color: inherit;
1390
}
1391
.nm-dialog-header {
1393
font-size: 15pt;
1394
font-weight: 500;
1395
}
1396
.nm-dialog-header-icon {
1398
icon-size: 32px;
1399
}
1400
.nm-dialog-header-hbox {
1402
spacing: 10px;
1403
}
1404
.nm-dialog-scroll-view {
1406
border: 0;
1407
padding: 0;
1408
background-color: transparent;
1409
}
1410
.nm-dialog-item {
1412
transition-duration: 100ms;
1413
padding: 12px;
1414
spacing: 20px;
1415
border-bottom: 0;
1416
border-radius: 4px;
1417
font-size: 1em;
1418
}
1419
.nm-dialog-item:focus {
1421
background-color: rgba(255, 255, 255, 0.12);
1422
}
1423
.nm-dialog-item:hover {
1425
background-color: rgba(255, 255, 255, 0.08);
1426
}
1427
.nm-dialog-item:active {
1429
transition-duration: 200ms;
1430
background-color: rgba(255, 255, 255, 0.2);
1431
}
1432
.nm-dialog-item:selected {
1434
background-color: rgba(138, 180, 248, 0.24);
1435
color: rgba(255, 255, 255, 0.87);
1436
}
1437
.nm-dialog-icon {
1439
icon-size: 16px;
1440
}
1441
.nm-dialog-icons {
1443
spacing: .5em;
1444
}
1445
.no-networks-label {
1447
color: rgba(255, 255, 255, 0.6);
1448
}
1449
.no-networks-box {
1451
spacing: 12px;
1452
}
1453
/* OSD */
1455
.osd-window, .resize-popup, .switcher-list, .workspace-switcher-container {
1456
padding: 12px;
1457
border: none;
1458
border-radius: 4px;
1459
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
1460
background-color: #343434;
1461
color: rgba(255, 255, 255, 0.87);
1462
}
1463
.osd-window {
1465
text-align: center;
1466
font-weight: bold;
1467
spacing: 12px;
1468
margin: 32px;
1469
min-width: 64px;
1470
min-height: 64px;
1471
}
1472
.osd-window StIcon {
1474
icon-size: 96px;
1475
}
1476
.osd-window .osd-monitor-label {
1478
font-size: 48px;
1479
font-weight: 400;
1480
}
1481
.osd-window .level {
1483
height: 8px;
1484
-barlevel-height: 8px;
1485
-barlevel-background-color: rgba(255, 255, 255, 0.12);
1486
-barlevel-active-background-color: #8ab4f8;
1487
-barlevel-overdrive-color: #f28b82;
1488
-barlevel-overdrive-separator-width: 2px;
1489
}
1490
/* Pad OSD */
1492
.pad-osd-window {
1493
padding: 32px;
1494
background-color: rgba(0, 0, 0, 0.6);
1495
}
1496
.pad-osd-window .pad-osd-title-box {
1498
spacing: 12px;
1499
}
1500
.pad-osd-window .pad-osd-title-menu-box {
1502
spacing: 6px;
1503
}
1504
.combo-box-label {
1506
width: 15em;
1507
}
1508
/* App Switcher */
1510
.switcher-popup {
1511
padding: 8px;
1512
spacing: 16px;
1513
}
1514
.switcher-list .switcher-list-item-container {
1516
spacing: 8px;
1517
}
1518
.switcher-list .item-box {
1520
transition-duration: 100ms;
1521
padding: 8px;
1522
border: 0;
1523
border-radius: 4px;
1524
}
1525
.switcher-list .item-box:outlined {
1527
padding: 8px;
1528
border: 0;
1529
box-shadow: none;
1530
background-color: rgba(255, 255, 255, 0.12);
1531
color: inherit;
1532
}
1533
.switcher-list .item-box:selected {
1535
background-color: rgba(138, 180, 248, 0.24);
1536
color: inherit;
1537
}
1538
.switcher-list .thumbnail-box {
1540
padding: 2px;
1541
spacing: 4px;
1542
}
1543
.switcher-list .thumbnail {
1545
width: 256px;
1546
}
1547
.switcher-list .separator {
1549
width: 1px;
1550
background: rgba(255, 255, 255, 0.12);
1551
}
1552
.switcher-arrow {
1554
transition-duration: 100ms;
1555
border-color: transparent;
1556
color: rgba(255, 255, 255, 0.6);
1557
}
1558
.switcher-arrow:highlighted {
1560
color: rgba(255, 255, 255, 0.87);
1561
}
1562
.input-source-switcher-symbol {
1564
width: 96px;
1565
height: 96px;
1566
font-size: 48px;
1567
font-weight: 400;
1568
}
1569
.cycler-highlight {
1571
border: 4px solid #8ab4f8;
1572
}
1573
/* Workspace Switcher */
1575
.workspace-switcher-group {
1576
padding: 8px;
1577
}
1578
.workspace-switcher {
1580
background: transparent;
1581
border: 0;
1582
border-radius: 0;
1583
padding: 0;
1584
spacing: 8px;
1585
}
1586
.ws-switcher-box {
1588
height: 48px;
1589
border: 0;
1590
border-radius: 4px;
1591
background-color: rgba(255, 255, 255, 0.12);
1592
background-size: 0;
1593
}
1594
.ws-switcher-active-up,
1596
.ws-switcher-active-down,
1597
.ws-switcher-active-left,
1598
.ws-switcher-active-right {
1599
height: 48px;
1600
border: 0;
1601
border-radius: 4px;
1602
background-color: #8ab4f8;
1603
background-size: 0;
1604
color: inherit;
1605
}
1606
/* Top Bar */
1608
#panel {
1609
transition-duration: 250ms;
1610
height: 28px;
1611
background-color: #1f1f1f;
1612
font-weight: bold;
1613
font-feature-settings: "tnum";
1614
}
1615
#panel #panelLeft,
1617
#panel #panelCenter {
1618
spacing: 0;
1619
}
1620
#panel .panel-corner {
1622
-panel-corner-radius: 0;
1623
-panel-corner-background-color: transparent;
1624
-panel-corner-border-width: 0;
1625
-panel-corner-border-color: transparent;
1626
}
1627
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
1629
-panel-corner-border-color: transparent;
1630
}
1631
#panel .panel-button {
1633
-natural-hpadding: 8px;
1634
-minimum-hpadding: 4px;
1635
transition-duration: 100ms;
1636
color: rgba(255, 255, 255, 0.7);
1637
text-shadow: none;
1638
font-weight: bold;
1639
}
1640
#panel .panel-button .system-status-icon,
1642
#panel .panel-button .app-menu-icon > StIcon,
1643
#panel .panel-button .popup-menu-arrow {
1644
icon-shadow: none;
1645
}
1646
#panel .panel-button:hover {
1648
color: white;
1649
text-shadow: none;
1650
}
1651
#panel .panel-button:hover .system-status-icon,
1653
#panel .panel-button:hover .app-menu-icon > StIcon,
1654
#panel .panel-button:hover .popup-menu-arrow {
1655
icon-shadow: none;
1656
}
1657
#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
1659
box-shadow: inset 0 -2px white;
1660
background-color: rgba(31, 31, 31, 0.01);
1661
color: white;
1662
}
1663
#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 {
1665
icon-shadow: none;
1666
}
1667
#panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked {
1669
box-shadow: none;
1670
background-color: transparent;
1671
}
1672
#panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock {
1674
box-shadow: inset 0 -2px white;
1675
background-color: rgba(31, 31, 31, 0.01);
1676
}
1677
#panel .panel-button .system-status-icon {
1679
icon-size: 16px;
1680
padding: 0 4px;
1681
}
1682
#panel .panel-button .app-menu-icon {
1684
-st-icon-style: symbolic;
1685
margin-left: 4px;
1686
margin-right: 4px;
1687
}
1688
#panel .panel-status-indicators-box,
1690
#panel .panel-status-menu-box {
1691
spacing: 2px;
1692
}
1693
#panel .power-status.panel-status-indicators-box {
1695
spacing: 0;
1696
}
1697
#panel .screencast-indicator,
1699
#panel .remote-access-indicator {
1700
color: #fdd633;
1701
}
1702
#panel:overview, #panel.unlock-screen, #panel.login-screen {
1704
background-color: transparent;
1705
}
1706
#panel:overview .panel-corner, #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner {
1708
-panel-corner-radius: 0;
1709
-panel-corner-background-color: transparent;
1710
-panel-corner-border-color: transparent;
1711
}
1712
#panel:overview .panel-button, #panel.unlock-screen .panel-button, #panel.login-screen .panel-button {
1714
color: rgba(255, 255, 255, 0.7);
1715
}
1716
#panel:overview .panel-button:hover, #panel.unlock-screen .panel-button:hover, #panel.login-screen .panel-button:hover, #panel:overview .panel-button:active, #panel.unlock-screen .panel-button:active, #panel.login-screen .panel-button:active, #panel:overview .panel-button:overview, #panel.unlock-screen .panel-button:overview, #panel.login-screen .panel-button:overview, #panel:overview .panel-button:focus, #panel.unlock-screen .panel-button:focus, #panel.login-screen .panel-button:focus, #panel:overview .panel-button:checked, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:checked {
1718
color: white;
1719
}
1720
#appMenu {
1722
spacing: 4px;
1723
}
1724
#appMenu .label-shadow {
1726
color: transparent;
1727
}
1728
/* Activities Ripple */
1730
.ripple-box {
1731
width: 48px;
1732
height: 48px;
1733
border-radius: 0 0 48px 0;
1734
box-shadow: none;
1735
background-color: rgba(255, 255, 255, 0.3);
1736
background-image: none;
1737
background-size: auto;
1738
}
1739
.ripple-box:rtl {
1741
border-radius: 0 0 0 48px;
1742
background-image: none;
1743
}
1744
/* OVERVIEW */
1746
#overview {
1747
spacing: 24px;
1748
background-color: transparent;
1749
color: white;
1750
}
1751
.overview-controls {
1753
padding-bottom: 32px;
1754
}
1755
#dash, .workspace-thumbnails {
1757
transition-duration: 250ms;
1758
border: 0;
1759
background-color: rgba(255, 255, 255, 0.08);
1760
color: white;
1761
}
1762
.search-statustext, .no-frequent-applications-label {
1764
font-size: 48px;
1765
font-weight: 400;
1766
color: rgba(255, 255, 255, 0.5);
1767
}
1768
.search-provider-icon, .list-search-result, .app-well-app .overview-icon, .grid-search-result .overview-icon, .show-apps .overview-icon {
1770
padding: 6px;
1771
border: 0;
1772
border-radius: 4px;
1773
background-color: transparent;
1774
color: inherit;
1775
text-align: center;
1776
transition-duration: 100ms;
1777
}
1778
.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 {
1780
border-image: none;
1781
background-image: none;
1782
background-color: rgba(255, 255, 255, 0.12);
1783
color: inherit;
1784
transition-duration: 0ms;
1785
}
1786
.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 {
1788
border-image: none;
1789
background-image: none;
1790
background-color: rgba(255, 255, 255, 0.08);
1791
color: inherit;
1792
transition-duration: 0ms;
1793
}
1794
.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 {
1796
box-shadow: none;
1797
background-color: rgba(255, 255, 255, 0.2);
1798
color: inherit;
1799
transition-duration: 200ms;
1800
}
1801
/* Window Picker */
1803
.window-picker {
1804
-horizontal-spacing: 16px;
1805
-vertical-spacing: 16px;
1806
padding: 0 16px 32px;
1807
}
1808
.window-picker.external-monitor {
1810
padding: 16px;
1811
}
1812
.window-clone-border {
1814
border: 4px solid rgba(255, 255, 255, 0.3);
1815
border-radius: 4px;
1816
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
1817
}
1818
.window-caption {
1820
spacing: 0;
1821
padding: 4px 8px;
1822
border: 0;
1823
border-radius: 4px;
1824
background-color: rgba(0, 0, 0, 0.6);
1825
color: white;
1826
font-size: 1em;
1827
font-weight: normal;
1828
}
1829
.window-close {
1831
-shell-close-overlap: 16px;
1832
height: 32px;
1833
width: 32px;
1834
padding: 0;
1835
border: 0;
1836
border-radius: 0;
1837
box-shadow: none;
1838
background-color: transparent;
1839
color: transparent;
1840
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1841
background-image: url("assets/window-close.svg");
1842
background-size: 32px;
1843
}
1844
.window-close:hover {
1846
border-color: transparent;
1847
background-color: transparent;
1848
color: transparent;
1849
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1850
background-image: url("assets/window-close.svg");
1851
}
1852
.window-close:active {
1854
border-color: transparent;
1855
background-color: transparent;
1856
color: transparent;
1857
background-image: url("assets/window-close-active.svg");
1858
}
1859
.search-entry {
1862
width: 304px;
1863
padding: 0 8px;
1864
border-radius: 4px 4px 0 0;
1865
color: rgba(255, 255, 255, 0.5);
1866
selection-background-color: rgba(255, 255, 255, 0.3);
1867
selected-color: white;
1868
transition-duration: 100ms;
1869
background-color: rgba(255, 255, 255, 0.04);
1870
border-color: transparent;
1871
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1872
}
1873
.search-entry:hover {
1876
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1877
color: rgba(255, 255, 255, 0.5);
1878
}
1879
.search-entry:focus {
1882
border-color: transparent;
1883
box-shadow: inset 0 -2px white;
1884
padding: 0 8px;
1885
border: 0;
1886
color: white;
1887
}
1888
.search-entry StLabel.hint-text {
1891
color: rgba(255, 255, 255, 0.7);
1892
}
1893
.search-entry .search-entry-icon {
1896
icon-size: 16px;
1897
padding: 0 4px;
1898
color: rgba(255, 255, 255, 0.7);
1899
}
1900
.search-entry:hover .search-entry-icon,
1903
.search-entry:focus .search-entry-icon {
1904
color: white;
1905
}
1906
/* Search */
1908
#searchResultsContent {
1909
max-width: 1024px;
1910
}
1911
#searchResultsContent {
1913
padding-left: 16px;
1914
padding-right: 16px;
1915
spacing: 16px;
1916
}
1917
.search-section {
1919
spacing: 16px;
1920
}
1921
.search-section .search-section-separator {
1923
height: 1px;
1924
background-color: rgba(255, 255, 255, 0.12);
1925
}
1926
.search-section:last-child .search-section-separator {
1928
height: 0;
1929
background-color: transparent;
1930
}
1931
.search-section-content {
1933
spacing: 32px;
1934
padding: 0;
1935
border: 0;
1936
border-radius: 0;
1937
box-shadow: none;
1938
background-color: transparent;
1939
color: inherit;
1940
text-shadow: none;
1941
}
1942
.search-provider-icon .list-search-provider-content {
1944
spacing: 20px;
1945
}
1946
.search-provider-icon .list-search-provider-content .list-search-provider-details {
1948
width: 150px;
1949
margin-top: 0;
1950
color: rgba(255, 255, 255, 0.7);
1951
}
1952
.list-search-results {
1954
spacing: 4px;
1955
}
1956
.list-search-result .list-search-result-content {
1958
spacing: 30px;
1959
}
1960
.list-search-result .list-search-result-title {
1962
spacing: 12px;
1963
color: inherit;
1964
font-size: 11.25pt;
1965
font-weight: 400;
1966
}
1967
.list-search-result .list-search-result-description {
1969
color: rgba(255, 255, 255, 0.7);
1970
}
1971
/* App Grid */
1973
.icon-grid {
1974
-shell-grid-horizontal-item-size: 136px;
1975
-shell-grid-vertical-item-size: 136px;
1976
spacing: 32px;
1977
}
1978
.icon-grid .overview-icon {
1980
icon-size: 96px;
1981
}
1982
/* App Icons */
1984
.app-well-app .overview-icon.overview-icon-with-label,
1985
.grid-search-result .overview-icon.overview-icon-with-label,
1986
.app-well-app.app-folder .overview-icon.overview-icon-with-label {
1987
padding: 8px;
1988
spacing: 0;
1989
}
1990
.app-well-app .overview-icon.overview-icon-with-label > StBoxLayout,
1992
.grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout,
1993
.app-well-app.app-folder .overview-icon.overview-icon-with-label > StBoxLayout {
1994
spacing: 4px;
1995
}
1996
/* App Folders */
1998
.app-well-app.app-folder {
1999
border-radius: 4px;
2000
background-color: rgba(255, 255, 255, 0.08);
2001
}
2002
.app-folder-dialog {
2004
spacing: 12px;
2005
border: 0;
2006
border-radius: 4px;
2007
background-color: #343434;
2008
color: rgba(255, 255, 255, 0.87);
2009
}
2010
.app-folder-dialog .folder-name-container {
2012
padding: 24px 36px 0;
2013
spacing: 12px;
2014
}
2015
.app-folder-dialog .folder-name-container .folder-name-label,
2017
.app-folder-dialog .folder-name-container .folder-name-entry {
2018
font-size: 15pt;
2019
font-weight: 500;
2020
}
2021
.app-folder-dialog .folder-name-container .folder-name-entry {
2023
width: 300px;
2024
}
2025
.app-folder-dialog .folder-name-container .folder-name-label {
2027
padding: 0 8px;
2028
color: inherit;
2029
}
2030
.app-folder-dialog .folder-name-container .edit-folder-button {
2032
width: 32px;
2033
height: 32px;
2034
min-width: 0;
2035
min-height: 0;
2036
padding: 0;
2037
border-radius: 16px;
2038
}
2039
.app-folder-dialog .folder-name-container .edit-folder-button > StIcon {
2041
icon-size: 16px;
2042
}
2043
.app-folder-dialog .app-well-app:focus .overview-icon {
2045
background-color: rgba(255, 255, 255, 0.12);
2046
}
2047
.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 {
2049
background-color: rgba(255, 255, 255, 0.08);
2050
}
2051
.app-folder-dialog .app-well-app:active .overview-icon, .app-folder-dialog .app-well-app:checked .overview-icon {
2053
background-color: rgba(255, 255, 255, 0.2);
2054
}
2055
.app-folder-dialog-container {
2057
width: 800px;
2058
height: 600px;
2059
padding: 12px;
2060
}
2061
.app-folder-icon {
2063
padding: 5px;
2064
spacing-rows: 10px;
2065
spacing-columns: 10px;
2066
}
2067
.app-well-app-running-dot {
2069
height: 2px;
2070
width: 32px;
2071
margin-bottom: 0;
2072
border-radius: 0;
2073
background-color: white;
2074
}
2075
.rename-folder-popup .rename-folder-popup-item {
2077
spacing: 6px;
2078
}
2079
.rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl {
2081
padding: 0 12px;
2082
}
2083
.app-menu,
2085
.app-well-menu {
2086
max-width: 27.25em;
2087
}
2088
.page-indicator {
2090
padding: 15px 20px;
2091
}
2092
.page-indicator .page-indicator-icon {
2094
width: 12px;
2095
height: 12px;
2096
border-radius: 12px;
2097
background-color: white;
2098
}
2099
.all-apps,
2102
.frequent-apps > StBoxLayout {
2103
padding: 0 88px 10px;
2104
}
2105
.system-action-icon {
2107
icon-size: 48px;
2108
border-radius: 9999px;
2109
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
2110
background-color: #212121;
2111
color: white;
2112
}
2113
/* Frequent | All toggle */
2115
.app-view-controls {
2116
width: 320px;
2117
padding-bottom: 32px;
2118
}
2119
.app-view-control {
2121
margin: 0;
2122
padding: 0 8px;
2123
}
2124
.app-view-control, .app-view-control:focus, .app-view-control:hover, .app-view-control:active, .app-view-control:checked {
2126
color: rgba(255, 255, 255, 0.7);
2127
background-color: transparent;
2128
border-color: transparent;
2129
box-shadow: 0 0 transparent;
2130
text-shadow: none;
2131
icon-shadow: none;
2132
transition-duration: 100ms;
2133
}
2134
.app-view-control:hover {
2136
background-color: rgba(255, 255, 255, 0.08);
2137
}
2138
.app-view-control:active {
2140
background-color: rgba(255, 255, 255, 0.2);
2141
transition-duration: 200ms;
2142
}
2143
.app-view-control:checked {
2145
box-shadow: inset 0 2px 0 white;
2146
background-color: rgba(0, 0, 0, 0.01);
2147
color: white;
2148
}
2149
.app-view-control:focus {
2151
background-color: rgba(255, 255, 255, 0.12);
2152
}
2153
.app-view-control:first-child {
2155
border-right-width: 0;
2156
border-radius: 4px;
2157
}
2158
.app-view-control:last-child {
2160
border-radius: 4px;
2161
}
2162
.app-view-control:checked {
2164
border-radius: 0;
2165
}
2166
/* Dash */
2168
#dash {
2169
font-size: 1em;
2170
padding: 3px 0;
2171
border-left-width: 0;
2172
border-radius: 0 4px 4px 0;
2173
}
2174
#dash:rtl {
2176
border-right-width: 0;
2177
border-radius: 4px 0 0 4px;
2178
}
2179
#dash .placeholder {
2181
height: 24px;
2182
background-image: url("assets/dash-placeholder.svg");
2183
background-size: contain;
2184
}
2185
#dash .empty-dash-drop-target {
2187
width: 24px;
2188
height: 24px;
2189
}
2190
.dash-item-container > StWidget {
2192
padding: 3px 6px;
2193
}
2194
.dash-label {
2196
padding: 7px 8px;
2197
border: 0;
2198
border-radius: 4px;
2199
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2200
background-color: #343434;
2201
color: rgba(255, 255, 255, 0.87);
2202
text-align: center;
2203
-x-offset: 8px;
2204
}
2205
.show-apps {
2207
color: rgba(255, 255, 255, 0.7);
2208
}
2209
.show-apps:checked {
2211
color: white;
2212
}
2213
/* Workspace pager */
2215
.workspace-thumbnails {
2216
visible-width: 32px;
2217
spacing: 12px;
2218
padding: 12px;
2219
border-right-width: 0;
2220
border-radius: 4px 0 0 4px;
2221
}
2222
.workspace-thumbnails:rtl {
2224
border-left-width: 0;
2225
border-radius: 0 4px 4px 0;
2226
}
2227
.workspace-thumbnails .placeholder {
2229
height: 24px;
2230
background-image: url("assets/dash-placeholder.svg");
2231
background-size: contain;
2232
}
2233
.workspace-thumbnail-indicator {
2235
padding: 6px 10px;
2236
border: 0 solid white;
2237
border-left-width: 2px;
2238
border-radius: 0;
2239
}
2240
.select-area-rubberband {
2242
border: 1px solid #8ab4f8;
2243
background-color: rgba(138, 180, 248, 0.3);
2244
}
2245
.user-icon {
2247
border: 0;
2248
border-radius: 9999px;
2249
background-size: contain;
2250
color: inherit;
2251
}
2252
.user-icon:hover {
2254
border-color: transparent;
2255
color: inherit;
2256
}
2257
.user-icon StIcon {
2259
background-color: rgba(255, 255, 255, 0.08);
2260
border-radius: 9999px;
2261
}
2262
.user-widget.vertical .user-icon {
2264
icon-size: 128px;
2265
}
2266
.user-widget.vertical .user-icon StIcon {
2268
width: 64px;
2269
height: 64px;
2270
padding: 32px;
2271
}
2272
.user-widget.horizontal .user-icon {
2274
icon-size: 64px;
2275
}
2276
.user-widget.horizontal .user-icon StIcon {
2278
width: 32px;
2279
height: 32px;
2280
padding: 16px;
2281
}
2282
.lightbox {
2284
background-color: black;
2285
}
2286
.flashspot {
2288
background-color: white;
2289
}
2290
.hidden {
2292
color: transparent;
2293
}
2294
.caps-lock-warning-label {
2296
text-align: center;
2297
padding-bottom: 8px;
2298
font-size: 1em;
2299
color: #fdd633;
2300
}
2301
.ripple-pointer-location {
2303
width: 50px;
2304
height: 50px;
2305
border-radius: 25px;
2306
box-shadow: none;
2307
background-color: rgba(138, 180, 248, 0.24);
2308
}
2309
.pie-timer {
2311
width: 60px;
2312
height: 60px;
2313
-pie-border-width: 0;
2314
-pie-border-color: transparent;
2315
-pie-background-color: rgba(138, 180, 248, 0.24);
2316
}
2317
.magnifier-zoom-region {
2319
border: 2px solid #8ab4f8;
2320
}
2321
.magnifier-zoom-region.full-screen {
2323
border-width: 0;
2324
}
2325
/* Tiled window previews */
2327
.tile-preview {
2328
border: 1px solid #8ab4f8;
2329
background-color: rgba(138, 180, 248, 0.3);
2330
}
2331
.tile-preview-left.on-primary {
2333
border-radius: 0;
2334
}
2335
.tile-preview-right.on-primary {
2337
border-radius: 0;
2338
}
2339
.tile-preview-left.tile-preview-right.on-primary {
2341
border-radius: 0;
2342
}
2343
/* On-screen Keyboard */
2345
#keyboard {
2346
background-color: rgba(0, 0, 0, 0.3);
2347
box-shadow: none;
2348
}
2349
#keyboard .page-indicator {
2351
padding: 4px;
2352
}
2353
#keyboard .page-indicator .page-indicator-icon {
2355
width: 8px;
2356
height: 8px;
2357
}
2358
.key-container {
2360
padding: 4px;
2361
spacing: 4px;
2362
}
2363
.keyboard-key {
2365
min-height: 1.2em;
2366
min-width: 1.2em;
2367
font-size: 2em;
2368
font-weight: 500;
2369
border: 0;
2370
border-width: 0;
2371
border-style: none;
2372
border-radius: 4px;
2373
}
2374
.keyboard-key, .keyboard-key.default-key {
2376
color: rgba(255, 255, 255, 0.87);
2377
background-color: #343434;
2378
border-color: transparent;
2379
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2380
text-shadow: none;
2381
icon-shadow: none;
2382
transition-duration: 100ms;
2383
}
2384
.keyboard-key:focus, .keyboard-key.default-key:focus {
2386
color: rgba(255, 255, 255, 0.87);
2387
text-shadow: none;
2388
icon-shadow: none;
2389
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2390
}
2391
.keyboard-key:hover, .keyboard-key:checked, .keyboard-key.default-key:hover, .keyboard-key.default-key:checked {
2393
color: rgba(255, 255, 255, 0.87);
2394
background-color: #343434;
2395
border-color: transparent;
2396
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2397
text-shadow: none;
2398
icon-shadow: none;
2399
}
2400
.keyboard-key:active, .keyboard-key.default-key:active {
2402
color: rgba(255, 255, 255, 0.87);
2403
background-color: rgba(92, 92, 92, 0.9688);
2404
border-color: transparent;
2405
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2406
text-shadow: none;
2407
icon-shadow: none;
2408
transition-duration: 200ms;
2409
}
2410
.keyboard-key:grayed {
2412
border-color: transparent;
2413
background-color: rgba(0, 0, 0, 0.3);
2414
color: white;
2415
}
2416
.keyboard-key.enter-key {
2418
color: rgba(0, 0, 0, 0.87);
2419
background-color: #8ab4f8;
2420
border-color: transparent;
2421
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2422
text-shadow: none;
2423
icon-shadow: none;
2424
transition-duration: 100ms;
2425
}
2426
.keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked {
2428
color: rgba(0, 0, 0, 0.87);
2429
background-color: #8ab4f8;
2430
border-color: transparent;
2431
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2432
text-shadow: none;
2433
icon-shadow: none;
2434
}
2435
.keyboard-key.enter-key:active {
2437
color: rgba(0, 0, 0, 0.87);
2438
background-color: rgba(111, 145, 199, 0.9688);
2439
border-color: transparent;
2440
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2441
text-shadow: none;
2442
icon-shadow: none;
2443
transition-duration: 200ms;
2444
}
2445
.keyboard-key.shift-key-uppercase {
2447
color: #8ab4f8;
2448
}
2449
.keyboard-key StIcon {
2451
icon-size: 32px;
2452
}
2453
.keyboard-subkeys {
2455
-boxpointer-gap: 5px;
2456
-arrow-base: 0;
2457
-arrow-rise: 0;
2458
-arrow-border-width: 0;
2459
-arrow-border-color: transparent;
2460
-arrow-border-radius: 0;
2461
-arrow-background-color: transparent;
2462
padding: 5px;
2463
border-radius: 4px;
2464
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2465
background-color: #343434;
2466
color: rgba(255, 255, 255, 0.87);
2467
}
2468
.keyboard-subkeys .keyboard-key {
2470
border-radius: 4px;
2471
color: #8ab4f8;
2472
background-color: transparent;
2473
border-color: transparent;
2474
box-shadow: 0 0 transparent;
2475
text-shadow: none;
2476
icon-shadow: none;
2477
transition-duration: 100ms;
2478
}
2479
.keyboard-subkeys .keyboard-key:focus {
2481
color: #8ab4f8;
2482
background-color: rgba(138, 180, 248, 0.12);
2483
text-shadow: none;
2484
icon-shadow: none;
2485
box-shadow: 0 0 transparent;
2486
}
2487
.keyboard-subkeys .keyboard-key:hover, .keyboard-subkeys .keyboard-key:checked {
2489
color: #8ab4f8;
2490
background-color: rgba(138, 180, 248, 0.08);
2491
border-color: transparent;
2492
box-shadow: 0 0 transparent;
2493
text-shadow: none;
2494
icon-shadow: none;
2495
}
2496
.keyboard-subkeys .keyboard-key:active {
2498
color: #8ab4f8;
2499
background-color: rgba(138, 180, 248, 0.2);
2500
border-color: transparent;
2501
box-shadow: 0 0 transparent;
2502
text-shadow: none;
2503
icon-shadow: none;
2504
transition-duration: 200ms;
2505
}
2506
.emoji-page .keyboard-key {
2508
border: 0;
2509
color: rgba(255, 255, 255, 0.7);
2510
background-color: transparent;
2511
border-color: transparent;
2512
box-shadow: 0 0 transparent;
2513
text-shadow: none;
2514
icon-shadow: none;
2515
transition-duration: 100ms;
2516
}
2517
.emoji-page .keyboard-key:focus {
2519
color: rgba(255, 255, 255, 0.7);
2520
background-color: rgba(255, 255, 255, 0.12);
2521
text-shadow: none;
2522
icon-shadow: none;
2523
box-shadow: 0 0 transparent;
2524
}
2525
.emoji-page .keyboard-key:hover {
2527
color: rgba(255, 255, 255, 0.7);
2528
background-color: rgba(255, 255, 255, 0.08);
2529
border-color: transparent;
2530
box-shadow: 0 0 transparent;
2531
text-shadow: none;
2532
icon-shadow: none;
2533
}
2534
.emoji-page .keyboard-key:active {
2536
color: rgba(255, 255, 255, 0.7);
2537
background-color: rgba(255, 255, 255, 0.2);
2538
border-color: transparent;
2539
box-shadow: 0 0 transparent;
2540
text-shadow: none;
2541
icon-shadow: none;
2542
transition-duration: 200ms;
2543
}
2544
.emoji-panel .keyboard-key:latched {
2546
border-color: transparent;
2547
background-color: #8ab4f8;
2548
color: rgba(0, 0, 0, 0.87);
2549
}
2550
.word-suggestions {
2552
font-size: 11.25pt;
2553
font-weight: 400;
2554
spacing: 12px;
2555
min-height: 20pt;
2556
}
2557
/* Looking Glass */
2559
#LookingGlassDialog {
2560
spacing: 0;
2561
padding: 0;
2562
border: 0;
2563
border-radius: 4px;
2564
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2565
background-color: #343434;
2566
color: rgba(255, 255, 255, 0.87);
2567
}
2568
#LookingGlassDialog > #Toolbar {
2570
padding: 0 8px;
2571
border: 0;
2572
border-radius: 0;
2573
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
2574
background-color: rgba(52, 52, 52, 0.01);
2575
}
2576
#LookingGlassDialog .labels {
2578
spacing: 0;
2579
}
2580
#LookingGlassDialog .notebook-tab {
2582
-natural-hpadding: 12px;
2583
-minimum-hpadding: 6px;
2584
transition-duration: 100ms;
2585
min-height: 32px;
2586
padding-left: 32px;
2587
padding-right: 32px;
2588
border: 0;
2589
color: rgba(255, 255, 255, 0.6);
2590
font-weight: bold;
2591
}
2592
#LookingGlassDialog .notebook-tab:hover {
2594
background-color: rgba(255, 255, 255, 0.08);
2595
color: rgba(255, 255, 255, 0.6);
2596
text-shadow: none;
2597
}
2598
#LookingGlassDialog .notebook-tab:active {
2600
transition-duration: 200ms;
2601
background-color: rgba(255, 255, 255, 0.2);
2602
}
2603
#LookingGlassDialog .notebook-tab:selected {
2605
border: 0;
2606
box-shadow: inset 0 -2px #8ab4f8;
2607
background-color: rgba(52, 52, 52, 0.01);
2608
color: rgba(255, 255, 255, 0.87);
2609
text-shadow: none;
2610
}
2611
#LookingGlassDialog StBoxLayout#EvalBox {
2613
padding: 8px;
2614
spacing: 4px;
2615
}
2616
#LookingGlassDialog StBoxLayout#ResultsArea {
2618
spacing: 4px;
2619
}
2620
.lg-dialog .shell-link, .lg-dialog .shell-link:hover, .lg-dialog .shell-link:active {
2622
color: #8ab4f8;
2623
}
2624
.lg-completions-text {
2626
font-size: 1em;
2627
font-style: italic;
2628
}
2629
.lg-obj-inspector-title {
2631
spacing: 4px;
2632
}
2633
.lg-obj-inspector-button, .lg-obj-inspector-button:hover {
2635
border: 0;
2636
}
2637
#Windows {
2639
padding: 8px;
2640
}
2641
#lookingGlassExtensions {
2643
padding: 8px;
2644
}
2645
.lg-extensions-list {
2647
padding: 0;
2648
spacing: 6px;
2649
}
2650
.lg-extension {
2652
padding: 4px;
2653
border: 0;
2654
border-radius: 0;
2655
background-color: transparent;
2656
}
2657
.lg-extension-name {
2659
font-size: 15pt;
2660
font-weight: 500;
2661
}
2662
.lg-extension-meta {
2664
spacing: 6px;
2665
}
2666
#LookingGlassPropertyInspector {
2668
padding: 6px;
2669
border: 0;
2670
border-radius: 4px;
2671
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2672
background-color: #343434;
2673
color: rgba(255, 255, 255, 0.87);
2674
}
2675
/* Login Dialog */
2677
.login-dialog-banner-view {
2678
padding-top: 24px;
2679
max-width: 23em;
2680
}
2681
.login-dialog {
2683
border: 0;
2684
background-color: transparent;
2685
}
2686
.login-dialog StEntry {
2688
transition-duration: 100ms;
2689
background-color: rgba(255, 255, 255, 0.04);
2690
border-color: transparent;
2691
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2692
color: white;
2693
selection-background-color: rgba(255, 255, 255, 0.3);
2694
selected-color: white;
2695
}
2696
.login-dialog StEntry:focus {
2698
border-color: transparent;
2699
box-shadow: inset 0 -2px white;
2700
}
2701
.login-dialog StEntry:insensitive {
2703
color: rgba(255, 255, 255, 0.38);
2704
border-color: transparent;
2705
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
2706
color: rgba(255, 255, 255, 0.5);
2707
}
2708
.login-dialog StEntry StLabel.hint-text {
2710
color: rgba(255, 255, 255, 0.7);
2711
}
2712
.login-dialog StEntry StIcon.peek-password {
2714
color: rgba(255, 255, 255, 0.7);
2715
}
2716
.login-dialog StEntry StIcon.peek-password:hover {
2718
color: white;
2719
}
2720
.login-dialog .modal-dialog-button-box {
2722
spacing: 3px;
2723
}
2724
.login-dialog .modal-dialog-button {
2726
color: rgba(255, 255, 255, 0.7);
2727
background-color: transparent;
2728
border-color: transparent;
2729
box-shadow: 0 0 transparent;
2730
text-shadow: none;
2731
icon-shadow: none;
2732
transition-duration: 100ms;
2733
}
2734
.login-dialog .modal-dialog-button:focus {
2736
color: rgba(255, 255, 255, 0.7);
2737
background-color: rgba(255, 255, 255, 0.12);
2738
text-shadow: none;
2739
icon-shadow: none;
2740
box-shadow: 0 0 transparent;
2741
}
2742
.login-dialog .modal-dialog-button:hover {
2744
color: rgba(255, 255, 255, 0.7);
2745
background-color: rgba(255, 255, 255, 0.08);
2746
border-color: transparent;
2747
box-shadow: 0 0 transparent;
2748
text-shadow: none;
2749
icon-shadow: none;
2750
}
2751
.login-dialog .modal-dialog-button:active {
2753
color: rgba(255, 255, 255, 0.7);
2754
background-color: rgba(255, 255, 255, 0.2);
2755
border-color: transparent;
2756
box-shadow: 0 0 transparent;
2757
text-shadow: none;
2758
icon-shadow: none;
2759
transition-duration: 200ms;
2760
}
2761
.login-dialog .modal-dialog-button:insensitive {
2763
color: rgba(255, 255, 255, 0.3);
2764
background-color: transparent;
2765
border-color: transparent;
2766
box-shadow: 0 0 transparent;
2767
text-shadow: none;
2768
icon-shadow: none;
2769
}
2770
.login-dialog .modal-dialog-button:default {
2772
min-width: 32px;
2773
padding: 0 16px;
2774
color: rgba(0, 0, 0, 0.87);
2775
background-color: #8ab4f8;
2776
border-color: transparent;
2777
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2778
text-shadow: none;
2779
icon-shadow: none;
2780
transition-duration: 100ms;
2781
}
2782
.login-dialog .modal-dialog-button:default:focus {
2784
color: rgba(0, 0, 0, 0.87);
2785
text-shadow: none;
2786
icon-shadow: none;
2787
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2788
}
2789
.login-dialog .modal-dialog-button:default:hover {
2791
color: rgba(0, 0, 0, 0.87);
2792
background-color: #8ab4f8;
2793
border-color: transparent;
2794
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2795
text-shadow: none;
2796
icon-shadow: none;
2797
}
2798
.login-dialog .modal-dialog-button:default:active {
2800
color: rgba(0, 0, 0, 0.87);
2801
background-color: rgba(111, 145, 199, 0.9688);
2802
border-color: transparent;
2803
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2804
text-shadow: none;
2805
icon-shadow: none;
2806
transition-duration: 200ms;
2807
}
2808
.login-dialog .modal-dialog-button:default:insensitive {
2810
color: rgba(255, 255, 255, 0.5);
2811
background-color: rgba(255, 255, 255, 0.08);
2812
border-color: transparent;
2813
box-shadow: 0 0 transparent;
2814
text-shadow: none;
2815
icon-shadow: none;
2816
}
2817
.login-dialog-logo-bin {
2819
padding: 24px 0;
2820
}
2821
.login-dialog-banner {
2823
color: rgba(255, 255, 255, 0.7);
2824
}
2825
.login-dialog-button-box {
2827
spacing: 5px;
2828
width: 23em;
2829
}
2830
.login-dialog-message {
2832
text-align: center;
2833
}
2834
.caps-lock-warning-label,
2836
.login-dialog-message-warning {
2837
color: #f28b82;
2838
}
2839
.login-dialog-message-hint {
2841
padding-top: 0;
2842
padding-bottom: 20px;
2843
color: rgba(255, 255, 255, 0.7);
2844
}
2845
.login-dialog-user-selection-box {
2847
padding: 100px 0;
2848
}
2849
.login-dialog-not-listed-button {
2851
transition-duration: 100ms;
2852
min-height: 32px;
2853
padding: 0 8px;
2854
margin-top: 1em;
2855
border-radius: 4px;
2856
color: rgba(255, 255, 255, 0.7);
2857
font-size: 10.5pt;
2858
font-weight: 500;
2859
}
2860
.login-dialog-not-listed-button:focus {
2862
background-color: rgba(255, 255, 255, 0.12);
2863
}
2864
.login-dialog-not-listed-button:hover {
2866
background-color: rgba(255, 255, 255, 0.08);
2867
}
2868
.login-dialog-not-listed-button:active {
2870
transition-duration: 200ms;
2871
background-color: rgba(255, 255, 255, 0.2);
2872
}
2873
.login-dialog-user-list-view {
2875
-st-vfade-offset: 1em;
2876
}
2877
.login-dialog-user-list {
2879
spacing: 12px;
2880
width: 23em;
2881
}
2882
.login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
2884
background-color: rgba(255, 255, 255, 0.12);
2885
}
2886
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
2888
border-right: 2px solid white;
2889
}
2890
.login-dialog-user-list-item {
2892
transition-duration: 100ms;
2893
padding: 6px;
2894
border-radius: 4px;
2895
color: inherit;
2896
}
2897
.login-dialog-user-list-item:focus {
2899
background-color: rgba(255, 255, 255, 0.12);
2900
}
2901
.login-dialog-user-list-item:hover {
2903
background-color: rgba(255, 255, 255, 0.08);
2904
}
2905
.login-dialog-user-list-item:active {
2907
transition-duration: 200ms;
2908
background-color: rgba(255, 255, 255, 0.2);
2909
}
2910
.login-dialog-user-list-item:ltr .user-widget {
2912
padding-right: 1em;
2913
}
2914
.login-dialog-user-list-item:rtl .user-widget {
2916
padding-left: 1em;
2917
}
2918
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
2920
height: 2px;
2921
margin-top: 6px;
2922
background-color: white;
2923
}
2924
.login-dialog .user-icon StIcon {
2926
background-color: rgba(255, 255, 255, 0.08);
2927
}
2928
.user-widget-label {
2930
color: inherit;
2931
}
2932
.user-widget.horizontal .user-widget-label {
2934
padding-left: 16px;
2935
font-size: 15pt;
2936
font-weight: 500;
2937
text-align: left;
2938
}
2939
.user-widget.horizontal .user-widget-label:ltr {
2941
padding-left: 14px;
2942
}
2943
.user-widget.horizontal .user-widget-label:rtl {
2945
padding-right: 14px;
2946
}
2947
.user-widget.vertical .user-widget-label {
2949
padding-top: 16px;
2950
font-size: 18pt;
2951
font-weight: 400;
2952
text-align: center;
2953
}
2954
.login-dialog-prompt-layout {
2956
width: 23em;
2957
padding-top: 24px;
2958
padding-bottom: 12px;
2959
spacing: 8px;
2960
}
2961
.login-dialog-prompt-label {
2963
color: rgba(255, 255, 255, 0.7);
2964
font-size: 1em;
2965
padding-top: 1em;
2966
}
2967
.cancel-button,
2969
.switch-user-button,
2970
.login-dialog-session-list-button {
2971
transition-duration: 100ms;
2972
width: 32px;
2973
height: 32px;
2974
min-width: 0;
2975
min-height: 0;
2976
padding: 0;
2977
border-radius: 16px;
2978
color: rgba(255, 255, 255, 0.7);
2979
}
2980
.cancel-button:focus,
2982
.switch-user-button:focus,
2983
.login-dialog-session-list-button:focus {
2984
background-color: rgba(255, 255, 255, 0.12);
2985
}
2986
.cancel-button:hover,
2988
.switch-user-button:hover,
2989
.login-dialog-session-list-button:hover {
2990
background-color: rgba(255, 255, 255, 0.08);
2991
}
2992
.cancel-button:active,
2994
.switch-user-button:active,
2995
.login-dialog-session-list-button:active {
2996
transition-duration: 200ms;
2997
background-color: rgba(255, 255, 255, 0.2);
2998
}
2999
.cancel-button StIcon,
3001
.switch-user-button StIcon,
3002
.login-dialog-session-list-button StIcon {
3003
icon-size: 16px;
3004
}
3005
/* Screen Shield */
3007
.unlock-dialog-clock {
3008
padding-bottom: 2.5em;
3009
spacing: 24px;
3010
color: white;
3011
font-weight: normal;
3012
text-align: center;
3013
}
3014
.unlock-dialog-clock-time {
3016
padding-top: 42px;
3017
font-size: 96px;
3018
font-weight: 300;
3019
font-feature-settings: "tnum";
3020
}
3021
.unlock-dialog-clock-date {
3023
font-size: 34px;
3024
font-weight: 400;
3025
}
3026
.unlock-dialog-clock-hint {
3028
padding-top: 48px;
3029
color: rgba(255, 255, 255, 0.7);
3030
font-weight: normal;
3031
}
3032
.unlock-dialog-notifications-container {
3034
width: 23em;
3035
margin: 12px 0;
3036
spacing: 6px;
3037
background-color: transparent;
3038
}
3039
.unlock-dialog-notifications-container .summary-notification-stack-scrollview {
3041
padding-top: 0;
3042
padding-bottom: 0;
3043
}
3044
.unlock-dialog-notifications-container .notification,
3046
.unlock-dialog-notifications-container .unlock-dialog-notification-source {
3047
padding: 8px;
3048
border: 0;
3049
border-radius: 4px;
3050
background-color: rgba(255, 255, 255, 0.04);
3051
color: white;
3052
}
3053
.unlock-dialog-notifications-container .notification.critical,
3055
.unlock-dialog-notifications-container .unlock-dialog-notification-source.critical {
3056
background-color: rgba(255, 255, 255, 0.04);
3057
color: #f28b82;
3058
}
3059
.unlock-dialog-notification-label {
3061
padding: 0 0 0 12px;
3062
}
3063
.unlock-dialog-notification-count-text {
3065
margin-right: 12px;
3066
padding: 2px 8px;
3067
border-radius: 99px;
3068
background-color: rgba(255, 255, 255, 0.08);
3069
color: white;
3070
}
3071
#lockDialogGroup {
3073
background-color: #181818;
3074
color: white;
3075
}
3076
.screen-shield-background {
3078
background: black;
3079
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
3080
}
3081
/* Dash to Dock */
3083
#dashtodockContainer #dash {
3084
background-color: rgba(0, 0, 0, 0.6);
3085
}
3086
#dashtodockContainer:overview #dash {
3088
background-color: rgba(255, 255, 255, 0.08);
3089
}
3090
#dashtodockContainer.extended:overview #dash {
3092
background-color: transparent;
3093
}
3094
#dashtodockContainer.left #dash,
3096
#dashtodockContainer.right #dash {
3097
padding: 3px 0;
3098
}
3099
#dashtodockContainer.top #dash,
3101
#dashtodockContainer.bottom #dash {
3102
padding: 0 3px;
3103
}
3104
#dashtodockContainer.extended #dash {
3106
padding: 0;
3107
border-radius: 0;
3108
}
3109
#dashtodockContainer.left .dash-item-container > StWidget,
3111
#dashtodockContainer.right .dash-item-container > StWidget,
3112
#dashtodockContainer.extended.left .dash-item-container > StWidget,
3113
#dashtodockContainer.extended.right .dash-item-container > StWidget {
3114
padding: 3px 6px;
3115
}
3116
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
3118
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
3119
padding: 6px 6px 3px 6px;
3120
}
3121
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
3123
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
3124
padding: 3px 6px 6px 6px;
3125
}
3126
#dashtodockContainer.top .dash-item-container > StWidget,
3128
#dashtodockContainer.bottom .dash-item-container > StWidget,
3129
#dashtodockContainer.extended.top .dash-item-container > StWidget,
3130
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
3131
padding: 6px 3px;
3132
}
3133
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
3135
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
3136
padding: 6px 3px 6px 6px;
3137
}
3138
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
3140
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
3141
padding: 6px 6px 6px 3px;
3142
}
3143
#dashtodockContainer .focused .overview-icon {
3145
background-color: rgba(255, 255, 255, 0.12);
3146
}
3147
#dashtodockContainer .default.focused .overview-icon {
3149
background-color: transparent;
3150
}
3151
#dashtodockContainer .app-well-app-running-dot {
3153
background-color: transparent;
3154
}
3155
#dashtodockContainer .default {
3157
background-size: cover;
3158
}
3159
#dashtodockContainer.left .default.running1 {
3161
background-image: url("assets/dash/left-running1.svg");
3162
}
3163
#dashtodockContainer.left .default.running1.focused {
3165
background-image: url("assets/dash/left-running1-focused.svg");
3166
}
3167
#dashtodockContainer.left .default.running2 {
3169
background-image: url("assets/dash/left-running2.svg");
3170
}
3171
#dashtodockContainer.left .default.running2.focused {
3173
background-image: url("assets/dash/left-running2-focused.svg");
3174
}
3175
#dashtodockContainer.left .default.running3 {
3177
background-image: url("assets/dash/left-running3.svg");
3178
}
3179
#dashtodockContainer.left .default.running3.focused {
3181
background-image: url("assets/dash/left-running3-focused.svg");
3182
}
3183
#dashtodockContainer.left .default.running4 {
3185
background-image: url("assets/dash/left-running4.svg");
3186
}
3187
#dashtodockContainer.left .default.running4.focused {
3189
background-image: url("assets/dash/left-running4-focused.svg");
3190
}
3191
#dashtodockContainer.right .default.running1 {
3193
background-image: url("assets/dash/right-running1.svg");
3194
}
3195
#dashtodockContainer.right .default.running1.focused {
3197
background-image: url("assets/dash/right-running1-focused.svg");
3198
}
3199
#dashtodockContainer.right .default.running2 {
3201
background-image: url("assets/dash/right-running2.svg");
3202
}
3203
#dashtodockContainer.right .default.running2.focused {
3205
background-image: url("assets/dash/right-running2-focused.svg");
3206
}
3207
#dashtodockContainer.right .default.running3 {
3209
background-image: url("assets/dash/right-running3.svg");
3210
}
3211
#dashtodockContainer.right .default.running3.focused {
3213
background-image: url("assets/dash/right-running3-focused.svg");
3214
}
3215
#dashtodockContainer.right .default.running4 {
3217
background-image: url("assets/dash/right-running4.svg");
3218
}
3219
#dashtodockContainer.right .default.running4.focused {
3221
background-image: url("assets/dash/right-running4-focused.svg");
3222
}
3223
#dashtodockContainer.top .default.running1 {
3225
background-image: url("assets/dash/top-running1.svg");
3226
}
3227
#dashtodockContainer.top .default.running1.focused {
3229
background-image: url("assets/dash/top-running1-focused.svg");
3230
}
3231
#dashtodockContainer.top .default.running2 {
3233
background-image: url("assets/dash/top-running2.svg");
3234
}
3235
#dashtodockContainer.top .default.running2.focused {
3237
background-image: url("assets/dash/top-running2-focused.svg");
3238
}
3239
#dashtodockContainer.top .default.running3 {
3241
background-image: url("assets/dash/top-running3.svg");
3242
}
3243
#dashtodockContainer.top .default.running3.focused {
3245
background-image: url("assets/dash/top-running3-focused.svg");
3246
}
3247
#dashtodockContainer.top .default.running4 {
3249
background-image: url("assets/dash/top-running4.svg");
3250
}
3251
#dashtodockContainer.top .default.running4.focused {
3253
background-image: url("assets/dash/top-running4-focused.svg");
3254
}
3255
#dashtodockContainer.bottom .default.running1 {
3257
background-image: url("assets/dash/bottom-running1.svg");
3258
}
3259
#dashtodockContainer.bottom .default.running1.focused {
3261
background-image: url("assets/dash/bottom-running1-focused.svg");
3262
}
3263
#dashtodockContainer.bottom .default.running2 {
3265
background-image: url("assets/dash/bottom-running2.svg");
3266
}
3267
#dashtodockContainer.bottom .default.running2.focused {
3269
background-image: url("assets/dash/bottom-running2-focused.svg");
3270
}
3271
#dashtodockContainer.bottom .default.running3 {
3273
background-image: url("assets/dash/bottom-running3.svg");
3274
}
3275
#dashtodockContainer.bottom .default.running3.focused {
3277
background-image: url("assets/dash/bottom-running3-focused.svg");
3278
}
3279
#dashtodockContainer.bottom .default.running4 {
3281
background-image: url("assets/dash/bottom-running4.svg");
3282
}
3283
#dashtodockContainer.bottom .default.running4.focused {
3285
background-image: url("assets/dash/bottom-running4-focused.svg");
3286
}
3287
/* Simple Dock */
3289
#dash:desktop {
3290
background-color: rgba(0, 0, 0, 0.6);
3291
}
3292
/* GPaste */
3294
.popup-menu .search-entry {
3295
color: rgba(255, 255, 255, 0.87);
3296
selection-background-color: rgba(138, 180, 248, 0.24);
3297
selected-color: rgba(255, 255, 255, 0.87);
3298
transition-duration: 100ms;
3299
background-color: rgba(255, 255, 255, 0.04);
3300
border-color: transparent;
3301
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.26);
3302
}
3303
.popup-menu .search-entry:hover {
3305
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.87);
3306
}
3307
.popup-menu .search-entry:focus {
3309
border-color: transparent;
3310
box-shadow: inset 0 -2px #8ab4f8;
3311
color: rgba(255, 255, 255, 0.87);
3312
}
3313
.popup-menu .search-entry .search-entry-icon {
3315
color: rgba(255, 255, 255, 0.6);
3316
}
3317
.popup-menu .search-entry:hover .search-entry-icon, .popup-menu .search-entry:focus .search-entry-icon {
3319
color: rgba(255, 255, 255, 0.87);
3320
}
3321