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
> header {
1713
border-width: 1px;
1714
border-color: $border_color;
1715
background-color: $bg_color;
1716
background-clip: border-box;
1717
&.top {
1719
border-bottom-style: solid;
1720
> tabs {
1722
margin-bottom: -1px;
1723
> tab {
1725
box-shadow: inset 0 -2px transparent;
1726
&:checked { box-shadow: inset 0 -2px $primary_color; }
1728
}
1729
}
1730
}
1731
&.bottom {
1733
border-top-style: solid;
1734
> tabs {
1736
margin-top: -1px;
1737
> tab {
1739
box-shadow: inset 0 2px transparent;
1740
&:checked { box-shadow: inset 0 2px $primary_color; }
1742
}
1743
}
1744
}
1745
&.left {
1747
border-right-style: solid;
1748
> tabs {
1750
margin-right: -1px;
1751
> tab {
1753
box-shadow: inset -2px 0 transparent;
1754
&:checked { box-shadow: inset -2px 0 $primary_color; }
1756
}
1757
}
1758
}
1759
&.right {
1761
border-left-style: solid;
1762
> tabs {
1764
margin-left: -1px;
1765
> tab {
1767
box-shadow: inset 2px 0 transparent;
1768
&:checked { box-shadow: inset 2px 0 $primary_color; }
1770
}
1771
}
1772
}
1773
&.top > tabs > arrow {
1775
@extend %notebook_vert_arrows;
1776
border-top-style: none;
1778
}
1779
&.bottom > tabs > arrow {
1781
@extend %notebook_vert_arrows;
1782
border-bottom-style: none;
1784
}
1785
@at-root %notebook_vert_arrows {
1787
padding-left: 4px;
1788
padding-right: 4px;
1789
&.down {
1791
margin-left: -8px;
1792
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1793
}
1794
&.up {
1796
margin-right: -8px;
1797
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1798
}
1799
}
1800
&.left > tabs > arrow {
1802
@extend %notebook_horz_arrows;
1803
border-left-style: none;
1805
}
1806
&.right > tabs > arrow {
1808
@extend %notebook_horz_arrows;
1809
border-right-style: none;
1811
}
1812
@at-root %notebook_horz_arrows {
1814
padding-top: 4px;
1815
padding-bottom: 4px;
1816
&.down {
1818
margin-top: -8px;
1819
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1820
}
1821
&.up {
1823
margin-bottom: -8px;
1824
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1825
}
1826
}
1827
> tabs > arrow {
1829
@extend %simple_flat_button;
1830
min-height: 16px;
1832
min-width: 16px;
1833
border-radius: 0;
1834
}
1835
tab {
1837
transition: $shorter_transition,
1838
background-size 0,
1839
background-image 0;
1840
min-height: $small_size;
1841
min-width: $small_size;
1842
padding: $container_padding 12px;
1843
outline-offset: -6px;
1845
border-width: 1px; // for reorderable tabs
1847
border-color: transparent; //
1848
background-image: radial-gradient(circle farthest-corner at center,
1850
$primary_color 10%,
1851
transparent 0%);
1852
background-repeat: no-repeat;
1853
background-position: center;
1854
background-size: 0% 0%;
1855
background-clip: border-box;
1856
color: $secondary_fg_color;
1858
font-weight: 500;
1859
&:hover {
1861
background-color: $hover_overlay_color;
1862
color: $fg_color;
1863
}
1864
&:disabled { color: $disabled_secondary_fg_color; }
1866
&:checked {
1868
transition: $shorter_transition,
1869
background-size $longer_duration $deceleration_curve,
1870
background-image $longer_duration + $ripple_duration $deceleration_curve;
1871
background-color: transparent;
1872
background-image: radial-gradient(circle farthest-corner at center,
1873
transparent 10%,
1874
transparent 0%);
1875
background-size: 1000% 1000%;
1876
background-clip: padding-box;
1877
color: $fg_color;
1878
&:disabled { color: $disabled_fg_color; }
1880
&.reorderable-page {
1882
border-color: $border_color;
1883
background-color: $base_color;
1884
}
1885
}
1886
// colors the button like the label, overridden otherwise
1888
button.flat {
1889
@extend %small_button;
1890
&:last-child {
1892
margin-left: $container_padding;
1893
margin-right: $container_padding - 12px;
1894
}
1895
&:first-child {
1897
margin-left: $container_padding - 12px;
1898
margin-right: $container_padding;
1899
}
1900
}
1901
}
1902
&.top,
1904
&.bottom {
1905
tabs {
1906
padding-left: 8px;
1907
padding-right: 8px;
1908
&:not(:only-child) {
1910
&:first-child { margin-left: 0; }
1911
&:last-child { margin-right: 0; }
1913
}
1914
tab.reorderable-page { border-style: none solid; }
1916
}
1917
}
1918
&.left,
1920
&.right {
1921
tabs {
1922
padding-top: 8px;
1923
padding-bottom: 8px;
1924
&:not(:only-child) {
1926
&:first-child { margin-top: 0; }
1927
&:last-child { margin-bottom: 0; }
1929
}
1930
tab.reorderable-page { border-style: solid none; }
1932
}
1933
}
1934
}
1935
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1937
background-color: $base_color;
1938
}
1939
}
1940
/**************
1943
* Scrollbars *
1944
**************/
1945
scrollbar {
1946
$_slider_min_length: 24px;
1947
// disable steppers
1949
@at-root * {
1950
-GtkScrollbar-has-backward-stepper: false;
1951
-GtkScrollbar-has-forward-stepper: false;
1952
}
1953
transition: $shorter_transition;
1955
background-color: $base_color;
1956
background-clip: $extra_background_clip;
1957
// scrollbar border
1959
&.top { border-bottom: 1px solid $border_color; }
1960
&.bottom { border-top: 1px solid $border_color; }
1961
&.left { border-right: 1px solid $border_color; }
1962
&.right { border-left: 1px solid $border_color; }
1963
// slider
1965
slider {
1966
transition: $shorter_transition, margin 0, border-width 0;
1967
min-width: 8px;
1968
min-height: 8px;
1969
border: 4px solid transparent;
1970
border-radius: $circular_radius;
1971
background-clip: padding-box;
1972
background-color: $disabled_fg_color;
1973
&:hover { background-color: $secondary_fg_color; }
1975
&:active { background-color: $fg_color; }
1977
&:disabled { background-color: $disabled_secondary_fg_color; }
1979
}
1980
&.fine-tune {
1982
slider {
1983
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1984
min-width: 4px;
1985
min-height: 4px;
1986
}
1987
&.horizontal slider { margin: 2px 0; }
1989
&.vertical slider { margin: 0 2px; }
1991
}
1992
&.overlay-indicator {
1994
&:not(.dragging):not(.hovering) {
1995
border-color: transparent;
1996
background-color: transparent;
1997
slider {
1999
min-width: 4px;
2000
min-height: 4px;
2001
margin: 4px - 1px;
2002
border: 1px solid rgba($base_color, 0.3);
2003
}
2004
button {
2006
min-width: 4px;
2007
min-height: 4px;
2008
margin: 4px - 1px;
2009
border: 1px solid rgba($base_color, 0.3);
2010
border-radius: $circular_radius;
2011
background-color: $disabled_fg_color;
2012
background-clip: padding-box;
2013
-gtk-icon-source: none;
2014
&:disabled { background-color: $disabled_secondary_fg_color; }
2016
}
2017
&.horizontal {
2019
slider { min-width: $_slider_min_length; }
2020
button { min-width: 8px; }
2022
}
2023
&.vertical {
2025
slider { min-height: $_slider_min_length; }
2026
button { min-height: 8px; }
2028
}
2029
}
2030
&.dragging,
2032
&.hovering { background-color: rgba($base_color, 0.9); }
2033
}
2034
&.horizontal slider { min-width: $_slider_min_length; }
2036
&.vertical slider { min-height: $_slider_min_length; }
2038
// button styling
2040
button {
2041
@extend %simple_flat_button;
2042
min-width: 16px;
2044
min-height: 16px;
2045
padding: 0;
2046
border-radius: 0;
2047
}
2048
// button icons
2050
&.vertical {
2051
button {
2052
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2053
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2055
}
2056
}
2057
&.horizontal {
2059
button {
2060
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2061
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2063
}
2064
}
2065
}
2066
/**********
2069
* Switch *
2070
**********/
2071
switch {
2072
transition: all $shorter_duration $deceleration_curve;
2073
margin: $container_padding 0;
2074
padding: 0 2px;
2075
border: 5px solid transparent;
2076
border-radius: $circular_radius;
2077
background-color: $track_color;
2078
background-clip: padding-box;
2079
font-size: 0;
2080
&:checked { background-color: rgba($primary_color, 0.5); }
2082
&:disabled { opacity: 0.5; }
2084
slider {
2086
transition: all $shorter_duration $deceleration_curve;
2087
min-width: 20px;
2088
min-height: 20px;
2089
margin: -3px -2px;
2090
border-radius: $circular_radius;
2091
box-shadow: 0 0 0 10px transparent, $shadow_1;
2092
background-color: $surface_color;
2093
}
2094
&:hover slider { box-shadow: 0 0 0 10px $hover_overlay_color, $shadow_1; }
2096
&:focus slider { box-shadow: 0 0 0 10px $focus_overlay_color, $shadow_1; }
2098
&:focus:hover slider { box-shadow: 0 0 0 10px $hover_focus_overlay_color, $shadow_1; }
2100
&:checked slider {
2102
background-color: $primary_color;
2103
color: $primary_color;
2104
}
2105
row:selected & {
2107
}
2108
}
2109
/*************************
2112
* Check and Radio items *
2113
*************************/
2114
// draw regular check and radio items using our PNG assets
2115
// all assets are rendered from assets.svg. never add pngs directly
2116
// selection-mode
2118
.view.content-view.check:not(list),
2119
.content-view .tile check:not(list) {
2120
min-height: 40px;
2121
min-width: 40px;
2122
margin: 0;
2123
padding: 0;
2124
box-shadow: none;
2125
background-color: transparent;
2126
background-image: none;
2127
-gtk-icon-shadow: $shadow_1;
2128
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2130
@each $s, $as in ('', '-unchecked'),
2132
(':checked', '-checked') {
2133
&#{$s} {
2134
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2135
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2136
}
2137
}
2138
}
2139
checkbutton,
2141
radiobutton {
2142
outline: none;
2143
}
2144
checkbutton.text-button,
2146
radiobutton.text-button {
2147
// this is for a nice focus on check and radios text
2148
padding: 2px;
2149
label:not(:only-child) { margin: 0 4px; }
2151
}
2152
$check_radio_size: 40px;
2154
check,
2156
radio {
2157
min-height: 24px;
2158
min-width: 24px;
2159
margin: -($check_radio_size - 24px) / 2;
2160
padding: ($check_radio_size - 24px) / 2;
2161
@extend %simple_flat_button;
2163
@extend %circular_button;
2165
&:hover { box-shadow: inset 0 0 0 9999px $hover_overlay_color; }
2167
&:focus { box-shadow: inset 0 0 0 9999px $focus_overlay_color; }
2169
&:focus:hover { box-shadow: inset 0 0 0 9999px $hover_focus_overlay_color; }
2171
&:checked, &:indeterminate {
2173
color: $primary_color;
2174
&:disabled { color: $disabled_secondary_fg_color; }
2176
}
2177
// &:only-child { margin: -12px; }
2179
row:selected &:not(:checked):not(:indeterminate) {
2181
color: $inverse_secondary_fg_color;
2182
&:hover, &:active { color: $inverse_fg_color; }
2184
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2186
}
2187
popover & {
2189
&, &:hover, &:focus, &:focus:hover, &:active, &:disabled {
2190
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2191
box-shadow: none;
2192
background-image: none;
2193
}
2194
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2196
&.left:dir(rtl) {
2198
margin-left: -12px;
2199
margin-right: -4px;
2200
}
2201
&.right:dir(ltr) {
2203
margin-left: -4px;
2204
margin-right: -12px;
2205
}
2206
}
2207
menu menuitem & {
2209
transition: none;
2210
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2211
padding: 0;
2212
&:dir(ltr) { margin-right: 8px; }
2214
&:dir(rtl) { margin-left: 8px; }
2216
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2218
&, &:hover, &:disabled {
2220
box-shadow: none;
2221
// color: inherit;
2222
}
2223
}
2224
}
2225
%check,
2227
check {
2228
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2229
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2231
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2233
}
2234
%radio,
2236
radio {
2237
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2238
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2240
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2242
border-image-slice: $check_radio_size / 2px;
2244
border-image-width: $check_radio_size / 2;
2245
$radio_indicator: 10px / $check_radio_size / 2;
2247
& {
2249
border-image-source: -gtk-gradient(radial,
2250
center center, 0,
2251
center center, 0.001,
2252
to($primary_color),
2253
to(transparent));
2254
}
2255
&:checked:not(:indeterminate) {
2257
border-image-source: -gtk-gradient(radial,
2258
center center, 0,
2259
center center, $radio_indicator,
2260
to($primary_color),
2261
to(transparent));
2262
}
2263
&:checked:not(:indeterminate):disabled {
2265
border-image-source: -gtk-gradient(radial,
2266
center center, 0,
2267
center center, $radio_indicator,
2268
to($disabled_secondary_fg_color),
2269
to(transparent));
2270
}
2271
}
2272
%small_check,
2274
menu menuitem check {
2275
& {
2276
min-height: 16px;
2277
min-width: 16px;
2278
border-radius: $material_radius;
2279
-gtk-outline-radius: $material_radius;
2280
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2281
}
2282
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2284
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2286
}
2287
%small_radio,
2289
menu menuitem radio {
2290
& {
2291
min-height: 16px;
2292
min-width: 16px;
2293
border-image: none;
2294
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2295
}
2296
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2298
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2300
}
2301
// ANIMATION:
2303
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2304
// the transformation is set on the active state and it get reset on the checked state.
2305
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2306
treeview.view check,
2308
treeview.view radio {
2309
padding: 0;
2310
&:hover {
2312
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.08);
2313
&:disabled { box-shadow: none; }
2315
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.08); }
2317
}
2318
& {
2320
color: $secondary_fg_color;
2321
&:hover, &:active { color: $fg_color; }
2323
&:disabled { color: $disabled_secondary_fg_color; }
2325
&:checked, &:indeterminate { color: $primary_color; }
2327
&:checked:disabled, &:indeterminate:disabled { color: $disabled_secondary_fg_color; }
2329
}
2330
&:selected {
2332
color: $inverse_secondary_fg_color;
2333
&:hover, &:active { color: $inverse_fg_color; }
2335
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2337
&:checked, &:indeterminate { color: $primary_color; }
2339
&:checked:disabled, &:indeterminate:disabled { color: $disabled_secondary_fg_color; }
2341
}
2342
}
2343
treeview.view radio:checked {
2345
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2346
border-image: none;
2347
}
2348
/************
2351
* GtkScale *
2352
************/
2353
scale {
2354
// sizing
2355
$_marks_length: 8px;
2356
$_marks_distance: 7px;
2357
$trough_size: 2px;
2359
$finetune_trough_size: 4px;
2360
$slider_size: 32px;
2362
$slider_margin: -($slider_size - $trough_size) / 2;
2364
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2365
$color_slider_margin: -($slider_size) * 3 / 4;
2367
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2368
min-height: $trough_size;
2370
min-width: $trough_size;
2371
&.horizontal { padding: ($medium_size - $trough_size) / 2 12px; }
2373
&.vertical { padding: 12px ($medium_size - $trough_size) / 2; }
2375
// the slider is inside the trough, so to have make it bigger there's a negative margin
2377
slider {
2378
min-height: $slider_size;
2379
min-width: $slider_size;
2380
margin: $slider_margin;
2381
}
2382
// click-and-hold the slider to activate
2384
&.fine-tune {
2385
&.horizontal {
2386
min-height: $finetune_trough_size;
2387
padding-top: ($medium_size - $finetune_trough_size) / 2;
2388
padding-bottom: ($medium_size - $finetune_trough_size) / 2;
2389
}
2390
&.vertical {
2392
min-width: $finetune_trough_size;
2393
padding-left: ($medium_size - $finetune_trough_size) / 2;
2394
padding-right: ($medium_size - $finetune_trough_size) / 2;
2395
}
2396
// to make the trough grow in fine-tune mode
2398
slider { margin: $finetune_slider_margin; }
2399
}
2400
// the backing bit
2402
trough {
2403
transition: background-color $shorter_duration $deceleration_curve;
2404
outline: none;
2405
background-color: $track_color;
2406
&:disabled { background-color: $divider_color; }
2408
}
2409
// the colored part of the backing bit
2411
highlight {
2412
transition: background-color $shorter_duration $deceleration_curve;
2413
background-color: $primary_color;
2414
&:disabled { background-color: transparent; }
2416
}
2417
// this is another differently styled part of the backing bit, the most relevant use case is for example
2419
// in media player to indicate how much video stream as been cached
2420
fill {
2421
transition: background-color $shorter_duration $deceleration_curve;
2422
background-color: $track_color;
2423
&:disabled { background-color: transparent; }
2425
}
2426
slider {
2428
transition: background-color $shorter_duration $deceleration_curve,
2429
background-size $ripple_duration $deceleration_curve,
2430
background-image $ripple_opacity_duration $deceleration_curve;
2431
background-repeat: no-repeat;
2432
background-position: center;
2433
background-size: auto, 1000% 1000%;
2434
border-radius: 50%;
2435
color: transparent;
2436
@each $s, $as in ('', ''),
2438
(':disabled', '-disabled') {
2439
&#{$s} {
2440
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2441
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2443
radial-gradient(circle farthest-corner at center,
2444
currentColor 10%,
2445
transparent 0%);
2446
}
2447
}
2448
&:hover { background-color: rgba($primary_color, 0.08); }
2450
&:focus { background-color: rgba($primary_color, 0.12); }
2452
&:focus:hover { background-color: rgba($primary_color, 0.16); }
2454
&:active {
2456
transition: background-color $shorter_duration $deceleration_curve,
2457
background-size 0,
2458
background-image 0;
2459
animation: scale_ripple_effect $longer_duration $deceleration_curve forwards;
2460
background-size: auto, 0% 0%;
2461
background-color: rgba($primary_color, 0.08);
2462
color: rgba($primary_color, 0.12);
2463
}
2464
}
2465
marks label,
2467
value { color: $secondary_fg_color; }
2468
marks {
2470
color: $track_color;
2471
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2473
(bottom, bottom, top),
2474
(left, left, right),
2475
(right, right, left) {
2476
&.#{$marks_class} {
2477
margin-#{$marks_margin}: $_marks_distance;
2478
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2479
}
2480
}
2481
}
2482
&.fine-tune marks {
2484
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2485
(bottom, bottom, top),
2486
(left, left, right),
2487
(right, right, left) {
2488
&.#{$marks_class} {
2489
margin-#{$marks_margin}: $_marks_distance - 1px;
2490
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2491
}
2492
}
2493
}
2494
&.horizontal {
2496
indicator {
2497
min-height: $_marks_length;
2498
min-width: 1px;
2499
}
2500
}
2501
&.vertical {
2503
indicator {
2504
min-height: 1px;
2505
min-width: $_marks_length;
2506
}
2507
}
2508
// *WARNING* scale with marks madness following
2510
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2512
('vertical', 'vert') {
2513
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2514
('marks-after', 'marks-after:not(.marks-before)') {
2515
&.#{$dir_class}.#{$marks_class} {
2516
slider {
2517
@each $state, $state_infix in ('', ''),
2518
(':disabled', '-disabled') {
2519
&#{$state} {
2520
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2521
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2523
radial-gradient(circle farthest-corner at center,
2524
currentColor 10%,
2525
transparent 0%);
2526
}
2527
}
2528
}
2529
}
2530
}
2531
}
2532
&.color {
2534
min-height: 0;
2535
min-width: 0;
2536
&.horizontal {
2538
padding: 0 0 12px 0;
2539
slider {
2541
&:dir(ltr), &:dir(rtl) { // specificity bump
2542
margin-bottom: $color_slider_margin;
2543
margin-top: $color_marks_slider_margin;
2544
}
2545
}
2546
}
2547
&.vertical {
2549
&:dir(ltr) {
2550
padding: 0 0 0 12px;
2551
slider {
2553
margin-left: $color_slider_margin;
2554
margin-right: $color_marks_slider_margin;
2555
}
2556
}
2557
&:dir(rtl) {
2559
padding: 0 12px 0 0;
2560
slider {
2562
margin-right: $color_slider_margin;
2563
margin-left: $color_marks_slider_margin;
2564
}
2565
}
2566
}
2567
}
2568
}
2569
/*****************
2572
* Progress bars *
2573
*****************/
2574
progressbar {
2575
// sizing
2576
&.horizontal {
2577
trough,
2578
progress { min-height: $bar_size; }
2579
}
2580
&.vertical {
2582
trough,
2583
progress { min-width: $bar_size; }
2584
}
2585
// FIXME: insensitive state missing and some other state should be set probably
2587
color: $secondary_fg_color;
2588
font-size: smaller;
2589
trough { background-color: $divider_color; }
2591
progress { background-color: $primary_color; }
2593
&.osd { // progressbar.osd used for epiphany page loading progress
2595
// min-width: $bar_size;
2596
// min-height: $bar_size;
2597
// background-color: transparent;
2598
// trough { background-color: transparent; }
2600
// progress { background-color: $primary_color; }
2602
}
2603
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2605
}
2606
/*************
2609
* Level Bar *
2610
*************/
2611
levelbar {
2612
&.horizontal {
2613
block { min-height: $bar_size; }
2614
&.discrete block {
2616
min-width: $medium_size;
2617
&:not(:last-child) { margin-right: 2px; }
2619
}
2620
}
2621
&.vertical {
2623
block { min-width: $bar_size; }
2624
&.discrete block {
2626
min-height: $medium_size;
2627
&:not(:last-child) { margin-bottom: 2px; }
2629
}
2630
}
2631
// imitate the entry style
2633
trough {
2634
// padding: 2px;
2635
// border-radius: $material_radius;
2636
// box-shadow: $shadow_1;
2637
// background-color: $base_color;
2638
// &:disabled { background-color: $alt_base_color; }
2640
}
2641
block {
2643
&.low { background-color: $warning_color; }
2644
&.high,
2646
&:not(.empty) { background-color: $primary_color; }
2647
&.full { background-color: $success_color; }
2649
&.empty { background-color: $divider_color; }
2651
}
2652
}
2653
/****************
2656
* Print dialog *
2657
*****************/
2658
printdialog {
2659
paper {
2660
padding: 0;
2661
border: 1px solid $border_color;
2662
background-color: $base_color;
2663
color: $fg_color;
2664
}
2665
.dialog-action-box { margin: 12px; }
2667
}
2668
/**********
2671
* Frames *
2672
**********/
2673
frame > border,
2674
.frame {
2675
margin: 0;
2676
padding: 0;
2677
border: 1px solid $border_color;
2678
border-radius: 0;
2679
box-shadow: none;
2680
&.flat { border-style: none; }
2682
}
2683
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2685
actionbar > revealer > box {
2687
padding: $container_padding;
2688
border-top: 1px solid $border_color;
2689
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2691
}
2692
scrolledwindow {
2694
viewport.frame { // avoid double borders when viewport inside scrolled window
2695
border-style: none;
2696
}
2697
// This is used when content is touch-dragged past boundaries.
2699
// draws a box on top of the content, the size changes programmatically.
2700
@at-root overshoot {
2701
&.top { @include overshoot(top); }
2702
&.bottom { @include overshoot(bottom); }
2704
&.left { @include overshoot(left); }
2706
&.right { @include overshoot(right); }
2708
}
2709
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2711
@at-root undershoot {
2712
&.top { @include undershoot(top); }
2713
&.bottom { @include undershoot(bottom); }
2715
&.left { @include undershoot(left); }
2717
&.right { @include undershoot(right); }
2719
}
2720
@at-root junction { // the small square between two scrollbars
2722
border-style: solid none none solid;
2723
border-width: 1px;
2724
border-color: $border_color;
2725
background-color: $base_color;
2726
&:dir(rtl) { border-style: solid solid none none; }
2728
}
2729
}
2730
// vbox and hbox separators
2732
separator {
2733
min-width: 1px;
2734
min-height: 1px;
2735
background-color: $border_color;
2736
}
2737
%hide_separators {
2739
min-width: 0;
2740
min-height: 0;
2741
background-color: transparent;
2742
}
2743
/*********
2746
* Lists *
2747
*********/
2748
list {
2749
border-color: $border_color;
2750
background-color: $base_color;
2751
row { padding: 2px; }
2753
}
2754
// FIXME
2756
$row_transition: $shorter_transition, background-color 0, color 0;
2757
row {
2759
&.activatable {
2760
transition: $row_transition,
2761
background-size $ripple_duration $deceleration_curve,
2762
background-image $ripple_opacity_duration $deceleration_curve;
2763
box-shadow: inset 0 0 0 9999px transparent;
2764
background-image: radial-gradient(circle farthest-corner at center,
2765
transparent 10%,
2766
transparent 0%);
2767
background-repeat: no-repeat;
2768
background-position: center;
2769
background-size: 1000% 1000%;
2770
&:hover {
2772
transition: $row_transition,
2773
box-shadow 0,
2774
background-size $ripple_duration $deceleration_curve,
2775
background-image $ripple_opacity_duration $deceleration_curve;
2776
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2777
}
2778
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2780
&:active {
2781
transition: $row_transition,
2782
background-size 0,
2783
background-image 0;
2784
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2785
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2786
background-image: radial-gradient(circle farthest-corner at center,
2787
$active_overlay_color 10%,
2788
transparent 0%);
2789
background-size: 0% 0%;
2790
}
2791
}
2792
&:selected { @extend %selected_items; }
2794
}
2795
/*********************
2798
* App Notifications *
2799
*********************/
2800
.app-notification {
2801
// @extend %osd;
2802
@extend toolbar.osd;
2804
margin: 8px;
2806
button { @extend %button_basic.flat; }
2808
&.frame,
2810
border { border-style: none; }
2811
}
2812
/*************
2815
* Expanders *
2816
*************/
2817
expander {
2818
title > arrow {
2819
transition: all $shorter_duration $deceleration_curve;
2820
min-width: 16px;
2821
min-height: 16px;
2822
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2823
-gtk-icon-transform: rotate(-90deg);
2824
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2826
&:checked { -gtk-icon-transform: unset; }
2828
color: $secondary_fg_color;
2830
&:hover, &:active { color: $fg_color; }
2832
&:disabled { color: $disabled_secondary_fg_color; }
2834
&:selected {
2836
color: $inverse_secondary_fg_color;
2837
&:hover, &:active { color: $inverse_fg_color; }
2839
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2841
}
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
}
2926
}
2927
filechooserbutton:drop(active) {
2929
box-shadow: none;
2930
}
2931
/***********
2934
* Sidebar *
2935
***********/
2936
.sidebar {
2937
border-style: none;
2938
background-color: $alt_base_color;
2939
@at-root %sidebar_left,
2941
&:dir(ltr),
2942
&.left,
2943
&.left:dir(rtl) {
2944
border-right: 1px solid $border_color;
2945
border-left-style: none;
2946
}
2947
@at-root %sidebar_right,
2949
&:dir(rtl),
2950
&.right {
2951
border-left: 1px solid $border_color;
2952
border-right-style: none;
2953
}
2954
list { background-color: transparent; }
2956
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2958
}
2959
stacksidebar {
2961
&.sidebar {
2962
&:dir(ltr),
2963
&.left,
2964
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2965
&:dir(rtl),
2967
&.right { list { @extend %sidebar_right; }}
2968
}
2969
row {
2971
padding: 10px 4px;
2972
> label {
2974
padding-left: 6px;
2975
padding-right: 6px;
2976
}
2977
&.needs-attention > label { @extend %needs_attention; }
2979
}
2980
}
2981
/****************
2984
* File chooser *
2985
****************/
2986
// dim the sidebar icons, see bug #786613 for details on this oddity
2987
row {
2988
image.sidebar-icon { color: $secondary_fg_color; }
2989
&:selected image.sidebar-icon { color: $inverse_secondary_fg_color; }
2991
}
2992
placessidebar {
2994
> viewport.frame { border-style: none; }
2995
list { padding: (4px - 3px) 0 4px; }
2997
row {
2999
// Needs overriding of the GtkListBoxRow padding
3000
min-height: 32px;
3001
margin: -1px 0; // Remove unknown margins
3002
padding: 0;
3003
// Using margins/padding directly in the SidebarRow
3005
// will make the animation of the new bookmark row jump
3006
> revealer { padding: 0 12px; }
3007
&:selected { color: $inverse_fg_color; }
3009
&:disabled { color: $disabled_fg_color; }
3011
image.sidebar-icon {
3013
&:dir(ltr) { padding-right: 8px; }
3014
&:dir(rtl) { padding-left: 8px; }
3015
}
3016
label.sidebar-label {
3018
&:dir(ltr) { padding-right: 2px; }
3019
&:dir(rtl) { padding-left: 2px; }
3020
}
3021
@at-root button.sidebar-button {
3023
@extend %simple_flat_button;
3024
@extend %small_button;
3026
row:selected & { @extend %button_selected.flat; }
3028
}
3029
&.sidebar-placeholder-row {
3031
min-height: 2px;
3032
padding: 0 8px;
3033
background-image: image($primary_color);
3034
background-clip: content-box;
3035
}
3036
&.sidebar-new-bookmark-row { color: $primary_color; }
3038
&:drop(active):not(:disabled) {
3040
box-shadow: inset 0 0 0 2px $primary_color;
3041
&:selected {
3043
// background-color: $primary_color;
3044
// color: $inverse_fg_color;
3045
}
3046
}
3047
}
3048
}
3049
placesview {
3051
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3052
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3054
// this selects the "connect to server" label
3056
> actionbar > revealer > box > label {
3057
padding-left: 8px;
3058
padding-right: 8px;
3059
}
3060
}
3061
/*********
3064
* Paned *
3065
*********/
3066
paned {
3067
> separator {
3068
min-width: 1px;
3069
min-height: 1px;
3070
-gtk-icon-source: none; // defeats the ugly default handle decoration
3071
border-style: none; // just to be sure
3072
background-color: transparent;
3073
// workaround, using background istead of a border since the border will get rendered twice (?)
3074
background-image: image($border_color);
3075
background-size: 1px 1px;
3076
background-clip: content-box; // avoids borders image being rendered twice (?)
3077
&.wide {
3079
min-width: 6px;
3080
min-height: 6px;
3081
background-color: $bg_color;
3082
background-image: image($border_color), image($border_color);
3083
background-size: 1px 1px, 1px 1px;
3084
}
3085
}
3086
&.horizontal > separator {
3088
background-repeat: repeat-y;
3089
&:dir(ltr) {
3091
margin: 0 -8px 0 0;
3092
padding: 0 8px 0 0;
3093
background-position: left;
3094
}
3095
&:dir(rtl) {
3097
margin: 0 0 0 -8px;
3098
padding: 0 0 0 8px;
3099
background-position: right;
3100
}
3101
&.wide {
3103
margin: 0;
3104
padding: 0;
3105
background-repeat: repeat-y, repeat-y;
3106
background-position: left, right;
3107
}
3108
}
3109
&.vertical > separator {
3111
margin: 0 0 -8px 0;
3112
padding: 0 0 8px 0;
3113
background-repeat: repeat-x;
3114
background-position: top;
3115
&.wide {
3117
margin: 0;
3118
padding: 0;
3119
background-repeat: repeat-x, repeat-x;
3120
background-position: bottom, top;
3121
}
3122
}
3123
}
3124
/**************
3127
* GtkInfoBar *
3128
**************/
3129
infobar {
3130
border-style: none;
3131
&.info { background-color: $info_bg_color; }
3133
&.question { background-color: $question_bg_color; }
3135
&.warning { background-color: $warning_bg_color; }
3137
&.error { background-color: $error_bg_color; }
3139
&.info,
3141
&.question,
3142
&.warning,
3143
&.error {
3144
> label, & { color: $inverse_fg_color; }
3145
button { @extend %button_selected; }
3147
selection {}
3149
*:link { @extend %link_selected; }
3151
}
3152
}
3153
/************
3156
* Tooltips *
3157
************/
3158
tooltip {
3159
&.background {
3160
// background-color needs to be set this way otherwise it gets drawn twice
3161
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3162
// box-shadow: inset 0 1px $highlight_color;
3163
background-color: $tooltip_bg_color;
3164
color: $tooltip_fg_color;
3165
}
3166
// padding: 4px; /* not working */
3168
border-radius: $material_radius;
3169
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3170
&:not(.csd):not(.unity-csd) {
3172
// border: 1px solid $border_color;
3173
// border-radius: $material_radius + 1px;
3174
// background-clip: $extra_background_clip;
3175
}
3176
// FIXME: we need a border or tooltips vanish on black background.
3178
decoration { background-color: transparent; }
3179
label {
3181
// tooltip label already seems to have 6px margins
3182
min-height: 32px - 6px * 2;
3183
padding: 0 8px - 6px;
3184
}
3185
* {
3187
// workaround for Eclipse.
3188
// do not include any declaration here.
3189
// padding: 0;
3190
// background-color: transparent;
3191
// color: inherit;
3192
}
3193
}
3194
/*****************
3197
* Color Chooser *
3198
*****************/
3199
colorswatch {
3200
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3201
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3202
// applied to the overlay box.
3203
// base color corners rounding
3205
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3206
// sports a bigger radius.
3207
// nth-child is needed by the custom color strip.
3208
&.top {
3210
border-top-left-radius: $material_radius + 0.5px;
3211
border-top-right-radius: $material_radius + 0.5px;
3212
overlay {
3214
border-top-left-radius: $material_radius;
3215
border-top-right-radius: $material_radius;
3216
}
3217
}
3218
&.bottom {
3220
border-bottom-left-radius: $material_radius + 0.5px;
3221
border-bottom-right-radius: $material_radius + 0.5px;
3222
overlay {
3224
border-bottom-left-radius: $material_radius;
3225
border-bottom-right-radius: $material_radius;
3226
}
3227
}
3228
&.left,
3230
&:first-child:not(.top) {
3231
border-top-left-radius: $material_radius + 0.5px;
3232
border-bottom-left-radius: $material_radius + 0.5px;
3233
overlay {
3235
border-top-left-radius: $material_radius;
3236
border-bottom-left-radius: $material_radius;
3237
}
3238
}
3239
&.right,
3241
&:last-child:not(.bottom) {
3242
border-top-right-radius: $material_radius + 0.5px;
3243
border-bottom-right-radius: $material_radius + 0.5px;
3244
overlay {
3246
border-top-right-radius: $material_radius;
3247
border-bottom-right-radius: $material_radius;
3248
}
3249
}
3250
&.dark { color: $light_fg_color; }
3252
&.light { color: $dark_fg_color; }
3254
&:drop(active) {
3256
box-shadow: none;
3257
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3259
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3261
}
3262
overlay {
3264
transition: $shadow_transition;
3265
box-shadow: $shadow_1;
3266
&:hover { box-shadow: $shadow_2; }
3268
}
3269
&#add-color-button {
3271
border-radius: $material_radius $material_radius 0 0;
3272
color: $light_fg_color;
3273
&:only-child { border-radius: $material_radius; }
3275
overlay {
3277
background-image: linear-gradient(to right,
3278
$error_bg_color 25%,
3279
$warning_bg_color 25%, $warning_bg_color 50%,
3280
$info_bg_color 50%, $info_bg_color 75%,
3281
$question_bg_color 75%);
3282
}
3283
}
3284
&:disabled {
3286
opacity: 0.5;
3287
overlay { box-shadow: none; }
3289
}
3290
row:selected & {
3292
}
3293
&#editor-color-sample {
3295
border-radius: $material_radius + 0.5px;
3296
overlay { border-radius: $material_radius; }
3298
// overlay:hover { box-shadow: $shadow_1; }
3300
}
3301
}
3302
// colorscale popup
3304
colorchooser .popover.osd {
3305
transition: $shadow_transition;
3306
border-radius: $material_radius;
3307
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3308
background-color: $surface_color;
3309
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3311
}
3312
/********
3315
* Misc *
3316
********/
3317
// content view (grid/list)
3318
.content-view {
3319
background-color: $bg_color;
3320
// &:hover { -gtk-icon-effect: highlight; }
3322
rubberband, .rubberband { @extend rubberband; }
3324
}
3325
.scale-popup {
3327
// .osd & { @extend %osd; }
3328
.osd & button.flat { // FIXME: quick hack, redo properly
3330
}
3331
button { // +/- buttons on GtkVolumeButton popup
3333
}
3334
}
3335
/**********************
3338
* Window Decorations *
3339
**********************/
3340
decoration {
3341
transition: $shadow_transition;
3342
border-radius: $material_radius $material_radius 0 0;
3343
box-shadow: $shadow_4, 0 16px 16px transparent;
3344
// FIXME rationalize shadows
3346
// this is used for the resize cursor area
3348
margin: 8px;
3349
&:backdrop {
3351
// the transparent shadow here is to enforce that the shadow extents don't
3352
// change when we go to backdrop, to prevent jumping windows.
3353
// The biggest shadow should be in the same order then in the active state
3354
// or the jumping will happen during the transition.
3355
box-shadow: $shadow_2, 0 16px 16px transparent;
3356
}
3357
.maximized &,
3359
.fullscreen &,
3360
.tiled &,
3361
.tiled-top &,
3362
.tiled-right &,
3363
.tiled-bottom &,
3364
.tiled-left & { border-radius: 0; }
3365
.popup & { box-shadow: none; }
3367
// server-side decorations as used by mutter
3369
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3370
.csd.popup & {
3372
border-radius: $material_radius;
3373
box-shadow: $shadow_2;
3374
}
3375
tooltip.csd & {
3377
border-radius: $material_radius;
3378
box-shadow: none;
3379
}
3380
messagedialog.csd & {
3382
border-radius: $material_radius;
3383
// box-shadow: $shadow_4, 0 16px 16px transparent;
3384
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3386
}
3387
.solid-csd & {
3389
margin: 0;
3390
// padding: 4px;
3391
border-radius: 0;
3392
box-shadow: none;
3393
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3394
background-color: $titlebar_bg_color;
3395
}
3396
}
3397
// Window Close button
3399
button.titlebutton {
3400
// @extend %simple_flat_button;
3401
@extend %circular_button;
3403
.selection-mode & {
3405
}
3406
}
3407
// catch all extend :)
3410
%selected_items {
3412
background-color: $primary_color;
3413
@at-root %nobg_selected_items, & {
3415
color: $inverse_fg_color;
3416
&:disabled { color: $inverse_disabled_fg_color; }
3418
}
3419
}
3420
.monospace { font-family: monospace; }
3422
/**********************
3425
* Touch Copy & Paste *
3426
**********************/
3427
// touch selection handlebars for the Popover.osd above
3428
cursor-handle {
3429
border-radius: $circular_radius;
3430
background-color: $primary_color;
3431
background-image: none;
3432
&.top:dir(ltr), &.bottom:dir(rtl) {
3434
padding-left: 6px;
3435
border-top-right-radius: 0;
3436
}
3437
&.bottom:dir(ltr), &.top:dir(rtl) {
3439
padding-right: 6px;
3440
border-top-left-radius: 0;
3441
}
3442
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3444
-GtkWidget-text-handle-width: 24;
3445
-GtkWidget-text-handle-height: 30;
3446
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3448
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3449
url('#{$_url}@2.png'));
3450
}
3451
}
3452
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3454
// shortcut window keys
3456
.keycap {
3457
min-width: 28px - 8px * 2;
3458
min-height: 28px - 2px;
3459
margin-top: 2px;
3460
padding-bottom: 2px;
3461
padding-left: 8px;
3462
padding-right: 8px;
3463
border: solid 1px $border_color;
3465
border-radius: $material_radius + 1px;
3466
box-shadow: inset 0 -2px $border_color;
3467
background-color: $surface_color;
3468
color: $fg_color;
3469
font-size: smaller;
3470
}
3471
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3473
transition: $shorter_transition;
3474
box-shadow: $shadow_1, inset 0 0 0 2px $primary_color;
3475
caret-color: $primary_color;
3476
}
3477
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3479
stackswitcher button.circular,
3481
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3482
min-width: $medium_size;
3483
min-height: $medium_size;
3484
padding: 0;
3485
}
3486
/*********
3489
* Emoji *
3490
*********/
3491
popover.emoji-picker {
3492
padding: 0;
3493
entry {
3495
border-bottom: 1px solid $border_color;
3496
border-radius: 0;
3497
box-shadow: none;
3498
background-color: transparent;
3499
}
3500
scrolledwindow { border-bottom: 1px solid $border_color; }
3502
}
3503
// mimic tab style
3505
button.emoji-section {
3506
margin-top: -1px;
3507
padding: 0 8px;
3508
min-width: 24px;
3509
min-height: $medium_size;
3510
border-radius: 0;
3511
outline-offset: -6px;
3512
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3514
&:checked {
3516
box-shadow: inset 0 2px $primary_color;
3517
background-color: transparent;
3518
}
3519
&:hover, &:active { background-color: $hover_overlay_color; }
3521
&:first-child { margin-left: 4px; }
3523
&:last-child { margin-right: 4px; }
3525
}
3526
.emoji {
3528
min-width: 3em;
3529
min-height: 3em;
3530
padding: 0 8px;
3531
// font-size: larger;
3532
widget {
3534
transition: $shorter_transition;
3535
border-radius: $material_radius;
3536
&:hover { background-color: $hover_overlay_color; }
3538
}
3539
}
3540