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
selection { @extend %selected_items; }
147
&:disabled {
149
color: $disabled_fg_color;
150
// selection { @extend %selected_items:disabled; }
152
headerbar &,
154
tab &,
155
button & { color: inherit; }
156
}
157
}
158
.dim-label { opacity: 0.6; }
160
assistant {
162
.sidebar {
163
padding: 4px 0;
164
// background-color: $base_color;
165
// border-top: 1px solid $border_color;
166
}
167
// &.csd .sidebar { border-top-style: none; }
169
.sidebar label {
171
min-height: $medium_size;
172
padding: 0 12px;
173
color: $disabled_fg_color;
174
font-weight: 500;
175
&.highlight { color: $fg_color; }
177
}
178
}
179
// %osd, .osd { opacity: 0.9; }
181
/*********************
184
* Spinner Animation *
185
*********************/
186
@keyframes spin {
187
to { -gtk-icon-transform: rotate(1turn); }
188
}
189
spinner {
191
background: none;
192
opacity: 0; // non spinning spinner makes no sense
193
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
194
&:checked {
196
opacity: 1;
197
animation: spin 1s linear infinite;
198
&:disabled { opacity: 0.5; }
200
}
201
}
202
/****************
205
* Text Entries *
206
****************/
207
%entry,
208
entry {
209
%entry_basic, & {
210
min-height: $medium_size;
211
padding: 0 8px;
212
border-radius: $material_radius $material_radius 0 0;
213
@include entry(normal);
215
&:focus { @include entry(focus); }
217
&:disabled { @include entry(disabled); }
219
&.flat {
221
min-height: 0;
222
padding: 2px;
223
border-radius: 0;
224
background-color: transparent;
225
}
226
image { // icons inside the entry
228
// @extend %simple_flat_button;
229
// min-height: $small_size;
231
// min-width: $small_size;
232
// border-radius: $circular_radius;
233
// -gtk-outline-radius: $circular_radius;
234
color: $secondary_fg_color;
235
&:hover, &:active { color: $fg_color; }
237
&:disabled { color: $disabled_fg_color; }
239
&.left {
241
margin-left: ($medium_size - 16px) / 2 - 8px;
242
margin-right: 6px;
243
}
244
&.right {
246
margin-left: 6px;
247
margin-right: ($medium_size - 16px) / 2 - 8px;
248
}
249
}
250
undershoot {
252
&.left { @include undershoot(left); }
253
&.right { @include undershoot(right); }
255
}
256
selection { @extend %selected_items; }
258
// entry error and warning style
260
@each $e_type, $e_color in (error, $error_color),
261
(warning, $warning_color) {
262
&.#{$e_type} {
263
@include entry(normal, $e_color);
264
&:focus { @include entry(focus, $e_color); }
266
&:disabled { @include entry(disabled, $e_color); }
268
}
269
}
270
&:drop(active) {
272
// box-shadow: inset 0 0 0 2px $primary_color;
273
}
274
.osd & {
276
}
277
}
278
progress {
280
margin: 2px (2px - 8px);
281
border-bottom: 2px solid $primary_color;
282
background-color: transparent;
283
}
284
// linked entries
286
.linked:not(.vertical) > & { @extend %linked_entry; }
287
// Vertically linked entries
289
.linked.vertical > & { @extend %linked_vertical_entry; }
290
}
291
%entry_raised {
293
border-radius: $material_radius;
294
@include entry(raised-normal);
296
&:focus { @include entry(raised-focus); }
298
&:disabled { @include entry(raised-disabled); }
300
// entry error and warning style
302
@each $e_type, $e_color in (error, $error_color),
303
(warning, $warning_color) {
304
&.#{$e_type} {
305
@include entry(raised-normal, $e_color);
306
&:focus { @include entry(raised-focus, $e_color); }
308
&:disabled { @include entry(raised-disabled, $e_color); }
310
image {
312
color: $inverse_secondary_fg_color;
313
&:hover, &:active { color: $inverse_fg_color; }
315
&:disabled { color: $inverse_disabled_fg_color; }
317
}
318
}
319
}
320
}
321
treeview entry {
323
&.flat, & {
324
background-color: $base_color;
325
&, &:focus {
327
border-image: none;
328
box-shadow: none;
329
}
330
}
331
}
332
.entry-tag {
334
margin: 2px;
335
border-radius: $circular_radius;
336
box-shadow: none;
337
background-color: $divider_color;
338
color: $fg_color;
339
&:hover { background-image: image($divider_color); }
341
// side margins: compensate the entry padding with a negative margin
343
// then the negative margin itself
344
:dir(ltr) & {
345
margin-left: 4px;
346
margin-right: 0;
347
padding-left: 12px;
348
padding-right: 8px;
349
}
350
:dir(rtl) & {
352
margin-left: 0;
353
margin-right: 4px;
354
padding-left: 8px;
355
padding-right: 12px;
356
}
357
// seems any sizing doesn't work
359
&.button {
360
box-shadow: none;
361
background-color: transparent;
362
&:not(:hover):not(:active) { color: $secondary_fg_color; }
364
}
365
}
366
/***********
369
* Buttons *
370
***********/
371
// stuff for .needs-attention
372
@keyframes needs_attention {
373
from {
374
background-image: -gtk-gradient(radial,
375
center center, 0,
376
center center, 0.001,
377
to($primary_color),
378
to(transparent));
379
}
380
to {
382
background-image: -gtk-gradient(radial,
383
center center, 0,
384
center center, 0.5,
385
to($primary_color),
386
to(transparent));
387
}
388
}
389
%button,
391
button {
392
@at-root %button_basic, & {
393
min-height: 24px;
394
min-width: 16px;
395
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
396
border-radius: $material_radius;
397
font-weight: 500;
398
@include button(normal);
400
&:hover { @include button(hover); }
402
&:active { @include button(active); }
404
&:disabled { @include button(disabled); }
406
&:checked { @include button(checked); }
408
&:checked:disabled { @include button(checked-disabled); }
410
@at-root %flat_button, &.flat {
412
@at-root %simple_flat_button, & {
413
@include button(flat-normal);
414
&:hover { @include button(flat-hover); }
416
&:active { @include button(flat-active); }
418
&:disabled { @include button(flat-disabled); }
420
}
421
&:checked { @include button(flat-checked); }
423
&:checked:disabled { @include button(flat-checked-disabled); }
425
}
426
&.text-button {
428
padding-left: 16px;
429
padding-right: 16px;
430
}
431
&.image-button {
433
min-width: 24px;
434
padding: ($medium_size - 24px) / 2;
435
@extend %circular_button;
437
}
438
&.text-button.image-button {
440
border-radius: $material_radius;
441
-gtk-outline-radius: $material_radius;
442
label {
444
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
445
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
447
}
448
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
450
}
451
.linked > & { @extend %linked; }
453
.linked.vertical > & { @extend %linked_vertical; }
455
.linked > &.flat,
457
.linked.vertical > &.flat {
458
border-radius: $material_radius;
459
&.image-button { @extend %circular_button; }
461
&.text-button.image-button {
463
border-radius: $material_radius;
464
-gtk-outline-radius: $material_radius;
465
}
466
}
467
&:drop(active) {
469
// box-shadow: inset 0 0 0 2px $primary_color;
470
}
471
}
472
@at-root %button_selected {
474
&.flat {
475
color: $inverse_secondary_fg_color;
476
&:hover, &:active { color: $inverse_fg_color; }
478
&:disabled { color: $inverse_disabled_secondary_fg_color; }
480
&:checked {
482
background-color: $inverse_track_color;
483
color: $inverse_fg_color;
484
}
485
&:checked:disabled {
487
background-color: $inverse_divider_color;
488
color: $inverse_disabled_fg_color;
489
}
490
}
491
}
492
// big standalone buttons like in Documents pager
494
&.osd {
495
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
496
&.image-button { padding: ($large_size - 24px) / 2; }
498
&:disabled { opacity: 0; }
500
}
501
// overlay / OSD style
503
@at-root %osd_button,
504
.osd & {
505
}
506
// Suggested and Destructive Action buttons
508
@each $b_type, $b_color in (suggested-action, $suggested_color),
509
(destructive-action, $destructive_color) {
510
&.#{$b_type} {
511
background-color: $b_color;
512
color: $inverse_fg_color;
513
&:disabled { @include button(disabled); }
515
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage(0.3)); }
517
&.flat {
519
background-color: transparent;
520
color: $b_color;
521
&:disabled { @include button(flat-disabled); }
523
&:checked { background-color: rgba($b_color, 0.3); }
525
}
526
.osd & {
528
}
529
}
530
}
531
.stack-switcher > & {
533
// to position the needs attention dot, padding is added to the button
534
// child, a label needs just lateral padding while an icon needs vertical
535
// padding added too.
536
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
538
> label {
540
padding-left: 6px; // label padding
541
padding-right: 6px; //
542
}
543
> image {
545
padding-left: 6px; // image padding
546
padding-right: 6px; //
547
padding-top: 3px; //
548
padding-bottom: 3px; //
549
}
550
&.text-button {
552
// compensate text-button paddings
553
padding-left: 16px - 6px;
554
padding-right: 16px - 6px;
555
}
556
&.image-button {
558
// we want image buttons to have a 1:1 aspect ratio, so compensation
559
// of the padding added to the GtkImage is needed
560
padding-left: ($medium_size - 16px) / 2 - 6px;
561
padding-right: ($medium_size - 16px) / 2 - 6px;
562
}
563
&.needs-attention {
565
> label,
566
> image { @extend %needs_attention; }
567
&:checked {
569
> label,
570
> image {
571
animation: none;
572
background-image: none;
573
}
574
}
575
}
576
}
577
// hide separators
579
&.font,
580
&.file { separator { @extend %hide_separators; }}
581
// &.font { > box > box > label { font-weight: bold; }}
583
// inline-toolbar buttons
585
.inline-toolbar & {
586
// @extend %button_basic.flat;
587
&:not(.text-button) { @extend %circular_button; }
589
}
590
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
592
@at-root %circular_button,
594
&.close,
595
&.circular { // The Bloody Circul Button
596
border-radius: $circular_radius;
597
-gtk-outline-radius: $circular_radius;
598
// label { padding: 0; }
600
}
601
@at-root %small_button {
603
min-height: $small_size;
604
min-width: $small_size;
605
padding: 0;
606
border-radius: $circular_radius;
607
-gtk-outline-radius: $circular_radius;
608
}
609
}
610
%needs_attention {
612
animation: needs_attention $longer_duration $deceleration_curve forwards;
613
background-repeat: no-repeat;
614
background-position: right 3px;
615
background-size: 6px 6px;
616
&:dir(rtl) { background-position: left 3px; }
618
}
619
// all the following is for the +|- buttons on inline toolbars, that way
621
// should really be deprecated...
622
.inline-toolbar toolbutton > button { // redefining the button look is
623
// needed since those are flat...
624
}
625
// More inline toolbar buttons
627
toolbar.inline-toolbar toolbutton {
628
// > button.flat { @extend %linked_middle; }
629
// &:first-child > button.flat { @extend %linked:first-child; }
631
// &:last-child > button.flat { @extend %linked:last-child; }
633
// &:only-child > button.flat { @extend %linked:only-child; }
635
}
636
%linked_middle {
638
border-radius: 0;
639
-gtk-outline-radius: $material_radius;
640
}
641
%linked {
643
@extend %linked_middle;
644
&:first-child {
646
border-top-left-radius: $material_radius;
647
border-bottom-left-radius: $material_radius;
648
}
649
&:last-child {
651
border-top-right-radius: $material_radius;
652
border-bottom-right-radius: $material_radius;
653
}
654
&:only-child {
656
border-radius: $material_radius;
657
}
658
}
659
%linked_vertical_middle {
661
border-radius: 0;
662
-gtk-outline-radius: $material_radius;
663
}
664
%linked_vertical {
666
@extend %linked_vertical_middle;
667
&:first-child {
669
border-top-left-radius: $material_radius;
670
border-top-right-radius: $material_radius;
671
}
672
&:last-child {
674
border-bottom-left-radius: $material_radius;
675
border-bottom-right-radius: $material_radius;
676
}
677
&:only-child {
679
border-radius: $material_radius;
680
}
681
}
682
%linked_entry {
684
@extend %linked_middle;
685
&:first-child {
687
border-radius: $material_radius 0 0 0;
688
}
689
&:last-child {
691
border-radius: 0 $material_radius 0 0;
692
}
693
&:only-child {
695
border-radius: $material_radius $material_radius 0 0;
696
}
697
}
698
%linked_vertical_entry {
700
@extend %linked_vertical_middle;
701
&:first-child {
703
border-radius: $material_radius $material_radius 0 0;
704
}
705
&:last-child {
707
border-radius: 0;
708
}
709
&:only-child {
711
border-radius: $material_radius $material_radius 0 0;
712
}
713
}
714
/* menu buttons */
716
modelbutton.flat,
717
.menuitem.button.flat {
718
min-height: $menuitem_size;
719
padding: 0 8px;
720
border-radius: $material_radius;
721
color: inherit;
722
@extend %simple_flat_button;
724
&:selected { @extend %selected_items; }
726
}
727
modelbutton.flat arrow {
729
background: none;
730
&:hover { background: none; }
732
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
734
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
736
}
737
button.color {
739
min-height: $small_size;
740
min-width: $small_size;
741
padding: $container_padding;
742
colorswatch:only-child {
744
// &, overlay { border-radius: 0; }
745
}
746
}
747
/*********
750
* Links *
751
*********/
752
*:link {
753
&, &:hover, &:active { color: $link_color; }
754
&:visited {
756
&, &:hover, &:active { color: $visited_link_color; }
757
}
758
@at-root %link_selected,
760
&:selected,
761
*:selected & { color: $inverse_fg_color; }
762
}
763
button:link,
765
button:visited {
766
@extend *:link;
767
> label { text-decoration-line: underline; }
769
}
770
/*****************
772
* GtkSpinButton *
773
*****************/
774
spinbutton {
775
&:not(.vertical) {
776
// in this horizontal configuration, the whole spinbutton
777
// behaves as the entry, so we extend the entry styling
778
// and nuke the style on the internal entry
779
@extend %entry;
780
padding: 0;
782
entry {
784
min-width: $large_size - 8px * 2;
785
// reset all the other props since the spinbutton node is styled here
786
margin: 0;
787
border-image: none;
788
border-radius: 0;
789
box-shadow: none;
790
background-color: transparent;
791
//
792
// This will help to simplify spinbutton's code, but unfortunatelly
793
// doesn't work properly in :dir(rtl). It needs z-index property.
794
//
795
// min-width: $large_size - 8px;
796
//
797
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
798
//
799
// &:dir(ltr) {
800
// margin-right: -$spinbuttons_width;
801
// padding-right: $spinbuttons_width;
802
// }
803
//
804
// &:dir(rtl) {
805
// margin-left: -$spinbuttons_width;
806
// padding-left: $spinbuttons_width;
807
// }
808
}
809
button {
811
// margin: $container_padding;
812
border: solid $container_padding transparent;
813
@extend %simple_flat_button;
815
@extend %small_button;
817
&.up:dir(ltr),
819
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
820
&.up:dir(rtl),
822
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
823
}
824
}
825
// OSD horizontal
827
.osd &:not(.vertical) {
828
button {
829
}
830
}
831
// Vertical
833
&.vertical {
834
// in the vertical configuration, we treat the spinbutton
835
// as a box, and tweak the style of the entry in the middle
836
// so that it's linked
837
// FIXME: this should not be set at all, but otherwise it gets the wrong
839
// color
840
&:disabled { color: $disabled_fg_color; }
841
&:drop(active) {
843
box-shadow: none;
844
}
845
entry {
847
@extend %entry_raised;
848
min-height: $medium_size;
850
min-width: $large_size;
851
padding: 0;
852
}
853
button {
855
min-height: $medium_size;
856
min-width: $large_size;
857
padding: 0;
858
@extend %simple_flat_button;
860
&.up { border-radius: $material_radius $material_radius 0 0; }
862
&.down { border-radius: 0 0 $material_radius $material_radius; }
864
}
865
}
866
// OSD vertical
868
.osd &.vertical button:first-child {
869
}
870
// Misc
872
treeview &:not(.vertical) {
873
min-height: 0;
874
border-style: none;
875
border-radius: 0;
876
entry {
878
min-height: 0;
879
padding: 1px 2px;
880
}
881
}
882
}
883
/**************
886
* ComboBoxes *
887
**************/
888
combobox {
889
arrow {
890
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
891
min-height: 16px;
892
min-width: 16px;
893
}
894
decoration,
896
button.combo:checked { transition: none; } // workaround for menuitem selection
897
button.combo cellview {
899
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
900
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
901
}
902
#gtk-combobox-popup-menu {
904
padding: 2px 0;
905
menuitem {
907
min-height: $medium_size - 2px * 2;
908
padding: 0 8px;
909
}
910
// overflow arrows
912
> arrow {
913
&.top { margin-top: -2px; }
914
&.bottom {
916
margin-top: 2px * 2;
917
margin-bottom: -2px * 3;
918
}
919
}
920
}
921
&.linked {
923
button:nth-child(2) {
924
&:dir(ltr) { @extend %linked_entry:last-child; }
925
&:dir(rtl) { @extend %linked_entry:first-child; }
926
}
927
}
928
> .linked > button {
930
@extend %linked_middle;
931
&:first-child { @extend %linked_entry:first-child; }
933
&:last-child { @extend %linked_entry:last-child; }
935
&:only-child { @extend %linked_entry:only-child; }
937
}
938
&:drop(active) { // FIXME: untested
940
box-shadow: none;
941
// button.combo { @extend %button_basic:drop(active); }
943
}
944
}
945
// the combo is a composite widget so the way we do button linking doesn't
947
// work, special case needed. See
948
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
949
.linked:not(.vertical) > combobox {
951
> box > button.combo { @extend %linked_middle; }
952
&:first-child > box > button.combo { @extend %linked_entry:first-child; }
954
&:last-child > box > button.combo { @extend %linked_entry:last-child; }
956
&:only-child > box > button.combo { @extend %linked_entry:only-child; }
958
}
959
.linked.vertical > combobox {
961
> box > button.combo { @extend %linked_vertical_middle; }
962
&:first-child > box > button.combo { @extend %linked_vertical_entry:first-child; }
964
&:last-child > box > button.combo { @extend %linked_vertical_entry:last-child; }
966
&:only-child > box > button.combo { @extend %linked_vertical_entry:only-child; }
968
}
969
button.combo {
971
border-radius: $material_radius $material_radius 0 0;
972
background-image: none;
973
font-weight: inherit;
974
@include entry(normal);
976
&:hover { box-shadow: inset 0 -1px $fg_color; }
978
&:checked { @include entry(focus); }
980
&:disabled { @include entry(disabled); }
982
}
983
/************
986
* Toolbars *
987
************/
988
toolbar {
989
-GtkWidget-window-dragging: true;
990
padding: 2px;
991
background-color: $bg_color;
992
button { @extend %button_basic.flat; }
994
// on OSD
996
.osd & { background-color: transparent; }
997
// stand-alone OSD toolbars
999
&.osd {
1000
transition: $shadow_transition;
1001
padding: $container_padding;
1002
border-radius: $material_radius;
1003
box-shadow: $shadow_2, inset 0 1px $highlight_color;
1004
background-color: $surface_color;
1005
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
1007
&.left,
1009
&.right,
1010
&.top,
1011
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
1012
}
1013
// toolbar separators
1015
&.horizontal > separator { margin: 2px; }
1016
&.vertical > separator { margin: 2px; }
1017
&:not(.inline-toolbar):not(.osd) {
1019
scale,
1020
entry,
1021
spinbutton,
1022
button { margin: 2px; }
1023
.linked entry,
1025
.linked spinbutton,
1026
.linked button {
1027
&:not(:first-child) { margin-left: 0; }
1028
&:not(:last-child) { margin-right: 0; }
1029
}
1030
spinbutton {
1032
entry,
1033
button { margin: 0; }
1034
}
1035
switch { margin: 2px + $container_padding 2px; }
1037
}
1038
}
1039
// searchbar, location-bar & inline-toolbar
1041
.inline-toolbar {
1042
padding: $container_padding;
1043
border-style: solid;
1044
border-width: 0 1px 1px;
1045
border-color: $border_color;
1046
background-color: $alt_base_color;
1047
}
1048
searchbar > revealer > box,
1050
.location-bar {
1051
padding: $container_padding;
1052
border-style: solid;
1053
border-width: 0 0 1px;
1054
border-color: $border_color;
1055
background-color: $bg_color;
1056
background-clip: border-box;
1057
}
1058
searchbar > revealer > box {
1060
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1061
margin: -6px;
1062
padding: $container_padding;
1063
}
1064
/***************
1067
* Header bars *
1068
***************/
1069
%titlebar,
1070
headerbar {
1071
transition: background-color $shorter_duration $deceleration_curve, color $shorter_duration $deceleration_curve;
1072
min-height: $large_size;
1073
padding: 0 $container_padding;
1074
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1075
background-color: $titlebar_bg_color;
1076
color: $titlebar_fg_color;
1077
&:disabled { color: $titlebar_disabled_fg_color; }
1079
&:backdrop {
1081
color: $titlebar_secondary_fg_color;
1082
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1084
}
1085
.title {
1087
padding: 0 12px;
1088
font-weight: bold;
1089
}
1090
.subtitle {
1092
padding: 0 12px;
1093
font-size: smaller;
1094
@extend .dim-label;
1096
}
1097
.linked:not(.vertical) > entry:not(.flat) { border-radius: $material_radius; }
1099
button:not(.suggested-action):not(.destructive-action) {
1101
@extend %button_basic.flat;
1102
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1104
$titlebar_indicator_color 0%,
1105
transparent 0%)
1106
0 0 0 / 0 0 0px;
1107
color: $titlebar_secondary_fg_color;
1108
&:hover, &:active { color: $titlebar_fg_color; }
1110
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1112
&:checked {
1114
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1115
$titlebar_indicator_color 100%,
1116
transparent 0%)
1117
0 0 2 / 0 0 2px;
1118
color: $titlebar_fg_color;
1119
&:disabled { color: $titlebar_disabled_fg_color; }
1121
&, &:disabled { background-color: transparent; }
1123
}
1124
&:backdrop {
1126
color: $titlebar_disabled_fg_color;
1127
&:hover, &:active { color: $titlebar_secondary_fg_color; }
1129
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1131
&:checked {
1133
color: $titlebar_secondary_fg_color;
1134
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1136
}
1137
}
1138
}
1139
button.suggested-action, button.destructive-action {
1141
&:disabled {
1142
background-color: $titlebar_fill_color;
1143
color: $titlebar_disabled_fg_color;
1144
}
1145
}
1146
&.selection-mode {
1148
// 0.00001s was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1149
// but let's keep it for backwards compatibility.
1150
transition: background-color 0.00001s $longer_duration, color $longer_duration $deceleration_curve;
1151
animation: header_ripple_effect $longer_duration $deceleration_curve;
1152
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1153
background-color: $primary_color;
1154
color: $inverse_fg_color;
1155
&:backdrop {
1157
color: $inverse_secondary_fg_color;
1158
}
1159
.subtitle:link { @extend *:link:selected; }
1161
button:not(.suggested-action):not(.destructive-action) {
1163
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1164
currentColor 0%,
1165
transparent 0%)
1166
0 0 0 / 0 0 0px;
1167
color: $inverse_fg_color;
1168
&:disabled { color: $inverse_disabled_fg_color; }
1170
&:checked {
1172
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1173
currentColor 100%,
1174
transparent 0%)
1175
0 0 2 / 0 0 2px;
1176
color: $inverse_fg_color;
1177
&:disabled { color: $inverse_disabled_fg_color; }
1179
}
1180
&:backdrop {
1182
color: $inverse_secondary_fg_color;
1183
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1185
&:checked {
1187
color: $inverse_secondary_fg_color;
1188
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1190
}
1191
}
1192
}
1193
.selection-menu {
1195
padding-left: 16px;
1196
padding-right: 16px;
1197
arrow { -GtkArrow-arrow-scaling: 1; }
1199
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1201
}
1202
}
1203
// squared corners when the window is maximized, tiled, or fullscreen
1205
.tiled &,
1206
.tiled-top &,
1207
.tiled-right &,
1208
.tiled-bottom &,
1209
.tiled-left &,
1210
.maximized &,
1211
.fullscreen & {
1212
border-radius: 0;
1213
box-shadow: $shadow_1;
1214
}
1215
&.default-decoration {
1217
min-height: $small_size;
1218
padding: $container_padding;
1219
box-shadow: inset 0 1px $titlebar_highlight_color;
1220
.tiled &,
1222
.maximized &,
1223
.fullscreen & { box-shadow: none; }
1224
button.titlebutton {
1226
min-height: $small_size;
1227
min-width: $small_size;
1228
margin: 0;
1229
padding: 0;
1230
}
1231
// workaround for non-animatable buttons
1233
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1234
}
1235
.solid-csd & {
1237
&:dir(rtl), &:dir(ltr) { // specificity bump
1238
// margin-left: -2px;
1239
// margin-right: -2px;
1240
// margin-top: -2px;
1241
// border-radius: 0;
1242
// box-shadow: inset 0 1px $titlebar_highlight_color;
1243
}
1244
}
1245
}
1246
headerbar {
1248
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1249
entry,
1250
spinbutton,
1251
// separator,
1252
button {
1253
margin-top: $container_padding;
1254
margin-bottom: $container_padding;
1255
}
1256
switch {
1258
margin-top: ($large_size - 24px) / 2;
1259
margin-bottom: ($large_size - 24px) / 2;
1260
}
1261
// reset button margins of the spinbutton
1263
spinbutton button {
1264
margin-top: 0;
1265
margin-bottom: 0;
1266
}
1267
// FIXME: This is a hacky workaround.
1269
.entry-tag {
1270
margin-top: 5px;
1271
margin-bottom: 5px;
1272
}
1273
}
1274
.background .titlebar {
1276
border-top-left-radius: $material_radius;
1277
border-top-right-radius: $material_radius;
1278
}
1279
.background.tiled .titlebar,
1281
.background.tiled-top .titlebar,
1282
.background.tiled-right .titlebar,
1283
.background.tiled-bottom .titlebar,
1284
.background.tiled-left .titlebar,
1285
.background.maximized .titlebar,
1286
.background.solid-csd .titlebar {
1287
border-top-left-radius: 0;
1288
border-top-right-radius: 0;
1289
}
1290
headerbar { // headerbar border rounding
1292
window separator:first-child + &, // tackles the paned container case
1293
window &:first-child { border-top-left-radius: $material_radius; }
1294
window &:last-child { border-top-right-radius: $material_radius; }
1296
window stack & { // tackles the stacked headerbars case
1298
&:first-child, &:last-child {
1299
border-top-left-radius: $material_radius;
1300
border-top-right-radius: $material_radius;
1301
}
1302
}
1303
window.tiled &,
1305
window.tiled-top &,
1306
window.tiled-right &,
1307
window.tiled-bottom &,
1308
window.tiled-left &,
1309
window.maximized &,
1310
window.fullscreen &,
1311
window.solid-csd & {
1312
&,
1313
&:first-child,
1314
&:last-child,
1315
&:only-child {
1316
border-top-left-radius: 0;
1317
border-top-right-radius: 0;
1318
}
1319
}
1320
}
1321
.titlebar:not(headerbar) {
1323
window.csd > & {
1324
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1325
padding: 0;
1326
background-color: transparent;
1327
background-image: none;
1328
border-style: none;
1329
box-shadow: none;
1330
}
1331
> separator {
1333
background-color: $titlebar_bg_color;
1334
background-image: image($border_color);
1335
}
1336
@extend %titlebar;
1338
}
1339
/************
1342
* Pathbars *
1343
************/
1344
%pathbar_button,
1345
.path-bar button {
1346
padding-left: ($medium_size - 24px) / 2;
1347
padding-right: ($medium_size - 24px) / 2;
1348
label:not(:only-child) {
1350
&:first-child { margin-left: 4px; }
1351
&:last-child { margin-right: 4px; }
1353
}
1354
&.slider-button {
1356
padding-left: (24px - 16px) / 2;
1357
padding-right: (24px - 16px) / 2;
1358
}
1359
:not(headerbar) & {
1361
@extend %flat_button;
1362
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1364
$primary_color 0%,
1365
transparent 0%)
1366
0 0 0 / 0 0 0px;
1367
border-radius: $material_radius;
1368
&:checked {
1370
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1371
$primary_color 100%,
1372
transparent 0%)
1373
0 0 2 / 0 0 2px;
1374
&, &:disabled { background-color: transparent; }
1376
}
1377
}
1378
}
1379
/**************
1382
* Tree Views *
1383
**************/
1384
treeview.view {
1385
@at-root * {
1386
-GtkTreeView-horizontal-separator: 4;
1387
-GtkTreeView-grid-line-width: 1;
1388
-GtkTreeView-grid-line-pattern: '';
1389
-GtkTreeView-tree-line-width: 1;
1390
-GtkTreeView-tree-line-pattern: '';
1391
-GtkTreeView-expander-size: 16;
1392
}
1393
border-left-color: $track_color; // this is actually the tree lines color,
1395
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1396
// FIXME: Avoid transparency background-color being slightly darker
1398
&:selected {
1399
background-color: $base_color;
1400
background-image: image($selected_overlay_color);
1401
}
1402
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1404
&:hover, &:active, &:selected { border-radius: 0; }
1406
&.separator {
1408
min-height: 1px + 2px * 2;
1409
color: $border_color;
1410
}
1411
&:drop(active) {
1413
border-style: solid none;
1414
border-width: 1px;
1415
border-color: $primary_color;
1416
&.after { border-top-style: none; }
1418
&.before { border-bottom-style: none; }
1420
}
1421
&.expander {
1423
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1424
-gtk-icon-transform: rotate(-90deg);
1425
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1427
&:checked { -gtk-icon-transform: unset; }
1429
color: $secondary_fg_color;
1431
&:hover, &:active { color: $fg_color; }
1433
&:disabled { color: $disabled_secondary_fg_color; }
1435
}
1436
&.progressbar { // progress bar in treeviews
1438
border-bottom: $bar_size solid $primary_color;
1439
box-shadow: none;
1440
background-color: transparent;
1441
}
1442
&.trough { // progress bar trough in treeviews
1444
border-bottom: $bar_size solid $divider_color;
1445
box-shadow: none;
1446
background-color: transparent;
1447
}
1448
header {
1450
button {
1451
@extend row.activatable;
1452
padding: 2px 6px;
1454
border-style: none solid solid none;
1455
border-width: 1px;
1456
border-color: $border_color;
1457
border-radius: 0;
1458
background-clip: border-box;
1459
&:not(:hover):not(:active) { color: $secondary_fg_color; }
1461
&, &:hover, &:active { box-shadow: none; }
1463
&, &:disabled { background-color: $base_color; }
1465
&:last-child { border-right-style: none; }
1467
}
1468
}
1469
button.dnd,
1471
header.button.dnd { // for treeview-like derive widgets
1472
padding: 2px 6px;
1473
border-style: none solid solid;
1474
border-width: 1px;
1475
border-color: $border_color;
1476
border-radius: 0;
1477
box-shadow: none;
1478
background-color: $base_color;
1479
background-clip: border-box;
1480
color: $primary_color;
1481
}
1482
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1484
}
1485
/*********
1488
* Menus *
1489
*********/
1490
menubar,
1491
.menubar {
1492
-GtkWidget-window-dragging: true;
1493
padding: 0;
1494
// box-shadow: inset 0 -1px $border_color;
1495
background-color: $titlebar_bg_color;
1496
> menuitem {
1498
transition: $shorter_transition;
1499
min-height: 20px;
1500
padding: 4px 8px;
1501
color: $titlebar_secondary_fg_color;
1502
&:hover { // Seems like it :hover even with keyboard focus
1504
transition: none;
1505
background-color: $titlebar_divider_color;
1506
color: $titlebar_fg_color;
1507
}
1508
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1510
label:disabled { color: inherit; } // to inherit the above color
1512
}
1513
}
1514
.csd.popup { background-color: transparent; }
1516
menu,
1518
.menu,
1519
.context-menu {
1520
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1521
padding: 4px 0;
1522
box-shadow: inset 0 1px $highlight_color;
1523
background-color: $surface_color;
1524
border: 1px solid $border_color; // adds borders in a non composited env
1525
.csd & {
1527
border: none; // axes borders in a composited env
1528
border-radius: $material_radius;
1529
}
1530
menuitem {
1532
transition: background-color $shorter_duration $deceleration_curve;
1533
min-height: 20px;
1534
min-width: 40px;
1535
padding: 4px 8px;
1536
font: initial;
1537
text-shadow: none;
1538
&:hover {
1540
transition: none;
1541
background-color: $divider_color;
1542
}
1543
&:disabled { color: $disabled_fg_color; }
1545
// submenu indicators
1547
arrow {
1548
min-height: 16px;
1549
min-width: 16px;
1550
&:dir(ltr) {
1552
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1553
margin-left: 8px;
1554
}
1555
&:dir(rtl) {
1557
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1558
margin-right: 8px;
1559
}
1560
}
1561
// avoids labels color being overridden, see
1563
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1564
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1565
}
1566
// overflow arrows
1568
> arrow {
1569
min-height: 16px;
1570
min-width: 16px;
1571
padding: 4px;
1572
background-color: $surface_color;
1573
color: $secondary_fg_color;
1574
&.top {
1576
margin-top: -4px;
1577
border-bottom: 1px solid $border_color;
1578
border-radius: $material_radius $material_radius 0 0;
1579
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1580
}
1581
&.bottom {
1583
margin-top: 4px * 2;
1584
margin-bottom: -4px * 3;
1585
border-top: 1px solid $border_color;
1586
border-radius: 0 0 $material_radius $material_radius;
1587
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1588
}
1589
&:hover {
1591
background-image: image($divider_color);
1592
color: $fg_color;
1593
}
1594
&:disabled {
1596
border-color: transparent;
1597
background-color: transparent;
1598
color: transparent;
1599
// color: $disabled_secondary_fg_color;
1600
}
1601
}
1602
separator { margin: 4px 0; }
1604
}
1605
menuitem {
1607
accelerator { color: $secondary_fg_color; }
1608
&:disabled accelerator { color: $disabled_secondary_fg_color; }
1610
}
1611
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1613
// Electron/Atom render all translucent colors in opaque colors.
1614
// It's a very critical issue for this theme and should be fixed by upstream...
1615
.popup:not(.csd) menu {
1616
menuitem {
1617
color: $opaque_fg_color;
1618
&:hover { background-color: $opaque_divider_color; }
1620
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1622
}
1623
// FIXME: not working this
1625
accelerator { color: $opaque_secondary_fg_color; }
1626
}
1627
/************
1630
* Popovers *
1631
************/
1632
popover.background {
1633
transition: $shadow_transition;
1634
padding: 2px;
1635
box-shadow: $shadow_2; // TODO: this should really have a highlight
1636
background-color: $surface_color;
1637
&:backdrop { box-shadow: $shadow_1; }
1639
&, .csd & {
1641
border-style: solid;
1642
border-width: 1px;
1643
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1644
border-radius: $material_radius + 1px;
1645
}
1646
> stack { margin: -4px; } // remove extra padding from menu style popovers
1648
> toolbar { margin: -2px; }
1650
> list,
1652
> .view,
1653
> toolbar {
1654
border-style: none;
1655
box-shadow: none;
1656
background-color: transparent;
1657
}
1658
// FIXME: Use the popover color instead of transparent as a workaround for .view
1660
list,
1661
.view:not(:selected),
1662
toolbar { background-color: $surface_color; }
1663
// &.touch-selection,
1665
// &.magnifier,
1666
// &.osd { @extend %osd; }
1667
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1669
&.menu button,
1671
button.model {
1672
@extend %simple_flat_button;
1673
min-height: 32px;
1675
padding: 0 8px;
1676
border-radius: $material_radius;
1677
&:checked { @extend %selected_items; }
1679
}
1680
separator { margin: 4px 0; }
1682
list separator { margin: 0; }
1684
}
1685
/*************
1687
* Notebooks *
1688
*************/
1689
notebook {
1690
frame > paned > & > header,
1691
&.frame > header { background-color: $alt_base_color; }
1692
&:focus tab:checked {
1694
box-shadow: inset 0 0 0 9999px rgba($primary_color, 0.12);
1695
outline: none;
1696
}
1697
> header {
1699
border-width: 1px;
1700
border-color: $border_color;
1701
background-color: $bg_color;
1702
background-clip: border-box;
1703
&.top {
1705
border-bottom-style: solid;
1706
> tabs {
1708
margin-bottom: -1px;
1709
> tab {
1711
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1712
&:checked { border-image-source: linear-gradient(to top, $primary_color 2px, $border_color 2px); }
1714
&.reorderable-page { border-image-width: 0 1px 2px; }
1716
}
1717
}
1718
}
1719
&.bottom {
1721
border-top-style: solid;
1722
> tabs {
1724
margin-top: -1px;
1725
> tab {
1727
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1728
&:checked { border-image-source: linear-gradient(to bottom, $primary_color 2px, $border_color 2px); }
1730
&.reorderable-page { border-image-width: 2px 1px 0; }
1732
}
1733
}
1734
}
1735
&.left {
1737
border-right-style: solid;
1738
> tabs {
1740
margin-right: -1px;
1741
> tab {
1743
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1744
&:checked { border-image-source: linear-gradient(to left, $primary_color 2px, $border_color 2px); }
1746
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1748
}
1749
}
1750
}
1751
&.right {
1753
border-left-style: solid;
1754
> tabs {
1756
margin-left: -1px;
1757
> tab {
1759
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1760
&:checked { border-image-source: linear-gradient(to right, $primary_color 2px, $border_color 2px); }
1762
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1764
}
1765
}
1766
}
1767
&.top > tabs > arrow {
1769
@extend %notebook_vert_arrows;
1770
border-top-style: none;
1772
}
1773
&.bottom > tabs > arrow {
1775
@extend %notebook_vert_arrows;
1776
border-bottom-style: none;
1778
}
1779
@at-root %notebook_vert_arrows {
1781
padding-left: 4px;
1782
padding-right: 4px;
1783
&.down {
1785
margin-left: -8px;
1786
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1787
}
1788
&.up {
1790
margin-right: -8px;
1791
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1792
}
1793
}
1794
&.left > tabs > arrow {
1796
@extend %notebook_horz_arrows;
1797
border-left-style: none;
1799
}
1800
&.right > tabs > arrow {
1802
@extend %notebook_horz_arrows;
1803
border-right-style: none;
1805
}
1806
@at-root %notebook_horz_arrows {
1808
padding-top: 4px;
1809
padding-bottom: 4px;
1810
&.down {
1812
margin-top: -8px;
1813
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1814
}
1815
&.up {
1817
margin-bottom: -8px;
1818
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1819
}
1820
}
1821
> tabs > arrow {
1823
@extend %simple_flat_button;
1824
min-height: 16px;
1826
min-width: 16px;
1827
border-radius: 0;
1828
}
1829
tab {
1831
transition: $shorter_transition,
1832
background-size 0,
1833
background-image 0;
1834
min-height: $small_size;
1835
min-width: $small_size;
1836
padding: $container_padding 12px;
1837
outline-offset: -6px;
1839
border-width: 1px; // for reorderable tabs
1841
border-color: transparent; //
1842
background-image: radial-gradient(circle farthest-corner at center,
1844
$primary_color 10%,
1845
transparent 0%);
1846
background-repeat: no-repeat;
1847
background-position: center;
1848
background-size: 0% 0%;
1849
background-clip: border-box;
1850
color: $secondary_fg_color;
1852
font-weight: 500;
1853
&:hover {
1855
background-color: $hover_overlay_color;
1856
color: $fg_color;
1857
}
1858
&:disabled { color: $disabled_secondary_fg_color; }
1860
&:checked {
1862
transition: $shorter_transition,
1863
background-size $longer_duration $deceleration_curve,
1864
background-image $longer_duration + $ripple_duration $deceleration_curve;
1865
background-color: transparent;
1866
background-image: radial-gradient(circle farthest-corner at center,
1867
transparent 10%,
1868
transparent 0%);
1869
background-size: 1000% 1000%;
1870
background-clip: padding-box;
1871
color: $fg_color;
1872
&:disabled { color: $disabled_fg_color; }
1874
&.reorderable-page {
1876
border-color: $border_color;
1877
background-color: $base_color;
1878
}
1879
}
1880
// colors the button like the label, overridden otherwise
1882
button.flat {
1883
@extend %small_button;
1884
&:last-child {
1886
margin-left: $container_padding;
1887
margin-right: $container_padding - 12px;
1888
}
1889
&:first-child {
1891
margin-left: $container_padding - 12px;
1892
margin-right: $container_padding;
1893
}
1894
}
1895
}
1896
&.top,
1898
&.bottom {
1899
tabs {
1900
padding-left: 8px;
1901
padding-right: 8px;
1902
&:not(:only-child) {
1904
&:first-child { margin-left: 0; }
1905
&:last-child { margin-right: 0; }
1907
}
1908
tab.reorderable-page { border-style: none solid; }
1910
}
1911
}
1912
&.left,
1914
&.right {
1915
tabs {
1916
padding-top: 8px;
1917
padding-bottom: 8px;
1918
&:not(:only-child) {
1920
&:first-child { margin-top: 0; }
1921
&:last-child { margin-bottom: 0; }
1923
}
1924
tab.reorderable-page { border-style: solid none; }
1926
}
1927
}
1928
}
1929
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1931
background-color: $base_color;
1932
}
1933
}
1934
/**************
1937
* Scrollbars *
1938
**************/
1939
scrollbar {
1940
$_slider_min_length: 24px;
1941
// disable steppers
1943
@at-root * {
1944
-GtkScrollbar-has-backward-stepper: false;
1945
-GtkScrollbar-has-forward-stepper: false;
1946
}
1947
transition: $shorter_transition;
1949
background-color: $base_color;
1950
background-clip: $extra_background_clip;
1951
// scrollbar border
1953
&.top { border-bottom: 1px solid $border_color; }
1954
&.bottom { border-top: 1px solid $border_color; }
1955
&.left { border-right: 1px solid $border_color; }
1956
&.right { border-left: 1px solid $border_color; }
1957
// slider
1959
slider {
1960
transition: $shorter_transition, margin 0, border-width 0;
1961
min-width: 8px;
1962
min-height: 8px;
1963
border: 4px solid transparent;
1964
border-radius: $circular_radius;
1965
background-clip: padding-box;
1966
background-color: $disabled_fg_color;
1967
&:hover { background-color: $secondary_fg_color; }
1969
&:active { background-color: $fg_color; }
1971
&:disabled { background-color: $disabled_secondary_fg_color; }
1973
}
1974
&.fine-tune {
1976
slider {
1977
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1978
min-width: 4px;
1979
min-height: 4px;
1980
}
1981
&.horizontal slider { margin: 2px 0; }
1983
&.vertical slider { margin: 0 2px; }
1985
}
1986
&.overlay-indicator {
1988
&:not(.dragging):not(.hovering) {
1989
border-color: transparent;
1990
background-color: transparent;
1991
slider {
1993
min-width: 4px;
1994
min-height: 4px;
1995
margin: 4px - 1px;
1996
border: 1px solid rgba($base_color, 0.3);
1997
}
1998
button {
2000
min-width: 4px;
2001
min-height: 4px;
2002
margin: 4px - 1px;
2003
border: 1px solid rgba($base_color, 0.3);
2004
border-radius: $circular_radius;
2005
background-color: $disabled_fg_color;
2006
background-clip: padding-box;
2007
-gtk-icon-source: none;
2008
&:disabled { background-color: $disabled_secondary_fg_color; }
2010
}
2011
&.horizontal {
2013
slider { min-width: $_slider_min_length; }
2014
button { min-width: 8px; }
2016
}
2017
&.vertical {
2019
slider { min-height: $_slider_min_length; }
2020
button { min-height: 8px; }
2022
}
2023
}
2024
&.dragging,
2026
&.hovering { background-color: rgba($base_color, 0.9); }
2027
}
2028
&.horizontal slider { min-width: $_slider_min_length; }
2030
&.vertical slider { min-height: $_slider_min_length; }
2032
// button styling
2034
button {
2035
@extend %simple_flat_button;
2036
min-width: 16px;
2038
min-height: 16px;
2039
padding: 0;
2040
border-radius: 0;
2041
}
2042
// button icons
2044
&.vertical {
2045
button {
2046
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2047
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2049
}
2050
}
2051
&.horizontal {
2053
button {
2054
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2055
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2057
}
2058
}
2059
}
2060
/**********
2063
* Switch *
2064
**********/
2065
switch {
2066
transition: all $shorter_duration $deceleration_curve;
2067
margin: $container_padding 0;
2068
padding: 0 2px;
2069
border: 5px solid transparent;
2070
border-radius: $circular_radius;
2071
background-color: $track_color;
2072
background-clip: padding-box;
2073
font-size: 0;
2074
&:checked { background-color: rgba($primary_color, 0.5); }
2076
&:disabled { opacity: 0.5; }
2078
slider {
2080
transition: all $shorter_duration $deceleration_curve;
2081
min-width: 20px;
2082
min-height: 20px;
2083
margin: -3px -2px;
2084
border-radius: $circular_radius;
2085
box-shadow: 0 0 0 10px transparent, $shadow_1;
2086
background-color: $surface_color;
2087
}
2088
&:hover slider { box-shadow: 0 0 0 10px $hover_overlay_color, $shadow_1; }
2090
&:focus slider { box-shadow: 0 0 0 10px $focus_overlay_color, $shadow_1; }
2092
&:focus:hover slider { box-shadow: 0 0 0 10px $hover_focus_overlay_color, $shadow_1; }
2094
&:checked slider {
2096
background-color: $primary_color;
2097
color: $primary_color;
2098
}
2099
row:selected & {
2101
}
2102
}
2103
/*************************
2106
* Check and Radio items *
2107
*************************/
2108
// draw regular check and radio items using our PNG assets
2109
// all assets are rendered from assets.svg. never add pngs directly
2110
// selection-mode
2112
.view.content-view.check:not(list),
2113
.content-view .tile check:not(list) {
2114
min-height: 40px;
2115
min-width: 40px;
2116
margin: 0;
2117
padding: 0;
2118
box-shadow: none;
2119
background-color: transparent;
2120
background-image: none;
2121
-gtk-icon-shadow: $shadow_1;
2122
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2124
@each $s, $as in ('', '-unchecked'),
2126
(':checked', '-checked') {
2127
&#{$s} {
2128
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2129
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2130
}
2131
}
2132
}
2133
checkbutton,
2135
radiobutton {
2136
outline: none;
2137
}
2138
checkbutton.text-button,
2140
radiobutton.text-button {
2141
// this is for a nice focus on check and radios text
2142
padding: 2px;
2143
label:not(:only-child) { margin: 0 4px; }
2145
}
2146
$check_radio_size: 40px;
2148
check,
2150
radio {
2151
min-height: 24px;
2152
min-width: 24px;
2153
margin: -($check_radio_size - 24px) / 2;
2154
padding: ($check_radio_size - 24px) / 2;
2155
@extend %simple_flat_button;
2157
@extend %circular_button;
2159
&:hover { box-shadow: inset 0 0 0 9999px $hover_overlay_color; }
2161
&:focus { box-shadow: inset 0 0 0 9999px $focus_overlay_color; }
2163
&:focus:hover { box-shadow: inset 0 0 0 9999px $hover_focus_overlay_color; }
2165
&:checked, &:indeterminate {
2167
color: $primary_color;
2168
&:disabled { color: $disabled_secondary_fg_color; }
2170
}
2171
// &:only-child { margin: -12px; }
2173
popover & {
2175
&, &:hover, &:focus, &:focus:hover, &:active, &:disabled {
2176
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2177
box-shadow: none;
2178
background-image: none;
2179
}
2180
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2182
&.left:dir(rtl) {
2184
margin-left: -12px;
2185
margin-right: -4px;
2186
}
2187
&.right:dir(ltr) {
2189
margin-left: -4px;
2190
margin-right: -12px;
2191
}
2192
}
2193
menu menuitem & {
2195
transition: none;
2196
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2197
padding: 0;
2198
&:dir(ltr) { margin-right: 8px; }
2200
&:dir(rtl) { margin-left: 8px; }
2202
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2204
&, &:hover, &:disabled {
2206
box-shadow: none;
2207
// color: inherit;
2208
}
2209
}
2210
}
2211
%check,
2213
check {
2214
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2215
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2217
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2219
}
2220
%radio,
2222
radio {
2223
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2224
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2226
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2228
border-image-slice: $check_radio_size / 2px;
2230
border-image-width: $check_radio_size / 2;
2231
$radio_indicator: 10px / $check_radio_size / 2;
2233
& {
2235
border-image-source: -gtk-gradient(radial,
2236
center center, 0,
2237
center center, 0.001,
2238
to($primary_color),
2239
to(transparent));
2240
}
2241
&:checked:not(:indeterminate) {
2243
border-image-source: -gtk-gradient(radial,
2244
center center, 0,
2245
center center, $radio_indicator,
2246
to($primary_color),
2247
to(transparent));
2248
}
2249
&:checked:not(:indeterminate):disabled {
2251
border-image-source: -gtk-gradient(radial,
2252
center center, 0,
2253
center center, $radio_indicator,
2254
to($disabled_secondary_fg_color),
2255
to(transparent));
2256
}
2257
}
2258
%small_check,
2260
menu menuitem check {
2261
& {
2262
min-height: 16px;
2263
min-width: 16px;
2264
border-radius: $material_radius;
2265
-gtk-outline-radius: $material_radius;
2266
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2267
}
2268
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2270
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2272
}
2273
%small_radio,
2275
menu menuitem radio {
2276
& {
2277
min-height: 16px;
2278
min-width: 16px;
2279
border-image: none;
2280
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2281
}
2282
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2284
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2286
}
2287
// ANIMATION:
2289
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2290
// the transformation is set on the active state and it get reset on the checked state.
2291
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2292
treeview.view check,
2294
treeview.view radio {
2295
padding: 0;
2296
&:hover, &:selected {
2298
box-shadow: none;
2299
background-color: transparent;
2300
}
2301
& {
2303
color: $secondary_fg_color;
2304
&:hover, &:active { color: $fg_color; }
2306
&:disabled { color: $disabled_secondary_fg_color; }
2308
&:checked, &:indeterminate { color: $primary_color; }
2310
&:checked:disabled, &:indeterminate:disabled { color: $disabled_secondary_fg_color; }
2312
}
2313
}
2314
treeview.view radio:checked {
2316
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2317
border-image: none;
2318
}
2319
/************
2322
* GtkScale *
2323
************/
2324
scale {
2325
// sizing
2326
$_marks_length: 8px;
2327
$_marks_distance: 7px;
2328
$trough_size: 2px;
2330
$finetune_trough_size: 4px;
2331
$slider_size: 32px;
2333
$slider_margin: -($slider_size - $trough_size) / 2;
2335
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2336
$color_slider_margin: -($slider_size) * 3 / 4;
2338
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2339
min-height: $trough_size;
2341
min-width: $trough_size;
2342
&.horizontal { padding: ($medium_size - $trough_size) / 2 12px; }
2344
&.vertical { padding: 12px ($medium_size - $trough_size) / 2; }
2346
// the slider is inside the trough, so to have make it bigger there's a negative margin
2348
slider {
2349
min-height: $slider_size;
2350
min-width: $slider_size;
2351
margin: $slider_margin;
2352
}
2353
// click-and-hold the slider to activate
2355
&.fine-tune {
2356
&.horizontal {
2357
min-height: $finetune_trough_size;
2358
padding-top: ($medium_size - $finetune_trough_size) / 2;
2359
padding-bottom: ($medium_size - $finetune_trough_size) / 2;
2360
}
2361
&.vertical {
2363
min-width: $finetune_trough_size;
2364
padding-left: ($medium_size - $finetune_trough_size) / 2;
2365
padding-right: ($medium_size - $finetune_trough_size) / 2;
2366
}
2367
// to make the trough grow in fine-tune mode
2369
slider { margin: $finetune_slider_margin; }
2370
}
2371
// the backing bit
2373
trough {
2374
transition: background-color $shorter_duration $deceleration_curve;
2375
outline: none;
2376
background-color: $track_color;
2377
&:disabled { background-color: $divider_color; }
2379
}
2380
// the colored part of the backing bit
2382
highlight {
2383
transition: background-color $shorter_duration $deceleration_curve;
2384
background-color: $primary_color;
2385
&:disabled { background-color: transparent; }
2387
}
2388
// this is another differently styled part of the backing bit, the most relevant use case is for example
2390
// in media player to indicate how much video stream as been cached
2391
fill {
2392
transition: background-color $shorter_duration $deceleration_curve;
2393
background-color: $track_color;
2394
&:disabled { background-color: transparent; }
2396
}
2397
slider {
2399
transition: background-color $shorter_duration $deceleration_curve,
2400
background-size $ripple_duration $deceleration_curve,
2401
background-image $ripple_opacity_duration $deceleration_curve;
2402
background-repeat: no-repeat;
2403
background-position: center;
2404
background-size: auto, 1000% 1000%;
2405
border-radius: 50%;
2406
color: transparent;
2407
@each $s, $as in ('', ''),
2409
(':disabled', '-disabled') {
2410
&#{$s} {
2411
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2412
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2414
radial-gradient(circle farthest-corner at center,
2415
currentColor 10%,
2416
transparent 0%);
2417
}
2418
}
2419
&:hover { background-color: rgba($primary_color, 0.08); }
2421
&:focus { background-color: rgba($primary_color, 0.12); }
2423
&:focus:hover { background-color: rgba($primary_color, 0.16); }
2425
&:active {
2427
transition: background-color $shorter_duration $deceleration_curve,
2428
background-size 0,
2429
background-image 0;
2430
animation: scale_ripple_effect $longer_duration $deceleration_curve forwards;
2431
background-size: auto, 0% 0%;
2432
background-color: rgba($primary_color, 0.08);
2433
color: rgba($primary_color, 0.12);
2434
}
2435
}
2436
marks label,
2438
value { color: $secondary_fg_color; }
2439
marks {
2441
color: $track_color;
2442
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2444
(bottom, bottom, top),
2445
(left, left, right),
2446
(right, right, left) {
2447
&.#{$marks_class} {
2448
margin-#{$marks_margin}: $_marks_distance;
2449
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2450
}
2451
}
2452
}
2453
&.fine-tune marks {
2455
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2456
(bottom, bottom, top),
2457
(left, left, right),
2458
(right, right, left) {
2459
&.#{$marks_class} {
2460
margin-#{$marks_margin}: $_marks_distance - 1px;
2461
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2462
}
2463
}
2464
}
2465
&.horizontal {
2467
indicator {
2468
min-height: $_marks_length;
2469
min-width: 1px;
2470
}
2471
}
2472
&.vertical {
2474
indicator {
2475
min-height: 1px;
2476
min-width: $_marks_length;
2477
}
2478
}
2479
// *WARNING* scale with marks madness following
2481
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2483
('vertical', 'vert') {
2484
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2485
('marks-after', 'marks-after:not(.marks-before)') {
2486
&.#{$dir_class}.#{$marks_class} {
2487
slider {
2488
@each $state, $state_infix in ('', ''),
2489
(':disabled', '-disabled') {
2490
&#{$state} {
2491
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2492
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2494
radial-gradient(circle farthest-corner at center,
2495
currentColor 10%,
2496
transparent 0%);
2497
}
2498
}
2499
}
2500
}
2501
}
2502
}
2503
&.color {
2505
min-height: 0;
2506
min-width: 0;
2507
&.horizontal {
2509
padding: 0 0 12px 0;
2510
slider {
2512
&:dir(ltr), &:dir(rtl) { // specificity bump
2513
margin-bottom: $color_slider_margin;
2514
margin-top: $color_marks_slider_margin;
2515
}
2516
}
2517
}
2518
&.vertical {
2520
&:dir(ltr) {
2521
padding: 0 0 0 12px;
2522
slider {
2524
margin-left: $color_slider_margin;
2525
margin-right: $color_marks_slider_margin;
2526
}
2527
}
2528
&:dir(rtl) {
2530
padding: 0 12px 0 0;
2531
slider {
2533
margin-right: $color_slider_margin;
2534
margin-left: $color_marks_slider_margin;
2535
}
2536
}
2537
}
2538
}
2539
}
2540
/*****************
2543
* Progress bars *
2544
*****************/
2545
progressbar {
2546
// sizing
2547
&.horizontal {
2548
trough,
2549
progress { min-height: $bar_size; }
2550
}
2551
&.vertical {
2553
trough,
2554
progress { min-width: $bar_size; }
2555
}
2556
// FIXME: insensitive state missing and some other state should be set probably
2558
color: $secondary_fg_color;
2559
font-size: smaller;
2560
trough { background-color: $divider_color; }
2562
progress { background-color: $primary_color; }
2564
&.osd { // progressbar.osd used for epiphany page loading progress
2566
// min-width: $bar_size;
2567
// min-height: $bar_size;
2568
// background-color: transparent;
2569
// trough { background-color: transparent; }
2571
// progress { background-color: $primary_color; }
2573
}
2574
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2576
}
2577
/*************
2580
* Level Bar *
2581
*************/
2582
levelbar {
2583
&.horizontal {
2584
block { min-height: $bar_size; }
2585
&.discrete block {
2587
min-width: $medium_size;
2588
&:not(:last-child) { margin-right: 2px; }
2590
}
2591
}
2592
&.vertical {
2594
block { min-width: $bar_size; }
2595
&.discrete block {
2597
min-height: $medium_size;
2598
&:not(:last-child) { margin-bottom: 2px; }
2600
}
2601
}
2602
// imitate the entry style
2604
trough {
2605
// padding: 2px;
2606
// border-radius: $material_radius;
2607
// box-shadow: $shadow_1;
2608
// background-color: $base_color;
2609
// &:disabled { background-color: $alt_base_color; }
2611
}
2612
block {
2614
&.low { background-color: $warning_color; }
2615
&.high,
2617
&:not(.empty) { background-color: $primary_color; }
2618
&.full { background-color: $success_color; }
2620
&.empty { background-color: $divider_color; }
2622
}
2623
}
2624
/****************
2627
* Print dialog *
2628
*****************/
2629
printdialog {
2630
paper {
2631
padding: 0;
2632
border: 1px solid $border_color;
2633
background-color: $base_color;
2634
color: $fg_color;
2635
}
2636
.dialog-action-box { margin: 12px; }
2638
}
2639
/**********
2642
* Frames *
2643
**********/
2644
frame > border,
2645
.frame {
2646
margin: 0;
2647
padding: 0;
2648
border: 1px solid $border_color;
2649
border-radius: 0;
2650
box-shadow: none;
2651
&.flat { border-style: none; }
2653
}
2654
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2656
actionbar > revealer > box {
2658
padding: $container_padding;
2659
border-top: 1px solid $border_color;
2660
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2662
}
2663
scrolledwindow {
2665
viewport.frame { // avoid double borders when viewport inside scrolled window
2666
border-style: none;
2667
}
2668
// This is used when content is touch-dragged past boundaries.
2670
// draws a box on top of the content, the size changes programmatically.
2671
@at-root overshoot {
2672
&.top { @include overshoot(top); }
2673
&.bottom { @include overshoot(bottom); }
2675
&.left { @include overshoot(left); }
2677
&.right { @include overshoot(right); }
2679
}
2680
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2682
@at-root undershoot {
2683
&.top { @include undershoot(top); }
2684
&.bottom { @include undershoot(bottom); }
2686
&.left { @include undershoot(left); }
2688
&.right { @include undershoot(right); }
2690
}
2691
@at-root junction { // the small square between two scrollbars
2693
border-style: solid none none solid;
2694
border-width: 1px;
2695
border-color: $border_color;
2696
background-color: $base_color;
2697
&:dir(rtl) { border-style: solid solid none none; }
2699
}
2700
}
2701
// vbox and hbox separators
2703
separator {
2704
min-width: 1px;
2705
min-height: 1px;
2706
background-color: $border_color;
2707
}
2708
%hide_separators {
2710
min-width: 0;
2711
min-height: 0;
2712
background-color: transparent;
2713
}
2714
/*********
2717
* Lists *
2718
*********/
2719
list {
2720
border-color: $border_color;
2721
background-color: $base_color;
2722
row { padding: 2px; }
2724
}
2725
// FIXME
2727
$row_transition: $shorter_transition, background-color 0, color 0;
2728
row {
2730
&.activatable {
2731
transition: $row_transition,
2732
background-size $ripple_duration $deceleration_curve,
2733
background-image $ripple_opacity_duration $deceleration_curve;
2734
box-shadow: inset 0 0 0 9999px transparent;
2735
background-image: radial-gradient(circle farthest-corner at center,
2736
transparent 10%,
2737
transparent 0%);
2738
background-repeat: no-repeat;
2739
background-position: center;
2740
background-size: 1000% 1000%;
2741
&:hover {
2743
transition: $row_transition,
2744
box-shadow 0,
2745
background-size $ripple_duration $deceleration_curve,
2746
background-image $ripple_opacity_duration $deceleration_curve;
2747
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2748
}
2749
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2751
&:active {
2752
transition: $row_transition,
2753
background-size 0,
2754
background-image 0;
2755
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2756
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2757
background-image: radial-gradient(circle farthest-corner at center,
2758
$active_overlay_color 10%,
2759
transparent 0%);
2760
background-size: 0% 0%;
2761
}
2762
}
2763
&:selected { @extend %selected_items; }
2765
}
2766
/*********************
2769
* App Notifications *
2770
*********************/
2771
.app-notification {
2772
// @extend %osd;
2773
@extend toolbar.osd;
2775
margin: 8px;
2777
button { @extend %button_basic.flat; }
2779
&.frame,
2781
border { border-style: none; }
2782
}
2783
/*************
2786
* Expanders *
2787
*************/
2788
expander {
2789
title > arrow {
2790
transition: all $shorter_duration $deceleration_curve;
2791
min-width: 16px;
2792
min-height: 16px;
2793
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2794
-gtk-icon-transform: rotate(-90deg);
2795
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2797
&:checked { -gtk-icon-transform: unset; }
2799
color: $secondary_fg_color;
2801
&:hover, &:active { color: $fg_color; }
2803
&:disabled { color: $disabled_secondary_fg_color; }
2805
}
2806
}
2807
/************
2810
* Calendar *
2811
************/
2812
calendar {
2813
padding: 1px;
2814
border: 1px solid $border_color;
2815
color: $fg_color;
2816
&:disabled { color: $disabled_fg_color; }
2818
&:selected {
2820
@extend %selected_items;
2821
border-radius: $material_radius + 1px;
2823
}
2824
&.header {
2826
border-style: none none solid;
2827
border-radius: 0;
2828
}
2829
&.button { @extend %simple_flat_button; }
2831
&.highlight {
2833
color: $secondary_fg_color;
2834
font-weight: 500;
2835
}
2836
&:indeterminate { color: $disabled_secondary_fg_color; }
2838
}
2839
/***********
2842
* Dialogs *
2843
***********/
2844
messagedialog { // Message Dialog styling
2845
&.background { background-color: $surface_color; }
2846
.titlebar {
2848
min-height: $small_size;
2849
border-style: none;
2850
box-shadow: inset 0 1px $highlight_color;
2851
background-color: $surface_color;
2852
color: $fg_color;
2853
&:backdrop { color: $secondary_fg_color; }
2855
}
2856
&.csd { // rounded bottom border styling for csd version
2858
&.background {
2859
// bigger radius for better antialiasing
2860
border-bottom-left-radius: $material_radius;
2861
border-bottom-right-radius: $material_radius;
2862
}
2863
.dialog-action-area {
2865
margin-top: -$container_padding;
2866
padding: $container_padding;
2867
button {
2869
@extend %simple_flat_button;
2870
border-radius: $material_radius;
2871
&:not(:last-child) { margin-right: $container_padding; }
2873
&.suggested-action:not(:disabled) { color: $suggested_color; }
2875
&.destructive-action:not(:disabled) { color: $destructive_color; }
2877
}
2878
}
2879
}
2880
}
2881
filechooser {
2883
.dialog-action-box { border-top: 1px solid $border_color; }
2884
#pathbarbox {
2886
border-bottom: 1px solid $border_color;
2887
background-color: $bg_color;
2888
> stack > box > button { // The new folder button
2890
@extend %button_basic.flat;
2891
@extend %circular_button;
2892
}
2893
}
2894
}
2895
filechooserbutton:drop(active) {
2897
box-shadow: none;
2898
}
2899
/***********
2902
* Sidebar *
2903
***********/
2904
.sidebar {
2905
border-style: none;
2906
background-color: $alt_base_color;
2907
@at-root %sidebar_left,
2909
&:dir(ltr),
2910
&.left,
2911
&.left:dir(rtl) {
2912
border-right: 1px solid $border_color;
2913
border-left-style: none;
2914
}
2915
@at-root %sidebar_right,
2917
&:dir(rtl),
2918
&.right {
2919
border-left: 1px solid $border_color;
2920
border-right-style: none;
2921
}
2922
list { background-color: transparent; }
2924
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2926
}
2927
stacksidebar {
2929
&.sidebar {
2930
&:dir(ltr),
2931
&.left,
2932
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2933
&:dir(rtl),
2935
&.right { list { @extend %sidebar_right; }}
2936
}
2937
row {
2939
padding: 10px 4px;
2940
> label {
2942
padding-left: 6px;
2943
padding-right: 6px;
2944
}
2945
&.needs-attention > label { @extend %needs_attention; }
2947
}
2948
}
2949
/****************
2952
* File chooser *
2953
****************/
2954
// dim the sidebar icons, see bug #786613 for details on this oddity
2955
row {
2956
image.sidebar-icon { color: $secondary_fg_color; }
2957
}
2958
placessidebar {
2960
> viewport.frame { border-style: none; }
2961
list { padding: (4px - 3px) 0 4px; }
2963
row {
2965
// Needs overriding of the GtkListBoxRow padding
2966
min-height: 32px;
2967
margin: -1px 0; // Remove unknown margins
2968
padding: 0;
2969
// Using margins/padding directly in the SidebarRow
2971
// will make the animation of the new bookmark row jump
2972
> revealer { padding: 0 12px; }
2973
&:selected { color: $primary_color; }
2975
&:disabled { color: $disabled_fg_color; }
2977
image.sidebar-icon {
2979
&:dir(ltr) { padding-right: 8px; }
2980
&:dir(rtl) { padding-left: 8px; }
2981
}
2982
label.sidebar-label {
2984
&:dir(ltr) { padding-right: 2px; }
2985
&:dir(rtl) { padding-left: 2px; }
2986
}
2987
&:selected image.sidebar-icon { color: inherit; }
2989
@at-root button.sidebar-button {
2991
@extend %simple_flat_button;
2992
@extend %small_button;
2993
}
2994
&.sidebar-placeholder-row {
2996
min-height: 2px;
2997
padding: 0 8px;
2998
background-image: image($primary_color);
2999
background-clip: content-box;
3000
}
3001
&.sidebar-new-bookmark-row { color: $primary_color; }
3003
&:drop(active):not(:disabled) {
3005
box-shadow: inset 0 0 0 2px $primary_color;
3006
}
3007
}
3008
}
3009
placesview {
3011
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3012
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3014
// this selects the "connect to server" label
3016
> actionbar > revealer > box > label {
3017
padding-left: 8px;
3018
padding-right: 8px;
3019
}
3020
}
3021
/*********
3024
* Paned *
3025
*********/
3026
paned {
3027
> separator {
3028
min-width: 1px;
3029
min-height: 1px;
3030
-gtk-icon-source: none; // defeats the ugly default handle decoration
3031
border-style: none; // just to be sure
3032
background-color: transparent;
3033
// workaround, using background istead of a border since the border will get rendered twice (?)
3034
background-image: image($border_color);
3035
background-size: 1px 1px;
3036
background-clip: content-box; // avoids borders image being rendered twice (?)
3037
&.wide {
3039
min-width: 6px;
3040
min-height: 6px;
3041
background-color: $bg_color;
3042
background-image: image($border_color), image($border_color);
3043
background-size: 1px 1px, 1px 1px;
3044
}
3045
}
3046
&.horizontal > separator {
3048
background-repeat: repeat-y;
3049
&:dir(ltr) {
3051
margin: 0 -8px 0 0;
3052
padding: 0 8px 0 0;
3053
background-position: left;
3054
}
3055
&:dir(rtl) {
3057
margin: 0 0 0 -8px;
3058
padding: 0 0 0 8px;
3059
background-position: right;
3060
}
3061
&.wide {
3063
margin: 0;
3064
padding: 0;
3065
background-repeat: repeat-y, repeat-y;
3066
background-position: left, right;
3067
}
3068
}
3069
&.vertical > separator {
3071
margin: 0 0 -8px 0;
3072
padding: 0 0 8px 0;
3073
background-repeat: repeat-x;
3074
background-position: top;
3075
&.wide {
3077
margin: 0;
3078
padding: 0;
3079
background-repeat: repeat-x, repeat-x;
3080
background-position: bottom, top;
3081
}
3082
}
3083
}
3084
/**************
3087
* GtkInfoBar *
3088
**************/
3089
infobar {
3090
border-style: none;
3091
&.info { background-color: $info_bg_color; }
3093
&.question { background-color: $question_bg_color; }
3095
&.warning { background-color: $warning_bg_color; }
3097
&.error { background-color: $error_bg_color; }
3099
&.info,
3101
&.question,
3102
&.warning,
3103
&.error {
3104
> label, & { color: $inverse_fg_color; }
3105
button { @extend %button_selected; }
3107
selection {}
3109
*:link { @extend %link_selected; }
3111
}
3112
}
3113
/************
3116
* Tooltips *
3117
************/
3118
tooltip {
3119
&.background {
3120
// background-color needs to be set this way otherwise it gets drawn twice
3121
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3122
// box-shadow: inset 0 1px $highlight_color;
3123
background-color: $tooltip_bg_color;
3124
color: $tooltip_fg_color;
3125
}
3126
// padding: 4px; /* not working */
3128
border-radius: $material_radius;
3129
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3130
&:not(.csd):not(.unity-csd) {
3132
// border: 1px solid $border_color;
3133
// border-radius: $material_radius + 1px;
3134
// background-clip: $extra_background_clip;
3135
}
3136
// FIXME: we need a border or tooltips vanish on black background.
3138
decoration { background-color: transparent; }
3139
label {
3141
// tooltip label already seems to have 6px margins
3142
min-height: 32px - 6px * 2;
3143
padding: 0 8px - 6px;
3144
}
3145
* {
3147
// workaround for Eclipse.
3148
// do not include any declaration here.
3149
// padding: 0;
3150
// background-color: transparent;
3151
// color: inherit;
3152
}
3153
}
3154
/*****************
3157
* Color Chooser *
3158
*****************/
3159
colorswatch {
3160
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3161
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3162
// applied to the overlay box.
3163
// base color corners rounding
3165
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3166
// sports a bigger radius.
3167
// nth-child is needed by the custom color strip.
3168
&.top {
3170
border-top-left-radius: $material_radius + 0.5px;
3171
border-top-right-radius: $material_radius + 0.5px;
3172
overlay {
3174
border-top-left-radius: $material_radius;
3175
border-top-right-radius: $material_radius;
3176
}
3177
}
3178
&.bottom {
3180
border-bottom-left-radius: $material_radius + 0.5px;
3181
border-bottom-right-radius: $material_radius + 0.5px;
3182
overlay {
3184
border-bottom-left-radius: $material_radius;
3185
border-bottom-right-radius: $material_radius;
3186
}
3187
}
3188
&.left,
3190
&:first-child:not(.top) {
3191
border-top-left-radius: $material_radius + 0.5px;
3192
border-bottom-left-radius: $material_radius + 0.5px;
3193
overlay {
3195
border-top-left-radius: $material_radius;
3196
border-bottom-left-radius: $material_radius;
3197
}
3198
}
3199
&.right,
3201
&:last-child:not(.bottom) {
3202
border-top-right-radius: $material_radius + 0.5px;
3203
border-bottom-right-radius: $material_radius + 0.5px;
3204
overlay {
3206
border-top-right-radius: $material_radius;
3207
border-bottom-right-radius: $material_radius;
3208
}
3209
}
3210
&.dark { color: $light_fg_color; }
3212
&.light { color: $dark_fg_color; }
3214
&:drop(active) {
3216
box-shadow: none;
3217
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3219
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3221
}
3222
overlay {
3224
transition: $shadow_transition;
3225
box-shadow: $shadow_1;
3226
&:hover { box-shadow: $shadow_2; }
3228
}
3229
&#add-color-button {
3231
border-radius: $material_radius $material_radius 0 0;
3232
color: $light_fg_color;
3233
&:only-child { border-radius: $material_radius; }
3235
overlay {
3237
background-image: linear-gradient(to right,
3238
$error_bg_color 25%,
3239
$warning_bg_color 25%, $warning_bg_color 50%,
3240
$info_bg_color 50%, $info_bg_color 75%,
3241
$question_bg_color 75%);
3242
}
3243
}
3244
&:disabled {
3246
opacity: 0.5;
3247
overlay { box-shadow: none; }
3249
}
3250
row:selected & {
3252
}
3253
&#editor-color-sample {
3255
border-radius: $material_radius + 0.5px;
3256
overlay { border-radius: $material_radius; }
3258
// overlay:hover { box-shadow: $shadow_1; }
3260
}
3261
}
3262
// colorscale popup
3264
colorchooser .popover.osd {
3265
transition: $shadow_transition;
3266
border-radius: $material_radius;
3267
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3268
background-color: $surface_color;
3269
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3271
}
3272
/********
3275
* Misc *
3276
********/
3277
// content view (grid/list)
3278
.content-view {
3279
background-color: $bg_color;
3280
// &:hover { -gtk-icon-effect: highlight; }
3282
rubberband, .rubberband { @extend rubberband; }
3284
}
3285
.scale-popup {
3287
// .osd & { @extend %osd; }
3288
.osd & button.flat { // FIXME: quick hack, redo properly
3290
}
3291
button { // +/- buttons on GtkVolumeButton popup
3293
}
3294
}
3295
/**********************
3298
* Window Decorations *
3299
**********************/
3300
decoration {
3301
transition: $shadow_transition;
3302
border-radius: $material_radius $material_radius 0 0;
3303
box-shadow: $shadow_4, 0 16px 16px transparent;
3304
// FIXME rationalize shadows
3306
// this is used for the resize cursor area
3308
margin: 8px;
3309
&:backdrop {
3311
// the transparent shadow here is to enforce that the shadow extents don't
3312
// change when we go to backdrop, to prevent jumping windows.
3313
// The biggest shadow should be in the same order then in the active state
3314
// or the jumping will happen during the transition.
3315
box-shadow: $shadow_2, 0 16px 16px transparent;
3316
}
3317
.maximized &,
3319
.fullscreen &,
3320
.tiled &,
3321
.tiled-top &,
3322
.tiled-right &,
3323
.tiled-bottom &,
3324
.tiled-left & { border-radius: 0; }
3325
.popup & { box-shadow: none; }
3327
// server-side decorations as used by mutter
3329
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3330
.csd.popup & {
3332
border-radius: $material_radius;
3333
box-shadow: $shadow_2;
3334
}
3335
tooltip.csd & {
3337
border-radius: $material_radius;
3338
box-shadow: none;
3339
}
3340
messagedialog.csd & {
3342
border-radius: $material_radius;
3343
// box-shadow: $shadow_4, 0 16px 16px transparent;
3344
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3346
}
3347
.solid-csd & {
3349
margin: 0;
3350
// padding: 4px;
3351
border-radius: 0;
3352
box-shadow: none;
3353
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3354
background-color: $titlebar_bg_color;
3355
}
3356
}
3357
// Window Close button
3359
button.titlebutton {
3360
// @extend %simple_flat_button;
3361
@extend %circular_button;
3363
.selection-mode & {
3365
}
3366
}
3367
// catch all extend :)
3370
%selected_items {
3372
background-color: $selected_overlay_color;
3373
}
3374
.monospace { font-family: monospace; }
3376
/**********************
3379
* Touch Copy & Paste *
3380
**********************/
3381
// touch selection handlebars for the Popover.osd above
3382
cursor-handle {
3383
border-radius: $circular_radius;
3384
background-color: $primary_color;
3385
background-image: none;
3386
&.top:dir(ltr), &.bottom:dir(rtl) {
3388
padding-left: 6px;
3389
border-top-right-radius: 0;
3390
}
3391
&.bottom:dir(ltr), &.top:dir(rtl) {
3393
padding-right: 6px;
3394
border-top-left-radius: 0;
3395
}
3396
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3398
-GtkWidget-text-handle-width: 24;
3399
-GtkWidget-text-handle-height: 30;
3400
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3402
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3403
url('#{$_url}@2.png'));
3404
}
3405
}
3406
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3408
// shortcut window keys
3410
.keycap {
3411
min-width: 28px - 8px * 2;
3412
min-height: 28px - 2px;
3413
margin-top: 2px;
3414
padding-bottom: 2px;
3415
padding-left: 8px;
3416
padding-right: 8px;
3417
border: solid 1px $border_color;
3419
border-radius: $material_radius + 1px;
3420
box-shadow: inset 0 -2px $border_color;
3421
background-color: $surface_color;
3422
color: $fg_color;
3423
font-size: smaller;
3424
}
3425
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3427
transition: $shorter_transition;
3428
box-shadow: $shadow_1, inset 0 0 0 2px $primary_color;
3429
caret-color: $primary_color;
3430
}
3431
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3433
stackswitcher button.circular,
3435
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3436
min-width: $medium_size;
3437
min-height: $medium_size;
3438
padding: 0;
3439
}
3440
/*********
3443
* Emoji *
3444
*********/
3445
popover.emoji-picker {
3446
padding: 0;
3447
entry {
3449
border-bottom: 1px solid $border_color;
3450
border-radius: 0;
3451
box-shadow: none;
3452
background-color: transparent;
3453
}
3454
scrolledwindow { border-bottom: 1px solid $border_color; }
3456
}
3457
// mimic tab style
3459
button.emoji-section {
3460
margin-top: -1px;
3461
padding: 0 8px;
3462
min-width: 24px;
3463
min-height: $medium_size;
3464
border-radius: 0;
3465
outline-offset: -6px;
3466
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3468
&:checked {
3470
box-shadow: inset 0 2px $primary_color;
3471
background-color: transparent;
3472
}
3473
&:hover, &:active { background-color: $hover_overlay_color; }
3475
&:first-child { margin-left: 4px; }
3477
&:last-child { margin-right: 4px; }
3479
}
3480
.emoji {
3482
min-width: 3em;
3483
min-height: 3em;
3484
padding: 0 8px;
3485
// font-size: larger;
3486
widget {
3488
transition: $shorter_transition;
3489
border-radius: $material_radius;
3490
&:hover { background-color: $hover_overlay_color; }
3492
}
3493
}
3494