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
notebook:focus tab,
37
*:focus { outline-color: $fill_color; }
38
/***************
41
* Base States *
42
***************/
43
.background {
44
background-color: $bg_color;
45
color: $fg_color;
46
}
47
/*
49
These wildcard seems unavoidable, need to investigate.
50
Wildcards are bad and troublesome, use them with care,
51
or better, just don't.
52
Everytime a wildcard is used a kitten dies, painfully.
53
*/
54
*:disabled { -gtk-icon-effect: dim; }
56
.gtkstyle-fallback {
58
background-color: $bg_color;
59
color: $fg_color;
60
&:hover {
62
background-color: darken($bg_color, 5%);
63
color: $fg_color;
64
}
65
&:active {
67
background-color: darken($bg_color, 10%);
68
color: $fg_color;
69
}
70
&:disabled {
72
background-color: $bg_color;
73
color: $disabled_fg_color;
74
}
75
&:selected {
77
background-color: $primary_color;
78
color: $inverse_fg_color;
79
}
80
}
81
.view {
83
@extend row.activatable;
84
background-color: $base_color;
86
color: $fg_color;
87
&:disabled { color: $disabled_fg_color; }
89
&:hover, &:active, &:selected { border-radius: 2px; }
91
selection,
93
&:selected { @extend %selected_items; }
94
}
95
textview {
97
// FIXME: we need to override background-color to ensure text rendering
98
text { background-color: $base_color; }
99
border {
101
background-color: $alt_base_color;
102
color: $hint_fg_color; // FIXME: not working
103
}
104
}
105
// iconview { @extend .view; }
107
.rubberband,
109
rubberband {
110
border: 1px solid $alt_primary_color;
111
background-color: rgba($alt_primary_color, $lower_opacity);
112
}
113
flowbox {
115
rubberband { @extend rubberband; }
116
flowboxchild {
118
padding: 4px;
119
border-radius: 2px;
120
&:selected { @extend %selected_items; }
122
}
123
}
124
.content-view .tile {
126
// margin: 2px;
127
// padding: 0;
128
// border-radius: 0;
129
// background-color: $black;
130
&:selected {
132
background-color: transparent;
133
color: inherit;
134
}
135
}
136
label {
138
caret-color: currentColor; // this shouldn't be needed.
139
&.separator {
141
@extend .dim-label;
142
color: $fg_color;
144
}
145
row:selected &,
147
&:selected { @extend %nobg_selected_items; }
148
selection {
150
background-color: $primary_color;
151
color: $inverse_fg_color;
152
}
153
&:disabled {
155
color: $disabled_fg_color;
156
selection { @extend %selected_items:disabled; }
158
tab &,
160
button & { color: inherit; }
161
}
162
}
163
.dim-label { opacity: $hint_opacity; }
165
assistant {
167
.sidebar {
168
padding: 4px 0;
169
// background-color: $base_color;
170
// border-top: 1px solid $border_color;
171
}
172
// &.csd .sidebar { border-top-style: none; }
174
.sidebar label {
176
min-height: $medium_size;
177
padding: 0 12px;
178
color: $hint_fg_color;
179
font-weight: 500;
180
&.highlight { color: $fg_color; }
182
}
183
}
184
%osd, .osd { opacity: $higher_opacity; }
186
/*********************
189
* Spinner Animation *
190
*********************/
191
@keyframes spin {
192
to { -gtk-icon-transform: rotate(1turn); }
193
}
194
spinner {
196
background: none;
197
opacity: 0; // non spinning spinner makes no sense
198
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
199
&:checked {
201
opacity: 1;
202
animation: spin 1s linear infinite;
203
&:disabled { opacity: $disabled_opacity; }
205
}
206
}
207
/****************
210
* Text Entries *
211
****************/
212
%entry,
213
entry {
214
%entry_basic, & {
215
min-height: $medium_size;
216
padding: 0 8px;
217
border-radius: 2px;
218
@include entry(normal);
220
&:focus { @include entry(focus); }
222
&:disabled { @include entry(disabled); }
224
&.flat {
226
border-radius: 0;
227
@include entry(flat-normal);
229
&:focus { @include entry(flat-focus); }
231
&:disabled { @include entry(flat-disabled); }
233
}
234
image { // icons inside the entry
236
// @extend %simple_flat_button;
237
// min-height: $small_size;
239
// min-width: $small_size;
240
// border-radius: $circular_radius;
241
// -gtk-outline-radius: $circular_radius;
242
color: $secondary_fg_color;
243
&:hover, &:active { color: $fg_color; }
245
&:disabled { color: $hint_fg_color; }
247
&.left {
249
margin-left: ($medium_size - 16px) / 2 - 8px;
250
margin-right: 6px;
251
}
252
&.right {
254
margin-left: 6px;
255
margin-right: ($medium_size - 16px) / 2 - 8px;
256
}
257
}
258
undershoot {
260
&.left { @include undershoot(left); }
261
&.right { @include undershoot(right); }
263
}
264
selection { @extend %selected_items; }
266
// entry error and warning style
268
@each $e_type, $e_color in (error, $error_color),
269
(warning, $warning_color) {
270
&.#{$e_type} {
271
@include entry(normal, $e_color);
272
&:focus { @include entry(focus, $e_color); }
274
&:disabled { @include entry(disabled, $e_color); }
276
&.flat {
278
@include entry(flat-normal, $e_color);
279
&:focus { @include entry(flat-focus, $e_color); }
281
&:disabled { @include entry(flat-disabled, $e_color); }
283
}
284
image {
286
color: $inverse_secondary_fg_color;
287
&:hover, &:active { color: $inverse_fg_color; }
289
&:disabled { color: $inverse_hint_fg_color; }
291
}
292
}
293
}
294
&:drop(active) {
296
// box-shadow: inset 0 0 0 2px $accent_color;
297
}
298
.osd & {
300
}
301
}
302
progress {
304
margin: 2px (2px - 8px);
305
border-bottom: 2px solid $primary_color;
306
background-color: transparent;
307
}
308
// linked entries
310
.linked:not(.vertical) > & { @extend %linked; }
311
// Vertically linked entries
313
.linked.vertical > & { @extend %linked_vertical; }
314
.linked:not(.vertical) > &.flat,
316
.linked.vertical > &.flat { border-radius: 0; }
317
}
318
treeview entry {
320
&.flat, & {
321
min-height: 0;
322
padding: 2px;
323
border-radius: 0;
324
background-color: $base_color;
325
&, &:focus {
327
border-image: none;
328
box-shadow: none;
329
}
330
}
331
}
332
.entry-tag {
334
$tag_height: 24px;
335
$tag_margin: ($medium_size - $tag_height) / 2;
336
margin: $tag_margin; // instead of min-height: $tag_height;
338
border-radius: $circular_radius;
339
box-shadow: none;
340
background-color: $primary_color;
341
color: $inverse_fg_color;
342
&:hover { box-shadow: $shadow_1; }
344
// side margins: compensate the entry padding with a negative margin
346
// then the negative margin itself
347
:dir(ltr) & {
348
margin-left: 8px;
349
margin-right: $tag_margin - 8px;
350
padding-left: 8px;
351
padding-right: ($tag_height - 16px) / 2;
352
}
353
:dir(rtl) & {
355
margin-left: $tag_margin - 8px;
356
margin-right: 8px;
357
padding-left: ($tag_height - 16px) / 2;
358
padding-right: 8px;
359
}
360
// seems any sizing doesn't work
362
&.button {
363
box-shadow: none;
364
background-color: transparent;
365
&:not(:hover):not(:active) { color: $inverse_secondary_fg_color; }
367
}
368
}
369
/***********
372
* Buttons *
373
***********/
374
// stuff for .needs-attention
375
@keyframes needs_attention {
376
from {
377
background-image: -gtk-gradient(radial,
378
center center, 0,
379
center center, 0.001,
380
to($accent_color),
381
to(transparent));
382
}
383
to {
385
background-image: -gtk-gradient(radial,
386
center center, 0,
387
center center, 0.5,
388
to($accent_color),
389
to(transparent));
390
}
391
}
392
%button,
394
button {
395
@at-root %button_basic, & {
396
min-height: 24px;
397
min-width: 16px;
398
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
399
border-radius: 2px;
400
font-weight: 500;
401
@include button(normal);
403
&:hover { @include button(hover); }
405
&:active { @include button(active); }
407
&:disabled { @include button(disabled); }
409
&:checked { @include button(checked); }
411
&:checked:disabled { @include button(checked-disabled); }
413
@at-root %flat_button, &.flat {
415
@at-root %simple_flat_button, & {
416
@include button(flat-normal);
417
&:hover { @include button(flat-hover); }
419
&:active { @include button(flat-active); }
421
&:disabled { @include button(flat-disabled); }
423
}
424
&:checked { @include button(flat-checked); }
426
&:checked:disabled { @include button(flat-checked-disabled); }
428
}
429
&.text-button {
431
padding-left: 16px;
432
padding-right: 16px;
433
}
434
&.image-button {
436
min-width: 24px;
437
padding: ($medium_size - 24px) / 2;
438
@extend %circular_button;
440
}
441
&.text-button.image-button {
443
border-radius: 2px;
444
-gtk-outline-radius: 2px;
445
label {
447
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
448
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
450
}
451
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
453
}
454
.linked > & { @extend %linked; }
456
.linked.vertical > & { @extend %linked_vertical; }
458
.linked > &.flat,
460
.linked.vertical > &.flat {
461
border-radius: 2px;
462
&.image-button { @extend %circular_button; }
464
&.text-button.image-button {
466
border-radius: 2px;
467
-gtk-outline-radius: 2px;
468
}
469
}
470
&:drop(active) {
472
// box-shadow: inset 0 0 0 2px $accent_color;
473
}
474
}
475
@at-root %button_selected, row:selected & {
477
&:disabled {
478
background-color: $inverse_divider_color;
479
color: $inverse_disabled_secondary_fg_color;
480
}
481
&.flat {
483
color: $inverse_secondary_fg_color;
484
&:hover, &:active { color: $inverse_fg_color; }
486
&:disabled { color: $inverse_disabled_secondary_fg_color; }
488
&:checked {
490
background-color: $inverse_track_color;
491
color: $inverse_fg_color;
492
}
493
&:checked:disabled {
495
background-color: $inverse_divider_color;
496
color: $inverse_disabled_fg_color;
497
}
498
}
499
}
500
// big standalone buttons like in Documents pager
502
&.osd {
503
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
504
&.image-button { padding: ($large_size - 24px) / 2; }
506
&:disabled { opacity: 0; }
508
}
509
// overlay / OSD style
511
@at-root %osd_button,
512
.osd & {
513
}
514
// Suggested and Destructive Action buttons
516
@each $b_type, $b_color in (suggested-action, $suggested_color),
517
(destructive-action, $destructive_color) {
518
&.#{$b_type} {
519
background-color: $b_color;
520
color: $inverse_fg_color;
521
&:disabled { @include button(disabled, $b_color); }
523
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
525
&.flat {
527
background-color: transparent;
528
color: $b_color;
529
&:disabled { @include button(flat-disabled, $b_color); }
531
&:checked { background-color: rgba($b_color, 0.3); }
533
}
534
.osd & {
536
}
537
}
538
}
539
.stack-switcher > & {
541
// to position the needs attention dot, padding is added to the button
542
// child, a label needs just lateral padding while an icon needs vertical
543
// padding added too.
544
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
546
> label {
548
padding-left: 6px; // label padding
549
padding-right: 6px; //
550
}
551
> image {
553
padding-left: 6px; // image padding
554
padding-right: 6px; //
555
padding-top: 3px; //
556
padding-bottom: 3px; //
557
}
558
&.text-button {
560
// compensate text-button paddings
561
padding-left: 16px - 6px;
562
padding-right: 16px - 6px;
563
}
564
&.image-button {
566
// we want image buttons to have a 1:1 aspect ratio, so compensation
567
// of the padding added to the GtkImage is needed
568
padding-left: ($medium_size - 16px) / 2 - 6px;
569
padding-right: ($medium_size - 16px) / 2 - 6px;
570
}
571
&.needs-attention {
573
> label,
574
> image { @extend %needs_attention; }
575
&:checked {
577
> label,
578
> image {
579
animation: none;
580
background-image: none;
581
}
582
}
583
}
584
}
585
// hide separators
587
&.font,
588
&.file { separator { @extend %hide_separators; }}
589
// &.font { > box > box > label { font-weight: bold; }}
591
// inline-toolbar buttons
593
.inline-toolbar & {
594
// @extend %button_basic.flat;
595
&:not(.text-button) { @extend %circular_button; }
597
}
598
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
600
@at-root %circular_button,
602
&.close,
603
&.circular { // The Bloody Circul Button
604
border-radius: $circular_radius;
605
-gtk-outline-radius: $circular_radius;
606
// label { padding: 0; }
608
}
609
@at-root %small_button {
611
min-height: $small_size;
612
min-width: $small_size;
613
padding: 0;
614
border-radius: $circular_radius;
615
-gtk-outline-radius: $circular_radius;
616
}
617
}
618
%needs_attention {
620
animation: needs_attention $longer_duration $deceleration_curve forwards;
621
background-repeat: no-repeat;
622
background-position: right 3px;
623
background-size: 6px 6px;
624
&:dir(rtl) { background-position: left 3px; }
626
}
627
// all the following is for the +|- buttons on inline toolbars, that way
629
// should really be deprecated...
630
.inline-toolbar toolbutton > button { // redefining the button look is
631
// needed since those are flat...
632
}
633
// More inline toolbar buttons
635
toolbar.inline-toolbar toolbutton {
636
// > button.flat { @extend %linked_middle; }
637
// &:first-child > button.flat { @extend %linked:first-child; }
639
// &:last-child > button.flat { @extend %linked:last-child; }
641
// &:only-child > button.flat { @extend %linked:only-child; }
643
}
644
%linked_middle {
646
border-radius: 0;
647
-gtk-outline-radius: 2px;
648
}
649
%linked {
651
@extend %linked_middle;
652
&:first-child {
654
border-top-left-radius: 2px;
655
border-bottom-left-radius: 2px;
656
}
657
&:last-child {
659
border-top-right-radius: 2px;
660
border-bottom-right-radius: 2px;
661
}
662
&:only-child {
664
border-radius: 2px;
665
}
666
}
667
%linked_vertical_middle {
669
border-radius: 0;
670
-gtk-outline-radius: 2px;
671
}
672
%linked_vertical {
674
@extend %linked_vertical_middle;
675
&:first-child {
677
border-top-left-radius: 2px;
678
border-top-right-radius: 2px;
679
}
680
&:last-child {
682
border-bottom-left-radius: 2px;
683
border-bottom-right-radius: 2px;
684
}
685
&:only-child {
687
border-radius: 2px;
688
}
689
}
690
/* menu buttons */
692
modelbutton.flat,
693
.menuitem.button.flat {
694
min-height: $menuitem_size;
695
padding: 0 8px;
696
border-radius: 2px;
697
color: inherit;
698
@extend %simple_flat_button;
700
&:selected { @extend %selected_items; }
702
}
703
modelbutton.flat arrow {
705
background: none;
706
&:hover { background: none; }
708
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
710
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
712
}
713
button.color {
715
min-height: $small_size;
716
min-width: $small_size;
717
padding: $container_padding;
718
colorswatch:only-child {
720
// &, overlay { border-radius: 0; }
721
}
722
}
723
/*********
726
* Links *
727
*********/
728
*:link {
729
&, &:hover, &:active { color: $link_color; }
730
&:visited {
732
&, &:hover, &:active { color: $visited_link_color; }
733
}
734
@at-root %link_selected,
736
&:selected,
737
*:selected & { color: $inverse_fg_color; }
738
}
739
button:link,
741
button:visited {
742
@extend *:link;
743
> label { text-decoration-line: underline; }
745
}
746
/*****************
748
* GtkSpinButton *
749
*****************/
750
spinbutton {
751
&:not(.vertical) {
752
// in this horizontal configuration, the whole spinbutton
753
// behaves as the entry, so we extend the entry styling
754
// and nuke the style on the internal entry
755
@extend %entry;
756
padding: 0;
758
%spinbutton_entry,
760
entry {
761
min-width: $large_size - 8px * 2;
762
// reset all the other props since the spinbutton node is styled here
763
margin: 0;
764
border-image: none;
765
border-radius: 0;
766
box-shadow: none;
767
background-color: transparent;
768
//
769
// This will help to simplify spinbutton's code, but unfortunatelly
770
// doesn't work properly in :dir(rtl). It needs z-index property.
771
//
772
// min-width: $large_size - 8px;
773
//
774
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
775
//
776
// &:dir(ltr) {
777
// margin-right: -$spinbuttons_width;
778
// padding-right: $spinbuttons_width;
779
// }
780
//
781
// &:dir(rtl) {
782
// margin-left: -$spinbuttons_width;
783
// padding-left: $spinbuttons_width;
784
// }
785
}
786
button {
788
// margin: $container_padding;
789
border: solid $container_padding transparent;
790
@extend %simple_flat_button;
792
@extend %small_button;
794
&.up:dir(ltr),
796
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
797
&.up:dir(rtl),
799
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
800
}
801
}
802
// OSD horizontal
804
.osd &:not(.vertical) {
805
button {
806
}
807
}
808
// Vertical
810
&.vertical {
811
// in the vertical configuration, we treat the spinbutton
812
// as a box, and tweak the style of the entry in the middle
813
// so that it's linked
814
// FIXME: this should not be set at all, but otherwise it gets the wrong
816
// color
817
&:disabled { color: $disabled_fg_color; }
818
&:drop(active) {
820
box-shadow: none;
821
}
822
entry {
824
min-height: $medium_size;
825
min-width: $large_size;
826
padding: 0;
827
}
828
button {
830
min-height: $medium_size;
831
min-width: $large_size;
832
padding: 0;
833
@extend %simple_flat_button;
835
&.up { border-radius: 2px 2px 0 0; }
837
&.down { border-radius: 0 0 2px 2px; }
839
}
840
}
841
// OSD vertical
843
.osd &.vertical button:first-child {
844
}
845
// Misc
847
treeview &:not(.vertical) {
848
min-height: 0;
849
border-style: none;
850
border-radius: 0;
851
entry {
853
min-height: 0;
854
padding: 1px 2px;
855
}
856
}
857
}
858
/**************
861
* ComboBoxes *
862
**************/
863
combobox {
864
arrow {
865
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
866
min-height: 16px;
867
min-width: 16px;
868
}
869
decoration,
871
button.combo:checked { transition: none; } // workaround for menuitem selection
872
button.combo cellview {
874
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
875
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
876
}
877
#gtk-combobox-popup-menu {
879
padding: 2px 0;
880
menuitem {
882
min-height: $medium_size - 2px * 2;
883
padding: 0 8px;
884
}
885
// overflow arrows
887
> arrow {
888
&.top { margin-top: -2px; }
889
&.bottom { margin-bottom: -2px * 3; }
891
}
892
}
893
&.linked {
895
button:nth-child(2) {
896
&:dir(ltr) { @extend %linked:last-child; }
897
&:dir(rtl) { @extend %linked:first-child; }
898
}
899
}
900
&:drop(active) { // FIXME: untested
902
box-shadow: none;
903
// button.combo { @extend %button_basic:drop(active); }
905
}
906
}
907
// the combo is a composite widget so the way we do button linking doesn't
909
// work, special case needed. See
910
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
911
.linked:not(.vertical) > combobox {
913
> box > button.combo { @extend %linked_middle; }
914
&:first-child > box > button.combo { @extend %linked:first-child; }
916
&:last-child > box > button.combo { @extend %linked:last-child; }
918
&:only-child > box > button.combo { @extend %linked:only-child; }
920
}
921
.linked.vertical > combobox {
923
> box > button.combo { @extend %linked_vertical_middle; }
924
&:first-child > box > button.combo { @extend %linked_vertical:first-child; }
926
&:last-child > box > button.combo { @extend %linked_vertical:last-child; }
928
&:only-child > box > button.combo { @extend %linked_vertical:only-child; }
930
}
931
%combo_flat {
933
border-radius: 0;
934
background-image: none;
935
font-weight: inherit;
936
@include entry(flat-normal);
938
&:hover { box-shadow: inset 0 -2px $hint_fg_color; }
940
&:checked {
942
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
943
$primary_color 100%,
944
transparent 0%)
945
0 0 2 / 0 0 2px;
946
}
947
&:disabled {
949
box-shadow: inset 0 -1px $divider_color;
950
color: $disabled_fg_color;
951
}
952
}
953
/************
956
* Toolbars *
957
************/
958
toolbar {
959
-GtkWidget-window-dragging: true;
960
padding: 2px;
961
background-color: $bg_color;
962
button { @extend %button_basic.flat; }
964
// on OSD
966
.osd & { background-color: transparent; }
967
// stand-alone OSD toolbars
969
&.osd {
970
transition: $shadow_transition;
971
padding: $container_padding;
972
border-radius: 2px;
973
box-shadow: $shadow_2, inset 0 1px $highlight_color;
974
background-color: $base_color;
975
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
977
&.left,
979
&.right,
980
&.top,
981
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
982
}
983
// toolbar separators
985
&.horizontal > separator { margin: 2px; }
986
&.vertical > separator { margin: 2px; }
987
&:not(.inline-toolbar):not(.osd) {
989
scale,
990
entry,
991
spinbutton,
992
button { margin: 2px; }
993
.linked entry,
995
.linked spinbutton,
996
.linked button {
997
&:not(:first-child) { margin-left: 0; }
998
&:not(:last-child) { margin-right: 0; }
999
}
1000
spinbutton {
1002
entry,
1003
button { margin: 0; }
1004
}
1005
switch { margin: 2px + $container_padding 2px; }
1007
}
1008
}
1009
// searchbar, location-bar & inline-toolbar
1011
.inline-toolbar {
1012
padding: $container_padding;
1013
border-style: solid;
1014
border-width: 0 1px 1px;
1015
border-color: $border_color;
1016
background-color: $alt_base_color;
1017
}
1018
searchbar > revealer > box,
1020
.location-bar {
1021
padding: $container_padding;
1022
border-style: solid;
1023
border-width: 0 0 1px;
1024
border-color: $border_color;
1025
background-color: $bg_color;
1026
background-clip: border-box;
1027
}
1028
searchbar > revealer > box {
1030
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1031
margin: -$container_padding;
1032
padding: $container_padding;
1033
}
1034
/***************
1037
* Header bars *
1038
***************/
1039
%titlebar,
1040
headerbar {
1041
transition: background-color $shorter_duration $deceleration_curve, color $longer_duration $deceleration_curve;
1042
min-height: $large_size;
1043
padding: 0 $container_padding;
1044
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1045
background-color: $titlebar_bg_color;
1046
color: $titlebar_fg_color;
1047
&:disabled :not(button) > label { color: $titlebar_disabled_fg_color; }
1049
&:backdrop {
1051
color: $titlebar_secondary_fg_color;
1052
&:disabled :not(button) > label { color: $titlebar_disabled_secondary_fg_color; }
1054
}
1055
.title {
1057
padding: 0 12px;
1058
font-weight: bold;
1059
}
1060
.subtitle {
1062
padding: 0 12px;
1063
font-size: smaller;
1064
@extend .dim-label;
1066
}
1067
.linked:not(.vertical) > entry:not(.flat) { border-radius: 2px; }
1069
button:not(.suggested-action):not(.destructive-action) {
1071
@extend %button_basic.flat;
1072
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1074
$titlebar_indicator_color 0%,
1075
transparent 0%)
1076
0 0 0 / 0 0 0px;
1077
color: $titlebar_secondary_fg_color;
1078
&:hover, &:active { color: $titlebar_fg_color; }
1080
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1082
&:checked {
1084
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1085
$titlebar_indicator_color 100%,
1086
transparent 0%)
1087
0 0 2 / 0 0 2px;
1088
color: $titlebar_fg_color;
1089
&:disabled { color: $titlebar_disabled_fg_color; }
1091
&, &:disabled { background-color: transparent; }
1093
}
1094
&:backdrop {
1096
color: $titlebar_hint_fg_color;
1097
&:hover, &:active { color: $titlebar_secondary_fg_color; }
1099
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1101
&:checked {
1103
color: $titlebar_secondary_fg_color;
1104
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1106
}
1107
}
1108
}
1109
button.suggested-action, button.destructive-action {
1111
&:disabled {
1112
background-color: $titlebar_divider_color;
1113
color: $titlebar_disabled_fg_color;
1114
}
1115
}
1116
&.selection-mode {
1118
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1119
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1120
transition: background-color 0.00001s $longer_duration, color $longer_duration $deceleration_curve;
1121
animation: header_ripple_effect $longer_duration $deceleration_curve;
1122
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1123
background-color: $primary_color;
1124
color: $inverse_fg_color;
1125
&:backdrop {
1127
color: $inverse_secondary_fg_color;
1128
}
1129
.subtitle:link { @extend *:link:selected; }
1131
button:not(.suggested-action):not(.destructive-action) {
1133
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1134
currentColor 0%,
1135
transparent 0%)
1136
0 0 0 / 0 0 0px;
1137
color: $inverse_fg_color;
1138
&:disabled { color: $inverse_disabled_fg_color; }
1140
&:checked {
1142
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1143
currentColor 100%,
1144
transparent 0%)
1145
0 0 2 / 0 0 2px;
1146
color: $inverse_fg_color;
1147
&:disabled { color: $inverse_disabled_fg_color; }
1149
}
1150
&:backdrop {
1152
color: $inverse_secondary_fg_color;
1153
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1155
&:checked {
1157
color: $inverse_secondary_fg_color;
1158
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1160
}
1161
}
1162
}
1163
.selection-menu {
1165
padding-left: 16px;
1166
padding-right: 16px;
1167
arrow { -GtkArrow-arrow-scaling: 1; }
1169
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1171
}
1172
}
1173
// squared corners when the window is maximized, tiled, or fullscreen
1175
.tiled &,
1176
.tiled-top &,
1177
.tiled-right &,
1178
.tiled-bottom &,
1179
.tiled-left &,
1180
.maximized &,
1181
.fullscreen & {
1182
border-radius: 0;
1183
box-shadow: $shadow_1;
1184
}
1185
&.default-decoration {
1187
min-height: $small_size;
1188
padding: $container_padding;
1189
box-shadow: inset 0 1px $titlebar_highlight_color;
1190
.tiled &,
1192
.maximized &,
1193
.fullscreen & { box-shadow: none; }
1194
button.titlebutton {
1196
min-height: $small_size;
1197
min-width: $small_size;
1198
margin: 0;
1199
padding: 0;
1200
}
1201
// workaround for non-animatable buttons
1203
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1204
}
1205
.solid-csd & {
1207
&:dir(rtl), &:dir(ltr) { // specificity bump
1208
// margin-left: -2px;
1209
// margin-right: -2px;
1210
// margin-top: -2px;
1211
// border-radius: 0;
1212
// box-shadow: inset 0 1px $titlebar_highlight_color;
1213
}
1214
}
1215
}
1216
headerbar {
1218
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1219
entry,
1220
spinbutton,
1221
// separator,
1222
button {
1223
margin-top: $container_padding;
1224
margin-bottom: $container_padding;
1225
}
1226
switch {
1228
margin-top: ($large_size - 24px) / 2;
1229
margin-bottom: ($large_size - 24px) / 2;
1230
}
1231
// reset button margins of the spinbutton
1233
spinbutton button {
1234
margin-top: 0;
1235
margin-bottom: 0;
1236
}
1237
}
1238
.background .titlebar {
1240
border-top-left-radius: 2px;
1241
border-top-right-radius: 2px;
1242
}
1243
.background.tiled .titlebar,
1245
.background.tiled-top .titlebar,
1246
.background.tiled-right .titlebar,
1247
.background.tiled-bottom .titlebar,
1248
.background.tiled-left .titlebar,
1249
.background.maximized .titlebar,
1250
.background.solid-csd .titlebar {
1251
border-top-left-radius: 0;
1252
border-top-right-radius: 0;
1253
}
1254
headerbar { // headerbar border rounding
1256
window separator:first-child + &, // tackles the paned container case
1257
window &:first-child { border-top-left-radius: 2px; }
1258
window &:last-child { border-top-right-radius: 2px; }
1260
window stack & { // tackles the stacked headerbars case
1262
&:first-child, &:last-child {
1263
border-top-left-radius: 2px;
1264
border-top-right-radius: 2px;
1265
}
1266
}
1267
window.tiled &,
1269
window.tiled-top &,
1270
window.tiled-right &,
1271
window.tiled-bottom &,
1272
window.tiled-left &,
1273
window.maximized &,
1274
window.fullscreen &,
1275
window.solid-csd & {
1276
&,
1277
&:first-child,
1278
&:last-child,
1279
&:only-child {
1280
border-top-left-radius: 0;
1281
border-top-right-radius: 0;
1282
}
1283
}
1284
}
1285
.titlebar:not(headerbar) {
1287
window.csd > & {
1288
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1289
padding: 0;
1290
background-color: transparent;
1291
background-image: none;
1292
border-style: none;
1293
box-shadow: none;
1294
}
1295
> separator {
1297
background-color: $titlebar_bg_color;
1298
background-image: image($border_color);
1299
}
1300
@extend %titlebar;
1302
}
1303
/************
1306
* Pathbars *
1307
************/
1308
%pathbar_button,
1309
.path-bar button {
1310
padding-left: ($medium_size - 24px) / 2;
1311
padding-right: ($medium_size - 24px) / 2;
1312
label:not(:only-child) {
1314
&:first-child { margin-left: 4px; }
1315
&:last-child { margin-right: 4px; }
1317
}
1318
&.slider-button {
1320
padding-left: (24px - 16px) / 2;
1321
padding-right: (24px - 16px) / 2;
1322
}
1323
:not(headerbar) & {
1325
@extend %flat_button;
1326
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1328
$primary_color 0%,
1329
transparent 0%)
1330
0 0 0 / 0 0 0px;
1331
border-radius: 2px;
1332
&:checked {
1334
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1335
$primary_color 100%,
1336
transparent 0%)
1337
0 0 2 / 0 0 2px;
1338
&, &:disabled { background-color: transparent; }
1340
}
1341
}
1342
}
1343
/**************
1346
* Tree Views *
1347
**************/
1348
treeview.view {
1349
@at-root * {
1350
-GtkTreeView-horizontal-separator: 4;
1351
-GtkTreeView-grid-line-width: 1;
1352
-GtkTreeView-grid-line-pattern: '';
1353
-GtkTreeView-tree-line-width: 1;
1354
-GtkTreeView-tree-line-pattern: '';
1355
-GtkTreeView-expander-size: 16;
1356
}
1357
border-left-color: $track_color; // this is actually the tree lines color,
1359
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1360
&:selected { border-left-color: $inverse_track_color; }
1362
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1364
&:hover, &:active, &:selected { border-radius: 0; }
1366
&.separator {
1368
min-height: 1px + 2px * 2;
1369
color: $border_color;
1370
}
1371
&:drop(active) {
1373
border-style: solid none;
1374
border-width: 1px;
1375
border-color: $accent_color;
1376
&.after { border-top-style: none; }
1378
&.before { border-bottom-style: none; }
1380
}
1381
&.expander {
1383
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1384
-gtk-icon-transform: rotate(-90deg);
1385
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1387
&:checked { -gtk-icon-transform: unset; }
1389
color: $secondary_fg_color;
1391
&:hover, &:active { color: $fg_color; }
1393
&:disabled { color: $disabled_secondary_fg_color; }
1395
&:selected {
1397
color: $inverse_secondary_fg_color;
1398
&:hover, &:active { color: $inverse_fg_color; }
1400
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1402
}
1403
}
1404
&.progressbar { // progress bar in treeviews
1406
border-bottom: $bar_size solid $primary_color;
1407
box-shadow: none;
1408
background-color: transparent;
1409
&:selected { border-bottom-color: $inverse_fg_color; }
1411
}
1412
&.trough { // progress bar trough in treeviews
1414
border-bottom: $bar_size solid rgba($primary_color, $lower_opacity);
1415
box-shadow: none;
1416
background-color: transparent;
1417
&:selected { border-bottom-color: $inverse_track_color; }
1419
}
1420
header {
1422
button {
1423
@extend row.activatable;
1424
padding: 2px 6px;
1426
border-style: none solid solid none;
1427
border-width: 1px;
1428
border-color: $border_color;
1429
border-radius: 0;
1430
background-clip: border-box;
1431
&, &:hover, &:active { box-shadow: none; }
1433
&, &:disabled { background-color: $base_color; }
1435
&:last-child { border-right-style: none; }
1437
}
1438
}
1439
button.dnd,
1441
header.button.dnd { // for treeview-like derive widgets
1442
padding: 2px 6px;
1443
border-style: none solid solid;
1444
border-width: 1px;
1445
border-color: $border_color;
1446
border-radius: 0;
1447
box-shadow: none;
1448
background-color: $base_color;
1449
background-clip: border-box;
1450
color: $primary_color;
1451
}
1452
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1454
}
1455
/*********
1458
* Menus *
1459
*********/
1460
menubar,
1461
.menubar {
1462
-GtkWidget-window-dragging: true;
1463
padding: 0;
1464
// box-shadow: inset 0 -1px $border_color;
1465
background-color: $titlebar_bg_color;
1466
> menuitem {
1468
transition: $shorter_transition;
1469
min-height: 20px;
1470
padding: 4px 8px;
1471
color: $titlebar_secondary_fg_color;
1472
&:hover { // Seems like it :hover even with keyboard focus
1474
transition: none;
1475
background-color: $titlebar_divider_color;
1476
color: $titlebar_fg_color;
1477
}
1478
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1480
label:disabled { color: inherit; } // to inherit the above color
1482
}
1483
}
1484
.csd.popup { background-color: transparent; }
1486
menu,
1488
.menu,
1489
.context-menu {
1490
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1491
padding: 4px 0;
1492
box-shadow: inset 0 1px $highlight_color;
1493
background-color: $base_color;
1494
border: 1px solid $border_color; // adds borders in a non composited env
1495
.csd & {
1497
border: none; // axes borders in a composited env
1498
border-radius: 2px;
1499
}
1500
menuitem {
1502
transition: background-color $shorter_duration $deceleration_curve;
1503
min-height: 20px;
1504
min-width: 40px;
1505
padding: 4px 8px;
1506
font: initial;
1507
text-shadow: none;
1508
&:hover {
1510
transition: none;
1511
background-color: $divider_color;
1512
}
1513
&:disabled { color: $disabled_fg_color; }
1515
// submenu indicators
1517
arrow {
1518
min-height: 16px;
1519
min-width: 16px;
1520
&:dir(ltr) {
1522
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1523
margin-left: 8px;
1524
}
1525
&:dir(rtl) {
1527
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1528
margin-right: 8px;
1529
}
1530
}
1531
// avoids labels color being overridden, see
1533
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1534
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1535
}
1536
// overflow arrows
1538
> arrow {
1539
min-height: 16px;
1540
min-width: 16px;
1541
padding: 4px;
1542
background-color: $base_color;
1543
color: $secondary_fg_color;
1544
&.top {
1546
margin-top: -4px;
1547
border-bottom: 1px solid $border_color;
1548
border-radius: 2px 2px 0 0;
1549
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1550
}
1551
&.bottom {
1553
margin-bottom: -4px * 3;
1554
border-top: 1px solid $border_color;
1555
border-radius: 0 0 2px 2px;
1556
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1557
}
1558
&:hover {
1560
background-image: image($divider_color);
1561
color: $fg_color;
1562
}
1563
&:disabled {
1565
border-color: transparent;
1566
background-color: transparent;
1567
color: transparent;
1568
// color: $disabled_secondary_fg_color;
1569
}
1570
}
1571
separator { margin: 4px 0; }
1573
}
1574
menuitem {
1576
accelerator { color: $secondary_fg_color; }
1577
}
1578
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1580
// Electron/Atom render all translucent colors in opaque colors.
1581
// It's a very critical issue for this theme and should be fixed by upstream...
1582
.popup:not(.csd) menu {
1583
menuitem {
1584
color: $opaque_fg_color;
1585
&:hover { background-color: $opaque_divider_color; }
1587
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1589
}
1590
// FIXME: not working this
1592
accelerator { color: $opaque_secondary_fg_color; }
1593
}
1594
/************
1597
* Popovers *
1598
************/
1599
popover.background {
1600
transition: $shadow_transition;
1601
padding: 2px;
1602
box-shadow: $shadow_2; // TODO: this should really have a highlight
1603
background-color: $lighter_bg_color;
1604
&:backdrop { box-shadow: $shadow_1; }
1606
&, .csd & {
1608
border-style: solid;
1609
border-width: 1px;
1610
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1611
border-radius: 2px + 1px;
1612
}
1613
> stack { margin: -4px; } // remove extra padding from menu style popovers
1615
> toolbar { margin: -2px; }
1617
> list,
1619
> .view,
1620
> toolbar {
1621
border-style: none;
1622
box-shadow: none;
1623
background-color: transparent;
1624
}
1625
&.touch-selection,
1627
&.magnifier,
1628
&.osd { @extend %osd; }
1629
// entry { @extend %entry.flat; }
1631
// button.combo { @extend %combo_flat; }
1633
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1635
&.menu button,
1637
button.model {
1638
@extend %simple_flat_button;
1639
min-height: 32px;
1641
padding: 0 8px;
1642
border-radius: 2px;
1643
&:checked { @extend %selected_items; }
1645
}
1646
separator { margin: 4px 0; }
1648
list separator { margin: 0; }
1650
}
1651
/*************
1653
* Notebooks *
1654
*************/
1655
notebook {
1656
> header {
1657
border-width: 1px;
1658
border-color: $border_color;
1659
background-color: $bg_color;
1660
background-clip: border-box;
1661
&.top {
1663
border-bottom-style: solid;
1664
> tabs {
1665
margin-bottom: -1px;
1666
> tab {
1667
&:hover { box-shadow: inset 0 -2px $track_color; }
1669
&:checked { box-shadow: inset 0 -2px $primary_color; }
1671
}
1672
}
1673
}
1674
&.bottom {
1676
border-top-style: solid;
1677
> tabs {
1678
margin-top: -1px;
1679
> tab {
1680
&:hover { box-shadow: inset 0 2px $track_color; }
1682
&:checked { box-shadow: inset 0 2px $primary_color; }
1684
}
1685
}
1686
}
1687
&.left {
1689
border-right-style: solid;
1690
> tabs {
1691
margin-right: -1px;
1692
> tab {
1693
&:hover { box-shadow: inset -2px 0 $track_color; }
1695
&:checked { box-shadow: inset -2px 0 $primary_color; }
1697
}
1698
}
1699
}
1700
&.right {
1702
border-left-style: solid;
1703
> tabs {
1704
margin-left: -1px;
1705
> tab {
1706
&:hover { box-shadow: inset 2px 0 $track_color; }
1708
&:checked { box-shadow: inset 2px 0 $primary_color; }
1710
}
1711
}
1712
}
1713
&.top > tabs > arrow {
1715
@extend %notebook_vert_arrows;
1716
border-top-style: none;
1718
}
1719
&.bottom > tabs > arrow {
1721
@extend %notebook_vert_arrows;
1722
border-bottom-style: none;
1724
}
1725
@at-root %notebook_vert_arrows {
1727
padding-left: 4px;
1728
padding-right: 4px;
1729
&.down {
1731
margin-left: -8px;
1732
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1733
}
1734
&.up {
1736
margin-right: -8px;
1737
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1738
}
1739
}
1740
&.left > tabs > arrow {
1742
@extend %notebook_horz_arrows;
1743
border-left-style: none;
1745
}
1746
&.right > tabs > arrow {
1748
@extend %notebook_horz_arrows;
1749
border-right-style: none;
1751
}
1752
@at-root %notebook_horz_arrows {
1754
padding-top: 4px;
1755
padding-bottom: 4px;
1756
&.down {
1758
margin-top: -8px;
1759
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1760
}
1761
&.up {
1763
margin-bottom: -8px;
1764
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1765
}
1766
}
1767
> tabs > arrow {
1769
@extend %simple_flat_button;
1770
min-height: 16px;
1772
min-width: 16px;
1773
border-radius: 0;
1774
}
1775
tab {
1777
transition: $longer_transition,
1778
background-size 0,
1779
background-image 0;
1780
min-height: $small_size;
1781
min-width: $small_size;
1782
padding: $container_padding 12px;
1783
outline-offset: -6px;
1785
border-width: 1px; // for reorderable tabs
1787
border-color: transparent; //
1788
background-image: radial-gradient(circle farthest-corner at center,
1790
$primary_color 10%,
1791
transparent 0%);
1792
background-repeat: no-repeat;
1793
background-position: center;
1794
background-size: 0% 0%;
1795
color: $secondary_fg_color;
1797
font-weight: 500;
1798
&:hover {
1800
color: $fg_color;
1801
&.reorderable-page {
1803
border-color: $border_color;
1804
background-color: $alt_base_color;
1805
}
1806
}
1807
&:disabled { color: $disabled_secondary_fg_color; }
1809
&:checked {
1811
transition: $longer_transition,
1812
background-size $longer_duration $deceleration_curve,
1813
background-image $longer_duration + $ripple_duration $deceleration_curve;
1814
background-image: radial-gradient(circle farthest-corner at center,
1815
transparent 10%,
1816
transparent 0%);
1817
background-size: 1000% 1000%;
1818
color: $fg_color;
1819
&:disabled { color: $disabled_fg_color; }
1821
&.reorderable-page {
1823
border-color: $border_color;
1824
background-color: $base_color;
1825
}
1826
}
1827
// colors the button like the label, overridden otherwise
1829
button.flat {
1830
@extend %small_button;
1831
&:last-child {
1833
margin-left: $container_padding;
1834
margin-right: $container_padding - 12px;
1835
}
1836
&:first-child {
1838
margin-left: $container_padding - 12px;
1839
margin-right: $container_padding;
1840
}
1841
}
1842
}
1843
&.top,
1845
&.bottom {
1846
tabs {
1847
padding-left: 8px;
1848
padding-right: 8px;
1849
&:not(:only-child) {
1851
&:first-child { margin-left: 0; }
1852
&:last-child { margin-right: 0; }
1853
}
1854
tab {
1856
&.reorderable-page {
1857
margin: 0 -1px;
1858
border-style: none solid;
1859
}
1860
}
1861
}
1862
}
1863
&.left,
1865
&.right {
1866
tabs {
1867
padding-top: 8px;
1868
padding-bottom: 8px;
1869
&:not(:only-child) {
1871
&:first-child { margin-top: 0; }
1872
&:last-child { margin-bottom: 0; }
1873
}
1874
tab {
1876
&.reorderable-page {
1877
margin: -1px 0;
1878
border-style: solid none;
1879
}
1880
}
1881
}
1882
}
1883
}
1884
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1886
background-color: $base_color;
1887
entry:not(.search),
1889
spinbutton:not(.vertical) { @extend %entry.flat; }
1890
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1892
button.combo { @extend %combo_flat; }
1894
}
1895
}
1896
/**************
1899
* Scrollbars *
1900
**************/
1901
scrollbar {
1902
$_slider_min_length: 24px;
1903
// disable steppers
1905
@at-root * {
1906
-GtkScrollbar-has-backward-stepper: false;
1907
-GtkScrollbar-has-forward-stepper: false;
1908
}
1909
transition: $longer_transition;
1911
background-color: $base_color;
1912
background-clip: $extra_background_clip;
1913
// scrollbar border
1915
&.top { border-bottom: 1px solid $border_color; }
1916
&.bottom { border-top: 1px solid $border_color; }
1917
&.left { border-right: 1px solid $border_color; }
1918
&.right { border-left: 1px solid $border_color; }
1919
// slider
1921
slider {
1922
transition: $shorter_transition, margin 0, border-width 0;
1923
min-width: 8px;
1924
min-height: 8px;
1925
border: 4px solid transparent;
1926
border-radius: $circular_radius;
1927
background-clip: padding-box;
1928
background-color: $hint_fg_color;
1929
&:hover { background-color: $secondary_fg_color; }
1931
&:active { background-color: $fg_color; }
1933
&:disabled { background-color: $disabled_secondary_fg_color; }
1935
}
1936
&.fine-tune {
1938
slider {
1939
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1940
min-width: 4px;
1941
min-height: 4px;
1942
}
1943
&.horizontal slider { margin: 2px 0; }
1945
&.vertical slider { margin: 0 2px; }
1947
}
1948
&.overlay-indicator {
1950
&:not(.dragging):not(.hovering) {
1951
border-color: transparent;
1952
background-color: transparent;
1953
slider {
1955
min-width: 4px;
1956
min-height: 4px;
1957
margin: 4px - 1px;
1958
border: 1px solid rgba($base_color, $lower_opacity);
1959
}
1960
button {
1962
min-width: 4px;
1963
min-height: 4px;
1964
margin: 4px - 1px;
1965
border: 1px solid rgba($base_color, $lower_opacity);
1966
border-radius: $circular_radius;
1967
background-color: $hint_fg_color;
1968
background-clip: padding-box;
1969
-gtk-icon-source: none;
1970
&:disabled { background-color: $disabled_secondary_fg_color; }
1972
}
1973
&.horizontal {
1975
slider { min-width: $_slider_min_length; }
1976
button { min-width: 8px; }
1978
}
1979
&.vertical {
1981
slider { min-height: $_slider_min_length; }
1982
button { min-height: 8px; }
1984
}
1985
}
1986
&.dragging,
1988
&.hovering { background-color: rgba($base_color, $higher_opacity); }
1989
}
1990
&.horizontal slider { min-width: $_slider_min_length; }
1992
&.vertical slider { min-height: $_slider_min_length; }
1994
// button styling
1996
button {
1997
@extend %simple_flat_button;
1998
min-width: 16px;
2000
min-height: 16px;
2001
padding: 0;
2002
border-radius: 0;
2003
}
2004
// button icons
2006
&.vertical {
2007
button {
2008
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2009
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2011
}
2012
}
2013
&.horizontal {
2015
button {
2016
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2017
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2019
}
2020
}
2021
}
2022
/**********
2025
* Switch *
2026
**********/
2027
switch {
2028
transition: $longer_transition;
2029
margin: $container_padding 0;
2030
padding: 0 2px;
2031
border: 5px solid transparent;
2032
border-radius: $circular_radius;
2033
background-color: $track_color;
2034
background-clip: padding-box;
2035
font-size: 0;
2036
&:disabled { background-color: $divider_color; }
2038
&:checked {
2040
background-color: rgba($accent_color, 0.5);
2041
&:disabled { background-color: rgba($accent_color, 0.3); }
2043
}
2044
slider {
2046
transition: $shorter_transition, $shadow_transition;
2047
min-width: 20px;
2048
min-height: 20px;
2049
margin: -3px -2px;
2050
border-radius: $circular_radius;
2051
outline-width: 0;
2052
outline-color: $divider_color;
2053
outline-offset: 0;
2054
-gtk-outline-radius: $circular_radius;
2055
box-shadow: $shadow_1;
2056
background-color: $lighter_bg_color;
2057
}
2058
&:focus slider { outline-width: (48px - 20px) / 2; }
2060
&:hover slider { box-shadow: $shadow_2; }
2062
&:checked slider {
2064
background-color: $accent_color;
2065
outline-color: rgba($accent_color, 0.2);
2066
}
2067
&:disabled slider { background-color: $bg_color; }
2069
row:selected & {
2071
}
2072
}
2073
/*************************
2076
* Check and Radio items *
2077
*************************/
2078
// draw regular check and radio items using our PNG assets
2079
// all assets are rendered from assets.svg. never add pngs directly
2080
// selection-mode
2082
.view.content-view.check:not(list),
2083
.content-view .tile check:not(list) {
2084
min-height: 40px;
2085
min-width: 40px;
2086
margin: 0;
2087
padding: 0;
2088
box-shadow: none;
2089
background-color: transparent;
2090
background-image: none;
2091
-gtk-icon-shadow: $shadow_1;
2092
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2094
@each $s, $as in ('', '-unchecked'),
2096
(':checked', '-checked') {
2097
&#{$s} {
2098
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2099
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2100
}
2101
}
2102
}
2103
checkbutton.text-button,
2105
radiobutton.text-button {
2106
// this is for a nice focus on check and radios text
2107
padding: 2px;
2108
outline-offset: 0;
2109
label:not(:only-child) { margin: 0 4px; }
2111
}
2112
$check_radio_size: 40px;
2114
check,
2116
radio {
2117
min-height: 24px;
2118
min-width: 24px;
2119
margin: -($check_radio_size - 24px) / 2;
2120
padding: ($check_radio_size - 24px) / 2;
2121
@extend %simple_flat_button;
2123
@extend %circular_button;
2125
&:checked, &:indeterminate {
2127
color: $accent_color;
2128
&:disabled { color: $disabled_accent_color; }
2130
}
2131
// &:only-child { margin: -12px; }
2133
row:selected &:not(:checked):not(:indeterminate) {
2135
color: $inverse_secondary_fg_color;
2136
&:hover, &:active { color: $inverse_fg_color; }
2138
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2140
}
2141
popover & {
2143
&, &:hover, &:active, &:disabled {
2144
box-shadow: none;
2145
background-image: none;
2146
}
2147
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2149
&.left:dir(rtl) {
2151
margin-left: -12px;
2152
margin-right: -4px;
2153
}
2154
&.right:dir(ltr) {
2156
margin-left: -4px;
2157
margin-right: -12px;
2158
}
2159
}
2160
menu menuitem & {
2162
transition: none;
2163
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2164
padding: 0;
2165
&:dir(ltr) { margin-right: 8px; }
2167
&:dir(rtl) { margin-left: 8px; }
2169
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2171
&, &:hover, &:disabled {
2173
box-shadow: none;
2174
// color: inherit;
2175
}
2176
}
2177
}
2178
%check,
2180
check {
2181
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2182
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2184
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2186
}
2187
%radio,
2189
radio {
2190
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2191
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2193
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2195
border-image-slice: $check_radio_size / 2px;
2197
border-image-width: $check_radio_size / 2;
2198
$radio_indicator: 10px / $check_radio_size / 2;
2200
& {
2202
border-image-source: -gtk-gradient(radial,
2203
center center, 0,
2204
center center, 0.001,
2205
to($accent_color),
2206
to(transparent));
2207
}
2208
&:checked:not(:indeterminate) {
2210
border-image-source: -gtk-gradient(radial,
2211
center center, 0,
2212
center center, $radio_indicator,
2213
to($accent_color),
2214
to(transparent));
2215
}
2216
&:checked:not(:indeterminate):disabled {
2218
border-image-source: -gtk-gradient(radial,
2219
center center, 0,
2220
center center, $radio_indicator,
2221
to($disabled_accent_color),
2222
to(transparent));
2223
}
2224
}
2225
%small_check,
2227
menu menuitem check {
2228
& {
2229
min-height: 16px;
2230
min-width: 16px;
2231
border-radius: 2px;
2232
-gtk-outline-radius: 2px;
2233
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2234
}
2235
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2237
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2239
}
2240
%small_radio,
2242
menu menuitem radio {
2243
& {
2244
min-height: 16px;
2245
min-width: 16px;
2246
border-image: none;
2247
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2248
}
2249
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2251
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2253
}
2254
// ANIMATION:
2256
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2257
// the transformation is set on the active state and it get reset on the checked state.
2258
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2259
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2261
check:not(:checked):indeterminate:active,
2263
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2264
check:not(:checked),
2266
radio:not(:checked) {
2267
& {
2268
transition: $longer_transition,
2269
background-size $ripple_duration $deceleration_curve,
2270
background-image $ripple_duration * 2 $deceleration_curve,
2271
-gtk-icon-transform 0;
2272
}
2273
&:active {
2275
transition: $longer_transition,
2276
background-size 0,
2277
background-image 0,
2278
-gtk-icon-transform 0;
2279
}
2280
menu menuitem & { transition: none; }
2282
}
2283
treeview.view check,
2285
treeview.view radio {
2286
padding: 0;
2287
&:hover {
2289
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2290
&:disabled { box-shadow: none; }
2292
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2294
}
2295
& {
2297
color: $secondary_fg_color;
2298
&:hover, &:active { color: $fg_color; }
2300
&:disabled { color: $disabled_secondary_fg_color; }
2302
&:checked, &:indeterminate { color: $accent_color; }
2304
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2306
}
2307
&:selected {
2309
color: $inverse_secondary_fg_color;
2310
&:hover, &:active { color: $inverse_fg_color; }
2312
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2314
&:checked, &:indeterminate { color: $accent_color; }
2316
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2318
}
2319
}
2320
treeview.view radio:checked {
2322
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2323
border-image: none;
2324
}
2325
/************
2328
* GtkScale *
2329
************/
2330
scale {
2331
// sizing
2332
$_marks_length: 8px;
2333
$_marks_distance: 8px;
2334
$trough_size: 2px;
2336
$slider_size: 24px;
2338
$marks_slider_size: 30px;
2339
$slider_margin: -($slider_size - $trough_size) / 2;
2341
$marks_slider_margin: -($marks_slider_size - $trough_size) - $slider_margin;
2342
$color_slider_margin: -($slider_size) / 2;
2344
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2345
min-height: $medium_size - $slider_size;
2347
min-width: $medium_size - $slider_size;
2348
padding: ($slider_size / 2);
2349
// the slider is inside the trough, so to have make it bigger there's a negative margin
2351
slider {
2352
min-height: $slider_size;
2353
min-width: $slider_size;
2354
margin: $slider_margin;
2355
}
2356
// the backing bit
2358
trough {
2359
transition: $longer_transition;
2360
outline-offset: 2px;
2361
background-color: $track_color;
2362
&:disabled { background-color: $divider_color; }
2364
}
2365
// the colored part of the backing bit
2367
highlight {
2368
transition: $longer_transition;
2369
background-color: $accent_color;
2370
&:disabled { background-color: transparent; }
2372
}
2373
// this is another differently styled part of the backing bit, the most relevant use case is for example
2375
// in media player to indicate how much video stream as been cached
2376
fill {
2377
transition: $longer_transition;
2378
background-color: $track_color;
2379
&:disabled { background-color: transparent; }
2381
}
2382
slider {
2384
transition: all $shorter_duration $standard_curve;
2385
// border-radius: 100%;
2386
// background-color: $accent_color;
2387
background-repeat: no-repeat;
2388
background-position: center;
2389
@each $s, $as in ('', ''),
2391
(':disabled', '-disabled') {
2392
&#{$s} {
2393
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2394
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2396
}
2397
}
2398
background-size: calc(100% - 10px);
2400
&:hover { background-size: calc(100% - 8px); }
2402
&:active { background-size: calc(100% - 6px); }
2404
}
2405
// click-and-hold the slider to activate
2407
&.fine-tune {
2408
// to make the slider shrink in fine-tune mode
2409
slider { background-size: calc(100% - 12px); }
2410
}
2411
marks label,
2413
value { color: $hint_fg_color; }
2414
marks {
2416
color: $track_color;
2417
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2419
(bottom, bottom, top),
2420
(top, left, right),
2421
(bottom, right, left) {
2422
&.#{$marks_class} {
2423
margin-#{$marks_margin}: $_marks_distance;
2424
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2425
}
2426
}
2427
}
2428
&.horizontal {
2430
indicator {
2431
min-height: $_marks_length;
2432
min-width: 1px;
2433
}
2434
}
2435
&.vertical {
2437
indicator {
2438
min-height: 1px;
2439
min-width: $_marks_length;
2440
}
2441
}
2442
// *WARNING* scale with marks madness following
2444
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2446
('vertical', 'vert') {
2447
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2448
('marks-after', 'marks-after:not(.marks-before)') {
2449
&.#{$dir_class}.#{$marks_class} {
2450
slider {
2451
@each $state, $state_infix in ('', ''),
2452
(':disabled', '-disabled') {
2453
&#{$state} {
2454
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2455
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2457
}
2458
}
2459
@if $dir_class == 'horizontal' {
2461
min-height: $marks_slider_size;
2462
min-width: $slider_size;
2463
@if $marks_infix == 'marks-before' {
2465
margin-top: $marks_slider_margin;
2466
background-position: center calc(100% - 5px);
2468
&:hover { background-position: center calc(100% - 4px); }
2470
&:active { background-position: center calc(100% - 3px); }
2472
}
2473
@if $marks_infix == 'marks-after' {
2475
margin-bottom: $marks_slider_margin;
2476
background-position: center calc(5px);
2478
&:hover { background-position: center calc(4px); }
2480
&:active { background-position: center calc(3px); }
2482
}
2483
}
2484
@if $dir_class == 'vertical' {
2486
min-height: $slider_size;
2487
min-width: $marks_slider_size;
2488
@if $marks_infix == 'marks-before' {
2490
margin-left: $marks_slider_margin;
2491
background-position: calc(5px) center;
2493
&:hover { background-position: calc(4px) center; }
2495
&:active { background-position: calc(3px) center; }
2497
}
2498
@if $marks_infix == 'marks-after' {
2500
margin-right: $marks_slider_margin;
2501
background-position: calc(100% - 5px) center;
2503
&:hover { background-position: calc(100% - 4px) center; }
2505
&:active { background-position: calc(100% - 3px) center; }
2507
}
2508
}
2509
}
2510
&.fine-tune slider {
2512
@if $dir_class == 'horizontal' {
2513
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2514
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2516
}
2517
@if $dir_class == 'vertical' {
2519
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2520
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2522
}
2523
}
2524
}
2525
}
2526
}
2527
&.color {
2529
min-height: 0;
2530
min-width: 0;
2531
&.horizontal {
2533
padding: 0 0 12px 0;
2534
slider {
2536
&:dir(ltr), &:dir(rtl) { // specificity bump
2537
margin-bottom: $color_slider_margin;
2538
margin-top: $color_marks_slider_margin;
2539
}
2540
}
2541
}
2542
&.vertical {
2544
&:dir(ltr) {
2545
padding: 0 0 0 12px;
2546
slider {
2548
margin-left: $color_slider_margin;
2549
margin-right: $color_marks_slider_margin;
2550
}
2551
}
2552
&:dir(rtl) {
2554
padding: 0 12px 0 0;
2555
slider {
2557
margin-right: $color_slider_margin;
2558
margin-left: $color_marks_slider_margin;
2559
}
2560
}
2561
}
2562
}
2563
}
2564
/*****************
2567
* Progress bars *
2568
*****************/
2569
progressbar {
2570
// sizing
2571
&.horizontal {
2572
trough,
2573
progress { min-height: $bar_size; }
2574
}
2575
&.vertical {
2577
trough,
2578
progress { min-width: $bar_size; }
2579
}
2580
// FIXME: insensitive state missing and some other state should be set probably
2582
color: $hint_fg_color;
2583
font-size: smaller;
2584
trough { background-color: rgba($primary_color, $lower_opacity); }
2586
progress { background-color: $primary_color; }
2588
&.osd { // progressbar.osd used for epiphany page loading progress
2590
// min-width: $bar_size;
2591
// min-height: $bar_size;
2592
// background-color: transparent;
2593
// trough { background-color: transparent; }
2595
// progress { background-color: $primary_color; }
2597
}
2598
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2600
}
2601
/*************
2604
* Level Bar *
2605
*************/
2606
levelbar {
2607
&.horizontal {
2608
block { min-height: $bar_size; }
2609
&.discrete block {
2611
min-width: $medium_size;
2612
&:not(:last-child) { margin-right: 2px; }
2614
}
2615
}
2616
&.vertical {
2618
block { min-width: $bar_size; }
2619
&.discrete block {
2621
min-height: $medium_size;
2622
&:not(:last-child) { margin-bottom: 2px; }
2624
}
2625
}
2626
// imitate the entry style
2628
trough {
2629
padding: 2px;
2630
border-radius: 2px;
2631
box-shadow: $shadow_1;
2632
background-color: $base_color;
2633
&:disabled { background-color: $alt_base_color; }
2635
}
2636
block {
2638
&.low { background-color: $warning_color; }
2639
&.high,
2641
&:not(.empty) { background-color: $primary_color; }
2642
&.full { background-color: $success_color; }
2644
&.empty { background-color: $divider_color; }
2646
}
2647
}
2648
/****************
2651
* Print dialog *
2652
*****************/
2653
printdialog {
2654
paper {
2655
padding: 0;
2656
border: 1px solid $border_color;
2657
background-color: $base_color;
2658
color: $fg_color;
2659
}
2660
.dialog-action-box { margin: 12px; }
2662
}
2663
/**********
2666
* Frames *
2667
**********/
2668
frame > border,
2669
.frame {
2670
margin: 0;
2671
padding: 0;
2672
border: 1px solid $border_color;
2673
border-radius: 0;
2674
box-shadow: none;
2675
&.flat { border-style: none; }
2677
}
2678
frame.flat > border { @extend .frame.flat; } // for backporting
2680
actionbar > revealer > box {
2682
padding: $container_padding;
2683
border-top: 1px solid $border_color;
2684
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2686
}
2687
scrolledwindow {
2689
viewport.frame { // avoid double borders when viewport inside scrolled window
2690
border-style: none;
2691
}
2692
// This is used when content is touch-dragged past boundaries.
2694
// draws a box on top of the content, the size changes programmatically.
2695
@at-root overshoot {
2696
&.top { @include overshoot(top); }
2697
&.bottom { @include overshoot(bottom); }
2699
&.left { @include overshoot(left); }
2701
&.right { @include overshoot(right); }
2703
}
2704
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2706
@at-root undershoot {
2707
&.top { @include undershoot(top); }
2708
&.bottom { @include undershoot(bottom); }
2710
&.left { @include undershoot(left); }
2712
&.right { @include undershoot(right); }
2714
}
2715
@at-root junction { // the small square between two scrollbars
2717
border-style: solid none none solid;
2718
border-width: 1px;
2719
border-color: $border_color;
2720
background-color: $base_color;
2721
&:dir(rtl) { border-style: solid solid none none; }
2723
}
2724
}
2725
// vbox and hbox separators
2727
separator {
2728
min-width: 1px;
2729
min-height: 1px;
2730
background-color: $border_color;
2731
}
2732
%hide_separators {
2734
min-width: 0;
2735
min-height: 0;
2736
background-color: transparent;
2737
}
2738
/*********
2741
* Lists *
2742
*********/
2743
list {
2744
border-color: $border_color;
2745
background-color: $base_color;
2746
row { padding: 2px; }
2748
}
2749
// FIXME
2751
$row_transition: $longer_transition, background-color 0, color 0;
2752
row {
2754
&.activatable {
2755
transition: $row_transition,
2756
background-size $ripple_duration $deceleration_curve,
2757
background-image $ripple_duration * 2 $deceleration_curve;
2758
box-shadow: inset 0 0 0 9999px transparent;
2759
background-image: radial-gradient(circle farthest-corner at center,
2760
transparent 10%,
2761
transparent 0%);
2762
background-repeat: no-repeat;
2763
background-position: center;
2764
background-size: 1000% 1000%;
2765
&:hover {
2767
transition: $row_transition,
2768
box-shadow 0,
2769
background-size $ripple_duration $deceleration_curve,
2770
background-image $ripple_duration * 2 $deceleration_curve;
2771
box-shadow: inset 0 0 0 9999px $row_fill_color;
2772
}
2773
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2775
&:active {
2776
transition: $row_transition,
2777
background-size 0,
2778
background-image 0;
2779
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2780
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2781
background-image: radial-gradient(circle farthest-corner at center,
2782
$semi_fill_color 10%,
2783
transparent 0%);
2784
background-size: 0% 0%;
2785
}
2786
}
2787
&:selected { @extend %selected_items; }
2789
}
2790
/*********************
2793
* App Notifications *
2794
*********************/
2795
.app-notification {
2796
@extend %osd;
2797
@extend toolbar.osd;
2799
margin: 8px;
2801
button { @extend %button_basic.flat; }
2803
&.frame,
2805
border { border-style: none; }
2806
}
2807
/*************
2810
* Expanders *
2811
*************/
2812
expander {
2813
title > arrow {
2814
transition: all $shorter_duration $standard_curve;
2815
min-width: 16px;
2816
min-height: 16px;
2817
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2818
-gtk-icon-transform: rotate(-90deg);
2819
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2821
&:checked { -gtk-icon-transform: unset; }
2823
color: $secondary_fg_color;
2825
&:hover, &:active { color: $fg_color; }
2827
&:disabled { color: $disabled_secondary_fg_color; }
2829
&:selected {
2831
color: $inverse_secondary_fg_color;
2832
&:hover, &:active { color: $inverse_fg_color; }
2834
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2836
}
2837
}
2838
}
2839
/************
2842
* Calendar *
2843
************/
2844
calendar {
2845
padding: 1px;
2846
border: 1px solid $border_color;
2847
color: $fg_color;
2848
&:disabled { color: $disabled_fg_color; }
2850
&:selected {
2852
@extend %selected_items;
2853
border-radius: 2px + 1px;
2855
}
2856
&.header {
2858
border-style: none none solid;
2859
border-radius: 0;
2860
}
2861
&.button { @extend %simple_flat_button; }
2863
&.highlight {
2865
color: $secondary_fg_color;
2866
font-weight: 500;
2867
}
2868
&:indeterminate { color: $disabled_secondary_fg_color; }
2870
}
2871
/***********
2874
* Dialogs *
2875
***********/
2876
messagedialog { // Message Dialog styling
2877
&.background { background-color: $lighter_bg_color; }
2878
.titlebar {
2880
min-height: $small_size;
2881
border-style: none;
2882
box-shadow: inset 0 1px $highlight_color;
2883
background-color: $lighter_bg_color;
2884
color: $fg_color;
2885
&:backdrop { color: $secondary_fg_color; }
2887
}
2888
&.csd { // rounded bottom border styling for csd version
2890
&.background {
2891
// bigger radius for better antialiasing
2892
border-bottom-left-radius: 2px;
2893
border-bottom-right-radius: 2px;
2894
}
2895
.dialog-action-area button {
2897
padding: 8px 16px;
2898
border-top: 1px solid $border_color;
2899
border-radius: 0;
2900
@extend %simple_flat_button;
2902
&:first-child { border-bottom-left-radius: 2px; }
2904
&:last-child { border-bottom-right-radius: 2px; }
2906
}
2907
}
2908
entry { @extend %entry.flat; }
2910
}
2911
filechooser {
2913
.dialog-action-box { border-top: 1px solid $border_color; }
2914
#pathbarbox {
2916
border-bottom: 1px solid $border_color;
2917
background-color: $bg_color;
2918
}
2919
}
2920
filechooserbutton:drop(active) {
2922
box-shadow: none;
2923
}
2924
/***********
2927
* Sidebar *
2928
***********/
2929
.sidebar {
2930
border-style: none;
2931
background-color: $alt_base_color;
2932
@at-root %sidebar_left,
2934
&:dir(ltr),
2935
&.left,
2936
&.left:dir(rtl) {
2937
border-right: 1px solid $border_color;
2938
border-left-style: none;
2939
}
2940
@at-root %sidebar_right,
2942
&:dir(rtl),
2943
&.right {
2944
border-left: 1px solid $border_color;
2945
border-right-style: none;
2946
}
2947
list { background-color: transparent; }
2949
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2951
}
2952
stacksidebar {
2954
&.sidebar {
2955
&:dir(ltr),
2956
&.left,
2957
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2958
&:dir(rtl),
2960
&.right { list { @extend %sidebar_right; }}
2961
}
2962
row {
2964
padding: 10px 4px;
2965
> label {
2967
padding-left: 6px;
2968
padding-right: 6px;
2969
}
2970
&.needs-attention > label { @extend %needs_attention; }
2972
}
2973
}
2974
/****************
2977
* File chooser *
2978
****************/
2979
// dim the sidebar icons, see bug #786613 for details on this oddity
2980
row {
2981
image.sidebar-icon { color: $secondary_fg_color; }
2982
&:selected image.sidebar-icon { color: $inverse_secondary_fg_color; }
2984
}
2985
placessidebar {
2987
> viewport.frame { border-style: none; }
2988
list { padding: (4px - 3px) 0 4px; }
2990
row {
2992
// Needs overriding of the GtkListBoxRow padding
2993
min-height: 32px;
2994
margin: -1px 0; // Remove unknown margins
2995
padding: 0;
2996
// Using margins/padding directly in the SidebarRow
2998
// will make the animation of the new bookmark row jump
2999
> revealer { padding: 0 12px; }
3000
&:selected { color: $inverse_fg_color; }
3002
&:disabled { color: $disabled_fg_color; }
3004
image.sidebar-icon {
3006
&:dir(ltr) { padding-right: 8px; }
3007
&:dir(rtl) { padding-left: 8px; }
3008
}
3009
label.sidebar-label {
3011
&:dir(ltr) { padding-right: 2px; }
3012
&:dir(rtl) { padding-left: 2px; }
3013
}
3014
@at-root button.sidebar-button {
3016
@extend %simple_flat_button;
3017
@extend %small_button;
3019
row:selected & { @extend %button_selected.flat; }
3021
}
3022
&.sidebar-placeholder-row {
3024
min-height: 2px;
3025
padding: 0 8px;
3026
background-image: image($accent_color);
3027
background-clip: content-box;
3028
}
3029
&.sidebar-new-bookmark-row { color: $accent_color; }
3031
&:drop(active):not(:disabled) {
3033
box-shadow: inset 0 0 0 2px $accent_color;
3034
&:selected {
3036
// background-color: $accent_color;
3037
// color: $inverse_fg_color;
3038
}
3039
}
3040
}
3041
}
3042
placesview {
3044
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3045
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3047
// this selects the "connect to server" label
3049
> actionbar > revealer > box > label {
3050
padding-left: 8px;
3051
padding-right: 8px;
3052
}
3053
}
3054
/*********
3057
* Paned *
3058
*********/
3059
paned {
3060
> separator {
3061
min-width: 1px;
3062
min-height: 1px;
3063
-gtk-icon-source: none; // defeats the ugly default handle decoration
3064
border-style: none; // just to be sure
3065
background-color: transparent;
3066
// workaround, using background istead of a border since the border will get rendered twice (?)
3067
background-image: image($border_color);
3068
background-size: 1px 1px;
3069
background-clip: content-box; // avoids borders image being rendered twice (?)
3070
&.wide {
3072
min-width: 6px;
3073
min-height: 6px;
3074
background-color: $bg_color;
3075
background-image: image($border_color), image($border_color);
3076
background-size: 1px 1px, 1px 1px;
3077
}
3078
}
3079
&.horizontal > separator {
3081
background-repeat: repeat-y;
3082
&:dir(ltr) {
3084
margin: 0 -8px 0 0;
3085
padding: 0 8px 0 0;
3086
background-position: left;
3087
}
3088
&:dir(rtl) {
3090
margin: 0 0 0 -8px;
3091
padding: 0 0 0 8px;
3092
background-position: right;
3093
}
3094
&.wide {
3096
margin: 0;
3097
padding: 0;
3098
background-repeat: repeat-y, repeat-y;
3099
background-position: left, right;
3100
}
3101
}
3102
&.vertical > separator {
3104
margin: 0 0 -8px 0;
3105
padding: 0 0 8px 0;
3106
background-repeat: repeat-x;
3107
background-position: top;
3108
&.wide {
3110
margin: 0;
3111
padding: 0;
3112
background-repeat: repeat-x, repeat-x;
3113
background-position: bottom, top;
3114
}
3115
}
3116
}
3117
/**************
3120
* GtkInfoBar *
3121
**************/
3122
infobar {
3123
border-style: none;
3124
&.info { background-color: $info_bg_color; }
3126
&.question { background-color: $question_bg_color; }
3128
&.warning { background-color: $warning_bg_color; }
3130
&.error { background-color: $error_bg_color; }
3132
&.info,
3134
&.question,
3135
&.warning,
3136
&.error {
3137
> label, & { color: $inverse_fg_color; }
3138
button { @extend %button_selected; }
3140
selection {}
3142
*:link { @extend %link_selected; }
3144
}
3145
}
3146
/************
3149
* Tooltips *
3150
************/
3151
tooltip {
3152
&.background {
3153
// background-color needs to be set this way otherwise it gets drawn twice
3154
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3155
// box-shadow: inset 0 1px $highlight_color;
3156
background-color: rgba($tooltip_bg_color, $higher_opacity);
3157
color: $tooltip_fg_color;
3158
}
3159
// @extend %osd;
3161
// padding: 4px; /* not working */
3163
border-radius: 2px;
3164
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3165
&:not(.csd):not(.unity-csd) {
3167
// border: 1px solid $border_color;
3168
// border-radius: 2px + 1px;
3169
// background-clip: $extra_background_clip;
3170
}
3171
// FIXME: we need a border or tooltips vanish on black background.
3173
decoration { background-color: transparent; }
3174
label {
3176
// tooltip label already seems to have 6px margins
3177
min-height: 32px - 6px * 2;
3178
padding: 0 8px - 6px;
3179
}
3180
* {
3182
// workaround for Eclipse.
3183
// do not include any declaration here.
3184
// padding: 0;
3185
// background-color: transparent;
3186
// color: inherit;
3187
}
3188
}
3189
/*****************
3192
* Color Chooser *
3193
*****************/
3194
colorswatch {
3195
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3196
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3197
// applied to the overlay box.
3198
// base color corners rounding
3200
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3201
// sports a bigger radius.
3202
// nth-child is needed by the custom color strip.
3203
&.top {
3205
border-top-left-radius: $material_radius + 0.5px;
3206
border-top-right-radius: $material_radius + 0.5px;
3207
overlay {
3209
border-top-left-radius: $material_radius;
3210
border-top-right-radius: $material_radius;
3211
}
3212
}
3213
&.bottom {
3215
border-bottom-left-radius: $material_radius + 0.5px;
3216
border-bottom-right-radius: $material_radius + 0.5px;
3217
overlay {
3219
border-bottom-left-radius: $material_radius;
3220
border-bottom-right-radius: $material_radius;
3221
}
3222
}
3223
&.left,
3225
&:first-child:not(.top) {
3226
border-top-left-radius: $material_radius + 0.5px;
3227
border-bottom-left-radius: $material_radius + 0.5px;
3228
overlay {
3230
border-top-left-radius: $material_radius;
3231
border-bottom-left-radius: $material_radius;
3232
}
3233
}
3234
&.right,
3236
&:last-child:not(.bottom) {
3237
border-top-right-radius: $material_radius + 0.5px;
3238
border-bottom-right-radius: $material_radius + 0.5px;
3239
overlay {
3241
border-top-right-radius: $material_radius;
3242
border-bottom-right-radius: $material_radius;
3243
}
3244
}
3245
&.dark { color: $light_fg_color; }
3247
&.light { color: $dark_fg_color; }
3249
&:drop(active) {
3251
box-shadow: none;
3252
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $accent_color; }
3254
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $accent_color; }
3256
}
3257
overlay {
3259
transition: $shadow_transition;
3260
box-shadow: $shadow_1;
3261
&:hover { box-shadow: $shadow_2; }
3263
}
3264
&#add-color-button {
3266
border-radius: $material_radius $material_radius 0 0;
3267
color: $light_fg_color;
3268
&:only-child { border-radius: $material_radius; }
3270
overlay {
3272
background-image: linear-gradient(to right,
3273
$error_bg_color 25%,
3274
$warning_bg_color 25%, $warning_bg_color 50%,
3275
$info_bg_color 50%, $info_bg_color 75%,
3276
$question_bg_color 75%);
3277
}
3278
}
3279
&:disabled {
3281
opacity: $disabled_opacity;
3282
overlay { box-shadow: none; }
3284
}
3285
row:selected & {
3287
}
3288
&#editor-color-sample {
3290
border-radius: $material_radius + 0.5px;
3291
overlay { border-radius: $material_radius; }
3293
// overlay:hover { box-shadow: $shadow_1; }
3295
}
3296
}
3297
// colorscale popup
3299
colorchooser .popover.osd {
3300
transition: $shadow_transition;
3301
border-radius: 2px;
3302
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3303
background-color: $base_color;
3304
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3306
spinbutton:not(.vertical) { @extend %entry.flat; }
3308
}
3309
/********
3312
* Misc *
3313
********/
3314
// content view (grid/list)
3315
.content-view {
3316
background-color: $bg_color;
3317
// &:hover { -gtk-icon-effect: highlight; }
3319
rubberband, .rubberband { @extend rubberband; }
3321
}
3322
.scale-popup {
3324
.osd & { @extend %osd; }
3325
.osd & button.flat { // FIXME: quick hack, redo properly
3327
}
3328
button { // +/- buttons on GtkVolumeButton popup
3330
}
3331
}
3332
/**********************
3335
* Window Decorations *
3336
**********************/
3337
decoration {
3338
transition: $shadow_transition;
3339
border-radius: 2px 2px 0 0;
3340
box-shadow: $shadow_4, 0 16px 16px transparent;
3341
// FIXME rationalize shadows
3343
// this is used for the resize cursor area
3345
margin: 8px;
3346
&:backdrop {
3348
// the transparent shadow here is to enforce that the shadow extents don't
3349
// change when we go to backdrop, to prevent jumping windows.
3350
// The biggest shadow should be in the same order then in the active state
3351
// or the jumping will happen during the transition.
3352
box-shadow: $shadow_2, 0 16px 16px transparent;
3353
}
3354
.maximized &,
3356
.fullscreen &,
3357
.tiled &,
3358
.tiled-top &,
3359
.tiled-right &,
3360
.tiled-bottom &,
3361
.tiled-left & { border-radius: 0; }
3362
.popup & { box-shadow: none; }
3364
// server-side decorations as used by mutter
3366
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3367
.csd.popup & {
3369
border-radius: 2px;
3370
box-shadow: $shadow_2;
3371
}
3372
tooltip.csd & {
3374
border-radius: 2px;
3375
box-shadow: none;
3376
}
3377
messagedialog.csd & {
3379
border-radius: 2px;
3380
// box-shadow: $shadow_4, 0 16px 16px transparent;
3381
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3383
}
3384
.solid-csd & {
3386
margin: 0;
3387
// padding: 4px;
3388
border-radius: 0;
3389
box-shadow: none;
3390
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3391
background-color: $titlebar_bg_color;
3392
}
3393
}
3394
// Window Close button
3396
button.titlebutton {
3397
// @extend %simple_flat_button;
3398
@extend %circular_button;
3400
.selection-mode & {
3402
}
3403
}
3404
// catch all extend :)
3407
%selected_items {
3409
background-color: $primary_color;
3410
@at-root %nobg_selected_items, & {
3412
color: $inverse_fg_color;
3413
&:disabled { color: $inverse_disabled_fg_color; }
3415
}
3416
}
3417
.monospace { font-family: monospace; }
3419
/**********************
3422
* Touch Copy & Paste *
3423
**********************/
3424
// touch selection handlebars for the Popover.osd above
3425
cursor-handle {
3426
border-radius: $circular_radius;
3427
background-color: $accent_color;
3428
background-image: none;
3429
&.top:dir(ltr), &.bottom:dir(rtl) {
3431
padding-left: 6px;
3432
border-top-right-radius: 0;
3433
}
3434
&.bottom:dir(ltr), &.top:dir(rtl) {
3436
padding-right: 6px;
3437
border-top-left-radius: 0;
3438
}
3439
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3441
-GtkWidget-text-handle-width: 24;
3442
-GtkWidget-text-handle-height: 30;
3443
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3445
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3446
url('#{$_url}@2.png'));
3447
}
3448
}
3449
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3451
// shortcut window keys
3453
.keycap {
3454
min-width: 28px - 8px * 2;
3455
min-height: 28px - 2px;
3456
margin-top: 2px;
3457
padding-bottom: 2px;
3458
padding-left: 8px;
3459
padding-right: 8px;
3460
border: solid 1px $border_color;
3462
border-radius: 2px + 1px;
3463
box-shadow: inset 0 -2px $border_color;
3464
background-color: $base_color;
3465
color: $fg_color;
3466
font-size: smaller;
3467
}
3468
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3470
transition: $longer_transition;
3471
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3472
caret-color: $accent_color;
3473
}
3474
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3476
stackswitcher button.circular,
3478
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3479
min-width: $medium_size;
3480
min-height: $medium_size;
3481
padding: 0;
3482
}
3483
/*********
3486
* Emoji *
3487
*********/
3488
popover.emoji-picker {
3489
padding: 0;
3490
entry {
3492
border-bottom: 1px solid $border_color;
3493
border-bottom-left-radius: 0;
3494
border-bottom-right-radius: 0;
3495
box-shadow: none;
3496
}
3497
scrolledwindow { border-bottom: 1px solid $border_color; }
3499
}
3500
// mimic tab style
3502
button.emoji-section {
3503
margin-top: -1px;
3504
padding: 0 8px;
3505
min-width: 24px;
3506
min-height: $medium_size;
3507
border-radius: 0;
3508
outline-offset: -6px;
3509
box-shadow: none;
3510
&:hover { box-shadow: inset 0 2px $track_color; }
3512
&:active {
3514
box-shadow: inset 0 2px $primary_color;
3515
background-image: radial-gradient(circle farthest-corner at center,
3516
rgba($primary_color, 0.7) 10%,
3517
transparent 0%);
3518
}
3519
&:checked {
3521
box-shadow: inset 0 2px $primary_color;
3522
background-color: transparent;
3523
}
3524
&:first-child { margin-left: 4px; }
3526
&:last-child { margin-right: 4px; }
3528
}
3529
.emoji {
3531
min-width: 3em;
3532
min-height: 3em;
3533
padding: 0;
3534
// font-size: large;
3535
widget {
3537
transition: $shorter_transition;
3538
&:hover { font-size: larger; }
3540
}
3541
}
3542