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:hover {
47
color: rgba(0, 0, 0, 0.87);
48
background-color: rgba(0, 0, 0, 0.08);
49
border-color: transparent;
50
box-shadow: 0 0 transparent;
51
text-shadow: none;
52
icon-shadow: none;
53
}
54
.button:active {
56
color: rgba(0, 0, 0, 0.87);
57
background-color: rgba(0, 0, 0, 0.2);
58
border-color: transparent;
59
box-shadow: 0 0 transparent;
60
text-shadow: none;
61
icon-shadow: none;
62
transition-duration: 200ms;
63
}
64
.button:insensitive {
66
color: rgba(0, 0, 0, 0.26);
67
background-color: transparent;
68
border-color: transparent;
69
box-shadow: 0 0 transparent;
70
text-shadow: none;
71
icon-shadow: none;
72
}
73
.button:focus {
75
color: rgba(0, 0, 0, 0.87);
76
text-shadow: none;
77
icon-shadow: none;
78
box-shadow: 0 0 transparent;
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:hover {
100
color: rgba(0, 0, 0, 0.87);
101
background-color: rgba(0, 0, 0, 0.08);
102
border-color: transparent;
103
box-shadow: 0 0 transparent;
104
text-shadow: none;
105
icon-shadow: none;
106
}
107
.modal-dialog-linked-button:active {
109
color: rgba(0, 0, 0, 0.87);
110
background-color: rgba(0, 0, 0, 0.2);
111
border-color: transparent;
112
box-shadow: 0 0 transparent;
113
text-shadow: none;
114
icon-shadow: none;
115
transition-duration: 200ms;
116
}
117
.modal-dialog-linked-button:insensitive {
119
color: rgba(0, 0, 0, 0.26);
120
background-color: transparent;
121
border-color: transparent;
122
box-shadow: 0 0 transparent;
123
text-shadow: none;
124
icon-shadow: none;
125
}
126
.modal-dialog-linked-button:focus {
128
color: rgba(0, 0, 0, 0.87);
129
text-shadow: none;
130
icon-shadow: none;
131
box-shadow: 0 0 transparent;
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
-slider-height: 2px;
248
-slider-background-color: rgba(0, 0, 0, 0.26);
249
-slider-border-color: transparent;
250
-slider-active-background-color: #4285F4;
251
-slider-active-border-color: transparent;
252
-slider-border-width: 0;
253
-slider-handle-radius: 6px;
254
}
255
/* Check Boxes */
257
.check-box * {
258
min-height: 20px;
259
padding: 8px 0;
260
}
261
.check-box StBoxLayout {
263
spacing: 8px;
264
}
265
.check-box StBin {
267
transition-duration: 100ms;
268
width: 24px;
269
height: 24px;
270
padding: 6px;
271
border-radius: 100px;
272
background-image: url("assets/checkbox-off.svg");
273
}
274
.check-box:focus StBin {
276
background-image: url("assets/checkbox-off.svg");
277
}
278
.check-box:hover StBin {
280
background-color: rgba(0, 0, 0, 0.08);
281
}
282
.check-box:active StBin {
284
transition-duration: 200ms;
285
background-color: rgba(0, 0, 0, 0.2);
286
}
287
.check-box:checked StBin {
289
background-image: url("assets/checkbox.svg");
290
}
291
.check-box:focus:checked StBin {
293
background-image: url("assets/checkbox.svg");
294
}
295
.check-box:hover:checked StBin {
297
background-color: rgba(66, 133, 244, 0.08);
298
}
299
.check-box:active:checked StBin {
301
background-color: rgba(66, 133, 244, 0.2);
302
}
303
/* Switches */
305
.toggle-switch {
306
width: 40px;
307
height: 20px;
308
background-size: contain;
309
}
310
.toggle-switch-us {
312
background-image: url("assets/toggle-off.svg");
313
}
314
.toggle-switch-us:checked {
316
background-image: url("assets/toggle-on.svg");
317
}
318
.toggle-switch-intl {
320
background-image: url("assets/toggle-off.svg");
321
}
322
.toggle-switch-intl:checked {
324
background-image: url("assets/toggle-on.svg");
325
}
326
/* links */
328
.shell-link {
329
transition-duration: 100ms;
330
border-radius: 4px;
331
color: #4285F4;
332
}
333
.shell-link:hover {
335
color: #4285F4;
336
background-color: rgba(66, 133, 244, 0.08);
337
}
338
.shell-link:active {
340
transition-duration: 200ms;
341
color: #4285F4;
342
background-color: rgba(66, 133, 244, 0.2);
343
}
344
/* Modal Dialogs */
346
.headline {
347
font-size: 15pt;
348
font-weight: 500;
349
}
350
.lightbox {
352
background-color: black;
353
}
354
.flashspot {
356
background-color: white;
357
}
358
.modal-dialog {
360
border-radius: 4px;
361
color: rgba(0, 0, 0, 0.87);
362
background-color: #FFFFFF;
363
border: none;
364
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
365
}
366
.modal-dialog .modal-dialog-content-box {
368
padding: 24px;
369
}
370
.modal-dialog .run-dialog-entry {
372
width: 20em;
373
margin-bottom: 0;
374
}
375
.modal-dialog .run-dialog-error-box {
377
padding-top: 16px;
378
spacing: 6px;
379
}
380
.modal-dialog .run-dialog-button-box {
382
padding-top: 1em;
383
}
384
.modal-dialog .run-dialog-label {
386
font-size: 1em;
387
font-weight: normal;
388
color: rgba(0, 0, 0, 0.54);
389
padding-bottom: .4em;
390
}
391
.show-processes-dialog-subject,
393
.mount-question-dialog-subject,
394
.end-session-dialog-subject {
395
font-size: 15pt;
396
font-weight: 500;
397
}
398
/* End Session Dialog */
400
.end-session-dialog {
401
spacing: 42px;
402
border: none;
403
}
404
.end-session-dialog-list {
406
padding-top: 20px;
407
}
408
.end-session-dialog-layout {
410
padding-left: 17px;
411
}
412
.end-session-dialog-layout:rtl {
414
padding-right: 17px;
415
}
416
.end-session-dialog-description {
418
width: 28em;
419
padding-bottom: 10px;
420
}
421
.end-session-dialog-description:rtl {
423
text-align: right;
424
}
425
.end-session-dialog-warning {
427
width: 28em;
428
color: #FBBC05;
429
padding-top: 6px;
430
}
431
.end-session-dialog-warning:rtl {
433
text-align: right;
434
}
435
.end-session-dialog-logout-icon {
437
border-radius: 5px;
438
width: 48px;
439
height: 48px;
440
background-size: contain;
441
}
442
.end-session-dialog-shutdown-icon {
444
color: rgba(0, 0, 0, 0.38);
445
width: 48px;
446
height: 48px;
447
}
448
.end-session-dialog-inhibitor-layout {
450
spacing: 16px;
451
max-height: 200px;
452
padding-right: 65px;
453
padding-left: 65px;
454
}
455
.end-session-dialog-session-list,
457
.end-session-dialog-app-list {
458
spacing: 1em;
459
}
460
.end-session-dialog-list-header {
462
font-weight: bold;
463
}
464
.end-session-dialog-list-header:rtl {
466
text-align: right;
467
}
468
.end-session-dialog-app-list-item,
470
.end-session-dialog-session-list-item {
471
spacing: 1em;
472
}
473
.end-session-dialog-app-list-item-name,
475
.end-session-dialog-session-list-item-name {
476
font-weight: bold;
477
}
478
.end-session-dialog-app-list-item-description {
480
color: rgba(0, 0, 0, 0.54);
481
font-size: 1em;
482
}
483
/* ShellMountOperation Dialogs */
485
.shell-mount-operation-icon {
486
icon-size: 48px;
487
}
488
.show-processes-dialog,
490
.mount-question-dialog {
491
spacing: 24px;
492
}
493
.show-processes-dialog-subject,
495
.mount-question-dialog-subject {
496
padding-top: 10px;
497
padding-left: 17px;
498
padding-bottom: 6px;
499
}
500
.mount-question-dialog-subject {
502
max-width: 500px;
503
}
504
.show-processes-dialog-subject:rtl,
506
.mount-question-dialog-subject:rtl {
507
padding-left: 0px;
508
padding-right: 17px;
509
}
510
.show-processes-dialog-description,
512
.mount-question-dialog-description {
513
padding-left: 17px;
514
width: 28em;
515
}
516
.show-processes-dialog-description:rtl,
518
.mount-question-dialog-description:rtl {
519
padding-right: 17px;
520
}
521
.show-processes-dialog-app-list {
523
max-height: 200px;
524
padding-top: 24px;
525
padding-left: 49px;
526
padding-right: 32px;
527
}
528
.show-processes-dialog-app-list:rtl {
530
padding-right: 49px;
531
padding-left: 32px;
532
}
533
.show-processes-dialog-app-list-item {
535
color: rgba(0, 0, 0, 0.87);
536
}
537
.show-processes-dialog-app-list-item:hover {
539
color: rgba(0, 0, 0, 0.87);
540
}
541
.show-processes-dialog-app-list-item:ltr {
543
padding-right: 1em;
544
}
545
.show-processes-dialog-app-list-item:rtl {
547
padding-left: 1em;
548
}
549
.show-processes-dialog-app-list-item-icon:ltr {
551
padding-right: 17px;
552
}
553
.show-processes-dialog-app-list-item-icon:rtl {
555
padding-left: 17px;
556
}
557
.show-processes-dialog-app-list-item-name {
559
font-size: 1em;
560
}
561
/* Password or Authentication Dialog */
563
.prompt-dialog {
564
width: 500px;
565
border: none;
566
}
567
.prompt-dialog-main-layout {
569
spacing: 24px;
570
padding: 10px;
571
}
572
.prompt-dialog-message-layout {
574
spacing: 16px;
575
}
576
.prompt-dialog-headline {
578
font-size: 15pt;
579
font-weight: 500;
580
color: rgba(0, 0, 0, 0.87);
581
}
582
.prompt-dialog-description:rtl {
584
text-align: right;
585
}
586
.prompt-dialog-password-box {
588
spacing: 1em;
589
padding-bottom: 1em;
590
}
591
.prompt-dialog-error-label {
593
font-size: 1em;
594
color: #EA4335;
595
padding-bottom: 8px;
596
}
597
.prompt-dialog-info-label {
599
font-size: 1em;
600
padding-bottom: 8px;
601
}
602
.hidden {
604
color: rgba(0, 0, 0, 0);
605
}
606
.prompt-dialog-null-label {
608
font-size: 1em;
609
padding-bottom: 8px;
610
}
611
/* Polkit Dialog */
613
.polkit-dialog-user-layout {
614
padding-left: 10px;
615
spacing: 10px;
616
}
617
.polkit-dialog-user-layout:rtl {
619
padding-left: 0px;
620
padding-right: 10px;
621
}
622
.polkit-dialog-user-root-label {
624
color: #FBBC05;
625
}
626
.polkit-dialog-user-icon {
628
border-radius: 5px;
629
background-size: contain;
630
width: 48px;
631
height: 48px;
632
}
633
/* Audio selection dialog */
635
.audio-device-selection-dialog {
636
spacing: 30px;
637
}
638
.audio-selection-content {
640
spacing: 20px;
641
padding: 24px;
642
}
643
.audio-selection-title {
645
font-weight: bold;
646
text-align: center;
647
}
648
.audio-selection-box {
650
spacing: 20px;
651
}
652
.audio-selection-device {
654
border: 1px solid rgba(0, 0, 0, 0.12);
655
border-radius: 4px;
656
}
657
.audio-selection-device:active, .audio-selection-device:hover, .audio-selection-device:focus {
659
background-color: #4285F4;
660
}
661
.audio-selection-device-box {
663
padding: 20px;
664
spacing: 20px;
665
}
666
.audio-selection-device-icon {
668
icon-size: 64px;
669
}
670
/* Access Dialog */
672
.access-dialog {
673
spacing: 30px;
674
}
675
.access-dialog-main-layout {
677
padding: 12px 20px 0;
678
spacing: 12px;
679
}
680
.access-dialog-content {
682
max-width: 28em;
683
spacing: 20px;
684
}
685
.access-dialog-icon {
687
min-width: 48px;
688
icon-size: 48px;
689
}
690
.access-dialog-title {
692
font-weight: bold;
693
}
694
.access-dialog-subtitle {
696
color: rgba(0, 0, 0, 0.54);
697
font-weight: bold;
698
}
699
/* Geolocation Dialog */
701
.geolocation-dialog {
702
spacing: 30px;
703
}
704
.geolocation-dialog-main-layout {
706
spacing: 12px;
707
}
708
.geolocation-dialog-content {
710
spacing: 20px;
711
}
712
.geolocation-dialog-icon {
714
icon-size: 48px;
715
}
716
.geolocation-dialog-title {
718
font-weight: bold;
719
}
720
.geolocation-dialog-reason {
722
color: rgba(0, 0, 0, 0.54);
723
font-weight: bold;
724
}
725
/* Network Agent Dialog */
727
.network-dialog-secret-table {
728
spacing-rows: 15px;
729
spacing-columns: 1em;
730
}
731
.keyring-dialog-control-table {
733
spacing-rows: 15px;
734
spacing-columns: 1em;
735
}
736
/* Popovers/Menus */
738
.popup-menu {
739
min-width: 200px;
740
}
741
.popup-menu .popup-sub-menu {
743
background-color: #EEEEEE;
744
box-shadow: 0 0 transparent;
745
}
746
.popup-menu .popup-menu-content {
748
padding: 8px 0;
749
}
750
.popup-menu .popup-menu-item {
752
spacing: 8px;
753
transition-duration: 100ms;
754
}
755
.popup-menu .popup-menu-item:ltr {
757
padding: 0.4em 24px 0.4em 0;
758
}
759
.popup-menu .popup-menu-item:rtl {
761
padding: 0.4em 0 0.4em 24px;
762
}
763
.popup-menu .popup-menu-item:checked {
765
background-color: #4285F4;
766
color: white;
767
box-shadow: 0 0 transparent;
768
font-weight: normal;
769
}
770
.popup-menu .popup-menu-item:checked.selected {
772
background-color: #518ff5;
773
color: white;
774
}
775
.popup-menu .popup-menu-item:checked:active {
777
background-color: #689df6;
778
color: white !important;
779
}
780
.popup-menu .popup-menu-item:checked:insensitive {
782
color: rgba(255, 255, 255, 0.5);
783
}
784
.popup-menu .popup-menu-item.selected {
786
background-color: rgba(0, 0, 0, 0.08);
787
color: rgba(0, 0, 0, 0.87);
788
transition-duration: 0ms;
789
}
790
.popup-menu .popup-menu-item:active {
792
background-color: rgba(0, 0, 0, 0.2);
793
color: rgba(0, 0, 0, 0.87);
794
transition-duration: 200ms;
795
}
796
.popup-menu .popup-menu-item.selected:active {
798
color: rgba(0, 0, 0, 0.87);
799
}
800
.popup-menu .popup-menu-item:insensitive {
802
color: rgba(0, 0, 0, 0.38);
803
}
804
.popup-menu .popup-inactive-menu-item {
806
color: rgba(0, 0, 0, 0.87);
807
}
808
.popup-menu .popup-inactive-menu-item:insensitive {
810
color: rgba(0, 0, 0, 0.38);
811
}
812
.popup-menu.panel-menu {
814
-boxpointer-gap: 4px;
815
margin-bottom: 1.75em;
816
}
817
.popup-menu-ornament {
819
text-align: right;
820
width: 16px;
821
height: 16px;
822
}
823
.popup-menu-boxpointer,
825
.candidate-popup-boxpointer {
826
-arrow-border-radius: 0;
827
-arrow-background-color: transparent;
828
-arrow-border-width: 0;
829
-arrow-border-color: transparent;
830
-arrow-base: 0;
831
-arrow-rise: 0;
832
-arrow-box-shadow: none;
833
margin: 5px 8px 8px;
834
background-color: #FFFFFF;
835
border-radius: 4px;
836
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
837
}
838
.popup-separator-menu-item {
840
height: 1px;
841
margin: 8px 40px;
842
background-color: transparent;
843
border-color: rgba(0, 0, 0, 0.12);
844
border-bottom-width: 1px;
845
border-bottom-style: solid;
846
}
847
.background-menu {
849
-boxpointer-gap: 4px;
850
-arrow-rise: 0;
851
}
852
/* fallback menu
854
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
855
app menu inside the main app window itself rather than the top bar
856
*/
857
/* OSD */
858
.osd-window {
859
text-align: center;
860
font-weight: bold;
861
spacing: 1em;
862
margin: 32px;
863
min-width: 64px;
864
min-height: 64px;
865
}
866
.osd-window .osd-monitor-label {
868
font-size: 45px;
869
font-weight: 400;
870
}
871
.osd-window .level {
873
height: 8px;
874
border-radius: 0;
875
background-color: rgba(0, 0, 0, 0.12);
876
color: rgba(0, 0, 0, 0.87);
877
}
878
.osd-window .level-bar {
880
background-color: #4285F4;
881
border-radius: 0;
882
}
883
/* Pad OSD */
885
.pad-osd-window {
886
padding: 32px;
887
background-color: rgba(0, 0, 0, 0.6);
888
}
889
.combo-box-label {
891
width: 15em;
892
}
893
/* App Switcher */
895
.switcher-popup {
896
padding: 8px;
897
spacing: 16px;
898
}
899
.switcher-list-item-container {
901
spacing: 8px;
902
}
903
.switcher-list .item-box {
905
transition-duration: 100ms;
906
padding: 8px;
907
border-radius: 4px;
908
}
909
.switcher-list .item-box:outlined {
911
padding: 8px;
912
border: none;
913
background-color: rgba(0, 0, 0, 0.12);
914
}
915
.switcher-list .item-box:selected {
917
background-color: #4285F4;
918
color: white;
919
}
920
.switcher-list .thumbnail-box {
922
padding: 2px;
923
spacing: 4px;
924
}
925
.switcher-list .thumbnail {
927
width: 256px;
928
}
929
.switcher-list .separator {
931
width: 1px;
932
background: rgba(0, 0, 0, 0.12);
933
}
934
.switcher-arrow {
936
transition-duration: 100ms;
937
border-color: rgba(0, 0, 0, 0);
938
color: rgba(0, 0, 0, 0.54);
939
}
940
.switcher-arrow:highlighted {
942
color: rgba(0, 0, 0, 0.87);
943
}
944
.input-source-switcher-symbol {
946
font-size: 45px;
947
font-weight: 400;
948
width: 96px;
949
height: 96px;
950
}
951
/* Window Cycler */
953
.cycler-highlight {
954
border: 4px solid #4285F4;
955
}
956
/* Workspace Switcher */
958
.workspace-switcher-group {
959
padding: 8px;
960
}
961
.workspace-switcher {
963
background: transparent;
964
border: 0px;
965
border-radius: 0px;
966
padding: 0px;
967
spacing: 8px;
968
}
969
.ws-switcher-active-up, .ws-switcher-active-down {
971
height: 48px;
972
background-color: #4285F4;
973
color: white;
974
background-size: 32px;
975
border-radius: 4px;
976
}
977
.ws-switcher-box {
979
height: 48px;
980
border: none;
981
background: rgba(0, 0, 0, 0.12);
982
border-radius: 4px;
983
}
984
.osd-window,
986
.resize-popup,
987
.switcher-list, .workspace-switcher-container {
988
color: rgba(0, 0, 0, 0.87);
989
background-color: #FFFFFF;
990
border: none;
991
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
992
border-radius: 4px;
993
padding: 12px;
994
}
995
/* Tiled window previews */
997
.tile-preview {
998
background-color: rgba(123, 170, 247, 0.3);
999
border: 1px solid #7BAAF7;
1000
}
1001
.tile-preview-left.on-primary {
1003
border-radius: 0;
1004
}
1005
.tile-preview-right.on-primary {
1007
border-radius: 0;
1008
}
1009
.tile-preview-left.tile-preview-right.on-primary {
1011
border-radius: 0;
1012
}
1013
/* TOP BAR */
1015
#panel {
1016
background-color: #212121;
1017
/* transition from solid to transparent */
1018
transition-duration: 250ms;
1019
font-weight: bold;
1020
height: 32px;
1021
}
1022
#panel:overview, #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
1024
background-color: transparent;
1025
}
1026
#panel #panelLeft, #panel #panelCenter {
1028
spacing: 0;
1029
}
1030
#panel .panel-corner {
1032
-panel-corner-radius: 0;
1033
-panel-corner-background-color: rgba(0, 0, 0, 0.6);
1034
-panel-corner-border-width: 2px;
1035
-panel-corner-border-color: transparent;
1036
}
1037
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
1039
-panel-corner-border-color: white;
1040
}
1041
#panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
1043
-panel-corner-radius: 0;
1044
-panel-corner-background-color: transparent;
1045
-panel-corner-border-color: transparent;
1046
}
1047
#panel .panel-button {
1049
-natural-hpadding: 12px;
1050
-minimum-hpadding: 6px;
1051
font-weight: bold;
1052
color: rgba(255, 255, 255, 0.7);
1053
transition-duration: 100ms;
1054
}
1055
#panel .panel-button .app-menu-icon {
1057
-st-icon-style: symbolic;
1058
margin-left: 4px;
1059
margin-right: 4px;
1060
}
1061
#panel .panel-button:hover {
1063
color: white;
1064
}
1065
#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
1067
background-color: rgba(0, 0, 0, 0.01);
1068
box-shadow: inset 0 -2px 0px white;
1069
color: white;
1070
}
1071
#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 {
1073
icon-shadow: none;
1074
}
1075
#panel .panel-button .system-status-icon {
1077
icon-size: 1.14286em;
1078
padding: 0 4px;
1079
}
1080
.unlock-screen #panel .panel-button,
1082
.login-screen #panel .panel-button,
1083
.lock-screen #panel .panel-button {
1084
color: rgba(255, 255, 255, 0.7);
1085
}
1086
.unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
1088
.login-screen #panel .panel-button:focus,
1089
.login-screen #panel .panel-button:hover,
1090
.login-screen #panel .panel-button:active,
1091
.lock-screen #panel .panel-button:focus,
1092
.lock-screen #panel .panel-button:hover,
1093
.lock-screen #panel .panel-button:active {
1094
color: white;
1095
}
1096
#panel .panel-status-indicators-box,
1098
#panel .panel-status-menu-box {
1099
spacing: 2px;
1100
}
1101
#panel .power-status.panel-status-indicators-box {
1103
spacing: 0;
1104
}
1105
#panel .screencast-indicator {
1107
color: #FBBC05;
1108
}
1109
#calendarArea {
1111
padding: 8px 16px;
1112
}
1113
.calendar {
1115
margin-bottom: 0;
1116
}
1117
.calendar,
1119
.datemenu-today-button,
1120
.datemenu-displays-box,
1121
.message-list-sections {
1122
margin: 0 8px;
1123
}
1124
.datemenu-calendar-column {
1126
spacing: 8px;
1127
}
1128
.datemenu-displays-section {
1130
padding-bottom: 0;
1131
}
1132
.datemenu-today-button,
1134
.world-clocks-button,
1135
.message-list-section-title {
1136
min-height: 24px;
1137
padding: 4px 8px;
1138
border-radius: 4px;
1139
}
1140
.datemenu-today-button {
1142
min-height: 56px;
1143
}
1144
.message-list-section-list:ltr {
1146
padding-left: 0;
1147
}
1148
.message-list-section-list:rtl {
1150
padding-right: 0;
1151
}
1152
.datemenu-today-button,
1154
.world-clocks-button,
1155
.message-list-section-title {
1156
transition-duration: 100ms;
1157
}
1158
.datemenu-today-button:hover, .datemenu-today-button:focus,
1160
.world-clocks-button:hover,
1161
.world-clocks-button:focus,
1162
.message-list-section-title:hover,
1163
.message-list-section-title:focus {
1164
color: rgba(0, 0, 0, 0.87);
1165
background-color: rgba(0, 0, 0, 0.08);
1166
}
1167
.datemenu-today-button:active,
1169
.world-clocks-button:active,
1170
.message-list-section-title:active {
1171
transition-duration: 200ms;
1172
color: rgba(0, 0, 0, 0.87);
1173
background-color: rgba(0, 0, 0, 0.2);
1174
}
1175
.datemenu-today-button .date-label {
1177
font-size: 18pt;
1178
font-weight: 400;
1179
}
1180
.world-clocks-header,
1182
.message-list-section-title {
1183
color: rgba(0, 0, 0, 0.54);
1184
font-weight: bold;
1185
}
1186
.world-clocks-grid {
1188
spacing-rows: 0.4em;
1189
}
1190
.calendar-month-label {
1192
transition-duration: 100ms;
1193
height: 20px;
1194
margin: 2px;
1195
padding: 6px 16px;
1196
border-radius: 4px;
1197
color: rgba(0, 0, 0, 0.87);
1198
font-weight: bold;
1199
text-align: center;
1200
}
1201
.calendar-month-label:focus {
1203
background-color: rgba(0, 0, 0, 0.12);
1204
}
1205
.pager-button {
1207
transition-duration: 100ms;
1208
width: 32px;
1209
height: 32px;
1210
margin: 2px;
1211
border-radius: 100px;
1212
background-color: transparent;
1213
color: rgba(0, 0, 0, 0.87);
1214
}
1215
.pager-button:hover, .pager-button:focus {
1217
background-color: rgba(0, 0, 0, 0.08);
1218
}
1219
.pager-button:active {
1221
background-color: rgba(0, 0, 0, 0.2);
1222
transition-duration: 200ms;
1223
}
1224
.calendar-change-month-back {
1226
background-image: url("assets/calendar-arrow-left.svg");
1227
}
1228
.calendar-change-month-back:rtl {
1230
background-image: url("assets/calendar-arrow-right.svg");
1231
}
1232
.calendar-change-month-forward {
1234
background-image: url("assets/calendar-arrow-right.svg");
1235
}
1236
.calendar-change-month-forward:rtl {
1238
background-image: url("assets/calendar-arrow-left.svg");
1239
}
1240
.calendar-day-base {
1242
transition-duration: 100ms;
1243
font-size: 9pt;
1244
font-weight: 400;
1245
text-align: center;
1246
width: 32px;
1247
height: 32px;
1248
padding: 0;
1249
margin: 2px;
1250
border-radius: 100px;
1251
}
1252
.calendar-day-base:hover, .calendar-day-base:focus {
1254
background-color: rgba(0, 0, 0, 0.08);
1255
}
1256
.calendar-day-base:active, .calendar-day-base:selected {
1258
transition-duration: 200ms;
1259
color: white;
1260
background-color: #4285F4 !important;
1261
border-color: transparent;
1262
}
1263
.calendar-day-base.calendar-day-heading {
1265
width: 32px;
1266
height: 25px;
1267
margin-top: 2px;
1268
padding: 7px 0 0;
1269
border-radius: 100px;
1270
background-color: transparent;
1271
color: rgba(0, 0, 0, 0.38);
1272
font-size: 9pt;
1273
font-weight: 400;
1274
font-weight: bold;
1275
text-align: center;
1276
}
1277
.calendar-day {
1279
border-width: 0;
1280
}
1281
.calendar-day-top {
1283
border-top-width: 0;
1284
}
1285
.calendar-day-left {
1287
border-left-width: 0;
1288
}
1289
.calendar-nonwork-day {
1291
color: rgba(0, 0, 0, 0.87);
1292
}
1293
.calendar-today {
1295
font-weight: bold !important;
1296
border: none;
1297
}
1298
.calendar-day-with-events {
1300
color: #4285F4;
1301
font-weight: normal;
1302
text-decoration: underline;
1303
background-image: none;
1304
}
1305
.calendar-other-month-day {
1307
color: rgba(0, 0, 0, 0.26);
1308
opacity: 0.5;
1309
}
1310
.calendar-week-number {
1312
width: 32px;
1313
height: 25px;
1314
margin: 2px;
1315
padding: 7px 0 0;
1316
border-radius: 100px;
1317
background-color: transparent;
1318
color: rgba(0, 0, 0, 0.38);
1319
font-size: inherit;
1320
font-weight: bold;
1321
text-align: center;
1322
}
1323
/* Message list */
1325
.message-list {
1326
width: 420px;
1327
}
1328
.message-list-sections {
1330
spacing: 8px;
1331
}
1332
.message-list-section,
1334
.message-list-section-list {
1335
spacing: 8px;
1336
}
1337
.message-list-section-title-box {
1339
spacing: 8px;
1340
}
1341
.message-list-section-close > StIcon {
1343
icon-size: 16px;
1344
border-radius: 16px;
1345
padding: 8px;
1346
color: rgba(0, 0, 0, 0.54);
1347
background-color: transparent;
1348
}
1349
/* FIXME: how do you do this in sass? */
1351
.message-list-section-close:hover > StIcon,
1352
.message-list-section-close:focus > StIcon {
1353
color: rgba(0, 0, 0, 0.87);
1354
background-color: rgba(0, 0, 0, 0.08);
1355
}
1356
.message-list-section-close:active > StIcon {
1358
color: rgba(0, 0, 0, 0.87);
1359
background-color: rgba(0, 0, 0, 0.2);
1360
}
1361
.message {
1363
transition-duration: 100ms;
1364
min-height: 64px;
1365
background-color: transparent;
1366
border-radius: 4px;
1367
}
1368
.message:hover, .message:focus {
1370
background-color: rgba(0, 0, 0, 0.08);
1371
}
1372
.message:active {
1374
transition-duration: 200ms;
1375
background-color: rgba(0, 0, 0, 0.2);
1376
}
1377
.message-icon-bin {
1379
padding: 8px 0px 8px 8px;
1380
}
1381
.message-icon-bin:rtl {
1383
padding: 8px 8px 8px 0px;
1384
}
1385
.message-icon-bin > StIcon {
1387
icon-size: 32px;
1388
}
1389
.message-secondary-bin:ltr {
1391
padding-left: 8px;
1392
}
1393
.message-secondary-bin:rtl {
1395
padding-right: 8px;
1396
}
1397
.message-secondary-bin {
1399
color: rgba(0, 0, 0, 0.54);
1400
}
1401
.message-secondary-bin > StIcon {
1403
icon-size: 16px;
1404
}
1405
.message-title {
1407
min-height: 22px;
1408
padding-top: 2px;
1409
color: rgba(0, 0, 0, 0.87);
1410
font-weight: bold;
1411
font-size: 1em;
1412
}
1413
.message-content {
1415
min-height: 48px;
1416
padding: 8px;
1417
color: rgba(0, 0, 0, 0.54);
1418
font-size: 1em;
1419
}
1420
.message-content * > StIcon {
1422
transition-duration: 100ms;
1423
icon-size: 16px;
1424
border-radius: 16px;
1425
padding: 4px;
1426
color: rgba(0, 0, 0, 0.54);
1427
}
1428
/* FIXME: how do you do this in sass? */
1430
.message-content *:hover > StIcon,
1431
.message-content *:focus > StIcon {
1432
color: rgba(0, 0, 0, 0.87);
1433
background-color: rgba(0, 0, 0, 0.08);
1434
}
1435
.message-content *:active > StIcon {
1437
transition-duration: 200ms;
1438
color: rgba(0, 0, 0, 0.87);
1439
background-color: rgba(0, 0, 0, 0.2);
1440
}
1441
.message-media-control {
1443
transition-duration: 100ms;
1444
margin: 16px 0;
1445
padding: 8px;
1446
border-radius: 100px;
1447
color: rgba(0, 0, 0, 0.54);
1448
}
1449
.message-media-control:hover, .message-media-control:focus {
1451
color: rgba(0, 0, 0, 0.87);
1452
background-color: rgba(0, 0, 0, 0.08);
1453
}
1454
.message-media-control:active {
1456
color: rgba(0, 0, 0, 0.87);
1457
background-color: rgba(0, 0, 0, 0.2);
1458
transition-duration: 200ms;
1459
}
1460
.message-media-control:insensitive {
1462
color: rgba(0, 0, 0, 0.26);
1463
}
1464
.message-media-control:last-child:ltr {
1466
margin-right: 16px;
1467
padding-right: 8px;
1468
}
1469
.message-media-control:last-child:rtl {
1471
margin-left: 16px;
1472
padding-left: 8px;
1473
}
1474
.media-message-cover-icon {
1476
icon-size: 32px;
1477
}
1478
.media-message-cover-icon.fallback {
1480
icon-size: 16px;
1481
padding: 8px;
1482
border: none;
1483
border-radius: 4px;
1484
background-color: rgba(0, 0, 0, 0.12);
1485
color: rgba(0, 0, 0, 0.38);
1486
}
1487
.system-switch-user-submenu-icon.user-icon {
1489
icon-size: 20px;
1490
padding: 0 2px;
1491
}
1492
.system-switch-user-submenu-icon.default-icon {
1494
icon-size: 16px;
1495
padding: 0 4px;
1496
}
1497
#appMenu {
1499
spinner-image: url("process-working.svg");
1500
spacing: 4px;
1501
}
1502
#appMenu .label-shadow {
1504
color: transparent;
1505
}
1506
.aggregate-menu {
1508
min-width: 280px;
1509
}
1510
.aggregate-menu .popup-menu-icon {
1512
padding: 0 4px;
1513
}
1514
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr {
1516
/* 8px spacing + 2*4px padding */
1517
padding-left: 16px;
1518
margin-left: 1.14286em;
1519
}
1520
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl {
1522
/* 8px spacing + 2*4px padding */
1523
padding-right: 16px;
1524
margin-right: 1.14286em;
1525
}
1526
.system-menu-action {
1528
color: rgba(0, 0, 0, 0.54);
1529
border-radius: 100px;
1530
/* wish we could do 50% */
1531
padding: 16px;
1532
border: none;
1533
transition-duration: 100ms;
1534
}
1535
.system-menu-action:hover, .system-menu-action:focus {
1537
background-color: rgba(0, 0, 0, 0.08);
1538
color: rgba(0, 0, 0, 0.87);
1539
border: none;
1540
padding: 16px;
1541
}
1542
.system-menu-action:active {
1544
background-color: rgba(0, 0, 0, 0.2);
1545
color: rgba(0, 0, 0, 0.87);
1546
transition-duration: 200ms;
1547
}
1548
.system-menu-action > StIcon {
1550
icon-size: 16px;
1551
}
1552
.ripple-box {
1554
width: 48px;
1555
height: 48px;
1556
border-radius: 0 0 48px 0;
1557
background-color: rgba(255, 255, 255, 0.3);
1558
background-image: none;
1559
background-size: auto;
1560
}
1561
.ripple-box:rtl {
1563
border-radius: 0 0 0 48px;
1564
background-image: none;
1565
}
1566
.popup-menu-arrow {
1568
width: 16px;
1569
height: 16px;
1570
}
1571
.popup-menu-icon {
1573
icon-size: 1.14286em;
1574
}
1575
.window-close {
1577
height: 36px;
1578
width: 36px;
1579
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1580
background-image: url("assets/window-close.svg");
1581
background-size: 36px;
1582
}
1583
.window-close:hover {
1585
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1586
}
1587
.window-close:active {
1589
background-image: url("assets/window-close-active.svg");
1590
}
1591
.window-close {
1593
-shell-close-overlap: 18px;
1594
}
1595
.window-close:rtl {
1597
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1598
}
1599
.window-close:rtl:hover {
1601
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1602
}
1603
/* NETWORK DIALOGS */
1605
.nm-dialog {
1606
max-height: 500px;
1607
min-height: 450px;
1608
min-width: 470px;
1609
}
1610
.nm-dialog-content {
1612
spacing: 20px;
1613
padding: 24px;
1614
}
1615
.nm-dialog-header-hbox {
1617
spacing: 10px;
1618
}
1619
.nm-dialog-airplane-box {
1621
spacing: 12px;
1622
}
1623
.nm-dialog-airplane-headline {
1625
font-weight: bold;
1626
text-align: center;
1627
}
1628
.nm-dialog-airplane-text {
1630
color: rgba(0, 0, 0, 0.87);
1631
}
1632
.nm-dialog-header-icon {
1634
icon-size: 32px;
1635
}
1636
.nm-dialog-scroll-view {
1638
border: none;
1639
}
1640
.nm-dialog-header {
1642
font-size: 15pt;
1643
font-weight: 500;
1644
}
1645
.nm-dialog-item {
1647
transition-duration: 100ms;
1648
font-size: 1em;
1649
border-bottom: none;
1650
border-radius: 4px;
1651
padding: 12px;
1652
spacing: 20px;
1653
}
1654
.nm-dialog-item:hover, .nm-dialog-item:focus {
1656
background-color: rgba(0, 0, 0, 0.08);
1657
}
1658
.nm-dialog-item:active {
1660
transition-duration: 200ms;
1661
background-color: rgba(0, 0, 0, 0.2);
1662
}
1663
.nm-dialog-item:selected {
1665
background-color: #4285F4;
1666
color: white;
1667
}
1668
.nm-dialog-icons {
1670
spacing: .5em;
1671
}
1672
.nm-dialog-icon {
1674
icon-size: 16px;
1675
}
1676
.no-networks-label {
1678
color: rgba(0, 0, 0, 0.38);
1679
}
1680
.no-networks-box {
1682
spacing: 12px;
1683
}
1684
/* OVERVIEW */
1686
#overview {
1687
spacing: 24px;
1688
}
1689
.overview-controls {
1691
padding-bottom: 32px;
1692
}
1693
.window-picker {
1695
-horizontal-spacing: 32px;
1696
-vertical-spacing: 32px;
1697
padding-left: 32px;
1698
padding-right: 32px;
1699
padding-bottom: 48px;
1700
}
1701
.window-picker.external-monitor {
1703
padding: 32px;
1704
}
1705
.window-clone-border {
1707
border: 4px solid rgba(255, 255, 255, 0.3);
1708
border-radius: 4px;
1709
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
1710
}
1711
.window-caption {
1713
spacing: 25px;
1714
color: white;
1715
background-color: transparent;
1716
border-radius: 4px;
1717
padding: 4px 8px;
1718
-shell-caption-spacing: 12px;
1719
}
1720
.window-caption:hover {
1722
background-color: rgba(255, 255, 255, 0.3);
1723
color: white;
1724
}
1725
.search-entry {
1727
width: 304px;
1728
padding: 0 8px;
1729
border-radius: 4px 4px 0 0;
1730
color: rgba(255, 255, 255, 0.5);
1731
selection-background-color: rgba(255, 255, 255, 0.3);
1732
selected-color: white;
1733
transition-duration: 100ms;
1734
background-color: rgba(255, 255, 255, 0.04);
1735
border-color: transparent;
1736
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1737
}
1738
.search-entry:hover {
1740
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1741
}
1742
.search-entry:focus {
1744
border-color: transparent;
1745
box-shadow: inset 0 -2px white;
1746
padding: 0 8px;
1747
border-width: 0;
1748
color: white;
1749
}
1750
.search-entry .search-entry-icon {
1752
icon-size: 16px;
1753
padding: 0 0;
1754
color: rgba(255, 255, 255, 0.7);
1755
}
1756
.search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
1758
color: white;
1759
}
1760
#searchResultsBin {
1762
max-width: 1000px;
1763
}
1764
#searchResultsContent {
1766
padding-left: 20px;
1767
padding-right: 20px;
1768
spacing: 16px;
1769
}
1770
.search-section {
1772
spacing: 16px;
1773
}
1774
.search-section-content {
1776
spacing: 32px;
1777
}
1778
.list-search-results {
1780
spacing: 3px;
1781
}
1782
.search-section-separator {
1784
-gradient-height: 1px;
1785
-gradient-start: rgba(255, 255, 255, 0);
1786
-gradient-end: rgba(255, 255, 255, 0.4);
1787
-margin-horizontal: 1.5em;
1788
height: 1px;
1789
}
1790
.list-search-result-content {
1792
spacing: 12px;
1793
padding: 12px;
1794
}
1795
.list-search-result-title {
1797
font-size: 18pt;
1798
font-weight: 400;
1799
color: white;
1800
}
1801
.list-search-result-description {
1803
color: rgba(255, 255, 255, 0.7);
1804
}
1805
.search-provider-icon {
1807
padding: 15px;
1808
}
1809
.search-provider-icon-more {
1811
width: 16px;
1812
height: 16px;
1813
background-image: url("assets/more-results.svg");
1814
}
1815
/* DASHBOARD */
1817
#dash {
1818
transition-duration: 250ms;
1819
font-size: 1em;
1820
color: white;
1821
background-color: rgba(255, 255, 255, 0.1);
1822
padding: 3px 0;
1823
border: none;
1824
border-left: 0px;
1825
border-radius: 0px 4px 4px 0px;
1826
}
1827
#dash:rtl {
1829
border-radius: 4px 0 0 4px;
1830
}
1831
#dash .placeholder {
1833
background-image: url("assets/dash-placeholder.svg");
1834
background-size: contain;
1835
height: 24px;
1836
}
1837
#dash .empty-dash-drop-target {
1839
width: 24px;
1840
height: 24px;
1841
}
1842
.dash-item-container > StWidget {
1844
padding: 3px 6px;
1845
}
1846
.dash-label {
1848
border-radius: 4px;
1849
padding: 7px 8px;
1850
color: rgba(0, 0, 0, 0.87);
1851
background-color: #FFFFFF;
1852
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1853
text-align: center;
1854
-x-offset: 8px;
1855
}
1856
/* App Vault/Grid */
1858
.icon-grid {
1859
spacing: 30px;
1860
-shell-grid-horizontal-item-size: 136px;
1861
-shell-grid-vertical-item-size: 136px;
1862
}
1863
.icon-grid .overview-icon {
1865
icon-size: 96px;
1866
}
1867
.app-view-controls {
1869
width: 320px;
1870
padding-bottom: 32px;
1871
}
1872
.app-view-control {
1874
padding: 0 16px;
1875
font-weight: bold;
1876
color: rgba(255, 255, 255, 0.7);
1877
}
1878
.app-view-control:hover {
1880
color: white;
1881
background-color: rgba(255, 255, 255, 0.08) !important;
1882
}
1883
.app-view-control:active {
1885
color: white;
1886
background-color: rgba(255, 255, 255, 0.2) !important;
1887
}
1888
.app-view-control:checked {
1890
color: white;
1891
background-color: rgba(0, 0, 0, 0.01) !important;
1892
box-shadow: inset 0 2px 0 white;
1893
}
1894
.app-view-control:first-child {
1896
border-right-width: 0;
1897
border-radius: 4px;
1898
}
1899
.app-view-control:first-child:checked {
1901
border-radius: 0;
1902
}
1903
.app-view-control:last-child {
1905
border-radius: 4px;
1906
}
1907
.app-view-control:last-child:checked {
1909
border-radius: 0;
1910
}
1911
.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
1913
.list-search-result:focus,
1914
.list-search-result:selected,
1915
.list-search-result:hover {
1916
background-color: rgba(255, 255, 255, 0.08);
1917
transition-duration: 0ms;
1918
}
1919
.search-provider-icon:active, .search-provider-icon:checked,
1921
.list-search-result:active,
1922
.list-search-result:checked {
1923
background-color: rgba(255, 255, 255, 0.2);
1924
transition-duration: 200ms;
1925
}
1926
.app-well-app:hover .overview-icon,
1928
.app-well-app:focus .overview-icon,
1929
.app-well-app:selected .overview-icon,
1930
.app-well-app.app-folder:hover .overview-icon,
1931
.app-well-app.app-folder:focus .overview-icon,
1932
.app-well-app.app-folder:selected .overview-icon,
1933
.show-apps:hover .overview-icon,
1934
.show-apps:focus .overview-icon,
1935
.show-apps:selected .overview-icon,
1936
.grid-search-result:hover .overview-icon,
1937
.grid-search-result:focus .overview-icon,
1938
.grid-search-result:selected .overview-icon {
1939
background-color: rgba(255, 255, 255, 0.08);
1940
transition-duration: 0ms;
1941
border-image: none;
1942
background-image: none;
1943
}
1944
.app-well-app:active .overview-icon,
1946
.app-well-app:checked .overview-icon,
1947
.app-well-app.app-folder:active .overview-icon,
1948
.app-well-app.app-folder:checked .overview-icon,
1949
.show-apps:active .overview-icon,
1950
.show-apps:checked .overview-icon,
1951
.grid-search-result:active .overview-icon,
1952
.grid-search-result:checked .overview-icon {
1953
background-color: rgba(255, 255, 255, 0.2);
1954
box-shadow: 0 0 transparent;
1955
transition-duration: 200ms;
1956
}
1957
.app-well-app-running-dot {
1959
width: 32px;
1960
height: 2px;
1961
background-color: white;
1962
margin-bottom: 0;
1963
}
1964
.search-provider-icon,
1966
.list-search-result, .app-well-app .overview-icon,
1967
.app-well-app.app-folder .overview-icon,
1968
.show-apps .overview-icon,
1969
.grid-search-result .overview-icon {
1970
color: white;
1971
border-radius: 4px;
1972
padding: 6px;
1973
border: none;
1974
transition-duration: 100ms;
1975
text-align: center;
1976
}
1977
.app-well-app.app-folder > .overview-icon {
1979
background-color: rgba(255, 255, 255, 0.1);
1980
}
1981
.show-apps .show-apps-icon {
1983
color: rgba(255, 255, 255, 0.7);
1984
}
1985
.show-apps:hover .show-apps-icon,
1987
.show-apps:active .show-apps-icon,
1988
.show-apps:checked .show-apps-icon,
1989
.show-apps:focus .show-apps-icon {
1990
color: white;
1991
transition-duration: 100ms;
1992
}
1993
.app-folder-popup {
1995
-arrow-border-radius: 4px;
1996
-arrow-background-color: rgba(255, 255, 255, 0.1);
1997
-arrow-base: 24px;
1998
-arrow-rise: 12px;
1999
}
2000
.app-folder-popup-bin {
2002
padding: 5px;
2003
}
2004
.app-folder-icon {
2006
padding: 5px;
2007
spacing-rows: 5px;
2008
spacing-columns: 5px;
2009
}
2010
.page-indicator {
2012
padding: 15px 20px;
2013
}
2014
.page-indicator .page-indicator-icon {
2016
width: 12px;
2017
height: 12px;
2018
border-radius: 12px;
2019
background-image: none;
2020
background-color: rgba(255, 255, 255, 0.3);
2021
transition-duration: 100ms;
2022
}
2023
.page-indicator:hover .page-indicator-icon {
2025
background-image: none;
2026
background-color: rgba(255, 255, 255, 0.5);
2027
}
2028
.page-indicator:active .page-indicator-icon {
2030
background-image: none;
2031
background-color: rgba(255, 255, 255, 0.7);
2032
}
2033
.page-indicator:checked .page-indicator-icon {
2035
background-image: none;
2036
background-color: white;
2037
transition-duration: 0ms;
2038
}
2039
.page-indicator:checked:active {
2041
background-image: none;
2042
}
2043
.app-well-app > .overview-icon.overview-icon-with-label,
2045
.grid-search-result .overview-icon.overview-icon-with-label {
2046
padding: 10px 8px 5px 8px;
2047
spacing: 4px;
2048
}
2049
.workspace-thumbnails {
2051
visible-width: 32px;
2052
spacing: 12px;
2053
padding: 12px;
2054
border-radius: 4px 0 0 4px;
2055
}
2056
.workspace-thumbnails:rtl {
2058
border-radius: 0 4px 4px 0;
2059
}
2060
.workspace-thumbnails .placeholder {
2062
background-image: url("assets/dash-placeholder.svg");
2063
background-size: contain;
2064
height: 24px;
2065
}
2066
.workspace-thumbnail-indicator {
2068
border: 0 solid white;
2069
border-left-width: 2px;
2070
padding: 6px 10px;
2071
border-radius: 0;
2072
}
2073
.search-display > StBoxLayout,
2075
.all-apps,
2076
.frequent-apps > StBoxLayout {
2077
padding: 0px 88px 10px 88px;
2078
}
2079
.workspace-thumbnails {
2081
transition-duration: 250ms;
2082
color: white;
2083
background-color: rgba(255, 255, 255, 0.1);
2084
border: none;
2085
}
2086
.search-statustext, .no-frequent-applications-label {
2088
font-size: 45px;
2089
font-weight: 400;
2090
color: rgba(255, 255, 255, 0.5);
2091
}
2092
/* NOTIFICATIONS & MESSAGE TRAY */
2094
.url-highlighter {
2095
link-color: #4285F4;
2096
}
2097
.notification-banner {
2099
font-size: 1em;
2100
width: 34em;
2101
min-height: 64px;
2102
margin: 5px;
2103
border-radius: 4px;
2104
color: rgba(0, 0, 0, 0.87);
2105
background-color: #FFFFFF;
2106
border: none;
2107
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2108
}
2109
.notification-banner:hover {
2111
background-color: #FFFFFF;
2112
}
2113
.notification-banner:focus {
2115
background-color: #FFFFFF;
2116
}
2117
.notification-banner .notification-icon {
2119
padding: 5px;
2120
}
2121
.notification-banner .notification-content {
2123
padding: 5px;
2124
spacing: 5px;
2125
}
2126
.notification-banner .secondary-icon {
2128
icon-size: 1.14286em;
2129
}
2130
.notification-banner .notification-actions {
2132
background-color: transparent;
2133
padding-top: 0;
2134
padding: 6px;
2135
spacing: 6px;
2136
}
2137
.notification-banner .notification-button {
2139
transition-duration: 100ms;
2140
min-height: 36px;
2141
padding: 0 8px;
2142
border-radius: 4px;
2143
background-color: transparent;
2144
color: rgba(0, 0, 0, 0.54);
2145
font-weight: 500;
2146
}
2147
.notification-banner .notification-button:first-child {
2149
border-radius: 4px;
2150
}
2151
.notification-banner .notification-button:last-child {
2153
border-radius: 4px;
2154
}
2155
.notification-banner .notification-button:hover, .notification-banner .notification-buttonfocus {
2157
background-color: rgba(0, 0, 0, 0.08);
2158
color: rgba(0, 0, 0, 0.87);
2159
}
2160
.notification-banner .notification-button:active {
2162
transition-duration: 200ms;
2163
background-color: rgba(0, 0, 0, 0.2);
2164
color: rgba(0, 0, 0, 0.87);
2165
}
2166
.summary-source-counter {
2168
font-size: 1em;
2169
font-weight: bold;
2170
height: 1.6em;
2171
width: 1.6em;
2172
-shell-counter-overlap-x: 3px;
2173
-shell-counter-overlap-y: 3px;
2174
background-color: #4285F4;
2175
color: white;
2176
border: 2px solid white;
2177
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
2178
border-radius: 0.9em;
2179
}
2180
.secondary-icon {
2182
icon-size: 1.14286em;
2183
}
2184
.chat-body {
2186
spacing: 5px;
2187
}
2188
.chat-response {
2190
margin: 5px;
2191
}
2192
.chat-log-message {
2194
color: rgba(0, 0, 0, 0.87);
2195
}
2196
.chat-new-group {
2198
padding-top: 1em;
2199
}
2200
.chat-received {
2202
padding-left: 4px;
2203
}
2204
.chat-received:rtl {
2206
padding-left: 0px;
2207
padding-right: 4px;
2208
}
2209
.chat-sent {
2211
padding-left: 18pt;
2212
color: rgba(0, 0, 0, 0.54);
2213
}
2214
.chat-sent:rtl {
2216
padding-left: 0;
2217
padding-right: 18pt;
2218
}
2219
.chat-meta-message {
2221
padding-left: 4px;
2222
font-size: 9pt;
2223
font-weight: 400;
2224
color: rgba(0, 0, 0, 0.54);
2225
}
2226
.chat-meta-message:rtl {
2228
padding-left: 0;
2229
padding-right: 4px;
2230
}
2231
.hotplug-transient-box {
2233
spacing: 6px;
2234
padding: 2px 72px 2px 12px;
2235
}
2236
.hotplug-notification-item {
2238
padding: 2px 10px;
2239
}
2240
.hotplug-notification-item:focus {
2242
padding: 1px 71px 1px 11px;
2243
}
2244
.hotplug-notification-item-icon {
2246
icon-size: 24px;
2247
padding: 2px 5px;
2248
}
2249
.hotplug-resident-box {
2251
spacing: 8px;
2252
}
2253
.hotplug-resident-mount {
2255
transition-duration: 100ms;
2256
spacing: 8px;
2257
border-radius: 4px;
2258
}
2259
.hotplug-resident-mount:hover {
2261
background-color: rgba(0, 0, 0, 0.08);
2262
}
2263
.hotplug-resident-mount:active {
2265
transition-duration: 200ms;
2266
background-color: rgba(0, 0, 0, 0.2);
2267
}
2268
.hotplug-resident-mount-label {
2270
color: inherit;
2271
padding-left: 6px;
2272
}
2273
.hotplug-resident-mount-icon {
2275
icon-size: 24px;
2276
padding-left: 6px;
2277
}
2278
.hotplug-resident-eject-icon {
2280
icon-size: 16px;
2281
}
2282
.hotplug-resident-eject-button {
2284
padding: 7px;
2285
border-radius: 4px;
2286
color: rgba(0, 0, 0, 0.87);
2287
}
2288
/* Eeeky things */
2290
.legacy-tray {
2291
background-color: rgba(0, 0, 0, 0.6);
2292
color: white;
2293
border: none;
2294
border-bottom-width: 0;
2295
}
2296
.legacy-tray:ltr {
2298
border-radius: 0 4px 0 0;
2299
border-left-width: 0;
2300
}
2301
.legacy-tray:rtl {
2303
border-radius: 4px 0 0 0;
2304
border-right-width: 0;
2305
}
2306
.legacy-tray-handle,
2308
.legacy-tray-icon {
2309
padding: 6px;
2310
}
2311
.legacy-tray-handle StIcon,
2313
.legacy-tray-icon StIcon {
2314
icon-size: 24px;
2315
}
2316
.legacy-tray-handle:hover, .legacy-tray-handle:focus,
2318
.legacy-tray-icon:hover,
2319
.legacy-tray-icon:focus {
2320
background-color: rgba(255, 255, 255, 0.08);
2321
}
2322
.legacy-tray-handle:active,
2324
.legacy-tray-icon:active {
2325
background-color: rgba(255, 255, 255, 0.2);
2326
}
2327
.legacy-tray-icon-box {
2329
spacing: 12px;
2330
}
2331
.legacy-tray-icon-box:ltr {
2333
padding-left: 12px;
2334
}
2335
.legacy-tray-icon-box:rtl {
2337
padding-right: 12px;
2338
}
2339
.legacy-tray-icon-box StButton {
2341
width: 24px;
2342
height: 24px;
2343
}
2344
.magnifier-zoom-region {
2346
border: 2px solid #4285F4;
2347
}
2348
.magnifier-zoom-region.full-screen {
2350
border-width: 0;
2351
}
2352
/* On-screen Keyboard */
2354
#keyboard {
2355
background-color: rgba(0, 0, 0, 0.3);
2356
}
2357
.keyboard-layout {
2359
spacing: 10px;
2360
padding: 10px;
2361
}
2362
.keyboard-row {
2364
spacing: 15px;
2365
}
2366
.keyboard-key {
2368
min-height: 2em;
2369
min-width: 2em;
2370
font-size: 2em;
2371
font-weight: 500;
2372
border-radius: 4px;
2373
border: none;
2374
color: rgba(0, 0, 0, 0.87);
2375
background-color: #FFFFFF;
2376
border-color: transparent;
2377
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2378
text-shadow: none;
2379
icon-shadow: none;
2380
transition-duration: 100ms;
2381
}
2382
.keyboard-key:focus {
2384
color: rgba(0, 0, 0, 0.87);
2385
text-shadow: none;
2386
icon-shadow: none;
2387
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2388
}
2389
.keyboard-key:hover, .keyboard-key:checked {
2391
color: rgba(0, 0, 0, 0.87);
2392
background-color: #FFFFFF;
2393
border-color: transparent;
2394
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2395
text-shadow: none;
2396
icon-shadow: none;
2397
}
2398
.keyboard-key:active {
2400
color: rgba(0, 0, 0, 0.87);
2401
background-color: rgba(205, 205, 205, 0.9688);
2402
border-color: transparent;
2403
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2404
text-shadow: none;
2405
icon-shadow: none;
2406
transition-duration: 200ms;
2407
}
2408
.keyboard-key:grayed {
2410
background-color: rgba(0, 0, 0, 0.3);
2411
color: white;
2412
border-color: rgba(0, 0, 0, 0.3);
2413
}
2414
.keyboard-subkeys {
2416
color: inherit;
2417
padding: 5px;
2418
-arrow-border-radius: 0;
2419
-arrow-background-color: transparent;
2420
-arrow-border-width: 0;
2421
-arrow-border-color: transparent;
2422
-arrow-base: 0;
2423
-arrow-rise: 0;
2424
-boxpointer-gap: 5px;
2425
background-color: #FFFFFF;
2426
border-radius: 4px;
2427
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2428
}
2429
.candidate-popup-content {
2431
padding: 8px;
2432
spacing: 0;
2433
}
2434
.candidate-index {
2436
padding: 0 4px 0 0;
2437
color: rgba(0, 0, 0, 0.54);
2438
}
2439
.candidate-box:selected .candidate-index {
2441
color: rgba(255, 255, 255, 0.7);
2442
}
2443
.candidate-box {
2445
transition-duration: 100ms;
2446
min-height: 32px;
2447
padding: 0 8px;
2448
border-radius: 4px;
2449
}
2450
.candidate-box:hover {
2452
background-color: rgba(0, 0, 0, 0.08);
2453
color: rgba(0, 0, 0, 0.87);
2454
transition-duration: 0ms;
2455
}
2456
.candidate-box:active {
2458
background-color: rgba(0, 0, 0, 0.2);
2459
color: rgba(0, 0, 0, 0.87);
2460
transition-duration: 200ms;
2461
}
2462
.candidate-box:selected {
2464
background-color: #4285F4;
2465
color: white;
2466
transition-duration: 0ms;
2467
}
2468
.candidate-page-button-box {
2470
height: 32px;
2471
}
2472
.vertical .candidate-page-button-box {
2474
padding-top: 0;
2475
}
2476
.horizontal .candidate-page-button-box {
2478
padding-left: 0;
2479
}
2480
.candidate-page-button {
2482
min-width: 32px;
2483
min-height: 32px;
2484
padding: 0;
2485
}
2486
.candidate-page-button-previous {
2488
border-radius: 4px;
2489
border-right-width: 0;
2490
}
2491
.candidate-page-button-next {
2493
border-radius: 4px;
2494
}
2495
.candidate-page-button-icon {
2497
icon-size: 1.14286em;
2498
}
2499
/* Auth Dialogs & Screen Shield */
2501
.framed-user-icon {
2502
background-size: contain;
2503
border: none;
2504
color: white;
2505
border-radius: 4px;
2506
}
2507
.framed-user-icon:hover {
2509
border-color: white;
2510
color: white;
2511
}
2512
.login-dialog-banner-view {
2514
padding-top: 24px;
2515
max-width: 23em;
2516
}
2517
.login-dialog {
2519
border: none;
2520
background-color: transparent;
2521
}
2522
.login-dialog StEntry {
2524
color: white;
2525
selection-background-color: rgba(255, 255, 255, 0.3);
2526
selected-color: white;
2527
transition-duration: 100ms;
2528
background-color: rgba(255, 255, 255, 0.04);
2529
border-color: transparent;
2530
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2531
}
2532
.login-dialog StEntry:focus {
2534
border-color: transparent;
2535
box-shadow: inset 0 -2px white;
2536
}
2537
.login-dialog StEntry:insensitive {
2539
color: rgba(0, 0, 0, 0.38);
2540
border-color: transparent;
2541
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
2542
color: rgba(255, 255, 255, 0.5);
2543
}
2544
.login-dialog .modal-dialog-button-box {
2546
spacing: 3px;
2547
}
2548
.login-dialog .modal-dialog-button {
2550
padding: 0 16px;
2551
color: rgba(255, 255, 255, 0.7);
2552
background-color: transparent;
2553
border-color: transparent;
2554
box-shadow: 0 0 transparent;
2555
text-shadow: none;
2556
icon-shadow: none;
2557
transition-duration: 100ms;
2558
}
2559
.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus {
2561
color: white;
2562
background-color: rgba(255, 255, 255, 0.08);
2563
border-color: transparent;
2564
box-shadow: 0 0 transparent;
2565
text-shadow: none;
2566
icon-shadow: none;
2567
}
2568
.login-dialog .modal-dialog-button:active {
2570
color: white;
2571
background-color: rgba(255, 255, 255, 0.2);
2572
border-color: transparent;
2573
box-shadow: 0 0 transparent;
2574
text-shadow: none;
2575
icon-shadow: none;
2576
transition-duration: 200ms;
2577
}
2578
.login-dialog .modal-dialog-button:insensitive {
2580
color: rgba(255, 255, 255, 0.3);
2581
background-color: transparent;
2582
border-color: transparent;
2583
box-shadow: 0 0 transparent;
2584
text-shadow: none;
2585
icon-shadow: none;
2586
}
2587
.login-dialog .modal-dialog-button:default {
2589
color: white;
2590
background-color: #4285F4;
2591
border-color: transparent;
2592
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2593
text-shadow: none;
2594
icon-shadow: none;
2595
transition-duration: 100ms;
2596
}
2597
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
2599
color: white;
2600
background-color: #4285F4;
2601
border-color: transparent;
2602
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2603
text-shadow: none;
2604
icon-shadow: none;
2605
}
2606
.login-dialog .modal-dialog-button:default:active {
2608
color: white;
2609
background-color: #6fa2f7;
2610
border-color: transparent;
2611
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2612
text-shadow: none;
2613
icon-shadow: none;
2614
transition-duration: 200ms;
2615
}
2616
.login-dialog .modal-dialog-button:default:insensitive {
2618
color: rgba(255, 255, 255, 0.5);
2619
background-color: rgba(255, 255, 255, 0.04);
2620
border-color: transparent;
2621
box-shadow: 0 0 transparent;
2622
text-shadow: none;
2623
icon-shadow: none;
2624
}
2625
.login-dialog-logo-bin {
2627
padding: 24px 0px;
2628
}
2629
.login-dialog-banner {
2631
color: rgba(255, 255, 255, 0.7);
2632
}
2633
.login-dialog-button-box {
2635
spacing: 5px;
2636
}
2637
.login-dialog-message-warning {
2639
color: #FBBC05;
2640
}
2641
.login-dialog-message-hint {
2643
padding-top: 0;
2644
padding-bottom: 20px;
2645
}
2646
.login-dialog-user-selection-box {
2648
padding: 100px 0px;
2649
}
2650
.login-dialog-user-selection-box .login-dialog-not-listed-label {
2652
padding-left: 2px;
2653
}
2654
.login-dialog-not-listed-button:focus .login-dialog-user-selection-box .login-dialog-not-listed-label,
2656
.login-dialog-not-listed-button:hover .login-dialog-user-selection-box .login-dialog-not-listed-label {
2657
color: white;
2658
}
2659
.login-dialog-not-listed-label {
2661
transition-duration: 100ms;
2662
font-size: 1em;
2663
font-weight: bold;
2664
color: rgba(255, 255, 255, 0.7);
2665
padding-top: 1em;
2666
border-radius: 4px;
2667
}
2668
.login-dialog-not-listed-label:hover {
2670
background-color: rgba(255, 255, 255, 0.08);
2671
color: white;
2672
}
2673
.login-dialog-not-listed-label:focus {
2675
background-color: rgba(255, 255, 255, 0.12);
2676
}
2677
.login-dialog-not-listed-label:active {
2679
transition-duration: 200ms;
2680
background-color: rgba(255, 255, 255, 0.2);
2681
color: white;
2682
}
2683
.login-dialog-user-list-view {
2685
-st-vfade-offset: 1em;
2686
}
2687
.login-dialog-user-list {
2689
spacing: 12px;
2690
padding: .2em;
2691
width: 23em;
2692
}
2693
.login-dialog-user-list:expanded .login-dialog-user-list-item:focus {
2695
background-color: rgba(255, 255, 255, 0.12);
2696
color: white;
2697
}
2698
.login-dialog-user-list:expanded .login-dialog-user-list-item:hover {
2700
background-color: rgba(255, 255, 255, 0.08);
2701
color: white;
2702
}
2703
.login-dialog-user-list:expanded .login-dialog-user-list-item:active {
2705
background-color: rgba(255, 255, 255, 0.2);
2706
color: white;
2707
}
2708
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
2710
border-right: 2px solid white;
2711
}
2712
.login-dialog-user-list-item {
2714
transition-duration: 100ms;
2715
border-radius: 4px;
2716
padding: 4px 4px 0;
2717
color: rgba(255, 255, 255, 0.7);
2718
}
2719
.login-dialog-user-list-item:ltr {
2721
padding-right: 1em;
2722
}
2723
.login-dialog-user-list-item:rtl {
2725
padding-left: 1em;
2726
}
2727
.login-dialog-user-list-item:hover {
2729
background-color: rgba(255, 255, 255, 0.08);
2730
color: white;
2731
}
2732
.login-dialog-user-list-item:active {
2734
transition-duration: 200ms;
2735
background-color: rgba(255, 255, 255, 0.2);
2736
color: white;
2737
}
2738
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
2740
height: 2px;
2741
margin: 2px 0 0 0;
2742
background-color: white;
2743
}
2744
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
2746
background-color: white;
2747
}
2748
.login-dialog-username,
2750
.user-widget-label {
2751
color: white;
2752
font-size: 15pt;
2753
font-weight: 500;
2754
text-align: left;
2755
padding-left: 15px;
2756
}
2757
.user-widget-label:ltr {
2759
padding-left: 18px;
2760
}
2761
.user-widget-label:rtl {
2763
padding-right: 18px;
2764
}
2765
.login-dialog-prompt-layout {
2767
padding-top: 24px;
2768
padding-bottom: 12px;
2769
spacing: 8px;
2770
width: 23em;
2771
}
2772
.login-dialog-prompt-label {
2774
color: rgba(255, 255, 255, 0.7);
2775
font-size: 1em;
2776
padding-top: 1em;
2777
}
2778
.login-dialog-session-list-button StIcon {
2780
icon-size: 1.25em;
2781
}
2782
.login-dialog-session-list-button {
2784
color: rgba(255, 255, 255, 0.7);
2785
}
2786
.login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
2788
color: white;
2789
}
2790
.login-dialog-session-list-button:active {
2792
color: white;
2793
}
2794
.screen-shield-arrows {
2796
padding-bottom: 3em;
2797
}
2798
.screen-shield-arrows Gjs_Arrow {
2800
color: white;
2801
width: 80px;
2802
height: 48px;
2803
-arrow-thickness: 12px;
2804
-arrow-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2805
}
2806
.screen-shield-clock {
2808
color: white;
2809
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2810
font-weight: normal;
2811
text-align: center;
2812
padding-bottom: 1.5em;
2813
}
2814
.screen-shield-clock-time {
2816
font-size: 112px;
2817
font-weight: 300;
2818
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2819
}
2820
.screen-shield-clock-date {
2822
font-size: 45px;
2823
font-weight: 400;
2824
}
2825
.screen-shield-notifications-container {
2827
spacing: 6px;
2828
width: 30em;
2829
background-color: transparent;
2830
max-height: 500px;
2831
}
2832
.screen-shield-notifications-container .summary-notification-stack-scrollview {
2834
padding-top: 0;
2835
padding-bottom: 0;
2836
}
2837
.screen-shield-notifications-container .notification,
2839
.screen-shield-notifications-container .screen-shield-notification-source {
2840
padding: 8px;
2841
border: none;
2842
background-color: rgba(0, 0, 0, 0.3);
2843
color: white;
2844
border-radius: 4px;
2845
}
2846
.screen-shield-notifications-container .notification {
2848
margin-right: 16px;
2849
}
2850
.screen-shield-notification-label {
2852
min-height: 22px;
2853
padding: 2px 0px 0px 16px;
2854
font-weight: bold;
2855
}
2856
.screen-shield-notification-count-text {
2858
min-height: 22px;
2859
padding: 2px 0px 0px 16px;
2860
color: rgba(255, 255, 255, 0.7);
2861
}
2862
#panel.lock-screen {
2864
background-color: rgba(0, 0, 0, 0.3);
2865
}
2866
.screen-shield-background {
2868
background: black;
2869
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
2870
}
2871
#lockDialogGroup {
2873
background: #303030;
2874
background-size: cover;
2875
}
2876
#LookingGlassDialog {
2878
background-color: #FFFFFF;
2879
spacing: 4px;
2880
padding: 0;
2881
border: none;
2882
border-radius: 4px;
2883
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2884
}
2885
#LookingGlassDialog > #Toolbar {
2887
padding: 0 8px;
2888
border: none;
2889
border-radius: 0;
2890
background-color: rgba(255, 255, 255, 0.01);
2891
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
2892
}
2893
#LookingGlassDialog .labels {
2895
spacing: 0;
2896
}
2897
#LookingGlassDialog .notebook-tab {
2899
-natural-hpadding: 12px;
2900
-minimum-hpadding: 6px;
2901
font-weight: bold;
2902
color: rgba(0, 0, 0, 0.54);
2903
transition-duration: 100ms;
2904
padding-left: 16px;
2905
padding-right: 16px;
2906
min-height: 36px;
2907
padding: 0 32px;
2908
}
2909
#LookingGlassDialog .notebook-tab:hover {
2911
background-color: rgba(0, 0, 0, 0.08);
2912
color: rgba(0, 0, 0, 0.87);
2913
text-shadow: none;
2914
}
2915
#LookingGlassDialog .notebook-tab:active {
2917
background-color: rgba(0, 0, 0, 0.2);
2918
color: rgba(0, 0, 0, 0.87);
2919
}
2920
#LookingGlassDialog .notebook-tab:selected {
2922
border-bottom-width: 0;
2923
border-color: transparent;
2924
background-color: rgba(255, 255, 255, 0.01);
2925
box-shadow: inset 0 -2px 0px #4285F4;
2926
color: rgba(0, 0, 0, 0.87);
2927
text-shadow: none;
2928
transition-duration: 200ms;
2929
}
2930
#LookingGlassDialog StBoxLayout#EvalBox {
2932
padding: 4px;
2933
spacing: 4px;
2934
}
2935
#LookingGlassDialog StBoxLayout#ResultsArea {
2937
spacing: 4px;
2938
}
2939
.lg-dialog StEntry {
2941
selection-background-color: #4285F4;
2942
selected-color: white;
2943
}
2944
.lg-dialog .shell-link {
2946
color: #4285F4;
2947
}
2948
.lg-dialog .shell-link:hover {
2950
color: #4285F4;
2951
}
2952
.lg-completions-text {
2954
font-size: 1em;
2955
font-style: italic;
2956
}
2957
.lg-obj-inspector-title {
2959
spacing: 4px;
2960
}
2961
.lg-obj-inspector-button {
2963
min-height: 36px;
2964
padding: 0 16px;
2965
border: none;
2966
border-radius: 4px;
2967
font-size: 10.5pt;
2968
font-weight: 500;
2969
color: rgba(0, 0, 0, 0.54);
2970
background-color: transparent;
2971
border-color: transparent;
2972
box-shadow: 0 0 transparent;
2973
text-shadow: none;
2974
icon-shadow: none;
2975
transition-duration: 100ms;
2976
}
2977
.lg-obj-inspector-button:hover {
2979
color: rgba(0, 0, 0, 0.87);
2980
background-color: rgba(0, 0, 0, 0.08);
2981
border-color: transparent;
2982
box-shadow: 0 0 transparent;
2983
text-shadow: none;
2984
icon-shadow: none;
2985
}
2986
.lg-obj-inspector-button:active {
2988
color: rgba(0, 0, 0, 0.87);
2989
background-color: rgba(0, 0, 0, 0.2);
2990
border-color: transparent;
2991
box-shadow: 0 0 transparent;
2992
text-shadow: none;
2993
icon-shadow: none;
2994
transition-duration: 200ms;
2995
}
2996
.lg-obj-inspector-button:insensitive {
2998
color: rgba(0, 0, 0, 0.26);
2999
background-color: transparent;
3000
border-color: transparent;
3001
box-shadow: 0 0 transparent;
3002
text-shadow: none;
3003
icon-shadow: none;
3004
}
3005
.lg-obj-inspector-button:focus {
3007
color: rgba(0, 0, 0, 0.87);
3008
text-shadow: none;
3009
icon-shadow: none;
3010
box-shadow: 0 0 transparent;
3011
}
3012
.lg-obj-inspector-button:hover {
3014
border: none;
3015
}
3016
#lookingGlassExtensions {
3018
padding: 4px;
3019
}
3020
.lg-extensions-list {
3022
padding: 4px;
3023
spacing: 6px;
3024
}
3025
.lg-extension {
3027
border: none;
3028
border-radius: 4px;
3029
padding: 4px;
3030
}
3031
.lg-extension-name {
3033
font-size: 18pt;
3034
font-weight: 400;
3035
}
3036
.lg-extension-meta {
3038
spacing: 6px;
3039
}
3040
#LookingGlassPropertyInspector {
3042
background: #FFFFFF;
3043
border: none;
3044
border-radius: 4px;
3045
padding: 6px;
3046
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
3047
}
3048
/* Dash to Dock */
3050
#dashtodockContainer #dash {
3051
background-color: rgba(0, 0, 0, 0.6);
3052
}
3053
#dashtodockContainer:overview #dash {
3055
background-color: rgba(255, 255, 255, 0.1);
3056
}
3057
#dashtodockContainer.extended:overview #dash {
3059
background-color: transparent;
3060
}
3061
#dashtodockContainer.left #dash,
3063
#dashtodockContainer.right #dash {
3064
padding: 3px 0;
3065
}
3066
#dashtodockContainer.top #dash,
3068
#dashtodockContainer.bottom #dash {
3069
padding: 0 3px;
3070
}
3071
#dashtodockContainer.extended #dash {
3073
padding: 0;
3074
border-radius: 0;
3075
}
3076
#dashtodockContainer.left .dash-item-container > StWidget,
3078
#dashtodockContainer.right .dash-item-container > StWidget,
3079
#dashtodockContainer.extended.left .dash-item-container > StWidget,
3080
#dashtodockContainer.extended.right .dash-item-container > StWidget {
3081
padding: 3px 6px;
3082
}
3083
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
3085
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
3086
padding: 6px 6px 3px 6px;
3087
}
3088
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
3090
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
3091
padding: 3px 6px 6px 6px;
3092
}
3093
#dashtodockContainer.top .dash-item-container > StWidget,
3095
#dashtodockContainer.bottom .dash-item-container > StWidget,
3096
#dashtodockContainer.extended.top .dash-item-container > StWidget,
3097
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
3098
padding: 6px 3px;
3099
}
3100
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
3102
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
3103
padding: 6px 3px 6px 6px;
3104
}
3105
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
3107
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
3108
padding: 6px 6px 6px 3px;
3109
}
3110
#dashtodockContainer .app-well-app-running-dot {
3112
background-color: transparent;
3113
}
3114
#dashtodockContainer .dash-item-container > StWidget {
3116
background-size: cover;
3117
}
3118
#dashtodockContainer.left .dash-item-container > StWidget.running1 {
3120
background-image: url("assets/dash/left-running1.svg");
3121
}
3122
#dashtodockContainer.left .dash-item-container > StWidget.running1.focused {
3124
background-image: url("assets/dash/left-running1-focused.svg");
3125
}
3126
#dashtodockContainer.left .dash-item-container > StWidget.running2 {
3128
background-image: url("assets/dash/left-running2.svg");
3129
}
3130
#dashtodockContainer.left .dash-item-container > StWidget.running2.focused {
3132
background-image: url("assets/dash/left-running2-focused.svg");
3133
}
3134
#dashtodockContainer.left .dash-item-container > StWidget.running3 {
3136
background-image: url("assets/dash/left-running3.svg");
3137
}
3138
#dashtodockContainer.left .dash-item-container > StWidget.running3.focused {
3140
background-image: url("assets/dash/left-running3-focused.svg");
3141
}
3142
#dashtodockContainer.left .dash-item-container > StWidget.running4 {
3144
background-image: url("assets/dash/left-running4.svg");
3145
}
3146
#dashtodockContainer.left .dash-item-container > StWidget.running4.focused {
3148
background-image: url("assets/dash/left-running4-focused.svg");
3149
}
3150
#dashtodockContainer.right .dash-item-container > StWidget.running1 {
3152
background-image: url("assets/dash/right-running1.svg");
3153
}
3154
#dashtodockContainer.right .dash-item-container > StWidget.running1.focused {
3156
background-image: url("assets/dash/right-running1-focused.svg");
3157
}
3158
#dashtodockContainer.right .dash-item-container > StWidget.running2 {
3160
background-image: url("assets/dash/right-running2.svg");
3161
}
3162
#dashtodockContainer.right .dash-item-container > StWidget.running2.focused {
3164
background-image: url("assets/dash/right-running2-focused.svg");
3165
}
3166
#dashtodockContainer.right .dash-item-container > StWidget.running3 {
3168
background-image: url("assets/dash/right-running3.svg");
3169
}
3170
#dashtodockContainer.right .dash-item-container > StWidget.running3.focused {
3172
background-image: url("assets/dash/right-running3-focused.svg");
3173
}
3174
#dashtodockContainer.right .dash-item-container > StWidget.running4 {
3176
background-image: url("assets/dash/right-running4.svg");
3177
}
3178
#dashtodockContainer.right .dash-item-container > StWidget.running4.focused {
3180
background-image: url("assets/dash/right-running4-focused.svg");
3181
}
3182
#dashtodockContainer.top .dash-item-container > StWidget.running1 {
3184
background-image: url("assets/dash/top-running1.svg");
3185
}
3186
#dashtodockContainer.top .dash-item-container > StWidget.running1.focused {
3188
background-image: url("assets/dash/top-running1-focused.svg");
3189
}
3190
#dashtodockContainer.top .dash-item-container > StWidget.running2 {
3192
background-image: url("assets/dash/top-running2.svg");
3193
}
3194
#dashtodockContainer.top .dash-item-container > StWidget.running2.focused {
3196
background-image: url("assets/dash/top-running2-focused.svg");
3197
}
3198
#dashtodockContainer.top .dash-item-container > StWidget.running3 {
3200
background-image: url("assets/dash/top-running3.svg");
3201
}
3202
#dashtodockContainer.top .dash-item-container > StWidget.running3.focused {
3204
background-image: url("assets/dash/top-running3-focused.svg");
3205
}
3206
#dashtodockContainer.top .dash-item-container > StWidget.running4 {
3208
background-image: url("assets/dash/top-running4.svg");
3209
}
3210
#dashtodockContainer.top .dash-item-container > StWidget.running4.focused {
3212
background-image: url("assets/dash/top-running4-focused.svg");
3213
}
3214
#dashtodockContainer.bottom .dash-item-container > StWidget.running1 {
3216
background-image: url("assets/dash/bottom-running1.svg");
3217
}
3218
#dashtodockContainer.bottom .dash-item-container > StWidget.running1.focused {
3220
background-image: url("assets/dash/bottom-running1-focused.svg");
3221
}
3222
#dashtodockContainer.bottom .dash-item-container > StWidget.running2 {
3224
background-image: url("assets/dash/bottom-running2.svg");
3225
}
3226
#dashtodockContainer.bottom .dash-item-container > StWidget.running2.focused {
3228
background-image: url("assets/dash/bottom-running2-focused.svg");
3229
}
3230
#dashtodockContainer.bottom .dash-item-container > StWidget.running3 {
3232
background-image: url("assets/dash/bottom-running3.svg");
3233
}
3234
#dashtodockContainer.bottom .dash-item-container > StWidget.running3.focused {
3236
background-image: url("assets/dash/bottom-running3-focused.svg");
3237
}
3238
#dashtodockContainer.bottom .dash-item-container > StWidget.running4 {
3240
background-image: url("assets/dash/bottom-running4.svg");
3241
}
3242
#dashtodockContainer.bottom .dash-item-container > StWidget.running4.focused {
3244
background-image: url("assets/dash/bottom-running4-focused.svg");
3245
}
3246
/* Simple Dock */
3248
#dash:desktop {
3249
background-color: rgba(0, 0, 0, 0.6);
3250
}
3251
/* GPaste */
3253
.popup-menu .search-entry {
3254
color: rgba(0, 0, 0, 0.87);
3255
selection-background-color: #4285F4;
3256
selected-color: white;
3257
transition-duration: 100ms;
3258
background-color: rgba(0, 0, 0, 0.04);
3259
border-color: transparent;
3260
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
3261
}
3262
.popup-menu .search-entry:hover {
3264
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
3265
}
3266
.popup-menu .search-entry:focus {
3268
border-color: transparent;
3269
box-shadow: inset 0 -2px #4285F4;
3270
color: rgba(0, 0, 0, 0.87);
3271
}
3272
.popup-menu .search-entry .search-entry-icon {
3274
color: rgba(0, 0, 0, 0.54);
3275
}
3276
.popup-menu .search-entry:hover .search-entry-icon, .popup-menu .search-entry:focus .search-entry-icon {
3278
color: rgba(0, 0, 0, 0.87);
3279
}
3280