Unicode text, UTF-8 text
1
@use "../../theme";
2
@use "../../theme-color";
3
@use "../../shadow";
4
@use "gtk";
5
@use "drawing";
6
/**
8
* Base States
9
*/
10
.background {
12
background-color: theme-color.$surface-z0;
13
color: theme-color.$on-surface;
14
}
15
dnd {
17
color: theme-color.$on-surface;
18
}
19
.normal-icons {
21
-gtk-icon-size: 16px;
22
}
23
.large-icons {
25
-gtk-icon-size: 32px;
26
}
27
image:disabled {
29
-gtk-icon-filter: opacity(0.5);
30
}
31
.view {
33
// background-color: $surface-z1;
34
// color: $on-surface;
35
> .cell:hover {
37
background-color: theme-color.hover-overlay(theme-color.$on-surface, $alt: true);
38
}
39
&:disabled {
41
color: theme-color.disabled(theme-color.$on-surface);
42
}
43
&:selected {
45
background-color: theme-color.$selected-overlay;
46
}
47
> .cell:selected:hover {
49
background-color: theme-color.hover-overlay(theme-color.$primary, $alt: true, $on: theme-color.$selected-overlay);
50
}
51
}
52
textview {
54
caret-color: theme-color.$primary;
55
> text {
57
> selection {
58
background-color: theme-color.$selected-overlay;
59
}
60
}
61
> border {
63
// background-color: $surface-z1-alt;
64
color: theme-color.hint(theme-color.$on-surface); // FIXME: not working
65
}
66
}
67
iconview {
69
> .cell {
70
border-radius: theme.$corner-radius;
71
}
72
&:drop(active) {
74
// box-shadow: none;
75
}
76
> dndtarget:drop(active) {
78
box-shadow: inset 0 0 0 2px theme-color.$primary;
79
}
80
}
81
%iconview-desktop {
83
// background-color: $scrim;
84
color: theme-color.$on-dark;
85
text-shadow: shadow.$text-shadow;
86
> rubberband {
88
border: 1px solid theme-color.primary(theme-color.$on-dark);
89
background-color: rgba(theme-color.primary(theme-color.$on-dark), .24);
90
}
91
}
92
rubberband {
94
border: 1px solid theme-color.$primary;
95
background-color: rgba(theme-color.$primary, .24);
96
}
97
flowbox {
99
padding: 4px;
100
border-spacing: 4px;
101
> flowboxchild {
103
padding: 4px;
104
border-radius: theme.$corner-radius;
105
@extend %ripple;
107
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
108
&:selected {
110
background-color: theme-color.$selected-overlay;
111
@include drawing.ink-color(theme-color.$primary, $hover-alt: true, $on: theme-color.$selected-overlay);
113
}
114
}
115
}
116
gridview {
118
padding: 4px;
119
border-spacing: 4px;
120
> child {
122
padding: 4px;
123
border-radius: theme.$corner-radius;
124
@extend %ripple;
126
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
127
&:selected {
129
background-color: theme-color.$selected-overlay;
130
@include drawing.ink-color(theme-color.$primary, $hover-alt: true, $on: theme-color.$selected-overlay);
132
}
133
}
134
}
135
coverflow > cover {
137
box-shadow: shadow.$z2;
138
background-color: theme-color.$surface-z8;
139
color: theme-color.$on-surface;
140
}
141
.content-view .tile {
143
// margin: 2px;
144
// padding: 0;
145
// border-radius: 0;
146
// background-color: black;
147
&:selected {
149
background-color: transparent;
150
}
151
}
152
label {
154
caret-color: theme-color.$primary;
155
&.separator {
157
color: theme-color.hint(theme-color.$on-surface);
158
}
159
&.error {
161
color: theme-color.$error;
162
}
163
> selection {
165
background-color: theme-color.$selected-overlay;
166
}
167
&:disabled {
169
color: theme-color.disabled(theme-color.$on-surface);
170
headerbar &,
172
modelbutton &,
173
tab &,
174
button & {
175
color: inherit;
176
}
177
}
178
&.osd {
180
border-radius: theme.$corner-radius;
181
background-color: theme-color.$tooltip;
182
color: theme-color.$on-tooltip;
183
}
184
}
185
.dim-label {
187
color: theme-color.hint(theme-color.$on-surface);
188
}
189
window.assistant {
191
.sidebar {
192
padding: 4px 0;
193
> label {
195
min-height: theme.$medium-size;
196
padding: 0 12px;
197
color: theme-color.disabled(theme-color.$on-surface);
198
font-weight: 500;
199
&.highlight {
201
color: theme-color.$on-surface;
202
}
203
}
204
}
205
}
206
window.aboutdialog > box > box > image.large-icons {
208
-gtk-icon-size: 128px;
209
}
210
%osd,
212
.osd {
213
// opacity: .9;
214
}
215
/**
217
* Spinner Animation
218
*/
219
@keyframes spin {
221
to {
222
transform: rotate(1turn);
223
}
224
}
225
spinner {
227
// background: none;
228
opacity: 0; // non spinning spinner makes no sense
229
color: theme-color.$primary;
230
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
231
transition: opacity theme.$state-duration * 4 theme.$ease-out;
232
animation: spin 1s linear infinite;
233
&:checked {
235
opacity: 1;
236
}
237
&:disabled {
239
color: theme-color.disabled-hint(theme-color.$on-surface);
240
}
241
}
242
/**
244
* General Typography
245
*/
246
@function pt($size: $font-size) {
248
@return ($size * .75 / 1px) * 1pt;
249
}
250
.large-title {
252
font-weight: 400;
253
font-size: pt(48px);
254
}
255
.title-1 {
257
font-weight: 400;
258
font-size: pt(34px);
259
letter-spacing: pt(.25px);
260
}
261
.title-2 {
263
font-weight: 400;
264
font-size: pt(24px);
265
}
266
.title-3 {
268
font-weight: 500;
269
font-size: pt(20px);
270
letter-spacing: pt(.15px);
271
}
272
.title-4 {
274
font-weight: 400;
275
font-size: pt(16px);
276
letter-spacing: pt(.5px);
277
}
278
.heading {
280
font-weight: 500;
281
font-size: 1em;
282
}
283
.body {
285
font-weight: 400;
286
font-size: 1em;
287
}
288
.caption-heading {
290
font-weight: 500;
291
font-size: pt(12px);
292
letter-spacing: pt(1.5px);
293
}
294
.caption {
296
font-weight: 400;
297
font-size: pt(12px);
298
letter-spacing: pt(.4px);
299
}
300
/**
302
* Text Entries
303
*/
304
%entry,
306
entry {
307
min-height: theme.$medium-size;
308
padding: 0 8px;
309
border-spacing: theme.$container-padding;
310
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
311
@include drawing.entry(normal);
313
&:hover,
315
&:drop(active) {
316
@include drawing.entry(hover);
317
}
318
&:focus-within {
320
@include drawing.entry(checked);
321
> text > placeholder {
323
opacity: 0;
324
}
325
}
326
&:disabled {
328
@include drawing.entry(disabled);
329
}
330
&.flat {
332
min-height: 0;
333
padding: 2px;
334
border-radius: 0;
335
background-color: transparent;
336
}
337
> text {
339
> placeholder {
340
color: theme-color.hint(theme-color.$on-surface);
341
}
342
> selection {
344
background-color: theme-color.$selected-overlay;
345
}
346
> block-cursor {
348
background-color: theme-color.$primary;
349
color: theme-color.$on-primary;
350
}
351
> undershoot {
353
&.left {
354
// @include undershoot(left);
355
}
356
&.right {
358
// @include undershoot(right);
359
}
360
}
361
}
362
// icons inside the entry
364
> image {
365
min-width: theme.$small-size;
366
min-height: theme.$small-size;
367
border-radius: theme.$circular-radius;
368
@extend %ripple;
369
@include drawing.ink-color(theme-color.$on-surface);
370
color: theme-color.hint(theme-color.$on-surface);
371
margin-top: theme.$container-padding;
372
margin-bottom: theme.$container-padding;
373
&:disabled {
375
color: theme-color.disabled(theme-color.$on-surface);
376
}
377
&.left {
379
margin-left: (theme.$medium-size - theme.$small-size) / 2 - 8px;
380
}
381
&.right {
383
margin-right: (theme.$medium-size - theme.$small-size) / 2 - 8px;
384
}
385
}
386
&.password > image.caps-lock-indicator {
388
}
389
// entry error and warning style
391
@each $class, $color in (".error": theme-color.$error, ".warning": theme-color.$warning) {
392
&#{$class} {
393
@include drawing.entry(normal, $color);
394
&:focus-within {
396
@include drawing.entry(checked, $color);
397
}
398
&:disabled {
400
@include drawing.entry(disabled, $color);
401
}
402
}
403
}
404
.osd & {
406
}
407
> progress > trough > progress {
409
margin: 0 -8px;
410
margin-bottom: -4px;
411
border-bottom: 2px solid theme-color.$primary;
412
background-color: transparent;
413
}
414
// linked entries
416
.linked:not(.vertical) > & {
417
// @extend %linked;
418
}
419
// Vertically linked entries
421
.linked.vertical > & {
422
// @extend %linked-vertical;
423
}
424
}
425
%entry_raised {
427
border-radius: theme.$corner-radius;
428
@include drawing.entry(raised-normal);
430
&:focus-within {
432
@include drawing.entry(raised-focus);
433
}
434
&:drop(active) {
436
@include drawing.entry(raised-hover);
437
}
438
&:disabled {
440
@include drawing.entry(raised-disabled);
441
}
442
// entry error and warning style
444
@each $class, $color in (".error": theme-color.$error, ".warning": theme-color.$warning) {
445
&#{$class} {
446
@include drawing.entry(raised-normal, $color);
447
&:focus-within {
449
@include drawing.entry(raised-focus, $color);
450
}
451
&:disabled {
453
@include drawing.entry(raised-disabled, $color);
454
}
455
image {
457
color: theme-color.hint(theme-color.on($color));
458
&:hover,
460
&:active {
461
color: theme-color.on($color);
462
}
463
&:disabled {
465
color: theme-color.disabled(theme-color.on($color));
466
}
467
}
468
}
469
}
470
}
471
treeview entry {
473
&,
474
&.flat {
475
background-color: theme-color.$surface-z1;
476
&,
478
&:focus-within {
479
border-image: none;
480
box-shadow: none;
481
}
482
}
483
}
484
.entry-tag {
486
margin: 2px;
487
border-radius: theme.$circular-radius;
488
box-shadow: none;
489
background-color: theme-color.fill(theme-color.$on-surface);
490
color: theme-color.$on-surface;
491
&:hover {
493
background-image: image(theme-color.hover-overlay(theme-color.$on-surface));
494
}
495
// side margins: compensate the entry padding with a negative margin
497
// then the negative margin itself
498
:dir(ltr) & {
499
margin-left: 4px;
500
margin-right: 0;
501
padding-left: 12px;
502
padding-right: 8px;
503
}
504
:dir(rtl) & {
506
margin-left: 0;
507
margin-right: 4px;
508
padding-left: 8px;
509
padding-right: 12px;
510
}
511
// seems any sizing doesn't work
513
&.button {
514
box-shadow: none;
515
background-color: transparent;
516
color: theme-color.hint(theme-color.$on-surface);
517
}
518
}
519
/**
521
* Buttons
522
*/
523
// stuff for .needs-attention
525
@keyframes needs-attention {
526
from {
527
background-image: radial-gradient(farthest-side, theme-color.$primary 0%, transparent 0%);
528
}
529
to {
531
background-image: radial-gradient(farthest-side, theme-color.$primary 100%, transparent 100%);
532
}
533
}
534
%button,
536
button {
537
min-height: 24px;
538
min-width: 16px;
539
padding: (theme.$medium-size - 24px) / 2 (theme.$medium-size - 16px) / 2;
540
border-radius: theme.$corner-radius;
541
background-color: theme-color.$surface-z8;
542
color: theme-color.$on-surface;
543
font-weight: 500;
544
@extend %ripple;
546
@include drawing.ink-color(theme-color.$on-surface, $on: theme-color.$surface-z8, $button-style: "raised");
547
&:disabled {
549
box-shadow: none;
550
background-color: theme-color.fill(theme-color.$on-surface);
551
color: theme-color.disabled(theme-color.$on-surface);
552
}
553
&:checked {
555
$background-color: theme-color.activated-overlay(theme-color.$primary, $on: theme-color.$surface-z8);
556
color: theme-color.$primary;
557
@include drawing.ink-color(theme-color.$primary, $on: $background-color, $button-style: "raised");
558
&:disabled {
560
box-shadow: none;
561
background-color: theme-color.activated-overlay(theme-color.$on-surface, $on: theme-color.fill(theme-color.$on-surface));
562
color: theme-color.disabled(theme-color.$on-surface);
563
}
564
}
565
&.text-button {
567
min-width: 64px - 16px * 2;
568
padding-left: 16px;
569
padding-right: 16px;
570
}
571
&.image-button {
573
min-width: 24px;
574
padding: (theme.$medium-size - 24px) / 2;
575
border-radius: theme.$circular-radius;
576
}
577
// NOTE: Some image-only buttons use this as well
579
&.text-button.image-button {
580
min-width: 64px - 16px * 2;
581
padding-left: 16px;
582
padding-right: 16px;
583
// min-width: 24px;
584
// padding: ($medium-size - 24px) / 2;
585
border-radius: theme.$corner-radius;
586
label {
588
&:first-child {
589
// margin-left: 16px - ($medium-size - 24px) / 2;
590
}
591
&:last-child {
593
// margin-right: 16px - ($medium-size - 24px) / 2;
594
}
595
}
596
image:not(:only-child) {
598
// margin: 0 (24px - 16px) / 2;
599
}
600
image {
602
&:first-child {
603
margin-left: 12px - 16px;
604
margin-right: 8px;
605
}
606
&:last-child {
608
margin-left: 8px;
609
margin-right: 12px - 16px;
610
}
611
}
612
}
613
.linked:not(.vertical) > & {
615
// @extend %linked;
616
&.image-button:not(.text-button) {
618
// @extend %linked-image-button;
619
}
620
}
621
.linked.vertical > & {
623
// @extend %linked-vertical;
624
&.image-button:not(.text-button) {
626
// @extend %linked-vertical-image-button;
627
}
628
}
629
}
630
%button-outlined {
632
background-color: transparent;
633
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true, $button-style: "outlined");
634
}
635
%button-flat-basic {
637
background-color: transparent;
638
color: theme-color.hint(theme-color.$on-surface);
639
@include drawing.ink-color(theme-color.$on-surface, $button-style: "flat");
640
&:disabled {
642
background-color: transparent;
643
color: theme-color.disabled-hint(theme-color.$on-surface);
644
}
645
}
646
%button-flat-activatable {
648
@extend %button-flat-basic;
649
&:checked {
651
$background-color: theme-color.activated-overlay(theme-color.$primary);
652
color: theme-color.$primary;
653
@include drawing.ink-color(theme-color.$primary, $on: $background-color, $button-style: "flat");
654
&:disabled {
656
color: theme-color.disabled(theme-color.$on-surface);
657
}
658
}
659
}
660
%button-flat,
662
button.flat {
663
@extend %button-flat-activatable;
664
&.text-button {
666
min-width: 64px - 8px * 2;
667
padding-left: 8px;
668
padding-right: 8px;
669
}
670
&.text-button.image-button {
672
min-width: 24px;
673
padding: (theme.$medium-size - 24px) / 2;
674
label {
676
&:first-child {
677
margin-left: 12px - (theme.$medium-size - 24px) / 2;
678
}
679
&:last-child {
681
margin-right: 12px - (theme.$medium-size - 24px) / 2;
682
}
683
}
684
}
685
.linked:not(.vertical) > &,
687
.linked.vertical > & {
688
&:not(:only-child) { // specificity bump
689
border-radius: theme.$corner-radius;
690
&.image-button:not(.text-button) {
692
border-radius: theme.$circular-radius;
693
}
694
}
695
}
696
}
697
button {
699
// big standalone buttons like in Documents pager
700
&.osd {
701
padding: (theme.$large-size - 24px) / 2 (theme.$large-size - 16px) / 2;
702
&.image-button {
704
padding: (theme.$large-size - 24px) / 2;
705
}
706
&:disabled {
708
opacity: 0;
709
}
710
}
711
// overlay / OSD style
713
@at-root %osd_button,
714
.osd & {
715
}
716
// Suggested and Destructive Action buttons
718
@each $class, $color in (".suggested-action": theme-color.$primary, ".destructive-action": theme-color.$error) {
719
&#{$class} {
720
background-color: $color;
721
color: theme-color.on($color);
722
@include drawing.ink-color(theme-color.on($color), $on: $color, $button-style: "raised");
723
&:disabled {
725
box-shadow: none;
726
background-color: theme-color.fill(theme-color.$on-surface);
727
color: theme-color.disabled(theme-color.$on-surface);
728
}
729
&:checked {
731
background-color: theme-color.activated-overlay(theme-color.on($color), $on: $color);
732
}
733
&.flat {
735
background-color: transparent;
736
@include drawing.ink-color($color);
737
&:disabled {
739
box-shadow: none;
740
background-color: transparent;
741
color: theme-color.disabled-hint(theme-color.$on-surface);
742
}
743
&:checked {
745
background-color: theme-color.activated-overlay($color);
746
}
747
}
748
.osd & {
750
}
751
}
752
}
753
stackswitcher > & {
755
// to position the needs attention dot, padding is added to the button
756
// child, a label needs just lateral padding while an icon needs vertical
757
// padding added too.
758
> label {
760
margin: 0 -6px;
761
padding: 0 6px;
762
}
763
> image {
765
margin: -3px -6px;
766
padding: 3px 6px;
767
}
768
&.needs-attention {
770
> label,
771
> image {
772
@extend %needs-attention;
773
}
774
&:checked {
776
> label,
777
> image {
778
animation: none;
779
background-image: none;
780
}
781
}
782
}
783
}
784
&.font > box {
786
border-spacing: 6px;
787
> box {
789
> separator {
790
@extend %hide_separators;
791
}
792
> label {
794
// font-weight: bold;
795
}
796
}
797
}
798
// force circular button shape
800
&.close,
801
menubutton.circular > &,
802
&.circular {
803
border-radius: theme.$circular-radius;
804
}
805
}
806
%button-small {
808
min-height: theme.$small-size;
809
min-width: theme.$small-size;
810
padding: 0;
811
border-radius: theme.$circular-radius;
812
}
813
%needs-attention {
815
animation: needs-attention theme.$ripple-duration theme.$ease-out forwards;
816
background-repeat: no-repeat;
817
background-position: right 3px;
818
background-size: 6px 6px;
819
&:dir(rtl) {
821
background-position: left 3px;
822
}
823
}
824
.linked:not(stackswitcher) {
826
border-spacing: theme.$container-padding;
827
}
828
.linked:not(.vertical) > button.radio {
830
border-radius: 0;
831
&:first-child {
833
border-top-left-radius: theme.$corner-radius;
834
border-bottom-left-radius: theme.$corner-radius;
835
}
836
&:last-child {
838
border-top-right-radius: theme.$corner-radius;
839
border-bottom-right-radius: theme.$corner-radius;
840
}
841
&:not(:first-child) {
843
margin-left: -(theme.$container-padding);
844
}
845
}
846
.linked.vertical > button.radio {
848
border-radius: 0;
849
&:first-child {
851
border-top-left-radius: theme.$corner-radius;
852
border-top-right-radius: theme.$corner-radius;
853
}
854
&:last-child {
856
border-bottom-left-radius: theme.$corner-radius;
857
border-bottom-right-radius: theme.$corner-radius;
858
}
859
&:not(:first-child) {
861
margin-top: -(theme.$container-padding);
862
}
863
}
864
%linked-not-first-child {
866
border-top-left-radius: 0;
867
border-bottom-left-radius: 0;
868
}
869
%linked-not-last-child {
871
border-top-right-radius: 0;
872
border-bottom-right-radius: 0;
873
}
874
%linked {
876
&:not(:first-child) {
877
@extend %linked-not-first-child;
878
}
879
&:not(:last-child) {
881
@extend %linked-not-last-child;
882
}
883
}
884
%linked-vertical-not-first-child {
886
border-top-left-radius: 0;
887
border-top-right-radius: 0;
888
}
889
%linked-vertical-not-last-child {
891
border-bottom-left-radius: 0;
892
border-bottom-right-radius: 0;
893
}
894
%linked-vertical {
896
&:not(:first-child) {
897
@extend %linked-vertical-not-first-child;
898
}
899
&:not(:last-child) {
901
@extend %linked-vertical-not-last-child;
902
}
903
}
904
%linked-image-button {
906
&:first-child {
907
border-top-left-radius: theme.$corner-radius;
908
border-bottom-left-radius: theme.$corner-radius;
909
}
910
&:last-child {
912
border-top-right-radius: theme.$corner-radius;
913
border-bottom-right-radius: theme.$corner-radius;
914
}
915
&:only-child {
917
border-radius: theme.$circular-radius;
918
}
919
}
920
%linked-vertical-image-button {
922
&:first-child {
923
border-top-left-radius: theme.$corner-radius;
924
border-top-right-radius: theme.$corner-radius;
925
}
926
&:last-child {
928
border-bottom-left-radius: theme.$corner-radius;
929
border-bottom-right-radius: theme.$corner-radius;
930
}
931
&:only-child {
933
border-radius: theme.$circular-radius;
934
}
935
}
936
/* menu buttons */
938
modelbutton.flat {
939
// min-height: $menuitem-size;
940
// padding: 0 8px;
941
// border-radius: $corner-radius;
942
@extend %ripple;
944
@include drawing.ink-color(theme-color.$on-surface);
945
&:selected {
947
// background-color: $selected-overlay;
948
}
949
}
950
modelbutton.flat arrow {
952
min-width: 16px;
953
min-height: 16px;
954
color: theme-color.hint(theme-color.$on-surface);
955
&:disabled {
957
color: theme-color.disabled-hint(theme-color.$on-surface);
958
}
959
&.left {
961
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
962
}
963
&.right {
965
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
966
}
967
}
968
button.color {
970
min-width: theme.$small-size;
971
min-height: theme.$small-size;
972
padding: theme.$container-padding;
973
}
974
menubutton {
976
> button > box > arrow {
977
min-height: 16px;
978
min-width: 16px;
979
&.none {
981
-gtk-icon-source: -gtk-icontheme('open-menu-symbolic');
982
}
983
&.down {
985
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
986
}
987
&.up {
989
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
990
}
991
&.left {
993
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
994
}
995
&.right {
997
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
998
}
999
}
1000
}
1001
/**
1003
* Links
1004
*/
1005
link {
1007
color: theme-color.$primary;
1008
&:visited {
1010
color: theme-color.$visited;
1011
}
1012
}
1013
button.link {
1015
color: theme-color.$primary;
1016
@include drawing.ink-color(theme-color.$primary);
1017
&:visited {
1019
color: theme-color.$visited;
1020
@include drawing.ink-color(theme-color.$visited);
1021
}
1022
> label {
1024
text-decoration-line: underline;
1025
}
1026
}
1027
/**
1029
* GtkSpinButton
1030
*/
1031
spinbutton {
1033
font-feature-settings: "tnum";
1034
&:not(.vertical) {
1036
// in this horizontal configuration, the whole spinbutton
1037
// behaves as the entry, so we extend the entry styling
1038
// and nuke the style on the internal entry
1039
@extend %entry;
1040
> text {
1042
min-width: 32px;
1043
}
1044
> button {
1046
@extend %button-flat-basic;
1047
@extend %button-small;
1048
margin: theme.$container-padding 0;
1050
&.up:dir(ltr),
1052
&.down:dir(rtl) {
1053
// margin-left: $container-padding / 2;
1054
}
1055
&.up:dir(rtl),
1057
&.down:dir(ltr) {
1058
// margin-right: $container-padding / 2;
1059
}
1060
&.up:dir(ltr) {
1062
margin-right: (theme.$medium-size - theme.$small-size) / 2 - 8px;
1063
}
1064
&.up:dir(rtl) {
1066
margin-left: (theme.$medium-size - theme.$small-size) / 2 - 8px;
1067
}
1068
}
1069
}
1070
// OSD horizontal
1072
.osd &:not(.vertical) {
1073
}
1074
// Vertical
1076
&.vertical {
1077
// in the vertical configuration, we treat the spinbutton
1078
// as a box, and tweak the style of the entry in the middle
1079
// so that it's linked
1080
> text {
1082
@extend %entry_raised;
1083
min-height: theme.$medium-size;
1085
min-width: theme.$large-size;
1086
padding: 0;
1087
> selection {
1089
background-color: theme-color.$selected-overlay;
1090
}
1091
}
1092
button {
1094
min-height: theme.$medium-size;
1095
min-width: theme.$large-size;
1096
padding: 0;
1097
@extend %button-flat-basic;
1099
// Remove unwanted focus indicator
1101
&:focus:not(:hover):not(:active) {
1102
box-shadow: inset 0 0 0 9999px transparent;
1103
}
1104
&.up {
1106
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1107
}
1108
&.down {
1110
border-radius: 0 0 theme.$corner-radius theme.$corner-radius;
1111
}
1112
}
1113
}
1114
// OSD vertical
1116
.osd &.vertical {
1117
}
1118
// Misc
1120
treeview &:not(.vertical) {
1121
min-height: 0;
1122
border-style: none;
1123
border-radius: 0;
1124
> text {
1126
min-height: 0;
1127
padding: 1px 2px;
1128
}
1129
}
1130
}
1131
/**
1133
* ComboBoxes
1134
*/
1135
dropdown,
1137
combobox {
1138
arrow {
1139
min-width: 16px;
1140
min-height: 16px;
1141
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1142
transition: -gtk-icon-transform theme.$state-duration theme.$ease-out;
1143
}
1144
button:checked arrow {
1146
color: theme-color.$primary;
1147
-gtk-icon-transform: rotate(-.5turn);
1148
}
1149
}
1150
dropdown {
1152
> button > box {
1153
border-spacing: 6px;
1154
}
1155
> popover.menu > contents {
1157
// allow search entries with no padding
1158
padding: 0;
1159
listview {
1161
padding: 6px 0;
1162
> row {
1164
min-height: 32px - 4px * 2;
1165
padding: 4px 8px;
1166
&:selected {
1168
background-color: theme-color.focus-overlay(theme-color.$on-surface);
1169
}
1170
}
1171
}
1172
}
1173
}
1174
// drodowns with searchboxes on top
1176
.dropdown-searchbar {
1177
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
1178
> entry.search {
1180
border-image: none;
1181
border-radius: 0;
1182
box-shadow: none;
1183
background-color: transparent;
1184
}
1185
}
1186
combobox {
1188
> box > button > box {
1189
border-spacing: 6px;
1190
}
1191
cellview {
1193
margin: -2px;
1194
}
1195
// align menu labels with the button label
1197
> popover.menu > contents modelbutton {
1198
padding-left: 8px;
1199
padding-right: 8px;
1200
}
1201
> .linked:not(.vertical) > entry:not(:only-child) {
1203
// border-radius: $corner-radius $corner-radius 0 0;
1204
&:first-child {
1206
margin-right: -(theme.$medium-size + theme.$container-padding);
1207
padding-right: theme.$medium-size;
1208
}
1209
&:last-child {
1211
margin-left: -(theme.$medium-size + theme.$container-padding);
1212
padding-left: theme.$medium-size;
1213
}
1214
}
1215
> .linked:not(.vertical) > button:not(:only-child) {
1217
@extend %button-flat-activatable;
1218
// @extend %button-small;
1219
min-height: 16px;
1221
min-width: 16px;
1222
margin: (theme.$medium-size - theme.$small-size) / 2;
1223
padding: (theme.$small-size - 16px) / 2;
1224
border-radius: theme.$circular-radius;
1225
}
1226
}
1227
// the combo is a composite widget so the way we do button linking doesn't
1229
// work, special case needed. See
1230
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1231
.linked:not(.vertical) > combobox {
1233
&:not(:first-child) > box > button.combo {
1234
// @extend %linked-not-first-child;
1235
}
1236
&:not(:last-child) > box > button.combo {
1238
// @extend %linked-not-last-child;
1239
}
1240
}
1241
.linked.vertical > combobox {
1243
&:not(:first-child) > box > button.combo {
1244
// @extend %linked-vertical-not-first-child;
1245
}
1246
&:not(:last-child) > box > button.combo {
1248
// @extend %linked-vertical-not-last-child;
1249
}
1250
}
1251
dropdown > button.toggle,
1253
button.combo:only-child {
1254
padding-left: 8px;
1255
padding-right: 8px;
1256
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1257
font-weight: normal;
1258
@include drawing.entry(normal);
1260
&:focus {
1262
@include drawing.entry(focus);
1263
}
1264
&:drop(active),
1266
&:hover {
1267
@include drawing.entry(hover);
1268
}
1269
&:checked {
1271
@include drawing.entry(checked);
1272
}
1273
&:disabled {
1275
@include drawing.entry(disabled);
1276
}
1277
arrow {
1279
transition: color theme.$state-duration theme.$ease-out;
1280
color: theme-color.hint(theme-color.$on-surface);
1281
&:disabled {
1283
color: theme-color.disabled-hint(theme-color.$on-surface);
1284
}
1285
}
1286
}
1287
/**
1289
* Toolbars
1290
*/
1291
.toolbar {
1293
padding: 4px;
1294
border-spacing: 4px;
1295
&.top { border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); }
1297
&.bottom { border-top: 1px solid theme-color.divider(theme-color.$on-surface); }
1298
&.start { border-right: 1px solid theme-color.divider(theme-color.$on-surface); }
1299
&.end { border-left: 1px solid theme-color.divider(theme-color.$on-surface); }
1300
button {
1302
@extend %button-flat;
1303
}
1304
// on OSD
1306
.osd & {
1307
}
1308
// stand-alone OSD toolbars
1310
&.osd {
1311
@extend %toolbar-osd;
1312
// positional classes for `attached` osd toolbars
1314
&.left,
1315
&.right,
1316
&.top,
1317
&.bottom {
1318
border-radius: 0;
1319
}
1320
&.bottom {
1322
box-shadow: none;
1323
background-color: transparent;
1324
background-image:
1325
linear-gradient(
1326
to bottom,
1327
transparent,
1328
rgba(black, .1) 30%,
1329
rgba(black, .2) 50%,
1330
rgba(black, .4)
1331
);
1332
}
1333
}
1334
// toolbar separators
1336
&.horizontal > separator {
1337
margin: 4px 0;
1338
}
1339
&.vertical > separator {
1341
margin: 0 4px;
1342
}
1343
}
1344
%toolbar-osd {
1346
transition: theme.$transition-shadow;
1347
padding: theme.$container-padding;
1348
border-spacing: theme.$container-padding;
1349
border-radius: theme.$corner-radius;
1350
box-shadow: shadow.$z4, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
1351
background-color: theme-color.$surface-z8;
1352
&:backdrop {
1354
box-shadow: shadow.$z2, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
1355
}
1356
}
1357
// searchbar, location-bar & inline-toolbar
1359
.inline-toolbar {
1360
padding: theme.$container-padding;
1361
border-style: solid;
1362
border-width: 0 1px 1px;
1363
border-color: theme-color.divider(theme-color.$on-surface);
1364
background-color: theme-color.$surface-z1;
1365
}
1366
searchbar > revealer > box {
1368
padding: theme.$container-padding;
1369
border-spacing: theme.$container-padding;
1370
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
1371
}
1372
/**
1374
* Title buttons
1375
*/
1376
windowcontrols {
1378
border-spacing: theme.$container-padding;
1379
&:not(:only-child):not(.empty) {
1381
border-image:
1382
linear-gradient(
1383
to bottom,
1384
transparent 12px,
1385
theme-color.divider(theme-color.$on-titlebar) 12px,
1386
theme-color.divider(theme-color.$on-titlebar) calc(100% - 12px),
1387
transparent calc(100% - 12px)
1388
) 1;
1389
&.start:dir(ltr),
1391
&.end:dir(rtl) {
1392
padding-right: theme.$container-padding;
1393
border-right: 1px solid;
1394
}
1395
&.start:dir(rtl),
1397
&.end:dir(ltr) {
1398
padding-left: theme.$container-padding;
1399
border-left: 1px solid;
1400
}
1401
}
1402
button {
1404
}
1405
}
1406
/**
1408
* Header bars
1409
*/
1410
.titlebar {
1412
transition: background-color theme.$state-duration theme.$ease-out, color theme.$state-duration theme.$ease-out;
1413
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1414
box-shadow: shadow.$z2, inset 0 1px theme-color.highlight(theme-color.$titlebar);
1415
background-color: theme-color.$titlebar;
1416
color: theme-color.$on-titlebar;
1417
&:disabled {
1419
color: theme-color.disabled(theme-color.$on-titlebar);
1420
}
1421
&:backdrop {
1423
background-color: theme-color.$titlebar-backdrop;
1424
color: theme-color.hint(theme-color.$on-titlebar);
1425
&:disabled {
1427
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1428
}
1429
}
1430
box.start,
1432
box.end {
1433
border-spacing: theme.$container-padding;
1434
}
1435
.title {
1437
padding-left: 12px;
1438
padding-right: 12px;
1439
font-weight: bold;
1440
}
1441
.subtitle {
1443
padding-left: 12px;
1444
padding-right: 12px;
1445
font-size: smaller;
1446
}
1447
.subtitle,
1449
.dim-label {
1450
transition: color theme.$state-duration theme.$ease-out;
1451
color: theme-color.hint(theme-color.$on-titlebar);
1452
&:backdrop {
1454
color: theme-color.disabled(theme-color.$on-titlebar);
1455
}
1456
}
1457
// The separator for split headerbars
1459
headerbar + separator {
1460
background-color: theme-color.divider(theme-color.$on-titlebar);
1461
}
1462
entry {
1464
box-shadow: inset 0 -1px theme-color.stroke(theme-color.$on-titlebar);
1465
background-color: theme-color.entry-fill(theme-color.$on-titlebar);
1466
color: theme-color.$on-titlebar;
1467
&:disabled {
1469
box-shadow: inset 0 -1px theme-color.disabled-stroke(theme-color.$on-titlebar);
1470
background-color: theme-color.entry-fill(theme-color.$on-titlebar);
1471
color: theme-color.disabled(theme-color.$on-titlebar);
1472
}
1473
image {
1475
color: theme-color.hint(theme-color.$on-titlebar);
1476
&:hover,
1478
&:active {
1479
color: theme-color.$on-titlebar;
1480
}
1481
&:disabled {
1483
color: theme-color.disabled(theme-color.$on-titlebar);
1484
}
1485
}
1486
}
1487
.linked:not(.vertical) > entry:not(:only-child) {
1489
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1490
}
1491
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1493
@extend %button-flat;
1494
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1496
theme-color.$titlebar-indicator 0%,
1497
transparent 0%)
1498
0 0 0 / 0 0 0px;
1499
background-color: transparent;
1500
color: theme-color.hint(theme-color.$on-titlebar);
1501
@include drawing.ink-color(theme-color.$on-titlebar);
1502
&:disabled {
1504
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1505
}
1506
@at-root %titlebar-button-checked,
1508
&:checked {
1509
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1510
theme-color.$titlebar-indicator 100%,
1511
transparent 100%)
1512
0 0 2 / 0 0 2px;
1513
background-color: transparent;
1514
color: theme-color.$on-titlebar;
1515
@include drawing.ink-color(theme-color.$on-titlebar);
1516
&:disabled {
1518
background-color: transparent;
1519
color: theme-color.disabled(theme-color.$on-titlebar);
1520
}
1521
}
1522
&:backdrop {
1524
color: theme-color.disabled(theme-color.$on-titlebar);
1525
&:disabled {
1527
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1528
}
1529
&:checked {
1531
color: theme-color.hint(theme-color.$on-titlebar);
1532
&:disabled {
1534
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1535
}
1536
}
1537
}
1538
}
1539
button.suggested-action,
1541
button.destructive-action {
1542
&:disabled {
1543
background-color: theme-color.fill(theme-color.$on-titlebar);
1544
color: theme-color.disabled(theme-color.$on-titlebar);
1545
}
1546
}
1547
// FIXME: Ugly overriding
1549
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1550
min-width: 120px - 8px * 2;
1551
}
1552
// FIXME: Ugly overriding
1554
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1555
min-width: 0;
1556
padding-left: (theme.$medium-size - 24px) / 2;
1557
padding-right: (theme.$medium-size - 24px) / 2;
1558
}
1559
&.selection-mode {
1561
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1562
// but let's keep it for backwards compatibility.
1563
transition: background-color 0.1ms theme.$ripple-duration, color theme.$state-duration theme.$ease-out;
1564
animation: ripple-on-headerbar theme.$ripple-duration theme.$ease-out;
1565
box-shadow: shadow.$z2, inset 0 1px theme-color.highlight(theme-color.$primary);
1566
background-color: theme-color.$primary;
1567
color: theme-color.$on-primary;
1568
&:backdrop {
1570
color: theme-color.hint(theme-color.$on-primary);
1571
}
1572
.subtitle:link {
1574
color: theme-color.$on-primary;
1575
}
1576
button:not(.suggested-action):not(.destructive-action) {
1578
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1579
currentColor 0%,
1580
transparent 0%)
1581
0 0 0 / 0 0 0px;
1582
color: theme-color.$on-primary;
1583
&:disabled {
1585
color: theme-color.disabled(theme-color.$on-primary);
1586
}
1587
&:checked {
1589
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1590
currentColor 100%,
1591
transparent 100%)
1592
0 0 2 / 0 0 2px;
1593
color: theme-color.$on-primary;
1594
&:disabled {
1596
color: theme-color.disabled(theme-color.$on-primary);
1597
}
1598
}
1599
&:backdrop {
1601
color: theme-color.hint(theme-color.$on-primary);
1602
&:disabled {
1604
color: theme-color.disabled-hint(theme-color.$on-primary);
1605
}
1606
&:checked {
1608
color: theme-color.hint(theme-color.$on-primary);
1609
&:disabled {
1611
color: theme-color.disabled-hint(theme-color.$on-primary);
1612
}
1613
}
1614
}
1615
}
1616
.selection-menu {
1618
padding-left: 16px;
1619
padding-right: 16px;
1620
.arrow {
1622
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1623
}
1624
}
1625
}
1626
.selection-mode {
1628
box-shadow: inset 0 1px theme-color.highlight(theme-color.$primary); // Avoid double shadows
1629
background-color: theme-color.$primary;
1630
}
1631
// squared corners when the window is maximized, tiled, or fullscreen
1633
.tiled &,
1634
.tiled-top &,
1635
.tiled-right &,
1636
.tiled-bottom &,
1637
.tiled-left &,
1638
.maximized &,
1639
.fullscreen & {
1640
border-radius: 0;
1641
box-shadow: shadow.$z2;
1642
}
1643
&.default-decoration {
1645
min-height: theme.$small-size;
1646
padding: theme.$container-padding;
1647
box-shadow: inset 0 1px theme-color.highlight(theme-color.$titlebar);
1648
.tiled &,
1650
.maximized &,
1651
.fullscreen & {
1652
box-shadow: none;
1653
}
1654
button.titlebutton {
1656
min-height: theme.$small-size;
1657
min-width: theme.$small-size;
1658
margin: 0;
1659
padding: 0;
1660
}
1661
// workaround for non-animatable buttons
1663
.background:not(.csd) & button.titlebutton:active {
1664
background-size: 1000% 1000%;
1665
}
1666
}
1667
.solid-csd & {
1669
&:dir(rtl), &:dir(ltr) { // specificity bump
1670
border-radius: 0;
1671
box-shadow: shadow.$z2; // just remove the highlight
1672
}
1673
}
1674
}
1675
headerbar > windowhandle > box {
1677
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1678
min-height: theme.$large-size;
1679
padding: 0 theme.$container-padding;
1680
border-spacing: theme.$container-padding;
1681
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1683
entry,
1684
spinbutton,
1685
button {
1686
margin-top: theme.$container-padding;
1687
margin-bottom: theme.$container-padding;
1688
}
1689
separator.titlebutton {
1691
margin-top: theme.$large-size / 4;
1692
margin-bottom: theme.$large-size / 4;
1693
background-color: theme-color.divider(theme-color.$on-titlebar);
1694
}
1695
switch {
1697
margin-top: (theme.$large-size - 24px) / 2;
1698
margin-bottom: (theme.$large-size - 24px) / 2;
1699
}
1700
// reset button margins of the spinbutton
1702
spinbutton button {
1703
margin-top: 0;
1704
margin-bottom: 0;
1705
}
1706
// FIXME: This is a hacky workaround.
1708
.entry-tag {
1709
margin-top: 5px;
1710
margin-bottom: 5px;
1711
}
1712
}
1713
// Development versions of apps to use a differently styled headerbar
1715
window.devel .titlebar:not(.selection-mode) {
1716
}
1717
/**
1719
* Pathbars
1720
*/
1721
%pathbar_button,
1723
pathbar.linked:not(.vertical) > button {
1724
@extend %button-flat-basic;
1725
padding-left: (theme.$medium-size - 24px) / 2;
1727
padding-right: (theme.$medium-size - 24px) / 2;
1728
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1729
theme-color.$primary 0%,
1730
transparent 0%)
1731
0 0 0 / 0 0 0px;
1732
border-radius: theme.$corner-radius;
1733
&:checked {
1735
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1736
theme-color.$primary 100%,
1737
transparent 100%)
1738
0 0 2 / 0 0 2px;
1739
color: theme-color.$on-surface;
1740
&,
1742
&:disabled {
1743
background-color: transparent;
1744
}
1745
}
1746
label:not(:only-child) {
1748
&:first-child {
1749
margin-left: 0;
1750
}
1751
&:last-child {
1753
margin-right: 0;
1754
}
1755
}
1756
&.text-button {
1758
min-width: 0;
1759
}
1760
&.slider-button {
1762
padding-left: (24px - 16px) / 2;
1763
padding-right: (24px - 16px) / 2;
1764
}
1765
}
1766
/**
1768
* Tree Views
1769
*/
1770
columnview.view,
1772
treeview.view {
1773
border-left-color: theme-color.stroke(theme-color.$on-surface); // this is actually the tree lines color,
1774
border-top-color: theme-color.divider(theme-color.$on-surface); // while this is the grid lines color, better then nothing
1775
// to avoid borders being overridden by the previously set props
1777
> rubberband {
1778
@extend rubberband;
1779
}
1780
// FIXME: Avoid transparency background-color being slightly darker
1782
&:selected {
1783
// background-color: $surface-z1;
1784
// background-image: image($selected-overlay);
1785
}
1786
&:hover,
1788
&:selected {
1789
// border-radius: 0;
1790
}
1791
&.separator {
1793
min-height: 1px + 2px * 2;
1794
color: theme-color.divider(theme-color.$on-surface);
1795
}
1796
&:drop(active) {
1798
box-shadow: none;
1799
}
1800
> dndtarget:drop(active) {
1802
// FIXME: box-shadow, background-color and background-image are not available here.
1803
border-style: solid none;
1804
border-width: 9999px;
1805
border-color: theme-color.hover-overlay(theme-color.$on-surface);
1806
&.after {
1808
border-top-style: none;
1809
}
1810
&.before {
1812
border-bottom-style: none;
1813
}
1814
}
1815
&.expander {
1817
// GtkTreeView uses the larger of the expander’s min-width and min-height
1818
min-width: 16px;
1819
min-height: 16px;
1820
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1821
-gtk-icon-transform: rotate(-90deg);
1822
&:dir(rtl) {
1824
-gtk-icon-transform: rotate(90deg);
1825
}
1826
&:checked {
1828
-gtk-icon-transform: unset;
1829
}
1830
color: theme-color.hint(theme-color.$on-surface);
1832
&:hover,
1834
&:active {
1835
color: theme-color.$on-surface;
1836
}
1837
&:disabled {
1839
color: theme-color.disabled-hint(theme-color.$on-surface);
1840
}
1841
}
1842
&.progressbar { // progress bar in treeviews
1844
border-bottom: 4px solid theme-color.$primary;
1845
background-color: transparent;
1846
&:selected:hover {
1848
background-color: transparent;
1849
}
1850
}
1851
&.trough { // progress bar trough in treeviews
1853
border-bottom: 4px solid theme-color.disabled-stroke(theme-color.$on-surface);
1854
background-color: transparent;
1855
&:selected:hover {
1857
background-color: transparent;
1858
}
1859
}
1860
> header {
1862
> button {
1863
padding: 2px 6px;
1864
border-style: none solid solid none;
1865
border-width: 1px;
1866
border-color: theme-color.divider(theme-color.$on-surface);
1867
border-radius: 0;
1868
background-clip: padding-box;
1869
background-color: transparent;
1870
color: theme-color.hint(theme-color.$on-surface);
1871
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true, $button-style: "flat");
1872
@include drawing.list-item;
1873
&:disabled {
1875
color: theme-color.disabled-hint(theme-color.$on-surface);
1876
}
1877
&,
1879
&:disabled {
1880
// background-color: $surface-z1;
1881
}
1882
&:last-child {
1884
border-right-style: none;
1885
}
1886
> box > sort-indicator {
1888
min-height: 16px;
1889
min-width: 16px;
1890
&.ascending {
1892
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1893
}
1894
&.descending {
1896
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1897
}
1898
}
1899
}
1900
}
1901
button.dnd,
1903
header.button.dnd { // for treeview-like derive widgets
1904
padding: 2px 6px;
1905
border-style: none solid solid;
1906
border-width: 1px;
1907
border-color: theme-color.divider(theme-color.$on-surface);
1908
border-radius: 0;
1909
box-shadow: none;
1910
// background-color: $surface-z1;
1911
background-clip: border-box;
1912
color: theme-color.$primary;
1913
}
1914
// see tests/testaccel to test
1916
acceleditor > label {
1917
background-color: theme-color.$primary;
1918
}
1919
}
1920
/**
1922
* Menus
1923
*/
1924
menubar {
1926
// box-shadow: inset 0 -1px divider($on-surface);
1927
background-color: theme-color.$titlebar;
1928
color: theme-color.$on-titlebar;
1929
&:backdrop {
1931
background-color: theme-color.$titlebar-backdrop;
1932
color: theme-color.hint(theme-color.$on-titlebar);
1933
}
1934
.csd & {
1936
transition: theme.$transition;
1937
}
1938
> item {
1940
// transition: $transition;
1941
min-height: 20px;
1942
padding: 4px 8px;
1943
color: theme-color.hint(theme-color.$on-titlebar);
1944
@extend %ripple;
1946
// @include ink-color($on-titlebar);
1947
&:hover {
1949
background-color: theme-color.hover-overlay(theme-color.$on-titlebar);
1950
}
1951
&:focus:not(:hover) {
1953
background-color: theme-color.focus-overlay(theme-color.$on-titlebar);
1954
}
1955
&:active {
1957
background-image: radial-gradient(circle, theme-color.pressed-overlay(theme-color.$on-titlebar) 10%, transparent 10%);
1958
}
1959
&:selected:not(:focus) {
1961
transition: none;
1962
background-color: theme-color.activated-overlay(theme-color.$on-titlebar);
1963
color: theme-color.$on-titlebar;
1964
}
1965
&:disabled {
1967
color: theme-color.disabled-hint(theme-color.$on-titlebar);
1968
}
1969
}
1970
}
1971
popover.menu {
1973
> contents {
1974
padding: 6px 0;
1975
}
1976
& popover.menu {
1978
margin-top: -6px;
1979
}
1980
separator {
1982
margin: 6px 0;
1983
}
1984
label.title {
1986
min-height: 32px - 4px * 2;
1987
padding: 4px 32px; // this will fall apart with font sizing
1988
font-weight: bold;
1989
}
1990
modelbutton {
1992
// transition: background-color $state-duration $ease-out;
1993
min-height: 30px - 4px * 2;
1994
min-width: 40px;
1995
padding: 4px 32px;
1996
&:hover {
1998
// transition: none;
1999
// background-color: hover-overlay($on-surface);
2000
}
2001
&:disabled {
2003
color: theme-color.disabled(theme-color.$on-surface);
2004
}
2005
accelerator {
2007
color: theme-color.hint(theme-color.$on-surface);
2008
&:dir(ltr) {
2010
margin-left: 24px;
2011
margin-right: 16px - 32px;
2012
}
2013
&:dir(rtl) {
2015
margin-left: 16px - 32px;
2016
margin-right: 24px;
2017
}
2018
}
2019
&:disabled accelerator {
2021
color: theme-color.disabled-hint(theme-color.$on-surface);
2022
}
2023
}
2024
check,
2026
radio {
2027
&,
2028
&:focus,
2029
&:hover,
2030
&:active,
2031
&:disabled {
2032
// transition: none;
2033
background-color: transparent;
2034
background-image: none;
2035
}
2036
}
2037
arrow,
2039
check,
2040
radio {
2041
min-width: 16px;
2042
min-height: 16px;
2043
margin: 0;
2044
padding: 0;
2045
&.left {
2047
margin-left: 8px - 32px;
2048
margin-right: 8px;
2049
}
2050
&.right {
2052
margin-left: 8px;
2053
margin-right: 8px - 32px;
2054
}
2055
}
2056
button.model {
2058
@extend %button-flat;
2059
// min-height: 32px;
2061
// padding: 0 8px;
2062
// border-radius: $corner-radius;
2063
&:checked {
2065
// color: $primary;
2066
}
2067
}
2068
box.inline-buttons {
2070
padding: 0 8px;
2071
button.image-button.model {
2073
}
2074
}
2075
box.circular-buttons {
2077
padding: 4px 32px;
2078
button.circular.image-button.model {
2080
padding: 12px;
2081
}
2082
}
2083
}
2084
/**
2086
* Popovers
2087
*/
2088
popover {
2090
font: initial; // Decouple the font of popovers from their entry/textview
2091
&.background {
2093
background-color: transparent;
2094
}
2095
> arrow,
2097
> contents {
2098
transition: theme.$transition-shadow;
2099
box-shadow: shadow.$z4;
2100
background-color: theme-color.$surface-z8;
2101
color: theme-color.$on-surface;
2102
&:backdrop {
2104
box-shadow: shadow.$z2;
2105
}
2106
}
2107
@at-root %popover-border {
2109
border-width: 1px;
2110
border-style: solid;
2111
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
2112
background-clip: padding-box;
2113
}
2114
> arrow {
2116
@extend %popover-border;
2117
}
2118
> contents {
2120
padding: 8px;
2121
@if gtk.$version >= 4.2 {
2123
border-radius: theme.$corner-radius;
2124
} @else {
2125
@extend %popover-border;
2126
border-radius: theme.$corner-radius + 1px;
2127
}
2128
> list,
2130
.view,
2131
> .toolbar {
2132
border-style: none;
2133
box-shadow: none;
2134
background-color: transparent;
2135
}
2136
separator {
2138
// margin: 4px 0;
2139
}
2140
list separator {
2142
// margin: 0;
2143
}
2144
}
2145
.osd &,
2147
&.touch-selection,
2148
&.magnifier {
2149
// @extend %osd;
2150
}
2151
button {
2153
@extend %button-outlined;
2154
}
2155
frame,
2157
.frame {
2158
border: 1px solid theme-color.divider(theme-color.$on-surface);
2159
box-shadow: none;
2160
background-color: transparent;
2161
}
2162
.linked:not(.vertical) > entry:not(:only-child) {
2164
// border-radius: $corner-radius $corner-radius 0 0;
2165
}
2166
}
2167
/**
2169
* Notebooks
2170
*/
2171
notebook {
2173
&:focus:focus-visible > header > tabs > tab:checked {
2174
background-color: theme-color.focus-overlay(theme-color.$primary);
2175
}
2176
> header {
2178
&.top {
2179
box-shadow: inset 0 -1px theme-color.divider(theme-color.$on-surface);
2180
> tabs {
2182
> tab {
2183
box-shadow: inset 0 -2px transparent;
2184
&:checked {
2186
box-shadow: inset 0 -2px theme-color.$primary;
2187
}
2188
}
2189
}
2190
}
2191
&.bottom {
2193
box-shadow: inset 0 1px theme-color.divider(theme-color.$on-surface);
2194
> tabs {
2196
> tab {
2197
box-shadow: inset 0 2px transparent;
2198
&:checked {
2200
box-shadow: inset 0 2px theme-color.$primary;
2201
}
2202
}
2203
}
2204
}
2205
&.left {
2207
box-shadow: inset -1px 0 theme-color.divider(theme-color.$on-surface);
2208
> tabs {
2210
> tab {
2211
box-shadow: inset -2px 0 transparent;
2212
&:checked {
2214
box-shadow: inset -2px 0 theme-color.$primary;
2215
}
2216
}
2217
}
2218
}
2219
&.right {
2221
box-shadow: inset 1px 0 theme-color.divider(theme-color.$on-surface);
2222
> tabs {
2224
> tab {
2225
box-shadow: inset 2px 0 transparent;
2226
&:checked {
2228
box-shadow: inset 2px 0 theme-color.$primary;
2229
}
2230
}
2231
}
2232
}
2233
&.top > tabs > arrow {
2235
@extend %notebook_vert_arrows;
2236
}
2237
&.bottom > tabs > arrow {
2239
@extend %notebook_vert_arrows;
2240
}
2241
@at-root %notebook_vert_arrows {
2243
&.down {
2244
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2245
}
2246
&.up {
2248
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2249
}
2250
}
2251
&.left > tabs > arrow {
2253
@extend %notebook_horz_arrows;
2254
}
2255
&.right > tabs > arrow {
2257
@extend %notebook_horz_arrows;
2258
}
2259
@at-root %notebook_horz_arrows {
2261
&.down {
2262
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2263
}
2264
&.up {
2266
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2267
}
2268
}
2269
> tabs > arrow {
2271
min-height: 16px;
2272
min-width: 16px;
2273
padding: 4px;
2274
border-radius: 0;
2275
color: theme-color.hint(theme-color.$on-surface);
2276
@extend %ripple;
2277
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
2278
&:disabled {
2280
color: theme-color.disabled-hint(theme-color.$on-surface);
2281
}
2282
}
2283
> tabs > tab {
2285
@extend %ripple;
2286
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
2287
min-height: theme.$small-size;
2288
min-width: theme.$small-size;
2289
padding: theme.$container-padding 12px;
2290
color: theme-color.hint(theme-color.$on-surface);
2291
font-weight: 500;
2292
&:hover {
2294
// background-color: hover-overlay($on-surface, $alt: true);
2295
}
2296
&:active {
2298
// background-image: radial-gradient(circle, pressed-overlay($on-surface) 10%, transparent 10%);
2299
}
2300
&:disabled {
2302
color: theme-color.disabled-hint(theme-color.$on-surface);
2303
}
2304
&:checked {
2306
@include drawing.ink-color(theme-color.$primary, $hover-alt: true);
2307
color: theme-color.$primary;
2308
&:hover {
2310
// background-color: hover-overlay($primary, $alt: true);
2311
}
2312
&:active {
2314
// background-image: radial-gradient(circle, pressed-overlay($primary) 10%, transparent 10%);
2315
}
2316
&:disabled {
2318
color: theme-color.disabled-hint(theme-color.$on-surface);
2319
}
2320
&.reorderable-page {
2322
// border-color: divider($on-surface);
2323
// background-color: $surface-z1;
2324
}
2325
}
2326
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2328
> box {
2329
transition: background-color theme.$state-duration theme.$ease-out;
2330
margin: -(theme.$container-padding) -12px;
2331
padding: theme.$container-padding 12px;
2332
&:drop(active) {
2334
background-color: theme-color.hover-overlay(theme-color.$on-surface);
2335
}
2336
}
2337
// colors the button like the label, overridden otherwise
2339
button.flat {
2340
@extend %button-small;
2341
&:last-child {
2343
margin-left: theme.$container-padding;
2344
margin-right: theme.$container-padding - 12px;
2345
}
2346
&:first-child {
2348
margin-left: theme.$container-padding - 12px;
2349
margin-right: theme.$container-padding;
2350
}
2351
}
2352
}
2353
}
2354
}
2355
/**
2357
* Scrollbars
2358
*/
2359
scrollbar {
2361
$_slider_min_length: 24px;
2362
transition: theme.$transition;
2364
background-clip: padding-box;
2365
// background-color: $surface-z1;
2366
// scrollbar border
2368
&.top { border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); }
2369
&.bottom { border-top: 1px solid theme-color.divider(theme-color.$on-surface); }
2370
&.left { border-right: 1px solid theme-color.divider(theme-color.$on-surface); }
2371
&.right { border-left: 1px solid theme-color.divider(theme-color.$on-surface); }
2372
// slider
2374
> range > trough > slider {
2375
transition: background-color theme.$state-duration theme.$ease-out;
2376
min-width: 10px;
2377
min-height: 10px;
2378
border: 3px solid transparent;
2379
border-radius: theme.$circular-radius;
2380
background-clip: padding-box;
2381
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface);
2382
&:hover {
2384
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "hover");
2385
}
2386
&:active {
2388
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "pressed");
2389
}
2390
&:disabled {
2392
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "disabled");
2393
}
2394
}
2395
&.horizontal > range > trough > slider {
2397
min-width: $_slider_min_length;
2398
}
2399
&.vertical > range > trough > slider {
2401
min-height: $_slider_min_length;
2402
}
2403
> range.fine-tune {
2405
> trough > slider {
2406
min-width: 4px;
2407
min-height: 4px;
2408
}
2409
&.horizontal > trough > slider {
2411
margin: 3px 0;
2412
}
2413
&.vertical > trough > slider {
2415
margin: 0 3px;
2416
}
2417
}
2418
&.overlay-indicator {
2420
> range:not(.fine-tune) > trough > slider {
2421
transition-property: background-color, min-height, min-width;
2422
}
2423
&:not(.dragging):not(.hovering) {
2425
border-color: transparent;
2426
background-color: transparent;
2427
> range > trough > slider {
2429
min-width: 4px;
2430
min-height: 4px;
2431
margin: 3px - 1px;
2432
border: 1px solid rgba(theme-color.$surface-z1, 0.3);
2433
}
2434
&.horizontal > range > trough > slider {
2436
min-width: $_slider_min_length;
2437
}
2438
&.vertical > range > trough > slider {
2440
min-height: $_slider_min_length;
2441
}
2442
}
2443
&.dragging,
2445
&.hovering {
2446
background-color: theme-color.$surface-z8;
2447
}
2448
}
2449
}
2450
/**
2452
* Switch
2453
*/
2454
switch {
2456
transition: all theme.$state-duration theme.$ease-out;
2457
margin: theme.$container-padding 0;
2458
padding: 0 2px;
2459
border: 5px solid transparent;
2460
border-radius: theme.$circular-radius;
2461
background-color: theme-color.stroke(theme-color.$on-surface);
2462
background-clip: padding-box;
2463
font-size: 0;
2464
&:checked {
2466
background-color: rgba(theme-color.$primary, .5);
2467
}
2468
&:disabled {
2470
opacity: .5;
2471
}
2472
// hide on/off icons for >=3.24.5
2474
> image {
2475
margin: -8px;
2476
-gtk-icon-transform: scale(0);
2477
}
2478
> slider {
2480
transition: all theme.$state-duration theme.$ease-out;
2481
min-width: 20px;
2482
min-height: 20px;
2483
margin: -3px -2px;
2484
border-radius: theme.$circular-radius;
2485
box-shadow:
2486
0 0 0 10px transparent,
2487
0 0 0 -10px theme-color.pressed-overlay(theme-color.$on-surface),
2488
shadow.$z1;
2489
background-color: theme-color.$surface-switch-thumb;
2490
}
2491
&:hover > slider {
2493
box-shadow:
2494
0 0 0 10px theme-color.hover-overlay(theme-color.$on-surface),
2495
0 0 0 -10px theme-color.pressed-overlay(theme-color.$on-surface),
2496
shadow.$z1;
2497
}
2498
&:focus > slider {
2500
box-shadow:
2501
0 0 0 10px theme-color.focus-overlay(theme-color.$on-surface),
2502
0 0 0 -10px theme-color.pressed-overlay(theme-color.$on-surface),
2503
shadow.$z1;
2504
}
2505
&:active > slider {
2507
box-shadow:
2508
0 0 0 10px theme-color.hover-overlay(theme-color.$on-surface),
2509
0 0 0 10px theme-color.pressed-overlay(theme-color.$on-surface),
2510
shadow.$z1;
2511
}
2512
&:checked > slider {
2514
background-color: theme-color.$primary;
2515
}
2516
&:checked:hover > slider {
2518
box-shadow:
2519
0 0 0 10px theme-color.hover-overlay(theme-color.$primary),
2520
0 0 0 -10px theme-color.pressed-overlay(theme-color.$primary),
2521
shadow.$z1;
2522
}
2523
&:checked:focus > slider {
2525
box-shadow:
2526
0 0 0 10px theme-color.focus-overlay(theme-color.$primary),
2527
0 0 0 -10px theme-color.pressed-overlay(theme-color.$primary),
2528
shadow.$z1;
2529
}
2530
&:checked:active > slider {
2532
box-shadow:
2533
0 0 0 10px theme-color.hover-overlay(theme-color.$primary),
2534
0 0 0 10px theme-color.pressed-overlay(theme-color.$primary),
2535
shadow.$z1;
2536
}
2537
row:selected & {
2539
}
2540
}
2541
/**
2543
* Check and Radio items
2544
*/
2545
// draw regular check and radio items using our PNG assets
2547
// all assets are rendered from assets.svg. never add pngs directly
2548
// selection-mode
2550
.view.content-view.check:not(list),
2551
.content-view:not(list) .tile check {
2552
min-height: 40px;
2553
min-width: 40px;
2554
margin: 0;
2555
padding: 0;
2556
background-color: transparent;
2557
background-image: none;
2558
-gtk-icon-shadow: shadow.$icon-shadow-z2;
2559
&:hover,
2561
&:active {
2562
-gtk-icon-shadow: shadow.$icon-shadow-z4;
2563
}
2564
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2566
&#{$class} {
2567
$_url: 'assets/selectionmode-checkbox#{$suffix}#{theme.$asset-suffix}';
2568
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2570
}
2571
}
2572
}
2573
checkbutton,
2575
radiobutton {
2576
border-spacing: 4px;
2577
&.text-button {
2579
padding: 4px;
2580
}
2581
}
2582
$check-radio-size: 40px;
2584
check,
2586
radio {
2587
min-height: 24px;
2588
min-width: 24px;
2589
margin: -($check-radio-size - 24px) / 2;
2590
padding: ($check-radio-size - 24px) / 2;
2591
border-radius: theme.$circular-radius;
2592
color: theme-color.hint(theme-color.$on-surface);
2593
@extend %ripple;
2594
@include drawing.ink-color(theme-color.$on-surface);
2595
&:checked,
2597
&:indeterminate {
2598
color: theme-color.$primary;
2599
@include drawing.ink-color(theme-color.$primary);
2600
}
2601
&:disabled {
2603
color: theme-color.disabled-hint(theme-color.$on-surface);
2604
}
2605
}
2606
%check,
2608
check {
2609
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2610
&:checked {
2612
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2613
}
2614
&:indeterminate {
2616
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2617
}
2618
}
2619
%radio,
2621
radio {
2622
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2623
&:checked {
2625
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2626
}
2627
&:indeterminate {
2629
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2630
}
2631
border-image-slice: $check-radio-size / 2px;
2633
border-image-width: $check-radio-size / 2;
2634
$radio-indicator-size: 10px / $check-radio-size / 2;
2636
border-image-source: radial-gradient(circle, theme-color.$primary 0%, transparent 0%);
2638
&:checked:not(:indeterminate) {
2640
border-image-source: radial-gradient(circle, theme-color.$primary 4.5px, transparent 5px);
2641
&:disabled {
2643
border-image-source: radial-gradient(circle, theme-color.disabled-hint(theme-color.$on-surface) 4.5px, transparent 5px);
2644
}
2645
}
2646
}
2647
%small_check,
2649
popover.menu modelbutton check {
2650
min-height: 16px;
2651
min-width: 16px;
2652
border-radius: theme.$corner-radius;
2653
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2654
&:checked {
2656
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2657
}
2658
&:indeterminate {
2660
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2661
}
2662
}
2663
%small_radio,
2665
popover.menu modelbutton radio {
2666
min-height: 16px;
2667
min-width: 16px;
2668
border-image: none;
2669
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2670
&:checked {
2672
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2673
}
2674
&:indeterminate {
2676
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2677
}
2678
}
2679
// ANIMATION:
2681
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2682
// the transformation is set on the active state and it get reset on the checked state.
2683
radio:not(:checked):active {
2684
// -gtk-icon-transform: scale(0);
2685
}
2686
// Otherwise, treeview.view styling will be applied...
2688
treeview.view check,
2689
treeview.view radio {
2690
padding: 0;
2691
color: theme-color.hint(theme-color.$on-surface);
2692
&:checked,
2694
&:indeterminate {
2695
color: theme-color.$primary;
2696
}
2697
&:disabled {
2699
color: theme-color.disabled-hint(theme-color.$on-surface);
2700
}
2701
&,
2703
&:hover,
2704
&:selected,
2705
&:selected:hover {
2706
background-color: transparent;
2707
}
2708
}
2709
treeview.view radio:checked {
2711
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2712
border-image: none;
2713
}
2714
/**
2716
* GtkScale
2717
*/
2718
scale {
2720
// sizing
2721
$_marks_length: 8px;
2722
$_marks_distance: 7px;
2723
$trough_size: 2px;
2725
$finetune_trough_size: 4px;
2726
$slider_size: 32px;
2728
$slider_margin: -($slider_size - $trough_size) / 2;
2730
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2731
$color_slider_margin: -($slider_size) * 3 / 4;
2733
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2734
min-height: $trough_size;
2736
min-width: $trough_size;
2737
&.horizontal {
2739
padding: (theme.$medium-size - $trough_size) / 2 12px;
2740
}
2741
&.vertical {
2743
padding: 12px (theme.$medium-size - $trough_size) / 2;
2744
}
2745
// click-and-hold the slider to activate
2747
&.fine-tune {
2748
&.horizontal {
2749
min-height: $finetune_trough_size;
2750
padding-top: (theme.$medium-size - $finetune_trough_size) / 2;
2751
padding-bottom: (theme.$medium-size - $finetune_trough_size) / 2;
2752
}
2753
&.vertical {
2755
min-width: $finetune_trough_size;
2756
padding-left: (theme.$medium-size - $finetune_trough_size) / 2;
2757
padding-right: (theme.$medium-size - $finetune_trough_size) / 2;
2758
}
2759
// to make the trough grow in fine-tune mode
2761
> trough > slider {
2762
margin: $finetune_slider_margin;
2763
}
2764
}
2765
// the backing bit
2767
> trough {
2768
transition: background-color theme.$state-duration theme.$ease-out;
2769
background-color: theme-color.stroke(theme-color.$on-surface);
2770
&:disabled {
2772
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
2773
}
2774
// the colored part of the backing bit
2776
> highlight {
2777
transition: background-image theme.$state-duration theme.$ease-out;
2778
background-image: image(theme-color.$primary);
2779
&:disabled {
2781
background-color: theme-color.$surface-z0;
2782
background-image: image(theme-color.disabled-hint(theme-color.$on-surface));
2783
}
2784
}
2785
// this is another differently styled part of the backing bit, the most relevant use case is for example
2787
// in media player to indicate how much video stream as been cached
2788
> fill {
2789
transition: background-color theme.$state-duration theme.$ease-out;
2790
background-color: theme-color.stroke(theme-color.$on-surface);
2791
&:disabled {
2793
background-color: transparent;
2794
}
2795
}
2796
> slider {
2798
transition: background-color theme.$state-duration theme.$ease-out,
2799
background-size theme.$ripple-fade-out-duration theme.$ease-out,
2800
background-image theme.$ripple-opacity-fade-out-duration theme.$ease-out;
2801
min-width: $slider_size;
2802
min-height: $slider_size;
2803
// the slider is inside the trough, so to have make it bigger there's a negative margin
2804
margin: $slider_margin;
2805
border-radius: 50%;
2806
background-repeat: no-repeat;
2807
background-position: center;
2808
background-size: auto, 1000% 1000%;
2809
color: theme-color.$primary;
2810
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2812
&#{$class} {
2813
$_url: 'assets/scale-slider#{$suffix}#{theme.$asset-suffix}';
2814
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2816
radial-gradient(circle, transparent 10%, transparent 10%);
2817
}
2818
}
2819
&:hover {
2821
background-color: theme-color.hover-overlay(theme-color.$primary);
2822
}
2823
&:focus {
2825
background-color: theme-color.focus-overlay(theme-color.$primary);
2826
}
2827
&:active {
2829
$_url: 'assets/scale-slider#{theme.$asset-suffix}';
2830
transition: background-color theme.$state-duration theme.$ease-out,
2832
background-size 0ms,
2833
background-image 0ms;
2834
animation: ripple-on-slider theme.$ripple-duration theme.$ease-out forwards;
2835
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2836
radial-gradient(circle, theme-color.pressed-overlay(theme-color.$primary) 10%, transparent 10%);
2837
background-size: auto, 0% 0%;
2838
}
2839
}
2840
}
2841
> marks,
2843
> value {
2844
color: theme-color.hint(theme-color.$on-surface);
2845
}
2846
> value {
2848
font-feature-settings: "tnum";
2849
}
2850
indicator {
2852
background-color: theme-color.stroke(theme-color.$on-surface);
2853
}
2854
//marks margins
2856
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2857
(horizontal, bottom, bottom, top),
2858
(vertical, top, left, right),
2859
(vertical, bottom, right, left) {
2860
&.#{$scale_orient} > marks {
2861
&.#{$marks_class} {
2862
margin-#{$marks_margin}: $_marks_distance;
2863
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2864
}
2865
}
2866
&.#{$scale_orient}.fine-tune > marks {
2868
&.#{$marks_class} {
2869
margin-#{$marks_margin}: $_marks_distance - 1px;
2870
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2871
}
2872
}
2873
}
2874
&.horizontal {
2876
indicator {
2877
min-height: $_marks_length;
2878
min-width: 1px;
2879
}
2880
}
2881
&.vertical {
2883
indicator {
2884
min-height: 1px;
2885
min-width: $_marks_length;
2886
}
2887
}
2888
// *WARNING* scale with marks madness following
2890
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2892
@each $marks_class, $marks_infix in (
2893
".marks-before:not(.marks-after)": "-marks-before",
2894
".marks-after:not(.marks-before)": "-marks-after"
2895
) {
2896
&#{$dir_class}#{$marks_class} > trough > slider {
2897
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2898
&#{$state_class} {
2899
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{theme.$asset-suffix}';
2900
background-image:
2902
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2903
radial-gradient(circle, transparent 10%, transparent 10%);
2904
}
2905
}
2906
&:active {
2908
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{theme.$asset-suffix}';
2909
background-image:
2911
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2912
radial-gradient(circle, theme-color.pressed-overlay(theme-color.$primary) 10%, transparent 10%);
2913
}
2914
}
2915
}
2916
}
2917
&.color {
2919
min-height: 0;
2920
min-width: 0;
2921
&.horizontal {
2923
// specificity bump
2924
&:dir(ltr),
2925
&:dir(rtl) {
2926
padding: 0 0 12px 0;
2927
slider {
2929
margin-bottom: $color_slider_margin;
2930
margin-top: $color_marks_slider_margin;
2931
}
2932
}
2933
}
2934
&.vertical {
2936
&:dir(ltr) {
2937
padding: 0 0 0 12px;
2938
slider {
2940
margin-left: $color_slider_margin;
2941
margin-right: $color_marks_slider_margin;
2942
}
2943
}
2944
&:dir(rtl) {
2946
padding: 0 12px 0 0;
2947
slider {
2949
margin-right: $color_slider_margin;
2950
margin-left: $color_marks_slider_margin;
2951
}
2952
}
2953
}
2954
}
2955
}
2956
/**
2958
* Progress bars
2959
*/
2960
progressbar {
2962
// FIXME: insensitive state missing and some other state should be set probably
2963
color: theme-color.hint(theme-color.$on-surface);
2964
font-size: smaller;
2965
font-feature-settings: "tnum";
2966
> trough {
2968
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
2969
> progress {
2971
background-color: theme-color.$primary;
2972
}
2973
}
2974
// sizing
2976
&.horizontal > trough {
2977
min-width: 150px;
2978
&,
2980
> progress {
2981
min-height: 4px;
2982
}
2983
}
2984
&.vertical > trough {
2986
min-height: 80px;
2987
&,
2989
> progress {
2990
min-width: 4px;
2991
}
2992
}
2993
// progressbar.osd used for epiphany page loading progress
2995
&.osd {
2996
// min-width: 4px;
2997
// min-height: 4px;
2998
// background-color: transparent;
2999
> trough {
3001
// background-color: transparent;
3002
> progress {
3004
// background-color: $primary;
3005
}
3006
}
3007
}
3008
// makes the progress indicator disappear, when the fraction is 0
3010
> trough.empty > progress {
3011
all: unset;
3012
}
3013
}
3014
/**
3016
* Level Bar
3017
*/
3018
levelbar {
3020
&.horizontal {
3021
> trough > block {
3022
min-height: 4px;
3023
}
3024
&.discrete > trough > block {
3026
min-width: theme.$medium-size;
3027
&:not(:last-child) {
3029
margin-right: 2px;
3030
}
3031
}
3032
}
3033
&.vertical {
3035
> trough > block {
3036
min-width: 4px;
3037
}
3038
&.discrete > trough > block {
3040
min-height: theme.$medium-size;
3041
&:not(:last-child) {
3043
margin-bottom: 2px;
3044
}
3045
}
3046
}
3047
> trough {
3049
}
3050
> trough > block {
3052
&.low {
3053
background-color: theme-color.$warning;
3054
}
3055
&.high,
3057
&:not(.empty) {
3058
background-color: theme-color.$primary;
3059
}
3060
&.full {
3062
background-color: theme-color.$success;
3063
}
3064
&.empty {
3066
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
3067
}
3068
}
3069
}
3070
/**
3072
* Print dialog
3073
*/
3074
window.dialog.print {
3076
paper {
3077
// padding: 0;
3078
// border: 1px solid divider($on-surface);
3079
border-radius: theme.$corner-radius;
3080
box-shadow: shadow.$z1;
3081
background-color: theme-color.$surface-z1;
3082
color: theme-color.$on-surface;
3083
}
3084
.dialog-action-box {
3086
margin: 12px;
3087
}
3088
}
3089
/**
3091
* Frames
3092
*/
3093
frame,
3095
.frame {
3096
// border: 1px solid divider($on-surface);
3097
border-radius: theme.$corner-radius;
3098
box-shadow: shadow.$z1;
3099
background-color: theme-color.$surface-z1;
3100
color: theme-color.$on-surface;
3101
button {
3103
@extend %button-outlined;
3104
}
3105
}
3106
frame > label {
3108
margin: 4px;
3109
}
3110
statusbar {
3112
padding: 6px 10px;
3113
// border-top: 1px solid divider($on-surface);
3114
}
3115
actionbar > revealer > box {
3117
padding: theme.$container-padding;
3118
border-spacing: theme.$container-padding;
3119
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
3120
// background-clip: border-box;
3121
button:not(.suggested-action):not(.destructive-action) {
3123
@extend %button-flat;
3124
}
3125
.linked:not(.vertical) > entry:not(:only-child) {
3127
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
3128
}
3129
}
3130
scrolledwindow {
3132
// This is used when content is touch-dragged past boundaries.
3133
// draws a box on top of the content, the size changes programmatically.
3134
@at-root overshoot {
3135
&.top { @include drawing.overshoot(top); }
3136
&.bottom { @include drawing.overshoot(bottom); }
3138
&.left { @include drawing.overshoot(left); }
3140
&.right { @include drawing.overshoot(right); }
3142
}
3143
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3145
@at-root undershoot {
3146
// &.top { @include undershoot(top); }
3147
// &.bottom { @include undershoot(bottom); }
3149
// &.left { @include undershoot(left); }
3151
// &.right { @include undershoot(right); }
3153
}
3154
// the small square between two scrollbars
3156
@at-root junction {
3157
border-style: solid none none solid;
3158
border-width: 1px;
3159
border-color: theme-color.divider(theme-color.$on-surface);
3160
// background-color: $surface-z1;
3161
&:dir(rtl) {
3163
border-style: solid solid none none;
3164
}
3165
}
3166
}
3167
// vbox and hbox separators
3169
separator {
3170
min-width: 1px;
3171
min-height: 1px;
3172
background-color: theme-color.divider(theme-color.$on-surface);
3173
}
3174
%hide_separators {
3176
min-width: 0;
3177
min-height: 0;
3178
background-color: transparent;
3179
}
3180
/**
3182
* Lists
3183
*/
3184
listview,
3186
list {
3187
// background-color: $surface-z1;
3188
// color: $on-surface;
3189
> row {
3191
padding: 2px;
3192
&.expander {
3194
padding: 0;
3195
.row-header {
3197
padding: 2px;
3198
}
3199
}
3200
}
3201
&.separators:not(.horizontal) > row:not(:first-child) {
3203
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
3204
}
3205
&.separators.horizontal > row:not(:first-child) {
3207
border-left: 1px solid theme-color.divider(theme-color.$on-surface);
3208
}
3209
}
3210
row {
3212
background-clip: padding-box;
3213
&.activatable {
3215
@extend %ripple;
3216
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
3217
@include drawing.list-item;
3218
// this is for indicathing which row generated a popover
3220
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3221
&.has-open-popup {
3222
background-color: theme-color.activated-overlay(theme-color.$on-surface);
3223
}
3224
}
3225
&:selected {
3227
background-color: theme-color.$selected-overlay;
3228
@include drawing.ink-color(theme-color.$primary, $hover-alt: true, $on: theme-color.$selected-overlay);
3230
&.has-open-popup {
3232
background-color: theme-color.activated-overlay(theme-color.$primary, $on: theme-color.$selected-overlay);
3233
}
3234
}
3235
}
3236
listview {
3238
> row {
3239
@extend %ripple;
3240
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
3241
@include drawing.list-item;
3242
}
3243
&:selected {
3245
background-color: theme-color.$selected-overlay;
3246
@include drawing.ink-color(theme-color.$primary, $hover-alt: true, $on: theme-color.$selected-overlay);
3248
}
3249
}
3250
columnview {
3252
// move padding to child cells
3253
> listview > row {
3254
padding: 0;
3255
// align horizontal sizing with header buttons
3257
> cell {
3258
min-height: 24px;
3259
padding: 4px 6px;
3260
&:not(:last-child) {
3262
border-right: 1px solid transparent;
3263
}
3264
}
3265
}
3266
// make column separators visible when :show-column-separators is true
3268
&.column-separators > listview > row > cell {
3269
border-right-color: theme-color.divider(theme-color.$on-surface);
3270
}
3271
// shrink vertically for .data-table
3273
&.data-table > listview > row > cell {
3274
padding-top: 2px;
3275
padding-bottom: 2px;
3276
}
3277
}
3278
// rich lists usually containing other widgets than just labels/text
3280
.rich-list {
3281
> row {
3282
padding: 12px;
3283
min-height: theme.$medium-size;
3284
> box {
3286
border-spacing: 12px;
3287
}
3288
}
3289
}
3290
/**
3292
* App Notifications
3293
*/
3294
.app-notification {
3296
@extend %toolbar-osd;
3297
margin: 8px;
3298
border-style: none;
3299
button {
3301
@extend %button-flat;
3302
&.text-button:not(:disabled) {
3304
color: theme-color.$primary;
3305
@include drawing.ink-color(theme-color.$primary);
3306
}
3307
}
3308
}
3309
/**
3311
* Expanders
3312
*/
3313
expander {
3315
transition: all theme.$state-duration theme.$ease-out;
3316
min-width: 16px;
3317
min-height: 16px;
3318
padding: 4px;
3319
border-radius: theme.$circular-radius;
3320
color: theme-color.hint(theme-color.$on-surface);
3321
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3322
@extend %ripple;
3324
@include drawing.ink-color(theme-color.$on-surface);
3325
&:disabled {
3327
color: theme-color.disabled-hint(theme-color.$on-surface);
3328
}
3329
&:checked {
3331
&:dir(ltr) {
3332
-gtk-icon-transform: rotate(-180deg);
3333
}
3334
&:dir(rtl) {
3336
-gtk-icon-transform: rotate(180deg);
3337
}
3338
}
3339
}
3340
indent {
3342
min-width: 16px;
3343
min-height: 16px;
3344
padding: 4px;
3345
}
3346
expander-widget {
3348
&:focus > box > title > expander {
3349
box-shadow: inset 0 0 0 9999px theme-color.focus-overlay(theme-color.$on-surface);
3350
}
3351
> box > title:drop(active) > expander,
3353
> box > title:hover > expander {
3354
box-shadow: inset 0 0 0 9999px theme-color.hover-overlay(theme-color.$on-surface);
3355
}
3356
> box > title:active > expander {
3358
transition-duration: drawing.$ripple-active-transition-duration;
3359
animation: ripple theme.$ripple-duration theme.$ease-out forwards;
3360
background-size: 0% 0%;
3361
background-image: radial-gradient(circle, theme-color.pressed-overlay(theme-color.$on-surface) 10%, transparent 10%);
3362
}
3363
}
3364
/**
3366
* Calendar
3367
*/
3368
calendar {
3370
// border: 1px solid divider($on-surface);
3371
border-radius: theme.$corner-radius;
3372
box-shadow: shadow.$z1;
3373
background-color: theme-color.$surface-z1;
3374
color: theme-color.$on-surface;
3375
&:disabled {
3377
color: theme-color.disabled(theme-color.$on-surface);
3378
}
3379
> header {
3381
padding: 4px;
3382
border-spacing: 4px;
3383
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
3384
> button.image-button {
3386
padding: 0;
3387
min-width: 28px;
3388
min-height: 28px;
3389
border-radius: theme.$circular-radius;
3390
background-color: transparent;
3391
color: theme-color.hint(theme-color.$on-surface);
3392
@include drawing.ink-color(theme-color.$on-surface, $button-style: "flat");
3393
&:disabled {
3395
color: theme-color.disabled-hint(theme-color.$on-surface);
3396
}
3397
}
3398
}
3399
> grid {
3401
padding: 4px;
3402
border-spacing: 4px;
3403
> label {
3405
// padding: 4px;
3406
padding: 0;
3407
min-width: 28px;
3408
min-height: 28px;
3409
border-radius: theme.$circular-radius;
3410
}
3411
> label.day-name,
3413
> label.week-number {
3414
color: theme-color.hint(theme-color.$on-surface);
3415
font-weight: 500;
3416
}
3417
> label.day-number {
3419
@extend %ripple;
3420
@include drawing.ink-color(theme-color.$on-surface);
3421
&.today {
3423
box-shadow: inset 0 0 0 1px theme-color.hint(theme-color.$on-surface);
3424
}
3425
&.other-month {
3427
color: theme-color.disabled-hint(theme-color.$on-surface);
3428
}
3429
&:selected {
3431
background-color: theme-color.$selected-overlay;
3432
box-shadow: inset 0 0 0 1px transparent;
3433
@include drawing.ink-color(theme-color.$primary, $on: theme-color.$selected-overlay);
3434
}
3435
}
3436
}
3437
}
3438
/**
3440
* Dialogs
3441
*/
3442
window.dialog.message { // Message Dialog styling
3444
&.csd.background {
3445
min-width: 280px;
3446
border-radius: theme.$corner-radius; // rounded bottom border styling for csd version
3447
background-color: theme-color.$surface-z8;
3448
}
3449
> .titlebar {
3451
min-height: 24px;
3452
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
3453
background-color: transparent;
3454
color: theme-color.$on-surface;
3455
&:backdrop {
3457
background-color: transparent;
3458
color: theme-color.hint(theme-color.$on-surface);
3459
}
3460
}
3461
> box.dialog-vbox.vertical {
3463
border-spacing: 20px;
3464
> box.vertical > box.horizontal {
3466
margin: 0 24px - 30px;
3467
}
3468
}
3469
label.title {
3471
font-weight: 500;
3472
font-size: pt(20px);
3473
letter-spacing: pt(.15px);
3474
}
3475
// Hint text
3477
label.title + label {
3478
color: theme-color.hint(theme-color.$on-surface);
3479
}
3480
list,
3482
.view {
3483
background-color: transparent;
3484
}
3485
.dialog-action-area > button {
3487
@extend %button-flat;
3488
&:not(:disabled) {
3490
color: theme-color.$primary;
3491
@include drawing.ink-color(theme-color.$primary);
3492
}
3493
&.suggested-action:not(:disabled) {
3495
background-color: transparent;
3496
// color: $primary;
3497
// @include ink-color($primary);
3498
}
3499
&.destructive-action:not(:disabled) {
3501
background-color: transparent;
3502
color: theme-color.$error;
3503
@include drawing.ink-color(theme-color.$error);
3504
}
3505
}
3506
}
3507
.dialog-action-area {
3509
// margin-top: -$container-padding;
3510
padding: theme.$container-padding;
3511
border-spacing: theme.$container-padding;
3512
}
3513
filechooser {
3515
.dialog-action-box {
3516
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
3517
}
3518
#pathbarbox {
3520
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
3521
// background-color: $surface-z0;
3522
> stack > box > button { // The new folder button
3524
@extend %button-flat;
3525
border-radius: theme.$circular-radius;
3527
}
3528
}
3529
}
3530
filechooserbutton > button > box {
3532
border-spacing: 6px;
3533
}
3534
filechooserbutton:drop(active) {
3536
// box-shadow: none;
3537
}
3538
/**
3540
* Sidebar
3541
*/
3542
.sidebar {
3544
border-style: none;
3545
&:not(separator) {
3547
@at-root %sidebar_left,
3548
&:dir(ltr),
3549
&.left,
3550
&.left:dir(rtl) {
3551
border-right: 1px solid theme-color.divider(theme-color.$on-surface);
3552
border-left-style: none;
3553
}
3554
@at-root %sidebar_right,
3556
&:dir(rtl),
3557
&.right {
3558
border-left: 1px solid theme-color.divider(theme-color.$on-surface);
3559
border-right-style: none;
3560
}
3561
}
3562
list {
3564
// background-color: transparent;
3565
}
3566
paned & {
3568
&:dir(rtl):not(:dir(ltr)),
3569
&:dir(ltr):not(:dir(rtl)) {
3570
border-style: none;
3571
}
3572
}
3573
}
3574
stacksidebar.sidebar {
3576
list {
3577
padding: 4px;
3578
}
3579
list.separators:not(.horizontal) > row:not(:first-child) {
3581
border-top-style: none;
3582
}
3583
row {
3585
min-height: 32px;
3586
padding: 0 8px - 6px;
3587
border-radius: theme.$corner-radius;
3588
color: theme-color.hint(theme-color.$on-surface);
3589
font-weight: 500;
3590
&:selected {
3592
background-color: theme-color.activated-overlay(theme-color.$primary);
3593
color: theme-color.$primary;
3594
@include drawing.ink-color(theme-color.$primary, $on: theme-color.activated-overlay(theme-color.$primary));
3595
}
3596
+ row {
3598
margin-top: 4px;
3599
}
3600
> label {
3602
padding-left: 6px;
3603
padding-right: 6px;
3604
}
3605
&.needs-attention > label {
3607
@extend %needs-attention;
3608
}
3609
}
3610
}
3611
separator.sidebar {
3613
&.selection-mode,
3614
.selection-mode & {
3615
// background-color: divider($on-surface);
3616
}
3617
}
3618
/**
3620
* File chooser
3621
*/
3622
// dim the sidebar icons, see bug #786613 for details on this oddity
3624
row image.sidebar-icon {
3625
transition: color theme.$state-duration theme.$ease-out;
3626
color: theme-color.hint(theme-color.$on-surface);
3627
&:disabled {
3629
color: theme-color.disabled-hint(theme-color.$on-surface);
3630
}
3631
}
3632
placessidebar.sidebar {
3634
list {
3635
padding: 4px 0;
3636
> separator {
3638
margin: 4px 0;
3639
}
3640
}
3641
row {
3643
// Needs overriding of the GtkListBoxRow padding
3644
min-height: 32px;
3645
margin: 0 4px; // Remove unwanted hard-coded vertical margins with -1px
3646
padding: 0;
3647
border-radius: theme.$corner-radius;
3648
color: theme-color.hint(theme-color.$on-surface);
3649
font-weight: 500;
3650
// Using margins/padding directly in the SidebarRow
3652
// will make the animation of the new bookmark row jump
3653
> revealer {
3654
padding: 0 8px;
3655
}
3656
&:selected {
3658
background-color: theme-color.activated-overlay(theme-color.$primary);
3659
color: theme-color.$primary;
3660
@include drawing.ink-color(theme-color.$primary, $on: theme-color.activated-overlay(theme-color.$primary));
3661
image.sidebar-icon {
3663
color: theme-color.$primary;
3664
}
3665
}
3666
&:disabled {
3668
color: theme-color.disabled(theme-color.$on-surface);
3669
}
3670
image.sidebar-icon {
3672
&:dir(ltr) {
3673
padding-right: 8px;
3674
}
3675
&:dir(rtl) {
3677
padding-left: 8px;
3678
}
3679
}
3680
label.sidebar-label {
3682
&:dir(ltr) {
3683
padding-right: 2px;
3684
}
3685
&:dir(rtl) {
3687
padding-left: 2px;
3688
}
3689
}
3690
@at-root button.sidebar-button {
3692
@extend %button-flat-basic;
3693
@extend %button-small;
3694
}
3695
&.sidebar-placeholder-row {
3697
background-color: theme-color.hover-overlay(theme-color.$on-surface);
3698
}
3699
&.sidebar-new-bookmark-row {
3701
color: theme-color.$primary;
3702
image.sidebar-icon {
3704
color: theme-color.$primary;
3705
}
3706
}
3707
}
3708
}
3709
placesview {
3711
.server-list-button {
3712
> image {
3713
-gtk-icon-transform: rotate(0turn);
3714
}
3715
&:checked > image {
3717
-gtk-icon-transform: rotate(-0.5turn);
3718
}
3719
}
3720
> actionbar > revealer > box > box {
3722
border-spacing: theme.$container-padding;
3723
}
3724
// this selects the "connect to server" label
3726
> actionbar > revealer > box > box > label {
3727
padding-left: 8px;
3728
padding-right: 8px;
3729
}
3730
}
3731
/**
3733
* Paned
3734
*/
3735
paned {
3737
> separator {
3738
background-clip: content-box;
3739
// -gtk-icon-source: none; // defeats the ugly default handle decoration
3740
&.wide {
3742
min-width: 4px;
3743
min-height: 4px;
3744
border: 1px solid theme-color.divider(theme-color.$on-surface);
3745
background-color: transparent;
3746
}
3747
}
3748
&.horizontal > separator {
3750
&:not(.wide) {
3751
margin: 0 -4px;
3752
padding: 0 4px;
3753
}
3754
&.wide {
3756
border-style: none solid;
3757
}
3758
}
3759
&.vertical > separator {
3761
&:not(.wide) {
3762
margin: -4px 0;
3763
padding: 4px 0;
3764
}
3765
&.wide {
3767
border-style: solid none;
3768
}
3769
}
3770
}
3771
/**
3773
* GtkVideo
3774
*/
3775
video {
3777
background-color: black;
3778
image.osd {
3780
min-width: 64px;
3781
min-height: 64px;
3782
border-radius: 32px;
3783
background-color: theme-color.$scrim;
3784
color: theme-color.$on-scrim;
3785
}
3786
controls.osd {
3788
padding: 4px;
3789
background-image:
3790
linear-gradient(
3791
to bottom,
3792
transparent,
3793
rgba(black, .1) 30%,
3794
rgba(black, .2) 50%,
3795
rgba(black, .4)
3796
);
3797
color: theme-color.on(black);
3798
button {
3800
background-color: transparent;
3801
color: theme-color.hint(theme-color.on(black));
3802
@include drawing.ink-color(theme-color.on(black));
3803
}
3804
}
3805
}
3806
/**
3808
* GtkInfoBar
3809
*/
3810
infobar {
3812
> revealer > box {
3813
padding: 8px;
3814
border-spacing: 12px;
3815
}
3816
&.action:hover > revealer > box {
3818
background-image: image(theme-color.hover-overlay(theme-color.$on-surface));
3819
}
3820
&.info > revealer > box,
3822
&.question > revealer > box {
3823
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
3824
// background-color: $surface-z1;
3825
button {
3827
@extend %button-flat;
3828
&.text-button:not(:disabled) {
3830
color: theme-color.$primary;
3831
@include drawing.ink-color(theme-color.$primary);
3832
}
3833
}
3834
}
3835
&.warning > revealer > box {
3837
background-color: theme-color.$warning;
3838
color: theme-color.$on-warning;
3839
button.flat {
3841
color: theme-color.$on-warning;
3842
@include drawing.ink-color(theme-color.$on-warning);
3843
}
3844
selection {
3846
}
3847
link {
3849
color: theme-color.$on-warning;
3850
}
3851
}
3852
&.error > revealer > box {
3854
background-color: theme-color.$error;
3855
color: theme-color.$on-error;
3856
button.flat {
3858
color: theme-color.$on-error;
3859
@include drawing.ink-color(theme-color.$on-error);
3860
}
3861
selection {
3863
}
3864
link {
3866
color: theme-color.$on-error;
3867
}
3868
}
3869
// Remove ugly hard-coded padding
3871
button label {
3872
// margin: 0 -4px;
3873
}
3874
}
3875
/**
3877
* Tooltips
3878
*/
3879
tooltip {
3881
&.background {
3882
// background-color needs to be set this way otherwise it gets drawn twice
3883
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3884
background-color: theme-color.$tooltip;
3885
color: theme-color.$on-tooltip;
3886
}
3887
min-height: 32px - 4px * 2;
3889
padding: 4px 8px;
3890
border-radius: theme.$corner-radius;
3891
&:not(.csd) {
3893
background-color: theme-color.$tooltip;
3894
}
3895
> box {
3897
border-spacing: 6px;
3898
}
3899
.dim-label {
3901
color: theme-color.hint(theme-color.$on-tooltip);
3902
}
3903
}
3904
/**
3906
* Color Chooser
3907
*/
3908
colorswatch {
3910
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3911
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3912
// applied to the overlay box.
3913
// base color corners rounding
3915
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3916
// sports a bigger radius.
3917
// nth-child is needed by the custom color strip.
3918
transition: theme.$transition-shadow;
3920
box-shadow: shadow.$z1;
3921
&:drop(active),
3923
&.activatable:hover {
3924
box-shadow: shadow.$z3;
3925
}
3926
&:disabled {
3928
opacity: .5;
3929
// box-shadow: none;
3930
}
3931
&.top {
3933
border-top-left-radius: theme.$corner-radius;
3934
border-top-right-radius: theme.$corner-radius;
3935
}
3936
&.bottom {
3938
border-bottom-left-radius: theme.$corner-radius;
3939
border-bottom-right-radius: theme.$corner-radius;
3940
}
3941
&.left,
3943
&:first-child:not(.top) {
3944
border-top-left-radius: theme.$corner-radius;
3945
border-bottom-left-radius: theme.$corner-radius;
3946
}
3947
&.right,
3949
&:last-child:not(.bottom) {
3950
border-top-right-radius: theme.$corner-radius;
3951
border-bottom-right-radius: theme.$corner-radius;
3952
}
3953
&.dark {
3955
color: theme-color.$on-dark;
3956
}
3957
&.light {
3959
color: theme-color.$on-light;
3960
}
3961
&#add-color-button {
3963
// border-radius: $corner-radius 0 0 $corner-radius;
3964
background-color: theme-color.$surface-z8;
3965
color: theme-color.$on-surface;
3966
&:only-child {
3968
// border-radius: $corner-radius;
3969
}
3970
}
3971
row:selected & {
3973
}
3974
&#editor-color-sample {
3976
border-radius: theme.$corner-radius;
3977
}
3978
}
3979
// colorscale popup
3981
colorchooser .popover.osd {
3982
transition: theme.$transition-shadow;
3983
border-radius: theme.$corner-radius;
3984
box-shadow: shadow.$z4, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
3985
background-color: theme-color.$surface-z8;
3986
&:backdrop {
3988
box-shadow: shadow.$z2, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
3989
}
3990
}
3991
/**
3993
* Misc
3994
*/
3995
// content view (grid/list)
3997
.content-view {
3998
// background-color: $surface-z0;
3999
&:hover {
4001
// -gtk-icon-filter: brightness(1.2);
4002
}
4003
}
4004
.scale-popup {
4006
.osd & {
4007
// @extend %osd;
4008
button.flat {
4010
}
4011
}
4012
// +/- buttons on GtkVolumeButton popup
4014
button {
4015
}
4016
}
4017
/**
4019
* Window Decorations
4020
*/
4021
window {
4023
&.csd {
4024
transition: theme.$transition-shadow;
4025
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
4026
border-radius: theme.$corner-radius;
4027
box-shadow: shadow.$z16, 0 16px 24px 2px transparent, 0 6px 30px 5px transparent;
4028
&:backdrop {
4030
// the transparent shadow here is to enforce that the shadow extents don't
4031
// change when we go to backdrop, to prevent jumping windows.
4032
// The biggest shadow should be in the same order then in the active state
4033
// or the jumping will happen during the transition.
4034
box-shadow: shadow.$z4, 0 16px 24px 2px transparent, 0 6px 30px 5px transparent;
4035
}
4036
}
4037
// server-side decorations as used by mutter
4039
&.ssd {
4040
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); // just doing borders, wm draws actual shadows
4041
}
4042
&.solid-csd {
4044
margin: 0;
4045
padding: 2px;
4046
border-radius: 0;
4047
box-shadow: none;
4048
box-shadow: inset 0 1px theme-color.highlight(theme-color.$titlebar);
4049
background-color: theme-color.$titlebar;
4050
&:backdrop {
4052
background-color: theme-color.$titlebar-backdrop;
4053
}
4054
}
4055
&.maximized,
4057
&.fullscreen,
4058
&.tiled,
4059
&.tiled-top,
4060
&.tiled-left,
4061
&.tiled-right,
4062
&.tiled-bottom {
4063
border-radius: 0;
4064
}
4065
}
4066
// catch all extend :)
4068
%selected_items {
4070
background-color: theme-color.$selected-overlay;
4071
}
4072
.monospace {
4074
font-family: monospace;
4075
}
4076
/**
4078
* Touch Copy & Paste
4079
*/
4080
// touch selection handlebars for the Popover.osd above
4082
cursor-handle {
4083
min-width: 24px;
4084
min-height: 24px;
4085
border-radius: 50%;
4086
background-color: theme-color.$primary;
4087
// -gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4088
&.top:dir(ltr),
4090
&.bottom:dir(rtl) {
4091
border-top-right-radius: 0;
4092
// -gtk-icon-transform: rotate(90deg);
4093
}
4094
&.bottom:dir(ltr),
4096
&.top:dir(rtl) {
4097
border-top-left-radius: 0;
4098
// -gtk-icon-transform: unset;
4099
}
4100
&.insertion-cursor:dir(ltr),
4102
&.insertion-cursor:dir(rtl) {
4103
margin-top: 6px;
4104
transform: rotate(45deg);
4105
}
4106
}
4107
shortcuts-section {
4109
margin: 20px;
4110
}
4111
.shortcuts-search-results {
4113
margin: 20px;
4114
border-spacing: 24px;
4115
}
4116
// shortcut window keys
4118
shortcut {
4119
border-spacing: 6px;
4120
}
4121
shortcut > .keycap {
4123
min-width: 28px - 8px * 2;
4124
// min-height: 28px - 2px;
4125
min-height: 28px;
4126
// margin-top: 2px;
4127
// padding-bottom: 2px;
4128
padding-left: 8px;
4129
padding-right: 8px;
4130
// border: solid 1px divider($on-surface);
4132
// border-radius: $corner-radius + 1px;
4133
border-radius: theme.$corner-radius;
4134
// box-shadow: inset 0 -2px divider($on-surface);
4135
box-shadow: shadow.$z1;
4136
background-color: theme-color.$surface-z8;
4137
color: theme-color.$on-surface;
4138
font-size: smaller;
4139
}
4140
// FIXME needs to be done widget by widget, this wildcard should really die
4142
:drop(active) {
4143
// caret-color: $primary;
4144
}
4145
// FIXME aggregate with buttons
4147
stackswitcher > button.text-button {
4148
min-width: 100px;
4149
}
4150
stackswitcher.circular {
4152
border-spacing: 12px;
4153
// FIXME aggregate with buttons
4155
> button.circular {
4156
min-width: theme.$medium-size;
4157
min-height: theme.$medium-size;
4158
padding: 0;
4159
}
4160
}
4161
/**
4163
* App Icons
4164
*/
4165
// Outline for low res icons
4167
.lowres-icon {
4168
// -gtk-icon-shadow: none;
4169
}
4170
// Drapshadow for large icons
4172
.icon-dropshadow {
4173
// -gtk-icon-shadow: none;
4174
}
4175
/**
4177
* Emoji
4178
*/
4179
popover.emoji-picker > contents {
4181
padding: 0;
4182
emoji {
4184
min-width: 3em;
4185
min-height: 3em;
4186
// padding: 8px;
4187
border-radius: theme.$corner-radius;
4188
// font-size: larger;
4189
@extend %ripple;
4191
@include drawing.ink-color(theme-color.$on-surface);
4192
}
4193
}
4194
.emoji-searchbar {
4196
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
4197
> entry.search {
4199
border-image: none;
4200
border-radius: 0;
4201
box-shadow: none;
4202
background-color: transparent;
4203
}
4204
}
4205
.emoji-toolbar {
4207
padding: 4px;
4208
border-spacing: 4px;
4209
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
4210
> button.emoji-section {
4212
&:checked {
4213
background-color: theme-color.activated-overlay(theme-color.$primary);
4214
color: theme-color.$primary;
4215
@include drawing.ink-color(theme-color.$primary, $on: theme-color.activated-overlay(theme-color.$primary));
4216
}
4217
}
4218
}
4219
popover.emoji-completion > contents {
4221
padding: 8px 0;
4222
emoji-completion-row {
4224
min-height: 32px;
4225
padding: 0 8px;
4226
@extend %ripple;
4227
@include drawing.ink-color(theme-color.$on-surface);
4228
> box {
4230
border-spacing: 8px;
4231
}
4232
}
4233
emoji {
4235
// min-width: 3em;
4236
// min-height: 3em;
4237
// padding: 8px;
4238
border-radius: theme.$corner-radius;
4239
@extend %ripple;
4241
@include drawing.ink-color(theme-color.$on-surface);
4242
}
4243
}
4244
popover.entry-completion > contents {
4246
padding: 0;
4247
treeview.view {
4249
min-height: 32px; // FIXME: should be in .cell
4250
padding: 8px 0;
4251
> .cell {
4253
padding: 0 4px; // FIXME: should be `0 8px`
4254
&:selected:hover {
4256
background-color: theme-color.focus-overlay(theme-color.$on-surface);
4257
}
4258
}
4259
}
4260
}
4261
/*
4264
* Styles for gPanthera
4265
*/
4266
$gpanthera-tab-indicator-width: 3px;
4268
.gpanthera-content-tab-bar {
4270
.gpanthera-content-tab-box > .gpanthera-content-tab {
4271
background: transparent;
4272
box-shadow: none;
4273
}
4274
&.top {
4276
box-shadow: inset 0 -1px theme-color.divider(theme-color.$on-surface);
4277
.gpanthera-content-tab-box > .gpanthera-content-tab {
4279
box-shadow: inset 0 (-$gpanthera-tab-indicator-width) transparent;
4280
border-bottom-left-radius: 0;
4281
border-bottom-right-radius: 0;
4282
&:checked {
4284
box-shadow: inset 0 (-$gpanthera-tab-indicator-width) rgba(theme-color.$primary, 50%);
4285
}
4286
}
4287
}
4288
&.bottom {
4290
box-shadow: inset 0 1px theme-color.divider(theme-color.$on-surface);
4291
.gpanthera-content-tab-box > .gpanthera-content-tab {
4293
box-shadow: inset 0 $gpanthera-tab-indicator-width transparent;
4294
border-top-left-radius: 0;
4295
border-top-right-radius: 0;
4296
&:checked {
4298
box-shadow: inset 0 $gpanthera-tab-indicator-width rgba(theme-color.$primary, 50%);
4299
}
4300
}
4301
}
4302
&.left {
4304
box-shadow: inset -1px 0 theme-color.divider(theme-color.$on-surface);
4305
.gpanthera-content-tab-box > .gpanthera-content-tab {
4307
box-shadow: inset (-$gpanthera-tab-indicator-width) 0 transparent;
4308
border-top-right-radius: 0;
4309
border-bottom-right-radius: 0;
4310
&:checked {
4312
box-shadow: inset (-$gpanthera-tab-indicator-width) 0 rgba(theme-color.$primary, 50%);
4313
}
4314
}
4315
}
4316
&.right {
4318
box-shadow: inset 1px 0 theme-color.divider(theme-color.$on-surface);
4319
.gpanthera-content-tab-box > .gpanthera-content-tab {
4321
box-shadow: inset $gpanthera-tab-indicator-width 0 transparent;
4322
border-top-left-radius: 0;
4323
border-bottom-left-radius: 0;
4324
&:checked {
4326
box-shadow: inset $gpanthera-tab-indicator-width 0 rgba(theme-color.$primary, 50%);
4327
}
4328
}
4329
}
4330
.gpanthera-content-tab-box > .gpanthera-content-tab {
4332
@extend %ripple;
4333
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
4334
min-height: theme.$small-size;
4335
min-width: theme.$small-size;
4336
padding: theme.$container-padding 12px;
4337
color: theme-color.hint(theme-color.$on-surface);
4338
font-weight: 500;
4339
&:hover {
4341
// background-color: hover-overlay($on-surface, $alt: true);
4342
}
4343
&:active {
4345
// background-image: radial-gradient(circle, pressed-overlay($on-surface) 10%, transparent 10%);
4346
}
4347
&:disabled {
4349
color: theme-color.disabled-hint(theme-color.$on-surface);
4350
}
4351
&:checked {
4353
@include drawing.ink-color(theme-color.$primary, $hover-alt: true);
4354
color: theme-color.$primary;
4355
&:hover {
4357
// background-color: hover-overlay($primary, $alt: true);
4358
}
4359
&:active {
4361
// background-image: radial-gradient(circle, pressed-overlay($primary) 10%, transparent 10%);
4362
}
4363
&:disabled {
4365
color: theme-color.disabled-hint(theme-color.$on-surface);
4366
}
4367
&.reorderable-page {
4369
// border-color: divider($on-surface);
4370
// background-color: $surface-z1;
4371
}
4372
}
4373
// colors the button like the label, overridden otherwise
4375
button.flat {
4376
@extend %button-small;
4377
&:last-child {
4379
margin-left: theme.$container-padding;
4380
margin-right: theme.$container-padding - 12px;
4381
}
4382
&:first-child {
4384
margin-left: theme.$container-padding - 12px;
4385
margin-right: theme.$container-padding;
4386
}
4387
}
4388
}
4389
}
4390
.gpanthera-content-notebook:focus-within > .gpanthera-content-tab-bar {
4392
&.top {
4393
.gpanthera-content-tab-box > .gpanthera-content-tab {
4394
&:checked {
4395
box-shadow: inset 0 (-$gpanthera-tab-indicator-width) theme-color.$primary;
4396
}
4397
}
4398
}
4399
&.bottom {
4400
.gpanthera-content-tab-box > .gpanthera-content-tab {
4401
&:checked {
4402
box-shadow: inset 0 $gpanthera-tab-indicator-width theme-color.$primary;
4403
}
4404
}
4405
}
4406
&.left {
4407
.gpanthera-content-tab-box > .gpanthera-content-tab {
4408
&:checked {
4409
box-shadow: inset (-$gpanthera-tab-indicator-width) 0 theme-color.$primary;
4410
}
4411
}
4412
}
4413
&.right {
4414
.gpanthera-content-tab-box > .gpanthera-content-tab {
4415
&:checked {
4416
box-shadow: inset $gpanthera-tab-indicator-width 0 theme-color.$primary;
4417
}
4418
}
4419
}
4420
}
4421
/**
4424
* Fix for window controls in libAdwaita apps
4425
*/
4426
windowcontrols > button {
4428
@extend %button-flat;
4429
box-shadow: none;
4430
background-color: transparent;
4431
border-radius: theme.$circular-radius;
4432
}
4433
/**
4435
* Panorama panel support
4436
*/
4437
.panorama-panel-applet.horizontal > button, .panorama-panel-applet.horizontal > menubutton > button, .panorama-panel-applet.horizontal .panorama-panel-button {
4439
padding-top: 0;
4440
padding-bottom: 0;
4441
}
4442
.panorama-panel-applet > button, .panorama-panel-applet > menubutton > button, .panorama-panel-button {
4444
border-radius: 0;
4445
}
4446
.panorama-panel-applet.vertical > button, .panorama-panel-applet.vertical > menubutton > button, .panorama-panel-applet.vertical .panorama-panel-button {
4448
padding-left: 0;
4449
padding-right: 0;
4450
}
4451