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: scale-alpha($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: gtkalpha(currentColor, $secondary_opacity);
244
&:hover, &:active { color: currentColor; }
246
&:disabled { color: gtkalpha(currentColor, $tertiary_opacity); }
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
}
286
}
287
&:drop(active) {
289
// box-shadow: inset 0 0 0 2px $accent_color;
290
}
291
.osd & {
293
}
294
}
295
progress {
297
margin: 2px (2px - 8px);
298
border-bottom: 2px solid $primary_color;
299
background-color: transparent;
300
}
301
// linked entries
303
.linked:not(.vertical) > & { @extend %linked; }
304
// Vertically linked entries
306
.linked.vertical > & { @extend %linked_vertical; }
307
.linked:not(.vertical) > &.flat,
309
.linked.vertical > &.flat { border-radius: 0; }
310
}
311
treeview entry {
313
&.flat, & {
314
min-height: 0;
315
padding: 2px;
316
border-radius: 0;
317
background-color: $base_color;
318
&, &:focus {
320
border-image: none;
321
box-shadow: none;
322
}
323
}
324
}
325
.entry-tag {
327
$tag_height: 24px;
328
$tag_margin: ($medium_size - $tag_height) / 2;
329
margin: $tag_margin; // instead of min-height: $tag_height;
331
border-radius: $circular_radius;
332
box-shadow: none;
333
background-color: $primary_color;
334
color: $inverse_fg_color;
335
&:hover { box-shadow: $shadow_1; }
337
// side margins: compensate the entry padding with a negative margin
339
// then the negative margin itself
340
:dir(ltr) & {
341
margin-left: 8px;
342
margin-right: $tag_margin - 8px;
343
padding-left: 8px;
344
padding-right: ($tag_height - 16px) / 2;
345
}
346
:dir(rtl) & {
348
margin-left: $tag_margin - 8px;
349
margin-right: 8px;
350
padding-left: ($tag_height - 16px) / 2;
351
padding-right: 8px;
352
}
353
// seems any sizing doesn't work
355
&.button {
356
box-shadow: none;
357
background-color: transparent;
358
&:not(:hover):not(:active) { color: $secondary_inverse_fg_color; }
360
}
361
}
362
/***********
365
* Buttons *
366
***********/
367
// stuff for .needs-attention
368
@keyframes needs_attention {
369
from {
370
background-image: -gtk-gradient(radial,
371
center center, 0,
372
center center, 0.001,
373
to($accent_color),
374
to(transparent));
375
}
376
to {
378
background-image: -gtk-gradient(radial,
379
center center, 0,
380
center center, 0.5,
381
to($accent_color),
382
to(transparent));
383
}
384
}
385
%button,
387
button {
388
@at-root %button_basic, & {
389
min-height: 24px;
390
min-width: 16px;
391
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
392
border-radius: 2px;
393
font-weight: 500;
394
@include button(normal);
396
&:hover { @include button(hover); }
398
&:active { @include button(active); }
400
&:disabled { @include button(disabled); }
402
&:checked { @include button(checked); }
404
&:checked:disabled { @include button(checked-disabled); }
406
@at-root %flat_button, &.flat {
408
@at-root %simple_flat_button, & {
409
@include button(flat-normal);
410
&:hover { @include button(flat-hover); }
412
&:active { @include button(flat-active); }
414
&:disabled { @include button(flat-disabled); }
416
}
417
&:checked { @include button(flat-checked); }
419
&:checked:disabled { @include button(flat-checked-disabled); }
421
}
422
&.text-button {
424
padding-left: 16px;
425
padding-right: 16px;
426
}
427
&.image-button {
429
min-width: 24px;
430
padding: ($medium_size - 24px) / 2;
431
@extend %circular_button;
433
}
434
&.text-button.image-button {
436
border-radius: 2px;
437
-gtk-outline-radius: 2px;
438
label {
440
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
441
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
443
}
444
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
446
}
447
.linked > & { @extend %linked; }
449
.linked.vertical > & { @extend %linked_vertical; }
451
.linked > &.flat,
453
.linked.vertical > &.flat {
454
border-radius: 2px;
455
&.image-button { @extend %circular_button; }
457
&.text-button.image-button {
459
border-radius: 2px;
460
-gtk-outline-radius: 2px;
461
}
462
}
463
&:drop(active) {
465
// box-shadow: inset 0 0 0 2px $accent_color;
466
}
467
}
468
@at-root %button_selected, row:selected & {
470
&:disabled { color: $disabled_secondary_inverse_fg_color; }
471
}
472
// big standalone buttons like in Documents pager
474
&.osd {
475
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
476
&.image-button { padding: ($large_size - 24px) / 2; }
478
&:disabled { opacity: 0; }
480
}
481
// overlay / OSD style
483
@at-root %osd_button,
484
.osd & {
485
}
486
// Suggested and Destructive Action buttons
488
@each $b_type, $b_color in (suggested-action, $suggested_color),
489
(destructive-action, $destructive_color) {
490
&.#{$b_type} {
491
background-color: $b_color;
492
color: $inverse_fg_color;
493
&:disabled { @include button(disabled, $b_color); }
495
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
497
&.flat {
499
background-color: transparent;
500
color: $b_color;
501
&:disabled { @include button(flat-disabled, $b_color); }
503
&:checked { background-color: $fill_color; }
505
}
506
.osd & {
508
}
509
}
510
}
511
.stack-switcher > & {
513
// to position the needs attention dot, padding is added to the button
514
// child, a label needs just lateral padding while an icon needs vertical
515
// padding added too.
516
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
518
> label {
520
padding-left: 6px; // label padding
521
padding-right: 6px; //
522
}
523
> image {
525
padding-left: 6px; // image padding
526
padding-right: 6px; //
527
padding-top: 3px; //
528
padding-bottom: 3px; //
529
}
530
&.text-button {
532
// compensate text-button paddings
533
padding-left: 16px - 6px;
534
padding-right: 16px - 6px;
535
}
536
&.image-button {
538
// we want image buttons to have a 1:1 aspect ratio, so compensation
539
// of the padding added to the GtkImage is needed
540
padding-left: ($medium_size - 16px) / 2 - 6px;
541
padding-right: ($medium_size - 16px) / 2 - 6px;
542
}
543
&.needs-attention {
545
> label,
546
> image { @extend %needs_attention; }
547
&:checked {
549
> label,
550
> image {
551
animation: none;
552
background-image: none;
553
}
554
}
555
}
556
}
557
// hide separators
559
&.font,
560
&.file { separator { @extend %hide_separators; }}
561
// &.font { > box > box > label { font-weight: bold; }}
563
// inline-toolbar buttons
565
.inline-toolbar & {
566
// @extend %button_basic.flat;
567
&:not(.text-button) { @extend %circular_button; }
569
}
570
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
572
@at-root %circular_button,
574
&.close,
575
&.circular { // The Bloody Circul Button
576
border-radius: $circular_radius;
577
-gtk-outline-radius: $circular_radius;
578
// label { padding: 0; }
580
}
581
@at-root %small_button {
583
min-height: $small_size;
584
min-width: $small_size;
585
padding: 0;
586
border-radius: $circular_radius;
587
-gtk-outline-radius: $circular_radius;
588
}
589
}
590
%needs_attention {
592
animation: needs_attention $longer_duration $deceleration_curve forwards;
593
background-repeat: no-repeat;
594
background-position: right 3px;
595
background-size: 6px 6px;
596
&:dir(rtl) { background-position: left 3px; }
598
}
599
// all the following is for the +|- buttons on inline toolbars, that way
601
// should really be deprecated...
602
.inline-toolbar toolbutton > button { // redefining the button look is
603
// needed since those are flat...
604
}
605
// More inline toolbar buttons
607
toolbar.inline-toolbar toolbutton {
608
// > button.flat { @extend %linked_middle; }
609
// &:first-child > button.flat { @extend %linked:first-child; }
611
// &:last-child > button.flat { @extend %linked:last-child; }
613
// &:only-child > button.flat { @extend %linked:only-child; }
615
}
616
%linked_middle {
618
border-radius: 0;
619
-gtk-outline-radius: 2px;
620
}
621
%linked {
623
@extend %linked_middle;
624
&:first-child {
626
border-top-left-radius: 2px;
627
border-bottom-left-radius: 2px;
628
}
629
&:last-child {
631
border-top-right-radius: 2px;
632
border-bottom-right-radius: 2px;
633
}
634
&:only-child {
636
border-radius: 2px;
637
}
638
}
639
%linked_vertical_middle {
641
border-radius: 0;
642
-gtk-outline-radius: 2px;
643
}
644
%linked_vertical {
646
@extend %linked_vertical_middle;
647
&:first-child {
649
border-top-left-radius: 2px;
650
border-top-right-radius: 2px;
651
}
652
&:last-child {
654
border-bottom-left-radius: 2px;
655
border-bottom-right-radius: 2px;
656
}
657
&:only-child {
659
border-radius: 2px;
660
}
661
}
662
/* menu buttons */
664
modelbutton.flat,
665
.menuitem.button.flat {
666
min-height: $menuitem_size;
667
padding: 0 8px;
668
border-radius: 2px;
669
color: inherit;
670
@extend %simple_flat_button;
672
&:selected { @extend %selected_items; }
674
}
675
modelbutton.flat arrow {
677
background: none;
678
&:hover { background: none; }
680
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
682
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
684
}
685
button.color {
687
min-height: $small_size;
688
min-width: $small_size;
689
padding: $container_padding;
690
colorswatch:only-child {
692
// &, overlay { border-radius: 0; }
693
}
694
}
695
/*********
698
* Links *
699
*********/
700
*:link {
701
&, &:hover, &:active { color: $link_color; }
702
&:visited {
704
&, &:hover, &:active { color: $visited_link_color; }
705
}
706
@at-root %link_selected,
708
&:selected,
709
*:selected & { color: $inverse_fg_color; }
710
}
711
button:link,
713
button:visited {
714
@extend *:link;
715
> label { text-decoration-line: underline; }
717
}
718
/*****************
720
* GtkSpinButton *
721
*****************/
722
spinbutton {
723
&:not(.vertical) {
724
// in this horizontal configuration, the whole spinbutton
725
// behaves as the entry, so we extend the entry styling
726
// and nuke the style on the internal entry
727
@extend %entry;
728
padding: 0;
730
%spinbutton_entry,
732
entry {
733
min-width: $large_size - 8px * 2;
734
// reset all the other props since the spinbutton node is styled here
735
margin: 0;
736
border-image: none;
737
border-radius: 0;
738
box-shadow: none;
739
background-color: transparent;
740
//
741
// This will help to simplify spinbutton's code, but unfortunatelly
742
// doesn't work properly in :dir(rtl). It needs z-index property.
743
//
744
// min-width: $large_size - 8px;
745
//
746
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
747
//
748
// &:dir(ltr) {
749
// margin-right: -$spinbuttons_width;
750
// padding-right: $spinbuttons_width;
751
// }
752
//
753
// &:dir(rtl) {
754
// margin-left: -$spinbuttons_width;
755
// padding-left: $spinbuttons_width;
756
// }
757
}
758
button {
760
// margin: $container_padding;
761
border: solid $container_padding transparent;
762
@extend %simple_flat_button;
764
@extend %small_button;
766
&.up:dir(ltr),
768
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
769
&.up:dir(rtl),
771
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
772
}
773
}
774
// OSD horizontal
776
.osd &:not(.vertical) {
777
button {
778
}
779
}
780
// Vertical
782
&.vertical {
783
// in the vertical configuration, we treat the spinbutton
784
// as a box, and tweak the style of the entry in the middle
785
// so that it's linked
786
// FIXME: this should not be set at all, but otherwise it gets the wrong
788
// color
789
&:disabled { color: $disabled_fg_color; }
790
&:drop(active) {
792
box-shadow: none;
793
}
794
entry {
796
min-height: $medium_size;
797
min-width: $large_size;
798
padding: 0;
799
}
800
button {
802
min-height: $medium_size;
803
min-width: $large_size;
804
padding: 0;
805
@extend %simple_flat_button;
807
&.up { border-radius: 2px 2px 0 0; }
809
&.down { border-radius: 0 0 2px 2px; }
811
}
812
}
813
// OSD vertical
815
.osd &.vertical button:first-child {
816
}
817
// Misc
819
treeview &:not(.vertical) {
820
min-height: 0;
821
border-style: none;
822
border-radius: 0;
823
entry {
825
min-height: 0;
826
padding: 1px 2px;
827
}
828
}
829
}
830
/**************
833
* ComboBoxes *
834
**************/
835
combobox {
836
arrow {
837
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
838
min-height: 16px;
839
min-width: 16px;
840
}
841
decoration,
843
button.combo:checked { transition: none; } // workaround for menuitem selection
844
button.combo cellview {
846
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
847
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
848
}
849
#gtk-combobox-popup-menu {
851
padding: 2px 0;
852
menuitem {
854
min-height: $medium_size - 2px * 2;
855
padding: 0 8px;
856
}
857
// overflow arrows
859
> arrow {
860
&.top { margin-top: -2px; }
861
&.bottom { margin-bottom: -2px * 3; }
863
}
864
}
865
&.linked {
867
button:nth-child(2) {
868
&:dir(ltr) { @extend %linked:last-child; }
869
&:dir(rtl) { @extend %linked:first-child; }
870
}
871
}
872
&:drop(active) { // FIXME: untested
874
box-shadow: none;
875
// button.combo { @extend %button_basic:drop(active); }
877
}
878
}
879
// the combo is a composite widget so the way we do button linking doesn't
881
// work, special case needed. See
882
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
883
.linked:not(.vertical) > combobox {
885
> box > button.combo { @extend %linked_middle; }
886
&:first-child > box > button.combo { @extend %linked:first-child; }
888
&:last-child > box > button.combo { @extend %linked:last-child; }
890
&:only-child > box > button.combo { @extend %linked:only-child; }
892
}
893
.linked.vertical > combobox {
895
> box > button.combo { @extend %linked_vertical_middle; }
896
&:first-child > box > button.combo { @extend %linked_vertical:first-child; }
898
&:last-child > box > button.combo { @extend %linked_vertical:last-child; }
900
&:only-child > box > button.combo { @extend %linked_vertical:only-child; }
902
}
903
%combo_flat {
905
border-radius: 0;
906
background-image: none;
907
font-weight: inherit;
908
@include entry(flat-normal);
910
&:hover { box-shadow: inset 0 -2px $fill_color; }
912
&:checked {
914
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
915
$primary_color 100%,
916
transparent 0%)
917
0 0 2 / 0 0 2px;
918
}
919
&:disabled { color: $disabled_fg_color; }
921
}
922
/************
925
* Toolbars *
926
************/
927
toolbar {
928
-GtkWidget-window-dragging: true;
929
padding: $container_padding / 2;
930
background-color: $bg_color;
931
button { @extend %button_basic.flat; }
933
// on OSD
935
.osd & { background-color: transparent; }
936
// stand-alone OSD toolbars
938
&.osd {
939
transition: $shadow_transition;
940
padding: $container_padding;
941
border-radius: 2px;
942
box-shadow: $shadow_2, inset 0 1px $highlight_color;
943
background-color: $base_color;
944
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
946
&.left,
948
&.right,
949
&.top,
950
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
951
}
952
// toolbar separators
954
&.horizontal separator { margin: $container_padding / 2; }
955
&.vertical separator { margin: $container_padding / 2; }
956
&:not(.inline-toolbar):not(.osd) {
958
scale,
959
entry,
960
spinbutton,
961
button { margin: $container_padding / 2; }
962
.linked entry,
964
.linked spinbutton,
965
.linked button {
966
&:not(:first-child) { margin-left: 0; }
967
&:not(:last-child) { margin-right: 0; }
968
}
969
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
971
}
972
}
973
// searchbar, location-bar & inline-toolbar
975
.inline-toolbar {
976
padding: $container_padding;
977
border-style: solid;
978
border-width: 0 1px 1px;
979
border-color: $border_color;
980
background-color: $alt_base_color;
981
}
982
searchbar,
984
.location-bar {
985
padding: $container_padding;
986
border-style: solid;
987
border-width: 0 0 1px;
988
border-color: $border_color;
989
background-color: $bg_color;
990
background-clip: border-box;
991
}
992
/***************
995
* Header bars *
996
***************/
997
%titlebar,
998
headerbar {
999
transition: background-color $shorter_duration $deceleration_curve;
1000
min-height: $large_size;
1001
padding: 0 $container_padding;
1002
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1003
background-color: $titlebar_bg_color;
1004
color: $titlebar_fg_color;
1005
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
1007
&:backdrop {
1009
color: $secondary_titlebar_fg_color;
1010
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
1012
}
1013
.title {
1015
transition: $longer_transition;
1016
padding: 0 12px;
1017
font-weight: bold;
1018
}
1019
.subtitle {
1021
transition: $longer_transition;
1022
padding: 0 12px;
1023
font-size: smaller;
1024
@extend .dim-label;
1026
}
1027
.linked:not(.vertical) > entry:not(.flat) { border-radius: 2px; }
1029
button:not(.suggested-action):not(.destructive-action) {
1031
@extend %button_basic.flat;
1032
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1034
$titlebar_indicator_color 0%,
1035
transparent 0%)
1036
0 0 0 / 0 0 0px;
1037
&:checked {
1039
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1040
$titlebar_indicator_color 100%,
1041
transparent 0%)
1042
0 0 2 / 0 0 2px;
1043
&, &:disabled { background-color: transparent; }
1045
}
1046
}
1047
button.suggested-action, button.destructive-action {
1049
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1050
}
1051
&.selection-mode {
1053
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1054
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1055
transition: background-color 0.00001s $longer_duration;
1056
animation: header_ripple_effect $longer_duration $deceleration_curve;
1057
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1058
background-color: $primary_color;
1059
color: $inverse_fg_color;
1060
&:backdrop {
1062
color: $secondary_inverse_fg_color;
1063
}
1064
.subtitle:link { @extend *:link:selected; }
1066
button:not(.suggested-action):not(.destructive-action) {
1068
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1069
currentColor 0%,
1070
transparent 0%)
1071
0 0 0 / 0 0 0px;
1072
color: currentColor;
1073
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1075
&:checked {
1077
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1078
currentColor 100%,
1079
transparent 0%)
1080
0 0 2 / 0 0 2px;
1081
color: currentColor;
1082
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1084
}
1085
}
1086
.selection-menu {
1088
padding-left: 16px;
1089
padding-right: 16px;
1090
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1092
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1094
}
1095
}
1096
.fullscreen &,
1098
.tiled &,
1099
.maximized & {
1100
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1101
box-shadow: $shadow_1;
1102
}
1103
&.default-decoration {
1105
min-height: $small_size;
1106
padding: $container_padding;
1107
box-shadow: inset 0 1px $titlebar_highlight_color;
1108
.fullscreen &,
1110
.tiled &,
1111
.maximized & { box-shadow: none; }
1112
button.titlebutton {
1114
min-height: $small_size;
1115
min-width: $small_size;
1116
margin: 0;
1117
padding: 0;
1118
}
1119
// workaround for non-animatable buttons
1121
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1122
}
1123
.solid-csd & {
1125
&:dir(rtl), &:dir(ltr) { // specificity bump
1126
// margin-left: -2px;
1127
// margin-right: -2px;
1128
// margin-top: -2px;
1129
// border-radius: 0;
1130
// box-shadow: inset 0 1px $titlebar_highlight_color;
1131
}
1132
}
1133
}
1134
headerbar {
1136
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1137
entry,
1138
spinbutton,
1139
// separator,
1140
button {
1141
margin-top: $container_padding;
1142
margin-bottom: $container_padding;
1143
}
1144
switch {
1146
margin-top: $container_padding * 2;
1147
margin-bottom: $container_padding * 2;
1148
}
1149
// reset button margins of the spinbutton
1151
spinbutton button {
1152
margin-top: 0;
1153
margin-bottom: 0;
1154
}
1155
}
1156
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1158
border-top-left-radius: 2px;
1159
border-top-right-radius: 2px;
1160
}
1161
headerbar { // headerbar border rounding
1163
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1164
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1165
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1167
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1169
&:first-child, &:last-child {
1170
border-top-left-radius: 2px;
1171
border-top-right-radius: 2px;
1172
}
1173
}
1174
}
1175
.titlebar:not(headerbar) {
1177
window.csd > & {
1178
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1179
padding: 0;
1180
background-color: transparent;
1181
background-image: none;
1182
border-style: none;
1183
box-shadow: none;
1184
}
1185
> separator {
1187
background-color: $titlebar_bg_color;
1188
background-image: image($border_color);
1189
}
1190
@extend %titlebar;
1192
}
1193
/************
1196
* Pathbars *
1197
************/
1198
%pathbar_button,
1199
.path-bar button {
1200
padding-left: ($medium_size - 24px) / 2;
1201
padding-right: ($medium_size - 24px) / 2;
1202
label:not(:only-child) {
1204
&:first-child { margin-left: 4px; }
1205
&:last-child { margin-right: 4px; }
1207
}
1208
&.slider-button {
1210
padding-left: (24px - 16px) / 2;
1211
padding-right: (24px - 16px) / 2;
1212
}
1213
:not(headerbar) & {
1215
@extend %flat_button;
1216
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1218
$primary_color 0%,
1219
transparent 0%)
1220
0 0 0 / 0 0 0px;
1221
border-radius: 2px;
1222
&:checked {
1224
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1225
$primary_color 100%,
1226
transparent 0%)
1227
0 0 2 / 0 0 2px;
1228
&, &:disabled { background-color: transparent; }
1230
}
1231
}
1232
}
1233
/**************
1236
* Tree Views *
1237
**************/
1238
treeview.view {
1239
@at-root * {
1240
-GtkTreeView-horizontal-separator: 4;
1241
-GtkTreeView-grid-line-width: 1;
1242
-GtkTreeView-grid-line-pattern: '';
1243
-GtkTreeView-tree-line-width: 1;
1244
-GtkTreeView-tree-line-pattern: '';
1245
-GtkTreeView-expander-size: 16;
1246
}
1247
border-left-color: $fill_color; // this is actually the tree lines color,
1249
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1250
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1252
&:hover, &:active, &:selected { border-radius: 0; }
1254
&.separator {
1256
min-height: 1px + 2px * 2;
1257
color: $border_color;
1258
}
1259
&:drop(active) {
1261
border-style: solid none;
1262
border-width: 1px;
1263
border-color: $accent_color;
1264
&.after { border-top-style: none; }
1266
&.before { border-bottom-style: none; }
1268
}
1269
&.expander {
1271
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1272
-gtk-icon-transform: rotate(-90deg);
1273
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1275
&:checked { -gtk-icon-transform: unset; }
1277
color: $secondary_fg_color;
1279
&:hover, &:active { color: $fg_color; }
1281
&:disabled { color: $disabled_secondary_fg_color; }
1283
&:selected {
1285
color: $secondary_inverse_fg_color;
1286
&:hover, &:active { color: $inverse_fg_color; }
1288
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1290
}
1291
}
1292
&.progressbar { // progress bar in treeviews
1294
border-bottom: $bar_size solid $primary_color;
1295
box-shadow: none;
1296
background-color: transparent;
1297
&:selected { border-bottom-color: currentColor; }
1299
}
1300
&.trough { // progress bar trough in treeviews
1302
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
1303
box-shadow: none;
1304
background-color: transparent;
1305
&:selected { border-bottom-color: $fill_color; }
1307
}
1308
header {
1310
button {
1311
@extend row.activatable;
1312
padding: 2px 6px;
1314
border-style: none solid solid none;
1315
border-width: 1px;
1316
border-color: $border_color;
1317
border-radius: 0;
1318
background-clip: border-box;
1319
&, &:hover, &:active { box-shadow: none; }
1321
&, &:disabled { background-color: $base_color; }
1323
&:last-child { border-right-style: none; }
1325
}
1326
}
1327
button.dnd,
1329
header.button.dnd { // for treeview-like derive widgets
1330
padding: 2px 6px;
1331
border-style: none solid solid;
1332
border-width: 1px;
1333
border-color: $border_color;
1334
border-radius: 0;
1335
box-shadow: none;
1336
background-color: $base_color;
1337
background-clip: border-box;
1338
color: $primary_color;
1339
}
1340
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1342
}
1343
/*********
1346
* Menus *
1347
*********/
1348
menubar,
1349
.menubar {
1350
-GtkWidget-window-dragging: true;
1351
padding: 0;
1352
// box-shadow: inset 0 -1px $border_color;
1353
background-color: $titlebar_bg_color;
1354
> menuitem {
1356
transition: $shorter_transition;
1357
min-height: 20px;
1358
padding: 4px 8px;
1359
color: $secondary_titlebar_fg_color;
1360
&:hover { // Seems like it :hover even with keyboard focus
1362
transition: none;
1363
background-color: $semi_fill_color;
1364
color: $titlebar_fg_color;
1365
}
1366
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1368
}
1369
}
1370
.csd.popup { background-color: transparent; }
1372
menu,
1374
.menu,
1375
.context-menu {
1376
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1377
padding: 4px 0;
1378
box-shadow: inset 0 1px $highlight_color;
1379
background-color: $base_color;
1380
border: 1px solid $border_color; // adds borders in a non composited env
1381
.csd & {
1383
border: none; // axes borders in a composited env
1384
border-radius: 2px;
1385
}
1386
menuitem {
1388
transition: $shorter_transition;
1389
min-height: 20px;
1390
min-width: 40px;
1391
padding: 4px 8px;
1392
font: initial;
1393
text-shadow: none;
1394
&:hover {
1396
transition: none;
1397
background-color: $semi_fill_color;
1398
}
1399
&:disabled { color: $disabled_fg_color; }
1401
// submenu indicators
1403
arrow {
1404
min-height: 16px;
1405
min-width: 16px;
1406
&:dir(ltr) {
1408
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1409
margin-left: 8px;
1410
}
1411
&:dir(rtl) {
1413
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1414
margin-right: 8px;
1415
}
1416
}
1417
// avoids labels color being overridden, see
1419
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1420
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1421
}
1422
// overflow arrows
1424
> arrow {
1425
min-height: 16px;
1426
min-width: 16px;
1427
padding: 4px;
1428
background-color: $base_color;
1429
color: $secondary_fg_color;
1430
&.top {
1432
margin-top: -4px;
1433
border-bottom: 1px solid $border_color;
1434
border-radius: 2px 2px 0 0;
1435
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1436
}
1437
&.bottom {
1439
margin-bottom: -4px * 3;
1440
border-top: 1px solid $border_color;
1441
border-radius: 0 0 2px 2px;
1442
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1443
}
1444
&:hover {
1446
background-image: image($semi_fill_color);
1447
color: $fg_color;
1448
}
1449
&:disabled {
1451
border-color: transparent;
1452
background-color: transparent;
1453
color: transparent;
1454
// color: $disabled_secondary_fg_color;
1455
}
1456
}
1457
separator { margin: 4px 0; }
1459
}
1460
menuitem {
1462
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1463
}
1464
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1466
// Electron/Atom render all translucent colors in opaque colors.
1467
// It's a very critical issue for this theme and should be fixed by upstream...
1468
.popup:not(.csd) menu {
1469
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1470
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1471
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1472
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1473
menuitem {
1475
color: $opaque_fg_color;
1476
&:hover { background-color: $opaque_semi_fill_color; }
1478
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1480
}
1481
// TODO: not working this, where/how i can set the accelerators?
1483
accelerator { color: $opaque_tertiary_fg_color; }
1484
}
1485
/************
1488
* Popovers *
1489
************/
1490
popover.background {
1491
transition: $shadow_transition;
1492
padding: 2px;
1493
box-shadow: $shadow_2; // TODO: this should really have a highlight
1494
background-color: $lighter_bg_color;
1495
&:backdrop { box-shadow: $shadow_1; }
1497
&, .csd & {
1499
border-style: solid;
1500
border-width: 1px;
1501
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1502
border-radius: 2px + 1px;
1503
}
1504
> stack { margin: -4px; } // remove extra padding from menu style popovers
1506
> toolbar { margin: -2px; }
1508
> list,
1510
> .view,
1511
> toolbar {
1512
border-style: none;
1513
box-shadow: none;
1514
background-color: transparent;
1515
}
1516
&.touch-selection,
1518
&.magnifier,
1519
&.osd { @extend %osd; }
1520
// entry { @extend %entry.flat; }
1522
// button.combo { @extend %combo_flat; }
1524
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1526
&.menu button,
1528
button.model {
1529
@extend %simple_flat_button;
1530
min-height: 32px;
1532
padding: 0 8px;
1533
border-radius: 2px;
1534
&:checked { @extend %selected_items; }
1536
}
1537
separator { margin: 4px 0; }
1539
list separator { margin: 0; }
1541
}
1542
/*************
1544
* Notebooks *
1545
*************/
1546
notebook {
1547
> header {
1548
border-width: 1px;
1549
border-color: $border_color;
1550
background-color: $bg_color;
1551
background-clip: border-box;
1552
&.top {
1554
border-bottom-style: solid;
1555
> tabs {
1556
margin-bottom: -1px;
1557
> tab {
1558
&:hover { box-shadow: inset 0 -2px $fill_color; }
1560
&:checked { box-shadow: inset 0 -2px $primary_color; }
1562
}
1563
}
1564
}
1565
&.bottom {
1567
border-top-style: solid;
1568
> tabs {
1569
margin-top: -1px;
1570
> tab {
1571
&:hover { box-shadow: inset 0 2px $fill_color; }
1573
&:checked { box-shadow: inset 0 2px $primary_color; }
1575
}
1576
}
1577
}
1578
&.left {
1580
border-right-style: solid;
1581
> tabs {
1582
margin-right: -1px;
1583
> tab {
1584
&:hover { box-shadow: inset -2px 0 $fill_color; }
1586
&:checked { box-shadow: inset -2px 0 $primary_color; }
1588
}
1589
}
1590
}
1591
&.right {
1593
border-left-style: solid;
1594
> tabs {
1595
margin-left: -1px;
1596
> tab {
1597
&:hover { box-shadow: inset 2px 0 $fill_color; }
1599
&:checked { box-shadow: inset 2px 0 $primary_color; }
1601
}
1602
}
1603
}
1604
&.top > tabs > arrow {
1606
@extend %notebook_vert_arrows;
1607
border-top-style: none;
1609
}
1610
&.bottom > tabs > arrow {
1612
@extend %notebook_vert_arrows;
1613
border-bottom-style: none;
1615
}
1616
@at-root %notebook_vert_arrows {
1618
padding-left: 4px;
1619
padding-right: 4px;
1620
&.down {
1622
margin-left: -8px;
1623
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1624
}
1625
&.up {
1627
margin-right: -8px;
1628
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1629
}
1630
}
1631
&.left > tabs > arrow {
1633
@extend %notebook_horz_arrows;
1634
border-left-style: none;
1636
}
1637
&.right > tabs > arrow {
1639
@extend %notebook_horz_arrows;
1640
border-right-style: none;
1642
}
1643
@at-root %notebook_horz_arrows {
1645
padding-top: 4px;
1646
padding-bottom: 4px;
1647
&.down {
1649
margin-top: -8px;
1650
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1651
}
1652
&.up {
1654
margin-bottom: -8px;
1655
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1656
}
1657
}
1658
> tabs > arrow {
1660
@extend %simple_flat_button;
1661
min-height: 16px;
1663
min-width: 16px;
1664
border-radius: 0;
1665
}
1666
tab {
1668
transition: $longer_transition,
1669
background-size 0,
1670
background-image 0;
1671
min-height: $small_size;
1672
min-width: $small_size;
1673
padding: $container_padding 12px;
1674
outline-offset: -6px;
1676
border-width: 1px; // for reorderable tabs
1678
border-color: transparent; //
1679
background-image: radial-gradient(circle farthest-corner at center,
1681
$primary_color 10%,
1682
transparent 0%);
1683
background-repeat: no-repeat;
1684
background-position: center;
1685
background-size: 0% 0%;
1686
color: $secondary_fg_color;
1688
font-weight: 500;
1689
&:hover {
1691
color: $fg_color;
1692
&.reorderable-page {
1694
border-color: $border_color;
1695
background-color: $alt_base_color;
1696
}
1697
}
1698
&:disabled { color: $disabled_secondary_fg_color; }
1700
&:checked {
1702
transition: $longer_transition,
1703
background-size $longer_duration $deceleration_curve,
1704
background-image $longer_duration + $ripple_duration $deceleration_curve;
1705
background-image: radial-gradient(circle farthest-corner at center,
1706
transparent 10%,
1707
transparent 0%);
1708
background-size: 1000% 1000%;
1709
color: $fg_color;
1710
&:disabled { color: $disabled_fg_color; }
1712
&.reorderable-page {
1714
border-color: $border_color;
1715
background-color: $base_color;
1716
}
1717
}
1718
// colors the button like the label, overridden otherwise
1720
button.flat {
1721
@extend %small_button;
1722
&:last-child {
1724
margin-left: $container_padding;
1725
margin-right: $container_padding - 12px;
1726
}
1727
&:first-child {
1729
margin-left: $container_padding - 12px;
1730
margin-right: $container_padding;
1731
}
1732
}
1733
}
1734
&.top,
1736
&.bottom {
1737
tabs {
1738
padding-left: 8px;
1739
padding-right: 8px;
1740
&:not(:only-child) {
1742
&:first-child { margin-left: 0; }
1743
&:last-child { margin-right: 0; }
1744
}
1745
tab {
1747
&.reorderable-page {
1748
margin: 0 -1px;
1749
border-style: none solid;
1750
}
1751
}
1752
}
1753
}
1754
&.left,
1756
&.right {
1757
tabs {
1758
padding-top: 8px;
1759
padding-bottom: 8px;
1760
&:not(:only-child) {
1762
&:first-child { margin-top: 0; }
1763
&:last-child { margin-bottom: 0; }
1764
}
1765
tab {
1767
&.reorderable-page {
1768
margin: -1px 0;
1769
border-style: solid none;
1770
}
1771
}
1772
}
1773
}
1774
}
1775
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1777
background-color: $base_color;
1778
entry:not(.search),
1780
spinbutton:not(.vertical) { @extend %entry.flat; }
1781
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1783
button.combo { @extend %combo_flat; }
1785
}
1786
}
1787
/**************
1790
* Scrollbars *
1791
**************/
1792
scrollbar {
1793
$_slider_min_length: 24px;
1794
// disable steppers
1796
@at-root * {
1797
-GtkScrollbar-has-backward-stepper: false;
1798
-GtkScrollbar-has-forward-stepper: false;
1799
}
1800
transition: $longer_transition;
1802
background-color: $base_color;
1803
background-clip: $extra_background_clip;
1804
// scrollbar border
1806
&.top { border-bottom: 1px solid $border_color; }
1807
&.bottom { border-top: 1px solid $border_color; }
1808
&.left { border-right: 1px solid $border_color; }
1809
&.right { border-left: 1px solid $border_color; }
1810
// slider
1812
slider {
1813
transition: $shorter_transition, margin 0, border-width 0;
1814
min-width: 8px;
1815
min-height: 8px;
1816
border: 4px solid transparent;
1817
border-radius: $circular_radius;
1818
background-clip: padding-box;
1819
background-color: $tertiary_fg_color;
1820
&:hover { background-color: $secondary_fg_color; }
1822
&:active { background-color: $fg_color; }
1824
&:disabled { background-color: $disabled_tertiary_fg_color; }
1826
}
1827
&.fine-tune {
1829
slider {
1830
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1831
min-width: 4px;
1832
min-height: 4px;
1833
}
1834
&.horizontal slider { margin: 2px 0; }
1836
&.vertical slider { margin: 0 2px; }
1838
}
1839
&.overlay-indicator {
1841
&:not(.dragging):not(.hovering) {
1842
border-color: transparent;
1843
background-color: transparent;
1844
slider {
1846
min-width: 4px;
1847
min-height: 4px;
1848
margin: 4px - 1px;
1849
border: 1px solid scale-alpha($base_color, $lower_opacity);
1850
}
1851
button {
1853
min-width: 4px;
1854
min-height: 4px;
1855
margin: 4px - 1px;
1856
border: 1px solid scale-alpha($base_color, $lower_opacity);
1857
border-radius: $circular_radius;
1858
background-color: $tertiary_fg_color;
1859
background-clip: padding-box;
1860
-gtk-icon-source: none;
1861
&:disabled { background-color: $disabled_tertiary_fg_color; }
1863
}
1864
&.horizontal {
1866
slider { min-width: $_slider_min_length; }
1867
button { min-width: 8px; }
1869
}
1870
&.vertical {
1872
slider { min-height: $_slider_min_length; }
1873
button { min-height: 8px; }
1875
}
1876
}
1877
&.dragging,
1879
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1880
}
1881
&.horizontal slider { min-width: $_slider_min_length; }
1883
&.vertical slider { min-height: $_slider_min_length; }
1885
// button styling
1887
button {
1888
@extend %simple_flat_button;
1889
min-width: 16px;
1891
min-height: 16px;
1892
padding: 0;
1893
border-radius: 0;
1894
}
1895
// button icons
1897
&.vertical {
1898
button {
1899
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1900
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1902
}
1903
}
1904
&.horizontal {
1906
button {
1907
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1908
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1910
}
1911
}
1912
}
1913
/**********
1916
* Switch *
1917
**********/
1918
switch {
1919
transition: $longer_transition;
1920
margin: $container_padding 0;
1921
padding: 0 2px;
1922
border: 4px solid transparent;
1923
border-radius: $circular_radius;
1924
background-color: $fill_color;
1925
background-clip: padding-box;
1926
font-size: 0;
1927
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1929
&:checked {
1931
background-color: scale-alpha($accent_color, 0.5);
1932
&:disabled {
1934
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1935
color: $disabled_fg_color;
1936
}
1937
}
1938
slider {
1940
transition: $longer_transition, $shadow_transition;
1941
min-width: 20px;
1942
min-height: 20px;
1943
margin: -3px -2px;
1944
border-radius: $circular_radius;
1945
-gtk-outline-radius: $circular_radius;
1946
box-shadow: $shadow_1;
1947
background-color: $base_color;
1948
}
1949
&:hover slider { box-shadow: $shadow_2; }
1951
&:checked slider {
1953
transition: $longer_transition, $shadow_transition, background-image 0, background-color 0.00001s $longer_duration;
1954
animation: needs_attention $longer_duration $deceleration_curve;
1955
background-color: $accent_color;
1956
color: $inverse_fg_color;
1957
}
1958
&:disabled slider { background-color: $alt_base_color; }
1960
&:checked:disabled slider { animation: none; }
1962
row:selected & {
1964
}
1965
}
1966
/*************************
1969
* Check and Radio items *
1970
*************************/
1971
// draw regular check and radio items using our PNG assets
1972
// all assets are rendered from assets.svg. never add pngs directly
1973
// selection-mode
1975
.view.content-view.check:not(list),
1976
.content-view .tile check:not(list) {
1977
min-height: 40px;
1978
min-width: 40px;
1979
margin: 0;
1980
padding: 0;
1981
box-shadow: none;
1982
background-color: transparent;
1983
background-image: none;
1984
-gtk-icon-shadow: $shadow_1;
1985
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1987
@each $s, $as in ('', '-unchecked'),
1989
(':checked', '-checked') {
1990
&#{$s} {
1991
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1992
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1993
}
1994
}
1995
}
1996
checkbutton.text-button,
1998
radiobutton.text-button {
1999
// this is for a nice focus on check and radios text
2000
padding: 2px;
2001
outline-offset: 0;
2002
label:not(:only-child) { margin: 0 4px; }
2004
}
2005
check,
2007
radio {
2008
min-height: 24px;
2009
min-width: 24px;
2010
margin: -($large_size - 24px) / 2;
2011
padding: ($large_size - 24px) / 2;
2012
@extend %simple_flat_button;
2014
@extend %circular_button;
2016
&:checked, &:indeterminate {
2018
color: $accent_color;
2019
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2021
}
2022
// &:only-child { margin: -12px; }
2024
row &:not(:checked):not(:indeterminate) {
2026
color: gtkalpha(currentColor, $secondary_opacity);
2027
&:hover, &:active { color: currentColor; }
2029
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
2031
}
2032
popover & {
2034
&, &:hover, &:disabled {
2035
box-shadow: none;
2036
background-image: none;
2037
}
2038
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2040
&.left:dir(rtl) {
2042
margin-left: -16px;
2043
margin-right: -8px;
2044
}
2045
&.right:dir(ltr) {
2047
margin-left: -8px;
2048
margin-right: -16px;
2049
}
2050
}
2051
menu menuitem & {
2053
transition: none;
2054
min-height: 16px;
2055
min-width: 16px;
2056
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2057
padding: 0;
2058
&:dir(ltr) { margin-right: 8px; }
2060
&:dir(rtl) { margin-left: 8px; }
2062
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2064
&, &:hover, &:disabled {
2066
box-shadow: none;
2067
// color: inherit;
2068
}
2069
}
2070
}
2071
%check,
2073
check {
2074
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2075
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2076
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2078
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2079
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2081
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2082
}
2083
%radio,
2085
radio {
2086
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2087
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2088
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2090
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2091
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2093
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2094
border-image-slice: $large_size / 2px;
2096
border-image-width: $large_size / 2;
2097
$radio_indicator: 10px / $large_size / 2;
2099
& {
2101
border-image-source: -gtk-gradient(radial,
2102
center center, 0,
2103
center center, 0.001,
2104
to($accent_color),
2105
to(transparent));
2106
}
2107
&:checked:not(:indeterminate) {
2109
border-image-source: -gtk-gradient(radial,
2110
center center, 0,
2111
center center, $radio_indicator,
2112
to($accent_color),
2113
to(transparent));
2114
}
2115
&:checked:not(:indeterminate):disabled {
2117
border-image-source: -gtk-gradient(radial,
2118
center center, 0,
2119
center center, $radio_indicator,
2120
to(scale-alpha($accent_color, $disabled_opacity)),
2121
to(transparent));
2122
}
2123
}
2124
%small_check,
2126
menu menuitem check {
2127
& {
2128
border-radius: 2px;
2129
-gtk-outline-radius: 2px;
2130
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")),
2131
-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2132
}
2133
&:checked {
2135
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")),
2136
-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2137
}
2138
&:indeterminate {
2140
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")),
2141
-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2142
}
2143
}
2144
%small_radio,
2146
menu menuitem radio {
2147
& {
2148
border-image: none;
2149
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")),
2150
-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2151
}
2152
&:checked {
2154
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")),
2155
-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2156
}
2157
&:indeterminate {
2159
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")),
2160
-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2161
}
2162
}
2163
// ANIMATION:
2165
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2166
// the transformation is set on the active state and it get reset on the checked state.
2167
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2168
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2170
check:not(:checked):indeterminate:active,
2172
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2173
check:not(:checked),
2175
radio:not(:checked) {
2176
& {
2177
transition: $longer_transition,
2178
background-size $ripple_duration $deceleration_curve,
2179
background-image $ripple_duration * 2 $deceleration_curve,
2180
-gtk-icon-transform 0;
2181
}
2182
&:active {
2184
transition: $longer_transition,
2185
background-size 0,
2186
background-image 0,
2187
-gtk-icon-transform 0;
2188
}
2189
menu menuitem & { transition: none; }
2191
}
2192
treeview.view check,
2194
treeview.view radio {
2195
padding: 0;
2196
&:hover {
2198
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2199
&:disabled { box-shadow: none; }
2201
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2203
}
2204
& {
2206
color: $secondary_fg_color;
2207
&:hover, &:active { color: $fg_color; }
2209
&:disabled { color: $disabled_secondary_fg_color; }
2211
&:checked, &:indeterminate { color: $accent_color; }
2213
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2215
}
2216
&:selected {
2218
color: $secondary_inverse_fg_color;
2219
&:hover, &:active { color: $inverse_fg_color; }
2221
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2223
&:checked, &:indeterminate { color: $accent_color; }
2225
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2227
}
2228
}
2229
treeview.view radio:checked {
2231
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2232
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2233
border-image: none;
2234
}
2235
/************
2238
* GtkScale *
2239
************/
2240
scale {
2241
// sizing
2242
$_marks_length: 8px;
2243
$_marks_distance: 8px;
2244
$trough_size: 2px;
2246
$slider_size: 24px;
2248
$marks_slider_size: 30px;
2249
$slider_margin: -($slider_size - $trough_size) / 2;
2251
$marks_slider_margin: -($marks_slider_size - $trough_size) - $slider_margin;
2252
$color_slider_margin: -($slider_size) / 2;
2254
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2255
min-height: $medium_size - $slider_size;
2257
min-width: $medium_size - $slider_size;
2258
padding: ($slider_size / 2);
2259
* { transition: $longer_transition; }
2261
// the slider is inside the trough, so to have make it bigger there's a negative margin
2263
slider {
2264
min-height: $slider_size;
2265
min-width: $slider_size;
2266
margin: $slider_margin;
2267
}
2268
// the backing bit
2270
trough {
2271
outline-offset: 2px;
2272
background-color: $fill_color;
2273
&:disabled { color: $disabled_fg_color; }
2275
}
2276
// the colored part of the backing bit
2278
highlight {
2279
background-color: $accent_color;
2280
&:disabled { background-color: transparent; }
2282
}
2283
// this is another differently styled part of the backing bit, the most relevant use case is for example
2285
// in media player to indicate how much video stream as been cached
2286
fill {
2287
background-color: $fill_color;
2288
&:disabled { background-color: transparent; }
2290
}
2291
slider {
2293
transition: all $shorter_duration $standard_curve;
2294
// border-radius: 100%;
2295
// background-color: $accent_color;
2296
background-repeat: no-repeat;
2297
background-position: center;
2298
@each $s, $as in ('', ''),
2300
(':disabled', '-disabled') {
2301
&#{$s} {
2302
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2303
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2305
}
2306
}
2307
background-size: calc(100% - 10px);
2309
&:hover { background-size: calc(100% - 8px); }
2311
&:active { background-size: calc(100% - 6px); }
2313
}
2314
// click-and-hold the slider to activate
2316
&.fine-tune {
2317
// to make the slider shrink in fine-tune mode
2318
slider { background-size: calc(100% - 12px); }
2319
}
2320
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2322
marks {
2324
color: $fill_color;
2325
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2327
(bottom, bottom, top),
2328
(top, left, right),
2329
(bottom, right, left) {
2330
&.#{$marks_class} {
2331
margin-#{$marks_margin}: $_marks_distance;
2332
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2333
}
2334
}
2335
}
2336
&.horizontal {
2338
indicator {
2339
min-height: $_marks_length;
2340
min-width: 1px;
2341
}
2342
}
2343
&.vertical {
2345
indicator {
2346
min-height: 1px;
2347
min-width: $_marks_length;
2348
}
2349
}
2350
// *WARNING* scale with marks madness following
2352
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2354
('vertical', 'vert') {
2355
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2356
('marks-after', 'marks-after:not(.marks-before)') {
2357
&.#{$dir_class}.#{$marks_class} {
2358
slider {
2359
@each $state, $state_infix in ('', ''),
2360
(':disabled', '-disabled') {
2361
&#{$state} {
2362
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2363
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2365
}
2366
}
2367
@if $dir_class == 'horizontal' {
2369
min-height: $marks_slider_size;
2370
min-width: $slider_size;
2371
@if $marks_infix == 'marks-before' {
2373
margin-top: $marks_slider_margin;
2374
background-position: center calc(100% - 5px);
2376
&:hover { background-position: center calc(100% - 4px); }
2378
&:active { background-position: center calc(100% - 3px); }
2380
}
2381
@if $marks_infix == 'marks-after' {
2383
margin-bottom: $marks_slider_margin;
2384
background-position: center calc(5px);
2386
&:hover { background-position: center calc(4px); }
2388
&:active { background-position: center calc(3px); }
2390
}
2391
}
2392
@if $dir_class == 'vertical' {
2394
min-height: $slider_size;
2395
min-width: $marks_slider_size;
2396
@if $marks_infix == 'marks-before' {
2398
margin-left: $marks_slider_margin;
2399
background-position: calc(5px) center;
2401
&:hover { background-position: calc(4px) center; }
2403
&:active { background-position: calc(3px) center; }
2405
}
2406
@if $marks_infix == 'marks-after' {
2408
margin-right: $marks_slider_margin;
2409
background-position: calc(100% - 5px) center;
2411
&:hover { background-position: calc(100% - 4px) center; }
2413
&:active { background-position: calc(100% - 3px) center; }
2415
}
2416
}
2417
}
2418
&.fine-tune slider {
2420
@if $dir_class == 'horizontal' {
2421
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2422
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2424
}
2425
@if $dir_class == 'vertical' {
2427
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2428
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2430
}
2431
}
2432
}
2433
}
2434
}
2435
&.color {
2437
min-height: 0;
2438
min-width: 0;
2439
&.horizontal {
2441
padding: 0 0 12px 0;
2442
slider {
2444
&:dir(ltr), &:dir(rtl) { // specificity bump
2445
margin-bottom: $color_slider_margin;
2446
margin-top: $color_marks_slider_margin;
2447
}
2448
}
2449
}
2450
&.vertical {
2452
&:dir(ltr) {
2453
padding: 0 0 0 12px;
2454
slider {
2456
margin-left: $color_slider_margin;
2457
margin-right: $color_marks_slider_margin;
2458
}
2459
}
2460
&:dir(rtl) {
2462
padding: 0 12px 0 0;
2463
slider {
2465
margin-right: $color_slider_margin;
2466
margin-left: $color_marks_slider_margin;
2467
}
2468
}
2469
}
2470
}
2471
}
2472
/*****************
2475
* Progress bars *
2476
*****************/
2477
progressbar {
2478
// sizing
2479
&.horizontal {
2480
trough,
2481
progress { min-height: $bar_size; }
2482
}
2483
&.vertical {
2485
trough,
2486
progress { min-width: $bar_size; }
2487
}
2488
// FIXME: insensitive state missing and some other state should be set probably
2490
color: $tertiary_fg_color;
2491
font-size: smaller;
2492
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2494
progress { background-color: $primary_color; }
2496
&.osd { // progressbar.osd used for epiphany page loading progress
2498
// min-width: $bar_size;
2499
// min-height: $bar_size;
2500
// background-color: transparent;
2501
// trough { background-color: transparent; }
2503
// progress { background-color: $primary_color; }
2505
}
2506
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2508
}
2509
/*************
2512
* Level Bar *
2513
*************/
2514
levelbar {
2515
block {
2516
min-width: $medium_size;
2517
min-height: $bar_size;
2518
}
2519
&.vertical block {
2521
min-width: $bar_size;
2522
min-height: $medium_size;
2523
}
2524
// imitate the entry style
2526
trough {
2527
padding: 2px;
2528
border-radius: 2px;
2529
box-shadow: $shadow_1;
2530
background-color: $base_color;
2531
&:disabled { background-color: $alt_base_color; }
2533
}
2534
&.horizontal.discrete {
2536
block { margin: 0 1px; }
2537
trough { padding: 2px 1px; }
2539
}
2540
&.vertical.discrete {
2542
block { margin: 1px 0; }
2543
trough { padding: 1px 2px; }
2545
}
2546
block {
2548
&.low { background-color: $warning_color; }
2549
&.high,
2551
&:not(.empty) { background-color: $primary_color; }
2552
&.full { background-color: $success_color; }
2554
&.empty {
2556
background-color: $fill_color;
2557
color: $disabled_fg_color;
2558
}
2559
}
2560
}
2561
/****************
2564
* Print dialog *
2565
*****************/
2566
printdialog {
2567
paper {
2568
padding: 0;
2569
border: 1px solid $border_color;
2570
background-color: $base_color;
2571
color: $fg_color;
2572
}
2573
.dialog-action-box { margin: 12px; }
2575
}
2576
/**********
2579
* Frames *
2580
**********/
2581
frame > border,
2582
.frame {
2583
margin: 0;
2584
padding: 0;
2585
border: 1px solid $border_color;
2586
border-radius: 0;
2587
box-shadow: none;
2588
&.flat { border-style: none; }
2590
}
2591
frame.flat > border { @extend .frame.flat; } // for backporting
2593
actionbar > revealer > box {
2595
padding: $container_padding;
2596
border-top: 1px solid $border_color;
2597
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2599
}
2600
scrolledwindow {
2602
viewport.frame { // avoid double borders when viewport inside scrolled window
2603
border-style: none;
2604
}
2605
// This is used when content is touch-dragged past boundaries.
2607
// draws a box on top of the content, the size changes programmatically.
2608
@at-root overshoot {
2609
&.top { @include overshoot(top); }
2610
&.bottom { @include overshoot(bottom); }
2612
&.left { @include overshoot(left); }
2614
&.right { @include overshoot(right); }
2616
}
2617
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2619
@at-root undershoot {
2620
&.top { @include undershoot(top); }
2621
&.bottom { @include undershoot(bottom); }
2623
&.left { @include undershoot(left); }
2625
&.right { @include undershoot(right); }
2627
}
2628
@at-root junction { // the small square between two scrollbars
2630
border-style: solid none none solid;
2631
border-width: 1px;
2632
border-color: $border_color;
2633
background-color: $base_color;
2634
&:dir(rtl) { border-style: solid solid none none; }
2636
}
2637
}
2638
// vbox and hbox separators
2640
separator {
2641
min-width: 1px;
2642
min-height: 1px;
2643
background-color: $border_color;
2644
}
2645
%hide_separators {
2647
min-width: 0;
2648
min-height: 0;
2649
background-color: transparent;
2650
}
2651
/*********
2654
* Lists *
2655
*********/
2656
list {
2657
border-color: $border_color;
2658
background-color: $base_color;
2659
row { padding: 2px; }
2661
}
2662
// FIXME
2664
$row_transition: $longer_transition, background-color 0, color 0;
2665
row {
2667
&.activatable {
2668
transition: $row_transition,
2669
background-size $ripple_duration $deceleration_curve,
2670
background-image $ripple_duration * 2 $deceleration_curve;
2671
box-shadow: inset 0 0 0 9999px transparent;
2672
background-image: radial-gradient(circle farthest-corner at center,
2673
transparent 10%,
2674
transparent 0%);
2675
background-repeat: no-repeat;
2676
background-position: center;
2677
background-size: 1000% 1000%;
2678
&:hover {
2680
transition: $row_transition,
2681
box-shadow 0,
2682
background-size $ripple_duration $deceleration_curve,
2683
background-image $ripple_duration * 2 $deceleration_curve;
2684
box-shadow: inset 0 0 0 9999px $row_fill_color;
2685
}
2686
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2688
&:active {
2689
transition: $row_transition,
2690
background-size 0,
2691
background-image 0;
2692
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2693
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2694
background-image: radial-gradient(circle farthest-corner at center,
2695
$semi_fill_color 10%,
2696
transparent 0%);
2697
background-size: 0% 0%;
2698
}
2699
}
2700
&:selected { @extend %selected_items; }
2702
}
2703
/*********************
2706
* App Notifications *
2707
*********************/
2708
.app-notification {
2709
@extend %osd;
2710
@extend toolbar.osd;
2712
margin: 8px;
2714
button { @extend %button_basic.flat; }
2716
&.frame,
2718
border { border-style: none; }
2719
}
2720
/*************
2723
* Expanders *
2724
*************/
2725
expander {
2726
arrow {
2727
transition: all $shorter_duration $standard_curve;
2728
min-width: 16px;
2729
min-height: 16px;
2730
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2731
-gtk-icon-transform: rotate(-90deg);
2732
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2734
&:checked { -gtk-icon-transform: unset; }
2736
color: $secondary_fg_color;
2738
&:hover, &:active { color: $fg_color; }
2740
&:disabled { color: $disabled_secondary_fg_color; }
2742
&:selected {
2744
color: $secondary_inverse_fg_color;
2745
&:hover, &:active { color: $inverse_fg_color; }
2747
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2749
}
2750
}
2751
}
2752
/************
2755
* Calendar *
2756
************/
2757
calendar {
2758
padding: 1px;
2759
border: 1px solid $border_color;
2760
color: $fg_color;
2761
&:disabled { color: $disabled_fg_color; }
2763
&:selected {
2765
@extend %selected_items;
2766
border-radius: 2px + 1px;
2768
}
2769
&.header {
2771
border-style: none none solid;
2772
border-radius: 0;
2773
}
2774
&.button { @extend %simple_flat_button; }
2776
&.highlight {
2778
color: gtkalpha(currentColor, $tertiary_opacity);
2779
font-weight: 500;
2780
}
2781
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2783
}
2784
/***********
2787
* Dialogs *
2788
***********/
2789
messagedialog { // Message Dialog styling
2790
&.background { background-color: $lighter_bg_color; }
2791
.titlebar {
2793
min-height: $small_size;
2794
border-style: none;
2795
box-shadow: inset 0 1px $highlight_color;
2796
background-color: $lighter_bg_color;
2797
color: $fg_color;
2798
&:backdrop { color: $secondary_fg_color; }
2800
}
2801
&.csd { // rounded bottom border styling for csd version
2803
&.background {
2804
// bigger radius for better antialiasing
2805
border-bottom-left-radius: 2px;
2806
border-bottom-right-radius: 2px;
2807
}
2808
.dialog-action-area button {
2810
padding: 8px 16px;
2811
border-top: 1px solid $border_color;
2812
border-radius: 0;
2813
@extend %simple_flat_button;
2815
&:first-child { border-bottom-left-radius: 2px; }
2817
&:last-child { border-bottom-right-radius: 2px; }
2819
}
2820
}
2821
entry { @extend %entry.flat; }
2823
}
2824
filechooser {
2826
.dialog-action-box { border-top: 1px solid $border_color; }
2827
#pathbarbox {
2829
border-bottom: 1px solid $border_color;
2830
background-color: $bg_color;
2831
}
2832
}
2833
filechooserbutton:drop(active) {
2835
box-shadow: none;
2836
}
2837
/***********
2840
* Sidebar *
2841
***********/
2842
.sidebar {
2843
border-style: none;
2844
background-color: $lighter_bg_color;
2845
@at-root %sidebar_left,
2847
&:dir(ltr),
2848
&.left,
2849
&.left:dir(rtl) {
2850
border-right: 1px solid $border_color;
2851
border-left-style: none;
2852
}
2853
@at-root %sidebar_right,
2855
&:dir(rtl),
2856
&.right {
2857
border-left: 1px solid $border_color;
2858
border-right-style: none;
2859
}
2860
list { background-color: transparent; }
2862
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2864
}
2865
stacksidebar {
2867
&.sidebar {
2868
&:dir(ltr),
2869
&.left,
2870
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2871
&:dir(rtl),
2873
&.right { list { @extend %sidebar_right; }}
2874
}
2875
row {
2877
padding: 10px 4px;
2878
> label {
2880
padding-left: 6px;
2881
padding-right: 6px;
2882
}
2883
&.needs-attention > label { @extend %needs_attention; }
2885
}
2886
}
2887
/****************
2890
* File chooser *
2891
****************/
2892
placessidebar {
2893
> viewport.frame { border-style: none; }
2894
list { padding: (4px - 3px) 0 4px; }
2896
row {
2898
// Needs overriding of the GtkListBoxRow padding
2899
min-height: 32px;
2900
margin: -1px 0; // Remove unknown margins
2901
padding: 0;
2902
// Using margins/padding directly in the SidebarRow
2904
// will make the animation of the new bookmark row jump
2905
> revealer { padding: 0 12px; }
2906
&:selected { color: $inverse_fg_color; }
2908
&:disabled { color: $disabled_fg_color; }
2910
image.sidebar-icon {
2912
opacity: $tertiary_opacity; // dim the device icons
2913
&:dir(ltr) { padding-right: 8px; }
2915
&:dir(rtl) { padding-left: 8px; }
2916
}
2917
label.sidebar-label {
2919
&:dir(ltr) { padding-right: 2px; }
2920
&:dir(rtl) { padding-left: 2px; }
2921
}
2922
@at-root button.sidebar-button {
2924
@extend %simple_flat_button;
2925
@extend %small_button;
2927
row:selected & {
2929
}
2930
}
2931
&.sidebar-placeholder-row {
2933
min-height: 2px;
2934
padding: 0 8px;
2935
background-image: image($accent_color);
2936
background-clip: content-box;
2937
}
2938
&.sidebar-new-bookmark-row { color: $accent_color; }
2940
&:drop(active):not(:disabled) {
2942
box-shadow: inset 0 0 0 2px $accent_color;
2943
&:selected {
2945
// background-color: $accent_color;
2946
// color: $inverse_fg_color;
2947
}
2948
}
2949
}
2950
}
2951
placesview {
2953
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2954
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2956
// this selects the "connect to server" label
2958
> actionbar > revealer > box > label {
2959
padding-left: 8px;
2960
padding-right: 8px;
2961
}
2962
}
2963
/*********
2966
* Paned *
2967
*********/
2968
paned {
2969
> separator {
2970
min-width: 1px;
2971
min-height: 1px;
2972
-gtk-icon-source: none; // defeats the ugly default handle decoration
2973
border-style: none; // just to be sure
2974
background-color: transparent;
2975
// workaround, using background istead of a border since the border will get rendered twice (?)
2976
background-image: image($border_color);
2977
background-size: 1px 1px;
2978
background-clip: content-box; // avoids borders image being rendered twice (?)
2979
&.wide {
2981
min-width: 6px;
2982
min-height: 6px;
2983
background-color: $bg_color;
2984
background-image: image($border_color), image($border_color);
2985
background-size: 1px 1px, 1px 1px;
2986
}
2987
}
2988
&.horizontal > separator {
2990
background-repeat: repeat-y;
2991
&:dir(ltr) {
2993
margin: 0 -8px 0 0;
2994
padding: 0 8px 0 0;
2995
background-position: left;
2996
}
2997
&:dir(rtl) {
2999
margin: 0 0 0 -8px;
3000
padding: 0 0 0 8px;
3001
background-position: right;
3002
}
3003
&.wide {
3005
margin: 0;
3006
padding: 0;
3007
background-repeat: repeat-y, repeat-y;
3008
background-position: left, right;
3009
}
3010
}
3011
&.vertical > separator {
3013
margin: 0 0 -8px 0;
3014
padding: 0 0 8px 0;
3015
background-repeat: repeat-x;
3016
background-position: top;
3017
&.wide {
3019
margin: 0;
3020
padding: 0;
3021
background-repeat: repeat-x, repeat-x;
3022
background-position: bottom, top;
3023
}
3024
}
3025
}
3026
/**************
3029
* GtkInfoBar *
3030
**************/
3031
infobar {
3032
border-style: none;
3033
&.info { background-color: $info_bg_color; }
3035
&.question { background-color: $question_bg_color; }
3037
&.warning { background-color: $warning_bg_color; }
3039
&.error { background-color: $error_bg_color; }
3041
&.info,
3043
&.question,
3044
&.warning,
3045
&.error {
3046
> label, & { color: $inverse_fg_color; }
3047
button { @extend %button_selected; }
3049
selection {}
3051
*:link { @extend %link_selected; }
3053
}
3054
}
3055
/************
3058
* Tooltips *
3059
************/
3060
tooltip {
3061
&.background {
3062
// background-color needs to be set this way otherwise it gets drawn twice
3063
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3064
box-shadow: inset 0 1px $highlight_color;
3065
background-color: scale-alpha($base_color, $higher_opacity);
3066
}
3067
// @extend %osd;
3069
// padding: 4px; /* not working */
3071
border-radius: 2px;
3072
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3073
&:not(.csd):not(.unity-csd) {
3075
border: 1px solid $border_color;
3076
border-radius: 2px + 1px;
3077
background-clip: $extra_background_clip;
3078
}
3079
// FIXME: we need a border or tooltips vanish on black background.
3081
decoration { background-color: transparent; }
3082
label {
3084
// tooltip label already seems to have 6px margins
3085
min-height: 32px - 6px * 2;
3086
padding: 0 8px - 6px;
3087
}
3088
* {
3090
// workaround for Eclipse.
3091
// do not include any declaration here.
3092
// padding: 0;
3093
// background-color: transparent;
3094
// color: inherit;
3095
}
3096
}
3097
/*****************
3100
* Color Chooser *
3101
*****************/
3102
colorswatch {
3103
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3104
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3105
// applied to the overlay box.
3106
// base color corners rounding
3108
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3109
// sports a bigger radius.
3110
// nth-child is needed by the custom color strip.
3111
&.top {
3113
border-top-left-radius: $material_radius + 0.5px;
3114
border-top-right-radius: $material_radius + 0.5px;
3115
overlay {
3117
border-top-left-radius: $material_radius;
3118
border-top-right-radius: $material_radius;
3119
}
3120
}
3121
&.bottom {
3123
border-bottom-left-radius: $material_radius + 0.5px;
3124
border-bottom-right-radius: $material_radius + 0.5px;
3125
overlay {
3127
border-bottom-left-radius: $material_radius;
3128
border-bottom-right-radius: $material_radius;
3129
}
3130
}
3131
&.left,
3133
&:first-child:not(.top) {
3134
border-top-left-radius: $material_radius + 0.5px;
3135
border-bottom-left-radius: $material_radius + 0.5px;
3136
overlay {
3138
border-top-left-radius: $material_radius;
3139
border-bottom-left-radius: $material_radius;
3140
}
3141
}
3142
&.right,
3144
&:last-child:not(.bottom) {
3145
border-top-right-radius: $material_radius + 0.5px;
3146
border-bottom-right-radius: $material_radius + 0.5px;
3147
overlay {
3149
border-top-right-radius: $material_radius;
3150
border-bottom-right-radius: $material_radius;
3151
}
3152
}
3153
&.dark overlay { color: $light_fg_color; }
3155
&.light overlay { color: $dark_fg_color; }
3157
&.dark { color: $light_fg_color; } // for focus ring
3159
&.light { color: $dark_fg_color; } // for focus ring
3161
&:drop(active) {
3163
box-shadow: none;
3164
&.light overlay {
3166
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3167
}
3168
&.dark overlay {
3170
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3171
}
3172
}
3173
overlay {
3175
transition: $shadow_transition;
3176
box-shadow: $shadow_1;
3177
&:hover { box-shadow: $shadow_2; }
3179
}
3180
&#add-color-button {
3182
border-radius: $material_radius $material_radius 0 0;
3183
color: $light_fg_color; // for focus ring
3184
&:only-child { border-radius: $material_radius; }
3186
overlay {
3188
background-image: linear-gradient(to right,
3189
$error_bg_color 25%,
3190
$warning_bg_color 25%, $warning_bg_color 50%,
3191
$info_bg_color 50%, $info_bg_color 75%,
3192
$question_bg_color 75%);
3193
color: $light_fg_color;
3194
}
3195
}
3196
&:disabled {
3198
opacity: $disabled_opacity;
3199
overlay { box-shadow: none; }
3201
}
3202
row:selected & {
3204
}
3205
&#editor-color-sample {
3207
border-radius: $material_radius + 0.5px;
3208
overlay { border-radius: $material_radius; }
3210
// overlay:hover { box-shadow: $shadow_1; }
3212
}
3213
}
3214
// colorscale popup
3216
colorchooser .popover.osd {
3217
transition: $shadow_transition;
3218
border-radius: 2px;
3219
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3220
background-color: $base_color;
3221
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3223
spinbutton:not(.vertical) { @extend %entry.flat; }
3225
}
3226
/********
3229
* Misc *
3230
********/
3231
// content view (grid/list)
3232
.content-view {
3233
background-color: $bg_color;
3234
// &:hover { -gtk-icon-effect: highlight; }
3236
rubberband, .rubberband { @extend rubberband; }
3238
}
3239
.scale-popup {
3241
.osd & { @extend %osd; }
3242
.osd & button.flat { // FIXME: quick hack, redo properly
3244
}
3245
button { // +/- buttons on GtkVolumeButton popup
3247
}
3248
}
3249
/**********************
3252
* Window Decorations *
3253
**********************/
3254
decoration {
3255
transition: $shadow_transition;
3256
border-radius: 2px 2px 0 0;
3257
box-shadow: $shadow_4, 0 16px 16px transparent;
3258
// FIXME rationalize shadows
3260
// this is used for the resize cursor area
3262
margin: 8px;
3263
&:backdrop {
3265
// the transparent shadow here is to enforce that the shadow extents don't
3266
// change when we go to backdrop, to prevent jumping windows.
3267
// The biggest shadow should be in the same order then in the active state
3268
// or the jumping will happen during the transition.
3269
box-shadow: $shadow_2, 0 16px 16px transparent;
3270
}
3271
.maximized &,
3273
.fullscreen &,
3274
.tiled & { border-radius: 0; }
3275
.popup & { box-shadow: none; }
3277
// server-side decorations as used by mutter
3279
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3280
.csd.popup & {
3282
border-radius: 2px;
3283
box-shadow: $shadow_2;
3284
}
3285
tooltip.csd & {
3287
border-radius: 2px;
3288
box-shadow: $shadow_2;
3289
}
3290
messagedialog.csd & {
3292
border-radius: 2px;
3293
// box-shadow: $shadow_4, 0 16px 16px transparent;
3294
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3296
}
3297
.solid-csd & {
3299
margin: 0;
3300
// padding: 4px;
3301
border-radius: 0;
3302
box-shadow: none;
3303
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3304
background-color: $titlebar_bg_color;
3305
}
3306
}
3307
// Window Close button
3309
button.titlebutton {
3310
// @extend %simple_flat_button;
3311
@extend %circular_button;
3313
.selection-mode & {
3315
}
3316
}
3317
// catch all extend :)
3320
%selected_items {
3322
background-color: $primary_color;
3323
@at-root %nobg_selected_items, & {
3325
color: $inverse_fg_color;
3326
&:disabled { color: $disabled_inverse_fg_color; }
3328
}
3329
}
3330
.monospace { font-family: monospace; }
3332
/**********************
3335
* Touch Copy & Paste *
3336
**********************/
3337
// touch selection handlebars for the Popover.osd above
3338
cursor-handle {
3339
border-radius: $circular_radius;
3340
background-color: $accent_color;
3341
background-image: none;
3342
&.top:dir(ltr), &.bottom:dir(rtl) {
3344
padding-left: 6px;
3345
border-top-right-radius: 0;
3346
}
3347
&.bottom:dir(ltr), &.top:dir(rtl) {
3349
padding-right: 6px;
3350
border-top-left-radius: 0;
3351
}
3352
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3354
-GtkWidget-text-handle-width: 24;
3355
-GtkWidget-text-handle-height: 30;
3356
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3358
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3359
url('#{$_url}@2.png'));
3360
}
3361
}
3362
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3364
// shortcut window keys
3366
.keycap {
3367
min-width: 28px - 8px * 2;
3368
min-height: 28px - 2px;
3369
margin-top: 2px;
3370
padding-bottom: 2px;
3371
padding-left: 8px;
3372
padding-right: 8px;
3373
border: solid 1px $border_color;
3375
border-radius: 2px + 1px;
3376
box-shadow: inset 0 -2px $border_color;
3377
background-color: $base_color;
3378
color: $fg_color;
3379
font-size: smaller;
3380
}
3381
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3383
transition: $longer_transition;
3384
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3385
caret-color: $accent_color;
3386
}
3387
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3389
stackswitcher button.circular,
3391
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3392
min-width: $medium_size;
3393
min-height: $medium_size;
3394
padding: 0;
3395
}
3396