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: 2px;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
switch:focus slider,
37
notebook:focus tab,
38
*:focus { outline-color: $fill_color; }
39
/***************
42
* Base States *
43
***************/
44
.background {
45
background-color: $bg_color;
46
color: $fg_color;
47
}
48
/*
50
These wildcard seems unavoidable, need to investigate.
51
Wildcards are bad and troublesome, use them with care,
52
or better, just don't.
53
Everytime a wildcard is used a kitten dies, painfully.
54
*/
55
*:disabled { -gtk-icon-effect: dim; }
57
.gtkstyle-fallback {
59
background-color: $bg_color;
60
color: $fg_color;
61
&:hover {
63
background-color: darken($bg_color, 5%);
64
color: $fg_color;
65
}
66
&:active {
68
background-color: darken($bg_color, 10%);
69
color: $fg_color;
70
}
71
&:disabled {
73
background-color: $bg_color;
74
color: $disabled_fg_color;
75
}
76
&:selected {
78
background-color: $primary_color;
79
color: $inverse_fg_color;
80
}
81
}
82
.view {
84
@extend row.activatable;
85
background-color: $base_color;
87
color: $fg_color;
88
&:disabled { color: $disabled_fg_color; }
90
&:hover, &:active, &:selected { border-radius: 2px; }
92
selection,
94
&:selected { @extend %selected_items; }
95
}
96
textview {
98
// FIXME: we need to override background-color to ensure text rendering
99
text { background-color: $base_color; }
100
border {
102
background-color: $alt_base_color;
103
color: $hint_fg_color; // FIXME: not working
104
}
105
}
106
// iconview { @extend .view; }
108
.rubberband,
110
rubberband {
111
border: 1px solid $alt_primary_color;
112
background-color: rgba($alt_primary_color, $lower_opacity);
113
}
114
flowbox {
116
rubberband { @extend rubberband; }
117
flowboxchild {
119
padding: 4px;
120
border-radius: 2px;
121
&:selected { @extend %selected_items; }
123
}
124
}
125
.content-view .tile {
127
// margin: 2px;
128
// padding: 0;
129
// border-radius: 0;
130
// background-color: $black;
131
&:selected {
133
background-color: transparent;
134
color: inherit;
135
}
136
}
137
label {
139
caret-color: currentColor; // this shouldn't be needed.
140
&.separator {
142
@extend .dim-label;
143
color: $fg_color;
145
}
146
row:selected &,
148
&:selected { @extend %nobg_selected_items; }
149
selection {
151
background-color: $primary_color;
152
color: $inverse_fg_color;
153
}
154
&:disabled {
156
color: $disabled_fg_color;
157
selection { @extend %selected_items:disabled; }
159
tab &,
161
button & { color: inherit; }
162
}
163
}
164
.dim-label { opacity: $hint_opacity; }
166
assistant {
168
.sidebar {
169
padding: 4px 0;
170
// background-color: $base_color;
171
// border-top: 1px solid $border_color;
172
}
173
// &.csd .sidebar { border-top-style: none; }
175
.sidebar label {
177
min-height: $medium_size;
178
padding: 0 12px;
179
color: $hint_fg_color;
180
font-weight: 500;
181
&.highlight { color: $fg_color; }
183
}
184
}
185
%osd, .osd { opacity: $higher_opacity; }
187
/*********************
190
* Spinner Animation *
191
*********************/
192
@keyframes spin {
193
to { -gtk-icon-transform: rotate(1turn); }
194
}
195
spinner {
197
background: none;
198
opacity: 0; // non spinning spinner makes no sense
199
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
200
&:checked {
202
opacity: 1;
203
animation: spin 1s linear infinite;
204
&:disabled { opacity: $disabled_opacity; }
206
}
207
}
208
/****************
211
* Text Entries *
212
****************/
213
%entry,
214
entry {
215
%entry_basic, & {
216
min-height: $medium_size;
217
padding: 0 8px;
218
border-radius: 2px;
219
@include entry(normal);
221
&:focus { @include entry(focus); }
223
&:disabled { @include entry(disabled); }
225
&.flat {
227
border-radius: 0;
228
@include entry(flat-normal);
230
&:focus { @include entry(flat-focus); }
232
&:disabled { @include entry(flat-disabled); }
234
}
235
image { // icons inside the entry
237
// @extend %simple_flat_button;
238
// min-height: $small_size;
240
// min-width: $small_size;
241
// border-radius: $circular_radius;
242
// -gtk-outline-radius: $circular_radius;
243
color: $secondary_fg_color;
244
&:hover, &:active { color: $fg_color; }
246
&:disabled { color: $hint_fg_color; }
248
&.left {
250
margin-left: ($medium_size - 16px) / 2 - 8px;
251
margin-right: 6px;
252
}
253
&.right {
255
margin-left: 6px;
256
margin-right: ($medium_size - 16px) / 2 - 8px;
257
}
258
}
259
undershoot {
261
&.left { @include undershoot(left); }
262
&.right { @include undershoot(right); }
264
}
265
selection { @extend %selected_items; }
267
// entry error and warning style
269
@each $e_type, $e_color in (error, $error_color),
270
(warning, $warning_color) {
271
&.#{$e_type} {
272
@include entry(normal, $e_color);
273
&:focus { @include entry(focus, $e_color); }
275
&:disabled { @include entry(disabled, $e_color); }
277
&.flat {
279
@include entry(flat-normal, $e_color);
280
&:focus { @include entry(flat-focus, $e_color); }
282
&:disabled { @include entry(flat-disabled, $e_color); }
284
}
285
image {
287
color: $inverse_secondary_fg_color;
288
&:hover, &:active { color: $inverse_fg_color; }
290
&:disabled { color: $inverse_hint_fg_color; }
292
}
293
}
294
}
295
&:drop(active) {
297
// box-shadow: inset 0 0 0 2px $accent_color;
298
}
299
.osd & {
301
}
302
}
303
progress {
305
margin: 2px (2px - 8px);
306
border-bottom: 2px solid $primary_color;
307
background-color: transparent;
308
}
309
// linked entries
311
.linked:not(.vertical) > & { @extend %linked; }
312
// Vertically linked entries
314
.linked.vertical > & { @extend %linked_vertical; }
315
.linked:not(.vertical) > &.flat,
317
.linked.vertical > &.flat { border-radius: 0; }
318
}
319
treeview entry {
321
&.flat, & {
322
min-height: 0;
323
padding: 2px;
324
border-radius: 0;
325
background-color: $base_color;
326
&, &:focus {
328
border-image: none;
329
box-shadow: none;
330
}
331
}
332
}
333
.entry-tag {
335
$tag_height: 24px;
336
$tag_margin: ($medium_size - $tag_height) / 2;
337
margin: $tag_margin; // instead of min-height: $tag_height;
339
border-radius: $circular_radius;
340
box-shadow: none;
341
background-color: $primary_color;
342
color: $inverse_fg_color;
343
&:hover { box-shadow: $shadow_1; }
345
// side margins: compensate the entry padding with a negative margin
347
// then the negative margin itself
348
:dir(ltr) & {
349
margin-left: 8px;
350
margin-right: $tag_margin - 8px;
351
padding-left: 8px;
352
padding-right: ($tag_height - 16px) / 2;
353
}
354
:dir(rtl) & {
356
margin-left: $tag_margin - 8px;
357
margin-right: 8px;
358
padding-left: ($tag_height - 16px) / 2;
359
padding-right: 8px;
360
}
361
// seems any sizing doesn't work
363
&.button {
364
box-shadow: none;
365
background-color: transparent;
366
&:not(:hover):not(:active) { color: $inverse_secondary_fg_color; }
368
}
369
}
370
/***********
373
* Buttons *
374
***********/
375
// stuff for .needs-attention
376
@keyframes needs_attention {
377
from {
378
background-image: -gtk-gradient(radial,
379
center center, 0,
380
center center, 0.001,
381
to($accent_color),
382
to(transparent));
383
}
384
to {
386
background-image: -gtk-gradient(radial,
387
center center, 0,
388
center center, 0.5,
389
to($accent_color),
390
to(transparent));
391
}
392
}
393
%button,
395
button {
396
@at-root %button_basic, & {
397
min-height: 24px;
398
min-width: 16px;
399
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
400
border-radius: 2px;
401
font-weight: 500;
402
@include button(normal);
404
&:hover { @include button(hover); }
406
&:active { @include button(active); }
408
&:disabled { @include button(disabled); }
410
&:checked { @include button(checked); }
412
&:checked:disabled { @include button(checked-disabled); }
414
@at-root %flat_button, &.flat {
416
@at-root %simple_flat_button, & {
417
@include button(flat-normal);
418
&:hover { @include button(flat-hover); }
420
&:active { @include button(flat-active); }
422
&:disabled { @include button(flat-disabled); }
424
}
425
&:checked { @include button(flat-checked); }
427
&:checked:disabled { @include button(flat-checked-disabled); }
429
}
430
&.text-button {
432
padding-left: 16px;
433
padding-right: 16px;
434
}
435
&.image-button {
437
min-width: 24px;
438
padding: ($medium_size - 24px) / 2;
439
@extend %circular_button;
441
}
442
&.text-button.image-button {
444
border-radius: 2px;
445
-gtk-outline-radius: 2px;
446
label {
448
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
449
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
451
}
452
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
454
}
455
.linked > & { @extend %linked; }
457
.linked.vertical > & { @extend %linked_vertical; }
459
.linked > &.flat,
461
.linked.vertical > &.flat {
462
border-radius: 2px;
463
&.image-button { @extend %circular_button; }
465
&.text-button.image-button {
467
border-radius: 2px;
468
-gtk-outline-radius: 2px;
469
}
470
}
471
&:drop(active) {
473
// box-shadow: inset 0 0 0 2px $accent_color;
474
}
475
}
476
@at-root %button_selected, row:selected & {
478
&:disabled {
479
background-color: $inverse_divider_color;
480
color: $inverse_disabled_secondary_fg_color;
481
}
482
&.flat {
484
color: $inverse_secondary_fg_color;
485
&:hover, &:active { color: $inverse_fg_color; }
487
&:disabled { color: $inverse_disabled_secondary_fg_color; }
489
&:checked {
491
background-color: $inverse_track_color;
492
color: $inverse_fg_color;
493
}
494
&:checked:disabled {
496
background-color: $inverse_divider_color;
497
color: $inverse_disabled_fg_color;
498
}
499
}
500
}
501
// big standalone buttons like in Documents pager
503
&.osd {
504
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
505
&.image-button { padding: ($large_size - 24px) / 2; }
507
&:disabled { opacity: 0; }
509
}
510
// overlay / OSD style
512
@at-root %osd_button,
513
.osd & {
514
}
515
// Suggested and Destructive Action buttons
517
@each $b_type, $b_color in (suggested-action, $suggested_color),
518
(destructive-action, $destructive_color) {
519
&.#{$b_type} {
520
background-color: $b_color;
521
color: $inverse_fg_color;
522
&:disabled { @include button(disabled, $b_color); }
524
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
526
&.flat {
528
background-color: transparent;
529
color: $b_color;
530
&:disabled { @include button(flat-disabled, $b_color); }
532
&:checked { background-color: rgba($b_color, 0.3); }
534
}
535
.osd & {
537
}
538
}
539
}
540
.stack-switcher > & {
542
// to position the needs attention dot, padding is added to the button
543
// child, a label needs just lateral padding while an icon needs vertical
544
// padding added too.
545
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
547
> label {
549
padding-left: 6px; // label padding
550
padding-right: 6px; //
551
}
552
> image {
554
padding-left: 6px; // image padding
555
padding-right: 6px; //
556
padding-top: 3px; //
557
padding-bottom: 3px; //
558
}
559
&.text-button {
561
// compensate text-button paddings
562
padding-left: 16px - 6px;
563
padding-right: 16px - 6px;
564
}
565
&.image-button {
567
// we want image buttons to have a 1:1 aspect ratio, so compensation
568
// of the padding added to the GtkImage is needed
569
padding-left: ($medium_size - 16px) / 2 - 6px;
570
padding-right: ($medium_size - 16px) / 2 - 6px;
571
}
572
&.needs-attention {
574
> label,
575
> image { @extend %needs_attention; }
576
&:checked {
578
> label,
579
> image {
580
animation: none;
581
background-image: none;
582
}
583
}
584
}
585
}
586
// hide separators
588
&.font,
589
&.file { separator { @extend %hide_separators; }}
590
// &.font { > box > box > label { font-weight: bold; }}
592
// inline-toolbar buttons
594
.inline-toolbar & {
595
// @extend %button_basic.flat;
596
&:not(.text-button) { @extend %circular_button; }
598
}
599
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
601
@at-root %circular_button,
603
&.close,
604
&.circular { // The Bloody Circul Button
605
border-radius: $circular_radius;
606
-gtk-outline-radius: $circular_radius;
607
// label { padding: 0; }
609
}
610
@at-root %small_button {
612
min-height: $small_size;
613
min-width: $small_size;
614
padding: 0;
615
border-radius: $circular_radius;
616
-gtk-outline-radius: $circular_radius;
617
}
618
}
619
%needs_attention {
621
animation: needs_attention $longer_duration $deceleration_curve forwards;
622
background-repeat: no-repeat;
623
background-position: right 3px;
624
background-size: 6px 6px;
625
&:dir(rtl) { background-position: left 3px; }
627
}
628
// all the following is for the +|- buttons on inline toolbars, that way
630
// should really be deprecated...
631
.inline-toolbar toolbutton > button { // redefining the button look is
632
// needed since those are flat...
633
}
634
// More inline toolbar buttons
636
toolbar.inline-toolbar toolbutton {
637
// > button.flat { @extend %linked_middle; }
638
// &:first-child > button.flat { @extend %linked:first-child; }
640
// &:last-child > button.flat { @extend %linked:last-child; }
642
// &:only-child > button.flat { @extend %linked:only-child; }
644
}
645
%linked_middle {
647
border-radius: 0;
648
-gtk-outline-radius: 2px;
649
}
650
%linked {
652
@extend %linked_middle;
653
&:first-child {
655
border-top-left-radius: 2px;
656
border-bottom-left-radius: 2px;
657
}
658
&:last-child {
660
border-top-right-radius: 2px;
661
border-bottom-right-radius: 2px;
662
}
663
&:only-child {
665
border-radius: 2px;
666
}
667
}
668
%linked_vertical_middle {
670
border-radius: 0;
671
-gtk-outline-radius: 2px;
672
}
673
%linked_vertical {
675
@extend %linked_vertical_middle;
676
&:first-child {
678
border-top-left-radius: 2px;
679
border-top-right-radius: 2px;
680
}
681
&:last-child {
683
border-bottom-left-radius: 2px;
684
border-bottom-right-radius: 2px;
685
}
686
&:only-child {
688
border-radius: 2px;
689
}
690
}
691
/* menu buttons */
693
modelbutton.flat,
694
.menuitem.button.flat {
695
min-height: $menuitem_size;
696
padding: 0 8px;
697
border-radius: 2px;
698
color: inherit;
699
@extend %simple_flat_button;
701
&:selected { @extend %selected_items; }
703
}
704
modelbutton.flat arrow {
706
background: none;
707
&:hover { background: none; }
709
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
711
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
713
}
714
button.color {
716
min-height: $small_size;
717
min-width: $small_size;
718
padding: $container_padding;
719
colorswatch:only-child {
721
// &, overlay { border-radius: 0; }
722
}
723
}
724
/*********
727
* Links *
728
*********/
729
*:link {
730
&, &:hover, &:active { color: $link_color; }
731
&:visited {
733
&, &:hover, &:active { color: $visited_link_color; }
734
}
735
@at-root %link_selected,
737
&:selected,
738
*:selected & { color: $inverse_fg_color; }
739
}
740
button:link,
742
button:visited {
743
@extend *:link;
744
> label { text-decoration-line: underline; }
746
}
747
/*****************
749
* GtkSpinButton *
750
*****************/
751
spinbutton {
752
&:not(.vertical) {
753
// in this horizontal configuration, the whole spinbutton
754
// behaves as the entry, so we extend the entry styling
755
// and nuke the style on the internal entry
756
@extend %entry;
757
padding: 0;
759
%spinbutton_entry,
761
entry {
762
min-width: $large_size - 8px * 2;
763
// reset all the other props since the spinbutton node is styled here
764
margin: 0;
765
border-image: none;
766
border-radius: 0;
767
box-shadow: none;
768
background-color: transparent;
769
//
770
// This will help to simplify spinbutton's code, but unfortunatelly
771
// doesn't work properly in :dir(rtl). It needs z-index property.
772
//
773
// min-width: $large_size - 8px;
774
//
775
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
776
//
777
// &:dir(ltr) {
778
// margin-right: -$spinbuttons_width;
779
// padding-right: $spinbuttons_width;
780
// }
781
//
782
// &:dir(rtl) {
783
// margin-left: -$spinbuttons_width;
784
// padding-left: $spinbuttons_width;
785
// }
786
}
787
button {
789
// margin: $container_padding;
790
border: solid $container_padding transparent;
791
@extend %simple_flat_button;
793
@extend %small_button;
795
&.up:dir(ltr),
797
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
798
&.up:dir(rtl),
800
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
801
}
802
}
803
// OSD horizontal
805
.osd &:not(.vertical) {
806
button {
807
}
808
}
809
// Vertical
811
&.vertical {
812
// in the vertical configuration, we treat the spinbutton
813
// as a box, and tweak the style of the entry in the middle
814
// so that it's linked
815
// FIXME: this should not be set at all, but otherwise it gets the wrong
817
// color
818
&:disabled { color: $disabled_fg_color; }
819
&:drop(active) {
821
box-shadow: none;
822
}
823
entry {
825
min-height: $medium_size;
826
min-width: $large_size;
827
padding: 0;
828
}
829
button {
831
min-height: $medium_size;
832
min-width: $large_size;
833
padding: 0;
834
@extend %simple_flat_button;
836
&.up { border-radius: 2px 2px 0 0; }
838
&.down { border-radius: 0 0 2px 2px; }
840
}
841
}
842
// OSD vertical
844
.osd &.vertical button:first-child {
845
}
846
// Misc
848
treeview &:not(.vertical) {
849
min-height: 0;
850
border-style: none;
851
border-radius: 0;
852
entry {
854
min-height: 0;
855
padding: 1px 2px;
856
}
857
}
858
}
859
/**************
862
* ComboBoxes *
863
**************/
864
combobox {
865
arrow {
866
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
867
min-height: 16px;
868
min-width: 16px;
869
}
870
decoration,
872
button.combo:checked { transition: none; } // workaround for menuitem selection
873
button.combo cellview {
875
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
876
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
877
}
878
#gtk-combobox-popup-menu {
880
padding: 2px 0;
881
menuitem {
883
min-height: $medium_size - 2px * 2;
884
padding: 0 8px;
885
}
886
// overflow arrows
888
> arrow {
889
&.top { margin-top: -2px; }
890
&.bottom { margin-bottom: -2px * 3; }
892
}
893
}
894
&.linked {
896
button:nth-child(2) {
897
&:dir(ltr) { @extend %linked:last-child; }
898
&:dir(rtl) { @extend %linked:first-child; }
899
}
900
}
901
&:drop(active) { // FIXME: untested
903
box-shadow: none;
904
// button.combo { @extend %button_basic:drop(active); }
906
}
907
}
908
// the combo is a composite widget so the way we do button linking doesn't
910
// work, special case needed. See
911
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
912
.linked:not(.vertical) > combobox {
914
> box > button.combo { @extend %linked_middle; }
915
&:first-child > box > button.combo { @extend %linked:first-child; }
917
&:last-child > box > button.combo { @extend %linked:last-child; }
919
&:only-child > box > button.combo { @extend %linked:only-child; }
921
}
922
.linked.vertical > combobox {
924
> box > button.combo { @extend %linked_vertical_middle; }
925
&:first-child > box > button.combo { @extend %linked_vertical:first-child; }
927
&:last-child > box > button.combo { @extend %linked_vertical:last-child; }
929
&:only-child > box > button.combo { @extend %linked_vertical:only-child; }
931
}
932
%combo_flat {
934
border-radius: 0;
935
background-image: none;
936
font-weight: inherit;
937
@include entry(flat-normal);
939
&:hover { box-shadow: inset 0 -2px $hint_fg_color; }
941
&:checked {
943
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
944
$primary_color 100%,
945
transparent 0%)
946
0 0 2 / 0 0 2px;
947
}
948
&:disabled { color: $disabled_fg_color; }
950
}
951
/************
954
* Toolbars *
955
************/
956
toolbar {
957
-GtkWidget-window-dragging: true;
958
padding: 2px;
959
background-color: $bg_color;
960
button { @extend %button_basic.flat; }
962
// on OSD
964
.osd & { background-color: transparent; }
965
// stand-alone OSD toolbars
967
&.osd {
968
transition: $shadow_transition;
969
padding: $container_padding;
970
border-radius: 2px;
971
box-shadow: $shadow_2, inset 0 1px $highlight_color;
972
background-color: $base_color;
973
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
975
&.left,
977
&.right,
978
&.top,
979
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
980
}
981
// toolbar separators
983
&.horizontal > separator { margin: 2px; }
984
&.vertical > separator { margin: 2px; }
985
&:not(.inline-toolbar):not(.osd) {
987
scale,
988
entry,
989
spinbutton,
990
button { margin: 2px; }
991
.linked entry,
993
.linked spinbutton,
994
.linked button {
995
&:not(:first-child) { margin-left: 0; }
996
&:not(:last-child) { margin-right: 0; }
997
}
998
spinbutton {
1000
entry,
1001
button { margin: 0; }
1002
}
1003
switch { margin: 2px + $container_padding 2px; }
1005
}
1006
}
1007
// searchbar, location-bar & inline-toolbar
1009
.inline-toolbar {
1010
padding: $container_padding;
1011
border-style: solid;
1012
border-width: 0 1px 1px;
1013
border-color: $border_color;
1014
background-color: $alt_base_color;
1015
}
1016
searchbar,
1018
.location-bar {
1019
padding: $container_padding;
1020
border-style: solid;
1021
border-width: 0 0 1px;
1022
border-color: $border_color;
1023
background-color: $bg_color;
1024
background-clip: border-box;
1025
}
1026
/***************
1029
* Header bars *
1030
***************/
1031
%titlebar,
1032
headerbar {
1033
transition: background-color $shorter_duration $deceleration_curve, color $longer_duration $deceleration_curve;
1034
min-height: $large_size;
1035
padding: 0 $container_padding;
1036
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1037
background-color: $titlebar_bg_color;
1038
color: $titlebar_fg_color;
1039
&:disabled :not(button) > label { color: $titlebar_disabled_fg_color; }
1041
&:backdrop {
1043
color: $titlebar_secondary_fg_color;
1044
&:disabled :not(button) > label { color: $titlebar_disabled_secondary_fg_color; }
1046
}
1047
.title {
1049
padding: 0 12px;
1050
font-weight: bold;
1051
}
1052
.subtitle {
1054
padding: 0 12px;
1055
font-size: smaller;
1056
@extend .dim-label;
1058
}
1059
.linked:not(.vertical) > entry:not(.flat) { border-radius: 2px; }
1061
button:not(.suggested-action):not(.destructive-action) {
1063
@extend %button_basic.flat;
1064
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1066
$titlebar_indicator_color 0%,
1067
transparent 0%)
1068
0 0 0 / 0 0 0px;
1069
color: $titlebar_secondary_fg_color;
1070
&:hover, &:active { color: $titlebar_fg_color; }
1072
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1074
&:checked {
1076
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1077
$titlebar_indicator_color 100%,
1078
transparent 0%)
1079
0 0 2 / 0 0 2px;
1080
color: $titlebar_fg_color;
1081
&:disabled { color: $titlebar_disabled_fg_color; }
1083
&, &:disabled { background-color: transparent; }
1085
}
1086
&:backdrop {
1088
color: $titlebar_hint_fg_color;
1089
&:hover, &:active { color: $titlebar_secondary_fg_color; }
1091
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1093
&:checked {
1095
color: $titlebar_secondary_fg_color;
1096
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1098
}
1099
}
1100
}
1101
button.suggested-action, button.destructive-action {
1103
&:disabled {
1104
background-color: $titlebar_divider_color;
1105
color: $titlebar_disabled_fg_color;
1106
}
1107
}
1108
&.selection-mode {
1110
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1111
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1112
transition: background-color 0.00001s $longer_duration, color $longer_duration $deceleration_curve;
1113
animation: header_ripple_effect $longer_duration $deceleration_curve;
1114
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1115
background-color: $primary_color;
1116
color: $inverse_fg_color;
1117
&:backdrop {
1119
color: $inverse_secondary_fg_color;
1120
}
1121
.subtitle:link { @extend *:link:selected; }
1123
button:not(.suggested-action):not(.destructive-action) {
1125
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1126
currentColor 0%,
1127
transparent 0%)
1128
0 0 0 / 0 0 0px;
1129
color: $inverse_fg_color;
1130
&:disabled { color: $inverse_disabled_fg_color; }
1132
&:checked {
1134
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1135
currentColor 100%,
1136
transparent 0%)
1137
0 0 2 / 0 0 2px;
1138
color: $inverse_fg_color;
1139
&:disabled { color: $inverse_disabled_fg_color; }
1141
}
1142
&:backdrop {
1144
color: $inverse_secondary_fg_color;
1145
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1147
&:checked {
1149
color: $inverse_secondary_fg_color;
1150
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1152
}
1153
}
1154
}
1155
.selection-menu {
1157
padding-left: 16px;
1158
padding-right: 16px;
1159
arrow { -GtkArrow-arrow-scaling: 1; }
1161
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1163
}
1164
}
1165
.tiled &,
1167
.maximized &,
1168
.fullscreen & {
1169
border-radius: 0; // squared corners when the window is maximized, tiled, or fullscreen
1170
box-shadow: $shadow_1;
1171
}
1172
&.default-decoration {
1174
min-height: $small_size;
1175
padding: $container_padding;
1176
box-shadow: inset 0 1px $titlebar_highlight_color;
1177
.tiled &,
1179
.maximized &,
1180
.fullscreen & { box-shadow: none; }
1181
button.titlebutton {
1183
min-height: $small_size;
1184
min-width: $small_size;
1185
margin: 0;
1186
padding: 0;
1187
}
1188
// workaround for non-animatable buttons
1190
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1191
}
1192
.solid-csd & {
1194
&:dir(rtl), &:dir(ltr) { // specificity bump
1195
// margin-left: -2px;
1196
// margin-right: -2px;
1197
// margin-top: -2px;
1198
// border-radius: 0;
1199
// box-shadow: inset 0 1px $titlebar_highlight_color;
1200
}
1201
}
1202
}
1203
headerbar {
1205
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1206
entry,
1207
spinbutton,
1208
// separator,
1209
button {
1210
margin-top: $container_padding;
1211
margin-bottom: $container_padding;
1212
}
1213
switch {
1215
margin-top: $container_padding * 2;
1216
margin-bottom: $container_padding * 2;
1217
}
1218
// reset button margins of the spinbutton
1220
spinbutton button {
1221
margin-top: 0;
1222
margin-bottom: 0;
1223
}
1224
}
1225
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1227
border-top-left-radius: 2px;
1228
border-top-right-radius: 2px;
1229
}
1230
headerbar { // headerbar border rounding
1232
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1233
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1234
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1236
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1238
&:first-child, &:last-child {
1239
border-top-left-radius: 2px;
1240
border-top-right-radius: 2px;
1241
}
1242
}
1243
}
1244
.titlebar:not(headerbar) {
1246
window.csd > & {
1247
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1248
padding: 0;
1249
background-color: transparent;
1250
background-image: none;
1251
border-style: none;
1252
box-shadow: none;
1253
}
1254
> separator {
1256
background-color: $titlebar_bg_color;
1257
background-image: image($border_color);
1258
}
1259
@extend %titlebar;
1261
}
1262
/************
1265
* Pathbars *
1266
************/
1267
%pathbar_button,
1268
.path-bar button {
1269
padding-left: ($medium_size - 24px) / 2;
1270
padding-right: ($medium_size - 24px) / 2;
1271
label:not(:only-child) {
1273
&:first-child { margin-left: 4px; }
1274
&:last-child { margin-right: 4px; }
1276
}
1277
&.slider-button {
1279
padding-left: (24px - 16px) / 2;
1280
padding-right: (24px - 16px) / 2;
1281
}
1282
:not(headerbar) & {
1284
@extend %flat_button;
1285
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1287
$primary_color 0%,
1288
transparent 0%)
1289
0 0 0 / 0 0 0px;
1290
border-radius: 2px;
1291
&:checked {
1293
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1294
$primary_color 100%,
1295
transparent 0%)
1296
0 0 2 / 0 0 2px;
1297
&, &:disabled { background-color: transparent; }
1299
}
1300
}
1301
}
1302
/**************
1305
* Tree Views *
1306
**************/
1307
treeview.view {
1308
@at-root * {
1309
-GtkTreeView-horizontal-separator: 4;
1310
-GtkTreeView-grid-line-width: 1;
1311
-GtkTreeView-grid-line-pattern: '';
1312
-GtkTreeView-tree-line-width: 1;
1313
-GtkTreeView-tree-line-pattern: '';
1314
-GtkTreeView-expander-size: 16;
1315
}
1316
border-left-color: $track_color; // this is actually the tree lines color,
1318
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1319
&:selected { border-left-color: $inverse_track_color; }
1321
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1323
&:hover, &:active, &:selected { border-radius: 0; }
1325
&.separator {
1327
min-height: 1px + 2px * 2;
1328
color: $border_color;
1329
}
1330
&:drop(active) {
1332
border-style: solid none;
1333
border-width: 1px;
1334
border-color: $accent_color;
1335
&.after { border-top-style: none; }
1337
&.before { border-bottom-style: none; }
1339
}
1340
&.expander {
1342
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1343
-gtk-icon-transform: rotate(-90deg);
1344
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1346
&:checked { -gtk-icon-transform: unset; }
1348
color: $secondary_fg_color;
1350
&:hover, &:active { color: $fg_color; }
1352
&:disabled { color: $disabled_secondary_fg_color; }
1354
&:selected {
1356
color: $inverse_secondary_fg_color;
1357
&:hover, &:active { color: $inverse_fg_color; }
1359
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1361
}
1362
}
1363
&.progressbar { // progress bar in treeviews
1365
border-bottom: $bar_size solid $primary_color;
1366
box-shadow: none;
1367
background-color: transparent;
1368
&:selected { border-bottom-color: $inverse_fg_color; }
1370
}
1371
&.trough { // progress bar trough in treeviews
1373
border-bottom: $bar_size solid rgba($primary_color, $lower_opacity);
1374
box-shadow: none;
1375
background-color: transparent;
1376
&:selected { border-bottom-color: $inverse_track_color; }
1378
}
1379
header {
1381
button {
1382
@extend row.activatable;
1383
padding: 2px 6px;
1385
border-style: none solid solid none;
1386
border-width: 1px;
1387
border-color: $border_color;
1388
border-radius: 0;
1389
background-clip: border-box;
1390
&, &:hover, &:active { box-shadow: none; }
1392
&, &:disabled { background-color: $base_color; }
1394
&:last-child { border-right-style: none; }
1396
}
1397
}
1398
button.dnd,
1400
header.button.dnd { // for treeview-like derive widgets
1401
padding: 2px 6px;
1402
border-style: none solid solid;
1403
border-width: 1px;
1404
border-color: $border_color;
1405
border-radius: 0;
1406
box-shadow: none;
1407
background-color: $base_color;
1408
background-clip: border-box;
1409
color: $primary_color;
1410
}
1411
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1413
}
1414
/*********
1417
* Menus *
1418
*********/
1419
menubar,
1420
.menubar {
1421
-GtkWidget-window-dragging: true;
1422
padding: 0;
1423
// box-shadow: inset 0 -1px $border_color;
1424
background-color: $titlebar_bg_color;
1425
> menuitem {
1427
transition: $shorter_transition;
1428
min-height: 20px;
1429
padding: 4px 8px;
1430
color: $titlebar_secondary_fg_color;
1431
&:hover { // Seems like it :hover even with keyboard focus
1433
transition: none;
1434
background-color: $titlebar_divider_color;
1435
color: $titlebar_fg_color;
1436
}
1437
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1439
label:disabled { color: inherit; } // to inherit the above color
1441
}
1442
}
1443
.csd.popup { background-color: transparent; }
1445
menu,
1447
.menu,
1448
.context-menu {
1449
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1450
padding: 4px 0;
1451
box-shadow: inset 0 1px $highlight_color;
1452
background-color: $base_color;
1453
border: 1px solid $border_color; // adds borders in a non composited env
1454
.csd & {
1456
border: none; // axes borders in a composited env
1457
border-radius: 2px;
1458
}
1459
menuitem {
1461
transition: background-color $shorter_duration $deceleration_curve;
1462
min-height: 20px;
1463
min-width: 40px;
1464
padding: 4px 8px;
1465
font: initial;
1466
text-shadow: none;
1467
&:hover {
1469
transition: none;
1470
background-color: $divider_color;
1471
}
1472
&:disabled { color: $disabled_fg_color; }
1474
// submenu indicators
1476
arrow {
1477
min-height: 16px;
1478
min-width: 16px;
1479
&:dir(ltr) {
1481
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1482
margin-left: 8px;
1483
}
1484
&:dir(rtl) {
1486
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1487
margin-right: 8px;
1488
}
1489
}
1490
// avoids labels color being overridden, see
1492
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1493
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1494
}
1495
// overflow arrows
1497
> arrow {
1498
min-height: 16px;
1499
min-width: 16px;
1500
padding: 4px;
1501
background-color: $base_color;
1502
color: $secondary_fg_color;
1503
&.top {
1505
margin-top: -4px;
1506
border-bottom: 1px solid $border_color;
1507
border-radius: 2px 2px 0 0;
1508
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1509
}
1510
&.bottom {
1512
margin-bottom: -4px * 3;
1513
border-top: 1px solid $border_color;
1514
border-radius: 0 0 2px 2px;
1515
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1516
}
1517
&:hover {
1519
background-image: image($divider_color);
1520
color: $fg_color;
1521
}
1522
&:disabled {
1524
border-color: transparent;
1525
background-color: transparent;
1526
color: transparent;
1527
// color: $disabled_secondary_fg_color;
1528
}
1529
}
1530
separator { margin: 4px 0; }
1532
}
1533
menuitem {
1535
accelerator { color: $secondary_fg_color; }
1536
}
1537
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1539
// Electron/Atom render all translucent colors in opaque colors.
1540
// It's a very critical issue for this theme and should be fixed by upstream...
1541
.popup:not(.csd) menu {
1542
$opaque_fg_color: if($variant == 'light', $grey_900, $white);
1543
$opaque_secondary_fg_color: if($variant == 'light', $grey_600, mix($white, $base_color, percentage(0.7)));
1544
$opaque_disabled_fg_color: if($variant == 'light', $grey_500, mix($white, $base_color, percentage(0.5)));
1545
$opaque_divider_color: if($variant == 'light', $grey_300, mix($white, $base_color, percentage(0.12)));
1546
menuitem {
1548
color: $opaque_fg_color;
1549
&:hover { background-color: $opaque_divider_color; }
1551
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1553
}
1554
// TODO: not working this, where/how i can set the accelerators?
1556
accelerator { color: $opaque_secondary_fg_color; }
1557
}
1558
/************
1561
* Popovers *
1562
************/
1563
popover.background {
1564
transition: $shadow_transition;
1565
padding: 2px;
1566
box-shadow: $shadow_2; // TODO: this should really have a highlight
1567
background-color: $lighter_bg_color;
1568
&:backdrop { box-shadow: $shadow_1; }
1570
&, .csd & {
1572
border-style: solid;
1573
border-width: 1px;
1574
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1575
border-radius: 2px + 1px;
1576
}
1577
> stack { margin: -4px; } // remove extra padding from menu style popovers
1579
> toolbar { margin: -2px; }
1581
> list,
1583
> .view,
1584
> toolbar {
1585
border-style: none;
1586
box-shadow: none;
1587
background-color: transparent;
1588
}
1589
&.touch-selection,
1591
&.magnifier,
1592
&.osd { @extend %osd; }
1593
// entry { @extend %entry.flat; }
1595
// button.combo { @extend %combo_flat; }
1597
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1599
&.menu button,
1601
button.model {
1602
@extend %simple_flat_button;
1603
min-height: 32px;
1605
padding: 0 8px;
1606
border-radius: 2px;
1607
&:checked { @extend %selected_items; }
1609
}
1610
separator { margin: 4px 0; }
1612
list separator { margin: 0; }
1614
}
1615
/*************
1617
* Notebooks *
1618
*************/
1619
notebook {
1620
> header {
1621
border-width: 1px;
1622
border-color: $border_color;
1623
background-color: $bg_color;
1624
background-clip: border-box;
1625
&.top {
1627
border-bottom-style: solid;
1628
> tabs {
1629
margin-bottom: -1px;
1630
> tab {
1631
&:hover { box-shadow: inset 0 -2px $track_color; }
1633
&:checked { box-shadow: inset 0 -2px $primary_color; }
1635
}
1636
}
1637
}
1638
&.bottom {
1640
border-top-style: solid;
1641
> tabs {
1642
margin-top: -1px;
1643
> tab {
1644
&:hover { box-shadow: inset 0 2px $track_color; }
1646
&:checked { box-shadow: inset 0 2px $primary_color; }
1648
}
1649
}
1650
}
1651
&.left {
1653
border-right-style: solid;
1654
> tabs {
1655
margin-right: -1px;
1656
> tab {
1657
&:hover { box-shadow: inset -2px 0 $track_color; }
1659
&:checked { box-shadow: inset -2px 0 $primary_color; }
1661
}
1662
}
1663
}
1664
&.right {
1666
border-left-style: solid;
1667
> tabs {
1668
margin-left: -1px;
1669
> tab {
1670
&:hover { box-shadow: inset 2px 0 $track_color; }
1672
&:checked { box-shadow: inset 2px 0 $primary_color; }
1674
}
1675
}
1676
}
1677
&.top > tabs > arrow {
1679
@extend %notebook_vert_arrows;
1680
border-top-style: none;
1682
}
1683
&.bottom > tabs > arrow {
1685
@extend %notebook_vert_arrows;
1686
border-bottom-style: none;
1688
}
1689
@at-root %notebook_vert_arrows {
1691
padding-left: 4px;
1692
padding-right: 4px;
1693
&.down {
1695
margin-left: -8px;
1696
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1697
}
1698
&.up {
1700
margin-right: -8px;
1701
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1702
}
1703
}
1704
&.left > tabs > arrow {
1706
@extend %notebook_horz_arrows;
1707
border-left-style: none;
1709
}
1710
&.right > tabs > arrow {
1712
@extend %notebook_horz_arrows;
1713
border-right-style: none;
1715
}
1716
@at-root %notebook_horz_arrows {
1718
padding-top: 4px;
1719
padding-bottom: 4px;
1720
&.down {
1722
margin-top: -8px;
1723
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1724
}
1725
&.up {
1727
margin-bottom: -8px;
1728
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1729
}
1730
}
1731
> tabs > arrow {
1733
@extend %simple_flat_button;
1734
min-height: 16px;
1736
min-width: 16px;
1737
border-radius: 0;
1738
}
1739
tab {
1741
transition: $longer_transition,
1742
background-size 0,
1743
background-image 0;
1744
min-height: $small_size;
1745
min-width: $small_size;
1746
padding: $container_padding 12px;
1747
outline-offset: -6px;
1749
border-width: 1px; // for reorderable tabs
1751
border-color: transparent; //
1752
background-image: radial-gradient(circle farthest-corner at center,
1754
$primary_color 10%,
1755
transparent 0%);
1756
background-repeat: no-repeat;
1757
background-position: center;
1758
background-size: 0% 0%;
1759
color: $secondary_fg_color;
1761
font-weight: 500;
1762
&:hover {
1764
color: $fg_color;
1765
&.reorderable-page {
1767
border-color: $border_color;
1768
background-color: $alt_base_color;
1769
}
1770
}
1771
&:disabled { color: $disabled_secondary_fg_color; }
1773
&:checked {
1775
transition: $longer_transition,
1776
background-size $longer_duration $deceleration_curve,
1777
background-image $longer_duration + $ripple_duration $deceleration_curve;
1778
background-image: radial-gradient(circle farthest-corner at center,
1779
transparent 10%,
1780
transparent 0%);
1781
background-size: 1000% 1000%;
1782
color: $fg_color;
1783
&:disabled { color: $disabled_fg_color; }
1785
&.reorderable-page {
1787
border-color: $border_color;
1788
background-color: $base_color;
1789
}
1790
}
1791
// colors the button like the label, overridden otherwise
1793
button.flat {
1794
@extend %small_button;
1795
&:last-child {
1797
margin-left: $container_padding;
1798
margin-right: $container_padding - 12px;
1799
}
1800
&:first-child {
1802
margin-left: $container_padding - 12px;
1803
margin-right: $container_padding;
1804
}
1805
}
1806
}
1807
&.top,
1809
&.bottom {
1810
tabs {
1811
padding-left: 8px;
1812
padding-right: 8px;
1813
&:not(:only-child) {
1815
&:first-child { margin-left: 0; }
1816
&:last-child { margin-right: 0; }
1817
}
1818
tab {
1820
&.reorderable-page {
1821
margin: 0 -1px;
1822
border-style: none solid;
1823
}
1824
}
1825
}
1826
}
1827
&.left,
1829
&.right {
1830
tabs {
1831
padding-top: 8px;
1832
padding-bottom: 8px;
1833
&:not(:only-child) {
1835
&:first-child { margin-top: 0; }
1836
&:last-child { margin-bottom: 0; }
1837
}
1838
tab {
1840
&.reorderable-page {
1841
margin: -1px 0;
1842
border-style: solid none;
1843
}
1844
}
1845
}
1846
}
1847
}
1848
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1850
background-color: $base_color;
1851
entry:not(.search),
1853
spinbutton:not(.vertical) { @extend %entry.flat; }
1854
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1856
button.combo { @extend %combo_flat; }
1858
}
1859
}
1860
/**************
1863
* Scrollbars *
1864
**************/
1865
scrollbar {
1866
$_slider_min_length: 24px;
1867
// disable steppers
1869
@at-root * {
1870
-GtkScrollbar-has-backward-stepper: false;
1871
-GtkScrollbar-has-forward-stepper: false;
1872
}
1873
transition: $longer_transition;
1875
background-color: $base_color;
1876
background-clip: $extra_background_clip;
1877
// scrollbar border
1879
&.top { border-bottom: 1px solid $border_color; }
1880
&.bottom { border-top: 1px solid $border_color; }
1881
&.left { border-right: 1px solid $border_color; }
1882
&.right { border-left: 1px solid $border_color; }
1883
// slider
1885
slider {
1886
transition: $shorter_transition, margin 0, border-width 0;
1887
min-width: 8px;
1888
min-height: 8px;
1889
border: 4px solid transparent;
1890
border-radius: $circular_radius;
1891
background-clip: padding-box;
1892
background-color: $hint_fg_color;
1893
&:hover { background-color: $secondary_fg_color; }
1895
&:active { background-color: $fg_color; }
1897
&:disabled { background-color: $disabled_secondary_fg_color; }
1899
}
1900
&.fine-tune {
1902
slider {
1903
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1904
min-width: 4px;
1905
min-height: 4px;
1906
}
1907
&.horizontal slider { margin: 2px 0; }
1909
&.vertical slider { margin: 0 2px; }
1911
}
1912
&.overlay-indicator {
1914
&:not(.dragging):not(.hovering) {
1915
border-color: transparent;
1916
background-color: transparent;
1917
slider {
1919
min-width: 4px;
1920
min-height: 4px;
1921
margin: 4px - 1px;
1922
border: 1px solid rgba($base_color, $lower_opacity);
1923
}
1924
button {
1926
min-width: 4px;
1927
min-height: 4px;
1928
margin: 4px - 1px;
1929
border: 1px solid rgba($base_color, $lower_opacity);
1930
border-radius: $circular_radius;
1931
background-color: $hint_fg_color;
1932
background-clip: padding-box;
1933
-gtk-icon-source: none;
1934
&:disabled { background-color: $disabled_secondary_fg_color; }
1936
}
1937
&.horizontal {
1939
slider { min-width: $_slider_min_length; }
1940
button { min-width: 8px; }
1942
}
1943
&.vertical {
1945
slider { min-height: $_slider_min_length; }
1946
button { min-height: 8px; }
1948
}
1949
}
1950
&.dragging,
1952
&.hovering { background-color: rgba($base_color, $higher_opacity); }
1953
}
1954
&.horizontal slider { min-width: $_slider_min_length; }
1956
&.vertical slider { min-height: $_slider_min_length; }
1958
// button styling
1960
button {
1961
@extend %simple_flat_button;
1962
min-width: 16px;
1964
min-height: 16px;
1965
padding: 0;
1966
border-radius: 0;
1967
}
1968
// button icons
1970
&.vertical {
1971
button {
1972
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1973
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1975
}
1976
}
1977
&.horizontal {
1979
button {
1980
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1981
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1983
}
1984
}
1985
}
1986
/**********
1989
* Switch *
1990
**********/
1991
switch {
1992
transition: $longer_transition;
1993
margin: $container_padding 0;
1994
padding: 0 2px;
1995
border: 5px solid transparent;
1996
border-radius: $circular_radius;
1997
background-color: $track_color;
1998
background-clip: padding-box;
1999
font-size: 0;
2000
&:disabled { background-color: $divider_color; }
2002
&:checked {
2004
background-color: rgba($accent_color, 0.5);
2005
&:disabled { background-color: rgba($accent_color, 0.3); }
2007
}
2008
slider {
2010
transition: $longer_transition, $shadow_transition;
2011
min-width: 20px;
2012
min-height: 20px;
2013
margin: -3px -2px;
2014
border-radius: $circular_radius;
2015
-gtk-outline-radius: $circular_radius;
2016
box-shadow: $shadow_1;
2017
background-color: $base_color;
2018
}
2019
&:hover slider { box-shadow: $shadow_2; }
2021
&:checked slider {
2023
transition: $longer_transition, $shadow_transition, background-image 0, background-color 0.00001s $longer_duration;
2024
animation: needs_attention $longer_duration $deceleration_curve;
2025
background-color: $accent_color;
2026
color: $inverse_fg_color;
2027
}
2028
&:disabled slider { background-color: $alt_base_color; }
2030
&:checked:disabled slider { animation: none; }
2032
row:selected & {
2034
}
2035
}
2036
/*************************
2039
* Check and Radio items *
2040
*************************/
2041
// draw regular check and radio items using our PNG assets
2042
// all assets are rendered from assets.svg. never add pngs directly
2043
// selection-mode
2045
.view.content-view.check:not(list),
2046
.content-view .tile check:not(list) {
2047
min-height: 40px;
2048
min-width: 40px;
2049
margin: 0;
2050
padding: 0;
2051
box-shadow: none;
2052
background-color: transparent;
2053
background-image: none;
2054
-gtk-icon-shadow: $shadow_1;
2055
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2057
@each $s, $as in ('', '-unchecked'),
2059
(':checked', '-checked') {
2060
&#{$s} {
2061
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2062
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2063
}
2064
}
2065
}
2066
checkbutton.text-button,
2068
radiobutton.text-button {
2069
// this is for a nice focus on check and radios text
2070
padding: 2px;
2071
outline-offset: 0;
2072
label:not(:only-child) { margin: 0 4px; }
2074
}
2075
check,
2077
radio {
2078
min-height: 24px;
2079
min-width: 24px;
2080
margin: -($large_size - 24px) / 2;
2081
padding: ($large_size - 24px) / 2;
2082
@extend %simple_flat_button;
2084
@extend %circular_button;
2086
&:checked, &:indeterminate {
2088
color: $accent_color;
2089
&:disabled { color: $disabled_accent_color; }
2091
}
2092
// &:only-child { margin: -12px; }
2094
row:selected &:not(:checked):not(:indeterminate) {
2096
color: $inverse_secondary_fg_color;
2097
&:hover, &:active { color: $inverse_fg_color; }
2099
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2101
}
2102
popover & {
2104
&, &:hover, &:disabled {
2105
box-shadow: none;
2106
background-image: none;
2107
}
2108
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2110
&.left:dir(rtl) {
2112
margin-left: -16px;
2113
margin-right: -8px;
2114
}
2115
&.right:dir(ltr) {
2117
margin-left: -8px;
2118
margin-right: -16px;
2119
}
2120
}
2121
menu menuitem & {
2123
transition: none;
2124
min-height: 16px;
2125
min-width: 16px;
2126
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2127
padding: 0;
2128
&:dir(ltr) { margin-right: 8px; }
2130
&:dir(rtl) { margin-left: 8px; }
2132
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2134
&, &:hover, &:disabled {
2136
box-shadow: none;
2137
// color: inherit;
2138
}
2139
}
2140
}
2141
%check,
2143
check {
2144
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2145
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2146
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2148
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2149
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2151
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2152
}
2153
%radio,
2155
radio {
2156
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2157
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2158
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2160
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2161
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2163
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2164
border-image-slice: $large_size / 2px;
2166
border-image-width: $large_size / 2;
2167
$radio_indicator: 10px / $large_size / 2;
2169
& {
2171
border-image-source: -gtk-gradient(radial,
2172
center center, 0,
2173
center center, 0.001,
2174
to($accent_color),
2175
to(transparent));
2176
}
2177
&:checked:not(:indeterminate) {
2179
border-image-source: -gtk-gradient(radial,
2180
center center, 0,
2181
center center, $radio_indicator,
2182
to($accent_color),
2183
to(transparent));
2184
}
2185
&:checked:not(:indeterminate):disabled {
2187
border-image-source: -gtk-gradient(radial,
2188
center center, 0,
2189
center center, $radio_indicator,
2190
to($disabled_accent_color),
2191
to(transparent));
2192
}
2193
}
2194
%small_check,
2196
menu menuitem check {
2197
& {
2198
border-radius: 2px;
2199
-gtk-outline-radius: 2px;
2200
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")),
2201
-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2202
}
2203
&:checked {
2205
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")),
2206
-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2207
}
2208
&:indeterminate {
2210
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")),
2211
-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2212
}
2213
}
2214
%small_radio,
2216
menu menuitem radio {
2217
& {
2218
border-image: none;
2219
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")),
2220
-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2221
}
2222
&:checked {
2224
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")),
2225
-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2226
}
2227
&:indeterminate {
2229
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")),
2230
-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2231
}
2232
}
2233
// ANIMATION:
2235
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2236
// the transformation is set on the active state and it get reset on the checked state.
2237
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2238
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2240
check:not(:checked):indeterminate:active,
2242
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2243
check:not(:checked),
2245
radio:not(:checked) {
2246
& {
2247
transition: $longer_transition,
2248
background-size $ripple_duration $deceleration_curve,
2249
background-image $ripple_duration * 2 $deceleration_curve,
2250
-gtk-icon-transform 0;
2251
}
2252
&:active {
2254
transition: $longer_transition,
2255
background-size 0,
2256
background-image 0,
2257
-gtk-icon-transform 0;
2258
}
2259
menu menuitem & { transition: none; }
2261
}
2262
treeview.view check,
2264
treeview.view radio {
2265
padding: 0;
2266
&:hover {
2268
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2269
&:disabled { box-shadow: none; }
2271
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2273
}
2274
& {
2276
color: $secondary_fg_color;
2277
&:hover, &:active { color: $fg_color; }
2279
&:disabled { color: $disabled_secondary_fg_color; }
2281
&:checked, &:indeterminate { color: $accent_color; }
2283
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2285
}
2286
&:selected {
2288
color: $inverse_secondary_fg_color;
2289
&:hover, &:active { color: $inverse_fg_color; }
2291
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2293
&:checked, &:indeterminate { color: $accent_color; }
2295
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2297
}
2298
}
2299
treeview.view radio:checked {
2301
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2302
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2303
border-image: none;
2304
}
2305
/************
2308
* GtkScale *
2309
************/
2310
scale {
2311
// sizing
2312
$_marks_length: 8px;
2313
$_marks_distance: 8px;
2314
$trough_size: 2px;
2316
$slider_size: 24px;
2318
$marks_slider_size: 30px;
2319
$slider_margin: -($slider_size - $trough_size) / 2;
2321
$marks_slider_margin: -($marks_slider_size - $trough_size) - $slider_margin;
2322
$color_slider_margin: -($slider_size) / 2;
2324
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2325
min-height: $medium_size - $slider_size;
2327
min-width: $medium_size - $slider_size;
2328
padding: ($slider_size / 2);
2329
// the slider is inside the trough, so to have make it bigger there's a negative margin
2331
slider {
2332
min-height: $slider_size;
2333
min-width: $slider_size;
2334
margin: $slider_margin;
2335
}
2336
// the backing bit
2338
trough {
2339
transition: $longer_transition;
2340
outline-offset: 2px;
2341
background-color: $track_color;
2342
&:disabled { background-color: $divider_color; }
2344
}
2345
// the colored part of the backing bit
2347
highlight {
2348
transition: $longer_transition;
2349
background-color: $accent_color;
2350
&:disabled { background-color: transparent; }
2352
}
2353
// this is another differently styled part of the backing bit, the most relevant use case is for example
2355
// in media player to indicate how much video stream as been cached
2356
fill {
2357
transition: $longer_transition;
2358
background-color: $track_color;
2359
&:disabled { background-color: transparent; }
2361
}
2362
slider {
2364
transition: all $shorter_duration $standard_curve;
2365
// border-radius: 100%;
2366
// background-color: $accent_color;
2367
background-repeat: no-repeat;
2368
background-position: center;
2369
@each $s, $as in ('', ''),
2371
(':disabled', '-disabled') {
2372
&#{$s} {
2373
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2374
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2376
}
2377
}
2378
background-size: calc(100% - 10px);
2380
&:hover { background-size: calc(100% - 8px); }
2382
&:active { background-size: calc(100% - 6px); }
2384
}
2385
// click-and-hold the slider to activate
2387
&.fine-tune {
2388
// to make the slider shrink in fine-tune mode
2389
slider { background-size: calc(100% - 12px); }
2390
}
2391
marks label,
2393
value { color: $hint_fg_color; }
2394
marks {
2396
color: $track_color;
2397
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2399
(bottom, bottom, top),
2400
(top, left, right),
2401
(bottom, right, left) {
2402
&.#{$marks_class} {
2403
margin-#{$marks_margin}: $_marks_distance;
2404
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2405
}
2406
}
2407
}
2408
&.horizontal {
2410
indicator {
2411
min-height: $_marks_length;
2412
min-width: 1px;
2413
}
2414
}
2415
&.vertical {
2417
indicator {
2418
min-height: 1px;
2419
min-width: $_marks_length;
2420
}
2421
}
2422
// *WARNING* scale with marks madness following
2424
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2426
('vertical', 'vert') {
2427
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2428
('marks-after', 'marks-after:not(.marks-before)') {
2429
&.#{$dir_class}.#{$marks_class} {
2430
slider {
2431
@each $state, $state_infix in ('', ''),
2432
(':disabled', '-disabled') {
2433
&#{$state} {
2434
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2435
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2437
}
2438
}
2439
@if $dir_class == 'horizontal' {
2441
min-height: $marks_slider_size;
2442
min-width: $slider_size;
2443
@if $marks_infix == 'marks-before' {
2445
margin-top: $marks_slider_margin;
2446
background-position: center calc(100% - 5px);
2448
&:hover { background-position: center calc(100% - 4px); }
2450
&:active { background-position: center calc(100% - 3px); }
2452
}
2453
@if $marks_infix == 'marks-after' {
2455
margin-bottom: $marks_slider_margin;
2456
background-position: center calc(5px);
2458
&:hover { background-position: center calc(4px); }
2460
&:active { background-position: center calc(3px); }
2462
}
2463
}
2464
@if $dir_class == 'vertical' {
2466
min-height: $slider_size;
2467
min-width: $marks_slider_size;
2468
@if $marks_infix == 'marks-before' {
2470
margin-left: $marks_slider_margin;
2471
background-position: calc(5px) center;
2473
&:hover { background-position: calc(4px) center; }
2475
&:active { background-position: calc(3px) center; }
2477
}
2478
@if $marks_infix == 'marks-after' {
2480
margin-right: $marks_slider_margin;
2481
background-position: calc(100% - 5px) center;
2483
&:hover { background-position: calc(100% - 4px) center; }
2485
&:active { background-position: calc(100% - 3px) center; }
2487
}
2488
}
2489
}
2490
&.fine-tune slider {
2492
@if $dir_class == 'horizontal' {
2493
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2494
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2496
}
2497
@if $dir_class == 'vertical' {
2499
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2500
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2502
}
2503
}
2504
}
2505
}
2506
}
2507
&.color {
2509
min-height: 0;
2510
min-width: 0;
2511
&.horizontal {
2513
padding: 0 0 12px 0;
2514
slider {
2516
&:dir(ltr), &:dir(rtl) { // specificity bump
2517
margin-bottom: $color_slider_margin;
2518
margin-top: $color_marks_slider_margin;
2519
}
2520
}
2521
}
2522
&.vertical {
2524
&:dir(ltr) {
2525
padding: 0 0 0 12px;
2526
slider {
2528
margin-left: $color_slider_margin;
2529
margin-right: $color_marks_slider_margin;
2530
}
2531
}
2532
&:dir(rtl) {
2534
padding: 0 12px 0 0;
2535
slider {
2537
margin-right: $color_slider_margin;
2538
margin-left: $color_marks_slider_margin;
2539
}
2540
}
2541
}
2542
}
2543
}
2544
/*****************
2547
* Progress bars *
2548
*****************/
2549
progressbar {
2550
// sizing
2551
&.horizontal {
2552
trough,
2553
progress { min-height: $bar_size; }
2554
}
2555
&.vertical {
2557
trough,
2558
progress { min-width: $bar_size; }
2559
}
2560
// FIXME: insensitive state missing and some other state should be set probably
2562
color: $hint_fg_color;
2563
font-size: smaller;
2564
trough { background-color: rgba($primary_color, $lower_opacity); }
2566
progress { background-color: $primary_color; }
2568
&.osd { // progressbar.osd used for epiphany page loading progress
2570
// min-width: $bar_size;
2571
// min-height: $bar_size;
2572
// background-color: transparent;
2573
// trough { background-color: transparent; }
2575
// progress { background-color: $primary_color; }
2577
}
2578
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2580
}
2581
/*************
2584
* Level Bar *
2585
*************/
2586
levelbar {
2587
&.horizontal {
2588
block { min-height: $bar_size; }
2589
&.discrete block {
2591
min-width: $medium_size;
2592
&:not(:last-child) { margin-right: 2px; }
2594
}
2595
}
2596
&.vertical {
2598
block { min-width: $bar_size; }
2599
&.discrete block {
2601
min-height: $medium_size;
2602
&:not(:last-child) { margin-bottom: 2px; }
2604
}
2605
}
2606
// imitate the entry style
2608
trough {
2609
padding: 2px;
2610
border-radius: 2px;
2611
box-shadow: $shadow_1;
2612
background-color: $base_color;
2613
&:disabled { background-color: $alt_base_color; }
2615
}
2616
block {
2618
&.low { background-color: $warning_color; }
2619
&.high,
2621
&:not(.empty) { background-color: $primary_color; }
2622
&.full { background-color: $success_color; }
2624
&.empty { background-color: $divider_color; }
2626
}
2627
}
2628
/****************
2631
* Print dialog *
2632
*****************/
2633
printdialog {
2634
paper {
2635
padding: 0;
2636
border: 1px solid $border_color;
2637
background-color: $base_color;
2638
color: $fg_color;
2639
}
2640
.dialog-action-box { margin: 12px; }
2642
}
2643
/**********
2646
* Frames *
2647
**********/
2648
frame > border,
2649
.frame {
2650
margin: 0;
2651
padding: 0;
2652
border: 1px solid $border_color;
2653
border-radius: 0;
2654
box-shadow: none;
2655
&.flat { border-style: none; }
2657
}
2658
frame.flat > border { @extend .frame.flat; } // for backporting
2660
actionbar > revealer > box {
2662
padding: $container_padding;
2663
border-top: 1px solid $border_color;
2664
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2666
}
2667
scrolledwindow {
2669
viewport.frame { // avoid double borders when viewport inside scrolled window
2670
border-style: none;
2671
}
2672
// This is used when content is touch-dragged past boundaries.
2674
// draws a box on top of the content, the size changes programmatically.
2675
@at-root overshoot {
2676
&.top { @include overshoot(top); }
2677
&.bottom { @include overshoot(bottom); }
2679
&.left { @include overshoot(left); }
2681
&.right { @include overshoot(right); }
2683
}
2684
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2686
@at-root undershoot {
2687
&.top { @include undershoot(top); }
2688
&.bottom { @include undershoot(bottom); }
2690
&.left { @include undershoot(left); }
2692
&.right { @include undershoot(right); }
2694
}
2695
@at-root junction { // the small square between two scrollbars
2697
border-style: solid none none solid;
2698
border-width: 1px;
2699
border-color: $border_color;
2700
background-color: $base_color;
2701
&:dir(rtl) { border-style: solid solid none none; }
2703
}
2704
}
2705
// vbox and hbox separators
2707
separator {
2708
min-width: 1px;
2709
min-height: 1px;
2710
background-color: $border_color;
2711
}
2712
%hide_separators {
2714
min-width: 0;
2715
min-height: 0;
2716
background-color: transparent;
2717
}
2718
/*********
2721
* Lists *
2722
*********/
2723
list {
2724
border-color: $border_color;
2725
background-color: $base_color;
2726
row { padding: 2px; }
2728
}
2729
// FIXME
2731
$row_transition: $longer_transition, background-color 0, color 0;
2732
row {
2734
&.activatable {
2735
transition: $row_transition,
2736
background-size $ripple_duration $deceleration_curve,
2737
background-image $ripple_duration * 2 $deceleration_curve;
2738
box-shadow: inset 0 0 0 9999px transparent;
2739
background-image: radial-gradient(circle farthest-corner at center,
2740
transparent 10%,
2741
transparent 0%);
2742
background-repeat: no-repeat;
2743
background-position: center;
2744
background-size: 1000% 1000%;
2745
&:hover {
2747
transition: $row_transition,
2748
box-shadow 0,
2749
background-size $ripple_duration $deceleration_curve,
2750
background-image $ripple_duration * 2 $deceleration_curve;
2751
box-shadow: inset 0 0 0 9999px $row_fill_color;
2752
}
2753
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2755
&:active {
2756
transition: $row_transition,
2757
background-size 0,
2758
background-image 0;
2759
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2760
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2761
background-image: radial-gradient(circle farthest-corner at center,
2762
$semi_fill_color 10%,
2763
transparent 0%);
2764
background-size: 0% 0%;
2765
}
2766
}
2767
&:selected { @extend %selected_items; }
2769
}
2770
/*********************
2773
* App Notifications *
2774
*********************/
2775
.app-notification {
2776
@extend %osd;
2777
@extend toolbar.osd;
2779
margin: 8px;
2781
button { @extend %button_basic.flat; }
2783
&.frame,
2785
border { border-style: none; }
2786
}
2787
/*************
2790
* Expanders *
2791
*************/
2792
expander {
2793
arrow {
2794
transition: all $shorter_duration $standard_curve;
2795
min-width: 16px;
2796
min-height: 16px;
2797
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2798
-gtk-icon-transform: rotate(-90deg);
2799
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2801
&:checked { -gtk-icon-transform: unset; }
2803
color: $secondary_fg_color;
2805
&:hover, &:active { color: $fg_color; }
2807
&:disabled { color: $disabled_secondary_fg_color; }
2809
&:selected {
2811
color: $inverse_secondary_fg_color;
2812
&:hover, &:active { color: $inverse_fg_color; }
2814
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2816
}
2817
}
2818
}
2819
/************
2822
* Calendar *
2823
************/
2824
calendar {
2825
padding: 1px;
2826
border: 1px solid $border_color;
2827
color: $fg_color;
2828
&:disabled { color: $disabled_fg_color; }
2830
&:selected {
2832
@extend %selected_items;
2833
border-radius: 2px + 1px;
2835
}
2836
&.header {
2838
border-style: none none solid;
2839
border-radius: 0;
2840
}
2841
&.button { @extend %simple_flat_button; }
2843
&.highlight {
2845
color: $secondary_fg_color;
2846
font-weight: 500;
2847
}
2848
&:indeterminate { color: $disabled_secondary_fg_color; }
2850
}
2851
/***********
2854
* Dialogs *
2855
***********/
2856
messagedialog { // Message Dialog styling
2857
&.background { background-color: $lighter_bg_color; }
2858
.titlebar {
2860
min-height: $small_size;
2861
border-style: none;
2862
box-shadow: inset 0 1px $highlight_color;
2863
background-color: $lighter_bg_color;
2864
color: $fg_color;
2865
&:backdrop { color: $secondary_fg_color; }
2867
}
2868
&.csd { // rounded bottom border styling for csd version
2870
&.background {
2871
// bigger radius for better antialiasing
2872
border-bottom-left-radius: 2px;
2873
border-bottom-right-radius: 2px;
2874
}
2875
.dialog-action-area button {
2877
padding: 8px 16px;
2878
border-top: 1px solid $border_color;
2879
border-radius: 0;
2880
@extend %simple_flat_button;
2882
&:first-child { border-bottom-left-radius: 2px; }
2884
&:last-child { border-bottom-right-radius: 2px; }
2886
}
2887
}
2888
entry { @extend %entry.flat; }
2890
}
2891
filechooser {
2893
.dialog-action-box { border-top: 1px solid $border_color; }
2894
#pathbarbox {
2896
border-bottom: 1px solid $border_color;
2897
background-color: $bg_color;
2898
}
2899
}
2900
filechooserbutton:drop(active) {
2902
box-shadow: none;
2903
}
2904
/***********
2907
* Sidebar *
2908
***********/
2909
.sidebar {
2910
border-style: none;
2911
background-color: $lighter_bg_color;
2912
@at-root %sidebar_left,
2914
&:dir(ltr),
2915
&.left,
2916
&.left:dir(rtl) {
2917
border-right: 1px solid $border_color;
2918
border-left-style: none;
2919
}
2920
@at-root %sidebar_right,
2922
&:dir(rtl),
2923
&.right {
2924
border-left: 1px solid $border_color;
2925
border-right-style: none;
2926
}
2927
list { background-color: transparent; }
2929
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2931
}
2932
stacksidebar {
2934
&.sidebar {
2935
&:dir(ltr),
2936
&.left,
2937
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2938
&:dir(rtl),
2940
&.right { list { @extend %sidebar_right; }}
2941
}
2942
row {
2944
padding: 10px 4px;
2945
> label {
2947
padding-left: 6px;
2948
padding-right: 6px;
2949
}
2950
&.needs-attention > label { @extend %needs_attention; }
2952
}
2953
}
2954
/****************
2957
* File chooser *
2958
****************/
2959
// dim the sidebar icons, see bug #786613 for details on this oddity
2960
row {
2961
image.sidebar-icon { color: $secondary_fg_color; }
2962
&:selected image.sidebar-icon { color: $inverse_secondary_fg_color; }
2964
}
2965
placessidebar {
2967
> viewport.frame { border-style: none; }
2968
list { padding: (4px - 3px) 0 4px; }
2970
row {
2972
// Needs overriding of the GtkListBoxRow padding
2973
min-height: 32px;
2974
margin: -1px 0; // Remove unknown margins
2975
padding: 0;
2976
// Using margins/padding directly in the SidebarRow
2978
// will make the animation of the new bookmark row jump
2979
> revealer { padding: 0 12px; }
2980
&:selected { color: $inverse_fg_color; }
2982
&:disabled { color: $disabled_fg_color; }
2984
image.sidebar-icon {
2986
&:dir(ltr) { padding-right: 8px; }
2987
&:dir(rtl) { padding-left: 8px; }
2988
}
2989
label.sidebar-label {
2991
&:dir(ltr) { padding-right: 2px; }
2992
&:dir(rtl) { padding-left: 2px; }
2993
}
2994
@at-root button.sidebar-button {
2996
@extend %simple_flat_button;
2997
@extend %small_button;
2999
row:selected & { @extend %button_selected.flat; }
3001
}
3002
&.sidebar-placeholder-row {
3004
min-height: 2px;
3005
padding: 0 8px;
3006
background-image: image($accent_color);
3007
background-clip: content-box;
3008
}
3009
&.sidebar-new-bookmark-row { color: $accent_color; }
3011
&:drop(active):not(:disabled) {
3013
box-shadow: inset 0 0 0 2px $accent_color;
3014
&:selected {
3016
// background-color: $accent_color;
3017
// color: $inverse_fg_color;
3018
}
3019
}
3020
}
3021
}
3022
placesview {
3024
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3025
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3027
// this selects the "connect to server" label
3029
> actionbar > revealer > box > label {
3030
padding-left: 8px;
3031
padding-right: 8px;
3032
}
3033
}
3034
/*********
3037
* Paned *
3038
*********/
3039
paned {
3040
> separator {
3041
min-width: 1px;
3042
min-height: 1px;
3043
-gtk-icon-source: none; // defeats the ugly default handle decoration
3044
border-style: none; // just to be sure
3045
background-color: transparent;
3046
// workaround, using background istead of a border since the border will get rendered twice (?)
3047
background-image: image($border_color);
3048
background-size: 1px 1px;
3049
background-clip: content-box; // avoids borders image being rendered twice (?)
3050
&.wide {
3052
min-width: 6px;
3053
min-height: 6px;
3054
background-color: $bg_color;
3055
background-image: image($border_color), image($border_color);
3056
background-size: 1px 1px, 1px 1px;
3057
}
3058
}
3059
&.horizontal > separator {
3061
background-repeat: repeat-y;
3062
&:dir(ltr) {
3064
margin: 0 -8px 0 0;
3065
padding: 0 8px 0 0;
3066
background-position: left;
3067
}
3068
&:dir(rtl) {
3070
margin: 0 0 0 -8px;
3071
padding: 0 0 0 8px;
3072
background-position: right;
3073
}
3074
&.wide {
3076
margin: 0;
3077
padding: 0;
3078
background-repeat: repeat-y, repeat-y;
3079
background-position: left, right;
3080
}
3081
}
3082
&.vertical > separator {
3084
margin: 0 0 -8px 0;
3085
padding: 0 0 8px 0;
3086
background-repeat: repeat-x;
3087
background-position: top;
3088
&.wide {
3090
margin: 0;
3091
padding: 0;
3092
background-repeat: repeat-x, repeat-x;
3093
background-position: bottom, top;
3094
}
3095
}
3096
}
3097
/**************
3100
* GtkInfoBar *
3101
**************/
3102
infobar {
3103
border-style: none;
3104
&.info { background-color: $info_bg_color; }
3106
&.question { background-color: $question_bg_color; }
3108
&.warning { background-color: $warning_bg_color; }
3110
&.error { background-color: $error_bg_color; }
3112
&.info,
3114
&.question,
3115
&.warning,
3116
&.error {
3117
> label, & { color: $inverse_fg_color; }
3118
button { @extend %button_selected; }
3120
selection {}
3122
*:link { @extend %link_selected; }
3124
}
3125
}
3126
/************
3129
* Tooltips *
3130
************/
3131
tooltip {
3132
&.background {
3133
// background-color needs to be set this way otherwise it gets drawn twice
3134
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3135
box-shadow: inset 0 1px $highlight_color;
3136
background-color: rgba($base_color, $higher_opacity);
3137
}
3138
// @extend %osd;
3140
// padding: 4px; /* not working */
3142
border-radius: 2px;
3143
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3144
&:not(.csd):not(.unity-csd) {
3146
border: 1px solid $border_color;
3147
border-radius: 2px + 1px;
3148
background-clip: $extra_background_clip;
3149
}
3150
// FIXME: we need a border or tooltips vanish on black background.
3152
decoration { background-color: transparent; }
3153
label {
3155
// tooltip label already seems to have 6px margins
3156
min-height: 32px - 6px * 2;
3157
padding: 0 8px - 6px;
3158
}
3159
* {
3161
// workaround for Eclipse.
3162
// do not include any declaration here.
3163
// padding: 0;
3164
// background-color: transparent;
3165
// color: inherit;
3166
}
3167
}
3168
/*****************
3171
* Color Chooser *
3172
*****************/
3173
colorswatch {
3174
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3175
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3176
// applied to the overlay box.
3177
// base color corners rounding
3179
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3180
// sports a bigger radius.
3181
// nth-child is needed by the custom color strip.
3182
&.top {
3184
border-top-left-radius: $material_radius + 0.5px;
3185
border-top-right-radius: $material_radius + 0.5px;
3186
overlay {
3188
border-top-left-radius: $material_radius;
3189
border-top-right-radius: $material_radius;
3190
}
3191
}
3192
&.bottom {
3194
border-bottom-left-radius: $material_radius + 0.5px;
3195
border-bottom-right-radius: $material_radius + 0.5px;
3196
overlay {
3198
border-bottom-left-radius: $material_radius;
3199
border-bottom-right-radius: $material_radius;
3200
}
3201
}
3202
&.left,
3204
&:first-child:not(.top) {
3205
border-top-left-radius: $material_radius + 0.5px;
3206
border-bottom-left-radius: $material_radius + 0.5px;
3207
overlay {
3209
border-top-left-radius: $material_radius;
3210
border-bottom-left-radius: $material_radius;
3211
}
3212
}
3213
&.right,
3215
&:last-child:not(.bottom) {
3216
border-top-right-radius: $material_radius + 0.5px;
3217
border-bottom-right-radius: $material_radius + 0.5px;
3218
overlay {
3220
border-top-right-radius: $material_radius;
3221
border-bottom-right-radius: $material_radius;
3222
}
3223
}
3224
&.dark { color: $light_fg_color; }
3226
&.light { color: $dark_fg_color; }
3228
&:drop(active) {
3230
box-shadow: none;
3231
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $accent_color; }
3233
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $accent_color; }
3235
}
3236
overlay {
3238
transition: $shadow_transition;
3239
box-shadow: $shadow_1;
3240
&:hover { box-shadow: $shadow_2; }
3242
}
3243
&#add-color-button {
3245
border-radius: $material_radius $material_radius 0 0;
3246
color: $light_fg_color;
3247
&:only-child { border-radius: $material_radius; }
3249
overlay {
3251
background-image: linear-gradient(to right,
3252
$error_bg_color 25%,
3253
$warning_bg_color 25%, $warning_bg_color 50%,
3254
$info_bg_color 50%, $info_bg_color 75%,
3255
$question_bg_color 75%);
3256
}
3257
}
3258
&:disabled {
3260
opacity: $disabled_opacity;
3261
overlay { box-shadow: none; }
3263
}
3264
row:selected & {
3266
}
3267
&#editor-color-sample {
3269
border-radius: $material_radius + 0.5px;
3270
overlay { border-radius: $material_radius; }
3272
// overlay:hover { box-shadow: $shadow_1; }
3274
}
3275
}
3276
// colorscale popup
3278
colorchooser .popover.osd {
3279
transition: $shadow_transition;
3280
border-radius: 2px;
3281
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3282
background-color: $base_color;
3283
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3285
spinbutton:not(.vertical) { @extend %entry.flat; }
3287
}
3288
/********
3291
* Misc *
3292
********/
3293
// content view (grid/list)
3294
.content-view {
3295
background-color: $bg_color;
3296
// &:hover { -gtk-icon-effect: highlight; }
3298
rubberband, .rubberband { @extend rubberband; }
3300
}
3301
.scale-popup {
3303
.osd & { @extend %osd; }
3304
.osd & button.flat { // FIXME: quick hack, redo properly
3306
}
3307
button { // +/- buttons on GtkVolumeButton popup
3309
}
3310
}
3311
/**********************
3314
* Window Decorations *
3315
**********************/
3316
decoration {
3317
transition: $shadow_transition;
3318
border-radius: 2px 2px 0 0;
3319
box-shadow: $shadow_4, 0 16px 16px transparent;
3320
// FIXME rationalize shadows
3322
// this is used for the resize cursor area
3324
margin: 8px;
3325
&:backdrop {
3327
// the transparent shadow here is to enforce that the shadow extents don't
3328
// change when we go to backdrop, to prevent jumping windows.
3329
// The biggest shadow should be in the same order then in the active state
3330
// or the jumping will happen during the transition.
3331
box-shadow: $shadow_2, 0 16px 16px transparent;
3332
}
3333
.maximized &,
3335
.fullscreen &,
3336
.tiled & { border-radius: 0; }
3337
.popup & { box-shadow: none; }
3339
// server-side decorations as used by mutter
3341
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3342
.csd.popup & {
3344
border-radius: 2px;
3345
box-shadow: $shadow_2;
3346
}
3347
tooltip.csd & {
3349
border-radius: 2px;
3350
box-shadow: $shadow_2;
3351
}
3352
messagedialog.csd & {
3354
border-radius: 2px;
3355
// box-shadow: $shadow_4, 0 16px 16px transparent;
3356
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3358
}
3359
.solid-csd & {
3361
margin: 0;
3362
// padding: 4px;
3363
border-radius: 0;
3364
box-shadow: none;
3365
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3366
background-color: $titlebar_bg_color;
3367
}
3368
}
3369
// Window Close button
3371
button.titlebutton {
3372
// @extend %simple_flat_button;
3373
@extend %circular_button;
3375
.selection-mode & {
3377
}
3378
}
3379
// catch all extend :)
3382
%selected_items {
3384
background-color: $primary_color;
3385
@at-root %nobg_selected_items, & {
3387
color: $inverse_fg_color;
3388
&:disabled { color: $inverse_disabled_fg_color; }
3390
}
3391
}
3392
.monospace { font-family: monospace; }
3394
/**********************
3397
* Touch Copy & Paste *
3398
**********************/
3399
// touch selection handlebars for the Popover.osd above
3400
cursor-handle {
3401
border-radius: $circular_radius;
3402
background-color: $accent_color;
3403
background-image: none;
3404
&.top:dir(ltr), &.bottom:dir(rtl) {
3406
padding-left: 6px;
3407
border-top-right-radius: 0;
3408
}
3409
&.bottom:dir(ltr), &.top:dir(rtl) {
3411
padding-right: 6px;
3412
border-top-left-radius: 0;
3413
}
3414
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3416
-GtkWidget-text-handle-width: 24;
3417
-GtkWidget-text-handle-height: 30;
3418
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3420
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3421
url('#{$_url}@2.png'));
3422
}
3423
}
3424
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3426
// shortcut window keys
3428
.keycap {
3429
min-width: 28px - 8px * 2;
3430
min-height: 28px - 2px;
3431
margin-top: 2px;
3432
padding-bottom: 2px;
3433
padding-left: 8px;
3434
padding-right: 8px;
3435
border: solid 1px $border_color;
3437
border-radius: 2px + 1px;
3438
box-shadow: inset 0 -2px $border_color;
3439
background-color: $base_color;
3440
color: $fg_color;
3441
font-size: smaller;
3442
}
3443
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3445
transition: $longer_transition;
3446
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3447
caret-color: $accent_color;
3448
}
3449
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3451
stackswitcher button.circular,
3453
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3454
min-width: $medium_size;
3455
min-height: $medium_size;
3456
padding: 0;
3457
}
3458
/*********
3461
* Emoji *
3462
*********/
3463
popover.emoji-picker {
3464
padding: 0;
3465
entry {
3467
border-bottom: 1px solid $border_color;
3468
border-bottom-left-radius: 0;
3469
border-bottom-right-radius: 0;
3470
box-shadow: none;
3471
}
3472
scrolledwindow { border-bottom: 1px solid $border_color; }
3474
}
3475
// mimic tab style
3477
button.emoji-section {
3478
margin-top: -1px;
3479
padding: 0 8px;
3480
min-width: 24px;
3481
min-height: $medium_size;
3482
border-radius: 0;
3483
outline-offset: -6px;
3484
box-shadow: none;
3485
&:hover { box-shadow: inset 0 2px $track_color; }
3487
&:active {
3489
box-shadow: inset 0 2px $primary_color;
3490
background-image: radial-gradient(circle farthest-corner at center,
3491
rgba($primary_color, 0.7) 10%,
3492
transparent 0%);
3493
}
3494
&:checked {
3496
box-shadow: inset 0 2px $primary_color;
3497
background-color: transparent;
3498
}
3499
&:first-child { margin-left: 4px; }
3501
&:last-child { margin-right: 4px; }
3503
}
3504
.emoji {
3506
min-width: 3em;
3507
min-height: 3em;
3508
padding: 0;
3509
// font-size: large;
3510
widget {
3512
transition: $shorter_transition;
3513
&:hover { font-size: larger; }
3515
}
3516
}
3517