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
* {
22
transition-duration: 150ms;
23
}
24
stage {
26
font-family: "M+ 1c", Roboto, Cantarell, Sans-Serif;
27
font-size: 10.5pt;
28
font-weight: 400;
29
color: rgba(0, 0, 0, 0.87);
30
}
31
/* WIDGETS */
33
/* Buttons */
34
.button {
35
min-height: 36px;
36
padding: 0 16px;
37
border-width: 0;
38
border-radius: 4px;
39
font-size: 10.5pt;
40
font-weight: 500;
41
color: rgba(0, 0, 0, 0.54);
42
background-color: transparent;
43
border-color: transparent;
44
box-shadow: 0 0 transparent;
45
text-shadow: none;
46
icon-shadow: none;
47
}
48
.button:hover {
50
color: rgba(0, 0, 0, 0.87);
51
background-color: rgba(0, 0, 0, 0.12);
52
border-color: transparent;
53
box-shadow: 0 0 transparent;
54
text-shadow: none;
55
icon-shadow: none;
56
}
57
.button:active {
59
color: rgba(0, 0, 0, 0.87);
60
background-color: rgba(0, 0, 0, 0.26);
61
border-color: transparent;
62
box-shadow: 0 0 transparent;
63
text-shadow: none;
64
icon-shadow: none;
65
}
66
.button:insensitive {
68
color: rgba(0, 0, 0, 0.26);
69
background-color: transparent;
70
border-color: transparent;
71
box-shadow: 0 0 transparent;
72
text-shadow: none;
73
icon-shadow: none;
74
}
75
.button:focus {
77
color: rgba(0, 0, 0, 0.87);
78
text-shadow: none;
79
icon-shadow: none;
80
box-shadow: 0 0 transparent;
81
}
82
.modal-dialog-linked-button {
84
min-height: 36px;
85
margin: 6px;
86
padding: 0 8px;
87
margin-right: 0;
88
border-right-width: 0;
89
border-radius: 4px;
90
font-size: 10.5pt;
91
font-weight: 500;
92
color: rgba(0, 0, 0, 0.54);
93
background-color: transparent;
94
border-color: transparent;
95
box-shadow: 0 0 transparent;
96
text-shadow: none;
97
icon-shadow: none;
98
}
99
.modal-dialog-linked-button:hover {
101
color: rgba(0, 0, 0, 0.87);
102
background-color: rgba(0, 0, 0, 0.12);
103
border-color: transparent;
104
box-shadow: 0 0 transparent;
105
text-shadow: none;
106
icon-shadow: none;
107
}
108
.modal-dialog-linked-button:active {
110
color: rgba(0, 0, 0, 0.87);
111
background-color: rgba(0, 0, 0, 0.26);
112
border-color: transparent;
113
box-shadow: 0 0 transparent;
114
text-shadow: none;
115
icon-shadow: none;
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
background-color: rgba(0, 0, 0, 0.04);
162
border-color: transparent;
163
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
164
}
165
StEntry:hover {
167
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
168
}
169
StEntry:focus {
171
border-color: transparent;
172
box-shadow: inset 0 -2px #4285F4;
173
}
174
StEntry:insensitive {
176
color: rgba(0, 0, 0, 0.38);
177
border-color: transparent;
178
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
179
}
180
StEntry StIcon.capslock-warning {
182
icon-size: 16px;
183
warning-color: #FBBC05;
184
padding: 0 0;
185
}
186
/* Scrollbars */
188
StScrollView.vfade {
189
-st-vfade-offset: 32px;
190
}
191
StScrollView.hfade {
193
-st-hfade-offset: 32px;
194
}
195
StScrollBar {
197
padding: 0;
198
}
199
StScrollView StScrollBar {
201
min-width: 16px;
202
min-height: 16px;
203
}
204
StScrollBar StBin#trough {
206
margin: 4px;
207
border-radius: 100px;
208
background-color: rgba(0, 0, 0, 0.12);
209
}
210
StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
212
border-radius: 100px;
213
background-color: rgba(0, 0, 0, 0.38);
214
margin: 4px;
215
}
216
StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover {
218
background-color: rgba(0, 0, 0, 0.54);
219
}
220
StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
222
background-color: rgba(0, 0, 0, 0.87);
223
}
224
#overview StScrollBar StBin#trough, #screenShieldNotifications StScrollBar StBin#trough {
226
background-color: rgba(255, 255, 255, 0.12);
227
}
228
#overview StScrollBar StButton#vhandle, #screenShieldNotifications StScrollBar StButton#vhandle, #overview StScrollBar StButton#hhandle, #screenShieldNotifications StScrollBar StButton#hhandle {
230
background-color: rgba(255, 255, 255, 0.5);
231
}
232
#overview StScrollBar StButton#vhandle:hover, #screenShieldNotifications StScrollBar StButton#vhandle:hover, #overview StScrollBar StButton#hhandle:hover, #screenShieldNotifications StScrollBar StButton#hhandle:hover {
234
background-color: rgba(255, 255, 255, 0.7);
235
}
236
#overview StScrollBar StButton#vhandle:active, #screenShieldNotifications StScrollBar StButton#vhandle:active, #overview StScrollBar StButton#hhandle:active, #screenShieldNotifications StScrollBar StButton#hhandle:active {
238
background-color: white;
239
}
240
/* Slider */
242
.slider {
243
height: 20px;
244
color: #01A299;
245
-slider-height: 2px;
246
-slider-background-color: rgba(0, 0, 0, 0.26);
247
-slider-border-color: transparent;
248
-slider-active-background-color: #01A299;
249
-slider-active-border-color: transparent;
250
-slider-border-width: 0;
251
-slider-handle-radius: 6px;
252
}
253
/* Check Boxes */
255
.check-box * {
256
min-height: 20px;
257
padding: 8px 0;
258
}
259
.check-box StBoxLayout {
261
spacing: 8px;
262
}
263
.check-box StBin {
265
width: 24px;
266
height: 24px;
267
padding: 6px;
268
border-radius: 100px;
269
background-image: url("assets/checkbox-off.svg");
270
}
271
.check-box:focus StBin {
273
background-image: url("assets/checkbox-off.svg");
274
}
275
.check-box:hover StBin {
277
background-color: rgba(0, 0, 0, 0.12);
278
}
279
.check-box:active StBin {
281
background-color: rgba(0, 0, 0, 0.26);
282
}
283
.check-box:checked StBin {
285
background-image: url("assets/checkbox.svg");
286
}
287
.check-box:focus:checked StBin {
289
background-image: url("assets/checkbox.svg");
290
}
291
.check-box:hover:checked StBin {
293
background-color: rgba(1, 162, 153, 0.12);
294
}
295
.check-box:active:checked StBin {
297
background-color: rgba(1, 162, 153, 0.24);
298
}
299
/* Switches */
301
.toggle-switch {
302
width: 40px;
303
height: 20px;
304
background-size: contain;
305
}
306
.toggle-switch-us {
308
background-image: url("assets/toggle-off.svg");
309
}
310
.toggle-switch-us:checked {
312
background-image: url("assets/toggle-on.svg");
313
}
314
.toggle-switch-intl {
316
background-image: url("assets/toggle-off.svg");
317
}
318
.toggle-switch-intl:checked {
320
background-image: url("assets/toggle-on.svg");
321
}
322
/* links */
324
.shell-link {
325
border-radius: 4px;
326
color: #4285F4;
327
}
328
.shell-link:hover {
330
color: #4285F4;
331
background-color: rgba(66, 133, 244, 0.12);
332
}
333
.shell-link:active {
335
color: #4285F4;
336
background-color: rgba(66, 133, 244, 0.24);
337
}
338
/* Modal Dialogs */
340
.headline {
341
font-size: 15pt;
342
font-weight: 500;
343
}
344
.lightbox {
346
background-color: black;
347
}
348
.flashspot {
350
background-color: white;
351
}
352
.modal-dialog {
354
border-radius: 4px;
355
color: rgba(0, 0, 0, 0.87);
356
background-color: #FFFFFF;
357
border: none;
358
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
359
}
360
.modal-dialog .modal-dialog-content-box {
362
padding: 24px;
363
}
364
.modal-dialog .run-dialog-entry {
366
width: 20em;
367
margin-bottom: 0;
368
}
369
.modal-dialog .run-dialog-error-box {
371
padding-top: 16px;
372
spacing: 6px;
373
}
374
.modal-dialog .run-dialog-button-box {
376
padding-top: 1em;
377
}
378
.modal-dialog .run-dialog-label {
380
font-size: 1em;
381
font-weight: normal;
382
color: rgba(0, 0, 0, 0.38);
383
padding-bottom: .4em;
384
}
385
.show-processes-dialog-subject,
387
.mount-question-dialog-subject,
388
.end-session-dialog-subject {
389
font-size: 15pt;
390
font-weight: 500;
391
}
392
/* End Session Dialog */
394
.end-session-dialog {
395
spacing: 42px;
396
border: none;
397
}
398
.end-session-dialog-list {
400
padding-top: 20px;
401
}
402
.end-session-dialog-layout {
404
padding-left: 17px;
405
}
406
.end-session-dialog-layout:rtl {
408
padding-right: 17px;
409
}
410
.end-session-dialog-description {
412
width: 28em;
413
padding-bottom: 10px;
414
}
415
.end-session-dialog-description:rtl {
417
text-align: right;
418
}
419
.end-session-dialog-warning {
421
width: 28em;
422
color: #FBBC05;
423
padding-top: 6px;
424
}
425
.end-session-dialog-warning:rtl {
427
text-align: right;
428
}
429
.end-session-dialog-logout-icon {
431
border-radius: 5px;
432
width: 48px;
433
height: 48px;
434
background-size: contain;
435
}
436
.end-session-dialog-shutdown-icon {
438
color: rgba(0, 0, 0, 0.38);
439
width: 48px;
440
height: 48px;
441
}
442
.end-session-dialog-inhibitor-layout {
444
spacing: 16px;
445
max-height: 200px;
446
padding-right: 65px;
447
padding-left: 65px;
448
}
449
.end-session-dialog-session-list,
451
.end-session-dialog-app-list {
452
spacing: 1em;
453
}
454
.end-session-dialog-list-header {
456
font-weight: bold;
457
}
458
.end-session-dialog-list-header:rtl {
460
text-align: right;
461
}
462
.end-session-dialog-app-list-item,
464
.end-session-dialog-session-list-item {
465
spacing: 1em;
466
}
467
.end-session-dialog-app-list-item-name,
469
.end-session-dialog-session-list-item-name {
470
font-weight: bold;
471
}
472
.end-session-dialog-app-list-item-description {
474
color: rgba(0, 0, 0, 0.38);
475
font-size: 1em;
476
}
477
/* ShellMountOperation Dialogs */
479
.shell-mount-operation-icon {
480
icon-size: 48px;
481
}
482
.show-processes-dialog,
484
.mount-question-dialog {
485
spacing: 24px;
486
}
487
.show-processes-dialog-subject,
489
.mount-question-dialog-subject {
490
padding-top: 10px;
491
padding-left: 17px;
492
padding-bottom: 6px;
493
}
494
.mount-question-dialog-subject {
496
max-width: 500px;
497
}
498
.show-processes-dialog-subject:rtl,
500
.mount-question-dialog-subject:rtl {
501
padding-left: 0px;
502
padding-right: 17px;
503
}
504
.show-processes-dialog-description,
506
.mount-question-dialog-description {
507
padding-left: 17px;
508
width: 28em;
509
}
510
.show-processes-dialog-description:rtl,
512
.mount-question-dialog-description:rtl {
513
padding-right: 17px;
514
}
515
.show-processes-dialog-app-list {
517
max-height: 200px;
518
padding-top: 24px;
519
padding-left: 49px;
520
padding-right: 32px;
521
}
522
.show-processes-dialog-app-list:rtl {
524
padding-right: 49px;
525
padding-left: 32px;
526
}
527
.show-processes-dialog-app-list-item {
529
color: rgba(0, 0, 0, 0.87);
530
}
531
.show-processes-dialog-app-list-item:hover {
533
color: rgba(0, 0, 0, 0.87);
534
}
535
.show-processes-dialog-app-list-item:ltr {
537
padding-right: 1em;
538
}
539
.show-processes-dialog-app-list-item:rtl {
541
padding-left: 1em;
542
}
543
.show-processes-dialog-app-list-item-icon:ltr {
545
padding-right: 17px;
546
}
547
.show-processes-dialog-app-list-item-icon:rtl {
549
padding-left: 17px;
550
}
551
.show-processes-dialog-app-list-item-name {
553
font-size: 1em;
554
}
555
/* Password or Authentication Dialog */
557
.prompt-dialog {
558
width: 500px;
559
border: none;
560
}
561
.prompt-dialog-main-layout {
563
spacing: 24px;
564
padding: 10px;
565
}
566
.prompt-dialog-message-layout {
568
spacing: 16px;
569
}
570
.prompt-dialog-headline {
572
font-size: 15pt;
573
font-weight: 500;
574
color: rgba(0, 0, 0, 0.87);
575
}
576
.prompt-dialog-description:rtl {
578
text-align: right;
579
}
580
.prompt-dialog-password-box {
582
spacing: 1em;
583
padding-bottom: 1em;
584
}
585
.prompt-dialog-error-label {
587
font-size: 1em;
588
color: #EA4335;
589
padding-bottom: 8px;
590
}
591
.prompt-dialog-info-label {
593
font-size: 1em;
594
padding-bottom: 8px;
595
}
596
.hidden {
598
color: rgba(0, 0, 0, 0);
599
}
600
.prompt-dialog-null-label {
602
font-size: 1em;
603
padding-bottom: 8px;
604
}
605
/* Polkit Dialog */
607
.polkit-dialog-user-layout {
608
padding-left: 10px;
609
spacing: 10px;
610
}
611
.polkit-dialog-user-layout:rtl {
613
padding-left: 0px;
614
padding-right: 10px;
615
}
616
.polkit-dialog-user-root-label {
618
color: #FBBC05;
619
}
620
.polkit-dialog-user-icon {
622
border-radius: 5px;
623
background-size: contain;
624
width: 48px;
625
height: 48px;
626
}
627
/* Audio selection dialog */
629
.audio-device-selection-dialog {
630
spacing: 30px;
631
}
632
.audio-selection-content {
634
spacing: 20px;
635
padding: 24px;
636
}
637
.audio-selection-title {
639
font-weight: bold;
640
text-align: center;
641
}
642
.audio-selection-box {
644
spacing: 20px;
645
}
646
.audio-selection-device {
648
border: 1px solid rgba(0, 0, 0, 0.12);
649
border-radius: 4px;
650
}
651
.audio-selection-device:active, .audio-selection-device:hover, .audio-selection-device:focus {
653
background-color: #4285F4;
654
}
655
.audio-selection-device-box {
657
padding: 20px;
658
spacing: 20px;
659
}
660
.audio-selection-device-icon {
662
icon-size: 64px;
663
}
664
/* Access Dialog */
666
.access-dialog {
667
spacing: 30px;
668
}
669
.access-dialog-main-layout {
671
padding: 12px 20px 0;
672
spacing: 12px;
673
}
674
.access-dialog-content {
676
max-width: 28em;
677
spacing: 20px;
678
}
679
.access-dialog-icon {
681
min-width: 48px;
682
icon-size: 48px;
683
}
684
.access-dialog-title {
686
font-weight: bold;
687
}
688
.access-dialog-subtitle {
690
color: rgba(0, 0, 0, 0.38);
691
font-weight: bold;
692
}
693
/* Geolocation Dialog */
695
.geolocation-dialog {
696
spacing: 30px;
697
}
698
.geolocation-dialog-main-layout {
700
spacing: 12px;
701
}
702
.geolocation-dialog-content {
704
spacing: 20px;
705
}
706
.geolocation-dialog-icon {
708
icon-size: 48px;
709
}
710
.geolocation-dialog-title {
712
font-weight: bold;
713
}
714
.geolocation-dialog-reason {
716
color: rgba(0, 0, 0, 0.38);
717
font-weight: bold;
718
}
719
/* Network Agent Dialog */
721
.network-dialog-secret-table {
722
spacing-rows: 15px;
723
spacing-columns: 1em;
724
}
725
.keyring-dialog-control-table {
727
spacing-rows: 15px;
728
spacing-columns: 1em;
729
}
730
/* Popovers/Menus */
732
.popup-menu {
733
min-width: 200px;
734
}
735
.popup-menu .popup-sub-menu {
737
background-color: #EEEEEE;
738
box-shadow: 0 0 transparent;
739
}
740
.popup-menu .popup-menu-content {
742
padding: 8px 0;
743
}
744
.popup-menu .popup-menu-item {
746
spacing: 8px;
747
transition-duration: 100ms;
748
}
749
.popup-menu .popup-menu-item:ltr {
751
padding: 0.4em 24px 0.4em 0;
752
}
753
.popup-menu .popup-menu-item:rtl {
755
padding: 0.4em 0 0.4em 24px;
756
}
757
.popup-menu .popup-menu-item:checked {
759
background-color: #4285F4;
760
color: white;
761
box-shadow: 0 0 transparent;
762
font-weight: normal;
763
}
764
.popup-menu .popup-menu-item:checked.selected {
766
background-color: #5994f5;
767
color: white;
768
}
769
.popup-menu .popup-menu-item:checked:active {
771
background-color: #6fa2f7;
772
color: white !important;
773
}
774
.popup-menu .popup-menu-item:checked:insensitive {
776
color: rgba(255, 255, 255, 0.5);
777
}
778
.popup-menu .popup-menu-item.selected {
780
background-color: rgba(0, 0, 0, 0.12);
781
color: rgba(0, 0, 0, 0.87);
782
transition-duration: 0ms;
783
}
784
.popup-menu .popup-menu-item:active {
786
background-color: rgba(0, 0, 0, 0.26);
787
color: rgba(0, 0, 0, 0.87);
788
transition-duration: 150ms;
789
}
790
.popup-menu .popup-menu-item.selected:active {
792
color: rgba(0, 0, 0, 0.87);
793
}
794
.popup-menu .popup-menu-item:insensitive {
796
color: rgba(0, 0, 0, 0.38);
797
}
798
.popup-menu .popup-inactive-menu-item {
800
color: rgba(0, 0, 0, 0.87);
801
}
802
.popup-menu .popup-inactive-menu-item:insensitive {
804
color: rgba(0, 0, 0, 0.38);
805
}
806
.popup-menu.panel-menu {
808
-boxpointer-gap: 4px;
809
margin-bottom: 1.75em;
810
}
811
.popup-menu-ornament {
813
text-align: right;
814
width: 16px;
815
height: 16px;
816
}
817
.popup-menu-boxpointer,
819
.candidate-popup-boxpointer {
820
-arrow-border-radius: 0;
821
-arrow-background-color: transparent;
822
-arrow-border-width: 0;
823
-arrow-border-color: transparent;
824
-arrow-base: 0;
825
-arrow-rise: 0;
826
-arrow-box-shadow: none;
827
margin: 5px 8px 8px;
828
background-color: #FFFFFF;
829
border-radius: 4px;
830
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
831
}
832
.popup-separator-menu-item {
834
height: 1px;
835
margin: 8px 40px;
836
background-color: transparent;
837
border-color: rgba(0, 0, 0, 0.12);
838
border-bottom-width: 1px;
839
border-bottom-style: solid;
840
}
841
.background-menu {
843
-boxpointer-gap: 4px;
844
-arrow-rise: 0;
845
}
846
/* fallback menu
848
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
849
app menu inside the main app window itself rather than the top bar
850
*/
851
/* OSD */
852
.osd-window {
853
text-align: center;
854
font-weight: bold;
855
spacing: 1em;
856
margin: 32px;
857
min-width: 64px;
858
min-height: 64px;
859
}
860
.osd-window .osd-monitor-label {
862
font-size: 45px;
863
font-weight: 400;
864
}
865
.osd-window .level {
867
height: 8px;
868
border-radius: 0;
869
background-color: rgba(0, 0, 0, 0.12);
870
color: rgba(0, 0, 0, 0.87);
871
}
872
.osd-window .level-bar {
874
background-color: #4285F4;
875
border-radius: 0;
876
}
877
/* Pad OSD */
879
.pad-osd-window {
880
padding: 32px;
881
background-color: rgba(0, 0, 0, 0.6);
882
}
883
.combo-box-label {
885
width: 15em;
886
}
887
/* App Switcher */
889
.switcher-popup {
890
padding: 8px;
891
spacing: 16px;
892
}
893
.switcher-list-item-container {
895
spacing: 8px;
896
}
897
.switcher-list .item-box {
899
padding: 8px;
900
border-radius: 4px;
901
}
902
.switcher-list .item-box:outlined {
904
padding: 8px;
905
border: none;
906
background-color: rgba(0, 0, 0, 0.12);
907
}
908
.switcher-list .item-box:selected {
910
background-color: #4285F4;
911
color: white;
912
}
913
.switcher-list .thumbnail-box {
915
padding: 2px;
916
spacing: 4px;
917
}
918
.switcher-list .thumbnail {
920
width: 256px;
921
}
922
.switcher-list .separator {
924
width: 1px;
925
background: rgba(0, 0, 0, 0.12);
926
}
927
.switcher-arrow {
929
border-color: rgba(0, 0, 0, 0);
930
color: rgba(0, 0, 0, 0.38);
931
}
932
.switcher-arrow:highlighted {
934
color: rgba(0, 0, 0, 0.87);
935
}
936
.input-source-switcher-symbol {
938
font-size: 45px;
939
font-weight: 400;
940
width: 96px;
941
height: 96px;
942
}
943
/* Window Cycler */
945
.cycler-highlight {
946
border: 4px solid #4285F4;
947
}
948
/* Workspace Switcher */
950
.workspace-switcher-group {
951
padding: 8px;
952
}
953
.workspace-switcher {
955
background: transparent;
956
border: 0px;
957
border-radius: 0px;
958
padding: 0px;
959
spacing: 8px;
960
}
961
.ws-switcher-active-up, .ws-switcher-active-down {
963
height: 48px;
964
background-color: #4285F4;
965
color: white;
966
background-size: 32px;
967
border-radius: 4px;
968
}
969
.ws-switcher-box {
971
height: 48px;
972
border: none;
973
background: rgba(0, 0, 0, 0.12);
974
border-radius: 4px;
975
}
976
.osd-window,
978
.resize-popup,
979
.switcher-list, .workspace-switcher-container {
980
color: rgba(0, 0, 0, 0.87);
981
background-color: #FFFFFF;
982
border: none;
983
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
984
border-radius: 4px;
985
padding: 12px;
986
}
987
/* Tiled window previews */
989
.tile-preview {
990
background-color: rgba(123, 170, 247, 0.3);
991
border: 1px solid #7BAAF7;
992
}
993
.tile-preview-left.on-primary {
995
border-radius: 0 0 0 0;
996
}
997
.tile-preview-right.on-primary {
999
border-radius: 0 0 0 0;
1000
}
1001
.tile-preview-left.tile-preview-right.on-primary {
1003
border-radius: 0 0 0 0;
1004
}
1005
/* TOP BAR */
1007
#panel {
1008
background-color: rgba(0, 0, 0, 0.6);
1009
font-weight: bold;
1010
height: 32px;
1011
}
1012
#panel:overview, #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
1014
background-color: transparent;
1015
}
1016
#panel #panelLeft, #panel #panelCenter {
1018
spacing: 0;
1019
}
1020
#panel .panel-corner {
1022
-panel-corner-radius: 0;
1023
-panel-corner-background-color: rgba(0, 0, 0, 0.6);
1024
-panel-corner-border-width: 2px;
1025
-panel-corner-border-color: transparent;
1026
}
1027
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
1029
-panel-corner-border-color: white;
1030
}
1031
#panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
1033
-panel-corner-radius: 0;
1034
-panel-corner-background-color: transparent;
1035
-panel-corner-border-color: transparent;
1036
}
1037
#panel .panel-button {
1039
-natural-hpadding: 12px;
1040
-minimum-hpadding: 6px;
1041
font-weight: bold;
1042
color: rgba(255, 255, 255, 0.7);
1043
transition-duration: 150ms;
1044
}
1045
#panel .panel-button .app-menu-icon {
1047
-st-icon-style: symbolic;
1048
margin-left: 4px;
1049
margin-right: 4px;
1050
}
1051
#panel .panel-button:hover {
1053
color: white;
1054
}
1055
#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
1057
background-color: rgba(0, 0, 0, 0.01);
1058
box-shadow: inset 0 -2px 0px white;
1059
color: white;
1060
}
1061
#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 {
1063
icon-shadow: none;
1064
}
1065
#panel .panel-button .system-status-icon {
1067
icon-size: 1.14286em;
1068
padding: 0 4px;
1069
}
1070
.unlock-screen #panel .panel-button,
1072
.login-screen #panel .panel-button,
1073
.lock-screen #panel .panel-button {
1074
color: rgba(255, 255, 255, 0.7);
1075
}
1076
.unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
1078
.login-screen #panel .panel-button:focus,
1079
.login-screen #panel .panel-button:hover,
1080
.login-screen #panel .panel-button:active,
1081
.lock-screen #panel .panel-button:focus,
1082
.lock-screen #panel .panel-button:hover,
1083
.lock-screen #panel .panel-button:active {
1084
color: white;
1085
}
1086
#panel .panel-status-indicators-box,
1088
#panel .panel-status-menu-box {
1089
spacing: 2px;
1090
}
1091
#panel .power-status.panel-status-indicators-box {
1093
spacing: 0;
1094
}
1095
#panel .screencast-indicator {
1097
color: #FBBC05;
1098
}
1099
#calendarArea {
1101
padding: 8px 16px;
1102
}
1103
.calendar {
1105
margin-bottom: 0;
1106
}
1107
.calendar,
1109
.datemenu-today-button,
1110
.datemenu-displays-box,
1111
.message-list-sections {
1112
margin: 0 8px;
1113
}
1114
.datemenu-calendar-column {
1116
spacing: 8px;
1117
}
1118
.datemenu-displays-section {
1120
padding-bottom: 0;
1121
}
1122
.datemenu-today-button,
1124
.world-clocks-button,
1125
.message-list-section-title {
1126
min-height: 24px;
1127
padding: 4px 8px;
1128
border-radius: 4px;
1129
}
1130
.datemenu-today-button {
1132
min-height: 56px;
1133
}
1134
.message-list-section-list:ltr {
1136
padding-left: 0;
1137
}
1138
.message-list-section-list:rtl {
1140
padding-right: 0;
1141
}
1142
.datemenu-today-button:hover, .datemenu-today-button:focus,
1144
.world-clocks-button:hover,
1145
.world-clocks-button:focus,
1146
.message-list-section-title:hover,
1147
.message-list-section-title:focus {
1148
color: rgba(0, 0, 0, 0.87);
1149
background-color: rgba(0, 0, 0, 0.12);
1150
}
1151
.datemenu-today-button:active,
1153
.world-clocks-button:active,
1154
.message-list-section-title:active {
1155
color: rgba(0, 0, 0, 0.87);
1156
background-color: rgba(0, 0, 0, 0.26);
1157
}
1158
.datemenu-today-button .date-label {
1160
font-size: 18pt;
1161
font-weight: 400;
1162
}
1163
.world-clocks-header,
1165
.message-list-section-title {
1166
color: rgba(0, 0, 0, 0.54);
1167
font-weight: bold;
1168
}
1169
.world-clocks-grid {
1171
spacing-rows: 0.4em;
1172
}
1173
.calendar-month-label {
1175
height: 20px;
1176
margin: 2px;
1177
padding: 6px 16px;
1178
border-radius: 4px;
1179
color: rgba(0, 0, 0, 0.87);
1180
font-weight: bold;
1181
text-align: center;
1182
}
1183
.calendar-month-label:focus {
1185
background-color: rgba(0, 0, 0, 0.12);
1186
}
1187
.pager-button {
1189
width: 32px;
1190
height: 32px;
1191
margin: 2px;
1192
border-radius: 100px;
1193
background-color: transparent;
1194
color: rgba(0, 0, 0, 0.87);
1195
}
1196
.pager-button:hover, .pager-button:focus {
1198
background-color: rgba(0, 0, 0, 0.12);
1199
}
1200
.pager-button:active {
1202
background-color: rgba(0, 0, 0, 0.26);
1203
}
1204
.calendar-change-month-back {
1206
background-image: url("assets/calendar-arrow-left.svg");
1207
}
1208
.calendar-change-month-back:rtl {
1210
background-image: url("assets/calendar-arrow-right.svg");
1211
}
1212
.calendar-change-month-forward {
1214
background-image: url("assets/calendar-arrow-right.svg");
1215
}
1216
.calendar-change-month-forward:rtl {
1218
background-image: url("assets/calendar-arrow-left.svg");
1219
}
1220
.calendar-day-base {
1222
font-size: 9pt;
1223
font-weight: 400;
1224
text-align: center;
1225
width: 32px;
1226
height: 32px;
1227
padding: 0;
1228
margin: 2px;
1229
border-radius: 100px;
1230
}
1231
.calendar-day-base:hover, .calendar-day-base:focus {
1233
background-color: rgba(0, 0, 0, 0.12);
1234
}
1235
.calendar-day-base:active, .calendar-day-base:selected {
1237
color: white;
1238
background-color: #4285F4 !important;
1239
border-color: transparent;
1240
}
1241
.calendar-day-base.calendar-day-heading {
1243
width: 32px;
1244
height: 25px;
1245
margin-top: 2px;
1246
padding: 7px 0 0;
1247
border-radius: 100px;
1248
background-color: transparent;
1249
color: rgba(0, 0, 0, 0.38);
1250
font-size: 9pt;
1251
font-weight: 400;
1252
font-weight: bold;
1253
text-align: center;
1254
}
1255
.calendar-day {
1257
border-width: 0;
1258
}
1259
.calendar-day-top {
1261
border-top-width: 0;
1262
}
1263
.calendar-day-left {
1265
border-left-width: 0;
1266
}
1267
.calendar-nonwork-day {
1269
color: rgba(0, 0, 0, 0.87);
1270
}
1271
.calendar-today {
1273
font-weight: bold !important;
1274
border: none;
1275
}
1276
.calendar-day-with-events {
1278
color: #4285F4;
1279
font-weight: normal;
1280
text-decoration: underline;
1281
background-image: none;
1282
}
1283
.calendar-other-month-day {
1285
color: rgba(0, 0, 0, 0.26);
1286
opacity: 0.5;
1287
}
1288
.calendar-week-number {
1290
width: 32px;
1291
height: 25px;
1292
margin: 2px;
1293
padding: 7px 0 0;
1294
border-radius: 100px;
1295
background-color: transparent;
1296
color: rgba(0, 0, 0, 0.38);
1297
font-size: inherit;
1298
font-weight: bold;
1299
text-align: center;
1300
}
1301
/* Message list */
1303
.message-list {
1304
width: 420px;
1305
}
1306
.message-list-sections {
1308
spacing: 8px;
1309
}
1310
.message-list-section,
1312
.message-list-section-list {
1313
spacing: 8px;
1314
}
1315
.message-list-section-title-box {
1317
spacing: 8px;
1318
}
1319
.message-list-section-close > StIcon {
1321
icon-size: 16px;
1322
border-radius: 16px;
1323
padding: 8px;
1324
color: rgba(0, 0, 0, 0.54);
1325
background-color: transparent;
1326
}
1327
/* FIXME: how do you do this in sass? */
1329
.message-list-section-close:hover > StIcon,
1330
.message-list-section-close:focus > StIcon {
1331
color: rgba(0, 0, 0, 0.87);
1332
background-color: rgba(0, 0, 0, 0.12);
1333
}
1334
.message-list-section-close:active > StIcon {
1336
color: rgba(0, 0, 0, 0.87);
1337
background-color: rgba(0, 0, 0, 0.26);
1338
}
1339
.message {
1341
min-height: 64px;
1342
background-color: transparent;
1343
border-radius: 4px;
1344
}
1345
.message:hover, .message:focus {
1347
background-color: rgba(0, 0, 0, 0.12);
1348
}
1349
.message:active {
1351
background-color: rgba(0, 0, 0, 0.26);
1352
}
1353
.message-icon-bin {
1355
padding: 8px 0px 8px 8px;
1356
}
1357
.message-icon-bin:rtl {
1359
padding: 8px 8px 8px 0px;
1360
}
1361
.message-icon-bin > StIcon {
1363
icon-size: 32px;
1364
}
1365
.message-secondary-bin:ltr {
1367
padding-left: 8px;
1368
}
1369
.message-secondary-bin:rtl {
1371
padding-right: 8px;
1372
}
1373
.message-secondary-bin {
1375
color: rgba(0, 0, 0, 0.54);
1376
}
1377
.message-secondary-bin > StIcon {
1379
icon-size: 16px;
1380
}
1381
.message-title {
1383
min-height: 22px;
1384
padding-top: 2px;
1385
color: rgba(0, 0, 0, 0.87);
1386
font-weight: bold;
1387
font-size: 1em;
1388
}
1389
.message-content {
1391
min-height: 48px;
1392
padding: 8px;
1393
color: rgba(0, 0, 0, 0.54);
1394
font-size: 1em;
1395
}
1396
.message-content * > StIcon {
1398
icon-size: 16px;
1399
border-radius: 16px;
1400
padding: 4px;
1401
color: rgba(0, 0, 0, 0.54);
1402
}
1403
/* FIXME: how do you do this in sass? */
1405
.message-content *:hover > StIcon,
1406
.message-content *:focus > StIcon {
1407
color: rgba(0, 0, 0, 0.87);
1408
background-color: rgba(0, 0, 0, 0.12);
1409
}
1410
.message-content *:active > StIcon {
1412
color: rgba(0, 0, 0, 0.87);
1413
background-color: rgba(0, 0, 0, 0.26);
1414
}
1415
.message-media-control {
1417
margin: 16px 0;
1418
padding: 8px;
1419
border-radius: 100px;
1420
color: rgba(0, 0, 0, 0.54);
1421
}
1422
.message-media-control:hover, .message-media-control:focus {
1424
color: rgba(0, 0, 0, 0.87);
1425
background-color: rgba(0, 0, 0, 0.12);
1426
}
1427
.message-media-control:active {
1429
color: rgba(0, 0, 0, 0.87);
1430
background-color: rgba(0, 0, 0, 0.26);
1431
}
1432
.message-media-control:insensitive {
1434
color: rgba(0, 0, 0, 0.26);
1435
}
1436
.message-media-control:last-child:ltr {
1438
margin-right: 16px;
1439
padding-right: 8px;
1440
}
1441
.message-media-control:last-child:rtl {
1443
margin-left: 16px;
1444
padding-left: 8px;
1445
}
1446
.media-message-cover-icon {
1448
icon-size: 32px;
1449
}
1450
.media-message-cover-icon.fallback {
1452
icon-size: 16px;
1453
padding: 8px;
1454
border: none;
1455
border-radius: 4px;
1456
background-color: rgba(0, 0, 0, 0.12);
1457
color: rgba(0, 0, 0, 0.38);
1458
}
1459
.system-switch-user-submenu-icon.user-icon {
1461
icon-size: 20px;
1462
padding: 0 2px;
1463
}
1464
.system-switch-user-submenu-icon.default-icon {
1466
icon-size: 16px;
1467
padding: 0 4px;
1468
}
1469
#appMenu {
1471
spinner-image: url("process-working.svg");
1472
spacing: 4px;
1473
}
1474
#appMenu .label-shadow {
1476
color: transparent;
1477
}
1478
.aggregate-menu {
1480
min-width: 280px;
1481
}
1482
.aggregate-menu .popup-menu-icon {
1484
padding: 0 4px;
1485
}
1486
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr {
1488
/* 8px spacing + 2*4px padding */
1489
padding-left: 16px;
1490
margin-left: 1.14286em;
1491
}
1492
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl {
1494
/* 8px spacing + 2*4px padding */
1495
padding-right: 16px;
1496
margin-right: 1.14286em;
1497
}
1498
.system-menu-action {
1500
color: rgba(0, 0, 0, 0.54);
1501
border-radius: 100px;
1502
/* wish we could do 50% */
1503
padding: 16px;
1504
border: none;
1505
}
1506
.system-menu-action:hover, .system-menu-action:focus {
1508
background-color: rgba(0, 0, 0, 0.12);
1509
color: rgba(0, 0, 0, 0.87);
1510
border: none;
1511
padding: 16px;
1512
}
1513
.system-menu-action:active {
1515
background-color: rgba(0, 0, 0, 0.26);
1516
color: rgba(0, 0, 0, 0.87);
1517
}
1518
.system-menu-action > StIcon {
1520
icon-size: 16px;
1521
}
1522
.ripple-box {
1524
width: 48px;
1525
height: 48px;
1526
border-radius: 0 0 48px 0;
1527
background-color: rgba(255, 255, 255, 0.3);
1528
background-image: none;
1529
background-size: auto;
1530
}
1531
.ripple-box:rtl {
1533
border-radius: 0 0 0 48px;
1534
background-image: none;
1535
}
1536
.popup-menu-arrow {
1538
width: 16px;
1539
height: 16px;
1540
}
1541
.popup-menu-icon {
1543
icon-size: 1.14286em;
1544
}
1545
.window-close {
1547
transition-duration: 0ms;
1548
height: 36px;
1549
width: 36px;
1550
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1551
background-image: url("assets/window-close.svg");
1552
background-size: 36px;
1553
}
1554
.window-close:hover {
1556
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1557
}
1558
.window-close:active {
1560
background-image: url("assets/window-close-active.svg");
1561
}
1562
.window-close {
1564
-shell-close-overlap: 18px;
1565
}
1566
.window-close:rtl {
1568
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1569
}
1570
.window-close:rtl:hover {
1572
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1573
}
1574
/* NETWORK DIALOGS */
1576
.nm-dialog {
1577
max-height: 500px;
1578
min-height: 450px;
1579
min-width: 470px;
1580
}
1581
.nm-dialog-content {
1583
spacing: 20px;
1584
padding: 24px;
1585
}
1586
.nm-dialog-header-hbox {
1588
spacing: 10px;
1589
}
1590
.nm-dialog-airplane-box {
1592
spacing: 12px;
1593
}
1594
.nm-dialog-airplane-headline {
1596
font-weight: bold;
1597
text-align: center;
1598
}
1599
.nm-dialog-airplane-text {
1601
color: rgba(0, 0, 0, 0.87);
1602
}
1603
.nm-dialog-header-icon {
1605
icon-size: 32px;
1606
}
1607
.nm-dialog-scroll-view {
1609
border: none;
1610
}
1611
.nm-dialog-header {
1613
font-size: 15pt;
1614
font-weight: 500;
1615
}
1616
.nm-dialog-item {
1618
font-size: 1em;
1619
border-bottom: none;
1620
border-radius: 4px;
1621
padding: 12px;
1622
spacing: 20px;
1623
}
1624
.nm-dialog-item:hover, .nm-dialog-item:focus {
1626
background-color: rgba(0, 0, 0, 0.12);
1627
}
1628
.nm-dialog-item:active {
1630
background-color: rgba(0, 0, 0, 0.26);
1631
}
1632
.nm-dialog-item:selected {
1634
background-color: #4285F4;
1635
color: white;
1636
}
1637
.nm-dialog-icons {
1639
spacing: .5em;
1640
}
1641
.nm-dialog-icon {
1643
icon-size: 16px;
1644
}
1645
.no-networks-label {
1647
color: rgba(0, 0, 0, 0.38);
1648
}
1649
.no-networks-box {
1651
spacing: 12px;
1652
}
1653
/* OVERVIEW */
1655
#overview {
1656
spacing: 24px;
1657
}
1658
.overview-controls {
1660
padding-bottom: 32px;
1661
}
1662
.window-picker {
1664
-horizontal-spacing: 32px;
1665
-vertical-spacing: 32px;
1666
padding-left: 32px;
1667
padding-right: 32px;
1668
padding-bottom: 48px;
1669
}
1670
.window-picker.external-monitor {
1672
padding: 32px;
1673
}
1674
.window-clone-border {
1676
border: 4px solid rgba(255, 255, 255, 0.3);
1677
border-radius: 4px;
1678
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
1679
}
1680
.window-caption {
1682
spacing: 25px;
1683
color: white;
1684
background-color: transparent;
1685
border-radius: 4px;
1686
padding: 4px 8px;
1687
-shell-caption-spacing: 12px;
1688
}
1689
.window-caption:hover {
1691
background-color: rgba(255, 255, 255, 0.3);
1692
color: white;
1693
}
1694
.search-entry {
1696
width: 304px;
1697
padding: 0 8px;
1698
border-radius: 4px 4px 0 0;
1699
color: rgba(255, 255, 255, 0.5);
1700
selection-background-color: rgba(255, 255, 255, 0.3);
1701
selected-color: white;
1702
background-color: rgba(255, 255, 255, 0.04);
1703
border-color: transparent;
1704
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1705
}
1706
.search-entry:hover {
1708
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1709
}
1710
.search-entry:focus {
1712
border-color: transparent;
1713
box-shadow: inset 0 -2px white;
1714
padding: 0 8px;
1715
border-width: 0;
1716
color: white;
1717
}
1718
.search-entry .search-entry-icon {
1720
icon-size: 16px;
1721
padding: 0 0;
1722
color: rgba(255, 255, 255, 0.5);
1723
}
1724
.search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
1726
color: white;
1727
}
1728
#searchResultsBin {
1730
max-width: 1000px;
1731
}
1732
#searchResultsContent {
1734
padding-left: 20px;
1735
padding-right: 20px;
1736
spacing: 16px;
1737
}
1738
.search-section {
1740
spacing: 16px;
1741
}
1742
.search-section-content {
1744
spacing: 32px;
1745
}
1746
.list-search-results {
1748
spacing: 3px;
1749
}
1750
.search-section-separator {
1752
-gradient-height: 1px;
1753
-gradient-start: rgba(255, 255, 255, 0);
1754
-gradient-end: rgba(255, 255, 255, 0.4);
1755
-margin-horizontal: 1.5em;
1756
height: 1px;
1757
}
1758
.list-search-result-content {
1760
spacing: 12px;
1761
padding: 12px;
1762
}
1763
.list-search-result-title {
1765
font-size: 18pt;
1766
font-weight: 400;
1767
color: white;
1768
}
1769
.list-search-result-description {
1771
color: rgba(255, 255, 255, 0.7);
1772
}
1773
.search-provider-icon {
1775
padding: 15px;
1776
}
1777
.search-provider-icon-more {
1779
width: 16px;
1780
height: 16px;
1781
background-image: url("assets/more-results.svg");
1782
}
1783
/* DASHBOARD */
1785
#dash {
1786
font-size: 1em;
1787
color: white;
1788
background-color: rgba(255, 255, 255, 0.1);
1789
padding: 3px 0;
1790
border: none;
1791
border-left: 0px;
1792
border-radius: 0px 4px 4px 0px;
1793
}
1794
#dash:rtl {
1796
border-radius: 4px 0 0 4px;
1797
}
1798
#dash .placeholder {
1800
background-image: url("assets/dash-placeholder.svg");
1801
background-size: contain;
1802
height: 24px;
1803
}
1804
#dash .empty-dash-drop-target {
1806
width: 24px;
1807
height: 24px;
1808
}
1809
.dash-item-container > StWidget {
1811
padding: 3px 6px;
1812
}
1813
.dash-label {
1815
border-radius: 4px;
1816
padding: 7px 8px;
1817
color: rgba(0, 0, 0, 0.87);
1818
background-color: #FFFFFF;
1819
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1820
text-align: center;
1821
-x-offset: 8px;
1822
}
1823
/* App Vault/Grid */
1825
.icon-grid {
1826
spacing: 30px;
1827
-shell-grid-horizontal-item-size: 136px;
1828
-shell-grid-vertical-item-size: 136px;
1829
}
1830
.icon-grid .overview-icon {
1832
icon-size: 96px;
1833
}
1834
.app-view-controls {
1836
width: 320px;
1837
padding-bottom: 32px;
1838
}
1839
.app-view-control {
1841
padding: 0 16px;
1842
font-weight: bold;
1843
color: rgba(255, 255, 255, 0.7);
1844
}
1845
.app-view-control:hover {
1847
color: white;
1848
background-color: rgba(255, 255, 255, 0.12) !important;
1849
}
1850
.app-view-control:active {
1852
color: white;
1853
background-color: rgba(255, 255, 255, 0.3) !important;
1854
}
1855
.app-view-control:checked {
1857
color: white;
1858
background-color: rgba(0, 0, 0, 0.01) !important;
1859
box-shadow: inset 0 2px 0 white;
1860
}
1861
.app-view-control:first-child {
1863
border-right-width: 0;
1864
border-radius: 4px;
1865
}
1866
.app-view-control:first-child:checked {
1868
border-radius: 0;
1869
}
1870
.app-view-control:last-child {
1872
border-radius: 4px;
1873
}
1874
.app-view-control:last-child:checked {
1876
border-radius: 0;
1877
}
1878
.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
1880
.list-search-result:focus,
1881
.list-search-result:selected,
1882
.list-search-result:hover {
1883
background-color: rgba(255, 255, 255, 0.12);
1884
transition-duration: 0ms;
1885
}
1886
.search-provider-icon:active, .search-provider-icon:checked,
1888
.list-search-result:active,
1889
.list-search-result:checked {
1890
background-color: rgba(255, 255, 255, 0.3);
1891
transition-duration: 150ms;
1892
}
1893
.app-well-app:hover .overview-icon,
1895
.app-well-app:focus .overview-icon,
1896
.app-well-app:selected .overview-icon,
1897
.app-well-app.app-folder:hover .overview-icon,
1898
.app-well-app.app-folder:focus .overview-icon,
1899
.app-well-app.app-folder:selected .overview-icon,
1900
.show-apps:hover .overview-icon,
1901
.show-apps:focus .overview-icon,
1902
.show-apps:selected .overview-icon,
1903
.grid-search-result:hover .overview-icon,
1904
.grid-search-result:focus .overview-icon,
1905
.grid-search-result:selected .overview-icon {
1906
background-color: rgba(255, 255, 255, 0.12);
1907
transition-duration: 0ms;
1908
border-image: none;
1909
background-image: none;
1910
}
1911
.app-well-app:active .overview-icon,
1913
.app-well-app:checked .overview-icon,
1914
.app-well-app.app-folder:active .overview-icon,
1915
.app-well-app.app-folder:checked .overview-icon,
1916
.show-apps:active .overview-icon,
1917
.show-apps:checked .overview-icon,
1918
.grid-search-result:active .overview-icon,
1919
.grid-search-result:checked .overview-icon {
1920
background-color: rgba(255, 255, 255, 0.3);
1921
box-shadow: 0 0 transparent;
1922
transition-duration: 150ms;
1923
}
1924
.app-well-app-running-dot {
1926
width: 32px;
1927
height: 2px;
1928
background-color: white;
1929
margin-bottom: 0;
1930
}
1931
.search-provider-icon,
1933
.list-search-result, .app-well-app .overview-icon,
1934
.app-well-app.app-folder .overview-icon,
1935
.show-apps .overview-icon,
1936
.grid-search-result .overview-icon {
1937
color: white;
1938
border-radius: 4px;
1939
padding: 6px;
1940
border: none;
1941
transition-duration: 150ms;
1942
text-align: center;
1943
}
1944
.app-well-app.app-folder > .overview-icon {
1946
background-color: rgba(255, 255, 255, 0.1);
1947
}
1948
.show-apps .show-apps-icon {
1950
color: rgba(255, 255, 255, 0.7);
1951
}
1952
.show-apps:hover .show-apps-icon,
1954
.show-apps:active .show-apps-icon,
1955
.show-apps:checked .show-apps-icon,
1956
.show-apps:focus .show-apps-icon {
1957
color: white;
1958
transition-duration: 150ms;
1959
}
1960
.app-folder-popup {
1962
-arrow-border-radius: 4px;
1963
-arrow-background-color: rgba(255, 255, 255, 0.1);
1964
-arrow-base: 24px;
1965
-arrow-rise: 12px;
1966
}
1967
.app-folder-popup-bin {
1969
padding: 5px;
1970
}
1971
.app-folder-icon {
1973
padding: 5px;
1974
spacing-rows: 5px;
1975
spacing-columns: 5px;
1976
}
1977
.page-indicator {
1979
padding: 15px 20px;
1980
}
1981
.page-indicator .page-indicator-icon {
1983
width: 12px;
1984
height: 12px;
1985
border-radius: 12px;
1986
background-image: none;
1987
background-color: rgba(255, 255, 255, 0.3);
1988
}
1989
.page-indicator:hover .page-indicator-icon {
1991
background-image: none;
1992
background-color: rgba(255, 255, 255, 0.5);
1993
}
1994
.page-indicator:active .page-indicator-icon {
1996
background-image: none;
1997
background-color: rgba(255, 255, 255, 0.7);
1998
}
1999
.page-indicator:checked .page-indicator-icon {
2001
background-image: none;
2002
background-color: white;
2003
transition-duration: 0ms;
2004
}
2005
.page-indicator:checked:active {
2007
background-image: none;
2008
}
2009
.app-well-app > .overview-icon.overview-icon-with-label,
2011
.grid-search-result .overview-icon.overview-icon-with-label {
2012
padding: 10px 8px 5px 8px;
2013
spacing: 4px;
2014
}
2015
.workspace-thumbnails {
2017
visible-width: 32px;
2018
spacing: 12px;
2019
padding: 12px;
2020
border-radius: 4px 0 0 4px;
2021
}
2022
.workspace-thumbnails:rtl {
2024
border-radius: 0 4px 4px 0;
2025
}
2026
.workspace-thumbnails .placeholder {
2028
background-image: url("assets/dash-placeholder.svg");
2029
background-size: contain;
2030
height: 24px;
2031
}
2032
.workspace-thumbnail-indicator {
2034
border: 0 solid white;
2035
border-left-width: 2px;
2036
padding: 6px;
2037
border-radius: 0;
2038
}
2039
.search-display > StBoxLayout,
2041
.all-apps,
2042
.frequent-apps > StBoxLayout {
2043
padding: 0px 88px 10px 88px;
2044
}
2045
.workspace-thumbnails {
2047
color: white;
2048
background-color: rgba(255, 255, 255, 0.1);
2049
border: none;
2050
}
2051
.search-statustext, .no-frequent-applications-label {
2053
font-size: 45px;
2054
font-weight: 400;
2055
color: rgba(255, 255, 255, 0.5);
2056
}
2057
/* NOTIFICATIONS & MESSAGE TRAY */
2059
.url-highlighter {
2060
link-color: #4285F4;
2061
}
2062
.notification-banner {
2064
font-size: 1em;
2065
width: 34em;
2066
min-height: 64px;
2067
margin: 5px;
2068
border-radius: 4px;
2069
color: rgba(0, 0, 0, 0.87);
2070
background-color: #FFFFFF;
2071
border: none;
2072
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2073
}
2074
.notification-banner:hover {
2076
background-color: #FFFFFF;
2077
}
2078
.notification-banner:focus {
2080
background-color: #FFFFFF;
2081
}
2082
.notification-banner .notification-icon {
2084
padding: 5px;
2085
}
2086
.notification-banner .notification-content {
2088
padding: 5px;
2089
spacing: 5px;
2090
}
2091
.notification-banner .secondary-icon {
2093
icon-size: 1.14286em;
2094
}
2095
.notification-banner .notification-actions {
2097
background-color: transparent;
2098
padding-top: 0;
2099
padding: 6px;
2100
spacing: 6px;
2101
}
2102
.notification-banner .notification-button {
2104
min-height: 36px;
2105
padding: 0 8px;
2106
border-radius: 4px;
2107
background-color: transparent;
2108
color: rgba(0, 0, 0, 0.54);
2109
font-weight: 500;
2110
}
2111
.notification-banner .notification-button:first-child {
2113
border-radius: 4px;
2114
}
2115
.notification-banner .notification-button:last-child {
2117
border-radius: 4px;
2118
}
2119
.notification-banner .notification-button:hover, .notification-banner .notification-buttonfocus {
2121
background-color: rgba(0, 0, 0, 0.12);
2122
color: rgba(0, 0, 0, 0.87);
2123
}
2124
.notification-banner .notification-button:active {
2126
background-color: rgba(0, 0, 0, 0.26);
2127
color: rgba(0, 0, 0, 0.87);
2128
}
2129
.summary-source-counter {
2131
font-size: 1em;
2132
font-weight: bold;
2133
height: 1.6em;
2134
width: 1.6em;
2135
-shell-counter-overlap-x: 3px;
2136
-shell-counter-overlap-y: 3px;
2137
background-color: #4285F4;
2138
color: white;
2139
border: 2px solid white;
2140
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
2141
border-radius: 0.9em;
2142
}
2143
.secondary-icon {
2145
icon-size: 1.14286em;
2146
}
2147
.chat-body {
2149
spacing: 5px;
2150
}
2151
.chat-response {
2153
margin: 5px;
2154
}
2155
.chat-log-message {
2157
color: rgba(0, 0, 0, 0.87);
2158
}
2159
.chat-new-group {
2161
padding-top: 1em;
2162
}
2163
.chat-received {
2165
padding-left: 4px;
2166
}
2167
.chat-received:rtl {
2169
padding-left: 0px;
2170
padding-right: 4px;
2171
}
2172
.chat-sent {
2174
padding-left: 18pt;
2175
color: rgba(0, 0, 0, 0.54);
2176
}
2177
.chat-sent:rtl {
2179
padding-left: 0;
2180
padding-right: 18pt;
2181
}
2182
.chat-meta-message {
2184
padding-left: 4px;
2185
font-size: 9pt;
2186
font-weight: 400;
2187
color: rgba(0, 0, 0, 0.38);
2188
}
2189
.chat-meta-message:rtl {
2191
padding-left: 0;
2192
padding-right: 4px;
2193
}
2194
.hotplug-transient-box {
2196
spacing: 6px;
2197
padding: 2px 72px 2px 12px;
2198
}
2199
.hotplug-notification-item {
2201
padding: 2px 10px;
2202
}
2203
.hotplug-notification-item:focus {
2205
padding: 1px 71px 1px 11px;
2206
}
2207
.hotplug-notification-item-icon {
2209
icon-size: 24px;
2210
padding: 2px 5px;
2211
}
2212
.hotplug-resident-box {
2214
spacing: 8px;
2215
}
2216
.hotplug-resident-mount {
2218
spacing: 8px;
2219
border-radius: 4px;
2220
}
2221
.hotplug-resident-mount:hover {
2223
background-color: rgba(0, 0, 0, 0.12);
2224
}
2225
.hotplug-resident-mount:active {
2227
background-color: rgba(0, 0, 0, 0.26);
2228
}
2229
.hotplug-resident-mount-label {
2231
color: inherit;
2232
padding-left: 6px;
2233
}
2234
.hotplug-resident-mount-icon {
2236
icon-size: 24px;
2237
padding-left: 6px;
2238
}
2239
.hotplug-resident-eject-icon {
2241
icon-size: 16px;
2242
}
2243
.hotplug-resident-eject-button {
2245
padding: 7px;
2246
border-radius: 4px;
2247
color: rgba(0, 0, 0, 0.87);
2248
}
2249
/* Eeeky things */
2251
.legacy-tray {
2252
background-color: rgba(0, 0, 0, 0.6);
2253
color: white;
2254
border: none;
2255
border-bottom-width: 0;
2256
}
2257
.legacy-tray:ltr {
2259
border-radius: 0 4px 0 0;
2260
border-left-width: 0;
2261
}
2262
.legacy-tray:rtl {
2264
border-radius: 4px 0 0 0;
2265
border-right-width: 0;
2266
}
2267
.legacy-tray-handle,
2269
.legacy-tray-icon {
2270
padding: 6px;
2271
}
2272
.legacy-tray-handle StIcon,
2274
.legacy-tray-icon StIcon {
2275
icon-size: 24px;
2276
}
2277
.legacy-tray-handle:hover, .legacy-tray-handle:focus,
2279
.legacy-tray-icon:hover,
2280
.legacy-tray-icon:focus {
2281
background-color: rgba(255, 255, 255, 0.12);
2282
}
2283
.legacy-tray-handle:active,
2285
.legacy-tray-icon:active {
2286
background-color: rgba(255, 255, 255, 0.3);
2287
}
2288
.legacy-tray-icon-box {
2290
spacing: 12px;
2291
}
2292
.legacy-tray-icon-box:ltr {
2294
padding-left: 12px;
2295
}
2296
.legacy-tray-icon-box:rtl {
2298
padding-right: 12px;
2299
}
2300
.legacy-tray-icon-box StButton {
2302
width: 24px;
2303
height: 24px;
2304
}
2305
.magnifier-zoom-region {
2307
border: 2px solid #4285F4;
2308
}
2309
.magnifier-zoom-region.full-screen {
2311
border-width: 0;
2312
}
2313
/* On-screen Keyboard */
2315
#keyboard {
2316
background-color: rgba(0, 0, 0, 0.3);
2317
}
2318
.keyboard-layout {
2320
spacing: 10px;
2321
padding: 10px;
2322
}
2323
.keyboard-row {
2325
spacing: 15px;
2326
}
2327
.keyboard-key {
2329
min-height: 2em;
2330
min-width: 2em;
2331
font-size: 2em;
2332
font-weight: 500;
2333
border-radius: 4px;
2334
border: none;
2335
color: rgba(0, 0, 0, 0.62);
2336
background-color: #FAFAFA;
2337
border-color: transparent;
2338
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2339
text-shadow: none;
2340
icon-shadow: none;
2341
}
2342
.keyboard-key:focus {
2344
color: rgba(0, 0, 0, 0.87);
2345
text-shadow: none;
2346
icon-shadow: none;
2347
box-shadow: 0 0 transparent;
2348
}
2349
.keyboard-key:hover, .keyboard-key:checked {
2351
color: rgba(0, 0, 0, 0.87);
2352
background-color: #FAFAFA;
2353
border-color: transparent;
2354
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2355
text-shadow: none;
2356
icon-shadow: none;
2357
}
2358
.keyboard-key:active {
2360
color: rgba(0, 0, 0, 0.87);
2361
background-color: rgba(201, 201, 201, 0.9688);
2362
border-color: transparent;
2363
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2364
text-shadow: none;
2365
icon-shadow: none;
2366
}
2367
.keyboard-key:grayed {
2369
background-color: rgba(0, 0, 0, 0.3);
2370
color: white;
2371
border-color: rgba(0, 0, 0, 0.3);
2372
}
2373
.keyboard-subkeys {
2375
color: inherit;
2376
padding: 5px;
2377
-arrow-border-radius: 0;
2378
-arrow-background-color: transparent;
2379
-arrow-border-width: 0;
2380
-arrow-border-color: transparent;
2381
-arrow-base: 0;
2382
-arrow-rise: 0;
2383
-boxpointer-gap: 5px;
2384
background-color: #FFFFFF;
2385
border-radius: 4px;
2386
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2387
}
2388
.candidate-popup-content {
2390
padding: 8px;
2391
spacing: 0;
2392
}
2393
.candidate-index {
2395
padding: 0 4px 0 0;
2396
color: rgba(0, 0, 0, 0.38);
2397
}
2398
.candidate-box:selected .candidate-index {
2400
color: rgba(255, 255, 255, 0.5);
2401
}
2402
.candidate-box {
2404
transition-duration: 0ms;
2405
min-height: 32px;
2406
padding: 0 8px;
2407
border-radius: 4px;
2408
}
2409
.candidate-box:hover {
2411
background-color: rgba(0, 0, 0, 0.12);
2412
color: rgba(0, 0, 0, 0.87);
2413
}
2414
.candidate-box:active {
2416
background-color: rgba(0, 0, 0, 0.26);
2417
color: rgba(0, 0, 0, 0.87);
2418
}
2419
.candidate-box:selected {
2421
background-color: #4285F4;
2422
color: white;
2423
}
2424
.candidate-page-button-box {
2426
height: 32px;
2427
}
2428
.vertical .candidate-page-button-box {
2430
padding-top: 0;
2431
}
2432
.horizontal .candidate-page-button-box {
2434
padding-left: 0;
2435
}
2436
.candidate-page-button {
2438
min-width: 32px;
2439
min-height: 32px;
2440
padding: 0;
2441
}
2442
.candidate-page-button-previous {
2444
border-radius: 4px;
2445
border-right-width: 0;
2446
}
2447
.candidate-page-button-next {
2449
border-radius: 4px;
2450
}
2451
.candidate-page-button-icon {
2453
icon-size: 1.14286em;
2454
}
2455
/* Auth Dialogs & Screen Shield */
2457
.framed-user-icon {
2458
background-size: contain;
2459
border: none;
2460
color: white;
2461
border-radius: 4px;
2462
}
2463
.framed-user-icon:hover {
2465
border-color: white;
2466
color: white;
2467
}
2468
.login-dialog-banner-view {
2470
padding-top: 24px;
2471
max-width: 23em;
2472
}
2473
.login-dialog {
2475
border: none;
2476
background-color: transparent;
2477
}
2478
.login-dialog StEntry {
2480
color: white;
2481
selection-background-color: rgba(255, 255, 255, 0.3);
2482
selected-color: white;
2483
background-color: rgba(255, 255, 255, 0.04);
2484
border-color: transparent;
2485
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2486
}
2487
.login-dialog StEntry:focus {
2489
border-color: transparent;
2490
box-shadow: inset 0 -2px white;
2491
}
2492
.login-dialog StEntry:insensitive {
2494
color: rgba(0, 0, 0, 0.38);
2495
border-color: transparent;
2496
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
2497
color: rgba(255, 255, 255, 0.5);
2498
}
2499
.login-dialog .modal-dialog-button-box {
2501
spacing: 3px;
2502
}
2503
.login-dialog .modal-dialog-button {
2505
padding: 0 16px;
2506
color: rgba(255, 255, 255, 0.7);
2507
background-color: transparent;
2508
border-color: transparent;
2509
box-shadow: 0 0 transparent;
2510
text-shadow: none;
2511
icon-shadow: none;
2512
}
2513
.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus {
2515
color: white;
2516
background-color: rgba(255, 255, 255, 0.12);
2517
border-color: transparent;
2518
box-shadow: 0 0 transparent;
2519
text-shadow: none;
2520
icon-shadow: none;
2521
}
2522
.login-dialog .modal-dialog-button:active {
2524
color: white;
2525
background-color: rgba(255, 255, 255, 0.3);
2526
border-color: transparent;
2527
box-shadow: 0 0 transparent;
2528
text-shadow: none;
2529
icon-shadow: none;
2530
}
2531
.login-dialog .modal-dialog-button:insensitive {
2533
color: rgba(255, 255, 255, 0.3);
2534
background-color: transparent;
2535
border-color: transparent;
2536
box-shadow: 0 0 transparent;
2537
text-shadow: none;
2538
icon-shadow: none;
2539
}
2540
.login-dialog .modal-dialog-button:default {
2542
color: white;
2543
background-color: #01A299;
2544
border-color: transparent;
2545
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2546
text-shadow: none;
2547
icon-shadow: none;
2548
}
2549
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
2551
color: white;
2552
background-color: #01A299;
2553
border-color: transparent;
2554
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2555
text-shadow: none;
2556
icon-shadow: none;
2557
}
2558
.login-dialog .modal-dialog-button:default:active {
2560
color: white;
2561
background-color: #3eb8b1;
2562
border-color: transparent;
2563
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2564
text-shadow: none;
2565
icon-shadow: none;
2566
}
2567
.login-dialog .modal-dialog-button:default:insensitive {
2569
color: rgba(255, 255, 255, 0.5);
2570
background-color: rgba(255, 255, 255, 0.12);
2571
border-color: transparent;
2572
box-shadow: 0 0 transparent;
2573
text-shadow: none;
2574
icon-shadow: none;
2575
}
2576
.login-dialog-logo-bin {
2578
padding: 24px 0px;
2579
}
2580
.login-dialog-banner {
2582
color: rgba(255, 255, 255, 0.7);
2583
}
2584
.login-dialog-button-box {
2586
spacing: 5px;
2587
}
2588
.login-dialog-message-warning {
2590
color: #FBBC05;
2591
}
2592
.login-dialog-message-hint {
2594
padding-top: 0;
2595
padding-bottom: 20px;
2596
}
2597
.login-dialog-user-selection-box {
2599
padding: 100px 0px;
2600
}
2601
.login-dialog-user-selection-box .login-dialog-not-listed-label {
2603
padding-left: 2px;
2604
}
2605
.login-dialog-not-listed-button:focus .login-dialog-user-selection-box .login-dialog-not-listed-label,
2607
.login-dialog-not-listed-button:hover .login-dialog-user-selection-box .login-dialog-not-listed-label {
2608
color: white;
2609
}
2610
.login-dialog-not-listed-label {
2612
font-size: 1em;
2613
font-weight: bold;
2614
color: rgba(255, 255, 255, 0.7);
2615
padding-top: 1em;
2616
}
2617
.login-dialog-not-listed-label:hover {
2619
color: white;
2620
}
2621
.login-dialog-not-listed-label:focus {
2623
background-color: rgba(255, 255, 255, 0.12);
2624
}
2625
.login-dialog-user-list-view {
2627
-st-vfade-offset: 1em;
2628
}
2629
.login-dialog-user-list {
2631
spacing: 12px;
2632
padding: .2em;
2633
width: 23em;
2634
}
2635
.login-dialog-user-list:expanded .login-dialog-user-list-item:focus {
2637
background-color: rgba(255, 255, 255, 0.12);
2638
color: white;
2639
}
2640
.login-dialog-user-list:expanded .login-dialog-user-list-item:hover {
2642
background-color: rgba(255, 255, 255, 0.12);
2643
color: white;
2644
}
2645
.login-dialog-user-list:expanded .login-dialog-user-list-item:active {
2647
background-color: rgba(255, 255, 255, 0.3);
2648
color: white;
2649
}
2650
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
2652
border-right: 2px solid white;
2653
}
2654
.login-dialog-user-list-item {
2656
border-radius: 4px;
2657
padding: 4px 4px 0;
2658
color: rgba(255, 255, 255, 0.7);
2659
}
2660
.login-dialog-user-list-item:ltr {
2662
padding-right: 1em;
2663
}
2664
.login-dialog-user-list-item:rtl {
2666
padding-left: 1em;
2667
}
2668
.login-dialog-user-list-item:hover {
2670
background-color: rgba(255, 255, 255, 0.12);
2671
color: white;
2672
}
2673
.login-dialog-user-list-item:active {
2675
background-color: rgba(255, 255, 255, 0.3);
2676
color: white;
2677
}
2678
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
2680
height: 2px;
2681
margin: 2px 0 0 0;
2682
background-color: white;
2683
}
2684
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
2686
background-color: white;
2687
}
2688
.login-dialog-username,
2690
.user-widget-label {
2691
color: white;
2692
font-size: 15pt;
2693
font-weight: 500;
2694
text-align: left;
2695
padding-left: 15px;
2696
}
2697
.user-widget-label:ltr {
2699
padding-left: 18px;
2700
}
2701
.user-widget-label:rtl {
2703
padding-right: 18px;
2704
}
2705
.login-dialog-prompt-layout {
2707
padding-top: 24px;
2708
padding-bottom: 12px;
2709
spacing: 8px;
2710
width: 23em;
2711
}
2712
.login-dialog-prompt-label {
2714
color: rgba(255, 255, 255, 0.5);
2715
font-size: 1em;
2716
padding-top: 1em;
2717
}
2718
.login-dialog-session-list-button StIcon {
2720
icon-size: 1.25em;
2721
}
2722
.login-dialog-session-list-button {
2724
color: rgba(255, 255, 255, 0.7);
2725
}
2726
.login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
2728
color: white;
2729
}
2730
.login-dialog-session-list-button:active {
2732
color: white;
2733
}
2734
.screen-shield-arrows {
2736
padding-bottom: 3em;
2737
}
2738
.screen-shield-arrows Gjs_Arrow {
2740
color: white;
2741
width: 80px;
2742
height: 48px;
2743
-arrow-thickness: 12px;
2744
-arrow-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2745
}
2746
.screen-shield-clock {
2748
color: white;
2749
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2750
font-weight: normal;
2751
text-align: center;
2752
padding-bottom: 1.5em;
2753
}
2754
.screen-shield-clock-time {
2756
font-size: 112px;
2757
font-weight: 300;
2758
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2759
}
2760
.screen-shield-clock-date {
2762
font-size: 45px;
2763
font-weight: 400;
2764
}
2765
.screen-shield-notifications-container {
2767
spacing: 6px;
2768
width: 30em;
2769
background-color: transparent;
2770
max-height: 500px;
2771
}
2772
.screen-shield-notifications-container .summary-notification-stack-scrollview {
2774
padding-top: 0;
2775
padding-bottom: 0;
2776
}
2777
.screen-shield-notifications-container .notification,
2779
.screen-shield-notifications-container .screen-shield-notification-source {
2780
padding: 8px;
2781
border: none;
2782
background-color: rgba(0, 0, 0, 0.3);
2783
color: white;
2784
border-radius: 4px;
2785
}
2786
.screen-shield-notifications-container .notification {
2788
margin-right: 16px;
2789
}
2790
.screen-shield-notification-label {
2792
min-height: 22px;
2793
padding: 2px 0px 0px 16px;
2794
font-weight: bold;
2795
}
2796
.screen-shield-notification-count-text {
2798
min-height: 22px;
2799
padding: 2px 0px 0px 16px;
2800
color: rgba(255, 255, 255, 0.7);
2801
}
2802
#panel.lock-screen {
2804
background-color: rgba(0, 0, 0, 0.3);
2805
}
2806
.screen-shield-background {
2808
background: black;
2809
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
2810
}
2811
#lockDialogGroup {
2813
background: #303030;
2814
background-size: cover;
2815
}
2816
#LookingGlassDialog {
2818
background-color: #FFFFFF;
2819
spacing: 4px;
2820
padding: 0;
2821
border: none;
2822
border-radius: 4px;
2823
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2824
}
2825
#LookingGlassDialog > #Toolbar {
2827
padding: 0 8px;
2828
border: none;
2829
border-radius: 0;
2830
background-color: rgba(255, 255, 255, 0.01);
2831
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
2832
}
2833
#LookingGlassDialog .labels {
2835
spacing: 0;
2836
}
2837
#LookingGlassDialog .notebook-tab {
2839
-natural-hpadding: 12px;
2840
-minimum-hpadding: 6px;
2841
font-weight: bold;
2842
color: rgba(0, 0, 0, 0.38);
2843
transition-duration: 150ms;
2844
padding-left: 16px;
2845
padding-right: 16px;
2846
min-height: 36px;
2847
padding: 0 32px;
2848
}
2849
#LookingGlassDialog .notebook-tab:hover {
2851
background-color: rgba(0, 0, 0, 0.12);
2852
color: rgba(0, 0, 0, 0.87);
2853
text-shadow: none;
2854
}
2855
#LookingGlassDialog .notebook-tab:active {
2857
background-color: rgba(0, 0, 0, 0.26);
2858
color: rgba(0, 0, 0, 0.87);
2859
}
2860
#LookingGlassDialog .notebook-tab:selected {
2862
border-bottom-width: 0;
2863
border-color: transparent;
2864
background-color: rgba(255, 255, 255, 0.01);
2865
box-shadow: inset 0 -2px 0px #4285F4;
2866
color: rgba(0, 0, 0, 0.87);
2867
text-shadow: none;
2868
}
2869
#LookingGlassDialog StBoxLayout#EvalBox {
2871
padding: 4px;
2872
spacing: 4px;
2873
}
2874
#LookingGlassDialog StBoxLayout#ResultsArea {
2876
spacing: 4px;
2877
}
2878
.lg-dialog StEntry {
2880
selection-background-color: #4285F4;
2881
selected-color: white;
2882
}
2883
.lg-dialog .shell-link {
2885
color: #4285F4;
2886
}
2887
.lg-dialog .shell-link:hover {
2889
color: #4285F4;
2890
}
2891
.lg-completions-text {
2893
font-size: 1em;
2894
font-style: italic;
2895
}
2896
.lg-obj-inspector-title {
2898
spacing: 4px;
2899
}
2900
.lg-obj-inspector-button {
2902
min-height: 36px;
2903
padding: 0 16px;
2904
border: none;
2905
border-radius: 4px;
2906
font-size: 10.5pt;
2907
font-weight: 500;
2908
color: rgba(0, 0, 0, 0.54);
2909
background-color: transparent;
2910
border-color: transparent;
2911
box-shadow: 0 0 transparent;
2912
text-shadow: none;
2913
icon-shadow: none;
2914
}
2915
.lg-obj-inspector-button:hover {
2917
color: rgba(0, 0, 0, 0.87);
2918
background-color: rgba(0, 0, 0, 0.12);
2919
border-color: transparent;
2920
box-shadow: 0 0 transparent;
2921
text-shadow: none;
2922
icon-shadow: none;
2923
}
2924
.lg-obj-inspector-button:active {
2926
color: rgba(0, 0, 0, 0.87);
2927
background-color: rgba(0, 0, 0, 0.26);
2928
border-color: transparent;
2929
box-shadow: 0 0 transparent;
2930
text-shadow: none;
2931
icon-shadow: none;
2932
}
2933
.lg-obj-inspector-button:insensitive {
2935
color: rgba(0, 0, 0, 0.26);
2936
background-color: transparent;
2937
border-color: transparent;
2938
box-shadow: 0 0 transparent;
2939
text-shadow: none;
2940
icon-shadow: none;
2941
}
2942
.lg-obj-inspector-button:focus {
2944
color: rgba(0, 0, 0, 0.87);
2945
text-shadow: none;
2946
icon-shadow: none;
2947
box-shadow: 0 0 transparent;
2948
}
2949
.lg-obj-inspector-button:hover {
2951
border: none;
2952
}
2953
#lookingGlassExtensions {
2955
padding: 4px;
2956
}
2957
.lg-extensions-list {
2959
padding: 4px;
2960
spacing: 6px;
2961
}
2962
.lg-extension {
2964
border: none;
2965
border-radius: 4px;
2966
padding: 4px;
2967
}
2968
.lg-extension-name {
2970
font-size: 18pt;
2971
font-weight: 400;
2972
}
2973
.lg-extension-meta {
2975
spacing: 6px;
2976
}
2977
#LookingGlassPropertyInspector {
2979
background: #FFFFFF;
2980
border: none;
2981
border-radius: 4px;
2982
padding: 6px;
2983
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2984
}
2985
/* Dash to Dock */
2987
#dashtodockContainer #dash {
2988
background-color: rgba(0, 0, 0, 0.6);
2989
}
2990
#dashtodockContainer:overview #dash {
2992
background-color: rgba(255, 255, 255, 0.1);
2993
}
2994
#dashtodockContainer.extended:overview #dash {
2996
background-color: transparent;
2997
}
2998
#dashtodockContainer.left #dash,
3000
#dashtodockContainer.right #dash {
3001
padding: 3px 0;
3002
}
3003
#dashtodockContainer.top #dash,
3005
#dashtodockContainer.bottom #dash {
3006
padding: 0 3px;
3007
}
3008
#dashtodockContainer.extended #dash {
3010
padding: 0;
3011
border-radius: 0;
3012
}
3013
#dashtodockContainer.left .dash-item-container > StWidget,
3015
#dashtodockContainer.right .dash-item-container > StWidget,
3016
#dashtodockContainer.extended.left .dash-item-container > StWidget,
3017
#dashtodockContainer.extended.right .dash-item-container > StWidget {
3018
padding: 3px 6px;
3019
}
3020
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
3022
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
3023
padding: 6px 6px 3px 6px;
3024
}
3025
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
3027
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
3028
padding: 3px 6px 6px 6px;
3029
}
3030
#dashtodockContainer.top .dash-item-container > StWidget,
3032
#dashtodockContainer.bottom .dash-item-container > StWidget,
3033
#dashtodockContainer.extended.top .dash-item-container > StWidget,
3034
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
3035
padding: 6px 3px;
3036
}
3037
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
3039
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
3040
padding: 6px 3px 6px 6px;
3041
}
3042
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
3044
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
3045
padding: 6px 6px 6px 3px;
3046
}
3047
#dashtodockContainer .app-well-app-running-dot {
3049
background-color: transparent;
3050
}
3051
#dashtodockContainer .dash-item-container > StWidget {
3053
background-size: cover;
3054
}
3055
#dashtodockContainer.left .dash-item-container > StWidget.running1 {
3057
background-image: url("assets/dash/left-running1.svg");
3058
}
3059
#dashtodockContainer.left .dash-item-container > StWidget.running1.focused {
3061
background-image: url("assets/dash/left-running1-focused.svg");
3062
}
3063
#dashtodockContainer.left .dash-item-container > StWidget.running2 {
3065
background-image: url("assets/dash/left-running2.svg");
3066
}
3067
#dashtodockContainer.left .dash-item-container > StWidget.running2.focused {
3069
background-image: url("assets/dash/left-running2-focused.svg");
3070
}
3071
#dashtodockContainer.left .dash-item-container > StWidget.running3 {
3073
background-image: url("assets/dash/left-running3.svg");
3074
}
3075
#dashtodockContainer.left .dash-item-container > StWidget.running3.focused {
3077
background-image: url("assets/dash/left-running3-focused.svg");
3078
}
3079
#dashtodockContainer.left .dash-item-container > StWidget.running4 {
3081
background-image: url("assets/dash/left-running4.svg");
3082
}
3083
#dashtodockContainer.left .dash-item-container > StWidget.running4.focused {
3085
background-image: url("assets/dash/left-running4-focused.svg");
3086
}
3087
#dashtodockContainer.right .dash-item-container > StWidget.running1 {
3089
background-image: url("assets/dash/right-running1.svg");
3090
}
3091
#dashtodockContainer.right .dash-item-container > StWidget.running1.focused {
3093
background-image: url("assets/dash/right-running1-focused.svg");
3094
}
3095
#dashtodockContainer.right .dash-item-container > StWidget.running2 {
3097
background-image: url("assets/dash/right-running2.svg");
3098
}
3099
#dashtodockContainer.right .dash-item-container > StWidget.running2.focused {
3101
background-image: url("assets/dash/right-running2-focused.svg");
3102
}
3103
#dashtodockContainer.right .dash-item-container > StWidget.running3 {
3105
background-image: url("assets/dash/right-running3.svg");
3106
}
3107
#dashtodockContainer.right .dash-item-container > StWidget.running3.focused {
3109
background-image: url("assets/dash/right-running3-focused.svg");
3110
}
3111
#dashtodockContainer.right .dash-item-container > StWidget.running4 {
3113
background-image: url("assets/dash/right-running4.svg");
3114
}
3115
#dashtodockContainer.right .dash-item-container > StWidget.running4.focused {
3117
background-image: url("assets/dash/right-running4-focused.svg");
3118
}
3119
#dashtodockContainer.top .dash-item-container > StWidget.running1 {
3121
background-image: url("assets/dash/top-running1.svg");
3122
}
3123
#dashtodockContainer.top .dash-item-container > StWidget.running1.focused {
3125
background-image: url("assets/dash/top-running1-focused.svg");
3126
}
3127
#dashtodockContainer.top .dash-item-container > StWidget.running2 {
3129
background-image: url("assets/dash/top-running2.svg");
3130
}
3131
#dashtodockContainer.top .dash-item-container > StWidget.running2.focused {
3133
background-image: url("assets/dash/top-running2-focused.svg");
3134
}
3135
#dashtodockContainer.top .dash-item-container > StWidget.running3 {
3137
background-image: url("assets/dash/top-running3.svg");
3138
}
3139
#dashtodockContainer.top .dash-item-container > StWidget.running3.focused {
3141
background-image: url("assets/dash/top-running3-focused.svg");
3142
}
3143
#dashtodockContainer.top .dash-item-container > StWidget.running4 {
3145
background-image: url("assets/dash/top-running4.svg");
3146
}
3147
#dashtodockContainer.top .dash-item-container > StWidget.running4.focused {
3149
background-image: url("assets/dash/top-running4-focused.svg");
3150
}
3151
#dashtodockContainer.bottom .dash-item-container > StWidget.running1 {
3153
background-image: url("assets/dash/bottom-running1.svg");
3154
}
3155
#dashtodockContainer.bottom .dash-item-container > StWidget.running1.focused {
3157
background-image: url("assets/dash/bottom-running1-focused.svg");
3158
}
3159
#dashtodockContainer.bottom .dash-item-container > StWidget.running2 {
3161
background-image: url("assets/dash/bottom-running2.svg");
3162
}
3163
#dashtodockContainer.bottom .dash-item-container > StWidget.running2.focused {
3165
background-image: url("assets/dash/bottom-running2-focused.svg");
3166
}
3167
#dashtodockContainer.bottom .dash-item-container > StWidget.running3 {
3169
background-image: url("assets/dash/bottom-running3.svg");
3170
}
3171
#dashtodockContainer.bottom .dash-item-container > StWidget.running3.focused {
3173
background-image: url("assets/dash/bottom-running3-focused.svg");
3174
}
3175
#dashtodockContainer.bottom .dash-item-container > StWidget.running4 {
3177
background-image: url("assets/dash/bottom-running4.svg");
3178
}
3179
#dashtodockContainer.bottom .dash-item-container > StWidget.running4.focused {
3181
background-image: url("assets/dash/bottom-running4-focused.svg");
3182
}
3183
/* Simple Dock */
3185
#dash:desktop {
3186
background-color: rgba(0, 0, 0, 0.6);
3187
}
3188
/* GPaste */
3190
.popup-menu .search-entry {
3191
color: rgba(0, 0, 0, 0.87);
3192
selection-background-color: #4285F4;
3193
selected-color: white;
3194
background-color: rgba(0, 0, 0, 0.04);
3195
border-color: transparent;
3196
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
3197
}
3198
.popup-menu .search-entry:hover {
3200
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
3201
}
3202
.popup-menu .search-entry:focus {
3204
border-color: transparent;
3205
box-shadow: inset 0 -2px #4285F4;
3206
color: rgba(0, 0, 0, 0.87);
3207
}
3208
.popup-menu .search-entry .search-entry-icon {
3210
color: rgba(0, 0, 0, 0.38);
3211
}
3212
.popup-menu .search-entry:hover .search-entry-icon, .popup-menu .search-entry:focus .search-entry-icon {
3214
color: rgba(0, 0, 0, 0.87);
3215
}
3216