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: $tertiary_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: $tertiary_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: $tertiary_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: $tertiary_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: $secondary_inverse_fg_color;
288
&:hover, &:active { color: $inverse_fg_color; }
290
&:disabled { color: $tertiary_inverse_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: $secondary_inverse_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: $disabled_secondary_inverse_fg_color;
481
}
482
&.flat {
484
color: $secondary_inverse_fg_color;
485
&:hover, &:active { color: $inverse_fg_color; }
487
&:disabled { color: $disabled_secondary_inverse_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: $disabled_inverse_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 $tertiary_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: $container_padding / 2;
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: $container_padding / 2; }
984
&.vertical separator { margin: $container_padding / 2; }
985
&:not(.inline-toolbar):not(.osd) {
987
scale,
988
entry,
989
spinbutton,
990
button { margin: $container_padding / 2; }
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
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
1000
}
1001
}
1002
// searchbar, location-bar & inline-toolbar
1004
.inline-toolbar {
1005
padding: $container_padding;
1006
border-style: solid;
1007
border-width: 0 1px 1px;
1008
border-color: $border_color;
1009
background-color: $alt_base_color;
1010
}
1011
searchbar,
1013
.location-bar {
1014
padding: $container_padding;
1015
border-style: solid;
1016
border-width: 0 0 1px;
1017
border-color: $border_color;
1018
background-color: $bg_color;
1019
background-clip: border-box;
1020
}
1021
/***************
1024
* Header bars *
1025
***************/
1026
%titlebar,
1027
headerbar {
1028
transition: background-color $shorter_duration $deceleration_curve;
1029
min-height: $large_size;
1030
padding: 0 $container_padding;
1031
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1032
background-color: $titlebar_bg_color;
1033
color: $titlebar_fg_color;
1034
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
1036
&:backdrop {
1038
color: $secondary_titlebar_fg_color;
1039
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
1041
}
1042
.title {
1044
transition: $longer_transition;
1045
padding: 0 12px;
1046
font-weight: bold;
1047
}
1048
.subtitle {
1050
transition: $longer_transition;
1051
padding: 0 12px;
1052
font-size: smaller;
1053
@extend .dim-label;
1055
}
1056
.linked:not(.vertical) > entry:not(.flat) { border-radius: 2px; }
1058
button:not(.suggested-action):not(.destructive-action) {
1060
@extend %button_basic.flat;
1061
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1063
$titlebar_indicator_color 0%,
1064
transparent 0%)
1065
0 0 0 / 0 0 0px;
1066
color: $secondary_titlebar_fg_color;
1067
&:hover, &:active { color: $titlebar_fg_color; }
1069
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1071
&:checked {
1073
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1074
$titlebar_indicator_color 100%,
1075
transparent 0%)
1076
0 0 2 / 0 0 2px;
1077
color: $titlebar_fg_color;
1078
&:disabled { color: $disabled_titlebar_fg_color; }
1080
&, &:disabled { background-color: transparent; }
1082
}
1083
&:backdrop {
1085
color: $tertiary_titlebar_fg_color;
1086
&:hover, &:active { color: $secondary_titlebar_fg_color; }
1088
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1090
&:checked {
1092
color: $secondary_titlebar_fg_color;
1093
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1095
}
1096
}
1097
}
1098
button.suggested-action, button.destructive-action {
1100
&:disabled {
1101
background-color: $titlebar_divider_color;
1102
color: $disabled_titlebar_fg_color;
1103
}
1104
}
1105
&.selection-mode {
1107
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1108
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1109
transition: background-color 0.00001s $longer_duration;
1110
animation: header_ripple_effect $longer_duration $deceleration_curve;
1111
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1112
background-color: $primary_color;
1113
color: $inverse_fg_color;
1114
&:backdrop {
1116
color: $secondary_inverse_fg_color;
1117
}
1118
.subtitle:link { @extend *:link:selected; }
1120
button:not(.suggested-action):not(.destructive-action) {
1122
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1123
currentColor 0%,
1124
transparent 0%)
1125
0 0 0 / 0 0 0px;
1126
color: $inverse_fg_color;
1127
&:disabled { color: $disabled_inverse_fg_color; }
1129
&:checked {
1131
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1132
currentColor 100%,
1133
transparent 0%)
1134
0 0 2 / 0 0 2px;
1135
color: $inverse_fg_color;
1136
&:disabled { color: $disabled_inverse_fg_color; }
1138
}
1139
&:backdrop {
1141
color: $secondary_inverse_fg_color;
1142
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1144
&:checked {
1146
color: $secondary_inverse_fg_color;
1147
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1149
}
1150
}
1151
}
1152
.selection-menu {
1154
padding-left: 16px;
1155
padding-right: 16px;
1156
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1158
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1160
}
1161
}
1162
.fullscreen &,
1164
.tiled &,
1165
.maximized & {
1166
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1167
box-shadow: $shadow_1;
1168
}
1169
&.default-decoration {
1171
min-height: $small_size;
1172
padding: $container_padding;
1173
box-shadow: inset 0 1px $titlebar_highlight_color;
1174
.fullscreen &,
1176
.tiled &,
1177
.maximized & { box-shadow: none; }
1178
button.titlebutton {
1180
min-height: $small_size;
1181
min-width: $small_size;
1182
margin: 0;
1183
padding: 0;
1184
}
1185
// workaround for non-animatable buttons
1187
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1188
}
1189
.solid-csd & {
1191
&:dir(rtl), &:dir(ltr) { // specificity bump
1192
// margin-left: -2px;
1193
// margin-right: -2px;
1194
// margin-top: -2px;
1195
// border-radius: 0;
1196
// box-shadow: inset 0 1px $titlebar_highlight_color;
1197
}
1198
}
1199
}
1200
headerbar {
1202
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1203
entry,
1204
spinbutton,
1205
// separator,
1206
button {
1207
margin-top: $container_padding;
1208
margin-bottom: $container_padding;
1209
}
1210
switch {
1212
margin-top: $container_padding * 2;
1213
margin-bottom: $container_padding * 2;
1214
}
1215
// reset button margins of the spinbutton
1217
spinbutton button {
1218
margin-top: 0;
1219
margin-bottom: 0;
1220
}
1221
}
1222
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1224
border-top-left-radius: 2px;
1225
border-top-right-radius: 2px;
1226
}
1227
headerbar { // headerbar border rounding
1229
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1230
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1231
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1233
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1235
&:first-child, &:last-child {
1236
border-top-left-radius: 2px;
1237
border-top-right-radius: 2px;
1238
}
1239
}
1240
}
1241
.titlebar:not(headerbar) {
1243
window.csd > & {
1244
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1245
padding: 0;
1246
background-color: transparent;
1247
background-image: none;
1248
border-style: none;
1249
box-shadow: none;
1250
}
1251
> separator {
1253
background-color: $titlebar_bg_color;
1254
background-image: image($border_color);
1255
}
1256
@extend %titlebar;
1258
}
1259
/************
1262
* Pathbars *
1263
************/
1264
%pathbar_button,
1265
.path-bar button {
1266
padding-left: ($medium_size - 24px) / 2;
1267
padding-right: ($medium_size - 24px) / 2;
1268
label:not(:only-child) {
1270
&:first-child { margin-left: 4px; }
1271
&:last-child { margin-right: 4px; }
1273
}
1274
&.slider-button {
1276
padding-left: (24px - 16px) / 2;
1277
padding-right: (24px - 16px) / 2;
1278
}
1279
:not(headerbar) & {
1281
@extend %flat_button;
1282
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1284
$primary_color 0%,
1285
transparent 0%)
1286
0 0 0 / 0 0 0px;
1287
border-radius: 2px;
1288
&:checked {
1290
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1291
$primary_color 100%,
1292
transparent 0%)
1293
0 0 2 / 0 0 2px;
1294
&, &:disabled { background-color: transparent; }
1296
}
1297
}
1298
}
1299
/**************
1302
* Tree Views *
1303
**************/
1304
treeview.view {
1305
@at-root * {
1306
-GtkTreeView-horizontal-separator: 4;
1307
-GtkTreeView-grid-line-width: 1;
1308
-GtkTreeView-grid-line-pattern: '';
1309
-GtkTreeView-tree-line-width: 1;
1310
-GtkTreeView-tree-line-pattern: '';
1311
-GtkTreeView-expander-size: 16;
1312
}
1313
border-left-color: $track_color; // this is actually the tree lines color,
1315
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1316
&:selected { border-left-color: $inverse_track_color; }
1318
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1320
&:hover, &:active, &:selected { border-radius: 0; }
1322
&.separator {
1324
min-height: 1px + 2px * 2;
1325
color: $border_color;
1326
}
1327
&:drop(active) {
1329
border-style: solid none;
1330
border-width: 1px;
1331
border-color: $accent_color;
1332
&.after { border-top-style: none; }
1334
&.before { border-bottom-style: none; }
1336
}
1337
&.expander {
1339
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1340
-gtk-icon-transform: rotate(-90deg);
1341
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1343
&:checked { -gtk-icon-transform: unset; }
1345
color: $secondary_fg_color;
1347
&:hover, &:active { color: $fg_color; }
1349
&:disabled { color: $disabled_secondary_fg_color; }
1351
&:selected {
1353
color: $secondary_inverse_fg_color;
1354
&:hover, &:active { color: $inverse_fg_color; }
1356
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1358
}
1359
}
1360
&.progressbar { // progress bar in treeviews
1362
border-bottom: $bar_size solid $primary_color;
1363
box-shadow: none;
1364
background-color: transparent;
1365
&:selected { border-bottom-color: $inverse_fg_color; }
1367
}
1368
&.trough { // progress bar trough in treeviews
1370
border-bottom: $bar_size solid rgba($primary_color, $lower_opacity);
1371
box-shadow: none;
1372
background-color: transparent;
1373
&:selected { border-bottom-color: $inverse_track_color; }
1375
}
1376
header {
1378
button {
1379
@extend row.activatable;
1380
padding: 2px 6px;
1382
border-style: none solid solid none;
1383
border-width: 1px;
1384
border-color: $border_color;
1385
border-radius: 0;
1386
background-clip: border-box;
1387
&, &:hover, &:active { box-shadow: none; }
1389
&, &:disabled { background-color: $base_color; }
1391
&:last-child { border-right-style: none; }
1393
}
1394
}
1395
button.dnd,
1397
header.button.dnd { // for treeview-like derive widgets
1398
padding: 2px 6px;
1399
border-style: none solid solid;
1400
border-width: 1px;
1401
border-color: $border_color;
1402
border-radius: 0;
1403
box-shadow: none;
1404
background-color: $base_color;
1405
background-clip: border-box;
1406
color: $primary_color;
1407
}
1408
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1410
}
1411
/*********
1414
* Menus *
1415
*********/
1416
menubar,
1417
.menubar {
1418
-GtkWidget-window-dragging: true;
1419
padding: 0;
1420
// box-shadow: inset 0 -1px $border_color;
1421
background-color: $titlebar_bg_color;
1422
> menuitem {
1424
transition: $shorter_transition;
1425
min-height: 20px;
1426
padding: 4px 8px;
1427
color: $secondary_titlebar_fg_color;
1428
&:hover { // Seems like it :hover even with keyboard focus
1430
transition: none;
1431
background-color: $titlebar_divider_color;
1432
color: $titlebar_fg_color;
1433
}
1434
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1436
}
1437
}
1438
.csd.popup { background-color: transparent; }
1440
menu,
1442
.menu,
1443
.context-menu {
1444
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1445
padding: 4px 0;
1446
box-shadow: inset 0 1px $highlight_color;
1447
background-color: $base_color;
1448
border: 1px solid $border_color; // adds borders in a non composited env
1449
.csd & {
1451
border: none; // axes borders in a composited env
1452
border-radius: 2px;
1453
}
1454
menuitem {
1456
transition: $shorter_transition;
1457
min-height: 20px;
1458
min-width: 40px;
1459
padding: 4px 8px;
1460
font: initial;
1461
text-shadow: none;
1462
&:hover {
1464
transition: none;
1465
background-color: $divider_color;
1466
}
1467
&:disabled { color: $disabled_fg_color; }
1469
// submenu indicators
1471
arrow {
1472
min-height: 16px;
1473
min-width: 16px;
1474
&:dir(ltr) {
1476
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1477
margin-left: 8px;
1478
}
1479
&:dir(rtl) {
1481
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1482
margin-right: 8px;
1483
}
1484
}
1485
// avoids labels color being overridden, see
1487
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1488
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1489
}
1490
// overflow arrows
1492
> arrow {
1493
min-height: 16px;
1494
min-width: 16px;
1495
padding: 4px;
1496
background-color: $base_color;
1497
color: $secondary_fg_color;
1498
&.top {
1500
margin-top: -4px;
1501
border-bottom: 1px solid $border_color;
1502
border-radius: 2px 2px 0 0;
1503
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1504
}
1505
&.bottom {
1507
margin-bottom: -4px * 3;
1508
border-top: 1px solid $border_color;
1509
border-radius: 0 0 2px 2px;
1510
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1511
}
1512
&:hover {
1514
background-image: image($divider_color);
1515
color: $fg_color;
1516
}
1517
&:disabled {
1519
border-color: transparent;
1520
background-color: transparent;
1521
color: transparent;
1522
// color: $disabled_secondary_fg_color;
1523
}
1524
}
1525
separator { margin: 4px 0; }
1527
}
1528
menuitem {
1530
accelerator { color: $secondary_fg_color; }
1531
}
1532
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1534
// Electron/Atom render all translucent colors in opaque colors.
1535
// It's a very critical issue for this theme and should be fixed by upstream...
1536
.popup:not(.csd) menu {
1537
$opaque_fg_color: if($variant == 'light', $grey_900, $white);
1538
$opaque_divider_color: if($variant == 'light', $grey_300, mix($white, $base_color, percentage(0.12)));
1539
$opaque_disabled_fg_color: if($variant == 'light', $grey_500, mix($white, $base_color, percentage(0.5)));
1540
$opaque_secondary_fg_color: if($variant == 'light', $grey_600, mix($white, $base_color, percentage(0.7)));
1541
menuitem {
1543
color: $opaque_fg_color;
1544
&:hover { background-color: $opaque_divider_color; }
1546
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1548
}
1549
// TODO: not working this, where/how i can set the accelerators?
1551
accelerator { color: $opaque_secondary_fg_color; }
1552
}
1553
/************
1556
* Popovers *
1557
************/
1558
popover.background {
1559
transition: $shadow_transition;
1560
padding: 2px;
1561
box-shadow: $shadow_2; // TODO: this should really have a highlight
1562
background-color: $lighter_bg_color;
1563
&:backdrop { box-shadow: $shadow_1; }
1565
&, .csd & {
1567
border-style: solid;
1568
border-width: 1px;
1569
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1570
border-radius: 2px + 1px;
1571
}
1572
> stack { margin: -4px; } // remove extra padding from menu style popovers
1574
> toolbar { margin: -2px; }
1576
> list,
1578
> .view,
1579
> toolbar {
1580
border-style: none;
1581
box-shadow: none;
1582
background-color: transparent;
1583
}
1584
&.touch-selection,
1586
&.magnifier,
1587
&.osd { @extend %osd; }
1588
// entry { @extend %entry.flat; }
1590
// button.combo { @extend %combo_flat; }
1592
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1594
&.menu button,
1596
button.model {
1597
@extend %simple_flat_button;
1598
min-height: 32px;
1600
padding: 0 8px;
1601
border-radius: 2px;
1602
&:checked { @extend %selected_items; }
1604
}
1605
separator { margin: 4px 0; }
1607
list separator { margin: 0; }
1609
}
1610
/*************
1612
* Notebooks *
1613
*************/
1614
notebook {
1615
> header {
1616
border-width: 1px;
1617
border-color: $border_color;
1618
background-color: $bg_color;
1619
background-clip: border-box;
1620
&.top {
1622
border-bottom-style: solid;
1623
> tabs {
1624
margin-bottom: -1px;
1625
> tab {
1626
&:hover { box-shadow: inset 0 -2px $track_color; }
1628
&:checked { box-shadow: inset 0 -2px $primary_color; }
1630
}
1631
}
1632
}
1633
&.bottom {
1635
border-top-style: solid;
1636
> tabs {
1637
margin-top: -1px;
1638
> tab {
1639
&:hover { box-shadow: inset 0 2px $track_color; }
1641
&:checked { box-shadow: inset 0 2px $primary_color; }
1643
}
1644
}
1645
}
1646
&.left {
1648
border-right-style: solid;
1649
> tabs {
1650
margin-right: -1px;
1651
> tab {
1652
&:hover { box-shadow: inset -2px 0 $track_color; }
1654
&:checked { box-shadow: inset -2px 0 $primary_color; }
1656
}
1657
}
1658
}
1659
&.right {
1661
border-left-style: solid;
1662
> tabs {
1663
margin-left: -1px;
1664
> tab {
1665
&:hover { box-shadow: inset 2px 0 $track_color; }
1667
&:checked { box-shadow: inset 2px 0 $primary_color; }
1669
}
1670
}
1671
}
1672
&.top > tabs > arrow {
1674
@extend %notebook_vert_arrows;
1675
border-top-style: none;
1677
}
1678
&.bottom > tabs > arrow {
1680
@extend %notebook_vert_arrows;
1681
border-bottom-style: none;
1683
}
1684
@at-root %notebook_vert_arrows {
1686
padding-left: 4px;
1687
padding-right: 4px;
1688
&.down {
1690
margin-left: -8px;
1691
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1692
}
1693
&.up {
1695
margin-right: -8px;
1696
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1697
}
1698
}
1699
&.left > tabs > arrow {
1701
@extend %notebook_horz_arrows;
1702
border-left-style: none;
1704
}
1705
&.right > tabs > arrow {
1707
@extend %notebook_horz_arrows;
1708
border-right-style: none;
1710
}
1711
@at-root %notebook_horz_arrows {
1713
padding-top: 4px;
1714
padding-bottom: 4px;
1715
&.down {
1717
margin-top: -8px;
1718
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1719
}
1720
&.up {
1722
margin-bottom: -8px;
1723
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1724
}
1725
}
1726
> tabs > arrow {
1728
@extend %simple_flat_button;
1729
min-height: 16px;
1731
min-width: 16px;
1732
border-radius: 0;
1733
}
1734
tab {
1736
transition: $longer_transition,
1737
background-size 0,
1738
background-image 0;
1739
min-height: $small_size;
1740
min-width: $small_size;
1741
padding: $container_padding 12px;
1742
outline-offset: -6px;
1744
border-width: 1px; // for reorderable tabs
1746
border-color: transparent; //
1747
background-image: radial-gradient(circle farthest-corner at center,
1749
$primary_color 10%,
1750
transparent 0%);
1751
background-repeat: no-repeat;
1752
background-position: center;
1753
background-size: 0% 0%;
1754
color: $secondary_fg_color;
1756
font-weight: 500;
1757
&:hover {
1759
color: $fg_color;
1760
&.reorderable-page {
1762
border-color: $border_color;
1763
background-color: $alt_base_color;
1764
}
1765
}
1766
&:disabled { color: $disabled_secondary_fg_color; }
1768
&:checked {
1770
transition: $longer_transition,
1771
background-size $longer_duration $deceleration_curve,
1772
background-image $longer_duration + $ripple_duration $deceleration_curve;
1773
background-image: radial-gradient(circle farthest-corner at center,
1774
transparent 10%,
1775
transparent 0%);
1776
background-size: 1000% 1000%;
1777
color: $fg_color;
1778
&:disabled { color: $disabled_fg_color; }
1780
&.reorderable-page {
1782
border-color: $border_color;
1783
background-color: $base_color;
1784
}
1785
}
1786
// colors the button like the label, overridden otherwise
1788
button.flat {
1789
@extend %small_button;
1790
&:last-child {
1792
margin-left: $container_padding;
1793
margin-right: $container_padding - 12px;
1794
}
1795
&:first-child {
1797
margin-left: $container_padding - 12px;
1798
margin-right: $container_padding;
1799
}
1800
}
1801
}
1802
&.top,
1804
&.bottom {
1805
tabs {
1806
padding-left: 8px;
1807
padding-right: 8px;
1808
&:not(:only-child) {
1810
&:first-child { margin-left: 0; }
1811
&:last-child { margin-right: 0; }
1812
}
1813
tab {
1815
&.reorderable-page {
1816
margin: 0 -1px;
1817
border-style: none solid;
1818
}
1819
}
1820
}
1821
}
1822
&.left,
1824
&.right {
1825
tabs {
1826
padding-top: 8px;
1827
padding-bottom: 8px;
1828
&:not(:only-child) {
1830
&:first-child { margin-top: 0; }
1831
&:last-child { margin-bottom: 0; }
1832
}
1833
tab {
1835
&.reorderable-page {
1836
margin: -1px 0;
1837
border-style: solid none;
1838
}
1839
}
1840
}
1841
}
1842
}
1843
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1845
background-color: $base_color;
1846
entry:not(.search),
1848
spinbutton:not(.vertical) { @extend %entry.flat; }
1849
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1851
button.combo { @extend %combo_flat; }
1853
}
1854
}
1855
/**************
1858
* Scrollbars *
1859
**************/
1860
scrollbar {
1861
$_slider_min_length: 24px;
1862
// disable steppers
1864
@at-root * {
1865
-GtkScrollbar-has-backward-stepper: false;
1866
-GtkScrollbar-has-forward-stepper: false;
1867
}
1868
transition: $longer_transition;
1870
background-color: $base_color;
1871
background-clip: $extra_background_clip;
1872
// scrollbar border
1874
&.top { border-bottom: 1px solid $border_color; }
1875
&.bottom { border-top: 1px solid $border_color; }
1876
&.left { border-right: 1px solid $border_color; }
1877
&.right { border-left: 1px solid $border_color; }
1878
// slider
1880
slider {
1881
transition: $shorter_transition, margin 0, border-width 0;
1882
min-width: 8px;
1883
min-height: 8px;
1884
border: 4px solid transparent;
1885
border-radius: $circular_radius;
1886
background-clip: padding-box;
1887
background-color: $tertiary_fg_color;
1888
&:hover { background-color: $secondary_fg_color; }
1890
&:active { background-color: $fg_color; }
1892
&:disabled { background-color: $disabled_secondary_fg_color; }
1894
}
1895
&.fine-tune {
1897
slider {
1898
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1899
min-width: 4px;
1900
min-height: 4px;
1901
}
1902
&.horizontal slider { margin: 2px 0; }
1904
&.vertical slider { margin: 0 2px; }
1906
}
1907
&.overlay-indicator {
1909
&:not(.dragging):not(.hovering) {
1910
border-color: transparent;
1911
background-color: transparent;
1912
slider {
1914
min-width: 4px;
1915
min-height: 4px;
1916
margin: 4px - 1px;
1917
border: 1px solid rgba($base_color, $lower_opacity);
1918
}
1919
button {
1921
min-width: 4px;
1922
min-height: 4px;
1923
margin: 4px - 1px;
1924
border: 1px solid rgba($base_color, $lower_opacity);
1925
border-radius: $circular_radius;
1926
background-color: $tertiary_fg_color;
1927
background-clip: padding-box;
1928
-gtk-icon-source: none;
1929
&:disabled { background-color: $disabled_secondary_fg_color; }
1931
}
1932
&.horizontal {
1934
slider { min-width: $_slider_min_length; }
1935
button { min-width: 8px; }
1937
}
1938
&.vertical {
1940
slider { min-height: $_slider_min_length; }
1941
button { min-height: 8px; }
1943
}
1944
}
1945
&.dragging,
1947
&.hovering { background-color: rgba($base_color, $higher_opacity); }
1948
}
1949
&.horizontal slider { min-width: $_slider_min_length; }
1951
&.vertical slider { min-height: $_slider_min_length; }
1953
// button styling
1955
button {
1956
@extend %simple_flat_button;
1957
min-width: 16px;
1959
min-height: 16px;
1960
padding: 0;
1961
border-radius: 0;
1962
}
1963
// button icons
1965
&.vertical {
1966
button {
1967
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1968
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1970
}
1971
}
1972
&.horizontal {
1974
button {
1975
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1976
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1978
}
1979
}
1980
}
1981
/**********
1984
* Switch *
1985
**********/
1986
switch {
1987
transition: $longer_transition;
1988
margin: $container_padding 0;
1989
padding: 0 2px;
1990
border: 4px solid transparent;
1991
border-radius: $circular_radius;
1992
background-color: $track_color;
1993
background-clip: padding-box;
1994
font-size: 0;
1995
&:disabled { background-color: $divider_color; }
1997
&:checked {
1999
background-color: rgba($accent_color, 0.5);
2000
&:disabled { background-color: rgba($accent_color, 0.3); }
2002
}
2003
slider {
2005
transition: $longer_transition, $shadow_transition;
2006
min-width: 20px;
2007
min-height: 20px;
2008
margin: -3px -2px;
2009
border-radius: $circular_radius;
2010
-gtk-outline-radius: $circular_radius;
2011
box-shadow: $shadow_1;
2012
background-color: $base_color;
2013
}
2014
&:hover slider { box-shadow: $shadow_2; }
2016
&:checked slider {
2018
transition: $longer_transition, $shadow_transition, background-image 0, background-color 0.00001s $longer_duration;
2019
animation: needs_attention $longer_duration $deceleration_curve;
2020
background-color: $accent_color;
2021
color: $inverse_fg_color;
2022
}
2023
&:disabled slider { background-color: $alt_base_color; }
2025
&:checked:disabled slider { animation: none; }
2027
row:selected & {
2029
}
2030
}
2031
/*************************
2034
* Check and Radio items *
2035
*************************/
2036
// draw regular check and radio items using our PNG assets
2037
// all assets are rendered from assets.svg. never add pngs directly
2038
// selection-mode
2040
.view.content-view.check:not(list),
2041
.content-view .tile check:not(list) {
2042
min-height: 40px;
2043
min-width: 40px;
2044
margin: 0;
2045
padding: 0;
2046
box-shadow: none;
2047
background-color: transparent;
2048
background-image: none;
2049
-gtk-icon-shadow: $shadow_1;
2050
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2052
@each $s, $as in ('', '-unchecked'),
2054
(':checked', '-checked') {
2055
&#{$s} {
2056
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2057
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2058
}
2059
}
2060
}
2061
checkbutton.text-button,
2063
radiobutton.text-button {
2064
// this is for a nice focus on check and radios text
2065
padding: 2px;
2066
outline-offset: 0;
2067
label:not(:only-child) { margin: 0 4px; }
2069
}
2070
check,
2072
radio {
2073
min-height: 24px;
2074
min-width: 24px;
2075
margin: -($large_size - 24px) / 2;
2076
padding: ($large_size - 24px) / 2;
2077
@extend %simple_flat_button;
2079
@extend %circular_button;
2081
&:checked, &:indeterminate {
2083
color: $accent_color;
2084
&:disabled { color: $disabled_accent_color; }
2086
}
2087
// &:only-child { margin: -12px; }
2089
row:selected &:not(:checked):not(:indeterminate) {
2091
color: $secondary_inverse_fg_color;
2092
&:hover, &:active { color: $inverse_fg_color; }
2094
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2096
}
2097
popover & {
2099
&, &:hover, &:disabled {
2100
box-shadow: none;
2101
background-image: none;
2102
}
2103
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2105
&.left:dir(rtl) {
2107
margin-left: -16px;
2108
margin-right: -8px;
2109
}
2110
&.right:dir(ltr) {
2112
margin-left: -8px;
2113
margin-right: -16px;
2114
}
2115
}
2116
menu menuitem & {
2118
transition: none;
2119
min-height: 16px;
2120
min-width: 16px;
2121
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2122
padding: 0;
2123
&:dir(ltr) { margin-right: 8px; }
2125
&:dir(rtl) { margin-left: 8px; }
2127
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2129
&, &:hover, &:disabled {
2131
box-shadow: none;
2132
// color: inherit;
2133
}
2134
}
2135
}
2136
%check,
2138
check {
2139
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2140
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2141
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2143
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2144
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2146
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2147
}
2148
%radio,
2150
radio {
2151
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2152
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2153
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2155
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2156
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2158
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2159
border-image-slice: $large_size / 2px;
2161
border-image-width: $large_size / 2;
2162
$radio_indicator: 10px / $large_size / 2;
2164
& {
2166
border-image-source: -gtk-gradient(radial,
2167
center center, 0,
2168
center center, 0.001,
2169
to($accent_color),
2170
to(transparent));
2171
}
2172
&:checked:not(:indeterminate) {
2174
border-image-source: -gtk-gradient(radial,
2175
center center, 0,
2176
center center, $radio_indicator,
2177
to($accent_color),
2178
to(transparent));
2179
}
2180
&:checked:not(:indeterminate):disabled {
2182
border-image-source: -gtk-gradient(radial,
2183
center center, 0,
2184
center center, $radio_indicator,
2185
to($disabled_accent_color),
2186
to(transparent));
2187
}
2188
}
2189
%small_check,
2191
menu menuitem check {
2192
& {
2193
border-radius: 2px;
2194
-gtk-outline-radius: 2px;
2195
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")),
2196
-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2197
}
2198
&:checked {
2200
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")),
2201
-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2202
}
2203
&:indeterminate {
2205
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")),
2206
-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2207
}
2208
}
2209
%small_radio,
2211
menu menuitem radio {
2212
& {
2213
border-image: none;
2214
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")),
2215
-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2216
}
2217
&:checked {
2219
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")),
2220
-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2221
}
2222
&:indeterminate {
2224
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")),
2225
-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2226
}
2227
}
2228
// ANIMATION:
2230
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2231
// the transformation is set on the active state and it get reset on the checked state.
2232
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2233
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2235
check:not(:checked):indeterminate:active,
2237
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2238
check:not(:checked),
2240
radio:not(:checked) {
2241
& {
2242
transition: $longer_transition,
2243
background-size $ripple_duration $deceleration_curve,
2244
background-image $ripple_duration * 2 $deceleration_curve,
2245
-gtk-icon-transform 0;
2246
}
2247
&:active {
2249
transition: $longer_transition,
2250
background-size 0,
2251
background-image 0,
2252
-gtk-icon-transform 0;
2253
}
2254
menu menuitem & { transition: none; }
2256
}
2257
treeview.view check,
2259
treeview.view radio {
2260
padding: 0;
2261
&:hover {
2263
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2264
&:disabled { box-shadow: none; }
2266
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2268
}
2269
& {
2271
color: $secondary_fg_color;
2272
&:hover, &:active { color: $fg_color; }
2274
&:disabled { color: $disabled_secondary_fg_color; }
2276
&:checked, &:indeterminate { color: $accent_color; }
2278
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2280
}
2281
&:selected {
2283
color: $secondary_inverse_fg_color;
2284
&:hover, &:active { color: $inverse_fg_color; }
2286
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2288
&:checked, &:indeterminate { color: $accent_color; }
2290
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2292
}
2293
}
2294
treeview.view radio:checked {
2296
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2297
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2298
border-image: none;
2299
}
2300
/************
2303
* GtkScale *
2304
************/
2305
scale {
2306
// sizing
2307
$_marks_length: 8px;
2308
$_marks_distance: 8px;
2309
$trough_size: 2px;
2311
$slider_size: 24px;
2313
$marks_slider_size: 30px;
2314
$slider_margin: -($slider_size - $trough_size) / 2;
2316
$marks_slider_margin: -($marks_slider_size - $trough_size) - $slider_margin;
2317
$color_slider_margin: -($slider_size) / 2;
2319
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2320
min-height: $medium_size - $slider_size;
2322
min-width: $medium_size - $slider_size;
2323
padding: ($slider_size / 2);
2324
// the slider is inside the trough, so to have make it bigger there's a negative margin
2326
slider {
2327
min-height: $slider_size;
2328
min-width: $slider_size;
2329
margin: $slider_margin;
2330
}
2331
// the backing bit
2333
trough {
2334
transition: $longer_transition;
2335
outline-offset: 2px;
2336
background-color: $track_color;
2337
&:disabled { background-color: $divider_color; }
2339
}
2340
// the colored part of the backing bit
2342
highlight {
2343
transition: $longer_transition;
2344
background-color: $accent_color;
2345
&:disabled { background-color: transparent; }
2347
}
2348
// this is another differently styled part of the backing bit, the most relevant use case is for example
2350
// in media player to indicate how much video stream as been cached
2351
fill {
2352
transition: $longer_transition;
2353
background-color: $track_color;
2354
&:disabled { background-color: transparent; }
2356
}
2357
slider {
2359
transition: all $shorter_duration $standard_curve;
2360
// border-radius: 100%;
2361
// background-color: $accent_color;
2362
background-repeat: no-repeat;
2363
background-position: center;
2364
@each $s, $as in ('', ''),
2366
(':disabled', '-disabled') {
2367
&#{$s} {
2368
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2369
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2371
}
2372
}
2373
background-size: calc(100% - 10px);
2375
&:hover { background-size: calc(100% - 8px); }
2377
&:active { background-size: calc(100% - 6px); }
2379
}
2380
// click-and-hold the slider to activate
2382
&.fine-tune {
2383
// to make the slider shrink in fine-tune mode
2384
slider { background-size: calc(100% - 12px); }
2385
}
2386
marks label,
2388
value { color: $tertiary_fg_color; }
2389
marks {
2391
color: $track_color;
2392
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2394
(bottom, bottom, top),
2395
(top, left, right),
2396
(bottom, right, left) {
2397
&.#{$marks_class} {
2398
margin-#{$marks_margin}: $_marks_distance;
2399
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2400
}
2401
}
2402
}
2403
&.horizontal {
2405
indicator {
2406
min-height: $_marks_length;
2407
min-width: 1px;
2408
}
2409
}
2410
&.vertical {
2412
indicator {
2413
min-height: 1px;
2414
min-width: $_marks_length;
2415
}
2416
}
2417
// *WARNING* scale with marks madness following
2419
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2421
('vertical', 'vert') {
2422
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2423
('marks-after', 'marks-after:not(.marks-before)') {
2424
&.#{$dir_class}.#{$marks_class} {
2425
slider {
2426
@each $state, $state_infix in ('', ''),
2427
(':disabled', '-disabled') {
2428
&#{$state} {
2429
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2430
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2432
}
2433
}
2434
@if $dir_class == 'horizontal' {
2436
min-height: $marks_slider_size;
2437
min-width: $slider_size;
2438
@if $marks_infix == 'marks-before' {
2440
margin-top: $marks_slider_margin;
2441
background-position: center calc(100% - 5px);
2443
&:hover { background-position: center calc(100% - 4px); }
2445
&:active { background-position: center calc(100% - 3px); }
2447
}
2448
@if $marks_infix == 'marks-after' {
2450
margin-bottom: $marks_slider_margin;
2451
background-position: center calc(5px);
2453
&:hover { background-position: center calc(4px); }
2455
&:active { background-position: center calc(3px); }
2457
}
2458
}
2459
@if $dir_class == 'vertical' {
2461
min-height: $slider_size;
2462
min-width: $marks_slider_size;
2463
@if $marks_infix == 'marks-before' {
2465
margin-left: $marks_slider_margin;
2466
background-position: calc(5px) center;
2468
&:hover { background-position: calc(4px) center; }
2470
&:active { background-position: calc(3px) center; }
2472
}
2473
@if $marks_infix == 'marks-after' {
2475
margin-right: $marks_slider_margin;
2476
background-position: calc(100% - 5px) center;
2478
&:hover { background-position: calc(100% - 4px) center; }
2480
&:active { background-position: calc(100% - 3px) center; }
2482
}
2483
}
2484
}
2485
&.fine-tune slider {
2487
@if $dir_class == 'horizontal' {
2488
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2489
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2491
}
2492
@if $dir_class == 'vertical' {
2494
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2495
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2497
}
2498
}
2499
}
2500
}
2501
}
2502
&.color {
2504
min-height: 0;
2505
min-width: 0;
2506
&.horizontal {
2508
padding: 0 0 12px 0;
2509
slider {
2511
&:dir(ltr), &:dir(rtl) { // specificity bump
2512
margin-bottom: $color_slider_margin;
2513
margin-top: $color_marks_slider_margin;
2514
}
2515
}
2516
}
2517
&.vertical {
2519
&:dir(ltr) {
2520
padding: 0 0 0 12px;
2521
slider {
2523
margin-left: $color_slider_margin;
2524
margin-right: $color_marks_slider_margin;
2525
}
2526
}
2527
&:dir(rtl) {
2529
padding: 0 12px 0 0;
2530
slider {
2532
margin-right: $color_slider_margin;
2533
margin-left: $color_marks_slider_margin;
2534
}
2535
}
2536
}
2537
}
2538
}
2539
/*****************
2542
* Progress bars *
2543
*****************/
2544
progressbar {
2545
// sizing
2546
&.horizontal {
2547
trough,
2548
progress { min-height: $bar_size; }
2549
}
2550
&.vertical {
2552
trough,
2553
progress { min-width: $bar_size; }
2554
}
2555
// FIXME: insensitive state missing and some other state should be set probably
2557
color: $tertiary_fg_color;
2558
font-size: smaller;
2559
trough { background-color: rgba($primary_color, $lower_opacity); }
2561
progress { background-color: $primary_color; }
2563
&.osd { // progressbar.osd used for epiphany page loading progress
2565
// min-width: $bar_size;
2566
// min-height: $bar_size;
2567
// background-color: transparent;
2568
// trough { background-color: transparent; }
2570
// progress { background-color: $primary_color; }
2572
}
2573
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2575
}
2576
/*************
2579
* Level Bar *
2580
*************/
2581
levelbar {
2582
block {
2583
min-width: $medium_size;
2584
min-height: $bar_size;
2585
}
2586
&.vertical block {
2588
min-width: $bar_size;
2589
min-height: $medium_size;
2590
}
2591
// imitate the entry style
2593
trough {
2594
padding: 2px;
2595
border-radius: 2px;
2596
box-shadow: $shadow_1;
2597
background-color: $base_color;
2598
&:disabled { background-color: $alt_base_color; }
2600
}
2601
&.horizontal.discrete {
2603
block { margin: 0 1px; }
2604
trough { padding: 2px 1px; }
2606
}
2607
&.vertical.discrete {
2609
block { margin: 1px 0; }
2610
trough { padding: 1px 2px; }
2612
}
2613
block {
2615
&.low { background-color: $warning_color; }
2616
&.high,
2618
&:not(.empty) { background-color: $primary_color; }
2619
&.full { background-color: $success_color; }
2621
&.empty { background-color: $divider_color; }
2623
}
2624
}
2625
/****************
2628
* Print dialog *
2629
*****************/
2630
printdialog {
2631
paper {
2632
padding: 0;
2633
border: 1px solid $border_color;
2634
background-color: $base_color;
2635
color: $fg_color;
2636
}
2637
.dialog-action-box { margin: 12px; }
2639
}
2640
/**********
2643
* Frames *
2644
**********/
2645
frame > border,
2646
.frame {
2647
margin: 0;
2648
padding: 0;
2649
border: 1px solid $border_color;
2650
border-radius: 0;
2651
box-shadow: none;
2652
&.flat { border-style: none; }
2654
}
2655
frame.flat > border { @extend .frame.flat; } // for backporting
2657
actionbar > revealer > box {
2659
padding: $container_padding;
2660
border-top: 1px solid $border_color;
2661
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2663
}
2664
scrolledwindow {
2666
viewport.frame { // avoid double borders when viewport inside scrolled window
2667
border-style: none;
2668
}
2669
// This is used when content is touch-dragged past boundaries.
2671
// draws a box on top of the content, the size changes programmatically.
2672
@at-root overshoot {
2673
&.top { @include overshoot(top); }
2674
&.bottom { @include overshoot(bottom); }
2676
&.left { @include overshoot(left); }
2678
&.right { @include overshoot(right); }
2680
}
2681
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2683
@at-root undershoot {
2684
&.top { @include undershoot(top); }
2685
&.bottom { @include undershoot(bottom); }
2687
&.left { @include undershoot(left); }
2689
&.right { @include undershoot(right); }
2691
}
2692
@at-root junction { // the small square between two scrollbars
2694
border-style: solid none none solid;
2695
border-width: 1px;
2696
border-color: $border_color;
2697
background-color: $base_color;
2698
&:dir(rtl) { border-style: solid solid none none; }
2700
}
2701
}
2702
// vbox and hbox separators
2704
separator {
2705
min-width: 1px;
2706
min-height: 1px;
2707
background-color: $border_color;
2708
}
2709
%hide_separators {
2711
min-width: 0;
2712
min-height: 0;
2713
background-color: transparent;
2714
}
2715
/*********
2718
* Lists *
2719
*********/
2720
list {
2721
border-color: $border_color;
2722
background-color: $base_color;
2723
row { padding: 2px; }
2725
}
2726
// FIXME
2728
$row_transition: $longer_transition, background-color 0, color 0;
2729
row {
2731
&.activatable {
2732
transition: $row_transition,
2733
background-size $ripple_duration $deceleration_curve,
2734
background-image $ripple_duration * 2 $deceleration_curve;
2735
box-shadow: inset 0 0 0 9999px transparent;
2736
background-image: radial-gradient(circle farthest-corner at center,
2737
transparent 10%,
2738
transparent 0%);
2739
background-repeat: no-repeat;
2740
background-position: center;
2741
background-size: 1000% 1000%;
2742
&:hover {
2744
transition: $row_transition,
2745
box-shadow 0,
2746
background-size $ripple_duration $deceleration_curve,
2747
background-image $ripple_duration * 2 $deceleration_curve;
2748
box-shadow: inset 0 0 0 9999px $row_fill_color;
2749
}
2750
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2752
&:active {
2753
transition: $row_transition,
2754
background-size 0,
2755
background-image 0;
2756
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2757
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2758
background-image: radial-gradient(circle farthest-corner at center,
2759
$semi_fill_color 10%,
2760
transparent 0%);
2761
background-size: 0% 0%;
2762
}
2763
}
2764
&:selected { @extend %selected_items; }
2766
}
2767
/*********************
2770
* App Notifications *
2771
*********************/
2772
.app-notification {
2773
@extend %osd;
2774
@extend toolbar.osd;
2776
margin: 8px;
2778
button { @extend %button_basic.flat; }
2780
&.frame,
2782
border { border-style: none; }
2783
}
2784
/*************
2787
* Expanders *
2788
*************/
2789
expander {
2790
arrow {
2791
transition: all $shorter_duration $standard_curve;
2792
min-width: 16px;
2793
min-height: 16px;
2794
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2795
-gtk-icon-transform: rotate(-90deg);
2796
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2798
&:checked { -gtk-icon-transform: unset; }
2800
color: $secondary_fg_color;
2802
&:hover, &:active { color: $fg_color; }
2804
&:disabled { color: $disabled_secondary_fg_color; }
2806
&:selected {
2808
color: $secondary_inverse_fg_color;
2809
&:hover, &:active { color: $inverse_fg_color; }
2811
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2813
}
2814
}
2815
}
2816
/************
2819
* Calendar *
2820
************/
2821
calendar {
2822
padding: 1px;
2823
border: 1px solid $border_color;
2824
color: $fg_color;
2825
&:disabled { color: $disabled_fg_color; }
2827
&:selected {
2829
@extend %selected_items;
2830
border-radius: 2px + 1px;
2832
}
2833
&.header {
2835
border-style: none none solid;
2836
border-radius: 0;
2837
}
2838
&.button { @extend %simple_flat_button; }
2840
&.highlight {
2842
color: $secondary_fg_color;
2843
font-weight: 500;
2844
}
2845
&:indeterminate { color: $disabled_secondary_fg_color; }
2847
}
2848
/***********
2851
* Dialogs *
2852
***********/
2853
messagedialog { // Message Dialog styling
2854
&.background { background-color: $lighter_bg_color; }
2855
.titlebar {
2857
min-height: $small_size;
2858
border-style: none;
2859
box-shadow: inset 0 1px $highlight_color;
2860
background-color: $lighter_bg_color;
2861
color: $fg_color;
2862
&:backdrop { color: $secondary_fg_color; }
2864
}
2865
&.csd { // rounded bottom border styling for csd version
2867
&.background {
2868
// bigger radius for better antialiasing
2869
border-bottom-left-radius: 2px;
2870
border-bottom-right-radius: 2px;
2871
}
2872
.dialog-action-area button {
2874
padding: 8px 16px;
2875
border-top: 1px solid $border_color;
2876
border-radius: 0;
2877
@extend %simple_flat_button;
2879
&:first-child { border-bottom-left-radius: 2px; }
2881
&:last-child { border-bottom-right-radius: 2px; }
2883
}
2884
}
2885
entry { @extend %entry.flat; }
2887
}
2888
filechooser {
2890
.dialog-action-box { border-top: 1px solid $border_color; }
2891
#pathbarbox {
2893
border-bottom: 1px solid $border_color;
2894
background-color: $bg_color;
2895
}
2896
}
2897
filechooserbutton:drop(active) {
2899
box-shadow: none;
2900
}
2901
/***********
2904
* Sidebar *
2905
***********/
2906
.sidebar {
2907
border-style: none;
2908
background-color: $lighter_bg_color;
2909
@at-root %sidebar_left,
2911
&:dir(ltr),
2912
&.left,
2913
&.left:dir(rtl) {
2914
border-right: 1px solid $border_color;
2915
border-left-style: none;
2916
}
2917
@at-root %sidebar_right,
2919
&:dir(rtl),
2920
&.right {
2921
border-left: 1px solid $border_color;
2922
border-right-style: none;
2923
}
2924
list { background-color: transparent; }
2926
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2928
}
2929
stacksidebar {
2931
&.sidebar {
2932
&:dir(ltr),
2933
&.left,
2934
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2935
&:dir(rtl),
2937
&.right { list { @extend %sidebar_right; }}
2938
}
2939
row {
2941
padding: 10px 4px;
2942
> label {
2944
padding-left: 6px;
2945
padding-right: 6px;
2946
}
2947
&.needs-attention > label { @extend %needs_attention; }
2949
}
2950
}
2951
/****************
2954
* File chooser *
2955
****************/
2956
placessidebar {
2957
> viewport.frame { border-style: none; }
2958
list { padding: (4px - 3px) 0 4px; }
2960
row {
2962
// Needs overriding of the GtkListBoxRow padding
2963
min-height: 32px;
2964
margin: -1px 0; // Remove unknown margins
2965
padding: 0;
2966
// Using margins/padding directly in the SidebarRow
2968
// will make the animation of the new bookmark row jump
2969
> revealer { padding: 0 12px; }
2970
&:selected { color: $inverse_fg_color; }
2972
&:disabled { color: $disabled_fg_color; }
2974
image.sidebar-icon {
2976
color: $secondary_fg_color; // dim the device icons
2977
&:dir(ltr) { padding-right: 8px; }
2979
&:dir(rtl) { padding-left: 8px; }
2980
}
2981
&:selected image.sidebar-icon { color: $secondary_inverse_fg_color; }
2983
label.sidebar-label {
2985
&:dir(ltr) { padding-right: 2px; }
2986
&:dir(rtl) { padding-left: 2px; }
2987
}
2988
@at-root button.sidebar-button {
2990
@extend %simple_flat_button;
2991
@extend %small_button;
2993
row:selected & { @extend %button_selected.flat; }
2995
}
2996
&.sidebar-placeholder-row {
2998
min-height: 2px;
2999
padding: 0 8px;
3000
background-image: image($accent_color);
3001
background-clip: content-box;
3002
}
3003
&.sidebar-new-bookmark-row { color: $accent_color; }
3005
&:drop(active):not(:disabled) {
3007
box-shadow: inset 0 0 0 2px $accent_color;
3008
&:selected {
3010
// background-color: $accent_color;
3011
// color: $inverse_fg_color;
3012
}
3013
}
3014
}
3015
}
3016
placesview {
3018
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3019
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3021
// this selects the "connect to server" label
3023
> actionbar > revealer > box > label {
3024
padding-left: 8px;
3025
padding-right: 8px;
3026
}
3027
}
3028
/*********
3031
* Paned *
3032
*********/
3033
paned {
3034
> separator {
3035
min-width: 1px;
3036
min-height: 1px;
3037
-gtk-icon-source: none; // defeats the ugly default handle decoration
3038
border-style: none; // just to be sure
3039
background-color: transparent;
3040
// workaround, using background istead of a border since the border will get rendered twice (?)
3041
background-image: image($border_color);
3042
background-size: 1px 1px;
3043
background-clip: content-box; // avoids borders image being rendered twice (?)
3044
&.wide {
3046
min-width: 6px;
3047
min-height: 6px;
3048
background-color: $bg_color;
3049
background-image: image($border_color), image($border_color);
3050
background-size: 1px 1px, 1px 1px;
3051
}
3052
}
3053
&.horizontal > separator {
3055
background-repeat: repeat-y;
3056
&:dir(ltr) {
3058
margin: 0 -8px 0 0;
3059
padding: 0 8px 0 0;
3060
background-position: left;
3061
}
3062
&:dir(rtl) {
3064
margin: 0 0 0 -8px;
3065
padding: 0 0 0 8px;
3066
background-position: right;
3067
}
3068
&.wide {
3070
margin: 0;
3071
padding: 0;
3072
background-repeat: repeat-y, repeat-y;
3073
background-position: left, right;
3074
}
3075
}
3076
&.vertical > separator {
3078
margin: 0 0 -8px 0;
3079
padding: 0 0 8px 0;
3080
background-repeat: repeat-x;
3081
background-position: top;
3082
&.wide {
3084
margin: 0;
3085
padding: 0;
3086
background-repeat: repeat-x, repeat-x;
3087
background-position: bottom, top;
3088
}
3089
}
3090
}
3091
/**************
3094
* GtkInfoBar *
3095
**************/
3096
infobar {
3097
border-style: none;
3098
&.info { background-color: $info_bg_color; }
3100
&.question { background-color: $question_bg_color; }
3102
&.warning { background-color: $warning_bg_color; }
3104
&.error { background-color: $error_bg_color; }
3106
&.info,
3108
&.question,
3109
&.warning,
3110
&.error {
3111
> label, & { color: $inverse_fg_color; }
3112
button { @extend %button_selected; }
3114
selection {}
3116
*:link { @extend %link_selected; }
3118
}
3119
}
3120
/************
3123
* Tooltips *
3124
************/
3125
tooltip {
3126
&.background {
3127
// background-color needs to be set this way otherwise it gets drawn twice
3128
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3129
box-shadow: inset 0 1px $highlight_color;
3130
background-color: rgba($base_color, $higher_opacity);
3131
}
3132
// @extend %osd;
3134
// padding: 4px; /* not working */
3136
border-radius: 2px;
3137
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3138
&:not(.csd):not(.unity-csd) {
3140
border: 1px solid $border_color;
3141
border-radius: 2px + 1px;
3142
background-clip: $extra_background_clip;
3143
}
3144
// FIXME: we need a border or tooltips vanish on black background.
3146
decoration { background-color: transparent; }
3147
label {
3149
// tooltip label already seems to have 6px margins
3150
min-height: 32px - 6px * 2;
3151
padding: 0 8px - 6px;
3152
}
3153
* {
3155
// workaround for Eclipse.
3156
// do not include any declaration here.
3157
// padding: 0;
3158
// background-color: transparent;
3159
// color: inherit;
3160
}
3161
}
3162
/*****************
3165
* Color Chooser *
3166
*****************/
3167
colorswatch {
3168
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3169
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3170
// applied to the overlay box.
3171
// base color corners rounding
3173
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3174
// sports a bigger radius.
3175
// nth-child is needed by the custom color strip.
3176
&.top {
3178
border-top-left-radius: $material_radius + 0.5px;
3179
border-top-right-radius: $material_radius + 0.5px;
3180
overlay {
3182
border-top-left-radius: $material_radius;
3183
border-top-right-radius: $material_radius;
3184
}
3185
}
3186
&.bottom {
3188
border-bottom-left-radius: $material_radius + 0.5px;
3189
border-bottom-right-radius: $material_radius + 0.5px;
3190
overlay {
3192
border-bottom-left-radius: $material_radius;
3193
border-bottom-right-radius: $material_radius;
3194
}
3195
}
3196
&.left,
3198
&:first-child:not(.top) {
3199
border-top-left-radius: $material_radius + 0.5px;
3200
border-bottom-left-radius: $material_radius + 0.5px;
3201
overlay {
3203
border-top-left-radius: $material_radius;
3204
border-bottom-left-radius: $material_radius;
3205
}
3206
}
3207
&.right,
3209
&:last-child:not(.bottom) {
3210
border-top-right-radius: $material_radius + 0.5px;
3211
border-bottom-right-radius: $material_radius + 0.5px;
3212
overlay {
3214
border-top-right-radius: $material_radius;
3215
border-bottom-right-radius: $material_radius;
3216
}
3217
}
3218
&.dark overlay { color: $light_fg_color; }
3220
&.light overlay { color: $dark_fg_color; }
3222
&.dark { color: $light_fg_color; } // for focus ring
3224
&.light { color: $dark_fg_color; } // for focus ring
3226
&:drop(active) {
3228
box-shadow: none;
3229
&.light overlay {
3231
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3232
}
3233
&.dark overlay {
3235
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3236
}
3237
}
3238
overlay {
3240
transition: $shadow_transition;
3241
box-shadow: $shadow_1;
3242
&:hover { box-shadow: $shadow_2; }
3244
}
3245
&#add-color-button {
3247
border-radius: $material_radius $material_radius 0 0;
3248
color: $light_fg_color; // for focus ring
3249
&:only-child { border-radius: $material_radius; }
3251
overlay {
3253
background-image: linear-gradient(to right,
3254
$error_bg_color 25%,
3255
$warning_bg_color 25%, $warning_bg_color 50%,
3256
$info_bg_color 50%, $info_bg_color 75%,
3257
$question_bg_color 75%);
3258
color: $light_fg_color;
3259
}
3260
}
3261
&:disabled {
3263
opacity: $disabled_opacity;
3264
overlay { box-shadow: none; }
3266
}
3267
row:selected & {
3269
}
3270
&#editor-color-sample {
3272
border-radius: $material_radius + 0.5px;
3273
overlay { border-radius: $material_radius; }
3275
// overlay:hover { box-shadow: $shadow_1; }
3277
}
3278
}
3279
// colorscale popup
3281
colorchooser .popover.osd {
3282
transition: $shadow_transition;
3283
border-radius: 2px;
3284
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3285
background-color: $base_color;
3286
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3288
spinbutton:not(.vertical) { @extend %entry.flat; }
3290
}
3291
/********
3294
* Misc *
3295
********/
3296
// content view (grid/list)
3297
.content-view {
3298
background-color: $bg_color;
3299
// &:hover { -gtk-icon-effect: highlight; }
3301
rubberband, .rubberband { @extend rubberband; }
3303
}
3304
.scale-popup {
3306
.osd & { @extend %osd; }
3307
.osd & button.flat { // FIXME: quick hack, redo properly
3309
}
3310
button { // +/- buttons on GtkVolumeButton popup
3312
}
3313
}
3314
/**********************
3317
* Window Decorations *
3318
**********************/
3319
decoration {
3320
transition: $shadow_transition;
3321
border-radius: 2px 2px 0 0;
3322
box-shadow: $shadow_4, 0 16px 16px transparent;
3323
// FIXME rationalize shadows
3325
// this is used for the resize cursor area
3327
margin: 8px;
3328
&:backdrop {
3330
// the transparent shadow here is to enforce that the shadow extents don't
3331
// change when we go to backdrop, to prevent jumping windows.
3332
// The biggest shadow should be in the same order then in the active state
3333
// or the jumping will happen during the transition.
3334
box-shadow: $shadow_2, 0 16px 16px transparent;
3335
}
3336
.maximized &,
3338
.fullscreen &,
3339
.tiled & { border-radius: 0; }
3340
.popup & { box-shadow: none; }
3342
// server-side decorations as used by mutter
3344
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3345
.csd.popup & {
3347
border-radius: 2px;
3348
box-shadow: $shadow_2;
3349
}
3350
tooltip.csd & {
3352
border-radius: 2px;
3353
box-shadow: $shadow_2;
3354
}
3355
messagedialog.csd & {
3357
border-radius: 2px;
3358
// box-shadow: $shadow_4, 0 16px 16px transparent;
3359
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3361
}
3362
.solid-csd & {
3364
margin: 0;
3365
// padding: 4px;
3366
border-radius: 0;
3367
box-shadow: none;
3368
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3369
background-color: $titlebar_bg_color;
3370
}
3371
}
3372
// Window Close button
3374
button.titlebutton {
3375
// @extend %simple_flat_button;
3376
@extend %circular_button;
3378
.selection-mode & {
3380
}
3381
}
3382
// catch all extend :)
3385
%selected_items {
3387
background-color: $primary_color;
3388
@at-root %nobg_selected_items, & {
3390
color: $inverse_fg_color;
3391
&:disabled { color: $disabled_inverse_fg_color; }
3393
}
3394
}
3395
.monospace { font-family: monospace; }
3397
/**********************
3400
* Touch Copy & Paste *
3401
**********************/
3402
// touch selection handlebars for the Popover.osd above
3403
cursor-handle {
3404
border-radius: $circular_radius;
3405
background-color: $accent_color;
3406
background-image: none;
3407
&.top:dir(ltr), &.bottom:dir(rtl) {
3409
padding-left: 6px;
3410
border-top-right-radius: 0;
3411
}
3412
&.bottom:dir(ltr), &.top:dir(rtl) {
3414
padding-right: 6px;
3415
border-top-left-radius: 0;
3416
}
3417
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3419
-GtkWidget-text-handle-width: 24;
3420
-GtkWidget-text-handle-height: 30;
3421
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3423
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3424
url('#{$_url}@2.png'));
3425
}
3426
}
3427
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3429
// shortcut window keys
3431
.keycap {
3432
min-width: 28px - 8px * 2;
3433
min-height: 28px - 2px;
3434
margin-top: 2px;
3435
padding-bottom: 2px;
3436
padding-left: 8px;
3437
padding-right: 8px;
3438
border: solid 1px $border_color;
3440
border-radius: 2px + 1px;
3441
box-shadow: inset 0 -2px $border_color;
3442
background-color: $base_color;
3443
color: $fg_color;
3444
font-size: smaller;
3445
}
3446
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3448
transition: $longer_transition;
3449
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3450
caret-color: $accent_color;
3451
}
3452
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3454
stackswitcher button.circular,
3456
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3457
min-width: $medium_size;
3458
min-height: $medium_size;
3459
padding: 0;
3460
}
3461