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
.mount-dialog-subject,
387
.end-session-dialog-subject {
388
font-size: 15pt;
389
font-weight: 500;
390
}
391
/* Message Dialog */
393
.message-dialog-main-layout {
394
padding: 12px 20px 0;
395
spacing: 12px;
396
}
397
.message-dialog-content {
399
max-width: 28em;
400
spacing: 20px;
401
}
402
.message-dialog-icon {
404
min-width: 48px;
405
icon-size: 48px;
406
}
407
.message-dialog-title {
409
font-weight: bold;
410
}
411
.message-dialog-subtitle {
413
color: rgba(0, 0, 0, 0.54);
414
font-weight: bold;
415
}
416
/* End Session Dialog */
418
.end-session-dialog {
419
spacing: 42px;
420
border: none;
421
}
422
.end-session-dialog-list {
424
padding-top: 20px;
425
}
426
.end-session-dialog-layout {
428
padding-left: 17px;
429
}
430
.end-session-dialog-layout:rtl {
432
padding-right: 17px;
433
}
434
.end-session-dialog-description {
436
width: 28em;
437
padding-bottom: 10px;
438
}
439
.end-session-dialog-description:rtl {
441
text-align: right;
442
}
443
.end-session-dialog-warning {
445
width: 28em;
446
color: #FBBC05;
447
padding-top: 6px;
448
}
449
.end-session-dialog-warning:rtl {
451
text-align: right;
452
}
453
.end-session-dialog-logout-icon {
455
border-radius: 5px;
456
width: 48px;
457
height: 48px;
458
background-size: contain;
459
}
460
.end-session-dialog-shutdown-icon {
462
color: rgba(0, 0, 0, 0.38);
463
width: 48px;
464
height: 48px;
465
}
466
.end-session-dialog-inhibitor-layout {
468
spacing: 16px;
469
max-height: 200px;
470
padding-right: 65px;
471
padding-left: 65px;
472
}
473
.end-session-dialog-session-list,
475
.end-session-dialog-app-list {
476
spacing: 1em;
477
}
478
.end-session-dialog-list-header {
480
font-weight: bold;
481
}
482
.end-session-dialog-list-header:rtl {
484
text-align: right;
485
}
486
.end-session-dialog-app-list-item,
488
.end-session-dialog-session-list-item {
489
spacing: 1em;
490
}
491
.end-session-dialog-app-list-item-name,
493
.end-session-dialog-session-list-item-name {
494
font-weight: bold;
495
}
496
.end-session-dialog-app-list-item-description {
498
color: rgba(0, 0, 0, 0.38);
499
font-size: 1em;
500
}
501
/* ShellMountOperation Dialogs */
503
.shell-mount-operation-icon {
504
icon-size: 48px;
505
}
506
.mount-dialog {
508
spacing: 24px;
509
}
510
.mount-dialog .message-dialog-title {
512
padding-top: 10px;
513
padding-left: 17px;
514
padding-bottom: 6px;
515
max-width: 34em;
516
}
517
.mount-dialog .message-dialog-title:rtl {
519
padding-left: 0px;
520
padding-right: 17px;
521
}
522
.mount-dialog .message-dialog-body {
524
padding-left: 17px;
525
width: 28em;
526
}
527
.mount-dialog .message-dialog-body:rtl {
529
padding-left: 0px;
530
padding-right: 17px;
531
}
532
.mount-dialog-app-list {
534
max-height: 200px;
535
padding-top: 24px;
536
padding-left: 49px;
537
padding-right: 32px;
538
}
539
.mount-dialog-app-list:rtl {
541
padding-right: 49px;
542
padding-left: 32px;
543
}
544
.mount-dialog-app-list-item {
546
color: rgba(0, 0, 0, 0.87);
547
}
548
.mount-dialog-app-list-item:hover {
550
color: rgba(0, 0, 0, 0.87);
551
}
552
.mount-dialog-app-list-item:ltr {
554
padding-right: 1em;
555
}
556
.mount-dialog-app-list-item:rtl {
558
padding-left: 1em;
559
}
560
.mount-dialog-app-list-item-icon:ltr {
562
padding-right: 17px;
563
}
564
.mount-dialog-app-list-item-icon:rtl {
566
padding-left: 17px;
567
}
568
.mount-dialog-app-list-item-name {
570
font-size: 1em;
571
}
572
/* Password or Authentication Dialog */
574
.prompt-dialog {
575
width: 34em;
576
border: none;
577
}
578
.prompt-dialog .message-dialog-main-layout {
580
spacing: 24px;
581
padding: 10px;
582
}
583
.prompt-dialog .message-dialog-content {
585
spacing: 16px;
586
}
587
.prompt-dialog .message-dialog-title {
589
font-size: 15pt;
590
font-weight: 500;
591
color: rgba(0, 0, 0, 0.87);
592
}
593
.prompt-dialog-description:rtl {
595
text-align: right;
596
}
597
.prompt-dialog-password-box {
599
spacing: 1em;
600
padding-bottom: 1em;
601
}
602
.prompt-dialog-error-label {
604
font-size: 1em;
605
color: #EA4335;
606
padding-bottom: 8px;
607
}
608
.prompt-dialog-info-label {
610
font-size: 1em;
611
padding-bottom: 8px;
612
}
613
.hidden {
615
color: rgba(0, 0, 0, 0);
616
}
617
.prompt-dialog-null-label {
619
font-size: 1em;
620
padding-bottom: 8px;
621
}
622
/* Polkit Dialog */
624
.polkit-dialog-user-layout {
625
padding-left: 10px;
626
spacing: 10px;
627
}
628
.polkit-dialog-user-layout:rtl {
630
padding-left: 0px;
631
padding-right: 10px;
632
}
633
.polkit-dialog-user-root-label {
635
color: #FBBC05;
636
}
637
.polkit-dialog-user-icon {
639
border-radius: 5px;
640
background-size: contain;
641
width: 48px;
642
height: 48px;
643
}
644
/* Audio selection dialog */
646
.audio-device-selection-dialog {
647
spacing: 30px;
648
}
649
.audio-selection-content {
651
spacing: 20px;
652
padding: 24px;
653
}
654
.audio-selection-title {
656
font-weight: bold;
657
text-align: center;
658
}
659
.audio-selection-box {
661
spacing: 20px;
662
}
663
.audio-selection-device {
665
border: 1px solid rgba(0, 0, 0, 0.12);
666
border-radius: 4px;
667
}
668
.audio-selection-device:active, .audio-selection-device:hover, .audio-selection-device:focus {
670
background-color: #4285F4;
671
}
672
.audio-selection-device-box {
674
padding: 20px;
675
spacing: 20px;
676
}
677
.audio-selection-device-icon {
679
icon-size: 64px;
680
}
681
/* Access Dialog */
683
.access-dialog {
684
spacing: 30px;
685
}
686
/* Geolocation Dialog */
688
.geolocation-dialog {
689
spacing: 30px;
690
}
691
/* Extension Dialog */
693
.extension-dialog .message-dialog-main-layout {
694
spacing: 24px;
695
padding: 10px;
696
}
697
.extension-dialog .message-dialog-title {
699
color: rgba(0, 0, 0, 0.54);
700
}
701
/* Inhibit-Shortcuts Dialog */
703
.inhibit-shortcuts-dialog {
704
spacing: 30px;
705
}
706
/* Network Agent Dialog */
708
.network-dialog-secret-table {
709
spacing-rows: 15px;
710
spacing-columns: 1em;
711
}
712
.keyring-dialog-control-table {
714
spacing-rows: 15px;
715
spacing-columns: 1em;
716
}
717
/* Popovers/Menus */
719
.popup-menu {
720
min-width: 200px;
721
}
722
.popup-menu .popup-sub-menu {
724
background-color: #EEEEEE;
725
box-shadow: 0 0 transparent;
726
}
727
.popup-menu .popup-menu-content {
729
padding: 8px 0;
730
}
731
.popup-menu .popup-menu-item {
733
spacing: 8px;
734
transition-duration: 100ms;
735
}
736
.popup-menu .popup-menu-item:ltr {
738
padding: 0.4em 24px 0.4em 0;
739
}
740
.popup-menu .popup-menu-item:rtl {
742
padding: 0.4em 0 0.4em 24px;
743
}
744
.popup-menu .popup-menu-item:checked {
746
background-color: #4285F4;
747
color: white;
748
box-shadow: 0 0 transparent;
749
font-weight: normal;
750
}
751
.popup-menu .popup-menu-item:checked.selected {
753
background-color: #5994f5;
754
color: white;
755
}
756
.popup-menu .popup-menu-item:checked:active {
758
background-color: #6fa2f7;
759
color: white !important;
760
}
761
.popup-menu .popup-menu-item:checked:insensitive {
763
color: rgba(255, 255, 255, 0.5);
764
}
765
.popup-menu .popup-menu-item.selected {
767
background-color: rgba(0, 0, 0, 0.12);
768
color: rgba(0, 0, 0, 0.87);
769
transition-duration: 0ms;
770
}
771
.popup-menu .popup-menu-item:active {
773
background-color: rgba(0, 0, 0, 0.26);
774
color: rgba(0, 0, 0, 0.87);
775
transition-duration: 150ms;
776
}
777
.popup-menu .popup-menu-item.selected:active {
779
color: rgba(0, 0, 0, 0.87);
780
}
781
.popup-menu .popup-menu-item:insensitive {
783
color: rgba(0, 0, 0, 0.38);
784
}
785
.popup-menu .popup-inactive-menu-item {
787
color: rgba(0, 0, 0, 0.87);
788
}
789
.popup-menu .popup-inactive-menu-item:insensitive {
791
color: rgba(0, 0, 0, 0.38);
792
}
793
.popup-menu.panel-menu {
795
-boxpointer-gap: 4px;
796
margin-bottom: 1.75em;
797
}
798
.popup-menu-ornament {
800
text-align: right;
801
width: 16px;
802
height: 16px;
803
}
804
.popup-menu-boxpointer,
806
.candidate-popup-boxpointer {
807
-arrow-border-radius: 0;
808
-arrow-background-color: transparent;
809
-arrow-border-width: 0;
810
-arrow-border-color: transparent;
811
-arrow-base: 0;
812
-arrow-rise: 0;
813
-arrow-box-shadow: none;
814
margin: 5px 8px 8px;
815
background-color: #FFFFFF;
816
border-radius: 4px;
817
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
818
}
819
.popup-separator-menu-item {
821
height: 1px;
822
margin: 8px 40px;
823
background-color: transparent;
824
border-color: rgba(0, 0, 0, 0.12);
825
border-bottom-width: 1px;
826
border-bottom-style: solid;
827
}
828
.background-menu {
830
-boxpointer-gap: 4px;
831
-arrow-rise: 0;
832
}
833
/* fallback menu
835
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
836
app menu inside the main app window itself rather than the top bar
837
*/
838
/* OSD */
839
.osd-window {
840
text-align: center;
841
font-weight: bold;
842
spacing: 1em;
843
margin: 32px;
844
min-width: 64px;
845
min-height: 64px;
846
}
847
.osd-window .osd-monitor-label {
849
font-size: 45px;
850
font-weight: 400;
851
}
852
.osd-window .level {
854
height: 8px;
855
border-radius: 0;
856
background-color: rgba(0, 0, 0, 0.12);
857
color: rgba(0, 0, 0, 0.87);
858
}
859
.osd-window .level-bar {
861
background-color: #4285F4;
862
border-radius: 0;
863
}
864
/* Pad OSD */
866
.pad-osd-window {
867
padding: 32px;
868
background-color: rgba(0, 0, 0, 0.6);
869
}
870
.pad-osd-window .pad-osd-title-box {
872
spacing: 12px;
873
}
874
.pad-osd-window .pad-osd-title-menu-box {
876
spacing: 6px;
877
}
878
.combo-box-label {
880
width: 15em;
881
}
882
/* App Switcher */
884
.switcher-popup {
885
padding: 8px;
886
spacing: 16px;
887
}
888
.switcher-list-item-container {
890
spacing: 8px;
891
}
892
.switcher-list .item-box {
894
padding: 8px;
895
border-radius: 4px;
896
}
897
.switcher-list .item-box:outlined {
899
padding: 8px;
900
border: none;
901
background-color: rgba(0, 0, 0, 0.12);
902
color: rgba(0, 0, 0, 0.87);
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: rgba(0, 0, 0, 0);
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
/* transition from solid to transparent */
1006
transition-duration: 250ms;
1007
font-weight: bold;
1008
height: 32px;
1009
}
1010
#panel:overview, #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
1012
background-color: transparent;
1013
}
1014
#panel #panelLeft, #panel #panelCenter {
1016
spacing: 0;
1017
}
1018
#panel .panel-corner {
1020
-panel-corner-radius: 0;
1021
-panel-corner-background-color: rgba(0, 0, 0, 0.6);
1022
-panel-corner-border-width: 2px;
1023
-panel-corner-border-color: transparent;
1024
}
1025
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
1027
-panel-corner-border-color: white;
1028
}
1029
#panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
1031
-panel-corner-radius: 0;
1032
-panel-corner-background-color: transparent;
1033
-panel-corner-border-color: transparent;
1034
}
1035
#panel .panel-button {
1037
-natural-hpadding: 12px;
1038
-minimum-hpadding: 6px;
1039
font-weight: bold;
1040
color: rgba(255, 255, 255, 0.7);
1041
text-shadow: none;
1042
transition-duration: 150ms;
1043
}
1044
#panel .panel-button .app-menu-icon {
1046
-st-icon-style: symbolic;
1047
margin-left: 4px;
1048
margin-right: 4px;
1049
}
1050
#panel .panel-button .system-status-icon,
1052
#panel .panel-button .app-menu-icon > StIcon,
1053
#panel .panel-button .popup-menu-arrow {
1054
icon-shadow: none;
1055
}
1056
#panel .panel-button:hover {
1058
color: white;
1059
text-shadow: none;
1060
}
1061
#panel .panel-button:hover .system-status-icon,
1063
#panel .panel-button:hover .app-menu-icon > StIcon,
1064
#panel .panel-button:hover .popup-menu-arrow {
1065
icon-shadow: none;
1066
}
1067
#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
1069
background-color: rgba(0, 0, 0, 0.01);
1070
box-shadow: inset 0 -2px 0px white;
1071
color: white;
1072
}
1073
#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 {
1075
icon-shadow: none;
1076
}
1077
#panel .panel-button .system-status-icon {
1079
icon-size: 1.14286em;
1080
padding: 0 4px;
1081
}
1082
.unlock-screen #panel .panel-button,
1084
.login-screen #panel .panel-button,
1085
.lock-screen #panel .panel-button {
1086
color: rgba(255, 255, 255, 0.7);
1087
}
1088
.unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
1090
.login-screen #panel .panel-button:focus,
1091
.login-screen #panel .panel-button:hover,
1092
.login-screen #panel .panel-button:active,
1093
.lock-screen #panel .panel-button:focus,
1094
.lock-screen #panel .panel-button:hover,
1095
.lock-screen #panel .panel-button:active {
1096
color: white;
1097
}
1098
#panel .panel-status-indicators-box,
1100
#panel .panel-status-menu-box {
1101
spacing: 2px;
1102
}
1103
#panel .power-status.panel-status-indicators-box {
1105
spacing: 0;
1106
}
1107
#panel .screencast-indicator {
1109
color: #FBBC05;
1110
}
1111
#panel.solid {
1113
background-color: rgba(0, 0, 0, 0.6);
1114
/* transition from transparent to solid */
1115
transition-duration: 250ms;
1116
background-gradient-direction: none;
1117
text-shadow: none;
1118
}
1119
#panel.solid:overview {
1121
background-color: transparent;
1122
}
1123
#panel.solid .panel-corner {
1125
-panel-corner-background-color: rgba(0, 0, 0, 0.6);
1126
}
1127
#panel.solid .panel-button {
1129
color: rgba(255, 255, 255, 0.7);
1130
text-shadow: none;
1131
}
1132
#panel.solid .panel-button:hover, #panel.solid .panel-button:active, #panel.solid .panel-button:overview, #panel.solid .panel-button:focus, #panel.solid .panel-button:checked {
1134
color: white;
1135
}
1136
#panel.solid .system-status-icon,
1138
#panel.solid .app-menu-icon > StIcon,
1139
#panel.solid .popup-menu-arrow {
1140
icon-shadow: none;
1141
}
1142
#calendarArea {
1144
padding: 8px 16px;
1145
}
1146
.calendar {
1148
margin-bottom: 0;
1149
}
1150
.calendar,
1152
.datemenu-today-button,
1153
.datemenu-displays-box,
1154
.message-list-sections {
1155
margin: 0 8px;
1156
}
1157
.datemenu-calendar-column {
1159
spacing: 8px;
1160
}
1161
.datemenu-displays-section {
1163
padding-bottom: 0;
1164
}
1165
.datemenu-displays-box {
1167
spacing: 8px;
1168
}
1169
.datemenu-calendar-column {
1171
border: 0 solid rgba(0, 0, 0, 0.12);
1172
}
1173
.datemenu-calendar-column:ltr {
1175
border-left-width: 0;
1176
}
1177
.datemenu-calendar-column:rtl {
1179
border-right-width: 0;
1180
}
1181
.datemenu-today-button,
1183
.world-clocks-button,
1184
.weather-button,
1185
.events-section-title {
1186
min-height: 24px;
1187
padding: 4px 8px;
1188
border-radius: 4px;
1189
}
1190
.datemenu-today-button {
1192
min-height: 56px;
1193
}
1194
.message-list-section-list:ltr {
1196
padding-left: 0;
1197
}
1198
.message-list-section-list:rtl {
1200
padding-right: 0;
1201
}
1202
.datemenu-today-button:hover, .datemenu-today-button:focus,
1204
.world-clocks-button:hover,
1205
.world-clocks-button:focus,
1206
.weather-button:hover,
1207
.weather-button:focus,
1208
.events-section-title:hover,
1209
.events-section-title:focus {
1210
color: rgba(0, 0, 0, 0.87);
1211
background-color: rgba(0, 0, 0, 0.12);
1212
}
1213
.datemenu-today-button:active,
1215
.world-clocks-button:active,
1216
.weather-button:active,
1217
.events-section-title:active {
1218
color: rgba(0, 0, 0, 0.87);
1219
background-color: rgba(0, 0, 0, 0.26);
1220
}
1221
.datemenu-today-button .date-label {
1223
font-size: 18pt;
1224
font-weight: 400;
1225
}
1226
.world-clocks-header,
1228
.weather-header,
1229
.events-section-title {
1230
color: rgba(0, 0, 0, 0.54);
1231
font-weight: bold;
1232
}
1233
.world-clocks-grid {
1235
spacing-rows: 0.4em;
1236
}
1237
.weather-box {
1239
spacing: 0.4em;
1240
}
1241
.calendar-month-label {
1243
height: 20px;
1244
margin: 2px;
1245
padding: 6px 16px;
1246
border-radius: 4px;
1247
color: rgba(0, 0, 0, 0.87);
1248
font-weight: bold;
1249
text-align: center;
1250
}
1251
.calendar-month-label:focus {
1253
background-color: rgba(0, 0, 0, 0.12);
1254
}
1255
.pager-button {
1257
width: 32px;
1258
height: 32px;
1259
margin: 2px;
1260
border-radius: 100px;
1261
background-color: transparent;
1262
color: rgba(0, 0, 0, 0.87);
1263
}
1264
.pager-button:hover, .pager-button:focus {
1266
background-color: rgba(0, 0, 0, 0.12);
1267
}
1268
.pager-button:active {
1270
background-color: rgba(0, 0, 0, 0.26);
1271
}
1272
.calendar-change-month-back {
1274
background-image: url("assets/calendar-arrow-left.svg");
1275
}
1276
.calendar-change-month-back:rtl {
1278
background-image: url("assets/calendar-arrow-right.svg");
1279
}
1280
.calendar-change-month-forward {
1282
background-image: url("assets/calendar-arrow-right.svg");
1283
}
1284
.calendar-change-month-forward:rtl {
1286
background-image: url("assets/calendar-arrow-left.svg");
1287
}
1288
.calendar-day-base {
1290
font-size: 9pt;
1291
font-weight: 400;
1292
text-align: center;
1293
width: 32px;
1294
height: 32px;
1295
padding: 0;
1296
margin: 2px;
1297
border-radius: 100px;
1298
}
1299
.calendar-day-base:hover, .calendar-day-base:focus {
1301
background-color: rgba(0, 0, 0, 0.12);
1302
}
1303
.calendar-day-base:active {
1305
color: inherit;
1306
background-color: rgba(0, 0, 0, 0.26);
1307
border-color: transparent;
1308
}
1309
.calendar-day-base:selected {
1311
color: white;
1312
background-color: #4285F4;
1313
border-color: transparent;
1314
}
1315
.calendar-day-base.calendar-day-heading {
1317
width: 32px;
1318
height: 25px;
1319
margin-top: 2px;
1320
padding: 7px 0 0;
1321
border-radius: 100px;
1322
background-color: transparent;
1323
color: rgba(0, 0, 0, 0.38);
1324
font-size: 9pt;
1325
font-weight: 400;
1326
font-weight: bold;
1327
text-align: center;
1328
}
1329
.calendar-day {
1331
border-width: 0;
1332
}
1333
.calendar-day-top {
1335
border-top-width: 0;
1336
}
1337
.calendar-day-left {
1339
border-left-width: 0;
1340
}
1341
.calendar-nonwork-day {
1343
color: rgba(0, 0, 0, 0.87);
1344
}
1345
.calendar-today {
1347
font-weight: bold !important;
1348
border: none;
1349
}
1350
.calendar-day-with-events {
1352
color: #4285F4;
1353
font-weight: normal;
1354
text-decoration: underline;
1355
background-image: none;
1356
}
1357
.calendar-other-month-day {
1359
color: rgba(0, 0, 0, 0.26);
1360
opacity: 0.5;
1361
}
1362
.calendar-week-number {
1364
width: 32px;
1365
height: 25px;
1366
margin: 2px;
1367
padding: 7px 0 0;
1368
border-radius: 100px;
1369
background-color: transparent;
1370
color: rgba(0, 0, 0, 0.38);
1371
font-size: inherit;
1372
font-weight: bold;
1373
text-align: center;
1374
}
1375
/* Message list */
1377
.message-list {
1378
width: 420px;
1379
}
1380
.message-list-clear-button.button {
1382
background-color: transparent;
1383
margin: 8px 8px 0;
1384
}
1385
.message-list-clear-button.button:hover, .message-list-clear-button.button:focus {
1387
background-color: rgba(0, 0, 0, 0.12);
1388
}
1389
.message-list-clear-button.button:active {
1391
background-color: rgba(0, 0, 0, 0.26);
1392
}
1393
.message-list-sections {
1395
spacing: 8px;
1396
}
1397
.message-list-section,
1399
.message-list-section-list {
1400
spacing: 8px;
1401
}
1402
.message {
1404
min-height: 64px;
1405
background-color: transparent;
1406
border-radius: 4px;
1407
}
1408
.message:hover, .message:focus {
1410
background-color: rgba(0, 0, 0, 0.12);
1411
}
1412
.message:active {
1414
background-color: rgba(0, 0, 0, 0.26);
1415
}
1416
.message-icon-bin {
1418
padding: 8px 0px 8px 8px;
1419
}
1420
.message-icon-bin:rtl {
1422
padding: 8px 8px 8px 0px;
1423
}
1424
.message-icon-bin > StIcon {
1426
color: rgba(0, 0, 0, 0.87);
1427
icon-size: 1.14286em;
1428
-st-icon-style: requested;
1429
margin: 4px 0px 4px 4px;
1430
}
1431
.message-icon-bin > StIcon:rtl {
1433
margin: 4px 4px 4px 0px;
1434
}
1435
.message-secondary-bin {
1437
padding: 0 8px;
1438
}
1439
.message-secondary-bin > .event-time {
1441
min-height: 22px;
1442
padding-top: 2px;
1443
color: rgba(0, 0, 0, 0.54);
1444
font-size: 1em;
1445
/* HACK: the label should be baseline-aligned with a 1em label,
1446
fake this with some bottom padding */
1447
padding-bottom: 0;
1448
}
1449
.message-secondary-bin > StIcon {
1451
icon-size: 1.14286em;
1452
}
1453
.message-title {
1455
min-height: 22px;
1456
padding-top: 2px;
1457
color: rgba(0, 0, 0, 0.87);
1458
font-weight: bold;
1459
font-size: 1em;
1460
}
1461
.message-content {
1463
min-height: 48px;
1464
padding: 8px;
1465
color: rgba(0, 0, 0, 0.54);
1466
font-size: 1em;
1467
}
1468
.message-content * > StIcon {
1470
icon-size: 16px;
1471
border-radius: 16px;
1472
padding: 4px;
1473
color: rgba(0, 0, 0, 0.54);
1474
}
1475
/* FIXME: how do you do this in sass? */
1477
.message-content *:hover > StIcon,
1478
.message-content *:focus > StIcon {
1479
color: rgba(0, 0, 0, 0.87);
1480
background-color: rgba(0, 0, 0, 0.12);
1481
}
1482
.message-content *:active > StIcon {
1484
color: rgba(0, 0, 0, 0.87);
1485
background-color: rgba(0, 0, 0, 0.26);
1486
}
1487
.message-media-control {
1489
margin: 16px 0;
1490
padding: 8px;
1491
border-radius: 100px;
1492
color: rgba(0, 0, 0, 0.54);
1493
}
1494
.message-media-control:hover, .message-media-control:focus {
1496
color: rgba(0, 0, 0, 0.87);
1497
background-color: rgba(0, 0, 0, 0.12);
1498
}
1499
.message-media-control:active {
1501
color: rgba(0, 0, 0, 0.87);
1502
background-color: rgba(0, 0, 0, 0.26);
1503
}
1504
.message-media-control:insensitive {
1506
color: rgba(0, 0, 0, 0.26);
1507
}
1508
.message-media-control:last-child:ltr {
1510
margin-right: 16px;
1511
padding-right: 8px;
1512
}
1513
.message-media-control:last-child:rtl {
1515
margin-left: 16px;
1516
padding-left: 8px;
1517
}
1518
.media-message-cover-icon {
1520
icon-size: 32px !important;
1521
margin: 8px 0px 8px 4px !important;
1522
}
1523
.media-message-cover-icon:rtl {
1525
margin: 8px 4px 8px 0px !important;
1526
}
1527
.media-message-cover-icon.fallback {
1529
icon-size: 16px !important;
1530
padding: 8px;
1531
border: none;
1532
border-radius: 4px;
1533
background-color: rgba(0, 0, 0, 0.12);
1534
color: rgba(0, 0, 0, 0.38);
1535
}
1536
.system-switch-user-submenu-icon.user-icon {
1538
icon-size: 20px;
1539
padding: 0 2px;
1540
}
1541
.system-switch-user-submenu-icon.default-icon {
1543
icon-size: 16px;
1544
padding: 0 4px;
1545
}
1546
#appMenu {
1548
spinner-image: url("process-working.svg");
1549
spacing: 4px;
1550
}
1551
#appMenu .label-shadow {
1553
color: transparent;
1554
}
1555
.aggregate-menu {
1557
min-width: 280px;
1558
}
1559
.aggregate-menu .popup-menu-icon {
1561
padding: 0 4px;
1562
}
1563
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr {
1565
/* 8px spacing + 2*4px padding */
1566
padding-left: 16px;
1567
margin-left: 1.14286em;
1568
}
1569
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl {
1571
/* 8px spacing + 2*4px padding */
1572
padding-right: 16px;
1573
margin-right: 1.14286em;
1574
}
1575
.system-menu-action {
1577
color: rgba(0, 0, 0, 0.54);
1578
border-radius: 100px;
1579
/* wish we could do 50% */
1580
padding: 16px;
1581
border: none;
1582
}
1583
.system-menu-action:hover, .system-menu-action:focus {
1585
background-color: rgba(0, 0, 0, 0.12);
1586
color: rgba(0, 0, 0, 0.87);
1587
border: none;
1588
padding: 16px;
1589
}
1590
.system-menu-action:active {
1592
background-color: rgba(0, 0, 0, 0.26);
1593
color: rgba(0, 0, 0, 0.87);
1594
}
1595
.system-menu-action > StIcon {
1597
icon-size: 16px;
1598
}
1599
.ripple-box {
1601
width: 48px;
1602
height: 48px;
1603
border-radius: 0 0 48px 0;
1604
background-color: rgba(255, 255, 255, 0.3);
1605
background-image: none;
1606
background-size: auto;
1607
}
1608
.ripple-box:rtl {
1610
border-radius: 0 0 0 48px;
1611
background-image: none;
1612
}
1613
.popup-menu-arrow {
1615
width: 16px;
1616
height: 16px;
1617
}
1618
.popup-menu-icon {
1620
icon-size: 1.14286em;
1621
}
1622
.window-close {
1624
transition-duration: 0ms;
1625
height: 36px;
1626
width: 36px;
1627
-shell-close-overlap: 18px;
1628
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1629
background-image: url("assets/window-close.svg");
1630
background-size: 36px;
1631
}
1632
.window-close:hover {
1634
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1635
background-image: url("assets/window-close.svg");
1636
}
1637
.window-close:active {
1639
background-image: url("assets/window-close-active.svg");
1640
}
1641
.window-close:rtl {
1643
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1644
}
1645
.window-close:rtl:hover {
1647
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1648
}
1649
/* NETWORK DIALOGS */
1651
.nm-dialog {
1652
max-height: 34em;
1653
min-height: 31em;
1654
min-width: 32em;
1655
}
1656
.nm-dialog-content {
1658
spacing: 20px;
1659
padding: 24px;
1660
}
1661
.nm-dialog-header-hbox {
1663
spacing: 10px;
1664
}
1665
.nm-dialog-airplane-box {
1667
spacing: 12px;
1668
}
1669
.nm-dialog-airplane-headline {
1671
font-weight: bold;
1672
text-align: center;
1673
}
1674
.nm-dialog-airplane-text {
1676
color: rgba(0, 0, 0, 0.87);
1677
}
1678
.nm-dialog-header-icon {
1680
icon-size: 32px;
1681
}
1682
.nm-dialog-scroll-view {
1684
border: none;
1685
}
1686
.nm-dialog-header {
1688
font-size: 15pt;
1689
font-weight: 500;
1690
}
1691
.nm-dialog-item {
1693
font-size: 1em;
1694
border-bottom: none;
1695
border-radius: 4px;
1696
padding: 12px;
1697
spacing: 20px;
1698
}
1699
.nm-dialog-item:hover, .nm-dialog-item:focus {
1701
background-color: rgba(0, 0, 0, 0.12);
1702
}
1703
.nm-dialog-item:active {
1705
background-color: rgba(0, 0, 0, 0.26);
1706
}
1707
.nm-dialog-item:selected {
1709
background-color: #4285F4;
1710
color: white;
1711
}
1712
.nm-dialog-icons {
1714
spacing: .5em;
1715
}
1716
.nm-dialog-icon {
1718
icon-size: 16px;
1719
}
1720
.no-networks-label {
1722
color: rgba(0, 0, 0, 0.38);
1723
}
1724
.no-networks-box {
1726
spacing: 12px;
1727
}
1728
/* OVERVIEW */
1730
#overview {
1731
spacing: 24px;
1732
}
1733
.overview-controls {
1735
padding-bottom: 32px;
1736
}
1737
.window-picker {
1739
-horizontal-spacing: 16px;
1740
-vertical-spacing: 16px;
1741
padding: 0 16px 32px;
1742
}
1743
.window-picker.external-monitor {
1745
padding: 16px;
1746
}
1747
.window-clone-border {
1749
border: 4px solid rgba(255, 255, 255, 0.3);
1750
border-radius: 4px;
1751
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
1752
}
1753
.window-caption {
1755
spacing: 25px;
1756
color: white;
1757
background-color: rgba(0, 0, 0, 0.6);
1758
border-radius: 4px;
1759
padding: 4px 8px;
1760
}
1761
.search-entry {
1763
width: 304px;
1764
padding: 0 8px;
1765
border-radius: 4px 4px 0 0;
1766
color: rgba(255, 255, 255, 0.5);
1767
selection-background-color: rgba(255, 255, 255, 0.3);
1768
selected-color: white;
1769
background-color: rgba(255, 255, 255, 0.04);
1770
border-color: transparent;
1771
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1772
}
1773
.search-entry:hover {
1775
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1776
}
1777
.search-entry:focus {
1779
border-color: transparent;
1780
box-shadow: inset 0 -2px white;
1781
padding: 0 8px;
1782
border-width: 0;
1783
color: white;
1784
}
1785
.search-entry .search-entry-icon {
1787
icon-size: 16px;
1788
padding: 0 0;
1789
color: rgba(255, 255, 255, 0.5);
1790
}
1791
.search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
1793
color: white;
1794
}
1795
#searchResultsBin {
1797
max-width: 1000px;
1798
}
1799
#searchResultsContent {
1801
padding-left: 20px;
1802
padding-right: 20px;
1803
spacing: 16px;
1804
}
1805
.search-section {
1807
spacing: 16px;
1808
}
1809
.search-section-content {
1811
spacing: 32px;
1812
}
1813
.list-search-results {
1815
spacing: 3px;
1816
}
1817
.search-section-separator {
1819
height: 1px;
1820
background-color: rgba(255, 255, 255, 0.12);
1821
}
1822
.list-search-result-content {
1824
spacing: 30px;
1825
}
1826
.list-search-result-title {
1828
font-size: 12pt;
1829
font-weight: 400;
1830
color: white;
1831
spacing: 12px;
1832
}
1833
.list-search-result-description {
1835
color: rgba(255, 255, 255, 0.7);
1836
}
1837
.list-search-provider-details {
1839
width: 150px;
1840
color: rgba(255, 255, 255, 0.7);
1841
margin-top: 0.24em;
1842
}
1843
.list-search-provider-content {
1845
spacing: 20px;
1846
}
1847
.search-provider-icon {
1849
padding: 15px;
1850
}
1851
/* DASHBOARD */
1853
#dash {
1854
font-size: 1em;
1855
color: white;
1856
background-color: rgba(255, 255, 255, 0.1);
1857
padding: 3px 0;
1858
border: none;
1859
border-left: 0px;
1860
border-radius: 0px 4px 4px 0px;
1861
}
1862
#dash:rtl {
1864
border-radius: 4px 0 0 4px;
1865
}
1866
#dash .placeholder {
1868
background-image: url("assets/dash-placeholder.svg");
1869
background-size: contain;
1870
height: 24px;
1871
}
1872
#dash .empty-dash-drop-target {
1874
width: 24px;
1875
height: 24px;
1876
}
1877
.dash-item-container > StWidget {
1879
padding: 3px 6px;
1880
}
1881
.dash-label {
1883
border-radius: 4px;
1884
padding: 7px 8px;
1885
color: rgba(0, 0, 0, 0.87);
1886
background-color: #FFFFFF;
1887
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1888
text-align: center;
1889
-x-offset: 8px;
1890
}
1891
/* App Vault/Grid */
1893
.icon-grid {
1894
spacing: 30px;
1895
-shell-grid-horizontal-item-size: 136px;
1896
-shell-grid-vertical-item-size: 136px;
1897
}
1898
.icon-grid .overview-icon {
1900
icon-size: 96px;
1901
}
1902
.system-action-icon {
1904
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
1905
background-color: #212121;
1906
color: #FFFFFF;
1907
border-radius: 99px;
1908
icon-size: 48px;
1909
}
1910
.app-view-controls {
1912
width: 320px;
1913
padding-bottom: 32px;
1914
}
1915
.app-view-control {
1917
padding: 0 16px;
1918
font-weight: bold;
1919
color: rgba(255, 255, 255, 0.7);
1920
}
1921
.app-view-control:hover {
1923
color: white;
1924
background-color: rgba(255, 255, 255, 0.12) !important;
1925
}
1926
.app-view-control:active {
1928
color: white;
1929
background-color: rgba(255, 255, 255, 0.3) !important;
1930
}
1931
.app-view-control:checked {
1933
color: white;
1934
background-color: rgba(0, 0, 0, 0.01) !important;
1935
box-shadow: inset 0 2px 0 white;
1936
}
1937
.app-view-control:first-child {
1939
border-right-width: 0;
1940
border-radius: 4px;
1941
}
1942
.app-view-control:first-child:checked {
1944
border-radius: 0;
1945
}
1946
.app-view-control:last-child {
1948
border-radius: 4px;
1949
}
1950
.app-view-control:last-child:checked {
1952
border-radius: 0;
1953
}
1954
.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
1956
.list-search-result:focus,
1957
.list-search-result:selected,
1958
.list-search-result:hover {
1959
background-color: rgba(255, 255, 255, 0.12);
1960
transition-duration: 0ms;
1961
}
1962
.search-provider-icon:active, .search-provider-icon:checked,
1964
.list-search-result:active,
1965
.list-search-result:checked {
1966
background-color: rgba(255, 255, 255, 0.3);
1967
transition-duration: 150ms;
1968
}
1969
.app-well-app:hover .overview-icon,
1971
.app-well-app:focus .overview-icon,
1972
.app-well-app:selected .overview-icon,
1973
.app-well-app.app-folder:hover .overview-icon,
1974
.app-well-app.app-folder:focus .overview-icon,
1975
.app-well-app.app-folder:selected .overview-icon,
1976
.show-apps:hover .overview-icon,
1977
.show-apps:focus .overview-icon,
1978
.show-apps:selected .overview-icon,
1979
.grid-search-result:hover .overview-icon,
1980
.grid-search-result:focus .overview-icon,
1981
.grid-search-result:selected .overview-icon {
1982
background-color: rgba(255, 255, 255, 0.12);
1983
transition-duration: 0ms;
1984
border-image: none;
1985
background-image: none;
1986
}
1987
.app-well-app:active .overview-icon,
1989
.app-well-app:checked .overview-icon,
1990
.app-well-app.app-folder:active .overview-icon,
1991
.app-well-app.app-folder:checked .overview-icon,
1992
.show-apps:active .overview-icon,
1993
.show-apps:checked .overview-icon,
1994
.grid-search-result:active .overview-icon,
1995
.grid-search-result:checked .overview-icon {
1996
background-color: rgba(255, 255, 255, 0.3);
1997
box-shadow: 0 0 transparent;
1998
transition-duration: 150ms;
1999
}
2000
.app-well-app-running-dot {
2002
width: 32px;
2003
height: 2px;
2004
background-color: white;
2005
margin-bottom: 0;
2006
}
2007
.search-provider-icon,
2009
.list-search-result, .app-well-app .overview-icon,
2010
.app-well-app.app-folder .overview-icon,
2011
.show-apps .overview-icon,
2012
.grid-search-result .overview-icon {
2013
color: white;
2014
border-radius: 4px;
2015
padding: 6px;
2016
border: none;
2017
transition-duration: 150ms;
2018
text-align: center;
2019
}
2020
.app-well-app.app-folder > .overview-icon {
2022
background-color: rgba(255, 255, 255, 0.1);
2023
}
2024
.show-apps .show-apps-icon {
2026
color: rgba(255, 255, 255, 0.7);
2027
}
2028
.show-apps:hover .show-apps-icon,
2030
.show-apps:active .show-apps-icon,
2031
.show-apps:checked .show-apps-icon,
2032
.show-apps:focus .show-apps-icon {
2033
color: white;
2034
transition-duration: 150ms;
2035
}
2036
.app-folder-popup {
2038
-arrow-border-radius: 4px;
2039
-arrow-background-color: rgba(255, 255, 255, 0.1);
2040
-arrow-base: 24px;
2041
-arrow-rise: 12px;
2042
}
2043
.app-folder-popup-bin {
2045
padding: 5px;
2046
}
2047
.app-folder-icon {
2049
padding: 5px;
2050
spacing-rows: 5px;
2051
spacing-columns: 5px;
2052
}
2053
.page-indicator {
2055
padding: 15px 20px;
2056
}
2057
.page-indicator .page-indicator-icon {
2059
width: 12px;
2060
height: 12px;
2061
border-radius: 12px;
2062
background-image: none;
2063
background-color: rgba(255, 255, 255, 0.3);
2064
}
2065
.page-indicator:hover .page-indicator-icon {
2067
background-image: none;
2068
background-color: rgba(255, 255, 255, 0.5);
2069
}
2070
.page-indicator:active .page-indicator-icon {
2072
background-image: none;
2073
background-color: rgba(255, 255, 255, 0.7);
2074
}
2075
.page-indicator:checked .page-indicator-icon {
2077
background-image: none;
2078
background-color: white;
2079
transition-duration: 0ms;
2080
}
2081
.page-indicator:checked:active {
2083
background-image: none;
2084
}
2085
.app-well-app > .overview-icon.overview-icon-with-label,
2087
.grid-search-result .overview-icon.overview-icon-with-label {
2088
padding: 10px 8px 5px 8px;
2089
spacing: 4px;
2090
}
2091
.workspace-thumbnails {
2093
visible-width: 32px;
2094
spacing: 12px;
2095
padding: 12px;
2096
border-radius: 4px 0 0 4px;
2097
}
2098
.workspace-thumbnails:rtl {
2100
border-radius: 0 4px 4px 0;
2101
}
2102
.workspace-thumbnails .placeholder {
2104
background-image: url("assets/dash-placeholder.svg");
2105
background-size: contain;
2106
height: 24px;
2107
}
2108
.workspace-thumbnail-indicator {
2110
border: 0 solid white;
2111
border-left-width: 2px;
2112
padding: 6px;
2113
border-radius: 0;
2114
}
2115
.search-display > StBoxLayout,
2117
.all-apps,
2118
.frequent-apps > StBoxLayout {
2119
padding: 0px 88px 10px 88px;
2120
}
2121
.workspace-thumbnails {
2123
color: white;
2124
background-color: rgba(255, 255, 255, 0.1);
2125
border: none;
2126
}
2127
.search-statustext, .no-frequent-applications-label {
2129
font-size: 45px;
2130
font-weight: 400;
2131
color: rgba(255, 255, 255, 0.5);
2132
}
2133
/* NOTIFICATIONS & MESSAGE TRAY */
2135
.url-highlighter {
2136
link-color: #4285F4;
2137
}
2138
.notification-banner {
2140
font-size: 1em;
2141
width: 34em;
2142
min-height: 64px;
2143
margin: 5px;
2144
border-radius: 4px;
2145
color: rgba(0, 0, 0, 0.87);
2146
background-color: #FFFFFF;
2147
border: none;
2148
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2149
}
2150
.notification-banner:hover {
2152
background-color: #FFFFFF;
2153
}
2154
.notification-banner:focus {
2156
background-color: #FFFFFF;
2157
}
2158
.notification-banner .notification-icon {
2160
padding: 5px;
2161
}
2162
.notification-banner .notification-content {
2164
padding: 5px;
2165
spacing: 5px;
2166
}
2167
.notification-banner .secondary-icon {
2169
icon-size: 1.14286em;
2170
}
2171
.notification-banner .notification-actions {
2173
background-color: transparent;
2174
padding-top: 0;
2175
padding: 6px;
2176
spacing: 6px;
2177
}
2178
.notification-banner .notification-button {
2180
min-height: 36px;
2181
padding: 0 8px;
2182
border-radius: 4px;
2183
background-color: transparent;
2184
color: rgba(0, 0, 0, 0.54);
2185
font-weight: 500;
2186
}
2187
.notification-banner .notification-button:first-child {
2189
border-radius: 4px;
2190
}
2191
.notification-banner .notification-button:last-child {
2193
border-radius: 4px;
2194
}
2195
.notification-banner .notification-button:hover, .notification-banner .notification-buttonfocus {
2197
background-color: rgba(0, 0, 0, 0.12);
2198
color: rgba(0, 0, 0, 0.87);
2199
}
2200
.notification-banner .notification-button:active {
2202
background-color: rgba(0, 0, 0, 0.26);
2203
color: rgba(0, 0, 0, 0.87);
2204
}
2205
.summary-source-counter {
2207
font-size: 1em;
2208
font-weight: bold;
2209
height: 1.6em;
2210
width: 1.6em;
2211
-shell-counter-overlap-x: 3px;
2212
-shell-counter-overlap-y: 3px;
2213
background-color: #4285F4;
2214
color: white;
2215
border: 2px solid white;
2216
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
2217
border-radius: 0.9em;
2218
}
2219
.secondary-icon {
2221
icon-size: 1.14286em;
2222
}
2223
.chat-body {
2225
spacing: 5px;
2226
}
2227
.chat-response {
2229
margin: 5px;
2230
}
2231
.chat-log-message {
2233
color: rgba(0, 0, 0, 0.87);
2234
}
2235
.chat-new-group {
2237
padding-top: 1em;
2238
}
2239
.chat-received {
2241
padding-left: 4px;
2242
}
2243
.chat-received:rtl {
2245
padding-left: 0px;
2246
padding-right: 4px;
2247
}
2248
.chat-sent {
2250
padding-left: 18pt;
2251
color: rgba(0, 0, 0, 0.54);
2252
}
2253
.chat-sent:rtl {
2255
padding-left: 0;
2256
padding-right: 18pt;
2257
}
2258
.chat-meta-message {
2260
padding-left: 4px;
2261
font-size: 9pt;
2262
font-weight: 400;
2263
color: rgba(0, 0, 0, 0.38);
2264
}
2265
.chat-meta-message:rtl {
2267
padding-left: 0;
2268
padding-right: 4px;
2269
}
2270
.hotplug-transient-box {
2272
spacing: 6px;
2273
padding: 2px 72px 2px 12px;
2274
}
2275
.hotplug-notification-item {
2277
padding: 2px 10px;
2278
}
2279
.hotplug-notification-item:focus {
2281
padding: 1px 71px 1px 11px;
2282
}
2283
.hotplug-notification-item-icon {
2285
icon-size: 24px;
2286
padding: 2px 5px;
2287
}
2288
.hotplug-resident-box {
2290
spacing: 8px;
2291
}
2292
.hotplug-resident-mount {
2294
spacing: 8px;
2295
border-radius: 4px;
2296
}
2297
.hotplug-resident-mount:hover {
2299
background-color: rgba(0, 0, 0, 0.12);
2300
}
2301
.hotplug-resident-mount:active {
2303
background-color: rgba(0, 0, 0, 0.26);
2304
}
2305
.hotplug-resident-mount-label {
2307
color: inherit;
2308
padding-left: 6px;
2309
}
2310
.hotplug-resident-mount-icon {
2312
icon-size: 24px;
2313
padding-left: 6px;
2314
}
2315
.hotplug-resident-eject-icon {
2317
icon-size: 16px;
2318
}
2319
.hotplug-resident-eject-button {
2321
padding: 7px;
2322
border-radius: 4px;
2323
color: rgba(0, 0, 0, 0.87);
2324
}
2325
/* Eeeky things */
2327
.magnifier-zoom-region {
2328
border: 2px solid #4285F4;
2329
}
2330
.magnifier-zoom-region.full-screen {
2332
border-width: 0;
2333
}
2334
/* On-screen Keyboard */
2336
.word-suggestions {
2337
font-size: 12pt;
2338
font-weight: 400;
2339
spacing: 12px;
2340
min-height: 20pt;
2341
}
2342
#keyboard {
2344
background-color: rgba(0, 0, 0, 0.3);
2345
}
2346
.key-container {
2348
padding: 4px;
2349
spacing: 4px;
2350
}
2351
.keyboard-key {
2353
min-height: 2em;
2354
min-width: 2em;
2355
font-size: 2em;
2356
font-weight: 500;
2357
border-radius: 4px;
2358
border: none;
2359
color: rgba(0, 0, 0, 0.62);
2360
background-color: #FAFAFA;
2361
border-color: transparent;
2362
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2363
text-shadow: none;
2364
icon-shadow: none;
2365
}
2366
.keyboard-key:focus {
2368
color: rgba(0, 0, 0, 0.87);
2369
text-shadow: none;
2370
icon-shadow: none;
2371
box-shadow: 0 0 transparent;
2372
}
2373
.keyboard-key:hover, .keyboard-key:checked {
2375
color: rgba(0, 0, 0, 0.87);
2376
background-color: #FAFAFA;
2377
border-color: transparent;
2378
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2379
text-shadow: none;
2380
icon-shadow: none;
2381
}
2382
.keyboard-key:active {
2384
color: rgba(0, 0, 0, 0.87);
2385
background-color: rgba(201, 201, 201, 0.9688);
2386
border-color: transparent;
2387
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2388
text-shadow: none;
2389
icon-shadow: none;
2390
}
2391
.keyboard-key:grayed {
2393
background-color: rgba(0, 0, 0, 0.3);
2394
color: white;
2395
border-color: rgba(0, 0, 0, 0.3);
2396
}
2397
.keyboard-key.default-key {
2399
border-color: transparent;
2400
background-color: #FAFAFA;
2401
background-size: 24px;
2402
}
2403
.keyboard-key.default-key:active {
2405
background-color: rgba(201, 201, 201, 0.9688);
2406
}
2407
.keyboard-key.enter-key {
2409
border-color: transparent;
2410
background-color: #01A299;
2411
background-image: url("assets/key-enter.svg");
2412
}
2413
.keyboard-key.enter-key:active {
2415
background-color: #3eb8b1;
2416
}
2417
.keyboard-key.shift-key-lowercase {
2419
background-image: url("assets/key-shift.svg");
2420
}
2421
.keyboard-key.shift-key-uppercase {
2423
background-image: url("assets/key-shift-uppercase.svg");
2424
}
2425
.keyboard-key.shift-key-uppercase:latched {
2427
background-image: url("assets/key-shift-latched-uppercase.svg");
2428
}
2429
.keyboard-key.hide-key {
2431
background-image: url("assets/key-hide.svg");
2432
}
2433
.keyboard-key.layout-key {
2435
background-image: url("assets/key-layout.svg");
2436
}
2437
.keyboard-subkeys {
2439
color: inherit;
2440
padding: 5px;
2441
-arrow-border-radius: 0;
2442
-arrow-background-color: transparent;
2443
-arrow-border-width: 0;
2444
-arrow-border-color: transparent;
2445
-arrow-base: 0;
2446
-arrow-rise: 0;
2447
-boxpointer-gap: 5px;
2448
background-color: #FFFFFF;
2449
border-radius: 4px;
2450
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2451
}
2452
.candidate-popup-content {
2454
padding: 8px;
2455
spacing: 0;
2456
}
2457
.candidate-index {
2459
padding: 0 4px 0 0;
2460
color: rgba(0, 0, 0, 0.38);
2461
}
2462
.candidate-box:selected .candidate-index {
2464
color: rgba(255, 255, 255, 0.5);
2465
}
2466
.candidate-box {
2468
transition-duration: 0ms;
2469
min-height: 32px;
2470
padding: 0 8px;
2471
border-radius: 4px;
2472
}
2473
.candidate-box:hover {
2475
background-color: rgba(0, 0, 0, 0.12);
2476
color: rgba(0, 0, 0, 0.87);
2477
}
2478
.candidate-box:active {
2480
background-color: rgba(0, 0, 0, 0.26);
2481
color: rgba(0, 0, 0, 0.87);
2482
}
2483
.candidate-box:selected {
2485
background-color: #4285F4;
2486
color: white;
2487
}
2488
.candidate-page-button-box {
2490
height: 32px;
2491
}
2492
.vertical .candidate-page-button-box {
2494
padding-top: 0;
2495
}
2496
.horizontal .candidate-page-button-box {
2498
padding-left: 0;
2499
}
2500
.candidate-page-button {
2502
min-width: 32px;
2503
min-height: 32px;
2504
padding: 0;
2505
}
2506
.candidate-page-button-previous {
2508
border-radius: 4px;
2509
border-right-width: 0;
2510
}
2511
.candidate-page-button-next {
2513
border-radius: 4px;
2514
}
2515
.candidate-page-button-icon {
2517
icon-size: 1.14286em;
2518
}
2519
/* Auth Dialogs & Screen Shield */
2521
.framed-user-icon {
2522
background-size: contain;
2523
border: none;
2524
color: white;
2525
border-radius: 4px;
2526
}
2527
.framed-user-icon:hover {
2529
border-color: white;
2530
color: white;
2531
}
2532
.login-dialog-banner-view {
2534
padding-top: 24px;
2535
max-width: 23em;
2536
}
2537
.login-dialog {
2539
border: none;
2540
background-color: transparent;
2541
}
2542
.login-dialog StEntry {
2544
color: white;
2545
selection-background-color: rgba(255, 255, 255, 0.3);
2546
selected-color: white;
2547
background-color: rgba(255, 255, 255, 0.04);
2548
border-color: transparent;
2549
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2550
}
2551
.login-dialog StEntry:focus {
2553
border-color: transparent;
2554
box-shadow: inset 0 -2px white;
2555
}
2556
.login-dialog StEntry:insensitive {
2558
color: rgba(0, 0, 0, 0.38);
2559
border-color: transparent;
2560
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
2561
color: rgba(255, 255, 255, 0.5);
2562
}
2563
.login-dialog .modal-dialog-button-box {
2565
spacing: 3px;
2566
}
2567
.login-dialog .modal-dialog-button {
2569
padding: 0 16px;
2570
color: rgba(255, 255, 255, 0.7);
2571
background-color: transparent;
2572
border-color: transparent;
2573
box-shadow: 0 0 transparent;
2574
text-shadow: none;
2575
icon-shadow: none;
2576
}
2577
.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus {
2579
color: white;
2580
background-color: rgba(255, 255, 255, 0.12);
2581
border-color: transparent;
2582
box-shadow: 0 0 transparent;
2583
text-shadow: none;
2584
icon-shadow: none;
2585
}
2586
.login-dialog .modal-dialog-button:active {
2588
color: white;
2589
background-color: rgba(255, 255, 255, 0.3);
2590
border-color: transparent;
2591
box-shadow: 0 0 transparent;
2592
text-shadow: none;
2593
icon-shadow: none;
2594
}
2595
.login-dialog .modal-dialog-button:insensitive {
2597
color: rgba(255, 255, 255, 0.3);
2598
background-color: transparent;
2599
border-color: transparent;
2600
box-shadow: 0 0 transparent;
2601
text-shadow: none;
2602
icon-shadow: none;
2603
}
2604
.login-dialog .modal-dialog-button:default {
2606
color: white;
2607
background-color: #01A299;
2608
border-color: transparent;
2609
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2610
text-shadow: none;
2611
icon-shadow: none;
2612
}
2613
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
2615
color: white;
2616
background-color: #01A299;
2617
border-color: transparent;
2618
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2619
text-shadow: none;
2620
icon-shadow: none;
2621
}
2622
.login-dialog .modal-dialog-button:default:active {
2624
color: white;
2625
background-color: #3eb8b1;
2626
border-color: transparent;
2627
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2628
text-shadow: none;
2629
icon-shadow: none;
2630
}
2631
.login-dialog .modal-dialog-button:default:insensitive {
2633
color: rgba(255, 255, 255, 0.5);
2634
background-color: rgba(255, 255, 255, 0.12);
2635
border-color: transparent;
2636
box-shadow: 0 0 transparent;
2637
text-shadow: none;
2638
icon-shadow: none;
2639
}
2640
.login-dialog-logo-bin {
2642
padding: 24px 0px;
2643
}
2644
.login-dialog-banner {
2646
color: rgba(255, 255, 255, 0.7);
2647
}
2648
.login-dialog-button-box {
2650
spacing: 5px;
2651
}
2652
.login-dialog-message-warning {
2654
color: #FBBC05;
2655
}
2656
.login-dialog-message-hint {
2658
padding-top: 0;
2659
padding-bottom: 20px;
2660
}
2661
.login-dialog-user-selection-box {
2663
padding: 100px 0px;
2664
}
2665
.login-dialog-not-listed-label {
2667
padding-left: 2px;
2668
}
2669
.login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
2671
.login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
2672
color: white;
2673
}
2674
.login-dialog-not-listed-label {
2676
font-size: 1em;
2677
font-weight: bold;
2678
color: rgba(255, 255, 255, 0.7);
2679
padding-top: 1em;
2680
}
2681
.login-dialog-not-listed-label:hover {
2683
color: white;
2684
}
2685
.login-dialog-not-listed-label:focus {
2687
background-color: rgba(255, 255, 255, 0.12);
2688
}
2689
.login-dialog-user-list-view {
2691
-st-vfade-offset: 1em;
2692
}
2693
.login-dialog-user-list {
2695
spacing: 12px;
2696
padding: .2em;
2697
width: 23em;
2698
}
2699
.login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
2701
background-color: rgba(255, 255, 255, 0.12);
2702
color: white;
2703
}
2704
.login-dialog-user-list:expanded .login-dialog-user-list-item:hover {
2706
background-color: rgba(255, 255, 255, 0.12);
2707
color: white;
2708
}
2709
.login-dialog-user-list:expanded .login-dialog-user-list-item:active {
2711
background-color: rgba(255, 255, 255, 0.3);
2712
color: white;
2713
}
2714
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
2716
border-right: 2px solid white;
2717
}
2718
.login-dialog-user-list-item {
2720
border-radius: 4px;
2721
padding: 4px 4px 0;
2722
color: rgba(255, 255, 255, 0.7);
2723
}
2724
.login-dialog-user-list-item:ltr {
2726
padding-right: 1em;
2727
}
2728
.login-dialog-user-list-item:rtl {
2730
padding-left: 1em;
2731
}
2732
.login-dialog-user-list-item:hover {
2734
background-color: rgba(255, 255, 255, 0.12);
2735
color: white;
2736
}
2737
.login-dialog-user-list-item:active {
2739
background-color: rgba(255, 255, 255, 0.3);
2740
color: white;
2741
}
2742
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
2744
height: 2px;
2745
margin: 2px 0 0 0;
2746
background-color: white;
2747
}
2748
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
2750
background-color: white;
2751
}
2752
.login-dialog-username,
2754
.user-widget-label {
2755
color: white;
2756
font-size: 15pt;
2757
font-weight: 500;
2758
text-align: left;
2759
padding-left: 15px;
2760
}
2761
.user-widget-label:ltr {
2763
padding-left: 18px;
2764
}
2765
.user-widget-label:rtl {
2767
padding-right: 18px;
2768
}
2769
.login-dialog-prompt-layout {
2771
padding-top: 24px;
2772
padding-bottom: 12px;
2773
spacing: 8px;
2774
width: 23em;
2775
}
2776
.login-dialog-prompt-label {
2778
color: rgba(255, 255, 255, 0.5);
2779
font-size: 1em;
2780
padding-top: 1em;
2781
}
2782
.login-dialog-session-list-button StIcon {
2784
icon-size: 1.25em;
2785
}
2786
.login-dialog-session-list-button {
2788
color: rgba(255, 255, 255, 0.7);
2789
}
2790
.login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
2792
color: white;
2793
}
2794
.login-dialog-session-list-button:active {
2796
color: white;
2797
}
2798
.screen-shield-arrows {
2800
padding-bottom: 3em;
2801
}
2802
.screen-shield-arrows Gjs_Arrow {
2804
color: white;
2805
width: 80px;
2806
height: 48px;
2807
-arrow-thickness: 12px;
2808
-arrow-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2809
}
2810
.screen-shield-clock {
2812
color: white;
2813
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2814
font-weight: normal;
2815
text-align: center;
2816
padding-bottom: 1.5em;
2817
}
2818
.screen-shield-clock-time {
2820
font-size: 112px;
2821
font-weight: 300;
2822
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2823
}
2824
.screen-shield-clock-date {
2826
font-size: 45px;
2827
font-weight: 400;
2828
}
2829
.screen-shield-notifications-container {
2831
spacing: 6px;
2832
width: 30em;
2833
background-color: transparent;
2834
max-height: 500px;
2835
}
2836
.screen-shield-notifications-container .summary-notification-stack-scrollview {
2838
padding-top: 0;
2839
padding-bottom: 0;
2840
}
2841
.screen-shield-notifications-container .notification,
2843
.screen-shield-notifications-container .screen-shield-notification-source {
2844
padding: 8px;
2845
border: none;
2846
background-color: rgba(0, 0, 0, 0.3);
2847
color: white;
2848
border-radius: 4px;
2849
}
2850
.screen-shield-notifications-container .notification {
2852
margin-right: 16px;
2853
}
2854
.screen-shield-notification-label {
2856
min-height: 22px;
2857
padding: 2px 0px 0px 16px;
2858
font-weight: bold;
2859
}
2860
.screen-shield-notification-count-text {
2862
min-height: 22px;
2863
padding: 2px 0px 0px 16px;
2864
color: rgba(255, 255, 255, 0.7);
2865
}
2866
#panel.lock-screen {
2868
background-color: rgba(0, 0, 0, 0.3);
2869
}
2870
.screen-shield-background {
2872
background: black;
2873
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
2874
}
2875
#lockDialogGroup {
2877
background: #303030;
2878
background-size: cover;
2879
}
2880
#LookingGlassDialog {
2882
background-color: #FFFFFF;
2883
spacing: 4px;
2884
padding: 0;
2885
border: none;
2886
border-radius: 4px;
2887
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2888
}
2889
#LookingGlassDialog > #Toolbar {
2891
padding: 0 8px;
2892
border: none;
2893
border-radius: 0;
2894
background-color: rgba(255, 255, 255, 0.01);
2895
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
2896
}
2897
#LookingGlassDialog .labels {
2899
spacing: 0;
2900
}
2901
#LookingGlassDialog .notebook-tab {
2903
-natural-hpadding: 12px;
2904
-minimum-hpadding: 6px;
2905
font-weight: bold;
2906
color: rgba(0, 0, 0, 0.38);
2907
transition-duration: 150ms;
2908
padding-left: 16px;
2909
padding-right: 16px;
2910
min-height: 36px;
2911
padding: 0 32px;
2912
}
2913
#LookingGlassDialog .notebook-tab:hover {
2915
background-color: rgba(0, 0, 0, 0.12);
2916
color: rgba(0, 0, 0, 0.87);
2917
text-shadow: none;
2918
}
2919
#LookingGlassDialog .notebook-tab:active {
2921
background-color: rgba(0, 0, 0, 0.26);
2922
color: rgba(0, 0, 0, 0.87);
2923
}
2924
#LookingGlassDialog .notebook-tab:selected {
2926
border-bottom-width: 0;
2927
border-color: transparent;
2928
background-color: rgba(255, 255, 255, 0.01);
2929
box-shadow: inset 0 -2px 0px #4285F4;
2930
color: rgba(0, 0, 0, 0.87);
2931
text-shadow: none;
2932
}
2933
#LookingGlassDialog StBoxLayout#EvalBox {
2935
padding: 4px;
2936
spacing: 4px;
2937
}
2938
#LookingGlassDialog StBoxLayout#ResultsArea {
2940
spacing: 4px;
2941
}
2942
.lg-dialog StEntry {
2944
selection-background-color: #4285F4;
2945
selected-color: white;
2946
}
2947
.lg-dialog .shell-link {
2949
color: #4285F4;
2950
}
2951
.lg-dialog .shell-link:hover {
2953
color: #4285F4;
2954
}
2955
.lg-completions-text {
2957
font-size: 1em;
2958
font-style: italic;
2959
}
2960
.lg-obj-inspector-title {
2962
spacing: 4px;
2963
}
2964
.lg-obj-inspector-button {
2966
min-height: 36px;
2967
padding: 0 16px;
2968
border: none;
2969
border-radius: 4px;
2970
font-size: 10.5pt;
2971
font-weight: 500;
2972
color: rgba(0, 0, 0, 0.54);
2973
background-color: transparent;
2974
border-color: transparent;
2975
box-shadow: 0 0 transparent;
2976
text-shadow: none;
2977
icon-shadow: none;
2978
}
2979
.lg-obj-inspector-button:hover {
2981
color: rgba(0, 0, 0, 0.87);
2982
background-color: rgba(0, 0, 0, 0.12);
2983
border-color: transparent;
2984
box-shadow: 0 0 transparent;
2985
text-shadow: none;
2986
icon-shadow: none;
2987
}
2988
.lg-obj-inspector-button:active {
2990
color: rgba(0, 0, 0, 0.87);
2991
background-color: rgba(0, 0, 0, 0.26);
2992
border-color: transparent;
2993
box-shadow: 0 0 transparent;
2994
text-shadow: none;
2995
icon-shadow: none;
2996
}
2997
.lg-obj-inspector-button:insensitive {
2999
color: rgba(0, 0, 0, 0.26);
3000
background-color: transparent;
3001
border-color: transparent;
3002
box-shadow: 0 0 transparent;
3003
text-shadow: none;
3004
icon-shadow: none;
3005
}
3006
.lg-obj-inspector-button:focus {
3008
color: rgba(0, 0, 0, 0.87);
3009
text-shadow: none;
3010
icon-shadow: none;
3011
box-shadow: 0 0 transparent;
3012
}
3013
.lg-obj-inspector-button:hover {
3015
border: none;
3016
}
3017
#lookingGlassExtensions {
3019
padding: 4px;
3020
}
3021
.lg-extensions-list {
3023
padding: 4px;
3024
spacing: 6px;
3025
}
3026
.lg-extension {
3028
border: none;
3029
border-radius: 4px;
3030
padding: 4px;
3031
}
3032
.lg-extension-name {
3034
font-size: 18pt;
3035
font-weight: 400;
3036
}
3037
.lg-extension-meta {
3039
spacing: 6px;
3040
}
3041
#LookingGlassPropertyInspector {
3043
background: #FFFFFF;
3044
border: none;
3045
border-radius: 4px;
3046
padding: 6px;
3047
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
3048
}
3049
/* Dash to Dock */
3051
#dashtodockContainer #dash {
3052
background-color: rgba(0, 0, 0, 0.6);
3053
}
3054
#dashtodockContainer:overview #dash {
3056
background-color: rgba(255, 255, 255, 0.1);
3057
}
3058
#dashtodockContainer.extended:overview #dash {
3060
background-color: transparent;
3061
}
3062
#dashtodockContainer.left #dash,
3064
#dashtodockContainer.right #dash {
3065
padding: 3px 0;
3066
}
3067
#dashtodockContainer.top #dash,
3069
#dashtodockContainer.bottom #dash {
3070
padding: 0 3px;
3071
}
3072
#dashtodockContainer.extended #dash {
3074
padding: 0;
3075
border-radius: 0;
3076
}
3077
#dashtodockContainer.left .dash-item-container > StWidget,
3079
#dashtodockContainer.right .dash-item-container > StWidget,
3080
#dashtodockContainer.extended.left .dash-item-container > StWidget,
3081
#dashtodockContainer.extended.right .dash-item-container > StWidget {
3082
padding: 3px 6px;
3083
}
3084
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
3086
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
3087
padding: 6px 6px 3px 6px;
3088
}
3089
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
3091
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
3092
padding: 3px 6px 6px 6px;
3093
}
3094
#dashtodockContainer.top .dash-item-container > StWidget,
3096
#dashtodockContainer.bottom .dash-item-container > StWidget,
3097
#dashtodockContainer.extended.top .dash-item-container > StWidget,
3098
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
3099
padding: 6px 3px;
3100
}
3101
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
3103
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
3104
padding: 6px 3px 6px 6px;
3105
}
3106
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
3108
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
3109
padding: 6px 6px 6px 3px;
3110
}
3111
#dashtodockContainer .app-well-app-running-dot {
3113
background-color: transparent;
3114
}
3115
#dashtodockContainer .dash-item-container > StWidget {
3117
background-size: cover;
3118
}
3119
#dashtodockContainer.left .dash-item-container > StWidget.running1 {
3121
background-image: url("assets/dash/left-running1.svg");
3122
}
3123
#dashtodockContainer.left .dash-item-container > StWidget.running1.focused {
3125
background-image: url("assets/dash/left-running1-focused.svg");
3126
}
3127
#dashtodockContainer.left .dash-item-container > StWidget.running2 {
3129
background-image: url("assets/dash/left-running2.svg");
3130
}
3131
#dashtodockContainer.left .dash-item-container > StWidget.running2.focused {
3133
background-image: url("assets/dash/left-running2-focused.svg");
3134
}
3135
#dashtodockContainer.left .dash-item-container > StWidget.running3 {
3137
background-image: url("assets/dash/left-running3.svg");
3138
}
3139
#dashtodockContainer.left .dash-item-container > StWidget.running3.focused {
3141
background-image: url("assets/dash/left-running3-focused.svg");
3142
}
3143
#dashtodockContainer.left .dash-item-container > StWidget.running4 {
3145
background-image: url("assets/dash/left-running4.svg");
3146
}
3147
#dashtodockContainer.left .dash-item-container > StWidget.running4.focused {
3149
background-image: url("assets/dash/left-running4-focused.svg");
3150
}
3151
#dashtodockContainer.right .dash-item-container > StWidget.running1 {
3153
background-image: url("assets/dash/right-running1.svg");
3154
}
3155
#dashtodockContainer.right .dash-item-container > StWidget.running1.focused {
3157
background-image: url("assets/dash/right-running1-focused.svg");
3158
}
3159
#dashtodockContainer.right .dash-item-container > StWidget.running2 {
3161
background-image: url("assets/dash/right-running2.svg");
3162
}
3163
#dashtodockContainer.right .dash-item-container > StWidget.running2.focused {
3165
background-image: url("assets/dash/right-running2-focused.svg");
3166
}
3167
#dashtodockContainer.right .dash-item-container > StWidget.running3 {
3169
background-image: url("assets/dash/right-running3.svg");
3170
}
3171
#dashtodockContainer.right .dash-item-container > StWidget.running3.focused {
3173
background-image: url("assets/dash/right-running3-focused.svg");
3174
}
3175
#dashtodockContainer.right .dash-item-container > StWidget.running4 {
3177
background-image: url("assets/dash/right-running4.svg");
3178
}
3179
#dashtodockContainer.right .dash-item-container > StWidget.running4.focused {
3181
background-image: url("assets/dash/right-running4-focused.svg");
3182
}
3183
#dashtodockContainer.top .dash-item-container > StWidget.running1 {
3185
background-image: url("assets/dash/top-running1.svg");
3186
}
3187
#dashtodockContainer.top .dash-item-container > StWidget.running1.focused {
3189
background-image: url("assets/dash/top-running1-focused.svg");
3190
}
3191
#dashtodockContainer.top .dash-item-container > StWidget.running2 {
3193
background-image: url("assets/dash/top-running2.svg");
3194
}
3195
#dashtodockContainer.top .dash-item-container > StWidget.running2.focused {
3197
background-image: url("assets/dash/top-running2-focused.svg");
3198
}
3199
#dashtodockContainer.top .dash-item-container > StWidget.running3 {
3201
background-image: url("assets/dash/top-running3.svg");
3202
}
3203
#dashtodockContainer.top .dash-item-container > StWidget.running3.focused {
3205
background-image: url("assets/dash/top-running3-focused.svg");
3206
}
3207
#dashtodockContainer.top .dash-item-container > StWidget.running4 {
3209
background-image: url("assets/dash/top-running4.svg");
3210
}
3211
#dashtodockContainer.top .dash-item-container > StWidget.running4.focused {
3213
background-image: url("assets/dash/top-running4-focused.svg");
3214
}
3215
#dashtodockContainer.bottom .dash-item-container > StWidget.running1 {
3217
background-image: url("assets/dash/bottom-running1.svg");
3218
}
3219
#dashtodockContainer.bottom .dash-item-container > StWidget.running1.focused {
3221
background-image: url("assets/dash/bottom-running1-focused.svg");
3222
}
3223
#dashtodockContainer.bottom .dash-item-container > StWidget.running2 {
3225
background-image: url("assets/dash/bottom-running2.svg");
3226
}
3227
#dashtodockContainer.bottom .dash-item-container > StWidget.running2.focused {
3229
background-image: url("assets/dash/bottom-running2-focused.svg");
3230
}
3231
#dashtodockContainer.bottom .dash-item-container > StWidget.running3 {
3233
background-image: url("assets/dash/bottom-running3.svg");
3234
}
3235
#dashtodockContainer.bottom .dash-item-container > StWidget.running3.focused {
3237
background-image: url("assets/dash/bottom-running3-focused.svg");
3238
}
3239
#dashtodockContainer.bottom .dash-item-container > StWidget.running4 {
3241
background-image: url("assets/dash/bottom-running4.svg");
3242
}
3243
#dashtodockContainer.bottom .dash-item-container > StWidget.running4.focused {
3245
background-image: url("assets/dash/bottom-running4-focused.svg");
3246
}
3247
/* Simple Dock */
3249
#dash:desktop {
3250
background-color: rgba(0, 0, 0, 0.6);
3251
}
3252
/* GPaste */
3254
.popup-menu .search-entry {
3255
color: rgba(0, 0, 0, 0.87);
3256
selection-background-color: #4285F4;
3257
selected-color: white;
3258
background-color: rgba(0, 0, 0, 0.04);
3259
border-color: transparent;
3260
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
3261
}
3262
.popup-menu .search-entry:hover {
3264
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
3265
}
3266
.popup-menu .search-entry:focus {
3268
border-color: transparent;
3269
box-shadow: inset 0 -2px #4285F4;
3270
color: rgba(0, 0, 0, 0.87);
3271
}
3272
.popup-menu .search-entry .search-entry-icon {
3274
color: rgba(0, 0, 0, 0.38);
3275
}
3276
.popup-menu .search-entry:hover .search-entry-icon, .popup-menu .search-entry:focus .search-entry-icon {
3278
color: rgba(0, 0, 0, 0.87);
3279
}
3280