Unicode text, UTF-8 text
1
@use "../../theme";
2
@use "../../theme-color";
3
@use "gtk";
4
@use "drawing";
5
/**
7
* Base States
8
*/
9
.background {
11
background-color: theme-color.$surface-z0;
12
color: theme-color.$on-surface;
13
}
14
dnd {
16
color: theme-color.$on-surface;
17
}
18
.normal-icons {
20
-gtk-icon-size: 16px;
21
}
22
.large-icons {
24
-gtk-icon-size: 32px;
25
}
26
image:disabled {
28
-gtk-icon-filter: opacity(0.5);
29
}
30
.view {
32
// background-color: $surface-z1;
33
// color: $on-surface;
34
> .cell:hover {
36
background-color: theme-color.hover-overlay(theme-color.$on-surface, $alt: true);
37
}
38
&:disabled {
40
color: theme-color.disabled(theme-color.$on-surface);
41
}
42
&:selected {
44
background-color: theme-color.$selected-overlay;
45
}
46
> .cell:selected:hover {
48
background-color: theme-color.hover-overlay(theme-color.$primary, $alt: true, $on: theme-color.$selected-overlay);
49
}
50
}
51
textview {
53
caret-color: theme-color.$primary;
54
> text {
56
> selection {
57
background-color: theme-color.$selected-overlay;
58
}
59
}
60
> border {
62
// background-color: $surface-z1-alt;
63
color: theme-color.hint(theme-color.$on-surface); // FIXME: not working
64
}
65
}
66
iconview {
68
> .cell {
69
border-radius: theme.$corner-radius;
70
}
71
&:drop(active) {
73
// box-shadow: none;
74
}
75
> dndtarget:drop(active) {
77
box-shadow: inset 0 0 0 2px theme-color.$primary;
78
}
79
}
80
%iconview-desktop {
82
// background-color: $scrim;
83
color: theme-color.$on-dark;
84
text-shadow: theme.$text-shadow;
85
> rubberband {
87
border: 1px solid theme-color.primary(theme-color.$on-dark);
88
background-color: rgba(theme-color.primary(theme-color.$on-dark), .24);
89
}
90
}
91
rubberband {
93
border: 1px solid theme-color.$primary;
94
background-color: rgba(theme-color.$primary, .24);
95
}
96
flowbox {
98
padding: 4px;
99
border-spacing: 4px;
100
> flowboxchild {
102
padding: 4px;
103
border-radius: theme.$corner-radius;
104
@extend %ripple;
106
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
107
&:selected {
109
background-color: theme-color.$selected-overlay;
110
@include drawing.ink-color(theme-color.$primary, $hover-alt: true, $on: theme-color.$selected-overlay);
112
}
113
}
114
}
115
gridview {
117
padding: 4px;
118
border-spacing: 4px;
119
> child {
121
padding: 4px;
122
border-radius: theme.$corner-radius;
123
@extend %ripple;
125
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
126
&:selected {
128
background-color: theme-color.$selected-overlay;
129
@include drawing.ink-color(theme-color.$primary, $hover-alt: true, $on: theme-color.$selected-overlay);
131
}
132
}
133
}
134
coverflow > cover {
136
box-shadow: theme.$shadow-z2;
137
background-color: theme-color.$surface-z8;
138
color: theme-color.$on-surface;
139
}
140
.content-view .tile {
142
// margin: 2px;
143
// padding: 0;
144
// border-radius: 0;
145
// background-color: black;
146
&:selected {
148
background-color: transparent;
149
}
150
}
151
label {
153
caret-color: theme-color.$primary;
154
&.separator {
156
color: theme-color.hint(theme-color.$on-surface);
157
}
158
&.error {
160
color: theme-color.$error;
161
}
162
> selection {
164
background-color: theme-color.$selected-overlay;
165
}
166
&:disabled {
168
color: theme-color.disabled(theme-color.$on-surface);
169
headerbar &,
171
modelbutton &,
172
tab &,
173
button & {
174
color: inherit;
175
}
176
}
177
&.osd {
179
border-radius: theme.$corner-radius;
180
background-color: theme-color.$tooltip;
181
color: theme-color.$on-tooltip;
182
}
183
}
184
.dim-label {
186
color: theme-color.hint(theme-color.$on-surface);
187
}
188
window.assistant {
190
.sidebar {
191
padding: 4px 0;
192
> label {
194
min-height: theme.$medium-size;
195
padding: 0 12px;
196
color: theme-color.disabled(theme-color.$on-surface);
197
font-weight: 500;
198
&.highlight {
200
color: theme-color.$on-surface;
201
}
202
}
203
}
204
}
205
window.aboutdialog > box > box > image.large-icons {
207
-gtk-icon-size: 128px;
208
}
209
%osd,
211
.osd {
212
// opacity: .9;
213
}
214
/**
216
* Spinner Animation
217
*/
218
@keyframes spin {
220
to {
221
transform: rotate(1turn);
222
}
223
}
224
spinner {
226
// background: none;
227
opacity: 0; // non spinning spinner makes no sense
228
color: theme-color.$primary;
229
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
230
transition: opacity theme.$state-duration * 4 theme.$ease-out;
231
animation: spin 1s linear infinite;
232
&:checked {
234
opacity: 1;
235
}
236
&:disabled {
238
color: theme-color.disabled-hint(theme-color.$on-surface);
239
}
240
}
241
/**
243
* General Typography
244
*/
245
@function pt($size: $font-size) {
247
@return ($size * .75 / 1px) * 1pt;
248
}
249
.large-title {
251
font-weight: 400;
252
font-size: pt(48px);
253
}
254
.title-1 {
256
font-weight: 400;
257
font-size: pt(34px);
258
letter-spacing: pt(.25px);
259
}
260
.title-2 {
262
font-weight: 400;
263
font-size: pt(24px);
264
}
265
.title-3 {
267
font-weight: 500;
268
font-size: pt(20px);
269
letter-spacing: pt(.15px);
270
}
271
.title-4 {
273
font-weight: 400;
274
font-size: pt(16px);
275
letter-spacing: pt(.5px);
276
}
277
.heading {
279
font-weight: 500;
280
font-size: 1em;
281
}
282
.body {
284
font-weight: 400;
285
font-size: 1em;
286
}
287
.caption-heading {
289
font-weight: 500;
290
font-size: pt(12px);
291
letter-spacing: pt(1.5px);
292
}
293
.caption {
295
font-weight: 400;
296
font-size: pt(12px);
297
letter-spacing: pt(.4px);
298
}
299
/**
301
* Text Entries
302
*/
303
%entry,
305
entry {
306
min-height: theme.$medium-size;
307
padding: 0 8px;
308
border-spacing: theme.$container-padding;
309
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
310
@include drawing.entry(normal);
312
&:hover,
314
&:drop(active) {
315
@include drawing.entry(hover);
316
}
317
&:focus-within {
319
@include drawing.entry(checked);
320
> text > placeholder {
322
opacity: 0;
323
}
324
}
325
&:disabled {
327
@include drawing.entry(disabled);
328
}
329
&.flat {
331
min-height: 0;
332
padding: 2px;
333
border-radius: 0;
334
background-color: transparent;
335
}
336
> text {
338
> placeholder {
339
color: theme-color.hint(theme-color.$on-surface);
340
}
341
> selection {
343
background-color: theme-color.$selected-overlay;
344
}
345
> block-cursor {
347
background-color: theme-color.$primary;
348
color: theme-color.$on-primary;
349
}
350
> undershoot {
352
&.left {
353
// @include undershoot(left);
354
}
355
&.right {
357
// @include undershoot(right);
358
}
359
}
360
}
361
// icons inside the entry
363
> image {
364
min-width: theme.$small-size;
365
min-height: theme.$small-size;
366
border-radius: theme.$circular-radius;
367
@extend %ripple;
368
@include drawing.ink-color(theme-color.$on-surface);
369
color: theme-color.hint(theme-color.$on-surface);
370
margin-top: theme.$container-padding;
371
margin-bottom: theme.$container-padding;
372
&:disabled {
374
color: theme-color.disabled(theme-color.$on-surface);
375
}
376
&.left {
378
margin-left: (theme.$medium-size - theme.$small-size) / 2 - 8px;
379
}
380
&.right {
382
margin-right: (theme.$medium-size - theme.$small-size) / 2 - 8px;
383
}
384
}
385
&.password > image.caps-lock-indicator {
387
}
388
// entry error and warning style
390
@each $class, $color in (".error": theme-color.$error, ".warning": theme-color.$warning) {
391
&#{$class} {
392
@include drawing.entry(normal, $color);
393
&:focus-within {
395
@include drawing.entry(checked, $color);
396
}
397
&:disabled {
399
@include drawing.entry(disabled, $color);
400
}
401
}
402
}
403
.osd & {
405
}
406
> progress > trough > progress {
408
margin: 0 -8px;
409
margin-bottom: -4px;
410
border-bottom: 2px solid theme-color.$primary;
411
background-color: transparent;
412
}
413
// linked entries
415
.linked:not(.vertical) > & {
416
// @extend %linked;
417
}
418
// Vertically linked entries
420
.linked.vertical > & {
421
// @extend %linked-vertical;
422
}
423
}
424
%entry_raised {
426
border-radius: theme.$corner-radius;
427
@include drawing.entry(raised-normal);
429
&:focus-within {
431
@include drawing.entry(raised-focus);
432
}
433
&:drop(active) {
435
@include drawing.entry(raised-hover);
436
}
437
&:disabled {
439
@include drawing.entry(raised-disabled);
440
}
441
// entry error and warning style
443
@each $class, $color in (".error": theme-color.$error, ".warning": theme-color.$warning) {
444
&#{$class} {
445
@include drawing.entry(raised-normal, $color);
446
&:focus-within {
448
@include drawing.entry(raised-focus, $color);
449
}
450
&:disabled {
452
@include drawing.entry(raised-disabled, $color);
453
}
454
image {
456
color: theme-color.hint(theme-color.on($color));
457
&:hover,
459
&:active {
460
color: theme-color.on($color);
461
}
462
&:disabled {
464
color: theme-color.disabled(theme-color.on($color));
465
}
466
}
467
}
468
}
469
}
470
treeview entry {
472
&,
473
&.flat {
474
background-color: theme-color.$surface-z1;
475
&,
477
&:focus-within {
478
border-image: none;
479
box-shadow: none;
480
}
481
}
482
}
483
.entry-tag {
485
margin: 2px;
486
border-radius: theme.$circular-radius;
487
box-shadow: none;
488
background-color: theme-color.fill(theme-color.$on-surface);
489
color: theme-color.$on-surface;
490
&:hover {
492
background-image: image(theme-color.hover-overlay(theme-color.$on-surface));
493
}
494
// side margins: compensate the entry padding with a negative margin
496
// then the negative margin itself
497
:dir(ltr) & {
498
margin-left: 4px;
499
margin-right: 0;
500
padding-left: 12px;
501
padding-right: 8px;
502
}
503
:dir(rtl) & {
505
margin-left: 0;
506
margin-right: 4px;
507
padding-left: 8px;
508
padding-right: 12px;
509
}
510
// seems any sizing doesn't work
512
&.button {
513
box-shadow: none;
514
background-color: transparent;
515
color: theme-color.hint(theme-color.$on-surface);
516
}
517
}
518
/**
520
* Buttons
521
*/
522
// stuff for .needs-attention
524
@keyframes needs-attention {
525
from {
526
background-image: radial-gradient(farthest-side, theme-color.$primary 0%, transparent 0%);
527
}
528
to {
530
background-image: radial-gradient(farthest-side, theme-color.$primary 100%, transparent 100%);
531
}
532
}
533
%button,
535
button {
536
min-height: 24px;
537
min-width: 16px;
538
padding: (theme.$medium-size - 24px) / 2 (theme.$medium-size - 16px) / 2;
539
border-radius: theme.$corner-radius;
540
background-color: theme-color.$surface-z8;
541
color: theme-color.$on-surface;
542
font-weight: 500;
543
@extend %ripple;
545
@include drawing.ink-color(theme-color.$on-surface, $on: theme-color.$surface-z8, $button-style: "raised");
546
&:disabled {
548
box-shadow: none;
549
background-color: theme-color.fill(theme-color.$on-surface);
550
color: theme-color.disabled(theme-color.$on-surface);
551
}
552
&:checked {
554
$background-color: theme-color.activated-overlay(theme-color.$primary, $on: theme-color.$surface-z8);
555
color: theme-color.$primary;
556
@include drawing.ink-color(theme-color.$primary, $on: $background-color, $button-style: "raised");
557
&:disabled {
559
box-shadow: none;
560
background-color: theme-color.activated-overlay(theme-color.$on-surface, $on: theme-color.fill(theme-color.$on-surface));
561
color: theme-color.disabled(theme-color.$on-surface);
562
}
563
}
564
&.text-button {
566
min-width: 64px - 16px * 2;
567
padding-left: 16px;
568
padding-right: 16px;
569
}
570
&.image-button {
572
min-width: 24px;
573
padding: (theme.$medium-size - 24px) / 2;
574
border-radius: theme.$circular-radius;
575
}
576
// NOTE: Some image-only buttons use this as well
578
&.text-button.image-button {
579
min-width: 64px - 16px * 2;
580
padding-left: 16px;
581
padding-right: 16px;
582
// min-width: 24px;
583
// padding: ($medium-size - 24px) / 2;
584
border-radius: theme.$corner-radius;
585
label {
587
&:first-child {
588
// margin-left: 16px - ($medium-size - 24px) / 2;
589
}
590
&:last-child {
592
// margin-right: 16px - ($medium-size - 24px) / 2;
593
}
594
}
595
image:not(:only-child) {
597
// margin: 0 (24px - 16px) / 2;
598
}
599
image {
601
&:first-child {
602
margin-left: 12px - 16px;
603
margin-right: 8px;
604
}
605
&:last-child {
607
margin-left: 8px;
608
margin-right: 12px - 16px;
609
}
610
}
611
}
612
.linked:not(.vertical) > & {
614
// @extend %linked;
615
&.image-button:not(.text-button) {
617
// @extend %linked-image-button;
618
}
619
}
620
.linked.vertical > & {
622
// @extend %linked-vertical;
623
&.image-button:not(.text-button) {
625
// @extend %linked-vertical-image-button;
626
}
627
}
628
}
629
%button-outlined {
631
background-color: transparent;
632
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true, $button-style: "outlined");
633
}
634
%button-flat-basic {
636
background-color: transparent;
637
color: theme-color.hint(theme-color.$on-surface);
638
@include drawing.ink-color(theme-color.$on-surface, $button-style: "flat");
639
&:disabled {
641
background-color: transparent;
642
color: theme-color.disabled-hint(theme-color.$on-surface);
643
}
644
}
645
%button-flat-activatable {
647
@extend %button-flat-basic;
648
&:checked {
650
$background-color: theme-color.activated-overlay(theme-color.$primary);
651
color: theme-color.$primary;
652
@include drawing.ink-color(theme-color.$primary, $on: $background-color, $button-style: "flat");
653
&:disabled {
655
color: theme-color.disabled(theme-color.$on-surface);
656
}
657
}
658
}
659
%button-flat,
661
button.flat {
662
@extend %button-flat-activatable;
663
&.text-button {
665
min-width: 64px - 8px * 2;
666
padding-left: 8px;
667
padding-right: 8px;
668
}
669
&.text-button.image-button {
671
min-width: 24px;
672
padding: (theme.$medium-size - 24px) / 2;
673
label {
675
&:first-child {
676
margin-left: 12px - (theme.$medium-size - 24px) / 2;
677
}
678
&:last-child {
680
margin-right: 12px - (theme.$medium-size - 24px) / 2;
681
}
682
}
683
}
684
.linked:not(.vertical) > &,
686
.linked.vertical > & {
687
&:not(:only-child) { // specificity bump
688
border-radius: theme.$corner-radius;
689
&.image-button:not(.text-button) {
691
border-radius: theme.$circular-radius;
692
}
693
}
694
}
695
}
696
button {
698
// big standalone buttons like in Documents pager
699
&.osd {
700
padding: (theme.$large-size - 24px) / 2 (theme.$large-size - 16px) / 2;
701
&.image-button {
703
padding: (theme.$large-size - 24px) / 2;
704
}
705
&:disabled {
707
opacity: 0;
708
}
709
}
710
// overlay / OSD style
712
@at-root %osd_button,
713
.osd & {
714
}
715
// Suggested and Destructive Action buttons
717
@each $class, $color in (".suggested-action": theme-color.$primary, ".destructive-action": theme-color.$error) {
718
&#{$class} {
719
background-color: $color;
720
color: theme-color.on($color);
721
@include drawing.ink-color(theme-color.on($color), $on: $color, $button-style: "raised");
722
&:disabled {
724
box-shadow: none;
725
background-color: theme-color.fill(theme-color.$on-surface);
726
color: theme-color.disabled(theme-color.$on-surface);
727
}
728
&:checked {
730
background-color: theme-color.activated-overlay(theme-color.on($color), $on: $color);
731
}
732
&.flat {
734
background-color: transparent;
735
@include drawing.ink-color($color);
736
&:disabled {
738
box-shadow: none;
739
background-color: transparent;
740
color: theme-color.disabled-hint(theme-color.$on-surface);
741
}
742
&:checked {
744
background-color: theme-color.activated-overlay($color);
745
}
746
}
747
.osd & {
749
}
750
}
751
}
752
stackswitcher > & {
754
// to position the needs attention dot, padding is added to the button
755
// child, a label needs just lateral padding while an icon needs vertical
756
// padding added too.
757
> label {
759
margin: 0 -6px;
760
padding: 0 6px;
761
}
762
> image {
764
margin: -3px -6px;
765
padding: 3px 6px;
766
}
767
&.needs-attention {
769
> label,
770
> image {
771
@extend %needs-attention;
772
}
773
&:checked {
775
> label,
776
> image {
777
animation: none;
778
background-image: none;
779
}
780
}
781
}
782
}
783
&.font > box {
785
border-spacing: 6px;
786
> box {
788
> separator {
789
@extend %hide_separators;
790
}
791
> label {
793
// font-weight: bold;
794
}
795
}
796
}
797
// force circular button shape
799
&.close,
800
menubutton.circular > &,
801
&.circular {
802
border-radius: theme.$circular-radius;
803
}
804
}
805
%button-small {
807
min-height: theme.$small-size;
808
min-width: theme.$small-size;
809
padding: 0;
810
border-radius: theme.$circular-radius;
811
}
812
%needs-attention {
814
animation: needs-attention theme.$ripple-duration theme.$ease-out forwards;
815
background-repeat: no-repeat;
816
background-position: right 3px;
817
background-size: 6px 6px;
818
&:dir(rtl) {
820
background-position: left 3px;
821
}
822
}
823
.linked:not(stackswitcher) {
825
border-spacing: theme.$container-padding;
826
}
827
.linked:not(.vertical) > button.radio {
829
border-radius: 0;
830
&:first-child {
832
border-top-left-radius: theme.$corner-radius;
833
border-bottom-left-radius: theme.$corner-radius;
834
}
835
&:last-child {
837
border-top-right-radius: theme.$corner-radius;
838
border-bottom-right-radius: theme.$corner-radius;
839
}
840
&:not(:first-child) {
842
margin-left: -(theme.$container-padding);
843
}
844
}
845
.linked.vertical > button.radio {
847
border-radius: 0;
848
&:first-child {
850
border-top-left-radius: theme.$corner-radius;
851
border-top-right-radius: theme.$corner-radius;
852
}
853
&:last-child {
855
border-bottom-left-radius: theme.$corner-radius;
856
border-bottom-right-radius: theme.$corner-radius;
857
}
858
&:not(:first-child) {
860
margin-top: -(theme.$container-padding);
861
}
862
}
863
%linked-not-first-child {
865
border-top-left-radius: 0;
866
border-bottom-left-radius: 0;
867
}
868
%linked-not-last-child {
870
border-top-right-radius: 0;
871
border-bottom-right-radius: 0;
872
}
873
%linked {
875
&:not(:first-child) {
876
@extend %linked-not-first-child;
877
}
878
&:not(:last-child) {
880
@extend %linked-not-last-child;
881
}
882
}
883
%linked-vertical-not-first-child {
885
border-top-left-radius: 0;
886
border-top-right-radius: 0;
887
}
888
%linked-vertical-not-last-child {
890
border-bottom-left-radius: 0;
891
border-bottom-right-radius: 0;
892
}
893
%linked-vertical {
895
&:not(:first-child) {
896
@extend %linked-vertical-not-first-child;
897
}
898
&:not(:last-child) {
900
@extend %linked-vertical-not-last-child;
901
}
902
}
903
%linked-image-button {
905
&:first-child {
906
border-top-left-radius: theme.$corner-radius;
907
border-bottom-left-radius: theme.$corner-radius;
908
}
909
&:last-child {
911
border-top-right-radius: theme.$corner-radius;
912
border-bottom-right-radius: theme.$corner-radius;
913
}
914
&:only-child {
916
border-radius: theme.$circular-radius;
917
}
918
}
919
%linked-vertical-image-button {
921
&:first-child {
922
border-top-left-radius: theme.$corner-radius;
923
border-top-right-radius: theme.$corner-radius;
924
}
925
&:last-child {
927
border-bottom-left-radius: theme.$corner-radius;
928
border-bottom-right-radius: theme.$corner-radius;
929
}
930
&:only-child {
932
border-radius: theme.$circular-radius;
933
}
934
}
935
/* menu buttons */
937
modelbutton.flat {
938
// min-height: $menuitem-size;
939
// padding: 0 8px;
940
// border-radius: $corner-radius;
941
@extend %ripple;
943
@include drawing.ink-color(theme-color.$on-surface);
944
&:selected {
946
// background-color: $selected-overlay;
947
}
948
}
949
modelbutton.flat arrow {
951
min-width: 16px;
952
min-height: 16px;
953
color: theme-color.hint(theme-color.$on-surface);
954
&:disabled {
956
color: theme-color.disabled-hint(theme-color.$on-surface);
957
}
958
&.left {
960
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
961
}
962
&.right {
964
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
965
}
966
}
967
button.color {
969
min-width: theme.$small-size;
970
min-height: theme.$small-size;
971
padding: theme.$container-padding;
972
}
973
menubutton {
975
> button > box > arrow {
976
min-height: 16px;
977
min-width: 16px;
978
&.none {
980
-gtk-icon-source: -gtk-icontheme('open-menu-symbolic');
981
}
982
&.down {
984
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
985
}
986
&.up {
988
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
989
}
990
&.left {
992
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
993
}
994
&.right {
996
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
997
}
998
}
999
}
1000
/**
1002
* Links
1003
*/
1004
link {
1006
color: theme-color.$primary;
1007
&:visited {
1009
color: theme-color.$visited;
1010
}
1011
}
1012
button.link {
1014
color: theme-color.$primary;
1015
@include drawing.ink-color(theme-color.$primary);
1016
&:visited {
1018
color: theme-color.$visited;
1019
@include drawing.ink-color(theme-color.$visited);
1020
}
1021
> label {
1023
text-decoration-line: underline;
1024
}
1025
}
1026
/**
1028
* GtkSpinButton
1029
*/
1030
spinbutton {
1032
font-feature-settings: "tnum";
1033
&:not(.vertical) {
1035
// in this horizontal configuration, the whole spinbutton
1036
// behaves as the entry, so we extend the entry styling
1037
// and nuke the style on the internal entry
1038
@extend %entry;
1039
> text {
1041
min-width: 32px;
1042
}
1043
> button {
1045
@extend %button-flat-basic;
1046
@extend %button-small;
1047
margin: theme.$container-padding 0;
1049
&.up:dir(ltr),
1051
&.down:dir(rtl) {
1052
// margin-left: $container-padding / 2;
1053
}
1054
&.up:dir(rtl),
1056
&.down:dir(ltr) {
1057
// margin-right: $container-padding / 2;
1058
}
1059
&.up:dir(ltr) {
1061
margin-right: (theme.$medium-size - theme.$small-size) / 2 - 8px;
1062
}
1063
&.up:dir(rtl) {
1065
margin-left: (theme.$medium-size - theme.$small-size) / 2 - 8px;
1066
}
1067
}
1068
}
1069
// OSD horizontal
1071
.osd &:not(.vertical) {
1072
}
1073
// Vertical
1075
&.vertical {
1076
// in the vertical configuration, we treat the spinbutton
1077
// as a box, and tweak the style of the entry in the middle
1078
// so that it's linked
1079
> text {
1081
@extend %entry_raised;
1082
min-height: theme.$medium-size;
1084
min-width: theme.$large-size;
1085
padding: 0;
1086
> selection {
1088
background-color: theme-color.$selected-overlay;
1089
}
1090
}
1091
button {
1093
min-height: theme.$medium-size;
1094
min-width: theme.$large-size;
1095
padding: 0;
1096
@extend %button-flat-basic;
1098
// Remove unwanted focus indicator
1100
&:focus:not(:hover):not(:active) {
1101
box-shadow: inset 0 0 0 9999px transparent;
1102
}
1103
&.up {
1105
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1106
}
1107
&.down {
1109
border-radius: 0 0 theme.$corner-radius theme.$corner-radius;
1110
}
1111
}
1112
}
1113
// OSD vertical
1115
.osd &.vertical {
1116
}
1117
// Misc
1119
treeview &:not(.vertical) {
1120
min-height: 0;
1121
border-style: none;
1122
border-radius: 0;
1123
> text {
1125
min-height: 0;
1126
padding: 1px 2px;
1127
}
1128
}
1129
}
1130
/**
1132
* ComboBoxes
1133
*/
1134
dropdown,
1136
combobox {
1137
arrow {
1138
min-width: 16px;
1139
min-height: 16px;
1140
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1141
transition: -gtk-icon-transform theme.$state-duration theme.$ease-out;
1142
}
1143
button:checked arrow {
1145
color: theme-color.$primary;
1146
-gtk-icon-transform: rotate(-.5turn);
1147
}
1148
}
1149
dropdown {
1151
> button > box {
1152
border-spacing: 6px;
1153
}
1154
> popover.menu > contents {
1156
// allow search entries with no padding
1157
padding: 0;
1158
listview {
1160
padding: 6px 0;
1161
> row {
1163
min-height: 32px - 4px * 2;
1164
padding: 4px 8px;
1165
&:selected {
1167
background-color: theme-color.focus-overlay(theme-color.$on-surface);
1168
}
1169
}
1170
}
1171
}
1172
}
1173
// drodowns with searchboxes on top
1175
.dropdown-searchbar {
1176
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
1177
> entry.search {
1179
border-image: none;
1180
border-radius: 0;
1181
box-shadow: none;
1182
background-color: transparent;
1183
}
1184
}
1185
combobox {
1187
> box > button > box {
1188
border-spacing: 6px;
1189
}
1190
cellview {
1192
margin: -2px;
1193
}
1194
// align menu labels with the button label
1196
> popover.menu > contents modelbutton {
1197
padding-left: 8px;
1198
padding-right: 8px;
1199
}
1200
> .linked:not(.vertical) > entry:not(:only-child) {
1202
// border-radius: $corner-radius $corner-radius 0 0;
1203
&:first-child {
1205
margin-right: -(theme.$medium-size + theme.$container-padding);
1206
padding-right: theme.$medium-size;
1207
}
1208
&:last-child {
1210
margin-left: -(theme.$medium-size + theme.$container-padding);
1211
padding-left: theme.$medium-size;
1212
}
1213
}
1214
> .linked:not(.vertical) > button:not(:only-child) {
1216
@extend %button-flat-activatable;
1217
// @extend %button-small;
1218
min-height: 16px;
1220
min-width: 16px;
1221
margin: (theme.$medium-size - theme.$small-size) / 2;
1222
padding: (theme.$small-size - 16px) / 2;
1223
border-radius: theme.$circular-radius;
1224
}
1225
}
1226
// the combo is a composite widget so the way we do button linking doesn't
1228
// work, special case needed. See
1229
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1230
.linked:not(.vertical) > combobox {
1232
&:not(:first-child) > box > button.combo {
1233
// @extend %linked-not-first-child;
1234
}
1235
&:not(:last-child) > box > button.combo {
1237
// @extend %linked-not-last-child;
1238
}
1239
}
1240
.linked.vertical > combobox {
1242
&:not(:first-child) > box > button.combo {
1243
// @extend %linked-vertical-not-first-child;
1244
}
1245
&:not(:last-child) > box > button.combo {
1247
// @extend %linked-vertical-not-last-child;
1248
}
1249
}
1250
dropdown > button.toggle,
1252
button.combo:only-child {
1253
padding-left: 8px;
1254
padding-right: 8px;
1255
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1256
font-weight: normal;
1257
@include drawing.entry(normal);
1259
&:focus {
1261
@include drawing.entry(focus);
1262
}
1263
&:drop(active),
1265
&:hover {
1266
@include drawing.entry(hover);
1267
}
1268
&:checked {
1270
@include drawing.entry(checked);
1271
}
1272
&:disabled {
1274
@include drawing.entry(disabled);
1275
}
1276
arrow {
1278
transition: color theme.$state-duration theme.$ease-out;
1279
color: theme-color.hint(theme-color.$on-surface);
1280
&:disabled {
1282
color: theme-color.disabled-hint(theme-color.$on-surface);
1283
}
1284
}
1285
}
1286
/**
1288
* Toolbars
1289
*/
1290
.toolbar {
1292
padding: 4px;
1293
border-spacing: 4px;
1294
&.top { border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); }
1296
&.bottom { border-top: 1px solid theme-color.divider(theme-color.$on-surface); }
1297
&.start { border-right: 1px solid theme-color.divider(theme-color.$on-surface); }
1298
&.end { border-left: 1px solid theme-color.divider(theme-color.$on-surface); }
1299
button {
1301
@extend %button-flat;
1302
}
1303
// on OSD
1305
.osd & {
1306
}
1307
// stand-alone OSD toolbars
1309
&.osd {
1310
@extend %toolbar-osd;
1311
// positional classes for `attached` osd toolbars
1313
&.left,
1314
&.right,
1315
&.top,
1316
&.bottom {
1317
border-radius: 0;
1318
}
1319
&.bottom {
1321
box-shadow: none;
1322
background-color: transparent;
1323
background-image:
1324
linear-gradient(
1325
to bottom,
1326
transparent,
1327
rgba(black, .1) 30%,
1328
rgba(black, .2) 50%,
1329
rgba(black, .4)
1330
);
1331
}
1332
}
1333
// toolbar separators
1335
&.horizontal > separator {
1336
margin: 4px 0;
1337
}
1338
&.vertical > separator {
1340
margin: 0 4px;
1341
}
1342
}
1343
%toolbar-osd {
1345
transition: theme.$transition-shadow;
1346
padding: theme.$container-padding;
1347
border-spacing: theme.$container-padding;
1348
border-radius: theme.$corner-radius;
1349
box-shadow: theme.$shadow-z4, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
1350
background-color: theme-color.$surface-z8;
1351
&:backdrop {
1353
box-shadow: theme.$shadow-z2, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
1354
}
1355
}
1356
// searchbar, location-bar & inline-toolbar
1358
.inline-toolbar {
1359
padding: theme.$container-padding;
1360
border-style: solid;
1361
border-width: 0 1px 1px;
1362
border-color: theme-color.divider(theme-color.$on-surface);
1363
background-color: theme-color.$surface-z1;
1364
}
1365
searchbar > revealer > box {
1367
padding: theme.$container-padding;
1368
border-spacing: theme.$container-padding;
1369
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
1370
}
1371
/**
1373
* Title buttons
1374
*/
1375
windowcontrols {
1377
border-spacing: theme.$container-padding;
1378
&:not(:only-child):not(.empty) {
1380
border-image:
1381
linear-gradient(
1382
to bottom,
1383
transparent 12px,
1384
theme-color.divider(theme-color.$on-titlebar) 12px,
1385
theme-color.divider(theme-color.$on-titlebar) calc(100% - 12px),
1386
transparent calc(100% - 12px)
1387
) 1;
1388
&.start:dir(ltr),
1390
&.end:dir(rtl) {
1391
padding-right: theme.$container-padding;
1392
border-right: 1px solid;
1393
}
1394
&.start:dir(rtl),
1396
&.end:dir(ltr) {
1397
padding-left: theme.$container-padding;
1398
border-left: 1px solid;
1399
}
1400
}
1401
button {
1403
}
1404
}
1405
/**
1407
* Header bars
1408
*/
1409
.titlebar {
1411
transition: background-color theme.$state-duration theme.$ease-out, color theme.$state-duration theme.$ease-out;
1412
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1413
box-shadow: theme.$shadow-z2, inset 0 1px theme-color.highlight(theme-color.$titlebar);
1414
background-color: theme-color.$titlebar;
1415
color: theme-color.$on-titlebar;
1416
&:disabled {
1418
color: theme-color.disabled(theme-color.$on-titlebar);
1419
}
1420
&:backdrop {
1422
background-color: theme-color.$titlebar-backdrop;
1423
color: theme-color.hint(theme-color.$on-titlebar);
1424
&:disabled {
1426
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1427
}
1428
}
1429
box.start,
1431
box.end {
1432
border-spacing: theme.$container-padding;
1433
}
1434
.title {
1436
padding-left: 12px;
1437
padding-right: 12px;
1438
font-weight: bold;
1439
}
1440
.subtitle {
1442
padding-left: 12px;
1443
padding-right: 12px;
1444
font-size: smaller;
1445
}
1446
.subtitle,
1448
.dim-label {
1449
transition: color theme.$state-duration theme.$ease-out;
1450
color: theme-color.hint(theme-color.$on-titlebar);
1451
&:backdrop {
1453
color: theme-color.disabled(theme-color.$on-titlebar);
1454
}
1455
}
1456
// The separator for split headerbars
1458
headerbar + separator {
1459
background-color: theme-color.divider(theme-color.$on-titlebar);
1460
}
1461
entry {
1463
box-shadow: inset 0 -1px theme-color.stroke(theme-color.$on-titlebar);
1464
background-color: theme-color.entry-fill(theme-color.$on-titlebar);
1465
color: theme-color.$on-titlebar;
1466
&:disabled {
1468
box-shadow: inset 0 -1px theme-color.disabled-stroke(theme-color.$on-titlebar);
1469
background-color: theme-color.entry-fill(theme-color.$on-titlebar);
1470
color: theme-color.disabled(theme-color.$on-titlebar);
1471
}
1472
image {
1474
color: theme-color.hint(theme-color.$on-titlebar);
1475
&:hover,
1477
&:active {
1478
color: theme-color.$on-titlebar;
1479
}
1480
&:disabled {
1482
color: theme-color.disabled(theme-color.$on-titlebar);
1483
}
1484
}
1485
}
1486
.linked:not(.vertical) > entry:not(:only-child) {
1488
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1489
}
1490
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1492
@extend %button-flat;
1493
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1495
theme-color.$titlebar-indicator 0%,
1496
transparent 0%)
1497
0 0 0 / 0 0 0px;
1498
background-color: transparent;
1499
color: theme-color.hint(theme-color.$on-titlebar);
1500
@include drawing.ink-color(theme-color.$on-titlebar);
1501
&:disabled {
1503
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1504
}
1505
@at-root %titlebar-button-checked,
1507
&:checked {
1508
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1509
theme-color.$titlebar-indicator 100%,
1510
transparent 100%)
1511
0 0 2 / 0 0 2px;
1512
background-color: transparent;
1513
color: theme-color.$on-titlebar;
1514
@include drawing.ink-color(theme-color.$on-titlebar);
1515
&:disabled {
1517
background-color: transparent;
1518
color: theme-color.disabled(theme-color.$on-titlebar);
1519
}
1520
}
1521
&:backdrop {
1523
color: theme-color.disabled(theme-color.$on-titlebar);
1524
&:disabled {
1526
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1527
}
1528
&:checked {
1530
color: theme-color.hint(theme-color.$on-titlebar);
1531
&:disabled {
1533
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1534
}
1535
}
1536
}
1537
}
1538
button.suggested-action,
1540
button.destructive-action {
1541
&:disabled {
1542
background-color: theme-color.fill(theme-color.$on-titlebar);
1543
color: theme-color.disabled(theme-color.$on-titlebar);
1544
}
1545
}
1546
// FIXME: Ugly overriding
1548
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1549
min-width: 120px - 8px * 2;
1550
}
1551
// FIXME: Ugly overriding
1553
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1554
min-width: 0;
1555
padding-left: (theme.$medium-size - 24px) / 2;
1556
padding-right: (theme.$medium-size - 24px) / 2;
1557
}
1558
&.selection-mode {
1560
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1561
// but let's keep it for backwards compatibility.
1562
transition: background-color 0.1ms theme.$ripple-duration, color theme.$state-duration theme.$ease-out;
1563
animation: ripple-on-headerbar theme.$ripple-duration theme.$ease-out;
1564
box-shadow: theme.$shadow-z2, inset 0 1px theme-color.highlight(theme-color.$primary);
1565
background-color: theme-color.$primary;
1566
color: theme-color.$on-primary;
1567
&:backdrop {
1569
color: theme-color.hint(theme-color.$on-primary);
1570
}
1571
.subtitle:link {
1573
color: theme-color.$on-primary;
1574
}
1575
button:not(.suggested-action):not(.destructive-action) {
1577
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1578
currentColor 0%,
1579
transparent 0%)
1580
0 0 0 / 0 0 0px;
1581
color: theme-color.$on-primary;
1582
&:disabled {
1584
color: theme-color.disabled(theme-color.$on-primary);
1585
}
1586
&:checked {
1588
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1589
currentColor 100%,
1590
transparent 100%)
1591
0 0 2 / 0 0 2px;
1592
color: theme-color.$on-primary;
1593
&:disabled {
1595
color: theme-color.disabled(theme-color.$on-primary);
1596
}
1597
}
1598
&:backdrop {
1600
color: theme-color.hint(theme-color.$on-primary);
1601
&:disabled {
1603
color: theme-color.disabled-hint(theme-color.$on-primary);
1604
}
1605
&:checked {
1607
color: theme-color.hint(theme-color.$on-primary);
1608
&:disabled {
1610
color: theme-color.disabled-hint(theme-color.$on-primary);
1611
}
1612
}
1613
}
1614
}
1615
.selection-menu {
1617
padding-left: 16px;
1618
padding-right: 16px;
1619
.arrow {
1621
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1622
}
1623
}
1624
}
1625
.selection-mode {
1627
box-shadow: inset 0 1px theme-color.highlight(theme-color.$primary); // Avoid double shadows
1628
background-color: theme-color.$primary;
1629
}
1630
// squared corners when the window is maximized, tiled, or fullscreen
1632
.tiled &,
1633
.tiled-top &,
1634
.tiled-right &,
1635
.tiled-bottom &,
1636
.tiled-left &,
1637
.maximized &,
1638
.fullscreen & {
1639
border-radius: 0;
1640
box-shadow: theme.$shadow-z2;
1641
}
1642
&.default-decoration {
1644
min-height: theme.$small-size;
1645
padding: theme.$container-padding;
1646
box-shadow: inset 0 1px theme-color.highlight(theme-color.$titlebar);
1647
.tiled &,
1649
.maximized &,
1650
.fullscreen & {
1651
box-shadow: none;
1652
}
1653
button.titlebutton {
1655
min-height: theme.$small-size;
1656
min-width: theme.$small-size;
1657
margin: 0;
1658
padding: 0;
1659
}
1660
// workaround for non-animatable buttons
1662
.background:not(.csd) & button.titlebutton:active {
1663
background-size: 1000% 1000%;
1664
}
1665
}
1666
.solid-csd & {
1668
&:dir(rtl), &:dir(ltr) { // specificity bump
1669
border-radius: 0;
1670
box-shadow: theme.$shadow-z2; // just remove the highlight
1671
}
1672
}
1673
}
1674
headerbar > windowhandle > box {
1676
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1677
min-height: theme.$large-size;
1678
padding: 0 theme.$container-padding;
1679
border-spacing: theme.$container-padding;
1680
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1682
entry,
1683
spinbutton,
1684
button {
1685
margin-top: theme.$container-padding;
1686
margin-bottom: theme.$container-padding;
1687
}
1688
separator.titlebutton {
1690
margin-top: theme.$large-size / 4;
1691
margin-bottom: theme.$large-size / 4;
1692
background-color: theme-color.divider(theme-color.$on-titlebar);
1693
}
1694
switch {
1696
margin-top: (theme.$large-size - 24px) / 2;
1697
margin-bottom: (theme.$large-size - 24px) / 2;
1698
}
1699
// reset button margins of the spinbutton
1701
spinbutton button {
1702
margin-top: 0;
1703
margin-bottom: 0;
1704
}
1705
// FIXME: This is a hacky workaround.
1707
.entry-tag {
1708
margin-top: 5px;
1709
margin-bottom: 5px;
1710
}
1711
}
1712
// Development versions of apps to use a differently styled headerbar
1714
window.devel .titlebar:not(.selection-mode) {
1715
}
1716
/**
1718
* Pathbars
1719
*/
1720
%pathbar_button,
1722
pathbar.linked:not(.vertical) > button {
1723
@extend %button-flat-basic;
1724
padding-left: (theme.$medium-size - 24px) / 2;
1726
padding-right: (theme.$medium-size - 24px) / 2;
1727
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1728
theme-color.$primary 0%,
1729
transparent 0%)
1730
0 0 0 / 0 0 0px;
1731
border-radius: theme.$corner-radius;
1732
&:checked {
1734
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1735
theme-color.$primary 100%,
1736
transparent 100%)
1737
0 0 2 / 0 0 2px;
1738
color: theme-color.$on-surface;
1739
&,
1741
&:disabled {
1742
background-color: transparent;
1743
}
1744
}
1745
label:not(:only-child) {
1747
&:first-child {
1748
margin-left: 0;
1749
}
1750
&:last-child {
1752
margin-right: 0;
1753
}
1754
}
1755
&.text-button {
1757
min-width: 0;
1758
}
1759
&.slider-button {
1761
padding-left: (24px - 16px) / 2;
1762
padding-right: (24px - 16px) / 2;
1763
}
1764
}
1765
/**
1767
* Tree Views
1768
*/
1769
columnview.view,
1771
treeview.view {
1772
border-left-color: theme-color.stroke(theme-color.$on-surface); // this is actually the tree lines color,
1773
border-top-color: theme-color.divider(theme-color.$on-surface); // while this is the grid lines color, better then nothing
1774
// to avoid borders being overridden by the previously set props
1776
> rubberband {
1777
@extend rubberband;
1778
}
1779
// FIXME: Avoid transparency background-color being slightly darker
1781
&:selected {
1782
// background-color: $surface-z1;
1783
// background-image: image($selected-overlay);
1784
}
1785
&:hover,
1787
&:selected {
1788
// border-radius: 0;
1789
}
1790
&.separator {
1792
min-height: 1px + 2px * 2;
1793
color: theme-color.divider(theme-color.$on-surface);
1794
}
1795
&:drop(active) {
1797
box-shadow: none;
1798
}
1799
> dndtarget:drop(active) {
1801
// FIXME: box-shadow, background-color and background-image are not available here.
1802
border-style: solid none;
1803
border-width: 9999px;
1804
border-color: theme-color.hover-overlay(theme-color.$on-surface);
1805
&.after {
1807
border-top-style: none;
1808
}
1809
&.before {
1811
border-bottom-style: none;
1812
}
1813
}
1814
&.expander {
1816
// GtkTreeView uses the larger of the expander’s min-width and min-height
1817
min-width: 16px;
1818
min-height: 16px;
1819
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1820
-gtk-icon-transform: rotate(-90deg);
1821
&:dir(rtl) {
1823
-gtk-icon-transform: rotate(90deg);
1824
}
1825
&:checked {
1827
-gtk-icon-transform: unset;
1828
}
1829
color: theme-color.hint(theme-color.$on-surface);
1831
&:hover,
1833
&:active {
1834
color: theme-color.$on-surface;
1835
}
1836
&:disabled {
1838
color: theme-color.disabled-hint(theme-color.$on-surface);
1839
}
1840
}
1841
&.progressbar { // progress bar in treeviews
1843
border-bottom: 4px solid theme-color.$primary;
1844
background-color: transparent;
1845
&:selected:hover {
1847
background-color: transparent;
1848
}
1849
}
1850
&.trough { // progress bar trough in treeviews
1852
border-bottom: 4px solid theme-color.disabled-stroke(theme-color.$on-surface);
1853
background-color: transparent;
1854
&:selected:hover {
1856
background-color: transparent;
1857
}
1858
}
1859
> header {
1861
> button {
1862
padding: 2px 6px;
1863
border-style: none solid solid none;
1864
border-width: 1px;
1865
border-color: theme-color.divider(theme-color.$on-surface);
1866
border-radius: 0;
1867
background-clip: padding-box;
1868
background-color: transparent;
1869
color: theme-color.hint(theme-color.$on-surface);
1870
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true, $button-style: "flat");
1871
@include drawing.list-item;
1872
&:disabled {
1874
color: theme-color.disabled-hint(theme-color.$on-surface);
1875
}
1876
&,
1878
&:disabled {
1879
// background-color: $surface-z1;
1880
}
1881
&:last-child {
1883
border-right-style: none;
1884
}
1885
> box > sort-indicator {
1887
min-height: 16px;
1888
min-width: 16px;
1889
&.ascending {
1891
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1892
}
1893
&.descending {
1895
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1896
}
1897
}
1898
}
1899
}
1900
button.dnd,
1902
header.button.dnd { // for treeview-like derive widgets
1903
padding: 2px 6px;
1904
border-style: none solid solid;
1905
border-width: 1px;
1906
border-color: theme-color.divider(theme-color.$on-surface);
1907
border-radius: 0;
1908
box-shadow: none;
1909
// background-color: $surface-z1;
1910
background-clip: border-box;
1911
color: theme-color.$primary;
1912
}
1913
// see tests/testaccel to test
1915
acceleditor > label {
1916
background-color: theme-color.$primary;
1917
}
1918
}
1919
/**
1921
* Menus
1922
*/
1923
menubar {
1925
// box-shadow: inset 0 -1px divider($on-surface);
1926
background-color: theme-color.$titlebar;
1927
color: theme-color.$on-titlebar;
1928
&:backdrop {
1930
background-color: theme-color.$titlebar-backdrop;
1931
color: theme-color.hint(theme-color.$on-titlebar);
1932
}
1933
.csd & {
1935
transition: theme.$transition;
1936
}
1937
> item {
1939
// transition: $transition;
1940
min-height: 20px;
1941
padding: 4px 8px;
1942
color: theme-color.hint(theme-color.$on-titlebar);
1943
@extend %ripple;
1945
// @include ink-color($on-titlebar);
1946
&:hover {
1948
background-color: theme-color.hover-overlay(theme-color.$on-titlebar);
1949
}
1950
&:focus:not(:hover) {
1952
background-color: theme-color.focus-overlay(theme-color.$on-titlebar);
1953
}
1954
&:active {
1956
background-image: radial-gradient(circle, theme-color.pressed-overlay(theme-color.$on-titlebar) 10%, transparent 10%);
1957
}
1958
&:selected:not(:focus) {
1960
transition: none;
1961
background-color: theme-color.activated-overlay(theme-color.$on-titlebar);
1962
color: theme-color.$on-titlebar;
1963
}
1964
&:disabled {
1966
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1967
}
1968
}
1969
}
1970
popover.menu {
1972
> contents {
1973
padding: 6px 0;
1974
}
1975
separator {
1977
margin: 6px 0;
1978
}
1979
label.title {
1981
min-height: 32px - 4px * 2;
1982
padding: 4px 32px; // this will fall apart with font sizing
1983
font-weight: bold;
1984
}
1985
modelbutton {
1987
// transition: background-color $state-duration $ease-out;
1988
min-height: 30px - 4px * 2;
1989
min-width: 40px;
1990
padding: 4px 32px;
1991
&:hover {
1993
// transition: none;
1994
// background-color: hover-overlay($on-surface);
1995
}
1996
&:disabled {
1998
color: theme-color.disabled(theme-color.$on-surface);
1999
}
2000
accelerator {
2002
color: theme-color.hint(theme-color.$on-surface);
2003
&:dir(ltr) {
2005
margin-left: 24px;
2006
margin-right: 16px - 32px;
2007
}
2008
&:dir(rtl) {
2010
margin-left: 16px - 32px;
2011
margin-right: 24px;
2012
}
2013
}
2014
&:disabled accelerator {
2016
color: theme-color.disabled-hint(theme-color.$on-surface);
2017
}
2018
}
2019
check,
2021
radio {
2022
&,
2023
&:focus,
2024
&:hover,
2025
&:active,
2026
&:disabled {
2027
// transition: none;
2028
background-color: transparent;
2029
background-image: none;
2030
}
2031
}
2032
arrow,
2034
check,
2035
radio {
2036
min-width: 16px;
2037
min-height: 16px;
2038
margin: 0;
2039
padding: 0;
2040
&.left {
2042
margin-left: 8px - 32px;
2043
margin-right: 8px;
2044
}
2045
&.right {
2047
margin-left: 8px;
2048
margin-right: 8px - 32px;
2049
}
2050
}
2051
button.model {
2053
@extend %button-flat;
2054
// min-height: 32px;
2056
// padding: 0 8px;
2057
// border-radius: $corner-radius;
2058
&:checked {
2060
// color: $primary;
2061
}
2062
}
2063
box.inline-buttons {
2065
padding: 0 8px;
2066
button.image-button.model {
2068
}
2069
}
2070
box.circular-buttons {
2072
padding: 4px 32px;
2073
button.circular.image-button.model {
2075
padding: 12px;
2076
}
2077
}
2078
}
2079
/**
2081
* Popovers
2082
*/
2083
popover {
2085
font: initial; // Decouple the font of popovers from their entry/textview
2086
&.background {
2088
background-color: transparent;
2089
}
2090
> arrow,
2092
> contents {
2093
transition: theme.$transition-shadow;
2094
box-shadow: theme.$shadow-z4;
2095
background-color: theme-color.$surface-z8;
2096
color: theme-color.$on-surface;
2097
&:backdrop {
2099
box-shadow: theme.$shadow-z2;
2100
}
2101
}
2102
@at-root %popover-border {
2104
border-width: 1px;
2105
border-style: solid;
2106
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
2107
background-clip: padding-box;
2108
}
2109
> arrow {
2111
@extend %popover-border;
2112
}
2113
> contents {
2115
padding: 8px;
2116
@if gtk.$version >= 4.2 {
2118
border-radius: theme.$corner-radius;
2119
} @else {
2120
@extend %popover-border;
2121
border-radius: theme.$corner-radius + 1px;
2122
}
2123
> list,
2125
.view,
2126
> .toolbar {
2127
border-style: none;
2128
box-shadow: none;
2129
background-color: transparent;
2130
}
2131
separator {
2133
// margin: 4px 0;
2134
}
2135
list separator {
2137
// margin: 0;
2138
}
2139
}
2140
.osd &,
2142
&.touch-selection,
2143
&.magnifier {
2144
// @extend %osd;
2145
}
2146
button {
2148
@extend %button-outlined;
2149
}
2150
frame,
2152
.frame {
2153
border: 1px solid theme-color.divider(theme-color.$on-surface);
2154
box-shadow: none;
2155
background-color: transparent;
2156
}
2157
.linked:not(.vertical) > entry:not(:only-child) {
2159
// border-radius: $corner-radius $corner-radius 0 0;
2160
}
2161
}
2162
/**
2164
* Notebooks
2165
*/
2166
notebook {
2168
&:focus:focus-visible > header > tabs > tab:checked {
2169
background-color: theme-color.focus-overlay(theme-color.$primary);
2170
}
2171
> header {
2173
&.top {
2174
box-shadow: inset 0 -1px theme-color.divider(theme-color.$on-surface);
2175
> tabs {
2177
> tab {
2178
box-shadow: inset 0 -2px transparent;
2179
&:checked {
2181
box-shadow: inset 0 -2px theme-color.$primary;
2182
}
2183
}
2184
}
2185
}
2186
&.bottom {
2188
box-shadow: inset 0 1px theme-color.divider(theme-color.$on-surface);
2189
> tabs {
2191
> tab {
2192
box-shadow: inset 0 2px transparent;
2193
&:checked {
2195
box-shadow: inset 0 2px theme-color.$primary;
2196
}
2197
}
2198
}
2199
}
2200
&.left {
2202
box-shadow: inset -1px 0 theme-color.divider(theme-color.$on-surface);
2203
> tabs {
2205
> tab {
2206
box-shadow: inset -2px 0 transparent;
2207
&:checked {
2209
box-shadow: inset -2px 0 theme-color.$primary;
2210
}
2211
}
2212
}
2213
}
2214
&.right {
2216
box-shadow: inset 1px 0 theme-color.divider(theme-color.$on-surface);
2217
> tabs {
2219
> tab {
2220
box-shadow: inset 2px 0 transparent;
2221
&:checked {
2223
box-shadow: inset 2px 0 theme-color.$primary;
2224
}
2225
}
2226
}
2227
}
2228
&.top > tabs > arrow {
2230
@extend %notebook_vert_arrows;
2231
}
2232
&.bottom > tabs > arrow {
2234
@extend %notebook_vert_arrows;
2235
}
2236
@at-root %notebook_vert_arrows {
2238
&.down {
2239
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2240
}
2241
&.up {
2243
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2244
}
2245
}
2246
&.left > tabs > arrow {
2248
@extend %notebook_horz_arrows;
2249
}
2250
&.right > tabs > arrow {
2252
@extend %notebook_horz_arrows;
2253
}
2254
@at-root %notebook_horz_arrows {
2256
&.down {
2257
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2258
}
2259
&.up {
2261
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2262
}
2263
}
2264
> tabs > arrow {
2266
min-height: 16px;
2267
min-width: 16px;
2268
padding: 4px;
2269
border-radius: 0;
2270
color: theme-color.hint(theme-color.$on-surface);
2271
@extend %ripple;
2272
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
2273
&:disabled {
2275
color: theme-color.disabled-hint(theme-color.$on-surface);
2276
}
2277
}
2278
> tabs > tab {
2280
@extend %ripple;
2281
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
2282
min-height: theme.$small-size;
2283
min-width: theme.$small-size;
2284
padding: theme.$container-padding 12px;
2285
color: theme-color.hint(theme-color.$on-surface);
2286
font-weight: 500;
2287
&:hover {
2289
// background-color: hover-overlay($on-surface, $alt: true);
2290
}
2291
&:active {
2293
// background-image: radial-gradient(circle, pressed-overlay($on-surface) 10%, transparent 10%);
2294
}
2295
&:disabled {
2297
color: theme-color.disabled-hint(theme-color.$on-surface);
2298
}
2299
&:checked {
2301
@include drawing.ink-color(theme-color.$primary, $hover-alt: true);
2302
color: theme-color.$primary;
2303
&:hover {
2305
// background-color: hover-overlay($primary, $alt: true);
2306
}
2307
&:active {
2309
// background-image: radial-gradient(circle, pressed-overlay($primary) 10%, transparent 10%);
2310
}
2311
&:disabled {
2313
color: theme-color.disabled-hint(theme-color.$on-surface);
2314
}
2315
&.reorderable-page {
2317
// border-color: divider($on-surface);
2318
// background-color: $surface-z1;
2319
}
2320
}
2321
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2323
> box {
2324
transition: background-color theme.$state-duration theme.$ease-out;
2325
margin: -(theme.$container-padding) -12px;
2326
padding: theme.$container-padding 12px;
2327
&:drop(active) {
2329
background-color: theme-color.hover-overlay(theme-color.$on-surface);
2330
}
2331
}
2332
// colors the button like the label, overridden otherwise
2334
button.flat {
2335
@extend %button-small;
2336
&:last-child {
2338
margin-left: theme.$container-padding;
2339
margin-right: theme.$container-padding - 12px;
2340
}
2341
&:first-child {
2343
margin-left: theme.$container-padding - 12px;
2344
margin-right: theme.$container-padding;
2345
}
2346
}
2347
}
2348
}
2349
}
2350
/**
2352
* Scrollbars
2353
*/
2354
scrollbar {
2356
$_slider_min_length: 24px;
2357
transition: theme.$transition;
2359
background-clip: padding-box;
2360
// background-color: $surface-z1;
2361
// scrollbar border
2363
&.top { border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); }
2364
&.bottom { border-top: 1px solid theme-color.divider(theme-color.$on-surface); }
2365
&.left { border-right: 1px solid theme-color.divider(theme-color.$on-surface); }
2366
&.right { border-left: 1px solid theme-color.divider(theme-color.$on-surface); }
2367
// slider
2369
> range > trough > slider {
2370
transition: background-color theme.$state-duration theme.$ease-out;
2371
min-width: 10px;
2372
min-height: 10px;
2373
border: 3px solid transparent;
2374
border-radius: theme.$circular-radius;
2375
background-clip: padding-box;
2376
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface);
2377
&:hover {
2379
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "hover");
2380
}
2381
&:active {
2383
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "pressed");
2384
}
2385
&:disabled {
2387
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "disabled");
2388
}
2389
}
2390
&.horizontal > range > trough > slider {
2392
min-width: $_slider_min_length;
2393
}
2394
&.vertical > range > trough > slider {
2396
min-height: $_slider_min_length;
2397
}
2398
> range.fine-tune {
2400
> trough > slider {
2401
min-width: 4px;
2402
min-height: 4px;
2403
}
2404
&.horizontal > trough > slider {
2406
margin: 3px 0;
2407
}
2408
&.vertical > trough > slider {
2410
margin: 0 3px;
2411
}
2412
}
2413
&.overlay-indicator {
2415
> range:not(.fine-tune) > trough > slider {
2416
transition-property: background-color, min-height, min-width;
2417
}
2418
&:not(.dragging):not(.hovering) {
2420
border-color: transparent;
2421
background-color: transparent;
2422
> range > trough > slider {
2424
min-width: 4px;
2425
min-height: 4px;
2426
margin: 3px - 1px;
2427
border: 1px solid rgba(theme-color.$surface-z1, 0.3);
2428
}
2429
&.horizontal > range > trough > slider {
2431
min-width: $_slider_min_length;
2432
}
2433
&.vertical > range > trough > slider {
2435
min-height: $_slider_min_length;
2436
}
2437
}
2438
&.dragging,
2440
&.hovering {
2441
background-color: theme-color.$surface-z8;
2442
}
2443
}
2444
}
2445
/**
2447
* Switch
2448
*/
2449
switch {
2451
transition: all theme.$state-duration theme.$ease-out;
2452
margin: theme.$container-padding 0;
2453
padding: 0 2px;
2454
border: 5px solid transparent;
2455
border-radius: theme.$circular-radius;
2456
background-color: theme-color.stroke(theme-color.$on-surface);
2457
background-clip: padding-box;
2458
font-size: 0;
2459
&:checked {
2461
background-color: rgba(theme-color.$primary, .5);
2462
}
2463
&:disabled {
2465
opacity: .5;
2466
}
2467
// hide on/off icons for >=3.24.5
2469
> image {
2470
margin: -8px;
2471
-gtk-icon-transform: scale(0);
2472
}
2473
> slider {
2475
transition: all theme.$state-duration theme.$ease-out;
2476
min-width: 20px;
2477
min-height: 20px;
2478
margin: -3px -2px;
2479
border-radius: theme.$circular-radius;
2480
box-shadow:
2481
0 0 0 10px transparent,
2482
0 0 0 -10px theme-color.pressed-overlay(theme-color.$on-surface),
2483
theme.$shadow-z1;
2484
background-color: theme-color.$surface-switch-thumb;
2485
}
2486
&:hover > slider {
2488
box-shadow:
2489
0 0 0 10px theme-color.hover-overlay(theme-color.$on-surface),
2490
0 0 0 -10px theme-color.pressed-overlay(theme-color.$on-surface),
2491
theme.$shadow-z1;
2492
}
2493
&:focus > slider {
2495
box-shadow:
2496
0 0 0 10px theme-color.focus-overlay(theme-color.$on-surface),
2497
0 0 0 -10px theme-color.pressed-overlay(theme-color.$on-surface),
2498
theme.$shadow-z1;
2499
}
2500
&:active > slider {
2502
box-shadow:
2503
0 0 0 10px theme-color.hover-overlay(theme-color.$on-surface),
2504
0 0 0 10px theme-color.pressed-overlay(theme-color.$on-surface),
2505
theme.$shadow-z1;
2506
}
2507
&:checked > slider {
2509
background-color: theme-color.$primary;
2510
}
2511
&:checked:hover > slider {
2513
box-shadow:
2514
0 0 0 10px theme-color.hover-overlay(theme-color.$primary),
2515
0 0 0 -10px theme-color.pressed-overlay(theme-color.$primary),
2516
theme.$shadow-z1;
2517
}
2518
&:checked:focus > slider {
2520
box-shadow:
2521
0 0 0 10px theme-color.focus-overlay(theme-color.$primary),
2522
0 0 0 -10px theme-color.pressed-overlay(theme-color.$primary),
2523
theme.$shadow-z1;
2524
}
2525
&:checked:active > slider {
2527
box-shadow:
2528
0 0 0 10px theme-color.hover-overlay(theme-color.$primary),
2529
0 0 0 10px theme-color.pressed-overlay(theme-color.$primary),
2530
theme.$shadow-z1;
2531
}
2532
row:selected & {
2534
}
2535
}
2536
/**
2538
* Check and Radio items
2539
*/
2540
// draw regular check and radio items using our PNG assets
2542
// all assets are rendered from assets.svg. never add pngs directly
2543
// selection-mode
2545
.view.content-view.check:not(list),
2546
.content-view:not(list) .tile check {
2547
min-height: 40px;
2548
min-width: 40px;
2549
margin: 0;
2550
padding: 0;
2551
background-color: transparent;
2552
background-image: none;
2553
-gtk-icon-shadow: theme.$icon-shadow-z2;
2554
&:hover,
2556
&:active {
2557
-gtk-icon-shadow: theme.$icon-shadow-z4;
2558
}
2559
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2561
&#{$class} {
2562
$_url: 'assets/selectionmode-checkbox#{$suffix}#{theme.$asset-suffix}';
2563
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2565
}
2566
}
2567
}
2568
checkbutton,
2570
radiobutton {
2571
border-spacing: 4px;
2572
&.text-button {
2574
padding: 4px;
2575
}
2576
}
2577
$check-radio-size: 40px;
2579
check,
2581
radio {
2582
min-height: 24px;
2583
min-width: 24px;
2584
margin: -($check-radio-size - 24px) / 2;
2585
padding: ($check-radio-size - 24px) / 2;
2586
border-radius: theme.$circular-radius;
2587
color: theme-color.hint(theme-color.$on-surface);
2588
@extend %ripple;
2589
@include drawing.ink-color(theme-color.$on-surface);
2590
&:checked,
2592
&:indeterminate {
2593
color: theme-color.$primary;
2594
@include drawing.ink-color(theme-color.$primary);
2595
}
2596
&:disabled {
2598
color: theme-color.disabled-hint(theme-color.$on-surface);
2599
}
2600
}
2601
%check,
2603
check {
2604
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2605
&:checked {
2607
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2608
}
2609
&:indeterminate {
2611
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2612
}
2613
}
2614
%radio,
2616
radio {
2617
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2618
&:checked {
2620
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2621
}
2622
&:indeterminate {
2624
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2625
}
2626
border-image-slice: $check-radio-size / 2px;
2628
border-image-width: $check-radio-size / 2;
2629
$radio-indicator-size: 10px / $check-radio-size / 2;
2631
border-image-source: radial-gradient(circle, theme-color.$primary 0%, transparent 0%);
2633
&:checked:not(:indeterminate) {
2635
border-image-source: radial-gradient(circle, theme-color.$primary 4.5px, transparent 5px);
2636
&:disabled {
2638
border-image-source: radial-gradient(circle, theme-color.disabled-hint(theme-color.$on-surface) 4.5px, transparent 5px);
2639
}
2640
}
2641
}
2642
%small_check,
2644
popover.menu modelbutton check {
2645
min-height: 16px;
2646
min-width: 16px;
2647
border-radius: theme.$corner-radius;
2648
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2649
&:checked {
2651
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2652
}
2653
&:indeterminate {
2655
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2656
}
2657
}
2658
%small_radio,
2660
popover.menu modelbutton radio {
2661
min-height: 16px;
2662
min-width: 16px;
2663
border-image: none;
2664
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2665
&:checked {
2667
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2668
}
2669
&:indeterminate {
2671
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2672
}
2673
}
2674
// ANIMATION:
2676
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2677
// the transformation is set on the active state and it get reset on the checked state.
2678
radio:not(:checked):active {
2679
// -gtk-icon-transform: scale(0);
2680
}
2681
// Otherwise, treeview.view styling will be applied...
2683
treeview.view check,
2684
treeview.view radio {
2685
padding: 0;
2686
color: theme-color.hint(theme-color.$on-surface);
2687
&:checked,
2689
&:indeterminate {
2690
color: theme-color.$primary;
2691
}
2692
&:disabled {
2694
color: theme-color.disabled-hint(theme-color.$on-surface);
2695
}
2696
&,
2698
&:hover,
2699
&:selected,
2700
&:selected:hover {
2701
background-color: transparent;
2702
}
2703
}
2704
treeview.view radio:checked {
2706
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2707
border-image: none;
2708
}
2709
/**
2711
* GtkScale
2712
*/
2713
scale {
2715
// sizing
2716
$_marks_length: 8px;
2717
$_marks_distance: 7px;
2718
$trough_size: 2px;
2720
$finetune_trough_size: 4px;
2721
$slider_size: 32px;
2723
$slider_margin: -($slider_size - $trough_size) / 2;
2725
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2726
$color_slider_margin: -($slider_size) * 3 / 4;
2728
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2729
min-height: $trough_size;
2731
min-width: $trough_size;
2732
&.horizontal {
2734
padding: (theme.$medium-size - $trough_size) / 2 12px;
2735
}
2736
&.vertical {
2738
padding: 12px (theme.$medium-size - $trough_size) / 2;
2739
}
2740
// click-and-hold the slider to activate
2742
&.fine-tune {
2743
&.horizontal {
2744
min-height: $finetune_trough_size;
2745
padding-top: (theme.$medium-size - $finetune_trough_size) / 2;
2746
padding-bottom: (theme.$medium-size - $finetune_trough_size) / 2;
2747
}
2748
&.vertical {
2750
min-width: $finetune_trough_size;
2751
padding-left: (theme.$medium-size - $finetune_trough_size) / 2;
2752
padding-right: (theme.$medium-size - $finetune_trough_size) / 2;
2753
}
2754
// to make the trough grow in fine-tune mode
2756
> trough > slider {
2757
margin: $finetune_slider_margin;
2758
}
2759
}
2760
// the backing bit
2762
> trough {
2763
transition: background-color theme.$state-duration theme.$ease-out;
2764
background-color: theme-color.stroke(theme-color.$on-surface);
2765
&:disabled {
2767
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
2768
}
2769
// the colored part of the backing bit
2771
> highlight {
2772
transition: background-image theme.$state-duration theme.$ease-out;
2773
background-image: image(theme-color.$primary);
2774
&:disabled {
2776
background-color: theme-color.$surface-z0;
2777
background-image: image(theme-color.disabled-hint(theme-color.$on-surface));
2778
}
2779
}
2780
// this is another differently styled part of the backing bit, the most relevant use case is for example
2782
// in media player to indicate how much video stream as been cached
2783
> fill {
2784
transition: background-color theme.$state-duration theme.$ease-out;
2785
background-color: theme-color.stroke(theme-color.$on-surface);
2786
&:disabled {
2788
background-color: transparent;
2789
}
2790
}
2791
> slider {
2793
transition: background-color theme.$state-duration theme.$ease-out,
2794
background-size theme.$ripple-fade-out-duration theme.$ease-out,
2795
background-image theme.$ripple-opacity-fade-out-duration theme.$ease-out;
2796
min-width: $slider_size;
2797
min-height: $slider_size;
2798
// the slider is inside the trough, so to have make it bigger there's a negative margin
2799
margin: $slider_margin;
2800
border-radius: 50%;
2801
background-repeat: no-repeat;
2802
background-position: center;
2803
background-size: auto, 1000% 1000%;
2804
color: theme-color.$primary;
2805
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2807
&#{$class} {
2808
$_url: 'assets/scale-slider#{$suffix}#{theme.$asset-suffix}';
2809
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2811
radial-gradient(circle, transparent 10%, transparent 10%);
2812
}
2813
}
2814
&:hover {
2816
background-color: theme-color.hover-overlay(theme-color.$primary);
2817
}
2818
&:focus {
2820
background-color: theme-color.focus-overlay(theme-color.$primary);
2821
}
2822
&:active {
2824
$_url: 'assets/scale-slider#{theme.$asset-suffix}';
2825
transition: background-color theme.$state-duration theme.$ease-out,
2827
background-size 0ms,
2828
background-image 0ms;
2829
animation: ripple-on-slider theme.$ripple-duration theme.$ease-out forwards;
2830
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2831
radial-gradient(circle, theme-color.pressed-overlay(theme-color.$primary) 10%, transparent 10%);
2832
background-size: auto, 0% 0%;
2833
}
2834
}
2835
}
2836
> marks,
2838
> value {
2839
color: theme-color.hint(theme-color.$on-surface);
2840
}
2841
> value {
2843
font-feature-settings: "tnum";
2844
}
2845
indicator {
2847
background-color: theme-color.stroke(theme-color.$on-surface);
2848
}
2849
//marks margins
2851
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2852
(horizontal, bottom, bottom, top),
2853
(vertical, top, left, right),
2854
(vertical, bottom, right, left) {
2855
&.#{$scale_orient} > marks {
2856
&.#{$marks_class} {
2857
margin-#{$marks_margin}: $_marks_distance;
2858
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2859
}
2860
}
2861
&.#{$scale_orient}.fine-tune > marks {
2863
&.#{$marks_class} {
2864
margin-#{$marks_margin}: $_marks_distance - 1px;
2865
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2866
}
2867
}
2868
}
2869
&.horizontal {
2871
indicator {
2872
min-height: $_marks_length;
2873
min-width: 1px;
2874
}
2875
}
2876
&.vertical {
2878
indicator {
2879
min-height: 1px;
2880
min-width: $_marks_length;
2881
}
2882
}
2883
// *WARNING* scale with marks madness following
2885
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2887
@each $marks_class, $marks_infix in (
2888
".marks-before:not(.marks-after)": "-marks-before",
2889
".marks-after:not(.marks-before)": "-marks-after"
2890
) {
2891
&#{$dir_class}#{$marks_class} > trough > slider {
2892
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2893
&#{$state_class} {
2894
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{theme.$asset-suffix}';
2895
background-image:
2897
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2898
radial-gradient(circle, transparent 10%, transparent 10%);
2899
}
2900
}
2901
&:active {
2903
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{theme.$asset-suffix}';
2904
background-image:
2906
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2907
radial-gradient(circle, theme-color.pressed-overlay(theme-color.$primary) 10%, transparent 10%);
2908
}
2909
}
2910
}
2911
}
2912
&.color {
2914
min-height: 0;
2915
min-width: 0;
2916
&.horizontal {
2918
// specificity bump
2919
&:dir(ltr),
2920
&:dir(rtl) {
2921
padding: 0 0 12px 0;
2922
slider {
2924
margin-bottom: $color_slider_margin;
2925
margin-top: $color_marks_slider_margin;
2926
}
2927
}
2928
}
2929
&.vertical {
2931
&:dir(ltr) {
2932
padding: 0 0 0 12px;
2933
slider {
2935
margin-left: $color_slider_margin;
2936
margin-right: $color_marks_slider_margin;
2937
}
2938
}
2939
&:dir(rtl) {
2941
padding: 0 12px 0 0;
2942
slider {
2944
margin-right: $color_slider_margin;
2945
margin-left: $color_marks_slider_margin;
2946
}
2947
}
2948
}
2949
}
2950
}
2951
/**
2953
* Progress bars
2954
*/
2955
progressbar {
2957
// FIXME: insensitive state missing and some other state should be set probably
2958
color: theme-color.hint(theme-color.$on-surface);
2959
font-size: smaller;
2960
font-feature-settings: "tnum";
2961
> trough {
2963
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
2964
> progress {
2966
background-color: theme-color.$primary;
2967
}
2968
}
2969
// sizing
2971
&.horizontal > trough {
2972
min-width: 150px;
2973
&,
2975
> progress {
2976
min-height: 4px;
2977
}
2978
}
2979
&.vertical > trough {
2981
min-height: 80px;
2982
&,
2984
> progress {
2985
min-width: 4px;
2986
}
2987
}
2988
// progressbar.osd used for epiphany page loading progress
2990
&.osd {
2991
// min-width: 4px;
2992
// min-height: 4px;
2993
// background-color: transparent;
2994
> trough {
2996
// background-color: transparent;
2997
> progress {
2999
// background-color: $primary;
3000
}
3001
}
3002
}
3003
// makes the progress indicator disappear, when the fraction is 0
3005
> trough.empty > progress {
3006
all: unset;
3007
}
3008
}
3009
/**
3011
* Level Bar
3012
*/
3013
levelbar {
3015
&.horizontal {
3016
> trough > block {
3017
min-height: 4px;
3018
}
3019
&.discrete > trough > block {
3021
min-width: theme.$medium-size;
3022
&:not(:last-child) {
3024
margin-right: 2px;
3025
}
3026
}
3027
}
3028
&.vertical {
3030
> trough > block {
3031
min-width: 4px;
3032
}
3033
&.discrete > trough > block {
3035
min-height: theme.$medium-size;
3036
&:not(:last-child) {
3038
margin-bottom: 2px;
3039
}
3040
}
3041
}
3042
> trough {
3044
}
3045
> trough > block {
3047
&.low {
3048
background-color: theme-color.$warning;
3049
}
3050
&.high,
3052
&:not(.empty) {
3053
background-color: theme-color.$primary;
3054
}
3055
&.full {
3057
background-color: theme-color.$success;
3058
}
3059
&.empty {
3061
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
3062
}
3063
}
3064
}
3065
/**
3067
* Print dialog
3068
*/
3069
window.dialog.print {
3071
paper {
3072
// padding: 0;
3073
// border: 1px solid divider($on-surface);
3074
border-radius: theme.$corner-radius;
3075
box-shadow: theme.$shadow-z1;
3076
background-color: theme-color.$surface-z1;
3077
color: theme-color.$on-surface;
3078
}
3079
.dialog-action-box {
3081
margin: 12px;
3082
}
3083
}
3084
/**
3086
* Frames
3087
*/
3088
frame,
3090
.frame {
3091
// border: 1px solid divider($on-surface);
3092
border-radius: theme.$corner-radius;
3093
box-shadow: theme.$shadow-z1;
3094
background-color: theme-color.$surface-z1;
3095
color: theme-color.$on-surface;
3096
button {
3098
@extend %button-outlined;
3099
}
3100
}
3101
frame > label {
3103
margin: 4px;
3104
}
3105
statusbar {
3107
padding: 6px 10px;
3108
// border-top: 1px solid divider($on-surface);
3109
}
3110
actionbar > revealer > box {
3112
padding: theme.$container-padding;
3113
border-spacing: theme.$container-padding;
3114
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
3115
// background-clip: border-box;
3116
button:not(.suggested-action):not(.destructive-action) {
3118
@extend %button-flat;
3119
}
3120
.linked:not(.vertical) > entry:not(:only-child) {
3122
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
3123
}
3124
}
3125
scrolledwindow {
3127
// This is used when content is touch-dragged past boundaries.
3128
// draws a box on top of the content, the size changes programmatically.
3129
@at-root overshoot {
3130
&.top { @include drawing.overshoot(top); }
3131
&.bottom { @include drawing.overshoot(bottom); }
3133
&.left { @include drawing.overshoot(left); }
3135
&.right { @include drawing.overshoot(right); }
3137
}
3138
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3140
@at-root undershoot {
3141
// &.top { @include undershoot(top); }
3142
// &.bottom { @include undershoot(bottom); }
3144
// &.left { @include undershoot(left); }
3146
// &.right { @include undershoot(right); }
3148
}
3149
// the small square between two scrollbars
3151
@at-root junction {
3152
border-style: solid none none solid;
3153
border-width: 1px;
3154
border-color: theme-color.divider(theme-color.$on-surface);
3155
// background-color: $surface-z1;
3156
&:dir(rtl) {
3158
border-style: solid solid none none;
3159
}
3160
}
3161
}
3162
// vbox and hbox separators
3164
separator {
3165
min-width: 1px;
3166
min-height: 1px;
3167
background-color: theme-color.divider(theme-color.$on-surface);
3168
}
3169
%hide_separators {
3171
min-width: 0;
3172
min-height: 0;
3173
background-color: transparent;
3174
}
3175
/**
3177
* Lists
3178
*/
3179
listview,
3181
list {
3182
// background-color: $surface-z1;
3183
// color: $on-surface;
3184
> row {
3186
padding: 2px;
3187
&.expander {
3189
padding: 0;
3190
.row-header {
3192
padding: 2px;
3193
}
3194
}
3195
}
3196
&.separators:not(.horizontal) > row:not(:first-child) {
3198
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
3199
}
3200
&.separators.horizontal > row:not(:first-child) {
3202
border-left: 1px solid theme-color.divider(theme-color.$on-surface);
3203
}
3204
}
3205
row {
3207
background-clip: padding-box;
3208
&.activatable {
3210
@extend %ripple;
3211
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
3212
@include drawing.list-item;
3213
// this is for indicathing which row generated a popover
3215
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3216
&.has-open-popup {
3217
background-color: theme-color.activated-overlay(theme-color.$on-surface);
3218
}
3219
}
3220
&:selected {
3222
background-color: theme-color.$selected-overlay;
3223
@include drawing.ink-color(theme-color.$primary, $hover-alt: true, $on: theme-color.$selected-overlay);
3225
&.has-open-popup {
3227
background-color: theme-color.activated-overlay(theme-color.$primary, $on: theme-color.$selected-overlay);
3228
}
3229
}
3230
}
3231
listview {
3233
> row {
3234
@extend %ripple;
3235
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
3236
@include drawing.list-item;
3237
}
3238
&:selected {
3240
background-color: theme-color.$selected-overlay;
3241
@include drawing.ink-color(theme-color.$primary, $hover-alt: true, $on: theme-color.$selected-overlay);
3243
}
3244
}
3245
columnview {
3247
// move padding to child cells
3248
> listview > row {
3249
padding: 0;
3250
// align horizontal sizing with header buttons
3252
> cell {
3253
min-height: 24px;
3254
padding: 4px 6px;
3255
&:not(:last-child) {
3257
border-right: 1px solid transparent;
3258
}
3259
}
3260
}
3261
// make column separators visible when :show-column-separators is true
3263
&.column-separators > listview > row > cell {
3264
border-right-color: theme-color.divider(theme-color.$on-surface);
3265
}
3266
// shrink vertically for .data-table
3268
&.data-table > listview > row > cell {
3269
padding-top: 2px;
3270
padding-bottom: 2px;
3271
}
3272
}
3273
// rich lists usually containing other widgets than just labels/text
3275
.rich-list {
3276
> row {
3277
padding: 12px;
3278
min-height: theme.$medium-size;
3279
> box {
3281
border-spacing: 12px;
3282
}
3283
}
3284
}
3285
/**
3287
* App Notifications
3288
*/
3289
.app-notification {
3291
@extend %toolbar-osd;
3292
margin: 8px;
3293
border-style: none;
3294
button {
3296
@extend %button-flat;
3297
&.text-button:not(:disabled) {
3299
color: theme-color.$primary;
3300
@include drawing.ink-color(theme-color.$primary);
3301
}
3302
}
3303
}
3304
/**
3306
* Expanders
3307
*/
3308
expander {
3310
transition: all theme.$state-duration theme.$ease-out;
3311
min-width: 16px;
3312
min-height: 16px;
3313
padding: 4px;
3314
border-radius: theme.$circular-radius;
3315
color: theme-color.hint(theme-color.$on-surface);
3316
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3317
@extend %ripple;
3319
@include drawing.ink-color(theme-color.$on-surface);
3320
&:disabled {
3322
color: theme-color.disabled-hint(theme-color.$on-surface);
3323
}
3324
&:checked {
3326
&:dir(ltr) {
3327
-gtk-icon-transform: rotate(-180deg);
3328
}
3329
&:dir(rtl) {
3331
-gtk-icon-transform: rotate(180deg);
3332
}
3333
}
3334
}
3335
indent {
3337
min-width: 16px;
3338
min-height: 16px;
3339
padding: 4px;
3340
}
3341
expander-widget {
3343
&:focus > box > title > expander {
3344
box-shadow: inset 0 0 0 9999px theme-color.focus-overlay(theme-color.$on-surface);
3345
}
3346
> box > title:drop(active) > expander,
3348
> box > title:hover > expander {
3349
box-shadow: inset 0 0 0 9999px theme-color.hover-overlay(theme-color.$on-surface);
3350
}
3351
> box > title:active > expander {
3353
transition-duration: drawing.$ripple-active-transition-duration;
3354
animation: ripple theme.$ripple-duration theme.$ease-out forwards;
3355
background-size: 0% 0%;
3356
background-image: radial-gradient(circle, theme-color.pressed-overlay(theme-color.$on-surface) 10%, transparent 10%);
3357
}
3358
}
3359
/**
3361
* Calendar
3362
*/
3363
calendar {
3365
// border: 1px solid divider($on-surface);
3366
border-radius: theme.$corner-radius;
3367
box-shadow: theme.$shadow-z1;
3368
background-color: theme-color.$surface-z1;
3369
color: theme-color.$on-surface;
3370
&:disabled {
3372
color: theme-color.disabled(theme-color.$on-surface);
3373
}
3374
> header {
3376
padding: 4px;
3377
border-spacing: 4px;
3378
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
3379
> button.image-button {
3381
padding: 0;
3382
min-width: 28px;
3383
min-height: 28px;
3384
border-radius: theme.$circular-radius;
3385
background-color: transparent;
3386
color: theme-color.hint(theme-color.$on-surface);
3387
@include drawing.ink-color(theme-color.$on-surface, $button-style: "flat");
3388
&:disabled {
3390
color: theme-color.disabled-hint(theme-color.$on-surface);
3391
}
3392
}
3393
}
3394
> grid {
3396
padding: 4px;
3397
border-spacing: 4px;
3398
> label {
3400
// padding: 4px;
3401
padding: 0;
3402
min-width: 28px;
3403
min-height: 28px;
3404
border-radius: theme.$circular-radius;
3405
}
3406
> label.day-name,
3408
> label.week-number {
3409
color: theme-color.hint(theme-color.$on-surface);
3410
font-weight: 500;
3411
}
3412
> label.day-number {
3414
@extend %ripple;
3415
@include drawing.ink-color(theme-color.$on-surface);
3416
&.today {
3418
box-shadow: inset 0 0 0 1px theme-color.hint(theme-color.$on-surface);
3419
}
3420
&.other-month {
3422
color: theme-color.disabled-hint(theme-color.$on-surface);
3423
}
3424
&:selected {
3426
background-color: theme-color.$selected-overlay;
3427
box-shadow: inset 0 0 0 1px transparent;
3428
@include drawing.ink-color(theme-color.$primary, $on: theme-color.$selected-overlay);
3429
}
3430
}
3431
}
3432
}
3433
/**
3435
* Dialogs
3436
*/
3437
window.dialog.message { // Message Dialog styling
3439
&.csd.background {
3440
min-width: 280px;
3441
border-radius: theme.$corner-radius; // rounded bottom border styling for csd version
3442
background-color: theme-color.$surface-z8;
3443
}
3444
> .titlebar {
3446
min-height: 24px;
3447
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
3448
background-color: transparent;
3449
color: theme-color.$on-surface;
3450
&:backdrop {
3452
background-color: transparent;
3453
color: theme-color.hint(theme-color.$on-surface);
3454
}
3455
}
3456
> box.dialog-vbox.vertical {
3458
border-spacing: 20px;
3459
> box.vertical > box.horizontal {
3461
margin: 0 24px - 30px;
3462
}
3463
}
3464
label.title {
3466
font-weight: 500;
3467
font-size: pt(20px);
3468
letter-spacing: pt(.15px);
3469
}
3470
// Hint text
3472
label.title + label {
3473
color: theme-color.hint(theme-color.$on-surface);
3474
}
3475
list,
3477
.view {
3478
background-color: transparent;
3479
}
3480
.dialog-action-area > button {
3482
@extend %button-flat;
3483
&:not(:disabled) {
3485
color: theme-color.$primary;
3486
@include drawing.ink-color(theme-color.$primary);
3487
}
3488
&.suggested-action:not(:disabled) {
3490
background-color: transparent;
3491
// color: $primary;
3492
// @include ink-color($primary);
3493
}
3494
&.destructive-action:not(:disabled) {
3496
background-color: transparent;
3497
color: theme-color.$error;
3498
@include drawing.ink-color(theme-color.$error);
3499
}
3500
}
3501
}
3502
.dialog-action-area {
3504
// margin-top: -$container-padding;
3505
padding: theme.$container-padding;
3506
border-spacing: theme.$container-padding;
3507
}
3508
filechooser {
3510
.dialog-action-box {
3511
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
3512
}
3513
#pathbarbox {
3515
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
3516
// background-color: $surface-z0;
3517
> stack > box > button { // The new folder button
3519
@extend %button-flat;
3520
border-radius: theme.$circular-radius;
3522
}
3523
}
3524
}
3525
filechooserbutton > button > box {
3527
border-spacing: 6px;
3528
}
3529
filechooserbutton:drop(active) {
3531
// box-shadow: none;
3532
}
3533
/**
3535
* Sidebar
3536
*/
3537
.sidebar {
3539
border-style: none;
3540
&:not(separator) {
3542
@at-root %sidebar_left,
3543
&:dir(ltr),
3544
&.left,
3545
&.left:dir(rtl) {
3546
border-right: 1px solid theme-color.divider(theme-color.$on-surface);
3547
border-left-style: none;
3548
}
3549
@at-root %sidebar_right,
3551
&:dir(rtl),
3552
&.right {
3553
border-left: 1px solid theme-color.divider(theme-color.$on-surface);
3554
border-right-style: none;
3555
}
3556
}
3557
list {
3559
// background-color: transparent;
3560
}
3561
paned & {
3563
&:dir(rtl):not(:dir(ltr)),
3564
&:dir(ltr):not(:dir(rtl)) {
3565
border-style: none;
3566
}
3567
}
3568
}
3569
stacksidebar.sidebar {
3571
list {
3572
padding: 4px;
3573
}
3574
list.separators:not(.horizontal) > row:not(:first-child) {
3576
border-top-style: none;
3577
}
3578
row {
3580
min-height: 32px;
3581
padding: 0 8px - 6px;
3582
border-radius: theme.$corner-radius;
3583
color: theme-color.hint(theme-color.$on-surface);
3584
font-weight: 500;
3585
&:selected {
3587
background-color: theme-color.activated-overlay(theme-color.$primary);
3588
color: theme-color.$primary;
3589
@include drawing.ink-color(theme-color.$primary, $on: theme-color.activated-overlay(theme-color.$primary));
3590
}
3591
+ row {
3593
margin-top: 4px;
3594
}
3595
> label {
3597
padding-left: 6px;
3598
padding-right: 6px;
3599
}
3600
&.needs-attention > label {
3602
@extend %needs-attention;
3603
}
3604
}
3605
}
3606
separator.sidebar {
3608
&.selection-mode,
3609
.selection-mode & {
3610
// background-color: divider($on-surface);
3611
}
3612
}
3613
/**
3615
* File chooser
3616
*/
3617
// dim the sidebar icons, see bug #786613 for details on this oddity
3619
row image.sidebar-icon {
3620
transition: color theme.$state-duration theme.$ease-out;
3621
color: theme-color.hint(theme-color.$on-surface);
3622
&:disabled {
3624
color: theme-color.disabled-hint(theme-color.$on-surface);
3625
}
3626
}
3627
placessidebar.sidebar {
3629
list {
3630
padding: 4px 0;
3631
> separator {
3633
margin: 4px 0;
3634
}
3635
}
3636
row {
3638
// Needs overriding of the GtkListBoxRow padding
3639
min-height: 32px;
3640
margin: 0 4px; // Remove unwanted hard-coded vertical margins with -1px
3641
padding: 0;
3642
border-radius: theme.$corner-radius;
3643
color: theme-color.hint(theme-color.$on-surface);
3644
font-weight: 500;
3645
// Using margins/padding directly in the SidebarRow
3647
// will make the animation of the new bookmark row jump
3648
> revealer {
3649
padding: 0 8px;
3650
}
3651
&:selected {
3653
background-color: theme-color.activated-overlay(theme-color.$primary);
3654
color: theme-color.$primary;
3655
@include drawing.ink-color(theme-color.$primary, $on: theme-color.activated-overlay(theme-color.$primary));
3656
image.sidebar-icon {
3658
color: theme-color.$primary;
3659
}
3660
}
3661
&:disabled {
3663
color: theme-color.disabled(theme-color.$on-surface);
3664
}
3665
image.sidebar-icon {
3667
&:dir(ltr) {
3668
padding-right: 8px;
3669
}
3670
&:dir(rtl) {
3672
padding-left: 8px;
3673
}
3674
}
3675
label.sidebar-label {
3677
&:dir(ltr) {
3678
padding-right: 2px;
3679
}
3680
&:dir(rtl) {
3682
padding-left: 2px;
3683
}
3684
}
3685
@at-root button.sidebar-button {
3687
@extend %button-flat-basic;
3688
@extend %button-small;
3689
}
3690
&.sidebar-placeholder-row {
3692
background-color: theme-color.hover-overlay(theme-color.$on-surface);
3693
}
3694
&.sidebar-new-bookmark-row {
3696
color: theme-color.$primary;
3697
image.sidebar-icon {
3699
color: theme-color.$primary;
3700
}
3701
}
3702
}
3703
}
3704
placesview {
3706
.server-list-button {
3707
> image {
3708
-gtk-icon-transform: rotate(0turn);
3709
}
3710
&:checked > image {
3712
-gtk-icon-transform: rotate(-0.5turn);
3713
}
3714
}
3715
> actionbar > revealer > box > box {
3717
border-spacing: theme.$container-padding;
3718
}
3719
// this selects the "connect to server" label
3721
> actionbar > revealer > box > box > label {
3722
padding-left: 8px;
3723
padding-right: 8px;
3724
}
3725
}
3726
/**
3728
* Paned
3729
*/
3730
paned {
3732
> separator {
3733
background-clip: content-box;
3734
// -gtk-icon-source: none; // defeats the ugly default handle decoration
3735
&.wide {
3737
min-width: 4px;
3738
min-height: 4px;
3739
border: 1px solid theme-color.divider(theme-color.$on-surface);
3740
background-color: transparent;
3741
}
3742
}
3743
&.horizontal > separator {
3745
&:not(.wide) {
3746
margin: 0 -4px;
3747
padding: 0 4px;
3748
}
3749
&.wide {
3751
border-style: none solid;
3752
}
3753
}
3754
&.vertical > separator {
3756
&:not(.wide) {
3757
margin: -4px 0;
3758
padding: 4px 0;
3759
}
3760
&.wide {
3762
border-style: solid none;
3763
}
3764
}
3765
}
3766
/**
3768
* GtkVideo
3769
*/
3770
video {
3772
background-color: black;
3773
image.osd {
3775
min-width: 64px;
3776
min-height: 64px;
3777
border-radius: 32px;
3778
background-color: theme-color.$scrim;
3779
color: theme-color.$on-scrim;
3780
}
3781
controls.osd {
3783
padding: 4px;
3784
background-image:
3785
linear-gradient(
3786
to bottom,
3787
transparent,
3788
rgba(black, .1) 30%,
3789
rgba(black, .2) 50%,
3790
rgba(black, .4)
3791
);
3792
color: theme-color.on(black);
3793
button {
3795
background-color: transparent;
3796
color: theme-color.hint(theme-color.on(black));
3797
@include drawing.ink-color(theme-color.on(black));
3798
}
3799
}
3800
}
3801
/**
3803
* GtkInfoBar
3804
*/
3805
infobar {
3807
> revealer > box {
3808
padding: 8px;
3809
border-spacing: 12px;
3810
}
3811
&.action:hover > revealer > box {
3813
background-image: image(theme-color.hover-overlay(theme-color.$on-surface));
3814
}
3815
&.info > revealer > box,
3817
&.question > revealer > box {
3818
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
3819
// background-color: $surface-z1;
3820
button {
3822
@extend %button-flat;
3823
&.text-button:not(:disabled) {
3825
color: theme-color.$primary;
3826
@include drawing.ink-color(theme-color.$primary);
3827
}
3828
}
3829
}
3830
&.warning > revealer > box {
3832
background-color: theme-color.$warning;
3833
color: theme-color.$on-warning;
3834
button.flat {
3836
color: theme-color.$on-warning;
3837
@include drawing.ink-color(theme-color.$on-warning);
3838
}
3839
selection {
3841
}
3842
link {
3844
color: theme-color.$on-warning;
3845
}
3846
}
3847
&.error > revealer > box {
3849
background-color: theme-color.$error;
3850
color: theme-color.$on-error;
3851
button.flat {
3853
color: theme-color.$on-error;
3854
@include drawing.ink-color(theme-color.$on-error);
3855
}
3856
selection {
3858
}
3859
link {
3861
color: theme-color.$on-error;
3862
}
3863
}
3864
// Remove ugly hard-coded padding
3866
button label {
3867
// margin: 0 -4px;
3868
}
3869
}
3870
/**
3872
* Tooltips
3873
*/
3874
tooltip {
3876
&.background {
3877
// background-color needs to be set this way otherwise it gets drawn twice
3878
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3879
background-color: theme-color.$tooltip;
3880
color: theme-color.$on-tooltip;
3881
}
3882
min-height: 32px - 4px * 2;
3884
padding: 4px 8px;
3885
border-radius: theme.$corner-radius;
3886
&:not(.csd) {
3888
background-color: theme-color.$tooltip;
3889
}
3890
> box {
3892
border-spacing: 6px;
3893
}
3894
.dim-label {
3896
color: theme-color.hint(theme-color.$on-tooltip);
3897
}
3898
}
3899
/**
3901
* Color Chooser
3902
*/
3903
colorswatch {
3905
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3906
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3907
// applied to the overlay box.
3908
// base color corners rounding
3910
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3911
// sports a bigger radius.
3912
// nth-child is needed by the custom color strip.
3913
transition: theme.$transition-shadow;
3915
box-shadow: theme.$shadow-z1;
3916
&:drop(active),
3918
&.activatable:hover {
3919
box-shadow: theme.$shadow-z3;
3920
}
3921
&:disabled {
3923
opacity: .5;
3924
// box-shadow: none;
3925
}
3926
&.top {
3928
border-top-left-radius: theme.$corner-radius;
3929
border-top-right-radius: theme.$corner-radius;
3930
}
3931
&.bottom {
3933
border-bottom-left-radius: theme.$corner-radius;
3934
border-bottom-right-radius: theme.$corner-radius;
3935
}
3936
&.left,
3938
&:first-child:not(.top) {
3939
border-top-left-radius: theme.$corner-radius;
3940
border-bottom-left-radius: theme.$corner-radius;
3941
}
3942
&.right,
3944
&:last-child:not(.bottom) {
3945
border-top-right-radius: theme.$corner-radius;
3946
border-bottom-right-radius: theme.$corner-radius;
3947
}
3948
&.dark {
3950
color: theme-color.$on-dark;
3951
}
3952
&.light {
3954
color: theme-color.$on-light;
3955
}
3956
&#add-color-button {
3958
// border-radius: $corner-radius 0 0 $corner-radius;
3959
background-color: theme-color.$surface-z8;
3960
color: theme-color.$on-surface;
3961
&:only-child {
3963
// border-radius: $corner-radius;
3964
}
3965
}
3966
row:selected & {
3968
}
3969
&#editor-color-sample {
3971
border-radius: theme.$corner-radius;
3972
}
3973
}
3974
// colorscale popup
3976
colorchooser .popover.osd {
3977
transition: theme.$transition-shadow;
3978
border-radius: theme.$corner-radius;
3979
box-shadow: theme.$shadow-z4, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
3980
background-color: theme-color.$surface-z8;
3981
&:backdrop {
3983
box-shadow: theme.$shadow-z2, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
3984
}
3985
}
3986
/**
3988
* Misc
3989
*/
3990
// content view (grid/list)
3992
.content-view {
3993
// background-color: $surface-z0;
3994
&:hover {
3996
// -gtk-icon-filter: brightness(1.2);
3997
}
3998
}
3999
.scale-popup {
4001
.osd & {
4002
// @extend %osd;
4003
button.flat {
4005
}
4006
}
4007
// +/- buttons on GtkVolumeButton popup
4009
button {
4010
}
4011
}
4012
/**
4014
* Window Decorations
4015
*/
4016
window {
4018
&.csd {
4019
transition: theme.$transition-shadow;
4020
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
4021
border-radius: theme.$corner-radius;
4022
box-shadow: theme.$shadow-z16, 0 16px 24px 2px transparent, 0 6px 30px 5px transparent;
4023
&:backdrop {
4025
// the transparent shadow here is to enforce that the shadow extents don't
4026
// change when we go to backdrop, to prevent jumping windows.
4027
// The biggest shadow should be in the same order then in the active state
4028
// or the jumping will happen during the transition.
4029
box-shadow: theme.$shadow-z4, 0 16px 24px 2px transparent, 0 6px 30px 5px transparent;
4030
}
4031
}
4032
// server-side decorations as used by mutter
4034
&.ssd {
4035
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); // just doing borders, wm draws actual shadows
4036
}
4037
&.solid-csd {
4039
margin: 0;
4040
padding: 2px;
4041
border-radius: 0;
4042
box-shadow: none;
4043
box-shadow: inset 0 1px theme-color.highlight(theme-color.$titlebar);
4044
background-color: theme-color.$titlebar;
4045
&:backdrop {
4047
background-color: theme-color.$titlebar-backdrop;
4048
}
4049
}
4050
&.maximized,
4052
&.fullscreen,
4053
&.tiled,
4054
&.tiled-top,
4055
&.tiled-left,
4056
&.tiled-right,
4057
&.tiled-bottom {
4058
border-radius: 0;
4059
}
4060
}
4061
// catch all extend :)
4063
%selected_items {
4065
background-color: theme-color.$selected-overlay;
4066
}
4067
.monospace {
4069
font-family: monospace;
4070
}
4071
/**
4073
* Touch Copy & Paste
4074
*/
4075
// touch selection handlebars for the Popover.osd above
4077
cursor-handle {
4078
min-width: 24px;
4079
min-height: 24px;
4080
border-radius: 50%;
4081
background-color: theme-color.$primary;
4082
// -gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4083
&.top:dir(ltr),
4085
&.bottom:dir(rtl) {
4086
border-top-right-radius: 0;
4087
// -gtk-icon-transform: rotate(90deg);
4088
}
4089
&.bottom:dir(ltr),
4091
&.top:dir(rtl) {
4092
border-top-left-radius: 0;
4093
// -gtk-icon-transform: unset;
4094
}
4095
&.insertion-cursor:dir(ltr),
4097
&.insertion-cursor:dir(rtl) {
4098
margin-top: 6px;
4099
transform: rotate(45deg);
4100
}
4101
}
4102
shortcuts-section {
4104
margin: 20px;
4105
}
4106
.shortcuts-search-results {
4108
margin: 20px;
4109
border-spacing: 24px;
4110
}
4111
// shortcut window keys
4113
shortcut {
4114
border-spacing: 6px;
4115
}
4116
shortcut > .keycap {
4118
min-width: 28px - 8px * 2;
4119
// min-height: 28px - 2px;
4120
min-height: 28px;
4121
// margin-top: 2px;
4122
// padding-bottom: 2px;
4123
padding-left: 8px;
4124
padding-right: 8px;
4125
// border: solid 1px divider($on-surface);
4127
// border-radius: $corner-radius + 1px;
4128
border-radius: theme.$corner-radius;
4129
// box-shadow: inset 0 -2px divider($on-surface);
4130
box-shadow: theme.$shadow-z1;
4131
background-color: theme-color.$surface-z8;
4132
color: theme-color.$on-surface;
4133
font-size: smaller;
4134
}
4135
// FIXME needs to be done widget by widget, this wildcard should really die
4137
:drop(active) {
4138
// caret-color: $primary;
4139
}
4140
// FIXME aggregate with buttons
4142
stackswitcher > button.text-button {
4143
min-width: 100px;
4144
}
4145
stackswitcher.circular {
4147
border-spacing: 12px;
4148
// FIXME aggregate with buttons
4150
> button.circular {
4151
min-width: theme.$medium-size;
4152
min-height: theme.$medium-size;
4153
padding: 0;
4154
}
4155
}
4156
/**
4158
* App Icons
4159
*/
4160
// Outline for low res icons
4162
.lowres-icon {
4163
// -gtk-icon-shadow: none;
4164
}
4165
// Drapshadow for large icons
4167
.icon-dropshadow {
4168
// -gtk-icon-shadow: none;
4169
}
4170
/**
4172
* Emoji
4173
*/
4174
popover.emoji-picker > contents {
4176
padding: 0;
4177
emoji {
4179
min-width: 3em;
4180
min-height: 3em;
4181
// padding: 8px;
4182
border-radius: theme.$corner-radius;
4183
// font-size: larger;
4184
@extend %ripple;
4186
@include drawing.ink-color(theme-color.$on-surface);
4187
}
4188
}
4189
.emoji-searchbar {
4191
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
4192
> entry.search {
4194
border-image: none;
4195
border-radius: 0;
4196
box-shadow: none;
4197
background-color: transparent;
4198
}
4199
}
4200
.emoji-toolbar {
4202
padding: 4px;
4203
border-spacing: 4px;
4204
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
4205
> button.emoji-section {
4207
&:checked {
4208
background-color: theme-color.activated-overlay(theme-color.$primary);
4209
color: theme-color.$primary;
4210
@include drawing.ink-color(theme-color.$primary, $on: theme-color.activated-overlay(theme-color.$primary));
4211
}
4212
}
4213
}
4214
popover.emoji-completion > contents {
4216
padding: 8px 0;
4217
emoji-completion-row {
4219
min-height: 32px;
4220
padding: 0 8px;
4221
@extend %ripple;
4222
@include drawing.ink-color(theme-color.$on-surface);
4223
> box {
4225
border-spacing: 8px;
4226
}
4227
}
4228
emoji {
4230
// min-width: 3em;
4231
// min-height: 3em;
4232
// padding: 8px;
4233
border-radius: theme.$corner-radius;
4234
@extend %ripple;
4236
@include drawing.ink-color(theme-color.$on-surface);
4237
}
4238
}
4239
popover.entry-completion > contents {
4241
padding: 0;
4242
treeview.view {
4244
min-height: 32px; // FIXME: should be in .cell
4245
padding: 8px 0;
4246
> .cell {
4248
padding: 0 4px; // FIXME: should be `0 8px`
4249
&:selected:hover {
4251
background-color: theme-color.focus-overlay(theme-color.$on-surface);
4252
}
4253
}
4254
}
4255
}
4256