ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: $container-padding / 1px;
21
-GtkDialog-action-area-border: $container-padding / 1px;
22
-gtk-secondary-caret-color: $primary;
24
// We use the outline properties to signal the focus properties
26
// to the adwaita engine: using real CSS properties is faster,
27
// and we don't use any outlines for now.
28
outline: 2px solid transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: $corner-radius;
32
&:focus {
34
outline-color: overlay("focus", $on-surface);
35
}
36
}
37
/**
39
* Base States
40
*/
41
.background {
43
background-color: $background;
44
color: $on-surface;
45
}
46
/*
48
These wildcard seems unavoidable, need to investigate.
49
Wildcards are bad and troublesome, use them with care,
50
or better, just don't.
51
Everytime a wildcard is used a kitten dies, painfully.
52
*/
53
*:disabled {
55
-gtk-icon-effect: dim;
56
}
57
.gtkstyle-fallback {
59
background-color: $background;
60
color: $on-surface;
61
&:hover {
63
background-color: darken($background, 5%);
64
}
65
&:active {
67
background-color: darken($background, 10%);
68
}
69
&:disabled {
71
color: disabled($on-surface);
72
}
73
&:selected {
75
background-color: $primary;
76
color: $on-primary;
77
}
78
}
79
.view {
81
background-color: $base;
82
color: $on-surface;
83
&:hover {
85
box-shadow: inset 0 0 0 9999px overlay("hover", $on-surface);
86
}
87
&:selected:hover {
89
box-shadow: inset 0 0 0 9999px overlay("hover", $primary);
90
}
91
&:disabled {
93
color: disabled($on-surface);
94
}
95
&:hover,
97
&:selected {
98
border-radius: $corner-radius;
99
}
100
selection,
102
&:selected {
103
background-color: $overlay-selected;
104
}
105
}
106
textview {
108
// FIXME: we need to override background-color to ensure text rendering
109
text {
110
background-color: $base;
111
caret-color: $primary;
112
}
113
border {
115
background-color: $base-alt;
116
color: hint($on-surface); // FIXME: not working
117
}
118
}
119
iconview {
121
// @extend .view;
122
}
123
%iconview-desktop {
125
// background-color: $scrim;
126
color: $on-dark;
127
text-shadow: $text-shadow;
128
.rubberband,
130
rubberband {
131
border: 1px solid primary($on-dark);
132
background-color: rgba(primary($on-dark), .3);
133
}
134
}
135
%rubberband,
137
.rubberband,
138
rubberband {
139
border: 1px solid $primary;
140
background-color: rgba($primary, .24);
141
}
142
flowbox {
144
rubberband {
145
@extend %rubberband;
146
}
147
flowboxchild {
149
padding: 4px;
150
border-radius: $corner-radius;
151
&:selected {
153
background-color: $overlay-selected;
154
}
155
}
156
}
157
.content-view .tile {
159
// margin: 2px;
160
// padding: 0;
161
// border-radius: 0;
162
// background-color: black;
163
&:selected {
165
background-color: transparent;
166
}
167
}
168
label {
170
caret-color: $primary; // this shouldn't be needed.
171
&.separator {
173
color: hint($on-surface);
174
}
175
&.error {
177
color: $error;
178
}
179
selection {
181
background-color: $overlay-selected;
182
}
183
&:disabled {
185
color: disabled($on-surface);
186
headerbar &,
188
menuitem &,
189
tab &,
190
button & {
191
color: inherit;
192
}
193
}
194
&.osd {
196
border-radius: $corner-radius;
197
background-color: $tooltip;
198
color: $on-tooltip;
199
}
200
}
201
.dim-label {
203
color: hint($on-surface);
204
}
205
assistant {
207
.sidebar {
208
padding: 4px 0;
209
// background-color: $base;
210
}
211
.sidebar label {
213
min-height: $medium-size;
214
padding: 0 12px;
215
color: disabled($on-surface);
216
font-weight: 500;
217
&.highlight {
219
color: $on-surface;
220
}
221
}
222
}
223
%osd,
225
.osd {
226
// opacity: .9;
227
}
228
/**
230
* Spinner Animation
231
*/
232
@keyframes spin {
234
to {
235
-gtk-icon-transform: rotate(1turn);
236
}
237
}
238
spinner {
240
background: none;
241
opacity: 0; // non spinning spinner makes no sense
242
color: $primary;
243
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
244
transition: opacity $duration * 4 $ease-out;
245
animation: spin 1s linear infinite;
246
&:checked {
248
opacity: 1;
249
}
250
&:disabled {
252
color: disabled-hint($on-surface);
253
}
254
}
255
/**
257
* General Typography
258
*/
259
@function pt($size: $font-size) {
261
@return ($size * .75 / 1px) * 1pt;
262
}
263
.large-title {
265
font-weight: 400;
266
font-size: pt(48px);
267
}
268
.title-1 {
270
font-weight: 400;
271
font-size: pt(34px);
272
letter-spacing: pt(.25px);
273
}
274
.title-2 {
276
font-weight: 400;
277
font-size: pt(24px);
278
}
279
.title-3 {
281
font-weight: 500;
282
font-size: pt(20px);
283
letter-spacing: pt(.15px);
284
}
285
.title-4 {
287
font-weight: 400;
288
font-size: pt(16px);
289
letter-spacing: pt(.5px);
290
}
291
.heading {
293
font-weight: 500;
294
font-size: 1em;
295
}
296
.body {
298
font-weight: 400;
299
font-size: 1em;
300
}
301
.caption-heading {
303
font-weight: 500;
304
font-size: pt(12px);
305
letter-spacing: pt(1.5px);
306
}
307
.caption {
309
font-weight: 400;
310
font-size: pt(12px);
311
letter-spacing: pt(.4px);
312
}
313
/**
315
* Text Entries
316
*/
317
%entry,
319
entry {
320
min-height: $medium-size;
321
padding: 0 8px;
322
border-radius: $corner-radius $corner-radius 0 0;
323
@include entry(normal);
325
&:focus {
327
@include entry(checked);
328
}
329
&:drop(active) {
331
@include entry(hover);
332
}
333
&:disabled {
335
@include entry(disabled);
336
}
337
&.flat {
339
min-height: 0;
340
padding: 2px;
341
border-radius: 0;
342
background-color: transparent;
343
}
344
// icons inside the entry
346
image {
347
// min-height: $small-size;
348
// min-width: $small-size;
349
// border-radius: $circular-radius;
350
// @extend %ripple;
351
// @include ink-color($on-surface);
352
color: hint($on-surface);
353
&:hover,
355
&:active {
356
color: $on-surface;
357
}
358
&:disabled {
360
color: disabled($on-surface);
361
}
362
&.left {
364
margin-left: ($medium-size - 16px) / 2 - 8px;
365
margin-right: 6px;
366
}
367
&.right {
369
margin-left: 6px;
370
margin-right: ($medium-size - 16px) / 2 - 8px;
371
}
372
}
373
undershoot {
375
&.left {
376
@include undershoot(left);
377
}
378
&.right {
380
@include undershoot(right);
381
}
382
}
383
selection {
385
background-color: $overlay-selected;
386
}
387
// entry error and warning style
389
@each $class, $color in (".error": $error, ".warning": $warning) {
390
&#{$class} {
391
@include entry(normal, $color);
392
&:focus {
394
@include entry(checked, $color);
395
}
396
&:disabled {
398
@include entry(disabled, $color);
399
}
400
}
401
}
402
.osd & {
404
}
405
progress {
407
margin: 0 -8px -4px;
408
border-bottom: 2px solid $primary;
409
background-color: transparent;
410
}
411
// linked entries
413
.linked:not(.vertical) > & {
414
@extend %linked;
415
}
416
// Vertically linked entries
418
.linked.vertical > & {
419
@extend %linked-vertical;
420
}
421
}
422
%entry_raised {
424
border-radius: $corner-radius;
425
@include entry(raised-normal);
427
&:focus {
429
@include entry(raised-focus);
430
}
431
&:drop(active) {
433
@include entry(raised-hover);
434
}
435
&:disabled {
437
@include entry(raised-disabled);
438
}
439
// entry error and warning style
441
@each $class, $color in (".error": $error, ".warning": $warning) {
442
&#{$class} {
443
@include entry(raised-normal, $color);
444
&:focus {
446
@include entry(raised-focus, $color);
447
}
448
&:disabled {
450
@include entry(raised-disabled, $color);
451
}
452
image {
454
color: hint(on($color));
455
&:hover,
457
&:active {
458
color: on($color);
459
}
460
&:disabled {
462
color: disabled(on($color));
463
}
464
}
465
}
466
}
467
}
468
treeview entry {
470
&,
471
&.flat {
472
background-color: $base;
473
&,
475
&:focus {
476
border-image: none;
477
box-shadow: none;
478
}
479
}
480
}
481
.entry-tag {
483
margin: 2px;
484
border-radius: $circular-radius;
485
box-shadow: none;
486
background-color: fill($on-surface);
487
color: $on-surface;
488
&:hover {
490
background-image: image(overlay("hover", $on-surface));
491
}
492
// side margins: compensate the entry padding with a negative margin
494
// then the negative margin itself
495
:dir(ltr) & {
496
margin-left: 4px;
497
margin-right: 0;
498
padding-left: 12px;
499
padding-right: 8px;
500
}
501
:dir(rtl) & {
503
margin-left: 0;
504
margin-right: 4px;
505
padding-left: 8px;
506
padding-right: 12px;
507
}
508
// seems any sizing doesn't work
510
&.button {
511
box-shadow: none;
512
background-color: transparent;
513
color: hint($on-surface);
514
}
515
}
516
/**
518
* Buttons
519
*/
520
// stuff for .needs-attention
522
@keyframes needs-attention {
523
from {
524
background-image:
525
-gtk-gradient(
526
radial,
527
center center, 0,
528
center center, .001,
529
to($primary),
530
to(transparent)
531
);
532
}
533
to {
535
background-image:
536
-gtk-gradient(
537
radial,
538
center center, 0,
539
center center, .5,
540
to($primary),
541
to(transparent)
542
);
543
}
544
}
545
%button,
547
button {
548
min-height: 24px;
549
min-width: 16px;
550
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
551
border-radius: $corner-radius;
552
background-color: $surface;
553
color: $on-surface;
554
font-weight: 500;
555
@extend %ripple;
557
@include ink-color($on-surface, $elevation: true);
558
&:disabled {
560
box-shadow: none;
561
background-color: fill($on-surface);
562
color: disabled($on-surface);
563
}
564
&:checked {
566
background-color: overlay("activated", $primary, $background: $surface);
567
color: $primary;
568
@include ink-color($primary, $elevation: true);
569
&:disabled {
571
box-shadow: none;
572
background-color: overlay("activated", $on-surface, $background: fill($on-surface));
573
color: disabled($on-surface);
574
}
575
}
576
&.text-button {
578
min-width: 64px - 16px * 2;
579
padding-left: 16px;
580
padding-right: 16px;
581
}
582
&.image-button {
584
min-width: 24px;
585
padding: ($medium-size - 24px) / 2;
586
border-radius: $circular-radius;
587
}
588
// NOTE: Some image-only buttons use this as well
590
&.text-button.image-button {
591
min-width: 24px;
592
padding: ($medium-size - 24px) / 2;
593
border-radius: $corner-radius;
594
label {
596
&:first-child {
597
margin-left: 16px - ($medium-size - 24px) / 2;
598
}
599
&:last-child {
601
margin-right: 16px - ($medium-size - 24px) / 2;
602
}
603
}
604
image:not(:only-child) {
606
margin: 0 (24px - 16px) / 2;
607
}
608
}
609
.linked:not(.vertical) > & {
611
@extend %linked;
612
&.image-button:not(.text-button) {
614
@extend %linked-image-button;
615
}
616
}
617
.linked.vertical > & {
619
@extend %linked-vertical;
620
&.image-button:not(.text-button) {
622
@extend %linked-vertical-image-button;
623
}
624
}
625
}
626
%button-flat-basic {
628
background-color: transparent;
629
color: hint($on-surface);
630
@include ink-color($on-surface);
631
&:disabled {
633
background-color: transparent;
634
color: disabled-hint($on-surface);
635
}
636
}
637
%button-flat-activatable {
639
@extend %button-flat-basic;
640
&:checked {
642
background-color: overlay("activated", $on-surface);
643
color: $on-surface;
644
@include ink-color($on-surface);
645
&:disabled {
647
color: disabled($on-surface);
648
}
649
}
650
}
651
%button-flat,
653
button.flat {
654
@extend %button-flat-activatable;
655
&.text-button {
657
min-width: 64px - 8px * 2;
658
padding-left: 8px;
659
padding-right: 8px;
660
}
661
&.text-button.image-button {
663
min-width: 24px;
664
padding: ($medium-size - 24px) / 2;
665
label {
667
&:first-child {
668
margin-left: 12px - ($medium-size - 24px) / 2;
669
}
670
&:last-child {
672
margin-right: 12px - ($medium-size - 24px) / 2;
673
}
674
}
675
}
676
.linked:not(.vertical) > &,
678
.linked.vertical > & {
679
&:not(:only-child) { // specificity bump
680
border-radius: $corner-radius;
681
&.image-button:not(.text-button) {
683
border-radius: $circular-radius;
684
}
685
}
686
}
687
}
688
button {
690
// big standalone buttons like in Documents pager
691
&.osd {
692
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
693
&.image-button {
695
padding: ($large-size - 24px) / 2;
696
}
697
&:disabled {
699
opacity: 0;
700
}
701
}
702
// overlay / OSD style
704
@at-root %osd_button,
705
.osd & {
706
}
707
// Suggested and Destructive Action buttons
709
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
710
&#{$class} {
711
background-color: $color;
712
color: on($color);
713
@include ink-color(on($color), $elevation: true);
714
&:disabled {
716
box-shadow: none;
717
background-color: fill($on-surface);
718
color: disabled($on-surface);
719
}
720
&:checked {
722
background-color: overlay("activated", on($color), $background: $color);
723
}
724
&.flat {
726
background-color: transparent;
727
color: $color;
728
@include ink-color($color);
729
&:disabled {
731
box-shadow: none;
732
background-color: transparent;
733
color: disabled-hint($on-surface);
734
}
735
&:checked {
737
background-color: overlay("activated", $color);
738
}
739
}
740
.osd & {
742
}
743
}
744
}
745
.stack-switcher > & {
747
// to position the needs attention dot, padding is added to the button
748
// child, a label needs just lateral padding while an icon needs vertical
749
// padding added too.
750
> label {
752
margin: 0 -6px;
753
padding: 0 6px;
754
}
755
> image {
757
margin: -3px -6px;
758
padding: 3px 6px;
759
}
760
&.needs-attention {
762
> label,
763
> image {
764
@extend %needs-attention;
765
}
766
&:checked {
768
> label,
769
> image {
770
animation: none;
771
background-image: none;
772
}
773
}
774
}
775
}
776
// hide separators
778
&.font,
779
&.file {
780
separator {
781
@extend %hide_separators;
782
}
783
}
784
&.font {
786
> box > box > label {
787
// font-weight: bold;
788
}
789
}
790
// inline-toolbar buttons
792
.inline-toolbar & {
793
// @extend %button-flat;
794
&:not(.text-button) {
796
border-radius: $circular-radius;
797
}
798
}
799
.primary-toolbar & {
801
-gtk-icon-shadow: none; // tango icons don't need shadows
802
}
803
&.close,
805
&.circular { // The Bloody Circul Button
806
border-radius: $circular-radius;
807
label {
809
// padding: 0;
810
}
811
}
812
}
813
%button-small {
815
min-height: $small-size;
816
min-width: $small-size;
817
padding: 0;
818
border-radius: $circular-radius;
819
}
820
%needs-attention {
822
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
823
background-repeat: no-repeat;
824
background-position: right 3px;
825
background-size: 6px 6px;
826
&:dir(rtl) {
828
background-position: left 3px;
829
}
830
}
831
// all the following is for the +|- buttons on inline toolbars, that way
833
// should really be deprecated...
834
.inline-toolbar toolbutton > button {
835
}
836
// More inline toolbar buttons
838
toolbar.inline-toolbar toolbutton {
839
&:not(:first-child) > button.flat {
840
// @extend %linked-not-first-child;
841
}
842
&:not(:last-child) > button.flat {
844
// @extend %linked-not-last-child;
845
}
846
}
847
%linked-not-first-child {
849
border-top-left-radius: 0;
850
border-bottom-left-radius: 0;
851
}
852
%linked-not-last-child {
854
border-top-right-radius: 0;
855
border-bottom-right-radius: 0;
856
}
857
%linked {
859
&:not(:first-child) {
860
@extend %linked-not-first-child;
861
}
862
&:not(:last-child) {
864
@extend %linked-not-last-child;
865
}
866
}
867
%linked-vertical-not-first-child {
869
border-top-left-radius: 0;
870
border-top-right-radius: 0;
871
}
872
%linked-vertical-not-last-child {
874
border-bottom-left-radius: 0;
875
border-bottom-right-radius: 0;
876
}
877
%linked-vertical {
879
&:not(:first-child) {
880
@extend %linked-vertical-not-first-child;
881
}
882
&:not(:last-child) {
884
@extend %linked-vertical-not-last-child;
885
}
886
}
887
%linked-image-button {
889
&:first-child {
890
border-top-left-radius: $corner-radius;
891
border-bottom-left-radius: $corner-radius;
892
}
893
&:last-child {
895
border-top-right-radius: $corner-radius;
896
border-bottom-right-radius: $corner-radius;
897
}
898
&:only-child {
900
border-radius: $circular-radius;
901
}
902
}
903
%linked-vertical-image-button {
905
&:first-child {
906
border-top-left-radius: $corner-radius;
907
border-top-right-radius: $corner-radius;
908
}
909
&:last-child {
911
border-bottom-left-radius: $corner-radius;
912
border-bottom-right-radius: $corner-radius;
913
}
914
&:only-child {
916
border-radius: $circular-radius;
917
}
918
}
919
/* menu buttons */
921
modelbutton.flat,
922
.menuitem.button.flat {
923
min-height: $menuitem-size;
924
padding: 0 8px;
925
border-radius: $corner-radius;
926
@extend %ripple;
928
@include ink-color($on-surface);
929
&:selected {
931
background-color: $overlay-selected;
932
}
933
}
934
modelbutton.flat arrow {
936
transition: color $duration $ease-out;
937
color: hint($on-surface);
938
&:disabled {
940
color: disabled-hint($on-surface);
941
}
942
&.left {
944
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
945
}
946
&.right {
948
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
949
}
950
}
951
button.color {
953
min-height: $small-size;
954
min-width: $small-size;
955
padding: $container-padding;
956
colorswatch:only-child {
958
&,
959
overlay {
960
// border-radius: 0;
961
}
962
}
963
}
964
/**
966
* Links
967
*/
968
*:link {
970
color: $primary;
971
}
972
*:visited {
974
color: $visited;
975
}
976
button.link {
978
&:link {
979
color: $primary;
980
@include ink-color($primary);
981
}
982
&:visited {
984
color: $visited;
985
@include ink-color($visited);
986
}
987
> label {
989
text-decoration-line: underline;
990
}
991
}
992
/**
994
* GtkSpinButton
995
*/
996
spinbutton {
998
&:not(.vertical) {
999
// in this horizontal configuration, the whole spinbutton
1000
// behaves as the entry, so we extend the entry styling
1001
// and nuke the style on the internal entry
1002
@extend %entry;
1003
padding: 0;
1005
entry {
1007
min-width: $large-size - 8px * 2;
1008
// reset all the other props since the spinbutton node is styled here
1009
margin: 0;
1010
border-image: none;
1011
border-radius: 0;
1012
box-shadow: none;
1013
background-color: transparent;
1014
}
1015
button {
1017
@extend %button-flat-basic;
1018
@extend %button-small;
1019
// margin: $container-padding;
1021
border: solid $container-padding transparent;
1022
// Remove unwanted focus indicator
1024
&:focus:not(:hover):not(:active) {
1025
box-shadow: inset 0 0 0 9999px transparent;
1026
}
1027
&.up:dir(ltr),
1029
&.down:dir(rtl) {
1030
margin-left: -$container-padding / 2;
1031
}
1032
&.up:dir(rtl),
1034
&.down:dir(ltr) {
1035
margin-right: -$container-padding / 2;
1036
}
1037
}
1038
}
1039
// OSD horizontal
1041
.osd &:not(.vertical) {
1042
}
1043
// Vertical
1045
&.vertical {
1046
// in the vertical configuration, we treat the spinbutton
1047
// as a box, and tweak the style of the entry in the middle
1048
// so that it's linked
1049
// FIXME: this should not be set at all, but otherwise it gets the wrong
1051
// color
1052
caret-color: $primary;
1053
// FIXME: this should not be set at all, but otherwise it gets the wrong
1055
// color
1056
&:disabled {
1057
color: disabled($on-surface);
1058
}
1059
entry {
1061
@extend %entry_raised;
1062
min-height: $medium-size;
1064
min-width: $large-size;
1065
padding: 0;
1066
}
1067
button {
1069
min-height: $medium-size;
1070
min-width: $large-size;
1071
padding: 0;
1072
@extend %button-flat-basic;
1074
// Remove unwanted focus indicator
1076
&:focus:not(:hover):not(:active) {
1077
box-shadow: inset 0 0 0 9999px transparent;
1078
}
1079
&.up {
1081
border-radius: $corner-radius $corner-radius 0 0;
1082
}
1083
&.down {
1085
border-radius: 0 0 $corner-radius $corner-radius;
1086
}
1087
}
1088
}
1089
// OSD vertical
1091
.osd &.vertical {
1092
}
1093
// Misc
1095
treeview &:not(.vertical) {
1096
min-height: 0;
1097
border-style: none;
1098
border-radius: 0;
1099
entry {
1101
min-height: 0;
1102
padding: 1px 2px;
1103
}
1104
}
1105
}
1106
/**
1108
* ComboBoxes
1109
*/
1110
combobox {
1112
arrow {
1113
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1114
min-height: 16px;
1115
min-width: 16px;
1116
}
1117
// workaround for menuitem selection
1119
decoration {
1120
transition: none;
1121
}
1122
button.combo cellview {
1124
&:dir(ltr) {
1125
margin-left: 8px - ($medium-size - 16px) / 2;
1126
}
1127
&:dir(rtl) {
1129
margin-right: 8px - ($medium-size - 16px) / 2;
1130
}
1131
}
1132
menu {
1134
padding: 2px 0;
1135
menuitem {
1137
min-height: $medium-size - 2px * 2;
1138
padding: 0 8px;
1139
}
1140
// overflow arrows
1142
> arrow {
1143
&.top {
1144
margin-top: -2px;
1145
}
1146
&.bottom {
1148
margin-top: 2px * 2;
1149
margin-bottom: -2px * 3;
1150
}
1151
}
1152
}
1153
&.linked {
1155
button:nth-child(2) {
1156
&:dir(ltr) {
1157
@extend %linked-not-first-child;
1158
}
1159
&:dir(rtl) {
1161
@extend %linked-not-last-child;
1162
}
1163
}
1164
}
1165
> .linked:not(.vertical) > entry:not(:only-child) {
1167
border-radius: $corner-radius $corner-radius 0 0;
1168
&:first-child {
1170
margin-right: -$medium-size;
1171
padding-right: $medium-size;
1172
}
1173
&:last-child {
1175
margin-left: -$medium-size;
1176
padding-left: $medium-size;
1177
}
1178
}
1179
> .linked:not(.vertical) > button:not(:only-child) {
1181
@extend %button-flat-activatable;
1182
// @extend %button-small;
1183
min-height: 16px;
1185
min-width: 16px;
1186
margin: ($medium-size - $small-size) / 2;
1187
padding: ($small-size - 16px) / 2;
1188
border-radius: $circular-radius;
1189
}
1190
}
1191
// the combo is a composite widget so the way we do button linking doesn't
1193
// work, special case needed. See
1194
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1195
.linked:not(.vertical) > combobox {
1197
&:not(:first-child) > box > button.combo {
1198
@extend %linked-not-first-child;
1199
}
1200
&:not(:last-child) > box > button.combo {
1202
@extend %linked-not-last-child;
1203
}
1204
}
1205
.linked.vertical > combobox {
1207
&:not(:first-child) > box > button.combo {
1208
@extend %linked-vertical-not-first-child;
1209
}
1210
&:not(:last-child) > box > button.combo {
1212
@extend %linked-vertical-not-last-child;
1213
}
1214
}
1215
button.combo:only-child {
1217
border-radius: $corner-radius $corner-radius 0 0;
1218
font-weight: normal;
1219
@include entry(normal);
1221
&:focus {
1223
@include entry(focus);
1224
}
1225
&:drop(active),
1227
&:hover {
1228
@include entry(hover);
1229
}
1230
&:checked {
1232
@include entry(checked);
1233
}
1234
&:disabled {
1236
@include entry(disabled);
1237
}
1238
arrow {
1240
transition: color $duration $ease-out;
1241
color: hint($on-surface);
1242
&:disabled {
1244
color: disabled-hint($on-surface);
1245
}
1246
}
1247
}
1248
/**
1250
* Toolbars
1251
*/
1252
toolbar {
1254
-GtkWidget-window-dragging: true;
1255
padding: 2px;
1256
background-color: $background;
1257
button {
1259
@extend %button-flat;
1260
}
1261
// on OSD
1263
.osd & {
1264
background-color: transparent;
1265
}
1266
// stand-alone OSD toolbars
1268
&.osd {
1269
@extend %toolbar-osd;
1270
// positional classes for `attached` osd toolbars
1272
&.left,
1273
&.right,
1274
&.top,
1275
&.bottom {
1276
border-radius: 0;
1277
}
1278
&.bottom {
1280
box-shadow: none;
1281
background-color: transparent;
1282
background-image:
1283
linear-gradient(
1284
to bottom,
1285
transparent,
1286
rgba(black, .1) 30%,
1287
rgba(black, .2) 50%,
1288
rgba(black, .4)
1289
);
1290
}
1291
}
1292
// toolbar separators
1294
&.horizontal > separator {
1295
margin: 2px;
1296
}
1297
&.vertical > separator {
1299
margin: 2px;
1300
}
1301
&:not(.inline-toolbar):not(.osd) {
1303
scale,
1304
entry,
1305
spinbutton,
1306
button {
1307
margin: 2px;
1308
}
1309
.linked entry,
1311
.linked spinbutton,
1312
.linked button {
1313
&:not(:first-child) {
1314
margin-left: 0;
1315
}
1316
&:not(:last-child) {
1318
margin-right: 0;
1319
}
1320
}
1321
spinbutton {
1323
entry,
1324
button {
1325
margin: 0;
1326
}
1327
}
1328
switch {
1330
margin: 2px + $container-padding 2px;
1331
}
1332
}
1333
}
1334
%toolbar-osd {
1336
transition: $transition-shadow;
1337
padding: $container-padding;
1338
border-radius: $corner-radius;
1339
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1340
background-color: $surface;
1341
&:backdrop {
1343
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1344
}
1345
}
1346
// searchbar, location-bar & inline-toolbar
1348
.inline-toolbar {
1349
padding: $container-padding;
1350
border-style: solid;
1351
border-width: 0 1px 1px;
1352
border-color: divider($on-surface);
1353
background-color: $base;
1354
}
1355
searchbar > revealer > box,
1357
.location-bar {
1358
padding: $container-padding;
1359
border-style: solid;
1360
border-width: 0 0 1px;
1361
border-color: divider($on-surface);
1362
background-color: $background;
1363
background-clip: border-box;
1364
}
1365
searchbar > revealer > box {
1367
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1368
margin: -6px;
1369
padding: $container-padding;
1370
}
1371
/**
1373
* Header bars
1374
*/
1375
.titlebar {
1377
transition: background-color $duration $ease-out, color $duration $ease-out;
1378
border-radius: $corner-radius $corner-radius 0 0;
1379
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1380
background-color: $titlebar;
1381
color: $on-titlebar;
1382
&:disabled {
1384
color: disabled($on-titlebar);
1385
}
1386
&:backdrop {
1388
background-color: $titlebar-backdrop;
1389
color: hint($on-titlebar);
1390
&:disabled {
1392
color: disabled-hint($on-titlebar);
1393
}
1394
}
1395
.title {
1397
padding-left: 12px;
1398
padding-right: 12px;
1399
font-weight: bold;
1400
}
1401
.subtitle {
1403
padding-left: 12px;
1404
padding-right: 12px;
1405
font-size: smaller;
1406
}
1407
.subtitle,
1409
.dim-label {
1410
transition: color $duration $ease-out;
1411
color: hint($on-titlebar);
1412
&:backdrop {
1414
color: disabled($on-titlebar);
1415
}
1416
}
1417
// Don't draw titlebar above titlebar
1419
.titlebar {
1420
background-color: transparent;
1421
box-shadow: none;
1422
}
1423
// The separator for split headerbars
1425
headerbar + separator {
1426
background-color: divider($on-titlebar);
1427
}
1428
entry {
1430
box-shadow: inset 0 -1px stroke($on-titlebar);
1431
background-color: entry-fill($on-titlebar);
1432
color: $on-titlebar;
1433
&:disabled {
1435
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1436
background-color: entry-fill($on-titlebar);
1437
color: disabled($on-titlebar);
1438
}
1439
image {
1441
color: hint($on-titlebar);
1442
&:hover,
1444
&:active {
1445
color: $on-titlebar;
1446
}
1447
&:disabled {
1449
color: disabled($on-titlebar);
1450
}
1451
}
1452
}
1453
.linked:not(.vertical) > entry:not(:only-child) {
1455
border-radius: $corner-radius $corner-radius 0 0;
1456
}
1457
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1459
@extend %button-flat;
1460
border-image:
1462
radial-gradient(
1463
circle closest-corner at center calc(100% - 1px),
1464
$titlebar-indicator 0%,
1465
transparent 0%
1466
) 0 0 0 / 0 0 0;
1467
background-color: transparent;
1468
color: hint($on-titlebar);
1469
@include ink-color($on-titlebar);
1470
&:disabled {
1472
color: disabled-hint($on-titlebar);
1473
}
1474
@at-root %titlebar-button-checked,
1476
&:checked {
1477
border-image:
1478
radial-gradient(
1479
circle closest-corner at center calc(100% - 1px),
1480
$titlebar-indicator 100%,
1481
transparent 0%
1482
) 0 0 2 / 0 0 2px;
1483
background-color: transparent;
1484
color: $on-titlebar;
1485
@include ink-color($on-titlebar);
1486
&:disabled {
1488
background-color: transparent;
1489
color: disabled($on-titlebar);
1490
}
1491
}
1492
&:backdrop {
1494
color: disabled($on-titlebar);
1495
&:disabled {
1497
color: disabled-hint($on-titlebar);
1498
}
1499
&:checked {
1501
color: hint($on-titlebar);
1502
&:disabled {
1504
color: disabled-hint($on-titlebar);
1505
}
1506
}
1507
}
1508
}
1509
button.suggested-action, button.destructive-action {
1511
&:disabled {
1512
background-color: fill($on-titlebar);
1513
color: disabled($on-titlebar);
1514
}
1515
}
1516
// FIXME: Ugly overriding
1518
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1519
min-width: 120px - 8px * 2;
1520
}
1521
// FIXME: Ugly overriding
1523
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1524
min-width: 0;
1525
padding-left: ($medium-size - 24px) / 2;
1526
padding-right: ($medium-size - 24px) / 2;
1527
}
1528
&.selection-mode {
1530
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1531
// but let's keep it for backwards compatibility.
1532
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1533
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1534
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1535
background-color: $primary;
1536
color: $on-primary;
1537
&:backdrop {
1539
color: hint($on-primary);
1540
}
1541
.subtitle:link {
1543
color: $on-primary;
1544
}
1545
button:not(.suggested-action):not(.destructive-action) {
1547
border-image:
1548
radial-gradient(
1549
circle closest-corner at center calc(100% - 1px),
1550
currentcolor 0%,
1551
transparent 0%
1552
) 0 0 0 / 0 0 0;
1553
color: $on-primary;
1554
&:disabled {
1556
color: disabled($on-primary);
1557
}
1558
&:checked {
1560
border-image:
1561
radial-gradient(
1562
circle closest-corner at center calc(100% - 1px),
1563
currentcolor 100%,
1564
transparent 0%
1565
) 0 0 2 / 0 0 2px;
1566
color: $on-primary;
1567
&:disabled {
1569
color: disabled($on-primary);
1570
}
1571
}
1572
&:backdrop {
1574
color: hint($on-primary);
1575
&:disabled {
1577
color: disabled-hint($on-primary);
1578
}
1579
&:checked {
1581
color: hint($on-primary);
1582
&:disabled {
1584
color: disabled-hint($on-primary);
1585
}
1586
}
1587
}
1588
}
1589
.selection-menu {
1591
padding-left: 16px;
1592
padding-right: 16px;
1593
arrow {
1595
-GtkArrow-arrow-scaling: 1;
1596
}
1597
.arrow {
1599
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1600
}
1601
}
1602
}
1603
.selection-mode {
1605
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1606
background-color: $primary;
1607
}
1608
// squared corners when the window is maximized, tiled, or fullscreen
1610
.tiled &,
1611
.tiled-top &,
1612
.tiled-right &,
1613
.tiled-bottom &,
1614
.tiled-left &,
1615
.maximized &,
1616
.fullscreen & {
1617
border-radius: 0;
1618
box-shadow: $shadow-z1;
1619
}
1620
&.default-decoration {
1622
min-height: $small-size;
1623
padding: $container-padding;
1624
box-shadow: inset 0 1px highlight($titlebar);
1625
.tiled &,
1627
.maximized &,
1628
.fullscreen & {
1629
box-shadow: none;
1630
}
1631
button.titlebutton {
1633
min-height: $small-size;
1634
min-width: $small-size;
1635
margin: 0;
1636
padding: 0;
1637
}
1638
// workaround for non-animatable buttons
1640
.background:not(.csd) & button.titlebutton:active {
1641
background-size: 1000% 1000%;
1642
}
1643
}
1644
.solid-csd & {
1646
&:dir(rtl), &:dir(ltr) { // specificity bump
1647
border-radius: 0;
1648
box-shadow: $shadow-z1; // just remove the highlight
1649
}
1650
}
1651
}
1652
headerbar {
1654
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1655
min-height: $large-size;
1656
padding: 0 $container-padding;
1657
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1659
entry,
1660
spinbutton,
1661
button {
1662
margin-top: $container-padding;
1663
margin-bottom: $container-padding;
1664
}
1665
separator.titlebutton {
1667
margin-top: $large-size / 4;
1668
margin-bottom: $large-size / 4;
1669
background-color: divider($on-titlebar);
1670
}
1671
switch {
1673
margin-top: ($large-size - 24px) / 2;
1674
margin-bottom: ($large-size - 24px) / 2;
1675
}
1676
// reset button margins of the spinbutton
1678
spinbutton button {
1679
margin-top: 0;
1680
margin-bottom: 0;
1681
}
1682
// FIXME: This is a hacky workaround.
1684
.entry-tag {
1685
margin-top: 5px;
1686
margin-bottom: 5px;
1687
}
1688
}
1689
// Development versions of apps to use a differently styled headerbar
1691
window.devel .titlebar:not(.selection-mode) {
1692
}
1693
/**
1695
* Pathbars
1696
*/
1697
%pathbar_button,
1699
.path-bar.linked:not(.vertical) > button {
1700
@extend %button-flat-basic;
1701
padding-left: ($medium-size - 24px) / 2;
1703
padding-right: ($medium-size - 24px) / 2;
1704
border-image:
1705
radial-gradient(
1706
circle closest-corner at center calc(100% - 1px),
1707
$primary 0%,
1708
transparent 0%
1709
) 0 0 0 / 0 0 0;
1710
border-radius: $corner-radius;
1711
&:checked {
1713
border-image:
1714
radial-gradient(
1715
circle closest-corner at center calc(100% - 1px),
1716
$primary 100%,
1717
transparent 0%
1718
) 0 0 2 / 0 0 2px;
1719
color: $on-surface;
1720
&,
1722
&:disabled {
1723
background-color: transparent;
1724
}
1725
}
1726
label:not(:only-child) {
1728
&:first-child {
1729
margin-left: 0;
1730
}
1731
&:last-child {
1733
margin-right: 0;
1734
}
1735
}
1736
&.text-button {
1738
min-width: 0;
1739
}
1740
&.slider-button {
1742
padding-left: (24px - 16px) / 2;
1743
padding-right: (24px - 16px) / 2;
1744
}
1745
}
1746
/**
1748
* Tree Views
1749
*/
1750
treeview.view {
1752
@at-root * {
1753
-GtkTreeView-horizontal-separator: 4;
1754
-GtkTreeView-grid-line-width: 1;
1755
-GtkTreeView-grid-line-pattern: '';
1756
-GtkTreeView-tree-line-width: 1;
1757
-GtkTreeView-tree-line-pattern: '';
1758
-GtkTreeView-expander-size: 16;
1759
}
1760
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1762
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1763
// FIXME: Avoid transparency background-color being slightly darker
1765
&:selected {
1766
background-color: $base;
1767
background-image: image($overlay-selected);
1768
}
1769
// to avoid borders being overridden by the previously set props
1771
rubberband {
1772
@extend %rubberband;
1773
}
1774
&:hover,
1776
&:selected {
1777
border-radius: 0;
1778
}
1779
&.separator {
1781
min-height: 1px + 2px * 2;
1782
color: divider($on-surface);
1783
}
1784
&:drop(active) {
1786
// FIXME: box-shadow, background-color and background-image are not available here.
1787
border-style: solid none;
1788
border-width: 9999px;
1789
border-color: overlay("hover", $on-surface);
1790
&.after {
1792
border-top-style: none;
1793
}
1794
&.before {
1796
border-bottom-style: none;
1797
}
1798
}
1799
&.expander {
1801
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1802
-gtk-icon-transform: rotate(-90deg);
1803
&:dir(rtl) {
1805
-gtk-icon-transform: rotate(90deg);
1806
}
1807
&:checked {
1809
-gtk-icon-transform: unset;
1810
}
1811
color: hint($on-surface);
1813
&:hover,
1815
&:active {
1816
color: $on-surface;
1817
}
1818
&:disabled {
1820
color: disabled-hint($on-surface);
1821
}
1822
}
1823
&.progressbar { // progress bar in treeviews
1825
border-bottom: $bar-size solid $primary;
1826
box-shadow: none;
1827
background-color: transparent;
1828
background-image: none;
1829
&:selected:hover {
1831
box-shadow: none;
1832
}
1833
}
1834
&.trough { // progress bar trough in treeviews
1836
border-bottom: $bar-size solid disabled-stroke($on-surface);
1837
box-shadow: none;
1838
background-color: transparent;
1839
background-image: none;
1840
&:selected:hover {
1842
box-shadow: none;
1843
}
1844
}
1845
header {
1847
button {
1848
padding: 2px 6px;
1849
border-style: none solid solid none;
1850
border-width: 1px;
1851
border-color: divider($on-surface);
1852
border-radius: 0;
1853
background-clip: border-box;
1854
color: hint($on-surface);
1855
@include ink-color($on-surface);
1856
@include list-item;
1857
&:disabled {
1859
color: disabled-hint($on-surface);
1860
}
1861
&,
1863
&:disabled {
1864
background-color: $base;
1865
}
1866
&:last-child {
1868
border-right-style: none;
1869
}
1870
}
1871
}
1872
button.dnd,
1874
header.button.dnd { // for treeview-like derive widgets
1875
padding: 2px 6px;
1876
border-style: none solid solid;
1877
border-width: 1px;
1878
border-color: divider($on-surface);
1879
border-radius: 0;
1880
box-shadow: none;
1881
background-color: $base;
1882
background-clip: border-box;
1883
color: $primary;
1884
}
1885
// see tests/testaccel to test
1887
acceleditor > label {
1888
background-color: $primary;
1889
}
1890
}
1891
/**
1893
* Menus
1894
*/
1895
menubar,
1897
.menubar {
1898
-GtkWidget-window-dragging: true;
1899
padding: 0;
1900
// box-shadow: inset 0 -1px divider($on-surface);
1901
background-color: $titlebar;
1902
color: $on-titlebar;
1903
&:backdrop {
1905
background-color: $titlebar-backdrop;
1906
color: hint($on-titlebar);
1907
}
1908
.csd & {
1910
transition: $transition;
1911
}
1912
> menuitem {
1914
transition: $transition;
1915
min-height: 20px;
1916
padding: 4px 8px;
1917
color: hint($on-titlebar);
1918
&:hover { // Seems like it :hover even with keyboard focus
1920
transition: none;
1921
background-color: overlay("activated", $on-titlebar);
1922
color: $on-titlebar;
1923
}
1924
&:disabled {
1926
color: disabled-hint($on-titlebar);
1927
}
1928
}
1929
}
1930
// Needed to make the border-radius of menus work
1932
// otherwise the background bleeds out of the menu edges
1933
.background.popup {
1934
background-color: transparent;
1935
}
1936
menu,
1938
.menu,
1939
.context-menu {
1940
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1941
padding: 4px 0;
1942
box-shadow: inset 0 1px highlight($surface);
1943
background-color: $surface;
1944
background-clip: border-box;
1945
border: 1px solid divider($on-surface); // adds borders in a non composited env
1946
.csd & {
1948
border: none; // axes borders in a composited env
1949
border-radius: $corner-radius;
1950
}
1951
menuitem {
1953
transition: background-color $duration $ease-out;
1954
min-height: 20px;
1955
min-width: 40px;
1956
padding: 4px 8px;
1957
color: $on-surface;
1958
font: initial;
1959
text-shadow: none;
1960
&:hover {
1962
transition: none;
1963
background-color: overlay("hover", $on-surface);
1964
}
1965
&:disabled {
1967
color: disabled($on-surface);
1968
}
1969
// submenu indicators
1971
arrow {
1972
min-height: 16px;
1973
min-width: 16px;
1974
color: hint($on-surface);
1975
&:disabled {
1977
color: disabled-hint($on-surface);
1978
}
1979
&:dir(ltr) {
1981
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1982
margin-left: 8px;
1983
}
1984
&:dir(rtl) {
1986
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1987
margin-right: 8px;
1988
}
1989
}
1990
// avoids labels color being overridden, see
1992
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1993
label {
1994
&:dir(rtl),
1995
&:dir(ltr) {
1996
// color: inherit;
1997
}
1998
}
1999
}
2000
// overflow arrows
2002
> arrow {
2003
min-height: 16px;
2004
min-width: 16px;
2005
padding: 4px;
2006
background-color: $surface;
2007
color: hint($on-surface);
2008
&.top {
2010
margin-top: -4px;
2011
border-bottom: 1px solid divider($on-surface);
2012
border-radius: $corner-radius $corner-radius 0 0;
2013
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2014
}
2015
&.bottom {
2017
margin-top: 4px * 2;
2018
margin-bottom: -4px * 3;
2019
border-top: 1px solid divider($on-surface);
2020
border-radius: 0 0 $corner-radius $corner-radius;
2021
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2022
}
2023
&:hover {
2025
background-image: image(overlay("hover", $on-surface));
2026
}
2027
&:disabled {
2029
border-color: transparent;
2030
background-color: transparent;
2031
color: transparent;
2032
// color: disabled-hint($on-surface);
2033
}
2034
}
2035
separator {
2037
margin: 4px 0;
2038
}
2039
}
2040
menuitem {
2042
accelerator {
2043
color: hint($on-surface);
2044
}
2045
&:disabled accelerator {
2047
color: disabled-hint($on-surface);
2048
}
2049
}
2050
/**
2052
* Popovers
2053
*/
2054
popover.background {
2056
transition: $transition-shadow;
2057
padding: 2px;
2058
box-shadow: $shadow-z4; // TODO: this should really have a highlight
2059
background-color: $surface;
2060
&:backdrop {
2062
box-shadow: $shadow-z2;
2063
}
2064
&, .csd & {
2066
border-style: solid;
2067
border-width: 1px;
2068
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
2069
border-radius: $corner-radius + 1px;
2070
}
2071
> stack {
2073
margin: -4px; // remove extra padding from menu style popovers
2074
}
2075
> toolbar {
2077
margin: -2px;
2078
}
2079
> list,
2081
> .view,
2082
> toolbar {
2083
border-style: none;
2084
box-shadow: none;
2085
background-color: transparent;
2086
}
2087
// FIXME: Use the popover color instead of transparent as a workaround for .view
2089
list,
2090
.view:not(:selected),
2091
toolbar {
2092
background-color: $surface;
2093
}
2094
&.touch-selection,
2096
&.magnifier,
2097
&.osd {
2098
// @extend %osd;
2099
}
2100
button:not(.suggested-action):not(.destructive-action) {
2102
// @extend %button-flat;
2103
}
2104
.linked:not(.vertical) > entry:not(:only-child) {
2106
// border-radius: $corner-radius $corner-radius 0 0;
2107
}
2108
&.menu button,
2110
button.model {
2111
@extend %button-flat;
2112
min-height: 32px;
2114
padding: 0 8px;
2115
border-radius: $corner-radius;
2116
&:checked {
2118
// color: $primary;
2119
}
2120
}
2121
separator {
2123
margin: 4px 0;
2124
}
2125
list separator {
2127
margin: 0;
2128
}
2129
}
2130
/**
2132
* Notebooks
2133
*/
2134
notebook {
2136
frame > paned > & > header,
2137
&.frame > header {
2138
background-color: $base;
2139
}
2140
&:focus tab:checked {
2142
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
2143
}
2144
> header {
2146
border-width: 1px;
2147
border-color: divider($on-surface);
2148
background-color: $background;
2149
background-clip: border-box;
2150
&.top {
2152
border-bottom-style: solid;
2153
> tabs {
2155
margin-bottom: -1px;
2156
> tab {
2158
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2159
&:checked {
2161
border-image-source: linear-gradient(to top, $primary 2px, divider($on-surface) 2px);
2162
}
2163
&.reorderable-page {
2165
border-image-width: 0 1px 2px;
2166
}
2167
}
2168
}
2169
}
2170
&.bottom {
2172
border-top-style: solid;
2173
> tabs {
2175
margin-top: -1px;
2176
> tab {
2178
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2179
&:checked {
2181
border-image-source: linear-gradient(to bottom, $primary 2px, divider($on-surface) 2px);
2182
}
2183
&.reorderable-page {
2185
border-image-width: 2px 1px 0;
2186
}
2187
}
2188
}
2189
}
2190
&.left {
2192
border-right-style: solid;
2193
> tabs {
2195
margin-right: -1px;
2196
> tab {
2198
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2199
&:checked {
2201
border-image-source: linear-gradient(to left, $primary 2px, divider($on-surface) 2px);
2202
}
2203
&.reorderable-page {
2205
border-image-width: 1px 2px 1px 0;
2206
}
2207
}
2208
}
2209
}
2210
&.right {
2212
border-left-style: solid;
2213
> tabs {
2215
margin-left: -1px;
2216
> tab {
2218
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2219
&:checked {
2221
border-image-source: linear-gradient(to right, $primary 2px, divider($on-surface) 2px);
2222
}
2223
&.reorderable-page {
2225
border-image-width: 1px 0 1px 2px;
2226
}
2227
}
2228
}
2229
}
2230
&.top > tabs > arrow {
2232
@extend %notebook_vert_arrows;
2233
border-top-style: none;
2235
}
2236
&.bottom > tabs > arrow {
2238
@extend %notebook_vert_arrows;
2239
border-bottom-style: none;
2241
}
2242
@at-root %notebook_vert_arrows {
2244
padding-left: 4px;
2245
padding-right: 4px;
2246
&.down {
2248
margin-left: -8px;
2249
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2250
}
2251
&.up {
2253
margin-right: -8px;
2254
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2255
}
2256
}
2257
&.left > tabs > arrow {
2259
@extend %notebook_horz_arrows;
2260
border-left-style: none;
2262
}
2263
&.right > tabs > arrow {
2265
@extend %notebook_horz_arrows;
2266
border-right-style: none;
2268
}
2269
@at-root %notebook_horz_arrows {
2271
padding-top: 4px;
2272
padding-bottom: 4px;
2273
&.down {
2275
margin-top: -8px;
2276
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2277
}
2278
&.up {
2280
margin-bottom: -8px;
2281
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2282
}
2283
}
2284
> tabs > arrow {
2286
min-height: 16px;
2287
min-width: 16px;
2288
border-radius: 0;
2289
color: hint($on-surface);
2290
@extend %ripple;
2291
@include ink-color($on-surface);
2292
&:disabled {
2294
color: disabled-hint($on-surface);
2295
}
2296
}
2297
tab {
2299
transition: $transition,
2300
background-size 0ms,
2301
background-image 0ms;
2302
min-height: $small-size;
2303
min-width: $small-size;
2304
padding: $container-padding 12px;
2305
border-width: 1px; // for reorderable tabs
2307
border-color: transparent; //
2308
outline: none;
2310
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2311
background-repeat: no-repeat;
2312
background-position: center;
2313
background-size: 0% 0%;
2314
background-clip: border-box;
2315
color: hint($on-surface);
2317
font-weight: 500;
2318
&:hover {
2320
background-color: overlay("hover-alt", $on-surface);
2321
}
2322
&:disabled {
2324
color: disabled-hint($on-surface);
2325
}
2326
&:checked {
2328
transition: $transition,
2329
background-size $ripple-fade-in-duration $ease-out,
2330
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2331
background-color: transparent;
2332
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2333
background-size: 1000% 1000%;
2334
background-clip: padding-box;
2335
color: $on-surface;
2336
&:disabled {
2338
color: disabled($on-surface);
2339
}
2340
&.reorderable-page {
2342
border-color: divider($on-surface);
2343
background-color: $base;
2344
}
2345
}
2346
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2348
> box {
2349
transition: background-color $duration $ease-out;
2350
margin: -$container-padding -12px;
2351
padding: $container-padding 12px;
2352
&:drop(active) {
2354
background-color: overlay("hover", $on-surface);
2355
}
2356
}
2357
// colors the button like the label, overridden otherwise
2359
button.flat {
2360
@extend %button-small;
2361
&:last-child {
2363
margin-left: $container-padding;
2364
margin-right: $container-padding - 12px;
2365
}
2366
&:first-child {
2368
margin-left: $container-padding - 12px;
2369
margin-right: $container-padding;
2370
}
2371
}
2372
}
2373
&.top,
2375
&.bottom {
2376
tabs {
2377
padding-left: 8px;
2378
padding-right: 8px;
2379
&:not(:only-child) {
2381
&:first-child {
2382
margin-left: 0;
2383
}
2384
&:last-child {
2386
margin-right: 0;
2387
}
2388
}
2389
tab.reorderable-page {
2391
border-style: none solid;
2392
}
2393
}
2394
}
2395
&.left,
2397
&.right {
2398
tabs {
2399
padding-top: 8px;
2400
padding-bottom: 8px;
2401
&:not(:only-child) {
2403
&:first-child {
2404
margin-top: 0;
2405
}
2406
&:last-child {
2408
margin-bottom: 0;
2409
}
2410
}
2411
tab.reorderable-page {
2413
border-style: solid none;
2414
}
2415
}
2416
}
2417
}
2418
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2420
background-color: $base;
2421
}
2422
}
2423
/**
2425
* Scrollbars
2426
*/
2427
scrollbar {
2429
$_slider_min_length: 24px;
2430
// disable steppers
2432
@at-root * {
2433
-GtkScrollbar-has-backward-stepper: false;
2434
-GtkScrollbar-has-forward-stepper: false;
2435
}
2436
transition: $transition;
2438
background-color: $base;
2439
// scrollbar border
2441
&.top { border-bottom: 1px solid divider($on-surface); }
2442
&.bottom { border-top: 1px solid divider($on-surface); }
2443
&.left { border-right: 1px solid divider($on-surface); }
2444
&.right { border-left: 1px solid divider($on-surface); }
2445
// slider
2447
slider {
2448
transition: background-color $duration $ease-out;
2449
min-width: 8px;
2450
min-height: 8px;
2451
border: 4px solid transparent;
2452
border-radius: $circular-radius;
2453
background-clip: padding-box;
2454
background-color: disabled($on-surface);
2455
&:hover {
2457
background-color: hint($on-surface);
2458
}
2459
&:active {
2461
background-color: $on-surface;
2462
}
2463
&:disabled {
2465
background-color: disabled-hint($on-surface);
2466
}
2467
}
2468
&.fine-tune {
2470
slider {
2471
min-width: 4px;
2472
min-height: 4px;
2473
}
2474
&.horizontal slider {
2476
margin: 2px 0;
2477
}
2478
&.vertical slider {
2480
margin: 0 2px;
2481
}
2482
}
2483
&.overlay-indicator {
2485
&:not(.fine-tune) slider {
2486
transition-property: background-color, min-height, min-width;
2487
}
2488
&:not(.dragging):not(.hovering) {
2490
border-color: transparent;
2491
background-color: transparent;
2492
slider {
2494
min-width: 4px;
2495
min-height: 4px;
2496
margin: 4px - 1px;
2497
border: 1px solid rgba($base, .3);
2498
}
2499
button {
2501
min-width: 4px;
2502
min-height: 4px;
2503
margin: 4px - 1px;
2504
border: 1px solid rgba($base, .3);
2505
border-radius: $circular-radius;
2506
background-color: disabled($on-surface);
2507
background-clip: padding-box;
2508
-gtk-icon-source: none;
2509
&:disabled {
2511
background-color: disabled-hint($on-surface);
2512
}
2513
}
2514
&.horizontal {
2516
slider {
2517
min-width: $_slider_min_length;
2518
}
2519
button {
2521
min-width: 8px;
2522
}
2523
}
2524
&.vertical {
2526
slider {
2527
min-height: $_slider_min_length;
2528
}
2529
button {
2531
min-height: 8px;
2532
}
2533
}
2534
}
2535
&.dragging,
2537
&.hovering {
2538
background-color: rgba($surface, .9);
2539
}
2540
}
2541
&.horizontal slider {
2543
min-width: $_slider_min_length;
2544
}
2545
&.vertical slider {
2547
min-height: $_slider_min_length;
2548
}
2549
// button styling
2551
button {
2552
@extend %button-flat-basic;
2553
min-width: 16px;
2555
min-height: 16px;
2556
padding: 0;
2557
border-radius: 0;
2558
}
2559
// button icons
2561
&.vertical {
2562
button {
2563
&.down {
2564
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2565
}
2566
&.up {
2568
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2569
}
2570
}
2571
}
2572
&.horizontal {
2574
button {
2575
&.down {
2576
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2577
}
2578
&.up {
2580
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2581
}
2582
}
2583
}
2584
}
2585
/**
2588
* Switch
2589
*/
2590
switch {
2592
transition: all $duration $ease-out;
2593
margin: $container-padding 0;
2594
padding: 0 2px;
2595
border: 5px solid transparent;
2596
border-radius: $circular-radius;
2597
background-color: stroke($on-surface);
2598
background-clip: padding-box;
2599
font-size: 0;
2600
&:checked {
2602
background-color: rgba($primary, .5);
2603
}
2604
&:disabled {
2606
opacity: .5;
2607
}
2608
// hide on/off icons for >=3.24.5
2610
image {
2611
margin: -8px;
2612
-gtk-icon-transform: scale(0);
2613
}
2614
slider {
2616
transition: all $duration $ease-out;
2617
min-width: 20px;
2618
min-height: 20px;
2619
margin: -3px -2px;
2620
border-radius: $circular-radius;
2621
outline: none;
2622
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2623
background-color: $switch-surface;
2624
}
2625
&:hover slider {
2627
box-shadow: 0 0 0 10px overlay("hover", $on-surface), $shadow-z1;
2628
}
2629
&:focus slider {
2631
box-shadow: 0 0 0 10px overlay("focus", $on-surface), $shadow-z1;
2632
}
2633
&:checked slider {
2635
background-color: $primary;
2636
}
2637
&:checked:hover slider {
2639
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2640
}
2641
&:checked:focus slider {
2643
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2644
}
2645
row:selected & {
2647
}
2648
}
2649
/**
2651
* Check and Radio items
2652
*/
2653
// draw regular check and radio items using our PNG assets
2655
// all assets are rendered from assets.svg. never add pngs directly
2656
// selection-mode
2658
.view.content-view.check:not(list),
2659
.content-view:not(list) check {
2660
min-height: 40px;
2661
min-width: 40px;
2662
margin: 0;
2663
padding: 0;
2664
box-shadow: none;
2665
background-color: transparent;
2666
background-image: none;
2667
-gtk-icon-shadow: $icon-shadow-z2;
2668
&:hover,
2670
&:active {
2671
-gtk-icon-shadow: $icon-shadow-z4;
2672
}
2673
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2675
&#{$class} {
2676
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2677
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2679
}
2680
}
2681
}
2682
checkbutton,
2684
radiobutton {
2685
outline: none;
2686
}
2687
checkbutton.text-button,
2689
radiobutton.text-button {
2690
// this is for a nice focus on check and radios text
2691
padding: 2px;
2692
label:not(:only-child) {
2694
margin: 0 4px;
2695
}
2696
}
2697
$check-radio-size: 40px;
2699
check,
2701
radio {
2702
min-height: 24px;
2703
min-width: 24px;
2704
margin: -($check-radio-size - 24px) / 2;
2705
padding: ($check-radio-size - 24px) / 2;
2706
border-radius: $circular-radius;
2707
color: hint($on-surface);
2708
@extend %ripple;
2709
@include ink-color($on-surface);
2710
&:checked,
2712
&:indeterminate {
2713
color: $primary;
2714
@include ink-color($primary);
2715
}
2716
&:disabled {
2718
color: disabled-hint($on-surface);
2719
}
2720
&:only-child {
2722
// margin: -12px;
2723
}
2724
popover modelbutton.flat & {
2726
&,
2727
&:focus,
2728
&:hover,
2729
&:focus:hover,
2730
&:active,
2731
&:disabled {
2732
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2733
box-shadow: none;
2734
background-image: none;
2735
}
2736
&.left:dir(rtl) {
2738
margin-left: -12px;
2739
margin-right: -4px;
2740
}
2741
&.right:dir(ltr) {
2743
margin-left: -4px;
2744
margin-right: -12px;
2745
}
2746
}
2747
menu menuitem & {
2749
transition: none;
2750
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2751
padding: 0;
2752
&:dir(ltr) {
2754
margin-right: 8px;
2755
}
2756
&:dir(rtl) {
2758
margin-left: 8px;
2759
}
2760
&,
2762
&:hover,
2763
&:disabled {
2764
box-shadow: none;
2765
}
2766
}
2767
}
2768
%check,
2770
check {
2771
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2772
&:checked {
2774
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2775
}
2776
&:indeterminate {
2778
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2779
}
2780
}
2781
%radio,
2783
radio {
2784
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2785
&:checked {
2787
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2788
}
2789
&:indeterminate {
2791
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2792
}
2793
border-image-slice: $check-radio-size / 2px;
2795
border-image-width: $check-radio-size / 2;
2796
$radio-indicator-size: 10px / $check-radio-size / 2;
2798
border-image-source:
2800
-gtk-gradient(
2801
radial,
2802
center center, 0,
2803
center center, .001,
2804
to($primary),
2805
to(transparent)
2806
);
2807
&:checked:not(:indeterminate) {
2809
border-image-source:
2810
-gtk-gradient(
2811
radial,
2812
center center, 0,
2813
center center, $radio-indicator-size,
2814
to($primary),
2815
to(transparent)
2816
);
2817
&:disabled {
2819
border-image-source:
2820
-gtk-gradient(
2821
radial,
2822
center center, 0,
2823
center center, $radio-indicator-size,
2824
to(disabled-hint($on-surface)),
2825
to(transparent)
2826
);
2827
}
2828
}
2829
}
2830
%small_check,
2832
menu menuitem check {
2833
min-height: 16px;
2834
min-width: 16px;
2835
border-radius: $corner-radius;
2836
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2837
&:checked {
2839
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2840
}
2841
&:indeterminate {
2843
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2844
}
2845
}
2846
%small_radio,
2848
menu menuitem radio {
2849
min-height: 16px;
2850
min-width: 16px;
2851
border-image: none;
2852
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2853
&:checked {
2855
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2856
}
2857
&:indeterminate {
2859
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2860
}
2861
}
2862
// ANIMATION:
2864
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2865
// the transformation is set on the active state and it get reset on the checked state.
2866
radio:not(:checked):active {
2867
// -gtk-icon-transform: scale(0);
2868
}
2869
// Otherwise, treeview.view styling will be applied...
2871
treeview.view check,
2872
treeview.view radio {
2873
padding: 0;
2874
color: hint($on-surface);
2875
&:checked,
2877
&:indeterminate {
2878
color: $primary;
2879
}
2880
&:disabled {
2882
color: disabled-hint($on-surface);
2883
}
2884
&,
2886
&:hover,
2887
&:selected,
2888
&:selected:hover {
2889
box-shadow: none;
2890
background-color: transparent;
2891
}
2892
}
2893
treeview.view radio:checked {
2895
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2896
border-image: none;
2897
}
2898
/**
2900
* GtkScale
2901
*/
2902
scale {
2904
// sizing
2905
$_marks_length: 8px;
2906
$_marks_distance: 7px;
2907
$trough_size: 2px;
2909
$finetune_trough_size: 4px;
2910
$slider_size: 32px;
2912
$slider_margin: -($slider_size - $trough_size) / 2;
2914
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2915
$color_slider_margin: -($slider_size) * 3 / 4;
2917
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2918
min-height: $trough_size;
2920
min-width: $trough_size;
2921
&.horizontal {
2923
padding: ($medium-size - $trough_size) / 2 12px;
2924
}
2925
&.vertical {
2927
padding: 12px ($medium-size - $trough_size) / 2;
2928
}
2929
// the slider is inside the trough, so to have make it bigger there's a negative margin
2931
slider {
2932
min-height: $slider_size;
2933
min-width: $slider_size;
2934
margin: $slider_margin;
2935
}
2936
// click-and-hold the slider to activate
2938
&.fine-tune {
2939
&.horizontal {
2940
min-height: $finetune_trough_size;
2941
padding-top: ($medium-size - $finetune_trough_size) / 2;
2942
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2943
}
2944
&.vertical {
2946
min-width: $finetune_trough_size;
2947
padding-left: ($medium-size - $finetune_trough_size) / 2;
2948
padding-right: ($medium-size - $finetune_trough_size) / 2;
2949
}
2950
// to make the trough grow in fine-tune mode
2952
slider {
2953
margin: $finetune_slider_margin;
2954
}
2955
}
2956
// the backing bit
2958
trough {
2959
transition: background-color $duration $ease-out;
2960
outline: none;
2961
background-color: stroke($on-surface);
2962
&:disabled {
2964
background-color: disabled-stroke($on-surface);
2965
}
2966
}
2967
// the colored part of the backing bit
2969
highlight {
2970
transition: background-image $duration $ease-out;
2971
background-image: image($primary);
2972
&:disabled {
2974
background-color: $background;
2975
background-image: image(disabled-hint($on-surface));
2976
}
2977
}
2978
// this is another differently styled part of the backing bit, the most relevant use case is for example
2980
// in media player to indicate how much video stream as been cached
2981
fill {
2982
transition: background-color $duration $ease-out;
2983
background-color: stroke($on-surface);
2984
&:disabled {
2986
background-color: transparent;
2987
}
2988
}
2989
slider {
2991
transition: background-color $duration $ease-out,
2992
background-size $ripple-fade-out-duration $ease-out,
2993
background-image $ripple-fade-out-opacity-duration $ease-out;
2994
background-repeat: no-repeat;
2995
background-position: center;
2996
background-size: auto, 1000% 1000%;
2997
border-radius: 50%;
2998
color: $primary;
2999
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
3001
&#{$class} {
3002
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
3003
background-image:
3005
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
3006
radial-gradient(circle, transparent 10%, transparent 0%);
3007
}
3008
}
3009
&:hover {
3011
background-color: overlay("hover", $primary);
3012
}
3013
&:focus {
3015
background-color: overlay("focus", $primary);
3016
}
3017
&:active {
3019
$_url: 'assets/scale-slider#{$asset-suffix}';
3020
transition: background-color $duration $ease-out,
3022
background-size 0ms,
3023
background-image 0ms;
3024
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
3025
background-image:
3026
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
3027
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3028
background-size: auto, 0% 0%;
3029
}
3030
}
3031
marks,
3033
value {
3034
color: hint($on-surface);
3035
}
3036
indicator {
3038
background-color: stroke($on-surface);
3039
color: transparent;
3040
}
3041
//marks margins
3043
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
3044
(horizontal, bottom, bottom, top),
3045
(vertical, top, left, right),
3046
(vertical, bottom, right, left) {
3047
&.#{$scale_orient} marks {
3048
&.#{$marks_class} {
3049
margin-#{$marks_margin}: $_marks_distance;
3050
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
3051
}
3052
}
3053
&.#{$scale_orient}.fine-tune marks {
3055
&.#{$marks_class} {
3056
margin-#{$marks_margin}: $_marks_distance - 1px;
3057
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
3058
}
3059
}
3060
}
3061
&.horizontal {
3063
indicator {
3064
min-height: $_marks_length;
3065
min-width: 1px;
3066
}
3067
}
3068
&.vertical {
3070
indicator {
3071
min-height: 1px;
3072
min-width: $_marks_length;
3073
}
3074
}
3075
// *WARNING* scale with marks madness following
3077
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
3079
@each $marks_class, $marks_infix in (
3080
".marks-before:not(.marks-after)": "-marks-before",
3081
".marks-after:not(.marks-before)": "-marks-after"
3082
) {
3083
&#{$dir_class}#{$marks_class} {
3084
slider {
3085
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
3086
&#{$state_class} {
3087
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
3088
background-image:
3090
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3091
radial-gradient(circle, transparent 10%, transparent 0%);
3092
}
3093
}
3094
&:active {
3096
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
3097
background-image:
3099
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3100
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3101
}
3102
}
3103
}
3104
}
3105
}
3106
&.color {
3108
min-height: 0;
3109
min-width: 0;
3110
&.horizontal {
3112
padding: 0 0 12px 0;
3113
slider {
3115
&:dir(ltr), &:dir(rtl) { // specificity bump
3116
margin-bottom: $color_slider_margin;
3117
margin-top: $color_marks_slider_margin;
3118
}
3119
}
3120
}
3121
&.vertical {
3123
&:dir(ltr) {
3124
padding: 0 0 0 12px;
3125
slider {
3127
margin-left: $color_slider_margin;
3128
margin-right: $color_marks_slider_margin;
3129
}
3130
}
3131
&:dir(rtl) {
3133
padding: 0 12px 0 0;
3134
slider {
3136
margin-right: $color_slider_margin;
3137
margin-left: $color_marks_slider_margin;
3138
}
3139
}
3140
}
3141
}
3142
}
3143
/**
3145
* Progress bars
3146
*/
3147
progressbar {
3149
// sizing
3150
&.horizontal {
3151
trough,
3152
progress {
3153
min-height: $bar-size;
3154
}
3155
}
3156
&.vertical {
3158
trough,
3159
progress {
3160
min-width: $bar-size;
3161
}
3162
}
3163
// FIXME: insensitive state missing and some other state should be set probably
3165
color: hint($on-surface);
3166
font-size: smaller;
3167
trough {
3169
background-color: disabled-stroke($on-surface);
3170
}
3171
progress {
3173
background-color: $primary;
3174
}
3175
&.osd { // progressbar.osd used for epiphany page loading progress
3177
// min-width: $bar-size;
3178
// min-height: $bar-size;
3179
// background-color: transparent;
3180
trough {
3182
// background-color: transparent;
3183
}
3184
progress {
3186
// background-color: $primary;
3187
}
3188
}
3189
// makes the progress indicator disappear, when the fraction is 0
3191
trough.empty progress {
3192
all: unset;
3193
}
3194
}
3195
/**
3197
* Level Bar
3198
*/
3199
levelbar {
3201
&.horizontal {
3202
block {
3203
min-height: $bar-size;
3204
}
3205
&.discrete block {
3207
min-width: $medium-size;
3208
&:not(:last-child) {
3210
margin-right: 2px;
3211
}
3212
}
3213
}
3214
&.vertical {
3216
block {
3217
min-width: $bar-size;
3218
}
3219
&.discrete block {
3221
min-height: $medium-size;
3222
&:not(:last-child) {
3224
margin-bottom: 2px;
3225
}
3226
}
3227
}
3228
trough {
3230
}
3231
block {
3233
&.low {
3234
background-color: $warning;
3235
}
3236
&.high,
3238
&:not(.empty) {
3239
background-color: $primary;
3240
}
3241
&.full {
3243
background-color: $success;
3244
}
3245
&.empty {
3247
background-color: disabled-stroke($on-surface);
3248
}
3249
}
3250
}
3251
/**
3253
* Print dialog
3254
*/
3255
printdialog {
3257
paper {
3258
padding: 0;
3259
border: 1px solid divider($on-surface);
3260
background-color: $base;
3261
color: $on-surface;
3262
}
3263
.dialog-action-box {
3265
margin: 12px;
3266
}
3267
}
3268
/**
3270
* Frames
3271
*/
3272
frame > border,
3274
.frame {
3275
margin: 0;
3276
padding: 0;
3277
border: 1px solid divider($on-surface);
3278
border-radius: 0;
3279
box-shadow: none;
3280
&.flat {
3282
border-style: none;
3283
}
3284
}
3285
// for backward compatibility
3287
frame.flat > border {
3288
border-style: none;
3289
}
3290
actionbar > revealer > box {
3292
padding: $container-padding;
3293
border-top: 1px solid divider($on-surface);
3294
background-color: $base;
3295
background-clip: border-box;
3296
button:not(.suggested-action):not(.destructive-action) {
3298
@extend %button-flat;
3299
}
3300
.linked:not(.vertical) > entry:not(:only-child) {
3302
border-radius: $corner-radius $corner-radius 0 0;
3303
}
3304
}
3305
scrolledwindow {
3307
viewport.frame { // avoid double borders when viewport inside scrolled window
3308
border-style: none;
3309
}
3310
// This is used when content is touch-dragged past boundaries.
3312
// draws a box on top of the content, the size changes programmatically.
3313
@at-root overshoot {
3314
&.top { @include overshoot(top); }
3315
&.bottom { @include overshoot(bottom); }
3317
&.left { @include overshoot(left); }
3319
&.right { @include overshoot(right); }
3321
}
3322
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3324
@at-root undershoot {
3325
&.top { @include undershoot(top); }
3326
&.bottom { @include undershoot(bottom); }
3328
&.left { @include undershoot(left); }
3330
&.right { @include undershoot(right); }
3332
}
3333
@at-root junction { // the small square between two scrollbars
3335
border-style: solid none none solid;
3336
border-width: 1px;
3337
border-color: divider($on-surface);
3338
background-color: $base;
3339
&:dir(rtl) {
3341
border-style: solid solid none none;
3342
}
3343
}
3344
}
3345
// vbox and hbox separators
3347
separator {
3348
min-width: 1px;
3349
min-height: 1px;
3350
background-color: divider($on-surface);
3351
}
3352
%hide_separators {
3354
min-width: 0;
3355
min-height: 0;
3356
background-color: transparent;
3357
}
3358
/**
3360
* Lists
3361
*/
3362
list {
3364
border-color: divider($on-surface);
3365
background-color: $base;
3366
row {
3368
padding: 2px;
3369
}
3370
}
3371
row {
3373
&.activatable {
3374
@extend %ripple;
3375
@include ink-color($on-surface);
3376
@include list-item;
3377
// this is for indicathing which row generated a popover
3379
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3380
&.has-open-popup {
3381
background-color: overlay("activated", $on-surface);
3382
}
3383
}
3384
&:selected {
3386
background-color: $overlay-selected;
3387
@include ink-color($primary);
3389
&.has-open-popup {
3391
background-color: overlay("activated", $primary, $background: $overlay-selected);
3392
}
3393
}
3394
}
3395
/**
3397
* App Notifications
3398
*/
3399
.app-notification {
3401
// @extend %osd;
3402
@extend %toolbar-osd;
3404
margin: 8px;
3406
button {
3408
@extend %button-flat;
3409
&.text-button:not(:disabled) {
3411
color: $primary;
3412
@include ink-color($primary);
3413
}
3414
}
3415
&.frame,
3417
border {
3418
border-style: none;
3419
}
3420
}
3421
/**
3423
* Expanders
3424
*/
3425
expander {
3427
title > arrow {
3428
transition: all $duration $ease-out;
3429
min-width: 16px;
3430
min-height: 16px;
3431
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3432
-gtk-icon-transform: rotate(-90deg);
3433
&:dir(rtl) {
3435
-gtk-icon-transform: rotate(90deg);
3436
}
3437
&:checked {
3439
-gtk-icon-transform: unset;
3440
}
3441
color: hint($on-surface);
3443
&:hover,
3445
&:active {
3446
color: $on-surface;
3447
}
3448
&:disabled {
3450
color: disabled-hint($on-surface);
3451
}
3452
}
3453
}
3454
/**
3456
* Calendar
3457
*/
3458
calendar {
3460
padding: 1px;
3461
border: 1px solid divider($on-surface);
3462
color: $on-surface;
3463
&:disabled {
3465
color: disabled($on-surface);
3466
}
3467
&:selected {
3469
border-radius: $corner-radius + 1px;
3470
background-color: $overlay-selected;
3471
}
3472
&.header {
3474
border-style: none none solid;
3475
border-color: divider($on-surface);
3476
border-radius: 0;
3477
}
3478
&.button {
3480
border-radius: $corner-radius + 1px;
3481
color: hint($on-surface);
3482
&:hover {
3484
background-image: image(overlay("hover", $on-surface));
3485
}
3486
&:disabled {
3488
color: disabled-hint($on-surface);
3489
}
3490
}
3491
&.highlight {
3493
color: hint($on-surface);
3494
font-weight: 500;
3495
}
3496
&:indeterminate {
3498
color: disabled-hint($on-surface);
3499
}
3500
}
3501
/**
3503
* Dialogs
3504
*/
3505
// Message Dialog styling
3507
messagedialog {
3508
&.background {
3509
background-color: $surface;
3510
}
3511
.titlebar {
3513
min-height: $small-size;
3514
border-style: none;
3515
box-shadow: inset 0 1px highlight($surface);
3516
background-color: $surface;
3517
color: $on-surface;
3518
&:backdrop {
3520
background-color: $surface;
3521
color: hint($on-surface);
3522
}
3523
}
3524
&.csd { // rounded bottom border styling for csd version
3526
&.background {
3527
// bigger radius for better antialiasing
3528
border-bottom-left-radius: $corner-radius;
3529
border-bottom-right-radius: $corner-radius;
3530
}
3531
}
3532
// Hint text
3534
box.vertical > label + label {
3535
color: hint($on-surface);
3536
}
3537
.dialog-action-box {
3539
margin-top: -$container-padding;
3540
// padding: $container-padding;
3541
button {
3543
@extend %button-flat;
3544
&:not(:last-child) {
3546
margin-right: $container-padding;
3547
}
3548
&:not(:disabled) {
3550
color: $primary;
3551
@include ink-color($primary);
3552
}
3553
&.suggested-action:not(:disabled) {
3555
background-color: transparent;
3556
// color: $primary;
3557
// @include ink-color($primary);
3558
}
3559
&.destructive-action:not(:disabled) {
3561
background-color: transparent;
3562
color: $error;
3563
@include ink-color($error);
3564
}
3565
}
3566
}
3567
}
3568
filechooser {
3570
.dialog-action-box {
3571
border-top: 1px solid divider($on-surface);
3572
}
3573
#pathbarbox {
3575
border-bottom: 1px solid divider($on-surface);
3576
background-color: $background;
3577
// The new folder button
3579
> stack > box > button {
3580
@extend %button-flat;
3581
border-radius: $circular-radius;
3583
}
3584
}
3585
}
3586
filechooserbutton:drop(active) {
3588
// box-shadow: none;
3589
}
3590
/**
3592
* Sidebar
3593
*/
3594
.sidebar {
3596
border-style: none;
3597
background-color: $base-alt;
3598
&:not(separator) {
3600
@at-root %sidebar_left,
3601
&:dir(ltr),
3602
&.left,
3603
&.left:dir(rtl) {
3604
border-right: 1px solid divider($on-surface);
3605
border-left-style: none;
3606
}
3607
@at-root %sidebar_right,
3609
&:dir(rtl),
3610
&.right {
3611
border-left: 1px solid divider($on-surface);
3612
border-right-style: none;
3613
}
3614
}
3615
list {
3617
background-color: transparent;
3618
}
3619
paned & {
3621
&,
3622
&.left,
3623
&.right,
3624
&.left:dir(rtl),
3625
&:dir(rtl),
3626
&:dir(ltr) {
3627
border-style: none;
3628
}
3629
}
3630
}
3631
stacksidebar.sidebar {
3633
& {
3634
&:dir(ltr),
3635
&.left,
3636
&.left:dir(rtl) {
3637
list {
3638
@extend %sidebar_left;
3639
}
3640
}
3641
&:dir(rtl),
3643
&.right {
3644
list {
3645
@extend %sidebar_right;
3646
}
3647
}
3648
}
3649
+ separator.vertical,
3651
separator.horizontal {
3652
@extend %hide_separators;
3653
}
3654
list {
3656
padding: 4px;
3657
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3658
}
3659
row {
3661
min-height: 32px;
3662
padding: 0 8px - 6px;
3663
border-radius: $corner-radius;
3664
&:selected {
3666
background-color: overlay("activated", $primary);
3667
color: $primary;
3668
font-weight: 500;
3669
@include ink-color($primary);
3670
}
3671
+ row {
3673
margin-top: 4px;
3674
}
3675
> label {
3677
padding-left: 6px;
3678
padding-right: 6px;
3679
}
3680
&.needs-attention > label {
3682
@extend %needs-attention;
3683
}
3684
}
3685
}
3686
separator.sidebar {
3688
background-color: divider($on-surface);
3689
&.selection-mode,
3691
.selection-mode & {
3692
// background-color: divider($on-primary);
3693
}
3694
}
3695
/**
3697
* File chooser
3698
*/
3699
// dim the sidebar icons, see bug #786613 for details on this oddity
3701
row image.sidebar-icon {
3702
transition: color $duration $ease-out;
3703
color: hint($on-surface);
3704
&:disabled {
3706
color: disabled-hint($on-surface);
3707
}
3708
}
3709
placessidebar.sidebar {
3711
> viewport.frame {
3712
border-style: none;
3713
}
3714
list {
3716
padding: (4px - 3px) 0 4px;
3717
}
3718
row {
3720
// Needs overriding of the GtkListBoxRow padding
3721
min-height: 32px;
3722
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3723
padding: 0;
3724
border-radius: $corner-radius;
3725
// Using margins/padding directly in the SidebarRow
3727
// will make the animation of the new bookmark row jump
3728
> revealer {
3729
padding: 0 8px;
3730
}
3731
&:selected {
3733
background-color: overlay("activated", $primary);
3734
color: $primary;
3735
font-weight: 500;
3736
@include ink-color($primary);
3737
image.sidebar-icon {
3739
color: $primary;
3740
}
3741
}
3742
&:disabled {
3744
color: disabled($on-surface);
3745
}
3746
image.sidebar-icon {
3748
&:dir(ltr) {
3749
padding-right: 8px;
3750
}
3751
&:dir(rtl) {
3753
padding-left: 8px;
3754
}
3755
}
3756
label.sidebar-label {
3758
&:dir(ltr) {
3759
padding-right: 2px;
3760
}
3761
&:dir(rtl) {
3763
padding-left: 2px;
3764
}
3765
}
3766
@at-root button.sidebar-button {
3768
@extend %button-flat-basic;
3769
@extend %button-small;
3770
}
3771
&.sidebar-placeholder-row {
3773
background-color: overlay("hover", $on-surface);
3774
}
3775
&.sidebar-new-bookmark-row {
3777
color: $primary;
3778
image.sidebar-icon {
3780
color: $primary;
3781
}
3782
}
3783
}
3784
}
3785
placesview {
3787
.server-list-button {
3788
> image {
3789
-gtk-icon-transform: rotate(0turn);
3790
}
3791
&:checked > image {
3793
-gtk-icon-transform: rotate(-.5turn);
3794
}
3795
}
3796
// this selects the "connect to server" label
3798
> actionbar > revealer > box > label {
3799
padding-left: 8px;
3800
padding-right: 8px;
3801
}
3802
}
3803
/**
3805
* Paned
3806
*/
3807
paned {
3809
> separator {
3810
min-width: 1px;
3811
min-height: 1px;
3812
-gtk-icon-source: none; // defeats the ugly default handle decoration
3813
border-style: none; // just to be sure
3814
background-color: transparent;
3815
// workaround, using background istead of a border since the border will get rendered twice (?)
3816
background-image: image(divider($on-surface));
3817
background-size: 1px 1px;
3818
background-clip: content-box; // avoids borders image being rendered twice (?)
3819
&.wide {
3821
min-width: 6px;
3822
min-height: 6px;
3823
background-color: $background;
3824
background-image: image(divider($on-surface)), image(divider($on-surface));
3825
background-size: 1px 1px, 1px 1px;
3826
}
3827
}
3828
&.horizontal > separator {
3830
background-repeat: repeat-y;
3831
&:dir(ltr) {
3833
margin: 0 -8px 0 0;
3834
padding: 0 8px 0 0;
3835
background-position: left;
3836
}
3837
&:dir(rtl) {
3839
margin: 0 0 0 -8px;
3840
padding: 0 0 0 8px;
3841
background-position: right;
3842
}
3843
&.wide {
3845
margin: 0;
3846
padding: 0;
3847
background-repeat: repeat-y, repeat-y;
3848
background-position: left, right;
3849
}
3850
}
3851
&.vertical > separator {
3853
margin: 0 0 -8px 0;
3854
padding: 0 0 8px 0;
3855
background-repeat: repeat-x;
3856
background-position: top;
3857
&.wide {
3859
margin: 0;
3860
padding: 0;
3861
background-repeat: repeat-x, repeat-x;
3862
background-position: bottom, top;
3863
}
3864
}
3865
}
3866
/**
3868
* GtkInfoBar
3869
*/
3870
infobar {
3872
border-style: none;
3873
&.action:hover > revealer > box {
3875
background-image: image(overlay("hover", $on-surface));
3876
}
3877
&.info > revealer > box,
3879
&.question > revealer > box {
3880
border-bottom: 1px solid divider($on-surface);
3881
background-color: $base;
3882
button {
3884
@extend %button-flat;
3885
&.text-button:not(:disabled) {
3887
color: $primary;
3888
@include ink-color($primary);
3889
}
3890
}
3891
}
3892
&.warning > revealer > box {
3894
background-color: $warning;
3895
color: $on-warning;
3896
button.flat {
3898
color: $on-warning;
3899
@include ink-color($on-warning);
3900
}
3901
selection {
3903
}
3904
*:link {
3906
color: $on-warning;
3907
}
3908
}
3909
&.error > revealer > box {
3911
background-color: $error;
3912
color: $on-error;
3913
button.flat {
3915
color: $on-error;
3916
@include ink-color($on-error);
3917
}
3918
selection {
3920
}
3921
*:link {
3923
color: $on-error;
3924
}
3925
}
3926
// Remove ugly hard-coded padding
3928
button label {
3929
margin: 0 -4px;
3930
}
3931
}
3932
/**
3934
* Tooltips
3935
*/
3936
tooltip {
3938
&.background {
3939
// background-color needs to be set this way otherwise it gets drawn twice
3940
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3941
background-color: $tooltip;
3942
color: $on-tooltip;
3943
}
3944
// padding: 4px; /* not working */
3946
border-radius: $corner-radius;
3947
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3948
&:not(.csd):not(.unity-csd) {
3950
// border: 1px solid divider($on-surface);
3951
// border-radius: $corner-radius + 1px;
3952
// background-clip: $background-clip-extra;
3953
}
3954
// FIXME: we need a border or tooltips vanish on black background.
3956
decoration {
3957
background-color: transparent;
3958
}
3959
> box {
3961
margin: -6px; // Remove hard-coded 6px margin
3962
min-height: 32px - 4px * 2;
3963
padding: 4px 8px;
3964
}
3965
.dim-label {
3967
color: hint($on-tooltip);
3968
}
3969
* {
3971
// workaround for Eclipse.
3972
// do not include any declaration here.
3973
}
3974
}
3975
/**
3977
* Color Chooser
3978
*/
3979
colorswatch {
3981
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3982
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3983
// applied to the overlay box.
3984
// base color corners rounding
3986
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3987
// sports a bigger radius.
3988
// nth-child is needed by the custom color strip.
3989
&.top {
3991
border-top-left-radius: $corner-radius + .5px;
3992
border-top-right-radius: $corner-radius + .5px;
3993
overlay {
3995
border-top-left-radius: $corner-radius;
3996
border-top-right-radius: $corner-radius;
3997
}
3998
}
3999
&.bottom {
4001
border-bottom-left-radius: $corner-radius + .5px;
4002
border-bottom-right-radius: $corner-radius + .5px;
4003
overlay {
4005
border-bottom-left-radius: $corner-radius;
4006
border-bottom-right-radius: $corner-radius;
4007
}
4008
}
4009
&.left,
4011
&:first-child:not(.top) {
4012
border-top-left-radius: $corner-radius + .5px;
4013
border-bottom-left-radius: $corner-radius + .5px;
4014
overlay {
4016
border-top-left-radius: $corner-radius;
4017
border-bottom-left-radius: $corner-radius;
4018
}
4019
}
4020
&.right,
4022
&:last-child:not(.bottom) {
4023
border-top-right-radius: $corner-radius + .5px;
4024
border-bottom-right-radius: $corner-radius + .5px;
4025
overlay {
4027
border-top-right-radius: $corner-radius;
4028
border-bottom-right-radius: $corner-radius;
4029
}
4030
}
4031
&.dark {
4033
color: $on-dark;
4034
}
4035
&.light {
4037
color: $on-light;
4038
}
4039
overlay {
4041
transition: $transition-shadow;
4042
box-shadow: $shadow-z1;
4043
&:drop(active),
4045
&:hover {
4046
box-shadow: $shadow-z3;
4047
}
4048
}
4049
&#add-color-button {
4051
border-radius: $corner-radius $corner-radius 0 0;
4052
color: $on-surface;
4053
&:only-child {
4055
border-radius: $corner-radius;
4056
}
4057
overlay {
4059
background-color: $surface;
4060
}
4061
}
4062
&:disabled {
4064
opacity: .5;
4065
overlay {
4067
box-shadow: none;
4068
}
4069
}
4070
row:selected & {
4072
}
4073
&#editor-color-sample {
4075
border-radius: $corner-radius + .5px;
4076
overlay {
4078
border-radius: $corner-radius;
4079
&:hover {
4081
// box-shadow: $shadow-z1;
4082
}
4083
}
4084
}
4085
}
4086
// colorscale popup
4088
colorchooser .popover.osd {
4089
transition: $transition-shadow;
4090
border-radius: $corner-radius;
4091
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
4092
background-color: $surface;
4093
&:backdrop {
4095
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
4096
}
4097
}
4098
/**
4100
* Misc
4101
*/
4102
// content view (grid/list)
4104
.content-view {
4105
background-color: $background;
4106
&:hover {
4108
// -gtk-icon-effect: highlight;
4109
}
4110
rubberband,
4112
.rubberband {
4113
@extend %rubberband;
4114
}
4115
}
4116
.scale-popup {
4118
.osd & {
4119
// @extend %osd;
4120
// FIXME: quick hack, redo properly
4122
button.flat {
4123
}
4124
}
4125
// +/- buttons on GtkVolumeButton popup
4127
button {
4128
}
4129
}
4130
/**
4132
* Window Decorations
4133
*/
4134
decoration {
4136
transition: $transition-shadow;
4137
border-radius: $corner-radius $corner-radius 0 0;
4138
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4139
// FIXME rationalize shadows
4141
// this is used for the resize cursor area
4143
margin: 8px;
4144
&:backdrop {
4146
// the transparent shadow here is to enforce that the shadow extents don't
4147
// change when we go to backdrop, to prevent jumping windows.
4148
// The biggest shadow should be in the same order then in the active state
4149
// or the jumping will happen during the transition.
4150
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4151
}
4152
.maximized &,
4154
.fullscreen &,
4155
.tiled &,
4156
.tiled-top &,
4157
.tiled-right &,
4158
.tiled-bottom &,
4159
.tiled-left & {
4160
border-radius: 0;
4161
}
4162
.popup & {
4164
box-shadow: none;
4165
}
4166
// server-side decorations as used by mutter
4168
.ssd & {
4169
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4170
}
4171
.csd.popup & {
4173
border-radius: $corner-radius;
4174
box-shadow: $shadow-z4;
4175
}
4176
tooltip.csd & {
4178
border-radius: $corner-radius;
4179
box-shadow: none;
4180
}
4181
messagedialog.csd & {
4183
border-radius: $corner-radius;
4184
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4185
&:backdrop {
4187
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4188
}
4189
}
4190
.solid-csd & {
4192
margin: 0;
4193
padding: 2px;
4194
border-radius: 0;
4195
box-shadow: none;
4196
box-shadow: inset 0 1px highlight($titlebar);
4197
background-color: $titlebar;
4198
&:backdrop {
4200
background-color: $titlebar-backdrop;
4201
}
4202
}
4203
}
4204
// Window Close button
4206
button.titlebutton {
4207
border-radius: $circular-radius;
4208
.selection-mode & {
4210
}
4211
}
4212
// catch all extend :)
4215
.monospace {
4217
font-family: monospace;
4218
}
4219
/**
4221
* Touch Copy & Paste
4222
*/
4223
// touch selection handlebars for the Popover.osd above
4225
cursor-handle {
4226
color: $primary;
4227
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4228
&.top:dir(ltr),
4230
&.bottom:dir(rtl) {
4231
-gtk-icon-transform: rotate(90deg);
4232
}
4233
&.bottom:dir(ltr),
4235
&.top:dir(rtl) {
4236
-gtk-icon-transform: unset;
4237
}
4238
&.insertion-cursor:dir(ltr),
4240
&.insertion-cursor:dir(rtl) {
4241
padding-top: 6px;
4242
-gtk-icon-transform: rotate(45deg);
4243
}
4244
}
4245
// Decouple the font of context menus from their entry/textview
4247
.context-menu {
4248
font: initial;
4249
}
4250
// shortcut window keys
4252
.keycap {
4253
min-width: 28px - 8px * 2;
4254
min-height: 28px - 2px;
4255
margin-top: 2px;
4256
padding-bottom: 2px;
4257
padding-left: 8px;
4258
padding-right: 8px;
4259
border: solid 1px divider($on-surface);
4261
border-radius: $corner-radius + 1px;
4262
box-shadow: inset 0 -2px divider($on-surface);
4263
background-color: $surface;
4264
color: $on-surface;
4265
font-size: smaller;
4266
}
4267
// FIXME needs to be done widget by widget, this wildcard should really die
4269
:not(decoration):not(window):drop(active) {
4270
// caret-color: $primary;
4271
}
4272
// FIXME aggregate with buttons
4274
stackswitcher button.text-button {
4275
min-width: 100px;
4276
}
4277
// FIXME aggregate with buttons
4279
stackswitcher button.circular,
4280
stackswitcher button.text-button.circular {
4281
min-width: $medium-size;
4282
min-height: $medium-size;
4283
padding: 0;
4284
}
4285
/**
4287
* App Icons
4288
*/
4289
// Outline for low res icons
4291
.lowres-icon {
4292
// -gtk-icon-shadow: none;
4293
}
4294
// Drapshadow for large icons
4296
.icon-dropshadow {
4297
// -gtk-icon-shadow: none;
4298
}
4299
/**
4301
* Emoji
4302
*/
4303
popover.emoji-picker {
4305
padding: 0;
4306
entry {
4308
border-bottom: 1px solid divider($on-surface);
4309
border-image: none;
4310
border-radius: 0;
4311
box-shadow: none;
4312
background-color: transparent;
4313
}
4314
scrolledwindow {
4316
border-bottom: 1px solid divider($on-surface);
4317
}
4318
}
4319
button.emoji-section {
4321
margin: 4px;
4322
&:checked {
4324
background-color: overlay("activated", $primary);
4325
color: $primary;
4326
@include ink-color($primary);
4327
}
4328
&:not(:last-child) {
4330
margin-right: 0;
4331
}
4332
}
4333
popover.emoji-picker .emoji {
4335
min-width: 3em;
4336
min-height: 3em;
4337
padding: 0 8px;
4338
// font-size: larger;
4339
widget {
4341
transition: $transition;
4342
border-radius: $corner-radius;
4343
&:hover {
4345
background-color: overlay("hover", $on-surface);
4346
}
4347
}
4348
}
4349
popover.emoji-completion {
4351
padding: 8px 0;
4352
arrow {
4354
border: none;
4355
background: none;
4356
}
4357
.emoji-completion-row {
4359
min-height: $menuitem-size;
4360
padding: 0 12px;
4361
}
4362
.emoji:hover {
4364
background-color: overlay("hover", $on-surface);
4365
}
4366
}
4367