ASCII text
1
@use "../../theme";
2
@use "../../theme-color";
3
@use "drawing";
4
* {
6
// padding: 0;
7
-GtkToolButton-icon-spacing: 0;
9
-GtkTextView-error-underline-color: theme-color.$error;
10
// The size for scrollbars. The slider is 2px smaller, but we keep it
12
// up so that the whole area is sensitive to button presses for the
13
// slider. The stepper button is larger in both directions, the slider
14
// only in the width
15
-GtkScrolledWindow-scrollbar-spacing: 0;
17
-GtkToolItemGroup-expander-size: 11;
19
-GtkWidget-text-handle-width: 24;
21
-GtkWidget-text-handle-height: 24;
22
-GtkDialog-button-spacing: theme.$container-padding / 1px;
24
-GtkDialog-action-area-border: theme.$container-padding / 1px;
25
-gtk-secondary-caret-color: theme-color.$primary;
27
// We use the outline properties to signal the focus properties
29
// to the adwaita engine: using real CSS properties is faster,
30
// and we don't use any outlines for now.
31
outline: 2px solid transparent;
33
outline-offset: -4px;
34
-gtk-outline-radius: theme.$corner-radius;
35
&:focus {
37
outline-color: theme-color.focus-overlay(theme-color.$on-surface);
38
}
39
}
40
/**
42
* Base States
43
*/
44
.background {
46
background-color: theme-color.$surface-z0;
47
color: theme-color.$on-surface;
48
}
49
/*
51
These wildcard seems unavoidable, need to investigate.
52
Wildcards are bad and troublesome, use them with care,
53
or better, just don't.
54
Everytime a wildcard is used a kitten dies, painfully.
55
*/
56
*:disabled {
58
-gtk-icon-effect: dim;
59
}
60
.gtkstyle-fallback {
62
background-color: theme-color.$surface-z0;
63
color: theme-color.$on-surface;
64
&:hover {
66
background-color: theme-color.hover-overlay(theme-color.$on-surface, $on: theme-color.$surface-z0);
67
}
68
&:active {
70
background-color: theme-color.pressed-overlay(theme-color.$on-surface, $on: theme-color.$surface-z0);
71
}
72
&:disabled {
74
color: theme-color.disabled(theme-color.$on-surface);
75
}
76
&:selected {
78
background-color: theme-color.$primary;
79
color: theme-color.$on-primary;
80
}
81
}
82
.view {
84
// background-color: $surface-z0;
85
// color: $on-surface;
86
&:hover {
88
background-color: theme-color.hover-overlay(theme-color.$on-surface, $alt: true);
89
}
90
&:selected:hover {
92
background-color: theme-color.hover-overlay(theme-color.$primary, $alt: true, $on: theme-color.$selected-overlay);
93
}
94
&:disabled {
96
color: theme-color.disabled(theme-color.$on-surface);
97
}
98
&:hover,
100
&:selected {
101
border-radius: theme.$corner-radius;
102
}
103
selection,
105
&:selected {
106
background-color: theme-color.$selected-overlay;
107
}
108
}
109
textview {
111
// FIXME: we need to override background-color to ensure text rendering
112
text {
113
background-color: theme-color.$surface-z0;
114
caret-color: theme-color.$primary;
115
frame:not(.flat) &,
117
.frame & {
118
background-color: theme-color.$surface-z1;
119
}
120
popover.background & {
122
background-color: theme-color.$surface-z8;
123
}
124
messagedialog.background & {
126
background-color: theme-color.$surface-z8;
127
}
128
}
129
border {
131
// background-color: $surface-z0;
132
color: theme-color.hint(theme-color.$on-surface); // FIXME: not working
133
}
134
}
135
iconview {
137
// @extend .view;
138
}
139
%iconview-desktop {
141
// background-color: $scrim;
142
color: theme-color.$on-dark;
143
text-shadow: theme.$text-shadow;
144
.rubberband,
146
rubberband {
147
border: 1px solid theme-color.primary(theme-color.$on-dark);
148
background-color: rgba(theme-color.primary(theme-color.$on-dark), .3);
149
}
150
}
151
%rubberband,
153
.rubberband,
154
rubberband {
155
border: 1px solid theme-color.$primary;
156
background-color: rgba(theme-color.$primary, .24);
157
}
158
flowbox {
160
rubberband {
161
@extend %rubberband;
162
}
163
flowboxchild {
165
padding: 4px;
166
border-radius: theme.$corner-radius;
167
&:selected {
169
background-color: theme-color.$selected-overlay;
170
}
171
}
172
}
173
.content-view .tile {
175
// margin: 2px;
176
// padding: 0;
177
// border-radius: 0;
178
// background-color: black;
179
&:selected {
181
background-color: transparent;
182
}
183
}
184
label {
186
caret-color: theme-color.$primary; // this shouldn't be needed.
187
&.separator {
189
color: theme-color.hint(theme-color.$on-surface);
190
}
191
&.error {
193
color: theme-color.$error;
194
}
195
selection {
197
background-color: theme-color.$selected-overlay;
198
}
199
&:disabled {
201
color: theme-color.disabled(theme-color.$on-surface);
202
headerbar &,
204
menuitem &,
205
tab &,
206
button & {
207
color: inherit;
208
}
209
}
210
&.osd {
212
border-radius: theme.$corner-radius;
213
background-color: theme-color.$tooltip;
214
color: theme-color.$on-tooltip;
215
}
216
}
217
.dim-label {
219
color: theme-color.hint(theme-color.$on-surface);
220
}
221
assistant {
223
.sidebar {
224
padding: 4px 0;
225
}
226
.sidebar label {
228
min-height: theme.$medium-size;
229
margin: 0 4px;
230
padding: 0 8px;
231
border-radius: theme.$corner-radius;
232
color: theme-color.disabled(theme-color.$on-surface);
233
font-weight: 500;
234
&.highlight {
236
background-color: theme-color.activated-overlay(theme-color.$primary);
237
color: theme-color.$primary;
238
}
239
}
240
}
241
%osd,
243
.osd {
244
// opacity: .9;
245
}
246
/**
248
* Spinner Animation
249
*/
250
@keyframes spin {
252
to {
253
-gtk-icon-transform: rotate(1turn);
254
}
255
}
256
spinner {
258
background: none;
259
opacity: 0; // non spinning spinner makes no sense
260
color: theme-color.$primary;
261
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
262
transition: opacity theme.$duration * 4 theme.$ease-out;
263
animation: spin 1s linear infinite;
264
&:checked {
266
opacity: 1;
267
}
268
&:disabled {
270
color: theme-color.disabled-hint(theme-color.$on-surface);
271
}
272
}
273
/**
275
* General Typography
276
*/
277
@function pt($size: $font-size) {
279
@return ($size * .75 / 1px) * 1pt;
280
}
281
.large-title {
283
font-weight: 400;
284
font-size: pt(48px);
285
}
286
.title-1 {
288
font-weight: 400;
289
font-size: pt(34px);
290
letter-spacing: pt(.25px);
291
}
292
.title-2 {
294
font-weight: 400;
295
font-size: pt(24px);
296
}
297
.title-3 {
299
font-weight: 500;
300
font-size: pt(20px);
301
letter-spacing: pt(.15px);
302
}
303
.title-4 {
305
font-weight: 400;
306
font-size: pt(16px);
307
letter-spacing: pt(.5px);
308
}
309
.heading {
311
font-weight: 500;
312
font-size: 1em;
313
}
314
.body {
316
font-weight: 400;
317
font-size: 1em;
318
}
319
.caption-heading {
321
font-weight: 500;
322
font-size: pt(12px);
323
letter-spacing: pt(1.5px);
324
}
325
.caption {
327
font-weight: 400;
328
font-size: pt(12px);
329
letter-spacing: pt(.4px);
330
}
331
/**
333
* Text Entries
334
*/
335
%entry,
337
entry {
338
min-height: theme.$medium-size;
339
padding: 0 8px;
340
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
341
@include drawing.entry(normal);
343
&:focus {
345
@include drawing.entry(checked);
346
}
347
&:drop(active) {
349
@include drawing.entry(hover);
350
}
351
&:disabled {
353
@include drawing.entry(disabled);
354
}
355
&.flat {
357
min-height: 0;
358
padding: 2px;
359
border-radius: 0;
360
background-color: transparent;
361
}
362
// icons inside the entry
364
image {
365
color: theme-color.hint(theme-color.$on-surface);
366
&:hover,
368
&:active {
369
color: theme-color.$on-surface;
370
}
371
&:disabled {
373
color: theme-color.disabled(theme-color.$on-surface);
374
}
375
&.left {
377
margin-left: (theme.$medium-size - 16px) / 2 - 8px;
378
margin-right: 6px;
379
}
380
&.right {
382
margin-left: 6px;
383
margin-right: (theme.$medium-size - 16px) / 2 - 8px;
384
}
385
}
386
undershoot {
388
&.left {
389
// @include undershoot(left);
390
}
391
&.right {
393
// @include undershoot(right);
394
}
395
}
396
selection {
398
background-color: theme-color.$selected-overlay;
399
}
400
// entry error and warning style
402
@each $class, $color in (".error": theme-color.$error, ".warning": theme-color.$warning) {
403
&#{$class} {
404
@include drawing.entry(normal, $color);
405
&:focus {
407
@include drawing.entry(checked, $color);
408
}
409
&:disabled {
411
@include drawing.entry(disabled, $color);
412
}
413
}
414
}
415
.osd & {
417
}
418
progress {
420
margin: 0 -8px -4px;
421
border-bottom: 2px solid theme-color.$primary;
422
background-color: transparent;
423
}
424
// linked entries
426
.linked:not(.vertical) > & {
427
@extend %linked;
428
}
429
// Vertically linked entries
431
.linked.vertical > & {
432
@extend %linked-vertical;
433
}
434
}
435
%entry_raised {
437
border-radius: theme.$corner-radius;
438
@include drawing.entry(raised-normal);
440
&:focus {
442
@include drawing.entry(raised-focus);
443
}
444
&:drop(active) {
446
@include drawing.entry(raised-hover);
447
}
448
&:disabled {
450
@include drawing.entry(raised-disabled);
451
}
452
// entry error and warning style
454
@each $class, $color in (".error": theme-color.$error, ".warning": theme-color.$warning) {
455
&#{$class} {
456
@include drawing.entry(raised-normal, $color);
457
&:focus {
459
@include drawing.entry(raised-focus, $color);
460
}
461
&:disabled {
463
@include drawing.entry(raised-disabled, $color);
464
}
465
image {
467
color: theme-color.hint(theme-color.on($color));
468
&:hover,
470
&:active {
471
color: theme-color.on($color);
472
}
473
&:disabled {
475
color: theme-color.disabled(theme-color.on($color));
476
}
477
}
478
}
479
}
480
}
481
treeview entry {
483
&,
484
&.flat {
485
background-color: theme-color.$surface-z1;
486
&,
488
&:focus {
489
border-image: none;
490
box-shadow: none;
491
}
492
}
493
}
494
.entry-tag {
496
margin: 2px;
497
border-radius: theme.$circular-radius;
498
box-shadow: none;
499
background-color: theme-color.fill(theme-color.$on-surface);
500
color: theme-color.$on-surface;
501
&:hover {
503
background-image: image(theme-color.hover-overlay(theme-color.$on-surface));
504
}
505
// side margins: compensate the entry padding with a negative margin
507
// then the negative margin itself
508
:dir(ltr) & {
509
margin-left: 4px;
510
margin-right: 0;
511
padding-left: 12px;
512
padding-right: 8px;
513
}
514
:dir(rtl) & {
516
margin-left: 0;
517
margin-right: 4px;
518
padding-left: 8px;
519
padding-right: 12px;
520
}
521
// seems any sizing doesn't work
523
&.button {
524
box-shadow: none;
525
background-color: transparent;
526
color: theme-color.hint(theme-color.$on-surface);
527
}
528
}
529
/**
531
* Buttons
532
*/
533
// stuff for .needs-attention
535
@keyframes needs-attention {
536
from {
537
background-image:
538
-gtk-gradient(
539
radial,
540
center center, 0,
541
center center, .001,
542
to(theme-color.$primary),
543
to(transparent)
544
);
545
}
546
to {
548
background-image:
549
-gtk-gradient(
550
radial,
551
center center, 0,
552
center center, .5,
553
to(theme-color.$primary),
554
to(transparent)
555
);
556
}
557
}
558
%button,
560
button {
561
min-height: 24px;
562
min-width: 16px;
563
padding: (theme.$medium-size - 24px) / 2 (theme.$medium-size - 16px) / 2;
564
border-radius: theme.$corner-radius;
565
color: theme-color.$on-surface;
566
font-weight: 500;
567
@extend %ripple;
569
@include drawing.ink-color(theme-color.$on-surface, $button-style: "raised", $on: theme-color.$surface-z8);
570
&:disabled {
572
box-shadow: none;
573
background-color: theme-color.fill(theme-color.$on-surface);
574
color: theme-color.disabled(theme-color.$on-surface);
575
}
576
&:checked {
578
$background-color: theme-color.activated-overlay(theme-color.$primary, $on: theme-color.$surface-z8);
579
color: theme-color.$primary;
580
@include drawing.ink-color(theme-color.$primary, $button-style: "raised", $on: $background-color);
581
&:disabled {
583
box-shadow: none;
584
background-color: theme-color.activated-overlay(theme-color.$on-surface, $on: theme-color.fill(theme-color.$on-surface));
585
color: theme-color.disabled(theme-color.$on-surface);
586
}
587
}
588
&.text-button {
590
min-width: 64px - 16px * 2;
591
padding-left: 16px;
592
padding-right: 16px;
593
}
594
&.image-button {
596
min-width: 24px;
597
padding: (theme.$medium-size - 24px) / 2;
598
border-radius: theme.$circular-radius;
599
}
600
// NOTE: Some image-only buttons use this as well
602
&.text-button.image-button {
603
min-width: 24px;
604
padding: (theme.$medium-size - 24px) / 2;
605
border-radius: theme.$corner-radius;
606
label {
608
&:first-child {
609
margin-left: 16px - (theme.$medium-size - 24px) / 2;
610
}
611
&:last-child {
613
margin-right: 16px - (theme.$medium-size - 24px) / 2;
614
}
615
}
616
image:not(:only-child) {
618
margin: 0 (24px - 16px) / 2;
619
}
620
}
621
.linked:not(.vertical) > & {
623
@extend %linked;
624
&.image-button:not(.text-button) {
626
@extend %linked-image-button;
627
}
628
}
629
.linked.vertical > & {
631
@extend %linked-vertical;
632
&.image-button:not(.text-button) {
634
@extend %linked-vertical-image-button;
635
}
636
}
637
}
638
%button-flat-basic {
640
color: theme-color.hint(theme-color.$on-surface);
641
@include drawing.ink-color(theme-color.$on-surface, $button-style: "flat");
642
&:disabled {
644
background-color: transparent;
645
color: theme-color.disabled-hint(theme-color.$on-surface);
646
}
647
}
648
%button-flat-activatable {
650
@extend %button-flat-basic;
651
&:checked {
653
$background-color: theme-color.activated-overlay(theme-color.$primary);
654
color: theme-color.$primary;
655
@include drawing.ink-color(theme-color.$primary, $button-style: "flat", $on: $background-color);
656
&:disabled {
658
color: theme-color.disabled(theme-color.$on-surface);
659
}
660
}
661
}
662
%button-flat,
664
button.flat {
665
@extend %button-flat-activatable;
666
&.text-button {
668
min-width: 64px - 8px * 2;
669
padding-left: 8px;
670
padding-right: 8px;
671
}
672
&.text-button.image-button {
674
min-width: 24px;
675
padding: (theme.$medium-size - 24px) / 2;
676
label {
678
&:first-child {
679
margin-left: 12px - (theme.$medium-size - 24px) / 2;
680
}
681
&:last-child {
683
margin-right: 12px - (theme.$medium-size - 24px) / 2;
684
}
685
}
686
}
687
.linked:not(.vertical) > &,
689
.linked.vertical > & {
690
&:not(:only-child) { // specificity bump
691
border-radius: theme.$corner-radius;
692
&.image-button:not(.text-button) {
694
border-radius: theme.$circular-radius;
695
}
696
}
697
}
698
}
699
button {
701
// big standalone buttons like in Documents pager
702
&.osd {
703
padding: (theme.$large-size - 24px) / 2 (theme.$large-size - 16px) / 2;
704
&.image-button {
706
padding: (theme.$large-size - 24px) / 2;
707
}
708
&:disabled {
710
opacity: 0;
711
}
712
}
713
// overlay / OSD style
715
@at-root %osd_button,
716
.osd & {
717
}
718
// Suggested and Destructive Action buttons
720
@each $class, $color in (".suggested-action": theme-color.$primary, ".destructive-action": theme-color.$error) {
721
&#{$class} {
722
color: theme-color.on($color);
723
@include drawing.ink-color(theme-color.on($color), $button-style: "raised", $on: $color);
724
&:disabled {
726
box-shadow: none;
727
background-color: theme-color.fill(theme-color.$on-surface);
728
color: theme-color.disabled(theme-color.$on-surface);
729
}
730
&:checked {
732
$background-color: theme-color.activated-overlay(theme-color.on($color), $on: $color);
733
@include drawing.ink-color(theme-color.on($color), $button-style: "raised", $on: $background-color);
734
}
735
&.flat {
737
color: $color;
738
@include drawing.ink-color($color, $button-style: "flat");
739
&:disabled {
741
box-shadow: none;
742
background-color: transparent;
743
color: theme-color.disabled-hint(theme-color.$on-surface);
744
}
745
&:checked {
747
$background-color: theme-color.activated-overlay($color);
748
@include drawing.ink-color($color, $button-style: "flat", $on: $background-color);
749
}
750
}
751
.osd & {
753
}
754
}
755
}
756
.stack-switcher > & {
758
// to position the needs attention dot, padding is added to the button
759
// child, a label needs just lateral padding while an icon needs vertical
760
// padding added too.
761
> label {
763
margin: 0 -6px;
764
padding: 0 6px;
765
}
766
> image {
768
margin: -3px -6px;
769
padding: 3px 6px;
770
}
771
&.needs-attention {
773
> label,
774
> image {
775
@extend %needs-attention;
776
}
777
&:checked {
779
> label,
780
> image {
781
animation: none;
782
background-image: none;
783
}
784
}
785
}
786
}
787
// hide separators
789
&.font,
790
&.file {
791
separator {
792
@extend %hide_separators;
793
}
794
}
795
&.font {
797
> box > box > label {
798
// font-weight: bold;
799
}
800
}
801
// inline-toolbar buttons
803
.inline-toolbar & {
804
// @extend %button-flat;
805
&:not(.text-button) {
807
border-radius: theme.$circular-radius;
808
}
809
}
810
.primary-toolbar & {
812
-gtk-icon-shadow: none; // tango icons don't need shadows
813
}
814
&.close,
816
&.circular { // The Bloody Circul Button
817
border-radius: theme.$circular-radius;
818
label {
820
// padding: 0;
821
}
822
}
823
}
824
%button-small {
826
min-height: theme.$small-size;
827
min-width: theme.$small-size;
828
padding: 0;
829
border-radius: theme.$circular-radius;
830
}
831
%needs-attention {
833
animation: needs-attention theme.$ripple-fade-in-duration theme.$ease-out forwards;
834
background-repeat: no-repeat;
835
background-position: right 3px;
836
background-size: 6px 6px;
837
&:dir(rtl) {
839
background-position: left 3px;
840
}
841
}
842
// all the following is for the +|- buttons on inline toolbars, that way
844
// should really be deprecated...
845
.inline-toolbar toolbutton > button {
846
}
847
// More inline toolbar buttons
849
toolbar.inline-toolbar toolbutton {
850
&:not(:first-child) > button.flat {
851
// @extend %linked-not-first-child;
852
}
853
&:not(:last-child) > button.flat {
855
// @extend %linked-not-last-child;
856
}
857
}
858
%linked-not-first-child {
860
border-top-left-radius: 0;
861
border-bottom-left-radius: 0;
862
}
863
%linked-not-last-child {
865
border-top-right-radius: 0;
866
border-bottom-right-radius: 0;
867
}
868
%linked {
870
&:not(:first-child) {
871
@extend %linked-not-first-child;
872
}
873
&:not(:last-child) {
875
@extend %linked-not-last-child;
876
}
877
}
878
%linked-vertical-not-first-child {
880
border-top-left-radius: 0;
881
border-top-right-radius: 0;
882
}
883
%linked-vertical-not-last-child {
885
border-bottom-left-radius: 0;
886
border-bottom-right-radius: 0;
887
}
888
%linked-vertical {
890
&:not(:first-child) {
891
@extend %linked-vertical-not-first-child;
892
}
893
&:not(:last-child) {
895
@extend %linked-vertical-not-last-child;
896
}
897
}
898
%linked-image-button {
900
&:first-child {
901
border-top-left-radius: theme.$corner-radius;
902
border-bottom-left-radius: theme.$corner-radius;
903
}
904
&:last-child {
906
border-top-right-radius: theme.$corner-radius;
907
border-bottom-right-radius: theme.$corner-radius;
908
}
909
&:only-child {
911
border-radius: theme.$circular-radius;
912
}
913
}
914
%linked-vertical-image-button {
916
&:first-child {
917
border-top-left-radius: theme.$corner-radius;
918
border-top-right-radius: theme.$corner-radius;
919
}
920
&:last-child {
922
border-bottom-left-radius: theme.$corner-radius;
923
border-bottom-right-radius: theme.$corner-radius;
924
}
925
&:only-child {
927
border-radius: theme.$circular-radius;
928
}
929
}
930
/* menu buttons */
932
modelbutton.flat,
933
.menuitem.button.flat {
934
min-height: theme.$menuitem-size;
935
padding: 0 8px;
936
border-radius: theme.$corner-radius;
937
@extend %ripple;
939
@include drawing.ink-color(theme-color.$on-surface);
940
&:selected {
942
background-color: theme-color.$selected-overlay;
943
}
944
}
945
modelbutton.flat arrow {
947
transition: color theme.$duration theme.$ease-out;
948
color: theme-color.hint(theme-color.$on-surface);
949
&:disabled {
951
color: theme-color.disabled-hint(theme-color.$on-surface);
952
}
953
&.left {
955
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
956
}
957
&.right {
959
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
960
}
961
}
962
button.color {
964
min-height: theme.$small-size;
965
min-width: theme.$small-size;
966
padding: theme.$container-padding;
967
colorswatch:only-child {
969
&,
970
overlay {
971
// border-radius: 0;
972
}
973
}
974
}
975
/**
977
* Links
978
*/
979
*:link {
981
color: theme-color.$primary;
982
&:disabled {
984
color: theme-color.disabled(theme-color.$on-surface);
985
}
986
}
987
*:visited {
989
color: theme-color.$visited;
990
&:disabled {
992
color: theme-color.disabled(theme-color.$on-surface);
993
}
994
}
995
button.link {
997
&:link {
998
color: theme-color.$primary;
999
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
1000
}
1001
&:visited {
1003
color: theme-color.$visited;
1004
@include drawing.ink-color(theme-color.$visited, $button-style: "flat");
1005
}
1006
&:disabled {
1008
color: theme-color.disabled(theme-color.$on-surface);
1009
}
1010
> label {
1012
text-decoration-line: underline;
1013
}
1014
}
1015
/**
1017
* GtkSpinButton
1018
*/
1019
spinbutton {
1021
&:not(.vertical) {
1022
// in this horizontal configuration, the whole spinbutton
1023
// behaves as the entry, so we extend the entry styling
1024
// and nuke the style on the internal entry
1025
@extend %entry;
1026
padding: 0;
1028
entry {
1030
min-width: theme.$large-size - 8px * 2;
1031
// reset all the other props since the spinbutton node is styled here
1032
margin: 0;
1033
border-image: none;
1034
border-radius: 0;
1035
box-shadow: none;
1036
background-color: transparent;
1037
}
1038
button {
1040
@extend %button-flat-basic;
1041
@extend %button-small;
1042
// margin: $container-padding;
1044
border: solid theme.$container-padding transparent;
1045
background-clip: padding-box;
1046
// Remove unwanted focus indicator
1048
&:focus:not(:hover):not(:active) {
1049
background-color: transparent;
1050
}
1051
&.up:dir(ltr),
1053
&.down:dir(rtl) {
1054
margin-left: -(theme.$container-padding) / 2;
1055
}
1056
&.up:dir(rtl),
1058
&.down:dir(ltr) {
1059
margin-right: -(theme.$container-padding) / 2;
1060
}
1061
}
1062
}
1063
// OSD horizontal
1065
.osd &:not(.vertical) {
1066
}
1067
// Vertical
1069
&.vertical {
1070
// in the vertical configuration, we treat the spinbutton
1071
// as a box, and tweak the style of the entry in the middle
1072
// so that it's linked
1073
// FIXME: this should not be set at all, but otherwise it gets the wrong
1075
// color
1076
caret-color: theme-color.$primary;
1077
// FIXME: this should not be set at all, but otherwise it gets the wrong
1079
// color
1080
&:disabled {
1081
color: theme-color.disabled(theme-color.$on-surface);
1082
}
1083
entry {
1085
@extend %entry_raised;
1086
min-height: theme.$medium-size;
1088
min-width: theme.$large-size;
1089
padding: 0;
1090
}
1091
button {
1093
min-height: theme.$medium-size;
1094
min-width: theme.$large-size;
1095
padding: 0;
1096
@extend %button-flat-basic;
1098
// Remove unwanted focus indicator
1100
&:focus:not(:hover):not(:active) {
1101
background-color: transparent;
1102
}
1103
&.up {
1105
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1106
}
1107
&.down {
1109
border-radius: 0 0 theme.$corner-radius theme.$corner-radius;
1110
}
1111
}
1112
}
1113
// OSD vertical
1115
.osd &.vertical {
1116
}
1117
// Misc
1119
treeview &:not(.vertical) {
1120
min-height: 0;
1121
border-style: none;
1122
border-radius: 0;
1123
entry {
1125
min-height: 0;
1126
padding: 1px 2px;
1127
}
1128
}
1129
}
1130
/**
1132
* ComboBoxes
1133
*/
1134
combobox {
1136
arrow {
1137
transition: -gtk-icon-transform theme.$duration theme.$ease-out;
1138
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1139
min-height: 16px;
1140
min-width: 16px;
1141
}
1142
button.combo:checked arrow {
1144
// color: $primary;
1145
-gtk-icon-transform: rotate(-.5turn);
1146
}
1147
// workaround for menuitem selection
1149
decoration {
1150
transition: none;
1151
}
1152
// remove hard-coded 2px padding
1154
cellview {
1155
margin: -2px;
1156
}
1157
button.combo cellview {
1159
&:dir(ltr) {
1160
margin-left: -2px + 8px - (theme.$medium-size - 16px) / 2;
1161
}
1162
&:dir(rtl) {
1164
margin-right: -2px + 8px - (theme.$medium-size - 16px) / 2;
1165
}
1166
}
1167
menu {
1169
padding: 2px 0;
1170
menuitem {
1172
min-height: theme.$medium-size - 2px * 2;
1173
padding: 0 8px;
1174
}
1175
// overflow arrows
1177
> arrow {
1178
&.top {
1179
margin-top: -2px;
1180
}
1181
&.bottom {
1183
margin-top: 2px * 2;
1184
margin-bottom: -2px * 3;
1185
}
1186
}
1187
}
1188
> .linked:not(.vertical) > entry:not(:only-child) {
1190
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1191
&:first-child {
1193
margin-right: -(theme.$medium-size);
1194
padding-right: theme.$medium-size;
1195
}
1196
&:last-child {
1198
margin-left: -(theme.$medium-size);
1199
padding-left: theme.$medium-size;
1200
}
1201
}
1202
> .linked:not(.vertical) > button:not(:only-child) {
1204
@extend %button-flat-basic;
1205
// @extend %button-small;
1206
min-height: 16px;
1208
min-width: 16px;
1209
margin: (theme.$medium-size - theme.$small-size) / 2;
1210
padding: (theme.$small-size - 16px) / 2;
1211
border-radius: theme.$circular-radius;
1212
}
1213
}
1214
// the combo is a composite widget so the way we do button linking doesn't
1216
// work, special case needed. See
1217
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1218
.linked:not(.vertical) > combobox {
1220
&:not(:first-child) > box > button.combo {
1221
@extend %linked-not-first-child;
1222
}
1223
&:not(:last-child) > box > button.combo {
1225
@extend %linked-not-last-child;
1226
}
1227
}
1228
.linked.vertical > combobox {
1230
&:not(:first-child) > box > button.combo {
1231
@extend %linked-vertical-not-first-child;
1232
}
1233
&:not(:last-child) > box > button.combo {
1235
@extend %linked-vertical-not-last-child;
1236
}
1237
}
1238
button.combo:only-child {
1240
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1241
font-weight: normal;
1242
@include drawing.entry(normal);
1244
&:focus {
1246
@include drawing.entry(focus);
1247
}
1248
&:drop(active),
1250
&:hover {
1251
@include drawing.entry(hover);
1252
}
1253
&:checked {
1255
@include drawing.entry(checked);
1256
}
1257
&:disabled {
1259
@include drawing.entry(disabled);
1260
}
1261
arrow {
1263
transition: color theme.$duration theme.$ease-out;
1264
color: theme-color.hint(theme-color.$on-surface);
1265
&:disabled {
1267
color: theme-color.disabled-hint(theme-color.$on-surface);
1268
}
1269
}
1270
}
1271
/**
1273
* Toolbars
1274
*/
1275
toolbar {
1277
-GtkWidget-window-dragging: true;
1278
padding: 2px;
1279
button {
1281
@extend %button-flat;
1282
}
1283
// on OSD
1285
.osd & {
1286
}
1287
// stand-alone OSD toolbars
1289
&.osd {
1290
@extend %toolbar-osd;
1291
// positional classes for `attached` osd toolbars
1293
&.left,
1294
&.right,
1295
&.top,
1296
&.bottom {
1297
border-radius: 0;
1298
}
1299
&.bottom {
1301
box-shadow: none;
1302
background-color: transparent;
1303
background-image:
1304
linear-gradient(
1305
to bottom,
1306
transparent,
1307
rgba(black, .1) 30%,
1308
rgba(black, .2) 50%,
1309
rgba(black, .4)
1310
);
1311
}
1312
}
1313
// toolbar separators
1315
&.horizontal > separator {
1316
margin: 2px;
1317
}
1318
&.vertical > separator {
1320
margin: 2px;
1321
}
1322
&:not(.inline-toolbar):not(.osd) {
1324
scale,
1325
entry,
1326
spinbutton,
1327
button {
1328
margin: 2px;
1329
}
1330
.linked entry,
1332
.linked spinbutton,
1333
.linked button {
1334
&:not(:first-child) {
1335
margin-left: 0;
1336
}
1337
&:not(:last-child) {
1339
margin-right: 0;
1340
}
1341
}
1342
spinbutton {
1344
entry,
1345
button {
1346
margin: 0;
1347
}
1348
}
1349
switch {
1351
margin: 2px + theme.$container-padding 2px;
1352
}
1353
}
1354
}
1355
%toolbar-osd {
1357
transition: theme.$transition-shadow;
1358
padding: theme.$container-padding;
1359
border-radius: theme.$corner-radius;
1360
box-shadow: theme.$shadow-z4, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
1361
background-color: theme-color.$surface-z8;
1362
&:backdrop {
1364
box-shadow: theme.$shadow-z2, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
1365
}
1366
}
1367
// searchbar, location-bar & inline-toolbar
1369
.inline-toolbar {
1370
padding: theme.$container-padding;
1371
border-style: solid;
1372
border-width: 0 1px 1px;
1373
border-color: theme-color.divider(theme-color.$on-surface);
1374
background-color: theme-color.$surface-z1;
1375
background-clip: padding-box;
1376
}
1377
searchbar > revealer > box,
1379
.location-bar {
1380
padding: theme.$container-padding;
1381
border-style: solid;
1382
border-width: 0 0 1px;
1383
border-color: theme-color.divider(theme-color.$on-surface);
1384
}
1385
searchbar > revealer > box {
1387
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1388
margin: -6px;
1389
padding: theme.$container-padding;
1390
}
1391
/**
1393
* Header bars
1394
*/
1395
.titlebar {
1397
transition: background-color theme.$duration theme.$ease-out, color theme.$duration theme.$ease-out;
1398
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1399
box-shadow: theme.$shadow-z1, inset 0 1px theme-color.highlight(theme-color.$titlebar);
1400
background-color: theme-color.$titlebar;
1401
color: theme-color.$on-titlebar;
1402
&:disabled {
1404
color: theme-color.disabled(theme-color.$on-titlebar);
1405
}
1406
&:backdrop {
1408
background-color: theme-color.$titlebar-backdrop;
1409
color: theme-color.hint(theme-color.$on-titlebar);
1410
&:disabled {
1412
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1413
}
1414
}
1415
.title {
1417
padding-left: 12px;
1418
padding-right: 12px;
1419
font-weight: bold;
1420
}
1421
.subtitle {
1423
padding-left: 12px;
1424
padding-right: 12px;
1425
font-size: smaller;
1426
}
1427
.subtitle,
1429
.dim-label {
1430
transition: color theme.$duration theme.$ease-out;
1431
color: theme-color.hint(theme-color.$on-titlebar);
1432
&:backdrop {
1434
color: theme-color.disabled(theme-color.$on-titlebar);
1435
}
1436
}
1437
// Don't draw titlebar above titlebar
1439
.titlebar {
1440
background-color: transparent;
1441
box-shadow: none;
1442
}
1443
// The separator for split headerbars
1445
headerbar + separator {
1446
background-color: theme-color.divider(theme-color.$on-titlebar);
1447
}
1448
entry {
1450
box-shadow: inset 0 -1px theme-color.stroke(theme-color.$on-titlebar);
1451
background-color: theme-color.entry-fill(theme-color.$on-titlebar);
1452
color: theme-color.$on-titlebar;
1453
&:disabled {
1455
box-shadow: inset 0 -1px theme-color.disabled-stroke(theme-color.$on-titlebar);
1456
background-color: theme-color.entry-fill(theme-color.$on-titlebar);
1457
color: theme-color.disabled(theme-color.$on-titlebar);
1458
}
1459
image {
1461
color: theme-color.hint(theme-color.$on-titlebar);
1462
&:hover,
1464
&:active {
1465
color: theme-color.$on-titlebar;
1466
}
1467
&:disabled {
1469
color: theme-color.disabled(theme-color.$on-titlebar);
1470
}
1471
}
1472
}
1473
.linked:not(.vertical) > entry:not(:only-child) {
1475
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1476
}
1477
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1479
@extend %button-flat;
1480
border-image:
1482
radial-gradient(
1483
circle closest-corner at center calc(100% - 1px),
1484
theme-color.$titlebar-indicator 0%,
1485
transparent 0%
1486
) 0 0 0 / 0 0 0;
1487
background-color: transparent;
1488
color: theme-color.hint(theme-color.$on-titlebar);
1489
@include drawing.ink-color(theme-color.$on-titlebar, $button-style: "flat");
1490
&:disabled {
1492
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1493
}
1494
@at-root %titlebar-button-checked,
1496
&:checked {
1497
border-image:
1498
radial-gradient(
1499
circle closest-corner at center calc(100% - 1px),
1500
theme-color.$titlebar-indicator 100%,
1501
transparent 0%
1502
) 0 0 2 / 0 0 2px;
1503
background-color: transparent;
1504
color: theme-color.$on-titlebar;
1505
@include drawing.ink-color(theme-color.$on-titlebar, $button-style: "flat");
1506
&:disabled {
1508
background-color: transparent;
1509
color: theme-color.disabled(theme-color.$on-titlebar);
1510
}
1511
}
1512
&:backdrop {
1514
color: theme-color.disabled(theme-color.$on-titlebar);
1515
&:disabled {
1517
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1518
}
1519
&:checked {
1521
color: theme-color.hint(theme-color.$on-titlebar);
1522
&:disabled {
1524
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1525
}
1526
}
1527
}
1528
}
1529
button.suggested-action, button.destructive-action {
1531
&:disabled {
1532
background-color: theme-color.fill(theme-color.$on-titlebar);
1533
color: theme-color.disabled(theme-color.$on-titlebar);
1534
}
1535
}
1536
// FIXME: Ugly overriding
1538
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1539
min-width: 120px - 8px * 2;
1540
}
1541
// FIXME: Ugly overriding
1543
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1544
min-width: 0;
1545
padding-left: (theme.$medium-size - 24px) / 2;
1546
padding-right: (theme.$medium-size - 24px) / 2;
1547
}
1548
&.selection-mode {
1550
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1551
// but let's keep it for backwards compatibility.
1552
transition: background-color .1ms theme.$ripple-fade-in-duration, color theme.$duration theme.$ease-out;
1553
animation: ripple-on-headerbar theme.$ripple-fade-in-duration theme.$ease-out;
1554
box-shadow: theme.$shadow-z1, inset 0 1px theme-color.highlight(theme-color.$primary);
1555
background-color: theme-color.$primary;
1556
color: theme-color.$on-primary;
1557
&:backdrop {
1559
color: theme-color.hint(theme-color.$on-primary);
1560
}
1561
.subtitle:link {
1563
color: theme-color.$on-primary;
1564
}
1565
button:not(.suggested-action):not(.destructive-action) {
1567
border-image:
1568
radial-gradient(
1569
circle closest-corner at center calc(100% - 1px),
1570
currentcolor 0%,
1571
transparent 0%
1572
) 0 0 0 / 0 0 0;
1573
color: theme-color.$on-primary;
1574
&:disabled {
1576
color: theme-color.disabled(theme-color.$on-primary);
1577
}
1578
&:checked {
1580
border-image:
1581
radial-gradient(
1582
circle closest-corner at center calc(100% - 1px),
1583
currentcolor 100%,
1584
transparent 0%
1585
) 0 0 2 / 0 0 2px;
1586
color: theme-color.$on-primary;
1587
&:disabled {
1589
color: theme-color.disabled(theme-color.$on-primary);
1590
}
1591
}
1592
&:backdrop {
1594
color: theme-color.hint(theme-color.$on-primary);
1595
&:disabled {
1597
color: theme-color.disabled-hint(theme-color.$on-primary);
1598
}
1599
&:checked {
1601
color: theme-color.hint(theme-color.$on-primary);
1602
&:disabled {
1604
color: theme-color.disabled-hint(theme-color.$on-primary);
1605
}
1606
}
1607
}
1608
}
1609
.selection-menu {
1611
padding-left: 16px;
1612
padding-right: 16px;
1613
arrow {
1615
-GtkArrow-arrow-scaling: 1;
1616
}
1617
.arrow {
1619
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1620
}
1621
}
1622
}
1623
.selection-mode {
1625
box-shadow: inset 0 1px theme-color.highlight(theme-color.$primary); // Avoid double shadows
1626
background-color: theme-color.$primary;
1627
}
1628
// squared corners when the window is maximized, tiled, or fullscreen
1630
.tiled &,
1631
.tiled-top &,
1632
.tiled-right &,
1633
.tiled-bottom &,
1634
.tiled-left &,
1635
.maximized &,
1636
.fullscreen & {
1637
border-radius: 0;
1638
box-shadow: theme.$shadow-z1;
1639
}
1640
&.default-decoration {
1642
min-height: theme.$small-size;
1643
padding: theme.$container-padding;
1644
box-shadow: inset 0 1px theme-color.highlight(theme-color.$titlebar);
1645
.tiled &,
1647
.maximized &,
1648
.fullscreen & {
1649
box-shadow: none;
1650
}
1651
button.titlebutton {
1653
min-height: theme.$small-size;
1654
min-width: theme.$small-size;
1655
margin: 0;
1656
padding: 0;
1657
}
1658
// workaround for non-animatable buttons
1660
.background:not(.csd) & button.titlebutton:active {
1661
background-size: 1000% 1000%;
1662
}
1663
}
1664
.solid-csd & {
1666
&:dir(rtl), &:dir(ltr) { // specificity bump
1667
border-radius: 0;
1668
box-shadow: theme.$shadow-z1; // just remove the highlight
1669
}
1670
}
1671
}
1672
headerbar {
1674
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1675
min-height: theme.$large-size;
1676
padding: 0 theme.$container-padding;
1677
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1679
entry,
1680
spinbutton,
1681
button {
1682
margin-top: theme.$container-padding;
1683
margin-bottom: theme.$container-padding;
1684
}
1685
separator.titlebutton {
1687
margin-top: theme.$large-size / 4;
1688
margin-bottom: theme.$large-size / 4;
1689
background-color: theme-color.divider(theme-color.$on-titlebar);
1690
}
1691
switch {
1693
margin-top: (theme.$large-size - 24px) / 2;
1694
margin-bottom: (theme.$large-size - 24px) / 2;
1695
}
1696
// reset button margins of the spinbutton
1698
spinbutton button {
1699
margin-top: 0;
1700
margin-bottom: 0;
1701
}
1702
// FIXME: This is a hacky workaround.
1704
.entry-tag {
1705
margin-top: 5px;
1706
margin-bottom: 5px;
1707
}
1708
}
1709
// Development versions of apps to use a differently styled headerbar
1711
window.devel .titlebar:not(.selection-mode) {
1712
}
1713
/**
1715
* Pathbars
1716
*/
1717
%pathbar_button,
1719
.path-bar.linked:not(.vertical) > button {
1720
padding-left: (theme.$medium-size - 24px) / 2;
1721
padding-right: (theme.$medium-size - 24px) / 2;
1722
border-image:
1723
radial-gradient(
1724
circle closest-corner at center calc(100% - 1px),
1725
theme-color.$primary 0%,
1726
transparent 0%
1727
) 0 0 0 / 0 0 0;
1728
border-radius: theme.$corner-radius;
1729
color: theme-color.hint(theme-color.$on-surface);
1730
@include drawing.ink-color(theme-color.$on-surface, $button-style: "flat");
1731
&:disabled {
1733
background-color: transparent;
1734
color: theme-color.disabled-hint(theme-color.$on-surface);
1735
}
1736
&:checked {
1738
border-image:
1739
radial-gradient(
1740
circle closest-corner at center calc(100% - 1px),
1741
theme-color.$primary 100%,
1742
transparent 0%
1743
) 0 0 2 / 0 0 2px;
1744
color: theme-color.$primary;
1745
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
1746
&:disabled {
1748
background-color: transparent;
1749
color: theme-color.disabled(theme-color.$on-surface);
1750
}
1751
}
1752
label:not(:only-child) {
1754
&:first-child {
1755
margin-left: 0;
1756
}
1757
&:last-child {
1759
margin-right: 0;
1760
}
1761
}
1762
&.text-button {
1764
min-width: 0;
1765
}
1766
&.slider-button {
1768
padding-left: (24px - 16px) / 2;
1769
padding-right: (24px - 16px) / 2;
1770
}
1771
}
1772
/**
1774
* Tree Views
1775
*/
1776
treeview.view {
1778
@at-root * {
1779
-GtkTreeView-horizontal-separator: 4;
1780
-GtkTreeView-grid-line-width: 1;
1781
-GtkTreeView-grid-line-pattern: '';
1782
-GtkTreeView-tree-line-width: 1;
1783
-GtkTreeView-tree-line-pattern: '';
1784
-GtkTreeView-expander-size: 16;
1785
}
1786
border-left-color: theme-color.stroke(theme-color.$on-surface); // this is actually the tree lines color,
1788
border-top-color: theme-color.divider(theme-color.$on-surface); // while this is the grid lines color, better then nothing
1789
// to avoid borders being overridden by the previously set props
1791
rubberband {
1792
@extend %rubberband;
1793
}
1794
&:hover,
1796
&:selected {
1797
border-radius: 0;
1798
}
1799
&.separator {
1801
min-height: 1px + 2px * 2;
1802
color: theme-color.divider(theme-color.$on-surface);
1803
}
1804
&:drop(active) {
1806
// FIXME: box-shadow, background-color and background-image are not available here.
1807
border-style: solid none;
1808
border-width: 9999px;
1809
border-color: theme-color.hover-overlay(theme-color.$on-surface);
1810
&.after {
1812
border-top-style: none;
1813
}
1814
&.before {
1816
border-bottom-style: none;
1817
}
1818
}
1819
&.expander {
1821
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1822
-gtk-icon-transform: rotate(-90deg);
1823
&:dir(rtl) {
1825
-gtk-icon-transform: rotate(90deg);
1826
}
1827
&:checked {
1829
-gtk-icon-transform: unset;
1830
}
1831
color: theme-color.hint(theme-color.$on-surface);
1833
&:hover,
1835
&:active {
1836
color: theme-color.$on-surface;
1837
}
1838
&:disabled {
1840
color: theme-color.disabled-hint(theme-color.$on-surface);
1841
}
1842
}
1843
// progress bar in treeviews
1845
&.progressbar {
1846
border-bottom: theme.$bar-size solid theme-color.$primary;
1847
background-color: transparent;
1848
&:selected:hover {
1850
background-color: transparent;
1851
}
1852
}
1853
// progress bar trough in treeviews
1855
&.trough {
1856
border-bottom: theme.$bar-size solid theme-color.disabled-stroke(theme-color.$on-surface);
1857
background-color: transparent;
1858
&:selected:hover {
1860
background-color: transparent;
1861
}
1862
}
1863
header {
1865
button {
1866
padding: 2px 6px;
1867
border-style: none solid solid none;
1868
border-width: 1px;
1869
border-color: theme-color.divider(theme-color.$on-surface);
1870
border-radius: 0;
1871
background-clip: padding-box;
1872
color: theme-color.hint(theme-color.$on-surface);
1873
@include drawing.ink-color(theme-color.$on-surface, $button-style: "flat", $hover-alt: true);
1874
@include drawing.list-item;
1875
&:disabled {
1877
background-color: transparent;
1878
color: theme-color.disabled-hint(theme-color.$on-surface);
1879
}
1880
&:last-child {
1882
border-right-style: none;
1883
}
1884
}
1885
}
1886
button.dnd,
1888
header.button.dnd { // for treeview-like derive widgets
1889
padding: 2px 6px;
1890
border-style: none solid solid;
1891
border-width: 1px;
1892
border-color: theme-color.divider(theme-color.$on-surface);
1893
border-radius: 0;
1894
box-shadow: none;
1895
background-clip: padding-box;
1896
background-color: theme-color.$surface-z8;
1897
color: theme-color.$primary;
1898
}
1899
// see tests/testaccel to test
1901
acceleditor > label {
1902
background-color: theme-color.$primary;
1903
}
1904
}
1905
/**
1907
* Menus
1908
*/
1909
menubar,
1911
.menubar {
1912
-GtkWidget-window-dragging: true;
1913
padding: 0;
1914
// box-shadow: inset 0 -1px divider($on-surface);
1915
background-color: theme-color.$titlebar;
1916
color: theme-color.$on-titlebar;
1917
&:backdrop {
1919
background-color: theme-color.$titlebar-backdrop;
1920
color: theme-color.hint(theme-color.$on-titlebar);
1921
}
1922
.csd & {
1924
transition: theme.$transition;
1925
}
1926
> menuitem {
1928
transition: theme.$transition;
1929
min-height: 20px;
1930
padding: 4px 8px;
1931
color: theme-color.hint(theme-color.$on-titlebar);
1932
// Seems like it :hover even with keyboard focus
1934
&:hover {
1935
transition: none;
1936
background-color: theme-color.activated-overlay(theme-color.$on-titlebar);
1937
color: theme-color.$on-titlebar;
1938
}
1939
&:disabled {
1941
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1942
}
1943
}
1944
}
1945
// Needed to make the border-radius of menus work
1947
// otherwise the background bleeds out of the menu edges
1948
.background.popup {
1949
background-color: transparent;
1950
}
1951
menu,
1953
.menu,
1954
.context-menu {
1955
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1956
padding: 4px 0;
1957
border: 1px solid theme-color.divider(theme-color.$on-surface); // adds borders in a non composited env
1958
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
1959
background-color: theme-color.$surface-z8;
1960
color: theme-color.$on-surface;
1961
font: initial;
1962
text-shadow: none;
1963
.csd & {
1965
border: none; // axes borders in a composited env
1966
border-radius: theme.$corner-radius;
1967
}
1968
menuitem {
1970
transition: background-color theme.$duration theme.$ease-out;
1971
min-height: 20px;
1972
min-width: 40px;
1973
padding: 4px 8px;
1974
&:hover {
1976
transition: none;
1977
background-color: theme-color.hover-overlay(theme-color.$on-surface);
1978
}
1979
&:disabled {
1981
color: theme-color.disabled(theme-color.$on-surface);
1982
}
1983
// submenu indicators
1985
arrow {
1986
min-height: 16px;
1987
min-width: 16px;
1988
color: theme-color.hint(theme-color.$on-surface);
1989
&:disabled {
1991
color: theme-color.disabled-hint(theme-color.$on-surface);
1992
}
1993
&:dir(ltr) {
1995
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1996
margin-left: 8px;
1997
}
1998
&:dir(rtl) {
2000
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
2001
margin-right: 8px;
2002
}
2003
}
2004
// avoids labels color being overridden, see
2006
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
2007
label {
2008
&:dir(rtl),
2009
&:dir(ltr) {
2010
// color: inherit;
2011
}
2012
}
2013
}
2014
// overflow arrows
2016
> arrow {
2017
min-height: 16px;
2018
min-width: 16px;
2019
padding: 4px;
2020
background-color: theme-color.$surface-z8;
2021
color: theme-color.hint(theme-color.$on-surface);
2022
&.top {
2024
margin-top: -4px;
2025
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
2026
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
2027
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2028
}
2029
&.bottom {
2031
margin-top: 4px * 2;
2032
margin-bottom: -4px * 3;
2033
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
2034
border-radius: 0 0 theme.$corner-radius theme.$corner-radius;
2035
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2036
}
2037
&:hover {
2039
background-image: image(theme-color.hover-overlay(theme-color.$on-surface));
2040
}
2041
&:disabled {
2043
border-color: transparent;
2044
background-color: transparent;
2045
color: transparent;
2046
// color: disabled-hint($on-surface);
2047
}
2048
}
2049
separator {
2051
margin: 4px 0;
2052
}
2053
}
2054
menuitem {
2056
accelerator {
2057
color: theme-color.hint(theme-color.$on-surface);
2058
}
2059
&:disabled accelerator {
2061
color: theme-color.disabled-hint(theme-color.$on-surface);
2062
}
2063
}
2064
/**
2066
* Popovers
2067
*/
2068
popover.background {
2070
transition: theme.$transition-shadow;
2071
padding: 2px;
2072
box-shadow: theme.$shadow-z4; // TODO: this should really have a highlight
2073
background-color: theme-color.$surface-z8;
2074
&:backdrop {
2076
box-shadow: theme.$shadow-z2;
2077
}
2078
&,
2080
.csd & {
2081
border-style: solid;
2082
border-width: 1px;
2083
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
2084
border-radius: theme.$corner-radius + 1px;
2085
background-clip: padding-box;
2086
}
2087
> stack {
2089
margin: -4px; // remove extra padding from menu style popovers
2090
}
2091
> toolbar {
2093
margin: -2px;
2094
}
2095
> list,
2097
> .view,
2098
> toolbar {
2099
border-style: none;
2100
box-shadow: none;
2101
background-color: transparent;
2102
}
2103
&.touch-selection,
2105
&.magnifier,
2106
&.osd {
2107
// @extend %osd;
2108
}
2109
button:not(.suggested-action):not(.destructive-action) {
2111
// @extend %button-flat;
2112
}
2113
.linked:not(.vertical) > entry:not(:only-child) {
2115
// border-radius: $corner-radius $corner-radius 0 0;
2116
}
2117
&.menu button,
2119
button.model {
2120
@extend %button-flat;
2121
min-height: 32px;
2123
padding: 0 8px;
2124
border-radius: theme.$corner-radius;
2125
}
2126
separator {
2128
margin: 4px 0;
2129
}
2130
list separator {
2132
margin: 0;
2133
}
2134
}
2135
/**
2137
* Notebooks
2138
*/
2139
notebook {
2141
&:focus > header > tabs > tab:checked {
2142
background-color: theme-color.focus-overlay(theme-color.$primary);
2143
}
2144
> header {
2146
&.top {
2147
box-shadow: inset 0 -1px theme-color.divider(theme-color.$on-surface);
2148
> tabs {
2150
> tab {
2151
box-shadow: inset 0 -2px transparent;
2152
&:checked {
2154
box-shadow: inset 0 -2px theme-color.$primary;
2155
}
2156
}
2157
}
2158
}
2159
&.bottom {
2161
box-shadow: inset 0 1px theme-color.divider(theme-color.$on-surface);
2162
> tabs {
2164
> tab {
2165
box-shadow: inset 0 2px transparent;
2166
&:checked {
2168
box-shadow: inset 0 2px theme-color.$primary;
2169
}
2170
}
2171
}
2172
}
2173
&.left {
2175
box-shadow: inset -1px 0 theme-color.divider(theme-color.$on-surface);
2176
> tabs {
2178
> tab {
2179
box-shadow: inset -2px 0 transparent;
2180
&:checked {
2182
box-shadow: inset -2px 0 theme-color.$primary;
2183
}
2184
}
2185
}
2186
}
2187
&.right {
2189
box-shadow: inset 1px 0 theme-color.divider(theme-color.$on-surface);
2190
> tabs {
2192
> tab {
2193
box-shadow: inset 2px 0 transparent;
2194
&:checked {
2196
box-shadow: inset 2px 0 theme-color.$primary;
2197
}
2198
}
2199
}
2200
}
2201
&.top > tabs > arrow {
2203
@extend %notebook_vert_arrows;
2204
}
2205
&.bottom > tabs > arrow {
2207
@extend %notebook_vert_arrows;
2208
}
2209
@at-root %notebook_vert_arrows {
2211
&.down {
2212
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2213
}
2214
&.up {
2216
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2217
}
2218
}
2219
&.left > tabs > arrow {
2221
@extend %notebook_horz_arrows;
2222
}
2223
&.right > tabs > arrow {
2225
@extend %notebook_horz_arrows;
2226
}
2227
@at-root %notebook_horz_arrows {
2229
&.down {
2230
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2231
}
2232
&.up {
2234
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2235
}
2236
}
2237
> tabs > arrow {
2239
min-height: 16px;
2240
min-width: 16px;
2241
padding: 4px;
2242
border-radius: 0;
2243
color: theme-color.hint(theme-color.$on-surface);
2244
@extend %ripple;
2245
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
2246
&:disabled {
2248
color: theme-color.disabled-hint(theme-color.$on-surface);
2249
}
2250
}
2251
> tabs > tab {
2253
transition: theme.$transition,
2254
background-size 0ms,
2255
background-image 0ms;
2256
min-height: theme.$small-size;
2257
min-width: theme.$small-size;
2258
padding: theme.$container-padding 16px;
2259
outline: none;
2260
background-image: radial-gradient(circle, theme-color.$primary 10%, transparent 0%);
2261
background-repeat: no-repeat;
2262
background-position: center;
2263
background-size: 0% 0%;
2264
color: theme-color.hint(theme-color.$on-surface);
2265
font-weight: 500;
2266
&:hover {
2268
background-color: theme-color.hover-overlay(theme-color.$on-surface, $alt: true);
2269
}
2270
&:disabled {
2272
color: theme-color.disabled-hint(theme-color.$on-surface);
2273
}
2274
&:checked {
2276
transition: theme.$transition,
2277
background-size theme.$ripple-fade-in-duration theme.$ease-out,
2278
background-image theme.$ripple-fade-in-duration + theme.$ripple-fade-out-duration theme.$ease-out;
2279
background-color: transparent;
2280
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2281
background-size: 1000% 1000%;
2282
color: theme-color.$primary;
2283
&:disabled {
2285
color: theme-color.disabled(theme-color.$on-surface);
2286
}
2287
&.reorderable-page {
2289
// background-color: $surface-z1;
2290
// color: $on-surface;
2291
}
2292
&.dnd {
2294
background-color: theme-color.dragged-overlay(theme-color.$primary);
2295
}
2296
}
2297
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2299
> box {
2300
transition: background-color theme.$duration theme.$ease-out;
2301
margin: -(theme.$container-padding) -16px;
2302
padding: theme.$container-padding 16px;
2303
&:drop(active) {
2305
background-color: theme-color.hover-overlay(theme-color.$on-surface);
2306
}
2307
}
2308
// colors the button like the label, overridden otherwise
2310
button.flat {
2311
@extend %button-small;
2312
&:last-child {
2314
margin-left: theme.$container-padding;
2315
margin-right: theme.$container-padding - 16px;
2316
}
2317
&:first-child {
2319
margin-left: theme.$container-padding - 16px;
2320
margin-right: theme.$container-padding;
2321
}
2322
}
2323
}
2324
}
2325
}
2326
/**
2328
* Scrollbars
2329
*/
2330
scrollbar {
2332
$_slider_min_length: 24px;
2333
// disable steppers
2335
@at-root * {
2336
-GtkScrollbar-has-backward-stepper: false;
2337
-GtkScrollbar-has-forward-stepper: false;
2338
}
2339
transition: theme.$transition;
2341
// background-color: $surface-z0;
2342
background-clip: padding-box;
2343
// scrollbar border
2345
&.top { border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); }
2346
&.bottom { border-top: 1px solid theme-color.divider(theme-color.$on-surface); }
2347
&.left { border-right: 1px solid theme-color.divider(theme-color.$on-surface); }
2348
&.right { border-left: 1px solid theme-color.divider(theme-color.$on-surface); }
2349
// slider
2351
slider {
2352
transition: background-color theme.$duration theme.$ease-out;
2353
min-width: 8px;
2354
min-height: 8px;
2355
border: 4px solid transparent;
2356
border-radius: theme.$circular-radius;
2357
background-clip: padding-box;
2358
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface);
2359
&:hover {
2361
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "hover");
2362
}
2363
&:active {
2365
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "pressed");
2366
}
2367
&:disabled {
2369
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "disabled");
2370
}
2371
}
2372
&.fine-tune {
2374
slider {
2375
min-width: 4px;
2376
min-height: 4px;
2377
}
2378
&.horizontal slider {
2380
margin: 2px 0;
2381
}
2382
&.vertical slider {
2384
margin: 0 2px;
2385
}
2386
}
2387
&.overlay-indicator {
2389
&:not(.fine-tune) slider {
2390
transition-property: background-color, min-height, min-width;
2391
}
2392
&:not(.dragging):not(.hovering) {
2394
border-color: transparent;
2395
background-color: transparent;
2396
slider {
2398
min-width: 4px;
2399
min-height: 4px;
2400
margin: 4px - 1px;
2401
border: 1px solid rgba(theme-color.$surface-z1, .3);
2402
}
2403
button {
2405
min-width: 4px;
2406
min-height: 4px;
2407
margin: 4px - 1px;
2408
border: 1px solid rgba(theme-color.$surface-z1, .3);
2409
border-radius: theme.$circular-radius;
2410
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface);
2411
background-clip: padding-box;
2412
-gtk-icon-source: none;
2413
&:disabled {
2415
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "disabled");
2416
}
2417
}
2418
&.horizontal {
2420
slider {
2421
min-width: $_slider_min_length;
2422
}
2423
button {
2425
min-width: 8px;
2426
}
2427
}
2428
&.vertical {
2430
slider {
2431
min-height: $_slider_min_length;
2432
}
2433
button {
2435
min-height: 8px;
2436
}
2437
}
2438
}
2439
&.dragging,
2441
&.hovering {
2442
background-color: theme-color.$surface-z8;
2443
}
2444
}
2445
&.horizontal slider {
2447
min-width: $_slider_min_length;
2448
}
2449
&.vertical slider {
2451
min-height: $_slider_min_length;
2452
}
2453
// button styling
2455
button {
2456
@extend %button-flat-basic;
2457
min-width: 16px;
2459
min-height: 16px;
2460
padding: 0;
2461
border-radius: 0;
2462
}
2463
// button icons
2465
&.vertical {
2466
button {
2467
&.down {
2468
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2469
}
2470
&.up {
2472
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2473
}
2474
}
2475
}
2476
&.horizontal {
2478
button {
2479
&.down {
2480
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2481
}
2482
&.up {
2484
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2485
}
2486
}
2487
}
2488
}
2489
/**
2492
* Switch
2493
*/
2494
switch {
2496
transition: all theme.$duration theme.$ease-out;
2497
margin: theme.$container-padding 0;
2498
padding: 0 2px;
2499
border: 5px solid transparent;
2500
border-radius: theme.$circular-radius;
2501
background-color: theme-color.stroke(theme-color.$on-surface);
2502
background-clip: padding-box;
2503
font-size: 0;
2504
&:checked {
2506
background-color: rgba(theme-color.$primary, .5);
2507
}
2508
&:disabled {
2510
opacity: .5;
2511
}
2512
// hide on/off icons for >=3.24.5
2514
image {
2515
margin: -8px;
2516
-gtk-icon-transform: scale(0);
2517
}
2518
slider {
2520
transition: all theme.$duration theme.$ease-out;
2521
min-width: 20px;
2522
min-height: 20px;
2523
margin: -3px -2px;
2524
border-radius: theme.$circular-radius;
2525
outline: none;
2526
box-shadow: 0 0 0 10px transparent, theme.$shadow-z1;
2527
background-color: theme-color.$surface-switch-thumb;
2528
}
2529
&:hover slider {
2531
box-shadow: 0 0 0 10px theme-color.hover-overlay(theme-color.$on-surface), theme.$shadow-z1;
2532
}
2533
&:focus slider {
2535
box-shadow: 0 0 0 10px theme-color.focus-overlay(theme-color.$on-surface), theme.$shadow-z1;
2536
}
2537
&:checked slider {
2539
background-color: theme-color.$primary;
2540
}
2541
&:checked:hover slider {
2543
box-shadow: 0 0 0 10px theme-color.hover-overlay(theme-color.$primary), theme.$shadow-z1;
2544
}
2545
&:checked:focus slider {
2547
box-shadow: 0 0 0 10px theme-color.focus-overlay(theme-color.$primary), theme.$shadow-z1;
2548
}
2549
row:selected & {
2551
}
2552
}
2553
/**
2555
* Check and Radio items
2556
*/
2557
// draw regular check and radio items using our PNG assets
2559
// all assets are rendered from assets.svg. never add pngs directly
2560
// selection-mode
2562
.view.content-view.check:not(list),
2563
.content-view:not(list) check {
2564
min-height: 40px;
2565
min-width: 40px;
2566
margin: 0;
2567
padding: 0;
2568
background-color: transparent;
2569
background-image: none;
2570
-gtk-icon-shadow: theme.$icon-shadow-z2;
2571
&:hover,
2573
&:active {
2574
-gtk-icon-shadow: theme.$icon-shadow-z4;
2575
}
2576
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2578
&#{$class} {
2579
$_url: 'assets/selectionmode-checkbox#{$suffix}#{theme.$asset-suffix}';
2580
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2582
}
2583
}
2584
}
2585
checkbutton,
2587
radiobutton {
2588
outline: none;
2589
}
2590
checkbutton.text-button,
2592
radiobutton.text-button {
2593
// this is for a nice focus on check and radios text
2594
padding: 2px;
2595
label:not(:only-child) {
2597
margin: 0 4px;
2598
}
2599
}
2600
$check-radio-size: 40px;
2602
check,
2604
radio {
2605
min-height: 24px;
2606
min-width: 24px;
2607
margin: -($check-radio-size - 24px) / 2;
2608
padding: ($check-radio-size - 24px) / 2;
2609
border-radius: theme.$circular-radius;
2610
color: theme-color.hint(theme-color.$on-surface);
2611
@extend %ripple;
2612
@include drawing.ink-color(theme-color.$on-surface);
2613
&:checked,
2615
&:indeterminate {
2616
color: theme-color.$primary;
2617
@include drawing.ink-color(theme-color.$primary);
2618
}
2619
&:disabled {
2621
color: theme-color.disabled-hint(theme-color.$on-surface);
2622
}
2623
&:only-child {
2625
// margin: -12px;
2626
}
2627
popover modelbutton.flat & {
2629
&,
2630
&:focus,
2631
&:hover,
2632
&:focus:hover,
2633
&:active,
2634
&:disabled {
2635
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2636
background-color: transparent;
2637
background-image: none;
2638
}
2639
&.left:dir(rtl) {
2641
margin-left: -12px;
2642
margin-right: -4px;
2643
}
2644
&.right:dir(ltr) {
2646
margin-left: -4px;
2647
margin-right: -12px;
2648
}
2649
}
2650
menu menuitem & {
2652
transition: none;
2653
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2654
padding: 0;
2655
&:dir(ltr) {
2657
margin-right: 8px;
2658
}
2659
&:dir(rtl) {
2661
margin-left: 8px;
2662
}
2663
&,
2665
&:checked,
2666
&:indeterminate {
2667
&:hover,
2668
&:focus {
2669
background-color: transparent;
2670
}
2671
}
2672
}
2673
}
2674
%check,
2676
check {
2677
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2678
&:checked {
2680
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2681
}
2682
&:indeterminate {
2684
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2685
}
2686
}
2687
%radio,
2689
radio {
2690
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2691
&:checked {
2693
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2694
}
2695
&:indeterminate {
2697
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2698
}
2699
border-image-slice: $check-radio-size / 2px;
2701
border-image-width: $check-radio-size / 2;
2702
$radio-indicator-size: 10px / $check-radio-size / 2;
2704
border-image-source:
2706
-gtk-gradient(
2707
radial,
2708
center center, 0,
2709
center center, .001,
2710
to(theme-color.$primary),
2711
to(transparent)
2712
);
2713
&:checked:not(:indeterminate) {
2715
border-image-source:
2716
-gtk-gradient(
2717
radial,
2718
center center, 0,
2719
center center, $radio-indicator-size,
2720
to(theme-color.$primary),
2721
to(transparent)
2722
);
2723
&:disabled {
2725
border-image-source:
2726
-gtk-gradient(
2727
radial,
2728
center center, 0,
2729
center center, $radio-indicator-size,
2730
to(theme-color.disabled-hint(theme-color.$on-surface)),
2731
to(transparent)
2732
);
2733
}
2734
}
2735
}
2736
%small_check,
2738
menu menuitem check {
2739
min-height: 16px;
2740
min-width: 16px;
2741
border-radius: theme.$corner-radius;
2742
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2743
&:checked {
2745
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2746
}
2747
&:indeterminate {
2749
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2750
}
2751
}
2752
%small_radio,
2754
menu menuitem radio {
2755
min-height: 16px;
2756
min-width: 16px;
2757
border-image: none;
2758
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2759
&:checked {
2761
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2762
}
2763
&:indeterminate {
2765
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2766
}
2767
}
2768
// ANIMATION:
2770
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2771
// the transformation is set on the active state and it get reset on the checked state.
2772
radio:not(:checked):active {
2773
// -gtk-icon-transform: scale(0);
2774
}
2775
// Otherwise, treeview.view styling will be applied...
2777
treeview.view check,
2778
treeview.view radio {
2779
padding: 0;
2780
color: theme-color.hint(theme-color.$on-surface);
2781
&:checked,
2783
&:indeterminate {
2784
color: theme-color.$primary;
2785
}
2786
&:disabled {
2788
color: theme-color.disabled-hint(theme-color.$on-surface);
2789
}
2790
&,
2792
&:hover,
2793
&:selected,
2794
&:selected:hover {
2795
box-shadow: none;
2796
background-color: transparent;
2797
}
2798
}
2799
treeview.view radio:checked {
2801
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2802
border-image: none;
2803
}
2804
/**
2806
* GtkScale
2807
*/
2808
scale {
2810
// sizing
2811
$_marks_length: 8px;
2812
$_marks_distance: 7px;
2813
$trough_size: 2px;
2815
$finetune_trough_size: 4px;
2816
$slider_size: 32px;
2818
$slider_margin: -($slider_size - $trough_size) / 2;
2820
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2821
$color_slider_margin: -($slider_size) * 3 / 4;
2823
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2824
min-height: $trough_size;
2826
min-width: $trough_size;
2827
&.horizontal {
2829
padding: (theme.$medium-size - $trough_size) / 2 12px;
2830
}
2831
&.vertical {
2833
padding: 12px (theme.$medium-size - $trough_size) / 2;
2834
}
2835
// the slider is inside the trough, so to have make it bigger there's a negative margin
2837
slider {
2838
min-height: $slider_size;
2839
min-width: $slider_size;
2840
margin: $slider_margin;
2841
}
2842
// click-and-hold the slider to activate
2844
&.fine-tune {
2845
&.horizontal {
2846
min-height: $finetune_trough_size;
2847
padding-top: (theme.$medium-size - $finetune_trough_size) / 2;
2848
padding-bottom: (theme.$medium-size - $finetune_trough_size) / 2;
2849
}
2850
&.vertical {
2852
min-width: $finetune_trough_size;
2853
padding-left: (theme.$medium-size - $finetune_trough_size) / 2;
2854
padding-right: (theme.$medium-size - $finetune_trough_size) / 2;
2855
}
2856
// to make the trough grow in fine-tune mode
2858
slider {
2859
margin: $finetune_slider_margin;
2860
}
2861
}
2862
// the backing bit
2864
trough {
2865
transition: background-color theme.$duration theme.$ease-out;
2866
outline: none;
2867
background-color: theme-color.stroke(theme-color.$on-surface);
2868
&:disabled {
2870
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
2871
}
2872
}
2873
// the colored part of the backing bit
2875
highlight {
2876
transition: background-image theme.$duration theme.$ease-out;
2877
background-image: image(theme-color.$primary);
2878
&:disabled {
2880
background-color: theme-color.$surface-z0;
2881
background-image: image(theme-color.disabled-hint(theme-color.$on-surface));
2882
}
2883
}
2884
// this is another differently styled part of the backing bit, the most relevant use case is for example
2886
// in media player to indicate how much video stream as been cached
2887
fill {
2888
transition: background-color theme.$duration theme.$ease-out;
2889
background-color: theme-color.stroke(theme-color.$on-surface);
2890
&:disabled {
2892
background-color: transparent;
2893
}
2894
}
2895
slider {
2897
transition: background-color theme.$duration theme.$ease-out,
2898
background-size theme.$ripple-fade-out-duration theme.$ease-out,
2899
background-image theme.$ripple-fade-out-opacity-duration theme.$ease-out;
2900
background-repeat: no-repeat;
2901
background-position: center;
2902
background-size: auto, 1000% 1000%;
2903
border-radius: 50%;
2904
color: theme-color.$primary;
2905
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2907
&#{$class} {
2908
$_url: 'assets/scale-slider#{$suffix}#{theme.$asset-suffix}';
2909
background-image:
2911
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2912
radial-gradient(circle, transparent 10%, transparent 0%);
2913
}
2914
}
2915
&:hover {
2917
background-color: theme-color.hover-overlay(theme-color.$primary);
2918
}
2919
&:focus {
2921
background-color: theme-color.focus-overlay(theme-color.$primary);
2922
}
2923
&:active {
2925
$_url: 'assets/scale-slider#{theme.$asset-suffix}';
2926
transition: background-color theme.$duration theme.$ease-out,
2928
background-size 0ms,
2929
background-image 0ms;
2930
animation: ripple-on-slider theme.$ripple-fade-in-duration theme.$ease-out forwards;
2931
background-image:
2932
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2933
radial-gradient(circle, theme-color.pressed-overlay(theme-color.$primary) 10%, transparent 0%);
2934
background-size: auto, 0% 0%;
2935
}
2936
}
2937
marks,
2939
value {
2940
color: theme-color.hint(theme-color.$on-surface);
2941
}
2942
indicator {
2944
background-color: theme-color.stroke(theme-color.$on-surface);
2945
color: transparent;
2946
}
2947
//marks margins
2949
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2950
(horizontal, bottom, bottom, top),
2951
(vertical, top, left, right),
2952
(vertical, bottom, right, left) {
2953
&.#{$scale_orient} marks {
2954
&.#{$marks_class} {
2955
margin-#{$marks_margin}: $_marks_distance;
2956
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2957
}
2958
}
2959
&.#{$scale_orient}.fine-tune marks {
2961
&.#{$marks_class} {
2962
margin-#{$marks_margin}: $_marks_distance - 1px;
2963
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2964
}
2965
}
2966
}
2967
&.horizontal {
2969
indicator {
2970
min-height: $_marks_length;
2971
min-width: 1px;
2972
}
2973
}
2974
&.vertical {
2976
indicator {
2977
min-height: 1px;
2978
min-width: $_marks_length;
2979
}
2980
}
2981
// *WARNING* scale with marks madness following
2983
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2985
@each $marks_class, $marks_infix in (
2986
".marks-before:not(.marks-after)": "-marks-before",
2987
".marks-after:not(.marks-before)": "-marks-after"
2988
) {
2989
&#{$dir_class}#{$marks_class} {
2990
slider {
2991
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2992
&#{$state_class} {
2993
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{theme.$asset-suffix}';
2994
background-image:
2996
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2997
radial-gradient(circle, transparent 10%, transparent 0%);
2998
}
2999
}
3000
&:active {
3002
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{theme.$asset-suffix}';
3003
background-image:
3005
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3006
radial-gradient(circle, theme-color.pressed-overlay(theme-color.$primary) 10%, transparent 0%);
3007
}
3008
}
3009
}
3010
}
3011
}
3012
&.color {
3014
min-height: 0;
3015
min-width: 0;
3016
&.horizontal {
3018
padding: 0 0 12px 0;
3019
slider {
3021
&:dir(ltr), &:dir(rtl) { // specificity bump
3022
margin-bottom: $color_slider_margin;
3023
margin-top: $color_marks_slider_margin;
3024
}
3025
}
3026
}
3027
&.vertical {
3029
&:dir(ltr) {
3030
padding: 0 0 0 12px;
3031
slider {
3033
margin-left: $color_slider_margin;
3034
margin-right: $color_marks_slider_margin;
3035
}
3036
}
3037
&:dir(rtl) {
3039
padding: 0 12px 0 0;
3040
slider {
3042
margin-right: $color_slider_margin;
3043
margin-left: $color_marks_slider_margin;
3044
}
3045
}
3046
}
3047
}
3048
}
3049
/**
3051
* Progress bars
3052
*/
3053
progressbar {
3055
// sizing
3056
&.horizontal {
3057
trough,
3058
progress {
3059
min-height: theme.$bar-size;
3060
}
3061
}
3062
&.vertical {
3064
trough,
3065
progress {
3066
min-width: theme.$bar-size;
3067
}
3068
}
3069
// FIXME: insensitive state missing and some other state should be set probably
3071
color: theme-color.hint(theme-color.$on-surface);
3072
font-size: smaller;
3073
trough {
3075
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
3076
}
3077
progress {
3079
background-color: theme-color.$primary;
3080
}
3081
&.osd { // progressbar.osd used for epiphany page loading progress
3083
// min-width: $bar-size;
3084
// min-height: $bar-size;
3085
// background-color: transparent;
3086
trough {
3088
// background-color: transparent;
3089
}
3090
progress {
3092
// background-color: $primary;
3093
}
3094
}
3095
// makes the progress indicator disappear, when the fraction is 0
3097
trough.empty progress {
3098
all: unset;
3099
}
3100
}
3101
/**
3103
* Level Bar
3104
*/
3105
levelbar {
3107
&.horizontal {
3108
block {
3109
min-height: theme.$bar-size;
3110
}
3111
&.discrete block {
3113
min-width: theme.$medium-size;
3114
&:not(:last-child) {
3116
margin-right: 2px;
3117
}
3118
}
3119
}
3120
&.vertical {
3122
block {
3123
min-width: theme.$bar-size;
3124
}
3125
&.discrete block {
3127
min-height: theme.$medium-size;
3128
&:not(:last-child) {
3130
margin-bottom: 2px;
3131
}
3132
}
3133
}
3134
trough {
3136
}
3137
block {
3139
&.low {
3140
background-color: theme-color.$warning;
3141
}
3142
&.high,
3144
&:not(.empty) {
3145
background-color: theme-color.$primary;
3146
}
3147
&.full {
3149
background-color: theme-color.$success;
3150
}
3151
&.empty {
3153
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
3154
}
3155
}
3156
}
3157
/**
3159
* Print dialog
3160
*/
3161
printdialog {
3163
paper {
3164
padding: 0;
3165
border: 1px solid theme-color.divider(theme-color.$on-surface);
3166
background-clip: padding-box;
3167
background-color: theme-color.$surface-z1;
3168
color: theme-color.$on-surface;
3169
}
3170
.dialog-action-box {
3172
margin: 12px;
3173
}
3174
}
3175
/**
3177
* Frames
3178
*/
3179
frame > border,
3181
.frame {
3182
margin: 0;
3183
padding: 0;
3184
border: 1px solid theme-color.divider(theme-color.$on-surface);
3185
border-radius: 0;
3186
box-shadow: none;
3187
background-clip: padding-box;
3188
background-color: theme-color.$surface-z1;
3189
&.flat {
3191
border-style: none;
3192
background-color: transparent;
3193
}
3194
}
3195
// for backward compatibility
3197
frame.flat > border {
3198
border-style: none;
3199
background-color: transparent;
3200
}
3201
actionbar > revealer > box {
3203
padding: theme.$container-padding;
3204
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
3205
// background-color: $surface-z1;
3206
button:not(.suggested-action):not(.destructive-action) {
3208
@extend %button-flat;
3209
}
3210
.linked:not(.vertical) > entry:not(:only-child) {
3212
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
3213
}
3214
}
3215
scrolledwindow {
3217
// avoid double borders when viewport inside scrolled window
3218
viewport.frame {
3219
border-style: none;
3220
background-color: transparent;
3221
}
3222
// This is used when content is touch-dragged past boundaries.
3224
// draws a box on top of the content, the size changes programmatically.
3225
@at-root overshoot {
3226
&.top { @include drawing.overshoot(top); }
3227
&.bottom { @include drawing.overshoot(bottom); }
3229
&.left { @include drawing.overshoot(left); }
3231
&.right { @include drawing.overshoot(right); }
3233
}
3234
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3236
@at-root undershoot {
3237
// &.top { @include undershoot(top); }
3238
// &.bottom { @include undershoot(bottom); }
3240
// &.left { @include undershoot(left); }
3242
// &.right { @include undershoot(right); }
3244
}
3245
// the small square between two scrollbars
3247
@at-root junction {
3248
border-style: solid none none solid;
3249
border-width: 1px;
3250
border-color: theme-color.divider(theme-color.$on-surface);
3251
// background-color: $surface-z0;
3252
&:dir(rtl) {
3254
border-style: solid solid none none;
3255
}
3256
}
3257
}
3258
// vbox and hbox separators
3260
separator {
3261
min-width: 1px;
3262
min-height: 1px;
3263
background-color: theme-color.divider(theme-color.$on-surface);
3264
}
3265
%hide_separators {
3267
min-width: 0;
3268
min-height: 0;
3269
background-color: transparent;
3270
}
3271
/**
3273
* Lists
3274
*/
3275
list {
3277
border-color: theme-color.divider(theme-color.$on-surface);
3278
// background-color: $surface-z1;
3279
row {
3281
padding: 2px;
3282
}
3283
}
3284
row {
3286
background-clip: padding-box;
3287
&.activatable {
3289
@extend %ripple;
3290
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
3291
@include drawing.list-item;
3292
// this is for indicathing which row generated a popover
3294
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3295
&.has-open-popup {
3296
background-color: theme-color.activated-overlay(theme-color.$on-surface);
3297
}
3298
}
3299
&:selected {
3301
@include drawing.ink-color(theme-color.$primary, $hover-alt: true, $on: theme-color.$selected-overlay);
3302
&.has-open-popup {
3304
background-color: theme-color.activated-overlay(theme-color.$primary, $on: theme-color.$selected-overlay);
3305
}
3306
}
3307
}
3308
/**
3310
* App Notifications
3311
*/
3312
.app-notification {
3314
@extend %toolbar-osd;
3315
margin: 8px;
3316
button {
3318
@extend %button-flat;
3319
&.text-button:not(:disabled) {
3321
color: theme-color.$primary;
3322
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
3323
}
3324
}
3325
&.frame {
3327
border-style: none;
3328
}
3329
border {
3331
border-style: none;
3332
background-color: transparent;
3333
}
3334
}
3335
/**
3337
* Expanders
3338
*/
3339
expander {
3341
title > arrow {
3342
transition: all theme.$duration theme.$ease-out;
3343
min-width: 16px;
3344
min-height: 16px;
3345
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3346
&:checked {
3348
&:dir(ltr) {
3349
-gtk-icon-transform: rotate(-180deg);
3350
}
3351
&:dir(rtl) {
3353
-gtk-icon-transform: rotate(180deg);
3354
}
3355
}
3356
color: theme-color.hint(theme-color.$on-surface);
3358
&:hover,
3360
&:active {
3361
color: theme-color.$on-surface;
3362
}
3363
&:disabled {
3365
color: theme-color.disabled-hint(theme-color.$on-surface);
3366
}
3367
}
3368
}
3369
/**
3371
* Calendar
3372
*/
3373
calendar {
3375
padding: 1px;
3376
border: 1px solid theme-color.divider(theme-color.$on-surface);
3377
background-clip: padding-box;
3378
background-color: theme-color.$surface-z1;
3379
color: theme-color.$on-surface;
3380
&:disabled {
3382
color: theme-color.disabled(theme-color.$on-surface);
3383
}
3384
&:selected {
3386
border-radius: theme.$corner-radius + 1px;
3387
background-color: theme-color.$selected-overlay;
3388
}
3389
&.header {
3391
border-style: none none solid;
3392
border-color: theme-color.divider(theme-color.$on-surface);
3393
border-radius: 0;
3394
}
3395
&.button {
3397
border-radius: theme.$corner-radius + 1px;
3398
color: theme-color.hint(theme-color.$on-surface);
3399
&:hover {
3401
background-image: image(theme-color.hover-overlay(theme-color.$on-surface));
3402
}
3403
&:disabled {
3405
color: theme-color.disabled-hint(theme-color.$on-surface);
3406
}
3407
}
3408
&.highlight {
3410
color: theme-color.hint(theme-color.$on-surface);
3411
font-weight: 500;
3412
}
3413
&:indeterminate {
3415
color: theme-color.disabled-hint(theme-color.$on-surface);
3416
}
3417
}
3418
/**
3420
* Dialogs
3421
*/
3422
// Message Dialog styling
3424
messagedialog {
3425
&.background {
3426
background-color: theme-color.$surface-z8;
3427
}
3428
.titlebar {
3430
min-height: theme.$small-size;
3431
border-style: none;
3432
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
3433
background-color: theme-color.$surface-z8;
3434
color: theme-color.$on-surface;
3435
&:backdrop {
3437
background-color: theme-color.$surface-z8;
3438
color: theme-color.hint(theme-color.$on-surface);
3439
}
3440
}
3441
&.csd {
3443
// rounded bottom border styling for csd version
3444
&.background {
3445
// bigger radius for better antialiasing
3446
border-bottom-left-radius: theme.$corner-radius;
3447
border-bottom-right-radius: theme.$corner-radius;
3448
}
3449
}
3450
// Hint text
3452
box.vertical > label + label {
3453
color: theme-color.hint(theme-color.$on-surface);
3454
}
3455
.dialog-action-box {
3457
margin-top: -(theme.$container-padding);
3458
// padding: $container-padding;
3459
button {
3461
@extend %button-flat;
3462
&:not(:last-child) {
3464
margin-right: theme.$container-padding;
3465
}
3466
&:not(:disabled) {
3468
color: theme-color.$primary;
3469
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
3470
}
3471
&.suggested-action:not(:disabled) {
3473
// color: $primary;
3474
// @include ink-color($primary, $button-style: "flat");
3475
}
3476
&.destructive-action:not(:disabled) {
3478
color: theme-color.$error;
3479
@include drawing.ink-color(theme-color.$error, $button-style: "flat");
3480
}
3481
}
3482
}
3483
}
3484
filechooser {
3486
.dialog-action-box {
3487
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
3488
}
3489
#pathbarbox {
3491
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
3492
// background-color: $surface-z0;
3493
// The new folder button
3495
> stack > box > button {
3496
@extend %button-flat-activatable;
3497
border-radius: theme.$circular-radius;
3499
}
3500
}
3501
}
3502
filechooserbutton:drop(active) {
3504
// box-shadow: none;
3505
}
3506
/**
3508
* Sidebar
3509
*/
3510
.sidebar {
3512
border-style: none;
3513
background-color: transparent;
3514
&:not(separator) {
3516
@at-root %sidebar_left,
3517
&:dir(ltr),
3518
&.left,
3519
&.left:dir(rtl) {
3520
border-right: 1px solid theme-color.divider(theme-color.$on-surface);
3521
border-left-style: none;
3522
}
3523
@at-root %sidebar_right,
3525
&:dir(rtl),
3526
&.right {
3527
border-left: 1px solid theme-color.divider(theme-color.$on-surface);
3528
border-right-style: none;
3529
}
3530
}
3531
list {
3533
// background-color: transparent;
3534
}
3535
paned & {
3537
&,
3538
&.left,
3539
&.right,
3540
&.left:dir(rtl),
3541
&:dir(rtl),
3542
&:dir(ltr) {
3543
border-style: none;
3544
}
3545
}
3546
}
3547
stacksidebar.sidebar {
3549
& {
3550
&:dir(ltr),
3551
&.left,
3552
&.left:dir(rtl) {
3553
list {
3554
@extend %sidebar_left;
3555
}
3556
}
3557
&:dir(rtl),
3559
&.right {
3560
list {
3561
@extend %sidebar_right;
3562
}
3563
}
3564
}
3565
+ separator.vertical,
3567
separator.horizontal {
3568
@extend %hide_separators;
3569
}
3570
list {
3572
padding: 4px;
3573
// background-color: $surface-z0; // This should not be necessary, but the parent stacksidebar ignores background-color.
3574
}
3575
row {
3577
min-height: 32px;
3578
padding: 0 8px - 6px;
3579
border-radius: theme.$corner-radius;
3580
color: theme-color.hint(theme-color.$on-surface);
3581
font-weight: 500;
3582
&:selected {
3584
$background-color: theme-color.activated-overlay(theme-color.$primary);
3585
color: theme-color.$primary;
3586
@include drawing.ink-color(theme-color.$primary, $on: $background-color, $hover-alt: true);
3587
}
3588
+ row {
3590
margin-top: 4px;
3591
}
3592
> label {
3594
padding-left: 6px;
3595
padding-right: 6px;
3596
}
3597
&.needs-attention > label {
3599
@extend %needs-attention;
3600
}
3601
}
3602
}
3603
separator.sidebar {
3605
background-color: theme-color.divider(theme-color.$on-surface);
3606
&.selection-mode,
3608
.selection-mode & {
3609
// background-color: divider($on-primary);
3610
}
3611
}
3612
/**
3614
* File chooser
3615
*/
3616
// dim the sidebar icons, see bug #786613 for details on this oddity
3618
row image.sidebar-icon {
3619
transition: color theme.$duration theme.$ease-out;
3620
color: theme-color.hint(theme-color.$on-surface);
3621
&:disabled {
3623
color: theme-color.disabled-hint(theme-color.$on-surface);
3624
}
3625
}
3626
placessidebar.sidebar {
3628
> viewport.frame {
3629
border-style: none;
3630
background-color: transparent;
3631
}
3632
list {
3634
padding: (4px - 3px) 0 4px;
3635
}
3636
row {
3638
// Needs overriding of the GtkListBoxRow padding
3639
min-height: 32px;
3640
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3641
padding: 0;
3642
border-radius: theme.$corner-radius;
3643
// Using margins/padding directly in the SidebarRow
3645
// will make the animation of the new bookmark row jump
3646
> revealer {
3647
padding: 0 8px;
3648
}
3649
&:selected {
3651
$background-color: theme-color.activated-overlay(theme-color.$primary);
3652
color: theme-color.$primary;
3653
font-weight: 500;
3654
@include drawing.ink-color(theme-color.$primary, $on: $background-color, $hover-alt: true);
3655
image.sidebar-icon {
3657
color: theme-color.$primary;
3658
}
3659
}
3660
&:disabled {
3662
color: theme-color.disabled(theme-color.$on-surface);
3663
}
3664
image.sidebar-icon {
3666
&:dir(ltr) {
3667
padding-right: 8px;
3668
}
3669
&:dir(rtl) {
3671
padding-left: 8px;
3672
}
3673
}
3674
label.sidebar-label {
3676
&:dir(ltr) {
3677
padding-right: 2px;
3678
}
3679
&:dir(rtl) {
3681
padding-left: 2px;
3682
}
3683
}
3684
@at-root button.sidebar-button {
3686
@extend %button-flat-basic;
3687
@extend %button-small;
3688
}
3689
&.sidebar-placeholder-row {
3691
background-color: theme-color.hover-overlay(theme-color.$on-surface);
3692
}
3693
&.sidebar-new-bookmark-row {
3695
color: theme-color.$primary;
3696
image.sidebar-icon {
3698
color: theme-color.$primary;
3699
}
3700
}
3701
}
3702
}
3703
placesview {
3705
.server-list-button {
3706
> image {
3707
-gtk-icon-transform: rotate(-.5turn);
3708
}
3709
&:checked > image {
3711
-gtk-icon-transform: rotate(0turn);
3712
}
3713
}
3714
// this selects the "connect to server" label
3716
> actionbar > revealer > box > label {
3717
padding-left: 8px;
3718
padding-right: 8px;
3719
}
3720
}
3721
/**
3723
* Paned
3724
*/
3725
paned {
3727
> separator {
3728
min-width: 1px;
3729
min-height: 1px;
3730
-gtk-icon-source: none; // defeats the ugly default handle decoration
3731
border-style: none; // just to be sure
3732
background-color: transparent;
3733
// workaround, using background istead of a border since the border will get rendered twice (?)
3734
background-image: image(theme-color.divider(theme-color.$on-surface));
3735
background-size: 1px 1px;
3736
background-clip: content-box; // avoids borders image being rendered twice (?)
3737
&.wide {
3739
min-width: 6px;
3740
min-height: 6px;
3741
// background-color: $surface-z0;
3742
background-image: image(theme-color.divider(theme-color.$on-surface)), image(theme-color.divider(theme-color.$on-surface));
3743
background-size: 1px 1px, 1px 1px;
3744
}
3745
}
3746
&.horizontal > separator {
3748
background-repeat: repeat-y;
3749
&:dir(ltr) {
3751
margin: 0 -8px 0 0;
3752
padding: 0 8px 0 0;
3753
background-position: left;
3754
}
3755
&:dir(rtl) {
3757
margin: 0 0 0 -8px;
3758
padding: 0 0 0 8px;
3759
background-position: right;
3760
}
3761
&.wide {
3763
margin: 0;
3764
padding: 0;
3765
background-repeat: repeat-y, repeat-y;
3766
background-position: left, right;
3767
}
3768
}
3769
&.vertical > separator {
3771
margin: 0 0 -8px 0;
3772
padding: 0 0 8px 0;
3773
background-repeat: repeat-x;
3774
background-position: top;
3775
&.wide {
3777
margin: 0;
3778
padding: 0;
3779
background-repeat: repeat-x, repeat-x;
3780
background-position: bottom, top;
3781
}
3782
}
3783
}
3784
/**
3786
* GtkInfoBar
3787
*/
3788
infobar {
3790
border-style: none;
3791
&.action:hover > revealer > box {
3793
background-image: image(theme-color.hover-overlay(theme-color.$on-surface));
3794
}
3795
&.info > revealer > box,
3797
&.question > revealer > box {
3798
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
3799
// background-color: $surface-z1;
3800
button {
3802
@extend %button-flat;
3803
&.text-button:not(:disabled) {
3805
color: theme-color.$primary;
3806
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
3807
}
3808
}
3809
}
3810
&.warning > revealer > box {
3812
background-color: theme-color.$warning;
3813
color: theme-color.$on-warning;
3814
button.flat {
3816
color: theme-color.$on-warning;
3817
@include drawing.ink-color(theme-color.$on-warning, $button-style: "flat");
3818
}
3819
selection {
3821
}
3822
*:link {
3824
color: theme-color.$on-warning;
3825
}
3826
}
3827
&.error > revealer > box {
3829
background-color: theme-color.$error;
3830
color: theme-color.$on-error;
3831
button.flat {
3833
color: theme-color.$on-error;
3834
@include drawing.ink-color(theme-color.$on-error, $button-style: "flat");
3835
}
3836
selection {
3838
}
3839
*:link {
3841
color: theme-color.$on-error;
3842
}
3843
}
3844
// Remove ugly hard-coded padding
3846
button label {
3847
margin: 0 -4px;
3848
}
3849
}
3850
/**
3852
* Tooltips
3853
*/
3854
tooltip {
3856
&.background {
3857
// background-color needs to be set this way otherwise it gets drawn twice
3858
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3859
background-color: theme-color.$tooltip;
3860
color: theme-color.$on-tooltip;
3861
}
3862
// padding: 4px; /* not working */
3864
border-radius: theme.$corner-radius;
3865
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3866
&:not(.csd):not(.unity-csd) {
3868
// border: 1px solid divider($on-surface);
3869
// border-radius: $corner-radius + 1px;
3870
}
3871
// FIXME: we need a border or tooltips vanish on black background.
3873
decoration {
3874
background-color: transparent;
3875
}
3876
> box {
3878
margin: -6px; // Remove hard-coded 6px margin
3879
min-height: 32px - 4px * 2;
3880
padding: 4px 8px;
3881
}
3882
.dim-label {
3884
color: theme-color.hint(theme-color.$on-tooltip);
3885
}
3886
* {
3888
// workaround for Eclipse.
3889
// do not include any declaration here.
3890
}
3891
}
3892
/**
3894
* Color Chooser
3895
*/
3896
colorswatch {
3898
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3899
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3900
// applied to the overlay box.
3901
// base color corners rounding
3903
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3904
// sports a bigger radius.
3905
// nth-child is needed by the custom color strip.
3906
&.top {
3908
border-top-left-radius: theme.$corner-radius + .5px;
3909
border-top-right-radius: theme.$corner-radius + .5px;
3910
overlay {
3912
border-top-left-radius: theme.$corner-radius;
3913
border-top-right-radius: theme.$corner-radius;
3914
}
3915
}
3916
&.bottom {
3918
border-bottom-left-radius: theme.$corner-radius + .5px;
3919
border-bottom-right-radius: theme.$corner-radius + .5px;
3920
overlay {
3922
border-bottom-left-radius: theme.$corner-radius;
3923
border-bottom-right-radius: theme.$corner-radius;
3924
}
3925
}
3926
&.left,
3928
&:first-child:not(.top) {
3929
border-top-left-radius: theme.$corner-radius + .5px;
3930
border-bottom-left-radius: theme.$corner-radius + .5px;
3931
overlay {
3933
border-top-left-radius: theme.$corner-radius;
3934
border-bottom-left-radius: theme.$corner-radius;
3935
}
3936
}
3937
&.right,
3939
&:last-child:not(.bottom) {
3940
border-top-right-radius: theme.$corner-radius + .5px;
3941
border-bottom-right-radius: theme.$corner-radius + .5px;
3942
overlay {
3944
border-top-right-radius: theme.$corner-radius;
3945
border-bottom-right-radius: theme.$corner-radius;
3946
}
3947
}
3948
&.dark {
3950
color: theme-color.$on-dark;
3951
}
3952
&.light {
3954
color: theme-color.$on-light;
3955
}
3956
overlay {
3958
transition: theme.$transition-shadow;
3959
box-shadow: theme.$shadow-z1;
3960
&:drop(active),
3962
&:hover {
3963
box-shadow: theme.$shadow-z3;
3964
}
3965
}
3966
&#add-color-button {
3968
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
3969
color: theme-color.$on-surface;
3970
&:only-child {
3972
border-radius: theme.$corner-radius;
3973
}
3974
overlay {
3976
background-color: theme-color.$surface-z8;
3977
}
3978
}
3979
&:disabled {
3981
opacity: .5;
3982
overlay {
3984
box-shadow: none;
3985
}
3986
}
3987
row:selected & {
3989
}
3990
&#editor-color-sample {
3992
border-radius: theme.$corner-radius + .5px;
3993
overlay {
3995
border-radius: theme.$corner-radius;
3996
&:hover {
3998
// box-shadow: $shadow-z1;
3999
}
4000
}
4001
}
4002
}
4003
// colorscale popup
4005
colorchooser .popover.osd {
4006
transition: theme.$transition-shadow;
4007
border-radius: theme.$corner-radius;
4008
box-shadow: theme.$shadow-z4, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
4009
background-color: theme-color.$surface-z8;
4010
&:backdrop {
4012
box-shadow: theme.$shadow-z2, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
4013
}
4014
}
4015
/**
4017
* Misc
4018
*/
4019
// content view (grid/list)
4021
.content-view {
4022
// background-color: $surface-z0;
4023
&:hover {
4025
// -gtk-icon-effect: highlight;
4026
}
4027
rubberband,
4029
.rubberband {
4030
@extend %rubberband;
4031
}
4032
}
4033
.scale-popup {
4035
.osd & {
4036
// @extend %osd;
4037
// FIXME: quick hack, redo properly
4039
button.flat {
4040
}
4041
}
4042
// +/- buttons on GtkVolumeButton popup
4044
button {
4045
}
4046
}
4047
/**
4049
* Window Decorations
4050
*/
4051
decoration {
4053
transition: theme.$transition-shadow;
4054
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
4055
box-shadow: theme.$shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4056
// FIXME rationalize shadows
4058
// this is used for the resize cursor area
4060
margin: 8px;
4061
&:backdrop {
4063
// the transparent shadow here is to enforce that the shadow extents don't
4064
// change when we go to backdrop, to prevent jumping windows.
4065
// The biggest shadow should be in the same order then in the active state
4066
// or the jumping will happen during the transition.
4067
box-shadow: theme.$shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4068
}
4069
.maximized &,
4071
.fullscreen &,
4072
.tiled &,
4073
.tiled-top &,
4074
.tiled-right &,
4075
.tiled-bottom &,
4076
.tiled-left & {
4077
border-radius: 0;
4078
}
4079
.popup & {
4081
box-shadow: none;
4082
}
4083
// server-side decorations as used by mutter
4085
.ssd & {
4086
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4087
}
4088
.csd.popup & {
4090
border-radius: theme.$corner-radius;
4091
box-shadow: theme.$shadow-z4;
4092
}
4093
tooltip.csd & {
4095
border-radius: theme.$corner-radius;
4096
box-shadow: none;
4097
}
4098
messagedialog.csd & {
4100
border-radius: theme.$corner-radius;
4101
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4102
&:backdrop {
4104
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4105
}
4106
}
4107
.solid-csd & {
4109
margin: 0;
4110
padding: 2px;
4111
border-radius: 0;
4112
box-shadow: none;
4113
box-shadow: inset 0 1px theme-color.highlight(theme-color.$titlebar);
4114
background-color: theme-color.$titlebar;
4115
&:backdrop {
4117
background-color: theme-color.$titlebar-backdrop;
4118
}
4119
}
4120
}
4121
// Window Close button
4123
button.titlebutton {
4124
border-radius: theme.$circular-radius;
4125
.selection-mode & {
4127
}
4128
}
4129
// catch all extend :)
4132
.monospace {
4134
font-family: monospace;
4135
}
4136
/**
4138
* Touch Copy & Paste
4139
*/
4140
// touch selection handlebars for the Popover.osd above
4142
cursor-handle {
4143
color: theme-color.$primary;
4144
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4145
&.top:dir(ltr),
4147
&.bottom:dir(rtl) {
4148
-gtk-icon-transform: rotate(90deg);
4149
}
4150
&.bottom:dir(ltr),
4152
&.top:dir(rtl) {
4153
-gtk-icon-transform: unset;
4154
}
4155
&.insertion-cursor:dir(ltr),
4157
&.insertion-cursor:dir(rtl) {
4158
padding-top: 6px;
4159
-gtk-icon-transform: rotate(45deg);
4160
}
4161
}
4162
// Decouple the font of context menus from their entry/textview
4164
.context-menu {
4165
font: initial;
4166
}
4167
// shortcut window keys
4169
.keycap {
4170
min-width: 28px - 8px * 2;
4171
min-height: 28px;
4172
padding-left: 8px;
4173
padding-right: 8px;
4174
border-radius: theme.$corner-radius;
4175
box-shadow: theme.$shadow-z1;
4176
background-color: theme-color.$surface-z8;
4177
color: theme-color.$on-surface;
4178
font-size: smaller;
4179
}
4180
// workaround for clipped shadows of .keycap
4182
shortcut:last-child {
4183
margin-bottom: 4px;
4184
}
4185
// FIXME needs to be done widget by widget, this wildcard should really die
4187
:not(decoration):not(window):drop(active) {
4188
// caret-color: $primary;
4189
}
4190
// FIXME aggregate with buttons
4192
stackswitcher button.text-button {
4193
min-width: 100px;
4194
}
4195
// FIXME aggregate with buttons
4197
stackswitcher button.circular,
4198
stackswitcher button.text-button.circular {
4199
min-width: theme.$medium-size;
4200
min-height: theme.$medium-size;
4201
padding: 0;
4202
}
4203
/**
4205
* App Icons
4206
*/
4207
// Outline for low res icons
4209
.lowres-icon {
4210
// -gtk-icon-shadow: none;
4211
}
4212
// Drapshadow for large icons
4214
.icon-dropshadow {
4215
// -gtk-icon-shadow: none;
4216
}
4217
/**
4219
* Emoji
4220
*/
4221
popover.emoji-picker {
4223
padding: 0;
4224
entry {
4226
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
4227
border-image: none;
4228
border-radius: 0;
4229
box-shadow: none;
4230
background-color: transparent;
4231
}
4232
scrolledwindow {
4234
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
4235
}
4236
}
4237
button.emoji-section {
4239
margin: 4px;
4240
&:not(:last-child) {
4242
margin-right: 0;
4243
}
4244
}
4245
popover.emoji-picker .emoji {
4247
min-width: 3em;
4248
min-height: 3em;
4249
padding: 0 8px;
4250
// font-size: larger;
4251
widget {
4253
transition: theme.$transition;
4254
border-radius: theme.$corner-radius;
4255
&:hover {
4257
background-color: theme-color.hover-overlay(theme-color.$on-surface);
4258
}
4259
}
4260
}
4261
popover.emoji-completion {
4263
padding: 8px 0;
4264
arrow {
4266
border: none;
4267
background: none;
4268
}
4269
.emoji-completion-row {
4271
min-height: theme.$menuitem-size;
4272
padding: 0 12px;
4273
}
4274
.emoji:hover {
4276
background-color: theme-color.hover-overlay(theme-color.$on-surface);
4277
}
4278
}
4279