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
min-width: 48px;
33
padding: 0 8px;
34
border-width: 0;
35
border-radius: 4px;
36
font-size: 10.5pt;
37
font-weight: 500;
38
color: #1A73E8;
39
background-color: transparent;
40
border-color: transparent;
41
box-shadow: 0 0 transparent;
42
text-shadow: none;
43
icon-shadow: none;
44
transition-duration: 100ms;
45
}
46
.button:focus {
48
color: #1A73E8;
49
background-color: rgba(26, 115, 232, 0.12);
50
text-shadow: none;
51
icon-shadow: none;
52
box-shadow: 0 0 transparent;
53
}
54
.button:hover {
56
color: #1A73E8;
57
background-color: rgba(26, 115, 232, 0.08);
58
border-color: transparent;
59
box-shadow: 0 0 transparent;
60
text-shadow: none;
61
icon-shadow: none;
62
}
63
.button:active {
65
color: #1A73E8;
66
background-color: rgba(26, 115, 232, 0.2);
67
border-color: transparent;
68
box-shadow: 0 0 transparent;
69
text-shadow: none;
70
icon-shadow: none;
71
transition-duration: 200ms;
72
}
73
.button:insensitive {
75
color: rgba(0, 0, 0, 0.26);
76
background-color: transparent;
77
border-color: transparent;
78
box-shadow: 0 0 transparent;
79
text-shadow: none;
80
icon-shadow: none;
81
}
82
.modal-dialog-linked-button {
84
min-height: 32px;
85
min-width: 48px;
86
margin: 4px;
87
padding: 0 8px;
88
margin-right: 0;
89
border-right-width: 0;
90
border-radius: 4px;
91
font-size: 10.5pt;
92
font-weight: 500;
93
color: #1A73E8;
94
background-color: transparent;
95
border-color: transparent;
96
box-shadow: 0 0 transparent;
97
text-shadow: none;
98
icon-shadow: none;
99
transition-duration: 100ms;
100
}
101
.modal-dialog-linked-button:focus {
103
color: #1A73E8;
104
background-color: rgba(26, 115, 232, 0.12);
105
text-shadow: none;
106
icon-shadow: none;
107
box-shadow: 0 0 transparent;
108
}
109
.modal-dialog-linked-button:hover {
111
color: #1A73E8;
112
background-color: rgba(26, 115, 232, 0.08);
113
border-color: transparent;
114
box-shadow: 0 0 transparent;
115
text-shadow: none;
116
icon-shadow: none;
117
}
118
.modal-dialog-linked-button:active {
120
color: #1A73E8;
121
background-color: rgba(26, 115, 232, 0.2);
122
border-color: transparent;
123
box-shadow: 0 0 transparent;
124
text-shadow: none;
125
icon-shadow: none;
126
transition-duration: 200ms;
127
}
128
.modal-dialog-linked-button:insensitive {
130
color: rgba(0, 0, 0, 0.26);
131
background-color: transparent;
132
border-color: transparent;
133
box-shadow: 0 0 transparent;
134
text-shadow: none;
135
icon-shadow: none;
136
}
137
.modal-dialog-linked-button:first-child {
139
border-radius: 4px;
140
}
141
.modal-dialog-linked-button:last-child {
143
margin-right: 4px;
144
border-right-width: 0px;
145
border-radius: 4px;
146
}
147
.modal-dialog-linked-button:first-child:last-child {
149
margin-right: 4px;
150
border-right-width: 0px;
151
border-radius: 4px;
152
}
153
/* Entries */
155
StEntry {
156
min-height: 32px;
157
padding: 0 8px;
158
border-radius: 4px 4px 0 0;
159
border-width: 0;
160
color: rgba(0, 0, 0, 0.87);
161
selection-background-color: rgba(26, 115, 232, 0.24);
162
selected-color: rgba(0, 0, 0, 0.87);
163
font-size: 11.25pt;
164
font-weight: 400;
165
transition-duration: 100ms;
166
background-color: rgba(0, 0, 0, 0.04);
167
border-color: transparent;
168
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
169
}
170
StEntry:hover {
172
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
173
}
174
StEntry:focus {
176
border-color: transparent;
177
box-shadow: inset 0 -2px #1A73E8;
178
}
179
StEntry:insensitive {
181
color: rgba(0, 0, 0, 0.38);
182
border-color: transparent;
183
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
184
}
185
StEntry StIcon.capslock-warning {
187
icon-size: 16px;
188
warning-color: #F4B400;
189
padding: 0 0;
190
}
191
/* Scrollbars */
193
StScrollView.vfade {
194
-st-vfade-offset: 32px;
195
}
196
StScrollView.hfade {
198
-st-hfade-offset: 32px;
199
}
200
StScrollBar {
202
padding: 0;
203
}
204
StScrollView StScrollBar {
206
min-width: 16px;
207
min-height: 16px;
208
}
209
StScrollBar StBin#trough {
211
margin: 4px;
212
border-radius: 100px;
213
background-color: rgba(0, 0, 0, 0.12);
214
}
215
StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
217
transition-duration: 100ms;
218
border-radius: 100px;
219
background-color: rgba(0, 0, 0, 0.38);
220
margin: 4px;
221
}
222
StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover {
224
background-color: rgba(0, 0, 0, 0.6);
225
}
226
StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
228
background-color: rgba(0, 0, 0, 0.87);
229
}
230
#overview StScrollBar StBin#trough, #screenShieldNotifications StScrollBar StBin#trough {
232
background-color: rgba(255, 255, 255, 0.12);
233
}
234
#overview StScrollBar StButton#vhandle, #screenShieldNotifications StScrollBar StButton#vhandle, #overview StScrollBar StButton#hhandle, #screenShieldNotifications StScrollBar StButton#hhandle {
236
background-color: rgba(255, 255, 255, 0.5);
237
}
238
#overview StScrollBar StButton#vhandle:hover, #screenShieldNotifications StScrollBar StButton#vhandle:hover, #overview StScrollBar StButton#hhandle:hover, #screenShieldNotifications StScrollBar StButton#hhandle:hover {
240
background-color: rgba(255, 255, 255, 0.7);
241
}
242
#overview StScrollBar StButton#vhandle:active, #screenShieldNotifications StScrollBar StButton#vhandle:active, #overview StScrollBar StButton#hhandle:active, #screenShieldNotifications StScrollBar StButton#hhandle:active {
244
background-color: white;
245
}
246
/* Slider */
248
.slider {
249
height: 20px;
250
color: #1A73E8;
251
-barlevel-height: 2px;
252
-barlevel-background-color: rgba(0, 0, 0, 0.26);
253
-barlevel-border-color: transparent;
254
-barlevel-active-background-color: #1A73E8;
255
-barlevel-active-border-color: transparent;
256
-barlevel-overdrive-color: #D93025;
257
-barlevel-overdrive-border-color: transparent;
258
-barlevel-overdrive-separator-width: 2px;
259
-barlevel-border-width: 0;
260
-slider-handle-radius: 6px;
261
}
262
/* Check Boxes */
264
.check-box * {
265
min-height: 16px;
266
padding: 8px 0;
267
}
268
.check-box StBoxLayout {
270
spacing: 8px;
271
}
272
.check-box StBin {
274
transition-duration: 100ms;
275
width: 24px;
276
height: 24px;
277
padding: 4px;
278
border-radius: 100px;
279
background-image: url("assets/checkbox-off.svg");
280
}
281
.check-box:focus StBin {
283
background-image: url("assets/checkbox-off.svg");
284
}
285
.check-box:hover StBin {
287
background-color: rgba(0, 0, 0, 0.08);
288
}
289
.check-box:active StBin {
291
transition-duration: 200ms;
292
background-color: rgba(0, 0, 0, 0.2);
293
}
294
.check-box:checked StBin {
296
background-image: url("assets/checkbox.svg");
297
}
298
.check-box:focus:checked StBin {
300
background-image: url("assets/checkbox.svg");
301
}
302
.check-box:hover:checked StBin {
304
background-color: rgba(26, 115, 232, 0.08);
305
}
306
.check-box:active:checked StBin {
308
background-color: rgba(26, 115, 232, 0.2);
309
}
310
/* Switches */
312
.toggle-switch {
313
width: 40px;
314
height: 20px;
315
background-size: contain;
316
}
317
.toggle-switch-us {
319
background-image: url("assets/toggle-off.svg");
320
}
321
.toggle-switch-us:checked {
323
background-image: url("assets/toggle-on.svg");
324
}
325
.toggle-switch-intl {
327
background-image: url("assets/toggle-off.svg");
328
}
329
.toggle-switch-intl:checked {
331
background-image: url("assets/toggle-on.svg");
332
}
333
/* links */
335
.shell-link {
336
transition-duration: 100ms;
337
border-radius: 4px;
338
color: #1A73E8;
339
}
340
.shell-link:hover {
342
color: #1A73E8;
343
background-color: rgba(26, 115, 232, 0.08);
344
}
345
.shell-link:active {
347
transition-duration: 200ms;
348
color: #1A73E8;
349
background-color: rgba(26, 115, 232, 0.2);
350
}
351
/* Modal Dialogs */
353
.headline {
354
font-size: 15pt;
355
font-weight: 500;
356
}
357
.lightbox {
359
background-color: black;
360
}
361
.flashspot {
363
background-color: white;
364
}
365
.modal-dialog {
367
border-radius: 4px;
368
color: rgba(0, 0, 0, 0.87);
369
background-color: #FFFFFF;
370
border: none;
371
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
372
}
373
.modal-dialog .modal-dialog-content-box {
375
padding: 24px;
376
}
377
.modal-dialog .run-dialog-entry {
379
width: 20em;
380
margin-bottom: 0;
381
}
382
.modal-dialog .run-dialog-error-box {
384
padding-top: 16px;
385
spacing: 6px;
386
}
387
.modal-dialog .run-dialog-button-box {
389
padding-top: 1em;
390
}
391
.modal-dialog .run-dialog-label {
393
font-size: 1em;
394
font-weight: normal;
395
color: rgba(0, 0, 0, 0.6);
396
padding-bottom: .4em;
397
}
398
.mount-dialog-subject,
400
.end-session-dialog-subject {
401
font-size: 15pt;
402
font-weight: 500;
403
}
404
/* Message Dialog */
406
.message-dialog-main-layout {
407
padding: 12px 20px 0;
408
spacing: 12px;
409
}
410
.message-dialog-content {
412
max-width: 28em;
413
spacing: 20px;
414
}
415
.message-dialog-icon {
417
min-width: 48px;
418
icon-size: 48px;
419
}
420
.message-dialog-title {
422
font-weight: bold;
423
}
424
.message-dialog-subtitle {
426
color: rgba(0, 0, 0, 0.6);
427
font-weight: normal;
428
}
429
/* End Session Dialog */
431
.end-session-dialog {
432
spacing: 42px;
433
border: none;
434
}
435
.end-session-dialog-list {
437
padding-top: 20px;
438
}
439
.end-session-dialog-layout {
441
padding-left: 17px;
442
}
443
.end-session-dialog-layout:rtl {
445
padding-right: 17px;
446
}
447
.end-session-dialog-description {
449
width: 28em;
450
padding-bottom: 10px;
451
}
452
.end-session-dialog-description:rtl {
454
text-align: right;
455
}
456
.end-session-dialog-warning {
458
width: 28em;
459
color: #F4B400;
460
padding-top: 6px;
461
}
462
.end-session-dialog-warning:rtl {
464
text-align: right;
465
}
466
.end-session-dialog-logout-icon {
468
border-radius: 5px;
469
width: 48px;
470
height: 48px;
471
background-size: contain;
472
}
473
.end-session-dialog-shutdown-icon {
475
color: rgba(0, 0, 0, 0.38);
476
width: 48px;
477
height: 48px;
478
}
479
.end-session-dialog-inhibitor-layout {
481
spacing: 16px;
482
max-height: 200px;
483
padding-right: 65px;
484
padding-left: 65px;
485
}
486
.end-session-dialog-session-list,
488
.end-session-dialog-app-list {
489
spacing: 1em;
490
}
491
.end-session-dialog-list-header {
493
font-weight: bold;
494
}
495
.end-session-dialog-list-header:rtl {
497
text-align: right;
498
}
499
.end-session-dialog-app-list-item,
501
.end-session-dialog-session-list-item {
502
spacing: 1em;
503
}
504
.end-session-dialog-app-list-item-name,
506
.end-session-dialog-session-list-item-name {
507
font-weight: bold;
508
}
509
.end-session-dialog-app-list-item-description {
511
color: rgba(0, 0, 0, 0.6);
512
font-size: 1em;
513
}
514
/* ShellMountOperation Dialogs */
516
.shell-mount-operation-icon {
517
icon-size: 48px;
518
}
519
.mount-dialog {
521
spacing: 24px;
522
}
523
.mount-dialog .message-dialog-title {
525
padding-top: 10px;
526
padding-left: 17px;
527
padding-bottom: 6px;
528
max-width: 34em;
529
}
530
.mount-dialog .message-dialog-title:rtl {
532
padding-left: 0px;
533
padding-right: 17px;
534
}
535
.mount-dialog .message-dialog-body {
537
padding-left: 17px;
538
width: 28em;
539
}
540
.mount-dialog .message-dialog-body:rtl {
542
padding-left: 0px;
543
padding-right: 17px;
544
}
545
.mount-dialog-app-list {
547
max-height: 200px;
548
padding-top: 24px;
549
padding-left: 49px;
550
padding-right: 32px;
551
}
552
.mount-dialog-app-list:rtl {
554
padding-right: 49px;
555
padding-left: 32px;
556
}
557
.mount-dialog-app-list-item {
559
color: rgba(0, 0, 0, 0.87);
560
}
561
.mount-dialog-app-list-item:hover {
563
color: rgba(0, 0, 0, 0.87);
564
}
565
.mount-dialog-app-list-item:ltr {
567
padding-right: 1em;
568
}
569
.mount-dialog-app-list-item:rtl {
571
padding-left: 1em;
572
}
573
.mount-dialog-app-list-item-icon:ltr {
575
padding-right: 17px;
576
}
577
.mount-dialog-app-list-item-icon:rtl {
579
padding-left: 17px;
580
}
581
.mount-dialog-app-list-item-name {
583
font-size: 1em;
584
}
585
/* Password or Authentication Dialog */
587
.prompt-dialog {
588
width: 34em;
589
border: none;
590
}
591
.prompt-dialog .message-dialog-main-layout {
593
spacing: 24px;
594
padding: 10px;
595
}
596
.prompt-dialog .message-dialog-content {
598
spacing: 16px;
599
}
600
.prompt-dialog .message-dialog-title {
602
font-size: 15pt;
603
font-weight: 500;
604
color: rgba(0, 0, 0, 0.87);
605
}
606
.prompt-dialog-description:rtl {
608
text-align: right;
609
}
610
.prompt-dialog-password-box {
612
spacing: 1em;
613
padding-bottom: 1em;
614
}
615
.prompt-dialog-error-label {
617
font-size: 1em;
618
color: #D93025;
619
padding-bottom: 8px;
620
}
621
.prompt-dialog-info-label {
623
font-size: 1em;
624
padding-bottom: 8px;
625
}
626
.hidden {
628
color: rgba(0, 0, 0, 0);
629
}
630
.prompt-dialog-null-label {
632
font-size: 1em;
633
padding-bottom: 8px;
634
}
635
/* Polkit Dialog */
637
.polkit-dialog-user-layout {
638
padding-left: 10px;
639
spacing: 10px;
640
}
641
.polkit-dialog-user-layout:rtl {
643
padding-left: 0px;
644
padding-right: 10px;
645
}
646
.polkit-dialog-user-root-label {
648
color: #F4B400;
649
}
650
.polkit-dialog-user-icon {
652
border-radius: 5px;
653
background-size: contain;
654
width: 48px;
655
height: 48px;
656
}
657
/* Audio selection dialog */
659
.audio-device-selection-dialog {
660
spacing: 30px;
661
}
662
.audio-selection-content {
664
spacing: 20px;
665
padding: 24px;
666
}
667
.audio-selection-title {
669
font-weight: bold;
670
text-align: center;
671
}
672
.audio-selection-box {
674
spacing: 20px;
675
}
676
.audio-selection-device {
678
border: none;
679
border-radius: 4px;
680
}
681
.audio-selection-device:focus {
683
background-color: rgba(0, 0, 0, 0.12);
684
}
685
.audio-selection-device:hover {
687
background-color: rgba(0, 0, 0, 0.08);
688
}
689
.audio-selection-device:active {
691
background-color: rgba(0, 0, 0, 0.2);
692
}
693
.audio-selection-device-box {
695
padding: 20px;
696
spacing: 20px;
697
}
698
.audio-selection-device-icon {
700
icon-size: 64px;
701
}
702
/* Access Dialog */
704
.access-dialog {
705
spacing: 30px;
706
}
707
/* Geolocation Dialog */
709
.geolocation-dialog {
710
spacing: 30px;
711
}
712
/* Extension Dialog */
714
.extension-dialog .message-dialog-main-layout {
715
spacing: 24px;
716
padding: 10px;
717
}
718
.extension-dialog .message-dialog-title {
720
color: rgba(0, 0, 0, 0.6);
721
}
722
/* Inhibit-Shortcuts Dialog */
724
.inhibit-shortcuts-dialog {
725
spacing: 30px;
726
}
727
/* Network Agent Dialog */
729
.network-dialog-secret-table {
730
spacing-rows: 15px;
731
spacing-columns: 1em;
732
}
733
.keyring-dialog-control-table {
735
spacing-rows: 15px;
736
spacing-columns: 1em;
737
}
738
/* Popovers/Menus */
740
.popup-menu {
741
min-width: 200px;
742
}
743
.popup-menu .popup-sub-menu {
745
background-color: rgba(0, 0, 0, 0.04);
746
box-shadow: 0 0 transparent;
747
}
748
.popup-menu .popup-menu-content {
750
padding: 8px 0;
751
}
752
.popup-menu .popup-menu-item {
754
spacing: 8px;
755
transition-duration: 100ms;
756
}
757
.popup-menu .popup-menu-item:ltr {
759
padding: 0.4em 24px 0.4em 0;
760
}
761
.popup-menu .popup-menu-item:rtl {
763
padding: 0.4em 0 0.4em 24px;
764
}
765
.popup-menu .popup-menu-item:checked {
767
background-color: rgba(26, 115, 232, 0.24);
768
box-shadow: 0 0 transparent;
769
font-weight: normal;
770
}
771
.popup-menu .popup-menu-item:checked.selected {
773
background-color: rgba(26, 115, 232, 0.4);
774
}
775
.popup-menu .popup-menu-item:checked:active {
777
background-color: rgba(26, 115, 232, 0.6);
778
}
779
.popup-menu .popup-menu-item.selected {
781
background-color: rgba(0, 0, 0, 0.08);
782
color: rgba(0, 0, 0, 0.87);
783
transition-duration: 0ms;
784
}
785
.popup-menu .popup-menu-item:active {
787
background-color: rgba(0, 0, 0, 0.2);
788
color: rgba(0, 0, 0, 0.87);
789
transition-duration: 200ms;
790
}
791
.popup-menu .popup-menu-item.selected:active {
793
color: rgba(0, 0, 0, 0.87);
794
}
795
.popup-menu .popup-menu-item:insensitive {
797
color: rgba(0, 0, 0, 0.38);
798
}
799
.popup-menu .popup-inactive-menu-item {
801
color: rgba(0, 0, 0, 0.87);
802
}
803
.popup-menu .popup-inactive-menu-item:insensitive {
805
color: rgba(0, 0, 0, 0.38);
806
}
807
.popup-menu.panel-menu {
809
-boxpointer-gap: 4px;
810
margin-bottom: 1.75em;
811
}
812
.popup-menu-ornament {
814
text-align: right;
815
width: 16px;
816
height: 16px;
817
}
818
.popup-menu-boxpointer,
820
.candidate-popup-boxpointer {
821
-arrow-border-radius: 20px;
822
-arrow-background-color: transparent;
823
-arrow-border-width: 0;
824
-arrow-border-color: transparent;
825
-arrow-base: 0;
826
-arrow-rise: 0;
827
-arrow-box-shadow: none;
828
margin: 5px 8px 8px;
829
background-color: #FFFFFF;
830
border-radius: 4px;
831
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
832
}
833
.popup-separator-menu-item {
835
height: 1px;
836
margin: 8px 40px;
837
background-color: rgba(0, 0, 0, 0.12);
838
border-color: transparent;
839
border-bottom-width: 0;
840
border-bottom-style: none;
841
}
842
.background-menu {
844
-boxpointer-gap: 4px;
845
-arrow-rise: 0;
846
}
847
/* fallback menu
849
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
850
app menu inside the main app window itself rather than the top bar
851
*/
852
/* OSD */
853
.osd-window {
854
text-align: center;
855
font-weight: bold;
856
spacing: 1em;
857
margin: 32px;
858
min-width: 64px;
859
min-height: 64px;
860
}
861
.osd-window .osd-monitor-label {
863
font-size: 48px;
864
font-weight: 400;
865
}
866
.osd-window .level {
868
height: 8px;
869
-barlevel-height: 8px;
870
-barlevel-background-color: rgba(0, 0, 0, 0.12);
871
-barlevel-active-background-color: #1A73E8;
872
-barlevel-overdrive-color: #D93025;
873
-barlevel-overdrive-separator-width: 2px;
874
}
875
/* Pad OSD */
877
.pad-osd-window {
878
padding: 32px;
879
background-color: rgba(0, 0, 0, 0.6);
880
}
881
.pad-osd-window .pad-osd-title-box {
883
spacing: 12px;
884
}
885
.pad-osd-window .pad-osd-title-menu-box {
887
spacing: 6px;
888
}
889
.combo-box-label {
891
width: 15em;
892
}
893
/* App Switcher */
895
.switcher-popup {
896
padding: 8px;
897
spacing: 16px;
898
}
899
.switcher-list-item-container {
901
spacing: 8px;
902
}
903
.switcher-list .item-box {
905
transition-duration: 100ms;
906
padding: 8px;
907
border-radius: 4px;
908
}
909
.switcher-list .item-box:outlined {
911
padding: 8px;
912
border: none;
913
background-color: rgba(0, 0, 0, 0.12);
914
color: rgba(0, 0, 0, 0.87);
915
}
916
.switcher-list .item-box:selected {
918
background-color: rgba(26, 115, 232, 0.24);
919
color: rgba(0, 0, 0, 0.87);
920
}
921
.switcher-list .thumbnail-box {
923
padding: 2px;
924
spacing: 4px;
925
}
926
.switcher-list .thumbnail {
928
width: 256px;
929
}
930
.switcher-list .separator {
932
width: 1px;
933
background: rgba(0, 0, 0, 0.12);
934
}
935
.switcher-arrow {
937
transition-duration: 100ms;
938
border-color: rgba(0, 0, 0, 0);
939
color: rgba(0, 0, 0, 0.6);
940
}
941
.switcher-arrow:highlighted {
943
color: rgba(0, 0, 0, 0.87);
944
}
945
.input-source-switcher-symbol {
947
font-size: 48px;
948
font-weight: 400;
949
width: 96px;
950
height: 96px;
951
}
952
/* Window Cycler */
954
.cycler-highlight {
955
border: 4px solid #1A73E8;
956
}
957
/* Workspace Switcher */
959
.workspace-switcher-group {
960
padding: 8px;
961
}
962
.workspace-switcher {
964
background: transparent;
965
border: 0px;
966
border-radius: 0px;
967
padding: 0px;
968
spacing: 8px;
969
}
970
.ws-switcher-active-up, .ws-switcher-active-down {
972
height: 48px;
973
background-color: #1A73E8;
974
color: white;
975
background-size: 32px;
976
border-radius: 4px;
977
}
978
.ws-switcher-box {
980
height: 48px;
981
border: none;
982
background: rgba(0, 0, 0, 0.12);
983
border-radius: 4px;
984
}
985
.osd-window,
987
.resize-popup,
988
.switcher-list, .workspace-switcher-container {
989
color: rgba(0, 0, 0, 0.87);
990
background-color: #FFFFFF;
991
border: none;
992
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
993
border-radius: 4px;
994
padding: 12px;
995
}
996
/* Tiled window previews */
998
.tile-preview {
999
background-color: rgba(138, 180, 248, 0.3);
1000
border: 1px solid #8AB4F8;
1001
}
1002
.tile-preview-left.on-primary {
1004
border-radius: 0;
1005
}
1006
.tile-preview-right.on-primary {
1008
border-radius: 0;
1009
}
1010
.tile-preview-left.tile-preview-right.on-primary {
1012
border-radius: 0;
1013
}
1014
/* TOP BAR */
1016
#panel {
1017
background-color: rgba(0, 0, 0, 0.6);
1018
/* transition from solid to transparent */
1019
transition-duration: 250ms;
1020
font-weight: bold;
1021
height: 28px;
1022
font-feature-settings: "tnum";
1023
}
1024
#panel:overview, #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
1026
background-color: transparent;
1027
}
1028
#panel #panelLeft, #panel #panelCenter {
1030
spacing: 0;
1031
}
1032
#panel .panel-corner {
1034
-panel-corner-radius: 0;
1035
-panel-corner-background-color: rgba(0, 0, 0, 0.6);
1036
-panel-corner-border-width: 2px;
1037
-panel-corner-border-color: transparent;
1038
}
1039
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
1041
-panel-corner-border-color: white;
1042
}
1043
#panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
1045
-panel-corner-radius: 0;
1046
-panel-corner-background-color: transparent;
1047
-panel-corner-border-color: transparent;
1048
}
1049
#panel .panel-button {
1051
-natural-hpadding: 8px;
1052
-minimum-hpadding: 4px;
1053
font-weight: bold;
1054
color: rgba(255, 255, 255, 0.7);
1055
text-shadow: none;
1056
transition-duration: 100ms;
1057
}
1058
#panel .panel-button .app-menu-icon {
1060
-st-icon-style: symbolic;
1061
margin-left: 4px;
1062
margin-right: 4px;
1063
}
1064
#panel .panel-button .system-status-icon,
1066
#panel .panel-button .app-menu-icon > StIcon,
1067
#panel .panel-button .popup-menu-arrow {
1068
icon-shadow: none;
1069
}
1070
#panel .panel-button:hover {
1072
color: white;
1073
text-shadow: none;
1074
}
1075
#panel .panel-button:hover .system-status-icon,
1077
#panel .panel-button:hover .app-menu-icon > StIcon,
1078
#panel .panel-button:hover .popup-menu-arrow {
1079
icon-shadow: none;
1080
}
1081
#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
1083
background-color: rgba(0, 0, 0, 0.01);
1084
box-shadow: inset 0 -2px 0px white;
1085
color: white;
1086
}
1087
#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 {
1089
icon-shadow: none;
1090
}
1091
#panel .panel-button .system-status-icon {
1093
icon-size: 1.14286em;
1094
padding: 0 4px;
1095
}
1096
.unlock-screen #panel .panel-button,
1098
.login-screen #panel .panel-button,
1099
.lock-screen #panel .panel-button {
1100
color: rgba(255, 255, 255, 0.7);
1101
}
1102
.unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
1104
.login-screen #panel .panel-button:focus,
1105
.login-screen #panel .panel-button:hover,
1106
.login-screen #panel .panel-button:active,
1107
.lock-screen #panel .panel-button:focus,
1108
.lock-screen #panel .panel-button:hover,
1109
.lock-screen #panel .panel-button:active {
1110
color: white;
1111
}
1112
#panel .panel-status-indicators-box,
1114
#panel .panel-status-menu-box {
1115
spacing: 2px;
1116
}
1117
#panel .power-status.panel-status-indicators-box {
1119
spacing: 0;
1120
}
1121
#panel .screencast-indicator {
1123
color: #F4B400;
1124
}
1125
#panel .remote-access-indicator {
1127
color: #F4B400;
1128
}
1129
#panel.solid {
1131
background-color: rgba(0, 0, 0, 0.6);
1132
/* transition from transparent to solid */
1133
transition-duration: 250ms;
1134
background-gradient-direction: none;
1135
text-shadow: none;
1136
}
1137
#panel.solid:overview {
1139
background-color: transparent;
1140
}
1141
#panel.solid .panel-corner {
1143
-panel-corner-background-color: rgba(0, 0, 0, 0.6);
1144
}
1145
#panel.solid .panel-button {
1147
color: rgba(255, 255, 255, 0.7);
1148
text-shadow: none;
1149
}
1150
#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 {
1152
color: white;
1153
}
1154
#panel.solid .system-status-icon,
1156
#panel.solid .app-menu-icon > StIcon,
1157
#panel.solid .popup-menu-arrow {
1158
icon-shadow: none;
1159
}
1160
#calendarArea {
1162
padding: 8px 16px;
1163
}
1164
.calendar {
1166
margin-bottom: 0;
1167
}
1168
.calendar,
1170
.datemenu-today-button,
1171
.datemenu-displays-box,
1172
.message-list-sections {
1173
margin: 0 8px;
1174
}
1175
.datemenu-calendar-column {
1177
spacing: 8px;
1178
}
1179
.datemenu-displays-section {
1181
padding-bottom: 0;
1182
}
1183
.datemenu-displays-box {
1185
spacing: 8px;
1186
}
1187
.datemenu-calendar-column {
1189
border: 0 solid rgba(0, 0, 0, 0.12);
1190
}
1191
.datemenu-calendar-column:ltr {
1193
border-left-width: 0;
1194
}
1195
.datemenu-calendar-column:rtl {
1197
border-right-width: 0;
1198
}
1199
.datemenu-today-button,
1201
.world-clocks-button,
1202
.weather-button,
1203
.events-section-title {
1204
min-height: 20px;
1205
padding: 4px 8px;
1206
border-radius: 4px;
1207
}
1208
.datemenu-today-button {
1210
min-height: 48px;
1211
}
1212
.message-list-section-list:ltr {
1214
padding-left: 0;
1215
}
1216
.message-list-section-list:rtl {
1218
padding-right: 0;
1219
}
1220
.datemenu-today-button,
1222
.world-clocks-button,
1223
.weather-button,
1224
.events-section-title {
1225
transition-duration: 100ms;
1226
}
1227
.datemenu-today-button:hover, .datemenu-today-button:focus,
1229
.world-clocks-button:hover,
1230
.world-clocks-button:focus,
1231
.weather-button:hover,
1232
.weather-button:focus,
1233
.events-section-title:hover,
1234
.events-section-title:focus {
1235
color: rgba(0, 0, 0, 0.87);
1236
background-color: rgba(0, 0, 0, 0.08);
1237
}
1238
.datemenu-today-button:active,
1240
.world-clocks-button:active,
1241
.weather-button:active,
1242
.events-section-title:active {
1243
transition-duration: 200ms;
1244
color: rgba(0, 0, 0, 0.87);
1245
background-color: rgba(0, 0, 0, 0.2);
1246
}
1247
.datemenu-today-button .date-label {
1249
font-size: 18pt;
1250
font-weight: 400;
1251
}
1252
.world-clocks-header,
1254
.weather-header,
1255
.events-section-title {
1256
color: rgba(0, 0, 0, 0.6);
1257
font-weight: bold;
1258
}
1259
.world-clocks-grid {
1261
spacing-rows: 0.4em;
1262
}
1263
.weather-box {
1265
spacing: 0.4em;
1266
}
1267
.calendar-month-label {
1269
transition-duration: 100ms;
1270
height: 16px;
1271
margin: 2px;
1272
padding: 6px 16px;
1273
border-radius: 4px;
1274
color: rgba(0, 0, 0, 0.87);
1275
font-weight: bold;
1276
text-align: center;
1277
}
1278
.calendar-month-label:focus {
1280
background-color: rgba(0, 0, 0, 0.12);
1281
}
1282
.pager-button {
1284
transition-duration: 100ms;
1285
width: 28px;
1286
height: 28px;
1287
margin: 2px;
1288
border-radius: 100px;
1289
background-color: transparent;
1290
color: rgba(0, 0, 0, 0.87);
1291
}
1292
.pager-button:hover, .pager-button:focus {
1294
background-color: rgba(0, 0, 0, 0.08);
1295
}
1296
.pager-button:active {
1298
background-color: rgba(0, 0, 0, 0.2);
1299
transition-duration: 200ms;
1300
}
1301
.calendar-change-month-back {
1303
background-image: url("assets/calendar-arrow-left.svg");
1304
}
1305
.calendar-change-month-back:rtl {
1307
background-image: url("assets/calendar-arrow-right.svg");
1308
}
1309
.calendar-change-month-forward {
1311
background-image: url("assets/calendar-arrow-right.svg");
1312
}
1313
.calendar-change-month-forward:rtl {
1315
background-image: url("assets/calendar-arrow-left.svg");
1316
}
1317
.calendar-day-base {
1319
transition-duration: 100ms;
1320
font-size: 9pt;
1321
font-weight: 400;
1322
text-align: center;
1323
width: 28px;
1324
height: 28px;
1325
padding: 0;
1326
margin: 2px;
1327
border-radius: 100px;
1328
font-feature-settings: "tnum";
1329
}
1330
.calendar-day-base:hover, .calendar-day-base:focus {
1332
background-color: rgba(0, 0, 0, 0.08);
1333
}
1334
.calendar-day-base:active {
1336
transition-duration: 200ms;
1337
color: inherit;
1338
background-color: rgba(0, 0, 0, 0.2);
1339
border-color: transparent;
1340
}
1341
.calendar-day-base:selected {
1343
color: rgba(0, 0, 0, 0.87);
1344
background-color: rgba(26, 115, 232, 0.24);
1345
border-color: transparent;
1346
}
1347
.calendar-day-base.calendar-day-heading {
1349
width: 28px;
1350
height: 21px;
1351
margin-top: 2px;
1352
padding: 7px 0 0;
1353
border-radius: 100px;
1354
background-color: transparent;
1355
color: rgba(0, 0, 0, 0.38);
1356
font-size: 9pt;
1357
font-weight: 400;
1358
font-weight: bold;
1359
text-align: center;
1360
}
1361
.calendar-day {
1363
border-width: 0;
1364
}
1365
.calendar-day-top {
1367
border-top-width: 0;
1368
}
1369
.calendar-day-left {
1371
border-left-width: 0;
1372
}
1373
.calendar-nonwork-day {
1375
color: rgba(0, 0, 0, 0.87);
1376
}
1377
.calendar-today {
1379
font-weight: bold !important;
1380
border: none;
1381
}
1382
.calendar-day-with-events {
1384
color: #1A73E8;
1385
font-weight: normal;
1386
text-decoration: underline;
1387
background-image: none;
1388
}
1389
.calendar-other-month-day {
1391
color: rgba(0, 0, 0, 0.26);
1392
}
1393
.calendar-week-number {
1395
width: 28px;
1396
height: 21px;
1397
margin: 2px;
1398
padding: 7px 0 0;
1399
border-radius: 100px;
1400
background-color: transparent;
1401
color: rgba(0, 0, 0, 0.38);
1402
font-size: inherit;
1403
font-weight: bold;
1404
text-align: center;
1405
}
1406
/* Message list */
1408
.message-list {
1409
width: 420px;
1410
}
1411
.message-list-clear-button.button {
1413
background-color: transparent;
1414
margin: 8px 8px 0;
1415
}
1416
.message-list-clear-button.button:focus {
1418
background-color: rgba(26, 115, 232, 0.12);
1419
}
1420
.message-list-clear-button.button:hover {
1422
background-color: rgba(26, 115, 232, 0.08);
1423
}
1424
.message-list-clear-button.button:active {
1426
background-color: rgba(26, 115, 232, 0.2);
1427
}
1428
.message-list-sections {
1430
spacing: 8px;
1431
}
1432
.message-list-section,
1434
.message-list-section-list {
1435
spacing: 8px;
1436
}
1437
.message {
1439
transition-duration: 100ms;
1440
min-height: 56px;
1441
background-color: transparent;
1442
border-radius: 4px;
1443
}
1444
.message:hover, .message:focus {
1446
background-color: rgba(0, 0, 0, 0.08);
1447
}
1448
.message:active {
1450
transition-duration: 200ms;
1451
background-color: rgba(0, 0, 0, 0.2);
1452
}
1453
.message-icon-bin {
1455
padding: 8px 0px 8px 8px;
1456
}
1457
.message-icon-bin:rtl {
1459
padding: 8px 8px 8px 0px;
1460
}
1461
.message-icon-bin > StIcon {
1463
color: rgba(0, 0, 0, 0.87);
1464
icon-size: 1.14286em;
1465
-st-icon-style: requested;
1466
margin: 4px 0px 4px 4px;
1467
}
1468
.message-icon-bin > StIcon:rtl {
1470
margin: 4px 4px 4px 0px;
1471
}
1472
.message-secondary-bin {
1474
padding: 0 8px;
1475
}
1476
.message-secondary-bin > .event-time {
1478
min-height: 22px;
1479
padding-top: 2px;
1480
color: rgba(0, 0, 0, 0.6);
1481
font-size: 1em;
1482
/* HACK: the label should be baseline-aligned with a 1em label,
1483
fake this with some bottom padding */
1484
padding-bottom: 0;
1485
}
1486
.message-secondary-bin > StIcon {
1488
icon-size: 1.14286em;
1489
}
1490
.message-title {
1492
min-height: 22px;
1493
padding-top: 2px;
1494
color: rgba(0, 0, 0, 0.87);
1495
font-weight: bold;
1496
font-size: 1em;
1497
}
1498
.message-content {
1500
min-height: 40px;
1501
padding: 8px;
1502
color: rgba(0, 0, 0, 0.6);
1503
font-size: 1em;
1504
}
1505
.message-content * > StIcon {
1507
transition-duration: 100ms;
1508
icon-size: 16px;
1509
border-radius: 16px;
1510
padding: 4px;
1511
color: rgba(0, 0, 0, 0.6);
1512
}
1513
/* FIXME: how do you do this in sass? */
1515
.message-content *:hover > StIcon,
1516
.message-content *:focus > StIcon {
1517
color: rgba(0, 0, 0, 0.87);
1518
background-color: rgba(0, 0, 0, 0.08);
1519
}
1520
.message-content *:active > StIcon {
1522
transition-duration: 200ms;
1523
color: rgba(0, 0, 0, 0.87);
1524
background-color: rgba(0, 0, 0, 0.2);
1525
}
1526
.message-media-control {
1528
transition-duration: 100ms;
1529
margin: 16px 0;
1530
padding: 8px;
1531
border-radius: 100px;
1532
color: rgba(0, 0, 0, 0.6);
1533
}
1534
.message-media-control:hover, .message-media-control:focus {
1536
color: rgba(0, 0, 0, 0.87);
1537
background-color: rgba(0, 0, 0, 0.08);
1538
}
1539
.message-media-control:active {
1541
color: rgba(0, 0, 0, 0.87);
1542
background-color: rgba(0, 0, 0, 0.2);
1543
transition-duration: 200ms;
1544
}
1545
.message-media-control:insensitive {
1547
color: rgba(0, 0, 0, 0.26);
1548
}
1549
.message-media-control:last-child:ltr {
1551
margin-right: 16px;
1552
padding-right: 8px;
1553
}
1554
.message-media-control:last-child:rtl {
1556
margin-left: 16px;
1557
padding-left: 8px;
1558
}
1559
.media-message-cover-icon {
1561
icon-size: 32px !important;
1562
margin: 8px 0px 8px 4px !important;
1563
}
1564
.media-message-cover-icon:rtl {
1566
margin: 8px 4px 8px 0px !important;
1567
}
1568
.media-message-cover-icon.fallback {
1570
icon-size: 16px !important;
1571
padding: 8px;
1572
border: none;
1573
border-radius: 4px;
1574
background-color: rgba(0, 0, 0, 0.12);
1575
color: rgba(0, 0, 0, 0.38);
1576
}
1577
.system-switch-user-submenu-icon.user-icon {
1579
icon-size: 20px;
1580
padding: 0 2px;
1581
}
1582
.system-switch-user-submenu-icon.default-icon {
1584
icon-size: 16px;
1585
padding: 0 4px;
1586
}
1587
#appMenu {
1589
spinner-image: url("process-working.svg");
1590
spacing: 4px;
1591
}
1592
#appMenu .label-shadow {
1594
color: transparent;
1595
}
1596
.aggregate-menu {
1598
min-width: 280px;
1599
}
1600
.aggregate-menu .popup-menu-icon {
1602
padding: 0 4px;
1603
}
1604
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr {
1606
/* 8px spacing + 2*4px padding */
1607
padding-left: 16px;
1608
margin-left: 1.14286em;
1609
}
1610
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl {
1612
/* 8px spacing + 2*4px padding */
1613
padding-right: 16px;
1614
margin-right: 1.14286em;
1615
}
1616
.system-menu-action {
1618
-st-icon-style: symbolic;
1619
color: rgba(0, 0, 0, 0.6);
1620
border-radius: 100px;
1621
/* wish we could do 50% */
1622
padding: 12px;
1623
border: none;
1624
transition-duration: 100ms;
1625
}
1626
.system-menu-action:hover, .system-menu-action:focus {
1628
background-color: rgba(0, 0, 0, 0.08);
1629
color: rgba(0, 0, 0, 0.87);
1630
border: none;
1631
padding: 12px;
1632
}
1633
.system-menu-action:active {
1635
background-color: rgba(0, 0, 0, 0.2);
1636
color: rgba(0, 0, 0, 0.87);
1637
transition-duration: 200ms;
1638
}
1639
.system-menu-action > StIcon {
1641
icon-size: 16px;
1642
}
1643
.ripple-box {
1645
width: 48px;
1646
height: 48px;
1647
border-radius: 0 0 48px 0;
1648
background-color: rgba(255, 255, 255, 0.3);
1649
background-image: none;
1650
background-size: auto;
1651
}
1652
.ripple-box:rtl {
1654
border-radius: 0 0 0 48px;
1655
background-image: none;
1656
}
1657
.popup-menu-arrow {
1659
width: 16px;
1660
height: 16px;
1661
}
1662
.popup-menu-icon {
1664
icon-size: 1.14286em;
1665
}
1666
.window-close {
1668
height: 32px;
1669
width: 32px;
1670
-shell-close-overlap: 16px;
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
background-image: url("assets/window-close.svg");
1673
background-size: 32px;
1674
}
1675
.window-close:hover {
1677
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1678
background-image: url("assets/window-close.svg");
1679
}
1680
.window-close:active {
1682
background-image: url("assets/window-close-active.svg");
1683
}
1684
.window-close:rtl {
1686
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1687
}
1688
.window-close:rtl:hover {
1690
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1691
}
1692
/* NETWORK DIALOGS */
1694
.nm-dialog {
1695
max-height: 34em;
1696
min-height: 31em;
1697
min-width: 32em;
1698
}
1699
.nm-dialog-content {
1701
spacing: 20px;
1702
padding: 24px;
1703
}
1704
.nm-dialog-header-hbox {
1706
spacing: 10px;
1707
}
1708
.nm-dialog-airplane-box {
1710
spacing: 12px;
1711
}
1712
.nm-dialog-airplane-headline {
1714
font-weight: bold;
1715
text-align: center;
1716
}
1717
.nm-dialog-airplane-text {
1719
color: rgba(0, 0, 0, 0.87);
1720
}
1721
.nm-dialog-header-icon {
1723
icon-size: 32px;
1724
}
1725
.nm-dialog-scroll-view {
1727
border: none;
1728
}
1729
.nm-dialog-header {
1731
font-size: 15pt;
1732
font-weight: 500;
1733
}
1734
.nm-dialog-item {
1736
transition-duration: 100ms;
1737
font-size: 1em;
1738
border-bottom: none;
1739
border-radius: 4px;
1740
padding: 12px;
1741
spacing: 20px;
1742
}
1743
.nm-dialog-item:hover, .nm-dialog-item:focus {
1745
background-color: rgba(0, 0, 0, 0.08);
1746
}
1747
.nm-dialog-item:active {
1749
transition-duration: 200ms;
1750
background-color: rgba(0, 0, 0, 0.2);
1751
}
1752
.nm-dialog-item:selected {
1754
background-color: rgba(26, 115, 232, 0.24);
1755
color: rgba(0, 0, 0, 0.87);
1756
}
1757
.nm-dialog-icons {
1759
spacing: .5em;
1760
}
1761
.nm-dialog-icon {
1763
icon-size: 16px;
1764
}
1765
.no-networks-label {
1767
color: rgba(0, 0, 0, 0.38);
1768
}
1769
.no-networks-box {
1771
spacing: 12px;
1772
}
1773
/* OVERVIEW */
1775
#overview {
1776
spacing: 24px;
1777
}
1778
.overview-controls {
1780
padding-bottom: 32px;
1781
}
1782
.window-picker {
1784
-horizontal-spacing: 16px;
1785
-vertical-spacing: 16px;
1786
padding: 0 16px 32px;
1787
}
1788
.window-picker.external-monitor {
1790
padding: 16px;
1791
}
1792
.window-clone-border {
1794
border: 4px solid rgba(255, 255, 255, 0.3);
1795
border-radius: 4px;
1796
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
1797
}
1798
.window-caption {
1800
spacing: 25px;
1801
color: white;
1802
background-color: rgba(0, 0, 0, 0.6);
1803
border-radius: 4px;
1804
padding: 4px 8px;
1805
}
1806
.search-entry {
1808
width: 304px;
1809
padding: 0 8px;
1810
border-radius: 4px 4px 0 0;
1811
color: rgba(255, 255, 255, 0.5);
1812
selection-background-color: rgba(255, 255, 255, 0.3);
1813
selected-color: white;
1814
transition-duration: 100ms;
1815
background-color: rgba(255, 255, 255, 0.04);
1816
border-color: transparent;
1817
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1818
}
1819
.search-entry:hover {
1821
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1822
}
1823
.search-entry:focus {
1825
border-color: transparent;
1826
box-shadow: inset 0 -2px white;
1827
padding: 0 8px;
1828
border-width: 0;
1829
color: white;
1830
}
1831
.search-entry .search-entry-icon {
1833
icon-size: 16px;
1834
padding: 0 0;
1835
color: rgba(255, 255, 255, 0.7);
1836
}
1837
.search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
1839
color: white;
1840
}
1841
#searchResultsBin {
1843
max-width: 1000px;
1844
}
1845
#searchResultsContent {
1847
padding-left: 20px;
1848
padding-right: 20px;
1849
spacing: 16px;
1850
}
1851
.search-section {
1853
spacing: 16px;
1854
}
1855
.search-section-content {
1857
spacing: 32px;
1858
}
1859
.list-search-results {
1861
spacing: 3px;
1862
}
1863
.search-section-separator {
1865
height: 1px;
1866
background-color: rgba(255, 255, 255, 0.12);
1867
}
1868
.list-search-result-content {
1870
spacing: 30px;
1871
}
1872
.list-search-result-title {
1874
font-size: 11.25pt;
1875
font-weight: 400;
1876
color: white;
1877
spacing: 12px;
1878
}
1879
.list-search-result-description {
1881
color: rgba(255, 255, 255, 0.7);
1882
}
1883
.list-search-provider-details {
1885
width: 150px;
1886
color: rgba(255, 255, 255, 0.7);
1887
margin-top: 0.24em;
1888
}
1889
.list-search-provider-content {
1891
spacing: 20px;
1892
}
1893
.search-provider-icon {
1895
padding: 15px;
1896
}
1897
/* DASHBOARD */
1899
#dash {
1900
transition-duration: 250ms;
1901
font-size: 1em;
1902
color: white;
1903
background-color: rgba(255, 255, 255, 0.1);
1904
padding: 3px 0;
1905
border: none;
1906
border-left: 0px;
1907
border-radius: 0px 4px 4px 0px;
1908
}
1909
#dash:rtl {
1911
border-radius: 4px 0 0 4px;
1912
}
1913
#dash .placeholder {
1915
background-image: url("assets/dash-placeholder.svg");
1916
background-size: contain;
1917
height: 24px;
1918
}
1919
#dash .empty-dash-drop-target {
1921
width: 24px;
1922
height: 24px;
1923
}
1924
.dash-item-container > StWidget {
1926
padding: 3px 6px;
1927
}
1928
.dash-label {
1930
border-radius: 4px;
1931
padding: 7px 8px;
1932
color: rgba(0, 0, 0, 0.87);
1933
background-color: #FFFFFF;
1934
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1935
text-align: center;
1936
-x-offset: 8px;
1937
}
1938
/* App Vault/Grid */
1940
.icon-grid {
1941
spacing: 30px;
1942
-shell-grid-horizontal-item-size: 136px;
1943
-shell-grid-vertical-item-size: 136px;
1944
}
1945
.icon-grid .overview-icon {
1947
icon-size: 96px;
1948
}
1949
.system-action-icon {
1951
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
1952
background-color: #212121;
1953
color: #FFFFFF;
1954
border-radius: 99px;
1955
icon-size: 48px;
1956
}
1957
.app-view-controls {
1959
width: 320px;
1960
padding-bottom: 32px;
1961
}
1962
.app-view-control {
1964
padding: 0 8px;
1965
font-weight: bold;
1966
color: rgba(255, 255, 255, 0.7);
1967
}
1968
.app-view-control:hover {
1970
color: white;
1971
background-color: rgba(255, 255, 255, 0.08) !important;
1972
}
1973
.app-view-control:active {
1975
color: white;
1976
background-color: rgba(255, 255, 255, 0.2) !important;
1977
}
1978
.app-view-control:checked {
1980
color: white;
1981
background-color: rgba(0, 0, 0, 0.01) !important;
1982
box-shadow: inset 0 2px 0 white;
1983
}
1984
.app-view-control:first-child {
1986
border-right-width: 0;
1987
border-radius: 4px;
1988
}
1989
.app-view-control:first-child:checked {
1991
border-radius: 0;
1992
}
1993
.app-view-control:last-child {
1995
border-radius: 4px;
1996
}
1997
.app-view-control:last-child:checked {
1999
border-radius: 0;
2000
}
2001
.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
2003
.list-search-result:focus,
2004
.list-search-result:selected,
2005
.list-search-result:hover {
2006
background-color: rgba(255, 255, 255, 0.08);
2007
transition-duration: 0ms;
2008
}
2009
.search-provider-icon:active, .search-provider-icon:checked,
2011
.list-search-result:active,
2012
.list-search-result:checked {
2013
background-color: rgba(255, 255, 255, 0.2);
2014
transition-duration: 200ms;
2015
}
2016
.app-well-app:hover .overview-icon,
2018
.app-well-app:focus .overview-icon,
2019
.app-well-app:selected .overview-icon,
2020
.app-well-app.app-folder:hover .overview-icon,
2021
.app-well-app.app-folder:focus .overview-icon,
2022
.app-well-app.app-folder:selected .overview-icon,
2023
.show-apps:hover .overview-icon,
2024
.show-apps:focus .overview-icon,
2025
.show-apps:selected .overview-icon,
2026
.grid-search-result:hover .overview-icon,
2027
.grid-search-result:focus .overview-icon,
2028
.grid-search-result:selected .overview-icon {
2029
background-color: rgba(255, 255, 255, 0.08);
2030
transition-duration: 0ms;
2031
border-image: none;
2032
background-image: none;
2033
}
2034
.app-well-app:active .overview-icon,
2036
.app-well-app:checked .overview-icon,
2037
.app-well-app.app-folder:active .overview-icon,
2038
.app-well-app.app-folder:checked .overview-icon,
2039
.show-apps:active .overview-icon,
2040
.show-apps:checked .overview-icon,
2041
.grid-search-result:active .overview-icon,
2042
.grid-search-result:checked .overview-icon {
2043
background-color: rgba(255, 255, 255, 0.2);
2044
box-shadow: 0 0 transparent;
2045
transition-duration: 200ms;
2046
}
2047
.app-well-app-running-dot {
2049
width: 32px;
2050
height: 2px;
2051
background-color: white;
2052
margin-bottom: 0;
2053
}
2054
.search-provider-icon,
2056
.list-search-result, .app-well-app .overview-icon,
2057
.app-well-app.app-folder .overview-icon,
2058
.show-apps .overview-icon,
2059
.grid-search-result .overview-icon {
2060
color: white;
2061
border-radius: 4px;
2062
padding: 6px;
2063
border: none;
2064
transition-duration: 100ms;
2065
text-align: center;
2066
}
2067
.app-well-app.app-folder > .overview-icon {
2069
background-color: rgba(255, 255, 255, 0.1);
2070
}
2071
.show-apps .show-apps-icon {
2073
color: rgba(255, 255, 255, 0.7);
2074
}
2075
.show-apps:hover .show-apps-icon,
2077
.show-apps:active .show-apps-icon,
2078
.show-apps:checked .show-apps-icon,
2079
.show-apps:focus .show-apps-icon {
2080
color: white;
2081
transition-duration: 100ms;
2082
}
2083
.app-folder-popup {
2085
-arrow-border-radius: 4px;
2086
-arrow-background-color: rgba(255, 255, 255, 0.1);
2087
-arrow-base: 24px;
2088
-arrow-rise: 12px;
2089
}
2090
.app-folder-popup-bin {
2092
padding: 5px;
2093
}
2094
.app-folder-icon {
2096
padding: 5px;
2097
spacing-rows: 5px;
2098
spacing-columns: 5px;
2099
}
2100
.page-indicator {
2102
padding: 15px 20px;
2103
}
2104
.page-indicator .page-indicator-icon {
2106
width: 12px;
2107
height: 12px;
2108
border-radius: 12px;
2109
background-image: none;
2110
background-color: rgba(255, 255, 255, 0.3);
2111
transition-duration: 100ms;
2112
}
2113
.page-indicator:hover .page-indicator-icon {
2115
background-image: none;
2116
background-color: rgba(255, 255, 255, 0.5);
2117
}
2118
.page-indicator:active .page-indicator-icon {
2120
background-image: none;
2121
background-color: rgba(255, 255, 255, 0.7);
2122
}
2123
.page-indicator:checked .page-indicator-icon {
2125
background-image: none;
2126
background-color: white;
2127
transition-duration: 0ms;
2128
}
2129
.page-indicator:checked:active {
2131
background-image: none;
2132
}
2133
.app-well-app > .overview-icon.overview-icon-with-label,
2135
.grid-search-result .overview-icon.overview-icon-with-label {
2136
padding: 10px 8px 5px 8px;
2137
spacing: 4px;
2138
}
2139
.workspace-thumbnails {
2141
visible-width: 32px;
2142
spacing: 12px;
2143
padding: 12px;
2144
border-radius: 4px 0 0 4px;
2145
}
2146
.workspace-thumbnails:rtl {
2148
border-radius: 0 4px 4px 0;
2149
}
2150
.workspace-thumbnails .placeholder {
2152
background-image: url("assets/dash-placeholder.svg");
2153
background-size: contain;
2154
height: 24px;
2155
}
2156
.workspace-thumbnail-indicator {
2158
border: 0 solid white;
2159
border-left-width: 2px;
2160
padding: 6px 10px;
2161
border-radius: 0;
2162
}
2163
.search-display > StBoxLayout,
2165
.all-apps,
2166
.frequent-apps > StBoxLayout {
2167
padding: 0px 88px 10px 88px;
2168
}
2169
.workspace-thumbnails {
2171
transition-duration: 250ms;
2172
color: white;
2173
background-color: rgba(255, 255, 255, 0.1);
2174
border: none;
2175
}
2176
.search-statustext, .no-frequent-applications-label {
2178
font-size: 48px;
2179
font-weight: 400;
2180
color: rgba(255, 255, 255, 0.5);
2181
}
2182
/* NOTIFICATIONS & MESSAGE TRAY */
2184
.url-highlighter {
2185
link-color: #1A73E8;
2186
}
2187
.notification-banner {
2189
font-size: 1em;
2190
width: 34em;
2191
min-height: 56px;
2192
margin: 5px;
2193
border-radius: 4px;
2194
color: rgba(0, 0, 0, 0.87);
2195
background-color: #FFFFFF;
2196
border: none;
2197
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2198
}
2199
.notification-banner:hover {
2201
background-color: #FFFFFF;
2202
}
2203
.notification-banner:focus {
2205
background-color: #FFFFFF;
2206
}
2207
.notification-banner .notification-icon {
2209
padding: 5px;
2210
}
2211
.notification-banner .notification-content {
2213
padding: 5px;
2214
spacing: 5px;
2215
}
2216
.notification-banner .secondary-icon {
2218
icon-size: 1.14286em;
2219
}
2220
.notification-banner .notification-actions {
2222
background-color: transparent;
2223
padding-top: 0;
2224
padding: 4px;
2225
spacing: 4px;
2226
}
2227
.notification-banner .notification-button {
2229
transition-duration: 100ms;
2230
min-height: 32px;
2231
padding: 0 8px;
2232
border-radius: 4px;
2233
background-color: transparent;
2234
color: #1A73E8;
2235
font-weight: 500;
2236
}
2237
.notification-banner .notification-button:first-child {
2239
border-radius: 4px;
2240
}
2241
.notification-banner .notification-button:last-child {
2243
border-radius: 4px;
2244
}
2245
.notification-banner .notification-button:focus {
2247
background-color: rgba(26, 115, 232, 0.12);
2248
}
2249
.notification-banner .notification-button:hover {
2251
background-color: rgba(26, 115, 232, 0.08);
2252
}
2253
.notification-banner .notification-button:active {
2255
transition-duration: 200ms;
2256
background-color: rgba(26, 115, 232, 0.2);
2257
}
2258
.summary-source-counter {
2260
font-size: 1em;
2261
font-weight: bold;
2262
height: 1.6em;
2263
width: 1.6em;
2264
-shell-counter-overlap-x: 3px;
2265
-shell-counter-overlap-y: 3px;
2266
background-color: #1A73E8;
2267
color: white;
2268
border: 2px solid white;
2269
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
2270
border-radius: 0.9em;
2271
}
2272
.secondary-icon {
2274
icon-size: 1.14286em;
2275
}
2276
.chat-body {
2278
spacing: 5px;
2279
}
2280
.chat-response {
2282
margin: 5px;
2283
}
2284
.chat-log-message {
2286
color: rgba(0, 0, 0, 0.87);
2287
}
2288
.chat-new-group {
2290
padding-top: 1em;
2291
}
2292
.chat-received {
2294
padding-left: 4px;
2295
}
2296
.chat-received:rtl {
2298
padding-left: 0px;
2299
padding-right: 4px;
2300
}
2301
.chat-sent {
2303
padding-left: 18pt;
2304
color: rgba(0, 0, 0, 0.6);
2305
}
2306
.chat-sent:rtl {
2308
padding-left: 0;
2309
padding-right: 18pt;
2310
}
2311
.chat-meta-message {
2313
padding-left: 4px;
2314
font-size: 9pt;
2315
font-weight: 400;
2316
color: rgba(0, 0, 0, 0.6);
2317
}
2318
.chat-meta-message:rtl {
2320
padding-left: 0;
2321
padding-right: 4px;
2322
}
2323
.hotplug-transient-box {
2325
spacing: 6px;
2326
padding: 2px 72px 2px 12px;
2327
}
2328
.hotplug-notification-item {
2330
padding: 2px 10px;
2331
}
2332
.hotplug-notification-item:focus {
2334
padding: 1px 71px 1px 11px;
2335
}
2336
.hotplug-notification-item-icon {
2338
icon-size: 24px;
2339
padding: 2px 5px;
2340
}
2341
.hotplug-resident-box {
2343
spacing: 8px;
2344
}
2345
.hotplug-resident-mount {
2347
transition-duration: 100ms;
2348
spacing: 8px;
2349
border-radius: 4px;
2350
}
2351
.hotplug-resident-mount:hover {
2353
background-color: rgba(0, 0, 0, 0.08);
2354
}
2355
.hotplug-resident-mount:active {
2357
transition-duration: 200ms;
2358
background-color: rgba(0, 0, 0, 0.2);
2359
}
2360
.hotplug-resident-mount-label {
2362
color: inherit;
2363
padding-left: 6px;
2364
}
2365
.hotplug-resident-mount-icon {
2367
icon-size: 24px;
2368
padding-left: 6px;
2369
}
2370
.hotplug-resident-eject-icon {
2372
icon-size: 16px;
2373
}
2374
.hotplug-resident-eject-button {
2376
padding: 7px;
2377
border-radius: 4px;
2378
color: rgba(0, 0, 0, 0.87);
2379
}
2380
/* Eeeky things */
2382
.magnifier-zoom-region {
2383
border: 2px solid #1A73E8;
2384
}
2385
.magnifier-zoom-region.full-screen {
2387
border-width: 0;
2388
}
2389
/* On-screen Keyboard */
2391
.word-suggestions {
2392
font-size: 11.25pt;
2393
font-weight: 400;
2394
spacing: 12px;
2395
min-height: 20pt;
2396
}
2397
#keyboard {
2399
background-color: rgba(0, 0, 0, 0.3);
2400
}
2401
.key-container {
2403
padding: 4px;
2404
spacing: 4px;
2405
}
2406
.keyboard-key {
2408
min-height: 1.2em;
2409
min-width: 1.2em;
2410
font-size: 2em;
2411
font-weight: 500;
2412
border-radius: 4px;
2413
border: none;
2414
color: rgba(0, 0, 0, 0.87);
2415
background-color: #FFFFFF;
2416
border-color: transparent;
2417
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2418
text-shadow: none;
2419
icon-shadow: none;
2420
transition-duration: 100ms;
2421
}
2422
.keyboard-key:focus {
2424
color: rgba(0, 0, 0, 0.87);
2425
text-shadow: none;
2426
icon-shadow: none;
2427
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2428
}
2429
.keyboard-key:hover, .keyboard-key:checked {
2431
color: rgba(0, 0, 0, 0.87);
2432
background-color: #FFFFFF;
2433
border-color: transparent;
2434
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2435
text-shadow: none;
2436
icon-shadow: none;
2437
}
2438
.keyboard-key:active {
2440
color: rgba(0, 0, 0, 0.87);
2441
background-color: rgba(205, 205, 205, 0.9688);
2442
border-color: transparent;
2443
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2444
text-shadow: none;
2445
icon-shadow: none;
2446
transition-duration: 200ms;
2447
}
2448
.keyboard-key:grayed {
2450
background-color: rgba(0, 0, 0, 0.3);
2451
color: white;
2452
border-color: rgba(0, 0, 0, 0.3);
2453
}
2454
.keyboard-key.default-key {
2456
border-color: transparent;
2457
background-color: #FFFFFF;
2458
background-size: 24px;
2459
}
2460
.keyboard-key.default-key:active {
2462
background-color: rgba(214, 214, 214, 0.974);
2463
}
2464
.keyboard-key.enter-key {
2466
border-color: transparent;
2467
background-color: #1A73E8;
2468
background-image: url("assets/key-enter.svg");
2469
}
2470
.keyboard-key.enter-key:active {
2472
background-color: #488fed;
2473
}
2474
.keyboard-key.shift-key-lowercase {
2476
background-image: url("assets/key-shift.svg");
2477
}
2478
.keyboard-key.shift-key-uppercase {
2480
background-image: url("assets/key-shift-uppercase.svg");
2481
}
2482
.keyboard-key.shift-key-uppercase:latched {
2484
background-image: url("assets/key-shift-latched-uppercase.svg");
2485
}
2486
.keyboard-key.hide-key {
2488
background-image: url("assets/key-hide.svg");
2489
}
2490
.keyboard-key.layout-key {
2492
background-image: url("assets/key-layout.svg");
2493
}
2494
.keyboard-subkeys {
2496
color: inherit;
2497
padding: 5px;
2498
-arrow-border-radius: 0;
2499
-arrow-background-color: transparent;
2500
-arrow-border-width: 0;
2501
-arrow-border-color: transparent;
2502
-arrow-base: 0;
2503
-arrow-rise: 0;
2504
-boxpointer-gap: 5px;
2505
background-color: #FFFFFF;
2506
border-radius: 4px;
2507
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2508
}
2509
.candidate-popup-content {
2511
padding: 8px;
2512
spacing: 0;
2513
}
2514
.candidate-index {
2516
padding: 0 4px 0 0;
2517
color: rgba(0, 0, 0, 0.6);
2518
}
2519
.candidate-box {
2521
transition-duration: 100ms;
2522
min-height: 28px;
2523
padding: 0 8px;
2524
border-radius: 4px;
2525
}
2526
.candidate-box:hover {
2528
background-color: rgba(0, 0, 0, 0.08);
2529
color: rgba(0, 0, 0, 0.87);
2530
transition-duration: 0ms;
2531
}
2532
.candidate-box:active {
2534
background-color: rgba(0, 0, 0, 0.2);
2535
color: rgba(0, 0, 0, 0.87);
2536
transition-duration: 200ms;
2537
}
2538
.candidate-box:selected {
2540
background-color: rgba(26, 115, 232, 0.24);
2541
color: rgba(0, 0, 0, 0.87);
2542
transition-duration: 0ms;
2543
}
2544
.candidate-page-button-box {
2546
height: 28px;
2547
}
2548
.vertical .candidate-page-button-box {
2550
padding-top: 0;
2551
}
2552
.horizontal .candidate-page-button-box {
2554
padding-left: 0;
2555
}
2556
.candidate-page-button {
2558
min-width: 28px;
2559
min-height: 28px;
2560
padding: 0;
2561
}
2562
.candidate-page-button-previous {
2564
border-radius: 4px;
2565
border-right-width: 0;
2566
}
2567
.candidate-page-button-next {
2569
border-radius: 4px;
2570
}
2571
.candidate-page-button-icon {
2573
icon-size: 1.14286em;
2574
}
2575
/* Auth Dialogs & Screen Shield */
2577
.framed-user-icon {
2578
background-size: contain;
2579
border: none;
2580
color: white;
2581
border-radius: 4px;
2582
}
2583
.framed-user-icon:hover {
2585
border-color: white;
2586
color: white;
2587
}
2588
.login-dialog-banner-view {
2590
padding-top: 24px;
2591
max-width: 23em;
2592
}
2593
.login-dialog {
2595
border: none;
2596
background-color: transparent;
2597
}
2598
.login-dialog StEntry {
2600
color: white;
2601
selection-background-color: rgba(255, 255, 255, 0.3);
2602
selected-color: white;
2603
transition-duration: 100ms;
2604
background-color: rgba(255, 255, 255, 0.04);
2605
border-color: transparent;
2606
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2607
}
2608
.login-dialog StEntry:focus {
2610
border-color: transparent;
2611
box-shadow: inset 0 -2px white;
2612
}
2613
.login-dialog StEntry:insensitive {
2615
color: rgba(0, 0, 0, 0.38);
2616
border-color: transparent;
2617
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
2618
color: rgba(255, 255, 255, 0.5);
2619
}
2620
.login-dialog .modal-dialog-button-box {
2622
spacing: 3px;
2623
}
2624
.login-dialog .modal-dialog-button {
2626
min-width: 48px;
2627
padding: 0 8px;
2628
color: rgba(255, 255, 255, 0.7);
2629
background-color: transparent;
2630
border-color: transparent;
2631
box-shadow: 0 0 transparent;
2632
text-shadow: none;
2633
icon-shadow: none;
2634
transition-duration: 100ms;
2635
}
2636
.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus {
2638
color: white;
2639
background-color: rgba(255, 255, 255, 0.08);
2640
border-color: transparent;
2641
box-shadow: 0 0 transparent;
2642
text-shadow: none;
2643
icon-shadow: none;
2644
}
2645
.login-dialog .modal-dialog-button:active {
2647
color: white;
2648
background-color: rgba(255, 255, 255, 0.2);
2649
border-color: transparent;
2650
box-shadow: 0 0 transparent;
2651
text-shadow: none;
2652
icon-shadow: none;
2653
transition-duration: 200ms;
2654
}
2655
.login-dialog .modal-dialog-button:insensitive {
2657
color: rgba(255, 255, 255, 0.3);
2658
background-color: transparent;
2659
border-color: transparent;
2660
box-shadow: 0 0 transparent;
2661
text-shadow: none;
2662
icon-shadow: none;
2663
}
2664
.login-dialog .modal-dialog-button:default {
2666
min-width: 32px;
2667
padding: 0 16px;
2668
color: white;
2669
background-color: #1A73E8;
2670
border-color: transparent;
2671
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2672
text-shadow: none;
2673
icon-shadow: none;
2674
transition-duration: 100ms;
2675
}
2676
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
2678
color: white;
2679
background-color: #1A73E8;
2680
border-color: transparent;
2681
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2682
text-shadow: none;
2683
icon-shadow: none;
2684
}
2685
.login-dialog .modal-dialog-button:default:active {
2687
color: white;
2688
background-color: #5195ee;
2689
border-color: transparent;
2690
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2691
text-shadow: none;
2692
icon-shadow: none;
2693
transition-duration: 200ms;
2694
}
2695
.login-dialog .modal-dialog-button:default:insensitive {
2697
color: rgba(255, 255, 255, 0.5);
2698
background-color: rgba(255, 255, 255, 0.04);
2699
border-color: transparent;
2700
box-shadow: 0 0 transparent;
2701
text-shadow: none;
2702
icon-shadow: none;
2703
}
2704
.login-dialog-logo-bin {
2706
padding: 24px 0px;
2707
}
2708
.login-dialog-banner {
2710
color: rgba(255, 255, 255, 0.7);
2711
}
2712
.login-dialog-button-box {
2714
spacing: 5px;
2715
}
2716
.login-dialog-message-warning {
2718
color: #F4B400;
2719
}
2720
.login-dialog-message-hint {
2722
padding-top: 0;
2723
padding-bottom: 20px;
2724
}
2725
.login-dialog-user-selection-box {
2727
padding: 100px 0px;
2728
}
2729
.login-dialog-not-listed-label {
2731
padding-left: 2px;
2732
}
2733
.login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
2735
.login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
2736
color: white;
2737
}
2738
.login-dialog-not-listed-label {
2740
transition-duration: 100ms;
2741
font-size: 1em;
2742
font-weight: bold;
2743
color: rgba(255, 255, 255, 0.7);
2744
padding-top: 1em;
2745
border-radius: 4px;
2746
}
2747
.login-dialog-not-listed-label:hover {
2749
background-color: rgba(255, 255, 255, 0.08);
2750
color: white;
2751
}
2752
.login-dialog-not-listed-label:focus {
2754
background-color: rgba(255, 255, 255, 0.12);
2755
}
2756
.login-dialog-not-listed-label:active {
2758
transition-duration: 200ms;
2759
background-color: rgba(255, 255, 255, 0.2);
2760
color: white;
2761
}
2762
.login-dialog-user-list-view {
2764
-st-vfade-offset: 1em;
2765
}
2766
.login-dialog-user-list {
2768
spacing: 12px;
2769
width: 23em;
2770
}
2771
.login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
2773
background-color: rgba(255, 255, 255, 0.12);
2774
color: white;
2775
}
2776
.login-dialog-user-list:expanded .login-dialog-user-list-item:hover {
2778
background-color: rgba(255, 255, 255, 0.08);
2779
color: white;
2780
}
2781
.login-dialog-user-list:expanded .login-dialog-user-list-item:active {
2783
background-color: rgba(255, 255, 255, 0.2);
2784
color: white;
2785
}
2786
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
2788
border-right: 2px solid white;
2789
}
2790
.login-dialog-user-list-item {
2792
transition-duration: 100ms;
2793
border-radius: 4px;
2794
padding: 6px;
2795
color: rgba(255, 255, 255, 0.7);
2796
}
2797
.login-dialog-user-list-item:ltr .user-widget {
2799
padding-right: 1em;
2800
}
2801
.login-dialog-user-list-item:rtl .user-widget {
2803
padding-left: 1em;
2804
}
2805
.login-dialog-user-list-item:hover {
2807
background-color: rgba(255, 255, 255, 0.08);
2808
color: white;
2809
}
2810
.login-dialog-user-list-item:active {
2812
transition-duration: 200ms;
2813
background-color: rgba(255, 255, 255, 0.2);
2814
color: white;
2815
}
2816
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
2818
height: 2px;
2819
margin-top: 6px;
2820
background-color: white;
2821
}
2822
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
2824
background-color: white;
2825
}
2826
.login-dialog-username,
2828
.user-widget-label {
2829
color: white;
2830
font-size: 15pt;
2831
font-weight: 500;
2832
text-align: left;
2833
padding-left: 15px;
2834
}
2835
.user-widget-label:ltr {
2837
padding-left: 14px;
2838
}
2839
.user-widget-label:rtl {
2841
padding-right: 14px;
2842
}
2843
.login-dialog-prompt-layout {
2845
padding-top: 24px;
2846
padding-bottom: 12px;
2847
spacing: 8px;
2848
width: 23em;
2849
}
2850
.login-dialog-prompt-label {
2852
color: rgba(255, 255, 255, 0.7);
2853
font-size: 1em;
2854
padding-top: 1em;
2855
}
2856
.login-dialog-session-list-button StIcon {
2858
icon-size: 1.25em;
2859
}
2860
.login-dialog-session-list-button {
2862
color: rgba(255, 255, 255, 0.7);
2863
}
2864
.login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
2866
color: white;
2867
}
2868
.login-dialog-session-list-button:active {
2870
color: white;
2871
}
2872
.screen-shield-arrows {
2874
padding-bottom: 3em;
2875
}
2876
.screen-shield-arrows Gjs_Arrow {
2878
color: white;
2879
width: 80px;
2880
height: 48px;
2881
-arrow-thickness: 12px;
2882
-arrow-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2883
}
2884
.screen-shield-clock {
2886
color: white;
2887
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2888
font-weight: normal;
2889
text-align: center;
2890
padding-bottom: 1.5em;
2891
}
2892
.screen-shield-clock-time {
2894
font-size: 96px;
2895
font-weight: 300;
2896
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2897
font-feature-settings: "tnum";
2898
}
2899
.screen-shield-clock-date {
2901
font-size: 34px;
2902
font-weight: 400;
2903
}
2904
.screen-shield-notifications-container {
2906
spacing: 6px;
2907
width: 30em;
2908
background-color: transparent;
2909
max-height: 500px;
2910
}
2911
.screen-shield-notifications-container .summary-notification-stack-scrollview {
2913
padding-top: 0;
2914
padding-bottom: 0;
2915
}
2916
.screen-shield-notifications-container .notification,
2918
.screen-shield-notifications-container .screen-shield-notification-source {
2919
padding: 8px;
2920
border: none;
2921
background-color: rgba(0, 0, 0, 0.3);
2922
color: white;
2923
border-radius: 4px;
2924
}
2925
.screen-shield-notifications-container .notification {
2927
margin-right: 16px;
2928
}
2929
.screen-shield-notification-label {
2931
min-height: 22px;
2932
padding: 2px 0px 0px 16px;
2933
font-weight: bold;
2934
}
2935
.screen-shield-notification-count-text {
2937
min-height: 22px;
2938
padding: 2px 0px 0px 16px;
2939
color: rgba(255, 255, 255, 0.7);
2940
}
2941
#panel.lock-screen {
2943
background-color: rgba(0, 0, 0, 0.3);
2944
}
2945
.screen-shield-background {
2947
background: black;
2948
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
2949
}
2950
#lockDialogGroup {
2952
background: #212121;
2953
background-size: cover;
2954
color: rgba(255, 255, 255, 0.7);
2955
}
2956
#LookingGlassDialog {
2958
background-color: #FFFFFF;
2959
spacing: 4px;
2960
padding: 0;
2961
border: none;
2962
border-radius: 4px;
2963
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2964
}
2965
#LookingGlassDialog > #Toolbar {
2967
padding: 0 8px;
2968
border: none;
2969
border-radius: 0;
2970
background-color: rgba(255, 255, 255, 0.01);
2971
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
2972
}
2973
#LookingGlassDialog .labels {
2975
spacing: 0;
2976
}
2977
#LookingGlassDialog .notebook-tab {
2979
-natural-hpadding: 12px;
2980
-minimum-hpadding: 6px;
2981
font-weight: bold;
2982
color: rgba(0, 0, 0, 0.6);
2983
transition-duration: 100ms;
2984
padding-left: 16px;
2985
padding-right: 16px;
2986
min-height: 32px;
2987
padding: 0 32px;
2988
}
2989
#LookingGlassDialog .notebook-tab:hover {
2991
background-color: rgba(0, 0, 0, 0.08);
2992
color: rgba(0, 0, 0, 0.87);
2993
text-shadow: none;
2994
}
2995
#LookingGlassDialog .notebook-tab:active {
2997
background-color: rgba(0, 0, 0, 0.2);
2998
color: rgba(0, 0, 0, 0.87);
2999
transition-duration: 200ms;
3000
}
3001
#LookingGlassDialog .notebook-tab:selected {
3003
border-bottom-width: 0;
3004
border-color: transparent;
3005
background-color: rgba(255, 255, 255, 0.01);
3006
box-shadow: inset 0 -2px 0px #1A73E8;
3007
color: rgba(0, 0, 0, 0.87);
3008
text-shadow: none;
3009
}
3010
#LookingGlassDialog StBoxLayout#EvalBox {
3012
padding: 4px;
3013
spacing: 4px;
3014
}
3015
#LookingGlassDialog StBoxLayout#ResultsArea {
3017
spacing: 4px;
3018
}
3019
.lg-dialog StEntry {
3021
selection-background-color: rgba(26, 115, 232, 0.24);
3022
selected-color: rgba(0, 0, 0, 0.87);
3023
}
3024
.lg-dialog .shell-link {
3026
color: #1A73E8;
3027
}
3028
.lg-dialog .shell-link:hover {
3030
color: #1A73E8;
3031
}
3032
.lg-completions-text {
3034
font-size: 1em;
3035
font-style: italic;
3036
}
3037
.lg-obj-inspector-title {
3039
spacing: 4px;
3040
}
3041
.lg-obj-inspector-button {
3043
min-height: 32px;
3044
min-width: 48px;
3045
padding: 0 8px;
3046
border: none;
3047
border-radius: 4px;
3048
font-size: 10.5pt;
3049
font-weight: 500;
3050
color: #1A73E8;
3051
background-color: transparent;
3052
border-color: transparent;
3053
box-shadow: 0 0 transparent;
3054
text-shadow: none;
3055
icon-shadow: none;
3056
transition-duration: 100ms;
3057
}
3058
.lg-obj-inspector-button:hover {
3060
color: #1A73E8;
3061
background-color: rgba(26, 115, 232, 0.08);
3062
border-color: transparent;
3063
box-shadow: 0 0 transparent;
3064
text-shadow: none;
3065
icon-shadow: none;
3066
}
3067
.lg-obj-inspector-button:active {
3069
color: #1A73E8;
3070
background-color: rgba(26, 115, 232, 0.2);
3071
border-color: transparent;
3072
box-shadow: 0 0 transparent;
3073
text-shadow: none;
3074
icon-shadow: none;
3075
transition-duration: 200ms;
3076
}
3077
.lg-obj-inspector-button:insensitive {
3079
color: rgba(0, 0, 0, 0.26);
3080
background-color: transparent;
3081
border-color: transparent;
3082
box-shadow: 0 0 transparent;
3083
text-shadow: none;
3084
icon-shadow: none;
3085
}
3086
.lg-obj-inspector-button:focus {
3088
color: #1A73E8;
3089
background-color: rgba(26, 115, 232, 0.12);
3090
text-shadow: none;
3091
icon-shadow: none;
3092
box-shadow: 0 0 transparent;
3093
}
3094
.lg-obj-inspector-button:hover {
3096
border: none;
3097
}
3098
#lookingGlassExtensions {
3100
padding: 4px;
3101
}
3102
.lg-extensions-list {
3104
padding: 4px;
3105
spacing: 6px;
3106
}
3107
.lg-extension {
3109
border: none;
3110
border-radius: 4px;
3111
padding: 4px;
3112
}
3113
.lg-extension-name {
3115
font-size: 18pt;
3116
font-weight: 400;
3117
}
3118
.lg-extension-meta {
3120
spacing: 6px;
3121
}
3122
#LookingGlassPropertyInspector {
3124
background: #FFFFFF;
3125
border: none;
3126
border-radius: 4px;
3127
padding: 6px;
3128
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
3129
}
3130
/* Dash to Dock */
3132
#dashtodockContainer #dash {
3133
background-color: rgba(0, 0, 0, 0.6);
3134
}
3135
#dashtodockContainer:overview #dash {
3137
background-color: rgba(255, 255, 255, 0.1);
3138
}
3139
#dashtodockContainer.extended:overview #dash {
3141
background-color: transparent;
3142
}
3143
#dashtodockContainer.left #dash,
3145
#dashtodockContainer.right #dash {
3146
padding: 3px 0;
3147
}
3148
#dashtodockContainer.top #dash,
3150
#dashtodockContainer.bottom #dash {
3151
padding: 0 3px;
3152
}
3153
#dashtodockContainer.extended #dash {
3155
padding: 0;
3156
border-radius: 0;
3157
}
3158
#dashtodockContainer.left .dash-item-container > StWidget,
3160
#dashtodockContainer.right .dash-item-container > StWidget,
3161
#dashtodockContainer.extended.left .dash-item-container > StWidget,
3162
#dashtodockContainer.extended.right .dash-item-container > StWidget {
3163
padding: 3px 6px;
3164
}
3165
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
3167
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
3168
padding: 6px 6px 3px 6px;
3169
}
3170
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
3172
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
3173
padding: 3px 6px 6px 6px;
3174
}
3175
#dashtodockContainer.top .dash-item-container > StWidget,
3177
#dashtodockContainer.bottom .dash-item-container > StWidget,
3178
#dashtodockContainer.extended.top .dash-item-container > StWidget,
3179
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
3180
padding: 6px 3px;
3181
}
3182
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
3184
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
3185
padding: 6px 3px 6px 6px;
3186
}
3187
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
3189
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
3190
padding: 6px 6px 6px 3px;
3191
}
3192
#dashtodockContainer .focused .overview-icon {
3194
background-color: rgba(0, 0, 0, 0.12);
3195
}
3196
#dashtodockContainer .default.focused .overview-icon {
3198
background-color: transparent;
3199
}
3200
#dashtodockContainer .app-well-app-running-dot {
3202
background-color: transparent;
3203
}
3204
#dashtodockContainer .default {
3206
background-size: cover;
3207
}
3208
#dashtodockContainer.left .default.running1 {
3210
background-image: url("assets/dash/left-running1.svg");
3211
}
3212
#dashtodockContainer.left .default.running1.focused {
3214
background-image: url("assets/dash/left-running1-focused.svg");
3215
}
3216
#dashtodockContainer.left .default.running2 {
3218
background-image: url("assets/dash/left-running2.svg");
3219
}
3220
#dashtodockContainer.left .default.running2.focused {
3222
background-image: url("assets/dash/left-running2-focused.svg");
3223
}
3224
#dashtodockContainer.left .default.running3 {
3226
background-image: url("assets/dash/left-running3.svg");
3227
}
3228
#dashtodockContainer.left .default.running3.focused {
3230
background-image: url("assets/dash/left-running3-focused.svg");
3231
}
3232
#dashtodockContainer.left .default.running4 {
3234
background-image: url("assets/dash/left-running4.svg");
3235
}
3236
#dashtodockContainer.left .default.running4.focused {
3238
background-image: url("assets/dash/left-running4-focused.svg");
3239
}
3240
#dashtodockContainer.right .default.running1 {
3242
background-image: url("assets/dash/right-running1.svg");
3243
}
3244
#dashtodockContainer.right .default.running1.focused {
3246
background-image: url("assets/dash/right-running1-focused.svg");
3247
}
3248
#dashtodockContainer.right .default.running2 {
3250
background-image: url("assets/dash/right-running2.svg");
3251
}
3252
#dashtodockContainer.right .default.running2.focused {
3254
background-image: url("assets/dash/right-running2-focused.svg");
3255
}
3256
#dashtodockContainer.right .default.running3 {
3258
background-image: url("assets/dash/right-running3.svg");
3259
}
3260
#dashtodockContainer.right .default.running3.focused {
3262
background-image: url("assets/dash/right-running3-focused.svg");
3263
}
3264
#dashtodockContainer.right .default.running4 {
3266
background-image: url("assets/dash/right-running4.svg");
3267
}
3268
#dashtodockContainer.right .default.running4.focused {
3270
background-image: url("assets/dash/right-running4-focused.svg");
3271
}
3272
#dashtodockContainer.top .default.running1 {
3274
background-image: url("assets/dash/top-running1.svg");
3275
}
3276
#dashtodockContainer.top .default.running1.focused {
3278
background-image: url("assets/dash/top-running1-focused.svg");
3279
}
3280
#dashtodockContainer.top .default.running2 {
3282
background-image: url("assets/dash/top-running2.svg");
3283
}
3284
#dashtodockContainer.top .default.running2.focused {
3286
background-image: url("assets/dash/top-running2-focused.svg");
3287
}
3288
#dashtodockContainer.top .default.running3 {
3290
background-image: url("assets/dash/top-running3.svg");
3291
}
3292
#dashtodockContainer.top .default.running3.focused {
3294
background-image: url("assets/dash/top-running3-focused.svg");
3295
}
3296
#dashtodockContainer.top .default.running4 {
3298
background-image: url("assets/dash/top-running4.svg");
3299
}
3300
#dashtodockContainer.top .default.running4.focused {
3302
background-image: url("assets/dash/top-running4-focused.svg");
3303
}
3304
#dashtodockContainer.bottom .default.running1 {
3306
background-image: url("assets/dash/bottom-running1.svg");
3307
}
3308
#dashtodockContainer.bottom .default.running1.focused {
3310
background-image: url("assets/dash/bottom-running1-focused.svg");
3311
}
3312
#dashtodockContainer.bottom .default.running2 {
3314
background-image: url("assets/dash/bottom-running2.svg");
3315
}
3316
#dashtodockContainer.bottom .default.running2.focused {
3318
background-image: url("assets/dash/bottom-running2-focused.svg");
3319
}
3320
#dashtodockContainer.bottom .default.running3 {
3322
background-image: url("assets/dash/bottom-running3.svg");
3323
}
3324
#dashtodockContainer.bottom .default.running3.focused {
3326
background-image: url("assets/dash/bottom-running3-focused.svg");
3327
}
3328
#dashtodockContainer.bottom .default.running4 {
3330
background-image: url("assets/dash/bottom-running4.svg");
3331
}
3332
#dashtodockContainer.bottom .default.running4.focused {
3334
background-image: url("assets/dash/bottom-running4-focused.svg");
3335
}
3336
/* Simple Dock */
3338
#dash:desktop {
3339
background-color: rgba(0, 0, 0, 0.6);
3340
}
3341
/* GPaste */
3343
.popup-menu .search-entry {
3344
color: rgba(0, 0, 0, 0.87);
3345
selection-background-color: rgba(26, 115, 232, 0.24);
3346
selected-color: rgba(0, 0, 0, 0.87);
3347
transition-duration: 100ms;
3348
background-color: rgba(0, 0, 0, 0.04);
3349
border-color: transparent;
3350
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
3351
}
3352
.popup-menu .search-entry:hover {
3354
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87);
3355
}
3356
.popup-menu .search-entry:focus {
3358
border-color: transparent;
3359
box-shadow: inset 0 -2px #1A73E8;
3360
color: rgba(0, 0, 0, 0.87);
3361
}
3362
.popup-menu .search-entry .search-entry-icon {
3364
color: rgba(0, 0, 0, 0.6);
3365
}
3366
.popup-menu .search-entry:hover .search-entry-icon, .popup-menu .search-entry:focus .search-entry-icon {
3368
color: rgba(0, 0, 0, 0.87);
3369
}
3370