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: 32px;
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: 32px;
85
margin: 4px;
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: 4px;
140
border-right-width: 0px;
141
border-radius: 4px;
142
}
143
.modal-dialog-linked-button:first-child:last-child {
145
margin-right: 4px;
146
border-right-width: 0px;
147
border-radius: 4px;
148
}
149
/* Entries */
151
StEntry {
152
min-height: 32px;
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: 11.25pt;
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: #4285F4;
245
-slider-height: 2px;
246
-slider-background-color: rgba(0, 0, 0, 0.26);
247
-slider-border-color: transparent;
248
-slider-active-background-color: #4285F4;
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: 16px;
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: 4px;
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(66, 133, 244, 0.12);
294
}
295
.check-box:active:checked StBin {
297
background-color: rgba(66, 133, 244, 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.54);
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.54);
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.54);
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: 28px;
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: #212121;
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: #212121;
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: 20px;
1187
padding: 4px 8px;
1188
border-radius: 4px;
1189
}
1190
.datemenu-today-button {
1192
min-height: 48px;
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: 16px;
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: 28px;
1258
height: 28px;
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: 28px;
1294
height: 28px;
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: 28px;
1318
height: 21px;
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: 28px;
1365
height: 21px;
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: 56px;
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: 40px;
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: 12px;
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: 12px;
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: 32px;
1626
width: 32px;
1627
-shell-close-overlap: 16px;
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: 32px;
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.7);
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: 11.25pt;
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 10px;
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: 56px;
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: 4px;
2176
spacing: 4px;
2177
}
2178
.notification-banner .notification-button {
2180
min-height: 32px;
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.54);
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
#keyboard {
2337
background-color: rgba(0, 0, 0, 0.3);
2338
}
2339
.keyboard-layout {
2341
spacing: 10px;
2342
padding: 10px;
2343
}
2344
.keyboard-row {
2346
spacing: 15px;
2347
}
2348
.keyboard-key {
2350
min-height: 2em;
2351
min-width: 2em;
2352
font-size: 2em;
2353
font-weight: 500;
2354
border-radius: 4px;
2355
border: none;
2356
color: rgba(0, 0, 0, 0.87);
2357
background-color: #FFFFFF;
2358
border-color: transparent;
2359
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2360
text-shadow: none;
2361
icon-shadow: none;
2362
}
2363
.keyboard-key:focus {
2365
color: rgba(0, 0, 0, 0.87);
2366
text-shadow: none;
2367
icon-shadow: none;
2368
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2369
}
2370
.keyboard-key:hover, .keyboard-key:checked {
2372
color: rgba(0, 0, 0, 0.87);
2373
background-color: #FFFFFF;
2374
border-color: transparent;
2375
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2376
text-shadow: none;
2377
icon-shadow: none;
2378
}
2379
.keyboard-key:active {
2381
color: rgba(0, 0, 0, 0.87);
2382
background-color: rgba(205, 205, 205, 0.9688);
2383
border-color: transparent;
2384
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2385
text-shadow: none;
2386
icon-shadow: none;
2387
}
2388
.keyboard-key:grayed {
2390
background-color: rgba(0, 0, 0, 0.3);
2391
color: white;
2392
border-color: rgba(0, 0, 0, 0.3);
2393
}
2394
.keyboard-subkeys {
2396
color: inherit;
2397
padding: 5px;
2398
-arrow-border-radius: 0;
2399
-arrow-background-color: transparent;
2400
-arrow-border-width: 0;
2401
-arrow-border-color: transparent;
2402
-arrow-base: 0;
2403
-arrow-rise: 0;
2404
-boxpointer-gap: 5px;
2405
background-color: #FFFFFF;
2406
border-radius: 4px;
2407
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2408
}
2409
.candidate-popup-content {
2411
padding: 8px;
2412
spacing: 0;
2413
}
2414
.candidate-index {
2416
padding: 0 4px 0 0;
2417
color: rgba(0, 0, 0, 0.54);
2418
}
2419
.candidate-box:selected .candidate-index {
2421
color: rgba(255, 255, 255, 0.7);
2422
}
2423
.candidate-box {
2425
transition-duration: 0ms;
2426
min-height: 28px;
2427
padding: 0 8px;
2428
border-radius: 4px;
2429
}
2430
.candidate-box:hover {
2432
background-color: rgba(0, 0, 0, 0.12);
2433
color: rgba(0, 0, 0, 0.87);
2434
}
2435
.candidate-box:active {
2437
background-color: rgba(0, 0, 0, 0.26);
2438
color: rgba(0, 0, 0, 0.87);
2439
}
2440
.candidate-box:selected {
2442
background-color: #4285F4;
2443
color: white;
2444
}
2445
.candidate-page-button-box {
2447
height: 28px;
2448
}
2449
.vertical .candidate-page-button-box {
2451
padding-top: 0;
2452
}
2453
.horizontal .candidate-page-button-box {
2455
padding-left: 0;
2456
}
2457
.candidate-page-button {
2459
min-width: 28px;
2460
min-height: 28px;
2461
padding: 0;
2462
}
2463
.candidate-page-button-previous {
2465
border-radius: 4px;
2466
border-right-width: 0;
2467
}
2468
.candidate-page-button-next {
2470
border-radius: 4px;
2471
}
2472
.candidate-page-button-icon {
2474
icon-size: 1.14286em;
2475
}
2476
/* Auth Dialogs & Screen Shield */
2478
.framed-user-icon {
2479
background-size: contain;
2480
border: none;
2481
color: white;
2482
border-radius: 4px;
2483
}
2484
.framed-user-icon:hover {
2486
border-color: white;
2487
color: white;
2488
}
2489
.login-dialog-banner-view {
2491
padding-top: 24px;
2492
max-width: 23em;
2493
}
2494
.login-dialog {
2496
border: none;
2497
background-color: transparent;
2498
}
2499
.login-dialog StEntry {
2501
color: white;
2502
selection-background-color: rgba(255, 255, 255, 0.3);
2503
selected-color: white;
2504
background-color: rgba(255, 255, 255, 0.04);
2505
border-color: transparent;
2506
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2507
}
2508
.login-dialog StEntry:focus {
2510
border-color: transparent;
2511
box-shadow: inset 0 -2px white;
2512
}
2513
.login-dialog StEntry:insensitive {
2515
color: rgba(0, 0, 0, 0.38);
2516
border-color: transparent;
2517
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
2518
color: rgba(255, 255, 255, 0.5);
2519
}
2520
.login-dialog .modal-dialog-button-box {
2522
spacing: 3px;
2523
}
2524
.login-dialog .modal-dialog-button {
2526
padding: 0 16px;
2527
color: rgba(255, 255, 255, 0.7);
2528
background-color: transparent;
2529
border-color: transparent;
2530
box-shadow: 0 0 transparent;
2531
text-shadow: none;
2532
icon-shadow: none;
2533
}
2534
.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus {
2536
color: white;
2537
background-color: rgba(255, 255, 255, 0.12);
2538
border-color: transparent;
2539
box-shadow: 0 0 transparent;
2540
text-shadow: none;
2541
icon-shadow: none;
2542
}
2543
.login-dialog .modal-dialog-button:active {
2545
color: white;
2546
background-color: rgba(255, 255, 255, 0.3);
2547
border-color: transparent;
2548
box-shadow: 0 0 transparent;
2549
text-shadow: none;
2550
icon-shadow: none;
2551
}
2552
.login-dialog .modal-dialog-button:insensitive {
2554
color: rgba(255, 255, 255, 0.3);
2555
background-color: transparent;
2556
border-color: transparent;
2557
box-shadow: 0 0 transparent;
2558
text-shadow: none;
2559
icon-shadow: none;
2560
}
2561
.login-dialog .modal-dialog-button:default {
2563
color: white;
2564
background-color: #4285F4;
2565
border-color: transparent;
2566
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2567
text-shadow: none;
2568
icon-shadow: none;
2569
}
2570
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
2572
color: white;
2573
background-color: #4285F4;
2574
border-color: transparent;
2575
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2576
text-shadow: none;
2577
icon-shadow: none;
2578
}
2579
.login-dialog .modal-dialog-button:default:active {
2581
color: white;
2582
background-color: #6fa2f7;
2583
border-color: transparent;
2584
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2585
text-shadow: none;
2586
icon-shadow: none;
2587
}
2588
.login-dialog .modal-dialog-button:default:insensitive {
2590
color: rgba(255, 255, 255, 0.5);
2591
background-color: rgba(255, 255, 255, 0.04);
2592
border-color: transparent;
2593
box-shadow: 0 0 transparent;
2594
text-shadow: none;
2595
icon-shadow: none;
2596
}
2597
.login-dialog-logo-bin {
2599
padding: 24px 0px;
2600
}
2601
.login-dialog-banner {
2603
color: rgba(255, 255, 255, 0.7);
2604
}
2605
.login-dialog-button-box {
2607
spacing: 5px;
2608
}
2609
.login-dialog-message-warning {
2611
color: #FBBC05;
2612
}
2613
.login-dialog-message-hint {
2615
padding-top: 0;
2616
padding-bottom: 20px;
2617
}
2618
.login-dialog-user-selection-box {
2620
padding: 100px 0px;
2621
}
2622
.login-dialog-not-listed-label {
2624
padding-left: 2px;
2625
}
2626
.login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
2628
.login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
2629
color: white;
2630
}
2631
.login-dialog-not-listed-label {
2633
font-size: 1em;
2634
font-weight: bold;
2635
color: rgba(255, 255, 255, 0.7);
2636
padding-top: 1em;
2637
}
2638
.login-dialog-not-listed-label:hover {
2640
color: white;
2641
}
2642
.login-dialog-not-listed-label:focus {
2644
background-color: rgba(255, 255, 255, 0.12);
2645
}
2646
.login-dialog-user-list-view {
2648
-st-vfade-offset: 1em;
2649
}
2650
.login-dialog-user-list {
2652
spacing: 12px;
2653
padding: .2em;
2654
width: 23em;
2655
}
2656
.login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
2658
background-color: rgba(255, 255, 255, 0.12);
2659
color: white;
2660
}
2661
.login-dialog-user-list:expanded .login-dialog-user-list-item:hover {
2663
background-color: rgba(255, 255, 255, 0.12);
2664
color: white;
2665
}
2666
.login-dialog-user-list:expanded .login-dialog-user-list-item:active {
2668
background-color: rgba(255, 255, 255, 0.3);
2669
color: white;
2670
}
2671
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
2673
border-right: 2px solid white;
2674
}
2675
.login-dialog-user-list-item {
2677
border-radius: 4px;
2678
padding: 4px 4px 0;
2679
color: rgba(255, 255, 255, 0.7);
2680
}
2681
.login-dialog-user-list-item:ltr {
2683
padding-right: 1em;
2684
}
2685
.login-dialog-user-list-item:rtl {
2687
padding-left: 1em;
2688
}
2689
.login-dialog-user-list-item:hover {
2691
background-color: rgba(255, 255, 255, 0.12);
2692
color: white;
2693
}
2694
.login-dialog-user-list-item:active {
2696
background-color: rgba(255, 255, 255, 0.3);
2697
color: white;
2698
}
2699
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
2701
height: 2px;
2702
margin: 2px 0 0 0;
2703
background-color: white;
2704
}
2705
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
2707
background-color: white;
2708
}
2709
.login-dialog-username,
2711
.user-widget-label {
2712
color: white;
2713
font-size: 15pt;
2714
font-weight: 500;
2715
text-align: left;
2716
padding-left: 15px;
2717
}
2718
.user-widget-label:ltr {
2720
padding-left: 18px;
2721
}
2722
.user-widget-label:rtl {
2724
padding-right: 18px;
2725
}
2726
.login-dialog-prompt-layout {
2728
padding-top: 24px;
2729
padding-bottom: 12px;
2730
spacing: 8px;
2731
width: 23em;
2732
}
2733
.login-dialog-prompt-label {
2735
color: rgba(255, 255, 255, 0.7);
2736
font-size: 1em;
2737
padding-top: 1em;
2738
}
2739
.login-dialog-session-list-button StIcon {
2741
icon-size: 1.25em;
2742
}
2743
.login-dialog-session-list-button {
2745
color: rgba(255, 255, 255, 0.7);
2746
}
2747
.login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
2749
color: white;
2750
}
2751
.login-dialog-session-list-button:active {
2753
color: white;
2754
}
2755
.screen-shield-arrows {
2757
padding-bottom: 3em;
2758
}
2759
.screen-shield-arrows Gjs_Arrow {
2761
color: white;
2762
width: 80px;
2763
height: 48px;
2764
-arrow-thickness: 12px;
2765
-arrow-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2766
}
2767
.screen-shield-clock {
2769
color: white;
2770
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2771
font-weight: normal;
2772
text-align: center;
2773
padding-bottom: 1.5em;
2774
}
2775
.screen-shield-clock-time {
2777
font-size: 112px;
2778
font-weight: 300;
2779
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2780
}
2781
.screen-shield-clock-date {
2783
font-size: 45px;
2784
font-weight: 400;
2785
}
2786
.screen-shield-notifications-container {
2788
spacing: 6px;
2789
width: 30em;
2790
background-color: transparent;
2791
max-height: 500px;
2792
}
2793
.screen-shield-notifications-container .summary-notification-stack-scrollview {
2795
padding-top: 0;
2796
padding-bottom: 0;
2797
}
2798
.screen-shield-notifications-container .notification,
2800
.screen-shield-notifications-container .screen-shield-notification-source {
2801
padding: 8px;
2802
border: none;
2803
background-color: rgba(0, 0, 0, 0.3);
2804
color: white;
2805
border-radius: 4px;
2806
}
2807
.screen-shield-notifications-container .notification {
2809
margin-right: 16px;
2810
}
2811
.screen-shield-notification-label {
2813
min-height: 22px;
2814
padding: 2px 0px 0px 16px;
2815
font-weight: bold;
2816
}
2817
.screen-shield-notification-count-text {
2819
min-height: 22px;
2820
padding: 2px 0px 0px 16px;
2821
color: rgba(255, 255, 255, 0.7);
2822
}
2823
#panel.lock-screen {
2825
background-color: rgba(0, 0, 0, 0.3);
2826
}
2827
.screen-shield-background {
2829
background: black;
2830
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
2831
}
2832
#lockDialogGroup {
2834
background: #303030;
2835
background-size: cover;
2836
}
2837
#LookingGlassDialog {
2839
background-color: #FFFFFF;
2840
spacing: 4px;
2841
padding: 0;
2842
border: none;
2843
border-radius: 4px;
2844
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2845
}
2846
#LookingGlassDialog > #Toolbar {
2848
padding: 0 8px;
2849
border: none;
2850
border-radius: 0;
2851
background-color: rgba(255, 255, 255, 0.01);
2852
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
2853
}
2854
#LookingGlassDialog .labels {
2856
spacing: 0;
2857
}
2858
#LookingGlassDialog .notebook-tab {
2860
-natural-hpadding: 12px;
2861
-minimum-hpadding: 6px;
2862
font-weight: bold;
2863
color: rgba(0, 0, 0, 0.54);
2864
transition-duration: 150ms;
2865
padding-left: 16px;
2866
padding-right: 16px;
2867
min-height: 32px;
2868
padding: 0 32px;
2869
}
2870
#LookingGlassDialog .notebook-tab:hover {
2872
background-color: rgba(0, 0, 0, 0.12);
2873
color: rgba(0, 0, 0, 0.87);
2874
text-shadow: none;
2875
}
2876
#LookingGlassDialog .notebook-tab:active {
2878
background-color: rgba(0, 0, 0, 0.26);
2879
color: rgba(0, 0, 0, 0.87);
2880
}
2881
#LookingGlassDialog .notebook-tab:selected {
2883
border-bottom-width: 0;
2884
border-color: transparent;
2885
background-color: rgba(255, 255, 255, 0.01);
2886
box-shadow: inset 0 -2px 0px #4285F4;
2887
color: rgba(0, 0, 0, 0.87);
2888
text-shadow: none;
2889
}
2890
#LookingGlassDialog StBoxLayout#EvalBox {
2892
padding: 4px;
2893
spacing: 4px;
2894
}
2895
#LookingGlassDialog StBoxLayout#ResultsArea {
2897
spacing: 4px;
2898
}
2899
.lg-dialog StEntry {
2901
selection-background-color: #4285F4;
2902
selected-color: white;
2903
}
2904
.lg-dialog .shell-link {
2906
color: #4285F4;
2907
}
2908
.lg-dialog .shell-link:hover {
2910
color: #4285F4;
2911
}
2912
.lg-completions-text {
2914
font-size: 1em;
2915
font-style: italic;
2916
}
2917
.lg-obj-inspector-title {
2919
spacing: 4px;
2920
}
2921
.lg-obj-inspector-button {
2923
min-height: 32px;
2924
padding: 0 16px;
2925
border: none;
2926
border-radius: 4px;
2927
font-size: 10.5pt;
2928
font-weight: 500;
2929
color: rgba(0, 0, 0, 0.54);
2930
background-color: transparent;
2931
border-color: transparent;
2932
box-shadow: 0 0 transparent;
2933
text-shadow: none;
2934
icon-shadow: none;
2935
}
2936
.lg-obj-inspector-button:hover {
2938
color: rgba(0, 0, 0, 0.87);
2939
background-color: rgba(0, 0, 0, 0.12);
2940
border-color: transparent;
2941
box-shadow: 0 0 transparent;
2942
text-shadow: none;
2943
icon-shadow: none;
2944
}
2945
.lg-obj-inspector-button:active {
2947
color: rgba(0, 0, 0, 0.87);
2948
background-color: rgba(0, 0, 0, 0.26);
2949
border-color: transparent;
2950
box-shadow: 0 0 transparent;
2951
text-shadow: none;
2952
icon-shadow: none;
2953
}
2954
.lg-obj-inspector-button:insensitive {
2956
color: rgba(0, 0, 0, 0.26);
2957
background-color: transparent;
2958
border-color: transparent;
2959
box-shadow: 0 0 transparent;
2960
text-shadow: none;
2961
icon-shadow: none;
2962
}
2963
.lg-obj-inspector-button:focus {
2965
color: rgba(0, 0, 0, 0.87);
2966
text-shadow: none;
2967
icon-shadow: none;
2968
box-shadow: 0 0 transparent;
2969
}
2970
.lg-obj-inspector-button:hover {
2972
border: none;
2973
}
2974
#lookingGlassExtensions {
2976
padding: 4px;
2977
}
2978
.lg-extensions-list {
2980
padding: 4px;
2981
spacing: 6px;
2982
}
2983
.lg-extension {
2985
border: none;
2986
border-radius: 4px;
2987
padding: 4px;
2988
}
2989
.lg-extension-name {
2991
font-size: 18pt;
2992
font-weight: 400;
2993
}
2994
.lg-extension-meta {
2996
spacing: 6px;
2997
}
2998
#LookingGlassPropertyInspector {
3000
background: #FFFFFF;
3001
border: none;
3002
border-radius: 4px;
3003
padding: 6px;
3004
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
3005
}
3006
/* Dash to Dock */
3008
#dashtodockContainer #dash {
3009
background-color: rgba(0, 0, 0, 0.6);
3010
}
3011
#dashtodockContainer:overview #dash {
3013
background-color: rgba(255, 255, 255, 0.1);
3014
}
3015
#dashtodockContainer.extended:overview #dash {
3017
background-color: transparent;
3018
}
3019
#dashtodockContainer.left #dash,
3021
#dashtodockContainer.right #dash {
3022
padding: 3px 0;
3023
}
3024
#dashtodockContainer.top #dash,
3026
#dashtodockContainer.bottom #dash {
3027
padding: 0 3px;
3028
}
3029
#dashtodockContainer.extended #dash {
3031
padding: 0;
3032
border-radius: 0;
3033
}
3034
#dashtodockContainer.left .dash-item-container > StWidget,
3036
#dashtodockContainer.right .dash-item-container > StWidget,
3037
#dashtodockContainer.extended.left .dash-item-container > StWidget,
3038
#dashtodockContainer.extended.right .dash-item-container > StWidget {
3039
padding: 3px 6px;
3040
}
3041
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
3043
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
3044
padding: 6px 6px 3px 6px;
3045
}
3046
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
3048
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
3049
padding: 3px 6px 6px 6px;
3050
}
3051
#dashtodockContainer.top .dash-item-container > StWidget,
3053
#dashtodockContainer.bottom .dash-item-container > StWidget,
3054
#dashtodockContainer.extended.top .dash-item-container > StWidget,
3055
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
3056
padding: 6px 3px;
3057
}
3058
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
3060
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
3061
padding: 6px 3px 6px 6px;
3062
}
3063
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
3065
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
3066
padding: 6px 6px 6px 3px;
3067
}
3068
#dashtodockContainer .app-well-app-running-dot {
3070
background-color: transparent;
3071
}
3072
#dashtodockContainer .dash-item-container > StWidget {
3074
background-size: cover;
3075
}
3076
#dashtodockContainer.left .dash-item-container > StWidget.running1 {
3078
background-image: url("assets/dash/left-running1.svg");
3079
}
3080
#dashtodockContainer.left .dash-item-container > StWidget.running1.focused {
3082
background-image: url("assets/dash/left-running1-focused.svg");
3083
}
3084
#dashtodockContainer.left .dash-item-container > StWidget.running2 {
3086
background-image: url("assets/dash/left-running2.svg");
3087
}
3088
#dashtodockContainer.left .dash-item-container > StWidget.running2.focused {
3090
background-image: url("assets/dash/left-running2-focused.svg");
3091
}
3092
#dashtodockContainer.left .dash-item-container > StWidget.running3 {
3094
background-image: url("assets/dash/left-running3.svg");
3095
}
3096
#dashtodockContainer.left .dash-item-container > StWidget.running3.focused {
3098
background-image: url("assets/dash/left-running3-focused.svg");
3099
}
3100
#dashtodockContainer.left .dash-item-container > StWidget.running4 {
3102
background-image: url("assets/dash/left-running4.svg");
3103
}
3104
#dashtodockContainer.left .dash-item-container > StWidget.running4.focused {
3106
background-image: url("assets/dash/left-running4-focused.svg");
3107
}
3108
#dashtodockContainer.right .dash-item-container > StWidget.running1 {
3110
background-image: url("assets/dash/right-running1.svg");
3111
}
3112
#dashtodockContainer.right .dash-item-container > StWidget.running1.focused {
3114
background-image: url("assets/dash/right-running1-focused.svg");
3115
}
3116
#dashtodockContainer.right .dash-item-container > StWidget.running2 {
3118
background-image: url("assets/dash/right-running2.svg");
3119
}
3120
#dashtodockContainer.right .dash-item-container > StWidget.running2.focused {
3122
background-image: url("assets/dash/right-running2-focused.svg");
3123
}
3124
#dashtodockContainer.right .dash-item-container > StWidget.running3 {
3126
background-image: url("assets/dash/right-running3.svg");
3127
}
3128
#dashtodockContainer.right .dash-item-container > StWidget.running3.focused {
3130
background-image: url("assets/dash/right-running3-focused.svg");
3131
}
3132
#dashtodockContainer.right .dash-item-container > StWidget.running4 {
3134
background-image: url("assets/dash/right-running4.svg");
3135
}
3136
#dashtodockContainer.right .dash-item-container > StWidget.running4.focused {
3138
background-image: url("assets/dash/right-running4-focused.svg");
3139
}
3140
#dashtodockContainer.top .dash-item-container > StWidget.running1 {
3142
background-image: url("assets/dash/top-running1.svg");
3143
}
3144
#dashtodockContainer.top .dash-item-container > StWidget.running1.focused {
3146
background-image: url("assets/dash/top-running1-focused.svg");
3147
}
3148
#dashtodockContainer.top .dash-item-container > StWidget.running2 {
3150
background-image: url("assets/dash/top-running2.svg");
3151
}
3152
#dashtodockContainer.top .dash-item-container > StWidget.running2.focused {
3154
background-image: url("assets/dash/top-running2-focused.svg");
3155
}
3156
#dashtodockContainer.top .dash-item-container > StWidget.running3 {
3158
background-image: url("assets/dash/top-running3.svg");
3159
}
3160
#dashtodockContainer.top .dash-item-container > StWidget.running3.focused {
3162
background-image: url("assets/dash/top-running3-focused.svg");
3163
}
3164
#dashtodockContainer.top .dash-item-container > StWidget.running4 {
3166
background-image: url("assets/dash/top-running4.svg");
3167
}
3168
#dashtodockContainer.top .dash-item-container > StWidget.running4.focused {
3170
background-image: url("assets/dash/top-running4-focused.svg");
3171
}
3172
#dashtodockContainer.bottom .dash-item-container > StWidget.running1 {
3174
background-image: url("assets/dash/bottom-running1.svg");
3175
}
3176
#dashtodockContainer.bottom .dash-item-container > StWidget.running1.focused {
3178
background-image: url("assets/dash/bottom-running1-focused.svg");
3179
}
3180
#dashtodockContainer.bottom .dash-item-container > StWidget.running2 {
3182
background-image: url("assets/dash/bottom-running2.svg");
3183
}
3184
#dashtodockContainer.bottom .dash-item-container > StWidget.running2.focused {
3186
background-image: url("assets/dash/bottom-running2-focused.svg");
3187
}
3188
#dashtodockContainer.bottom .dash-item-container > StWidget.running3 {
3190
background-image: url("assets/dash/bottom-running3.svg");
3191
}
3192
#dashtodockContainer.bottom .dash-item-container > StWidget.running3.focused {
3194
background-image: url("assets/dash/bottom-running3-focused.svg");
3195
}
3196
#dashtodockContainer.bottom .dash-item-container > StWidget.running4 {
3198
background-image: url("assets/dash/bottom-running4.svg");
3199
}
3200
#dashtodockContainer.bottom .dash-item-container > StWidget.running4.focused {
3202
background-image: url("assets/dash/bottom-running4-focused.svg");
3203
}
3204
/* Simple Dock */
3206
#dash:desktop {
3207
background-color: rgba(0, 0, 0, 0.6);
3208
}
3209
/* GPaste */
3211
.popup-menu .search-entry {
3212
color: rgba(0, 0, 0, 0.87);
3213
selection-background-color: #4285F4;
3214
selected-color: white;
3215
background-color: rgba(0, 0, 0, 0.04);
3216
border-color: transparent;
3217
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
3218
}
3219
.popup-menu .search-entry:hover {
3221
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
3222
}
3223
.popup-menu .search-entry:focus {
3225
border-color: transparent;
3226
box-shadow: inset 0 -2px #4285F4;
3227
color: rgba(0, 0, 0, 0.87);
3228
}
3229
.popup-menu .search-entry .search-entry-icon {
3231
color: rgba(0, 0, 0, 0.54);
3232
}
3233
.popup-menu .search-entry:hover .search-entry-icon, .popup-menu .search-entry:focus .search-entry-icon {
3235
color: rgba(0, 0, 0, 0.87);
3236
}
3237