Unicode text, UTF-8 text
1
/**
2
* Base States
3
*/
4
.background {
6
background-color: $surface-z0;
7
color: $on-surface;
8
}
9
dnd {
11
color: $on-surface;
12
}
13
.normal-icons {
15
-gtk-icon-size: 16px;
16
}
17
.large-icons {
19
-gtk-icon-size: 32px;
20
}
21
image:disabled {
23
-gtk-icon-filter: opacity(0.5);
24
}
25
.view {
27
// background-color: $surface-z1;
28
// color: $on-surface;
29
> .cell:hover {
31
background-color: overlay("hover-alt", $on-surface);
32
}
33
&:disabled {
35
color: disabled($on-surface);
36
}
37
&:selected {
39
background-color: $overlay-selected;
40
}
41
> .cell:selected:hover {
43
background-color: overlay("hover-alt", $primary, $on: $overlay-selected);
44
}
45
}
46
textview {
48
caret-color: $primary;
49
> text {
51
> selection {
52
background-color: $overlay-selected;
53
}
54
}
55
> border {
57
// background-color: $surface-z1-alt;
58
color: hint($on-surface); // FIXME: not working
59
}
60
}
61
iconview {
63
> .cell {
64
border-radius: $corner-radius;
65
}
66
&:drop(active) {
68
// box-shadow: none;
69
}
70
> dndtarget:drop(active) {
72
box-shadow: inset 0 0 0 2px $primary;
73
}
74
}
75
%iconview-desktop {
77
// background-color: $scrim;
78
color: $on-dark;
79
text-shadow: $text-shadow;
80
> rubberband {
82
border: 1px solid primary($on-dark);
83
background-color: rgba(primary($on-dark), .24);
84
}
85
}
86
rubberband {
88
border: 1px solid $primary;
89
background-color: rgba($primary, .24);
90
}
91
flowbox {
93
padding: 4px;
94
border-spacing: 4px;
95
> flowboxchild {
97
padding: 4px;
98
border-radius: $corner-radius;
99
@extend %ripple;
101
@include ink-color($on-surface, $hover-alt: true);
102
&:selected {
104
background-color: $overlay-selected;
105
@include ink-color($primary, $hover-alt: true, $on: $overlay-selected);
107
}
108
}
109
}
110
gridview {
112
padding: 4px;
113
border-spacing: 4px;
114
> child {
116
padding: 4px;
117
border-radius: $corner-radius;
118
@extend %ripple;
120
@include ink-color($on-surface, $hover-alt: true);
121
&:selected {
123
background-color: $overlay-selected;
124
@include ink-color($primary, $hover-alt: true, $on: $overlay-selected);
126
}
127
}
128
}
129
coverflow > cover {
131
box-shadow: $shadow-z2;
132
background-color: $surface-z8;
133
color: $on-surface;
134
}
135
.content-view .tile {
137
// margin: 2px;
138
// padding: 0;
139
// border-radius: 0;
140
// background-color: black;
141
&:selected {
143
background-color: transparent;
144
}
145
}
146
label {
148
caret-color: $primary;
149
&.separator {
151
color: hint($on-surface);
152
}
153
&.error {
155
color: $error;
156
}
157
> selection {
159
background-color: $overlay-selected;
160
}
161
&:disabled {
163
color: disabled($on-surface);
164
headerbar &,
166
modelbutton &,
167
tab &,
168
button & {
169
color: inherit;
170
}
171
}
172
&.osd {
174
border-radius: $corner-radius;
175
background-color: $tooltip;
176
color: $on-tooltip;
177
}
178
}
179
.dim-label {
181
color: hint($on-surface);
182
}
183
window.assistant {
185
.sidebar {
186
padding: 4px 0;
187
> label {
189
min-height: $medium-size;
190
padding: 0 12px;
191
color: disabled($on-surface);
192
font-weight: 500;
193
&.highlight {
195
color: $on-surface;
196
}
197
}
198
}
199
}
200
window.aboutdialog > box > box > image.large-icons {
202
-gtk-icon-size: 128px;
203
}
204
%osd,
206
.osd {
207
// opacity: .9;
208
}
209
/**
211
* Spinner Animation
212
*/
213
@keyframes spin {
215
to {
216
transform: rotate(1turn);
217
}
218
}
219
spinner {
221
// background: none;
222
opacity: 0; // non spinning spinner makes no sense
223
color: $primary;
224
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
225
transition: opacity $duration * 4 $ease-out;
226
animation: spin 1s linear infinite;
227
&:checked {
229
opacity: 1;
230
}
231
&:disabled {
233
color: disabled-hint($on-surface);
234
}
235
}
236
/**
238
* General Typography
239
*/
240
@function pt($size: $font-size) {
242
@return ($size * .75 / 1px) * 1pt;
243
}
244
.large-title {
246
font-weight: 400;
247
font-size: pt(48px);
248
}
249
.title-1 {
251
font-weight: 400;
252
font-size: pt(34px);
253
letter-spacing: pt(.25px);
254
}
255
.title-2 {
257
font-weight: 400;
258
font-size: pt(24px);
259
}
260
.title-3 {
262
font-weight: 500;
263
font-size: pt(20px);
264
letter-spacing: pt(.15px);
265
}
266
.title-4 {
268
font-weight: 400;
269
font-size: pt(16px);
270
letter-spacing: pt(.5px);
271
}
272
.heading {
274
font-weight: 500;
275
font-size: 1em;
276
}
277
.body {
279
font-weight: 400;
280
font-size: 1em;
281
}
282
.caption-heading {
284
font-weight: 500;
285
font-size: pt(12px);
286
letter-spacing: pt(1.5px);
287
}
288
.caption {
290
font-weight: 400;
291
font-size: pt(12px);
292
letter-spacing: pt(.4px);
293
}
294
/**
296
* Text Entries
297
*/
298
%entry,
300
entry {
301
min-height: $medium-size;
302
padding: 0 8px;
303
border-spacing: $container-padding;
304
border-radius: $corner-radius $corner-radius 0 0;
305
@include entry(normal);
307
&:hover,
309
&:drop(active) {
310
@include entry(hover);
311
}
312
&:focus-within {
314
@include entry(checked);
315
> text > placeholder {
317
opacity: 0;
318
}
319
}
320
&:disabled {
322
@include entry(disabled);
323
}
324
&.flat {
326
min-height: 0;
327
padding: 2px;
328
border-radius: 0;
329
background-color: transparent;
330
}
331
> text {
333
> placeholder {
334
color: hint($on-surface);
335
}
336
> selection {
338
background-color: $overlay-selected;
339
}
340
> block-cursor {
342
background-color: $primary;
343
color: $on-primary;
344
}
345
> undershoot {
347
&.left {
348
// @include undershoot(left);
349
}
350
&.right {
352
// @include undershoot(right);
353
}
354
}
355
}
356
// icons inside the entry
358
> image {
359
min-width: $small-size;
360
min-height: $small-size;
361
border-radius: $circular-radius;
362
@extend %ripple;
363
@include ink-color($on-surface);
364
color: hint($on-surface);
365
margin-top: $container-padding;
366
margin-bottom: $container-padding;
367
&:disabled {
369
color: disabled($on-surface);
370
}
371
&.left {
373
margin-left: ($medium-size - $small-size) / 2 - 8px;
374
}
375
&.right {
377
margin-right: ($medium-size - $small-size) / 2 - 8px;
378
}
379
}
380
&.password > image.caps-lock-indicator {
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-within {
390
@include entry(checked, $color);
391
}
392
&:disabled {
394
@include entry(disabled, $color);
395
}
396
}
397
}
398
.osd & {
400
}
401
> progress > trough > progress {
403
margin: 0 -8px;
404
margin-bottom: -4px;
405
border-bottom: 2px solid $primary;
406
background-color: transparent;
407
}
408
// linked entries
410
.linked:not(.vertical) > & {
411
// @extend %linked;
412
}
413
// Vertically linked entries
415
.linked.vertical > & {
416
// @extend %linked-vertical;
417
}
418
}
419
%entry_raised {
421
border-radius: $corner-radius;
422
@include entry(raised-normal);
424
&:focus-within {
426
@include entry(raised-focus);
427
}
428
&:drop(active) {
430
@include entry(raised-hover);
431
}
432
&:disabled {
434
@include entry(raised-disabled);
435
}
436
// entry error and warning style
438
@each $class, $color in (".error": $error, ".warning": $warning) {
439
&#{$class} {
440
@include entry(raised-normal, $color);
441
&:focus-within {
443
@include entry(raised-focus, $color);
444
}
445
&:disabled {
447
@include entry(raised-disabled, $color);
448
}
449
image {
451
color: hint(on($color));
452
&:hover,
454
&:active {
455
color: on($color);
456
}
457
&:disabled {
459
color: disabled(on($color));
460
}
461
}
462
}
463
}
464
}
465
treeview entry {
467
&,
468
&.flat {
469
background-color: $surface-z1;
470
&,
472
&:focus-within {
473
border-image: none;
474
box-shadow: none;
475
}
476
}
477
}
478
.entry-tag {
480
margin: 2px;
481
border-radius: $circular-radius;
482
box-shadow: none;
483
background-color: fill($on-surface);
484
color: $on-surface;
485
&:hover {
487
background-image: image(overlay("hover", $on-surface));
488
}
489
// side margins: compensate the entry padding with a negative margin
491
// then the negative margin itself
492
:dir(ltr) & {
493
margin-left: 4px;
494
margin-right: 0;
495
padding-left: 12px;
496
padding-right: 8px;
497
}
498
:dir(rtl) & {
500
margin-left: 0;
501
margin-right: 4px;
502
padding-left: 8px;
503
padding-right: 12px;
504
}
505
// seems any sizing doesn't work
507
&.button {
508
box-shadow: none;
509
background-color: transparent;
510
color: hint($on-surface);
511
}
512
}
513
/**
515
* Buttons
516
*/
517
// stuff for .needs-attention
519
@keyframes needs-attention {
520
from {
521
background-image: radial-gradient(farthest-side, $primary 0%, transparent 0%);
522
}
523
to {
525
background-image: radial-gradient(farthest-side, $primary 100%, transparent 100%);
526
}
527
}
528
%button,
530
button {
531
min-height: 24px;
532
min-width: 16px;
533
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
534
border-radius: $corner-radius;
535
background-color: $surface-z8;
536
color: $on-surface;
537
font-weight: 500;
538
@extend %ripple;
540
@include ink-color($on-surface, $on: $surface-z8, $button-style: "raised");
541
&:disabled {
543
box-shadow: none;
544
background-color: fill($on-surface);
545
color: disabled($on-surface);
546
}
547
&:checked {
549
$background-color: overlay("activated", $primary, $on: $surface-z8);
550
color: $primary;
551
@include ink-color($primary, $on: $background-color, $button-style: "raised");
552
&:disabled {
554
box-shadow: none;
555
background-color: overlay("activated", $on-surface, $on: fill($on-surface));
556
color: disabled($on-surface);
557
}
558
}
559
&.text-button {
561
min-width: 64px - 16px * 2;
562
padding-left: 16px;
563
padding-right: 16px;
564
}
565
&.image-button {
567
min-width: 24px;
568
padding: ($medium-size - 24px) / 2;
569
border-radius: $circular-radius;
570
}
571
// NOTE: Some image-only buttons use this as well
573
&.text-button.image-button {
574
min-width: 64px - 16px * 2;
575
padding-left: 16px;
576
padding-right: 16px;
577
// min-width: 24px;
578
// padding: ($medium-size - 24px) / 2;
579
border-radius: $corner-radius;
580
label {
582
&:first-child {
583
// margin-left: 16px - ($medium-size - 24px) / 2;
584
}
585
&:last-child {
587
// margin-right: 16px - ($medium-size - 24px) / 2;
588
}
589
}
590
image:not(:only-child) {
592
// margin: 0 (24px - 16px) / 2;
593
}
594
image {
596
&:first-child {
597
margin-left: 12px - 16px;
598
margin-right: 8px;
599
}
600
&:last-child {
602
margin-left: 8px;
603
margin-right: 12px - 16px;
604
}
605
}
606
}
607
.linked:not(.vertical) > & {
609
// @extend %linked;
610
&.image-button:not(.text-button) {
612
// @extend %linked-image-button;
613
}
614
}
615
.linked.vertical > & {
617
// @extend %linked-vertical;
618
&.image-button:not(.text-button) {
620
// @extend %linked-vertical-image-button;
621
}
622
}
623
}
624
%button-outlined {
626
background-color: transparent;
627
@include ink-color($on-surface, $hover-alt: true, $button-style: "outlined");
628
}
629
%button-flat-basic {
631
background-color: transparent;
632
color: hint($on-surface);
633
@include ink-color($on-surface, $button-style: "flat");
634
&:disabled {
636
background-color: transparent;
637
color: disabled-hint($on-surface);
638
}
639
}
640
%button-flat-activatable {
642
@extend %button-flat-basic;
643
&:checked {
645
$background-color: overlay("activated", $primary);
646
color: $primary;
647
@include ink-color($primary, $on: $background-color, $button-style: "flat");
648
&:disabled {
650
color: disabled($on-surface);
651
}
652
}
653
}
654
%button-flat,
656
button.flat {
657
@extend %button-flat-activatable;
658
&.text-button {
660
min-width: 64px - 8px * 2;
661
padding-left: 8px;
662
padding-right: 8px;
663
}
664
&.text-button.image-button {
666
min-width: 24px;
667
padding: ($medium-size - 24px) / 2;
668
label {
670
&:first-child {
671
margin-left: 12px - ($medium-size - 24px) / 2;
672
}
673
&:last-child {
675
margin-right: 12px - ($medium-size - 24px) / 2;
676
}
677
}
678
}
679
.linked:not(.vertical) > &,
681
.linked.vertical > & {
682
&:not(:only-child) { // specificity bump
683
border-radius: $corner-radius;
684
&.image-button:not(.text-button) {
686
border-radius: $circular-radius;
687
}
688
}
689
}
690
}
691
button {
693
// big standalone buttons like in Documents pager
694
&.osd {
695
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
696
&.image-button {
698
padding: ($large-size - 24px) / 2;
699
}
700
&:disabled {
702
opacity: 0;
703
}
704
}
705
// overlay / OSD style
707
@at-root %osd_button,
708
.osd & {
709
}
710
// Suggested and Destructive Action buttons
712
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
713
&#{$class} {
714
background-color: $color;
715
color: on($color);
716
@include ink-color(on($color), $on: $color, $button-style: "raised");
717
&:disabled {
719
box-shadow: none;
720
background-color: fill($on-surface);
721
color: disabled($on-surface);
722
}
723
&:checked {
725
background-color: overlay("activated", on($color), $on: $color);
726
}
727
&.flat {
729
background-color: transparent;
730
@include ink-color($color);
731
&:disabled {
733
box-shadow: none;
734
background-color: transparent;
735
color: disabled-hint($on-surface);
736
}
737
&:checked {
739
background-color: overlay("activated", $color);
740
}
741
}
742
.osd & {
744
}
745
}
746
}
747
stackswitcher > & {
749
// to position the needs attention dot, padding is added to the button
750
// child, a label needs just lateral padding while an icon needs vertical
751
// padding added too.
752
> label {
754
margin: 0 -6px;
755
padding: 0 6px;
756
}
757
> image {
759
margin: -3px -6px;
760
padding: 3px 6px;
761
}
762
&.needs-attention {
764
> label,
765
> image {
766
@extend %needs-attention;
767
}
768
&:checked {
770
> label,
771
> image {
772
animation: none;
773
background-image: none;
774
}
775
}
776
}
777
}
778
&.font > box {
780
border-spacing: 6px;
781
> box {
783
> separator {
784
@extend %hide_separators;
785
}
786
> label {
788
// font-weight: bold;
789
}
790
}
791
}
792
// force circular button shape
794
&.close,
795
menubutton.circular > &,
796
&.circular {
797
border-radius: $circular-radius;
798
}
799
}
800
%button-small {
802
min-height: $small-size;
803
min-width: $small-size;
804
padding: 0;
805
border-radius: $circular-radius;
806
}
807
%needs-attention {
809
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
810
background-repeat: no-repeat;
811
background-position: right 3px;
812
background-size: 6px 6px;
813
&:dir(rtl) {
815
background-position: left 3px;
816
}
817
}
818
.linked:not(stackswitcher) {
820
border-spacing: $container-padding;
821
}
822
.linked:not(.vertical) > button.radio {
824
border-radius: 0;
825
&:first-child {
827
border-top-left-radius: $corner-radius;
828
border-bottom-left-radius: $corner-radius;
829
}
830
&:last-child {
832
border-top-right-radius: $corner-radius;
833
border-bottom-right-radius: $corner-radius;
834
}
835
&:not(:first-child) {
837
margin-left: -$container-padding;
838
}
839
}
840
.linked.vertical > button.radio {
842
border-radius: 0;
843
&:first-child {
845
border-top-left-radius: $corner-radius;
846
border-top-right-radius: $corner-radius;
847
}
848
&:last-child {
850
border-bottom-left-radius: $corner-radius;
851
border-bottom-right-radius: $corner-radius;
852
}
853
&:not(:first-child) {
855
margin-top: -$container-padding;
856
}
857
}
858
%linked-not-first-child {
860
border-top-left-radius: 0;
861
border-bottom-left-radius: 0;
862
}
863
%linked-not-last-child {
865
border-top-right-radius: 0;
866
border-bottom-right-radius: 0;
867
}
868
%linked {
870
&:not(:first-child) {
871
@extend %linked-not-first-child;
872
}
873
&:not(:last-child) {
875
@extend %linked-not-last-child;
876
}
877
}
878
%linked-vertical-not-first-child {
880
border-top-left-radius: 0;
881
border-top-right-radius: 0;
882
}
883
%linked-vertical-not-last-child {
885
border-bottom-left-radius: 0;
886
border-bottom-right-radius: 0;
887
}
888
%linked-vertical {
890
&:not(:first-child) {
891
@extend %linked-vertical-not-first-child;
892
}
893
&:not(:last-child) {
895
@extend %linked-vertical-not-last-child;
896
}
897
}
898
%linked-image-button {
900
&:first-child {
901
border-top-left-radius: $corner-radius;
902
border-bottom-left-radius: $corner-radius;
903
}
904
&:last-child {
906
border-top-right-radius: $corner-radius;
907
border-bottom-right-radius: $corner-radius;
908
}
909
&:only-child {
911
border-radius: $circular-radius;
912
}
913
}
914
%linked-vertical-image-button {
916
&:first-child {
917
border-top-left-radius: $corner-radius;
918
border-top-right-radius: $corner-radius;
919
}
920
&:last-child {
922
border-bottom-left-radius: $corner-radius;
923
border-bottom-right-radius: $corner-radius;
924
}
925
&:only-child {
927
border-radius: $circular-radius;
928
}
929
}
930
/* menu buttons */
932
modelbutton.flat {
933
// min-height: $menuitem-size;
934
// padding: 0 8px;
935
// border-radius: $corner-radius;
936
@extend %ripple;
938
@include ink-color($on-surface);
939
&:selected {
941
// background-color: $overlay-selected;
942
}
943
}
944
modelbutton.flat arrow {
946
min-width: 16px;
947
min-height: 16px;
948
color: hint($on-surface);
949
&:disabled {
951
color: disabled-hint($on-surface);
952
}
953
&.left {
955
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
956
}
957
&.right {
959
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
960
}
961
}
962
button.color {
964
min-width: $small-size;
965
min-height: $small-size;
966
padding: $container-padding;
967
}
968
menubutton {
970
> button > box > arrow {
971
min-height: 16px;
972
min-width: 16px;
973
&.none {
975
-gtk-icon-source: -gtk-icontheme('open-menu-symbolic');
976
}
977
&.down {
979
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
980
}
981
&.up {
983
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
984
}
985
&.left {
987
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
988
}
989
&.right {
991
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
992
}
993
}
994
}
995
/**
997
* Links
998
*/
999
link {
1001
color: $primary;
1002
&:visited {
1004
color: $visited;
1005
}
1006
}
1007
button.link {
1009
color: $primary;
1010
@include ink-color($primary);
1011
&:visited {
1013
color: $visited;
1014
@include ink-color($visited);
1015
}
1016
> label {
1018
text-decoration-line: underline;
1019
}
1020
}
1021
/**
1023
* GtkSpinButton
1024
*/
1025
spinbutton {
1027
font-feature-settings: "tnum";
1028
&:not(.vertical) {
1030
// in this horizontal configuration, the whole spinbutton
1031
// behaves as the entry, so we extend the entry styling
1032
// and nuke the style on the internal entry
1033
@extend %entry;
1034
> text {
1036
min-width: 32px;
1037
}
1038
> button {
1040
@extend %button-flat-basic;
1041
@extend %button-small;
1042
margin: $container-padding 0;
1044
&.up:dir(ltr),
1046
&.down:dir(rtl) {
1047
// margin-left: $container-padding / 2;
1048
}
1049
&.up:dir(rtl),
1051
&.down:dir(ltr) {
1052
// margin-right: $container-padding / 2;
1053
}
1054
&.up:dir(ltr) {
1056
margin-right: ($medium-size - $small-size) / 2 - 8px;
1057
}
1058
&.up:dir(rtl) {
1060
margin-left: ($medium-size - $small-size) / 2 - 8px;
1061
}
1062
}
1063
}
1064
// OSD horizontal
1066
.osd &:not(.vertical) {
1067
}
1068
// Vertical
1070
&.vertical {
1071
// in the vertical configuration, we treat the spinbutton
1072
// as a box, and tweak the style of the entry in the middle
1073
// so that it's linked
1074
> text {
1076
@extend %entry_raised;
1077
min-height: $medium-size;
1079
min-width: $large-size;
1080
padding: 0;
1081
> selection {
1083
background-color: $overlay-selected;
1084
}
1085
}
1086
button {
1088
min-height: $medium-size;
1089
min-width: $large-size;
1090
padding: 0;
1091
@extend %button-flat-basic;
1093
// Remove unwanted focus indicator
1095
&:focus:not(:hover):not(:active) {
1096
box-shadow: inset 0 0 0 9999px transparent;
1097
}
1098
&.up {
1100
border-radius: $corner-radius $corner-radius 0 0;
1101
}
1102
&.down {
1104
border-radius: 0 0 $corner-radius $corner-radius;
1105
}
1106
}
1107
}
1108
// OSD vertical
1110
.osd &.vertical {
1111
}
1112
// Misc
1114
treeview &:not(.vertical) {
1115
min-height: 0;
1116
border-style: none;
1117
border-radius: 0;
1118
> text {
1120
min-height: 0;
1121
padding: 1px 2px;
1122
}
1123
}
1124
}
1125
/**
1127
* ComboBoxes
1128
*/
1129
dropdown,
1131
combobox {
1132
arrow {
1133
min-width: 16px;
1134
min-height: 16px;
1135
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1136
transition: -gtk-icon-transform $duration $ease-out;
1137
}
1138
button:checked arrow {
1140
color: $primary;
1141
-gtk-icon-transform: rotate(-.5turn);
1142
}
1143
}
1144
dropdown {
1146
> button > box {
1147
border-spacing: 6px;
1148
}
1149
> popover.menu > contents {
1151
// allow search entries with no padding
1152
padding: 0;
1153
listview {
1155
padding: 6px 0;
1156
> row {
1158
min-height: 32px - 4px * 2;
1159
padding: 4px 8px;
1160
&:selected {
1162
background-color: overlay("focus", $on-surface);
1163
}
1164
}
1165
}
1166
}
1167
}
1168
// drodowns with searchboxes on top
1170
.dropdown-searchbar {
1171
border-bottom: 1px solid divider($on-surface);
1172
> entry.search {
1174
border-image: none;
1175
border-radius: 0;
1176
box-shadow: none;
1177
background-color: transparent;
1178
}
1179
}
1180
combobox {
1182
> box > button > box {
1183
border-spacing: 6px;
1184
}
1185
cellview {
1187
margin: -2px;
1188
}
1189
// align menu labels with the button label
1191
> popover.menu > contents modelbutton {
1192
padding-left: 8px;
1193
padding-right: 8px;
1194
}
1195
> .linked:not(.vertical) > entry:not(:only-child) {
1197
// border-radius: $corner-radius $corner-radius 0 0;
1198
&:first-child {
1200
margin-right: -($medium-size + $container-padding);
1201
padding-right: $medium-size;
1202
}
1203
&:last-child {
1205
margin-left: -($medium-size + $container-padding);
1206
padding-left: $medium-size;
1207
}
1208
}
1209
> .linked:not(.vertical) > button:not(:only-child) {
1211
@extend %button-flat-activatable;
1212
// @extend %button-small;
1213
min-height: 16px;
1215
min-width: 16px;
1216
margin: ($medium-size - $small-size) / 2;
1217
padding: ($small-size - 16px) / 2;
1218
border-radius: $circular-radius;
1219
}
1220
}
1221
// the combo is a composite widget so the way we do button linking doesn't
1223
// work, special case needed. See
1224
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1225
.linked:not(.vertical) > combobox {
1227
&:not(:first-child) > box > button.combo {
1228
// @extend %linked-not-first-child;
1229
}
1230
&:not(:last-child) > box > button.combo {
1232
// @extend %linked-not-last-child;
1233
}
1234
}
1235
.linked.vertical > combobox {
1237
&:not(:first-child) > box > button.combo {
1238
// @extend %linked-vertical-not-first-child;
1239
}
1240
&:not(:last-child) > box > button.combo {
1242
// @extend %linked-vertical-not-last-child;
1243
}
1244
}
1245
dropdown > button.toggle,
1247
button.combo:only-child {
1248
padding-left: 8px;
1249
padding-right: 8px;
1250
border-radius: $corner-radius $corner-radius 0 0;
1251
font-weight: normal;
1252
@include entry(normal);
1254
&:focus {
1256
@include entry(focus);
1257
}
1258
&:drop(active),
1260
&:hover {
1261
@include entry(hover);
1262
}
1263
&:checked {
1265
@include entry(checked);
1266
}
1267
&:disabled {
1269
@include entry(disabled);
1270
}
1271
arrow {
1273
transition: color $duration $ease-out;
1274
color: hint($on-surface);
1275
&:disabled {
1277
color: disabled-hint($on-surface);
1278
}
1279
}
1280
}
1281
/**
1283
* Toolbars
1284
*/
1285
.toolbar {
1287
padding: 4px;
1288
border-spacing: 4px;
1289
&.top { border-bottom: 1px solid divider($on-surface); }
1291
&.bottom { border-top: 1px solid divider($on-surface); }
1292
&.start { border-right: 1px solid divider($on-surface); }
1293
&.end { border-left: 1px solid divider($on-surface); }
1294
button {
1296
@extend %button-flat;
1297
}
1298
// on OSD
1300
.osd & {
1301
}
1302
// stand-alone OSD toolbars
1304
&.osd {
1305
@extend %toolbar-osd;
1306
// positional classes for `attached` osd toolbars
1308
&.left,
1309
&.right,
1310
&.top,
1311
&.bottom {
1312
border-radius: 0;
1313
}
1314
&.bottom {
1316
box-shadow: none;
1317
background-color: transparent;
1318
background-image:
1319
linear-gradient(
1320
to bottom,
1321
transparent,
1322
rgba(black, .1) 30%,
1323
rgba(black, .2) 50%,
1324
rgba(black, .4)
1325
);
1326
}
1327
}
1328
// toolbar separators
1330
&.horizontal > separator {
1331
margin: 4px 0;
1332
}
1333
&.vertical > separator {
1335
margin: 0 4px;
1336
}
1337
}
1338
%toolbar-osd {
1340
transition: $transition-shadow;
1341
padding: $container-padding;
1342
border-spacing: $container-padding;
1343
border-radius: $corner-radius;
1344
box-shadow: $shadow-z4, inset 0 1px highlight($surface-z8);
1345
background-color: $surface-z8;
1346
&:backdrop {
1348
box-shadow: $shadow-z2, inset 0 1px highlight($surface-z8);
1349
}
1350
}
1351
// searchbar, location-bar & inline-toolbar
1353
.inline-toolbar {
1354
padding: $container-padding;
1355
border-style: solid;
1356
border-width: 0 1px 1px;
1357
border-color: divider($on-surface);
1358
background-color: $surface-z1;
1359
}
1360
searchbar > revealer > box {
1362
padding: $container-padding;
1363
border-spacing: $container-padding;
1364
border-bottom: 1px solid divider($on-surface);
1365
}
1366
/**
1368
* Title buttons
1369
*/
1370
windowcontrols {
1372
border-spacing: $container-padding;
1373
&:not(:only-child):not(.empty) {
1375
border-image:
1376
linear-gradient(
1377
to bottom,
1378
transparent 12px,
1379
divider($on-titlebar) 12px,
1380
divider($on-titlebar) calc(100% - 12px),
1381
transparent calc(100% - 12px)
1382
) 1;
1383
&.start:dir(ltr),
1385
&.end:dir(rtl) {
1386
padding-right: $container-padding;
1387
border-right: 1px solid;
1388
}
1389
&.start:dir(rtl),
1391
&.end:dir(ltr) {
1392
padding-left: $container-padding;
1393
border-left: 1px solid;
1394
}
1395
}
1396
button {
1398
}
1399
}
1400
/**
1402
* Header bars
1403
*/
1404
.titlebar {
1406
transition: background-color $duration $ease-out, color $duration $ease-out;
1407
border-radius: $corner-radius $corner-radius 0 0;
1408
box-shadow: $shadow-z2, inset 0 1px highlight($titlebar);
1409
background-color: $titlebar;
1410
color: $on-titlebar;
1411
&:disabled {
1413
color: disabled($on-titlebar);
1414
}
1415
&:backdrop {
1417
background-color: $titlebar-backdrop;
1418
color: hint($on-titlebar);
1419
&:disabled {
1421
color: disabled-hint($on-titlebar);
1422
}
1423
}
1424
box.start,
1426
box.end {
1427
border-spacing: $container-padding;
1428
}
1429
.title {
1431
padding-left: 12px;
1432
padding-right: 12px;
1433
font-weight: bold;
1434
}
1435
.subtitle {
1437
padding-left: 12px;
1438
padding-right: 12px;
1439
font-size: smaller;
1440
}
1441
.subtitle,
1443
.dim-label {
1444
transition: color $duration $ease-out;
1445
color: hint($on-titlebar);
1446
&:backdrop {
1448
color: disabled($on-titlebar);
1449
}
1450
}
1451
// The separator for split headerbars
1453
headerbar + separator {
1454
background-color: divider($on-titlebar);
1455
}
1456
entry {
1458
box-shadow: inset 0 -1px stroke($on-titlebar);
1459
background-color: entry-fill($on-titlebar);
1460
color: $on-titlebar;
1461
&:disabled {
1463
box-shadow: inset 0 -1px disabled-stroke($on-titlebar);
1464
background-color: entry-fill($on-titlebar);
1465
color: disabled($on-titlebar);
1466
}
1467
image {
1469
color: hint($on-titlebar);
1470
&:hover,
1472
&:active {
1473
color: $on-titlebar;
1474
}
1475
&:disabled {
1477
color: disabled($on-titlebar);
1478
}
1479
}
1480
}
1481
.linked:not(.vertical) > entry:not(:only-child) {
1483
border-radius: $corner-radius $corner-radius 0 0;
1484
}
1485
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1487
@extend %button-flat;
1488
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1490
$titlebar-indicator 0%,
1491
transparent 0%)
1492
0 0 0 / 0 0 0px;
1493
background-color: transparent;
1494
color: hint($on-titlebar);
1495
@include ink-color($on-titlebar);
1496
&:disabled {
1498
color: disabled-hint($on-titlebar);
1499
}
1500
@at-root %titlebar-button-checked,
1502
&:checked {
1503
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1504
$titlebar-indicator 100%,
1505
transparent 100%)
1506
0 0 2 / 0 0 2px;
1507
background-color: transparent;
1508
color: $on-titlebar;
1509
@include ink-color($on-titlebar);
1510
&:disabled {
1512
background-color: transparent;
1513
color: disabled($on-titlebar);
1514
}
1515
}
1516
&:backdrop {
1518
color: disabled($on-titlebar);
1519
&:disabled {
1521
color: disabled-hint($on-titlebar);
1522
}
1523
&:checked {
1525
color: hint($on-titlebar);
1526
&:disabled {
1528
color: disabled-hint($on-titlebar);
1529
}
1530
}
1531
}
1532
}
1533
button.suggested-action,
1535
button.destructive-action {
1536
&:disabled {
1537
background-color: fill($on-titlebar);
1538
color: disabled($on-titlebar);
1539
}
1540
}
1541
// FIXME: Ugly overriding
1543
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1544
min-width: 120px - 8px * 2;
1545
}
1546
// FIXME: Ugly overriding
1548
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1549
min-width: 0;
1550
padding-left: ($medium-size - 24px) / 2;
1551
padding-right: ($medium-size - 24px) / 2;
1552
}
1553
&.selection-mode {
1555
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1556
// but let's keep it for backwards compatibility.
1557
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1558
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1559
box-shadow: $shadow-z2, inset 0 1px highlight($primary);
1560
background-color: $primary;
1561
color: $on-primary;
1562
&:backdrop {
1564
color: hint($on-primary);
1565
}
1566
.subtitle:link {
1568
color: $on-primary;
1569
}
1570
button:not(.suggested-action):not(.destructive-action) {
1572
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1573
currentColor 0%,
1574
transparent 0%)
1575
0 0 0 / 0 0 0px;
1576
color: $on-primary;
1577
&:disabled {
1579
color: disabled($on-primary);
1580
}
1581
&:checked {
1583
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1584
currentColor 100%,
1585
transparent 100%)
1586
0 0 2 / 0 0 2px;
1587
color: $on-primary;
1588
&:disabled {
1590
color: disabled($on-primary);
1591
}
1592
}
1593
&:backdrop {
1595
color: hint($on-primary);
1596
&:disabled {
1598
color: disabled-hint($on-primary);
1599
}
1600
&:checked {
1602
color: hint($on-primary);
1603
&:disabled {
1605
color: disabled-hint($on-primary);
1606
}
1607
}
1608
}
1609
}
1610
.selection-menu {
1612
padding-left: 16px;
1613
padding-right: 16px;
1614
.arrow {
1616
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1617
}
1618
}
1619
}
1620
.selection-mode {
1622
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1623
background-color: $primary;
1624
}
1625
// squared corners when the window is maximized, tiled, or fullscreen
1627
.tiled &,
1628
.tiled-top &,
1629
.tiled-right &,
1630
.tiled-bottom &,
1631
.tiled-left &,
1632
.maximized &,
1633
.fullscreen & {
1634
border-radius: 0;
1635
box-shadow: $shadow-z2;
1636
}
1637
&.default-decoration {
1639
min-height: $small-size;
1640
padding: $container-padding;
1641
box-shadow: inset 0 1px highlight($titlebar);
1642
.tiled &,
1644
.maximized &,
1645
.fullscreen & {
1646
box-shadow: none;
1647
}
1648
button.titlebutton {
1650
min-height: $small-size;
1651
min-width: $small-size;
1652
margin: 0;
1653
padding: 0;
1654
}
1655
// workaround for non-animatable buttons
1657
.background:not(.csd) & button.titlebutton:active {
1658
background-size: 1000% 1000%;
1659
}
1660
}
1661
.solid-csd & {
1663
&:dir(rtl), &:dir(ltr) { // specificity bump
1664
border-radius: 0;
1665
box-shadow: $shadow-z2; // just remove the highlight
1666
}
1667
}
1668
}
1669
headerbar > windowhandle > box {
1671
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1672
min-height: $large-size;
1673
padding: 0 $container-padding;
1674
border-spacing: $container-padding;
1675
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1677
entry,
1678
spinbutton,
1679
button {
1680
margin-top: $container-padding;
1681
margin-bottom: $container-padding;
1682
}
1683
separator.titlebutton {
1685
margin-top: $large-size / 4;
1686
margin-bottom: $large-size / 4;
1687
background-color: divider($on-titlebar);
1688
}
1689
switch {
1691
margin-top: ($large-size - 24px) / 2;
1692
margin-bottom: ($large-size - 24px) / 2;
1693
}
1694
// reset button margins of the spinbutton
1696
spinbutton button {
1697
margin-top: 0;
1698
margin-bottom: 0;
1699
}
1700
// FIXME: This is a hacky workaround.
1702
.entry-tag {
1703
margin-top: 5px;
1704
margin-bottom: 5px;
1705
}
1706
}
1707
// Development versions of apps to use a differently styled headerbar
1709
window.devel .titlebar:not(.selection-mode) {
1710
}
1711
/**
1713
* Pathbars
1714
*/
1715
%pathbar_button,
1717
pathbar.linked:not(.vertical) > button {
1718
@extend %button-flat-basic;
1719
padding-left: ($medium-size - 24px) / 2;
1721
padding-right: ($medium-size - 24px) / 2;
1722
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1723
$primary 0%,
1724
transparent 0%)
1725
0 0 0 / 0 0 0px;
1726
border-radius: $corner-radius;
1727
&:checked {
1729
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1730
$primary 100%,
1731
transparent 100%)
1732
0 0 2 / 0 0 2px;
1733
color: $on-surface;
1734
&,
1736
&:disabled {
1737
background-color: transparent;
1738
}
1739
}
1740
label:not(:only-child) {
1742
&:first-child {
1743
margin-left: 0;
1744
}
1745
&:last-child {
1747
margin-right: 0;
1748
}
1749
}
1750
&.text-button {
1752
min-width: 0;
1753
}
1754
&.slider-button {
1756
padding-left: (24px - 16px) / 2;
1757
padding-right: (24px - 16px) / 2;
1758
}
1759
}
1760
/**
1762
* Tree Views
1763
*/
1764
columnview.view,
1766
treeview.view {
1767
border-left-color: stroke($on-surface); // this is actually the tree lines color,
1768
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
1769
// to avoid borders being overridden by the previously set props
1771
> rubberband {
1772
@extend rubberband;
1773
}
1774
// FIXME: Avoid transparency background-color being slightly darker
1776
&:selected {
1777
// background-color: $surface-z1;
1778
// background-image: image($overlay-selected);
1779
}
1780
&:hover,
1782
&:selected {
1783
// border-radius: 0;
1784
}
1785
&.separator {
1787
min-height: 1px + 2px * 2;
1788
color: divider($on-surface);
1789
}
1790
&:drop(active) {
1792
box-shadow: none;
1793
}
1794
> dndtarget:drop(active) {
1796
// FIXME: box-shadow, background-color and background-image are not available here.
1797
border-style: solid none;
1798
border-width: 9999px;
1799
border-color: overlay("hover", $on-surface);
1800
&.after {
1802
border-top-style: none;
1803
}
1804
&.before {
1806
border-bottom-style: none;
1807
}
1808
}
1809
&.expander {
1811
// GtkTreeView uses the larger of the expander’s min-width and min-height
1812
min-width: 16px;
1813
min-height: 16px;
1814
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1815
-gtk-icon-transform: rotate(-90deg);
1816
&:dir(rtl) {
1818
-gtk-icon-transform: rotate(90deg);
1819
}
1820
&:checked {
1822
-gtk-icon-transform: unset;
1823
}
1824
color: hint($on-surface);
1826
&:hover,
1828
&:active {
1829
color: $on-surface;
1830
}
1831
&:disabled {
1833
color: disabled-hint($on-surface);
1834
}
1835
}
1836
&.progressbar { // progress bar in treeviews
1838
border-bottom: $bar-size solid $primary;
1839
background-color: transparent;
1840
&:selected:hover {
1842
background-color: transparent;
1843
}
1844
}
1845
&.trough { // progress bar trough in treeviews
1847
border-bottom: $bar-size solid disabled-stroke($on-surface);
1848
background-color: transparent;
1849
&:selected:hover {
1851
background-color: transparent;
1852
}
1853
}
1854
> header {
1856
> button {
1857
padding: 2px 6px;
1858
border-style: none solid solid none;
1859
border-width: 1px;
1860
border-color: divider($on-surface);
1861
border-radius: 0;
1862
background-clip: padding-box;
1863
background-color: transparent;
1864
color: hint($on-surface);
1865
@include ink-color($on-surface, $hover-alt: true, $button-style: "flat");
1866
@include list-item;
1867
&:disabled {
1869
color: disabled-hint($on-surface);
1870
}
1871
&,
1873
&:disabled {
1874
// background-color: $surface-z1;
1875
}
1876
&:last-child {
1878
border-right-style: none;
1879
}
1880
> box > sort-indicator {
1882
min-height: 16px;
1883
min-width: 16px;
1884
&.ascending {
1886
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1887
}
1888
&.descending {
1890
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1891
}
1892
}
1893
}
1894
}
1895
button.dnd,
1897
header.button.dnd { // for treeview-like derive widgets
1898
padding: 2px 6px;
1899
border-style: none solid solid;
1900
border-width: 1px;
1901
border-color: divider($on-surface);
1902
border-radius: 0;
1903
box-shadow: none;
1904
// background-color: $surface-z1;
1905
background-clip: border-box;
1906
color: $primary;
1907
}
1908
// see tests/testaccel to test
1910
acceleditor > label {
1911
background-color: $primary;
1912
}
1913
}
1914
/**
1916
* Menus
1917
*/
1918
menubar {
1920
// box-shadow: inset 0 -1px divider($on-surface);
1921
background-color: $titlebar;
1922
color: $on-titlebar;
1923
&:backdrop {
1925
background-color: $titlebar-backdrop;
1926
color: hint($on-titlebar);
1927
}
1928
.csd & {
1930
transition: $transition;
1931
}
1932
> item {
1934
// transition: $transition;
1935
min-height: 20px;
1936
padding: 4px 8px;
1937
color: hint($on-titlebar);
1938
@extend %ripple;
1940
// @include ink-color($on-titlebar);
1941
&:hover {
1943
background-color: overlay("hover", $on-titlebar);
1944
}
1945
&:focus:not(:hover) {
1947
background-color: overlay("focus", $on-titlebar);
1948
}
1949
&:active {
1951
background-image: radial-gradient(circle, overlay("pressed", $on-titlebar) 10%, transparent 10%);
1952
}
1953
&:selected:not(:focus) {
1955
transition: none;
1956
background-color: overlay("activated", $on-titlebar);
1957
color: $on-titlebar;
1958
}
1959
&:disabled {
1961
color: disabled-hint($on-titlebar);
1962
}
1963
}
1964
}
1965
popover.menu {
1967
> contents {
1968
padding: 6px 0;
1969
}
1970
separator {
1972
margin: 6px 0;
1973
}
1974
label.title {
1976
min-height: 32px - 4px * 2;
1977
padding: 4px 32px; // this will fall apart with font sizing
1978
font-weight: bold;
1979
}
1980
modelbutton {
1982
// transition: background-color $duration $ease-out;
1983
min-height: 30px - 4px * 2;
1984
min-width: 40px;
1985
padding: 4px 32px;
1986
&:hover {
1988
// transition: none;
1989
// background-color: overlay("hover", $on-surface);
1990
}
1991
&:disabled {
1993
color: disabled($on-surface);
1994
}
1995
accelerator {
1997
color: hint($on-surface);
1998
&:dir(ltr) {
2000
margin-left: 24px;
2001
margin-right: 16px - 32px;
2002
}
2003
&:dir(rtl) {
2005
margin-left: 16px - 32px;
2006
margin-right: 24px;
2007
}
2008
}
2009
&:disabled accelerator {
2011
color: disabled-hint($on-surface);
2012
}
2013
}
2014
check,
2016
radio {
2017
&,
2018
&:focus,
2019
&:hover,
2020
&:active,
2021
&:disabled {
2022
// transition: none;
2023
background-color: transparent;
2024
background-image: none;
2025
}
2026
}
2027
arrow,
2029
check,
2030
radio {
2031
min-width: 16px;
2032
min-height: 16px;
2033
margin: 0;
2034
padding: 0;
2035
&.left {
2037
margin-left: 8px - 32px;
2038
margin-right: 8px;
2039
}
2040
&.right {
2042
margin-left: 8px;
2043
margin-right: 8px - 32px;
2044
}
2045
}
2046
button.model {
2048
@extend %button-flat;
2049
// min-height: 32px;
2051
// padding: 0 8px;
2052
// border-radius: $corner-radius;
2053
&:checked {
2055
// color: $primary;
2056
}
2057
}
2058
box.inline-buttons {
2060
padding: 0 8px;
2061
button.image-button.model {
2063
}
2064
}
2065
box.circular-buttons {
2067
padding: 4px 32px;
2068
button.circular.image-button.model {
2070
padding: 12px;
2071
}
2072
}
2073
}
2074
/**
2076
* Popovers
2077
*/
2078
popover {
2080
font: initial; // Decouple the font of popovers from their entry/textview
2081
&.background {
2083
background-color: transparent;
2084
}
2085
> arrow,
2087
> contents {
2088
transition: $transition-shadow;
2089
box-shadow: $shadow-z4;
2090
background-color: $surface-z8;
2091
color: $on-surface;
2092
&:backdrop {
2094
box-shadow: $shadow-z2;
2095
}
2096
}
2097
@at-root %popover-border {
2099
border-width: 1px;
2100
border-style: solid;
2101
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
2102
background-clip: padding-box;
2103
}
2104
> arrow {
2106
@extend %popover-border;
2107
}
2108
> contents {
2110
padding: 8px;
2111
@if $version >= 4.2 {
2113
border-radius: $corner-radius;
2114
} @else {
2115
@extend %popover-border;
2116
border-radius: $corner-radius + 1px;
2117
}
2118
> list,
2120
.view,
2121
> .toolbar {
2122
border-style: none;
2123
box-shadow: none;
2124
background-color: transparent;
2125
}
2126
separator {
2128
// margin: 4px 0;
2129
}
2130
list separator {
2132
// margin: 0;
2133
}
2134
}
2135
.osd &,
2137
&.touch-selection,
2138
&.magnifier {
2139
// @extend %osd;
2140
}
2141
button {
2143
@extend %button-outlined;
2144
}
2145
frame,
2147
.frame {
2148
border: 1px solid divider($on-surface);
2149
box-shadow: none;
2150
background-color: transparent;
2151
}
2152
.linked:not(.vertical) > entry:not(:only-child) {
2154
// border-radius: $corner-radius $corner-radius 0 0;
2155
}
2156
}
2157
/**
2159
* Notebooks
2160
*/
2161
notebook {
2163
&:focus:focus-visible > header > tabs > tab:checked {
2164
background-color: overlay("focus", $primary);
2165
}
2166
> header {
2168
&.top {
2169
box-shadow: inset 0 -1px divider($on-surface);
2170
> tabs {
2172
> tab {
2173
box-shadow: inset 0 -2px transparent;
2174
&:checked {
2176
box-shadow: inset 0 -2px $primary;
2177
}
2178
}
2179
}
2180
}
2181
&.bottom {
2183
box-shadow: inset 0 1px divider($on-surface);
2184
> tabs {
2186
> tab {
2187
box-shadow: inset 0 2px transparent;
2188
&:checked {
2190
box-shadow: inset 0 2px $primary;
2191
}
2192
}
2193
}
2194
}
2195
&.left {
2197
box-shadow: inset -1px 0 divider($on-surface);
2198
> tabs {
2200
> tab {
2201
box-shadow: inset -2px 0 transparent;
2202
&:checked {
2204
box-shadow: inset -2px 0 $primary;
2205
}
2206
}
2207
}
2208
}
2209
&.right {
2211
box-shadow: inset 1px 0 divider($on-surface);
2212
> tabs {
2214
> tab {
2215
box-shadow: inset 2px 0 transparent;
2216
&:checked {
2218
box-shadow: inset 2px 0 $primary;
2219
}
2220
}
2221
}
2222
}
2223
&.top > tabs > arrow {
2225
@extend %notebook_vert_arrows;
2226
}
2227
&.bottom > tabs > arrow {
2229
@extend %notebook_vert_arrows;
2230
}
2231
@at-root %notebook_vert_arrows {
2233
&.down {
2234
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2235
}
2236
&.up {
2238
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2239
}
2240
}
2241
&.left > tabs > arrow {
2243
@extend %notebook_horz_arrows;
2244
}
2245
&.right > tabs > arrow {
2247
@extend %notebook_horz_arrows;
2248
}
2249
@at-root %notebook_horz_arrows {
2251
&.down {
2252
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2253
}
2254
&.up {
2256
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2257
}
2258
}
2259
> tabs > arrow {
2261
min-height: 16px;
2262
min-width: 16px;
2263
padding: 4px;
2264
border-radius: 0;
2265
color: hint($on-surface);
2266
@extend %ripple;
2267
@include ink-color($on-surface, $hover-alt: true);
2268
&:disabled {
2270
color: disabled-hint($on-surface);
2271
}
2272
}
2273
> tabs > tab {
2275
@extend %ripple;
2276
@include ink-color($on-surface, $hover-alt: true);
2277
min-height: $small-size;
2278
min-width: $small-size;
2279
padding: $container-padding 12px;
2280
color: hint($on-surface);
2281
font-weight: 500;
2282
&:hover {
2284
// background-color: overlay("hover-alt", $on-surface);
2285
}
2286
&:active {
2288
// background-image: radial-gradient(circle, overlay("pressed", $on-surface) 10%, transparent 10%);
2289
}
2290
&:disabled {
2292
color: disabled-hint($on-surface);
2293
}
2294
&:checked {
2296
@include ink-color($primary, $hover-alt: true);
2297
color: $primary;
2298
&:hover {
2300
// background-color: overlay("hover-alt", $primary);
2301
}
2302
&:active {
2304
// background-image: radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 10%);
2305
}
2306
&:disabled {
2308
color: disabled-hint($on-surface);
2309
}
2310
&.reorderable-page {
2312
// border-color: divider($on-surface);
2313
// background-color: $surface-z1;
2314
}
2315
}
2316
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2318
> box {
2319
transition: background-color $duration $ease-out;
2320
margin: -$container-padding -12px;
2321
padding: $container-padding 12px;
2322
&:drop(active) {
2324
background-color: overlay("hover", $on-surface);
2325
}
2326
}
2327
// colors the button like the label, overridden otherwise
2329
button.flat {
2330
@extend %button-small;
2331
&:last-child {
2333
margin-left: $container-padding;
2334
margin-right: $container-padding - 12px;
2335
}
2336
&:first-child {
2338
margin-left: $container-padding - 12px;
2339
margin-right: $container-padding;
2340
}
2341
}
2342
}
2343
}
2344
}
2345
/**
2347
* Scrollbars
2348
*/
2349
scrollbar {
2351
$_slider_min_length: 24px;
2352
transition: $transition;
2354
background-clip: padding-box;
2355
// background-color: $surface-z1;
2356
// scrollbar border
2358
&.top { border-bottom: 1px solid divider($on-surface); }
2359
&.bottom { border-top: 1px solid divider($on-surface); }
2360
&.left { border-right: 1px solid divider($on-surface); }
2361
&.right { border-left: 1px solid divider($on-surface); }
2362
// slider
2364
> range > trough > slider {
2365
transition: background-color $duration $ease-out;
2366
min-width: 10px;
2367
min-height: 10px;
2368
border: 3px solid transparent;
2369
border-radius: $circular-radius;
2370
background-clip: padding-box;
2371
background-color: scrollbar-thumb($on-surface);
2372
&:hover {
2374
background-color: scrollbar-thumb($on-surface, "hover");
2375
}
2376
&:active {
2378
background-color: scrollbar-thumb($on-surface, "pressed");
2379
}
2380
&:disabled {
2382
background-color: scrollbar-thumb($on-surface, "disabled");
2383
}
2384
}
2385
&.horizontal > range > trough > slider {
2387
min-width: $_slider_min_length;
2388
}
2389
&.vertical > range > trough > slider {
2391
min-height: $_slider_min_length;
2392
}
2393
> range.fine-tune {
2395
> trough > slider {
2396
min-width: 4px;
2397
min-height: 4px;
2398
}
2399
&.horizontal > trough > slider {
2401
margin: 3px 0;
2402
}
2403
&.vertical > trough > slider {
2405
margin: 0 3px;
2406
}
2407
}
2408
&.overlay-indicator {
2410
> range:not(.fine-tune) > trough > slider {
2411
transition-property: background-color, min-height, min-width;
2412
}
2413
&:not(.dragging):not(.hovering) {
2415
border-color: transparent;
2416
background-color: transparent;
2417
> range > trough > slider {
2419
min-width: 4px;
2420
min-height: 4px;
2421
margin: 3px - 1px;
2422
border: 1px solid rgba($surface-z1, 0.3);
2423
}
2424
&.horizontal > range > trough > slider {
2426
min-width: $_slider_min_length;
2427
}
2428
&.vertical > range > trough > slider {
2430
min-height: $_slider_min_length;
2431
}
2432
}
2433
&.dragging,
2435
&.hovering {
2436
background-color: $surface-z8;
2437
}
2438
}
2439
}
2440
/**
2442
* Switch
2443
*/
2444
switch {
2446
transition: all $duration $ease-out;
2447
margin: $container-padding 0;
2448
padding: 0 2px;
2449
border: 5px solid transparent;
2450
border-radius: $circular-radius;
2451
background-color: stroke($on-surface);
2452
background-clip: padding-box;
2453
font-size: 0;
2454
&:checked {
2456
background-color: rgba($primary, .5);
2457
}
2458
&:disabled {
2460
opacity: .5;
2461
}
2462
// hide on/off icons for >=3.24.5
2464
> image {
2465
margin: -8px;
2466
-gtk-icon-transform: scale(0);
2467
}
2468
> slider {
2470
transition: all $duration $ease-out;
2471
min-width: 20px;
2472
min-height: 20px;
2473
margin: -3px -2px;
2474
border-radius: $circular-radius;
2475
box-shadow:
2476
0 0 0 10px transparent,
2477
0 0 0 -10px overlay("pressed", $on-surface),
2478
$shadow-z1;
2479
background-color: $surface-switch-thumb;
2480
}
2481
&:hover > slider {
2483
box-shadow:
2484
0 0 0 10px overlay("hover", $on-surface),
2485
0 0 0 -10px overlay("pressed", $on-surface),
2486
$shadow-z1;
2487
}
2488
&:focus > slider {
2490
box-shadow:
2491
0 0 0 10px overlay("focus", $on-surface),
2492
0 0 0 -10px overlay("pressed", $on-surface),
2493
$shadow-z1;
2494
}
2495
&:active > slider {
2497
box-shadow:
2498
0 0 0 10px overlay("hover", $on-surface),
2499
0 0 0 10px overlay("pressed", $on-surface),
2500
$shadow-z1;
2501
}
2502
&:checked > slider {
2504
background-color: $primary;
2505
}
2506
&:checked:hover > slider {
2508
box-shadow:
2509
0 0 0 10px overlay("hover", $primary),
2510
0 0 0 -10px overlay("pressed", $primary),
2511
$shadow-z1;
2512
}
2513
&:checked:focus > slider {
2515
box-shadow:
2516
0 0 0 10px overlay("focus", $primary),
2517
0 0 0 -10px overlay("pressed", $primary),
2518
$shadow-z1;
2519
}
2520
&:checked:active > slider {
2522
box-shadow:
2523
0 0 0 10px overlay("hover", $primary),
2524
0 0 0 10px overlay("pressed", $primary),
2525
$shadow-z1;
2526
}
2527
row:selected & {
2529
}
2530
}
2531
/**
2533
* Check and Radio items
2534
*/
2535
// draw regular check and radio items using our PNG assets
2537
// all assets are rendered from assets.svg. never add pngs directly
2538
// selection-mode
2540
.view.content-view.check:not(list),
2541
.content-view:not(list) .tile check {
2542
min-height: 40px;
2543
min-width: 40px;
2544
margin: 0;
2545
padding: 0;
2546
background-color: transparent;
2547
background-image: none;
2548
-gtk-icon-shadow: $icon-shadow-z2;
2549
&:hover,
2551
&:active {
2552
-gtk-icon-shadow: $icon-shadow-z4;
2553
}
2554
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2556
&#{$class} {
2557
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2558
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2560
}
2561
}
2562
}
2563
checkbutton,
2565
radiobutton {
2566
border-spacing: 4px;
2567
&.text-button {
2569
padding: 4px;
2570
}
2571
}
2572
$check-radio-size: 40px;
2574
check,
2576
radio {
2577
min-height: 24px;
2578
min-width: 24px;
2579
margin: -($check-radio-size - 24px) / 2;
2580
padding: ($check-radio-size - 24px) / 2;
2581
border-radius: $circular-radius;
2582
color: hint($on-surface);
2583
@extend %ripple;
2584
@include ink-color($on-surface);
2585
&:checked,
2587
&:indeterminate {
2588
color: $primary;
2589
@include ink-color($primary);
2590
}
2591
&:disabled {
2593
color: disabled-hint($on-surface);
2594
}
2595
}
2596
%check,
2598
check {
2599
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2600
&:checked {
2602
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2603
}
2604
&:indeterminate {
2606
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2607
}
2608
}
2609
%radio,
2611
radio {
2612
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2613
&:checked {
2615
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2616
}
2617
&:indeterminate {
2619
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2620
}
2621
border-image-slice: $check-radio-size / 2px;
2623
border-image-width: $check-radio-size / 2;
2624
$radio-indicator-size: 10px / $check-radio-size / 2;
2626
border-image-source: radial-gradient(circle, $primary 0%, transparent 0%);
2628
&:checked:not(:indeterminate) {
2630
border-image-source: radial-gradient(circle, $primary 4.5px, transparent 5px);
2631
&:disabled {
2633
border-image-source: radial-gradient(circle, disabled-hint($on-surface) 4.5px, transparent 5px);
2634
}
2635
}
2636
}
2637
%small_check,
2639
popover.menu modelbutton check {
2640
min-height: 16px;
2641
min-width: 16px;
2642
border-radius: $corner-radius;
2643
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2644
&:checked {
2646
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2647
}
2648
&:indeterminate {
2650
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2651
}
2652
}
2653
%small_radio,
2655
popover.menu modelbutton radio {
2656
min-height: 16px;
2657
min-width: 16px;
2658
border-image: none;
2659
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2660
&:checked {
2662
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2663
}
2664
&:indeterminate {
2666
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2667
}
2668
}
2669
// ANIMATION:
2671
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2672
// the transformation is set on the active state and it get reset on the checked state.
2673
radio:not(:checked):active {
2674
// -gtk-icon-transform: scale(0);
2675
}
2676
// Otherwise, treeview.view styling will be applied...
2678
treeview.view check,
2679
treeview.view radio {
2680
padding: 0;
2681
color: hint($on-surface);
2682
&:checked,
2684
&:indeterminate {
2685
color: $primary;
2686
}
2687
&:disabled {
2689
color: disabled-hint($on-surface);
2690
}
2691
&,
2693
&:hover,
2694
&:selected,
2695
&:selected:hover {
2696
background-color: transparent;
2697
}
2698
}
2699
treeview.view radio:checked {
2701
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2702
border-image: none;
2703
}
2704
/**
2706
* GtkScale
2707
*/
2708
scale {
2710
// sizing
2711
$_marks_length: 8px;
2712
$_marks_distance: 7px;
2713
$trough_size: 2px;
2715
$finetune_trough_size: 4px;
2716
$slider_size: 32px;
2718
$slider_margin: -($slider_size - $trough_size) / 2;
2720
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2721
$color_slider_margin: -($slider_size) * 3 / 4;
2723
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2724
min-height: $trough_size;
2726
min-width: $trough_size;
2727
&.horizontal {
2729
padding: ($medium-size - $trough_size) / 2 12px;
2730
}
2731
&.vertical {
2733
padding: 12px ($medium-size - $trough_size) / 2;
2734
}
2735
// click-and-hold the slider to activate
2737
&.fine-tune {
2738
&.horizontal {
2739
min-height: $finetune_trough_size;
2740
padding-top: ($medium-size - $finetune_trough_size) / 2;
2741
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2742
}
2743
&.vertical {
2745
min-width: $finetune_trough_size;
2746
padding-left: ($medium-size - $finetune_trough_size) / 2;
2747
padding-right: ($medium-size - $finetune_trough_size) / 2;
2748
}
2749
// to make the trough grow in fine-tune mode
2751
> trough > slider {
2752
margin: $finetune_slider_margin;
2753
}
2754
}
2755
// the backing bit
2757
> trough {
2758
transition: background-color $duration $ease-out;
2759
background-color: stroke($on-surface);
2760
&:disabled {
2762
background-color: disabled-stroke($on-surface);
2763
}
2764
// the colored part of the backing bit
2766
> highlight {
2767
transition: background-image $duration $ease-out;
2768
background-image: image($primary);
2769
&:disabled {
2771
background-color: $surface-z0;
2772
background-image: image(disabled-hint($on-surface));
2773
}
2774
}
2775
// this is another differently styled part of the backing bit, the most relevant use case is for example
2777
// in media player to indicate how much video stream as been cached
2778
> fill {
2779
transition: background-color $duration $ease-out;
2780
background-color: stroke($on-surface);
2781
&:disabled {
2783
background-color: transparent;
2784
}
2785
}
2786
> slider {
2788
transition: background-color $duration $ease-out,
2789
background-size $ripple-fade-out-duration $ease-out,
2790
background-image $ripple-fade-out-opacity-duration $ease-out;
2791
min-width: $slider_size;
2792
min-height: $slider_size;
2793
// the slider is inside the trough, so to have make it bigger there's a negative margin
2794
margin: $slider_margin;
2795
border-radius: 50%;
2796
background-repeat: no-repeat;
2797
background-position: center;
2798
background-size: auto, 1000% 1000%;
2799
color: $primary;
2800
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2802
&#{$class} {
2803
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2804
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2806
radial-gradient(circle, transparent 10%, transparent 10%);
2807
}
2808
}
2809
&:hover {
2811
background-color: overlay("hover", $primary);
2812
}
2813
&:focus {
2815
background-color: overlay("focus", $primary);
2816
}
2817
&:active {
2819
$_url: 'assets/scale-slider#{$asset-suffix}';
2820
transition: background-color $duration $ease-out,
2822
background-size 0ms,
2823
background-image 0ms;
2824
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2825
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2826
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 10%);
2827
background-size: auto, 0% 0%;
2828
}
2829
}
2830
}
2831
> marks,
2833
> value {
2834
color: hint($on-surface);
2835
}
2836
> value {
2838
font-feature-settings: "tnum";
2839
}
2840
indicator {
2842
background-color: stroke($on-surface);
2843
}
2844
//marks margins
2846
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2847
(horizontal, bottom, bottom, top),
2848
(vertical, top, left, right),
2849
(vertical, bottom, right, left) {
2850
&.#{$scale_orient} > marks {
2851
&.#{$marks_class} {
2852
margin-#{$marks_margin}: $_marks_distance;
2853
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2854
}
2855
}
2856
&.#{$scale_orient}.fine-tune > marks {
2858
&.#{$marks_class} {
2859
margin-#{$marks_margin}: $_marks_distance - 1px;
2860
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2861
}
2862
}
2863
}
2864
&.horizontal {
2866
indicator {
2867
min-height: $_marks_length;
2868
min-width: 1px;
2869
}
2870
}
2871
&.vertical {
2873
indicator {
2874
min-height: 1px;
2875
min-width: $_marks_length;
2876
}
2877
}
2878
// *WARNING* scale with marks madness following
2880
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2882
@each $marks_class, $marks_infix in (
2883
".marks-before:not(.marks-after)": "-marks-before",
2884
".marks-after:not(.marks-before)": "-marks-after"
2885
) {
2886
&#{$dir_class}#{$marks_class} > trough > slider {
2887
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2888
&#{$state_class} {
2889
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2890
background-image:
2892
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2893
radial-gradient(circle, transparent 10%, transparent 10%);
2894
}
2895
}
2896
&:active {
2898
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
2899
background-image:
2901
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2902
radial-gradient(circle, overlay("pressed", $primary) 10%, transparent 10%);
2903
}
2904
}
2905
}
2906
}
2907
&.color {
2909
min-height: 0;
2910
min-width: 0;
2911
&.horizontal {
2913
// specificity bump
2914
&:dir(ltr),
2915
&:dir(rtl) {
2916
padding: 0 0 12px 0;
2917
slider {
2919
margin-bottom: $color_slider_margin;
2920
margin-top: $color_marks_slider_margin;
2921
}
2922
}
2923
}
2924
&.vertical {
2926
&:dir(ltr) {
2927
padding: 0 0 0 12px;
2928
slider {
2930
margin-left: $color_slider_margin;
2931
margin-right: $color_marks_slider_margin;
2932
}
2933
}
2934
&:dir(rtl) {
2936
padding: 0 12px 0 0;
2937
slider {
2939
margin-right: $color_slider_margin;
2940
margin-left: $color_marks_slider_margin;
2941
}
2942
}
2943
}
2944
}
2945
}
2946
/**
2948
* Progress bars
2949
*/
2950
progressbar {
2952
// FIXME: insensitive state missing and some other state should be set probably
2953
color: hint($on-surface);
2954
font-size: smaller;
2955
font-feature-settings: "tnum";
2956
> trough {
2958
background-color: disabled-stroke($on-surface);
2959
> progress {
2961
background-color: $primary;
2962
}
2963
}
2964
// sizing
2966
&.horizontal > trough {
2967
min-width: 150px;
2968
&,
2970
> progress {
2971
min-height: $bar-size;
2972
}
2973
}
2974
&.vertical > trough {
2976
min-height: 80px;
2977
&,
2979
> progress {
2980
min-width: $bar-size;
2981
}
2982
}
2983
// progressbar.osd used for epiphany page loading progress
2985
&.osd {
2986
// min-width: $bar-size;
2987
// min-height: $bar-size;
2988
// background-color: transparent;
2989
> trough {
2991
// background-color: transparent;
2992
> progress {
2994
// background-color: $primary;
2995
}
2996
}
2997
}
2998
// makes the progress indicator disappear, when the fraction is 0
3000
> trough.empty > progress {
3001
all: unset;
3002
}
3003
}
3004
/**
3006
* Level Bar
3007
*/
3008
levelbar {
3010
&.horizontal {
3011
> trough > block {
3012
min-height: $bar-size;
3013
}
3014
&.discrete > trough > block {
3016
min-width: $medium-size;
3017
&:not(:last-child) {
3019
margin-right: 2px;
3020
}
3021
}
3022
}
3023
&.vertical {
3025
> trough > block {
3026
min-width: $bar-size;
3027
}
3028
&.discrete > trough > block {
3030
min-height: $medium-size;
3031
&:not(:last-child) {
3033
margin-bottom: 2px;
3034
}
3035
}
3036
}
3037
> trough {
3039
}
3040
> trough > block {
3042
&.low {
3043
background-color: $warning;
3044
}
3045
&.high,
3047
&:not(.empty) {
3048
background-color: $primary;
3049
}
3050
&.full {
3052
background-color: $success;
3053
}
3054
&.empty {
3056
background-color: disabled-stroke($on-surface);
3057
}
3058
}
3059
}
3060
/**
3062
* Print dialog
3063
*/
3064
window.dialog.print {
3066
paper {
3067
// padding: 0;
3068
// border: 1px solid divider($on-surface);
3069
border-radius: $corner-radius;
3070
box-shadow: $shadow-z1;
3071
background-color: $surface-z1;
3072
color: $on-surface;
3073
}
3074
.dialog-action-box {
3076
margin: 12px;
3077
}
3078
}
3079
/**
3081
* Frames
3082
*/
3083
frame,
3085
.frame {
3086
// border: 1px solid divider($on-surface);
3087
border-radius: $corner-radius;
3088
box-shadow: $shadow-z1;
3089
background-color: $surface-z1;
3090
color: $on-surface;
3091
button {
3093
@extend %button-outlined;
3094
}
3095
}
3096
frame > label {
3098
margin: 4px;
3099
}
3100
statusbar {
3102
padding: 6px 10px;
3103
// border-top: 1px solid divider($on-surface);
3104
}
3105
actionbar > revealer > box {
3107
padding: $container-padding;
3108
border-spacing: $container-padding;
3109
border-top: 1px solid divider($on-surface);
3110
// background-clip: border-box;
3111
button:not(.suggested-action):not(.destructive-action) {
3113
@extend %button-flat;
3114
}
3115
.linked:not(.vertical) > entry:not(:only-child) {
3117
border-radius: $corner-radius $corner-radius 0 0;
3118
}
3119
}
3120
scrolledwindow {
3122
// This is used when content is touch-dragged past boundaries.
3123
// draws a box on top of the content, the size changes programmatically.
3124
@at-root overshoot {
3125
&.top { @include overshoot(top); }
3126
&.bottom { @include overshoot(bottom); }
3128
&.left { @include overshoot(left); }
3130
&.right { @include overshoot(right); }
3132
}
3133
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3135
@at-root undershoot {
3136
// &.top { @include undershoot(top); }
3137
// &.bottom { @include undershoot(bottom); }
3139
// &.left { @include undershoot(left); }
3141
// &.right { @include undershoot(right); }
3143
}
3144
// the small square between two scrollbars
3146
@at-root junction {
3147
border-style: solid none none solid;
3148
border-width: 1px;
3149
border-color: divider($on-surface);
3150
// background-color: $surface-z1;
3151
&:dir(rtl) {
3153
border-style: solid solid none none;
3154
}
3155
}
3156
}
3157
// vbox and hbox separators
3159
separator {
3160
min-width: 1px;
3161
min-height: 1px;
3162
background-color: divider($on-surface);
3163
}
3164
%hide_separators {
3166
min-width: 0;
3167
min-height: 0;
3168
background-color: transparent;
3169
}
3170
/**
3172
* Lists
3173
*/
3174
listview,
3176
list {
3177
// background-color: $surface-z1;
3178
// color: $on-surface;
3179
> row {
3181
padding: 2px;
3182
&.expander {
3184
padding: 0;
3185
.row-header {
3187
padding: 2px;
3188
}
3189
}
3190
}
3191
&.separators:not(.horizontal) > row:not(:first-child) {
3193
border-top: 1px solid divider($on-surface);
3194
}
3195
&.separators.horizontal > row:not(:first-child) {
3197
border-left: 1px solid divider($on-surface);
3198
}
3199
}
3200
row {
3202
background-clip: padding-box;
3203
&.activatable {
3205
@extend %ripple;
3206
@include ink-color($on-surface, $hover-alt: true);
3207
@include list-item;
3208
// this is for indicathing which row generated a popover
3210
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3211
&.has-open-popup {
3212
background-color: overlay("activated", $on-surface);
3213
}
3214
}
3215
&:selected {
3217
background-color: $overlay-selected;
3218
@include ink-color($primary, $hover-alt: true, $on: $overlay-selected);
3220
&.has-open-popup {
3222
background-color: overlay("activated", $primary, $on: $overlay-selected);
3223
}
3224
}
3225
}
3226
listview {
3228
> row {
3229
@extend %ripple;
3230
@include ink-color($on-surface, $hover-alt: true);
3231
@include list-item;
3232
}
3233
&:selected {
3235
background-color: $overlay-selected;
3236
@include ink-color($primary, $hover-alt: true, $on: $overlay-selected);
3238
}
3239
}
3240
columnview {
3242
// move padding to child cells
3243
> listview > row {
3244
padding: 0;
3245
// align horizontal sizing with header buttons
3247
> cell {
3248
min-height: 24px;
3249
padding: 4px 6px;
3250
&:not(:last-child) {
3252
border-right: 1px solid transparent;
3253
}
3254
}
3255
}
3256
// make column separators visible when :show-column-separators is true
3258
&.column-separators > listview > row > cell {
3259
border-right-color: divider($on-surface);
3260
}
3261
// shrink vertically for .data-table
3263
&.data-table > listview > row > cell {
3264
padding-top: 2px;
3265
padding-bottom: 2px;
3266
}
3267
}
3268
// rich lists usually containing other widgets than just labels/text
3270
.rich-list {
3271
> row {
3272
padding: 12px;
3273
min-height: $medium-size;
3274
> box {
3276
border-spacing: 12px;
3277
}
3278
}
3279
}
3280
/**
3282
* App Notifications
3283
*/
3284
.app-notification {
3286
@extend %toolbar-osd;
3287
margin: 8px;
3288
border-style: none;
3289
button {
3291
@extend %button-flat;
3292
&.text-button:not(:disabled) {
3294
color: $primary;
3295
@include ink-color($primary);
3296
}
3297
}
3298
}
3299
/**
3301
* Expanders
3302
*/
3303
expander {
3305
transition: all $duration $ease-out;
3306
min-width: 16px;
3307
min-height: 16px;
3308
padding: 4px;
3309
border-radius: $circular-radius;
3310
color: hint($on-surface);
3311
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3312
@extend %ripple;
3314
@include ink-color($on-surface);
3315
&:disabled {
3317
color: disabled-hint($on-surface);
3318
}
3319
&:checked {
3321
&:dir(ltr) {
3322
-gtk-icon-transform: rotate(-180deg);
3323
}
3324
&:dir(rtl) {
3326
-gtk-icon-transform: rotate(180deg);
3327
}
3328
}
3329
}
3330
indent {
3332
min-width: 16px;
3333
min-height: 16px;
3334
padding: 4px;
3335
}
3336
expander-widget {
3338
&:focus > box > title > expander {
3339
box-shadow: inset 0 0 0 9999px overlay("focus", $on-surface);
3340
}
3341
> box > title:drop(active) > expander,
3343
> box > title:hover > expander {
3344
box-shadow: inset 0 0 0 9999px overlay("hover", $on-surface);
3345
}
3346
> box > title:active > expander {
3348
transition-duration: $ripple-active-transition-duration;
3349
animation: ripple $ripple-fade-in-duration $ease-out forwards;
3350
background-size: 0% 0%;
3351
background-image: radial-gradient(circle, overlay("pressed", $on-surface) 10%, transparent 10%);
3352
}
3353
}
3354
/**
3356
* Calendar
3357
*/
3358
calendar {
3360
// border: 1px solid divider($on-surface);
3361
border-radius: $corner-radius;
3362
box-shadow: $shadow-z1;
3363
background-color: $surface-z1;
3364
color: $on-surface;
3365
&:disabled {
3367
color: disabled($on-surface);
3368
}
3369
> header {
3371
padding: 4px;
3372
border-spacing: 4px;
3373
border-bottom: 1px solid divider($on-surface);
3374
> button.image-button {
3376
padding: 0;
3377
min-width: 28px;
3378
min-height: 28px;
3379
border-radius: $circular-radius;
3380
background-color: transparent;
3381
color: hint($on-surface);
3382
@include ink-color($on-surface, $button-style: "flat");
3383
&:disabled {
3385
color: disabled-hint($on-surface);
3386
}
3387
}
3388
}
3389
> grid {
3391
padding: 4px;
3392
border-spacing: 4px;
3393
> label {
3395
// padding: 4px;
3396
padding: 0;
3397
min-width: 28px;
3398
min-height: 28px;
3399
border-radius: $circular-radius;
3400
}
3401
> label.day-name,
3403
> label.week-number {
3404
color: hint($on-surface);
3405
font-weight: 500;
3406
}
3407
> label.day-number {
3409
@extend %ripple;
3410
@include ink-color($on-surface);
3411
&.today {
3413
box-shadow: inset 0 0 0 1px hint($on-surface);
3414
}
3415
&.other-month {
3417
color: disabled-hint($on-surface);
3418
}
3419
&:selected {
3421
background-color: $overlay-selected;
3422
box-shadow: inset 0 0 0 1px transparent;
3423
@include ink-color($primary, $on: $overlay-selected);
3424
}
3425
}
3426
}
3427
}
3428
/**
3430
* Dialogs
3431
*/
3432
window.dialog.message { // Message Dialog styling
3434
&.csd.background {
3435
min-width: 280px;
3436
border-radius: $corner-radius; // rounded bottom border styling for csd version
3437
background-color: $surface-z8;
3438
}
3439
> .titlebar {
3441
min-height: 24px;
3442
box-shadow: inset 0 1px highlight($surface-z8);
3443
background-color: transparent;
3444
color: $on-surface;
3445
&:backdrop {
3447
background-color: transparent;
3448
color: hint($on-surface);
3449
}
3450
}
3451
> box.dialog-vbox.vertical {
3453
border-spacing: 20px;
3454
> box.vertical > box.horizontal {
3456
margin: 0 24px - 30px;
3457
}
3458
}
3459
label.title {
3461
font-weight: 500;
3462
font-size: pt(20px);
3463
letter-spacing: pt(.15px);
3464
}
3465
// Hint text
3467
label.title + label {
3468
color: hint($on-surface);
3469
}
3470
list,
3472
.view {
3473
background-color: transparent;
3474
}
3475
.dialog-action-area > button {
3477
@extend %button-flat;
3478
&:not(:disabled) {
3480
color: $primary;
3481
@include ink-color($primary);
3482
}
3483
&.suggested-action:not(:disabled) {
3485
background-color: transparent;
3486
// color: $primary;
3487
// @include ink-color($primary);
3488
}
3489
&.destructive-action:not(:disabled) {
3491
background-color: transparent;
3492
color: $error;
3493
@include ink-color($error);
3494
}
3495
}
3496
}
3497
.dialog-action-area {
3499
// margin-top: -$container-padding;
3500
padding: $container-padding;
3501
border-spacing: $container-padding;
3502
}
3503
filechooser {
3505
.dialog-action-box {
3506
border-top: 1px solid divider($on-surface);
3507
}
3508
#pathbarbox {
3510
border-bottom: 1px solid divider($on-surface);
3511
// background-color: $surface-z0;
3512
> stack > box > button { // The new folder button
3514
@extend %button-flat;
3515
border-radius: $circular-radius;
3517
}
3518
}
3519
}
3520
filechooserbutton > button > box {
3522
border-spacing: 6px;
3523
}
3524
filechooserbutton:drop(active) {
3526
// box-shadow: none;
3527
}
3528
/**
3530
* Sidebar
3531
*/
3532
.sidebar {
3534
border-style: none;
3535
&:not(separator) {
3537
@at-root %sidebar_left,
3538
&:dir(ltr),
3539
&.left,
3540
&.left:dir(rtl) {
3541
border-right: 1px solid divider($on-surface);
3542
border-left-style: none;
3543
}
3544
@at-root %sidebar_right,
3546
&:dir(rtl),
3547
&.right {
3548
border-left: 1px solid divider($on-surface);
3549
border-right-style: none;
3550
}
3551
}
3552
list {
3554
// background-color: transparent;
3555
}
3556
paned & {
3558
&:dir(rtl):not(:dir(ltr)),
3559
&:dir(ltr):not(:dir(rtl)) {
3560
border-style: none;
3561
}
3562
}
3563
}
3564
stacksidebar.sidebar {
3566
list {
3567
padding: 4px;
3568
}
3569
list.separators:not(.horizontal) > row:not(:first-child) {
3571
border-top-style: none;
3572
}
3573
row {
3575
min-height: 32px;
3576
padding: 0 8px - 6px;
3577
border-radius: $corner-radius;
3578
color: hint($on-surface);
3579
font-weight: 500;
3580
&:selected {
3582
background-color: overlay("activated", $primary);
3583
color: $primary;
3584
@include ink-color($primary, $on: overlay("activated", $primary));
3585
}
3586
+ row {
3588
margin-top: 4px;
3589
}
3590
> label {
3592
padding-left: 6px;
3593
padding-right: 6px;
3594
}
3595
&.needs-attention > label {
3597
@extend %needs-attention;
3598
}
3599
}
3600
}
3601
separator.sidebar {
3603
&.selection-mode,
3604
.selection-mode & {
3605
// background-color: divider($on-surface);
3606
}
3607
}
3608
/**
3610
* File chooser
3611
*/
3612
// dim the sidebar icons, see bug #786613 for details on this oddity
3614
row image.sidebar-icon {
3615
transition: color $duration $ease-out;
3616
color: hint($on-surface);
3617
&:disabled {
3619
color: disabled-hint($on-surface);
3620
}
3621
}
3622
placessidebar.sidebar {
3624
list {
3625
padding: 4px 0;
3626
> separator {
3628
margin: 4px 0;
3629
}
3630
}
3631
row {
3633
// Needs overriding of the GtkListBoxRow padding
3634
min-height: 32px;
3635
margin: 0 4px; // Remove unwanted hard-coded vertical margins with -1px
3636
padding: 0;
3637
border-radius: $corner-radius;
3638
color: hint($on-surface);
3639
font-weight: 500;
3640
// Using margins/padding directly in the SidebarRow
3642
// will make the animation of the new bookmark row jump
3643
> revealer {
3644
padding: 0 8px;
3645
}
3646
&:selected {
3648
background-color: overlay("activated", $primary);
3649
color: $primary;
3650
@include ink-color($primary, $on: overlay("activated", $primary));
3651
image.sidebar-icon {
3653
color: $primary;
3654
}
3655
}
3656
&:disabled {
3658
color: disabled($on-surface);
3659
}
3660
image.sidebar-icon {
3662
&:dir(ltr) {
3663
padding-right: 8px;
3664
}
3665
&:dir(rtl) {
3667
padding-left: 8px;
3668
}
3669
}
3670
label.sidebar-label {
3672
&:dir(ltr) {
3673
padding-right: 2px;
3674
}
3675
&:dir(rtl) {
3677
padding-left: 2px;
3678
}
3679
}
3680
@at-root button.sidebar-button {
3682
@extend %button-flat-basic;
3683
@extend %button-small;
3684
}
3685
&.sidebar-placeholder-row {
3687
background-color: overlay("hover", $on-surface);
3688
}
3689
&.sidebar-new-bookmark-row {
3691
color: $primary;
3692
image.sidebar-icon {
3694
color: $primary;
3695
}
3696
}
3697
}
3698
}
3699
placesview {
3701
.server-list-button {
3702
> image {
3703
-gtk-icon-transform: rotate(0turn);
3704
}
3705
&:checked > image {
3707
-gtk-icon-transform: rotate(-0.5turn);
3708
}
3709
}
3710
> actionbar > revealer > box > box {
3712
border-spacing: $container-padding;
3713
}
3714
// this selects the "connect to server" label
3716
> actionbar > revealer > box > box > label {
3717
padding-left: 8px;
3718
padding-right: 8px;
3719
}
3720
}
3721
/**
3723
* Paned
3724
*/
3725
paned {
3727
> separator {
3728
background-clip: content-box;
3729
// -gtk-icon-source: none; // defeats the ugly default handle decoration
3730
&.wide {
3732
min-width: 4px;
3733
min-height: 4px;
3734
border: 1px solid divider($on-surface);
3735
background-color: transparent;
3736
}
3737
}
3738
&.horizontal > separator {
3740
&:not(.wide) {
3741
margin: 0 -4px;
3742
padding: 0 4px;
3743
}
3744
&.wide {
3746
border-style: none solid;
3747
}
3748
}
3749
&.vertical > separator {
3751
&:not(.wide) {
3752
margin: -4px 0;
3753
padding: 4px 0;
3754
}
3755
&.wide {
3757
border-style: solid none;
3758
}
3759
}
3760
}
3761
/**
3763
* GtkVideo
3764
*/
3765
video {
3767
background-color: black;
3768
image.osd {
3770
min-width: 64px;
3771
min-height: 64px;
3772
border-radius: 32px;
3773
background-color: $scrim;
3774
color: $on-scrim;
3775
}
3776
controls.osd {
3778
padding: 4px;
3779
background-image:
3780
linear-gradient(
3781
to bottom,
3782
transparent,
3783
rgba(black, .1) 30%,
3784
rgba(black, .2) 50%,
3785
rgba(black, .4)
3786
);
3787
color: on(black);
3788
button {
3790
background-color: transparent;
3791
color: hint(on(black));
3792
@include ink-color(on(black));
3793
}
3794
}
3795
}
3796
/**
3798
* GtkInfoBar
3799
*/
3800
infobar {
3802
> revealer > box {
3803
padding: 8px;
3804
border-spacing: 12px;
3805
}
3806
&.action:hover > revealer > box {
3808
background-image: image(overlay("hover", $on-surface));
3809
}
3810
&.info > revealer > box,
3812
&.question > revealer > box {
3813
border-bottom: 1px solid divider($on-surface);
3814
// background-color: $surface-z1;
3815
button {
3817
@extend %button-flat;
3818
&.text-button:not(:disabled) {
3820
color: $primary;
3821
@include ink-color($primary);
3822
}
3823
}
3824
}
3825
&.warning > revealer > box {
3827
background-color: $warning;
3828
color: $on-warning;
3829
button.flat {
3831
color: $on-warning;
3832
@include ink-color($on-warning);
3833
}
3834
selection {
3836
}
3837
link {
3839
color: $on-warning;
3840
}
3841
}
3842
&.error > revealer > box {
3844
background-color: $error;
3845
color: $on-error;
3846
button.flat {
3848
color: $on-error;
3849
@include ink-color($on-error);
3850
}
3851
selection {
3853
}
3854
link {
3856
color: $on-error;
3857
}
3858
}
3859
// Remove ugly hard-coded padding
3861
button label {
3862
// margin: 0 -4px;
3863
}
3864
}
3865
/**
3867
* Tooltips
3868
*/
3869
tooltip {
3871
&.background {
3872
// background-color needs to be set this way otherwise it gets drawn twice
3873
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3874
background-color: $tooltip;
3875
color: $on-tooltip;
3876
}
3877
min-height: 32px - 4px * 2;
3879
padding: 4px 8px;
3880
border-radius: $corner-radius;
3881
&:not(.csd) {
3883
background-color: $tooltip;
3884
}
3885
> box {
3887
border-spacing: 6px;
3888
}
3889
.dim-label {
3891
color: hint($on-tooltip);
3892
}
3893
}
3894
/**
3896
* Color Chooser
3897
*/
3898
colorswatch {
3900
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3901
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3902
// applied to the overlay box.
3903
// base color corners rounding
3905
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3906
// sports a bigger radius.
3907
// nth-child is needed by the custom color strip.
3908
transition: $transition-shadow;
3910
box-shadow: $shadow-z1;
3911
&:drop(active),
3913
&.activatable:hover {
3914
box-shadow: $shadow-z3;
3915
}
3916
&:disabled {
3918
opacity: .5;
3919
// box-shadow: none;
3920
}
3921
&.top {
3923
border-top-left-radius: $corner-radius;
3924
border-top-right-radius: $corner-radius;
3925
}
3926
&.bottom {
3928
border-bottom-left-radius: $corner-radius;
3929
border-bottom-right-radius: $corner-radius;
3930
}
3931
&.left,
3933
&:first-child:not(.top) {
3934
border-top-left-radius: $corner-radius;
3935
border-bottom-left-radius: $corner-radius;
3936
}
3937
&.right,
3939
&:last-child:not(.bottom) {
3940
border-top-right-radius: $corner-radius;
3941
border-bottom-right-radius: $corner-radius;
3942
}
3943
&.dark {
3945
color: $on-dark;
3946
}
3947
&.light {
3949
color: $on-light;
3950
}
3951
&#add-color-button {
3953
// border-radius: $corner-radius 0 0 $corner-radius;
3954
background-color: $surface-z8;
3955
color: $on-surface;
3956
&:only-child {
3958
// border-radius: $corner-radius;
3959
}
3960
}
3961
row:selected & {
3963
}
3964
&#editor-color-sample {
3966
border-radius: $corner-radius;
3967
}
3968
}
3969
// colorscale popup
3971
colorchooser .popover.osd {
3972
transition: $transition-shadow;
3973
border-radius: $corner-radius;
3974
box-shadow: $shadow-z4, inset 0 1px highlight($surface-z8);
3975
background-color: $surface-z8;
3976
&:backdrop {
3978
box-shadow: $shadow-z2, inset 0 1px highlight($surface-z8);
3979
}
3980
}
3981
/**
3983
* Misc
3984
*/
3985
// content view (grid/list)
3987
.content-view {
3988
// background-color: $surface-z0;
3989
&:hover {
3991
// -gtk-icon-filter: brightness(1.2);
3992
}
3993
}
3994
.scale-popup {
3996
.osd & {
3997
// @extend %osd;
3998
button.flat {
4000
}
4001
}
4002
// +/- buttons on GtkVolumeButton popup
4004
button {
4005
}
4006
}
4007
/**
4009
* Window Decorations
4010
*/
4011
window {
4013
&.csd {
4014
transition: $transition-shadow;
4015
border-radius: $corner-radius $corner-radius 0 0;
4016
border-radius: $corner-radius;
4017
box-shadow: $shadow-z16, 0 16px 24px 2px transparent, 0 6px 30px 5px transparent;
4018
&:backdrop {
4020
// the transparent shadow here is to enforce that the shadow extents don't
4021
// change when we go to backdrop, to prevent jumping windows.
4022
// The biggest shadow should be in the same order then in the active state
4023
// or the jumping will happen during the transition.
4024
box-shadow: $shadow-z4, 0 16px 24px 2px transparent, 0 6px 30px 5px transparent;
4025
}
4026
}
4027
// server-side decorations as used by mutter
4029
&.ssd {
4030
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); // just doing borders, wm draws actual shadows
4031
}
4032
&.solid-csd {
4034
margin: 0;
4035
padding: 2px;
4036
border-radius: 0;
4037
box-shadow: none;
4038
box-shadow: inset 0 1px highlight($titlebar);
4039
background-color: $titlebar;
4040
&:backdrop {
4042
background-color: $titlebar-backdrop;
4043
}
4044
}
4045
&.maximized,
4047
&.fullscreen,
4048
&.tiled,
4049
&.tiled-top,
4050
&.tiled-left,
4051
&.tiled-right,
4052
&.tiled-bottom {
4053
border-radius: 0;
4054
}
4055
}
4056
// catch all extend :)
4058
%selected_items {
4060
background-color: $overlay-selected;
4061
}
4062
.monospace {
4064
font-family: monospace;
4065
}
4066
/**
4068
* Touch Copy & Paste
4069
*/
4070
// touch selection handlebars for the Popover.osd above
4072
cursor-handle {
4073
min-width: 24px;
4074
min-height: 24px;
4075
border-radius: 50%;
4076
background-color: $primary;
4077
// -gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4078
&.top:dir(ltr),
4080
&.bottom:dir(rtl) {
4081
border-top-right-radius: 0;
4082
// -gtk-icon-transform: rotate(90deg);
4083
}
4084
&.bottom:dir(ltr),
4086
&.top:dir(rtl) {
4087
border-top-left-radius: 0;
4088
// -gtk-icon-transform: unset;
4089
}
4090
&.insertion-cursor:dir(ltr),
4092
&.insertion-cursor:dir(rtl) {
4093
margin-top: 6px;
4094
transform: rotate(45deg);
4095
}
4096
}
4097
shortcuts-section {
4099
margin: 20px;
4100
}
4101
.shortcuts-search-results {
4103
margin: 20px;
4104
border-spacing: 24px;
4105
}
4106
// shortcut window keys
4108
shortcut {
4109
border-spacing: 6px;
4110
}
4111
shortcut > .keycap {
4113
min-width: 28px - 8px * 2;
4114
// min-height: 28px - 2px;
4115
min-height: 28px;
4116
// margin-top: 2px;
4117
// padding-bottom: 2px;
4118
padding-left: 8px;
4119
padding-right: 8px;
4120
// border: solid 1px divider($on-surface);
4122
// border-radius: $corner-radius + 1px;
4123
border-radius: $corner-radius;
4124
// box-shadow: inset 0 -2px divider($on-surface);
4125
box-shadow: $shadow-z1;
4126
background-color: $surface-z8;
4127
color: $on-surface;
4128
font-size: smaller;
4129
}
4130
// FIXME needs to be done widget by widget, this wildcard should really die
4132
:drop(active) {
4133
// caret-color: $primary;
4134
}
4135
// FIXME aggregate with buttons
4137
stackswitcher > button.text-button {
4138
min-width: 100px;
4139
}
4140
stackswitcher.circular {
4142
border-spacing: 12px;
4143
// FIXME aggregate with buttons
4145
> button.circular {
4146
min-width: $medium-size;
4147
min-height: $medium-size;
4148
padding: 0;
4149
}
4150
}
4151
/**
4153
* App Icons
4154
*/
4155
// Outline for low res icons
4157
.lowres-icon {
4158
// -gtk-icon-shadow: none;
4159
}
4160
// Drapshadow for large icons
4162
.icon-dropshadow {
4163
// -gtk-icon-shadow: none;
4164
}
4165
/**
4167
* Emoji
4168
*/
4169
popover.emoji-picker > contents {
4171
padding: 0;
4172
emoji {
4174
min-width: 3em;
4175
min-height: 3em;
4176
// padding: 8px;
4177
border-radius: $corner-radius;
4178
// font-size: larger;
4179
@extend %ripple;
4181
@include ink-color($on-surface);
4182
}
4183
}
4184
.emoji-searchbar {
4186
border-bottom: 1px solid divider($on-surface);
4187
> entry.search {
4189
border-image: none;
4190
border-radius: 0;
4191
box-shadow: none;
4192
background-color: transparent;
4193
}
4194
}
4195
.emoji-toolbar {
4197
padding: 4px;
4198
border-spacing: 4px;
4199
border-top: 1px solid divider($on-surface);
4200
> button.emoji-section {
4202
&:checked {
4203
background-color: overlay("activated", $primary);
4204
color: $primary;
4205
@include ink-color($primary, $on: overlay("activated", $primary));
4206
}
4207
}
4208
}
4209
popover.emoji-completion > contents {
4211
padding: 8px 0;
4212
emoji-completion-row {
4214
min-height: 32px;
4215
padding: 0 8px;
4216
@extend %ripple;
4217
@include ink-color($on-surface);
4218
> box {
4220
border-spacing: 8px;
4221
}
4222
}
4223
emoji {
4225
// min-width: 3em;
4226
// min-height: 3em;
4227
// padding: 8px;
4228
border-radius: $corner-radius;
4229
@extend %ripple;
4231
@include ink-color($on-surface);
4232
}
4233
}
4234
popover.entry-completion > contents {
4236
padding: 0;
4237
treeview.view {
4239
min-height: 32px; // FIXME: should be in .cell
4240
padding: 8px 0;
4241
> .cell {
4243
padding: 0 4px; // FIXME: should be `0 8px`
4244
&:selected:hover {
4246
background-color: overlay("focus", $on-surface);
4247
}
4248
}
4249
}
4250
}
4251