ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error_color;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: 4;
21
-GtkDialog-action-area-border: 0;
22
// We use the outline properties to signal the focus properties
24
// to the adwaita engine: using real CSS properties is faster,
25
// and we don't use any outlines for now.
26
outline-style: solid;
28
outline-width: 2px;
29
outline-color: transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: $material_radius;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
notebook:focus tab,
37
*:focus { outline-color: $checked_overlay_color; }
38
/***************
41
* Base States *
42
***************/
43
.background {
44
background-color: $bg_color;
45
color: $fg_color;
46
}
47
/*
49
These wildcard seems unavoidable, need to investigate.
50
Wildcards are bad and troublesome, use them with care,
51
or better, just don't.
52
Everytime a wildcard is used a kitten dies, painfully.
53
*/
54
*:disabled { -gtk-icon-effect: dim; }
56
.gtkstyle-fallback {
58
background-color: $bg_color;
59
color: $fg_color;
60
&:hover {
62
background-color: darken($bg_color, 5%);
63
color: $fg_color;
64
}
65
&:active {
67
background-color: darken($bg_color, 10%);
68
color: $fg_color;
69
}
70
&:disabled {
72
background-color: $bg_color;
73
color: $disabled_fg_color;
74
}
75
&:selected {
77
background-color: $primary_color;
78
color: $inverse_fg_color;
79
}
80
}
81
.view {
83
// @extend row.activatable;
84
background-color: $base_color;
86
color: $fg_color;
87
&:hover { box-shadow: inset 0 0 0 9999px $hover_overlay_color; }
89
&:selected:hover { box-shadow: inset 0 0 0 9999px rgba($primary_color, 0.08); }
91
&:disabled { color: $disabled_fg_color; }
93
&:hover, &:selected { border-radius: $material_radius; }
95
selection,
97
&:selected { @extend %selected_items; }
98
}
99
textview {
101
// FIXME: we need to override background-color to ensure text rendering
102
text { background-color: $base_color; }
103
border {
105
background-color: $alt_base_color;
106
color: $secondary_fg_color; // FIXME: not working
107
}
108
}
109
// iconview { @extend .view; }
111
.rubberband,
113
rubberband {
114
border: 1px solid $alt_primary_color;
115
background-color: rgba($alt_primary_color, 0.3);
116
}
117
flowbox {
119
rubberband { @extend rubberband; }
120
flowboxchild {
122
padding: 4px;
123
border-radius: $material_radius;
124
&:selected { @extend %selected_items; }
126
}
127
}
128
.content-view .tile {
130
// margin: 2px;
131
// padding: 0;
132
// border-radius: 0;
133
// background-color: black;
134
&:selected {
136
background-color: transparent;
137
color: inherit;
138
}
139
}
140
label {
142
caret-color: currentColor; // this shouldn't be needed.
143
&.separator {
145
@extend .dim-label;
146
color: $fg_color;
148
}
149
selection { @extend %selected_items; }
151
&:disabled {
153
color: $disabled_fg_color;
154
// selection { @extend %selected_items:disabled; }
156
headerbar &,
158
tab &,
159
button & { color: inherit; }
160
}
161
}
162
.dim-label { opacity: 0.6; }
164
assistant {
166
.sidebar {
167
padding: 4px 0;
168
// background-color: $base_color;
169
// border-top: 1px solid $border_color;
170
}
171
// &.csd .sidebar { border-top-style: none; }
173
.sidebar label {
175
min-height: $medium_size;
176
padding: 0 12px;
177
color: $disabled_fg_color;
178
font-weight: 500;
179
&.highlight { color: $fg_color; }
181
}
182
}
183
// %osd, .osd { opacity: 0.9; }
185
/*********************
188
* Spinner Animation *
189
*********************/
190
@keyframes spin {
191
to { -gtk-icon-transform: rotate(1turn); }
192
}
193
spinner {
195
background: none;
196
opacity: 0; // non spinning spinner makes no sense
197
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
198
&:checked {
200
opacity: 1;
201
animation: spin 1s linear infinite;
202
&:disabled { opacity: 0.5; }
204
}
205
}
206
/****************
209
* Text Entries *
210
****************/
211
%entry,
212
entry {
213
%entry_basic, & {
214
min-height: $medium_size;
215
padding: 0 8px;
216
border-radius: $material_radius $material_radius 0 0;
217
caret-color: currentColor; // this shouldn't be needed.
218
@include entry(normal);
220
&:focus { @include entry(focus); }
222
&:disabled { @include entry(disabled); }
224
&.flat {
226
min-height: 0;
227
padding: 2px;
228
border-radius: 0;
229
background-color: transparent;
230
}
231
image { // icons inside the entry
233
// @extend %simple_flat_button;
234
// min-height: $small_size;
236
// min-width: $small_size;
237
// border-radius: $circular_radius;
238
// -gtk-outline-radius: $circular_radius;
239
color: $secondary_fg_color;
240
&:hover, &:active { color: $fg_color; }
242
&:disabled { color: $disabled_fg_color; }
244
&.left {
246
margin-left: ($medium_size - 16px) / 2 - 8px;
247
margin-right: 6px;
248
}
249
&.right {
251
margin-left: 6px;
252
margin-right: ($medium_size - 16px) / 2 - 8px;
253
}
254
}
255
undershoot {
257
&.left { @include undershoot(left); }
258
&.right { @include undershoot(right); }
260
}
261
selection { @extend %selected_items; }
263
// entry error and warning style
265
@each $e_type, $e_color in (error, $error_color),
266
(warning, $warning_color) {
267
&.#{$e_type} {
268
@include entry(normal, $e_color);
269
&:focus { @include entry(focus, $e_color); }
271
&:disabled { @include entry(disabled, $e_color); }
273
}
274
}
275
&:drop(active) {
277
// box-shadow: inset 0 0 0 2px $primary_color;
278
}
279
.osd & {
281
}
282
}
283
progress {
285
margin: 2px (2px - 8px);
286
border-bottom: 2px solid $primary_color;
287
background-color: transparent;
288
}
289
// linked entries
291
.linked:not(.vertical) > & { @extend %linked_entry; }
292
// Vertically linked entries
294
.linked.vertical > & { @extend %linked_vertical_entry; }
295
}
296
%entry_raised {
298
border-radius: $material_radius;
299
@include entry(raised-normal);
301
&:focus { @include entry(raised-focus); }
303
&:disabled { @include entry(raised-disabled); }
305
// entry error and warning style
307
@each $e_type, $e_color in (error, $error_color),
308
(warning, $warning_color) {
309
&.#{$e_type} {
310
@include entry(raised-normal, $e_color);
311
&:focus { @include entry(raised-focus, $e_color); }
313
&:disabled { @include entry(raised-disabled, $e_color); }
315
image {
317
color: $inverse_secondary_fg_color;
318
&:hover, &:active { color: $inverse_fg_color; }
320
&:disabled { color: $inverse_disabled_fg_color; }
322
}
323
}
324
}
325
}
326
treeview entry {
328
&.flat, & {
329
background-color: $base_color;
330
&, &:focus {
332
border-image: none;
333
box-shadow: none;
334
}
335
}
336
}
337
.entry-tag {
339
margin: 2px;
340
border-radius: $circular_radius;
341
box-shadow: none;
342
background-color: $divider_color;
343
color: $fg_color;
344
&:hover { background-image: image($divider_color); }
346
// side margins: compensate the entry padding with a negative margin
348
// then the negative margin itself
349
:dir(ltr) & {
350
margin-left: 4px;
351
margin-right: 0;
352
padding-left: 12px;
353
padding-right: 8px;
354
}
355
:dir(rtl) & {
357
margin-left: 0;
358
margin-right: 4px;
359
padding-left: 8px;
360
padding-right: 12px;
361
}
362
// seems any sizing doesn't work
364
&.button {
365
box-shadow: none;
366
background-color: transparent;
367
&:not(:hover):not(:active) { color: $secondary_fg_color; }
369
}
370
}
371
/***********
374
* Buttons *
375
***********/
376
// stuff for .needs-attention
377
@keyframes needs_attention {
378
from {
379
background-image: -gtk-gradient(radial,
380
center center, 0,
381
center center, 0.001,
382
to($primary_color),
383
to(transparent));
384
}
385
to {
387
background-image: -gtk-gradient(radial,
388
center center, 0,
389
center center, 0.5,
390
to($primary_color),
391
to(transparent));
392
}
393
}
394
%button,
396
button {
397
@at-root %button_basic, & {
398
min-height: 24px;
399
min-width: 16px;
400
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
401
border-radius: $material_radius;
402
font-weight: 500;
403
@include button(normal);
405
&:hover { @include button(hover); }
407
&:active { @include button(active); }
409
&:disabled { @include button(disabled); }
411
&:checked { @include button(checked); }
413
&:checked:disabled { @include button(checked-disabled); }
415
@at-root %flat_button, &.flat {
417
@at-root %simple_flat_button, & {
418
@include button(flat-normal);
419
&:hover { @include button(flat-hover); }
421
&:active { @include button(flat-active); }
423
&:disabled { @include button(flat-disabled); }
425
}
426
&:checked { @include button(flat-checked); }
428
&:checked:disabled { @include button(flat-checked-disabled); }
430
}
431
&.text-button {
433
padding-left: 16px;
434
padding-right: 16px;
435
}
436
&.image-button {
438
min-width: 24px;
439
padding: ($medium_size - 24px) / 2;
440
@extend %circular_button;
442
}
443
&.text-button.image-button {
445
border-radius: $material_radius;
446
-gtk-outline-radius: $material_radius;
447
label {
449
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
450
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
452
}
453
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
455
}
456
.linked > & { @extend %linked; }
458
.linked.vertical > & { @extend %linked_vertical; }
460
.linked > &.flat,
462
.linked.vertical > &.flat {
463
border-radius: $material_radius;
464
&.image-button { @extend %circular_button; }
466
&.text-button.image-button {
468
border-radius: $material_radius;
469
-gtk-outline-radius: $material_radius;
470
}
471
}
472
&:drop(active) {
474
// box-shadow: inset 0 0 0 2px $primary_color;
475
}
476
}
477
@at-root %button_selected {
479
&.flat {
480
color: $inverse_secondary_fg_color;
481
&:hover, &:active { color: $inverse_fg_color; }
483
&:disabled { color: $inverse_disabled_secondary_fg_color; }
485
&:checked {
487
background-color: $inverse_track_color;
488
color: $inverse_fg_color;
489
}
490
&:checked:disabled {
492
background-color: $inverse_divider_color;
493
color: $inverse_disabled_fg_color;
494
}
495
}
496
}
497
// big standalone buttons like in Documents pager
499
&.osd {
500
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
501
&.image-button { padding: ($large_size - 24px) / 2; }
503
&:disabled { opacity: 0; }
505
}
506
// overlay / OSD style
508
@at-root %osd_button,
509
.osd & {
510
}
511
// Suggested and Destructive Action buttons
513
@each $b_type, $b_color in (suggested-action, $suggested_color),
514
(destructive-action, $destructive_color) {
515
&.#{$b_type} {
516
background-color: $b_color;
517
color: $inverse_fg_color;
518
&:disabled { @include button(disabled); }
520
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage(0.3)); }
522
&.flat {
524
background-color: transparent;
525
color: $b_color;
526
&:disabled { @include button(flat-disabled); }
528
&:checked { background-color: rgba($b_color, 0.3); }
530
}
531
.osd & {
533
}
534
}
535
}
536
.stack-switcher > & {
538
// to position the needs attention dot, padding is added to the button
539
// child, a label needs just lateral padding while an icon needs vertical
540
// padding added too.
541
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
543
> label {
545
padding-left: 6px; // label padding
546
padding-right: 6px; //
547
}
548
> image {
550
padding-left: 6px; // image padding
551
padding-right: 6px; //
552
padding-top: 3px; //
553
padding-bottom: 3px; //
554
}
555
&.text-button {
557
// compensate text-button paddings
558
padding-left: 16px - 6px;
559
padding-right: 16px - 6px;
560
}
561
&.image-button {
563
// we want image buttons to have a 1:1 aspect ratio, so compensation
564
// of the padding added to the GtkImage is needed
565
padding-left: ($medium_size - 16px) / 2 - 6px;
566
padding-right: ($medium_size - 16px) / 2 - 6px;
567
}
568
&.needs-attention {
570
> label,
571
> image { @extend %needs_attention; }
572
&:checked {
574
> label,
575
> image {
576
animation: none;
577
background-image: none;
578
}
579
}
580
}
581
}
582
// hide separators
584
&.font,
585
&.file { separator { @extend %hide_separators; }}
586
// &.font { > box > box > label { font-weight: bold; }}
588
// inline-toolbar buttons
590
.inline-toolbar & {
591
// @extend %button_basic.flat;
592
&:not(.text-button) { @extend %circular_button; }
594
}
595
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
597
@at-root %circular_button,
599
&.close,
600
&.circular { // The Bloody Circul Button
601
border-radius: $circular_radius;
602
-gtk-outline-radius: $circular_radius;
603
// label { padding: 0; }
605
}
606
@at-root %small_button {
608
min-height: $small_size;
609
min-width: $small_size;
610
padding: 0;
611
border-radius: $circular_radius;
612
-gtk-outline-radius: $circular_radius;
613
}
614
}
615
%needs_attention {
617
animation: needs_attention $longer_duration $deceleration_curve forwards;
618
background-repeat: no-repeat;
619
background-position: right 3px;
620
background-size: 6px 6px;
621
&:dir(rtl) { background-position: left 3px; }
623
}
624
// all the following is for the +|- buttons on inline toolbars, that way
626
// should really be deprecated...
627
.inline-toolbar toolbutton > button { // redefining the button look is
628
// needed since those are flat...
629
}
630
// More inline toolbar buttons
632
toolbar.inline-toolbar toolbutton {
633
// > button.flat { @extend %linked_middle; }
634
// &:first-child > button.flat { @extend %linked:first-child; }
636
// &:last-child > button.flat { @extend %linked:last-child; }
638
// &:only-child > button.flat { @extend %linked:only-child; }
640
}
641
%linked_middle {
643
border-radius: 0;
644
-gtk-outline-radius: $material_radius;
645
}
646
%linked {
648
@extend %linked_middle;
649
&:first-child {
651
border-top-left-radius: $material_radius;
652
border-bottom-left-radius: $material_radius;
653
}
654
&:last-child {
656
border-top-right-radius: $material_radius;
657
border-bottom-right-radius: $material_radius;
658
}
659
&:only-child {
661
border-radius: $material_radius;
662
}
663
}
664
%linked_vertical_middle {
666
border-radius: 0;
667
-gtk-outline-radius: $material_radius;
668
}
669
%linked_vertical {
671
@extend %linked_vertical_middle;
672
&:first-child {
674
border-top-left-radius: $material_radius;
675
border-top-right-radius: $material_radius;
676
}
677
&:last-child {
679
border-bottom-left-radius: $material_radius;
680
border-bottom-right-radius: $material_radius;
681
}
682
&:only-child {
684
border-radius: $material_radius;
685
}
686
}
687
%linked_entry {
689
@extend %linked_middle;
690
&:first-child {
692
border-radius: $material_radius 0 0 0;
693
}
694
&:last-child {
696
border-radius: 0 $material_radius 0 0;
697
}
698
&:only-child {
700
border-radius: $material_radius $material_radius 0 0;
701
}
702
}
703
%linked_vertical_entry {
705
@extend %linked_vertical_middle;
706
&:first-child {
708
border-radius: $material_radius $material_radius 0 0;
709
}
710
&:last-child {
712
border-radius: 0;
713
}
714
&:only-child {
716
border-radius: $material_radius $material_radius 0 0;
717
}
718
}
719
/* menu buttons */
721
modelbutton.flat,
722
.menuitem.button.flat {
723
min-height: $menuitem_size;
724
padding: 0 8px;
725
border-radius: $material_radius;
726
color: inherit;
727
@extend %simple_flat_button;
729
&:selected { @extend %selected_items; }
731
}
732
modelbutton.flat arrow {
734
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
735
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
737
}
738
button.color {
740
min-height: $small_size;
741
min-width: $small_size;
742
padding: $container_padding;
743
colorswatch:only-child {
745
// &, overlay { border-radius: 0; }
746
}
747
}
748
/*********
751
* Links *
752
*********/
753
*:link {
754
&, &:hover, &:active { color: $link_color; }
755
&:visited {
757
&, &:hover, &:active { color: $visited_link_color; }
758
}
759
@at-root %link_selected,
761
&:selected,
762
*:selected & { color: $inverse_fg_color; }
763
}
764
button:link,
766
button:visited {
767
@extend *:link;
768
> label { text-decoration-line: underline; }
770
}
771
/*****************
773
* GtkSpinButton *
774
*****************/
775
spinbutton {
776
&:not(.vertical) {
777
// in this horizontal configuration, the whole spinbutton
778
// behaves as the entry, so we extend the entry styling
779
// and nuke the style on the internal entry
780
@extend %entry;
781
padding: 0;
783
entry {
785
min-width: $large_size - 8px * 2;
786
// reset all the other props since the spinbutton node is styled here
787
margin: 0;
788
border-image: none;
789
border-radius: 0;
790
box-shadow: none;
791
background-color: transparent;
792
//
793
// This will help to simplify spinbutton's code, but unfortunatelly
794
// doesn't work properly in :dir(rtl). It needs z-index property.
795
//
796
// min-width: $large_size - 8px;
797
//
798
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
799
//
800
// &:dir(ltr) {
801
// margin-right: -$spinbuttons_width;
802
// padding-right: $spinbuttons_width;
803
// }
804
//
805
// &:dir(rtl) {
806
// margin-left: -$spinbuttons_width;
807
// padding-left: $spinbuttons_width;
808
// }
809
}
810
button {
812
// margin: $container_padding;
813
border: solid $container_padding transparent;
814
@extend %simple_flat_button;
816
@extend %small_button;
818
&.up:dir(ltr),
820
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
821
&.up:dir(rtl),
823
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
824
}
825
}
826
// OSD horizontal
828
.osd &:not(.vertical) {
829
button {
830
}
831
}
832
// Vertical
834
&.vertical {
835
// in the vertical configuration, we treat the spinbutton
836
// as a box, and tweak the style of the entry in the middle
837
// so that it's linked
838
// FIXME: this should not be set at all, but otherwise it gets the wrong
840
// color
841
&:disabled { color: $disabled_fg_color; }
842
&:drop(active) {
844
box-shadow: none;
845
}
846
entry {
848
@extend %entry_raised;
849
min-height: $medium_size;
851
min-width: $large_size;
852
padding: 0;
853
}
854
button {
856
min-height: $medium_size;
857
min-width: $large_size;
858
padding: 0;
859
@extend %simple_flat_button;
861
&.up { border-radius: $material_radius $material_radius 0 0; }
863
&.down { border-radius: 0 0 $material_radius $material_radius; }
865
}
866
}
867
// OSD vertical
869
.osd &.vertical button:first-child {
870
}
871
// Misc
873
treeview &:not(.vertical) {
874
min-height: 0;
875
border-style: none;
876
border-radius: 0;
877
entry {
879
min-height: 0;
880
padding: 1px 2px;
881
}
882
}
883
}
884
/**************
887
* ComboBoxes *
888
**************/
889
combobox {
890
arrow {
891
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
892
min-height: 16px;
893
min-width: 16px;
894
}
895
decoration,
897
button.combo:checked { transition: none; } // workaround for menuitem selection
898
button.combo cellview {
900
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
901
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
902
}
903
#gtk-combobox-popup-menu {
905
padding: 2px 0;
906
menuitem {
908
min-height: $medium_size - 2px * 2;
909
padding: 0 8px;
910
}
911
// overflow arrows
913
> arrow {
914
&.top { margin-top: -2px; }
915
&.bottom {
917
margin-top: 2px * 2;
918
margin-bottom: -2px * 3;
919
}
920
}
921
}
922
&.linked {
924
button:nth-child(2) {
925
&:dir(ltr) { @extend %linked_entry:last-child; }
926
&:dir(rtl) { @extend %linked_entry:first-child; }
927
}
928
}
929
> .linked > button {
931
@extend %linked_middle;
932
&:first-child { @extend %linked_entry:first-child; }
934
&:last-child { @extend %linked_entry:last-child; }
936
&:only-child { @extend %linked_entry:only-child; }
938
}
939
&:drop(active) { // FIXME: untested
941
box-shadow: none;
942
// button.combo { @extend %button_basic:drop(active); }
944
}
945
}
946
// the combo is a composite widget so the way we do button linking doesn't
948
// work, special case needed. See
949
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
950
.linked:not(.vertical) > combobox {
952
> box > button.combo { @extend %linked_middle; }
953
&:first-child > box > button.combo { @extend %linked_entry:first-child; }
955
&:last-child > box > button.combo { @extend %linked_entry:last-child; }
957
&:only-child > box > button.combo { @extend %linked_entry:only-child; }
959
}
960
.linked.vertical > combobox {
962
> box > button.combo { @extend %linked_vertical_middle; }
963
&:first-child > box > button.combo { @extend %linked_vertical_entry:first-child; }
965
&:last-child > box > button.combo { @extend %linked_vertical_entry:last-child; }
967
&:only-child > box > button.combo { @extend %linked_vertical_entry:only-child; }
969
}
970
button.combo {
972
border-radius: $material_radius $material_radius 0 0;
973
background-image: none;
974
font-weight: inherit;
975
@include entry(normal);
977
&:hover { box-shadow: inset 0 -1px $fg_color; }
979
&:checked { @include entry(focus); }
981
&:disabled { @include entry(disabled); }
983
}
984
/************
987
* Toolbars *
988
************/
989
toolbar {
990
-GtkWidget-window-dragging: true;
991
padding: 2px;
992
background-color: $bg_color;
993
button { @extend %button_basic.flat; }
995
// on OSD
997
.osd & { background-color: transparent; }
998
// stand-alone OSD toolbars
1000
&.osd {
1001
transition: $shadow_transition;
1002
padding: $container_padding;
1003
border-radius: $material_radius;
1004
box-shadow: $shadow_2, inset 0 1px $highlight_color;
1005
background-color: $surface_color;
1006
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
1008
&.left,
1010
&.right,
1011
&.top,
1012
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
1013
}
1014
// toolbar separators
1016
&.horizontal > separator { margin: 2px; }
1017
&.vertical > separator { margin: 2px; }
1018
&:not(.inline-toolbar):not(.osd) {
1020
scale,
1021
entry,
1022
spinbutton,
1023
button { margin: 2px; }
1024
.linked entry,
1026
.linked spinbutton,
1027
.linked button {
1028
&:not(:first-child) { margin-left: 0; }
1029
&:not(:last-child) { margin-right: 0; }
1030
}
1031
spinbutton {
1033
entry,
1034
button { margin: 0; }
1035
}
1036
switch { margin: 2px + $container_padding 2px; }
1038
}
1039
}
1040
// searchbar, location-bar & inline-toolbar
1042
.inline-toolbar {
1043
padding: $container_padding;
1044
border-style: solid;
1045
border-width: 0 1px 1px;
1046
border-color: $border_color;
1047
background-color: $alt_base_color;
1048
}
1049
searchbar > revealer > box,
1051
.location-bar {
1052
padding: $container_padding;
1053
border-style: solid;
1054
border-width: 0 0 1px;
1055
border-color: $border_color;
1056
background-color: $bg_color;
1057
background-clip: border-box;
1058
}
1059
searchbar > revealer > box {
1061
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1062
margin: -6px;
1063
padding: $container_padding;
1064
}
1065
/***************
1068
* Header bars *
1069
***************/
1070
%titlebar,
1071
headerbar {
1072
transition: background-color $shorter_duration $deceleration_curve, color $shorter_duration $deceleration_curve;
1073
min-height: $large_size;
1074
padding: 0 $container_padding;
1075
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1076
background-color: $titlebar_bg_color;
1077
color: $titlebar_fg_color;
1078
&:disabled { color: $titlebar_disabled_fg_color; }
1080
&:backdrop {
1082
color: $titlebar_secondary_fg_color;
1083
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1085
}
1086
.title {
1088
padding: 0 12px;
1089
font-weight: bold;
1090
}
1091
.subtitle {
1093
padding: 0 12px;
1094
font-size: smaller;
1095
@extend .dim-label;
1097
}
1098
entry {
1100
box-shadow: inset 0 -1px $titlebar_track_color;
1101
background-color: $titlebar_fill_color;
1102
color: $titlebar_fg_color;
1103
&:disabled {
1105
box-shadow: inset 0 -1px $titlebar_divider_color;
1106
background-color: $titlebar_fill_color;
1107
color: $titlebar_disabled_fg_color;
1108
}
1109
image {
1111
color: $titlebar_secondary_fg_color;
1112
&:hover, &:active { color: $titlebar_fg_color; }
1114
&:disabled { color: $titlebar_disabled_fg_color; }
1116
}
1117
}
1118
.linked:not(.vertical) > entry:not(.flat) { border-radius: $material_radius $material_radius 0 0; }
1120
button:not(.suggested-action):not(.destructive-action) {
1122
@extend %button_basic.flat;
1123
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1125
$titlebar_indicator_color 0%,
1126
transparent 0%)
1127
0 0 0 / 0 0 0px;
1128
color: $titlebar_secondary_fg_color;
1129
&:hover, &:active { color: $titlebar_fg_color; }
1131
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1133
&:checked {
1135
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1136
$titlebar_indicator_color 100%,
1137
transparent 0%)
1138
0 0 2 / 0 0 2px;
1139
color: $titlebar_fg_color;
1140
&:disabled { color: $titlebar_disabled_fg_color; }
1142
&, &:disabled { background-color: transparent; }
1144
}
1145
&:backdrop {
1147
color: $titlebar_disabled_fg_color;
1148
&:hover, &:active { color: $titlebar_secondary_fg_color; }
1150
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1152
&:checked {
1154
color: $titlebar_secondary_fg_color;
1155
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1157
}
1158
}
1159
}
1160
button.suggested-action, button.destructive-action {
1162
&:disabled {
1163
background-color: $titlebar_fill_color;
1164
color: $titlebar_disabled_fg_color;
1165
}
1166
}
1167
&.selection-mode {
1169
// 0.00001s was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1170
// but let's keep it for backwards compatibility.
1171
transition: background-color 0.00001s $longer_duration, color $longer_duration $deceleration_curve;
1172
animation: header_ripple_effect $longer_duration $deceleration_curve;
1173
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1174
background-color: $primary_color;
1175
color: $inverse_fg_color;
1176
&:backdrop {
1178
color: $inverse_secondary_fg_color;
1179
}
1180
.subtitle:link { @extend *:link:selected; }
1182
button:not(.suggested-action):not(.destructive-action) {
1184
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1185
currentColor 0%,
1186
transparent 0%)
1187
0 0 0 / 0 0 0px;
1188
color: $inverse_fg_color;
1189
&:disabled { color: $inverse_disabled_fg_color; }
1191
&:checked {
1193
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1194
currentColor 100%,
1195
transparent 0%)
1196
0 0 2 / 0 0 2px;
1197
color: $inverse_fg_color;
1198
&:disabled { color: $inverse_disabled_fg_color; }
1200
}
1201
&:backdrop {
1203
color: $inverse_secondary_fg_color;
1204
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1206
&:checked {
1208
color: $inverse_secondary_fg_color;
1209
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1211
}
1212
}
1213
}
1214
.selection-menu {
1216
padding-left: 16px;
1217
padding-right: 16px;
1218
arrow { -GtkArrow-arrow-scaling: 1; }
1220
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1222
}
1223
}
1224
// squared corners when the window is maximized, tiled, or fullscreen
1226
.tiled &,
1227
.tiled-top &,
1228
.tiled-right &,
1229
.tiled-bottom &,
1230
.tiled-left &,
1231
.maximized &,
1232
.fullscreen & {
1233
border-radius: 0;
1234
box-shadow: $shadow_1;
1235
}
1236
&.default-decoration {
1238
min-height: $small_size;
1239
padding: $container_padding;
1240
box-shadow: inset 0 1px $titlebar_highlight_color;
1241
.tiled &,
1243
.maximized &,
1244
.fullscreen & { box-shadow: none; }
1245
button.titlebutton {
1247
min-height: $small_size;
1248
min-width: $small_size;
1249
margin: 0;
1250
padding: 0;
1251
}
1252
// workaround for non-animatable buttons
1254
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1255
}
1256
.solid-csd & {
1258
&:dir(rtl), &:dir(ltr) { // specificity bump
1259
// margin-left: -2px;
1260
// margin-right: -2px;
1261
// margin-top: -2px;
1262
// border-radius: 0;
1263
box-shadow: $shadow_1; // Remove highlight as window managers should have it
1264
}
1265
}
1266
}
1267
headerbar {
1269
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1270
entry,
1271
spinbutton,
1272
button {
1273
margin-top: $container_padding;
1274
margin-bottom: $container_padding;
1275
}
1276
separator {
1278
margin-top: $large_size / 4;
1279
margin-bottom: $large_size / 4;
1280
background-color: $titlebar_divider_color;
1281
}
1282
switch {
1284
margin-top: ($large_size - 24px) / 2;
1285
margin-bottom: ($large_size - 24px) / 2;
1286
}
1287
// reset button margins of the spinbutton
1289
spinbutton button {
1290
margin-top: 0;
1291
margin-bottom: 0;
1292
}
1293
// FIXME: This is a hacky workaround.
1295
.entry-tag {
1296
margin-top: 5px;
1297
margin-bottom: 5px;
1298
}
1299
}
1300
.background .titlebar {
1302
border-top-left-radius: $material_radius;
1303
border-top-right-radius: $material_radius;
1304
}
1305
.background.tiled .titlebar,
1307
.background.tiled-top .titlebar,
1308
.background.tiled-right .titlebar,
1309
.background.tiled-bottom .titlebar,
1310
.background.tiled-left .titlebar,
1311
.background.maximized .titlebar,
1312
.background.solid-csd .titlebar {
1313
border-top-left-radius: 0;
1314
border-top-right-radius: 0;
1315
}
1316
headerbar { // headerbar border rounding
1318
window separator:first-child + &, // tackles the paned container case
1319
window &:first-child { border-top-left-radius: $material_radius; }
1320
window &:last-child { border-top-right-radius: $material_radius; }
1322
window stack & { // tackles the stacked headerbars case
1324
&:first-child, &:last-child {
1325
border-top-left-radius: $material_radius;
1326
border-top-right-radius: $material_radius;
1327
}
1328
}
1329
window.tiled &,
1331
window.tiled-top &,
1332
window.tiled-right &,
1333
window.tiled-bottom &,
1334
window.tiled-left &,
1335
window.maximized &,
1336
window.fullscreen &,
1337
window.solid-csd & {
1338
&,
1339
&:first-child,
1340
&:last-child,
1341
&:only-child {
1342
border-top-left-radius: 0;
1343
border-top-right-radius: 0;
1344
}
1345
}
1346
}
1347
.titlebar:not(headerbar) {
1349
window.csd > & {
1350
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1351
padding: 0;
1352
background-color: transparent;
1353
background-image: none;
1354
border-style: none;
1355
box-shadow: none;
1356
}
1357
> separator {
1359
background-color: $titlebar_bg_color;
1360
background-image: image($border_color);
1361
}
1362
@extend %titlebar;
1364
}
1365
/************
1368
* Pathbars *
1369
************/
1370
%pathbar_button,
1371
.path-bar button {
1372
padding-left: ($medium_size - 24px) / 2;
1373
padding-right: ($medium_size - 24px) / 2;
1374
label:not(:only-child) {
1376
&:first-child { margin-left: 4px; }
1377
&:last-child { margin-right: 4px; }
1379
}
1380
&.slider-button {
1382
padding-left: (24px - 16px) / 2;
1383
padding-right: (24px - 16px) / 2;
1384
}
1385
:not(headerbar) & {
1387
@extend %flat_button;
1388
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1390
$primary_color 0%,
1391
transparent 0%)
1392
0 0 0 / 0 0 0px;
1393
border-radius: $material_radius;
1394
&:checked {
1396
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1397
$primary_color 100%,
1398
transparent 0%)
1399
0 0 2 / 0 0 2px;
1400
&, &:disabled { background-color: transparent; }
1402
}
1403
}
1404
}
1405
/**************
1408
* Tree Views *
1409
**************/
1410
treeview.view {
1411
@at-root * {
1412
-GtkTreeView-horizontal-separator: 4;
1413
-GtkTreeView-grid-line-width: 1;
1414
-GtkTreeView-grid-line-pattern: '';
1415
-GtkTreeView-tree-line-width: 1;
1416
-GtkTreeView-tree-line-pattern: '';
1417
-GtkTreeView-expander-size: 16;
1418
}
1419
border-left-color: $track_color; // this is actually the tree lines color,
1421
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1422
// FIXME: Avoid transparency background-color being slightly darker
1424
&:selected {
1425
background-color: $base_color;
1426
background-image: image($selected_overlay_color);
1427
}
1428
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1430
&:hover, &:selected { border-radius: 0; }
1432
&.separator {
1434
min-height: 1px + 2px * 2;
1435
color: $border_color;
1436
}
1437
&:drop(active) {
1439
border-style: solid none;
1440
border-width: 1px;
1441
border-color: $primary_color;
1442
&.after { border-top-style: none; }
1444
&.before { border-bottom-style: none; }
1446
}
1447
&.expander {
1449
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1450
-gtk-icon-transform: rotate(-90deg);
1451
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1453
&:checked { -gtk-icon-transform: unset; }
1455
color: $secondary_fg_color;
1457
&:hover, &:active { color: $fg_color; }
1459
&:disabled { color: $disabled_secondary_fg_color; }
1461
}
1462
&.progressbar { // progress bar in treeviews
1464
border-bottom: $bar_size solid $primary_color;
1465
box-shadow: none;
1466
background-color: transparent;
1467
}
1468
&.trough { // progress bar trough in treeviews
1470
border-bottom: $bar_size solid $divider_color;
1471
box-shadow: none;
1472
background-color: transparent;
1473
}
1474
header {
1476
button {
1477
@extend row.activatable;
1478
padding: 2px 6px;
1480
border-style: none solid solid none;
1481
border-width: 1px;
1482
border-color: $border_color;
1483
border-radius: 0;
1484
background-clip: border-box;
1485
&:not(:hover):not(:active) { color: $secondary_fg_color; }
1487
&, &:hover, &:active { box-shadow: none; }
1489
&, &:disabled { background-color: $base_color; }
1491
&:last-child { border-right-style: none; }
1493
}
1494
}
1495
button.dnd,
1497
header.button.dnd { // for treeview-like derive widgets
1498
padding: 2px 6px;
1499
border-style: none solid solid;
1500
border-width: 1px;
1501
border-color: $border_color;
1502
border-radius: 0;
1503
box-shadow: none;
1504
background-color: $base_color;
1505
background-clip: border-box;
1506
color: $primary_color;
1507
}
1508
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1510
}
1511
/*********
1514
* Menus *
1515
*********/
1516
menubar,
1517
.menubar {
1518
-GtkWidget-window-dragging: true;
1519
padding: 0;
1520
// box-shadow: inset 0 -1px $border_color;
1521
background-color: $titlebar_bg_color;
1522
> menuitem {
1524
transition: $shorter_transition;
1525
min-height: 20px;
1526
padding: 4px 8px;
1527
color: $titlebar_secondary_fg_color;
1528
&:hover { // Seems like it :hover even with keyboard focus
1530
transition: none;
1531
background-color: $titlebar_divider_color;
1532
color: $titlebar_fg_color;
1533
}
1534
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1536
label:disabled { color: inherit; } // to inherit the above color
1538
}
1539
}
1540
.csd.popup { background-color: transparent; }
1542
menu,
1544
.menu,
1545
.context-menu {
1546
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1547
padding: 4px 0;
1548
box-shadow: inset 0 1px $highlight_color;
1549
background-color: $surface_color;
1550
border: 1px solid $border_color; // adds borders in a non composited env
1551
.csd & {
1553
border: none; // axes borders in a composited env
1554
border-radius: $material_radius;
1555
}
1556
menuitem {
1558
transition: background-color $shorter_duration $deceleration_curve;
1559
min-height: 20px;
1560
min-width: 40px;
1561
padding: 4px 8px;
1562
font: initial;
1563
text-shadow: none;
1564
&:hover {
1566
transition: none;
1567
background-color: $divider_color;
1568
}
1569
&:disabled { color: $disabled_fg_color; }
1571
// submenu indicators
1573
arrow {
1574
min-height: 16px;
1575
min-width: 16px;
1576
&:dir(ltr) {
1578
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1579
margin-left: 8px;
1580
}
1581
&:dir(rtl) {
1583
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1584
margin-right: 8px;
1585
}
1586
}
1587
// avoids labels color being overridden, see
1589
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1590
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1591
}
1592
// overflow arrows
1594
> arrow {
1595
min-height: 16px;
1596
min-width: 16px;
1597
padding: 4px;
1598
background-color: $surface_color;
1599
color: $secondary_fg_color;
1600
&.top {
1602
margin-top: -4px;
1603
border-bottom: 1px solid $border_color;
1604
border-radius: $material_radius $material_radius 0 0;
1605
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1606
}
1607
&.bottom {
1609
margin-top: 4px * 2;
1610
margin-bottom: -4px * 3;
1611
border-top: 1px solid $border_color;
1612
border-radius: 0 0 $material_radius $material_radius;
1613
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1614
}
1615
&:hover {
1617
background-image: image($divider_color);
1618
color: $fg_color;
1619
}
1620
&:disabled {
1622
border-color: transparent;
1623
background-color: transparent;
1624
color: transparent;
1625
// color: $disabled_secondary_fg_color;
1626
}
1627
}
1628
separator { margin: 4px 0; }
1630
}
1631
menuitem {
1633
accelerator { color: $secondary_fg_color; }
1634
&:disabled accelerator { color: $disabled_secondary_fg_color; }
1636
}
1637
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1639
// Electron/Atom render all translucent colors in opaque colors.
1640
// It's a very critical issue for this theme and should be fixed by upstream...
1641
.popup:not(.csd) menu {
1642
menuitem {
1643
color: $opaque_fg_color;
1644
&:hover { background-color: $opaque_divider_color; }
1646
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1648
}
1649
// FIXME: not working this
1651
accelerator { color: $opaque_secondary_fg_color; }
1652
}
1653
/************
1656
* Popovers *
1657
************/
1658
popover.background {
1659
transition: $shadow_transition;
1660
padding: 2px;
1661
box-shadow: $shadow_2; // TODO: this should really have a highlight
1662
background-color: $surface_color;
1663
&:backdrop { box-shadow: $shadow_1; }
1665
&, .csd & {
1667
border-style: solid;
1668
border-width: 1px;
1669
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1670
border-radius: $material_radius + 1px;
1671
}
1672
> stack { margin: -4px; } // remove extra padding from menu style popovers
1674
> toolbar { margin: -2px; }
1676
> list,
1678
> .view,
1679
> toolbar {
1680
border-style: none;
1681
box-shadow: none;
1682
background-color: transparent;
1683
}
1684
// FIXME: Use the popover color instead of transparent as a workaround for .view
1686
list,
1687
.view:not(:selected),
1688
toolbar { background-color: $surface_color; }
1689
// &.touch-selection,
1691
// &.magnifier,
1692
// &.osd { @extend %osd; }
1693
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1695
&.menu button,
1697
button.model {
1698
@extend %simple_flat_button;
1699
min-height: 32px;
1701
padding: 0 8px;
1702
border-radius: $material_radius;
1703
&:checked { @extend %selected_items; }
1705
}
1706
separator { margin: 4px 0; }
1708
list separator { margin: 0; }
1710
}
1711
/*************
1713
* Notebooks *
1714
*************/
1715
notebook {
1716
frame > paned > & > header,
1717
&.frame > header { background-color: $alt_base_color; }
1718
&:focus tab:checked {
1720
box-shadow: inset 0 0 0 9999px rgba($primary_color, 0.12);
1721
outline: none;
1722
}
1723
> header {
1725
border-width: 1px;
1726
border-color: $border_color;
1727
background-color: $bg_color;
1728
background-clip: border-box;
1729
&.top {
1731
border-bottom-style: solid;
1732
> tabs {
1734
margin-bottom: -1px;
1735
> tab {
1737
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1738
&:checked { border-image-source: linear-gradient(to top, $primary_color 2px, $border_color 2px); }
1740
&.reorderable-page { border-image-width: 0 1px 2px; }
1742
}
1743
}
1744
}
1745
&.bottom {
1747
border-top-style: solid;
1748
> tabs {
1750
margin-top: -1px;
1751
> tab {
1753
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1754
&:checked { border-image-source: linear-gradient(to bottom, $primary_color 2px, $border_color 2px); }
1756
&.reorderable-page { border-image-width: 2px 1px 0; }
1758
}
1759
}
1760
}
1761
&.left {
1763
border-right-style: solid;
1764
> tabs {
1766
margin-right: -1px;
1767
> tab {
1769
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1770
&:checked { border-image-source: linear-gradient(to left, $primary_color 2px, $border_color 2px); }
1772
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1774
}
1775
}
1776
}
1777
&.right {
1779
border-left-style: solid;
1780
> tabs {
1782
margin-left: -1px;
1783
> tab {
1785
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1786
&:checked { border-image-source: linear-gradient(to right, $primary_color 2px, $border_color 2px); }
1788
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1790
}
1791
}
1792
}
1793
&.top > tabs > arrow {
1795
@extend %notebook_vert_arrows;
1796
border-top-style: none;
1798
}
1799
&.bottom > tabs > arrow {
1801
@extend %notebook_vert_arrows;
1802
border-bottom-style: none;
1804
}
1805
@at-root %notebook_vert_arrows {
1807
padding-left: 4px;
1808
padding-right: 4px;
1809
&.down {
1811
margin-left: -8px;
1812
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1813
}
1814
&.up {
1816
margin-right: -8px;
1817
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1818
}
1819
}
1820
&.left > tabs > arrow {
1822
@extend %notebook_horz_arrows;
1823
border-left-style: none;
1825
}
1826
&.right > tabs > arrow {
1828
@extend %notebook_horz_arrows;
1829
border-right-style: none;
1831
}
1832
@at-root %notebook_horz_arrows {
1834
padding-top: 4px;
1835
padding-bottom: 4px;
1836
&.down {
1838
margin-top: -8px;
1839
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1840
}
1841
&.up {
1843
margin-bottom: -8px;
1844
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1845
}
1846
}
1847
> tabs > arrow {
1849
@extend %simple_flat_button;
1850
min-height: 16px;
1852
min-width: 16px;
1853
border-radius: 0;
1854
}
1855
tab {
1857
transition: $shorter_transition,
1858
background-size 0,
1859
background-image 0;
1860
min-height: $small_size;
1861
min-width: $small_size;
1862
padding: $container_padding 12px;
1863
outline-offset: -6px;
1865
border-width: 1px; // for reorderable tabs
1867
border-color: transparent; //
1868
background-image: radial-gradient(circle farthest-corner at center,
1870
$primary_color 10%,
1871
transparent 0%);
1872
background-repeat: no-repeat;
1873
background-position: center;
1874
background-size: 0% 0%;
1875
background-clip: border-box;
1876
color: $secondary_fg_color;
1878
font-weight: 500;
1879
&:hover {
1881
background-color: $hover_overlay_color;
1882
color: $fg_color;
1883
}
1884
&:disabled { color: $disabled_secondary_fg_color; }
1886
&:checked {
1888
transition: $shorter_transition,
1889
background-size $longer_duration $deceleration_curve,
1890
background-image $longer_duration + $ripple_duration $deceleration_curve;
1891
background-color: transparent;
1892
background-image: radial-gradient(circle farthest-corner at center,
1893
transparent 10%,
1894
transparent 0%);
1895
background-size: 1000% 1000%;
1896
background-clip: padding-box;
1897
color: $fg_color;
1898
&:disabled { color: $disabled_fg_color; }
1900
&.reorderable-page {
1902
border-color: $border_color;
1903
background-color: $base_color;
1904
}
1905
}
1906
// colors the button like the label, overridden otherwise
1908
button.flat {
1909
@extend %small_button;
1910
&:last-child {
1912
margin-left: $container_padding;
1913
margin-right: $container_padding - 12px;
1914
}
1915
&:first-child {
1917
margin-left: $container_padding - 12px;
1918
margin-right: $container_padding;
1919
}
1920
}
1921
}
1922
&.top,
1924
&.bottom {
1925
tabs {
1926
padding-left: 8px;
1927
padding-right: 8px;
1928
&:not(:only-child) {
1930
&:first-child { margin-left: 0; }
1931
&:last-child { margin-right: 0; }
1933
}
1934
tab.reorderable-page { border-style: none solid; }
1936
}
1937
}
1938
&.left,
1940
&.right {
1941
tabs {
1942
padding-top: 8px;
1943
padding-bottom: 8px;
1944
&:not(:only-child) {
1946
&:first-child { margin-top: 0; }
1947
&:last-child { margin-bottom: 0; }
1949
}
1950
tab.reorderable-page { border-style: solid none; }
1952
}
1953
}
1954
}
1955
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1957
background-color: $base_color;
1958
}
1959
}
1960
/**************
1963
* Scrollbars *
1964
**************/
1965
scrollbar {
1966
$_slider_min_length: 24px;
1967
// disable steppers
1969
@at-root * {
1970
-GtkScrollbar-has-backward-stepper: false;
1971
-GtkScrollbar-has-forward-stepper: false;
1972
}
1973
transition: $shorter_transition;
1975
background-color: $base_color;
1976
background-clip: $extra_background_clip;
1977
// scrollbar border
1979
&.top { border-bottom: 1px solid $border_color; }
1980
&.bottom { border-top: 1px solid $border_color; }
1981
&.left { border-right: 1px solid $border_color; }
1982
&.right { border-left: 1px solid $border_color; }
1983
// slider
1985
slider {
1986
transition: $shorter_transition, margin 0, border-width 0;
1987
min-width: 8px;
1988
min-height: 8px;
1989
border: 4px solid transparent;
1990
border-radius: $circular_radius;
1991
background-clip: padding-box;
1992
background-color: $disabled_fg_color;
1993
&:hover { background-color: $secondary_fg_color; }
1995
&:active { background-color: $fg_color; }
1997
&:disabled { background-color: $disabled_secondary_fg_color; }
1999
}
2000
&.fine-tune {
2002
slider {
2003
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
2004
min-width: 4px;
2005
min-height: 4px;
2006
}
2007
&.horizontal slider { margin: 2px 0; }
2009
&.vertical slider { margin: 0 2px; }
2011
}
2012
&.overlay-indicator {
2014
&:not(.dragging):not(.hovering) {
2015
border-color: transparent;
2016
background-color: transparent;
2017
slider {
2019
min-width: 4px;
2020
min-height: 4px;
2021
margin: 4px - 1px;
2022
border: 1px solid rgba($base_color, 0.3);
2023
}
2024
button {
2026
min-width: 4px;
2027
min-height: 4px;
2028
margin: 4px - 1px;
2029
border: 1px solid rgba($base_color, 0.3);
2030
border-radius: $circular_radius;
2031
background-color: $disabled_fg_color;
2032
background-clip: padding-box;
2033
-gtk-icon-source: none;
2034
&:disabled { background-color: $disabled_secondary_fg_color; }
2036
}
2037
&.horizontal {
2039
slider { min-width: $_slider_min_length; }
2040
button { min-width: 8px; }
2042
}
2043
&.vertical {
2045
slider { min-height: $_slider_min_length; }
2046
button { min-height: 8px; }
2048
}
2049
}
2050
&.dragging,
2052
&.hovering { background-color: rgba($base_color, 0.9); }
2053
}
2054
&.horizontal slider { min-width: $_slider_min_length; }
2056
&.vertical slider { min-height: $_slider_min_length; }
2058
// button styling
2060
button {
2061
@extend %simple_flat_button;
2062
min-width: 16px;
2064
min-height: 16px;
2065
padding: 0;
2066
border-radius: 0;
2067
}
2068
// button icons
2070
&.vertical {
2071
button {
2072
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2073
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2075
}
2076
}
2077
&.horizontal {
2079
button {
2080
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2081
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2083
}
2084
}
2085
}
2086
/**********
2089
* Switch *
2090
**********/
2091
switch {
2092
transition: all $shorter_duration $deceleration_curve;
2093
margin: $container_padding 0;
2094
padding: 0 2px;
2095
border: 5px solid transparent;
2096
border-radius: $circular_radius;
2097
background-color: $track_color;
2098
background-clip: padding-box;
2099
font-size: 0;
2100
&:checked { background-color: rgba($primary_color, 0.5); }
2102
&:disabled { opacity: 0.5; }
2104
slider {
2106
transition: all $shorter_duration $deceleration_curve;
2107
min-width: 20px;
2108
min-height: 20px;
2109
margin: -3px -2px;
2110
border-radius: $circular_radius;
2111
box-shadow: 0 0 0 10px transparent, $shadow_1;
2112
background-color: $surface_color;
2113
}
2114
&:hover slider { box-shadow: 0 0 0 10px $hover_overlay_color, $shadow_1; }
2116
&:focus slider { box-shadow: 0 0 0 10px $focus_overlay_color, $shadow_1; }
2118
&:focus:hover slider { box-shadow: 0 0 0 10px $hover_focus_overlay_color, $shadow_1; }
2120
&:checked slider {
2122
background-color: $primary_color;
2123
color: $primary_color;
2124
}
2125
row:selected & {
2127
}
2128
}
2129
/*************************
2132
* Check and Radio items *
2133
*************************/
2134
// draw regular check and radio items using our PNG assets
2135
// all assets are rendered from assets.svg. never add pngs directly
2136
// selection-mode
2138
.view.content-view.check:not(list),
2139
.content-view .tile check:not(list) {
2140
min-height: 40px;
2141
min-width: 40px;
2142
margin: 0;
2143
padding: 0;
2144
box-shadow: none;
2145
background-color: transparent;
2146
background-image: none;
2147
-gtk-icon-shadow: $shadow_1;
2148
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2150
@each $s, $as in ('', '-unchecked'),
2152
(':checked', '-checked') {
2153
&#{$s} {
2154
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2155
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2156
}
2157
}
2158
}
2159
checkbutton,
2161
radiobutton {
2162
outline: none;
2163
}
2164
checkbutton.text-button,
2166
radiobutton.text-button {
2167
// this is for a nice focus on check and radios text
2168
padding: 2px;
2169
label:not(:only-child) { margin: 0 4px; }
2171
}
2172
$check_radio_size: 40px;
2174
check,
2176
radio {
2177
min-height: 24px;
2178
min-width: 24px;
2179
margin: -($check_radio_size - 24px) / 2;
2180
padding: ($check_radio_size - 24px) / 2;
2181
@extend %simple_flat_button;
2183
@extend %circular_button;
2185
&:hover { box-shadow: inset 0 0 0 9999px $hover_overlay_color; }
2187
&:focus { box-shadow: inset 0 0 0 9999px $focus_overlay_color; }
2189
&:focus:hover { box-shadow: inset 0 0 0 9999px $hover_focus_overlay_color; }
2191
&:checked, &:indeterminate {
2193
color: $primary_color;
2194
&:disabled { color: $disabled_secondary_fg_color; }
2196
}
2197
// &:only-child { margin: -12px; }
2199
popover modelbutton.flat & {
2201
&, &:hover, &:focus, &:focus:hover, &:active, &:disabled {
2202
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2203
box-shadow: none;
2204
background-image: none;
2205
}
2206
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2208
&.left:dir(rtl) {
2210
margin-left: -12px;
2211
margin-right: -4px;
2212
}
2213
&.right:dir(ltr) {
2215
margin-left: -4px;
2216
margin-right: -12px;
2217
}
2218
}
2219
menu menuitem & {
2221
transition: none;
2222
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2223
padding: 0;
2224
&:dir(ltr) { margin-right: 8px; }
2226
&:dir(rtl) { margin-left: 8px; }
2228
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2230
&, &:hover, &:disabled {
2232
box-shadow: none;
2233
// color: inherit;
2234
}
2235
}
2236
}
2237
%check,
2239
check {
2240
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2241
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2243
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2245
}
2246
%radio,
2248
radio {
2249
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2250
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2252
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2254
border-image-slice: $check_radio_size / 2px;
2256
border-image-width: $check_radio_size / 2;
2257
$radio_indicator: 10px / $check_radio_size / 2;
2259
& {
2261
border-image-source: -gtk-gradient(radial,
2262
center center, 0,
2263
center center, 0.001,
2264
to($primary_color),
2265
to(transparent));
2266
}
2267
&:checked:not(:indeterminate) {
2269
border-image-source: -gtk-gradient(radial,
2270
center center, 0,
2271
center center, $radio_indicator,
2272
to($primary_color),
2273
to(transparent));
2274
}
2275
&:checked:not(:indeterminate):disabled {
2277
border-image-source: -gtk-gradient(radial,
2278
center center, 0,
2279
center center, $radio_indicator,
2280
to($disabled_secondary_fg_color),
2281
to(transparent));
2282
}
2283
}
2284
%small_check,
2286
menu menuitem check {
2287
& {
2288
min-height: 16px;
2289
min-width: 16px;
2290
border-radius: $material_radius;
2291
-gtk-outline-radius: $material_radius;
2292
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2293
}
2294
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2296
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2298
}
2299
%small_radio,
2301
menu menuitem radio {
2302
& {
2303
min-height: 16px;
2304
min-width: 16px;
2305
border-image: none;
2306
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2307
}
2308
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2310
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2312
}
2313
// ANIMATION:
2315
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2316
// the transformation is set on the active state and it get reset on the checked state.
2317
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2318
treeview.view check,
2320
treeview.view radio {
2321
padding: 0;
2322
&:hover, &:selected {
2324
box-shadow: none;
2325
background-color: transparent;
2326
}
2327
& {
2329
color: $secondary_fg_color;
2330
&:hover, &:active { color: $fg_color; }
2332
&:disabled { color: $disabled_secondary_fg_color; }
2334
&:checked, &:indeterminate { color: $primary_color; }
2336
&:checked:disabled, &:indeterminate:disabled { color: $disabled_secondary_fg_color; }
2338
}
2339
}
2340
treeview.view radio:checked {
2342
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2343
border-image: none;
2344
}
2345
/************
2348
* GtkScale *
2349
************/
2350
scale {
2351
// sizing
2352
$_marks_length: 8px;
2353
$_marks_distance: 7px;
2354
$trough_size: 2px;
2356
$finetune_trough_size: 4px;
2357
$slider_size: 32px;
2359
$slider_margin: -($slider_size - $trough_size) / 2;
2361
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2362
$color_slider_margin: -($slider_size) * 3 / 4;
2364
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2365
min-height: $trough_size;
2367
min-width: $trough_size;
2368
&.horizontal { padding: ($medium_size - $trough_size) / 2 12px; }
2370
&.vertical { padding: 12px ($medium_size - $trough_size) / 2; }
2372
// the slider is inside the trough, so to have make it bigger there's a negative margin
2374
slider {
2375
min-height: $slider_size;
2376
min-width: $slider_size;
2377
margin: $slider_margin;
2378
}
2379
// click-and-hold the slider to activate
2381
&.fine-tune {
2382
&.horizontal {
2383
min-height: $finetune_trough_size;
2384
padding-top: ($medium_size - $finetune_trough_size) / 2;
2385
padding-bottom: ($medium_size - $finetune_trough_size) / 2;
2386
}
2387
&.vertical {
2389
min-width: $finetune_trough_size;
2390
padding-left: ($medium_size - $finetune_trough_size) / 2;
2391
padding-right: ($medium_size - $finetune_trough_size) / 2;
2392
}
2393
// to make the trough grow in fine-tune mode
2395
slider { margin: $finetune_slider_margin; }
2396
}
2397
// the backing bit
2399
trough {
2400
transition: background-color $shorter_duration $deceleration_curve;
2401
outline: none;
2402
background-color: $track_color;
2403
&:disabled { background-color: $divider_color; }
2405
}
2406
// the colored part of the backing bit
2408
highlight {
2409
transition: background-color $shorter_duration $deceleration_curve;
2410
background-color: $primary_color;
2411
&:disabled { background-color: transparent; }
2413
}
2414
// this is another differently styled part of the backing bit, the most relevant use case is for example
2416
// in media player to indicate how much video stream as been cached
2417
fill {
2418
transition: background-color $shorter_duration $deceleration_curve;
2419
background-color: $track_color;
2420
&:disabled { background-color: transparent; }
2422
}
2423
slider {
2425
transition: background-color $shorter_duration $deceleration_curve,
2426
background-size $ripple_duration $deceleration_curve,
2427
background-image $ripple_opacity_duration $deceleration_curve;
2428
background-repeat: no-repeat;
2429
background-position: center;
2430
background-size: auto, 1000% 1000%;
2431
border-radius: 50%;
2432
color: transparent;
2433
@each $s, $as in ('', ''),
2435
(':disabled', '-disabled') {
2436
&#{$s} {
2437
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2438
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2440
radial-gradient(circle farthest-corner at center,
2441
currentColor 10%,
2442
transparent 0%);
2443
}
2444
}
2445
&:hover { background-color: rgba($primary_color, 0.08); }
2447
&:focus { background-color: rgba($primary_color, 0.12); }
2449
&:focus:hover { background-color: rgba($primary_color, 0.16); }
2451
&:active {
2453
transition: background-color $shorter_duration $deceleration_curve,
2454
background-size 0,
2455
background-image 0;
2456
animation: scale_ripple_effect $longer_duration $deceleration_curve forwards;
2457
background-size: auto, 0% 0%;
2458
background-color: rgba($primary_color, 0.08);
2459
color: rgba($primary_color, 0.12);
2460
}
2461
}
2462
marks label,
2464
value { color: $secondary_fg_color; }
2465
marks {
2467
color: $track_color;
2468
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2470
(bottom, bottom, top),
2471
(left, left, right),
2472
(right, right, left) {
2473
&.#{$marks_class} {
2474
margin-#{$marks_margin}: $_marks_distance;
2475
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2476
}
2477
}
2478
}
2479
&.fine-tune marks {
2481
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2482
(bottom, bottom, top),
2483
(left, left, right),
2484
(right, right, left) {
2485
&.#{$marks_class} {
2486
margin-#{$marks_margin}: $_marks_distance - 1px;
2487
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2488
}
2489
}
2490
}
2491
&.horizontal {
2493
indicator {
2494
min-height: $_marks_length;
2495
min-width: 1px;
2496
}
2497
}
2498
&.vertical {
2500
indicator {
2501
min-height: 1px;
2502
min-width: $_marks_length;
2503
}
2504
}
2505
// *WARNING* scale with marks madness following
2507
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2509
('vertical', 'vert') {
2510
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2511
('marks-after', 'marks-after:not(.marks-before)') {
2512
&.#{$dir_class}.#{$marks_class} {
2513
slider {
2514
@each $state, $state_infix in ('', ''),
2515
(':disabled', '-disabled') {
2516
&#{$state} {
2517
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2518
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2520
radial-gradient(circle farthest-corner at center,
2521
currentColor 10%,
2522
transparent 0%);
2523
}
2524
}
2525
}
2526
}
2527
}
2528
}
2529
&.color {
2531
min-height: 0;
2532
min-width: 0;
2533
&.horizontal {
2535
padding: 0 0 12px 0;
2536
slider {
2538
&:dir(ltr), &:dir(rtl) { // specificity bump
2539
margin-bottom: $color_slider_margin;
2540
margin-top: $color_marks_slider_margin;
2541
}
2542
}
2543
}
2544
&.vertical {
2546
&:dir(ltr) {
2547
padding: 0 0 0 12px;
2548
slider {
2550
margin-left: $color_slider_margin;
2551
margin-right: $color_marks_slider_margin;
2552
}
2553
}
2554
&:dir(rtl) {
2556
padding: 0 12px 0 0;
2557
slider {
2559
margin-right: $color_slider_margin;
2560
margin-left: $color_marks_slider_margin;
2561
}
2562
}
2563
}
2564
}
2565
}
2566
/*****************
2569
* Progress bars *
2570
*****************/
2571
progressbar {
2572
// sizing
2573
&.horizontal {
2574
trough,
2575
progress { min-height: $bar_size; }
2576
}
2577
&.vertical {
2579
trough,
2580
progress { min-width: $bar_size; }
2581
}
2582
// FIXME: insensitive state missing and some other state should be set probably
2584
color: $secondary_fg_color;
2585
font-size: smaller;
2586
trough { background-color: $divider_color; }
2588
progress { background-color: $primary_color; }
2590
&.osd { // progressbar.osd used for epiphany page loading progress
2592
// min-width: $bar_size;
2593
// min-height: $bar_size;
2594
// background-color: transparent;
2595
// trough { background-color: transparent; }
2597
// progress { background-color: $primary_color; }
2599
}
2600
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2602
}
2603
/*************
2606
* Level Bar *
2607
*************/
2608
levelbar {
2609
&.horizontal {
2610
block { min-height: $bar_size; }
2611
&.discrete block {
2613
min-width: $medium_size;
2614
&:not(:last-child) { margin-right: 2px; }
2616
}
2617
}
2618
&.vertical {
2620
block { min-width: $bar_size; }
2621
&.discrete block {
2623
min-height: $medium_size;
2624
&:not(:last-child) { margin-bottom: 2px; }
2626
}
2627
}
2628
// imitate the entry style
2630
trough {
2631
// padding: 2px;
2632
// border-radius: $material_radius;
2633
// box-shadow: $shadow_1;
2634
// background-color: $base_color;
2635
// &:disabled { background-color: $alt_base_color; }
2637
}
2638
block {
2640
&.low { background-color: $warning_color; }
2641
&.high,
2643
&:not(.empty) { background-color: $primary_color; }
2644
&.full { background-color: $success_color; }
2646
&.empty { background-color: $divider_color; }
2648
}
2649
}
2650
/****************
2653
* Print dialog *
2654
*****************/
2655
printdialog {
2656
paper {
2657
padding: 0;
2658
border: 1px solid $border_color;
2659
background-color: $base_color;
2660
color: $fg_color;
2661
}
2662
.dialog-action-box { margin: 12px; }
2664
}
2665
/**********
2668
* Frames *
2669
**********/
2670
frame > border,
2671
.frame {
2672
margin: 0;
2673
padding: 0;
2674
border: 1px solid $border_color;
2675
border-radius: 0;
2676
box-shadow: none;
2677
&.flat { border-style: none; }
2679
}
2680
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2682
actionbar > revealer > box {
2684
padding: $container_padding;
2685
border-top: 1px solid $border_color;
2686
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2688
}
2689
scrolledwindow {
2691
viewport.frame { // avoid double borders when viewport inside scrolled window
2692
border-style: none;
2693
}
2694
// This is used when content is touch-dragged past boundaries.
2696
// draws a box on top of the content, the size changes programmatically.
2697
@at-root overshoot {
2698
&.top { @include overshoot(top); }
2699
&.bottom { @include overshoot(bottom); }
2701
&.left { @include overshoot(left); }
2703
&.right { @include overshoot(right); }
2705
}
2706
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2708
@at-root undershoot {
2709
&.top { @include undershoot(top); }
2710
&.bottom { @include undershoot(bottom); }
2712
&.left { @include undershoot(left); }
2714
&.right { @include undershoot(right); }
2716
}
2717
@at-root junction { // the small square between two scrollbars
2719
border-style: solid none none solid;
2720
border-width: 1px;
2721
border-color: $border_color;
2722
background-color: $base_color;
2723
&:dir(rtl) { border-style: solid solid none none; }
2725
}
2726
}
2727
// vbox and hbox separators
2729
separator {
2730
min-width: 1px;
2731
min-height: 1px;
2732
background-color: $border_color;
2733
}
2734
%hide_separators {
2736
min-width: 0;
2737
min-height: 0;
2738
background-color: transparent;
2739
}
2740
/*********
2743
* Lists *
2744
*********/
2745
list {
2746
border-color: $border_color;
2747
background-color: $base_color;
2748
row { padding: 2px; }
2750
}
2751
row {
2753
&.activatable {
2754
transition: $shorter_transition,
2755
background-size $ripple_duration $deceleration_curve,
2756
background-image $ripple_opacity_duration $deceleration_curve;
2757
box-shadow: inset 0 0 0 9999px transparent;
2758
background-image: radial-gradient(circle farthest-corner at center,
2759
transparent 10%,
2760
transparent 0%);
2761
background-repeat: no-repeat;
2762
background-position: center;
2763
background-size: 1000% 1000%;
2764
&:hover {
2766
transition: $shorter_transition,
2767
box-shadow 0,
2768
background-size $ripple_duration $deceleration_curve,
2769
background-image $ripple_opacity_duration $deceleration_curve;
2770
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2771
}
2772
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2774
&:active {
2775
transition: $shorter_transition,
2776
background-size 0,
2777
background-image 0;
2778
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2779
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2780
background-image: radial-gradient(circle farthest-corner at center,
2781
$active_overlay_color 10%,
2782
transparent 0%);
2783
background-size: 0% 0%;
2784
}
2785
}
2786
&:selected {
2788
@extend %selected_items;
2789
color: $primary_color; // for overlays
2790
image,
2792
label { color: $fg_color; }
2793
button image,
2795
button label { color: inherit; }
2796
}
2797
}
2798
/*********************
2801
* App Notifications *
2802
*********************/
2803
.app-notification {
2804
// @extend %osd;
2805
@extend toolbar.osd;
2807
margin: 8px;
2809
button { @extend %button_basic.flat; }
2811
&.frame,
2813
border { border-style: none; }
2814
}
2815
/*************
2818
* Expanders *
2819
*************/
2820
expander {
2821
title > arrow {
2822
transition: all $shorter_duration $deceleration_curve;
2823
min-width: 16px;
2824
min-height: 16px;
2825
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2826
-gtk-icon-transform: rotate(-90deg);
2827
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2829
&:checked { -gtk-icon-transform: unset; }
2831
color: $secondary_fg_color;
2833
&:hover, &:active { color: $fg_color; }
2835
&:disabled { color: $disabled_secondary_fg_color; }
2837
}
2838
}
2839
/************
2842
* Calendar *
2843
************/
2844
calendar {
2845
padding: 1px;
2846
border: 1px solid $border_color;
2847
color: $fg_color;
2848
&:disabled { color: $disabled_fg_color; }
2850
&:selected {
2852
@extend %selected_items;
2853
border-radius: $material_radius + 1px;
2855
}
2856
&.header {
2858
border-style: none none solid;
2859
border-radius: 0;
2860
}
2861
&.button { @extend %simple_flat_button; }
2863
&.highlight {
2865
color: $secondary_fg_color;
2866
font-weight: 500;
2867
}
2868
&:indeterminate { color: $disabled_secondary_fg_color; }
2870
}
2871
/***********
2874
* Dialogs *
2875
***********/
2876
messagedialog { // Message Dialog styling
2877
&.background { background-color: $surface_color; }
2878
.titlebar {
2880
min-height: $small_size;
2881
border-style: none;
2882
box-shadow: inset 0 1px $highlight_color;
2883
background-color: $surface_color;
2884
color: $fg_color;
2885
&:backdrop { color: $secondary_fg_color; }
2887
}
2888
&.csd { // rounded bottom border styling for csd version
2890
&.background {
2891
// bigger radius for better antialiasing
2892
border-bottom-left-radius: $material_radius;
2893
border-bottom-right-radius: $material_radius;
2894
}
2895
.dialog-action-area {
2897
margin-top: -$container_padding;
2898
padding: $container_padding;
2899
button {
2901
@extend %simple_flat_button;
2902
border-radius: $material_radius;
2903
&:not(:last-child) { margin-right: $container_padding; }
2905
&.suggested-action:not(:disabled) { color: $suggested_color; }
2907
&.destructive-action:not(:disabled) { color: $destructive_color; }
2909
}
2910
}
2911
}
2912
}
2913
filechooser {
2915
.dialog-action-box { border-top: 1px solid $border_color; }
2916
#pathbarbox {
2918
border-bottom: 1px solid $border_color;
2919
background-color: $bg_color;
2920
> stack > box > button { // The new folder button
2922
@extend %button_basic.flat;
2923
@extend %circular_button;
2924
}
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
}
2990
placessidebar {
2992
> viewport.frame { border-style: none; }
2993
list { padding: (4px - 3px) 0 4px; }
2995
row {
2997
// Needs overriding of the GtkListBoxRow padding
2998
min-height: 32px;
2999
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3000
padding: 0;
3001
border-radius: $material_radius;
3002
// Using margins/padding directly in the SidebarRow
3004
// will make the animation of the new bookmark row jump
3005
> revealer { padding: 0 8px; }
3006
&:selected { font-weight: 500; }
3008
&:disabled { color: $disabled_fg_color; }
3010
image.sidebar-icon {
3012
&:dir(ltr) { padding-right: 8px; }
3013
&:dir(rtl) { padding-left: 8px; }
3014
}
3015
label.sidebar-label {
3017
&:dir(ltr) { padding-right: 2px; }
3018
&:dir(rtl) { padding-left: 2px; }
3019
}
3020
&:selected image.sidebar-icon,
3022
&:selected label.sidebar-label { color: inherit; }
3023
@at-root button.sidebar-button {
3025
@extend %simple_flat_button;
3026
@extend %small_button;
3027
}
3028
&.sidebar-placeholder-row {
3030
min-height: 2px;
3031
padding: 0 8px;
3032
background-image: image($primary_color);
3033
background-clip: content-box;
3034
}
3035
&.sidebar-new-bookmark-row { color: $primary_color; }
3037
&:drop(active):not(:disabled) {
3039
box-shadow: inset 0 0 0 2px $primary_color;
3040
}
3041
}
3042
}
3043
placesview {
3045
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3046
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3048
// this selects the "connect to server" label
3050
> actionbar > revealer > box > label {
3051
padding-left: 8px;
3052
padding-right: 8px;
3053
}
3054
}
3055
/*********
3058
* Paned *
3059
*********/
3060
paned {
3061
> separator {
3062
min-width: 1px;
3063
min-height: 1px;
3064
-gtk-icon-source: none; // defeats the ugly default handle decoration
3065
border-style: none; // just to be sure
3066
background-color: transparent;
3067
// workaround, using background istead of a border since the border will get rendered twice (?)
3068
background-image: image($border_color);
3069
background-size: 1px 1px;
3070
background-clip: content-box; // avoids borders image being rendered twice (?)
3071
&.wide {
3073
min-width: 6px;
3074
min-height: 6px;
3075
background-color: $bg_color;
3076
background-image: image($border_color), image($border_color);
3077
background-size: 1px 1px, 1px 1px;
3078
}
3079
}
3080
&.horizontal > separator {
3082
background-repeat: repeat-y;
3083
&:dir(ltr) {
3085
margin: 0 -8px 0 0;
3086
padding: 0 8px 0 0;
3087
background-position: left;
3088
}
3089
&:dir(rtl) {
3091
margin: 0 0 0 -8px;
3092
padding: 0 0 0 8px;
3093
background-position: right;
3094
}
3095
&.wide {
3097
margin: 0;
3098
padding: 0;
3099
background-repeat: repeat-y, repeat-y;
3100
background-position: left, right;
3101
}
3102
}
3103
&.vertical > separator {
3105
margin: 0 0 -8px 0;
3106
padding: 0 0 8px 0;
3107
background-repeat: repeat-x;
3108
background-position: top;
3109
&.wide {
3111
margin: 0;
3112
padding: 0;
3113
background-repeat: repeat-x, repeat-x;
3114
background-position: bottom, top;
3115
}
3116
}
3117
}
3118
/**************
3121
* GtkInfoBar *
3122
**************/
3123
infobar {
3124
border-style: none;
3125
&.info { background-color: $info_bg_color; }
3127
&.question { background-color: $question_bg_color; }
3129
&.warning { background-color: $warning_bg_color; }
3131
&.error { background-color: $error_bg_color; }
3133
&.info,
3135
&.question,
3136
&.warning,
3137
&.error {
3138
> label, & { color: $inverse_fg_color; }
3139
button { @extend %button_selected; }
3141
selection {}
3143
*:link { @extend %link_selected; }
3145
}
3146
}
3147
/************
3150
* Tooltips *
3151
************/
3152
tooltip {
3153
&.background {
3154
// background-color needs to be set this way otherwise it gets drawn twice
3155
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3156
// box-shadow: inset 0 1px $highlight_color;
3157
background-color: $tooltip_bg_color;
3158
color: $tooltip_fg_color;
3159
}
3160
// padding: 4px; /* not working */
3162
border-radius: $material_radius;
3163
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3164
&:not(.csd):not(.unity-csd) {
3166
// border: 1px solid $border_color;
3167
// border-radius: $material_radius + 1px;
3168
// background-clip: $extra_background_clip;
3169
}
3170
// FIXME: we need a border or tooltips vanish on black background.
3172
decoration { background-color: transparent; }
3173
label {
3175
// tooltip label already seems to have 6px margins
3176
min-height: 32px - 6px * 2;
3177
padding: 0 8px - 6px;
3178
}
3179
* {
3181
// workaround for Eclipse.
3182
// do not include any declaration here.
3183
// padding: 0;
3184
// background-color: transparent;
3185
// color: inherit;
3186
}
3187
}
3188
/*****************
3191
* Color Chooser *
3192
*****************/
3193
colorswatch {
3194
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3195
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3196
// applied to the overlay box.
3197
// base color corners rounding
3199
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3200
// sports a bigger radius.
3201
// nth-child is needed by the custom color strip.
3202
&.top {
3204
border-top-left-radius: $material_radius + 0.5px;
3205
border-top-right-radius: $material_radius + 0.5px;
3206
overlay {
3208
border-top-left-radius: $material_radius;
3209
border-top-right-radius: $material_radius;
3210
}
3211
}
3212
&.bottom {
3214
border-bottom-left-radius: $material_radius + 0.5px;
3215
border-bottom-right-radius: $material_radius + 0.5px;
3216
overlay {
3218
border-bottom-left-radius: $material_radius;
3219
border-bottom-right-radius: $material_radius;
3220
}
3221
}
3222
&.left,
3224
&:first-child:not(.top) {
3225
border-top-left-radius: $material_radius + 0.5px;
3226
border-bottom-left-radius: $material_radius + 0.5px;
3227
overlay {
3229
border-top-left-radius: $material_radius;
3230
border-bottom-left-radius: $material_radius;
3231
}
3232
}
3233
&.right,
3235
&:last-child:not(.bottom) {
3236
border-top-right-radius: $material_radius + 0.5px;
3237
border-bottom-right-radius: $material_radius + 0.5px;
3238
overlay {
3240
border-top-right-radius: $material_radius;
3241
border-bottom-right-radius: $material_radius;
3242
}
3243
}
3244
&.dark { color: $light_fg_color; }
3246
&.light { color: $dark_fg_color; }
3248
&:drop(active) {
3250
box-shadow: none;
3251
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3253
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3255
}
3256
overlay {
3258
transition: $shadow_transition;
3259
box-shadow: $shadow_1;
3260
&:hover { box-shadow: $shadow_2; }
3262
}
3263
&#add-color-button {
3265
border-radius: $material_radius $material_radius 0 0;
3266
color: $light_fg_color;
3267
&:only-child { border-radius: $material_radius; }
3269
overlay {
3271
background-image: linear-gradient(to right,
3272
$error_bg_color 25%,
3273
$warning_bg_color 25%, $warning_bg_color 50%,
3274
$info_bg_color 50%, $info_bg_color 75%,
3275
$question_bg_color 75%);
3276
}
3277
}
3278
&:disabled {
3280
opacity: 0.5;
3281
overlay { box-shadow: none; }
3283
}
3284
row:selected & {
3286
}
3287
&#editor-color-sample {
3289
border-radius: $material_radius + 0.5px;
3290
overlay { border-radius: $material_radius; }
3292
// overlay:hover { box-shadow: $shadow_1; }
3294
}
3295
}
3296
// colorscale popup
3298
colorchooser .popover.osd {
3299
transition: $shadow_transition;
3300
border-radius: $material_radius;
3301
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3302
background-color: $surface_color;
3303
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3305
}
3306
/********
3309
* Misc *
3310
********/
3311
// content view (grid/list)
3312
.content-view {
3313
background-color: $bg_color;
3314
// &:hover { -gtk-icon-effect: highlight; }
3316
rubberband, .rubberband { @extend rubberband; }
3318
}
3319
.scale-popup {
3321
// .osd & { @extend %osd; }
3322
.osd & button.flat { // FIXME: quick hack, redo properly
3324
}
3325
button { // +/- buttons on GtkVolumeButton popup
3327
}
3328
}
3329
/**********************
3332
* Window Decorations *
3333
**********************/
3334
decoration {
3335
transition: $shadow_transition;
3336
border-radius: $material_radius $material_radius 0 0;
3337
box-shadow: $shadow_4, 0 16px 16px transparent;
3338
// FIXME rationalize shadows
3340
// this is used for the resize cursor area
3342
margin: 8px;
3343
&:backdrop {
3345
// the transparent shadow here is to enforce that the shadow extents don't
3346
// change when we go to backdrop, to prevent jumping windows.
3347
// The biggest shadow should be in the same order then in the active state
3348
// or the jumping will happen during the transition.
3349
box-shadow: $shadow_2, 0 16px 16px transparent;
3350
}
3351
.maximized &,
3353
.fullscreen &,
3354
.tiled &,
3355
.tiled-top &,
3356
.tiled-right &,
3357
.tiled-bottom &,
3358
.tiled-left & { border-radius: 0; }
3359
.popup & { box-shadow: none; }
3361
// server-side decorations as used by mutter
3363
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3364
.csd.popup & {
3366
border-radius: $material_radius;
3367
box-shadow: $shadow_2;
3368
}
3369
tooltip.csd & {
3371
border-radius: $material_radius;
3372
box-shadow: none;
3373
}
3374
messagedialog.csd & {
3376
border-radius: $material_radius;
3377
// box-shadow: $shadow_4, 0 16px 16px transparent;
3378
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3380
}
3381
.solid-csd & {
3383
margin: 0;
3384
// padding: 4px;
3385
border-radius: 0;
3386
box-shadow: none;
3387
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3388
background-color: $titlebar_bg_color;
3389
}
3390
}
3391
// Window Close button
3393
button.titlebutton {
3394
// @extend %simple_flat_button;
3395
@extend %circular_button;
3397
.selection-mode & {
3399
}
3400
}
3401
// catch all extend :)
3404
%selected_items {
3406
background-color: $selected_overlay_color;
3407
}
3408
.monospace { font-family: monospace; }
3410
/**********************
3413
* Touch Copy & Paste *
3414
**********************/
3415
// touch selection handlebars for the Popover.osd above
3416
cursor-handle {
3417
color: $primary_color;
3418
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
3419
&.top:dir(ltr), &.bottom:dir(rtl) {
3421
-gtk-icon-transform: rotate(90deg);
3422
}
3423
&.bottom:dir(ltr), &.top:dir(rtl) {
3425
-gtk-icon-transform: unset;
3426
}
3427
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3429
padding-top: 6px;
3430
-gtk-icon-transform: rotate(45deg);
3431
}
3432
}
3433
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3435
// shortcut window keys
3437
.keycap {
3438
min-width: 28px - 8px * 2;
3439
min-height: 28px - 2px;
3440
margin-top: 2px;
3441
padding-bottom: 2px;
3442
padding-left: 8px;
3443
padding-right: 8px;
3444
border: solid 1px $border_color;
3446
border-radius: $material_radius + 1px;
3447
box-shadow: inset 0 -2px $border_color;
3448
background-color: $surface_color;
3449
color: $fg_color;
3450
font-size: smaller;
3451
}
3452
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3454
transition: $shorter_transition;
3455
box-shadow: $shadow_1, inset 0 0 0 2px $primary_color;
3456
caret-color: $primary_color;
3457
}
3458
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3460
stackswitcher button.circular,
3462
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3463
min-width: $medium_size;
3464
min-height: $medium_size;
3465
padding: 0;
3466
}
3467
/*********
3470
* Emoji *
3471
*********/
3472
popover.emoji-picker {
3473
padding: 0;
3474
entry {
3476
border-bottom: 1px solid $border_color;
3477
border-radius: 0;
3478
box-shadow: none;
3479
background-color: transparent;
3480
}
3481
scrolledwindow { border-bottom: 1px solid $border_color; }
3483
}
3484
// mimic tab style
3486
button.emoji-section {
3487
margin-top: -1px;
3488
padding: 0 8px;
3489
min-width: 24px;
3490
min-height: $medium_size;
3491
border-radius: 0;
3492
outline-offset: -6px;
3493
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3495
&:checked {
3497
box-shadow: inset 0 2px $primary_color;
3498
background-color: transparent;
3499
}
3500
&:hover, &:active { background-color: $hover_overlay_color; }
3502
&:first-child { margin-left: 4px; }
3504
&:last-child { margin-right: 4px; }
3506
}
3507
.emoji {
3509
min-width: 3em;
3510
min-height: 3em;
3511
padding: 0 8px;
3512
// font-size: larger;
3513
widget {
3515
transition: $shorter_transition;
3516
border-radius: $material_radius;
3517
&:hover { background-color: $hover_overlay_color; }
3519
}
3520
}
3521