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
selection {
177
background-color: $overlay-selected;
178
}
179
&:disabled {
181
color: disabled($on-surface);
182
headerbar &,
184
menuitem &,
185
tab &,
186
button & {
187
color: inherit;
188
}
189
}
190
&.osd {
192
border-radius: $corner-radius;
193
background-color: $tooltip;
194
color: $on-tooltip;
195
}
196
}
197
.dim-label {
199
color: hint($on-surface);
200
}
201
assistant {
203
.sidebar {
204
padding: 4px 0;
205
// background-color: $base;
206
}
207
.sidebar label {
209
min-height: $medium-size;
210
padding: 0 12px;
211
color: disabled($on-surface);
212
font-weight: 500;
213
&.highlight {
215
color: $on-surface;
216
}
217
}
218
}
219
%osd,
221
.osd {
222
// opacity: .9;
223
}
224
/**
226
* Spinner Animation
227
*/
228
@keyframes spin {
230
to {
231
-gtk-icon-transform: rotate(1turn);
232
}
233
}
234
spinner {
236
background: none;
237
opacity: 0; // non spinning spinner makes no sense
238
color: $primary;
239
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
240
transition: opacity $duration * 4 $ease-out;
241
animation: spin 1s linear infinite;
242
&:checked {
244
opacity: 1;
245
}
246
&:disabled {
248
color: disabled-hint($on-surface);
249
}
250
}
251
/**
253
* General Typography
254
*/
255
@function pt($size: $font-size) {
257
@return ($size * .75 / 1px) * 1pt;
258
}
259
.large-title {
261
font-weight: 400;
262
font-size: pt(48px);
263
}
264
.title-1 {
266
font-weight: 400;
267
font-size: pt(34px);
268
letter-spacing: pt(.25px);
269
}
270
.title-2 {
272
font-weight: 400;
273
font-size: pt(24px);
274
}
275
.title-3 {
277
font-weight: 500;
278
font-size: pt(20px);
279
letter-spacing: pt(.15px);
280
}
281
.title-4 {
283
font-weight: 400;
284
font-size: pt(16px);
285
letter-spacing: pt(.5px);
286
}
287
.heading {
289
font-weight: 500;
290
font-size: 1em;
291
}
292
.body {
294
font-weight: 400;
295
font-size: 1em;
296
}
297
.caption-heading {
299
font-weight: 500;
300
font-size: pt(12px);
301
letter-spacing: pt(1.5px);
302
}
303
.caption {
305
font-weight: 400;
306
font-size: pt(12px);
307
letter-spacing: pt(.4px);
308
}
309
/**
311
* Text Entries
312
*/
313
%entry,
315
entry {
316
min-height: $medium-size;
317
padding: 0 8px;
318
border-radius: $corner-radius $corner-radius 0 0;
319
@include entry(normal);
321
&:focus {
323
@include entry(checked);
324
}
325
&:drop(active) {
327
@include entry(hover);
328
}
329
&:disabled {
331
@include entry(disabled);
332
}
333
&.flat {
335
min-height: 0;
336
padding: 2px;
337
border-radius: 0;
338
background-color: transparent;
339
}
340
// icons inside the entry
342
image {
343
// min-height: $small-size;
344
// min-width: $small-size;
345
// border-radius: $circular-radius;
346
// @extend %ripple;
347
// @include ink-color($on-surface);
348
color: hint($on-surface);
349
&:hover,
351
&:active {
352
color: $on-surface;
353
}
354
&:disabled {
356
color: disabled($on-surface);
357
}
358
&.left {
360
margin-left: ($medium-size - 16px) / 2 - 8px;
361
margin-right: 6px;
362
}
363
&.right {
365
margin-left: 6px;
366
margin-right: ($medium-size - 16px) / 2 - 8px;
367
}
368
}
369
undershoot {
371
&.left {
372
@include undershoot(left);
373
}
374
&.right {
376
@include undershoot(right);
377
}
378
}
379
selection {
381
background-color: $overlay-selected;
382
}
383
// entry error and warning style
385
@each $class, $color in (".error": $error, ".warning": $warning) {
386
&#{$class} {
387
@include entry(normal, $color);
388
&:focus {
390
@include entry(checked, $color);
391
}
392
&:disabled {
394
@include entry(disabled, $color);
395
}
396
}
397
}
398
.osd & {
400
}
401
progress {
403
margin: 0 -8px -4px;
404
border-bottom: 2px solid $primary;
405
background-color: transparent;
406
}
407
// linked entries
409
.linked:not(.vertical) > & {
410
@extend %linked;
411
}
412
// Vertically linked entries
414
.linked.vertical > & {
415
@extend %linked-vertical;
416
}
417
}
418
%entry_raised {
420
border-radius: $corner-radius;
421
@include entry(raised-normal);
423
&:focus {
425
@include entry(raised-focus);
426
}
427
&:drop(active) {
429
@include entry(raised-hover);
430
}
431
&:disabled {
433
@include entry(raised-disabled);
434
}
435
// entry error and warning style
437
@each $class, $color in (".error": $error, ".warning": $warning) {
438
&#{$class} {
439
@include entry(raised-normal, $color);
440
&:focus {
442
@include entry(raised-focus, $color);
443
}
444
&:disabled {
446
@include entry(raised-disabled, $color);
447
}
448
image {
450
color: hint(on($color));
451
&:hover,
453
&:active {
454
color: on($color);
455
}
456
&:disabled {
458
color: disabled(on($color));
459
}
460
}
461
}
462
}
463
}
464
treeview entry {
466
&,
467
&.flat {
468
background-color: $base;
469
&,
471
&:focus {
472
border-image: none;
473
box-shadow: none;
474
}
475
}
476
}
477
.entry-tag {
479
margin: 2px;
480
border-radius: $circular-radius;
481
box-shadow: none;
482
background-color: fill($on-surface);
483
color: $on-surface;
484
&:hover {
486
background-image: image(overlay("hover", $on-surface));
487
}
488
// side margins: compensate the entry padding with a negative margin
490
// then the negative margin itself
491
:dir(ltr) & {
492
margin-left: 4px;
493
margin-right: 0;
494
padding-left: 12px;
495
padding-right: 8px;
496
}
497
:dir(rtl) & {
499
margin-left: 0;
500
margin-right: 4px;
501
padding-left: 8px;
502
padding-right: 12px;
503
}
504
// seems any sizing doesn't work
506
&.button {
507
box-shadow: none;
508
background-color: transparent;
509
color: hint($on-surface);
510
}
511
}
512
/**
514
* Buttons
515
*/
516
// stuff for .needs-attention
518
@keyframes needs-attention {
519
from {
520
background-image:
521
-gtk-gradient(
522
radial,
523
center center, 0,
524
center center, .001,
525
to($primary),
526
to(transparent)
527
);
528
}
529
to {
531
background-image:
532
-gtk-gradient(
533
radial,
534
center center, 0,
535
center center, .5,
536
to($primary),
537
to(transparent)
538
);
539
}
540
}
541
%button,
543
button {
544
min-height: 24px;
545
min-width: 16px;
546
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
547
border-radius: $corner-radius;
548
background-color: $surface;
549
color: $on-surface;
550
font-weight: 500;
551
@extend %ripple;
553
@include ink-color($on-surface, $elevation: true);
554
&:disabled {
556
box-shadow: none;
557
background-color: fill($on-surface);
558
color: disabled($on-surface);
559
}
560
&:checked {
562
background-color: overlay("activated", $primary, $background: $surface);
563
color: $primary;
564
@include ink-color($primary, $elevation: true);
565
&:disabled {
567
box-shadow: none;
568
background-color: overlay("activated", $on-surface, $background: fill($on-surface));
569
color: disabled($on-surface);
570
}
571
}
572
&.text-button {
574
min-width: 64px - 16px * 2;
575
padding-left: 16px;
576
padding-right: 16px;
577
}
578
&.image-button {
580
min-width: 24px;
581
padding: ($medium-size - 24px) / 2;
582
border-radius: $circular-radius;
583
}
584
// NOTE: Some image-only buttons use this as well
586
&.text-button.image-button {
587
min-width: 24px;
588
padding: ($medium-size - 24px) / 2;
589
border-radius: $corner-radius;
590
label {
592
&:first-child {
593
margin-left: 16px - ($medium-size - 24px) / 2;
594
}
595
&:last-child {
597
margin-right: 16px - ($medium-size - 24px) / 2;
598
}
599
}
600
image:not(:only-child) {
602
margin: 0 (24px - 16px) / 2;
603
}
604
}
605
.linked:not(.vertical) > & {
607
@extend %linked;
608
&.image-button:not(.text-button) {
610
@extend %linked-image-button;
611
}
612
}
613
.linked.vertical > & {
615
@extend %linked-vertical;
616
&.image-button:not(.text-button) {
618
@extend %linked-vertical-image-button;
619
}
620
}
621
}
622
%button-flat-basic {
624
background-color: transparent;
625
color: hint($on-surface);
626
@include ink-color($on-surface);
627
&:disabled {
629
background-color: transparent;
630
color: disabled-hint($on-surface);
631
}
632
}
633
%button-flat-activatable {
635
@extend %button-flat-basic;
636
&:checked {
638
background-color: overlay("activated", $on-surface);
639
color: $on-surface;
640
@include ink-color($on-surface);
641
&:disabled {
643
color: disabled($on-surface);
644
}
645
}
646
}
647
%button-flat,
649
button.flat {
650
@extend %button-flat-activatable;
651
&.text-button {
653
min-width: 64px - 8px * 2;
654
padding-left: 8px;
655
padding-right: 8px;
656
}
657
&.text-button.image-button {
659
min-width: 24px;
660
padding: ($medium-size - 24px) / 2;
661
label {
663
&:first-child {
664
margin-left: 12px - ($medium-size - 24px) / 2;
665
}
666
&:last-child {
668
margin-right: 12px - ($medium-size - 24px) / 2;
669
}
670
}
671
}
672
.linked:not(.vertical) > &,
674
.linked.vertical > & {
675
&:not(:only-child) { // specificity bump
676
border-radius: $corner-radius;
677
&.image-button:not(.text-button) {
679
border-radius: $circular-radius;
680
}
681
}
682
}
683
}
684
button {
686
// big standalone buttons like in Documents pager
687
&.osd {
688
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
689
&.image-button {
691
padding: ($large-size - 24px) / 2;
692
}
693
&:disabled {
695
opacity: 0;
696
}
697
}
698
// overlay / OSD style
700
@at-root %osd_button,
701
.osd & {
702
}
703
// Suggested and Destructive Action buttons
705
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
706
&#{$class} {
707
background-color: $color;
708
color: on($color);
709
@include ink-color(on($color), $elevation: true);
710
&:disabled {
712
box-shadow: none;
713
background-color: fill($on-surface);
714
color: disabled($on-surface);
715
}
716
&:checked {
718
background-color: overlay("activated", on($color), $background: $color);
719
}
720
&.flat {
722
background-color: transparent;
723
color: $color;
724
@include ink-color($color);
725
&:disabled {
727
box-shadow: none;
728
background-color: transparent;
729
color: disabled-hint($on-surface);
730
}
731
&:checked {
733
background-color: overlay("activated", $color);
734
}
735
}
736
.osd & {
738
}
739
}
740
}
741
.stack-switcher > & {
743
// to position the needs attention dot, padding is added to the button
744
// child, a label needs just lateral padding while an icon needs vertical
745
// padding added too.
746
> label {
748
margin: 0 -6px;
749
padding: 0 6px;
750
}
751
> image {
753
margin: -3px -6px;
754
padding: 3px 6px;
755
}
756
&.needs-attention {
758
> label,
759
> image {
760
@extend %needs-attention;
761
}
762
&:checked {
764
> label,
765
> image {
766
animation: none;
767
background-image: none;
768
}
769
}
770
}
771
}
772
// hide separators
774
&.font,
775
&.file {
776
separator {
777
@extend %hide_separators;
778
}
779
}
780
&.font {
782
> box > box > label {
783
// font-weight: bold;
784
}
785
}
786
// inline-toolbar buttons
788
.inline-toolbar & {
789
// @extend %button-flat;
790
&:not(.text-button) {
792
border-radius: $circular-radius;
793
}
794
}
795
.primary-toolbar & {
797
-gtk-icon-shadow: none; // tango icons don't need shadows
798
}
799
&.close,
801
&.circular { // The Bloody Circul Button
802
border-radius: $circular-radius;
803
label {
805
// padding: 0;
806
}
807
}
808
}
809
%button-small {
811
min-height: $small-size;
812
min-width: $small-size;
813
padding: 0;
814
border-radius: $circular-radius;
815
}
816
%needs-attention {
818
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
819
background-repeat: no-repeat;
820
background-position: right 3px;
821
background-size: 6px 6px;
822
&:dir(rtl) {
824
background-position: left 3px;
825
}
826
}
827
// all the following is for the +|- buttons on inline toolbars, that way
829
// should really be deprecated...
830
.inline-toolbar toolbutton > button {
831
}
832
// More inline toolbar buttons
834
toolbar.inline-toolbar toolbutton {
835
&:not(:first-child) > button.flat {
836
// @extend %linked-not-first-child;
837
}
838
&:not(:last-child) > button.flat {
840
// @extend %linked-not-last-child;
841
}
842
}
843
%linked-not-first-child {
845
border-top-left-radius: 0;
846
border-bottom-left-radius: 0;
847
}
848
%linked-not-last-child {
850
border-top-right-radius: 0;
851
border-bottom-right-radius: 0;
852
}
853
%linked {
855
&:not(:first-child) {
856
@extend %linked-not-first-child;
857
}
858
&:not(:last-child) {
860
@extend %linked-not-last-child;
861
}
862
}
863
%linked-vertical-not-first-child {
865
border-top-left-radius: 0;
866
border-top-right-radius: 0;
867
}
868
%linked-vertical-not-last-child {
870
border-bottom-left-radius: 0;
871
border-bottom-right-radius: 0;
872
}
873
%linked-vertical {
875
&:not(:first-child) {
876
@extend %linked-vertical-not-first-child;
877
}
878
&:not(:last-child) {
880
@extend %linked-vertical-not-last-child;
881
}
882
}
883
%linked-image-button {
885
&:first-child {
886
border-top-left-radius: $corner-radius;
887
border-bottom-left-radius: $corner-radius;
888
}
889
&:last-child {
891
border-top-right-radius: $corner-radius;
892
border-bottom-right-radius: $corner-radius;
893
}
894
&:only-child {
896
border-radius: $circular-radius;
897
}
898
}
899
%linked-vertical-image-button {
901
&:first-child {
902
border-top-left-radius: $corner-radius;
903
border-top-right-radius: $corner-radius;
904
}
905
&:last-child {
907
border-bottom-left-radius: $corner-radius;
908
border-bottom-right-radius: $corner-radius;
909
}
910
&:only-child {
912
border-radius: $circular-radius;
913
}
914
}
915
/* menu buttons */
917
modelbutton.flat,
918
.menuitem.button.flat {
919
min-height: $menuitem-size;
920
padding: 0 8px;
921
border-radius: $corner-radius;
922
@extend %ripple;
924
@include ink-color($on-surface);
925
&:selected {
927
background-color: $overlay-selected;
928
}
929
}
930
modelbutton.flat arrow {
932
transition: color $duration $ease-out;
933
color: hint($on-surface);
934
&:disabled {
936
color: disabled-hint($on-surface);
937
}
938
&.left {
940
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
941
}
942
&.right {
944
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
945
}
946
}
947
button.color {
949
min-height: $small-size;
950
min-width: $small-size;
951
padding: $container-padding;
952
colorswatch:only-child {
954
&,
955
overlay {
956
// border-radius: 0;
957
}
958
}
959
}
960
/**
962
* Links
963
*/
964
*:link {
966
color: $primary;
967
}
968
*:visited {
970
color: $visited;
971
}
972
button.link {
974
&:link {
975
color: $primary;
976
@include ink-color($primary);
977
}
978
&:visited {
980
color: $visited;
981
@include ink-color($visited);
982
}
983
> label {
985
text-decoration-line: underline;
986
}
987
}
988
/**
990
* GtkSpinButton
991
*/
992
spinbutton {
994
&:not(.vertical) {
995
// in this horizontal configuration, the whole spinbutton
996
// behaves as the entry, so we extend the entry styling
997
// and nuke the style on the internal entry
998
@extend %entry;
999
padding: 0;
1001
entry {
1003
min-width: $large-size - 8px * 2;
1004
// reset all the other props since the spinbutton node is styled here
1005
margin: 0;
1006
border-image: none;
1007
border-radius: 0;
1008
box-shadow: none;
1009
background-color: transparent;
1010
}
1011
button {
1013
@extend %button-flat-basic;
1014
@extend %button-small;
1015
// margin: $container-padding;
1017
border: solid $container-padding transparent;
1018
// Remove unwanted focus indicator
1020
&:focus:not(:hover):not(:active) {
1021
box-shadow: inset 0 0 0 9999px transparent;
1022
}
1023
&.up:dir(ltr),
1025
&.down:dir(rtl) {
1026
margin-left: -$container-padding / 2;
1027
}
1028
&.up:dir(rtl),
1030
&.down:dir(ltr) {
1031
margin-right: -$container-padding / 2;
1032
}
1033
}
1034
}
1035
// OSD horizontal
1037
.osd &:not(.vertical) {
1038
}
1039
// Vertical
1041
&.vertical {
1042
// in the vertical configuration, we treat the spinbutton
1043
// as a box, and tweak the style of the entry in the middle
1044
// so that it's linked
1045
// FIXME: this should not be set at all, but otherwise it gets the wrong
1047
// color
1048
caret-color: $primary;
1049
// FIXME: this should not be set at all, but otherwise it gets the wrong
1051
// color
1052
&:disabled {
1053
color: disabled($on-surface);
1054
}
1055
entry {
1057
@extend %entry_raised;
1058
min-height: $medium-size;
1060
min-width: $large-size;
1061
padding: 0;
1062
}
1063
button {
1065
min-height: $medium-size;
1066
min-width: $large-size;
1067
padding: 0;
1068
@extend %button-flat-basic;
1070
// Remove unwanted focus indicator
1072
&:focus:not(:hover):not(:active) {
1073
box-shadow: inset 0 0 0 9999px transparent;
1074
}
1075
&.up {
1077
border-radius: $corner-radius $corner-radius 0 0;
1078
}
1079
&.down {
1081
border-radius: 0 0 $corner-radius $corner-radius;
1082
}
1083
}
1084
}
1085
// OSD vertical
1087
.osd &.vertical {
1088
}
1089
// Misc
1091
treeview &:not(.vertical) {
1092
min-height: 0;
1093
border-style: none;
1094
border-radius: 0;
1095
entry {
1097
min-height: 0;
1098
padding: 1px 2px;
1099
}
1100
}
1101
}
1102
/**
1104
* ComboBoxes
1105
*/
1106
combobox {
1108
arrow {
1109
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1110
min-height: 16px;
1111
min-width: 16px;
1112
}
1113
// workaround for menuitem selection
1115
decoration {
1116
transition: none;
1117
}
1118
button.combo cellview {
1120
&:dir(ltr) {
1121
margin-left: 8px - ($medium-size - 16px) / 2;
1122
}
1123
&:dir(rtl) {
1125
margin-right: 8px - ($medium-size - 16px) / 2;
1126
}
1127
}
1128
menu {
1130
padding: 2px 0;
1131
menuitem {
1133
min-height: $medium-size - 2px * 2;
1134
padding: 0 8px;
1135
}
1136
// overflow arrows
1138
> arrow {
1139
&.top {
1140
margin-top: -2px;
1141
}
1142
&.bottom {
1144
margin-top: 2px * 2;
1145
margin-bottom: -2px * 3;
1146
}
1147
}
1148
}
1149
&.linked {
1151
button:nth-child(2) {
1152
&:dir(ltr) {
1153
@extend %linked-not-first-child;
1154
}
1155
&:dir(rtl) {
1157
@extend %linked-not-last-child;
1158
}
1159
}
1160
}
1161
> .linked:not(.vertical) > entry:not(:only-child) {
1163
border-radius: $corner-radius $corner-radius 0 0;
1164
&:first-child {
1166
margin-right: -$medium-size;
1167
padding-right: $medium-size;
1168
}
1169
&:last-child {
1171
margin-left: -$medium-size;
1172
padding-left: $medium-size;
1173
}
1174
}
1175
> .linked:not(.vertical) > button:not(:only-child) {
1177
@extend %button-flat-activatable;
1178
// @extend %button-small;
1179
min-height: 16px;
1181
min-width: 16px;
1182
margin: ($medium-size - $small-size) / 2;
1183
padding: ($small-size - 16px) / 2;
1184
border-radius: $circular-radius;
1185
}
1186
}
1187
// the combo is a composite widget so the way we do button linking doesn't
1189
// work, special case needed. See
1190
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1191
.linked:not(.vertical) > combobox {
1193
&:not(:first-child) > box > button.combo {
1194
@extend %linked-not-first-child;
1195
}
1196
&:not(:last-child) > box > button.combo {
1198
@extend %linked-not-last-child;
1199
}
1200
}
1201
.linked.vertical > combobox {
1203
&:not(:first-child) > box > button.combo {
1204
@extend %linked-vertical-not-first-child;
1205
}
1206
&:not(:last-child) > box > button.combo {
1208
@extend %linked-vertical-not-last-child;
1209
}
1210
}
1211
button.combo:only-child {
1213
border-radius: $corner-radius $corner-radius 0 0;
1214
font-weight: normal;
1215
@include entry(normal);
1217
&:focus {
1219
@include entry(focus);
1220
}
1221
&:drop(active),
1223
&:hover {
1224
@include entry(hover);
1225
}
1226
&:checked {
1228
@include entry(checked);
1229
}
1230
&:disabled {
1232
@include entry(disabled);
1233
}
1234
arrow {
1236
transition: color $duration $ease-out;
1237
color: hint($on-surface);
1238
&:disabled {
1240
color: disabled-hint($on-surface);
1241
}
1242
}
1243
}
1244
/**
1246
* Toolbars
1247
*/
1248
toolbar {
1250
-GtkWidget-window-dragging: true;
1251
padding: 2px;
1252
background-color: $background;
1253
button {
1255
@extend %button-flat;
1256
}
1257
// on OSD
1259
.osd & {
1260
background-color: transparent;
1261
}
1262
// stand-alone OSD toolbars
1264
&.osd {
1265
@extend %toolbar-osd;
1266
// positional classes for `attached` osd toolbars
1268
&.left,
1269
&.right,
1270
&.top,
1271
&.bottom {
1272
border-radius: 0;
1273
}
1274
&.bottom {
1276
box-shadow: none;
1277
background-color: transparent;
1278
background-image:
1279
linear-gradient(
1280
to bottom,
1281
transparent,
1282
rgba(black, .1) 30%,
1283
rgba(black, .2) 50%,
1284
rgba(black, .4)
1285
);
1286
}
1287
}
1288
// toolbar separators
1290
&.horizontal > separator {
1291
margin: 2px;
1292
}
1293
&.vertical > separator {
1295
margin: 2px;
1296
}
1297
&:not(.inline-toolbar):not(.osd) {
1299
scale,
1300
entry,
1301
spinbutton,
1302
button {
1303
margin: 2px;
1304
}
1305
.linked entry,
1307
.linked spinbutton,
1308
.linked button {
1309
&:not(:first-child) {
1310
margin-left: 0;
1311
}
1312
&:not(:last-child) {
1314
margin-right: 0;
1315
}
1316
}
1317
spinbutton {
1319
entry,
1320
button {
1321
margin: 0;
1322
}
1323
}
1324
switch {
1326
margin: 2px + $container-padding 2px;
1327
}
1328
}
1329
}
1330
%toolbar-osd {
1332
transition: $transition-shadow;
1333
padding: $container-padding;
1334
border-radius: $corner-radius;
1335
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1336
background-color: $surface;
1337
&:backdrop {
1339
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1340
}
1341
}
1342
// searchbar, location-bar & inline-toolbar
1344
.inline-toolbar {
1345
padding: $container-padding;
1346
border-style: solid;
1347
border-width: 0 1px 1px;
1348
border-color: divider($on-surface);
1349
background-color: $base;
1350
}
1351
searchbar > revealer > box,
1353
.location-bar {
1354
padding: $container-padding;
1355
border-style: solid;
1356
border-width: 0 0 1px;
1357
border-color: divider($on-surface);
1358
background-color: $background;
1359
background-clip: border-box;
1360
}
1361
searchbar > revealer > box {
1363
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1364
margin: -6px;
1365
padding: $container-padding;
1366
}
1367
/**
1369
* Header bars
1370
*/
1371
.titlebar {
1373
transition: background-color $duration $ease-out, color $duration $ease-out;
1374
border-radius: $corner-radius $corner-radius 0 0;
1375
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1376
background-color: $titlebar;
1377
color: $on-titlebar;
1378
&:disabled {
1380
color: disabled($on-titlebar);
1381
}
1382
&:backdrop {
1384
background-color: $titlebar-backdrop;
1385
color: hint($on-titlebar);
1386
&:disabled {
1388
color: disabled-hint($on-titlebar);
1389
}
1390
}
1391
.title {
1393
padding-left: 12px;
1394
padding-right: 12px;
1395
font-weight: bold;
1396
}
1397
.subtitle {
1399
padding-left: 12px;
1400
padding-right: 12px;
1401
font-size: smaller;
1402
}
1403
.subtitle,
1405
.dim-label {
1406
transition: color $duration $ease-out;
1407
color: hint($on-titlebar);
1408
&:backdrop {
1410
color: disabled($on-titlebar);
1411
}
1412
}
1413
// Don't draw titlebar above titlebar
1415
.titlebar {
1416
background-color: transparent;
1417
box-shadow: none;
1418
}
1419
// The separator for split headerbars
1421
headerbar + separator {
1422
background-color: divider($on-titlebar);
1423
}
1424
entry {
1426
box-shadow: inset 0 -1px stroke($on-titlebar);
1427
background-color: entry-fill($on-titlebar);
1428
color: $on-titlebar;
1429
&:disabled {
1431
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1432
background-color: entry-fill($on-titlebar);
1433
color: disabled($on-titlebar);
1434
}
1435
image {
1437
color: hint($on-titlebar);
1438
&:hover,
1440
&:active {
1441
color: $on-titlebar;
1442
}
1443
&:disabled {
1445
color: disabled($on-titlebar);
1446
}
1447
}
1448
}
1449
.linked:not(.vertical) > entry:not(:only-child) {
1451
border-radius: $corner-radius $corner-radius 0 0;
1452
}
1453
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1455
@extend %button-flat;
1456
border-image:
1458
radial-gradient(
1459
circle closest-corner at center calc(100% - 1px),
1460
$titlebar-indicator 0%,
1461
transparent 0%
1462
) 0 0 0 / 0 0 0;
1463
background-color: transparent;
1464
color: hint($on-titlebar);
1465
@include ink-color($on-titlebar);
1466
&:disabled {
1468
color: disabled-hint($on-titlebar);
1469
}
1470
@at-root %titlebar-button-checked,
1472
&:checked {
1473
border-image:
1474
radial-gradient(
1475
circle closest-corner at center calc(100% - 1px),
1476
$titlebar-indicator 100%,
1477
transparent 0%
1478
) 0 0 2 / 0 0 2px;
1479
background-color: transparent;
1480
color: $on-titlebar;
1481
@include ink-color($on-titlebar);
1482
&:disabled {
1484
background-color: transparent;
1485
color: disabled($on-titlebar);
1486
}
1487
}
1488
&:backdrop {
1490
color: disabled($on-titlebar);
1491
&:disabled {
1493
color: disabled-hint($on-titlebar);
1494
}
1495
&:checked {
1497
color: hint($on-titlebar);
1498
&:disabled {
1500
color: disabled-hint($on-titlebar);
1501
}
1502
}
1503
}
1504
}
1505
button.suggested-action, button.destructive-action {
1507
&:disabled {
1508
background-color: fill($on-titlebar);
1509
color: disabled($on-titlebar);
1510
}
1511
}
1512
// FIXME: Ugly overriding
1514
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1515
min-width: 120px - 8px * 2;
1516
}
1517
// FIXME: Ugly overriding
1519
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1520
min-width: 0;
1521
padding-left: ($medium-size - 24px) / 2;
1522
padding-right: ($medium-size - 24px) / 2;
1523
}
1524
&.selection-mode {
1526
// .1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1527
// but let's keep it for backwards compatibility.
1528
transition: background-color .1ms $ripple-fade-in-duration, color $duration $ease-out;
1529
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1530
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1531
background-color: $primary;
1532
color: $on-primary;
1533
&:backdrop {
1535
color: hint($on-primary);
1536
}
1537
.subtitle:link {
1539
color: $on-primary;
1540
}
1541
button:not(.suggested-action):not(.destructive-action) {
1543
border-image:
1544
radial-gradient(
1545
circle closest-corner at center calc(100% - 1px),
1546
currentcolor 0%,
1547
transparent 0%
1548
) 0 0 0 / 0 0 0;
1549
color: $on-primary;
1550
&:disabled {
1552
color: disabled($on-primary);
1553
}
1554
&:checked {
1556
border-image:
1557
radial-gradient(
1558
circle closest-corner at center calc(100% - 1px),
1559
currentcolor 100%,
1560
transparent 0%
1561
) 0 0 2 / 0 0 2px;
1562
color: $on-primary;
1563
&:disabled {
1565
color: disabled($on-primary);
1566
}
1567
}
1568
&:backdrop {
1570
color: hint($on-primary);
1571
&:disabled {
1573
color: disabled-hint($on-primary);
1574
}
1575
&:checked {
1577
color: hint($on-primary);
1578
&:disabled {
1580
color: disabled-hint($on-primary);
1581
}
1582
}
1583
}
1584
}
1585
.selection-menu {
1587
padding-left: 16px;
1588
padding-right: 16px;
1589
arrow {
1591
-GtkArrow-arrow-scaling: 1;
1592
}
1593
.arrow {
1595
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1596
}
1597
}
1598
}
1599
.selection-mode {
1601
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1602
background-color: $primary;
1603
}
1604
// squared corners when the window is maximized, tiled, or fullscreen
1606
.tiled &,
1607
.tiled-top &,
1608
.tiled-right &,
1609
.tiled-bottom &,
1610
.tiled-left &,
1611
.maximized &,
1612
.fullscreen & {
1613
border-radius: 0;
1614
box-shadow: $shadow-z1;
1615
}
1616
&.default-decoration {
1618
min-height: $small-size;
1619
padding: $container-padding;
1620
box-shadow: inset 0 1px highlight($titlebar);
1621
.tiled &,
1623
.maximized &,
1624
.fullscreen & {
1625
box-shadow: none;
1626
}
1627
button.titlebutton {
1629
min-height: $small-size;
1630
min-width: $small-size;
1631
margin: 0;
1632
padding: 0;
1633
}
1634
// workaround for non-animatable buttons
1636
.background:not(.csd) & button.titlebutton:active {
1637
background-size: 1000% 1000%;
1638
}
1639
}
1640
.solid-csd & {
1642
&:dir(rtl), &:dir(ltr) { // specificity bump
1643
border-radius: 0;
1644
box-shadow: $shadow-z1; // just remove the highlight
1645
}
1646
}
1647
}
1648
headerbar {
1650
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1651
min-height: $large-size;
1652
padding: 0 $container-padding;
1653
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1655
entry,
1656
spinbutton,
1657
button {
1658
margin-top: $container-padding;
1659
margin-bottom: $container-padding;
1660
}
1661
separator.titlebutton {
1663
margin-top: $large-size / 4;
1664
margin-bottom: $large-size / 4;
1665
background-color: divider($on-titlebar);
1666
}
1667
switch {
1669
margin-top: ($large-size - 24px) / 2;
1670
margin-bottom: ($large-size - 24px) / 2;
1671
}
1672
// reset button margins of the spinbutton
1674
spinbutton button {
1675
margin-top: 0;
1676
margin-bottom: 0;
1677
}
1678
// FIXME: This is a hacky workaround.
1680
.entry-tag {
1681
margin-top: 5px;
1682
margin-bottom: 5px;
1683
}
1684
}
1685
// Development versions of apps to use a differently styled headerbar
1687
window.devel .titlebar:not(.selection-mode) {
1688
}
1689
/**
1691
* Pathbars
1692
*/
1693
%pathbar_button,
1695
.path-bar.linked:not(.vertical) > button {
1696
@extend %button-flat-basic;
1697
padding-left: ($medium-size - 24px) / 2;
1699
padding-right: ($medium-size - 24px) / 2;
1700
border-image:
1701
radial-gradient(
1702
circle closest-corner at center calc(100% - 1px),
1703
$primary 0%,
1704
transparent 0%
1705
) 0 0 0 / 0 0 0;
1706
border-radius: $corner-radius;
1707
&:checked {
1709
border-image:
1710
radial-gradient(
1711
circle closest-corner at center calc(100% - 1px),
1712
$primary 100%,
1713
transparent 0%
1714
) 0 0 2 / 0 0 2px;
1715
color: $on-surface;
1716
&,
1718
&:disabled {
1719
background-color: transparent;
1720
}
1721
}
1722
label:not(:only-child) {
1724
&:first-child {
1725
margin-left: 0;
1726
}
1727
&:last-child {
1729
margin-right: 0;
1730
}
1731
}
1732
&.text-button {
1734
min-width: 0;
1735
}
1736
&.slider-button {
1738
padding-left: (24px - 16px) / 2;
1739
padding-right: (24px - 16px) / 2;
1740
}
1741
}
1742
/**
1744
* Tree Views
1745
*/
1746
treeview.view {
1748
@at-root * {
1749
-GtkTreeView-horizontal-separator: 4;
1750
-GtkTreeView-grid-line-width: 1;
1751
-GtkTreeView-grid-line-pattern: '';
1752
-GtkTreeView-tree-line-width: 1;
1753
-GtkTreeView-tree-line-pattern: '';
1754
-GtkTreeView-expander-size: 16;
1755
}
1756
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1758
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1759
// FIXME: Avoid transparency background-color being slightly darker
1761
&:selected {
1762
background-color: $base;
1763
background-image: image($overlay-selected);
1764
}
1765
// to avoid borders being overridden by the previously set props
1767
rubberband {
1768
@extend %rubberband;
1769
}
1770
&:hover,
1772
&:selected {
1773
border-radius: 0;
1774
}
1775
&.separator {
1777
min-height: 1px + 2px * 2;
1778
color: divider($on-surface);
1779
}
1780
&:drop(active) {
1782
// FIXME: box-shadow, background-color and background-image are not available here.
1783
border-style: solid none;
1784
border-width: 9999px;
1785
border-color: overlay("hover", $on-surface);
1786
&.after {
1788
border-top-style: none;
1789
}
1790
&.before {
1792
border-bottom-style: none;
1793
}
1794
}
1795
&.expander {
1797
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1798
-gtk-icon-transform: rotate(-90deg);
1799
&:dir(rtl) {
1801
-gtk-icon-transform: rotate(90deg);
1802
}
1803
&:checked {
1805
-gtk-icon-transform: unset;
1806
}
1807
color: hint($on-surface);
1809
&:hover,
1811
&:active {
1812
color: $on-surface;
1813
}
1814
&:disabled {
1816
color: disabled-hint($on-surface);
1817
}
1818
}
1819
&.progressbar { // progress bar in treeviews
1821
border-bottom: $bar-size solid $primary;
1822
box-shadow: none;
1823
background-color: transparent;
1824
background-image: none;
1825
&:selected:hover {
1827
box-shadow: none;
1828
}
1829
}
1830
&.trough { // progress bar trough in treeviews
1832
border-bottom: $bar-size solid disabled-stroke($on-surface);
1833
box-shadow: none;
1834
background-color: transparent;
1835
background-image: none;
1836
&:selected:hover {
1838
box-shadow: none;
1839
}
1840
}
1841
header {
1843
button {
1844
padding: 2px 6px;
1845
border-style: none solid solid none;
1846
border-width: 1px;
1847
border-color: divider($on-surface);
1848
border-radius: 0;
1849
background-clip: border-box;
1850
color: hint($on-surface);
1851
@include ink-color($on-surface);
1852
@include list-item;
1853
&:disabled {
1855
color: disabled-hint($on-surface);
1856
}
1857
&,
1859
&:disabled {
1860
background-color: $base;
1861
}
1862
&:last-child {
1864
border-right-style: none;
1865
}
1866
}
1867
}
1868
button.dnd,
1870
header.button.dnd { // for treeview-like derive widgets
1871
padding: 2px 6px;
1872
border-style: none solid solid;
1873
border-width: 1px;
1874
border-color: divider($on-surface);
1875
border-radius: 0;
1876
box-shadow: none;
1877
background-color: $base;
1878
background-clip: border-box;
1879
color: $primary;
1880
}
1881
// see tests/testaccel to test
1883
acceleditor > label {
1884
background-color: $primary;
1885
}
1886
}
1887
/**
1889
* Menus
1890
*/
1891
menubar,
1893
.menubar {
1894
-GtkWidget-window-dragging: true;
1895
padding: 0;
1896
// box-shadow: inset 0 -1px divider($on-surface);
1897
background-color: $titlebar;
1898
color: $on-titlebar;
1899
&:backdrop {
1901
background-color: $titlebar-backdrop;
1902
color: hint($on-titlebar);
1903
}
1904
.csd & {
1906
transition: $transition;
1907
}
1908
> menuitem {
1910
transition: $transition;
1911
min-height: 20px;
1912
padding: 4px 8px;
1913
color: hint($on-titlebar);
1914
&:hover { // Seems like it :hover even with keyboard focus
1916
transition: none;
1917
background-color: overlay("activated", $on-titlebar);
1918
color: $on-titlebar;
1919
}
1920
&:disabled {
1922
color: disabled-hint($on-titlebar);
1923
}
1924
}
1925
}
1926
// Needed to make the border-radius of menus work
1928
// otherwise the background bleeds out of the menu edges
1929
.background.popup {
1930
background-color: transparent;
1931
}
1932
menu,
1934
.menu,
1935
.context-menu {
1936
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1937
padding: 4px 0;
1938
box-shadow: inset 0 1px highlight($surface);
1939
background-color: $surface;
1940
background-clip: border-box;
1941
border: 1px solid divider($on-surface); // adds borders in a non composited env
1942
.csd & {
1944
border: none; // axes borders in a composited env
1945
border-radius: $corner-radius;
1946
}
1947
menuitem {
1949
transition: background-color $duration $ease-out;
1950
min-height: 20px;
1951
min-width: 40px;
1952
padding: 4px 8px;
1953
color: $on-surface;
1954
font: initial;
1955
text-shadow: none;
1956
&:hover {
1958
transition: none;
1959
background-color: overlay("hover", $on-surface);
1960
}
1961
&:disabled {
1963
color: disabled($on-surface);
1964
}
1965
// submenu indicators
1967
arrow {
1968
min-height: 16px;
1969
min-width: 16px;
1970
color: hint($on-surface);
1971
&:disabled {
1973
color: disabled-hint($on-surface);
1974
}
1975
&:dir(ltr) {
1977
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1978
margin-left: 8px;
1979
}
1980
&:dir(rtl) {
1982
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1983
margin-right: 8px;
1984
}
1985
}
1986
// avoids labels color being overridden, see
1988
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1989
label {
1990
&:dir(rtl),
1991
&:dir(ltr) {
1992
// color: inherit;
1993
}
1994
}
1995
}
1996
// overflow arrows
1998
> arrow {
1999
min-height: 16px;
2000
min-width: 16px;
2001
padding: 4px;
2002
background-color: $surface;
2003
color: hint($on-surface);
2004
&.top {
2006
margin-top: -4px;
2007
border-bottom: 1px solid divider($on-surface);
2008
border-radius: $corner-radius $corner-radius 0 0;
2009
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2010
}
2011
&.bottom {
2013
margin-top: 4px * 2;
2014
margin-bottom: -4px * 3;
2015
border-top: 1px solid divider($on-surface);
2016
border-radius: 0 0 $corner-radius $corner-radius;
2017
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2018
}
2019
&:hover {
2021
background-image: image(overlay("hover", $on-surface));
2022
}
2023
&:disabled {
2025
border-color: transparent;
2026
background-color: transparent;
2027
color: transparent;
2028
// color: disabled-hint($on-surface);
2029
}
2030
}
2031
separator {
2033
margin: 4px 0;
2034
}
2035
}
2036
menuitem {
2038
accelerator {
2039
color: hint($on-surface);
2040
}
2041
&:disabled accelerator {
2043
color: disabled-hint($on-surface);
2044
}
2045
}
2046
/**
2048
* Popovers
2049
*/
2050
popover.background {
2052
transition: $transition-shadow;
2053
padding: 2px;
2054
box-shadow: $shadow-z4; // TODO: this should really have a highlight
2055
background-color: $surface;
2056
&:backdrop {
2058
box-shadow: $shadow-z2;
2059
}
2060
&, .csd & {
2062
border-style: solid;
2063
border-width: 1px;
2064
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
2065
border-radius: $corner-radius + 1px;
2066
}
2067
> stack {
2069
margin: -4px; // remove extra padding from menu style popovers
2070
}
2071
> toolbar {
2073
margin: -2px;
2074
}
2075
> list,
2077
> .view,
2078
> toolbar {
2079
border-style: none;
2080
box-shadow: none;
2081
background-color: transparent;
2082
}
2083
// FIXME: Use the popover color instead of transparent as a workaround for .view
2085
list,
2086
.view:not(:selected),
2087
toolbar {
2088
background-color: $surface;
2089
}
2090
&.touch-selection,
2092
&.magnifier,
2093
&.osd {
2094
// @extend %osd;
2095
}
2096
button:not(.suggested-action):not(.destructive-action) {
2098
// @extend %button-flat;
2099
}
2100
.linked:not(.vertical) > entry:not(:only-child) {
2102
// border-radius: $corner-radius $corner-radius 0 0;
2103
}
2104
&.menu button,
2106
button.model {
2107
@extend %button-flat;
2108
min-height: 32px;
2110
padding: 0 8px;
2111
border-radius: $corner-radius;
2112
&:checked {
2114
// color: $primary;
2115
}
2116
}
2117
separator {
2119
margin: 4px 0;
2120
}
2121
list separator {
2123
margin: 0;
2124
}
2125
}
2126
/**
2128
* Notebooks
2129
*/
2130
notebook {
2132
frame > paned > & > header,
2133
&.frame > header {
2134
background-color: $base;
2135
}
2136
&:focus tab:checked {
2138
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
2139
}
2140
> header {
2142
border-width: 1px;
2143
border-color: divider($on-surface);
2144
background-color: $background;
2145
background-clip: border-box;
2146
&.top {
2148
border-bottom-style: solid;
2149
> tabs {
2151
margin-bottom: -1px;
2152
> tab {
2154
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2155
&:checked {
2157
border-image-source: linear-gradient(to top, $primary 2px, divider($on-surface) 2px);
2158
}
2159
&.reorderable-page {
2161
border-image-width: 0 1px 2px;
2162
}
2163
}
2164
}
2165
}
2166
&.bottom {
2168
border-top-style: solid;
2169
> tabs {
2171
margin-top: -1px;
2172
> tab {
2174
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2175
&:checked {
2177
border-image-source: linear-gradient(to bottom, $primary 2px, divider($on-surface) 2px);
2178
}
2179
&.reorderable-page {
2181
border-image-width: 2px 1px 0;
2182
}
2183
}
2184
}
2185
}
2186
&.left {
2188
border-right-style: solid;
2189
> tabs {
2191
margin-right: -1px;
2192
> tab {
2194
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2195
&:checked {
2197
border-image-source: linear-gradient(to left, $primary 2px, divider($on-surface) 2px);
2198
}
2199
&.reorderable-page {
2201
border-image-width: 1px 2px 1px 0;
2202
}
2203
}
2204
}
2205
}
2206
&.right {
2208
border-left-style: solid;
2209
> tabs {
2211
margin-left: -1px;
2212
> tab {
2214
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2215
&:checked {
2217
border-image-source: linear-gradient(to right, $primary 2px, divider($on-surface) 2px);
2218
}
2219
&.reorderable-page {
2221
border-image-width: 1px 0 1px 2px;
2222
}
2223
}
2224
}
2225
}
2226
&.top > tabs > arrow {
2228
@extend %notebook_vert_arrows;
2229
border-top-style: none;
2231
}
2232
&.bottom > tabs > arrow {
2234
@extend %notebook_vert_arrows;
2235
border-bottom-style: none;
2237
}
2238
@at-root %notebook_vert_arrows {
2240
padding-left: 4px;
2241
padding-right: 4px;
2242
&.down {
2244
margin-left: -8px;
2245
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2246
}
2247
&.up {
2249
margin-right: -8px;
2250
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2251
}
2252
}
2253
&.left > tabs > arrow {
2255
@extend %notebook_horz_arrows;
2256
border-left-style: none;
2258
}
2259
&.right > tabs > arrow {
2261
@extend %notebook_horz_arrows;
2262
border-right-style: none;
2264
}
2265
@at-root %notebook_horz_arrows {
2267
padding-top: 4px;
2268
padding-bottom: 4px;
2269
&.down {
2271
margin-top: -8px;
2272
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2273
}
2274
&.up {
2276
margin-bottom: -8px;
2277
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2278
}
2279
}
2280
> tabs > arrow {
2282
min-height: 16px;
2283
min-width: 16px;
2284
border-radius: 0;
2285
color: hint($on-surface);
2286
@extend %ripple;
2287
@include ink-color($on-surface);
2288
&:disabled {
2290
color: disabled-hint($on-surface);
2291
}
2292
}
2293
tab {
2295
transition: $transition,
2296
background-size 0ms,
2297
background-image 0ms;
2298
min-height: $small-size;
2299
min-width: $small-size;
2300
padding: $container-padding 12px;
2301
border-width: 1px; // for reorderable tabs
2303
border-color: transparent; //
2304
outline: none;
2306
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2307
background-repeat: no-repeat;
2308
background-position: center;
2309
background-size: 0% 0%;
2310
background-clip: border-box;
2311
color: hint($on-surface);
2313
font-weight: 500;
2314
&:hover {
2316
background-color: overlay("hover-alt", $on-surface);
2317
}
2318
&:disabled {
2320
color: disabled-hint($on-surface);
2321
}
2322
&:checked {
2324
transition: $transition,
2325
background-size $ripple-fade-in-duration $ease-out,
2326
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2327
background-color: transparent;
2328
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2329
background-size: 1000% 1000%;
2330
background-clip: padding-box;
2331
color: $on-surface;
2332
&:disabled {
2334
color: disabled($on-surface);
2335
}
2336
&.reorderable-page {
2338
border-color: divider($on-surface);
2339
background-color: $base;
2340
}
2341
}
2342
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2344
> box {
2345
transition: background-color $duration $ease-out;
2346
margin: -$container-padding -12px;
2347
padding: $container-padding 12px;
2348
&:drop(active) {
2350
background-color: overlay("hover", $on-surface);
2351
}
2352
}
2353
// colors the button like the label, overridden otherwise
2355
button.flat {
2356
@extend %button-small;
2357
&:last-child {
2359
margin-left: $container-padding;
2360
margin-right: $container-padding - 12px;
2361
}
2362
&:first-child {
2364
margin-left: $container-padding - 12px;
2365
margin-right: $container-padding;
2366
}
2367
}
2368
}
2369
&.top,
2371
&.bottom {
2372
tabs {
2373
padding-left: 8px;
2374
padding-right: 8px;
2375
&:not(:only-child) {
2377
&:first-child {
2378
margin-left: 0;
2379
}
2380
&:last-child {
2382
margin-right: 0;
2383
}
2384
}
2385
tab.reorderable-page {
2387
border-style: none solid;
2388
}
2389
}
2390
}
2391
&.left,
2393
&.right {
2394
tabs {
2395
padding-top: 8px;
2396
padding-bottom: 8px;
2397
&:not(:only-child) {
2399
&:first-child {
2400
margin-top: 0;
2401
}
2402
&:last-child {
2404
margin-bottom: 0;
2405
}
2406
}
2407
tab.reorderable-page {
2409
border-style: solid none;
2410
}
2411
}
2412
}
2413
}
2414
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2416
background-color: $base;
2417
}
2418
}
2419
/**
2421
* Scrollbars
2422
*/
2423
scrollbar {
2425
$_slider_min_length: 24px;
2426
// disable steppers
2428
@at-root * {
2429
-GtkScrollbar-has-backward-stepper: false;
2430
-GtkScrollbar-has-forward-stepper: false;
2431
}
2432
transition: $transition;
2434
background-color: $base;
2435
// scrollbar border
2437
&.top { border-bottom: 1px solid divider($on-surface); }
2438
&.bottom { border-top: 1px solid divider($on-surface); }
2439
&.left { border-right: 1px solid divider($on-surface); }
2440
&.right { border-left: 1px solid divider($on-surface); }
2441
// slider
2443
slider {
2444
transition: background-color $duration $ease-out;
2445
min-width: 8px;
2446
min-height: 8px;
2447
border: 4px solid transparent;
2448
border-radius: $circular-radius;
2449
background-clip: padding-box;
2450
background-color: disabled($on-surface);
2451
&:hover {
2453
background-color: hint($on-surface);
2454
}
2455
&:active {
2457
background-color: $on-surface;
2458
}
2459
&:disabled {
2461
background-color: disabled-hint($on-surface);
2462
}
2463
}
2464
&.fine-tune {
2466
slider {
2467
min-width: 4px;
2468
min-height: 4px;
2469
}
2470
&.horizontal slider {
2472
margin: 2px 0;
2473
}
2474
&.vertical slider {
2476
margin: 0 2px;
2477
}
2478
}
2479
&.overlay-indicator {
2481
&:not(.fine-tune) slider {
2482
transition-property: background-color, min-height, min-width;
2483
}
2484
&:not(.dragging):not(.hovering) {
2486
border-color: transparent;
2487
background-color: transparent;
2488
slider {
2490
min-width: 4px;
2491
min-height: 4px;
2492
margin: 4px - 1px;
2493
border: 1px solid rgba($base, .3);
2494
}
2495
button {
2497
min-width: 4px;
2498
min-height: 4px;
2499
margin: 4px - 1px;
2500
border: 1px solid rgba($base, .3);
2501
border-radius: $circular-radius;
2502
background-color: disabled($on-surface);
2503
background-clip: padding-box;
2504
-gtk-icon-source: none;
2505
&:disabled {
2507
background-color: disabled-hint($on-surface);
2508
}
2509
}
2510
&.horizontal {
2512
slider {
2513
min-width: $_slider_min_length;
2514
}
2515
button {
2517
min-width: 8px;
2518
}
2519
}
2520
&.vertical {
2522
slider {
2523
min-height: $_slider_min_length;
2524
}
2525
button {
2527
min-height: 8px;
2528
}
2529
}
2530
}
2531
&.dragging,
2533
&.hovering {
2534
background-color: rgba($surface, .9);
2535
}
2536
}
2537
&.horizontal slider {
2539
min-width: $_slider_min_length;
2540
}
2541
&.vertical slider {
2543
min-height: $_slider_min_length;
2544
}
2545
// button styling
2547
button {
2548
@extend %button-flat-basic;
2549
min-width: 16px;
2551
min-height: 16px;
2552
padding: 0;
2553
border-radius: 0;
2554
}
2555
// button icons
2557
&.vertical {
2558
button {
2559
&.down {
2560
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2561
}
2562
&.up {
2564
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2565
}
2566
}
2567
}
2568
&.horizontal {
2570
button {
2571
&.down {
2572
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2573
}
2574
&.up {
2576
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2577
}
2578
}
2579
}
2580
}
2581
/**
2584
* Switch
2585
*/
2586
switch {
2588
transition: all $duration $ease-out;
2589
margin: $container-padding 0;
2590
padding: 0 2px;
2591
border: 5px solid transparent;
2592
border-radius: $circular-radius;
2593
background-color: stroke($on-surface);
2594
background-clip: padding-box;
2595
font-size: 0;
2596
&:checked {
2598
background-color: rgba($primary, .5);
2599
}
2600
&:disabled {
2602
opacity: .5;
2603
}
2604
// hide on/off icons for >=3.24.5
2606
image {
2607
margin: -8px;
2608
-gtk-icon-transform: scale(0);
2609
}
2610
slider {
2612
transition: all $duration $ease-out;
2613
min-width: 20px;
2614
min-height: 20px;
2615
margin: -3px -2px;
2616
border-radius: $circular-radius;
2617
outline: none;
2618
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2619
background-color: $switch-surface;
2620
}
2621
&:hover slider {
2623
box-shadow: 0 0 0 10px overlay("hover", $on-surface), $shadow-z1;
2624
}
2625
&:focus slider {
2627
box-shadow: 0 0 0 10px overlay("focus", $on-surface), $shadow-z1;
2628
}
2629
&:checked slider {
2631
background-color: $primary;
2632
}
2633
&:checked:hover slider {
2635
box-shadow: 0 0 0 10px overlay("hover", $primary), $shadow-z1;
2636
}
2637
&:checked:focus slider {
2639
box-shadow: 0 0 0 10px overlay("focus", $primary), $shadow-z1;
2640
}
2641
row:selected & {
2643
}
2644
}
2645
/**
2647
* Check and Radio items
2648
*/
2649
// draw regular check and radio items using our PNG assets
2651
// all assets are rendered from assets.svg. never add pngs directly
2652
// selection-mode
2654
.view.content-view.check:not(list),
2655
.content-view:not(list) check {
2656
min-height: 40px;
2657
min-width: 40px;
2658
margin: 0;
2659
padding: 0;
2660
box-shadow: none;
2661
background-color: transparent;
2662
background-image: none;
2663
-gtk-icon-shadow: $icon-shadow-z2;
2664
&:hover,
2666
&:active {
2667
-gtk-icon-shadow: $icon-shadow-z4;
2668
}
2669
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2671
&#{$class} {
2672
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2673
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2675
}
2676
}
2677
}
2678
checkbutton,
2680
radiobutton {
2681
outline: none;
2682
}
2683
checkbutton.text-button,
2685
radiobutton.text-button {
2686
// this is for a nice focus on check and radios text
2687
padding: 2px;
2688
label:not(:only-child) {
2690
margin: 0 4px;
2691
}
2692
}
2693
$check-radio-size: 40px;
2695
check,
2697
radio {
2698
min-height: 24px;
2699
min-width: 24px;
2700
margin: -($check-radio-size - 24px) / 2;
2701
padding: ($check-radio-size - 24px) / 2;
2702
border-radius: $circular-radius;
2703
color: hint($on-surface);
2704
@extend %ripple;
2705
@include ink-color($on-surface);
2706
&:checked,
2708
&:indeterminate {
2709
color: $primary;
2710
@include ink-color($primary);
2711
}
2712
&:disabled {
2714
color: disabled-hint($on-surface);
2715
}
2716
&:only-child {
2718
// margin: -12px;
2719
}
2720
popover modelbutton.flat & {
2722
&,
2723
&:focus,
2724
&:hover,
2725
&:focus:hover,
2726
&:active,
2727
&:disabled {
2728
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2729
box-shadow: none;
2730
background-image: none;
2731
}
2732
&.left:dir(rtl) {
2734
margin-left: -12px;
2735
margin-right: -4px;
2736
}
2737
&.right:dir(ltr) {
2739
margin-left: -4px;
2740
margin-right: -12px;
2741
}
2742
}
2743
menu menuitem & {
2745
transition: none;
2746
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2747
padding: 0;
2748
&:dir(ltr) {
2750
margin-right: 8px;
2751
}
2752
&:dir(rtl) {
2754
margin-left: 8px;
2755
}
2756
&,
2758
&:hover,
2759
&:disabled {
2760
box-shadow: none;
2761
}
2762
}
2763
}
2764
%check,
2766
check {
2767
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2768
&:checked {
2770
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2771
}
2772
&:indeterminate {
2774
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2775
}
2776
}
2777
%radio,
2779
radio {
2780
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2781
&:checked {
2783
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2784
}
2785
&:indeterminate {
2787
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2788
}
2789
border-image-slice: $check-radio-size / 2px;
2791
border-image-width: $check-radio-size / 2;
2792
$radio-indicator-size: 10px / $check-radio-size / 2;
2794
border-image-source:
2796
-gtk-gradient(
2797
radial,
2798
center center, 0,
2799
center center, .001,
2800
to($primary),
2801
to(transparent)
2802
);
2803
&:checked:not(:indeterminate) {
2805
border-image-source:
2806
-gtk-gradient(
2807
radial,
2808
center center, 0,
2809
center center, $radio-indicator-size,
2810
to($primary),
2811
to(transparent)
2812
);
2813
&:disabled {
2815
border-image-source:
2816
-gtk-gradient(
2817
radial,
2818
center center, 0,
2819
center center, $radio-indicator-size,
2820
to(disabled-hint($on-surface)),
2821
to(transparent)
2822
);
2823
}
2824
}
2825
}
2826
%small_check,
2828
menu menuitem check {
2829
min-height: 16px;
2830
min-width: 16px;
2831
border-radius: $corner-radius;
2832
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2833
&:checked {
2835
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2836
}
2837
&:indeterminate {
2839
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2840
}
2841
}
2842
%small_radio,
2844
menu menuitem radio {
2845
min-height: 16px;
2846
min-width: 16px;
2847
border-image: none;
2848
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2849
&:checked {
2851
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2852
}
2853
&:indeterminate {
2855
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2856
}
2857
}
2858
// ANIMATION:
2860
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2861
// the transformation is set on the active state and it get reset on the checked state.
2862
radio:not(:checked):active {
2863
// -gtk-icon-transform: scale(0);
2864
}
2865
// Otherwise, treeview.view styling will be applied...
2867
treeview.view check,
2868
treeview.view radio {
2869
padding: 0;
2870
color: hint($on-surface);
2871
&:checked,
2873
&:indeterminate {
2874
color: $primary;
2875
}
2876
&:disabled {
2878
color: disabled-hint($on-surface);
2879
}
2880
&,
2882
&:hover,
2883
&:selected,
2884
&:selected:hover {
2885
box-shadow: none;
2886
background-color: transparent;
2887
}
2888
}
2889
treeview.view radio:checked {
2891
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2892
border-image: none;
2893
}
2894
/**
2896
* GtkScale
2897
*/
2898
scale {
2900
// sizing
2901
$_marks_length: 8px;
2902
$_marks_distance: 7px;
2903
$trough_size: 2px;
2905
$finetune_trough_size: 4px;
2906
$slider_size: 32px;
2908
$slider_margin: -($slider_size - $trough_size) / 2;
2910
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2911
$color_slider_margin: -($slider_size) * 3 / 4;
2913
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2914
min-height: $trough_size;
2916
min-width: $trough_size;
2917
&.horizontal {
2919
padding: ($medium-size - $trough_size) / 2 12px;
2920
}
2921
&.vertical {
2923
padding: 12px ($medium-size - $trough_size) / 2;
2924
}
2925
// the slider is inside the trough, so to have make it bigger there's a negative margin
2927
slider {
2928
min-height: $slider_size;
2929
min-width: $slider_size;
2930
margin: $slider_margin;
2931
}
2932
// click-and-hold the slider to activate
2934
&.fine-tune {
2935
&.horizontal {
2936
min-height: $finetune_trough_size;
2937
padding-top: ($medium-size - $finetune_trough_size) / 2;
2938
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2939
}
2940
&.vertical {
2942
min-width: $finetune_trough_size;
2943
padding-left: ($medium-size - $finetune_trough_size) / 2;
2944
padding-right: ($medium-size - $finetune_trough_size) / 2;
2945
}
2946
// to make the trough grow in fine-tune mode
2948
slider {
2949
margin: $finetune_slider_margin;
2950
}
2951
}
2952
// the backing bit
2954
trough {
2955
transition: background-color $duration $ease-out;
2956
outline: none;
2957
background-color: stroke($on-surface);
2958
&:disabled {
2960
background-color: disabled-stroke($on-surface);
2961
}
2962
}
2963
// the colored part of the backing bit
2965
highlight {
2966
transition: background-image $duration $ease-out;
2967
background-image: image($primary);
2968
&:disabled {
2970
background-color: $background;
2971
background-image: image(disabled-hint($on-surface));
2972
}
2973
}
2974
// this is another differently styled part of the backing bit, the most relevant use case is for example
2976
// in media player to indicate how much video stream as been cached
2977
fill {
2978
transition: background-color $duration $ease-out;
2979
background-color: stroke($on-surface);
2980
&:disabled {
2982
background-color: transparent;
2983
}
2984
}
2985
slider {
2987
transition: background-color $duration $ease-out,
2988
background-size $ripple-fade-out-duration $ease-out,
2989
background-image $ripple-fade-out-opacity-duration $ease-out;
2990
background-repeat: no-repeat;
2991
background-position: center;
2992
background-size: auto, 1000% 1000%;
2993
border-radius: 50%;
2994
color: $primary;
2995
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2997
&#{$class} {
2998
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2999
background-image:
3001
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
3002
radial-gradient(circle, transparent 10%, transparent 0%);
3003
}
3004
}
3005
&:hover {
3007
background-color: overlay("hover", $primary);
3008
}
3009
&:focus {
3011
background-color: overlay("focus", $primary);
3012
}
3013
&:active {
3015
$_url: 'assets/scale-slider#{$asset-suffix}';
3016
transition: background-color $duration $ease-out,
3018
background-size 0ms,
3019
background-image 0ms;
3020
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
3021
background-image:
3022
-gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
3023
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3024
background-size: auto, 0% 0%;
3025
}
3026
}
3027
marks,
3029
value {
3030
color: hint($on-surface);
3031
}
3032
indicator {
3034
background-color: stroke($on-surface);
3035
color: transparent;
3036
}
3037
//marks margins
3039
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
3040
(horizontal, bottom, bottom, top),
3041
(vertical, top, left, right),
3042
(vertical, bottom, right, left) {
3043
&.#{$scale_orient} marks {
3044
&.#{$marks_class} {
3045
margin-#{$marks_margin}: $_marks_distance;
3046
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
3047
}
3048
}
3049
&.#{$scale_orient}.fine-tune marks {
3051
&.#{$marks_class} {
3052
margin-#{$marks_margin}: $_marks_distance - 1px;
3053
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
3054
}
3055
}
3056
}
3057
&.horizontal {
3059
indicator {
3060
min-height: $_marks_length;
3061
min-width: 1px;
3062
}
3063
}
3064
&.vertical {
3066
indicator {
3067
min-height: 1px;
3068
min-width: $_marks_length;
3069
}
3070
}
3071
// *WARNING* scale with marks madness following
3073
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
3075
@each $marks_class, $marks_infix in (
3076
".marks-before:not(.marks-after)": "-marks-before",
3077
".marks-after:not(.marks-before)": "-marks-after"
3078
) {
3079
&#{$dir_class}#{$marks_class} {
3080
slider {
3081
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
3082
&#{$state_class} {
3083
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
3084
background-image:
3086
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3087
radial-gradient(circle, transparent 10%, transparent 0%);
3088
}
3089
}
3090
&:active {
3092
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
3093
background-image:
3095
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
3096
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 0%);
3097
}
3098
}
3099
}
3100
}
3101
}
3102
&.color {
3104
min-height: 0;
3105
min-width: 0;
3106
&.horizontal {
3108
padding: 0 0 12px 0;
3109
slider {
3111
&:dir(ltr), &:dir(rtl) { // specificity bump
3112
margin-bottom: $color_slider_margin;
3113
margin-top: $color_marks_slider_margin;
3114
}
3115
}
3116
}
3117
&.vertical {
3119
&:dir(ltr) {
3120
padding: 0 0 0 12px;
3121
slider {
3123
margin-left: $color_slider_margin;
3124
margin-right: $color_marks_slider_margin;
3125
}
3126
}
3127
&:dir(rtl) {
3129
padding: 0 12px 0 0;
3130
slider {
3132
margin-right: $color_slider_margin;
3133
margin-left: $color_marks_slider_margin;
3134
}
3135
}
3136
}
3137
}
3138
}
3139
/**
3141
* Progress bars
3142
*/
3143
progressbar {
3145
// sizing
3146
&.horizontal {
3147
trough,
3148
progress {
3149
min-height: $bar-size;
3150
}
3151
}
3152
&.vertical {
3154
trough,
3155
progress {
3156
min-width: $bar-size;
3157
}
3158
}
3159
// FIXME: insensitive state missing and some other state should be set probably
3161
color: hint($on-surface);
3162
font-size: smaller;
3163
trough {
3165
background-color: disabled-stroke($on-surface);
3166
}
3167
progress {
3169
background-color: $primary;
3170
}
3171
&.osd { // progressbar.osd used for epiphany page loading progress
3173
// min-width: $bar-size;
3174
// min-height: $bar-size;
3175
// background-color: transparent;
3176
trough {
3178
// background-color: transparent;
3179
}
3180
progress {
3182
// background-color: $primary;
3183
}
3184
}
3185
// makes the progress indicator disappear, when the fraction is 0
3187
trough.empty progress {
3188
all: unset;
3189
}
3190
}
3191
/**
3193
* Level Bar
3194
*/
3195
levelbar {
3197
&.horizontal {
3198
block {
3199
min-height: $bar-size;
3200
}
3201
&.discrete block {
3203
min-width: $medium-size;
3204
&:not(:last-child) {
3206
margin-right: 2px;
3207
}
3208
}
3209
}
3210
&.vertical {
3212
block {
3213
min-width: $bar-size;
3214
}
3215
&.discrete block {
3217
min-height: $medium-size;
3218
&:not(:last-child) {
3220
margin-bottom: 2px;
3221
}
3222
}
3223
}
3224
trough {
3226
}
3227
block {
3229
&.low {
3230
background-color: $warning;
3231
}
3232
&.high,
3234
&:not(.empty) {
3235
background-color: $primary;
3236
}
3237
&.full {
3239
background-color: $success;
3240
}
3241
&.empty {
3243
background-color: disabled-stroke($on-surface);
3244
}
3245
}
3246
}
3247
/**
3249
* Print dialog
3250
*/
3251
printdialog {
3253
paper {
3254
padding: 0;
3255
border: 1px solid divider($on-surface);
3256
background-color: $base;
3257
color: $on-surface;
3258
}
3259
.dialog-action-box {
3261
margin: 12px;
3262
}
3263
}
3264
/**
3266
* Frames
3267
*/
3268
frame > border,
3270
.frame {
3271
margin: 0;
3272
padding: 0;
3273
border: 1px solid divider($on-surface);
3274
border-radius: 0;
3275
box-shadow: none;
3276
&.flat {
3278
border-style: none;
3279
}
3280
}
3281
// for backward compatibility
3283
frame.flat > border {
3284
border-style: none;
3285
}
3286
actionbar > revealer > box {
3288
padding: $container-padding;
3289
border-top: 1px solid divider($on-surface);
3290
background-color: $base;
3291
background-clip: border-box;
3292
button:not(.suggested-action):not(.destructive-action) {
3294
@extend %button-flat;
3295
}
3296
.linked:not(.vertical) > entry:not(:only-child) {
3298
border-radius: $corner-radius $corner-radius 0 0;
3299
}
3300
}
3301
scrolledwindow {
3303
viewport.frame { // avoid double borders when viewport inside scrolled window
3304
border-style: none;
3305
}
3306
// This is used when content is touch-dragged past boundaries.
3308
// draws a box on top of the content, the size changes programmatically.
3309
@at-root overshoot {
3310
&.top { @include overshoot(top); }
3311
&.bottom { @include overshoot(bottom); }
3313
&.left { @include overshoot(left); }
3315
&.right { @include overshoot(right); }
3317
}
3318
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3320
@at-root undershoot {
3321
&.top { @include undershoot(top); }
3322
&.bottom { @include undershoot(bottom); }
3324
&.left { @include undershoot(left); }
3326
&.right { @include undershoot(right); }
3328
}
3329
@at-root junction { // the small square between two scrollbars
3331
border-style: solid none none solid;
3332
border-width: 1px;
3333
border-color: divider($on-surface);
3334
background-color: $base;
3335
&:dir(rtl) {
3337
border-style: solid solid none none;
3338
}
3339
}
3340
}
3341
// vbox and hbox separators
3343
separator {
3344
min-width: 1px;
3345
min-height: 1px;
3346
background-color: divider($on-surface);
3347
}
3348
%hide_separators {
3350
min-width: 0;
3351
min-height: 0;
3352
background-color: transparent;
3353
}
3354
/**
3356
* Lists
3357
*/
3358
list {
3360
border-color: divider($on-surface);
3361
background-color: $base;
3362
row {
3364
padding: 2px;
3365
}
3366
}
3367
row {
3369
&.activatable {
3370
@extend %ripple;
3371
@include ink-color($on-surface);
3372
@include list-item;
3373
// this is for indicathing which row generated a popover
3375
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3376
&.has-open-popup {
3377
background-color: overlay("activated", $on-surface);
3378
}
3379
}
3380
&:selected {
3382
background-color: $overlay-selected;
3383
@include ink-color($primary);
3385
&.has-open-popup {
3387
background-color: overlay("activated", $primary, $background: $overlay-selected);
3388
}
3389
}
3390
}
3391
/**
3393
* App Notifications
3394
*/
3395
.app-notification {
3397
// @extend %osd;
3398
@extend %toolbar-osd;
3400
margin: 8px;
3402
button {
3404
@extend %button-flat;
3405
&.text-button:not(:disabled) {
3407
color: $primary;
3408
@include ink-color($primary);
3409
}
3410
}
3411
&.frame,
3413
border {
3414
border-style: none;
3415
}
3416
}
3417
/**
3419
* Expanders
3420
*/
3421
expander {
3423
title > arrow {
3424
transition: all $duration $ease-out;
3425
min-width: 16px;
3426
min-height: 16px;
3427
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3428
-gtk-icon-transform: rotate(-90deg);
3429
&:dir(rtl) {
3431
-gtk-icon-transform: rotate(90deg);
3432
}
3433
&:checked {
3435
-gtk-icon-transform: unset;
3436
}
3437
color: hint($on-surface);
3439
&:hover,
3441
&:active {
3442
color: $on-surface;
3443
}
3444
&:disabled {
3446
color: disabled-hint($on-surface);
3447
}
3448
}
3449
}
3450
/**
3452
* Calendar
3453
*/
3454
calendar {
3456
padding: 1px;
3457
border: 1px solid divider($on-surface);
3458
color: $on-surface;
3459
&:disabled {
3461
color: disabled($on-surface);
3462
}
3463
&:selected {
3465
border-radius: $corner-radius + 1px;
3466
background-color: $overlay-selected;
3467
}
3468
&.header {
3470
border-style: none none solid;
3471
border-color: divider($on-surface);
3472
border-radius: 0;
3473
}
3474
&.button {
3476
border-radius: $corner-radius + 1px;
3477
color: hint($on-surface);
3478
&:hover {
3480
background-image: image(overlay("hover", $on-surface));
3481
}
3482
&:disabled {
3484
color: disabled-hint($on-surface);
3485
}
3486
}
3487
&.highlight {
3489
color: hint($on-surface);
3490
font-weight: 500;
3491
}
3492
&:indeterminate {
3494
color: disabled-hint($on-surface);
3495
}
3496
}
3497
/**
3499
* Dialogs
3500
*/
3501
// Message Dialog styling
3503
messagedialog {
3504
&.background {
3505
background-color: $surface;
3506
}
3507
.titlebar {
3509
min-height: $small-size;
3510
border-style: none;
3511
box-shadow: inset 0 1px highlight($surface);
3512
background-color: $surface;
3513
color: $on-surface;
3514
&:backdrop {
3516
background-color: $surface;
3517
color: hint($on-surface);
3518
}
3519
}
3520
&.csd { // rounded bottom border styling for csd version
3522
&.background {
3523
// bigger radius for better antialiasing
3524
border-bottom-left-radius: $corner-radius;
3525
border-bottom-right-radius: $corner-radius;
3526
}
3527
}
3528
// Hint text
3530
box.vertical > label + label {
3531
color: hint($on-surface);
3532
}
3533
.dialog-action-box {
3535
margin-top: -$container-padding;
3536
// padding: $container-padding;
3537
button {
3539
@extend %button-flat;
3540
&:not(:last-child) {
3542
margin-right: $container-padding;
3543
}
3544
&:not(:disabled) {
3546
color: $primary;
3547
@include ink-color($primary);
3548
}
3549
&.suggested-action:not(:disabled) {
3551
background-color: transparent;
3552
// color: $primary;
3553
// @include ink-color($primary);
3554
}
3555
&.destructive-action:not(:disabled) {
3557
background-color: transparent;
3558
color: $error;
3559
@include ink-color($error);
3560
}
3561
}
3562
}
3563
}
3564
filechooser {
3566
.dialog-action-box {
3567
border-top: 1px solid divider($on-surface);
3568
}
3569
#pathbarbox {
3571
border-bottom: 1px solid divider($on-surface);
3572
background-color: $background;
3573
// The new folder button
3575
> stack > box > button {
3576
@extend %button-flat;
3577
border-radius: $circular-radius;
3579
}
3580
}
3581
}
3582
filechooserbutton:drop(active) {
3584
// box-shadow: none;
3585
}
3586
/**
3588
* Sidebar
3589
*/
3590
.sidebar {
3592
border-style: none;
3593
background-color: $base-alt;
3594
&:not(separator) {
3596
@at-root %sidebar_left,
3597
&:dir(ltr),
3598
&.left,
3599
&.left:dir(rtl) {
3600
border-right: 1px solid divider($on-surface);
3601
border-left-style: none;
3602
}
3603
@at-root %sidebar_right,
3605
&:dir(rtl),
3606
&.right {
3607
border-left: 1px solid divider($on-surface);
3608
border-right-style: none;
3609
}
3610
}
3611
list {
3613
background-color: transparent;
3614
}
3615
paned & {
3617
&,
3618
&.left,
3619
&.right,
3620
&.left:dir(rtl),
3621
&:dir(rtl),
3622
&:dir(ltr) {
3623
border-style: none;
3624
}
3625
}
3626
}
3627
stacksidebar.sidebar {
3629
& {
3630
&:dir(ltr),
3631
&.left,
3632
&.left:dir(rtl) {
3633
list {
3634
@extend %sidebar_left;
3635
}
3636
}
3637
&:dir(rtl),
3639
&.right {
3640
list {
3641
@extend %sidebar_right;
3642
}
3643
}
3644
}
3645
+ separator.vertical,
3647
separator.horizontal {
3648
@extend %hide_separators;
3649
}
3650
list {
3652
padding: 4px;
3653
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3654
}
3655
row {
3657
min-height: 32px;
3658
padding: 0 8px - 6px;
3659
border-radius: $corner-radius;
3660
&:selected {
3662
background-color: overlay("activated", $primary);
3663
color: $primary;
3664
font-weight: 500;
3665
@include ink-color($primary);
3666
}
3667
+ row {
3669
margin-top: 4px;
3670
}
3671
> label {
3673
padding-left: 6px;
3674
padding-right: 6px;
3675
}
3676
&.needs-attention > label {
3678
@extend %needs-attention;
3679
}
3680
}
3681
}
3682
separator.sidebar {
3684
background-color: divider($on-surface);
3685
&.selection-mode,
3687
.selection-mode & {
3688
// background-color: divider($on-primary);
3689
}
3690
}
3691
/**
3693
* File chooser
3694
*/
3695
// dim the sidebar icons, see bug #786613 for details on this oddity
3697
row image.sidebar-icon {
3698
transition: color $duration $ease-out;
3699
color: hint($on-surface);
3700
&:disabled {
3702
color: disabled-hint($on-surface);
3703
}
3704
}
3705
placessidebar.sidebar {
3707
> viewport.frame {
3708
border-style: none;
3709
}
3710
list {
3712
padding: (4px - 3px) 0 4px;
3713
}
3714
row {
3716
// Needs overriding of the GtkListBoxRow padding
3717
min-height: 32px;
3718
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3719
padding: 0;
3720
border-radius: $corner-radius;
3721
// Using margins/padding directly in the SidebarRow
3723
// will make the animation of the new bookmark row jump
3724
> revealer {
3725
padding: 0 8px;
3726
}
3727
&:selected {
3729
background-color: overlay("activated", $primary);
3730
color: $primary;
3731
font-weight: 500;
3732
@include ink-color($primary);
3733
image.sidebar-icon {
3735
color: $primary;
3736
}
3737
}
3738
&:disabled {
3740
color: disabled($on-surface);
3741
}
3742
image.sidebar-icon {
3744
&:dir(ltr) {
3745
padding-right: 8px;
3746
}
3747
&:dir(rtl) {
3749
padding-left: 8px;
3750
}
3751
}
3752
label.sidebar-label {
3754
&:dir(ltr) {
3755
padding-right: 2px;
3756
}
3757
&:dir(rtl) {
3759
padding-left: 2px;
3760
}
3761
}
3762
@at-root button.sidebar-button {
3764
@extend %button-flat-basic;
3765
@extend %button-small;
3766
}
3767
&.sidebar-placeholder-row {
3769
background-color: overlay("hover", $on-surface);
3770
}
3771
&.sidebar-new-bookmark-row {
3773
color: $primary;
3774
image.sidebar-icon {
3776
color: $primary;
3777
}
3778
}
3779
}
3780
}
3781
placesview {
3783
.server-list-button {
3784
> image {
3785
-gtk-icon-transform: rotate(0turn);
3786
}
3787
&:checked > image {
3789
-gtk-icon-transform: rotate(-.5turn);
3790
}
3791
}
3792
// this selects the "connect to server" label
3794
> actionbar > revealer > box > label {
3795
padding-left: 8px;
3796
padding-right: 8px;
3797
}
3798
}
3799
/**
3801
* Paned
3802
*/
3803
paned {
3805
> separator {
3806
min-width: 1px;
3807
min-height: 1px;
3808
-gtk-icon-source: none; // defeats the ugly default handle decoration
3809
border-style: none; // just to be sure
3810
background-color: transparent;
3811
// workaround, using background istead of a border since the border will get rendered twice (?)
3812
background-image: image(divider($on-surface));
3813
background-size: 1px 1px;
3814
background-clip: content-box; // avoids borders image being rendered twice (?)
3815
&.wide {
3817
min-width: 6px;
3818
min-height: 6px;
3819
background-color: $background;
3820
background-image: image(divider($on-surface)), image(divider($on-surface));
3821
background-size: 1px 1px, 1px 1px;
3822
}
3823
}
3824
&.horizontal > separator {
3826
background-repeat: repeat-y;
3827
&:dir(ltr) {
3829
margin: 0 -8px 0 0;
3830
padding: 0 8px 0 0;
3831
background-position: left;
3832
}
3833
&:dir(rtl) {
3835
margin: 0 0 0 -8px;
3836
padding: 0 0 0 8px;
3837
background-position: right;
3838
}
3839
&.wide {
3841
margin: 0;
3842
padding: 0;
3843
background-repeat: repeat-y, repeat-y;
3844
background-position: left, right;
3845
}
3846
}
3847
&.vertical > separator {
3849
margin: 0 0 -8px 0;
3850
padding: 0 0 8px 0;
3851
background-repeat: repeat-x;
3852
background-position: top;
3853
&.wide {
3855
margin: 0;
3856
padding: 0;
3857
background-repeat: repeat-x, repeat-x;
3858
background-position: bottom, top;
3859
}
3860
}
3861
}
3862
/**
3864
* GtkInfoBar
3865
*/
3866
infobar {
3868
border-style: none;
3869
&.action:hover > revealer > box {
3871
background-image: image(overlay("hover", $on-surface));
3872
}
3873
&.info > revealer > box,
3875
&.question > revealer > box {
3876
border-bottom: 1px solid divider($on-surface);
3877
background-color: $base;
3878
button {
3880
@extend %button-flat;
3881
&.text-button:not(:disabled) {
3883
color: $primary;
3884
@include ink-color($primary);
3885
}
3886
}
3887
}
3888
&.warning > revealer > box {
3890
background-color: $warning;
3891
color: $on-warning;
3892
button.flat {
3894
color: $on-warning;
3895
@include ink-color($on-warning);
3896
}
3897
selection {
3899
}
3900
*:link {
3902
color: $on-warning;
3903
}
3904
}
3905
&.error > revealer > box {
3907
background-color: $error;
3908
color: $on-error;
3909
button.flat {
3911
color: $on-error;
3912
@include ink-color($on-error);
3913
}
3914
selection {
3916
}
3917
*:link {
3919
color: $on-error;
3920
}
3921
}
3922
// Remove ugly hard-coded padding
3924
button label {
3925
margin: 0 -4px;
3926
}
3927
}
3928
/**
3930
* Tooltips
3931
*/
3932
tooltip {
3934
&.background {
3935
// background-color needs to be set this way otherwise it gets drawn twice
3936
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3937
background-color: $tooltip;
3938
color: $on-tooltip;
3939
}
3940
// padding: 4px; /* not working */
3942
border-radius: $corner-radius;
3943
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3944
&:not(.csd):not(.unity-csd) {
3946
// border: 1px solid divider($on-surface);
3947
// border-radius: $corner-radius + 1px;
3948
// background-clip: $background-clip-extra;
3949
}
3950
// FIXME: we need a border or tooltips vanish on black background.
3952
decoration {
3953
background-color: transparent;
3954
}
3955
> box {
3957
margin: -6px; // Remove hard-coded 6px margin
3958
min-height: 32px - 4px * 2;
3959
padding: 4px 8px;
3960
}
3961
.dim-label {
3963
color: hint($on-tooltip);
3964
}
3965
* {
3967
// workaround for Eclipse.
3968
// do not include any declaration here.
3969
}
3970
}
3971
/**
3973
* Color Chooser
3974
*/
3975
colorswatch {
3977
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3978
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3979
// applied to the overlay box.
3980
// base color corners rounding
3982
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3983
// sports a bigger radius.
3984
// nth-child is needed by the custom color strip.
3985
&.top {
3987
border-top-left-radius: $corner-radius + .5px;
3988
border-top-right-radius: $corner-radius + .5px;
3989
overlay {
3991
border-top-left-radius: $corner-radius;
3992
border-top-right-radius: $corner-radius;
3993
}
3994
}
3995
&.bottom {
3997
border-bottom-left-radius: $corner-radius + .5px;
3998
border-bottom-right-radius: $corner-radius + .5px;
3999
overlay {
4001
border-bottom-left-radius: $corner-radius;
4002
border-bottom-right-radius: $corner-radius;
4003
}
4004
}
4005
&.left,
4007
&:first-child:not(.top) {
4008
border-top-left-radius: $corner-radius + .5px;
4009
border-bottom-left-radius: $corner-radius + .5px;
4010
overlay {
4012
border-top-left-radius: $corner-radius;
4013
border-bottom-left-radius: $corner-radius;
4014
}
4015
}
4016
&.right,
4018
&:last-child:not(.bottom) {
4019
border-top-right-radius: $corner-radius + .5px;
4020
border-bottom-right-radius: $corner-radius + .5px;
4021
overlay {
4023
border-top-right-radius: $corner-radius;
4024
border-bottom-right-radius: $corner-radius;
4025
}
4026
}
4027
&.dark {
4029
color: $on-dark;
4030
}
4031
&.light {
4033
color: $on-light;
4034
}
4035
overlay {
4037
transition: $transition-shadow;
4038
box-shadow: $shadow-z1;
4039
&:drop(active),
4041
&:hover {
4042
box-shadow: $shadow-z3;
4043
}
4044
}
4045
&#add-color-button {
4047
border-radius: $corner-radius $corner-radius 0 0;
4048
color: $on-surface;
4049
&:only-child {
4051
border-radius: $corner-radius;
4052
}
4053
overlay {
4055
background-color: $surface;
4056
}
4057
}
4058
&:disabled {
4060
opacity: .5;
4061
overlay {
4063
box-shadow: none;
4064
}
4065
}
4066
row:selected & {
4068
}
4069
&#editor-color-sample {
4071
border-radius: $corner-radius + .5px;
4072
overlay {
4074
border-radius: $corner-radius;
4075
&:hover {
4077
// box-shadow: $shadow-z1;
4078
}
4079
}
4080
}
4081
}
4082
// colorscale popup
4084
colorchooser .popover.osd {
4085
transition: $transition-shadow;
4086
border-radius: $corner-radius;
4087
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
4088
background-color: $surface;
4089
&:backdrop {
4091
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
4092
}
4093
}
4094
/**
4096
* Misc
4097
*/
4098
// content view (grid/list)
4100
.content-view {
4101
background-color: $background;
4102
&:hover {
4104
// -gtk-icon-effect: highlight;
4105
}
4106
rubberband,
4108
.rubberband {
4109
@extend %rubberband;
4110
}
4111
}
4112
.scale-popup {
4114
.osd & {
4115
// @extend %osd;
4116
// FIXME: quick hack, redo properly
4118
button.flat {
4119
}
4120
}
4121
// +/- buttons on GtkVolumeButton popup
4123
button {
4124
}
4125
}
4126
/**
4128
* Window Decorations
4129
*/
4130
decoration {
4132
transition: $transition-shadow;
4133
border-radius: $corner-radius $corner-radius 0 0;
4134
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4135
// FIXME rationalize shadows
4137
// this is used for the resize cursor area
4139
margin: 8px;
4140
&:backdrop {
4142
// the transparent shadow here is to enforce that the shadow extents don't
4143
// change when we go to backdrop, to prevent jumping windows.
4144
// The biggest shadow should be in the same order then in the active state
4145
// or the jumping will happen during the transition.
4146
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4147
}
4148
.maximized &,
4150
.fullscreen &,
4151
.tiled &,
4152
.tiled-top &,
4153
.tiled-right &,
4154
.tiled-bottom &,
4155
.tiled-left & {
4156
border-radius: 0;
4157
}
4158
.popup & {
4160
box-shadow: none;
4161
}
4162
// server-side decorations as used by mutter
4164
.ssd & {
4165
box-shadow: 0 3px 3px rgba(black, .16); // just doing borders, wm draws actual shadows
4166
}
4167
.csd.popup & {
4169
border-radius: $corner-radius;
4170
box-shadow: $shadow-z4;
4171
}
4172
tooltip.csd & {
4174
border-radius: $corner-radius;
4175
box-shadow: none;
4176
}
4177
messagedialog.csd & {
4179
border-radius: $corner-radius;
4180
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4181
&:backdrop {
4183
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4184
}
4185
}
4186
.solid-csd & {
4188
margin: 0;
4189
padding: 2px;
4190
border-radius: 0;
4191
box-shadow: none;
4192
box-shadow: inset 0 1px highlight($titlebar);
4193
background-color: $titlebar;
4194
&:backdrop {
4196
background-color: $titlebar-backdrop;
4197
}
4198
}
4199
}
4200
// Window Close button
4202
button.titlebutton {
4203
border-radius: $circular-radius;
4204
.selection-mode & {
4206
}
4207
}
4208
// catch all extend :)
4211
.monospace {
4213
font-family: monospace;
4214
}
4215
/**
4217
* Touch Copy & Paste
4218
*/
4219
// touch selection handlebars for the Popover.osd above
4221
cursor-handle {
4222
color: $primary;
4223
-gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4224
&.top:dir(ltr),
4226
&.bottom:dir(rtl) {
4227
-gtk-icon-transform: rotate(90deg);
4228
}
4229
&.bottom:dir(ltr),
4231
&.top:dir(rtl) {
4232
-gtk-icon-transform: unset;
4233
}
4234
&.insertion-cursor:dir(ltr),
4236
&.insertion-cursor:dir(rtl) {
4237
padding-top: 6px;
4238
-gtk-icon-transform: rotate(45deg);
4239
}
4240
}
4241
// Decouple the font of context menus from their entry/textview
4243
.context-menu {
4244
font: initial;
4245
}
4246
// shortcut window keys
4248
.keycap {
4249
min-width: 28px - 8px * 2;
4250
min-height: 28px - 2px;
4251
margin-top: 2px;
4252
padding-bottom: 2px;
4253
padding-left: 8px;
4254
padding-right: 8px;
4255
border: solid 1px divider($on-surface);
4257
border-radius: $corner-radius + 1px;
4258
box-shadow: inset 0 -2px divider($on-surface);
4259
background-color: $surface;
4260
color: $on-surface;
4261
font-size: smaller;
4262
}
4263
// FIXME needs to be done widget by widget, this wildcard should really die
4265
:not(decoration):not(window):drop(active) {
4266
// caret-color: $primary;
4267
}
4268
// FIXME aggregate with buttons
4270
stackswitcher button.text-button {
4271
min-width: 100px;
4272
}
4273
// FIXME aggregate with buttons
4275
stackswitcher button.circular,
4276
stackswitcher button.text-button.circular {
4277
min-width: $medium-size;
4278
min-height: $medium-size;
4279
padding: 0;
4280
}
4281
/**
4283
* App Icons
4284
*/
4285
// Outline for low res icons
4287
.lowres-icon {
4288
// -gtk-icon-shadow: none;
4289
}
4290
// Drapshadow for large icons
4292
.icon-dropshadow {
4293
// -gtk-icon-shadow: none;
4294
}
4295
/**
4297
* Emoji
4298
*/
4299
popover.emoji-picker {
4301
padding: 0;
4302
entry {
4304
border-bottom: 1px solid divider($on-surface);
4305
border-image: none;
4306
border-radius: 0;
4307
box-shadow: none;
4308
background-color: transparent;
4309
}
4310
scrolledwindow {
4312
border-bottom: 1px solid divider($on-surface);
4313
}
4314
}
4315
button.emoji-section {
4317
margin: 4px;
4318
&:checked {
4320
background-color: overlay("activated", $primary);
4321
color: $primary;
4322
@include ink-color($primary);
4323
}
4324
&:not(:last-child) {
4326
margin-right: 0;
4327
}
4328
}
4329
popover.emoji-picker .emoji {
4331
min-width: 3em;
4332
min-height: 3em;
4333
padding: 0 8px;
4334
// font-size: larger;
4335
widget {
4337
transition: $transition;
4338
border-radius: $corner-radius;
4339
&:hover {
4341
background-color: overlay("hover", $on-surface);
4342
}
4343
}
4344
}
4345
popover.emoji-completion {
4347
padding: 8px 0;
4348
arrow {
4350
border: none;
4351
background: none;
4352
}
4353
.emoji-completion-row {
4355
min-height: $menuitem-size;
4356
padding: 0 12px;
4357
}
4358
.emoji:hover {
4360
background-color: overlay("hover", $on-surface);
4361
}
4362
}
4363