ASCII text
1
@use "../../theme";
2
@use "../../theme-color";
3
@use "../../shadow";
4
@use "drawing";
5
* {
7
// padding: 0;
8
-GtkToolButton-icon-spacing: 0;
10
-GtkTextView-error-underline-color: theme-color.$error;
11
// The size for scrollbars. The slider is 2px smaller, but we keep it
13
// up so that the whole area is sensitive to button presses for the
14
// slider. The stepper button is larger in both directions, the slider
15
// only in the width
16
-GtkScrolledWindow-scrollbar-spacing: 0;
18
-GtkToolItemGroup-expander-size: 11;
20
-GtkWidget-text-handle-width: 24;
22
-GtkWidget-text-handle-height: 24;
23
-GtkDialog-button-spacing: theme.$container-padding / 1px;
25
-GtkDialog-action-area-border: theme.$container-padding / 1px;
26
-gtk-secondary-caret-color: theme-color.$primary;
28
// We use the outline properties to signal the focus properties
30
// to the adwaita engine: using real CSS properties is faster,
31
// and we don't use any outlines for now.
32
outline: 2px solid transparent;
34
outline-offset: -4px;
35
-gtk-outline-radius: theme.$corner-radius;
36
&:focus {
38
outline-color: theme-color.focus-overlay(theme-color.$on-surface);
39
}
40
}
41
/**
43
* Base States
44
*/
45
.background {
47
background-color: theme-color.$surface-z0;
48
color: theme-color.$on-surface;
49
}
50
/*
52
These wildcard seems unavoidable, need to investigate.
53
Wildcards are bad and troublesome, use them with care,
54
or better, just don't.
55
Everytime a wildcard is used a kitten dies, painfully.
56
*/
57
*:disabled {
59
-gtk-icon-effect: dim;
60
}
61
.gtkstyle-fallback {
63
background-color: theme-color.$surface-z0;
64
color: theme-color.$on-surface;
65
&:hover {
67
background-color: theme-color.hover-overlay(theme-color.$on-surface, $on: theme-color.$surface-z0);
68
}
69
&:active {
71
background-color: theme-color.pressed-overlay(theme-color.$on-surface, $on: theme-color.$surface-z0);
72
}
73
&:disabled {
75
color: theme-color.disabled(theme-color.$on-surface);
76
}
77
&:selected {
79
background-color: theme-color.$primary;
80
color: theme-color.$on-primary;
81
}
82
}
83
.view {
85
// background-color: $surface-z0;
86
// color: $on-surface;
87
&:hover {
89
background-color: theme-color.hover-overlay(theme-color.$on-surface, $alt: true);
90
}
91
&:selected:hover {
93
background-color: theme-color.hover-overlay(theme-color.$primary, $alt: true, $on: theme-color.$selected-overlay);
94
}
95
&:disabled {
97
color: theme-color.disabled(theme-color.$on-surface);
98
}
99
&:hover,
101
&:selected {
102
border-radius: theme.$corner-radius;
103
}
104
selection,
106
&:selected {
107
background-color: theme-color.$selected-overlay;
108
}
109
}
110
textview {
112
// FIXME: we need to override background-color to ensure text rendering
113
text {
114
background-color: theme-color.$surface-z0;
115
caret-color: theme-color.$primary;
116
frame:not(.flat) &,
118
.frame & {
119
background-color: theme-color.$surface-z1;
120
}
121
popover.background & {
123
background-color: theme-color.$surface-z8;
124
}
125
messagedialog.background & {
127
background-color: theme-color.$surface-z8;
128
}
129
}
130
border {
132
// background-color: $surface-z0;
133
color: theme-color.hint(theme-color.$on-surface); // FIXME: not working
134
}
135
}
136
iconview {
138
// @extend .view;
139
}
140
%iconview-desktop {
142
// background-color: $scrim;
143
color: theme-color.$on-dark;
144
text-shadow: shadow.$text-shadow;
145
.rubberband,
147
rubberband {
148
border: 1px solid theme-color.primary(theme-color.$on-dark);
149
background-color: rgba(theme-color.primary(theme-color.$on-dark), .3);
150
}
151
}
152
%rubberband,
154
.rubberband,
155
rubberband {
156
border: 1px solid theme-color.$primary;
157
background-color: rgba(theme-color.$primary, .24);
158
}
159
flowbox {
161
rubberband {
162
@extend %rubberband;
163
}
164
flowboxchild {
166
padding: 4px;
167
border-radius: theme.$corner-radius;
168
&:selected {
170
background-color: theme-color.$selected-overlay;
171
}
172
}
173
}
174
.content-view .tile {
176
// margin: 2px;
177
// padding: 0;
178
// border-radius: 0;
179
// background-color: black;
180
&:selected {
182
background-color: transparent;
183
}
184
}
185
label {
187
caret-color: theme-color.$primary; // this shouldn't be needed.
188
&.separator {
190
color: theme-color.hint(theme-color.$on-surface);
191
}
192
&.error {
194
color: theme-color.$error;
195
}
196
selection {
198
background-color: theme-color.$selected-overlay;
199
}
200
&:disabled {
202
color: theme-color.disabled(theme-color.$on-surface);
203
headerbar &,
205
menuitem &,
206
tab &,
207
button & {
208
color: inherit;
209
}
210
}
211
&.osd {
213
border-radius: theme.$corner-radius;
214
background-color: theme-color.$tooltip;
215
color: theme-color.$on-tooltip;
216
}
217
}
218
.dim-label {
220
color: theme-color.hint(theme-color.$on-surface);
221
}
222
assistant {
224
.sidebar {
225
padding: 4px 0;
226
}
227
.sidebar label {
229
min-height: theme.$medium-size;
230
margin: 0 4px;
231
padding: 0 8px;
232
border-radius: theme.$corner-radius;
233
color: theme-color.disabled(theme-color.$on-surface);
234
font-weight: 500;
235
&.highlight {
237
background-color: theme-color.activated-overlay(theme-color.$primary);
238
color: theme-color.$primary;
239
}
240
}
241
}
242
%osd,
244
.osd {
245
// opacity: .9;
246
}
247
/**
249
* Spinner Animation
250
*/
251
@keyframes spin {
253
to {
254
-gtk-icon-transform: rotate(1turn);
255
}
256
}
257
spinner {
259
background: none;
260
opacity: 0; // non spinning spinner makes no sense
261
color: theme-color.$primary;
262
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
263
transition: opacity theme.$state-duration * 4 theme.$ease-out;
264
animation: spin 1s linear infinite;
265
&:checked {
267
opacity: 1;
268
}
269
&:disabled {
271
color: theme-color.disabled-hint(theme-color.$on-surface);
272
}
273
}
274
/**
276
* General Typography
277
*/
278
@function pt($size: $font-size) {
280
@return ($size * .75 / 1px) * 1pt;
281
}
282
.large-title {
284
font-weight: 400;
285
font-size: pt(48px);
286
}
287
.title-1 {
289
font-weight: 400;
290
font-size: pt(34px);
291
letter-spacing: pt(.25px);
292
}
293
.title-2 {
295
font-weight: 400;
296
font-size: pt(24px);
297
}
298
.title-3 {
300
font-weight: 500;
301
font-size: pt(20px);
302
letter-spacing: pt(.15px);
303
}
304
.title-4 {
306
font-weight: 400;
307
font-size: pt(16px);
308
letter-spacing: pt(.5px);
309
}
310
.heading {
312
font-weight: 500;
313
font-size: 1em;
314
}
315
.body {
317
font-weight: 400;
318
font-size: 1em;
319
}
320
.caption-heading {
322
font-weight: 500;
323
font-size: pt(12px);
324
letter-spacing: pt(1.5px);
325
}
326
.caption {
328
font-weight: 400;
329
font-size: pt(12px);
330
letter-spacing: pt(.4px);
331
}
332
/**
334
* Text Entries
335
*/
336
%entry,
338
entry {
339
min-height: theme.$medium-size;
340
padding: 0 8px;
341
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
342
@include drawing.entry(normal);
344
&:focus {
346
@include drawing.entry(checked);
347
}
348
&:drop(active) {
350
@include drawing.entry(hover);
351
}
352
&:disabled {
354
@include drawing.entry(disabled);
355
}
356
&.flat {
358
min-height: 0;
359
padding: 2px;
360
border-radius: 0;
361
background-color: transparent;
362
}
363
// icons inside the entry
365
image {
366
color: theme-color.hint(theme-color.$on-surface);
367
&:hover,
369
&:active {
370
color: theme-color.$on-surface;
371
}
372
&:disabled {
374
color: theme-color.disabled(theme-color.$on-surface);
375
}
376
&.left {
378
margin-left: (theme.$medium-size - 16px) / 2 - 8px;
379
margin-right: 6px;
380
}
381
&.right {
383
margin-left: 6px;
384
margin-right: (theme.$medium-size - 16px) / 2 - 8px;
385
}
386
}
387
undershoot {
389
&.left {
390
// @include undershoot(left);
391
}
392
&.right {
394
// @include undershoot(right);
395
}
396
}
397
selection {
399
background-color: theme-color.$selected-overlay;
400
}
401
// entry error and warning style
403
@each $class, $color in (".error": theme-color.$error, ".warning": theme-color.$warning) {
404
&#{$class} {
405
@include drawing.entry(normal, $color);
406
&:focus {
408
@include drawing.entry(checked, $color);
409
}
410
&:disabled {
412
@include drawing.entry(disabled, $color);
413
}
414
}
415
}
416
.osd & {
418
}
419
progress {
421
margin: 0 -8px -4px;
422
border-bottom: 2px solid theme-color.$primary;
423
background-color: transparent;
424
}
425
// linked entries
427
.linked:not(.vertical) > & {
428
@extend %linked;
429
}
430
// Vertically linked entries
432
.linked.vertical > & {
433
@extend %linked-vertical;
434
}
435
}
436
%entry_raised {
438
border-radius: theme.$corner-radius;
439
@include drawing.entry(raised-normal);
441
&:focus {
443
@include drawing.entry(raised-focus);
444
}
445
&:drop(active) {
447
@include drawing.entry(raised-hover);
448
}
449
&:disabled {
451
@include drawing.entry(raised-disabled);
452
}
453
// entry error and warning style
455
@each $class, $color in (".error": theme-color.$error, ".warning": theme-color.$warning) {
456
&#{$class} {
457
@include drawing.entry(raised-normal, $color);
458
&:focus {
460
@include drawing.entry(raised-focus, $color);
461
}
462
&:disabled {
464
@include drawing.entry(raised-disabled, $color);
465
}
466
image {
468
color: theme-color.hint(theme-color.on($color));
469
&:hover,
471
&:active {
472
color: theme-color.on($color);
473
}
474
&:disabled {
476
color: theme-color.disabled(theme-color.on($color));
477
}
478
}
479
}
480
}
481
}
482
treeview entry {
484
&,
485
&.flat {
486
background-color: theme-color.$surface-z1;
487
&,
489
&:focus {
490
border-image: none;
491
box-shadow: none;
492
}
493
}
494
}
495
.entry-tag {
497
margin: 2px;
498
border-radius: theme.$circular-radius;
499
box-shadow: none;
500
background-color: theme-color.fill(theme-color.$on-surface);
501
color: theme-color.$on-surface;
502
&:hover {
504
background-image: image(theme-color.hover-overlay(theme-color.$on-surface));
505
}
506
// side margins: compensate the entry padding with a negative margin
508
// then the negative margin itself
509
:dir(ltr) & {
510
margin-left: 4px;
511
margin-right: 0;
512
padding-left: 12px;
513
padding-right: 8px;
514
}
515
:dir(rtl) & {
517
margin-left: 0;
518
margin-right: 4px;
519
padding-left: 8px;
520
padding-right: 12px;
521
}
522
// seems any sizing doesn't work
524
&.button {
525
box-shadow: none;
526
background-color: transparent;
527
color: theme-color.hint(theme-color.$on-surface);
528
}
529
}
530
/**
532
* Buttons
533
*/
534
// stuff for .needs-attention
536
@keyframes needs-attention {
537
from {
538
background-image:
539
-gtk-gradient(
540
radial,
541
center center, 0,
542
center center, .001,
543
to(theme-color.$primary),
544
to(transparent)
545
);
546
}
547
to {
549
background-image:
550
-gtk-gradient(
551
radial,
552
center center, 0,
553
center center, .5,
554
to(theme-color.$primary),
555
to(transparent)
556
);
557
}
558
}
559
%button,
561
button {
562
min-height: 24px;
563
min-width: 16px;
564
padding: (theme.$medium-size - 24px) / 2 (theme.$medium-size - 16px) / 2;
565
border-radius: theme.$corner-radius;
566
color: theme-color.$on-surface;
567
font-weight: 500;
568
@extend %ripple;
570
@include drawing.ink-color(theme-color.$on-surface, $button-style: "raised", $on: theme-color.$surface-z8);
571
&:disabled {
573
box-shadow: none;
574
background-color: theme-color.fill(theme-color.$on-surface);
575
color: theme-color.disabled(theme-color.$on-surface);
576
}
577
&:checked {
579
$background-color: theme-color.activated-overlay(theme-color.$primary, $on: theme-color.$surface-z8);
580
color: theme-color.$primary;
581
@include drawing.ink-color(theme-color.$primary, $button-style: "raised", $on: $background-color);
582
&:disabled {
584
box-shadow: none;
585
background-color: theme-color.activated-overlay(theme-color.$on-surface, $on: theme-color.fill(theme-color.$on-surface));
586
color: theme-color.disabled(theme-color.$on-surface);
587
}
588
}
589
&.text-button {
591
min-width: 64px - 16px * 2;
592
padding-left: 16px;
593
padding-right: 16px;
594
}
595
&.image-button {
597
min-width: 24px;
598
padding: (theme.$medium-size - 24px) / 2;
599
border-radius: theme.$circular-radius;
600
}
601
// NOTE: Some image-only buttons use this as well
603
&.text-button.image-button {
604
min-width: 24px;
605
padding: (theme.$medium-size - 24px) / 2;
606
border-radius: theme.$corner-radius;
607
label {
609
&:first-child {
610
margin-left: 16px - (theme.$medium-size - 24px) / 2;
611
}
612
&:last-child {
614
margin-right: 16px - (theme.$medium-size - 24px) / 2;
615
}
616
}
617
image:not(:only-child) {
619
margin: 0 (24px - 16px) / 2;
620
}
621
}
622
.linked:not(.vertical) > & {
624
@extend %linked;
625
&.image-button:not(.text-button) {
627
@extend %linked-image-button;
628
}
629
}
630
.linked.vertical > & {
632
@extend %linked-vertical;
633
&.image-button:not(.text-button) {
635
@extend %linked-vertical-image-button;
636
}
637
}
638
}
639
%button-flat-basic {
641
color: theme-color.hint(theme-color.$on-surface);
642
@include drawing.ink-color(theme-color.$on-surface, $button-style: "flat");
643
&:disabled {
645
background-color: transparent;
646
color: theme-color.disabled-hint(theme-color.$on-surface);
647
}
648
}
649
%button-flat-activatable {
651
@extend %button-flat-basic;
652
&:checked {
654
$background-color: theme-color.activated-overlay(theme-color.$primary);
655
color: theme-color.$primary;
656
@include drawing.ink-color(theme-color.$primary, $button-style: "flat", $on: $background-color);
657
&:disabled {
659
color: theme-color.disabled(theme-color.$on-surface);
660
}
661
}
662
}
663
%button-flat,
665
button.flat {
666
@extend %button-flat-activatable;
667
&.text-button {
669
min-width: 64px - 8px * 2;
670
padding-left: 8px;
671
padding-right: 8px;
672
}
673
&.text-button.image-button {
675
min-width: 24px;
676
padding: (theme.$medium-size - 24px) / 2;
677
label {
679
&:first-child {
680
margin-left: 12px - (theme.$medium-size - 24px) / 2;
681
}
682
&:last-child {
684
margin-right: 12px - (theme.$medium-size - 24px) / 2;
685
}
686
}
687
}
688
.linked:not(.vertical) > &,
690
.linked.vertical > & {
691
&:not(:only-child) { // specificity bump
692
border-radius: theme.$corner-radius;
693
&.image-button:not(.text-button) {
695
border-radius: theme.$circular-radius;
696
}
697
}
698
}
699
}
700
button {
702
// big standalone buttons like in Documents pager
703
&.osd {
704
padding: (theme.$large-size - 24px) / 2 (theme.$large-size - 16px) / 2;
705
&.image-button {
707
padding: (theme.$large-size - 24px) / 2;
708
}
709
&:disabled {
711
opacity: 0;
712
}
713
}
714
// overlay / OSD style
716
@at-root %osd_button,
717
.osd & {
718
}
719
// Suggested and Destructive Action buttons
721
@each $class, $color in (".suggested-action": theme-color.$primary, ".destructive-action": theme-color.$error) {
722
&#{$class} {
723
color: theme-color.on($color);
724
@include drawing.ink-color(theme-color.on($color), $button-style: "raised", $on: $color);
725
&:disabled {
727
box-shadow: none;
728
background-color: theme-color.fill(theme-color.$on-surface);
729
color: theme-color.disabled(theme-color.$on-surface);
730
}
731
&:checked {
733
$background-color: theme-color.activated-overlay(theme-color.on($color), $on: $color);
734
@include drawing.ink-color(theme-color.on($color), $button-style: "raised", $on: $background-color);
735
}
736
&.flat {
738
color: $color;
739
@include drawing.ink-color($color, $button-style: "flat");
740
&:disabled {
742
box-shadow: none;
743
background-color: transparent;
744
color: theme-color.disabled-hint(theme-color.$on-surface);
745
}
746
&:checked {
748
$background-color: theme-color.activated-overlay($color);
749
@include drawing.ink-color($color, $button-style: "flat", $on: $background-color);
750
}
751
}
752
.osd & {
754
}
755
}
756
}
757
.stack-switcher > & {
759
// to position the needs attention dot, padding is added to the button
760
// child, a label needs just lateral padding while an icon needs vertical
761
// padding added too.
762
> label {
764
margin: 0 -6px;
765
padding: 0 6px;
766
}
767
> image {
769
margin: -3px -6px;
770
padding: 3px 6px;
771
}
772
&.needs-attention {
774
> label,
775
> image {
776
@extend %needs-attention;
777
}
778
&:checked {
780
> label,
781
> image {
782
animation: none;
783
background-image: none;
784
}
785
}
786
}
787
}
788
// hide separators
790
&.font,
791
&.file {
792
separator {
793
@extend %hide_separators;
794
}
795
}
796
&.font {
798
> box > box > label {
799
// font-weight: bold;
800
}
801
}
802
// inline-toolbar buttons
804
.inline-toolbar & {
805
// @extend %button-flat;
806
&:not(.text-button) {
808
border-radius: theme.$circular-radius;
809
}
810
}
811
.primary-toolbar & {
813
-gtk-icon-shadow: none; // tango icons don't need shadows
814
}
815
&.close,
817
&.circular { // The Bloody Circul Button
818
border-radius: theme.$circular-radius;
819
label {
821
// padding: 0;
822
}
823
}
824
}
825
%button-small {
827
min-height: theme.$small-size;
828
min-width: theme.$small-size;
829
padding: 0;
830
border-radius: theme.$circular-radius;
831
}
832
%needs-attention {
834
animation: needs-attention theme.$ripple-duration theme.$ease-out forwards;
835
background-repeat: no-repeat;
836
background-position: right 3px;
837
background-size: 6px 6px;
838
&:dir(rtl) {
840
background-position: left 3px;
841
}
842
}
843
// all the following is for the +|- buttons on inline toolbars, that way
845
// should really be deprecated...
846
.inline-toolbar toolbutton > button {
847
}
848
// More inline toolbar buttons
850
toolbar.inline-toolbar toolbutton {
851
&:not(:first-child) > button.flat {
852
// @extend %linked-not-first-child;
853
}
854
&:not(:last-child) > button.flat {
856
// @extend %linked-not-last-child;
857
}
858
}
859
%linked-not-first-child {
861
border-top-left-radius: 0;
862
border-bottom-left-radius: 0;
863
}
864
%linked-not-last-child {
866
border-top-right-radius: 0;
867
border-bottom-right-radius: 0;
868
}
869
%linked {
871
&:not(:first-child) {
872
@extend %linked-not-first-child;
873
}
874
&:not(:last-child) {
876
@extend %linked-not-last-child;
877
}
878
}
879
%linked-vertical-not-first-child {
881
border-top-left-radius: 0;
882
border-top-right-radius: 0;
883
}
884
%linked-vertical-not-last-child {
886
border-bottom-left-radius: 0;
887
border-bottom-right-radius: 0;
888
}
889
%linked-vertical {
891
&:not(:first-child) {
892
@extend %linked-vertical-not-first-child;
893
}
894
&:not(:last-child) {
896
@extend %linked-vertical-not-last-child;
897
}
898
}
899
%linked-image-button {
901
&:first-child {
902
border-top-left-radius: theme.$corner-radius;
903
border-bottom-left-radius: theme.$corner-radius;
904
}
905
&:last-child {
907
border-top-right-radius: theme.$corner-radius;
908
border-bottom-right-radius: theme.$corner-radius;
909
}
910
&:only-child {
912
border-radius: theme.$circular-radius;
913
}
914
}
915
%linked-vertical-image-button {
917
&:first-child {
918
border-top-left-radius: theme.$corner-radius;
919
border-top-right-radius: theme.$corner-radius;
920
}
921
&:last-child {
923
border-bottom-left-radius: theme.$corner-radius;
924
border-bottom-right-radius: theme.$corner-radius;
925
}
926
&:only-child {
928
border-radius: theme.$circular-radius;
929
}
930
}
931
/* menu buttons */
933
modelbutton.flat,
934
.menuitem.button.flat {
935
min-height: theme.$menu-item-dense-height;
936
padding: 0 8px;
937
border-radius: theme.$corner-radius;
938
@extend %ripple;
940
@include drawing.ink-color(theme-color.$on-surface);
941
&:selected {
943
background-color: theme-color.$selected-overlay;
944
}
945
}
946
modelbutton.flat arrow {
948
transition: color theme.$state-duration theme.$ease-out;
949
color: theme-color.hint(theme-color.$on-surface);
950
&:disabled {
952
color: theme-color.disabled-hint(theme-color.$on-surface);
953
}
954
&.left {
956
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
957
}
958
&.right {
960
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
961
}
962
}
963
button.color {
965
min-height: theme.$small-size;
966
min-width: theme.$small-size;
967
padding: theme.$container-padding;
968
colorswatch:only-child {
970
&,
971
overlay {
972
// border-radius: 0;
973
}
974
}
975
}
976
/**
978
* Links
979
*/
980
*:link {
982
color: theme-color.$primary;
983
&:disabled {
985
color: theme-color.disabled(theme-color.$on-surface);
986
}
987
}
988
*:visited {
990
color: theme-color.$visited;
991
&:disabled {
993
color: theme-color.disabled(theme-color.$on-surface);
994
}
995
}
996
button.link {
998
&:link {
999
color: theme-color.$primary;
1000
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
1001
}
1002
&:visited {
1004
color: theme-color.$visited;
1005
@include drawing.ink-color(theme-color.$visited, $button-style: "flat");
1006
}
1007
&:disabled {
1009
color: theme-color.disabled(theme-color.$on-surface);
1010
}
1011
> label {
1013
text-decoration-line: underline;
1014
}
1015
}
1016
/**
1018
* GtkSpinButton
1019
*/
1020
spinbutton {
1022
&:not(.vertical) {
1023
// in this horizontal configuration, the whole spinbutton
1024
// behaves as the entry, so we extend the entry styling
1025
// and nuke the style on the internal entry
1026
@extend %entry;
1027
padding: 0;
1029
entry {
1031
min-width: theme.$large-size - 8px * 2;
1032
// reset all the other props since the spinbutton node is styled here
1033
margin: 0;
1034
border-image: none;
1035
border-radius: 0;
1036
box-shadow: none;
1037
background-color: transparent;
1038
}
1039
button {
1041
@extend %button-flat-basic;
1042
@extend %button-small;
1043
// margin: $container-padding;
1045
border: solid theme.$container-padding transparent;
1046
background-clip: padding-box;
1047
// Remove unwanted focus indicator
1049
&:focus:not(:hover):not(:active) {
1050
background-color: transparent;
1051
}
1052
&.up:dir(ltr),
1054
&.down:dir(rtl) {
1055
margin-left: -(theme.$container-padding) / 2;
1056
}
1057
&.up:dir(rtl),
1059
&.down:dir(ltr) {
1060
margin-right: -(theme.$container-padding) / 2;
1061
}
1062
}
1063
}
1064
// OSD horizontal
1066
.osd &:not(.vertical) {
1067
}
1068
// Vertical
1070
&.vertical {
1071
// in the vertical configuration, we treat the spinbutton
1072
// as a box, and tweak the style of the entry in the middle
1073
// so that it's linked
1074
// FIXME: this should not be set at all, but otherwise it gets the wrong
1076
// color
1077
caret-color: theme-color.$primary;
1078
// FIXME: this should not be set at all, but otherwise it gets the wrong
1080
// color
1081
&:disabled {
1082
color: theme-color.disabled(theme-color.$on-surface);
1083
}
1084
entry {
1086
@extend %entry_raised;
1087
min-height: theme.$medium-size;
1089
min-width: theme.$large-size;
1090
padding: 0;
1091
}
1092
button {
1094
min-height: theme.$medium-size;
1095
min-width: theme.$large-size;
1096
padding: 0;
1097
@extend %button-flat-basic;
1099
// Remove unwanted focus indicator
1101
&:focus:not(:hover):not(:active) {
1102
background-color: transparent;
1103
}
1104
&.up {
1106
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1107
}
1108
&.down {
1110
border-radius: 0 0 theme.$corner-radius theme.$corner-radius;
1111
}
1112
}
1113
}
1114
// OSD vertical
1116
.osd &.vertical {
1117
}
1118
// Misc
1120
treeview &:not(.vertical) {
1121
min-height: 0;
1122
border-style: none;
1123
border-radius: 0;
1124
entry {
1126
min-height: 0;
1127
padding: 1px 2px;
1128
}
1129
}
1130
}
1131
/**
1133
* ComboBoxes
1134
*/
1135
combobox {
1137
arrow {
1138
transition: -gtk-icon-transform theme.$state-duration theme.$ease-out;
1139
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1140
min-height: 16px;
1141
min-width: 16px;
1142
}
1143
button.combo:checked arrow {
1145
// color: $primary;
1146
-gtk-icon-transform: rotate(-.5turn);
1147
}
1148
// workaround for menuitem selection
1150
decoration {
1151
transition: none;
1152
}
1153
// remove hard-coded 2px padding
1155
cellview {
1156
margin: -2px;
1157
}
1158
button.combo cellview {
1160
&:dir(ltr) {
1161
margin-left: -2px + 8px - (theme.$medium-size - 16px) / 2;
1162
}
1163
&:dir(rtl) {
1165
margin-right: -2px + 8px - (theme.$medium-size - 16px) / 2;
1166
}
1167
}
1168
menu {
1170
padding: 2px 0;
1171
menuitem {
1173
min-height: theme.$medium-size - 2px * 2;
1174
padding: 0 8px;
1175
}
1176
// overflow arrows
1178
> arrow {
1179
&.top {
1180
margin-top: -2px;
1181
}
1182
&.bottom {
1184
margin-top: 2px * 2;
1185
margin-bottom: -2px * 3;
1186
}
1187
}
1188
}
1189
> .linked:not(.vertical) > entry:not(:only-child) {
1191
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1192
&:first-child {
1194
margin-right: -(theme.$medium-size);
1195
padding-right: theme.$medium-size;
1196
}
1197
&:last-child {
1199
margin-left: -(theme.$medium-size);
1200
padding-left: theme.$medium-size;
1201
}
1202
}
1203
> .linked:not(.vertical) > button:not(:only-child) {
1205
@extend %button-flat-basic;
1206
// @extend %button-small;
1207
min-height: 16px;
1209
min-width: 16px;
1210
margin: (theme.$medium-size - theme.$small-size) / 2;
1211
padding: (theme.$small-size - 16px) / 2;
1212
border-radius: theme.$circular-radius;
1213
}
1214
}
1215
// the combo is a composite widget so the way we do button linking doesn't
1217
// work, special case needed. See
1218
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1219
.linked:not(.vertical) > combobox {
1221
&:not(:first-child) > box > button.combo {
1222
@extend %linked-not-first-child;
1223
}
1224
&:not(:last-child) > box > button.combo {
1226
@extend %linked-not-last-child;
1227
}
1228
}
1229
.linked.vertical > combobox {
1231
&:not(:first-child) > box > button.combo {
1232
@extend %linked-vertical-not-first-child;
1233
}
1234
&:not(:last-child) > box > button.combo {
1236
@extend %linked-vertical-not-last-child;
1237
}
1238
}
1239
button.combo:only-child {
1241
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1242
font-weight: normal;
1243
@include drawing.entry(normal);
1245
&:focus {
1247
@include drawing.entry(focus);
1248
}
1249
&:drop(active),
1251
&:hover {
1252
@include drawing.entry(hover);
1253
}
1254
&:checked {
1256
@include drawing.entry(checked);
1257
}
1258
&:disabled {
1260
@include drawing.entry(disabled);
1261
}
1262
arrow {
1264
transition: color theme.$state-duration theme.$ease-out;
1265
color: theme-color.hint(theme-color.$on-surface);
1266
&:disabled {
1268
color: theme-color.disabled-hint(theme-color.$on-surface);
1269
}
1270
}
1271
}
1272
/**
1274
* Toolbars
1275
*/
1276
toolbar {
1278
-GtkWidget-window-dragging: true;
1279
padding: 2px;
1280
button {
1282
@extend %button-flat;
1283
}
1284
// on OSD
1286
.osd & {
1287
}
1288
// stand-alone OSD toolbars
1290
&.osd {
1291
@extend %toolbar-osd;
1292
// positional classes for `attached` osd toolbars
1294
&.left,
1295
&.right,
1296
&.top,
1297
&.bottom {
1298
border-radius: 0;
1299
}
1300
&.bottom {
1302
box-shadow: none;
1303
background-color: transparent;
1304
background-image:
1305
linear-gradient(
1306
to bottom,
1307
transparent,
1308
rgba(black, .1) 30%,
1309
rgba(black, .2) 50%,
1310
rgba(black, .4)
1311
);
1312
}
1313
}
1314
// toolbar separators
1316
&.horizontal > separator {
1317
margin: 2px;
1318
}
1319
&.vertical > separator {
1321
margin: 2px;
1322
}
1323
&:not(.inline-toolbar):not(.osd) {
1325
scale,
1326
entry,
1327
spinbutton,
1328
button {
1329
margin: 2px;
1330
}
1331
.linked entry,
1333
.linked spinbutton,
1334
.linked button {
1335
&:not(:first-child) {
1336
margin-left: 0;
1337
}
1338
&:not(:last-child) {
1340
margin-right: 0;
1341
}
1342
}
1343
spinbutton {
1345
entry,
1346
button {
1347
margin: 0;
1348
}
1349
}
1350
switch {
1352
margin: 2px + theme.$container-padding 2px;
1353
}
1354
}
1355
}
1356
%toolbar-osd {
1358
transition: theme.$transition-shadow;
1359
padding: theme.$container-padding;
1360
border-radius: theme.$corner-radius;
1361
box-shadow: shadow.$z4, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
1362
background-color: theme-color.$surface-z8;
1363
&:backdrop {
1365
box-shadow: shadow.$z2, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
1366
}
1367
}
1368
// searchbar, location-bar & inline-toolbar
1370
.inline-toolbar {
1371
padding: theme.$container-padding;
1372
border-style: solid;
1373
border-width: 0 1px 1px;
1374
border-color: theme-color.divider(theme-color.$on-surface);
1375
background-color: theme-color.$surface-z1;
1376
background-clip: padding-box;
1377
}
1378
searchbar > revealer > box,
1380
.location-bar {
1381
padding: theme.$container-padding;
1382
border-style: solid;
1383
border-width: 0 0 1px;
1384
border-color: theme-color.divider(theme-color.$on-surface);
1385
}
1386
searchbar > revealer > box {
1388
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1389
margin: -6px;
1390
padding: theme.$container-padding;
1391
}
1392
/**
1394
* Header bars
1395
*/
1396
.titlebar {
1398
transition: background-color theme.$state-duration theme.$ease-out, color theme.$state-duration theme.$ease-out;
1399
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1400
box-shadow: shadow.$z1, inset 0 1px theme-color.highlight(theme-color.$titlebar);
1401
background-color: theme-color.$titlebar;
1402
color: theme-color.$on-titlebar;
1403
&:disabled {
1405
color: theme-color.disabled(theme-color.$on-titlebar);
1406
}
1407
&:backdrop {
1409
background-color: theme-color.$titlebar-backdrop;
1410
color: theme-color.hint(theme-color.$on-titlebar);
1411
&:disabled {
1413
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1414
}
1415
}
1416
.title {
1418
padding-left: 12px;
1419
padding-right: 12px;
1420
font-weight: bold;
1421
}
1422
.subtitle {
1424
padding-left: 12px;
1425
padding-right: 12px;
1426
font-size: smaller;
1427
}
1428
.subtitle,
1430
.dim-label {
1431
transition: color theme.$state-duration theme.$ease-out;
1432
color: theme-color.hint(theme-color.$on-titlebar);
1433
&:backdrop {
1435
color: theme-color.disabled(theme-color.$on-titlebar);
1436
}
1437
}
1438
// Don't draw titlebar above titlebar
1440
.titlebar {
1441
background-color: transparent;
1442
box-shadow: none;
1443
}
1444
// The separator for split headerbars
1446
headerbar + separator {
1447
background-color: theme-color.divider(theme-color.$on-titlebar);
1448
}
1449
entry {
1451
box-shadow: inset 0 -1px theme-color.stroke(theme-color.$on-titlebar);
1452
background-color: theme-color.entry-fill(theme-color.$on-titlebar);
1453
color: theme-color.$on-titlebar;
1454
&:disabled {
1456
box-shadow: inset 0 -1px theme-color.disabled-stroke(theme-color.$on-titlebar);
1457
background-color: theme-color.entry-fill(theme-color.$on-titlebar);
1458
color: theme-color.disabled(theme-color.$on-titlebar);
1459
}
1460
image {
1462
color: theme-color.hint(theme-color.$on-titlebar);
1463
&:hover,
1465
&:active {
1466
color: theme-color.$on-titlebar;
1467
}
1468
&:disabled {
1470
color: theme-color.disabled(theme-color.$on-titlebar);
1471
}
1472
}
1473
}
1474
.linked:not(.vertical) > entry:not(:only-child) {
1476
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1477
}
1478
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1480
@extend %button-flat;
1481
border-image:
1483
radial-gradient(
1484
circle closest-corner at center calc(100% - 1px),
1485
theme-color.$titlebar-indicator 0%,
1486
transparent 0%
1487
) 0 0 0 / 0 0 0;
1488
background-color: transparent;
1489
color: theme-color.hint(theme-color.$on-titlebar);
1490
@include drawing.ink-color(theme-color.$on-titlebar, $button-style: "flat");
1491
&:disabled {
1493
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1494
}
1495
@at-root %titlebar-button-checked,
1497
&:checked {
1498
border-image:
1499
radial-gradient(
1500
circle closest-corner at center calc(100% - 1px),
1501
theme-color.$titlebar-indicator 100%,
1502
transparent 0%
1503
) 0 0 2 / 0 0 2px;
1504
background-color: transparent;
1505
color: theme-color.$on-titlebar;
1506
@include drawing.ink-color(theme-color.$on-titlebar, $button-style: "flat");
1507
&:disabled {
1509
background-color: transparent;
1510
color: theme-color.disabled(theme-color.$on-titlebar);
1511
}
1512
}
1513
&:backdrop {
1515
color: theme-color.disabled(theme-color.$on-titlebar);
1516
&:disabled {
1518
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1519
}
1520
&:checked {
1522
color: theme-color.hint(theme-color.$on-titlebar);
1523
&:disabled {
1525
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1526
}
1527
}
1528
}
1529
}
1530
button.suggested-action, button.destructive-action {
1532
&:disabled {
1533
background-color: theme-color.fill(theme-color.$on-titlebar);
1534
color: theme-color.disabled(theme-color.$on-titlebar);
1535
}
1536
}
1537
// FIXME: Ugly overriding
1539
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1540
min-width: 120px - 8px * 2;
1541
}
1542
// FIXME: Ugly overriding
1544
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1545
min-width: 0;
1546
padding-left: (theme.$medium-size - 24px) / 2;
1547
padding-right: (theme.$medium-size - 24px) / 2;
1548
}
1549
&.selection-mode {
1551
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1552
// but let's keep it for backwards compatibility.
1553
transition: background-color .1ms theme.$ripple-duration, color theme.$state-duration theme.$ease-out;
1554
animation: ripple-on-headerbar theme.$ripple-duration theme.$ease-out;
1555
box-shadow: shadow.$z1, inset 0 1px theme-color.highlight(theme-color.$primary);
1556
background-color: theme-color.$primary;
1557
color: theme-color.$on-primary;
1558
&:backdrop {
1560
color: theme-color.hint(theme-color.$on-primary);
1561
}
1562
.subtitle:link {
1564
color: theme-color.$on-primary;
1565
}
1566
button:not(.suggested-action):not(.destructive-action) {
1568
border-image:
1569
radial-gradient(
1570
circle closest-corner at center calc(100% - 1px),
1571
currentcolor 0%,
1572
transparent 0%
1573
) 0 0 0 / 0 0 0;
1574
color: theme-color.$on-primary;
1575
&:disabled {
1577
color: theme-color.disabled(theme-color.$on-primary);
1578
}
1579
&:checked {
1581
border-image:
1582
radial-gradient(
1583
circle closest-corner at center calc(100% - 1px),
1584
currentcolor 100%,
1585
transparent 0%
1586
) 0 0 2 / 0 0 2px;
1587
color: theme-color.$on-primary;
1588
&:disabled {
1590
color: theme-color.disabled(theme-color.$on-primary);
1591
}
1592
}
1593
&:backdrop {
1595
color: theme-color.hint(theme-color.$on-primary);
1596
&:disabled {
1598
color: theme-color.disabled-hint(theme-color.$on-primary);
1599
}
1600
&:checked {
1602
color: theme-color.hint(theme-color.$on-primary);
1603
&:disabled {
1605
color: theme-color.disabled-hint(theme-color.$on-primary);
1606
}
1607
}
1608
}
1609
}
1610
.selection-menu {
1612
padding-left: 16px;
1613
padding-right: 16px;
1614
arrow {
1616
-GtkArrow-arrow-scaling: 1;
1617
}
1618
.arrow {
1620
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1621
}
1622
}
1623
}
1624
.selection-mode {
1626
box-shadow: inset 0 1px theme-color.highlight(theme-color.$primary); // Avoid double shadows
1627
background-color: theme-color.$primary;
1628
}
1629
// squared corners when the window is maximized, tiled, or fullscreen
1631
.tiled &,
1632
.tiled-top &,
1633
.tiled-right &,
1634
.tiled-bottom &,
1635
.tiled-left &,
1636
.maximized &,
1637
.fullscreen & {
1638
border-radius: 0;
1639
box-shadow: shadow.$z1;
1640
}
1641
&.default-decoration {
1643
min-height: theme.$small-size;
1644
padding: theme.$container-padding;
1645
box-shadow: inset 0 1px theme-color.highlight(theme-color.$titlebar);
1646
.tiled &,
1648
.maximized &,
1649
.fullscreen & {
1650
box-shadow: none;
1651
}
1652
button.titlebutton {
1654
min-height: theme.$small-size;
1655
min-width: theme.$small-size;
1656
margin: 0;
1657
padding: 0;
1658
}
1659
// workaround for non-animatable buttons
1661
.background:not(.csd) & button.titlebutton:active {
1662
background-size: 1000% 1000%;
1663
}
1664
}
1665
.solid-csd & {
1667
&:dir(rtl), &:dir(ltr) { // specificity bump
1668
border-radius: 0;
1669
box-shadow: shadow.$z1; // just remove the highlight
1670
}
1671
}
1672
}
1673
headerbar {
1675
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1676
min-height: theme.$large-size;
1677
padding: 0 theme.$container-padding;
1678
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1680
entry,
1681
spinbutton,
1682
button {
1683
margin-top: theme.$container-padding;
1684
margin-bottom: theme.$container-padding;
1685
}
1686
separator.titlebutton {
1688
margin-top: theme.$large-size / 4;
1689
margin-bottom: theme.$large-size / 4;
1690
background-color: theme-color.divider(theme-color.$on-titlebar);
1691
}
1692
switch {
1694
margin-top: (theme.$large-size - 24px) / 2;
1695
margin-bottom: (theme.$large-size - 24px) / 2;
1696
}
1697
// reset button margins of the spinbutton
1699
spinbutton button {
1700
margin-top: 0;
1701
margin-bottom: 0;
1702
}
1703
// FIXME: This is a hacky workaround.
1705
.entry-tag {
1706
margin-top: 5px;
1707
margin-bottom: 5px;
1708
}
1709
}
1710
// Development versions of apps to use a differently styled headerbar
1712
window.devel .titlebar:not(.selection-mode) {
1713
}
1714
/**
1716
* Pathbars
1717
*/
1718
%pathbar_button,
1720
.path-bar.linked:not(.vertical) > button {
1721
padding-left: (theme.$medium-size - 24px) / 2;
1722
padding-right: (theme.$medium-size - 24px) / 2;
1723
border-image:
1724
radial-gradient(
1725
circle closest-corner at center calc(100% - 1px),
1726
theme-color.$primary 0%,
1727
transparent 0%
1728
) 0 0 0 / 0 0 0;
1729
border-radius: theme.$corner-radius;
1730
color: theme-color.hint(theme-color.$on-surface);
1731
@include drawing.ink-color(theme-color.$on-surface, $button-style: "flat");
1732
&:disabled {
1734
background-color: transparent;
1735
color: theme-color.disabled-hint(theme-color.$on-surface);
1736
}
1737
&:checked {
1739
border-image:
1740
radial-gradient(
1741
circle closest-corner at center calc(100% - 1px),
1742
theme-color.$primary 100%,
1743
transparent 0%
1744
) 0 0 2 / 0 0 2px;
1745
color: theme-color.$primary;
1746
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
1747
&:disabled {
1749
background-color: transparent;
1750
color: theme-color.disabled(theme-color.$on-surface);
1751
}
1752
}
1753
label:not(:only-child) {
1755
&:first-child {
1756
margin-left: 0;
1757
}
1758
&:last-child {
1760
margin-right: 0;
1761
}
1762
}
1763
&.text-button {
1765
min-width: 0;
1766
}
1767
&.slider-button {
1769
padding-left: (24px - 16px) / 2;
1770
padding-right: (24px - 16px) / 2;
1771
}
1772
}
1773
/**
1775
* Tree Views
1776
*/
1777
treeview.view {
1779
@at-root * {
1780
-GtkTreeView-horizontal-separator: 4;
1781
-GtkTreeView-grid-line-width: 1;
1782
-GtkTreeView-grid-line-pattern: '';
1783
-GtkTreeView-tree-line-width: 1;
1784
-GtkTreeView-tree-line-pattern: '';
1785
-GtkTreeView-expander-size: 16;
1786
}
1787
border-left-color: theme-color.stroke(theme-color.$on-surface); // this is actually the tree lines color,
1789
border-top-color: theme-color.divider(theme-color.$on-surface); // while this is the grid lines color, better then nothing
1790
// to avoid borders being overridden by the previously set props
1792
rubberband {
1793
@extend %rubberband;
1794
}
1795
&:hover,
1797
&:selected {
1798
border-radius: 0;
1799
}
1800
&.separator {
1802
min-height: 1px + 2px * 2;
1803
color: theme-color.divider(theme-color.$on-surface);
1804
}
1805
&:drop(active) {
1807
// FIXME: box-shadow, background-color and background-image are not available here.
1808
border-style: solid none;
1809
border-width: 9999px;
1810
border-color: theme-color.hover-overlay(theme-color.$on-surface);
1811
&.after {
1813
border-top-style: none;
1814
}
1815
&.before {
1817
border-bottom-style: none;
1818
}
1819
}
1820
&.expander {
1822
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1823
-gtk-icon-transform: rotate(-90deg);
1824
&:dir(rtl) {
1826
-gtk-icon-transform: rotate(90deg);
1827
}
1828
&:checked {
1830
-gtk-icon-transform: unset;
1831
}
1832
color: theme-color.hint(theme-color.$on-surface);
1834
&:hover,
1836
&:active {
1837
color: theme-color.$on-surface;
1838
}
1839
&:disabled {
1841
color: theme-color.disabled-hint(theme-color.$on-surface);
1842
}
1843
}
1844
// progress bar in treeviews
1846
&.progressbar {
1847
border-bottom: 4px solid theme-color.$primary;
1848
background-color: transparent;
1849
&:selected:hover {
1851
background-color: transparent;
1852
}
1853
}
1854
// progress bar trough in treeviews
1856
&.trough {
1857
border-bottom: 4px solid theme-color.disabled-stroke(theme-color.$on-surface);
1858
background-color: transparent;
1859
&:selected:hover {
1861
background-color: transparent;
1862
}
1863
}
1864
header {
1866
button {
1867
padding: 2px 6px;
1868
border-style: none solid solid none;
1869
border-width: 1px;
1870
border-color: theme-color.divider(theme-color.$on-surface);
1871
border-radius: 0;
1872
background-clip: padding-box;
1873
color: theme-color.hint(theme-color.$on-surface);
1874
@include drawing.ink-color(theme-color.$on-surface, $button-style: "flat", $hover-alt: true);
1875
@include drawing.list-item;
1876
&:disabled {
1878
background-color: transparent;
1879
color: theme-color.disabled-hint(theme-color.$on-surface);
1880
}
1881
&:last-child {
1883
border-right-style: none;
1884
}
1885
}
1886
}
1887
button.dnd,
1889
header.button.dnd { // for treeview-like derive widgets
1890
padding: 2px 6px;
1891
border-style: none solid solid;
1892
border-width: 1px;
1893
border-color: theme-color.divider(theme-color.$on-surface);
1894
border-radius: 0;
1895
box-shadow: none;
1896
background-clip: padding-box;
1897
background-color: theme-color.$surface-z8;
1898
color: theme-color.$primary;
1899
}
1900
// see tests/testaccel to test
1902
acceleditor > label {
1903
background-color: theme-color.$primary;
1904
}
1905
}
1906
/**
1908
* Menus
1909
*/
1910
menubar,
1912
.menubar {
1913
-GtkWidget-window-dragging: true;
1914
padding: 0;
1915
// box-shadow: inset 0 -1px divider($on-surface);
1916
background-color: theme-color.$titlebar;
1917
color: theme-color.$on-titlebar;
1918
&:backdrop {
1920
background-color: theme-color.$titlebar-backdrop;
1921
color: theme-color.hint(theme-color.$on-titlebar);
1922
}
1923
.csd & {
1925
transition: theme.$transition;
1926
}
1927
> menuitem {
1929
transition: theme.$transition;
1930
min-height: 20px;
1931
padding: 4px 8px;
1932
color: theme-color.hint(theme-color.$on-titlebar);
1933
// Seems like it :hover even with keyboard focus
1935
&:hover {
1936
transition: none;
1937
background-color: theme-color.activated-overlay(theme-color.$on-titlebar);
1938
color: theme-color.$on-titlebar;
1939
}
1940
&:disabled {
1942
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1943
}
1944
}
1945
}
1946
// Needed to make the border-radius of menus work
1948
// otherwise the background bleeds out of the menu edges
1949
.background.popup {
1950
background-color: transparent;
1951
}
1952
menu,
1954
.menu,
1955
.context-menu {
1956
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1957
padding: 4px 0;
1958
border: 1px solid theme-color.divider(theme-color.$on-surface); // adds borders in a non composited env
1959
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
1960
background-color: theme-color.$surface-z8;
1961
color: theme-color.$on-surface;
1962
font: initial;
1963
text-shadow: none;
1964
.csd & {
1966
border: none; // axes borders in a composited env
1967
border-radius: theme.$corner-radius;
1968
}
1969
menuitem {
1971
transition: background-color theme.$state-duration theme.$ease-out;
1972
min-height: 20px;
1973
min-width: 40px;
1974
padding: 4px 8px;
1975
&:hover {
1977
transition: none;
1978
background-color: theme-color.hover-overlay(theme-color.$on-surface);
1979
}
1980
&:disabled {
1982
color: theme-color.disabled(theme-color.$on-surface);
1983
}
1984
// submenu indicators
1986
arrow {
1987
min-height: 16px;
1988
min-width: 16px;
1989
color: theme-color.hint(theme-color.$on-surface);
1990
&:disabled {
1992
color: theme-color.disabled-hint(theme-color.$on-surface);
1993
}
1994
&:dir(ltr) {
1996
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1997
margin-left: 8px;
1998
}
1999
&:dir(rtl) {
2001
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
2002
margin-right: 8px;
2003
}
2004
}
2005
// avoids labels color being overridden, see
2007
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
2008
label {
2009
&:dir(rtl),
2010
&:dir(ltr) {
2011
// color: inherit;
2012
}
2013
}
2014
}
2015
// overflow arrows
2017
> arrow {
2018
min-height: 16px;
2019
min-width: 16px;
2020
padding: 4px;
2021
background-color: theme-color.$surface-z8;
2022
color: theme-color.hint(theme-color.$on-surface);
2023
&.top {
2025
margin-top: -4px;
2026
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
2027
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
2028
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2029
}
2030
&.bottom {
2032
margin-top: 4px * 2;
2033
margin-bottom: -4px * 3;
2034
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
2035
border-radius: 0 0 theme.$corner-radius theme.$corner-radius;
2036
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2037
}
2038
&:hover {
2040
background-image: image(theme-color.hover-overlay(theme-color.$on-surface));
2041
}
2042
&:disabled {
2044
border-color: transparent;
2045
background-color: transparent;
2046
color: transparent;
2047
// color: disabled-hint($on-surface);
2048
}
2049
}
2050
separator {
2052
margin: 4px 0;
2053
}
2054
}
2055
menuitem {
2057
accelerator {
2058
color: theme-color.hint(theme-color.$on-surface);
2059
}
2060
&:disabled accelerator {
2062
color: theme-color.disabled-hint(theme-color.$on-surface);
2063
}
2064
}
2065
/**
2067
* Popovers
2068
*/
2069
popover.background {
2071
transition: theme.$transition-shadow;
2072
padding: 2px;
2073
box-shadow: shadow.$z4; // TODO: this should really have a highlight
2074
background-color: theme-color.$surface-z8;
2075
&:backdrop {
2077
box-shadow: shadow.$z2;
2078
}
2079
&,
2081
.csd & {
2082
border-style: solid;
2083
border-width: 1px;
2084
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
2085
border-radius: theme.$corner-radius + 1px;
2086
background-clip: padding-box;
2087
}
2088
> stack {
2090
margin: -4px; // remove extra padding from menu style popovers
2091
}
2092
> toolbar {
2094
margin: -2px;
2095
}
2096
> list,
2098
> .view,
2099
> toolbar {
2100
border-style: none;
2101
box-shadow: none;
2102
background-color: transparent;
2103
}
2104
&.touch-selection,
2106
&.magnifier,
2107
&.osd {
2108
// @extend %osd;
2109
}
2110
button:not(.suggested-action):not(.destructive-action) {
2112
// @extend %button-flat;
2113
}
2114
.linked:not(.vertical) > entry:not(:only-child) {
2116
// border-radius: $corner-radius $corner-radius 0 0;
2117
}
2118
&.menu button,
2120
button.model {
2121
@extend %button-flat;
2122
min-height: 32px;
2124
padding: 0 8px;
2125
border-radius: theme.$corner-radius;
2126
}
2127
separator {
2129
margin: 4px 0;
2130
}
2131
list separator {
2133
margin: 0;
2134
}
2135
}
2136
/**
2138
* Notebooks
2139
*/
2140
notebook {
2142
&:focus > header > tabs > tab:checked {
2143
background-color: theme-color.focus-overlay(theme-color.$primary);
2144
}
2145
> header {
2147
&.top {
2148
box-shadow: inset 0 -1px theme-color.divider(theme-color.$on-surface);
2149
> tabs {
2151
> tab {
2152
box-shadow: inset 0 -2px transparent;
2153
&:checked {
2155
box-shadow: inset 0 -2px theme-color.$primary;
2156
}
2157
}
2158
}
2159
}
2160
&.bottom {
2162
box-shadow: inset 0 1px theme-color.divider(theme-color.$on-surface);
2163
> tabs {
2165
> tab {
2166
box-shadow: inset 0 2px transparent;
2167
&:checked {
2169
box-shadow: inset 0 2px theme-color.$primary;
2170
}
2171
}
2172
}
2173
}
2174
&.left {
2176
box-shadow: inset -1px 0 theme-color.divider(theme-color.$on-surface);
2177
> tabs {
2179
> tab {
2180
box-shadow: inset -2px 0 transparent;
2181
&:checked {
2183
box-shadow: inset -2px 0 theme-color.$primary;
2184
}
2185
}
2186
}
2187
}
2188
&.right {
2190
box-shadow: inset 1px 0 theme-color.divider(theme-color.$on-surface);
2191
> tabs {
2193
> tab {
2194
box-shadow: inset 2px 0 transparent;
2195
&:checked {
2197
box-shadow: inset 2px 0 theme-color.$primary;
2198
}
2199
}
2200
}
2201
}
2202
&.top > tabs > arrow {
2204
@extend %notebook_vert_arrows;
2205
}
2206
&.bottom > tabs > arrow {
2208
@extend %notebook_vert_arrows;
2209
}
2210
@at-root %notebook_vert_arrows {
2212
&.down {
2213
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2214
}
2215
&.up {
2217
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2218
}
2219
}
2220
&.left > tabs > arrow {
2222
@extend %notebook_horz_arrows;
2223
}
2224
&.right > tabs > arrow {
2226
@extend %notebook_horz_arrows;
2227
}
2228
@at-root %notebook_horz_arrows {
2230
&.down {
2231
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2232
}
2233
&.up {
2235
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2236
}
2237
}
2238
> tabs > arrow {
2240
min-height: 16px;
2241
min-width: 16px;
2242
padding: 4px;
2243
border-radius: 0;
2244
color: theme-color.hint(theme-color.$on-surface);
2245
@extend %ripple;
2246
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
2247
&:disabled {
2249
color: theme-color.disabled-hint(theme-color.$on-surface);
2250
}
2251
}
2252
> tabs > tab {
2254
transition: theme.$transition,
2255
background-size 0ms,
2256
background-image 0ms;
2257
min-height: theme.$small-size;
2258
min-width: theme.$small-size;
2259
padding: theme.$container-padding 16px;
2260
outline: none;
2261
background-image: radial-gradient(circle, theme-color.$primary 10%, transparent 0%);
2262
background-repeat: no-repeat;
2263
background-position: center;
2264
background-size: 0% 0%;
2265
color: theme-color.hint(theme-color.$on-surface);
2266
font-weight: 500;
2267
&:hover {
2269
background-color: theme-color.hover-overlay(theme-color.$on-surface, $alt: true);
2270
}
2271
&:disabled {
2273
color: theme-color.disabled-hint(theme-color.$on-surface);
2274
}
2275
&:checked {
2277
transition: theme.$transition,
2278
background-size theme.$ripple-duration theme.$ease-out,
2279
background-image theme.$ripple-duration + theme.$ripple-fade-out-duration theme.$ease-out;
2280
background-color: transparent;
2281
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2282
background-size: 1000% 1000%;
2283
color: theme-color.$primary;
2284
&:disabled {
2286
color: theme-color.disabled(theme-color.$on-surface);
2287
}
2288
&.reorderable-page {
2290
// background-color: $surface-z1;
2291
// color: $on-surface;
2292
}
2293
&.dnd {
2295
background-color: theme-color.dragged-overlay(theme-color.$primary);
2296
}
2297
}
2298
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2300
> box {
2301
transition: background-color theme.$state-duration theme.$ease-out;
2302
margin: -(theme.$container-padding) -16px;
2303
padding: theme.$container-padding 16px;
2304
&:drop(active) {
2306
background-color: theme-color.hover-overlay(theme-color.$on-surface);
2307
}
2308
}
2309
// colors the button like the label, overridden otherwise
2311
button.flat {
2312
@extend %button-small;
2313
&:last-child {
2315
margin-left: theme.$container-padding;
2316
margin-right: theme.$container-padding - 16px;
2317
}
2318
&:first-child {
2320
margin-left: theme.$container-padding - 16px;
2321
margin-right: theme.$container-padding;
2322
}
2323
}
2324
}
2325
}
2326
}
2327
/**
2329
* Scrollbars
2330
*/
2331
scrollbar {
2333
$_slider_min_length: 24px;
2334
// disable steppers
2336
@at-root * {
2337
-GtkScrollbar-has-backward-stepper: false;
2338
-GtkScrollbar-has-forward-stepper: false;
2339
}
2340
transition: theme.$transition;
2342
// background-color: $surface-z0;
2343
background-clip: padding-box;
2344
// scrollbar border
2346
&.top { border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); }
2347
&.bottom { border-top: 1px solid theme-color.divider(theme-color.$on-surface); }
2348
&.left { border-right: 1px solid theme-color.divider(theme-color.$on-surface); }
2349
&.right { border-left: 1px solid theme-color.divider(theme-color.$on-surface); }
2350
// slider
2352
slider {
2353
transition: background-color theme.$state-duration theme.$ease-out;
2354
min-width: 8px;
2355
min-height: 8px;
2356
border: 4px solid transparent;
2357
border-radius: theme.$circular-radius;
2358
background-clip: padding-box;
2359
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface);
2360
&:hover {
2362
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "hover");
2363
}
2364
&:active {
2366
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "pressed");
2367
}
2368
&:disabled {
2370
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "disabled");
2371
}
2372
}
2373
&.fine-tune {
2375
slider {
2376
min-width: 4px;
2377
min-height: 4px;
2378
}
2379
&.horizontal slider {
2381
margin: 2px 0;
2382
}
2383
&.vertical slider {
2385
margin: 0 2px;
2386
}
2387
}
2388
&.overlay-indicator {
2390
&:not(.fine-tune) slider {
2391
transition-property: background-color, min-height, min-width;
2392
}
2393
&:not(.dragging):not(.hovering) {
2395
border-color: transparent;
2396
background-color: transparent;
2397
slider {
2399
min-width: 4px;
2400
min-height: 4px;
2401
margin: 4px - 1px;
2402
border: 1px solid rgba(theme-color.$surface-z1, .3);
2403
}
2404
button {
2406
min-width: 4px;
2407
min-height: 4px;
2408
margin: 4px - 1px;
2409
border: 1px solid rgba(theme-color.$surface-z1, .3);
2410
border-radius: theme.$circular-radius;
2411
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface);
2412
background-clip: padding-box;
2413
-gtk-icon-source: none;
2414
&:disabled {
2416
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "disabled");
2417
}
2418
}
2419
&.horizontal {
2421
slider {
2422
min-width: $_slider_min_length;
2423
}
2424
button {
2426
min-width: 8px;
2427
}
2428
}
2429
&.vertical {
2431
slider {
2432
min-height: $_slider_min_length;
2433
}
2434
button {
2436
min-height: 8px;
2437
}
2438
}
2439
}
2440
&.dragging,
2442
&.hovering {
2443
background-color: theme-color.$surface-z8;
2444
}
2445
}
2446
&.horizontal slider {
2448
min-width: $_slider_min_length;
2449
}
2450
&.vertical slider {
2452
min-height: $_slider_min_length;
2453
}
2454
// button styling
2456
button {
2457
@extend %button-flat-basic;
2458
min-width: 16px;
2460
min-height: 16px;
2461
padding: 0;
2462
border-radius: 0;
2463
}
2464
// button icons
2466
&.vertical {
2467
button {
2468
&.down {
2469
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2470
}
2471
&.up {
2473
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2474
}
2475
}
2476
}
2477
&.horizontal {
2479
button {
2480
&.down {
2481
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2482
}
2483
&.up {
2485
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2486
}
2487
}
2488
}
2489
}
2490
/**
2493
* Switch
2494
*/
2495
switch {
2497
transition: all theme.$state-duration theme.$ease-out;
2498
margin: theme.$container-padding 0;
2499
padding: 0 2px;
2500
border: 5px solid transparent;
2501
border-radius: theme.$circular-radius;
2502
background-color: theme-color.stroke(theme-color.$on-surface);
2503
background-clip: padding-box;
2504
font-size: 0;
2505
&:checked {
2507
background-color: rgba(theme-color.$primary, .5);
2508
}
2509
&:disabled {
2511
opacity: .5;
2512
}
2513
// hide on/off icons for >=3.24.5
2515
image {
2516
margin: -8px;
2517
-gtk-icon-transform: scale(0);
2518
}
2519
slider {
2521
transition: all theme.$state-duration theme.$ease-out;
2522
min-width: 20px;
2523
min-height: 20px;
2524
margin: -3px -2px;
2525
border-radius: theme.$circular-radius;
2526
outline: none;
2527
box-shadow: 0 0 0 10px transparent, shadow.$z1;
2528
background-color: theme-color.$surface-switch-thumb;
2529
}
2530
&:hover slider {
2532
box-shadow: 0 0 0 10px theme-color.hover-overlay(theme-color.$on-surface), shadow.$z1;
2533
}
2534
&:focus slider {
2536
box-shadow: 0 0 0 10px theme-color.focus-overlay(theme-color.$on-surface), shadow.$z1;
2537
}
2538
&:checked slider {
2540
background-color: theme-color.$primary;
2541
}
2542
&:checked:hover slider {
2544
box-shadow: 0 0 0 10px theme-color.hover-overlay(theme-color.$primary), shadow.$z1;
2545
}
2546
&:checked:focus slider {
2548
box-shadow: 0 0 0 10px theme-color.focus-overlay(theme-color.$primary), shadow.$z1;
2549
}
2550
row:selected & {
2552
}
2553
}
2554
/**
2556
* Check and Radio items
2557
*/
2558
// draw regular check and radio items using our PNG assets
2560
// all assets are rendered from assets.svg. never add pngs directly
2561
// selection-mode
2563
.view.content-view.check:not(list),
2564
.content-view:not(list) check {
2565
min-height: 40px;
2566
min-width: 40px;
2567
margin: 0;
2568
padding: 0;
2569
background-color: transparent;
2570
background-image: none;
2571
-gtk-icon-shadow: shadow.$icon-shadow-z2;
2572
&:hover,
2574
&:active {
2575
-gtk-icon-shadow: shadow.$icon-shadow-z4;
2576
}
2577
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2579
&#{$class} {
2580
$_url: 'assets/selectionmode-checkbox#{$suffix}#{theme.$asset-suffix}';
2581
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2583
}
2584
}
2585
}
2586
checkbutton,
2588
radiobutton {
2589
outline: none;
2590
}
2591
checkbutton.text-button,
2593
radiobutton.text-button {
2594
// this is for a nice focus on check and radios text
2595
padding: 2px;
2596
label:not(:only-child) {
2598
margin: 0 4px;
2599
}
2600
}
2601
$check-radio-size: 40px;
2603
check,
2605
radio {
2606
min-height: 24px;
2607
min-width: 24px;
2608
margin: -($check-radio-size - 24px) / 2;
2609
padding: ($check-radio-size - 24px) / 2;
2610
border-radius: theme.$circular-radius;
2611
color: theme-color.hint(theme-color.$on-surface);
2612
@extend %ripple;
2613
@include drawing.ink-color(theme-color.$on-surface);
2614
&:checked,
2616
&:indeterminate {
2617
color: theme-color.$primary;
2618
@include drawing.ink-color(theme-color.$primary);
2619
}
2620
&:disabled {
2622
color: theme-color.disabled-hint(theme-color.$on-surface);
2623
}
2624
&:only-child {
2626
// margin: -12px;
2627
}
2628
popover modelbutton.flat & {
2630
&,
2631
&:focus,
2632
&:hover,
2633
&:focus:hover,
2634
&:active,
2635
&:disabled {
2636
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2637
background-color: transparent;
2638
background-image: none;
2639
}
2640
&.left:dir(rtl) {
2642
margin-left: -12px;
2643
margin-right: -4px;
2644
}
2645
&.right:dir(ltr) {
2647
margin-left: -4px;
2648
margin-right: -12px;
2649
}
2650
}
2651
menu menuitem & {
2653
transition: none;
2654
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2655
padding: 0;
2656
&:dir(ltr) {
2658
margin-right: 8px;
2659
}
2660
&:dir(rtl) {
2662
margin-left: 8px;
2663
}
2664
&,
2666
&:checked,
2667
&:indeterminate {
2668
&:hover,
2669
&:focus {
2670
background-color: transparent;
2671
}
2672
}
2673
}
2674
}
2675
%check,
2677
check {
2678
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2679
&:checked {
2681
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2682
}
2683
&:indeterminate {
2685
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2686
}
2687
}
2688
%radio,
2690
radio {
2691
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2692
&:checked {
2694
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2695
}
2696
&:indeterminate {
2698
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2699
}
2700
border-image-slice: $check-radio-size / 2px;
2702
border-image-width: $check-radio-size / 2;
2703
$radio-indicator-size: 10px / $check-radio-size / 2;
2705
border-image-source:
2707
-gtk-gradient(
2708
radial,
2709
center center, 0,
2710
center center, .001,
2711
to(theme-color.$primary),
2712
to(transparent)
2713
);
2714
&:checked:not(:indeterminate) {
2716
border-image-source:
2717
-gtk-gradient(
2718
radial,
2719
center center, 0,
2720
center center, $radio-indicator-size,
2721
to(theme-color.$primary),
2722
to(transparent)
2723
);
2724
&:disabled {
2726
border-image-source:
2727
-gtk-gradient(
2728
radial,
2729
center center, 0,
2730
center center, $radio-indicator-size,
2731
to(theme-color.disabled-hint(theme-color.$on-surface)),
2732
to(transparent)
2733
);
2734
}
2735
}
2736
}
2737
%small_check,
2739
menu menuitem check {
2740
min-height: 16px;
2741
min-width: 16px;
2742
border-radius: theme.$corner-radius;
2743
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2744
&:checked {
2746
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2747
}
2748
&:indeterminate {
2750
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2751
}
2752
}
2753
%small_radio,
2755
menu menuitem radio {
2756
min-height: 16px;
2757
min-width: 16px;
2758
border-image: none;
2759
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2760
&:checked {
2762
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2763
}
2764
&:indeterminate {
2766
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2767
}
2768
}
2769
// ANIMATION:
2771
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2772
// the transformation is set on the active state and it get reset on the checked state.
2773
radio:not(:checked):active {
2774
// -gtk-icon-transform: scale(0);
2775
}
2776
// Otherwise, treeview.view styling will be applied...
2778
treeview.view check,
2779
treeview.view radio {
2780
padding: 0;
2781
color: theme-color.hint(theme-color.$on-surface);
2782
&:checked,
2784
&:indeterminate {
2785
color: theme-color.$primary;
2786
}
2787
&:disabled {
2789
color: theme-color.disabled-hint(theme-color.$on-surface);
2790
}
2791
&,
2793
&:hover,
2794
&:selected,
2795
&:selected:hover {
2796
box-shadow: none;
2797
background-color: transparent;
2798
}
2799
}
2800
treeview.view radio:checked {
2802
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2803
border-image: none;
2804
}
2805
/**
2807
* GtkScale
2808
*/
2809
scale {
2811
// sizing
2812
$_marks_length: 8px;
2813
$_marks_distance: 7px;
2814
$trough_size: 2px;
2816
$finetune_trough_size: 4px;
2817
$slider_size: 32px;
2819
$slider_margin: -($slider_size - $trough_size) / 2;
2821
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2822
$color_slider_margin: -($slider_size) * 3 / 4;
2824
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2825
min-height: $trough_size;
2827
min-width: $trough_size;
2828
&.horizontal {
2830
padding: (theme.$medium-size - $trough_size) / 2 12px;
2831
}
2832
&.vertical {
2834
padding: 12px (theme.$medium-size - $trough_size) / 2;
2835
}
2836
// the slider is inside the trough, so to have make it bigger there's a negative margin
2838
slider {
2839
min-height: $slider_size;
2840
min-width: $slider_size;
2841
margin: $slider_margin;
2842
}
2843
// click-and-hold the slider to activate
2845
&.fine-tune {
2846
&.horizontal {
2847
min-height: $finetune_trough_size;
2848
padding-top: (theme.$medium-size - $finetune_trough_size) / 2;
2849
padding-bottom: (theme.$medium-size - $finetune_trough_size) / 2;
2850
}
2851
&.vertical {
2853
min-width: $finetune_trough_size;
2854
padding-left: (theme.$medium-size - $finetune_trough_size) / 2;
2855
padding-right: (theme.$medium-size - $finetune_trough_size) / 2;
2856
}
2857
// to make the trough grow in fine-tune mode
2859
slider {
2860
margin: $finetune_slider_margin;
2861
}
2862
}
2863
// the backing bit
2865
trough {
2866
transition: background-color theme.$state-duration theme.$ease-out;
2867
outline: none;
2868
background-color: theme-color.stroke(theme-color.$on-surface);
2869
&:disabled {
2871
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
2872
}
2873
}
2874
// the colored part of the backing bit
2876
highlight {
2877
transition: background-image theme.$state-duration theme.$ease-out;
2878
background-image: image(theme-color.$primary);
2879
&:disabled {
2881
background-color: theme-color.$surface-z0;
2882
background-image: image(theme-color.disabled-hint(theme-color.$on-surface));
2883
}
2884
}
2885
// this is another differently styled part of the backing bit, the most relevant use case is for example
2887
// in media player to indicate how much video stream as been cached
2888
fill {
2889
transition: background-color theme.$state-duration theme.$ease-out;
2890
background-color: theme-color.stroke(theme-color.$on-surface);
2891
&:disabled {
2893
background-color: transparent;
2894
}
2895
}
2896
slider {
2898
transition: background-color theme.$state-duration theme.$ease-out,
2899
background-size theme.$ripple-fade-out-duration theme.$ease-out,
2900
background-image theme.$ripple-opacity-fade-out-duration theme.$ease-out;
2901
background-repeat: no-repeat;
2902
background-position: center;
2903
background-size: auto, 1000% 1000%;
2904
border-radius: 50%;
2905
color: theme-color.$primary;
2906
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2908
&#{$class} {
2909
$_url: 'assets/scale-slider#{$suffix}#{theme.$asset-suffix}';
2910
background-image:
2912
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2913
radial-gradient(circle, transparent 10%, transparent 0%);
2914
}
2915
}
2916
&:hover {
2918
background-color: theme-color.hover-overlay(theme-color.$primary);
2919
}
2920
&:focus {
2922
background-color: theme-color.focus-overlay(theme-color.$primary);
2923
}
2924
&:active {
2926
$_url: 'assets/scale-slider#{theme.$asset-suffix}';
2927
transition: background-color theme.$state-duration theme.$ease-out,
2929
background-size 0ms,
2930
background-image 0ms;
2931
animation: ripple-on-slider theme.$ripple-duration theme.$ease-out forwards;
2932
background-image:
2933
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2934
radial-gradient(circle, theme-color.pressed-overlay(theme-color.$primary) 10%, transparent 0%);
2935
background-size: auto, 0% 0%;
2936
}
2937
}
2938
marks,
2940
value {
2941
color: theme-color.hint(theme-color.$on-surface);
2942
}
2943
indicator {
2945
background-color: theme-color.stroke(theme-color.$on-surface);
2946
color: transparent;
2947
}
2948
//marks margins
2950
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2951
(horizontal, bottom, bottom, top),
2952
(vertical, top, left, right),
2953
(vertical, bottom, right, left) {
2954
&.#{$scale_orient} marks {
2955
&.#{$marks_class} {
2956
margin-#{$marks_margin}: $_marks_distance;
2957
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2958
}
2959
}
2960
&.#{$scale_orient}.fine-tune marks {
2962
&.#{$marks_class} {
2963
margin-#{$marks_margin}: $_marks_distance - 1px;
2964
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2965
}
2966
}
2967
}
2968
&.horizontal {
2970
indicator {
2971
min-height: $_marks_length;
2972
min-width: 1px;
2973
}
2974
}
2975
&.vertical {
2977
indicator {
2978
min-height: 1px;
2979
min-width: $_marks_length;
2980
}
2981
}
2982
// *WARNING* scale with marks madness following
2984
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2986
@each $marks_class, $marks_infix in (
2987
".marks-before:not(.marks-after)": "-marks-before",
2988
".marks-after:not(.marks-before)": "-marks-after"
2989
) {
2990
&#{$dir_class}#{$marks_class} {
2991
slider {
2992
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2993
&#{$state_class} {
2994
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{theme.$asset-suffix}';
2995
background-image:
2997
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2998
radial-gradient(circle, transparent 10%, transparent 0%);
2999
}
3000
}
3001
&:active {
3003
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{theme.$asset-suffix}';
3004
background-image:
3006
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3007
radial-gradient(circle, theme-color.pressed-overlay(theme-color.$primary) 10%, transparent 0%);
3008
}
3009
}
3010
}
3011
}
3012
}
3013
&.color {
3015
min-height: 0;
3016
min-width: 0;
3017
&.horizontal {
3019
padding: 0 0 12px 0;
3020
slider {
3022
&:dir(ltr), &:dir(rtl) { // specificity bump
3023
margin-bottom: $color_slider_margin;
3024
margin-top: $color_marks_slider_margin;
3025
}
3026
}
3027
}
3028
&.vertical {
3030
&:dir(ltr) {
3031
padding: 0 0 0 12px;
3032
slider {
3034
margin-left: $color_slider_margin;
3035
margin-right: $color_marks_slider_margin;
3036
}
3037
}
3038
&:dir(rtl) {
3040
padding: 0 12px 0 0;
3041
slider {
3043
margin-right: $color_slider_margin;
3044
margin-left: $color_marks_slider_margin;
3045
}
3046
}
3047
}
3048
}
3049
}
3050
/**
3052
* Progress bars
3053
*/
3054
progressbar {
3056
// sizing
3057
&.horizontal {
3058
trough,
3059
progress {
3060
min-height: 4px;
3061
}
3062
}
3063
&.vertical {
3065
trough,
3066
progress {
3067
min-width: 4px;
3068
}
3069
}
3070
// FIXME: insensitive state missing and some other state should be set probably
3072
color: theme-color.hint(theme-color.$on-surface);
3073
font-size: smaller;
3074
trough {
3076
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
3077
}
3078
progress {
3080
background-color: theme-color.$primary;
3081
}
3082
&.osd { // progressbar.osd used for epiphany page loading progress
3084
// min-width: 4px;
3085
// min-height: 4px;
3086
// background-color: transparent;
3087
trough {
3089
// background-color: transparent;
3090
}
3091
progress {
3093
// background-color: $primary;
3094
}
3095
}
3096
// makes the progress indicator disappear, when the fraction is 0
3098
trough.empty progress {
3099
all: unset;
3100
}
3101
}
3102
/**
3104
* Level Bar
3105
*/
3106
levelbar {
3108
&.horizontal {
3109
block {
3110
min-height: 4px;
3111
}
3112
&.discrete block {
3114
min-width: theme.$medium-size;
3115
&:not(:last-child) {
3117
margin-right: 2px;
3118
}
3119
}
3120
}
3121
&.vertical {
3123
block {
3124
min-width: 4px;
3125
}
3126
&.discrete block {
3128
min-height: theme.$medium-size;
3129
&:not(:last-child) {
3131
margin-bottom: 2px;
3132
}
3133
}
3134
}
3135
trough {
3137
}
3138
block {
3140
&.low {
3141
background-color: theme-color.$warning;
3142
}
3143
&.high,
3145
&:not(.empty) {
3146
background-color: theme-color.$primary;
3147
}
3148
&.full {
3150
background-color: theme-color.$success;
3151
}
3152
&.empty {
3154
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
3155
}
3156
}
3157
}
3158
/**
3160
* Print dialog
3161
*/
3162
printdialog {
3164
paper {
3165
padding: 0;
3166
border: 1px solid theme-color.divider(theme-color.$on-surface);
3167
background-clip: padding-box;
3168
background-color: theme-color.$surface-z1;
3169
color: theme-color.$on-surface;
3170
}
3171
.dialog-action-box {
3173
margin: 12px;
3174
}
3175
}
3176
/**
3178
* Frames
3179
*/
3180
frame > border,
3182
.frame {
3183
margin: 0;
3184
padding: 0;
3185
border: 1px solid theme-color.divider(theme-color.$on-surface);
3186
border-radius: 0;
3187
box-shadow: none;
3188
background-clip: padding-box;
3189
background-color: theme-color.$surface-z1;
3190
&.flat {
3192
border-style: none;
3193
background-color: transparent;
3194
}
3195
}
3196
// for backward compatibility
3198
frame.flat > border {
3199
border-style: none;
3200
background-color: transparent;
3201
}
3202
actionbar > revealer > box {
3204
padding: theme.$container-padding;
3205
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
3206
// background-color: $surface-z1;
3207
button:not(.suggested-action):not(.destructive-action) {
3209
@extend %button-flat;
3210
}
3211
.linked:not(.vertical) > entry:not(:only-child) {
3213
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
3214
}
3215
}
3216
scrolledwindow {
3218
// avoid double borders when viewport inside scrolled window
3219
viewport.frame {
3220
border-style: none;
3221
background-color: transparent;
3222
}
3223
// This is used when content is touch-dragged past boundaries.
3225
// draws a box on top of the content, the size changes programmatically.
3226
@at-root overshoot {
3227
&.top { @include drawing.overshoot(top); }
3228
&.bottom { @include drawing.overshoot(bottom); }
3230
&.left { @include drawing.overshoot(left); }
3232
&.right { @include drawing.overshoot(right); }
3234
}
3235
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3237
@at-root undershoot {
3238
// &.top { @include undershoot(top); }
3239
// &.bottom { @include undershoot(bottom); }
3241
// &.left { @include undershoot(left); }
3243
// &.right { @include undershoot(right); }
3245
}
3246
// the small square between two scrollbars
3248
@at-root junction {
3249
border-style: solid none none solid;
3250
border-width: 1px;
3251
border-color: theme-color.divider(theme-color.$on-surface);
3252
// background-color: $surface-z0;
3253
&:dir(rtl) {
3255
border-style: solid solid none none;
3256
}
3257
}
3258
}
3259
// vbox and hbox separators
3261
separator {
3262
min-width: 1px;
3263
min-height: 1px;
3264
background-color: theme-color.divider(theme-color.$on-surface);
3265
}
3266
%hide_separators {
3268
min-width: 0;
3269
min-height: 0;
3270
background-color: transparent;
3271
}
3272
/**
3274
* Lists
3275
*/
3276
list {
3278
border-color: theme-color.divider(theme-color.$on-surface);
3279
// background-color: $surface-z1;
3280
row {
3282
padding: 2px;
3283
}
3284
}
3285
row {
3287
background-clip: padding-box;
3288
&.activatable {
3290
@extend %ripple;
3291
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
3292
@include drawing.list-item;
3293
// this is for indicathing which row generated a popover
3295
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3296
&.has-open-popup {
3297
background-color: theme-color.activated-overlay(theme-color.$on-surface);
3298
}
3299
}
3300
&:selected {
3302
@include drawing.ink-color(theme-color.$primary, $hover-alt: true, $on: theme-color.$selected-overlay);
3303
&.has-open-popup {
3305
background-color: theme-color.activated-overlay(theme-color.$primary, $on: theme-color.$selected-overlay);
3306
}
3307
}
3308
}
3309
/**
3311
* App Notifications
3312
*/
3313
.app-notification {
3315
@extend %toolbar-osd;
3316
margin: 8px;
3317
button {
3319
@extend %button-flat;
3320
&.text-button:not(:disabled) {
3322
color: theme-color.$primary;
3323
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
3324
}
3325
}
3326
&.frame {
3328
border-style: none;
3329
}
3330
border {
3332
border-style: none;
3333
background-color: transparent;
3334
}
3335
}
3336
/**
3338
* Expanders
3339
*/
3340
expander {
3342
title > arrow {
3343
transition: all theme.$state-duration theme.$ease-out;
3344
min-width: 16px;
3345
min-height: 16px;
3346
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3347
&:checked {
3349
&:dir(ltr) {
3350
-gtk-icon-transform: rotate(-180deg);
3351
}
3352
&:dir(rtl) {
3354
-gtk-icon-transform: rotate(180deg);
3355
}
3356
}
3357
color: theme-color.hint(theme-color.$on-surface);
3359
&:hover,
3361
&:active {
3362
color: theme-color.$on-surface;
3363
}
3364
&:disabled {
3366
color: theme-color.disabled-hint(theme-color.$on-surface);
3367
}
3368
}
3369
}
3370
/**
3372
* Calendar
3373
*/
3374
calendar {
3376
padding: 1px;
3377
border: 1px solid theme-color.divider(theme-color.$on-surface);
3378
background-clip: padding-box;
3379
background-color: theme-color.$surface-z1;
3380
color: theme-color.$on-surface;
3381
&:disabled {
3383
color: theme-color.disabled(theme-color.$on-surface);
3384
}
3385
&:selected {
3387
border-radius: theme.$corner-radius + 1px;
3388
background-color: theme-color.$selected-overlay;
3389
}
3390
&.header {
3392
border-style: none none solid;
3393
border-color: theme-color.divider(theme-color.$on-surface);
3394
border-radius: 0;
3395
}
3396
&.button {
3398
border-radius: theme.$corner-radius + 1px;
3399
color: theme-color.hint(theme-color.$on-surface);
3400
&:hover {
3402
background-image: image(theme-color.hover-overlay(theme-color.$on-surface));
3403
}
3404
&:disabled {
3406
color: theme-color.disabled-hint(theme-color.$on-surface);
3407
}
3408
}
3409
&.highlight {
3411
color: theme-color.hint(theme-color.$on-surface);
3412
font-weight: 500;
3413
}
3414
&:indeterminate {
3416
color: theme-color.disabled-hint(theme-color.$on-surface);
3417
}
3418
}
3419
/**
3421
* Dialogs
3422
*/
3423
// Message Dialog styling
3425
messagedialog {
3426
&.background {
3427
background-color: theme-color.$surface-z8;
3428
}
3429
.titlebar {
3431
min-height: theme.$small-size;
3432
border-style: none;
3433
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
3434
background-color: theme-color.$surface-z8;
3435
color: theme-color.$on-surface;
3436
&:backdrop {
3438
background-color: theme-color.$surface-z8;
3439
color: theme-color.hint(theme-color.$on-surface);
3440
}
3441
}
3442
&.csd {
3444
// rounded bottom border styling for csd version
3445
&.background {
3446
// bigger radius for better antialiasing
3447
border-bottom-left-radius: theme.$corner-radius;
3448
border-bottom-right-radius: theme.$corner-radius;
3449
}
3450
}
3451
// Hint text
3453
box.vertical > label + label {
3454
color: theme-color.hint(theme-color.$on-surface);
3455
}
3456
.dialog-action-box {
3458
margin-top: -(theme.$container-padding);
3459
// padding: $container-padding;
3460
button {
3462
@extend %button-flat;
3463
&:not(:last-child) {
3465
margin-right: theme.$container-padding;
3466
}
3467
&:not(:disabled) {
3469
color: theme-color.$primary;
3470
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
3471
}
3472
&.suggested-action:not(:disabled) {
3474
// color: $primary;
3475
// @include ink-color($primary, $button-style: "flat");
3476
}
3477
&.destructive-action:not(:disabled) {
3479
color: theme-color.$error;
3480
@include drawing.ink-color(theme-color.$error, $button-style: "flat");
3481
}
3482
}
3483
}
3484
}
3485
filechooser {
3487
.dialog-action-box {
3488
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
3489
}
3490
#pathbarbox {
3492
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
3493
// background-color: $surface-z0;
3494
// The new folder button
3496
> stack > box > button {
3497
@extend %button-flat-activatable;
3498
border-radius: theme.$circular-radius;
3500
}
3501
}
3502
}
3503
filechooserbutton:drop(active) {
3505
// box-shadow: none;
3506
}
3507
/**
3509
* Sidebar
3510
*/
3511
.sidebar {
3513
border-style: none;
3514
background-color: transparent;
3515
&:not(separator) {
3517
@at-root %sidebar_left,
3518
&:dir(ltr),
3519
&.left,
3520
&.left:dir(rtl) {
3521
border-right: 1px solid theme-color.divider(theme-color.$on-surface);
3522
border-left-style: none;
3523
}
3524
@at-root %sidebar_right,
3526
&:dir(rtl),
3527
&.right {
3528
border-left: 1px solid theme-color.divider(theme-color.$on-surface);
3529
border-right-style: none;
3530
}
3531
}
3532
list {
3534
// background-color: transparent;
3535
}
3536
paned & {
3538
&,
3539
&.left,
3540
&.right,
3541
&.left:dir(rtl),
3542
&:dir(rtl),
3543
&:dir(ltr) {
3544
border-style: none;
3545
}
3546
}
3547
}
3548
stacksidebar.sidebar {
3550
& {
3551
&:dir(ltr),
3552
&.left,
3553
&.left:dir(rtl) {
3554
list {
3555
@extend %sidebar_left;
3556
}
3557
}
3558
&:dir(rtl),
3560
&.right {
3561
list {
3562
@extend %sidebar_right;
3563
}
3564
}
3565
}
3566
+ separator.vertical,
3568
separator.horizontal {
3569
@extend %hide_separators;
3570
}
3571
list {
3573
padding: 4px;
3574
// background-color: $surface-z0; // This should not be necessary, but the parent stacksidebar ignores background-color.
3575
}
3576
row {
3578
min-height: 32px;
3579
padding: 0 8px - 6px;
3580
border-radius: theme.$corner-radius;
3581
color: theme-color.hint(theme-color.$on-surface);
3582
font-weight: 500;
3583
&:selected {
3585
$background-color: theme-color.activated-overlay(theme-color.$primary);
3586
color: theme-color.$primary;
3587
@include drawing.ink-color(theme-color.$primary, $on: $background-color, $hover-alt: true);
3588
}
3589
+ row {
3591
margin-top: 4px;
3592
}
3593
> label {
3595
padding-left: 6px;
3596
padding-right: 6px;
3597
}
3598
&.needs-attention > label {
3600
@extend %needs-attention;
3601
}
3602
}
3603
}
3604
separator.sidebar {
3606
background-color: theme-color.divider(theme-color.$on-surface);
3607
&.selection-mode,
3609
.selection-mode & {
3610
// background-color: divider($on-primary);
3611
}
3612
}
3613
/**
3615
* File chooser
3616
*/
3617
// dim the sidebar icons, see bug #786613 for details on this oddity
3619
row image.sidebar-icon {
3620
transition: color theme.$state-duration theme.$ease-out;
3621
color: theme-color.hint(theme-color.$on-surface);
3622
&:disabled {
3624
color: theme-color.disabled-hint(theme-color.$on-surface);
3625
}
3626
}
3627
placessidebar.sidebar {
3629
> viewport.frame {
3630
border-style: none;
3631
background-color: transparent;
3632
}
3633
list {
3635
padding: (4px - 3px) 0 4px;
3636
}
3637
row {
3639
// Needs overriding of the GtkListBoxRow padding
3640
min-height: 32px;
3641
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3642
padding: 0;
3643
border-radius: theme.$corner-radius;
3644
// Using margins/padding directly in the SidebarRow
3646
// will make the animation of the new bookmark row jump
3647
> revealer {
3648
padding: 0 8px;
3649
}
3650
&:selected {
3652
$background-color: theme-color.activated-overlay(theme-color.$primary);
3653
color: theme-color.$primary;
3654
font-weight: 500;
3655
@include drawing.ink-color(theme-color.$primary, $on: $background-color, $hover-alt: true);
3656
image.sidebar-icon {
3658
color: theme-color.$primary;
3659
}
3660
}
3661
&:disabled {
3663
color: theme-color.disabled(theme-color.$on-surface);
3664
}
3665
image.sidebar-icon {
3667
&:dir(ltr) {
3668
padding-right: 8px;
3669
}
3670
&:dir(rtl) {
3672
padding-left: 8px;
3673
}
3674
}
3675
label.sidebar-label {
3677
&:dir(ltr) {
3678
padding-right: 2px;
3679
}
3680
&:dir(rtl) {
3682
padding-left: 2px;
3683
}
3684
}
3685
@at-root button.sidebar-button {
3687
@extend %button-flat-basic;
3688
@extend %button-small;
3689
}
3690
&.sidebar-placeholder-row {
3692
background-color: theme-color.hover-overlay(theme-color.$on-surface);
3693
}
3694
&.sidebar-new-bookmark-row {
3696
color: theme-color.$primary;
3697
image.sidebar-icon {
3699
color: theme-color.$primary;
3700
}
3701
}
3702
}
3703
}
3704
placesview {
3706
.server-list-button {
3707
> image {
3708
-gtk-icon-transform: rotate(-.5turn);
3709
}
3710
&:checked > image {
3712
-gtk-icon-transform: rotate(0turn);
3713
}
3714
}
3715
// this selects the "connect to server" label
3717
> actionbar > revealer > box > label {
3718
padding-left: 8px;
3719
padding-right: 8px;
3720
}
3721
}
3722
/**
3724
* Paned
3725
*/
3726
paned {
3728
> separator {
3729
min-width: 1px;
3730
min-height: 1px;
3731
-gtk-icon-source: none; // defeats the ugly default handle decoration
3732
border-style: none; // just to be sure
3733
background-color: transparent;
3734
// workaround, using background istead of a border since the border will get rendered twice (?)
3735
background-image: image(theme-color.divider(theme-color.$on-surface));
3736
background-size: 1px 1px;
3737
background-clip: content-box; // avoids borders image being rendered twice (?)
3738
&.wide {
3740
min-width: 6px;
3741
min-height: 6px;
3742
// background-color: $surface-z0;
3743
background-image: image(theme-color.divider(theme-color.$on-surface)), image(theme-color.divider(theme-color.$on-surface));
3744
background-size: 1px 1px, 1px 1px;
3745
}
3746
}
3747
&.horizontal > separator {
3749
background-repeat: repeat-y;
3750
&:dir(ltr) {
3752
margin: 0 -8px 0 0;
3753
padding: 0 8px 0 0;
3754
background-position: left;
3755
}
3756
&:dir(rtl) {
3758
margin: 0 0 0 -8px;
3759
padding: 0 0 0 8px;
3760
background-position: right;
3761
}
3762
&.wide {
3764
margin: 0;
3765
padding: 0;
3766
background-repeat: repeat-y, repeat-y;
3767
background-position: left, right;
3768
}
3769
}
3770
&.vertical > separator {
3772
margin: 0 0 -8px 0;
3773
padding: 0 0 8px 0;
3774
background-repeat: repeat-x;
3775
background-position: top;
3776
&.wide {
3778
margin: 0;
3779
padding: 0;
3780
background-repeat: repeat-x, repeat-x;
3781
background-position: bottom, top;
3782
}
3783
}
3784
}
3785
/**
3787
* GtkInfoBar
3788
*/
3789
infobar {
3791
border-style: none;
3792
&.action:hover > revealer > box {
3794
background-image: image(theme-color.hover-overlay(theme-color.$on-surface));
3795
}
3796
&.info > revealer > box,
3798
&.question > revealer > box {
3799
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
3800
// background-color: $surface-z1;
3801
button {
3803
@extend %button-flat;
3804
&.text-button:not(:disabled) {
3806
color: theme-color.$primary;
3807
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
3808
}
3809
}
3810
}
3811
&.warning > revealer > box {
3813
background-color: theme-color.$warning;
3814
color: theme-color.$on-warning;
3815
button.flat {
3817
color: theme-color.$on-warning;
3818
@include drawing.ink-color(theme-color.$on-warning, $button-style: "flat");
3819
}
3820
selection {
3822
}
3823
*:link {
3825
color: theme-color.$on-warning;
3826
}
3827
}
3828
&.error > revealer > box {
3830
background-color: theme-color.$error;
3831
color: theme-color.$on-error;
3832
button.flat {
3834
color: theme-color.$on-error;
3835
@include drawing.ink-color(theme-color.$on-error, $button-style: "flat");
3836
}
3837
selection {
3839
}
3840
*:link {
3842
color: theme-color.$on-error;
3843
}
3844
}
3845
// Remove ugly hard-coded padding
3847
button label {
3848
margin: 0 -4px;
3849
}
3850
}
3851
/**
3853
* Tooltips
3854
*/
3855
tooltip {
3857
&.background {
3858
// background-color needs to be set this way otherwise it gets drawn twice
3859
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3860
background-color: theme-color.$tooltip;
3861
color: theme-color.$on-tooltip;
3862
}
3863
// padding: 4px; /* not working */
3865
border-radius: theme.$corner-radius;
3866
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3867
&:not(.csd):not(.unity-csd) {
3869
// border: 1px solid divider($on-surface);
3870
// border-radius: $corner-radius + 1px;
3871
}
3872
// FIXME: we need a border or tooltips vanish on black background.
3874
decoration {
3875
background-color: transparent;
3876
}
3877
> box {
3879
margin: -6px; // Remove hard-coded 6px margin
3880
min-height: 32px - 4px * 2;
3881
padding: 4px 8px;
3882
}
3883
.dim-label {
3885
color: theme-color.hint(theme-color.$on-tooltip);
3886
}
3887
* {
3889
// workaround for Eclipse.
3890
// do not include any declaration here.
3891
}
3892
}
3893
/**
3895
* Color Chooser
3896
*/
3897
colorswatch {
3899
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3900
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3901
// applied to the overlay box.
3902
// base color corners rounding
3904
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3905
// sports a bigger radius.
3906
// nth-child is needed by the custom color strip.
3907
&.top {
3909
border-top-left-radius: theme.$corner-radius + .5px;
3910
border-top-right-radius: theme.$corner-radius + .5px;
3911
overlay {
3913
border-top-left-radius: theme.$corner-radius;
3914
border-top-right-radius: theme.$corner-radius;
3915
}
3916
}
3917
&.bottom {
3919
border-bottom-left-radius: theme.$corner-radius + .5px;
3920
border-bottom-right-radius: theme.$corner-radius + .5px;
3921
overlay {
3923
border-bottom-left-radius: theme.$corner-radius;
3924
border-bottom-right-radius: theme.$corner-radius;
3925
}
3926
}
3927
&.left,
3929
&:first-child:not(.top) {
3930
border-top-left-radius: theme.$corner-radius + .5px;
3931
border-bottom-left-radius: theme.$corner-radius + .5px;
3932
overlay {
3934
border-top-left-radius: theme.$corner-radius;
3935
border-bottom-left-radius: theme.$corner-radius;
3936
}
3937
}
3938
&.right,
3940
&:last-child:not(.bottom) {
3941
border-top-right-radius: theme.$corner-radius + .5px;
3942
border-bottom-right-radius: theme.$corner-radius + .5px;
3943
overlay {
3945
border-top-right-radius: theme.$corner-radius;
3946
border-bottom-right-radius: theme.$corner-radius;
3947
}
3948
}
3949
&.dark {
3951
color: theme-color.$on-dark;
3952
}
3953
&.light {
3955
color: theme-color.$on-light;
3956
}
3957
overlay {
3959
transition: theme.$transition-shadow;
3960
box-shadow: shadow.$z1;
3961
&:drop(active),
3963
&:hover {
3964
box-shadow: shadow.$z3;
3965
}
3966
}
3967
&#add-color-button {
3969
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
3970
color: theme-color.$on-surface;
3971
&:only-child {
3973
border-radius: theme.$corner-radius;
3974
}
3975
overlay {
3977
background-color: theme-color.$surface-z8;
3978
}
3979
}
3980
&:disabled {
3982
opacity: .5;
3983
overlay {
3985
box-shadow: none;
3986
}
3987
}
3988
row:selected & {
3990
}
3991
&#editor-color-sample {
3993
border-radius: theme.$corner-radius + .5px;
3994
overlay {
3996
border-radius: theme.$corner-radius;
3997
&:hover {
3999
// box-shadow: $shadow-z1;
4000
}
4001
}
4002
}
4003
}
4004
// colorscale popup
4006
colorchooser .popover.osd {
4007
transition: theme.$transition-shadow;
4008
border-radius: theme.$corner-radius;
4009
box-shadow: shadow.$z4, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
4010
background-color: theme-color.$surface-z8;
4011
&:backdrop {
4013
box-shadow: shadow.$z2, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
4014
}
4015
}
4016
/**
4018
* Misc
4019
*/
4020
// content view (grid/list)
4022
.content-view {
4023
// background-color: $surface-z0;
4024
&:hover {
4026
// -gtk-icon-effect: highlight;
4027
}
4028
rubberband,
4030
.rubberband {
4031
@extend %rubberband;
4032
}
4033
}
4034
.scale-popup {
4036
.osd & {
4037
// @extend %osd;
4038
// FIXME: quick hack, redo properly
4040
button.flat {
4041
}
4042
}
4043
// +/- buttons on GtkVolumeButton popup
4045
button {
4046
}
4047
}
4048
/**
4050
* Window Decorations
4051
*/
4052
decoration {
4054
transition: theme.$transition-shadow;
4055
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
4056
box-shadow: shadow.$z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4057
// FIXME rationalize shadows
4059
// this is used for the resize cursor area
4061
margin: 8px;
4062
&:backdrop {
4064
// the transparent shadow here is to enforce that the shadow extents don't
4065
// change when we go to backdrop, to prevent jumping windows.
4066
// The biggest shadow should be in the same order then in the active state
4067
// or the jumping will happen during the transition.
4068
box-shadow: shadow.$z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4069
}
4070
.maximized &,
4072
.fullscreen &,
4073
.tiled &,
4074
.tiled-top &,
4075
.tiled-right &,
4076
.tiled-bottom &,
4077
.tiled-left & {
4078
border-radius: 0;
4079
}
4080
.popup & {
4082
box-shadow: none;
4083
}
4084
// server-side decorations as used by mutter
4086
.ssd & {
4087
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4088
}
4089
.csd.popup & {
4091
border-radius: theme.$corner-radius;
4092
box-shadow: shadow.$z4;
4093
}
4094
tooltip.csd & {
4096
border-radius: theme.$corner-radius;
4097
box-shadow: none;
4098
}
4099
messagedialog.csd & {
4101
border-radius: theme.$corner-radius;
4102
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4103
&:backdrop {
4105
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4106
}
4107
}
4108
.solid-csd & {
4110
margin: 0;
4111
padding: 2px;
4112
border-radius: 0;
4113
box-shadow: none;
4114
box-shadow: inset 0 1px theme-color.highlight(theme-color.$titlebar);
4115
background-color: theme-color.$titlebar;
4116
&:backdrop {
4118
background-color: theme-color.$titlebar-backdrop;
4119
}
4120
}
4121
}
4122
// Window Close button
4124
button.titlebutton {
4125
border-radius: theme.$circular-radius;
4126
.selection-mode & {
4128
}
4129
}
4130
// catch all extend :)
4133
.monospace {
4135
font-family: monospace;
4136
}
4137
/**
4139
* Touch Copy & Paste
4140
*/
4141
// touch selection handlebars for the Popover.osd above
4143
cursor-handle {
4144
color: theme-color.$primary;
4145
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4146
&.top:dir(ltr),
4148
&.bottom:dir(rtl) {
4149
-gtk-icon-transform: rotate(90deg);
4150
}
4151
&.bottom:dir(ltr),
4153
&.top:dir(rtl) {
4154
-gtk-icon-transform: unset;
4155
}
4156
&.insertion-cursor:dir(ltr),
4158
&.insertion-cursor:dir(rtl) {
4159
padding-top: 6px;
4160
-gtk-icon-transform: rotate(45deg);
4161
}
4162
}
4163
// Decouple the font of context menus from their entry/textview
4165
.context-menu {
4166
font: initial;
4167
}
4168
// shortcut window keys
4170
.keycap {
4171
min-width: 28px - 8px * 2;
4172
min-height: 28px;
4173
padding-left: 8px;
4174
padding-right: 8px;
4175
border-radius: theme.$corner-radius;
4176
box-shadow: shadow.$z1;
4177
background-color: theme-color.$surface-z8;
4178
color: theme-color.$on-surface;
4179
font-size: smaller;
4180
}
4181
// workaround for clipped shadows of .keycap
4183
shortcut:last-child {
4184
margin-bottom: 4px;
4185
}
4186
// FIXME needs to be done widget by widget, this wildcard should really die
4188
:not(decoration):not(window):drop(active) {
4189
// caret-color: $primary;
4190
}
4191
// FIXME aggregate with buttons
4193
stackswitcher button.text-button {
4194
min-width: 100px;
4195
}
4196
// FIXME aggregate with buttons
4198
stackswitcher button.circular,
4199
stackswitcher button.text-button.circular {
4200
min-width: theme.$medium-size;
4201
min-height: theme.$medium-size;
4202
padding: 0;
4203
}
4204
/**
4206
* App Icons
4207
*/
4208
// Outline for low res icons
4210
.lowres-icon {
4211
// -gtk-icon-shadow: none;
4212
}
4213
// Drapshadow for large icons
4215
.icon-dropshadow {
4216
// -gtk-icon-shadow: none;
4217
}
4218
/**
4220
* Emoji
4221
*/
4222
popover.emoji-picker {
4224
padding: 0;
4225
entry {
4227
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
4228
border-image: none;
4229
border-radius: 0;
4230
box-shadow: none;
4231
background-color: transparent;
4232
}
4233
scrolledwindow {
4235
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
4236
}
4237
}
4238
button.emoji-section {
4240
margin: 4px;
4241
&:not(:last-child) {
4243
margin-right: 0;
4244
}
4245
}
4246
popover.emoji-picker .emoji {
4248
min-width: 3em;
4249
min-height: 3em;
4250
padding: 0 8px;
4251
// font-size: larger;
4252
widget {
4254
transition: theme.$transition;
4255
border-radius: theme.$corner-radius;
4256
&:hover {
4258
background-color: theme-color.hover-overlay(theme-color.$on-surface);
4259
}
4260
}
4261
}
4262
popover.emoji-completion {
4264
padding: 8px 0;
4265
arrow {
4267
border: none;
4268
background: none;
4269
}
4270
.emoji-completion-row {
4272
min-height: theme.$menu-item-dense-height;
4273
padding: 0 12px;
4274
}
4275
.emoji:hover {
4277
background-color: theme-color.hover-overlay(theme-color.$on-surface);
4278
}
4279
}
4280