ASCII text
1
* {
2
// padding: 0;
3
-GtkToolButton-icon-spacing: 0;
5
-GtkTextView-error-underline-color: $error;
6
// The size for scrollbars. The slider is 2px smaller, but we keep it
8
// up so that the whole area is sensitive to button presses for the
9
// slider. The stepper button is larger in both directions, the slider
10
// only in the width
11
-GtkScrolledWindow-scrollbar-spacing: 0;
13
-GtkToolItemGroup-expander-size: 11;
15
-GtkWidget-text-handle-width: 24;
17
-GtkWidget-text-handle-height: 24;
18
-GtkDialog-button-spacing: $container-padding / 1px;
20
-GtkDialog-action-area-border: $container-padding / 1px;
21
-gtk-secondary-caret-color: $primary;
23
// We use the outline properties to signal the focus properties
25
// to the adwaita engine: using real CSS properties is faster,
26
// and we don't use any outlines for now.
27
outline: 2px solid transparent;
29
outline-offset: -4px;
30
-gtk-outline-radius: $corner-radius;
31
&:focus {
33
outline-color: overlay("focus", $on-surface);
34
}
35
}
36
/**
38
* Base States
39
*/
40
.background {
42
background-color: $background;
43
color: $on-surface;
44
}
45
/*
47
These wildcard seems unavoidable, need to investigate.
48
Wildcards are bad and troublesome, use them with care,
49
or better, just don't.
50
Everytime a wildcard is used a kitten dies, painfully.
51
*/
52
*:disabled {
54
-gtk-icon-effect: dim;
55
}
56
.gtkstyle-fallback {
58
background-color: $background;
59
color: $on-surface;
60
&:hover {
62
background-color: darken($background, 5%);
63
}
64
&:active {
66
background-color: darken($background, 10%);
67
}
68
&:disabled {
70
color: disabled($on-surface);
71
}
72
&:selected {
74
background-color: $primary;
75
color: $on-primary;
76
}
77
}
78
.view {
80
// background-color: $background;
81
// color: $on-surface;
82
&:hover {
84
box-shadow: inset 0 0 0 9999px overlay("hover-alt", $on-surface);
85
}
86
&:selected:hover {
88
box-shadow: inset 0 0 0 9999px overlay("hover-alt", $primary);
89
}
90
&:disabled {
92
color: disabled($on-surface);
93
}
94
&:hover,
96
&:selected {
97
border-radius: $corner-radius;
98
}
99
selection,
101
&:selected {
102
background-color: $overlay-selected;
103
}
104
}
105
textview {
107
// FIXME: we need to override background-color to ensure text rendering
108
text {
109
background-color: $background;
110
caret-color: $primary;
111
}
112
border {
114
// background-color: $background;
115
color: hint($on-surface); // FIXME: not working
116
}
117
}
118
iconview {
120
// @extend .view;
121
}
122
%iconview-desktop {
124
// background-color: $scrim;
125
color: $on-dark;
126
text-shadow: $text-shadow;
127
.rubberband,
129
rubberband {
130
border: 1px solid primary($on-dark);
131
background-color: rgba(primary($on-dark), .3);
132
}
133
}
134
%rubberband,
136
.rubberband,
137
rubberband {
138
border: 1px solid $primary;
139
background-color: rgba($primary, .24);
140
}
141
flowbox {
143
rubberband {
144
@extend %rubberband;
145
}
146
flowboxchild {
148
padding: 4px;
149
border-radius: $corner-radius;
150
&:selected {
152
background-color: $overlay-selected;
153
}
154
}
155
}
156
.content-view .tile {
158
// margin: 2px;
159
// padding: 0;
160
// border-radius: 0;
161
// background-color: black;
162
&:selected {
164
background-color: transparent;
165
}
166
}
167
label {
169
caret-color: $primary; // this shouldn't be needed.
170
&.separator {
172
color: hint($on-surface);
173
}
174
&.error {
176
color: $error;
177
}
178
selection {
180
background-color: $overlay-selected;
181
}
182
&:disabled {
184
color: disabled($on-surface);
185
headerbar &,
187
menuitem &,
188
tab &,
189
button & {
190
color: inherit;
191
}
192
}
193
&.osd {
195
border-radius: $corner-radius;
196
background-color: $tooltip;
197
color: $on-tooltip;
198
}
199
}
200
.dim-label {
202
color: hint($on-surface);
203
}
204
assistant {
206
.sidebar {
207
padding: 4px 0;
208
}
209
.sidebar label {
211
min-height: $medium-size;
212
margin: 0 4px;
213
padding: 0 8px;
214
border-radius: $corner-radius;
215
color: disabled($on-surface);
216
font-weight: 500;
217
&.highlight {
219
background-color: overlay("activated", $primary);
220
color: $primary;
221
}
222
}
223
}
224
%osd,
226
.osd {
227
// opacity: .9;
228
}
229
/**
231
* Spinner Animation
232
*/
233
@keyframes spin {
235
to {
236
-gtk-icon-transform: rotate(1turn);
237
}
238
}
239
spinner {
241
background: none;
242
opacity: 0; // non spinning spinner makes no sense
243
color: $primary;
244
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
245
transition: opacity $duration * 4 $ease-out;
246
animation: spin 1s linear infinite;
247
&:checked {
249
opacity: 1;
250
}
251
&:disabled {
253
color: disabled-hint($on-surface);
254
}
255
}
256
/**
258
* General Typography
259
*/
260
@function pt($size: $font-size) {
262
@return ($size * .75 / 1px) * 1pt;
263
}
264
.large-title {
266
font-weight: 400;
267
font-size: pt(48px);
268
}
269
.title-1 {
271
font-weight: 400;
272
font-size: pt(34px);
273
letter-spacing: pt(.25px);
274
}
275
.title-2 {
277
font-weight: 400;
278
font-size: pt(24px);
279
}
280
.title-3 {
282
font-weight: 500;
283
font-size: pt(20px);
284
letter-spacing: pt(.15px);
285
}
286
.title-4 {
288
font-weight: 400;
289
font-size: pt(16px);
290
letter-spacing: pt(.5px);
291
}
292
.heading {
294
font-weight: 500;
295
font-size: 1em;
296
}
297
.body {
299
font-weight: 400;
300
font-size: 1em;
301
}
302
.caption-heading {
304
font-weight: 500;
305
font-size: pt(12px);
306
letter-spacing: pt(1.5px);
307
}
308
.caption {
310
font-weight: 400;
311
font-size: pt(12px);
312
letter-spacing: pt(.4px);
313
}
314
/**
316
* Text Entries
317
*/
318
%entry,
320
entry {
321
min-height: $medium-size;
322
padding: 0 8px;
323
border-radius: $corner-radius $corner-radius 0 0;
324
@include entry(normal);
326
&:focus {
328
@include entry(checked);
329
}
330
&:drop(active) {
332
@include entry(hover);
333
}
334
&:disabled {
336
@include entry(disabled);
337
}
338
&.flat {
340
min-height: 0;
341
padding: 2px;
342
border-radius: 0;
343
background-color: transparent;
344
}
345
// icons inside the entry
347
image {
348
color: hint($on-surface);
349
&:hover,
351
&:active {
352
color: $on-surface;
353
}
354
&:disabled {
356
color: disabled($on-surface);
357
}
358
&.left {
360
margin-left: ($medium-size - 16px) / 2 - 8px;
361
margin-right: 6px;
362
}
363
&.right {
365
margin-left: 6px;
366
margin-right: ($medium-size - 16px) / 2 - 8px;
367
}
368
}
369
undershoot {
371
&.left {
372
// @include undershoot(left);
373
}
374
&.right {
376
// @include undershoot(right);
377
}
378
}
379
selection {
381
background-color: $overlay-selected;
382
}
383
// entry error and warning style
385
@each $class, $color in (".error": $error, ".warning": $warning) {
386
&#{$class} {
387
@include entry(normal, $color);
388
&:focus {
390
@include entry(checked, $color);
391
}
392
&:disabled {
394
@include entry(disabled, $color);
395
}
396
}
397
}
398
.osd & {
400
}
401
progress {
403
margin: 0 -8px -4px;
404
border-bottom: 2px solid $primary;
405
background-color: transparent;
406
}
407
// linked entries
409
.linked:not(.vertical) > & {
410
@extend %linked;
411
}
412
// Vertically linked entries
414
.linked.vertical > & {
415
@extend %linked-vertical;
416
}
417
}
418
%entry_raised {
420
border-radius: $corner-radius;
421
@include entry(raised-normal);
423
&:focus {
425
@include entry(raised-focus);
426
}
427
&:drop(active) {
429
@include entry(raised-hover);
430
}
431
&:disabled {
433
@include entry(raised-disabled);
434
}
435
// entry error and warning style
437
@each $class, $color in (".error": $error, ".warning": $warning) {
438
&#{$class} {
439
@include entry(raised-normal, $color);
440
&:focus {
442
@include entry(raised-focus, $color);
443
}
444
&:disabled {
446
@include entry(raised-disabled, $color);
447
}
448
image {
450
color: hint(on($color));
451
&:hover,
453
&:active {
454
color: on($color);
455
}
456
&:disabled {
458
color: disabled(on($color));
459
}
460
}
461
}
462
}
463
}
464
treeview entry {
466
&,
467
&.flat {
468
background-color: $base;
469
&,
471
&:focus {
472
border-image: none;
473
box-shadow: none;
474
}
475
}
476
}
477
.entry-tag {
479
margin: 2px;
480
border-radius: $circular-radius;
481
box-shadow: none;
482
background-color: fill($on-surface);
483
color: $on-surface;
484
&:hover {
486
background-image: image(overlay("hover", $on-surface));
487
}
488
// side margins: compensate the entry padding with a negative margin
490
// then the negative margin itself
491
:dir(ltr) & {
492
margin-left: 4px;
493
margin-right: 0;
494
padding-left: 12px;
495
padding-right: 8px;
496
}
497
:dir(rtl) & {
499
margin-left: 0;
500
margin-right: 4px;
501
padding-left: 8px;
502
padding-right: 12px;
503
}
504
// seems any sizing doesn't work
506
&.button {
507
box-shadow: none;
508
background-color: transparent;
509
color: hint($on-surface);
510
}
511
}
512
/**
514
* Buttons
515
*/
516
// stuff for .needs-attention
518
@keyframes needs-attention {
519
from {
520
background-image:
521
-gtk-gradient(
522
radial,
523
center center, 0,
524
center center, .001,
525
to($primary),
526
to(transparent)
527
);
528
}
529
to {
531
background-image:
532
-gtk-gradient(
533
radial,
534
center center, 0,
535
center center, .5,
536
to($primary),
537
to(transparent)
538
);
539
}
540
}
541
%button,
543
button {
544
min-height: 24px;
545
min-width: 16px;
546
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
547
border-radius: $corner-radius;
548
color: $on-surface;
549
font-weight: 500;
550
@extend %ripple;
552
@include ink-color($on-surface, $button-style: "raised", $on: $surface);
553
&:disabled {
555
box-shadow: none;
556
background-color: fill($on-surface);
557
color: disabled($on-surface);
558
}
559
&:checked {
561
$background-color: overlay("activated", $primary, $on: $surface);
562
color: $primary;
563
@include ink-color($primary, $button-style: "raised", $on: $background-color);
564
&:disabled {
566
box-shadow: none;
567
background-color: overlay("activated", $on-surface, $on: fill($on-surface));
568
color: disabled($on-surface);
569
}
570
}
571
&.text-button {
573
min-width: 64px - 16px * 2;
574
padding-left: 16px;
575
padding-right: 16px;
576
}
577
&.image-button {
579
min-width: 24px;
580
padding: ($medium-size - 24px) / 2;
581
border-radius: $circular-radius;
582
}
583
// NOTE: Some image-only buttons use this as well
585
&.text-button.image-button {
586
min-width: 24px;
587
padding: ($medium-size - 24px) / 2;
588
border-radius: $corner-radius;
589
label {
591
&:first-child {
592
margin-left: 16px - ($medium-size - 24px) / 2;
593
}
594
&:last-child {
596
margin-right: 16px - ($medium-size - 24px) / 2;
597
}
598
}
599
image:not(:only-child) {
601
margin: 0 (24px - 16px) / 2;
602
}
603
}
604
.linked:not(.vertical) > & {
606
@extend %linked;
607
&.image-button:not(.text-button) {
609
@extend %linked-image-button;
610
}
611
}
612
.linked.vertical > & {
614
@extend %linked-vertical;
615
&.image-button:not(.text-button) {
617
@extend %linked-vertical-image-button;
618
}
619
}
620
}
621
%button-flat-basic {
623
color: hint($on-surface);
624
@include ink-color($on-surface, $button-style: "flat");
625
&:disabled {
627
background-color: transparent;
628
color: disabled-hint($on-surface);
629
}
630
}
631
%button-flat-activatable {
633
@extend %button-flat-basic;
634
&:checked {
636
$background-color: overlay("activated", $primary);
637
color: $primary;
638
@include ink-color($primary, $button-style: "flat", $on: $background-color);
639
&:disabled {
641
color: disabled($on-surface);
642
}
643
}
644
}
645
%button-flat,
647
button.flat {
648
@extend %button-flat-activatable;
649
&.text-button {
651
min-width: 64px - 8px * 2;
652
padding-left: 8px;
653
padding-right: 8px;
654
}
655
&.text-button.image-button {
657
min-width: 24px;
658
padding: ($medium-size - 24px) / 2;
659
label {
661
&:first-child {
662
margin-left: 12px - ($medium-size - 24px) / 2;
663
}
664
&:last-child {
666
margin-right: 12px - ($medium-size - 24px) / 2;
667
}
668
}
669
}
670
.linked:not(.vertical) > &,
672
.linked.vertical > & {
673
&:not(:only-child) { // specificity bump
674
border-radius: $corner-radius;
675
&.image-button:not(.text-button) {
677
border-radius: $circular-radius;
678
}
679
}
680
}
681
}
682
button {
684
// big standalone buttons like in Documents pager
685
&.osd {
686
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
687
&.image-button {
689
padding: ($large-size - 24px) / 2;
690
}
691
&:disabled {
693
opacity: 0;
694
}
695
}
696
// overlay / OSD style
698
@at-root %osd_button,
699
.osd & {
700
}
701
// Suggested and Destructive Action buttons
703
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
704
&#{$class} {
705
color: on($color);
706
@include ink-color(on($color), $button-style: "raised", $on: $color);
707
&:disabled {
709
box-shadow: none;
710
background-color: fill($on-surface);
711
color: disabled($on-surface);
712
}
713
&:checked {
715
$background-color: overlay("activated", on($color), $on: $color);
716
@include ink-color(on($color), $button-style: "raised", $on: $background-color);
717
}
718
&.flat {
720
color: $color;
721
@include ink-color($color, $button-style: "flat");
722
&:disabled {
724
box-shadow: none;
725
background-color: transparent;
726
color: disabled-hint($on-surface);
727
}
728
&:checked {
730
$background-color: overlay("activated", $color);
731
@include ink-color($color, $button-style: "flat", $on: $background-color);
732
}
733
}
734
.osd & {
736
}
737
}
738
}
739
.stack-switcher > & {
741
// to position the needs attention dot, padding is added to the button
742
// child, a label needs just lateral padding while an icon needs vertical
743
// padding added too.
744
> label {
746
margin: 0 -6px;
747
padding: 0 6px;
748
}
749
> image {
751
margin: -3px -6px;
752
padding: 3px 6px;
753
}
754
&.needs-attention {
756
> label,
757
> image {
758
@extend %needs-attention;
759
}
760
&:checked {
762
> label,
763
> image {
764
animation: none;
765
background-image: none;
766
}
767
}
768
}
769
}
770
// hide separators
772
&.font,
773
&.file {
774
separator {
775
@extend %hide_separators;
776
}
777
}
778
&.font {
780
> box > box > label {
781
// font-weight: bold;
782
}
783
}
784
// inline-toolbar buttons
786
.inline-toolbar & {
787
// @extend %button-flat;
788
&:not(.text-button) {
790
border-radius: $circular-radius;
791
}
792
}
793
.primary-toolbar & {
795
-gtk-icon-shadow: none; // tango icons don't need shadows
796
}
797
&.close,
799
&.circular { // The Bloody Circul Button
800
border-radius: $circular-radius;
801
label {
803
// padding: 0;
804
}
805
}
806
}
807
%button-small {
809
min-height: $small-size;
810
min-width: $small-size;
811
padding: 0;
812
border-radius: $circular-radius;
813
}
814
%needs-attention {
816
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
817
background-repeat: no-repeat;
818
background-position: right 3px;
819
background-size: 6px 6px;
820
&:dir(rtl) {
822
background-position: left 3px;
823
}
824
}
825
// all the following is for the +|- buttons on inline toolbars, that way
827
// should really be deprecated...
828
.inline-toolbar toolbutton > button {
829
}
830
// More inline toolbar buttons
832
toolbar.inline-toolbar toolbutton {
833
&:not(:first-child) > button.flat {
834
// @extend %linked-not-first-child;
835
}
836
&:not(:last-child) > button.flat {
838
// @extend %linked-not-last-child;
839
}
840
}
841
%linked-not-first-child {
843
border-top-left-radius: 0;
844
border-bottom-left-radius: 0;
845
}
846
%linked-not-last-child {
848
border-top-right-radius: 0;
849
border-bottom-right-radius: 0;
850
}
851
%linked {
853
&:not(:first-child) {
854
@extend %linked-not-first-child;
855
}
856
&:not(:last-child) {
858
@extend %linked-not-last-child;
859
}
860
}
861
%linked-vertical-not-first-child {
863
border-top-left-radius: 0;
864
border-top-right-radius: 0;
865
}
866
%linked-vertical-not-last-child {
868
border-bottom-left-radius: 0;
869
border-bottom-right-radius: 0;
870
}
871
%linked-vertical {
873
&:not(:first-child) {
874
@extend %linked-vertical-not-first-child;
875
}
876
&:not(:last-child) {
878
@extend %linked-vertical-not-last-child;
879
}
880
}
881
%linked-image-button {
883
&:first-child {
884
border-top-left-radius: $corner-radius;
885
border-bottom-left-radius: $corner-radius;
886
}
887
&:last-child {
889
border-top-right-radius: $corner-radius;
890
border-bottom-right-radius: $corner-radius;
891
}
892
&:only-child {
894
border-radius: $circular-radius;
895
}
896
}
897
%linked-vertical-image-button {
899
&:first-child {
900
border-top-left-radius: $corner-radius;
901
border-top-right-radius: $corner-radius;
902
}
903
&:last-child {
905
border-bottom-left-radius: $corner-radius;
906
border-bottom-right-radius: $corner-radius;
907
}
908
&:only-child {
910
border-radius: $circular-radius;
911
}
912
}
913
/* menu buttons */
915
modelbutton.flat,
916
.menuitem.button.flat {
917
min-height: $menuitem-size;
918
padding: 0 8px;
919
border-radius: $corner-radius;
920
@extend %ripple;
922
@include ink-color($on-surface);
923
&:selected {
925
background-color: $overlay-selected;
926
}
927
}
928
modelbutton.flat arrow {
930
transition: color $duration $ease-out;
931
color: hint($on-surface);
932
&:disabled {
934
color: disabled-hint($on-surface);
935
}
936
&.left {
938
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
939
}
940
&.right {
942
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
943
}
944
}
945
button.color {
947
min-height: $small-size;
948
min-width: $small-size;
949
padding: $container-padding;
950
colorswatch:only-child {
952
&,
953
overlay {
954
// border-radius: 0;
955
}
956
}
957
}
958
/**
960
* Links
961
*/
962
*:link {
964
color: $primary;
965
&:disabled {
967
color: disabled($on-surface);
968
}
969
}
970
*:visited {
972
color: $visited;
973
&:disabled {
975
color: disabled($on-surface);
976
}
977
}
978
button.link {
980
&:link {
981
color: $primary;
982
@include ink-color($primary, $button-style: "flat");
983
}
984
&:visited {
986
color: $visited;
987
@include ink-color($visited, $button-style: "flat");
988
}
989
&:disabled {
991
color: disabled($on-surface);
992
}
993
> label {
995
text-decoration-line: underline;
996
}
997
}
998
/**
1000
* GtkSpinButton
1001
*/
1002
spinbutton {
1004
&:not(.vertical) {
1005
// in this horizontal configuration, the whole spinbutton
1006
// behaves as the entry, so we extend the entry styling
1007
// and nuke the style on the internal entry
1008
@extend %entry;
1009
padding: 0;
1011
entry {
1013
min-width: $large-size - 8px * 2;
1014
// reset all the other props since the spinbutton node is styled here
1015
margin: 0;
1016
border-image: none;
1017
border-radius: 0;
1018
box-shadow: none;
1019
background-color: transparent;
1020
}
1021
button {
1023
@extend %button-flat-basic;
1024
@extend %button-small;
1025
// margin: $container-padding;
1027
border: solid $container-padding transparent;
1028
background-clip: padding-box;
1029
// Remove unwanted focus indicator
1031
&:focus:not(:hover):not(:active) {
1032
background-color: transparent;
1033
}
1034
&.up:dir(ltr),
1036
&.down:dir(rtl) {
1037
margin-left: -$container-padding / 2;
1038
}
1039
&.up:dir(rtl),
1041
&.down:dir(ltr) {
1042
margin-right: -$container-padding / 2;
1043
}
1044
}
1045
}
1046
// OSD horizontal
1048
.osd &:not(.vertical) {
1049
}
1050
// Vertical
1052
&.vertical {
1053
// in the vertical configuration, we treat the spinbutton
1054
// as a box, and tweak the style of the entry in the middle
1055
// so that it's linked
1056
// FIXME: this should not be set at all, but otherwise it gets the wrong
1058
// color
1059
caret-color: $primary;
1060
// FIXME: this should not be set at all, but otherwise it gets the wrong
1062
// color
1063
&:disabled {
1064
color: disabled($on-surface);
1065
}
1066
entry {
1068
@extend %entry_raised;
1069
min-height: $medium-size;
1071
min-width: $large-size;
1072
padding: 0;
1073
}
1074
button {
1076
min-height: $medium-size;
1077
min-width: $large-size;
1078
padding: 0;
1079
@extend %button-flat-basic;
1081
// Remove unwanted focus indicator
1083
&:focus:not(:hover):not(:active) {
1084
background-color: transparent;
1085
}
1086
&.up {
1088
border-radius: $corner-radius $corner-radius 0 0;
1089
}
1090
&.down {
1092
border-radius: 0 0 $corner-radius $corner-radius;
1093
}
1094
}
1095
}
1096
// OSD vertical
1098
.osd &.vertical {
1099
}
1100
// Misc
1102
treeview &:not(.vertical) {
1103
min-height: 0;
1104
border-style: none;
1105
border-radius: 0;
1106
entry {
1108
min-height: 0;
1109
padding: 1px 2px;
1110
}
1111
}
1112
}
1113
/**
1115
* ComboBoxes
1116
*/
1117
combobox {
1119
arrow {
1120
transition: -gtk-icon-transform $duration $ease-out;
1121
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1122
min-height: 16px;
1123
min-width: 16px;
1124
}
1125
button.combo:checked arrow {
1127
// color: $primary;
1128
-gtk-icon-transform: rotate(-.5turn);
1129
}
1130
// workaround for menuitem selection
1132
decoration {
1133
transition: none;
1134
}
1135
// remove hard-coded 2px padding
1137
cellview {
1138
margin: -2px;
1139
}
1140
button.combo cellview {
1142
&:dir(ltr) {
1143
margin-left: -2px + 8px - ($medium-size - 16px) / 2;
1144
}
1145
&:dir(rtl) {
1147
margin-right: -2px + 8px - ($medium-size - 16px) / 2;
1148
}
1149
}
1150
menu {
1152
padding: 2px 0;
1153
menuitem {
1155
min-height: $medium-size - 2px * 2;
1156
padding: 0 8px;
1157
}
1158
// overflow arrows
1160
> arrow {
1161
&.top {
1162
margin-top: -2px;
1163
}
1164
&.bottom {
1166
margin-top: 2px * 2;
1167
margin-bottom: -2px * 3;
1168
}
1169
}
1170
}
1171
> .linked:not(.vertical) > entry:not(:only-child) {
1173
border-radius: $corner-radius $corner-radius 0 0;
1174
&:first-child {
1176
margin-right: -$medium-size;
1177
padding-right: $medium-size;
1178
}
1179
&:last-child {
1181
margin-left: -$medium-size;
1182
padding-left: $medium-size;
1183
}
1184
}
1185
> .linked:not(.vertical) > button:not(:only-child) {
1187
@extend %button-flat-basic;
1188
// @extend %button-small;
1189
min-height: 16px;
1191
min-width: 16px;
1192
margin: ($medium-size - $small-size) / 2;
1193
padding: ($small-size - 16px) / 2;
1194
border-radius: $circular-radius;
1195
}
1196
}
1197
// the combo is a composite widget so the way we do button linking doesn't
1199
// work, special case needed. See
1200
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1201
.linked:not(.vertical) > combobox {
1203
&:not(:first-child) > box > button.combo {
1204
@extend %linked-not-first-child;
1205
}
1206
&:not(:last-child) > box > button.combo {
1208
@extend %linked-not-last-child;
1209
}
1210
}
1211
.linked.vertical > combobox {
1213
&:not(:first-child) > box > button.combo {
1214
@extend %linked-vertical-not-first-child;
1215
}
1216
&:not(:last-child) > box > button.combo {
1218
@extend %linked-vertical-not-last-child;
1219
}
1220
}
1221
button.combo:only-child {
1223
border-radius: $corner-radius $corner-radius 0 0;
1224
font-weight: normal;
1225
@include entry(normal);
1227
&:focus {
1229
@include entry(focus);
1230
}
1231
&:drop(active),
1233
&:hover {
1234
@include entry(hover);
1235
}
1236
&:checked {
1238
@include entry(checked);
1239
}
1240
&:disabled {
1242
@include entry(disabled);
1243
}
1244
arrow {
1246
transition: color $duration $ease-out;
1247
color: hint($on-surface);
1248
&:disabled {
1250
color: disabled-hint($on-surface);
1251
}
1252
}
1253
}
1254
/**
1256
* Toolbars
1257
*/
1258
toolbar {
1260
-GtkWidget-window-dragging: true;
1261
padding: 2px;
1262
button {
1264
@extend %button-flat;
1265
}
1266
// on OSD
1268
.osd & {
1269
}
1270
// stand-alone OSD toolbars
1272
&.osd {
1273
@extend %toolbar-osd;
1274
// positional classes for `attached` osd toolbars
1276
&.left,
1277
&.right,
1278
&.top,
1279
&.bottom {
1280
border-radius: 0;
1281
}
1282
&.bottom {
1284
box-shadow: none;
1285
background-color: transparent;
1286
background-image:
1287
linear-gradient(
1288
to bottom,
1289
transparent,
1290
rgba(black, .1) 30%,
1291
rgba(black, .2) 50%,
1292
rgba(black, .4)
1293
);
1294
}
1295
}
1296
// toolbar separators
1298
&.horizontal > separator {
1299
margin: 2px;
1300
}
1301
&.vertical > separator {
1303
margin: 2px;
1304
}
1305
&:not(.inline-toolbar):not(.osd) {
1307
scale,
1308
entry,
1309
spinbutton,
1310
button {
1311
margin: 2px;
1312
}
1313
.linked entry,
1315
.linked spinbutton,
1316
.linked button {
1317
&:not(:first-child) {
1318
margin-left: 0;
1319
}
1320
&:not(:last-child) {
1322
margin-right: 0;
1323
}
1324
}
1325
spinbutton {
1327
entry,
1328
button {
1329
margin: 0;
1330
}
1331
}
1332
switch {
1334
margin: 2px + $container-padding 2px;
1335
}
1336
}
1337
}
1338
%toolbar-osd {
1340
transition: $transition-shadow;
1341
padding: $container-padding;
1342
border-radius: $corner-radius;
1343
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1344
background-color: $surface;
1345
&:backdrop {
1347
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1348
}
1349
}
1350
// searchbar, location-bar & inline-toolbar
1352
.inline-toolbar {
1353
padding: $container-padding;
1354
border-style: solid;
1355
border-width: 0 1px 1px;
1356
border-color: divider($on-surface);
1357
background-color: $base;
1358
background-clip: padding-box;
1359
}
1360
searchbar > revealer > box,
1362
.location-bar {
1363
padding: $container-padding;
1364
border-style: solid;
1365
border-width: 0 0 1px;
1366
border-color: divider($on-surface);
1367
}
1368
searchbar > revealer > box {
1370
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1371
margin: -6px;
1372
padding: $container-padding;
1373
}
1374
/**
1376
* Header bars
1377
*/
1378
.titlebar {
1380
transition: background-color $duration $ease-out, color $duration $ease-out;
1381
border-radius: $corner-radius $corner-radius 0 0;
1382
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1383
background-color: $titlebar;
1384
color: $on-titlebar;
1385
&:disabled {
1387
color: disabled($on-titlebar);
1388
}
1389
&:backdrop {
1391
background-color: $titlebar-backdrop;
1392
color: hint($on-titlebar);
1393
&:disabled {
1395
color: disabled-hint($on-titlebar);
1396
}
1397
}
1398
.title {
1400
padding-left: 12px;
1401
padding-right: 12px;
1402
font-weight: bold;
1403
}
1404
.subtitle {
1406
padding-left: 12px;
1407
padding-right: 12px;
1408
font-size: smaller;
1409
}
1410
.subtitle,
1412
.dim-label {
1413
transition: color $duration $ease-out;
1414
color: hint($on-titlebar);
1415
&:backdrop {
1417
color: disabled($on-titlebar);
1418
}
1419
}
1420
// Don't draw titlebar above titlebar
1422
.titlebar {
1423
background-color: transparent;
1424
box-shadow: none;
1425
}
1426
// The separator for split headerbars
1428
headerbar + separator {
1429
background-color: divider($on-titlebar);
1430
}
1431
entry {
1433
box-shadow: inset 0 -1px stroke($on-titlebar);
1434
background-color: entry-fill($on-titlebar);
1435
color: $on-titlebar;
1436
&:disabled {
1438
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1439
background-color: entry-fill($on-titlebar);
1440
color: disabled($on-titlebar);
1441
}
1442
image {
1444
color: hint($on-titlebar);
1445
&:hover,
1447
&:active {
1448
color: $on-titlebar;
1449
}
1450
&:disabled {
1452
color: disabled($on-titlebar);
1453
}
1454
}
1455
}
1456
.linked:not(.vertical) > entry:not(:only-child) {
1458
border-radius: $corner-radius $corner-radius 0 0;
1459
}
1460
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1462
@extend %button-flat;
1463
border-image:
1465
radial-gradient(
1466
circle closest-corner at center calc(100% - 1px),
1467
$titlebar-indicator 0%,
1468
transparent 0%
1469
) 0 0 0 / 0 0 0;
1470
background-color: transparent;
1471
color: hint($on-titlebar);
1472
@include ink-color($on-titlebar, $button-style: "flat");
1473
&:disabled {
1475
color: disabled-hint($on-titlebar);
1476
}
1477
@at-root %titlebar-button-checked,
1479
&:checked {
1480
border-image:
1481
radial-gradient(
1482
circle closest-corner at center calc(100% - 1px),
1483
$titlebar-indicator 100%,
1484
transparent 0%
1485
) 0 0 2 / 0 0 2px;
1486
background-color: transparent;
1487
color: $on-titlebar;
1488
@include ink-color($on-titlebar, $button-style: "flat");
1489
&:disabled {
1491
background-color: transparent;
1492
color: disabled($on-titlebar);
1493
}
1494
}
1495
&:backdrop {
1497
color: disabled($on-titlebar);
1498
&:disabled {
1500
color: disabled-hint($on-titlebar);
1501
}
1502
&:checked {
1504
color: hint($on-titlebar);
1505
&:disabled {
1507
color: disabled-hint($on-titlebar);
1508
}
1509
}
1510
}
1511
}
1512
button.suggested-action, button.destructive-action {
1514
&:disabled {
1515
background-color: fill($on-titlebar);
1516
color: disabled($on-titlebar);
1517
}
1518
}
1519
// FIXME: Ugly overriding
1521
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1522
min-width: 120px - 8px * 2;
1523
}
1524
// FIXME: Ugly overriding
1526
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1527
min-width: 0;
1528
padding-left: ($medium-size - 24px) / 2;
1529
padding-right: ($medium-size - 24px) / 2;
1530
}
1531
&.selection-mode {
1533
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1534
// but let's keep it for backwards compatibility.
1535
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1536
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1537
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1538
background-color: $primary;
1539
color: $on-primary;
1540
&:backdrop {
1542
color: hint($on-primary);
1543
}
1544
.subtitle:link {
1546
color: $on-primary;
1547
}
1548
button:not(.suggested-action):not(.destructive-action) {
1550
border-image:
1551
radial-gradient(
1552
circle closest-corner at center calc(100% - 1px),
1553
currentcolor 0%,
1554
transparent 0%
1555
) 0 0 0 / 0 0 0;
1556
color: $on-primary;
1557
&:disabled {
1559
color: disabled($on-primary);
1560
}
1561
&:checked {
1563
border-image:
1564
radial-gradient(
1565
circle closest-corner at center calc(100% - 1px),
1566
currentcolor 100%,
1567
transparent 0%
1568
) 0 0 2 / 0 0 2px;
1569
color: $on-primary;
1570
&:disabled {
1572
color: disabled($on-primary);
1573
}
1574
}
1575
&:backdrop {
1577
color: hint($on-primary);
1578
&:disabled {
1580
color: disabled-hint($on-primary);
1581
}
1582
&:checked {
1584
color: hint($on-primary);
1585
&:disabled {
1587
color: disabled-hint($on-primary);
1588
}
1589
}
1590
}
1591
}
1592
.selection-menu {
1594
padding-left: 16px;
1595
padding-right: 16px;
1596
arrow {
1598
-GtkArrow-arrow-scaling: 1;
1599
}
1600
.arrow {
1602
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1603
}
1604
}
1605
}
1606
.selection-mode {
1608
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1609
background-color: $primary;
1610
}
1611
// squared corners when the window is maximized, tiled, or fullscreen
1613
.tiled &,
1614
.tiled-top &,
1615
.tiled-right &,
1616
.tiled-bottom &,
1617
.tiled-left &,
1618
.maximized &,
1619
.fullscreen & {
1620
border-radius: 0;
1621
box-shadow: $shadow-z1;
1622
}
1623
&.default-decoration {
1625
min-height: $small-size;
1626
padding: $container-padding;
1627
box-shadow: inset 0 1px highlight($titlebar);
1628
.tiled &,
1630
.maximized &,
1631
.fullscreen & {
1632
box-shadow: none;
1633
}
1634
button.titlebutton {
1636
min-height: $small-size;
1637
min-width: $small-size;
1638
margin: 0;
1639
padding: 0;
1640
}
1641
// workaround for non-animatable buttons
1643
.background:not(.csd) & button.titlebutton:active {
1644
background-size: 1000% 1000%;
1645
}
1646
}
1647
.solid-csd & {
1649
&:dir(rtl), &:dir(ltr) { // specificity bump
1650
border-radius: 0;
1651
box-shadow: $shadow-z1; // just remove the highlight
1652
}
1653
}
1654
}
1655
headerbar {
1657
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1658
min-height: $large-size;
1659
padding: 0 $container-padding;
1660
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1662
entry,
1663
spinbutton,
1664
button {
1665
margin-top: $container-padding;
1666
margin-bottom: $container-padding;
1667
}
1668
separator.titlebutton {
1670
margin-top: $large-size / 4;
1671
margin-bottom: $large-size / 4;
1672
background-color: divider($on-titlebar);
1673
}
1674
switch {
1676
margin-top: ($large-size - 24px) / 2;
1677
margin-bottom: ($large-size - 24px) / 2;
1678
}
1679
// reset button margins of the spinbutton
1681
spinbutton button {
1682
margin-top: 0;
1683
margin-bottom: 0;
1684
}
1685
// FIXME: This is a hacky workaround.
1687
.entry-tag {
1688
margin-top: 5px;
1689
margin-bottom: 5px;
1690
}
1691
}
1692
// Development versions of apps to use a differently styled headerbar
1694
window.devel .titlebar:not(.selection-mode) {
1695
}
1696
/**
1698
* Pathbars
1699
*/
1700
%pathbar_button,
1702
.path-bar.linked:not(.vertical) > button {
1703
padding-left: ($medium-size - 24px) / 2;
1704
padding-right: ($medium-size - 24px) / 2;
1705
border-image:
1706
radial-gradient(
1707
circle closest-corner at center calc(100% - 1px),
1708
$primary 0%,
1709
transparent 0%
1710
) 0 0 0 / 0 0 0;
1711
border-radius: $corner-radius;
1712
color: hint($on-surface);
1713
@include ink-color($on-surface, $button-style: "flat");
1714
&:disabled {
1716
background-color: transparent;
1717
color: disabled-hint($on-surface);
1718
}
1719
&:checked {
1721
border-image:
1722
radial-gradient(
1723
circle closest-corner at center calc(100% - 1px),
1724
$primary 100%,
1725
transparent 0%
1726
) 0 0 2 / 0 0 2px;
1727
color: $primary;
1728
@include ink-color($primary, $button-style: "flat");
1729
&:disabled {
1731
background-color: transparent;
1732
color: disabled($on-surface);
1733
}
1734
}
1735
label:not(:only-child) {
1737
&:first-child {
1738
margin-left: 0;
1739
}
1740
&:last-child {
1742
margin-right: 0;
1743
}
1744
}
1745
&.text-button {
1747
min-width: 0;
1748
}
1749
&.slider-button {
1751
padding-left: (24px - 16px) / 2;
1752
padding-right: (24px - 16px) / 2;
1753
}
1754
}
1755
/**
1757
* Tree Views
1758
*/
1759
treeview.view {
1761
@at-root * {
1762
-GtkTreeView-horizontal-separator: 4;
1763
-GtkTreeView-grid-line-width: 1;
1764
-GtkTreeView-grid-line-pattern: '';
1765
-GtkTreeView-tree-line-width: 1;
1766
-GtkTreeView-tree-line-pattern: '';
1767
-GtkTreeView-expander-size: 16;
1768
}
1769
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1771
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1772
// to avoid borders being overridden by the previously set props
1774
rubberband {
1775
@extend %rubberband;
1776
}
1777
&:hover,
1779
&:selected {
1780
border-radius: 0;
1781
}
1782
&.separator {
1784
min-height: 1px + 2px * 2;
1785
color: divider($on-surface);
1786
}
1787
&:drop(active) {
1789
// FIXME: box-shadow, background-color and background-image are not available here.
1790
border-style: solid none;
1791
border-width: 9999px;
1792
border-color: overlay("hover", $on-surface);
1793
&.after {
1795
border-top-style: none;
1796
}
1797
&.before {
1799
border-bottom-style: none;
1800
}
1801
}
1802
&.expander {
1804
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1805
-gtk-icon-transform: rotate(-90deg);
1806
&:dir(rtl) {
1808
-gtk-icon-transform: rotate(90deg);
1809
}
1810
&:checked {
1812
-gtk-icon-transform: unset;
1813
}
1814
color: hint($on-surface);
1816
&:hover,
1818
&:active {
1819
color: $on-surface;
1820
}
1821
&:disabled {
1823
color: disabled-hint($on-surface);
1824
}
1825
}
1826
&.progressbar { // progress bar in treeviews
1828
border-bottom: $bar-size solid $primary;
1829
box-shadow: none;
1830
background-color: transparent;
1831
background-image: none;
1832
&:selected:hover {
1834
box-shadow: none;
1835
}
1836
}
1837
&.trough { // progress bar trough in treeviews
1839
border-bottom: $bar-size solid disabled-stroke($on-surface);
1840
box-shadow: none;
1841
background-color: transparent;
1842
background-image: none;
1843
&:selected:hover {
1845
box-shadow: none;
1846
}
1847
}
1848
header {
1850
button {
1851
padding: 2px 6px;
1852
border-style: none solid solid none;
1853
border-width: 1px;
1854
border-color: divider($on-surface);
1855
border-radius: 0;
1856
background-clip: border-box;
1857
color: hint($on-surface);
1858
@include ink-color($on-surface, $button-style: "flat", $hover-alt: true);
1859
@include list-item;
1860
&:disabled {
1862
background-color: transparent;
1863
color: disabled-hint($on-surface);
1864
}
1865
&:last-child {
1867
border-right-style: none;
1868
}
1869
}
1870
}
1871
button.dnd,
1873
header.button.dnd { // for treeview-like derive widgets
1874
padding: 2px 6px;
1875
border-style: none solid solid;
1876
border-width: 1px;
1877
border-color: divider($on-surface);
1878
border-radius: 0;
1879
box-shadow: none;
1880
background-clip: border-box;
1881
background-color: $surface;
1882
color: $primary;
1883
}
1884
// see tests/testaccel to test
1886
acceleditor > label {
1887
background-color: $primary;
1888
}
1889
}
1890
/**
1892
* Menus
1893
*/
1894
menubar,
1896
.menubar {
1897
-GtkWidget-window-dragging: true;
1898
padding: 0;
1899
// box-shadow: inset 0 -1px divider($on-surface);
1900
background-color: $titlebar;
1901
color: $on-titlebar;
1902
&:backdrop {
1904
background-color: $titlebar-backdrop;
1905
color: hint($on-titlebar);
1906
}
1907
.csd & {
1909
transition: $transition;
1910
}
1911
> menuitem {
1913
transition: $transition;
1914
min-height: 20px;
1915
padding: 4px 8px;
1916
color: hint($on-titlebar);
1917
&:hover { // Seems like it :hover even with keyboard focus
1919
transition: none;
1920
background-color: overlay("activated", $on-titlebar);
1921
color: $on-titlebar;
1922
}
1923
&:disabled {
1925
color: disabled-hint($on-titlebar);
1926
}
1927
}
1928
}
1929
// Needed to make the border-radius of menus work
1931
// otherwise the background bleeds out of the menu edges
1932
.background.popup {
1933
background-color: transparent;
1934
}
1935
menu,
1937
.menu,
1938
.context-menu {
1939
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1940
padding: 4px 0;
1941
box-shadow: inset 0 1px highlight($surface);
1942
background-color: $surface;
1943
border: 1px solid divider($on-surface); // adds borders in a non composited env
1944
.csd & {
1946
border: none; // axes borders in a composited env
1947
border-radius: $corner-radius;
1948
}
1949
menuitem {
1951
transition: background-color $duration $ease-out;
1952
min-height: 20px;
1953
min-width: 40px;
1954
padding: 4px 8px;
1955
color: $on-surface;
1956
font: initial;
1957
text-shadow: none;
1958
&:hover {
1960
transition: none;
1961
background-color: overlay("hover", $on-surface);
1962
}
1963
&:disabled {
1965
color: disabled($on-surface);
1966
}
1967
// submenu indicators
1969
arrow {
1970
min-height: 16px;
1971
min-width: 16px;
1972
color: hint($on-surface);
1973
&:disabled {
1975
color: disabled-hint($on-surface);
1976
}
1977
&:dir(ltr) {
1979
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1980
margin-left: 8px;
1981
}
1982
&:dir(rtl) {
1984
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1985
margin-right: 8px;
1986
}
1987
}
1988
// avoids labels color being overridden, see
1990
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1991
label {
1992
&:dir(rtl),
1993
&:dir(ltr) {
1994
// color: inherit;
1995
}
1996
}
1997
}
1998
// overflow arrows
2000
> arrow {
2001
min-height: 16px;
2002
min-width: 16px;
2003
padding: 4px;
2004
background-color: $surface;
2005
color: hint($on-surface);
2006
&.top {
2008
margin-top: -4px;
2009
border-bottom: 1px solid divider($on-surface);
2010
border-radius: $corner-radius $corner-radius 0 0;
2011
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2012
}
2013
&.bottom {
2015
margin-top: 4px * 2;
2016
margin-bottom: -4px * 3;
2017
border-top: 1px solid divider($on-surface);
2018
border-radius: 0 0 $corner-radius $corner-radius;
2019
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2020
}
2021
&:hover {
2023
background-image: image(overlay("hover", $on-surface));
2024
}
2025
&:disabled {
2027
border-color: transparent;
2028
background-color: transparent;
2029
color: transparent;
2030
// color: disabled-hint($on-surface);
2031
}
2032
}
2033
separator {
2035
margin: 4px 0;
2036
}
2037
}
2038
menuitem {
2040
accelerator {
2041
color: hint($on-surface);
2042
}
2043
&:disabled accelerator {
2045
color: disabled-hint($on-surface);
2046
}
2047
}
2048
/**
2050
* Popovers
2051
*/
2052
popover.background {
2054
transition: $transition-shadow;
2055
padding: 2px;
2056
box-shadow: $shadow-z4; // TODO: this should really have a highlight
2057
background-color: $surface;
2058
&:backdrop {
2060
box-shadow: $shadow-z2;
2061
}
2062
&, .csd & {
2064
border-style: solid;
2065
border-width: 1px;
2066
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
2067
border-radius: $corner-radius + 1px;
2068
background-clip: padding-box;
2069
}
2070
> stack {
2072
margin: -4px; // remove extra padding from menu style popovers
2073
}
2074
> toolbar {
2076
margin: -2px;
2077
}
2078
> list,
2080
> .view,
2081
> toolbar {
2082
border-style: none;
2083
box-shadow: none;
2084
background-color: transparent;
2085
}
2086
&.touch-selection,
2088
&.magnifier,
2089
&.osd {
2090
// @extend %osd;
2091
}
2092
button:not(.suggested-action):not(.destructive-action) {
2094
// @extend %button-flat;
2095
}
2096
.linked:not(.vertical) > entry:not(:only-child) {
2098
// border-radius: $corner-radius $corner-radius 0 0;
2099
}
2100
&.menu button,
2102
button.model {
2103
@extend %button-flat;
2104
min-height: 32px;
2106
padding: 0 8px;
2107
border-radius: $corner-radius;
2108
}
2109
separator {
2111
margin: 4px 0;
2112
}
2113
list separator {
2115
margin: 0;
2116
}
2117
}
2118
/**
2120
* Notebooks
2121
*/
2122
notebook {
2124
&:focus > header > tabs > tab:checked {
2125
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
2126
}
2127
> header {
2129
border-width: 1px;
2130
border-color: divider($on-surface);
2131
&.top {
2133
border-bottom-style: solid;
2134
> tabs {
2136
margin-bottom: -1px;
2137
> tab {
2139
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2140
&:checked {
2142
border-image-source: linear-gradient(to top, $primary 2px, divider($on-surface) 2px);
2143
}
2144
&.reorderable-page {
2146
border-image-width: 0 1px 2px;
2147
}
2148
}
2149
}
2150
}
2151
&.bottom {
2153
border-top-style: solid;
2154
> tabs {
2156
margin-top: -1px;
2157
> tab {
2159
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2160
&:checked {
2162
border-image-source: linear-gradient(to bottom, $primary 2px, divider($on-surface) 2px);
2163
}
2164
&.reorderable-page {
2166
border-image-width: 2px 1px 0;
2167
}
2168
}
2169
}
2170
}
2171
&.left {
2173
border-right-style: solid;
2174
> tabs {
2176
margin-right: -1px;
2177
> tab {
2179
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2180
&:checked {
2182
border-image-source: linear-gradient(to left, $primary 2px, divider($on-surface) 2px);
2183
}
2184
&.reorderable-page {
2186
border-image-width: 1px 2px 1px 0;
2187
}
2188
}
2189
}
2190
}
2191
&.right {
2193
border-left-style: solid;
2194
> tabs {
2196
margin-left: -1px;
2197
> tab {
2199
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2200
&:checked {
2202
border-image-source: linear-gradient(to right, $primary 2px, divider($on-surface) 2px);
2203
}
2204
&.reorderable-page {
2206
border-image-width: 1px 0 1px 2px;
2207
}
2208
}
2209
}
2210
}
2211
&.top > tabs > arrow {
2213
@extend %notebook_vert_arrows;
2214
border-top-style: none;
2216
}
2217
&.bottom > tabs > arrow {
2219
@extend %notebook_vert_arrows;
2220
border-bottom-style: none;
2222
}
2223
@at-root %notebook_vert_arrows {
2225
padding-left: 4px;
2226
padding-right: 4px;
2227
&.down {
2229
margin-left: -8px;
2230
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2231
}
2232
&.up {
2234
margin-right: -8px;
2235
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2236
}
2237
}
2238
&.left > tabs > arrow {
2240
@extend %notebook_horz_arrows;
2241
border-left-style: none;
2243
}
2244
&.right > tabs > arrow {
2246
@extend %notebook_horz_arrows;
2247
border-right-style: none;
2249
}
2250
@at-root %notebook_horz_arrows {
2252
padding-top: 4px;
2253
padding-bottom: 4px;
2254
&.down {
2256
margin-top: -8px;
2257
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2258
}
2259
&.up {
2261
margin-bottom: -8px;
2262
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2263
}
2264
}
2265
> tabs > arrow {
2267
min-height: 16px;
2268
min-width: 16px;
2269
border-radius: 0;
2270
color: hint($on-surface);
2271
@extend %ripple;
2272
@include ink-color($on-surface, $hover-alt: true);
2273
&:disabled {
2275
color: disabled-hint($on-surface);
2276
}
2277
}
2278
tab {
2280
transition: $transition,
2281
background-size 0ms,
2282
background-image 0ms;
2283
min-height: $small-size;
2284
min-width: $small-size;
2285
padding: $container-padding 12px;
2286
border-width: 1px; // for reorderable tabs
2288
border-color: transparent; //
2289
outline: none;
2291
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2292
background-repeat: no-repeat;
2293
background-position: center;
2294
background-size: 0% 0%;
2295
color: hint($on-surface);
2297
font-weight: 500;
2298
&:hover {
2300
background-color: overlay("hover-alt", $on-surface);
2301
}
2302
&:disabled {
2304
color: disabled-hint($on-surface);
2305
}
2306
&:checked {
2308
transition: $transition,
2309
background-size $ripple-fade-in-duration $ease-out,
2310
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2311
background-color: transparent;
2312
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2313
background-size: 1000% 1000%;
2314
background-clip: padding-box;
2315
color: $on-surface;
2316
&:disabled {
2318
color: disabled($on-surface);
2319
}
2320
&.reorderable-page {
2322
border-color: divider($on-surface);
2323
background-color: $base;
2324
}
2325
}
2326
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2328
> box {
2329
transition: background-color $duration $ease-out;
2330
margin: -$container-padding -12px;
2331
padding: $container-padding 12px;
2332
&:drop(active) {
2334
background-color: overlay("hover", $on-surface);
2335
}
2336
}
2337
// colors the button like the label, overridden otherwise
2339
button.flat {
2340
@extend %button-small;
2341
&:last-child {
2343
margin-left: $container-padding;
2344
margin-right: $container-padding - 12px;
2345
}
2346
&:first-child {
2348
margin-left: $container-padding - 12px;
2349
margin-right: $container-padding;
2350
}
2351
}
2352
}
2353
&.top,
2355
&.bottom {
2356
tabs {
2357
padding-left: 8px;
2358
padding-right: 8px;
2359
&:not(:only-child) {
2361
&:first-child {
2362
margin-left: 0;
2363
}
2364
&:last-child {
2366
margin-right: 0;
2367
}
2368
}
2369
tab.reorderable-page {
2371
border-style: none solid;
2372
}
2373
}
2374
}
2375
&.left,
2377
&.right {
2378
tabs {
2379
padding-top: 8px;
2380
padding-bottom: 8px;
2381
&:not(:only-child) {
2383
&:first-child {
2384
margin-top: 0;
2385
}
2386
&:last-child {
2388
margin-bottom: 0;
2389
}
2390
}
2391
tab.reorderable-page {
2393
border-style: solid none;
2394
}
2395
}
2396
}
2397
}
2398
}
2399
/**
2401
* Scrollbars
2402
*/
2403
scrollbar {
2405
$_slider_min_length: 24px;
2406
// disable steppers
2408
@at-root * {
2409
-GtkScrollbar-has-backward-stepper: false;
2410
-GtkScrollbar-has-forward-stepper: false;
2411
}
2412
transition: $transition;
2414
// background-color: $background;
2415
background-clip: padding-box;
2416
// scrollbar border
2418
&.top { border-bottom: 1px solid divider($on-surface); }
2419
&.bottom { border-top: 1px solid divider($on-surface); }
2420
&.left { border-right: 1px solid divider($on-surface); }
2421
&.right { border-left: 1px solid divider($on-surface); }
2422
// slider
2424
slider {
2425
transition: background-color $duration $ease-out;
2426
min-width: 8px;
2427
min-height: 8px;
2428
border: 4px solid transparent;
2429
border-radius: $circular-radius;
2430
background-clip: padding-box;
2431
background-color: disabled($on-surface);
2432
&:hover {
2434
background-color: hint($on-surface);
2435
}
2436
&:active {
2438
background-color: $on-surface;
2439
}
2440
&:disabled {
2442
background-color: disabled-hint($on-surface);
2443
}
2444
}
2445
&.fine-tune {
2447
slider {
2448
min-width: 4px;
2449
min-height: 4px;
2450
}
2451
&.horizontal slider {
2453
margin: 2px 0;
2454
}
2455
&.vertical slider {
2457
margin: 0 2px;
2458
}
2459
}
2460
&.overlay-indicator {
2462
&:not(.fine-tune) slider {
2463
transition-property: background-color, min-height, min-width;
2464
}
2465
&:not(.dragging):not(.hovering) {
2467
border-color: transparent;
2468
background-color: transparent;
2469
slider {
2471
min-width: 4px;
2472
min-height: 4px;
2473
margin: 4px - 1px;
2474
border: 1px solid rgba($base, .3);
2475
}
2476
button {
2478
min-width: 4px;
2479
min-height: 4px;
2480
margin: 4px - 1px;
2481
border: 1px solid rgba($base, .3);
2482
border-radius: $circular-radius;
2483
background-color: disabled($on-surface);
2484
background-clip: padding-box;
2485
-gtk-icon-source: none;
2486
&:disabled {
2488
background-color: disabled-hint($on-surface);
2489
}
2490
}
2491
&.horizontal {
2493
slider {
2494
min-width: $_slider_min_length;
2495
}
2496
button {
2498
min-width: 8px;
2499
}
2500
}
2501
&.vertical {
2503
slider {
2504
min-height: $_slider_min_length;
2505
}
2506
button {
2508
min-height: 8px;
2509
}
2510
}
2511
}
2512
&.dragging,
2514
&.hovering {
2515
background-color: $surface;
2516
}
2517
}
2518
&.horizontal slider {
2520
min-width: $_slider_min_length;
2521
}
2522
&.vertical slider {
2524
min-height: $_slider_min_length;
2525
}
2526
// button styling
2528
button {
2529
@extend %button-flat-basic;
2530
min-width: 16px;
2532
min-height: 16px;
2533
padding: 0;
2534
border-radius: 0;
2535
}
2536
// button icons
2538
&.vertical {
2539
button {
2540
&.down {
2541
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2542
}
2543
&.up {
2545
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2546
}
2547
}
2548
}
2549
&.horizontal {
2551
button {
2552
&.down {
2553
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2554
}
2555
&.up {
2557
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2558
}
2559
}
2560
}
2561
}
2562
/**
2565
* Switch
2566
*/
2567
switch {
2569
transition: all $duration $ease-out;
2570
margin: $container-padding 0;
2571
padding: 0 2px;
2572
border: 5px solid transparent;
2573
border-radius: $circular-radius;
2574
background-color: stroke($on-surface);
2575
background-clip: padding-box;
2576
font-size: 0;
2577
&:checked {
2579
background-color: rgba($primary, .5);
2580
}
2581
&:disabled {
2583
opacity: .5;
2584
}
2585
// hide on/off icons for >=3.24.5
2587
image {
2588
margin: -8px;
2589
-gtk-icon-transform: scale(0);
2590
}
2591
slider {
2593
transition: all $duration $ease-out;
2594
min-width: 20px;
2595
min-height: 20px;
2596
margin: -3px -2px;
2597
border-radius: $circular-radius;
2598
outline: none;
2599
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2600
background-color: $switch-surface;
2601
}
2602
&:hover slider {
2604
box-shadow: 0 0 0 10px overlay("hover", $on-surface), $shadow-z1;
2605
}
2606
&:focus slider {
2608
box-shadow: 0 0 0 10px overlay("focus", $on-surface), $shadow-z1;
2609
}
2610
&:checked slider {
2612
background-color: $primary;
2613
}
2614
&:checked:hover slider {
2616
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2617
}
2618
&:checked:focus slider {
2620
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2621
}
2622
row:selected & {
2624
}
2625
}
2626
/**
2628
* Check and Radio items
2629
*/
2630
// draw regular check and radio items using our PNG assets
2632
// all assets are rendered from assets.svg. never add pngs directly
2633
// selection-mode
2635
.view.content-view.check:not(list),
2636
.content-view:not(list) check {
2637
min-height: 40px;
2638
min-width: 40px;
2639
margin: 0;
2640
padding: 0;
2641
background-color: transparent;
2642
background-image: none;
2643
-gtk-icon-shadow: $icon-shadow-z2;
2644
&:hover,
2646
&:active {
2647
-gtk-icon-shadow: $icon-shadow-z4;
2648
}
2649
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2651
&#{$class} {
2652
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2653
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2655
}
2656
}
2657
}
2658
checkbutton,
2660
radiobutton {
2661
outline: none;
2662
}
2663
checkbutton.text-button,
2665
radiobutton.text-button {
2666
// this is for a nice focus on check and radios text
2667
padding: 2px;
2668
label:not(:only-child) {
2670
margin: 0 4px;
2671
}
2672
}
2673
$check-radio-size: 40px;
2675
check,
2677
radio {
2678
min-height: 24px;
2679
min-width: 24px;
2680
margin: -($check-radio-size - 24px) / 2;
2681
padding: ($check-radio-size - 24px) / 2;
2682
border-radius: $circular-radius;
2683
color: hint($on-surface);
2684
@extend %ripple;
2685
@include ink-color($on-surface);
2686
&:checked,
2688
&:indeterminate {
2689
color: $primary;
2690
@include ink-color($primary);
2691
}
2692
&:disabled {
2694
color: disabled-hint($on-surface);
2695
}
2696
&:only-child {
2698
// margin: -12px;
2699
}
2700
popover modelbutton.flat & {
2702
&,
2703
&:focus,
2704
&:hover,
2705
&:focus:hover,
2706
&:active,
2707
&:disabled {
2708
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2709
background-color: transparent;
2710
background-image: none;
2711
}
2712
&.left:dir(rtl) {
2714
margin-left: -12px;
2715
margin-right: -4px;
2716
}
2717
&.right:dir(ltr) {
2719
margin-left: -4px;
2720
margin-right: -12px;
2721
}
2722
}
2723
menu menuitem & {
2725
transition: none;
2726
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2727
padding: 0;
2728
&:dir(ltr) {
2730
margin-right: 8px;
2731
}
2732
&:dir(rtl) {
2734
margin-left: 8px;
2735
}
2736
&,
2738
&:checked,
2739
&:indeterminate {
2740
&:hover,
2741
&:focus {
2742
background-color: transparent;
2743
}
2744
}
2745
}
2746
}
2747
%check,
2749
check {
2750
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2751
&:checked {
2753
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2754
}
2755
&:indeterminate {
2757
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2758
}
2759
}
2760
%radio,
2762
radio {
2763
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2764
&:checked {
2766
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2767
}
2768
&:indeterminate {
2770
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2771
}
2772
border-image-slice: $check-radio-size / 2px;
2774
border-image-width: $check-radio-size / 2;
2775
$radio-indicator-size: 10px / $check-radio-size / 2;
2777
border-image-source:
2779
-gtk-gradient(
2780
radial,
2781
center center, 0,
2782
center center, .001,
2783
to($primary),
2784
to(transparent)
2785
);
2786
&:checked:not(:indeterminate) {
2788
border-image-source:
2789
-gtk-gradient(
2790
radial,
2791
center center, 0,
2792
center center, $radio-indicator-size,
2793
to($primary),
2794
to(transparent)
2795
);
2796
&:disabled {
2798
border-image-source:
2799
-gtk-gradient(
2800
radial,
2801
center center, 0,
2802
center center, $radio-indicator-size,
2803
to(disabled-hint($on-surface)),
2804
to(transparent)
2805
);
2806
}
2807
}
2808
}
2809
%small_check,
2811
menu menuitem check {
2812
min-height: 16px;
2813
min-width: 16px;
2814
border-radius: $corner-radius;
2815
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2816
&:checked {
2818
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2819
}
2820
&:indeterminate {
2822
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2823
}
2824
}
2825
%small_radio,
2827
menu menuitem radio {
2828
min-height: 16px;
2829
min-width: 16px;
2830
border-image: none;
2831
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2832
&:checked {
2834
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2835
}
2836
&:indeterminate {
2838
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2839
}
2840
}
2841
// ANIMATION:
2843
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2844
// the transformation is set on the active state and it get reset on the checked state.
2845
radio:not(:checked):active {
2846
// -gtk-icon-transform: scale(0);
2847
}
2848
// Otherwise, treeview.view styling will be applied...
2850
treeview.view check,
2851
treeview.view radio {
2852
padding: 0;
2853
color: hint($on-surface);
2854
&:checked,
2856
&:indeterminate {
2857
color: $primary;
2858
}
2859
&:disabled {
2861
color: disabled-hint($on-surface);
2862
}
2863
&,
2865
&:hover,
2866
&:selected,
2867
&:selected:hover {
2868
box-shadow: none;
2869
background-color: transparent;
2870
}
2871
}
2872
treeview.view radio:checked {
2874
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2875
border-image: none;
2876
}
2877
/**
2879
* GtkScale
2880
*/
2881
scale {
2883
// sizing
2884
$_marks_length: 8px;
2885
$_marks_distance: 7px;
2886
$trough_size: 2px;
2888
$finetune_trough_size: 4px;
2889
$slider_size: 32px;
2891
$slider_margin: -($slider_size - $trough_size) / 2;
2893
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2894
$color_slider_margin: -($slider_size) * 3 / 4;
2896
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2897
min-height: $trough_size;
2899
min-width: $trough_size;
2900
&.horizontal {
2902
padding: ($medium-size - $trough_size) / 2 12px;
2903
}
2904
&.vertical {
2906
padding: 12px ($medium-size - $trough_size) / 2;
2907
}
2908
// the slider is inside the trough, so to have make it bigger there's a negative margin
2910
slider {
2911
min-height: $slider_size;
2912
min-width: $slider_size;
2913
margin: $slider_margin;
2914
}
2915
// click-and-hold the slider to activate
2917
&.fine-tune {
2918
&.horizontal {
2919
min-height: $finetune_trough_size;
2920
padding-top: ($medium-size - $finetune_trough_size) / 2;
2921
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2922
}
2923
&.vertical {
2925
min-width: $finetune_trough_size;
2926
padding-left: ($medium-size - $finetune_trough_size) / 2;
2927
padding-right: ($medium-size - $finetune_trough_size) / 2;
2928
}
2929
// to make the trough grow in fine-tune mode
2931
slider {
2932
margin: $finetune_slider_margin;
2933
}
2934
}
2935
// the backing bit
2937
trough {
2938
transition: background-color $duration $ease-out;
2939
outline: none;
2940
background-color: stroke($on-surface);
2941
&:disabled {
2943
background-color: disabled-stroke($on-surface);
2944
}
2945
}
2946
// the colored part of the backing bit
2948
highlight {
2949
transition: background-image $duration $ease-out;
2950
background-image: image($primary);
2951
&:disabled {
2953
background-color: $background;
2954
background-image: image(disabled-hint($on-surface));
2955
}
2956
}
2957
// this is another differently styled part of the backing bit, the most relevant use case is for example
2959
// in media player to indicate how much video stream as been cached
2960
fill {
2961
transition: background-color $duration $ease-out;
2962
background-color: stroke($on-surface);
2963
&:disabled {
2965
background-color: transparent;
2966
}
2967
}
2968
slider {
2970
transition: background-color $duration $ease-out,
2971
background-size $ripple-fade-out-duration $ease-out,
2972
background-image $ripple-fade-out-opacity-duration $ease-out;
2973
background-repeat: no-repeat;
2974
background-position: center;
2975
background-size: auto, 1000% 1000%;
2976
border-radius: 50%;
2977
color: $primary;
2978
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2980
&#{$class} {
2981
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2982
background-image:
2984
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2985
radial-gradient(circle, transparent 10%, transparent 0%);
2986
}
2987
}
2988
&:hover {
2990
background-color: overlay("hover", $primary);
2991
}
2992
&:focus {
2994
background-color: overlay("focus", $primary);
2995
}
2996
&:active {
2998
$_url: 'assets/scale-slider#{$asset-suffix}';
2999
transition: background-color $duration $ease-out,
3001
background-size 0ms,
3002
background-image 0ms;
3003
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
3004
background-image:
3005
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
3006
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3007
background-size: auto, 0% 0%;
3008
}
3009
}
3010
marks,
3012
value {
3013
color: hint($on-surface);
3014
}
3015
indicator {
3017
background-color: stroke($on-surface);
3018
color: transparent;
3019
}
3020
//marks margins
3022
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
3023
(horizontal, bottom, bottom, top),
3024
(vertical, top, left, right),
3025
(vertical, bottom, right, left) {
3026
&.#{$scale_orient} marks {
3027
&.#{$marks_class} {
3028
margin-#{$marks_margin}: $_marks_distance;
3029
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
3030
}
3031
}
3032
&.#{$scale_orient}.fine-tune marks {
3034
&.#{$marks_class} {
3035
margin-#{$marks_margin}: $_marks_distance - 1px;
3036
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
3037
}
3038
}
3039
}
3040
&.horizontal {
3042
indicator {
3043
min-height: $_marks_length;
3044
min-width: 1px;
3045
}
3046
}
3047
&.vertical {
3049
indicator {
3050
min-height: 1px;
3051
min-width: $_marks_length;
3052
}
3053
}
3054
// *WARNING* scale with marks madness following
3056
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
3058
@each $marks_class, $marks_infix in (
3059
".marks-before:not(.marks-after)": "-marks-before",
3060
".marks-after:not(.marks-before)": "-marks-after"
3061
) {
3062
&#{$dir_class}#{$marks_class} {
3063
slider {
3064
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
3065
&#{$state_class} {
3066
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
3067
background-image:
3069
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3070
radial-gradient(circle, transparent 10%, transparent 0%);
3071
}
3072
}
3073
&:active {
3075
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
3076
background-image:
3078
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3079
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3080
}
3081
}
3082
}
3083
}
3084
}
3085
&.color {
3087
min-height: 0;
3088
min-width: 0;
3089
&.horizontal {
3091
padding: 0 0 12px 0;
3092
slider {
3094
&:dir(ltr), &:dir(rtl) { // specificity bump
3095
margin-bottom: $color_slider_margin;
3096
margin-top: $color_marks_slider_margin;
3097
}
3098
}
3099
}
3100
&.vertical {
3102
&:dir(ltr) {
3103
padding: 0 0 0 12px;
3104
slider {
3106
margin-left: $color_slider_margin;
3107
margin-right: $color_marks_slider_margin;
3108
}
3109
}
3110
&:dir(rtl) {
3112
padding: 0 12px 0 0;
3113
slider {
3115
margin-right: $color_slider_margin;
3116
margin-left: $color_marks_slider_margin;
3117
}
3118
}
3119
}
3120
}
3121
}
3122
/**
3124
* Progress bars
3125
*/
3126
progressbar {
3128
// sizing
3129
&.horizontal {
3130
trough,
3131
progress {
3132
min-height: $bar-size;
3133
}
3134
}
3135
&.vertical {
3137
trough,
3138
progress {
3139
min-width: $bar-size;
3140
}
3141
}
3142
// FIXME: insensitive state missing and some other state should be set probably
3144
color: hint($on-surface);
3145
font-size: smaller;
3146
trough {
3148
background-color: disabled-stroke($on-surface);
3149
}
3150
progress {
3152
background-color: $primary;
3153
}
3154
&.osd { // progressbar.osd used for epiphany page loading progress
3156
// min-width: $bar-size;
3157
// min-height: $bar-size;
3158
// background-color: transparent;
3159
trough {
3161
// background-color: transparent;
3162
}
3163
progress {
3165
// background-color: $primary;
3166
}
3167
}
3168
// makes the progress indicator disappear, when the fraction is 0
3170
trough.empty progress {
3171
all: unset;
3172
}
3173
}
3174
/**
3176
* Level Bar
3177
*/
3178
levelbar {
3180
&.horizontal {
3181
block {
3182
min-height: $bar-size;
3183
}
3184
&.discrete block {
3186
min-width: $medium-size;
3187
&:not(:last-child) {
3189
margin-right: 2px;
3190
}
3191
}
3192
}
3193
&.vertical {
3195
block {
3196
min-width: $bar-size;
3197
}
3198
&.discrete block {
3200
min-height: $medium-size;
3201
&:not(:last-child) {
3203
margin-bottom: 2px;
3204
}
3205
}
3206
}
3207
trough {
3209
}
3210
block {
3212
&.low {
3213
background-color: $warning;
3214
}
3215
&.high,
3217
&:not(.empty) {
3218
background-color: $primary;
3219
}
3220
&.full {
3222
background-color: $success;
3223
}
3224
&.empty {
3226
background-color: disabled-stroke($on-surface);
3227
}
3228
}
3229
}
3230
/**
3232
* Print dialog
3233
*/
3234
printdialog {
3236
paper {
3237
padding: 0;
3238
border: 1px solid divider($on-surface);
3239
background-clip: padding-box;
3240
background-color: $base;
3241
color: $on-surface;
3242
}
3243
.dialog-action-box {
3245
margin: 12px;
3246
}
3247
}
3248
/**
3250
* Frames
3251
*/
3252
frame > border,
3254
.frame {
3255
margin: 0;
3256
padding: 0;
3257
border: 1px solid divider($on-surface);
3258
border-radius: 0;
3259
box-shadow: none;
3260
background-clip: padding-box;
3261
background-color: $base;
3262
&.flat {
3264
border-style: none;
3265
background-color: transparent;
3266
}
3267
}
3268
// for backward compatibility
3270
frame.flat > border {
3271
border-style: none;
3272
background-color: transparent;
3273
}
3274
actionbar > revealer > box {
3276
padding: $container-padding;
3277
border-top: 1px solid divider($on-surface);
3278
// background-color: $base;
3279
button:not(.suggested-action):not(.destructive-action) {
3281
@extend %button-flat;
3282
}
3283
.linked:not(.vertical) > entry:not(:only-child) {
3285
border-radius: $corner-radius $corner-radius 0 0;
3286
}
3287
}
3288
scrolledwindow {
3290
viewport.frame { // avoid double borders when viewport inside scrolled window
3291
border-style: none;
3292
background-color: transparent;
3293
}
3294
// This is used when content is touch-dragged past boundaries.
3296
// draws a box on top of the content, the size changes programmatically.
3297
@at-root overshoot {
3298
&.top { @include overshoot(top); }
3299
&.bottom { @include overshoot(bottom); }
3301
&.left { @include overshoot(left); }
3303
&.right { @include overshoot(right); }
3305
}
3306
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3308
@at-root undershoot {
3309
// &.top { @include undershoot(top); }
3310
// &.bottom { @include undershoot(bottom); }
3312
// &.left { @include undershoot(left); }
3314
// &.right { @include undershoot(right); }
3316
}
3317
@at-root junction { // the small square between two scrollbars
3319
border-style: solid none none solid;
3320
border-width: 1px;
3321
border-color: divider($on-surface);
3322
// background-color: $background;
3323
&:dir(rtl) {
3325
border-style: solid solid none none;
3326
}
3327
}
3328
}
3329
// vbox and hbox separators
3331
separator {
3332
min-width: 1px;
3333
min-height: 1px;
3334
background-color: divider($on-surface);
3335
}
3336
%hide_separators {
3338
min-width: 0;
3339
min-height: 0;
3340
background-color: transparent;
3341
}
3342
/**
3344
* Lists
3345
*/
3346
list {
3348
border-color: divider($on-surface);
3349
// background-color: $base;
3350
row {
3352
padding: 2px;
3353
}
3354
}
3355
row {
3357
background-clip: padding-box;
3358
&.activatable {
3360
@extend %ripple;
3361
@include ink-color($on-surface, $hover-alt: true);
3362
@include list-item;
3363
// this is for indicathing which row generated a popover
3365
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3366
&.has-open-popup {
3367
background-color: overlay("activated", $on-surface);
3368
}
3369
}
3370
&:selected {
3372
@include ink-color($primary, $hover-alt: true, $on: $overlay-selected);
3373
&.has-open-popup {
3375
background-color: overlay("activated", $primary, $on: $overlay-selected);
3376
}
3377
}
3378
}
3379
/**
3381
* App Notifications
3382
*/
3383
.app-notification {
3385
@extend %toolbar-osd;
3386
margin: 8px;
3387
button {
3389
@extend %button-flat;
3390
&.text-button:not(:disabled) {
3392
color: $primary;
3393
@include ink-color($primary, $button-style: "flat");
3394
}
3395
}
3396
&.frame {
3398
border-style: none;
3399
}
3400
border {
3402
border-style: none;
3403
background-color: transparent;
3404
}
3405
}
3406
/**
3408
* Expanders
3409
*/
3410
expander {
3412
title > arrow {
3413
transition: all $duration $ease-out;
3414
min-width: 16px;
3415
min-height: 16px;
3416
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3417
&:checked {
3419
&:dir(ltr) {
3420
-gtk-icon-transform: rotate(-180deg);
3421
}
3422
&:dir(rtl) {
3424
-gtk-icon-transform: rotate(180deg);
3425
}
3426
}
3427
color: hint($on-surface);
3429
&:hover,
3431
&:active {
3432
color: $on-surface;
3433
}
3434
&:disabled {
3436
color: disabled-hint($on-surface);
3437
}
3438
}
3439
}
3440
/**
3442
* Calendar
3443
*/
3444
calendar {
3446
padding: 1px;
3447
border: 1px solid divider($on-surface);
3448
background-clip: padding-box;
3449
background-color: $base;
3450
color: $on-surface;
3451
&:disabled {
3453
color: disabled($on-surface);
3454
}
3455
&:selected {
3457
border-radius: $corner-radius + 1px;
3458
background-color: $overlay-selected;
3459
}
3460
&.header {
3462
border-style: none none solid;
3463
border-color: divider($on-surface);
3464
border-radius: 0;
3465
}
3466
&.button {
3468
border-radius: $corner-radius + 1px;
3469
color: hint($on-surface);
3470
&:hover {
3472
background-image: image(overlay("hover", $on-surface));
3473
}
3474
&:disabled {
3476
color: disabled-hint($on-surface);
3477
}
3478
}
3479
&.highlight {
3481
color: hint($on-surface);
3482
font-weight: 500;
3483
}
3484
&:indeterminate {
3486
color: disabled-hint($on-surface);
3487
}
3488
}
3489
/**
3491
* Dialogs
3492
*/
3493
// Message Dialog styling
3495
messagedialog {
3496
&.background {
3497
background-color: $surface;
3498
}
3499
.titlebar {
3501
min-height: $small-size;
3502
border-style: none;
3503
box-shadow: inset 0 1px highlight($surface);
3504
background-color: $surface;
3505
color: $on-surface;
3506
&:backdrop {
3508
background-color: $surface;
3509
color: hint($on-surface);
3510
}
3511
}
3512
&.csd { // rounded bottom border styling for csd version
3514
&.background {
3515
// bigger radius for better antialiasing
3516
border-bottom-left-radius: $corner-radius;
3517
border-bottom-right-radius: $corner-radius;
3518
}
3519
}
3520
// Hint text
3522
box.vertical > label + label {
3523
color: hint($on-surface);
3524
}
3525
.dialog-action-box {
3527
margin-top: -$container-padding;
3528
// padding: $container-padding;
3529
button {
3531
@extend %button-flat;
3532
&:not(:last-child) {
3534
margin-right: $container-padding;
3535
}
3536
&:not(:disabled) {
3538
color: $primary;
3539
@include ink-color($primary, $button-style: "flat");
3540
}
3541
&.suggested-action:not(:disabled) {
3543
// color: $primary;
3544
// @include ink-color($primary, $button-style: "flat");
3545
}
3546
&.destructive-action:not(:disabled) {
3548
color: $error;
3549
@include ink-color($error, $button-style: "flat");
3550
}
3551
}
3552
}
3553
}
3554
filechooser {
3556
.dialog-action-box {
3557
border-top: 1px solid divider($on-surface);
3558
}
3559
#pathbarbox {
3561
border-bottom: 1px solid divider($on-surface);
3562
// background-color: $background;
3563
// The new folder button
3565
> stack > box > button {
3566
@extend %button-flat;
3567
border-radius: $circular-radius;
3569
}
3570
}
3571
}
3572
filechooserbutton:drop(active) {
3574
// box-shadow: none;
3575
}
3576
/**
3578
* Sidebar
3579
*/
3580
.sidebar {
3582
border-style: none;
3583
background-color: transparent;
3584
&:not(separator) {
3586
@at-root %sidebar_left,
3587
&:dir(ltr),
3588
&.left,
3589
&.left:dir(rtl) {
3590
border-right: 1px solid divider($on-surface);
3591
border-left-style: none;
3592
}
3593
@at-root %sidebar_right,
3595
&:dir(rtl),
3596
&.right {
3597
border-left: 1px solid divider($on-surface);
3598
border-right-style: none;
3599
}
3600
}
3601
list {
3603
// background-color: transparent;
3604
}
3605
paned & {
3607
&,
3608
&.left,
3609
&.right,
3610
&.left:dir(rtl),
3611
&:dir(rtl),
3612
&:dir(ltr) {
3613
border-style: none;
3614
}
3615
}
3616
}
3617
stacksidebar.sidebar {
3619
& {
3620
&:dir(ltr),
3621
&.left,
3622
&.left:dir(rtl) {
3623
list {
3624
@extend %sidebar_left;
3625
}
3626
}
3627
&:dir(rtl),
3629
&.right {
3630
list {
3631
@extend %sidebar_right;
3632
}
3633
}
3634
}
3635
+ separator.vertical,
3637
separator.horizontal {
3638
@extend %hide_separators;
3639
}
3640
list {
3642
padding: 4px;
3643
// background-color: $background; // This should not be necessary, but the parent stacksidebar ignores background-color.
3644
}
3645
row {
3647
min-height: 32px;
3648
padding: 0 8px - 6px;
3649
border-radius: $corner-radius;
3650
&:selected {
3652
$background-color: overlay("activated", $primary);
3653
color: $primary;
3654
font-weight: 500;
3655
@include ink-color($primary, $on: $background-color, $hover-alt: true);
3656
}
3657
+ row {
3659
margin-top: 4px;
3660
}
3661
> label {
3663
padding-left: 6px;
3664
padding-right: 6px;
3665
}
3666
&.needs-attention > label {
3668
@extend %needs-attention;
3669
}
3670
}
3671
}
3672
separator.sidebar {
3674
background-color: divider($on-surface);
3675
&.selection-mode,
3677
.selection-mode & {
3678
// background-color: divider($on-primary);
3679
}
3680
}
3681
/**
3683
* File chooser
3684
*/
3685
// dim the sidebar icons, see bug #786613 for details on this oddity
3687
row image.sidebar-icon {
3688
transition: color $duration $ease-out;
3689
color: hint($on-surface);
3690
&:disabled {
3692
color: disabled-hint($on-surface);
3693
}
3694
}
3695
placessidebar.sidebar {
3697
> viewport.frame {
3698
border-style: none;
3699
background-color: transparent;
3700
}
3701
list {
3703
padding: (4px - 3px) 0 4px;
3704
}
3705
row {
3707
// Needs overriding of the GtkListBoxRow padding
3708
min-height: 32px;
3709
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3710
padding: 0;
3711
border-radius: $corner-radius;
3712
// Using margins/padding directly in the SidebarRow
3714
// will make the animation of the new bookmark row jump
3715
> revealer {
3716
padding: 0 8px;
3717
}
3718
&:selected {
3720
$background-color: overlay("activated", $primary);
3721
color: $primary;
3722
font-weight: 500;
3723
@include ink-color($primary, $on: $background-color, $hover-alt: true);
3724
image.sidebar-icon {
3726
color: $primary;
3727
}
3728
}
3729
&:disabled {
3731
color: disabled($on-surface);
3732
}
3733
image.sidebar-icon {
3735
&:dir(ltr) {
3736
padding-right: 8px;
3737
}
3738
&:dir(rtl) {
3740
padding-left: 8px;
3741
}
3742
}
3743
label.sidebar-label {
3745
&:dir(ltr) {
3746
padding-right: 2px;
3747
}
3748
&:dir(rtl) {
3750
padding-left: 2px;
3751
}
3752
}
3753
@at-root button.sidebar-button {
3755
@extend %button-flat-basic;
3756
@extend %button-small;
3757
}
3758
&.sidebar-placeholder-row {
3760
background-color: overlay("hover", $on-surface);
3761
}
3762
&.sidebar-new-bookmark-row {
3764
color: $primary;
3765
image.sidebar-icon {
3767
color: $primary;
3768
}
3769
}
3770
}
3771
}
3772
placesview {
3774
.server-list-button {
3775
> image {
3776
-gtk-icon-transform: rotate(-.5turn);
3777
}
3778
&:checked > image {
3780
-gtk-icon-transform: rotate(0turn);
3781
}
3782
}
3783
// this selects the "connect to server" label
3785
> actionbar > revealer > box > label {
3786
padding-left: 8px;
3787
padding-right: 8px;
3788
}
3789
}
3790
/**
3792
* Paned
3793
*/
3794
paned {
3796
> separator {
3797
min-width: 1px;
3798
min-height: 1px;
3799
-gtk-icon-source: none; // defeats the ugly default handle decoration
3800
border-style: none; // just to be sure
3801
background-color: transparent;
3802
// workaround, using background istead of a border since the border will get rendered twice (?)
3803
background-image: image(divider($on-surface));
3804
background-size: 1px 1px;
3805
background-clip: content-box; // avoids borders image being rendered twice (?)
3806
&.wide {
3808
min-width: 6px;
3809
min-height: 6px;
3810
// background-color: $background;
3811
background-image: image(divider($on-surface)), image(divider($on-surface));
3812
background-size: 1px 1px, 1px 1px;
3813
}
3814
}
3815
&.horizontal > separator {
3817
background-repeat: repeat-y;
3818
&:dir(ltr) {
3820
margin: 0 -8px 0 0;
3821
padding: 0 8px 0 0;
3822
background-position: left;
3823
}
3824
&:dir(rtl) {
3826
margin: 0 0 0 -8px;
3827
padding: 0 0 0 8px;
3828
background-position: right;
3829
}
3830
&.wide {
3832
margin: 0;
3833
padding: 0;
3834
background-repeat: repeat-y, repeat-y;
3835
background-position: left, right;
3836
}
3837
}
3838
&.vertical > separator {
3840
margin: 0 0 -8px 0;
3841
padding: 0 0 8px 0;
3842
background-repeat: repeat-x;
3843
background-position: top;
3844
&.wide {
3846
margin: 0;
3847
padding: 0;
3848
background-repeat: repeat-x, repeat-x;
3849
background-position: bottom, top;
3850
}
3851
}
3852
}
3853
/**
3855
* GtkInfoBar
3856
*/
3857
infobar {
3859
border-style: none;
3860
&.action:hover > revealer > box {
3862
background-image: image(overlay("hover", $on-surface));
3863
}
3864
&.info > revealer > box,
3866
&.question > revealer > box {
3867
border-bottom: 1px solid divider($on-surface);
3868
// background-color: $base;
3869
button {
3871
@extend %button-flat;
3872
&.text-button:not(:disabled) {
3874
color: $primary;
3875
@include ink-color($primary, $button-style: "flat");
3876
}
3877
}
3878
}
3879
&.warning > revealer > box {
3881
background-color: $warning;
3882
color: $on-warning;
3883
button.flat {
3885
color: $on-warning;
3886
@include ink-color($on-warning, $button-style: "flat");
3887
}
3888
selection {
3890
}
3891
*:link {
3893
color: $on-warning;
3894
}
3895
}
3896
&.error > revealer > box {
3898
background-color: $error;
3899
color: $on-error;
3900
button.flat {
3902
color: $on-error;
3903
@include ink-color($on-error, $button-style: "flat");
3904
}
3905
selection {
3907
}
3908
*:link {
3910
color: $on-error;
3911
}
3912
}
3913
// Remove ugly hard-coded padding
3915
button label {
3916
margin: 0 -4px;
3917
}
3918
}
3919
/**
3921
* Tooltips
3922
*/
3923
tooltip {
3925
&.background {
3926
// background-color needs to be set this way otherwise it gets drawn twice
3927
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3928
background-color: $tooltip;
3929
color: $on-tooltip;
3930
}
3931
// padding: 4px; /* not working */
3933
border-radius: $corner-radius;
3934
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3935
&:not(.csd):not(.unity-csd) {
3937
// border: 1px solid divider($on-surface);
3938
// border-radius: $corner-radius + 1px;
3939
}
3940
// FIXME: we need a border or tooltips vanish on black background.
3942
decoration {
3943
background-color: transparent;
3944
}
3945
> box {
3947
margin: -6px; // Remove hard-coded 6px margin
3948
min-height: 32px - 4px * 2;
3949
padding: 4px 8px;
3950
}
3951
.dim-label {
3953
color: hint($on-tooltip);
3954
}
3955
* {
3957
// workaround for Eclipse.
3958
// do not include any declaration here.
3959
}
3960
}
3961
/**
3963
* Color Chooser
3964
*/
3965
colorswatch {
3967
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3968
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3969
// applied to the overlay box.
3970
// base color corners rounding
3972
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3973
// sports a bigger radius.
3974
// nth-child is needed by the custom color strip.
3975
&.top {
3977
border-top-left-radius: $corner-radius + .5px;
3978
border-top-right-radius: $corner-radius + .5px;
3979
overlay {
3981
border-top-left-radius: $corner-radius;
3982
border-top-right-radius: $corner-radius;
3983
}
3984
}
3985
&.bottom {
3987
border-bottom-left-radius: $corner-radius + .5px;
3988
border-bottom-right-radius: $corner-radius + .5px;
3989
overlay {
3991
border-bottom-left-radius: $corner-radius;
3992
border-bottom-right-radius: $corner-radius;
3993
}
3994
}
3995
&.left,
3997
&:first-child:not(.top) {
3998
border-top-left-radius: $corner-radius + .5px;
3999
border-bottom-left-radius: $corner-radius + .5px;
4000
overlay {
4002
border-top-left-radius: $corner-radius;
4003
border-bottom-left-radius: $corner-radius;
4004
}
4005
}
4006
&.right,
4008
&:last-child:not(.bottom) {
4009
border-top-right-radius: $corner-radius + .5px;
4010
border-bottom-right-radius: $corner-radius + .5px;
4011
overlay {
4013
border-top-right-radius: $corner-radius;
4014
border-bottom-right-radius: $corner-radius;
4015
}
4016
}
4017
&.dark {
4019
color: $on-dark;
4020
}
4021
&.light {
4023
color: $on-light;
4024
}
4025
overlay {
4027
transition: $transition-shadow;
4028
box-shadow: $shadow-z1;
4029
&:drop(active),
4031
&:hover {
4032
box-shadow: $shadow-z3;
4033
}
4034
}
4035
&#add-color-button {
4037
border-radius: $corner-radius $corner-radius 0 0;
4038
color: $on-surface;
4039
&:only-child {
4041
border-radius: $corner-radius;
4042
}
4043
overlay {
4045
background-color: $surface;
4046
}
4047
}
4048
&:disabled {
4050
opacity: .5;
4051
overlay {
4053
box-shadow: none;
4054
}
4055
}
4056
row:selected & {
4058
}
4059
&#editor-color-sample {
4061
border-radius: $corner-radius + .5px;
4062
overlay {
4064
border-radius: $corner-radius;
4065
&:hover {
4067
// box-shadow: $shadow-z1;
4068
}
4069
}
4070
}
4071
}
4072
// colorscale popup
4074
colorchooser .popover.osd {
4075
transition: $transition-shadow;
4076
border-radius: $corner-radius;
4077
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
4078
background-color: $surface;
4079
&:backdrop {
4081
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
4082
}
4083
}
4084
/**
4086
* Misc
4087
*/
4088
// content view (grid/list)
4090
.content-view {
4091
// background-color: $background;
4092
&:hover {
4094
// -gtk-icon-effect: highlight;
4095
}
4096
rubberband,
4098
.rubberband {
4099
@extend %rubberband;
4100
}
4101
}
4102
.scale-popup {
4104
.osd & {
4105
// @extend %osd;
4106
// FIXME: quick hack, redo properly
4108
button.flat {
4109
}
4110
}
4111
// +/- buttons on GtkVolumeButton popup
4113
button {
4114
}
4115
}
4116
/**
4118
* Window Decorations
4119
*/
4120
decoration {
4122
transition: $transition-shadow;
4123
border-radius: $corner-radius $corner-radius 0 0;
4124
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4125
// FIXME rationalize shadows
4127
// this is used for the resize cursor area
4129
margin: 8px;
4130
&:backdrop {
4132
// the transparent shadow here is to enforce that the shadow extents don't
4133
// change when we go to backdrop, to prevent jumping windows.
4134
// The biggest shadow should be in the same order then in the active state
4135
// or the jumping will happen during the transition.
4136
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4137
}
4138
.maximized &,
4140
.fullscreen &,
4141
.tiled &,
4142
.tiled-top &,
4143
.tiled-right &,
4144
.tiled-bottom &,
4145
.tiled-left & {
4146
border-radius: 0;
4147
}
4148
.popup & {
4150
box-shadow: none;
4151
}
4152
// server-side decorations as used by mutter
4154
.ssd & {
4155
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4156
}
4157
.csd.popup & {
4159
border-radius: $corner-radius;
4160
box-shadow: $shadow-z4;
4161
}
4162
tooltip.csd & {
4164
border-radius: $corner-radius;
4165
box-shadow: none;
4166
}
4167
messagedialog.csd & {
4169
border-radius: $corner-radius;
4170
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4171
&:backdrop {
4173
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4174
}
4175
}
4176
.solid-csd & {
4178
margin: 0;
4179
padding: 2px;
4180
border-radius: 0;
4181
box-shadow: none;
4182
box-shadow: inset 0 1px highlight($titlebar);
4183
background-color: $titlebar;
4184
&:backdrop {
4186
background-color: $titlebar-backdrop;
4187
}
4188
}
4189
}
4190
// Window Close button
4192
button.titlebutton {
4193
border-radius: $circular-radius;
4194
.selection-mode & {
4196
}
4197
}
4198
// catch all extend :)
4201
.monospace {
4203
font-family: monospace;
4204
}
4205
/**
4207
* Touch Copy & Paste
4208
*/
4209
// touch selection handlebars for the Popover.osd above
4211
cursor-handle {
4212
color: $primary;
4213
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4214
&.top:dir(ltr),
4216
&.bottom:dir(rtl) {
4217
-gtk-icon-transform: rotate(90deg);
4218
}
4219
&.bottom:dir(ltr),
4221
&.top:dir(rtl) {
4222
-gtk-icon-transform: unset;
4223
}
4224
&.insertion-cursor:dir(ltr),
4226
&.insertion-cursor:dir(rtl) {
4227
padding-top: 6px;
4228
-gtk-icon-transform: rotate(45deg);
4229
}
4230
}
4231
// Decouple the font of context menus from their entry/textview
4233
.context-menu {
4234
font: initial;
4235
}
4236
// shortcut window keys
4238
.keycap {
4239
min-width: 28px - 8px * 2;
4240
min-height: 28px - 2px;
4241
margin-top: 2px;
4242
padding-bottom: 2px;
4243
padding-left: 8px;
4244
padding-right: 8px;
4245
border: solid 1px divider($on-surface);
4247
border-radius: $corner-radius + 1px;
4248
box-shadow: inset 0 -2px divider($on-surface);
4249
background-clip: padding-box;
4250
background-color: $surface;
4251
color: $on-surface;
4252
font-size: smaller;
4253
}
4254
// FIXME needs to be done widget by widget, this wildcard should really die
4256
:not(decoration):not(window):drop(active) {
4257
// caret-color: $primary;
4258
}
4259
// FIXME aggregate with buttons
4261
stackswitcher button.text-button {
4262
min-width: 100px;
4263
}
4264
// FIXME aggregate with buttons
4266
stackswitcher button.circular,
4267
stackswitcher button.text-button.circular {
4268
min-width: $medium-size;
4269
min-height: $medium-size;
4270
padding: 0;
4271
}
4272
/**
4274
* App Icons
4275
*/
4276
// Outline for low res icons
4278
.lowres-icon {
4279
// -gtk-icon-shadow: none;
4280
}
4281
// Drapshadow for large icons
4283
.icon-dropshadow {
4284
// -gtk-icon-shadow: none;
4285
}
4286
/**
4288
* Emoji
4289
*/
4290
popover.emoji-picker {
4292
padding: 0;
4293
entry {
4295
border-bottom: 1px solid divider($on-surface);
4296
border-image: none;
4297
border-radius: 0;
4298
box-shadow: none;
4299
background-color: transparent;
4300
}
4301
scrolledwindow {
4303
border-bottom: 1px solid divider($on-surface);
4304
}
4305
}
4306
button.emoji-section {
4308
margin: 4px;
4309
&:not(:last-child) {
4311
margin-right: 0;
4312
}
4313
}
4314
popover.emoji-picker .emoji {
4316
min-width: 3em;
4317
min-height: 3em;
4318
padding: 0 8px;
4319
// font-size: larger;
4320
widget {
4322
transition: $transition;
4323
border-radius: $corner-radius;
4324
&:hover {
4326
background-color: overlay("hover", $on-surface);
4327
}
4328
}
4329
}
4330
popover.emoji-completion {
4332
padding: 8px 0;
4333
arrow {
4335
border: none;
4336
background: none;
4337
}
4338
.emoji-completion-row {
4340
min-height: $menuitem-size;
4341
padding: 0 12px;
4342
}
4343
.emoji:hover {
4345
background-color: overlay("hover", $on-surface);
4346
}
4347
}
4348