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: 36px;
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: 36px;
83
margin: 6px;
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: 6px;
140
border-right-width: 0px;
141
border-radius: 4px;
142
}
143
.modal-dialog-linked-button:first-child:last-child {
145
margin-right: 6px;
146
border-right-width: 0px;
147
border-radius: 4px;
148
}
149
/* Entries */
151
StEntry {
152
min-height: 36px;
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: #4285F4;
158
selected-color: white;
159
font-size: 12pt;
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: 20px;
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: 6px;
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: 5px;
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: 5px;
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
background-color: #EEEEEE;
734
box-shadow: 0 0 transparent;
735
}
736
.popup-menu .popup-menu-content {
738
padding: 8px 0;
739
}
740
.popup-menu .popup-menu-item {
742
spacing: 8px;
743
transition-duration: 100ms;
744
}
745
.popup-menu .popup-menu-item:ltr {
747
padding: 0.4em 24px 0.4em 0;
748
}
749
.popup-menu .popup-menu-item:rtl {
751
padding: 0.4em 0 0.4em 24px;
752
}
753
.popup-menu .popup-menu-item:checked {
755
background-color: #4285F4;
756
color: white;
757
box-shadow: 0 0 transparent;
758
font-weight: normal;
759
}
760
.popup-menu .popup-menu-item:checked.selected {
762
background-color: #518ff5;
763
color: white;
764
}
765
.popup-menu .popup-menu-item:checked:active {
767
background-color: #689df6;
768
color: white !important;
769
}
770
.popup-menu .popup-menu-item:checked:insensitive {
772
color: rgba(255, 255, 255, 0.5);
773
}
774
.popup-menu .popup-menu-item.selected {
776
background-color: rgba(0, 0, 0, 0.08);
777
color: rgba(0, 0, 0, 0.87);
778
transition-duration: 0ms;
779
}
780
.popup-menu .popup-menu-item:active {
782
background-color: rgba(0, 0, 0, 0.2);
783
color: rgba(0, 0, 0, 0.87);
784
transition-duration: 200ms;
785
}
786
.popup-menu .popup-menu-item.selected:active {
788
color: rgba(0, 0, 0, 0.87);
789
}
790
.popup-menu .popup-menu-item:insensitive {
792
color: rgba(0, 0, 0, 0.38);
793
}
794
.popup-menu .popup-inactive-menu-item {
796
color: rgba(0, 0, 0, 0.87);
797
}
798
.popup-menu .popup-inactive-menu-item:insensitive {
800
color: rgba(0, 0, 0, 0.38);
801
}
802
.popup-menu.panel-menu {
804
-boxpointer-gap: 4px;
805
margin-bottom: 1.75em;
806
}
807
.popup-menu-ornament {
809
text-align: right;
810
width: 16px;
811
height: 16px;
812
}
813
.popup-menu-boxpointer,
815
.candidate-popup-boxpointer {
816
-arrow-border-radius: 0;
817
-arrow-background-color: transparent;
818
-arrow-border-width: 0;
819
-arrow-border-color: transparent;
820
-arrow-base: 0;
821
-arrow-rise: 0;
822
-arrow-box-shadow: none;
823
margin: 5px 8px 8px;
824
background-color: #FFFFFF;
825
border-radius: 4px;
826
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
827
}
828
.popup-separator-menu-item {
830
height: 1px;
831
margin: 8px 40px;
832
background-color: transparent;
833
border-color: rgba(0, 0, 0, 0.12);
834
border-bottom-width: 1px;
835
border-bottom-style: solid;
836
}
837
.background-menu {
839
-boxpointer-gap: 4px;
840
-arrow-rise: 0;
841
}
842
/* fallback menu
844
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
845
app menu inside the main app window itself rather than the top bar
846
*/
847
/* OSD */
848
.osd-window {
849
text-align: center;
850
font-weight: bold;
851
spacing: 1em;
852
margin: 32px;
853
min-width: 64px;
854
min-height: 64px;
855
}
856
.osd-window .osd-monitor-label {
858
font-size: 45px;
859
font-weight: 400;
860
}
861
.osd-window .level {
863
height: 8px;
864
-barlevel-height: 8px;
865
-barlevel-background-color: rgba(0, 0, 0, 0.12);
866
-barlevel-active-background-color: #4285F4;
867
-barlevel-overdrive-color: #EA4335;
868
-barlevel-overdrive-separator-width: 2px;
869
}
870
/* Pad OSD */
872
.pad-osd-window {
873
padding: 32px;
874
background-color: rgba(0, 0, 0, 0.6);
875
}
876
.pad-osd-window .pad-osd-title-box {
878
spacing: 12px;
879
}
880
.pad-osd-window .pad-osd-title-menu-box {
882
spacing: 6px;
883
}
884
.combo-box-label {
886
width: 15em;
887
}
888
/* App Switcher */
890
.switcher-popup {
891
padding: 8px;
892
spacing: 16px;
893
}
894
.switcher-list-item-container {
896
spacing: 8px;
897
}
898
.switcher-list .item-box {
900
transition-duration: 100ms;
901
padding: 8px;
902
border-radius: 4px;
903
}
904
.switcher-list .item-box:outlined {
906
padding: 8px;
907
border: none;
908
background-color: rgba(0, 0, 0, 0.12);
909
color: rgba(0, 0, 0, 0.87);
910
}
911
.switcher-list .item-box:selected {
913
background-color: #4285F4;
914
color: white;
915
}
916
.switcher-list .thumbnail-box {
918
padding: 2px;
919
spacing: 4px;
920
}
921
.switcher-list .thumbnail {
923
width: 256px;
924
}
925
.switcher-list .separator {
927
width: 1px;
928
background: rgba(0, 0, 0, 0.12);
929
}
930
.switcher-arrow {
932
transition-duration: 100ms;
933
border-color: rgba(0, 0, 0, 0);
934
color: rgba(0, 0, 0, 0.54);
935
}
936
.switcher-arrow:highlighted {
938
color: rgba(0, 0, 0, 0.87);
939
}
940
.input-source-switcher-symbol {
942
font-size: 45px;
943
font-weight: 400;
944
width: 96px;
945
height: 96px;
946
}
947
/* Window Cycler */
949
.cycler-highlight {
950
border: 4px solid #4285F4;
951
}
952
/* Workspace Switcher */
954
.workspace-switcher-group {
955
padding: 8px;
956
}
957
.workspace-switcher {
959
background: transparent;
960
border: 0px;
961
border-radius: 0px;
962
padding: 0px;
963
spacing: 8px;
964
}
965
.ws-switcher-active-up, .ws-switcher-active-down {
967
height: 48px;
968
background-color: #4285F4;
969
color: white;
970
background-size: 32px;
971
border-radius: 4px;
972
}
973
.ws-switcher-box {
975
height: 48px;
976
border: none;
977
background: rgba(0, 0, 0, 0.12);
978
border-radius: 4px;
979
}
980
.osd-window,
982
.resize-popup,
983
.switcher-list, .workspace-switcher-container {
984
color: rgba(0, 0, 0, 0.87);
985
background-color: #FFFFFF;
986
border: none;
987
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
988
border-radius: 4px;
989
padding: 12px;
990
}
991
/* Tiled window previews */
993
.tile-preview {
994
background-color: rgba(123, 170, 247, 0.3);
995
border: 1px solid #7BAAF7;
996
}
997
.tile-preview-left.on-primary {
999
border-radius: 0;
1000
}
1001
.tile-preview-right.on-primary {
1003
border-radius: 0;
1004
}
1005
.tile-preview-left.tile-preview-right.on-primary {
1007
border-radius: 0;
1008
}
1009
/* TOP BAR */
1011
#panel {
1012
background-color: rgba(0, 0, 0, 0.6);
1013
/* transition from solid to transparent */
1014
transition-duration: 250ms;
1015
font-weight: bold;
1016
height: 32px;
1017
font-feature-settings: "tnum";
1018
}
1019
#panel:overview, #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
1021
background-color: transparent;
1022
}
1023
#panel #panelLeft, #panel #panelCenter {
1025
spacing: 0;
1026
}
1027
#panel .panel-corner {
1029
-panel-corner-radius: 0;
1030
-panel-corner-background-color: rgba(0, 0, 0, 0.6);
1031
-panel-corner-border-width: 2px;
1032
-panel-corner-border-color: transparent;
1033
}
1034
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
1036
-panel-corner-border-color: white;
1037
}
1038
#panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
1040
-panel-corner-radius: 0;
1041
-panel-corner-background-color: transparent;
1042
-panel-corner-border-color: transparent;
1043
}
1044
#panel .panel-button {
1046
-natural-hpadding: 12px;
1047
-minimum-hpadding: 6px;
1048
font-weight: bold;
1049
color: rgba(255, 255, 255, 0.7);
1050
text-shadow: none;
1051
transition-duration: 100ms;
1052
}
1053
#panel .panel-button .app-menu-icon {
1055
-st-icon-style: symbolic;
1056
margin-left: 4px;
1057
margin-right: 4px;
1058
}
1059
#panel .panel-button .system-status-icon,
1061
#panel .panel-button .app-menu-icon > StIcon,
1062
#panel .panel-button .popup-menu-arrow {
1063
icon-shadow: none;
1064
}
1065
#panel .panel-button:hover {
1067
color: white;
1068
text-shadow: none;
1069
}
1070
#panel .panel-button:hover .system-status-icon,
1072
#panel .panel-button:hover .app-menu-icon > StIcon,
1073
#panel .panel-button:hover .popup-menu-arrow {
1074
icon-shadow: none;
1075
}
1076
#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
1078
background-color: rgba(0, 0, 0, 0.01);
1079
box-shadow: inset 0 -2px 0px white;
1080
color: white;
1081
}
1082
#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 {
1084
icon-shadow: none;
1085
}
1086
#panel .panel-button .system-status-icon {
1088
icon-size: 1.14286em;
1089
padding: 0 4px;
1090
}
1091
.unlock-screen #panel .panel-button,
1093
.login-screen #panel .panel-button,
1094
.lock-screen #panel .panel-button {
1095
color: rgba(255, 255, 255, 0.7);
1096
}
1097
.unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
1099
.login-screen #panel .panel-button:focus,
1100
.login-screen #panel .panel-button:hover,
1101
.login-screen #panel .panel-button:active,
1102
.lock-screen #panel .panel-button:focus,
1103
.lock-screen #panel .panel-button:hover,
1104
.lock-screen #panel .panel-button:active {
1105
color: white;
1106
}
1107
#panel .panel-status-indicators-box,
1109
#panel .panel-status-menu-box {
1110
spacing: 2px;
1111
}
1112
#panel .power-status.panel-status-indicators-box {
1114
spacing: 0;
1115
}
1116
#panel .screencast-indicator {
1118
color: #FBBC05;
1119
}
1120
#panel .remote-access-indicator {
1122
color: #FBBC05;
1123
}
1124
#panel.solid {
1126
background-color: rgba(0, 0, 0, 0.6);
1127
/* transition from transparent to solid */
1128
transition-duration: 250ms;
1129
background-gradient-direction: none;
1130
text-shadow: none;
1131
}
1132
#panel.solid:overview {
1134
background-color: transparent;
1135
}
1136
#panel.solid .panel-corner {
1138
-panel-corner-background-color: rgba(0, 0, 0, 0.6);
1139
}
1140
#panel.solid .panel-button {
1142
color: rgba(255, 255, 255, 0.7);
1143
text-shadow: none;
1144
}
1145
#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 {
1147
color: white;
1148
}
1149
#panel.solid .system-status-icon,
1151
#panel.solid .app-menu-icon > StIcon,
1152
#panel.solid .popup-menu-arrow {
1153
icon-shadow: none;
1154
}
1155
#calendarArea {
1157
padding: 8px 16px;
1158
}
1159
.calendar {
1161
margin-bottom: 0;
1162
}
1163
.calendar,
1165
.datemenu-today-button,
1166
.datemenu-displays-box,
1167
.message-list-sections {
1168
margin: 0 8px;
1169
}
1170
.datemenu-calendar-column {
1172
spacing: 8px;
1173
}
1174
.datemenu-displays-section {
1176
padding-bottom: 0;
1177
}
1178
.datemenu-displays-box {
1180
spacing: 8px;
1181
}
1182
.datemenu-calendar-column {
1184
border: 0 solid rgba(0, 0, 0, 0.12);
1185
}
1186
.datemenu-calendar-column:ltr {
1188
border-left-width: 0;
1189
}
1190
.datemenu-calendar-column:rtl {
1192
border-right-width: 0;
1193
}
1194
.datemenu-today-button,
1196
.world-clocks-button,
1197
.weather-button,
1198
.events-section-title {
1199
min-height: 24px;
1200
padding: 4px 8px;
1201
border-radius: 4px;
1202
}
1203
.datemenu-today-button {
1205
min-height: 56px;
1206
}
1207
.message-list-section-list:ltr {
1209
padding-left: 0;
1210
}
1211
.message-list-section-list:rtl {
1213
padding-right: 0;
1214
}
1215
.datemenu-today-button,
1217
.world-clocks-button,
1218
.weather-button,
1219
.events-section-title {
1220
transition-duration: 100ms;
1221
}
1222
.datemenu-today-button:hover, .datemenu-today-button:focus,
1224
.world-clocks-button:hover,
1225
.world-clocks-button:focus,
1226
.weather-button:hover,
1227
.weather-button:focus,
1228
.events-section-title:hover,
1229
.events-section-title:focus {
1230
color: rgba(0, 0, 0, 0.87);
1231
background-color: rgba(0, 0, 0, 0.08);
1232
}
1233
.datemenu-today-button:active,
1235
.world-clocks-button:active,
1236
.weather-button:active,
1237
.events-section-title:active {
1238
transition-duration: 200ms;
1239
color: rgba(0, 0, 0, 0.87);
1240
background-color: rgba(0, 0, 0, 0.2);
1241
}
1242
.datemenu-today-button .date-label {
1244
font-size: 18pt;
1245
font-weight: 400;
1246
}
1247
.world-clocks-header,
1249
.weather-header,
1250
.events-section-title {
1251
color: rgba(0, 0, 0, 0.54);
1252
font-weight: bold;
1253
}
1254
.world-clocks-grid {
1256
spacing-rows: 0.4em;
1257
}
1258
.weather-box {
1260
spacing: 0.4em;
1261
}
1262
.calendar-month-label {
1264
transition-duration: 100ms;
1265
height: 20px;
1266
margin: 2px;
1267
padding: 6px 16px;
1268
border-radius: 4px;
1269
color: rgba(0, 0, 0, 0.87);
1270
font-weight: bold;
1271
text-align: center;
1272
}
1273
.calendar-month-label:focus {
1275
background-color: rgba(0, 0, 0, 0.12);
1276
}
1277
.pager-button {
1279
transition-duration: 100ms;
1280
width: 32px;
1281
height: 32px;
1282
margin: 2px;
1283
border-radius: 100px;
1284
background-color: transparent;
1285
color: rgba(0, 0, 0, 0.87);
1286
}
1287
.pager-button:hover, .pager-button:focus {
1289
background-color: rgba(0, 0, 0, 0.08);
1290
}
1291
.pager-button:active {
1293
background-color: rgba(0, 0, 0, 0.2);
1294
transition-duration: 200ms;
1295
}
1296
.calendar-change-month-back {
1298
background-image: url("assets/calendar-arrow-left.svg");
1299
}
1300
.calendar-change-month-back:rtl {
1302
background-image: url("assets/calendar-arrow-right.svg");
1303
}
1304
.calendar-change-month-forward {
1306
background-image: url("assets/calendar-arrow-right.svg");
1307
}
1308
.calendar-change-month-forward:rtl {
1310
background-image: url("assets/calendar-arrow-left.svg");
1311
}
1312
.calendar-day-base {
1314
transition-duration: 100ms;
1315
font-size: 9pt;
1316
font-weight: 400;
1317
text-align: center;
1318
width: 32px;
1319
height: 32px;
1320
padding: 0;
1321
margin: 2px;
1322
border-radius: 100px;
1323
font-feature-settings: "tnum";
1324
}
1325
.calendar-day-base:hover, .calendar-day-base:focus {
1327
background-color: rgba(0, 0, 0, 0.08);
1328
}
1329
.calendar-day-base:active {
1331
transition-duration: 200ms;
1332
color: inherit;
1333
background-color: rgba(0, 0, 0, 0.2);
1334
border-color: transparent;
1335
}
1336
.calendar-day-base:selected {
1338
color: white;
1339
background-color: #4285F4;
1340
border-color: transparent;
1341
}
1342
.calendar-day-base.calendar-day-heading {
1344
width: 32px;
1345
height: 25px;
1346
margin-top: 2px;
1347
padding: 7px 0 0;
1348
border-radius: 100px;
1349
background-color: transparent;
1350
color: rgba(0, 0, 0, 0.38);
1351
font-size: 9pt;
1352
font-weight: 400;
1353
font-weight: bold;
1354
text-align: center;
1355
}
1356
.calendar-day {
1358
border-width: 0;
1359
}
1360
.calendar-day-top {
1362
border-top-width: 0;
1363
}
1364
.calendar-day-left {
1366
border-left-width: 0;
1367
}
1368
.calendar-nonwork-day {
1370
color: rgba(0, 0, 0, 0.87);
1371
}
1372
.calendar-today {
1374
font-weight: bold !important;
1375
border: none;
1376
}
1377
.calendar-day-with-events {
1379
color: #4285F4;
1380
font-weight: normal;
1381
text-decoration: underline;
1382
background-image: none;
1383
}
1384
.calendar-other-month-day {
1386
color: rgba(0, 0, 0, 0.26);
1387
opacity: 0.5;
1388
}
1389
.calendar-week-number {
1391
width: 32px;
1392
height: 25px;
1393
margin: 2px;
1394
padding: 7px 0 0;
1395
border-radius: 100px;
1396
background-color: transparent;
1397
color: rgba(0, 0, 0, 0.38);
1398
font-size: inherit;
1399
font-weight: bold;
1400
text-align: center;
1401
}
1402
/* Message list */
1404
.message-list {
1405
width: 420px;
1406
}
1407
.message-list-clear-button.button {
1409
background-color: transparent;
1410
margin: 8px 8px 0;
1411
}
1412
.message-list-clear-button.button:hover, .message-list-clear-button.button:focus {
1414
background-color: rgba(0, 0, 0, 0.08);
1415
}
1416
.message-list-clear-button.button:active {
1418
background-color: rgba(0, 0, 0, 0.2);
1419
}
1420
.message-list-sections {
1422
spacing: 8px;
1423
}
1424
.message-list-section,
1426
.message-list-section-list {
1427
spacing: 8px;
1428
}
1429
.message {
1431
transition-duration: 100ms;
1432
min-height: 64px;
1433
background-color: transparent;
1434
border-radius: 4px;
1435
}
1436
.message:hover, .message:focus {
1438
background-color: rgba(0, 0, 0, 0.08);
1439
}
1440
.message:active {
1442
transition-duration: 200ms;
1443
background-color: rgba(0, 0, 0, 0.2);
1444
}
1445
.message-icon-bin {
1447
padding: 8px 0px 8px 8px;
1448
}
1449
.message-icon-bin:rtl {
1451
padding: 8px 8px 8px 0px;
1452
}
1453
.message-icon-bin > StIcon {
1455
color: rgba(0, 0, 0, 0.87);
1456
icon-size: 1.14286em;
1457
-st-icon-style: requested;
1458
margin: 4px 0px 4px 4px;
1459
}
1460
.message-icon-bin > StIcon:rtl {
1462
margin: 4px 4px 4px 0px;
1463
}
1464
.message-secondary-bin {
1466
padding: 0 8px;
1467
}
1468
.message-secondary-bin > .event-time {
1470
min-height: 22px;
1471
padding-top: 2px;
1472
color: rgba(0, 0, 0, 0.54);
1473
font-size: 1em;
1474
/* HACK: the label should be baseline-aligned with a 1em label,
1475
fake this with some bottom padding */
1476
padding-bottom: 0;
1477
}
1478
.message-secondary-bin > StIcon {
1480
icon-size: 1.14286em;
1481
}
1482
.message-title {
1484
min-height: 22px;
1485
padding-top: 2px;
1486
color: rgba(0, 0, 0, 0.87);
1487
font-weight: bold;
1488
font-size: 1em;
1489
}
1490
.message-content {
1492
min-height: 48px;
1493
padding: 8px;
1494
color: rgba(0, 0, 0, 0.54);
1495
font-size: 1em;
1496
}
1497
.message-content * > StIcon {
1499
transition-duration: 100ms;
1500
icon-size: 16px;
1501
border-radius: 16px;
1502
padding: 4px;
1503
color: rgba(0, 0, 0, 0.54);
1504
}
1505
/* FIXME: how do you do this in sass? */
1507
.message-content *:hover > StIcon,
1508
.message-content *:focus > StIcon {
1509
color: rgba(0, 0, 0, 0.87);
1510
background-color: rgba(0, 0, 0, 0.08);
1511
}
1512
.message-content *:active > StIcon {
1514
transition-duration: 200ms;
1515
color: rgba(0, 0, 0, 0.87);
1516
background-color: rgba(0, 0, 0, 0.2);
1517
}
1518
.message-media-control {
1520
transition-duration: 100ms;
1521
margin: 16px 0;
1522
padding: 8px;
1523
border-radius: 100px;
1524
color: rgba(0, 0, 0, 0.54);
1525
}
1526
.message-media-control:hover, .message-media-control:focus {
1528
color: rgba(0, 0, 0, 0.87);
1529
background-color: rgba(0, 0, 0, 0.08);
1530
}
1531
.message-media-control:active {
1533
color: rgba(0, 0, 0, 0.87);
1534
background-color: rgba(0, 0, 0, 0.2);
1535
transition-duration: 200ms;
1536
}
1537
.message-media-control:insensitive {
1539
color: rgba(0, 0, 0, 0.26);
1540
}
1541
.message-media-control:last-child:ltr {
1543
margin-right: 16px;
1544
padding-right: 8px;
1545
}
1546
.message-media-control:last-child:rtl {
1548
margin-left: 16px;
1549
padding-left: 8px;
1550
}
1551
.media-message-cover-icon {
1553
icon-size: 32px !important;
1554
margin: 8px 0px 8px 4px !important;
1555
}
1556
.media-message-cover-icon:rtl {
1558
margin: 8px 4px 8px 0px !important;
1559
}
1560
.media-message-cover-icon.fallback {
1562
icon-size: 16px !important;
1563
padding: 8px;
1564
border: none;
1565
border-radius: 4px;
1566
background-color: rgba(0, 0, 0, 0.12);
1567
color: rgba(0, 0, 0, 0.38);
1568
}
1569
.system-switch-user-submenu-icon.user-icon {
1571
icon-size: 20px;
1572
padding: 0 2px;
1573
}
1574
.system-switch-user-submenu-icon.default-icon {
1576
icon-size: 16px;
1577
padding: 0 4px;
1578
}
1579
#appMenu {
1581
spinner-image: url("process-working.svg");
1582
spacing: 4px;
1583
}
1584
#appMenu .label-shadow {
1586
color: transparent;
1587
}
1588
.aggregate-menu {
1590
min-width: 280px;
1591
}
1592
.aggregate-menu .popup-menu-icon {
1594
padding: 0 4px;
1595
}
1596
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr {
1598
/* 8px spacing + 2*4px padding */
1599
padding-left: 16px;
1600
margin-left: 1.14286em;
1601
}
1602
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl {
1604
/* 8px spacing + 2*4px padding */
1605
padding-right: 16px;
1606
margin-right: 1.14286em;
1607
}
1608
.system-menu-action {
1610
-st-icon-style: symbolic;
1611
color: rgba(0, 0, 0, 0.54);
1612
border-radius: 100px;
1613
/* wish we could do 50% */
1614
padding: 16px;
1615
border: none;
1616
transition-duration: 100ms;
1617
}
1618
.system-menu-action:hover, .system-menu-action:focus {
1620
background-color: rgba(0, 0, 0, 0.08);
1621
color: rgba(0, 0, 0, 0.87);
1622
border: none;
1623
padding: 16px;
1624
}
1625
.system-menu-action:active {
1627
background-color: rgba(0, 0, 0, 0.2);
1628
color: rgba(0, 0, 0, 0.87);
1629
transition-duration: 200ms;
1630
}
1631
.system-menu-action > StIcon {
1633
icon-size: 16px;
1634
}
1635
.ripple-box {
1637
width: 48px;
1638
height: 48px;
1639
border-radius: 0 0 48px 0;
1640
background-color: rgba(255, 255, 255, 0.3);
1641
background-image: none;
1642
background-size: auto;
1643
}
1644
.ripple-box:rtl {
1646
border-radius: 0 0 0 48px;
1647
background-image: none;
1648
}
1649
.popup-menu-arrow {
1651
width: 16px;
1652
height: 16px;
1653
}
1654
.popup-menu-icon {
1656
icon-size: 1.14286em;
1657
}
1658
.window-close {
1660
height: 36px;
1661
width: 36px;
1662
-shell-close-overlap: 18px;
1663
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1664
background-image: url("assets/window-close.svg");
1665
background-size: 36px;
1666
}
1667
.window-close:hover {
1669
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1670
background-image: url("assets/window-close.svg");
1671
}
1672
.window-close:active {
1674
background-image: url("assets/window-close-active.svg");
1675
}
1676
.window-close:rtl {
1678
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1679
}
1680
.window-close:rtl:hover {
1682
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1683
}
1684
/* NETWORK DIALOGS */
1686
.nm-dialog {
1687
max-height: 34em;
1688
min-height: 31em;
1689
min-width: 32em;
1690
}
1691
.nm-dialog-content {
1693
spacing: 20px;
1694
padding: 24px;
1695
}
1696
.nm-dialog-header-hbox {
1698
spacing: 10px;
1699
}
1700
.nm-dialog-airplane-box {
1702
spacing: 12px;
1703
}
1704
.nm-dialog-airplane-headline {
1706
font-weight: bold;
1707
text-align: center;
1708
}
1709
.nm-dialog-airplane-text {
1711
color: rgba(0, 0, 0, 0.87);
1712
}
1713
.nm-dialog-header-icon {
1715
icon-size: 32px;
1716
}
1717
.nm-dialog-scroll-view {
1719
border: none;
1720
}
1721
.nm-dialog-header {
1723
font-size: 15pt;
1724
font-weight: 500;
1725
}
1726
.nm-dialog-item {
1728
transition-duration: 100ms;
1729
font-size: 1em;
1730
border-bottom: none;
1731
border-radius: 4px;
1732
padding: 12px;
1733
spacing: 20px;
1734
}
1735
.nm-dialog-item:hover, .nm-dialog-item:focus {
1737
background-color: rgba(0, 0, 0, 0.08);
1738
}
1739
.nm-dialog-item:active {
1741
transition-duration: 200ms;
1742
background-color: rgba(0, 0, 0, 0.2);
1743
}
1744
.nm-dialog-item:selected {
1746
background-color: #4285F4;
1747
color: white;
1748
}
1749
.nm-dialog-icons {
1751
spacing: .5em;
1752
}
1753
.nm-dialog-icon {
1755
icon-size: 16px;
1756
}
1757
.no-networks-label {
1759
color: rgba(0, 0, 0, 0.38);
1760
}
1761
.no-networks-box {
1763
spacing: 12px;
1764
}
1765
/* OVERVIEW */
1767
#overview {
1768
spacing: 24px;
1769
}
1770
.overview-controls {
1772
padding-bottom: 32px;
1773
}
1774
.window-picker {
1776
-horizontal-spacing: 16px;
1777
-vertical-spacing: 16px;
1778
padding: 0 16px 32px;
1779
}
1780
.window-picker.external-monitor {
1782
padding: 16px;
1783
}
1784
.window-clone-border {
1786
border: 4px solid rgba(255, 255, 255, 0.3);
1787
border-radius: 4px;
1788
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
1789
}
1790
.window-caption {
1792
spacing: 25px;
1793
color: white;
1794
background-color: rgba(0, 0, 0, 0.6);
1795
border-radius: 4px;
1796
padding: 4px 8px;
1797
}
1798
.search-entry {
1800
width: 304px;
1801
padding: 0 8px;
1802
border-radius: 4px 4px 0 0;
1803
color: rgba(255, 255, 255, 0.5);
1804
selection-background-color: rgba(255, 255, 255, 0.3);
1805
selected-color: white;
1806
transition-duration: 100ms;
1807
background-color: rgba(255, 255, 255, 0.04);
1808
border-color: transparent;
1809
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1810
}
1811
.search-entry:hover {
1813
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1814
}
1815
.search-entry:focus {
1817
border-color: transparent;
1818
box-shadow: inset 0 -2px white;
1819
padding: 0 8px;
1820
border-width: 0;
1821
color: white;
1822
}
1823
.search-entry .search-entry-icon {
1825
icon-size: 16px;
1826
padding: 0 0;
1827
color: rgba(255, 255, 255, 0.7);
1828
}
1829
.search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
1831
color: white;
1832
}
1833
#searchResultsBin {
1835
max-width: 1000px;
1836
}
1837
#searchResultsContent {
1839
padding-left: 20px;
1840
padding-right: 20px;
1841
spacing: 16px;
1842
}
1843
.search-section {
1845
spacing: 16px;
1846
}
1847
.search-section-content {
1849
spacing: 32px;
1850
}
1851
.list-search-results {
1853
spacing: 3px;
1854
}
1855
.search-section-separator {
1857
height: 1px;
1858
background-color: rgba(255, 255, 255, 0.12);
1859
}
1860
.list-search-result-content {
1862
spacing: 30px;
1863
}
1864
.list-search-result-title {
1866
font-size: 12pt;
1867
font-weight: 400;
1868
color: white;
1869
spacing: 12px;
1870
}
1871
.list-search-result-description {
1873
color: rgba(255, 255, 255, 0.7);
1874
}
1875
.list-search-provider-details {
1877
width: 150px;
1878
color: rgba(255, 255, 255, 0.7);
1879
margin-top: 0.24em;
1880
}
1881
.list-search-provider-content {
1883
spacing: 20px;
1884
}
1885
.search-provider-icon {
1887
padding: 15px;
1888
}
1889
/* DASHBOARD */
1891
#dash {
1892
transition-duration: 250ms;
1893
font-size: 1em;
1894
color: white;
1895
background-color: rgba(255, 255, 255, 0.1);
1896
padding: 3px 0;
1897
border: none;
1898
border-left: 0px;
1899
border-radius: 0px 4px 4px 0px;
1900
}
1901
#dash:rtl {
1903
border-radius: 4px 0 0 4px;
1904
}
1905
#dash .placeholder {
1907
background-image: url("assets/dash-placeholder.svg");
1908
background-size: contain;
1909
height: 24px;
1910
}
1911
#dash .empty-dash-drop-target {
1913
width: 24px;
1914
height: 24px;
1915
}
1916
.dash-item-container > StWidget {
1918
padding: 3px 6px;
1919
}
1920
.dash-label {
1922
border-radius: 4px;
1923
padding: 7px 8px;
1924
color: rgba(0, 0, 0, 0.87);
1925
background-color: #FFFFFF;
1926
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1927
text-align: center;
1928
-x-offset: 8px;
1929
}
1930
/* App Vault/Grid */
1932
.icon-grid {
1933
spacing: 30px;
1934
-shell-grid-horizontal-item-size: 136px;
1935
-shell-grid-vertical-item-size: 136px;
1936
}
1937
.icon-grid .overview-icon {
1939
icon-size: 96px;
1940
}
1941
.system-action-icon {
1943
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
1944
background-color: #212121;
1945
color: #FFFFFF;
1946
border-radius: 99px;
1947
icon-size: 48px;
1948
}
1949
.app-view-controls {
1951
width: 320px;
1952
padding-bottom: 32px;
1953
}
1954
.app-view-control {
1956
padding: 0 16px;
1957
font-weight: bold;
1958
color: rgba(255, 255, 255, 0.7);
1959
}
1960
.app-view-control:hover {
1962
color: white;
1963
background-color: rgba(255, 255, 255, 0.08) !important;
1964
}
1965
.app-view-control:active {
1967
color: white;
1968
background-color: rgba(255, 255, 255, 0.2) !important;
1969
}
1970
.app-view-control:checked {
1972
color: white;
1973
background-color: rgba(0, 0, 0, 0.01) !important;
1974
box-shadow: inset 0 2px 0 white;
1975
}
1976
.app-view-control:first-child {
1978
border-right-width: 0;
1979
border-radius: 4px;
1980
}
1981
.app-view-control:first-child:checked {
1983
border-radius: 0;
1984
}
1985
.app-view-control:last-child {
1987
border-radius: 4px;
1988
}
1989
.app-view-control:last-child:checked {
1991
border-radius: 0;
1992
}
1993
.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
1995
.list-search-result:focus,
1996
.list-search-result:selected,
1997
.list-search-result:hover {
1998
background-color: rgba(255, 255, 255, 0.08);
1999
transition-duration: 0ms;
2000
}
2001
.search-provider-icon:active, .search-provider-icon:checked,
2003
.list-search-result:active,
2004
.list-search-result:checked {
2005
background-color: rgba(255, 255, 255, 0.2);
2006
transition-duration: 200ms;
2007
}
2008
.app-well-app:hover .overview-icon,
2010
.app-well-app:focus .overview-icon,
2011
.app-well-app:selected .overview-icon,
2012
.app-well-app.app-folder:hover .overview-icon,
2013
.app-well-app.app-folder:focus .overview-icon,
2014
.app-well-app.app-folder:selected .overview-icon,
2015
.show-apps:hover .overview-icon,
2016
.show-apps:focus .overview-icon,
2017
.show-apps:selected .overview-icon,
2018
.grid-search-result:hover .overview-icon,
2019
.grid-search-result:focus .overview-icon,
2020
.grid-search-result:selected .overview-icon {
2021
background-color: rgba(255, 255, 255, 0.08);
2022
transition-duration: 0ms;
2023
border-image: none;
2024
background-image: none;
2025
}
2026
.app-well-app:active .overview-icon,
2028
.app-well-app:checked .overview-icon,
2029
.app-well-app.app-folder:active .overview-icon,
2030
.app-well-app.app-folder:checked .overview-icon,
2031
.show-apps:active .overview-icon,
2032
.show-apps:checked .overview-icon,
2033
.grid-search-result:active .overview-icon,
2034
.grid-search-result:checked .overview-icon {
2035
background-color: rgba(255, 255, 255, 0.2);
2036
box-shadow: 0 0 transparent;
2037
transition-duration: 200ms;
2038
}
2039
.app-well-app-running-dot {
2041
width: 32px;
2042
height: 2px;
2043
background-color: white;
2044
margin-bottom: 0;
2045
}
2046
.search-provider-icon,
2048
.list-search-result, .app-well-app .overview-icon,
2049
.app-well-app.app-folder .overview-icon,
2050
.show-apps .overview-icon,
2051
.grid-search-result .overview-icon {
2052
color: white;
2053
border-radius: 4px;
2054
padding: 6px;
2055
border: none;
2056
transition-duration: 100ms;
2057
text-align: center;
2058
}
2059
.app-well-app.app-folder > .overview-icon {
2061
background-color: rgba(255, 255, 255, 0.1);
2062
}
2063
.show-apps .show-apps-icon {
2065
color: rgba(255, 255, 255, 0.7);
2066
}
2067
.show-apps:hover .show-apps-icon,
2069
.show-apps:active .show-apps-icon,
2070
.show-apps:checked .show-apps-icon,
2071
.show-apps:focus .show-apps-icon {
2072
color: white;
2073
transition-duration: 100ms;
2074
}
2075
.app-folder-popup {
2077
-arrow-border-radius: 4px;
2078
-arrow-background-color: rgba(255, 255, 255, 0.1);
2079
-arrow-base: 24px;
2080
-arrow-rise: 12px;
2081
}
2082
.app-folder-popup-bin {
2084
padding: 5px;
2085
}
2086
.app-folder-icon {
2088
padding: 5px;
2089
spacing-rows: 5px;
2090
spacing-columns: 5px;
2091
}
2092
.page-indicator {
2094
padding: 15px 20px;
2095
}
2096
.page-indicator .page-indicator-icon {
2098
width: 12px;
2099
height: 12px;
2100
border-radius: 12px;
2101
background-image: none;
2102
background-color: rgba(255, 255, 255, 0.3);
2103
transition-duration: 100ms;
2104
}
2105
.page-indicator:hover .page-indicator-icon {
2107
background-image: none;
2108
background-color: rgba(255, 255, 255, 0.5);
2109
}
2110
.page-indicator:active .page-indicator-icon {
2112
background-image: none;
2113
background-color: rgba(255, 255, 255, 0.7);
2114
}
2115
.page-indicator:checked .page-indicator-icon {
2117
background-image: none;
2118
background-color: white;
2119
transition-duration: 0ms;
2120
}
2121
.page-indicator:checked:active {
2123
background-image: none;
2124
}
2125
.app-well-app > .overview-icon.overview-icon-with-label,
2127
.grid-search-result .overview-icon.overview-icon-with-label {
2128
padding: 10px 8px 5px 8px;
2129
spacing: 4px;
2130
}
2131
.workspace-thumbnails {
2133
visible-width: 32px;
2134
spacing: 12px;
2135
padding: 12px;
2136
border-radius: 4px 0 0 4px;
2137
}
2138
.workspace-thumbnails:rtl {
2140
border-radius: 0 4px 4px 0;
2141
}
2142
.workspace-thumbnails .placeholder {
2144
background-image: url("assets/dash-placeholder.svg");
2145
background-size: contain;
2146
height: 24px;
2147
}
2148
.workspace-thumbnail-indicator {
2150
border: 0 solid white;
2151
border-left-width: 2px;
2152
padding: 6px 10px;
2153
border-radius: 0;
2154
}
2155
.search-display > StBoxLayout,
2157
.all-apps,
2158
.frequent-apps > StBoxLayout {
2159
padding: 0px 88px 10px 88px;
2160
}
2161
.workspace-thumbnails {
2163
transition-duration: 250ms;
2164
color: white;
2165
background-color: rgba(255, 255, 255, 0.1);
2166
border: none;
2167
}
2168
.search-statustext, .no-frequent-applications-label {
2170
font-size: 45px;
2171
font-weight: 400;
2172
color: rgba(255, 255, 255, 0.5);
2173
}
2174
/* NOTIFICATIONS & MESSAGE TRAY */
2176
.url-highlighter {
2177
link-color: #4285F4;
2178
}
2179
.notification-banner {
2181
font-size: 1em;
2182
width: 34em;
2183
min-height: 64px;
2184
margin: 5px;
2185
border-radius: 4px;
2186
color: rgba(0, 0, 0, 0.87);
2187
background-color: #FFFFFF;
2188
border: none;
2189
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2190
}
2191
.notification-banner:hover {
2193
background-color: #FFFFFF;
2194
}
2195
.notification-banner:focus {
2197
background-color: #FFFFFF;
2198
}
2199
.notification-banner .notification-icon {
2201
padding: 5px;
2202
}
2203
.notification-banner .notification-content {
2205
padding: 5px;
2206
spacing: 5px;
2207
}
2208
.notification-banner .secondary-icon {
2210
icon-size: 1.14286em;
2211
}
2212
.notification-banner .notification-actions {
2214
background-color: transparent;
2215
padding-top: 0;
2216
padding: 6px;
2217
spacing: 6px;
2218
}
2219
.notification-banner .notification-button {
2221
transition-duration: 100ms;
2222
min-height: 36px;
2223
padding: 0 8px;
2224
border-radius: 4px;
2225
background-color: transparent;
2226
color: rgba(0, 0, 0, 0.54);
2227
font-weight: 500;
2228
}
2229
.notification-banner .notification-button:first-child {
2231
border-radius: 4px;
2232
}
2233
.notification-banner .notification-button:last-child {
2235
border-radius: 4px;
2236
}
2237
.notification-banner .notification-button:hover, .notification-banner .notification-buttonfocus {
2239
background-color: rgba(0, 0, 0, 0.08);
2240
color: rgba(0, 0, 0, 0.87);
2241
}
2242
.notification-banner .notification-button:active {
2244
transition-duration: 200ms;
2245
background-color: rgba(0, 0, 0, 0.2);
2246
color: rgba(0, 0, 0, 0.87);
2247
}
2248
.summary-source-counter {
2250
font-size: 1em;
2251
font-weight: bold;
2252
height: 1.6em;
2253
width: 1.6em;
2254
-shell-counter-overlap-x: 3px;
2255
-shell-counter-overlap-y: 3px;
2256
background-color: #4285F4;
2257
color: white;
2258
border: 2px solid white;
2259
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
2260
border-radius: 0.9em;
2261
}
2262
.secondary-icon {
2264
icon-size: 1.14286em;
2265
}
2266
.chat-body {
2268
spacing: 5px;
2269
}
2270
.chat-response {
2272
margin: 5px;
2273
}
2274
.chat-log-message {
2276
color: rgba(0, 0, 0, 0.87);
2277
}
2278
.chat-new-group {
2280
padding-top: 1em;
2281
}
2282
.chat-received {
2284
padding-left: 4px;
2285
}
2286
.chat-received:rtl {
2288
padding-left: 0px;
2289
padding-right: 4px;
2290
}
2291
.chat-sent {
2293
padding-left: 18pt;
2294
color: rgba(0, 0, 0, 0.54);
2295
}
2296
.chat-sent:rtl {
2298
padding-left: 0;
2299
padding-right: 18pt;
2300
}
2301
.chat-meta-message {
2303
padding-left: 4px;
2304
font-size: 9pt;
2305
font-weight: 400;
2306
color: rgba(0, 0, 0, 0.54);
2307
}
2308
.chat-meta-message:rtl {
2310
padding-left: 0;
2311
padding-right: 4px;
2312
}
2313
.hotplug-transient-box {
2315
spacing: 6px;
2316
padding: 2px 72px 2px 12px;
2317
}
2318
.hotplug-notification-item {
2320
padding: 2px 10px;
2321
}
2322
.hotplug-notification-item:focus {
2324
padding: 1px 71px 1px 11px;
2325
}
2326
.hotplug-notification-item-icon {
2328
icon-size: 24px;
2329
padding: 2px 5px;
2330
}
2331
.hotplug-resident-box {
2333
spacing: 8px;
2334
}
2335
.hotplug-resident-mount {
2337
transition-duration: 100ms;
2338
spacing: 8px;
2339
border-radius: 4px;
2340
}
2341
.hotplug-resident-mount:hover {
2343
background-color: rgba(0, 0, 0, 0.08);
2344
}
2345
.hotplug-resident-mount:active {
2347
transition-duration: 200ms;
2348
background-color: rgba(0, 0, 0, 0.2);
2349
}
2350
.hotplug-resident-mount-label {
2352
color: inherit;
2353
padding-left: 6px;
2354
}
2355
.hotplug-resident-mount-icon {
2357
icon-size: 24px;
2358
padding-left: 6px;
2359
}
2360
.hotplug-resident-eject-icon {
2362
icon-size: 16px;
2363
}
2364
.hotplug-resident-eject-button {
2366
padding: 7px;
2367
border-radius: 4px;
2368
color: rgba(0, 0, 0, 0.87);
2369
}
2370
/* Eeeky things */
2372
.magnifier-zoom-region {
2373
border: 2px solid #4285F4;
2374
}
2375
.magnifier-zoom-region.full-screen {
2377
border-width: 0;
2378
}
2379
/* On-screen Keyboard */
2381
.word-suggestions {
2382
font-size: 12pt;
2383
font-weight: 400;
2384
spacing: 12px;
2385
min-height: 20pt;
2386
}
2387
#keyboard {
2389
background-color: rgba(0, 0, 0, 0.3);
2390
}
2391
.key-container {
2393
padding: 4px;
2394
spacing: 4px;
2395
}
2396
.keyboard-key {
2398
min-height: 2em;
2399
min-width: 2em;
2400
font-size: 2em;
2401
font-weight: 500;
2402
border-radius: 4px;
2403
border: none;
2404
color: rgba(0, 0, 0, 0.87);
2405
background-color: #FFFFFF;
2406
border-color: transparent;
2407
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2408
text-shadow: none;
2409
icon-shadow: none;
2410
transition-duration: 100ms;
2411
}
2412
.keyboard-key:focus {
2414
color: rgba(0, 0, 0, 0.87);
2415
text-shadow: none;
2416
icon-shadow: none;
2417
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2418
}
2419
.keyboard-key:hover, .keyboard-key:checked {
2421
color: rgba(0, 0, 0, 0.87);
2422
background-color: #FFFFFF;
2423
border-color: transparent;
2424
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2425
text-shadow: none;
2426
icon-shadow: none;
2427
}
2428
.keyboard-key:active {
2430
color: rgba(0, 0, 0, 0.87);
2431
background-color: rgba(205, 205, 205, 0.9688);
2432
border-color: transparent;
2433
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2434
text-shadow: none;
2435
icon-shadow: none;
2436
transition-duration: 200ms;
2437
}
2438
.keyboard-key:grayed {
2440
background-color: rgba(0, 0, 0, 0.3);
2441
color: white;
2442
border-color: rgba(0, 0, 0, 0.3);
2443
}
2444
.keyboard-key.default-key {
2446
border-color: transparent;
2447
background-color: #FFFFFF;
2448
background-size: 24px;
2449
}
2450
.keyboard-key.default-key:active {
2452
background-color: rgba(214, 214, 214, 0.974);
2453
}
2454
.keyboard-key.enter-key {
2456
border-color: transparent;
2457
background-color: #4285F4;
2458
background-image: url("assets/key-enter.svg");
2459
}
2460
.keyboard-key.enter-key:active {
2462
background-color: #689df6;
2463
}
2464
.keyboard-key.shift-key-lowercase {
2466
background-image: url("assets/key-shift.svg");
2467
}
2468
.keyboard-key.shift-key-uppercase {
2470
background-image: url("assets/key-shift-uppercase.svg");
2471
}
2472
.keyboard-key.shift-key-uppercase:latched {
2474
background-image: url("assets/key-shift-latched-uppercase.svg");
2475
}
2476
.keyboard-key.hide-key {
2478
background-image: url("assets/key-hide.svg");
2479
}
2480
.keyboard-key.layout-key {
2482
background-image: url("assets/key-layout.svg");
2483
}
2484
.keyboard-subkeys {
2486
color: inherit;
2487
padding: 5px;
2488
-arrow-border-radius: 0;
2489
-arrow-background-color: transparent;
2490
-arrow-border-width: 0;
2491
-arrow-border-color: transparent;
2492
-arrow-base: 0;
2493
-arrow-rise: 0;
2494
-boxpointer-gap: 5px;
2495
background-color: #FFFFFF;
2496
border-radius: 4px;
2497
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2498
}
2499
.candidate-popup-content {
2501
padding: 8px;
2502
spacing: 0;
2503
}
2504
.candidate-index {
2506
padding: 0 4px 0 0;
2507
color: rgba(0, 0, 0, 0.54);
2508
}
2509
.candidate-box:selected .candidate-index {
2511
color: rgba(255, 255, 255, 0.7);
2512
}
2513
.candidate-box {
2515
transition-duration: 100ms;
2516
min-height: 32px;
2517
padding: 0 8px;
2518
border-radius: 4px;
2519
}
2520
.candidate-box:hover {
2522
background-color: rgba(0, 0, 0, 0.08);
2523
color: rgba(0, 0, 0, 0.87);
2524
transition-duration: 0ms;
2525
}
2526
.candidate-box:active {
2528
background-color: rgba(0, 0, 0, 0.2);
2529
color: rgba(0, 0, 0, 0.87);
2530
transition-duration: 200ms;
2531
}
2532
.candidate-box:selected {
2534
background-color: #4285F4;
2535
color: white;
2536
transition-duration: 0ms;
2537
}
2538
.candidate-page-button-box {
2540
height: 32px;
2541
}
2542
.vertical .candidate-page-button-box {
2544
padding-top: 0;
2545
}
2546
.horizontal .candidate-page-button-box {
2548
padding-left: 0;
2549
}
2550
.candidate-page-button {
2552
min-width: 32px;
2553
min-height: 32px;
2554
padding: 0;
2555
}
2556
.candidate-page-button-previous {
2558
border-radius: 4px;
2559
border-right-width: 0;
2560
}
2561
.candidate-page-button-next {
2563
border-radius: 4px;
2564
}
2565
.candidate-page-button-icon {
2567
icon-size: 1.14286em;
2568
}
2569
/* Auth Dialogs & Screen Shield */
2571
.framed-user-icon {
2572
background-size: contain;
2573
border: none;
2574
color: white;
2575
border-radius: 4px;
2576
}
2577
.framed-user-icon:hover {
2579
border-color: white;
2580
color: white;
2581
}
2582
.login-dialog-banner-view {
2584
padding-top: 24px;
2585
max-width: 23em;
2586
}
2587
.login-dialog {
2589
border: none;
2590
background-color: transparent;
2591
}
2592
.login-dialog StEntry {
2594
color: white;
2595
selection-background-color: rgba(255, 255, 255, 0.3);
2596
selected-color: white;
2597
transition-duration: 100ms;
2598
background-color: rgba(255, 255, 255, 0.04);
2599
border-color: transparent;
2600
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2601
}
2602
.login-dialog StEntry:focus {
2604
border-color: transparent;
2605
box-shadow: inset 0 -2px white;
2606
}
2607
.login-dialog StEntry:insensitive {
2609
color: rgba(0, 0, 0, 0.38);
2610
border-color: transparent;
2611
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
2612
color: rgba(255, 255, 255, 0.5);
2613
}
2614
.login-dialog .modal-dialog-button-box {
2616
spacing: 3px;
2617
}
2618
.login-dialog .modal-dialog-button {
2620
padding: 0 16px;
2621
color: rgba(255, 255, 255, 0.7);
2622
background-color: transparent;
2623
border-color: transparent;
2624
box-shadow: 0 0 transparent;
2625
text-shadow: none;
2626
icon-shadow: none;
2627
transition-duration: 100ms;
2628
}
2629
.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus {
2631
color: white;
2632
background-color: rgba(255, 255, 255, 0.08);
2633
border-color: transparent;
2634
box-shadow: 0 0 transparent;
2635
text-shadow: none;
2636
icon-shadow: none;
2637
}
2638
.login-dialog .modal-dialog-button:active {
2640
color: white;
2641
background-color: rgba(255, 255, 255, 0.2);
2642
border-color: transparent;
2643
box-shadow: 0 0 transparent;
2644
text-shadow: none;
2645
icon-shadow: none;
2646
transition-duration: 200ms;
2647
}
2648
.login-dialog .modal-dialog-button:insensitive {
2650
color: rgba(255, 255, 255, 0.3);
2651
background-color: transparent;
2652
border-color: transparent;
2653
box-shadow: 0 0 transparent;
2654
text-shadow: none;
2655
icon-shadow: none;
2656
}
2657
.login-dialog .modal-dialog-button:default {
2659
color: white;
2660
background-color: #4285F4;
2661
border-color: transparent;
2662
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2663
text-shadow: none;
2664
icon-shadow: none;
2665
transition-duration: 100ms;
2666
}
2667
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
2669
color: white;
2670
background-color: #4285F4;
2671
border-color: transparent;
2672
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2673
text-shadow: none;
2674
icon-shadow: none;
2675
}
2676
.login-dialog .modal-dialog-button:default:active {
2678
color: white;
2679
background-color: #6fa2f7;
2680
border-color: transparent;
2681
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2682
text-shadow: none;
2683
icon-shadow: none;
2684
transition-duration: 200ms;
2685
}
2686
.login-dialog .modal-dialog-button:default:insensitive {
2688
color: rgba(255, 255, 255, 0.5);
2689
background-color: rgba(255, 255, 255, 0.04);
2690
border-color: transparent;
2691
box-shadow: 0 0 transparent;
2692
text-shadow: none;
2693
icon-shadow: none;
2694
}
2695
.login-dialog-logo-bin {
2697
padding: 24px 0px;
2698
}
2699
.login-dialog-banner {
2701
color: rgba(255, 255, 255, 0.7);
2702
}
2703
.login-dialog-button-box {
2705
spacing: 5px;
2706
}
2707
.login-dialog-message-warning {
2709
color: #FBBC05;
2710
}
2711
.login-dialog-message-hint {
2713
padding-top: 0;
2714
padding-bottom: 20px;
2715
}
2716
.login-dialog-user-selection-box {
2718
padding: 100px 0px;
2719
}
2720
.login-dialog-not-listed-label {
2722
padding-left: 2px;
2723
}
2724
.login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
2726
.login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
2727
color: white;
2728
}
2729
.login-dialog-not-listed-label {
2731
transition-duration: 100ms;
2732
font-size: 1em;
2733
font-weight: bold;
2734
color: rgba(255, 255, 255, 0.7);
2735
padding-top: 1em;
2736
border-radius: 4px;
2737
}
2738
.login-dialog-not-listed-label:hover {
2740
background-color: rgba(255, 255, 255, 0.08);
2741
color: white;
2742
}
2743
.login-dialog-not-listed-label:focus {
2745
background-color: rgba(255, 255, 255, 0.12);
2746
}
2747
.login-dialog-not-listed-label:active {
2749
transition-duration: 200ms;
2750
background-color: rgba(255, 255, 255, 0.2);
2751
color: white;
2752
}
2753
.login-dialog-user-list-view {
2755
-st-vfade-offset: 1em;
2756
}
2757
.login-dialog-user-list {
2759
spacing: 12px;
2760
width: 23em;
2761
}
2762
.login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
2764
background-color: rgba(255, 255, 255, 0.12);
2765
color: white;
2766
}
2767
.login-dialog-user-list:expanded .login-dialog-user-list-item:hover {
2769
background-color: rgba(255, 255, 255, 0.08);
2770
color: white;
2771
}
2772
.login-dialog-user-list:expanded .login-dialog-user-list-item:active {
2774
background-color: rgba(255, 255, 255, 0.2);
2775
color: white;
2776
}
2777
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
2779
border-right: 2px solid white;
2780
}
2781
.login-dialog-user-list-item {
2783
transition-duration: 100ms;
2784
border-radius: 4px;
2785
padding: 6px;
2786
color: rgba(255, 255, 255, 0.7);
2787
}
2788
.login-dialog-user-list-item:ltr .user-widget {
2790
padding-right: 1em;
2791
}
2792
.login-dialog-user-list-item:rtl .user-widget {
2794
padding-left: 1em;
2795
}
2796
.login-dialog-user-list-item:hover {
2798
background-color: rgba(255, 255, 255, 0.08);
2799
color: white;
2800
}
2801
.login-dialog-user-list-item:active {
2803
transition-duration: 200ms;
2804
background-color: rgba(255, 255, 255, 0.2);
2805
color: white;
2806
}
2807
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
2809
height: 2px;
2810
margin-top: 6px;
2811
background-color: white;
2812
}
2813
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
2815
background-color: white;
2816
}
2817
.login-dialog-username,
2819
.user-widget-label {
2820
color: white;
2821
font-size: 15pt;
2822
font-weight: 500;
2823
text-align: left;
2824
padding-left: 15px;
2825
}
2826
.user-widget-label:ltr {
2828
padding-left: 14px;
2829
}
2830
.user-widget-label:rtl {
2832
padding-right: 14px;
2833
}
2834
.login-dialog-prompt-layout {
2836
padding-top: 24px;
2837
padding-bottom: 12px;
2838
spacing: 8px;
2839
width: 23em;
2840
}
2841
.login-dialog-prompt-label {
2843
color: rgba(255, 255, 255, 0.7);
2844
font-size: 1em;
2845
padding-top: 1em;
2846
}
2847
.login-dialog-session-list-button StIcon {
2849
icon-size: 1.25em;
2850
}
2851
.login-dialog-session-list-button {
2853
color: rgba(255, 255, 255, 0.7);
2854
}
2855
.login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
2857
color: white;
2858
}
2859
.login-dialog-session-list-button:active {
2861
color: white;
2862
}
2863
.screen-shield-arrows {
2865
padding-bottom: 3em;
2866
}
2867
.screen-shield-arrows Gjs_Arrow {
2869
color: white;
2870
width: 80px;
2871
height: 48px;
2872
-arrow-thickness: 12px;
2873
-arrow-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2874
}
2875
.screen-shield-clock {
2877
color: white;
2878
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2879
font-weight: normal;
2880
text-align: center;
2881
padding-bottom: 1.5em;
2882
}
2883
.screen-shield-clock-time {
2885
font-size: 112px;
2886
font-weight: 300;
2887
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2888
font-feature-settings: "tnum";
2889
}
2890
.screen-shield-clock-date {
2892
font-size: 45px;
2893
font-weight: 400;
2894
}
2895
.screen-shield-notifications-container {
2897
spacing: 6px;
2898
width: 30em;
2899
background-color: transparent;
2900
max-height: 500px;
2901
}
2902
.screen-shield-notifications-container .summary-notification-stack-scrollview {
2904
padding-top: 0;
2905
padding-bottom: 0;
2906
}
2907
.screen-shield-notifications-container .notification,
2909
.screen-shield-notifications-container .screen-shield-notification-source {
2910
padding: 8px;
2911
border: none;
2912
background-color: rgba(0, 0, 0, 0.3);
2913
color: white;
2914
border-radius: 4px;
2915
}
2916
.screen-shield-notifications-container .notification {
2918
margin-right: 16px;
2919
}
2920
.screen-shield-notification-label {
2922
min-height: 22px;
2923
padding: 2px 0px 0px 16px;
2924
font-weight: bold;
2925
}
2926
.screen-shield-notification-count-text {
2928
min-height: 22px;
2929
padding: 2px 0px 0px 16px;
2930
color: rgba(255, 255, 255, 0.7);
2931
}
2932
#panel.lock-screen {
2934
background-color: rgba(0, 0, 0, 0.3);
2935
}
2936
.screen-shield-background {
2938
background: black;
2939
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
2940
}
2941
#lockDialogGroup {
2943
background: #303030;
2944
background-size: cover;
2945
}
2946
#LookingGlassDialog {
2948
background-color: #FFFFFF;
2949
spacing: 4px;
2950
padding: 0;
2951
border: none;
2952
border-radius: 4px;
2953
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2954
}
2955
#LookingGlassDialog > #Toolbar {
2957
padding: 0 8px;
2958
border: none;
2959
border-radius: 0;
2960
background-color: rgba(255, 255, 255, 0.01);
2961
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
2962
}
2963
#LookingGlassDialog .labels {
2965
spacing: 0;
2966
}
2967
#LookingGlassDialog .notebook-tab {
2969
-natural-hpadding: 12px;
2970
-minimum-hpadding: 6px;
2971
font-weight: bold;
2972
color: rgba(0, 0, 0, 0.54);
2973
transition-duration: 100ms;
2974
padding-left: 16px;
2975
padding-right: 16px;
2976
min-height: 36px;
2977
padding: 0 32px;
2978
}
2979
#LookingGlassDialog .notebook-tab:hover {
2981
background-color: rgba(0, 0, 0, 0.08);
2982
color: rgba(0, 0, 0, 0.87);
2983
text-shadow: none;
2984
}
2985
#LookingGlassDialog .notebook-tab:active {
2987
background-color: rgba(0, 0, 0, 0.2);
2988
color: rgba(0, 0, 0, 0.87);
2989
transition-duration: 200ms;
2990
}
2991
#LookingGlassDialog .notebook-tab:selected {
2993
border-bottom-width: 0;
2994
border-color: transparent;
2995
background-color: rgba(255, 255, 255, 0.01);
2996
box-shadow: inset 0 -2px 0px #4285F4;
2997
color: rgba(0, 0, 0, 0.87);
2998
text-shadow: none;
2999
}
3000
#LookingGlassDialog StBoxLayout#EvalBox {
3002
padding: 4px;
3003
spacing: 4px;
3004
}
3005
#LookingGlassDialog StBoxLayout#ResultsArea {
3007
spacing: 4px;
3008
}
3009
.lg-dialog StEntry {
3011
selection-background-color: #4285F4;
3012
selected-color: white;
3013
}
3014
.lg-dialog .shell-link {
3016
color: #4285F4;
3017
}
3018
.lg-dialog .shell-link:hover {
3020
color: #4285F4;
3021
}
3022
.lg-completions-text {
3024
font-size: 1em;
3025
font-style: italic;
3026
}
3027
.lg-obj-inspector-title {
3029
spacing: 4px;
3030
}
3031
.lg-obj-inspector-button {
3033
min-height: 36px;
3034
padding: 0 16px;
3035
border: none;
3036
border-radius: 4px;
3037
font-size: 10.5pt;
3038
font-weight: 500;
3039
color: rgba(0, 0, 0, 0.54);
3040
background-color: transparent;
3041
border-color: transparent;
3042
box-shadow: 0 0 transparent;
3043
text-shadow: none;
3044
icon-shadow: none;
3045
transition-duration: 100ms;
3046
}
3047
.lg-obj-inspector-button:hover {
3049
color: rgba(0, 0, 0, 0.87);
3050
background-color: rgba(0, 0, 0, 0.08);
3051
border-color: transparent;
3052
box-shadow: 0 0 transparent;
3053
text-shadow: none;
3054
icon-shadow: none;
3055
}
3056
.lg-obj-inspector-button:active {
3058
color: rgba(0, 0, 0, 0.87);
3059
background-color: rgba(0, 0, 0, 0.2);
3060
border-color: transparent;
3061
box-shadow: 0 0 transparent;
3062
text-shadow: none;
3063
icon-shadow: none;
3064
transition-duration: 200ms;
3065
}
3066
.lg-obj-inspector-button:insensitive {
3068
color: rgba(0, 0, 0, 0.26);
3069
background-color: transparent;
3070
border-color: transparent;
3071
box-shadow: 0 0 transparent;
3072
text-shadow: none;
3073
icon-shadow: none;
3074
}
3075
.lg-obj-inspector-button:focus {
3077
color: rgba(0, 0, 0, 0.87);
3078
text-shadow: none;
3079
icon-shadow: none;
3080
box-shadow: 0 0 transparent;
3081
}
3082
.lg-obj-inspector-button:hover {
3084
border: none;
3085
}
3086
#lookingGlassExtensions {
3088
padding: 4px;
3089
}
3090
.lg-extensions-list {
3092
padding: 4px;
3093
spacing: 6px;
3094
}
3095
.lg-extension {
3097
border: none;
3098
border-radius: 4px;
3099
padding: 4px;
3100
}
3101
.lg-extension-name {
3103
font-size: 18pt;
3104
font-weight: 400;
3105
}
3106
.lg-extension-meta {
3108
spacing: 6px;
3109
}
3110
#LookingGlassPropertyInspector {
3112
background: #FFFFFF;
3113
border: none;
3114
border-radius: 4px;
3115
padding: 6px;
3116
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
3117
}
3118
/* Dash to Dock */
3120
#dashtodockContainer #dash {
3121
background-color: rgba(0, 0, 0, 0.6);
3122
}
3123
#dashtodockContainer:overview #dash {
3125
background-color: rgba(255, 255, 255, 0.1);
3126
}
3127
#dashtodockContainer.extended:overview #dash {
3129
background-color: transparent;
3130
}
3131
#dashtodockContainer.left #dash,
3133
#dashtodockContainer.right #dash {
3134
padding: 3px 0;
3135
}
3136
#dashtodockContainer.top #dash,
3138
#dashtodockContainer.bottom #dash {
3139
padding: 0 3px;
3140
}
3141
#dashtodockContainer.extended #dash {
3143
padding: 0;
3144
border-radius: 0;
3145
}
3146
#dashtodockContainer.left .dash-item-container > StWidget,
3148
#dashtodockContainer.right .dash-item-container > StWidget,
3149
#dashtodockContainer.extended.left .dash-item-container > StWidget,
3150
#dashtodockContainer.extended.right .dash-item-container > StWidget {
3151
padding: 3px 6px;
3152
}
3153
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
3155
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
3156
padding: 6px 6px 3px 6px;
3157
}
3158
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
3160
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
3161
padding: 3px 6px 6px 6px;
3162
}
3163
#dashtodockContainer.top .dash-item-container > StWidget,
3165
#dashtodockContainer.bottom .dash-item-container > StWidget,
3166
#dashtodockContainer.extended.top .dash-item-container > StWidget,
3167
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
3168
padding: 6px 3px;
3169
}
3170
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
3172
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
3173
padding: 6px 3px 6px 6px;
3174
}
3175
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
3177
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
3178
padding: 6px 6px 6px 3px;
3179
}
3180
#dashtodockContainer .app-well-app-running-dot {
3182
background-color: transparent;
3183
}
3184
#dashtodockContainer .dash-item-container > StWidget {
3186
background-size: cover;
3187
}
3188
#dashtodockContainer.left .dash-item-container > StWidget.running1 {
3190
background-image: url("assets/dash/left-running1.svg");
3191
}
3192
#dashtodockContainer.left .dash-item-container > StWidget.running1.focused {
3194
background-image: url("assets/dash/left-running1-focused.svg");
3195
}
3196
#dashtodockContainer.left .dash-item-container > StWidget.running2 {
3198
background-image: url("assets/dash/left-running2.svg");
3199
}
3200
#dashtodockContainer.left .dash-item-container > StWidget.running2.focused {
3202
background-image: url("assets/dash/left-running2-focused.svg");
3203
}
3204
#dashtodockContainer.left .dash-item-container > StWidget.running3 {
3206
background-image: url("assets/dash/left-running3.svg");
3207
}
3208
#dashtodockContainer.left .dash-item-container > StWidget.running3.focused {
3210
background-image: url("assets/dash/left-running3-focused.svg");
3211
}
3212
#dashtodockContainer.left .dash-item-container > StWidget.running4 {
3214
background-image: url("assets/dash/left-running4.svg");
3215
}
3216
#dashtodockContainer.left .dash-item-container > StWidget.running4.focused {
3218
background-image: url("assets/dash/left-running4-focused.svg");
3219
}
3220
#dashtodockContainer.right .dash-item-container > StWidget.running1 {
3222
background-image: url("assets/dash/right-running1.svg");
3223
}
3224
#dashtodockContainer.right .dash-item-container > StWidget.running1.focused {
3226
background-image: url("assets/dash/right-running1-focused.svg");
3227
}
3228
#dashtodockContainer.right .dash-item-container > StWidget.running2 {
3230
background-image: url("assets/dash/right-running2.svg");
3231
}
3232
#dashtodockContainer.right .dash-item-container > StWidget.running2.focused {
3234
background-image: url("assets/dash/right-running2-focused.svg");
3235
}
3236
#dashtodockContainer.right .dash-item-container > StWidget.running3 {
3238
background-image: url("assets/dash/right-running3.svg");
3239
}
3240
#dashtodockContainer.right .dash-item-container > StWidget.running3.focused {
3242
background-image: url("assets/dash/right-running3-focused.svg");
3243
}
3244
#dashtodockContainer.right .dash-item-container > StWidget.running4 {
3246
background-image: url("assets/dash/right-running4.svg");
3247
}
3248
#dashtodockContainer.right .dash-item-container > StWidget.running4.focused {
3250
background-image: url("assets/dash/right-running4-focused.svg");
3251
}
3252
#dashtodockContainer.top .dash-item-container > StWidget.running1 {
3254
background-image: url("assets/dash/top-running1.svg");
3255
}
3256
#dashtodockContainer.top .dash-item-container > StWidget.running1.focused {
3258
background-image: url("assets/dash/top-running1-focused.svg");
3259
}
3260
#dashtodockContainer.top .dash-item-container > StWidget.running2 {
3262
background-image: url("assets/dash/top-running2.svg");
3263
}
3264
#dashtodockContainer.top .dash-item-container > StWidget.running2.focused {
3266
background-image: url("assets/dash/top-running2-focused.svg");
3267
}
3268
#dashtodockContainer.top .dash-item-container > StWidget.running3 {
3270
background-image: url("assets/dash/top-running3.svg");
3271
}
3272
#dashtodockContainer.top .dash-item-container > StWidget.running3.focused {
3274
background-image: url("assets/dash/top-running3-focused.svg");
3275
}
3276
#dashtodockContainer.top .dash-item-container > StWidget.running4 {
3278
background-image: url("assets/dash/top-running4.svg");
3279
}
3280
#dashtodockContainer.top .dash-item-container > StWidget.running4.focused {
3282
background-image: url("assets/dash/top-running4-focused.svg");
3283
}
3284
#dashtodockContainer.bottom .dash-item-container > StWidget.running1 {
3286
background-image: url("assets/dash/bottom-running1.svg");
3287
}
3288
#dashtodockContainer.bottom .dash-item-container > StWidget.running1.focused {
3290
background-image: url("assets/dash/bottom-running1-focused.svg");
3291
}
3292
#dashtodockContainer.bottom .dash-item-container > StWidget.running2 {
3294
background-image: url("assets/dash/bottom-running2.svg");
3295
}
3296
#dashtodockContainer.bottom .dash-item-container > StWidget.running2.focused {
3298
background-image: url("assets/dash/bottom-running2-focused.svg");
3299
}
3300
#dashtodockContainer.bottom .dash-item-container > StWidget.running3 {
3302
background-image: url("assets/dash/bottom-running3.svg");
3303
}
3304
#dashtodockContainer.bottom .dash-item-container > StWidget.running3.focused {
3306
background-image: url("assets/dash/bottom-running3-focused.svg");
3307
}
3308
#dashtodockContainer.bottom .dash-item-container > StWidget.running4 {
3310
background-image: url("assets/dash/bottom-running4.svg");
3311
}
3312
#dashtodockContainer.bottom .dash-item-container > StWidget.running4.focused {
3314
background-image: url("assets/dash/bottom-running4-focused.svg");
3315
}
3316
/* Simple Dock */
3318
#dash:desktop {
3319
background-color: rgba(0, 0, 0, 0.6);
3320
}
3321
/* GPaste */
3323
.popup-menu .search-entry {
3324
color: rgba(0, 0, 0, 0.87);
3325
selection-background-color: #4285F4;
3326
selected-color: white;
3327
transition-duration: 100ms;
3328
background-color: rgba(0, 0, 0, 0.04);
3329
border-color: transparent;
3330
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
3331
}
3332
.popup-menu .search-entry:hover {
3334
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
3335
}
3336
.popup-menu .search-entry:focus {
3338
border-color: transparent;
3339
box-shadow: inset 0 -2px #4285F4;
3340
color: rgba(0, 0, 0, 0.87);
3341
}
3342
.popup-menu .search-entry .search-entry-icon {
3344
color: rgba(0, 0, 0, 0.54);
3345
}
3346
.popup-menu .search-entry:hover .search-entry-icon, .popup-menu .search-entry:focus .search-entry-icon {
3348
color: rgba(0, 0, 0, 0.87);
3349
}
3350