ASCII text
1
/* Copyright 2009, Red Hat, Inc.
2
*
3
* Portions adapted from Mx's data/style/default.css
4
* Copyright 2009 Intel Corporation
5
*
6
* This program is free software; you can redistribute it and/or modify it
7
* under the terms and conditions of the GNU Lesser General Public License,
8
* version 2.1, as published by the Free Software Foundation.
9
*
10
* This program is distributed in the hope it will be useful, but WITHOUT ANY
11
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
12
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for
13
* more details.
14
*
15
* You should have received a copy of the GNU Lesser General Public License
16
* along with this program; if not, write to the Free Software Foundation,
17
* Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
18
*/
19
* {
21
transition-duration: 0.2s;
22
transition-timing-function : cubic-bezier(0.4, 0, 0.2, 1);
23
}
24
/* Text Styles */
26
/* default text style */
28
stage {
29
font-family: "M+ 1c", cantarell, sans-serif;
30
font-size: 11pt;
31
color: rgba(0, 0, 0, 0.8);
32
}
33
/* links */
35
.shell-link {
36
border-radius: 2px;
37
color: #3498db;
38
text-decoration: underline;
39
}
40
.shell-link:hover {
42
background-color: rgba(52, 152, 219, 0.1);
43
color: #3498db;
44
}
45
.shell-link:active {
47
background-color: rgba(52, 152, 219, 0.2);
48
color: #3498db;
49
}
50
/* small */
52
.app-well-menu,
53
.run-dialog-error-label {
54
font-size: 9pt;
55
}
56
/* small bold */
58
.dash-label,
59
.window-caption,
60
.switcher-list,
61
.app-well-app > .overview-icon,
62
.show-apps > .overview-icon,
63
.grid-search-result .overview-icon {
64
font-size: 9pt;
65
font-weight: bold;
66
}
67
/* Scroll Bars */
69
StScrollBar {
71
padding: 0px;
72
}
73
StScrollView.vfade {
75
-st-vfade-offset: 68px;
76
}
77
StScrollView.hfade {
79
-st-hfade-offset: 68px;
80
}
81
StScrollView StScrollBar {
83
min-width: 16px;
84
min-height: 16px;
85
}
86
StScrollBar StBin#trough {
88
background-gradient-start: rgba(0, 0, 0, 0.08);
89
background-gradient-end: rgba(0, 0, 0, 0.08);
90
background-gradient-direction: vertical;
91
border: 4px solid transparent;
92
border-radius: 8px;
93
}
94
StScrollBar StButton#vhandle {
96
background-gradient-start: rgba(0, 0, 0, 0.24);
97
background-gradient-end: rgba(0, 0, 0, 0.24);
98
background-gradient-direction: vertical;
99
border: 4px solid transparent;
100
border-radius: 8px;
101
}
102
StScrollBar StButton#hhandle {
104
background-gradient-start: rgba(0, 0, 0, 0.24);
105
background-gradient-end: rgba(0, 0, 0, 0.24);
106
background-gradient-direction: vertical;
107
border: 4px solid transparent;
108
border-radius: 8px;
109
}
110
StScrollBar StButton#hhandle:hover,
112
StScrollBar StButton#vhandle:hover {
113
background-gradient-start: rgba(0, 0, 0, 0.32);
114
background-gradient-end: rgba(0, 0, 0, 0.32);
115
background-gradient-direction: vertical;
116
border: 4px solid transparent;
117
}
118
StScrollBar StButton#hhandle:active,
120
StScrollBar StButton#vhandle:active {
121
background-gradient-start: rgba(0, 0, 0, 0.4);
122
background-gradient-end: rgba(0, 0, 0, 0.4);
123
background-gradient-direction: vertical;
124
border: 4px solid transparent;
125
}
126
/* Check Boxes */
128
.check-box StBoxLayout {
130
spacing: .8em;
131
}
132
.check-box StBin {
134
width: 20px;
135
height: 20px;
136
border: none;
137
border-radius: 2px;
138
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
139
background-image: none;
140
background-color: #fff;
141
}
142
.check-box:hover StBin {
144
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
145
background-color: #fff;
146
}
147
.check-box:active StBin {
149
background-color: #ddd;
150
}
151
.check-box:focus StBin {
153
border: none;
154
background-image: none;
155
}
156
.check-box:checked StBin {
158
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
159
background-image: url("object-select-symbolic.svg");
160
background-color: #2ecc71;
161
}
162
.check-box:checked:hover StBin {
164
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
165
background-color: #2ecc71;
166
}
167
.check-box:checked:active StBin {
169
background-color: #58D68D;
170
}
171
.check-box:focus:checked StBin {
173
border: none;
174
background-image: url("object-select-symbolic.svg");
175
}
176
/* Slider */
178
.slider {
180
height: 20px;
181
-slider-height: 4px;
182
-slider-background-color: rgba(0, 0, 0, 0.16);
183
-slider-border-color: transparent;
184
-slider-active-background-color: #3498db;
185
-slider-active-border-color: transparent;
186
-slider-border-width: 0px;
187
-slider-handle-radius: 8px;
188
color: #3498db;
189
}
190
/* PopupMenu */
192
.popup-menu-ornament {
194
text-align: right;
195
width: 16px;
196
height: 16px;
197
}
198
.popup-menu-boxpointer,
200
.candidate-popup-boxpointer {
201
-arrow-border-radius: 0;
202
-arrow-background-color: transparent;
203
-arrow-border-width: 0;
204
-arrow-border-color: transparent;
205
-arrow-base: 0;
206
-arrow-rise: 4px;
207
border-radius: 4px;
208
background-color: rgba(255, 255, 255, 0.95);
209
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
210
}
211
.popup-menu-boxpointer.fallback-app-menu {
213
-arrow-border-radius: 4px;
214
-arrow-background-color: #ededed;
215
-arrow-border-width: 0;
216
-arrow-border-color: #a6a6a6;
217
-arrow-base: 24px;
218
-arrow-rise: 12px;
219
}
220
.popup-menu-boxpointer.fallback-app-menu.dark {
222
-arrow-background-color: #3f4747;
223
-arrow-border-color: #282b2b;
224
}
225
.popup-menu {
228
min-width: 200px;
229
}
230
.popup-menu-arrow {
232
width: 16px;
233
height: 16px;
234
}
235
.popup-submenu-menu-item:open,
237
.popup-submenu-menu-item:open:active {
238
background-color: #3498db;
239
color: white;
240
}
241
.fallback-app-menu .popup-submenu-menu-item:open {
243
background-color: #888888;
244
color: white;
245
}
246
.fallback-app-menu.dark .popup-submenu-menu-item:open {
248
background-color: #333333;
249
}
250
.popup-sub-menu {
252
background-gradient-start: rgba(0, 0, 0, 0.02);
253
background-gradient-end: rgba(0, 0, 0, 0.02);
254
background-gradient-direction: vertical;
255
box-shadow: none;
256
}
257
.fallback-app-menu .popup-sub-menu {
259
background-gradient-start: #dddddd;
260
background-gradient-end: #dfdfdf;
261
background-gradient-direction: vertical;
262
box-shadow: none;
263
}
264
.fallback-app-menu.dark .popup-sub-menu {
266
background-gradient-start: #474747;
267
background-gradient-end: #4b4b4b;
268
background-gradient-direction: vertical;
269
box-shadow: none;
270
}
271
.popup-sub-menu:scrolled .popup-menu-item:ltr {
273
padding-right: 0em;
274
}
275
.popup-sub-menu:scrolled .popup-menu-item:rtl {
277
padding-left: 0em;
278
}
279
.popup-sub-menu StScrollBar {
281
padding: 0px;
282
}
283
.popup-sub-menu StScrollBar StBin#trough {
285
border-width: 4px;
286
}
287
.popup-sub-menu StScrollBar StBin#vhandle {
289
border-width: 4px;
290
}
291
.app-well-menu {
293
max-width: 400px;
294
}
295
/* The remaining popup-menu sizing is all done in ems, so that if you
297
* override .popup-menu.font-size, everything else will scale with it.
298
*/
299
.popup-menu-content {
300
padding: 6px 0;
301
}
302
.popup-menu-item {
304
spacing: 12px;
305
}
306
.popup-menu-item:ltr {
308
padding: 5px 1.75em 6px 0;
309
}
310
.popup-menu-item:rtl {
312
padding: 5px 0 6px 1.75em;
313
}
314
.popup-menu-item:active {
316
background-color: rgba(0, 0, 0, 0.08);
317
}
318
.popup-menu-item:insensitive {
320
color: rgba(0, 0, 0, 0.32);
321
}
322
.fallback-app-menu .popup-menu-item {
324
color: #43484a;
325
}
326
.fallback-app-menu .popup-menu-item:active {
328
color: white;
329
background-color: #4689cd;
330
}
331
.fallback-app-menu .popup-menu-item:insensitive {
333
color: gray;
334
}
335
.fallback-app-menu.dark .popup-menu-item {
337
color: white;
338
}
339
.fallback-app-menu.dark .popup-menu-item:active {
341
background-color: #445f7d;
342
}
343
.fallback-app-menu.dark .popup-menu-item:insensitive {
345
color: #9f9f9f;
346
}
347
.popup-separator-menu-item {
349
-gradient-height: 1px;
350
-gradient-start: rgba(0,0,0,0.16);
351
-gradient-end: rgba(0,0,0,0.16);
352
-margin-horizontal: 0;
353
height: 1px;
354
padding: 8px 0px;
355
}
356
.fallback-app-menu .popup-separator-menu-item {
358
-gradient-start: #a0a2a3;
359
-gradient-end: #a0a2a3;
360
-margin-horizontal: 0;
361
}
362
.fallback-app-menu.dark .popup-separator-menu-item {
364
-gradient-start: #818584;
365
-gradient-end: #818584;
366
}
367
.popup-status-menu-item {
369
font-weight: normal;
370
color: rgba(0, 0, 0, 0.4);
371
}
372
.popup-submenu-menu-item:open .popup-status-menu-item {
374
color: rgba(255, 255, 255, 0.5);
375
}
376
.popup-inactive-menu-item, .popup-inactive-menu-item:insensitive {
378
color: rgba(0, 0, 0, 0.8);
379
}
380
.popup-menu-icon {
382
icon-size: 16px;
383
}
384
/* Switches */
386
.toggle-switch {
387
width: 48px;
388
height: 20px;
389
}
390
.toggle-switch-us {
392
background-image: url("switch-off.svg");
393
background-size: contain;
394
}
395
.toggle-switch-us:checked {
396
background-image: url("switch-on.svg");
397
background-size: contain;
398
}
399
.toggle-switch-intl {
401
background-image: url("switch-off.svg");
402
background-size: contain;
403
}
404
.toggle-switch-intl:checked {
405
background-image: url("switch-on.svg");
406
background-size: contain;
407
}
408
/* Network */
410
.nm-dialog {
412
max-height: 500px;
413
min-height: 450px;
414
min-width: 470px;
415
}
416
.nm-dialog-content {
418
spacing: 20px;
419
}
420
.nm-dialog-header-hbox {
422
spacing: 10px;
423
}
424
.nm-dialog-airplane-box {
426
spacing: 12px;
427
}
428
.nm-dialog-airplane-headline {
430
font-size: 1.1em;
431
font-weight: bold;
432
text-align: center;
433
}
434
.nm-dialog-airplane-text {
436
color: rgba(0, 0, 0, 0.4);
437
}
438
.nm-dialog-header-icon {
440
icon-size: 32px;
441
}
442
.nm-dialog-scroll-view {
444
border: 1px solid rgba(0, 0, 0, 0.16);
445
border-radius: 0;
446
}
447
.nm-dialog-header {
449
font-weight: bold;
450
}
451
.nm-dialog-item {
453
font-size: 12pt;
454
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
455
padding: 12px;
456
spacing: 20px;
457
}
458
.nm-dialog-item:selected {
460
background-color: #3498db;
461
color: white;
462
}
463
.nm-dialog-icons {
465
spacing: .5em;
466
}
467
.nm-dialog-icon {
469
icon-size: 16px;
470
}
471
.no-networks-label {
473
color: rgba(0, 0, 0, 0.4);
474
}
475
.no-networks-box {
477
spacing: 12px;
478
}
479
/* Buttons */
481
.candidate-page-button,
483
.notification-button,
484
.notification-icon-button,
485
.hotplug-notification-item,
486
.hotplug-resident-eject-button,
487
.modal-dialog-button,
488
.app-view-control {
489
border: none;
490
background-gradient-direction: vertical;
491
background-gradient-start: rgba(0, 0, 0, 0);
492
background-gradient-end: rgba(0, 0, 0, 0);
493
}
494
.candidate-page-button:hover,
496
.notification-button:hover,
497
.notification-icon-button:hover,
498
.hotplug-notification-item:hover,
499
.hotplug-resident-eject-button:hover,
500
.modal-dialog-button:hover,
501
.app-view-control:hover {
502
background-gradient-direction: vertical;
503
background-gradient-start: rgba(0, 0, 0, 0.08);
504
background-gradient-end: rgba(0, 0, 0, 0.08);
505
}
506
.candidate-page-button:active,
508
.candidate-page-button:pressed,
509
.notification-button:active,
510
.notification-icon-button:active,
511
.hotplug-notification-item:active,
512
.hotplug-resident-eject-button:active,
513
.modal-dialog-button:active,
514
.modal-dialog-button:pressed,
515
.app-view-control:checked {
516
background-gradient-direction: vertical;
517
background-gradient-start: rgba(0, 0, 0, 0.16);
518
background-gradient-end: rgba(0, 0, 0, 0.16);
519
}
520
.candidate-page-button:insensitive,
522
.notification-button:insensitive,
523
.notification-icon-button:insensitive,
524
.hotplug-notification-item:insensitive,
525
.hotplug-resident-eject-button:insensitive,
526
.modal-dialog-button:insensitive,
527
.app-view-control:insensitive {
528
background-gradient-direction: vertical;
529
background-gradient-start: rgba(0, 0, 0, 0);
530
background-gradient-end: rgba(0, 0, 0, 0);
531
color: rgba(0, 0, 0, 0.32);
532
}
533
.candidate-page-button:focus,
535
.notification-button:focus,
536
.notification-icon-button:focus,
537
.hotplug-notification-item:focus,
538
.hotplug-resident-eject-button:focus,
539
.modal-dialog-button:focus,
540
.app-view-control:focus {
541
transition-duration: 0.2s;
542
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.16);
543
}
544
.candidate-page-button:hover:focus,
546
.notification-button:hover:focus,
547
.notification-icon-button:hover:focus,
548
.hotplug-notification-item:hover:focus,
549
.hotplug-resident-eject-button:hover:focus,
550
.modal-dialog-button:hover:focus,
551
.app-view-control:hover:focus {
552
transition-duration: 0.2s;
553
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08);
554
}
555
.candidate-page-button:active:focus,
557
.notification-button:active:focus,
558
.notification-icon-button:active:focus,
559
.hotplug-notification-item:active:focus,
560
.hotplug-resident-eject-button:active:focus,
561
.modal-dialog-button:active:focus,
562
.app-view-control:active:focus {
563
transition-duration: 0.2s;
564
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0);
565
}
566
.app-view-control:first-child:ltr:focus,
568
.app-view-control:last-child:rtl:focus {
569
border-right-width: 0px;
570
}
571
.modal-dialog-button {
573
font-weight: bold;
574
}
575
/* Common radii */
577
.search-entry,
579
.modal-dialog-button,
580
.notification-button,
581
.hotplug-notification-item,
582
.app-view-controls,
583
#screenShieldNotifications {
584
border-radius: 2px;
585
}
586
.app-view-control:first-child:ltr,
588
.app-view-control:last-child:rtl {
589
border-radius: 0;
590
border-right-width: 0px;
591
}
592
.app-view-control:last-child:ltr,
594
.app-view-control:first-child:rtl {
595
border-radius: 0;
596
border-left-width: 0px;
597
}
598
/* Entries */
600
.search-entry,
602
.login-dialog StEntry,
603
.notification StEntry,
604
.modal-dialog StEntry {
605
color: rgba(0, 0, 0, 0.8);
606
caret-color: rgba(0, 0, 0, 0.8);
607
font-size: 12pt;
608
caret-size: 1px;
609
padding: 7px 12px;
610
selection-background-color: #3498db;
611
selected-color: white;
612
}
613
.search-entry,
615
.notification StEntry,
616
.modal-dialog StEntry,
617
.run-dialog-entry {
618
transition-duration: 0.2s;
619
border: none;
620
border-radius: 0;
621
box-shadow: inset 0px -1px rgba(0, 0, 0, 0.16);
622
background-gradient-direction: vertical;
623
background-gradient-start: rgba(255, 255, 255, 0.0);
624
background-gradient-end: rgba(255, 255, 255, 0.0);
625
}
626
.search-entry:focus,
628
.notification StEntry:focus,
629
.modal-dialog StEntry:focus {
630
border: none;
631
box-shadow: inset 0px -2px #3498db;
632
background-gradient-direction: vertical;
633
background-gradient-start: rgba(255, 255, 255, 0.0);
634
background-gradient-end: rgba(255, 255, 255, 0.0);
635
}
636
.modal-dialog StEntry:insensitive {
638
color: rgba(0, 0, 0, 0.32);
639
border-color: rgba(255, 255, 255, 0.4);
640
border: none;
641
box-shadow: inset 0px -1px rgba(0, 0, 0, 0.064);
642
background-gradient-direction: vertical;
643
background-gradient-start: rgba(255, 255, 255, 0.0);
644
background-gradient-end: rgba(255, 255, 255, 0.0);
645
}
646
.login-dialog StEntry,
648
.search-entry {
649
border-color: rgba(255, 255, 255, 0.4);
650
box-shadow: inset 0px -1px rgba(255, 255, 255, 0.4);
651
color: rgba(255, 255, 255, 0.5);
652
caret-color: rgba(255, 255, 255, 0.5);
653
selection-background-color: rgba(255, 255, 255, 0.4);
654
selected-color: white;
655
}
656
.search-entry:hover {
658
color: rgba(255, 255, 255, 0.5);
659
caret-color: rgba(255, 255, 255, 0.5);
660
}
661
.login-dialog StEntry:focus,
663
.search-entry:focus {
664
box-shadow: inset 0px -2px rgba(255, 255, 255, 0.8);
665
color: white;
666
caret-color: white;
667
font-weight: bold;
668
transition-duration: 0.2s;
669
}
670
.login-dialog StEntry:insensitive,
672
.search-entry:insensitive {
673
color: rgba(255, 255, 255, 0.4);
674
border-color: rgba(255, 255, 255, 0.4);
675
border: none;
676
box-shadow: inset 0px -1px rgba(255, 255, 255, 0.08);
677
background-gradient-direction: vertical;
678
background-gradient-start: rgba(255, 255, 255, 0.0);
679
background-gradient-end: rgba(255, 255, 255, 0.0);
680
}
681
.notification StEntry {
683
border-radius: 2px;
684
padding: 7px 16px;
685
}
686
.notification StEntry:focus {
688
border: none;
689
}
690
.prompt-dialog-password-entry .capslock-warning,
692
.login-dialog-prompt-entry .capslock-warning {
693
icon-size: 16px;
694
warning-color: #e67e22;
695
padding: 0 4px;
696
}
697
/* Panel */
699
#panel {
701
height: 32px;
702
background-color: rgba(0, 0, 0, 0.5);
703
font-weight: bold;
704
}
705
#panel:overview,
707
#panel.unlock-screen,
708
#panel.login-screen {
709
background-color: transparent;
710
}
711
#panelLeft, #panelCenter {
713
spacing: 0px;
714
}
715
#panelLeft:ltr {
717
padding-right: 4px;
718
}
719
#panelLeft:rtl {
721
padding-left: 4px;
722
}
723
#panelRight:ltr {
725
padding-left: 4px;
726
}
727
#panelRight:rtl {
729
padding-right: 4px;
730
}
731
.panel-corner {
733
-panel-corner-radius: 0;
734
-panel-corner-background-color: transparent;
735
-panel-corner-border-width: 0;
736
-panel-corner-border-color: transparent;
737
}
738
.panel-corner:active,
740
.panel-corner:overview,
741
.panel-corner:focus {
742
-panel-corner-border-color: transparent;
743
}
744
.panel-corner.lock-screen,
746
.panel-corner.unlock-screen,
747
.panel-corner.login-screen {
748
-panel-corner-background-color: transparent;
749
-panel-corner-border-color: transparent;
750
}
751
#appMenu {
753
spinner-image: url("process-working-symbolic.svg");
754
spacing: 4px;
755
opacity: 0.8;
756
}
757
/* used for the app menu header only */
759
.label-shadow {
760
color: rgba(0,0,0,0.0);
761
}
762
.panel-button #appMenuIcon {
764
app-icon-bottom-clip: 0px;
765
}
766
.panel-button:active #appMenuIcon,
768
.panel-button:checked #appMenuIcon,
769
.panel-button:focus #appMenuIcon {
770
app-icon-bottom-clip: 2px;
771
}
772
.panel-button {
774
-natural-hpadding: 12px;
775
-minimum-hpadding: 6px;
776
font-weight: bold;
777
color: rgba(255, 255, 255, 0.8);
778
transition-duration: 0.2s;
779
}
780
#panel.unlock-screen .panel-button,
782
#panel.lock-screen .panel-button,
783
#panel.login-screen .panel-button {
784
color: rgba(255, 255, 255, 0.8);
785
}
786
#panel.unlock-screen .panel-button:hover,
788
#panel.lock-screen .panel-button:hover,
789
#panel.login-screen .panel-button:hover,
790
#panel.unlock-screen .panel-button:active,
791
#panel.lock-screen .panel-button:active,
792
#panel.login-screen .panel-button:active,
793
#panel.unlock-screen .panel-button:focus,
794
#panel.lock-screen .panel-button:focus,
795
#panel.login-screen .panel-button:focus {
796
color: white;
797
}
798
.panel-button:hover {
800
color: white;
801
text-shadow: 0 0 transparent;
802
}
803
.panel-button:active,
805
.panel-button:overview,
806
.panel-button:focus {
807
border-image: url("indicator.svg") 4;
808
background-image: none;
809
color: white;
810
text-shadow: 0 0 transparent;
811
}
812
.panel-status-button:active,
814
.panel-status-button:checked,
815
.panel-status-button:focus {
816
background-image: none;
817
}
818
.panel-button:active > .system-status-icon,
820
.panel-button:checked > .system-status-icon,
821
.panel-button:focus > .system-status-icon {
822
icon-shadow: none;
823
}
824
.panel-menu {
826
-boxpointer-gap: 4px;
827
}
828
.panel-status-indicators-box,
830
.panel-status-menu-box {
831
spacing: 2px;
832
}
833
.system-status-icon {
835
icon-size: 16px;
836
padding: 0 5px;
837
}
838
.aggregate-menu {
840
width: 360px;
841
}
842
.aggregate-menu .popup-menu-icon {
844
padding: 0 4px;
845
}
846
.system-switch-user-submenu-icon {
848
icon-size: 24px;
849
border: none;
850
}
851
.system-menu-action {
853
padding: 16px;
854
border: 0px solid rgba(255, 255, 255, 0.4);
855
border-radius: 32px; /* wish we could do 50% */
856
background-gradient-direction: vertical;
857
background-gradient-start: rgba(0, 0, 0, 0);
858
background-gradient-end: rgba(0, 0, 0, 0);
859
color: rgba(0, 0, 0, 0.8);
860
}
861
.system-menu-action:hover,
863
.system-menu-action:focus {
864
border: 0px solid rgba(255, 255, 255, 0.4);
865
background-gradient-start: rgba(0, 0, 0, 0.08);
866
background-gradient-end: rgba(0, 0, 0, 0.08);
867
color: rgba(0, 0, 0, 0.8);
868
}
869
.system-menu-action:active {
871
border: 0px solid rgba(255, 255, 255, 0.4);
872
background-gradient-start: rgba(0, 0, 0, 0.16);
873
background-gradient-end: rgba(0, 0, 0, 0.16);
874
color: rgba(0, 0, 0, 0.8);
875
}
877
.system-menu-action > StIcon {
879
icon-size: 16px;
880
}
881
.screencast-indicator {
883
color: #ef2929;
884
}
885
/* Overview */
887
#overview {
889
spacing: 24px;
890
}
891
#overview StScrollBar StBin#trough {
893
background-gradient-start: rgba(255, 255, 255, 0.1);
894
background-gradient-end: rgba(255, 255, 255, 0.1);
895
background-gradient-direction: vertical;
896
border: 4px solid transparent;
897
border-radius: 8px;
898
}
899
#overview StScrollBar StButton#vhandle {
901
background-gradient-start: rgba(255, 255, 255, 0.3);
902
background-gradient-end: rgba(255, 255, 255, 0.3);
903
background-gradient-direction: vertical;
904
border: 4px solid transparent;
905
border-radius: 8px;
906
}
907
#overview StScrollBar StButton#hhandle {
909
background-gradient-start: rgba(255, 255, 255, 0.3);
910
background-gradient-end: rgba(255, 255, 255, 0.3);
911
background-gradient-direction: vertical;
912
border: 4px solid transparent;
913
border-radius: 8px;
914
}
915
#overview StScrollBar StButton#hhandle:hover,
917
#overview StScrollBar StButton#vhandle:hover {
918
background-gradient-start: rgba(255, 255, 255, 0.4);
919
background-gradient-end: rgba(255, 255, 255, 0.4);
920
background-gradient-direction: vertical;
921
border: 4px solid transparent;
922
}
923
#overview StScrollBar StButton#hhandle:active,
925
#overview StScrollBar StButton#vhandle:active {
926
background-gradient-start: rgba(255, 255, 255, 0.5);
927
background-gradient-end: rgba(255, 255, 255, 0.5);
928
background-gradient-direction: vertical;
929
border: 4px solid transparent;
930
}
931
.overview-controls {
933
padding-bottom: 32px;
934
}
935
.workspace-thumbnails {
937
spacing: 12px;
938
visible-width: 32px; /* Amount visible before hovering */
939
border: none;
940
border-right: 0px;
941
border-radius: 4px 0px 0px 4px;
942
background-color: rgba(255, 255, 255, 0.1);
943
padding: 12px 8px 12px 12px;
944
}
945
.workspace-thumbnails:rtl {
947
border-right: 0px;
948
border-left: 0px;
949
border-radius: 0px 4px 4px 0px;
950
padding: 12px 12px 12px 8px;
951
}
952
.workspace-thumbnail-indicator {
954
border: 4px solid rgba(255, 255, 255, 0.8);
955
border-radius: 2px;
956
padding: 1px;
957
}
958
/* Add Workspaces to Dock Support */
960
#workspacestodockContainer .workspace-thumbnails {
962
background-color: rgba(0, 0, 0, 0.5);
963
}
964
#workspacestodockContainer .workspace-thumbnails:overview,
966
#overview #workspacestodockContainer .workspace-thumbnails {
967
background-color: rgba(255, 255, 255, 0.1);
968
}
969
#workspacestodockContainer.extended .workspace-thumbnails {
971
padding: 0;
972
border-radius: 0;
973
}
974
.workspacestodock-workspace-caption-background {
976
background-gradient-start: rgba(0,0,0,0.0);
977
background-gradient-end: rgba(0,0,0,0.0);
978
background-gradient-direction: none;
979
border: none;
980
border-radius: 0;
981
}
982
.workspacestodock-caption-windowapps-button-icon {
984
padding: 1px 1px;
985
border: none;
986
border-radius: 2px;
987
background-gradient-start: rgba(255,255,255,0);
988
background-gradient-end: rgba(255,255,255,0);
989
background-gradient-direction: none;
990
}
991
.workspacestodock-caption-windowapps-button:hover > .workspacestodock-caption-windowapps-button-icon {
993
}
994
.workspacestodock-caption-windowapps-button-active > .workspacestodock-caption-windowapps-button-icon {
996
border-image: url("indicator.svg") 4;
997
background-gradient-start: rgba(255,255,255,0);
998
background-gradient-end: rgba(255,255,255,0);
999
background-gradient-direction: none;
1000
}
1001
.window-caption {
1003
spacing: 24px;
1004
background: rgba(255, 255, 255, 0.0);
1005
border-radius: 80px;
1006
padding: 4px 12px;
1007
-shell-caption-spacing: 12px;
1008
border: none;
1009
color: white;
1010
}
1011
.window-caption:hover {
1013
border: none;
1014
}
1015
.window-close, .notification-close {
1017
height: 40px;
1018
width: 40px;
1019
background-image: url("window-close.svg");
1020
background-size: 40px;
1021
}
1022
.window-close:hover, .notification-close:hover {
1024
background-image: url("window-close-hover.svg");
1025
}
1026
.window-close:active, .notification-close:active {
1028
background-image: url("window-close-active.svg");
1029
}
1030
.window-close {
1032
-shell-close-overlap: 20px;
1033
}
1034
.window-clone-border {
1036
border: 4px solid rgba(255, 255, 255, 0.5);
1037
border-radius: 2px;
1038
}
1039
.notification-close {
1041
/* we start out in the top right of the
1042
* notification, inset.
1043
*
1044
* center is 32px/2 = 16px
1045
*
1046
* adjust left 4px
1047
* adjust down 4px */
1048
-shell-close-overlap-x: 16px;
1050
-shell-close-overlap-y: -16px;
1051
}
1052
.notification-close:rtl {
1054
/* as above, but starting out in the top left of the
1055
* notification. */
1056
-shell-close-overlap-x: -16px;
1058
}
1059
.window-close:rtl {
1061
-st-background-image-shadow: none;
1062
}
1063
.window-picker {
1065
-horizontal-spacing: 32px;
1066
-vertical-spacing: 32px;
1067
padding-left: 32px;
1068
padding-right: 32px;
1069
padding-bottom: 48px;
1070
}
1071
.window-picker.external-monitor {
1073
padding: 32px;
1074
}
1075
.messages-indicator {
1077
color: rgba(255, 255, 255, 0.6);
1078
height: 32px;
1079
}
1080
.messages-indicator-contents {
1082
spacing: 12px;
1083
padding-bottom: 12px;
1084
font-weight: bold;
1085
}
1086
.messages-indicator-contents:hover {
1088
color: white;
1089
text-shadow: 0 0 transparent;
1090
}
1091
.messages-indicator-highlight {
1093
background-gradient-start: rgba(255, 255, 255, 0.2);
1094
background-gradient-end: rgba(255, 255, 255, 0.2);
1095
background-gradient-direction: vertical;
1096
height: 4px;
1098
transition-duration: 0.2s;
1099
}
1100
/* Dash */
1102
#dash {
1104
background-color: rgba(255, 255, 255, 0.1);
1105
color: rgba(255, 255, 255, 0.5);
1106
font-size: 9pt;
1107
padding: 4px 0px;
1108
border: none;
1109
border-left: 0px;
1110
border-radius: 0px 4px 4px 0px;
1111
}
1112
#dash:rtl {
1114
border-left: 0px;
1115
border-right: 0px;
1116
border-radius: 4px 0px 0px 4px;
1117
}
1118
/* Add Dash to Dock Support */
1120
#dashtodockContainer #dash {
1122
background-color: rgba(0, 0, 0, 0.5);
1123
}
1124
#dashtodockContainer #dash:overview,
1126
#overview #dashtodockContainer #dash {
1127
background-color: rgba(255, 255, 255, 0.1);
1128
}
1129
#dashtodockContainer.extended #dash {
1131
padding: 0;
1132
border-radius: 0;
1133
}
1134
/* Add Simple Dock Support */
1136
#dash:desktop {
1138
background-color: rgba(0, 0, 0, 0.5);
1139
}
1140
.placeholder {
1142
background-image: url("dash-placeholder.svg");
1143
background-size: contain;
1144
height: 24px;
1145
}
1146
.empty-dash-drop-target {
1148
width: 24px;
1149
height: 24px;
1150
}
1151
/* Search Box */
1153
.search-entry {
1155
width: 320px;
1156
}
1157
.search-entry-icon {
1159
icon-size: 16px;
1160
color: rgba(255, 255, 255, 0.5);
1161
}
1162
.search-entry:hover .search-entry-icon,
1164
.search-entry:focus .search-entry-icon {
1165
color: rgba(255, 255, 255, 0.5);
1166
}
1167
/* Search Results */
1169
#searchResults {
1171
padding: 20px 10px 0px 10px;
1172
spacing: 18px;
1173
}
1174
#searchResultsBin {
1176
max-width: 1000px;
1177
}
1178
#searchResultsContent {
1180
padding-left: 20px;
1181
padding-right: 20px;
1182
spacing: 16px;
1183
}
1184
.search-section {
1186
/* This should be equal to #searchResultsContent spacing */
1187
spacing: 16px;
1188
}
1189
.search-section-separator {
1191
-gradient-height: 1px;
1192
-gradient-start: rgba(255,255,255,0);
1193
-gradient-end: rgba(255,255,255,0.4);
1194
-margin-horizontal: 0;
1195
height: 1px;
1196
}
1197
.search-section-content {
1199
/* This is the space between the provider icon and the results container */
1200
spacing: 32px;
1201
}
1202
.search-statustext {
1204
color: rgba(255, 255, 255, 0.5);
1205
font-size: 2em;
1206
font-weight: bold;
1207
}
1208
.list-search-results {
1210
spacing: 4px;
1211
}
1212
.dash-label {
1214
padding: 4px 12px;
1215
border-radius: 2px;
1216
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
1217
background-color: rgba(255, 255, 255, 0.95);
1218
text-align: center;
1219
-x-offset: 8px;
1220
}
1221
/* Application Launchers, Grid and List results */
1223
.icon-grid {
1225
spacing: 30px;
1226
-shell-grid-horizontal-item-size: 136px;
1227
-shell-grid-vertical-item-size: 136px;
1228
}
1229
.icon-grid .overview-icon {
1231
icon-size: 96px;
1232
}
1233
.app-display {
1235
spacing: 20px;
1236
}
1237
.app-view-controls {
1239
width: 320px;
1240
padding-bottom: 32px;
1241
}
1242
.app-view-control {
1244
font-weight: bold;
1245
padding: 7px 36px 8px;
1246
box-shadow: inset 0px -1px rgba(255, 255, 255, 0.4);
1247
background-gradient-direction: vertical;
1248
background-gradient-start: rgba(255, 255, 255, 0);
1249
background-gradient-end: rgba(255, 255, 255, 0);
1250
color: rgba(255, 255, 255, 0.6);
1251
}
1252
.app-view-control:hover {
1254
background-gradient-direction: vertical;
1255
background-gradient-start: rgba(255, 255, 255, 0.2);
1256
background-gradient-end: rgba(255, 255, 255, 0.2);
1257
color: white;
1258
}
1259
.app-view-control:active {
1261
background-gradient-direction: vertical;
1262
background-gradient-start: rgba(255, 255, 255, 0.4);
1263
background-gradient-end: rgba(255, 255, 255, 0.4);
1264
color: white;
1265
}
1266
.app-view-control:checked {
1268
box-shadow: inset 0px -2px rgba(255, 255, 255, 0.8);
1269
background-gradient-direction: vertical;
1270
background-gradient-start: rgba(255, 255, 255, 0);
1271
background-gradient-end: rgba(255, 255, 255, 0);
1272
color: white;
1273
}
1274
.app-view-control:focus {
1276
padding: 7px 36px 8px;
1277
}
1278
.search-display > StBoxLayout,
1280
.all-apps,
1281
.frequent-apps > StBoxLayout {
1282
/* horizontal padding to make sure scrollbars or dash don't overlap content */
1283
padding: 0px 88px 10px 88px;
1284
}
1285
.page-indicator {
1287
padding: 15px 20px;
1288
}
1289
.page-indicator .page-indicator-icon {
1291
width: 16px;
1292
height: 16px;
1293
background-image: none;
1294
border: none;
1295
border-radius: 100px;
1296
background-gradient-direction: vertical;
1297
background-gradient-start: rgba(255, 255, 255, 0.3);
1298
background-gradient-end: rgba(255, 255, 255, 0.3);
1299
}
1300
.page-indicator:hover .page-indicator-icon {
1302
background-image: none;
1303
background-gradient-start: rgba(255, 255, 255, 0.4);
1304
background-gradient-end: rgba(255, 255, 255, 0.4);
1305
}
1306
.page-indicator:active .page-indicator-icon {
1308
background-image: none;
1309
background-gradient-start: rgba(255, 255, 255, 0.5);
1310
background-gradient-end: rgba(255, 255, 255, 0.5);
1311
}
1312
.page-indicator:checked .page-indicator-icon,
1314
.page-indicator:checked:active .page-indicator-icon {
1315
background-image: none;
1316
border: none;
1317
background-gradient-start: rgba(255, 255, 255, 1);
1318
background-gradient-end: rgba(255, 255, 255, 1);
1319
}
1320
.no-frequent-applications-label {
1322
font-size: 18pt;
1323
color: rgba(255, 255, 255, 0.5);
1324
}
1325
.app-folder-icon {
1327
padding: 5px;
1328
spacing-rows: 5px;
1329
spacing-columns: 5px;
1330
}
1331
.dash-item-container > StButton {
1333
padding: 4px 8px;
1334
}
1335
.list-search-result-content {
1337
spacing: 12px;
1338
padding: 12px;
1339
}
1340
.list-search-result-title {
1342
font-weight: bold;
1343
font-size: 14pt;
1344
color: white;
1345
}
1346
.list-search-result-description {
1348
color: rgba(255, 255, 255, 0.8);
1349
}
1350
.search-provider-icon-more {
1352
width: 20px;
1353
height: 20px;
1354
border-radius: 100px;
1355
/* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); */
1356
background-image: url("list-add-symbolic.svg");
1357
background-size: 16px;
1358
background-color: #e74c3c;
1359
}
1360
.app-well-app > .overview-icon.overview-icon-with-label,
1362
.grid-search-result .overview-icon.overview-icon-with-label {
1363
/* since the label controls its own spacing, it is visually more
1364
consistent to use different padding values for top and bottom */
1365
padding: 10px 8px 5px 8px;
1366
spacing: 4px;
1367
}
1368
.app-well-app > .overview-icon,
1370
.show-apps > .overview-icon,
1371
.search-provider-icon,
1372
.list-search-result,
1373
.grid-search-result .overview-icon {
1374
border-radius: 2px;
1375
padding: 6px;
1376
border: none;
1377
transition-duration: 0.1s;
1378
text-align: center;
1379
color:white;
1380
}
1381
.search-provider-icon {
1383
padding: 15px;
1384
}
1385
.app-folder-popup {
1387
-arrow-border-radius: 4px;
1388
-arrow-background-color: rgba(255, 255, 255, 0.1);
1389
-arrow-base: 24px;
1390
-arrow-rise: 12px;
1391
}
1392
.app-folder-popup-bin {
1394
padding: 5px;
1395
}
1396
.app-well-app.running > .overview-icon {
1398
text-shadow: 0 0 transparent;
1399
border-image: url("indicator.svg") 4;
1400
background-image: none;
1401
background-size: contain;
1402
}
1403
.app-well-app.app-folder > .overview-icon {
1405
background-color: rgba(255, 255, 255, 0.1);
1406
}
1407
.app-well-app:hover > .overview-icon,
1409
.show-apps:hover > .overview-icon,
1410
.search-provider-icon:hover,
1411
.list-search-result:hover,
1412
.grid-search-result:hover .overview-icon {
1413
box-shadow: 0 0 transparent;
1414
background-gradient-start: rgba(255, 255, 255, 0.2);
1415
background-gradient-end: rgba(255, 255, 255, 0.2);
1416
background-gradient-direction: vertical;
1417
text-shadow: 0 0 transparent;
1418
transition-duration: 0.1s;
1419
color:white;
1420
}
1421
.app-display .app-well-app > .overview-icon {
1423
border-radius: 2px;
1424
}
1425
.list-search-result:hover .list-search-result-description {
1427
text-shadow: 0 0 transparent;
1428
}
1429
.show-apps {
1431
padding: 4px 0;
1432
}
1433
.show-apps-icon {
1435
color: rgba(255, 255, 255, 0.6);
1436
}
1437
.show-apps:hover .show-apps-icon {
1439
color: white;
1440
}
1441
.app-well-app:checked > .overview-icon,
1443
.app-well-app:active > .overview-icon,
1444
.show-apps:checked > .overview-icon,
1445
.show-apps:active > .overview-icon,
1446
.search-provider-icon:active,
1447
.grid-search-result:active .overview-icon,
1448
.list-search-result:active {
1449
background-gradient-start: rgba(255, 255, 255, 0.4);
1450
background-gradient-end: rgba(255, 255, 255, 0.4);
1451
background-gradient-direction: vertical;
1452
border-radius: 2px;
1453
box-shadow: 0 0 transparent;
1454
transition-duration: 0.1s;
1455
}
1456
.show-apps:checked .show-apps-icon,
1458
.show-apps:focus .show-apps-icon {
1459
color: white;
1460
transition-duration: 0.1s;
1461
}
1462
.app-well-app:focus > .overview-icon,
1464
.grid-search-result:focus .overview-icon,
1465
.show-apps:focus > .overview-icon,
1466
.search-provider-icon:focus,
1467
.list-search-result:focus,
1468
.app-well-app:selected > .overview-icon,
1469
.grid-search-result:selected .overview-icon,
1470
.search-provider-icon:selected,
1471
.list-search-result:selected {
1472
box-shadow: 0 0 transparent;
1473
background-gradient-start: rgba(255, 255, 255, 0.4);
1474
background-gradient-end: rgba(255, 255, 255, 0.4);
1475
background-gradient-direction: vertical;
1476
}
1477
/* LookingGlass */
1479
#LookingGlassDialog {
1481
background-color: rgba(255, 255, 255, 0.95);
1482
spacing: 8px;
1483
padding: 0;
1484
border: none;
1485
border-radius: 4px;
1486
box-shadow: 0 14px 28px rgba(0,0,0,0.50), 0 10px 10px rgba(0,0,0,0.44);
1487
}
1488
#LookingGlassDialog > #Toolbar {
1490
padding: 0px 6px;
1491
border: 0px solid transparent;
1492
border-bottom-width: 2px;
1493
box-shadow: inset 0px -1px rgba(0, 0, 0, 0.16);
1494
border-radius: 0px;
1495
}
1496
#LookingGlassDialog .labels {
1498
spacing: 0;
1499
}
1500
#LookingGlassDialog .notebook-tab {
1502
-natural-hpadding: 12px;
1503
-minimum-hpadding: 6px;
1504
font-weight: bold;
1505
color: rgba(0, 0, 0, 0.48);
1506
transition-duration: 0.2s;
1507
padding-left: .3em;
1508
padding-right: .3em;
1509
padding: 13px 36px 14px;
1510
}
1511
#LookingGlassDialog .notebook-tab:hover {
1513
color: rgba(0, 0, 0, 0.8);
1514
text-shadow: 0 0 transparent;
1515
}
1516
#LookingGlassDialog .notebook-tab:selected {
1518
padding: 11px 36px 14px;
1519
border-top: 2px solid transparent;
1520
border-image: none;
1521
box-shadow: inset 0px -2px #3498db;
1522
background-image: none;
1523
color: rgba(0, 0, 0, 0.8);
1524
text-shadow: 0 0 transparent;
1525
}
1526
.lg-dialog StEntry {
1528
selection-background-color: #3498db;
1529
selected-color: white;
1530
}
1531
.lg-completions-text {
1533
font-size: .9em;
1534
font-style: italic;
1535
}
1536
.lg-obj-inspector-title {
1538
spacing: 4px;
1539
}
1540
.lg-obj-inspector-button {
1542
padding: 7px 36px 8px;
1543
border: none;
1544
background-gradient-direction: none;
1545
background-gradient-start: rgba(255, 255, 255, 0);
1546
background-gradient-end: rgba(255, 255, 255, 0);
1547
border-radius: 2px;
1548
}
1549
.lg-obj-inspector-button:hover {
1551
border: none;
1552
background-gradient-direction: none;
1553
background-gradient-start: rgba(255, 255, 255, 0.2);
1554
background-gradient-end: rgba(255, 255, 255, 0.2);
1555
}
1556
.lg-obj-inspector-button:active {
1558
border: none;
1559
background-gradient-direction: none;
1560
background-gradient-start: rgba(255, 255, 255, 0.4);
1561
background-gradient-end: rgba(255, 255, 255, 0.4);
1562
}
1563
.lg-dialog .shell-link {
1565
border-radius: 2px;
1566
color: #3498db;
1567
}
1568
.lg-dialog .shell-link:hover {
1570
color: #3498db;
1571
background-color: rgba(52, 152, 219, 0.1);
1572
}
1573
.lg-dialog .shell-link:active {
1575
background-color: rgba(52, 152, 219, 0.2);
1576
}
1577
#LookingGlassDialog StBoxLayout#EvalBox {
1579
padding: 8px;
1580
spacing: 4px;
1581
}
1582
#LookingGlassDialog StBoxLayout#ResultsArea {
1584
padding: 8px;
1585
spacing: 4px;
1586
}
1587
#lookingGlassExtensions {
1589
padding: 4px;
1590
}
1591
.lg-extensions-list {
1593
padding: 4px;
1594
spacing: 8px;
1595
}
1596
.lg-extension {
1598
border: none;
1599
border-radius: 0;
1600
padding: 8px;
1601
background-gradient-direction: vertical;
1602
background-gradient-start: rgba(255, 255, 255, 0);
1603
background-gradient-end: rgba(255, 255, 255, 0);
1604
}
1605
.lg-extension-name {
1607
font-weight: bold;
1608
}
1609
.lg-extension-meta {
1611
spacing: 6px;
1612
}
1613
#LookingGlassPropertyInspector {
1615
background: rgba(255, 255, 255, 0.9);
1616
border: none;
1617
border-radius: 4px;
1618
padding: 6px;
1619
box-shadow: 0 14px 28px rgba(0,0,0,0.50), 0 10px 10px rgba(0,0,0,0.44);
1620
}
1621
/* Calendar popup */
1623
.calendar-vertical-separator {
1625
-stipple-width: 0;
1626
-stipple-color: rgba(0, 0, 0, 0.4);
1627
width: 1px;
1628
background-color: rgba(0, 0, 0, 0.16);
1629
}
1630
.calendar {
1632
padding: .4em 1.75em .8em 1.75em;
1633
}
1634
.calendar-month-label {
1636
color: rgba(0, 0, 0, 0.8);
1637
font-size: 9pt;
1638
font-weight: bold;
1639
padding-bottom: 8px;
1640
padding-top: 8px;
1641
padding: 5px 16px 6px;
1642
border-radius: 2px;
1643
}
1644
.calendar-month-label:focus {
1646
background-color: rgba(0, 0, 0, 0.16);
1647
}
1648
.calendar-change-month-back {
1650
width: 32px;
1651
height: 32px;
1652
background-image: url("pan-start-symbolic.svg");
1653
border-radius: 100px;
1654
}
1655
.calendar-change-month-back:rtl {
1657
background-image: url("pan-end-symbolic.svg");
1658
}
1659
.calendar-change-month-back:hover {
1661
background-color: rgba(0, 0, 0, 0.08);
1662
}
1663
.calendar-change-month-back:active,
1664
.calendar-change-month-back:focus {
1665
background-color: rgba(0, 0, 0, 0.16);
1666
}
1667
.calendar-change-month-forward {
1669
width: 32px;
1670
height: 32px;
1671
background-image: url("pan-end-symbolic.svg");
1672
border-radius: 100px;
1673
}
1674
.calendar-change-month-forward:rtl {
1676
background-image: url("pan-start-symbolic.svg");
1677
}
1678
.calendar-change-month-forward:hover {
1680
background-color: rgba(0, 0, 0, 0.08);
1681
}
1682
.calendar-change-month-forward:active,
1683
.calendar-change-month-forward:focus {
1684
background-color: rgba(0, 0, 0, 0.16);
1685
}
1686
.datemenu-date-label {
1688
padding: 5px 16px 6px;
1689
font-weight: bold;
1690
text-align: center;
1691
color: rgba(0, 0, 0, 0.8);
1692
border-radius: 2px;
1693
}
1694
.datemenu-date-label:hover {
1696
background-color: rgba(0, 0, 0, 0.08);
1697
}
1698
.datemenu-date-label:active,
1700
.datemenu-date-label:focus {
1701
background-color: rgba(0, 0, 0, 0.16);
1702
}
1703
.calendar-day-base {
1705
font-size: 9pt;
1706
text-align: center;
1707
width: 32px;
1708
height: 32px;
1709
box-shadow: 0 0 transparent;
1710
background-gradient-direction: vertical;
1711
background-gradient-start: rgba(0, 0, 0, 0);
1712
background-gradient-end: rgba(0, 0, 0, 0);
1713
border-radius: 100px;
1714
}
1715
.calendar-day-base:hover {
1717
box-shadow: 0 0 transparent;
1718
background-gradient-direction: vertical;
1719
background-gradient-start: rgba(0, 0, 0, 0.08);
1720
background-gradient-end: rgba(0, 0, 0, 0.08);
1721
}
1722
.calendar-day-base:active,
1724
.calendar-day-base:focus {
1725
box-shadow: 0 0 transparent;
1726
background-gradient-direction: vertical;
1727
background-gradient-start: #3498db;
1728
background-gradient-end: #3498db;
1729
color: white;
1730
}
1731
.calendar-day-heading {
1733
color: rgba(0, 0, 0, 0.4);
1734
font-weight: bold;
1735
padding-top: .2em;
1736
height: 1.7em;
1737
}
1738
.calendar-week-number {
1740
color: rgba(0, 0, 0, 0.4);
1741
font-weight: bold;
1742
}
1743
/* Hack used in lieu of border-collapse - see calendar.js */
1745
.calendar-day {
1746
border: 0px solid #505050;
1747
color: rgba(0, 0, 0, 0.8);
1748
border-top-width: 0;
1749
border-left-width: 0;
1750
}
1751
.calendar-day-top {
1753
border-top-width: 0px;
1754
}
1755
.calendar-day-left {
1757
border-left-width: 0px;
1758
}
1759
.calendar-work-day {
1761
}
1762
.calendar-nonwork-day {
1764
background-color: transparent;
1765
}
1766
.calendar-today {
1768
background-image: none;
1769
text-shadow: 0 0 transparent;
1770
font-weight: bold !important;
1771
}
1772
.calendar-day-with-events {
1774
border-image: none;
1775
background-image: none;
1776
font-weight: normal;
1777
color: #3498db;
1778
text-decoration: underline;
1779
}
1780
.calendar-other-month-day {
1782
color: rgba(0, 0, 0, 0.24) !important;
1783
}
1784
.events-table {
1786
width: 320px;
1787
spacing-columns: 6pt;
1788
padding: 0 1.4em;
1789
}
1790
.events-table:ltr {
1792
padding-right: 1.9em;
1793
}
1794
.events-table:rtl {
1796
padding-left: 1.9em;
1797
}
1798
.events-day-header {
1800
font-weight: bold;
1801
color: rgba(0, 0, 0, 0.8);
1802
padding-left: 0.4em;
1803
padding-top: 1.2em;
1804
}
1805
.events-day-header:first-child {
1807
padding-top: 0;
1808
}
1809
.events-day-header:rtl {
1811
padding-left: 0;
1812
padding-right: 0.4em;
1813
}
1814
.events-day-dayname {
1816
font-weight: bold;
1817
color: rgba(0, 0, 0, 0.4);
1818
text-align: left;
1819
min-width: 20px;
1820
}
1821
.events-day-dayname:rtl {
1823
text-align: right;
1824
}
1825
.events-day-time {
1827
color: rgba(0, 0, 0, 0.8);
1828
text-align: right;
1829
}
1830
.events-day-time-ellipses {
1832
color: rgba(0, 0, 0, 0.4);
1833
}
1834
.events-day-time:rtl {
1836
text-align: left;
1837
}
1838
.events-day-task {
1840
color: rgba(0, 0, 0, 0.4);
1841
padding-left: 8pt;
1842
}
1843
.events-day-task:rtl {
1845
padding-left: 0px;
1846
padding-right: 8pt;
1847
}
1848
/* Message Tray */
1850
#message-tray {
1852
box-shadow: inset 0 9px 6px -6px rgba(0,0,0,0.16), inset 0 9px 6px -6px rgba(0,0,0,0.23);
1853
background: #222222;
1854
background-repeat: repeat;
1855
height: 72px;
1856
}
1857
.message-tray-summary {
1859
height: 72px;
1860
}
1861
.message-tray-menu-button StIcon {
1863
padding: 0 20px;
1864
color: rgba(255, 255, 255, 0.8);
1865
icon-size: 24px;
1866
}
1867
.message-tray-menu-button:hover StIcon,
1869
.message-tray-menu-button:active StIcon,
1870
.message-tray-menu-button:focus StIcon {
1871
color: white;
1872
}
1873
.url-highlighter {
1875
link-color: #ccccff;
1876
}
1877
.no-messages-label {
1879
color: rgba(255, 255, 255, 0.5);
1880
}
1881
.notification {
1883
border-radius: 4px 4px 0px 0px;
1884
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
1885
background: rgba(255, 255, 255, 0.9);
1886
padding: 8px 8px 4px 8px;
1887
spacing-rows: 4px;
1888
spacing-columns: 10px;
1889
}
1890
.notification, #notification-container {
1892
font-size: 11pt;
1893
width: 34em;
1894
}
1895
.notification.multi-line-notification {
1897
padding-bottom: 8px;
1898
}
1899
.notification-unexpanded {
1901
/* We want to force the actor at a specific size, irrespective
1902
of its minimum and preferred size, so we override both */
1903
min-height: 36px;
1904
height: 36px;
1905
}
1906
/* We use row-span = 2 for the image cell, which prevents its height preferences to be
1908
taken into account during allocation, so its height ends up being limited by the height
1909
of the content in the other rows. To avoid showing a stretched image, we set the minimum
1910
height of the table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159 */
1911
.notification-with-image {
1912
min-height: 159px;
1913
}
1914
.summary-boxpointer {
1916
-arrow-border-radius: 4px;
1917
-arrow-background-color: rgba(255, 255, 255, 0.95);
1918
-arrow-border-width: 0;
1919
-arrow-border-color: rgba(0, 0, 0, 0);
1920
-arrow-base: 24px;
1921
-arrow-rise: 12px;
1922
color: rgba(0, 0, 0, 0.8);
1923
-boxpointer-gap: 4px;
1924
}
1925
.summary-boxpointer .notification {
1927
box-shadow: none !important;
1928
border-radius: 0px;
1929
background: rgba(0,0,0,0) !important;
1930
padding-bottom: 12px;
1931
}
1932
.summary-boxpointer #summary-right-click-menu {
1934
padding-top: 12px;
1935
padding-bottom: 12px;
1936
}
1937
.summary-notification-stack-scrollview {
1939
max-height: 18em;
1940
padding-top: 8px;
1941
padding-bottom: 8px;
1942
}
1943
.summary-notification-stack-scrollview:ltr {
1945
padding-right: 8px;
1946
}
1947
.summary-notification-stack-scrollview:rtl {
1949
padding-left: 8px;
1950
}
1951
.notification-scrollview {
1953
max-height: 10em;
1954
-st-vfade-offset: 24px;
1955
}
1956
.notification-scrollview:ltr > StScrollBar {
1958
padding-left: 6px;
1959
}
1960
.notification-scrollview:rtl > StScrollBar {
1962
padding-right: 6px;
1963
}
1964
.notification-body {
1966
spacing: 5px;
1967
}
1968
.notification-actions {
1970
padding-top: 18px;
1971
spacing: 10px;
1972
}
1973
.notification-button {
1975
-st-natural-width: 140px;
1976
padding: 7px 8px 8px;
1977
}
1978
.notification-button:focus {
1980
-st-natural-width: 140px;
1981
padding: 7px 8px 8px;
1982
}
1983
.notification-icon-button {
1985
border-radius: 48px;
1986
padding: 8px;
1987
}
1988
.notification-icon-button:focus {
1990
padding: 8px;
1991
}
1992
.notification-icon-button > StIcon {
1994
icon-size: 16px;
1995
padding: 8px;
1996
}
1997
.secondary-icon {
1999
icon-size: 16px;
2000
}
2001
.hotplug-transient-box {
2003
spacing: 6px;
2004
padding: 2px 72px 2px 12px;
2005
}
2006
.hotplug-notification-item {
2008
padding: 2px;
2009
}
2010
.hotplug-notification-item:focus {
2012
padding: 2px;
2013
}
2014
.hotplug-notification-item-icon {
2016
icon-size: 24px;
2017
padding: 4px;
2018
}
2019
.hotplug-resident-box {
2021
spacing: 8px;
2022
}
2023
.hotplug-resident-mount {
2025
spacing: 8px;
2026
border-radius: 2px;
2027
color: rgba(0, 0, 0, 0.8);
2029
}
2030
.hotplug-resident-mount:hover {
2032
background-gradient-direction: vertical;
2033
background-gradient-start: rgba(0, 0, 0, 0.08);
2034
background-gradient-end: rgba(0, 0, 0, 0.08);
2035
color: rgba(0, 0, 0, 0.8);
2037
}
2038
.hotplug-resident-mount-label {
2040
color: inherit;
2041
padding-left: 6px;
2042
}
2043
.hotplug-resident-mount-icon {
2045
icon-size: 24px;
2046
padding-left: 6px;
2047
}
2048
.hotplug-resident-eject-icon {
2050
icon-size: 16px;
2051
}
2052
.hotplug-resident-eject-button {
2054
padding: 8px;
2055
border: none;
2056
border-radius: 2px;
2057
color: rgba(0, 0, 0, 0.8);
2058
}
2059
.chat-log-message {
2061
color: #888888;
2062
}
2063
.chat-empty-line {
2065
font-size: 4px;
2066
}
2067
.chat-received {
2069
padding-left: 4px;
2070
}
2071
.chat-received:rtl {
2073
padding-left: 0px;
2074
padding-right: 4px;
2075
}
2076
.chat-sent {
2078
padding-left: 18pt;
2079
color: #959595;
2080
}
2081
.chat-sent:rtl {
2083
padding-left: 0px;
2084
padding-right: 18pt;
2085
}
2086
.chat-meta-message {
2088
padding-left: 4px;
2089
font-size: 9pt;
2090
font-weight: bold;
2091
color: #bbbbbb;
2092
}
2093
.chat-meta-message:rtl {
2095
padding-left: 0px;
2096
padding-right: 4px;
2097
}
2098
.chat-notification-scrollview{
2100
max-height: 22em;
2101
}
2102
.subscription-message {
2104
font-style: italic;
2105
}
2106
.notification StEntry {
2108
border-radius: 4px;
2109
}
2110
.summary-source-button {
2112
padding: 6px 3px 6px 3px;
2113
}
2114
.summary-source-button:last-child:ltr {
2116
padding-right: 6px;
2117
}
2118
.summary-source-button:last-child:rtl {
2120
padding-left: 6px;
2121
}
2122
.summary-source-button:hover .summary-source {
2124
background-color: rgba(255,255,255,0.2);
2125
}
2126
.summary-source-button:focus .summary-source,
2128
.summary-source-button:selected .summary-source {
2129
background-color: rgba(255,255,255,0.4);
2130
}
2131
.summary-source {
2133
border-radius: 2px;
2134
padding: 0 6px 0 6px;
2135
transition-duration: 0.1s;
2136
}
2137
.summary-source-counter {
2139
background-image: none;
2140
background-size: 24px;
2141
background-color: #e74c3c;
2142
border-radius: 100px;
2143
color: white;
2144
font-size: 10pt;
2145
font-weight: bold;
2146
height: 24px;
2147
width: 24px;
2148
-shell-counter-overlap-x: 12px;
2149
-shell-counter-overlap-y: 12px;
2150
}
2151
/* OSD */
2153
.osd-window {
2154
text-align: center;
2155
font-weight: bold;
2156
spacing: 1em;
2157
}
2158
.osd-window .level {
2160
height: 8px;
2161
border-radius: 4px;
2162
background-color: rgba(0,0,0,0.16);
2163
}
2164
/* App Switcher */
2166
.switcher-popup {
2167
padding: 8px;
2168
spacing: 16px;
2169
}
2170
.osd-window,
2172
.switcher-list {
2173
background: rgba(255, 255, 255, 0.9);
2174
border: none;
2175
border-radius: 4px;
2176
box-shadow: 0 14px 28px rgba(0,0,0,0.50), 0 10px 10px rgba(0,0,0,0.44);
2177
padding: 20px;
2178
}
2179
.switcher-list-item-container {
2181
spacing: 8px;
2182
}
2183
.switcher-list .item-box {
2185
padding: 8px;
2186
border-radius: 2px;
2187
}
2188
.switcher-list .item-box:outlined {
2190
padding: 8px;
2191
border: none;
2192
background: rgba(0,0,0,0.16);
2193
}
2194
.switcher-list .item-box:selected {
2196
background: rgba(0,0,0,0.08);
2197
}
2198
.switcher-list .thumbnail-box {
2200
padding: 2px;
2201
spacing: 4px;
2202
}
2203
.switcher-list .thumbnail {
2205
width: 256px;
2206
}
2207
.switcher-list .separator {
2209
width: 1px;
2210
background: rgba(0,0,0,0.16);
2211
}
2212
.ripple-box {
2214
width: 48px;
2215
height: 48px;
2216
background-image: url("corner-ripple-ltr.svg");
2217
background-size: contain;
2218
}
2219
.ripple-box:rtl {
2221
background-image: url("corner-ripple-rtl.svg");
2222
}
2223
.switcher-arrow {
2225
border-color: rgba(0,0,0,0);
2226
color: rgba(0, 0, 0, 0.48);
2227
}
2228
.switcher-arrow:highlighted {
2230
border-color: rgba(0,0,0,0);
2231
color: rgba(0, 0, 0, 0.8);
2232
}
2233
/* Workspace Switcher */
2235
.workspace-switcher-group {
2236
padding: 12px;
2237
}
2238
.workspace-switcher-container {
2240
background: rgba(255, 255, 255, 0.9);
2241
border: none;
2242
border-radius: 4px;
2243
box-shadow: 0 14px 28px rgba(0,0,0,0.50), 0 10px 10px rgba(0,0,0,0.44);
2244
padding: 20px;
2245
}
2246
.workspace-switcher {
2248
background: transparent;
2249
border: none;
2250
border-radius: 0px;
2251
padding: 0px;
2252
spacing: 8px;
2253
}
2254
.ws-switcher-active-up {
2256
height: 100px;
2257
border: none;
2258
background: #3498db;
2259
background-image: url("go-up-symbolic.svg");
2260
border-radius: 2px;
2261
}
2262
.ws-switcher-active-down {
2264
height: 100px;
2265
border: none;
2266
background: #3498db;
2267
background-image: url("go-down-symbolic.svg");
2268
border-radius: 2px;
2269
}
2270
.ws-switcher-box {
2272
height: 96px;
2273
border: none;
2274
background-gradient-direction: vertical;
2275
background-gradient-start: rgba(0, 0, 0, 0.04);
2276
background-gradient-end: rgba(0, 0, 0, 0.04);
2277
border-radius: 2px;
2278
}
2279
/* Tile previews */
2281
.tile-preview {
2282
background-color: rgba(52, 152, 219, 0.2);
2283
border: 1px solid #3498db; /* Adwaita selected bg color */
2284
}
2285
.tile-preview-left.on-primary {
2287
/* keep in sync with -panel-corner-radius */
2288
border-radius: 0;
2289
}
2290
.tile-preview-right.on-primary {
2292
/* keep in sync with -panel-corner-radius */
2293
border-radius: 0;
2294
}
2295
.tile-preview-left.tile-preview-right.on-primary {
2297
/* keep in sync with -panel-corner-radius */
2298
border-radius: 0;
2299
}
2300
/* Modal Dialogs */
2302
/* Dialog Subject Text Style */
2304
.show-processes-dialog-subject,
2305
.mount-question-dialog-subject,
2306
.end-session-dialog-subject {
2307
font-size: 14pt;
2308
font-weight: bold;
2309
color: rgba(0, 0, 0, 0.4);
2310
}
2311
.modal-dialog {
2313
border-radius: 4px;
2314
background-color: rgba(255, 255, 255, 0.95);
2315
border: none;
2316
box-shadow: 0 14px 28px rgba(0,0,0,0.50), 0 10px 10px rgba(0,0,0,0.44);
2317
padding-right: 42px;
2319
padding-left: 42px;
2320
padding-bottom: 30px;
2321
padding-top: 30px;
2322
}
2323
.modal-dialog-button-box {
2325
spacing: 24px;
2326
padding-top: 24px;
2327
}
2328
.modal-dialog-button {
2330
padding: 7px 36px 8px;
2331
}
2332
.modal-dialog-button:focus {
2334
padding: 7px 36px 8px;
2335
}
2336
/* Run Dialog */
2338
.run-dialog-label {
2340
font-size: 11pt;
2341
font-weight: normal;
2342
color: rgba(0, 0, 0, 0.4);
2343
padding-bottom: .4em;
2344
}
2345
.run-dialog-error-box {
2347
padding-top: 15px;
2348
spacing: 5px;
2349
}
2350
.modal-dialog .run-dialog-entry {
2352
width: 20em;
2353
}
2354
.lightbox {
2356
background-color: black;
2357
}
2358
.flashspot {
2360
background-color: white;
2361
}
2362
/* End Session Dialog */
2364
.end-session-dialog {
2365
spacing: 42px;
2366
}
2367
.end-session-dialog-list {
2369
padding-top: 20px;
2370
}
2371
.end-session-dialog-layout {
2373
padding-left: 17px;
2374
}
2375
.end-session-dialog-layout:rtl {
2377
padding-right: 17px;
2378
}
2379
.end-session-dialog-description {
2381
width: 28em;
2382
padding-bottom: 10px;
2383
}
2384
.end-session-dialog-description:rtl {
2386
width: 28em;
2387
padding-bottom: 10px;
2388
text-align: right;
2389
}
2390
.end-session-dialog-warning {
2392
width: 28em;
2393
color: #e67e22;
2394
padding-top: 6px;
2395
}
2396
.end-session-dialog-warning:rtl {
2398
width: 28em;
2399
color: #e67e22;
2400
padding-top: 6px;
2401
text-align: right;
2402
}
2403
.end-session-dialog-logout-icon {
2405
border: 2px solid #8b8b8b;
2406
border-radius: 5px;
2407
width: 48px;
2408
height: 48px;
2409
background-size: contain;
2410
}
2411
.end-session-dialog-shutdown-icon {
2413
color: #bebebe;
2414
width: 48px;
2415
height: 48px;
2416
}
2417
.end-session-dialog-inhibitor-layout {
2419
spacing: 16px;
2420
max-height: 200px;
2421
padding-right: 65px;
2422
padding-left: 65px;
2423
}
2424
.end-session-dialog-session-list,
2426
.end-session-dialog-app-list {
2427
spacing: 1em;
2428
}
2429
.end-session-dialog-list-header {
2431
font-weight: bold;
2432
}
2433
.end-session-dialog-list-header:rtl {
2435
text-align: right;
2436
}
2437
.end-session-dialog-app-list-item,
2439
.end-session-dialog-session-list-item {
2440
spacing: 1em;
2441
}
2442
.end-session-dialog-app-list-item-name,
2444
.end-session-dialog-session-list-item-name {
2445
font-weight: bold;
2446
}
2447
.end-session-dialog-app-list-item-description {
2449
color: #cccccc;
2450
font-size: 10pt;
2451
}
2452
/* Restart message */
2454
.restart-message {
2455
font-size: 14pt;
2456
}
2457
/* ShellMountOperation Dialogs */
2459
.shell-mount-operation-icon {
2460
icon-size: 48px;
2461
}
2462
.show-processes-dialog,
2464
.mount-question-dialog {
2465
spacing: 24px;
2466
}
2467
.show-processes-dialog-subject,
2469
.mount-question-dialog-subject {
2470
padding-top: 10px;
2471
padding-left: 17px;
2472
padding-bottom: 6px;
2473
}
2474
.mount-question-dialog-subject {
2476
max-width: 500px;
2477
}
2478
.show-processes-dialog-subject:rtl,
2480
.mount-question-dialog-subject:rtl {
2481
padding-left: 0px;
2482
padding-right: 17px;
2483
}
2484
.show-processes-dialog-description,
2486
.mount-question-dialog-description {
2487
padding-left: 17px;
2488
width: 28em;
2489
}
2490
.show-processes-dialog-description:rtl,
2492
.mount-question-dialog-description:rtl {
2493
padding-right: 17px;
2494
}
2495
.show-processes-dialog-app-list {
2497
font-size: 10pt;
2498
max-height: 200px;
2499
padding-top: 24px;
2500
padding-left: 49px;
2501
padding-right: 32px;
2502
}
2503
.show-processes-dialog-app-list:rtl {
2505
padding-right: 49px;
2506
padding-left: 32px;
2507
}
2508
.show-processes-dialog-app-list-item {
2510
color: #ccc;
2511
}
2512
.show-processes-dialog-app-list-item:hover {
2514
color: white;
2515
}
2516
.show-processes-dialog-app-list-item:ltr {
2518
padding-right: 1em;
2519
}
2520
.show-processes-dialog-app-list-item:rtl {
2522
padding-left: 1em;
2523
}
2524
.show-processes-dialog-app-list-item-icon:ltr {
2526
padding-right: 17px;
2527
}
2528
.show-processes-dialog-app-list-item-icon:rtl {
2530
padding-left: 17px;
2531
}
2532
.show-processes-dialog-app-list-item-name {
2534
font-size: 10pt;
2535
}
2536
/* Password or Authentication Dialog */
2538
.prompt-dialog {
2539
/* this is the width of the entire modal popup */
2540
width: 500px;
2541
}
2542
.prompt-dialog-main-layout {
2544
spacing: 24px;
2545
padding: 10px;
2546
}
2547
.prompt-dialog-message-layout {
2549
spacing: 16px;
2550
}
2551
.prompt-dialog-headline {
2553
font-size: 12pt;
2554
font-weight: bold;
2555
color: rgba(255, 255, 255, 0.5);
2556
}
2557
.prompt-dialog-description:rtl {
2559
text-align: right;
2560
}
2561
.prompt-dialog-password-box {
2563
spacing: 1em;
2564
padding-bottom: 1em;
2565
}
2566
.prompt-dialog-error-label {
2568
font-size: 10pt;
2569
color: #e74c3c;
2570
padding-bottom: 8px;
2571
}
2572
.prompt-dialog-info-label {
2574
font-size: 10pt;
2575
padding-bottom: 8px;
2576
}
2577
.hidden {
2579
color: rgba(0,0,0,0);
2580
}
2581
.prompt-dialog-null-label {
2583
font-size: 10pt;
2584
padding-bottom: 8px;
2585
}
2586
/* Polkit Dialog */
2588
.polkit-dialog-user-layout {
2590
padding-left: 10px;
2591
spacing: 10px;
2592
}
2593
.polkit-dialog-user-layout:rtl {
2595
padding-left: 0px;
2596
padding-right: 10px;
2597
}
2598
.polkit-dialog-user-root-label {
2600
color: #ff0000;
2601
}
2602
.polkit-dialog-user-icon {
2604
border: 0px solid #8b8b8b;
2605
border-radius: 0px;
2606
background-size: contain;
2607
width: 48px;
2608
height: 48px;
2609
}
2610
/* Network Agent Dialog */
2612
.network-dialog-secret-table {
2614
spacing-rows: 15px;
2615
spacing-columns: 1em;
2616
}
2617
.keyring-dialog-control-table {
2619
spacing-rows: 15px;
2620
spacing-columns: 1em;
2621
}
2622
/* Magnifier */
2624
.magnifier-zoom-region {
2626
border: 2px solid rgba(255, 0, 0, 255);
2627
}
2628
.magnifier-zoom-region.full-screen {
2630
border-width: 0px;
2631
}
2632
/* On-screen Keyboard */
2634
#keyboard {
2636
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
2637
background: rgba(0,0,0,0.8);
2638
}
2639
.keyboard-layout {
2641
spacing: 10px;
2642
padding: 10px;
2643
}
2644
.keyboard-row {
2646
spacing: 15px;
2647
}
2648
.keyboard-key {
2650
min-height: 30px;
2651
min-width: 30px;
2652
background-gradient-direction: vertical;
2653
background-gradient-start: rgba(255, 255, 255, 0);
2654
background-gradient-end: rgba(255, 255, 255, 0);
2655
font-size: 14pt;
2656
font-weight: bold;
2657
border-radius: 2px;
2658
border: 2px solid rgba(255, 255, 255, 0.4);
2659
color: white;
2660
}
2661
.keyboard-key:grayed {
2663
color: rgba(255, 255, 255, 0.4);
2664
border-color: rgba(255, 255, 255, 0.2);
2665
}
2666
.keyboard-key:checked,
2668
.keyboard-key:hover {
2669
background-gradient-direction: vertical;
2670
background-gradient-start: rgba(255, 255, 255, 0.2);
2671
background-gradient-end: rgba(255, 255, 255, 0.2);
2672
border: 2px solid rgba(255, 255, 255, 0.4);
2673
}
2674
.keyboard-key:active {
2676
background-gradient-direction: vertical;
2677
background-gradient-start: rgba(255, 255, 255, 0.4);
2678
background-gradient-end: rgba(255, 255, 255, 0.4);
2679
border: 2px solid rgba(255, 255, 255, 0.4);
2680
}
2681
.keyboard-subkeys {
2683
color: rgba(0, 0, 0, 0.8);
2684
padding: 5px;
2685
-arrow-border-radius: 4px;
2686
-arrow-background-color: rgba(255, 255, 255, 0.95);
2687
-arrow-border-width: 0;
2688
-arrow-border-color: rgba(0, 0, 0, 0);
2689
-arrow-base: 24px;
2690
-arrow-rise: 12px;
2691
-boxpointer-gap: 4px;
2692
}
2693
/* IBus Candidate Popup */
2695
.candidate-popup-content {
2697
padding: 0.5em;
2698
spacing: 0.3em;
2699
}
2700
.candidate-index {
2702
padding: 0 0.5em 0 0;
2703
color: rgba(0, 0, 0, 0.4);
2704
}
2705
.candidate-box {
2707
padding: 5px 0.5em 6px 0.5em;
2708
}
2709
.candidate-box:selected {
2711
border-radius: 2px;
2712
background-color: #3498db;
2713
color: white;
2714
}
2715
.candidate-box:selected .candidate-index {
2717
color: rgba(255, 255, 255, 0.5);
2718
}
2719
.candidate-box:hover {
2721
border-radius: 2px;
2722
background-color: rgba(0, 0, 0, 0.08);
2723
}
2724
.candidate-page-button-box {
2725
height: 32px;
2726
width: 64px;
2727
}
2728
.vertical .candidate-page-button-box {
2730
padding-top: 0.5em;
2731
}
2732
.horizontal .candidate-page-button-box {
2734
padding-left: 0.5em;
2735
}
2736
.candidate-page-button-previous {
2738
border: none;
2739
border-radius: 2px;
2740
}
2741
.candidate-page-button-next {
2743
border: none;
2744
border-radius: 2px;
2745
}
2746
.candidate-page-button-icon {
2748
icon-size: 16px;
2749
}
2750
/* Login Dialog */
2752
.framed-user-icon {
2754
padding: 2px;
2755
border: none;
2756
border-radius: 2px;
2757
background-size: contain;
2758
}
2759
.framed-user-icon:hover {
2761
border: none;
2762
border-color: rgba(255, 255, 255, 0.2);
2763
}
2764
.login-dialog-banner {
2766
font-size: 10pt;
2767
font-weight: bold;
2768
text-align: center;
2769
color: #666666;
2770
padding-bottom: 1em;
2771
}
2772
.login-dialog {
2774
/* Reset border and background */
2775
border: none;
2776
background-color: transparent;
2777
}
2778
.login-dialog-button-box {
2780
spacing: 5px;
2781
}
2782
.login-dialog-user-list-view {
2784
-st-vfade-offset: 1em;
2785
}
2786
.login-dialog-user-list {
2788
spacing: 12px;
2789
padding: .2em;
2790
width: 23em;
2791
}
2792
.login-dialog-user-list-item {
2794
border-radius: 2px;
2795
padding: .2em;
2796
color: #bfbfbf;
2797
text-shadow: 0 0 transparent;
2798
}
2799
.login-dialog-user-list-item:ltr {
2801
padding-right: 1em;
2802
}
2803
.login-dialog-user-list-item:rtl {
2805
padding-left: 1em;
2806
}
2807
.login-dialog-user-list-item:hover {
2809
background-color: rgba(255,255,255,0.2);
2810
}
2811
.login-dialog-user-list:expanded .login-dialog-user-list-item:focus {
2813
background-color: rgba(255,255,255,0.4);
2814
}
2815
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
2817
background-image: url("logged-in-indicator.svg");
2818
background-size: contain;
2819
}
2820
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
2822
background-color: rgba(0,0,0,0.0);
2823
height: 2px;
2824
}
2825
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
2827
background-color: #8b8b8b;
2828
}
2829
.login-dialog-not-listed-label {
2831
font-size: 10.5pt;
2832
font-weight: bold;
2833
color: #666666;
2834
padding-top: 1em;
2835
}
2836
.login-dialog-user-selection-box {
2838
padding: 100px 0;
2839
}
2840
.login-dialog-user-selection-box .login-dialog-not-listed-label {
2842
padding-left: 2px;
2843
}
2844
.login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
2846
.login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
2847
color: #E8E8E8;
2848
}
2849
.login-dialog-username,
2851
.user-widget-label {
2852
font-size: 16pt;
2853
font-weight: bold;
2854
text-align: left;
2855
padding-left: 15px;
2856
text-shadow: 0 0 transparent;
2857
}
2858
.login-dialog-prompt-layout {
2860
padding-top: 24px;
2861
padding-bottom: 12px;
2862
spacing: 8px;
2863
width: 23em;
2864
}
2865
.login-dialog-prompt-label {
2867
color: #eeeeee;
2868
font-size: 14px;
2869
padding-top: 11px;
2870
}
2871
.login-dialog-session-list-button StIcon {
2873
icon-size: 16px;
2874
}
2875
.login-dialog-session-list-button {
2877
color: #8b8b8b;
2878
}
2879
.login-dialog-session-list-button:hover,
2881
.login-dialog-session-list-button:focus,
2882
.login-dialog-session-list-button:active {
2883
color: white;
2884
}
2885
.login-dialog-logo-bin {
2887
padding: 24px 0px;
2888
}
2889
.login-dialog .modal-dialog-button-box {
2891
spacing: 3px;
2892
}
2893
.login-dialog .modal-dialog-button {
2895
padding: 7px 36px 8px;
2896
border-radius: 2px;
2897
}
2898
.login-dialog .modal-dialog-button:focus {
2900
padding: 7px 36px 8px;
2901
}
2902
.login-dialog .modal-dialog-button:default {
2904
background-gradient-direction: none;
2905
border-color: #16335d;
2906
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
2907
background-color: #fff;
2908
}
2909
.login-dialog .modal-dialog-button:default:focus {
2911
border: none;
2912
}
2913
.login-dialog .modal-dialog-button:default:hover {
2915
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
2916
}
2917
.login-dialog .modal-dialog-button:default:active,
2919
.login-dialog .modal-dialog-button:default:pressed {
2920
background-color: #ddd;
2921
}
2922
.login-dialog .modal-dialog-button:default:insensitive {
2924
border-color: #666666;
2925
color: rgba(255,255,255,0.4);
2926
background-gradient-direction: none;
2927
background-color: rgba(255,255,255,0.08);
2928
}
2929
.login-dialog-message {
2931
padding-top: 4px;
2932
padding-bottom: 16px;
2933
min-height: 2em;
2934
}
2935
.login-dialog-message-warning {
2937
color: #e67e22;
2938
}
2939
.login-dialog-message-hint {
2941
padding-top: 0px;
2942
padding-bottom: 20px;
2943
}
2944
.user-widget-label {
2946
}
2947
.user-widget-label:ltr {
2949
padding-left: 18px;
2950
}
2951
.user-widget-label:rtl {
2953
padding-right: 18px;
2954
}
2955
/* Screen shield */
2957
#panel.lock-screen,
2959
#screenShieldNotifications {
2960
background-color: rgba(0,0,0,0.5);
2961
}
2962
.screen-shield-background {
2964
background: black;
2965
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
2966
}
2967
#lockDialogGroup {
2969
background: #222222;
2970
background-repeat: repeat;
2971
}
2972
.screen-shield-arrows {
2974
padding-bottom: 3em;
2975
}
2976
.screen-shield-arrows Gjs_Arrow {
2978
color: white;
2979
width: 80px;
2980
height: 48px;
2981
-arrow-thickness: 12px;
2982
-arrow-shadow: 0 1px 1px rgba(0,0,0,0.4);
2983
}
2984
.screen-shield-contents-box {
2986
spacing: 48px;
2987
}
2988
.screen-shield-clock {
2990
color: white;
2991
text-shadow: 0px 0px 1em rgba(0,0,0,0.5);
2992
font-weight: normal;
2993
text-align: center;
2994
padding-bottom: 1.5em;
2995
}
2996
.screen-shield-clock-time {
2998
font-size: 72pt;
2999
text-shadow: 0px 0px 1em rgba(0,0,0,0.5);
3000
}
3001
.screen-shield-clock-date {
3003
font-size: 28pt;
3004
}
3005
#screenShieldNotifications {
3007
max-height: 500px;
3008
padding: 12px;
3009
}
3010
.screen-shield-notifications-box {
3012
spacing: 12px;
3013
width: 30em;
3014
}
3015
.screen-shield-notification-source {
3017
padding: 3px 6px;
3018
spacing: 5px;
3019
}
3020
.screen-shield-notification-label {
3022
font-weight: bold;
3023
padding: 0px 0px 0px 12px;
3024
}
3025
.screen-shield-notification-count-text {
3027
padding: 0px 0px 0px 12px;
3028
}
3029
/* Remove background from notifications, otherwise
3031
opacity is doubled and they look darker
3032
*/
3033
.screen-shield-notifications-box .notification {
3034
background-color: transparent;
3035
}
3036
/* Override padding on resident notifications, since
3038
the notifications box has its own spacing
3039
*/
3040
.screen-shield-notifications-box .summary-notification-stack-scrollview {
3041
padding-top: 0px;
3042
padding-bottom: 0px;
3043
}
3044
#screenShieldNotifications .notification-button,
3046
#screenShieldNotifications .notification-icon-button {
3047
border: 1px rgba(255,255,255,0.5);
3048
}
3049
#screenShieldNotifications StScrollBar StBin#trough {
3051
background-color: rgba(0,0,0,0.2);
3052
}
3053
#screenShieldNotifications StScrollBar StButton#vhandle,
3055
#screenShieldNotifications StScrollBar StButton#hhandle {
3056
background-color: rgba(0,0,0,0.3);
3057
border: none;
3058
}
3059
#screenShieldNotifications StScrollBar StButton#vhandle:hover,
3061
#screenShieldNotifications StScrollBar StButton#hhandle {
3062
background-color: rgba(0,0,0,0.6);
3063
}
3064
#screenShieldNotifications StScrollBar StButton#vhandle:active,
3066
#screenShieldNotifications StScrollBar StButton#hhandle {
3067
background-color: rgba(0,0,0,0.8);
3068
}
3069
.input-source-switcher-symbol {
3071
font-size: 34pt;
3072
width: 96px;
3073
height: 96px;
3074
}
3075
/* Background menu */
3077
.background-menu {
3079
-boxpointer-gap: 4px;
3080
-arrow-rise: 0px;
3081
}
3082