ASCII text
1
$asset_suffix: if($variant=='dark', '-dark', '');
2
$extra_background_clip: if($variant == 'light', padding-box, border-box);
3
$small_size: if($laptop == 'true', 20px, 24px);
5
$medium_size: if($laptop == 'true', 32px, 36px);
6
$large_size: if($laptop == 'true', 44px, 48px);
7
$container_padding: 6px;
9
$bar_size: 4px;
11
$menuitem_size: 28px;
12
$md_radius: 2px;
14
$circular_radius: 100px;
15
$shorter_duration: 0.2s;
17
$longer_duration: 0.3s;
18
$standard_curve: cubic-bezier(0.4, 0.0, 0.2, 1);
20
$deceleration_curve: cubic-bezier(0.0, 0.0, 0.2, 1);
21
$acceleration_curve: cubic-bezier(0.4, 0.0, 1, 1);
22
$sharp_curve: cubic-bezier(0.4, 0.0, 0.6, 1);
23
$shorter_transition: all $shorter_duration $deceleration_curve;
25
$longer_transition: all $longer_duration $deceleration_curve;
26
$shadow_transition: box-shadow $shorter_duration $deceleration_curve;
27
* {
29
padding: 0;
30
background-clip: padding-box;
31
-GtkToolButton-icon-spacing: 4;
33
-GtkTextView-error-underline-color: $error_color;
34
// The size for scrollbars. The slider is 2px smaller, but we keep it
36
// up so that the whole area is sensitive to button presses for the
37
// slider. The stepper button is larger in both directions, the slider
38
// only in the width
39
-GtkScrolledWindow-scrollbar-spacing: 0;
41
-GtkToolItemGroup-expander-size: 11;
43
-GtkWidget-text-handle-width: 24;
45
-GtkWidget-text-handle-height: 24;
46
-GtkDialog-button-spacing: 4;
48
-GtkDialog-action-area-border: 0;
49
// We use the outline properties to signal the focus properties
51
// to the adwaita engine: using real CSS properties is faster,
52
// and we don't use any outlines for now.
53
outline-style: solid;
55
outline-width: 2px;
56
outline-color: $track_color;
57
outline-offset: -4px;
58
-gtk-outline-radius: 2px;
59
-gtk-secondary-caret-color: $primary_color;
61
}
62
/***************
65
* Base States *
66
***************/
67
.background {
68
background-color: $bg_color;
69
color: $fg_color;
70
}
71
/*
73
These wildcard seems unavoidable, need to investigate.
74
Wildcards are bad and troublesome, use them with care,
75
or better, just don't.
76
Everytime a wildcard is used a kitten dies, painfully.
77
*/
78
*:disabled { -gtk-icon-effect: dim; }
80
.gtkstyle-fallback {
82
background-color: $bg_color;
83
color: $fg_color;
84
&:hover {
86
background-color: darken($bg_color, 5%);
87
color: $fg_color;
88
}
89
&:active {
91
background-color: darken($bg_color, 10%);
92
color: $fg_color;
93
}
94
&:disabled {
96
background-color: $bg_color;
97
color: $disabled_fg_color;
98
}
99
&:selected {
101
background-color: $primary_color;
102
color: $inversed_fg_color;
103
}
104
}
105
.view,
107
%view {
108
@extend row.activatable;
109
background-color: $base_color;
111
color: $fg_color;
112
&:hover, &:active, &:selected { border-radius: 2px; }
114
&:disabled {
116
// background-color: $alt_base_color;
117
color: $disabled_fg_color;
118
}
119
&:selected { @extend %selected_items; }
121
}
122
.view,
124
textview {
125
text {
126
// @extend %view;
127
background-color: $base_color;
129
color: $fg_color;
130
&:disabled {
132
// background-color: $alt_base_color;
133
color: $disabled_fg_color;
134
}
135
selection { @extend %selected_items; }
137
}
138
}
139
textview border {
141
background-color: $alt_base_color;
142
color: $tertiary_fg_color;
143
}
144
iconview { @extend .view; }
146
.rubberband,
148
rubberband {
149
border: 1px solid $alt_primary_color;
150
background-color: scale-alpha($alt_primary_color, $lower_opacity);
151
}
152
flowbox {
154
rubberband { @extend rubberband; }
155
flowboxchild {
157
outline-offset: -2px;
158
padding: 4px;
159
border-radius: 2px;
160
&:selected { @extend %selected_items; }
162
}
163
}
164
label {
166
caret-color: currentColor; // this shouldn't be needed.
167
&.separator {
169
@extend .dim-label;
170
color: $fg_color;
172
}
173
row:selected &,
175
&:selected { @extend %nobg_selected_items; }
176
selection {
178
background-color: $primary_color;
179
color: $inversed_fg_color;
180
}
181
&:disabled {
183
color: $disabled_fg_color;
184
selection { @extend %selected_items:disabled; }
186
}
187
}
188
.dim-label { opacity: $hint_opacity; }
190
assistant {
192
.sidebar {
193
padding: 4px 0;
194
// background-color: $base_color;
195
// border-top: 1px solid $borders_color;
196
}
197
// &.csd .sidebar { border-top-style: none; }
199
.sidebar label {
201
min-height: $medium_size;
202
padding: 0 12px;
203
color: $tertiary_fg_color;
204
font-weight: 500;
205
&.highlight { color: $fg_color; }
207
}
208
}
209
%osd, .osd { opacity: $higher_opacity; }
211
/*********************
214
* Spinner Animation *
215
*********************/
216
@keyframes spin {
217
to { -gtk-icon-transform: rotate(1turn); }
218
}
219
@keyframes spin_colors {
221
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
222
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
223
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
224
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
225
}
226
spinner {
228
background: none;
229
opacity: 0; // non spinning spinner makes no sense
230
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
231
&:checked {
233
opacity: 1;
234
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
235
&:disabled { opacity: $disabled_opacity; }
237
}
238
}
239
/****************
242
* Text Entries *
243
****************/
244
%entry,
245
entry {
246
%entry_basic, & {
247
min-height: $medium_size;
248
padding: 0 8px;
249
border-radius: 2px;
250
@include entry(normal);
252
&:focus { @include entry(focus); }
254
&:disabled { @include entry(disabled); }
256
&.flat {
258
border-radius: 0;
259
@include entry(flat-normal);
261
&:focus { @include entry(flat-focus); }
263
&:disabled { @include entry(flat-disabled); }
265
}
266
image { // icons inside the entry
268
// @extend %simple_flat_button;
269
min-height: $small_size;
271
min-width: $small_size;
272
-gtk-outline-radius: $circular_radius;
273
border-radius: $circular_radius;
274
color: gtkalpha(currentColor, $enabled_opacity);
275
&:hover, &:active { color: currentColor; }
277
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
279
&.left { margin-left: -2px; margin-right: 2px; }
281
&.right { margin-left: 2px; margin-right: -2px; }
283
}
284
undershoot {
286
&.left { @include undershoot(left); }
287
&.right { @include undershoot(right); }
289
}
290
selection { @extend %selected_items; }
292
// entry error and warning style
294
@each $e_type, $e_color in (error, $error_color),
295
(warning, $warning_color) {
296
&.#{$e_type} {
297
@include entry(normal, $e_color);
298
&:focus { @include entry(focus, $e_color); }
300
&:disabled { @include entry(disabled, $e_color); }
302
&.flat {
304
@include entry(flat-normal, $e_color);
305
&:focus { @include entry(flat-focus, $e_color); }
307
&:disabled { @include entry(flat-disabled, $e_color); }
309
}
310
}
311
}
312
&:drop(active) {
314
// box-shadow: inset 0 0 0 2px $accent_color;
315
}
316
.osd & {
318
}
319
}
320
progress {
322
margin: 2px (2px - 8px);
323
border-style: none none solid;
324
border-width: 2px;
325
border-color: $primary_color;
326
// border-radius: 0;
327
// box-shadow: none;
328
background-color: transparent;
329
// background-image: none;
330
}
331
// linked entries
333
.linked:not(.vertical) > & { @extend %linked; }
334
// Vertically linked entries
336
.linked.vertical > & { @extend %linked_vertical; }
337
.linked:not(.vertical) > &.flat,
339
.linked.vertical > &.flat { border-radius: 0; }
340
}
341
treeview entry {
343
&.flat, & {
344
min-height: 0;
345
padding: 2px;
346
border-radius: 0;
347
background-color: $base_color;
348
&, &:focus {
350
border-image: none;
351
box-shadow: none;
352
}
353
}
354
}
355
/***********
358
* Buttons *
359
***********/
360
// stuff for .needs-attention
361
@keyframes needs_attention {
362
from {
363
background-image: -gtk-gradient(radial,
364
center center, 0,
365
center center, 0.001,
366
to($accent_color),
367
to(transparent));
368
}
369
to {
371
background-image: -gtk-gradient(radial,
372
center center, 0,
373
center center, 0.5,
374
to($accent_color),
375
to(transparent));
376
}
377
}
378
%button,
380
button {
381
@at-root %button_basic, & {
382
min-height: 24px;
383
min-width: 16px;
384
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
385
border-radius: 2px;
386
font-weight: 500;
387
@include button(normal);
389
&:hover { @include button(hover); }
391
&:active { @include button(active); }
393
&:disabled { @include button(disabled); }
395
&:checked { @include button(checked); }
397
&:checked:disabled { @include button(checked-disabled); }
399
@at-root %flat_button, &.flat {
401
@at-root %simple_flat_button, & {
402
@include button(flat-normal);
403
&:hover { @include button(flat-hover); }
405
&:active { @include button(flat-active); }
407
&:disabled { @include button(flat-disabled); }
409
}
410
&:checked { @include button(flat-checked); }
412
&:checked:disabled { @include button(flat-checked-disabled); }
414
}
415
&.text-button {
417
padding-left: 16px;
418
padding-right: 16px;
419
}
420
&.image-button {
422
min-width: 24px;
423
padding: ($medium_size - 24px) / 2;
424
-gtk-outline-radius: $circular_radius;
425
border-radius: $circular_radius;
426
}
427
&.text-button.image-button {
429
-gtk-outline-radius: 2px;
430
border-radius: 2px;
431
label {
433
&:first-child {
434
margin-left: 16px - ($medium_size - 24px) / 2;
435
margin-right: 2px;
436
}
437
&:last-child {
439
margin-left: 2px;
440
margin-right: 16px - ($medium_size - 24px) / 2;
441
}
442
}
443
image:not(:only-child) {
445
&:first-child { margin-left: (24px - 16px) / 2; }
446
&:last-child { margin-right: (24px - 16px) / 2; }
448
}
449
}
450
.linked > & { @extend %linked; }
452
.linked.vertical > & { @extend %linked_vertical; }
454
.linked > &.flat,
456
.linked.vertical > &.flat {
457
border-radius: 2px;
458
&.image-button {
460
-gtk-outline-radius: $circular_radius;
461
border-radius: $circular_radius;
462
}
463
&.text-button.image-button {
465
-gtk-outline-radius: 2px;
466
border-radius: 2px;
467
}
468
}
469
&:drop(active) {
471
// box-shadow: inset 0 0 0 2px $accent_color;
472
}
473
}
474
@at-root %button_selected, row:selected & {
476
&:disabled { color: $disabled_secondary_inversed_fg_color; }
477
}
478
// big standalone buttons like in Documents pager
480
&.osd {
481
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
482
&.image-button { padding: ($large_size - 24px) / 2; }
484
&:disabled { opacity: 0; }
486
}
487
//overlay / OSD style
489
@at-root %osd_button,
490
.osd & {
491
}
492
// Suggested and Destructive Action buttons
494
@each $b_type, $b_color in (suggested-action, $suggested_color),
495
(destructive-action, $destructive_color) {
496
&.#{$b_type} {
497
background-color: $b_color;
498
color: $inversed_fg_color;
499
// @include button(normal, $b_color, $inversed_fg_color);
501
// &:hover { @include button(hover, $b_color, $inversed_fg_color); }
503
// &:active, &:checked { @include button(active, $b_color, $inversed_fg_color); }
505
&:disabled { @include button(disabled, $b_color, $inversed_fg_color); }
507
&:checked { background-color: mix($inversed_fg_color, $b_color, percentage($lower_opacity)); }
509
&.flat {
511
background-color: transparent;
512
color: $b_color;
513
// @include button(flat-normal, $b_color, $inversed_fg_color);
515
// &:hover { @include button(flat-hover, $b_color, $inversed_fg_color); }
517
// &:active, &:checked { @include button(flat-active, $b_color, $inversed_fg_color); }
519
&:disabled { @include button(flat-disabled, $b_color, $inversed_fg_color); }
521
}
522
.osd & {
524
}
525
}
526
}
527
.stack-switcher > & {
529
// to position the needs attention dot, padding is added to the button
530
// child, a label needs just lateral padding while an icon needs vertical
531
// padding added too.
532
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
534
> label {
536
padding-left: 6px; // label padding
537
padding-right: 6px; //
538
}
539
> image {
541
padding-left: 6px; // image padding
542
padding-right: 6px; //
543
padding-top: 3px; //
544
padding-bottom: 3px; //
545
}
546
&.text-button {
548
// compensate text-button paddings
549
padding-left: 16px - 6px;
550
padding-right: 16px - 6px;
551
}
552
&.image-button {
554
// we want image buttons to have a 1:1 aspect ratio, so compensation
555
// of the padding added to the GtkImage is needed
556
padding-left: ($medium_size - 16px) / 2 - 6px;
557
padding-right: ($medium_size - 16px) / 2 - 6px;
558
}
559
&.needs-attention {
561
> label,
562
> image { @extend %needs_attention; }
563
&:checked {
565
> label,
566
> image {
567
animation: none;
568
background-image: none;
569
}
570
}
571
}
572
}
573
// hide separators
575
separator {
576
min-width: 0;
577
min-height: 0;
578
background: transparent;
579
}
580
// &.font,
582
// &.file { separator { background-color: transparent; }}
583
// &.font { > box > box > label { font-weight: bold; }}
585
// inline-toolbar buttons
587
.inline-toolbar & {
588
// @extend %button_basic.flat;
589
&:not(.text-button) { @extend %circular_button; }
591
}
592
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
594
}
595
%needs_attention {
597
animation: needs_attention $longer_duration $deceleration_curve forwards;
598
background-repeat: no-repeat;
599
background-position: right 3px;
600
background-size: 6px 6px;
601
&:dir(rtl) { background-position: left 3px; }
603
}
604
// all the following is for the +|- buttons on inline toolbars, that way
606
// should really be deprecated...
607
.inline-toolbar toolbutton > button { // redefining the button look is
608
// needed since those are flat...
609
}
610
// More inline toolbar buttons
612
toolbar.inline-toolbar toolbutton {
613
// > button.flat { @extend %linked_middle; }
614
// &:first-child > button.flat { @extend %linked:first-child; }
616
// &:last-child > button.flat { @extend %linked:last-child; }
618
// &:only-child > button.flat { @extend %linked:only-child; }
620
}
621
%linked_middle {
623
-gtk-outline-radius: 2px;
624
border-radius: 0;
625
}
626
%linked {
628
@extend %linked_middle;
629
&:first-child {
631
border-top-left-radius: 2px;
632
border-bottom-left-radius: 2px;
633
}
634
&:last-child {
636
border-top-right-radius: 2px;
637
border-bottom-right-radius: 2px;
638
}
639
&:only-child {
641
border-radius: 2px;
642
}
643
}
644
%linked_vertical_middle {
646
-gtk-outline-radius: 2px;
647
border-radius: 0;
648
}
649
%linked_vertical{
651
@extend %linked_vertical_middle;
652
&:first-child {
654
border-top-left-radius: 2px;
655
border-top-right-radius: 2px;
656
}
657
&:last-child {
659
border-bottom-left-radius: 2px;
660
border-bottom-right-radius: 2px;
661
}
662
&:only-child {
664
border-radius: 2px;
665
}
666
}
667
/* menu buttons */
669
modelbutton.flat,
670
.menuitem.button.flat {
671
min-height: $menuitem_size;
672
padding: 0 8px;
673
border-radius: 2px;
674
color: inherit;
675
@extend %simple_flat_button;
677
&:selected { @extend %selected_items; }
679
check,
681
radio {
682
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
683
&, &:hover { background-image: none; }
685
&:active { animation: none; }
687
&:last-child { margin-left: -8px; margin-right: -16px; }
689
&:first-child { margin-left: -16px; margin-right: -8px; }
691
}
692
check:not(:indeterminate):checked { @extend %check_checked; }
694
// radio:not(:indeterminate):checked { @extend %radio_checked; }
696
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
698
}
699
modelbutton.flat arrow {
701
background: none;
702
&:hover { background: none; }
704
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
706
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
708
}
709
button.color {
711
min-height: $small_size;
712
min-width: $small_size;
713
padding: $container_padding;
714
colorswatch:only-child {
716
// &, overlay { border-radius: 0; }
717
}
718
}
719
/*********
722
* Links *
723
*********/
724
*:link {
725
&, &:hover, &:active { color: $link_color; }
726
&:visited {
728
&, &:hover, &:active { color: $link_visited_color; }
729
}
730
@at-root %link_selected,
732
&:selected,
733
*:selected & { color: $inversed_fg_color; }
734
}
735
button:link,
737
button:visited {
738
@extend *:link;
739
> label { text-decoration-line: underline; }
741
}
742
/*****************
744
* GtkSpinButton *
745
*****************/
746
spinbutton {
747
&:not(.vertical) {
748
// in this horizontal configuration, the whole spinbutton
749
// behaves as the entry, so we extend the entry styling
750
// and nuke the style on the internal entry
751
@extend %entry;
752
padding: 0;
754
%spinbutton_entry,
756
entry {
757
min-width: $large_size - 8px * 2;
758
// reset all the other props since the spinbutton node is styled here
759
margin: 0;
760
border-image: none;
761
border-radius: 0;
762
box-shadow: none;
763
background-color: transparent;
764
}
765
button {
767
// margin: $container_padding;
768
border: solid $container_padding transparent;
769
@extend %simple_flat_button;
771
@extend %small_button;
773
&.up:dir(ltr),
775
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
776
&.up:dir(rtl),
778
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
779
}
780
}
781
// OSD horizontal
783
.osd &:not(.vertical) {
784
button {
785
}
786
}
787
// Vertical
789
&.vertical {
790
// in the vertical configuration, we treat the spinbutton
791
// as a box, and tweak the style of the entry in the middle
792
// so that it's linked
793
// FIXME: this should not be set at all, but otherwise it gets the wrong
795
// color
796
&:disabled { color: $disabled_fg_color; }
797
&:drop(active) {
799
box-shadow: none;
800
}
801
entry {
803
min-height: $medium_size;
804
min-width: $large_size;
805
padding: 0;
806
}
807
button {
809
min-height: $medium_size;
810
min-width: $large_size;
811
padding: 0;
812
@extend %simple_flat_button;
814
&.up { border-radius: 2px 2px 0 0; }
816
&.down { border-radius: 0 0 2px 2px; }
818
}
819
}
820
// OSD vertical
822
.osd &.vertical button:first-child {
823
}
824
// Misc
826
treeview &:not(.vertical) {
827
min-height: 0;
828
border-style: none;
829
border-radius: 0;
830
entry {
832
min-height: 0;
833
padding: 1px 2px;
834
}
835
}
836
}
837
/**************
840
* ComboBoxes *
841
**************/
842
combobox {
843
arrow {
844
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
845
min-height: 16px;
846
min-width: 16px;
847
}
848
menu,
850
.menu,
851
.context-menu {
852
padding: 2px 0;
853
menuitem {
855
min-height: $medium_size;
856
padding: 0 ($medium_size - 16px) / 2;
857
}
858
}
859
&.linked {
861
button:nth-child(2) {
862
&:dir(ltr) { @extend %linked:last-child; }
863
&:dir(rtl) { @extend %linked:first-child; }
864
}
865
}
866
&:drop(active) { // FIXME: untested
868
box-shadow: none;
869
// button.combo { @extend %button_basic:drop(active); }
871
}
872
}
873
.linked > combobox > box > button.combo {
875
// the combo is a composite widget so the way we do button linking doesn't
876
// work, special case needed. See
877
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
878
&:dir(ltr),
880
&:dir(rtl) { @extend %linked_middle; } // specificity bump
881
}
882
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
884
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
885
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
886
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
888
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
889
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
890
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
891
/************
894
* Toolbars *
895
************/
896
toolbar {
897
-GtkWidget-window-dragging: true;
898
padding: $container_padding / 2;
899
background-color: $bg_color;
900
button { @extend %button_basic.flat; }
902
// on OSD
904
.osd & { background-color: transparent; }
905
// stand-alone OSD toolbars
907
&.osd {
908
transition: $shadow_transition;
909
padding: $container_padding;
910
border-radius: 2px;
911
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
912
background-color: $base_color;
913
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
915
&.left,
917
&.right,
918
&.top,
919
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
920
}
921
// toolbar separators
923
&.horizontal separator { margin: $container_padding / 2; }
924
&.vertical separator { margin: $container_padding / 2; }
925
&:not(.inline-toolbar):not(.osd) {
927
scale,
928
entry,
929
spinbutton,
930
button { margin: $container_padding / 2; }
931
.linked entry,
933
.linked spinbutton,
934
.linked button {
935
&:not(:first-child) { margin-left: 0; }
936
&:not(:last-child) { margin-right: 0; }
937
}
938
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
940
}
941
}
942
//searchbar, location-bar & inline-toolbar
944
.inline-toolbar {
945
padding: $container_padding;
946
border-style: solid;
947
border-width: 0 1px 1px;
948
border-color: $borders_color;
949
background-color: $alt_base_color;
950
}
951
searchbar,
953
.location-bar {
954
padding: $container_padding;
955
border-style: solid;
956
border-width: 0 0 1px;
957
border-color: $borders_color;
958
background-color: $bg_color;
959
background-clip: border-box;
960
}
961
/***************
964
* Header bars *
965
***************/
966
%titlebar,
967
headerbar {
968
transition: background-color $shorter_duration $deceleration_curve;
969
min-height: $large_size;
970
padding: 0 $container_padding;
971
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
972
background-color: $headerbar_color;
973
color: $inversed_fg_color;
974
&:backdrop {
976
color: $secondary_inversed_fg_color;
977
}
978
.title {
980
transition: $longer_transition;
981
padding: 0 12px;
982
font-weight: bold;
983
}
984
.subtitle {
986
transition: $longer_transition;
987
padding: 0 12px;
988
font-size: smaller;
989
@extend .dim-label;
991
}
992
button:not(.suggested-action):not(.destructive-action) {
994
@extend %button_basic.flat;
995
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
997
currentColor 0%,
998
transparent 0%)
999
0 0 0 / 0 0 0px;
1000
&:checked {
1002
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1003
currentColor 100%,
1004
transparent 0%)
1005
0 0 2 / 0 0 2px;
1006
&, &:disabled { background-color: transparent; }
1008
}
1009
}
1010
button.suggested-action, button.destructive-action {
1012
&:disabled {
1013
color: gtkalpha(currentColor, $disabled_opacity);
1014
> label { color: inherit; }
1016
}
1017
}
1018
&.selection-mode {
1020
transition: background-color 0 $longer_duration;
1021
animation: header_ripple_effect $longer_duration $deceleration_curve;
1022
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1023
background-color: $primary_color;
1024
color: $inversed_fg_color;
1025
&:backdrop {
1027
color: $secondary_inversed_fg_color;
1028
}
1029
.subtitle:link { @extend *:link:selected; }
1031
button:not(.suggested-action):not(.destructive-action) {
1033
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1034
currentColor 0%,
1035
transparent 0%)
1036
0 0 0 / 0 0 0px;
1037
color: currentColor;
1038
&:disabled {
1040
color: gtkalpha(currentColor, $disabled_opacity);
1041
> label { color: inherit; }
1043
}
1044
&:checked {
1046
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1047
currentColor 100%,
1048
transparent 0%)
1049
0 0 2 / 0 0 2px;
1050
color: currentColor;
1051
&:disabled {
1053
color: gtkalpha(currentColor, $disabled_opacity);
1054
> label { color: inherit; }
1056
}
1057
}
1058
}
1059
.selection-menu {
1061
padding-left: 16px;
1062
padding-right: 16px;
1063
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1065
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1067
}
1068
}
1069
.fullscreen &,
1071
.tiled &,
1072
.maximized & {
1073
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1074
box-shadow: $z-depth-1;
1075
}
1076
&.default-decoration {
1078
min-height: $small_size;
1079
padding: $container_padding;
1080
border-width: 0;
1081
button.titlebutton {
1083
min-height: $small_size;
1084
min-width: $small_size;
1085
margin: 0;
1086
padding: 0;
1087
&:active { // add fallback
1089
background-image: radial-gradient(circle farthest-corner at center,
1090
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1091
transparent 0%),
1092
image(gtkalpha(currentColor, $lower_opacity / 2));
1093
}
1094
}
1095
}
1096
.solid-csd & {
1098
&:dir(rtl), &:dir(ltr) { // specificity bump
1099
margin-left: -2px;
1100
margin-right: -2px;
1101
margin-top: -2px;
1102
// border-radius: 0;
1103
box-shadow: inset 0 1px $secondary_highlight_color;
1104
}
1105
}
1106
}
1107
headerbar {
1109
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1110
entry,
1111
spinbutton,
1112
// separator,
1113
button {
1114
margin-top: $container_padding;
1115
margin-bottom: $container_padding;
1116
}
1117
switch {
1119
margin-top: $container_padding * 2;
1120
margin-bottom: $container_padding * 2;
1121
}
1122
}
1123
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1125
border-top-left-radius: 2px;
1126
border-top-right-radius: 2px;
1127
}
1128
headerbar {
1130
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1131
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1132
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1134
}
1135
.titlebar:not(headerbar) {
1137
window.csd > & {
1138
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1139
padding: 0;
1140
background-color: transparent;
1141
background-image: none;
1142
border-style: none;
1143
box-shadow: none;
1144
}
1145
> separator {
1147
background-color: $headerbar_color;
1148
background-image: image($borders_color);
1149
}
1150
@extend %titlebar;
1152
}
1153
/************
1156
* Pathbars *
1157
************/
1158
%pathbar_button,
1159
.path-bar button {
1160
&.text-button, &.image-button, & {
1161
padding-left: 6px;
1162
padding-right: 6px;
1163
}
1164
&.text-button.image-button, & {
1166
// label:last-child { padding-left: 2px; padding-right: 8px; }
1167
// label:first-child { padding-left: 8px; padding-right: 2px; }
1168
}
1169
image {
1171
padding-left: ($medium_size - 16px) / 2 - 6px;
1172
padding-right: ($medium_size - 16px) / 2 - 6px;
1173
}
1174
&.slider-button {
1176
padding-left: 0;
1177
padding-right: 0;
1178
}
1179
:not(headerbar) & {
1181
@extend %flat_button;
1182
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1184
$primary_color 0%,
1185
transparent 0%)
1186
0 0 0 / 0 0 0px;
1187
border-radius: 2px;
1188
&:checked {
1190
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1191
$primary_color 100%,
1192
transparent 0%)
1193
0 0 2 / 0 0 2px;
1194
&, &:disabled { background-color: transparent; }
1196
}
1197
}
1198
}
1199
/**************
1202
* Tree Views *
1203
**************/
1204
treeview.view {
1205
@at-root * {
1206
-GtkTreeView-horizontal-separator: 4;
1207
-GtkTreeView-grid-line-width: 1;
1208
-GtkTreeView-grid-line-pattern: '';
1209
-GtkTreeView-tree-line-width: 1;
1210
-GtkTreeView-tree-line-pattern: '';
1211
-GtkTreeView-expander-size: 16;
1212
}
1213
border-left-color: $track_color; // this is actually the tree lines color,
1215
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1216
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1218
&:hover, &:active, &:selected { border-radius: 0; }
1220
&.separator {
1222
min-height: 1px + 2px * 2;
1223
color: $borders_color;
1224
}
1225
&:drop(active) {
1227
border-style: solid none;
1228
border-width: 1px;
1229
border-color: $accent_color;
1230
&.after { border-top-style: none; }
1232
&.before { border-bottom-style: none; }
1234
}
1235
&.expander {
1237
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1238
-gtk-icon-transform: rotate(-90deg);
1239
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1241
&:checked { -gtk-icon-transform: unset; }
1243
color: $secondary_fg_color;
1245
&:hover, &:active { color: $fg_color; }
1247
&:disabled { color: $disabled_secondary_fg_color; }
1249
&:selected {
1251
color: $secondary_inversed_fg_color;
1252
&:hover, &:active { color: $inversed_fg_color; }
1254
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1256
}
1257
}
1258
&.progressbar { // progress bar in treeviews
1260
border-style: none none solid;
1261
border-width: $bar_size;
1262
border-color: $primary_color;
1263
box-shadow: none;
1264
background-color: transparent;
1265
&:selected { border-color: currentColor; }
1267
}
1268
&.trough { // progress bar trough in treeviews
1270
border-style: none none solid;
1271
border-width: $bar_size;
1272
border-color: scale-alpha($primary_color, $lower_opacity);
1273
box-shadow: none;
1274
background-color: transparent;
1275
&:selected { border-color: $track_color; }
1277
}
1278
header {
1280
button {
1281
@extend row.activatable;
1282
padding: 2px 6px;
1284
border-style: none solid solid none;
1285
border-width: 1px;
1286
border-color: $borders_color;
1287
border-radius: 0;
1288
background-clip: border-box;
1289
&, &:hover, &:active { box-shadow: none; }
1291
&, &:disabled { background-color: $base_color; }
1293
&:last-child { border-right-style: none; }
1295
}
1296
}
1297
button.dnd,
1299
header.button.dnd { // for treeview-like derive widgets
1300
padding: 2px 6px;
1301
border-style: none solid solid;
1302
border-width: 1px;
1303
border-color: $borders_color;
1304
border-radius: 0;
1305
box-shadow: none;
1306
background-color: $base_color;
1307
background-clip: border-box;
1308
color: $primary_color;
1309
}
1310
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1312
}
1313
/*********
1316
* Menus *
1317
*********/
1318
menubar,
1319
.menubar {
1320
-GtkWidget-window-dragging: true;
1321
padding: 0;
1322
// box-shadow: inset 0 -1px $borders_color;
1323
background-color: $headerbar_color;
1324
> menuitem {
1326
transition: $shorter_transition;
1327
min-height: 20px;
1328
padding: 4px 8px;
1329
color: $secondary_inversed_fg_color;
1330
&:hover { //Seems like it :hover even with keyboard focus
1332
transition: none;
1333
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1334
color: $inversed_fg_color;
1335
}
1336
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1338
}
1339
}
1340
menu,
1342
.menu,
1343
.context-menu {
1344
margin: 4px 0;
1345
padding: 4px 0;
1346
box-shadow: inset 0 1px $highlight_color;
1347
background-color: $base_color;
1348
border: 1px solid $borders_color; // adds borders in a non composited env
1349
.csd & {
1351
border: none; // axes borders in a composited env
1352
border-radius: 2px;
1353
}
1354
menuitem {
1356
transition: $shorter_transition;
1357
min-height: 20px;
1358
min-width: 40px;
1359
padding: 4px 8px;
1360
font: initial;
1361
text-shadow: none;
1362
&:hover {
1364
transition: none;
1365
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1366
}
1367
&:disabled { color: $disabled_fg_color; }
1369
// submenu indicators
1371
arrow {
1372
min-height: 16px;
1373
min-width: 16px;
1374
&:dir(ltr) {
1376
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1377
margin-left: 8px;
1378
}
1379
&:dir(rtl) {
1381
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1382
margin-right: 8px;
1383
}
1384
}
1385
// avoids labels color being overridden, see
1387
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1388
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1389
}
1390
// overflow arrows
1392
> arrow {
1393
min-height: 16px;
1394
min-width: 16px;
1395
padding: 4px;
1396
border-radius: 0;
1397
background-color: $base_color;
1398
color: $secondary_fg_color;
1399
&.top {
1401
margin-top: -4px;
1402
border-bottom: 1px solid $borders_color;
1403
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1404
}
1405
&.bottom {
1407
margin-bottom: -4px;
1408
border-top: 1px solid $borders_color;
1409
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1410
}
1411
&:hover {
1413
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1414
color: $fg_color;
1415
}
1416
&:disabled {
1418
border-color: transparent;
1419
background-color: transparent;
1420
color: transparent;
1421
// color: $disabled_secondary_fg_color;
1422
}
1423
}
1424
separator { margin: 4px 0; }
1426
}
1427
menuitem {
1429
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1430
check,
1432
radio {
1433
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1434
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1435
}
1436
}
1437
.csd.popup { border-radius: 2px; }
1439
/***************
1442
* Popovers *
1443
***************/
1444
popover.background {
1445
transition: $shadow_transition;
1446
padding: 0;
1447
box-shadow: $z-depth-2; // TODO: this should really have a highlight
1448
background-color: $lighter_bg_color;
1449
&:backdrop { box-shadow: $z-depth-1; }
1451
&, .csd & {
1453
border-style: solid;
1454
border-width: 1px;
1455
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1456
border-radius: 2px + 1px;
1457
}
1458
> list,
1460
> .view,
1461
> toolbar {
1462
border-style: none;
1463
box-shadow: none;
1464
background-color: transparent;
1465
}
1466
&, .csd & {
1468
&.touch-selection,
1469
&.magnifier,
1470
&.osd { @extend %osd; }
1471
}
1472
// entry { @extend %entry.flat; }
1474
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1476
button.model {
1478
@extend %simple_flat_button;
1479
min-height: 32px;
1481
padding: 0 8px;
1482
border-radius: 2px;
1483
&:checked {
1485
background-color: $primary_color;
1486
color: $inversed_fg_color;
1487
}
1488
}
1489
separator { margin: 4px 0; }
1491
list separator { margin: 0; }
1493
}
1494
/*************
1496
* Notebooks *
1497
*************/
1498
notebook {
1499
> header {
1500
border-width: 1px;
1501
border-color: $borders_color;
1502
background-color: $bg_color;
1503
background-clip: border-box;
1504
&.top {
1506
border-bottom-style: solid;
1507
> tabs {
1508
margin-bottom: -1px;
1509
> tab {
1510
&:hover { box-shadow: inset 0 -2px $track_color; }
1512
&:checked { box-shadow: inset 0 -2px $primary_color; }
1514
}
1515
}
1516
}
1517
&.bottom {
1519
border-top-style: solid;
1520
> tabs {
1521
margin-top: -1px;
1522
> tab {
1523
&:hover { box-shadow: inset 0 2px $track_color; }
1525
&:checked { box-shadow: inset 0 2px $primary_color; }
1527
}
1528
}
1529
}
1530
&.left {
1532
border-right-style: solid;
1533
> tabs {
1534
margin-right: -1px;
1535
> tab {
1536
&:hover { box-shadow: inset -2px 0 $track_color; }
1538
&:checked { box-shadow: inset -2px 0 $primary_color; }
1540
}
1541
}
1542
}
1543
&.right {
1545
border-left-style: solid;
1546
> tabs {
1547
margin-left: -1px;
1548
> tab {
1549
&:hover { box-shadow: inset 2px 0 $track_color; }
1551
&:checked { box-shadow: inset 2px 0 $primary_color; }
1553
}
1554
}
1555
}
1556
&.top > tabs > arrow {
1558
@extend %notebook_vert_arrows;
1559
border-top-style: none;
1561
}
1562
&.bottom > tabs > arrow {
1564
@extend %notebook_vert_arrows;
1565
border-bottom-style: none;
1567
}
1568
@at-root %notebook_vert_arrows {
1570
padding-left: 4px;
1571
padding-right: 4px;
1572
&.down {
1574
margin-left: -8px;
1575
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1576
}
1577
&.up {
1579
margin-right: -8px;
1580
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1581
}
1582
}
1583
&.left > tabs > arrow {
1585
@extend %notebook_horz_arrows;
1586
border-left-style: none;
1588
}
1589
&.right > tabs > arrow {
1591
@extend %notebook_horz_arrows;
1592
border-right-style: none;
1594
}
1595
@at-root %notebook_horz_arrows {
1597
padding-top: 4px;
1598
padding-bottom: 4px;
1599
&.down {
1601
margin-top: -8px;
1602
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1603
}
1604
&.up {
1606
margin-bottom: -8px;
1607
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1608
}
1609
}
1610
> tabs > arrow {
1612
@extend %simple_flat_button;
1613
min-height: 16px;
1615
min-width: 16px;
1616
border-radius: 0;
1617
}
1618
tab {
1620
transition: $longer_transition;
1621
min-height: $small_size;
1622
min-width: $small_size;
1623
padding: $container_padding 12px;
1624
outline-offset: -6px;
1626
border-width: 1px; // for reorderable tabs
1628
border-color: transparent; //
1629
color: $secondary_fg_color;
1631
font-weight: 500;
1632
&:hover {
1634
color: $fg_color;
1635
&.reorderable-page {
1637
border-color: $borders_color;
1638
background-color: $alt_base_color;
1639
}
1640
}
1641
&:disabled { color: $disabled_secondary_fg_color; }
1643
&:checked {
1645
animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve;
1646
color: $fg_color;
1647
&:disabled { color: $disabled_fg_color; }
1649
&.reorderable-page {
1651
border-color: $borders_color;
1652
background-color: $base_color;
1653
}
1654
}
1655
// colors the button like the label, overridden otherwise
1657
button.flat {
1658
@extend %small_button;
1659
&:last-child {
1661
margin-left: $container_padding;
1662
margin-right: $container_padding - 12px;
1663
}
1664
&:first-child {
1666
margin-left: $container_padding - 12px;
1667
margin-right: $container_padding;
1668
}
1669
}
1670
}
1671
&.top,
1673
&.bottom {
1674
tabs {
1675
padding-left: 8px;
1676
padding-right: 8px;
1677
&:not(:only-child) {
1679
&:first-child { margin-left: 0; }
1680
&:last-child { margin-right: 0; }
1681
}
1682
tab {
1684
&.reorderable-page {
1685
margin: 0 -1px;
1686
border-style: none solid;
1687
}
1688
}
1689
}
1690
}
1691
&.left,
1693
&.right {
1694
tabs {
1695
padding-top: 8px;
1696
padding-bottom: 8px;
1697
&:not(:only-child) {
1699
&:first-child { margin-top: 0; }
1700
&:last-child { margin-bottom: 0; }
1701
}
1702
tab {
1704
&.reorderable-page {
1705
margin: -1px 0;
1706
border-style: solid none;
1707
}
1708
}
1709
}
1710
}
1711
}
1712
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1714
background-color: $base_color;
1715
entry,
1717
spinbutton:not(.vertical) { @extend %entry.flat; }
1718
revealer entry,
1720
revealer spinbutton:not(.vertical) { @extend %entry; }
1721
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1723
}
1724
}
1725
/**************
1728
* Scrollbars *
1729
**************/
1730
scrollbar {
1731
$_slider_min_length: 24px;
1732
// disable steppers
1734
@at-root * {
1735
-GtkScrollbar-has-backward-stepper: false;
1736
-GtkScrollbar-has-forward-stepper: false;
1737
}
1738
transition: $longer_transition;
1740
background-color: $base_color;
1741
background-clip: $extra_background_clip;
1742
// scrollbar border
1744
&.top { border-bottom: 1px solid $borders_color; }
1745
&.bottom { border-top: 1px solid $borders_color; }
1746
&.left { border-right: 1px solid $borders_color; }
1747
&.right { border-left: 1px solid $borders_color; }
1748
// slider
1750
slider {
1751
transition: $shorter_transition, margin 0, border-width 0;
1752
min-width: 8px;
1753
min-height: 8px;
1754
border: 4px solid transparent;
1755
border-radius: $circular_radius;
1756
background-clip: padding-box;
1757
background-color: $tertiary_fg_color;
1758
&:hover { background-color: $secondary_fg_color; }
1760
&:active { background-color: $fg_color; }
1762
&:disabled { background-color: $disabled_tertiary_fg_color; }
1764
}
1765
&.fine-tune {
1767
slider {
1768
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1769
min-width: 4px;
1770
min-height: 4px;
1771
}
1772
&.horizontal slider { margin: 2px 0; }
1774
&.vertical slider { margin: 0 2px; }
1776
}
1777
&.overlay-indicator {
1779
&:not(.dragging):not(.hovering) {
1780
border-color: transparent;
1781
background-color: transparent;
1782
slider {
1784
min-width: 4px;
1785
min-height: 4px;
1786
margin: 4px - 1px;
1787
border: 1px solid scale-alpha($base_color, $lower_opacity);
1788
}
1789
button {
1791
min-width: 4px;
1792
min-height: 4px;
1793
margin: 4px - 1px;
1794
border: 1px solid scale-alpha($base_color, $lower_opacity);
1795
border-radius: $circular_radius;
1796
background-color: $tertiary_fg_color;
1797
background-clip: padding-box;
1798
-gtk-icon-source: none;
1799
&:disabled { background-color: $disabled_tertiary_fg_color; }
1801
}
1802
&.horizontal {
1804
slider { min-width: $_slider_min_length; }
1805
button { min-width: 8px; }
1807
}
1808
&.vertical {
1810
slider { min-height: $_slider_min_length; }
1811
button { min-height: 8px; }
1813
}
1814
}
1815
&.dragging,
1817
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1818
}
1819
&.horizontal slider { min-width: $_slider_min_length; }
1821
&.vertical slider { min-height: $_slider_min_length; }
1823
// button styling
1825
button {
1826
@extend %simple_flat_button;
1827
min-width: 16px;
1829
min-height: 16px;
1830
padding: 0;
1831
border-radius: 0;
1832
}
1833
// button icons
1835
&.vertical {
1836
button {
1837
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1838
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1840
}
1841
}
1842
&.horizontal {
1844
button {
1845
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1846
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1848
}
1849
}
1850
}
1851
/**********
1854
* Switch *
1855
**********/
1856
switch {
1857
transition: $longer_transition;
1858
margin: $container_padding 0;
1859
border: 4px solid transparent;
1860
border-radius: $circular_radius;
1861
background-color: $track_color;
1862
background-clip: padding-box;
1863
font-size: 0;
1864
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1866
&:checked {
1868
background-color: scale-alpha($accent_color, 0.5);
1869
&:disabled {
1871
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1872
color: $disabled_fg_color;
1873
}
1874
}
1875
slider {
1877
@include entry(normal);
1878
transition: $longer_transition, $shadow_transition, margin 0;
1880
min-width: $small_size;
1881
min-height: $small_size;
1882
margin: -4px 0 -4px -4px;
1883
-gtk-outline-radius: $circular_radius;
1884
border-radius: $circular_radius;
1885
}
1886
&:hover slider { @include entry(focus); }
1888
&:checked slider {
1890
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0 $longer_duration;
1891
animation: needs_attention $longer_duration $deceleration_curve;
1892
margin: -4px -4px -4px 0;
1893
background-color: $accent_color;
1894
color: $inversed_fg_color;
1895
}
1896
&:disabled slider { @include entry(disabled); }
1898
&:checked:disabled slider { animation: none; }
1900
row:selected & {
1902
}
1903
}
1904
/*************************
1907
* Check and Radio items *
1908
*************************/
1909
// draw regular check and radio items using our PNG assets
1910
// all assets are rendered from assets.svg. never add pngs directly
1911
//selection-mode
1913
@each $s,$as in ('','-selectionmode'),
1914
(':hover', '-hover-selectionmode'),
1915
(':checked', '-checked-selectionmode'),
1916
(':checked:hover', '-checked-hover-selectionmode') {
1917
.view.content-view.check#{$s}:not(list) {
1918
-gtk-icon-shadow: $z-depth-1;
1919
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1920
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1921
margin: 8px;
1922
background-color: transparent;
1923
}
1924
}
1925
checkbutton.text-button,
1927
radiobutton.text-button {
1928
// this is for a nice focus on check and radios text
1929
padding: 2px;
1930
outline-offset: 0;
1931
label:not(:only-child) { margin: 0 4px; }
1933
}
1934
check,
1936
radio {
1937
min-height: 24px;
1938
min-width: 24px;
1939
margin: -($large_size - 24px) / 2;
1940
padding: ($large_size - 24px) / 2;
1941
@extend %simple_flat_button;
1943
@extend %circular_button;
1945
&:checked, &:indeterminate { color: $accent_color; }
1947
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1949
// &:only-child { margin: -12px; }
1951
row &:not(:checked):not(:indeterminate) {
1953
color: gtkalpha(currentColor, $enabled_opacity);
1954
&:hover, &:active { color: currentColor; }
1956
&:disabled { color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity); }
1958
}
1959
menu menuitem & {
1961
transition: none;
1962
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1963
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1965
&, &:hover, &:disabled {
1967
background-image: none;
1968
// color: inherit;
1969
// animation: none;
1970
}
1971
}
1972
}
1973
%check,
1975
check {
1976
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1977
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1978
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1980
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1981
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1983
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1984
}
1985
$radio_indicator: 10 / ($large_size / 1px) / 2;
1987
$radio_radius_slice: #{$large_size / 2 / 1px};
1988
$radio_radius_width: #{$large_size / 2};
1989
%radio,
1991
radio {
1992
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1993
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1994
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1996
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1997
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1999
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
2000
border-image: -gtk-gradient(radial,
2002
center center, 0,
2003
center center, 0.001,
2004
to($accent_color),
2005
to(transparent))
2006
$radio_radius_slice / $radio_radius_width;
2007
&:checked {
2009
border-image: -gtk-gradient(radial,
2010
center center, 0,
2011
center center, $radio_indicator,
2012
to($accent_color),
2013
to(transparent))
2014
$radio_radius_slice / $radio_radius_width;
2015
}
2016
&:checked:disabled {
2018
border-image: -gtk-gradient(radial,
2019
center center, 0,
2020
center center, $radio_indicator,
2021
to(scale-alpha($accent_color, $disabled_opacity)),
2022
to(transparent))
2023
$radio_radius_slice / $radio_radius_width;
2024
}
2025
&:indeterminate:checked {
2027
border-image: -gtk-gradient(radial,
2028
center center, 0,
2029
center center, 0.001,
2030
to($accent_color),
2031
to(transparent))
2032
$radio_radius_slice / $radio_radius_width;
2033
}
2034
}
2035
// let's animate things
2037
@keyframes check_check {
2038
from { -gtk-icon-transform: rotate(90deg); }
2039
to { -gtk-icon-transform: unset; }
2040
}
2041
@keyframes check_radio { // FIXME: cannot animate border-image
2043
from {
2044
border-image: -gtk-gradient(radial,
2045
center center, 0,
2046
center center, 0.001,
2047
to($accent_color),
2048
to(transparent))
2049
$radio_radius_slice / $radio_radius_width;
2050
}
2051
to {
2053
border-image: -gtk-gradient(radial,
2054
center center, 0,
2055
center center, $radio_indicator,
2056
to($accent_color),
2057
to(transparent))
2058
$radio_radius_slice / $radio_radius_width;
2059
}
2060
}
2061
@keyframes check_indeterminate {
2063
from { -gtk-icon-transform: unset; }
2064
50% { -gtk-icon-transform: scale(0, 1); }
2065
to { -gtk-icon-transform: unset; }
2066
}
2067
%check_checked,
2069
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2070
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2072
// %radio_checked,
2074
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2075
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2077
%indeterminate_checked,
2079
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2080
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2082
// no animations in menus
2084
menu menuitem {
2085
check:not(:indeterminate):checked,
2086
radio:not(:indeterminate):checked,
2087
check:indeterminate:checked,
2088
radio:indeterminate:checked { animation: none; }
2089
}
2090
treeview.view check,
2092
treeview.view radio {
2093
padding: 0;
2094
&:hover {
2096
box-shadow: inset 0 0 0 10000px gtkalpha($fg_color, 0.05);
2097
background-image: none;
2098
&:disabled { box-shadow: none; }
2100
&:selected { box-shadow: inset 0 0 0 10000px gtkalpha($inversed_fg_color, 0.05); }
2102
}
2103
& {
2105
color: $secondary_fg_color;
2106
&:hover, &:active { color: $fg_color; }
2108
&:disabled { color: $disabled_secondary_fg_color; }
2110
&:checked, &:indeterminate { color: $accent_color; }
2112
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2114
}
2115
&:selected {
2117
color: $secondary_inversed_fg_color;
2118
&:hover, &:active { color: $inversed_fg_color; }
2120
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2122
&:checked, &:indeterminate { color: $accent_color; }
2124
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2126
}
2127
}
2128
treeview.view radio:checked {
2130
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2131
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2132
border-image: none;
2133
}
2134
/************
2137
* GtkScale *
2138
************/
2139
scale {
2140
// sizing
2141
$_marks_lenght: 8px;
2142
$_marks_distance: 8px;
2143
$slider_size: 24px;
2145
$marks_slider_size: 30px;
2146
$slider_margin: -($slider_size - $bar_size) / 2;
2148
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2149
$color_slider_margin: -($slider_size) / 2;
2151
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2152
min-height: $medium_size - $slider_size;
2154
min-width: $medium_size - $slider_size;
2155
padding: ($slider_size / 2);
2156
* { transition: $longer_transition; }
2158
// the slider is inside the trough, so to have make it bigger there's a negative margin
2160
slider {
2161
min-height: $slider_size;
2162
min-width: $slider_size;
2163
margin: $slider_margin;
2164
}
2165
// the backing bit
2167
trough {
2168
outline-offset: 2px;
2169
background-color: $track_color;
2170
&:disabled { color: $disabled_fg_color; }
2172
}
2173
// the colored part of the backing bit
2175
highlight {
2176
background-color: $accent_color;
2177
&:disabled { background-color: transparent; }
2179
}
2180
// this is another differently styled part of the backing bit, the most relevant use case is for example
2182
// in media player to indicate how much video stream as been cached
2183
fill {
2184
background-color: $track_color;
2185
&:disabled { background-color: transparent; }
2187
}
2188
slider {
2190
transition: all $shorter_duration $standard_curve;
2191
// border-radius: 100%;
2192
// background-color: $accent_color;
2193
background-repeat: no-repeat;
2194
background-position: center;
2195
@each $s,$as in ('',''),
2197
(':disabled','-insensitive') {
2198
&#{$s} {
2199
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2200
background-image: -gtk-scaled(url('#{$_url}.png'),
2201
url('#{$_url}@2.png'));
2202
}
2203
}
2204
background-size: calc(100% - 8px);
2206
&:hover { background-size: calc(100% - 4px); }
2208
&:active { background-size: calc(100% - 0px); }
2210
}
2211
// click-and-hold the slider to activate
2213
&.fine-tune {
2214
// to make the slider shrink in fine-tune mode
2215
slider { background-size: calc(100% - 12px); }
2216
}
2217
value { color: gtkalpha(currentColor, $hint_opacity); }
2219
marks {
2221
color: $track_color;
2222
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2224
(bottom, bottom, top),
2225
(top, left, right),
2226
(bottom, right, left) {
2227
&.#{$marks_class} {
2228
margin-#{$marks_margin}: $_marks_distance;
2229
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2230
}
2231
}
2232
}
2233
&.horizontal {
2235
indicator {
2236
min-height: $_marks_lenght;
2237
min-width: 1px;
2238
}
2239
}
2240
&.vertical {
2242
indicator {
2243
min-height: 1px;
2244
min-width: $_marks_lenght;
2245
}
2246
}
2247
// *WARNING* scale with marks madness following
2249
$suffix: if($variant == 'light', '', '-dark');
2250
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2252
('vertical', 'vert') {
2253
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2254
('scale-has-marks-below', ':first-child:not(:only-child)') {
2255
@each $state, $state_infix in ('', ''),
2256
(':disabled', '-insensitive') {
2257
&.#{$dir_class} {
2258
%#{$marks_infix}-#{$dir_infix},
2259
contents#{$nth_child} > trough > slider {
2260
&#{$state} {
2261
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2262
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2264
}
2265
@if $dir_class == 'horizontal' {
2267
min-height: $marks_slider_size;
2268
min-width: $slider_size;
2269
@if $marks_infix == 'scale-has-marks-above' {
2271
margin-top: $marks_slider_margin;
2272
background-position: center calc(100% - 4px);
2274
&:hover { background-position: center calc(100% - 2px); }
2276
&:active { background-position: center calc(100% - 0px); }
2278
}
2279
@if $marks_infix == 'scale-has-marks-below' {
2281
margin-bottom: $marks_slider_margin;
2282
background-position: center calc(4px);
2284
&:hover { background-position: center calc(2px); }
2286
&:active { background-position: center calc(0px); }
2288
}
2289
}
2290
@if $dir_class == 'vertical' {
2292
min-height: $slider_size;
2293
min-width: $marks_slider_size;
2294
@if $marks_infix == 'scale-has-marks-above' {
2296
margin-left: $marks_slider_margin;
2297
background-position: calc(4px) center;
2299
&:hover { background-position: calc(2px) center; }
2301
&:active { background-position: calc(0px) center; }
2303
}
2304
@if $marks_infix == 'scale-has-marks-below' {
2306
margin-right: $marks_slider_margin;
2307
background-position: calc(100% - 4px) center;
2309
&:hover { background-position: calc(100% - 2px) center; }
2311
&:active { background-position: calc(100% - 0px) center; }
2313
}
2314
}
2315
}
2316
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2318
&.fine-tune contents#{$nth_child} > trough > slider {
2319
// bigger negative margins to make the trough grow here as well
2320
@if $dir_class == 'horizontal' {
2322
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2323
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2325
}
2326
@if $dir_class == 'vertical' {
2328
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2329
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2331
}
2332
}
2333
}
2334
}
2335
}
2336
}
2337
&.color {
2339
min-height: 0;
2340
min-width: 0;
2341
&.horizontal {
2343
padding: 0 0 12px 0;
2344
// trough { padding-bottom: $bar_size; }
2346
slider {
2348
@extend %scale-has-marks-above-horz;
2349
margin-bottom: $color_slider_margin;
2351
margin-top: $color_marks_slider_margin;
2352
}
2353
}
2354
&.vertical {
2356
&:dir(ltr) {
2357
padding: 0 0 0 12px;
2358
// trough { padding-left: $bar_size; }
2360
slider {
2362
@extend %scale-has-marks-below-vert;
2363
margin-left: $color_slider_margin;
2365
margin-right: $color_marks_slider_margin;
2366
}
2367
}
2368
&:dir(rtl) {
2370
padding: 0 12px 0 0;
2371
// trough { padding-right: $bar_size; }
2373
slider {
2375
@extend %scale-has-marks-above-vert;
2376
margin-right: $color_slider_margin;
2378
margin-left: $color_marks_slider_margin;
2379
}
2380
}
2381
}
2382
&.fine-tune {
2384
&.horizontal {
2385
slider {
2386
@extend %scale-has-marks-above-horz-fine-tune;
2387
}
2388
}
2389
&.vertical {
2391
&:dir(ltr) {
2392
slider {
2393
@extend %scale-has-marks-below-vert-fine-tune;
2394
}
2395
}
2396
&:dir(rtl) {
2398
slider {
2399
@extend %scale-has-marks-above-vert-fine-tune;
2400
}
2401
}
2402
}
2403
}
2404
}
2405
}
2406
/*****************
2409
* Progress bars *
2410
*****************/
2411
progressbar {
2412
// sizing
2413
&.horizontal {
2414
trough,
2415
progress { min-height: $bar_size; }
2416
}
2417
&.vertical {
2419
trough,
2420
progress { min-width: $bar_size; }
2421
}
2422
// FIXME: insensitive state missing and some other state should be set probably
2424
color: $tertiary_fg_color;
2425
font-size: smaller;
2426
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2428
progress { background-color: $primary_color; }
2430
&.osd { // progressbar.osd used for epiphany page loading progress
2432
// min-width: $bar_size;
2433
// min-height: $bar_size;
2434
// background-color: transparent;
2435
// trough { background-color: transparent; }
2437
progress {
2439
}
2440
}
2441
}
2442
/*************
2445
* Level Bar *
2446
*************/
2447
levelbar {
2448
block {
2449
min-width: $medium_size;
2450
min-height: $bar_size;
2451
}
2452
&.vertical block {
2454
min-width: $bar_size;
2455
min-height: $medium_size;
2456
}
2457
trough {
2459
padding: 2px;
2460
border-radius: 2px;
2461
@include entry(normal);
2463
&:disabled { @include entry(disabled); }
2465
}
2466
&.horizontal.discrete block { margin: 0 1px; }
2468
&.vertical.discrete block { margin: 1px 0; }
2470
&.horizontal.discrete trough { padding: 2px 1px; }
2472
&.vertical.discrete trough { padding: 1px 2px; }
2474
block {
2476
&.low {
2477
background-color: $warning_color;
2478
}
2479
&.high,
2481
&:not(.empty) {
2482
background-color: $primary_color;
2483
}
2484
&.full {
2486
background-color: $success_color;
2487
}
2488
&.empty {
2490
background-color: $track_color;
2491
color: $disabled_fg_color;
2492
}
2493
}
2494
}
2495
/****************
2498
* Print dialog *
2499
*****************/
2500
printdialog {
2501
paper {
2502
padding: 0;
2503
border: 1px solid $borders_color;
2504
background: $base_color;
2505
color: $fg_color;
2506
}
2507
.dialog-action-box { margin: 12px; }
2509
}
2510
/**********
2513
* Frames *
2514
**********/
2515
frame > border,
2516
.frame {
2517
margin: 0;
2518
padding: 0;
2519
border: 1px solid $borders_color;
2520
border-radius: 0;
2521
box-shadow: none;
2522
&.flat { border-style: none; }
2524
}
2525
actionbar > revealer > box {
2527
padding: $container_padding;
2528
border-top: 1px solid $borders_color;
2529
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2531
}
2532
scrolledwindow {
2534
viewport.frame { // avoid double borders when viewport inside scrolled window
2535
border-style: none;
2536
}
2537
// This is used when content is touch-dragged past boundaries.
2539
// draws a box on top of the content, the size changes programmatically.
2540
@at-root overshoot {
2541
&.top { @include overshoot(top); }
2542
&.bottom { @include overshoot(bottom); }
2544
&.left { @include overshoot(left); }
2546
&.right { @include overshoot(right); }
2548
}
2549
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2551
@at-root undershoot {
2552
&.top { @include undershoot(top); }
2553
&.bottom { @include undershoot(bottom); }
2555
&.left { @include undershoot(left); }
2557
&.right { @include undershoot(right); }
2559
}
2560
@at-root junction { // the small square between two scrollbars
2562
border-style: solid none none solid;
2563
border-width: 1px;
2564
border-color: $borders_color;
2565
background-color: $base_color;
2566
&:dir(rtl) { border-style: solid solid none none; }
2568
}
2569
}
2570
//vbox and hbox separators
2572
separator {
2573
min-width: 1px;
2574
min-height: 1px;
2575
background: $borders_color;
2576
}
2577
/*********
2580
* Lists *
2581
*********/
2582
list {
2583
border-color: $borders_color;
2584
background-color: $base_color;
2585
row { padding: 2px; }
2587
}
2588
// FIXME
2590
$row_transition: $longer_transition, background-color 0, color 0;
2591
row {
2593
&.activatable {
2594
transition: $row_transition;
2595
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0);
2596
background-image: radial-gradient(circle farthest-corner at center,
2597
gtkalpha(currentColor, 0) 100%,
2598
transparent 0%),
2599
image(gtkalpha(currentColor, 0));
2600
&:hover {
2602
transition: $row_transition, box-shadow 0;
2603
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0.05);
2604
}
2605
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2607
&:active {
2608
transition: $row_transition, background-image 0;
2609
animation: row_ripple_effect $longer_duration $deceleration_curve forwards;
2610
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, $lower_opacity / 2);
2611
}
2612
}
2613
&:selected { @extend %selected_items; }
2615
}
2616
/*********************
2619
* App Notifications *
2620
*********************/
2621
.app-notification,
2622
.app-notification.frame {
2623
@extend %osd;
2624
@extend toolbar.osd;
2626
margin: 8px;
2628
button { @extend %button_basic.flat; }
2630
border { border: none; }
2632
}
2633
/*************
2636
* Expanders *
2637
*************/
2638
expander {
2639
arrow {
2640
transition: all $shorter_duration $standard_curve;
2641
min-width: 16px;
2642
min-height: 16px;
2643
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2644
-gtk-icon-transform: rotate(-90deg);
2645
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2647
&:checked { -gtk-icon-transform: unset; }
2649
color: $secondary_fg_color;
2651
&:hover, &:active { color: $fg_color; }
2653
&:disabled { color: $disabled_secondary_fg_color; }
2655
&:selected {
2657
color: $secondary_inversed_fg_color;
2658
&:hover, &:active { color: $inversed_fg_color; }
2660
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2662
}
2663
}
2664
}
2665
/************
2668
* Calendar *
2669
***********/
2670
calendar {
2671
padding: 1px;
2672
border: 1px solid $borders_color;
2673
color: $fg_color;
2674
&:disabled { color: $disabled_fg_color; }
2676
&:selected {
2678
@extend %selected_items;
2679
border-radius: 2px + 1px;
2681
}
2682
&.header {
2684
border-style: none none solid;
2685
border-radius: 0;
2686
}
2687
&.button { @extend %simple_flat_button; }
2689
&.highlight {
2691
color: gtkalpha(currentColor, $hint_opacity);
2692
font-weight: 500;
2693
}
2694
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2696
}
2697
/***********
2700
* Dialogs *
2701
***********/
2702
messagedialog { // Message Dialog styling
2703
&.background { background-color: $lighter_bg_color; }
2704
.titlebar {
2706
min-height: $small_size;
2707
border-style: none;
2708
box-shadow: inset 0 1px $highlight_color;
2709
background-color: $lighter_bg_color;
2710
}
2711
&.csd { // rounded bottom border styling for csd version
2713
&.background {
2714
// bigger radius for better antialiasing
2715
border-bottom-left-radius: 2px;
2716
border-bottom-right-radius: 2px;
2717
}
2718
.dialog-action-area button {
2720
padding: 8px 16px;
2721
border-top: 1px solid $borders_color;
2722
border-radius: 0;
2723
@extend %simple_flat_button;
2725
&:first-child { border-bottom-left-radius: 2px; }
2727
&:last-child { border-bottom-right-radius: 2px; }
2729
}
2730
}
2731
}
2732
filechooser {
2734
.dialog-action-box { border-top: 1px solid $borders_color; }
2735
#pathbarbox {
2737
border-bottom: 1px solid $borders_color;
2738
background-color: $bg_color;
2739
}
2740
}
2741
filechooserbutton:drop(active) {
2743
box-shadow: none;
2744
}
2745
/***********
2748
* Sidebar *
2749
***********/
2750
.sidebar {
2751
border-style: none;
2752
background-color: $lighter_bg_color;
2753
@at-root %sidebar_left,
2755
&:dir(ltr),
2756
&.left,
2757
&.left:dir(rtl) {
2758
border-right: 1px solid $borders_color;
2759
border-left-style: none;
2760
}
2761
@at-root %sidebar_right
2763
&:dir(rtl),
2764
&.right {
2765
border-left: 1px solid $borders_color;
2766
border-right-style: none;
2767
}
2768
list { background-color: transparent; }
2770
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2772
}
2773
stacksidebar {
2775
&.sidebar {
2776
&:dir(ltr),
2777
&.left,
2778
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2779
&:dir(rtl),
2781
&.right { list { @extend %sidebar_right; }}
2782
}
2783
row {
2785
padding: 10px 4px;
2786
> label {
2788
padding-left: 6px;
2789
padding-right: 6px;
2790
}
2791
&.needs-attention > label { @extend %needs_attention; }
2793
}
2794
}
2795
/****************
2798
* File chooser *
2799
****************/
2800
placessidebar {
2801
> viewport.frame { border-style: none; }
2802
list { padding: (4px - 3px) 0 4px; }
2804
row {
2806
// Needs overriding of the GtkListBoxRow padding
2807
min-height: 32px;
2808
margin: -1px 0; // Remove unknown margins
2809
padding: 0;
2810
// Using margins/padding directly in the SidebarRow
2812
// will make the animation of the new bookmark row jump
2813
> revealer { padding: 0 12px; }
2814
&:selected { color: $inversed_fg_color; }
2816
&:disabled { color: $disabled_fg_color; }
2818
image.sidebar-icon {
2820
opacity: $hint_opacity; // dim the device icons
2821
&:dir(ltr) { padding-right: 8px; }
2823
&:dir(rtl) { padding-left: 8px; }
2824
}
2825
label.sidebar-label {
2827
&:dir(ltr) { padding-right: 2px; }
2828
&:dir(rtl) { padding-left: 2px; }
2829
}
2830
@at-root button.sidebar-button {
2832
@extend %simple_flat_button;
2833
@extend %small_button;
2835
row:selected & {
2837
}
2838
}
2839
&.sidebar-placeholder-row {
2841
min-height: 2px;
2842
padding: 0 8px;
2843
background-image: image($accent_color);
2844
background-clip: content-box;
2845
}
2846
&.sidebar-new-bookmark-row { color: $accent_color; }
2848
&:drop(active):not(:disabled) {
2850
box-shadow: inset 0 0 0 2px $accent_color;
2851
&:selected {
2853
// background-color: $accent_color;
2854
// color: $inversed_fg_color;
2855
}
2856
}
2857
}
2858
}
2859
placesview {
2861
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2862
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2864
// this selects the "connect to server" label
2866
> actionbar > revealer > box > label {
2867
padding-left: 8px;
2868
padding-right: 8px;
2869
}
2870
}
2871
/*********
2874
* Paned *
2875
*********/
2876
paned {
2877
> separator {
2878
min-width: 1px;
2879
min-height: 1px;
2880
-gtk-icon-source: none; // defeats the ugly default handle decoration
2881
border-style: none; // just to be sure
2882
background-color: transparent;
2883
// workaround, using background istead of a border since the border will get rendered twice (?)
2884
background-image: image($borders_color);
2885
background-size: 1px 1px;
2886
&.wide {
2888
min-width: 6px;
2889
min-height: 6px;
2890
background-color: $bg_color;
2891
background-image: image($borders_color), image($borders_color);
2892
background-size: 1px 1px, 1px 1px;
2893
}
2894
}
2895
&.horizontal > separator {
2897
background-repeat: repeat-y;
2898
&:dir(ltr) {
2900
margin: 0 -8px 0 0;
2901
padding: 0 8px 0 0;
2902
background-position: left;
2903
}
2904
&:dir(rtl) {
2906
margin: 0 0 0 -8px;
2907
padding: 0 0 0 8px;
2908
background-position: right;
2909
}
2910
&.wide {
2912
margin: 0;
2913
padding: 0;
2914
background-repeat: repeat-y, repeat-y;
2915
background-position: left, right;
2916
}
2917
}
2918
&.vertical > separator {
2920
margin: 0 0 -8px 0;
2921
padding: 0 0 8px 0;
2922
background-repeat: repeat-x;
2923
background-position: top;
2924
&.wide {
2926
margin: 0;
2927
padding: 0;
2928
background-repeat: repeat-x, repeat-x;
2929
background-position: bottom, top;
2930
}
2931
}
2932
}
2933
/**************
2936
* GtkInfoBar *
2937
**************/
2938
infobar {
2939
border-style: none;
2940
&.info { background-color: $info_bg_color; }
2942
&.question { background-color: $question_bg_color; }
2944
&.warning { background-color: $warning_bg_color; }
2946
&.error { background-color: $error_bg_color; }
2948
&.info,
2950
&.question,
2951
&.warning,
2952
&.error {
2953
> label, & { color: $inversed_fg_color; }
2954
button { @extend %button_selected; }
2956
selection { }
2958
*:link { @extend %link_selected; }
2960
}
2961
}
2962
/************
2965
* Tooltips *
2966
************/
2967
tooltip {
2968
&.background {
2969
// background-color needs to be set this way otherwise it gets drawn twice
2970
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2971
box-shadow: inset 0 1px $highlight_color;
2972
background-color: scale-alpha($base_color, $higher_opacity);
2973
}
2974
// @extend %osd;
2976
// padding: 4px; /* not working */
2978
border-radius: 2px;
2979
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2980
// FIXME: we need a border or tooltips vanish on black background.
2982
decoration { background-color: transparent; }
2983
label {
2985
// tooltip label has already 6px margins
2986
min-height: 32px - 6px * 2;
2987
padding: 0 8px - 6px;
2988
}
2989
* { // Yeah this is ugly
2991
padding: 0;
2992
background-color: transparent;
2993
color: inherit;
2994
}
2995
}
2996
/*****************
2999
* Color Chooser *
3000
*****************/
3001
colorswatch {
3002
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3003
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3004
// applied to the overlay box.
3005
// base color corners rounding
3007
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3008
// sports a bigger radius.
3009
// nth-child is needed by the custom color strip.
3010
&.top {
3012
border-top-left-radius: $md_radius + 0.5px;
3013
border-top-right-radius: $md_radius + 0.5px;
3014
overlay {
3016
border-top-left-radius: $md_radius;
3017
border-top-right-radius: $md_radius;
3018
}
3019
}
3020
&.bottom {
3022
border-bottom-left-radius: $md_radius + 0.5px;
3023
border-bottom-right-radius: $md_radius + 0.5px;
3024
overlay {
3026
border-bottom-left-radius: $md_radius;
3027
border-bottom-right-radius: $md_radius;
3028
}
3029
}
3030
&.left,
3032
&:first-child:not(.top) {
3033
border-top-left-radius: $md_radius + 0.5px;
3034
border-bottom-left-radius: $md_radius + 0.5px;
3035
overlay {
3037
border-top-left-radius: $md_radius;
3038
border-bottom-left-radius: $md_radius;
3039
}
3040
}
3041
&.right,
3043
&:last-child:not(.bottom) {
3044
border-top-right-radius: $md_radius + 0.5px;
3045
border-bottom-right-radius: $md_radius + 0.5px;
3046
overlay {
3048
border-top-right-radius: $md_radius;
3049
border-bottom-right-radius: $md_radius;
3050
}
3051
}
3052
&.dark overlay { color: $dark_contrast_color; }
3054
&.light overlay { color: $light_contrast_color; }
3056
&.dark { color: $dark_contrast_color; } // for focus ring
3058
&.light { color: $light_contrast_color; } // for focus ring
3060
&:drop(active) {
3062
box-shadow: none;
3063
&.light overlay {
3065
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3066
}
3067
&.dark overlay {
3069
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3070
}
3071
}
3072
overlay {
3074
transition: $shadow_transition;
3075
box-shadow: $z-depth-1;
3076
&:hover { box-shadow: $z-depth-2; }
3078
}
3079
&#add-color-button {
3081
border-radius: $md_radius $md_radius 0 0;
3082
color: $dark_contrast_color; // for focus ring
3083
&:only-child { border-radius: $md_radius; }
3085
overlay {
3087
background-image: linear-gradient(to right,
3088
$error_bg_color 25%,
3089
$warning_bg_color 25%, $warning_bg_color 50%,
3090
$info_bg_color 50%, $info_bg_color 75%,
3091
$question_bg_color 75%);
3092
color: $dark_contrast_color;
3093
}
3094
}
3095
&:disabled {
3097
opacity: $disabled_opacity;
3098
overlay { box-shadow: none; }
3100
}
3101
row:selected & {
3103
}
3104
&#editor-color-sample {
3106
border-radius: $md_radius + 0.5px;
3107
overlay { border-radius: $md_radius; }
3109
// overlay:hover { box-shadow: $z-depth-1; }
3111
}
3112
}
3113
// colorscale popup
3115
colorchooser .popover.osd {
3116
transition: $shadow_transition;
3117
border-radius: 2px;
3118
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
3119
background-color: $base_color;
3120
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
3122
spinbutton:not(.vertical) { @extend %entry.flat; }
3124
}
3125
/********
3128
* Misc *
3129
********/
3130
//content view (grid/list)
3131
.content-view {
3132
background-color: $bg_color;
3133
// &:hover { -gtk-icon-effect: highlight; }
3135
rubberband { @extend rubberband; }
3137
}
3138
.scale-popup {
3140
.osd & { @extend %osd; }
3141
.osd & button.flat { //FIXME: quick hack, redo properly
3143
}
3144
button { // +/- buttons on GtkVolumeButton popup
3146
}
3147
}
3148
/**********************
3151
* Window Decorations *
3152
*********************/
3153
decoration {
3154
transition: $shadow_transition;
3155
border-radius: 2px 2px 0 0;
3156
box-shadow: $z-depth-4, 0 16px 16px transparent;
3157
// FIXME rationalize shadows
3159
// this is used for the resize cursor area
3161
margin: 8px;
3162
&:backdrop {
3164
// the transparent shadow here is to enforce that the shadow extents don't
3165
// change when we go to backdrop, to prevent jumping windows.
3166
// The biggest shadow should be in the same order then in the active state
3167
// or the jumping will happen during the transition.
3168
box-shadow: $z-depth-2, 0 16px 16px transparent;
3169
}
3170
.maximized &,
3172
.fullscreen &,
3173
.tiled & { border-radius: 0; }
3174
.popup & { box-shadow: none; }
3176
// server-side decorations as used by mutter
3178
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3179
.csd.popup & {
3181
border-radius: 2px;
3182
box-shadow: $z-depth-2;
3183
}
3184
tooltip.csd & {
3186
border-radius: 2px;
3187
box-shadow: $z-depth-2;
3188
}
3189
messagedialog.csd & {
3191
border-radius: 2px;
3192
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3193
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3195
}
3196
.solid-csd & {
3198
margin: 0;
3199
padding: 4px;
3200
// border: solid 1px $borders_color;
3201
// border-radius: 0;
3202
box-shadow: inset 0 0 0 4px $headerbar_color;
3203
// background-color: $borders_color;
3204
}
3205
}
3206
// Window Close button
3208
button.titlebutton {
3209
// @extend %simple_flat_button;
3210
@extend %circular_button;
3212
.selection-mode & {
3214
}
3215
}
3216
// catch all extend :)
3219
%selected_items {
3221
background-color: $primary_color;
3222
@at-root %nobg_selected_items, & {
3224
color: $inversed_fg_color;
3225
&:disabled { color: $disabled_inversed_fg_color; }
3227
}
3228
}
3229
.monospace { font-family: monospace; }
3231
/**********************
3234
* Touch Copy & Paste *
3235
*********************/
3236
//touch selection handlebars for the Popover.osd above
3237
cursor-handle {
3238
border-radius: $circular_radius;
3239
background-color: $accent_color;
3240
background-image: none;
3241
&.top:dir(ltr), &.bottom:dir(rtl) {
3243
padding-left: 6px;
3244
border-top-right-radius: 0;
3245
}
3246
&.bottom:dir(ltr), &.top:dir(rtl) {
3248
padding-right: 6px;
3249
border-top-left-radius: 0;
3250
}
3251
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3253
-GtkWidget-text-handle-width: 24;
3254
-GtkWidget-text-handle-height: 30;
3255
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3257
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3258
url('#{$_url}@2.png'));
3259
}
3260
}
3261
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3263
%circular_button,
3265
button.circular { // FIXME: aggregate to buttons
3266
border-radius: $circular_radius;
3267
-gtk-outline-radius: $circular_radius;
3268
// label { padding: 0; }
3270
}
3271
%small_button {
3273
min-height: $small_size;
3274
min-width: $small_size;
3275
padding: 0;
3276
border-radius: $circular_radius;
3277
-gtk-outline-radius: $circular_radius;
3278
}
3279
// shortcut window keys
3281
.keycap {
3282
min-width: 28px - 8px * 2;
3283
min-height: 28px - 2px;
3284
margin-top: 2px;
3285
padding-bottom: 2px;
3286
padding-left: 8px;
3287
padding-right: 8px;
3288
border: solid 1px $borders_color;
3290
border-radius: 2px + 1px;
3291
box-shadow: inset 0 -2px $borders_color;
3292
background-color: $base_color;
3293
color: $fg_color;
3294
font-size: smaller;
3295
}
3296
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3298
transition: $longer_transition;
3299
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_color;
3300
caret-color: $accent_color;
3301
}
3302
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3304
stackswitcher button.circular,
3306
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3307
min-width: $medium_size;
3308
min-height: $medium_size;
3309
padding: 0;
3310
}
3311