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: 36px;
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:focus {
47
color: rgba(0, 0, 0, 0.87);
48
text-shadow: none;
49
icon-shadow: none;
50
box-shadow: 0 0 transparent;
51
}
52
.button:hover {
54
color: rgba(0, 0, 0, 0.87);
55
background-color: rgba(0, 0, 0, 0.08);
56
border-color: transparent;
57
box-shadow: 0 0 transparent;
58
text-shadow: none;
59
icon-shadow: none;
60
}
61
.button:active {
63
color: rgba(0, 0, 0, 0.87);
64
background-color: rgba(0, 0, 0, 0.2);
65
border-color: transparent;
66
box-shadow: 0 0 transparent;
67
text-shadow: none;
68
icon-shadow: none;
69
transition-duration: 200ms;
70
}
71
.button:insensitive {
73
color: rgba(0, 0, 0, 0.26);
74
background-color: transparent;
75
border-color: transparent;
76
box-shadow: 0 0 transparent;
77
text-shadow: none;
78
icon-shadow: none;
79
}
80
.modal-dialog-linked-button {
82
min-height: 36px;
83
margin: 6px;
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:focus {
100
color: rgba(0, 0, 0, 0.87);
101
text-shadow: none;
102
icon-shadow: none;
103
box-shadow: 0 0 transparent;
104
}
105
.modal-dialog-linked-button:hover {
107
color: rgba(0, 0, 0, 0.87);
108
background-color: rgba(0, 0, 0, 0.08);
109
border-color: transparent;
110
box-shadow: 0 0 transparent;
111
text-shadow: none;
112
icon-shadow: none;
113
}
114
.modal-dialog-linked-button:active {
116
color: rgba(0, 0, 0, 0.87);
117
background-color: rgba(0, 0, 0, 0.2);
118
border-color: transparent;
119
box-shadow: 0 0 transparent;
120
text-shadow: none;
121
icon-shadow: none;
122
transition-duration: 200ms;
123
}
124
.modal-dialog-linked-button:insensitive {
126
color: rgba(0, 0, 0, 0.26);
127
background-color: transparent;
128
border-color: transparent;
129
box-shadow: 0 0 transparent;
130
text-shadow: none;
131
icon-shadow: none;
132
}
133
.modal-dialog-linked-button:first-child {
135
border-radius: 4px;
136
}
137
.modal-dialog-linked-button:last-child {
139
margin-right: 6px;
140
border-right-width: 0px;
141
border-radius: 4px;
142
}
143
.modal-dialog-linked-button:first-child:last-child {
145
margin-right: 6px;
146
border-right-width: 0px;
147
border-radius: 4px;
148
}
149
/* Entries */
151
StEntry {
152
min-height: 36px;
153
padding: 0 8px;
154
border-radius: 4px 4px 0 0;
155
border-width: 0;
156
color: rgba(0, 0, 0, 0.87);
157
selection-background-color: rgba(66, 133, 244, 0.32);
158
selected-color: rgba(0, 0, 0, 0.87);
159
font-size: 12pt;
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
-barlevel-height: 2px;
248
-barlevel-background-color: rgba(0, 0, 0, 0.26);
249
-barlevel-border-color: transparent;
250
-barlevel-active-background-color: #4285F4;
251
-barlevel-active-border-color: transparent;
252
-barlevel-overdrive-color: #EA4335;
253
-barlevel-overdrive-border-color: transparent;
254
-barlevel-overdrive-separator-width: 2px;
255
-barlevel-border-width: 0;
256
-slider-handle-radius: 6px;
257
}
258
/* Check Boxes */
260
.check-box * {
261
min-height: 20px;
262
padding: 8px 0;
263
}
264
.check-box StBoxLayout {
266
spacing: 8px;
267
}
268
.check-box StBin {
270
transition-duration: 100ms;
271
width: 24px;
272
height: 24px;
273
padding: 6px;
274
border-radius: 100px;
275
background-image: url("assets/checkbox-off.svg");
276
}
277
.check-box:focus StBin {
279
background-image: url("assets/checkbox-off.svg");
280
}
281
.check-box:hover StBin {
283
background-color: rgba(0, 0, 0, 0.08);
284
}
285
.check-box:active StBin {
287
transition-duration: 200ms;
288
background-color: rgba(0, 0, 0, 0.2);
289
}
290
.check-box:checked StBin {
292
background-image: url("assets/checkbox.svg");
293
}
294
.check-box:focus:checked StBin {
296
background-image: url("assets/checkbox.svg");
297
}
298
.check-box:hover:checked StBin {
300
background-color: rgba(66, 133, 244, 0.08);
301
}
302
.check-box:active:checked StBin {
304
background-color: rgba(66, 133, 244, 0.2);
305
}
306
/* Switches */
308
.toggle-switch {
309
width: 40px;
310
height: 20px;
311
background-size: contain;
312
}
313
.toggle-switch-us {
315
background-image: url("assets/toggle-off.svg");
316
}
317
.toggle-switch-us:checked {
319
background-image: url("assets/toggle-on.svg");
320
}
321
.toggle-switch-intl {
323
background-image: url("assets/toggle-off.svg");
324
}
325
.toggle-switch-intl:checked {
327
background-image: url("assets/toggle-on.svg");
328
}
329
/* links */
331
.shell-link {
332
transition-duration: 100ms;
333
border-radius: 4px;
334
color: #4285F4;
335
}
336
.shell-link:hover {
338
color: #4285F4;
339
background-color: rgba(66, 133, 244, 0.08);
340
}
341
.shell-link:active {
343
transition-duration: 200ms;
344
color: #4285F4;
345
background-color: rgba(66, 133, 244, 0.2);
346
}
347
/* Modal Dialogs */
349
.headline {
350
font-size: 15pt;
351
font-weight: 500;
352
}
353
.lightbox {
355
background-color: black;
356
}
357
.flashspot {
359
background-color: white;
360
}
361
.modal-dialog {
363
border-radius: 4px;
364
color: rgba(0, 0, 0, 0.87);
365
background-color: #FFFFFF;
366
border: none;
367
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
368
}
369
.modal-dialog .modal-dialog-content-box {
371
padding: 24px;
372
}
373
.modal-dialog .run-dialog-entry {
375
width: 20em;
376
margin-bottom: 0;
377
}
378
.modal-dialog .run-dialog-error-box {
380
padding-top: 16px;
381
spacing: 6px;
382
}
383
.modal-dialog .run-dialog-button-box {
385
padding-top: 1em;
386
}
387
.modal-dialog .run-dialog-label {
389
font-size: 1em;
390
font-weight: normal;
391
color: rgba(0, 0, 0, 0.54);
392
padding-bottom: .4em;
393
}
394
.mount-dialog-subject,
396
.end-session-dialog-subject {
397
font-size: 15pt;
398
font-weight: 500;
399
}
400
/* Message Dialog */
402
.message-dialog-main-layout {
403
padding: 12px 20px 0;
404
spacing: 12px;
405
}
406
.message-dialog-content {
408
max-width: 28em;
409
spacing: 20px;
410
}
411
.message-dialog-icon {
413
min-width: 48px;
414
icon-size: 48px;
415
}
416
.message-dialog-title {
418
font-weight: bold;
419
}
420
.message-dialog-subtitle {
422
color: rgba(0, 0, 0, 0.54);
423
font-weight: bold;
424
}
425
/* End Session Dialog */
427
.end-session-dialog {
428
spacing: 42px;
429
border: none;
430
}
431
.end-session-dialog-list {
433
padding-top: 20px;
434
}
435
.end-session-dialog-layout {
437
padding-left: 17px;
438
}
439
.end-session-dialog-layout:rtl {
441
padding-right: 17px;
442
}
443
.end-session-dialog-description {
445
width: 28em;
446
padding-bottom: 10px;
447
}
448
.end-session-dialog-description:rtl {
450
text-align: right;
451
}
452
.end-session-dialog-warning {
454
width: 28em;
455
color: #FBBC05;
456
padding-top: 6px;
457
}
458
.end-session-dialog-warning:rtl {
460
text-align: right;
461
}
462
.end-session-dialog-logout-icon {
464
border-radius: 5px;
465
width: 48px;
466
height: 48px;
467
background-size: contain;
468
}
469
.end-session-dialog-shutdown-icon {
471
color: rgba(0, 0, 0, 0.38);
472
width: 48px;
473
height: 48px;
474
}
475
.end-session-dialog-inhibitor-layout {
477
spacing: 16px;
478
max-height: 200px;
479
padding-right: 65px;
480
padding-left: 65px;
481
}
482
.end-session-dialog-session-list,
484
.end-session-dialog-app-list {
485
spacing: 1em;
486
}
487
.end-session-dialog-list-header {
489
font-weight: bold;
490
}
491
.end-session-dialog-list-header:rtl {
493
text-align: right;
494
}
495
.end-session-dialog-app-list-item,
497
.end-session-dialog-session-list-item {
498
spacing: 1em;
499
}
500
.end-session-dialog-app-list-item-name,
502
.end-session-dialog-session-list-item-name {
503
font-weight: bold;
504
}
505
.end-session-dialog-app-list-item-description {
507
color: rgba(0, 0, 0, 0.54);
508
font-size: 1em;
509
}
510
/* ShellMountOperation Dialogs */
512
.shell-mount-operation-icon {
513
icon-size: 48px;
514
}
515
.mount-dialog {
517
spacing: 24px;
518
}
519
.mount-dialog .message-dialog-title {
521
padding-top: 10px;
522
padding-left: 17px;
523
padding-bottom: 6px;
524
max-width: 34em;
525
}
526
.mount-dialog .message-dialog-title:rtl {
528
padding-left: 0px;
529
padding-right: 17px;
530
}
531
.mount-dialog .message-dialog-body {
533
padding-left: 17px;
534
width: 28em;
535
}
536
.mount-dialog .message-dialog-body:rtl {
538
padding-left: 0px;
539
padding-right: 17px;
540
}
541
.mount-dialog-app-list {
543
max-height: 200px;
544
padding-top: 24px;
545
padding-left: 49px;
546
padding-right: 32px;
547
}
548
.mount-dialog-app-list:rtl {
550
padding-right: 49px;
551
padding-left: 32px;
552
}
553
.mount-dialog-app-list-item {
555
color: rgba(0, 0, 0, 0.87);
556
}
557
.mount-dialog-app-list-item:hover {
559
color: rgba(0, 0, 0, 0.87);
560
}
561
.mount-dialog-app-list-item:ltr {
563
padding-right: 1em;
564
}
565
.mount-dialog-app-list-item:rtl {
567
padding-left: 1em;
568
}
569
.mount-dialog-app-list-item-icon:ltr {
571
padding-right: 17px;
572
}
573
.mount-dialog-app-list-item-icon:rtl {
575
padding-left: 17px;
576
}
577
.mount-dialog-app-list-item-name {
579
font-size: 1em;
580
}
581
/* Password or Authentication Dialog */
583
.prompt-dialog {
584
width: 34em;
585
border: none;
586
}
587
.prompt-dialog .message-dialog-main-layout {
589
spacing: 24px;
590
padding: 10px;
591
}
592
.prompt-dialog .message-dialog-content {
594
spacing: 16px;
595
}
596
.prompt-dialog .message-dialog-title {
598
font-size: 15pt;
599
font-weight: 500;
600
color: rgba(0, 0, 0, 0.87);
601
}
602
.prompt-dialog-description:rtl {
604
text-align: right;
605
}
606
.prompt-dialog-password-box {
608
spacing: 1em;
609
padding-bottom: 1em;
610
}
611
.prompt-dialog-error-label {
613
font-size: 1em;
614
color: #EA4335;
615
padding-bottom: 8px;
616
}
617
.prompt-dialog-info-label {
619
font-size: 1em;
620
padding-bottom: 8px;
621
}
622
.hidden {
624
color: rgba(0, 0, 0, 0);
625
}
626
.prompt-dialog-null-label {
628
font-size: 1em;
629
padding-bottom: 8px;
630
}
631
/* Polkit Dialog */
633
.polkit-dialog-user-layout {
634
padding-left: 10px;
635
spacing: 10px;
636
}
637
.polkit-dialog-user-layout:rtl {
639
padding-left: 0px;
640
padding-right: 10px;
641
}
642
.polkit-dialog-user-root-label {
644
color: #FBBC05;
645
}
646
.polkit-dialog-user-icon {
648
border-radius: 5px;
649
background-size: contain;
650
width: 48px;
651
height: 48px;
652
}
653
/* Audio selection dialog */
655
.audio-device-selection-dialog {
656
spacing: 30px;
657
}
658
.audio-selection-content {
660
spacing: 20px;
661
padding: 24px;
662
}
663
.audio-selection-title {
665
font-weight: bold;
666
text-align: center;
667
}
668
.audio-selection-box {
670
spacing: 20px;
671
}
672
.audio-selection-device {
674
border: 1px solid rgba(0, 0, 0, 0.12);
675
border-radius: 4px;
676
}
677
.audio-selection-device:active, .audio-selection-device:hover, .audio-selection-device:focus {
679
background-color: #4285F4;
680
}
681
.audio-selection-device-box {
683
padding: 20px;
684
spacing: 20px;
685
}
686
.audio-selection-device-icon {
688
icon-size: 64px;
689
}
690
/* Access Dialog */
692
.access-dialog {
693
spacing: 30px;
694
}
695
/* Geolocation Dialog */
697
.geolocation-dialog {
698
spacing: 30px;
699
}
700
/* Extension Dialog */
702
.extension-dialog .message-dialog-main-layout {
703
spacing: 24px;
704
padding: 10px;
705
}
706
.extension-dialog .message-dialog-title {
708
color: rgba(0, 0, 0, 0.54);
709
}
710
/* Inhibit-Shortcuts Dialog */
712
.inhibit-shortcuts-dialog {
713
spacing: 30px;
714
}
715
/* Network Agent Dialog */
717
.network-dialog-secret-table {
718
spacing-rows: 15px;
719
spacing-columns: 1em;
720
}
721
.keyring-dialog-control-table {
723
spacing-rows: 15px;
724
spacing-columns: 1em;
725
}
726
/* Popovers/Menus */
728
.popup-menu {
729
min-width: 200px;
730
}
731
.popup-menu .popup-sub-menu {
733
background-color: rgba(0, 0, 0, 0.04);
734
box-shadow: 0 0 transparent;
735
}
736
.popup-menu .popup-menu-content {
738
padding: 8px 0;
739
}
740
.popup-menu .popup-menu-item {
742
spacing: 8px;
743
transition-duration: 100ms;
744
}
745
.popup-menu .popup-menu-item:ltr {
747
padding: 0.4em 24px 0.4em 0;
748
}
749
.popup-menu .popup-menu-item:rtl {
751
padding: 0.4em 0 0.4em 24px;
752
}
753
.popup-menu .popup-menu-item:checked {
755
background-color: rgba(66, 133, 244, 0.32);
756
box-shadow: 0 0 transparent;
757
font-weight: normal;
758
}
759
.popup-menu .popup-menu-item:checked.selected {
761
background-color: rgba(66, 133, 244, 0.4);
762
}
763
.popup-menu .popup-menu-item:checked:active {
765
background-color: rgba(66, 133, 244, 0.6);
766
}
767
.popup-menu .popup-menu-item.selected {
769
background-color: rgba(0, 0, 0, 0.08);
770
color: rgba(0, 0, 0, 0.87);
771
transition-duration: 0ms;
772
}
773
.popup-menu .popup-menu-item:active {
775
background-color: rgba(0, 0, 0, 0.2);
776
color: rgba(0, 0, 0, 0.87);
777
transition-duration: 200ms;
778
}
779
.popup-menu .popup-menu-item.selected:active {
781
color: rgba(0, 0, 0, 0.87);
782
}
783
.popup-menu .popup-menu-item:insensitive {
785
color: rgba(0, 0, 0, 0.38);
786
}
787
.popup-menu .popup-inactive-menu-item {
789
color: rgba(0, 0, 0, 0.87);
790
}
791
.popup-menu .popup-inactive-menu-item:insensitive {
793
color: rgba(0, 0, 0, 0.38);
794
}
795
.popup-menu.panel-menu {
797
-boxpointer-gap: 4px;
798
margin-bottom: 1.75em;
799
}
800
.popup-menu-ornament {
802
text-align: right;
803
width: 16px;
804
height: 16px;
805
}
806
.popup-menu-boxpointer,
808
.candidate-popup-boxpointer {
809
-arrow-border-radius: 0;
810
-arrow-background-color: transparent;
811
-arrow-border-width: 0;
812
-arrow-border-color: transparent;
813
-arrow-base: 0;
814
-arrow-rise: 0;
815
-arrow-box-shadow: none;
816
margin: 5px 8px 8px;
817
background-color: #FFFFFF;
818
border-radius: 4px;
819
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
820
}
821
.popup-separator-menu-item {
823
height: 1px;
824
margin: 8px 40px;
825
background-color: transparent;
826
border-color: rgba(0, 0, 0, 0.12);
827
border-bottom-width: 1px;
828
border-bottom-style: solid;
829
}
830
.background-menu {
832
-boxpointer-gap: 4px;
833
-arrow-rise: 0;
834
}
835
/* fallback menu
837
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
838
app menu inside the main app window itself rather than the top bar
839
*/
840
/* OSD */
841
.osd-window {
842
text-align: center;
843
font-weight: bold;
844
spacing: 1em;
845
margin: 32px;
846
min-width: 64px;
847
min-height: 64px;
848
}
849
.osd-window .osd-monitor-label {
851
font-size: 45px;
852
font-weight: 400;
853
}
854
.osd-window .level {
856
height: 8px;
857
-barlevel-height: 8px;
858
-barlevel-background-color: rgba(0, 0, 0, 0.12);
859
-barlevel-active-background-color: #4285F4;
860
-barlevel-overdrive-color: #EA4335;
861
-barlevel-overdrive-separator-width: 2px;
862
}
863
/* Pad OSD */
865
.pad-osd-window {
866
padding: 32px;
867
background-color: rgba(0, 0, 0, 0.6);
868
}
869
.pad-osd-window .pad-osd-title-box {
871
spacing: 12px;
872
}
873
.pad-osd-window .pad-osd-title-menu-box {
875
spacing: 6px;
876
}
877
.combo-box-label {
879
width: 15em;
880
}
881
/* App Switcher */
883
.switcher-popup {
884
padding: 8px;
885
spacing: 16px;
886
}
887
.switcher-list-item-container {
889
spacing: 8px;
890
}
891
.switcher-list .item-box {
893
transition-duration: 100ms;
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: rgba(66, 133, 244, 0.32);
907
color: rgba(0, 0, 0, 0.87);
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
transition-duration: 100ms;
926
border-color: rgba(0, 0, 0, 0);
927
color: rgba(0, 0, 0, 0.54);
928
}
929
.switcher-arrow:highlighted {
931
color: rgba(0, 0, 0, 0.87);
932
}
933
.input-source-switcher-symbol {
935
font-size: 45px;
936
font-weight: 400;
937
width: 96px;
938
height: 96px;
939
}
940
/* Window Cycler */
942
.cycler-highlight {
943
border: 4px solid #4285F4;
944
}
945
/* Workspace Switcher */
947
.workspace-switcher-group {
948
padding: 8px;
949
}
950
.workspace-switcher {
952
background: transparent;
953
border: 0px;
954
border-radius: 0px;
955
padding: 0px;
956
spacing: 8px;
957
}
958
.ws-switcher-active-up, .ws-switcher-active-down {
960
height: 48px;
961
background-color: #4285F4;
962
color: white;
963
background-size: 32px;
964
border-radius: 4px;
965
}
966
.ws-switcher-box {
968
height: 48px;
969
border: none;
970
background: rgba(0, 0, 0, 0.12);
971
border-radius: 4px;
972
}
973
.osd-window,
975
.resize-popup,
976
.switcher-list, .workspace-switcher-container {
977
color: rgba(0, 0, 0, 0.87);
978
background-color: #FFFFFF;
979
border: none;
980
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
981
border-radius: 4px;
982
padding: 12px;
983
}
984
/* Tiled window previews */
986
.tile-preview {
987
background-color: rgba(123, 170, 247, 0.3);
988
border: 1px solid #7BAAF7;
989
}
990
.tile-preview-left.on-primary {
992
border-radius: 0;
993
}
994
.tile-preview-right.on-primary {
996
border-radius: 0;
997
}
998
.tile-preview-left.tile-preview-right.on-primary {
1000
border-radius: 0;
1001
}
1002
/* TOP BAR */
1004
#panel {
1005
background-color: rgba(0, 0, 0, 0.6);
1006
/* transition from solid to transparent */
1007
transition-duration: 250ms;
1008
font-weight: bold;
1009
height: 32px;
1010
font-feature-settings: "tnum";
1011
}
1012
#panel:overview, #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
1014
background-color: transparent;
1015
}
1016
#panel #panelLeft, #panel #panelCenter {
1018
spacing: 0;
1019
}
1020
#panel .panel-corner {
1022
-panel-corner-radius: 0;
1023
-panel-corner-background-color: rgba(0, 0, 0, 0.6);
1024
-panel-corner-border-width: 2px;
1025
-panel-corner-border-color: transparent;
1026
}
1027
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
1029
-panel-corner-border-color: white;
1030
}
1031
#panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
1033
-panel-corner-radius: 0;
1034
-panel-corner-background-color: transparent;
1035
-panel-corner-border-color: transparent;
1036
}
1037
#panel .panel-button {
1039
-natural-hpadding: 12px;
1040
-minimum-hpadding: 6px;
1041
font-weight: bold;
1042
color: rgba(255, 255, 255, 0.7);
1043
text-shadow: none;
1044
transition-duration: 100ms;
1045
}
1046
#panel .panel-button .app-menu-icon {
1048
-st-icon-style: symbolic;
1049
margin-left: 4px;
1050
margin-right: 4px;
1051
}
1052
#panel .panel-button .system-status-icon,
1054
#panel .panel-button .app-menu-icon > StIcon,
1055
#panel .panel-button .popup-menu-arrow {
1056
icon-shadow: none;
1057
}
1058
#panel .panel-button:hover {
1060
color: white;
1061
text-shadow: none;
1062
}
1063
#panel .panel-button:hover .system-status-icon,
1065
#panel .panel-button:hover .app-menu-icon > StIcon,
1066
#panel .panel-button:hover .popup-menu-arrow {
1067
icon-shadow: none;
1068
}
1069
#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
1071
background-color: rgba(0, 0, 0, 0.01);
1072
box-shadow: inset 0 -2px 0px white;
1073
color: white;
1074
}
1075
#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 {
1077
icon-shadow: none;
1078
}
1079
#panel .panel-button .system-status-icon {
1081
icon-size: 1.14286em;
1082
padding: 0 4px;
1083
}
1084
.unlock-screen #panel .panel-button,
1086
.login-screen #panel .panel-button,
1087
.lock-screen #panel .panel-button {
1088
color: rgba(255, 255, 255, 0.7);
1089
}
1090
.unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
1092
.login-screen #panel .panel-button:focus,
1093
.login-screen #panel .panel-button:hover,
1094
.login-screen #panel .panel-button:active,
1095
.lock-screen #panel .panel-button:focus,
1096
.lock-screen #panel .panel-button:hover,
1097
.lock-screen #panel .panel-button:active {
1098
color: white;
1099
}
1100
#panel .panel-status-indicators-box,
1102
#panel .panel-status-menu-box {
1103
spacing: 2px;
1104
}
1105
#panel .power-status.panel-status-indicators-box {
1107
spacing: 0;
1108
}
1109
#panel .screencast-indicator {
1111
color: #FBBC05;
1112
}
1113
#panel .remote-access-indicator {
1115
color: #FBBC05;
1116
}
1117
#panel.solid {
1119
background-color: #212121;
1120
/* transition from transparent to solid */
1121
transition-duration: 250ms;
1122
background-gradient-direction: none;
1123
text-shadow: none;
1124
}
1125
#panel.solid:overview {
1127
background-color: transparent;
1128
}
1129
#panel.solid .panel-corner {
1131
-panel-corner-background-color: #212121;
1132
}
1133
#panel.solid .panel-button {
1135
color: rgba(255, 255, 255, 0.7);
1136
text-shadow: none;
1137
}
1138
#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 {
1140
color: white;
1141
}
1142
#panel.solid .system-status-icon,
1144
#panel.solid .app-menu-icon > StIcon,
1145
#panel.solid .popup-menu-arrow {
1146
icon-shadow: none;
1147
}
1148
#calendarArea {
1150
padding: 8px 16px;
1151
}
1152
.calendar {
1154
margin-bottom: 0;
1155
}
1156
.calendar,
1158
.datemenu-today-button,
1159
.datemenu-displays-box,
1160
.message-list-sections {
1161
margin: 0 8px;
1162
}
1163
.datemenu-calendar-column {
1165
spacing: 8px;
1166
}
1167
.datemenu-displays-section {
1169
padding-bottom: 0;
1170
}
1171
.datemenu-displays-box {
1173
spacing: 8px;
1174
}
1175
.datemenu-calendar-column {
1177
border: 0 solid rgba(0, 0, 0, 0.12);
1178
}
1179
.datemenu-calendar-column:ltr {
1181
border-left-width: 0;
1182
}
1183
.datemenu-calendar-column:rtl {
1185
border-right-width: 0;
1186
}
1187
.datemenu-today-button,
1189
.world-clocks-button,
1190
.weather-button,
1191
.events-section-title {
1192
min-height: 24px;
1193
padding: 4px 8px;
1194
border-radius: 4px;
1195
}
1196
.datemenu-today-button {
1198
min-height: 56px;
1199
}
1200
.message-list-section-list:ltr {
1202
padding-left: 0;
1203
}
1204
.message-list-section-list:rtl {
1206
padding-right: 0;
1207
}
1208
.datemenu-today-button,
1210
.world-clocks-button,
1211
.weather-button,
1212
.events-section-title {
1213
transition-duration: 100ms;
1214
}
1215
.datemenu-today-button:hover, .datemenu-today-button:focus,
1217
.world-clocks-button:hover,
1218
.world-clocks-button:focus,
1219
.weather-button:hover,
1220
.weather-button:focus,
1221
.events-section-title:hover,
1222
.events-section-title:focus {
1223
color: rgba(0, 0, 0, 0.87);
1224
background-color: rgba(0, 0, 0, 0.08);
1225
}
1226
.datemenu-today-button:active,
1228
.world-clocks-button:active,
1229
.weather-button:active,
1230
.events-section-title:active {
1231
transition-duration: 200ms;
1232
color: rgba(0, 0, 0, 0.87);
1233
background-color: rgba(0, 0, 0, 0.2);
1234
}
1235
.datemenu-today-button .date-label {
1237
font-size: 18pt;
1238
font-weight: 400;
1239
}
1240
.world-clocks-header,
1242
.weather-header,
1243
.events-section-title {
1244
color: rgba(0, 0, 0, 0.54);
1245
font-weight: bold;
1246
}
1247
.world-clocks-grid {
1249
spacing-rows: 0.4em;
1250
}
1251
.weather-box {
1253
spacing: 0.4em;
1254
}
1255
.calendar-month-label {
1257
transition-duration: 100ms;
1258
height: 20px;
1259
margin: 2px;
1260
padding: 6px 16px;
1261
border-radius: 4px;
1262
color: rgba(0, 0, 0, 0.87);
1263
font-weight: bold;
1264
text-align: center;
1265
}
1266
.calendar-month-label:focus {
1268
background-color: rgba(0, 0, 0, 0.12);
1269
}
1270
.pager-button {
1272
transition-duration: 100ms;
1273
width: 32px;
1274
height: 32px;
1275
margin: 2px;
1276
border-radius: 100px;
1277
background-color: transparent;
1278
color: rgba(0, 0, 0, 0.87);
1279
}
1280
.pager-button:hover, .pager-button:focus {
1282
background-color: rgba(0, 0, 0, 0.08);
1283
}
1284
.pager-button:active {
1286
background-color: rgba(0, 0, 0, 0.2);
1287
transition-duration: 200ms;
1288
}
1289
.calendar-change-month-back {
1291
background-image: url("assets/calendar-arrow-left.svg");
1292
}
1293
.calendar-change-month-back:rtl {
1295
background-image: url("assets/calendar-arrow-right.svg");
1296
}
1297
.calendar-change-month-forward {
1299
background-image: url("assets/calendar-arrow-right.svg");
1300
}
1301
.calendar-change-month-forward:rtl {
1303
background-image: url("assets/calendar-arrow-left.svg");
1304
}
1305
.calendar-day-base {
1307
transition-duration: 100ms;
1308
font-size: 9pt;
1309
font-weight: 400;
1310
text-align: center;
1311
width: 32px;
1312
height: 32px;
1313
padding: 0;
1314
margin: 2px;
1315
border-radius: 100px;
1316
font-feature-settings: "tnum";
1317
}
1318
.calendar-day-base:hover, .calendar-day-base:focus {
1320
background-color: rgba(0, 0, 0, 0.08);
1321
}
1322
.calendar-day-base:active {
1324
transition-duration: 200ms;
1325
color: inherit;
1326
background-color: rgba(0, 0, 0, 0.2);
1327
border-color: transparent;
1328
}
1329
.calendar-day-base:selected {
1331
color: rgba(0, 0, 0, 0.87);
1332
background-color: rgba(66, 133, 244, 0.32);
1333
border-color: transparent;
1334
}
1335
.calendar-day-base.calendar-day-heading {
1337
width: 32px;
1338
height: 25px;
1339
margin-top: 2px;
1340
padding: 7px 0 0;
1341
border-radius: 100px;
1342
background-color: transparent;
1343
color: rgba(0, 0, 0, 0.38);
1344
font-size: 9pt;
1345
font-weight: 400;
1346
font-weight: bold;
1347
text-align: center;
1348
}
1349
.calendar-day {
1351
border-width: 0;
1352
}
1353
.calendar-day-top {
1355
border-top-width: 0;
1356
}
1357
.calendar-day-left {
1359
border-left-width: 0;
1360
}
1361
.calendar-nonwork-day {
1363
color: rgba(0, 0, 0, 0.87);
1364
}
1365
.calendar-today {
1367
font-weight: bold !important;
1368
border: none;
1369
}
1370
.calendar-day-with-events {
1372
color: #4285F4;
1373
font-weight: normal;
1374
text-decoration: underline;
1375
background-image: none;
1376
}
1377
.calendar-other-month-day {
1379
color: rgba(0, 0, 0, 0.26);
1380
opacity: 0.5;
1381
}
1382
.calendar-week-number {
1384
width: 32px;
1385
height: 25px;
1386
margin: 2px;
1387
padding: 7px 0 0;
1388
border-radius: 100px;
1389
background-color: transparent;
1390
color: rgba(0, 0, 0, 0.38);
1391
font-size: inherit;
1392
font-weight: bold;
1393
text-align: center;
1394
}
1395
/* Message list */
1397
.message-list {
1398
width: 420px;
1399
}
1400
.message-list-clear-button.button {
1402
background-color: transparent;
1403
margin: 8px 8px 0;
1404
}
1405
.message-list-clear-button.button:hover, .message-list-clear-button.button:focus {
1407
background-color: rgba(0, 0, 0, 0.08);
1408
}
1409
.message-list-clear-button.button:active {
1411
background-color: rgba(0, 0, 0, 0.2);
1412
}
1413
.message-list-sections {
1415
spacing: 8px;
1416
}
1417
.message-list-section,
1419
.message-list-section-list {
1420
spacing: 8px;
1421
}
1422
.message {
1424
transition-duration: 100ms;
1425
min-height: 64px;
1426
background-color: transparent;
1427
border-radius: 4px;
1428
}
1429
.message:hover, .message:focus {
1431
background-color: rgba(0, 0, 0, 0.08);
1432
}
1433
.message:active {
1435
transition-duration: 200ms;
1436
background-color: rgba(0, 0, 0, 0.2);
1437
}
1438
.message-icon-bin {
1440
padding: 8px 0px 8px 8px;
1441
}
1442
.message-icon-bin:rtl {
1444
padding: 8px 8px 8px 0px;
1445
}
1446
.message-icon-bin > StIcon {
1448
color: rgba(0, 0, 0, 0.87);
1449
icon-size: 1.14286em;
1450
-st-icon-style: requested;
1451
margin: 4px 0px 4px 4px;
1452
}
1453
.message-icon-bin > StIcon:rtl {
1455
margin: 4px 4px 4px 0px;
1456
}
1457
.message-secondary-bin {
1459
padding: 0 8px;
1460
}
1461
.message-secondary-bin > .event-time {
1463
min-height: 22px;
1464
padding-top: 2px;
1465
color: rgba(0, 0, 0, 0.54);
1466
font-size: 1em;
1467
/* HACK: the label should be baseline-aligned with a 1em label,
1468
fake this with some bottom padding */
1469
padding-bottom: 0;
1470
}
1471
.message-secondary-bin > StIcon {
1473
icon-size: 1.14286em;
1474
}
1475
.message-title {
1477
min-height: 22px;
1478
padding-top: 2px;
1479
color: rgba(0, 0, 0, 0.87);
1480
font-weight: bold;
1481
font-size: 1em;
1482
}
1483
.message-content {
1485
min-height: 48px;
1486
padding: 8px;
1487
color: rgba(0, 0, 0, 0.54);
1488
font-size: 1em;
1489
}
1490
.message-content * > StIcon {
1492
transition-duration: 100ms;
1493
icon-size: 16px;
1494
border-radius: 16px;
1495
padding: 4px;
1496
color: rgba(0, 0, 0, 0.54);
1497
}
1498
/* FIXME: how do you do this in sass? */
1500
.message-content *:hover > StIcon,
1501
.message-content *:focus > StIcon {
1502
color: rgba(0, 0, 0, 0.87);
1503
background-color: rgba(0, 0, 0, 0.08);
1504
}
1505
.message-content *:active > StIcon {
1507
transition-duration: 200ms;
1508
color: rgba(0, 0, 0, 0.87);
1509
background-color: rgba(0, 0, 0, 0.2);
1510
}
1511
.message-media-control {
1513
transition-duration: 100ms;
1514
margin: 16px 0;
1515
padding: 8px;
1516
border-radius: 100px;
1517
color: rgba(0, 0, 0, 0.54);
1518
}
1519
.message-media-control:hover, .message-media-control:focus {
1521
color: rgba(0, 0, 0, 0.87);
1522
background-color: rgba(0, 0, 0, 0.08);
1523
}
1524
.message-media-control:active {
1526
color: rgba(0, 0, 0, 0.87);
1527
background-color: rgba(0, 0, 0, 0.2);
1528
transition-duration: 200ms;
1529
}
1530
.message-media-control:insensitive {
1532
color: rgba(0, 0, 0, 0.26);
1533
}
1534
.message-media-control:last-child:ltr {
1536
margin-right: 16px;
1537
padding-right: 8px;
1538
}
1539
.message-media-control:last-child:rtl {
1541
margin-left: 16px;
1542
padding-left: 8px;
1543
}
1544
.media-message-cover-icon {
1546
icon-size: 32px !important;
1547
margin: 8px 0px 8px 4px !important;
1548
}
1549
.media-message-cover-icon:rtl {
1551
margin: 8px 4px 8px 0px !important;
1552
}
1553
.media-message-cover-icon.fallback {
1555
icon-size: 16px !important;
1556
padding: 8px;
1557
border: none;
1558
border-radius: 4px;
1559
background-color: rgba(0, 0, 0, 0.12);
1560
color: rgba(0, 0, 0, 0.38);
1561
}
1562
.system-switch-user-submenu-icon.user-icon {
1564
icon-size: 20px;
1565
padding: 0 2px;
1566
}
1567
.system-switch-user-submenu-icon.default-icon {
1569
icon-size: 16px;
1570
padding: 0 4px;
1571
}
1572
#appMenu {
1574
spinner-image: url("process-working.svg");
1575
spacing: 4px;
1576
}
1577
#appMenu .label-shadow {
1579
color: transparent;
1580
}
1581
.aggregate-menu {
1583
min-width: 280px;
1584
}
1585
.aggregate-menu .popup-menu-icon {
1587
padding: 0 4px;
1588
}
1589
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr {
1591
/* 8px spacing + 2*4px padding */
1592
padding-left: 16px;
1593
margin-left: 1.14286em;
1594
}
1595
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl {
1597
/* 8px spacing + 2*4px padding */
1598
padding-right: 16px;
1599
margin-right: 1.14286em;
1600
}
1601
.system-menu-action {
1603
-st-icon-style: symbolic;
1604
color: rgba(0, 0, 0, 0.54);
1605
border-radius: 100px;
1606
/* wish we could do 50% */
1607
padding: 16px;
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: 16px;
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: 36px;
1654
width: 36px;
1655
-shell-close-overlap: 18px;
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: 36px;
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: rgba(66, 133, 244, 0.32);
1740
color: rgba(0, 0, 0, 0.87);
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: 12pt;
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: 64px;
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: 6px;
2210
spacing: 6px;
2211
}
2212
.notification-banner .notification-button {
2214
transition-duration: 100ms;
2215
min-height: 36px;
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: 12pt;
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: 1.2em;
2392
min-width: 1.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 {
2504
transition-duration: 100ms;
2505
min-height: 32px;
2506
padding: 0 8px;
2507
border-radius: 4px;
2508
}
2509
.candidate-box:hover {
2511
background-color: rgba(0, 0, 0, 0.08);
2512
color: rgba(0, 0, 0, 0.87);
2513
transition-duration: 0ms;
2514
}
2515
.candidate-box:active {
2517
background-color: rgba(0, 0, 0, 0.2);
2518
color: rgba(0, 0, 0, 0.87);
2519
transition-duration: 200ms;
2520
}
2521
.candidate-box:selected {
2523
background-color: rgba(66, 133, 244, 0.32);
2524
color: rgba(0, 0, 0, 0.87);
2525
transition-duration: 0ms;
2526
}
2527
.candidate-page-button-box {
2529
height: 32px;
2530
}
2531
.vertical .candidate-page-button-box {
2533
padding-top: 0;
2534
}
2535
.horizontal .candidate-page-button-box {
2537
padding-left: 0;
2538
}
2539
.candidate-page-button {
2541
min-width: 32px;
2542
min-height: 32px;
2543
padding: 0;
2544
}
2545
.candidate-page-button-previous {
2547
border-radius: 4px;
2548
border-right-width: 0;
2549
}
2550
.candidate-page-button-next {
2552
border-radius: 4px;
2553
}
2554
.candidate-page-button-icon {
2556
icon-size: 1.14286em;
2557
}
2558
/* Auth Dialogs & Screen Shield */
2560
.framed-user-icon {
2561
background-size: contain;
2562
border: none;
2563
color: white;
2564
border-radius: 4px;
2565
}
2566
.framed-user-icon:hover {
2568
border-color: white;
2569
color: white;
2570
}
2571
.login-dialog-banner-view {
2573
padding-top: 24px;
2574
max-width: 23em;
2575
}
2576
.login-dialog {
2578
border: none;
2579
background-color: transparent;
2580
}
2581
.login-dialog StEntry {
2583
color: white;
2584
selection-background-color: rgba(255, 255, 255, 0.3);
2585
selected-color: white;
2586
transition-duration: 100ms;
2587
background-color: rgba(255, 255, 255, 0.04);
2588
border-color: transparent;
2589
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2590
}
2591
.login-dialog StEntry:focus {
2593
border-color: transparent;
2594
box-shadow: inset 0 -2px white;
2595
}
2596
.login-dialog StEntry:insensitive {
2598
color: rgba(0, 0, 0, 0.38);
2599
border-color: transparent;
2600
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
2601
color: rgba(255, 255, 255, 0.5);
2602
}
2603
.login-dialog .modal-dialog-button-box {
2605
spacing: 3px;
2606
}
2607
.login-dialog .modal-dialog-button {
2609
padding: 0 16px;
2610
color: rgba(255, 255, 255, 0.7);
2611
background-color: transparent;
2612
border-color: transparent;
2613
box-shadow: 0 0 transparent;
2614
text-shadow: none;
2615
icon-shadow: none;
2616
transition-duration: 100ms;
2617
}
2618
.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus {
2620
color: white;
2621
background-color: rgba(255, 255, 255, 0.08);
2622
border-color: transparent;
2623
box-shadow: 0 0 transparent;
2624
text-shadow: none;
2625
icon-shadow: none;
2626
}
2627
.login-dialog .modal-dialog-button:active {
2629
color: white;
2630
background-color: rgba(255, 255, 255, 0.2);
2631
border-color: transparent;
2632
box-shadow: 0 0 transparent;
2633
text-shadow: none;
2634
icon-shadow: none;
2635
transition-duration: 200ms;
2636
}
2637
.login-dialog .modal-dialog-button:insensitive {
2639
color: rgba(255, 255, 255, 0.3);
2640
background-color: transparent;
2641
border-color: transparent;
2642
box-shadow: 0 0 transparent;
2643
text-shadow: none;
2644
icon-shadow: none;
2645
}
2646
.login-dialog .modal-dialog-button:default {
2648
color: white;
2649
background-color: #4285F4;
2650
border-color: transparent;
2651
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2652
text-shadow: none;
2653
icon-shadow: none;
2654
transition-duration: 100ms;
2655
}
2656
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
2658
color: white;
2659
background-color: #4285F4;
2660
border-color: transparent;
2661
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2662
text-shadow: none;
2663
icon-shadow: none;
2664
}
2665
.login-dialog .modal-dialog-button:default:active {
2667
color: white;
2668
background-color: #6fa2f7;
2669
border-color: transparent;
2670
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2671
text-shadow: none;
2672
icon-shadow: none;
2673
transition-duration: 200ms;
2674
}
2675
.login-dialog .modal-dialog-button:default:insensitive {
2677
color: rgba(255, 255, 255, 0.5);
2678
background-color: rgba(255, 255, 255, 0.04);
2679
border-color: transparent;
2680
box-shadow: 0 0 transparent;
2681
text-shadow: none;
2682
icon-shadow: none;
2683
}
2684
.login-dialog-logo-bin {
2686
padding: 24px 0px;
2687
}
2688
.login-dialog-banner {
2690
color: rgba(255, 255, 255, 0.7);
2691
}
2692
.login-dialog-button-box {
2694
spacing: 5px;
2695
}
2696
.login-dialog-message-warning {
2698
color: #FBBC05;
2699
}
2700
.login-dialog-message-hint {
2702
padding-top: 0;
2703
padding-bottom: 20px;
2704
}
2705
.login-dialog-user-selection-box {
2707
padding: 100px 0px;
2708
}
2709
.login-dialog-not-listed-label {
2711
padding-left: 2px;
2712
}
2713
.login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
2715
.login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
2716
color: white;
2717
}
2718
.login-dialog-not-listed-label {
2720
transition-duration: 100ms;
2721
font-size: 1em;
2722
font-weight: bold;
2723
color: rgba(255, 255, 255, 0.7);
2724
padding-top: 1em;
2725
border-radius: 4px;
2726
}
2727
.login-dialog-not-listed-label:hover {
2729
background-color: rgba(255, 255, 255, 0.08);
2730
color: white;
2731
}
2732
.login-dialog-not-listed-label:focus {
2734
background-color: rgba(255, 255, 255, 0.12);
2735
}
2736
.login-dialog-not-listed-label:active {
2738
transition-duration: 200ms;
2739
background-color: rgba(255, 255, 255, 0.2);
2740
color: white;
2741
}
2742
.login-dialog-user-list-view {
2744
-st-vfade-offset: 1em;
2745
}
2746
.login-dialog-user-list {
2748
spacing: 12px;
2749
width: 23em;
2750
}
2751
.login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
2753
background-color: rgba(255, 255, 255, 0.12);
2754
color: white;
2755
}
2756
.login-dialog-user-list:expanded .login-dialog-user-list-item:hover {
2758
background-color: rgba(255, 255, 255, 0.08);
2759
color: white;
2760
}
2761
.login-dialog-user-list:expanded .login-dialog-user-list-item:active {
2763
background-color: rgba(255, 255, 255, 0.2);
2764
color: white;
2765
}
2766
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
2768
border-right: 2px solid white;
2769
}
2770
.login-dialog-user-list-item {
2772
transition-duration: 100ms;
2773
border-radius: 4px;
2774
padding: 6px;
2775
color: rgba(255, 255, 255, 0.7);
2776
}
2777
.login-dialog-user-list-item:ltr .user-widget {
2779
padding-right: 1em;
2780
}
2781
.login-dialog-user-list-item:rtl .user-widget {
2783
padding-left: 1em;
2784
}
2785
.login-dialog-user-list-item:hover {
2787
background-color: rgba(255, 255, 255, 0.08);
2788
color: white;
2789
}
2790
.login-dialog-user-list-item:active {
2792
transition-duration: 200ms;
2793
background-color: rgba(255, 255, 255, 0.2);
2794
color: white;
2795
}
2796
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
2798
height: 2px;
2799
margin-top: 6px;
2800
background-color: white;
2801
}
2802
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
2804
background-color: white;
2805
}
2806
.login-dialog-username,
2808
.user-widget-label {
2809
color: white;
2810
font-size: 15pt;
2811
font-weight: 500;
2812
text-align: left;
2813
padding-left: 15px;
2814
}
2815
.user-widget-label:ltr {
2817
padding-left: 14px;
2818
}
2819
.user-widget-label:rtl {
2821
padding-right: 14px;
2822
}
2823
.login-dialog-prompt-layout {
2825
padding-top: 24px;
2826
padding-bottom: 12px;
2827
spacing: 8px;
2828
width: 23em;
2829
}
2830
.login-dialog-prompt-label {
2832
color: rgba(255, 255, 255, 0.7);
2833
font-size: 1em;
2834
padding-top: 1em;
2835
}
2836
.login-dialog-session-list-button StIcon {
2838
icon-size: 1.25em;
2839
}
2840
.login-dialog-session-list-button {
2842
color: rgba(255, 255, 255, 0.7);
2843
}
2844
.login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
2846
color: white;
2847
}
2848
.login-dialog-session-list-button:active {
2850
color: white;
2851
}
2852
.screen-shield-arrows {
2854
padding-bottom: 3em;
2855
}
2856
.screen-shield-arrows Gjs_Arrow {
2858
color: white;
2859
width: 80px;
2860
height: 48px;
2861
-arrow-thickness: 12px;
2862
-arrow-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2863
}
2864
.screen-shield-clock {
2866
color: white;
2867
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2868
font-weight: normal;
2869
text-align: center;
2870
padding-bottom: 1.5em;
2871
}
2872
.screen-shield-clock-time {
2874
font-size: 112px;
2875
font-weight: 300;
2876
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2877
font-feature-settings: "tnum";
2878
}
2879
.screen-shield-clock-date {
2881
font-size: 45px;
2882
font-weight: 400;
2883
}
2884
.screen-shield-notifications-container {
2886
spacing: 6px;
2887
width: 30em;
2888
background-color: transparent;
2889
max-height: 500px;
2890
}
2891
.screen-shield-notifications-container .summary-notification-stack-scrollview {
2893
padding-top: 0;
2894
padding-bottom: 0;
2895
}
2896
.screen-shield-notifications-container .notification,
2898
.screen-shield-notifications-container .screen-shield-notification-source {
2899
padding: 8px;
2900
border: none;
2901
background-color: rgba(0, 0, 0, 0.3);
2902
color: white;
2903
border-radius: 4px;
2904
}
2905
.screen-shield-notifications-container .notification {
2907
margin-right: 16px;
2908
}
2909
.screen-shield-notification-label {
2911
min-height: 22px;
2912
padding: 2px 0px 0px 16px;
2913
font-weight: bold;
2914
}
2915
.screen-shield-notification-count-text {
2917
min-height: 22px;
2918
padding: 2px 0px 0px 16px;
2919
color: rgba(255, 255, 255, 0.7);
2920
}
2921
#panel.lock-screen {
2923
background-color: rgba(0, 0, 0, 0.3);
2924
}
2925
.screen-shield-background {
2927
background: black;
2928
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
2929
}
2930
#lockDialogGroup {
2932
background: #303030;
2933
background-size: cover;
2934
}
2935
#LookingGlassDialog {
2937
background-color: #FFFFFF;
2938
spacing: 4px;
2939
padding: 0;
2940
border: none;
2941
border-radius: 4px;
2942
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2943
}
2944
#LookingGlassDialog > #Toolbar {
2946
padding: 0 8px;
2947
border: none;
2948
border-radius: 0;
2949
background-color: rgba(255, 255, 255, 0.01);
2950
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
2951
}
2952
#LookingGlassDialog .labels {
2954
spacing: 0;
2955
}
2956
#LookingGlassDialog .notebook-tab {
2958
-natural-hpadding: 12px;
2959
-minimum-hpadding: 6px;
2960
font-weight: bold;
2961
color: rgba(0, 0, 0, 0.54);
2962
transition-duration: 100ms;
2963
padding-left: 16px;
2964
padding-right: 16px;
2965
min-height: 36px;
2966
padding: 0 32px;
2967
}
2968
#LookingGlassDialog .notebook-tab:hover {
2970
background-color: rgba(0, 0, 0, 0.08);
2971
color: rgba(0, 0, 0, 0.87);
2972
text-shadow: none;
2973
}
2974
#LookingGlassDialog .notebook-tab:active {
2976
background-color: rgba(0, 0, 0, 0.2);
2977
color: rgba(0, 0, 0, 0.87);
2978
transition-duration: 200ms;
2979
}
2980
#LookingGlassDialog .notebook-tab:selected {
2982
border-bottom-width: 0;
2983
border-color: transparent;
2984
background-color: rgba(255, 255, 255, 0.01);
2985
box-shadow: inset 0 -2px 0px #4285F4;
2986
color: rgba(0, 0, 0, 0.87);
2987
text-shadow: none;
2988
}
2989
#LookingGlassDialog StBoxLayout#EvalBox {
2991
padding: 4px;
2992
spacing: 4px;
2993
}
2994
#LookingGlassDialog StBoxLayout#ResultsArea {
2996
spacing: 4px;
2997
}
2998
.lg-dialog StEntry {
3000
selection-background-color: rgba(66, 133, 244, 0.32);
3001
selected-color: rgba(0, 0, 0, 0.87);
3002
}
3003
.lg-dialog .shell-link {
3005
color: #4285F4;
3006
}
3007
.lg-dialog .shell-link:hover {
3009
color: #4285F4;
3010
}
3011
.lg-completions-text {
3013
font-size: 1em;
3014
font-style: italic;
3015
}
3016
.lg-obj-inspector-title {
3018
spacing: 4px;
3019
}
3020
.lg-obj-inspector-button {
3022
min-height: 36px;
3023
padding: 0 16px;
3024
border: none;
3025
border-radius: 4px;
3026
font-size: 10.5pt;
3027
font-weight: 500;
3028
color: rgba(0, 0, 0, 0.54);
3029
background-color: transparent;
3030
border-color: transparent;
3031
box-shadow: 0 0 transparent;
3032
text-shadow: none;
3033
icon-shadow: none;
3034
transition-duration: 100ms;
3035
}
3036
.lg-obj-inspector-button:hover {
3038
color: rgba(0, 0, 0, 0.87);
3039
background-color: rgba(0, 0, 0, 0.08);
3040
border-color: transparent;
3041
box-shadow: 0 0 transparent;
3042
text-shadow: none;
3043
icon-shadow: none;
3044
}
3045
.lg-obj-inspector-button:active {
3047
color: rgba(0, 0, 0, 0.87);
3048
background-color: rgba(0, 0, 0, 0.2);
3049
border-color: transparent;
3050
box-shadow: 0 0 transparent;
3051
text-shadow: none;
3052
icon-shadow: none;
3053
transition-duration: 200ms;
3054
}
3055
.lg-obj-inspector-button:insensitive {
3057
color: rgba(0, 0, 0, 0.26);
3058
background-color: transparent;
3059
border-color: transparent;
3060
box-shadow: 0 0 transparent;
3061
text-shadow: none;
3062
icon-shadow: none;
3063
}
3064
.lg-obj-inspector-button:focus {
3066
color: rgba(0, 0, 0, 0.87);
3067
text-shadow: none;
3068
icon-shadow: none;
3069
box-shadow: 0 0 transparent;
3070
}
3071
.lg-obj-inspector-button:hover {
3073
border: none;
3074
}
3075
#lookingGlassExtensions {
3077
padding: 4px;
3078
}
3079
.lg-extensions-list {
3081
padding: 4px;
3082
spacing: 6px;
3083
}
3084
.lg-extension {
3086
border: none;
3087
border-radius: 4px;
3088
padding: 4px;
3089
}
3090
.lg-extension-name {
3092
font-size: 18pt;
3093
font-weight: 400;
3094
}
3095
.lg-extension-meta {
3097
spacing: 6px;
3098
}
3099
#LookingGlassPropertyInspector {
3101
background: #FFFFFF;
3102
border: none;
3103
border-radius: 4px;
3104
padding: 6px;
3105
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
3106
}
3107
/* Dash to Dock */
3109
#dashtodockContainer #dash {
3110
background-color: rgba(0, 0, 0, 0.6);
3111
}
3112
#dashtodockContainer:overview #dash {
3114
background-color: rgba(255, 255, 255, 0.1);
3115
}
3116
#dashtodockContainer.extended:overview #dash {
3118
background-color: transparent;
3119
}
3120
#dashtodockContainer.left #dash,
3122
#dashtodockContainer.right #dash {
3123
padding: 3px 0;
3124
}
3125
#dashtodockContainer.top #dash,
3127
#dashtodockContainer.bottom #dash {
3128
padding: 0 3px;
3129
}
3130
#dashtodockContainer.extended #dash {
3132
padding: 0;
3133
border-radius: 0;
3134
}
3135
#dashtodockContainer.left .dash-item-container > StWidget,
3137
#dashtodockContainer.right .dash-item-container > StWidget,
3138
#dashtodockContainer.extended.left .dash-item-container > StWidget,
3139
#dashtodockContainer.extended.right .dash-item-container > StWidget {
3140
padding: 3px 6px;
3141
}
3142
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
3144
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
3145
padding: 6px 6px 3px 6px;
3146
}
3147
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
3149
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
3150
padding: 3px 6px 6px 6px;
3151
}
3152
#dashtodockContainer.top .dash-item-container > StWidget,
3154
#dashtodockContainer.bottom .dash-item-container > StWidget,
3155
#dashtodockContainer.extended.top .dash-item-container > StWidget,
3156
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
3157
padding: 6px 3px;
3158
}
3159
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
3161
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
3162
padding: 6px 3px 6px 6px;
3163
}
3164
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
3166
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
3167
padding: 6px 6px 6px 3px;
3168
}
3169
#dashtodockContainer .app-well-app-running-dot {
3171
background-color: transparent;
3172
}
3173
#dashtodockContainer .dash-item-container > StWidget {
3175
background-size: cover;
3176
}
3177
#dashtodockContainer.left .dash-item-container > StWidget.running1 {
3179
background-image: url("assets/dash/left-running1.svg");
3180
}
3181
#dashtodockContainer.left .dash-item-container > StWidget.running1.focused {
3183
background-image: url("assets/dash/left-running1-focused.svg");
3184
}
3185
#dashtodockContainer.left .dash-item-container > StWidget.running2 {
3187
background-image: url("assets/dash/left-running2.svg");
3188
}
3189
#dashtodockContainer.left .dash-item-container > StWidget.running2.focused {
3191
background-image: url("assets/dash/left-running2-focused.svg");
3192
}
3193
#dashtodockContainer.left .dash-item-container > StWidget.running3 {
3195
background-image: url("assets/dash/left-running3.svg");
3196
}
3197
#dashtodockContainer.left .dash-item-container > StWidget.running3.focused {
3199
background-image: url("assets/dash/left-running3-focused.svg");
3200
}
3201
#dashtodockContainer.left .dash-item-container > StWidget.running4 {
3203
background-image: url("assets/dash/left-running4.svg");
3204
}
3205
#dashtodockContainer.left .dash-item-container > StWidget.running4.focused {
3207
background-image: url("assets/dash/left-running4-focused.svg");
3208
}
3209
#dashtodockContainer.right .dash-item-container > StWidget.running1 {
3211
background-image: url("assets/dash/right-running1.svg");
3212
}
3213
#dashtodockContainer.right .dash-item-container > StWidget.running1.focused {
3215
background-image: url("assets/dash/right-running1-focused.svg");
3216
}
3217
#dashtodockContainer.right .dash-item-container > StWidget.running2 {
3219
background-image: url("assets/dash/right-running2.svg");
3220
}
3221
#dashtodockContainer.right .dash-item-container > StWidget.running2.focused {
3223
background-image: url("assets/dash/right-running2-focused.svg");
3224
}
3225
#dashtodockContainer.right .dash-item-container > StWidget.running3 {
3227
background-image: url("assets/dash/right-running3.svg");
3228
}
3229
#dashtodockContainer.right .dash-item-container > StWidget.running3.focused {
3231
background-image: url("assets/dash/right-running3-focused.svg");
3232
}
3233
#dashtodockContainer.right .dash-item-container > StWidget.running4 {
3235
background-image: url("assets/dash/right-running4.svg");
3236
}
3237
#dashtodockContainer.right .dash-item-container > StWidget.running4.focused {
3239
background-image: url("assets/dash/right-running4-focused.svg");
3240
}
3241
#dashtodockContainer.top .dash-item-container > StWidget.running1 {
3243
background-image: url("assets/dash/top-running1.svg");
3244
}
3245
#dashtodockContainer.top .dash-item-container > StWidget.running1.focused {
3247
background-image: url("assets/dash/top-running1-focused.svg");
3248
}
3249
#dashtodockContainer.top .dash-item-container > StWidget.running2 {
3251
background-image: url("assets/dash/top-running2.svg");
3252
}
3253
#dashtodockContainer.top .dash-item-container > StWidget.running2.focused {
3255
background-image: url("assets/dash/top-running2-focused.svg");
3256
}
3257
#dashtodockContainer.top .dash-item-container > StWidget.running3 {
3259
background-image: url("assets/dash/top-running3.svg");
3260
}
3261
#dashtodockContainer.top .dash-item-container > StWidget.running3.focused {
3263
background-image: url("assets/dash/top-running3-focused.svg");
3264
}
3265
#dashtodockContainer.top .dash-item-container > StWidget.running4 {
3267
background-image: url("assets/dash/top-running4.svg");
3268
}
3269
#dashtodockContainer.top .dash-item-container > StWidget.running4.focused {
3271
background-image: url("assets/dash/top-running4-focused.svg");
3272
}
3273
#dashtodockContainer.bottom .dash-item-container > StWidget.running1 {
3275
background-image: url("assets/dash/bottom-running1.svg");
3276
}
3277
#dashtodockContainer.bottom .dash-item-container > StWidget.running1.focused {
3279
background-image: url("assets/dash/bottom-running1-focused.svg");
3280
}
3281
#dashtodockContainer.bottom .dash-item-container > StWidget.running2 {
3283
background-image: url("assets/dash/bottom-running2.svg");
3284
}
3285
#dashtodockContainer.bottom .dash-item-container > StWidget.running2.focused {
3287
background-image: url("assets/dash/bottom-running2-focused.svg");
3288
}
3289
#dashtodockContainer.bottom .dash-item-container > StWidget.running3 {
3291
background-image: url("assets/dash/bottom-running3.svg");
3292
}
3293
#dashtodockContainer.bottom .dash-item-container > StWidget.running3.focused {
3295
background-image: url("assets/dash/bottom-running3-focused.svg");
3296
}
3297
#dashtodockContainer.bottom .dash-item-container > StWidget.running4 {
3299
background-image: url("assets/dash/bottom-running4.svg");
3300
}
3301
#dashtodockContainer.bottom .dash-item-container > StWidget.running4.focused {
3303
background-image: url("assets/dash/bottom-running4-focused.svg");
3304
}
3305
/* Simple Dock */
3307
#dash:desktop {
3308
background-color: rgba(0, 0, 0, 0.6);
3309
}
3310
/* GPaste */
3312
.popup-menu .search-entry {
3313
color: rgba(0, 0, 0, 0.87);
3314
selection-background-color: rgba(66, 133, 244, 0.32);
3315
selected-color: rgba(0, 0, 0, 0.87);
3316
transition-duration: 100ms;
3317
background-color: rgba(0, 0, 0, 0.04);
3318
border-color: transparent;
3319
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
3320
}
3321
.popup-menu .search-entry:hover {
3323
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
3324
}
3325
.popup-menu .search-entry:focus {
3327
border-color: transparent;
3328
box-shadow: inset 0 -2px #4285F4;
3329
color: rgba(0, 0, 0, 0.87);
3330
}
3331
.popup-menu .search-entry .search-entry-icon {
3333
color: rgba(0, 0, 0, 0.54);
3334
}
3335
.popup-menu .search-entry:hover .search-entry-icon, .popup-menu .search-entry:focus .search-entry-icon {
3337
color: rgba(0, 0, 0, 0.87);
3338
}
3339