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
button.combo:checked { transition: none; } // workaround for menuitem selection
850
menu,
852
.menu,
853
.context-menu {
854
padding: 2px 0;
855
menuitem {
857
min-height: $medium_size - 2px * 2;
858
padding: 0 ($medium_size - 16px) / 2;
859
}
860
}
861
&.linked {
863
button:nth-child(2) {
864
&:dir(ltr) { @extend %linked:last-child; }
865
&:dir(rtl) { @extend %linked:first-child; }
866
}
867
}
868
&:drop(active) { // FIXME: untested
870
box-shadow: none;
871
// button.combo { @extend %button_basic:drop(active); }
873
}
874
}
875
.linked > combobox > box > button.combo {
877
// the combo is a composite widget so the way we do button linking doesn't
878
// work, special case needed. See
879
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
880
&:dir(ltr),
882
&:dir(rtl) { @extend %linked_middle; } // specificity bump
883
}
884
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
886
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
887
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
888
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
890
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
891
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
892
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
893
/************
896
* Toolbars *
897
************/
898
toolbar {
899
-GtkWidget-window-dragging: true;
900
padding: $container_padding / 2;
901
background-color: $bg_color;
902
button { @extend %button_basic.flat; }
904
// on OSD
906
.osd & { background-color: transparent; }
907
// stand-alone OSD toolbars
909
&.osd {
910
transition: $shadow_transition;
911
padding: $container_padding;
912
border-radius: 2px;
913
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
914
background-color: $base_color;
915
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
917
&.left,
919
&.right,
920
&.top,
921
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
922
}
923
// toolbar separators
925
&.horizontal separator { margin: $container_padding / 2; }
926
&.vertical separator { margin: $container_padding / 2; }
927
&:not(.inline-toolbar):not(.osd) {
929
scale,
930
entry,
931
spinbutton,
932
button { margin: $container_padding / 2; }
933
.linked entry,
935
.linked spinbutton,
936
.linked button {
937
&:not(:first-child) { margin-left: 0; }
938
&:not(:last-child) { margin-right: 0; }
939
}
940
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
942
}
943
}
944
//searchbar, location-bar & inline-toolbar
946
.inline-toolbar {
947
padding: $container_padding;
948
border-style: solid;
949
border-width: 0 1px 1px;
950
border-color: $borders_color;
951
background-color: $alt_base_color;
952
}
953
searchbar,
955
.location-bar {
956
padding: $container_padding;
957
border-style: solid;
958
border-width: 0 0 1px;
959
border-color: $borders_color;
960
background-color: $bg_color;
961
background-clip: border-box;
962
}
963
/***************
966
* Header bars *
967
***************/
968
%titlebar,
969
headerbar {
970
transition: background-color $shorter_duration $deceleration_curve;
971
min-height: $large_size;
972
padding: 0 $container_padding;
973
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
974
background-color: $headerbar_color;
975
color: $inversed_fg_color;
976
&:backdrop {
978
color: $secondary_inversed_fg_color;
979
}
980
.title {
982
transition: $longer_transition;
983
padding: 0 12px;
984
font-weight: bold;
985
}
986
.subtitle {
988
transition: $longer_transition;
989
padding: 0 12px;
990
font-size: smaller;
991
@extend .dim-label;
993
}
994
button:not(.suggested-action):not(.destructive-action) {
996
@extend %button_basic.flat;
997
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
999
currentColor 0%,
1000
transparent 0%)
1001
0 0 0 / 0 0 0px;
1002
&:checked {
1004
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1005
currentColor 100%,
1006
transparent 0%)
1007
0 0 2 / 0 0 2px;
1008
&, &:disabled { background-color: transparent; }
1010
}
1011
}
1012
button.suggested-action, button.destructive-action {
1014
&:disabled {
1015
color: gtkalpha(currentColor, $disabled_opacity);
1016
> label { color: inherit; }
1018
}
1019
}
1020
&.selection-mode {
1022
transition: background-color 0 $longer_duration;
1023
animation: header_ripple_effect $longer_duration $deceleration_curve;
1024
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1025
background-color: $primary_color;
1026
color: $inversed_fg_color;
1027
&:backdrop {
1029
color: $secondary_inversed_fg_color;
1030
}
1031
.subtitle:link { @extend *:link:selected; }
1033
button:not(.suggested-action):not(.destructive-action) {
1035
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1036
currentColor 0%,
1037
transparent 0%)
1038
0 0 0 / 0 0 0px;
1039
color: currentColor;
1040
&:disabled {
1042
color: gtkalpha(currentColor, $disabled_opacity);
1043
> label { color: inherit; }
1045
}
1046
&:checked {
1048
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1049
currentColor 100%,
1050
transparent 0%)
1051
0 0 2 / 0 0 2px;
1052
color: currentColor;
1053
&:disabled {
1055
color: gtkalpha(currentColor, $disabled_opacity);
1056
> label { color: inherit; }
1058
}
1059
}
1060
}
1061
.selection-menu {
1063
padding-left: 16px;
1064
padding-right: 16px;
1065
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1067
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1069
}
1070
}
1071
.fullscreen &,
1073
.tiled &,
1074
.maximized & {
1075
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1076
box-shadow: $z-depth-1;
1077
}
1078
&.default-decoration {
1080
min-height: $small_size;
1081
padding: $container_padding;
1082
border-width: 0;
1083
button.titlebutton {
1085
min-height: $small_size;
1086
min-width: $small_size;
1087
margin: 0;
1088
padding: 0;
1089
&:active { // add fallback
1091
background-image: radial-gradient(circle farthest-corner at center,
1092
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1093
transparent 0%),
1094
image(gtkalpha(currentColor, $lower_opacity / 2));
1095
}
1096
}
1097
}
1098
.solid-csd & {
1100
&:dir(rtl), &:dir(ltr) { // specificity bump
1101
margin-left: -2px;
1102
margin-right: -2px;
1103
margin-top: -2px;
1104
// border-radius: 0;
1105
box-shadow: inset 0 1px $secondary_highlight_color;
1106
}
1107
}
1108
}
1109
headerbar {
1111
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1112
entry,
1113
spinbutton,
1114
// separator,
1115
button {
1116
margin-top: $container_padding;
1117
margin-bottom: $container_padding;
1118
}
1119
switch {
1121
margin-top: $container_padding * 2;
1122
margin-bottom: $container_padding * 2;
1123
}
1124
}
1125
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1127
border-top-left-radius: 2px;
1128
border-top-right-radius: 2px;
1129
}
1130
headerbar {
1132
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1133
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1134
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1136
}
1137
.titlebar:not(headerbar) {
1139
window.csd > & {
1140
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1141
padding: 0;
1142
background-color: transparent;
1143
background-image: none;
1144
border-style: none;
1145
box-shadow: none;
1146
}
1147
> separator {
1149
background-color: $headerbar_color;
1150
background-image: image($borders_color);
1151
}
1152
@extend %titlebar;
1154
}
1155
/************
1158
* Pathbars *
1159
************/
1160
%pathbar_button,
1161
.path-bar button {
1162
&.text-button, &.image-button, & {
1163
padding-left: 6px;
1164
padding-right: 6px;
1165
}
1166
&.text-button.image-button, & {
1168
// label:last-child { padding-left: 2px; padding-right: 8px; }
1169
// label:first-child { padding-left: 8px; padding-right: 2px; }
1170
}
1171
image {
1173
padding-left: ($medium_size - 16px) / 2 - 6px;
1174
padding-right: ($medium_size - 16px) / 2 - 6px;
1175
}
1176
&.slider-button {
1178
padding-left: 0;
1179
padding-right: 0;
1180
}
1181
:not(headerbar) & {
1183
@extend %flat_button;
1184
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1186
$primary_color 0%,
1187
transparent 0%)
1188
0 0 0 / 0 0 0px;
1189
border-radius: 2px;
1190
&:checked {
1192
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1193
$primary_color 100%,
1194
transparent 0%)
1195
0 0 2 / 0 0 2px;
1196
&, &:disabled { background-color: transparent; }
1198
}
1199
}
1200
}
1201
/**************
1204
* Tree Views *
1205
**************/
1206
treeview.view {
1207
@at-root * {
1208
-GtkTreeView-horizontal-separator: 4;
1209
-GtkTreeView-grid-line-width: 1;
1210
-GtkTreeView-grid-line-pattern: '';
1211
-GtkTreeView-tree-line-width: 1;
1212
-GtkTreeView-tree-line-pattern: '';
1213
-GtkTreeView-expander-size: 16;
1214
}
1215
border-left-color: $track_color; // this is actually the tree lines color,
1217
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1218
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1220
&:hover, &:active, &:selected { border-radius: 0; }
1222
&.separator {
1224
min-height: 1px + 2px * 2;
1225
color: $borders_color;
1226
}
1227
&:drop(active) {
1229
border-style: solid none;
1230
border-width: 1px;
1231
border-color: $accent_color;
1232
&.after { border-top-style: none; }
1234
&.before { border-bottom-style: none; }
1236
}
1237
&.expander {
1239
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1240
-gtk-icon-transform: rotate(-90deg);
1241
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1243
&:checked { -gtk-icon-transform: unset; }
1245
color: $secondary_fg_color;
1247
&:hover, &:active { color: $fg_color; }
1249
&:disabled { color: $disabled_secondary_fg_color; }
1251
&:selected {
1253
color: $secondary_inversed_fg_color;
1254
&:hover, &:active { color: $inversed_fg_color; }
1256
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1258
}
1259
}
1260
&.progressbar { // progress bar in treeviews
1262
border-style: none none solid;
1263
border-width: $bar_size;
1264
border-color: $primary_color;
1265
box-shadow: none;
1266
background-color: transparent;
1267
&:selected { border-color: currentColor; }
1269
}
1270
&.trough { // progress bar trough in treeviews
1272
border-style: none none solid;
1273
border-width: $bar_size;
1274
border-color: scale-alpha($primary_color, $lower_opacity);
1275
box-shadow: none;
1276
background-color: transparent;
1277
&:selected { border-color: $track_color; }
1279
}
1280
header {
1282
button {
1283
@extend row.activatable;
1284
padding: 2px 6px;
1286
border-style: none solid solid none;
1287
border-width: 1px;
1288
border-color: $borders_color;
1289
border-radius: 0;
1290
background-clip: border-box;
1291
&, &:hover, &:active { box-shadow: none; }
1293
&, &:disabled { background-color: $base_color; }
1295
&:last-child { border-right-style: none; }
1297
}
1298
}
1299
button.dnd,
1301
header.button.dnd { // for treeview-like derive widgets
1302
padding: 2px 6px;
1303
border-style: none solid solid;
1304
border-width: 1px;
1305
border-color: $borders_color;
1306
border-radius: 0;
1307
box-shadow: none;
1308
background-color: $base_color;
1309
background-clip: border-box;
1310
color: $primary_color;
1311
}
1312
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1314
}
1315
/*********
1318
* Menus *
1319
*********/
1320
menubar,
1321
.menubar {
1322
-GtkWidget-window-dragging: true;
1323
padding: 0;
1324
// box-shadow: inset 0 -1px $borders_color;
1325
background-color: $headerbar_color;
1326
> menuitem {
1328
transition: $shorter_transition;
1329
min-height: 20px;
1330
padding: 4px 8px;
1331
color: $secondary_inversed_fg_color;
1332
&:hover { //Seems like it :hover even with keyboard focus
1334
transition: none;
1335
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1336
color: $inversed_fg_color;
1337
}
1338
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1340
}
1341
}
1342
menu,
1344
.menu,
1345
.context-menu {
1346
margin: 4px 0;
1347
padding: 4px 0;
1348
box-shadow: inset 0 1px $highlight_color;
1349
background-color: $base_color;
1350
border: 1px solid $borders_color; // adds borders in a non composited env
1351
.csd & {
1353
border: none; // axes borders in a composited env
1354
border-radius: 2px;
1355
}
1356
menuitem {
1358
transition: $shorter_transition;
1359
min-height: 20px;
1360
min-width: 40px;
1361
padding: 4px 8px;
1362
font: initial;
1363
text-shadow: none;
1364
&:hover {
1366
transition: none;
1367
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1368
}
1369
&:disabled { color: $disabled_fg_color; }
1371
// submenu indicators
1373
arrow {
1374
min-height: 16px;
1375
min-width: 16px;
1376
&:dir(ltr) {
1378
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1379
margin-left: 8px;
1380
}
1381
&:dir(rtl) {
1383
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1384
margin-right: 8px;
1385
}
1386
}
1387
// avoids labels color being overridden, see
1389
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1390
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1391
}
1392
// overflow arrows
1394
> arrow {
1395
min-height: 16px;
1396
min-width: 16px;
1397
padding: 4px;
1398
border-radius: 0;
1399
background-color: $base_color;
1400
color: $secondary_fg_color;
1401
&.top {
1403
margin-top: -4px;
1404
border-bottom: 1px solid $borders_color;
1405
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1406
}
1407
&.bottom {
1409
margin-bottom: -4px;
1410
border-top: 1px solid $borders_color;
1411
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1412
}
1413
&:hover {
1415
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1416
color: $fg_color;
1417
}
1418
&:disabled {
1420
border-color: transparent;
1421
background-color: transparent;
1422
color: transparent;
1423
// color: $disabled_secondary_fg_color;
1424
}
1425
}
1426
separator { margin: 4px 0; }
1428
}
1429
menuitem {
1431
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1432
check,
1434
radio {
1435
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1436
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1437
}
1438
}
1439
.csd.popup { border-radius: 2px; }
1441
/***************
1444
* Popovers *
1445
***************/
1446
popover.background {
1447
transition: $shadow_transition;
1448
padding: 0;
1449
box-shadow: $z-depth-2; // TODO: this should really have a highlight
1450
background-color: $lighter_bg_color;
1451
&:backdrop { box-shadow: $z-depth-1; }
1453
&, .csd & {
1455
border-style: solid;
1456
border-width: 1px;
1457
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1458
border-radius: 2px + 1px;
1459
}
1460
> list,
1462
> .view,
1463
> toolbar {
1464
border-style: none;
1465
box-shadow: none;
1466
background-color: transparent;
1467
}
1468
&, .csd & {
1470
&.touch-selection,
1471
&.magnifier,
1472
&.osd { @extend %osd; }
1473
}
1474
// entry { @extend %entry.flat; }
1476
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1478
button.model {
1480
@extend %simple_flat_button;
1481
min-height: 32px;
1483
padding: 0 8px;
1484
border-radius: 2px;
1485
&:checked {
1487
background-color: $primary_color;
1488
color: $inversed_fg_color;
1489
}
1490
}
1491
separator { margin: 4px 0; }
1493
list separator { margin: 0; }
1495
}
1496
/*************
1498
* Notebooks *
1499
*************/
1500
notebook {
1501
> header {
1502
border-width: 1px;
1503
border-color: $borders_color;
1504
background-color: $bg_color;
1505
background-clip: border-box;
1506
&.top {
1508
border-bottom-style: solid;
1509
> tabs {
1510
margin-bottom: -1px;
1511
> tab {
1512
&:hover { box-shadow: inset 0 -2px $track_color; }
1514
&:checked { box-shadow: inset 0 -2px $primary_color; }
1516
}
1517
}
1518
}
1519
&.bottom {
1521
border-top-style: solid;
1522
> tabs {
1523
margin-top: -1px;
1524
> tab {
1525
&:hover { box-shadow: inset 0 2px $track_color; }
1527
&:checked { box-shadow: inset 0 2px $primary_color; }
1529
}
1530
}
1531
}
1532
&.left {
1534
border-right-style: solid;
1535
> tabs {
1536
margin-right: -1px;
1537
> tab {
1538
&:hover { box-shadow: inset -2px 0 $track_color; }
1540
&:checked { box-shadow: inset -2px 0 $primary_color; }
1542
}
1543
}
1544
}
1545
&.right {
1547
border-left-style: solid;
1548
> tabs {
1549
margin-left: -1px;
1550
> tab {
1551
&:hover { box-shadow: inset 2px 0 $track_color; }
1553
&:checked { box-shadow: inset 2px 0 $primary_color; }
1555
}
1556
}
1557
}
1558
&.top > tabs > arrow {
1560
@extend %notebook_vert_arrows;
1561
border-top-style: none;
1563
}
1564
&.bottom > tabs > arrow {
1566
@extend %notebook_vert_arrows;
1567
border-bottom-style: none;
1569
}
1570
@at-root %notebook_vert_arrows {
1572
padding-left: 4px;
1573
padding-right: 4px;
1574
&.down {
1576
margin-left: -8px;
1577
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1578
}
1579
&.up {
1581
margin-right: -8px;
1582
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1583
}
1584
}
1585
&.left > tabs > arrow {
1587
@extend %notebook_horz_arrows;
1588
border-left-style: none;
1590
}
1591
&.right > tabs > arrow {
1593
@extend %notebook_horz_arrows;
1594
border-right-style: none;
1596
}
1597
@at-root %notebook_horz_arrows {
1599
padding-top: 4px;
1600
padding-bottom: 4px;
1601
&.down {
1603
margin-top: -8px;
1604
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1605
}
1606
&.up {
1608
margin-bottom: -8px;
1609
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1610
}
1611
}
1612
> tabs > arrow {
1614
@extend %simple_flat_button;
1615
min-height: 16px;
1617
min-width: 16px;
1618
border-radius: 0;
1619
}
1620
tab {
1622
transition: $longer_transition;
1623
min-height: $small_size;
1624
min-width: $small_size;
1625
padding: $container_padding 12px;
1626
outline-offset: -6px;
1628
border-width: 1px; // for reorderable tabs
1630
border-color: transparent; //
1631
color: $secondary_fg_color;
1633
font-weight: 500;
1634
&:hover {
1636
color: $fg_color;
1637
&.reorderable-page {
1639
border-color: $borders_color;
1640
background-color: $alt_base_color;
1641
}
1642
}
1643
&:disabled { color: $disabled_secondary_fg_color; }
1645
&:checked {
1647
animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve;
1648
color: $fg_color;
1649
&:disabled { color: $disabled_fg_color; }
1651
&.reorderable-page {
1653
border-color: $borders_color;
1654
background-color: $base_color;
1655
}
1656
}
1657
// colors the button like the label, overridden otherwise
1659
button.flat {
1660
@extend %small_button;
1661
&:last-child {
1663
margin-left: $container_padding;
1664
margin-right: $container_padding - 12px;
1665
}
1666
&:first-child {
1668
margin-left: $container_padding - 12px;
1669
margin-right: $container_padding;
1670
}
1671
}
1672
}
1673
&.top,
1675
&.bottom {
1676
tabs {
1677
padding-left: 8px;
1678
padding-right: 8px;
1679
&:not(:only-child) {
1681
&:first-child { margin-left: 0; }
1682
&:last-child { margin-right: 0; }
1683
}
1684
tab {
1686
&.reorderable-page {
1687
margin: 0 -1px;
1688
border-style: none solid;
1689
}
1690
}
1691
}
1692
}
1693
&.left,
1695
&.right {
1696
tabs {
1697
padding-top: 8px;
1698
padding-bottom: 8px;
1699
&:not(:only-child) {
1701
&:first-child { margin-top: 0; }
1702
&:last-child { margin-bottom: 0; }
1703
}
1704
tab {
1706
&.reorderable-page {
1707
margin: -1px 0;
1708
border-style: solid none;
1709
}
1710
}
1711
}
1712
}
1713
}
1714
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1716
background-color: $base_color;
1717
entry,
1719
spinbutton:not(.vertical) { @extend %entry.flat; }
1720
revealer entry,
1722
revealer spinbutton:not(.vertical) { @extend %entry; }
1723
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1725
}
1726
}
1727
/**************
1730
* Scrollbars *
1731
**************/
1732
scrollbar {
1733
$_slider_min_length: 24px;
1734
// disable steppers
1736
@at-root * {
1737
-GtkScrollbar-has-backward-stepper: false;
1738
-GtkScrollbar-has-forward-stepper: false;
1739
}
1740
transition: $longer_transition;
1742
background-color: $base_color;
1743
background-clip: $extra_background_clip;
1744
// scrollbar border
1746
&.top { border-bottom: 1px solid $borders_color; }
1747
&.bottom { border-top: 1px solid $borders_color; }
1748
&.left { border-right: 1px solid $borders_color; }
1749
&.right { border-left: 1px solid $borders_color; }
1750
// slider
1752
slider {
1753
transition: $shorter_transition, margin 0, border-width 0;
1754
min-width: 8px;
1755
min-height: 8px;
1756
border: 4px solid transparent;
1757
border-radius: $circular_radius;
1758
background-clip: padding-box;
1759
background-color: $tertiary_fg_color;
1760
&:hover { background-color: $secondary_fg_color; }
1762
&:active { background-color: $fg_color; }
1764
&:disabled { background-color: $disabled_tertiary_fg_color; }
1766
}
1767
&.fine-tune {
1769
slider {
1770
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1771
min-width: 4px;
1772
min-height: 4px;
1773
}
1774
&.horizontal slider { margin: 2px 0; }
1776
&.vertical slider { margin: 0 2px; }
1778
}
1779
&.overlay-indicator {
1781
&:not(.dragging):not(.hovering) {
1782
border-color: transparent;
1783
background-color: transparent;
1784
slider {
1786
min-width: 4px;
1787
min-height: 4px;
1788
margin: 4px - 1px;
1789
border: 1px solid scale-alpha($base_color, $lower_opacity);
1790
}
1791
button {
1793
min-width: 4px;
1794
min-height: 4px;
1795
margin: 4px - 1px;
1796
border: 1px solid scale-alpha($base_color, $lower_opacity);
1797
border-radius: $circular_radius;
1798
background-color: $tertiary_fg_color;
1799
background-clip: padding-box;
1800
-gtk-icon-source: none;
1801
&:disabled { background-color: $disabled_tertiary_fg_color; }
1803
}
1804
&.horizontal {
1806
slider { min-width: $_slider_min_length; }
1807
button { min-width: 8px; }
1809
}
1810
&.vertical {
1812
slider { min-height: $_slider_min_length; }
1813
button { min-height: 8px; }
1815
}
1816
}
1817
&.dragging,
1819
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1820
}
1821
&.horizontal slider { min-width: $_slider_min_length; }
1823
&.vertical slider { min-height: $_slider_min_length; }
1825
// button styling
1827
button {
1828
@extend %simple_flat_button;
1829
min-width: 16px;
1831
min-height: 16px;
1832
padding: 0;
1833
border-radius: 0;
1834
}
1835
// button icons
1837
&.vertical {
1838
button {
1839
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1840
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1842
}
1843
}
1844
&.horizontal {
1846
button {
1847
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1848
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1850
}
1851
}
1852
}
1853
/**********
1856
* Switch *
1857
**********/
1858
switch {
1859
transition: $longer_transition;
1860
margin: $container_padding 0;
1861
border: 4px solid transparent;
1862
border-radius: $circular_radius;
1863
background-color: $track_color;
1864
background-clip: padding-box;
1865
font-size: 0;
1866
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1868
&:checked {
1870
background-color: scale-alpha($accent_color, 0.5);
1871
&:disabled {
1873
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1874
color: $disabled_fg_color;
1875
}
1876
}
1877
slider {
1879
@include entry(normal);
1880
transition: $longer_transition, $shadow_transition, margin 0;
1882
min-width: $small_size;
1883
min-height: $small_size;
1884
margin: -4px 0 -4px -4px;
1885
-gtk-outline-radius: $circular_radius;
1886
border-radius: $circular_radius;
1887
}
1888
&:hover slider { @include entry(focus); }
1890
&:checked slider {
1892
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0 $longer_duration;
1893
animation: needs_attention $longer_duration $deceleration_curve;
1894
margin: -4px -4px -4px 0;
1895
background-color: $accent_color;
1896
color: $inversed_fg_color;
1897
}
1898
&:disabled slider { @include entry(disabled); }
1900
&:checked:disabled slider { animation: none; }
1902
row:selected & {
1904
}
1905
}
1906
/*************************
1909
* Check and Radio items *
1910
*************************/
1911
// draw regular check and radio items using our PNG assets
1912
// all assets are rendered from assets.svg. never add pngs directly
1913
//selection-mode
1915
@each $s,$as in ('','-selectionmode'),
1916
(':hover', '-hover-selectionmode'),
1917
(':checked', '-checked-selectionmode'),
1918
(':checked:hover', '-checked-hover-selectionmode') {
1919
.view.content-view.check#{$s}:not(list) {
1920
-gtk-icon-shadow: $z-depth-1;
1921
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1922
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1923
margin: 8px;
1924
background-color: transparent;
1925
}
1926
}
1927
checkbutton.text-button,
1929
radiobutton.text-button {
1930
// this is for a nice focus on check and radios text
1931
padding: 2px;
1932
outline-offset: 0;
1933
label:not(:only-child) { margin: 0 4px; }
1935
}
1936
check,
1938
radio {
1939
min-height: 24px;
1940
min-width: 24px;
1941
margin: -($large_size - 24px) / 2;
1942
padding: ($large_size - 24px) / 2;
1943
@extend %simple_flat_button;
1945
@extend %circular_button;
1947
&:checked, &:indeterminate { color: $accent_color; }
1949
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1951
// &:only-child { margin: -12px; }
1953
row &:not(:checked):not(:indeterminate) {
1955
color: gtkalpha(currentColor, $enabled_opacity);
1956
&:hover, &:active { color: currentColor; }
1958
&:disabled { color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity); }
1960
}
1961
menu menuitem & {
1963
transition: none;
1964
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1965
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1967
&, &:hover, &:disabled {
1969
background-image: none;
1970
// color: inherit;
1971
// animation: none;
1972
}
1973
}
1974
}
1975
%check,
1977
check {
1978
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1979
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1980
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1982
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1983
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1985
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1986
}
1987
$radio_indicator: 10 / ($large_size / 1px) / 2;
1989
$radio_radius_slice: #{$large_size / 2 / 1px};
1990
$radio_radius_width: #{$large_size / 2};
1991
%radio,
1993
radio {
1994
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1995
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1996
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1998
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1999
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
2001
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
2002
border-image: -gtk-gradient(radial,
2004
center center, 0,
2005
center center, 0.001,
2006
to($accent_color),
2007
to(transparent))
2008
$radio_radius_slice / $radio_radius_width;
2009
&:checked {
2011
border-image: -gtk-gradient(radial,
2012
center center, 0,
2013
center center, $radio_indicator,
2014
to($accent_color),
2015
to(transparent))
2016
$radio_radius_slice / $radio_radius_width;
2017
}
2018
&:checked:disabled {
2020
border-image: -gtk-gradient(radial,
2021
center center, 0,
2022
center center, $radio_indicator,
2023
to(scale-alpha($accent_color, $disabled_opacity)),
2024
to(transparent))
2025
$radio_radius_slice / $radio_radius_width;
2026
}
2027
&:indeterminate:checked {
2029
border-image: -gtk-gradient(radial,
2030
center center, 0,
2031
center center, 0.001,
2032
to($accent_color),
2033
to(transparent))
2034
$radio_radius_slice / $radio_radius_width;
2035
}
2036
}
2037
// let's animate things
2039
@keyframes check_check {
2040
from { -gtk-icon-transform: rotate(90deg); }
2041
to { -gtk-icon-transform: unset; }
2042
}
2043
@keyframes check_radio { // FIXME: cannot animate border-image
2045
from {
2046
border-image: -gtk-gradient(radial,
2047
center center, 0,
2048
center center, 0.001,
2049
to($accent_color),
2050
to(transparent))
2051
$radio_radius_slice / $radio_radius_width;
2052
}
2053
to {
2055
border-image: -gtk-gradient(radial,
2056
center center, 0,
2057
center center, $radio_indicator,
2058
to($accent_color),
2059
to(transparent))
2060
$radio_radius_slice / $radio_radius_width;
2061
}
2062
}
2063
@keyframes check_indeterminate {
2065
from { -gtk-icon-transform: unset; }
2066
50% { -gtk-icon-transform: scale(0, 1); }
2067
to { -gtk-icon-transform: unset; }
2068
}
2069
%check_checked,
2071
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2072
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2074
// %radio_checked,
2076
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2077
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2079
%indeterminate_checked,
2081
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2082
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2084
// no animations in menus
2086
menu menuitem {
2087
check:not(:indeterminate):checked,
2088
radio:not(:indeterminate):checked,
2089
check:indeterminate:checked,
2090
radio:indeterminate:checked { animation: none; }
2091
}
2092
treeview.view check,
2094
treeview.view radio {
2095
padding: 0;
2096
&:hover {
2098
box-shadow: inset 0 0 0 10000px gtkalpha($fg_color, 0.05);
2099
background-image: none;
2100
&:disabled { box-shadow: none; }
2102
&:selected { box-shadow: inset 0 0 0 10000px gtkalpha($inversed_fg_color, 0.05); }
2104
}
2105
& {
2107
color: $secondary_fg_color;
2108
&:hover, &:active { color: $fg_color; }
2110
&:disabled { color: $disabled_secondary_fg_color; }
2112
&:checked, &:indeterminate { color: $accent_color; }
2114
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2116
}
2117
&:selected {
2119
color: $secondary_inversed_fg_color;
2120
&:hover, &:active { color: $inversed_fg_color; }
2122
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2124
&:checked, &:indeterminate { color: $accent_color; }
2126
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2128
}
2129
}
2130
treeview.view radio:checked {
2132
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2133
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2134
border-image: none;
2135
}
2136
/************
2139
* GtkScale *
2140
************/
2141
scale {
2142
// sizing
2143
$_marks_lenght: 8px;
2144
$_marks_distance: 8px;
2145
$slider_size: 24px;
2147
$marks_slider_size: 30px;
2148
$slider_margin: -($slider_size - $bar_size) / 2;
2150
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2151
$color_slider_margin: -($slider_size) / 2;
2153
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2154
min-height: $medium_size - $slider_size;
2156
min-width: $medium_size - $slider_size;
2157
padding: ($slider_size / 2);
2158
* { transition: $longer_transition; }
2160
// the slider is inside the trough, so to have make it bigger there's a negative margin
2162
slider {
2163
min-height: $slider_size;
2164
min-width: $slider_size;
2165
margin: $slider_margin;
2166
}
2167
// the backing bit
2169
trough {
2170
outline-offset: 2px;
2171
background-color: $track_color;
2172
&:disabled { color: $disabled_fg_color; }
2174
}
2175
// the colored part of the backing bit
2177
highlight {
2178
background-color: $accent_color;
2179
&:disabled { background-color: transparent; }
2181
}
2182
// this is another differently styled part of the backing bit, the most relevant use case is for example
2184
// in media player to indicate how much video stream as been cached
2185
fill {
2186
background-color: $track_color;
2187
&:disabled { background-color: transparent; }
2189
}
2190
slider {
2192
transition: all $shorter_duration $standard_curve;
2193
// border-radius: 100%;
2194
// background-color: $accent_color;
2195
background-repeat: no-repeat;
2196
background-position: center;
2197
@each $s,$as in ('',''),
2199
(':disabled','-insensitive') {
2200
&#{$s} {
2201
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2202
background-image: -gtk-scaled(url('#{$_url}.png'),
2203
url('#{$_url}@2.png'));
2204
}
2205
}
2206
background-size: calc(100% - 8px);
2208
&:hover { background-size: calc(100% - 4px); }
2210
&:active { background-size: calc(100% - 0px); }
2212
}
2213
// click-and-hold the slider to activate
2215
&.fine-tune {
2216
// to make the slider shrink in fine-tune mode
2217
slider { background-size: calc(100% - 12px); }
2218
}
2219
value { color: gtkalpha(currentColor, $hint_opacity); }
2221
marks {
2223
color: $track_color;
2224
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2226
(bottom, bottom, top),
2227
(top, left, right),
2228
(bottom, right, left) {
2229
&.#{$marks_class} {
2230
margin-#{$marks_margin}: $_marks_distance;
2231
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2232
}
2233
}
2234
}
2235
&.horizontal {
2237
indicator {
2238
min-height: $_marks_lenght;
2239
min-width: 1px;
2240
}
2241
}
2242
&.vertical {
2244
indicator {
2245
min-height: 1px;
2246
min-width: $_marks_lenght;
2247
}
2248
}
2249
// *WARNING* scale with marks madness following
2251
$suffix: if($variant == 'light', '', '-dark');
2252
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2254
('vertical', 'vert') {
2255
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2256
('scale-has-marks-below', ':first-child:not(:only-child)') {
2257
@each $state, $state_infix in ('', ''),
2258
(':disabled', '-insensitive') {
2259
&.#{$dir_class} {
2260
%#{$marks_infix}-#{$dir_infix},
2261
contents#{$nth_child} > trough > slider {
2262
&#{$state} {
2263
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2264
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2266
}
2267
@if $dir_class == 'horizontal' {
2269
min-height: $marks_slider_size;
2270
min-width: $slider_size;
2271
@if $marks_infix == 'scale-has-marks-above' {
2273
margin-top: $marks_slider_margin;
2274
background-position: center calc(100% - 4px);
2276
&:hover { background-position: center calc(100% - 2px); }
2278
&:active { background-position: center calc(100% - 0px); }
2280
}
2281
@if $marks_infix == 'scale-has-marks-below' {
2283
margin-bottom: $marks_slider_margin;
2284
background-position: center calc(4px);
2286
&:hover { background-position: center calc(2px); }
2288
&:active { background-position: center calc(0px); }
2290
}
2291
}
2292
@if $dir_class == 'vertical' {
2294
min-height: $slider_size;
2295
min-width: $marks_slider_size;
2296
@if $marks_infix == 'scale-has-marks-above' {
2298
margin-left: $marks_slider_margin;
2299
background-position: calc(4px) center;
2301
&:hover { background-position: calc(2px) center; }
2303
&:active { background-position: calc(0px) center; }
2305
}
2306
@if $marks_infix == 'scale-has-marks-below' {
2308
margin-right: $marks_slider_margin;
2309
background-position: calc(100% - 4px) center;
2311
&:hover { background-position: calc(100% - 2px) center; }
2313
&:active { background-position: calc(100% - 0px) center; }
2315
}
2316
}
2317
}
2318
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2320
&.fine-tune contents#{$nth_child} > trough > slider {
2321
// bigger negative margins to make the trough grow here as well
2322
@if $dir_class == 'horizontal' {
2324
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2325
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2327
}
2328
@if $dir_class == 'vertical' {
2330
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2331
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2333
}
2334
}
2335
}
2336
}
2337
}
2338
}
2339
&.color {
2341
min-height: 0;
2342
min-width: 0;
2343
&.horizontal {
2345
padding: 0 0 12px 0;
2346
// trough { padding-bottom: $bar_size; }
2348
slider {
2350
@extend %scale-has-marks-above-horz;
2351
margin-bottom: $color_slider_margin;
2353
margin-top: $color_marks_slider_margin;
2354
}
2355
}
2356
&.vertical {
2358
&:dir(ltr) {
2359
padding: 0 0 0 12px;
2360
// trough { padding-left: $bar_size; }
2362
slider {
2364
@extend %scale-has-marks-below-vert;
2365
margin-left: $color_slider_margin;
2367
margin-right: $color_marks_slider_margin;
2368
}
2369
}
2370
&:dir(rtl) {
2372
padding: 0 12px 0 0;
2373
// trough { padding-right: $bar_size; }
2375
slider {
2377
@extend %scale-has-marks-above-vert;
2378
margin-right: $color_slider_margin;
2380
margin-left: $color_marks_slider_margin;
2381
}
2382
}
2383
}
2384
&.fine-tune {
2386
&.horizontal {
2387
slider {
2388
@extend %scale-has-marks-above-horz-fine-tune;
2389
}
2390
}
2391
&.vertical {
2393
&:dir(ltr) {
2394
slider {
2395
@extend %scale-has-marks-below-vert-fine-tune;
2396
}
2397
}
2398
&:dir(rtl) {
2400
slider {
2401
@extend %scale-has-marks-above-vert-fine-tune;
2402
}
2403
}
2404
}
2405
}
2406
}
2407
}
2408
/*****************
2411
* Progress bars *
2412
*****************/
2413
progressbar {
2414
// sizing
2415
&.horizontal {
2416
trough,
2417
progress { min-height: $bar_size; }
2418
}
2419
&.vertical {
2421
trough,
2422
progress { min-width: $bar_size; }
2423
}
2424
// FIXME: insensitive state missing and some other state should be set probably
2426
color: $tertiary_fg_color;
2427
font-size: smaller;
2428
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2430
progress { background-color: $primary_color; }
2432
&.osd { // progressbar.osd used for epiphany page loading progress
2434
// min-width: $bar_size;
2435
// min-height: $bar_size;
2436
// background-color: transparent;
2437
// trough { background-color: transparent; }
2439
progress {
2441
}
2442
}
2443
}
2444
/*************
2447
* Level Bar *
2448
*************/
2449
levelbar {
2450
block {
2451
min-width: $medium_size;
2452
min-height: $bar_size;
2453
}
2454
&.vertical block {
2456
min-width: $bar_size;
2457
min-height: $medium_size;
2458
}
2459
trough {
2461
padding: 2px;
2462
border-radius: 2px;
2463
@include entry(normal);
2465
&:disabled { @include entry(disabled); }
2467
}
2468
&.horizontal.discrete block { margin: 0 1px; }
2470
&.vertical.discrete block { margin: 1px 0; }
2472
&.horizontal.discrete trough { padding: 2px 1px; }
2474
&.vertical.discrete trough { padding: 1px 2px; }
2476
block {
2478
&.low {
2479
background-color: $warning_color;
2480
}
2481
&.high,
2483
&:not(.empty) {
2484
background-color: $primary_color;
2485
}
2486
&.full {
2488
background-color: $success_color;
2489
}
2490
&.empty {
2492
background-color: $track_color;
2493
color: $disabled_fg_color;
2494
}
2495
}
2496
}
2497
/****************
2500
* Print dialog *
2501
*****************/
2502
printdialog {
2503
paper {
2504
padding: 0;
2505
border: 1px solid $borders_color;
2506
background: $base_color;
2507
color: $fg_color;
2508
}
2509
.dialog-action-box { margin: 12px; }
2511
}
2512
/**********
2515
* Frames *
2516
**********/
2517
frame > border,
2518
.frame {
2519
margin: 0;
2520
padding: 0;
2521
border: 1px solid $borders_color;
2522
border-radius: 0;
2523
box-shadow: none;
2524
&.flat { border-style: none; }
2526
}
2527
actionbar > revealer > box {
2529
padding: $container_padding;
2530
border-top: 1px solid $borders_color;
2531
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2533
}
2534
scrolledwindow {
2536
viewport.frame { // avoid double borders when viewport inside scrolled window
2537
border-style: none;
2538
}
2539
// This is used when content is touch-dragged past boundaries.
2541
// draws a box on top of the content, the size changes programmatically.
2542
@at-root overshoot {
2543
&.top { @include overshoot(top); }
2544
&.bottom { @include overshoot(bottom); }
2546
&.left { @include overshoot(left); }
2548
&.right { @include overshoot(right); }
2550
}
2551
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2553
@at-root undershoot {
2554
&.top { @include undershoot(top); }
2555
&.bottom { @include undershoot(bottom); }
2557
&.left { @include undershoot(left); }
2559
&.right { @include undershoot(right); }
2561
}
2562
@at-root junction { // the small square between two scrollbars
2564
border-style: solid none none solid;
2565
border-width: 1px;
2566
border-color: $borders_color;
2567
background-color: $base_color;
2568
&:dir(rtl) { border-style: solid solid none none; }
2570
}
2571
}
2572
//vbox and hbox separators
2574
separator {
2575
min-width: 1px;
2576
min-height: 1px;
2577
background: $borders_color;
2578
}
2579
/*********
2582
* Lists *
2583
*********/
2584
list {
2585
border-color: $borders_color;
2586
background-color: $base_color;
2587
row { padding: 2px; }
2589
}
2590
// FIXME
2592
$row_transition: $longer_transition, background-color 0, color 0;
2593
row {
2595
&.activatable {
2596
transition: $row_transition;
2597
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0);
2598
background-image: radial-gradient(circle farthest-corner at center,
2599
gtkalpha(currentColor, 0) 100%,
2600
transparent 0%),
2601
image(gtkalpha(currentColor, 0));
2602
&:hover {
2604
transition: $row_transition, box-shadow 0;
2605
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0.05);
2606
}
2607
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2609
&:active {
2610
transition: $row_transition, background-image 0;
2611
animation: row_ripple_effect $longer_duration $deceleration_curve forwards;
2612
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, $lower_opacity / 2);
2613
}
2614
}
2615
&:selected { @extend %selected_items; }
2617
}
2618
/*********************
2621
* App Notifications *
2622
*********************/
2623
.app-notification,
2624
.app-notification.frame {
2625
@extend %osd;
2626
@extend toolbar.osd;
2628
margin: 8px;
2630
button { @extend %button_basic.flat; }
2632
border { border: none; }
2634
}
2635
/*************
2638
* Expanders *
2639
*************/
2640
expander {
2641
arrow {
2642
transition: all $shorter_duration $standard_curve;
2643
min-width: 16px;
2644
min-height: 16px;
2645
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2646
-gtk-icon-transform: rotate(-90deg);
2647
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2649
&:checked { -gtk-icon-transform: unset; }
2651
color: $secondary_fg_color;
2653
&:hover, &:active { color: $fg_color; }
2655
&:disabled { color: $disabled_secondary_fg_color; }
2657
&:selected {
2659
color: $secondary_inversed_fg_color;
2660
&:hover, &:active { color: $inversed_fg_color; }
2662
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2664
}
2665
}
2666
}
2667
/************
2670
* Calendar *
2671
***********/
2672
calendar {
2673
padding: 1px;
2674
border: 1px solid $borders_color;
2675
color: $fg_color;
2676
&:disabled { color: $disabled_fg_color; }
2678
&:selected {
2680
@extend %selected_items;
2681
border-radius: 2px + 1px;
2683
}
2684
&.header {
2686
border-style: none none solid;
2687
border-radius: 0;
2688
}
2689
&.button { @extend %simple_flat_button; }
2691
&.highlight {
2693
color: gtkalpha(currentColor, $hint_opacity);
2694
font-weight: 500;
2695
}
2696
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2698
}
2699
/***********
2702
* Dialogs *
2703
***********/
2704
messagedialog { // Message Dialog styling
2705
&.background { background-color: $lighter_bg_color; }
2706
.titlebar {
2708
min-height: $small_size;
2709
border-style: none;
2710
box-shadow: inset 0 1px $highlight_color;
2711
background-color: $lighter_bg_color;
2712
}
2713
&.csd { // rounded bottom border styling for csd version
2715
&.background {
2716
// bigger radius for better antialiasing
2717
border-bottom-left-radius: 2px;
2718
border-bottom-right-radius: 2px;
2719
}
2720
.dialog-action-area button {
2722
padding: 8px 16px;
2723
border-top: 1px solid $borders_color;
2724
border-radius: 0;
2725
@extend %simple_flat_button;
2727
&:first-child { border-bottom-left-radius: 2px; }
2729
&:last-child { border-bottom-right-radius: 2px; }
2731
}
2732
}
2733
}
2734
filechooser {
2736
.dialog-action-box { border-top: 1px solid $borders_color; }
2737
#pathbarbox {
2739
border-bottom: 1px solid $borders_color;
2740
background-color: $bg_color;
2741
}
2742
}
2743
filechooserbutton:drop(active) {
2745
box-shadow: none;
2746
}
2747
/***********
2750
* Sidebar *
2751
***********/
2752
.sidebar {
2753
border-style: none;
2754
background-color: $lighter_bg_color;
2755
@at-root %sidebar_left,
2757
&:dir(ltr),
2758
&.left,
2759
&.left:dir(rtl) {
2760
border-right: 1px solid $borders_color;
2761
border-left-style: none;
2762
}
2763
@at-root %sidebar_right
2765
&:dir(rtl),
2766
&.right {
2767
border-left: 1px solid $borders_color;
2768
border-right-style: none;
2769
}
2770
list { background-color: transparent; }
2772
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2774
}
2775
stacksidebar {
2777
&.sidebar {
2778
&:dir(ltr),
2779
&.left,
2780
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2781
&:dir(rtl),
2783
&.right { list { @extend %sidebar_right; }}
2784
}
2785
row {
2787
padding: 10px 4px;
2788
> label {
2790
padding-left: 6px;
2791
padding-right: 6px;
2792
}
2793
&.needs-attention > label { @extend %needs_attention; }
2795
}
2796
}
2797
/****************
2800
* File chooser *
2801
****************/
2802
placessidebar {
2803
> viewport.frame { border-style: none; }
2804
list { padding: (4px - 3px) 0 4px; }
2806
row {
2808
// Needs overriding of the GtkListBoxRow padding
2809
min-height: 32px;
2810
margin: -1px 0; // Remove unknown margins
2811
padding: 0;
2812
// Using margins/padding directly in the SidebarRow
2814
// will make the animation of the new bookmark row jump
2815
> revealer { padding: 0 12px; }
2816
&:selected { color: $inversed_fg_color; }
2818
&:disabled { color: $disabled_fg_color; }
2820
image.sidebar-icon {
2822
opacity: $hint_opacity; // dim the device icons
2823
&:dir(ltr) { padding-right: 8px; }
2825
&:dir(rtl) { padding-left: 8px; }
2826
}
2827
label.sidebar-label {
2829
&:dir(ltr) { padding-right: 2px; }
2830
&:dir(rtl) { padding-left: 2px; }
2831
}
2832
@at-root button.sidebar-button {
2834
@extend %simple_flat_button;
2835
@extend %small_button;
2837
row:selected & {
2839
}
2840
}
2841
&.sidebar-placeholder-row {
2843
min-height: 2px;
2844
padding: 0 8px;
2845
background-image: image($accent_color);
2846
background-clip: content-box;
2847
}
2848
&.sidebar-new-bookmark-row { color: $accent_color; }
2850
&:drop(active):not(:disabled) {
2852
box-shadow: inset 0 0 0 2px $accent_color;
2853
&:selected {
2855
// background-color: $accent_color;
2856
// color: $inversed_fg_color;
2857
}
2858
}
2859
}
2860
}
2861
placesview {
2863
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2864
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2866
// this selects the "connect to server" label
2868
> actionbar > revealer > box > label {
2869
padding-left: 8px;
2870
padding-right: 8px;
2871
}
2872
}
2873
/*********
2876
* Paned *
2877
*********/
2878
paned {
2879
> separator {
2880
min-width: 1px;
2881
min-height: 1px;
2882
-gtk-icon-source: none; // defeats the ugly default handle decoration
2883
border-style: none; // just to be sure
2884
background-color: transparent;
2885
// workaround, using background istead of a border since the border will get rendered twice (?)
2886
background-image: image($borders_color);
2887
background-size: 1px 1px;
2888
&.wide {
2890
min-width: 6px;
2891
min-height: 6px;
2892
background-color: $bg_color;
2893
background-image: image($borders_color), image($borders_color);
2894
background-size: 1px 1px, 1px 1px;
2895
}
2896
}
2897
&.horizontal > separator {
2899
background-repeat: repeat-y;
2900
&:dir(ltr) {
2902
margin: 0 -8px 0 0;
2903
padding: 0 8px 0 0;
2904
background-position: left;
2905
}
2906
&:dir(rtl) {
2908
margin: 0 0 0 -8px;
2909
padding: 0 0 0 8px;
2910
background-position: right;
2911
}
2912
&.wide {
2914
margin: 0;
2915
padding: 0;
2916
background-repeat: repeat-y, repeat-y;
2917
background-position: left, right;
2918
}
2919
}
2920
&.vertical > separator {
2922
margin: 0 0 -8px 0;
2923
padding: 0 0 8px 0;
2924
background-repeat: repeat-x;
2925
background-position: top;
2926
&.wide {
2928
margin: 0;
2929
padding: 0;
2930
background-repeat: repeat-x, repeat-x;
2931
background-position: bottom, top;
2932
}
2933
}
2934
}
2935
/**************
2938
* GtkInfoBar *
2939
**************/
2940
infobar {
2941
border-style: none;
2942
&.info { background-color: $info_bg_color; }
2944
&.question { background-color: $question_bg_color; }
2946
&.warning { background-color: $warning_bg_color; }
2948
&.error { background-color: $error_bg_color; }
2950
&.info,
2952
&.question,
2953
&.warning,
2954
&.error {
2955
> label, & { color: $inversed_fg_color; }
2956
button { @extend %button_selected; }
2958
selection { }
2960
*:link { @extend %link_selected; }
2962
}
2963
}
2964
/************
2967
* Tooltips *
2968
************/
2969
tooltip {
2970
&.background {
2971
// background-color needs to be set this way otherwise it gets drawn twice
2972
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2973
box-shadow: inset 0 1px $highlight_color;
2974
background-color: scale-alpha($base_color, $higher_opacity);
2975
}
2976
// @extend %osd;
2978
// padding: 4px; /* not working */
2980
border-radius: 2px;
2981
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2982
// FIXME: we need a border or tooltips vanish on black background.
2984
decoration { background-color: transparent; }
2985
label {
2987
// tooltip label has already 6px margins
2988
min-height: 32px - 6px * 2;
2989
padding: 0 8px - 6px;
2990
}
2991
* { // Yeah this is ugly
2993
padding: 0;
2994
background-color: transparent;
2995
color: inherit;
2996
}
2997
}
2998
/*****************
3001
* Color Chooser *
3002
*****************/
3003
colorswatch {
3004
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3005
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3006
// applied to the overlay box.
3007
// base color corners rounding
3009
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3010
// sports a bigger radius.
3011
// nth-child is needed by the custom color strip.
3012
&.top {
3014
border-top-left-radius: $md_radius + 0.5px;
3015
border-top-right-radius: $md_radius + 0.5px;
3016
overlay {
3018
border-top-left-radius: $md_radius;
3019
border-top-right-radius: $md_radius;
3020
}
3021
}
3022
&.bottom {
3024
border-bottom-left-radius: $md_radius + 0.5px;
3025
border-bottom-right-radius: $md_radius + 0.5px;
3026
overlay {
3028
border-bottom-left-radius: $md_radius;
3029
border-bottom-right-radius: $md_radius;
3030
}
3031
}
3032
&.left,
3034
&:first-child:not(.top) {
3035
border-top-left-radius: $md_radius + 0.5px;
3036
border-bottom-left-radius: $md_radius + 0.5px;
3037
overlay {
3039
border-top-left-radius: $md_radius;
3040
border-bottom-left-radius: $md_radius;
3041
}
3042
}
3043
&.right,
3045
&:last-child:not(.bottom) {
3046
border-top-right-radius: $md_radius + 0.5px;
3047
border-bottom-right-radius: $md_radius + 0.5px;
3048
overlay {
3050
border-top-right-radius: $md_radius;
3051
border-bottom-right-radius: $md_radius;
3052
}
3053
}
3054
&.dark overlay { color: $dark_contrast_color; }
3056
&.light overlay { color: $light_contrast_color; }
3058
&.dark { color: $dark_contrast_color; } // for focus ring
3060
&.light { color: $light_contrast_color; } // for focus ring
3062
&:drop(active) {
3064
box-shadow: none;
3065
&.light overlay {
3067
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3068
}
3069
&.dark overlay {
3071
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3072
}
3073
}
3074
overlay {
3076
transition: $shadow_transition;
3077
box-shadow: $z-depth-1;
3078
&:hover { box-shadow: $z-depth-2; }
3080
}
3081
&#add-color-button {
3083
border-radius: $md_radius $md_radius 0 0;
3084
color: $dark_contrast_color; // for focus ring
3085
&:only-child { border-radius: $md_radius; }
3087
overlay {
3089
background-image: linear-gradient(to right,
3090
$error_bg_color 25%,
3091
$warning_bg_color 25%, $warning_bg_color 50%,
3092
$info_bg_color 50%, $info_bg_color 75%,
3093
$question_bg_color 75%);
3094
color: $dark_contrast_color;
3095
}
3096
}
3097
&:disabled {
3099
opacity: $disabled_opacity;
3100
overlay { box-shadow: none; }
3102
}
3103
row:selected & {
3105
}
3106
&#editor-color-sample {
3108
border-radius: $md_radius + 0.5px;
3109
overlay { border-radius: $md_radius; }
3111
// overlay:hover { box-shadow: $z-depth-1; }
3113
}
3114
}
3115
// colorscale popup
3117
colorchooser .popover.osd {
3118
transition: $shadow_transition;
3119
border-radius: 2px;
3120
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
3121
background-color: $base_color;
3122
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
3124
spinbutton:not(.vertical) { @extend %entry.flat; }
3126
}
3127
/********
3130
* Misc *
3131
********/
3132
//content view (grid/list)
3133
.content-view {
3134
background-color: $bg_color;
3135
// &:hover { -gtk-icon-effect: highlight; }
3137
rubberband { @extend rubberband; }
3139
}
3140
.scale-popup {
3142
.osd & { @extend %osd; }
3143
.osd & button.flat { //FIXME: quick hack, redo properly
3145
}
3146
button { // +/- buttons on GtkVolumeButton popup
3148
}
3149
}
3150
/**********************
3153
* Window Decorations *
3154
*********************/
3155
decoration {
3156
transition: $shadow_transition;
3157
border-radius: 2px 2px 0 0;
3158
box-shadow: $z-depth-4, 0 16px 16px transparent;
3159
// FIXME rationalize shadows
3161
// this is used for the resize cursor area
3163
margin: 8px;
3164
&:backdrop {
3166
// the transparent shadow here is to enforce that the shadow extents don't
3167
// change when we go to backdrop, to prevent jumping windows.
3168
// The biggest shadow should be in the same order then in the active state
3169
// or the jumping will happen during the transition.
3170
box-shadow: $z-depth-2, 0 16px 16px transparent;
3171
}
3172
.maximized &,
3174
.fullscreen &,
3175
.tiled & { border-radius: 0; }
3176
.popup & { box-shadow: none; }
3178
// server-side decorations as used by mutter
3180
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3181
.csd.popup & {
3183
border-radius: 2px;
3184
box-shadow: $z-depth-2;
3185
}
3186
tooltip.csd & {
3188
border-radius: 2px;
3189
box-shadow: $z-depth-2;
3190
}
3191
messagedialog.csd & {
3193
border-radius: 2px;
3194
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3195
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3197
}
3198
.solid-csd & {
3200
margin: 0;
3201
padding: 4px;
3202
// border: solid 1px $borders_color;
3203
// border-radius: 0;
3204
box-shadow: inset 0 0 0 4px $headerbar_color;
3205
// background-color: $borders_color;
3206
}
3207
}
3208
// Window Close button
3210
button.titlebutton {
3211
// @extend %simple_flat_button;
3212
@extend %circular_button;
3214
.selection-mode & {
3216
}
3217
}
3218
// catch all extend :)
3221
%selected_items {
3223
background-color: $primary_color;
3224
@at-root %nobg_selected_items, & {
3226
color: $inversed_fg_color;
3227
&:disabled { color: $disabled_inversed_fg_color; }
3229
}
3230
}
3231
.monospace { font-family: monospace; }
3233
/**********************
3236
* Touch Copy & Paste *
3237
*********************/
3238
//touch selection handlebars for the Popover.osd above
3239
cursor-handle {
3240
border-radius: $circular_radius;
3241
background-color: $accent_color;
3242
background-image: none;
3243
&.top:dir(ltr), &.bottom:dir(rtl) {
3245
padding-left: 6px;
3246
border-top-right-radius: 0;
3247
}
3248
&.bottom:dir(ltr), &.top:dir(rtl) {
3250
padding-right: 6px;
3251
border-top-left-radius: 0;
3252
}
3253
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3255
-GtkWidget-text-handle-width: 24;
3256
-GtkWidget-text-handle-height: 30;
3257
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3259
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3260
url('#{$_url}@2.png'));
3261
}
3262
}
3263
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3265
%circular_button,
3267
button.circular { // FIXME: aggregate to buttons
3268
border-radius: $circular_radius;
3269
-gtk-outline-radius: $circular_radius;
3270
// label { padding: 0; }
3272
}
3273
%small_button {
3275
min-height: $small_size;
3276
min-width: $small_size;
3277
padding: 0;
3278
border-radius: $circular_radius;
3279
-gtk-outline-radius: $circular_radius;
3280
}
3281
// shortcut window keys
3283
.keycap {
3284
min-width: 28px - 8px * 2;
3285
min-height: 28px - 2px;
3286
margin-top: 2px;
3287
padding-bottom: 2px;
3288
padding-left: 8px;
3289
padding-right: 8px;
3290
border: solid 1px $borders_color;
3292
border-radius: 2px + 1px;
3293
box-shadow: inset 0 -2px $borders_color;
3294
background-color: $base_color;
3295
color: $fg_color;
3296
font-size: smaller;
3297
}
3298
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3300
transition: $longer_transition;
3301
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_color;
3302
caret-color: $accent_color;
3303
}
3304
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3306
stackswitcher button.circular,
3308
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3309
min-width: $medium_size;
3310
min-height: $medium_size;
3311
padding: 0;
3312
}
3313