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
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
735
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
737
}
738
button.color {
740
min-height: $small_size;
741
min-width: $small_size;
742
padding: $container_padding;
743
colorswatch:only-child {
745
// &, overlay { border-radius: 0; }
746
}
747
}
748
/*********
751
* Links *
752
*********/
753
*:link {
754
&, &:hover, &:active { color: $link_color; }
755
&:visited {
757
&, &:hover, &:active { color: $visited_link_color; }
758
}
759
@at-root %link_selected,
761
&:selected,
762
*:selected & { color: $inverse_fg_color; }
763
}
764
button:link,
766
button:visited {
767
@extend *:link;
768
> label { text-decoration-line: underline; }
770
}
771
/*****************
773
* GtkSpinButton *
774
*****************/
775
spinbutton {
776
&:not(.vertical) {
777
// in this horizontal configuration, the whole spinbutton
778
// behaves as the entry, so we extend the entry styling
779
// and nuke the style on the internal entry
780
@extend %entry;
781
padding: 0;
783
entry {
785
min-width: $large_size - 8px * 2;
786
// reset all the other props since the spinbutton node is styled here
787
margin: 0;
788
border-image: none;
789
border-radius: 0;
790
box-shadow: none;
791
background-color: transparent;
792
//
793
// This will help to simplify spinbutton's code, but unfortunatelly
794
// doesn't work properly in :dir(rtl). It needs z-index property.
795
//
796
// min-width: $large_size - 8px;
797
//
798
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
799
//
800
// &:dir(ltr) {
801
// margin-right: -$spinbuttons_width;
802
// padding-right: $spinbuttons_width;
803
// }
804
//
805
// &:dir(rtl) {
806
// margin-left: -$spinbuttons_width;
807
// padding-left: $spinbuttons_width;
808
// }
809
}
810
button {
812
// margin: $container_padding;
813
border: solid $container_padding transparent;
814
@extend %simple_flat_button;
816
@extend %small_button;
818
&.up:dir(ltr),
820
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
821
&.up:dir(rtl),
823
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
824
}
825
}
826
// OSD horizontal
828
.osd &:not(.vertical) {
829
button {
830
}
831
}
832
// Vertical
834
&.vertical {
835
// in the vertical configuration, we treat the spinbutton
836
// as a box, and tweak the style of the entry in the middle
837
// so that it's linked
838
// FIXME: this should not be set at all, but otherwise it gets the wrong
840
// color
841
&:disabled { color: $disabled_fg_color; }
842
&:drop(active) {
844
box-shadow: none;
845
}
846
entry {
848
@extend %entry_raised;
849
min-height: $medium_size;
851
min-width: $large_size;
852
padding: 0;
853
}
854
button {
856
min-height: $medium_size;
857
min-width: $large_size;
858
padding: 0;
859
@extend %simple_flat_button;
861
&.up { border-radius: $material_radius $material_radius 0 0; }
863
&.down { border-radius: 0 0 $material_radius $material_radius; }
865
}
866
}
867
// OSD vertical
869
.osd &.vertical button:first-child {
870
}
871
// Misc
873
treeview &:not(.vertical) {
874
min-height: 0;
875
border-style: none;
876
border-radius: 0;
877
entry {
879
min-height: 0;
880
padding: 1px 2px;
881
}
882
}
883
}
884
/**************
887
* ComboBoxes *
888
**************/
889
combobox {
890
arrow {
891
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
892
min-height: 16px;
893
min-width: 16px;
894
}
895
decoration,
897
button.combo:checked { transition: none; } // workaround for menuitem selection
898
button.combo cellview {
900
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
901
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
902
}
903
#gtk-combobox-popup-menu {
905
padding: 2px 0;
906
menuitem {
908
min-height: $medium_size - 2px * 2;
909
padding: 0 8px;
910
}
911
// overflow arrows
913
> arrow {
914
&.top { margin-top: -2px; }
915
&.bottom {
917
margin-top: 2px * 2;
918
margin-bottom: -2px * 3;
919
}
920
}
921
}
922
&.linked {
924
button:nth-child(2) {
925
&:dir(ltr) { @extend %linked_entry:last-child; }
926
&:dir(rtl) { @extend %linked_entry:first-child; }
927
}
928
}
929
> .linked > button {
931
@extend %linked_middle;
932
&:first-child { @extend %linked_entry:first-child; }
934
&:last-child { @extend %linked_entry:last-child; }
936
&:only-child { @extend %linked_entry:only-child; }
938
}
939
&:drop(active) { // FIXME: untested
941
box-shadow: none;
942
// button.combo { @extend %button_basic:drop(active); }
944
}
945
}
946
// the combo is a composite widget so the way we do button linking doesn't
948
// work, special case needed. See
949
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
950
.linked:not(.vertical) > combobox {
952
> box > button.combo { @extend %linked_middle; }
953
&:first-child > box > button.combo { @extend %linked_entry:first-child; }
955
&:last-child > box > button.combo { @extend %linked_entry:last-child; }
957
&:only-child > box > button.combo { @extend %linked_entry:only-child; }
959
}
960
.linked.vertical > combobox {
962
> box > button.combo { @extend %linked_vertical_middle; }
963
&:first-child > box > button.combo { @extend %linked_vertical_entry:first-child; }
965
&:last-child > box > button.combo { @extend %linked_vertical_entry:last-child; }
967
&:only-child > box > button.combo { @extend %linked_vertical_entry:only-child; }
969
}
970
button.combo {
972
border-radius: $material_radius $material_radius 0 0;
973
background-image: none;
974
font-weight: inherit;
975
@include entry(normal);
977
&:hover { box-shadow: inset 0 -1px $fg_color; }
979
&:checked { @include entry(focus); }
981
&:disabled { @include entry(disabled); }
983
}
984
/************
987
* Toolbars *
988
************/
989
toolbar {
990
-GtkWidget-window-dragging: true;
991
padding: 2px;
992
background-color: $bg_color;
993
button { @extend %button_basic.flat; }
995
// on OSD
997
.osd & { background-color: transparent; }
998
// stand-alone OSD toolbars
1000
&.osd {
1001
transition: $shadow_transition;
1002
padding: $container_padding;
1003
border-radius: $material_radius;
1004
box-shadow: $shadow_2, inset 0 1px $highlight_color;
1005
background-color: $surface_color;
1006
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
1008
&.left,
1010
&.right,
1011
&.top,
1012
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
1013
}
1014
// toolbar separators
1016
&.horizontal > separator { margin: 2px; }
1017
&.vertical > separator { margin: 2px; }
1018
&:not(.inline-toolbar):not(.osd) {
1020
scale,
1021
entry,
1022
spinbutton,
1023
button { margin: 2px; }
1024
.linked entry,
1026
.linked spinbutton,
1027
.linked button {
1028
&:not(:first-child) { margin-left: 0; }
1029
&:not(:last-child) { margin-right: 0; }
1030
}
1031
spinbutton {
1033
entry,
1034
button { margin: 0; }
1035
}
1036
switch { margin: 2px + $container_padding 2px; }
1038
}
1039
}
1040
// searchbar, location-bar & inline-toolbar
1042
.inline-toolbar {
1043
padding: $container_padding;
1044
border-style: solid;
1045
border-width: 0 1px 1px;
1046
border-color: $border_color;
1047
background-color: $alt_base_color;
1048
}
1049
searchbar > revealer > box,
1051
.location-bar {
1052
padding: $container_padding;
1053
border-style: solid;
1054
border-width: 0 0 1px;
1055
border-color: $border_color;
1056
background-color: $bg_color;
1057
background-clip: border-box;
1058
}
1059
searchbar > revealer > box {
1061
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1062
margin: -6px;
1063
padding: $container_padding;
1064
}
1065
/***************
1068
* Header bars *
1069
***************/
1070
%titlebar,
1071
headerbar {
1072
transition: background-color $shorter_duration $deceleration_curve, color $shorter_duration $deceleration_curve;
1073
min-height: $large_size;
1074
padding: 0 $container_padding;
1075
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1076
background-color: $titlebar_bg_color;
1077
color: $titlebar_fg_color;
1078
&:disabled { color: $titlebar_disabled_fg_color; }
1080
&:backdrop {
1082
color: $titlebar_secondary_fg_color;
1083
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1085
}
1086
.title {
1088
padding: 0 12px;
1089
font-weight: bold;
1090
}
1091
.subtitle {
1093
padding: 0 12px;
1094
font-size: smaller;
1095
@extend .dim-label;
1097
}
1098
entry {
1100
box-shadow: inset 0 -1px $titlebar_track_color;
1101
background-color: $titlebar_fill_color;
1102
color: $titlebar_fg_color;
1103
&:disabled {
1105
box-shadow: inset 0 -1px $titlebar_divider_color;
1106
background-color: $titlebar_fill_color;
1107
color: $titlebar_disabled_fg_color;
1108
}
1109
image {
1111
color: $titlebar_secondary_fg_color;
1112
&:hover, &:active { color: $titlebar_fg_color; }
1114
&:disabled { color: $titlebar_disabled_fg_color; }
1116
}
1117
}
1118
.linked:not(.vertical) > entry:not(.flat) { border-radius: $material_radius $material_radius 0 0; }
1120
button:not(.suggested-action):not(.destructive-action) {
1122
@extend %button_basic.flat;
1123
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1125
$titlebar_indicator_color 0%,
1126
transparent 0%)
1127
0 0 0 / 0 0 0px;
1128
color: $titlebar_secondary_fg_color;
1129
&:hover, &:active { color: $titlebar_fg_color; }
1131
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1133
&:checked {
1135
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1136
$titlebar_indicator_color 100%,
1137
transparent 0%)
1138
0 0 2 / 0 0 2px;
1139
color: $titlebar_fg_color;
1140
&:disabled { color: $titlebar_disabled_fg_color; }
1142
&, &:disabled { background-color: transparent; }
1144
}
1145
&:backdrop {
1147
color: $titlebar_disabled_fg_color;
1148
&:hover, &:active { color: $titlebar_secondary_fg_color; }
1150
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1152
&:checked {
1154
color: $titlebar_secondary_fg_color;
1155
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1157
}
1158
}
1159
}
1160
button.suggested-action, button.destructive-action {
1162
&:disabled {
1163
background-color: $titlebar_fill_color;
1164
color: $titlebar_disabled_fg_color;
1165
}
1166
}
1167
&.selection-mode {
1169
// 0.00001s was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1170
// but let's keep it for backwards compatibility.
1171
transition: background-color 0.00001s $longer_duration, color $longer_duration $deceleration_curve;
1172
animation: header_ripple_effect $longer_duration $deceleration_curve;
1173
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1174
background-color: $primary_color;
1175
color: $inverse_fg_color;
1176
&:backdrop {
1178
color: $inverse_secondary_fg_color;
1179
}
1180
.subtitle:link { @extend *:link:selected; }
1182
button:not(.suggested-action):not(.destructive-action) {
1184
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1185
currentColor 0%,
1186
transparent 0%)
1187
0 0 0 / 0 0 0px;
1188
color: $inverse_fg_color;
1189
&:disabled { color: $inverse_disabled_fg_color; }
1191
&:checked {
1193
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1194
currentColor 100%,
1195
transparent 0%)
1196
0 0 2 / 0 0 2px;
1197
color: $inverse_fg_color;
1198
&:disabled { color: $inverse_disabled_fg_color; }
1200
}
1201
&:backdrop {
1203
color: $inverse_secondary_fg_color;
1204
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1206
&:checked {
1208
color: $inverse_secondary_fg_color;
1209
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1211
}
1212
}
1213
}
1214
.selection-menu {
1216
padding-left: 16px;
1217
padding-right: 16px;
1218
arrow { -GtkArrow-arrow-scaling: 1; }
1220
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1222
}
1223
}
1224
// squared corners when the window is maximized, tiled, or fullscreen
1226
.tiled &,
1227
.tiled-top &,
1228
.tiled-right &,
1229
.tiled-bottom &,
1230
.tiled-left &,
1231
.maximized &,
1232
.fullscreen & {
1233
border-radius: 0;
1234
box-shadow: $shadow_1;
1235
}
1236
&.default-decoration {
1238
min-height: $small_size;
1239
padding: $container_padding;
1240
box-shadow: inset 0 1px $titlebar_highlight_color;
1241
.tiled &,
1243
.maximized &,
1244
.fullscreen & { box-shadow: none; }
1245
button.titlebutton {
1247
min-height: $small_size;
1248
min-width: $small_size;
1249
margin: 0;
1250
padding: 0;
1251
}
1252
// workaround for non-animatable buttons
1254
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1255
}
1256
.solid-csd & {
1258
&:dir(rtl), &:dir(ltr) { // specificity bump
1259
// margin-left: -2px;
1260
// margin-right: -2px;
1261
// margin-top: -2px;
1262
// border-radius: 0;
1263
box-shadow: $shadow_1; // Remove highlight as window managers should have it
1264
}
1265
}
1266
}
1267
headerbar {
1269
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1270
entry,
1271
spinbutton,
1272
button {
1273
margin-top: $container_padding;
1274
margin-bottom: $container_padding;
1275
}
1276
separator {
1278
margin-top: $large_size / 4;
1279
margin-bottom: $large_size / 4;
1280
background-color: $titlebar_divider_color;
1281
}
1282
switch {
1284
margin-top: ($large_size - 24px) / 2;
1285
margin-bottom: ($large_size - 24px) / 2;
1286
}
1287
// reset button margins of the spinbutton
1289
spinbutton button {
1290
margin-top: 0;
1291
margin-bottom: 0;
1292
}
1293
// FIXME: This is a hacky workaround.
1295
.entry-tag {
1296
margin-top: 5px;
1297
margin-bottom: 5px;
1298
}
1299
}
1300
.background .titlebar {
1302
border-top-left-radius: $material_radius;
1303
border-top-right-radius: $material_radius;
1304
}
1305
.background.tiled .titlebar,
1307
.background.tiled-top .titlebar,
1308
.background.tiled-right .titlebar,
1309
.background.tiled-bottom .titlebar,
1310
.background.tiled-left .titlebar,
1311
.background.maximized .titlebar,
1312
.background.solid-csd .titlebar {
1313
border-top-left-radius: 0;
1314
border-top-right-radius: 0;
1315
}
1316
headerbar { // headerbar border rounding
1318
window separator:first-child + &, // tackles the paned container case
1319
window &:first-child { border-top-left-radius: $material_radius; }
1320
window &:last-child { border-top-right-radius: $material_radius; }
1322
window stack & { // tackles the stacked headerbars case
1324
&:first-child, &:last-child {
1325
border-top-left-radius: $material_radius;
1326
border-top-right-radius: $material_radius;
1327
}
1328
}
1329
window.tiled &,
1331
window.tiled-top &,
1332
window.tiled-right &,
1333
window.tiled-bottom &,
1334
window.tiled-left &,
1335
window.maximized &,
1336
window.fullscreen &,
1337
window.solid-csd & {
1338
&,
1339
&:first-child,
1340
&:last-child,
1341
&:only-child {
1342
border-top-left-radius: 0;
1343
border-top-right-radius: 0;
1344
}
1345
}
1346
}
1347
.titlebar:not(headerbar) {
1349
window.csd > & {
1350
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1351
padding: 0;
1352
background-color: transparent;
1353
background-image: none;
1354
border-style: none;
1355
box-shadow: none;
1356
}
1357
> separator {
1359
background-color: $titlebar_bg_color;
1360
background-image: image($border_color);
1361
}
1362
@extend %titlebar;
1364
}
1365
/************
1368
* Pathbars *
1369
************/
1370
%pathbar_button,
1371
.path-bar button {
1372
padding-left: ($medium_size - 24px) / 2;
1373
padding-right: ($medium_size - 24px) / 2;
1374
label:not(:only-child) {
1376
&:first-child { margin-left: 4px; }
1377
&:last-child { margin-right: 4px; }
1379
}
1380
&.slider-button {
1382
padding-left: (24px - 16px) / 2;
1383
padding-right: (24px - 16px) / 2;
1384
}
1385
:not(headerbar) & {
1387
@extend %flat_button;
1388
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1390
$primary_color 0%,
1391
transparent 0%)
1392
0 0 0 / 0 0 0px;
1393
border-radius: $material_radius;
1394
&:checked {
1396
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1397
$primary_color 100%,
1398
transparent 0%)
1399
0 0 2 / 0 0 2px;
1400
&, &:disabled { background-color: transparent; }
1402
}
1403
}
1404
}
1405
/**************
1408
* Tree Views *
1409
**************/
1410
treeview.view {
1411
@at-root * {
1412
-GtkTreeView-horizontal-separator: 4;
1413
-GtkTreeView-grid-line-width: 1;
1414
-GtkTreeView-grid-line-pattern: '';
1415
-GtkTreeView-tree-line-width: 1;
1416
-GtkTreeView-tree-line-pattern: '';
1417
-GtkTreeView-expander-size: 16;
1418
}
1419
border-left-color: $track_color; // this is actually the tree lines color,
1421
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1422
// FIXME: Avoid transparency background-color being slightly darker
1424
&:selected {
1425
background-color: $base_color;
1426
background-image: image($selected_overlay_color);
1427
}
1428
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1430
&:hover, &:selected { border-radius: 0; }
1432
&.separator {
1434
min-height: 1px + 2px * 2;
1435
color: $border_color;
1436
}
1437
&:drop(active) {
1439
border-style: solid none;
1440
border-width: 1px;
1441
border-color: $primary_color;
1442
&.after { border-top-style: none; }
1444
&.before { border-bottom-style: none; }
1446
}
1447
&.expander {
1449
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1450
-gtk-icon-transform: rotate(-90deg);
1451
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1453
&:checked { -gtk-icon-transform: unset; }
1455
color: $secondary_fg_color;
1457
&:hover, &:active { color: $fg_color; }
1459
&:disabled { color: $disabled_secondary_fg_color; }
1461
}
1462
&.progressbar { // progress bar in treeviews
1464
border-bottom: $bar_size solid $primary_color;
1465
box-shadow: none;
1466
background-color: transparent;
1467
}
1468
&.trough { // progress bar trough in treeviews
1470
border-bottom: $bar_size solid $divider_color;
1471
box-shadow: none;
1472
background-color: transparent;
1473
}
1474
header {
1476
button {
1477
@extend row.activatable;
1478
padding: 2px 6px;
1480
border-style: none solid solid none;
1481
border-width: 1px;
1482
border-color: $border_color;
1483
border-radius: 0;
1484
background-clip: border-box;
1485
&:not(:hover):not(:active) { color: $secondary_fg_color; }
1487
&, &:hover, &:active { box-shadow: none; }
1489
&, &:disabled { background-color: $base_color; }
1491
&:last-child { border-right-style: none; }
1493
}
1494
}
1495
button.dnd,
1497
header.button.dnd { // for treeview-like derive widgets
1498
padding: 2px 6px;
1499
border-style: none solid solid;
1500
border-width: 1px;
1501
border-color: $border_color;
1502
border-radius: 0;
1503
box-shadow: none;
1504
background-color: $base_color;
1505
background-clip: border-box;
1506
color: $primary_color;
1507
}
1508
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1510
}
1511
/*********
1514
* Menus *
1515
*********/
1516
menubar,
1517
.menubar {
1518
-GtkWidget-window-dragging: true;
1519
padding: 0;
1520
// box-shadow: inset 0 -1px $border_color;
1521
background-color: $titlebar_bg_color;
1522
> menuitem {
1524
transition: $shorter_transition;
1525
min-height: 20px;
1526
padding: 4px 8px;
1527
color: $titlebar_secondary_fg_color;
1528
&:hover { // Seems like it :hover even with keyboard focus
1530
transition: none;
1531
background-color: $titlebar_divider_color;
1532
color: $titlebar_fg_color;
1533
}
1534
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1536
label:disabled { color: inherit; } // to inherit the above color
1538
}
1539
}
1540
.csd.popup { background-color: transparent; }
1542
menu,
1544
.menu,
1545
.context-menu {
1546
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1547
padding: 4px 0;
1548
box-shadow: inset 0 1px $highlight_color;
1549
background-color: $surface_color;
1550
border: 1px solid $border_color; // adds borders in a non composited env
1551
.csd & {
1553
border: none; // axes borders in a composited env
1554
border-radius: $material_radius;
1555
}
1556
menuitem {
1558
transition: background-color $shorter_duration $deceleration_curve;
1559
min-height: 20px;
1560
min-width: 40px;
1561
padding: 4px 8px;
1562
font: initial;
1563
text-shadow: none;
1564
&:hover {
1566
transition: none;
1567
background-color: $divider_color;
1568
}
1569
&:disabled { color: $disabled_fg_color; }
1571
// submenu indicators
1573
arrow {
1574
min-height: 16px;
1575
min-width: 16px;
1576
&:dir(ltr) {
1578
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1579
margin-left: 8px;
1580
}
1581
&:dir(rtl) {
1583
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1584
margin-right: 8px;
1585
}
1586
}
1587
// avoids labels color being overridden, see
1589
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1590
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1591
}
1592
// overflow arrows
1594
> arrow {
1595
min-height: 16px;
1596
min-width: 16px;
1597
padding: 4px;
1598
background-color: $surface_color;
1599
color: $secondary_fg_color;
1600
&.top {
1602
margin-top: -4px;
1603
border-bottom: 1px solid $border_color;
1604
border-radius: $material_radius $material_radius 0 0;
1605
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1606
}
1607
&.bottom {
1609
margin-top: 4px * 2;
1610
margin-bottom: -4px * 3;
1611
border-top: 1px solid $border_color;
1612
border-radius: 0 0 $material_radius $material_radius;
1613
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1614
}
1615
&:hover {
1617
background-image: image($divider_color);
1618
color: $fg_color;
1619
}
1620
&:disabled {
1622
border-color: transparent;
1623
background-color: transparent;
1624
color: transparent;
1625
// color: $disabled_secondary_fg_color;
1626
}
1627
}
1628
separator { margin: 4px 0; }
1630
}
1631
menuitem {
1633
accelerator { color: $secondary_fg_color; }
1634
&:disabled accelerator { color: $disabled_secondary_fg_color; }
1636
}
1637
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1639
// Electron/Atom render all translucent colors in opaque colors.
1640
// It's a very critical issue for this theme and should be fixed by upstream...
1641
.popup:not(.csd) menu {
1642
menuitem {
1643
color: $opaque_fg_color;
1644
&:hover { background-color: $opaque_divider_color; }
1646
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1648
}
1649
// FIXME: not working this
1651
accelerator { color: $opaque_secondary_fg_color; }
1652
}
1653
/************
1656
* Popovers *
1657
************/
1658
popover.background {
1659
transition: $shadow_transition;
1660
padding: 2px;
1661
box-shadow: $shadow_2; // TODO: this should really have a highlight
1662
background-color: $surface_color;
1663
&:backdrop { box-shadow: $shadow_1; }
1665
&, .csd & {
1667
border-style: solid;
1668
border-width: 1px;
1669
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1670
border-radius: $material_radius + 1px;
1671
}
1672
> stack { margin: -4px; } // remove extra padding from menu style popovers
1674
> toolbar { margin: -2px; }
1676
> list,
1678
> .view,
1679
> toolbar {
1680
border-style: none;
1681
box-shadow: none;
1682
background-color: transparent;
1683
}
1684
// FIXME: Use the popover color instead of transparent as a workaround for .view
1686
list,
1687
.view:not(:selected),
1688
toolbar { background-color: $surface_color; }
1689
// &.touch-selection,
1691
// &.magnifier,
1692
// &.osd { @extend %osd; }
1693
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1695
&.menu button,
1697
button.model {
1698
@extend %simple_flat_button;
1699
min-height: 32px;
1701
padding: 0 8px;
1702
border-radius: $material_radius;
1703
&:checked { @extend %selected_items; }
1705
}
1706
separator { margin: 4px 0; }
1708
list separator { margin: 0; }
1710
}
1711
/*************
1713
* Notebooks *
1714
*************/
1715
notebook {
1716
frame > paned > & > header,
1717
&.frame > header { background-color: $alt_base_color; }
1718
&:focus tab:checked {
1720
box-shadow: inset 0 0 0 9999px rgba($primary_color, 0.12);
1721
outline: none;
1722
}
1723
> header {
1725
border-width: 1px;
1726
border-color: $border_color;
1727
background-color: $bg_color;
1728
background-clip: border-box;
1729
&.top {
1731
border-bottom-style: solid;
1732
> tabs {
1734
margin-bottom: -1px;
1735
> tab {
1737
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1738
&:checked { border-image-source: linear-gradient(to top, $primary_color 2px, $border_color 2px); }
1740
&.reorderable-page { border-image-width: 0 1px 2px; }
1742
}
1743
}
1744
}
1745
&.bottom {
1747
border-top-style: solid;
1748
> tabs {
1750
margin-top: -1px;
1751
> tab {
1753
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1754
&:checked { border-image-source: linear-gradient(to bottom, $primary_color 2px, $border_color 2px); }
1756
&.reorderable-page { border-image-width: 2px 1px 0; }
1758
}
1759
}
1760
}
1761
&.left {
1763
border-right-style: solid;
1764
> tabs {
1766
margin-right: -1px;
1767
> tab {
1769
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1770
&:checked { border-image-source: linear-gradient(to left, $primary_color 2px, $border_color 2px); }
1772
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1774
}
1775
}
1776
}
1777
&.right {
1779
border-left-style: solid;
1780
> tabs {
1782
margin-left: -1px;
1783
> tab {
1785
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1786
&:checked { border-image-source: linear-gradient(to right, $primary_color 2px, $border_color 2px); }
1788
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1790
}
1791
}
1792
}
1793
&.top > tabs > arrow {
1795
@extend %notebook_vert_arrows;
1796
border-top-style: none;
1798
}
1799
&.bottom > tabs > arrow {
1801
@extend %notebook_vert_arrows;
1802
border-bottom-style: none;
1804
}
1805
@at-root %notebook_vert_arrows {
1807
padding-left: 4px;
1808
padding-right: 4px;
1809
&.down {
1811
margin-left: -8px;
1812
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1813
}
1814
&.up {
1816
margin-right: -8px;
1817
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1818
}
1819
}
1820
&.left > tabs > arrow {
1822
@extend %notebook_horz_arrows;
1823
border-left-style: none;
1825
}
1826
&.right > tabs > arrow {
1828
@extend %notebook_horz_arrows;
1829
border-right-style: none;
1831
}
1832
@at-root %notebook_horz_arrows {
1834
padding-top: 4px;
1835
padding-bottom: 4px;
1836
&.down {
1838
margin-top: -8px;
1839
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1840
}
1841
&.up {
1843
margin-bottom: -8px;
1844
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1845
}
1846
}
1847
> tabs > arrow {
1849
@extend %simple_flat_button;
1850
min-height: 16px;
1852
min-width: 16px;
1853
border-radius: 0;
1854
}
1855
tab {
1857
transition: $shorter_transition,
1858
background-size 0,
1859
background-image 0;
1860
min-height: $small_size;
1861
min-width: $small_size;
1862
padding: $container_padding 12px;
1863
outline-offset: -6px;
1865
border-width: 1px; // for reorderable tabs
1867
border-color: transparent; //
1868
background-image: radial-gradient(circle farthest-corner at center,
1870
$primary_color 10%,
1871
transparent 0%);
1872
background-repeat: no-repeat;
1873
background-position: center;
1874
background-size: 0% 0%;
1875
background-clip: border-box;
1876
color: $secondary_fg_color;
1878
font-weight: 500;
1879
&:hover {
1881
background-color: $hover_overlay_color;
1882
color: $fg_color;
1883
}
1884
&:disabled { color: $disabled_secondary_fg_color; }
1886
&:checked {
1888
transition: $shorter_transition,
1889
background-size $longer_duration $deceleration_curve,
1890
background-image $longer_duration + $ripple_duration $deceleration_curve;
1891
background-color: transparent;
1892
background-image: radial-gradient(circle farthest-corner at center,
1893
transparent 10%,
1894
transparent 0%);
1895
background-size: 1000% 1000%;
1896
background-clip: padding-box;
1897
color: $fg_color;
1898
&:disabled { color: $disabled_fg_color; }
1900
&.reorderable-page {
1902
border-color: $border_color;
1903
background-color: $base_color;
1904
}
1905
}
1906
// colors the button like the label, overridden otherwise
1908
button.flat {
1909
@extend %small_button;
1910
&:last-child {
1912
margin-left: $container_padding;
1913
margin-right: $container_padding - 12px;
1914
}
1915
&:first-child {
1917
margin-left: $container_padding - 12px;
1918
margin-right: $container_padding;
1919
}
1920
}
1921
}
1922
&.top,
1924
&.bottom {
1925
tabs {
1926
padding-left: 8px;
1927
padding-right: 8px;
1928
&:not(:only-child) {
1930
&:first-child { margin-left: 0; }
1931
&:last-child { margin-right: 0; }
1933
}
1934
tab.reorderable-page { border-style: none solid; }
1936
}
1937
}
1938
&.left,
1940
&.right {
1941
tabs {
1942
padding-top: 8px;
1943
padding-bottom: 8px;
1944
&:not(:only-child) {
1946
&:first-child { margin-top: 0; }
1947
&:last-child { margin-bottom: 0; }
1949
}
1950
tab.reorderable-page { border-style: solid none; }
1952
}
1953
}
1954
}
1955
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1957
background-color: $base_color;
1958
}
1959
}
1960
/**************
1963
* Scrollbars *
1964
**************/
1965
scrollbar {
1966
$_slider_min_length: 24px;
1967
// disable steppers
1969
@at-root * {
1970
-GtkScrollbar-has-backward-stepper: false;
1971
-GtkScrollbar-has-forward-stepper: false;
1972
}
1973
transition: $shorter_transition;
1975
background-color: $base_color;
1976
background-clip: $extra_background_clip;
1977
// scrollbar border
1979
&.top { border-bottom: 1px solid $border_color; }
1980
&.bottom { border-top: 1px solid $border_color; }
1981
&.left { border-right: 1px solid $border_color; }
1982
&.right { border-left: 1px solid $border_color; }
1983
// slider
1985
slider {
1986
transition: $shorter_transition, margin 0, border-width 0;
1987
min-width: 8px;
1988
min-height: 8px;
1989
border: 4px solid transparent;
1990
border-radius: $circular_radius;
1991
background-clip: padding-box;
1992
background-color: $disabled_fg_color;
1993
&:hover { background-color: $secondary_fg_color; }
1995
&:active { background-color: $fg_color; }
1997
&:disabled { background-color: $disabled_secondary_fg_color; }
1999
}
2000
&.fine-tune {
2002
slider {
2003
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
2004
min-width: 4px;
2005
min-height: 4px;
2006
}
2007
&.horizontal slider { margin: 2px 0; }
2009
&.vertical slider { margin: 0 2px; }
2011
}
2012
&.overlay-indicator {
2014
&:not(.dragging):not(.hovering) {
2015
border-color: transparent;
2016
background-color: transparent;
2017
slider {
2019
min-width: 4px;
2020
min-height: 4px;
2021
margin: 4px - 1px;
2022
border: 1px solid rgba($base_color, 0.3);
2023
}
2024
button {
2026
min-width: 4px;
2027
min-height: 4px;
2028
margin: 4px - 1px;
2029
border: 1px solid rgba($base_color, 0.3);
2030
border-radius: $circular_radius;
2031
background-color: $disabled_fg_color;
2032
background-clip: padding-box;
2033
-gtk-icon-source: none;
2034
&:disabled { background-color: $disabled_secondary_fg_color; }
2036
}
2037
&.horizontal {
2039
slider { min-width: $_slider_min_length; }
2040
button { min-width: 8px; }
2042
}
2043
&.vertical {
2045
slider { min-height: $_slider_min_length; }
2046
button { min-height: 8px; }
2048
}
2049
}
2050
&.dragging,
2052
&.hovering { background-color: rgba($base_color, 0.9); }
2053
}
2054
&.horizontal slider { min-width: $_slider_min_length; }
2056
&.vertical slider { min-height: $_slider_min_length; }
2058
// button styling
2060
button {
2061
@extend %simple_flat_button;
2062
min-width: 16px;
2064
min-height: 16px;
2065
padding: 0;
2066
border-radius: 0;
2067
}
2068
// button icons
2070
&.vertical {
2071
button {
2072
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2073
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2075
}
2076
}
2077
&.horizontal {
2079
button {
2080
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2081
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2083
}
2084
}
2085
}
2086
/**********
2089
* Switch *
2090
**********/
2091
switch {
2092
transition: all $shorter_duration $deceleration_curve;
2093
margin: $container_padding 0;
2094
padding: 0 2px;
2095
border: 5px solid transparent;
2096
border-radius: $circular_radius;
2097
background-color: $track_color;
2098
background-clip: padding-box;
2099
font-size: 0;
2100
&:checked { background-color: rgba($primary_color, 0.5); }
2102
&:disabled { opacity: 0.5; }
2104
// hide on/off icons for >=3.24.4
2106
image {
2107
margin: -8px;
2108
-gtk-icon-transform: scale(0);
2109
}
2110
slider {
2112
transition: all $shorter_duration $deceleration_curve;
2113
min-width: 20px;
2114
min-height: 20px;
2115
margin: -3px -2px;
2116
border-radius: $circular_radius;
2117
box-shadow: 0 0 0 10px transparent, $shadow_1;
2118
background-color: $surface_color;
2119
}
2120
&:hover slider { box-shadow: 0 0 0 10px $hover_overlay_color, $shadow_1; }
2122
&:focus slider { box-shadow: 0 0 0 10px $focus_overlay_color, $shadow_1; }
2124
&:focus:hover slider { box-shadow: 0 0 0 10px $hover_focus_overlay_color, $shadow_1; }
2126
&:checked slider {
2128
background-color: $primary_color;
2129
color: $primary_color;
2130
}
2131
row:selected & {
2133
}
2134
}
2135
/*************************
2138
* Check and Radio items *
2139
*************************/
2140
// draw regular check and radio items using our PNG assets
2141
// all assets are rendered from assets.svg. never add pngs directly
2142
// selection-mode
2144
.view.content-view.check:not(list),
2145
.content-view .tile check:not(list) {
2146
min-height: 40px;
2147
min-width: 40px;
2148
margin: 0;
2149
padding: 0;
2150
box-shadow: none;
2151
background-color: transparent;
2152
background-image: none;
2153
-gtk-icon-shadow: $shadow_1;
2154
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2156
@each $s, $as in ('', '-unchecked'),
2158
(':checked', '-checked') {
2159
&#{$s} {
2160
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2161
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2162
}
2163
}
2164
}
2165
checkbutton,
2167
radiobutton {
2168
outline: none;
2169
}
2170
checkbutton.text-button,
2172
radiobutton.text-button {
2173
// this is for a nice focus on check and radios text
2174
padding: 2px;
2175
label:not(:only-child) { margin: 0 4px; }
2177
}
2178
$check_radio_size: 40px;
2180
check,
2182
radio {
2183
min-height: 24px;
2184
min-width: 24px;
2185
margin: -($check_radio_size - 24px) / 2;
2186
padding: ($check_radio_size - 24px) / 2;
2187
@extend %simple_flat_button;
2189
@extend %circular_button;
2191
&:hover { box-shadow: inset 0 0 0 9999px $hover_overlay_color; }
2193
&:focus { box-shadow: inset 0 0 0 9999px $focus_overlay_color; }
2195
&:focus:hover { box-shadow: inset 0 0 0 9999px $hover_focus_overlay_color; }
2197
&:checked, &:indeterminate {
2199
color: $primary_color;
2200
&:disabled { color: $disabled_secondary_fg_color; }
2202
}
2203
// &:only-child { margin: -12px; }
2205
popover modelbutton.flat & {
2207
&, &:hover, &:focus, &:focus:hover, &:active, &:disabled {
2208
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2209
box-shadow: none;
2210
background-image: none;
2211
}
2212
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2214
&.left:dir(rtl) {
2216
margin-left: -12px;
2217
margin-right: -4px;
2218
}
2219
&.right:dir(ltr) {
2221
margin-left: -4px;
2222
margin-right: -12px;
2223
}
2224
}
2225
menu menuitem & {
2227
transition: none;
2228
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2229
padding: 0;
2230
&:dir(ltr) { margin-right: 8px; }
2232
&:dir(rtl) { margin-left: 8px; }
2234
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2236
&, &:hover, &:disabled {
2238
box-shadow: none;
2239
// color: inherit;
2240
}
2241
}
2242
}
2243
%check,
2245
check {
2246
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2247
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2249
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2251
}
2252
%radio,
2254
radio {
2255
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2256
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2258
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2260
border-image-slice: $check_radio_size / 2px;
2262
border-image-width: $check_radio_size / 2;
2263
$radio_indicator: 10px / $check_radio_size / 2;
2265
& {
2267
border-image-source: -gtk-gradient(radial,
2268
center center, 0,
2269
center center, 0.001,
2270
to($primary_color),
2271
to(transparent));
2272
}
2273
&:checked:not(:indeterminate) {
2275
border-image-source: -gtk-gradient(radial,
2276
center center, 0,
2277
center center, $radio_indicator,
2278
to($primary_color),
2279
to(transparent));
2280
}
2281
&:checked:not(:indeterminate):disabled {
2283
border-image-source: -gtk-gradient(radial,
2284
center center, 0,
2285
center center, $radio_indicator,
2286
to($disabled_secondary_fg_color),
2287
to(transparent));
2288
}
2289
}
2290
%small_check,
2292
menu menuitem check {
2293
& {
2294
min-height: 16px;
2295
min-width: 16px;
2296
border-radius: $material_radius;
2297
-gtk-outline-radius: $material_radius;
2298
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2299
}
2300
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2302
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2304
}
2305
%small_radio,
2307
menu menuitem radio {
2308
& {
2309
min-height: 16px;
2310
min-width: 16px;
2311
border-image: none;
2312
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2313
}
2314
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2316
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2318
}
2319
// ANIMATION:
2321
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2322
// the transformation is set on the active state and it get reset on the checked state.
2323
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2324
treeview.view check,
2326
treeview.view radio {
2327
padding: 0;
2328
&:hover, &:selected {
2330
box-shadow: none;
2331
background-color: transparent;
2332
}
2333
& {
2335
color: $secondary_fg_color;
2336
&:hover, &:active { color: $fg_color; }
2338
&:disabled { color: $disabled_secondary_fg_color; }
2340
&:checked, &:indeterminate { color: $primary_color; }
2342
&:checked:disabled, &:indeterminate:disabled { color: $disabled_secondary_fg_color; }
2344
}
2345
}
2346
treeview.view radio:checked {
2348
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2349
border-image: none;
2350
}
2351
/************
2354
* GtkScale *
2355
************/
2356
scale {
2357
// sizing
2358
$_marks_length: 8px;
2359
$_marks_distance: 7px;
2360
$trough_size: 2px;
2362
$finetune_trough_size: 4px;
2363
$slider_size: 32px;
2365
$slider_margin: -($slider_size - $trough_size) / 2;
2367
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2368
$color_slider_margin: -($slider_size) * 3 / 4;
2370
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2371
min-height: $trough_size;
2373
min-width: $trough_size;
2374
&.horizontal { padding: ($medium_size - $trough_size) / 2 12px; }
2376
&.vertical { padding: 12px ($medium_size - $trough_size) / 2; }
2378
// the slider is inside the trough, so to have make it bigger there's a negative margin
2380
slider {
2381
min-height: $slider_size;
2382
min-width: $slider_size;
2383
margin: $slider_margin;
2384
}
2385
// click-and-hold the slider to activate
2387
&.fine-tune {
2388
&.horizontal {
2389
min-height: $finetune_trough_size;
2390
padding-top: ($medium_size - $finetune_trough_size) / 2;
2391
padding-bottom: ($medium_size - $finetune_trough_size) / 2;
2392
}
2393
&.vertical {
2395
min-width: $finetune_trough_size;
2396
padding-left: ($medium_size - $finetune_trough_size) / 2;
2397
padding-right: ($medium_size - $finetune_trough_size) / 2;
2398
}
2399
// to make the trough grow in fine-tune mode
2401
slider { margin: $finetune_slider_margin; }
2402
}
2403
// the backing bit
2405
trough {
2406
transition: background-color $shorter_duration $deceleration_curve;
2407
outline: none;
2408
background-color: $track_color;
2409
&:disabled { background-color: $divider_color; }
2411
}
2412
// the colored part of the backing bit
2414
highlight {
2415
transition: background-color $shorter_duration $deceleration_curve;
2416
background-color: $primary_color;
2417
&:disabled { background-color: transparent; }
2419
}
2420
// this is another differently styled part of the backing bit, the most relevant use case is for example
2422
// in media player to indicate how much video stream as been cached
2423
fill {
2424
transition: background-color $shorter_duration $deceleration_curve;
2425
background-color: $track_color;
2426
&:disabled { background-color: transparent; }
2428
}
2429
slider {
2431
transition: background-color $shorter_duration $deceleration_curve,
2432
background-size $ripple_duration $deceleration_curve,
2433
background-image $ripple_opacity_duration $deceleration_curve;
2434
background-repeat: no-repeat;
2435
background-position: center;
2436
background-size: auto, 1000% 1000%;
2437
border-radius: 50%;
2438
color: transparent;
2439
@each $s, $as in ('', ''),
2441
(':disabled', '-disabled') {
2442
&#{$s} {
2443
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2444
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2446
radial-gradient(circle farthest-corner at center,
2447
currentColor 10%,
2448
transparent 0%);
2449
}
2450
}
2451
&:hover { background-color: rgba($primary_color, 0.08); }
2453
&:focus { background-color: rgba($primary_color, 0.12); }
2455
&:focus:hover { background-color: rgba($primary_color, 0.16); }
2457
&:active {
2459
transition: background-color $shorter_duration $deceleration_curve,
2460
background-size 0,
2461
background-image 0;
2462
animation: scale_ripple_effect $longer_duration $deceleration_curve forwards;
2463
background-size: auto, 0% 0%;
2464
background-color: rgba($primary_color, 0.08);
2465
color: rgba($primary_color, 0.12);
2466
}
2467
}
2468
marks label,
2470
value { color: $secondary_fg_color; }
2471
marks {
2473
color: $track_color;
2474
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2476
(bottom, bottom, top),
2477
(left, left, right),
2478
(right, right, left) {
2479
&.#{$marks_class} {
2480
margin-#{$marks_margin}: $_marks_distance;
2481
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2482
}
2483
}
2484
}
2485
&.fine-tune marks {
2487
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2488
(bottom, bottom, top),
2489
(left, left, right),
2490
(right, right, left) {
2491
&.#{$marks_class} {
2492
margin-#{$marks_margin}: $_marks_distance - 1px;
2493
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2494
}
2495
}
2496
}
2497
&.horizontal {
2499
indicator {
2500
min-height: $_marks_length;
2501
min-width: 1px;
2502
}
2503
}
2504
&.vertical {
2506
indicator {
2507
min-height: 1px;
2508
min-width: $_marks_length;
2509
}
2510
}
2511
// *WARNING* scale with marks madness following
2513
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2515
('vertical', 'vert') {
2516
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2517
('marks-after', 'marks-after:not(.marks-before)') {
2518
&.#{$dir_class}.#{$marks_class} {
2519
slider {
2520
@each $state, $state_infix in ('', ''),
2521
(':disabled', '-disabled') {
2522
&#{$state} {
2523
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2524
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2526
radial-gradient(circle farthest-corner at center,
2527
currentColor 10%,
2528
transparent 0%);
2529
}
2530
}
2531
}
2532
}
2533
}
2534
}
2535
&.color {
2537
min-height: 0;
2538
min-width: 0;
2539
&.horizontal {
2541
padding: 0 0 12px 0;
2542
slider {
2544
&:dir(ltr), &:dir(rtl) { // specificity bump
2545
margin-bottom: $color_slider_margin;
2546
margin-top: $color_marks_slider_margin;
2547
}
2548
}
2549
}
2550
&.vertical {
2552
&:dir(ltr) {
2553
padding: 0 0 0 12px;
2554
slider {
2556
margin-left: $color_slider_margin;
2557
margin-right: $color_marks_slider_margin;
2558
}
2559
}
2560
&:dir(rtl) {
2562
padding: 0 12px 0 0;
2563
slider {
2565
margin-right: $color_slider_margin;
2566
margin-left: $color_marks_slider_margin;
2567
}
2568
}
2569
}
2570
}
2571
}
2572
/*****************
2575
* Progress bars *
2576
*****************/
2577
progressbar {
2578
// sizing
2579
&.horizontal {
2580
trough,
2581
progress { min-height: $bar_size; }
2582
}
2583
&.vertical {
2585
trough,
2586
progress { min-width: $bar_size; }
2587
}
2588
// FIXME: insensitive state missing and some other state should be set probably
2590
color: $secondary_fg_color;
2591
font-size: smaller;
2592
trough { background-color: $divider_color; }
2594
progress { background-color: $primary_color; }
2596
&.osd { // progressbar.osd used for epiphany page loading progress
2598
// min-width: $bar_size;
2599
// min-height: $bar_size;
2600
// background-color: transparent;
2601
// trough { background-color: transparent; }
2603
// progress { background-color: $primary_color; }
2605
}
2606
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2608
}
2609
/*************
2612
* Level Bar *
2613
*************/
2614
levelbar {
2615
&.horizontal {
2616
block { min-height: $bar_size; }
2617
&.discrete block {
2619
min-width: $medium_size;
2620
&:not(:last-child) { margin-right: 2px; }
2622
}
2623
}
2624
&.vertical {
2626
block { min-width: $bar_size; }
2627
&.discrete block {
2629
min-height: $medium_size;
2630
&:not(:last-child) { margin-bottom: 2px; }
2632
}
2633
}
2634
// imitate the entry style
2636
trough {
2637
// padding: 2px;
2638
// border-radius: $material_radius;
2639
// box-shadow: $shadow_1;
2640
// background-color: $base_color;
2641
// &:disabled { background-color: $alt_base_color; }
2643
}
2644
block {
2646
&.low { background-color: $warning_color; }
2647
&.high,
2649
&:not(.empty) { background-color: $primary_color; }
2650
&.full { background-color: $success_color; }
2652
&.empty { background-color: $divider_color; }
2654
}
2655
}
2656
/****************
2659
* Print dialog *
2660
*****************/
2661
printdialog {
2662
paper {
2663
padding: 0;
2664
border: 1px solid $border_color;
2665
background-color: $base_color;
2666
color: $fg_color;
2667
}
2668
.dialog-action-box { margin: 12px; }
2670
}
2671
/**********
2674
* Frames *
2675
**********/
2676
frame > border,
2677
.frame {
2678
margin: 0;
2679
padding: 0;
2680
border: 1px solid $border_color;
2681
border-radius: 0;
2682
box-shadow: none;
2683
&.flat { border-style: none; }
2685
}
2686
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2688
actionbar > revealer > box {
2690
padding: $container_padding;
2691
border-top: 1px solid $border_color;
2692
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2694
}
2695
scrolledwindow {
2697
viewport.frame { // avoid double borders when viewport inside scrolled window
2698
border-style: none;
2699
}
2700
// This is used when content is touch-dragged past boundaries.
2702
// draws a box on top of the content, the size changes programmatically.
2703
@at-root overshoot {
2704
&.top { @include overshoot(top); }
2705
&.bottom { @include overshoot(bottom); }
2707
&.left { @include overshoot(left); }
2709
&.right { @include overshoot(right); }
2711
}
2712
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2714
@at-root undershoot {
2715
&.top { @include undershoot(top); }
2716
&.bottom { @include undershoot(bottom); }
2718
&.left { @include undershoot(left); }
2720
&.right { @include undershoot(right); }
2722
}
2723
@at-root junction { // the small square between two scrollbars
2725
border-style: solid none none solid;
2726
border-width: 1px;
2727
border-color: $border_color;
2728
background-color: $base_color;
2729
&:dir(rtl) { border-style: solid solid none none; }
2731
}
2732
}
2733
// vbox and hbox separators
2735
separator {
2736
min-width: 1px;
2737
min-height: 1px;
2738
background-color: $border_color;
2739
}
2740
%hide_separators {
2742
min-width: 0;
2743
min-height: 0;
2744
background-color: transparent;
2745
}
2746
/*********
2749
* Lists *
2750
*********/
2751
list {
2752
border-color: $border_color;
2753
background-color: $base_color;
2754
row { padding: 2px; }
2756
}
2757
row {
2759
&.activatable {
2760
transition: $shorter_transition,
2761
background-size $ripple_duration $deceleration_curve,
2762
background-image $ripple_opacity_duration $deceleration_curve;
2763
box-shadow: inset 0 0 0 9999px transparent;
2764
background-image: radial-gradient(circle farthest-corner at center,
2765
transparent 10%,
2766
transparent 0%);
2767
background-repeat: no-repeat;
2768
background-position: center;
2769
background-size: 1000% 1000%;
2770
&:hover {
2772
transition: $shorter_transition,
2773
box-shadow 0,
2774
background-size $ripple_duration $deceleration_curve,
2775
background-image $ripple_opacity_duration $deceleration_curve;
2776
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2777
}
2778
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2780
&:active {
2781
transition: $shorter_transition,
2782
background-size 0,
2783
background-image 0;
2784
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2785
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2786
background-image: radial-gradient(circle farthest-corner at center,
2787
$active_overlay_color 10%,
2788
transparent 0%);
2789
background-size: 0% 0%;
2790
}
2791
}
2792
&:selected {
2794
@extend %selected_items;
2795
color: $primary_color; // for overlays
2796
image,
2798
label { color: $fg_color; }
2799
button image,
2801
button label { color: inherit; }
2802
}
2803
}
2804
/*********************
2807
* App Notifications *
2808
*********************/
2809
.app-notification {
2810
// @extend %osd;
2811
@extend toolbar.osd;
2813
margin: 8px;
2815
button { @extend %button_basic.flat; }
2817
&.frame,
2819
border { border-style: none; }
2820
}
2821
/*************
2824
* Expanders *
2825
*************/
2826
expander {
2827
title > arrow {
2828
transition: all $shorter_duration $deceleration_curve;
2829
min-width: 16px;
2830
min-height: 16px;
2831
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2832
-gtk-icon-transform: rotate(-90deg);
2833
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2835
&:checked { -gtk-icon-transform: unset; }
2837
color: $secondary_fg_color;
2839
&:hover, &:active { color: $fg_color; }
2841
&:disabled { color: $disabled_secondary_fg_color; }
2843
}
2844
}
2845
/************
2848
* Calendar *
2849
************/
2850
calendar {
2851
padding: 1px;
2852
border: 1px solid $border_color;
2853
color: $fg_color;
2854
&:disabled { color: $disabled_fg_color; }
2856
&:selected {
2858
@extend %selected_items;
2859
border-radius: $material_radius + 1px;
2861
}
2862
&.header {
2864
border-style: none none solid;
2865
border-radius: 0;
2866
}
2867
&.button { @extend %simple_flat_button; }
2869
&.highlight {
2871
color: $secondary_fg_color;
2872
font-weight: 500;
2873
}
2874
&:indeterminate { color: $disabled_secondary_fg_color; }
2876
}
2877
/***********
2880
* Dialogs *
2881
***********/
2882
messagedialog { // Message Dialog styling
2883
&.background { background-color: $surface_color; }
2884
.titlebar {
2886
min-height: $small_size;
2887
border-style: none;
2888
box-shadow: inset 0 1px $highlight_color;
2889
background-color: $surface_color;
2890
color: $fg_color;
2891
&:backdrop { color: $secondary_fg_color; }
2893
}
2894
&.csd { // rounded bottom border styling for csd version
2896
&.background {
2897
// bigger radius for better antialiasing
2898
border-bottom-left-radius: $material_radius;
2899
border-bottom-right-radius: $material_radius;
2900
}
2901
.dialog-action-area {
2903
margin-top: -$container_padding;
2904
padding: $container_padding;
2905
button {
2907
@extend %simple_flat_button;
2908
border-radius: $material_radius;
2909
&:not(:last-child) { margin-right: $container_padding; }
2911
&.suggested-action:not(:disabled) { color: $suggested_color; }
2913
&.destructive-action:not(:disabled) { color: $destructive_color; }
2915
}
2916
}
2917
}
2918
}
2919
filechooser {
2921
.dialog-action-box { border-top: 1px solid $border_color; }
2922
#pathbarbox {
2924
border-bottom: 1px solid $border_color;
2925
background-color: $bg_color;
2926
> stack > box > button { // The new folder button
2928
@extend %button_basic.flat;
2929
@extend %circular_button;
2930
}
2931
}
2932
}
2933
filechooserbutton:drop(active) {
2935
box-shadow: none;
2936
}
2937
/***********
2940
* Sidebar *
2941
***********/
2942
.sidebar {
2943
border-style: none;
2944
background-color: $alt_base_color;
2945
@at-root %sidebar_left,
2947
&:dir(ltr),
2948
&.left,
2949
&.left:dir(rtl) {
2950
border-right: 1px solid $border_color;
2951
border-left-style: none;
2952
}
2953
@at-root %sidebar_right,
2955
&:dir(rtl),
2956
&.right {
2957
border-left: 1px solid $border_color;
2958
border-right-style: none;
2959
}
2960
list { background-color: transparent; }
2962
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2964
}
2965
stacksidebar {
2967
&.sidebar {
2968
&:dir(ltr),
2969
&.left,
2970
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2971
&:dir(rtl),
2973
&.right { list { @extend %sidebar_right; }}
2974
}
2975
row {
2977
padding: 10px 4px;
2978
> label {
2980
padding-left: 6px;
2981
padding-right: 6px;
2982
}
2983
&.needs-attention > label { @extend %needs_attention; }
2985
}
2986
}
2987
/****************
2990
* File chooser *
2991
****************/
2992
// dim the sidebar icons, see bug #786613 for details on this oddity
2993
row {
2994
image.sidebar-icon { color: $secondary_fg_color; }
2995
}
2996
placessidebar {
2998
> viewport.frame { border-style: none; }
2999
list { padding: (4px - 3px) 0 4px; }
3001
row {
3003
// Needs overriding of the GtkListBoxRow padding
3004
min-height: 32px;
3005
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3006
padding: 0;
3007
border-radius: $material_radius;
3008
// Using margins/padding directly in the SidebarRow
3010
// will make the animation of the new bookmark row jump
3011
> revealer { padding: 0 8px; }
3012
&:selected { font-weight: 500; }
3014
&:disabled { color: $disabled_fg_color; }
3016
image.sidebar-icon {
3018
&:dir(ltr) { padding-right: 8px; }
3019
&:dir(rtl) { padding-left: 8px; }
3020
}
3021
label.sidebar-label {
3023
&:dir(ltr) { padding-right: 2px; }
3024
&:dir(rtl) { padding-left: 2px; }
3025
}
3026
&:selected image.sidebar-icon,
3028
&:selected label.sidebar-label { color: inherit; }
3029
@at-root button.sidebar-button {
3031
@extend %simple_flat_button;
3032
@extend %small_button;
3033
}
3034
&.sidebar-placeholder-row {
3036
min-height: 2px;
3037
padding: 0 8px;
3038
background-image: image($primary_color);
3039
background-clip: content-box;
3040
}
3041
&.sidebar-new-bookmark-row { color: $primary_color; }
3043
&:drop(active):not(:disabled) {
3045
box-shadow: inset 0 0 0 2px $primary_color;
3046
}
3047
}
3048
}
3049
placesview {
3051
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3052
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3054
// this selects the "connect to server" label
3056
> actionbar > revealer > box > label {
3057
padding-left: 8px;
3058
padding-right: 8px;
3059
}
3060
}
3061
/*********
3064
* Paned *
3065
*********/
3066
paned {
3067
> separator {
3068
min-width: 1px;
3069
min-height: 1px;
3070
-gtk-icon-source: none; // defeats the ugly default handle decoration
3071
border-style: none; // just to be sure
3072
background-color: transparent;
3073
// workaround, using background istead of a border since the border will get rendered twice (?)
3074
background-image: image($border_color);
3075
background-size: 1px 1px;
3076
background-clip: content-box; // avoids borders image being rendered twice (?)
3077
&.wide {
3079
min-width: 6px;
3080
min-height: 6px;
3081
background-color: $bg_color;
3082
background-image: image($border_color), image($border_color);
3083
background-size: 1px 1px, 1px 1px;
3084
}
3085
}
3086
&.horizontal > separator {
3088
background-repeat: repeat-y;
3089
&:dir(ltr) {
3091
margin: 0 -8px 0 0;
3092
padding: 0 8px 0 0;
3093
background-position: left;
3094
}
3095
&:dir(rtl) {
3097
margin: 0 0 0 -8px;
3098
padding: 0 0 0 8px;
3099
background-position: right;
3100
}
3101
&.wide {
3103
margin: 0;
3104
padding: 0;
3105
background-repeat: repeat-y, repeat-y;
3106
background-position: left, right;
3107
}
3108
}
3109
&.vertical > separator {
3111
margin: 0 0 -8px 0;
3112
padding: 0 0 8px 0;
3113
background-repeat: repeat-x;
3114
background-position: top;
3115
&.wide {
3117
margin: 0;
3118
padding: 0;
3119
background-repeat: repeat-x, repeat-x;
3120
background-position: bottom, top;
3121
}
3122
}
3123
}
3124
/**************
3127
* GtkInfoBar *
3128
**************/
3129
infobar {
3130
border-style: none;
3131
&.info { background-color: $info_bg_color; }
3133
&.question { background-color: $question_bg_color; }
3135
&.warning { background-color: $warning_bg_color; }
3137
&.error { background-color: $error_bg_color; }
3139
&.info,
3141
&.question,
3142
&.warning,
3143
&.error {
3144
> label, & { color: $inverse_fg_color; }
3145
button { @extend %button_selected; }
3147
selection {}
3149
*:link { @extend %link_selected; }
3151
}
3152
}
3153
/************
3156
* Tooltips *
3157
************/
3158
tooltip {
3159
&.background {
3160
// background-color needs to be set this way otherwise it gets drawn twice
3161
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3162
// box-shadow: inset 0 1px $highlight_color;
3163
background-color: $tooltip_bg_color;
3164
color: $tooltip_fg_color;
3165
}
3166
// padding: 4px; /* not working */
3168
border-radius: $material_radius;
3169
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3170
&:not(.csd):not(.unity-csd) {
3172
// border: 1px solid $border_color;
3173
// border-radius: $material_radius + 1px;
3174
// background-clip: $extra_background_clip;
3175
}
3176
// FIXME: we need a border or tooltips vanish on black background.
3178
decoration { background-color: transparent; }
3179
label {
3181
// tooltip label already seems to have 6px margins
3182
min-height: 32px - 6px * 2;
3183
padding: 0 8px - 6px;
3184
}
3185
* {
3187
// workaround for Eclipse.
3188
// do not include any declaration here.
3189
// padding: 0;
3190
// background-color: transparent;
3191
// color: inherit;
3192
}
3193
}
3194
/*****************
3197
* Color Chooser *
3198
*****************/
3199
colorswatch {
3200
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3201
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3202
// applied to the overlay box.
3203
// base color corners rounding
3205
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3206
// sports a bigger radius.
3207
// nth-child is needed by the custom color strip.
3208
&.top {
3210
border-top-left-radius: $material_radius + 0.5px;
3211
border-top-right-radius: $material_radius + 0.5px;
3212
overlay {
3214
border-top-left-radius: $material_radius;
3215
border-top-right-radius: $material_radius;
3216
}
3217
}
3218
&.bottom {
3220
border-bottom-left-radius: $material_radius + 0.5px;
3221
border-bottom-right-radius: $material_radius + 0.5px;
3222
overlay {
3224
border-bottom-left-radius: $material_radius;
3225
border-bottom-right-radius: $material_radius;
3226
}
3227
}
3228
&.left,
3230
&:first-child:not(.top) {
3231
border-top-left-radius: $material_radius + 0.5px;
3232
border-bottom-left-radius: $material_radius + 0.5px;
3233
overlay {
3235
border-top-left-radius: $material_radius;
3236
border-bottom-left-radius: $material_radius;
3237
}
3238
}
3239
&.right,
3241
&:last-child:not(.bottom) {
3242
border-top-right-radius: $material_radius + 0.5px;
3243
border-bottom-right-radius: $material_radius + 0.5px;
3244
overlay {
3246
border-top-right-radius: $material_radius;
3247
border-bottom-right-radius: $material_radius;
3248
}
3249
}
3250
&.dark { color: $light_fg_color; }
3252
&.light { color: $dark_fg_color; }
3254
&:drop(active) {
3256
box-shadow: none;
3257
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3259
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3261
}
3262
overlay {
3264
transition: $shadow_transition;
3265
box-shadow: $shadow_1;
3266
&:hover { box-shadow: $shadow_2; }
3268
}
3269
&#add-color-button {
3271
border-radius: $material_radius $material_radius 0 0;
3272
color: $light_fg_color;
3273
&:only-child { border-radius: $material_radius; }
3275
overlay {
3277
background-image: linear-gradient(to right,
3278
$error_bg_color 25%,
3279
$warning_bg_color 25%, $warning_bg_color 50%,
3280
$info_bg_color 50%, $info_bg_color 75%,
3281
$question_bg_color 75%);
3282
}
3283
}
3284
&:disabled {
3286
opacity: 0.5;
3287
overlay { box-shadow: none; }
3289
}
3290
row:selected & {
3292
}
3293
&#editor-color-sample {
3295
border-radius: $material_radius + 0.5px;
3296
overlay { border-radius: $material_radius; }
3298
// overlay:hover { box-shadow: $shadow_1; }
3300
}
3301
}
3302
// colorscale popup
3304
colorchooser .popover.osd {
3305
transition: $shadow_transition;
3306
border-radius: $material_radius;
3307
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3308
background-color: $surface_color;
3309
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3311
}
3312
/********
3315
* Misc *
3316
********/
3317
// content view (grid/list)
3318
.content-view {
3319
background-color: $bg_color;
3320
// &:hover { -gtk-icon-effect: highlight; }
3322
rubberband, .rubberband { @extend rubberband; }
3324
}
3325
.scale-popup {
3327
// .osd & { @extend %osd; }
3328
.osd & button.flat { // FIXME: quick hack, redo properly
3330
}
3331
button { // +/- buttons on GtkVolumeButton popup
3333
}
3334
}
3335
/**********************
3338
* Window Decorations *
3339
**********************/
3340
decoration {
3341
transition: $shadow_transition;
3342
border-radius: $material_radius $material_radius 0 0;
3343
box-shadow: $shadow_4, 0 16px 16px transparent;
3344
// FIXME rationalize shadows
3346
// this is used for the resize cursor area
3348
margin: 8px;
3349
&:backdrop {
3351
// the transparent shadow here is to enforce that the shadow extents don't
3352
// change when we go to backdrop, to prevent jumping windows.
3353
// The biggest shadow should be in the same order then in the active state
3354
// or the jumping will happen during the transition.
3355
box-shadow: $shadow_2, 0 16px 16px transparent;
3356
}
3357
.maximized &,
3359
.fullscreen &,
3360
.tiled &,
3361
.tiled-top &,
3362
.tiled-right &,
3363
.tiled-bottom &,
3364
.tiled-left & { border-radius: 0; }
3365
.popup & { box-shadow: none; }
3367
// server-side decorations as used by mutter
3369
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3370
.csd.popup & {
3372
border-radius: $material_radius;
3373
box-shadow: $shadow_2;
3374
}
3375
tooltip.csd & {
3377
border-radius: $material_radius;
3378
box-shadow: none;
3379
}
3380
messagedialog.csd & {
3382
border-radius: $material_radius;
3383
// box-shadow: $shadow_4, 0 16px 16px transparent;
3384
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3386
}
3387
.solid-csd & {
3389
margin: 0;
3390
// padding: 4px;
3391
border-radius: 0;
3392
box-shadow: none;
3393
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3394
background-color: $titlebar_bg_color;
3395
}
3396
}
3397
// Window Close button
3399
button.titlebutton {
3400
// @extend %simple_flat_button;
3401
@extend %circular_button;
3403
.selection-mode & {
3405
}
3406
}
3407
// catch all extend :)
3410
%selected_items {
3412
background-color: $selected_overlay_color;
3413
}
3414
.monospace { font-family: monospace; }
3416
/**********************
3419
* Touch Copy & Paste *
3420
**********************/
3421
// touch selection handlebars for the Popover.osd above
3422
cursor-handle {
3423
color: $primary_color;
3424
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
3425
&.top:dir(ltr), &.bottom:dir(rtl) {
3427
-gtk-icon-transform: rotate(90deg);
3428
}
3429
&.bottom:dir(ltr), &.top:dir(rtl) {
3431
-gtk-icon-transform: unset;
3432
}
3433
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3435
padding-top: 6px;
3436
-gtk-icon-transform: rotate(45deg);
3437
}
3438
}
3439
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3441
// shortcut window keys
3443
.keycap {
3444
min-width: 28px - 8px * 2;
3445
min-height: 28px - 2px;
3446
margin-top: 2px;
3447
padding-bottom: 2px;
3448
padding-left: 8px;
3449
padding-right: 8px;
3450
border: solid 1px $border_color;
3452
border-radius: $material_radius + 1px;
3453
box-shadow: inset 0 -2px $border_color;
3454
background-color: $surface_color;
3455
color: $fg_color;
3456
font-size: smaller;
3457
}
3458
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3460
transition: $shorter_transition;
3461
box-shadow: $shadow_1, inset 0 0 0 2px $primary_color;
3462
caret-color: $primary_color;
3463
}
3464
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3466
stackswitcher button.circular,
3468
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3469
min-width: $medium_size;
3470
min-height: $medium_size;
3471
padding: 0;
3472
}
3473
/*********
3476
* Emoji *
3477
*********/
3478
popover.emoji-picker {
3479
padding: 0;
3480
entry {
3482
border-bottom: 1px solid $border_color;
3483
border-radius: 0;
3484
box-shadow: none;
3485
background-color: transparent;
3486
}
3487
scrolledwindow { border-bottom: 1px solid $border_color; }
3489
}
3490
// mimic tab style
3492
button.emoji-section {
3493
margin-top: -1px;
3494
padding: 0 8px;
3495
min-width: 24px;
3496
min-height: $medium_size;
3497
border-radius: 0;
3498
outline-offset: -6px;
3499
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3501
&:checked {
3503
box-shadow: inset 0 2px $primary_color;
3504
background-color: transparent;
3505
}
3506
&:hover, &:active { background-color: $hover_overlay_color; }
3508
&:first-child { margin-left: 4px; }
3510
&:last-child { margin-right: 4px; }
3512
}
3513
.emoji {
3515
min-width: 3em;
3516
min-height: 3em;
3517
padding: 0 8px;
3518
// font-size: larger;
3519
widget {
3521
transition: $shorter_transition;
3522
border-radius: $material_radius;
3523
&:hover { background-color: $hover_overlay_color; }
3525
}
3526
}
3527