ASCII text
1
//This is the RIGHT PLACE to edit the stylesheet
2
//let's start by telling people not to edit the generated CSS:
4
$cakeisalie: "This stylesheet is generated, DO NOT EDIT";
5
/* #{$cakeisalie} */
6
$panel-corner-radius: 0;
8
/* Copyright 2009, 2015 Red Hat, Inc.
10
*
11
* Portions adapted from Mx's data/style/default.css
12
* Copyright 2009 Intel Corporation
13
*
14
* This program is free software; you can redistribute it and/or modify it
15
* under the terms and conditions of the GNU Lesser General Public License,
16
* version 2.1, as published by the Free Software Foundation.
17
*
18
* This program is distributed in the hope it will be useful, but WITHOUT ANY
19
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
20
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for
21
* more details.
22
*
23
* You should have received a copy of the GNU Lesser General Public License
24
* along with this program; if not, write to the Free Software Foundation,
25
* Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
26
*/
27
* {
30
transition-timing-function : cubic-bezier(0.4, 0, 0.2, 1);
31
transition-duration: 0.2s;
32
}
33
/* GLOBALS */
35
$font-size: 11;
36
$font-family: "M+ 1c", Cantarell, Sans-Serif;
37
stage {
39
font-family: $font-family;
40
@include fontsize($font-size);
41
color: $fg_color;
42
}
43
/* WIDGETS */
45
/* Buttons */
47
.button {
48
border-radius: 2px;
49
border-width: 0;
50
padding: 7px 16px 8px;
51
font-weight: 500;
52
@include button(flat-normal);
53
&:hover { @include button(flat-hover); }
54
&:active { @include button(flat-active); }
55
&:insensitive { @include button(flat-insensitive); }
56
&:focus { @include button(flat-focus); }
57
}
59
/* Entries */
61
StEntry {
62
border-radius: 0;
63
padding: 7px 8px 8px;
64
border-width: 0;
65
color: $fg_color;
66
selection-background-color: $selected_bg_color;
67
selected-color: $selected_fg_color;
68
@include entry(normal);
69
//&:hover { @include entry(hover);}
70
&:focus { @include entry(focus);}
71
&:insensitive { @include entry(insensitive);}
72
StIcon.capslock-warning {
73
icon-size: 16px;
74
warning-color: $warning_color;
75
padding: 0 2px;
76
}
77
}
78
/* Scrollbars */
81
StScrollView {
83
&.vfade { -st-vfade-offset: 32px; }
84
&.hfade { -st-hfade-offset: 32px; }
85
}
86
StScrollBar {
88
padding: 0;
89
StScrollView & {
91
min-width: 16px;
92
min-height: 16px;
93
}
94
StBin#trough {
96
margin: 4px;
97
border-radius: 100px;
98
background-color: $fill_color;
99
}
100
StButton#vhandle, StButton#hhandle {
102
border-radius: 100px;
103
background-color: scale-color($fg_color, $alpha: -40%);
104
//border: 4px solid transparent; //would be nice to margin or at least to transparent
105
margin: 4px;
106
&:hover { background-color: scale-color($fg_color, $alpha: -20%); }
107
&:active { background-color: scale-color($fg_color, $alpha: -0%); }
108
}
109
}
110
/* Slider */
112
.slider {
114
height: 20px;
115
color: $selected_bg_color;
116
-slider-height: 4px;
117
-slider-background-color: $fill_color; //background of the trough
118
-slider-border-color: transparent; //trough border color
119
-slider-active-background-color: $selected_bg_color; //active trough fill
120
-slider-active-border-color: transparent; //active trough border
121
-slider-border-width: 0;
122
-slider-handle-radius: 8px;
123
}
124
/* Check Boxes */
126
.check-box {
128
StBoxLayout { spacing: .8em; }
129
StBin {
130
width: 20px;
131
height: 20px;
132
background-image: url("checkbox-off.svg");
133
color: $secondary_fg_color;
134
}
135
&:focus StBin { background-image: url("checkbox-off.svg"); }
136
&:checked StBin { background-image: url("checkbox.svg"); }
137
&:focus:checked StBin { background-image: url("checkbox.svg"); }
138
}
139
/* Switches */
141
.toggle-switch {
142
width: 40px;
143
height: 20px;
144
background-size: contain;
145
}
146
@each $v in us, intl {
148
.toggle-switch-#{$v} {
149
background-image: url("toggle-off.svg");
150
&:checked { background-image: url("toggle-on.svg"); }
151
}
152
}
153
/* links */
155
.shell-link {
156
border-radius: 2px;
157
color: $link_color;
158
&:hover { color: $link_color; background-color: transparentize($link_color, 0.9); }
159
&:active { color: $link_color; background-color: transparentize($link_color, 0.8); }
160
}
161
/* Modal Dialogs */
163
.headline { font-size: 110%; }
165
.lightbox { background-color: black; }
166
.flashspot { background-color: white; }
167
.modal-dialog {
169
border-radius: 2px;
170
color: $fg_color;
171
background-color: $bg_color;
172
border: none;
173
@include shadow(4);
174
padding: 24px;
175
.run-dialog-entry { width: 20em; margin-bottom: 6px; }
176
.run-dialog-error-box {
177
padding-top: 16px;
178
spacing: 6px;
179
}
180
.run-dialog-button-box { padding-top: 1em; }
181
.run-dialog-label {
182
font-size: 11pt;
183
font-weight: normal;
184
color: $dim_fg_color;
185
padding-bottom: .4em;
186
}
187
}
189
.button-dialog-button-box {
191
spacing: 18px;
192
padding-top: 48px;
193
}
194
.show-processes-dialog-subject,
196
.mount-question-dialog-subject,
197
.end-session-dialog-subject { //this should be a generic header class
198
@include fontsize($font-size * 1.3);
199
}
200
/* End Session Dialog */
202
.end-session-dialog {
203
spacing: 42px;
204
border: none;
205
}
206
.end-session-dialog-list {
208
padding-top: 20px;
209
}
210
.end-session-dialog-layout {
212
padding-left: 17px;
213
&:rtl { padding-right: 17px; }
214
}
215
.end-session-dialog-description {
217
width: 28em;
218
padding-bottom: 10px;
219
&:rtl {
220
text-align: right;
221
}
222
}
223
.end-session-dialog-warning {
225
width: 28em;
226
color: $warning_color;
227
padding-top: 6px;
228
&:rtl {
229
text-align: right;
230
}
231
}
232
.end-session-dialog-logout-icon {
234
//border: 2px solid #8b8b8b;
235
border-radius: 5px;
236
width: 48px;
237
height: 48px;
238
background-size: contain;
239
}
240
.end-session-dialog-shutdown-icon {
242
color: $dim_fg_color;
243
width: 48px;
244
height: 48px;
245
}
246
.end-session-dialog-inhibitor-layout {
248
spacing: 16px;
249
max-height: 200px;
250
padding-right: 65px;
251
padding-left: 65px;
252
}
253
.end-session-dialog-session-list,
255
.end-session-dialog-app-list {
256
spacing: 1em;
257
}
258
.end-session-dialog-list-header {
260
font-weight: bold;
261
&:rtl { text-align: right; }
262
}
263
.end-session-dialog-app-list-item,
265
.end-session-dialog-session-list-item {
266
spacing: 1em;
267
}
268
.end-session-dialog-app-list-item-name,
270
.end-session-dialog-session-list-item-name {
271
font-weight: bold;
272
}
273
.end-session-dialog-app-list-item-description {
275
color: $dim_fg_color;
276
font-size: 10pt;
277
}
278
/* ShellMountOperation Dialogs */
280
.shell-mount-operation-icon { icon-size: 48px; }
281
.show-processes-dialog,
283
.mount-question-dialog {
284
spacing: 24px;
285
}
286
.show-processes-dialog-subject,
288
.mount-question-dialog-subject {
289
padding-top: 10px;
290
padding-left: 17px;
291
padding-bottom: 6px;
292
}
293
.mount-question-dialog-subject {
295
max-width: 500px;
296
}
297
.show-processes-dialog-subject:rtl,
299
.mount-question-dialog-subject:rtl {
300
padding-left: 0px;
301
padding-right: 17px;
302
}
303
.show-processes-dialog-description,
305
.mount-question-dialog-description {
306
padding-left: 17px;
307
width: 28em;
308
}
309
.show-processes-dialog-description:rtl,
311
.mount-question-dialog-description:rtl {
312
padding-right: 17px;
313
}
314
.show-processes-dialog-app-list {
316
max-height: 200px;
317
padding-top: 24px;
318
padding-left: 49px;
319
padding-right: 32px;
320
}
321
.show-processes-dialog-app-list:rtl {
323
padding-right: 49px;
324
padding-left: 32px;
325
}
326
.show-processes-dialog-app-list-item {
328
color: $fg_color;
329
&:hover { color: $fg_color; }
330
&:ltr { padding-right: 1em; }
331
&:rtl { padding-left: 1em; }
332
}
333
.show-processes-dialog-app-list-item-icon {
335
&:ltr { padding-right: 17px; }
336
&:rtl { padding-left: 17px; }
337
}
338
.show-processes-dialog-app-list-item-name {
340
font-size: 10pt;
341
}
342
/* Password or Authentication Dialog */
345
.prompt-dialog {
347
//this is the width of the entire modal popup
348
width: 500px;
349
border: none;
350
}
351
.prompt-dialog-main-layout {
353
spacing: 24px;
354
padding: 10px;
355
}
356
.prompt-dialog-message-layout {
358
spacing: 16px;
359
}
360
.prompt-dialog-headline {
362
@include fontsize($font-size * 1.3);
363
font-weight: normal;
364
color: $fg_color;
365
}
366
.prompt-dialog-description:rtl {
368
text-align: right;
369
}
370
.prompt-dialog-password-box {
372
spacing: 1em;
373
padding-bottom: 1em;
374
}
375
.prompt-dialog-error-label {
377
font-size: 10pt;
378
color: $error_color;
379
padding-bottom: 8px;
380
}
381
.prompt-dialog-info-label {
383
font-size: 10pt;
384
padding-bottom: 8px;
385
}
386
.hidden {
388
color: rgba(0,0,0,0);
389
}
390
.prompt-dialog-null-label {
392
font-size: 10pt;
393
padding-bottom: 8px;
394
}
395
/* Polkit Dialog */
398
.polkit-dialog-user-layout {
400
padding-left: 10px;
401
spacing: 10px;
402
&:rtl {
403
padding-left: 0px;
404
padding-right: 10px;
405
}
406
}
407
.polkit-dialog-user-root-label {
409
color: $warning_color;
410
}
411
.polkit-dialog-user-icon {
413
border-radius: 5px;
414
background-size: contain;
415
width: 48px;
416
height: 48px;
417
}
418
/* Network Agent Dialog */
420
.network-dialog-secret-table {
422
spacing-rows: 15px;
423
spacing-columns: 1em;
424
}
425
.keyring-dialog-control-table {
427
spacing-rows: 15px;
428
spacing-columns: 1em;
429
}
430
/* Popovers/Menus */
432
.popup-menu {
434
min-width: 200px;
435
.popup-menu-arrow { } //defined globally in the TOP BAR
437
.popup-sub-menu {
438
background-color: scale-color($semi_fill_color, $alpha: -50%);
439
box-shadow: 0 0 transparent;
440
}
441
.popup-menu-content { padding: 8px 0; }
443
.popup-menu-item {
444
spacing: 12px;
445
&:ltr { padding: .4em 1.75em .4em 0em; }
447
&:rtl { padding: .4em 0em .4em 1.75em; }
448
&:checked {
449
background-color: $selected_bg_color;
450
color: $selected_fg_color;
451
box-shadow: 0 0 transparent;
452
font-weight: normal;
453
&.selected {
454
background-color: mix($selected_bg_color, $selected_fg_color, 90%);
455
color: $selected_fg_color;
456
}
457
&:active {
458
background-color: mix($selected_bg_color, $selected_fg_color, 80%);
459
color: $selected_fg_color;
460
}
461
&:insensitive { color: scale-color($selected_fg_color, $alpha: -50%); }
462
}
463
&.selected {
464
background-color: $semi_fill_color;
465
color: $fg_color;
466
transition-duration: 0s;
467
}
468
&:active {
469
background-color: $fill_color;
470
color: $fg_color;
471
transition-duration: 0.2s;
472
}
473
&.selected:active { color: $fg_color; }
474
&:insensitive { color: scale-color($fg_color, $alpha: -50%); }
475
}
476
.popup-inactive-menu-item { //all icons and other graphical elements
478
color: $fg_color;
479
&:insensitive { color: scale-color($fg_color, $alpha: -50%); }
481
}
482
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
483
&.panel-menu {
484
-boxpointer-gap: 4px;
485
margin-bottom: 1.75em;
486
}
487
}
488
.popup-menu-ornament {
492
text-align: right;
493
width: 1.2em;
494
height: 1.2em;
495
}
496
.popup-menu-boxpointer,
497
.candidate-popup-boxpointer {
498
-arrow-border-radius: 0;
499
-arrow-background-color: transparent;
500
-arrow-border-width: 0;
501
-arrow-border-color: transparent;
502
-arrow-base: 0;
503
-arrow-rise: 0;
504
-arrow-box-shadow: none; //dreaming. bug #689995
505
margin: 5px 8px 8px;
506
background-color: $bg_color;
507
border-radius: 2px;
508
@include shadow(2);
509
}
510
.popup-separator-menu-item {
512
//-margin-horizontal: 24px;
513
height: 1px; //not really the whole box
514
margin: 6px 64px;
515
background-color: transparent;
516
border-color: $borders_color;
517
border-bottom-width: 1px;
518
border-bottom-style: solid;
519
}
520
// Background menu
523
.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; }
524
/* fallback menu
526
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
527
app menu inside the main app window itself rather than the top bar
528
*/
529
/* OSD */
532
.osd-window {
533
text-align: center;
534
font-weight: bold;
535
spacing: 1em;
536
margin: 32px;
537
min-width: 64px;
538
min-height: 64px;
539
.osd-monitor-label { font-size: 3em; }
541
.level {
542
height: 0.6em;
543
border-radius: 4px;
544
background-color: $fill_color;
545
color: $fg_color;
546
}
547
}
548
/* App Switcher */
550
.switcher-popup {
551
padding: 8px;
552
spacing: 16px;
553
}
554
.osd-window,
556
.resize-popup,
557
.switcher-list {
558
@extend %osd-panel;
559
}
560
.switcher-list-item-container { spacing: 8px; }
562
.switcher-list .item-box {
564
padding: 8px;
565
border-radius: 2px;
566
}
567
.switcher-list .item-box:outlined {
569
padding: 6px;
570
border: 2px solid $fill_color;
571
}
572
.switcher-list .item-box:selected {
574
background-color: $selected_bg_color;
575
color: $selected_fg_color;
576
}
577
.switcher-list .thumbnail-box {
579
padding: 2px;
580
spacing: 4px;
581
}
582
.switcher-list .thumbnail {
584
width: 256px;
585
}
586
.switcher-list .separator {
588
width: 1px;
589
background: $borders_color;
590
}
591
.switcher-arrow {
593
border-color: rgba(0,0,0,0);
594
color: $dim_fg_color;
595
&:highlighted {
596
color: $fg_color;
597
}
598
}
599
.input-source-switcher-symbol {
601
font-size: 34pt;
602
width: 96px;
603
height: 96px;
604
}
605
/* Workspace Switcher */
607
.workspace-switcher-group { padding: 12px; }
608
.workspace-switcher-container {
610
@extend %osd-panel;
611
}
612
.workspace-switcher {
614
background: transparent;
615
border: 0px;
616
border-radius: 0px;
617
padding: 0px;
618
spacing: 8px;
619
}
620
.ws-switcher-active-up, .ws-switcher-active-down {
622
height: 50px;
623
background-color: $selected_bg_color;
624
color: $selected_fg_color;
625
//background-image: url("ws-switch-arrow-up.png");
626
background-size: 32px;
627
border-radius: 2px;
628
}
629
.ws-switcher-box {
631
height: 50px;
632
border: 2px solid $fill_color;
633
background: transparent;
634
border-radius: 2px;
635
}
636
%osd-panel {
638
color: $fg_color;
639
background-color: $bg_color;
640
border: none;
641
@include shadow(4);
642
border-radius: 2px;
643
padding: 12px;
644
}
645
/* Tiled window previews */
647
.tile-preview {
648
background-color: transparentize($selected_bg_color,0.8);
649
border: 1px solid $selected_bg_color;
650
}
651
.tile-preview-left.on-primary {
653
border-radius: $panel-corner-radius $panel-corner-radius 0 0;
654
}
655
.tile-preview-right.on-primary {
657
border-radius: 0 $panel-corner-radius 0 0;
658
}
659
.tile-preview-left.tile-preview-right.on-primary {
661
border-radius: $panel-corner-radius $panel-corner-radius 0 0;
662
}
663
/* TOP BAR */
665
#panel {
667
background-color: $osd_bg_color;
668
font-weight: bold;
669
height: 32px;
670
&:overview,
672
&.unlock-screen,
673
&.login-screen,
674
&.lock-screen {
675
background-color: transparent;
676
}
677
#panelLeft, #panelCenter { // spacing between activities<>app menu and such
679
spacing: 0;
680
}
681
.panel-corner {
683
-panel-corner-radius: $panel-corner-radius;
684
-panel-corner-background-color: $osd_bg_color;
685
-panel-corner-border-width: 2px;
686
-panel-corner-border-color: transparent;
687
&:active, &:overview, &:focus {
689
-panel-corner-border-color: $osd_indicator_color;
690
}
691
&.lock-screen, &.login-screen, &.unlock-screen {
693
-panel-corner-radius: 0;
694
-panel-corner-background-color: transparent;
695
-panel-corner-border-color: transparent;
696
}
697
}
698
.panel-button {
700
-natural-hpadding: 12px;
701
-minimum-hpadding: 6px;
702
font-weight: bold;
703
color: $osd_indicator_color;
704
transition-duration: 0.2s;
705
.app-menu-icon {
707
-st-icon-style: symbolic;
708
margin-left: 4px;
709
margin-right: 4px;
710
//dimensions of the icon are hardcoded
711
}
712
&:hover {
714
color: $osd_fg_color;
715
}
716
&:active, &:overview, &:focus, &:checked {
718
// Trick due to St limitations. It needs a background to draw
719
// a box-shadow
720
background-color: rgba(0, 0, 0, 0.01);
721
box-shadow: inset 0 -2px 0px $osd_indicator_color;
722
color: $osd_fg_color;
723
& > .system-status-icon { icon-shadow: none; }
725
}
726
.system-status-icon { icon-size: 1.09em; padding: 0 5px; }
728
.unlock-screen &,
729
.login-screen &,
730
.lock-screen & {
731
color: $osd_indicator_color;
732
&:focus, &:hover, &:active { color: $osd_fg_color; }
733
}
734
}
735
.panel-status-indicators-box,
737
.panel-status-menu-box {
738
spacing: 2px;
739
}
740
.screencast-indicator { color: $warning_color; }
742
}
743
// calendar popover
745
#calendarArea {
746
padding: 0.75em 1.0em;
747
}
748
.calendar {
750
margin-bottom: 1em;
751
}
752
.calendar,
754
.datemenu-today-button,
755
.datemenu-displays-box,
756
.message-list-sections {
757
margin: 0 1.5em;
758
}
759
.datemenu-calendar-column { spacing: 0.5em; }
761
.datemenu-displays-section { padding-bottom: 3em; }
762
.datemenu-today-button,
764
.world-clocks-button,
765
.message-list-section-title {
766
border-radius: 2px;
767
padding: .4em;
768
}
769
.message-list-section-list:ltr {
771
padding-left: .4em;
772
}
773
.message-list-section-list:rtl {
775
padding-right: .4em;
776
}
777
.datemenu-today-button,
779
.world-clocks-button,
780
.message-list-section-title {
781
&:hover,&:focus { color: $fg_color; background-color: $semi_fill_color; }
782
&:active {
783
color: $fg_color;
784
background-color: $fill_color;
785
}
786
}
787
.datemenu-today-button .day-label {
789
}
790
.datemenu-today-button .date-label {
792
font-size: 1.5em;
793
}
794
.world-clocks-header,
796
.message-list-section-title {
797
color: $secondary_fg_color;
798
font-weight: bold;
799
}
800
.world-clocks-grid {
802
spacing-rows: 0.4em;
803
}
804
.calendar-month-label {
806
color: $fg_color;
807
font-weight: bold;
808
padding: 4px 0;
809
&:focus {}
810
}
811
.pager-button {
813
color: $fg_color;
814
background-color: transparent;
815
width: 32px;
816
height: 32px;
817
border-radius: 32px;
818
&:hover, &:focus { background-color: $semi_fill_color; }
819
&:active { background-color: $fill_color; }
820
}
821
.calendar-change-month-back { //arrow back
823
background-image: url("calendar-arrow-left.svg");
824
&:rtl { background-image: url("calendar-arrow-right.svg"); }
825
}
826
.calendar-change-month-forward { //arrow foreward
827
background-image: url("calendar-arrow-right.svg");
828
&:rtl { background-image: url("calendar-arrow-left.svg"); }
829
}
830
.calendar-day-base {
832
font-size: smaller;
833
text-align: center;
834
width: 32px; height: 32px;
835
padding: 0;
836
margin: 2px;
837
border-radius: 32px;
838
&:hover,&:focus { background-color: $semi_fill_color; }
839
// &:active { background-color: $fill_color; }
840
&:active {
841
color: $selected_fg_color;
842
background-color: $selected_bg_color;
843
border-color: transparent; //avoid jumparound due to today
844
}
845
&.calendar-day-heading { //day of week heading
846
font-weight: bold;
847
color: $dim_fg_color;
848
margin-top: 1em;
849
font-size: smaller;
850
}
851
&.calendar-week-number { //day of week heading
852
font-weight: bold;
853
color: $dim_fg_color;
854
}
855
}
856
.calendar-day { //border collapse hack - see calendar.js
857
border-width: 0;
858
}
859
.calendar-day-top { border-top-width: 0; }
860
.calendar-day-left { border-left-width: 0; }
861
.calendar-work-day {
862
}
864
.calendar-nonwork-day {
865
color: $fg_color;
866
}
867
.calendar-today {
868
font-weight: bold !important;
869
//color: $fg_color;
870
//background-color: transparent;
871
border: none;
872
}
873
.calendar-day-with-events {
874
color: $link_color;
875
font-weight: normal;
876
text-decoration: underline;
877
background-image: none;
878
}
879
.calendar-other-month-day {
880
color: $dim_fg_color;
881
opacity: 0.5;
882
}
883
/* Message list */
885
.message-list {
886
width: 420px;
887
}
888
.message-list-sections {
890
spacing: 1.5em;
891
}
892
.message-list-section,
894
.message-list-section-list {
895
spacing: 0.7em;
896
}
897
.message-list-section-title-box {
899
spacing: 0.4em;
900
}
901
.message-list-section-close > StIcon {
903
icon-size: 16px;
904
border-radius: 16px;
905
padding: 8px;
906
color: $secondary_fg_color;
907
background-color: transparent;
908
}
909
/* FIXME: how do you do this in sass? */
911
.message-list-section-close:hover > StIcon,
912
.message-list-section-close:focus > StIcon {
913
color: $fg_color;
914
background-color: $semi_fill_color;
915
}
916
.message-list-section-close:active > StIcon {
918
color: $fg_color;
919
background-color: $fill_color;
920
}
921
.message {
923
background-color: transparent;
924
&:hover,&:focus { background-color: $semi_fill_color; }
925
&:active { background-color: $fill_color; }
926
border-radius: 2px;
927
}
928
.message-icon-bin {
930
padding: 8px 0px 8px 8px;
931
&:rtl { padding: 8px 8px 8px 0px; }
932
}
933
.message-icon-bin > StIcon {
935
icon-size: 32px;
936
}
937
.message-secondary-bin {
939
color: $dim_fg_color;
940
}
941
.message-secondary-bin > StIcon {
943
icon-size: 16px;
944
}
945
.message-title {
947
font-weight: bold;
948
font-size: 1.1em;
949
}
950
.message-content {
952
padding: 8px;
953
font-size: .9em;
954
}
955
.message-content * > StIcon {
957
icon-size: 16px;
958
border-radius: 16px;
959
padding: 2px;
960
color: $secondary_fg_color;
961
}
962
/* FIXME: how do you do this in sass? */
964
.message-content *:hover > StIcon,
965
.message-content *:focus > StIcon {
966
color: $fg_color;
967
background-color: $semi_fill_color;
968
}
969
.message-content *:active > StIcon {
971
color: $fg_color;
972
background-color: $fill_color;
973
}
974
// a little unstructured mess:
977
.system-switch-user-submenu-icon {
979
icon-size: 20px;
980
border: none;
981
}
982
#appMenu {
984
spinner-image: url("process-working.svg");
985
spacing: 4px;
986
.label-shadow { color: transparent; }
988
}
989
.aggregate-menu {
991
min-width: 280px;
992
.popup-menu-icon { padding: 0 4px; }
993
}
994
.system-menu-action {
996
color: $secondary_fg_color;
997
border-radius: 32px; /* wish we could do 50% */
998
padding: 16px;
999
border: none;
1000
&:hover, &:focus {
1002
background-color: $semi_fill_color;
1003
color: $fg_color;
1004
border: none;
1005
padding: 16px;
1006
}
1007
&:active { background-color: $fill_color; color: $fg_color; }
1008
& > StIcon { icon-size: 16px; }
1010
}
1011
//Activities Ripples
1013
.ripple-box {
1014
width: 52px;
1015
height: 52px;
1016
background-image: url("corner-ripple-ltr.svg");
1017
background-size: contain;
1018
}
1019
.ripple-box:rtl {
1021
background-image: url("corner-ripple-rtl.svg");
1022
}
1023
// not really top bar only
1025
.popup-menu-arrow { width: 16px; height: 16px; }
1026
.popup-menu-icon { icon-size: 1.09em; }
1027
//close buttons
1029
.window-close {
1031
height: 32px;
1032
width: 32px;
1033
-st-background-image-shadow: 0 1px 3px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.48);
1034
background-image: url("window-close.svg");
1035
background-size: 32px;
1036
&:hover { -st-background-image-shadow: 0 3px 6px rgba(0,0,0,0.32), 0 3px 6px rgba(0,0,0,0.46); }
1037
&:active { background-image: url("window-close-active.svg"); }
1038
}
1039
.window-close {
1040
-shell-close-overlap: 16px;
1041
&:rtl { -st-background-image-shadow: 0 1px 3px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.48); }
1042
&:rtl:hover { -st-background-image-shadow: 0 3px 6px rgba(0,0,0,0.32), 0 3px 6px rgba(0,0,0,0.46); }
1043
}
1044
/* NETWORK DIALOGS */
1046
.nm-dialog {
1048
max-height: 500px;
1049
min-height: 450px;
1050
min-width: 470px;
1051
}
1052
.nm-dialog-content { spacing: 20px; }
1054
.nm-dialog-header-hbox { spacing: 10px; }
1055
.nm-dialog-airplane-box { spacing: 12px; }
1056
.nm-dialog-airplane-headline {
1058
font-weight: bold;
1059
text-align: center;
1060
}
1061
.nm-dialog-airplane-text { color: $fg_color; }
1063
.nm-dialog-header-icon { icon-size: 32px; }
1064
.nm-dialog-scroll-view { border: 2px solid $borders_color; }
1065
.nm-dialog-header { font-weight: bold; }
1066
.nm-dialog-item {
1068
font-size: 110%;
1069
border-bottom: 1px solid $borders_color;
1070
padding: 12px;
1071
spacing: 20px;
1072
}
1073
.nm-dialog-item:selected {
1075
background-color: $selected_bg_color;
1076
color: $selected_fg_color;
1077
}
1078
.nm-dialog-icons { spacing: .5em; }
1080
.nm-dialog-icon { icon-size: 16px; }
1081
.no-networks-label { color: $dim_fg_color; }
1082
.no-networks-box { spacing: 12px; }
1083
/* OVERVIEW */
1085
#overview {
1087
spacing: 24px; //
1088
}
1089
.overview-controls {
1091
padding-bottom: 32px;
1092
}
1093
.window-picker { //container around window thumbnails
1095
-horizontal-spacing: 32px;
1096
-vertical-spacing: 32px;
1097
padding-left: 32px;
1098
padding-right: 32px;
1099
padding-bottom: 48px;
1100
&.external-monitor { padding: 32px; }
1102
}
1103
.window-clone-border {
1105
border: 4px solid $osd_fill_color;
1106
border-radius: 2px;
1107
// For window decorations with round corners we can't match
1108
// the exact shape when the window is scaled. So apply a shadow
1109
// to fix that case
1110
box-shadow: inset 0px 0px 0px 1px $osd_fill_color;
1111
}
1112
.window-caption {
1113
spacing: 25px;
1114
color: $osd_fg_color;
1115
background-color: transparent;
1116
border-radius: 2px;
1117
padding: 4px 8px;
1118
-shell-caption-spacing: 12px;
1119
&:hover { background-color: $osd_fill_color; color: $osd_fg_color; }
1120
}
1121
//search entry
1123
.search-entry {
1124
width: 320px;
1125
padding: 7px 8px 8px;
1126
border-radius: 0;
1127
color: $osd_dim_fg_color;
1128
selection-background-color: $osd_fill_color;
1129
selected-color: $osd_fg_color;
1130
@include entry(normal,$fc:$osd_semi_fill_color);
1131
&:focus {
1132
@include entry(focus,$fc:$osd_indicator_color);
1133
padding: 7px 8px 8px;
1134
border-width: 0;
1135
color: $osd_fg_color;
1136
}
1137
.search-entry-icon { icon-size: 1.09em; padding: 0 2px; color: $osd_dim_fg_color; }
1139
&:hover, &:focus {
1141
.search-entry-icon { color: $osd_fg_color; }
1142
}
1143
}
1144
//search results
1146
#searchResultsBin {
1148
max-width: 1000px;
1149
}
1150
#searchResultsContent {
1152
padding-left: 20px;
1153
padding-right: 20px;
1154
spacing: 16px;
1155
}
1156
.search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
1158
.search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container
1159
.search-statustext { // "no results"
1160
@extend %status_text;
1161
}
1162
.list-search-results { spacing: 3px; }
1163
.search-section-separator {
1165
-gradient-height: 1px;
1166
-gradient-start: rgba(255,255,255,0);
1167
-gradient-end: rgba(255,255,255,0.4);
1168
-margin-horizontal: 1.5em;
1169
height: 1px;
1170
}
1171
.list-search-result-content { spacing: 12px; padding: 12px; }
1173
.list-search-result-title { font-size: 1.5em; color: $osd_fg_color; }
1174
.list-search-result-description { color: $osd_indicator_color; }
1175
.search-provider-icon { padding: 15px; }
1176
.search-provider-icon-more {
1177
width: 16px;
1178
height: 16px;
1179
background-image: url("more-results.svg");
1180
}
1181
/* DASHBOARD */
1184
#dash {
1186
font-size: 9pt;
1187
color: $osd_fg_color;
1188
background-color: $osd_base_color;
1189
padding: 4px 0;
1190
border: none;
1191
border-left: 0px;
1192
border-radius: 0px 2px 2px 0px;
1193
&:rtl {
1195
border-radius: 2px 0 0 2px;
1196
}
1197
.placeholder {
1199
background-image: url("dash-placeholder.svg");
1200
background-size: contain;
1201
height: 24px;
1202
}
1203
.empty-dash-drop-target {
1205
width: 24px;
1206
height: 24px;
1207
}
1208
}
1210
.dash-item-container > StWidget {
1212
padding: 4px 8px;
1213
}
1214
.dash-label { //osd tooltip
1216
border-radius: 2px;
1217
padding: 4px 12px;
1218
color: $fg_color;
1219
background-color: $bg_color;
1220
@include shadow(2);
1221
text-align: center;
1222
-x-offset: 8px;
1223
}
1224
/* Add Dash to Dock Support */
1226
#dashtodockContainer #dash {
1228
background-color: $osd_bg_color;
1229
}
1230
#dashtodockContainer:overview #dash {
1232
background-color: $osd_base_color;
1233
}
1234
#dashtodockContainer.extended #dash {
1236
padding: 0;
1237
border-radius: 0;
1238
}
1239
#dashtodockContainer.extended:overview #dash {
1241
background-color: transparent;
1242
}
1243
#dashtodockContainer.extended .dash-item-container > StWidget {
1245
padding: 8px;
1246
}
1247
#dashtodockContainer .app-well-app-running-dot {
1249
background-color: transparent;
1250
}
1251
#dashtodockContainer .app-well-app .overview-icon {
1253
background-size: contain;
1254
}
1255
#dashtodockContainer .app-well-app.running1 .overview-icon {
1257
background-image: url("running1.svg");
1258
}
1259
#dashtodockContainer .app-well-app.running1.focused .overview-icon {
1261
background-image: url("running1-focused.svg");
1262
}
1263
#dashtodockContainer .app-well-app.running2 .overview-icon {
1265
background-image: url("running2.svg");
1266
}
1267
#dashtodockContainer .app-well-app.running2.focused .overview-icon {
1269
background-image: url("running2-focused.svg");
1270
}
1271
#dashtodockContainer .app-well-app.running3 .overview-icon {
1273
background-image: url("running3.svg");
1274
}
1275
#dashtodockContainer .app-well-app.running3.focused .overview-icon {
1277
background-image: url("running3-focused.svg");
1278
}
1279
#dashtodockContainer .app-well-app.running4 .overview-icon {
1281
background-image: url("running4.svg");
1282
}
1283
#dashtodockContainer .app-well-app.running4.focused .overview-icon {
1285
background-image: url("running4-focused.svg");
1286
}
1287
/* Add Simple Dock Support */
1289
#dash:desktop {
1291
background-color: $osd_bg_color;
1292
}
1293
/* App Vault/Grid */
1295
.icon-grid {
1296
spacing: 30px;
1297
-shell-grid-horizontal-item-size: 136px;
1298
-shell-grid-vertical-item-size: 136px;
1299
.overview-icon { icon-size: 96px; }
1301
}
1302
//.app-display { spacing: 20px; }
1303
.app-view-controls { //favorties | all toggle container
1305
width: 320px;
1306
padding-bottom: 32px;
1307
}
1308
.app-view-control { //favorties | all toggle button
1309
padding: 7px 32px 8px;
1310
font-weight: bold;
1311
color: $osd_indicator_color;
1312
&:hover {
1313
color: $osd_fg_color;
1314
background-color: $osd_semi_fill_color !important;
1315
}
1316
&:active {
1317
color: $osd_fg_color;
1318
background-color: $osd_fill_color !important;
1319
}
1320
&:checked {
1321
color: $osd_fg_color;
1322
background-color: rgba(0, 0, 0, 0.01) !important;
1323
box-shadow: inset 0 2px 0px $osd_indicator_color;
1324
}
1325
&:first-child {
1326
border-right-width: 0;
1327
border-radius: 2px;
1328
&:checked { border-radius: 0; }
1329
}
1330
&:last-child {
1331
border-radius: 2px;
1332
&:checked { border-radius: 0; }
1333
}
1334
}
1335
//Icon tile
1337
.search-provider-icon,
1338
.list-search-result {
1339
@extend %icon_tile;
1340
&:focus, &:selected, &:hover {
1341
background-color: $osd_semi_fill_color;
1342
transition-duration: 0s;
1343
}
1344
&:active, &:checked {
1345
background-color: $osd_fill_color;
1346
transition-duration: 0.2s;
1347
}
1348
}
1349
.app-well-app,
1350
.app-well-app.app-folder,
1351
.show-apps,
1352
.grid-search-result {
1353
& .overview-icon {
1354
@extend %icon_tile;
1355
}
1356
&:hover .overview-icon,
1357
&:focus .overview-icon,
1358
&:selected .overview-icon {
1359
background-color: $osd_semi_fill_color;
1360
transition-duration: 0s;
1361
border-image: none;
1362
background-image: none;
1363
}
1364
&:active .overview-icon,
1365
&:checked .overview-icon {
1366
background-color: $osd_fill_color;
1367
box-shadow: 0 0 transparent;
1368
transition-duration: 0.2s;
1369
}
1370
}
1372
.app-well-app-running-dot { //running apps indicator
1374
width: 32px; height: 2px;
1375
background-color: $osd_indicator_color;
1376
margin-bottom: 0;
1377
}
1378
%icon_tile {
1380
color: $osd_fg_color;
1381
border-radius: 2px;
1382
padding: 6px;
1383
border: none;
1384
transition-duration: 0.2s;
1385
text-align: center;
1386
}
1387
.app-well-app.app-folder > .overview-icon {
1389
background-color: $osd_base_color;
1390
}
1391
.show-apps .show-apps-icon {
1393
color: $osd_indicator_color;
1394
}
1395
.show-apps:hover .show-apps-icon,
1397
.show-apps:active .show-apps-icon,
1398
.show-apps:checked .show-apps-icon,
1399
.show-apps:focus .show-apps-icon {
1400
color: $osd_fg_color;
1401
transition-duration: 0.2s;
1402
}
1403
// Collections
1406
.app-folder-popup { //expanded collection
1407
-arrow-border-radius: 2px;
1408
-arrow-background-color: $osd_base_color;
1409
-arrow-base: 24px;
1410
-arrow-rise: 12px;
1411
}
1412
.app-folder-popup-bin { padding: 5px; }
1413
.app-folder-icon {
1414
padding: 5px;
1415
spacing-rows: 5px;
1416
spacing-columns: 5px;
1417
}
1418
.page-indicator {
1420
padding: 15px 20px;
1421
.page-indicator-icon {
1423
width: 12px;
1424
height: 12px;
1425
border-radius: 12px;
1426
background-image: none;
1427
background-color: transparentize($osd_fg_color, 0.7);
1428
}
1429
&:hover .page-indicator-icon { background-image: none; background-color: transparentize($osd_fg_color, 0.6); }
1431
&:active .page-indicator-icon { background-image: none; background-color: transparentize($osd_fg_color, 0.5); }
1432
&:checked .page-indicator-icon,
1433
&:checked:active { background-image: none; background-color: $osd_fg_color; }
1434
}
1435
.no-frequent-applications-label { @extend %status_text; }
1437
.app-well-app > .overview-icon.overview-icon-with-label,
1439
.grid-search-result .overview-icon.overview-icon-with-label {
1440
padding: 10px 8px 5px 8px;
1441
spacing: 4px;
1442
}
1443
// Workspace pager
1445
.workspace-thumbnails { //container ala dash
1446
@extend %overview-panel;
1447
visible-width: 32px; //amount visible before hover
1448
spacing: 12px;
1449
padding: 12px;
1450
border-radius: 2px 0 0 2px;
1451
//border-width: 0; //fixme: can't have non unoform borders :(
1452
&:rtl { border-radius: 0 2px 2px 0;}
1453
}
1454
.workspace-thumbnail-indicator {
1455
border: 0 solid $osd_indicator_color;
1456
border-left-width: 2px;
1457
padding: 6px;
1458
border-radius: 0;
1459
}
1460
//Some hacks I don't even
1462
.search-display > StBoxLayout,
1463
.all-apps,
1464
.frequent-apps > StBoxLayout {
1465
// horizontal padding to make sure scrollbars or dash don't overlap content
1466
padding: 0px 88px 10px 88px;
1467
}
1468
%overview-panel {
1470
color: $osd_fg_color;
1471
background-color: $osd_base_color;
1472
border: none;
1473
}
1474
%status_text {
1476
font-size: 2em;
1477
font-weight: bold;
1478
color: $osd_dim_fg_color;
1479
}
1480
/* Add Dash to Dock Support */
1482
#workspacestodockContainer .workspace-thumbnails {
1484
background-color: $osd_bg_color;
1485
}
1486
#workspacestodockContainer:overview .workspace-thumbnails {
1488
background-color: $osd_base_color;
1489
}
1490
#workspacestodockContainer.fullheight:overview .workspace-thumbnails {
1492
background-color: transparent;
1493
}
1494
#workspacestodockContainer.right .workspace-thumbnails {
1496
border-radius: 2px 0 0 2px;
1497
}
1498
#workspacestodockContainer.left .workspace-thumbnails {
1500
border-radius: 0 2px 2px 0;
1501
}
1502
/* NOTIFICATIONS & MESSAGE TRAY */
1504
.url-highlighter { link-color: $link_color; }
1506
// Banners
1508
.notification-banner {
1509
font-size: 11pt;
1510
width: 34em;
1511
margin: 5px;
1512
border-radius: 2px;
1513
color: $fg_color;
1514
background-color: $bg_color;
1515
border: none;
1516
@include shadow(2);
1517
&:hover { background-color: $bg_color; }
1518
&:focus { background-color: $bg_color; }
1519
.notification-icon { padding: 5px; }
1521
.notification-content { padding: 5px; spacing: 5px; }
1522
.secondary-icon { icon-size: 1.09em; }
1523
.notification-actions {
1524
background-color: transparent;
1525
padding-top: 0;
1526
border-top: 1px solid $fill_color;
1527
spacing: 1px;
1528
}
1529
.notification-button {
1530
padding: 9px 4px 10px;
1531
background-color: transparent;
1532
color: $secondary_fg_color;
1533
font-weight: 500;
1534
&:first-child { border-radius: 0 0 0 2px; }
1535
&:last-child { border-radius: 0 0 2px 0; }
1536
&:hover, &focus { background-color: $semi_fill_color; color: $fg_color; }
1537
&:active { background-color: $fill_color; color: $fg_color; }
1538
}
1539
}
1540
.summary-source-counter {
1541
font-size: 10pt;
1542
font-weight: bold;
1543
height: 1.6em; width: 1.6em;
1544
-shell-counter-overlap-x: 3px;
1545
-shell-counter-overlap-y: 3px;
1546
background-color: $selected_bg_color;
1547
color: $selected_fg_color;
1548
border: 2px solid $osd_fg_color;
1549
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
1550
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
1551
}
1552
.secondary-icon { icon-size: 1.09em; }
1554
//chat bubbles
1556
.chat-body { spacing: 5px; }
1557
.chat-response { margin: 5px; }
1558
.chat-log-message { color: transparentize($fg_color, 0.0); }
1559
.chat-new-group { padding-top: 1em; }
1560
.chat-received {
1561
padding-left: 4px;
1562
&:rtl { padding-left: 0px; padding-right: 4px; }
1563
}
1564
.chat-sent {
1565
padding-left: 18pt;
1566
color: transparentize($fg_color, 0.2);
1567
&:rtl { padding-left: 0; padding-right: 18pt; }
1568
}
1569
.chat-meta-message {
1570
padding-left: 4px;
1571
font-size: 9pt;
1572
font-weight: bold;
1573
color: transparentize($fg_color, 0.4);
1574
&:rtl { padding-left: 0; padding-right: 4px; }
1575
}
1576
//hotplug
1578
.hotplug-transient-box {
1579
spacing: 6px;
1580
padding: 2px 72px 2px 12px;
1581
}
1582
.hotplug-notification-item {
1583
padding: 2px 10px;
1584
&:focus { padding: 1px 71px 1px 11px; }
1585
}
1586
.hotplug-notification-item-icon {
1588
icon-size: 24px;
1589
padding: 2px 5px;
1590
}
1591
.hotplug-resident-box { spacing: 8px; }
1593
.hotplug-resident-mount {
1595
spacing: 8px;
1596
border-radius: 2px;
1597
&:hover { background-color: $semi_fill_color; }
1598
&:active { background-color: $fill_color; }
1599
}
1600
.hotplug-resident-mount-label {
1602
color: inherit;
1603
padding-left: 6px;
1604
}
1605
.hotplug-resident-mount-icon {
1607
icon-size: 24px;
1608
padding-left: 6px;
1609
}
1610
.hotplug-resident-eject-icon {
1612
icon-size: 16px;
1613
}
1614
.hotplug-resident-eject-button {
1616
padding: 7px;
1617
border-radius: 2px;
1618
color: $fg_color;
1619
}
1620
/* Eeeky things */
1622
$legacy_icon_size: 24px;
1624
.legacy-tray {
1626
background-color: $bg_color;
1627
border: none;
1628
border-bottom-width: 0;
1629
@include shadow(2);
1630
&:ltr { border-radius: 0 2px 0 0; border-left-width: 0; }
1631
&:rtl { border-radius: 2px 0 0 0; border-right-width: 0; }
1632
}
1633
.legacy-tray-handle,
1635
.legacy-tray-icon {
1636
padding: 6px;
1637
& StIcon { icon-size: $legacy_icon_size; }
1638
&:hover,&:focus { background-color: $semi_fill_color; }
1639
&:active { background-color: $fill_color; }
1640
}
1641
.legacy-tray-icon-box {
1643
spacing: 12px;
1644
&:ltr { padding-left: 12px; }
1645
&:rtl { padding-right: 12px; }
1646
& StButton { width: $legacy_icon_size; height: $legacy_icon_size }
1647
}
1648
//magnifier
1650
.magnifier-zoom-region {
1652
border: 2px solid $selected_bg_color;
1653
&.full-screen { border-width: 0; }
1654
}
1655
//Keyboard
1657
/* On-screen Keyboard */
1658
#keyboard {
1660
background-color: transparentize($osd_bg_color, 0.3);
1661
}
1662
.keyboard-layout {
1664
spacing: 10px;
1665
padding: 10px;
1666
}
1667
.keyboard-row { spacing: 15px; }
1669
.keyboard-key {
1671
min-height: 2em;
1672
min-width: 2em;
1673
font-size: 2em;
1674
font-weight: bold;
1675
border-radius: 2px;
1676
border: none;
1677
color: inherit;
1678
@include button(normal);
1679
&:focus { @include button(focus); }
1680
&:hover,&:checked { @include button(hover); }
1681
&:active { @include button(active);}
1682
&:grayed { //FIXME
1683
background-color: $osd_bg_color;
1684
color: $osd_fg_color;
1685
border-color: $osd_borders_color;
1686
}
1687
}
1688
.keyboard-subkeys { //long press on a key popup
1690
color: inherit;
1691
padding: 5px;
1692
-arrow-border-radius: 0;
1693
-arrow-background-color: transparent;
1694
-arrow-border-width: 0;
1695
-arrow-border-color: transparent;
1696
-arrow-base: 0;
1697
-arrow-rise: 0;
1698
-boxpointer-gap: 5px;
1699
background-color: $bg_color;
1700
border-radius: 2px;
1701
@include shadow(2);
1702
}
1703
// IBus Candidate Popup
1705
.candidate-popup-content {
1707
padding: 0.5em;
1708
spacing: 0.3em;
1709
}
1710
.candidate-index {
1712
padding: 0 0.5em 0 0;
1713
color: $dim_fg_color;
1714
}
1715
.candidate-box {
1717
transition-duration: 0s;
1718
padding: 0.3em 0.5em 0.3em 0.5em;
1719
border-radius: 2px;
1720
&:hover { background-color: $semi_fill_color; color: $fg_color; }
1721
&:active { background-color: $fill_color; color: $fg_color; }
1722
&:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
1723
}
1724
.candidate-page-button-box {
1726
height: 2em;
1727
.vertical & { padding-top: 0.5em; }
1728
.horizontal & { padding-left: 0.5em; }
1729
}
1730
.candidate-page-button {
1732
padding: 4px;
1733
}
1734
.candidate-page-button-previous { border-radius: 2px; border-right-width: 0; }
1736
.candidate-page-button-next { border-radius: 2px; }
1737
.candidate-page-button-icon { icon-size: 1.09em; }
1738
/* Auth Dialogs & Screen Shield */
1740
.framed-user-icon {
1742
background-size: contain;
1743
border: none;
1744
color: $osd_fg_color;
1745
border-radius: 2px;
1746
&:hover {
1747
border-color: $osd_fg_color;
1748
color: $osd_fg_color;
1749
}
1750
}
1751
// LOGIN DIALOG
1753
.login-dialog-banner-view {
1755
padding-top: 24px;
1756
max-width: 23em;
1757
}
1758
.login-dialog {
1760
//reset
1761
border: none;
1762
background-color: transparent;
1763
StEntry {
1765
color: $osd_fg_color;
1766
selection-background-color: $osd_fill_color;
1767
selected-color: $osd_fg_color;
1768
@include entry(normal, $fc:$osd_semi_fill_color);
1769
&:focus { @include entry(focus, $fc:$osd_indicator_color); }
1770
&:insensitive {
1771
@include entry(insensitive, $fc:$insensitive_osd_fill_color);
1772
color: $insensitive_osd_fg_color;
1773
}
1774
}
1775
.modal-dialog-button-box { spacing: 3px; }
1777
.modal-dialog-button {
1778
padding: 7px 16px 8px;
1779
@include button(flat-normal, $tc:$osd_secondary_fg_color);
1780
&:hover,&:focus { @include button(flat-hover, $c:$osd_semi_fill_color, $tc:$osd_fg_color); }
1781
&:active { @include button(flat-active, $c:$osd_fill_color, $tc:$osd_fg_color); }
1782
&:insensitive { @include button(flat-insensitive, $tc:$insensitive_osd_secondary_fg_color); }
1783
&:default {
1784
@include button(normal, $c:$selected_bg_color, $tc:$osd_fg_color);
1785
&:hover,&:focus { @include button(hover, $c:$selected_bg_color, $tc:$osd_fg_color); }
1786
&:active { @include button(active, $c:$selected_bg_color, $tc:$osd_fg_color); }
1787
&:insensitive { @include button(insensitive, $c:$insensitive_osd_fill_color, $tc:$insensitive_osd_fg_color); }
1788
}
1790
}
1791
}
1793
.login-dialog-logo-bin { padding: 24px 0px; }
1795
.login-dialog-banner { color: $osd_secondary_fg_color; }
1796
.login-dialog-button-box { spacing: 5px; }
1797
.login-dialog-message-warning { color: $warning_color; }
1798
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
1799
.login-dialog-user-selection-box {
1800
padding: 100px 0px;
1801
.login-dialog-not-listed-label {
1802
padding-left: 2px;
1803
.login-dialog-not-listed-button:focus &,
1804
.login-dialog-not-listed-button:hover & {
1805
color: $osd_fg_color;
1806
}
1807
}
1808
}
1809
.login-dialog-not-listed-label {
1810
font-size: 90%;
1811
font-weight: bold;
1812
color: $osd_secondary_fg_color;
1813
padding-top: 1em;
1814
&:hover { color: $osd_fg_color; }
1815
&:focus { background-color: $osd_semi_fill_color; }
1816
}
1817
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
1819
.login-dialog-user-list {
1820
spacing: 12px;
1821
padding: .2em;
1822
width: 23em;
1823
&:expanded .login-dialog-user-list-item:focus { background-color: $osd_semi_fill_color; color: $osd_fg_color; }
1824
&:expanded .login-dialog-user-list-item:hover { background-color: $osd_semi_fill_color; color: $osd_fg_color; }
1825
&:expanded .login-dialog-user-list-item:active { background-color: $osd_fill_color; color: $osd_fg_color; }
1826
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $osd_indicator_color; }
1827
}
1828
.login-dialog-user-list-item {
1829
border-radius: 2px;
1830
padding: .2em;
1831
color: $osd_secondary_fg_color;
1832
&:ltr { padding-right: 1em; }
1833
&:rtl { padding-left: 1em; }
1834
&:hover { background-color: $osd_semi_fill_color; color: $osd_fg_color; }
1835
&:active { background-color: $osd_fill_color; color: $osd_fg_color; }
1836
.login-dialog-timed-login-indicator {
1837
height: 2px;
1838
margin: 2px 0 0 0;
1839
background-color: $osd_fg_color;
1840
}
1841
&:focus .login-dialog-timed-login-indicator { background-color: $osd_fg_color; }
1842
}
1843
.login-dialog-username,
1845
.user-widget-label {
1846
color: $osd_fg_color;
1847
font-size: 120%;
1848
font-weight: bold;
1849
text-align: left;
1850
padding-left: 15px;
1851
}
1852
.user-widget-label {
1853
&:ltr { padding-left: 18px; }
1854
&:rtl { padding-right: 18px; }
1855
}
1856
.login-dialog-prompt-layout {
1858
padding-top: 24px;
1859
padding-bottom: 12px;
1860
spacing: 8px;
1861
width: 23em;
1862
}
1863
.login-dialog-prompt-label {
1865
color: $osd_dim_fg_color;
1866
font-size: 1em;
1867
padding-top: 1em;
1868
}
1869
.login-dialog-session-list-button StIcon {
1871
icon-size: 1.25em;
1872
}
1873
.login-dialog-session-list-button {
1875
color: $osd_secondary_fg_color;
1876
&:hover,&:focus { color: $osd_fg_color; }
1877
&:active { color: $osd_fg_color; }
1878
}
1879
//SCREEN SHIELD
1881
.screen-shield-arrows {
1883
padding-bottom: 3em;
1884
}
1885
.screen-shield-arrows Gjs_Arrow {
1887
color: white;
1888
width: 80px;
1889
height: 48px;
1890
-arrow-thickness: 12px;
1891
-arrow-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
1892
}
1893
.screen-shield-clock {
1895
color: white;
1896
text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
1897
font-weight: normal;
1898
text-align: center;
1899
padding-bottom: 1.5em;
1900
}
1901
.screen-shield-clock-time {
1903
font-size: 112px;
1904
font-weight: 300;
1905
text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
1906
}
1907
.screen-shield-clock-date { font-size: 45px; }
1909
.screen-shield-notifications-container {
1911
spacing: 6px;
1912
width: 30em;
1913
background-color: transparent;
1914
max-height: 500px;
1915
.summary-notification-stack-scrollview {
1916
padding-top: 0;
1917
padding-bottom: 0;
1918
}
1919
.notification,
1921
.screen-shield-notification-source {
1922
padding: 12px 6px;
1923
border: none;
1924
background-color: $osd_bg_color;
1925
color: $osd_fg_color;
1926
border-radius: 2px;
1927
}
1928
.notification { margin-right: 15px; } //compensate for space allocated to the scrollbar
1929
}
1930
.screen-shield-notification-label {
1933
font-weight: bold;
1934
padding: 0px 0px 0px 12px;
1935
}
1936
.screen-shield-notification-count-text { padding: 0px 0px 0px 12px; }
1938
#panel.lock-screen { background-color: $osd_bg_color; }
1940
.screen-shield-background { //just the shadow, really
1942
background: black;
1943
@include shadow(5);
1944
}
1945
#lockDialogGroup {
1947
background: #333333 url(noise-texture.png);
1948
background-repeat: repeat;
1949
}
1950
#screenShieldNotifications {
1952
StButton#vhandle, StButton#hhandle {
1953
background-color: transparentize($osd_fg_color,0.4);
1954
&:hover, &:focus { background-color: transparentize($osd_fg_color,0.2); }
1955
&:active { background-color: transparentize($osd_fg_color,0.0); }
1956
}
1957
}
1958
// Looking Glass
1961
#LookingGlassDialog {
1962
background-color: $bg_color;
1963
spacing: 4px;
1964
padding: 0;
1965
border: none;
1966
border-radius: 2px;
1967
@include shadow(4);
1968
& > #Toolbar {
1969
padding: 0 8px;
1970
border: none;
1971
border-radius: 0;
1972
background-color: rgba(0, 0, 0, 0.01);
1973
box-shadow: inset 0 -1px 0px $borders_color;
1974
}
1975
.labels { spacing: 0; }
1976
.notebook-tab {
1977
-natural-hpadding: 12px;
1978
-minimum-hpadding: 6px;
1979
font-weight: bold;
1980
color: $dim_fg_color;
1981
transition-duration: 0.2s;
1982
padding-left: .3em;
1983
padding-right: .3em;
1984
padding: 7px 32px 8px;
1985
&:hover {
1986
color: $fg_color;
1987
text-shadow: none;
1988
}
1989
&:selected {
1990
border-bottom-width: 0;
1991
border-color: transparent;
1992
background-color: rgba(0, 0, 0, 0.01);
1993
box-shadow: inset 0 -2px 0px $selected_bg_color;
1994
color: $fg_color;
1995
text-shadow: none;
1996
}
1997
}
1998
StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
1999
StBoxLayout#ResultsArea { spacing: 4px; }
2000
}
2001
.lg-dialog {
2003
StEntry {
2004
selection-background-color: $selected_bg_color;
2005
selected-color: $selected_fg_color;
2006
}
2007
.shell-link {
2008
color: $link_color;
2009
&:hover { color: $link_color; }
2010
}
2011
}
2012
.lg-completions-text {
2014
font-size: .9em;
2015
font-style: italic;
2016
}
2017
.lg-obj-inspector-title {
2019
spacing: 4px;
2020
}
2021
.lg-obj-inspector-button {
2023
border: 1px solid gray;
2024
padding: 4px;
2025
border-radius: 2px;
2026
&:hover { border: 1px solid #ffffff; }
2027
}
2028
#lookingGlassExtensions { padding: 4px; }
2030
.lg-extensions-list {
2032
padding: 4px;
2033
spacing: 6px;
2034
}
2035
.lg-extension {
2037
border: none;
2038
border-radius: 2px;
2039
padding: 4px;
2040
}
2041
.lg-extension-name {
2043
font-weight: bold;
2044
font-size: 1.5em;
2045
}
2046
.lg-extension-meta {
2048
spacing: 6px;
2049
}
2050
#LookingGlassPropertyInspector {
2052
background: $bg_color;
2053
border: none;
2054
border-radius: 2px;
2055
padding: 6px;
2056
@include shadow(4);
2057
}
2058