ASCII text
1
/* This stylesheet is generated, DO NOT EDIT */
2
/* Copyright 2009, 2015 Red Hat, Inc.
3
*
4
* Portions adapted from Mx's data/style/default.css
5
* Copyright 2009 Intel Corporation
6
*
7
* This program is free software; you can redistribute it and/or modify it
8
* under the terms and conditions of the GNU Lesser General Public License,
9
* version 2.1, as published by the Free Software Foundation.
10
*
11
* This program is distributed in the hope it will be useful, but WITHOUT ANY
12
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
13
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for
14
* more details.
15
*
16
* You should have received a copy of the GNU Lesser General Public License
17
* along with this program; if not, write to the Free Software Foundation,
18
* Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
19
*/
20
/* GLOBALS */
21
stage {
22
font-family: "M+ 1c", Roboto, Cantarell, Sans-Serif;
23
font-size: 10.5pt;
24
font-weight: 400;
25
color: rgba(0, 0, 0, 0.87);
26
}
27
/* WIDGETS */
29
/* Buttons */
30
.button {
31
min-height: 32px;
32
padding: 0 16px;
33
border-width: 0;
34
border-radius: 4px;
35
font-size: 10.5pt;
36
font-weight: 500;
37
color: rgba(0, 0, 0, 0.54);
38
background-color: transparent;
39
border-color: transparent;
40
box-shadow: 0 0 transparent;
41
text-shadow: none;
42
icon-shadow: none;
43
transition-duration: 100ms;
44
}
45
.button:focus {
47
color: rgba(0, 0, 0, 0.87);
48
text-shadow: none;
49
icon-shadow: none;
50
box-shadow: 0 0 transparent;
51
}
52
.button:hover {
54
color: rgba(0, 0, 0, 0.87);
55
background-color: rgba(0, 0, 0, 0.08);
56
border-color: transparent;
57
box-shadow: 0 0 transparent;
58
text-shadow: none;
59
icon-shadow: none;
60
}
61
.button:active {
63
color: rgba(0, 0, 0, 0.87);
64
background-color: rgba(0, 0, 0, 0.2);
65
border-color: transparent;
66
box-shadow: 0 0 transparent;
67
text-shadow: none;
68
icon-shadow: none;
69
transition-duration: 200ms;
70
}
71
.button:insensitive {
73
color: rgba(0, 0, 0, 0.26);
74
background-color: transparent;
75
border-color: transparent;
76
box-shadow: 0 0 transparent;
77
text-shadow: none;
78
icon-shadow: none;
79
}
80
.modal-dialog-linked-button {
82
min-height: 32px;
83
margin: 4px;
84
padding: 0 8px;
85
margin-right: 0;
86
border-right-width: 0;
87
border-radius: 4px;
88
font-size: 10.5pt;
89
font-weight: 500;
90
color: rgba(0, 0, 0, 0.54);
91
background-color: transparent;
92
border-color: transparent;
93
box-shadow: 0 0 transparent;
94
text-shadow: none;
95
icon-shadow: none;
96
transition-duration: 100ms;
97
}
98
.modal-dialog-linked-button:focus {
100
color: rgba(0, 0, 0, 0.87);
101
text-shadow: none;
102
icon-shadow: none;
103
box-shadow: 0 0 transparent;
104
}
105
.modal-dialog-linked-button:hover {
107
color: rgba(0, 0, 0, 0.87);
108
background-color: rgba(0, 0, 0, 0.08);
109
border-color: transparent;
110
box-shadow: 0 0 transparent;
111
text-shadow: none;
112
icon-shadow: none;
113
}
114
.modal-dialog-linked-button:active {
116
color: rgba(0, 0, 0, 0.87);
117
background-color: rgba(0, 0, 0, 0.2);
118
border-color: transparent;
119
box-shadow: 0 0 transparent;
120
text-shadow: none;
121
icon-shadow: none;
122
transition-duration: 200ms;
123
}
124
.modal-dialog-linked-button:insensitive {
126
color: rgba(0, 0, 0, 0.26);
127
background-color: transparent;
128
border-color: transparent;
129
box-shadow: 0 0 transparent;
130
text-shadow: none;
131
icon-shadow: none;
132
}
133
.modal-dialog-linked-button:first-child {
135
border-radius: 4px;
136
}
137
.modal-dialog-linked-button:last-child {
139
margin-right: 4px;
140
border-right-width: 0px;
141
border-radius: 4px;
142
}
143
.modal-dialog-linked-button:first-child:last-child {
145
margin-right: 4px;
146
border-right-width: 0px;
147
border-radius: 4px;
148
}
149
/* Entries */
151
StEntry {
152
min-height: 32px;
153
padding: 0 8px;
154
border-radius: 4px 4px 0 0;
155
border-width: 0;
156
color: rgba(0, 0, 0, 0.87);
157
selection-background-color: rgba(66, 133, 244, 0.32);
158
selected-color: rgba(0, 0, 0, 0.87);
159
font-size: 11.25pt;
160
font-weight: 400;
161
transition-duration: 100ms;
162
background-color: rgba(0, 0, 0, 0.04);
163
border-color: transparent;
164
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
165
}
166
StEntry:hover {
168
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
169
}
170
StEntry:focus {
172
border-color: transparent;
173
box-shadow: inset 0 -2px #4285F4;
174
}
175
StEntry:insensitive {
177
color: rgba(0, 0, 0, 0.38);
178
border-color: transparent;
179
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
180
}
181
StEntry StIcon.capslock-warning {
183
icon-size: 16px;
184
warning-color: #FBBC05;
185
padding: 0 0;
186
}
187
/* Scrollbars */
189
StScrollView.vfade {
190
-st-vfade-offset: 32px;
191
}
192
StScrollView.hfade {
194
-st-hfade-offset: 32px;
195
}
196
StScrollBar {
198
padding: 0;
199
}
200
StScrollView StScrollBar {
202
min-width: 16px;
203
min-height: 16px;
204
}
205
StScrollBar StBin#trough {
207
margin: 4px;
208
border-radius: 100px;
209
background-color: rgba(0, 0, 0, 0.12);
210
}
211
StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
213
transition-duration: 100ms;
214
border-radius: 100px;
215
background-color: rgba(0, 0, 0, 0.38);
216
margin: 4px;
217
}
218
StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover {
220
background-color: rgba(0, 0, 0, 0.54);
221
}
222
StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
224
background-color: rgba(0, 0, 0, 0.87);
225
}
226
#overview StScrollBar StBin#trough, #screenShieldNotifications StScrollBar StBin#trough {
228
background-color: rgba(255, 255, 255, 0.12);
229
}
230
#overview StScrollBar StButton#vhandle, #screenShieldNotifications StScrollBar StButton#vhandle, #overview StScrollBar StButton#hhandle, #screenShieldNotifications StScrollBar StButton#hhandle {
232
background-color: rgba(255, 255, 255, 0.5);
233
}
234
#overview StScrollBar StButton#vhandle:hover, #screenShieldNotifications StScrollBar StButton#vhandle:hover, #overview StScrollBar StButton#hhandle:hover, #screenShieldNotifications StScrollBar StButton#hhandle:hover {
236
background-color: rgba(255, 255, 255, 0.7);
237
}
238
#overview StScrollBar StButton#vhandle:active, #screenShieldNotifications StScrollBar StButton#vhandle:active, #overview StScrollBar StButton#hhandle:active, #screenShieldNotifications StScrollBar StButton#hhandle:active {
240
background-color: white;
241
}
242
/* Slider */
244
.slider {
245
height: 20px;
246
color: #4285F4;
247
-barlevel-height: 2px;
248
-barlevel-background-color: rgba(0, 0, 0, 0.26);
249
-barlevel-border-color: transparent;
250
-barlevel-active-background-color: #4285F4;
251
-barlevel-active-border-color: transparent;
252
-barlevel-overdrive-color: #EA4335;
253
-barlevel-overdrive-border-color: transparent;
254
-barlevel-overdrive-separator-width: 2px;
255
-barlevel-border-width: 0;
256
-slider-handle-radius: 6px;
257
}
258
/* Check Boxes */
260
.check-box * {
261
min-height: 16px;
262
padding: 8px 0;
263
}
264
.check-box StBoxLayout {
266
spacing: 8px;
267
}
268
.check-box StBin {
270
transition-duration: 100ms;
271
width: 24px;
272
height: 24px;
273
padding: 4px;
274
border-radius: 100px;
275
background-image: url("assets/checkbox-off.svg");
276
}
277
.check-box:focus StBin {
279
background-image: url("assets/checkbox-off.svg");
280
}
281
.check-box:hover StBin {
283
background-color: rgba(0, 0, 0, 0.08);
284
}
285
.check-box:active StBin {
287
transition-duration: 200ms;
288
background-color: rgba(0, 0, 0, 0.2);
289
}
290
.check-box:checked StBin {
292
background-image: url("assets/checkbox.svg");
293
}
294
.check-box:focus:checked StBin {
296
background-image: url("assets/checkbox.svg");
297
}
298
.check-box:hover:checked StBin {
300
background-color: rgba(66, 133, 244, 0.08);
301
}
302
.check-box:active:checked StBin {
304
background-color: rgba(66, 133, 244, 0.2);
305
}
306
/* Switches */
308
.toggle-switch {
309
width: 40px;
310
height: 20px;
311
background-size: contain;
312
}
313
.toggle-switch-us {
315
background-image: url("assets/toggle-off.svg");
316
}
317
.toggle-switch-us:checked {
319
background-image: url("assets/toggle-on.svg");
320
}
321
.toggle-switch-intl {
323
background-image: url("assets/toggle-off.svg");
324
}
325
.toggle-switch-intl:checked {
327
background-image: url("assets/toggle-on.svg");
328
}
329
/* links */
331
.shell-link {
332
transition-duration: 100ms;
333
border-radius: 4px;
334
color: #4285F4;
335
}
336
.shell-link:hover {
338
color: #4285F4;
339
background-color: rgba(66, 133, 244, 0.08);
340
}
341
.shell-link:active {
343
transition-duration: 200ms;
344
color: #4285F4;
345
background-color: rgba(66, 133, 244, 0.2);
346
}
347
/* Modal Dialogs */
349
.headline {
350
font-size: 15pt;
351
font-weight: 500;
352
}
353
.lightbox {
355
background-color: black;
356
}
357
.flashspot {
359
background-color: white;
360
}
361
.modal-dialog {
363
border-radius: 4px;
364
color: rgba(0, 0, 0, 0.87);
365
background-color: #FFFFFF;
366
border: none;
367
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
368
}
369
.modal-dialog .modal-dialog-content-box {
371
padding: 24px;
372
}
373
.modal-dialog .run-dialog-entry {
375
width: 20em;
376
margin-bottom: 0;
377
}
378
.modal-dialog .run-dialog-error-box {
380
padding-top: 16px;
381
spacing: 6px;
382
}
383
.modal-dialog .run-dialog-button-box {
385
padding-top: 1em;
386
}
387
.modal-dialog .run-dialog-label {
389
font-size: 1em;
390
font-weight: normal;
391
color: rgba(0, 0, 0, 0.54);
392
padding-bottom: .4em;
393
}
394
.mount-dialog-subject,
396
.end-session-dialog-subject {
397
font-size: 15pt;
398
font-weight: 500;
399
}
400
/* Message Dialog */
402
.message-dialog-main-layout {
403
padding: 12px 20px 0;
404
spacing: 12px;
405
}
406
.message-dialog-content {
408
max-width: 28em;
409
spacing: 20px;
410
}
411
.message-dialog-icon {
413
min-width: 48px;
414
icon-size: 48px;
415
}
416
.message-dialog-title {
418
font-weight: bold;
419
}
420
.message-dialog-subtitle {
422
color: rgba(0, 0, 0, 0.54);
423
font-weight: bold;
424
}
425
/* End Session Dialog */
427
.end-session-dialog {
428
spacing: 42px;
429
border: none;
430
}
431
.end-session-dialog-list {
433
padding-top: 20px;
434
}
435
.end-session-dialog-layout {
437
padding-left: 17px;
438
}
439
.end-session-dialog-layout:rtl {
441
padding-right: 17px;
442
}
443
.end-session-dialog-description {
445
width: 28em;
446
padding-bottom: 10px;
447
}
448
.end-session-dialog-description:rtl {
450
text-align: right;
451
}
452
.end-session-dialog-warning {
454
width: 28em;
455
color: #FBBC05;
456
padding-top: 6px;
457
}
458
.end-session-dialog-warning:rtl {
460
text-align: right;
461
}
462
.end-session-dialog-logout-icon {
464
border-radius: 9999px;
465
width: 48px;
466
height: 48px;
467
background-size: contain;
468
}
469
.end-session-dialog-shutdown-icon {
471
color: rgba(0, 0, 0, 0.38);
472
width: 48px;
473
height: 48px;
474
}
475
.end-session-dialog-inhibitor-layout {
477
spacing: 16px;
478
max-height: 200px;
479
padding-right: 65px;
480
padding-left: 65px;
481
}
482
.end-session-dialog-session-list,
484
.end-session-dialog-app-list {
485
spacing: 1em;
486
}
487
.end-session-dialog-list-header {
489
font-weight: bold;
490
}
491
.end-session-dialog-list-header:rtl {
493
text-align: right;
494
}
495
.end-session-dialog-app-list-item,
497
.end-session-dialog-session-list-item {
498
spacing: 1em;
499
}
500
.end-session-dialog-app-list-item-name,
502
.end-session-dialog-session-list-item-name {
503
font-weight: bold;
504
}
505
.end-session-dialog-app-list-item-description {
507
color: rgba(0, 0, 0, 0.54);
508
font-size: 1em;
509
}
510
/* ShellMountOperation Dialogs */
512
.shell-mount-operation-icon {
513
icon-size: 48px;
514
}
515
.mount-dialog {
517
spacing: 24px;
518
}
519
.mount-dialog .message-dialog-title {
521
padding-top: 10px;
522
padding-left: 17px;
523
padding-bottom: 6px;
524
max-width: 34em;
525
}
526
.mount-dialog .message-dialog-title:rtl {
528
padding-left: 0px;
529
padding-right: 17px;
530
}
531
.mount-dialog .message-dialog-body {
533
padding-left: 17px;
534
width: 28em;
535
}
536
.mount-dialog .message-dialog-body:rtl {
538
padding-left: 0px;
539
padding-right: 17px;
540
}
541
.mount-dialog-app-list {
543
max-height: 200px;
544
padding-top: 24px;
545
padding-left: 49px;
546
padding-right: 32px;
547
}
548
.mount-dialog-app-list:rtl {
550
padding-right: 49px;
551
padding-left: 32px;
552
}
553
.mount-dialog-app-list-item {
555
color: rgba(0, 0, 0, 0.87);
556
}
557
.mount-dialog-app-list-item:hover {
559
color: rgba(0, 0, 0, 0.87);
560
}
561
.mount-dialog-app-list-item:ltr {
563
padding-right: 1em;
564
}
565
.mount-dialog-app-list-item:rtl {
567
padding-left: 1em;
568
}
569
.mount-dialog-app-list-item-icon:ltr {
571
padding-right: 17px;
572
}
573
.mount-dialog-app-list-item-icon:rtl {
575
padding-left: 17px;
576
}
577
.mount-dialog-app-list-item-name {
579
font-size: 1em;
580
}
581
/* Password or Authentication Dialog */
583
.prompt-dialog {
584
width: 34em;
585
border: none;
586
}
587
.prompt-dialog .message-dialog-main-layout {
589
spacing: 24px;
590
padding: 10px;
591
}
592
.prompt-dialog .message-dialog-content {
594
spacing: 16px;
595
}
596
.prompt-dialog .message-dialog-title {
598
font-size: 15pt;
599
font-weight: 500;
600
color: rgba(0, 0, 0, 0.87);
601
}
602
.prompt-dialog-description:rtl {
604
text-align: right;
605
}
606
.prompt-dialog-password-box {
608
spacing: 1em;
609
padding-bottom: 1em;
610
}
611
.prompt-dialog-error-label {
613
font-size: 1em;
614
color: #EA4335;
615
padding-bottom: 8px;
616
}
617
.prompt-dialog-info-label {
619
font-size: 1em;
620
padding-bottom: 8px;
621
}
622
.hidden {
624
color: rgba(0, 0, 0, 0);
625
}
626
.prompt-dialog-null-label {
628
font-size: 1em;
629
padding-bottom: 8px;
630
}
631
/* Polkit Dialog */
633
.polkit-dialog-user-layout {
634
padding-left: 10px;
635
spacing: 10px;
636
}
637
.polkit-dialog-user-layout:rtl {
639
padding-left: 0px;
640
padding-right: 10px;
641
}
642
.polkit-dialog-user-root-label {
644
color: #FBBC05;
645
}
646
.polkit-dialog-user-icon {
648
border-radius: 9999px;
649
background-size: contain;
650
width: 48px;
651
height: 48px;
652
}
653
/* Audio selection dialog */
655
.audio-device-selection-dialog {
656
spacing: 30px;
657
}
658
.audio-selection-content {
660
spacing: 20px;
661
padding: 24px;
662
}
663
.audio-selection-title {
665
font-weight: bold;
666
text-align: center;
667
}
668
.audio-selection-box {
670
spacing: 20px;
671
}
672
.audio-selection-device {
674
border: 1px solid rgba(0, 0, 0, 0.12);
675
border-radius: 4px;
676
}
677
.audio-selection-device:active, .audio-selection-device:hover, .audio-selection-device:focus {
679
background-color: #4285F4;
680
}
681
.audio-selection-device-box {
683
padding: 20px;
684
spacing: 20px;
685
}
686
.audio-selection-device-icon {
688
icon-size: 64px;
689
}
690
/* Access Dialog */
692
.access-dialog {
693
spacing: 30px;
694
}
695
/* Geolocation Dialog */
697
.geolocation-dialog {
698
spacing: 30px;
699
}
700
/* Extension Dialog */
702
.extension-dialog .message-dialog-main-layout {
703
spacing: 24px;
704
padding: 10px;
705
}
706
.extension-dialog .message-dialog-title {
708
color: rgba(0, 0, 0, 0.54);
709
}
710
/* Inhibit-Shortcuts Dialog */
712
.inhibit-shortcuts-dialog {
713
spacing: 30px;
714
}
715
/* Network Agent Dialog */
717
.network-dialog-secret-table {
718
spacing-rows: 15px;
719
spacing-columns: 1em;
720
}
721
.keyring-dialog-control-table {
723
spacing-rows: 15px;
724
spacing-columns: 1em;
725
}
726
/* Popovers/Menus */
728
.popup-menu {
729
min-width: 200px;
730
}
731
.popup-menu .popup-sub-menu {
733
padding-bottom: 0;
734
background-color: rgba(0, 0, 0, 0.04);
735
box-shadow: 0 0 transparent;
736
}
737
.popup-menu .popup-menu-content {
739
padding: 8px 0;
740
}
741
.popup-menu .popup-menu-item {
743
spacing: 8px;
744
transition-duration: 100ms;
745
}
746
.popup-menu .popup-menu-item:ltr {
748
padding: 0.4em 24px 0.4em 0;
749
}
750
.popup-menu .popup-menu-item:rtl {
752
padding: 0.4em 0 0.4em 24px;
753
}
754
.popup-menu .popup-menu-item:checked {
756
background-color: rgba(66, 133, 244, 0.32);
757
box-shadow: 0 0 transparent;
758
font-weight: normal;
759
}
760
.popup-menu .popup-menu-item:checked.selected {
762
background-color: rgba(66, 133, 244, 0.4);
763
}
764
.popup-menu .popup-menu-item:checked:active {
766
background-color: rgba(66, 133, 244, 0.6);
767
}
768
.popup-menu .popup-menu-item.selected {
770
background-color: rgba(0, 0, 0, 0.08);
771
color: rgba(0, 0, 0, 0.87);
772
transition-duration: 0ms;
773
}
774
.popup-menu .popup-menu-item:active {
776
background-color: rgba(0, 0, 0, 0.2);
777
color: rgba(0, 0, 0, 0.87);
778
transition-duration: 200ms;
779
}
780
.popup-menu .popup-menu-item.selected:active {
782
color: rgba(0, 0, 0, 0.87);
783
}
784
.popup-menu .popup-menu-item:insensitive {
786
color: rgba(0, 0, 0, 0.38);
787
}
788
.popup-menu .popup-inactive-menu-item {
790
color: rgba(0, 0, 0, 0.87);
791
}
792
.popup-menu .popup-inactive-menu-item:insensitive {
794
color: rgba(0, 0, 0, 0.38);
795
}
796
.popup-menu.panel-menu {
798
-boxpointer-gap: 4px;
799
margin-bottom: 1.75em;
800
}
801
.popup-menu-ornament {
803
text-align: right;
804
width: 16px;
805
height: 16px;
806
}
807
.popup-menu-boxpointer,
809
.candidate-popup-boxpointer {
810
-arrow-border-radius: 0;
811
-arrow-background-color: transparent;
812
-arrow-border-width: 0;
813
-arrow-border-color: transparent;
814
-arrow-base: 0;
815
-arrow-rise: 0;
816
-arrow-box-shadow: none;
817
margin: 5px 8px 8px;
818
background-color: #FFFFFF;
819
border-radius: 4px;
820
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
821
}
822
.popup-separator-menu-item {
824
height: 1px;
825
margin: 8px 40px;
826
background-color: transparent;
827
border-color: rgba(0, 0, 0, 0.12);
828
border-bottom-width: 1px;
829
border-bottom-style: solid;
830
}
831
.background-menu {
833
-boxpointer-gap: 4px;
834
-arrow-rise: 0;
835
}
836
/* fallback menu
838
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
839
app menu inside the main app window itself rather than the top bar
840
*/
841
/* OSD */
842
.osd-window {
843
text-align: center;
844
font-weight: bold;
845
spacing: 1em;
846
margin: 32px;
847
min-width: 64px;
848
min-height: 64px;
849
}
850
.osd-window .osd-monitor-label {
852
font-size: 45px;
853
font-weight: 400;
854
}
855
.osd-window .level {
857
height: 8px;
858
-barlevel-height: 8px;
859
-barlevel-background-color: rgba(0, 0, 0, 0.12);
860
-barlevel-active-background-color: #4285F4;
861
-barlevel-overdrive-color: #EA4335;
862
-barlevel-overdrive-separator-width: 2px;
863
}
864
/* Pad OSD */
866
.pad-osd-window {
867
padding: 32px;
868
background-color: rgba(0, 0, 0, 0.6);
869
}
870
.pad-osd-window .pad-osd-title-box {
872
spacing: 12px;
873
}
874
.pad-osd-window .pad-osd-title-menu-box {
876
spacing: 6px;
877
}
878
.combo-box-label {
880
width: 15em;
881
}
882
/* App Switcher */
884
.switcher-popup {
885
padding: 8px;
886
spacing: 16px;
887
}
888
.switcher-list-item-container {
890
spacing: 8px;
891
}
892
.switcher-list .item-box {
894
transition-duration: 100ms;
895
padding: 8px;
896
border-radius: 4px;
897
}
898
.switcher-list .item-box:outlined {
900
padding: 8px;
901
border: none;
902
background-color: rgba(0, 0, 0, 0.12);
903
color: rgba(0, 0, 0, 0.87);
904
}
905
.switcher-list .item-box:selected {
907
background-color: rgba(66, 133, 244, 0.32);
908
color: rgba(0, 0, 0, 0.87);
909
}
910
.switcher-list .thumbnail-box {
912
padding: 2px;
913
spacing: 4px;
914
}
915
.switcher-list .thumbnail {
917
width: 256px;
918
}
919
.switcher-list .separator {
921
width: 1px;
922
background: rgba(0, 0, 0, 0.12);
923
}
924
.switcher-arrow {
926
transition-duration: 100ms;
927
border-color: rgba(0, 0, 0, 0);
928
color: rgba(0, 0, 0, 0.54);
929
}
930
.switcher-arrow:highlighted {
932
color: rgba(0, 0, 0, 0.87);
933
}
934
.input-source-switcher-symbol {
936
font-size: 45px;
937
font-weight: 400;
938
width: 96px;
939
height: 96px;
940
}
941
/* Window Cycler */
943
.cycler-highlight {
944
border: 4px solid #4285F4;
945
}
946
/* Workspace Switcher */
948
.workspace-switcher-group {
949
padding: 8px;
950
}
951
.workspace-switcher {
953
background: transparent;
954
border: 0px;
955
border-radius: 0px;
956
padding: 0px;
957
spacing: 8px;
958
}
959
.ws-switcher-active-up, .ws-switcher-active-down {
961
height: 48px;
962
background-color: #4285F4;
963
color: white;
964
background-size: 32px;
965
border-radius: 4px;
966
}
967
.ws-switcher-box {
969
height: 48px;
970
border: none;
971
background: rgba(0, 0, 0, 0.12);
972
border-radius: 4px;
973
}
974
.osd-window,
976
.resize-popup,
977
.switcher-list, .workspace-switcher-container {
978
color: rgba(0, 0, 0, 0.87);
979
background-color: #FFFFFF;
980
border: none;
981
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
982
border-radius: 4px;
983
padding: 12px;
984
}
985
/* Tiled window previews */
987
.tile-preview {
988
background-color: rgba(123, 170, 247, 0.3);
989
border: 1px solid #7BAAF7;
990
}
991
.tile-preview-left.on-primary {
993
border-radius: 0;
994
}
995
.tile-preview-right.on-primary {
997
border-radius: 0;
998
}
999
.tile-preview-left.tile-preview-right.on-primary {
1001
border-radius: 0;
1002
}
1003
/* TOP BAR */
1005
#panel {
1006
background-color: #212121;
1007
/* transition from solid to transparent */
1008
transition-duration: 250ms;
1009
font-weight: bold;
1010
height: 28px;
1011
font-feature-settings: "tnum";
1012
}
1013
#panel:overview, #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
1015
background-color: transparent;
1016
}
1017
#panel #panelLeft, #panel #panelCenter {
1019
spacing: 0;
1020
}
1021
#panel .panel-corner {
1023
-panel-corner-radius: 0;
1024
-panel-corner-background-color: transparent;
1025
-panel-corner-border-width: 0;
1026
-panel-corner-border-color: transparent;
1027
}
1028
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
1030
-panel-corner-border-color: transparent;
1031
}
1032
#panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
1034
-panel-corner-radius: 0;
1035
-panel-corner-background-color: transparent;
1036
-panel-corner-border-color: transparent;
1037
}
1038
#panel .panel-button {
1040
-natural-hpadding: 12px;
1041
-minimum-hpadding: 6px;
1042
font-weight: bold;
1043
color: rgba(255, 255, 255, 0.7);
1044
text-shadow: none;
1045
transition-duration: 100ms;
1046
}
1047
#panel .panel-button .app-menu-icon {
1049
-st-icon-style: symbolic;
1050
margin-left: 4px;
1051
margin-right: 4px;
1052
}
1053
#panel .panel-button .system-status-icon,
1055
#panel .panel-button .app-menu-icon > StIcon,
1056
#panel .panel-button .popup-menu-arrow {
1057
icon-shadow: none;
1058
}
1059
#panel .panel-button:hover {
1061
color: white;
1062
text-shadow: none;
1063
}
1064
#panel .panel-button:hover .system-status-icon,
1066
#panel .panel-button:hover .app-menu-icon > StIcon,
1067
#panel .panel-button:hover .popup-menu-arrow {
1068
icon-shadow: none;
1069
}
1070
#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
1072
background-color: rgba(33, 33, 33, 0.01);
1073
box-shadow: inset 0 -2px 0px white;
1074
color: white;
1075
}
1076
#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 {
1078
icon-shadow: none;
1079
}
1080
#panel .panel-button .system-status-icon {
1082
icon-size: 1.14286em;
1083
padding: 0 4px;
1084
}
1085
.unlock-screen #panel .panel-button,
1087
.login-screen #panel .panel-button,
1088
.lock-screen #panel .panel-button {
1089
color: rgba(255, 255, 255, 0.7);
1090
}
1091
.unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
1093
.login-screen #panel .panel-button:focus,
1094
.login-screen #panel .panel-button:hover,
1095
.login-screen #panel .panel-button:active,
1096
.lock-screen #panel .panel-button:focus,
1097
.lock-screen #panel .panel-button:hover,
1098
.lock-screen #panel .panel-button:active {
1099
color: white;
1100
}
1101
#panel .panel-status-indicators-box,
1103
#panel .panel-status-menu-box {
1104
spacing: 2px;
1105
}
1106
#panel .power-status.panel-status-indicators-box {
1108
spacing: 0;
1109
}
1110
#panel .screencast-indicator {
1112
color: #FBBC05;
1113
}
1114
#panel .remote-access-indicator {
1116
color: #FBBC05;
1117
}
1118
#panel.solid {
1120
background-color: #212121;
1121
/* transition from transparent to solid */
1122
transition-duration: 250ms;
1123
background-gradient-direction: none;
1124
text-shadow: none;
1125
}
1126
#panel.solid:overview {
1128
background-color: transparent;
1129
}
1130
#panel.solid .panel-corner {
1132
-panel-corner-background-color: #212121;
1133
}
1134
#panel.solid .panel-button {
1136
color: rgba(255, 255, 255, 0.7);
1137
text-shadow: none;
1138
}
1139
#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 {
1141
color: white;
1142
}
1143
#panel.solid .system-status-icon,
1145
#panel.solid .app-menu-icon > StIcon,
1146
#panel.solid .popup-menu-arrow {
1147
icon-shadow: none;
1148
}
1149
#calendarArea {
1151
padding: 8px 16px;
1152
}
1153
.calendar {
1155
margin-bottom: 0;
1156
}
1157
.calendar,
1159
.datemenu-today-button,
1160
.datemenu-displays-box,
1161
.message-list-sections {
1162
margin: 0 8px;
1163
}
1164
.datemenu-calendar-column {
1166
spacing: 8px;
1167
}
1168
.datemenu-displays-section {
1170
padding-bottom: 0;
1171
}
1172
.datemenu-displays-box {
1174
spacing: 8px;
1175
}
1176
.datemenu-calendar-column {
1178
border: 0 solid rgba(0, 0, 0, 0.12);
1179
}
1180
.datemenu-calendar-column:ltr {
1182
border-left-width: 0;
1183
}
1184
.datemenu-calendar-column:rtl {
1186
border-right-width: 0;
1187
}
1188
.datemenu-today-button,
1190
.world-clocks-button,
1191
.weather-button,
1192
.events-section-title {
1193
min-height: 20px;
1194
padding: 4px 8px;
1195
border-radius: 4px;
1196
}
1197
.datemenu-today-button {
1199
min-height: 48px;
1200
}
1201
.message-list-section-list:ltr {
1203
padding-left: 0;
1204
}
1205
.message-list-section-list:rtl {
1207
padding-right: 0;
1208
}
1209
.datemenu-today-button,
1211
.world-clocks-button,
1212
.weather-button,
1213
.events-section-title {
1214
transition-duration: 100ms;
1215
}
1216
.datemenu-today-button:hover, .datemenu-today-button:focus,
1218
.world-clocks-button:hover,
1219
.world-clocks-button:focus,
1220
.weather-button:hover,
1221
.weather-button:focus,
1222
.events-section-title:hover,
1223
.events-section-title:focus {
1224
color: rgba(0, 0, 0, 0.87);
1225
background-color: rgba(0, 0, 0, 0.08);
1226
}
1227
.datemenu-today-button:active,
1229
.world-clocks-button:active,
1230
.weather-button:active,
1231
.events-section-title:active {
1232
transition-duration: 200ms;
1233
color: rgba(0, 0, 0, 0.87);
1234
background-color: rgba(0, 0, 0, 0.2);
1235
}
1236
.datemenu-today-button .date-label {
1238
font-size: 18pt;
1239
font-weight: 400;
1240
}
1241
.world-clocks-header,
1243
.weather-header,
1244
.events-section-title {
1245
color: rgba(0, 0, 0, 0.54);
1246
font-weight: bold;
1247
}
1248
.weather-header.location {
1250
font-weight: normal;
1251
font-size: 1em;
1252
}
1253
.world-clocks-grid,
1255
.weather-grid {
1256
spacing-rows: 0.4em;
1257
spacing-columns: 0.8em;
1258
}
1259
.weather-box {
1261
spacing: 0.4em;
1262
}
1263
.world-clocks-city {
1265
font-weight: bold;
1266
font-size: 1em;
1267
}
1268
.world-clocks-time {
1270
color: rgba(0, 0, 0, 0.54);
1271
font-feature-settings: "tnum";
1272
font-size: 1em;
1273
}
1274
.world-clocks-timezone {
1276
color: rgba(0, 0, 0, 0.38);
1277
font-feature-settings: "tnum";
1278
font-size: 1em;
1279
}
1280
.weather-forecast-icon {
1282
icon-size: 2.28571em;
1283
}
1284
.weather-forecast-time {
1286
color: rgba(0, 0, 0, 0.54);
1287
font-size: 9pt;
1288
font-weight: 400;
1289
}
1290
.calendar-month-label {
1292
transition-duration: 100ms;
1293
height: 16px;
1294
margin: 2px;
1295
padding: 6px 16px;
1296
border-radius: 4px;
1297
color: rgba(0, 0, 0, 0.87);
1298
font-weight: bold;
1299
text-align: center;
1300
}
1301
.calendar-month-label:focus {
1303
background-color: rgba(0, 0, 0, 0.12);
1304
}
1305
.pager-button {
1307
transition-duration: 100ms;
1308
width: 28px;
1309
height: 28px;
1310
margin: 2px;
1311
border-radius: 100px;
1312
background-color: transparent;
1313
color: rgba(0, 0, 0, 0.54);
1314
}
1315
.pager-button:hover, .pager-button:focus {
1317
background-color: rgba(0, 0, 0, 0.08);
1318
color: rgba(0, 0, 0, 0.87);
1319
}
1320
.pager-button:active {
1322
background-color: rgba(0, 0, 0, 0.2);
1323
color: rgba(0, 0, 0, 0.87);
1324
transition-duration: 200ms;
1325
}
1326
.calendar-change-month-back StIcon, .calendar-change-month-forward StIcon {
1328
icon-size: 1.14286em;
1329
}
1330
.calendar-day-base {
1332
transition-duration: 100ms;
1333
font-size: 9pt;
1334
font-weight: 400;
1335
text-align: center;
1336
width: 28px;
1337
height: 28px;
1338
padding: 0;
1339
margin: 2px;
1340
border-radius: 100px;
1341
font-feature-settings: "tnum";
1342
}
1343
.calendar-day-base:hover, .calendar-day-base:focus {
1345
background-color: rgba(0, 0, 0, 0.08);
1346
}
1347
.calendar-day-base:active {
1349
transition-duration: 200ms;
1350
color: inherit;
1351
background-color: rgba(0, 0, 0, 0.2);
1352
border-color: transparent;
1353
}
1354
.calendar-day-base:selected {
1356
color: rgba(0, 0, 0, 0.87);
1357
background-color: rgba(66, 133, 244, 0.32);
1358
border-color: transparent;
1359
}
1360
.calendar-day-base.calendar-day-heading {
1362
width: 28px;
1363
height: 21px;
1364
margin-top: 2px;
1365
padding: 7px 0 0;
1366
border-radius: 100px;
1367
background-color: transparent;
1368
color: rgba(0, 0, 0, 0.38);
1369
font-size: 9pt;
1370
font-weight: 400;
1371
font-weight: bold;
1372
text-align: center;
1373
}
1374
.calendar-day {
1376
border-width: 0;
1377
}
1378
.calendar-day-top {
1380
border-top-width: 0;
1381
}
1382
.calendar-day-left {
1384
border-left-width: 0;
1385
}
1386
.calendar-nonwork-day {
1388
color: rgba(0, 0, 0, 0.87);
1389
}
1390
.calendar-today {
1392
font-weight: bold !important;
1393
border: none;
1394
}
1395
.calendar-day-with-events {
1397
color: #4285F4;
1398
font-weight: normal;
1399
text-decoration: underline;
1400
background-image: none;
1401
}
1402
.calendar-other-month-day {
1404
color: rgba(0, 0, 0, 0.26);
1405
opacity: 0.5;
1406
}
1407
.calendar-week-number {
1409
width: 28px;
1410
height: 21px;
1411
margin: 2px;
1412
padding: 7px 0 0;
1413
border-radius: 100px;
1414
background-color: transparent;
1415
color: rgba(0, 0, 0, 0.38);
1416
font-size: inherit;
1417
font-weight: bold;
1418
text-align: center;
1419
}
1420
/* Message list */
1422
.message-list {
1423
width: 420px;
1424
}
1425
.message-list-clear-button.button {
1427
background-color: transparent;
1428
margin: 8px 8px 0;
1429
}
1430
.message-list-clear-button.button:hover, .message-list-clear-button.button:focus {
1432
background-color: rgba(0, 0, 0, 0.08);
1433
}
1434
.message-list-clear-button.button:active {
1436
background-color: rgba(0, 0, 0, 0.2);
1437
}
1438
.message-list-sections {
1440
spacing: 8px;
1441
}
1442
.message-list-section,
1444
.message-list-section-list {
1445
spacing: 8px;
1446
}
1447
.message {
1449
transition-duration: 100ms;
1450
min-height: 56px;
1451
background-color: transparent;
1452
border-radius: 4px;
1453
}
1454
.message:hover, .message:focus {
1456
background-color: rgba(0, 0, 0, 0.08);
1457
}
1458
.message:active {
1460
transition-duration: 200ms;
1461
background-color: rgba(0, 0, 0, 0.2);
1462
}
1463
.message-icon-bin {
1465
padding: 8px 0px 8px 8px;
1466
}
1467
.message-icon-bin:rtl {
1469
padding: 8px 8px 8px 0px;
1470
}
1471
.message-icon-bin > StIcon {
1473
color: rgba(0, 0, 0, 0.87);
1474
icon-size: 1.14286em;
1475
-st-icon-style: requested;
1476
margin: 4px 0px 4px 4px;
1477
}
1478
.message-icon-bin > StIcon:rtl {
1480
margin: 4px 4px 4px 0px;
1481
}
1482
.message-icon-bin > .fallback-window-icon {
1484
width: 1.14286em;
1485
height: 1.14286em;
1486
}
1487
.message-secondary-bin {
1489
padding: 0 8px;
1490
}
1491
.message-secondary-bin > .event-time {
1493
min-height: 22px;
1494
padding-top: 2px;
1495
color: rgba(0, 0, 0, 0.54);
1496
font-size: 1em;
1497
/* HACK: the label should be baseline-aligned with a 1em label,
1498
fake this with some bottom padding */
1499
padding-bottom: 0;
1500
}
1501
.message-secondary-bin > StIcon {
1503
icon-size: 1.14286em;
1504
}
1505
.message-title {
1507
min-height: 22px;
1508
padding-top: 2px;
1509
color: rgba(0, 0, 0, 0.87);
1510
font-weight: bold;
1511
font-size: 1em;
1512
}
1513
.message-content {
1515
min-height: 40px;
1516
padding: 8px;
1517
color: rgba(0, 0, 0, 0.54);
1518
font-size: 1em;
1519
}
1520
.message-content * > StIcon {
1522
transition-duration: 100ms;
1523
icon-size: 16px;
1524
border-radius: 16px;
1525
padding: 4px;
1526
color: rgba(0, 0, 0, 0.54);
1527
}
1528
/* FIXME: how do you do this in sass? */
1530
.message-content *:hover > StIcon,
1531
.message-content *:focus > StIcon {
1532
color: rgba(0, 0, 0, 0.87);
1533
background-color: rgba(0, 0, 0, 0.08);
1534
}
1535
.message-content *:active > StIcon {
1537
transition-duration: 200ms;
1538
color: rgba(0, 0, 0, 0.87);
1539
background-color: rgba(0, 0, 0, 0.2);
1540
}
1541
.message-media-control {
1543
transition-duration: 100ms;
1544
margin: 16px 0;
1545
padding: 8px;
1546
border-radius: 100px;
1547
color: rgba(0, 0, 0, 0.54);
1548
}
1549
.message-media-control:hover, .message-media-control:focus {
1551
color: rgba(0, 0, 0, 0.87);
1552
background-color: rgba(0, 0, 0, 0.08);
1553
}
1554
.message-media-control:active {
1556
color: rgba(0, 0, 0, 0.87);
1557
background-color: rgba(0, 0, 0, 0.2);
1558
transition-duration: 200ms;
1559
}
1560
.message-media-control:insensitive {
1562
color: rgba(0, 0, 0, 0.26);
1563
}
1564
.message-media-control:last-child:ltr {
1566
margin-right: 16px;
1567
padding-right: 8px;
1568
}
1569
.message-media-control:last-child:rtl {
1571
margin-left: 16px;
1572
padding-left: 8px;
1573
}
1574
.media-message-cover-icon {
1576
icon-size: 32px !important;
1577
margin: 8px 0px 8px 4px !important;
1578
}
1579
.media-message-cover-icon:rtl {
1581
margin: 8px 4px 8px 0px !important;
1582
}
1583
.media-message-cover-icon.fallback {
1585
icon-size: 16px !important;
1586
padding: 8px;
1587
border: none;
1588
border-radius: 4px;
1589
background-color: rgba(0, 0, 0, 0.12);
1590
color: rgba(0, 0, 0, 0.38);
1591
}
1592
.system-switch-user-submenu-icon {
1594
icon-size: 16px;
1595
padding: 0 4px;
1596
}
1597
#appMenu {
1599
spinner-image: url("process-working.svg");
1600
spacing: 4px;
1601
}
1602
#appMenu .label-shadow {
1604
color: transparent;
1605
}
1606
.app-menu,
1608
.app-well-menu {
1609
max-width: 27.25em;
1610
}
1611
.aggregate-menu {
1613
min-width: 280px;
1614
}
1615
.aggregate-menu .popup-menu-icon {
1617
padding: 0 4px;
1618
}
1619
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr {
1621
/* 8px spacing + 2*4px padding */
1622
padding-left: 16px;
1623
margin-left: 1.14286em;
1624
}
1625
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl {
1627
/* 8px spacing + 2*4px padding */
1628
padding-right: 16px;
1629
margin-right: 1.14286em;
1630
}
1631
.system-menu-action {
1633
-st-icon-style: symbolic;
1634
color: rgba(0, 0, 0, 0.54);
1635
border-radius: 100px;
1636
/* wish we could do 50% */
1637
padding: 12px;
1638
border: none;
1639
transition-duration: 100ms;
1640
}
1641
.system-menu-action:hover, .system-menu-action:focus {
1643
background-color: rgba(0, 0, 0, 0.08);
1644
color: rgba(0, 0, 0, 0.87);
1645
border: none;
1646
padding: 12px;
1647
}
1648
.system-menu-action:active {
1650
background-color: rgba(0, 0, 0, 0.2);
1651
color: rgba(0, 0, 0, 0.87);
1652
transition-duration: 200ms;
1653
}
1654
.system-menu-action > StIcon {
1656
icon-size: 16px;
1657
}
1658
.ripple-box {
1660
width: 48px;
1661
height: 48px;
1662
border-radius: 0 0 48px 0;
1663
background-color: rgba(255, 255, 255, 0.3);
1664
background-image: none;
1665
background-size: auto;
1666
box-shadow: none;
1667
}
1668
.ripple-box:rtl {
1670
border-radius: 0 0 0 48px;
1671
background-image: none;
1672
}
1673
.popup-menu-arrow {
1675
width: 16px;
1676
height: 16px;
1677
icon-size: 1.14286em;
1678
}
1679
.popup-menu-icon {
1681
icon-size: 1.14286em;
1682
}
1683
.window-close {
1685
background-color: transparent;
1686
border-radius: 0;
1687
border: none;
1688
box-shadow: none;
1689
color: transparent;
1690
height: 32px;
1691
width: 32px;
1692
-shell-close-overlap: 16px;
1693
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1694
background-image: url("assets/window-close.svg");
1695
background-size: 32px;
1696
}
1697
.window-close:hover {
1699
background-color: transparent;
1700
border-color: transparent;
1701
color: transparent;
1702
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1703
background-image: url("assets/window-close.svg");
1704
}
1705
.window-close:active {
1707
background-color: transparent;
1708
border-color: transparent;
1709
color: transparent;
1710
background-image: url("assets/window-close-active.svg");
1711
}
1712
.window-close:rtl {
1714
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1715
}
1716
.window-close:rtl:hover {
1718
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1719
}
1720
/* NETWORK DIALOGS */
1722
.nm-dialog {
1723
max-height: 34em;
1724
min-height: 31em;
1725
min-width: 32em;
1726
}
1727
.nm-dialog-content {
1729
spacing: 20px;
1730
padding: 24px;
1731
}
1732
.nm-dialog-header-hbox {
1734
spacing: 10px;
1735
}
1736
.nm-dialog-airplane-box {
1738
spacing: 12px;
1739
}
1740
.nm-dialog-airplane-headline {
1742
font-weight: bold;
1743
text-align: center;
1744
}
1745
.nm-dialog-airplane-text {
1747
color: rgba(0, 0, 0, 0.87);
1748
}
1749
.nm-dialog-header-icon {
1751
icon-size: 32px;
1752
}
1753
.nm-dialog-scroll-view {
1755
border: none;
1756
}
1757
.nm-dialog-header {
1759
font-size: 15pt;
1760
font-weight: 500;
1761
}
1762
.nm-dialog-item {
1764
transition-duration: 100ms;
1765
font-size: 1em;
1766
border-bottom: none;
1767
border-radius: 4px;
1768
padding: 12px;
1769
spacing: 20px;
1770
}
1771
.nm-dialog-item:hover, .nm-dialog-item:focus {
1773
background-color: rgba(0, 0, 0, 0.08);
1774
}
1775
.nm-dialog-item:active {
1777
transition-duration: 200ms;
1778
background-color: rgba(0, 0, 0, 0.2);
1779
}
1780
.nm-dialog-item:selected {
1782
background-color: rgba(66, 133, 244, 0.32);
1783
color: rgba(0, 0, 0, 0.87);
1784
}
1785
.nm-dialog-icons {
1787
spacing: .5em;
1788
}
1789
.nm-dialog-icon {
1791
icon-size: 16px;
1792
}
1793
.no-networks-label {
1795
color: rgba(0, 0, 0, 0.38);
1796
}
1797
.no-networks-box {
1799
spacing: 12px;
1800
}
1801
/* OVERVIEW */
1803
#overview {
1804
spacing: 24px;
1805
}
1806
.overview-controls {
1808
padding-bottom: 32px;
1809
}
1810
.window-picker {
1812
-horizontal-spacing: 16px;
1813
-vertical-spacing: 16px;
1814
padding: 0 16px 32px;
1815
}
1816
.window-picker.external-monitor {
1818
padding: 16px;
1819
}
1820
.window-clone-border {
1822
border: 4px solid rgba(255, 255, 255, 0.3);
1823
border-radius: 4px;
1824
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
1825
}
1826
.window-caption {
1828
spacing: 25px;
1829
color: white;
1830
background-color: rgba(0, 0, 0, 0.6);
1831
border-radius: 4px;
1832
padding: 4px 8px;
1833
}
1834
.search-entry {
1836
width: 304px;
1837
padding: 0 8px;
1838
border-radius: 4px 4px 0 0;
1839
color: rgba(255, 255, 255, 0.5);
1840
selection-background-color: rgba(255, 255, 255, 0.3);
1841
selected-color: white;
1842
transition-duration: 100ms;
1843
background-color: rgba(255, 255, 255, 0.04);
1844
border-color: transparent;
1845
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1846
}
1847
.search-entry:hover {
1849
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1850
}
1851
.search-entry:focus {
1853
border-color: transparent;
1854
box-shadow: inset 0 -2px white;
1855
padding: 0 8px;
1856
border-width: 0;
1857
color: white;
1858
}
1859
.search-entry .search-entry-icon {
1861
icon-size: 16px;
1862
padding: 0 0;
1863
color: rgba(255, 255, 255, 0.7);
1864
}
1865
.search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
1867
color: white;
1868
}
1869
#searchResultsBin {
1871
max-width: 1000px;
1872
}
1873
#searchResultsContent {
1875
padding-left: 20px;
1876
padding-right: 20px;
1877
spacing: 16px;
1878
}
1879
.search-section {
1881
spacing: 16px;
1882
}
1883
.search-section-content {
1885
spacing: 32px;
1886
}
1887
.list-search-results {
1889
spacing: 3px;
1890
}
1891
.search-section-separator {
1893
height: 1px;
1894
background-color: rgba(255, 255, 255, 0.12);
1895
}
1896
.search-section:last-child .search-section-separator {
1898
background-color: transparent;
1899
}
1900
.list-search-result-content {
1902
spacing: 30px;
1903
}
1904
.list-search-result-title {
1906
font-size: 11.25pt;
1907
font-weight: 400;
1908
color: white;
1909
spacing: 12px;
1910
}
1911
.list-search-result-description {
1913
color: rgba(255, 255, 255, 0.7);
1914
}
1915
.list-search-provider-details {
1917
width: 150px;
1918
color: rgba(255, 255, 255, 0.7);
1919
margin-top: 0.24em;
1920
}
1921
.list-search-provider-content {
1923
spacing: 20px;
1924
}
1925
.search-provider-icon {
1927
padding: 15px;
1928
}
1929
/* DASHBOARD */
1931
#dash {
1932
transition-duration: 250ms;
1933
font-size: 1em;
1934
color: white;
1935
background-color: rgba(255, 255, 255, 0.1);
1936
padding: 3px 0;
1937
border: none;
1938
border-left: 0px;
1939
border-radius: 0px 4px 4px 0px;
1940
}
1941
#dash:rtl {
1943
border-radius: 4px 0 0 4px;
1944
}
1945
#dash .placeholder {
1947
background-image: url("assets/dash-placeholder.svg");
1948
background-size: contain;
1949
height: 24px;
1950
}
1951
#dash .empty-dash-drop-target {
1953
width: 24px;
1954
height: 24px;
1955
}
1956
.dash-item-container > StWidget {
1958
padding: 3px 6px;
1959
}
1960
.dash-label {
1962
border-radius: 4px;
1963
padding: 7px 8px;
1964
color: rgba(0, 0, 0, 0.87);
1965
background-color: #FFFFFF;
1966
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1967
text-align: center;
1968
-x-offset: 8px;
1969
}
1970
/* App Vault/Grid */
1972
.icon-grid {
1973
spacing: 30px;
1974
-shell-grid-horizontal-item-size: 136px;
1975
-shell-grid-vertical-item-size: 136px;
1976
}
1977
.icon-grid .overview-icon {
1979
icon-size: 96px;
1980
}
1981
.system-action-icon {
1983
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
1984
background-color: #212121;
1985
color: #FFFFFF;
1986
border-radius: 99px;
1987
icon-size: 48px;
1988
}
1989
.app-view-controls {
1991
width: 320px;
1992
padding-bottom: 32px;
1993
}
1994
.app-view-control {
1996
padding: 0 16px;
1997
font-weight: bold;
1998
color: rgba(255, 255, 255, 0.7);
1999
}
2000
.app-view-control:hover {
2002
color: white;
2003
background-color: rgba(255, 255, 255, 0.08) !important;
2004
}
2005
.app-view-control:active {
2007
color: white;
2008
background-color: rgba(255, 255, 255, 0.2) !important;
2009
}
2010
.app-view-control:checked {
2012
color: white;
2013
background-color: rgba(0, 0, 0, 0.01) !important;
2014
box-shadow: inset 0 2px 0 white;
2015
}
2016
.app-view-control:first-child {
2018
border-right-width: 0;
2019
border-radius: 4px;
2020
}
2021
.app-view-control:first-child:checked {
2023
border-radius: 0;
2024
}
2025
.app-view-control:last-child {
2027
border-radius: 4px;
2028
}
2029
.app-view-control:last-child:checked {
2031
border-radius: 0;
2032
}
2033
.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
2035
.list-search-result:focus,
2036
.list-search-result:selected,
2037
.list-search-result:hover {
2038
background-color: rgba(255, 255, 255, 0.08);
2039
transition-duration: 0ms;
2040
}
2041
.search-provider-icon:active, .search-provider-icon:checked,
2043
.list-search-result:active,
2044
.list-search-result:checked {
2045
background-color: rgba(255, 255, 255, 0.2);
2046
transition-duration: 200ms;
2047
}
2048
.app-well-app:hover .overview-icon,
2050
.app-well-app:focus .overview-icon,
2051
.app-well-app:selected .overview-icon,
2052
.app-well-app.app-folder:hover .overview-icon,
2053
.app-well-app.app-folder:focus .overview-icon,
2054
.app-well-app.app-folder:selected .overview-icon,
2055
.show-apps:hover .overview-icon,
2056
.show-apps:focus .overview-icon,
2057
.show-apps:selected .overview-icon,
2058
.grid-search-result:hover .overview-icon,
2059
.grid-search-result:focus .overview-icon,
2060
.grid-search-result:selected .overview-icon {
2061
background-color: rgba(255, 255, 255, 0.08);
2062
transition-duration: 0ms;
2063
border-image: none;
2064
background-image: none;
2065
}
2066
.app-well-app:active .overview-icon,
2068
.app-well-app:checked .overview-icon,
2069
.app-well-app.app-folder:active .overview-icon,
2070
.app-well-app.app-folder:checked .overview-icon,
2071
.show-apps:active .overview-icon,
2072
.show-apps:checked .overview-icon,
2073
.grid-search-result:active .overview-icon,
2074
.grid-search-result:checked .overview-icon {
2075
background-color: rgba(255, 255, 255, 0.2);
2076
box-shadow: 0 0 transparent;
2077
transition-duration: 200ms;
2078
}
2079
.app-well-app-running-dot {
2081
width: 32px;
2082
height: 2px;
2083
background-color: white;
2084
margin-bottom: 0;
2085
}
2086
.search-provider-icon,
2088
.list-search-result, .app-well-app .overview-icon,
2089
.app-well-app.app-folder .overview-icon,
2090
.show-apps .overview-icon,
2091
.grid-search-result .overview-icon {
2092
color: white;
2093
border-radius: 4px;
2094
padding: 6px;
2095
border: none;
2096
transition-duration: 100ms;
2097
text-align: center;
2098
}
2099
.app-well-app.app-folder > .overview-icon {
2101
background-color: rgba(255, 255, 255, 0.1);
2102
}
2103
.show-apps .show-apps-icon {
2105
color: rgba(255, 255, 255, 0.7);
2106
}
2107
.show-apps:hover .show-apps-icon,
2109
.show-apps:active .show-apps-icon,
2110
.show-apps:checked .show-apps-icon,
2111
.show-apps:focus .show-apps-icon {
2112
color: white;
2113
transition-duration: 100ms;
2114
}
2115
.app-folder-popup {
2117
-arrow-border-radius: 4px;
2118
-arrow-background-color: rgba(255, 255, 255, 0.1);
2119
-arrow-base: 24px;
2120
-arrow-rise: 12px;
2121
}
2122
.app-folder-popup-bin {
2124
padding: 5px;
2125
}
2126
.app-folder-icon {
2128
padding: 5px;
2129
spacing-rows: 5px;
2130
spacing-columns: 5px;
2131
}
2132
.page-indicator {
2134
padding: 15px 20px;
2135
}
2136
.page-indicator .page-indicator-icon {
2138
width: 12px;
2139
height: 12px;
2140
border: none;
2141
border-radius: 12px;
2142
background-image: none;
2143
background-color: rgba(255, 255, 255, 0.3);
2144
transition-duration: 100ms;
2145
}
2146
.page-indicator:hover .page-indicator-icon {
2148
border-color: transparent;
2149
background-image: none;
2150
background-color: rgba(255, 255, 255, 0.5);
2151
}
2152
.page-indicator:active .page-indicator-icon {
2154
border: none;
2155
margin: 0;
2156
background-image: none;
2157
background-color: rgba(255, 255, 255, 0.7);
2158
}
2159
.page-indicator:checked .page-indicator-icon,
2161
.page-indicator:checked:active .page-indicator-icon {
2162
background-image: none;
2163
background-color: white;
2164
transition-duration: 0ms;
2165
}
2166
.page-indicator:checked:active {
2168
background-image: none;
2169
background-color: transparent;
2170
}
2171
.app-well-app > .overview-icon.overview-icon-with-label,
2173
.grid-search-result .overview-icon.overview-icon-with-label {
2174
padding: 10px 8px 5px 8px;
2175
spacing: 4px;
2176
}
2177
.workspace-thumbnails {
2179
visible-width: 32px;
2180
spacing: 12px;
2181
padding: 12px;
2182
border-radius: 4px 0 0 4px;
2183
}
2184
.workspace-thumbnails:rtl {
2186
border-radius: 0 4px 4px 0;
2187
}
2188
.workspace-thumbnails .placeholder {
2190
background-image: url("assets/dash-placeholder.svg");
2191
background-size: contain;
2192
height: 24px;
2193
}
2194
.workspace-thumbnail-indicator {
2196
border: 0 solid white;
2197
border-left-width: 2px;
2198
padding: 6px 10px;
2199
border-radius: 0;
2200
}
2201
.search-display > StBoxLayout,
2203
.all-apps,
2204
.frequent-apps > StBoxLayout {
2205
padding: 0px 88px 10px 88px;
2206
}
2207
.workspace-thumbnails {
2209
transition-duration: 250ms;
2210
color: white;
2211
background-color: rgba(255, 255, 255, 0.1);
2212
border: none;
2213
}
2214
.search-statustext, .no-frequent-applications-label {
2216
font-size: 45px;
2217
font-weight: 400;
2218
color: rgba(255, 255, 255, 0.5);
2219
}
2220
/* NOTIFICATIONS & MESSAGE TRAY */
2222
.url-highlighter {
2223
link-color: #4285F4;
2224
}
2225
.notification-banner {
2227
font-size: 1em;
2228
width: 34em;
2229
min-height: 56px;
2230
margin: 5px;
2231
border-radius: 4px;
2232
color: rgba(0, 0, 0, 0.87);
2233
background-color: #FFFFFF;
2234
border: none;
2235
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2236
}
2237
.notification-banner:hover {
2239
background-color: #FFFFFF;
2240
}
2241
.notification-banner:focus {
2243
background-color: #FFFFFF;
2244
}
2245
.notification-banner .notification-icon {
2247
padding: 5px;
2248
}
2249
.notification-banner .notification-content {
2251
padding: 5px;
2252
spacing: 5px;
2253
}
2254
.notification-banner .secondary-icon {
2256
icon-size: 1.14286em;
2257
}
2258
.notification-banner .notification-actions {
2260
background-color: transparent;
2261
padding-top: 0;
2262
padding: 4px;
2263
spacing: 4px;
2264
}
2265
.notification-banner .notification-button {
2267
transition-duration: 100ms;
2268
min-height: 32px;
2269
padding: 0 8px;
2270
border-radius: 4px;
2271
background-color: transparent;
2272
color: rgba(0, 0, 0, 0.54);
2273
font-weight: 500;
2274
}
2275
.notification-banner .notification-button:first-child {
2277
border-radius: 4px;
2278
}
2279
.notification-banner .notification-button:last-child {
2281
border-radius: 4px;
2282
}
2283
.notification-banner .notification-button:hover, .notification-banner .notification-buttonfocus {
2285
background-color: rgba(0, 0, 0, 0.08);
2286
color: rgba(0, 0, 0, 0.87);
2287
}
2288
.notification-banner .notification-button:active {
2290
transition-duration: 200ms;
2291
background-color: rgba(0, 0, 0, 0.2);
2292
color: rgba(0, 0, 0, 0.87);
2293
}
2294
.summary-source-counter {
2296
font-size: 1em;
2297
font-weight: bold;
2298
height: 1.6em;
2299
width: 1.6em;
2300
-shell-counter-overlap-x: 3px;
2301
-shell-counter-overlap-y: 3px;
2302
background-color: #4285F4;
2303
color: white;
2304
border: 2px solid white;
2305
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
2306
border-radius: 0.9em;
2307
}
2308
.secondary-icon {
2310
icon-size: 1.14286em;
2311
}
2312
.chat-body {
2314
spacing: 5px;
2315
}
2316
.chat-response {
2318
margin: 5px;
2319
}
2320
.chat-log-message {
2322
color: rgba(0, 0, 0, 0.87);
2323
}
2324
.chat-new-group {
2326
padding-top: 1em;
2327
}
2328
.chat-received {
2330
padding-left: 4px;
2331
}
2332
.chat-received:rtl {
2334
padding-left: 0px;
2335
padding-right: 4px;
2336
}
2337
.chat-sent {
2339
padding-left: 18pt;
2340
color: rgba(0, 0, 0, 0.54);
2341
}
2342
.chat-sent:rtl {
2344
padding-left: 0;
2345
padding-right: 18pt;
2346
}
2347
.chat-meta-message {
2349
padding-left: 4px;
2350
font-size: 9pt;
2351
font-weight: 400;
2352
color: rgba(0, 0, 0, 0.54);
2353
}
2354
.chat-meta-message:rtl {
2356
padding-left: 0;
2357
padding-right: 4px;
2358
}
2359
.hotplug-transient-box {
2361
spacing: 6px;
2362
padding: 2px 72px 2px 12px;
2363
}
2364
.hotplug-notification-item {
2366
padding: 2px 10px;
2367
}
2368
.hotplug-notification-item:focus {
2370
padding: 1px 71px 1px 11px;
2371
}
2372
.hotplug-notification-item-icon {
2374
icon-size: 24px;
2375
padding: 2px 5px;
2376
}
2377
.hotplug-resident-box {
2379
spacing: 8px;
2380
}
2381
.hotplug-resident-mount {
2383
transition-duration: 100ms;
2384
spacing: 8px;
2385
border-radius: 4px;
2386
}
2387
.hotplug-resident-mount:hover {
2389
background-color: rgba(0, 0, 0, 0.08);
2390
}
2391
.hotplug-resident-mount:active {
2393
transition-duration: 200ms;
2394
background-color: rgba(0, 0, 0, 0.2);
2395
}
2396
.hotplug-resident-mount-label {
2398
color: inherit;
2399
padding-left: 6px;
2400
}
2401
.hotplug-resident-mount-icon {
2403
icon-size: 24px;
2404
padding-left: 6px;
2405
}
2406
.hotplug-resident-eject-icon {
2408
icon-size: 16px;
2409
}
2410
.hotplug-resident-eject-button {
2412
padding: 7px;
2413
border-radius: 4px;
2414
color: rgba(0, 0, 0, 0.87);
2415
}
2416
/* Eeeky things */
2418
.magnifier-zoom-region {
2419
border: 2px solid #4285F4;
2420
}
2421
.magnifier-zoom-region.full-screen {
2423
border-width: 0;
2424
}
2425
/* On-screen Keyboard */
2427
.word-suggestions {
2428
font-size: 11.25pt;
2429
font-weight: 400;
2430
spacing: 12px;
2431
min-height: 20pt;
2432
}
2433
#keyboard {
2435
background-color: rgba(0, 0, 0, 0.3);
2436
}
2437
#keyboard .page-indicator {
2439
padding: 4px 4px;
2440
}
2441
#keyboard .page-indicator .page-indicator-icon {
2443
width: 8px;
2444
height: 8px;
2445
}
2446
.key-container {
2448
padding: 4px;
2449
spacing: 4px;
2450
}
2451
.keyboard-key {
2453
min-height: 1.2em;
2454
min-width: 1.2em;
2455
font-size: 2em;
2456
font-weight: 500;
2457
border-radius: 4px;
2458
border: none;
2459
color: rgba(0, 0, 0, 0.87);
2460
background-color: #FFFFFF;
2461
border-color: transparent;
2462
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2463
text-shadow: none;
2464
icon-shadow: none;
2465
transition-duration: 100ms;
2466
}
2467
.keyboard-key:focus {
2469
color: rgba(0, 0, 0, 0.87);
2470
text-shadow: none;
2471
icon-shadow: none;
2472
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2473
}
2474
.keyboard-key:hover, .keyboard-key:checked {
2476
color: rgba(0, 0, 0, 0.87);
2477
background-color: #FFFFFF;
2478
border-color: transparent;
2479
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2480
text-shadow: none;
2481
icon-shadow: none;
2482
}
2483
.keyboard-key:active {
2485
color: rgba(0, 0, 0, 0.87);
2486
background-color: rgba(205, 205, 205, 0.9688);
2487
border-color: transparent;
2488
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2489
text-shadow: none;
2490
icon-shadow: none;
2491
transition-duration: 200ms;
2492
}
2493
.keyboard-key:grayed {
2495
background-color: rgba(0, 0, 0, 0.3);
2496
color: white;
2497
border-color: rgba(0, 0, 0, 0.3);
2498
}
2499
.keyboard-key.default-key {
2501
border-color: transparent;
2502
background-color: #FFFFFF;
2503
background-size: 24px;
2504
}
2505
.keyboard-key.default-key:active {
2507
background-color: rgba(214, 214, 214, 0.974);
2508
}
2509
.keyboard-key.enter-key {
2511
border-color: transparent;
2512
background-color: #4285F4;
2513
background-image: url("assets/key-enter.svg");
2514
}
2515
.keyboard-key.enter-key:active {
2517
background-color: #689df6;
2518
}
2519
.keyboard-key.shift-key-lowercase {
2521
background-image: url("assets/key-shift.svg");
2522
}
2523
.keyboard-key.shift-key-uppercase {
2525
background-image: url("assets/key-shift-uppercase.svg");
2526
}
2527
.keyboard-key.shift-key-uppercase:latched {
2529
background-image: url("assets/key-shift-latched-uppercase.svg");
2530
}
2531
.keyboard-key.hide-key {
2533
background-image: url("assets/key-hide.svg");
2534
}
2535
.keyboard-key.layout-key {
2537
background-image: url("assets/key-layout.svg");
2538
}
2539
.keyboard-subkeys {
2541
color: inherit;
2542
padding: 5px;
2543
-arrow-border-radius: 0;
2544
-arrow-background-color: transparent;
2545
-arrow-border-width: 0;
2546
-arrow-border-color: transparent;
2547
-arrow-base: 0;
2548
-arrow-rise: 0;
2549
-boxpointer-gap: 5px;
2550
background-color: #FFFFFF;
2551
border-radius: 4px;
2552
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2553
}
2554
.emoji-page .keyboard-key {
2556
border: none;
2557
color: rgba(255, 255, 255, 0.7);
2558
background-color: transparent;
2559
border-color: transparent;
2560
box-shadow: 0 0 transparent;
2561
text-shadow: none;
2562
icon-shadow: none;
2563
transition-duration: 100ms;
2564
}
2565
.emoji-page .keyboard-key:hover, .emoji-page .keyboard-key:focus {
2567
color: white;
2568
background-color: rgba(255, 255, 255, 0.08);
2569
border-color: transparent;
2570
box-shadow: 0 0 transparent;
2571
text-shadow: none;
2572
icon-shadow: none;
2573
}
2574
.emoji-page .keyboard-key:active {
2576
color: white;
2577
background-color: rgba(255, 255, 255, 0.2);
2578
border-color: transparent;
2579
box-shadow: 0 0 transparent;
2580
text-shadow: none;
2581
icon-shadow: none;
2582
transition-duration: 200ms;
2583
}
2584
.emoji-panel .keyboard-key:latched {
2586
border-color: transparent;
2587
background-color: #4285F4;
2588
color: white;
2589
}
2590
.candidate-popup-content {
2592
padding: 8px;
2593
spacing: 0;
2594
}
2595
.candidate-index {
2597
padding: 0 4px 0 0;
2598
color: rgba(0, 0, 0, 0.54);
2599
}
2600
.candidate-box {
2602
transition-duration: 100ms;
2603
min-height: 28px;
2604
padding: 0 8px;
2605
border-radius: 4px;
2606
}
2607
.candidate-box:hover {
2609
background-color: rgba(0, 0, 0, 0.08);
2610
color: rgba(0, 0, 0, 0.87);
2611
transition-duration: 0ms;
2612
}
2613
.candidate-box:active {
2615
background-color: rgba(0, 0, 0, 0.2);
2616
color: rgba(0, 0, 0, 0.87);
2617
transition-duration: 200ms;
2618
}
2619
.candidate-box:selected {
2621
background-color: rgba(66, 133, 244, 0.32);
2622
color: rgba(0, 0, 0, 0.87);
2623
transition-duration: 0ms;
2624
}
2625
.candidate-page-button-box {
2627
height: 28px;
2628
}
2629
.vertical .candidate-page-button-box {
2631
padding-top: 0;
2632
}
2633
.horizontal .candidate-page-button-box {
2635
padding-left: 0;
2636
}
2637
.candidate-page-button {
2639
min-width: 28px;
2640
min-height: 28px;
2641
padding: 0;
2642
}
2643
.candidate-page-button-previous {
2645
border-radius: 4px;
2646
border-right-width: 0;
2647
}
2648
.candidate-page-button-next {
2650
border-radius: 4px;
2651
}
2652
.candidate-page-button-icon {
2654
icon-size: 1.14286em;
2655
}
2656
/* Auth Dialogs & Screen Shield */
2658
.user-icon {
2659
background-size: contain;
2660
border: none;
2661
color: white;
2662
border-radius: 9999px;
2663
}
2664
.user-icon:hover {
2666
border-color: white;
2667
color: white;
2668
}
2669
.login-dialog-banner-view {
2671
padding-top: 24px;
2672
max-width: 23em;
2673
}
2674
.login-dialog {
2676
border: none;
2677
background-color: transparent;
2678
}
2679
.login-dialog StEntry {
2681
color: white;
2682
selection-background-color: rgba(255, 255, 255, 0.3);
2683
selected-color: white;
2684
transition-duration: 100ms;
2685
background-color: rgba(255, 255, 255, 0.04);
2686
border-color: transparent;
2687
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2688
}
2689
.login-dialog StEntry:focus {
2691
border-color: transparent;
2692
box-shadow: inset 0 -2px white;
2693
}
2694
.login-dialog StEntry:insensitive {
2696
color: rgba(0, 0, 0, 0.38);
2697
border-color: transparent;
2698
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
2699
color: rgba(255, 255, 255, 0.5);
2700
}
2701
.login-dialog .modal-dialog-button-box {
2703
spacing: 3px;
2704
}
2705
.login-dialog .modal-dialog-button {
2707
padding: 0 16px;
2708
color: rgba(255, 255, 255, 0.7);
2709
background-color: transparent;
2710
border-color: transparent;
2711
box-shadow: 0 0 transparent;
2712
text-shadow: none;
2713
icon-shadow: none;
2714
transition-duration: 100ms;
2715
}
2716
.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus {
2718
color: white;
2719
background-color: rgba(255, 255, 255, 0.08);
2720
border-color: transparent;
2721
box-shadow: 0 0 transparent;
2722
text-shadow: none;
2723
icon-shadow: none;
2724
}
2725
.login-dialog .modal-dialog-button:active {
2727
color: white;
2728
background-color: rgba(255, 255, 255, 0.2);
2729
border-color: transparent;
2730
box-shadow: 0 0 transparent;
2731
text-shadow: none;
2732
icon-shadow: none;
2733
transition-duration: 200ms;
2734
}
2735
.login-dialog .modal-dialog-button:insensitive {
2737
color: rgba(255, 255, 255, 0.3);
2738
background-color: transparent;
2739
border-color: transparent;
2740
box-shadow: 0 0 transparent;
2741
text-shadow: none;
2742
icon-shadow: none;
2743
}
2744
.login-dialog .modal-dialog-button:default {
2746
color: white;
2747
background-color: #4285F4;
2748
border-color: transparent;
2749
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2750
text-shadow: none;
2751
icon-shadow: none;
2752
transition-duration: 100ms;
2753
}
2754
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
2756
color: white;
2757
background-color: #4285F4;
2758
border-color: transparent;
2759
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2760
text-shadow: none;
2761
icon-shadow: none;
2762
}
2763
.login-dialog .modal-dialog-button:default:active {
2765
color: white;
2766
background-color: #6fa2f7;
2767
border-color: transparent;
2768
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2769
text-shadow: none;
2770
icon-shadow: none;
2771
transition-duration: 200ms;
2772
}
2773
.login-dialog .modal-dialog-button:default:insensitive {
2775
color: rgba(255, 255, 255, 0.5);
2776
background-color: rgba(255, 255, 255, 0.04);
2777
border-color: transparent;
2778
box-shadow: 0 0 transparent;
2779
text-shadow: none;
2780
icon-shadow: none;
2781
}
2782
.login-dialog-logo-bin {
2784
padding: 24px 0px;
2785
}
2786
.login-dialog-banner {
2788
color: rgba(255, 255, 255, 0.7);
2789
}
2790
.login-dialog-button-box {
2792
spacing: 5px;
2793
}
2794
.login-dialog-message-warning {
2796
color: #FBBC05;
2797
}
2798
.login-dialog-message-hint {
2800
padding-top: 0;
2801
padding-bottom: 20px;
2802
}
2803
.login-dialog-user-selection-box {
2805
padding: 100px 0px;
2806
}
2807
.login-dialog-not-listed-label {
2809
padding-left: 2px;
2810
}
2811
.login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
2813
.login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
2814
color: white;
2815
}
2816
.login-dialog-not-listed-label {
2818
transition-duration: 100ms;
2819
font-size: 1em;
2820
font-weight: bold;
2821
color: rgba(255, 255, 255, 0.7);
2822
padding-top: 1em;
2823
border-radius: 4px;
2824
}
2825
.login-dialog-not-listed-label:hover {
2827
background-color: rgba(255, 255, 255, 0.08);
2828
color: white;
2829
}
2830
.login-dialog-not-listed-label:focus {
2832
background-color: rgba(255, 255, 255, 0.12);
2833
}
2834
.login-dialog-not-listed-label:active {
2836
transition-duration: 200ms;
2837
background-color: rgba(255, 255, 255, 0.2);
2838
color: white;
2839
}
2840
.login-dialog-user-list-view {
2842
-st-vfade-offset: 1em;
2843
}
2844
.login-dialog-user-list {
2846
spacing: 12px;
2847
width: 23em;
2848
}
2849
.login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
2851
background-color: rgba(255, 255, 255, 0.12);
2852
color: white;
2853
}
2854
.login-dialog-user-list:expanded .login-dialog-user-list-item:hover {
2856
background-color: rgba(255, 255, 255, 0.08);
2857
color: white;
2858
}
2859
.login-dialog-user-list:expanded .login-dialog-user-list-item:active {
2861
background-color: rgba(255, 255, 255, 0.2);
2862
color: white;
2863
}
2864
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
2866
border-right: 2px solid white;
2867
}
2868
.login-dialog-user-list-item {
2870
transition-duration: 100ms;
2871
border-radius: 4px;
2872
padding: 6px;
2873
color: rgba(255, 255, 255, 0.7);
2874
}
2875
.login-dialog-user-list-item:ltr .user-widget {
2877
padding-right: 1em;
2878
}
2879
.login-dialog-user-list-item:rtl .user-widget {
2881
padding-left: 1em;
2882
}
2883
.login-dialog-user-list-item:hover {
2885
background-color: rgba(255, 255, 255, 0.08);
2886
color: white;
2887
}
2888
.login-dialog-user-list-item:active {
2890
transition-duration: 200ms;
2891
background-color: rgba(255, 255, 255, 0.2);
2892
color: white;
2893
}
2894
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
2896
height: 2px;
2897
margin-top: 6px;
2898
background-color: white;
2899
}
2900
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
2902
background-color: white;
2903
}
2904
.login-dialog-username,
2906
.user-widget-label {
2907
color: white;
2908
font-size: 15pt;
2909
font-weight: 500;
2910
text-align: left;
2911
padding-left: 15px;
2912
}
2913
.user-widget-label:ltr {
2915
padding-left: 14px;
2916
}
2917
.user-widget-label:rtl {
2919
padding-right: 14px;
2920
}
2921
.login-dialog-prompt-layout {
2923
padding-top: 24px;
2924
padding-bottom: 12px;
2925
spacing: 8px;
2926
width: 23em;
2927
}
2928
.login-dialog-prompt-label {
2930
color: rgba(255, 255, 255, 0.7);
2931
font-size: 1em;
2932
padding-top: 1em;
2933
}
2934
.login-dialog-session-list-button StIcon {
2936
icon-size: 1.25em;
2937
}
2938
.login-dialog-session-list-button {
2940
color: rgba(255, 255, 255, 0.7);
2941
}
2942
.login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
2944
color: white;
2945
}
2946
.login-dialog-session-list-button:active {
2948
color: white;
2949
}
2950
.screen-shield-arrows {
2952
padding-bottom: 3em;
2953
}
2954
.screen-shield-arrows Gjs_Arrow {
2956
color: white;
2957
width: 80px;
2958
height: 48px;
2959
-arrow-thickness: 12px;
2960
-arrow-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2961
}
2962
.screen-shield-clock {
2964
color: white;
2965
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2966
font-weight: normal;
2967
text-align: center;
2968
padding-bottom: 1.5em;
2969
}
2970
.screen-shield-clock-time {
2972
font-size: 112px;
2973
font-weight: 300;
2974
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2975
font-feature-settings: "tnum";
2976
}
2977
.screen-shield-clock-date {
2979
font-size: 45px;
2980
font-weight: 400;
2981
}
2982
.screen-shield-notifications-container {
2984
spacing: 6px;
2985
width: 30em;
2986
background-color: transparent;
2987
max-height: 500px;
2988
}
2989
.screen-shield-notifications-container .summary-notification-stack-scrollview {
2991
padding-top: 0;
2992
padding-bottom: 0;
2993
}
2994
.screen-shield-notifications-container .notification,
2996
.screen-shield-notifications-container .screen-shield-notification-source {
2997
padding: 8px;
2998
border: none;
2999
background-color: rgba(0, 0, 0, 0.3);
3000
color: white;
3001
border-radius: 4px;
3002
}
3003
.screen-shield-notifications-container .notification {
3005
margin-right: 16px;
3006
}
3007
.screen-shield-notification-label {
3009
min-height: 22px;
3010
padding: 2px 0px 0px 16px;
3011
font-weight: bold;
3012
}
3013
.screen-shield-notification-count-text {
3015
min-height: 22px;
3016
padding: 2px 0px 0px 16px;
3017
color: rgba(255, 255, 255, 0.7);
3018
}
3019
#panel.lock-screen {
3021
background-color: rgba(0, 0, 0, 0.3);
3022
}
3023
.screen-shield-background {
3025
background: black;
3026
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
3027
}
3028
#lockDialogGroup {
3030
background: #303030;
3031
background-size: cover;
3032
}
3033
#LookingGlassDialog {
3035
background-color: #FFFFFF;
3036
spacing: 4px;
3037
padding: 0;
3038
border: none;
3039
border-radius: 4px;
3040
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
3041
}
3042
#LookingGlassDialog > #Toolbar {
3044
padding: 0 8px;
3045
border: none;
3046
border-radius: 0;
3047
background-color: rgba(255, 255, 255, 0.01);
3048
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
3049
}
3050
#LookingGlassDialog .labels {
3052
spacing: 0;
3053
}
3054
#LookingGlassDialog .notebook-tab {
3056
-natural-hpadding: 12px;
3057
-minimum-hpadding: 6px;
3058
font-weight: bold;
3059
color: rgba(0, 0, 0, 0.54);
3060
transition-duration: 100ms;
3061
padding-left: 16px;
3062
padding-right: 16px;
3063
min-height: 32px;
3064
padding: 0 32px;
3065
}
3066
#LookingGlassDialog .notebook-tab:hover {
3068
background-color: rgba(0, 0, 0, 0.08);
3069
color: rgba(0, 0, 0, 0.87);
3070
text-shadow: none;
3071
}
3072
#LookingGlassDialog .notebook-tab:active {
3074
background-color: rgba(0, 0, 0, 0.2);
3075
color: rgba(0, 0, 0, 0.87);
3076
transition-duration: 200ms;
3077
}
3078
#LookingGlassDialog .notebook-tab:selected {
3080
border-bottom-width: 0;
3081
border-color: transparent;
3082
background-color: rgba(255, 255, 255, 0.01);
3083
box-shadow: inset 0 -2px 0px #4285F4;
3084
color: rgba(0, 0, 0, 0.87);
3085
text-shadow: none;
3086
}
3087
#LookingGlassDialog StBoxLayout#EvalBox {
3089
padding: 4px;
3090
spacing: 4px;
3091
}
3092
#LookingGlassDialog StBoxLayout#ResultsArea {
3094
spacing: 4px;
3095
}
3096
.lg-dialog StEntry {
3098
selection-background-color: rgba(66, 133, 244, 0.32);
3099
selected-color: rgba(0, 0, 0, 0.87);
3100
}
3101
.lg-dialog .shell-link {
3103
color: #4285F4;
3104
}
3105
.lg-dialog .shell-link:hover {
3107
color: #4285F4;
3108
}
3109
.lg-completions-text {
3111
font-size: 1em;
3112
font-style: italic;
3113
}
3114
.lg-obj-inspector-title {
3116
spacing: 4px;
3117
}
3118
.lg-obj-inspector-button {
3120
min-height: 32px;
3121
padding: 0 16px;
3122
border: none;
3123
border-radius: 4px;
3124
font-size: 10.5pt;
3125
font-weight: 500;
3126
color: rgba(0, 0, 0, 0.54);
3127
background-color: transparent;
3128
border-color: transparent;
3129
box-shadow: 0 0 transparent;
3130
text-shadow: none;
3131
icon-shadow: none;
3132
transition-duration: 100ms;
3133
}
3134
.lg-obj-inspector-button:hover {
3136
color: rgba(0, 0, 0, 0.87);
3137
background-color: rgba(0, 0, 0, 0.08);
3138
border-color: transparent;
3139
box-shadow: 0 0 transparent;
3140
text-shadow: none;
3141
icon-shadow: none;
3142
}
3143
.lg-obj-inspector-button:active {
3145
color: rgba(0, 0, 0, 0.87);
3146
background-color: rgba(0, 0, 0, 0.2);
3147
border-color: transparent;
3148
box-shadow: 0 0 transparent;
3149
text-shadow: none;
3150
icon-shadow: none;
3151
transition-duration: 200ms;
3152
}
3153
.lg-obj-inspector-button:insensitive {
3155
color: rgba(0, 0, 0, 0.26);
3156
background-color: transparent;
3157
border-color: transparent;
3158
box-shadow: 0 0 transparent;
3159
text-shadow: none;
3160
icon-shadow: none;
3161
}
3162
.lg-obj-inspector-button:focus {
3164
color: rgba(0, 0, 0, 0.87);
3165
text-shadow: none;
3166
icon-shadow: none;
3167
box-shadow: 0 0 transparent;
3168
}
3169
.lg-obj-inspector-button:hover {
3171
border: none;
3172
}
3173
#lookingGlassExtensions {
3175
padding: 4px;
3176
}
3177
.lg-extensions-list {
3179
padding: 4px;
3180
spacing: 6px;
3181
}
3182
.lg-extension {
3184
border: none;
3185
border-radius: 4px;
3186
padding: 4px;
3187
}
3188
.lg-extension-name {
3190
font-size: 18pt;
3191
font-weight: 400;
3192
}
3193
.lg-extension-meta {
3195
spacing: 6px;
3196
}
3197
#LookingGlassPropertyInspector {
3199
background: #FFFFFF;
3200
border: none;
3201
border-radius: 4px;
3202
padding: 6px;
3203
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
3204
}
3205
/* Dash to Dock */
3207
#dashtodockContainer #dash {
3208
background-color: rgba(0, 0, 0, 0.6);
3209
}
3210
#dashtodockContainer:overview #dash {
3212
background-color: rgba(255, 255, 255, 0.1);
3213
}
3214
#dashtodockContainer.extended:overview #dash {
3216
background-color: transparent;
3217
}
3218
#dashtodockContainer.left #dash,
3220
#dashtodockContainer.right #dash {
3221
padding: 3px 0;
3222
}
3223
#dashtodockContainer.top #dash,
3225
#dashtodockContainer.bottom #dash {
3226
padding: 0 3px;
3227
}
3228
#dashtodockContainer.extended #dash {
3230
padding: 0;
3231
border-radius: 0;
3232
}
3233
#dashtodockContainer.left .dash-item-container > StWidget,
3235
#dashtodockContainer.right .dash-item-container > StWidget,
3236
#dashtodockContainer.extended.left .dash-item-container > StWidget,
3237
#dashtodockContainer.extended.right .dash-item-container > StWidget {
3238
padding: 3px 6px;
3239
}
3240
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
3242
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
3243
padding: 6px 6px 3px 6px;
3244
}
3245
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
3247
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
3248
padding: 3px 6px 6px 6px;
3249
}
3250
#dashtodockContainer.top .dash-item-container > StWidget,
3252
#dashtodockContainer.bottom .dash-item-container > StWidget,
3253
#dashtodockContainer.extended.top .dash-item-container > StWidget,
3254
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
3255
padding: 6px 3px;
3256
}
3257
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
3259
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
3260
padding: 6px 3px 6px 6px;
3261
}
3262
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
3264
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
3265
padding: 6px 6px 6px 3px;
3266
}
3267
#dashtodockContainer .app-well-app-running-dot {
3269
background-color: transparent;
3270
}
3271
#dashtodockContainer .dash-item-container > StWidget {
3273
background-size: cover;
3274
}
3275
#dashtodockContainer.left .dash-item-container > StWidget.running1 {
3277
background-image: url("assets/dash/left-running1.svg");
3278
}
3279
#dashtodockContainer.left .dash-item-container > StWidget.running1.focused {
3281
background-image: url("assets/dash/left-running1-focused.svg");
3282
}
3283
#dashtodockContainer.left .dash-item-container > StWidget.running2 {
3285
background-image: url("assets/dash/left-running2.svg");
3286
}
3287
#dashtodockContainer.left .dash-item-container > StWidget.running2.focused {
3289
background-image: url("assets/dash/left-running2-focused.svg");
3290
}
3291
#dashtodockContainer.left .dash-item-container > StWidget.running3 {
3293
background-image: url("assets/dash/left-running3.svg");
3294
}
3295
#dashtodockContainer.left .dash-item-container > StWidget.running3.focused {
3297
background-image: url("assets/dash/left-running3-focused.svg");
3298
}
3299
#dashtodockContainer.left .dash-item-container > StWidget.running4 {
3301
background-image: url("assets/dash/left-running4.svg");
3302
}
3303
#dashtodockContainer.left .dash-item-container > StWidget.running4.focused {
3305
background-image: url("assets/dash/left-running4-focused.svg");
3306
}
3307
#dashtodockContainer.right .dash-item-container > StWidget.running1 {
3309
background-image: url("assets/dash/right-running1.svg");
3310
}
3311
#dashtodockContainer.right .dash-item-container > StWidget.running1.focused {
3313
background-image: url("assets/dash/right-running1-focused.svg");
3314
}
3315
#dashtodockContainer.right .dash-item-container > StWidget.running2 {
3317
background-image: url("assets/dash/right-running2.svg");
3318
}
3319
#dashtodockContainer.right .dash-item-container > StWidget.running2.focused {
3321
background-image: url("assets/dash/right-running2-focused.svg");
3322
}
3323
#dashtodockContainer.right .dash-item-container > StWidget.running3 {
3325
background-image: url("assets/dash/right-running3.svg");
3326
}
3327
#dashtodockContainer.right .dash-item-container > StWidget.running3.focused {
3329
background-image: url("assets/dash/right-running3-focused.svg");
3330
}
3331
#dashtodockContainer.right .dash-item-container > StWidget.running4 {
3333
background-image: url("assets/dash/right-running4.svg");
3334
}
3335
#dashtodockContainer.right .dash-item-container > StWidget.running4.focused {
3337
background-image: url("assets/dash/right-running4-focused.svg");
3338
}
3339
#dashtodockContainer.top .dash-item-container > StWidget.running1 {
3341
background-image: url("assets/dash/top-running1.svg");
3342
}
3343
#dashtodockContainer.top .dash-item-container > StWidget.running1.focused {
3345
background-image: url("assets/dash/top-running1-focused.svg");
3346
}
3347
#dashtodockContainer.top .dash-item-container > StWidget.running2 {
3349
background-image: url("assets/dash/top-running2.svg");
3350
}
3351
#dashtodockContainer.top .dash-item-container > StWidget.running2.focused {
3353
background-image: url("assets/dash/top-running2-focused.svg");
3354
}
3355
#dashtodockContainer.top .dash-item-container > StWidget.running3 {
3357
background-image: url("assets/dash/top-running3.svg");
3358
}
3359
#dashtodockContainer.top .dash-item-container > StWidget.running3.focused {
3361
background-image: url("assets/dash/top-running3-focused.svg");
3362
}
3363
#dashtodockContainer.top .dash-item-container > StWidget.running4 {
3365
background-image: url("assets/dash/top-running4.svg");
3366
}
3367
#dashtodockContainer.top .dash-item-container > StWidget.running4.focused {
3369
background-image: url("assets/dash/top-running4-focused.svg");
3370
}
3371
#dashtodockContainer.bottom .dash-item-container > StWidget.running1 {
3373
background-image: url("assets/dash/bottom-running1.svg");
3374
}
3375
#dashtodockContainer.bottom .dash-item-container > StWidget.running1.focused {
3377
background-image: url("assets/dash/bottom-running1-focused.svg");
3378
}
3379
#dashtodockContainer.bottom .dash-item-container > StWidget.running2 {
3381
background-image: url("assets/dash/bottom-running2.svg");
3382
}
3383
#dashtodockContainer.bottom .dash-item-container > StWidget.running2.focused {
3385
background-image: url("assets/dash/bottom-running2-focused.svg");
3386
}
3387
#dashtodockContainer.bottom .dash-item-container > StWidget.running3 {
3389
background-image: url("assets/dash/bottom-running3.svg");
3390
}
3391
#dashtodockContainer.bottom .dash-item-container > StWidget.running3.focused {
3393
background-image: url("assets/dash/bottom-running3-focused.svg");
3394
}
3395
#dashtodockContainer.bottom .dash-item-container > StWidget.running4 {
3397
background-image: url("assets/dash/bottom-running4.svg");
3398
}
3399
#dashtodockContainer.bottom .dash-item-container > StWidget.running4.focused {
3401
background-image: url("assets/dash/bottom-running4-focused.svg");
3402
}
3403
/* Simple Dock */
3405
#dash:desktop {
3406
background-color: rgba(0, 0, 0, 0.6);
3407
}
3408
/* GPaste */
3410
.popup-menu .search-entry {
3411
color: rgba(0, 0, 0, 0.87);
3412
selection-background-color: rgba(66, 133, 244, 0.32);
3413
selected-color: rgba(0, 0, 0, 0.87);
3414
transition-duration: 100ms;
3415
background-color: rgba(0, 0, 0, 0.04);
3416
border-color: transparent;
3417
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
3418
}
3419
.popup-menu .search-entry:hover {
3421
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
3422
}
3423
.popup-menu .search-entry:focus {
3425
border-color: transparent;
3426
box-shadow: inset 0 -2px #4285F4;
3427
color: rgba(0, 0, 0, 0.87);
3428
}
3429
.popup-menu .search-entry .search-entry-icon {
3431
color: rgba(0, 0, 0, 0.54);
3432
}
3433
.popup-menu .search-entry:hover .search-entry-icon, .popup-menu .search-entry:focus .search-entry-icon {
3435
color: rgba(0, 0, 0, 0.87);
3436
}
3437