ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error_color;
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: 4;
21
-GtkDialog-action-area-border: 0;
22
// We use the outline properties to signal the focus properties
24
// to the adwaita engine: using real CSS properties is faster,
25
// and we don't use any outlines for now.
26
outline-style: solid;
28
outline-width: 2px;
29
outline-color: transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: $material_radius;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
notebook:focus tab,
37
*:focus { outline-color: $checked_overlay_color; }
38
/***************
41
* Base States *
42
***************/
43
.background {
44
background-color: $bg_color;
45
color: $fg_color;
46
}
47
/*
49
These wildcard seems unavoidable, need to investigate.
50
Wildcards are bad and troublesome, use them with care,
51
or better, just don't.
52
Everytime a wildcard is used a kitten dies, painfully.
53
*/
54
*:disabled { -gtk-icon-effect: dim; }
56
.gtkstyle-fallback {
58
background-color: $bg_color;
59
color: $fg_color;
60
&:hover {
62
background-color: darken($bg_color, 5%);
63
color: $fg_color;
64
}
65
&:active {
67
background-color: darken($bg_color, 10%);
68
color: $fg_color;
69
}
70
&:disabled {
72
background-color: $bg_color;
73
color: $disabled_fg_color;
74
}
75
&:selected {
77
background-color: $primary_color;
78
color: $inverse_fg_color;
79
}
80
}
81
.view {
83
// @extend row.activatable;
84
background-color: $base_color;
86
color: $fg_color;
87
&:hover { box-shadow: inset 0 0 0 9999px $hover_overlay_color; }
89
&:selected:hover { box-shadow: inset 0 0 0 9999px rgba($primary_color, 0.08); }
91
&:disabled { color: $disabled_fg_color; }
93
&:hover, &:selected { border-radius: $material_radius; }
95
selection,
97
&:selected { @extend %selected_items; }
98
}
99
textview {
101
// FIXME: we need to override background-color to ensure text rendering
102
text { background-color: $base_color; }
103
border {
105
background-color: $alt_base_color;
106
color: $secondary_fg_color; // FIXME: not working
107
}
108
}
109
// iconview { @extend .view; }
111
.rubberband,
113
rubberband {
114
border: 1px solid $alt_primary_color;
115
background-color: rgba($alt_primary_color, 0.3);
116
}
117
flowbox {
119
rubberband { @extend rubberband; }
120
flowboxchild {
122
padding: 4px;
123
border-radius: $material_radius;
124
&:selected { @extend %selected_items; }
126
}
127
}
128
.content-view .tile {
130
// margin: 2px;
131
// padding: 0;
132
// border-radius: 0;
133
// background-color: black;
134
&:selected {
136
background-color: transparent;
137
color: inherit;
138
}
139
}
140
label {
142
caret-color: currentColor; // this shouldn't be needed.
143
&.separator {
145
@extend .dim-label;
146
color: $fg_color;
148
}
149
selection { @extend %selected_items; }
151
&:disabled {
153
color: $disabled_fg_color;
154
// selection { @extend %selected_items:disabled; }
156
headerbar &,
158
tab &,
159
button & { color: inherit; }
160
}
161
}
162
.dim-label { opacity: 0.6; }
164
assistant {
166
.sidebar {
167
padding: 4px 0;
168
// background-color: $base_color;
169
// border-top: 1px solid $border_color;
170
}
171
// &.csd .sidebar { border-top-style: none; }
173
.sidebar label {
175
min-height: $medium_size;
176
padding: 0 12px;
177
color: $disabled_fg_color;
178
font-weight: 500;
179
&.highlight { color: $fg_color; }
181
}
182
}
183
// %osd, .osd { opacity: 0.9; }
185
/*********************
188
* Spinner Animation *
189
*********************/
190
@keyframes spin {
191
to { -gtk-icon-transform: rotate(1turn); }
192
}
193
spinner {
195
background: none;
196
opacity: 0; // non spinning spinner makes no sense
197
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
198
&:checked {
200
opacity: 1;
201
animation: spin 1s linear infinite;
202
&:disabled { opacity: 0.5; }
204
}
205
}
206
/****************
209
* Text Entries *
210
****************/
211
%entry,
212
entry {
213
%entry_basic, & {
214
min-height: $medium_size;
215
padding: 0 8px;
216
border-radius: $material_radius $material_radius 0 0;
217
caret-color: currentColor; // this shouldn't be needed.
218
@include entry(normal);
220
&:focus { @include entry(focus); }
222
&:disabled { @include entry(disabled); }
224
&.flat {
226
min-height: 0;
227
padding: 2px;
228
border-radius: 0;
229
background-color: transparent;
230
}
231
image { // icons inside the entry
233
// @extend %simple_flat_button;
234
// min-height: $small_size;
236
// min-width: $small_size;
237
// border-radius: $circular_radius;
238
// -gtk-outline-radius: $circular_radius;
239
color: $secondary_fg_color;
240
&:hover, &:active { color: $fg_color; }
242
&:disabled { color: $disabled_fg_color; }
244
&.left {
246
margin-left: ($medium_size - 16px) / 2 - 8px;
247
margin-right: 6px;
248
}
249
&.right {
251
margin-left: 6px;
252
margin-right: ($medium_size - 16px) / 2 - 8px;
253
}
254
}
255
undershoot {
257
&.left { @include undershoot(left); }
258
&.right { @include undershoot(right); }
260
}
261
selection { @extend %selected_items; }
263
// entry error and warning style
265
@each $e_type, $e_color in (error, $error_color),
266
(warning, $warning_color) {
267
&.#{$e_type} {
268
@include entry(normal, $e_color);
269
&:focus { @include entry(focus, $e_color); }
271
&:disabled { @include entry(disabled, $e_color); }
273
}
274
}
275
&:drop(active) {
277
// box-shadow: inset 0 0 0 2px $primary_color;
278
}
279
.osd & {
281
}
282
}
283
progress {
285
margin: 2px (2px - 8px);
286
border-bottom: 2px solid $primary_color;
287
background-color: transparent;
288
}
289
// linked entries
291
.linked:not(.vertical) > & { @extend %linked_entry; }
292
// Vertically linked entries
294
.linked.vertical > & { @extend %linked_vertical_entry; }
295
}
296
%entry_raised {
298
border-radius: $material_radius;
299
@include entry(raised-normal);
301
&:focus { @include entry(raised-focus); }
303
&:disabled { @include entry(raised-disabled); }
305
// entry error and warning style
307
@each $e_type, $e_color in (error, $error_color),
308
(warning, $warning_color) {
309
&.#{$e_type} {
310
@include entry(raised-normal, $e_color);
311
&:focus { @include entry(raised-focus, $e_color); }
313
&:disabled { @include entry(raised-disabled, $e_color); }
315
image {
317
color: $inverse_secondary_fg_color;
318
&:hover, &:active { color: $inverse_fg_color; }
320
&:disabled { color: $inverse_disabled_fg_color; }
322
}
323
}
324
}
325
}
326
treeview entry {
328
&.flat, & {
329
background-color: $base_color;
330
&, &:focus {
332
border-image: none;
333
box-shadow: none;
334
}
335
}
336
}
337
.entry-tag {
339
margin: 2px;
340
border-radius: $circular_radius;
341
box-shadow: none;
342
background-color: $divider_color;
343
color: $fg_color;
344
&:hover { background-image: image($divider_color); }
346
// side margins: compensate the entry padding with a negative margin
348
// then the negative margin itself
349
:dir(ltr) & {
350
margin-left: 4px;
351
margin-right: 0;
352
padding-left: 12px;
353
padding-right: 8px;
354
}
355
:dir(rtl) & {
357
margin-left: 0;
358
margin-right: 4px;
359
padding-left: 8px;
360
padding-right: 12px;
361
}
362
// seems any sizing doesn't work
364
&.button {
365
box-shadow: none;
366
background-color: transparent;
367
&:not(:hover):not(:active) { color: $secondary_fg_color; }
369
}
370
}
371
/***********
374
* Buttons *
375
***********/
376
// stuff for .needs-attention
377
@keyframes needs_attention {
378
from {
379
background-image: -gtk-gradient(radial,
380
center center, 0,
381
center center, 0.001,
382
to($primary_color),
383
to(transparent));
384
}
385
to {
387
background-image: -gtk-gradient(radial,
388
center center, 0,
389
center center, 0.5,
390
to($primary_color),
391
to(transparent));
392
}
393
}
394
%button,
396
button {
397
@at-root %button_basic, & {
398
min-height: 24px;
399
min-width: 16px;
400
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
401
border-radius: $material_radius;
402
font-weight: 500;
403
@include button(normal);
405
&:hover { @include button(hover); }
407
&:active { @include button(active); }
409
&:disabled { @include button(disabled); }
411
&:checked { @include button(checked); }
413
&:checked:disabled { @include button(checked-disabled); }
415
@at-root %flat_button, &.flat {
417
@at-root %simple_flat_button, & {
418
@include button(flat-normal);
419
&:hover { @include button(flat-hover); }
421
&:active { @include button(flat-active); }
423
&:disabled { @include button(flat-disabled); }
425
}
426
&:checked { @include button(flat-checked); }
428
&:checked:disabled { @include button(flat-checked-disabled); }
430
}
431
&.text-button {
433
padding-left: 16px;
434
padding-right: 16px;
435
}
436
&.image-button {
438
min-width: 24px;
439
padding: ($medium_size - 24px) / 2;
440
@extend %circular_button;
442
}
443
&.text-button.image-button {
445
border-radius: $material_radius;
446
-gtk-outline-radius: $material_radius;
447
label {
449
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
450
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
452
}
453
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
455
}
456
.linked > & { @extend %linked; }
458
.linked.vertical > & { @extend %linked_vertical; }
460
.linked > &.flat,
462
.linked.vertical > &.flat {
463
border-radius: $material_radius;
464
&.image-button { @extend %circular_button; }
466
&.text-button.image-button {
468
border-radius: $material_radius;
469
-gtk-outline-radius: $material_radius;
470
}
471
}
472
&:drop(active) {
474
// box-shadow: inset 0 0 0 2px $primary_color;
475
}
476
}
477
@at-root %button_selected {
479
&.flat {
480
color: $inverse_secondary_fg_color;
481
&:hover, &:active { color: $inverse_fg_color; }
483
&:disabled { color: $inverse_disabled_secondary_fg_color; }
485
&:checked {
487
background-color: $inverse_track_color;
488
color: $inverse_fg_color;
489
}
490
&:checked:disabled {
492
background-color: $inverse_divider_color;
493
color: $inverse_disabled_fg_color;
494
}
495
}
496
}
497
// big standalone buttons like in Documents pager
499
&.osd {
500
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
501
&.image-button { padding: ($large_size - 24px) / 2; }
503
&:disabled { opacity: 0; }
505
}
506
// overlay / OSD style
508
@at-root %osd_button,
509
.osd & {
510
}
511
// Suggested and Destructive Action buttons
513
@each $b_type, $b_color in (suggested-action, $suggested_color),
514
(destructive-action, $destructive_color) {
515
&.#{$b_type} {
516
background-color: $b_color;
517
color: $inverse_fg_color;
518
&:disabled { @include button(disabled); }
520
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage(0.3)); }
522
&.flat {
524
background-color: transparent;
525
color: $b_color;
526
&:disabled { @include button(flat-disabled); }
528
&:checked { background-color: rgba($b_color, 0.3); }
530
}
531
.osd & {
533
}
534
}
535
}
536
.stack-switcher > & {
538
// to position the needs attention dot, padding is added to the button
539
// child, a label needs just lateral padding while an icon needs vertical
540
// padding added too.
541
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
543
> label {
545
padding-left: 6px; // label padding
546
padding-right: 6px; //
547
}
548
> image {
550
padding-left: 6px; // image padding
551
padding-right: 6px; //
552
padding-top: 3px; //
553
padding-bottom: 3px; //
554
}
555
&.text-button {
557
// compensate text-button paddings
558
padding-left: 16px - 6px;
559
padding-right: 16px - 6px;
560
}
561
&.image-button {
563
// we want image buttons to have a 1:1 aspect ratio, so compensation
564
// of the padding added to the GtkImage is needed
565
padding-left: ($medium_size - 16px) / 2 - 6px;
566
padding-right: ($medium_size - 16px) / 2 - 6px;
567
}
568
&.needs-attention {
570
> label,
571
> image { @extend %needs_attention; }
572
&:checked {
574
> label,
575
> image {
576
animation: none;
577
background-image: none;
578
}
579
}
580
}
581
}
582
// hide separators
584
&.font,
585
&.file { separator { @extend %hide_separators; }}
586
// &.font { > box > box > label { font-weight: bold; }}
588
// inline-toolbar buttons
590
.inline-toolbar & {
591
// @extend %button_basic.flat;
592
&:not(.text-button) { @extend %circular_button; }
594
}
595
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
597
@at-root %circular_button,
599
&.close,
600
&.circular { // The Bloody Circul Button
601
border-radius: $circular_radius;
602
-gtk-outline-radius: $circular_radius;
603
// label { padding: 0; }
605
}
606
@at-root %small_button {
608
min-height: $small_size;
609
min-width: $small_size;
610
padding: 0;
611
border-radius: $circular_radius;
612
-gtk-outline-radius: $circular_radius;
613
}
614
}
615
%needs_attention {
617
animation: needs_attention $longer_duration $deceleration_curve forwards;
618
background-repeat: no-repeat;
619
background-position: right 3px;
620
background-size: 6px 6px;
621
&:dir(rtl) { background-position: left 3px; }
623
}
624
// all the following is for the +|- buttons on inline toolbars, that way
626
// should really be deprecated...
627
.inline-toolbar toolbutton > button { // redefining the button look is
628
// needed since those are flat...
629
}
630
// More inline toolbar buttons
632
toolbar.inline-toolbar toolbutton {
633
// > button.flat { @extend %linked_middle; }
634
// &:first-child > button.flat { @extend %linked:first-child; }
636
// &:last-child > button.flat { @extend %linked:last-child; }
638
// &:only-child > button.flat { @extend %linked:only-child; }
640
}
641
%linked_middle {
643
border-radius: 0;
644
-gtk-outline-radius: $material_radius;
645
}
646
%linked {
648
@extend %linked_middle;
649
&:first-child {
651
border-top-left-radius: $material_radius;
652
border-bottom-left-radius: $material_radius;
653
}
654
&:last-child {
656
border-top-right-radius: $material_radius;
657
border-bottom-right-radius: $material_radius;
658
}
659
&:only-child {
661
border-radius: $material_radius;
662
}
663
}
664
%linked_vertical_middle {
666
border-radius: 0;
667
-gtk-outline-radius: $material_radius;
668
}
669
%linked_vertical {
671
@extend %linked_vertical_middle;
672
&:first-child {
674
border-top-left-radius: $material_radius;
675
border-top-right-radius: $material_radius;
676
}
677
&:last-child {
679
border-bottom-left-radius: $material_radius;
680
border-bottom-right-radius: $material_radius;
681
}
682
&:only-child {
684
border-radius: $material_radius;
685
}
686
}
687
%linked_entry {
689
@extend %linked_middle;
690
&:first-child {
692
border-radius: $material_radius 0 0 0;
693
}
694
&:last-child {
696
border-radius: 0 $material_radius 0 0;
697
}
698
&:only-child {
700
border-radius: $material_radius $material_radius 0 0;
701
}
702
}
703
%linked_vertical_entry {
705
@extend %linked_vertical_middle;
706
&:first-child {
708
border-radius: $material_radius $material_radius 0 0;
709
}
710
&:last-child {
712
border-radius: 0;
713
}
714
&:only-child {
716
border-radius: $material_radius $material_radius 0 0;
717
}
718
}
719
/* menu buttons */
721
modelbutton.flat,
722
.menuitem.button.flat {
723
min-height: $menuitem_size;
724
padding: 0 8px;
725
border-radius: $material_radius;
726
color: inherit;
727
@extend %simple_flat_button;
729
&:selected { @extend %selected_items; }
731
}
732
modelbutton.flat arrow {
734
background: none;
735
&:hover { background: none; }
737
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
739
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
741
}
742
button.color {
744
min-height: $small_size;
745
min-width: $small_size;
746
padding: $container_padding;
747
colorswatch:only-child {
749
// &, overlay { border-radius: 0; }
750
}
751
}
752
/*********
755
* Links *
756
*********/
757
*:link {
758
&, &:hover, &:active { color: $link_color; }
759
&:visited {
761
&, &:hover, &:active { color: $visited_link_color; }
762
}
763
@at-root %link_selected,
765
&:selected,
766
*:selected & { color: $inverse_fg_color; }
767
}
768
button:link,
770
button:visited {
771
@extend *:link;
772
> label { text-decoration-line: underline; }
774
}
775
/*****************
777
* GtkSpinButton *
778
*****************/
779
spinbutton {
780
&:not(.vertical) {
781
// in this horizontal configuration, the whole spinbutton
782
// behaves as the entry, so we extend the entry styling
783
// and nuke the style on the internal entry
784
@extend %entry;
785
padding: 0;
787
entry {
789
min-width: $large_size - 8px * 2;
790
// reset all the other props since the spinbutton node is styled here
791
margin: 0;
792
border-image: none;
793
border-radius: 0;
794
box-shadow: none;
795
background-color: transparent;
796
//
797
// This will help to simplify spinbutton's code, but unfortunatelly
798
// doesn't work properly in :dir(rtl). It needs z-index property.
799
//
800
// min-width: $large_size - 8px;
801
//
802
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
803
//
804
// &:dir(ltr) {
805
// margin-right: -$spinbuttons_width;
806
// padding-right: $spinbuttons_width;
807
// }
808
//
809
// &:dir(rtl) {
810
// margin-left: -$spinbuttons_width;
811
// padding-left: $spinbuttons_width;
812
// }
813
}
814
button {
816
// margin: $container_padding;
817
border: solid $container_padding transparent;
818
@extend %simple_flat_button;
820
@extend %small_button;
822
&.up:dir(ltr),
824
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
825
&.up:dir(rtl),
827
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
828
}
829
}
830
// OSD horizontal
832
.osd &:not(.vertical) {
833
button {
834
}
835
}
836
// Vertical
838
&.vertical {
839
// in the vertical configuration, we treat the spinbutton
840
// as a box, and tweak the style of the entry in the middle
841
// so that it's linked
842
// FIXME: this should not be set at all, but otherwise it gets the wrong
844
// color
845
&:disabled { color: $disabled_fg_color; }
846
&:drop(active) {
848
box-shadow: none;
849
}
850
entry {
852
@extend %entry_raised;
853
min-height: $medium_size;
855
min-width: $large_size;
856
padding: 0;
857
}
858
button {
860
min-height: $medium_size;
861
min-width: $large_size;
862
padding: 0;
863
@extend %simple_flat_button;
865
&.up { border-radius: $material_radius $material_radius 0 0; }
867
&.down { border-radius: 0 0 $material_radius $material_radius; }
869
}
870
}
871
// OSD vertical
873
.osd &.vertical button:first-child {
874
}
875
// Misc
877
treeview &:not(.vertical) {
878
min-height: 0;
879
border-style: none;
880
border-radius: 0;
881
entry {
883
min-height: 0;
884
padding: 1px 2px;
885
}
886
}
887
}
888
/**************
891
* ComboBoxes *
892
**************/
893
combobox {
894
arrow {
895
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
896
min-height: 16px;
897
min-width: 16px;
898
}
899
decoration,
901
button.combo:checked { transition: none; } // workaround for menuitem selection
902
button.combo cellview {
904
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
905
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
906
}
907
#gtk-combobox-popup-menu {
909
padding: 2px 0;
910
menuitem {
912
min-height: $medium_size - 2px * 2;
913
padding: 0 8px;
914
}
915
// overflow arrows
917
> arrow {
918
&.top { margin-top: -2px; }
919
&.bottom {
921
margin-top: 2px * 2;
922
margin-bottom: -2px * 3;
923
}
924
}
925
}
926
&.linked {
928
button:nth-child(2) {
929
&:dir(ltr) { @extend %linked_entry:last-child; }
930
&:dir(rtl) { @extend %linked_entry:first-child; }
931
}
932
}
933
> .linked > button {
935
@extend %linked_middle;
936
&:first-child { @extend %linked_entry:first-child; }
938
&:last-child { @extend %linked_entry:last-child; }
940
&:only-child { @extend %linked_entry:only-child; }
942
}
943
&:drop(active) { // FIXME: untested
945
box-shadow: none;
946
// button.combo { @extend %button_basic:drop(active); }
948
}
949
}
950
// the combo is a composite widget so the way we do button linking doesn't
952
// work, special case needed. See
953
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
954
.linked:not(.vertical) > combobox {
956
> box > button.combo { @extend %linked_middle; }
957
&:first-child > box > button.combo { @extend %linked_entry:first-child; }
959
&:last-child > box > button.combo { @extend %linked_entry:last-child; }
961
&:only-child > box > button.combo { @extend %linked_entry:only-child; }
963
}
964
.linked.vertical > combobox {
966
> box > button.combo { @extend %linked_vertical_middle; }
967
&:first-child > box > button.combo { @extend %linked_vertical_entry:first-child; }
969
&:last-child > box > button.combo { @extend %linked_vertical_entry:last-child; }
971
&:only-child > box > button.combo { @extend %linked_vertical_entry:only-child; }
973
}
974
button.combo {
976
border-radius: $material_radius $material_radius 0 0;
977
background-image: none;
978
font-weight: inherit;
979
@include entry(normal);
981
&:hover { box-shadow: inset 0 -1px $fg_color; }
983
&:checked { @include entry(focus); }
985
&:disabled { @include entry(disabled); }
987
}
988
/************
991
* Toolbars *
992
************/
993
toolbar {
994
-GtkWidget-window-dragging: true;
995
padding: 2px;
996
background-color: $bg_color;
997
button { @extend %button_basic.flat; }
999
// on OSD
1001
.osd & { background-color: transparent; }
1002
// stand-alone OSD toolbars
1004
&.osd {
1005
transition: $shadow_transition;
1006
padding: $container_padding;
1007
border-radius: $material_radius;
1008
box-shadow: $shadow_2, inset 0 1px $highlight_color;
1009
background-color: $surface_color;
1010
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
1012
&.left,
1014
&.right,
1015
&.top,
1016
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
1017
}
1018
// toolbar separators
1020
&.horizontal > separator { margin: 2px; }
1021
&.vertical > separator { margin: 2px; }
1022
&:not(.inline-toolbar):not(.osd) {
1024
scale,
1025
entry,
1026
spinbutton,
1027
button { margin: 2px; }
1028
.linked entry,
1030
.linked spinbutton,
1031
.linked button {
1032
&:not(:first-child) { margin-left: 0; }
1033
&:not(:last-child) { margin-right: 0; }
1034
}
1035
spinbutton {
1037
entry,
1038
button { margin: 0; }
1039
}
1040
switch { margin: 2px + $container_padding 2px; }
1042
}
1043
}
1044
// searchbar, location-bar & inline-toolbar
1046
.inline-toolbar {
1047
padding: $container_padding;
1048
border-style: solid;
1049
border-width: 0 1px 1px;
1050
border-color: $border_color;
1051
background-color: $alt_base_color;
1052
}
1053
searchbar > revealer > box,
1055
.location-bar {
1056
padding: $container_padding;
1057
border-style: solid;
1058
border-width: 0 0 1px;
1059
border-color: $border_color;
1060
background-color: $bg_color;
1061
background-clip: border-box;
1062
}
1063
searchbar > revealer > box {
1065
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1066
margin: -6px;
1067
padding: $container_padding;
1068
}
1069
/***************
1072
* Header bars *
1073
***************/
1074
%titlebar,
1075
headerbar {
1076
transition: background-color $shorter_duration $deceleration_curve, color $shorter_duration $deceleration_curve;
1077
min-height: $large_size;
1078
padding: 0 $container_padding;
1079
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1080
background-color: $titlebar_bg_color;
1081
color: $titlebar_fg_color;
1082
&:disabled { color: $titlebar_disabled_fg_color; }
1084
&:backdrop {
1086
color: $titlebar_secondary_fg_color;
1087
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1089
}
1090
.title {
1092
padding: 0 12px;
1093
font-weight: bold;
1094
}
1095
.subtitle {
1097
padding: 0 12px;
1098
font-size: smaller;
1099
@extend .dim-label;
1101
}
1102
entry {
1104
box-shadow: inset 0 -1px $titlebar_track_color;
1105
background-color: $titlebar_fill_color;
1106
color: $titlebar_fg_color;
1107
&:disabled {
1109
box-shadow: inset 0 -1px $titlebar_divider_color;
1110
background-color: $titlebar_fill_color;
1111
color: $titlebar_disabled_fg_color;
1112
}
1113
image {
1115
color: $titlebar_secondary_fg_color;
1116
&:hover, &:active { color: $titlebar_fg_color; }
1118
&:disabled { color: $titlebar_disabled_fg_color; }
1120
}
1121
}
1122
.linked:not(.vertical) > entry:not(.flat) { border-radius: $material_radius $material_radius 0 0; }
1124
button:not(.suggested-action):not(.destructive-action) {
1126
@extend %button_basic.flat;
1127
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1129
$titlebar_indicator_color 0%,
1130
transparent 0%)
1131
0 0 0 / 0 0 0px;
1132
color: $titlebar_secondary_fg_color;
1133
&:hover, &:active { color: $titlebar_fg_color; }
1135
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1137
&:checked {
1139
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1140
$titlebar_indicator_color 100%,
1141
transparent 0%)
1142
0 0 2 / 0 0 2px;
1143
color: $titlebar_fg_color;
1144
&:disabled { color: $titlebar_disabled_fg_color; }
1146
&, &:disabled { background-color: transparent; }
1148
}
1149
&:backdrop {
1151
color: $titlebar_disabled_fg_color;
1152
&:hover, &:active { color: $titlebar_secondary_fg_color; }
1154
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1156
&:checked {
1158
color: $titlebar_secondary_fg_color;
1159
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1161
}
1162
}
1163
}
1164
button.suggested-action, button.destructive-action {
1166
&:disabled {
1167
background-color: $titlebar_fill_color;
1168
color: $titlebar_disabled_fg_color;
1169
}
1170
}
1171
&.selection-mode {
1173
// 0.00001s was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1174
// but let's keep it for backwards compatibility.
1175
transition: background-color 0.00001s $longer_duration, color $longer_duration $deceleration_curve;
1176
animation: header_ripple_effect $longer_duration $deceleration_curve;
1177
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1178
background-color: $primary_color;
1179
color: $inverse_fg_color;
1180
&:backdrop {
1182
color: $inverse_secondary_fg_color;
1183
}
1184
.subtitle:link { @extend *:link:selected; }
1186
button:not(.suggested-action):not(.destructive-action) {
1188
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1189
currentColor 0%,
1190
transparent 0%)
1191
0 0 0 / 0 0 0px;
1192
color: $inverse_fg_color;
1193
&:disabled { color: $inverse_disabled_fg_color; }
1195
&:checked {
1197
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1198
currentColor 100%,
1199
transparent 0%)
1200
0 0 2 / 0 0 2px;
1201
color: $inverse_fg_color;
1202
&:disabled { color: $inverse_disabled_fg_color; }
1204
}
1205
&:backdrop {
1207
color: $inverse_secondary_fg_color;
1208
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1210
&:checked {
1212
color: $inverse_secondary_fg_color;
1213
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1215
}
1216
}
1217
}
1218
.selection-menu {
1220
padding-left: 16px;
1221
padding-right: 16px;
1222
arrow { -GtkArrow-arrow-scaling: 1; }
1224
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1226
}
1227
}
1228
// squared corners when the window is maximized, tiled, or fullscreen
1230
.tiled &,
1231
.tiled-top &,
1232
.tiled-right &,
1233
.tiled-bottom &,
1234
.tiled-left &,
1235
.maximized &,
1236
.fullscreen & {
1237
border-radius: 0;
1238
box-shadow: $shadow_1;
1239
}
1240
&.default-decoration {
1242
min-height: $small_size;
1243
padding: $container_padding;
1244
box-shadow: inset 0 1px $titlebar_highlight_color;
1245
.tiled &,
1247
.maximized &,
1248
.fullscreen & { box-shadow: none; }
1249
button.titlebutton {
1251
min-height: $small_size;
1252
min-width: $small_size;
1253
margin: 0;
1254
padding: 0;
1255
}
1256
// workaround for non-animatable buttons
1258
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1259
}
1260
.solid-csd & {
1262
&:dir(rtl), &:dir(ltr) { // specificity bump
1263
// margin-left: -2px;
1264
// margin-right: -2px;
1265
// margin-top: -2px;
1266
// border-radius: 0;
1267
box-shadow: $shadow_1; // Remove highlight as window managers should have it
1268
}
1269
}
1270
}
1271
headerbar {
1273
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1274
entry,
1275
spinbutton,
1276
button {
1277
margin-top: $container_padding;
1278
margin-bottom: $container_padding;
1279
}
1280
separator {
1282
margin-top: $large_size / 4;
1283
margin-bottom: $large_size / 4;
1284
background-color: $titlebar_divider_color;
1285
}
1286
switch {
1288
margin-top: ($large_size - 24px) / 2;
1289
margin-bottom: ($large_size - 24px) / 2;
1290
}
1291
// reset button margins of the spinbutton
1293
spinbutton button {
1294
margin-top: 0;
1295
margin-bottom: 0;
1296
}
1297
// FIXME: This is a hacky workaround.
1299
.entry-tag {
1300
margin-top: 5px;
1301
margin-bottom: 5px;
1302
}
1303
}
1304
.background .titlebar {
1306
border-top-left-radius: $material_radius;
1307
border-top-right-radius: $material_radius;
1308
}
1309
.background.tiled .titlebar,
1311
.background.tiled-top .titlebar,
1312
.background.tiled-right .titlebar,
1313
.background.tiled-bottom .titlebar,
1314
.background.tiled-left .titlebar,
1315
.background.maximized .titlebar,
1316
.background.solid-csd .titlebar {
1317
border-top-left-radius: 0;
1318
border-top-right-radius: 0;
1319
}
1320
headerbar { // headerbar border rounding
1322
window separator:first-child + &, // tackles the paned container case
1323
window &:first-child { border-top-left-radius: $material_radius; }
1324
window &:last-child { border-top-right-radius: $material_radius; }
1326
window stack & { // tackles the stacked headerbars case
1328
&:first-child, &:last-child {
1329
border-top-left-radius: $material_radius;
1330
border-top-right-radius: $material_radius;
1331
}
1332
}
1333
window.tiled &,
1335
window.tiled-top &,
1336
window.tiled-right &,
1337
window.tiled-bottom &,
1338
window.tiled-left &,
1339
window.maximized &,
1340
window.fullscreen &,
1341
window.solid-csd & {
1342
&,
1343
&:first-child,
1344
&:last-child,
1345
&:only-child {
1346
border-top-left-radius: 0;
1347
border-top-right-radius: 0;
1348
}
1349
}
1350
}
1351
.titlebar:not(headerbar) {
1353
window.csd > & {
1354
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1355
padding: 0;
1356
background-color: transparent;
1357
background-image: none;
1358
border-style: none;
1359
box-shadow: none;
1360
}
1361
> separator {
1363
background-color: $titlebar_bg_color;
1364
background-image: image($border_color);
1365
}
1366
@extend %titlebar;
1368
}
1369
/************
1372
* Pathbars *
1373
************/
1374
%pathbar_button,
1375
.path-bar button {
1376
padding-left: ($medium_size - 24px) / 2;
1377
padding-right: ($medium_size - 24px) / 2;
1378
label:not(:only-child) {
1380
&:first-child { margin-left: 4px; }
1381
&:last-child { margin-right: 4px; }
1383
}
1384
&.slider-button {
1386
padding-left: (24px - 16px) / 2;
1387
padding-right: (24px - 16px) / 2;
1388
}
1389
:not(headerbar) & {
1391
@extend %flat_button;
1392
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1394
$primary_color 0%,
1395
transparent 0%)
1396
0 0 0 / 0 0 0px;
1397
border-radius: $material_radius;
1398
&:checked {
1400
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1401
$primary_color 100%,
1402
transparent 0%)
1403
0 0 2 / 0 0 2px;
1404
&, &:disabled { background-color: transparent; }
1406
}
1407
}
1408
}
1409
/**************
1412
* Tree Views *
1413
**************/
1414
treeview.view {
1415
@at-root * {
1416
-GtkTreeView-horizontal-separator: 4;
1417
-GtkTreeView-grid-line-width: 1;
1418
-GtkTreeView-grid-line-pattern: '';
1419
-GtkTreeView-tree-line-width: 1;
1420
-GtkTreeView-tree-line-pattern: '';
1421
-GtkTreeView-expander-size: 16;
1422
}
1423
border-left-color: $track_color; // this is actually the tree lines color,
1425
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1426
// FIXME: Avoid transparency background-color being slightly darker
1428
&:selected {
1429
background-color: $base_color;
1430
background-image: image($selected_overlay_color);
1431
}
1432
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1434
&:hover, &:selected { border-radius: 0; }
1436
&.separator {
1438
min-height: 1px + 2px * 2;
1439
color: $border_color;
1440
}
1441
&:drop(active) {
1443
border-style: solid none;
1444
border-width: 1px;
1445
border-color: $primary_color;
1446
&.after { border-top-style: none; }
1448
&.before { border-bottom-style: none; }
1450
}
1451
&.expander {
1453
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1454
-gtk-icon-transform: rotate(-90deg);
1455
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1457
&:checked { -gtk-icon-transform: unset; }
1459
color: $secondary_fg_color;
1461
&:hover, &:active { color: $fg_color; }
1463
&:disabled { color: $disabled_secondary_fg_color; }
1465
}
1466
&.progressbar { // progress bar in treeviews
1468
border-bottom: $bar_size solid $primary_color;
1469
box-shadow: none;
1470
background-color: transparent;
1471
}
1472
&.trough { // progress bar trough in treeviews
1474
border-bottom: $bar_size solid $divider_color;
1475
box-shadow: none;
1476
background-color: transparent;
1477
}
1478
header {
1480
button {
1481
@extend row.activatable;
1482
padding: 2px 6px;
1484
border-style: none solid solid none;
1485
border-width: 1px;
1486
border-color: $border_color;
1487
border-radius: 0;
1488
background-clip: border-box;
1489
&:not(:hover):not(:active) { color: $secondary_fg_color; }
1491
&, &:hover, &:active { box-shadow: none; }
1493
&, &:disabled { background-color: $base_color; }
1495
&:last-child { border-right-style: none; }
1497
}
1498
}
1499
button.dnd,
1501
header.button.dnd { // for treeview-like derive widgets
1502
padding: 2px 6px;
1503
border-style: none solid solid;
1504
border-width: 1px;
1505
border-color: $border_color;
1506
border-radius: 0;
1507
box-shadow: none;
1508
background-color: $base_color;
1509
background-clip: border-box;
1510
color: $primary_color;
1511
}
1512
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1514
}
1515
/*********
1518
* Menus *
1519
*********/
1520
menubar,
1521
.menubar {
1522
-GtkWidget-window-dragging: true;
1523
padding: 0;
1524
// box-shadow: inset 0 -1px $border_color;
1525
background-color: $titlebar_bg_color;
1526
> menuitem {
1528
transition: $shorter_transition;
1529
min-height: 20px;
1530
padding: 4px 8px;
1531
color: $titlebar_secondary_fg_color;
1532
&:hover { // Seems like it :hover even with keyboard focus
1534
transition: none;
1535
background-color: $titlebar_divider_color;
1536
color: $titlebar_fg_color;
1537
}
1538
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1540
label:disabled { color: inherit; } // to inherit the above color
1542
}
1543
}
1544
.csd.popup { background-color: transparent; }
1546
menu,
1548
.menu,
1549
.context-menu {
1550
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1551
padding: 4px 0;
1552
box-shadow: inset 0 1px $highlight_color;
1553
background-color: $surface_color;
1554
border: 1px solid $border_color; // adds borders in a non composited env
1555
.csd & {
1557
border: none; // axes borders in a composited env
1558
border-radius: $material_radius;
1559
}
1560
menuitem {
1562
transition: background-color $shorter_duration $deceleration_curve;
1563
min-height: 20px;
1564
min-width: 40px;
1565
padding: 4px 8px;
1566
font: initial;
1567
text-shadow: none;
1568
&:hover {
1570
transition: none;
1571
background-color: $divider_color;
1572
}
1573
&:disabled { color: $disabled_fg_color; }
1575
// submenu indicators
1577
arrow {
1578
min-height: 16px;
1579
min-width: 16px;
1580
&:dir(ltr) {
1582
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1583
margin-left: 8px;
1584
}
1585
&:dir(rtl) {
1587
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1588
margin-right: 8px;
1589
}
1590
}
1591
// avoids labels color being overridden, see
1593
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1594
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1595
}
1596
// overflow arrows
1598
> arrow {
1599
min-height: 16px;
1600
min-width: 16px;
1601
padding: 4px;
1602
background-color: $surface_color;
1603
color: $secondary_fg_color;
1604
&.top {
1606
margin-top: -4px;
1607
border-bottom: 1px solid $border_color;
1608
border-radius: $material_radius $material_radius 0 0;
1609
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1610
}
1611
&.bottom {
1613
margin-top: 4px * 2;
1614
margin-bottom: -4px * 3;
1615
border-top: 1px solid $border_color;
1616
border-radius: 0 0 $material_radius $material_radius;
1617
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1618
}
1619
&:hover {
1621
background-image: image($divider_color);
1622
color: $fg_color;
1623
}
1624
&:disabled {
1626
border-color: transparent;
1627
background-color: transparent;
1628
color: transparent;
1629
// color: $disabled_secondary_fg_color;
1630
}
1631
}
1632
separator { margin: 4px 0; }
1634
}
1635
menuitem {
1637
accelerator { color: $secondary_fg_color; }
1638
&:disabled accelerator { color: $disabled_secondary_fg_color; }
1640
}
1641
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1643
// Electron/Atom render all translucent colors in opaque colors.
1644
// It's a very critical issue for this theme and should be fixed by upstream...
1645
.popup:not(.csd) menu {
1646
menuitem {
1647
color: $opaque_fg_color;
1648
&:hover { background-color: $opaque_divider_color; }
1650
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1652
}
1653
// FIXME: not working this
1655
accelerator { color: $opaque_secondary_fg_color; }
1656
}
1657
/************
1660
* Popovers *
1661
************/
1662
popover.background {
1663
transition: $shadow_transition;
1664
padding: 2px;
1665
box-shadow: $shadow_2; // TODO: this should really have a highlight
1666
background-color: $surface_color;
1667
&:backdrop { box-shadow: $shadow_1; }
1669
&, .csd & {
1671
border-style: solid;
1672
border-width: 1px;
1673
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1674
border-radius: $material_radius + 1px;
1675
}
1676
> stack { margin: -4px; } // remove extra padding from menu style popovers
1678
> toolbar { margin: -2px; }
1680
> list,
1682
> .view,
1683
> toolbar {
1684
border-style: none;
1685
box-shadow: none;
1686
background-color: transparent;
1687
}
1688
// FIXME: Use the popover color instead of transparent as a workaround for .view
1690
list,
1691
.view:not(:selected),
1692
toolbar { background-color: $surface_color; }
1693
// &.touch-selection,
1695
// &.magnifier,
1696
// &.osd { @extend %osd; }
1697
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1699
&.menu button,
1701
button.model {
1702
@extend %simple_flat_button;
1703
min-height: 32px;
1705
padding: 0 8px;
1706
border-radius: $material_radius;
1707
&:checked { @extend %selected_items; }
1709
}
1710
separator { margin: 4px 0; }
1712
list separator { margin: 0; }
1714
}
1715
/*************
1717
* Notebooks *
1718
*************/
1719
notebook {
1720
frame > paned > & > header,
1721
&.frame > header { background-color: $alt_base_color; }
1722
&:focus tab:checked {
1724
box-shadow: inset 0 0 0 9999px rgba($primary_color, 0.12);
1725
outline: none;
1726
}
1727
> header {
1729
border-width: 1px;
1730
border-color: $border_color;
1731
background-color: $bg_color;
1732
background-clip: border-box;
1733
&.top {
1735
border-bottom-style: solid;
1736
> tabs {
1738
margin-bottom: -1px;
1739
> tab {
1741
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1742
&:checked { border-image-source: linear-gradient(to top, $primary_color 2px, $border_color 2px); }
1744
&.reorderable-page { border-image-width: 0 1px 2px; }
1746
}
1747
}
1748
}
1749
&.bottom {
1751
border-top-style: solid;
1752
> tabs {
1754
margin-top: -1px;
1755
> tab {
1757
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1758
&:checked { border-image-source: linear-gradient(to bottom, $primary_color 2px, $border_color 2px); }
1760
&.reorderable-page { border-image-width: 2px 1px 0; }
1762
}
1763
}
1764
}
1765
&.left {
1767
border-right-style: solid;
1768
> tabs {
1770
margin-right: -1px;
1771
> tab {
1773
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1774
&:checked { border-image-source: linear-gradient(to left, $primary_color 2px, $border_color 2px); }
1776
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1778
}
1779
}
1780
}
1781
&.right {
1783
border-left-style: solid;
1784
> tabs {
1786
margin-left: -1px;
1787
> tab {
1789
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1790
&:checked { border-image-source: linear-gradient(to right, $primary_color 2px, $border_color 2px); }
1792
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1794
}
1795
}
1796
}
1797
&.top > tabs > arrow {
1799
@extend %notebook_vert_arrows;
1800
border-top-style: none;
1802
}
1803
&.bottom > tabs > arrow {
1805
@extend %notebook_vert_arrows;
1806
border-bottom-style: none;
1808
}
1809
@at-root %notebook_vert_arrows {
1811
padding-left: 4px;
1812
padding-right: 4px;
1813
&.down {
1815
margin-left: -8px;
1816
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1817
}
1818
&.up {
1820
margin-right: -8px;
1821
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1822
}
1823
}
1824
&.left > tabs > arrow {
1826
@extend %notebook_horz_arrows;
1827
border-left-style: none;
1829
}
1830
&.right > tabs > arrow {
1832
@extend %notebook_horz_arrows;
1833
border-right-style: none;
1835
}
1836
@at-root %notebook_horz_arrows {
1838
padding-top: 4px;
1839
padding-bottom: 4px;
1840
&.down {
1842
margin-top: -8px;
1843
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1844
}
1845
&.up {
1847
margin-bottom: -8px;
1848
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1849
}
1850
}
1851
> tabs > arrow {
1853
@extend %simple_flat_button;
1854
min-height: 16px;
1856
min-width: 16px;
1857
border-radius: 0;
1858
}
1859
tab {
1861
transition: $shorter_transition,
1862
background-size 0,
1863
background-image 0;
1864
min-height: $small_size;
1865
min-width: $small_size;
1866
padding: $container_padding 12px;
1867
outline-offset: -6px;
1869
border-width: 1px; // for reorderable tabs
1871
border-color: transparent; //
1872
background-image: radial-gradient(circle farthest-corner at center,
1874
$primary_color 10%,
1875
transparent 0%);
1876
background-repeat: no-repeat;
1877
background-position: center;
1878
background-size: 0% 0%;
1879
background-clip: border-box;
1880
color: $secondary_fg_color;
1882
font-weight: 500;
1883
&:hover {
1885
background-color: $hover_overlay_color;
1886
color: $fg_color;
1887
}
1888
&:disabled { color: $disabled_secondary_fg_color; }
1890
&:checked {
1892
transition: $shorter_transition,
1893
background-size $longer_duration $deceleration_curve,
1894
background-image $longer_duration + $ripple_duration $deceleration_curve;
1895
background-color: transparent;
1896
background-image: radial-gradient(circle farthest-corner at center,
1897
transparent 10%,
1898
transparent 0%);
1899
background-size: 1000% 1000%;
1900
background-clip: padding-box;
1901
color: $fg_color;
1902
&:disabled { color: $disabled_fg_color; }
1904
&.reorderable-page {
1906
border-color: $border_color;
1907
background-color: $base_color;
1908
}
1909
}
1910
// colors the button like the label, overridden otherwise
1912
button.flat {
1913
@extend %small_button;
1914
&:last-child {
1916
margin-left: $container_padding;
1917
margin-right: $container_padding - 12px;
1918
}
1919
&:first-child {
1921
margin-left: $container_padding - 12px;
1922
margin-right: $container_padding;
1923
}
1924
}
1925
}
1926
&.top,
1928
&.bottom {
1929
tabs {
1930
padding-left: 8px;
1931
padding-right: 8px;
1932
&:not(:only-child) {
1934
&:first-child { margin-left: 0; }
1935
&:last-child { margin-right: 0; }
1937
}
1938
tab.reorderable-page { border-style: none solid; }
1940
}
1941
}
1942
&.left,
1944
&.right {
1945
tabs {
1946
padding-top: 8px;
1947
padding-bottom: 8px;
1948
&:not(:only-child) {
1950
&:first-child { margin-top: 0; }
1951
&:last-child { margin-bottom: 0; }
1953
}
1954
tab.reorderable-page { border-style: solid none; }
1956
}
1957
}
1958
}
1959
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1961
background-color: $base_color;
1962
}
1963
}
1964
/**************
1967
* Scrollbars *
1968
**************/
1969
scrollbar {
1970
$_slider_min_length: 24px;
1971
// disable steppers
1973
@at-root * {
1974
-GtkScrollbar-has-backward-stepper: false;
1975
-GtkScrollbar-has-forward-stepper: false;
1976
}
1977
transition: $shorter_transition;
1979
background-color: $base_color;
1980
background-clip: $extra_background_clip;
1981
// scrollbar border
1983
&.top { border-bottom: 1px solid $border_color; }
1984
&.bottom { border-top: 1px solid $border_color; }
1985
&.left { border-right: 1px solid $border_color; }
1986
&.right { border-left: 1px solid $border_color; }
1987
// slider
1989
slider {
1990
transition: $shorter_transition, margin 0, border-width 0;
1991
min-width: 8px;
1992
min-height: 8px;
1993
border: 4px solid transparent;
1994
border-radius: $circular_radius;
1995
background-clip: padding-box;
1996
background-color: $disabled_fg_color;
1997
&:hover { background-color: $secondary_fg_color; }
1999
&:active { background-color: $fg_color; }
2001
&:disabled { background-color: $disabled_secondary_fg_color; }
2003
}
2004
&.fine-tune {
2006
slider {
2007
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
2008
min-width: 4px;
2009
min-height: 4px;
2010
}
2011
&.horizontal slider { margin: 2px 0; }
2013
&.vertical slider { margin: 0 2px; }
2015
}
2016
&.overlay-indicator {
2018
&:not(.dragging):not(.hovering) {
2019
border-color: transparent;
2020
background-color: transparent;
2021
slider {
2023
min-width: 4px;
2024
min-height: 4px;
2025
margin: 4px - 1px;
2026
border: 1px solid rgba($base_color, 0.3);
2027
}
2028
button {
2030
min-width: 4px;
2031
min-height: 4px;
2032
margin: 4px - 1px;
2033
border: 1px solid rgba($base_color, 0.3);
2034
border-radius: $circular_radius;
2035
background-color: $disabled_fg_color;
2036
background-clip: padding-box;
2037
-gtk-icon-source: none;
2038
&:disabled { background-color: $disabled_secondary_fg_color; }
2040
}
2041
&.horizontal {
2043
slider { min-width: $_slider_min_length; }
2044
button { min-width: 8px; }
2046
}
2047
&.vertical {
2049
slider { min-height: $_slider_min_length; }
2050
button { min-height: 8px; }
2052
}
2053
}
2054
&.dragging,
2056
&.hovering { background-color: rgba($base_color, 0.9); }
2057
}
2058
&.horizontal slider { min-width: $_slider_min_length; }
2060
&.vertical slider { min-height: $_slider_min_length; }
2062
// button styling
2064
button {
2065
@extend %simple_flat_button;
2066
min-width: 16px;
2068
min-height: 16px;
2069
padding: 0;
2070
border-radius: 0;
2071
}
2072
// button icons
2074
&.vertical {
2075
button {
2076
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2077
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2079
}
2080
}
2081
&.horizontal {
2083
button {
2084
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2085
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2087
}
2088
}
2089
}
2090
/**********
2093
* Switch *
2094
**********/
2095
switch {
2096
transition: all $shorter_duration $deceleration_curve;
2097
margin: $container_padding 0;
2098
padding: 0 2px;
2099
border: 5px solid transparent;
2100
border-radius: $circular_radius;
2101
background-color: $track_color;
2102
background-clip: padding-box;
2103
font-size: 0;
2104
&:checked { background-color: rgba($primary_color, 0.5); }
2106
&:disabled { opacity: 0.5; }
2108
slider {
2110
transition: all $shorter_duration $deceleration_curve;
2111
min-width: 20px;
2112
min-height: 20px;
2113
margin: -3px -2px;
2114
border-radius: $circular_radius;
2115
box-shadow: 0 0 0 10px transparent, $shadow_1;
2116
background-color: $surface_color;
2117
}
2118
&:hover slider { box-shadow: 0 0 0 10px $hover_overlay_color, $shadow_1; }
2120
&:focus slider { box-shadow: 0 0 0 10px $focus_overlay_color, $shadow_1; }
2122
&:focus:hover slider { box-shadow: 0 0 0 10px $hover_focus_overlay_color, $shadow_1; }
2124
&:checked slider {
2126
background-color: $primary_color;
2127
color: $primary_color;
2128
}
2129
row:selected & {
2131
}
2132
}
2133
/*************************
2136
* Check and Radio items *
2137
*************************/
2138
// draw regular check and radio items using our PNG assets
2139
// all assets are rendered from assets.svg. never add pngs directly
2140
// selection-mode
2142
.view.content-view.check:not(list),
2143
.content-view .tile check:not(list) {
2144
min-height: 40px;
2145
min-width: 40px;
2146
margin: 0;
2147
padding: 0;
2148
box-shadow: none;
2149
background-color: transparent;
2150
background-image: none;
2151
-gtk-icon-shadow: $shadow_1;
2152
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2154
@each $s, $as in ('', '-unchecked'),
2156
(':checked', '-checked') {
2157
&#{$s} {
2158
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2159
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2160
}
2161
}
2162
}
2163
checkbutton,
2165
radiobutton {
2166
outline: none;
2167
}
2168
checkbutton.text-button,
2170
radiobutton.text-button {
2171
// this is for a nice focus on check and radios text
2172
padding: 2px;
2173
label:not(:only-child) { margin: 0 4px; }
2175
}
2176
$check_radio_size: 40px;
2178
check,
2180
radio {
2181
min-height: 24px;
2182
min-width: 24px;
2183
margin: -($check_radio_size - 24px) / 2;
2184
padding: ($check_radio_size - 24px) / 2;
2185
@extend %simple_flat_button;
2187
@extend %circular_button;
2189
&:hover { box-shadow: inset 0 0 0 9999px $hover_overlay_color; }
2191
&:focus { box-shadow: inset 0 0 0 9999px $focus_overlay_color; }
2193
&:focus:hover { box-shadow: inset 0 0 0 9999px $hover_focus_overlay_color; }
2195
&:checked, &:indeterminate {
2197
color: $primary_color;
2198
&:disabled { color: $disabled_secondary_fg_color; }
2200
}
2201
// &:only-child { margin: -12px; }
2203
popover modelbutton.flat & {
2205
&, &:hover, &:focus, &:focus:hover, &:active, &:disabled {
2206
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2207
box-shadow: none;
2208
background-image: none;
2209
}
2210
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2212
&.left:dir(rtl) {
2214
margin-left: -12px;
2215
margin-right: -4px;
2216
}
2217
&.right:dir(ltr) {
2219
margin-left: -4px;
2220
margin-right: -12px;
2221
}
2222
}
2223
menu menuitem & {
2225
transition: none;
2226
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2227
padding: 0;
2228
&:dir(ltr) { margin-right: 8px; }
2230
&:dir(rtl) { margin-left: 8px; }
2232
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2234
&, &:hover, &:disabled {
2236
box-shadow: none;
2237
// color: inherit;
2238
}
2239
}
2240
}
2241
%check,
2243
check {
2244
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2245
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2247
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2249
}
2250
%radio,
2252
radio {
2253
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2254
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2256
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2258
border-image-slice: $check_radio_size / 2px;
2260
border-image-width: $check_radio_size / 2;
2261
$radio_indicator: 10px / $check_radio_size / 2;
2263
& {
2265
border-image-source: -gtk-gradient(radial,
2266
center center, 0,
2267
center center, 0.001,
2268
to($primary_color),
2269
to(transparent));
2270
}
2271
&:checked:not(:indeterminate) {
2273
border-image-source: -gtk-gradient(radial,
2274
center center, 0,
2275
center center, $radio_indicator,
2276
to($primary_color),
2277
to(transparent));
2278
}
2279
&:checked:not(:indeterminate):disabled {
2281
border-image-source: -gtk-gradient(radial,
2282
center center, 0,
2283
center center, $radio_indicator,
2284
to($disabled_secondary_fg_color),
2285
to(transparent));
2286
}
2287
}
2288
%small_check,
2290
menu menuitem check {
2291
& {
2292
min-height: 16px;
2293
min-width: 16px;
2294
border-radius: $material_radius;
2295
-gtk-outline-radius: $material_radius;
2296
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2297
}
2298
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2300
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2302
}
2303
%small_radio,
2305
menu menuitem radio {
2306
& {
2307
min-height: 16px;
2308
min-width: 16px;
2309
border-image: none;
2310
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2311
}
2312
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2314
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2316
}
2317
// ANIMATION:
2319
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2320
// the transformation is set on the active state and it get reset on the checked state.
2321
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2322
treeview.view check,
2324
treeview.view radio {
2325
padding: 0;
2326
&:hover, &:selected {
2328
box-shadow: none;
2329
background-color: transparent;
2330
}
2331
& {
2333
color: $secondary_fg_color;
2334
&:hover, &:active { color: $fg_color; }
2336
&:disabled { color: $disabled_secondary_fg_color; }
2338
&:checked, &:indeterminate { color: $primary_color; }
2340
&:checked:disabled, &:indeterminate:disabled { color: $disabled_secondary_fg_color; }
2342
}
2343
}
2344
treeview.view radio:checked {
2346
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2347
border-image: none;
2348
}
2349
/************
2352
* GtkScale *
2353
************/
2354
scale {
2355
// sizing
2356
$_marks_length: 8px;
2357
$_marks_distance: 7px;
2358
$trough_size: 2px;
2360
$finetune_trough_size: 4px;
2361
$slider_size: 32px;
2363
$slider_margin: -($slider_size - $trough_size) / 2;
2365
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2366
$color_slider_margin: -($slider_size) * 3 / 4;
2368
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2369
min-height: $trough_size;
2371
min-width: $trough_size;
2372
&.horizontal { padding: ($medium_size - $trough_size) / 2 12px; }
2374
&.vertical { padding: 12px ($medium_size - $trough_size) / 2; }
2376
// the slider is inside the trough, so to have make it bigger there's a negative margin
2378
slider {
2379
min-height: $slider_size;
2380
min-width: $slider_size;
2381
margin: $slider_margin;
2382
}
2383
// click-and-hold the slider to activate
2385
&.fine-tune {
2386
&.horizontal {
2387
min-height: $finetune_trough_size;
2388
padding-top: ($medium_size - $finetune_trough_size) / 2;
2389
padding-bottom: ($medium_size - $finetune_trough_size) / 2;
2390
}
2391
&.vertical {
2393
min-width: $finetune_trough_size;
2394
padding-left: ($medium_size - $finetune_trough_size) / 2;
2395
padding-right: ($medium_size - $finetune_trough_size) / 2;
2396
}
2397
// to make the trough grow in fine-tune mode
2399
slider { margin: $finetune_slider_margin; }
2400
}
2401
// the backing bit
2403
trough {
2404
transition: background-color $shorter_duration $deceleration_curve;
2405
outline: none;
2406
background-color: $track_color;
2407
&:disabled { background-color: $divider_color; }
2409
}
2410
// the colored part of the backing bit
2412
highlight {
2413
transition: background-color $shorter_duration $deceleration_curve;
2414
background-color: $primary_color;
2415
&:disabled { background-color: transparent; }
2417
}
2418
// this is another differently styled part of the backing bit, the most relevant use case is for example
2420
// in media player to indicate how much video stream as been cached
2421
fill {
2422
transition: background-color $shorter_duration $deceleration_curve;
2423
background-color: $track_color;
2424
&:disabled { background-color: transparent; }
2426
}
2427
slider {
2429
transition: background-color $shorter_duration $deceleration_curve,
2430
background-size $ripple_duration $deceleration_curve,
2431
background-image $ripple_opacity_duration $deceleration_curve;
2432
background-repeat: no-repeat;
2433
background-position: center;
2434
background-size: auto, 1000% 1000%;
2435
border-radius: 50%;
2436
color: transparent;
2437
@each $s, $as in ('', ''),
2439
(':disabled', '-disabled') {
2440
&#{$s} {
2441
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2442
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2444
radial-gradient(circle farthest-corner at center,
2445
currentColor 10%,
2446
transparent 0%);
2447
}
2448
}
2449
&:hover { background-color: rgba($primary_color, 0.08); }
2451
&:focus { background-color: rgba($primary_color, 0.12); }
2453
&:focus:hover { background-color: rgba($primary_color, 0.16); }
2455
&:active {
2457
transition: background-color $shorter_duration $deceleration_curve,
2458
background-size 0,
2459
background-image 0;
2460
animation: scale_ripple_effect $longer_duration $deceleration_curve forwards;
2461
background-size: auto, 0% 0%;
2462
background-color: rgba($primary_color, 0.08);
2463
color: rgba($primary_color, 0.12);
2464
}
2465
}
2466
marks label,
2468
value { color: $secondary_fg_color; }
2469
marks {
2471
color: $track_color;
2472
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2474
(bottom, bottom, top),
2475
(left, left, right),
2476
(right, right, left) {
2477
&.#{$marks_class} {
2478
margin-#{$marks_margin}: $_marks_distance;
2479
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2480
}
2481
}
2482
}
2483
&.fine-tune marks {
2485
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2486
(bottom, bottom, top),
2487
(left, left, right),
2488
(right, right, left) {
2489
&.#{$marks_class} {
2490
margin-#{$marks_margin}: $_marks_distance - 1px;
2491
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2492
}
2493
}
2494
}
2495
&.horizontal {
2497
indicator {
2498
min-height: $_marks_length;
2499
min-width: 1px;
2500
}
2501
}
2502
&.vertical {
2504
indicator {
2505
min-height: 1px;
2506
min-width: $_marks_length;
2507
}
2508
}
2509
// *WARNING* scale with marks madness following
2511
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2513
('vertical', 'vert') {
2514
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2515
('marks-after', 'marks-after:not(.marks-before)') {
2516
&.#{$dir_class}.#{$marks_class} {
2517
slider {
2518
@each $state, $state_infix in ('', ''),
2519
(':disabled', '-disabled') {
2520
&#{$state} {
2521
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2522
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2524
radial-gradient(circle farthest-corner at center,
2525
currentColor 10%,
2526
transparent 0%);
2527
}
2528
}
2529
}
2530
}
2531
}
2532
}
2533
&.color {
2535
min-height: 0;
2536
min-width: 0;
2537
&.horizontal {
2539
padding: 0 0 12px 0;
2540
slider {
2542
&:dir(ltr), &:dir(rtl) { // specificity bump
2543
margin-bottom: $color_slider_margin;
2544
margin-top: $color_marks_slider_margin;
2545
}
2546
}
2547
}
2548
&.vertical {
2550
&:dir(ltr) {
2551
padding: 0 0 0 12px;
2552
slider {
2554
margin-left: $color_slider_margin;
2555
margin-right: $color_marks_slider_margin;
2556
}
2557
}
2558
&:dir(rtl) {
2560
padding: 0 12px 0 0;
2561
slider {
2563
margin-right: $color_slider_margin;
2564
margin-left: $color_marks_slider_margin;
2565
}
2566
}
2567
}
2568
}
2569
}
2570
/*****************
2573
* Progress bars *
2574
*****************/
2575
progressbar {
2576
// sizing
2577
&.horizontal {
2578
trough,
2579
progress { min-height: $bar_size; }
2580
}
2581
&.vertical {
2583
trough,
2584
progress { min-width: $bar_size; }
2585
}
2586
// FIXME: insensitive state missing and some other state should be set probably
2588
color: $secondary_fg_color;
2589
font-size: smaller;
2590
trough { background-color: $divider_color; }
2592
progress { background-color: $primary_color; }
2594
&.osd { // progressbar.osd used for epiphany page loading progress
2596
// min-width: $bar_size;
2597
// min-height: $bar_size;
2598
// background-color: transparent;
2599
// trough { background-color: transparent; }
2601
// progress { background-color: $primary_color; }
2603
}
2604
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2606
}
2607
/*************
2610
* Level Bar *
2611
*************/
2612
levelbar {
2613
&.horizontal {
2614
block { min-height: $bar_size; }
2615
&.discrete block {
2617
min-width: $medium_size;
2618
&:not(:last-child) { margin-right: 2px; }
2620
}
2621
}
2622
&.vertical {
2624
block { min-width: $bar_size; }
2625
&.discrete block {
2627
min-height: $medium_size;
2628
&:not(:last-child) { margin-bottom: 2px; }
2630
}
2631
}
2632
// imitate the entry style
2634
trough {
2635
// padding: 2px;
2636
// border-radius: $material_radius;
2637
// box-shadow: $shadow_1;
2638
// background-color: $base_color;
2639
// &:disabled { background-color: $alt_base_color; }
2641
}
2642
block {
2644
&.low { background-color: $warning_color; }
2645
&.high,
2647
&:not(.empty) { background-color: $primary_color; }
2648
&.full { background-color: $success_color; }
2650
&.empty { background-color: $divider_color; }
2652
}
2653
}
2654
/****************
2657
* Print dialog *
2658
*****************/
2659
printdialog {
2660
paper {
2661
padding: 0;
2662
border: 1px solid $border_color;
2663
background-color: $base_color;
2664
color: $fg_color;
2665
}
2666
.dialog-action-box { margin: 12px; }
2668
}
2669
/**********
2672
* Frames *
2673
**********/
2674
frame > border,
2675
.frame {
2676
margin: 0;
2677
padding: 0;
2678
border: 1px solid $border_color;
2679
border-radius: 0;
2680
box-shadow: none;
2681
&.flat { border-style: none; }
2683
}
2684
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2686
actionbar > revealer > box {
2688
padding: $container_padding;
2689
border-top: 1px solid $border_color;
2690
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2692
}
2693
scrolledwindow {
2695
viewport.frame { // avoid double borders when viewport inside scrolled window
2696
border-style: none;
2697
}
2698
// This is used when content is touch-dragged past boundaries.
2700
// draws a box on top of the content, the size changes programmatically.
2701
@at-root overshoot {
2702
&.top { @include overshoot(top); }
2703
&.bottom { @include overshoot(bottom); }
2705
&.left { @include overshoot(left); }
2707
&.right { @include overshoot(right); }
2709
}
2710
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2712
@at-root undershoot {
2713
&.top { @include undershoot(top); }
2714
&.bottom { @include undershoot(bottom); }
2716
&.left { @include undershoot(left); }
2718
&.right { @include undershoot(right); }
2720
}
2721
@at-root junction { // the small square between two scrollbars
2723
border-style: solid none none solid;
2724
border-width: 1px;
2725
border-color: $border_color;
2726
background-color: $base_color;
2727
&:dir(rtl) { border-style: solid solid none none; }
2729
}
2730
}
2731
// vbox and hbox separators
2733
separator {
2734
min-width: 1px;
2735
min-height: 1px;
2736
background-color: $border_color;
2737
}
2738
%hide_separators {
2740
min-width: 0;
2741
min-height: 0;
2742
background-color: transparent;
2743
}
2744
/*********
2747
* Lists *
2748
*********/
2749
list {
2750
border-color: $border_color;
2751
background-color: $base_color;
2752
row { padding: 2px; }
2754
}
2755
row {
2757
&.activatable {
2758
transition: $shorter_transition,
2759
background-size $ripple_duration $deceleration_curve,
2760
background-image $ripple_opacity_duration $deceleration_curve;
2761
box-shadow: inset 0 0 0 9999px transparent;
2762
background-image: radial-gradient(circle farthest-corner at center,
2763
transparent 10%,
2764
transparent 0%);
2765
background-repeat: no-repeat;
2766
background-position: center;
2767
background-size: 1000% 1000%;
2768
&:hover {
2770
transition: $shorter_transition,
2771
box-shadow 0,
2772
background-size $ripple_duration $deceleration_curve,
2773
background-image $ripple_opacity_duration $deceleration_curve;
2774
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2775
}
2776
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2778
&:active {
2779
transition: $shorter_transition,
2780
background-size 0,
2781
background-image 0;
2782
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2783
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2784
background-image: radial-gradient(circle farthest-corner at center,
2785
$active_overlay_color 10%,
2786
transparent 0%);
2787
background-size: 0% 0%;
2788
}
2789
}
2790
&:selected {
2792
@extend %selected_items;
2793
color: $primary_color; // for overlays
2794
image,
2796
label { color: $fg_color; }
2797
button image,
2799
button label { color: inherit; }
2800
}
2801
}
2802
/*********************
2805
* App Notifications *
2806
*********************/
2807
.app-notification {
2808
// @extend %osd;
2809
@extend toolbar.osd;
2811
margin: 8px;
2813
button { @extend %button_basic.flat; }
2815
&.frame,
2817
border { border-style: none; }
2818
}
2819
/*************
2822
* Expanders *
2823
*************/
2824
expander {
2825
title > arrow {
2826
transition: all $shorter_duration $deceleration_curve;
2827
min-width: 16px;
2828
min-height: 16px;
2829
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2830
-gtk-icon-transform: rotate(-90deg);
2831
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2833
&:checked { -gtk-icon-transform: unset; }
2835
color: $secondary_fg_color;
2837
&:hover, &:active { color: $fg_color; }
2839
&:disabled { color: $disabled_secondary_fg_color; }
2841
}
2842
}
2843
/************
2846
* Calendar *
2847
************/
2848
calendar {
2849
padding: 1px;
2850
border: 1px solid $border_color;
2851
color: $fg_color;
2852
&:disabled { color: $disabled_fg_color; }
2854
&:selected {
2856
@extend %selected_items;
2857
border-radius: $material_radius + 1px;
2859
}
2860
&.header {
2862
border-style: none none solid;
2863
border-radius: 0;
2864
}
2865
&.button { @extend %simple_flat_button; }
2867
&.highlight {
2869
color: $secondary_fg_color;
2870
font-weight: 500;
2871
}
2872
&:indeterminate { color: $disabled_secondary_fg_color; }
2874
}
2875
/***********
2878
* Dialogs *
2879
***********/
2880
messagedialog { // Message Dialog styling
2881
&.background { background-color: $surface_color; }
2882
.titlebar {
2884
min-height: $small_size;
2885
border-style: none;
2886
box-shadow: inset 0 1px $highlight_color;
2887
background-color: $surface_color;
2888
color: $fg_color;
2889
&:backdrop { color: $secondary_fg_color; }
2891
}
2892
&.csd { // rounded bottom border styling for csd version
2894
&.background {
2895
// bigger radius for better antialiasing
2896
border-bottom-left-radius: $material_radius;
2897
border-bottom-right-radius: $material_radius;
2898
}
2899
.dialog-action-area {
2901
margin-top: -$container_padding;
2902
padding: $container_padding;
2903
button {
2905
@extend %simple_flat_button;
2906
border-radius: $material_radius;
2907
&:not(:last-child) { margin-right: $container_padding; }
2909
&.suggested-action:not(:disabled) { color: $suggested_color; }
2911
&.destructive-action:not(:disabled) { color: $destructive_color; }
2913
}
2914
}
2915
}
2916
}
2917
filechooser {
2919
.dialog-action-box { border-top: 1px solid $border_color; }
2920
#pathbarbox {
2922
border-bottom: 1px solid $border_color;
2923
background-color: $bg_color;
2924
> stack > box > button { // The new folder button
2926
@extend %button_basic.flat;
2927
@extend %circular_button;
2928
}
2929
}
2930
}
2931
filechooserbutton:drop(active) {
2933
box-shadow: none;
2934
}
2935
/***********
2938
* Sidebar *
2939
***********/
2940
.sidebar {
2941
border-style: none;
2942
background-color: $alt_base_color;
2943
@at-root %sidebar_left,
2945
&:dir(ltr),
2946
&.left,
2947
&.left:dir(rtl) {
2948
border-right: 1px solid $border_color;
2949
border-left-style: none;
2950
}
2951
@at-root %sidebar_right,
2953
&:dir(rtl),
2954
&.right {
2955
border-left: 1px solid $border_color;
2956
border-right-style: none;
2957
}
2958
list { background-color: transparent; }
2960
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2962
}
2963
stacksidebar {
2965
&.sidebar {
2966
&:dir(ltr),
2967
&.left,
2968
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2969
&:dir(rtl),
2971
&.right { list { @extend %sidebar_right; }}
2972
}
2973
row {
2975
padding: 10px 4px;
2976
> label {
2978
padding-left: 6px;
2979
padding-right: 6px;
2980
}
2981
&.needs-attention > label { @extend %needs_attention; }
2983
}
2984
}
2985
/****************
2988
* File chooser *
2989
****************/
2990
// dim the sidebar icons, see bug #786613 for details on this oddity
2991
row {
2992
image.sidebar-icon { color: $secondary_fg_color; }
2993
}
2994
placessidebar {
2996
> viewport.frame { border-style: none; }
2997
list { padding: (4px - 3px) 0 4px; }
2999
row {
3001
// Needs overriding of the GtkListBoxRow padding
3002
min-height: 32px;
3003
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3004
padding: 0;
3005
border-radius: $material_radius;
3006
// Using margins/padding directly in the SidebarRow
3008
// will make the animation of the new bookmark row jump
3009
> revealer { padding: 0 8px; }
3010
&:selected { font-weight: 500; }
3012
&:disabled { color: $disabled_fg_color; }
3014
image.sidebar-icon {
3016
&:dir(ltr) { padding-right: 8px; }
3017
&:dir(rtl) { padding-left: 8px; }
3018
}
3019
label.sidebar-label {
3021
&:dir(ltr) { padding-right: 2px; }
3022
&:dir(rtl) { padding-left: 2px; }
3023
}
3024
&:selected image.sidebar-icon,
3026
&:selected label.sidebar-label { color: inherit; }
3027
@at-root button.sidebar-button {
3029
@extend %simple_flat_button;
3030
@extend %small_button;
3031
}
3032
&.sidebar-placeholder-row {
3034
min-height: 2px;
3035
padding: 0 8px;
3036
background-image: image($primary_color);
3037
background-clip: content-box;
3038
}
3039
&.sidebar-new-bookmark-row { color: $primary_color; }
3041
&:drop(active):not(:disabled) {
3043
box-shadow: inset 0 0 0 2px $primary_color;
3044
}
3045
}
3046
}
3047
placesview {
3049
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3050
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3052
// this selects the "connect to server" label
3054
> actionbar > revealer > box > label {
3055
padding-left: 8px;
3056
padding-right: 8px;
3057
}
3058
}
3059
/*********
3062
* Paned *
3063
*********/
3064
paned {
3065
> separator {
3066
min-width: 1px;
3067
min-height: 1px;
3068
-gtk-icon-source: none; // defeats the ugly default handle decoration
3069
border-style: none; // just to be sure
3070
background-color: transparent;
3071
// workaround, using background istead of a border since the border will get rendered twice (?)
3072
background-image: image($border_color);
3073
background-size: 1px 1px;
3074
background-clip: content-box; // avoids borders image being rendered twice (?)
3075
&.wide {
3077
min-width: 6px;
3078
min-height: 6px;
3079
background-color: $bg_color;
3080
background-image: image($border_color), image($border_color);
3081
background-size: 1px 1px, 1px 1px;
3082
}
3083
}
3084
&.horizontal > separator {
3086
background-repeat: repeat-y;
3087
&:dir(ltr) {
3089
margin: 0 -8px 0 0;
3090
padding: 0 8px 0 0;
3091
background-position: left;
3092
}
3093
&:dir(rtl) {
3095
margin: 0 0 0 -8px;
3096
padding: 0 0 0 8px;
3097
background-position: right;
3098
}
3099
&.wide {
3101
margin: 0;
3102
padding: 0;
3103
background-repeat: repeat-y, repeat-y;
3104
background-position: left, right;
3105
}
3106
}
3107
&.vertical > separator {
3109
margin: 0 0 -8px 0;
3110
padding: 0 0 8px 0;
3111
background-repeat: repeat-x;
3112
background-position: top;
3113
&.wide {
3115
margin: 0;
3116
padding: 0;
3117
background-repeat: repeat-x, repeat-x;
3118
background-position: bottom, top;
3119
}
3120
}
3121
}
3122
/**************
3125
* GtkInfoBar *
3126
**************/
3127
infobar {
3128
border-style: none;
3129
&.info { background-color: $info_bg_color; }
3131
&.question { background-color: $question_bg_color; }
3133
&.warning { background-color: $warning_bg_color; }
3135
&.error { background-color: $error_bg_color; }
3137
&.info,
3139
&.question,
3140
&.warning,
3141
&.error {
3142
> label, & { color: $inverse_fg_color; }
3143
button { @extend %button_selected; }
3145
selection {}
3147
*:link { @extend %link_selected; }
3149
}
3150
}
3151
/************
3154
* Tooltips *
3155
************/
3156
tooltip {
3157
&.background {
3158
// background-color needs to be set this way otherwise it gets drawn twice
3159
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3160
// box-shadow: inset 0 1px $highlight_color;
3161
background-color: $tooltip_bg_color;
3162
color: $tooltip_fg_color;
3163
}
3164
// padding: 4px; /* not working */
3166
border-radius: $material_radius;
3167
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3168
&:not(.csd):not(.unity-csd) {
3170
// border: 1px solid $border_color;
3171
// border-radius: $material_radius + 1px;
3172
// background-clip: $extra_background_clip;
3173
}
3174
// FIXME: we need a border or tooltips vanish on black background.
3176
decoration { background-color: transparent; }
3177
label {
3179
// tooltip label already seems to have 6px margins
3180
min-height: 32px - 6px * 2;
3181
padding: 0 8px - 6px;
3182
}
3183
* {
3185
// workaround for Eclipse.
3186
// do not include any declaration here.
3187
// padding: 0;
3188
// background-color: transparent;
3189
// color: inherit;
3190
}
3191
}
3192
/*****************
3195
* Color Chooser *
3196
*****************/
3197
colorswatch {
3198
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3199
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3200
// applied to the overlay box.
3201
// base color corners rounding
3203
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3204
// sports a bigger radius.
3205
// nth-child is needed by the custom color strip.
3206
&.top {
3208
border-top-left-radius: $material_radius + 0.5px;
3209
border-top-right-radius: $material_radius + 0.5px;
3210
overlay {
3212
border-top-left-radius: $material_radius;
3213
border-top-right-radius: $material_radius;
3214
}
3215
}
3216
&.bottom {
3218
border-bottom-left-radius: $material_radius + 0.5px;
3219
border-bottom-right-radius: $material_radius + 0.5px;
3220
overlay {
3222
border-bottom-left-radius: $material_radius;
3223
border-bottom-right-radius: $material_radius;
3224
}
3225
}
3226
&.left,
3228
&:first-child:not(.top) {
3229
border-top-left-radius: $material_radius + 0.5px;
3230
border-bottom-left-radius: $material_radius + 0.5px;
3231
overlay {
3233
border-top-left-radius: $material_radius;
3234
border-bottom-left-radius: $material_radius;
3235
}
3236
}
3237
&.right,
3239
&:last-child:not(.bottom) {
3240
border-top-right-radius: $material_radius + 0.5px;
3241
border-bottom-right-radius: $material_radius + 0.5px;
3242
overlay {
3244
border-top-right-radius: $material_radius;
3245
border-bottom-right-radius: $material_radius;
3246
}
3247
}
3248
&.dark { color: $light_fg_color; }
3250
&.light { color: $dark_fg_color; }
3252
&:drop(active) {
3254
box-shadow: none;
3255
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3257
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3259
}
3260
overlay {
3262
transition: $shadow_transition;
3263
box-shadow: $shadow_1;
3264
&:hover { box-shadow: $shadow_2; }
3266
}
3267
&#add-color-button {
3269
border-radius: $material_radius $material_radius 0 0;
3270
color: $light_fg_color;
3271
&:only-child { border-radius: $material_radius; }
3273
overlay {
3275
background-image: linear-gradient(to right,
3276
$error_bg_color 25%,
3277
$warning_bg_color 25%, $warning_bg_color 50%,
3278
$info_bg_color 50%, $info_bg_color 75%,
3279
$question_bg_color 75%);
3280
}
3281
}
3282
&:disabled {
3284
opacity: 0.5;
3285
overlay { box-shadow: none; }
3287
}
3288
row:selected & {
3290
}
3291
&#editor-color-sample {
3293
border-radius: $material_radius + 0.5px;
3294
overlay { border-radius: $material_radius; }
3296
// overlay:hover { box-shadow: $shadow_1; }
3298
}
3299
}
3300
// colorscale popup
3302
colorchooser .popover.osd {
3303
transition: $shadow_transition;
3304
border-radius: $material_radius;
3305
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3306
background-color: $surface_color;
3307
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3309
}
3310
/********
3313
* Misc *
3314
********/
3315
// content view (grid/list)
3316
.content-view {
3317
background-color: $bg_color;
3318
// &:hover { -gtk-icon-effect: highlight; }
3320
rubberband, .rubberband { @extend rubberband; }
3322
}
3323
.scale-popup {
3325
// .osd & { @extend %osd; }
3326
.osd & button.flat { // FIXME: quick hack, redo properly
3328
}
3329
button { // +/- buttons on GtkVolumeButton popup
3331
}
3332
}
3333
/**********************
3336
* Window Decorations *
3337
**********************/
3338
decoration {
3339
transition: $shadow_transition;
3340
border-radius: $material_radius $material_radius 0 0;
3341
box-shadow: $shadow_4, 0 16px 16px transparent;
3342
// FIXME rationalize shadows
3344
// this is used for the resize cursor area
3346
margin: 8px;
3347
&:backdrop {
3349
// the transparent shadow here is to enforce that the shadow extents don't
3350
// change when we go to backdrop, to prevent jumping windows.
3351
// The biggest shadow should be in the same order then in the active state
3352
// or the jumping will happen during the transition.
3353
box-shadow: $shadow_2, 0 16px 16px transparent;
3354
}
3355
.maximized &,
3357
.fullscreen &,
3358
.tiled &,
3359
.tiled-top &,
3360
.tiled-right &,
3361
.tiled-bottom &,
3362
.tiled-left & { border-radius: 0; }
3363
.popup & { box-shadow: none; }
3365
// server-side decorations as used by mutter
3367
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3368
.csd.popup & {
3370
border-radius: $material_radius;
3371
box-shadow: $shadow_2;
3372
}
3373
tooltip.csd & {
3375
border-radius: $material_radius;
3376
box-shadow: none;
3377
}
3378
messagedialog.csd & {
3380
border-radius: $material_radius;
3381
// box-shadow: $shadow_4, 0 16px 16px transparent;
3382
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3384
}
3385
.solid-csd & {
3387
margin: 0;
3388
// padding: 4px;
3389
border-radius: 0;
3390
box-shadow: none;
3391
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3392
background-color: $titlebar_bg_color;
3393
}
3394
}
3395
// Window Close button
3397
button.titlebutton {
3398
// @extend %simple_flat_button;
3399
@extend %circular_button;
3401
.selection-mode & {
3403
}
3404
}
3405
// catch all extend :)
3408
%selected_items {
3410
background-color: $selected_overlay_color;
3411
}
3412
.monospace { font-family: monospace; }
3414
/**********************
3417
* Touch Copy & Paste *
3418
**********************/
3419
// touch selection handlebars for the Popover.osd above
3420
cursor-handle {
3421
color: $primary_color;
3422
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
3423
&.top:dir(ltr), &.bottom:dir(rtl) {
3425
-gtk-icon-transform: rotate(90deg);
3426
}
3427
&.bottom:dir(ltr), &.top:dir(rtl) {
3429
-gtk-icon-transform: unset;
3430
}
3431
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3433
padding-top: 6px;
3434
-gtk-icon-transform: rotate(45deg);
3435
}
3436
}
3437
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3439
// shortcut window keys
3441
.keycap {
3442
min-width: 28px - 8px * 2;
3443
min-height: 28px - 2px;
3444
margin-top: 2px;
3445
padding-bottom: 2px;
3446
padding-left: 8px;
3447
padding-right: 8px;
3448
border: solid 1px $border_color;
3450
border-radius: $material_radius + 1px;
3451
box-shadow: inset 0 -2px $border_color;
3452
background-color: $surface_color;
3453
color: $fg_color;
3454
font-size: smaller;
3455
}
3456
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3458
transition: $shorter_transition;
3459
box-shadow: $shadow_1, inset 0 0 0 2px $primary_color;
3460
caret-color: $primary_color;
3461
}
3462
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3464
stackswitcher button.circular,
3466
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3467
min-width: $medium_size;
3468
min-height: $medium_size;
3469
padding: 0;
3470
}
3471
/*********
3474
* Emoji *
3475
*********/
3476
popover.emoji-picker {
3477
padding: 0;
3478
entry {
3480
border-bottom: 1px solid $border_color;
3481
border-radius: 0;
3482
box-shadow: none;
3483
background-color: transparent;
3484
}
3485
scrolledwindow { border-bottom: 1px solid $border_color; }
3487
}
3488
// mimic tab style
3490
button.emoji-section {
3491
margin-top: -1px;
3492
padding: 0 8px;
3493
min-width: 24px;
3494
min-height: $medium_size;
3495
border-radius: 0;
3496
outline-offset: -6px;
3497
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3499
&:checked {
3501
box-shadow: inset 0 2px $primary_color;
3502
background-color: transparent;
3503
}
3504
&:hover, &:active { background-color: $hover_overlay_color; }
3506
&:first-child { margin-left: 4px; }
3508
&:last-child { margin-right: 4px; }
3510
}
3511
.emoji {
3513
min-width: 3em;
3514
min-height: 3em;
3515
padding: 0 8px;
3516
// font-size: larger;
3517
widget {
3519
transition: $shorter_transition;
3520
border-radius: $material_radius;
3521
&:hover { background-color: $hover_overlay_color; }
3523
}
3524
}
3525