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
&:focus { outline-color: $checked_overlay_color; }
36
}
37
/***************
40
* Base States *
41
***************/
42
.background {
43
background-color: $bg_color;
44
color: $fg_color;
45
}
46
/*
48
These wildcard seems unavoidable, need to investigate.
49
Wildcards are bad and troublesome, use them with care,
50
or better, just don't.
51
Everytime a wildcard is used a kitten dies, painfully.
52
*/
53
*:disabled { -gtk-icon-effect: dim; }
55
.gtkstyle-fallback {
57
background-color: $bg_color;
58
color: $fg_color;
59
&:hover {
61
background-color: darken($bg_color, 5%);
62
color: $fg_color;
63
}
64
&:active {
66
background-color: darken($bg_color, 10%);
67
color: $fg_color;
68
}
69
&:disabled {
71
background-color: $bg_color;
72
color: $disabled_fg_color;
73
}
74
&:selected {
76
background-color: $primary_color;
77
color: $inverse_fg_color;
78
}
79
}
80
.view {
82
// @extend row.activatable;
83
background-color: $base_color;
85
color: $fg_color;
86
&:hover { box-shadow: inset 0 0 0 9999px $hover_overlay_color; }
88
&:selected:hover { box-shadow: inset 0 0 0 9999px rgba($primary_color, 0.08); }
90
&:disabled { color: $disabled_fg_color; }
92
&:hover, &:selected { border-radius: $material_radius; }
94
selection,
96
&:selected { @extend %selected_items; }
97
}
98
textview {
100
// FIXME: we need to override background-color to ensure text rendering
101
text { background-color: $base_color; }
102
border {
104
background-color: $alt_base_color;
105
color: $secondary_fg_color; // FIXME: not working
106
}
107
}
108
// iconview { @extend .view; }
110
.rubberband,
112
rubberband {
113
border: 1px solid $alt_primary_color;
114
background-color: rgba($alt_primary_color, 0.3);
115
}
116
flowbox {
118
rubberband { @extend rubberband; }
119
flowboxchild {
121
padding: 4px;
122
border-radius: $material_radius;
123
&:selected { @extend %selected_items; }
125
}
126
}
127
.content-view .tile {
129
// margin: 2px;
130
// padding: 0;
131
// border-radius: 0;
132
// background-color: black;
133
&:selected {
135
background-color: transparent;
136
color: inherit;
137
}
138
}
139
label {
141
caret-color: currentColor; // this shouldn't be needed.
142
&.separator {
144
@extend .dim-label;
145
color: $fg_color;
147
}
148
selection { @extend %selected_items; }
150
&:disabled {
152
color: $disabled_fg_color;
153
// selection { @extend %selected_items:disabled; }
155
headerbar &,
157
tab &,
158
button & { color: inherit; }
159
}
160
}
161
.dim-label { opacity: 0.6; }
163
assistant {
165
.sidebar {
166
padding: 4px 0;
167
// background-color: $base_color;
168
// border-top: 1px solid $border_color;
169
}
170
// &.csd .sidebar { border-top-style: none; }
172
.sidebar label {
174
min-height: $medium_size;
175
padding: 0 12px;
176
color: $disabled_fg_color;
177
font-weight: 500;
178
&.highlight { color: $fg_color; }
180
}
181
}
182
// %osd, .osd { opacity: 0.9; }
184
/*********************
187
* Spinner Animation *
188
*********************/
189
@keyframes spin {
190
to { -gtk-icon-transform: rotate(1turn); }
191
}
192
spinner {
194
background: none;
195
opacity: 0; // non spinning spinner makes no sense
196
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
197
&:checked {
199
opacity: 1;
200
animation: spin 1s linear infinite;
201
&:disabled { opacity: 0.5; }
203
}
204
}
205
/****************
208
* Text Entries *
209
****************/
210
%entry,
211
entry {
212
%entry_basic, & {
213
min-height: $medium_size;
214
padding: 0 8px;
215
border-radius: $material_radius $material_radius 0 0;
216
caret-color: currentColor; // this shouldn't be needed.
217
@include entry(normal);
219
&:focus { @include entry(focus); }
221
&:disabled { @include entry(disabled); }
223
&.flat {
225
min-height: 0;
226
padding: 2px;
227
border-radius: 0;
228
background-color: transparent;
229
}
230
image { // icons inside the entry
232
// @extend %simple_flat_button;
233
// min-height: $small_size;
235
// min-width: $small_size;
236
// border-radius: $circular_radius;
237
// -gtk-outline-radius: $circular_radius;
238
color: $secondary_fg_color;
239
&:hover, &:active { color: $fg_color; }
241
&:disabled { color: $disabled_fg_color; }
243
&.left {
245
margin-left: ($medium_size - 16px) / 2 - 8px;
246
margin-right: 6px;
247
}
248
&.right {
250
margin-left: 6px;
251
margin-right: ($medium_size - 16px) / 2 - 8px;
252
}
253
}
254
undershoot {
256
&.left { @include undershoot(left); }
257
&.right { @include undershoot(right); }
259
}
260
selection { @extend %selected_items; }
262
// entry error and warning style
264
@each $e_type, $e_color in (error, $error_color),
265
(warning, $warning_color) {
266
&.#{$e_type} {
267
@include entry(normal, $e_color);
268
&:focus { @include entry(focus, $e_color); }
270
&:disabled { @include entry(disabled, $e_color); }
272
}
273
}
274
&:drop(active) {
276
// box-shadow: inset 0 0 0 2px $primary_color;
277
}
278
.osd & {
280
}
281
}
282
progress {
284
margin: 2px (2px - 8px);
285
border-bottom: 2px solid $primary_color;
286
background-color: transparent;
287
}
288
// linked entries
290
.linked:not(.vertical) > & { @extend %linked_entry; }
291
// Vertically linked entries
293
.linked.vertical > & { @extend %linked_vertical_entry; }
294
}
295
%entry_raised {
297
border-radius: $material_radius;
298
@include entry(raised-normal);
300
&:focus { @include entry(raised-focus); }
302
&:disabled { @include entry(raised-disabled); }
304
// entry error and warning style
306
@each $e_type, $e_color in (error, $error_color),
307
(warning, $warning_color) {
308
&.#{$e_type} {
309
@include entry(raised-normal, $e_color);
310
&:focus { @include entry(raised-focus, $e_color); }
312
&:disabled { @include entry(raised-disabled, $e_color); }
314
image {
316
color: $inverse_secondary_fg_color;
317
&:hover, &:active { color: $inverse_fg_color; }
319
&:disabled { color: $inverse_disabled_fg_color; }
321
}
322
}
323
}
324
}
325
treeview entry {
327
&.flat, & {
328
background-color: $base_color;
329
&, &:focus {
331
border-image: none;
332
box-shadow: none;
333
}
334
}
335
}
336
.entry-tag {
338
margin: 2px;
339
border-radius: $circular_radius;
340
box-shadow: none;
341
background-color: $divider_color;
342
color: $fg_color;
343
&:hover { background-image: image($divider_color); }
345
// side margins: compensate the entry padding with a negative margin
347
// then the negative margin itself
348
:dir(ltr) & {
349
margin-left: 4px;
350
margin-right: 0;
351
padding-left: 12px;
352
padding-right: 8px;
353
}
354
:dir(rtl) & {
356
margin-left: 0;
357
margin-right: 4px;
358
padding-left: 8px;
359
padding-right: 12px;
360
}
361
// seems any sizing doesn't work
363
&.button {
364
box-shadow: none;
365
background-color: transparent;
366
&:not(:hover):not(:active) { color: $secondary_fg_color; }
368
}
369
}
370
/***********
373
* Buttons *
374
***********/
375
// stuff for .needs-attention
376
@keyframes needs_attention {
377
from {
378
background-image: -gtk-gradient(radial,
379
center center, 0,
380
center center, 0.001,
381
to($primary_color),
382
to(transparent));
383
}
384
to {
386
background-image: -gtk-gradient(radial,
387
center center, 0,
388
center center, 0.5,
389
to($primary_color),
390
to(transparent));
391
}
392
}
393
%button,
395
button {
396
@at-root %button_basic, & {
397
min-height: 24px;
398
min-width: 16px;
399
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
400
border-radius: $material_radius;
401
font-weight: 500;
402
@include button(normal);
404
&:hover { @include button(hover); }
406
&:active { @include button(active); }
408
&:disabled { @include button(disabled); }
410
&:checked { @include button(checked); }
412
&:checked:disabled { @include button(checked-disabled); }
414
@at-root %flat_button, &.flat {
416
@at-root %simple_flat_button, & {
417
@include button(flat-normal);
418
&:hover { @include button(flat-hover); }
420
&:active { @include button(flat-active); }
422
&:disabled { @include button(flat-disabled); }
424
}
425
&:checked { @include button(flat-checked); }
427
&:checked:disabled { @include button(flat-checked-disabled); }
429
}
430
&.text-button {
432
padding-left: 16px;
433
padding-right: 16px;
434
}
435
&.image-button {
437
min-width: 24px;
438
padding: ($medium_size - 24px) / 2;
439
@extend %circular_button;
441
}
442
&.text-button.image-button {
444
border-radius: $material_radius;
445
-gtk-outline-radius: $material_radius;
446
label {
448
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
449
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
451
}
452
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
454
}
455
.linked > & { @extend %linked; }
457
.linked.vertical > & { @extend %linked_vertical; }
459
.linked > &.flat,
461
.linked.vertical > &.flat {
462
border-radius: $material_radius;
463
&.image-button { @extend %circular_button; }
465
&.text-button.image-button {
467
border-radius: $material_radius;
468
-gtk-outline-radius: $material_radius;
469
}
470
}
471
&:drop(active) {
473
// box-shadow: inset 0 0 0 2px $primary_color;
474
}
475
}
476
@at-root %button_selected {
478
&.flat {
479
color: $inverse_secondary_fg_color;
480
&:hover, &:active { color: $inverse_fg_color; }
482
&:disabled { color: $inverse_disabled_secondary_fg_color; }
484
&:checked {
486
background-color: $inverse_track_color;
487
color: $inverse_fg_color;
488
}
489
&:checked:disabled {
491
background-color: $inverse_divider_color;
492
color: $inverse_disabled_fg_color;
493
}
494
}
495
}
496
// big standalone buttons like in Documents pager
498
&.osd {
499
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
500
&.image-button { padding: ($large_size - 24px) / 2; }
502
&:disabled { opacity: 0; }
504
}
505
// overlay / OSD style
507
@at-root %osd_button,
508
.osd & {
509
}
510
// Suggested and Destructive Action buttons
512
@each $b_type, $b_color in (suggested-action, $suggested_color),
513
(destructive-action, $destructive_color) {
514
&.#{$b_type} {
515
background-color: $b_color;
516
color: $inverse_fg_color;
517
&:disabled { @include button(disabled); }
519
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage(0.3)); }
521
&.flat {
523
background-color: transparent;
524
color: $b_color;
525
&:disabled { @include button(flat-disabled); }
527
&:checked { background-color: rgba($b_color, 0.3); }
529
}
530
.osd & {
532
}
533
}
534
}
535
.stack-switcher > & {
537
// to position the needs attention dot, padding is added to the button
538
// child, a label needs just lateral padding while an icon needs vertical
539
// padding added too.
540
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
542
> label {
544
padding-left: 6px; // label padding
545
padding-right: 6px; //
546
}
547
> image {
549
padding-left: 6px; // image padding
550
padding-right: 6px; //
551
padding-top: 3px; //
552
padding-bottom: 3px; //
553
}
554
&.text-button {
556
// compensate text-button paddings
557
padding-left: 16px - 6px;
558
padding-right: 16px - 6px;
559
}
560
&.image-button {
562
// we want image buttons to have a 1:1 aspect ratio, so compensation
563
// of the padding added to the GtkImage is needed
564
padding-left: ($medium_size - 16px) / 2 - 6px;
565
padding-right: ($medium_size - 16px) / 2 - 6px;
566
}
567
&.needs-attention {
569
> label,
570
> image { @extend %needs_attention; }
571
&:checked {
573
> label,
574
> image {
575
animation: none;
576
background-image: none;
577
}
578
}
579
}
580
}
581
// hide separators
583
&.font,
584
&.file { separator { @extend %hide_separators; }}
585
// &.font { > box > box > label { font-weight: bold; }}
587
// inline-toolbar buttons
589
.inline-toolbar & {
590
// @extend %button_basic.flat;
591
&:not(.text-button) { @extend %circular_button; }
593
}
594
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
596
@at-root %circular_button,
598
&.close,
599
&.circular { // The Bloody Circul Button
600
border-radius: $circular_radius;
601
-gtk-outline-radius: $circular_radius;
602
// label { padding: 0; }
604
}
605
@at-root %small_button {
607
min-height: $small_size;
608
min-width: $small_size;
609
padding: 0;
610
border-radius: $circular_radius;
611
-gtk-outline-radius: $circular_radius;
612
}
613
}
614
%needs_attention {
616
animation: needs_attention $longer_duration $deceleration_curve forwards;
617
background-repeat: no-repeat;
618
background-position: right 3px;
619
background-size: 6px 6px;
620
&:dir(rtl) { background-position: left 3px; }
622
}
623
// all the following is for the +|- buttons on inline toolbars, that way
625
// should really be deprecated...
626
.inline-toolbar toolbutton > button { // redefining the button look is
627
// needed since those are flat...
628
}
629
// More inline toolbar buttons
631
toolbar.inline-toolbar toolbutton {
632
// > button.flat { @extend %linked_middle; }
633
// &:first-child > button.flat { @extend %linked:first-child; }
635
// &:last-child > button.flat { @extend %linked:last-child; }
637
// &:only-child > button.flat { @extend %linked:only-child; }
639
}
640
%linked_middle {
642
border-radius: 0;
643
-gtk-outline-radius: $material_radius;
644
}
645
%linked {
647
@extend %linked_middle;
648
&:first-child {
650
border-top-left-radius: $material_radius;
651
border-bottom-left-radius: $material_radius;
652
}
653
&:last-child {
655
border-top-right-radius: $material_radius;
656
border-bottom-right-radius: $material_radius;
657
}
658
&:only-child {
660
border-radius: $material_radius;
661
}
662
}
663
%linked_vertical_middle {
665
border-radius: 0;
666
-gtk-outline-radius: $material_radius;
667
}
668
%linked_vertical {
670
@extend %linked_vertical_middle;
671
&:first-child {
673
border-top-left-radius: $material_radius;
674
border-top-right-radius: $material_radius;
675
}
676
&:last-child {
678
border-bottom-left-radius: $material_radius;
679
border-bottom-right-radius: $material_radius;
680
}
681
&:only-child {
683
border-radius: $material_radius;
684
}
685
}
686
%linked_entry {
688
@extend %linked_middle;
689
&:first-child {
691
border-radius: $material_radius 0 0 0;
692
}
693
&:last-child {
695
border-radius: 0 $material_radius 0 0;
696
}
697
&:only-child {
699
border-radius: $material_radius $material_radius 0 0;
700
}
701
}
702
%linked_vertical_entry {
704
@extend %linked_vertical_middle;
705
&:first-child {
707
border-radius: $material_radius $material_radius 0 0;
708
}
709
&:last-child {
711
border-radius: 0;
712
}
713
&:only-child {
715
border-radius: $material_radius $material_radius 0 0;
716
}
717
}
718
/* menu buttons */
720
modelbutton.flat,
721
.menuitem.button.flat {
722
min-height: $menuitem_size;
723
padding: 0 8px;
724
border-radius: $material_radius;
725
color: inherit;
726
@extend %simple_flat_button;
728
&:selected { @extend %selected_items; }
730
}
731
modelbutton.flat arrow {
733
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
734
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
736
}
737
button.color {
739
min-height: $small_size;
740
min-width: $small_size;
741
padding: $container_padding;
742
colorswatch:only-child {
744
// &, overlay { border-radius: 0; }
745
}
746
}
747
/*********
750
* Links *
751
*********/
752
*:link {
753
&, &:hover, &:active { color: $link_color; }
754
&:visited {
756
&, &:hover, &:active { color: $visited_link_color; }
757
}
758
@at-root %link_selected,
760
&:selected,
761
*:selected & { color: $inverse_fg_color; }
762
}
763
button:link,
765
button:visited {
766
@extend *:link;
767
> label { text-decoration-line: underline; }
769
}
770
/*****************
772
* GtkSpinButton *
773
*****************/
774
spinbutton {
775
&:not(.vertical) {
776
// in this horizontal configuration, the whole spinbutton
777
// behaves as the entry, so we extend the entry styling
778
// and nuke the style on the internal entry
779
@extend %entry;
780
padding: 0;
782
entry {
784
min-width: $large_size - 8px * 2;
785
// reset all the other props since the spinbutton node is styled here
786
margin: 0;
787
border-image: none;
788
border-radius: 0;
789
box-shadow: none;
790
background-color: transparent;
791
//
792
// This will help to simplify spinbutton's code, but unfortunatelly
793
// doesn't work properly in :dir(rtl). It needs z-index property.
794
//
795
// min-width: $large_size - 8px;
796
//
797
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
798
//
799
// &:dir(ltr) {
800
// margin-right: -$spinbuttons_width;
801
// padding-right: $spinbuttons_width;
802
// }
803
//
804
// &:dir(rtl) {
805
// margin-left: -$spinbuttons_width;
806
// padding-left: $spinbuttons_width;
807
// }
808
}
809
button {
811
// margin: $container_padding;
812
border: solid $container_padding transparent;
813
@extend %simple_flat_button;
815
@extend %small_button;
817
&.up:dir(ltr),
819
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
820
&.up:dir(rtl),
822
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
823
}
824
}
825
// OSD horizontal
827
.osd &:not(.vertical) {
828
button {
829
}
830
}
831
// Vertical
833
&.vertical {
834
// in the vertical configuration, we treat the spinbutton
835
// as a box, and tweak the style of the entry in the middle
836
// so that it's linked
837
// FIXME: this should not be set at all, but otherwise it gets the wrong
839
// color
840
&:disabled { color: $disabled_fg_color; }
841
&:drop(active) {
843
box-shadow: none;
844
}
845
entry {
847
@extend %entry_raised;
848
min-height: $medium_size;
850
min-width: $large_size;
851
padding: 0;
852
}
853
button {
855
min-height: $medium_size;
856
min-width: $large_size;
857
padding: 0;
858
@extend %simple_flat_button;
860
&.up { border-radius: $material_radius $material_radius 0 0; }
862
&.down { border-radius: 0 0 $material_radius $material_radius; }
864
}
865
}
866
// OSD vertical
868
.osd &.vertical button:first-child {
869
}
870
// Misc
872
treeview &:not(.vertical) {
873
min-height: 0;
874
border-style: none;
875
border-radius: 0;
876
entry {
878
min-height: 0;
879
padding: 1px 2px;
880
}
881
}
882
}
883
/**************
886
* ComboBoxes *
887
**************/
888
combobox {
889
arrow {
890
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
891
min-height: 16px;
892
min-width: 16px;
893
}
894
decoration,
896
button.combo:checked { transition: none; } // workaround for menuitem selection
897
button.combo cellview {
899
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
900
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
901
}
902
#gtk-combobox-popup-menu {
904
padding: 2px 0;
905
menuitem {
907
min-height: $medium_size - 2px * 2;
908
padding: 0 8px;
909
}
910
// overflow arrows
912
> arrow {
913
&.top { margin-top: -2px; }
914
&.bottom {
916
margin-top: 2px * 2;
917
margin-bottom: -2px * 3;
918
}
919
}
920
}
921
&.linked {
923
button:nth-child(2) {
924
&:dir(ltr) { @extend %linked_entry:last-child; }
925
&:dir(rtl) { @extend %linked_entry:first-child; }
926
}
927
}
928
> .linked > button {
930
@extend %linked_middle;
931
&:first-child { @extend %linked_entry:first-child; }
933
&:last-child { @extend %linked_entry:last-child; }
935
&:only-child { @extend %linked_entry:only-child; }
937
}
938
&:drop(active) { // FIXME: untested
940
box-shadow: none;
941
// button.combo { @extend %button_basic:drop(active); }
943
}
944
}
945
// the combo is a composite widget so the way we do button linking doesn't
947
// work, special case needed. See
948
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
949
.linked:not(.vertical) > combobox {
951
> box > button.combo { @extend %linked_middle; }
952
&:first-child > box > button.combo { @extend %linked_entry:first-child; }
954
&:last-child > box > button.combo { @extend %linked_entry:last-child; }
956
&:only-child > box > button.combo { @extend %linked_entry:only-child; }
958
}
959
.linked.vertical > combobox {
961
> box > button.combo { @extend %linked_vertical_middle; }
962
&:first-child > box > button.combo { @extend %linked_vertical_entry:first-child; }
964
&:last-child > box > button.combo { @extend %linked_vertical_entry:last-child; }
966
&:only-child > box > button.combo { @extend %linked_vertical_entry:only-child; }
968
}
969
button.combo {
971
border-radius: $material_radius $material_radius 0 0;
972
background-image: none;
973
font-weight: inherit;
974
@include entry(normal);
976
&:hover { box-shadow: inset 0 -1px $fg_color; }
978
&:checked { @include entry(focus); }
980
&:disabled { @include entry(disabled); }
982
}
983
/************
986
* Toolbars *
987
************/
988
toolbar {
989
-GtkWidget-window-dragging: true;
990
padding: 2px;
991
background-color: $bg_color;
992
button { @extend %button_basic.flat; }
994
// on OSD
996
.osd & { background-color: transparent; }
997
// stand-alone OSD toolbars
999
&.osd {
1000
transition: $shadow_transition;
1001
padding: $container_padding;
1002
border-radius: $material_radius;
1003
box-shadow: $shadow_2, inset 0 1px $highlight_color;
1004
background-color: $surface_color;
1005
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
1007
&.left,
1009
&.right,
1010
&.top,
1011
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
1012
}
1013
// toolbar separators
1015
&.horizontal > separator { margin: 2px; }
1016
&.vertical > separator { margin: 2px; }
1017
&:not(.inline-toolbar):not(.osd) {
1019
scale,
1020
entry,
1021
spinbutton,
1022
button { margin: 2px; }
1023
.linked entry,
1025
.linked spinbutton,
1026
.linked button {
1027
&:not(:first-child) { margin-left: 0; }
1028
&:not(:last-child) { margin-right: 0; }
1029
}
1030
spinbutton {
1032
entry,
1033
button { margin: 0; }
1034
}
1035
switch { margin: 2px + $container_padding 2px; }
1037
}
1038
}
1039
// searchbar, location-bar & inline-toolbar
1041
.inline-toolbar {
1042
padding: $container_padding;
1043
border-style: solid;
1044
border-width: 0 1px 1px;
1045
border-color: $border_color;
1046
background-color: $alt_base_color;
1047
}
1048
searchbar > revealer > box,
1050
.location-bar {
1051
padding: $container_padding;
1052
border-style: solid;
1053
border-width: 0 0 1px;
1054
border-color: $border_color;
1055
background-color: $bg_color;
1056
background-clip: border-box;
1057
}
1058
searchbar > revealer > box {
1060
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1061
margin: -6px;
1062
padding: $container_padding;
1063
}
1064
/***************
1067
* Header bars *
1068
***************/
1069
%titlebar,
1070
headerbar {
1071
transition: background-color $shorter_duration $deceleration_curve, color $shorter_duration $deceleration_curve;
1072
min-height: $large_size;
1073
padding: 0 $container_padding;
1074
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1075
background-color: $titlebar_bg_color;
1076
color: $titlebar_fg_color;
1077
&:disabled { color: $titlebar_disabled_fg_color; }
1079
&:backdrop {
1081
color: $titlebar_secondary_fg_color;
1082
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1084
}
1085
.title {
1087
padding: 0 12px;
1088
font-weight: bold;
1089
}
1090
.subtitle {
1092
padding: 0 12px;
1093
font-size: smaller;
1094
@extend .dim-label;
1096
}
1097
entry {
1099
box-shadow: inset 0 -1px $titlebar_track_color;
1100
background-color: $titlebar_fill_color;
1101
color: $titlebar_fg_color;
1102
&:disabled {
1104
box-shadow: inset 0 -1px $titlebar_divider_color;
1105
background-color: $titlebar_fill_color;
1106
color: $titlebar_disabled_fg_color;
1107
}
1108
image {
1110
color: $titlebar_secondary_fg_color;
1111
&:hover, &:active { color: $titlebar_fg_color; }
1113
&:disabled { color: $titlebar_disabled_fg_color; }
1115
}
1116
}
1117
.linked:not(.vertical) > entry:not(.flat) { border-radius: $material_radius $material_radius 0 0; }
1119
button:not(.suggested-action):not(.destructive-action) {
1121
@extend %button_basic.flat;
1122
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1124
$titlebar_indicator_color 0%,
1125
transparent 0%)
1126
0 0 0 / 0 0 0px;
1127
color: $titlebar_secondary_fg_color;
1128
&:hover, &:active { color: $titlebar_fg_color; }
1130
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1132
&:checked {
1134
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1135
$titlebar_indicator_color 100%,
1136
transparent 0%)
1137
0 0 2 / 0 0 2px;
1138
color: $titlebar_fg_color;
1139
&:disabled { color: $titlebar_disabled_fg_color; }
1141
&, &:disabled { background-color: transparent; }
1143
}
1144
&:backdrop {
1146
color: $titlebar_disabled_fg_color;
1147
&:hover, &:active { color: $titlebar_secondary_fg_color; }
1149
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1151
&:checked {
1153
color: $titlebar_secondary_fg_color;
1154
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1156
}
1157
}
1158
}
1159
button.suggested-action, button.destructive-action {
1161
&:disabled {
1162
background-color: $titlebar_fill_color;
1163
color: $titlebar_disabled_fg_color;
1164
}
1165
}
1166
&.selection-mode {
1168
// 0.00001s was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1169
// but let's keep it for backwards compatibility.
1170
transition: background-color 0.00001s $longer_duration, color $longer_duration $deceleration_curve;
1171
animation: header_ripple_effect $longer_duration $deceleration_curve;
1172
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1173
background-color: $primary_color;
1174
color: $inverse_fg_color;
1175
&:backdrop {
1177
color: $inverse_secondary_fg_color;
1178
}
1179
.subtitle:link { @extend *:link:selected; }
1181
button:not(.suggested-action):not(.destructive-action) {
1183
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1184
currentColor 0%,
1185
transparent 0%)
1186
0 0 0 / 0 0 0px;
1187
color: $inverse_fg_color;
1188
&:disabled { color: $inverse_disabled_fg_color; }
1190
&:checked {
1192
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1193
currentColor 100%,
1194
transparent 0%)
1195
0 0 2 / 0 0 2px;
1196
color: $inverse_fg_color;
1197
&:disabled { color: $inverse_disabled_fg_color; }
1199
}
1200
&:backdrop {
1202
color: $inverse_secondary_fg_color;
1203
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1205
&:checked {
1207
color: $inverse_secondary_fg_color;
1208
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1210
}
1211
}
1212
}
1213
.selection-menu {
1215
padding-left: 16px;
1216
padding-right: 16px;
1217
arrow { -GtkArrow-arrow-scaling: 1; }
1219
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1221
}
1222
}
1223
// squared corners when the window is maximized, tiled, or fullscreen
1225
.tiled &,
1226
.tiled-top &,
1227
.tiled-right &,
1228
.tiled-bottom &,
1229
.tiled-left &,
1230
.maximized &,
1231
.fullscreen & {
1232
border-radius: 0;
1233
box-shadow: $shadow_1;
1234
}
1235
&.default-decoration {
1237
min-height: $small_size;
1238
padding: $container_padding;
1239
box-shadow: inset 0 1px $titlebar_highlight_color;
1240
.tiled &,
1242
.maximized &,
1243
.fullscreen & { box-shadow: none; }
1244
button.titlebutton {
1246
min-height: $small_size;
1247
min-width: $small_size;
1248
margin: 0;
1249
padding: 0;
1250
}
1251
// workaround for non-animatable buttons
1253
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1254
}
1255
.solid-csd & {
1257
&:dir(rtl), &:dir(ltr) { // specificity bump
1258
// margin-left: -2px;
1259
// margin-right: -2px;
1260
// margin-top: -2px;
1261
// border-radius: 0;
1262
box-shadow: $shadow_1; // Remove highlight as window managers should have it
1263
}
1264
}
1265
}
1266
headerbar {
1268
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1269
entry,
1270
spinbutton,
1271
button {
1272
margin-top: $container_padding;
1273
margin-bottom: $container_padding;
1274
}
1275
separator {
1277
margin-top: $large_size / 4;
1278
margin-bottom: $large_size / 4;
1279
background-color: $titlebar_divider_color;
1280
}
1281
switch {
1283
margin-top: ($large_size - 24px) / 2;
1284
margin-bottom: ($large_size - 24px) / 2;
1285
}
1286
// reset button margins of the spinbutton
1288
spinbutton button {
1289
margin-top: 0;
1290
margin-bottom: 0;
1291
}
1292
// FIXME: This is a hacky workaround.
1294
.entry-tag {
1295
margin-top: 5px;
1296
margin-bottom: 5px;
1297
}
1298
}
1299
.background .titlebar {
1301
border-top-left-radius: $material_radius;
1302
border-top-right-radius: $material_radius;
1303
}
1304
.background.tiled .titlebar,
1306
.background.tiled-top .titlebar,
1307
.background.tiled-right .titlebar,
1308
.background.tiled-bottom .titlebar,
1309
.background.tiled-left .titlebar,
1310
.background.maximized .titlebar,
1311
.background.solid-csd .titlebar {
1312
border-top-left-radius: 0;
1313
border-top-right-radius: 0;
1314
}
1315
headerbar { // headerbar border rounding
1317
window separator:first-child + &, // tackles the paned container case
1318
window &:first-child { border-top-left-radius: $material_radius; }
1319
window &:last-child { border-top-right-radius: $material_radius; }
1321
window stack & { // tackles the stacked headerbars case
1323
&:first-child, &:last-child {
1324
border-top-left-radius: $material_radius;
1325
border-top-right-radius: $material_radius;
1326
}
1327
}
1328
window.tiled &,
1330
window.tiled-top &,
1331
window.tiled-right &,
1332
window.tiled-bottom &,
1333
window.tiled-left &,
1334
window.maximized &,
1335
window.fullscreen &,
1336
window.solid-csd & {
1337
&,
1338
&:first-child,
1339
&:last-child,
1340
&:only-child {
1341
border-top-left-radius: 0;
1342
border-top-right-radius: 0;
1343
}
1344
}
1345
}
1346
.titlebar:not(headerbar) {
1348
window.csd > & {
1349
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1350
padding: 0;
1351
background-color: transparent;
1352
background-image: none;
1353
border-style: none;
1354
box-shadow: none;
1355
}
1356
> separator {
1358
background-color: $titlebar_bg_color;
1359
background-image: image($border_color);
1360
}
1361
@extend %titlebar;
1363
}
1364
/************
1367
* Pathbars *
1368
************/
1369
%pathbar_button,
1370
.path-bar button {
1371
padding-left: ($medium_size - 24px) / 2;
1372
padding-right: ($medium_size - 24px) / 2;
1373
label:not(:only-child) {
1375
&:first-child { margin-left: 4px; }
1376
&:last-child { margin-right: 4px; }
1378
}
1379
&.slider-button {
1381
padding-left: (24px - 16px) / 2;
1382
padding-right: (24px - 16px) / 2;
1383
}
1384
:not(headerbar) & {
1386
@extend %flat_button;
1387
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1389
$primary_color 0%,
1390
transparent 0%)
1391
0 0 0 / 0 0 0px;
1392
border-radius: $material_radius;
1393
&:checked {
1395
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1396
$primary_color 100%,
1397
transparent 0%)
1398
0 0 2 / 0 0 2px;
1399
&, &:disabled { background-color: transparent; }
1401
}
1402
}
1403
}
1404
/**************
1407
* Tree Views *
1408
**************/
1409
treeview.view {
1410
@at-root * {
1411
-GtkTreeView-horizontal-separator: 4;
1412
-GtkTreeView-grid-line-width: 1;
1413
-GtkTreeView-grid-line-pattern: '';
1414
-GtkTreeView-tree-line-width: 1;
1415
-GtkTreeView-tree-line-pattern: '';
1416
-GtkTreeView-expander-size: 16;
1417
}
1418
border-left-color: $track_color; // this is actually the tree lines color,
1420
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1421
// FIXME: Avoid transparency background-color being slightly darker
1423
&:selected {
1424
background-color: $base_color;
1425
background-image: image($selected_overlay_color);
1426
}
1427
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1429
&:hover, &:selected { border-radius: 0; }
1431
&.separator {
1433
min-height: 1px + 2px * 2;
1434
color: $border_color;
1435
}
1436
&:drop(active) {
1438
border-style: solid none;
1439
border-width: 1px;
1440
border-color: $primary_color;
1441
&.after { border-top-style: none; }
1443
&.before { border-bottom-style: none; }
1445
}
1446
&.expander {
1448
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1449
-gtk-icon-transform: rotate(-90deg);
1450
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1452
&:checked { -gtk-icon-transform: unset; }
1454
color: $secondary_fg_color;
1456
&:hover, &:active { color: $fg_color; }
1458
&:disabled { color: $disabled_secondary_fg_color; }
1460
}
1461
&.progressbar { // progress bar in treeviews
1463
border-bottom: $bar_size solid $primary_color;
1464
box-shadow: none;
1465
background-color: transparent;
1466
}
1467
&.trough { // progress bar trough in treeviews
1469
border-bottom: $bar_size solid $divider_color;
1470
box-shadow: none;
1471
background-color: transparent;
1472
}
1473
header {
1475
button {
1476
@extend row.activatable;
1477
padding: 2px 6px;
1479
border-style: none solid solid none;
1480
border-width: 1px;
1481
border-color: $border_color;
1482
border-radius: 0;
1483
background-clip: border-box;
1484
&:not(:hover):not(:active) { color: $secondary_fg_color; }
1486
&, &:hover, &:active { box-shadow: none; }
1488
&, &:disabled { background-color: $base_color; }
1490
&:last-child { border-right-style: none; }
1492
}
1493
}
1494
button.dnd,
1496
header.button.dnd { // for treeview-like derive widgets
1497
padding: 2px 6px;
1498
border-style: none solid solid;
1499
border-width: 1px;
1500
border-color: $border_color;
1501
border-radius: 0;
1502
box-shadow: none;
1503
background-color: $base_color;
1504
background-clip: border-box;
1505
color: $primary_color;
1506
}
1507
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1509
}
1510
/*********
1513
* Menus *
1514
*********/
1515
menubar,
1516
.menubar {
1517
-GtkWidget-window-dragging: true;
1518
padding: 0;
1519
// box-shadow: inset 0 -1px $border_color;
1520
background-color: $titlebar_bg_color;
1521
> menuitem {
1523
transition: $shorter_transition;
1524
min-height: 20px;
1525
padding: 4px 8px;
1526
color: $titlebar_secondary_fg_color;
1527
&:hover { // Seems like it :hover even with keyboard focus
1529
transition: none;
1530
background-color: $titlebar_divider_color;
1531
color: $titlebar_fg_color;
1532
}
1533
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1535
label:disabled { color: inherit; } // to inherit the above color
1537
}
1538
}
1539
.csd.popup { background-color: transparent; }
1541
menu,
1543
.menu,
1544
.context-menu {
1545
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1546
padding: 4px 0;
1547
box-shadow: inset 0 1px $highlight_color;
1548
background-color: $surface_color;
1549
border: 1px solid $border_color; // adds borders in a non composited env
1550
.csd & {
1552
border: none; // axes borders in a composited env
1553
border-radius: $material_radius;
1554
}
1555
menuitem {
1557
transition: background-color $shorter_duration $deceleration_curve;
1558
min-height: 20px;
1559
min-width: 40px;
1560
padding: 4px 8px;
1561
font: initial;
1562
text-shadow: none;
1563
&:hover {
1565
transition: none;
1566
background-color: $divider_color;
1567
}
1568
&:disabled { color: $disabled_fg_color; }
1570
// submenu indicators
1572
arrow {
1573
min-height: 16px;
1574
min-width: 16px;
1575
&:dir(ltr) {
1577
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1578
margin-left: 8px;
1579
}
1580
&:dir(rtl) {
1582
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1583
margin-right: 8px;
1584
}
1585
}
1586
// avoids labels color being overridden, see
1588
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1589
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1590
}
1591
// overflow arrows
1593
> arrow {
1594
min-height: 16px;
1595
min-width: 16px;
1596
padding: 4px;
1597
background-color: $surface_color;
1598
color: $secondary_fg_color;
1599
&.top {
1601
margin-top: -4px;
1602
border-bottom: 1px solid $border_color;
1603
border-radius: $material_radius $material_radius 0 0;
1604
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1605
}
1606
&.bottom {
1608
margin-top: 4px * 2;
1609
margin-bottom: -4px * 3;
1610
border-top: 1px solid $border_color;
1611
border-radius: 0 0 $material_radius $material_radius;
1612
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1613
}
1614
&:hover {
1616
background-image: image($divider_color);
1617
color: $fg_color;
1618
}
1619
&:disabled {
1621
border-color: transparent;
1622
background-color: transparent;
1623
color: transparent;
1624
// color: $disabled_secondary_fg_color;
1625
}
1626
}
1627
separator { margin: 4px 0; }
1629
}
1630
menuitem {
1632
accelerator { color: $secondary_fg_color; }
1633
&:disabled accelerator { color: $disabled_secondary_fg_color; }
1635
}
1636
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1638
// Electron/Atom render all translucent colors in opaque colors.
1639
// It's a very critical issue for this theme and should be fixed by upstream...
1640
.popup:not(.csd) menu {
1641
menuitem {
1642
color: $opaque_fg_color;
1643
&:hover { background-color: $opaque_divider_color; }
1645
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1647
}
1648
// FIXME: not working this
1650
accelerator { color: $opaque_secondary_fg_color; }
1651
}
1652
/************
1655
* Popovers *
1656
************/
1657
popover.background {
1658
transition: $shadow_transition;
1659
padding: 2px;
1660
box-shadow: $shadow_2; // TODO: this should really have a highlight
1661
background-color: $surface_color;
1662
&:backdrop { box-shadow: $shadow_1; }
1664
&, .csd & {
1666
border-style: solid;
1667
border-width: 1px;
1668
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1669
border-radius: $material_radius + 1px;
1670
}
1671
> stack { margin: -4px; } // remove extra padding from menu style popovers
1673
> toolbar { margin: -2px; }
1675
> list,
1677
> .view,
1678
> toolbar {
1679
border-style: none;
1680
box-shadow: none;
1681
background-color: transparent;
1682
}
1683
// FIXME: Use the popover color instead of transparent as a workaround for .view
1685
list,
1686
.view:not(:selected),
1687
toolbar { background-color: $surface_color; }
1688
// &.touch-selection,
1690
// &.magnifier,
1691
// &.osd { @extend %osd; }
1692
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1694
&.menu button,
1696
button.model {
1697
@extend %simple_flat_button;
1698
min-height: 32px;
1700
padding: 0 8px;
1701
border-radius: $material_radius;
1702
&:checked { @extend %selected_items; }
1704
}
1705
separator { margin: 4px 0; }
1707
list separator { margin: 0; }
1709
}
1710
/*************
1712
* Notebooks *
1713
*************/
1714
notebook {
1715
frame > paned > & > header,
1716
&.frame > header { background-color: $alt_base_color; }
1717
&:focus tab:checked {
1719
box-shadow: inset 0 0 0 9999px rgba($primary_color, 0.12);
1720
outline: none;
1721
}
1722
> header {
1724
border-width: 1px;
1725
border-color: $border_color;
1726
background-color: $bg_color;
1727
background-clip: border-box;
1728
&.top {
1730
border-bottom-style: solid;
1731
> tabs {
1733
margin-bottom: -1px;
1734
> tab {
1736
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1737
&:checked { border-image-source: linear-gradient(to top, $primary_color 2px, $border_color 2px); }
1739
&.reorderable-page { border-image-width: 0 1px 2px; }
1741
}
1742
}
1743
}
1744
&.bottom {
1746
border-top-style: solid;
1747
> tabs {
1749
margin-top: -1px;
1750
> tab {
1752
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1753
&:checked { border-image-source: linear-gradient(to bottom, $primary_color 2px, $border_color 2px); }
1755
&.reorderable-page { border-image-width: 2px 1px 0; }
1757
}
1758
}
1759
}
1760
&.left {
1762
border-right-style: solid;
1763
> tabs {
1765
margin-right: -1px;
1766
> tab {
1768
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1769
&:checked { border-image-source: linear-gradient(to left, $primary_color 2px, $border_color 2px); }
1771
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1773
}
1774
}
1775
}
1776
&.right {
1778
border-left-style: solid;
1779
> tabs {
1781
margin-left: -1px;
1782
> tab {
1784
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1785
&:checked { border-image-source: linear-gradient(to right, $primary_color 2px, $border_color 2px); }
1787
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1789
}
1790
}
1791
}
1792
&.top > tabs > arrow {
1794
@extend %notebook_vert_arrows;
1795
border-top-style: none;
1797
}
1798
&.bottom > tabs > arrow {
1800
@extend %notebook_vert_arrows;
1801
border-bottom-style: none;
1803
}
1804
@at-root %notebook_vert_arrows {
1806
padding-left: 4px;
1807
padding-right: 4px;
1808
&.down {
1810
margin-left: -8px;
1811
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1812
}
1813
&.up {
1815
margin-right: -8px;
1816
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1817
}
1818
}
1819
&.left > tabs > arrow {
1821
@extend %notebook_horz_arrows;
1822
border-left-style: none;
1824
}
1825
&.right > tabs > arrow {
1827
@extend %notebook_horz_arrows;
1828
border-right-style: none;
1830
}
1831
@at-root %notebook_horz_arrows {
1833
padding-top: 4px;
1834
padding-bottom: 4px;
1835
&.down {
1837
margin-top: -8px;
1838
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1839
}
1840
&.up {
1842
margin-bottom: -8px;
1843
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1844
}
1845
}
1846
> tabs > arrow {
1848
@extend %simple_flat_button;
1849
min-height: 16px;
1851
min-width: 16px;
1852
border-radius: 0;
1853
}
1854
tab {
1856
transition: $shorter_transition,
1857
background-size 0,
1858
background-image 0;
1859
min-height: $small_size;
1860
min-width: $small_size;
1861
padding: $container_padding 12px;
1862
outline-offset: -6px;
1864
border-width: 1px; // for reorderable tabs
1866
border-color: transparent; //
1867
background-image: radial-gradient(circle farthest-corner at center,
1869
$primary_color 10%,
1870
transparent 0%);
1871
background-repeat: no-repeat;
1872
background-position: center;
1873
background-size: 0% 0%;
1874
background-clip: border-box;
1875
color: $secondary_fg_color;
1877
font-weight: 500;
1878
&:hover {
1880
background-color: $hover_overlay_color;
1881
color: $fg_color;
1882
}
1883
&:disabled { color: $disabled_secondary_fg_color; }
1885
&:checked {
1887
transition: $shorter_transition,
1888
background-size $longer_duration $deceleration_curve,
1889
background-image $longer_duration + $ripple_duration $deceleration_curve;
1890
background-color: transparent;
1891
background-image: radial-gradient(circle farthest-corner at center,
1892
transparent 10%,
1893
transparent 0%);
1894
background-size: 1000% 1000%;
1895
background-clip: padding-box;
1896
color: $fg_color;
1897
&:disabled { color: $disabled_fg_color; }
1899
&.reorderable-page {
1901
border-color: $border_color;
1902
background-color: $base_color;
1903
}
1904
}
1905
// colors the button like the label, overridden otherwise
1907
button.flat {
1908
@extend %small_button;
1909
&:last-child {
1911
margin-left: $container_padding;
1912
margin-right: $container_padding - 12px;
1913
}
1914
&:first-child {
1916
margin-left: $container_padding - 12px;
1917
margin-right: $container_padding;
1918
}
1919
}
1920
}
1921
&.top,
1923
&.bottom {
1924
tabs {
1925
padding-left: 8px;
1926
padding-right: 8px;
1927
&:not(:only-child) {
1929
&:first-child { margin-left: 0; }
1930
&:last-child { margin-right: 0; }
1932
}
1933
tab.reorderable-page { border-style: none solid; }
1935
}
1936
}
1937
&.left,
1939
&.right {
1940
tabs {
1941
padding-top: 8px;
1942
padding-bottom: 8px;
1943
&:not(:only-child) {
1945
&:first-child { margin-top: 0; }
1946
&:last-child { margin-bottom: 0; }
1948
}
1949
tab.reorderable-page { border-style: solid none; }
1951
}
1952
}
1953
}
1954
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1956
background-color: $base_color;
1957
}
1958
}
1959
/**************
1962
* Scrollbars *
1963
**************/
1964
scrollbar {
1965
$_slider_min_length: 24px;
1966
// disable steppers
1968
@at-root * {
1969
-GtkScrollbar-has-backward-stepper: false;
1970
-GtkScrollbar-has-forward-stepper: false;
1971
}
1972
transition: $shorter_transition;
1974
background-color: $base_color;
1975
background-clip: $extra_background_clip;
1976
// scrollbar border
1978
&.top { border-bottom: 1px solid $border_color; }
1979
&.bottom { border-top: 1px solid $border_color; }
1980
&.left { border-right: 1px solid $border_color; }
1981
&.right { border-left: 1px solid $border_color; }
1982
// slider
1984
slider {
1985
transition: $shorter_transition, margin 0, border-width 0;
1986
min-width: 8px;
1987
min-height: 8px;
1988
border: 4px solid transparent;
1989
border-radius: $circular_radius;
1990
background-clip: padding-box;
1991
background-color: $disabled_fg_color;
1992
&:hover { background-color: $secondary_fg_color; }
1994
&:active { background-color: $fg_color; }
1996
&:disabled { background-color: $disabled_secondary_fg_color; }
1998
}
1999
&.fine-tune {
2001
slider {
2002
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
2003
min-width: 4px;
2004
min-height: 4px;
2005
}
2006
&.horizontal slider { margin: 2px 0; }
2008
&.vertical slider { margin: 0 2px; }
2010
}
2011
&.overlay-indicator {
2013
&:not(.dragging):not(.hovering) {
2014
border-color: transparent;
2015
background-color: transparent;
2016
slider {
2018
min-width: 4px;
2019
min-height: 4px;
2020
margin: 4px - 1px;
2021
border: 1px solid rgba($base_color, 0.3);
2022
}
2023
button {
2025
min-width: 4px;
2026
min-height: 4px;
2027
margin: 4px - 1px;
2028
border: 1px solid rgba($base_color, 0.3);
2029
border-radius: $circular_radius;
2030
background-color: $disabled_fg_color;
2031
background-clip: padding-box;
2032
-gtk-icon-source: none;
2033
&:disabled { background-color: $disabled_secondary_fg_color; }
2035
}
2036
&.horizontal {
2038
slider { min-width: $_slider_min_length; }
2039
button { min-width: 8px; }
2041
}
2042
&.vertical {
2044
slider { min-height: $_slider_min_length; }
2045
button { min-height: 8px; }
2047
}
2048
}
2049
&.dragging,
2051
&.hovering { background-color: rgba($base_color, 0.9); }
2052
}
2053
&.horizontal slider { min-width: $_slider_min_length; }
2055
&.vertical slider { min-height: $_slider_min_length; }
2057
// button styling
2059
button {
2060
@extend %simple_flat_button;
2061
min-width: 16px;
2063
min-height: 16px;
2064
padding: 0;
2065
border-radius: 0;
2066
}
2067
// button icons
2069
&.vertical {
2070
button {
2071
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2072
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2074
}
2075
}
2076
&.horizontal {
2078
button {
2079
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2080
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2082
}
2083
}
2084
}
2085
/**********
2088
* Switch *
2089
**********/
2090
switch {
2091
transition: all $shorter_duration $deceleration_curve;
2092
margin: $container_padding 0;
2093
padding: 0 2px;
2094
border: 5px solid transparent;
2095
border-radius: $circular_radius;
2096
background-color: $track_color;
2097
background-clip: padding-box;
2098
font-size: 0;
2099
&:checked { background-color: rgba($primary_color, 0.5); }
2101
&:disabled { opacity: 0.5; }
2103
// hide on/off icons for >=3.24.4
2105
image {
2106
margin: -8px;
2107
-gtk-icon-transform: scale(0);
2108
}
2109
slider {
2111
transition: all $shorter_duration $deceleration_curve;
2112
min-width: 20px;
2113
min-height: 20px;
2114
margin: -3px -2px;
2115
border-radius: $circular_radius;
2116
box-shadow: 0 0 0 10px transparent, $shadow_1;
2117
background-color: $surface_color;
2118
}
2119
&:hover slider { box-shadow: 0 0 0 10px $hover_overlay_color, $shadow_1; }
2121
&:focus slider { box-shadow: 0 0 0 10px $focus_overlay_color, $shadow_1; }
2123
&:focus:hover slider { box-shadow: 0 0 0 10px $hover_focus_overlay_color, $shadow_1; }
2125
&:checked slider {
2127
background-color: $primary_color;
2128
color: $primary_color;
2129
}
2130
row:selected & {
2132
}
2133
}
2134
/*************************
2137
* Check and Radio items *
2138
*************************/
2139
// draw regular check and radio items using our PNG assets
2140
// all assets are rendered from assets.svg. never add pngs directly
2141
// selection-mode
2143
.view.content-view.check:not(list),
2144
.content-view .tile check:not(list) {
2145
min-height: 40px;
2146
min-width: 40px;
2147
margin: 0;
2148
padding: 0;
2149
box-shadow: none;
2150
background-color: transparent;
2151
background-image: none;
2152
-gtk-icon-shadow: $shadow_1;
2153
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2155
@each $s, $as in ('', '-unchecked'),
2157
(':checked', '-checked') {
2158
&#{$s} {
2159
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2160
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2161
}
2162
}
2163
}
2164
checkbutton,
2166
radiobutton {
2167
outline: none;
2168
}
2169
checkbutton.text-button,
2171
radiobutton.text-button {
2172
// this is for a nice focus on check and radios text
2173
padding: 2px;
2174
label:not(:only-child) { margin: 0 4px; }
2176
}
2177
$check_radio_size: 40px;
2179
check,
2181
radio {
2182
min-height: 24px;
2183
min-width: 24px;
2184
margin: -($check_radio_size - 24px) / 2;
2185
padding: ($check_radio_size - 24px) / 2;
2186
@extend %simple_flat_button;
2188
@extend %circular_button;
2190
&:hover { box-shadow: inset 0 0 0 9999px $hover_overlay_color; }
2192
&:focus { box-shadow: inset 0 0 0 9999px $focus_overlay_color; }
2194
&:focus:hover { box-shadow: inset 0 0 0 9999px $hover_focus_overlay_color; }
2196
&:checked, &:indeterminate {
2198
color: $primary_color;
2199
&:disabled { color: $disabled_secondary_fg_color; }
2201
}
2202
// &:only-child { margin: -12px; }
2204
popover modelbutton.flat & {
2206
&, &:hover, &:focus, &:focus:hover, &:active, &:disabled {
2207
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2208
box-shadow: none;
2209
background-image: none;
2210
}
2211
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2213
&.left:dir(rtl) {
2215
margin-left: -12px;
2216
margin-right: -4px;
2217
}
2218
&.right:dir(ltr) {
2220
margin-left: -4px;
2221
margin-right: -12px;
2222
}
2223
}
2224
menu menuitem & {
2226
transition: none;
2227
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2228
padding: 0;
2229
&:dir(ltr) { margin-right: 8px; }
2231
&:dir(rtl) { margin-left: 8px; }
2233
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2235
&, &:hover, &:disabled {
2237
box-shadow: none;
2238
// color: inherit;
2239
}
2240
}
2241
}
2242
%check,
2244
check {
2245
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2246
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2248
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2250
}
2251
%radio,
2253
radio {
2254
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2255
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2257
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2259
border-image-slice: $check_radio_size / 2px;
2261
border-image-width: $check_radio_size / 2;
2262
$radio_indicator: 10px / $check_radio_size / 2;
2264
& {
2266
border-image-source: -gtk-gradient(radial,
2267
center center, 0,
2268
center center, 0.001,
2269
to($primary_color),
2270
to(transparent));
2271
}
2272
&:checked:not(:indeterminate) {
2274
border-image-source: -gtk-gradient(radial,
2275
center center, 0,
2276
center center, $radio_indicator,
2277
to($primary_color),
2278
to(transparent));
2279
}
2280
&:checked:not(:indeterminate):disabled {
2282
border-image-source: -gtk-gradient(radial,
2283
center center, 0,
2284
center center, $radio_indicator,
2285
to($disabled_secondary_fg_color),
2286
to(transparent));
2287
}
2288
}
2289
%small_check,
2291
menu menuitem check {
2292
& {
2293
min-height: 16px;
2294
min-width: 16px;
2295
border-radius: $material_radius;
2296
-gtk-outline-radius: $material_radius;
2297
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2298
}
2299
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2301
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2303
}
2304
%small_radio,
2306
menu menuitem radio {
2307
& {
2308
min-height: 16px;
2309
min-width: 16px;
2310
border-image: none;
2311
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2312
}
2313
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2315
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2317
}
2318
// ANIMATION:
2320
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2321
// the transformation is set on the active state and it get reset on the checked state.
2322
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2323
treeview.view check,
2325
treeview.view radio {
2326
padding: 0;
2327
&:hover, &:selected {
2329
box-shadow: none;
2330
background-color: transparent;
2331
}
2332
& {
2334
color: $secondary_fg_color;
2335
&:hover, &:active { color: $fg_color; }
2337
&:disabled { color: $disabled_secondary_fg_color; }
2339
&:checked, &:indeterminate { color: $primary_color; }
2341
&:checked:disabled, &:indeterminate:disabled { color: $disabled_secondary_fg_color; }
2343
}
2344
}
2345
treeview.view radio:checked {
2347
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2348
border-image: none;
2349
}
2350
/************
2353
* GtkScale *
2354
************/
2355
scale {
2356
// sizing
2357
$_marks_length: 8px;
2358
$_marks_distance: 7px;
2359
$trough_size: 2px;
2361
$finetune_trough_size: 4px;
2362
$slider_size: 32px;
2364
$slider_margin: -($slider_size - $trough_size) / 2;
2366
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2367
$color_slider_margin: -($slider_size) * 3 / 4;
2369
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2370
min-height: $trough_size;
2372
min-width: $trough_size;
2373
&.horizontal { padding: ($medium_size - $trough_size) / 2 12px; }
2375
&.vertical { padding: 12px ($medium_size - $trough_size) / 2; }
2377
// the slider is inside the trough, so to have make it bigger there's a negative margin
2379
slider {
2380
min-height: $slider_size;
2381
min-width: $slider_size;
2382
margin: $slider_margin;
2383
}
2384
// click-and-hold the slider to activate
2386
&.fine-tune {
2387
&.horizontal {
2388
min-height: $finetune_trough_size;
2389
padding-top: ($medium_size - $finetune_trough_size) / 2;
2390
padding-bottom: ($medium_size - $finetune_trough_size) / 2;
2391
}
2392
&.vertical {
2394
min-width: $finetune_trough_size;
2395
padding-left: ($medium_size - $finetune_trough_size) / 2;
2396
padding-right: ($medium_size - $finetune_trough_size) / 2;
2397
}
2398
// to make the trough grow in fine-tune mode
2400
slider { margin: $finetune_slider_margin; }
2401
}
2402
// the backing bit
2404
trough {
2405
transition: background-color $shorter_duration $deceleration_curve;
2406
outline: none;
2407
background-color: $track_color;
2408
&:disabled { background-color: $divider_color; }
2410
}
2411
// the colored part of the backing bit
2413
highlight {
2414
transition: background-color $shorter_duration $deceleration_curve;
2415
background-color: $primary_color;
2416
&:disabled { background-color: transparent; }
2418
}
2419
// this is another differently styled part of the backing bit, the most relevant use case is for example
2421
// in media player to indicate how much video stream as been cached
2422
fill {
2423
transition: background-color $shorter_duration $deceleration_curve;
2424
background-color: $track_color;
2425
&:disabled { background-color: transparent; }
2427
}
2428
slider {
2430
transition: background-color $shorter_duration $deceleration_curve,
2431
background-size $ripple_duration $deceleration_curve,
2432
background-image $ripple_opacity_duration $deceleration_curve;
2433
background-repeat: no-repeat;
2434
background-position: center;
2435
background-size: auto, 1000% 1000%;
2436
border-radius: 50%;
2437
color: transparent;
2438
@each $s, $as in ('', ''),
2440
(':disabled', '-disabled') {
2441
&#{$s} {
2442
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2443
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2445
radial-gradient(circle farthest-corner at center,
2446
currentColor 10%,
2447
transparent 0%);
2448
}
2449
}
2450
&:hover { background-color: rgba($primary_color, 0.08); }
2452
&:focus { background-color: rgba($primary_color, 0.12); }
2454
&:focus:hover { background-color: rgba($primary_color, 0.16); }
2456
&:active {
2458
transition: background-color $shorter_duration $deceleration_curve,
2459
background-size 0,
2460
background-image 0;
2461
animation: scale_ripple_effect $longer_duration $deceleration_curve forwards;
2462
background-size: auto, 0% 0%;
2463
background-color: rgba($primary_color, 0.08);
2464
color: rgba($primary_color, 0.12);
2465
}
2466
}
2467
marks label,
2469
value { color: $secondary_fg_color; }
2470
marks {
2472
color: $track_color;
2473
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2475
(bottom, bottom, top),
2476
(left, left, right),
2477
(right, right, left) {
2478
&.#{$marks_class} {
2479
margin-#{$marks_margin}: $_marks_distance;
2480
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2481
}
2482
}
2483
}
2484
&.fine-tune marks {
2486
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2487
(bottom, bottom, top),
2488
(left, left, right),
2489
(right, right, left) {
2490
&.#{$marks_class} {
2491
margin-#{$marks_margin}: $_marks_distance - 1px;
2492
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2493
}
2494
}
2495
}
2496
&.horizontal {
2498
indicator {
2499
min-height: $_marks_length;
2500
min-width: 1px;
2501
}
2502
}
2503
&.vertical {
2505
indicator {
2506
min-height: 1px;
2507
min-width: $_marks_length;
2508
}
2509
}
2510
// *WARNING* scale with marks madness following
2512
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2514
('vertical', 'vert') {
2515
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2516
('marks-after', 'marks-after:not(.marks-before)') {
2517
&.#{$dir_class}.#{$marks_class} {
2518
slider {
2519
@each $state, $state_infix in ('', ''),
2520
(':disabled', '-disabled') {
2521
&#{$state} {
2522
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2523
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2525
radial-gradient(circle farthest-corner at center,
2526
currentColor 10%,
2527
transparent 0%);
2528
}
2529
}
2530
}
2531
}
2532
}
2533
}
2534
&.color {
2536
min-height: 0;
2537
min-width: 0;
2538
&.horizontal {
2540
padding: 0 0 12px 0;
2541
slider {
2543
&:dir(ltr), &:dir(rtl) { // specificity bump
2544
margin-bottom: $color_slider_margin;
2545
margin-top: $color_marks_slider_margin;
2546
}
2547
}
2548
}
2549
&.vertical {
2551
&:dir(ltr) {
2552
padding: 0 0 0 12px;
2553
slider {
2555
margin-left: $color_slider_margin;
2556
margin-right: $color_marks_slider_margin;
2557
}
2558
}
2559
&:dir(rtl) {
2561
padding: 0 12px 0 0;
2562
slider {
2564
margin-right: $color_slider_margin;
2565
margin-left: $color_marks_slider_margin;
2566
}
2567
}
2568
}
2569
}
2570
}
2571
/*****************
2574
* Progress bars *
2575
*****************/
2576
progressbar {
2577
// sizing
2578
&.horizontal {
2579
trough,
2580
progress { min-height: $bar_size; }
2581
}
2582
&.vertical {
2584
trough,
2585
progress { min-width: $bar_size; }
2586
}
2587
// FIXME: insensitive state missing and some other state should be set probably
2589
color: $secondary_fg_color;
2590
font-size: smaller;
2591
trough { background-color: $divider_color; }
2593
progress { background-color: $primary_color; }
2595
&.osd { // progressbar.osd used for epiphany page loading progress
2597
// min-width: $bar_size;
2598
// min-height: $bar_size;
2599
// background-color: transparent;
2600
// trough { background-color: transparent; }
2602
// progress { background-color: $primary_color; }
2604
}
2605
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2607
}
2608
/*************
2611
* Level Bar *
2612
*************/
2613
levelbar {
2614
&.horizontal {
2615
block { min-height: $bar_size; }
2616
&.discrete block {
2618
min-width: $medium_size;
2619
&:not(:last-child) { margin-right: 2px; }
2621
}
2622
}
2623
&.vertical {
2625
block { min-width: $bar_size; }
2626
&.discrete block {
2628
min-height: $medium_size;
2629
&:not(:last-child) { margin-bottom: 2px; }
2631
}
2632
}
2633
// imitate the entry style
2635
trough {
2636
// padding: 2px;
2637
// border-radius: $material_radius;
2638
// box-shadow: $shadow_1;
2639
// background-color: $base_color;
2640
// &:disabled { background-color: $alt_base_color; }
2642
}
2643
block {
2645
&.low { background-color: $warning_color; }
2646
&.high,
2648
&:not(.empty) { background-color: $primary_color; }
2649
&.full { background-color: $success_color; }
2651
&.empty { background-color: $divider_color; }
2653
}
2654
}
2655
/****************
2658
* Print dialog *
2659
*****************/
2660
printdialog {
2661
paper {
2662
padding: 0;
2663
border: 1px solid $border_color;
2664
background-color: $base_color;
2665
color: $fg_color;
2666
}
2667
.dialog-action-box { margin: 12px; }
2669
}
2670
/**********
2673
* Frames *
2674
**********/
2675
frame > border,
2676
.frame {
2677
margin: 0;
2678
padding: 0;
2679
border: 1px solid $border_color;
2680
border-radius: 0;
2681
box-shadow: none;
2682
&.flat { border-style: none; }
2684
}
2685
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2687
actionbar > revealer > box {
2689
padding: $container_padding;
2690
border-top: 1px solid $border_color;
2691
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2693
}
2694
scrolledwindow {
2696
viewport.frame { // avoid double borders when viewport inside scrolled window
2697
border-style: none;
2698
}
2699
// This is used when content is touch-dragged past boundaries.
2701
// draws a box on top of the content, the size changes programmatically.
2702
@at-root overshoot {
2703
&.top { @include overshoot(top); }
2704
&.bottom { @include overshoot(bottom); }
2706
&.left { @include overshoot(left); }
2708
&.right { @include overshoot(right); }
2710
}
2711
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2713
@at-root undershoot {
2714
&.top { @include undershoot(top); }
2715
&.bottom { @include undershoot(bottom); }
2717
&.left { @include undershoot(left); }
2719
&.right { @include undershoot(right); }
2721
}
2722
@at-root junction { // the small square between two scrollbars
2724
border-style: solid none none solid;
2725
border-width: 1px;
2726
border-color: $border_color;
2727
background-color: $base_color;
2728
&:dir(rtl) { border-style: solid solid none none; }
2730
}
2731
}
2732
// vbox and hbox separators
2734
separator {
2735
min-width: 1px;
2736
min-height: 1px;
2737
background-color: $border_color;
2738
}
2739
%hide_separators {
2741
min-width: 0;
2742
min-height: 0;
2743
background-color: transparent;
2744
}
2745
/*********
2748
* Lists *
2749
*********/
2750
list {
2751
border-color: $border_color;
2752
background-color: $base_color;
2753
row { padding: 2px; }
2755
}
2756
row {
2758
&.activatable {
2759
transition: $shorter_transition,
2760
background-size $ripple_duration $deceleration_curve,
2761
background-image $ripple_opacity_duration $deceleration_curve;
2762
box-shadow: inset 0 0 0 9999px transparent;
2763
background-image: radial-gradient(circle farthest-corner at center,
2764
transparent 10%,
2765
transparent 0%);
2766
background-repeat: no-repeat;
2767
background-position: center;
2768
background-size: 1000% 1000%;
2769
&:hover {
2771
transition: $shorter_transition,
2772
box-shadow 0,
2773
background-size $ripple_duration $deceleration_curve,
2774
background-image $ripple_opacity_duration $deceleration_curve;
2775
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2776
}
2777
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2779
&:active {
2780
transition: $shorter_transition,
2781
background-size 0,
2782
background-image 0;
2783
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2784
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2785
background-image: radial-gradient(circle farthest-corner at center,
2786
$active_overlay_color 10%,
2787
transparent 0%);
2788
background-size: 0% 0%;
2789
}
2790
}
2791
&:selected {
2793
@extend %selected_items;
2794
color: $primary_color; // for overlays
2795
image,
2797
label { color: $fg_color; }
2798
button image,
2800
button label { color: inherit; }
2801
}
2802
}
2803
/*********************
2806
* App Notifications *
2807
*********************/
2808
.app-notification {
2809
// @extend %osd;
2810
@extend toolbar.osd;
2812
margin: 8px;
2814
button { @extend %button_basic.flat; }
2816
&.frame,
2818
border { border-style: none; }
2819
}
2820
/*************
2823
* Expanders *
2824
*************/
2825
expander {
2826
title > arrow {
2827
transition: all $shorter_duration $deceleration_curve;
2828
min-width: 16px;
2829
min-height: 16px;
2830
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2831
-gtk-icon-transform: rotate(-90deg);
2832
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2834
&:checked { -gtk-icon-transform: unset; }
2836
color: $secondary_fg_color;
2838
&:hover, &:active { color: $fg_color; }
2840
&:disabled { color: $disabled_secondary_fg_color; }
2842
}
2843
}
2844
/************
2847
* Calendar *
2848
************/
2849
calendar {
2850
padding: 1px;
2851
border: 1px solid $border_color;
2852
color: $fg_color;
2853
&:disabled { color: $disabled_fg_color; }
2855
&:selected {
2857
@extend %selected_items;
2858
border-radius: $material_radius + 1px;
2860
}
2861
&.header {
2863
border-style: none none solid;
2864
border-radius: 0;
2865
}
2866
&.button { @extend %simple_flat_button; }
2868
&.highlight {
2870
color: $secondary_fg_color;
2871
font-weight: 500;
2872
}
2873
&:indeterminate { color: $disabled_secondary_fg_color; }
2875
}
2876
/***********
2879
* Dialogs *
2880
***********/
2881
messagedialog { // Message Dialog styling
2882
&.background { background-color: $surface_color; }
2883
.titlebar {
2885
min-height: $small_size;
2886
border-style: none;
2887
box-shadow: inset 0 1px $highlight_color;
2888
background-color: $surface_color;
2889
color: $fg_color;
2890
&:backdrop { color: $secondary_fg_color; }
2892
}
2893
&.csd { // rounded bottom border styling for csd version
2895
&.background {
2896
// bigger radius for better antialiasing
2897
border-bottom-left-radius: $material_radius;
2898
border-bottom-right-radius: $material_radius;
2899
}
2900
.dialog-action-area {
2902
margin-top: -$container_padding;
2903
padding: $container_padding;
2904
button {
2906
@extend %simple_flat_button;
2907
border-radius: $material_radius;
2908
&:not(:last-child) { margin-right: $container_padding; }
2910
&.suggested-action:not(:disabled) { color: $suggested_color; }
2912
&.destructive-action:not(:disabled) { color: $destructive_color; }
2914
}
2915
}
2916
}
2917
}
2918
filechooser {
2920
.dialog-action-box { border-top: 1px solid $border_color; }
2921
#pathbarbox {
2923
border-bottom: 1px solid $border_color;
2924
background-color: $bg_color;
2925
> stack > box > button { // The new folder button
2927
@extend %button_basic.flat;
2928
@extend %circular_button;
2929
}
2930
}
2931
}
2932
filechooserbutton:drop(active) {
2934
box-shadow: none;
2935
}
2936
/***********
2939
* Sidebar *
2940
***********/
2941
.sidebar {
2942
border-style: none;
2943
background-color: $alt_base_color;
2944
@at-root %sidebar_left,
2946
&:dir(ltr),
2947
&.left,
2948
&.left:dir(rtl) {
2949
border-right: 1px solid $border_color;
2950
border-left-style: none;
2951
}
2952
@at-root %sidebar_right,
2954
&:dir(rtl),
2955
&.right {
2956
border-left: 1px solid $border_color;
2957
border-right-style: none;
2958
}
2959
list { background-color: transparent; }
2961
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2963
}
2964
stacksidebar {
2966
&.sidebar {
2967
&:dir(ltr),
2968
&.left,
2969
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2970
&:dir(rtl),
2972
&.right { list { @extend %sidebar_right; }}
2973
}
2974
row {
2976
padding: 10px 4px;
2977
> label {
2979
padding-left: 6px;
2980
padding-right: 6px;
2981
}
2982
&.needs-attention > label { @extend %needs_attention; }
2984
}
2985
}
2986
/****************
2989
* File chooser *
2990
****************/
2991
// dim the sidebar icons, see bug #786613 for details on this oddity
2992
row {
2993
image.sidebar-icon { color: $secondary_fg_color; }
2994
}
2995
placessidebar {
2997
> viewport.frame { border-style: none; }
2998
list { padding: (4px - 3px) 0 4px; }
3000
row {
3002
// Needs overriding of the GtkListBoxRow padding
3003
min-height: 32px;
3004
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3005
padding: 0;
3006
border-radius: $material_radius;
3007
// Using margins/padding directly in the SidebarRow
3009
// will make the animation of the new bookmark row jump
3010
> revealer { padding: 0 8px; }
3011
&:selected { font-weight: 500; }
3013
&:disabled { color: $disabled_fg_color; }
3015
image.sidebar-icon {
3017
&:dir(ltr) { padding-right: 8px; }
3018
&:dir(rtl) { padding-left: 8px; }
3019
}
3020
label.sidebar-label {
3022
&:dir(ltr) { padding-right: 2px; }
3023
&:dir(rtl) { padding-left: 2px; }
3024
}
3025
&:selected image.sidebar-icon,
3027
&:selected label.sidebar-label { color: inherit; }
3028
@at-root button.sidebar-button {
3030
@extend %simple_flat_button;
3031
@extend %small_button;
3032
}
3033
&.sidebar-placeholder-row {
3035
min-height: 2px;
3036
padding: 0 8px;
3037
background-image: image($primary_color);
3038
background-clip: content-box;
3039
}
3040
&.sidebar-new-bookmark-row { color: $primary_color; }
3042
&:drop(active):not(:disabled) {
3044
box-shadow: inset 0 0 0 2px $primary_color;
3045
}
3046
}
3047
}
3048
placesview {
3050
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3051
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3053
// this selects the "connect to server" label
3055
> actionbar > revealer > box > label {
3056
padding-left: 8px;
3057
padding-right: 8px;
3058
}
3059
}
3060
/*********
3063
* Paned *
3064
*********/
3065
paned {
3066
> separator {
3067
min-width: 1px;
3068
min-height: 1px;
3069
-gtk-icon-source: none; // defeats the ugly default handle decoration
3070
border-style: none; // just to be sure
3071
background-color: transparent;
3072
// workaround, using background istead of a border since the border will get rendered twice (?)
3073
background-image: image($border_color);
3074
background-size: 1px 1px;
3075
background-clip: content-box; // avoids borders image being rendered twice (?)
3076
&.wide {
3078
min-width: 6px;
3079
min-height: 6px;
3080
background-color: $bg_color;
3081
background-image: image($border_color), image($border_color);
3082
background-size: 1px 1px, 1px 1px;
3083
}
3084
}
3085
&.horizontal > separator {
3087
background-repeat: repeat-y;
3088
&:dir(ltr) {
3090
margin: 0 -8px 0 0;
3091
padding: 0 8px 0 0;
3092
background-position: left;
3093
}
3094
&:dir(rtl) {
3096
margin: 0 0 0 -8px;
3097
padding: 0 0 0 8px;
3098
background-position: right;
3099
}
3100
&.wide {
3102
margin: 0;
3103
padding: 0;
3104
background-repeat: repeat-y, repeat-y;
3105
background-position: left, right;
3106
}
3107
}
3108
&.vertical > separator {
3110
margin: 0 0 -8px 0;
3111
padding: 0 0 8px 0;
3112
background-repeat: repeat-x;
3113
background-position: top;
3114
&.wide {
3116
margin: 0;
3117
padding: 0;
3118
background-repeat: repeat-x, repeat-x;
3119
background-position: bottom, top;
3120
}
3121
}
3122
}
3123
/**************
3126
* GtkInfoBar *
3127
**************/
3128
infobar {
3129
border-style: none;
3130
&.info { background-color: $info_bg_color; }
3132
&.question { background-color: $question_bg_color; }
3134
&.warning { background-color: $warning_bg_color; }
3136
&.error { background-color: $error_bg_color; }
3138
&.info,
3140
&.question,
3141
&.warning,
3142
&.error {
3143
> label, & { color: $inverse_fg_color; }
3144
button { @extend %button_selected; }
3146
selection {}
3148
*:link { @extend %link_selected; }
3150
}
3151
}
3152
/************
3155
* Tooltips *
3156
************/
3157
tooltip {
3158
&.background {
3159
// background-color needs to be set this way otherwise it gets drawn twice
3160
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3161
// box-shadow: inset 0 1px $highlight_color;
3162
background-color: $tooltip_bg_color;
3163
color: $tooltip_fg_color;
3164
}
3165
// padding: 4px; /* not working */
3167
border-radius: $material_radius;
3168
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3169
&:not(.csd):not(.unity-csd) {
3171
// border: 1px solid $border_color;
3172
// border-radius: $material_radius + 1px;
3173
// background-clip: $extra_background_clip;
3174
}
3175
// FIXME: we need a border or tooltips vanish on black background.
3177
decoration { background-color: transparent; }
3178
label {
3180
// tooltip label already seems to have 6px margins
3181
min-height: 32px - 6px * 2;
3182
padding: 0 8px - 6px;
3183
}
3184
* {
3186
// workaround for Eclipse.
3187
// do not include any declaration here.
3188
// padding: 0;
3189
// background-color: transparent;
3190
// color: inherit;
3191
}
3192
}
3193
/*****************
3196
* Color Chooser *
3197
*****************/
3198
colorswatch {
3199
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3200
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3201
// applied to the overlay box.
3202
// base color corners rounding
3204
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3205
// sports a bigger radius.
3206
// nth-child is needed by the custom color strip.
3207
&.top {
3209
border-top-left-radius: $material_radius + 0.5px;
3210
border-top-right-radius: $material_radius + 0.5px;
3211
overlay {
3213
border-top-left-radius: $material_radius;
3214
border-top-right-radius: $material_radius;
3215
}
3216
}
3217
&.bottom {
3219
border-bottom-left-radius: $material_radius + 0.5px;
3220
border-bottom-right-radius: $material_radius + 0.5px;
3221
overlay {
3223
border-bottom-left-radius: $material_radius;
3224
border-bottom-right-radius: $material_radius;
3225
}
3226
}
3227
&.left,
3229
&:first-child:not(.top) {
3230
border-top-left-radius: $material_radius + 0.5px;
3231
border-bottom-left-radius: $material_radius + 0.5px;
3232
overlay {
3234
border-top-left-radius: $material_radius;
3235
border-bottom-left-radius: $material_radius;
3236
}
3237
}
3238
&.right,
3240
&:last-child:not(.bottom) {
3241
border-top-right-radius: $material_radius + 0.5px;
3242
border-bottom-right-radius: $material_radius + 0.5px;
3243
overlay {
3245
border-top-right-radius: $material_radius;
3246
border-bottom-right-radius: $material_radius;
3247
}
3248
}
3249
&.dark { color: $light_fg_color; }
3251
&.light { color: $dark_fg_color; }
3253
&:drop(active) {
3255
box-shadow: none;
3256
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3258
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3260
}
3261
overlay {
3263
transition: $shadow_transition;
3264
box-shadow: $shadow_1;
3265
&:hover { box-shadow: $shadow_2; }
3267
}
3268
&#add-color-button {
3270
border-radius: $material_radius $material_radius 0 0;
3271
color: $light_fg_color;
3272
&:only-child { border-radius: $material_radius; }
3274
overlay {
3276
background-image: linear-gradient(to right,
3277
$error_bg_color 25%,
3278
$warning_bg_color 25%, $warning_bg_color 50%,
3279
$info_bg_color 50%, $info_bg_color 75%,
3280
$question_bg_color 75%);
3281
}
3282
}
3283
&:disabled {
3285
opacity: 0.5;
3286
overlay { box-shadow: none; }
3288
}
3289
row:selected & {
3291
}
3292
&#editor-color-sample {
3294
border-radius: $material_radius + 0.5px;
3295
overlay { border-radius: $material_radius; }
3297
// overlay:hover { box-shadow: $shadow_1; }
3299
}
3300
}
3301
// colorscale popup
3303
colorchooser .popover.osd {
3304
transition: $shadow_transition;
3305
border-radius: $material_radius;
3306
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3307
background-color: $surface_color;
3308
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3310
}
3311
/********
3314
* Misc *
3315
********/
3316
// content view (grid/list)
3317
.content-view {
3318
background-color: $bg_color;
3319
// &:hover { -gtk-icon-effect: highlight; }
3321
rubberband, .rubberband { @extend rubberband; }
3323
}
3324
.scale-popup {
3326
// .osd & { @extend %osd; }
3327
.osd & button.flat { // FIXME: quick hack, redo properly
3329
}
3330
button { // +/- buttons on GtkVolumeButton popup
3332
}
3333
}
3334
/**********************
3337
* Window Decorations *
3338
**********************/
3339
decoration {
3340
transition: $shadow_transition;
3341
border-radius: $material_radius $material_radius 0 0;
3342
box-shadow: $shadow_4, 0 16px 16px transparent;
3343
// FIXME rationalize shadows
3345
// this is used for the resize cursor area
3347
margin: 8px;
3348
&:backdrop {
3350
// the transparent shadow here is to enforce that the shadow extents don't
3351
// change when we go to backdrop, to prevent jumping windows.
3352
// The biggest shadow should be in the same order then in the active state
3353
// or the jumping will happen during the transition.
3354
box-shadow: $shadow_2, 0 16px 16px transparent;
3355
}
3356
.maximized &,
3358
.fullscreen &,
3359
.tiled &,
3360
.tiled-top &,
3361
.tiled-right &,
3362
.tiled-bottom &,
3363
.tiled-left & { border-radius: 0; }
3364
.popup & { box-shadow: none; }
3366
// server-side decorations as used by mutter
3368
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3369
.csd.popup & {
3371
border-radius: $material_radius;
3372
box-shadow: $shadow_2;
3373
}
3374
tooltip.csd & {
3376
border-radius: $material_radius;
3377
box-shadow: none;
3378
}
3379
messagedialog.csd & {
3381
border-radius: $material_radius;
3382
// box-shadow: $shadow_4, 0 16px 16px transparent;
3383
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3385
}
3386
.solid-csd & {
3388
margin: 0;
3389
// padding: 4px;
3390
border-radius: 0;
3391
box-shadow: none;
3392
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3393
background-color: $titlebar_bg_color;
3394
}
3395
}
3396
// Window Close button
3398
button.titlebutton {
3399
// @extend %simple_flat_button;
3400
@extend %circular_button;
3402
.selection-mode & {
3404
}
3405
}
3406
// catch all extend :)
3409
%selected_items {
3411
background-color: $selected_overlay_color;
3412
}
3413
.monospace { font-family: monospace; }
3415
/**********************
3418
* Touch Copy & Paste *
3419
**********************/
3420
// touch selection handlebars for the Popover.osd above
3421
cursor-handle {
3422
color: $primary_color;
3423
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
3424
&.top:dir(ltr), &.bottom:dir(rtl) {
3426
-gtk-icon-transform: rotate(90deg);
3427
}
3428
&.bottom:dir(ltr), &.top:dir(rtl) {
3430
-gtk-icon-transform: unset;
3431
}
3432
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3434
padding-top: 6px;
3435
-gtk-icon-transform: rotate(45deg);
3436
}
3437
}
3438
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3440
// shortcut window keys
3442
.keycap {
3443
min-width: 28px - 8px * 2;
3444
min-height: 28px - 2px;
3445
margin-top: 2px;
3446
padding-bottom: 2px;
3447
padding-left: 8px;
3448
padding-right: 8px;
3449
border: solid 1px $border_color;
3451
border-radius: $material_radius + 1px;
3452
box-shadow: inset 0 -2px $border_color;
3453
background-color: $surface_color;
3454
color: $fg_color;
3455
font-size: smaller;
3456
}
3457
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3459
transition: $shorter_transition;
3460
box-shadow: $shadow_1, inset 0 0 0 2px $primary_color;
3461
caret-color: $primary_color;
3462
}
3463
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3465
stackswitcher button.circular,
3467
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3468
min-width: $medium_size;
3469
min-height: $medium_size;
3470
padding: 0;
3471
}
3472
/*********
3475
* Emoji *
3476
*********/
3477
popover.emoji-picker {
3478
padding: 0;
3479
entry {
3481
border-bottom: 1px solid $border_color;
3482
border-radius: 0;
3483
box-shadow: none;
3484
background-color: transparent;
3485
}
3486
scrolledwindow { border-bottom: 1px solid $border_color; }
3488
}
3489
// mimic tab style
3491
button.emoji-section {
3492
margin-top: -1px;
3493
padding: 0 8px;
3494
min-width: 24px;
3495
min-height: $medium_size;
3496
border-radius: 0;
3497
outline-offset: -6px;
3498
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3500
&:checked {
3502
box-shadow: inset 0 2px $primary_color;
3503
background-color: transparent;
3504
}
3505
&:hover, &:active { background-color: $hover_overlay_color; }
3507
&:first-child { margin-left: 4px; }
3509
&:last-child { margin-right: 4px; }
3511
}
3512
.emoji {
3514
min-width: 3em;
3515
min-height: 3em;
3516
padding: 0 8px;
3517
// font-size: larger;
3518
widget {
3520
transition: $shorter_transition;
3521
border-radius: $material_radius;
3522
&:hover { background-color: $hover_overlay_color; }
3524
}
3525
}
3526