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: $base;
81
color: $on-surface;
82
&:hover {
84
box-shadow: inset 0 0 0 9999px overlay("hover", $on-surface);
85
}
86
&:selected:hover {
88
box-shadow: inset 0 0 0 9999px overlay("hover", $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: $base;
110
caret-color: $primary;
111
}
112
border {
114
background-color: $base-alt;
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
// background-color: $base;
209
}
210
.sidebar label {
212
min-height: $medium-size;
213
padding: 0 12px;
214
color: disabled($on-surface);
215
font-weight: 500;
216
&.highlight {
218
color: $on-surface;
219
}
220
}
221
}
222
%osd,
224
.osd {
225
// opacity: .9;
226
}
227
/**
229
* Spinner Animation
230
*/
231
@keyframes spin {
233
to {
234
-gtk-icon-transform: rotate(1turn);
235
}
236
}
237
spinner {
239
background: none;
240
opacity: 0; // non spinning spinner makes no sense
241
color: $primary;
242
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
243
transition: opacity $duration * 4 $ease-out;
244
animation: spin 1s linear infinite;
245
&:checked {
247
opacity: 1;
248
}
249
&:disabled {
251
color: disabled-hint($on-surface);
252
}
253
}
254
/**
256
* General Typography
257
*/
258
@function pt($size: $font-size) {
260
@return ($size * .75 / 1px) * 1pt;
261
}
262
.large-title {
264
font-weight: 400;
265
font-size: pt(48px);
266
}
267
.title-1 {
269
font-weight: 400;
270
font-size: pt(34px);
271
letter-spacing: pt(.25px);
272
}
273
.title-2 {
275
font-weight: 400;
276
font-size: pt(24px);
277
}
278
.title-3 {
280
font-weight: 500;
281
font-size: pt(20px);
282
letter-spacing: pt(.15px);
283
}
284
.title-4 {
286
font-weight: 400;
287
font-size: pt(16px);
288
letter-spacing: pt(.5px);
289
}
290
.heading {
292
font-weight: 500;
293
font-size: 1em;
294
}
295
.body {
297
font-weight: 400;
298
font-size: 1em;
299
}
300
.caption-heading {
302
font-weight: 500;
303
font-size: pt(12px);
304
letter-spacing: pt(1.5px);
305
}
306
.caption {
308
font-weight: 400;
309
font-size: pt(12px);
310
letter-spacing: pt(.4px);
311
}
312
/**
314
* Text Entries
315
*/
316
%entry,
318
entry {
319
min-height: $medium-size;
320
padding: 0 8px;
321
border-radius: $corner-radius $corner-radius 0 0;
322
@include entry(normal);
324
&:focus {
326
@include entry(checked);
327
}
328
&:drop(active) {
330
@include entry(hover);
331
}
332
&:disabled {
334
@include entry(disabled);
335
}
336
&.flat {
338
min-height: 0;
339
padding: 2px;
340
border-radius: 0;
341
background-color: transparent;
342
}
343
// icons inside the entry
345
image {
346
// min-height: $small-size;
347
// min-width: $small-size;
348
// border-radius: $circular-radius;
349
// @extend %ripple;
350
// @include ink-color($on-surface);
351
color: hint($on-surface);
352
&:hover,
354
&:active {
355
color: $on-surface;
356
}
357
&:disabled {
359
color: disabled($on-surface);
360
}
361
&.left {
363
margin-left: ($medium-size - 16px) / 2 - 8px;
364
margin-right: 6px;
365
}
366
&.right {
368
margin-left: 6px;
369
margin-right: ($medium-size - 16px) / 2 - 8px;
370
}
371
}
372
undershoot {
374
&.left {
375
@include undershoot(left);
376
}
377
&.right {
379
@include undershoot(right);
380
}
381
}
382
selection {
384
background-color: $overlay-selected;
385
}
386
// entry error and warning style
388
@each $class, $color in (".error": $error, ".warning": $warning) {
389
&#{$class} {
390
@include entry(normal, $color);
391
&:focus {
393
@include entry(checked, $color);
394
}
395
&:disabled {
397
@include entry(disabled, $color);
398
}
399
}
400
}
401
.osd & {
403
}
404
progress {
406
margin: 0 -8px -4px;
407
border-bottom: 2px solid $primary;
408
background-color: transparent;
409
}
410
// linked entries
412
.linked:not(.vertical) > & {
413
@extend %linked;
414
}
415
// Vertically linked entries
417
.linked.vertical > & {
418
@extend %linked-vertical;
419
}
420
}
421
%entry_raised {
423
border-radius: $corner-radius;
424
@include entry(raised-normal);
426
&:focus {
428
@include entry(raised-focus);
429
}
430
&:drop(active) {
432
@include entry(raised-hover);
433
}
434
&:disabled {
436
@include entry(raised-disabled);
437
}
438
// entry error and warning style
440
@each $class, $color in (".error": $error, ".warning": $warning) {
441
&#{$class} {
442
@include entry(raised-normal, $color);
443
&:focus {
445
@include entry(raised-focus, $color);
446
}
447
&:disabled {
449
@include entry(raised-disabled, $color);
450
}
451
image {
453
color: hint(on($color));
454
&:hover,
456
&:active {
457
color: on($color);
458
}
459
&:disabled {
461
color: disabled(on($color));
462
}
463
}
464
}
465
}
466
}
467
treeview entry {
469
&,
470
&.flat {
471
background-color: $base;
472
&,
474
&:focus {
475
border-image: none;
476
box-shadow: none;
477
}
478
}
479
}
480
.entry-tag {
482
margin: 2px;
483
border-radius: $circular-radius;
484
box-shadow: none;
485
background-color: fill($on-surface);
486
color: $on-surface;
487
&:hover {
489
background-image: image(overlay("hover", $on-surface));
490
}
491
// side margins: compensate the entry padding with a negative margin
493
// then the negative margin itself
494
:dir(ltr) & {
495
margin-left: 4px;
496
margin-right: 0;
497
padding-left: 12px;
498
padding-right: 8px;
499
}
500
:dir(rtl) & {
502
margin-left: 0;
503
margin-right: 4px;
504
padding-left: 8px;
505
padding-right: 12px;
506
}
507
// seems any sizing doesn't work
509
&.button {
510
box-shadow: none;
511
background-color: transparent;
512
color: hint($on-surface);
513
}
514
}
515
/**
517
* Buttons
518
*/
519
// stuff for .needs-attention
521
@keyframes needs-attention {
522
from {
523
background-image:
524
-gtk-gradient(
525
radial,
526
center center, 0,
527
center center, .001,
528
to($primary),
529
to(transparent)
530
);
531
}
532
to {
534
background-image:
535
-gtk-gradient(
536
radial,
537
center center, 0,
538
center center, .5,
539
to($primary),
540
to(transparent)
541
);
542
}
543
}
544
%button,
546
button {
547
min-height: 24px;
548
min-width: 16px;
549
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
550
border-radius: $corner-radius;
551
background-color: $surface;
552
color: $on-surface;
553
font-weight: 500;
554
@extend %ripple;
556
@include ink-color($on-surface, $elevation: true);
557
&:disabled {
559
box-shadow: none;
560
background-color: fill($on-surface);
561
color: disabled($on-surface);
562
}
563
&:checked {
565
background-color: overlay("activated", $primary, $background: $surface);
566
color: $primary;
567
@include ink-color($primary, $elevation: true);
568
&:disabled {
570
box-shadow: none;
571
background-color: overlay("activated", $on-surface, $background: fill($on-surface));
572
color: disabled($on-surface);
573
}
574
}
575
&.text-button {
577
min-width: 64px - 16px * 2;
578
padding-left: 16px;
579
padding-right: 16px;
580
}
581
&.image-button {
583
min-width: 24px;
584
padding: ($medium-size - 24px) / 2;
585
border-radius: $circular-radius;
586
}
587
// NOTE: Some image-only buttons use this as well
589
&.text-button.image-button {
590
min-width: 24px;
591
padding: ($medium-size - 24px) / 2;
592
border-radius: $corner-radius;
593
label {
595
&:first-child {
596
margin-left: 16px - ($medium-size - 24px) / 2;
597
}
598
&:last-child {
600
margin-right: 16px - ($medium-size - 24px) / 2;
601
}
602
}
603
image:not(:only-child) {
605
margin: 0 (24px - 16px) / 2;
606
}
607
}
608
.linked:not(.vertical) > & {
610
@extend %linked;
611
&.image-button:not(.text-button) {
613
@extend %linked-image-button;
614
}
615
}
616
.linked.vertical > & {
618
@extend %linked-vertical;
619
&.image-button:not(.text-button) {
621
@extend %linked-vertical-image-button;
622
}
623
}
624
}
625
%button-flat-basic {
627
background-color: transparent;
628
color: hint($on-surface);
629
@include ink-color($on-surface);
630
&:disabled {
632
background-color: transparent;
633
color: disabled-hint($on-surface);
634
}
635
}
636
%button-flat-activatable {
638
@extend %button-flat-basic;
639
&:checked {
641
background-color: overlay("activated", $on-surface);
642
color: $on-surface;
643
@include ink-color($on-surface);
644
&:disabled {
646
color: disabled($on-surface);
647
}
648
}
649
}
650
%button-flat,
652
button.flat {
653
@extend %button-flat-activatable;
654
&.text-button {
656
min-width: 64px - 8px * 2;
657
padding-left: 8px;
658
padding-right: 8px;
659
}
660
&.text-button.image-button {
662
min-width: 24px;
663
padding: ($medium-size - 24px) / 2;
664
label {
666
&:first-child {
667
margin-left: 12px - ($medium-size - 24px) / 2;
668
}
669
&:last-child {
671
margin-right: 12px - ($medium-size - 24px) / 2;
672
}
673
}
674
}
675
.linked:not(.vertical) > &,
677
.linked.vertical > & {
678
&:not(:only-child) { // specificity bump
679
border-radius: $corner-radius;
680
&.image-button:not(.text-button) {
682
border-radius: $circular-radius;
683
}
684
}
685
}
686
}
687
button {
689
// big standalone buttons like in Documents pager
690
&.osd {
691
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
692
&.image-button {
694
padding: ($large-size - 24px) / 2;
695
}
696
&:disabled {
698
opacity: 0;
699
}
700
}
701
// overlay / OSD style
703
@at-root %osd_button,
704
.osd & {
705
}
706
// Suggested and Destructive Action buttons
708
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
709
&#{$class} {
710
background-color: $color;
711
color: on($color);
712
@include ink-color(on($color), $elevation: true);
713
&:disabled {
715
box-shadow: none;
716
background-color: fill($on-surface);
717
color: disabled($on-surface);
718
}
719
&:checked {
721
background-color: overlay("activated", on($color), $background: $color);
722
}
723
&.flat {
725
background-color: transparent;
726
color: $color;
727
@include ink-color($color);
728
&:disabled {
730
box-shadow: none;
731
background-color: transparent;
732
color: disabled-hint($on-surface);
733
}
734
&:checked {
736
background-color: overlay("activated", $color);
737
}
738
}
739
.osd & {
741
}
742
}
743
}
744
.stack-switcher > & {
746
// to position the needs attention dot, padding is added to the button
747
// child, a label needs just lateral padding while an icon needs vertical
748
// padding added too.
749
> label {
751
margin: 0 -6px;
752
padding: 0 6px;
753
}
754
> image {
756
margin: -3px -6px;
757
padding: 3px 6px;
758
}
759
&.needs-attention {
761
> label,
762
> image {
763
@extend %needs-attention;
764
}
765
&:checked {
767
> label,
768
> image {
769
animation: none;
770
background-image: none;
771
}
772
}
773
}
774
}
775
// hide separators
777
&.font,
778
&.file {
779
separator {
780
@extend %hide_separators;
781
}
782
}
783
&.font {
785
> box > box > label {
786
// font-weight: bold;
787
}
788
}
789
// inline-toolbar buttons
791
.inline-toolbar & {
792
// @extend %button-flat;
793
&:not(.text-button) {
795
border-radius: $circular-radius;
796
}
797
}
798
.primary-toolbar & {
800
-gtk-icon-shadow: none; // tango icons don't need shadows
801
}
802
&.close,
804
&.circular { // The Bloody Circul Button
805
border-radius: $circular-radius;
806
label {
808
// padding: 0;
809
}
810
}
811
}
812
%button-small {
814
min-height: $small-size;
815
min-width: $small-size;
816
padding: 0;
817
border-radius: $circular-radius;
818
}
819
%needs-attention {
821
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
822
background-repeat: no-repeat;
823
background-position: right 3px;
824
background-size: 6px 6px;
825
&:dir(rtl) {
827
background-position: left 3px;
828
}
829
}
830
// all the following is for the +|- buttons on inline toolbars, that way
832
// should really be deprecated...
833
.inline-toolbar toolbutton > button {
834
}
835
// More inline toolbar buttons
837
toolbar.inline-toolbar toolbutton {
838
&:not(:first-child) > button.flat {
839
// @extend %linked-not-first-child;
840
}
841
&:not(:last-child) > button.flat {
843
// @extend %linked-not-last-child;
844
}
845
}
846
%linked-not-first-child {
848
border-top-left-radius: 0;
849
border-bottom-left-radius: 0;
850
}
851
%linked-not-last-child {
853
border-top-right-radius: 0;
854
border-bottom-right-radius: 0;
855
}
856
%linked {
858
&:not(:first-child) {
859
@extend %linked-not-first-child;
860
}
861
&:not(:last-child) {
863
@extend %linked-not-last-child;
864
}
865
}
866
%linked-vertical-not-first-child {
868
border-top-left-radius: 0;
869
border-top-right-radius: 0;
870
}
871
%linked-vertical-not-last-child {
873
border-bottom-left-radius: 0;
874
border-bottom-right-radius: 0;
875
}
876
%linked-vertical {
878
&:not(:first-child) {
879
@extend %linked-vertical-not-first-child;
880
}
881
&:not(:last-child) {
883
@extend %linked-vertical-not-last-child;
884
}
885
}
886
%linked-image-button {
888
&:first-child {
889
border-top-left-radius: $corner-radius;
890
border-bottom-left-radius: $corner-radius;
891
}
892
&:last-child {
894
border-top-right-radius: $corner-radius;
895
border-bottom-right-radius: $corner-radius;
896
}
897
&:only-child {
899
border-radius: $circular-radius;
900
}
901
}
902
%linked-vertical-image-button {
904
&:first-child {
905
border-top-left-radius: $corner-radius;
906
border-top-right-radius: $corner-radius;
907
}
908
&:last-child {
910
border-bottom-left-radius: $corner-radius;
911
border-bottom-right-radius: $corner-radius;
912
}
913
&:only-child {
915
border-radius: $circular-radius;
916
}
917
}
918
/* menu buttons */
920
modelbutton.flat,
921
.menuitem.button.flat {
922
min-height: $menuitem-size;
923
padding: 0 8px;
924
border-radius: $corner-radius;
925
@extend %ripple;
927
@include ink-color($on-surface);
928
&:selected {
930
background-color: $overlay-selected;
931
}
932
}
933
modelbutton.flat arrow {
935
transition: color $duration $ease-out;
936
color: hint($on-surface);
937
&:disabled {
939
color: disabled-hint($on-surface);
940
}
941
&.left {
943
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
944
}
945
&.right {
947
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
948
}
949
}
950
button.color {
952
min-height: $small-size;
953
min-width: $small-size;
954
padding: $container-padding;
955
colorswatch:only-child {
957
&,
958
overlay {
959
// border-radius: 0;
960
}
961
}
962
}
963
/**
965
* Links
966
*/
967
*:link {
969
color: $primary;
970
}
971
*:visited {
973
color: $visited;
974
}
975
button.link {
977
&:link {
978
color: $primary;
979
@include ink-color($primary);
980
}
981
&:visited {
983
color: $visited;
984
@include ink-color($visited);
985
}
986
> label {
988
text-decoration-line: underline;
989
}
990
}
991
/**
993
* GtkSpinButton
994
*/
995
spinbutton {
997
&:not(.vertical) {
998
// in this horizontal configuration, the whole spinbutton
999
// behaves as the entry, so we extend the entry styling
1000
// and nuke the style on the internal entry
1001
@extend %entry;
1002
padding: 0;
1004
entry {
1006
min-width: $large-size - 8px * 2;
1007
// reset all the other props since the spinbutton node is styled here
1008
margin: 0;
1009
border-image: none;
1010
border-radius: 0;
1011
box-shadow: none;
1012
background-color: transparent;
1013
}
1014
button {
1016
@extend %button-flat-basic;
1017
@extend %button-small;
1018
// margin: $container-padding;
1020
border: solid $container-padding transparent;
1021
background-clip: padding-box;
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
background-clip: padding-box;
1355
}
1356
searchbar > revealer > box,
1358
.location-bar {
1359
padding: $container-padding;
1360
border-style: solid;
1361
border-width: 0 0 1px;
1362
border-color: divider($on-surface);
1363
background-color: $background;
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
border: 1px solid divider($on-surface); // adds borders in a non composited env
1945
.csd & {
1947
border: none; // axes borders in a composited env
1948
border-radius: $corner-radius;
1949
}
1950
menuitem {
1952
transition: background-color $duration $ease-out;
1953
min-height: 20px;
1954
min-width: 40px;
1955
padding: 4px 8px;
1956
color: $on-surface;
1957
font: initial;
1958
text-shadow: none;
1959
&:hover {
1961
transition: none;
1962
background-color: overlay("hover", $on-surface);
1963
}
1964
&:disabled {
1966
color: disabled($on-surface);
1967
}
1968
// submenu indicators
1970
arrow {
1971
min-height: 16px;
1972
min-width: 16px;
1973
color: hint($on-surface);
1974
&:disabled {
1976
color: disabled-hint($on-surface);
1977
}
1978
&:dir(ltr) {
1980
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1981
margin-left: 8px;
1982
}
1983
&:dir(rtl) {
1985
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1986
margin-right: 8px;
1987
}
1988
}
1989
// avoids labels color being overridden, see
1991
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1992
label {
1993
&:dir(rtl),
1994
&:dir(ltr) {
1995
// color: inherit;
1996
}
1997
}
1998
}
1999
// overflow arrows
2001
> arrow {
2002
min-height: 16px;
2003
min-width: 16px;
2004
padding: 4px;
2005
background-color: $surface;
2006
color: hint($on-surface);
2007
&.top {
2009
margin-top: -4px;
2010
border-bottom: 1px solid divider($on-surface);
2011
border-radius: $corner-radius $corner-radius 0 0;
2012
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2013
}
2014
&.bottom {
2016
margin-top: 4px * 2;
2017
margin-bottom: -4px * 3;
2018
border-top: 1px solid divider($on-surface);
2019
border-radius: 0 0 $corner-radius $corner-radius;
2020
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2021
}
2022
&:hover {
2024
background-image: image(overlay("hover", $on-surface));
2025
}
2026
&:disabled {
2028
border-color: transparent;
2029
background-color: transparent;
2030
color: transparent;
2031
// color: disabled-hint($on-surface);
2032
}
2033
}
2034
separator {
2036
margin: 4px 0;
2037
}
2038
}
2039
menuitem {
2041
accelerator {
2042
color: hint($on-surface);
2043
}
2044
&:disabled accelerator {
2046
color: disabled-hint($on-surface);
2047
}
2048
}
2049
/**
2051
* Popovers
2052
*/
2053
popover.background {
2055
transition: $transition-shadow;
2056
padding: 2px;
2057
box-shadow: $shadow-z4; // TODO: this should really have a highlight
2058
background-color: $surface;
2059
&:backdrop {
2061
box-shadow: $shadow-z2;
2062
}
2063
&, .csd & {
2065
border-style: solid;
2066
border-width: 1px;
2067
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
2068
border-radius: $corner-radius + 1px;
2069
background-clip: padding-box;
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
&.top {
2151
border-bottom-style: solid;
2152
> tabs {
2154
margin-bottom: -1px;
2155
> tab {
2157
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2158
&:checked {
2160
border-image-source: linear-gradient(to top, $primary 2px, divider($on-surface) 2px);
2161
}
2162
&.reorderable-page {
2164
border-image-width: 0 1px 2px;
2165
}
2166
}
2167
}
2168
}
2169
&.bottom {
2171
border-top-style: solid;
2172
> tabs {
2174
margin-top: -1px;
2175
> tab {
2177
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2178
&:checked {
2180
border-image-source: linear-gradient(to bottom, $primary 2px, divider($on-surface) 2px);
2181
}
2182
&.reorderable-page {
2184
border-image-width: 2px 1px 0;
2185
}
2186
}
2187
}
2188
}
2189
&.left {
2191
border-right-style: solid;
2192
> tabs {
2194
margin-right: -1px;
2195
> tab {
2197
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2198
&:checked {
2200
border-image-source: linear-gradient(to left, $primary 2px, divider($on-surface) 2px);
2201
}
2202
&.reorderable-page {
2204
border-image-width: 1px 2px 1px 0;
2205
}
2206
}
2207
}
2208
}
2209
&.right {
2211
border-left-style: solid;
2212
> tabs {
2214
margin-left: -1px;
2215
> tab {
2217
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2218
&:checked {
2220
border-image-source: linear-gradient(to right, $primary 2px, divider($on-surface) 2px);
2221
}
2222
&.reorderable-page {
2224
border-image-width: 1px 0 1px 2px;
2225
}
2226
}
2227
}
2228
}
2229
&.top > tabs > arrow {
2231
@extend %notebook_vert_arrows;
2232
border-top-style: none;
2234
}
2235
&.bottom > tabs > arrow {
2237
@extend %notebook_vert_arrows;
2238
border-bottom-style: none;
2240
}
2241
@at-root %notebook_vert_arrows {
2243
padding-left: 4px;
2244
padding-right: 4px;
2245
&.down {
2247
margin-left: -8px;
2248
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2249
}
2250
&.up {
2252
margin-right: -8px;
2253
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2254
}
2255
}
2256
&.left > tabs > arrow {
2258
@extend %notebook_horz_arrows;
2259
border-left-style: none;
2261
}
2262
&.right > tabs > arrow {
2264
@extend %notebook_horz_arrows;
2265
border-right-style: none;
2267
}
2268
@at-root %notebook_horz_arrows {
2270
padding-top: 4px;
2271
padding-bottom: 4px;
2272
&.down {
2274
margin-top: -8px;
2275
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2276
}
2277
&.up {
2279
margin-bottom: -8px;
2280
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2281
}
2282
}
2283
> tabs > arrow {
2285
min-height: 16px;
2286
min-width: 16px;
2287
border-radius: 0;
2288
color: hint($on-surface);
2289
@extend %ripple;
2290
@include ink-color($on-surface);
2291
&:disabled {
2293
color: disabled-hint($on-surface);
2294
}
2295
}
2296
tab {
2298
transition: $transition,
2299
background-size 0ms,
2300
background-image 0ms;
2301
min-height: $small-size;
2302
min-width: $small-size;
2303
padding: $container-padding 12px;
2304
border-width: 1px; // for reorderable tabs
2306
border-color: transparent; //
2307
outline: none;
2309
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2310
background-repeat: no-repeat;
2311
background-position: center;
2312
background-size: 0% 0%;
2313
color: hint($on-surface);
2315
font-weight: 500;
2316
&:hover {
2318
background-color: overlay("hover-alt", $on-surface);
2319
}
2320
&:disabled {
2322
color: disabled-hint($on-surface);
2323
}
2324
&:checked {
2326
transition: $transition,
2327
background-size $ripple-fade-in-duration $ease-out,
2328
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2329
background-color: transparent;
2330
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2331
background-size: 1000% 1000%;
2332
background-clip: padding-box;
2333
color: $on-surface;
2334
&:disabled {
2336
color: disabled($on-surface);
2337
}
2338
&.reorderable-page {
2340
border-color: divider($on-surface);
2341
background-color: $base;
2342
}
2343
}
2344
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2346
> box {
2347
transition: background-color $duration $ease-out;
2348
margin: -$container-padding -12px;
2349
padding: $container-padding 12px;
2350
&:drop(active) {
2352
background-color: overlay("hover", $on-surface);
2353
}
2354
}
2355
// colors the button like the label, overridden otherwise
2357
button.flat {
2358
@extend %button-small;
2359
&:last-child {
2361
margin-left: $container-padding;
2362
margin-right: $container-padding - 12px;
2363
}
2364
&:first-child {
2366
margin-left: $container-padding - 12px;
2367
margin-right: $container-padding;
2368
}
2369
}
2370
}
2371
&.top,
2373
&.bottom {
2374
tabs {
2375
padding-left: 8px;
2376
padding-right: 8px;
2377
&:not(:only-child) {
2379
&:first-child {
2380
margin-left: 0;
2381
}
2382
&:last-child {
2384
margin-right: 0;
2385
}
2386
}
2387
tab.reorderable-page {
2389
border-style: none solid;
2390
}
2391
}
2392
}
2393
&.left,
2395
&.right {
2396
tabs {
2397
padding-top: 8px;
2398
padding-bottom: 8px;
2399
&:not(:only-child) {
2401
&:first-child {
2402
margin-top: 0;
2403
}
2404
&:last-child {
2406
margin-bottom: 0;
2407
}
2408
}
2409
tab.reorderable-page {
2411
border-style: solid none;
2412
}
2413
}
2414
}
2415
}
2416
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2418
background-color: $base;
2419
}
2420
}
2421
/**
2423
* Scrollbars
2424
*/
2425
scrollbar {
2427
$_slider_min_length: 24px;
2428
// disable steppers
2430
@at-root * {
2431
-GtkScrollbar-has-backward-stepper: false;
2432
-GtkScrollbar-has-forward-stepper: false;
2433
}
2434
transition: $transition;
2436
background-color: $base;
2437
background-clip: padding-box;
2438
// scrollbar border
2440
&.top { border-bottom: 1px solid divider($on-surface); }
2441
&.bottom { border-top: 1px solid divider($on-surface); }
2442
&.left { border-right: 1px solid divider($on-surface); }
2443
&.right { border-left: 1px solid divider($on-surface); }
2444
// slider
2446
slider {
2447
transition: background-color $duration $ease-out;
2448
min-width: 8px;
2449
min-height: 8px;
2450
border: 4px solid transparent;
2451
border-radius: $circular-radius;
2452
background-clip: padding-box;
2453
background-color: disabled($on-surface);
2454
&:hover {
2456
background-color: hint($on-surface);
2457
}
2458
&:active {
2460
background-color: $on-surface;
2461
}
2462
&:disabled {
2464
background-color: disabled-hint($on-surface);
2465
}
2466
}
2467
&.fine-tune {
2469
slider {
2470
min-width: 4px;
2471
min-height: 4px;
2472
}
2473
&.horizontal slider {
2475
margin: 2px 0;
2476
}
2477
&.vertical slider {
2479
margin: 0 2px;
2480
}
2481
}
2482
&.overlay-indicator {
2484
&:not(.fine-tune) slider {
2485
transition-property: background-color, min-height, min-width;
2486
}
2487
&:not(.dragging):not(.hovering) {
2489
border-color: transparent;
2490
background-color: transparent;
2491
slider {
2493
min-width: 4px;
2494
min-height: 4px;
2495
margin: 4px - 1px;
2496
border: 1px solid rgba($base, .3);
2497
}
2498
button {
2500
min-width: 4px;
2501
min-height: 4px;
2502
margin: 4px - 1px;
2503
border: 1px solid rgba($base, .3);
2504
border-radius: $circular-radius;
2505
background-color: disabled($on-surface);
2506
background-clip: padding-box;
2507
-gtk-icon-source: none;
2508
&:disabled {
2510
background-color: disabled-hint($on-surface);
2511
}
2512
}
2513
&.horizontal {
2515
slider {
2516
min-width: $_slider_min_length;
2517
}
2518
button {
2520
min-width: 8px;
2521
}
2522
}
2523
&.vertical {
2525
slider {
2526
min-height: $_slider_min_length;
2527
}
2528
button {
2530
min-height: 8px;
2531
}
2532
}
2533
}
2534
&.dragging,
2536
&.hovering {
2537
background-color: rgba($surface, .9);
2538
}
2539
}
2540
&.horizontal slider {
2542
min-width: $_slider_min_length;
2543
}
2544
&.vertical slider {
2546
min-height: $_slider_min_length;
2547
}
2548
// button styling
2550
button {
2551
@extend %button-flat-basic;
2552
min-width: 16px;
2554
min-height: 16px;
2555
padding: 0;
2556
border-radius: 0;
2557
}
2558
// button icons
2560
&.vertical {
2561
button {
2562
&.down {
2563
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2564
}
2565
&.up {
2567
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2568
}
2569
}
2570
}
2571
&.horizontal {
2573
button {
2574
&.down {
2575
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2576
}
2577
&.up {
2579
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2580
}
2581
}
2582
}
2583
}
2584
/**
2587
* Switch
2588
*/
2589
switch {
2591
transition: all $duration $ease-out;
2592
margin: $container-padding 0;
2593
padding: 0 2px;
2594
border: 5px solid transparent;
2595
border-radius: $circular-radius;
2596
background-color: stroke($on-surface);
2597
background-clip: padding-box;
2598
font-size: 0;
2599
&:checked {
2601
background-color: rgba($primary, .5);
2602
}
2603
&:disabled {
2605
opacity: .5;
2606
}
2607
// hide on/off icons for >=3.24.5
2609
image {
2610
margin: -8px;
2611
-gtk-icon-transform: scale(0);
2612
}
2613
slider {
2615
transition: all $duration $ease-out;
2616
min-width: 20px;
2617
min-height: 20px;
2618
margin: -3px -2px;
2619
border-radius: $circular-radius;
2620
outline: none;
2621
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2622
background-color: $switch-surface;
2623
}
2624
&:hover slider {
2626
box-shadow: 0 0 0 10px overlay("hover", $on-surface), $shadow-z1;
2627
}
2628
&:focus slider {
2630
box-shadow: 0 0 0 10px overlay("focus", $on-surface), $shadow-z1;
2631
}
2632
&:checked slider {
2634
background-color: $primary;
2635
}
2636
&:checked:hover slider {
2638
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2639
}
2640
&:checked:focus slider {
2642
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2643
}
2644
row:selected & {
2646
}
2647
}
2648
/**
2650
* Check and Radio items
2651
*/
2652
// draw regular check and radio items using our PNG assets
2654
// all assets are rendered from assets.svg. never add pngs directly
2655
// selection-mode
2657
.view.content-view.check:not(list),
2658
.content-view:not(list) check {
2659
min-height: 40px;
2660
min-width: 40px;
2661
margin: 0;
2662
padding: 0;
2663
box-shadow: none;
2664
background-color: transparent;
2665
background-image: none;
2666
-gtk-icon-shadow: $icon-shadow-z2;
2667
&:hover,
2669
&:active {
2670
-gtk-icon-shadow: $icon-shadow-z4;
2671
}
2672
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2674
&#{$class} {
2675
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2676
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2678
}
2679
}
2680
}
2681
checkbutton,
2683
radiobutton {
2684
outline: none;
2685
}
2686
checkbutton.text-button,
2688
radiobutton.text-button {
2689
// this is for a nice focus on check and radios text
2690
padding: 2px;
2691
label:not(:only-child) {
2693
margin: 0 4px;
2694
}
2695
}
2696
$check-radio-size: 40px;
2698
check,
2700
radio {
2701
min-height: 24px;
2702
min-width: 24px;
2703
margin: -($check-radio-size - 24px) / 2;
2704
padding: ($check-radio-size - 24px) / 2;
2705
border-radius: $circular-radius;
2706
color: hint($on-surface);
2707
@extend %ripple;
2708
@include ink-color($on-surface);
2709
&:checked,
2711
&:indeterminate {
2712
color: $primary;
2713
@include ink-color($primary);
2714
}
2715
&:disabled {
2717
color: disabled-hint($on-surface);
2718
}
2719
&:only-child {
2721
// margin: -12px;
2722
}
2723
popover modelbutton.flat & {
2725
&,
2726
&:focus,
2727
&:hover,
2728
&:focus:hover,
2729
&:active,
2730
&:disabled {
2731
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2732
box-shadow: none;
2733
background-image: none;
2734
}
2735
&.left:dir(rtl) {
2737
margin-left: -12px;
2738
margin-right: -4px;
2739
}
2740
&.right:dir(ltr) {
2742
margin-left: -4px;
2743
margin-right: -12px;
2744
}
2745
}
2746
menu menuitem & {
2748
transition: none;
2749
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2750
padding: 0;
2751
&:dir(ltr) {
2753
margin-right: 8px;
2754
}
2755
&:dir(rtl) {
2757
margin-left: 8px;
2758
}
2759
&,
2761
&:hover,
2762
&:disabled {
2763
box-shadow: none;
2764
}
2765
}
2766
}
2767
%check,
2769
check {
2770
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2771
&:checked {
2773
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2774
}
2775
&:indeterminate {
2777
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2778
}
2779
}
2780
%radio,
2782
radio {
2783
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2784
&:checked {
2786
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2787
}
2788
&:indeterminate {
2790
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2791
}
2792
border-image-slice: $check-radio-size / 2px;
2794
border-image-width: $check-radio-size / 2;
2795
$radio-indicator-size: 10px / $check-radio-size / 2;
2797
border-image-source:
2799
-gtk-gradient(
2800
radial,
2801
center center, 0,
2802
center center, .001,
2803
to($primary),
2804
to(transparent)
2805
);
2806
&:checked:not(:indeterminate) {
2808
border-image-source:
2809
-gtk-gradient(
2810
radial,
2811
center center, 0,
2812
center center, $radio-indicator-size,
2813
to($primary),
2814
to(transparent)
2815
);
2816
&:disabled {
2818
border-image-source:
2819
-gtk-gradient(
2820
radial,
2821
center center, 0,
2822
center center, $radio-indicator-size,
2823
to(disabled-hint($on-surface)),
2824
to(transparent)
2825
);
2826
}
2827
}
2828
}
2829
%small_check,
2831
menu menuitem check {
2832
min-height: 16px;
2833
min-width: 16px;
2834
border-radius: $corner-radius;
2835
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2836
&:checked {
2838
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2839
}
2840
&:indeterminate {
2842
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2843
}
2844
}
2845
%small_radio,
2847
menu menuitem radio {
2848
min-height: 16px;
2849
min-width: 16px;
2850
border-image: none;
2851
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2852
&:checked {
2854
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2855
}
2856
&:indeterminate {
2858
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2859
}
2860
}
2861
// ANIMATION:
2863
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2864
// the transformation is set on the active state and it get reset on the checked state.
2865
radio:not(:checked):active {
2866
// -gtk-icon-transform: scale(0);
2867
}
2868
// Otherwise, treeview.view styling will be applied...
2870
treeview.view check,
2871
treeview.view radio {
2872
padding: 0;
2873
color: hint($on-surface);
2874
&:checked,
2876
&:indeterminate {
2877
color: $primary;
2878
}
2879
&:disabled {
2881
color: disabled-hint($on-surface);
2882
}
2883
&,
2885
&:hover,
2886
&:selected,
2887
&:selected:hover {
2888
box-shadow: none;
2889
background-color: transparent;
2890
}
2891
}
2892
treeview.view radio:checked {
2894
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2895
border-image: none;
2896
}
2897
/**
2899
* GtkScale
2900
*/
2901
scale {
2903
// sizing
2904
$_marks_length: 8px;
2905
$_marks_distance: 7px;
2906
$trough_size: 2px;
2908
$finetune_trough_size: 4px;
2909
$slider_size: 32px;
2911
$slider_margin: -($slider_size - $trough_size) / 2;
2913
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2914
$color_slider_margin: -($slider_size) * 3 / 4;
2916
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2917
min-height: $trough_size;
2919
min-width: $trough_size;
2920
&.horizontal {
2922
padding: ($medium-size - $trough_size) / 2 12px;
2923
}
2924
&.vertical {
2926
padding: 12px ($medium-size - $trough_size) / 2;
2927
}
2928
// the slider is inside the trough, so to have make it bigger there's a negative margin
2930
slider {
2931
min-height: $slider_size;
2932
min-width: $slider_size;
2933
margin: $slider_margin;
2934
}
2935
// click-and-hold the slider to activate
2937
&.fine-tune {
2938
&.horizontal {
2939
min-height: $finetune_trough_size;
2940
padding-top: ($medium-size - $finetune_trough_size) / 2;
2941
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2942
}
2943
&.vertical {
2945
min-width: $finetune_trough_size;
2946
padding-left: ($medium-size - $finetune_trough_size) / 2;
2947
padding-right: ($medium-size - $finetune_trough_size) / 2;
2948
}
2949
// to make the trough grow in fine-tune mode
2951
slider {
2952
margin: $finetune_slider_margin;
2953
}
2954
}
2955
// the backing bit
2957
trough {
2958
transition: background-color $duration $ease-out;
2959
outline: none;
2960
background-color: stroke($on-surface);
2961
&:disabled {
2963
background-color: disabled-stroke($on-surface);
2964
}
2965
}
2966
// the colored part of the backing bit
2968
highlight {
2969
transition: background-image $duration $ease-out;
2970
background-image: image($primary);
2971
&:disabled {
2973
background-color: $background;
2974
background-image: image(disabled-hint($on-surface));
2975
}
2976
}
2977
// this is another differently styled part of the backing bit, the most relevant use case is for example
2979
// in media player to indicate how much video stream as been cached
2980
fill {
2981
transition: background-color $duration $ease-out;
2982
background-color: stroke($on-surface);
2983
&:disabled {
2985
background-color: transparent;
2986
}
2987
}
2988
slider {
2990
transition: background-color $duration $ease-out,
2991
background-size $ripple-fade-out-duration $ease-out,
2992
background-image $ripple-fade-out-opacity-duration $ease-out;
2993
background-repeat: no-repeat;
2994
background-position: center;
2995
background-size: auto, 1000% 1000%;
2996
border-radius: 50%;
2997
color: $primary;
2998
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
3000
&#{$class} {
3001
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
3002
background-image:
3004
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
3005
radial-gradient(circle, transparent 10%, transparent 0%);
3006
}
3007
}
3008
&:hover {
3010
background-color: overlay("hover", $primary);
3011
}
3012
&:focus {
3014
background-color: overlay("focus", $primary);
3015
}
3016
&:active {
3018
$_url: 'assets/scale-slider#{$asset-suffix}';
3019
transition: background-color $duration $ease-out,
3021
background-size 0ms,
3022
background-image 0ms;
3023
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
3024
background-image:
3025
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
3026
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3027
background-size: auto, 0% 0%;
3028
}
3029
}
3030
marks,
3032
value {
3033
color: hint($on-surface);
3034
}
3035
indicator {
3037
background-color: stroke($on-surface);
3038
color: transparent;
3039
}
3040
//marks margins
3042
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
3043
(horizontal, bottom, bottom, top),
3044
(vertical, top, left, right),
3045
(vertical, bottom, right, left) {
3046
&.#{$scale_orient} marks {
3047
&.#{$marks_class} {
3048
margin-#{$marks_margin}: $_marks_distance;
3049
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
3050
}
3051
}
3052
&.#{$scale_orient}.fine-tune marks {
3054
&.#{$marks_class} {
3055
margin-#{$marks_margin}: $_marks_distance - 1px;
3056
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
3057
}
3058
}
3059
}
3060
&.horizontal {
3062
indicator {
3063
min-height: $_marks_length;
3064
min-width: 1px;
3065
}
3066
}
3067
&.vertical {
3069
indicator {
3070
min-height: 1px;
3071
min-width: $_marks_length;
3072
}
3073
}
3074
// *WARNING* scale with marks madness following
3076
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
3078
@each $marks_class, $marks_infix in (
3079
".marks-before:not(.marks-after)": "-marks-before",
3080
".marks-after:not(.marks-before)": "-marks-after"
3081
) {
3082
&#{$dir_class}#{$marks_class} {
3083
slider {
3084
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
3085
&#{$state_class} {
3086
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
3087
background-image:
3089
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3090
radial-gradient(circle, transparent 10%, transparent 0%);
3091
}
3092
}
3093
&:active {
3095
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
3096
background-image:
3098
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3099
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3100
}
3101
}
3102
}
3103
}
3104
}
3105
&.color {
3107
min-height: 0;
3108
min-width: 0;
3109
&.horizontal {
3111
padding: 0 0 12px 0;
3112
slider {
3114
&:dir(ltr), &:dir(rtl) { // specificity bump
3115
margin-bottom: $color_slider_margin;
3116
margin-top: $color_marks_slider_margin;
3117
}
3118
}
3119
}
3120
&.vertical {
3122
&:dir(ltr) {
3123
padding: 0 0 0 12px;
3124
slider {
3126
margin-left: $color_slider_margin;
3127
margin-right: $color_marks_slider_margin;
3128
}
3129
}
3130
&:dir(rtl) {
3132
padding: 0 12px 0 0;
3133
slider {
3135
margin-right: $color_slider_margin;
3136
margin-left: $color_marks_slider_margin;
3137
}
3138
}
3139
}
3140
}
3141
}
3142
/**
3144
* Progress bars
3145
*/
3146
progressbar {
3148
// sizing
3149
&.horizontal {
3150
trough,
3151
progress {
3152
min-height: $bar-size;
3153
}
3154
}
3155
&.vertical {
3157
trough,
3158
progress {
3159
min-width: $bar-size;
3160
}
3161
}
3162
// FIXME: insensitive state missing and some other state should be set probably
3164
color: hint($on-surface);
3165
font-size: smaller;
3166
trough {
3168
background-color: disabled-stroke($on-surface);
3169
}
3170
progress {
3172
background-color: $primary;
3173
}
3174
&.osd { // progressbar.osd used for epiphany page loading progress
3176
// min-width: $bar-size;
3177
// min-height: $bar-size;
3178
// background-color: transparent;
3179
trough {
3181
// background-color: transparent;
3182
}
3183
progress {
3185
// background-color: $primary;
3186
}
3187
}
3188
// makes the progress indicator disappear, when the fraction is 0
3190
trough.empty progress {
3191
all: unset;
3192
}
3193
}
3194
/**
3196
* Level Bar
3197
*/
3198
levelbar {
3200
&.horizontal {
3201
block {
3202
min-height: $bar-size;
3203
}
3204
&.discrete block {
3206
min-width: $medium-size;
3207
&:not(:last-child) {
3209
margin-right: 2px;
3210
}
3211
}
3212
}
3213
&.vertical {
3215
block {
3216
min-width: $bar-size;
3217
}
3218
&.discrete block {
3220
min-height: $medium-size;
3221
&:not(:last-child) {
3223
margin-bottom: 2px;
3224
}
3225
}
3226
}
3227
trough {
3229
}
3230
block {
3232
&.low {
3233
background-color: $warning;
3234
}
3235
&.high,
3237
&:not(.empty) {
3238
background-color: $primary;
3239
}
3240
&.full {
3242
background-color: $success;
3243
}
3244
&.empty {
3246
background-color: disabled-stroke($on-surface);
3247
}
3248
}
3249
}
3250
/**
3252
* Print dialog
3253
*/
3254
printdialog {
3256
paper {
3257
padding: 0;
3258
border: 1px solid divider($on-surface);
3259
background-clip: padding-box;
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
background-clip: padding-box;
3281
&.flat {
3283
border-style: none;
3284
}
3285
}
3286
// for backward compatibility
3288
frame.flat > border {
3289
border-style: none;
3290
}
3291
actionbar > revealer > box {
3293
padding: $container-padding;
3294
border-top: 1px solid divider($on-surface);
3295
background-color: $base;
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
background-clip: padding-box;
3374
&.activatable {
3376
@extend %ripple;
3377
@include ink-color($on-surface);
3378
@include list-item;
3379
// this is for indicathing which row generated a popover
3381
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3382
&.has-open-popup {
3383
background-color: overlay("activated", $on-surface);
3384
}
3385
}
3386
&:selected {
3388
background-color: $overlay-selected;
3389
@include ink-color($primary);
3391
&.has-open-popup {
3393
background-color: overlay("activated", $primary, $background: $overlay-selected);
3394
}
3395
}
3396
}
3397
/**
3399
* App Notifications
3400
*/
3401
.app-notification {
3403
// @extend %osd;
3404
@extend %toolbar-osd;
3406
margin: 8px;
3408
button {
3410
@extend %button-flat;
3411
&.text-button:not(:disabled) {
3413
color: $primary;
3414
@include ink-color($primary);
3415
}
3416
}
3417
&.frame,
3419
border {
3420
border-style: none;
3421
}
3422
}
3423
/**
3425
* Expanders
3426
*/
3427
expander {
3429
title > arrow {
3430
transition: all $duration $ease-out;
3431
min-width: 16px;
3432
min-height: 16px;
3433
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3434
-gtk-icon-transform: rotate(-90deg);
3435
&:dir(rtl) {
3437
-gtk-icon-transform: rotate(90deg);
3438
}
3439
&:checked {
3441
-gtk-icon-transform: unset;
3442
}
3443
color: hint($on-surface);
3445
&:hover,
3447
&:active {
3448
color: $on-surface;
3449
}
3450
&:disabled {
3452
color: disabled-hint($on-surface);
3453
}
3454
}
3455
}
3456
/**
3458
* Calendar
3459
*/
3460
calendar {
3462
padding: 1px;
3463
border: 1px solid divider($on-surface);
3464
background-clip: padding-box;
3465
color: $on-surface;
3466
&:disabled {
3468
color: disabled($on-surface);
3469
}
3470
&:selected {
3472
border-radius: $corner-radius + 1px;
3473
background-color: $overlay-selected;
3474
}
3475
&.header {
3477
border-style: none none solid;
3478
border-color: divider($on-surface);
3479
border-radius: 0;
3480
}
3481
&.button {
3483
border-radius: $corner-radius + 1px;
3484
color: hint($on-surface);
3485
&:hover {
3487
background-image: image(overlay("hover", $on-surface));
3488
}
3489
&:disabled {
3491
color: disabled-hint($on-surface);
3492
}
3493
}
3494
&.highlight {
3496
color: hint($on-surface);
3497
font-weight: 500;
3498
}
3499
&:indeterminate {
3501
color: disabled-hint($on-surface);
3502
}
3503
}
3504
/**
3506
* Dialogs
3507
*/
3508
// Message Dialog styling
3510
messagedialog {
3511
&.background {
3512
background-color: $surface;
3513
}
3514
.titlebar {
3516
min-height: $small-size;
3517
border-style: none;
3518
box-shadow: inset 0 1px highlight($surface);
3519
background-color: $surface;
3520
color: $on-surface;
3521
&:backdrop {
3523
background-color: $surface;
3524
color: hint($on-surface);
3525
}
3526
}
3527
&.csd { // rounded bottom border styling for csd version
3529
&.background {
3530
// bigger radius for better antialiasing
3531
border-bottom-left-radius: $corner-radius;
3532
border-bottom-right-radius: $corner-radius;
3533
}
3534
}
3535
// Hint text
3537
box.vertical > label + label {
3538
color: hint($on-surface);
3539
}
3540
.dialog-action-box {
3542
margin-top: -$container-padding;
3543
// padding: $container-padding;
3544
button {
3546
@extend %button-flat;
3547
&:not(:last-child) {
3549
margin-right: $container-padding;
3550
}
3551
&:not(:disabled) {
3553
color: $primary;
3554
@include ink-color($primary);
3555
}
3556
&.suggested-action:not(:disabled) {
3558
background-color: transparent;
3559
// color: $primary;
3560
// @include ink-color($primary);
3561
}
3562
&.destructive-action:not(:disabled) {
3564
background-color: transparent;
3565
color: $error;
3566
@include ink-color($error);
3567
}
3568
}
3569
}
3570
}
3571
filechooser {
3573
.dialog-action-box {
3574
border-top: 1px solid divider($on-surface);
3575
}
3576
#pathbarbox {
3578
border-bottom: 1px solid divider($on-surface);
3579
background-color: $background;
3580
// The new folder button
3582
> stack > box > button {
3583
@extend %button-flat;
3584
border-radius: $circular-radius;
3586
}
3587
}
3588
}
3589
filechooserbutton:drop(active) {
3591
// box-shadow: none;
3592
}
3593
/**
3595
* Sidebar
3596
*/
3597
.sidebar {
3599
border-style: none;
3600
background-color: $base-alt;
3601
&:not(separator) {
3603
@at-root %sidebar_left,
3604
&:dir(ltr),
3605
&.left,
3606
&.left:dir(rtl) {
3607
border-right: 1px solid divider($on-surface);
3608
border-left-style: none;
3609
}
3610
@at-root %sidebar_right,
3612
&:dir(rtl),
3613
&.right {
3614
border-left: 1px solid divider($on-surface);
3615
border-right-style: none;
3616
}
3617
}
3618
list {
3620
background-color: transparent;
3621
}
3622
paned & {
3624
&,
3625
&.left,
3626
&.right,
3627
&.left:dir(rtl),
3628
&:dir(rtl),
3629
&:dir(ltr) {
3630
border-style: none;
3631
}
3632
}
3633
}
3634
stacksidebar.sidebar {
3636
& {
3637
&:dir(ltr),
3638
&.left,
3639
&.left:dir(rtl) {
3640
list {
3641
@extend %sidebar_left;
3642
}
3643
}
3644
&:dir(rtl),
3646
&.right {
3647
list {
3648
@extend %sidebar_right;
3649
}
3650
}
3651
}
3652
+ separator.vertical,
3654
separator.horizontal {
3655
@extend %hide_separators;
3656
}
3657
list {
3659
padding: 4px;
3660
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3661
}
3662
row {
3664
min-height: 32px;
3665
padding: 0 8px - 6px;
3666
border-radius: $corner-radius;
3667
&:selected {
3669
background-color: overlay("activated", $primary);
3670
color: $primary;
3671
font-weight: 500;
3672
@include ink-color($primary);
3673
}
3674
+ row {
3676
margin-top: 4px;
3677
}
3678
> label {
3680
padding-left: 6px;
3681
padding-right: 6px;
3682
}
3683
&.needs-attention > label {
3685
@extend %needs-attention;
3686
}
3687
}
3688
}
3689
separator.sidebar {
3691
background-color: divider($on-surface);
3692
&.selection-mode,
3694
.selection-mode & {
3695
// background-color: divider($on-primary);
3696
}
3697
}
3698
/**
3700
* File chooser
3701
*/
3702
// dim the sidebar icons, see bug #786613 for details on this oddity
3704
row image.sidebar-icon {
3705
transition: color $duration $ease-out;
3706
color: hint($on-surface);
3707
&:disabled {
3709
color: disabled-hint($on-surface);
3710
}
3711
}
3712
placessidebar.sidebar {
3714
> viewport.frame {
3715
border-style: none;
3716
}
3717
list {
3719
padding: (4px - 3px) 0 4px;
3720
}
3721
row {
3723
// Needs overriding of the GtkListBoxRow padding
3724
min-height: 32px;
3725
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3726
padding: 0;
3727
border-radius: $corner-radius;
3728
// Using margins/padding directly in the SidebarRow
3730
// will make the animation of the new bookmark row jump
3731
> revealer {
3732
padding: 0 8px;
3733
}
3734
&:selected {
3736
background-color: overlay("activated", $primary);
3737
color: $primary;
3738
font-weight: 500;
3739
@include ink-color($primary);
3740
image.sidebar-icon {
3742
color: $primary;
3743
}
3744
}
3745
&:disabled {
3747
color: disabled($on-surface);
3748
}
3749
image.sidebar-icon {
3751
&:dir(ltr) {
3752
padding-right: 8px;
3753
}
3754
&:dir(rtl) {
3756
padding-left: 8px;
3757
}
3758
}
3759
label.sidebar-label {
3761
&:dir(ltr) {
3762
padding-right: 2px;
3763
}
3764
&:dir(rtl) {
3766
padding-left: 2px;
3767
}
3768
}
3769
@at-root button.sidebar-button {
3771
@extend %button-flat-basic;
3772
@extend %button-small;
3773
}
3774
&.sidebar-placeholder-row {
3776
background-color: overlay("hover", $on-surface);
3777
}
3778
&.sidebar-new-bookmark-row {
3780
color: $primary;
3781
image.sidebar-icon {
3783
color: $primary;
3784
}
3785
}
3786
}
3787
}
3788
placesview {
3790
.server-list-button {
3791
> image {
3792
-gtk-icon-transform: rotate(0turn);
3793
}
3794
&:checked > image {
3796
-gtk-icon-transform: rotate(-.5turn);
3797
}
3798
}
3799
// this selects the "connect to server" label
3801
> actionbar > revealer > box > label {
3802
padding-left: 8px;
3803
padding-right: 8px;
3804
}
3805
}
3806
/**
3808
* Paned
3809
*/
3810
paned {
3812
> separator {
3813
min-width: 1px;
3814
min-height: 1px;
3815
-gtk-icon-source: none; // defeats the ugly default handle decoration
3816
border-style: none; // just to be sure
3817
background-color: transparent;
3818
// workaround, using background istead of a border since the border will get rendered twice (?)
3819
background-image: image(divider($on-surface));
3820
background-size: 1px 1px;
3821
background-clip: content-box; // avoids borders image being rendered twice (?)
3822
&.wide {
3824
min-width: 6px;
3825
min-height: 6px;
3826
background-color: $background;
3827
background-image: image(divider($on-surface)), image(divider($on-surface));
3828
background-size: 1px 1px, 1px 1px;
3829
}
3830
}
3831
&.horizontal > separator {
3833
background-repeat: repeat-y;
3834
&:dir(ltr) {
3836
margin: 0 -8px 0 0;
3837
padding: 0 8px 0 0;
3838
background-position: left;
3839
}
3840
&:dir(rtl) {
3842
margin: 0 0 0 -8px;
3843
padding: 0 0 0 8px;
3844
background-position: right;
3845
}
3846
&.wide {
3848
margin: 0;
3849
padding: 0;
3850
background-repeat: repeat-y, repeat-y;
3851
background-position: left, right;
3852
}
3853
}
3854
&.vertical > separator {
3856
margin: 0 0 -8px 0;
3857
padding: 0 0 8px 0;
3858
background-repeat: repeat-x;
3859
background-position: top;
3860
&.wide {
3862
margin: 0;
3863
padding: 0;
3864
background-repeat: repeat-x, repeat-x;
3865
background-position: bottom, top;
3866
}
3867
}
3868
}
3869
/**
3871
* GtkInfoBar
3872
*/
3873
infobar {
3875
border-style: none;
3876
&.action:hover > revealer > box {
3878
background-image: image(overlay("hover", $on-surface));
3879
}
3880
&.info > revealer > box,
3882
&.question > revealer > box {
3883
border-bottom: 1px solid divider($on-surface);
3884
background-color: $base;
3885
button {
3887
@extend %button-flat;
3888
&.text-button:not(:disabled) {
3890
color: $primary;
3891
@include ink-color($primary);
3892
}
3893
}
3894
}
3895
&.warning > revealer > box {
3897
background-color: $warning;
3898
color: $on-warning;
3899
button.flat {
3901
color: $on-warning;
3902
@include ink-color($on-warning);
3903
}
3904
selection {
3906
}
3907
*:link {
3909
color: $on-warning;
3910
}
3911
}
3912
&.error > revealer > box {
3914
background-color: $error;
3915
color: $on-error;
3916
button.flat {
3918
color: $on-error;
3919
@include ink-color($on-error);
3920
}
3921
selection {
3923
}
3924
*:link {
3926
color: $on-error;
3927
}
3928
}
3929
// Remove ugly hard-coded padding
3931
button label {
3932
margin: 0 -4px;
3933
}
3934
}
3935
/**
3937
* Tooltips
3938
*/
3939
tooltip {
3941
&.background {
3942
// background-color needs to be set this way otherwise it gets drawn twice
3943
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3944
background-color: $tooltip;
3945
color: $on-tooltip;
3946
}
3947
// padding: 4px; /* not working */
3949
border-radius: $corner-radius;
3950
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3951
&:not(.csd):not(.unity-csd) {
3953
// border: 1px solid divider($on-surface);
3954
// border-radius: $corner-radius + 1px;
3955
}
3956
// FIXME: we need a border or tooltips vanish on black background.
3958
decoration {
3959
background-color: transparent;
3960
}
3961
> box {
3963
margin: -6px; // Remove hard-coded 6px margin
3964
min-height: 32px - 4px * 2;
3965
padding: 4px 8px;
3966
}
3967
.dim-label {
3969
color: hint($on-tooltip);
3970
}
3971
* {
3973
// workaround for Eclipse.
3974
// do not include any declaration here.
3975
}
3976
}
3977
/**
3979
* Color Chooser
3980
*/
3981
colorswatch {
3983
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3984
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3985
// applied to the overlay box.
3986
// base color corners rounding
3988
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3989
// sports a bigger radius.
3990
// nth-child is needed by the custom color strip.
3991
&.top {
3993
border-top-left-radius: $corner-radius + .5px;
3994
border-top-right-radius: $corner-radius + .5px;
3995
overlay {
3997
border-top-left-radius: $corner-radius;
3998
border-top-right-radius: $corner-radius;
3999
}
4000
}
4001
&.bottom {
4003
border-bottom-left-radius: $corner-radius + .5px;
4004
border-bottom-right-radius: $corner-radius + .5px;
4005
overlay {
4007
border-bottom-left-radius: $corner-radius;
4008
border-bottom-right-radius: $corner-radius;
4009
}
4010
}
4011
&.left,
4013
&:first-child:not(.top) {
4014
border-top-left-radius: $corner-radius + .5px;
4015
border-bottom-left-radius: $corner-radius + .5px;
4016
overlay {
4018
border-top-left-radius: $corner-radius;
4019
border-bottom-left-radius: $corner-radius;
4020
}
4021
}
4022
&.right,
4024
&:last-child:not(.bottom) {
4025
border-top-right-radius: $corner-radius + .5px;
4026
border-bottom-right-radius: $corner-radius + .5px;
4027
overlay {
4029
border-top-right-radius: $corner-radius;
4030
border-bottom-right-radius: $corner-radius;
4031
}
4032
}
4033
&.dark {
4035
color: $on-dark;
4036
}
4037
&.light {
4039
color: $on-light;
4040
}
4041
overlay {
4043
transition: $transition-shadow;
4044
box-shadow: $shadow-z1;
4045
&:drop(active),
4047
&:hover {
4048
box-shadow: $shadow-z3;
4049
}
4050
}
4051
&#add-color-button {
4053
border-radius: $corner-radius $corner-radius 0 0;
4054
color: $on-surface;
4055
&:only-child {
4057
border-radius: $corner-radius;
4058
}
4059
overlay {
4061
background-color: $surface;
4062
}
4063
}
4064
&:disabled {
4066
opacity: .5;
4067
overlay {
4069
box-shadow: none;
4070
}
4071
}
4072
row:selected & {
4074
}
4075
&#editor-color-sample {
4077
border-radius: $corner-radius + .5px;
4078
overlay {
4080
border-radius: $corner-radius;
4081
&:hover {
4083
// box-shadow: $shadow-z1;
4084
}
4085
}
4086
}
4087
}
4088
// colorscale popup
4090
colorchooser .popover.osd {
4091
transition: $transition-shadow;
4092
border-radius: $corner-radius;
4093
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
4094
background-color: $surface;
4095
&:backdrop {
4097
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
4098
}
4099
}
4100
/**
4102
* Misc
4103
*/
4104
// content view (grid/list)
4106
.content-view {
4107
background-color: $background;
4108
&:hover {
4110
// -gtk-icon-effect: highlight;
4111
}
4112
rubberband,
4114
.rubberband {
4115
@extend %rubberband;
4116
}
4117
}
4118
.scale-popup {
4120
.osd & {
4121
// @extend %osd;
4122
// FIXME: quick hack, redo properly
4124
button.flat {
4125
}
4126
}
4127
// +/- buttons on GtkVolumeButton popup
4129
button {
4130
}
4131
}
4132
/**
4134
* Window Decorations
4135
*/
4136
decoration {
4138
transition: $transition-shadow;
4139
border-radius: $corner-radius $corner-radius 0 0;
4140
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4141
// FIXME rationalize shadows
4143
// this is used for the resize cursor area
4145
margin: 8px;
4146
&:backdrop {
4148
// the transparent shadow here is to enforce that the shadow extents don't
4149
// change when we go to backdrop, to prevent jumping windows.
4150
// The biggest shadow should be in the same order then in the active state
4151
// or the jumping will happen during the transition.
4152
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4153
}
4154
.maximized &,
4156
.fullscreen &,
4157
.tiled &,
4158
.tiled-top &,
4159
.tiled-right &,
4160
.tiled-bottom &,
4161
.tiled-left & {
4162
border-radius: 0;
4163
}
4164
.popup & {
4166
box-shadow: none;
4167
}
4168
// server-side decorations as used by mutter
4170
.ssd & {
4171
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4172
}
4173
.csd.popup & {
4175
border-radius: $corner-radius;
4176
box-shadow: $shadow-z4;
4177
}
4178
tooltip.csd & {
4180
border-radius: $corner-radius;
4181
box-shadow: none;
4182
}
4183
messagedialog.csd & {
4185
border-radius: $corner-radius;
4186
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4187
&:backdrop {
4189
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4190
}
4191
}
4192
.solid-csd & {
4194
margin: 0;
4195
padding: 2px;
4196
border-radius: 0;
4197
box-shadow: none;
4198
box-shadow: inset 0 1px highlight($titlebar);
4199
background-color: $titlebar;
4200
&:backdrop {
4202
background-color: $titlebar-backdrop;
4203
}
4204
}
4205
}
4206
// Window Close button
4208
button.titlebutton {
4209
border-radius: $circular-radius;
4210
.selection-mode & {
4212
}
4213
}
4214
// catch all extend :)
4217
.monospace {
4219
font-family: monospace;
4220
}
4221
/**
4223
* Touch Copy & Paste
4224
*/
4225
// touch selection handlebars for the Popover.osd above
4227
cursor-handle {
4228
color: $primary;
4229
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4230
&.top:dir(ltr),
4232
&.bottom:dir(rtl) {
4233
-gtk-icon-transform: rotate(90deg);
4234
}
4235
&.bottom:dir(ltr),
4237
&.top:dir(rtl) {
4238
-gtk-icon-transform: unset;
4239
}
4240
&.insertion-cursor:dir(ltr),
4242
&.insertion-cursor:dir(rtl) {
4243
padding-top: 6px;
4244
-gtk-icon-transform: rotate(45deg);
4245
}
4246
}
4247
// Decouple the font of context menus from their entry/textview
4249
.context-menu {
4250
font: initial;
4251
}
4252
// shortcut window keys
4254
.keycap {
4255
min-width: 28px - 8px * 2;
4256
min-height: 28px - 2px;
4257
margin-top: 2px;
4258
padding-bottom: 2px;
4259
padding-left: 8px;
4260
padding-right: 8px;
4261
border: solid 1px divider($on-surface);
4263
border-radius: $corner-radius + 1px;
4264
box-shadow: inset 0 -2px divider($on-surface);
4265
background-clip: padding-box;
4266
background-color: $surface;
4267
color: $on-surface;
4268
font-size: smaller;
4269
}
4270
// FIXME needs to be done widget by widget, this wildcard should really die
4272
:not(decoration):not(window):drop(active) {
4273
// caret-color: $primary;
4274
}
4275
// FIXME aggregate with buttons
4277
stackswitcher button.text-button {
4278
min-width: 100px;
4279
}
4280
// FIXME aggregate with buttons
4282
stackswitcher button.circular,
4283
stackswitcher button.text-button.circular {
4284
min-width: $medium-size;
4285
min-height: $medium-size;
4286
padding: 0;
4287
}
4288
/**
4290
* App Icons
4291
*/
4292
// Outline for low res icons
4294
.lowres-icon {
4295
// -gtk-icon-shadow: none;
4296
}
4297
// Drapshadow for large icons
4299
.icon-dropshadow {
4300
// -gtk-icon-shadow: none;
4301
}
4302
/**
4304
* Emoji
4305
*/
4306
popover.emoji-picker {
4308
padding: 0;
4309
entry {
4311
border-bottom: 1px solid divider($on-surface);
4312
border-image: none;
4313
border-radius: 0;
4314
box-shadow: none;
4315
background-color: transparent;
4316
}
4317
scrolledwindow {
4319
border-bottom: 1px solid divider($on-surface);
4320
}
4321
}
4322
button.emoji-section {
4324
margin: 4px;
4325
&:checked {
4327
background-color: overlay("activated", $primary);
4328
color: $primary;
4329
@include ink-color($primary);
4330
}
4331
&:not(:last-child) {
4333
margin-right: 0;
4334
}
4335
}
4336
popover.emoji-picker .emoji {
4338
min-width: 3em;
4339
min-height: 3em;
4340
padding: 0 8px;
4341
// font-size: larger;
4342
widget {
4344
transition: $transition;
4345
border-radius: $corner-radius;
4346
&:hover {
4348
background-color: overlay("hover", $on-surface);
4349
}
4350
}
4351
}
4352
popover.emoji-completion {
4354
padding: 8px 0;
4355
arrow {
4357
border: none;
4358
background: none;
4359
}
4360
.emoji-completion-row {
4362
min-height: $menuitem-size;
4363
padding: 0 12px;
4364
}
4365
.emoji:hover {
4367
background-color: overlay("hover", $on-surface);
4368
}
4369
}
4370