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
background-color: $surface;
549
color: $on-surface;
550
font-weight: 500;
551
@extend %ripple;
553
@include ink-color($on-surface, $elevation: true);
554
&:disabled {
556
box-shadow: none;
557
background-color: fill($on-surface);
558
color: disabled($on-surface);
559
}
560
&:checked {
562
background-color: overlay("activated", $primary, $on: $surface);
563
color: $primary;
564
@include ink-color($primary, $elevation: true);
565
&:disabled {
567
box-shadow: none;
568
background-color: overlay("activated", $on-surface, $on: fill($on-surface));
569
color: disabled($on-surface);
570
}
571
}
572
&.text-button {
574
min-width: 64px - 16px * 2;
575
padding-left: 16px;
576
padding-right: 16px;
577
}
578
&.image-button {
580
min-width: 24px;
581
padding: ($medium-size - 24px) / 2;
582
border-radius: $circular-radius;
583
}
584
// NOTE: Some image-only buttons use this as well
586
&.text-button.image-button {
587
min-width: 24px;
588
padding: ($medium-size - 24px) / 2;
589
border-radius: $corner-radius;
590
label {
592
&:first-child {
593
margin-left: 16px - ($medium-size - 24px) / 2;
594
}
595
&:last-child {
597
margin-right: 16px - ($medium-size - 24px) / 2;
598
}
599
}
600
image:not(:only-child) {
602
margin: 0 (24px - 16px) / 2;
603
}
604
}
605
.linked:not(.vertical) > & {
607
@extend %linked;
608
&.image-button:not(.text-button) {
610
@extend %linked-image-button;
611
}
612
}
613
.linked.vertical > & {
615
@extend %linked-vertical;
616
&.image-button:not(.text-button) {
618
@extend %linked-vertical-image-button;
619
}
620
}
621
}
622
%button-flat-basic {
624
background-color: transparent;
625
color: hint($on-surface);
626
@include ink-color($on-surface);
627
&:disabled {
629
background-color: transparent;
630
color: disabled-hint($on-surface);
631
}
632
}
633
%button-flat-activatable {
635
@extend %button-flat-basic;
636
&:checked {
638
background-color: overlay("activated", $primary);
639
color: $primary;
640
@include ink-color($primary);
641
&:disabled {
643
color: disabled($on-surface);
644
}
645
}
646
}
647
%button-flat,
649
button.flat {
650
@extend %button-flat-activatable;
651
&.text-button {
653
min-width: 64px - 8px * 2;
654
padding-left: 8px;
655
padding-right: 8px;
656
}
657
&.text-button.image-button {
659
min-width: 24px;
660
padding: ($medium-size - 24px) / 2;
661
label {
663
&:first-child {
664
margin-left: 12px - ($medium-size - 24px) / 2;
665
}
666
&:last-child {
668
margin-right: 12px - ($medium-size - 24px) / 2;
669
}
670
}
671
}
672
.linked:not(.vertical) > &,
674
.linked.vertical > & {
675
&:not(:only-child) { // specificity bump
676
border-radius: $corner-radius;
677
&.image-button:not(.text-button) {
679
border-radius: $circular-radius;
680
}
681
}
682
}
683
}
684
button {
686
// big standalone buttons like in Documents pager
687
&.osd {
688
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
689
&.image-button {
691
padding: ($large-size - 24px) / 2;
692
}
693
&:disabled {
695
opacity: 0;
696
}
697
}
698
// overlay / OSD style
700
@at-root %osd_button,
701
.osd & {
702
}
703
// Suggested and Destructive Action buttons
705
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
706
&#{$class} {
707
background-color: $color;
708
color: on($color);
709
@include ink-color(on($color), $elevation: true);
710
&:disabled {
712
box-shadow: none;
713
background-color: fill($on-surface);
714
color: disabled($on-surface);
715
}
716
&:checked {
718
background-color: overlay("activated", on($color), $on: $color);
719
}
720
&.flat {
722
background-color: transparent;
723
color: $color;
724
@include ink-color($color);
725
&:disabled {
727
box-shadow: none;
728
background-color: transparent;
729
color: disabled-hint($on-surface);
730
}
731
&:checked {
733
background-color: overlay("activated", $color);
734
}
735
}
736
.osd & {
738
}
739
}
740
}
741
.stack-switcher > & {
743
// to position the needs attention dot, padding is added to the button
744
// child, a label needs just lateral padding while an icon needs vertical
745
// padding added too.
746
> label {
748
margin: 0 -6px;
749
padding: 0 6px;
750
}
751
> image {
753
margin: -3px -6px;
754
padding: 3px 6px;
755
}
756
&.needs-attention {
758
> label,
759
> image {
760
@extend %needs-attention;
761
}
762
&:checked {
764
> label,
765
> image {
766
animation: none;
767
background-image: none;
768
}
769
}
770
}
771
}
772
// hide separators
774
&.font,
775
&.file {
776
separator {
777
@extend %hide_separators;
778
}
779
}
780
&.font {
782
> box > box > label {
783
// font-weight: bold;
784
}
785
}
786
// inline-toolbar buttons
788
.inline-toolbar & {
789
// @extend %button-flat;
790
&:not(.text-button) {
792
border-radius: $circular-radius;
793
}
794
}
795
.primary-toolbar & {
797
-gtk-icon-shadow: none; // tango icons don't need shadows
798
}
799
&.close,
801
&.circular { // The Bloody Circul Button
802
border-radius: $circular-radius;
803
label {
805
// padding: 0;
806
}
807
}
808
}
809
%button-small {
811
min-height: $small-size;
812
min-width: $small-size;
813
padding: 0;
814
border-radius: $circular-radius;
815
}
816
%needs-attention {
818
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
819
background-repeat: no-repeat;
820
background-position: right 3px;
821
background-size: 6px 6px;
822
&:dir(rtl) {
824
background-position: left 3px;
825
}
826
}
827
// all the following is for the +|- buttons on inline toolbars, that way
829
// should really be deprecated...
830
.inline-toolbar toolbutton > button {
831
}
832
// More inline toolbar buttons
834
toolbar.inline-toolbar toolbutton {
835
&:not(:first-child) > button.flat {
836
// @extend %linked-not-first-child;
837
}
838
&:not(:last-child) > button.flat {
840
// @extend %linked-not-last-child;
841
}
842
}
843
%linked-not-first-child {
845
border-top-left-radius: 0;
846
border-bottom-left-radius: 0;
847
}
848
%linked-not-last-child {
850
border-top-right-radius: 0;
851
border-bottom-right-radius: 0;
852
}
853
%linked {
855
&:not(:first-child) {
856
@extend %linked-not-first-child;
857
}
858
&:not(:last-child) {
860
@extend %linked-not-last-child;
861
}
862
}
863
%linked-vertical-not-first-child {
865
border-top-left-radius: 0;
866
border-top-right-radius: 0;
867
}
868
%linked-vertical-not-last-child {
870
border-bottom-left-radius: 0;
871
border-bottom-right-radius: 0;
872
}
873
%linked-vertical {
875
&:not(:first-child) {
876
@extend %linked-vertical-not-first-child;
877
}
878
&:not(:last-child) {
880
@extend %linked-vertical-not-last-child;
881
}
882
}
883
%linked-image-button {
885
&:first-child {
886
border-top-left-radius: $corner-radius;
887
border-bottom-left-radius: $corner-radius;
888
}
889
&:last-child {
891
border-top-right-radius: $corner-radius;
892
border-bottom-right-radius: $corner-radius;
893
}
894
&:only-child {
896
border-radius: $circular-radius;
897
}
898
}
899
%linked-vertical-image-button {
901
&:first-child {
902
border-top-left-radius: $corner-radius;
903
border-top-right-radius: $corner-radius;
904
}
905
&:last-child {
907
border-bottom-left-radius: $corner-radius;
908
border-bottom-right-radius: $corner-radius;
909
}
910
&:only-child {
912
border-radius: $circular-radius;
913
}
914
}
915
/* menu buttons */
917
modelbutton.flat,
918
.menuitem.button.flat {
919
min-height: $menuitem-size;
920
padding: 0 8px;
921
border-radius: $corner-radius;
922
@extend %ripple;
924
@include ink-color($on-surface);
925
&:selected {
927
background-color: $overlay-selected;
928
}
929
}
930
modelbutton.flat arrow {
932
transition: color $duration $ease-out;
933
color: hint($on-surface);
934
&:disabled {
936
color: disabled-hint($on-surface);
937
}
938
&.left {
940
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
941
}
942
&.right {
944
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
945
}
946
}
947
button.color {
949
min-height: $small-size;
950
min-width: $small-size;
951
padding: $container-padding;
952
colorswatch:only-child {
954
&,
955
overlay {
956
// border-radius: 0;
957
}
958
}
959
}
960
/**
962
* Links
963
*/
964
*:link {
966
color: $primary;
967
&:disabled {
969
color: disabled($on-surface);
970
}
971
}
972
*:visited {
974
color: $visited;
975
&:disabled {
977
color: disabled($on-surface);
978
}
979
}
980
button.link {
982
&:link {
983
color: $primary;
984
@include ink-color($primary);
985
}
986
&:visited {
988
color: $visited;
989
@include ink-color($visited);
990
}
991
&:disabled {
993
color: disabled($on-surface);
994
}
995
> label {
997
text-decoration-line: underline;
998
}
999
}
1000
/**
1002
* GtkSpinButton
1003
*/
1004
spinbutton {
1006
&:not(.vertical) {
1007
// in this horizontal configuration, the whole spinbutton
1008
// behaves as the entry, so we extend the entry styling
1009
// and nuke the style on the internal entry
1010
@extend %entry;
1011
padding: 0;
1013
entry {
1015
min-width: $large-size - 8px * 2;
1016
// reset all the other props since the spinbutton node is styled here
1017
margin: 0;
1018
border-image: none;
1019
border-radius: 0;
1020
box-shadow: none;
1021
background-color: transparent;
1022
}
1023
button {
1025
@extend %button-flat-basic;
1026
@extend %button-small;
1027
// margin: $container-padding;
1029
border: solid $container-padding transparent;
1030
background-clip: padding-box;
1031
// Remove unwanted focus indicator
1033
&:focus:not(:hover):not(:active) {
1034
box-shadow: inset 0 0 0 9999px transparent;
1035
}
1036
&.up:dir(ltr),
1038
&.down:dir(rtl) {
1039
margin-left: -$container-padding / 2;
1040
}
1041
&.up:dir(rtl),
1043
&.down:dir(ltr) {
1044
margin-right: -$container-padding / 2;
1045
}
1046
}
1047
}
1048
// OSD horizontal
1050
.osd &:not(.vertical) {
1051
}
1052
// Vertical
1054
&.vertical {
1055
// in the vertical configuration, we treat the spinbutton
1056
// as a box, and tweak the style of the entry in the middle
1057
// so that it's linked
1058
// FIXME: this should not be set at all, but otherwise it gets the wrong
1060
// color
1061
caret-color: $primary;
1062
// FIXME: this should not be set at all, but otherwise it gets the wrong
1064
// color
1065
&:disabled {
1066
color: disabled($on-surface);
1067
}
1068
entry {
1070
@extend %entry_raised;
1071
min-height: $medium-size;
1073
min-width: $large-size;
1074
padding: 0;
1075
}
1076
button {
1078
min-height: $medium-size;
1079
min-width: $large-size;
1080
padding: 0;
1081
@extend %button-flat-basic;
1083
// Remove unwanted focus indicator
1085
&:focus:not(:hover):not(:active) {
1086
box-shadow: inset 0 0 0 9999px transparent;
1087
}
1088
&.up {
1090
border-radius: $corner-radius $corner-radius 0 0;
1091
}
1092
&.down {
1094
border-radius: 0 0 $corner-radius $corner-radius;
1095
}
1096
}
1097
}
1098
// OSD vertical
1100
.osd &.vertical {
1101
}
1102
// Misc
1104
treeview &:not(.vertical) {
1105
min-height: 0;
1106
border-style: none;
1107
border-radius: 0;
1108
entry {
1110
min-height: 0;
1111
padding: 1px 2px;
1112
}
1113
}
1114
}
1115
/**
1117
* ComboBoxes
1118
*/
1119
combobox {
1121
arrow {
1122
transition: -gtk-icon-transform $duration $ease-out;
1123
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1124
min-height: 16px;
1125
min-width: 16px;
1126
}
1127
button.combo:checked arrow {
1129
// color: $primary;
1130
-gtk-icon-transform: rotate(-.5turn);
1131
}
1132
// workaround for menuitem selection
1134
decoration {
1135
transition: none;
1136
}
1137
// remove hard-coded 2px padding
1139
cellview {
1140
margin: -2px;
1141
}
1142
button.combo cellview {
1144
&:dir(ltr) {
1145
margin-left: -2px + 8px - ($medium-size - 16px) / 2;
1146
}
1147
&:dir(rtl) {
1149
margin-right: -2px + 8px - ($medium-size - 16px) / 2;
1150
}
1151
}
1152
menu {
1154
padding: 2px 0;
1155
menuitem {
1157
min-height: $medium-size - 2px * 2;
1158
padding: 0 8px;
1159
}
1160
// overflow arrows
1162
> arrow {
1163
&.top {
1164
margin-top: -2px;
1165
}
1166
&.bottom {
1168
margin-top: 2px * 2;
1169
margin-bottom: -2px * 3;
1170
}
1171
}
1172
}
1173
> .linked:not(.vertical) > entry:not(:only-child) {
1175
border-radius: $corner-radius $corner-radius 0 0;
1176
&:first-child {
1178
margin-right: -$medium-size;
1179
padding-right: $medium-size;
1180
}
1181
&:last-child {
1183
margin-left: -$medium-size;
1184
padding-left: $medium-size;
1185
}
1186
}
1187
> .linked:not(.vertical) > button:not(:only-child) {
1189
@extend %button-flat-basic;
1190
// @extend %button-small;
1191
min-height: 16px;
1193
min-width: 16px;
1194
margin: ($medium-size - $small-size) / 2;
1195
padding: ($small-size - 16px) / 2;
1196
border-radius: $circular-radius;
1197
}
1198
}
1199
// the combo is a composite widget so the way we do button linking doesn't
1201
// work, special case needed. See
1202
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1203
.linked:not(.vertical) > combobox {
1205
&:not(:first-child) > box > button.combo {
1206
@extend %linked-not-first-child;
1207
}
1208
&:not(:last-child) > box > button.combo {
1210
@extend %linked-not-last-child;
1211
}
1212
}
1213
.linked.vertical > combobox {
1215
&:not(:first-child) > box > button.combo {
1216
@extend %linked-vertical-not-first-child;
1217
}
1218
&:not(:last-child) > box > button.combo {
1220
@extend %linked-vertical-not-last-child;
1221
}
1222
}
1223
button.combo:only-child {
1225
border-radius: $corner-radius $corner-radius 0 0;
1226
font-weight: normal;
1227
@include entry(normal);
1229
&:focus {
1231
@include entry(focus);
1232
}
1233
&:drop(active),
1235
&:hover {
1236
@include entry(hover);
1237
}
1238
&:checked {
1240
@include entry(checked);
1241
}
1242
&:disabled {
1244
@include entry(disabled);
1245
}
1246
arrow {
1248
transition: color $duration $ease-out;
1249
color: hint($on-surface);
1250
&:disabled {
1252
color: disabled-hint($on-surface);
1253
}
1254
}
1255
}
1256
/**
1258
* Toolbars
1259
*/
1260
toolbar {
1262
-GtkWidget-window-dragging: true;
1263
padding: 2px;
1264
button {
1266
@extend %button-flat;
1267
}
1268
// on OSD
1270
.osd & {
1271
}
1272
// stand-alone OSD toolbars
1274
&.osd {
1275
@extend %toolbar-osd;
1276
// positional classes for `attached` osd toolbars
1278
&.left,
1279
&.right,
1280
&.top,
1281
&.bottom {
1282
border-radius: 0;
1283
}
1284
&.bottom {
1286
box-shadow: none;
1287
background-color: transparent;
1288
background-image:
1289
linear-gradient(
1290
to bottom,
1291
transparent,
1292
rgba(black, .1) 30%,
1293
rgba(black, .2) 50%,
1294
rgba(black, .4)
1295
);
1296
}
1297
}
1298
// toolbar separators
1300
&.horizontal > separator {
1301
margin: 2px;
1302
}
1303
&.vertical > separator {
1305
margin: 2px;
1306
}
1307
&:not(.inline-toolbar):not(.osd) {
1309
scale,
1310
entry,
1311
spinbutton,
1312
button {
1313
margin: 2px;
1314
}
1315
.linked entry,
1317
.linked spinbutton,
1318
.linked button {
1319
&:not(:first-child) {
1320
margin-left: 0;
1321
}
1322
&:not(:last-child) {
1324
margin-right: 0;
1325
}
1326
}
1327
spinbutton {
1329
entry,
1330
button {
1331
margin: 0;
1332
}
1333
}
1334
switch {
1336
margin: 2px + $container-padding 2px;
1337
}
1338
}
1339
}
1340
%toolbar-osd {
1342
transition: $transition-shadow;
1343
padding: $container-padding;
1344
border-radius: $corner-radius;
1345
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1346
background-color: $surface;
1347
&:backdrop {
1349
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1350
}
1351
}
1352
// searchbar, location-bar & inline-toolbar
1354
.inline-toolbar {
1355
padding: $container-padding;
1356
border-style: solid;
1357
border-width: 0 1px 1px;
1358
border-color: divider($on-surface);
1359
background-color: $base;
1360
background-clip: padding-box;
1361
}
1362
searchbar > revealer > box,
1364
.location-bar {
1365
padding: $container-padding;
1366
border-style: solid;
1367
border-width: 0 0 1px;
1368
border-color: divider($on-surface);
1369
}
1370
searchbar > revealer > box {
1372
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1373
margin: -6px;
1374
padding: $container-padding;
1375
}
1376
/**
1378
* Header bars
1379
*/
1380
.titlebar {
1382
transition: background-color $duration $ease-out, color $duration $ease-out;
1383
border-radius: $corner-radius $corner-radius 0 0;
1384
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1385
background-color: $titlebar;
1386
color: $on-titlebar;
1387
&:disabled {
1389
color: disabled($on-titlebar);
1390
}
1391
&:backdrop {
1393
background-color: $titlebar-backdrop;
1394
color: hint($on-titlebar);
1395
&:disabled {
1397
color: disabled-hint($on-titlebar);
1398
}
1399
}
1400
.title {
1402
padding-left: 12px;
1403
padding-right: 12px;
1404
font-weight: bold;
1405
}
1406
.subtitle {
1408
padding-left: 12px;
1409
padding-right: 12px;
1410
font-size: smaller;
1411
}
1412
.subtitle,
1414
.dim-label {
1415
transition: color $duration $ease-out;
1416
color: hint($on-titlebar);
1417
&:backdrop {
1419
color: disabled($on-titlebar);
1420
}
1421
}
1422
// Don't draw titlebar above titlebar
1424
.titlebar {
1425
background-color: transparent;
1426
box-shadow: none;
1427
}
1428
// The separator for split headerbars
1430
headerbar + separator {
1431
background-color: divider($on-titlebar);
1432
}
1433
entry {
1435
box-shadow: inset 0 -1px stroke($on-titlebar);
1436
background-color: entry-fill($on-titlebar);
1437
color: $on-titlebar;
1438
&:disabled {
1440
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1441
background-color: entry-fill($on-titlebar);
1442
color: disabled($on-titlebar);
1443
}
1444
image {
1446
color: hint($on-titlebar);
1447
&:hover,
1449
&:active {
1450
color: $on-titlebar;
1451
}
1452
&:disabled {
1454
color: disabled($on-titlebar);
1455
}
1456
}
1457
}
1458
.linked:not(.vertical) > entry:not(:only-child) {
1460
border-radius: $corner-radius $corner-radius 0 0;
1461
}
1462
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1464
@extend %button-flat;
1465
border-image:
1467
radial-gradient(
1468
circle closest-corner at center calc(100% - 1px),
1469
$titlebar-indicator 0%,
1470
transparent 0%
1471
) 0 0 0 / 0 0 0;
1472
background-color: transparent;
1473
color: hint($on-titlebar);
1474
@include ink-color($on-titlebar);
1475
&:disabled {
1477
color: disabled-hint($on-titlebar);
1478
}
1479
@at-root %titlebar-button-checked,
1481
&:checked {
1482
border-image:
1483
radial-gradient(
1484
circle closest-corner at center calc(100% - 1px),
1485
$titlebar-indicator 100%,
1486
transparent 0%
1487
) 0 0 2 / 0 0 2px;
1488
background-color: transparent;
1489
color: $on-titlebar;
1490
@include ink-color($on-titlebar);
1491
&:disabled {
1493
background-color: transparent;
1494
color: disabled($on-titlebar);
1495
}
1496
}
1497
&:backdrop {
1499
color: disabled($on-titlebar);
1500
&:disabled {
1502
color: disabled-hint($on-titlebar);
1503
}
1504
&:checked {
1506
color: hint($on-titlebar);
1507
&:disabled {
1509
color: disabled-hint($on-titlebar);
1510
}
1511
}
1512
}
1513
}
1514
button.suggested-action, button.destructive-action {
1516
&:disabled {
1517
background-color: fill($on-titlebar);
1518
color: disabled($on-titlebar);
1519
}
1520
}
1521
// FIXME: Ugly overriding
1523
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1524
min-width: 120px - 8px * 2;
1525
}
1526
// FIXME: Ugly overriding
1528
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1529
min-width: 0;
1530
padding-left: ($medium-size - 24px) / 2;
1531
padding-right: ($medium-size - 24px) / 2;
1532
}
1533
&.selection-mode {
1535
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1536
// but let's keep it for backwards compatibility.
1537
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1538
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1539
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1540
background-color: $primary;
1541
color: $on-primary;
1542
&:backdrop {
1544
color: hint($on-primary);
1545
}
1546
.subtitle:link {
1548
color: $on-primary;
1549
}
1550
button:not(.suggested-action):not(.destructive-action) {
1552
border-image:
1553
radial-gradient(
1554
circle closest-corner at center calc(100% - 1px),
1555
currentcolor 0%,
1556
transparent 0%
1557
) 0 0 0 / 0 0 0;
1558
color: $on-primary;
1559
&:disabled {
1561
color: disabled($on-primary);
1562
}
1563
&:checked {
1565
border-image:
1566
radial-gradient(
1567
circle closest-corner at center calc(100% - 1px),
1568
currentcolor 100%,
1569
transparent 0%
1570
) 0 0 2 / 0 0 2px;
1571
color: $on-primary;
1572
&:disabled {
1574
color: disabled($on-primary);
1575
}
1576
}
1577
&:backdrop {
1579
color: hint($on-primary);
1580
&:disabled {
1582
color: disabled-hint($on-primary);
1583
}
1584
&:checked {
1586
color: hint($on-primary);
1587
&:disabled {
1589
color: disabled-hint($on-primary);
1590
}
1591
}
1592
}
1593
}
1594
.selection-menu {
1596
padding-left: 16px;
1597
padding-right: 16px;
1598
arrow {
1600
-GtkArrow-arrow-scaling: 1;
1601
}
1602
.arrow {
1604
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1605
}
1606
}
1607
}
1608
.selection-mode {
1610
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1611
background-color: $primary;
1612
}
1613
// squared corners when the window is maximized, tiled, or fullscreen
1615
.tiled &,
1616
.tiled-top &,
1617
.tiled-right &,
1618
.tiled-bottom &,
1619
.tiled-left &,
1620
.maximized &,
1621
.fullscreen & {
1622
border-radius: 0;
1623
box-shadow: $shadow-z1;
1624
}
1625
&.default-decoration {
1627
min-height: $small-size;
1628
padding: $container-padding;
1629
box-shadow: inset 0 1px highlight($titlebar);
1630
.tiled &,
1632
.maximized &,
1633
.fullscreen & {
1634
box-shadow: none;
1635
}
1636
button.titlebutton {
1638
min-height: $small-size;
1639
min-width: $small-size;
1640
margin: 0;
1641
padding: 0;
1642
}
1643
// workaround for non-animatable buttons
1645
.background:not(.csd) & button.titlebutton:active {
1646
background-size: 1000% 1000%;
1647
}
1648
}
1649
.solid-csd & {
1651
&:dir(rtl), &:dir(ltr) { // specificity bump
1652
border-radius: 0;
1653
box-shadow: $shadow-z1; // just remove the highlight
1654
}
1655
}
1656
}
1657
headerbar {
1659
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1660
min-height: $large-size;
1661
padding: 0 $container-padding;
1662
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1664
entry,
1665
spinbutton,
1666
button {
1667
margin-top: $container-padding;
1668
margin-bottom: $container-padding;
1669
}
1670
separator.titlebutton {
1672
margin-top: $large-size / 4;
1673
margin-bottom: $large-size / 4;
1674
background-color: divider($on-titlebar);
1675
}
1676
switch {
1678
margin-top: ($large-size - 24px) / 2;
1679
margin-bottom: ($large-size - 24px) / 2;
1680
}
1681
// reset button margins of the spinbutton
1683
spinbutton button {
1684
margin-top: 0;
1685
margin-bottom: 0;
1686
}
1687
// FIXME: This is a hacky workaround.
1689
.entry-tag {
1690
margin-top: 5px;
1691
margin-bottom: 5px;
1692
}
1693
}
1694
// Development versions of apps to use a differently styled headerbar
1696
window.devel .titlebar:not(.selection-mode) {
1697
}
1698
/**
1700
* Pathbars
1701
*/
1702
%pathbar_button,
1704
.path-bar.linked:not(.vertical) > button {
1705
padding-left: ($medium-size - 24px) / 2;
1706
padding-right: ($medium-size - 24px) / 2;
1707
border-image:
1708
radial-gradient(
1709
circle closest-corner at center calc(100% - 1px),
1710
$primary 0%,
1711
transparent 0%
1712
) 0 0 0 / 0 0 0;
1713
border-radius: $corner-radius;
1714
color: hint($on-surface);
1715
@include ink-color($on-surface, $button-style: "flat");
1716
&:disabled {
1718
background-color: transparent;
1719
color: disabled-hint($on-surface);
1720
}
1721
&:checked {
1723
border-image:
1724
radial-gradient(
1725
circle closest-corner at center calc(100% - 1px),
1726
$primary 100%,
1727
transparent 0%
1728
) 0 0 2 / 0 0 2px;
1729
color: $primary;
1730
@include ink-color($primary, $button-style: "flat");
1731
&:disabled {
1733
background-color: transparent;
1734
color: disabled($on-surface);
1735
}
1736
}
1737
label:not(:only-child) {
1739
&:first-child {
1740
margin-left: 0;
1741
}
1742
&:last-child {
1744
margin-right: 0;
1745
}
1746
}
1747
&.text-button {
1749
min-width: 0;
1750
}
1751
&.slider-button {
1753
padding-left: (24px - 16px) / 2;
1754
padding-right: (24px - 16px) / 2;
1755
}
1756
}
1757
/**
1759
* Tree Views
1760
*/
1761
treeview.view {
1763
@at-root * {
1764
-GtkTreeView-horizontal-separator: 4;
1765
-GtkTreeView-grid-line-width: 1;
1766
-GtkTreeView-grid-line-pattern: '';
1767
-GtkTreeView-tree-line-width: 1;
1768
-GtkTreeView-tree-line-pattern: '';
1769
-GtkTreeView-expander-size: 16;
1770
}
1771
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1773
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1774
// to avoid borders being overridden by the previously set props
1776
rubberband {
1777
@extend %rubberband;
1778
}
1779
&:hover,
1781
&:selected {
1782
border-radius: 0;
1783
}
1784
&.separator {
1786
min-height: 1px + 2px * 2;
1787
color: divider($on-surface);
1788
}
1789
&:drop(active) {
1791
// FIXME: box-shadow, background-color and background-image are not available here.
1792
border-style: solid none;
1793
border-width: 9999px;
1794
border-color: overlay("hover", $on-surface);
1795
&.after {
1797
border-top-style: none;
1798
}
1799
&.before {
1801
border-bottom-style: none;
1802
}
1803
}
1804
&.expander {
1806
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1807
-gtk-icon-transform: rotate(-90deg);
1808
&:dir(rtl) {
1810
-gtk-icon-transform: rotate(90deg);
1811
}
1812
&:checked {
1814
-gtk-icon-transform: unset;
1815
}
1816
color: hint($on-surface);
1818
&:hover,
1820
&:active {
1821
color: $on-surface;
1822
}
1823
&:disabled {
1825
color: disabled-hint($on-surface);
1826
}
1827
}
1828
&.progressbar { // progress bar in treeviews
1830
border-bottom: $bar-size solid $primary;
1831
box-shadow: none;
1832
background-color: transparent;
1833
background-image: none;
1834
&:selected:hover {
1836
box-shadow: none;
1837
}
1838
}
1839
&.trough { // progress bar trough in treeviews
1841
border-bottom: $bar-size solid disabled-stroke($on-surface);
1842
box-shadow: none;
1843
background-color: transparent;
1844
background-image: none;
1845
&:selected:hover {
1847
box-shadow: none;
1848
}
1849
}
1850
header {
1852
button {
1853
padding: 2px 6px;
1854
border-style: none solid solid none;
1855
border-width: 1px;
1856
border-color: divider($on-surface);
1857
border-radius: 0;
1858
background-clip: border-box;
1859
color: hint($on-surface);
1860
@include ink-color($on-surface, $hover-alt: true);
1861
@include list-item;
1862
&:disabled {
1864
color: disabled-hint($on-surface);
1865
}
1866
&,
1868
&:disabled {
1869
background-color: transparent;
1870
}
1871
&:last-child {
1873
border-right-style: none;
1874
}
1875
}
1876
}
1877
button.dnd,
1879
header.button.dnd { // for treeview-like derive widgets
1880
padding: 2px 6px;
1881
border-style: none solid solid;
1882
border-width: 1px;
1883
border-color: divider($on-surface);
1884
border-radius: 0;
1885
box-shadow: none;
1886
background-clip: border-box;
1887
background-color: $surface;
1888
color: $primary;
1889
}
1890
// see tests/testaccel to test
1892
acceleditor > label {
1893
background-color: $primary;
1894
}
1895
}
1896
/**
1898
* Menus
1899
*/
1900
menubar,
1902
.menubar {
1903
-GtkWidget-window-dragging: true;
1904
padding: 0;
1905
// box-shadow: inset 0 -1px divider($on-surface);
1906
background-color: $titlebar;
1907
color: $on-titlebar;
1908
&:backdrop {
1910
background-color: $titlebar-backdrop;
1911
color: hint($on-titlebar);
1912
}
1913
.csd & {
1915
transition: $transition;
1916
}
1917
> menuitem {
1919
transition: $transition;
1920
min-height: 20px;
1921
padding: 4px 8px;
1922
color: hint($on-titlebar);
1923
&:hover { // Seems like it :hover even with keyboard focus
1925
transition: none;
1926
background-color: overlay("activated", $on-titlebar);
1927
color: $on-titlebar;
1928
}
1929
&:disabled {
1931
color: disabled-hint($on-titlebar);
1932
}
1933
}
1934
}
1935
// Needed to make the border-radius of menus work
1937
// otherwise the background bleeds out of the menu edges
1938
.background.popup {
1939
background-color: transparent;
1940
}
1941
menu,
1943
.menu,
1944
.context-menu {
1945
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1946
padding: 4px 0;
1947
box-shadow: inset 0 1px highlight($surface);
1948
background-color: $surface;
1949
border: 1px solid divider($on-surface); // adds borders in a non composited env
1950
.csd & {
1952
border: none; // axes borders in a composited env
1953
border-radius: $corner-radius;
1954
}
1955
menuitem {
1957
transition: background-color $duration $ease-out;
1958
min-height: 20px;
1959
min-width: 40px;
1960
padding: 4px 8px;
1961
color: $on-surface;
1962
font: initial;
1963
text-shadow: none;
1964
&:hover {
1966
transition: none;
1967
background-color: overlay("hover", $on-surface);
1968
}
1969
&:disabled {
1971
color: disabled($on-surface);
1972
}
1973
// submenu indicators
1975
arrow {
1976
min-height: 16px;
1977
min-width: 16px;
1978
color: hint($on-surface);
1979
&:disabled {
1981
color: disabled-hint($on-surface);
1982
}
1983
&:dir(ltr) {
1985
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1986
margin-left: 8px;
1987
}
1988
&:dir(rtl) {
1990
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1991
margin-right: 8px;
1992
}
1993
}
1994
// avoids labels color being overridden, see
1996
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1997
label {
1998
&:dir(rtl),
1999
&:dir(ltr) {
2000
// color: inherit;
2001
}
2002
}
2003
}
2004
// overflow arrows
2006
> arrow {
2007
min-height: 16px;
2008
min-width: 16px;
2009
padding: 4px;
2010
background-color: $surface;
2011
color: hint($on-surface);
2012
&.top {
2014
margin-top: -4px;
2015
border-bottom: 1px solid divider($on-surface);
2016
border-radius: $corner-radius $corner-radius 0 0;
2017
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2018
}
2019
&.bottom {
2021
margin-top: 4px * 2;
2022
margin-bottom: -4px * 3;
2023
border-top: 1px solid divider($on-surface);
2024
border-radius: 0 0 $corner-radius $corner-radius;
2025
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2026
}
2027
&:hover {
2029
background-image: image(overlay("hover", $on-surface));
2030
}
2031
&:disabled {
2033
border-color: transparent;
2034
background-color: transparent;
2035
color: transparent;
2036
// color: disabled-hint($on-surface);
2037
}
2038
}
2039
separator {
2041
margin: 4px 0;
2042
}
2043
}
2044
menuitem {
2046
accelerator {
2047
color: hint($on-surface);
2048
}
2049
&:disabled accelerator {
2051
color: disabled-hint($on-surface);
2052
}
2053
}
2054
/**
2056
* Popovers
2057
*/
2058
popover.background {
2060
transition: $transition-shadow;
2061
padding: 2px;
2062
box-shadow: $shadow-z4; // TODO: this should really have a highlight
2063
background-color: $surface;
2064
&:backdrop {
2066
box-shadow: $shadow-z2;
2067
}
2068
&, .csd & {
2070
border-style: solid;
2071
border-width: 1px;
2072
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
2073
border-radius: $corner-radius + 1px;
2074
background-clip: padding-box;
2075
}
2076
> stack {
2078
margin: -4px; // remove extra padding from menu style popovers
2079
}
2080
> toolbar {
2082
margin: -2px;
2083
}
2084
> list,
2086
> .view,
2087
> toolbar {
2088
border-style: none;
2089
box-shadow: none;
2090
background-color: transparent;
2091
}
2092
&.touch-selection,
2094
&.magnifier,
2095
&.osd {
2096
// @extend %osd;
2097
}
2098
button:not(.suggested-action):not(.destructive-action) {
2100
// @extend %button-flat;
2101
}
2102
.linked:not(.vertical) > entry:not(:only-child) {
2104
// border-radius: $corner-radius $corner-radius 0 0;
2105
}
2106
&.menu button,
2108
button.model {
2109
@extend %button-flat;
2110
min-height: 32px;
2112
padding: 0 8px;
2113
border-radius: $corner-radius;
2114
}
2115
separator {
2117
margin: 4px 0;
2118
}
2119
list separator {
2121
margin: 0;
2122
}
2123
}
2124
/**
2126
* Notebooks
2127
*/
2128
notebook {
2130
&:focus > header > tabs > tab:checked {
2131
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
2132
}
2133
> header {
2135
border-width: 1px;
2136
border-color: divider($on-surface);
2137
&.top {
2139
border-bottom-style: solid;
2140
> tabs {
2142
margin-bottom: -1px;
2143
> tab {
2145
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2146
&:checked {
2148
border-image-source: linear-gradient(to top, $primary 2px, divider($on-surface) 2px);
2149
}
2150
&.reorderable-page {
2152
border-image-width: 0 1px 2px;
2153
}
2154
}
2155
}
2156
}
2157
&.bottom {
2159
border-top-style: solid;
2160
> tabs {
2162
margin-top: -1px;
2163
> tab {
2165
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2166
&:checked {
2168
border-image-source: linear-gradient(to bottom, $primary 2px, divider($on-surface) 2px);
2169
}
2170
&.reorderable-page {
2172
border-image-width: 2px 1px 0;
2173
}
2174
}
2175
}
2176
}
2177
&.left {
2179
border-right-style: solid;
2180
> tabs {
2182
margin-right: -1px;
2183
> tab {
2185
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2186
&:checked {
2188
border-image-source: linear-gradient(to left, $primary 2px, divider($on-surface) 2px);
2189
}
2190
&.reorderable-page {
2192
border-image-width: 1px 2px 1px 0;
2193
}
2194
}
2195
}
2196
}
2197
&.right {
2199
border-left-style: solid;
2200
> tabs {
2202
margin-left: -1px;
2203
> tab {
2205
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2206
&:checked {
2208
border-image-source: linear-gradient(to right, $primary 2px, divider($on-surface) 2px);
2209
}
2210
&.reorderable-page {
2212
border-image-width: 1px 0 1px 2px;
2213
}
2214
}
2215
}
2216
}
2217
&.top > tabs > arrow {
2219
@extend %notebook_vert_arrows;
2220
border-top-style: none;
2222
}
2223
&.bottom > tabs > arrow {
2225
@extend %notebook_vert_arrows;
2226
border-bottom-style: none;
2228
}
2229
@at-root %notebook_vert_arrows {
2231
padding-left: 4px;
2232
padding-right: 4px;
2233
&.down {
2235
margin-left: -8px;
2236
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2237
}
2238
&.up {
2240
margin-right: -8px;
2241
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2242
}
2243
}
2244
&.left > tabs > arrow {
2246
@extend %notebook_horz_arrows;
2247
border-left-style: none;
2249
}
2250
&.right > tabs > arrow {
2252
@extend %notebook_horz_arrows;
2253
border-right-style: none;
2255
}
2256
@at-root %notebook_horz_arrows {
2258
padding-top: 4px;
2259
padding-bottom: 4px;
2260
&.down {
2262
margin-top: -8px;
2263
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2264
}
2265
&.up {
2267
margin-bottom: -8px;
2268
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2269
}
2270
}
2271
> tabs > arrow {
2273
min-height: 16px;
2274
min-width: 16px;
2275
border-radius: 0;
2276
color: hint($on-surface);
2277
@extend %ripple;
2278
@include ink-color($on-surface, $hover-alt: true);
2279
&:disabled {
2281
color: disabled-hint($on-surface);
2282
}
2283
}
2284
tab {
2286
transition: $transition,
2287
background-size 0ms,
2288
background-image 0ms;
2289
min-height: $small-size;
2290
min-width: $small-size;
2291
padding: $container-padding 12px;
2292
border-width: 1px; // for reorderable tabs
2294
border-color: transparent; //
2295
outline: none;
2297
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2298
background-repeat: no-repeat;
2299
background-position: center;
2300
background-size: 0% 0%;
2301
color: hint($on-surface);
2303
font-weight: 500;
2304
&:hover {
2306
background-color: overlay("hover-alt", $on-surface);
2307
}
2308
&:disabled {
2310
color: disabled-hint($on-surface);
2311
}
2312
&:checked {
2314
transition: $transition,
2315
background-size $ripple-fade-in-duration $ease-out,
2316
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2317
background-color: transparent;
2318
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2319
background-size: 1000% 1000%;
2320
background-clip: padding-box;
2321
color: $on-surface;
2322
&:disabled {
2324
color: disabled($on-surface);
2325
}
2326
&.reorderable-page {
2328
border-color: divider($on-surface);
2329
background-color: $base;
2330
}
2331
}
2332
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2334
> box {
2335
transition: background-color $duration $ease-out;
2336
margin: -$container-padding -12px;
2337
padding: $container-padding 12px;
2338
&:drop(active) {
2340
background-color: overlay("hover", $on-surface);
2341
}
2342
}
2343
// colors the button like the label, overridden otherwise
2345
button.flat {
2346
@extend %button-small;
2347
&:last-child {
2349
margin-left: $container-padding;
2350
margin-right: $container-padding - 12px;
2351
}
2352
&:first-child {
2354
margin-left: $container-padding - 12px;
2355
margin-right: $container-padding;
2356
}
2357
}
2358
}
2359
&.top,
2361
&.bottom {
2362
tabs {
2363
padding-left: 8px;
2364
padding-right: 8px;
2365
&:not(:only-child) {
2367
&:first-child {
2368
margin-left: 0;
2369
}
2370
&:last-child {
2372
margin-right: 0;
2373
}
2374
}
2375
tab.reorderable-page {
2377
border-style: none solid;
2378
}
2379
}
2380
}
2381
&.left,
2383
&.right {
2384
tabs {
2385
padding-top: 8px;
2386
padding-bottom: 8px;
2387
&:not(:only-child) {
2389
&:first-child {
2390
margin-top: 0;
2391
}
2392
&:last-child {
2394
margin-bottom: 0;
2395
}
2396
}
2397
tab.reorderable-page {
2399
border-style: solid none;
2400
}
2401
}
2402
}
2403
}
2404
}
2405
/**
2407
* Scrollbars
2408
*/
2409
scrollbar {
2411
$_slider_min_length: 24px;
2412
// disable steppers
2414
@at-root * {
2415
-GtkScrollbar-has-backward-stepper: false;
2416
-GtkScrollbar-has-forward-stepper: false;
2417
}
2418
transition: $transition;
2420
// background-color: $background;
2421
background-clip: padding-box;
2422
// scrollbar border
2424
&.top { border-bottom: 1px solid divider($on-surface); }
2425
&.bottom { border-top: 1px solid divider($on-surface); }
2426
&.left { border-right: 1px solid divider($on-surface); }
2427
&.right { border-left: 1px solid divider($on-surface); }
2428
// slider
2430
slider {
2431
transition: background-color $duration $ease-out;
2432
min-width: 8px;
2433
min-height: 8px;
2434
border: 4px solid transparent;
2435
border-radius: $circular-radius;
2436
background-clip: padding-box;
2437
background-color: disabled($on-surface);
2438
&:hover {
2440
background-color: hint($on-surface);
2441
}
2442
&:active {
2444
background-color: $on-surface;
2445
}
2446
&:disabled {
2448
background-color: disabled-hint($on-surface);
2449
}
2450
}
2451
&.fine-tune {
2453
slider {
2454
min-width: 4px;
2455
min-height: 4px;
2456
}
2457
&.horizontal slider {
2459
margin: 2px 0;
2460
}
2461
&.vertical slider {
2463
margin: 0 2px;
2464
}
2465
}
2466
&.overlay-indicator {
2468
&:not(.fine-tune) slider {
2469
transition-property: background-color, min-height, min-width;
2470
}
2471
&:not(.dragging):not(.hovering) {
2473
border-color: transparent;
2474
background-color: transparent;
2475
slider {
2477
min-width: 4px;
2478
min-height: 4px;
2479
margin: 4px - 1px;
2480
border: 1px solid rgba($base, .3);
2481
}
2482
button {
2484
min-width: 4px;
2485
min-height: 4px;
2486
margin: 4px - 1px;
2487
border: 1px solid rgba($base, .3);
2488
border-radius: $circular-radius;
2489
background-color: disabled($on-surface);
2490
background-clip: padding-box;
2491
-gtk-icon-source: none;
2492
&:disabled {
2494
background-color: disabled-hint($on-surface);
2495
}
2496
}
2497
&.horizontal {
2499
slider {
2500
min-width: $_slider_min_length;
2501
}
2502
button {
2504
min-width: 8px;
2505
}
2506
}
2507
&.vertical {
2509
slider {
2510
min-height: $_slider_min_length;
2511
}
2512
button {
2514
min-height: 8px;
2515
}
2516
}
2517
}
2518
&.dragging,
2520
&.hovering {
2521
background-color: $surface;
2522
}
2523
}
2524
&.horizontal slider {
2526
min-width: $_slider_min_length;
2527
}
2528
&.vertical slider {
2530
min-height: $_slider_min_length;
2531
}
2532
// button styling
2534
button {
2535
@extend %button-flat-basic;
2536
min-width: 16px;
2538
min-height: 16px;
2539
padding: 0;
2540
border-radius: 0;
2541
}
2542
// button icons
2544
&.vertical {
2545
button {
2546
&.down {
2547
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2548
}
2549
&.up {
2551
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2552
}
2553
}
2554
}
2555
&.horizontal {
2557
button {
2558
&.down {
2559
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2560
}
2561
&.up {
2563
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2564
}
2565
}
2566
}
2567
}
2568
/**
2571
* Switch
2572
*/
2573
switch {
2575
transition: all $duration $ease-out;
2576
margin: $container-padding 0;
2577
padding: 0 2px;
2578
border: 5px solid transparent;
2579
border-radius: $circular-radius;
2580
background-color: stroke($on-surface);
2581
background-clip: padding-box;
2582
font-size: 0;
2583
&:checked {
2585
background-color: rgba($primary, .5);
2586
}
2587
&:disabled {
2589
opacity: .5;
2590
}
2591
// hide on/off icons for >=3.24.5
2593
image {
2594
margin: -8px;
2595
-gtk-icon-transform: scale(0);
2596
}
2597
slider {
2599
transition: all $duration $ease-out;
2600
min-width: 20px;
2601
min-height: 20px;
2602
margin: -3px -2px;
2603
border-radius: $circular-radius;
2604
outline: none;
2605
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2606
background-color: $switch-surface;
2607
}
2608
&:hover slider {
2610
box-shadow: 0 0 0 10px overlay("hover", $on-surface), $shadow-z1;
2611
}
2612
&:focus slider {
2614
box-shadow: 0 0 0 10px overlay("focus", $on-surface), $shadow-z1;
2615
}
2616
&:checked slider {
2618
background-color: $primary;
2619
}
2620
&:checked:hover slider {
2622
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2623
}
2624
&:checked:focus slider {
2626
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2627
}
2628
row:selected & {
2630
}
2631
}
2632
/**
2634
* Check and Radio items
2635
*/
2636
// draw regular check and radio items using our PNG assets
2638
// all assets are rendered from assets.svg. never add pngs directly
2639
// selection-mode
2641
.view.content-view.check:not(list),
2642
.content-view:not(list) check {
2643
min-height: 40px;
2644
min-width: 40px;
2645
margin: 0;
2646
padding: 0;
2647
box-shadow: none;
2648
background-color: transparent;
2649
background-image: none;
2650
-gtk-icon-shadow: $icon-shadow-z2;
2651
&:hover,
2653
&:active {
2654
-gtk-icon-shadow: $icon-shadow-z4;
2655
}
2656
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2658
&#{$class} {
2659
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2660
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2662
}
2663
}
2664
}
2665
checkbutton,
2667
radiobutton {
2668
outline: none;
2669
}
2670
checkbutton.text-button,
2672
radiobutton.text-button {
2673
// this is for a nice focus on check and radios text
2674
padding: 2px;
2675
label:not(:only-child) {
2677
margin: 0 4px;
2678
}
2679
}
2680
$check-radio-size: 40px;
2682
check,
2684
radio {
2685
min-height: 24px;
2686
min-width: 24px;
2687
margin: -($check-radio-size - 24px) / 2;
2688
padding: ($check-radio-size - 24px) / 2;
2689
border-radius: $circular-radius;
2690
color: hint($on-surface);
2691
@extend %ripple;
2692
@include ink-color($on-surface);
2693
&:checked,
2695
&:indeterminate {
2696
color: $primary;
2697
@include ink-color($primary);
2698
}
2699
&:disabled {
2701
color: disabled-hint($on-surface);
2702
}
2703
&:only-child {
2705
// margin: -12px;
2706
}
2707
popover modelbutton.flat & {
2709
&,
2710
&:focus,
2711
&:hover,
2712
&:focus:hover,
2713
&:active,
2714
&:disabled {
2715
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2716
box-shadow: none;
2717
background-image: none;
2718
}
2719
&.left:dir(rtl) {
2721
margin-left: -12px;
2722
margin-right: -4px;
2723
}
2724
&.right:dir(ltr) {
2726
margin-left: -4px;
2727
margin-right: -12px;
2728
}
2729
}
2730
menu menuitem & {
2732
transition: none;
2733
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2734
padding: 0;
2735
&:dir(ltr) {
2737
margin-right: 8px;
2738
}
2739
&:dir(rtl) {
2741
margin-left: 8px;
2742
}
2743
&,
2745
&:hover,
2746
&:disabled {
2747
box-shadow: none;
2748
}
2749
}
2750
}
2751
%check,
2753
check {
2754
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2755
&:checked {
2757
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2758
}
2759
&:indeterminate {
2761
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2762
}
2763
}
2764
%radio,
2766
radio {
2767
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2768
&:checked {
2770
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2771
}
2772
&:indeterminate {
2774
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2775
}
2776
border-image-slice: $check-radio-size / 2px;
2778
border-image-width: $check-radio-size / 2;
2779
$radio-indicator-size: 10px / $check-radio-size / 2;
2781
border-image-source:
2783
-gtk-gradient(
2784
radial,
2785
center center, 0,
2786
center center, .001,
2787
to($primary),
2788
to(transparent)
2789
);
2790
&:checked:not(:indeterminate) {
2792
border-image-source:
2793
-gtk-gradient(
2794
radial,
2795
center center, 0,
2796
center center, $radio-indicator-size,
2797
to($primary),
2798
to(transparent)
2799
);
2800
&:disabled {
2802
border-image-source:
2803
-gtk-gradient(
2804
radial,
2805
center center, 0,
2806
center center, $radio-indicator-size,
2807
to(disabled-hint($on-surface)),
2808
to(transparent)
2809
);
2810
}
2811
}
2812
}
2813
%small_check,
2815
menu menuitem check {
2816
min-height: 16px;
2817
min-width: 16px;
2818
border-radius: $corner-radius;
2819
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2820
&:checked {
2822
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2823
}
2824
&:indeterminate {
2826
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2827
}
2828
}
2829
%small_radio,
2831
menu menuitem radio {
2832
min-height: 16px;
2833
min-width: 16px;
2834
border-image: none;
2835
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2836
&:checked {
2838
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2839
}
2840
&:indeterminate {
2842
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2843
}
2844
}
2845
// ANIMATION:
2847
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2848
// the transformation is set on the active state and it get reset on the checked state.
2849
radio:not(:checked):active {
2850
// -gtk-icon-transform: scale(0);
2851
}
2852
// Otherwise, treeview.view styling will be applied...
2854
treeview.view check,
2855
treeview.view radio {
2856
padding: 0;
2857
color: hint($on-surface);
2858
&:checked,
2860
&:indeterminate {
2861
color: $primary;
2862
}
2863
&:disabled {
2865
color: disabled-hint($on-surface);
2866
}
2867
&,
2869
&:hover,
2870
&:selected,
2871
&:selected:hover {
2872
box-shadow: none;
2873
background-color: transparent;
2874
}
2875
}
2876
treeview.view radio:checked {
2878
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2879
border-image: none;
2880
}
2881
/**
2883
* GtkScale
2884
*/
2885
scale {
2887
// sizing
2888
$_marks_length: 8px;
2889
$_marks_distance: 7px;
2890
$trough_size: 2px;
2892
$finetune_trough_size: 4px;
2893
$slider_size: 32px;
2895
$slider_margin: -($slider_size - $trough_size) / 2;
2897
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2898
$color_slider_margin: -($slider_size) * 3 / 4;
2900
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2901
min-height: $trough_size;
2903
min-width: $trough_size;
2904
&.horizontal {
2906
padding: ($medium-size - $trough_size) / 2 12px;
2907
}
2908
&.vertical {
2910
padding: 12px ($medium-size - $trough_size) / 2;
2911
}
2912
// the slider is inside the trough, so to have make it bigger there's a negative margin
2914
slider {
2915
min-height: $slider_size;
2916
min-width: $slider_size;
2917
margin: $slider_margin;
2918
}
2919
// click-and-hold the slider to activate
2921
&.fine-tune {
2922
&.horizontal {
2923
min-height: $finetune_trough_size;
2924
padding-top: ($medium-size - $finetune_trough_size) / 2;
2925
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2926
}
2927
&.vertical {
2929
min-width: $finetune_trough_size;
2930
padding-left: ($medium-size - $finetune_trough_size) / 2;
2931
padding-right: ($medium-size - $finetune_trough_size) / 2;
2932
}
2933
// to make the trough grow in fine-tune mode
2935
slider {
2936
margin: $finetune_slider_margin;
2937
}
2938
}
2939
// the backing bit
2941
trough {
2942
transition: background-color $duration $ease-out;
2943
outline: none;
2944
background-color: stroke($on-surface);
2945
&:disabled {
2947
background-color: disabled-stroke($on-surface);
2948
}
2949
}
2950
// the colored part of the backing bit
2952
highlight {
2953
transition: background-image $duration $ease-out;
2954
background-image: image($primary);
2955
&:disabled {
2957
background-color: $background;
2958
background-image: image(disabled-hint($on-surface));
2959
}
2960
}
2961
// this is another differently styled part of the backing bit, the most relevant use case is for example
2963
// in media player to indicate how much video stream as been cached
2964
fill {
2965
transition: background-color $duration $ease-out;
2966
background-color: stroke($on-surface);
2967
&:disabled {
2969
background-color: transparent;
2970
}
2971
}
2972
slider {
2974
transition: background-color $duration $ease-out,
2975
background-size $ripple-fade-out-duration $ease-out,
2976
background-image $ripple-fade-out-opacity-duration $ease-out;
2977
background-repeat: no-repeat;
2978
background-position: center;
2979
background-size: auto, 1000% 1000%;
2980
border-radius: 50%;
2981
color: $primary;
2982
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2984
&#{$class} {
2985
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2986
background-image:
2988
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2989
radial-gradient(circle, transparent 10%, transparent 0%);
2990
}
2991
}
2992
&:hover {
2994
background-color: overlay("hover", $primary);
2995
}
2996
&:focus {
2998
background-color: overlay("focus", $primary);
2999
}
3000
&:active {
3002
$_url: 'assets/scale-slider#{$asset-suffix}';
3003
transition: background-color $duration $ease-out,
3005
background-size 0ms,
3006
background-image 0ms;
3007
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
3008
background-image:
3009
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
3010
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3011
background-size: auto, 0% 0%;
3012
}
3013
}
3014
marks,
3016
value {
3017
color: hint($on-surface);
3018
}
3019
indicator {
3021
background-color: stroke($on-surface);
3022
color: transparent;
3023
}
3024
//marks margins
3026
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
3027
(horizontal, bottom, bottom, top),
3028
(vertical, top, left, right),
3029
(vertical, bottom, right, left) {
3030
&.#{$scale_orient} marks {
3031
&.#{$marks_class} {
3032
margin-#{$marks_margin}: $_marks_distance;
3033
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
3034
}
3035
}
3036
&.#{$scale_orient}.fine-tune marks {
3038
&.#{$marks_class} {
3039
margin-#{$marks_margin}: $_marks_distance - 1px;
3040
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
3041
}
3042
}
3043
}
3044
&.horizontal {
3046
indicator {
3047
min-height: $_marks_length;
3048
min-width: 1px;
3049
}
3050
}
3051
&.vertical {
3053
indicator {
3054
min-height: 1px;
3055
min-width: $_marks_length;
3056
}
3057
}
3058
// *WARNING* scale with marks madness following
3060
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
3062
@each $marks_class, $marks_infix in (
3063
".marks-before:not(.marks-after)": "-marks-before",
3064
".marks-after:not(.marks-before)": "-marks-after"
3065
) {
3066
&#{$dir_class}#{$marks_class} {
3067
slider {
3068
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
3069
&#{$state_class} {
3070
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
3071
background-image:
3073
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3074
radial-gradient(circle, transparent 10%, transparent 0%);
3075
}
3076
}
3077
&:active {
3079
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
3080
background-image:
3082
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3083
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3084
}
3085
}
3086
}
3087
}
3088
}
3089
&.color {
3091
min-height: 0;
3092
min-width: 0;
3093
&.horizontal {
3095
padding: 0 0 12px 0;
3096
slider {
3098
&:dir(ltr), &:dir(rtl) { // specificity bump
3099
margin-bottom: $color_slider_margin;
3100
margin-top: $color_marks_slider_margin;
3101
}
3102
}
3103
}
3104
&.vertical {
3106
&:dir(ltr) {
3107
padding: 0 0 0 12px;
3108
slider {
3110
margin-left: $color_slider_margin;
3111
margin-right: $color_marks_slider_margin;
3112
}
3113
}
3114
&:dir(rtl) {
3116
padding: 0 12px 0 0;
3117
slider {
3119
margin-right: $color_slider_margin;
3120
margin-left: $color_marks_slider_margin;
3121
}
3122
}
3123
}
3124
}
3125
}
3126
/**
3128
* Progress bars
3129
*/
3130
progressbar {
3132
// sizing
3133
&.horizontal {
3134
trough,
3135
progress {
3136
min-height: $bar-size;
3137
}
3138
}
3139
&.vertical {
3141
trough,
3142
progress {
3143
min-width: $bar-size;
3144
}
3145
}
3146
// FIXME: insensitive state missing and some other state should be set probably
3148
color: hint($on-surface);
3149
font-size: smaller;
3150
trough {
3152
background-color: disabled-stroke($on-surface);
3153
}
3154
progress {
3156
background-color: $primary;
3157
}
3158
&.osd { // progressbar.osd used for epiphany page loading progress
3160
// min-width: $bar-size;
3161
// min-height: $bar-size;
3162
// background-color: transparent;
3163
trough {
3165
// background-color: transparent;
3166
}
3167
progress {
3169
// background-color: $primary;
3170
}
3171
}
3172
// makes the progress indicator disappear, when the fraction is 0
3174
trough.empty progress {
3175
all: unset;
3176
}
3177
}
3178
/**
3180
* Level Bar
3181
*/
3182
levelbar {
3184
&.horizontal {
3185
block {
3186
min-height: $bar-size;
3187
}
3188
&.discrete block {
3190
min-width: $medium-size;
3191
&:not(:last-child) {
3193
margin-right: 2px;
3194
}
3195
}
3196
}
3197
&.vertical {
3199
block {
3200
min-width: $bar-size;
3201
}
3202
&.discrete block {
3204
min-height: $medium-size;
3205
&:not(:last-child) {
3207
margin-bottom: 2px;
3208
}
3209
}
3210
}
3211
trough {
3213
}
3214
block {
3216
&.low {
3217
background-color: $warning;
3218
}
3219
&.high,
3221
&:not(.empty) {
3222
background-color: $primary;
3223
}
3224
&.full {
3226
background-color: $success;
3227
}
3228
&.empty {
3230
background-color: disabled-stroke($on-surface);
3231
}
3232
}
3233
}
3234
/**
3236
* Print dialog
3237
*/
3238
printdialog {
3240
paper {
3241
padding: 0;
3242
border: 1px solid divider($on-surface);
3243
background-clip: padding-box;
3244
background-color: $base;
3245
color: $on-surface;
3246
}
3247
.dialog-action-box {
3249
margin: 12px;
3250
}
3251
}
3252
/**
3254
* Frames
3255
*/
3256
frame > border,
3258
.frame {
3259
margin: 0;
3260
padding: 0;
3261
border: 1px solid divider($on-surface);
3262
border-radius: 0;
3263
box-shadow: none;
3264
background-clip: padding-box;
3265
background-color: $base;
3266
&.flat {
3268
border-style: none;
3269
background-color: transparent;
3270
}
3271
}
3272
// for backward compatibility
3274
frame.flat > border {
3275
border-style: none;
3276
background-color: transparent;
3277
}
3278
actionbar > revealer > box {
3280
padding: $container-padding;
3281
border-top: 1px solid divider($on-surface);
3282
// background-color: $base;
3283
button:not(.suggested-action):not(.destructive-action) {
3285
@extend %button-flat;
3286
}
3287
.linked:not(.vertical) > entry:not(:only-child) {
3289
border-radius: $corner-radius $corner-radius 0 0;
3290
}
3291
}
3292
scrolledwindow {
3294
viewport.frame { // avoid double borders when viewport inside scrolled window
3295
border-style: none;
3296
background-color: transparent;
3297
}
3298
// This is used when content is touch-dragged past boundaries.
3300
// draws a box on top of the content, the size changes programmatically.
3301
@at-root overshoot {
3302
&.top { @include overshoot(top); }
3303
&.bottom { @include overshoot(bottom); }
3305
&.left { @include overshoot(left); }
3307
&.right { @include overshoot(right); }
3309
}
3310
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3312
@at-root undershoot {
3313
// &.top { @include undershoot(top); }
3314
// &.bottom { @include undershoot(bottom); }
3316
// &.left { @include undershoot(left); }
3318
// &.right { @include undershoot(right); }
3320
}
3321
@at-root junction { // the small square between two scrollbars
3323
border-style: solid none none solid;
3324
border-width: 1px;
3325
border-color: divider($on-surface);
3326
// background-color: $background;
3327
&:dir(rtl) {
3329
border-style: solid solid none none;
3330
}
3331
}
3332
}
3333
// vbox and hbox separators
3335
separator {
3336
min-width: 1px;
3337
min-height: 1px;
3338
background-color: divider($on-surface);
3339
}
3340
%hide_separators {
3342
min-width: 0;
3343
min-height: 0;
3344
background-color: transparent;
3345
}
3346
/**
3348
* Lists
3349
*/
3350
list {
3352
border-color: divider($on-surface);
3353
// background-color: $base;
3354
row {
3356
padding: 2px;
3357
}
3358
}
3359
row {
3361
background-clip: padding-box;
3362
&.activatable {
3364
@extend %ripple;
3365
@include ink-color($on-surface, $hover-alt: true);
3366
@include list-item;
3367
// this is for indicathing which row generated a popover
3369
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3370
&.has-open-popup {
3371
background-color: overlay("activated", $on-surface);
3372
}
3373
}
3374
&:selected {
3376
background-color: $overlay-selected;
3377
@include ink-color($primary, $hover-alt: true);
3379
&.has-open-popup {
3381
background-color: overlay("activated", $primary, $on: $overlay-selected);
3382
}
3383
}
3384
}
3385
/**
3387
* App Notifications
3388
*/
3389
.app-notification {
3391
@extend %toolbar-osd;
3392
margin: 8px;
3393
button {
3395
@extend %button-flat;
3396
&.text-button:not(:disabled) {
3398
color: $primary;
3399
@include ink-color($primary);
3400
}
3401
}
3402
&.frame {
3404
border-style: none;
3405
}
3406
border {
3408
border-style: none;
3409
background-color: transparent;
3410
}
3411
}
3412
/**
3414
* Expanders
3415
*/
3416
expander {
3418
title > arrow {
3419
transition: all $duration $ease-out;
3420
min-width: 16px;
3421
min-height: 16px;
3422
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3423
&:checked {
3425
&:dir(ltr) {
3426
-gtk-icon-transform: rotate(-180deg);
3427
}
3428
&:dir(rtl) {
3430
-gtk-icon-transform: rotate(180deg);
3431
}
3432
}
3433
color: hint($on-surface);
3435
&:hover,
3437
&:active {
3438
color: $on-surface;
3439
}
3440
&:disabled {
3442
color: disabled-hint($on-surface);
3443
}
3444
}
3445
}
3446
/**
3448
* Calendar
3449
*/
3450
calendar {
3452
padding: 1px;
3453
border: 1px solid divider($on-surface);
3454
background-clip: padding-box;
3455
background-color: $base;
3456
color: $on-surface;
3457
&:disabled {
3459
color: disabled($on-surface);
3460
}
3461
&:selected {
3463
border-radius: $corner-radius + 1px;
3464
background-color: $overlay-selected;
3465
}
3466
&.header {
3468
border-style: none none solid;
3469
border-color: divider($on-surface);
3470
border-radius: 0;
3471
}
3472
&.button {
3474
border-radius: $corner-radius + 1px;
3475
color: hint($on-surface);
3476
&:hover {
3478
background-image: image(overlay("hover", $on-surface));
3479
}
3480
&:disabled {
3482
color: disabled-hint($on-surface);
3483
}
3484
}
3485
&.highlight {
3487
color: hint($on-surface);
3488
font-weight: 500;
3489
}
3490
&:indeterminate {
3492
color: disabled-hint($on-surface);
3493
}
3494
}
3495
/**
3497
* Dialogs
3498
*/
3499
// Message Dialog styling
3501
messagedialog {
3502
&.background {
3503
background-color: $surface;
3504
}
3505
.titlebar {
3507
min-height: $small-size;
3508
border-style: none;
3509
box-shadow: inset 0 1px highlight($surface);
3510
background-color: $surface;
3511
color: $on-surface;
3512
&:backdrop {
3514
background-color: $surface;
3515
color: hint($on-surface);
3516
}
3517
}
3518
&.csd { // rounded bottom border styling for csd version
3520
&.background {
3521
// bigger radius for better antialiasing
3522
border-bottom-left-radius: $corner-radius;
3523
border-bottom-right-radius: $corner-radius;
3524
}
3525
}
3526
// Hint text
3528
box.vertical > label + label {
3529
color: hint($on-surface);
3530
}
3531
.dialog-action-box {
3533
margin-top: -$container-padding;
3534
// padding: $container-padding;
3535
button {
3537
@extend %button-flat;
3538
&:not(:last-child) {
3540
margin-right: $container-padding;
3541
}
3542
&:not(:disabled) {
3544
color: $primary;
3545
@include ink-color($primary);
3546
}
3547
&.suggested-action:not(:disabled) {
3549
background-color: transparent;
3550
// color: $primary;
3551
// @include ink-color($primary);
3552
}
3553
&.destructive-action:not(:disabled) {
3555
background-color: transparent;
3556
color: $error;
3557
@include ink-color($error);
3558
}
3559
}
3560
}
3561
}
3562
filechooser {
3564
.dialog-action-box {
3565
border-top: 1px solid divider($on-surface);
3566
}
3567
#pathbarbox {
3569
border-bottom: 1px solid divider($on-surface);
3570
// background-color: $background;
3571
// The new folder button
3573
> stack > box > button {
3574
@extend %button-flat;
3575
border-radius: $circular-radius;
3577
}
3578
}
3579
}
3580
filechooserbutton:drop(active) {
3582
// box-shadow: none;
3583
}
3584
/**
3586
* Sidebar
3587
*/
3588
.sidebar {
3590
border-style: none;
3591
background-color: transparent;
3592
&:not(separator) {
3594
@at-root %sidebar_left,
3595
&:dir(ltr),
3596
&.left,
3597
&.left:dir(rtl) {
3598
border-right: 1px solid divider($on-surface);
3599
border-left-style: none;
3600
}
3601
@at-root %sidebar_right,
3603
&:dir(rtl),
3604
&.right {
3605
border-left: 1px solid divider($on-surface);
3606
border-right-style: none;
3607
}
3608
}
3609
list {
3611
// background-color: transparent;
3612
}
3613
paned & {
3615
&,
3616
&.left,
3617
&.right,
3618
&.left:dir(rtl),
3619
&:dir(rtl),
3620
&:dir(ltr) {
3621
border-style: none;
3622
}
3623
}
3624
}
3625
stacksidebar.sidebar {
3627
& {
3628
&:dir(ltr),
3629
&.left,
3630
&.left:dir(rtl) {
3631
list {
3632
@extend %sidebar_left;
3633
}
3634
}
3635
&:dir(rtl),
3637
&.right {
3638
list {
3639
@extend %sidebar_right;
3640
}
3641
}
3642
}
3643
+ separator.vertical,
3645
separator.horizontal {
3646
@extend %hide_separators;
3647
}
3648
list {
3650
padding: 4px;
3651
// background-color: $background; // This should not be necessary, but the parent stacksidebar ignores background-color.
3652
}
3653
row {
3655
min-height: 32px;
3656
padding: 0 8px - 6px;
3657
border-radius: $corner-radius;
3658
&:selected {
3660
background-color: overlay("activated", $primary);
3661
color: $primary;
3662
font-weight: 500;
3663
@include ink-color($primary, $hover-alt: true);
3664
}
3665
+ row {
3667
margin-top: 4px;
3668
}
3669
> label {
3671
padding-left: 6px;
3672
padding-right: 6px;
3673
}
3674
&.needs-attention > label {
3676
@extend %needs-attention;
3677
}
3678
}
3679
}
3680
separator.sidebar {
3682
background-color: divider($on-surface);
3683
&.selection-mode,
3685
.selection-mode & {
3686
// background-color: divider($on-primary);
3687
}
3688
}
3689
/**
3691
* File chooser
3692
*/
3693
// dim the sidebar icons, see bug #786613 for details on this oddity
3695
row image.sidebar-icon {
3696
transition: color $duration $ease-out;
3697
color: hint($on-surface);
3698
&:disabled {
3700
color: disabled-hint($on-surface);
3701
}
3702
}
3703
placessidebar.sidebar {
3705
> viewport.frame {
3706
border-style: none;
3707
background-color: transparent;
3708
}
3709
list {
3711
padding: (4px - 3px) 0 4px;
3712
}
3713
row {
3715
// Needs overriding of the GtkListBoxRow padding
3716
min-height: 32px;
3717
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3718
padding: 0;
3719
border-radius: $corner-radius;
3720
// Using margins/padding directly in the SidebarRow
3722
// will make the animation of the new bookmark row jump
3723
> revealer {
3724
padding: 0 8px;
3725
}
3726
&:selected {
3728
background-color: overlay("activated", $primary);
3729
color: $primary;
3730
font-weight: 500;
3731
@include ink-color($primary, $hover-alt: true);
3732
image.sidebar-icon {
3734
color: $primary;
3735
}
3736
}
3737
&:disabled {
3739
color: disabled($on-surface);
3740
}
3741
image.sidebar-icon {
3743
&:dir(ltr) {
3744
padding-right: 8px;
3745
}
3746
&:dir(rtl) {
3748
padding-left: 8px;
3749
}
3750
}
3751
label.sidebar-label {
3753
&:dir(ltr) {
3754
padding-right: 2px;
3755
}
3756
&:dir(rtl) {
3758
padding-left: 2px;
3759
}
3760
}
3761
@at-root button.sidebar-button {
3763
@extend %button-flat-basic;
3764
@extend %button-small;
3765
}
3766
&.sidebar-placeholder-row {
3768
background-color: overlay("hover", $on-surface);
3769
}
3770
&.sidebar-new-bookmark-row {
3772
color: $primary;
3773
image.sidebar-icon {
3775
color: $primary;
3776
}
3777
}
3778
}
3779
}
3780
placesview {
3782
.server-list-button {
3783
> image {
3784
-gtk-icon-transform: rotate(-.5turn);
3785
}
3786
&:checked > image {
3788
-gtk-icon-transform: rotate(0turn);
3789
}
3790
}
3791
// this selects the "connect to server" label
3793
> actionbar > revealer > box > label {
3794
padding-left: 8px;
3795
padding-right: 8px;
3796
}
3797
}
3798
/**
3800
* Paned
3801
*/
3802
paned {
3804
> separator {
3805
min-width: 1px;
3806
min-height: 1px;
3807
-gtk-icon-source: none; // defeats the ugly default handle decoration
3808
border-style: none; // just to be sure
3809
background-color: transparent;
3810
// workaround, using background istead of a border since the border will get rendered twice (?)
3811
background-image: image(divider($on-surface));
3812
background-size: 1px 1px;
3813
background-clip: content-box; // avoids borders image being rendered twice (?)
3814
&.wide {
3816
min-width: 6px;
3817
min-height: 6px;
3818
// background-color: $background;
3819
background-image: image(divider($on-surface)), image(divider($on-surface));
3820
background-size: 1px 1px, 1px 1px;
3821
}
3822
}
3823
&.horizontal > separator {
3825
background-repeat: repeat-y;
3826
&:dir(ltr) {
3828
margin: 0 -8px 0 0;
3829
padding: 0 8px 0 0;
3830
background-position: left;
3831
}
3832
&:dir(rtl) {
3834
margin: 0 0 0 -8px;
3835
padding: 0 0 0 8px;
3836
background-position: right;
3837
}
3838
&.wide {
3840
margin: 0;
3841
padding: 0;
3842
background-repeat: repeat-y, repeat-y;
3843
background-position: left, right;
3844
}
3845
}
3846
&.vertical > separator {
3848
margin: 0 0 -8px 0;
3849
padding: 0 0 8px 0;
3850
background-repeat: repeat-x;
3851
background-position: top;
3852
&.wide {
3854
margin: 0;
3855
padding: 0;
3856
background-repeat: repeat-x, repeat-x;
3857
background-position: bottom, top;
3858
}
3859
}
3860
}
3861
/**
3863
* GtkInfoBar
3864
*/
3865
infobar {
3867
border-style: none;
3868
&.action:hover > revealer > box {
3870
background-image: image(overlay("hover", $on-surface));
3871
}
3872
&.info > revealer > box,
3874
&.question > revealer > box {
3875
border-bottom: 1px solid divider($on-surface);
3876
// background-color: $base;
3877
button {
3879
@extend %button-flat;
3880
&.text-button:not(:disabled) {
3882
color: $primary;
3883
@include ink-color($primary);
3884
}
3885
}
3886
}
3887
&.warning > revealer > box {
3889
background-color: $warning;
3890
color: $on-warning;
3891
button.flat {
3893
color: $on-warning;
3894
@include ink-color($on-warning);
3895
}
3896
selection {
3898
}
3899
*:link {
3901
color: $on-warning;
3902
}
3903
}
3904
&.error > revealer > box {
3906
background-color: $error;
3907
color: $on-error;
3908
button.flat {
3910
color: $on-error;
3911
@include ink-color($on-error);
3912
}
3913
selection {
3915
}
3916
*:link {
3918
color: $on-error;
3919
}
3920
}
3921
// Remove ugly hard-coded padding
3923
button label {
3924
margin: 0 -4px;
3925
}
3926
}
3927
/**
3929
* Tooltips
3930
*/
3931
tooltip {
3933
&.background {
3934
// background-color needs to be set this way otherwise it gets drawn twice
3935
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3936
background-color: $tooltip;
3937
color: $on-tooltip;
3938
}
3939
// padding: 4px; /* not working */
3941
border-radius: $corner-radius;
3942
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3943
&:not(.csd):not(.unity-csd) {
3945
// border: 1px solid divider($on-surface);
3946
// border-radius: $corner-radius + 1px;
3947
}
3948
// FIXME: we need a border or tooltips vanish on black background.
3950
decoration {
3951
background-color: transparent;
3952
}
3953
> box {
3955
margin: -6px; // Remove hard-coded 6px margin
3956
min-height: 32px - 4px * 2;
3957
padding: 4px 8px;
3958
}
3959
.dim-label {
3961
color: hint($on-tooltip);
3962
}
3963
* {
3965
// workaround for Eclipse.
3966
// do not include any declaration here.
3967
}
3968
}
3969
/**
3971
* Color Chooser
3972
*/
3973
colorswatch {
3975
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3976
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3977
// applied to the overlay box.
3978
// base color corners rounding
3980
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3981
// sports a bigger radius.
3982
// nth-child is needed by the custom color strip.
3983
&.top {
3985
border-top-left-radius: $corner-radius + .5px;
3986
border-top-right-radius: $corner-radius + .5px;
3987
overlay {
3989
border-top-left-radius: $corner-radius;
3990
border-top-right-radius: $corner-radius;
3991
}
3992
}
3993
&.bottom {
3995
border-bottom-left-radius: $corner-radius + .5px;
3996
border-bottom-right-radius: $corner-radius + .5px;
3997
overlay {
3999
border-bottom-left-radius: $corner-radius;
4000
border-bottom-right-radius: $corner-radius;
4001
}
4002
}
4003
&.left,
4005
&:first-child:not(.top) {
4006
border-top-left-radius: $corner-radius + .5px;
4007
border-bottom-left-radius: $corner-radius + .5px;
4008
overlay {
4010
border-top-left-radius: $corner-radius;
4011
border-bottom-left-radius: $corner-radius;
4012
}
4013
}
4014
&.right,
4016
&:last-child:not(.bottom) {
4017
border-top-right-radius: $corner-radius + .5px;
4018
border-bottom-right-radius: $corner-radius + .5px;
4019
overlay {
4021
border-top-right-radius: $corner-radius;
4022
border-bottom-right-radius: $corner-radius;
4023
}
4024
}
4025
&.dark {
4027
color: $on-dark;
4028
}
4029
&.light {
4031
color: $on-light;
4032
}
4033
overlay {
4035
transition: $transition-shadow;
4036
box-shadow: $shadow-z1;
4037
&:drop(active),
4039
&:hover {
4040
box-shadow: $shadow-z3;
4041
}
4042
}
4043
&#add-color-button {
4045
border-radius: $corner-radius $corner-radius 0 0;
4046
color: $on-surface;
4047
&:only-child {
4049
border-radius: $corner-radius;
4050
}
4051
overlay {
4053
background-color: $surface;
4054
}
4055
}
4056
&:disabled {
4058
opacity: .5;
4059
overlay {
4061
box-shadow: none;
4062
}
4063
}
4064
row:selected & {
4066
}
4067
&#editor-color-sample {
4069
border-radius: $corner-radius + .5px;
4070
overlay {
4072
border-radius: $corner-radius;
4073
&:hover {
4075
// box-shadow: $shadow-z1;
4076
}
4077
}
4078
}
4079
}
4080
// colorscale popup
4082
colorchooser .popover.osd {
4083
transition: $transition-shadow;
4084
border-radius: $corner-radius;
4085
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
4086
background-color: $surface;
4087
&:backdrop {
4089
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
4090
}
4091
}
4092
/**
4094
* Misc
4095
*/
4096
// content view (grid/list)
4098
.content-view {
4099
// background-color: $background;
4100
&:hover {
4102
// -gtk-icon-effect: highlight;
4103
}
4104
rubberband,
4106
.rubberband {
4107
@extend %rubberband;
4108
}
4109
}
4110
.scale-popup {
4112
.osd & {
4113
// @extend %osd;
4114
// FIXME: quick hack, redo properly
4116
button.flat {
4117
}
4118
}
4119
// +/- buttons on GtkVolumeButton popup
4121
button {
4122
}
4123
}
4124
/**
4126
* Window Decorations
4127
*/
4128
decoration {
4130
transition: $transition-shadow;
4131
border-radius: $corner-radius $corner-radius 0 0;
4132
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4133
// FIXME rationalize shadows
4135
// this is used for the resize cursor area
4137
margin: 8px;
4138
&:backdrop {
4140
// the transparent shadow here is to enforce that the shadow extents don't
4141
// change when we go to backdrop, to prevent jumping windows.
4142
// The biggest shadow should be in the same order then in the active state
4143
// or the jumping will happen during the transition.
4144
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4145
}
4146
.maximized &,
4148
.fullscreen &,
4149
.tiled &,
4150
.tiled-top &,
4151
.tiled-right &,
4152
.tiled-bottom &,
4153
.tiled-left & {
4154
border-radius: 0;
4155
}
4156
.popup & {
4158
box-shadow: none;
4159
}
4160
// server-side decorations as used by mutter
4162
.ssd & {
4163
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4164
}
4165
.csd.popup & {
4167
border-radius: $corner-radius;
4168
box-shadow: $shadow-z4;
4169
}
4170
tooltip.csd & {
4172
border-radius: $corner-radius;
4173
box-shadow: none;
4174
}
4175
messagedialog.csd & {
4177
border-radius: $corner-radius;
4178
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4179
&:backdrop {
4181
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4182
}
4183
}
4184
.solid-csd & {
4186
margin: 0;
4187
padding: 2px;
4188
border-radius: 0;
4189
box-shadow: none;
4190
box-shadow: inset 0 1px highlight($titlebar);
4191
background-color: $titlebar;
4192
&:backdrop {
4194
background-color: $titlebar-backdrop;
4195
}
4196
}
4197
}
4198
// Window Close button
4200
button.titlebutton {
4201
border-radius: $circular-radius;
4202
.selection-mode & {
4204
}
4205
}
4206
// catch all extend :)
4209
.monospace {
4211
font-family: monospace;
4212
}
4213
/**
4215
* Touch Copy & Paste
4216
*/
4217
// touch selection handlebars for the Popover.osd above
4219
cursor-handle {
4220
color: $primary;
4221
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4222
&.top:dir(ltr),
4224
&.bottom:dir(rtl) {
4225
-gtk-icon-transform: rotate(90deg);
4226
}
4227
&.bottom:dir(ltr),
4229
&.top:dir(rtl) {
4230
-gtk-icon-transform: unset;
4231
}
4232
&.insertion-cursor:dir(ltr),
4234
&.insertion-cursor:dir(rtl) {
4235
padding-top: 6px;
4236
-gtk-icon-transform: rotate(45deg);
4237
}
4238
}
4239
// Decouple the font of context menus from their entry/textview
4241
.context-menu {
4242
font: initial;
4243
}
4244
// shortcut window keys
4246
.keycap {
4247
min-width: 28px - 8px * 2;
4248
min-height: 28px - 2px;
4249
margin-top: 2px;
4250
padding-bottom: 2px;
4251
padding-left: 8px;
4252
padding-right: 8px;
4253
border: solid 1px divider($on-surface);
4255
border-radius: $corner-radius + 1px;
4256
box-shadow: inset 0 -2px divider($on-surface);
4257
background-clip: padding-box;
4258
background-color: $surface;
4259
color: $on-surface;
4260
font-size: smaller;
4261
}
4262
// FIXME needs to be done widget by widget, this wildcard should really die
4264
:not(decoration):not(window):drop(active) {
4265
// caret-color: $primary;
4266
}
4267
// FIXME aggregate with buttons
4269
stackswitcher button.text-button {
4270
min-width: 100px;
4271
}
4272
// FIXME aggregate with buttons
4274
stackswitcher button.circular,
4275
stackswitcher button.text-button.circular {
4276
min-width: $medium-size;
4277
min-height: $medium-size;
4278
padding: 0;
4279
}
4280
/**
4282
* App Icons
4283
*/
4284
// Outline for low res icons
4286
.lowres-icon {
4287
// -gtk-icon-shadow: none;
4288
}
4289
// Drapshadow for large icons
4291
.icon-dropshadow {
4292
// -gtk-icon-shadow: none;
4293
}
4294
/**
4296
* Emoji
4297
*/
4298
popover.emoji-picker {
4300
padding: 0;
4301
entry {
4303
border-bottom: 1px solid divider($on-surface);
4304
border-image: none;
4305
border-radius: 0;
4306
box-shadow: none;
4307
background-color: transparent;
4308
}
4309
scrolledwindow {
4311
border-bottom: 1px solid divider($on-surface);
4312
}
4313
}
4314
button.emoji-section {
4316
margin: 4px;
4317
&:not(:last-child) {
4319
margin-right: 0;
4320
}
4321
}
4322
popover.emoji-picker .emoji {
4324
min-width: 3em;
4325
min-height: 3em;
4326
padding: 0 8px;
4327
// font-size: larger;
4328
widget {
4330
transition: $transition;
4331
border-radius: $corner-radius;
4332
&:hover {
4334
background-color: overlay("hover", $on-surface);
4335
}
4336
}
4337
}
4338
popover.emoji-completion {
4340
padding: 8px 0;
4341
arrow {
4343
border: none;
4344
background: none;
4345
}
4346
.emoji-completion-row {
4348
min-height: $menuitem-size;
4349
padding: 0 12px;
4350
}
4351
.emoji:hover {
4353
background-color: overlay("hover", $on-surface);
4354
}
4355
}
4356