ASCII text
1
/* This stylesheet is generated, DO NOT EDIT */
2
/* Copyright 2009, 2015 Red Hat, Inc.
3
*
4
* Portions adapted from Mx's data/style/default.css
5
* Copyright 2009 Intel Corporation
6
*
7
* This program is free software; you can redistribute it and/or modify it
8
* under the terms and conditions of the GNU Lesser General Public License,
9
* version 2.1, as published by the Free Software Foundation.
10
*
11
* This program is distributed in the hope it will be useful, but WITHOUT ANY
12
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
13
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for
14
* more details.
15
*
16
* You should have received a copy of the GNU Lesser General Public License
17
* along with this program; if not, write to the Free Software Foundation,
18
* Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
19
*/
20
/* GLOBALS */
21
stage {
22
font-family: "M+ 1c", Roboto, Cantarell, Sans-Serif;
23
font-size: 10.5pt;
24
font-weight: 400;
25
color: rgba(0, 0, 0, 0.87);
26
}
27
/* WIDGETS */
29
/* Buttons */
30
.button {
31
min-height: 32px;
32
padding: 0 16px;
33
border-width: 0;
34
border-radius: 4px;
35
font-size: 10.5pt;
36
font-weight: 500;
37
color: rgba(0, 0, 0, 0.54);
38
background-color: transparent;
39
border-color: transparent;
40
box-shadow: 0 0 transparent;
41
text-shadow: none;
42
icon-shadow: none;
43
transition-duration: 100ms;
44
}
45
.button:hover {
47
color: rgba(0, 0, 0, 0.87);
48
background-color: rgba(0, 0, 0, 0.08);
49
border-color: transparent;
50
box-shadow: 0 0 transparent;
51
text-shadow: none;
52
icon-shadow: none;
53
}
54
.button:active {
56
color: rgba(0, 0, 0, 0.87);
57
background-color: rgba(0, 0, 0, 0.2);
58
border-color: transparent;
59
box-shadow: 0 0 transparent;
60
text-shadow: none;
61
icon-shadow: none;
62
transition-duration: 200ms;
63
}
64
.button:insensitive {
66
color: rgba(0, 0, 0, 0.26);
67
background-color: transparent;
68
border-color: transparent;
69
box-shadow: 0 0 transparent;
70
text-shadow: none;
71
icon-shadow: none;
72
}
73
.button:focus {
75
color: rgba(0, 0, 0, 0.87);
76
text-shadow: none;
77
icon-shadow: none;
78
box-shadow: 0 0 transparent;
79
}
80
.modal-dialog-linked-button {
82
min-height: 32px;
83
margin: 4px;
84
padding: 0 8px;
85
margin-right: 0;
86
border-right-width: 0;
87
border-radius: 4px;
88
font-size: 10.5pt;
89
font-weight: 500;
90
color: rgba(0, 0, 0, 0.54);
91
background-color: transparent;
92
border-color: transparent;
93
box-shadow: 0 0 transparent;
94
text-shadow: none;
95
icon-shadow: none;
96
transition-duration: 100ms;
97
}
98
.modal-dialog-linked-button:hover {
100
color: rgba(0, 0, 0, 0.87);
101
background-color: rgba(0, 0, 0, 0.08);
102
border-color: transparent;
103
box-shadow: 0 0 transparent;
104
text-shadow: none;
105
icon-shadow: none;
106
}
107
.modal-dialog-linked-button:active {
109
color: rgba(0, 0, 0, 0.87);
110
background-color: rgba(0, 0, 0, 0.2);
111
border-color: transparent;
112
box-shadow: 0 0 transparent;
113
text-shadow: none;
114
icon-shadow: none;
115
transition-duration: 200ms;
116
}
117
.modal-dialog-linked-button:insensitive {
119
color: rgba(0, 0, 0, 0.26);
120
background-color: transparent;
121
border-color: transparent;
122
box-shadow: 0 0 transparent;
123
text-shadow: none;
124
icon-shadow: none;
125
}
126
.modal-dialog-linked-button:focus {
128
color: rgba(0, 0, 0, 0.87);
129
text-shadow: none;
130
icon-shadow: none;
131
box-shadow: 0 0 transparent;
132
}
133
.modal-dialog-linked-button:first-child {
135
border-radius: 4px;
136
}
137
.modal-dialog-linked-button:last-child {
139
margin-right: 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
transition-duration: 100ms;
162
background-color: rgba(0, 0, 0, 0.04);
163
border-color: transparent;
164
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
165
}
166
StEntry:hover {
168
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
169
}
170
StEntry:focus {
172
border-color: transparent;
173
box-shadow: inset 0 -2px #4285F4;
174
}
175
StEntry:insensitive {
177
color: rgba(0, 0, 0, 0.38);
178
border-color: transparent;
179
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
180
}
181
StEntry StIcon.capslock-warning {
183
icon-size: 16px;
184
warning-color: #FBBC05;
185
padding: 0 0;
186
}
187
/* Scrollbars */
189
StScrollView.vfade {
190
-st-vfade-offset: 32px;
191
}
192
StScrollView.hfade {
194
-st-hfade-offset: 32px;
195
}
196
StScrollBar {
198
padding: 0;
199
}
200
StScrollView StScrollBar {
202
min-width: 16px;
203
min-height: 16px;
204
}
205
StScrollBar StBin#trough {
207
margin: 4px;
208
border-radius: 100px;
209
background-color: rgba(0, 0, 0, 0.12);
210
}
211
StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
213
transition-duration: 100ms;
214
border-radius: 100px;
215
background-color: rgba(0, 0, 0, 0.38);
216
margin: 4px;
217
}
218
StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover {
220
background-color: rgba(0, 0, 0, 0.54);
221
}
222
StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
224
background-color: rgba(0, 0, 0, 0.87);
225
}
226
#overview StScrollBar StBin#trough, #screenShieldNotifications StScrollBar StBin#trough {
228
background-color: rgba(255, 255, 255, 0.12);
229
}
230
#overview StScrollBar StButton#vhandle, #screenShieldNotifications StScrollBar StButton#vhandle, #overview StScrollBar StButton#hhandle, #screenShieldNotifications StScrollBar StButton#hhandle {
232
background-color: rgba(255, 255, 255, 0.5);
233
}
234
#overview StScrollBar StButton#vhandle:hover, #screenShieldNotifications StScrollBar StButton#vhandle:hover, #overview StScrollBar StButton#hhandle:hover, #screenShieldNotifications StScrollBar StButton#hhandle:hover {
236
background-color: rgba(255, 255, 255, 0.7);
237
}
238
#overview StScrollBar StButton#vhandle:active, #screenShieldNotifications StScrollBar StButton#vhandle:active, #overview StScrollBar StButton#hhandle:active, #screenShieldNotifications StScrollBar StButton#hhandle:active {
240
background-color: white;
241
}
242
/* Slider */
244
.slider {
245
height: 20px;
246
color: #4285F4;
247
-slider-height: 2px;
248
-slider-background-color: rgba(0, 0, 0, 0.26);
249
-slider-border-color: transparent;
250
-slider-active-background-color: #4285F4;
251
-slider-active-border-color: transparent;
252
-slider-border-width: 0;
253
-slider-handle-radius: 6px;
254
}
255
/* Check Boxes */
257
.check-box * {
258
min-height: 16px;
259
padding: 8px 0;
260
}
261
.check-box StBoxLayout {
263
spacing: 8px;
264
}
265
.check-box StBin {
267
transition-duration: 100ms;
268
width: 24px;
269
height: 24px;
270
padding: 4px;
271
border-radius: 100px;
272
background-image: url("assets/checkbox-off.svg");
273
}
274
.check-box:focus StBin {
276
background-image: url("assets/checkbox-off.svg");
277
}
278
.check-box:hover StBin {
280
background-color: rgba(0, 0, 0, 0.08);
281
}
282
.check-box:active StBin {
284
transition-duration: 200ms;
285
background-color: rgba(0, 0, 0, 0.2);
286
}
287
.check-box:checked StBin {
289
background-image: url("assets/checkbox.svg");
290
}
291
.check-box:focus:checked StBin {
293
background-image: url("assets/checkbox.svg");
294
}
295
.check-box:hover:checked StBin {
297
background-color: rgba(66, 133, 244, 0.08);
298
}
299
.check-box:active:checked StBin {
301
background-color: rgba(66, 133, 244, 0.2);
302
}
303
/* Switches */
305
.toggle-switch {
306
width: 40px;
307
height: 20px;
308
background-size: contain;
309
}
310
.toggle-switch-us {
312
background-image: url("assets/toggle-off.svg");
313
}
314
.toggle-switch-us:checked {
316
background-image: url("assets/toggle-on.svg");
317
}
318
.toggle-switch-intl {
320
background-image: url("assets/toggle-off.svg");
321
}
322
.toggle-switch-intl:checked {
324
background-image: url("assets/toggle-on.svg");
325
}
326
/* links */
328
.shell-link {
329
transition-duration: 100ms;
330
border-radius: 4px;
331
color: #4285F4;
332
}
333
.shell-link:hover {
335
color: #4285F4;
336
background-color: rgba(66, 133, 244, 0.08);
337
}
338
.shell-link:active {
340
transition-duration: 200ms;
341
color: #4285F4;
342
background-color: rgba(66, 133, 244, 0.2);
343
}
344
/* Modal Dialogs */
346
.headline {
347
font-size: 15pt;
348
font-weight: 500;
349
}
350
.lightbox {
352
background-color: black;
353
}
354
.flashspot {
356
background-color: white;
357
}
358
.modal-dialog {
360
border-radius: 4px;
361
color: rgba(0, 0, 0, 0.87);
362
background-color: #FFFFFF;
363
border: none;
364
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
365
}
366
.modal-dialog .modal-dialog-content-box {
368
padding: 24px;
369
}
370
.modal-dialog .run-dialog-entry {
372
width: 20em;
373
margin-bottom: 0;
374
}
375
.modal-dialog .run-dialog-error-box {
377
padding-top: 16px;
378
spacing: 6px;
379
}
380
.modal-dialog .run-dialog-button-box {
382
padding-top: 1em;
383
}
384
.modal-dialog .run-dialog-label {
386
font-size: 1em;
387
font-weight: normal;
388
color: rgba(0, 0, 0, 0.54);
389
padding-bottom: .4em;
390
}
391
.mount-dialog-subject,
393
.end-session-dialog-subject {
394
font-size: 15pt;
395
font-weight: 500;
396
}
397
/* Message Dialog */
399
.message-dialog-main-layout {
400
padding: 12px 20px 0;
401
spacing: 12px;
402
}
403
.message-dialog-content {
405
max-width: 28em;
406
spacing: 20px;
407
}
408
.message-dialog-icon {
410
min-width: 48px;
411
icon-size: 48px;
412
}
413
.message-dialog-title {
415
font-weight: bold;
416
}
417
.message-dialog-subtitle {
419
color: rgba(0, 0, 0, 0.54);
420
font-weight: bold;
421
}
422
/* End Session Dialog */
424
.end-session-dialog {
425
spacing: 42px;
426
border: none;
427
}
428
.end-session-dialog-list {
430
padding-top: 20px;
431
}
432
.end-session-dialog-layout {
434
padding-left: 17px;
435
}
436
.end-session-dialog-layout:rtl {
438
padding-right: 17px;
439
}
440
.end-session-dialog-description {
442
width: 28em;
443
padding-bottom: 10px;
444
}
445
.end-session-dialog-description:rtl {
447
text-align: right;
448
}
449
.end-session-dialog-warning {
451
width: 28em;
452
color: #FBBC05;
453
padding-top: 6px;
454
}
455
.end-session-dialog-warning:rtl {
457
text-align: right;
458
}
459
.end-session-dialog-logout-icon {
461
border-radius: 5px;
462
width: 48px;
463
height: 48px;
464
background-size: contain;
465
}
466
.end-session-dialog-shutdown-icon {
468
color: rgba(0, 0, 0, 0.38);
469
width: 48px;
470
height: 48px;
471
}
472
.end-session-dialog-inhibitor-layout {
474
spacing: 16px;
475
max-height: 200px;
476
padding-right: 65px;
477
padding-left: 65px;
478
}
479
.end-session-dialog-session-list,
481
.end-session-dialog-app-list {
482
spacing: 1em;
483
}
484
.end-session-dialog-list-header {
486
font-weight: bold;
487
}
488
.end-session-dialog-list-header:rtl {
490
text-align: right;
491
}
492
.end-session-dialog-app-list-item,
494
.end-session-dialog-session-list-item {
495
spacing: 1em;
496
}
497
.end-session-dialog-app-list-item-name,
499
.end-session-dialog-session-list-item-name {
500
font-weight: bold;
501
}
502
.end-session-dialog-app-list-item-description {
504
color: rgba(0, 0, 0, 0.54);
505
font-size: 1em;
506
}
507
/* ShellMountOperation Dialogs */
509
.shell-mount-operation-icon {
510
icon-size: 48px;
511
}
512
.mount-dialog {
514
spacing: 24px;
515
}
516
.mount-dialog .message-dialog-title {
518
padding-top: 10px;
519
padding-left: 17px;
520
padding-bottom: 6px;
521
max-width: 34em;
522
}
523
.mount-dialog .message-dialog-title:rtl {
525
padding-left: 0px;
526
padding-right: 17px;
527
}
528
.mount-dialog .message-dialog-body {
530
padding-left: 17px;
531
width: 28em;
532
}
533
.mount-dialog .message-dialog-body:rtl {
535
padding-left: 0px;
536
padding-right: 17px;
537
}
538
.mount-dialog-app-list {
540
max-height: 200px;
541
padding-top: 24px;
542
padding-left: 49px;
543
padding-right: 32px;
544
}
545
.mount-dialog-app-list:rtl {
547
padding-right: 49px;
548
padding-left: 32px;
549
}
550
.mount-dialog-app-list-item {
552
color: rgba(0, 0, 0, 0.87);
553
}
554
.mount-dialog-app-list-item:hover {
556
color: rgba(0, 0, 0, 0.87);
557
}
558
.mount-dialog-app-list-item:ltr {
560
padding-right: 1em;
561
}
562
.mount-dialog-app-list-item:rtl {
564
padding-left: 1em;
565
}
566
.mount-dialog-app-list-item-icon:ltr {
568
padding-right: 17px;
569
}
570
.mount-dialog-app-list-item-icon:rtl {
572
padding-left: 17px;
573
}
574
.mount-dialog-app-list-item-name {
576
font-size: 1em;
577
}
578
/* Password or Authentication Dialog */
580
.prompt-dialog {
581
width: 34em;
582
border: none;
583
}
584
.prompt-dialog .message-dialog-main-layout {
586
spacing: 24px;
587
padding: 10px;
588
}
589
.prompt-dialog .message-dialog-content {
591
spacing: 16px;
592
}
593
.prompt-dialog .message-dialog-title {
595
font-size: 15pt;
596
font-weight: 500;
597
color: rgba(0, 0, 0, 0.87);
598
}
599
.prompt-dialog-description:rtl {
601
text-align: right;
602
}
603
.prompt-dialog-password-box {
605
spacing: 1em;
606
padding-bottom: 1em;
607
}
608
.prompt-dialog-error-label {
610
font-size: 1em;
611
color: #EA4335;
612
padding-bottom: 8px;
613
}
614
.prompt-dialog-info-label {
616
font-size: 1em;
617
padding-bottom: 8px;
618
}
619
.hidden {
621
color: rgba(0, 0, 0, 0);
622
}
623
.prompt-dialog-null-label {
625
font-size: 1em;
626
padding-bottom: 8px;
627
}
628
/* Polkit Dialog */
630
.polkit-dialog-user-layout {
631
padding-left: 10px;
632
spacing: 10px;
633
}
634
.polkit-dialog-user-layout:rtl {
636
padding-left: 0px;
637
padding-right: 10px;
638
}
639
.polkit-dialog-user-root-label {
641
color: #FBBC05;
642
}
643
.polkit-dialog-user-icon {
645
border-radius: 5px;
646
background-size: contain;
647
width: 48px;
648
height: 48px;
649
}
650
/* Audio selection dialog */
652
.audio-device-selection-dialog {
653
spacing: 30px;
654
}
655
.audio-selection-content {
657
spacing: 20px;
658
padding: 24px;
659
}
660
.audio-selection-title {
662
font-weight: bold;
663
text-align: center;
664
}
665
.audio-selection-box {
667
spacing: 20px;
668
}
669
.audio-selection-device {
671
border: 1px solid rgba(0, 0, 0, 0.12);
672
border-radius: 4px;
673
}
674
.audio-selection-device:active, .audio-selection-device:hover, .audio-selection-device:focus {
676
background-color: #4285F4;
677
}
678
.audio-selection-device-box {
680
padding: 20px;
681
spacing: 20px;
682
}
683
.audio-selection-device-icon {
685
icon-size: 64px;
686
}
687
/* Access Dialog */
689
.access-dialog {
690
spacing: 30px;
691
}
692
/* Geolocation Dialog */
694
.geolocation-dialog {
695
spacing: 30px;
696
}
697
/* Extension Dialog */
699
.extension-dialog .message-dialog-main-layout {
700
spacing: 24px;
701
padding: 10px;
702
}
703
.extension-dialog .message-dialog-title {
705
color: rgba(0, 0, 0, 0.54);
706
}
707
/* Inhibit-Shortcuts Dialog */
709
.inhibit-shortcuts-dialog {
710
spacing: 30px;
711
}
712
/* Network Agent Dialog */
714
.network-dialog-secret-table {
715
spacing-rows: 15px;
716
spacing-columns: 1em;
717
}
718
.keyring-dialog-control-table {
720
spacing-rows: 15px;
721
spacing-columns: 1em;
722
}
723
/* Popovers/Menus */
725
.popup-menu {
726
min-width: 200px;
727
}
728
.popup-menu .popup-sub-menu {
730
background-color: #EEEEEE;
731
box-shadow: 0 0 transparent;
732
}
733
.popup-menu .popup-menu-content {
735
padding: 8px 0;
736
}
737
.popup-menu .popup-menu-item {
739
spacing: 8px;
740
transition-duration: 100ms;
741
}
742
.popup-menu .popup-menu-item:ltr {
744
padding: 0.4em 24px 0.4em 0;
745
}
746
.popup-menu .popup-menu-item:rtl {
748
padding: 0.4em 0 0.4em 24px;
749
}
750
.popup-menu .popup-menu-item:checked {
752
background-color: #4285F4;
753
color: white;
754
box-shadow: 0 0 transparent;
755
font-weight: normal;
756
}
757
.popup-menu .popup-menu-item:checked.selected {
759
background-color: #518ff5;
760
color: white;
761
}
762
.popup-menu .popup-menu-item:checked:active {
764
background-color: #689df6;
765
color: white !important;
766
}
767
.popup-menu .popup-menu-item:checked:insensitive {
769
color: rgba(255, 255, 255, 0.5);
770
}
771
.popup-menu .popup-menu-item.selected {
773
background-color: rgba(0, 0, 0, 0.08);
774
color: rgba(0, 0, 0, 0.87);
775
transition-duration: 0ms;
776
}
777
.popup-menu .popup-menu-item:active {
779
background-color: rgba(0, 0, 0, 0.2);
780
color: rgba(0, 0, 0, 0.87);
781
transition-duration: 200ms;
782
}
783
.popup-menu .popup-menu-item.selected:active {
785
color: rgba(0, 0, 0, 0.87);
786
}
787
.popup-menu .popup-menu-item:insensitive {
789
color: rgba(0, 0, 0, 0.38);
790
}
791
.popup-menu .popup-inactive-menu-item {
793
color: rgba(0, 0, 0, 0.87);
794
}
795
.popup-menu .popup-inactive-menu-item:insensitive {
797
color: rgba(0, 0, 0, 0.38);
798
}
799
.popup-menu.panel-menu {
801
-boxpointer-gap: 4px;
802
margin-bottom: 1.75em;
803
}
804
.popup-menu-ornament {
806
text-align: right;
807
width: 16px;
808
height: 16px;
809
}
810
.popup-menu-boxpointer,
812
.candidate-popup-boxpointer {
813
-arrow-border-radius: 0;
814
-arrow-background-color: transparent;
815
-arrow-border-width: 0;
816
-arrow-border-color: transparent;
817
-arrow-base: 0;
818
-arrow-rise: 0;
819
-arrow-box-shadow: none;
820
margin: 5px 8px 8px;
821
background-color: #FFFFFF;
822
border-radius: 4px;
823
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
824
}
825
.popup-separator-menu-item {
827
height: 1px;
828
margin: 8px 40px;
829
background-color: transparent;
830
border-color: rgba(0, 0, 0, 0.12);
831
border-bottom-width: 1px;
832
border-bottom-style: solid;
833
}
834
.background-menu {
836
-boxpointer-gap: 4px;
837
-arrow-rise: 0;
838
}
839
/* fallback menu
841
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
842
app menu inside the main app window itself rather than the top bar
843
*/
844
/* OSD */
845
.osd-window {
846
text-align: center;
847
font-weight: bold;
848
spacing: 1em;
849
margin: 32px;
850
min-width: 64px;
851
min-height: 64px;
852
}
853
.osd-window .osd-monitor-label {
855
font-size: 45px;
856
font-weight: 400;
857
}
858
.osd-window .level {
860
height: 8px;
861
border-radius: 0;
862
background-color: rgba(0, 0, 0, 0.12);
863
color: rgba(0, 0, 0, 0.87);
864
}
865
.osd-window .level-bar {
867
background-color: #4285F4;
868
border-radius: 0;
869
}
870
/* Pad OSD */
872
.pad-osd-window {
873
padding: 32px;
874
background-color: rgba(0, 0, 0, 0.6);
875
}
876
.pad-osd-window .pad-osd-title-box {
878
spacing: 12px;
879
}
880
.pad-osd-window .pad-osd-title-menu-box {
882
spacing: 6px;
883
}
884
.combo-box-label {
886
width: 15em;
887
}
888
/* App Switcher */
890
.switcher-popup {
891
padding: 8px;
892
spacing: 16px;
893
}
894
.switcher-list-item-container {
896
spacing: 8px;
897
}
898
.switcher-list .item-box {
900
transition-duration: 100ms;
901
padding: 8px;
902
border-radius: 4px;
903
}
904
.switcher-list .item-box:outlined {
906
padding: 8px;
907
border: none;
908
background-color: rgba(0, 0, 0, 0.12);
909
color: rgba(0, 0, 0, 0.87);
910
}
911
.switcher-list .item-box:selected {
913
background-color: #4285F4;
914
color: white;
915
}
916
.switcher-list .thumbnail-box {
918
padding: 2px;
919
spacing: 4px;
920
}
921
.switcher-list .thumbnail {
923
width: 256px;
924
}
925
.switcher-list .separator {
927
width: 1px;
928
background: rgba(0, 0, 0, 0.12);
929
}
930
.switcher-arrow {
932
transition-duration: 100ms;
933
border-color: rgba(0, 0, 0, 0);
934
color: rgba(0, 0, 0, 0.54);
935
}
936
.switcher-arrow:highlighted {
938
color: rgba(0, 0, 0, 0.87);
939
}
940
.input-source-switcher-symbol {
942
font-size: 45px;
943
font-weight: 400;
944
width: 96px;
945
height: 96px;
946
}
947
/* Window Cycler */
949
.cycler-highlight {
950
border: 4px solid #4285F4;
951
}
952
/* Workspace Switcher */
954
.workspace-switcher-group {
955
padding: 8px;
956
}
957
.workspace-switcher {
959
background: transparent;
960
border: 0px;
961
border-radius: 0px;
962
padding: 0px;
963
spacing: 8px;
964
}
965
.ws-switcher-active-up, .ws-switcher-active-down {
967
height: 48px;
968
background-color: #4285F4;
969
color: white;
970
background-size: 32px;
971
border-radius: 4px;
972
}
973
.ws-switcher-box {
975
height: 48px;
976
border: none;
977
background: rgba(0, 0, 0, 0.12);
978
border-radius: 4px;
979
}
980
.osd-window,
982
.resize-popup,
983
.switcher-list, .workspace-switcher-container {
984
color: rgba(0, 0, 0, 0.87);
985
background-color: #FFFFFF;
986
border: none;
987
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
988
border-radius: 4px;
989
padding: 12px;
990
}
991
/* Tiled window previews */
993
.tile-preview {
994
background-color: rgba(123, 170, 247, 0.3);
995
border: 1px solid #7BAAF7;
996
}
997
.tile-preview-left.on-primary {
999
border-radius: 0;
1000
}
1001
.tile-preview-right.on-primary {
1003
border-radius: 0;
1004
}
1005
.tile-preview-left.tile-preview-right.on-primary {
1007
border-radius: 0;
1008
}
1009
/* TOP BAR */
1011
#panel {
1012
background-color: rgba(0, 0, 0, 0.6);
1013
/* transition from solid to transparent */
1014
transition-duration: 250ms;
1015
font-weight: bold;
1016
height: 28px;
1017
}
1018
#panel:overview, #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
1020
background-color: transparent;
1021
}
1022
#panel #panelLeft, #panel #panelCenter {
1024
spacing: 0;
1025
}
1026
#panel .panel-corner {
1028
-panel-corner-radius: 0;
1029
-panel-corner-background-color: rgba(0, 0, 0, 0.6);
1030
-panel-corner-border-width: 2px;
1031
-panel-corner-border-color: transparent;
1032
}
1033
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
1035
-panel-corner-border-color: white;
1036
}
1037
#panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
1039
-panel-corner-radius: 0;
1040
-panel-corner-background-color: transparent;
1041
-panel-corner-border-color: transparent;
1042
}
1043
#panel .panel-button {
1045
-natural-hpadding: 12px;
1046
-minimum-hpadding: 6px;
1047
font-weight: bold;
1048
color: rgba(255, 255, 255, 0.7);
1049
text-shadow: none;
1050
transition-duration: 100ms;
1051
}
1052
#panel .panel-button .app-menu-icon {
1054
-st-icon-style: symbolic;
1055
margin-left: 4px;
1056
margin-right: 4px;
1057
}
1058
#panel .panel-button .system-status-icon,
1060
#panel .panel-button .app-menu-icon > StIcon,
1061
#panel .panel-button .popup-menu-arrow {
1062
icon-shadow: none;
1063
}
1064
#panel .panel-button:hover {
1066
color: white;
1067
text-shadow: none;
1068
}
1069
#panel .panel-button:hover .system-status-icon,
1071
#panel .panel-button:hover .app-menu-icon > StIcon,
1072
#panel .panel-button:hover .popup-menu-arrow {
1073
icon-shadow: none;
1074
}
1075
#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
1077
background-color: rgba(0, 0, 0, 0.01);
1078
box-shadow: inset 0 -2px 0px white;
1079
color: white;
1080
}
1081
#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 {
1083
icon-shadow: none;
1084
}
1085
#panel .panel-button .system-status-icon {
1087
icon-size: 1.14286em;
1088
padding: 0 4px;
1089
}
1090
.unlock-screen #panel .panel-button,
1092
.login-screen #panel .panel-button,
1093
.lock-screen #panel .panel-button {
1094
color: rgba(255, 255, 255, 0.7);
1095
}
1096
.unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
1098
.login-screen #panel .panel-button:focus,
1099
.login-screen #panel .panel-button:hover,
1100
.login-screen #panel .panel-button:active,
1101
.lock-screen #panel .panel-button:focus,
1102
.lock-screen #panel .panel-button:hover,
1103
.lock-screen #panel .panel-button:active {
1104
color: white;
1105
}
1106
#panel .panel-status-indicators-box,
1108
#panel .panel-status-menu-box {
1109
spacing: 2px;
1110
}
1111
#panel .power-status.panel-status-indicators-box {
1113
spacing: 0;
1114
}
1115
#panel .screencast-indicator {
1117
color: #FBBC05;
1118
}
1119
#panel.solid {
1121
background-color: rgba(0, 0, 0, 0.6);
1122
/* transition from transparent to solid */
1123
transition-duration: 250ms;
1124
background-gradient-direction: none;
1125
text-shadow: none;
1126
}
1127
#panel.solid:overview {
1129
background-color: transparent;
1130
}
1131
#panel.solid .panel-corner {
1133
-panel-corner-background-color: rgba(0, 0, 0, 0.6);
1134
}
1135
#panel.solid .panel-button {
1137
color: rgba(255, 255, 255, 0.7);
1138
text-shadow: none;
1139
}
1140
#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 {
1142
color: white;
1143
}
1144
#panel.solid .system-status-icon,
1146
#panel.solid .app-menu-icon > StIcon,
1147
#panel.solid .popup-menu-arrow {
1148
icon-shadow: none;
1149
}
1150
#calendarArea {
1152
padding: 8px 16px;
1153
}
1154
.calendar {
1156
margin-bottom: 0;
1157
}
1158
.calendar,
1160
.datemenu-today-button,
1161
.datemenu-displays-box,
1162
.message-list-sections {
1163
margin: 0 8px;
1164
}
1165
.datemenu-calendar-column {
1167
spacing: 8px;
1168
}
1169
.datemenu-displays-section {
1171
padding-bottom: 0;
1172
}
1173
.datemenu-displays-box {
1175
spacing: 8px;
1176
}
1177
.datemenu-calendar-column {
1179
border: 0 solid rgba(0, 0, 0, 0.12);
1180
}
1181
.datemenu-calendar-column:ltr {
1183
border-left-width: 0;
1184
}
1185
.datemenu-calendar-column:rtl {
1187
border-right-width: 0;
1188
}
1189
.datemenu-today-button,
1191
.world-clocks-button,
1192
.weather-button,
1193
.events-section-title {
1194
min-height: 20px;
1195
padding: 4px 8px;
1196
border-radius: 4px;
1197
}
1198
.datemenu-today-button {
1200
min-height: 48px;
1201
}
1202
.message-list-section-list:ltr {
1204
padding-left: 0;
1205
}
1206
.message-list-section-list:rtl {
1208
padding-right: 0;
1209
}
1210
.datemenu-today-button,
1212
.world-clocks-button,
1213
.weather-button,
1214
.events-section-title {
1215
transition-duration: 100ms;
1216
}
1217
.datemenu-today-button:hover, .datemenu-today-button:focus,
1219
.world-clocks-button:hover,
1220
.world-clocks-button:focus,
1221
.weather-button:hover,
1222
.weather-button:focus,
1223
.events-section-title:hover,
1224
.events-section-title:focus {
1225
color: rgba(0, 0, 0, 0.87);
1226
background-color: rgba(0, 0, 0, 0.08);
1227
}
1228
.datemenu-today-button:active,
1230
.world-clocks-button:active,
1231
.weather-button:active,
1232
.events-section-title:active {
1233
transition-duration: 200ms;
1234
color: rgba(0, 0, 0, 0.87);
1235
background-color: rgba(0, 0, 0, 0.2);
1236
}
1237
.datemenu-today-button .date-label {
1239
font-size: 18pt;
1240
font-weight: 400;
1241
}
1242
.world-clocks-header,
1244
.weather-header,
1245
.events-section-title {
1246
color: rgba(0, 0, 0, 0.54);
1247
font-weight: bold;
1248
}
1249
.world-clocks-grid {
1251
spacing-rows: 0.4em;
1252
}
1253
.weather-box {
1255
spacing: 0.4em;
1256
}
1257
.calendar-month-label {
1259
transition-duration: 100ms;
1260
height: 16px;
1261
margin: 2px;
1262
padding: 6px 16px;
1263
border-radius: 4px;
1264
color: rgba(0, 0, 0, 0.87);
1265
font-weight: bold;
1266
text-align: center;
1267
}
1268
.calendar-month-label:focus {
1270
background-color: rgba(0, 0, 0, 0.12);
1271
}
1272
.pager-button {
1274
transition-duration: 100ms;
1275
width: 28px;
1276
height: 28px;
1277
margin: 2px;
1278
border-radius: 100px;
1279
background-color: transparent;
1280
color: rgba(0, 0, 0, 0.87);
1281
}
1282
.pager-button:hover, .pager-button:focus {
1284
background-color: rgba(0, 0, 0, 0.08);
1285
}
1286
.pager-button:active {
1288
background-color: rgba(0, 0, 0, 0.2);
1289
transition-duration: 200ms;
1290
}
1291
.calendar-change-month-back {
1293
background-image: url("assets/calendar-arrow-left.svg");
1294
}
1295
.calendar-change-month-back:rtl {
1297
background-image: url("assets/calendar-arrow-right.svg");
1298
}
1299
.calendar-change-month-forward {
1301
background-image: url("assets/calendar-arrow-right.svg");
1302
}
1303
.calendar-change-month-forward:rtl {
1305
background-image: url("assets/calendar-arrow-left.svg");
1306
}
1307
.calendar-day-base {
1309
transition-duration: 100ms;
1310
font-size: 9pt;
1311
font-weight: 400;
1312
text-align: center;
1313
width: 28px;
1314
height: 28px;
1315
padding: 0;
1316
margin: 2px;
1317
border-radius: 100px;
1318
}
1319
.calendar-day-base:hover, .calendar-day-base:focus {
1321
background-color: rgba(0, 0, 0, 0.08);
1322
}
1323
.calendar-day-base:active {
1325
transition-duration: 200ms;
1326
color: inherit;
1327
background-color: rgba(0, 0, 0, 0.2);
1328
border-color: transparent;
1329
}
1330
.calendar-day-base:selected {
1332
color: white;
1333
background-color: #4285F4;
1334
border-color: transparent;
1335
}
1336
.calendar-day-base.calendar-day-heading {
1338
width: 28px;
1339
height: 21px;
1340
margin-top: 2px;
1341
padding: 7px 0 0;
1342
border-radius: 100px;
1343
background-color: transparent;
1344
color: rgba(0, 0, 0, 0.38);
1345
font-size: 9pt;
1346
font-weight: 400;
1347
font-weight: bold;
1348
text-align: center;
1349
}
1350
.calendar-day {
1352
border-width: 0;
1353
}
1354
.calendar-day-top {
1356
border-top-width: 0;
1357
}
1358
.calendar-day-left {
1360
border-left-width: 0;
1361
}
1362
.calendar-nonwork-day {
1364
color: rgba(0, 0, 0, 0.87);
1365
}
1366
.calendar-today {
1368
font-weight: bold !important;
1369
border: none;
1370
}
1371
.calendar-day-with-events {
1373
color: #4285F4;
1374
font-weight: normal;
1375
text-decoration: underline;
1376
background-image: none;
1377
}
1378
.calendar-other-month-day {
1380
color: rgba(0, 0, 0, 0.26);
1381
opacity: 0.5;
1382
}
1383
.calendar-week-number {
1385
width: 28px;
1386
height: 21px;
1387
margin: 2px;
1388
padding: 7px 0 0;
1389
border-radius: 100px;
1390
background-color: transparent;
1391
color: rgba(0, 0, 0, 0.38);
1392
font-size: inherit;
1393
font-weight: bold;
1394
text-align: center;
1395
}
1396
/* Message list */
1398
.message-list {
1399
width: 420px;
1400
}
1401
.message-list-clear-button.button {
1403
background-color: transparent;
1404
margin: 8px 8px 0;
1405
}
1406
.message-list-clear-button.button:hover, .message-list-clear-button.button:focus {
1408
background-color: rgba(0, 0, 0, 0.08);
1409
}
1410
.message-list-clear-button.button:active {
1412
background-color: rgba(0, 0, 0, 0.2);
1413
}
1414
.message-list-sections {
1416
spacing: 8px;
1417
}
1418
.message-list-section,
1420
.message-list-section-list {
1421
spacing: 8px;
1422
}
1423
.message {
1425
transition-duration: 100ms;
1426
min-height: 56px;
1427
background-color: transparent;
1428
border-radius: 4px;
1429
}
1430
.message:hover, .message:focus {
1432
background-color: rgba(0, 0, 0, 0.08);
1433
}
1434
.message:active {
1436
transition-duration: 200ms;
1437
background-color: rgba(0, 0, 0, 0.2);
1438
}
1439
.message-icon-bin {
1441
padding: 8px 0px 8px 8px;
1442
}
1443
.message-icon-bin:rtl {
1445
padding: 8px 8px 8px 0px;
1446
}
1447
.message-icon-bin > StIcon {
1449
color: rgba(0, 0, 0, 0.87);
1450
icon-size: 1.14286em;
1451
-st-icon-style: requested;
1452
margin: 4px 0px 4px 4px;
1453
}
1454
.message-icon-bin > StIcon:rtl {
1456
margin: 4px 4px 4px 0px;
1457
}
1458
.message-secondary-bin {
1460
padding: 0 8px;
1461
}
1462
.message-secondary-bin > .event-time {
1464
min-height: 22px;
1465
padding-top: 2px;
1466
color: rgba(0, 0, 0, 0.54);
1467
font-size: 1em;
1468
/* HACK: the label should be baseline-aligned with a 1em label,
1469
fake this with some bottom padding */
1470
padding-bottom: 0;
1471
}
1472
.message-secondary-bin > StIcon {
1474
icon-size: 1.14286em;
1475
}
1476
.message-title {
1478
min-height: 22px;
1479
padding-top: 2px;
1480
color: rgba(0, 0, 0, 0.87);
1481
font-weight: bold;
1482
font-size: 1em;
1483
}
1484
.message-content {
1486
min-height: 40px;
1487
padding: 8px;
1488
color: rgba(0, 0, 0, 0.54);
1489
font-size: 1em;
1490
}
1491
.message-content * > StIcon {
1493
transition-duration: 100ms;
1494
icon-size: 16px;
1495
border-radius: 16px;
1496
padding: 4px;
1497
color: rgba(0, 0, 0, 0.54);
1498
}
1499
/* FIXME: how do you do this in sass? */
1501
.message-content *:hover > StIcon,
1502
.message-content *:focus > StIcon {
1503
color: rgba(0, 0, 0, 0.87);
1504
background-color: rgba(0, 0, 0, 0.08);
1505
}
1506
.message-content *:active > StIcon {
1508
transition-duration: 200ms;
1509
color: rgba(0, 0, 0, 0.87);
1510
background-color: rgba(0, 0, 0, 0.2);
1511
}
1512
.message-media-control {
1514
transition-duration: 100ms;
1515
margin: 16px 0;
1516
padding: 8px;
1517
border-radius: 100px;
1518
color: rgba(0, 0, 0, 0.54);
1519
}
1520
.message-media-control:hover, .message-media-control:focus {
1522
color: rgba(0, 0, 0, 0.87);
1523
background-color: rgba(0, 0, 0, 0.08);
1524
}
1525
.message-media-control:active {
1527
color: rgba(0, 0, 0, 0.87);
1528
background-color: rgba(0, 0, 0, 0.2);
1529
transition-duration: 200ms;
1530
}
1531
.message-media-control:insensitive {
1533
color: rgba(0, 0, 0, 0.26);
1534
}
1535
.message-media-control:last-child:ltr {
1537
margin-right: 16px;
1538
padding-right: 8px;
1539
}
1540
.message-media-control:last-child:rtl {
1542
margin-left: 16px;
1543
padding-left: 8px;
1544
}
1545
.media-message-cover-icon {
1547
icon-size: 32px !important;
1548
margin: 8px 0px 8px 4px !important;
1549
}
1550
.media-message-cover-icon:rtl {
1552
margin: 8px 4px 8px 0px !important;
1553
}
1554
.media-message-cover-icon.fallback {
1556
icon-size: 16px !important;
1557
padding: 8px;
1558
border: none;
1559
border-radius: 4px;
1560
background-color: rgba(0, 0, 0, 0.12);
1561
color: rgba(0, 0, 0, 0.38);
1562
}
1563
.system-switch-user-submenu-icon.user-icon {
1565
icon-size: 20px;
1566
padding: 0 2px;
1567
}
1568
.system-switch-user-submenu-icon.default-icon {
1570
icon-size: 16px;
1571
padding: 0 4px;
1572
}
1573
#appMenu {
1575
spinner-image: url("process-working.svg");
1576
spacing: 4px;
1577
}
1578
#appMenu .label-shadow {
1580
color: transparent;
1581
}
1582
.aggregate-menu {
1584
min-width: 280px;
1585
}
1586
.aggregate-menu .popup-menu-icon {
1588
padding: 0 4px;
1589
}
1590
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr {
1592
/* 8px spacing + 2*4px padding */
1593
padding-left: 16px;
1594
margin-left: 1.14286em;
1595
}
1596
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl {
1598
/* 8px spacing + 2*4px padding */
1599
padding-right: 16px;
1600
margin-right: 1.14286em;
1601
}
1602
.system-menu-action {
1604
color: rgba(0, 0, 0, 0.54);
1605
border-radius: 100px;
1606
/* wish we could do 50% */
1607
padding: 12px;
1608
border: none;
1609
transition-duration: 100ms;
1610
}
1611
.system-menu-action:hover, .system-menu-action:focus {
1613
background-color: rgba(0, 0, 0, 0.08);
1614
color: rgba(0, 0, 0, 0.87);
1615
border: none;
1616
padding: 12px;
1617
}
1618
.system-menu-action:active {
1620
background-color: rgba(0, 0, 0, 0.2);
1621
color: rgba(0, 0, 0, 0.87);
1622
transition-duration: 200ms;
1623
}
1624
.system-menu-action > StIcon {
1626
icon-size: 16px;
1627
}
1628
.ripple-box {
1630
width: 48px;
1631
height: 48px;
1632
border-radius: 0 0 48px 0;
1633
background-color: rgba(255, 255, 255, 0.3);
1634
background-image: none;
1635
background-size: auto;
1636
}
1637
.ripple-box:rtl {
1639
border-radius: 0 0 0 48px;
1640
background-image: none;
1641
}
1642
.popup-menu-arrow {
1644
width: 16px;
1645
height: 16px;
1646
}
1647
.popup-menu-icon {
1649
icon-size: 1.14286em;
1650
}
1651
.window-close {
1653
height: 32px;
1654
width: 32px;
1655
-shell-close-overlap: 16px;
1656
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1657
background-image: url("assets/window-close.svg");
1658
background-size: 32px;
1659
}
1660
.window-close:hover {
1662
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1663
background-image: url("assets/window-close.svg");
1664
}
1665
.window-close:active {
1667
background-image: url("assets/window-close-active.svg");
1668
}
1669
.window-close:rtl {
1671
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1672
}
1673
.window-close:rtl:hover {
1675
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1676
}
1677
/* NETWORK DIALOGS */
1679
.nm-dialog {
1680
max-height: 34em;
1681
min-height: 31em;
1682
min-width: 32em;
1683
}
1684
.nm-dialog-content {
1686
spacing: 20px;
1687
padding: 24px;
1688
}
1689
.nm-dialog-header-hbox {
1691
spacing: 10px;
1692
}
1693
.nm-dialog-airplane-box {
1695
spacing: 12px;
1696
}
1697
.nm-dialog-airplane-headline {
1699
font-weight: bold;
1700
text-align: center;
1701
}
1702
.nm-dialog-airplane-text {
1704
color: rgba(0, 0, 0, 0.87);
1705
}
1706
.nm-dialog-header-icon {
1708
icon-size: 32px;
1709
}
1710
.nm-dialog-scroll-view {
1712
border: none;
1713
}
1714
.nm-dialog-header {
1716
font-size: 15pt;
1717
font-weight: 500;
1718
}
1719
.nm-dialog-item {
1721
transition-duration: 100ms;
1722
font-size: 1em;
1723
border-bottom: none;
1724
border-radius: 4px;
1725
padding: 12px;
1726
spacing: 20px;
1727
}
1728
.nm-dialog-item:hover, .nm-dialog-item:focus {
1730
background-color: rgba(0, 0, 0, 0.08);
1731
}
1732
.nm-dialog-item:active {
1734
transition-duration: 200ms;
1735
background-color: rgba(0, 0, 0, 0.2);
1736
}
1737
.nm-dialog-item:selected {
1739
background-color: #4285F4;
1740
color: white;
1741
}
1742
.nm-dialog-icons {
1744
spacing: .5em;
1745
}
1746
.nm-dialog-icon {
1748
icon-size: 16px;
1749
}
1750
.no-networks-label {
1752
color: rgba(0, 0, 0, 0.38);
1753
}
1754
.no-networks-box {
1756
spacing: 12px;
1757
}
1758
/* OVERVIEW */
1760
#overview {
1761
spacing: 24px;
1762
}
1763
.overview-controls {
1765
padding-bottom: 32px;
1766
}
1767
.window-picker {
1769
-horizontal-spacing: 16px;
1770
-vertical-spacing: 16px;
1771
padding: 0 16px 32px;
1772
}
1773
.window-picker.external-monitor {
1775
padding: 16px;
1776
}
1777
.window-clone-border {
1779
border: 4px solid rgba(255, 255, 255, 0.3);
1780
border-radius: 4px;
1781
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
1782
}
1783
.window-caption {
1785
spacing: 25px;
1786
color: white;
1787
background-color: rgba(0, 0, 0, 0.6);
1788
border-radius: 4px;
1789
padding: 4px 8px;
1790
}
1791
.search-entry {
1793
width: 304px;
1794
padding: 0 8px;
1795
border-radius: 4px 4px 0 0;
1796
color: rgba(255, 255, 255, 0.5);
1797
selection-background-color: rgba(255, 255, 255, 0.3);
1798
selected-color: white;
1799
transition-duration: 100ms;
1800
background-color: rgba(255, 255, 255, 0.04);
1801
border-color: transparent;
1802
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1803
}
1804
.search-entry:hover {
1806
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1807
}
1808
.search-entry:focus {
1810
border-color: transparent;
1811
box-shadow: inset 0 -2px white;
1812
padding: 0 8px;
1813
border-width: 0;
1814
color: white;
1815
}
1816
.search-entry .search-entry-icon {
1818
icon-size: 16px;
1819
padding: 0 0;
1820
color: rgba(255, 255, 255, 0.7);
1821
}
1822
.search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
1824
color: white;
1825
}
1826
#searchResultsBin {
1828
max-width: 1000px;
1829
}
1830
#searchResultsContent {
1832
padding-left: 20px;
1833
padding-right: 20px;
1834
spacing: 16px;
1835
}
1836
.search-section {
1838
spacing: 16px;
1839
}
1840
.search-section-content {
1842
spacing: 32px;
1843
}
1844
.list-search-results {
1846
spacing: 3px;
1847
}
1848
.search-section-separator {
1850
height: 1px;
1851
background-color: rgba(255, 255, 255, 0.12);
1852
}
1853
.list-search-result-content {
1855
spacing: 30px;
1856
}
1857
.list-search-result-title {
1859
font-size: 11.25pt;
1860
font-weight: 400;
1861
color: white;
1862
spacing: 12px;
1863
}
1864
.list-search-result-description {
1866
color: rgba(255, 255, 255, 0.7);
1867
}
1868
.list-search-provider-details {
1870
width: 150px;
1871
color: rgba(255, 255, 255, 0.7);
1872
margin-top: 0.24em;
1873
}
1874
.list-search-provider-content {
1876
spacing: 20px;
1877
}
1878
.search-provider-icon {
1880
padding: 15px;
1881
}
1882
/* DASHBOARD */
1884
#dash {
1885
transition-duration: 250ms;
1886
font-size: 1em;
1887
color: white;
1888
background-color: rgba(255, 255, 255, 0.1);
1889
padding: 3px 0;
1890
border: none;
1891
border-left: 0px;
1892
border-radius: 0px 4px 4px 0px;
1893
}
1894
#dash:rtl {
1896
border-radius: 4px 0 0 4px;
1897
}
1898
#dash .placeholder {
1900
background-image: url("assets/dash-placeholder.svg");
1901
background-size: contain;
1902
height: 24px;
1903
}
1904
#dash .empty-dash-drop-target {
1906
width: 24px;
1907
height: 24px;
1908
}
1909
.dash-item-container > StWidget {
1911
padding: 3px 6px;
1912
}
1913
.dash-label {
1915
border-radius: 4px;
1916
padding: 7px 8px;
1917
color: rgba(0, 0, 0, 0.87);
1918
background-color: #FFFFFF;
1919
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1920
text-align: center;
1921
-x-offset: 8px;
1922
}
1923
/* App Vault/Grid */
1925
.icon-grid {
1926
spacing: 30px;
1927
-shell-grid-horizontal-item-size: 136px;
1928
-shell-grid-vertical-item-size: 136px;
1929
}
1930
.icon-grid .overview-icon {
1932
icon-size: 96px;
1933
}
1934
.system-action-icon {
1936
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
1937
background-color: #212121;
1938
color: #FFFFFF;
1939
border-radius: 99px;
1940
icon-size: 48px;
1941
}
1942
.app-view-controls {
1944
width: 320px;
1945
padding-bottom: 32px;
1946
}
1947
.app-view-control {
1949
padding: 0 16px;
1950
font-weight: bold;
1951
color: rgba(255, 255, 255, 0.7);
1952
}
1953
.app-view-control:hover {
1955
color: white;
1956
background-color: rgba(255, 255, 255, 0.08) !important;
1957
}
1958
.app-view-control:active {
1960
color: white;
1961
background-color: rgba(255, 255, 255, 0.2) !important;
1962
}
1963
.app-view-control:checked {
1965
color: white;
1966
background-color: rgba(0, 0, 0, 0.01) !important;
1967
box-shadow: inset 0 2px 0 white;
1968
}
1969
.app-view-control:first-child {
1971
border-right-width: 0;
1972
border-radius: 4px;
1973
}
1974
.app-view-control:first-child:checked {
1976
border-radius: 0;
1977
}
1978
.app-view-control:last-child {
1980
border-radius: 4px;
1981
}
1982
.app-view-control:last-child:checked {
1984
border-radius: 0;
1985
}
1986
.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
1988
.list-search-result:focus,
1989
.list-search-result:selected,
1990
.list-search-result:hover {
1991
background-color: rgba(255, 255, 255, 0.08);
1992
transition-duration: 0ms;
1993
}
1994
.search-provider-icon:active, .search-provider-icon:checked,
1996
.list-search-result:active,
1997
.list-search-result:checked {
1998
background-color: rgba(255, 255, 255, 0.2);
1999
transition-duration: 200ms;
2000
}
2001
.app-well-app:hover .overview-icon,
2003
.app-well-app:focus .overview-icon,
2004
.app-well-app:selected .overview-icon,
2005
.app-well-app.app-folder:hover .overview-icon,
2006
.app-well-app.app-folder:focus .overview-icon,
2007
.app-well-app.app-folder:selected .overview-icon,
2008
.show-apps:hover .overview-icon,
2009
.show-apps:focus .overview-icon,
2010
.show-apps:selected .overview-icon,
2011
.grid-search-result:hover .overview-icon,
2012
.grid-search-result:focus .overview-icon,
2013
.grid-search-result:selected .overview-icon {
2014
background-color: rgba(255, 255, 255, 0.08);
2015
transition-duration: 0ms;
2016
border-image: none;
2017
background-image: none;
2018
}
2019
.app-well-app:active .overview-icon,
2021
.app-well-app:checked .overview-icon,
2022
.app-well-app.app-folder:active .overview-icon,
2023
.app-well-app.app-folder:checked .overview-icon,
2024
.show-apps:active .overview-icon,
2025
.show-apps:checked .overview-icon,
2026
.grid-search-result:active .overview-icon,
2027
.grid-search-result:checked .overview-icon {
2028
background-color: rgba(255, 255, 255, 0.2);
2029
box-shadow: 0 0 transparent;
2030
transition-duration: 200ms;
2031
}
2032
.app-well-app-running-dot {
2034
width: 32px;
2035
height: 2px;
2036
background-color: white;
2037
margin-bottom: 0;
2038
}
2039
.search-provider-icon,
2041
.list-search-result, .app-well-app .overview-icon,
2042
.app-well-app.app-folder .overview-icon,
2043
.show-apps .overview-icon,
2044
.grid-search-result .overview-icon {
2045
color: white;
2046
border-radius: 4px;
2047
padding: 6px;
2048
border: none;
2049
transition-duration: 100ms;
2050
text-align: center;
2051
}
2052
.app-well-app.app-folder > .overview-icon {
2054
background-color: rgba(255, 255, 255, 0.1);
2055
}
2056
.show-apps .show-apps-icon {
2058
color: rgba(255, 255, 255, 0.7);
2059
}
2060
.show-apps:hover .show-apps-icon,
2062
.show-apps:active .show-apps-icon,
2063
.show-apps:checked .show-apps-icon,
2064
.show-apps:focus .show-apps-icon {
2065
color: white;
2066
transition-duration: 100ms;
2067
}
2068
.app-folder-popup {
2070
-arrow-border-radius: 4px;
2071
-arrow-background-color: rgba(255, 255, 255, 0.1);
2072
-arrow-base: 24px;
2073
-arrow-rise: 12px;
2074
}
2075
.app-folder-popup-bin {
2077
padding: 5px;
2078
}
2079
.app-folder-icon {
2081
padding: 5px;
2082
spacing-rows: 5px;
2083
spacing-columns: 5px;
2084
}
2085
.page-indicator {
2087
padding: 15px 20px;
2088
}
2089
.page-indicator .page-indicator-icon {
2091
width: 12px;
2092
height: 12px;
2093
border-radius: 12px;
2094
background-image: none;
2095
background-color: rgba(255, 255, 255, 0.3);
2096
transition-duration: 100ms;
2097
}
2098
.page-indicator:hover .page-indicator-icon {
2100
background-image: none;
2101
background-color: rgba(255, 255, 255, 0.5);
2102
}
2103
.page-indicator:active .page-indicator-icon {
2105
background-image: none;
2106
background-color: rgba(255, 255, 255, 0.7);
2107
}
2108
.page-indicator:checked .page-indicator-icon {
2110
background-image: none;
2111
background-color: white;
2112
transition-duration: 0ms;
2113
}
2114
.page-indicator:checked:active {
2116
background-image: none;
2117
}
2118
.app-well-app > .overview-icon.overview-icon-with-label,
2120
.grid-search-result .overview-icon.overview-icon-with-label {
2121
padding: 10px 8px 5px 8px;
2122
spacing: 4px;
2123
}
2124
.workspace-thumbnails {
2126
visible-width: 32px;
2127
spacing: 12px;
2128
padding: 12px;
2129
border-radius: 4px 0 0 4px;
2130
}
2131
.workspace-thumbnails:rtl {
2133
border-radius: 0 4px 4px 0;
2134
}
2135
.workspace-thumbnails .placeholder {
2137
background-image: url("assets/dash-placeholder.svg");
2138
background-size: contain;
2139
height: 24px;
2140
}
2141
.workspace-thumbnail-indicator {
2143
border: 0 solid white;
2144
border-left-width: 2px;
2145
padding: 6px 10px;
2146
border-radius: 0;
2147
}
2148
.search-display > StBoxLayout,
2150
.all-apps,
2151
.frequent-apps > StBoxLayout {
2152
padding: 0px 88px 10px 88px;
2153
}
2154
.workspace-thumbnails {
2156
transition-duration: 250ms;
2157
color: white;
2158
background-color: rgba(255, 255, 255, 0.1);
2159
border: none;
2160
}
2161
.search-statustext, .no-frequent-applications-label {
2163
font-size: 45px;
2164
font-weight: 400;
2165
color: rgba(255, 255, 255, 0.5);
2166
}
2167
/* NOTIFICATIONS & MESSAGE TRAY */
2169
.url-highlighter {
2170
link-color: #4285F4;
2171
}
2172
.notification-banner {
2174
font-size: 1em;
2175
width: 34em;
2176
min-height: 56px;
2177
margin: 5px;
2178
border-radius: 4px;
2179
color: rgba(0, 0, 0, 0.87);
2180
background-color: #FFFFFF;
2181
border: none;
2182
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2183
}
2184
.notification-banner:hover {
2186
background-color: #FFFFFF;
2187
}
2188
.notification-banner:focus {
2190
background-color: #FFFFFF;
2191
}
2192
.notification-banner .notification-icon {
2194
padding: 5px;
2195
}
2196
.notification-banner .notification-content {
2198
padding: 5px;
2199
spacing: 5px;
2200
}
2201
.notification-banner .secondary-icon {
2203
icon-size: 1.14286em;
2204
}
2205
.notification-banner .notification-actions {
2207
background-color: transparent;
2208
padding-top: 0;
2209
padding: 4px;
2210
spacing: 4px;
2211
}
2212
.notification-banner .notification-button {
2214
transition-duration: 100ms;
2215
min-height: 32px;
2216
padding: 0 8px;
2217
border-radius: 4px;
2218
background-color: transparent;
2219
color: rgba(0, 0, 0, 0.54);
2220
font-weight: 500;
2221
}
2222
.notification-banner .notification-button:first-child {
2224
border-radius: 4px;
2225
}
2226
.notification-banner .notification-button:last-child {
2228
border-radius: 4px;
2229
}
2230
.notification-banner .notification-button:hover, .notification-banner .notification-buttonfocus {
2232
background-color: rgba(0, 0, 0, 0.08);
2233
color: rgba(0, 0, 0, 0.87);
2234
}
2235
.notification-banner .notification-button:active {
2237
transition-duration: 200ms;
2238
background-color: rgba(0, 0, 0, 0.2);
2239
color: rgba(0, 0, 0, 0.87);
2240
}
2241
.summary-source-counter {
2243
font-size: 1em;
2244
font-weight: bold;
2245
height: 1.6em;
2246
width: 1.6em;
2247
-shell-counter-overlap-x: 3px;
2248
-shell-counter-overlap-y: 3px;
2249
background-color: #4285F4;
2250
color: white;
2251
border: 2px solid white;
2252
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
2253
border-radius: 0.9em;
2254
}
2255
.secondary-icon {
2257
icon-size: 1.14286em;
2258
}
2259
.chat-body {
2261
spacing: 5px;
2262
}
2263
.chat-response {
2265
margin: 5px;
2266
}
2267
.chat-log-message {
2269
color: rgba(0, 0, 0, 0.87);
2270
}
2271
.chat-new-group {
2273
padding-top: 1em;
2274
}
2275
.chat-received {
2277
padding-left: 4px;
2278
}
2279
.chat-received:rtl {
2281
padding-left: 0px;
2282
padding-right: 4px;
2283
}
2284
.chat-sent {
2286
padding-left: 18pt;
2287
color: rgba(0, 0, 0, 0.54);
2288
}
2289
.chat-sent:rtl {
2291
padding-left: 0;
2292
padding-right: 18pt;
2293
}
2294
.chat-meta-message {
2296
padding-left: 4px;
2297
font-size: 9pt;
2298
font-weight: 400;
2299
color: rgba(0, 0, 0, 0.54);
2300
}
2301
.chat-meta-message:rtl {
2303
padding-left: 0;
2304
padding-right: 4px;
2305
}
2306
.hotplug-transient-box {
2308
spacing: 6px;
2309
padding: 2px 72px 2px 12px;
2310
}
2311
.hotplug-notification-item {
2313
padding: 2px 10px;
2314
}
2315
.hotplug-notification-item:focus {
2317
padding: 1px 71px 1px 11px;
2318
}
2319
.hotplug-notification-item-icon {
2321
icon-size: 24px;
2322
padding: 2px 5px;
2323
}
2324
.hotplug-resident-box {
2326
spacing: 8px;
2327
}
2328
.hotplug-resident-mount {
2330
transition-duration: 100ms;
2331
spacing: 8px;
2332
border-radius: 4px;
2333
}
2334
.hotplug-resident-mount:hover {
2336
background-color: rgba(0, 0, 0, 0.08);
2337
}
2338
.hotplug-resident-mount:active {
2340
transition-duration: 200ms;
2341
background-color: rgba(0, 0, 0, 0.2);
2342
}
2343
.hotplug-resident-mount-label {
2345
color: inherit;
2346
padding-left: 6px;
2347
}
2348
.hotplug-resident-mount-icon {
2350
icon-size: 24px;
2351
padding-left: 6px;
2352
}
2353
.hotplug-resident-eject-icon {
2355
icon-size: 16px;
2356
}
2357
.hotplug-resident-eject-button {
2359
padding: 7px;
2360
border-radius: 4px;
2361
color: rgba(0, 0, 0, 0.87);
2362
}
2363
/* Eeeky things */
2365
.magnifier-zoom-region {
2366
border: 2px solid #4285F4;
2367
}
2368
.magnifier-zoom-region.full-screen {
2370
border-width: 0;
2371
}
2372
/* On-screen Keyboard */
2374
.word-suggestions {
2375
font-size: 11.25pt;
2376
font-weight: 400;
2377
spacing: 12px;
2378
min-height: 20pt;
2379
}
2380
#keyboard {
2382
background-color: rgba(0, 0, 0, 0.3);
2383
}
2384
.key-container {
2386
padding: 4px;
2387
spacing: 4px;
2388
}
2389
.keyboard-key {
2391
min-height: 2em;
2392
min-width: 2em;
2393
font-size: 2em;
2394
font-weight: 500;
2395
border-radius: 4px;
2396
border: none;
2397
color: rgba(0, 0, 0, 0.87);
2398
background-color: #FFFFFF;
2399
border-color: transparent;
2400
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2401
text-shadow: none;
2402
icon-shadow: none;
2403
transition-duration: 100ms;
2404
}
2405
.keyboard-key:focus {
2407
color: rgba(0, 0, 0, 0.87);
2408
text-shadow: none;
2409
icon-shadow: none;
2410
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2411
}
2412
.keyboard-key:hover, .keyboard-key:checked {
2414
color: rgba(0, 0, 0, 0.87);
2415
background-color: #FFFFFF;
2416
border-color: transparent;
2417
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2418
text-shadow: none;
2419
icon-shadow: none;
2420
}
2421
.keyboard-key:active {
2423
color: rgba(0, 0, 0, 0.87);
2424
background-color: rgba(205, 205, 205, 0.9688);
2425
border-color: transparent;
2426
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2427
text-shadow: none;
2428
icon-shadow: none;
2429
transition-duration: 200ms;
2430
}
2431
.keyboard-key:grayed {
2433
background-color: rgba(0, 0, 0, 0.3);
2434
color: white;
2435
border-color: rgba(0, 0, 0, 0.3);
2436
}
2437
.keyboard-key.default-key {
2439
border-color: transparent;
2440
background-color: #FFFFFF;
2441
background-size: 24px;
2442
}
2443
.keyboard-key.default-key:active {
2445
background-color: rgba(214, 214, 214, 0.974);
2446
}
2447
.keyboard-key.enter-key {
2449
border-color: transparent;
2450
background-color: #4285F4;
2451
background-image: url("assets/key-enter.svg");
2452
}
2453
.keyboard-key.enter-key:active {
2455
background-color: #689df6;
2456
}
2457
.keyboard-key.shift-key-lowercase {
2459
background-image: url("assets/key-shift.svg");
2460
}
2461
.keyboard-key.shift-key-uppercase {
2463
background-image: url("assets/key-shift-uppercase.svg");
2464
}
2465
.keyboard-key.shift-key-uppercase:latched {
2467
background-image: url("assets/key-shift-latched-uppercase.svg");
2468
}
2469
.keyboard-key.hide-key {
2471
background-image: url("assets/key-hide.svg");
2472
}
2473
.keyboard-key.layout-key {
2475
background-image: url("assets/key-layout.svg");
2476
}
2477
.keyboard-subkeys {
2479
color: inherit;
2480
padding: 5px;
2481
-arrow-border-radius: 0;
2482
-arrow-background-color: transparent;
2483
-arrow-border-width: 0;
2484
-arrow-border-color: transparent;
2485
-arrow-base: 0;
2486
-arrow-rise: 0;
2487
-boxpointer-gap: 5px;
2488
background-color: #FFFFFF;
2489
border-radius: 4px;
2490
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2491
}
2492
.candidate-popup-content {
2494
padding: 8px;
2495
spacing: 0;
2496
}
2497
.candidate-index {
2499
padding: 0 4px 0 0;
2500
color: rgba(0, 0, 0, 0.54);
2501
}
2502
.candidate-box:selected .candidate-index {
2504
color: rgba(255, 255, 255, 0.7);
2505
}
2506
.candidate-box {
2508
transition-duration: 100ms;
2509
min-height: 28px;
2510
padding: 0 8px;
2511
border-radius: 4px;
2512
}
2513
.candidate-box:hover {
2515
background-color: rgba(0, 0, 0, 0.08);
2516
color: rgba(0, 0, 0, 0.87);
2517
transition-duration: 0ms;
2518
}
2519
.candidate-box:active {
2521
background-color: rgba(0, 0, 0, 0.2);
2522
color: rgba(0, 0, 0, 0.87);
2523
transition-duration: 200ms;
2524
}
2525
.candidate-box:selected {
2527
background-color: #4285F4;
2528
color: white;
2529
transition-duration: 0ms;
2530
}
2531
.candidate-page-button-box {
2533
height: 28px;
2534
}
2535
.vertical .candidate-page-button-box {
2537
padding-top: 0;
2538
}
2539
.horizontal .candidate-page-button-box {
2541
padding-left: 0;
2542
}
2543
.candidate-page-button {
2545
min-width: 28px;
2546
min-height: 28px;
2547
padding: 0;
2548
}
2549
.candidate-page-button-previous {
2551
border-radius: 4px;
2552
border-right-width: 0;
2553
}
2554
.candidate-page-button-next {
2556
border-radius: 4px;
2557
}
2558
.candidate-page-button-icon {
2560
icon-size: 1.14286em;
2561
}
2562
/* Auth Dialogs & Screen Shield */
2564
.framed-user-icon {
2565
background-size: contain;
2566
border: none;
2567
color: white;
2568
border-radius: 4px;
2569
}
2570
.framed-user-icon:hover {
2572
border-color: white;
2573
color: white;
2574
}
2575
.login-dialog-banner-view {
2577
padding-top: 24px;
2578
max-width: 23em;
2579
}
2580
.login-dialog {
2582
border: none;
2583
background-color: transparent;
2584
}
2585
.login-dialog StEntry {
2587
color: white;
2588
selection-background-color: rgba(255, 255, 255, 0.3);
2589
selected-color: white;
2590
transition-duration: 100ms;
2591
background-color: rgba(255, 255, 255, 0.04);
2592
border-color: transparent;
2593
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2594
}
2595
.login-dialog StEntry:focus {
2597
border-color: transparent;
2598
box-shadow: inset 0 -2px white;
2599
}
2600
.login-dialog StEntry:insensitive {
2602
color: rgba(0, 0, 0, 0.38);
2603
border-color: transparent;
2604
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
2605
color: rgba(255, 255, 255, 0.5);
2606
}
2607
.login-dialog .modal-dialog-button-box {
2609
spacing: 3px;
2610
}
2611
.login-dialog .modal-dialog-button {
2613
padding: 0 16px;
2614
color: rgba(255, 255, 255, 0.7);
2615
background-color: transparent;
2616
border-color: transparent;
2617
box-shadow: 0 0 transparent;
2618
text-shadow: none;
2619
icon-shadow: none;
2620
transition-duration: 100ms;
2621
}
2622
.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus {
2624
color: white;
2625
background-color: rgba(255, 255, 255, 0.08);
2626
border-color: transparent;
2627
box-shadow: 0 0 transparent;
2628
text-shadow: none;
2629
icon-shadow: none;
2630
}
2631
.login-dialog .modal-dialog-button:active {
2633
color: white;
2634
background-color: rgba(255, 255, 255, 0.2);
2635
border-color: transparent;
2636
box-shadow: 0 0 transparent;
2637
text-shadow: none;
2638
icon-shadow: none;
2639
transition-duration: 200ms;
2640
}
2641
.login-dialog .modal-dialog-button:insensitive {
2643
color: rgba(255, 255, 255, 0.3);
2644
background-color: transparent;
2645
border-color: transparent;
2646
box-shadow: 0 0 transparent;
2647
text-shadow: none;
2648
icon-shadow: none;
2649
}
2650
.login-dialog .modal-dialog-button:default {
2652
color: white;
2653
background-color: #4285F4;
2654
border-color: transparent;
2655
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2656
text-shadow: none;
2657
icon-shadow: none;
2658
transition-duration: 100ms;
2659
}
2660
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
2662
color: white;
2663
background-color: #4285F4;
2664
border-color: transparent;
2665
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2666
text-shadow: none;
2667
icon-shadow: none;
2668
}
2669
.login-dialog .modal-dialog-button:default:active {
2671
color: white;
2672
background-color: #6fa2f7;
2673
border-color: transparent;
2674
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2675
text-shadow: none;
2676
icon-shadow: none;
2677
transition-duration: 200ms;
2678
}
2679
.login-dialog .modal-dialog-button:default:insensitive {
2681
color: rgba(255, 255, 255, 0.5);
2682
background-color: rgba(255, 255, 255, 0.04);
2683
border-color: transparent;
2684
box-shadow: 0 0 transparent;
2685
text-shadow: none;
2686
icon-shadow: none;
2687
}
2688
.login-dialog-logo-bin {
2690
padding: 24px 0px;
2691
}
2692
.login-dialog-banner {
2694
color: rgba(255, 255, 255, 0.7);
2695
}
2696
.login-dialog-button-box {
2698
spacing: 5px;
2699
}
2700
.login-dialog-message-warning {
2702
color: #FBBC05;
2703
}
2704
.login-dialog-message-hint {
2706
padding-top: 0;
2707
padding-bottom: 20px;
2708
}
2709
.login-dialog-user-selection-box {
2711
padding: 100px 0px;
2712
}
2713
.login-dialog-not-listed-label {
2715
padding-left: 2px;
2716
}
2717
.login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
2719
.login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
2720
color: white;
2721
}
2722
.login-dialog-not-listed-label {
2724
transition-duration: 100ms;
2725
font-size: 1em;
2726
font-weight: bold;
2727
color: rgba(255, 255, 255, 0.7);
2728
padding-top: 1em;
2729
border-radius: 4px;
2730
}
2731
.login-dialog-not-listed-label:hover {
2733
background-color: rgba(255, 255, 255, 0.08);
2734
color: white;
2735
}
2736
.login-dialog-not-listed-label:focus {
2738
background-color: rgba(255, 255, 255, 0.12);
2739
}
2740
.login-dialog-not-listed-label:active {
2742
transition-duration: 200ms;
2743
background-color: rgba(255, 255, 255, 0.2);
2744
color: white;
2745
}
2746
.login-dialog-user-list-view {
2748
-st-vfade-offset: 1em;
2749
}
2750
.login-dialog-user-list {
2752
spacing: 12px;
2753
padding: .2em;
2754
width: 23em;
2755
}
2756
.login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
2758
background-color: rgba(255, 255, 255, 0.12);
2759
color: white;
2760
}
2761
.login-dialog-user-list:expanded .login-dialog-user-list-item:hover {
2763
background-color: rgba(255, 255, 255, 0.08);
2764
color: white;
2765
}
2766
.login-dialog-user-list:expanded .login-dialog-user-list-item:active {
2768
background-color: rgba(255, 255, 255, 0.2);
2769
color: white;
2770
}
2771
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
2773
border-right: 2px solid white;
2774
}
2775
.login-dialog-user-list-item {
2777
transition-duration: 100ms;
2778
border-radius: 4px;
2779
padding: 4px 4px 0;
2780
color: rgba(255, 255, 255, 0.7);
2781
}
2782
.login-dialog-user-list-item:ltr {
2784
padding-right: 1em;
2785
}
2786
.login-dialog-user-list-item:rtl {
2788
padding-left: 1em;
2789
}
2790
.login-dialog-user-list-item:hover {
2792
background-color: rgba(255, 255, 255, 0.08);
2793
color: white;
2794
}
2795
.login-dialog-user-list-item:active {
2797
transition-duration: 200ms;
2798
background-color: rgba(255, 255, 255, 0.2);
2799
color: white;
2800
}
2801
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
2803
height: 2px;
2804
margin: 2px 0 0 0;
2805
background-color: white;
2806
}
2807
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
2809
background-color: white;
2810
}
2811
.login-dialog-username,
2813
.user-widget-label {
2814
color: white;
2815
font-size: 15pt;
2816
font-weight: 500;
2817
text-align: left;
2818
padding-left: 15px;
2819
}
2820
.user-widget-label:ltr {
2822
padding-left: 18px;
2823
}
2824
.user-widget-label:rtl {
2826
padding-right: 18px;
2827
}
2828
.login-dialog-prompt-layout {
2830
padding-top: 24px;
2831
padding-bottom: 12px;
2832
spacing: 8px;
2833
width: 23em;
2834
}
2835
.login-dialog-prompt-label {
2837
color: rgba(255, 255, 255, 0.7);
2838
font-size: 1em;
2839
padding-top: 1em;
2840
}
2841
.login-dialog-session-list-button StIcon {
2843
icon-size: 1.25em;
2844
}
2845
.login-dialog-session-list-button {
2847
color: rgba(255, 255, 255, 0.7);
2848
}
2849
.login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
2851
color: white;
2852
}
2853
.login-dialog-session-list-button:active {
2855
color: white;
2856
}
2857
.screen-shield-arrows {
2859
padding-bottom: 3em;
2860
}
2861
.screen-shield-arrows Gjs_Arrow {
2863
color: white;
2864
width: 80px;
2865
height: 48px;
2866
-arrow-thickness: 12px;
2867
-arrow-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2868
}
2869
.screen-shield-clock {
2871
color: white;
2872
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2873
font-weight: normal;
2874
text-align: center;
2875
padding-bottom: 1.5em;
2876
}
2877
.screen-shield-clock-time {
2879
font-size: 112px;
2880
font-weight: 300;
2881
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2882
}
2883
.screen-shield-clock-date {
2885
font-size: 45px;
2886
font-weight: 400;
2887
}
2888
.screen-shield-notifications-container {
2890
spacing: 6px;
2891
width: 30em;
2892
background-color: transparent;
2893
max-height: 500px;
2894
}
2895
.screen-shield-notifications-container .summary-notification-stack-scrollview {
2897
padding-top: 0;
2898
padding-bottom: 0;
2899
}
2900
.screen-shield-notifications-container .notification,
2902
.screen-shield-notifications-container .screen-shield-notification-source {
2903
padding: 8px;
2904
border: none;
2905
background-color: rgba(0, 0, 0, 0.3);
2906
color: white;
2907
border-radius: 4px;
2908
}
2909
.screen-shield-notifications-container .notification {
2911
margin-right: 16px;
2912
}
2913
.screen-shield-notification-label {
2915
min-height: 22px;
2916
padding: 2px 0px 0px 16px;
2917
font-weight: bold;
2918
}
2919
.screen-shield-notification-count-text {
2921
min-height: 22px;
2922
padding: 2px 0px 0px 16px;
2923
color: rgba(255, 255, 255, 0.7);
2924
}
2925
#panel.lock-screen {
2927
background-color: rgba(0, 0, 0, 0.3);
2928
}
2929
.screen-shield-background {
2931
background: black;
2932
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
2933
}
2934
#lockDialogGroup {
2936
background: #303030;
2937
background-size: cover;
2938
}
2939
#LookingGlassDialog {
2941
background-color: #FFFFFF;
2942
spacing: 4px;
2943
padding: 0;
2944
border: none;
2945
border-radius: 4px;
2946
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2947
}
2948
#LookingGlassDialog > #Toolbar {
2950
padding: 0 8px;
2951
border: none;
2952
border-radius: 0;
2953
background-color: rgba(255, 255, 255, 0.01);
2954
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
2955
}
2956
#LookingGlassDialog .labels {
2958
spacing: 0;
2959
}
2960
#LookingGlassDialog .notebook-tab {
2962
-natural-hpadding: 12px;
2963
-minimum-hpadding: 6px;
2964
font-weight: bold;
2965
color: rgba(0, 0, 0, 0.54);
2966
transition-duration: 100ms;
2967
padding-left: 16px;
2968
padding-right: 16px;
2969
min-height: 32px;
2970
padding: 0 32px;
2971
}
2972
#LookingGlassDialog .notebook-tab:hover {
2974
background-color: rgba(0, 0, 0, 0.08);
2975
color: rgba(0, 0, 0, 0.87);
2976
text-shadow: none;
2977
}
2978
#LookingGlassDialog .notebook-tab:active {
2980
background-color: rgba(0, 0, 0, 0.2);
2981
color: rgba(0, 0, 0, 0.87);
2982
transition-duration: 200ms;
2983
}
2984
#LookingGlassDialog .notebook-tab:selected {
2986
border-bottom-width: 0;
2987
border-color: transparent;
2988
background-color: rgba(255, 255, 255, 0.01);
2989
box-shadow: inset 0 -2px 0px #4285F4;
2990
color: rgba(0, 0, 0, 0.87);
2991
text-shadow: none;
2992
}
2993
#LookingGlassDialog StBoxLayout#EvalBox {
2995
padding: 4px;
2996
spacing: 4px;
2997
}
2998
#LookingGlassDialog StBoxLayout#ResultsArea {
3000
spacing: 4px;
3001
}
3002
.lg-dialog StEntry {
3004
selection-background-color: #4285F4;
3005
selected-color: white;
3006
}
3007
.lg-dialog .shell-link {
3009
color: #4285F4;
3010
}
3011
.lg-dialog .shell-link:hover {
3013
color: #4285F4;
3014
}
3015
.lg-completions-text {
3017
font-size: 1em;
3018
font-style: italic;
3019
}
3020
.lg-obj-inspector-title {
3022
spacing: 4px;
3023
}
3024
.lg-obj-inspector-button {
3026
min-height: 32px;
3027
padding: 0 16px;
3028
border: none;
3029
border-radius: 4px;
3030
font-size: 10.5pt;
3031
font-weight: 500;
3032
color: rgba(0, 0, 0, 0.54);
3033
background-color: transparent;
3034
border-color: transparent;
3035
box-shadow: 0 0 transparent;
3036
text-shadow: none;
3037
icon-shadow: none;
3038
transition-duration: 100ms;
3039
}
3040
.lg-obj-inspector-button:hover {
3042
color: rgba(0, 0, 0, 0.87);
3043
background-color: rgba(0, 0, 0, 0.08);
3044
border-color: transparent;
3045
box-shadow: 0 0 transparent;
3046
text-shadow: none;
3047
icon-shadow: none;
3048
}
3049
.lg-obj-inspector-button:active {
3051
color: rgba(0, 0, 0, 0.87);
3052
background-color: rgba(0, 0, 0, 0.2);
3053
border-color: transparent;
3054
box-shadow: 0 0 transparent;
3055
text-shadow: none;
3056
icon-shadow: none;
3057
transition-duration: 200ms;
3058
}
3059
.lg-obj-inspector-button:insensitive {
3061
color: rgba(0, 0, 0, 0.26);
3062
background-color: transparent;
3063
border-color: transparent;
3064
box-shadow: 0 0 transparent;
3065
text-shadow: none;
3066
icon-shadow: none;
3067
}
3068
.lg-obj-inspector-button:focus {
3070
color: rgba(0, 0, 0, 0.87);
3071
text-shadow: none;
3072
icon-shadow: none;
3073
box-shadow: 0 0 transparent;
3074
}
3075
.lg-obj-inspector-button:hover {
3077
border: none;
3078
}
3079
#lookingGlassExtensions {
3081
padding: 4px;
3082
}
3083
.lg-extensions-list {
3085
padding: 4px;
3086
spacing: 6px;
3087
}
3088
.lg-extension {
3090
border: none;
3091
border-radius: 4px;
3092
padding: 4px;
3093
}
3094
.lg-extension-name {
3096
font-size: 18pt;
3097
font-weight: 400;
3098
}
3099
.lg-extension-meta {
3101
spacing: 6px;
3102
}
3103
#LookingGlassPropertyInspector {
3105
background: #FFFFFF;
3106
border: none;
3107
border-radius: 4px;
3108
padding: 6px;
3109
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
3110
}
3111
/* Dash to Dock */
3113
#dashtodockContainer #dash {
3114
background-color: rgba(0, 0, 0, 0.6);
3115
}
3116
#dashtodockContainer:overview #dash {
3118
background-color: rgba(255, 255, 255, 0.1);
3119
}
3120
#dashtodockContainer.extended:overview #dash {
3122
background-color: transparent;
3123
}
3124
#dashtodockContainer.left #dash,
3126
#dashtodockContainer.right #dash {
3127
padding: 3px 0;
3128
}
3129
#dashtodockContainer.top #dash,
3131
#dashtodockContainer.bottom #dash {
3132
padding: 0 3px;
3133
}
3134
#dashtodockContainer.extended #dash {
3136
padding: 0;
3137
border-radius: 0;
3138
}
3139
#dashtodockContainer.left .dash-item-container > StWidget,
3141
#dashtodockContainer.right .dash-item-container > StWidget,
3142
#dashtodockContainer.extended.left .dash-item-container > StWidget,
3143
#dashtodockContainer.extended.right .dash-item-container > StWidget {
3144
padding: 3px 6px;
3145
}
3146
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
3148
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
3149
padding: 6px 6px 3px 6px;
3150
}
3151
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
3153
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
3154
padding: 3px 6px 6px 6px;
3155
}
3156
#dashtodockContainer.top .dash-item-container > StWidget,
3158
#dashtodockContainer.bottom .dash-item-container > StWidget,
3159
#dashtodockContainer.extended.top .dash-item-container > StWidget,
3160
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
3161
padding: 6px 3px;
3162
}
3163
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
3165
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
3166
padding: 6px 3px 6px 6px;
3167
}
3168
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
3170
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
3171
padding: 6px 6px 6px 3px;
3172
}
3173
#dashtodockContainer .app-well-app-running-dot {
3175
background-color: transparent;
3176
}
3177
#dashtodockContainer .dash-item-container > StWidget {
3179
background-size: cover;
3180
}
3181
#dashtodockContainer.left .dash-item-container > StWidget.running1 {
3183
background-image: url("assets/dash/left-running1.svg");
3184
}
3185
#dashtodockContainer.left .dash-item-container > StWidget.running1.focused {
3187
background-image: url("assets/dash/left-running1-focused.svg");
3188
}
3189
#dashtodockContainer.left .dash-item-container > StWidget.running2 {
3191
background-image: url("assets/dash/left-running2.svg");
3192
}
3193
#dashtodockContainer.left .dash-item-container > StWidget.running2.focused {
3195
background-image: url("assets/dash/left-running2-focused.svg");
3196
}
3197
#dashtodockContainer.left .dash-item-container > StWidget.running3 {
3199
background-image: url("assets/dash/left-running3.svg");
3200
}
3201
#dashtodockContainer.left .dash-item-container > StWidget.running3.focused {
3203
background-image: url("assets/dash/left-running3-focused.svg");
3204
}
3205
#dashtodockContainer.left .dash-item-container > StWidget.running4 {
3207
background-image: url("assets/dash/left-running4.svg");
3208
}
3209
#dashtodockContainer.left .dash-item-container > StWidget.running4.focused {
3211
background-image: url("assets/dash/left-running4-focused.svg");
3212
}
3213
#dashtodockContainer.right .dash-item-container > StWidget.running1 {
3215
background-image: url("assets/dash/right-running1.svg");
3216
}
3217
#dashtodockContainer.right .dash-item-container > StWidget.running1.focused {
3219
background-image: url("assets/dash/right-running1-focused.svg");
3220
}
3221
#dashtodockContainer.right .dash-item-container > StWidget.running2 {
3223
background-image: url("assets/dash/right-running2.svg");
3224
}
3225
#dashtodockContainer.right .dash-item-container > StWidget.running2.focused {
3227
background-image: url("assets/dash/right-running2-focused.svg");
3228
}
3229
#dashtodockContainer.right .dash-item-container > StWidget.running3 {
3231
background-image: url("assets/dash/right-running3.svg");
3232
}
3233
#dashtodockContainer.right .dash-item-container > StWidget.running3.focused {
3235
background-image: url("assets/dash/right-running3-focused.svg");
3236
}
3237
#dashtodockContainer.right .dash-item-container > StWidget.running4 {
3239
background-image: url("assets/dash/right-running4.svg");
3240
}
3241
#dashtodockContainer.right .dash-item-container > StWidget.running4.focused {
3243
background-image: url("assets/dash/right-running4-focused.svg");
3244
}
3245
#dashtodockContainer.top .dash-item-container > StWidget.running1 {
3247
background-image: url("assets/dash/top-running1.svg");
3248
}
3249
#dashtodockContainer.top .dash-item-container > StWidget.running1.focused {
3251
background-image: url("assets/dash/top-running1-focused.svg");
3252
}
3253
#dashtodockContainer.top .dash-item-container > StWidget.running2 {
3255
background-image: url("assets/dash/top-running2.svg");
3256
}
3257
#dashtodockContainer.top .dash-item-container > StWidget.running2.focused {
3259
background-image: url("assets/dash/top-running2-focused.svg");
3260
}
3261
#dashtodockContainer.top .dash-item-container > StWidget.running3 {
3263
background-image: url("assets/dash/top-running3.svg");
3264
}
3265
#dashtodockContainer.top .dash-item-container > StWidget.running3.focused {
3267
background-image: url("assets/dash/top-running3-focused.svg");
3268
}
3269
#dashtodockContainer.top .dash-item-container > StWidget.running4 {
3271
background-image: url("assets/dash/top-running4.svg");
3272
}
3273
#dashtodockContainer.top .dash-item-container > StWidget.running4.focused {
3275
background-image: url("assets/dash/top-running4-focused.svg");
3276
}
3277
#dashtodockContainer.bottom .dash-item-container > StWidget.running1 {
3279
background-image: url("assets/dash/bottom-running1.svg");
3280
}
3281
#dashtodockContainer.bottom .dash-item-container > StWidget.running1.focused {
3283
background-image: url("assets/dash/bottom-running1-focused.svg");
3284
}
3285
#dashtodockContainer.bottom .dash-item-container > StWidget.running2 {
3287
background-image: url("assets/dash/bottom-running2.svg");
3288
}
3289
#dashtodockContainer.bottom .dash-item-container > StWidget.running2.focused {
3291
background-image: url("assets/dash/bottom-running2-focused.svg");
3292
}
3293
#dashtodockContainer.bottom .dash-item-container > StWidget.running3 {
3295
background-image: url("assets/dash/bottom-running3.svg");
3296
}
3297
#dashtodockContainer.bottom .dash-item-container > StWidget.running3.focused {
3299
background-image: url("assets/dash/bottom-running3-focused.svg");
3300
}
3301
#dashtodockContainer.bottom .dash-item-container > StWidget.running4 {
3303
background-image: url("assets/dash/bottom-running4.svg");
3304
}
3305
#dashtodockContainer.bottom .dash-item-container > StWidget.running4.focused {
3307
background-image: url("assets/dash/bottom-running4-focused.svg");
3308
}
3309
/* Simple Dock */
3311
#dash:desktop {
3312
background-color: rgba(0, 0, 0, 0.6);
3313
}
3314
/* GPaste */
3316
.popup-menu .search-entry {
3317
color: rgba(0, 0, 0, 0.87);
3318
selection-background-color: #4285F4;
3319
selected-color: white;
3320
transition-duration: 100ms;
3321
background-color: rgba(0, 0, 0, 0.04);
3322
border-color: transparent;
3323
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
3324
}
3325
.popup-menu .search-entry:hover {
3327
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
3328
}
3329
.popup-menu .search-entry:focus {
3331
border-color: transparent;
3332
box-shadow: inset 0 -2px #4285F4;
3333
color: rgba(0, 0, 0, 0.87);
3334
}
3335
.popup-menu .search-entry .search-entry-icon {
3337
color: rgba(0, 0, 0, 0.54);
3338
}
3339
.popup-menu .search-entry:hover .search-entry-icon, .popup-menu .search-entry:focus .search-entry-icon {
3341
color: rgba(0, 0, 0, 0.87);
3342
}
3343