ASCII text
1
/* This stylesheet is generated, DO NOT EDIT */
2
/* Copyright 2009, 2015 Red Hat, Inc.
3
*
4
* Portions adapted from Mx's data/style/default.css
5
* Copyright 2009 Intel Corporation
6
*
7
* This program is free software; you can redistribute it and/or modify it
8
* under the terms and conditions of the GNU Lesser General Public License,
9
* version 2.1, as published by the Free Software Foundation.
10
*
11
* This program is distributed in the hope it will be useful, but WITHOUT ANY
12
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
13
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for
14
* more details.
15
*
16
* You should have received a copy of the GNU Lesser General Public License
17
* along with this program; if not, write to the Free Software Foundation,
18
* Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
19
*/
20
/* GLOBALS */
21
* {
22
transition-duration: 150ms;
23
}
24
stage {
26
font-family: "M+ 1c", Roboto, Cantarell, Sans-Serif;
27
font-size: 10.5pt;
28
font-weight: 400;
29
color: rgba(0, 0, 0, 0.87);
30
}
31
/* WIDGETS */
33
/* Buttons */
34
.button {
35
min-height: 36px;
36
padding: 0 16px;
37
border-width: 0;
38
border-radius: 2px;
39
font-size: 10.5pt;
40
font-weight: 500;
41
color: rgba(0, 0, 0, 0.54);
42
background-color: transparent;
43
border-color: transparent;
44
box-shadow: 0 0 transparent;
45
text-shadow: none;
46
icon-shadow: none;
47
}
48
.button:hover {
50
color: rgba(0, 0, 0, 0.87);
51
background-color: rgba(0, 0, 0, 0.12);
52
border-color: transparent;
53
box-shadow: 0 0 transparent;
54
text-shadow: none;
55
icon-shadow: none;
56
}
57
.button:active {
59
color: rgba(0, 0, 0, 0.87);
60
background-color: rgba(0, 0, 0, 0.26);
61
border-color: transparent;
62
box-shadow: 0 0 transparent;
63
text-shadow: none;
64
icon-shadow: none;
65
}
66
.button:insensitive {
68
color: rgba(0, 0, 0, 0.26);
69
background-color: transparent;
70
border-color: transparent;
71
box-shadow: 0 0 transparent;
72
text-shadow: none;
73
icon-shadow: none;
74
}
75
.button:focus {
77
color: rgba(0, 0, 0, 0.87);
78
text-shadow: none;
79
icon-shadow: none;
80
box-shadow: 0 0 transparent;
81
}
82
.modal-dialog-linked-button {
84
min-height: 40px;
85
padding: 0 16px;
86
border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
87
border-right-width: 0;
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
}
97
.modal-dialog-linked-button:hover {
99
color: rgba(0, 0, 0, 0.87);
100
background-color: rgba(0, 0, 0, 0.12);
101
border-color: transparent;
102
box-shadow: 0 0 transparent;
103
text-shadow: none;
104
icon-shadow: none;
105
}
106
.modal-dialog-linked-button:active {
108
color: rgba(0, 0, 0, 0.87);
109
background-color: rgba(0, 0, 0, 0.26);
110
border-color: transparent;
111
box-shadow: 0 0 transparent;
112
text-shadow: none;
113
icon-shadow: none;
114
}
115
.modal-dialog-linked-button:insensitive {
117
color: rgba(0, 0, 0, 0.26);
118
background-color: transparent;
119
border-color: transparent;
120
box-shadow: 0 0 transparent;
121
text-shadow: none;
122
icon-shadow: none;
123
}
124
.modal-dialog-linked-button:focus {
126
color: rgba(0, 0, 0, 0.87);
127
text-shadow: none;
128
icon-shadow: none;
129
box-shadow: 0 0 transparent;
130
}
131
.modal-dialog-linked-button:first-child {
133
border-radius: 0px 0px 0px 2px;
134
}
135
.modal-dialog-linked-button:last-child {
137
border-right-width: 0px;
138
border-radius: 0px 0px 2px 0px;
139
}
140
.modal-dialog-linked-button:first-child:last-child {
142
border-right-width: 0px;
143
border-radius: 0px 0px 2px 2px;
144
}
145
/* Entries */
147
StEntry {
148
min-height: 36px;
149
padding: 0 8px;
150
border-radius: 0;
151
border-width: 0;
152
color: rgba(0, 0, 0, 0.87);
153
selection-background-color: #42A5F5;
154
selected-color: #FFFFFF;
155
font-size: 12pt;
156
font-weight: 400;
157
background-color: rgba(250, 250, 250, 0.01);
158
border-color: transparent;
159
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
160
}
161
StEntry:focus {
163
border-color: transparent;
164
box-shadow: inset 0 -2px #42A5F5;
165
}
166
StEntry:insensitive {
168
color: rgba(0, 0, 0, 0.38);
169
border-color: transparent;
170
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
171
}
172
StEntry StIcon.capslock-warning {
174
icon-size: 16px;
175
warning-color: #FF6D00;
176
padding: 0 0;
177
}
178
/* Scrollbars */
180
StScrollView.vfade {
181
-st-vfade-offset: 32px;
182
}
183
StScrollView.hfade {
185
-st-hfade-offset: 32px;
186
}
187
StScrollBar {
189
padding: 0;
190
}
191
StScrollView StScrollBar {
193
min-width: 16px;
194
min-height: 16px;
195
}
196
StScrollBar StBin#trough {
198
margin: 4px;
199
border-radius: 100px;
200
background-color: rgba(0, 0, 0, 0.12);
201
}
202
StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
204
border-radius: 100px;
205
background-color: rgba(0, 0, 0, 0.38);
206
margin: 4px;
207
}
208
StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover {
210
background-color: rgba(0, 0, 0, 0.54);
211
}
212
StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
214
background-color: rgba(0, 0, 0, 0.87);
215
}
216
#overview StScrollBar StBin#trough, #screenShieldNotifications StScrollBar StBin#trough {
218
background-color: rgba(255, 255, 255, 0.12);
219
}
220
#overview StScrollBar StButton#vhandle, #screenShieldNotifications StScrollBar StButton#vhandle, #overview StScrollBar StButton#hhandle, #screenShieldNotifications StScrollBar StButton#hhandle {
222
background-color: rgba(255, 255, 255, 0.5);
223
}
224
#overview StScrollBar StButton#vhandle:hover, #screenShieldNotifications StScrollBar StButton#vhandle:hover, #overview StScrollBar StButton#hhandle:hover, #screenShieldNotifications StScrollBar StButton#hhandle:hover {
226
background-color: rgba(255, 255, 255, 0.7);
227
}
228
#overview StScrollBar StButton#vhandle:active, #screenShieldNotifications StScrollBar StButton#vhandle:active, #overview StScrollBar StButton#hhandle:active, #screenShieldNotifications StScrollBar StButton#hhandle:active {
230
background-color: #FFFFFF;
231
}
232
/* Slider */
234
.slider {
235
height: 20px;
236
color: #FF4081;
237
-slider-height: 2px;
238
-slider-background-color: rgba(0, 0, 0, 0.26);
239
-slider-border-color: transparent;
240
-slider-active-background-color: #FF4081;
241
-slider-active-border-color: transparent;
242
-slider-border-width: 0;
243
-slider-handle-radius: 7px;
244
}
245
/* Check Boxes */
247
.check-box * {
248
min-height: 20px;
249
padding: 8px 0;
250
}
251
.check-box StBoxLayout {
253
spacing: 8px;
254
}
255
.check-box StBin {
257
width: 24px;
258
height: 24px;
259
padding: 6px;
260
border-radius: 100px;
261
background-image: url("assets/checkbox-off.svg");
262
}
263
.check-box:focus StBin {
265
background-image: url("assets/checkbox-off.svg");
266
}
267
.check-box:hover StBin {
269
background-color: rgba(0, 0, 0, 0.12);
270
}
271
.check-box:active StBin {
273
background-color: rgba(0, 0, 0, 0.26);
274
}
275
.check-box:checked StBin {
277
background-image: url("assets/checkbox.svg");
278
}
279
.check-box:focus:checked StBin {
281
background-image: url("assets/checkbox.svg");
282
}
283
.check-box:hover:checked StBin {
285
background-color: rgba(255, 64, 129, 0.15);
286
}
287
.check-box:active:checked StBin {
289
background-color: rgba(255, 64, 129, 0.3);
290
}
291
/* Switches */
293
.toggle-switch {
294
width: 40px;
295
height: 20px;
296
background-size: contain;
297
}
298
.toggle-switch-us {
300
background-image: url("assets/toggle-off.svg");
301
}
302
.toggle-switch-us:checked {
304
background-image: url("assets/toggle-on.svg");
305
}
306
.toggle-switch-intl {
308
background-image: url("assets/toggle-off.svg");
309
}
310
.toggle-switch-intl:checked {
312
background-image: url("assets/toggle-on.svg");
313
}
314
/* links */
316
.shell-link {
317
border-radius: 2px;
318
color: #42A5F5;
319
}
320
.shell-link:hover {
322
color: #42A5F5;
323
background-color: rgba(66, 165, 245, 0.15);
324
}
325
.shell-link:active {
327
color: #42A5F5;
328
background-color: rgba(66, 165, 245, 0.3);
329
}
330
/* Modal Dialogs */
332
.headline {
333
font-size: 15pt;
334
font-weight: 500;
335
}
336
.lightbox {
338
background-color: black;
339
}
340
.flashspot {
342
background-color: white;
343
}
344
.modal-dialog {
346
border-radius: 2px;
347
color: rgba(0, 0, 0, 0.87);
348
background-color: #FAFAFA;
349
border: none;
350
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
351
}
352
.modal-dialog .modal-dialog-content-box {
354
padding: 24px;
355
}
356
.modal-dialog .run-dialog-entry {
358
width: 20em;
359
margin-bottom: 6px;
360
}
361
.modal-dialog .run-dialog-error-box {
363
padding-top: 16px;
364
spacing: 6px;
365
}
366
.modal-dialog .run-dialog-button-box {
368
padding-top: 1em;
369
}
370
.modal-dialog .run-dialog-label {
372
font-size: 1em;
373
font-weight: normal;
374
color: rgba(0, 0, 0, 0.38);
375
padding-bottom: .4em;
376
}
377
.mount-dialog-subject,
379
.end-session-dialog-subject {
380
font-size: 15pt;
381
font-weight: 500;
382
}
383
/* Message Dialog */
385
.message-dialog-main-layout {
386
padding: 12px 20px 0;
387
spacing: 12px;
388
}
389
.message-dialog-content {
391
max-width: 28em;
392
spacing: 20px;
393
}
394
.message-dialog-icon {
396
min-width: 48px;
397
icon-size: 48px;
398
}
399
.message-dialog-title {
401
font-weight: bold;
402
}
403
.message-dialog-subtitle {
405
color: rgba(0, 0, 0, 0.54);
406
font-weight: bold;
407
}
408
/* End Session Dialog */
410
.end-session-dialog {
411
spacing: 42px;
412
border: none;
413
}
414
.end-session-dialog-list {
416
padding-top: 20px;
417
}
418
.end-session-dialog-layout {
420
padding-left: 17px;
421
}
422
.end-session-dialog-layout:rtl {
424
padding-right: 17px;
425
}
426
.end-session-dialog-description {
428
width: 28em;
429
padding-bottom: 10px;
430
}
431
.end-session-dialog-description:rtl {
433
text-align: right;
434
}
435
.end-session-dialog-warning {
437
width: 28em;
438
color: #FF6D00;
439
padding-top: 6px;
440
}
441
.end-session-dialog-warning:rtl {
443
text-align: right;
444
}
445
.end-session-dialog-logout-icon {
447
border-radius: 5px;
448
width: 48px;
449
height: 48px;
450
background-size: contain;
451
}
452
.end-session-dialog-shutdown-icon {
454
color: rgba(0, 0, 0, 0.38);
455
width: 48px;
456
height: 48px;
457
}
458
.end-session-dialog-inhibitor-layout {
460
spacing: 16px;
461
max-height: 200px;
462
padding-right: 65px;
463
padding-left: 65px;
464
}
465
.end-session-dialog-session-list,
467
.end-session-dialog-app-list {
468
spacing: 1em;
469
}
470
.end-session-dialog-list-header {
472
font-weight: bold;
473
}
474
.end-session-dialog-list-header:rtl {
476
text-align: right;
477
}
478
.end-session-dialog-app-list-item,
480
.end-session-dialog-session-list-item {
481
spacing: 1em;
482
}
483
.end-session-dialog-app-list-item-name,
485
.end-session-dialog-session-list-item-name {
486
font-weight: bold;
487
}
488
.end-session-dialog-app-list-item-description {
490
color: rgba(0, 0, 0, 0.38);
491
font-size: 1em;
492
}
493
/* ShellMountOperation Dialogs */
495
.shell-mount-operation-icon {
496
icon-size: 48px;
497
}
498
.mount-dialog {
500
spacing: 24px;
501
}
502
.mount-dialog-subject {
504
padding-top: 10px;
505
padding-left: 17px;
506
padding-bottom: 6px;
507
max-width: 34em;
508
}
509
.mount-dialog-subject:rtl {
511
padding-left: 0px;
512
padding-right: 17px;
513
}
514
.mount-dialog-description {
516
padding-left: 17px;
517
width: 28em;
518
}
519
.mount-dialog-description:rtl {
521
padding-left: 0px;
522
padding-right: 17px;
523
}
524
.mount-dialog-app-list {
526
max-height: 200px;
527
padding-top: 24px;
528
padding-left: 49px;
529
padding-right: 32px;
530
}
531
.mount-dialog-app-list:rtl {
533
padding-right: 49px;
534
padding-left: 32px;
535
}
536
.mount-dialog-app-list-item {
538
color: rgba(0, 0, 0, 0.87);
539
}
540
.mount-dialog-app-list-item:hover {
542
color: rgba(0, 0, 0, 0.87);
543
}
544
.mount-dialog-app-list-item:ltr {
546
padding-right: 1em;
547
}
548
.mount-dialog-app-list-item:rtl {
550
padding-left: 1em;
551
}
552
.mount-dialog-app-list-item-icon:ltr {
554
padding-right: 17px;
555
}
556
.mount-dialog-app-list-item-icon:rtl {
558
padding-left: 17px;
559
}
560
.mount-dialog-app-list-item-name {
562
font-size: 1em;
563
}
564
/* Password or Authentication Dialog */
566
.prompt-dialog {
567
width: 34em;
568
border: none;
569
}
570
.prompt-dialog-main-layout {
572
spacing: 24px;
573
padding: 10px;
574
}
575
.prompt-dialog-message-layout {
577
spacing: 16px;
578
}
579
.prompt-dialog-headline {
581
font-size: 15pt;
582
font-weight: 500;
583
color: rgba(0, 0, 0, 0.87);
584
}
585
.prompt-dialog-description:rtl {
587
text-align: right;
588
}
589
.prompt-dialog-password-box {
591
spacing: 1em;
592
padding-bottom: 1em;
593
}
594
.prompt-dialog-error-label {
596
font-size: 1em;
597
color: #DD2C00;
598
padding-bottom: 8px;
599
}
600
.prompt-dialog-info-label {
602
font-size: 1em;
603
padding-bottom: 8px;
604
}
605
.hidden {
607
color: transparent;
608
}
609
.prompt-dialog-null-label {
611
font-size: 1em;
612
padding-bottom: 8px;
613
}
614
/* Polkit Dialog */
616
.polkit-dialog-user-layout {
617
padding-left: 10px;
618
spacing: 10px;
619
}
620
.polkit-dialog-user-layout:rtl {
622
padding-left: 0px;
623
padding-right: 10px;
624
}
625
.polkit-dialog-user-root-label {
627
color: #FF6D00;
628
}
629
.polkit-dialog-user-icon {
631
border-radius: 5px;
632
background-size: contain;
633
width: 48px;
634
height: 48px;
635
}
636
/* Audio selection dialog */
638
.audio-device-selection-dialog {
639
spacing: 30px;
640
}
641
.audio-selection-content {
643
spacing: 20px;
644
padding: 24px;
645
}
646
.audio-selection-title {
648
font-weight: bold;
649
text-align: center;
650
}
651
.audio-selection-box {
653
spacing: 20px;
654
}
655
.audio-selection-device {
657
border: 1px solid rgba(0, 0, 0, 0.12);
658
border-radius: 2px;
659
}
660
.audio-selection-device:active, .audio-selection-device:hover, .audio-selection-device:focus {
662
background-color: #42A5F5;
663
}
664
.audio-selection-device-box {
666
padding: 20px;
667
spacing: 20px;
668
}
669
.audio-selection-device-icon {
671
icon-size: 64px;
672
}
673
/* Access Dialog */
675
.access-dialog {
676
spacing: 30px;
677
}
678
.access-dialog-main-layout {
680
padding: 12px 20px 0;
681
spacing: 12px;
682
}
683
.access-dialog-content {
685
max-width: 28em;
686
spacing: 20px;
687
}
688
.access-dialog-icon {
690
min-width: 48px;
691
icon-size: 48px;
692
}
693
.access-dialog-title {
695
font-weight: bold;
696
}
697
.access-dialog-subtitle {
699
color: rgba(0, 0, 0, 0.38);
700
font-weight: bold;
701
}
702
/* Geolocation Dialog */
704
.geolocation-dialog {
705
spacing: 30px;
706
}
707
.geolocation-dialog-main-layout {
709
spacing: 12px;
710
}
711
.geolocation-dialog-content {
713
spacing: 20px;
714
}
715
.geolocation-dialog-icon {
717
icon-size: 48px;
718
}
719
.geolocation-dialog-title {
721
font-weight: bold;
722
}
723
.geolocation-dialog-reason {
725
color: rgba(0, 0, 0, 0.38);
726
font-weight: bold;
727
}
728
/* Network Agent Dialog */
730
.network-dialog-secret-table {
731
spacing-rows: 15px;
732
spacing-columns: 1em;
733
}
734
.keyring-dialog-control-table {
736
spacing-rows: 15px;
737
spacing-columns: 1em;
738
}
739
/* Popovers/Menus */
741
.popup-menu {
742
min-width: 200px;
743
}
744
.popup-menu .popup-sub-menu {
746
background-color: #EEEEEE;
747
box-shadow: 0 0 transparent;
748
}
749
.popup-menu .popup-menu-content {
751
padding: 8px 0;
752
}
753
.popup-menu .popup-menu-item {
755
spacing: 8px;
756
transition-duration: 100ms;
757
}
758
.popup-menu .popup-menu-item:ltr {
760
padding: 0.4em 24px 0.4em 0;
761
}
762
.popup-menu .popup-menu-item:rtl {
764
padding: 0.4em 0 0.4em 24px;
765
}
766
.popup-menu .popup-menu-item:checked {
768
background-color: #42A5F5;
769
color: #FFFFFF;
770
box-shadow: 0 0 transparent;
771
font-weight: normal;
772
}
773
.popup-menu .popup-menu-item:checked.selected {
775
background-color: #5eb3f7;
776
color: #FFFFFF;
777
}
778
.popup-menu .popup-menu-item:checked:active {
780
background-color: #7bc0f8;
781
color: #FFFFFF !important;
782
}
783
.popup-menu .popup-menu-item:checked:insensitive {
785
color: rgba(255, 255, 255, 0.5);
786
}
787
.popup-menu .popup-menu-item.selected {
789
background-color: rgba(0, 0, 0, 0.12);
790
color: rgba(0, 0, 0, 0.87);
791
transition-duration: 0s;
792
}
793
.popup-menu .popup-menu-item:active {
795
background-color: rgba(0, 0, 0, 0.26);
796
color: rgba(0, 0, 0, 0.87);
797
transition-duration: 150ms;
798
}
799
.popup-menu .popup-menu-item.selected:active {
801
color: rgba(0, 0, 0, 0.87);
802
}
803
.popup-menu .popup-menu-item:insensitive {
805
color: rgba(0, 0, 0, 0.38);
806
}
807
.popup-menu .popup-inactive-menu-item {
809
color: rgba(0, 0, 0, 0.87);
810
}
811
.popup-menu .popup-inactive-menu-item:insensitive {
813
color: rgba(0, 0, 0, 0.38);
814
}
815
.popup-menu.panel-menu {
817
-boxpointer-gap: 4px;
818
margin-bottom: 1.75em;
819
}
820
.popup-menu-ornament {
822
text-align: right;
823
width: 16px;
824
height: 16px;
825
}
826
.popup-menu-boxpointer,
828
.candidate-popup-boxpointer {
829
-arrow-border-radius: 0;
830
-arrow-background-color: transparent;
831
-arrow-border-width: 0;
832
-arrow-border-color: transparent;
833
-arrow-base: 0;
834
-arrow-rise: 0;
835
-arrow-box-shadow: none;
836
margin: 5px 8px 8px;
837
background-color: #FAFAFA;
838
border-radius: 2px;
839
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
840
}
841
.popup-separator-menu-item {
843
height: 1px;
844
margin: 8px 40px;
845
background-color: transparent;
846
border-color: rgba(0, 0, 0, 0.12);
847
border-bottom-width: 1px;
848
border-bottom-style: solid;
849
}
850
.background-menu {
852
-boxpointer-gap: 4px;
853
-arrow-rise: 0;
854
}
855
/* fallback menu
857
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
858
app menu inside the main app window itself rather than the top bar
859
*/
860
/* OSD */
861
.osd-window {
862
text-align: center;
863
font-weight: bold;
864
spacing: 1em;
865
margin: 32px;
866
min-width: 64px;
867
min-height: 64px;
868
}
869
.osd-window .osd-monitor-label {
871
font-size: 45px;
872
font-weight: 400;
873
}
874
.osd-window .level {
876
height: 0.6em;
877
border-radius: 4px;
878
background-color: rgba(0, 0, 0, 0.12);
879
color: rgba(0, 0, 0, 0.87);
880
}
881
.osd-window .level-bar {
883
background-color: #42A5F5;
884
border-radius: 2px;
885
}
886
/* Pad OSD */
888
.pad-osd-window {
889
padding: 32px;
890
background-color: rgba(0, 0, 0, 0.6);
891
}
892
.pad-osd-window .pad-osd-title-box {
894
spacing: 12px;
895
}
896
.pad-osd-window .pad-osd-title-menu-box {
898
spacing: 6px;
899
}
900
.combo-box-label {
902
width: 15em;
903
}
904
/* App Switcher */
906
.switcher-popup {
907
padding: 8px;
908
spacing: 16px;
909
}
910
.switcher-list-item-container {
912
spacing: 8px;
913
}
914
.switcher-list .item-box {
916
padding: 8px;
917
border-radius: 2px;
918
}
919
.switcher-list .item-box:outlined {
921
padding: 8px;
922
border: none;
923
background-color: rgba(0, 0, 0, 0.12);
924
}
925
.switcher-list .item-box:selected {
927
background-color: #42A5F5;
928
color: #FFFFFF;
929
}
930
.switcher-list .thumbnail-box {
932
padding: 2px;
933
spacing: 4px;
934
}
935
.switcher-list .thumbnail {
937
width: 256px;
938
}
939
.switcher-list .separator {
941
width: 1px;
942
background: rgba(0, 0, 0, 0.12);
943
}
944
.switcher-arrow {
946
border-color: transparent;
947
color: rgba(0, 0, 0, 0.38);
948
}
949
.switcher-arrow:highlighted {
951
color: rgba(0, 0, 0, 0.87);
952
}
953
.input-source-switcher-symbol {
955
font-size: 45px;
956
font-weight: 400;
957
width: 96px;
958
height: 96px;
959
}
960
/* Window Cycler */
962
.cycler-highlight {
963
border: 4px solid #42A5F5;
964
}
965
/* Workspace Switcher */
967
.workspace-switcher-group {
968
padding: 8px;
969
}
970
.workspace-switcher {
972
background: transparent;
973
border: 0px;
974
border-radius: 0px;
975
padding: 0px;
976
spacing: 8px;
977
}
978
.ws-switcher-active-up, .ws-switcher-active-down {
980
height: 48px;
981
background-color: #42A5F5;
982
color: #FFFFFF;
983
background-size: 32px;
984
border-radius: 2px;
985
}
986
.ws-switcher-box {
988
height: 48px;
989
border: none;
990
background: rgba(0, 0, 0, 0.12);
991
border-radius: 2px;
992
}
993
.osd-window,
995
.resize-popup,
996
.switcher-list, .workspace-switcher-container {
997
color: rgba(0, 0, 0, 0.87);
998
background-color: #FAFAFA;
999
border: none;
1000
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
1001
border-radius: 2px;
1002
padding: 12px;
1003
}
1004
/* Tiled window previews */
1006
.tile-preview {
1007
background-color: rgba(64, 196, 255, 0.3);
1008
border: 1px solid #40C4FF;
1009
}
1010
.tile-preview-left.on-primary {
1012
border-radius: 0 0 0 0;
1013
}
1014
.tile-preview-right.on-primary {
1016
border-radius: 0 0 0 0;
1017
}
1018
.tile-preview-left.tile-preview-right.on-primary {
1020
border-radius: 0 0 0 0;
1021
}
1022
/* TOP BAR */
1024
#panel {
1025
background-color: rgba(0, 0, 0, 0.6);
1026
/* transition from solid to transparent */
1027
transition-duration: 300ms;
1028
font-weight: bold;
1029
height: 32px;
1030
}
1031
#panel:overview, #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
1033
background-color: transparent;
1034
}
1035
#panel #panelLeft, #panel #panelCenter {
1037
spacing: 0;
1038
}
1039
#panel .panel-corner {
1041
-panel-corner-radius: 0;
1042
-panel-corner-background-color: rgba(0, 0, 0, 0.6);
1043
-panel-corner-border-width: 2px;
1044
-panel-corner-border-color: transparent;
1045
}
1046
#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
1048
-panel-corner-border-color: #FFFFFF;
1049
}
1050
#panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
1052
-panel-corner-radius: 0;
1053
-panel-corner-background-color: transparent;
1054
-panel-corner-border-color: transparent;
1055
}
1056
#panel .panel-button {
1058
-natural-hpadding: 12px;
1059
-minimum-hpadding: 6px;
1060
font-weight: bold;
1061
color: rgba(255, 255, 255, 0.7);
1062
text-shadow: none;
1063
transition-duration: 150ms;
1064
}
1065
#panel .panel-button .app-menu-icon {
1067
-st-icon-style: symbolic;
1068
margin-left: 4px;
1069
margin-right: 4px;
1070
}
1071
#panel .panel-button .system-status-icon,
1073
#panel .panel-button .app-menu-icon > StIcon,
1074
#panel .panel-button .popup-menu-arrow {
1075
icon-shadow: none;
1076
}
1077
#panel .panel-button:hover {
1079
color: #FFFFFF;
1080
text-shadow: none;
1081
}
1082
#panel .panel-button:hover .system-status-icon,
1084
#panel .panel-button:hover .app-menu-icon > StIcon,
1085
#panel .panel-button:hover .popup-menu-arrow {
1086
icon-shadow: none;
1087
}
1088
#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
1090
background-color: rgba(0, 0, 0, 0.01);
1091
box-shadow: inset 0 -2px 0px #FFFFFF;
1092
color: #FFFFFF;
1093
}
1094
#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 {
1096
icon-shadow: none;
1097
}
1098
#panel .panel-button .system-status-icon {
1100
icon-size: 1.14286em;
1101
padding: 0 4px;
1102
}
1103
.unlock-screen #panel .panel-button,
1105
.login-screen #panel .panel-button,
1106
.lock-screen #panel .panel-button {
1107
color: rgba(255, 255, 255, 0.7);
1108
}
1109
.unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
1111
.login-screen #panel .panel-button:focus,
1112
.login-screen #panel .panel-button:hover,
1113
.login-screen #panel .panel-button:active,
1114
.lock-screen #panel .panel-button:focus,
1115
.lock-screen #panel .panel-button:hover,
1116
.lock-screen #panel .panel-button:active {
1117
color: #FFFFFF;
1118
}
1119
#panel .panel-status-indicators-box,
1121
#panel .panel-status-menu-box {
1122
spacing: 2px;
1123
}
1124
#panel .power-status.panel-status-indicators-box {
1126
spacing: 0;
1127
}
1128
#panel .screencast-indicator {
1130
color: #FF6D00;
1131
}
1132
#panel.solid {
1134
background-color: rgba(0, 0, 0, 0.6);
1135
/* transition from transparent to solid */
1136
transition-duration: 300ms;
1137
}
1138
#panel.solid .panel-corner {
1140
-panel-corner-background-color: rgba(0, 0, 0, 0.6);
1141
}
1142
#panel.solid .panel-button {
1144
color: rgba(255, 255, 255, 0.7);
1145
text-shadow: none;
1146
}
1147
#panel.solid .panel-button:hover {
1149
color: #FFFFFF;
1150
}
1151
#panel.solid .system-status-icon,
1153
#panel.solid .app-menu-icon > StIcon,
1154
#panel.solid .popup-menu-arrow {
1155
icon-shadow: none;
1156
}
1157
#calendarArea {
1159
padding: 8px 16px;
1160
}
1161
.calendar {
1163
margin-bottom: 0;
1164
}
1165
.calendar,
1167
.datemenu-today-button,
1168
.datemenu-displays-box,
1169
.message-list-sections {
1170
margin: 0 8px;
1171
}
1172
.datemenu-calendar-column {
1174
spacing: 8px;
1175
}
1176
.datemenu-displays-section {
1178
padding-bottom: 0;
1179
}
1180
.datemenu-displays-box {
1182
spacing: 8px;
1183
}
1184
.datemenu-calendar-column {
1186
border: 0 solid rgba(0, 0, 0, 0.12);
1187
}
1188
.datemenu-calendar-column:ltr {
1190
border-left-width: 0;
1191
}
1192
.datemenu-calendar-column:rtl {
1194
border-right-width: 0;
1195
}
1196
.datemenu-today-button,
1198
.world-clocks-button,
1199
.weather-button,
1200
.events-section-title {
1201
min-height: 24px;
1202
padding: 4px 8px;
1203
border-radius: 2px;
1204
}
1205
.datemenu-today-button {
1207
min-height: 56px;
1208
}
1209
.message-list-section-list:ltr {
1211
padding-left: 0;
1212
}
1213
.message-list-section-list:rtl {
1215
padding-right: 0;
1216
}
1217
.datemenu-today-button:hover, .datemenu-today-button:focus,
1219
.world-clocks-button:hover,
1220
.world-clocks-button:focus,
1221
.weather-button:hover,
1222
.weather-button:focus,
1223
.events-section-title:hover,
1224
.events-section-title:focus {
1225
color: rgba(0, 0, 0, 0.87);
1226
background-color: rgba(0, 0, 0, 0.12);
1227
}
1228
.datemenu-today-button:active,
1230
.world-clocks-button:active,
1231
.weather-button:active,
1232
.events-section-title:active {
1233
color: rgba(0, 0, 0, 0.87);
1234
background-color: rgba(0, 0, 0, 0.26);
1235
}
1236
.datemenu-today-button .date-label {
1238
font-size: 18pt;
1239
font-weight: 400;
1240
}
1241
.world-clocks-header,
1243
.weather-header,
1244
.events-section-title {
1245
color: rgba(0, 0, 0, 0.54);
1246
font-weight: bold;
1247
}
1248
.world-clocks-grid {
1250
spacing-rows: 0.4em;
1251
}
1252
.weather-box {
1254
spacing: 0.4em;
1255
}
1256
.calendar-month-label {
1258
height: 20px;
1259
margin: 2px;
1260
padding: 6px 16px;
1261
border-radius: 2px;
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
width: 32px;
1273
height: 32px;
1274
margin: 2px;
1275
border-radius: 100px;
1276
background-color: transparent;
1277
color: rgba(0, 0, 0, 0.87);
1278
}
1279
.pager-button:hover, .pager-button:focus {
1281
background-color: rgba(0, 0, 0, 0.12);
1282
}
1283
.pager-button:active {
1285
background-color: rgba(0, 0, 0, 0.26);
1286
}
1287
.calendar-change-month-back {
1289
background-image: url("assets/calendar-arrow-left.svg");
1290
}
1291
.calendar-change-month-back:rtl {
1293
background-image: url("assets/calendar-arrow-right.svg");
1294
}
1295
.calendar-change-month-forward {
1297
background-image: url("assets/calendar-arrow-right.svg");
1298
}
1299
.calendar-change-month-forward:rtl {
1301
background-image: url("assets/calendar-arrow-left.svg");
1302
}
1303
.calendar-day-base {
1305
font-size: 9pt;
1306
font-weight: 400;
1307
text-align: center;
1308
width: 32px;
1309
height: 32px;
1310
padding: 0;
1311
margin: 2px;
1312
border-radius: 100px;
1313
}
1314
.calendar-day-base:hover, .calendar-day-base:focus {
1316
background-color: rgba(0, 0, 0, 0.12);
1317
}
1318
.calendar-day-base:active {
1320
color: inherit;
1321
background-color: rgba(0, 0, 0, 0.26);
1322
border-color: transparent;
1323
}
1324
.calendar-day-base:selected {
1326
color: #FFFFFF;
1327
background-color: #42A5F5;
1328
border-color: transparent;
1329
}
1330
.calendar-day-base.calendar-day-heading {
1332
width: 32px;
1333
height: 25px;
1334
margin-top: 2px;
1335
padding: 7px 0 0;
1336
border-radius: 100px;
1337
background-color: transparent;
1338
color: rgba(0, 0, 0, 0.38);
1339
font-size: 9pt;
1340
font-weight: 400;
1341
font-weight: bold;
1342
text-align: center;
1343
}
1344
.calendar-day {
1346
border-width: 0;
1347
}
1348
.calendar-day-top {
1350
border-top-width: 0;
1351
}
1352
.calendar-day-left {
1354
border-left-width: 0;
1355
}
1356
.calendar-nonwork-day {
1358
color: rgba(0, 0, 0, 0.87);
1359
}
1360
.calendar-today {
1362
font-weight: bold !important;
1363
border: none;
1364
}
1365
.calendar-day-with-events {
1367
color: #42A5F5;
1368
font-weight: normal;
1369
text-decoration: underline;
1370
background-image: none;
1371
}
1372
.calendar-other-month-day {
1374
color: rgba(0, 0, 0, 0.26);
1375
opacity: 0.5;
1376
}
1377
.calendar-week-number {
1379
width: 32px;
1380
height: 25px;
1381
margin: 2px;
1382
padding: 7px 0 0;
1383
border-radius: 100px;
1384
background-color: transparent;
1385
color: rgba(0, 0, 0, 0.38);
1386
font-size: inherit;
1387
font-weight: bold;
1388
text-align: center;
1389
}
1390
/* Message list */
1392
.message-list {
1393
width: 420px;
1394
}
1395
.message-list-clear-button.button {
1397
background-color: transparent;
1398
margin: 8px 8px 0;
1399
}
1400
.message-list-clear-button.button:hover, .message-list-clear-button.button:focus {
1402
background-color: rgba(0, 0, 0, 0.12);
1403
}
1404
.message-list-clear-button.button:active {
1406
background-color: rgba(0, 0, 0, 0.26);
1407
}
1408
.message-list-sections {
1410
spacing: 8px;
1411
}
1412
.message-list-section,
1414
.message-list-section-list {
1415
spacing: 8px;
1416
}
1417
.message {
1419
min-height: 64px;
1420
background-color: transparent;
1421
border-radius: 2px;
1422
}
1423
.message:hover, .message:focus {
1425
background-color: rgba(0, 0, 0, 0.12);
1426
}
1427
.message:active {
1429
background-color: rgba(0, 0, 0, 0.26);
1430
}
1431
.message-icon-bin {
1433
padding: 8px 0px 8px 8px;
1434
}
1435
.message-icon-bin:rtl {
1437
padding: 8px 8px 8px 0px;
1438
}
1439
.message-icon-bin > StIcon {
1441
color: rgba(0, 0, 0, 0.87);
1442
icon-size: 16px;
1443
-st-icon-style: requested;
1444
margin: 4px 0px 4px 4px;
1445
}
1446
.message-icon-bin > StIcon:rtl {
1448
margin: 4px 4px 4px 0px;
1449
}
1450
.message-secondary-bin {
1452
padding: 0 8px;
1453
}
1454
.message-secondary-bin > .event-time {
1456
min-height: 22px;
1457
padding-top: 2px;
1458
color: rgba(0, 0, 0, 0.54);
1459
font-size: 1em;
1460
/* HACK: the label should be baseline-aligned with a 1em label,
1461
fake this with some bottom padding */
1462
padding-bottom: 0;
1463
}
1464
.message-secondary-bin > StIcon {
1466
icon-size: 16px;
1467
}
1468
.message-title {
1470
min-height: 22px;
1471
padding-top: 2px;
1472
color: rgba(0, 0, 0, 0.87);
1473
font-weight: bold;
1474
font-size: 1em;
1475
}
1476
.message-content {
1478
min-height: 48px;
1479
padding: 8px;
1480
color: rgba(0, 0, 0, 0.54);
1481
font-size: 1em;
1482
}
1483
.message-content * > StIcon {
1485
icon-size: 16px;
1486
border-radius: 16px;
1487
padding: 4px;
1488
color: rgba(0, 0, 0, 0.54);
1489
}
1490
/* FIXME: how do you do this in sass? */
1492
.message-content *:hover > StIcon,
1493
.message-content *:focus > StIcon {
1494
color: rgba(0, 0, 0, 0.87);
1495
background-color: rgba(0, 0, 0, 0.12);
1496
}
1497
.message-content *:active > StIcon {
1499
color: rgba(0, 0, 0, 0.87);
1500
background-color: rgba(0, 0, 0, 0.26);
1501
}
1502
.message-media-control {
1504
margin: 16px 0;
1505
padding: 8px;
1506
border-radius: 100px;
1507
color: rgba(0, 0, 0, 0.54);
1508
}
1509
.message-media-control:hover, .message-media-control:focus {
1511
color: rgba(0, 0, 0, 0.87);
1512
background-color: rgba(0, 0, 0, 0.12);
1513
}
1514
.message-media-control:active {
1516
color: rgba(0, 0, 0, 0.87);
1517
background-color: rgba(0, 0, 0, 0.26);
1518
}
1519
.message-media-control:insensitive {
1521
color: rgba(0, 0, 0, 0.26);
1522
}
1523
.message-media-control:last-child:ltr {
1525
margin-right: 16px;
1526
padding-right: 8px;
1527
}
1528
.message-media-control:last-child:rtl {
1530
margin-left: 16px;
1531
padding-left: 8px;
1532
}
1533
.media-message-cover-icon {
1535
icon-size: 32px !important;
1536
margin: 8px 0px 8px 4px !important;
1537
}
1538
.media-message-cover-icon:rtl {
1540
margin: 8px 4px 8px 0px !important;
1541
}
1542
.media-message-cover-icon.fallback {
1544
icon-size: 16px !important;
1545
padding: 8px;
1546
border: none;
1547
border-radius: 2px;
1548
background-color: rgba(0, 0, 0, 0.12);
1549
color: rgba(0, 0, 0, 0.38);
1550
}
1551
.system-switch-user-submenu-icon.user-icon {
1553
icon-size: 20px;
1554
padding: 0 2px;
1555
}
1556
.system-switch-user-submenu-icon.default-icon {
1558
icon-size: 16px;
1559
padding: 0 4px;
1560
}
1561
#appMenu {
1563
spinner-image: url("process-working.svg");
1564
spacing: 4px;
1565
}
1566
#appMenu .label-shadow {
1568
color: transparent;
1569
}
1570
.aggregate-menu {
1572
min-width: 280px;
1573
}
1574
.aggregate-menu .popup-menu-icon {
1576
padding: 0 4px;
1577
}
1578
.system-menu-action {
1580
color: rgba(0, 0, 0, 0.54);
1581
border-radius: 100px;
1582
/* wish we could do 50% */
1583
padding: 16px;
1584
border: none;
1585
}
1586
.system-menu-action:hover, .system-menu-action:focus {
1588
background-color: rgba(0, 0, 0, 0.12);
1589
color: rgba(0, 0, 0, 0.87);
1590
border: none;
1591
padding: 16px;
1592
}
1593
.system-menu-action:active {
1595
background-color: rgba(0, 0, 0, 0.26);
1596
color: rgba(0, 0, 0, 0.87);
1597
}
1598
.system-menu-action > StIcon {
1600
icon-size: 16px;
1601
}
1602
.ripple-box {
1604
width: 48px;
1605
height: 48px;
1606
background-image: url("assets/corner-ripple-ltr.svg");
1607
background-size: contain;
1608
}
1609
.ripple-box:rtl {
1611
background-image: url("assets/corner-ripple-rtl.svg");
1612
}
1613
.popup-menu-arrow {
1615
width: 16px;
1616
height: 16px;
1617
}
1618
.popup-menu-icon {
1620
icon-size: 1.14286em;
1621
}
1622
.window-close {
1624
height: 36px;
1625
width: 36px;
1626
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1627
background-image: url("assets/window-close.svg");
1628
background-size: 36px;
1629
}
1630
.window-close:hover {
1632
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1633
}
1634
.window-close:active {
1636
background-image: url("assets/window-close-active.svg");
1637
}
1638
.window-close {
1640
-shell-close-overlap: 18px;
1641
}
1642
.window-close:rtl {
1644
-st-background-image-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
1645
}
1646
.window-close:rtl:hover {
1648
-st-background-image-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1649
}
1650
/* NETWORK DIALOGS */
1652
.nm-dialog {
1653
max-height: 34em;
1654
min-height: 31em;
1655
min-width: 32em;
1656
}
1657
.nm-dialog-content {
1659
spacing: 20px;
1660
padding: 24px;
1661
}
1662
.nm-dialog-header-hbox {
1664
spacing: 10px;
1665
}
1666
.nm-dialog-airplane-box {
1668
spacing: 12px;
1669
}
1670
.nm-dialog-airplane-headline {
1672
font-weight: bold;
1673
text-align: center;
1674
}
1675
.nm-dialog-airplane-text {
1677
color: rgba(0, 0, 0, 0.87);
1678
}
1679
.nm-dialog-header-icon {
1681
icon-size: 32px;
1682
}
1683
.nm-dialog-scroll-view {
1685
border: none;
1686
}
1687
.nm-dialog-header {
1689
font-size: 15pt;
1690
font-weight: 500;
1691
}
1692
.nm-dialog-item {
1694
font-size: 1em;
1695
border-bottom: none;
1696
border-radius: 2px;
1697
padding: 12px;
1698
spacing: 20px;
1699
}
1700
.nm-dialog-item:hover, .nm-dialog-item:focus {
1702
background-color: rgba(0, 0, 0, 0.12);
1703
}
1704
.nm-dialog-item:active {
1706
background-color: rgba(0, 0, 0, 0.26);
1707
}
1708
.nm-dialog-item:selected {
1710
background-color: #42A5F5;
1711
color: #FFFFFF;
1712
}
1713
.nm-dialog-icons {
1715
spacing: .5em;
1716
}
1717
.nm-dialog-icon {
1719
icon-size: 16px;
1720
}
1721
.no-networks-label {
1723
color: rgba(0, 0, 0, 0.38);
1724
}
1725
.no-networks-box {
1727
spacing: 12px;
1728
}
1729
/* OVERVIEW */
1731
#overview {
1732
spacing: 24px;
1733
}
1734
.overview-controls {
1736
padding-bottom: 32px;
1737
}
1738
.window-picker {
1740
-horizontal-spacing: 32px;
1741
-vertical-spacing: 32px;
1742
padding-left: 32px;
1743
padding-right: 32px;
1744
padding-bottom: 48px;
1745
}
1746
.window-picker.external-monitor {
1748
padding: 32px;
1749
}
1750
.window-clone-border {
1752
border: 4px solid rgba(255, 255, 255, 0.3);
1753
border-radius: 2px;
1754
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
1755
}
1756
.window-caption {
1758
spacing: 25px;
1759
color: #FFFFFF;
1760
background-color: transparent;
1761
border-radius: 2px;
1762
padding: 4px 8px;
1763
-shell-caption-spacing: 12px;
1764
}
1765
.window-caption:hover {
1767
background-color: rgba(255, 255, 255, 0.3);
1768
color: #FFFFFF;
1769
}
1770
.search-entry {
1772
width: 304px;
1773
padding: 0 8px;
1774
border-radius: 0;
1775
color: rgba(255, 255, 255, 0.5);
1776
selection-background-color: rgba(255, 255, 255, 0.3);
1777
selected-color: #FFFFFF;
1778
background-color: rgba(0, 0, 0, 0.01);
1779
border-color: transparent;
1780
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
1781
}
1782
.search-entry:focus {
1784
border-color: transparent;
1785
box-shadow: inset 0 -2px #FFFFFF;
1786
padding: 0 8px;
1787
border-width: 0;
1788
color: #FFFFFF;
1789
}
1790
.search-entry .search-entry-icon {
1792
icon-size: 16px;
1793
padding: 0 0;
1794
color: rgba(255, 255, 255, 0.5);
1795
}
1796
.search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
1798
color: #FFFFFF;
1799
}
1800
#searchResultsBin {
1802
max-width: 1000px;
1803
}
1804
#searchResultsContent {
1806
padding-left: 20px;
1807
padding-right: 20px;
1808
spacing: 16px;
1809
}
1810
.search-section {
1812
spacing: 16px;
1813
}
1814
.search-section-content {
1816
spacing: 32px;
1817
}
1818
.list-search-results {
1820
spacing: 3px;
1821
}
1822
.search-section-separator {
1824
height: 1px;
1825
background-color: rgba(255, 255, 255, 0.12);
1826
}
1827
.list-search-result-content {
1829
spacing: 30px;
1830
}
1831
.list-search-result-title {
1833
font-size: 12pt;
1834
font-weight: 400;
1835
color: #FFFFFF;
1836
spacing: 12px;
1837
}
1838
.list-search-result-description {
1840
color: rgba(255, 255, 255, 0.7);
1841
}
1842
.list-search-provider-details {
1844
width: 150px;
1845
color: rgba(255, 255, 255, 0.7);
1846
margin-top: 0.24em;
1847
}
1848
.list-search-provider-content {
1850
spacing: 20px;
1851
}
1852
.search-provider-icon {
1854
padding: 15px;
1855
}
1856
/* DASHBOARD */
1858
#dash {
1859
font-size: 1em;
1860
color: #FFFFFF;
1861
background-color: rgba(255, 255, 255, 0.1);
1862
padding: 3px 0;
1863
border: none;
1864
border-left: 0px;
1865
border-radius: 0px 2px 2px 0px;
1866
}
1867
#dash:rtl {
1869
border-radius: 2px 0 0 2px;
1870
}
1871
#dash .placeholder {
1873
background-image: url("assets/dash-placeholder.svg");
1874
background-size: contain;
1875
height: 24px;
1876
}
1877
#dash .empty-dash-drop-target {
1879
width: 24px;
1880
height: 24px;
1881
}
1882
.dash-item-container > StWidget {
1884
padding: 3px 6px;
1885
}
1886
.dash-label {
1888
border-radius: 2px;
1889
padding: 7px 8px;
1890
color: rgba(0, 0, 0, 0.87);
1891
background-color: #FAFAFA;
1892
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
1893
text-align: center;
1894
-x-offset: 8px;
1895
}
1896
/* App Vault/Grid */
1898
.icon-grid {
1899
spacing: 30px;
1900
-shell-grid-horizontal-item-size: 136px;
1901
-shell-grid-vertical-item-size: 136px;
1902
}
1903
.icon-grid .overview-icon {
1905
icon-size: 96px;
1906
}
1907
.app-view-controls {
1909
width: 320px;
1910
padding-bottom: 32px;
1911
}
1912
.app-view-control {
1914
padding: 0 16px;
1915
font-weight: bold;
1916
color: rgba(255, 255, 255, 0.7);
1917
}
1918
.app-view-control:hover {
1920
color: #FFFFFF;
1921
background-color: rgba(255, 255, 255, 0.12) !important;
1922
}
1923
.app-view-control:active {
1925
color: #FFFFFF;
1926
background-color: rgba(255, 255, 255, 0.3) !important;
1927
}
1928
.app-view-control:checked {
1930
color: #FFFFFF;
1931
background-color: rgba(0, 0, 0, 0.01) !important;
1932
box-shadow: inset 0 2px 0 #FFFFFF;
1933
}
1934
.app-view-control:first-child {
1936
border-right-width: 0;
1937
border-radius: 2px;
1938
}
1939
.app-view-control:first-child:checked {
1941
border-radius: 0;
1942
}
1943
.app-view-control:last-child {
1945
border-radius: 2px;
1946
}
1947
.app-view-control:last-child:checked {
1949
border-radius: 0;
1950
}
1951
.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
1953
.list-search-result:focus,
1954
.list-search-result:selected,
1955
.list-search-result:hover {
1956
background-color: rgba(255, 255, 255, 0.12);
1957
transition-duration: 0s;
1958
}
1959
.search-provider-icon:active, .search-provider-icon:checked,
1961
.list-search-result:active,
1962
.list-search-result:checked {
1963
background-color: rgba(255, 255, 255, 0.3);
1964
transition-duration: 150ms;
1965
}
1966
.app-well-app:hover .overview-icon,
1968
.app-well-app:focus .overview-icon,
1969
.app-well-app:selected .overview-icon,
1970
.app-well-app.app-folder:hover .overview-icon,
1971
.app-well-app.app-folder:focus .overview-icon,
1972
.app-well-app.app-folder:selected .overview-icon,
1973
.show-apps:hover .overview-icon,
1974
.show-apps:focus .overview-icon,
1975
.show-apps:selected .overview-icon,
1976
.grid-search-result:hover .overview-icon,
1977
.grid-search-result:focus .overview-icon,
1978
.grid-search-result:selected .overview-icon {
1979
background-color: rgba(255, 255, 255, 0.12);
1980
transition-duration: 0s;
1981
border-image: none;
1982
background-image: none;
1983
}
1984
.app-well-app:active .overview-icon,
1986
.app-well-app:checked .overview-icon,
1987
.app-well-app.app-folder:active .overview-icon,
1988
.app-well-app.app-folder:checked .overview-icon,
1989
.show-apps:active .overview-icon,
1990
.show-apps:checked .overview-icon,
1991
.grid-search-result:active .overview-icon,
1992
.grid-search-result:checked .overview-icon {
1993
background-color: rgba(255, 255, 255, 0.3);
1994
box-shadow: 0 0 transparent;
1995
transition-duration: 150ms;
1996
}
1997
.app-well-app-running-dot {
1999
width: 32px;
2000
height: 2px;
2001
background-color: #FFFFFF;
2002
margin-bottom: 0;
2003
}
2004
.search-provider-icon,
2006
.list-search-result, .app-well-app .overview-icon,
2007
.app-well-app.app-folder .overview-icon,
2008
.show-apps .overview-icon,
2009
.grid-search-result .overview-icon {
2010
color: #FFFFFF;
2011
border-radius: 2px;
2012
padding: 6px;
2013
border: none;
2014
transition-duration: 150ms;
2015
text-align: center;
2016
}
2017
.app-well-app.app-folder > .overview-icon {
2019
background-color: rgba(255, 255, 255, 0.1);
2020
}
2021
.show-apps .show-apps-icon {
2023
color: rgba(255, 255, 255, 0.7);
2024
}
2025
.show-apps:hover .show-apps-icon,
2027
.show-apps:active .show-apps-icon,
2028
.show-apps:checked .show-apps-icon,
2029
.show-apps:focus .show-apps-icon {
2030
color: #FFFFFF;
2031
transition-duration: 150ms;
2032
}
2033
.app-folder-popup {
2035
-arrow-border-radius: 2px;
2036
-arrow-background-color: rgba(255, 255, 255, 0.1);
2037
-arrow-base: 24px;
2038
-arrow-rise: 12px;
2039
}
2040
.app-folder-popup-bin {
2042
padding: 5px;
2043
}
2044
.app-folder-icon {
2046
padding: 5px;
2047
spacing-rows: 5px;
2048
spacing-columns: 5px;
2049
}
2050
.page-indicator {
2052
padding: 15px 20px;
2053
}
2054
.page-indicator .page-indicator-icon {
2056
width: 12px;
2057
height: 12px;
2058
border-radius: 12px;
2059
background-image: none;
2060
background-color: rgba(255, 255, 255, 0.3);
2061
}
2062
.page-indicator:hover .page-indicator-icon {
2064
background-image: none;
2065
background-color: rgba(255, 255, 255, 0.5);
2066
}
2067
.page-indicator:active .page-indicator-icon {
2069
background-image: none;
2070
background-color: rgba(255, 255, 255, 0.7);
2071
}
2072
.page-indicator:checked .page-indicator-icon {
2074
background-image: none;
2075
background-color: #FFFFFF;
2076
transition-duration: 0s;
2077
}
2078
.page-indicator:checked:active {
2080
background-image: none;
2081
}
2082
.app-well-app > .overview-icon.overview-icon-with-label,
2084
.grid-search-result .overview-icon.overview-icon-with-label {
2085
padding: 10px 8px 5px 8px;
2086
spacing: 4px;
2087
}
2088
.workspace-thumbnails {
2090
visible-width: 32px;
2091
spacing: 12px;
2092
padding: 12px;
2093
border-radius: 2px 0 0 2px;
2094
}
2095
.workspace-thumbnails:rtl {
2097
border-radius: 0 2px 2px 0;
2098
}
2099
.workspace-thumbnail-indicator {
2101
border: 0 solid #FFFFFF;
2102
border-left-width: 2px;
2103
padding: 6px;
2104
border-radius: 0;
2105
}
2106
.search-display > StBoxLayout,
2108
.all-apps,
2109
.frequent-apps > StBoxLayout {
2110
padding: 0px 88px 10px 88px;
2111
}
2112
.workspace-thumbnails {
2114
color: #FFFFFF;
2115
background-color: rgba(255, 255, 255, 0.1);
2116
border: none;
2117
}
2118
.search-statustext, .no-frequent-applications-label {
2120
font-size: 45px;
2121
font-weight: 400;
2122
color: rgba(255, 255, 255, 0.5);
2123
}
2124
/* NOTIFICATIONS & MESSAGE TRAY */
2126
.url-highlighter {
2127
link-color: #42A5F5;
2128
}
2129
.notification-banner {
2131
font-size: 1em;
2132
width: 34em;
2133
min-height: 64px;
2134
margin: 5px;
2135
border-radius: 2px;
2136
color: rgba(0, 0, 0, 0.87);
2137
background-color: #FAFAFA;
2138
border: none;
2139
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2140
}
2141
.notification-banner:hover {
2143
background-color: #FAFAFA;
2144
}
2145
.notification-banner:focus {
2147
background-color: #FAFAFA;
2148
}
2149
.notification-banner .notification-icon {
2151
padding: 5px;
2152
}
2153
.notification-banner .notification-content {
2155
padding: 5px;
2156
spacing: 5px;
2157
}
2158
.notification-banner .secondary-icon {
2160
icon-size: 1.14286em;
2161
}
2162
.notification-banner .notification-actions {
2164
background-color: transparent;
2165
padding-top: 0;
2166
border-top: 1px solid rgba(0, 0, 0, 0.12);
2167
spacing: 1px;
2168
}
2169
.notification-banner .notification-button {
2171
min-height: 40px;
2172
padding: 0 16px;
2173
background-color: transparent;
2174
color: rgba(0, 0, 0, 0.54);
2175
font-weight: 500;
2176
}
2177
.notification-banner .notification-button:first-child {
2179
border-radius: 0 0 0 2px;
2180
}
2181
.notification-banner .notification-button:last-child {
2183
border-radius: 0 0 2px 0;
2184
}
2185
.notification-banner .notification-button:hover, .notification-banner .notification-buttonfocus {
2187
background-color: rgba(0, 0, 0, 0.12);
2188
color: rgba(0, 0, 0, 0.87);
2189
}
2190
.notification-banner .notification-button:active {
2192
background-color: rgba(0, 0, 0, 0.26);
2193
color: rgba(0, 0, 0, 0.87);
2194
}
2195
.summary-source-counter {
2197
font-size: 1em;
2198
font-weight: bold;
2199
height: 1.6em;
2200
width: 1.6em;
2201
-shell-counter-overlap-x: 3px;
2202
-shell-counter-overlap-y: 3px;
2203
background-color: #42A5F5;
2204
color: #FFFFFF;
2205
border: 2px solid #FFFFFF;
2206
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
2207
border-radius: 0.9em;
2208
}
2209
.secondary-icon {
2211
icon-size: 1.14286em;
2212
}
2213
.chat-body {
2215
spacing: 5px;
2216
}
2217
.chat-response {
2219
margin: 5px;
2220
}
2221
.chat-log-message {
2223
color: rgba(0, 0, 0, 0.87);
2224
}
2225
.chat-new-group {
2227
padding-top: 1em;
2228
}
2229
.chat-received {
2231
padding-left: 4px;
2232
}
2233
.chat-received:rtl {
2235
padding-left: 0px;
2236
padding-right: 4px;
2237
}
2238
.chat-sent {
2240
padding-left: 18pt;
2241
color: rgba(0, 0, 0, 0.54);
2242
}
2243
.chat-sent:rtl {
2245
padding-left: 0;
2246
padding-right: 18pt;
2247
}
2248
.chat-meta-message {
2250
padding-left: 4px;
2251
font-size: 9pt;
2252
font-weight: 400;
2253
color: rgba(0, 0, 0, 0.38);
2254
}
2255
.chat-meta-message:rtl {
2257
padding-left: 0;
2258
padding-right: 4px;
2259
}
2260
.hotplug-transient-box {
2262
spacing: 6px;
2263
padding: 2px 72px 2px 12px;
2264
}
2265
.hotplug-notification-item {
2267
padding: 2px 10px;
2268
}
2269
.hotplug-notification-item:focus {
2271
padding: 1px 71px 1px 11px;
2272
}
2273
.hotplug-notification-item-icon {
2275
icon-size: 24px;
2276
padding: 2px 5px;
2277
}
2278
.hotplug-resident-box {
2280
spacing: 8px;
2281
}
2282
.hotplug-resident-mount {
2284
spacing: 8px;
2285
border-radius: 2px;
2286
}
2287
.hotplug-resident-mount:hover {
2289
background-color: rgba(0, 0, 0, 0.12);
2290
}
2291
.hotplug-resident-mount:active {
2293
background-color: rgba(0, 0, 0, 0.26);
2294
}
2295
.hotplug-resident-mount-label {
2297
color: inherit;
2298
padding-left: 6px;
2299
}
2300
.hotplug-resident-mount-icon {
2302
icon-size: 24px;
2303
padding-left: 6px;
2304
}
2305
.hotplug-resident-eject-icon {
2307
icon-size: 16px;
2308
}
2309
.hotplug-resident-eject-button {
2311
padding: 7px;
2312
border-radius: 2px;
2313
color: rgba(0, 0, 0, 0.87);
2314
}
2315
/* Eeeky things */
2317
.legacy-tray {
2318
background-color: rgba(0, 0, 0, 0.6);
2319
color: #FFFFFF;
2320
border: none;
2321
border-bottom-width: 0;
2322
}
2323
.legacy-tray:ltr {
2325
border-radius: 0 2px 0 0;
2326
border-left-width: 0;
2327
}
2328
.legacy-tray:rtl {
2330
border-radius: 2px 0 0 0;
2331
border-right-width: 0;
2332
}
2333
.legacy-tray-handle,
2335
.legacy-tray-icon {
2336
padding: 6px;
2337
}
2338
.legacy-tray-handle StIcon,
2340
.legacy-tray-icon StIcon {
2341
icon-size: 24px;
2342
}
2343
.legacy-tray-handle:hover, .legacy-tray-handle:focus,
2345
.legacy-tray-icon:hover,
2346
.legacy-tray-icon:focus {
2347
background-color: rgba(255, 255, 255, 0.12);
2348
}
2349
.legacy-tray-handle:active,
2351
.legacy-tray-icon:active {
2352
background-color: rgba(255, 255, 255, 0.3);
2353
}
2354
.legacy-tray-icon-box {
2356
spacing: 12px;
2357
}
2358
.legacy-tray-icon-box:ltr {
2360
padding-left: 12px;
2361
}
2362
.legacy-tray-icon-box:rtl {
2364
padding-right: 12px;
2365
}
2366
.legacy-tray-icon-box StButton {
2368
width: 24px;
2369
height: 24px;
2370
}
2371
.magnifier-zoom-region {
2373
border: 2px solid #42A5F5;
2374
}
2375
.magnifier-zoom-region.full-screen {
2377
border-width: 0;
2378
}
2379
/* On-screen Keyboard */
2381
#keyboard {
2382
background-color: rgba(0, 0, 0, 0.3);
2383
}
2384
.keyboard-layout {
2386
spacing: 10px;
2387
padding: 10px;
2388
}
2389
.keyboard-row {
2391
spacing: 15px;
2392
}
2393
.keyboard-key {
2395
min-height: 72px;
2396
min-width: 72px;
2397
font-size: 2em;
2398
font-weight: 500;
2399
border-radius: 2px;
2400
border: none;
2401
color: inherit;
2402
color: rgba(0, 0, 0, 0.62);
2403
background-color: #FAFAFA;
2404
border-color: transparent;
2405
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2406
text-shadow: none;
2407
icon-shadow: none;
2408
}
2409
.keyboard-key:focus {
2411
color: rgba(0, 0, 0, 0.87);
2412
text-shadow: none;
2413
icon-shadow: none;
2414
box-shadow: 0 0 transparent;
2415
}
2416
.keyboard-key:hover, .keyboard-key:checked {
2418
color: rgba(0, 0, 0, 0.87);
2419
background-color: #FAFAFA;
2420
border-color: transparent;
2421
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2422
text-shadow: none;
2423
icon-shadow: none;
2424
}
2425
.keyboard-key:active {
2427
color: rgba(0, 0, 0, 0.87);
2428
background-color: rgba(188, 188, 188, 0.961);
2429
border-color: transparent;
2430
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2431
text-shadow: none;
2432
icon-shadow: none;
2433
}
2434
.keyboard-key:grayed {
2436
background-color: rgba(0, 0, 0, 0.3);
2437
color: #FFFFFF;
2438
border-color: rgba(0, 0, 0, 0.3);
2439
}
2440
.keyboard-subkeys {
2442
color: inherit;
2443
padding: 5px;
2444
-arrow-border-radius: 0;
2445
-arrow-background-color: transparent;
2446
-arrow-border-width: 0;
2447
-arrow-border-color: transparent;
2448
-arrow-base: 0;
2449
-arrow-rise: 0;
2450
-boxpointer-gap: 5px;
2451
background-color: #FAFAFA;
2452
border-radius: 2px;
2453
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2454
}
2455
.candidate-popup-content {
2457
padding: 8px;
2458
spacing: 0;
2459
}
2460
.candidate-index {
2462
padding: 0 4px 0 0;
2463
color: rgba(0, 0, 0, 0.38);
2464
}
2465
.candidate-box:selected .candidate-index {
2467
color: rgba(255, 255, 255, 0.5);
2468
}
2469
.candidate-box {
2471
transition-duration: 0s;
2472
min-height: 32px;
2473
padding: 0 8px;
2474
border-radius: 2px;
2475
}
2476
.candidate-box:hover {
2478
background-color: rgba(0, 0, 0, 0.12);
2479
color: rgba(0, 0, 0, 0.87);
2480
}
2481
.candidate-box:active {
2483
background-color: rgba(0, 0, 0, 0.26);
2484
color: rgba(0, 0, 0, 0.87);
2485
}
2486
.candidate-box:selected {
2488
background-color: #42A5F5;
2489
color: #FFFFFF;
2490
}
2491
.candidate-page-button-box {
2493
height: 32px;
2494
}
2495
.vertical .candidate-page-button-box {
2497
padding-top: 0;
2498
}
2499
.horizontal .candidate-page-button-box {
2501
padding-left: 0;
2502
}
2503
.candidate-page-button {
2505
min-width: 32px;
2506
min-height: 32px;
2507
padding: 0;
2508
}
2509
.candidate-page-button-previous {
2511
border-radius: 2px;
2512
border-right-width: 0;
2513
}
2514
.candidate-page-button-next {
2516
border-radius: 2px;
2517
}
2518
.candidate-page-button-icon {
2520
icon-size: 1.14286em;
2521
}
2522
/* Auth Dialogs & Screen Shield */
2524
.framed-user-icon {
2525
background-size: contain;
2526
border: none;
2527
color: #FFFFFF;
2528
border-radius: 2px;
2529
}
2530
.framed-user-icon:hover {
2532
border-color: #FFFFFF;
2533
color: #FFFFFF;
2534
}
2535
.login-dialog-banner-view {
2537
padding-top: 24px;
2538
max-width: 23em;
2539
}
2540
.login-dialog {
2542
border: none;
2543
background-color: transparent;
2544
}
2545
.login-dialog StEntry {
2547
color: #FFFFFF;
2548
selection-background-color: rgba(255, 255, 255, 0.3);
2549
selected-color: #FFFFFF;
2550
background-color: rgba(0, 0, 0, 0.01);
2551
border-color: transparent;
2552
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
2553
}
2554
.login-dialog StEntry:focus {
2556
border-color: transparent;
2557
box-shadow: inset 0 -2px #FFFFFF;
2558
}
2559
.login-dialog StEntry:insensitive {
2561
color: rgba(0, 0, 0, 0.38);
2562
border-color: transparent;
2563
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
2564
color: rgba(255, 255, 255, 0.5);
2565
}
2566
.login-dialog .modal-dialog-button-box {
2568
spacing: 3px;
2569
}
2570
.login-dialog .modal-dialog-button {
2572
padding: 0 16px;
2573
color: rgba(255, 255, 255, 0.7);
2574
background-color: transparent;
2575
border-color: transparent;
2576
box-shadow: 0 0 transparent;
2577
text-shadow: none;
2578
icon-shadow: none;
2579
}
2580
.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus {
2582
color: #FFFFFF;
2583
background-color: rgba(255, 255, 255, 0.12);
2584
border-color: transparent;
2585
box-shadow: 0 0 transparent;
2586
text-shadow: none;
2587
icon-shadow: none;
2588
}
2589
.login-dialog .modal-dialog-button:active {
2591
color: #FFFFFF;
2592
background-color: rgba(255, 255, 255, 0.3);
2593
border-color: transparent;
2594
box-shadow: 0 0 transparent;
2595
text-shadow: none;
2596
icon-shadow: none;
2597
}
2598
.login-dialog .modal-dialog-button:insensitive {
2600
color: rgba(255, 255, 255, 0.3);
2601
background-color: transparent;
2602
border-color: transparent;
2603
box-shadow: 0 0 transparent;
2604
text-shadow: none;
2605
icon-shadow: none;
2606
}
2607
.login-dialog .modal-dialog-button:default {
2609
color: #FFFFFF;
2610
background-color: #FF4081;
2611
border-color: transparent;
2612
box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2613
text-shadow: none;
2614
icon-shadow: none;
2615
}
2616
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
2618
color: #FFFFFF;
2619
background-color: #FF4081;
2620
border-color: transparent;
2621
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2622
text-shadow: none;
2623
icon-shadow: none;
2624
}
2625
.login-dialog .modal-dialog-button:default:active {
2627
color: #FFFFFF;
2628
background-color: #ff79a7;
2629
border-color: transparent;
2630
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
2631
text-shadow: none;
2632
icon-shadow: none;
2633
}
2634
.login-dialog .modal-dialog-button:default:insensitive {
2636
color: rgba(255, 255, 255, 0.5);
2637
background-color: rgba(255, 255, 255, 0.12);
2638
border-color: transparent;
2639
box-shadow: 0 0 transparent;
2640
text-shadow: none;
2641
icon-shadow: none;
2642
}
2643
.login-dialog-logo-bin {
2645
padding: 24px 0px;
2646
}
2647
.login-dialog-banner {
2649
color: rgba(255, 255, 255, 0.7);
2650
}
2651
.login-dialog-button-box {
2653
spacing: 5px;
2654
}
2655
.login-dialog-message-warning {
2657
color: #FF6D00;
2658
}
2659
.login-dialog-message-hint {
2661
padding-top: 0;
2662
padding-bottom: 20px;
2663
}
2664
.login-dialog-user-selection-box {
2666
padding: 100px 0px;
2667
}
2668
.login-dialog-not-listed-label {
2670
padding-left: 2px;
2671
}
2672
.login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
2674
.login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
2675
color: #FFFFFF;
2676
}
2677
.login-dialog-not-listed-label {
2679
font-size: 1em;
2680
font-weight: bold;
2681
color: rgba(255, 255, 255, 0.7);
2682
padding-top: 1em;
2683
}
2684
.login-dialog-not-listed-label:hover {
2686
color: #FFFFFF;
2687
}
2688
.login-dialog-not-listed-label:focus {
2690
background-color: rgba(255, 255, 255, 0.12);
2691
}
2692
.login-dialog-user-list-view {
2694
-st-vfade-offset: 1em;
2695
}
2696
.login-dialog-user-list {
2698
spacing: 12px;
2699
padding: .2em;
2700
width: 23em;
2701
}
2702
.login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
2704
background-color: rgba(255, 255, 255, 0.12);
2705
color: #FFFFFF;
2706
}
2707
.login-dialog-user-list:expanded .login-dialog-user-list-item:hover {
2709
background-color: rgba(255, 255, 255, 0.12);
2710
color: #FFFFFF;
2711
}
2712
.login-dialog-user-list:expanded .login-dialog-user-list-item:active {
2714
background-color: rgba(255, 255, 255, 0.3);
2715
color: #FFFFFF;
2716
}
2717
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
2719
border-right: 2px solid #FFFFFF;
2720
}
2721
.login-dialog-user-list-item {
2723
border-radius: 2px;
2724
padding: 4px 4px 0;
2725
color: rgba(255, 255, 255, 0.7);
2726
}
2727
.login-dialog-user-list-item:ltr {
2729
padding-right: 1em;
2730
}
2731
.login-dialog-user-list-item:rtl {
2733
padding-left: 1em;
2734
}
2735
.login-dialog-user-list-item:hover {
2737
background-color: rgba(255, 255, 255, 0.12);
2738
color: #FFFFFF;
2739
}
2740
.login-dialog-user-list-item:active {
2742
background-color: rgba(255, 255, 255, 0.3);
2743
color: #FFFFFF;
2744
}
2745
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
2747
height: 2px;
2748
margin: 2px 0 0 0;
2749
background-color: #FFFFFF;
2750
}
2751
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
2753
background-color: #FFFFFF;
2754
}
2755
.login-dialog-username,
2757
.user-widget-label {
2758
color: #FFFFFF;
2759
font-size: 15pt;
2760
font-weight: 500;
2761
text-align: left;
2762
padding-left: 15px;
2763
}
2764
.user-widget-label:ltr {
2766
padding-left: 18px;
2767
}
2768
.user-widget-label:rtl {
2770
padding-right: 18px;
2771
}
2772
.login-dialog-prompt-layout {
2774
padding-top: 24px;
2775
padding-bottom: 12px;
2776
spacing: 8px;
2777
width: 23em;
2778
}
2779
.login-dialog-prompt-label {
2781
color: rgba(255, 255, 255, 0.5);
2782
font-size: 1em;
2783
padding-top: 1em;
2784
}
2785
.login-dialog-session-list-button StIcon {
2787
icon-size: 1.25em;
2788
}
2789
.login-dialog-session-list-button {
2791
color: rgba(255, 255, 255, 0.7);
2792
}
2793
.login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
2795
color: #FFFFFF;
2796
}
2797
.login-dialog-session-list-button:active {
2799
color: #FFFFFF;
2800
}
2801
.screen-shield-arrows {
2803
padding-bottom: 3em;
2804
}
2805
.screen-shield-arrows Gjs_Arrow {
2807
color: white;
2808
width: 80px;
2809
height: 48px;
2810
-arrow-thickness: 12px;
2811
-arrow-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2812
}
2813
.screen-shield-clock {
2815
color: white;
2816
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2817
font-weight: normal;
2818
text-align: center;
2819
padding-bottom: 1.5em;
2820
}
2821
.screen-shield-clock-time {
2823
font-size: 112px;
2824
font-weight: 300;
2825
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
2826
}
2827
.screen-shield-clock-date {
2829
font-size: 45px;
2830
font-weight: 400;
2831
}
2832
.screen-shield-notifications-container {
2834
spacing: 6px;
2835
width: 30em;
2836
background-color: transparent;
2837
max-height: 500px;
2838
}
2839
.screen-shield-notifications-container .summary-notification-stack-scrollview {
2841
padding-top: 0;
2842
padding-bottom: 0;
2843
}
2844
.screen-shield-notifications-container .notification,
2846
.screen-shield-notifications-container .screen-shield-notification-source {
2847
padding: 8px;
2848
border: none;
2849
background-color: rgba(0, 0, 0, 0.3);
2850
color: #FFFFFF;
2851
border-radius: 2px;
2852
}
2853
.screen-shield-notifications-container .notification {
2855
margin-right: 16px;
2856
}
2857
.screen-shield-notification-label {
2859
min-height: 22px;
2860
padding: 2px 0px 0px 16px;
2861
font-weight: bold;
2862
}
2863
.screen-shield-notification-count-text {
2865
min-height: 22px;
2866
padding: 2px 0px 0px 16px;
2867
color: rgba(255, 255, 255, 0.7);
2868
}
2869
#panel.lock-screen {
2871
background-color: rgba(0, 0, 0, 0.3);
2872
}
2873
.screen-shield-background {
2875
background: black;
2876
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
2877
}
2878
#lockDialogGroup {
2880
background: #607D8B url("assets/noise-texture.svg");
2881
background-size: cover;
2882
}
2883
#LookingGlassDialog {
2885
background-color: #FAFAFA;
2886
spacing: 4px;
2887
padding: 0;
2888
border: none;
2889
border-radius: 2px;
2890
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
2891
}
2892
#LookingGlassDialog > #Toolbar {
2894
padding: 0 8px;
2895
border: none;
2896
border-radius: 0;
2897
background-color: rgba(250, 250, 250, 0.01);
2898
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
2899
}
2900
#LookingGlassDialog .labels {
2902
spacing: 0;
2903
}
2904
#LookingGlassDialog .notebook-tab {
2906
-natural-hpadding: 12px;
2907
-minimum-hpadding: 6px;
2908
font-weight: bold;
2909
color: rgba(0, 0, 0, 0.38);
2910
transition-duration: 150ms;
2911
padding-left: 16px;
2912
padding-right: 16px;
2913
min-height: 36px;
2914
padding: 0 32px;
2915
}
2916
#LookingGlassDialog .notebook-tab:hover {
2918
box-shadow: inset 0 -2px 0px rgba(0, 0, 0, 0.26);
2919
color: rgba(0, 0, 0, 0.87);
2920
text-shadow: none;
2921
}
2922
#LookingGlassDialog .notebook-tab:selected {
2924
border-bottom-width: 0;
2925
border-color: transparent;
2926
background-color: rgba(250, 250, 250, 0.01);
2927
box-shadow: inset 0 -2px 0px #42A5F5;
2928
color: rgba(0, 0, 0, 0.87);
2929
text-shadow: none;
2930
}
2931
#LookingGlassDialog StBoxLayout#EvalBox {
2933
padding: 4px;
2934
spacing: 4px;
2935
}
2936
#LookingGlassDialog StBoxLayout#ResultsArea {
2938
spacing: 4px;
2939
}
2940
.lg-dialog StEntry {
2942
selection-background-color: #42A5F5;
2943
selected-color: #FFFFFF;
2944
}
2945
.lg-dialog .shell-link {
2947
color: #42A5F5;
2948
}
2949
.lg-dialog .shell-link:hover {
2951
color: #42A5F5;
2952
}
2953
.lg-completions-text {
2955
font-size: 1em;
2956
font-style: italic;
2957
}
2958
.lg-obj-inspector-title {
2960
spacing: 4px;
2961
}
2962
.lg-obj-inspector-button {
2964
min-height: 36px;
2965
padding: 0 16px;
2966
border: none;
2967
border-radius: 2px;
2968
font-size: 10.5pt;
2969
font-weight: 500;
2970
color: rgba(0, 0, 0, 0.54);
2971
background-color: transparent;
2972
border-color: transparent;
2973
box-shadow: 0 0 transparent;
2974
text-shadow: none;
2975
icon-shadow: none;
2976
}
2977
.lg-obj-inspector-button:hover {
2979
color: rgba(0, 0, 0, 0.87);
2980
background-color: rgba(0, 0, 0, 0.12);
2981
border-color: transparent;
2982
box-shadow: 0 0 transparent;
2983
text-shadow: none;
2984
icon-shadow: none;
2985
}
2986
.lg-obj-inspector-button:active {
2988
color: rgba(0, 0, 0, 0.87);
2989
background-color: rgba(0, 0, 0, 0.26);
2990
border-color: transparent;
2991
box-shadow: 0 0 transparent;
2992
text-shadow: none;
2993
icon-shadow: none;
2994
}
2995
.lg-obj-inspector-button:insensitive {
2997
color: rgba(0, 0, 0, 0.26);
2998
background-color: transparent;
2999
border-color: transparent;
3000
box-shadow: 0 0 transparent;
3001
text-shadow: none;
3002
icon-shadow: none;
3003
}
3004
.lg-obj-inspector-button:focus {
3006
color: rgba(0, 0, 0, 0.87);
3007
text-shadow: none;
3008
icon-shadow: none;
3009
box-shadow: 0 0 transparent;
3010
}
3011
.lg-obj-inspector-button:hover {
3013
border: none;
3014
}
3015
#lookingGlassExtensions {
3017
padding: 4px;
3018
}
3019
.lg-extensions-list {
3021
padding: 4px;
3022
spacing: 6px;
3023
}
3024
.lg-extension {
3026
border: none;
3027
border-radius: 2px;
3028
padding: 4px;
3029
}
3030
.lg-extension-name {
3032
font-size: 18pt;
3033
font-weight: 400;
3034
}
3035
.lg-extension-meta {
3037
spacing: 6px;
3038
}
3039
#LookingGlassPropertyInspector {
3041
background: #FAFAFA;
3042
border: none;
3043
border-radius: 2px;
3044
padding: 6px;
3045
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.44);
3046
}
3047
/* Dash to Dock */
3049
#dashtodockContainer #dash {
3050
background-color: rgba(0, 0, 0, 0.6);
3051
}
3052
#dashtodockContainer:overview #dash {
3054
background-color: rgba(255, 255, 255, 0.1);
3055
}
3056
#dashtodockContainer.extended:overview #dash {
3058
background-color: transparent;
3059
}
3060
#dashtodockContainer.left #dash,
3062
#dashtodockContainer.right #dash {
3063
padding: 3px 0;
3064
}
3065
#dashtodockContainer.top #dash,
3067
#dashtodockContainer.bottom #dash {
3068
padding: 0 3px;
3069
}
3070
#dashtodockContainer.extended #dash {
3072
padding: 0;
3073
border-radius: 0;
3074
}
3075
#dashtodockContainer.left .dash-item-container > StWidget,
3077
#dashtodockContainer.right .dash-item-container > StWidget,
3078
#dashtodockContainer.extended.left .dash-item-container > StWidget,
3079
#dashtodockContainer.extended.right .dash-item-container > StWidget {
3080
padding: 3px 6px;
3081
}
3082
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
3084
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
3085
padding: 6px 6px 3px 6px;
3086
}
3087
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
3089
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
3090
padding: 3px 6px 6px 6px;
3091
}
3092
#dashtodockContainer.top .dash-item-container > StWidget,
3094
#dashtodockContainer.bottom .dash-item-container > StWidget,
3095
#dashtodockContainer.extended.top .dash-item-container > StWidget,
3096
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
3097
padding: 6px 3px;
3098
}
3099
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
3101
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
3102
padding: 6px 3px 6px 6px;
3103
}
3104
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
3106
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
3107
padding: 6px 6px 6px 3px;
3108
}
3109
#dashtodockContainer .app-well-app-running-dot {
3111
background-color: transparent;
3112
}
3113
#dashtodockContainer .dash-item-container > StWidget {
3115
background-size: cover;
3116
}
3117
#dashtodockContainer.left .dash-item-container > StWidget.running1 {
3119
background-image: url("assets/dash/left-running1.svg");
3120
}
3121
#dashtodockContainer.left .dash-item-container > StWidget.running1.focused {
3123
background-image: url("assets/dash/left-running1-focused.svg");
3124
}
3125
#dashtodockContainer.left .dash-item-container > StWidget.running2 {
3127
background-image: url("assets/dash/left-running2.svg");
3128
}
3129
#dashtodockContainer.left .dash-item-container > StWidget.running2.focused {
3131
background-image: url("assets/dash/left-running2-focused.svg");
3132
}
3133
#dashtodockContainer.left .dash-item-container > StWidget.running3 {
3135
background-image: url("assets/dash/left-running3.svg");
3136
}
3137
#dashtodockContainer.left .dash-item-container > StWidget.running3.focused {
3139
background-image: url("assets/dash/left-running3-focused.svg");
3140
}
3141
#dashtodockContainer.left .dash-item-container > StWidget.running4 {
3143
background-image: url("assets/dash/left-running4.svg");
3144
}
3145
#dashtodockContainer.left .dash-item-container > StWidget.running4.focused {
3147
background-image: url("assets/dash/left-running4-focused.svg");
3148
}
3149
#dashtodockContainer.right .dash-item-container > StWidget.running1 {
3151
background-image: url("assets/dash/right-running1.svg");
3152
}
3153
#dashtodockContainer.right .dash-item-container > StWidget.running1.focused {
3155
background-image: url("assets/dash/right-running1-focused.svg");
3156
}
3157
#dashtodockContainer.right .dash-item-container > StWidget.running2 {
3159
background-image: url("assets/dash/right-running2.svg");
3160
}
3161
#dashtodockContainer.right .dash-item-container > StWidget.running2.focused {
3163
background-image: url("assets/dash/right-running2-focused.svg");
3164
}
3165
#dashtodockContainer.right .dash-item-container > StWidget.running3 {
3167
background-image: url("assets/dash/right-running3.svg");
3168
}
3169
#dashtodockContainer.right .dash-item-container > StWidget.running3.focused {
3171
background-image: url("assets/dash/right-running3-focused.svg");
3172
}
3173
#dashtodockContainer.right .dash-item-container > StWidget.running4 {
3175
background-image: url("assets/dash/right-running4.svg");
3176
}
3177
#dashtodockContainer.right .dash-item-container > StWidget.running4.focused {
3179
background-image: url("assets/dash/right-running4-focused.svg");
3180
}
3181
#dashtodockContainer.top .dash-item-container > StWidget.running1 {
3183
background-image: url("assets/dash/top-running1.svg");
3184
}
3185
#dashtodockContainer.top .dash-item-container > StWidget.running1.focused {
3187
background-image: url("assets/dash/top-running1-focused.svg");
3188
}
3189
#dashtodockContainer.top .dash-item-container > StWidget.running2 {
3191
background-image: url("assets/dash/top-running2.svg");
3192
}
3193
#dashtodockContainer.top .dash-item-container > StWidget.running2.focused {
3195
background-image: url("assets/dash/top-running2-focused.svg");
3196
}
3197
#dashtodockContainer.top .dash-item-container > StWidget.running3 {
3199
background-image: url("assets/dash/top-running3.svg");
3200
}
3201
#dashtodockContainer.top .dash-item-container > StWidget.running3.focused {
3203
background-image: url("assets/dash/top-running3-focused.svg");
3204
}
3205
#dashtodockContainer.top .dash-item-container > StWidget.running4 {
3207
background-image: url("assets/dash/top-running4.svg");
3208
}
3209
#dashtodockContainer.top .dash-item-container > StWidget.running4.focused {
3211
background-image: url("assets/dash/top-running4-focused.svg");
3212
}
3213
#dashtodockContainer.bottom .dash-item-container > StWidget.running1 {
3215
background-image: url("assets/dash/bottom-running1.svg");
3216
}
3217
#dashtodockContainer.bottom .dash-item-container > StWidget.running1.focused {
3219
background-image: url("assets/dash/bottom-running1-focused.svg");
3220
}
3221
#dashtodockContainer.bottom .dash-item-container > StWidget.running2 {
3223
background-image: url("assets/dash/bottom-running2.svg");
3224
}
3225
#dashtodockContainer.bottom .dash-item-container > StWidget.running2.focused {
3227
background-image: url("assets/dash/bottom-running2-focused.svg");
3228
}
3229
#dashtodockContainer.bottom .dash-item-container > StWidget.running3 {
3231
background-image: url("assets/dash/bottom-running3.svg");
3232
}
3233
#dashtodockContainer.bottom .dash-item-container > StWidget.running3.focused {
3235
background-image: url("assets/dash/bottom-running3-focused.svg");
3236
}
3237
#dashtodockContainer.bottom .dash-item-container > StWidget.running4 {
3239
background-image: url("assets/dash/bottom-running4.svg");
3240
}
3241
#dashtodockContainer.bottom .dash-item-container > StWidget.running4.focused {
3243
background-image: url("assets/dash/bottom-running4-focused.svg");
3244
}
3245
/* Simple Dock */
3247
#dash:desktop {
3248
background-color: rgba(0, 0, 0, 0.6);
3249
}
3250
/* GPaste */
3252
.popup-menu .search-entry {
3253
color: rgba(0, 0, 0, 0.87);
3254
selection-background-color: #42A5F5;
3255
selected-color: #FFFFFF;
3256
background-color: rgba(250, 250, 250, 0.01);
3257
border-color: transparent;
3258
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
3259
}
3260
.popup-menu .search-entry:focus {
3262
border-color: transparent;
3263
box-shadow: inset 0 -2px #42A5F5;
3264
color: rgba(0, 0, 0, 0.87);
3265
}
3266
.popup-menu .search-entry .search-entry-icon {
3268
color: rgba(0, 0, 0, 0.38);
3269
}
3270
.popup-menu .search-entry:hover .search-entry-icon, .popup-menu .search-entry:focus .search-entry-icon {
3272
color: rgba(0, 0, 0, 0.87);
3273
}
3274