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
background-image: url("assets/toggle-off.svg");
313
}
314
.toggle-switch:checked {
316
background-image: url("assets/toggle-on.svg");
317
}
318
.toggle-switch-us {
320
background-image: url("assets/toggle-off.svg");
321
}
322
.toggle-switch-us:checked {
324
background-image: url("assets/toggle-on.svg");
325
}
326
.toggle-switch-intl {
328
background-image: url("assets/toggle-off.svg");
329
}
330
.toggle-switch-intl:checked {
332
background-image: url("assets/toggle-on.svg");
333
}
334
/* links */
336
.shell-link {
337
transition-duration: 100ms;
338
border-radius: 4px;
339
color: #4285F4;
340
}
341
.shell-link:hover {
343
color: #4285F4;
344
background-color: rgba(66, 133, 244, 0.08);
345
}
346
.shell-link:active {
348
transition-duration: 200ms;
349
color: #4285F4;
350
background-color: rgba(66, 133, 244, 0.2);
351
}
352
/* Modal Dialogs */
354
.headline {
355
font-size: 15pt;
356
font-weight: 500;
357
}
358
.lightbox {
360
background-color: black;
361
}
362
.flashspot {
364
background-color: white;
365
}
366
.modal-dialog {
368
border-radius: 4px;
369
color: rgba(0, 0, 0, 0.87);
370
background-color: #FFFFFF;
371
border: none;
372
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
373
}
374
.modal-dialog .modal-dialog-content-box {
376
padding: 24px;
377
}
378
.modal-dialog .run-dialog-entry {
380
width: 20em;
381
margin-bottom: 0;
382
}
383
.modal-dialog .run-dialog-error-box {
385
padding-top: 16px;
386
spacing: 6px;
387
}
388
.modal-dialog .run-dialog-button-box {
390
padding-top: 1em;
391
}
392
.modal-dialog .run-dialog-label {
394
font-size: 1em;
395
font-weight: normal;
396
color: rgba(0, 0, 0, 0.54);
397
padding-bottom: .4em;
398
}
399
.mount-dialog-subject,
401
.end-session-dialog-subject {
402
font-size: 15pt;
403
font-weight: 500;
404
}
405
/* Message Dialog */
407
.message-dialog-main-layout {
408
padding: 12px 20px 0;
409
spacing: 12px;
410
}
411
.message-dialog-content {
413
max-width: 28em;
414
spacing: 20px;
415
}
416
.message-dialog-icon {
418
min-width: 48px;
419
icon-size: 48px;
420
}
421
.message-dialog-title {
423
font-weight: bold;
424
}
425
.message-dialog-subtitle {
427
color: rgba(0, 0, 0, 0.54);
428
font-weight: bold;
429
}
430
/* End Session Dialog */
432
.end-session-dialog {
433
spacing: 42px;
434
border: none;
435
}
436
.end-session-dialog-list {
438
padding-top: 20px;
439
}
440
.end-session-dialog-layout {
442
padding-left: 17px;
443
}
444
.end-session-dialog-layout:rtl {
446
padding-right: 17px;
447
}
448
.end-session-dialog-description {
450
width: 28em;
451
padding-bottom: 10px;
452
}
453
.end-session-dialog-description:rtl {
455
text-align: right;
456
}
457
.end-session-dialog-warning {
459
width: 28em;
460
color: #FBBC05;
461
padding-top: 6px;
462
}
463
.end-session-dialog-warning:rtl {
465
text-align: right;
466
}
467
.end-session-dialog-logout-icon {
469
border-radius: 9999px;
470
width: 48px;
471
height: 48px;
472
background-size: contain;
473
}
474
.end-session-dialog-shutdown-icon {
476
color: rgba(0, 0, 0, 0.38);
477
width: 48px;
478
height: 48px;
479
}
480
.end-session-dialog-inhibitor-layout {
482
spacing: 16px;
483
max-height: 200px;
484
padding-right: 65px;
485
padding-left: 65px;
486
}
487
.end-session-dialog-session-list,
489
.end-session-dialog-app-list {
490
spacing: 1em;
491
}
492
.end-session-dialog-list-header {
494
font-weight: bold;
495
}
496
.end-session-dialog-list-header:rtl {
498
text-align: right;
499
}
500
.end-session-dialog-app-list-item,
502
.end-session-dialog-session-list-item {
503
spacing: 1em;
504
}
505
.end-session-dialog-app-list-item-name,
507
.end-session-dialog-session-list-item-name {
508
font-weight: bold;
509
}
510
.end-session-dialog-app-list-item-description {
512
color: rgba(0, 0, 0, 0.54);
513
font-size: 1em;
514
}
515
/* ShellMountOperation Dialogs */
517
.shell-mount-operation-icon {
518
icon-size: 48px;
519
}
520
.mount-dialog {
522
spacing: 24px;
523
}
524
.mount-dialog .message-dialog-title {
526
padding-top: 10px;
527
padding-left: 17px;
528
padding-bottom: 6px;
529
max-width: 34em;
530
}
531
.mount-dialog .message-dialog-title:rtl {
533
padding-left: 0px;
534
padding-right: 17px;
535
}
536
.mount-dialog .message-dialog-body {
538
padding-left: 17px;
539
width: 28em;
540
}
541
.mount-dialog .message-dialog-body:rtl {
543
padding-left: 0px;
544
padding-right: 17px;
545
}
546
.mount-dialog-app-list {
548
max-height: 200px;
549
padding-top: 24px;
550
padding-left: 49px;
551
padding-right: 32px;
552
}
553
.mount-dialog-app-list:rtl {
555
padding-right: 49px;
556
padding-left: 32px;
557
}
558
.mount-dialog-app-list-item {
560
color: rgba(0, 0, 0, 0.87);
561
}
562
.mount-dialog-app-list-item:hover {
564
color: rgba(0, 0, 0, 0.87);
565
}
566
.mount-dialog-app-list-item:ltr {
568
padding-right: 1em;
569
}
570
.mount-dialog-app-list-item:rtl {
572
padding-left: 1em;
573
}
574
.mount-dialog-app-list-item-icon:ltr {
576
padding-right: 17px;
577
}
578
.mount-dialog-app-list-item-icon:rtl {
580
padding-left: 17px;
581
}
582
.mount-dialog-app-list-item-name {
584
font-size: 1em;
585
}
586
/* Password or Authentication Dialog */
588
.prompt-dialog {
589
width: 34em;
590
border: none;
591
}
592
.prompt-dialog .message-dialog-main-layout {
594
spacing: 24px;
595
padding: 10px;
596
}
597
.prompt-dialog .message-dialog-content {
599
spacing: 16px;
600
}
601
.prompt-dialog .message-dialog-title {
603
font-size: 15pt;
604
font-weight: 500;
605
color: rgba(0, 0, 0, 0.87);
606
}
607
.prompt-dialog-description:rtl {
609
text-align: right;
610
}
611
.prompt-dialog-password-box {
613
spacing: 1em;
614
padding-bottom: 1em;
615
}
616
.prompt-dialog-error-label {
618
font-size: 1em;
619
color: #EA4335;
620
padding-bottom: 8px;
621
}
622
.prompt-dialog-info-label {
624
font-size: 1em;
625
padding-bottom: 8px;
626
}
627
.hidden {
629
color: rgba(0, 0, 0, 0);
630
}
631
.prompt-dialog-null-label {
633
font-size: 1em;
634
padding-bottom: 8px;
635
}
636
/* Polkit Dialog */
638
.polkit-dialog-user-layout {
639
padding-left: 10px;
640
spacing: 10px;
641
}
642
.polkit-dialog-user-layout:rtl {
644
padding-left: 0px;
645
padding-right: 10px;
646
}
647
.polkit-dialog-user-root-label {
649
color: #FBBC05;
650
}
651
.polkit-dialog-user-icon {
653
border-radius: 9999px;
654
background-size: contain;
655
width: 48px;
656
height: 48px;
657
}
658
/* Audio selection dialog */
660
.audio-device-selection-dialog {
661
spacing: 30px;
662
}
663
.audio-selection-content {
665
spacing: 20px;
666
padding: 24px;
667
}
668
.audio-selection-title {
670
font-weight: bold;
671
text-align: center;
672
}
673
.audio-selection-box {
675
spacing: 20px;
676
}
677
.audio-selection-device {
679
border: 1px solid rgba(0, 0, 0, 0.12);
680
border-radius: 4px;
681
}
682
.audio-selection-device:active, .audio-selection-device:hover, .audio-selection-device:focus {
684
background-color: #4285F4;
685
}
686
.audio-selection-device-box {
688
padding: 20px;
689
spacing: 20px;
690
}
691
.audio-selection-device-icon {
693
icon-size: 64px;
694
}
695
/* Access Dialog */
697
.access-dialog {
698
spacing: 30px;
699
}
700
/* Geolocation Dialog */
702
.geolocation-dialog {
703
spacing: 30px;
704
}
705
/* Extension Dialog */
707
.extension-dialog .message-dialog-main-layout {
708
spacing: 24px;
709
padding: 10px;
710
}
711
.extension-dialog .message-dialog-title {
713
color: rgba(0, 0, 0, 0.54);
714
}
715
/* Inhibit-Shortcuts Dialog */
717
.inhibit-shortcuts-dialog {
718
spacing: 30px;
719
}
720
/* Network Agent Dialog */
722
.network-dialog-secret-table {
723
spacing-rows: 15px;
724
spacing-columns: 1em;
725
}
726
.keyring-dialog-control-table {
728
spacing-rows: 15px;
729
spacing-columns: 1em;
730
}
731
/* Popovers/Menus */
733
.popup-menu {
734
min-width: 200px;
735
}
736
.popup-menu .popup-sub-menu {
738
padding-bottom: 0;
739
background-color: rgba(0, 0, 0, 0.04);
740
box-shadow: 0 0 transparent;
741
}
742
.popup-menu .popup-menu-content {
744
padding: 8px 0;
745
}
746
.popup-menu .popup-menu-item {
748
spacing: 8px;
749
transition-duration: 100ms;
750
}
751
.popup-menu .popup-menu-item:ltr {
753
padding: 0.4em 24px 0.4em 0;
754
}
755
.popup-menu .popup-menu-item:rtl {
757
padding: 0.4em 0 0.4em 24px;
758
}
759
.popup-menu .popup-menu-item:checked {
761
background-color: rgba(66, 133, 244, 0.32);
762
box-shadow: 0 0 transparent;
763
font-weight: normal;
764
}
765
.popup-menu .popup-menu-item:checked.selected {
767
background-color: rgba(66, 133, 244, 0.4);
768
}
769
.popup-menu .popup-menu-item:checked:active {
771
background-color: rgba(66, 133, 244, 0.6);
772
}
773
.popup-menu .popup-menu-item.selected {
775
background-color: rgba(0, 0, 0, 0.08);
776
color: rgba(0, 0, 0, 0.87);
777
transition-duration: 0ms;
778
}
779
.popup-menu .popup-menu-item:active {
781
background-color: rgba(0, 0, 0, 0.2);
782
color: rgba(0, 0, 0, 0.87);
783
transition-duration: 200ms;
784
}
785
.popup-menu .popup-menu-item.selected:active {
787
color: rgba(0, 0, 0, 0.87);
788
}
789
.popup-menu .popup-menu-item:insensitive {
791
color: rgba(0, 0, 0, 0.38);
792
}
793
.popup-menu .popup-inactive-menu-item {
795
color: rgba(0, 0, 0, 0.87);
796
}
797
.popup-menu .popup-inactive-menu-item:insensitive {
799
color: rgba(0, 0, 0, 0.38);
800
}
801
.popup-menu.panel-menu {
803
-boxpointer-gap: 4px;
804
margin-bottom: 1.75em;
805
}
806
.popup-menu-ornament {
808
text-align: right;
809
width: 16px;
810
height: 16px;
811
}
812
.popup-menu-boxpointer,
814
.candidate-popup-boxpointer {
815
-arrow-border-radius: 0;
816
-arrow-background-color: transparent;
817
-arrow-border-width: 0;
818
-arrow-border-color: transparent;
819
-arrow-base: 0;
820
-arrow-rise: 0;
821
-arrow-box-shadow: none;
822
margin: 5px 8px 8px;
823
background-color: #FFFFFF;
824
border-radius: 4px;
825
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
826
}
827
.popup-separator-menu-item {
829
height: 1px;
830
margin: 8px 40px;
831
background-color: transparent;
832
border-color: rgba(0, 0, 0, 0.12);
833
border-bottom-width: 1px;
834
border-bottom-style: solid;
835
}
836
.background-menu {
838
-boxpointer-gap: 4px;
839
-arrow-rise: 0;
840
}
841
/* fallback menu
843
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
844
app menu inside the main app window itself rather than the top bar
845
*/
846
/* OSD */
847
.osd-window {
848
text-align: center;
849
font-weight: bold;
850
spacing: 1em;
851
margin: 32px;
852
min-width: 64px;
853
min-height: 64px;
854
}
855
.osd-window .osd-monitor-label {
857
font-size: 45px;
858
font-weight: 400;
859
}
860
.osd-window .level {
862
height: 8px;
863
-barlevel-height: 8px;
864
-barlevel-background-color: rgba(0, 0, 0, 0.12);
865
-barlevel-active-background-color: #4285F4;
866
-barlevel-overdrive-color: #EA4335;
867
-barlevel-overdrive-separator-width: 2px;
868
}
869
/* Pad OSD */
871
.pad-osd-window {
872
padding: 32px;
873
background-color: rgba(0, 0, 0, 0.6);
874
}
875
.pad-osd-window .pad-osd-title-box {
877
spacing: 12px;
878
}
879
.pad-osd-window .pad-osd-title-menu-box {
881
spacing: 6px;
882
}
883
.combo-box-label {
885
width: 15em;
886
}
887
/* App Switcher */
889
.switcher-popup {
890
padding: 8px;
891
spacing: 16px;
892
}
893
.switcher-list-item-container {
895
spacing: 8px;
896
}
897
.switcher-list .item-box {
899
transition-duration: 100ms;
900
padding: 8px;
901
border-radius: 4px;
902
}
903
.switcher-list .item-box:outlined {
905
padding: 8px;
906
border: none;
907
background-color: rgba(0, 0, 0, 0.12);
908
color: rgba(0, 0, 0, 0.87);
909
}
910
.switcher-list .item-box:selected {
912
background-color: rgba(66, 133, 244, 0.32);
913
color: rgba(0, 0, 0, 0.87);
914
}
915
.switcher-list .thumbnail-box {
917
padding: 2px;
918
spacing: 4px;
919
}
920
.switcher-list .thumbnail {
922
width: 256px;
923
}
924
.switcher-list .separator {
926
width: 1px;
927
background: rgba(0, 0, 0, 0.12);
928
}
929
.switcher-arrow {
931
transition-duration: 100ms;
932
border-color: rgba(0, 0, 0, 0);
933
color: rgba(0, 0, 0, 0.54);
934
}
935
.switcher-arrow:highlighted {
937
color: rgba(0, 0, 0, 0.87);
938
}
939
.input-source-switcher-symbol {
941
font-size: 45px;
942
font-weight: 400;
943
width: 96px;
944
height: 96px;
945
}
946
/* Window Cycler */
948
.cycler-highlight {
949
border: 4px solid #4285F4;
950
}
951
/* Workspace Switcher */
953
.workspace-switcher-group {
954
padding: 8px;
955
}
956
.workspace-switcher {
958
background: transparent;
959
border: 0px;
960
border-radius: 0px;
961
padding: 0px;
962
spacing: 8px;
963
}
964
.ws-switcher-active-up, .ws-switcher-active-down {
966
height: 48px;
967
background-color: #4285F4;
968
color: white;
969
background-size: 32px;
970
border-radius: 4px;
971
}
972
.ws-switcher-box {
974
height: 48px;
975
border: none;
976
background: rgba(0, 0, 0, 0.12);
977
border-radius: 4px;
978
}
979
.osd-window,
981
.resize-popup,
982
.switcher-list, .workspace-switcher-container {
983
color: rgba(0, 0, 0, 0.87);
984
background-color: #FFFFFF;
985
border: none;
986
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
987
border-radius: 4px;
988
padding: 12px;
989
}
990
/* Tiled window previews */
992
.tile-preview {
993
background-color: rgba(123, 170, 247, 0.3);
994
border: 1px solid #7BAAF7;
995
}
996
.tile-preview-left.on-primary {
998
border-radius: 0;
999
}
1000
.tile-preview-right.on-primary {
1002
border-radius: 0;
1003
}
1004
.tile-preview-left.tile-preview-right.on-primary {
1006
border-radius: 0;
1007
}
1008
/* TOP BAR */
1010
#panel {
1011
background-color: #212121;
1012
/* transition from solid to transparent */
1013
transition-duration: 250ms;
1014
font-weight: bold;
1015
height: 28px;
1016
font-feature-settings: "tnum";
1017
}
1018
#panel:overview, #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
1020
background-color: transparent;
1021
}
1022
#panel #panelLeft, #panel #panelCenter {
1024
spacing: 0;
1025
}
1026
#panel .panel-corner {
1028
-panel-corner-radius: 0;
1029
-panel-corner-background-color: transparent;
1030
-panel-corner-border-width: 0;
1031
-panel-corner-border-color: transparent;
1032
}
1033
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
1035
-panel-corner-border-color: transparent;
1036
}
1037
#panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
1039
-panel-corner-radius: 0;
1040
-panel-corner-background-color: transparent;
1041
-panel-corner-border-color: transparent;
1042
}
1043
#panel .panel-button {
1045
-natural-hpadding: 12px;
1046
-minimum-hpadding: 6px;
1047
font-weight: bold;
1048
color: rgba(255, 255, 255, 0.7);
1049
text-shadow: none;
1050
transition-duration: 100ms;
1051
}
1052
#panel .panel-button .app-menu-icon {
1054
-st-icon-style: symbolic;
1055
margin-left: 4px;
1056
margin-right: 4px;
1057
}
1058
#panel .panel-button .system-status-icon,
1060
#panel .panel-button .app-menu-icon > StIcon,
1061
#panel .panel-button .popup-menu-arrow {
1062
icon-shadow: none;
1063
}
1064
#panel .panel-button:hover {
1066
color: white;
1067
text-shadow: none;
1068
}
1069
#panel .panel-button:hover .system-status-icon,
1071
#panel .panel-button:hover .app-menu-icon > StIcon,
1072
#panel .panel-button:hover .popup-menu-arrow {
1073
icon-shadow: none;
1074
}
1075
#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
1077
background-color: rgba(33, 33, 33, 0.01);
1078
box-shadow: inset 0 -2px 0px white;
1079
color: white;
1080
}
1081
#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 {
1083
icon-shadow: none;
1084
}
1085
#panel .panel-button .system-status-icon {
1087
icon-size: 1.14286em;
1088
padding: 0 4px;
1089
}
1090
.unlock-screen #panel .panel-button,
1092
.login-screen #panel .panel-button,
1093
.lock-screen #panel .panel-button {
1094
color: rgba(255, 255, 255, 0.7);
1095
}
1096
.unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
1098
.login-screen #panel .panel-button:focus,
1099
.login-screen #panel .panel-button:hover,
1100
.login-screen #panel .panel-button:active,
1101
.lock-screen #panel .panel-button:focus,
1102
.lock-screen #panel .panel-button:hover,
1103
.lock-screen #panel .panel-button:active {
1104
color: white;
1105
}
1106
#panel .panel-status-indicators-box,
1108
#panel .panel-status-menu-box {
1109
spacing: 2px;
1110
}
1111
#panel .power-status.panel-status-indicators-box {
1113
spacing: 0;
1114
}
1115
#panel .screencast-indicator {
1117
color: #FBBC05;
1118
}
1119
#panel .remote-access-indicator {
1121
color: #FBBC05;
1122
}
1123
#panel.solid {
1125
background-color: #212121;
1126
/* transition from transparent to solid */
1127
transition-duration: 250ms;
1128
background-gradient-direction: none;
1129
text-shadow: none;
1130
}
1131
#panel.solid:overview {
1133
background-color: transparent;
1134
}
1135
#panel.solid .panel-corner {
1137
-panel-corner-background-color: #212121;
1138
}
1139
#panel.solid .panel-button {
1141
color: rgba(255, 255, 255, 0.7);
1142
text-shadow: none;
1143
}
1144
#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 {
1146
color: white;
1147
}
1148
#panel.solid .system-status-icon,
1150
#panel.solid .app-menu-icon > StIcon,
1151
#panel.solid .popup-menu-arrow {
1152
icon-shadow: none;
1153
}
1154
#calendarArea {
1156
padding: 8px 16px;
1157
}
1158
.calendar {
1160
margin-bottom: 0;
1161
}
1162
.calendar,
1164
.datemenu-today-button,
1165
.datemenu-displays-box,
1166
.message-list-sections {
1167
margin: 0 8px;
1168
}
1169
.datemenu-calendar-column {
1171
spacing: 8px;
1172
}
1173
.datemenu-displays-section {
1175
padding-bottom: 0;
1176
}
1177
.datemenu-displays-box {
1179
spacing: 8px;
1180
}
1181
.datemenu-calendar-column {
1183
border: 0 solid rgba(0, 0, 0, 0.12);
1184
}
1185
.datemenu-calendar-column:ltr {
1187
border-left-width: 0;
1188
}
1189
.datemenu-calendar-column:rtl {
1191
border-right-width: 0;
1192
}
1193
.datemenu-today-button,
1195
.world-clocks-button,
1196
.weather-button,
1197
.events-section-title {
1198
min-height: 20px;
1199
padding: 4px 8px;
1200
border-radius: 4px;
1201
}
1202
.datemenu-today-button {
1204
min-height: 48px;
1205
}
1206
.message-list-section-list:ltr {
1208
padding-left: 0;
1209
}
1210
.message-list-section-list:rtl {
1212
padding-right: 0;
1213
}
1214
.datemenu-today-button,
1216
.world-clocks-button,
1217
.weather-button,
1218
.events-section-title {
1219
transition-duration: 100ms;
1220
}
1221
.datemenu-today-button:hover, .datemenu-today-button:focus,
1223
.world-clocks-button:hover,
1224
.world-clocks-button:focus,
1225
.weather-button:hover,
1226
.weather-button:focus,
1227
.events-section-title:hover,
1228
.events-section-title:focus {
1229
color: rgba(0, 0, 0, 0.87);
1230
background-color: rgba(0, 0, 0, 0.08);
1231
}
1232
.datemenu-today-button:active,
1234
.world-clocks-button:active,
1235
.weather-button:active,
1236
.events-section-title:active {
1237
transition-duration: 200ms;
1238
color: rgba(0, 0, 0, 0.87);
1239
background-color: rgba(0, 0, 0, 0.2);
1240
}
1241
.datemenu-today-button .date-label {
1243
font-size: 18pt;
1244
font-weight: 400;
1245
}
1246
.world-clocks-header,
1248
.weather-header,
1249
.events-section-title {
1250
color: rgba(0, 0, 0, 0.54);
1251
font-weight: bold;
1252
}
1253
.weather-header.location {
1255
font-weight: normal;
1256
font-size: 1em;
1257
}
1258
.world-clocks-grid,
1260
.weather-grid {
1261
spacing-rows: 0.4em;
1262
spacing-columns: 0.8em;
1263
}
1264
.weather-box {
1266
spacing: 0.4em;
1267
}
1268
.world-clocks-city {
1270
font-weight: bold;
1271
font-size: 1em;
1272
}
1273
.world-clocks-time {
1275
color: rgba(0, 0, 0, 0.54);
1276
font-feature-settings: "tnum";
1277
font-size: 1em;
1278
}
1279
.world-clocks-timezone {
1281
color: rgba(0, 0, 0, 0.38);
1282
font-feature-settings: "tnum";
1283
font-size: 1em;
1284
}
1285
.weather-forecast-icon {
1287
icon-size: 2.28571em;
1288
}
1289
.weather-forecast-time {
1291
color: rgba(0, 0, 0, 0.54);
1292
font-size: 9pt;
1293
font-weight: 400;
1294
}
1295
.calendar-month-label {
1297
transition-duration: 100ms;
1298
height: 16px;
1299
margin: 2px;
1300
padding: 6px 16px;
1301
border-radius: 4px;
1302
color: rgba(0, 0, 0, 0.87);
1303
font-weight: bold;
1304
text-align: center;
1305
}
1306
.calendar-month-label:focus {
1308
background-color: rgba(0, 0, 0, 0.12);
1309
}
1310
.pager-button {
1312
transition-duration: 100ms;
1313
width: 28px;
1314
height: 28px;
1315
margin: 2px;
1316
border-radius: 100px;
1317
background-color: transparent;
1318
color: rgba(0, 0, 0, 0.54);
1319
}
1320
.pager-button:hover, .pager-button:focus {
1322
background-color: rgba(0, 0, 0, 0.08);
1323
color: rgba(0, 0, 0, 0.87);
1324
}
1325
.pager-button:active {
1327
background-color: rgba(0, 0, 0, 0.2);
1328
color: rgba(0, 0, 0, 0.87);
1329
transition-duration: 200ms;
1330
}
1331
.calendar-change-month-back StIcon, .calendar-change-month-forward StIcon {
1333
icon-size: 1.14286em;
1334
}
1335
.calendar-day-base {
1337
transition-duration: 100ms;
1338
font-size: 9pt;
1339
font-weight: 400;
1340
text-align: center;
1341
width: 28px;
1342
height: 28px;
1343
padding: 0;
1344
margin: 2px;
1345
border-radius: 100px;
1346
font-feature-settings: "tnum";
1347
}
1348
.calendar-day-base:hover, .calendar-day-base:focus {
1350
background-color: rgba(0, 0, 0, 0.08);
1351
}
1352
.calendar-day-base:active {
1354
transition-duration: 200ms;
1355
color: inherit;
1356
background-color: rgba(0, 0, 0, 0.2);
1357
border-color: transparent;
1358
}
1359
.calendar-day-base:selected {
1361
color: rgba(0, 0, 0, 0.87);
1362
background-color: rgba(66, 133, 244, 0.32);
1363
border-color: transparent;
1364
}
1365
.calendar-day-base.calendar-day-heading {
1367
width: 28px;
1368
height: 21px;
1369
margin-top: 2px;
1370
padding: 7px 0 0;
1371
border-radius: 100px;
1372
background-color: transparent;
1373
color: rgba(0, 0, 0, 0.38);
1374
font-size: 9pt;
1375
font-weight: 400;
1376
font-weight: bold;
1377
text-align: center;
1378
}
1379
.calendar-day {
1381
border-width: 0;
1382
}
1383
.calendar-day-top {
1385
border-top-width: 0;
1386
}
1387
.calendar-day-left {
1389
border-left-width: 0;
1390
}
1391
.calendar-nonwork-day {
1393
color: rgba(0, 0, 0, 0.87);
1394
}
1395
.calendar-today {
1397
font-weight: bold !important;
1398
border: none;
1399
}
1400
.calendar-day-with-events {
1402
color: #4285F4;
1403
font-weight: normal;
1404
text-decoration: underline;
1405
background-image: none;
1406
}
1407
.calendar-other-month-day {
1409
color: rgba(0, 0, 0, 0.26);
1410
opacity: 0.5;
1411
}
1412
.calendar-week-number {
1414
width: 28px;
1415
height: 21px;
1416
margin: 2px;
1417
padding: 7px 0 0;
1418
border-radius: 100px;
1419
background-color: transparent;
1420
color: rgba(0, 0, 0, 0.38);
1421
font-size: inherit;
1422
font-weight: bold;
1423
text-align: center;
1424
}
1425
/* Message list */
1427
.message-list {
1428
width: 420px;
1429
}
1430
.message-list-clear-button.button {
1432
background-color: transparent;
1433
margin: 8px 8px 0;
1434
}
1435
.message-list-clear-button.button:hover, .message-list-clear-button.button:focus {
1437
background-color: rgba(0, 0, 0, 0.08);
1438
}
1439
.message-list-clear-button.button:active {
1441
background-color: rgba(0, 0, 0, 0.2);
1442
}
1443
.message-list-sections {
1445
spacing: 8px;
1446
}
1447
.message-list-section,
1449
.message-list-section-list {
1450
spacing: 8px;
1451
}
1452
.message {
1454
transition-duration: 100ms;
1455
min-height: 56px;
1456
background-color: transparent;
1457
border-radius: 4px;
1458
}
1459
.message:hover, .message:focus {
1461
background-color: rgba(0, 0, 0, 0.08);
1462
}
1463
.message:active {
1465
transition-duration: 200ms;
1466
background-color: rgba(0, 0, 0, 0.2);
1467
}
1468
.message-icon-bin {
1470
padding: 8px 0px 8px 8px;
1471
}
1472
.message-icon-bin:rtl {
1474
padding: 8px 8px 8px 0px;
1475
}
1476
.message-icon-bin > StIcon {
1478
color: rgba(0, 0, 0, 0.87);
1479
icon-size: 1.14286em;
1480
-st-icon-style: requested;
1481
margin: 4px 0px 4px 4px;
1482
}
1483
.message-icon-bin > StIcon:rtl {
1485
margin: 4px 4px 4px 0px;
1486
}
1487
.message-icon-bin > .fallback-window-icon {
1489
width: 1.14286em;
1490
height: 1.14286em;
1491
}
1492
.message-secondary-bin {
1494
padding: 0 8px;
1495
}
1496
.message-secondary-bin > .event-time {
1498
min-height: 22px;
1499
padding-top: 2px;
1500
color: rgba(0, 0, 0, 0.54);
1501
font-size: 1em;
1502
/* HACK: the label should be baseline-aligned with a 1em label,
1503
fake this with some bottom padding */
1504
padding-bottom: 0;
1505
}
1506
.message-secondary-bin > StIcon {
1508
icon-size: 1.14286em;
1509
}
1510
.message-title {
1512
min-height: 22px;
1513
padding-top: 2px;
1514
color: rgba(0, 0, 0, 0.87);
1515
font-weight: bold;
1516
font-size: 1em;
1517
}
1518
.message-content {
1520
min-height: 40px;
1521
padding: 8px;
1522
color: rgba(0, 0, 0, 0.54);
1523
font-size: 1em;
1524
}
1525
.message-content * > StIcon {
1527
transition-duration: 100ms;
1528
icon-size: 16px;
1529
border-radius: 16px;
1530
padding: 4px;
1531
color: rgba(0, 0, 0, 0.54);
1532
}
1533
/* FIXME: how do you do this in sass? */
1535
.message-content *:hover > StIcon,
1536
.message-content *:focus > StIcon {
1537
color: rgba(0, 0, 0, 0.87);
1538
background-color: rgba(0, 0, 0, 0.08);
1539
}
1540
.message-content *:active > StIcon {
1542
transition-duration: 200ms;
1543
color: rgba(0, 0, 0, 0.87);
1544
background-color: rgba(0, 0, 0, 0.2);
1545
}
1546
.message-media-control {
1548
transition-duration: 100ms;
1549
margin: 16px 0;
1550
padding: 8px;
1551
border-radius: 100px;
1552
color: rgba(0, 0, 0, 0.54);
1553
}
1554
.message-media-control:hover, .message-media-control:focus {
1556
color: rgba(0, 0, 0, 0.87);
1557
background-color: rgba(0, 0, 0, 0.08);
1558
}
1559
.message-media-control:active {
1561
color: rgba(0, 0, 0, 0.87);
1562
background-color: rgba(0, 0, 0, 0.2);
1563
transition-duration: 200ms;
1564
}
1565
.message-media-control:insensitive {
1567
color: rgba(0, 0, 0, 0.26);
1568
}
1569
.message-media-control:last-child:ltr {
1571
margin-right: 16px;
1572
padding-right: 8px;
1573
}
1574
.message-media-control:last-child:rtl {
1576
margin-left: 16px;
1577
padding-left: 8px;
1578
}
1579
.media-message-cover-icon {
1581
icon-size: 32px !important;
1582
margin: 8px 0px 8px 4px !important;
1583
}
1584
.media-message-cover-icon:rtl {
1586
margin: 8px 4px 8px 0px !important;
1587
}
1588
.media-message-cover-icon.fallback {
1590
icon-size: 16px !important;
1591
padding: 8px;
1592
border: none;
1593
border-radius: 4px;
1594
background-color: rgba(0, 0, 0, 0.12);
1595
color: rgba(0, 0, 0, 0.38);
1596
}
1597
.system-switch-user-submenu-icon {
1599
icon-size: 16px;
1600
padding: 0 4px;
1601
}
1602
#appMenu {
1604
spinner-image: url("process-working.svg");
1605
spacing: 4px;
1606
}
1607
#appMenu .label-shadow {
1609
color: transparent;
1610
}
1611
.app-menu,
1613
.app-well-menu {
1614
max-width: 27.25em;
1615
}
1616
.aggregate-menu {
1618
min-width: 280px;
1619
}
1620
.aggregate-menu .popup-menu-icon {
1622
padding: 0 4px;
1623
}
1624
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr {
1626
/* 8px spacing + 2*4px padding */
1627
padding-left: 16px;
1628
margin-left: 1.14286em;
1629
}
1630
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl {
1632
/* 8px spacing + 2*4px padding */
1633
padding-right: 16px;
1634
margin-right: 1.14286em;
1635
}
1636
.system-menu-action {
1638
-st-icon-style: symbolic;
1639
color: rgba(0, 0, 0, 0.54);
1640
border-radius: 100px;
1641
/* wish we could do 50% */
1642
padding: 12px;
1643
border: none;
1644
transition-duration: 100ms;
1645
}
1646
.system-menu-action:hover, .system-menu-action:focus {
1648
background-color: rgba(0, 0, 0, 0.08);
1649
color: rgba(0, 0, 0, 0.87);
1650
border: none;
1651
padding: 12px;
1652
}
1653
.system-menu-action:active {
1655
background-color: rgba(0, 0, 0, 0.2);
1656
color: rgba(0, 0, 0, 0.87);
1657
transition-duration: 200ms;
1658
}
1659
.system-menu-action > StIcon {
1661
icon-size: 16px;
1662
}
1663
.ripple-box {
1665
width: 48px;
1666
height: 48px;
1667
border-radius: 0 0 48px 0;
1668
background-color: rgba(255, 255, 255, 0.3);
1669
background-image: none;
1670
background-size: auto;
1671
box-shadow: none;
1672
}
1673
.ripple-box:rtl {
1675
border-radius: 0 0 0 48px;
1676
background-image: none;
1677
}
1678
.popup-menu-arrow {
1680
width: 16px;
1681
height: 16px;
1682
icon-size: 1.14286em;
1683
}
1684
.popup-menu-icon {
1686
icon-size: 1.14286em;
1687
}
1688
.window-close {
1690
background-color: transparent;
1691
border-radius: 0;
1692
border: none;
1693
box-shadow: none;
1694
color: transparent;
1695
height: 32px;
1696
width: 32px;
1697
-shell-close-overlap: 16px;
1698
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1699
background-image: url("assets/window-close.svg");
1700
background-size: 32px;
1701
}
1702
.window-close:hover {
1704
background-color: transparent;
1705
border-color: transparent;
1706
color: transparent;
1707
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1708
background-image: url("assets/window-close.svg");
1709
}
1710
.window-close:active {
1712
background-color: transparent;
1713
border-color: transparent;
1714
color: transparent;
1715
background-image: url("assets/window-close-active.svg");
1716
}
1717
.window-close:rtl {
1719
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1720
}
1721
.window-close:rtl:hover {
1723
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1724
}
1725
/* NETWORK DIALOGS */
1727
.nm-dialog {
1728
max-height: 34em;
1729
min-height: 31em;
1730
min-width: 32em;
1731
}
1732
.nm-dialog-content {
1734
spacing: 20px;
1735
padding: 24px;
1736
}
1737
.nm-dialog-header-hbox {
1739
spacing: 10px;
1740
}
1741
.nm-dialog-airplane-box {
1743
spacing: 12px;
1744
}
1745
.nm-dialog-airplane-headline {
1747
font-weight: bold;
1748
text-align: center;
1749
}
1750
.nm-dialog-airplane-text {
1752
color: rgba(0, 0, 0, 0.87);
1753
}
1754
.nm-dialog-header-icon {
1756
icon-size: 32px;
1757
}
1758
.nm-dialog-scroll-view {
1760
border: none;
1761
}
1762
.nm-dialog-header {
1764
font-size: 15pt;
1765
font-weight: 500;
1766
}
1767
.nm-dialog-item {
1769
transition-duration: 100ms;
1770
font-size: 1em;
1771
border-bottom: none;
1772
border-radius: 4px;
1773
padding: 12px;
1774
spacing: 20px;
1775
}
1776
.nm-dialog-item:hover, .nm-dialog-item:focus {
1778
background-color: rgba(0, 0, 0, 0.08);
1779
}
1780
.nm-dialog-item:active {
1782
transition-duration: 200ms;
1783
background-color: rgba(0, 0, 0, 0.2);
1784
}
1785
.nm-dialog-item:selected {
1787
background-color: rgba(66, 133, 244, 0.32);
1788
color: rgba(0, 0, 0, 0.87);
1789
}
1790
.nm-dialog-icons {
1792
spacing: .5em;
1793
}
1794
.nm-dialog-icon {
1796
icon-size: 16px;
1797
}
1798
.no-networks-label {
1800
color: rgba(0, 0, 0, 0.38);
1801
}
1802
.no-networks-box {
1804
spacing: 12px;
1805
}
1806
/* OVERVIEW */
1808
#overview {
1809
spacing: 24px;
1810
}
1811
.overview-controls {
1813
padding-bottom: 32px;
1814
}
1815
.window-picker {
1817
-horizontal-spacing: 16px;
1818
-vertical-spacing: 16px;
1819
padding: 0 16px 32px;
1820
}
1821
.window-picker.external-monitor {
1823
padding: 16px;
1824
}
1825
.window-clone-border {
1827
border: 4px solid rgba(255, 255, 255, 0.3);
1828
border-radius: 4px;
1829
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
1830
}
1831
.window-caption {
1833
spacing: 25px;
1834
color: white;
1835
background-color: rgba(0, 0, 0, 0.6);
1836
border-radius: 4px;
1837
padding: 4px 8px;
1838
}
1839
.search-entry {
1841
width: 304px;
1842
padding: 0 8px;
1843
border-radius: 4px 4px 0 0;
1844
color: rgba(255, 255, 255, 0.5);
1845
selection-background-color: rgba(255, 255, 255, 0.3);
1846
selected-color: white;
1847
transition-duration: 100ms;
1848
background-color: rgba(255, 255, 255, 0.04);
1849
border-color: transparent;
1850
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1851
}
1852
.search-entry:hover {
1854
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1855
}
1856
.search-entry:focus {
1858
border-color: transparent;
1859
box-shadow: inset 0 -2px white;
1860
padding: 0 8px;
1861
border-width: 0;
1862
color: white;
1863
}
1864
.search-entry .search-entry-icon {
1866
icon-size: 16px;
1867
padding: 0 0;
1868
color: rgba(255, 255, 255, 0.7);
1869
}
1870
.search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
1872
color: white;
1873
}
1874
#searchResultsBin {
1876
max-width: 1000px;
1877
}
1878
#searchResultsContent {
1880
padding-left: 20px;
1881
padding-right: 20px;
1882
spacing: 16px;
1883
}
1884
.search-section {
1886
spacing: 16px;
1887
}
1888
.search-section-content {
1890
spacing: 32px;
1891
}
1892
.list-search-results {
1894
spacing: 3px;
1895
}
1896
.search-section-separator {
1898
height: 1px;
1899
background-color: rgba(255, 255, 255, 0.12);
1900
}
1901
.search-section:last-child .search-section-separator {
1903
background-color: transparent;
1904
}
1905
.list-search-result-content {
1907
spacing: 30px;
1908
}
1909
.list-search-result-title {
1911
font-size: 11.25pt;
1912
font-weight: 400;
1913
color: white;
1914
spacing: 12px;
1915
}
1916
.list-search-result-description {
1918
color: rgba(255, 255, 255, 0.7);
1919
}
1920
.list-search-provider-details {
1922
width: 150px;
1923
color: rgba(255, 255, 255, 0.7);
1924
margin-top: 0.24em;
1925
}
1926
.list-search-provider-content {
1928
spacing: 20px;
1929
}
1930
.search-provider-icon {
1932
padding: 15px;
1933
}
1934
/* DASHBOARD */
1936
#dash {
1937
transition-duration: 250ms;
1938
font-size: 1em;
1939
color: white;
1940
background-color: rgba(255, 255, 255, 0.1);
1941
padding: 3px 0;
1942
border: none;
1943
border-left: 0px;
1944
border-radius: 0px 4px 4px 0px;
1945
}
1946
#dash:rtl {
1948
border-radius: 4px 0 0 4px;
1949
}
1950
#dash .placeholder {
1952
background-image: url("assets/dash-placeholder.svg");
1953
background-size: contain;
1954
height: 24px;
1955
}
1956
#dash .empty-dash-drop-target {
1958
width: 24px;
1959
height: 24px;
1960
}
1961
.dash-item-container > StWidget {
1963
padding: 3px 6px;
1964
}
1965
.dash-label {
1967
border-radius: 4px;
1968
padding: 7px 8px;
1969
color: rgba(0, 0, 0, 0.87);
1970
background-color: #FFFFFF;
1971
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1972
text-align: center;
1973
-x-offset: 8px;
1974
}
1975
/* App Vault/Grid */
1977
.icon-grid {
1978
spacing: 30px;
1979
-shell-grid-horizontal-item-size: 136px;
1980
-shell-grid-vertical-item-size: 136px;
1981
}
1982
.icon-grid .overview-icon {
1984
icon-size: 96px;
1985
}
1986
.system-action-icon {
1988
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
1989
background-color: #212121;
1990
color: #FFFFFF;
1991
border-radius: 99px;
1992
icon-size: 48px;
1993
}
1994
.app-view-controls {
1996
width: 320px;
1997
padding-bottom: 32px;
1998
}
1999
.app-view-control {
2001
padding: 0 16px;
2002
font-weight: bold;
2003
color: rgba(255, 255, 255, 0.7);
2004
}
2005
.app-view-control:hover {
2007
color: white;
2008
background-color: rgba(255, 255, 255, 0.08) !important;
2009
}
2010
.app-view-control:active {
2012
color: white;
2013
background-color: rgba(255, 255, 255, 0.2) !important;
2014
}
2015
.app-view-control:checked {
2017
color: white;
2018
background-color: rgba(0, 0, 0, 0.01) !important;
2019
box-shadow: inset 0 2px 0 white;
2020
}
2021
.app-view-control:first-child {
2023
border-right-width: 0;
2024
border-radius: 4px;
2025
}
2026
.app-view-control:first-child:checked {
2028
border-radius: 0;
2029
}
2030
.app-view-control:last-child {
2032
border-radius: 4px;
2033
}
2034
.app-view-control:last-child:checked {
2036
border-radius: 0;
2037
}
2038
.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
2040
.list-search-result:focus,
2041
.list-search-result:selected,
2042
.list-search-result:hover {
2043
background-color: rgba(255, 255, 255, 0.08);
2044
transition-duration: 0ms;
2045
}
2046
.search-provider-icon:active, .search-provider-icon:checked,
2048
.list-search-result:active,
2049
.list-search-result:checked {
2050
background-color: rgba(255, 255, 255, 0.2);
2051
transition-duration: 200ms;
2052
}
2053
.app-well-app:hover .overview-icon,
2055
.app-well-app:focus .overview-icon,
2056
.app-well-app:selected .overview-icon,
2057
.app-well-app.app-folder:hover .overview-icon,
2058
.app-well-app.app-folder:focus .overview-icon,
2059
.app-well-app.app-folder:selected .overview-icon,
2060
.show-apps:hover .overview-icon,
2061
.show-apps:focus .overview-icon,
2062
.show-apps:selected .overview-icon,
2063
.grid-search-result:hover .overview-icon,
2064
.grid-search-result:focus .overview-icon,
2065
.grid-search-result:selected .overview-icon {
2066
background-color: rgba(255, 255, 255, 0.08);
2067
transition-duration: 0ms;
2068
border-image: none;
2069
background-image: none;
2070
}
2071
.app-well-app:active .overview-icon,
2073
.app-well-app:checked .overview-icon,
2074
.app-well-app.app-folder:active .overview-icon,
2075
.app-well-app.app-folder:checked .overview-icon,
2076
.show-apps:active .overview-icon,
2077
.show-apps:checked .overview-icon,
2078
.grid-search-result:active .overview-icon,
2079
.grid-search-result:checked .overview-icon {
2080
background-color: rgba(255, 255, 255, 0.2);
2081
box-shadow: 0 0 transparent;
2082
transition-duration: 200ms;
2083
}
2084
.app-well-app-running-dot {
2086
width: 32px;
2087
height: 2px;
2088
background-color: white;
2089
margin-bottom: 0;
2090
}
2091
.search-provider-icon,
2093
.list-search-result, .app-well-app .overview-icon,
2094
.app-well-app.app-folder .overview-icon,
2095
.show-apps .overview-icon,
2096
.grid-search-result .overview-icon {
2097
color: white;
2098
border-radius: 4px;
2099
padding: 6px;
2100
border: none;
2101
transition-duration: 100ms;
2102
text-align: center;
2103
}
2104
.app-well-app.app-folder > .overview-icon {
2106
background-color: rgba(255, 255, 255, 0.1);
2107
}
2108
.show-apps .show-apps-icon {
2110
color: rgba(255, 255, 255, 0.7);
2111
}
2112
.show-apps:hover .show-apps-icon,
2114
.show-apps:active .show-apps-icon,
2115
.show-apps:checked .show-apps-icon,
2116
.show-apps:focus .show-apps-icon {
2117
color: white;
2118
transition-duration: 100ms;
2119
}
2120
.app-folder-popup {
2122
-arrow-border-radius: 4px;
2123
-arrow-background-color: rgba(255, 255, 255, 0.1);
2124
-arrow-base: 24px;
2125
-arrow-rise: 12px;
2126
}
2127
.app-folder-popup-bin {
2129
padding: 5px;
2130
}
2131
.app-folder-icon {
2133
padding: 5px;
2134
spacing-rows: 5px;
2135
spacing-columns: 5px;
2136
}
2137
.page-indicator {
2139
padding: 15px 20px;
2140
}
2141
.page-indicator .page-indicator-icon {
2143
width: 12px;
2144
height: 12px;
2145
border: none;
2146
border-radius: 12px;
2147
background-image: none;
2148
background-color: rgba(255, 255, 255, 0.3);
2149
transition-duration: 100ms;
2150
}
2151
.page-indicator:hover .page-indicator-icon {
2153
border-color: transparent;
2154
background-image: none;
2155
background-color: rgba(255, 255, 255, 0.5);
2156
}
2157
.page-indicator:active .page-indicator-icon {
2159
border: none;
2160
margin: 0;
2161
background-image: none;
2162
background-color: rgba(255, 255, 255, 0.7);
2163
}
2164
.page-indicator:checked .page-indicator-icon,
2166
.page-indicator:checked:active .page-indicator-icon {
2167
background-image: none;
2168
background-color: white;
2169
transition-duration: 0ms;
2170
}
2171
.page-indicator:checked:active {
2173
background-image: none;
2174
background-color: transparent;
2175
}
2176
.app-well-app > .overview-icon.overview-icon-with-label,
2178
.grid-search-result .overview-icon.overview-icon-with-label {
2179
padding: 10px 8px 5px 8px;
2180
spacing: 4px;
2181
}
2182
.workspace-thumbnails {
2184
visible-width: 32px;
2185
spacing: 12px;
2186
padding: 12px;
2187
border-radius: 4px 0 0 4px;
2188
}
2189
.workspace-thumbnails:rtl {
2191
border-radius: 0 4px 4px 0;
2192
}
2193
.workspace-thumbnails .placeholder {
2195
background-image: url("assets/dash-placeholder.svg");
2196
background-size: contain;
2197
height: 24px;
2198
}
2199
.workspace-thumbnail-indicator {
2201
border: 0 solid white;
2202
border-left-width: 2px;
2203
padding: 6px 10px;
2204
border-radius: 0;
2205
}
2206
.search-display > StBoxLayout,
2208
.all-apps,
2209
.frequent-apps > StBoxLayout {
2210
padding: 0px 88px 10px 88px;
2211
}
2212
.workspace-thumbnails {
2214
transition-duration: 250ms;
2215
color: white;
2216
background-color: rgba(255, 255, 255, 0.1);
2217
border: none;
2218
}
2219
.search-statustext, .no-frequent-applications-label {
2221
font-size: 45px;
2222
font-weight: 400;
2223
color: rgba(255, 255, 255, 0.5);
2224
}
2225
/* NOTIFICATIONS & MESSAGE TRAY */
2227
.url-highlighter {
2228
link-color: #4285F4;
2229
}
2230
.notification-banner {
2232
font-size: 1em;
2233
width: 34em;
2234
min-height: 56px;
2235
margin: 5px;
2236
border-radius: 4px;
2237
color: rgba(0, 0, 0, 0.87);
2238
background-color: #FFFFFF;
2239
border: none;
2240
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2241
}
2242
.notification-banner:hover {
2244
background-color: #FFFFFF;
2245
}
2246
.notification-banner:focus {
2248
background-color: #FFFFFF;
2249
}
2250
.notification-banner .notification-icon {
2252
padding: 5px;
2253
}
2254
.notification-banner .notification-content {
2256
padding: 5px;
2257
spacing: 5px;
2258
}
2259
.notification-banner .secondary-icon {
2261
icon-size: 1.14286em;
2262
}
2263
.notification-banner .notification-actions {
2265
background-color: transparent;
2266
padding-top: 0;
2267
padding: 4px;
2268
spacing: 4px;
2269
}
2270
.notification-banner .notification-button {
2272
transition-duration: 100ms;
2273
min-height: 32px;
2274
padding: 0 8px;
2275
border-radius: 4px;
2276
background-color: transparent;
2277
color: rgba(0, 0, 0, 0.54);
2278
font-weight: 500;
2279
}
2280
.notification-banner .notification-button:first-child {
2282
border-radius: 4px;
2283
}
2284
.notification-banner .notification-button:last-child {
2286
border-radius: 4px;
2287
}
2288
.notification-banner .notification-button:hover, .notification-banner .notification-buttonfocus {
2290
background-color: rgba(0, 0, 0, 0.08);
2291
color: rgba(0, 0, 0, 0.87);
2292
}
2293
.notification-banner .notification-button:active {
2295
transition-duration: 200ms;
2296
background-color: rgba(0, 0, 0, 0.2);
2297
color: rgba(0, 0, 0, 0.87);
2298
}
2299
.summary-source-counter {
2301
font-size: 1em;
2302
font-weight: bold;
2303
height: 1.6em;
2304
width: 1.6em;
2305
-shell-counter-overlap-x: 3px;
2306
-shell-counter-overlap-y: 3px;
2307
background-color: #4285F4;
2308
color: white;
2309
border: 2px solid white;
2310
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
2311
border-radius: 0.9em;
2312
}
2313
.secondary-icon {
2315
icon-size: 1.14286em;
2316
}
2317
.chat-body {
2319
spacing: 5px;
2320
}
2321
.chat-response {
2323
margin: 5px;
2324
}
2325
.chat-log-message {
2327
color: rgba(0, 0, 0, 0.87);
2328
}
2329
.chat-new-group {
2331
padding-top: 1em;
2332
}
2333
.chat-received {
2335
padding-left: 4px;
2336
}
2337
.chat-received:rtl {
2339
padding-left: 0px;
2340
padding-right: 4px;
2341
}
2342
.chat-sent {
2344
padding-left: 18pt;
2345
color: rgba(0, 0, 0, 0.54);
2346
}
2347
.chat-sent:rtl {
2349
padding-left: 0;
2350
padding-right: 18pt;
2351
}
2352
.chat-meta-message {
2354
padding-left: 4px;
2355
font-size: 9pt;
2356
font-weight: 400;
2357
color: rgba(0, 0, 0, 0.54);
2358
}
2359
.chat-meta-message:rtl {
2361
padding-left: 0;
2362
padding-right: 4px;
2363
}
2364
.hotplug-transient-box {
2366
spacing: 6px;
2367
padding: 2px 72px 2px 12px;
2368
}
2369
.hotplug-notification-item {
2371
padding: 2px 10px;
2372
}
2373
.hotplug-notification-item:focus {
2375
padding: 1px 71px 1px 11px;
2376
}
2377
.hotplug-notification-item-icon {
2379
icon-size: 24px;
2380
padding: 2px 5px;
2381
}
2382
.hotplug-resident-box {
2384
spacing: 8px;
2385
}
2386
.hotplug-resident-mount {
2388
transition-duration: 100ms;
2389
spacing: 8px;
2390
border-radius: 4px;
2391
}
2392
.hotplug-resident-mount:hover {
2394
background-color: rgba(0, 0, 0, 0.08);
2395
}
2396
.hotplug-resident-mount:active {
2398
transition-duration: 200ms;
2399
background-color: rgba(0, 0, 0, 0.2);
2400
}
2401
.hotplug-resident-mount-label {
2403
color: inherit;
2404
padding-left: 6px;
2405
}
2406
.hotplug-resident-mount-icon {
2408
icon-size: 24px;
2409
padding-left: 6px;
2410
}
2411
.hotplug-resident-eject-icon {
2413
icon-size: 16px;
2414
}
2415
.hotplug-resident-eject-button {
2417
padding: 7px;
2418
border-radius: 4px;
2419
color: rgba(0, 0, 0, 0.87);
2420
}
2421
/* Eeeky things */
2423
.magnifier-zoom-region {
2424
border: 2px solid #4285F4;
2425
}
2426
.magnifier-zoom-region.full-screen {
2428
border-width: 0;
2429
}
2430
/* On-screen Keyboard */
2432
.word-suggestions {
2433
font-size: 11.25pt;
2434
font-weight: 400;
2435
spacing: 12px;
2436
min-height: 20pt;
2437
}
2438
#keyboard {
2440
background-color: rgba(0, 0, 0, 0.3);
2441
}
2442
#keyboard .page-indicator {
2444
padding: 4px 4px;
2445
}
2446
#keyboard .page-indicator .page-indicator-icon {
2448
width: 8px;
2449
height: 8px;
2450
}
2451
.key-container {
2453
padding: 4px;
2454
spacing: 4px;
2455
}
2456
.keyboard-key {
2458
min-height: 1.2em;
2459
min-width: 1.2em;
2460
font-size: 2em;
2461
font-weight: 500;
2462
border-radius: 4px;
2463
border: none;
2464
color: rgba(0, 0, 0, 0.87);
2465
background-color: #FFFFFF;
2466
border-color: transparent;
2467
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2468
text-shadow: none;
2469
icon-shadow: none;
2470
transition-duration: 100ms;
2471
}
2472
.keyboard-key:focus {
2474
color: rgba(0, 0, 0, 0.87);
2475
text-shadow: none;
2476
icon-shadow: none;
2477
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2478
}
2479
.keyboard-key:hover, .keyboard-key:checked {
2481
color: rgba(0, 0, 0, 0.87);
2482
background-color: #FFFFFF;
2483
border-color: transparent;
2484
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2485
text-shadow: none;
2486
icon-shadow: none;
2487
}
2488
.keyboard-key:active {
2490
color: rgba(0, 0, 0, 0.87);
2491
background-color: rgba(205, 205, 205, 0.9688);
2492
border-color: transparent;
2493
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2494
text-shadow: none;
2495
icon-shadow: none;
2496
transition-duration: 200ms;
2497
}
2498
.keyboard-key:grayed {
2500
background-color: rgba(0, 0, 0, 0.3);
2501
color: white;
2502
border-color: rgba(0, 0, 0, 0.3);
2503
}
2504
.keyboard-key.default-key {
2506
border-color: transparent;
2507
background-color: #FFFFFF;
2508
background-size: 24px;
2509
}
2510
.keyboard-key.default-key:active {
2512
background-color: rgba(214, 214, 214, 0.974);
2513
}
2514
.keyboard-key.enter-key {
2516
border-color: transparent;
2517
background-color: #4285F4;
2518
background-image: url("assets/key-enter.svg");
2519
}
2520
.keyboard-key.enter-key:active {
2522
background-color: #689df6;
2523
}
2524
.keyboard-key.shift-key-lowercase {
2526
background-image: url("assets/key-shift.svg");
2527
}
2528
.keyboard-key.shift-key-uppercase {
2530
background-image: url("assets/key-shift-uppercase.svg");
2531
}
2532
.keyboard-key.shift-key-uppercase:latched {
2534
background-image: url("assets/key-shift-latched-uppercase.svg");
2535
}
2536
.keyboard-key.hide-key {
2538
background-image: url("assets/key-hide.svg");
2539
}
2540
.keyboard-key.layout-key {
2542
background-image: url("assets/key-layout.svg");
2543
}
2544
.keyboard-subkeys {
2546
color: inherit;
2547
padding: 5px;
2548
-arrow-border-radius: 0;
2549
-arrow-background-color: transparent;
2550
-arrow-border-width: 0;
2551
-arrow-border-color: transparent;
2552
-arrow-base: 0;
2553
-arrow-rise: 0;
2554
-boxpointer-gap: 5px;
2555
background-color: #FFFFFF;
2556
border-radius: 4px;
2557
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2558
}
2559
.emoji-page .keyboard-key {
2561
border: none;
2562
color: rgba(255, 255, 255, 0.7);
2563
background-color: transparent;
2564
border-color: transparent;
2565
box-shadow: 0 0 transparent;
2566
text-shadow: none;
2567
icon-shadow: none;
2568
transition-duration: 100ms;
2569
}
2570
.emoji-page .keyboard-key:hover, .emoji-page .keyboard-key:focus {
2572
color: white;
2573
background-color: rgba(255, 255, 255, 0.08);
2574
border-color: transparent;
2575
box-shadow: 0 0 transparent;
2576
text-shadow: none;
2577
icon-shadow: none;
2578
}
2579
.emoji-page .keyboard-key:active {
2581
color: white;
2582
background-color: rgba(255, 255, 255, 0.2);
2583
border-color: transparent;
2584
box-shadow: 0 0 transparent;
2585
text-shadow: none;
2586
icon-shadow: none;
2587
transition-duration: 200ms;
2588
}
2589
.emoji-panel .keyboard-key:latched {
2591
border-color: transparent;
2592
background-color: #4285F4;
2593
color: white;
2594
}
2595
.candidate-popup-content {
2597
padding: 8px;
2598
spacing: 0;
2599
}
2600
.candidate-index {
2602
padding: 0 4px 0 0;
2603
color: rgba(0, 0, 0, 0.54);
2604
}
2605
.candidate-box {
2607
transition-duration: 100ms;
2608
min-height: 28px;
2609
padding: 0 8px;
2610
border-radius: 4px;
2611
}
2612
.candidate-box:hover {
2614
background-color: rgba(0, 0, 0, 0.08);
2615
color: rgba(0, 0, 0, 0.87);
2616
transition-duration: 0ms;
2617
}
2618
.candidate-box:active {
2620
background-color: rgba(0, 0, 0, 0.2);
2621
color: rgba(0, 0, 0, 0.87);
2622
transition-duration: 200ms;
2623
}
2624
.candidate-box:selected {
2626
background-color: rgba(66, 133, 244, 0.32);
2627
color: rgba(0, 0, 0, 0.87);
2628
transition-duration: 0ms;
2629
}
2630
.candidate-page-button-box {
2632
height: 28px;
2633
}
2634
.vertical .candidate-page-button-box {
2636
padding-top: 0;
2637
}
2638
.horizontal .candidate-page-button-box {
2640
padding-left: 0;
2641
}
2642
.candidate-page-button {
2644
min-width: 28px;
2645
min-height: 28px;
2646
padding: 0;
2647
}
2648
.candidate-page-button-previous {
2650
border-radius: 4px;
2651
border-right-width: 0;
2652
}
2653
.candidate-page-button-next {
2655
border-radius: 4px;
2656
}
2657
.candidate-page-button-icon {
2659
icon-size: 1.14286em;
2660
}
2661
/* Auth Dialogs & Screen Shield */
2663
.user-icon {
2664
background-size: contain;
2665
border: none;
2666
color: white;
2667
border-radius: 9999px;
2668
}
2669
.user-icon:hover {
2671
border-color: white;
2672
color: white;
2673
}
2674
.login-dialog-banner-view {
2676
padding-top: 24px;
2677
max-width: 23em;
2678
}
2679
.login-dialog {
2681
border: none;
2682
background-color: transparent;
2683
}
2684
.login-dialog StEntry {
2686
color: white;
2687
selection-background-color: rgba(255, 255, 255, 0.3);
2688
selected-color: white;
2689
transition-duration: 100ms;
2690
background-color: rgba(255, 255, 255, 0.04);
2691
border-color: transparent;
2692
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2693
}
2694
.login-dialog StEntry:focus {
2696
border-color: transparent;
2697
box-shadow: inset 0 -2px white;
2698
}
2699
.login-dialog StEntry:insensitive {
2701
color: rgba(0, 0, 0, 0.38);
2702
border-color: transparent;
2703
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
2704
color: rgba(255, 255, 255, 0.5);
2705
}
2706
.login-dialog .modal-dialog-button-box {
2708
spacing: 3px;
2709
}
2710
.login-dialog .modal-dialog-button {
2712
padding: 0 16px;
2713
color: rgba(255, 255, 255, 0.7);
2714
background-color: transparent;
2715
border-color: transparent;
2716
box-shadow: 0 0 transparent;
2717
text-shadow: none;
2718
icon-shadow: none;
2719
transition-duration: 100ms;
2720
}
2721
.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus {
2723
color: white;
2724
background-color: rgba(255, 255, 255, 0.08);
2725
border-color: transparent;
2726
box-shadow: 0 0 transparent;
2727
text-shadow: none;
2728
icon-shadow: none;
2729
}
2730
.login-dialog .modal-dialog-button:active {
2732
color: white;
2733
background-color: rgba(255, 255, 255, 0.2);
2734
border-color: transparent;
2735
box-shadow: 0 0 transparent;
2736
text-shadow: none;
2737
icon-shadow: none;
2738
transition-duration: 200ms;
2739
}
2740
.login-dialog .modal-dialog-button:insensitive {
2742
color: rgba(255, 255, 255, 0.3);
2743
background-color: transparent;
2744
border-color: transparent;
2745
box-shadow: 0 0 transparent;
2746
text-shadow: none;
2747
icon-shadow: none;
2748
}
2749
.login-dialog .modal-dialog-button:default {
2751
color: white;
2752
background-color: #4285F4;
2753
border-color: transparent;
2754
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2755
text-shadow: none;
2756
icon-shadow: none;
2757
transition-duration: 100ms;
2758
}
2759
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
2761
color: white;
2762
background-color: #4285F4;
2763
border-color: transparent;
2764
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2765
text-shadow: none;
2766
icon-shadow: none;
2767
}
2768
.login-dialog .modal-dialog-button:default:active {
2770
color: white;
2771
background-color: #6fa2f7;
2772
border-color: transparent;
2773
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2774
text-shadow: none;
2775
icon-shadow: none;
2776
transition-duration: 200ms;
2777
}
2778
.login-dialog .modal-dialog-button:default:insensitive {
2780
color: rgba(255, 255, 255, 0.5);
2781
background-color: rgba(255, 255, 255, 0.04);
2782
border-color: transparent;
2783
box-shadow: 0 0 transparent;
2784
text-shadow: none;
2785
icon-shadow: none;
2786
}
2787
.login-dialog-logo-bin {
2789
padding: 24px 0px;
2790
}
2791
.login-dialog-banner {
2793
color: rgba(255, 255, 255, 0.7);
2794
}
2795
.login-dialog-button-box {
2797
spacing: 5px;
2798
}
2799
.login-dialog-message-warning {
2801
color: #FBBC05;
2802
}
2803
.login-dialog-message-hint {
2805
padding-top: 0;
2806
padding-bottom: 20px;
2807
}
2808
.login-dialog-user-selection-box {
2810
padding: 100px 0px;
2811
}
2812
.login-dialog-not-listed-label {
2814
padding-left: 2px;
2815
}
2816
.login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
2818
.login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
2819
color: white;
2820
}
2821
.login-dialog-not-listed-label {
2823
transition-duration: 100ms;
2824
font-size: 1em;
2825
font-weight: bold;
2826
color: rgba(255, 255, 255, 0.7);
2827
padding-top: 1em;
2828
border-radius: 4px;
2829
}
2830
.login-dialog-not-listed-label:hover {
2832
background-color: rgba(255, 255, 255, 0.08);
2833
color: white;
2834
}
2835
.login-dialog-not-listed-label:focus {
2837
background-color: rgba(255, 255, 255, 0.12);
2838
}
2839
.login-dialog-not-listed-label:active {
2841
transition-duration: 200ms;
2842
background-color: rgba(255, 255, 255, 0.2);
2843
color: white;
2844
}
2845
.login-dialog-user-list-view {
2847
-st-vfade-offset: 1em;
2848
}
2849
.login-dialog-user-list {
2851
spacing: 12px;
2852
width: 23em;
2853
}
2854
.login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
2856
background-color: rgba(255, 255, 255, 0.12);
2857
color: white;
2858
}
2859
.login-dialog-user-list:expanded .login-dialog-user-list-item:hover {
2861
background-color: rgba(255, 255, 255, 0.08);
2862
color: white;
2863
}
2864
.login-dialog-user-list:expanded .login-dialog-user-list-item:active {
2866
background-color: rgba(255, 255, 255, 0.2);
2867
color: white;
2868
}
2869
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
2871
border-right: 2px solid white;
2872
}
2873
.login-dialog-user-list-item {
2875
transition-duration: 100ms;
2876
border-radius: 4px;
2877
padding: 6px;
2878
color: rgba(255, 255, 255, 0.7);
2879
}
2880
.login-dialog-user-list-item:ltr .user-widget {
2882
padding-right: 1em;
2883
}
2884
.login-dialog-user-list-item:rtl .user-widget {
2886
padding-left: 1em;
2887
}
2888
.login-dialog-user-list-item:hover {
2890
background-color: rgba(255, 255, 255, 0.08);
2891
color: white;
2892
}
2893
.login-dialog-user-list-item:active {
2895
transition-duration: 200ms;
2896
background-color: rgba(255, 255, 255, 0.2);
2897
color: white;
2898
}
2899
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
2901
height: 2px;
2902
margin-top: 6px;
2903
background-color: white;
2904
}
2905
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
2907
background-color: white;
2908
}
2909
.login-dialog-username,
2911
.user-widget-label {
2912
color: white;
2913
font-size: 15pt;
2914
font-weight: 500;
2915
text-align: left;
2916
padding-left: 15px;
2917
}
2918
.user-widget-label:ltr {
2920
padding-left: 14px;
2921
}
2922
.user-widget-label:rtl {
2924
padding-right: 14px;
2925
}
2926
.login-dialog-prompt-layout {
2928
padding-top: 24px;
2929
padding-bottom: 12px;
2930
spacing: 8px;
2931
width: 23em;
2932
}
2933
.login-dialog-prompt-label {
2935
color: rgba(255, 255, 255, 0.7);
2936
font-size: 1em;
2937
padding-top: 1em;
2938
}
2939
.login-dialog-session-list-button StIcon {
2941
icon-size: 1.25em;
2942
}
2943
.login-dialog-session-list-button {
2945
color: rgba(255, 255, 255, 0.7);
2946
}
2947
.login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
2949
color: white;
2950
}
2951
.login-dialog-session-list-button:active {
2953
color: white;
2954
}
2955
.screen-shield-arrows {
2957
padding-bottom: 3em;
2958
}
2959
.screen-shield-arrows Gjs_Arrow {
2961
color: white;
2962
width: 80px;
2963
height: 48px;
2964
-arrow-thickness: 12px;
2965
-arrow-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2966
}
2967
.screen-shield-clock {
2969
color: white;
2970
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2971
font-weight: normal;
2972
text-align: center;
2973
padding-bottom: 1.5em;
2974
}
2975
.screen-shield-clock-time {
2977
font-size: 112px;
2978
font-weight: 300;
2979
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2980
font-feature-settings: "tnum";
2981
}
2982
.screen-shield-clock-date {
2984
font-size: 45px;
2985
font-weight: 400;
2986
}
2987
.screen-shield-notifications-container {
2989
spacing: 6px;
2990
width: 30em;
2991
background-color: transparent;
2992
max-height: 500px;
2993
}
2994
.screen-shield-notifications-container .summary-notification-stack-scrollview {
2996
padding-top: 0;
2997
padding-bottom: 0;
2998
}
2999
.screen-shield-notifications-container .notification,
3001
.screen-shield-notifications-container .screen-shield-notification-source {
3002
padding: 8px;
3003
border: none;
3004
background-color: rgba(0, 0, 0, 0.3);
3005
color: white;
3006
border-radius: 4px;
3007
}
3008
.screen-shield-notifications-container .notification {
3010
margin-right: 16px;
3011
}
3012
.screen-shield-notification-label {
3014
min-height: 22px;
3015
padding: 2px 0px 0px 16px;
3016
font-weight: bold;
3017
}
3018
.screen-shield-notification-count-text {
3020
min-height: 22px;
3021
padding: 2px 0px 0px 16px;
3022
color: rgba(255, 255, 255, 0.7);
3023
}
3024
#panel.lock-screen {
3026
background-color: rgba(0, 0, 0, 0.3);
3027
}
3028
.screen-shield-background {
3030
background: black;
3031
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
3032
}
3033
#lockDialogGroup {
3035
background: #303030;
3036
background-size: cover;
3037
}
3038
#LookingGlassDialog {
3040
background-color: #FFFFFF;
3041
spacing: 4px;
3042
padding: 0;
3043
border: none;
3044
border-radius: 4px;
3045
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
3046
}
3047
#LookingGlassDialog > #Toolbar {
3049
padding: 0 8px;
3050
border: none;
3051
border-radius: 0;
3052
background-color: rgba(255, 255, 255, 0.01);
3053
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
3054
}
3055
#LookingGlassDialog .labels {
3057
spacing: 0;
3058
}
3059
#LookingGlassDialog .notebook-tab {
3061
-natural-hpadding: 12px;
3062
-minimum-hpadding: 6px;
3063
font-weight: bold;
3064
color: rgba(0, 0, 0, 0.54);
3065
transition-duration: 100ms;
3066
padding-left: 16px;
3067
padding-right: 16px;
3068
min-height: 32px;
3069
padding: 0 32px;
3070
}
3071
#LookingGlassDialog .notebook-tab:hover {
3073
background-color: rgba(0, 0, 0, 0.08);
3074
color: rgba(0, 0, 0, 0.87);
3075
text-shadow: none;
3076
}
3077
#LookingGlassDialog .notebook-tab:active {
3079
background-color: rgba(0, 0, 0, 0.2);
3080
color: rgba(0, 0, 0, 0.87);
3081
transition-duration: 200ms;
3082
}
3083
#LookingGlassDialog .notebook-tab:selected {
3085
border-bottom-width: 0;
3086
border-color: transparent;
3087
background-color: rgba(255, 255, 255, 0.01);
3088
box-shadow: inset 0 -2px 0px #4285F4;
3089
color: rgba(0, 0, 0, 0.87);
3090
text-shadow: none;
3091
}
3092
#LookingGlassDialog StBoxLayout#EvalBox {
3094
padding: 4px;
3095
spacing: 4px;
3096
}
3097
#LookingGlassDialog StBoxLayout#ResultsArea {
3099
spacing: 4px;
3100
}
3101
.lg-dialog StEntry {
3103
selection-background-color: rgba(66, 133, 244, 0.32);
3104
selected-color: rgba(0, 0, 0, 0.87);
3105
}
3106
.lg-dialog .shell-link {
3108
color: #4285F4;
3109
}
3110
.lg-dialog .shell-link:hover {
3112
color: #4285F4;
3113
}
3114
.lg-completions-text {
3116
font-size: 1em;
3117
font-style: italic;
3118
}
3119
.lg-obj-inspector-title {
3121
spacing: 4px;
3122
}
3123
.lg-obj-inspector-button {
3125
min-height: 32px;
3126
padding: 0 16px;
3127
border: none;
3128
border-radius: 4px;
3129
font-size: 10.5pt;
3130
font-weight: 500;
3131
color: rgba(0, 0, 0, 0.54);
3132
background-color: transparent;
3133
border-color: transparent;
3134
box-shadow: 0 0 transparent;
3135
text-shadow: none;
3136
icon-shadow: none;
3137
transition-duration: 100ms;
3138
}
3139
.lg-obj-inspector-button:hover {
3141
color: rgba(0, 0, 0, 0.87);
3142
background-color: rgba(0, 0, 0, 0.08);
3143
border-color: transparent;
3144
box-shadow: 0 0 transparent;
3145
text-shadow: none;
3146
icon-shadow: none;
3147
}
3148
.lg-obj-inspector-button:active {
3150
color: rgba(0, 0, 0, 0.87);
3151
background-color: rgba(0, 0, 0, 0.2);
3152
border-color: transparent;
3153
box-shadow: 0 0 transparent;
3154
text-shadow: none;
3155
icon-shadow: none;
3156
transition-duration: 200ms;
3157
}
3158
.lg-obj-inspector-button:insensitive {
3160
color: rgba(0, 0, 0, 0.26);
3161
background-color: transparent;
3162
border-color: transparent;
3163
box-shadow: 0 0 transparent;
3164
text-shadow: none;
3165
icon-shadow: none;
3166
}
3167
.lg-obj-inspector-button:focus {
3169
color: rgba(0, 0, 0, 0.87);
3170
text-shadow: none;
3171
icon-shadow: none;
3172
box-shadow: 0 0 transparent;
3173
}
3174
.lg-obj-inspector-button:hover {
3176
border: none;
3177
}
3178
#lookingGlassExtensions {
3180
padding: 4px;
3181
}
3182
.lg-extensions-list {
3184
padding: 4px;
3185
spacing: 6px;
3186
}
3187
.lg-extension {
3189
border: none;
3190
border-radius: 4px;
3191
padding: 4px;
3192
}
3193
.lg-extension-name {
3195
font-size: 18pt;
3196
font-weight: 400;
3197
}
3198
.lg-extension-meta {
3200
spacing: 6px;
3201
}
3202
#LookingGlassPropertyInspector {
3204
background: #FFFFFF;
3205
border: none;
3206
border-radius: 4px;
3207
padding: 6px;
3208
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
3209
}
3210
/* Dash to Dock */
3212
#dashtodockContainer #dash {
3213
background-color: rgba(0, 0, 0, 0.6);
3214
}
3215
#dashtodockContainer:overview #dash {
3217
background-color: rgba(255, 255, 255, 0.1);
3218
}
3219
#dashtodockContainer.extended:overview #dash {
3221
background-color: transparent;
3222
}
3223
#dashtodockContainer.left #dash,
3225
#dashtodockContainer.right #dash {
3226
padding: 3px 0;
3227
}
3228
#dashtodockContainer.top #dash,
3230
#dashtodockContainer.bottom #dash {
3231
padding: 0 3px;
3232
}
3233
#dashtodockContainer.extended #dash {
3235
padding: 0;
3236
border-radius: 0;
3237
}
3238
#dashtodockContainer.left .dash-item-container > StWidget,
3240
#dashtodockContainer.right .dash-item-container > StWidget,
3241
#dashtodockContainer.extended.left .dash-item-container > StWidget,
3242
#dashtodockContainer.extended.right .dash-item-container > StWidget {
3243
padding: 3px 6px;
3244
}
3245
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
3247
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
3248
padding: 6px 6px 3px 6px;
3249
}
3250
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
3252
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
3253
padding: 3px 6px 6px 6px;
3254
}
3255
#dashtodockContainer.top .dash-item-container > StWidget,
3257
#dashtodockContainer.bottom .dash-item-container > StWidget,
3258
#dashtodockContainer.extended.top .dash-item-container > StWidget,
3259
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
3260
padding: 6px 3px;
3261
}
3262
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
3264
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
3265
padding: 6px 3px 6px 6px;
3266
}
3267
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
3269
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
3270
padding: 6px 6px 6px 3px;
3271
}
3272
#dashtodockContainer .app-well-app-running-dot {
3274
background-color: transparent;
3275
}
3276
#dashtodockContainer .dash-item-container > StWidget {
3278
background-size: cover;
3279
}
3280
#dashtodockContainer.left .dash-item-container > StWidget.running1 {
3282
background-image: url("assets/dash/left-running1.svg");
3283
}
3284
#dashtodockContainer.left .dash-item-container > StWidget.running1.focused {
3286
background-image: url("assets/dash/left-running1-focused.svg");
3287
}
3288
#dashtodockContainer.left .dash-item-container > StWidget.running2 {
3290
background-image: url("assets/dash/left-running2.svg");
3291
}
3292
#dashtodockContainer.left .dash-item-container > StWidget.running2.focused {
3294
background-image: url("assets/dash/left-running2-focused.svg");
3295
}
3296
#dashtodockContainer.left .dash-item-container > StWidget.running3 {
3298
background-image: url("assets/dash/left-running3.svg");
3299
}
3300
#dashtodockContainer.left .dash-item-container > StWidget.running3.focused {
3302
background-image: url("assets/dash/left-running3-focused.svg");
3303
}
3304
#dashtodockContainer.left .dash-item-container > StWidget.running4 {
3306
background-image: url("assets/dash/left-running4.svg");
3307
}
3308
#dashtodockContainer.left .dash-item-container > StWidget.running4.focused {
3310
background-image: url("assets/dash/left-running4-focused.svg");
3311
}
3312
#dashtodockContainer.right .dash-item-container > StWidget.running1 {
3314
background-image: url("assets/dash/right-running1.svg");
3315
}
3316
#dashtodockContainer.right .dash-item-container > StWidget.running1.focused {
3318
background-image: url("assets/dash/right-running1-focused.svg");
3319
}
3320
#dashtodockContainer.right .dash-item-container > StWidget.running2 {
3322
background-image: url("assets/dash/right-running2.svg");
3323
}
3324
#dashtodockContainer.right .dash-item-container > StWidget.running2.focused {
3326
background-image: url("assets/dash/right-running2-focused.svg");
3327
}
3328
#dashtodockContainer.right .dash-item-container > StWidget.running3 {
3330
background-image: url("assets/dash/right-running3.svg");
3331
}
3332
#dashtodockContainer.right .dash-item-container > StWidget.running3.focused {
3334
background-image: url("assets/dash/right-running3-focused.svg");
3335
}
3336
#dashtodockContainer.right .dash-item-container > StWidget.running4 {
3338
background-image: url("assets/dash/right-running4.svg");
3339
}
3340
#dashtodockContainer.right .dash-item-container > StWidget.running4.focused {
3342
background-image: url("assets/dash/right-running4-focused.svg");
3343
}
3344
#dashtodockContainer.top .dash-item-container > StWidget.running1 {
3346
background-image: url("assets/dash/top-running1.svg");
3347
}
3348
#dashtodockContainer.top .dash-item-container > StWidget.running1.focused {
3350
background-image: url("assets/dash/top-running1-focused.svg");
3351
}
3352
#dashtodockContainer.top .dash-item-container > StWidget.running2 {
3354
background-image: url("assets/dash/top-running2.svg");
3355
}
3356
#dashtodockContainer.top .dash-item-container > StWidget.running2.focused {
3358
background-image: url("assets/dash/top-running2-focused.svg");
3359
}
3360
#dashtodockContainer.top .dash-item-container > StWidget.running3 {
3362
background-image: url("assets/dash/top-running3.svg");
3363
}
3364
#dashtodockContainer.top .dash-item-container > StWidget.running3.focused {
3366
background-image: url("assets/dash/top-running3-focused.svg");
3367
}
3368
#dashtodockContainer.top .dash-item-container > StWidget.running4 {
3370
background-image: url("assets/dash/top-running4.svg");
3371
}
3372
#dashtodockContainer.top .dash-item-container > StWidget.running4.focused {
3374
background-image: url("assets/dash/top-running4-focused.svg");
3375
}
3376
#dashtodockContainer.bottom .dash-item-container > StWidget.running1 {
3378
background-image: url("assets/dash/bottom-running1.svg");
3379
}
3380
#dashtodockContainer.bottom .dash-item-container > StWidget.running1.focused {
3382
background-image: url("assets/dash/bottom-running1-focused.svg");
3383
}
3384
#dashtodockContainer.bottom .dash-item-container > StWidget.running2 {
3386
background-image: url("assets/dash/bottom-running2.svg");
3387
}
3388
#dashtodockContainer.bottom .dash-item-container > StWidget.running2.focused {
3390
background-image: url("assets/dash/bottom-running2-focused.svg");
3391
}
3392
#dashtodockContainer.bottom .dash-item-container > StWidget.running3 {
3394
background-image: url("assets/dash/bottom-running3.svg");
3395
}
3396
#dashtodockContainer.bottom .dash-item-container > StWidget.running3.focused {
3398
background-image: url("assets/dash/bottom-running3-focused.svg");
3399
}
3400
#dashtodockContainer.bottom .dash-item-container > StWidget.running4 {
3402
background-image: url("assets/dash/bottom-running4.svg");
3403
}
3404
#dashtodockContainer.bottom .dash-item-container > StWidget.running4.focused {
3406
background-image: url("assets/dash/bottom-running4-focused.svg");
3407
}
3408
/* Simple Dock */
3410
#dash:desktop {
3411
background-color: rgba(0, 0, 0, 0.6);
3412
}
3413
/* GPaste */
3415
.popup-menu .search-entry {
3416
color: rgba(0, 0, 0, 0.87);
3417
selection-background-color: rgba(66, 133, 244, 0.32);
3418
selected-color: rgba(0, 0, 0, 0.87);
3419
transition-duration: 100ms;
3420
background-color: rgba(0, 0, 0, 0.04);
3421
border-color: transparent;
3422
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
3423
}
3424
.popup-menu .search-entry:hover {
3426
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
3427
}
3428
.popup-menu .search-entry:focus {
3430
border-color: transparent;
3431
box-shadow: inset 0 -2px #4285F4;
3432
color: rgba(0, 0, 0, 0.87);
3433
}
3434
.popup-menu .search-entry .search-entry-icon {
3436
color: rgba(0, 0, 0, 0.54);
3437
}
3438
.popup-menu .search-entry:hover .search-entry-icon, .popup-menu .search-entry:focus .search-entry-icon {
3440
color: rgba(0, 0, 0, 0.87);
3441
}
3442