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
separator {
1978
margin: 6px 0;
1979
}
1980
label.title {
1982
min-height: 32px - 4px * 2;
1983
padding: 4px 32px; // this will fall apart with font sizing
1984
font-weight: bold;
1985
}
1986
modelbutton {
1988
// transition: background-color $state-duration $ease-out;
1989
min-height: 30px - 4px * 2;
1990
min-width: 40px;
1991
padding: 4px 32px;
1992
&:hover {
1994
// transition: none;
1995
// background-color: hover-overlay($on-surface);
1996
}
1997
&:disabled {
1999
color: theme-color.disabled(theme-color.$on-surface);
2000
}
2001
accelerator {
2003
color: theme-color.hint(theme-color.$on-surface);
2004
&:dir(ltr) {
2006
margin-left: 24px;
2007
margin-right: 16px - 32px;
2008
}
2009
&:dir(rtl) {
2011
margin-left: 16px - 32px;
2012
margin-right: 24px;
2013
}
2014
}
2015
&:disabled accelerator {
2017
color: theme-color.disabled-hint(theme-color.$on-surface);
2018
}
2019
}
2020
check,
2022
radio {
2023
&,
2024
&:focus,
2025
&:hover,
2026
&:active,
2027
&:disabled {
2028
// transition: none;
2029
background-color: transparent;
2030
background-image: none;
2031
}
2032
}
2033
arrow,
2035
check,
2036
radio {
2037
min-width: 16px;
2038
min-height: 16px;
2039
margin: 0;
2040
padding: 0;
2041
&.left {
2043
margin-left: 8px - 32px;
2044
margin-right: 8px;
2045
}
2046
&.right {
2048
margin-left: 8px;
2049
margin-right: 8px - 32px;
2050
}
2051
}
2052
button.model {
2054
@extend %button-flat;
2055
// min-height: 32px;
2057
// padding: 0 8px;
2058
// border-radius: $corner-radius;
2059
&:checked {
2061
// color: $primary;
2062
}
2063
}
2064
box.inline-buttons {
2066
padding: 0 8px;
2067
button.image-button.model {
2069
}
2070
}
2071
box.circular-buttons {
2073
padding: 4px 32px;
2074
button.circular.image-button.model {
2076
padding: 12px;
2077
}
2078
}
2079
}
2080
/**
2082
* Popovers
2083
*/
2084
popover {
2086
font: initial; // Decouple the font of popovers from their entry/textview
2087
&.background {
2089
background-color: transparent;
2090
}
2091
> arrow,
2093
> contents {
2094
transition: theme.$transition-shadow;
2095
box-shadow: shadow.$z4;
2096
background-color: theme-color.$surface-z8;
2097
color: theme-color.$on-surface;
2098
&:backdrop {
2100
box-shadow: shadow.$z2;
2101
}
2102
}
2103
@at-root %popover-border {
2105
border-width: 1px;
2106
border-style: solid;
2107
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
2108
background-clip: padding-box;
2109
}
2110
> arrow {
2112
@extend %popover-border;
2113
}
2114
> contents {
2116
padding: 8px;
2117
@if gtk.$version >= 4.2 {
2119
border-radius: theme.$corner-radius;
2120
} @else {
2121
@extend %popover-border;
2122
border-radius: theme.$corner-radius + 1px;
2123
}
2124
> list,
2126
.view,
2127
> .toolbar {
2128
border-style: none;
2129
box-shadow: none;
2130
background-color: transparent;
2131
}
2132
separator {
2134
// margin: 4px 0;
2135
}
2136
list separator {
2138
// margin: 0;
2139
}
2140
}
2141
.osd &,
2143
&.touch-selection,
2144
&.magnifier {
2145
// @extend %osd;
2146
}
2147
button {
2149
@extend %button-outlined;
2150
}
2151
frame,
2153
.frame {
2154
border: 1px solid theme-color.divider(theme-color.$on-surface);
2155
box-shadow: none;
2156
background-color: transparent;
2157
}
2158
.linked:not(.vertical) > entry:not(:only-child) {
2160
// border-radius: $corner-radius $corner-radius 0 0;
2161
}
2162
}
2163
/**
2165
* Notebooks
2166
*/
2167
notebook {
2169
&:focus:focus-visible > header > tabs > tab:checked {
2170
background-color: theme-color.focus-overlay(theme-color.$primary);
2171
}
2172
> header {
2174
&.top {
2175
box-shadow: inset 0 -1px theme-color.divider(theme-color.$on-surface);
2176
> tabs {
2178
> tab {
2179
box-shadow: inset 0 -2px transparent;
2180
&:checked {
2182
box-shadow: inset 0 -2px theme-color.$primary;
2183
}
2184
}
2185
}
2186
}
2187
&.bottom {
2189
box-shadow: inset 0 1px theme-color.divider(theme-color.$on-surface);
2190
> tabs {
2192
> tab {
2193
box-shadow: inset 0 2px transparent;
2194
&:checked {
2196
box-shadow: inset 0 2px theme-color.$primary;
2197
}
2198
}
2199
}
2200
}
2201
&.left {
2203
box-shadow: inset -1px 0 theme-color.divider(theme-color.$on-surface);
2204
> tabs {
2206
> tab {
2207
box-shadow: inset -2px 0 transparent;
2208
&:checked {
2210
box-shadow: inset -2px 0 theme-color.$primary;
2211
}
2212
}
2213
}
2214
}
2215
&.right {
2217
box-shadow: inset 1px 0 theme-color.divider(theme-color.$on-surface);
2218
> tabs {
2220
> tab {
2221
box-shadow: inset 2px 0 transparent;
2222
&:checked {
2224
box-shadow: inset 2px 0 theme-color.$primary;
2225
}
2226
}
2227
}
2228
}
2229
&.top > tabs > arrow {
2231
@extend %notebook_vert_arrows;
2232
}
2233
&.bottom > tabs > arrow {
2235
@extend %notebook_vert_arrows;
2236
}
2237
@at-root %notebook_vert_arrows {
2239
&.down {
2240
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2241
}
2242
&.up {
2244
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2245
}
2246
}
2247
&.left > tabs > arrow {
2249
@extend %notebook_horz_arrows;
2250
}
2251
&.right > tabs > arrow {
2253
@extend %notebook_horz_arrows;
2254
}
2255
@at-root %notebook_horz_arrows {
2257
&.down {
2258
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2259
}
2260
&.up {
2262
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2263
}
2264
}
2265
> tabs > arrow {
2267
min-height: 16px;
2268
min-width: 16px;
2269
padding: 4px;
2270
border-radius: 0;
2271
color: theme-color.hint(theme-color.$on-surface);
2272
@extend %ripple;
2273
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
2274
&:disabled {
2276
color: theme-color.disabled-hint(theme-color.$on-surface);
2277
}
2278
}
2279
> tabs > tab {
2281
@extend %ripple;
2282
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
2283
min-height: theme.$small-size;
2284
min-width: theme.$small-size;
2285
padding: theme.$container-padding 12px;
2286
color: theme-color.hint(theme-color.$on-surface);
2287
font-weight: 500;
2288
&:hover {
2290
// background-color: hover-overlay($on-surface, $alt: true);
2291
}
2292
&:active {
2294
// background-image: radial-gradient(circle, pressed-overlay($on-surface) 10%, transparent 10%);
2295
}
2296
&:disabled {
2298
color: theme-color.disabled-hint(theme-color.$on-surface);
2299
}
2300
&:checked {
2302
@include drawing.ink-color(theme-color.$primary, $hover-alt: true);
2303
color: theme-color.$primary;
2304
&:hover {
2306
// background-color: hover-overlay($primary, $alt: true);
2307
}
2308
&:active {
2310
// background-image: radial-gradient(circle, pressed-overlay($primary) 10%, transparent 10%);
2311
}
2312
&:disabled {
2314
color: theme-color.disabled-hint(theme-color.$on-surface);
2315
}
2316
&.reorderable-page {
2318
// border-color: divider($on-surface);
2319
// background-color: $surface-z1;
2320
}
2321
}
2322
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2324
> box {
2325
transition: background-color theme.$state-duration theme.$ease-out;
2326
margin: -(theme.$container-padding) -12px;
2327
padding: theme.$container-padding 12px;
2328
&:drop(active) {
2330
background-color: theme-color.hover-overlay(theme-color.$on-surface);
2331
}
2332
}
2333
// colors the button like the label, overridden otherwise
2335
button.flat {
2336
@extend %button-small;
2337
&:last-child {
2339
margin-left: theme.$container-padding;
2340
margin-right: theme.$container-padding - 12px;
2341
}
2342
&:first-child {
2344
margin-left: theme.$container-padding - 12px;
2345
margin-right: theme.$container-padding;
2346
}
2347
}
2348
}
2349
}
2350
}
2351
/**
2353
* Scrollbars
2354
*/
2355
scrollbar {
2357
$_slider_min_length: 24px;
2358
transition: theme.$transition;
2360
background-clip: padding-box;
2361
// background-color: $surface-z1;
2362
// scrollbar border
2364
&.top { border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); }
2365
&.bottom { border-top: 1px solid theme-color.divider(theme-color.$on-surface); }
2366
&.left { border-right: 1px solid theme-color.divider(theme-color.$on-surface); }
2367
&.right { border-left: 1px solid theme-color.divider(theme-color.$on-surface); }
2368
// slider
2370
> range > trough > slider {
2371
transition: background-color theme.$state-duration theme.$ease-out;
2372
min-width: 10px;
2373
min-height: 10px;
2374
border: 3px solid transparent;
2375
border-radius: theme.$circular-radius;
2376
background-clip: padding-box;
2377
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface);
2378
&:hover {
2380
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "hover");
2381
}
2382
&:active {
2384
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "pressed");
2385
}
2386
&:disabled {
2388
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "disabled");
2389
}
2390
}
2391
&.horizontal > range > trough > slider {
2393
min-width: $_slider_min_length;
2394
}
2395
&.vertical > range > trough > slider {
2397
min-height: $_slider_min_length;
2398
}
2399
> range.fine-tune {
2401
> trough > slider {
2402
min-width: 4px;
2403
min-height: 4px;
2404
}
2405
&.horizontal > trough > slider {
2407
margin: 3px 0;
2408
}
2409
&.vertical > trough > slider {
2411
margin: 0 3px;
2412
}
2413
}
2414
&.overlay-indicator {
2416
> range:not(.fine-tune) > trough > slider {
2417
transition-property: background-color, min-height, min-width;
2418
}
2419
&:not(.dragging):not(.hovering) {
2421
border-color: transparent;
2422
background-color: transparent;
2423
> range > trough > slider {
2425
min-width: 4px;
2426
min-height: 4px;
2427
margin: 3px - 1px;
2428
border: 1px solid rgba(theme-color.$surface-z1, 0.3);
2429
}
2430
&.horizontal > range > trough > slider {
2432
min-width: $_slider_min_length;
2433
}
2434
&.vertical > range > trough > slider {
2436
min-height: $_slider_min_length;
2437
}
2438
}
2439
&.dragging,
2441
&.hovering {
2442
background-color: theme-color.$surface-z8;
2443
}
2444
}
2445
}
2446
/**
2448
* Switch
2449
*/
2450
switch {
2452
transition: all theme.$state-duration theme.$ease-out;
2453
margin: theme.$container-padding 0;
2454
padding: 0 2px;
2455
border: 5px solid transparent;
2456
border-radius: theme.$circular-radius;
2457
background-color: theme-color.stroke(theme-color.$on-surface);
2458
background-clip: padding-box;
2459
font-size: 0;
2460
&:checked {
2462
background-color: rgba(theme-color.$primary, .5);
2463
}
2464
&:disabled {
2466
opacity: .5;
2467
}
2468
// hide on/off icons for >=3.24.5
2470
> image {
2471
margin: -8px;
2472
-gtk-icon-transform: scale(0);
2473
}
2474
> slider {
2476
transition: all theme.$state-duration theme.$ease-out;
2477
min-width: 20px;
2478
min-height: 20px;
2479
margin: -3px -2px;
2480
border-radius: theme.$circular-radius;
2481
box-shadow:
2482
0 0 0 10px transparent,
2483
0 0 0 -10px theme-color.pressed-overlay(theme-color.$on-surface),
2484
shadow.$z1;
2485
background-color: theme-color.$surface-switch-thumb;
2486
}
2487
&:hover > slider {
2489
box-shadow:
2490
0 0 0 10px theme-color.hover-overlay(theme-color.$on-surface),
2491
0 0 0 -10px theme-color.pressed-overlay(theme-color.$on-surface),
2492
shadow.$z1;
2493
}
2494
&:focus > slider {
2496
box-shadow:
2497
0 0 0 10px theme-color.focus-overlay(theme-color.$on-surface),
2498
0 0 0 -10px theme-color.pressed-overlay(theme-color.$on-surface),
2499
shadow.$z1;
2500
}
2501
&:active > slider {
2503
box-shadow:
2504
0 0 0 10px theme-color.hover-overlay(theme-color.$on-surface),
2505
0 0 0 10px theme-color.pressed-overlay(theme-color.$on-surface),
2506
shadow.$z1;
2507
}
2508
&:checked > slider {
2510
background-color: theme-color.$primary;
2511
}
2512
&:checked:hover > slider {
2514
box-shadow:
2515
0 0 0 10px theme-color.hover-overlay(theme-color.$primary),
2516
0 0 0 -10px theme-color.pressed-overlay(theme-color.$primary),
2517
shadow.$z1;
2518
}
2519
&:checked:focus > slider {
2521
box-shadow:
2522
0 0 0 10px theme-color.focus-overlay(theme-color.$primary),
2523
0 0 0 -10px theme-color.pressed-overlay(theme-color.$primary),
2524
shadow.$z1;
2525
}
2526
&:checked:active > slider {
2528
box-shadow:
2529
0 0 0 10px theme-color.hover-overlay(theme-color.$primary),
2530
0 0 0 10px theme-color.pressed-overlay(theme-color.$primary),
2531
shadow.$z1;
2532
}
2533
row:selected & {
2535
}
2536
}
2537
/**
2539
* Check and Radio items
2540
*/
2541
// draw regular check and radio items using our PNG assets
2543
// all assets are rendered from assets.svg. never add pngs directly
2544
// selection-mode
2546
.view.content-view.check:not(list),
2547
.content-view:not(list) .tile check {
2548
min-height: 40px;
2549
min-width: 40px;
2550
margin: 0;
2551
padding: 0;
2552
background-color: transparent;
2553
background-image: none;
2554
-gtk-icon-shadow: shadow.$icon-shadow-z2;
2555
&:hover,
2557
&:active {
2558
-gtk-icon-shadow: shadow.$icon-shadow-z4;
2559
}
2560
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2562
&#{$class} {
2563
$_url: 'assets/selectionmode-checkbox#{$suffix}#{theme.$asset-suffix}';
2564
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2566
}
2567
}
2568
}
2569
checkbutton,
2571
radiobutton {
2572
border-spacing: 4px;
2573
&.text-button {
2575
padding: 4px;
2576
}
2577
}
2578
$check-radio-size: 40px;
2580
check,
2582
radio {
2583
min-height: 24px;
2584
min-width: 24px;
2585
margin: -($check-radio-size - 24px) / 2;
2586
padding: ($check-radio-size - 24px) / 2;
2587
border-radius: theme.$circular-radius;
2588
color: theme-color.hint(theme-color.$on-surface);
2589
@extend %ripple;
2590
@include drawing.ink-color(theme-color.$on-surface);
2591
&:checked,
2593
&:indeterminate {
2594
color: theme-color.$primary;
2595
@include drawing.ink-color(theme-color.$primary);
2596
}
2597
&:disabled {
2599
color: theme-color.disabled-hint(theme-color.$on-surface);
2600
}
2601
}
2602
%check,
2604
check {
2605
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-unchecked-symbolic.svg"));
2606
&:checked {
2608
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-checked-symbolic.svg"));
2609
}
2610
&:indeterminate {
2612
-gtk-icon-source: -gtk-recolor(url("icons/checkbox-mixed-symbolic.svg"));
2613
}
2614
}
2615
%radio,
2617
radio {
2618
-gtk-icon-source: -gtk-recolor(url("icons/radio-unchecked-symbolic.svg"));
2619
&:checked {
2621
// -gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2622
}
2623
&:indeterminate {
2625
-gtk-icon-source: -gtk-recolor(url("icons/radio-mixed-symbolic.svg"));
2626
}
2627
border-image-slice: $check-radio-size / 2px;
2629
border-image-width: $check-radio-size / 2;
2630
$radio-indicator-size: 10px / $check-radio-size / 2;
2632
border-image-source: radial-gradient(circle, theme-color.$primary 0%, transparent 0%);
2634
&:checked:not(:indeterminate) {
2636
border-image-source: radial-gradient(circle, theme-color.$primary 4.5px, transparent 5px);
2637
&:disabled {
2639
border-image-source: radial-gradient(circle, theme-color.disabled-hint(theme-color.$on-surface) 4.5px, transparent 5px);
2640
}
2641
}
2642
}
2643
%small_check,
2645
popover.menu modelbutton check {
2646
min-height: 16px;
2647
min-width: 16px;
2648
border-radius: theme.$corner-radius;
2649
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-unchecked-symbolic.svg"));
2650
&:checked {
2652
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-checked-symbolic.svg"));
2653
}
2654
&:indeterminate {
2656
-gtk-icon-source: -gtk-recolor(url("icons/small-checkbox-mixed-symbolic.svg"));
2657
}
2658
}
2659
%small_radio,
2661
popover.menu modelbutton radio {
2662
min-height: 16px;
2663
min-width: 16px;
2664
border-image: none;
2665
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-unchecked-symbolic.svg"));
2666
&:checked {
2668
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-checked-symbolic.svg"));
2669
}
2670
&:indeterminate {
2672
-gtk-icon-source: -gtk-recolor(url("icons/small-radio-mixed-symbolic.svg"));
2673
}
2674
}
2675
// ANIMATION:
2677
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2678
// the transformation is set on the active state and it get reset on the checked state.
2679
radio:not(:checked):active {
2680
// -gtk-icon-transform: scale(0);
2681
}
2682
// Otherwise, treeview.view styling will be applied...
2684
treeview.view check,
2685
treeview.view radio {
2686
padding: 0;
2687
color: theme-color.hint(theme-color.$on-surface);
2688
&:checked,
2690
&:indeterminate {
2691
color: theme-color.$primary;
2692
}
2693
&:disabled {
2695
color: theme-color.disabled-hint(theme-color.$on-surface);
2696
}
2697
&,
2699
&:hover,
2700
&:selected,
2701
&:selected:hover {
2702
background-color: transparent;
2703
}
2704
}
2705
treeview.view radio:checked {
2707
-gtk-icon-source: -gtk-recolor(url("icons/radio-checked-symbolic.svg"));
2708
border-image: none;
2709
}
2710
/**
2712
* GtkScale
2713
*/
2714
scale {
2716
// sizing
2717
$_marks_length: 8px;
2718
$_marks_distance: 7px;
2719
$trough_size: 2px;
2721
$finetune_trough_size: 4px;
2722
$slider_size: 32px;
2724
$slider_margin: -($slider_size - $trough_size) / 2;
2726
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2727
$color_slider_margin: -($slider_size) * 3 / 4;
2729
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2730
min-height: $trough_size;
2732
min-width: $trough_size;
2733
&.horizontal {
2735
padding: (theme.$medium-size - $trough_size) / 2 12px;
2736
}
2737
&.vertical {
2739
padding: 12px (theme.$medium-size - $trough_size) / 2;
2740
}
2741
// click-and-hold the slider to activate
2743
&.fine-tune {
2744
&.horizontal {
2745
min-height: $finetune_trough_size;
2746
padding-top: (theme.$medium-size - $finetune_trough_size) / 2;
2747
padding-bottom: (theme.$medium-size - $finetune_trough_size) / 2;
2748
}
2749
&.vertical {
2751
min-width: $finetune_trough_size;
2752
padding-left: (theme.$medium-size - $finetune_trough_size) / 2;
2753
padding-right: (theme.$medium-size - $finetune_trough_size) / 2;
2754
}
2755
// to make the trough grow in fine-tune mode
2757
> trough > slider {
2758
margin: $finetune_slider_margin;
2759
}
2760
}
2761
// the backing bit
2763
> trough {
2764
transition: background-color theme.$state-duration theme.$ease-out;
2765
background-color: theme-color.stroke(theme-color.$on-surface);
2766
&:disabled {
2768
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
2769
}
2770
// the colored part of the backing bit
2772
> highlight {
2773
transition: background-image theme.$state-duration theme.$ease-out;
2774
background-image: image(theme-color.$primary);
2775
&:disabled {
2777
background-color: theme-color.$surface-z0;
2778
background-image: image(theme-color.disabled-hint(theme-color.$on-surface));
2779
}
2780
}
2781
// this is another differently styled part of the backing bit, the most relevant use case is for example
2783
// in media player to indicate how much video stream as been cached
2784
> fill {
2785
transition: background-color theme.$state-duration theme.$ease-out;
2786
background-color: theme-color.stroke(theme-color.$on-surface);
2787
&:disabled {
2789
background-color: transparent;
2790
}
2791
}
2792
> slider {
2794
transition: background-color theme.$state-duration theme.$ease-out,
2795
background-size theme.$ripple-fade-out-duration theme.$ease-out,
2796
background-image theme.$ripple-opacity-fade-out-duration theme.$ease-out;
2797
min-width: $slider_size;
2798
min-height: $slider_size;
2799
// the slider is inside the trough, so to have make it bigger there's a negative margin
2800
margin: $slider_margin;
2801
border-radius: 50%;
2802
background-repeat: no-repeat;
2803
background-position: center;
2804
background-size: auto, 1000% 1000%;
2805
color: theme-color.$primary;
2806
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2808
&#{$class} {
2809
$_url: 'assets/scale-slider#{$suffix}#{theme.$asset-suffix}';
2810
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2812
radial-gradient(circle, transparent 10%, transparent 10%);
2813
}
2814
}
2815
&:hover {
2817
background-color: theme-color.hover-overlay(theme-color.$primary);
2818
}
2819
&:focus {
2821
background-color: theme-color.focus-overlay(theme-color.$primary);
2822
}
2823
&:active {
2825
$_url: 'assets/scale-slider#{theme.$asset-suffix}';
2826
transition: background-color theme.$state-duration theme.$ease-out,
2828
background-size 0ms,
2829
background-image 0ms;
2830
animation: ripple-on-slider theme.$ripple-duration theme.$ease-out forwards;
2831
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2832
radial-gradient(circle, theme-color.pressed-overlay(theme-color.$primary) 10%, transparent 10%);
2833
background-size: auto, 0% 0%;
2834
}
2835
}
2836
}
2837
> marks,
2839
> value {
2840
color: theme-color.hint(theme-color.$on-surface);
2841
}
2842
> value {
2844
font-feature-settings: "tnum";
2845
}
2846
indicator {
2848
background-color: theme-color.stroke(theme-color.$on-surface);
2849
}
2850
//marks margins
2852
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2853
(horizontal, bottom, bottom, top),
2854
(vertical, top, left, right),
2855
(vertical, bottom, right, left) {
2856
&.#{$scale_orient} > marks {
2857
&.#{$marks_class} {
2858
margin-#{$marks_margin}: $_marks_distance;
2859
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2860
}
2861
}
2862
&.#{$scale_orient}.fine-tune > marks {
2864
&.#{$marks_class} {
2865
margin-#{$marks_margin}: $_marks_distance - 1px;
2866
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2867
}
2868
}
2869
}
2870
&.horizontal {
2872
indicator {
2873
min-height: $_marks_length;
2874
min-width: 1px;
2875
}
2876
}
2877
&.vertical {
2879
indicator {
2880
min-height: 1px;
2881
min-width: $_marks_length;
2882
}
2883
}
2884
// *WARNING* scale with marks madness following
2886
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2888
@each $marks_class, $marks_infix in (
2889
".marks-before:not(.marks-after)": "-marks-before",
2890
".marks-after:not(.marks-before)": "-marks-after"
2891
) {
2892
&#{$dir_class}#{$marks_class} > trough > slider {
2893
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2894
&#{$state_class} {
2895
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{theme.$asset-suffix}';
2896
background-image:
2898
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2899
radial-gradient(circle, transparent 10%, transparent 10%);
2900
}
2901
}
2902
&:active {
2904
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{theme.$asset-suffix}';
2905
background-image:
2907
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2908
radial-gradient(circle, theme-color.pressed-overlay(theme-color.$primary) 10%, transparent 10%);
2909
}
2910
}
2911
}
2912
}
2913
&.color {
2915
min-height: 0;
2916
min-width: 0;
2917
&.horizontal {
2919
// specificity bump
2920
&:dir(ltr),
2921
&:dir(rtl) {
2922
padding: 0 0 12px 0;
2923
slider {
2925
margin-bottom: $color_slider_margin;
2926
margin-top: $color_marks_slider_margin;
2927
}
2928
}
2929
}
2930
&.vertical {
2932
&:dir(ltr) {
2933
padding: 0 0 0 12px;
2934
slider {
2936
margin-left: $color_slider_margin;
2937
margin-right: $color_marks_slider_margin;
2938
}
2939
}
2940
&:dir(rtl) {
2942
padding: 0 12px 0 0;
2943
slider {
2945
margin-right: $color_slider_margin;
2946
margin-left: $color_marks_slider_margin;
2947
}
2948
}
2949
}
2950
}
2951
}
2952
/**
2954
* Progress bars
2955
*/
2956
progressbar {
2958
// FIXME: insensitive state missing and some other state should be set probably
2959
color: theme-color.hint(theme-color.$on-surface);
2960
font-size: smaller;
2961
font-feature-settings: "tnum";
2962
> trough {
2964
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
2965
> progress {
2967
background-color: theme-color.$primary;
2968
}
2969
}
2970
// sizing
2972
&.horizontal > trough {
2973
min-width: 150px;
2974
&,
2976
> progress {
2977
min-height: 4px;
2978
}
2979
}
2980
&.vertical > trough {
2982
min-height: 80px;
2983
&,
2985
> progress {
2986
min-width: 4px;
2987
}
2988
}
2989
// progressbar.osd used for epiphany page loading progress
2991
&.osd {
2992
// min-width: 4px;
2993
// min-height: 4px;
2994
// background-color: transparent;
2995
> trough {
2997
// background-color: transparent;
2998
> progress {
3000
// background-color: $primary;
3001
}
3002
}
3003
}
3004
// makes the progress indicator disappear, when the fraction is 0
3006
> trough.empty > progress {
3007
all: unset;
3008
}
3009
}
3010
/**
3012
* Level Bar
3013
*/
3014
levelbar {
3016
&.horizontal {
3017
> trough > block {
3018
min-height: 4px;
3019
}
3020
&.discrete > trough > block {
3022
min-width: theme.$medium-size;
3023
&:not(:last-child) {
3025
margin-right: 2px;
3026
}
3027
}
3028
}
3029
&.vertical {
3031
> trough > block {
3032
min-width: 4px;
3033
}
3034
&.discrete > trough > block {
3036
min-height: theme.$medium-size;
3037
&:not(:last-child) {
3039
margin-bottom: 2px;
3040
}
3041
}
3042
}
3043
> trough {
3045
}
3046
> trough > block {
3048
&.low {
3049
background-color: theme-color.$warning;
3050
}
3051
&.high,
3053
&:not(.empty) {
3054
background-color: theme-color.$primary;
3055
}
3056
&.full {
3058
background-color: theme-color.$success;
3059
}
3060
&.empty {
3062
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
3063
}
3064
}
3065
}
3066
/**
3068
* Print dialog
3069
*/
3070
window.dialog.print {
3072
paper {
3073
// padding: 0;
3074
// border: 1px solid divider($on-surface);
3075
border-radius: theme.$corner-radius;
3076
box-shadow: shadow.$z1;
3077
background-color: theme-color.$surface-z1;
3078
color: theme-color.$on-surface;
3079
}
3080
.dialog-action-box {
3082
margin: 12px;
3083
}
3084
}
3085
/**
3087
* Frames
3088
*/
3089
frame,
3091
.frame {
3092
// border: 1px solid divider($on-surface);
3093
border-radius: theme.$corner-radius;
3094
box-shadow: shadow.$z1;
3095
background-color: theme-color.$surface-z1;
3096
color: theme-color.$on-surface;
3097
button {
3099
@extend %button-outlined;
3100
}
3101
}
3102
frame > label {
3104
margin: 4px;
3105
}
3106
statusbar {
3108
padding: 6px 10px;
3109
// border-top: 1px solid divider($on-surface);
3110
}
3111
actionbar > revealer > box {
3113
padding: theme.$container-padding;
3114
border-spacing: theme.$container-padding;
3115
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
3116
// background-clip: border-box;
3117
button:not(.suggested-action):not(.destructive-action) {
3119
@extend %button-flat;
3120
}
3121
.linked:not(.vertical) > entry:not(:only-child) {
3123
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
3124
}
3125
}
3126
scrolledwindow {
3128
// This is used when content is touch-dragged past boundaries.
3129
// draws a box on top of the content, the size changes programmatically.
3130
@at-root overshoot {
3131
&.top { @include drawing.overshoot(top); }
3132
&.bottom { @include drawing.overshoot(bottom); }
3134
&.left { @include drawing.overshoot(left); }
3136
&.right { @include drawing.overshoot(right); }
3138
}
3139
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3141
@at-root undershoot {
3142
// &.top { @include undershoot(top); }
3143
// &.bottom { @include undershoot(bottom); }
3145
// &.left { @include undershoot(left); }
3147
// &.right { @include undershoot(right); }
3149
}
3150
// the small square between two scrollbars
3152
@at-root junction {
3153
border-style: solid none none solid;
3154
border-width: 1px;
3155
border-color: theme-color.divider(theme-color.$on-surface);
3156
// background-color: $surface-z1;
3157
&:dir(rtl) {
3159
border-style: solid solid none none;
3160
}
3161
}
3162
}
3163
// vbox and hbox separators
3165
separator {
3166
min-width: 1px;
3167
min-height: 1px;
3168
background-color: theme-color.divider(theme-color.$on-surface);
3169
}
3170
%hide_separators {
3172
min-width: 0;
3173
min-height: 0;
3174
background-color: transparent;
3175
}
3176
/**
3178
* Lists
3179
*/
3180
listview,
3182
list {
3183
// background-color: $surface-z1;
3184
// color: $on-surface;
3185
> row {
3187
padding: 2px;
3188
&.expander {
3190
padding: 0;
3191
.row-header {
3193
padding: 2px;
3194
}
3195
}
3196
}
3197
&.separators:not(.horizontal) > row:not(:first-child) {
3199
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
3200
}
3201
&.separators.horizontal > row:not(:first-child) {
3203
border-left: 1px solid theme-color.divider(theme-color.$on-surface);
3204
}
3205
}
3206
row {
3208
background-clip: padding-box;
3209
&.activatable {
3211
@extend %ripple;
3212
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
3213
@include drawing.list-item;
3214
// this is for indicathing which row generated a popover
3216
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3217
&.has-open-popup {
3218
background-color: theme-color.activated-overlay(theme-color.$on-surface);
3219
}
3220
}
3221
&:selected {
3223
background-color: theme-color.$selected-overlay;
3224
@include drawing.ink-color(theme-color.$primary, $hover-alt: true, $on: theme-color.$selected-overlay);
3226
&.has-open-popup {
3228
background-color: theme-color.activated-overlay(theme-color.$primary, $on: theme-color.$selected-overlay);
3229
}
3230
}
3231
}
3232
listview {
3234
> row {
3235
@extend %ripple;
3236
@include drawing.ink-color(theme-color.$on-surface, $hover-alt: true);
3237
@include drawing.list-item;
3238
}
3239
&:selected {
3241
background-color: theme-color.$selected-overlay;
3242
@include drawing.ink-color(theme-color.$primary, $hover-alt: true, $on: theme-color.$selected-overlay);
3244
}
3245
}
3246
columnview {
3248
// move padding to child cells
3249
> listview > row {
3250
padding: 0;
3251
// align horizontal sizing with header buttons
3253
> cell {
3254
min-height: 24px;
3255
padding: 4px 6px;
3256
&:not(:last-child) {
3258
border-right: 1px solid transparent;
3259
}
3260
}
3261
}
3262
// make column separators visible when :show-column-separators is true
3264
&.column-separators > listview > row > cell {
3265
border-right-color: theme-color.divider(theme-color.$on-surface);
3266
}
3267
// shrink vertically for .data-table
3269
&.data-table > listview > row > cell {
3270
padding-top: 2px;
3271
padding-bottom: 2px;
3272
}
3273
}
3274
// rich lists usually containing other widgets than just labels/text
3276
.rich-list {
3277
> row {
3278
padding: 12px;
3279
min-height: theme.$medium-size;
3280
> box {
3282
border-spacing: 12px;
3283
}
3284
}
3285
}
3286
/**
3288
* App Notifications
3289
*/
3290
.app-notification {
3292
@extend %toolbar-osd;
3293
margin: 8px;
3294
border-style: none;
3295
button {
3297
@extend %button-flat;
3298
&.text-button:not(:disabled) {
3300
color: theme-color.$primary;
3301
@include drawing.ink-color(theme-color.$primary);
3302
}
3303
}
3304
}
3305
/**
3307
* Expanders
3308
*/
3309
expander {
3311
transition: all theme.$state-duration theme.$ease-out;
3312
min-width: 16px;
3313
min-height: 16px;
3314
padding: 4px;
3315
border-radius: theme.$circular-radius;
3316
color: theme-color.hint(theme-color.$on-surface);
3317
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3318
@extend %ripple;
3320
@include drawing.ink-color(theme-color.$on-surface);
3321
&:disabled {
3323
color: theme-color.disabled-hint(theme-color.$on-surface);
3324
}
3325
&:checked {
3327
&:dir(ltr) {
3328
-gtk-icon-transform: rotate(-180deg);
3329
}
3330
&:dir(rtl) {
3332
-gtk-icon-transform: rotate(180deg);
3333
}
3334
}
3335
}
3336
indent {
3338
min-width: 16px;
3339
min-height: 16px;
3340
padding: 4px;
3341
}
3342
expander-widget {
3344
&:focus > box > title > expander {
3345
box-shadow: inset 0 0 0 9999px theme-color.focus-overlay(theme-color.$on-surface);
3346
}
3347
> box > title:drop(active) > expander,
3349
> box > title:hover > expander {
3350
box-shadow: inset 0 0 0 9999px theme-color.hover-overlay(theme-color.$on-surface);
3351
}
3352
> box > title:active > expander {
3354
transition-duration: drawing.$ripple-active-transition-duration;
3355
animation: ripple theme.$ripple-duration theme.$ease-out forwards;
3356
background-size: 0% 0%;
3357
background-image: radial-gradient(circle, theme-color.pressed-overlay(theme-color.$on-surface) 10%, transparent 10%);
3358
}
3359
}
3360
/**
3362
* Calendar
3363
*/
3364
calendar {
3366
// border: 1px solid divider($on-surface);
3367
border-radius: theme.$corner-radius;
3368
box-shadow: shadow.$z1;
3369
background-color: theme-color.$surface-z1;
3370
color: theme-color.$on-surface;
3371
&:disabled {
3373
color: theme-color.disabled(theme-color.$on-surface);
3374
}
3375
> header {
3377
padding: 4px;
3378
border-spacing: 4px;
3379
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
3380
> button.image-button {
3382
padding: 0;
3383
min-width: 28px;
3384
min-height: 28px;
3385
border-radius: theme.$circular-radius;
3386
background-color: transparent;
3387
color: theme-color.hint(theme-color.$on-surface);
3388
@include drawing.ink-color(theme-color.$on-surface, $button-style: "flat");
3389
&:disabled {
3391
color: theme-color.disabled-hint(theme-color.$on-surface);
3392
}
3393
}
3394
}
3395
> grid {
3397
padding: 4px;
3398
border-spacing: 4px;
3399
> label {
3401
// padding: 4px;
3402
padding: 0;
3403
min-width: 28px;
3404
min-height: 28px;
3405
border-radius: theme.$circular-radius;
3406
}
3407
> label.day-name,
3409
> label.week-number {
3410
color: theme-color.hint(theme-color.$on-surface);
3411
font-weight: 500;
3412
}
3413
> label.day-number {
3415
@extend %ripple;
3416
@include drawing.ink-color(theme-color.$on-surface);
3417
&.today {
3419
box-shadow: inset 0 0 0 1px theme-color.hint(theme-color.$on-surface);
3420
}
3421
&.other-month {
3423
color: theme-color.disabled-hint(theme-color.$on-surface);
3424
}
3425
&:selected {
3427
background-color: theme-color.$selected-overlay;
3428
box-shadow: inset 0 0 0 1px transparent;
3429
@include drawing.ink-color(theme-color.$primary, $on: theme-color.$selected-overlay);
3430
}
3431
}
3432
}
3433
}
3434
/**
3436
* Dialogs
3437
*/
3438
window.dialog.message { // Message Dialog styling
3440
&.csd.background {
3441
min-width: 280px;
3442
border-radius: theme.$corner-radius; // rounded bottom border styling for csd version
3443
background-color: theme-color.$surface-z8;
3444
}
3445
> .titlebar {
3447
min-height: 24px;
3448
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
3449
background-color: transparent;
3450
color: theme-color.$on-surface;
3451
&:backdrop {
3453
background-color: transparent;
3454
color: theme-color.hint(theme-color.$on-surface);
3455
}
3456
}
3457
> box.dialog-vbox.vertical {
3459
border-spacing: 20px;
3460
> box.vertical > box.horizontal {
3462
margin: 0 24px - 30px;
3463
}
3464
}
3465
label.title {
3467
font-weight: 500;
3468
font-size: pt(20px);
3469
letter-spacing: pt(.15px);
3470
}
3471
// Hint text
3473
label.title + label {
3474
color: theme-color.hint(theme-color.$on-surface);
3475
}
3476
list,
3478
.view {
3479
background-color: transparent;
3480
}
3481
.dialog-action-area > button {
3483
@extend %button-flat;
3484
&:not(:disabled) {
3486
color: theme-color.$primary;
3487
@include drawing.ink-color(theme-color.$primary);
3488
}
3489
&.suggested-action:not(:disabled) {
3491
background-color: transparent;
3492
// color: $primary;
3493
// @include ink-color($primary);
3494
}
3495
&.destructive-action:not(:disabled) {
3497
background-color: transparent;
3498
color: theme-color.$error;
3499
@include drawing.ink-color(theme-color.$error);
3500
}
3501
}
3502
}
3503
.dialog-action-area {
3505
// margin-top: -$container-padding;
3506
padding: theme.$container-padding;
3507
border-spacing: theme.$container-padding;
3508
}
3509
filechooser {
3511
.dialog-action-box {
3512
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
3513
}
3514
#pathbarbox {
3516
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
3517
// background-color: $surface-z0;
3518
> stack > box > button { // The new folder button
3520
@extend %button-flat;
3521
border-radius: theme.$circular-radius;
3523
}
3524
}
3525
}
3526
filechooserbutton > button > box {
3528
border-spacing: 6px;
3529
}
3530
filechooserbutton:drop(active) {
3532
// box-shadow: none;
3533
}
3534
/**
3536
* Sidebar
3537
*/
3538
.sidebar {
3540
border-style: none;
3541
&:not(separator) {
3543
@at-root %sidebar_left,
3544
&:dir(ltr),
3545
&.left,
3546
&.left:dir(rtl) {
3547
border-right: 1px solid theme-color.divider(theme-color.$on-surface);
3548
border-left-style: none;
3549
}
3550
@at-root %sidebar_right,
3552
&:dir(rtl),
3553
&.right {
3554
border-left: 1px solid theme-color.divider(theme-color.$on-surface);
3555
border-right-style: none;
3556
}
3557
}
3558
list {
3560
// background-color: transparent;
3561
}
3562
paned & {
3564
&:dir(rtl):not(:dir(ltr)),
3565
&:dir(ltr):not(:dir(rtl)) {
3566
border-style: none;
3567
}
3568
}
3569
}
3570
stacksidebar.sidebar {
3572
list {
3573
padding: 4px;
3574
}
3575
list.separators:not(.horizontal) > row:not(:first-child) {
3577
border-top-style: none;
3578
}
3579
row {
3581
min-height: 32px;
3582
padding: 0 8px - 6px;
3583
border-radius: theme.$corner-radius;
3584
color: theme-color.hint(theme-color.$on-surface);
3585
font-weight: 500;
3586
&:selected {
3588
background-color: theme-color.activated-overlay(theme-color.$primary);
3589
color: theme-color.$primary;
3590
@include drawing.ink-color(theme-color.$primary, $on: theme-color.activated-overlay(theme-color.$primary));
3591
}
3592
+ row {
3594
margin-top: 4px;
3595
}
3596
> label {
3598
padding-left: 6px;
3599
padding-right: 6px;
3600
}
3601
&.needs-attention > label {
3603
@extend %needs-attention;
3604
}
3605
}
3606
}
3607
separator.sidebar {
3609
&.selection-mode,
3610
.selection-mode & {
3611
// background-color: divider($on-surface);
3612
}
3613
}
3614
/**
3616
* File chooser
3617
*/
3618
// dim the sidebar icons, see bug #786613 for details on this oddity
3620
row image.sidebar-icon {
3621
transition: color theme.$state-duration theme.$ease-out;
3622
color: theme-color.hint(theme-color.$on-surface);
3623
&:disabled {
3625
color: theme-color.disabled-hint(theme-color.$on-surface);
3626
}
3627
}
3628
placessidebar.sidebar {
3630
list {
3631
padding: 4px 0;
3632
> separator {
3634
margin: 4px 0;
3635
}
3636
}
3637
row {
3639
// Needs overriding of the GtkListBoxRow padding
3640
min-height: 32px;
3641
margin: 0 4px; // Remove unwanted hard-coded vertical margins with -1px
3642
padding: 0;
3643
border-radius: theme.$corner-radius;
3644
color: theme-color.hint(theme-color.$on-surface);
3645
font-weight: 500;
3646
// Using margins/padding directly in the SidebarRow
3648
// will make the animation of the new bookmark row jump
3649
> revealer {
3650
padding: 0 8px;
3651
}
3652
&:selected {
3654
background-color: theme-color.activated-overlay(theme-color.$primary);
3655
color: theme-color.$primary;
3656
@include drawing.ink-color(theme-color.$primary, $on: theme-color.activated-overlay(theme-color.$primary));
3657
image.sidebar-icon {
3659
color: theme-color.$primary;
3660
}
3661
}
3662
&:disabled {
3664
color: theme-color.disabled(theme-color.$on-surface);
3665
}
3666
image.sidebar-icon {
3668
&:dir(ltr) {
3669
padding-right: 8px;
3670
}
3671
&:dir(rtl) {
3673
padding-left: 8px;
3674
}
3675
}
3676
label.sidebar-label {
3678
&:dir(ltr) {
3679
padding-right: 2px;
3680
}
3681
&:dir(rtl) {
3683
padding-left: 2px;
3684
}
3685
}
3686
@at-root button.sidebar-button {
3688
@extend %button-flat-basic;
3689
@extend %button-small;
3690
}
3691
&.sidebar-placeholder-row {
3693
background-color: theme-color.hover-overlay(theme-color.$on-surface);
3694
}
3695
&.sidebar-new-bookmark-row {
3697
color: theme-color.$primary;
3698
image.sidebar-icon {
3700
color: theme-color.$primary;
3701
}
3702
}
3703
}
3704
}
3705
placesview {
3707
.server-list-button {
3708
> image {
3709
-gtk-icon-transform: rotate(0turn);
3710
}
3711
&:checked > image {
3713
-gtk-icon-transform: rotate(-0.5turn);
3714
}
3715
}
3716
> actionbar > revealer > box > box {
3718
border-spacing: theme.$container-padding;
3719
}
3720
// this selects the "connect to server" label
3722
> actionbar > revealer > box > box > label {
3723
padding-left: 8px;
3724
padding-right: 8px;
3725
}
3726
}
3727
/**
3729
* Paned
3730
*/
3731
paned {
3733
> separator {
3734
background-clip: content-box;
3735
// -gtk-icon-source: none; // defeats the ugly default handle decoration
3736
&.wide {
3738
min-width: 4px;
3739
min-height: 4px;
3740
border: 1px solid theme-color.divider(theme-color.$on-surface);
3741
background-color: transparent;
3742
}
3743
}
3744
&.horizontal > separator {
3746
&:not(.wide) {
3747
margin: 0 -4px;
3748
padding: 0 4px;
3749
}
3750
&.wide {
3752
border-style: none solid;
3753
}
3754
}
3755
&.vertical > separator {
3757
&:not(.wide) {
3758
margin: -4px 0;
3759
padding: 4px 0;
3760
}
3761
&.wide {
3763
border-style: solid none;
3764
}
3765
}
3766
}
3767
/**
3769
* GtkVideo
3770
*/
3771
video {
3773
background-color: black;
3774
image.osd {
3776
min-width: 64px;
3777
min-height: 64px;
3778
border-radius: 32px;
3779
background-color: theme-color.$scrim;
3780
color: theme-color.$on-scrim;
3781
}
3782
controls.osd {
3784
padding: 4px;
3785
background-image:
3786
linear-gradient(
3787
to bottom,
3788
transparent,
3789
rgba(black, .1) 30%,
3790
rgba(black, .2) 50%,
3791
rgba(black, .4)
3792
);
3793
color: theme-color.on(black);
3794
button {
3796
background-color: transparent;
3797
color: theme-color.hint(theme-color.on(black));
3798
@include drawing.ink-color(theme-color.on(black));
3799
}
3800
}
3801
}
3802
/**
3804
* GtkInfoBar
3805
*/
3806
infobar {
3808
> revealer > box {
3809
padding: 8px;
3810
border-spacing: 12px;
3811
}
3812
&.action:hover > revealer > box {
3814
background-image: image(theme-color.hover-overlay(theme-color.$on-surface));
3815
}
3816
&.info > revealer > box,
3818
&.question > revealer > box {
3819
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
3820
// background-color: $surface-z1;
3821
button {
3823
@extend %button-flat;
3824
&.text-button:not(:disabled) {
3826
color: theme-color.$primary;
3827
@include drawing.ink-color(theme-color.$primary);
3828
}
3829
}
3830
}
3831
&.warning > revealer > box {
3833
background-color: theme-color.$warning;
3834
color: theme-color.$on-warning;
3835
button.flat {
3837
color: theme-color.$on-warning;
3838
@include drawing.ink-color(theme-color.$on-warning);
3839
}
3840
selection {
3842
}
3843
link {
3845
color: theme-color.$on-warning;
3846
}
3847
}
3848
&.error > revealer > box {
3850
background-color: theme-color.$error;
3851
color: theme-color.$on-error;
3852
button.flat {
3854
color: theme-color.$on-error;
3855
@include drawing.ink-color(theme-color.$on-error);
3856
}
3857
selection {
3859
}
3860
link {
3862
color: theme-color.$on-error;
3863
}
3864
}
3865
// Remove ugly hard-coded padding
3867
button label {
3868
// margin: 0 -4px;
3869
}
3870
}
3871
/**
3873
* Tooltips
3874
*/
3875
tooltip {
3877
&.background {
3878
// background-color needs to be set this way otherwise it gets drawn twice
3879
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3880
background-color: theme-color.$tooltip;
3881
color: theme-color.$on-tooltip;
3882
}
3883
min-height: 32px - 4px * 2;
3885
padding: 4px 8px;
3886
border-radius: theme.$corner-radius;
3887
&:not(.csd) {
3889
background-color: theme-color.$tooltip;
3890
}
3891
> box {
3893
border-spacing: 6px;
3894
}
3895
.dim-label {
3897
color: theme-color.hint(theme-color.$on-tooltip);
3898
}
3899
}
3900
/**
3902
* Color Chooser
3903
*/
3904
colorswatch {
3906
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3907
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3908
// applied to the overlay box.
3909
// base color corners rounding
3911
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3912
// sports a bigger radius.
3913
// nth-child is needed by the custom color strip.
3914
transition: theme.$transition-shadow;
3916
box-shadow: shadow.$z1;
3917
&:drop(active),
3919
&.activatable:hover {
3920
box-shadow: shadow.$z3;
3921
}
3922
&:disabled {
3924
opacity: .5;
3925
// box-shadow: none;
3926
}
3927
&.top {
3929
border-top-left-radius: theme.$corner-radius;
3930
border-top-right-radius: theme.$corner-radius;
3931
}
3932
&.bottom {
3934
border-bottom-left-radius: theme.$corner-radius;
3935
border-bottom-right-radius: theme.$corner-radius;
3936
}
3937
&.left,
3939
&:first-child:not(.top) {
3940
border-top-left-radius: theme.$corner-radius;
3941
border-bottom-left-radius: theme.$corner-radius;
3942
}
3943
&.right,
3945
&:last-child:not(.bottom) {
3946
border-top-right-radius: theme.$corner-radius;
3947
border-bottom-right-radius: theme.$corner-radius;
3948
}
3949
&.dark {
3951
color: theme-color.$on-dark;
3952
}
3953
&.light {
3955
color: theme-color.$on-light;
3956
}
3957
&#add-color-button {
3959
// border-radius: $corner-radius 0 0 $corner-radius;
3960
background-color: theme-color.$surface-z8;
3961
color: theme-color.$on-surface;
3962
&:only-child {
3964
// border-radius: $corner-radius;
3965
}
3966
}
3967
row:selected & {
3969
}
3970
&#editor-color-sample {
3972
border-radius: theme.$corner-radius;
3973
}
3974
}
3975
// colorscale popup
3977
colorchooser .popover.osd {
3978
transition: theme.$transition-shadow;
3979
border-radius: theme.$corner-radius;
3980
box-shadow: shadow.$z4, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
3981
background-color: theme-color.$surface-z8;
3982
&:backdrop {
3984
box-shadow: shadow.$z2, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
3985
}
3986
}
3987
/**
3989
* Misc
3990
*/
3991
// content view (grid/list)
3993
.content-view {
3994
// background-color: $surface-z0;
3995
&:hover {
3997
// -gtk-icon-filter: brightness(1.2);
3998
}
3999
}
4000
.scale-popup {
4002
.osd & {
4003
// @extend %osd;
4004
button.flat {
4006
}
4007
}
4008
// +/- buttons on GtkVolumeButton popup
4010
button {
4011
}
4012
}
4013
/**
4015
* Window Decorations
4016
*/
4017
window {
4019
&.csd {
4020
transition: theme.$transition-shadow;
4021
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
4022
border-radius: theme.$corner-radius;
4023
box-shadow: shadow.$z16, 0 16px 24px 2px transparent, 0 6px 30px 5px transparent;
4024
&:backdrop {
4026
// the transparent shadow here is to enforce that the shadow extents don't
4027
// change when we go to backdrop, to prevent jumping windows.
4028
// The biggest shadow should be in the same order then in the active state
4029
// or the jumping will happen during the transition.
4030
box-shadow: shadow.$z4, 0 16px 24px 2px transparent, 0 6px 30px 5px transparent;
4031
}
4032
}
4033
// server-side decorations as used by mutter
4035
&.ssd {
4036
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); // just doing borders, wm draws actual shadows
4037
}
4038
&.solid-csd {
4040
margin: 0;
4041
padding: 2px;
4042
border-radius: 0;
4043
box-shadow: none;
4044
box-shadow: inset 0 1px theme-color.highlight(theme-color.$titlebar);
4045
background-color: theme-color.$titlebar;
4046
&:backdrop {
4048
background-color: theme-color.$titlebar-backdrop;
4049
}
4050
}
4051
&.maximized,
4053
&.fullscreen,
4054
&.tiled,
4055
&.tiled-top,
4056
&.tiled-left,
4057
&.tiled-right,
4058
&.tiled-bottom {
4059
border-radius: 0;
4060
}
4061
}
4062
// catch all extend :)
4064
%selected_items {
4066
background-color: theme-color.$selected-overlay;
4067
}
4068
.monospace {
4070
font-family: monospace;
4071
}
4072
/**
4074
* Touch Copy & Paste
4075
*/
4076
// touch selection handlebars for the Popover.osd above
4078
cursor-handle {
4079
min-width: 24px;
4080
min-height: 24px;
4081
border-radius: 50%;
4082
background-color: theme-color.$primary;
4083
// -gtk-icon-source: -gtk-recolor(url("icons/cursor-handle-symbolic.svg"));
4084
&.top:dir(ltr),
4086
&.bottom:dir(rtl) {
4087
border-top-right-radius: 0;
4088
// -gtk-icon-transform: rotate(90deg);
4089
}
4090
&.bottom:dir(ltr),
4092
&.top:dir(rtl) {
4093
border-top-left-radius: 0;
4094
// -gtk-icon-transform: unset;
4095
}
4096
&.insertion-cursor:dir(ltr),
4098
&.insertion-cursor:dir(rtl) {
4099
margin-top: 6px;
4100
transform: rotate(45deg);
4101
}
4102
}
4103
shortcuts-section {
4105
margin: 20px;
4106
}
4107
.shortcuts-search-results {
4109
margin: 20px;
4110
border-spacing: 24px;
4111
}
4112
// shortcut window keys
4114
shortcut {
4115
border-spacing: 6px;
4116
}
4117
shortcut > .keycap {
4119
min-width: 28px - 8px * 2;
4120
// min-height: 28px - 2px;
4121
min-height: 28px;
4122
// margin-top: 2px;
4123
// padding-bottom: 2px;
4124
padding-left: 8px;
4125
padding-right: 8px;
4126
// border: solid 1px divider($on-surface);
4128
// border-radius: $corner-radius + 1px;
4129
border-radius: theme.$corner-radius;
4130
// box-shadow: inset 0 -2px divider($on-surface);
4131
box-shadow: shadow.$z1;
4132
background-color: theme-color.$surface-z8;
4133
color: theme-color.$on-surface;
4134
font-size: smaller;
4135
}
4136
// FIXME needs to be done widget by widget, this wildcard should really die
4138
:drop(active) {
4139
// caret-color: $primary;
4140
}
4141
// FIXME aggregate with buttons
4143
stackswitcher > button.text-button {
4144
min-width: 100px;
4145
}
4146
stackswitcher.circular {
4148
border-spacing: 12px;
4149
// FIXME aggregate with buttons
4151
> button.circular {
4152
min-width: theme.$medium-size;
4153
min-height: theme.$medium-size;
4154
padding: 0;
4155
}
4156
}
4157
/**
4159
* App Icons
4160
*/
4161
// Outline for low res icons
4163
.lowres-icon {
4164
// -gtk-icon-shadow: none;
4165
}
4166
// Drapshadow for large icons
4168
.icon-dropshadow {
4169
// -gtk-icon-shadow: none;
4170
}
4171
/**
4173
* Emoji
4174
*/
4175
popover.emoji-picker > contents {
4177
padding: 0;
4178
emoji {
4180
min-width: 3em;
4181
min-height: 3em;
4182
// padding: 8px;
4183
border-radius: theme.$corner-radius;
4184
// font-size: larger;
4185
@extend %ripple;
4187
@include drawing.ink-color(theme-color.$on-surface);
4188
}
4189
}
4190
.emoji-searchbar {
4192
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
4193
> entry.search {
4195
border-image: none;
4196
border-radius: 0;
4197
box-shadow: none;
4198
background-color: transparent;
4199
}
4200
}
4201
.emoji-toolbar {
4203
padding: 4px;
4204
border-spacing: 4px;
4205
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
4206
> button.emoji-section {
4208
&:checked {
4209
background-color: theme-color.activated-overlay(theme-color.$primary);
4210
color: theme-color.$primary;
4211
@include drawing.ink-color(theme-color.$primary, $on: theme-color.activated-overlay(theme-color.$primary));
4212
}
4213
}
4214
}
4215
popover.emoji-completion > contents {
4217
padding: 8px 0;
4218
emoji-completion-row {
4220
min-height: 32px;
4221
padding: 0 8px;
4222
@extend %ripple;
4223
@include drawing.ink-color(theme-color.$on-surface);
4224
> box {
4226
border-spacing: 8px;
4227
}
4228
}
4229
emoji {
4231
// min-width: 3em;
4232
// min-height: 3em;
4233
// padding: 8px;
4234
border-radius: theme.$corner-radius;
4235
@extend %ripple;
4237
@include drawing.ink-color(theme-color.$on-surface);
4238
}
4239
}
4240
popover.entry-completion > contents {
4242
padding: 0;
4243
treeview.view {
4245
min-height: 32px; // FIXME: should be in .cell
4246
padding: 8px 0;
4247
> .cell {
4249
padding: 0 4px; // FIXME: should be `0 8px`
4250
&:selected:hover {
4252
background-color: theme-color.focus-overlay(theme-color.$on-surface);
4253
}
4254
}
4255
}
4256
}
4257