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: 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(255, 255, 255, 0.01);
162
border-color: transparent;
163
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
164
}
165
StEntry:focus {
167
border-color: transparent;
168
box-shadow: inset 0 -2px #4285F4;
169
}
170
StEntry:insensitive {
172
color: rgba(0, 0, 0, 0.38);
173
border-color: transparent;
174
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
175
}
176
StEntry StIcon.capslock-warning {
178
icon-size: 16px;
179
warning-color: #FBBC05;
180
padding: 0 0;
181
}
182
/* Scrollbars */
184
StScrollView.vfade {
185
-st-vfade-offset: 32px;
186
}
187
StScrollView.hfade {
189
-st-hfade-offset: 32px;
190
}
191
StScrollBar {
193
padding: 0;
194
}
195
StScrollView StScrollBar {
197
min-width: 16px;
198
min-height: 16px;
199
}
200
StScrollBar StBin#trough {
202
margin: 4px;
203
border-radius: 100px;
204
background-color: rgba(0, 0, 0, 0.12);
205
}
206
StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
208
border-radius: 100px;
209
background-color: rgba(0, 0, 0, 0.38);
210
margin: 4px;
211
}
212
StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover {
214
background-color: rgba(0, 0, 0, 0.54);
215
}
216
StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
218
background-color: rgba(0, 0, 0, 0.87);
219
}
220
#overview StScrollBar StBin#trough, #screenShieldNotifications StScrollBar StBin#trough {
222
background-color: rgba(255, 255, 255, 0.12);
223
}
224
#overview StScrollBar StButton#vhandle, #screenShieldNotifications StScrollBar StButton#vhandle, #overview StScrollBar StButton#hhandle, #screenShieldNotifications StScrollBar StButton#hhandle {
226
background-color: rgba(255, 255, 255, 0.5);
227
}
228
#overview StScrollBar StButton#vhandle:hover, #screenShieldNotifications StScrollBar StButton#vhandle:hover, #overview StScrollBar StButton#hhandle:hover, #screenShieldNotifications StScrollBar StButton#hhandle:hover {
230
background-color: rgba(255, 255, 255, 0.7);
231
}
232
#overview StScrollBar StButton#vhandle:active, #screenShieldNotifications StScrollBar StButton#vhandle:active, #overview StScrollBar StButton#hhandle:active, #screenShieldNotifications StScrollBar StButton#hhandle:active {
234
background-color: white;
235
}
236
/* Slider */
238
.slider {
239
height: 20px;
240
color: #01A299;
241
-slider-height: 2px;
242
-slider-background-color: rgba(0, 0, 0, 0.26);
243
-slider-border-color: transparent;
244
-slider-active-background-color: #01A299;
245
-slider-active-border-color: transparent;
246
-slider-border-width: 0;
247
-slider-handle-radius: 6px;
248
}
249
/* Check Boxes */
251
.check-box * {
252
min-height: 20px;
253
padding: 8px 0;
254
}
255
.check-box StBoxLayout {
257
spacing: 8px;
258
}
259
.check-box StBin {
261
width: 24px;
262
height: 24px;
263
padding: 6px;
264
border-radius: 100px;
265
background-image: url("assets/checkbox-off.svg");
266
}
267
.check-box:focus StBin {
269
background-image: url("assets/checkbox-off.svg");
270
}
271
.check-box:hover StBin {
273
background-color: rgba(0, 0, 0, 0.12);
274
}
275
.check-box:active StBin {
277
background-color: rgba(0, 0, 0, 0.26);
278
}
279
.check-box:checked StBin {
281
background-image: url("assets/checkbox.svg");
282
}
283
.check-box:focus:checked StBin {
285
background-image: url("assets/checkbox.svg");
286
}
287
.check-box:hover:checked StBin {
289
background-color: rgba(1, 162, 153, 0.12);
290
}
291
.check-box:active:checked StBin {
293
background-color: rgba(1, 162, 153, 0.24);
294
}
295
/* Switches */
297
.toggle-switch {
298
width: 40px;
299
height: 20px;
300
background-size: contain;
301
}
302
.toggle-switch-us {
304
background-image: url("assets/toggle-off.svg");
305
}
306
.toggle-switch-us:checked {
308
background-image: url("assets/toggle-on.svg");
309
}
310
.toggle-switch-intl {
312
background-image: url("assets/toggle-off.svg");
313
}
314
.toggle-switch-intl:checked {
316
background-image: url("assets/toggle-on.svg");
317
}
318
/* links */
320
.shell-link {
321
border-radius: 4px;
322
color: #4285F4;
323
}
324
.shell-link:hover {
326
color: #4285F4;
327
background-color: rgba(66, 133, 244, 0.12);
328
}
329
.shell-link:active {
331
color: #4285F4;
332
background-color: rgba(66, 133, 244, 0.24);
333
}
334
/* Modal Dialogs */
336
.headline {
337
font-size: 15pt;
338
font-weight: 500;
339
}
340
.lightbox {
342
background-color: black;
343
}
344
.flashspot {
346
background-color: white;
347
}
348
.modal-dialog {
350
border-radius: 4px;
351
color: rgba(0, 0, 0, 0.87);
352
background-color: #FFFFFF;
353
border: none;
354
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
355
}
356
.modal-dialog .modal-dialog-content-box {
358
padding: 24px;
359
}
360
.modal-dialog .run-dialog-entry {
362
width: 20em;
363
margin-bottom: 0;
364
}
365
.modal-dialog .run-dialog-error-box {
367
padding-top: 16px;
368
spacing: 6px;
369
}
370
.modal-dialog .run-dialog-button-box {
372
padding-top: 1em;
373
}
374
.modal-dialog .run-dialog-label {
376
font-size: 1em;
377
font-weight: normal;
378
color: rgba(0, 0, 0, 0.38);
379
padding-bottom: .4em;
380
}
381
.show-processes-dialog-subject,
383
.mount-question-dialog-subject,
384
.end-session-dialog-subject {
385
font-size: 15pt;
386
font-weight: 500;
387
}
388
/* End Session Dialog */
390
.end-session-dialog {
391
spacing: 42px;
392
border: none;
393
}
394
.end-session-dialog-list {
396
padding-top: 20px;
397
}
398
.end-session-dialog-layout {
400
padding-left: 17px;
401
}
402
.end-session-dialog-layout:rtl {
404
padding-right: 17px;
405
}
406
.end-session-dialog-description {
408
width: 28em;
409
padding-bottom: 10px;
410
}
411
.end-session-dialog-description:rtl {
413
text-align: right;
414
}
415
.end-session-dialog-warning {
417
width: 28em;
418
color: #FBBC05;
419
padding-top: 6px;
420
}
421
.end-session-dialog-warning:rtl {
423
text-align: right;
424
}
425
.end-session-dialog-logout-icon {
427
border-radius: 5px;
428
width: 48px;
429
height: 48px;
430
background-size: contain;
431
}
432
.end-session-dialog-shutdown-icon {
434
color: rgba(0, 0, 0, 0.38);
435
width: 48px;
436
height: 48px;
437
}
438
.end-session-dialog-inhibitor-layout {
440
spacing: 16px;
441
max-height: 200px;
442
padding-right: 65px;
443
padding-left: 65px;
444
}
445
.end-session-dialog-session-list,
447
.end-session-dialog-app-list {
448
spacing: 1em;
449
}
450
.end-session-dialog-list-header {
452
font-weight: bold;
453
}
454
.end-session-dialog-list-header:rtl {
456
text-align: right;
457
}
458
.end-session-dialog-app-list-item,
460
.end-session-dialog-session-list-item {
461
spacing: 1em;
462
}
463
.end-session-dialog-app-list-item-name,
465
.end-session-dialog-session-list-item-name {
466
font-weight: bold;
467
}
468
.end-session-dialog-app-list-item-description {
470
color: rgba(0, 0, 0, 0.38);
471
font-size: 1em;
472
}
473
/* ShellMountOperation Dialogs */
475
.shell-mount-operation-icon {
476
icon-size: 48px;
477
}
478
.show-processes-dialog,
480
.mount-question-dialog {
481
spacing: 24px;
482
}
483
.show-processes-dialog-subject,
485
.mount-question-dialog-subject {
486
padding-top: 10px;
487
padding-left: 17px;
488
padding-bottom: 6px;
489
}
490
.mount-question-dialog-subject {
492
max-width: 500px;
493
}
494
.show-processes-dialog-subject:rtl,
496
.mount-question-dialog-subject:rtl {
497
padding-left: 0px;
498
padding-right: 17px;
499
}
500
.show-processes-dialog-description,
502
.mount-question-dialog-description {
503
padding-left: 17px;
504
width: 28em;
505
}
506
.show-processes-dialog-description:rtl,
508
.mount-question-dialog-description:rtl {
509
padding-right: 17px;
510
}
511
.show-processes-dialog-app-list {
513
max-height: 200px;
514
padding-top: 24px;
515
padding-left: 49px;
516
padding-right: 32px;
517
}
518
.show-processes-dialog-app-list:rtl {
520
padding-right: 49px;
521
padding-left: 32px;
522
}
523
.show-processes-dialog-app-list-item {
525
color: rgba(0, 0, 0, 0.87);
526
}
527
.show-processes-dialog-app-list-item:hover {
529
color: rgba(0, 0, 0, 0.87);
530
}
531
.show-processes-dialog-app-list-item:ltr {
533
padding-right: 1em;
534
}
535
.show-processes-dialog-app-list-item:rtl {
537
padding-left: 1em;
538
}
539
.show-processes-dialog-app-list-item-icon:ltr {
541
padding-right: 17px;
542
}
543
.show-processes-dialog-app-list-item-icon:rtl {
545
padding-left: 17px;
546
}
547
.show-processes-dialog-app-list-item-name {
549
font-size: 1em;
550
}
551
/* Password or Authentication Dialog */
553
.prompt-dialog {
554
width: 500px;
555
border: none;
556
}
557
.prompt-dialog-main-layout {
559
spacing: 24px;
560
padding: 10px;
561
}
562
.prompt-dialog-message-layout {
564
spacing: 16px;
565
}
566
.prompt-dialog-headline {
568
font-size: 15pt;
569
font-weight: 500;
570
color: rgba(0, 0, 0, 0.87);
571
}
572
.prompt-dialog-description:rtl {
574
text-align: right;
575
}
576
.prompt-dialog-password-box {
578
spacing: 1em;
579
padding-bottom: 1em;
580
}
581
.prompt-dialog-error-label {
583
font-size: 1em;
584
color: #EA4335;
585
padding-bottom: 8px;
586
}
587
.prompt-dialog-info-label {
589
font-size: 1em;
590
padding-bottom: 8px;
591
}
592
.hidden {
594
color: transparent;
595
}
596
.prompt-dialog-null-label {
598
font-size: 1em;
599
padding-bottom: 8px;
600
}
601
/* Polkit Dialog */
603
.polkit-dialog-user-layout {
604
padding-left: 10px;
605
spacing: 10px;
606
}
607
.polkit-dialog-user-layout:rtl {
609
padding-left: 0px;
610
padding-right: 10px;
611
}
612
.polkit-dialog-user-root-label {
614
color: #FBBC05;
615
}
616
.polkit-dialog-user-icon {
618
border-radius: 5px;
619
background-size: contain;
620
width: 48px;
621
height: 48px;
622
}
623
/* Audio selection dialog */
625
.audio-device-selection-dialog {
626
spacing: 30px;
627
}
628
.audio-selection-content {
630
spacing: 20px;
631
padding: 24px;
632
}
633
.audio-selection-title {
635
font-weight: bold;
636
text-align: center;
637
}
638
.audio-selection-box {
640
spacing: 20px;
641
}
642
.audio-selection-device {
644
border: 1px solid rgba(0, 0, 0, 0.12);
645
border-radius: 4px;
646
}
647
.audio-selection-device:active, .audio-selection-device:hover, .audio-selection-device:focus {
649
background-color: #4285F4;
650
}
651
.audio-selection-device-box {
653
padding: 20px;
654
spacing: 20px;
655
}
656
.audio-selection-device-icon {
658
icon-size: 64px;
659
}
660
/* Access Dialog */
662
.access-dialog {
663
spacing: 30px;
664
}
665
.access-dialog-main-layout {
667
padding: 12px 20px 0;
668
spacing: 12px;
669
}
670
.access-dialog-content {
672
max-width: 28em;
673
spacing: 20px;
674
}
675
.access-dialog-icon {
677
min-width: 48px;
678
icon-size: 48px;
679
}
680
.access-dialog-title {
682
font-weight: bold;
683
}
684
.access-dialog-subtitle {
686
color: rgba(0, 0, 0, 0.38);
687
font-weight: bold;
688
}
689
/* Geolocation Dialog */
691
.geolocation-dialog {
692
spacing: 30px;
693
}
694
.geolocation-dialog-main-layout {
696
spacing: 12px;
697
}
698
.geolocation-dialog-content {
700
spacing: 20px;
701
}
702
.geolocation-dialog-icon {
704
icon-size: 48px;
705
}
706
.geolocation-dialog-title {
708
font-weight: bold;
709
}
710
.geolocation-dialog-reason {
712
color: rgba(0, 0, 0, 0.38);
713
font-weight: bold;
714
}
715
/* Network Agent Dialog */
717
.network-dialog-secret-table {
718
spacing-rows: 15px;
719
spacing-columns: 1em;
720
}
721
.keyring-dialog-control-table {
723
spacing-rows: 15px;
724
spacing-columns: 1em;
725
}
726
/* Popovers/Menus */
728
.popup-menu {
729
min-width: 200px;
730
}
731
.popup-menu .popup-sub-menu {
733
background-color: #EEEEEE;
734
box-shadow: 0 0 transparent;
735
}
736
.popup-menu .popup-menu-content {
738
padding: 8px 0;
739
}
740
.popup-menu .popup-menu-item {
742
spacing: 8px;
743
transition-duration: 100ms;
744
}
745
.popup-menu .popup-menu-item:ltr {
747
padding: 0.4em 24px 0.4em 0;
748
}
749
.popup-menu .popup-menu-item:rtl {
751
padding: 0.4em 0 0.4em 24px;
752
}
753
.popup-menu .popup-menu-item:checked {
755
background-color: #4285F4;
756
color: white;
757
box-shadow: 0 0 transparent;
758
font-weight: normal;
759
}
760
.popup-menu .popup-menu-item:checked.selected {
762
background-color: #5994f5;
763
color: white;
764
}
765
.popup-menu .popup-menu-item:checked:active {
767
background-color: #6fa2f7;
768
color: white !important;
769
}
770
.popup-menu .popup-menu-item:checked:insensitive {
772
color: rgba(255, 255, 255, 0.5);
773
}
774
.popup-menu .popup-menu-item.selected {
776
background-color: rgba(0, 0, 0, 0.12);
777
color: rgba(0, 0, 0, 0.87);
778
transition-duration: 0ms;
779
}
780
.popup-menu .popup-menu-item:active {
782
background-color: rgba(0, 0, 0, 0.26);
783
color: rgba(0, 0, 0, 0.87);
784
transition-duration: 150ms;
785
}
786
.popup-menu .popup-menu-item.selected:active {
788
color: rgba(0, 0, 0, 0.87);
789
}
790
.popup-menu .popup-menu-item:insensitive {
792
color: rgba(0, 0, 0, 0.38);
793
}
794
.popup-menu .popup-inactive-menu-item {
796
color: rgba(0, 0, 0, 0.87);
797
}
798
.popup-menu .popup-inactive-menu-item:insensitive {
800
color: rgba(0, 0, 0, 0.38);
801
}
802
.popup-menu.panel-menu {
804
-boxpointer-gap: 4px;
805
margin-bottom: 1.75em;
806
}
807
.popup-menu-ornament {
809
text-align: right;
810
width: 16px;
811
height: 16px;
812
}
813
.popup-menu-boxpointer,
815
.candidate-popup-boxpointer {
816
-arrow-border-radius: 0;
817
-arrow-background-color: transparent;
818
-arrow-border-width: 0;
819
-arrow-border-color: transparent;
820
-arrow-base: 0;
821
-arrow-rise: 0;
822
-arrow-box-shadow: none;
823
margin: 5px 8px 8px;
824
background-color: #FFFFFF;
825
border-radius: 4px;
826
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
827
}
828
.popup-separator-menu-item {
830
height: 1px;
831
margin: 8px 40px;
832
background-color: transparent;
833
border-color: rgba(0, 0, 0, 0.12);
834
border-bottom-width: 1px;
835
border-bottom-style: solid;
836
}
837
.background-menu {
839
-boxpointer-gap: 4px;
840
-arrow-rise: 0;
841
}
842
/* fallback menu
844
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
845
app menu inside the main app window itself rather than the top bar
846
*/
847
/* OSD */
848
.osd-window {
849
text-align: center;
850
font-weight: bold;
851
spacing: 1em;
852
margin: 32px;
853
min-width: 64px;
854
min-height: 64px;
855
}
856
.osd-window .osd-monitor-label {
858
font-size: 45px;
859
font-weight: 400;
860
}
861
.osd-window .level {
863
height: 8px;
864
border-radius: 0;
865
background-color: rgba(0, 0, 0, 0.12);
866
color: rgba(0, 0, 0, 0.87);
867
}
868
.osd-window .level-bar {
870
background-color: #4285F4;
871
border-radius: 0;
872
}
873
/* Pad OSD */
875
.pad-osd-window {
876
padding: 32px;
877
background-color: rgba(0, 0, 0, 0.6);
878
}
879
.combo-box-label {
881
width: 15em;
882
}
883
/* App Switcher */
885
.switcher-popup {
886
padding: 8px;
887
spacing: 16px;
888
}
889
.switcher-list-item-container {
891
spacing: 8px;
892
}
893
.switcher-list .item-box {
895
padding: 8px;
896
border-radius: 4px;
897
}
898
.switcher-list .item-box:outlined {
900
padding: 8px;
901
border: none;
902
background-color: rgba(0, 0, 0, 0.12);
903
}
904
.switcher-list .item-box:selected {
906
background-color: #4285F4;
907
color: white;
908
}
909
.switcher-list .thumbnail-box {
911
padding: 2px;
912
spacing: 4px;
913
}
914
.switcher-list .thumbnail {
916
width: 256px;
917
}
918
.switcher-list .separator {
920
width: 1px;
921
background: rgba(0, 0, 0, 0.12);
922
}
923
.switcher-arrow {
925
border-color: transparent;
926
color: rgba(0, 0, 0, 0.38);
927
}
928
.switcher-arrow:highlighted {
930
color: rgba(0, 0, 0, 0.87);
931
}
932
.input-source-switcher-symbol {
934
font-size: 45px;
935
font-weight: 400;
936
width: 96px;
937
height: 96px;
938
}
939
/* Window Cycler */
941
.cycler-highlight {
942
border: 4px solid #4285F4;
943
}
944
/* Workspace Switcher */
946
.workspace-switcher-group {
947
padding: 8px;
948
}
949
.workspace-switcher {
951
background: transparent;
952
border: 0px;
953
border-radius: 0px;
954
padding: 0px;
955
spacing: 8px;
956
}
957
.ws-switcher-active-up, .ws-switcher-active-down {
959
height: 48px;
960
background-color: #4285F4;
961
color: white;
962
background-size: 32px;
963
border-radius: 4px;
964
}
965
.ws-switcher-box {
967
height: 48px;
968
border: none;
969
background: rgba(0, 0, 0, 0.12);
970
border-radius: 4px;
971
}
972
.osd-window,
974
.resize-popup,
975
.switcher-list, .workspace-switcher-container {
976
color: rgba(0, 0, 0, 0.87);
977
background-color: #FFFFFF;
978
border: none;
979
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
980
border-radius: 4px;
981
padding: 12px;
982
}
983
/* Tiled window previews */
985
.tile-preview {
986
background-color: rgba(123, 170, 247, 0.3);
987
border: 1px solid #7BAAF7;
988
}
989
.tile-preview-left.on-primary {
991
border-radius: 0 0 0 0;
992
}
993
.tile-preview-right.on-primary {
995
border-radius: 0 0 0 0;
996
}
997
.tile-preview-left.tile-preview-right.on-primary {
999
border-radius: 0 0 0 0;
1000
}
1001
/* TOP BAR */
1003
#panel {
1004
background-color: rgba(0, 0, 0, 0.6);
1005
font-weight: bold;
1006
height: 32px;
1007
}
1008
#panel:overview, #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
1010
background-color: transparent;
1011
}
1012
#panel #panelLeft, #panel #panelCenter {
1014
spacing: 0;
1015
}
1016
#panel .panel-corner {
1018
-panel-corner-radius: 0;
1019
-panel-corner-background-color: rgba(0, 0, 0, 0.6);
1020
-panel-corner-border-width: 2px;
1021
-panel-corner-border-color: transparent;
1022
}
1023
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
1025
-panel-corner-border-color: white;
1026
}
1027
#panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
1029
-panel-corner-radius: 0;
1030
-panel-corner-background-color: transparent;
1031
-panel-corner-border-color: transparent;
1032
}
1033
#panel .panel-button {
1035
-natural-hpadding: 12px;
1036
-minimum-hpadding: 6px;
1037
font-weight: bold;
1038
color: rgba(255, 255, 255, 0.7);
1039
transition-duration: 150ms;
1040
}
1041
#panel .panel-button .app-menu-icon {
1043
-st-icon-style: symbolic;
1044
margin-left: 4px;
1045
margin-right: 4px;
1046
}
1047
#panel .panel-button:hover {
1049
color: white;
1050
}
1051
#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
1053
background-color: rgba(0, 0, 0, 0.01);
1054
box-shadow: inset 0 -2px 0px white;
1055
color: white;
1056
}
1057
#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 {
1059
icon-shadow: none;
1060
}
1061
#panel .panel-button .system-status-icon {
1063
icon-size: 1.14286em;
1064
padding: 0 4px;
1065
}
1066
.unlock-screen #panel .panel-button,
1068
.login-screen #panel .panel-button,
1069
.lock-screen #panel .panel-button {
1070
color: rgba(255, 255, 255, 0.7);
1071
}
1072
.unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
1074
.login-screen #panel .panel-button:focus,
1075
.login-screen #panel .panel-button:hover,
1076
.login-screen #panel .panel-button:active,
1077
.lock-screen #panel .panel-button:focus,
1078
.lock-screen #panel .panel-button:hover,
1079
.lock-screen #panel .panel-button:active {
1080
color: white;
1081
}
1082
#panel .panel-status-indicators-box,
1084
#panel .panel-status-menu-box {
1085
spacing: 2px;
1086
}
1087
#panel .power-status.panel-status-indicators-box {
1089
spacing: 0;
1090
}
1091
#panel .screencast-indicator {
1093
color: #FBBC05;
1094
}
1095
#calendarArea {
1097
padding: 8px 16px;
1098
}
1099
.calendar {
1101
margin-bottom: 0;
1102
}
1103
.calendar,
1105
.datemenu-today-button,
1106
.datemenu-displays-box,
1107
.message-list-sections {
1108
margin: 0 8px;
1109
}
1110
.datemenu-calendar-column {
1112
spacing: 8px;
1113
}
1114
.datemenu-displays-section {
1116
padding-bottom: 0;
1117
}
1118
.datemenu-today-button,
1120
.world-clocks-button,
1121
.message-list-section-title {
1122
min-height: 24px;
1123
padding: 4px 8px;
1124
border-radius: 4px;
1125
}
1126
.datemenu-today-button {
1128
min-height: 56px;
1129
}
1130
.message-list-section-list:ltr {
1132
padding-left: 0;
1133
}
1134
.message-list-section-list:rtl {
1136
padding-right: 0;
1137
}
1138
.datemenu-today-button:hover, .datemenu-today-button:focus,
1140
.world-clocks-button:hover,
1141
.world-clocks-button:focus,
1142
.message-list-section-title:hover,
1143
.message-list-section-title:focus {
1144
color: rgba(0, 0, 0, 0.87);
1145
background-color: rgba(0, 0, 0, 0.12);
1146
}
1147
.datemenu-today-button:active,
1149
.world-clocks-button:active,
1150
.message-list-section-title:active {
1151
color: rgba(0, 0, 0, 0.87);
1152
background-color: rgba(0, 0, 0, 0.26);
1153
}
1154
.datemenu-today-button .date-label {
1156
font-size: 18pt;
1157
font-weight: 400;
1158
}
1159
.world-clocks-header,
1161
.message-list-section-title {
1162
color: rgba(0, 0, 0, 0.54);
1163
font-weight: bold;
1164
}
1165
.world-clocks-grid {
1167
spacing-rows: 0.4em;
1168
}
1169
.calendar-month-label {
1171
height: 20px;
1172
margin: 2px;
1173
padding: 6px 16px;
1174
border-radius: 4px;
1175
color: rgba(0, 0, 0, 0.87);
1176
font-weight: bold;
1177
text-align: center;
1178
}
1179
.calendar-month-label:focus {
1181
background-color: rgba(0, 0, 0, 0.12);
1182
}
1183
.pager-button {
1185
width: 32px;
1186
height: 32px;
1187
margin: 2px;
1188
border-radius: 100px;
1189
background-color: transparent;
1190
color: rgba(0, 0, 0, 0.87);
1191
}
1192
.pager-button:hover, .pager-button:focus {
1194
background-color: rgba(0, 0, 0, 0.12);
1195
}
1196
.pager-button:active {
1198
background-color: rgba(0, 0, 0, 0.26);
1199
}
1200
.calendar-change-month-back {
1202
background-image: url("assets/calendar-arrow-left.svg");
1203
}
1204
.calendar-change-month-back:rtl {
1206
background-image: url("assets/calendar-arrow-right.svg");
1207
}
1208
.calendar-change-month-forward {
1210
background-image: url("assets/calendar-arrow-right.svg");
1211
}
1212
.calendar-change-month-forward:rtl {
1214
background-image: url("assets/calendar-arrow-left.svg");
1215
}
1216
.calendar-day-base {
1218
font-size: 9pt;
1219
font-weight: 400;
1220
text-align: center;
1221
width: 32px;
1222
height: 32px;
1223
padding: 0;
1224
margin: 2px;
1225
border-radius: 100px;
1226
}
1227
.calendar-day-base:hover, .calendar-day-base:focus {
1229
background-color: rgba(0, 0, 0, 0.12);
1230
}
1231
.calendar-day-base:active, .calendar-day-base:selected {
1233
color: white;
1234
background-color: #4285F4 !important;
1235
border-color: transparent;
1236
}
1237
.calendar-day-base.calendar-day-heading {
1239
width: 32px;
1240
height: 25px;
1241
margin-top: 2px;
1242
padding: 7px 0 0;
1243
border-radius: 100px;
1244
background-color: transparent;
1245
color: rgba(0, 0, 0, 0.38);
1246
font-size: 9pt;
1247
font-weight: 400;
1248
font-weight: bold;
1249
text-align: center;
1250
}
1251
.calendar-day {
1253
border-width: 0;
1254
}
1255
.calendar-day-top {
1257
border-top-width: 0;
1258
}
1259
.calendar-day-left {
1261
border-left-width: 0;
1262
}
1263
.calendar-nonwork-day {
1265
color: rgba(0, 0, 0, 0.87);
1266
}
1267
.calendar-today {
1269
font-weight: bold !important;
1270
border: none;
1271
}
1272
.calendar-day-with-events {
1274
color: #4285F4;
1275
font-weight: normal;
1276
text-decoration: underline;
1277
background-image: none;
1278
}
1279
.calendar-other-month-day {
1281
color: rgba(0, 0, 0, 0.26);
1282
opacity: 0.5;
1283
}
1284
.calendar-week-number {
1286
width: 32px;
1287
height: 25px;
1288
margin: 2px;
1289
padding: 7px 0 0;
1290
border-radius: 100px;
1291
background-color: transparent;
1292
color: rgba(0, 0, 0, 0.38);
1293
font-size: inherit;
1294
font-weight: bold;
1295
text-align: center;
1296
}
1297
/* Message list */
1299
.message-list {
1300
width: 420px;
1301
}
1302
.message-list-sections {
1304
spacing: 8px;
1305
}
1306
.message-list-section,
1308
.message-list-section-list {
1309
spacing: 8px;
1310
}
1311
.message-list-section-title-box {
1313
spacing: 8px;
1314
}
1315
.message-list-section-close > StIcon {
1317
icon-size: 16px;
1318
border-radius: 16px;
1319
padding: 8px;
1320
color: rgba(0, 0, 0, 0.54);
1321
background-color: transparent;
1322
}
1323
/* FIXME: how do you do this in sass? */
1325
.message-list-section-close:hover > StIcon,
1326
.message-list-section-close:focus > StIcon {
1327
color: rgba(0, 0, 0, 0.87);
1328
background-color: rgba(0, 0, 0, 0.12);
1329
}
1330
.message-list-section-close:active > StIcon {
1332
color: rgba(0, 0, 0, 0.87);
1333
background-color: rgba(0, 0, 0, 0.26);
1334
}
1335
.message {
1337
min-height: 64px;
1338
background-color: transparent;
1339
border-radius: 4px;
1340
}
1341
.message:hover, .message:focus {
1343
background-color: rgba(0, 0, 0, 0.12);
1344
}
1345
.message:active {
1347
background-color: rgba(0, 0, 0, 0.26);
1348
}
1349
.message-icon-bin {
1351
padding: 8px 0px 8px 8px;
1352
}
1353
.message-icon-bin:rtl {
1355
padding: 8px 8px 8px 0px;
1356
}
1357
.message-icon-bin > StIcon {
1359
icon-size: 32px;
1360
}
1361
.message-secondary-bin:ltr {
1363
padding-left: 8px;
1364
}
1365
.message-secondary-bin:rtl {
1367
padding-right: 8px;
1368
}
1369
.message-secondary-bin {
1371
color: rgba(0, 0, 0, 0.54);
1372
}
1373
.message-secondary-bin > StIcon {
1375
icon-size: 16px;
1376
}
1377
.message-title {
1379
min-height: 22px;
1380
padding-top: 2px;
1381
color: rgba(0, 0, 0, 0.87);
1382
font-weight: bold;
1383
font-size: 1em;
1384
}
1385
.message-content {
1387
min-height: 48px;
1388
padding: 8px;
1389
color: rgba(0, 0, 0, 0.54);
1390
font-size: 1em;
1391
}
1392
.message-content * > StIcon {
1394
icon-size: 16px;
1395
border-radius: 16px;
1396
padding: 4px;
1397
color: rgba(0, 0, 0, 0.54);
1398
}
1399
/* FIXME: how do you do this in sass? */
1401
.message-content *:hover > StIcon,
1402
.message-content *:focus > StIcon {
1403
color: rgba(0, 0, 0, 0.87);
1404
background-color: rgba(0, 0, 0, 0.12);
1405
}
1406
.message-content *:active > StIcon {
1408
color: rgba(0, 0, 0, 0.87);
1409
background-color: rgba(0, 0, 0, 0.26);
1410
}
1411
.message-media-control {
1413
margin: 16px 0;
1414
padding: 8px;
1415
border-radius: 100px;
1416
color: rgba(0, 0, 0, 0.54);
1417
}
1418
.message-media-control:hover, .message-media-control:focus {
1420
color: rgba(0, 0, 0, 0.87);
1421
background-color: rgba(0, 0, 0, 0.12);
1422
}
1423
.message-media-control:active {
1425
color: rgba(0, 0, 0, 0.87);
1426
background-color: rgba(0, 0, 0, 0.26);
1427
}
1428
.message-media-control:insensitive {
1430
color: rgba(0, 0, 0, 0.26);
1431
}
1432
.message-media-control:last-child:ltr {
1434
margin-right: 16px;
1435
padding-right: 8px;
1436
}
1437
.message-media-control:last-child:rtl {
1439
margin-left: 16px;
1440
padding-left: 8px;
1441
}
1442
.media-message-cover-icon {
1444
icon-size: 32px;
1445
}
1446
.media-message-cover-icon.fallback {
1448
icon-size: 16px;
1449
padding: 8px;
1450
border: none;
1451
border-radius: 4px;
1452
background-color: rgba(0, 0, 0, 0.12);
1453
color: rgba(0, 0, 0, 0.38);
1454
}
1455
.system-switch-user-submenu-icon.user-icon {
1457
icon-size: 20px;
1458
padding: 0 2px;
1459
}
1460
.system-switch-user-submenu-icon.default-icon {
1462
icon-size: 16px;
1463
padding: 0 4px;
1464
}
1465
#appMenu {
1467
spinner-image: url("process-working.svg");
1468
spacing: 4px;
1469
}
1470
#appMenu .label-shadow {
1472
color: transparent;
1473
}
1474
.aggregate-menu {
1476
min-width: 280px;
1477
}
1478
.aggregate-menu .popup-menu-icon {
1480
padding: 0 4px;
1481
}
1482
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr {
1484
/* 8px spacing + 2*4px padding */
1485
padding-left: 16px;
1486
margin-left: 1.14286em;
1487
}
1488
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl {
1490
/* 8px spacing + 2*4px padding */
1491
padding-right: 16px;
1492
margin-right: 1.14286em;
1493
}
1494
.system-menu-action {
1496
color: rgba(0, 0, 0, 0.54);
1497
border-radius: 100px;
1498
/* wish we could do 50% */
1499
padding: 16px;
1500
border: none;
1501
}
1502
.system-menu-action:hover, .system-menu-action:focus {
1504
background-color: rgba(0, 0, 0, 0.12);
1505
color: rgba(0, 0, 0, 0.87);
1506
border: none;
1507
padding: 16px;
1508
}
1509
.system-menu-action:active {
1511
background-color: rgba(0, 0, 0, 0.26);
1512
color: rgba(0, 0, 0, 0.87);
1513
}
1514
.system-menu-action > StIcon {
1516
icon-size: 16px;
1517
}
1518
.ripple-box {
1520
width: 48px;
1521
height: 48px;
1522
border-radius: 0 0 48px 0;
1523
background-color: rgba(255, 255, 255, 0.3);
1524
background-image: none;
1525
background-size: auto;
1526
}
1527
.ripple-box:rtl {
1529
border-radius: 0 0 0 48px;
1530
background-image: none;
1531
}
1532
.popup-menu-arrow {
1534
width: 16px;
1535
height: 16px;
1536
}
1537
.popup-menu-icon {
1539
icon-size: 1.14286em;
1540
}
1541
.window-close {
1543
transition-duration: 0ms;
1544
height: 36px;
1545
width: 36px;
1546
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1547
background-image: url("assets/window-close.svg");
1548
background-size: 36px;
1549
}
1550
.window-close:hover {
1552
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1553
}
1554
.window-close:active {
1556
background-image: url("assets/window-close-active.svg");
1557
}
1558
.window-close {
1560
-shell-close-overlap: 18px;
1561
}
1562
.window-close:rtl {
1564
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1565
}
1566
.window-close:rtl:hover {
1568
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1569
}
1570
/* NETWORK DIALOGS */
1572
.nm-dialog {
1573
max-height: 500px;
1574
min-height: 450px;
1575
min-width: 470px;
1576
}
1577
.nm-dialog-content {
1579
spacing: 20px;
1580
padding: 24px;
1581
}
1582
.nm-dialog-header-hbox {
1584
spacing: 10px;
1585
}
1586
.nm-dialog-airplane-box {
1588
spacing: 12px;
1589
}
1590
.nm-dialog-airplane-headline {
1592
font-weight: bold;
1593
text-align: center;
1594
}
1595
.nm-dialog-airplane-text {
1597
color: rgba(0, 0, 0, 0.87);
1598
}
1599
.nm-dialog-header-icon {
1601
icon-size: 32px;
1602
}
1603
.nm-dialog-scroll-view {
1605
border: none;
1606
}
1607
.nm-dialog-header {
1609
font-size: 15pt;
1610
font-weight: 500;
1611
}
1612
.nm-dialog-item {
1614
font-size: 1em;
1615
border-bottom: none;
1616
border-radius: 4px;
1617
padding: 12px;
1618
spacing: 20px;
1619
}
1620
.nm-dialog-item:hover, .nm-dialog-item:focus {
1622
background-color: rgba(0, 0, 0, 0.12);
1623
}
1624
.nm-dialog-item:active {
1626
background-color: rgba(0, 0, 0, 0.26);
1627
}
1628
.nm-dialog-item:selected {
1630
background-color: #4285F4;
1631
color: white;
1632
}
1633
.nm-dialog-icons {
1635
spacing: .5em;
1636
}
1637
.nm-dialog-icon {
1639
icon-size: 16px;
1640
}
1641
.no-networks-label {
1643
color: rgba(0, 0, 0, 0.38);
1644
}
1645
.no-networks-box {
1647
spacing: 12px;
1648
}
1649
/* OVERVIEW */
1651
#overview {
1652
spacing: 24px;
1653
}
1654
.overview-controls {
1656
padding-bottom: 32px;
1657
}
1658
.window-picker {
1660
-horizontal-spacing: 32px;
1661
-vertical-spacing: 32px;
1662
padding-left: 32px;
1663
padding-right: 32px;
1664
padding-bottom: 48px;
1665
}
1666
.window-picker.external-monitor {
1668
padding: 32px;
1669
}
1670
.window-clone-border {
1672
border: 4px solid rgba(255, 255, 255, 0.3);
1673
border-radius: 4px;
1674
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
1675
}
1676
.window-caption {
1678
spacing: 25px;
1679
color: white;
1680
background-color: transparent;
1681
border-radius: 4px;
1682
padding: 4px 8px;
1683
-shell-caption-spacing: 12px;
1684
}
1685
.window-caption:hover {
1687
background-color: rgba(255, 255, 255, 0.3);
1688
color: white;
1689
}
1690
.search-entry {
1692
width: 304px;
1693
padding: 0 8px;
1694
border-radius: 0;
1695
color: rgba(255, 255, 255, 0.5);
1696
selection-background-color: rgba(255, 255, 255, 0.3);
1697
selected-color: white;
1698
background-color: rgba(0, 0, 0, 0.01);
1699
border-color: transparent;
1700
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1701
}
1702
.search-entry:focus {
1704
border-color: transparent;
1705
box-shadow: inset 0 -2px white;
1706
padding: 0 8px;
1707
border-width: 0;
1708
color: white;
1709
}
1710
.search-entry .search-entry-icon {
1712
icon-size: 16px;
1713
padding: 0 0;
1714
color: rgba(255, 255, 255, 0.5);
1715
}
1716
.search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
1718
color: white;
1719
}
1720
#searchResultsBin {
1722
max-width: 1000px;
1723
}
1724
#searchResultsContent {
1726
padding-left: 20px;
1727
padding-right: 20px;
1728
spacing: 16px;
1729
}
1730
.search-section {
1732
spacing: 16px;
1733
}
1734
.search-section-content {
1736
spacing: 32px;
1737
}
1738
.list-search-results {
1740
spacing: 3px;
1741
}
1742
.search-section-separator {
1744
-gradient-height: 1px;
1745
-gradient-start: rgba(255, 255, 255, 0);
1746
-gradient-end: rgba(255, 255, 255, 0.4);
1747
-margin-horizontal: 1.5em;
1748
height: 1px;
1749
}
1750
.list-search-result-content {
1752
spacing: 12px;
1753
padding: 12px;
1754
}
1755
.list-search-result-title {
1757
font-size: 18pt;
1758
font-weight: 400;
1759
color: white;
1760
}
1761
.list-search-result-description {
1763
color: rgba(255, 255, 255, 0.7);
1764
}
1765
.search-provider-icon {
1767
padding: 15px;
1768
}
1769
.search-provider-icon-more {
1771
width: 16px;
1772
height: 16px;
1773
background-image: url("assets/more-results.svg");
1774
}
1775
/* DASHBOARD */
1777
#dash {
1778
font-size: 1em;
1779
color: white;
1780
background-color: rgba(255, 255, 255, 0.1);
1781
padding: 3px 0;
1782
border: none;
1783
border-left: 0px;
1784
border-radius: 0px 4px 4px 0px;
1785
}
1786
#dash:rtl {
1788
border-radius: 4px 0 0 4px;
1789
}
1790
#dash .placeholder {
1792
background-image: url("assets/dash-placeholder.svg");
1793
background-size: contain;
1794
height: 24px;
1795
}
1796
#dash .empty-dash-drop-target {
1798
width: 24px;
1799
height: 24px;
1800
}
1801
.dash-item-container > StWidget {
1803
padding: 3px 6px;
1804
}
1805
.dash-label {
1807
border-radius: 4px;
1808
padding: 7px 8px;
1809
color: rgba(0, 0, 0, 0.87);
1810
background-color: #FFFFFF;
1811
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1812
text-align: center;
1813
-x-offset: 8px;
1814
}
1815
/* App Vault/Grid */
1817
.icon-grid {
1818
spacing: 30px;
1819
-shell-grid-horizontal-item-size: 136px;
1820
-shell-grid-vertical-item-size: 136px;
1821
}
1822
.icon-grid .overview-icon {
1824
icon-size: 96px;
1825
}
1826
.app-view-controls {
1828
width: 320px;
1829
padding-bottom: 32px;
1830
}
1831
.app-view-control {
1833
padding: 0 16px;
1834
font-weight: bold;
1835
color: rgba(255, 255, 255, 0.7);
1836
}
1837
.app-view-control:hover {
1839
color: white;
1840
background-color: rgba(255, 255, 255, 0.12) !important;
1841
}
1842
.app-view-control:active {
1844
color: white;
1845
background-color: rgba(255, 255, 255, 0.3) !important;
1846
}
1847
.app-view-control:checked {
1849
color: white;
1850
background-color: rgba(0, 0, 0, 0.01) !important;
1851
box-shadow: inset 0 2px 0 white;
1852
}
1853
.app-view-control:first-child {
1855
border-right-width: 0;
1856
border-radius: 4px;
1857
}
1858
.app-view-control:first-child:checked {
1860
border-radius: 0;
1861
}
1862
.app-view-control:last-child {
1864
border-radius: 4px;
1865
}
1866
.app-view-control:last-child:checked {
1868
border-radius: 0;
1869
}
1870
.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
1872
.list-search-result:focus,
1873
.list-search-result:selected,
1874
.list-search-result:hover {
1875
background-color: rgba(255, 255, 255, 0.12);
1876
transition-duration: 0ms;
1877
}
1878
.search-provider-icon:active, .search-provider-icon:checked,
1880
.list-search-result:active,
1881
.list-search-result:checked {
1882
background-color: rgba(255, 255, 255, 0.3);
1883
transition-duration: 150ms;
1884
}
1885
.app-well-app:hover .overview-icon,
1887
.app-well-app:focus .overview-icon,
1888
.app-well-app:selected .overview-icon,
1889
.app-well-app.app-folder:hover .overview-icon,
1890
.app-well-app.app-folder:focus .overview-icon,
1891
.app-well-app.app-folder:selected .overview-icon,
1892
.show-apps:hover .overview-icon,
1893
.show-apps:focus .overview-icon,
1894
.show-apps:selected .overview-icon,
1895
.grid-search-result:hover .overview-icon,
1896
.grid-search-result:focus .overview-icon,
1897
.grid-search-result:selected .overview-icon {
1898
background-color: rgba(255, 255, 255, 0.12);
1899
transition-duration: 0ms;
1900
border-image: none;
1901
background-image: none;
1902
}
1903
.app-well-app:active .overview-icon,
1905
.app-well-app:checked .overview-icon,
1906
.app-well-app.app-folder:active .overview-icon,
1907
.app-well-app.app-folder:checked .overview-icon,
1908
.show-apps:active .overview-icon,
1909
.show-apps:checked .overview-icon,
1910
.grid-search-result:active .overview-icon,
1911
.grid-search-result:checked .overview-icon {
1912
background-color: rgba(255, 255, 255, 0.3);
1913
box-shadow: 0 0 transparent;
1914
transition-duration: 150ms;
1915
}
1916
.app-well-app-running-dot {
1918
width: 32px;
1919
height: 2px;
1920
background-color: white;
1921
margin-bottom: 0;
1922
}
1923
.search-provider-icon,
1925
.list-search-result, .app-well-app .overview-icon,
1926
.app-well-app.app-folder .overview-icon,
1927
.show-apps .overview-icon,
1928
.grid-search-result .overview-icon {
1929
color: white;
1930
border-radius: 4px;
1931
padding: 6px;
1932
border: none;
1933
transition-duration: 150ms;
1934
text-align: center;
1935
}
1936
.app-well-app.app-folder > .overview-icon {
1938
background-color: rgba(255, 255, 255, 0.1);
1939
}
1940
.show-apps .show-apps-icon {
1942
color: rgba(255, 255, 255, 0.7);
1943
}
1944
.show-apps:hover .show-apps-icon,
1946
.show-apps:active .show-apps-icon,
1947
.show-apps:checked .show-apps-icon,
1948
.show-apps:focus .show-apps-icon {
1949
color: white;
1950
transition-duration: 150ms;
1951
}
1952
.app-folder-popup {
1954
-arrow-border-radius: 4px;
1955
-arrow-background-color: rgba(255, 255, 255, 0.1);
1956
-arrow-base: 24px;
1957
-arrow-rise: 12px;
1958
}
1959
.app-folder-popup-bin {
1961
padding: 5px;
1962
}
1963
.app-folder-icon {
1965
padding: 5px;
1966
spacing-rows: 5px;
1967
spacing-columns: 5px;
1968
}
1969
.page-indicator {
1971
padding: 15px 20px;
1972
}
1973
.page-indicator .page-indicator-icon {
1975
width: 12px;
1976
height: 12px;
1977
border-radius: 12px;
1978
background-image: none;
1979
background-color: rgba(255, 255, 255, 0.3);
1980
}
1981
.page-indicator:hover .page-indicator-icon {
1983
background-image: none;
1984
background-color: rgba(255, 255, 255, 0.5);
1985
}
1986
.page-indicator:active .page-indicator-icon {
1988
background-image: none;
1989
background-color: rgba(255, 255, 255, 0.7);
1990
}
1991
.page-indicator:checked .page-indicator-icon {
1993
background-image: none;
1994
background-color: white;
1995
transition-duration: 0ms;
1996
}
1997
.page-indicator:checked:active {
1999
background-image: none;
2000
}
2001
.app-well-app > .overview-icon.overview-icon-with-label,
2003
.grid-search-result .overview-icon.overview-icon-with-label {
2004
padding: 10px 8px 5px 8px;
2005
spacing: 4px;
2006
}
2007
.workspace-thumbnails {
2009
visible-width: 32px;
2010
spacing: 12px;
2011
padding: 12px;
2012
border-radius: 4px 0 0 4px;
2013
}
2014
.workspace-thumbnails:rtl {
2016
border-radius: 0 4px 4px 0;
2017
}
2018
.workspace-thumbnails .placeholder {
2020
background-image: url("assets/dash-placeholder.svg");
2021
background-size: contain;
2022
height: 24px;
2023
}
2024
.workspace-thumbnail-indicator {
2026
border: 0 solid white;
2027
border-left-width: 2px;
2028
padding: 6px;
2029
border-radius: 0;
2030
}
2031
.search-display > StBoxLayout,
2033
.all-apps,
2034
.frequent-apps > StBoxLayout {
2035
padding: 0px 88px 10px 88px;
2036
}
2037
.workspace-thumbnails {
2039
color: white;
2040
background-color: rgba(255, 255, 255, 0.1);
2041
border: none;
2042
}
2043
.search-statustext, .no-frequent-applications-label {
2045
font-size: 45px;
2046
font-weight: 400;
2047
color: rgba(255, 255, 255, 0.5);
2048
}
2049
/* NOTIFICATIONS & MESSAGE TRAY */
2051
.url-highlighter {
2052
link-color: #4285F4;
2053
}
2054
.notification-banner {
2056
font-size: 1em;
2057
width: 34em;
2058
min-height: 64px;
2059
margin: 5px;
2060
border-radius: 4px;
2061
color: rgba(0, 0, 0, 0.87);
2062
background-color: #FFFFFF;
2063
border: none;
2064
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2065
}
2066
.notification-banner:hover {
2068
background-color: #FFFFFF;
2069
}
2070
.notification-banner:focus {
2072
background-color: #FFFFFF;
2073
}
2074
.notification-banner .notification-icon {
2076
padding: 5px;
2077
}
2078
.notification-banner .notification-content {
2080
padding: 5px;
2081
spacing: 5px;
2082
}
2083
.notification-banner .secondary-icon {
2085
icon-size: 1.14286em;
2086
}
2087
.notification-banner .notification-actions {
2089
background-color: transparent;
2090
padding-top: 0;
2091
padding: 6px;
2092
spacing: 6px;
2093
}
2094
.notification-banner .notification-button {
2096
min-height: 36px;
2097
padding: 0 8px;
2098
border-radius: 4px;
2099
background-color: transparent;
2100
color: rgba(0, 0, 0, 0.54);
2101
font-weight: 500;
2102
}
2103
.notification-banner .notification-button:first-child {
2105
border-radius: 4px;
2106
}
2107
.notification-banner .notification-button:last-child {
2109
border-radius: 4px;
2110
}
2111
.notification-banner .notification-button:hover, .notification-banner .notification-buttonfocus {
2113
background-color: rgba(0, 0, 0, 0.12);
2114
color: rgba(0, 0, 0, 0.87);
2115
}
2116
.notification-banner .notification-button:active {
2118
background-color: rgba(0, 0, 0, 0.26);
2119
color: rgba(0, 0, 0, 0.87);
2120
}
2121
.summary-source-counter {
2123
font-size: 1em;
2124
font-weight: bold;
2125
height: 1.6em;
2126
width: 1.6em;
2127
-shell-counter-overlap-x: 3px;
2128
-shell-counter-overlap-y: 3px;
2129
background-color: #4285F4;
2130
color: white;
2131
border: 2px solid white;
2132
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
2133
border-radius: 0.9em;
2134
}
2135
.secondary-icon {
2137
icon-size: 1.14286em;
2138
}
2139
.chat-body {
2141
spacing: 5px;
2142
}
2143
.chat-response {
2145
margin: 5px;
2146
}
2147
.chat-log-message {
2149
color: rgba(0, 0, 0, 0.87);
2150
}
2151
.chat-new-group {
2153
padding-top: 1em;
2154
}
2155
.chat-received {
2157
padding-left: 4px;
2158
}
2159
.chat-received:rtl {
2161
padding-left: 0px;
2162
padding-right: 4px;
2163
}
2164
.chat-sent {
2166
padding-left: 18pt;
2167
color: rgba(0, 0, 0, 0.54);
2168
}
2169
.chat-sent:rtl {
2171
padding-left: 0;
2172
padding-right: 18pt;
2173
}
2174
.chat-meta-message {
2176
padding-left: 4px;
2177
font-size: 9pt;
2178
font-weight: 400;
2179
color: rgba(0, 0, 0, 0.38);
2180
}
2181
.chat-meta-message:rtl {
2183
padding-left: 0;
2184
padding-right: 4px;
2185
}
2186
.hotplug-transient-box {
2188
spacing: 6px;
2189
padding: 2px 72px 2px 12px;
2190
}
2191
.hotplug-notification-item {
2193
padding: 2px 10px;
2194
}
2195
.hotplug-notification-item:focus {
2197
padding: 1px 71px 1px 11px;
2198
}
2199
.hotplug-notification-item-icon {
2201
icon-size: 24px;
2202
padding: 2px 5px;
2203
}
2204
.hotplug-resident-box {
2206
spacing: 8px;
2207
}
2208
.hotplug-resident-mount {
2210
spacing: 8px;
2211
border-radius: 4px;
2212
}
2213
.hotplug-resident-mount:hover {
2215
background-color: rgba(0, 0, 0, 0.12);
2216
}
2217
.hotplug-resident-mount:active {
2219
background-color: rgba(0, 0, 0, 0.26);
2220
}
2221
.hotplug-resident-mount-label {
2223
color: inherit;
2224
padding-left: 6px;
2225
}
2226
.hotplug-resident-mount-icon {
2228
icon-size: 24px;
2229
padding-left: 6px;
2230
}
2231
.hotplug-resident-eject-icon {
2233
icon-size: 16px;
2234
}
2235
.hotplug-resident-eject-button {
2237
padding: 7px;
2238
border-radius: 4px;
2239
color: rgba(0, 0, 0, 0.87);
2240
}
2241
/* Eeeky things */
2243
.legacy-tray {
2244
background-color: rgba(0, 0, 0, 0.6);
2245
color: white;
2246
border: none;
2247
border-bottom-width: 0;
2248
}
2249
.legacy-tray:ltr {
2251
border-radius: 0 4px 0 0;
2252
border-left-width: 0;
2253
}
2254
.legacy-tray:rtl {
2256
border-radius: 4px 0 0 0;
2257
border-right-width: 0;
2258
}
2259
.legacy-tray-handle,
2261
.legacy-tray-icon {
2262
padding: 6px;
2263
}
2264
.legacy-tray-handle StIcon,
2266
.legacy-tray-icon StIcon {
2267
icon-size: 24px;
2268
}
2269
.legacy-tray-handle:hover, .legacy-tray-handle:focus,
2271
.legacy-tray-icon:hover,
2272
.legacy-tray-icon:focus {
2273
background-color: rgba(255, 255, 255, 0.12);
2274
}
2275
.legacy-tray-handle:active,
2277
.legacy-tray-icon:active {
2278
background-color: rgba(255, 255, 255, 0.3);
2279
}
2280
.legacy-tray-icon-box {
2282
spacing: 12px;
2283
}
2284
.legacy-tray-icon-box:ltr {
2286
padding-left: 12px;
2287
}
2288
.legacy-tray-icon-box:rtl {
2290
padding-right: 12px;
2291
}
2292
.legacy-tray-icon-box StButton {
2294
width: 24px;
2295
height: 24px;
2296
}
2297
.magnifier-zoom-region {
2299
border: 2px solid #4285F4;
2300
}
2301
.magnifier-zoom-region.full-screen {
2303
border-width: 0;
2304
}
2305
/* On-screen Keyboard */
2307
#keyboard {
2308
background-color: rgba(0, 0, 0, 0.3);
2309
}
2310
.keyboard-layout {
2312
spacing: 10px;
2313
padding: 10px;
2314
}
2315
.keyboard-row {
2317
spacing: 15px;
2318
}
2319
.keyboard-key {
2321
min-height: 72px;
2322
min-width: 72px;
2323
font-size: 2em;
2324
font-weight: 500;
2325
border-radius: 4px;
2326
border: none;
2327
color: inherit;
2328
color: rgba(0, 0, 0, 0.62);
2329
background-color: #FAFAFA;
2330
border-color: transparent;
2331
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2332
text-shadow: none;
2333
icon-shadow: none;
2334
}
2335
.keyboard-key:focus {
2337
color: rgba(0, 0, 0, 0.87);
2338
text-shadow: none;
2339
icon-shadow: none;
2340
box-shadow: 0 0 transparent;
2341
}
2342
.keyboard-key:hover, .keyboard-key:checked {
2344
color: rgba(0, 0, 0, 0.87);
2345
background-color: #FAFAFA;
2346
border-color: transparent;
2347
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2348
text-shadow: none;
2349
icon-shadow: none;
2350
}
2351
.keyboard-key:active {
2353
color: rgba(0, 0, 0, 0.87);
2354
background-color: rgba(201, 201, 201, 0.9688);
2355
border-color: transparent;
2356
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2357
text-shadow: none;
2358
icon-shadow: none;
2359
}
2360
.keyboard-key:grayed {
2362
background-color: rgba(0, 0, 0, 0.3);
2363
color: white;
2364
border-color: rgba(0, 0, 0, 0.3);
2365
}
2366
.keyboard-subkeys {
2368
color: inherit;
2369
padding: 5px;
2370
-arrow-border-radius: 0;
2371
-arrow-background-color: transparent;
2372
-arrow-border-width: 0;
2373
-arrow-border-color: transparent;
2374
-arrow-base: 0;
2375
-arrow-rise: 0;
2376
-boxpointer-gap: 5px;
2377
background-color: #FFFFFF;
2378
border-radius: 4px;
2379
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2380
}
2381
.candidate-popup-content {
2383
padding: 8px;
2384
spacing: 0;
2385
}
2386
.candidate-index {
2388
padding: 0 4px 0 0;
2389
color: rgba(0, 0, 0, 0.38);
2390
}
2391
.candidate-box:selected .candidate-index {
2393
color: rgba(255, 255, 255, 0.5);
2394
}
2395
.candidate-box {
2397
transition-duration: 0ms;
2398
min-height: 32px;
2399
padding: 0 8px;
2400
border-radius: 4px;
2401
}
2402
.candidate-box:hover {
2404
background-color: rgba(0, 0, 0, 0.12);
2405
color: rgba(0, 0, 0, 0.87);
2406
}
2407
.candidate-box:active {
2409
background-color: rgba(0, 0, 0, 0.26);
2410
color: rgba(0, 0, 0, 0.87);
2411
}
2412
.candidate-box:selected {
2414
background-color: #4285F4;
2415
color: white;
2416
}
2417
.candidate-page-button-box {
2419
height: 32px;
2420
}
2421
.vertical .candidate-page-button-box {
2423
padding-top: 0;
2424
}
2425
.horizontal .candidate-page-button-box {
2427
padding-left: 0;
2428
}
2429
.candidate-page-button {
2431
min-width: 32px;
2432
min-height: 32px;
2433
padding: 0;
2434
}
2435
.candidate-page-button-previous {
2437
border-radius: 4px;
2438
border-right-width: 0;
2439
}
2440
.candidate-page-button-next {
2442
border-radius: 4px;
2443
}
2444
.candidate-page-button-icon {
2446
icon-size: 1.14286em;
2447
}
2448
/* Auth Dialogs & Screen Shield */
2450
.framed-user-icon {
2451
background-size: contain;
2452
border: none;
2453
color: white;
2454
border-radius: 4px;
2455
}
2456
.framed-user-icon:hover {
2458
border-color: white;
2459
color: white;
2460
}
2461
.login-dialog-banner-view {
2463
padding-top: 24px;
2464
max-width: 23em;
2465
}
2466
.login-dialog {
2468
border: none;
2469
background-color: transparent;
2470
}
2471
.login-dialog StEntry {
2473
color: white;
2474
selection-background-color: rgba(255, 255, 255, 0.3);
2475
selected-color: white;
2476
background-color: rgba(0, 0, 0, 0.01);
2477
border-color: transparent;
2478
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2479
}
2480
.login-dialog StEntry:focus {
2482
border-color: transparent;
2483
box-shadow: inset 0 -2px white;
2484
}
2485
.login-dialog StEntry:insensitive {
2487
color: rgba(0, 0, 0, 0.38);
2488
border-color: transparent;
2489
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
2490
color: rgba(255, 255, 255, 0.5);
2491
}
2492
.login-dialog .modal-dialog-button-box {
2494
spacing: 3px;
2495
}
2496
.login-dialog .modal-dialog-button {
2498
padding: 0 16px;
2499
color: rgba(255, 255, 255, 0.7);
2500
background-color: transparent;
2501
border-color: transparent;
2502
box-shadow: 0 0 transparent;
2503
text-shadow: none;
2504
icon-shadow: none;
2505
}
2506
.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus {
2508
color: white;
2509
background-color: rgba(255, 255, 255, 0.12);
2510
border-color: transparent;
2511
box-shadow: 0 0 transparent;
2512
text-shadow: none;
2513
icon-shadow: none;
2514
}
2515
.login-dialog .modal-dialog-button:active {
2517
color: white;
2518
background-color: rgba(255, 255, 255, 0.3);
2519
border-color: transparent;
2520
box-shadow: 0 0 transparent;
2521
text-shadow: none;
2522
icon-shadow: none;
2523
}
2524
.login-dialog .modal-dialog-button:insensitive {
2526
color: rgba(255, 255, 255, 0.3);
2527
background-color: transparent;
2528
border-color: transparent;
2529
box-shadow: 0 0 transparent;
2530
text-shadow: none;
2531
icon-shadow: none;
2532
}
2533
.login-dialog .modal-dialog-button:default {
2535
color: white;
2536
background-color: #01A299;
2537
border-color: transparent;
2538
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2539
text-shadow: none;
2540
icon-shadow: none;
2541
}
2542
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
2544
color: white;
2545
background-color: #01A299;
2546
border-color: transparent;
2547
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2548
text-shadow: none;
2549
icon-shadow: none;
2550
}
2551
.login-dialog .modal-dialog-button:default:active {
2553
color: white;
2554
background-color: #3eb8b1;
2555
border-color: transparent;
2556
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2557
text-shadow: none;
2558
icon-shadow: none;
2559
}
2560
.login-dialog .modal-dialog-button:default:insensitive {
2562
color: rgba(255, 255, 255, 0.5);
2563
background-color: rgba(255, 255, 255, 0.12);
2564
border-color: transparent;
2565
box-shadow: 0 0 transparent;
2566
text-shadow: none;
2567
icon-shadow: none;
2568
}
2569
.login-dialog-logo-bin {
2571
padding: 24px 0px;
2572
}
2573
.login-dialog-banner {
2575
color: rgba(255, 255, 255, 0.7);
2576
}
2577
.login-dialog-button-box {
2579
spacing: 5px;
2580
}
2581
.login-dialog-message-warning {
2583
color: #FBBC05;
2584
}
2585
.login-dialog-message-hint {
2587
padding-top: 0;
2588
padding-bottom: 20px;
2589
}
2590
.login-dialog-user-selection-box {
2592
padding: 100px 0px;
2593
}
2594
.login-dialog-user-selection-box .login-dialog-not-listed-label {
2596
padding-left: 2px;
2597
}
2598
.login-dialog-not-listed-button:focus .login-dialog-user-selection-box .login-dialog-not-listed-label,
2600
.login-dialog-not-listed-button:hover .login-dialog-user-selection-box .login-dialog-not-listed-label {
2601
color: white;
2602
}
2603
.login-dialog-not-listed-label {
2605
font-size: 1em;
2606
font-weight: bold;
2607
color: rgba(255, 255, 255, 0.7);
2608
padding-top: 1em;
2609
}
2610
.login-dialog-not-listed-label:hover {
2612
color: white;
2613
}
2614
.login-dialog-not-listed-label:focus {
2616
background-color: rgba(255, 255, 255, 0.12);
2617
}
2618
.login-dialog-user-list-view {
2620
-st-vfade-offset: 1em;
2621
}
2622
.login-dialog-user-list {
2624
spacing: 12px;
2625
padding: .2em;
2626
width: 23em;
2627
}
2628
.login-dialog-user-list:expanded .login-dialog-user-list-item:focus {
2630
background-color: rgba(255, 255, 255, 0.12);
2631
color: white;
2632
}
2633
.login-dialog-user-list:expanded .login-dialog-user-list-item:hover {
2635
background-color: rgba(255, 255, 255, 0.12);
2636
color: white;
2637
}
2638
.login-dialog-user-list:expanded .login-dialog-user-list-item:active {
2640
background-color: rgba(255, 255, 255, 0.3);
2641
color: white;
2642
}
2643
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
2645
border-right: 2px solid white;
2646
}
2647
.login-dialog-user-list-item {
2649
border-radius: 4px;
2650
padding: 4px 4px 0;
2651
color: rgba(255, 255, 255, 0.7);
2652
}
2653
.login-dialog-user-list-item:ltr {
2655
padding-right: 1em;
2656
}
2657
.login-dialog-user-list-item:rtl {
2659
padding-left: 1em;
2660
}
2661
.login-dialog-user-list-item:hover {
2663
background-color: rgba(255, 255, 255, 0.12);
2664
color: white;
2665
}
2666
.login-dialog-user-list-item:active {
2668
background-color: rgba(255, 255, 255, 0.3);
2669
color: white;
2670
}
2671
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
2673
height: 2px;
2674
margin: 2px 0 0 0;
2675
background-color: white;
2676
}
2677
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
2679
background-color: white;
2680
}
2681
.login-dialog-username,
2683
.user-widget-label {
2684
color: white;
2685
font-size: 15pt;
2686
font-weight: 500;
2687
text-align: left;
2688
padding-left: 15px;
2689
}
2690
.user-widget-label:ltr {
2692
padding-left: 18px;
2693
}
2694
.user-widget-label:rtl {
2696
padding-right: 18px;
2697
}
2698
.login-dialog-prompt-layout {
2700
padding-top: 24px;
2701
padding-bottom: 12px;
2702
spacing: 8px;
2703
width: 23em;
2704
}
2705
.login-dialog-prompt-label {
2707
color: rgba(255, 255, 255, 0.5);
2708
font-size: 1em;
2709
padding-top: 1em;
2710
}
2711
.login-dialog-session-list-button StIcon {
2713
icon-size: 1.25em;
2714
}
2715
.login-dialog-session-list-button {
2717
color: rgba(255, 255, 255, 0.7);
2718
}
2719
.login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
2721
color: white;
2722
}
2723
.login-dialog-session-list-button:active {
2725
color: white;
2726
}
2727
.screen-shield-arrows {
2729
padding-bottom: 3em;
2730
}
2731
.screen-shield-arrows Gjs_Arrow {
2733
color: white;
2734
width: 80px;
2735
height: 48px;
2736
-arrow-thickness: 12px;
2737
-arrow-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2738
}
2739
.screen-shield-clock {
2741
color: white;
2742
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2743
font-weight: normal;
2744
text-align: center;
2745
padding-bottom: 1.5em;
2746
}
2747
.screen-shield-clock-time {
2749
font-size: 112px;
2750
font-weight: 300;
2751
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2752
}
2753
.screen-shield-clock-date {
2755
font-size: 45px;
2756
font-weight: 400;
2757
}
2758
.screen-shield-notifications-container {
2760
spacing: 6px;
2761
width: 30em;
2762
background-color: transparent;
2763
max-height: 500px;
2764
}
2765
.screen-shield-notifications-container .summary-notification-stack-scrollview {
2767
padding-top: 0;
2768
padding-bottom: 0;
2769
}
2770
.screen-shield-notifications-container .notification,
2772
.screen-shield-notifications-container .screen-shield-notification-source {
2773
padding: 8px;
2774
border: none;
2775
background-color: rgba(0, 0, 0, 0.3);
2776
color: white;
2777
border-radius: 4px;
2778
}
2779
.screen-shield-notifications-container .notification {
2781
margin-right: 16px;
2782
}
2783
.screen-shield-notification-label {
2785
min-height: 22px;
2786
padding: 2px 0px 0px 16px;
2787
font-weight: bold;
2788
}
2789
.screen-shield-notification-count-text {
2791
min-height: 22px;
2792
padding: 2px 0px 0px 16px;
2793
color: rgba(255, 255, 255, 0.7);
2794
}
2795
#panel.lock-screen {
2797
background-color: rgba(0, 0, 0, 0.3);
2798
}
2799
.screen-shield-background {
2801
background: black;
2802
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
2803
}
2804
#lockDialogGroup {
2806
background: #303030;
2807
background-size: cover;
2808
}
2809
#LookingGlassDialog {
2811
background-color: #FFFFFF;
2812
spacing: 4px;
2813
padding: 0;
2814
border: none;
2815
border-radius: 4px;
2816
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2817
}
2818
#LookingGlassDialog > #Toolbar {
2820
padding: 0 8px;
2821
border: none;
2822
border-radius: 0;
2823
background-color: rgba(255, 255, 255, 0.01);
2824
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
2825
}
2826
#LookingGlassDialog .labels {
2828
spacing: 0;
2829
}
2830
#LookingGlassDialog .notebook-tab {
2832
-natural-hpadding: 12px;
2833
-minimum-hpadding: 6px;
2834
font-weight: bold;
2835
color: rgba(0, 0, 0, 0.38);
2836
transition-duration: 150ms;
2837
padding-left: 16px;
2838
padding-right: 16px;
2839
min-height: 36px;
2840
padding: 0 32px;
2841
}
2842
#LookingGlassDialog .notebook-tab:hover {
2844
box-shadow: inset 0 -2px 0px rgba(0, 0, 0, 0.26);
2845
color: rgba(0, 0, 0, 0.87);
2846
text-shadow: none;
2847
}
2848
#LookingGlassDialog .notebook-tab:selected {
2850
border-bottom-width: 0;
2851
border-color: transparent;
2852
background-color: rgba(255, 255, 255, 0.01);
2853
box-shadow: inset 0 -2px 0px #4285F4;
2854
color: rgba(0, 0, 0, 0.87);
2855
text-shadow: none;
2856
}
2857
#LookingGlassDialog StBoxLayout#EvalBox {
2859
padding: 4px;
2860
spacing: 4px;
2861
}
2862
#LookingGlassDialog StBoxLayout#ResultsArea {
2864
spacing: 4px;
2865
}
2866
.lg-dialog StEntry {
2868
selection-background-color: #4285F4;
2869
selected-color: white;
2870
}
2871
.lg-dialog .shell-link {
2873
color: #4285F4;
2874
}
2875
.lg-dialog .shell-link:hover {
2877
color: #4285F4;
2878
}
2879
.lg-completions-text {
2881
font-size: 1em;
2882
font-style: italic;
2883
}
2884
.lg-obj-inspector-title {
2886
spacing: 4px;
2887
}
2888
.lg-obj-inspector-button {
2890
min-height: 36px;
2891
padding: 0 16px;
2892
border: none;
2893
border-radius: 4px;
2894
font-size: 10.5pt;
2895
font-weight: 500;
2896
color: rgba(0, 0, 0, 0.54);
2897
background-color: transparent;
2898
border-color: transparent;
2899
box-shadow: 0 0 transparent;
2900
text-shadow: none;
2901
icon-shadow: none;
2902
}
2903
.lg-obj-inspector-button:hover {
2905
color: rgba(0, 0, 0, 0.87);
2906
background-color: rgba(0, 0, 0, 0.12);
2907
border-color: transparent;
2908
box-shadow: 0 0 transparent;
2909
text-shadow: none;
2910
icon-shadow: none;
2911
}
2912
.lg-obj-inspector-button:active {
2914
color: rgba(0, 0, 0, 0.87);
2915
background-color: rgba(0, 0, 0, 0.26);
2916
border-color: transparent;
2917
box-shadow: 0 0 transparent;
2918
text-shadow: none;
2919
icon-shadow: none;
2920
}
2921
.lg-obj-inspector-button:insensitive {
2923
color: rgba(0, 0, 0, 0.26);
2924
background-color: transparent;
2925
border-color: transparent;
2926
box-shadow: 0 0 transparent;
2927
text-shadow: none;
2928
icon-shadow: none;
2929
}
2930
.lg-obj-inspector-button:focus {
2932
color: rgba(0, 0, 0, 0.87);
2933
text-shadow: none;
2934
icon-shadow: none;
2935
box-shadow: 0 0 transparent;
2936
}
2937
.lg-obj-inspector-button:hover {
2939
border: none;
2940
}
2941
#lookingGlassExtensions {
2943
padding: 4px;
2944
}
2945
.lg-extensions-list {
2947
padding: 4px;
2948
spacing: 6px;
2949
}
2950
.lg-extension {
2952
border: none;
2953
border-radius: 4px;
2954
padding: 4px;
2955
}
2956
.lg-extension-name {
2958
font-size: 18pt;
2959
font-weight: 400;
2960
}
2961
.lg-extension-meta {
2963
spacing: 6px;
2964
}
2965
#LookingGlassPropertyInspector {
2967
background: #FFFFFF;
2968
border: none;
2969
border-radius: 4px;
2970
padding: 6px;
2971
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2972
}
2973
/* Dash to Dock */
2975
#dashtodockContainer #dash {
2976
background-color: rgba(0, 0, 0, 0.6);
2977
}
2978
#dashtodockContainer:overview #dash {
2980
background-color: rgba(255, 255, 255, 0.1);
2981
}
2982
#dashtodockContainer.extended:overview #dash {
2984
background-color: transparent;
2985
}
2986
#dashtodockContainer.left #dash,
2988
#dashtodockContainer.right #dash {
2989
padding: 3px 0;
2990
}
2991
#dashtodockContainer.top #dash,
2993
#dashtodockContainer.bottom #dash {
2994
padding: 0 3px;
2995
}
2996
#dashtodockContainer.extended #dash {
2998
padding: 0;
2999
border-radius: 0;
3000
}
3001
#dashtodockContainer.left .dash-item-container > StWidget,
3003
#dashtodockContainer.right .dash-item-container > StWidget,
3004
#dashtodockContainer.extended.left .dash-item-container > StWidget,
3005
#dashtodockContainer.extended.right .dash-item-container > StWidget {
3006
padding: 3px 6px;
3007
}
3008
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
3010
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
3011
padding: 6px 6px 3px 6px;
3012
}
3013
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
3015
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
3016
padding: 3px 6px 6px 6px;
3017
}
3018
#dashtodockContainer.top .dash-item-container > StWidget,
3020
#dashtodockContainer.bottom .dash-item-container > StWidget,
3021
#dashtodockContainer.extended.top .dash-item-container > StWidget,
3022
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
3023
padding: 6px 3px;
3024
}
3025
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
3027
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
3028
padding: 6px 3px 6px 6px;
3029
}
3030
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
3032
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
3033
padding: 6px 6px 6px 3px;
3034
}
3035
#dashtodockContainer .app-well-app-running-dot {
3037
background-color: transparent;
3038
}
3039
#dashtodockContainer .dash-item-container > StWidget {
3041
background-size: cover;
3042
}
3043
#dashtodockContainer.left .dash-item-container > StWidget.running1 {
3045
background-image: url("assets/dash/left-running1.svg");
3046
}
3047
#dashtodockContainer.left .dash-item-container > StWidget.running1.focused {
3049
background-image: url("assets/dash/left-running1-focused.svg");
3050
}
3051
#dashtodockContainer.left .dash-item-container > StWidget.running2 {
3053
background-image: url("assets/dash/left-running2.svg");
3054
}
3055
#dashtodockContainer.left .dash-item-container > StWidget.running2.focused {
3057
background-image: url("assets/dash/left-running2-focused.svg");
3058
}
3059
#dashtodockContainer.left .dash-item-container > StWidget.running3 {
3061
background-image: url("assets/dash/left-running3.svg");
3062
}
3063
#dashtodockContainer.left .dash-item-container > StWidget.running3.focused {
3065
background-image: url("assets/dash/left-running3-focused.svg");
3066
}
3067
#dashtodockContainer.left .dash-item-container > StWidget.running4 {
3069
background-image: url("assets/dash/left-running4.svg");
3070
}
3071
#dashtodockContainer.left .dash-item-container > StWidget.running4.focused {
3073
background-image: url("assets/dash/left-running4-focused.svg");
3074
}
3075
#dashtodockContainer.right .dash-item-container > StWidget.running1 {
3077
background-image: url("assets/dash/right-running1.svg");
3078
}
3079
#dashtodockContainer.right .dash-item-container > StWidget.running1.focused {
3081
background-image: url("assets/dash/right-running1-focused.svg");
3082
}
3083
#dashtodockContainer.right .dash-item-container > StWidget.running2 {
3085
background-image: url("assets/dash/right-running2.svg");
3086
}
3087
#dashtodockContainer.right .dash-item-container > StWidget.running2.focused {
3089
background-image: url("assets/dash/right-running2-focused.svg");
3090
}
3091
#dashtodockContainer.right .dash-item-container > StWidget.running3 {
3093
background-image: url("assets/dash/right-running3.svg");
3094
}
3095
#dashtodockContainer.right .dash-item-container > StWidget.running3.focused {
3097
background-image: url("assets/dash/right-running3-focused.svg");
3098
}
3099
#dashtodockContainer.right .dash-item-container > StWidget.running4 {
3101
background-image: url("assets/dash/right-running4.svg");
3102
}
3103
#dashtodockContainer.right .dash-item-container > StWidget.running4.focused {
3105
background-image: url("assets/dash/right-running4-focused.svg");
3106
}
3107
#dashtodockContainer.top .dash-item-container > StWidget.running1 {
3109
background-image: url("assets/dash/top-running1.svg");
3110
}
3111
#dashtodockContainer.top .dash-item-container > StWidget.running1.focused {
3113
background-image: url("assets/dash/top-running1-focused.svg");
3114
}
3115
#dashtodockContainer.top .dash-item-container > StWidget.running2 {
3117
background-image: url("assets/dash/top-running2.svg");
3118
}
3119
#dashtodockContainer.top .dash-item-container > StWidget.running2.focused {
3121
background-image: url("assets/dash/top-running2-focused.svg");
3122
}
3123
#dashtodockContainer.top .dash-item-container > StWidget.running3 {
3125
background-image: url("assets/dash/top-running3.svg");
3126
}
3127
#dashtodockContainer.top .dash-item-container > StWidget.running3.focused {
3129
background-image: url("assets/dash/top-running3-focused.svg");
3130
}
3131
#dashtodockContainer.top .dash-item-container > StWidget.running4 {
3133
background-image: url("assets/dash/top-running4.svg");
3134
}
3135
#dashtodockContainer.top .dash-item-container > StWidget.running4.focused {
3137
background-image: url("assets/dash/top-running4-focused.svg");
3138
}
3139
#dashtodockContainer.bottom .dash-item-container > StWidget.running1 {
3141
background-image: url("assets/dash/bottom-running1.svg");
3142
}
3143
#dashtodockContainer.bottom .dash-item-container > StWidget.running1.focused {
3145
background-image: url("assets/dash/bottom-running1-focused.svg");
3146
}
3147
#dashtodockContainer.bottom .dash-item-container > StWidget.running2 {
3149
background-image: url("assets/dash/bottom-running2.svg");
3150
}
3151
#dashtodockContainer.bottom .dash-item-container > StWidget.running2.focused {
3153
background-image: url("assets/dash/bottom-running2-focused.svg");
3154
}
3155
#dashtodockContainer.bottom .dash-item-container > StWidget.running3 {
3157
background-image: url("assets/dash/bottom-running3.svg");
3158
}
3159
#dashtodockContainer.bottom .dash-item-container > StWidget.running3.focused {
3161
background-image: url("assets/dash/bottom-running3-focused.svg");
3162
}
3163
#dashtodockContainer.bottom .dash-item-container > StWidget.running4 {
3165
background-image: url("assets/dash/bottom-running4.svg");
3166
}
3167
#dashtodockContainer.bottom .dash-item-container > StWidget.running4.focused {
3169
background-image: url("assets/dash/bottom-running4-focused.svg");
3170
}
3171
/* Simple Dock */
3173
#dash:desktop {
3174
background-color: rgba(0, 0, 0, 0.6);
3175
}
3176
/* GPaste */
3178
.popup-menu .search-entry {
3179
color: rgba(0, 0, 0, 0.87);
3180
selection-background-color: #4285F4;
3181
selected-color: white;
3182
background-color: rgba(255, 255, 255, 0.01);
3183
border-color: transparent;
3184
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
3185
}
3186
.popup-menu .search-entry:focus {
3188
border-color: transparent;
3189
box-shadow: inset 0 -2px #4285F4;
3190
color: rgba(0, 0, 0, 0.87);
3191
}
3192
.popup-menu .search-entry .search-entry-icon {
3194
color: rgba(0, 0, 0, 0.38);
3195
}
3196
.popup-menu .search-entry:hover .search-entry-icon, .popup-menu .search-entry:focus .search-entry-icon {
3198
color: rgba(0, 0, 0, 0.87);
3199
}
3200