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
&:disabled { color: $disabled_fg_color; }
89
&:hover, &:active, &:selected { border-radius: $material_radius; }
91
selection,
93
&:selected { @extend %selected_items; }
94
}
95
textview {
97
// FIXME: we need to override background-color to ensure text rendering
98
text { background-color: $base_color; }
99
border {
101
background-color: $alt_base_color;
102
color: $secondary_fg_color; // FIXME: not working
103
}
104
}
105
// iconview { @extend .view; }
107
.rubberband,
109
rubberband {
110
border: 1px solid $alt_primary_color;
111
background-color: rgba($alt_primary_color, 0.3);
112
}
113
flowbox {
115
rubberband { @extend rubberband; }
116
flowboxchild {
118
padding: 4px;
119
border-radius: $material_radius;
120
&:selected { @extend %selected_items; }
122
}
123
}
124
.content-view .tile {
126
// margin: 2px;
127
// padding: 0;
128
// border-radius: 0;
129
// background-color: black;
130
&:selected {
132
background-color: transparent;
133
color: inherit;
134
}
135
}
136
label {
138
caret-color: currentColor; // this shouldn't be needed.
139
&.separator {
141
@extend .dim-label;
142
color: $fg_color;
144
}
145
row:selected &,
147
&:selected { @extend %nobg_selected_items; }
148
selection {
150
background-color: $primary_color;
151
color: $inverse_fg_color;
152
}
153
&:disabled {
155
color: $disabled_fg_color;
156
selection { @extend %selected_items:disabled; }
158
headerbar &,
160
tab &,
161
button & { color: inherit; }
162
}
163
}
164
.dim-label { opacity: 0.6; }
166
assistant {
168
.sidebar {
169
padding: 4px 0;
170
// background-color: $base_color;
171
// border-top: 1px solid $border_color;
172
}
173
// &.csd .sidebar { border-top-style: none; }
175
.sidebar label {
177
min-height: $medium_size;
178
padding: 0 12px;
179
color: $disabled_fg_color;
180
font-weight: 500;
181
&.highlight { color: $fg_color; }
183
}
184
}
185
// %osd, .osd { opacity: 0.9; }
187
/*********************
190
* Spinner Animation *
191
*********************/
192
@keyframes spin {
193
to { -gtk-icon-transform: rotate(1turn); }
194
}
195
spinner {
197
background: none;
198
opacity: 0; // non spinning spinner makes no sense
199
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
200
&:checked {
202
opacity: 1;
203
animation: spin 1s linear infinite;
204
&:disabled { opacity: 0.5; }
206
}
207
}
208
/****************
211
* Text Entries *
212
****************/
213
%entry,
214
entry {
215
%entry_basic, & {
216
min-height: $medium_size;
217
padding: 0 8px;
218
border-radius: $material_radius $material_radius 0 0;
219
@include entry(normal);
221
&:focus { @include entry(focus); }
223
&:disabled { @include entry(disabled); }
225
&.flat {
227
min-height: 0;
228
padding: 2px;
229
border-radius: 0;
230
background-color: transparent;
231
}
232
image { // icons inside the entry
234
// @extend %simple_flat_button;
235
// min-height: $small_size;
237
// min-width: $small_size;
238
// border-radius: $circular_radius;
239
// -gtk-outline-radius: $circular_radius;
240
color: $secondary_fg_color;
241
&:hover, &:active { color: $fg_color; }
243
&:disabled { color: $disabled_fg_color; }
245
&.left {
247
margin-left: ($medium_size - 16px) / 2 - 8px;
248
margin-right: 6px;
249
}
250
&.right {
252
margin-left: 6px;
253
margin-right: ($medium_size - 16px) / 2 - 8px;
254
}
255
}
256
undershoot {
258
&.left { @include undershoot(left); }
259
&.right { @include undershoot(right); }
261
}
262
selection { @extend %selected_items; }
264
// entry error and warning style
266
@each $e_type, $e_color in (error, $error_color),
267
(warning, $warning_color) {
268
&.#{$e_type} {
269
@include entry(normal, $e_color);
270
&:focus { @include entry(focus, $e_color); }
272
&:disabled { @include entry(disabled, $e_color); }
274
}
275
}
276
&:drop(active) {
278
// box-shadow: inset 0 0 0 2px $primary_color;
279
}
280
.osd & {
282
}
283
}
284
progress {
286
margin: 2px (2px - 8px);
287
border-bottom: 2px solid $primary_color;
288
background-color: transparent;
289
}
290
// linked entries
292
.linked:not(.vertical) > & { @extend %linked_entry; }
293
// Vertically linked entries
295
.linked.vertical > & { @extend %linked_vertical_entry; }
296
}
297
%entry_raised {
299
border-radius: $material_radius;
300
@include entry(raised-normal);
302
&:focus { @include entry(raised-focus); }
304
&:disabled { @include entry(raised-disabled); }
306
// entry error and warning style
308
@each $e_type, $e_color in (error, $error_color),
309
(warning, $warning_color) {
310
&.#{$e_type} {
311
@include entry(raised-normal, $e_color);
312
&:focus { @include entry(raised-focus, $e_color); }
314
&:disabled { @include entry(raised-disabled, $e_color); }
316
image {
318
color: $inverse_secondary_fg_color;
319
&:hover, &:active { color: $inverse_fg_color; }
321
&:disabled { color: $inverse_disabled_fg_color; }
323
}
324
}
325
}
326
}
327
treeview entry {
329
&.flat, & {
330
background-color: $base_color;
331
&, &:focus {
333
border-image: none;
334
box-shadow: none;
335
}
336
}
337
}
338
.entry-tag {
340
margin: 2px;
341
border-radius: $circular_radius;
342
box-shadow: none;
343
background-color: $divider_color;
344
color: $fg_color;
345
&:hover { background-image: image($divider_color); }
347
// side margins: compensate the entry padding with a negative margin
349
// then the negative margin itself
350
:dir(ltr) & {
351
margin-left: 4px;
352
margin-right: 0;
353
padding-left: 12px;
354
padding-right: 8px;
355
}
356
:dir(rtl) & {
358
margin-left: 0;
359
margin-right: 4px;
360
padding-left: 8px;
361
padding-right: 12px;
362
}
363
// seems any sizing doesn't work
365
&.button {
366
box-shadow: none;
367
background-color: transparent;
368
&:not(:hover):not(:active) { color: $secondary_fg_color; }
370
}
371
}
372
/***********
375
* Buttons *
376
***********/
377
// stuff for .needs-attention
378
@keyframes needs_attention {
379
from {
380
background-image: -gtk-gradient(radial,
381
center center, 0,
382
center center, 0.001,
383
to($primary_color),
384
to(transparent));
385
}
386
to {
388
background-image: -gtk-gradient(radial,
389
center center, 0,
390
center center, 0.5,
391
to($primary_color),
392
to(transparent));
393
}
394
}
395
%button,
397
button {
398
@at-root %button_basic, & {
399
min-height: 24px;
400
min-width: 16px;
401
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
402
border-radius: $material_radius;
403
font-weight: 500;
404
@include button(normal);
406
&:hover { @include button(hover); }
408
&:active { @include button(active); }
410
&:disabled { @include button(disabled); }
412
&:checked { @include button(checked); }
414
&:checked:disabled { @include button(checked-disabled); }
416
@at-root %flat_button, &.flat {
418
@at-root %simple_flat_button, & {
419
@include button(flat-normal);
420
&:hover { @include button(flat-hover); }
422
&:active { @include button(flat-active); }
424
&:disabled { @include button(flat-disabled); }
426
}
427
&:checked { @include button(flat-checked); }
429
&:checked:disabled { @include button(flat-checked-disabled); }
431
}
432
&.text-button {
434
padding-left: 16px;
435
padding-right: 16px;
436
}
437
&.image-button {
439
min-width: 24px;
440
padding: ($medium_size - 24px) / 2;
441
@extend %circular_button;
443
}
444
&.text-button.image-button {
446
border-radius: $material_radius;
447
-gtk-outline-radius: $material_radius;
448
label {
450
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
451
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
453
}
454
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
456
}
457
.linked > & { @extend %linked; }
459
.linked.vertical > & { @extend %linked_vertical; }
461
.linked > &.flat,
463
.linked.vertical > &.flat {
464
border-radius: $material_radius;
465
&.image-button { @extend %circular_button; }
467
&.text-button.image-button {
469
border-radius: $material_radius;
470
-gtk-outline-radius: $material_radius;
471
}
472
}
473
&:drop(active) {
475
// box-shadow: inset 0 0 0 2px $primary_color;
476
}
477
}
478
@at-root %button_selected, row:selected & {
480
&:disabled {
481
background-color: $inverse_divider_color;
482
color: $inverse_disabled_secondary_fg_color;
483
}
484
&.flat {
486
color: $inverse_secondary_fg_color;
487
&:hover, &:active { color: $inverse_fg_color; }
489
&:disabled { color: $inverse_disabled_secondary_fg_color; }
491
&:checked {
493
background-color: $inverse_track_color;
494
color: $inverse_fg_color;
495
}
496
&:checked:disabled {
498
background-color: $inverse_divider_color;
499
color: $inverse_disabled_fg_color;
500
}
501
}
502
}
503
// big standalone buttons like in Documents pager
505
&.osd {
506
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
507
&.image-button { padding: ($large_size - 24px) / 2; }
509
&:disabled { opacity: 0; }
511
}
512
// overlay / OSD style
514
@at-root %osd_button,
515
.osd & {
516
}
517
// Suggested and Destructive Action buttons
519
@each $b_type, $b_color in (suggested-action, $suggested_color),
520
(destructive-action, $destructive_color) {
521
&.#{$b_type} {
522
background-color: $b_color;
523
color: $inverse_fg_color;
524
&:disabled { @include button(disabled); }
526
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage(0.3)); }
528
&.flat {
530
background-color: transparent;
531
color: $b_color;
532
&:disabled { @include button(flat-disabled); }
534
&:checked { background-color: rgba($b_color, 0.3); }
536
}
537
.osd & {
539
}
540
}
541
}
542
.stack-switcher > & {
544
// to position the needs attention dot, padding is added to the button
545
// child, a label needs just lateral padding while an icon needs vertical
546
// padding added too.
547
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
549
> label {
551
padding-left: 6px; // label padding
552
padding-right: 6px; //
553
}
554
> image {
556
padding-left: 6px; // image padding
557
padding-right: 6px; //
558
padding-top: 3px; //
559
padding-bottom: 3px; //
560
}
561
&.text-button {
563
// compensate text-button paddings
564
padding-left: 16px - 6px;
565
padding-right: 16px - 6px;
566
}
567
&.image-button {
569
// we want image buttons to have a 1:1 aspect ratio, so compensation
570
// of the padding added to the GtkImage is needed
571
padding-left: ($medium_size - 16px) / 2 - 6px;
572
padding-right: ($medium_size - 16px) / 2 - 6px;
573
}
574
&.needs-attention {
576
> label,
577
> image { @extend %needs_attention; }
578
&:checked {
580
> label,
581
> image {
582
animation: none;
583
background-image: none;
584
}
585
}
586
}
587
}
588
// hide separators
590
&.font,
591
&.file { separator { @extend %hide_separators; }}
592
// &.font { > box > box > label { font-weight: bold; }}
594
// inline-toolbar buttons
596
.inline-toolbar & {
597
// @extend %button_basic.flat;
598
&:not(.text-button) { @extend %circular_button; }
600
}
601
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
603
@at-root %circular_button,
605
&.close,
606
&.circular { // The Bloody Circul Button
607
border-radius: $circular_radius;
608
-gtk-outline-radius: $circular_radius;
609
// label { padding: 0; }
611
}
612
@at-root %small_button {
614
min-height: $small_size;
615
min-width: $small_size;
616
padding: 0;
617
border-radius: $circular_radius;
618
-gtk-outline-radius: $circular_radius;
619
}
620
}
621
%needs_attention {
623
animation: needs_attention $longer_duration $deceleration_curve forwards;
624
background-repeat: no-repeat;
625
background-position: right 3px;
626
background-size: 6px 6px;
627
&:dir(rtl) { background-position: left 3px; }
629
}
630
// all the following is for the +|- buttons on inline toolbars, that way
632
// should really be deprecated...
633
.inline-toolbar toolbutton > button { // redefining the button look is
634
// needed since those are flat...
635
}
636
// More inline toolbar buttons
638
toolbar.inline-toolbar toolbutton {
639
// > button.flat { @extend %linked_middle; }
640
// &:first-child > button.flat { @extend %linked:first-child; }
642
// &:last-child > button.flat { @extend %linked:last-child; }
644
// &:only-child > button.flat { @extend %linked:only-child; }
646
}
647
%linked_middle {
649
border-radius: 0;
650
-gtk-outline-radius: $material_radius;
651
}
652
%linked {
654
@extend %linked_middle;
655
&:first-child {
657
border-top-left-radius: $material_radius;
658
border-bottom-left-radius: $material_radius;
659
}
660
&:last-child {
662
border-top-right-radius: $material_radius;
663
border-bottom-right-radius: $material_radius;
664
}
665
&:only-child {
667
border-radius: $material_radius;
668
}
669
}
670
%linked_vertical_middle {
672
border-radius: 0;
673
-gtk-outline-radius: $material_radius;
674
}
675
%linked_vertical {
677
@extend %linked_vertical_middle;
678
&:first-child {
680
border-top-left-radius: $material_radius;
681
border-top-right-radius: $material_radius;
682
}
683
&:last-child {
685
border-bottom-left-radius: $material_radius;
686
border-bottom-right-radius: $material_radius;
687
}
688
&:only-child {
690
border-radius: $material_radius;
691
}
692
}
693
%linked_entry {
695
@extend %linked_middle;
696
&:first-child {
698
border-radius: $material_radius 0 0 0;
699
}
700
&:last-child {
702
border-radius: 0 $material_radius 0 0;
703
}
704
&:only-child {
706
border-radius: $material_radius $material_radius 0 0;
707
}
708
}
709
%linked_vertical_entry {
711
@extend %linked_vertical_middle;
712
&:first-child {
714
border-radius: $material_radius $material_radius 0 0;
715
}
716
&:last-child {
718
border-radius: 0;
719
}
720
&:only-child {
722
border-radius: $material_radius $material_radius 0 0;
723
}
724
}
725
/* menu buttons */
727
modelbutton.flat,
728
.menuitem.button.flat {
729
min-height: $menuitem_size;
730
padding: 0 8px;
731
border-radius: $material_radius;
732
color: inherit;
733
@extend %simple_flat_button;
735
&:selected { @extend %selected_items; }
737
}
738
modelbutton.flat arrow {
740
background: none;
741
&:hover { background: none; }
743
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
745
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
747
}
748
button.color {
750
min-height: $small_size;
751
min-width: $small_size;
752
padding: $container_padding;
753
colorswatch:only-child {
755
// &, overlay { border-radius: 0; }
756
}
757
}
758
/*********
761
* Links *
762
*********/
763
*:link {
764
&, &:hover, &:active { color: $link_color; }
765
&:visited {
767
&, &:hover, &:active { color: $visited_link_color; }
768
}
769
@at-root %link_selected,
771
&:selected,
772
*:selected & { color: $inverse_fg_color; }
773
}
774
button:link,
776
button:visited {
777
@extend *:link;
778
> label { text-decoration-line: underline; }
780
}
781
/*****************
783
* GtkSpinButton *
784
*****************/
785
spinbutton {
786
&:not(.vertical) {
787
// in this horizontal configuration, the whole spinbutton
788
// behaves as the entry, so we extend the entry styling
789
// and nuke the style on the internal entry
790
@extend %entry;
791
padding: 0;
793
entry {
795
min-width: $large_size - 8px * 2;
796
// reset all the other props since the spinbutton node is styled here
797
margin: 0;
798
border-image: none;
799
border-radius: 0;
800
box-shadow: none;
801
background-color: transparent;
802
//
803
// This will help to simplify spinbutton's code, but unfortunatelly
804
// doesn't work properly in :dir(rtl). It needs z-index property.
805
//
806
// min-width: $large_size - 8px;
807
//
808
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
809
//
810
// &:dir(ltr) {
811
// margin-right: -$spinbuttons_width;
812
// padding-right: $spinbuttons_width;
813
// }
814
//
815
// &:dir(rtl) {
816
// margin-left: -$spinbuttons_width;
817
// padding-left: $spinbuttons_width;
818
// }
819
}
820
button {
822
// margin: $container_padding;
823
border: solid $container_padding transparent;
824
@extend %simple_flat_button;
826
@extend %small_button;
828
&.up:dir(ltr),
830
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
831
&.up:dir(rtl),
833
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
834
}
835
}
836
// OSD horizontal
838
.osd &:not(.vertical) {
839
button {
840
}
841
}
842
// Vertical
844
&.vertical {
845
// in the vertical configuration, we treat the spinbutton
846
// as a box, and tweak the style of the entry in the middle
847
// so that it's linked
848
// FIXME: this should not be set at all, but otherwise it gets the wrong
850
// color
851
&:disabled { color: $disabled_fg_color; }
852
&:drop(active) {
854
box-shadow: none;
855
}
856
entry {
858
@extend %entry_raised;
859
min-height: $medium_size;
861
min-width: $large_size;
862
padding: 0;
863
}
864
button {
866
min-height: $medium_size;
867
min-width: $large_size;
868
padding: 0;
869
@extend %simple_flat_button;
871
&.up { border-radius: $material_radius $material_radius 0 0; }
873
&.down { border-radius: 0 0 $material_radius $material_radius; }
875
}
876
}
877
// OSD vertical
879
.osd &.vertical button:first-child {
880
}
881
// Misc
883
treeview &:not(.vertical) {
884
min-height: 0;
885
border-style: none;
886
border-radius: 0;
887
entry {
889
min-height: 0;
890
padding: 1px 2px;
891
}
892
}
893
}
894
/**************
897
* ComboBoxes *
898
**************/
899
combobox {
900
arrow {
901
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
902
min-height: 16px;
903
min-width: 16px;
904
}
905
decoration,
907
button.combo:checked { transition: none; } // workaround for menuitem selection
908
button.combo cellview {
910
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
911
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
912
}
913
#gtk-combobox-popup-menu {
915
padding: 2px 0;
916
menuitem {
918
min-height: $medium_size - 2px * 2;
919
padding: 0 8px;
920
}
921
// overflow arrows
923
> arrow {
924
&.top { margin-top: -2px; }
925
&.bottom {
927
margin-top: 2px * 2;
928
margin-bottom: -2px * 3;
929
}
930
}
931
}
932
&.linked {
934
button:nth-child(2) {
935
&:dir(ltr) { @extend %linked_entry:last-child; }
936
&:dir(rtl) { @extend %linked_entry:first-child; }
937
}
938
}
939
> .linked > button {
941
@extend %linked_middle;
942
&:first-child { @extend %linked_entry:first-child; }
944
&:last-child { @extend %linked_entry:last-child; }
946
&:only-child { @extend %linked_entry:only-child; }
948
}
949
&:drop(active) { // FIXME: untested
951
box-shadow: none;
952
// button.combo { @extend %button_basic:drop(active); }
954
}
955
}
956
// the combo is a composite widget so the way we do button linking doesn't
958
// work, special case needed. See
959
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
960
.linked:not(.vertical) > combobox {
962
> box > button.combo { @extend %linked_middle; }
963
&:first-child > box > button.combo { @extend %linked_entry:first-child; }
965
&:last-child > box > button.combo { @extend %linked_entry:last-child; }
967
&:only-child > box > button.combo { @extend %linked_entry:only-child; }
969
}
970
.linked.vertical > combobox {
972
> box > button.combo { @extend %linked_vertical_middle; }
973
&:first-child > box > button.combo { @extend %linked_vertical_entry:first-child; }
975
&:last-child > box > button.combo { @extend %linked_vertical_entry:last-child; }
977
&:only-child > box > button.combo { @extend %linked_vertical_entry:only-child; }
979
}
980
button.combo {
982
border-radius: $material_radius $material_radius 0 0;
983
background-image: none;
984
font-weight: inherit;
985
@include entry(normal);
987
&:hover { box-shadow: inset 0 -1px $fg_color; }
989
&:checked { @include entry(focus); }
991
&:disabled { @include entry(disabled); }
993
}
994
/************
997
* Toolbars *
998
************/
999
toolbar {
1000
-GtkWidget-window-dragging: true;
1001
padding: 2px;
1002
background-color: $bg_color;
1003
button { @extend %button_basic.flat; }
1005
// on OSD
1007
.osd & { background-color: transparent; }
1008
// stand-alone OSD toolbars
1010
&.osd {
1011
transition: $shadow_transition;
1012
padding: $container_padding;
1013
border-radius: $material_radius;
1014
box-shadow: $shadow_2, inset 0 1px $highlight_color;
1015
background-color: $surface_color;
1016
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
1018
&.left,
1020
&.right,
1021
&.top,
1022
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
1023
}
1024
// toolbar separators
1026
&.horizontal > separator { margin: 2px; }
1027
&.vertical > separator { margin: 2px; }
1028
&:not(.inline-toolbar):not(.osd) {
1030
scale,
1031
entry,
1032
spinbutton,
1033
button { margin: 2px; }
1034
.linked entry,
1036
.linked spinbutton,
1037
.linked button {
1038
&:not(:first-child) { margin-left: 0; }
1039
&:not(:last-child) { margin-right: 0; }
1040
}
1041
spinbutton {
1043
entry,
1044
button { margin: 0; }
1045
}
1046
switch { margin: 2px + $container_padding 2px; }
1048
}
1049
}
1050
// searchbar, location-bar & inline-toolbar
1052
.inline-toolbar {
1053
padding: $container_padding;
1054
border-style: solid;
1055
border-width: 0 1px 1px;
1056
border-color: $border_color;
1057
background-color: $alt_base_color;
1058
}
1059
searchbar > revealer > box,
1061
.location-bar {
1062
padding: $container_padding;
1063
border-style: solid;
1064
border-width: 0 0 1px;
1065
border-color: $border_color;
1066
background-color: $bg_color;
1067
background-clip: border-box;
1068
}
1069
searchbar > revealer > box {
1071
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1072
margin: -6px;
1073
padding: $container_padding;
1074
}
1075
/***************
1078
* Header bars *
1079
***************/
1080
%titlebar,
1081
headerbar {
1082
transition: background-color $shorter_duration $deceleration_curve, color $shorter_duration $deceleration_curve;
1083
min-height: $large_size;
1084
padding: 0 $container_padding;
1085
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1086
background-color: $titlebar_bg_color;
1087
color: $titlebar_fg_color;
1088
&:disabled { color: $titlebar_disabled_fg_color; }
1090
&:backdrop {
1092
color: $titlebar_secondary_fg_color;
1093
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1095
}
1096
.title {
1098
padding: 0 12px;
1099
font-weight: bold;
1100
}
1101
.subtitle {
1103
padding: 0 12px;
1104
font-size: smaller;
1105
@extend .dim-label;
1107
}
1108
.linked:not(.vertical) > entry:not(.flat) { border-radius: $material_radius; }
1110
button:not(.suggested-action):not(.destructive-action) {
1112
@extend %button_basic.flat;
1113
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1115
$titlebar_indicator_color 0%,
1116
transparent 0%)
1117
0 0 0 / 0 0 0px;
1118
color: $titlebar_secondary_fg_color;
1119
&:hover, &:active { color: $titlebar_fg_color; }
1121
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1123
&:checked {
1125
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1126
$titlebar_indicator_color 100%,
1127
transparent 0%)
1128
0 0 2 / 0 0 2px;
1129
color: $titlebar_fg_color;
1130
&:disabled { color: $titlebar_disabled_fg_color; }
1132
&, &:disabled { background-color: transparent; }
1134
}
1135
&:backdrop {
1137
color: $titlebar_disabled_fg_color;
1138
&:hover, &:active { color: $titlebar_secondary_fg_color; }
1140
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1142
&:checked {
1144
color: $titlebar_secondary_fg_color;
1145
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1147
}
1148
}
1149
}
1150
button.suggested-action, button.destructive-action {
1152
&:disabled {
1153
background-color: $titlebar_fill_color;
1154
color: $titlebar_disabled_fg_color;
1155
}
1156
}
1157
&.selection-mode {
1159
// 0.00001s was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1160
// but let's keep it for backwards compatibility.
1161
transition: background-color 0.00001s $longer_duration, color $longer_duration $deceleration_curve;
1162
animation: header_ripple_effect $longer_duration $deceleration_curve;
1163
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1164
background-color: $primary_color;
1165
color: $inverse_fg_color;
1166
&:backdrop {
1168
color: $inverse_secondary_fg_color;
1169
}
1170
.subtitle:link { @extend *:link:selected; }
1172
button:not(.suggested-action):not(.destructive-action) {
1174
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1175
currentColor 0%,
1176
transparent 0%)
1177
0 0 0 / 0 0 0px;
1178
color: $inverse_fg_color;
1179
&:disabled { color: $inverse_disabled_fg_color; }
1181
&:checked {
1183
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1184
currentColor 100%,
1185
transparent 0%)
1186
0 0 2 / 0 0 2px;
1187
color: $inverse_fg_color;
1188
&:disabled { color: $inverse_disabled_fg_color; }
1190
}
1191
&:backdrop {
1193
color: $inverse_secondary_fg_color;
1194
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1196
&:checked {
1198
color: $inverse_secondary_fg_color;
1199
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1201
}
1202
}
1203
}
1204
.selection-menu {
1206
padding-left: 16px;
1207
padding-right: 16px;
1208
arrow { -GtkArrow-arrow-scaling: 1; }
1210
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1212
}
1213
}
1214
// squared corners when the window is maximized, tiled, or fullscreen
1216
.tiled &,
1217
.tiled-top &,
1218
.tiled-right &,
1219
.tiled-bottom &,
1220
.tiled-left &,
1221
.maximized &,
1222
.fullscreen & {
1223
border-radius: 0;
1224
box-shadow: $shadow_1;
1225
}
1226
&.default-decoration {
1228
min-height: $small_size;
1229
padding: $container_padding;
1230
box-shadow: inset 0 1px $titlebar_highlight_color;
1231
.tiled &,
1233
.maximized &,
1234
.fullscreen & { box-shadow: none; }
1235
button.titlebutton {
1237
min-height: $small_size;
1238
min-width: $small_size;
1239
margin: 0;
1240
padding: 0;
1241
}
1242
// workaround for non-animatable buttons
1244
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1245
}
1246
.solid-csd & {
1248
&:dir(rtl), &:dir(ltr) { // specificity bump
1249
// margin-left: -2px;
1250
// margin-right: -2px;
1251
// margin-top: -2px;
1252
// border-radius: 0;
1253
// box-shadow: inset 0 1px $titlebar_highlight_color;
1254
}
1255
}
1256
}
1257
headerbar {
1259
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1260
entry,
1261
spinbutton,
1262
// separator,
1263
button {
1264
margin-top: $container_padding;
1265
margin-bottom: $container_padding;
1266
}
1267
switch {
1269
margin-top: ($large_size - 24px) / 2;
1270
margin-bottom: ($large_size - 24px) / 2;
1271
}
1272
// reset button margins of the spinbutton
1274
spinbutton button {
1275
margin-top: 0;
1276
margin-bottom: 0;
1277
}
1278
// FIXME: This is a hacky workaround.
1280
.entry-tag {
1281
margin-top: 5px;
1282
margin-bottom: 5px;
1283
}
1284
}
1285
.background .titlebar {
1287
border-top-left-radius: $material_radius;
1288
border-top-right-radius: $material_radius;
1289
}
1290
.background.tiled .titlebar,
1292
.background.tiled-top .titlebar,
1293
.background.tiled-right .titlebar,
1294
.background.tiled-bottom .titlebar,
1295
.background.tiled-left .titlebar,
1296
.background.maximized .titlebar,
1297
.background.solid-csd .titlebar {
1298
border-top-left-radius: 0;
1299
border-top-right-radius: 0;
1300
}
1301
headerbar { // headerbar border rounding
1303
window separator:first-child + &, // tackles the paned container case
1304
window &:first-child { border-top-left-radius: $material_radius; }
1305
window &:last-child { border-top-right-radius: $material_radius; }
1307
window stack & { // tackles the stacked headerbars case
1309
&:first-child, &:last-child {
1310
border-top-left-radius: $material_radius;
1311
border-top-right-radius: $material_radius;
1312
}
1313
}
1314
window.tiled &,
1316
window.tiled-top &,
1317
window.tiled-right &,
1318
window.tiled-bottom &,
1319
window.tiled-left &,
1320
window.maximized &,
1321
window.fullscreen &,
1322
window.solid-csd & {
1323
&,
1324
&:first-child,
1325
&:last-child,
1326
&:only-child {
1327
border-top-left-radius: 0;
1328
border-top-right-radius: 0;
1329
}
1330
}
1331
}
1332
.titlebar:not(headerbar) {
1334
window.csd > & {
1335
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1336
padding: 0;
1337
background-color: transparent;
1338
background-image: none;
1339
border-style: none;
1340
box-shadow: none;
1341
}
1342
> separator {
1344
background-color: $titlebar_bg_color;
1345
background-image: image($border_color);
1346
}
1347
@extend %titlebar;
1349
}
1350
/************
1353
* Pathbars *
1354
************/
1355
%pathbar_button,
1356
.path-bar button {
1357
padding-left: ($medium_size - 24px) / 2;
1358
padding-right: ($medium_size - 24px) / 2;
1359
label:not(:only-child) {
1361
&:first-child { margin-left: 4px; }
1362
&:last-child { margin-right: 4px; }
1364
}
1365
&.slider-button {
1367
padding-left: (24px - 16px) / 2;
1368
padding-right: (24px - 16px) / 2;
1369
}
1370
:not(headerbar) & {
1372
@extend %flat_button;
1373
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1375
$primary_color 0%,
1376
transparent 0%)
1377
0 0 0 / 0 0 0px;
1378
border-radius: $material_radius;
1379
&:checked {
1381
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1382
$primary_color 100%,
1383
transparent 0%)
1384
0 0 2 / 0 0 2px;
1385
&, &:disabled { background-color: transparent; }
1387
}
1388
}
1389
}
1390
/**************
1393
* Tree Views *
1394
**************/
1395
treeview.view {
1396
@at-root * {
1397
-GtkTreeView-horizontal-separator: 4;
1398
-GtkTreeView-grid-line-width: 1;
1399
-GtkTreeView-grid-line-pattern: '';
1400
-GtkTreeView-tree-line-width: 1;
1401
-GtkTreeView-tree-line-pattern: '';
1402
-GtkTreeView-expander-size: 16;
1403
}
1404
border-left-color: $track_color; // this is actually the tree lines color,
1406
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1407
&:selected { border-left-color: $inverse_track_color; }
1409
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1411
&:hover, &:active, &:selected { border-radius: 0; }
1413
&.separator {
1415
min-height: 1px + 2px * 2;
1416
color: $border_color;
1417
}
1418
&:drop(active) {
1420
border-style: solid none;
1421
border-width: 1px;
1422
border-color: $primary_color;
1423
&.after { border-top-style: none; }
1425
&.before { border-bottom-style: none; }
1427
}
1428
&.expander {
1430
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1431
-gtk-icon-transform: rotate(-90deg);
1432
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1434
&:checked { -gtk-icon-transform: unset; }
1436
color: $secondary_fg_color;
1438
&:hover, &:active { color: $fg_color; }
1440
&:disabled { color: $disabled_secondary_fg_color; }
1442
&:selected {
1444
color: $inverse_secondary_fg_color;
1445
&:hover, &:active { color: $inverse_fg_color; }
1447
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1449
}
1450
}
1451
&.progressbar { // progress bar in treeviews
1453
border-bottom: $bar_size solid $primary_color;
1454
box-shadow: none;
1455
background-color: transparent;
1456
&:selected { border-bottom-color: $inverse_fg_color; }
1458
}
1459
&.trough { // progress bar trough in treeviews
1461
border-bottom: $bar_size solid $divider_color;
1462
box-shadow: none;
1463
background-color: transparent;
1464
&:selected { border-bottom-color: $inverse_divider_color; }
1466
}
1467
header {
1469
button {
1470
@extend row.activatable;
1471
padding: 2px 6px;
1473
border-style: none solid solid none;
1474
border-width: 1px;
1475
border-color: $border_color;
1476
border-radius: 0;
1477
background-clip: border-box;
1478
&:not(:hover):not(:active) { color: $secondary_fg_color; }
1480
&, &:hover, &:active { box-shadow: none; }
1482
&, &:disabled { background-color: $base_color; }
1484
&:last-child { border-right-style: none; }
1486
}
1487
}
1488
button.dnd,
1490
header.button.dnd { // for treeview-like derive widgets
1491
padding: 2px 6px;
1492
border-style: none solid solid;
1493
border-width: 1px;
1494
border-color: $border_color;
1495
border-radius: 0;
1496
box-shadow: none;
1497
background-color: $base_color;
1498
background-clip: border-box;
1499
color: $primary_color;
1500
}
1501
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1503
}
1504
/*********
1507
* Menus *
1508
*********/
1509
menubar,
1510
.menubar {
1511
-GtkWidget-window-dragging: true;
1512
padding: 0;
1513
// box-shadow: inset 0 -1px $border_color;
1514
background-color: $titlebar_bg_color;
1515
> menuitem {
1517
transition: $shorter_transition;
1518
min-height: 20px;
1519
padding: 4px 8px;
1520
color: $titlebar_secondary_fg_color;
1521
&:hover { // Seems like it :hover even with keyboard focus
1523
transition: none;
1524
background-color: $titlebar_divider_color;
1525
color: $titlebar_fg_color;
1526
}
1527
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1529
label:disabled { color: inherit; } // to inherit the above color
1531
}
1532
}
1533
.csd.popup { background-color: transparent; }
1535
menu,
1537
.menu,
1538
.context-menu {
1539
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1540
padding: 4px 0;
1541
box-shadow: inset 0 1px $highlight_color;
1542
background-color: $surface_color;
1543
border: 1px solid $border_color; // adds borders in a non composited env
1544
.csd & {
1546
border: none; // axes borders in a composited env
1547
border-radius: $material_radius;
1548
}
1549
menuitem {
1551
transition: background-color $shorter_duration $deceleration_curve;
1552
min-height: 20px;
1553
min-width: 40px;
1554
padding: 4px 8px;
1555
font: initial;
1556
text-shadow: none;
1557
&:hover {
1559
transition: none;
1560
background-color: $divider_color;
1561
}
1562
&:disabled { color: $disabled_fg_color; }
1564
// submenu indicators
1566
arrow {
1567
min-height: 16px;
1568
min-width: 16px;
1569
&:dir(ltr) {
1571
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1572
margin-left: 8px;
1573
}
1574
&:dir(rtl) {
1576
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1577
margin-right: 8px;
1578
}
1579
}
1580
// avoids labels color being overridden, see
1582
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1583
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1584
}
1585
// overflow arrows
1587
> arrow {
1588
min-height: 16px;
1589
min-width: 16px;
1590
padding: 4px;
1591
background-color: $surface_color;
1592
color: $secondary_fg_color;
1593
&.top {
1595
margin-top: -4px;
1596
border-bottom: 1px solid $border_color;
1597
border-radius: $material_radius $material_radius 0 0;
1598
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1599
}
1600
&.bottom {
1602
margin-top: 4px * 2;
1603
margin-bottom: -4px * 3;
1604
border-top: 1px solid $border_color;
1605
border-radius: 0 0 $material_radius $material_radius;
1606
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1607
}
1608
&:hover {
1610
background-image: image($divider_color);
1611
color: $fg_color;
1612
}
1613
&:disabled {
1615
border-color: transparent;
1616
background-color: transparent;
1617
color: transparent;
1618
// color: $disabled_secondary_fg_color;
1619
}
1620
}
1621
separator { margin: 4px 0; }
1623
}
1624
menuitem {
1626
accelerator { color: $secondary_fg_color; }
1627
&:disabled accelerator { color: $disabled_secondary_fg_color; }
1629
}
1630
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1632
// Electron/Atom render all translucent colors in opaque colors.
1633
// It's a very critical issue for this theme and should be fixed by upstream...
1634
.popup:not(.csd) menu {
1635
menuitem {
1636
color: $opaque_fg_color;
1637
&:hover { background-color: $opaque_divider_color; }
1639
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1641
}
1642
// FIXME: not working this
1644
accelerator { color: $opaque_secondary_fg_color; }
1645
}
1646
/************
1649
* Popovers *
1650
************/
1651
popover.background {
1652
transition: $shadow_transition;
1653
padding: 2px;
1654
box-shadow: $shadow_2; // TODO: this should really have a highlight
1655
background-color: $surface_color;
1656
&:backdrop { box-shadow: $shadow_1; }
1658
&, .csd & {
1660
border-style: solid;
1661
border-width: 1px;
1662
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1663
border-radius: $material_radius + 1px;
1664
}
1665
> stack { margin: -4px; } // remove extra padding from menu style popovers
1667
> toolbar { margin: -2px; }
1669
> list,
1671
> .view,
1672
> toolbar {
1673
border-style: none;
1674
box-shadow: none;
1675
background-color: transparent;
1676
}
1677
// FIXME: Use the popover color instead of transparent as a workaround for .view
1679
list,
1680
.view:not(:selected),
1681
toolbar { background-color: $surface_color; }
1682
// &.touch-selection,
1684
// &.magnifier,
1685
// &.osd { @extend %osd; }
1686
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1688
&.menu button,
1690
button.model {
1691
@extend %simple_flat_button;
1692
min-height: 32px;
1694
padding: 0 8px;
1695
border-radius: $material_radius;
1696
&:checked { @extend %selected_items; }
1698
}
1699
separator { margin: 4px 0; }
1701
list separator { margin: 0; }
1703
}
1704
/*************
1706
* Notebooks *
1707
*************/
1708
notebook {
1709
frame > paned > & > header,
1710
&.frame > header { background-color: $alt_base_color; }
1711
&:focus tab:checked {
1713
box-shadow: inset 0 0 0 9999px rgba($primary_color, 0.12);
1714
outline: none;
1715
}
1716
> header {
1718
border-width: 1px;
1719
border-color: $border_color;
1720
background-color: $bg_color;
1721
background-clip: border-box;
1722
&.top {
1724
border-bottom-style: solid;
1725
> tabs {
1727
margin-bottom: -1px;
1728
> tab {
1730
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1731
&:checked { border-image-source: linear-gradient(to top, $primary_color 2px, $border_color 2px); }
1733
&.reorderable-page { border-image-width: 0 1px 2px; }
1735
}
1736
}
1737
}
1738
&.bottom {
1740
border-top-style: solid;
1741
> tabs {
1743
margin-top: -1px;
1744
> tab {
1746
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1747
&:checked { border-image-source: linear-gradient(to bottom, $primary_color 2px, $border_color 2px); }
1749
&.reorderable-page { border-image-width: 2px 1px 0; }
1751
}
1752
}
1753
}
1754
&.left {
1756
border-right-style: solid;
1757
> tabs {
1759
margin-right: -1px;
1760
> tab {
1762
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1763
&:checked { border-image-source: linear-gradient(to left, $primary_color 2px, $border_color 2px); }
1765
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1767
}
1768
}
1769
}
1770
&.right {
1772
border-left-style: solid;
1773
> tabs {
1775
margin-left: -1px;
1776
> tab {
1778
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1779
&:checked { border-image-source: linear-gradient(to right, $primary_color 2px, $border_color 2px); }
1781
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1783
}
1784
}
1785
}
1786
&.top > tabs > arrow {
1788
@extend %notebook_vert_arrows;
1789
border-top-style: none;
1791
}
1792
&.bottom > tabs > arrow {
1794
@extend %notebook_vert_arrows;
1795
border-bottom-style: none;
1797
}
1798
@at-root %notebook_vert_arrows {
1800
padding-left: 4px;
1801
padding-right: 4px;
1802
&.down {
1804
margin-left: -8px;
1805
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1806
}
1807
&.up {
1809
margin-right: -8px;
1810
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1811
}
1812
}
1813
&.left > tabs > arrow {
1815
@extend %notebook_horz_arrows;
1816
border-left-style: none;
1818
}
1819
&.right > tabs > arrow {
1821
@extend %notebook_horz_arrows;
1822
border-right-style: none;
1824
}
1825
@at-root %notebook_horz_arrows {
1827
padding-top: 4px;
1828
padding-bottom: 4px;
1829
&.down {
1831
margin-top: -8px;
1832
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1833
}
1834
&.up {
1836
margin-bottom: -8px;
1837
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1838
}
1839
}
1840
> tabs > arrow {
1842
@extend %simple_flat_button;
1843
min-height: 16px;
1845
min-width: 16px;
1846
border-radius: 0;
1847
}
1848
tab {
1850
transition: $shorter_transition,
1851
background-size 0,
1852
background-image 0;
1853
min-height: $small_size;
1854
min-width: $small_size;
1855
padding: $container_padding 12px;
1856
outline-offset: -6px;
1858
border-width: 1px; // for reorderable tabs
1860
border-color: transparent; //
1861
background-image: radial-gradient(circle farthest-corner at center,
1863
$primary_color 10%,
1864
transparent 0%);
1865
background-repeat: no-repeat;
1866
background-position: center;
1867
background-size: 0% 0%;
1868
background-clip: border-box;
1869
color: $secondary_fg_color;
1871
font-weight: 500;
1872
&:hover {
1874
background-color: $hover_overlay_color;
1875
color: $fg_color;
1876
}
1877
&:disabled { color: $disabled_secondary_fg_color; }
1879
&:checked {
1881
transition: $shorter_transition,
1882
background-size $longer_duration $deceleration_curve,
1883
background-image $longer_duration + $ripple_duration $deceleration_curve;
1884
background-color: transparent;
1885
background-image: radial-gradient(circle farthest-corner at center,
1886
transparent 10%,
1887
transparent 0%);
1888
background-size: 1000% 1000%;
1889
background-clip: padding-box;
1890
color: $fg_color;
1891
&:disabled { color: $disabled_fg_color; }
1893
&.reorderable-page {
1895
border-color: $border_color;
1896
background-color: $base_color;
1897
}
1898
}
1899
// colors the button like the label, overridden otherwise
1901
button.flat {
1902
@extend %small_button;
1903
&:last-child {
1905
margin-left: $container_padding;
1906
margin-right: $container_padding - 12px;
1907
}
1908
&:first-child {
1910
margin-left: $container_padding - 12px;
1911
margin-right: $container_padding;
1912
}
1913
}
1914
}
1915
&.top,
1917
&.bottom {
1918
tabs {
1919
padding-left: 8px;
1920
padding-right: 8px;
1921
&:not(:only-child) {
1923
&:first-child { margin-left: 0; }
1924
&:last-child { margin-right: 0; }
1926
}
1927
tab.reorderable-page { border-style: none solid; }
1929
}
1930
}
1931
&.left,
1933
&.right {
1934
tabs {
1935
padding-top: 8px;
1936
padding-bottom: 8px;
1937
&:not(:only-child) {
1939
&:first-child { margin-top: 0; }
1940
&:last-child { margin-bottom: 0; }
1942
}
1943
tab.reorderable-page { border-style: solid none; }
1945
}
1946
}
1947
}
1948
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1950
background-color: $base_color;
1951
}
1952
}
1953
/**************
1956
* Scrollbars *
1957
**************/
1958
scrollbar {
1959
$_slider_min_length: 24px;
1960
// disable steppers
1962
@at-root * {
1963
-GtkScrollbar-has-backward-stepper: false;
1964
-GtkScrollbar-has-forward-stepper: false;
1965
}
1966
transition: $shorter_transition;
1968
background-color: $base_color;
1969
background-clip: $extra_background_clip;
1970
// scrollbar border
1972
&.top { border-bottom: 1px solid $border_color; }
1973
&.bottom { border-top: 1px solid $border_color; }
1974
&.left { border-right: 1px solid $border_color; }
1975
&.right { border-left: 1px solid $border_color; }
1976
// slider
1978
slider {
1979
transition: $shorter_transition, margin 0, border-width 0;
1980
min-width: 8px;
1981
min-height: 8px;
1982
border: 4px solid transparent;
1983
border-radius: $circular_radius;
1984
background-clip: padding-box;
1985
background-color: $disabled_fg_color;
1986
&:hover { background-color: $secondary_fg_color; }
1988
&:active { background-color: $fg_color; }
1990
&:disabled { background-color: $disabled_secondary_fg_color; }
1992
}
1993
&.fine-tune {
1995
slider {
1996
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1997
min-width: 4px;
1998
min-height: 4px;
1999
}
2000
&.horizontal slider { margin: 2px 0; }
2002
&.vertical slider { margin: 0 2px; }
2004
}
2005
&.overlay-indicator {
2007
&:not(.dragging):not(.hovering) {
2008
border-color: transparent;
2009
background-color: transparent;
2010
slider {
2012
min-width: 4px;
2013
min-height: 4px;
2014
margin: 4px - 1px;
2015
border: 1px solid rgba($base_color, 0.3);
2016
}
2017
button {
2019
min-width: 4px;
2020
min-height: 4px;
2021
margin: 4px - 1px;
2022
border: 1px solid rgba($base_color, 0.3);
2023
border-radius: $circular_radius;
2024
background-color: $disabled_fg_color;
2025
background-clip: padding-box;
2026
-gtk-icon-source: none;
2027
&:disabled { background-color: $disabled_secondary_fg_color; }
2029
}
2030
&.horizontal {
2032
slider { min-width: $_slider_min_length; }
2033
button { min-width: 8px; }
2035
}
2036
&.vertical {
2038
slider { min-height: $_slider_min_length; }
2039
button { min-height: 8px; }
2041
}
2042
}
2043
&.dragging,
2045
&.hovering { background-color: rgba($base_color, 0.9); }
2046
}
2047
&.horizontal slider { min-width: $_slider_min_length; }
2049
&.vertical slider { min-height: $_slider_min_length; }
2051
// button styling
2053
button {
2054
@extend %simple_flat_button;
2055
min-width: 16px;
2057
min-height: 16px;
2058
padding: 0;
2059
border-radius: 0;
2060
}
2061
// button icons
2063
&.vertical {
2064
button {
2065
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2066
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2068
}
2069
}
2070
&.horizontal {
2072
button {
2073
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2074
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2076
}
2077
}
2078
}
2079
/**********
2082
* Switch *
2083
**********/
2084
switch {
2085
transition: all $shorter_duration $deceleration_curve;
2086
margin: $container_padding 0;
2087
padding: 0 2px;
2088
border: 5px solid transparent;
2089
border-radius: $circular_radius;
2090
background-color: $track_color;
2091
background-clip: padding-box;
2092
font-size: 0;
2093
&:checked { background-color: rgba($primary_color, 0.5); }
2095
&:disabled { opacity: 0.5; }
2097
slider {
2099
transition: all $shorter_duration $deceleration_curve;
2100
min-width: 20px;
2101
min-height: 20px;
2102
margin: -3px -2px;
2103
border-radius: $circular_radius;
2104
box-shadow: 0 0 0 10px transparent, $shadow_1;
2105
background-color: $surface_color;
2106
}
2107
&:hover slider { box-shadow: 0 0 0 10px $hover_overlay_color, $shadow_1; }
2109
&:focus slider { box-shadow: 0 0 0 10px $focus_overlay_color, $shadow_1; }
2111
&:focus:hover slider { box-shadow: 0 0 0 10px $hover_focus_overlay_color, $shadow_1; }
2113
&:checked slider {
2115
background-color: $primary_color;
2116
color: $primary_color;
2117
}
2118
row:selected & {
2120
}
2121
}
2122
/*************************
2125
* Check and Radio items *
2126
*************************/
2127
// draw regular check and radio items using our PNG assets
2128
// all assets are rendered from assets.svg. never add pngs directly
2129
// selection-mode
2131
.view.content-view.check:not(list),
2132
.content-view .tile check:not(list) {
2133
min-height: 40px;
2134
min-width: 40px;
2135
margin: 0;
2136
padding: 0;
2137
box-shadow: none;
2138
background-color: transparent;
2139
background-image: none;
2140
-gtk-icon-shadow: $shadow_1;
2141
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2143
@each $s, $as in ('', '-unchecked'),
2145
(':checked', '-checked') {
2146
&#{$s} {
2147
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2148
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2149
}
2150
}
2151
}
2152
checkbutton,
2154
radiobutton {
2155
outline: none;
2156
}
2157
checkbutton.text-button,
2159
radiobutton.text-button {
2160
// this is for a nice focus on check and radios text
2161
padding: 2px;
2162
label:not(:only-child) { margin: 0 4px; }
2164
}
2165
$check_radio_size: 40px;
2167
check,
2169
radio {
2170
min-height: 24px;
2171
min-width: 24px;
2172
margin: -($check_radio_size - 24px) / 2;
2173
padding: ($check_radio_size - 24px) / 2;
2174
@extend %simple_flat_button;
2176
@extend %circular_button;
2178
&:hover { box-shadow: inset 0 0 0 9999px $hover_overlay_color; }
2180
&:focus { box-shadow: inset 0 0 0 9999px $focus_overlay_color; }
2182
&:focus:hover { box-shadow: inset 0 0 0 9999px $hover_focus_overlay_color; }
2184
&:checked, &:indeterminate {
2186
color: $primary_color;
2187
&:disabled { color: $disabled_secondary_fg_color; }
2189
}
2190
// &:only-child { margin: -12px; }
2192
row:selected &:not(:checked):not(:indeterminate) {
2194
color: $inverse_secondary_fg_color;
2195
&:hover, &:active { color: $inverse_fg_color; }
2197
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2199
}
2200
popover & {
2202
&, &:hover, &:focus, &:focus:hover, &:active, &:disabled {
2203
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2204
box-shadow: none;
2205
background-image: none;
2206
}
2207
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2209
&.left:dir(rtl) {
2211
margin-left: -12px;
2212
margin-right: -4px;
2213
}
2214
&.right:dir(ltr) {
2216
margin-left: -4px;
2217
margin-right: -12px;
2218
}
2219
}
2220
menu menuitem & {
2222
transition: none;
2223
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2224
padding: 0;
2225
&:dir(ltr) { margin-right: 8px; }
2227
&:dir(rtl) { margin-left: 8px; }
2229
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2231
&, &:hover, &:disabled {
2233
box-shadow: none;
2234
// color: inherit;
2235
}
2236
}
2237
}
2238
%check,
2240
check {
2241
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2242
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2244
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2246
}
2247
%radio,
2249
radio {
2250
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2251
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2253
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2255
border-image-slice: $check_radio_size / 2px;
2257
border-image-width: $check_radio_size / 2;
2258
$radio_indicator: 10px / $check_radio_size / 2;
2260
& {
2262
border-image-source: -gtk-gradient(radial,
2263
center center, 0,
2264
center center, 0.001,
2265
to($primary_color),
2266
to(transparent));
2267
}
2268
&:checked:not(:indeterminate) {
2270
border-image-source: -gtk-gradient(radial,
2271
center center, 0,
2272
center center, $radio_indicator,
2273
to($primary_color),
2274
to(transparent));
2275
}
2276
&:checked:not(:indeterminate):disabled {
2278
border-image-source: -gtk-gradient(radial,
2279
center center, 0,
2280
center center, $radio_indicator,
2281
to($disabled_secondary_fg_color),
2282
to(transparent));
2283
}
2284
}
2285
%small_check,
2287
menu menuitem check {
2288
& {
2289
min-height: 16px;
2290
min-width: 16px;
2291
border-radius: $material_radius;
2292
-gtk-outline-radius: $material_radius;
2293
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2294
}
2295
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2297
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2299
}
2300
%small_radio,
2302
menu menuitem radio {
2303
& {
2304
min-height: 16px;
2305
min-width: 16px;
2306
border-image: none;
2307
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2308
}
2309
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2311
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2313
}
2314
// ANIMATION:
2316
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2317
// the transformation is set on the active state and it get reset on the checked state.
2318
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2319
treeview.view check,
2321
treeview.view radio {
2322
padding: 0;
2323
&:hover {
2325
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.08);
2326
&:disabled { box-shadow: none; }
2328
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.08); }
2330
}
2331
& {
2333
color: $secondary_fg_color;
2334
&:hover, &:active { color: $fg_color; }
2336
&:disabled { color: $disabled_secondary_fg_color; }
2338
&:checked, &:indeterminate { color: $primary_color; }
2340
&:checked:disabled, &:indeterminate:disabled { color: $disabled_secondary_fg_color; }
2342
}
2343
&:selected {
2345
color: $inverse_secondary_fg_color;
2346
&:hover, &:active { color: $inverse_fg_color; }
2348
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2350
&:checked, &:indeterminate { color: $primary_color; }
2352
&:checked:disabled, &:indeterminate:disabled { color: $disabled_secondary_fg_color; }
2354
}
2355
}
2356
treeview.view radio:checked {
2358
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2359
border-image: none;
2360
}
2361
/************
2364
* GtkScale *
2365
************/
2366
scale {
2367
// sizing
2368
$_marks_length: 8px;
2369
$_marks_distance: 7px;
2370
$trough_size: 2px;
2372
$finetune_trough_size: 4px;
2373
$slider_size: 32px;
2375
$slider_margin: -($slider_size - $trough_size) / 2;
2377
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2378
$color_slider_margin: -($slider_size) * 3 / 4;
2380
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2381
min-height: $trough_size;
2383
min-width: $trough_size;
2384
&.horizontal { padding: ($medium_size - $trough_size) / 2 12px; }
2386
&.vertical { padding: 12px ($medium_size - $trough_size) / 2; }
2388
// the slider is inside the trough, so to have make it bigger there's a negative margin
2390
slider {
2391
min-height: $slider_size;
2392
min-width: $slider_size;
2393
margin: $slider_margin;
2394
}
2395
// click-and-hold the slider to activate
2397
&.fine-tune {
2398
&.horizontal {
2399
min-height: $finetune_trough_size;
2400
padding-top: ($medium_size - $finetune_trough_size) / 2;
2401
padding-bottom: ($medium_size - $finetune_trough_size) / 2;
2402
}
2403
&.vertical {
2405
min-width: $finetune_trough_size;
2406
padding-left: ($medium_size - $finetune_trough_size) / 2;
2407
padding-right: ($medium_size - $finetune_trough_size) / 2;
2408
}
2409
// to make the trough grow in fine-tune mode
2411
slider { margin: $finetune_slider_margin; }
2412
}
2413
// the backing bit
2415
trough {
2416
transition: background-color $shorter_duration $deceleration_curve;
2417
outline: none;
2418
background-color: $track_color;
2419
&:disabled { background-color: $divider_color; }
2421
}
2422
// the colored part of the backing bit
2424
highlight {
2425
transition: background-color $shorter_duration $deceleration_curve;
2426
background-color: $primary_color;
2427
&:disabled { background-color: transparent; }
2429
}
2430
// this is another differently styled part of the backing bit, the most relevant use case is for example
2432
// in media player to indicate how much video stream as been cached
2433
fill {
2434
transition: background-color $shorter_duration $deceleration_curve;
2435
background-color: $track_color;
2436
&:disabled { background-color: transparent; }
2438
}
2439
slider {
2441
transition: background-color $shorter_duration $deceleration_curve,
2442
background-size $ripple_duration $deceleration_curve,
2443
background-image $ripple_opacity_duration $deceleration_curve;
2444
background-repeat: no-repeat;
2445
background-position: center;
2446
background-size: auto, 1000% 1000%;
2447
border-radius: 50%;
2448
color: transparent;
2449
@each $s, $as in ('', ''),
2451
(':disabled', '-disabled') {
2452
&#{$s} {
2453
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2454
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2456
radial-gradient(circle farthest-corner at center,
2457
currentColor 10%,
2458
transparent 0%);
2459
}
2460
}
2461
&:hover { background-color: rgba($primary_color, 0.08); }
2463
&:focus { background-color: rgba($primary_color, 0.12); }
2465
&:focus:hover { background-color: rgba($primary_color, 0.16); }
2467
&:active {
2469
transition: background-color $shorter_duration $deceleration_curve,
2470
background-size 0,
2471
background-image 0;
2472
animation: scale_ripple_effect $longer_duration $deceleration_curve forwards;
2473
background-size: auto, 0% 0%;
2474
background-color: rgba($primary_color, 0.08);
2475
color: rgba($primary_color, 0.12);
2476
}
2477
}
2478
marks label,
2480
value { color: $secondary_fg_color; }
2481
marks {
2483
color: $track_color;
2484
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2486
(bottom, bottom, top),
2487
(left, left, right),
2488
(right, right, left) {
2489
&.#{$marks_class} {
2490
margin-#{$marks_margin}: $_marks_distance;
2491
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2492
}
2493
}
2494
}
2495
&.fine-tune marks {
2497
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2498
(bottom, bottom, top),
2499
(left, left, right),
2500
(right, right, left) {
2501
&.#{$marks_class} {
2502
margin-#{$marks_margin}: $_marks_distance - 1px;
2503
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2504
}
2505
}
2506
}
2507
&.horizontal {
2509
indicator {
2510
min-height: $_marks_length;
2511
min-width: 1px;
2512
}
2513
}
2514
&.vertical {
2516
indicator {
2517
min-height: 1px;
2518
min-width: $_marks_length;
2519
}
2520
}
2521
// *WARNING* scale with marks madness following
2523
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2525
('vertical', 'vert') {
2526
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2527
('marks-after', 'marks-after:not(.marks-before)') {
2528
&.#{$dir_class}.#{$marks_class} {
2529
slider {
2530
@each $state, $state_infix in ('', ''),
2531
(':disabled', '-disabled') {
2532
&#{$state} {
2533
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2534
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2536
radial-gradient(circle farthest-corner at center,
2537
currentColor 10%,
2538
transparent 0%);
2539
}
2540
}
2541
}
2542
}
2543
}
2544
}
2545
&.color {
2547
min-height: 0;
2548
min-width: 0;
2549
&.horizontal {
2551
padding: 0 0 12px 0;
2552
slider {
2554
&:dir(ltr), &:dir(rtl) { // specificity bump
2555
margin-bottom: $color_slider_margin;
2556
margin-top: $color_marks_slider_margin;
2557
}
2558
}
2559
}
2560
&.vertical {
2562
&:dir(ltr) {
2563
padding: 0 0 0 12px;
2564
slider {
2566
margin-left: $color_slider_margin;
2567
margin-right: $color_marks_slider_margin;
2568
}
2569
}
2570
&:dir(rtl) {
2572
padding: 0 12px 0 0;
2573
slider {
2575
margin-right: $color_slider_margin;
2576
margin-left: $color_marks_slider_margin;
2577
}
2578
}
2579
}
2580
}
2581
}
2582
/*****************
2585
* Progress bars *
2586
*****************/
2587
progressbar {
2588
// sizing
2589
&.horizontal {
2590
trough,
2591
progress { min-height: $bar_size; }
2592
}
2593
&.vertical {
2595
trough,
2596
progress { min-width: $bar_size; }
2597
}
2598
// FIXME: insensitive state missing and some other state should be set probably
2600
color: $secondary_fg_color;
2601
font-size: smaller;
2602
trough { background-color: $divider_color; }
2604
progress { background-color: $primary_color; }
2606
&.osd { // progressbar.osd used for epiphany page loading progress
2608
// min-width: $bar_size;
2609
// min-height: $bar_size;
2610
// background-color: transparent;
2611
// trough { background-color: transparent; }
2613
// progress { background-color: $primary_color; }
2615
}
2616
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2618
}
2619
/*************
2622
* Level Bar *
2623
*************/
2624
levelbar {
2625
&.horizontal {
2626
block { min-height: $bar_size; }
2627
&.discrete block {
2629
min-width: $medium_size;
2630
&:not(:last-child) { margin-right: 2px; }
2632
}
2633
}
2634
&.vertical {
2636
block { min-width: $bar_size; }
2637
&.discrete block {
2639
min-height: $medium_size;
2640
&:not(:last-child) { margin-bottom: 2px; }
2642
}
2643
}
2644
// imitate the entry style
2646
trough {
2647
// padding: 2px;
2648
// border-radius: $material_radius;
2649
// box-shadow: $shadow_1;
2650
// background-color: $base_color;
2651
// &:disabled { background-color: $alt_base_color; }
2653
}
2654
block {
2656
&.low { background-color: $warning_color; }
2657
&.high,
2659
&:not(.empty) { background-color: $primary_color; }
2660
&.full { background-color: $success_color; }
2662
&.empty { background-color: $divider_color; }
2664
}
2665
}
2666
/****************
2669
* Print dialog *
2670
*****************/
2671
printdialog {
2672
paper {
2673
padding: 0;
2674
border: 1px solid $border_color;
2675
background-color: $base_color;
2676
color: $fg_color;
2677
}
2678
.dialog-action-box { margin: 12px; }
2680
}
2681
/**********
2684
* Frames *
2685
**********/
2686
frame > border,
2687
.frame {
2688
margin: 0;
2689
padding: 0;
2690
border: 1px solid $border_color;
2691
border-radius: 0;
2692
box-shadow: none;
2693
&.flat { border-style: none; }
2695
}
2696
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2698
actionbar > revealer > box {
2700
padding: $container_padding;
2701
border-top: 1px solid $border_color;
2702
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2704
}
2705
scrolledwindow {
2707
viewport.frame { // avoid double borders when viewport inside scrolled window
2708
border-style: none;
2709
}
2710
// This is used when content is touch-dragged past boundaries.
2712
// draws a box on top of the content, the size changes programmatically.
2713
@at-root overshoot {
2714
&.top { @include overshoot(top); }
2715
&.bottom { @include overshoot(bottom); }
2717
&.left { @include overshoot(left); }
2719
&.right { @include overshoot(right); }
2721
}
2722
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2724
@at-root undershoot {
2725
&.top { @include undershoot(top); }
2726
&.bottom { @include undershoot(bottom); }
2728
&.left { @include undershoot(left); }
2730
&.right { @include undershoot(right); }
2732
}
2733
@at-root junction { // the small square between two scrollbars
2735
border-style: solid none none solid;
2736
border-width: 1px;
2737
border-color: $border_color;
2738
background-color: $base_color;
2739
&:dir(rtl) { border-style: solid solid none none; }
2741
}
2742
}
2743
// vbox and hbox separators
2745
separator {
2746
min-width: 1px;
2747
min-height: 1px;
2748
background-color: $border_color;
2749
}
2750
%hide_separators {
2752
min-width: 0;
2753
min-height: 0;
2754
background-color: transparent;
2755
}
2756
/*********
2759
* Lists *
2760
*********/
2761
list {
2762
border-color: $border_color;
2763
background-color: $base_color;
2764
row { padding: 2px; }
2766
}
2767
// FIXME
2769
$row_transition: $shorter_transition, background-color 0, color 0;
2770
row {
2772
&.activatable {
2773
transition: $row_transition,
2774
background-size $ripple_duration $deceleration_curve,
2775
background-image $ripple_opacity_duration $deceleration_curve;
2776
box-shadow: inset 0 0 0 9999px transparent;
2777
background-image: radial-gradient(circle farthest-corner at center,
2778
transparent 10%,
2779
transparent 0%);
2780
background-repeat: no-repeat;
2781
background-position: center;
2782
background-size: 1000% 1000%;
2783
&:hover {
2785
transition: $row_transition,
2786
box-shadow 0,
2787
background-size $ripple_duration $deceleration_curve,
2788
background-image $ripple_opacity_duration $deceleration_curve;
2789
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2790
}
2791
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2793
&:active {
2794
transition: $row_transition,
2795
background-size 0,
2796
background-image 0;
2797
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2798
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2799
background-image: radial-gradient(circle farthest-corner at center,
2800
$active_overlay_color 10%,
2801
transparent 0%);
2802
background-size: 0% 0%;
2803
}
2804
}
2805
&:selected { @extend %selected_items; }
2807
}
2808
/*********************
2811
* App Notifications *
2812
*********************/
2813
.app-notification {
2814
// @extend %osd;
2815
@extend toolbar.osd;
2817
margin: 8px;
2819
button { @extend %button_basic.flat; }
2821
&.frame,
2823
border { border-style: none; }
2824
}
2825
/*************
2828
* Expanders *
2829
*************/
2830
expander {
2831
title > arrow {
2832
transition: all $shorter_duration $deceleration_curve;
2833
min-width: 16px;
2834
min-height: 16px;
2835
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2836
-gtk-icon-transform: rotate(-90deg);
2837
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2839
&:checked { -gtk-icon-transform: unset; }
2841
color: $secondary_fg_color;
2843
&:hover, &:active { color: $fg_color; }
2845
&:disabled { color: $disabled_secondary_fg_color; }
2847
&:selected {
2849
color: $inverse_secondary_fg_color;
2850
&:hover, &:active { color: $inverse_fg_color; }
2852
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2854
}
2855
}
2856
}
2857
/************
2860
* Calendar *
2861
************/
2862
calendar {
2863
padding: 1px;
2864
border: 1px solid $border_color;
2865
color: $fg_color;
2866
&:disabled { color: $disabled_fg_color; }
2868
&:selected {
2870
@extend %selected_items;
2871
border-radius: $material_radius + 1px;
2873
}
2874
&.header {
2876
border-style: none none solid;
2877
border-radius: 0;
2878
}
2879
&.button { @extend %simple_flat_button; }
2881
&.highlight {
2883
color: $secondary_fg_color;
2884
font-weight: 500;
2885
}
2886
&:indeterminate { color: $disabled_secondary_fg_color; }
2888
}
2889
/***********
2892
* Dialogs *
2893
***********/
2894
messagedialog { // Message Dialog styling
2895
&.background { background-color: $surface_color; }
2896
.titlebar {
2898
min-height: $small_size;
2899
border-style: none;
2900
box-shadow: inset 0 1px $highlight_color;
2901
background-color: $surface_color;
2902
color: $fg_color;
2903
&:backdrop { color: $secondary_fg_color; }
2905
}
2906
&.csd { // rounded bottom border styling for csd version
2908
&.background {
2909
// bigger radius for better antialiasing
2910
border-bottom-left-radius: $material_radius;
2911
border-bottom-right-radius: $material_radius;
2912
}
2913
.dialog-action-area {
2915
margin-top: -$container_padding;
2916
padding: $container_padding;
2917
button {
2919
@extend %simple_flat_button;
2920
border-radius: $material_radius;
2921
&:not(:last-child) { margin-right: $container_padding; }
2923
&.suggested-action:not(:disabled) { color: $suggested_color; }
2925
&.destructive-action:not(:disabled) { color: $destructive_color; }
2927
}
2928
}
2929
}
2930
}
2931
filechooser {
2933
.dialog-action-box { border-top: 1px solid $border_color; }
2934
#pathbarbox {
2936
border-bottom: 1px solid $border_color;
2937
background-color: $bg_color;
2938
> stack > box > button { // The new folder button
2940
@extend %button_basic.flat;
2941
@extend %circular_button;
2942
}
2943
}
2944
}
2945
filechooserbutton:drop(active) {
2947
box-shadow: none;
2948
}
2949
/***********
2952
* Sidebar *
2953
***********/
2954
.sidebar {
2955
border-style: none;
2956
background-color: $alt_base_color;
2957
@at-root %sidebar_left,
2959
&:dir(ltr),
2960
&.left,
2961
&.left:dir(rtl) {
2962
border-right: 1px solid $border_color;
2963
border-left-style: none;
2964
}
2965
@at-root %sidebar_right,
2967
&:dir(rtl),
2968
&.right {
2969
border-left: 1px solid $border_color;
2970
border-right-style: none;
2971
}
2972
list { background-color: transparent; }
2974
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2976
}
2977
stacksidebar {
2979
&.sidebar {
2980
&:dir(ltr),
2981
&.left,
2982
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2983
&:dir(rtl),
2985
&.right { list { @extend %sidebar_right; }}
2986
}
2987
row {
2989
padding: 10px 4px;
2990
> label {
2992
padding-left: 6px;
2993
padding-right: 6px;
2994
}
2995
&.needs-attention > label { @extend %needs_attention; }
2997
}
2998
}
2999
/****************
3002
* File chooser *
3003
****************/
3004
// dim the sidebar icons, see bug #786613 for details on this oddity
3005
row {
3006
image.sidebar-icon { color: $secondary_fg_color; }
3007
&:selected image.sidebar-icon { color: $inverse_secondary_fg_color; }
3009
}
3010
placessidebar {
3012
> viewport.frame { border-style: none; }
3013
list { padding: (4px - 3px) 0 4px; }
3015
row {
3017
// Needs overriding of the GtkListBoxRow padding
3018
min-height: 32px;
3019
margin: -1px 0; // Remove unknown margins
3020
padding: 0;
3021
// Using margins/padding directly in the SidebarRow
3023
// will make the animation of the new bookmark row jump
3024
> revealer { padding: 0 12px; }
3025
&:selected { color: $inverse_fg_color; }
3027
&:disabled { color: $disabled_fg_color; }
3029
image.sidebar-icon {
3031
&:dir(ltr) { padding-right: 8px; }
3032
&:dir(rtl) { padding-left: 8px; }
3033
}
3034
label.sidebar-label {
3036
&:dir(ltr) { padding-right: 2px; }
3037
&:dir(rtl) { padding-left: 2px; }
3038
}
3039
@at-root button.sidebar-button {
3041
@extend %simple_flat_button;
3042
@extend %small_button;
3044
row:selected & { @extend %button_selected.flat; }
3046
}
3047
&.sidebar-placeholder-row {
3049
min-height: 2px;
3050
padding: 0 8px;
3051
background-image: image($primary_color);
3052
background-clip: content-box;
3053
}
3054
&.sidebar-new-bookmark-row { color: $primary_color; }
3056
&:drop(active):not(:disabled) {
3058
box-shadow: inset 0 0 0 2px $primary_color;
3059
&:selected {
3061
// background-color: $primary_color;
3062
// color: $inverse_fg_color;
3063
}
3064
}
3065
}
3066
}
3067
placesview {
3069
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3070
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3072
// this selects the "connect to server" label
3074
> actionbar > revealer > box > label {
3075
padding-left: 8px;
3076
padding-right: 8px;
3077
}
3078
}
3079
/*********
3082
* Paned *
3083
*********/
3084
paned {
3085
> separator {
3086
min-width: 1px;
3087
min-height: 1px;
3088
-gtk-icon-source: none; // defeats the ugly default handle decoration
3089
border-style: none; // just to be sure
3090
background-color: transparent;
3091
// workaround, using background istead of a border since the border will get rendered twice (?)
3092
background-image: image($border_color);
3093
background-size: 1px 1px;
3094
background-clip: content-box; // avoids borders image being rendered twice (?)
3095
&.wide {
3097
min-width: 6px;
3098
min-height: 6px;
3099
background-color: $bg_color;
3100
background-image: image($border_color), image($border_color);
3101
background-size: 1px 1px, 1px 1px;
3102
}
3103
}
3104
&.horizontal > separator {
3106
background-repeat: repeat-y;
3107
&:dir(ltr) {
3109
margin: 0 -8px 0 0;
3110
padding: 0 8px 0 0;
3111
background-position: left;
3112
}
3113
&:dir(rtl) {
3115
margin: 0 0 0 -8px;
3116
padding: 0 0 0 8px;
3117
background-position: right;
3118
}
3119
&.wide {
3121
margin: 0;
3122
padding: 0;
3123
background-repeat: repeat-y, repeat-y;
3124
background-position: left, right;
3125
}
3126
}
3127
&.vertical > separator {
3129
margin: 0 0 -8px 0;
3130
padding: 0 0 8px 0;
3131
background-repeat: repeat-x;
3132
background-position: top;
3133
&.wide {
3135
margin: 0;
3136
padding: 0;
3137
background-repeat: repeat-x, repeat-x;
3138
background-position: bottom, top;
3139
}
3140
}
3141
}
3142
/**************
3145
* GtkInfoBar *
3146
**************/
3147
infobar {
3148
border-style: none;
3149
&.info { background-color: $info_bg_color; }
3151
&.question { background-color: $question_bg_color; }
3153
&.warning { background-color: $warning_bg_color; }
3155
&.error { background-color: $error_bg_color; }
3157
&.info,
3159
&.question,
3160
&.warning,
3161
&.error {
3162
> label, & { color: $inverse_fg_color; }
3163
button { @extend %button_selected; }
3165
selection {}
3167
*:link { @extend %link_selected; }
3169
}
3170
}
3171
/************
3174
* Tooltips *
3175
************/
3176
tooltip {
3177
&.background {
3178
// background-color needs to be set this way otherwise it gets drawn twice
3179
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3180
// box-shadow: inset 0 1px $highlight_color;
3181
background-color: $tooltip_bg_color;
3182
color: $tooltip_fg_color;
3183
}
3184
// padding: 4px; /* not working */
3186
border-radius: $material_radius;
3187
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3188
&:not(.csd):not(.unity-csd) {
3190
// border: 1px solid $border_color;
3191
// border-radius: $material_radius + 1px;
3192
// background-clip: $extra_background_clip;
3193
}
3194
// FIXME: we need a border or tooltips vanish on black background.
3196
decoration { background-color: transparent; }
3197
label {
3199
// tooltip label already seems to have 6px margins
3200
min-height: 32px - 6px * 2;
3201
padding: 0 8px - 6px;
3202
}
3203
* {
3205
// workaround for Eclipse.
3206
// do not include any declaration here.
3207
// padding: 0;
3208
// background-color: transparent;
3209
// color: inherit;
3210
}
3211
}
3212
/*****************
3215
* Color Chooser *
3216
*****************/
3217
colorswatch {
3218
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3219
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3220
// applied to the overlay box.
3221
// base color corners rounding
3223
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3224
// sports a bigger radius.
3225
// nth-child is needed by the custom color strip.
3226
&.top {
3228
border-top-left-radius: $material_radius + 0.5px;
3229
border-top-right-radius: $material_radius + 0.5px;
3230
overlay {
3232
border-top-left-radius: $material_radius;
3233
border-top-right-radius: $material_radius;
3234
}
3235
}
3236
&.bottom {
3238
border-bottom-left-radius: $material_radius + 0.5px;
3239
border-bottom-right-radius: $material_radius + 0.5px;
3240
overlay {
3242
border-bottom-left-radius: $material_radius;
3243
border-bottom-right-radius: $material_radius;
3244
}
3245
}
3246
&.left,
3248
&:first-child:not(.top) {
3249
border-top-left-radius: $material_radius + 0.5px;
3250
border-bottom-left-radius: $material_radius + 0.5px;
3251
overlay {
3253
border-top-left-radius: $material_radius;
3254
border-bottom-left-radius: $material_radius;
3255
}
3256
}
3257
&.right,
3259
&:last-child:not(.bottom) {
3260
border-top-right-radius: $material_radius + 0.5px;
3261
border-bottom-right-radius: $material_radius + 0.5px;
3262
overlay {
3264
border-top-right-radius: $material_radius;
3265
border-bottom-right-radius: $material_radius;
3266
}
3267
}
3268
&.dark { color: $light_fg_color; }
3270
&.light { color: $dark_fg_color; }
3272
&:drop(active) {
3274
box-shadow: none;
3275
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3277
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3279
}
3280
overlay {
3282
transition: $shadow_transition;
3283
box-shadow: $shadow_1;
3284
&:hover { box-shadow: $shadow_2; }
3286
}
3287
&#add-color-button {
3289
border-radius: $material_radius $material_radius 0 0;
3290
color: $light_fg_color;
3291
&:only-child { border-radius: $material_radius; }
3293
overlay {
3295
background-image: linear-gradient(to right,
3296
$error_bg_color 25%,
3297
$warning_bg_color 25%, $warning_bg_color 50%,
3298
$info_bg_color 50%, $info_bg_color 75%,
3299
$question_bg_color 75%);
3300
}
3301
}
3302
&:disabled {
3304
opacity: 0.5;
3305
overlay { box-shadow: none; }
3307
}
3308
row:selected & {
3310
}
3311
&#editor-color-sample {
3313
border-radius: $material_radius + 0.5px;
3314
overlay { border-radius: $material_radius; }
3316
// overlay:hover { box-shadow: $shadow_1; }
3318
}
3319
}
3320
// colorscale popup
3322
colorchooser .popover.osd {
3323
transition: $shadow_transition;
3324
border-radius: $material_radius;
3325
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3326
background-color: $surface_color;
3327
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3329
}
3330
/********
3333
* Misc *
3334
********/
3335
// content view (grid/list)
3336
.content-view {
3337
background-color: $bg_color;
3338
// &:hover { -gtk-icon-effect: highlight; }
3340
rubberband, .rubberband { @extend rubberband; }
3342
}
3343
.scale-popup {
3345
// .osd & { @extend %osd; }
3346
.osd & button.flat { // FIXME: quick hack, redo properly
3348
}
3349
button { // +/- buttons on GtkVolumeButton popup
3351
}
3352
}
3353
/**********************
3356
* Window Decorations *
3357
**********************/
3358
decoration {
3359
transition: $shadow_transition;
3360
border-radius: $material_radius $material_radius 0 0;
3361
box-shadow: $shadow_4, 0 16px 16px transparent;
3362
// FIXME rationalize shadows
3364
// this is used for the resize cursor area
3366
margin: 8px;
3367
&:backdrop {
3369
// the transparent shadow here is to enforce that the shadow extents don't
3370
// change when we go to backdrop, to prevent jumping windows.
3371
// The biggest shadow should be in the same order then in the active state
3372
// or the jumping will happen during the transition.
3373
box-shadow: $shadow_2, 0 16px 16px transparent;
3374
}
3375
.maximized &,
3377
.fullscreen &,
3378
.tiled &,
3379
.tiled-top &,
3380
.tiled-right &,
3381
.tiled-bottom &,
3382
.tiled-left & { border-radius: 0; }
3383
.popup & { box-shadow: none; }
3385
// server-side decorations as used by mutter
3387
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3388
.csd.popup & {
3390
border-radius: $material_radius;
3391
box-shadow: $shadow_2;
3392
}
3393
tooltip.csd & {
3395
border-radius: $material_radius;
3396
box-shadow: none;
3397
}
3398
messagedialog.csd & {
3400
border-radius: $material_radius;
3401
// box-shadow: $shadow_4, 0 16px 16px transparent;
3402
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3404
}
3405
.solid-csd & {
3407
margin: 0;
3408
// padding: 4px;
3409
border-radius: 0;
3410
box-shadow: none;
3411
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3412
background-color: $titlebar_bg_color;
3413
}
3414
}
3415
// Window Close button
3417
button.titlebutton {
3418
// @extend %simple_flat_button;
3419
@extend %circular_button;
3421
.selection-mode & {
3423
}
3424
}
3425
// catch all extend :)
3428
%selected_items {
3430
background-color: $primary_color;
3431
@at-root %nobg_selected_items, & {
3433
color: $inverse_fg_color;
3434
&:disabled { color: $inverse_disabled_fg_color; }
3436
}
3437
}
3438
.monospace { font-family: monospace; }
3440
/**********************
3443
* Touch Copy & Paste *
3444
**********************/
3445
// touch selection handlebars for the Popover.osd above
3446
cursor-handle {
3447
border-radius: $circular_radius;
3448
background-color: $primary_color;
3449
background-image: none;
3450
&.top:dir(ltr), &.bottom:dir(rtl) {
3452
padding-left: 6px;
3453
border-top-right-radius: 0;
3454
}
3455
&.bottom:dir(ltr), &.top:dir(rtl) {
3457
padding-right: 6px;
3458
border-top-left-radius: 0;
3459
}
3460
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3462
-GtkWidget-text-handle-width: 24;
3463
-GtkWidget-text-handle-height: 30;
3464
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3466
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3467
url('#{$_url}@2.png'));
3468
}
3469
}
3470
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3472
// shortcut window keys
3474
.keycap {
3475
min-width: 28px - 8px * 2;
3476
min-height: 28px - 2px;
3477
margin-top: 2px;
3478
padding-bottom: 2px;
3479
padding-left: 8px;
3480
padding-right: 8px;
3481
border: solid 1px $border_color;
3483
border-radius: $material_radius + 1px;
3484
box-shadow: inset 0 -2px $border_color;
3485
background-color: $surface_color;
3486
color: $fg_color;
3487
font-size: smaller;
3488
}
3489
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3491
transition: $shorter_transition;
3492
box-shadow: $shadow_1, inset 0 0 0 2px $primary_color;
3493
caret-color: $primary_color;
3494
}
3495
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3497
stackswitcher button.circular,
3499
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3500
min-width: $medium_size;
3501
min-height: $medium_size;
3502
padding: 0;
3503
}
3504
/*********
3507
* Emoji *
3508
*********/
3509
popover.emoji-picker {
3510
padding: 0;
3511
entry {
3513
border-bottom: 1px solid $border_color;
3514
border-radius: 0;
3515
box-shadow: none;
3516
background-color: transparent;
3517
}
3518
scrolledwindow { border-bottom: 1px solid $border_color; }
3520
}
3521
// mimic tab style
3523
button.emoji-section {
3524
margin-top: -1px;
3525
padding: 0 8px;
3526
min-width: 24px;
3527
min-height: $medium_size;
3528
border-radius: 0;
3529
outline-offset: -6px;
3530
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3532
&:checked {
3534
box-shadow: inset 0 2px $primary_color;
3535
background-color: transparent;
3536
}
3537
&:hover, &:active { background-color: $hover_overlay_color; }
3539
&:first-child { margin-left: 4px; }
3541
&:last-child { margin-right: 4px; }
3543
}
3544
.emoji {
3546
min-width: 3em;
3547
min-height: 3em;
3548
padding: 0 8px;
3549
// font-size: larger;
3550
widget {
3552
transition: $shorter_transition;
3553
border-radius: $material_radius;
3554
&:hover { background-color: $hover_overlay_color; }
3556
}
3557
}
3558