ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: $container-padding / 1px;
21
-GtkDialog-action-area-border: $container-padding / 1px;
22
-gtk-secondary-caret-color: $primary;
24
// We use the outline properties to signal the focus properties
26
// to the adwaita engine: using real CSS properties is faster,
27
// and we don't use any outlines for now.
28
outline: 2px solid transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: $corner-radius;
32
&:focus {
34
outline-color: $overlay-checked;
35
}
36
}
37
/***************
40
* Base States *
41
***************/
42
.background {
43
background-color: $background;
44
color: $text;
45
}
46
/*
48
These wildcard seems unavoidable, need to investigate.
49
Wildcards are bad and troublesome, use them with care,
50
or better, just don't.
51
Everytime a wildcard is used a kitten dies, painfully.
52
*/
53
*:disabled {
55
-gtk-icon-effect: dim;
56
}
57
.gtkstyle-fallback {
59
background-color: $background;
60
color: $text;
61
&:hover {
63
background-color: darken($background, 5%);
64
}
65
&:active {
67
background-color: darken($background, 10%);
68
}
69
&:disabled {
71
color: $text-disabled;
72
}
73
&:selected {
75
background-color: $primary;
76
color: on($primary);
77
}
78
}
79
.view {
81
background-color: $base;
82
color: $text;
83
&:hover {
85
box-shadow: inset 0 0 0 9999px $overlay-hover;
86
}
87
&:selected:hover {
89
box-shadow: inset 0 0 0 9999px rgba($primary, 0.08);
90
}
91
&:disabled {
93
color: $text-disabled;
94
}
95
&:hover,
97
&:selected {
98
border-radius: $corner-radius;
99
}
100
selection,
102
&:selected {
103
@extend %selected_items;
104
}
105
}
106
textview {
108
// FIXME: we need to override background-color to ensure text rendering
109
text {
110
background-color: $base;
111
}
112
border {
114
background-color: $base-alt;
115
color: $text2; // FIXME: not working
116
}
117
}
118
iconview {
120
// @extend .view;
121
}
122
%iconview-desktop {
124
// background-color: $scrim;
125
color: on(dark);
126
text-shadow: $text-shadow;
127
}
128
.rubberband,
130
rubberband {
131
border: 1px solid on(dark, primary);
132
background-color: rgba(on(dark, primary), 0.3);
133
}
134
flowbox {
136
rubberband {
137
@extend rubberband;
138
}
139
flowboxchild {
141
padding: 4px;
142
border-radius: $corner-radius;
143
&:selected {
145
@extend %selected_items;
146
}
147
}
148
}
149
.content-view .tile {
151
// margin: 2px;
152
// padding: 0;
153
// border-radius: 0;
154
// background-color: black;
155
&:selected {
157
background-color: transparent;
158
}
159
}
160
label {
162
caret-color: currentColor; // this shouldn't be needed.
163
&.separator {
165
color: $text2;
166
}
167
selection {
169
@extend %selected_items;
170
}
171
&:disabled {
173
color: $text-disabled;
174
selection {
176
// @extend %selected_items:disabled;
177
}
178
headerbar &,
180
menuitem &,
181
tab &,
182
button & {
183
color: inherit;
184
}
185
}
186
&.osd {
188
border-radius: $corner-radius;
189
background-color: $tooltip;
190
color: on($tooltip);
191
}
192
}
193
.dim-label {
195
color: $text2;
196
}
197
assistant {
199
.sidebar {
200
padding: 4px 0;
201
// background-color: $base;
202
}
203
.sidebar label {
205
min-height: $medium-size;
206
padding: 0 12px;
207
color: $text-disabled;
208
font-weight: 500;
209
&.highlight {
211
color: $text;
212
}
213
}
214
}
215
%osd,
217
.osd {
218
// opacity: .9;
219
}
220
/*********************
223
* Spinner Animation *
224
*********************/
225
@keyframes spin {
226
to {
227
-gtk-icon-transform: rotate(1turn);
228
}
229
}
230
spinner {
232
background: none;
233
opacity: 0; // non spinning spinner makes no sense
234
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
235
&:checked {
237
opacity: 1;
238
animation: spin 1s linear infinite;
239
&:disabled { opacity: 0.5; }
241
}
242
}
243
/****************
246
* Text Entries *
247
****************/
248
%entry,
249
entry {
250
min-height: $medium-size;
251
padding: 0 8px;
252
border-radius: $corner-radius $corner-radius 0 0;
253
caret-color: currentColor; // this shouldn't be needed.
254
@include entry(normal);
256
&:focus {
258
@include entry(checked);
259
}
260
&:drop(active) {
262
@include entry(hover);
263
}
264
&:disabled {
266
@include entry(disabled);
267
}
268
&.flat {
270
min-height: 0;
271
padding: 2px;
272
border-radius: 0;
273
background-color: transparent;
274
}
275
// icons inside the entry
277
image {
278
// min-height: $small-size;
279
// min-width: $small-size;
280
// border-radius: $circular-radius;
281
// @extend %ripple;
282
// @include ink-color($text2);
283
color: $text2;
284
&:hover,
286
&:active {
287
color: $text;
288
}
289
&:disabled {
291
color: $text-disabled;
292
}
293
&.left {
295
margin-left: ($medium-size - 16px) / 2 - 8px;
296
margin-right: 6px;
297
}
298
&.right {
300
margin-left: 6px;
301
margin-right: ($medium-size - 16px) / 2 - 8px;
302
}
303
}
304
undershoot {
306
&.left {
307
@include undershoot(left);
308
}
309
&.right {
311
@include undershoot(right);
312
}
313
}
314
selection {
316
@extend %selected_items;
317
}
318
// entry error and warning style
320
@each $class, $color in (".error": $error, ".warning": $warning) {
321
&#{$class} {
322
@include entry(normal, $color);
323
&:focus {
325
@include entry(checked, $color);
326
}
327
&:disabled {
329
@include entry(disabled, $color);
330
}
331
}
332
}
333
.osd & {
335
}
336
progress {
338
margin: 2px -8px;
339
border-bottom: 2px solid $primary;
340
background-color: transparent;
341
}
342
// linked entries
344
.linked:not(.vertical) > & {
345
@extend %linked;
346
}
347
// Vertically linked entries
349
.linked.vertical > & {
350
@extend %linked-vertical;
351
}
352
}
353
%entry_raised {
355
border-radius: $corner-radius;
356
@include entry(raised-normal);
358
&:focus {
360
@include entry(raised-focus);
361
}
362
&:drop(active) {
364
@include entry(raised-hover);
365
}
366
&:disabled {
368
@include entry(raised-disabled);
369
}
370
// entry error and warning style
372
@each $class, $color in (".error": $error, ".warning": $warning) {
373
&#{$class} {
374
@include entry(raised-normal, $color);
375
&:focus {
377
@include entry(raised-focus, $color);
378
}
379
&:disabled {
381
@include entry(raised-disabled, $color);
382
}
383
image {
385
color: on($color, text2);
386
&:hover,
388
&:active {
389
color: on($color);
390
}
391
&:disabled {
393
color: on($color, text-disabled);
394
}
395
}
396
}
397
}
398
}
399
treeview entry {
401
&,
402
&.flat {
403
background-color: $base;
404
&,
406
&:focus {
407
border-image: none;
408
box-shadow: none;
409
}
410
}
411
}
412
.entry-tag {
414
margin: 2px;
415
border-radius: $circular-radius;
416
box-shadow: none;
417
background-color: $fill;
418
color: $text;
419
&:hover {
421
background-image: image($overlay-hover);
422
}
423
// side margins: compensate the entry padding with a negative margin
425
// then the negative margin itself
426
:dir(ltr) & {
427
margin-left: 4px;
428
margin-right: 0;
429
padding-left: 12px;
430
padding-right: 8px;
431
}
432
:dir(rtl) & {
434
margin-left: 0;
435
margin-right: 4px;
436
padding-left: 8px;
437
padding-right: 12px;
438
}
439
// seems any sizing doesn't work
441
&.button {
442
box-shadow: none;
443
background-color: transparent;
444
color: $text2;
445
}
446
}
447
/***********
450
* Buttons *
451
***********/
452
// stuff for .needs-attention
453
@keyframes needs-attention {
454
from {
455
background-image:
456
-gtk-gradient(
457
radial,
458
center center, 0,
459
center center, .001,
460
to($primary),
461
to(transparent)
462
);
463
}
464
to {
466
background-image:
467
-gtk-gradient(
468
radial,
469
center center, 0,
470
center center, .5,
471
to($primary),
472
to(transparent)
473
);
474
}
475
}
476
%button,
478
button {
479
min-height: 24px;
480
min-width: 16px;
481
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
482
border-radius: $corner-radius;
483
background-color: $surface;
484
color: $text;
485
font-weight: 500;
486
@extend %ripple;
488
@include raised-ink-color($text);
489
&:disabled {
491
box-shadow: none;
492
background-color: $fill;
493
color: $text-disabled;
494
}
495
&:checked {
497
background-color: mix(rgba($text, 1), $surface, percentage($overlay-checked-opacity));
498
&:disabled {
500
box-shadow: inset 0 0 0 9999px $overlay-checked;
501
background-color: $fill;
502
color: $text-disabled;
503
}
504
}
505
&.text-button {
507
min-width: 64px - 16px * 2;
508
padding-left: 16px;
509
padding-right: 16px;
510
}
511
&.image-button {
513
min-width: 24px;
514
padding: ($medium-size - 24px) / 2;
515
border-radius: $circular-radius;
516
}
517
// NOTE: Some image-only buttons use this as well
519
&.text-button.image-button {
520
min-width: 24px;
521
padding: ($medium-size - 24px) / 2;
522
border-radius: $corner-radius;
523
label {
525
&:first-child {
526
margin-left: 16px - ($medium-size - 24px) / 2;
527
}
528
&:last-child {
530
margin-right: 16px - ($medium-size - 24px) / 2;
531
}
532
}
533
image:not(:only-child) {
535
margin: 0 (24px - 16px) / 2;
536
}
537
}
538
.linked:not(.vertical) > & {
540
@extend %linked;
541
&.image-button:not(.text-button) {
543
@extend %linked-image-button;
544
}
545
}
546
.linked.vertical > & {
548
@extend %linked-vertical;
549
&.image-button:not(.text-button) {
551
@extend %linked-vertical-image-button;
552
}
553
}
554
}
555
%button-flat-basic {
557
background-color: transparent;
558
@include ink-color($text2);
559
&:disabled {
561
background-color: transparent;
562
color: $text2-disabled;
563
}
564
}
565
%button-flat-activatable {
567
@extend %button-flat-basic;
568
&:checked {
570
background-color: $overlay-checked;
571
color: $text;
572
&:disabled {
574
color: $text-disabled;
575
}
576
}
577
}
578
%button-flat,
580
button.flat {
581
@extend %button-flat-activatable;
582
&.text-button {
584
min-width: 64px - 8px * 2;
585
padding-left: 8px;
586
padding-right: 8px;
587
}
588
&.text-button.image-button {
590
min-width: 24px;
591
padding: ($medium-size - 24px) / 2;
592
label {
594
&:first-child {
595
margin-left: 12px - ($medium-size - 24px) / 2;
596
}
597
&:last-child {
599
margin-right: 12px - ($medium-size - 24px) / 2;
600
}
601
}
602
}
603
.linked:not(.vertical) > &,
605
.linked.vertical > & {
606
&:not(:only-child) { // specificity bump
607
border-radius: $corner-radius;
608
&.image-button:not(.text-button) {
610
border-radius: $circular-radius;
611
}
612
}
613
}
614
}
615
button {
617
// big standalone buttons like in Documents pager
618
&.osd {
619
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
620
&.image-button {
622
padding: ($large-size - 24px) / 2;
623
}
624
&:disabled {
626
opacity: 0;
627
}
628
}
629
// overlay / OSD style
631
@at-root %osd_button,
632
.osd & {
633
}
634
// Suggested and Destructive Action buttons
636
@each $class, $color in (".suggested-action": $primary, ".destructive-action": $error) {
637
&#{$class} {
638
background-color: $color;
639
color: on($color);
640
@include raised-ink-color(on($color));
641
&:disabled {
643
box-shadow: none;
644
background-color: $fill;
645
color: $text-disabled;
646
}
647
&:checked {
649
background-color: mix(on($color), $color, percentage($overlay-checked-opacity));
650
}
651
&.flat {
653
background-color: transparent;
654
@include ink-color($color);
655
&:disabled {
657
box-shadow: none;
658
background-color: transparent;
659
color: $text2-disabled;
660
}
661
&:checked {
663
background-color: rgba($color, $overlay-checked-opacity);
664
}
665
}
666
.osd & {
668
}
669
}
670
}
671
.stack-switcher > & {
673
// to position the needs attention dot, padding is added to the button
674
// child, a label needs just lateral padding while an icon needs vertical
675
// padding added too.
676
> label {
678
margin: 0 -6px;
679
padding: 0 6px;
680
}
681
> image {
683
margin: -3px -6px;
684
padding: 3px 6px;
685
}
686
&.needs-attention {
688
> label,
689
> image {
690
@extend %needs-attention;
691
}
692
&:checked {
694
> label,
695
> image {
696
animation: none;
697
background-image: none;
698
}
699
}
700
}
701
}
702
// hide separators
704
&.font,
705
&.file {
706
separator {
707
@extend %hide_separators;
708
}
709
}
710
&.font {
712
> box > box > label {
713
// font-weight: bold;
714
}
715
}
716
// inline-toolbar buttons
718
.inline-toolbar & {
719
// @extend %button-flat;
720
&:not(.text-button) {
722
border-radius: $circular-radius;
723
}
724
}
725
.primary-toolbar & {
727
-gtk-icon-shadow: none; // tango icons don't need shadows
728
}
729
&.close,
731
&.circular { // The Bloody Circul Button
732
border-radius: $circular-radius;
733
label {
735
// padding: 0;
736
}
737
}
738
}
739
%button-small {
741
min-height: $small-size;
742
min-width: $small-size;
743
padding: 0;
744
border-radius: $circular-radius;
745
}
746
%needs-attention {
748
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
749
background-repeat: no-repeat;
750
background-position: right 3px;
751
background-size: 6px 6px;
752
&:dir(rtl) {
754
background-position: left 3px;
755
}
756
}
757
// all the following is for the +|- buttons on inline toolbars, that way
759
// should really be deprecated...
760
.inline-toolbar toolbutton > button {
761
}
762
// More inline toolbar buttons
764
toolbar.inline-toolbar toolbutton {
765
&:not(:first-child) > button.flat {
766
// @extend %linked-not-first-child;
767
}
768
&:not(:last-child) > button.flat {
770
// @extend %linked-not-last-child;
771
}
772
}
773
%linked-not-first-child {
775
border-top-left-radius: 0;
776
border-bottom-left-radius: 0;
777
}
778
%linked-not-last-child {
780
border-top-right-radius: 0;
781
border-bottom-right-radius: 0;
782
}
783
%linked {
785
&:not(:first-child) {
786
@extend %linked-not-first-child;
787
}
788
&:not(:last-child) {
790
@extend %linked-not-last-child;
791
}
792
}
793
%linked-vertical-not-first-child {
795
border-top-left-radius: 0;
796
border-top-right-radius: 0;
797
}
798
%linked-vertical-not-last-child {
800
border-bottom-left-radius: 0;
801
border-bottom-right-radius: 0;
802
}
803
%linked-vertical {
805
&:not(:first-child) {
806
@extend %linked-vertical-not-first-child;
807
}
808
&:not(:last-child) {
810
@extend %linked-vertical-not-last-child;
811
}
812
}
813
%linked-image-button {
815
&:first-child {
816
border-top-left-radius: $corner-radius;
817
border-bottom-left-radius: $corner-radius;
818
}
819
&:last-child {
821
border-top-right-radius: $corner-radius;
822
border-bottom-right-radius: $corner-radius;
823
}
824
&:only-child {
826
border-radius: $circular-radius;
827
}
828
}
829
%linked-vertical-image-button {
831
&:first-child {
832
border-top-left-radius: $corner-radius;
833
border-top-right-radius: $corner-radius;
834
}
835
&:last-child {
837
border-bottom-left-radius: $corner-radius;
838
border-bottom-right-radius: $corner-radius;
839
}
840
&:only-child {
842
border-radius: $circular-radius;
843
}
844
}
845
/* menu buttons */
847
modelbutton.flat,
848
.menuitem.button.flat {
849
min-height: $menuitem-size;
850
padding: 0 8px;
851
border-radius: $corner-radius;
852
@extend %ripple;
854
@include ink-color($text, $fg: false);
855
&:selected {
857
@extend %selected_items;
858
}
859
}
860
modelbutton.flat arrow {
862
&.left {
863
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
864
}
865
&.right {
867
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
868
}
869
}
870
button.color {
872
min-height: $small-size;
873
min-width: $small-size;
874
padding: $container-padding;
875
colorswatch:only-child {
877
&,
878
overlay {
879
// border-radius: 0;
880
}
881
}
882
}
883
/*********
886
* Links *
887
*********/
888
*:link {
889
color: $primary;
890
}
891
*:visited {
893
color: $visited;
894
}
895
button.link {
897
&:link {
898
@include ink-color($primary);
899
}
900
&:visited {
902
@include ink-color($visited);
903
}
904
> label {
906
text-decoration-line: underline;
907
}
908
}
909
/*****************
911
* GtkSpinButton *
912
*****************/
913
spinbutton {
914
&:not(.vertical) {
915
// in this horizontal configuration, the whole spinbutton
916
// behaves as the entry, so we extend the entry styling
917
// and nuke the style on the internal entry
918
@extend %entry;
919
padding: 0;
921
entry {
923
min-width: $large-size - 8px * 2;
924
// reset all the other props since the spinbutton node is styled here
925
margin: 0;
926
border-image: none;
927
border-radius: 0;
928
box-shadow: none;
929
background-color: transparent;
930
}
931
button {
933
@extend %button-flat-basic;
934
@extend %button-small;
935
// margin: $container-padding;
937
border: solid $container-padding transparent;
938
// Remove unwanted focus indicator
940
&:focus:not(:hover):not(:active) {
941
box-shadow: inset 0 0 0 9999px transparent;
942
}
943
&.up:dir(ltr),
945
&.down:dir(rtl) {
946
margin-left: -$container-padding / 2;
947
}
948
&.up:dir(rtl),
950
&.down:dir(ltr) {
951
margin-right: -$container-padding / 2;
952
}
953
}
954
}
955
// OSD horizontal
957
.osd &:not(.vertical) {
958
}
959
// Vertical
961
&.vertical {
962
// in the vertical configuration, we treat the spinbutton
963
// as a box, and tweak the style of the entry in the middle
964
// so that it's linked
965
// FIXME: this should not be set at all, but otherwise it gets the wrong
967
// color
968
&:disabled {
969
color: $text-disabled;
970
}
971
entry {
973
@extend %entry_raised;
974
min-height: $medium-size;
976
min-width: $large-size;
977
padding: 0;
978
}
979
button {
981
min-height: $medium-size;
982
min-width: $large-size;
983
padding: 0;
984
@extend %button-flat-basic;
986
// Remove unwanted focus indicator
988
&:focus:not(:hover):not(:active) {
989
box-shadow: inset 0 0 0 9999px transparent;
990
}
991
&.up {
993
border-radius: $corner-radius $corner-radius 0 0;
994
}
995
&.down {
997
border-radius: 0 0 $corner-radius $corner-radius;
998
}
999
}
1000
}
1001
// OSD vertical
1003
.osd &.vertical {
1004
}
1005
// Misc
1007
treeview &:not(.vertical) {
1008
min-height: 0;
1009
border-style: none;
1010
border-radius: 0;
1011
entry {
1013
min-height: 0;
1014
padding: 1px 2px;
1015
}
1016
}
1017
}
1018
/**************
1021
* ComboBoxes *
1022
**************/
1023
combobox {
1024
arrow {
1025
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1026
min-height: 16px;
1027
min-width: 16px;
1028
}
1029
// workaround for menuitem selection
1031
decoration {
1032
transition: none;
1033
}
1034
button.combo cellview {
1036
&:dir(ltr) {
1037
margin-left: 8px - ($medium-size - 16px) / 2;
1038
}
1039
&:dir(rtl) {
1041
margin-right: 8px - ($medium-size - 16px) / 2;
1042
}
1043
}
1044
menu {
1046
padding: 2px 0;
1047
menuitem {
1049
min-height: $medium-size - 2px * 2;
1050
padding: 0 8px;
1051
}
1052
// overflow arrows
1054
> arrow {
1055
&.top {
1056
margin-top: -2px;
1057
}
1058
&.bottom {
1060
margin-top: 2px * 2;
1061
margin-bottom: -2px * 3;
1062
}
1063
}
1064
}
1065
&.linked {
1067
button:nth-child(2) {
1068
&:dir(ltr) {
1069
@extend %linked-not-first-child;
1070
}
1071
&:dir(rtl) {
1073
@extend %linked-not-last-child;
1074
}
1075
}
1076
}
1077
> .linked:not(.vertical) > entry:not(:only-child) {
1079
border-radius: $corner-radius $corner-radius 0 0;
1080
&:first-child {
1082
margin-right: -$medium-size;
1083
padding-right: $medium-size;
1084
}
1085
&:last-child {
1087
margin-left: -$medium-size;
1088
padding-left: $medium-size;
1089
}
1090
}
1091
> .linked:not(.vertical) > button:not(:only-child) {
1093
@extend %button-flat-activatable;
1094
// @extend %button-small;
1095
min-height: 16px;
1097
min-width: 16px;
1098
margin: ($medium-size - $small-size) / 2;
1099
padding: ($small-size - 16px) / 2;
1100
border-radius: $circular-radius;
1101
}
1102
}
1103
// the combo is a composite widget so the way we do button linking doesn't
1105
// work, special case needed. See
1106
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
1107
.linked:not(.vertical) > combobox {
1109
&:not(:first-child) > box > button.combo {
1110
@extend %linked-not-first-child;
1111
}
1112
&:not(:last-child) > box > button.combo {
1114
@extend %linked-not-last-child;
1115
}
1116
}
1117
.linked.vertical > combobox {
1119
&:not(:first-child) > box > button.combo {
1120
@extend %linked-vertical-not-first-child;
1121
}
1122
&:not(:last-child) > box > button.combo {
1124
@extend %linked-vertical-not-last-child;
1125
}
1126
}
1127
button.combo:only-child {
1129
border-radius: $corner-radius $corner-radius 0 0;
1130
font-weight: normal;
1131
@include entry(normal);
1133
&:focus {
1135
@include entry(focus);
1136
}
1137
&:drop(active),
1139
&:hover {
1140
@include entry(hover);
1141
}
1142
&:checked {
1144
@include entry(checked);
1145
}
1146
&:disabled {
1148
@include entry(disabled);
1149
}
1150
}
1151
/************
1154
* Toolbars *
1155
************/
1156
toolbar {
1157
-GtkWidget-window-dragging: true;
1158
padding: 2px;
1159
background-color: $background;
1160
button {
1162
@extend %button-flat;
1163
}
1164
// on OSD
1166
.osd & {
1167
background-color: transparent;
1168
}
1169
// stand-alone OSD toolbars
1171
&.osd {
1172
@extend %toolbar-osd;
1173
// positional classes for `attached` osd toolbars
1175
&.left,
1176
&.right,
1177
&.top,
1178
&.bottom {
1179
border-radius: 0;
1180
}
1181
&.bottom {
1183
box-shadow: none;
1184
background-color: transparent;
1185
background-image:
1186
linear-gradient(
1187
to bottom,
1188
transparent,
1189
rgba(black, .1) 30%,
1190
rgba(black, .2) 50%,
1191
rgba(black, .4)
1192
);
1193
}
1194
}
1195
// toolbar separators
1197
&.horizontal > separator {
1198
margin: 2px;
1199
}
1200
&.vertical > separator {
1202
margin: 2px;
1203
}
1204
&:not(.inline-toolbar):not(.osd) {
1206
scale,
1207
entry,
1208
spinbutton,
1209
button {
1210
margin: 2px;
1211
}
1212
.linked entry,
1214
.linked spinbutton,
1215
.linked button {
1216
&:not(:first-child) {
1217
margin-left: 0;
1218
}
1219
&:not(:last-child) {
1221
margin-right: 0;
1222
}
1223
}
1224
spinbutton {
1226
entry,
1227
button {
1228
margin: 0;
1229
}
1230
}
1231
switch {
1233
margin: 2px + $container-padding 2px;
1234
}
1235
}
1236
}
1237
%toolbar-osd {
1239
transition: $transition-shadow;
1240
padding: $container-padding;
1241
border-radius: $corner-radius;
1242
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
1243
background-color: $surface;
1244
&:backdrop {
1246
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
1247
}
1248
}
1249
// searchbar, location-bar & inline-toolbar
1251
.inline-toolbar {
1252
padding: $container-padding;
1253
border-style: solid;
1254
border-width: 0 1px 1px;
1255
border-color: $divider;
1256
background-color: $base-alt;
1257
}
1258
searchbar > revealer > box,
1260
.location-bar {
1261
padding: $container-padding;
1262
border-style: solid;
1263
border-width: 0 0 1px;
1264
border-color: $divider;
1265
background-color: $background;
1266
background-clip: border-box;
1267
}
1268
searchbar > revealer > box {
1270
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1271
margin: -6px;
1272
padding: $container-padding;
1273
}
1274
/***************
1277
* Header bars *
1278
***************/
1279
.titlebar {
1280
transition: background-color $duration $ease-out, color $duration $ease-out;
1281
border-radius: $corner-radius $corner-radius 0 0;
1282
box-shadow: $shadow-z1, inset 0 1px highlight($titlebar);
1283
background-color: $titlebar;
1284
color: $titlebar-text;
1285
&:disabled {
1287
color: $titlebar-text-disabled;
1288
}
1289
&:backdrop {
1291
background-color: $titlebar-backdrop;
1292
color: $titlebar-text2;
1293
&:disabled {
1295
color: $titlebar-text2-disabled;
1296
}
1297
}
1298
.title {
1300
padding-left: 12px;
1301
padding-right: 12px;
1302
font-weight: bold;
1303
}
1304
.subtitle {
1306
padding-left: 12px;
1307
padding-right: 12px;
1308
font-size: smaller;
1309
}
1310
.subtitle,
1312
.dim-label {
1313
transition: color $duration $ease-out;
1314
color: $titlebar-text2;
1315
&:backdrop {
1317
color: $titlebar-text-disabled;
1318
}
1319
}
1320
// Don't draw titlebar above titlebar
1322
.titlebar {
1323
background-color: transparent;
1324
box-shadow: none;
1325
}
1326
// The separator for split headerbars
1328
headerbar + separator {
1329
background-color: $titlebar-divider;
1330
}
1331
entry {
1333
box-shadow: inset 0 -1px $titlebar-stroke;
1334
background-color: $titlebar-entry-fill;
1335
color: $titlebar-text;
1336
&:disabled {
1338
box-shadow: inset 0 -1px $titlebar-stroke-disabled;
1339
background-color: $titlebar-entry-fill;
1340
color: $titlebar-text-disabled;
1341
}
1342
image {
1344
color: $titlebar-text2;
1345
&:hover,
1347
&:active {
1348
color: $titlebar-text;
1349
}
1350
&:disabled {
1352
color: $titlebar-text-disabled;
1353
}
1354
}
1355
}
1356
.linked:not(.vertical) > entry:not(:only-child) {
1358
border-radius: $corner-radius $corner-radius 0 0;
1359
}
1360
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1362
@extend %button-flat;
1363
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1365
$titlebar-indicator 0%,
1366
transparent 0%)
1367
0 0 0 / 0 0 0px;
1368
@include ink-color($titlebar-text2);
1370
&:disabled {
1372
color: $titlebar-text2-disabled;
1373
}
1374
@at-root %titlebar-button-checked,
1376
&:checked {
1377
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1378
$titlebar-indicator 100%,
1379
transparent 0%)
1380
0 0 2 / 0 0 2px;
1381
background-color: transparent;
1382
color: $titlebar-text;
1383
&:disabled {
1385
background-color: transparent;
1386
color: $titlebar-text-disabled;
1387
}
1388
}
1389
&:backdrop {
1391
color: $titlebar-text-disabled;
1392
&:disabled {
1394
color: $titlebar-text2-disabled;
1395
}
1396
&:checked {
1398
color: $titlebar-text2;
1399
&:disabled {
1401
color: $titlebar-text2-disabled;
1402
}
1403
}
1404
}
1405
}
1406
button.suggested-action, button.destructive-action {
1408
&:disabled {
1409
background-color: $titlebar-fill;
1410
color: $titlebar-text-disabled;
1411
}
1412
}
1413
// FIXME: Ugly overriding
1415
stackswitcher button:not(.suggested-action):not(.destructive-action).text-button {
1416
min-width: 120px - 8px * 2;
1417
}
1418
// FIXME: Ugly overriding
1420
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
1421
min-width: 0;
1422
padding-left: ($medium-size - 24px) / 2;
1423
padding-right: ($medium-size - 24px) / 2;
1424
}
1425
&.selection-mode {
1427
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1428
// but let's keep it for backwards compatibility.
1429
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1430
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1431
box-shadow: $shadow-z1, inset 0 1px highlight($primary);
1432
background-color: $primary;
1433
color: on($primary);
1434
&:backdrop {
1436
color: on($primary, text2);
1437
}
1438
.subtitle:link {
1440
color: on($primary);
1441
}
1442
button:not(.suggested-action):not(.destructive-action) {
1444
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1445
currentColor 0%,
1446
transparent 0%)
1447
0 0 0 / 0 0 0px;
1448
color: on($primary);
1449
&:disabled {
1451
color: on($primary, text-disabled);
1452
}
1453
&:checked {
1455
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1456
currentColor 100%,
1457
transparent 0%)
1458
0 0 2 / 0 0 2px;
1459
color: on($primary);
1460
&:disabled {
1462
color: on($primary, text-disabled);
1463
}
1464
}
1465
&:backdrop {
1467
color: on($primary, text2);
1468
&:disabled {
1470
color: on($primary, text2-disabled);
1471
}
1472
&:checked {
1474
color: on($primary, text2);
1475
&:disabled {
1477
color: on($primary, text2-disabled);
1478
}
1479
}
1480
}
1481
}
1482
.selection-menu {
1484
padding-left: 16px;
1485
padding-right: 16px;
1486
arrow {
1488
-GtkArrow-arrow-scaling: 1;
1489
}
1490
.arrow {
1492
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1493
}
1494
}
1495
}
1496
.selection-mode {
1498
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
1499
background-color: $primary;
1500
}
1501
// squared corners when the window is maximized, tiled, or fullscreen
1503
.tiled &,
1504
.tiled-top &,
1505
.tiled-right &,
1506
.tiled-bottom &,
1507
.tiled-left &,
1508
.maximized &,
1509
.fullscreen & {
1510
border-radius: 0;
1511
box-shadow: $shadow-z1;
1512
}
1513
&.default-decoration {
1515
min-height: $small-size;
1516
padding: $container-padding;
1517
box-shadow: inset 0 1px highlight($titlebar);
1518
.tiled &,
1520
.maximized &,
1521
.fullscreen & {
1522
box-shadow: none;
1523
}
1524
button.titlebutton {
1526
min-height: $small-size;
1527
min-width: $small-size;
1528
margin: 0;
1529
padding: 0;
1530
}
1531
// workaround for non-animatable buttons
1533
.background:not(.csd) & button.titlebutton:active {
1534
background-size: 1000% 1000%;
1535
}
1536
}
1537
.solid-csd & {
1539
&:dir(rtl), &:dir(ltr) { // specificity bump
1540
border-radius: 0;
1541
box-shadow: $shadow-z1; // just remove the highlight
1542
}
1543
}
1544
}
1545
headerbar {
1547
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
1548
min-height: $large-size;
1549
padding: 0 $container-padding;
1550
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1552
entry,
1553
spinbutton,
1554
button {
1555
margin-top: $container-padding;
1556
margin-bottom: $container-padding;
1557
}
1558
separator.titlebutton {
1560
margin-top: $large-size / 4;
1561
margin-bottom: $large-size / 4;
1562
background-color: $titlebar-divider;
1563
}
1564
switch {
1566
margin-top: ($large-size - 24px) / 2;
1567
margin-bottom: ($large-size - 24px) / 2;
1568
}
1569
// reset button margins of the spinbutton
1571
spinbutton button {
1572
margin-top: 0;
1573
margin-bottom: 0;
1574
}
1575
// FIXME: This is a hacky workaround.
1577
.entry-tag {
1578
margin-top: 5px;
1579
margin-bottom: 5px;
1580
}
1581
}
1582
// Development versions of apps to use a differently styled headerbar
1584
window.devel .titlebar:not(.selection-mode) {
1585
}
1586
/************
1589
* Pathbars *
1590
************/
1591
%pathbar_button,
1592
.path-bar.linked:not(.vertical) > button {
1593
@extend %button-flat-basic;
1594
padding-left: ($medium-size - 24px) / 2;
1596
padding-right: ($medium-size - 24px) / 2;
1597
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1598
$primary 0%,
1599
transparent 0%)
1600
0 0 0 / 0 0 0px;
1601
border-radius: $corner-radius;
1602
&:checked {
1604
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1605
$primary 100%,
1606
transparent 0%)
1607
0 0 2 / 0 0 2px;
1608
color: $text;
1609
&,
1611
&:disabled {
1612
background-color: transparent;
1613
}
1614
}
1615
label:not(:only-child) {
1617
&:first-child {
1618
margin-left: 0;
1619
}
1620
&:last-child {
1622
margin-right: 0;
1623
}
1624
}
1625
&.text-button {
1627
min-width: 0;
1628
}
1629
&.slider-button {
1631
padding-left: (24px - 16px) / 2;
1632
padding-right: (24px - 16px) / 2;
1633
}
1634
}
1635
/**************
1638
* Tree Views *
1639
**************/
1640
treeview.view {
1641
@at-root * {
1642
-GtkTreeView-horizontal-separator: 4;
1643
-GtkTreeView-grid-line-width: 1;
1644
-GtkTreeView-grid-line-pattern: '';
1645
-GtkTreeView-tree-line-width: 1;
1646
-GtkTreeView-tree-line-pattern: '';
1647
-GtkTreeView-expander-size: 16;
1648
}
1649
border-left-color: $stroke; // this is actually the tree lines color,
1651
border-top-color: $divider; // while this is the grid lines color, better then nothing
1652
// FIXME: Avoid transparency background-color being slightly darker
1654
&:selected {
1655
background-color: $base;
1656
background-image: image($overlay-selected);
1657
}
1658
// to avoid borders being overridden by the previously set props
1660
rubberband {
1661
@extend rubberband;
1662
}
1663
&:hover,
1665
&:selected {
1666
border-radius: 0;
1667
}
1668
&.separator {
1670
min-height: 1px + 2px * 2;
1671
color: $divider;
1672
}
1673
&:drop(active) {
1675
// FIXME: box-shadow, background-color and background-image are not available here.
1676
border-style: solid none;
1677
border-width: 9999px;
1678
border-color: $overlay-hover;
1679
&.after {
1681
border-top-style: none;
1682
}
1683
&.before {
1685
border-bottom-style: none;
1686
}
1687
}
1688
&.expander {
1690
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1691
-gtk-icon-transform: rotate(-90deg);
1692
&:dir(rtl) {
1694
-gtk-icon-transform: rotate(90deg);
1695
}
1696
&:checked {
1698
-gtk-icon-transform: unset;
1699
}
1700
color: $text2;
1702
&:hover,
1704
&:active {
1705
color: $text;
1706
}
1707
&:disabled {
1709
color: $text2-disabled;
1710
}
1711
}
1712
&.progressbar { // progress bar in treeviews
1714
border-bottom: $bar-size solid $primary;
1715
box-shadow: none;
1716
background-color: transparent;
1717
background-image: none;
1718
&:selected:hover {
1720
box-shadow: none;
1721
}
1722
}
1723
&.trough { // progress bar trough in treeviews
1725
border-bottom: $bar-size solid $stroke-disabled;
1726
box-shadow: none;
1727
background-color: transparent;
1728
background-image: none;
1729
&:selected:hover {
1731
box-shadow: none;
1732
}
1733
}
1734
header {
1736
button {
1737
padding: 2px 6px;
1738
border-style: none solid solid none;
1739
border-width: 1px;
1740
border-color: $divider;
1741
border-radius: 0;
1742
background-clip: border-box;
1743
color: $text2;
1744
@include ink-color($text2);
1745
@include list-item;
1746
&:disabled {
1748
color: $text2-disabled;
1749
}
1750
&,
1752
&:disabled {
1753
background-color: $base;
1754
}
1755
&:last-child {
1757
border-right-style: none;
1758
}
1759
}
1760
}
1761
button.dnd,
1763
header.button.dnd { // for treeview-like derive widgets
1764
padding: 2px 6px;
1765
border-style: none solid solid;
1766
border-width: 1px;
1767
border-color: $divider;
1768
border-radius: 0;
1769
box-shadow: none;
1770
background-color: $base;
1771
background-clip: border-box;
1772
color: $primary;
1773
}
1774
// see tests/testaccel to test
1776
acceleditor > label {
1777
background-color: $primary;
1778
}
1779
}
1780
/*********
1783
* Menus *
1784
*********/
1785
menubar,
1786
.menubar {
1787
-GtkWidget-window-dragging: true;
1788
padding: 0;
1789
// box-shadow: inset 0 -1px $divider;
1790
background-color: $titlebar;
1791
color: $titlebar-text;
1792
&:backdrop {
1794
background-color: $titlebar-backdrop;
1795
color: $titlebar-text2;
1796
}
1797
.csd & {
1799
transition: $transition;
1800
}
1801
> menuitem {
1803
transition: $transition;
1804
min-height: 20px;
1805
padding: 4px 8px;
1806
color: $titlebar-text2;
1807
&:hover { // Seems like it :hover even with keyboard focus
1809
transition: none;
1810
background-color: $overlay-checked;
1811
color: $titlebar-text;
1812
}
1813
&:disabled {
1815
color: $titlebar-text2-disabled;
1816
}
1817
}
1818
}
1819
// Needed to make the border-radius of menus work
1821
// otherwise the background bleeds out of the menu edges
1822
.background.popup {
1823
background-color: transparent;
1824
}
1825
menu,
1827
.menu,
1828
.context-menu {
1829
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1830
padding: 4px 0;
1831
box-shadow: inset 0 1px highlight($surface);
1832
background-color: $surface;
1833
background-clip: border-box;
1834
border: 1px solid $divider; // adds borders in a non composited env
1835
.csd & {
1837
border: none; // axes borders in a composited env
1838
border-radius: $corner-radius;
1839
}
1840
menuitem {
1842
transition: background-color $duration $ease-out;
1843
min-height: 20px;
1844
min-width: 40px;
1845
padding: 4px 8px;
1846
color: $text;
1847
font: initial;
1848
text-shadow: none;
1849
&:hover {
1851
transition: none;
1852
background-color: $overlay-hover;
1853
}
1854
&:disabled {
1856
color: $text-disabled;
1857
}
1858
// submenu indicators
1860
arrow {
1861
min-height: 16px;
1862
min-width: 16px;
1863
&:dir(ltr) {
1865
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1866
margin-left: 8px;
1867
}
1868
&:dir(rtl) {
1870
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1871
margin-right: 8px;
1872
}
1873
}
1874
// avoids labels color being overridden, see
1876
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1877
label {
1878
&:dir(rtl),
1879
&:dir(ltr) {
1880
// color: inherit;
1881
}
1882
}
1883
}
1884
// overflow arrows
1886
> arrow {
1887
min-height: 16px;
1888
min-width: 16px;
1889
padding: 4px;
1890
background-color: $surface;
1891
color: $text2;
1892
&.top {
1894
margin-top: -4px;
1895
border-bottom: 1px solid $divider;
1896
border-radius: $corner-radius $corner-radius 0 0;
1897
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1898
}
1899
&.bottom {
1901
margin-top: 4px * 2;
1902
margin-bottom: -4px * 3;
1903
border-top: 1px solid $divider;
1904
border-radius: 0 0 $corner-radius $corner-radius;
1905
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1906
}
1907
&:hover {
1909
background-image: image($overlay-hover);
1910
}
1911
&:disabled {
1913
border-color: transparent;
1914
background-color: transparent;
1915
color: transparent;
1916
// color: $text2-disabled;
1917
}
1918
}
1919
separator {
1921
margin: 4px 0;
1922
}
1923
}
1924
menuitem {
1926
accelerator {
1927
color: $text2;
1928
}
1929
&:disabled accelerator {
1931
color: $text2-disabled;
1932
}
1933
}
1934
/************
1937
* Popovers *
1938
************/
1939
popover.background {
1940
transition: $transition-shadow;
1941
padding: 2px;
1942
box-shadow: $shadow-z4; // TODO: this should really have a highlight
1943
background-color: $surface;
1944
&:backdrop {
1946
box-shadow: $shadow-z2;
1947
}
1948
&, .csd & {
1950
border-style: solid;
1951
border-width: 1px;
1952
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1953
border-radius: $corner-radius + 1px;
1954
}
1955
> stack {
1957
margin: -4px; // remove extra padding from menu style popovers
1958
}
1959
> toolbar {
1961
margin: -2px;
1962
}
1963
> list,
1965
> .view,
1966
> toolbar {
1967
border-style: none;
1968
box-shadow: none;
1969
background-color: transparent;
1970
}
1971
// FIXME: Use the popover color instead of transparent as a workaround for .view
1973
list,
1974
.view:not(:selected),
1975
toolbar {
1976
background-color: $surface;
1977
}
1978
&.touch-selection,
1980
&.magnifier,
1981
&.osd {
1982
// @extend %osd;
1983
}
1984
button:not(.suggested-action):not(.destructive-action) {
1986
// @extend %button-flat;
1987
}
1988
.linked:not(.vertical) > entry:not(:only-child) {
1990
// border-radius: $corner-radius $corner-radius 0 0;
1991
}
1992
&.menu button,
1994
button.model {
1995
@extend %button-flat;
1996
min-height: 32px;
1998
padding: 0 8px;
1999
border-radius: $corner-radius;
2000
&:checked {
2002
// color: $primary;
2003
}
2004
}
2005
separator {
2007
margin: 4px 0;
2008
}
2009
list separator {
2011
margin: 0;
2012
}
2013
}
2014
/*************
2016
* Notebooks *
2017
*************/
2018
notebook {
2019
frame > paned > & > header,
2020
&.frame > header {
2021
background-color: $base-alt;
2022
}
2023
&:focus tab:checked {
2025
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
2026
}
2027
> header {
2029
border-width: 1px;
2030
border-color: $divider;
2031
background-color: $background;
2032
background-clip: border-box;
2033
&.top {
2035
border-bottom-style: solid;
2036
> tabs {
2038
margin-bottom: -1px;
2039
> tab {
2041
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
2042
&:checked {
2044
border-image-source: linear-gradient(to top, $primary 2px, $divider 2px);
2045
}
2046
&.reorderable-page {
2048
border-image-width: 0 1px 2px;
2049
}
2050
}
2051
}
2052
}
2053
&.bottom {
2055
border-top-style: solid;
2056
> tabs {
2058
margin-top: -1px;
2059
> tab {
2061
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
2062
&:checked {
2064
border-image-source: linear-gradient(to bottom, $primary 2px, $divider 2px);
2065
}
2066
&.reorderable-page {
2068
border-image-width: 2px 1px 0;
2069
}
2070
}
2071
}
2072
}
2073
&.left {
2075
border-right-style: solid;
2076
> tabs {
2078
margin-right: -1px;
2079
> tab {
2081
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
2082
&:checked {
2084
border-image-source: linear-gradient(to left, $primary 2px, $divider 2px);
2085
}
2086
&.reorderable-page {
2088
border-image-width: 1px 2px 1px 0;
2089
}
2090
}
2091
}
2092
}
2093
&.right {
2095
border-left-style: solid;
2096
> tabs {
2098
margin-left: -1px;
2099
> tab {
2101
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
2102
&:checked {
2104
border-image-source: linear-gradient(to right, $primary 2px, $divider 2px);
2105
}
2106
&.reorderable-page {
2108
border-image-width: 1px 0 1px 2px;
2109
}
2110
}
2111
}
2112
}
2113
&.top > tabs > arrow {
2115
@extend %notebook_vert_arrows;
2116
border-top-style: none;
2118
}
2119
&.bottom > tabs > arrow {
2121
@extend %notebook_vert_arrows;
2122
border-bottom-style: none;
2124
}
2125
@at-root %notebook_vert_arrows {
2127
padding-left: 4px;
2128
padding-right: 4px;
2129
&.down {
2131
margin-left: -8px;
2132
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2133
}
2134
&.up {
2136
margin-right: -8px;
2137
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2138
}
2139
}
2140
&.left > tabs > arrow {
2142
@extend %notebook_horz_arrows;
2143
border-left-style: none;
2145
}
2146
&.right > tabs > arrow {
2148
@extend %notebook_horz_arrows;
2149
border-right-style: none;
2151
}
2152
@at-root %notebook_horz_arrows {
2154
padding-top: 4px;
2155
padding-bottom: 4px;
2156
&.down {
2158
margin-top: -8px;
2159
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2160
}
2161
&.up {
2163
margin-bottom: -8px;
2164
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2165
}
2166
}
2167
> tabs > arrow {
2169
min-height: 16px;
2170
min-width: 16px;
2171
border-radius: 0;
2172
@extend %ripple;
2174
@include ink-color($text2);
2175
&:disabled {
2177
color: $text2-disabled;
2178
}
2179
}
2180
tab {
2182
transition: $transition,
2183
background-size 0ms,
2184
background-image 0ms;
2185
min-height: $small-size;
2186
min-width: $small-size;
2187
padding: $container-padding 12px;
2188
border-width: 1px; // for reorderable tabs
2190
border-color: transparent; //
2191
outline: none;
2193
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
2194
background-repeat: no-repeat;
2195
background-position: center;
2196
background-size: 0% 0%;
2197
background-clip: border-box;
2198
color: $text2;
2200
font-weight: 500;
2201
&:hover {
2203
background-color: $overlay-hover;
2204
}
2205
&:disabled {
2207
color: $text2-disabled;
2208
}
2209
&:checked {
2211
transition: $transition,
2212
background-size $ripple-fade-in-duration $ease-out,
2213
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
2214
background-color: transparent;
2215
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2216
background-size: 1000% 1000%;
2217
background-clip: padding-box;
2218
color: $text;
2219
&:disabled {
2221
color: $text-disabled;
2222
}
2223
&.reorderable-page {
2225
border-color: $divider;
2226
background-color: $base;
2227
}
2228
}
2229
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
2231
> box {
2232
transition: background-color $duration $ease-out;
2233
margin: -$container-padding -12px;
2234
padding: $container-padding 12px;
2235
&:drop(active) {
2237
background-color: $overlay-hover;
2238
}
2239
}
2240
// colors the button like the label, overridden otherwise
2242
button.flat {
2243
@extend %button-small;
2244
&:last-child {
2246
margin-left: $container-padding;
2247
margin-right: $container-padding - 12px;
2248
}
2249
&:first-child {
2251
margin-left: $container-padding - 12px;
2252
margin-right: $container-padding;
2253
}
2254
}
2255
}
2256
&.top,
2258
&.bottom {
2259
tabs {
2260
padding-left: 8px;
2261
padding-right: 8px;
2262
&:not(:only-child) {
2264
&:first-child {
2265
margin-left: 0;
2266
}
2267
&:last-child {
2269
margin-right: 0;
2270
}
2271
}
2272
tab.reorderable-page {
2274
border-style: none solid;
2275
}
2276
}
2277
}
2278
&.left,
2280
&.right {
2281
tabs {
2282
padding-top: 8px;
2283
padding-bottom: 8px;
2284
&:not(:only-child) {
2286
&:first-child {
2287
margin-top: 0;
2288
}
2289
&:last-child {
2291
margin-bottom: 0;
2292
}
2293
}
2294
tab.reorderable-page {
2296
border-style: solid none;
2297
}
2298
}
2299
}
2300
}
2301
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2303
background-color: $base;
2304
}
2305
}
2306
/**************
2309
* Scrollbars *
2310
**************/
2311
scrollbar {
2312
$_slider_min_length: 24px;
2313
// disable steppers
2315
@at-root * {
2316
-GtkScrollbar-has-backward-stepper: false;
2317
-GtkScrollbar-has-forward-stepper: false;
2318
}
2319
transition: $transition;
2321
background-color: $base;
2322
// scrollbar border
2324
&.top { border-bottom: 1px solid $divider; }
2325
&.bottom { border-top: 1px solid $divider; }
2326
&.left { border-right: 1px solid $divider; }
2327
&.right { border-left: 1px solid $divider; }
2328
// slider
2330
slider {
2331
transition: background-color $duration $ease-out;
2332
min-width: 8px;
2333
min-height: 8px;
2334
border: 4px solid transparent;
2335
border-radius: $circular-radius;
2336
background-clip: padding-box;
2337
background-color: $text-disabled;
2338
&:hover {
2340
background-color: $text2;
2341
}
2342
&:active {
2344
background-color: $text;
2345
}
2346
&:disabled {
2348
background-color: $text2-disabled;
2349
}
2350
}
2351
&.fine-tune {
2353
slider {
2354
min-width: 4px;
2355
min-height: 4px;
2356
}
2357
&.horizontal slider {
2359
margin: 2px 0;
2360
}
2361
&.vertical slider {
2363
margin: 0 2px;
2364
}
2365
}
2366
&.overlay-indicator {
2368
&:not(.fine-tune) slider {
2369
transition-property: background-color, min-height, min-width;
2370
}
2371
&:not(.dragging):not(.hovering) {
2373
border-color: transparent;
2374
background-color: transparent;
2375
slider {
2377
min-width: 4px;
2378
min-height: 4px;
2379
margin: 4px - 1px;
2380
border: 1px solid rgba($base, 0.3);
2381
}
2382
button {
2384
min-width: 4px;
2385
min-height: 4px;
2386
margin: 4px - 1px;
2387
border: 1px solid rgba($base, 0.3);
2388
border-radius: $circular-radius;
2389
background-color: $text-disabled;
2390
background-clip: padding-box;
2391
-gtk-icon-source: none;
2392
&:disabled {
2394
background-color: $text2-disabled;
2395
}
2396
}
2397
&.horizontal {
2399
slider {
2400
min-width: $_slider_min_length;
2401
}
2402
button {
2404
min-width: 8px;
2405
}
2406
}
2407
&.vertical {
2409
slider {
2410
min-height: $_slider_min_length;
2411
}
2412
button {
2414
min-height: 8px;
2415
}
2416
}
2417
}
2418
&.dragging,
2420
&.hovering {
2421
background-color: rgba($surface, 0.9);
2422
}
2423
}
2424
&.horizontal slider {
2426
min-width: $_slider_min_length;
2427
}
2428
&.vertical slider {
2430
min-height: $_slider_min_length;
2431
}
2432
// button styling
2434
button {
2435
@extend %button-flat-basic;
2436
min-width: 16px;
2438
min-height: 16px;
2439
padding: 0;
2440
border-radius: 0;
2441
}
2442
// button icons
2444
&.vertical {
2445
button {
2446
&.down {
2447
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2448
}
2449
&.up {
2451
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2452
}
2453
}
2454
}
2455
&.horizontal {
2457
button {
2458
&.down {
2459
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2460
}
2461
&.up {
2463
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
2464
}
2465
}
2466
}
2467
}
2468
/**********
2471
* Switch *
2472
**********/
2473
switch {
2474
transition: all $duration $ease-out;
2475
margin: $container-padding 0;
2476
padding: 0 2px;
2477
border: 5px solid transparent;
2478
border-radius: $circular-radius;
2479
background-color: $stroke;
2480
background-clip: padding-box;
2481
font-size: 0;
2482
&:checked {
2484
background-color: rgba($primary, 0.5);
2485
}
2486
&:disabled {
2488
opacity: 0.5;
2489
}
2490
// hide on/off icons for >=3.24.5
2492
image {
2493
margin: -8px;
2494
-gtk-icon-transform: scale(0);
2495
}
2496
slider {
2498
transition: all $duration $ease-out;
2499
min-width: 20px;
2500
min-height: 20px;
2501
margin: -3px -2px;
2502
border-radius: $circular-radius;
2503
outline: none;
2504
box-shadow: 0 0 0 10px transparent, $shadow-z1;
2505
background-color: $switch-surface;
2506
}
2507
&:hover slider {
2509
box-shadow: 0 0 0 10px $overlay-hover, $shadow-z1;
2510
}
2511
&:focus slider {
2513
box-shadow: 0 0 0 10px $overlay-focus, $shadow-z1;
2514
}
2515
&:checked slider {
2517
background-color: $primary;
2518
color: $primary;
2519
}
2520
row:selected & {
2522
}
2523
}
2524
/*************************
2527
* Check and Radio items *
2528
*************************/
2529
// draw regular check and radio items using our PNG assets
2530
// all assets are rendered from assets.svg. never add pngs directly
2531
// selection-mode
2533
.view.content-view.check:not(list),
2534
.content-view:not(list) .tile check {
2535
min-height: 40px;
2536
min-width: 40px;
2537
margin: 0;
2538
padding: 0;
2539
box-shadow: none;
2540
background-color: transparent;
2541
background-image: none;
2542
-gtk-icon-shadow: $icon-shadow-z2;
2543
&:hover,
2545
&:active {
2546
-gtk-icon-shadow: $icon-shadow-z4;
2547
}
2548
@each $class, $suffix in ("": "-unchecked", ":checked": "-checked") {
2550
&#{$class} {
2551
$_url: 'assets/selectionmode-checkbox#{$suffix}#{$asset-suffix}';
2552
-gtk-icon-source: -gtk-scaled(url("#{$_url}.png"), url("#{$_url}@2.png"));
2554
}
2555
}
2556
}
2557
checkbutton,
2559
radiobutton {
2560
outline: none;
2561
}
2562
checkbutton.text-button,
2564
radiobutton.text-button {
2565
// this is for a nice focus on check and radios text
2566
padding: 2px;
2567
label:not(:only-child) {
2569
margin: 0 4px;
2570
}
2571
}
2572
$check-radio-size: 40px;
2574
check,
2576
radio {
2577
min-height: 24px;
2578
min-width: 24px;
2579
margin: -($check-radio-size - 24px) / 2;
2580
padding: ($check-radio-size - 24px) / 2;
2581
border-radius: $circular-radius;
2582
@extend %ripple;
2584
@include ink-color($text2);
2585
&:checked,
2587
&:indeterminate {
2588
@include ink-color($primary);
2589
}
2590
&:disabled {
2592
color: $text2-disabled;
2593
}
2594
&:only-child {
2596
// margin: -12px;
2597
}
2598
popover modelbutton.flat & {
2600
&,
2601
&:focus,
2602
&:hover,
2603
&:focus:hover,
2604
&:active,
2605
&:disabled {
2606
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2607
box-shadow: none;
2608
background-image: none;
2609
}
2610
&.left:dir(rtl) {
2612
margin-left: -12px;
2613
margin-right: -4px;
2614
}
2615
&.right:dir(ltr) {
2617
margin-left: -4px;
2618
margin-right: -12px;
2619
}
2620
}
2621
menu menuitem & {
2623
transition: none;
2624
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2625
padding: 0;
2626
&:dir(ltr) {
2628
margin-right: 8px;
2629
}
2630
&:dir(rtl) {
2632
margin-left: 8px;
2633
}
2634
&,
2636
&:hover,
2637
&:disabled {
2638
box-shadow: none;
2639
}
2640
}
2641
}
2642
%check,
2644
check {
2645
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2646
&:checked {
2648
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg"));
2649
}
2650
&:indeterminate {
2652
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg"));
2653
}
2654
}
2655
%radio,
2657
radio {
2658
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2659
&:checked {
2661
// -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2662
}
2663
&:indeterminate {
2665
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg"));
2666
}
2667
border-image-slice: $check-radio-size / 2px;
2669
border-image-width: $check-radio-size / 2;
2670
$radio-indicator-size: 10px / $check-radio-size / 2;
2672
border-image-source:
2674
-gtk-gradient(
2675
radial,
2676
center center, 0,
2677
center center, .001,
2678
to($primary),
2679
to(transparent)
2680
);
2681
&:checked:not(:indeterminate) {
2683
border-image-source:
2684
-gtk-gradient(
2685
radial,
2686
center center, 0,
2687
center center, $radio-indicator-size,
2688
to($primary),
2689
to(transparent)
2690
);
2691
&:disabled {
2693
border-image-source:
2694
-gtk-gradient(
2695
radial,
2696
center center, 0,
2697
center center, $radio-indicator-size,
2698
to($text2-disabled),
2699
to(transparent)
2700
);
2701
}
2702
}
2703
}
2704
%small_check,
2706
menu menuitem check {
2707
min-height: 16px;
2708
min-width: 16px;
2709
border-radius: $corner-radius;
2710
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2711
&:checked {
2713
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg"));
2714
}
2715
&:indeterminate {
2717
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg"));
2718
}
2719
}
2720
%small_radio,
2722
menu menuitem radio {
2723
min-height: 16px;
2724
min-width: 16px;
2725
border-image: none;
2726
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2727
&:checked {
2729
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg"));
2730
}
2731
&:indeterminate {
2733
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg"));
2734
}
2735
}
2736
// ANIMATION:
2738
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2739
// the transformation is set on the active state and it get reset on the checked state.
2740
radio:not(:checked):active {
2741
// -gtk-icon-transform: scale(0);
2742
}
2743
// Otherwise, treeview.view styling will be applied...
2745
treeview.view check,
2746
treeview.view radio {
2747
padding: 0;
2748
color: $text2;
2749
&:checked,
2751
&:indeterminate {
2752
color: $primary;
2753
}
2754
&:disabled {
2756
color: $text2-disabled;
2757
}
2758
&,
2760
&:hover,
2761
&:selected,
2762
&:selected:hover {
2763
box-shadow: none;
2764
background-color: transparent;
2765
}
2766
}
2767
treeview.view radio:checked {
2769
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2770
border-image: none;
2771
}
2772
/************
2775
* GtkScale *
2776
************/
2777
scale {
2778
// sizing
2779
$_marks_length: 8px;
2780
$_marks_distance: 7px;
2781
$trough_size: 2px;
2783
$finetune_trough_size: 4px;
2784
$slider_size: 32px;
2786
$slider_margin: -($slider_size - $trough_size) / 2;
2788
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2789
$color_slider_margin: -($slider_size) * 3 / 4;
2791
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2792
min-height: $trough_size;
2794
min-width: $trough_size;
2795
&.horizontal {
2797
padding: ($medium-size - $trough_size) / 2 12px;
2798
}
2799
&.vertical {
2801
padding: 12px ($medium-size - $trough_size) / 2;
2802
}
2803
// the slider is inside the trough, so to have make it bigger there's a negative margin
2805
slider {
2806
min-height: $slider_size;
2807
min-width: $slider_size;
2808
margin: $slider_margin;
2809
}
2810
// click-and-hold the slider to activate
2812
&.fine-tune {
2813
&.horizontal {
2814
min-height: $finetune_trough_size;
2815
padding-top: ($medium-size - $finetune_trough_size) / 2;
2816
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2817
}
2818
&.vertical {
2820
min-width: $finetune_trough_size;
2821
padding-left: ($medium-size - $finetune_trough_size) / 2;
2822
padding-right: ($medium-size - $finetune_trough_size) / 2;
2823
}
2824
// to make the trough grow in fine-tune mode
2826
slider {
2827
margin: $finetune_slider_margin;
2828
}
2829
}
2830
// the backing bit
2832
trough {
2833
transition: background-color $duration $ease-out;
2834
outline: none;
2835
background-color: $stroke;
2836
&:disabled {
2838
background-color: $stroke-disabled;
2839
}
2840
}
2841
// the colored part of the backing bit
2843
highlight {
2844
transition: background-image $duration $ease-out;
2845
background-image: image($primary);
2846
&:disabled {
2848
background-color: $background;
2849
background-image: image($text2-disabled);
2850
}
2851
}
2852
// this is another differently styled part of the backing bit, the most relevant use case is for example
2854
// in media player to indicate how much video stream as been cached
2855
fill {
2856
transition: background-color $duration $ease-out;
2857
background-color: $stroke;
2858
&:disabled {
2860
background-color: transparent;
2861
}
2862
}
2863
slider {
2865
transition: background-color $duration $ease-out,
2866
background-size $ripple-fade-out-duration $ease-out,
2867
background-image $ripple-fade-out-opacity-duration $ease-out;
2868
background-repeat: no-repeat;
2869
background-position: center;
2870
background-size: auto, 1000% 1000%;
2871
border-radius: 50%;
2872
color: $primary;
2873
@each $class, $suffix in ("": "", ":disabled": "-disabled") {
2875
&#{$class} {
2876
$_url: 'assets/scale-slider#{$suffix}#{$asset-suffix}';
2877
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2879
radial-gradient(circle, transparent 10%, transparent 0%);
2880
}
2881
}
2882
&:hover {
2884
background-color: $overlay-hover;
2885
}
2886
&:focus {
2888
background-color: $overlay-focus;
2889
}
2890
&:active {
2892
$_url: 'assets/scale-slider#{$asset-suffix}';
2893
transition: background-color $duration $ease-out,
2895
background-size 0ms,
2896
background-image 0ms;
2897
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2898
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2899
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2900
background-size: auto, 0% 0%;
2901
}
2902
}
2903
marks,
2905
value {
2906
color: $text2;
2907
}
2908
indicator {
2910
background-color: $stroke;
2911
color: transparent;
2912
}
2913
//marks margins
2915
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
2916
(horizontal, bottom, bottom, top),
2917
(vertical, top, left, right),
2918
(vertical, bottom, right, left) {
2919
&.#{$scale_orient} marks {
2920
&.#{$marks_class} {
2921
margin-#{$marks_margin}: $_marks_distance;
2922
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2923
}
2924
}
2925
&.#{$scale_orient}.fine-tune marks {
2927
&.#{$marks_class} {
2928
margin-#{$marks_margin}: $_marks_distance - 1px;
2929
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2930
}
2931
}
2932
}
2933
&.horizontal {
2935
indicator {
2936
min-height: $_marks_length;
2937
min-width: 1px;
2938
}
2939
}
2940
&.vertical {
2942
indicator {
2943
min-height: 1px;
2944
min-width: $_marks_length;
2945
}
2946
}
2947
// *WARNING* scale with marks madness following
2949
@each $dir_class, $dir_infix in (".horizontal": "-horz", ".vertical": "-vert") {
2951
@each $marks_class, $marks_infix in (
2952
".marks-before:not(.marks-after)": "-marks-before",
2953
".marks-after:not(.marks-before)": "-marks-after"
2954
) {
2955
&#{$dir_class}#{$marks_class} {
2956
slider {
2957
@each $state_class, $state_infix in ("": "", ":disabled": "-disabled") {
2958
&#{$state_class} {
2959
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2960
background-image:
2962
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2963
radial-gradient(circle, transparent 10%, transparent 0%);
2964
}
2965
}
2966
&:active {
2968
$_scale_asset: 'assets/scale#{$dir_infix}#{$marks_infix}-slider#{$asset-suffix}';
2969
background-image:
2971
-gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2972
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2973
}
2974
}
2975
}
2976
}
2977
}
2978
&.color {
2980
min-height: 0;
2981
min-width: 0;
2982
&.horizontal {
2984
padding: 0 0 12px 0;
2985
slider {
2987
&:dir(ltr), &:dir(rtl) { // specificity bump
2988
margin-bottom: $color_slider_margin;
2989
margin-top: $color_marks_slider_margin;
2990
}
2991
}
2992
}
2993
&.vertical {
2995
&:dir(ltr) {
2996
padding: 0 0 0 12px;
2997
slider {
2999
margin-left: $color_slider_margin;
3000
margin-right: $color_marks_slider_margin;
3001
}
3002
}
3003
&:dir(rtl) {
3005
padding: 0 12px 0 0;
3006
slider {
3008
margin-right: $color_slider_margin;
3009
margin-left: $color_marks_slider_margin;
3010
}
3011
}
3012
}
3013
}
3014
}
3015
/*****************
3018
* Progress bars *
3019
*****************/
3020
progressbar {
3021
// sizing
3022
&.horizontal {
3023
trough,
3024
progress {
3025
min-height: $bar-size;
3026
}
3027
}
3028
&.vertical {
3030
trough,
3031
progress {
3032
min-width: $bar-size;
3033
}
3034
}
3035
// FIXME: insensitive state missing and some other state should be set probably
3037
color: $text2;
3038
font-size: smaller;
3039
trough {
3041
background-color: $stroke-disabled;
3042
}
3043
progress {
3045
background-color: $primary;
3046
}
3047
&.osd { // progressbar.osd used for epiphany page loading progress
3049
// min-width: $bar-size;
3050
// min-height: $bar-size;
3051
// background-color: transparent;
3052
trough {
3054
// background-color: transparent;
3055
}
3056
progress {
3058
// background-color: $primary;
3059
}
3060
}
3061
// makes the progress indicator disappear, when the fraction is 0
3063
trough.empty progress {
3064
all: unset;
3065
}
3066
}
3067
/*************
3070
* Level Bar *
3071
*************/
3072
levelbar {
3073
&.horizontal {
3074
block {
3075
min-height: $bar-size;
3076
}
3077
&.discrete block {
3079
min-width: $medium-size;
3080
&:not(:last-child) {
3082
margin-right: 2px;
3083
}
3084
}
3085
}
3086
&.vertical {
3088
block {
3089
min-width: $bar-size;
3090
}
3091
&.discrete block {
3093
min-height: $medium-size;
3094
&:not(:last-child) {
3096
margin-bottom: 2px;
3097
}
3098
}
3099
}
3100
// imitate the entry style
3102
trough {
3103
// padding: 2px;
3104
// border-radius: $corner-radius;
3105
// box-shadow: $shadow-z1;
3106
// background-color: $base;
3107
&:disabled {
3109
// background-color: $base-alt;
3110
}
3111
}
3112
block {
3114
&.low {
3115
background-color: $warning;
3116
}
3117
&.high,
3119
&:not(.empty) {
3120
background-color: $primary;
3121
}
3122
&.full {
3124
background-color: $success;
3125
}
3126
&.empty {
3128
background-color: $stroke-disabled;
3129
}
3130
}
3131
}
3132
/****************
3135
* Print dialog *
3136
*****************/
3137
printdialog {
3138
paper {
3139
padding: 0;
3140
border: 1px solid $divider;
3141
background-color: $base;
3142
color: $text;
3143
}
3144
.dialog-action-box {
3146
margin: 12px;
3147
}
3148
}
3149
/**********
3152
* Frames *
3153
**********/
3154
frame > border,
3155
.frame {
3156
margin: 0;
3157
padding: 0;
3158
border: 1px solid $divider;
3159
border-radius: 0;
3160
box-shadow: none;
3161
&.flat {
3163
border-style: none;
3164
}
3165
}
3166
// for backward compatibility
3168
frame.flat > border {
3169
border-style: none;
3170
}
3171
actionbar > revealer > box {
3173
padding: $container-padding;
3174
border-top: 1px solid $divider;
3175
background-color: $base;
3176
background-clip: border-box;
3177
button:not(.suggested-action):not(.destructive-action) {
3179
@extend %button-flat;
3180
}
3181
.linked:not(.vertical) > entry:not(:only-child) {
3183
border-radius: $corner-radius $corner-radius 0 0;
3184
}
3185
}
3186
scrolledwindow {
3188
viewport.frame { // avoid double borders when viewport inside scrolled window
3189
border-style: none;
3190
}
3191
// This is used when content is touch-dragged past boundaries.
3193
// draws a box on top of the content, the size changes programmatically.
3194
@at-root overshoot {
3195
&.top { @include overshoot(top); }
3196
&.bottom { @include overshoot(bottom); }
3198
&.left { @include overshoot(left); }
3200
&.right { @include overshoot(right); }
3202
}
3203
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
3205
@at-root undershoot {
3206
&.top { @include undershoot(top); }
3207
&.bottom { @include undershoot(bottom); }
3209
&.left { @include undershoot(left); }
3211
&.right { @include undershoot(right); }
3213
}
3214
@at-root junction { // the small square between two scrollbars
3216
border-style: solid none none solid;
3217
border-width: 1px;
3218
border-color: $divider;
3219
background-color: $base;
3220
&:dir(rtl) {
3222
border-style: solid solid none none;
3223
}
3224
}
3225
}
3226
// vbox and hbox separators
3228
separator {
3229
min-width: 1px;
3230
min-height: 1px;
3231
background-color: $divider;
3232
}
3233
%hide_separators {
3235
min-width: 0;
3236
min-height: 0;
3237
background-color: transparent;
3238
}
3239
/*********
3242
* Lists *
3243
*********/
3244
list {
3245
border-color: $divider;
3246
background-color: $base;
3247
row {
3249
padding: 2px;
3250
}
3251
}
3252
row {
3254
&.activatable {
3255
@extend %ripple;
3256
@include ink-color($text, $fg: false);
3257
@include list-item;
3258
// this is for indicathing which row generated a popover
3260
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3261
&.has-open-popup {
3262
background-color: $overlay-checked;
3263
}
3264
}
3265
&:selected {
3267
@extend %selected_items;
3268
@include ink-color($primary, $fg: false);
3270
}
3271
}
3272
/*********************
3275
* App Notifications *
3276
*********************/
3277
.app-notification {
3278
// @extend %osd;
3279
@extend %toolbar-osd;
3281
margin: 8px;
3283
button {
3285
@extend %button-flat;
3286
&.text-button:not(:disabled) {
3288
@include ink-color($primary);
3289
}
3290
}
3291
&.frame,
3293
border {
3294
border-style: none;
3295
}
3296
}
3297
/*************
3300
* Expanders *
3301
*************/
3302
expander {
3303
title > arrow {
3304
transition: all $duration $ease-out;
3305
min-width: 16px;
3306
min-height: 16px;
3307
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
3308
-gtk-icon-transform: rotate(-90deg);
3309
&:dir(rtl) {
3311
-gtk-icon-transform: rotate(90deg);
3312
}
3313
&:checked {
3315
-gtk-icon-transform: unset;
3316
}
3317
color: $text2;
3319
&:hover,
3321
&:active {
3322
color: $text;
3323
}
3324
&:disabled {
3326
color: $text2-disabled;
3327
}
3328
}
3329
}
3330
/************
3333
* Calendar *
3334
************/
3335
calendar {
3336
padding: 1px;
3337
border: 1px solid $divider;
3338
color: $text;
3339
&:disabled {
3341
color: $text-disabled;
3342
}
3343
&:selected {
3345
@extend %selected_items;
3346
border-radius: $corner-radius + 1px;
3348
}
3349
&.header {
3351
border-style: none none solid;
3352
border-color: $divider;
3353
border-radius: 0;
3354
}
3355
&.button {
3357
border-radius: $corner-radius + 1px;
3358
color: $text2;
3359
&:hover {
3361
background-image: image($overlay-hover);
3362
}
3363
&:disabled {
3365
color: $text2-disabled;
3366
}
3367
}
3368
&.highlight {
3370
color: $text2;
3371
font-weight: 500;
3372
}
3373
&:indeterminate {
3375
color: $text2-disabled;
3376
}
3377
}
3378
/***********
3381
* Dialogs *
3382
***********/
3383
messagedialog { // Message Dialog styling
3384
&.background {
3385
background-color: $surface;
3386
}
3387
.titlebar {
3389
min-height: $small-size;
3390
border-style: none;
3391
box-shadow: inset 0 1px highlight($surface);
3392
background-color: $surface;
3393
color: $text;
3394
&:backdrop {
3396
background-color: $surface;
3397
color: $text2;
3398
}
3399
}
3400
&.csd { // rounded bottom border styling for csd version
3402
&.background {
3403
// bigger radius for better antialiasing
3404
border-bottom-left-radius: $corner-radius;
3405
border-bottom-right-radius: $corner-radius;
3406
}
3407
}
3408
// Hint text
3410
box.vertical > label + label {
3411
color: $text2;
3412
}
3413
.dialog-action-box {
3415
margin-top: -$container-padding;
3416
// padding: $container-padding;
3417
button:not(:last-child) {
3419
margin-right: $container-padding;
3420
}
3421
}
3422
}
3423
.dialog-action-box button {
3425
@extend %button-flat;
3426
&:not(:disabled) {
3428
@include ink-color($primary);
3429
}
3430
&.suggested-action:not(:disabled) {
3432
background-color: transparent;
3433
// @include ink-color($primary);
3434
}
3435
&.destructive-action:not(:disabled) {
3437
background-color: transparent;
3438
@include ink-color($error);
3439
}
3440
}
3441
filechooser {
3443
.dialog-action-box {
3444
border-top: 1px solid $divider;
3445
}
3446
#pathbarbox {
3448
border-bottom: 1px solid $divider;
3449
background-color: $background;
3450
> stack > box > button { // The new folder button
3452
@extend %button-flat;
3453
border-radius: $circular-radius;
3455
}
3456
}
3457
}
3458
filechooserbutton:drop(active) {
3460
// box-shadow: none;
3461
}
3462
/***********
3465
* Sidebar *
3466
***********/
3467
.sidebar {
3468
border-style: none;
3469
background-color: $base-alt;
3470
&:not(separator) {
3472
@at-root %sidebar_left,
3473
&:dir(ltr),
3474
&.left,
3475
&.left:dir(rtl) {
3476
border-right: 1px solid $divider;
3477
border-left-style: none;
3478
}
3479
@at-root %sidebar_right,
3481
&:dir(rtl),
3482
&.right {
3483
border-left: 1px solid $divider;
3484
border-right-style: none;
3485
}
3486
}
3487
list {
3489
background-color: transparent;
3490
}
3491
paned & {
3493
&,
3494
&.left,
3495
&.right,
3496
&.left:dir(rtl),
3497
&:dir(rtl),
3498
&:dir(ltr) {
3499
border-style: none;
3500
}
3501
}
3502
}
3503
stacksidebar.sidebar {
3505
& {
3506
&:dir(ltr),
3507
&.left,
3508
&.left:dir(rtl) {
3509
list {
3510
@extend %sidebar_left;
3511
}
3512
}
3513
&:dir(rtl),
3515
&.right {
3516
list {
3517
@extend %sidebar_right;
3518
}
3519
}
3520
}
3521
+ separator.vertical,
3523
separator.horizontal {
3524
@extend %hide_separators;
3525
}
3526
list {
3528
padding: 4px;
3529
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
3530
}
3531
row {
3533
min-height: 32px;
3534
padding: 0 8px - 6px;
3535
border-radius: $corner-radius;
3536
&:selected {
3538
font-weight: 500;
3539
@include ink-color($primary, $activated: true);
3540
}
3541
+ row {
3543
margin-top: 4px;
3544
}
3545
> label {
3547
padding-left: 6px;
3548
padding-right: 6px;
3549
}
3550
&.needs-attention > label {
3552
@extend %needs-attention;
3553
}
3554
}
3555
}
3556
separator.sidebar {
3558
background-color: $divider;
3559
&.selection-mode,
3561
.selection-mode & {
3562
// background-color: $divider;
3563
}
3564
}
3565
/****************
3568
* File chooser *
3569
****************/
3570
// dim the sidebar icons, see bug #786613 for details on this oddity
3571
row image.sidebar-icon {
3572
transition: color $duration $ease-out;
3573
color: $text2;
3574
&:disabled {
3576
color: $text2-disabled;
3577
}
3578
}
3579
placessidebar.sidebar {
3581
> viewport.frame {
3582
border-style: none;
3583
}
3584
list {
3586
padding: (4px - 3px) 0 4px;
3587
}
3588
row {
3590
// Needs overriding of the GtkListBoxRow padding
3591
min-height: 32px;
3592
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3593
padding: 0;
3594
border-radius: $corner-radius;
3595
// Using margins/padding directly in the SidebarRow
3597
// will make the animation of the new bookmark row jump
3598
> revealer {
3599
padding: 0 8px;
3600
}
3601
&:selected {
3603
font-weight: 500;
3604
@include ink-color($primary, $activated: true);
3605
image.sidebar-icon {
3607
color: $primary;
3608
}
3609
}
3610
&:disabled {
3612
color: $text-disabled;
3613
}
3614
image.sidebar-icon {
3616
&:dir(ltr) {
3617
padding-right: 8px;
3618
}
3619
&:dir(rtl) {
3621
padding-left: 8px;
3622
}
3623
}
3624
label.sidebar-label {
3626
&:dir(ltr) {
3627
padding-right: 2px;
3628
}
3629
&:dir(rtl) {
3631
padding-left: 2px;
3632
}
3633
}
3634
@at-root button.sidebar-button {
3636
@extend %button-flat-basic;
3637
@extend %button-small;
3638
}
3639
&.sidebar-placeholder-row {
3641
background-color: $overlay-hover;
3642
}
3643
&.sidebar-new-bookmark-row {
3645
color: $primary;
3646
image.sidebar-icon {
3648
color: $primary;
3649
}
3650
}
3651
}
3652
}
3653
placesview {
3655
.server-list-button {
3656
> image {
3657
-gtk-icon-transform: rotate(0turn);
3658
}
3659
&:checked > image {
3661
-gtk-icon-transform: rotate(-0.5turn);
3662
}
3663
}
3664
// this selects the "connect to server" label
3666
> actionbar > revealer > box > label {
3667
padding-left: 8px;
3668
padding-right: 8px;
3669
}
3670
}
3671
/*********
3674
* Paned *
3675
*********/
3676
paned {
3677
> separator {
3678
min-width: 1px;
3679
min-height: 1px;
3680
-gtk-icon-source: none; // defeats the ugly default handle decoration
3681
border-style: none; // just to be sure
3682
background-color: transparent;
3683
// workaround, using background istead of a border since the border will get rendered twice (?)
3684
background-image: image($divider);
3685
background-size: 1px 1px;
3686
background-clip: content-box; // avoids borders image being rendered twice (?)
3687
&.wide {
3689
min-width: 6px;
3690
min-height: 6px;
3691
background-color: $background;
3692
background-image: image($divider), image($divider);
3693
background-size: 1px 1px, 1px 1px;
3694
}
3695
}
3696
&.horizontal > separator {
3698
background-repeat: repeat-y;
3699
&:dir(ltr) {
3701
margin: 0 -8px 0 0;
3702
padding: 0 8px 0 0;
3703
background-position: left;
3704
}
3705
&:dir(rtl) {
3707
margin: 0 0 0 -8px;
3708
padding: 0 0 0 8px;
3709
background-position: right;
3710
}
3711
&.wide {
3713
margin: 0;
3714
padding: 0;
3715
background-repeat: repeat-y, repeat-y;
3716
background-position: left, right;
3717
}
3718
}
3719
&.vertical > separator {
3721
margin: 0 0 -8px 0;
3722
padding: 0 0 8px 0;
3723
background-repeat: repeat-x;
3724
background-position: top;
3725
&.wide {
3727
margin: 0;
3728
padding: 0;
3729
background-repeat: repeat-x, repeat-x;
3730
background-position: bottom, top;
3731
}
3732
}
3733
}
3734
/**************
3737
* GtkInfoBar *
3738
**************/
3739
infobar {
3740
border-style: none;
3741
&.info,
3743
&.question {
3744
border-bottom: 1px solid $divider;
3745
background-color: $base;
3746
button {
3748
@extend %button-flat;
3749
&.text-button:not(:disabled) {
3751
@include ink-color($primary);
3752
}
3753
}
3754
}
3755
&.warning {
3757
background-color: $warning;
3758
color: on($warning);
3759
button.flat {
3761
@include ink-color(on($warning));
3762
}
3763
selection {}
3765
*:link {
3767
color: on($warning);
3768
}
3769
}
3770
&.error {
3772
background-color: $error;
3773
color: on($error);
3774
button.flat {
3776
@include ink-color(on($error));
3777
}
3778
selection {}
3780
*:link {
3782
color: on($error);
3783
}
3784
}
3785
// Remove ugly hard-coded padding
3787
button label {
3788
margin: 0 -4px;
3789
}
3790
}
3791
/************
3794
* Tooltips *
3795
************/
3796
tooltip {
3797
&.background {
3798
// background-color needs to be set this way otherwise it gets drawn twice
3799
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3800
background-color: $tooltip;
3801
color: on($tooltip);
3802
}
3803
// padding: 4px; /* not working */
3805
border-radius: $corner-radius;
3806
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3807
&:not(.csd):not(.unity-csd) {
3809
// border: 1px solid $divider;
3810
// border-radius: $corner-radius + 1px;
3811
// background-clip: $background-clip-extra;
3812
}
3813
// FIXME: we need a border or tooltips vanish on black background.
3815
decoration {
3816
background-color: transparent;
3817
}
3818
> box {
3820
margin: -6px; // Remove hard-coded 6px margin
3821
min-height: 32px - 4px * 2;
3822
padding: 4px 8px;
3823
}
3824
.dim-label {
3826
color: on($tooltip, text2);
3827
}
3828
* {
3830
// workaround for Eclipse.
3831
// do not include any declaration here.
3832
}
3833
}
3834
/*****************
3837
* Color Chooser *
3838
*****************/
3839
colorswatch {
3840
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3841
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3842
// applied to the overlay box.
3843
// base color corners rounding
3845
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3846
// sports a bigger radius.
3847
// nth-child is needed by the custom color strip.
3848
&.top {
3850
border-top-left-radius: $corner-radius + 0.5px;
3851
border-top-right-radius: $corner-radius + 0.5px;
3852
overlay {
3854
border-top-left-radius: $corner-radius;
3855
border-top-right-radius: $corner-radius;
3856
}
3857
}
3858
&.bottom {
3860
border-bottom-left-radius: $corner-radius + 0.5px;
3861
border-bottom-right-radius: $corner-radius + 0.5px;
3862
overlay {
3864
border-bottom-left-radius: $corner-radius;
3865
border-bottom-right-radius: $corner-radius;
3866
}
3867
}
3868
&.left,
3870
&:first-child:not(.top) {
3871
border-top-left-radius: $corner-radius + 0.5px;
3872
border-bottom-left-radius: $corner-radius + 0.5px;
3873
overlay {
3875
border-top-left-radius: $corner-radius;
3876
border-bottom-left-radius: $corner-radius;
3877
}
3878
}
3879
&.right,
3881
&:last-child:not(.bottom) {
3882
border-top-right-radius: $corner-radius + 0.5px;
3883
border-bottom-right-radius: $corner-radius + 0.5px;
3884
overlay {
3886
border-top-right-radius: $corner-radius;
3887
border-bottom-right-radius: $corner-radius;
3888
}
3889
}
3890
&.dark {
3892
color: on(dark);
3893
}
3894
&.light {
3896
color: on(light);
3897
}
3898
overlay {
3900
transition: $transition-shadow;
3901
box-shadow: $shadow-z1;
3902
&:drop(active),
3904
&:hover {
3905
box-shadow: $shadow-z3;
3906
}
3907
}
3908
&#add-color-button {
3910
border-radius: $corner-radius $corner-radius 0 0;
3911
color: $text;
3912
&:only-child {
3914
border-radius: $corner-radius;
3915
}
3916
overlay {
3918
background-color: $surface;
3919
}
3920
}
3921
&:disabled {
3923
opacity: 0.5;
3924
overlay {
3926
box-shadow: none;
3927
}
3928
}
3929
row:selected & {
3931
}
3932
&#editor-color-sample {
3934
border-radius: $corner-radius + 0.5px;
3935
overlay {
3937
border-radius: $corner-radius;
3938
&:hover {
3940
// box-shadow: $shadow-z1;
3941
}
3942
}
3943
}
3944
}
3945
// colorscale popup
3947
colorchooser .popover.osd {
3948
transition: $transition-shadow;
3949
border-radius: $corner-radius;
3950
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
3951
background-color: $surface;
3952
&:backdrop {
3954
box-shadow: $shadow-z2, inset 0 1px highlight($surface);
3955
}
3956
}
3957
/********
3960
* Misc *
3961
********/
3962
// content view (grid/list)
3963
.content-view {
3964
background-color: $background;
3965
&:hover {
3967
// -gtk-icon-effect: highlight;
3968
}
3969
rubberband,
3971
.rubberband {
3972
@extend rubberband;
3973
}
3974
}
3975
.scale-popup {
3977
.osd & {
3978
// @extend %osd;
3979
button.flat { // FIXME: quick hack, redo properly
3981
}
3982
}
3983
button { // +/- buttons on GtkVolumeButton popup
3985
}
3986
}
3987
/**********************
3990
* Window Decorations *
3991
**********************/
3992
decoration {
3993
transition: $transition-shadow;
3994
border-radius: $corner-radius $corner-radius 0 0;
3995
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
3996
// FIXME rationalize shadows
3998
// this is used for the resize cursor area
4000
margin: 8px;
4001
&:backdrop {
4003
// the transparent shadow here is to enforce that the shadow extents don't
4004
// change when we go to backdrop, to prevent jumping windows.
4005
// The biggest shadow should be in the same order then in the active state
4006
// or the jumping will happen during the transition.
4007
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
4008
}
4009
.maximized &,
4011
.fullscreen &,
4012
.tiled &,
4013
.tiled-top &,
4014
.tiled-right &,
4015
.tiled-bottom &,
4016
.tiled-left & {
4017
border-radius: 0;
4018
}
4019
.popup & {
4021
box-shadow: none;
4022
}
4023
// server-side decorations as used by mutter
4025
.ssd & {
4026
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); // just doing borders, wm draws actual shadows
4027
}
4028
.csd.popup & {
4030
border-radius: $corner-radius;
4031
box-shadow: $shadow-z4;
4032
}
4033
tooltip.csd & {
4035
border-radius: $corner-radius;
4036
box-shadow: none;
4037
}
4038
messagedialog.csd & {
4040
border-radius: $corner-radius;
4041
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4042
&:backdrop {
4044
// box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
4045
}
4046
}
4047
.solid-csd & {
4049
margin: 0;
4050
padding: 2px;
4051
border-radius: 0;
4052
box-shadow: none;
4053
box-shadow: inset 0 1px highlight($titlebar);
4054
background-color: $titlebar;
4055
&:backdrop {
4057
background-color: $titlebar-backdrop;
4058
}
4059
}
4060
}
4061
// Window Close button
4063
button.titlebutton {
4064
border-radius: $circular-radius;
4065
.selection-mode & {
4067
}
4068
}
4069
// catch all extend :)
4072
%selected_items {
4074
background-color: $overlay-selected;
4075
}
4076
.monospace {
4078
font-family: monospace;
4079
}
4080
/**********************
4083
* Touch Copy & Paste *
4084
**********************/
4085
// touch selection handlebars for the Popover.osd above
4086
cursor-handle {
4087
color: $primary;
4088
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
4089
&.top:dir(ltr),
4091
&.bottom:dir(rtl) {
4092
-gtk-icon-transform: rotate(90deg);
4093
}
4094
&.bottom:dir(ltr),
4096
&.top:dir(rtl) {
4097
-gtk-icon-transform: unset;
4098
}
4099
&.insertion-cursor:dir(ltr),
4101
&.insertion-cursor:dir(rtl) {
4102
padding-top: 6px;
4103
-gtk-icon-transform: rotate(45deg);
4104
}
4105
}
4106
// Decouple the font of context menus from their entry/textview
4108
.context-menu {
4109
font: initial;
4110
}
4111
// shortcut window keys
4113
.keycap {
4114
min-width: 28px - 8px * 2;
4115
min-height: 28px - 2px;
4116
margin-top: 2px;
4117
padding-bottom: 2px;
4118
padding-left: 8px;
4119
padding-right: 8px;
4120
border: solid 1px $divider;
4122
border-radius: $corner-radius + 1px;
4123
box-shadow: inset 0 -2px $divider;
4124
background-color: $surface;
4125
color: $text;
4126
font-size: smaller;
4127
}
4128
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
4130
caret-color: $primary;
4131
}
4132
stackswitcher button.text-button { // FIXME aggregate with buttons
4134
min-width: 100px;
4135
}
4136
stackswitcher button.circular,
4138
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
4139
min-width: $medium-size;
4140
min-height: $medium-size;
4141
padding: 0;
4142
}
4143
/*************
4146
* App Icons *
4147
*************/
4148
// Outline for low res icons
4149
.lowres-icon {
4150
// -gtk-icon-shadow: none;
4151
}
4152
// Drapshadow for large icons
4154
.icon-dropshadow {
4155
// -gtk-icon-shadow: none;
4156
}
4157
/*********
4160
* Emoji *
4161
*********/
4162
popover.emoji-picker {
4163
padding: 0;
4164
entry {
4166
border-bottom: 1px solid $divider;
4167
border-image: none;
4168
border-radius: 0;
4169
box-shadow: none;
4170
background-color: transparent;
4171
}
4172
scrolledwindow {
4174
border-bottom: 1px solid $divider;
4175
}
4176
}
4177
button.emoji-section {
4179
margin: 4px;
4180
&:checked {
4182
// background-color: transparent;
4183
@include ink-color($primary, $activated: true);
4184
}
4185
&:not(:last-child) {
4187
margin-right: 0;
4188
}
4189
}
4190
popover.emoji-picker .emoji {
4192
min-width: 3em;
4193
min-height: 3em;
4194
padding: 0 8px;
4195
// font-size: larger;
4196
widget {
4198
transition: $transition;
4199
border-radius: $corner-radius;
4200
&:hover {
4202
background-color: $overlay-hover;
4203
}
4204
}
4205
}
4206
popover.emoji-completion {
4208
padding: 8px 0;
4209
arrow {
4211
border: none;
4212
background: none;
4213
}
4214
.emoji-completion-row {
4216
min-height: $menuitem-size;
4217
padding: 0 12px;
4218
}
4219
.emoji:hover {
4221
background-color: $overlay-hover;
4222
}
4223
}
4224