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
&.image-button {
417
min-width: 24px;
418
padding: ($medium_size - 24px) / 2;
419
-gtk-outline-radius: $circular_radius;
420
border-radius: $circular_radius;
421
}
422
&.text-button {
424
padding-left: 16px;
425
padding-right: 16px;
426
}
427
&.text-button.image-button {
429
padding-left: ($medium_size - 16px) / 2;
430
padding-right: ($medium_size - 16px) / 2;
431
-gtk-outline-radius: 2px;
432
border-radius: 2px;
433
label {
435
&:last-child { padding-left: 2px; padding-right: 16px - ($medium_size - 16px) / 2; }
436
&:first-child { padding-left: 16px - ($medium_size - 16px) / 2; padding-right: 2px; }
437
}
438
}
439
.linked > & { @extend %linked; }
441
.linked.vertical > & { @extend %linked_vertical; }
443
.linked > &.flat,
445
.linked.vertical > &.flat {
446
border-radius: 2px;
447
&.image-button {
449
-gtk-outline-radius: $circular_radius;
450
border-radius: $circular_radius;
451
}
452
&.text-button.image-button {
454
-gtk-outline-radius: 2px;
455
border-radius: 2px;
456
}
457
}
458
&:drop(active) {
460
// box-shadow: inset 0 0 0 2px $accent_color;
461
}
462
}
463
@at-root %button_selected, row:selected & {
465
&:disabled { color: $disabled_secondary_inversed_fg_color; }
466
}
467
// big standalone buttons like in Documents pager
469
&.osd {
470
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
471
&.image-button { padding: ($large_size - 24px) / 2; }
473
&:disabled { opacity: 0; }
475
}
476
//overlay / OSD style
478
@at-root %osd_button,
479
.osd & {
480
}
481
// Suggested and Destructive Action buttons
483
@each $b_type, $b_color in (suggested-action, $suggested_color),
484
(destructive-action, $destructive_color) {
485
&.#{$b_type} {
486
background-color: $b_color;
487
color: $inversed_fg_color;
488
// @include button(normal, $b_color, $inversed_fg_color);
490
// &:hover { @include button(hover, $b_color, $inversed_fg_color); }
492
// &:active, &:checked { @include button(active, $b_color, $inversed_fg_color); }
494
&:disabled { @include button(disabled, $b_color, $inversed_fg_color); }
496
&:checked { background-color: mix($inversed_fg_color, $b_color, percentage($lower_opacity)); }
498
&.flat {
500
background-color: transparent;
501
color: $b_color;
502
// @include button(flat-normal, $b_color, $inversed_fg_color);
504
// &:hover { @include button(flat-hover, $b_color, $inversed_fg_color); }
506
// &:active, &:checked { @include button(flat-active, $b_color, $inversed_fg_color); }
508
&:disabled { @include button(flat-disabled, $b_color, $inversed_fg_color); }
510
}
511
.osd & {
513
}
514
}
515
}
516
.stack-switcher > & {
518
// to position the needs attention dot, padding is added to the button
519
// child, a label needs just lateral padding while an icon needs vertical
520
// padding added too.
521
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
523
> label {
525
padding-left: 6px; // label padding
526
padding-right: 6px; //
527
}
528
> image {
530
padding-left: 6px; // image padding
531
padding-right: 6px; //
532
padding-top: 3px; //
533
padding-bottom: 3px; //
534
}
535
&.text-button {
537
// compensate text-button paddings
538
padding-left: 16px - 6px;
539
padding-right: 16px - 6px;
540
}
541
&.image-button {
543
// we want image buttons to have a 1:1 aspect ratio, so compensation
544
// of the padding added to the GtkImage is needed
545
padding-left: ($medium_size - 16px) / 2 - 6px;
546
padding-right: ($medium_size - 16px) / 2 - 6px;
547
}
548
&.needs-attention {
550
> label,
551
> image { @extend %needs_attention; }
552
&:checked {
554
> label,
555
> image {
556
animation: none;
557
background-image: none;
558
}
559
}
560
}
561
}
562
// hide separators
564
separator {
565
min-width: 0;
566
min-height: 0;
567
background: transparent;
568
}
569
// &.font,
571
// &.file { separator { background-color: transparent; }}
572
// &.font { > box > box > label { font-weight: bold; }}
574
// inline-toolbar buttons
576
.inline-toolbar & {
577
// @extend %button_basic.flat;
578
&:not(.text-button) { @extend %circular_button; }
580
}
581
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
583
}
584
%needs_attention {
586
animation: needs_attention $longer_duration $deceleration_curve forwards;
587
background-repeat: no-repeat;
588
background-position: right 3px;
589
background-size: 6px 6px;
590
&:dir(rtl) { background-position: left 3px; }
592
}
593
// all the following is for the +|- buttons on inline toolbars, that way
595
// should really be deprecated...
596
.inline-toolbar toolbutton > button { // redefining the button look is
597
// needed since those are flat...
598
}
599
// More inline toolbar buttons
601
toolbar.inline-toolbar toolbutton {
602
// > button.flat { @extend %linked_middle; }
603
// &:first-child > button.flat { @extend %linked:first-child; }
605
// &:last-child > button.flat { @extend %linked:last-child; }
607
// &:only-child > button.flat { @extend %linked:only-child; }
609
}
610
%linked_middle {
612
-gtk-outline-radius: 2px;
613
border-radius: 0;
614
}
615
%linked {
617
@extend %linked_middle;
618
&:first-child {
620
border-top-left-radius: 2px;
621
border-bottom-left-radius: 2px;
622
}
623
&:last-child {
625
border-top-right-radius: 2px;
626
border-bottom-right-radius: 2px;
627
}
628
&:only-child {
630
border-radius: 2px;
631
}
632
}
633
%linked_vertical_middle {
635
-gtk-outline-radius: 2px;
636
border-radius: 0;
637
}
638
%linked_vertical{
640
@extend %linked_vertical_middle;
641
&:first-child {
643
border-top-left-radius: 2px;
644
border-top-right-radius: 2px;
645
}
646
&:last-child {
648
border-bottom-left-radius: 2px;
649
border-bottom-right-radius: 2px;
650
}
651
&:only-child {
653
border-radius: 2px;
654
}
655
}
656
/* menu buttons */
658
modelbutton.flat,
659
.menuitem.button.flat {
660
min-height: $menuitem_size;
661
padding: 0 8px;
662
border-radius: 2px;
663
color: inherit;
664
@extend %simple_flat_button;
666
&:selected { @extend %selected_items; }
668
check,
670
radio {
671
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
672
&, &:hover { background-image: none; }
674
&:active { animation: none; }
676
&:last-child { margin-left: -8px; margin-right: -16px; }
678
&:first-child { margin-left: -16px; margin-right: -8px; }
680
}
681
check:not(:indeterminate):checked { @extend %check_checked; }
683
// radio:not(:indeterminate):checked { @extend %radio_checked; }
685
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
687
}
688
modelbutton.flat arrow {
690
background: none;
691
&:hover { background: none; }
693
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
695
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
697
}
698
button.color {
700
min-height: $small_size;
701
min-width: $small_size;
702
padding: $container_padding;
703
colorswatch:only-child {
705
// &, overlay { border-radius: 0; }
706
}
707
}
708
/*********
711
* Links *
712
*********/
713
*:link {
714
&, &:hover, &:active { color: $link_color; }
715
&:visited {
717
&, &:hover, &:active { color: $link_visited_color; }
718
}
719
@at-root %link_selected,
721
&:selected,
722
*:selected & { color: $inversed_fg_color; }
723
}
724
button:link,
726
button:visited {
727
@extend *:link;
728
> label { text-decoration-line: underline; }
730
}
731
/*****************
733
* GtkSpinButton *
734
*****************/
735
spinbutton {
736
&:not(.vertical) {
737
// in this horizontal configuration, the whole spinbutton
738
// behaves as the entry, so we extend the entry styling
739
// and nuke the style on the internal entry
740
@extend %entry;
741
padding: 0;
743
%spinbutton_entry,
745
entry {
746
min-width: $large_size - 8px * 2;
747
// reset all the other props since the spinbutton node is styled here
748
margin: 0;
749
border-image: none;
750
border-radius: 0;
751
box-shadow: none;
752
background-color: transparent;
753
}
754
button {
756
// margin: $container_padding;
757
border: solid $container_padding transparent;
758
@extend %simple_flat_button;
760
@extend %small_button;
762
&.up:dir(ltr),
764
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
765
&.up:dir(rtl),
767
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
768
}
769
}
770
// OSD horizontal
772
.osd &:not(.vertical) {
773
button {
774
}
775
}
776
// Vertical
778
&.vertical {
779
// in the vertical configuration, we treat the spinbutton
780
// as a box, and tweak the style of the entry in the middle
781
// so that it's linked
782
// FIXME: this should not be set at all, but otherwise it gets the wrong
784
// color
785
&:disabled { color: $disabled_fg_color; }
786
&:drop(active) {
788
box-shadow: none;
789
}
790
entry {
792
min-height: $medium_size;
793
min-width: $large_size;
794
padding: 0;
795
}
796
button {
798
min-height: $medium_size;
799
min-width: $large_size;
800
padding: 0;
801
@extend %simple_flat_button;
803
&.up { border-radius: 2px 2px 0 0; }
805
&.down { border-radius: 0 0 2px 2px; }
807
}
808
}
809
// OSD vertical
811
.osd &.vertical button:first-child {
812
}
813
// Misc
815
treeview &:not(.vertical) {
816
min-height: 0;
817
border-style: none;
818
border-radius: 0;
819
entry {
821
min-height: 0;
822
padding: 1px 2px;
823
}
824
}
825
}
826
/**************
829
* ComboBoxes *
830
**************/
831
combobox {
832
arrow {
833
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
834
min-height: 16px;
835
min-width: 16px;
836
}
837
menu,
839
.menu,
840
.context-menu {
841
padding: 2px 0;
842
menuitem {
844
min-height: $medium_size;
845
padding: 0 ($medium_size - 16px) / 2;
846
}
847
}
848
&.linked {
850
button:nth-child(2) {
851
&:dir(ltr) { @extend %linked:last-child; }
852
&:dir(rtl) { @extend %linked:first-child; }
853
}
854
}
855
&:drop(active) { // FIXME: untested
857
box-shadow: none;
858
// button.combo { @extend %button_basic:drop(active); }
860
}
861
}
862
.linked > combobox > box > button.combo {
864
// the combo is a composite widget so the way we do button linking doesn't
865
// work, special case needed. See
866
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
867
&:dir(ltr),
869
&:dir(rtl) { @extend %linked_middle; } // specificity bump
870
}
871
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
873
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
874
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
875
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
877
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
878
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
879
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
880
/************
883
* Toolbars *
884
************/
885
toolbar {
886
-GtkWidget-window-dragging: true;
887
padding: $container_padding / 2;
888
background-color: $bg_color;
889
button { @extend %button_basic.flat; }
891
// on OSD
893
.osd & { background-color: transparent; }
894
// stand-alone OSD toolbars
896
&.osd {
897
transition: $shadow_transition;
898
padding: $container_padding;
899
border-radius: 2px;
900
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
901
background-color: $base_color;
902
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
904
&.left,
906
&.right,
907
&.top,
908
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
909
}
910
// toolbar separators
912
&.horizontal separator { margin: $container_padding / 2; }
913
&.vertical separator { margin: $container_padding / 2; }
914
&:not(.inline-toolbar):not(.osd) {
916
scale,
917
entry,
918
spinbutton,
919
button { margin: $container_padding / 2; }
920
.linked entry,
922
.linked spinbutton,
923
.linked button {
924
&:not(:first-child) { margin-left: 0; }
925
&:not(:last-child) { margin-right: 0; }
926
}
927
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
929
}
930
}
931
//searchbar, location-bar & inline-toolbar
933
.inline-toolbar {
934
padding: $container_padding;
935
border-style: solid;
936
border-width: 0 1px 1px;
937
border-color: $borders_color;
938
background-color: $alt_base_color;
939
}
940
searchbar,
942
.location-bar {
943
padding: $container_padding;
944
border-style: solid;
945
border-width: 0 0 1px;
946
border-color: $borders_color;
947
background-color: $bg_color;
948
background-clip: border-box;
949
}
950
/***************
953
* Header bars *
954
***************/
955
%titlebar,
956
headerbar {
957
transition: background-color $shorter_duration $deceleration_curve;
958
min-height: $large_size;
959
padding: 0 $container_padding;
960
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
961
background-color: $headerbar_color;
962
color: $inversed_fg_color;
963
&:backdrop {
965
color: $secondary_inversed_fg_color;
966
}
967
.title {
969
transition: $longer_transition;
970
padding: 0 12px;
971
font-weight: bold;
972
}
973
.subtitle {
975
transition: $longer_transition;
976
padding: 0 12px;
977
font-size: smaller;
978
@extend .dim-label;
980
}
981
button:not(.suggested-action):not(.destructive-action) {
983
@extend %button_basic.flat;
984
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
986
currentColor 0%,
987
transparent 0%)
988
0 0 0 / 0 0 0px;
989
&:checked {
991
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
992
currentColor 100%,
993
transparent 0%)
994
0 0 2 / 0 0 2px;
995
&, &:disabled { background-color: transparent; }
997
}
998
}
999
button.suggested-action, button.destructive-action {
1001
&:disabled {
1002
color: gtkalpha(currentColor, $disabled_opacity);
1003
> label { color: inherit; }
1005
}
1006
}
1007
&.selection-mode {
1009
transition: background-color 0 $longer_duration;
1010
animation: header_ripple_effect $longer_duration $deceleration_curve;
1011
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1012
background-color: $primary_color;
1013
color: $inversed_fg_color;
1014
&:backdrop {
1016
color: $secondary_inversed_fg_color;
1017
}
1018
.subtitle:link { @extend *:link:selected; }
1020
button:not(.suggested-action):not(.destructive-action) {
1022
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1023
currentColor 0%,
1024
transparent 0%)
1025
0 0 0 / 0 0 0px;
1026
color: currentColor;
1027
&:disabled {
1029
color: gtkalpha(currentColor, $disabled_opacity);
1030
> label { color: inherit; }
1032
}
1033
&:checked {
1035
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1036
currentColor 100%,
1037
transparent 0%)
1038
0 0 2 / 0 0 2px;
1039
color: currentColor;
1040
&:disabled {
1042
color: gtkalpha(currentColor, $disabled_opacity);
1043
> label { color: inherit; }
1045
}
1046
}
1047
}
1048
.selection-menu {
1050
padding-left: 16px;
1051
padding-right: 16px;
1052
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1054
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1056
}
1057
}
1058
.fullscreen &,
1060
.tiled &,
1061
.maximized & {
1062
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1063
box-shadow: $z-depth-1;
1064
}
1065
&.default-decoration {
1067
min-height: $small_size;
1068
padding: $container_padding;
1069
border-width: 0;
1070
button.titlebutton {
1072
min-height: $small_size;
1073
min-width: $small_size;
1074
margin: 0;
1075
padding: 0;
1076
&:active { // add fallback
1078
background-image: radial-gradient(circle farthest-corner at center,
1079
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1080
transparent 0%),
1081
image(gtkalpha(currentColor, $lower_opacity / 2));
1082
}
1083
}
1084
}
1085
.solid-csd & {
1087
&:dir(rtl), &:dir(ltr) { // specificity bump
1088
margin-left: -2px;
1089
margin-right: -2px;
1090
margin-top: -2px;
1091
// border-radius: 0;
1092
box-shadow: inset 0 1px $secondary_highlight_color;
1093
}
1094
}
1095
}
1096
headerbar {
1098
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1099
entry,
1100
spinbutton,
1101
// separator,
1102
button {
1103
margin-top: $container_padding;
1104
margin-bottom: $container_padding;
1105
}
1106
switch {
1108
margin-top: $container_padding * 2;
1109
margin-bottom: $container_padding * 2;
1110
}
1111
}
1112
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1114
border-top-left-radius: 2px;
1115
border-top-right-radius: 2px;
1116
}
1117
headerbar {
1119
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1120
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1121
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1123
}
1124
.titlebar:not(headerbar) {
1126
window.csd > & {
1127
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1128
padding: 0;
1129
background-color: transparent;
1130
background-image: none;
1131
border-style: none;
1132
box-shadow: none;
1133
}
1134
> separator {
1136
background-color: $headerbar_color;
1137
background-image: image($borders_color);
1138
}
1139
@extend %titlebar;
1141
}
1142
/************
1145
* Pathbars *
1146
************/
1147
%pathbar_button,
1148
.path-bar button {
1149
&.text-button, &.image-button, & {
1150
padding-left: 6px;
1151
padding-right: 6px;
1152
}
1153
&.text-button.image-button, & {
1155
// label:last-child { padding-left: 2px; padding-right: 8px; }
1156
// label:first-child { padding-left: 8px; padding-right: 2px; }
1157
}
1158
image {
1160
padding-left: ($medium_size - 16px) / 2 - 6px;
1161
padding-right: ($medium_size - 16px) / 2 - 6px;
1162
}
1163
&.slider-button {
1165
padding-left: 0;
1166
padding-right: 0;
1167
}
1168
:not(headerbar) & {
1170
@extend %flat_button;
1171
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1173
$primary_color 0%,
1174
transparent 0%)
1175
0 0 0 / 0 0 0px;
1176
border-radius: 2px;
1177
&:checked {
1179
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1180
$primary_color 100%,
1181
transparent 0%)
1182
0 0 2 / 0 0 2px;
1183
&, &:disabled { background-color: transparent; }
1185
}
1186
}
1187
}
1188
/**************
1191
* Tree Views *
1192
**************/
1193
treeview.view {
1194
@at-root * {
1195
-GtkTreeView-horizontal-separator: 4;
1196
-GtkTreeView-grid-line-width: 1;
1197
-GtkTreeView-grid-line-pattern: '';
1198
-GtkTreeView-tree-line-width: 1;
1199
-GtkTreeView-tree-line-pattern: '';
1200
-GtkTreeView-expander-size: 16;
1201
}
1202
border-left-color: $track_color; // this is actually the tree lines color,
1204
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1205
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1207
&:hover, &:active, &:selected { border-radius: 0; }
1209
&.separator {
1211
min-height: 1px + 2px * 2;
1212
color: $borders_color;
1213
}
1214
&:drop(active) {
1216
border-style: solid none;
1217
border-width: 1px;
1218
border-color: $accent_color;
1219
&.after { border-top-style: none; }
1221
&.before { border-bottom-style: none; }
1223
}
1224
&.expander {
1226
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1227
-gtk-icon-transform: rotate(-90deg);
1228
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1230
&:checked { -gtk-icon-transform: unset; }
1232
color: $secondary_fg_color;
1234
&:hover, &:active { color: $fg_color; }
1236
&:disabled { color: $disabled_secondary_fg_color; }
1238
&:selected {
1240
color: $secondary_inversed_fg_color;
1241
&:hover, &:active { color: $inversed_fg_color; }
1243
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1245
}
1246
}
1247
&.progressbar { // progress bar in treeviews
1249
border-style: none none solid;
1250
border-width: $bar_size;
1251
border-color: $primary_color;
1252
box-shadow: none;
1253
background-color: transparent;
1254
&:selected { border-color: currentColor; }
1256
}
1257
&.trough { // progress bar trough in treeviews
1259
border-style: none none solid;
1260
border-width: $bar_size;
1261
border-color: scale-alpha($primary_color, $lower_opacity);
1262
box-shadow: none;
1263
background-color: transparent;
1264
&:selected { border-color: $track_color; }
1266
}
1267
header {
1269
button {
1270
@extend row.activatable;
1271
padding: 2px 6px;
1273
border-style: none solid solid none;
1274
border-width: 1px;
1275
border-color: $borders_color;
1276
border-radius: 0;
1277
background-clip: border-box;
1278
&, &:hover, &:active { box-shadow: none; }
1280
&, &:disabled { background-color: $base_color; }
1282
&:last-child { border-right-style: none; }
1284
}
1285
}
1286
button.dnd,
1288
header.button.dnd { // for treeview-like derive widgets
1289
padding: 2px 6px;
1290
border-style: none solid solid;
1291
border-width: 1px;
1292
border-color: $borders_color;
1293
border-radius: 0;
1294
box-shadow: none;
1295
background-color: $base_color;
1296
background-clip: border-box;
1297
color: $primary_color;
1298
}
1299
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1301
}
1302
/*********
1305
* Menus *
1306
*********/
1307
menubar,
1308
.menubar {
1309
-GtkWidget-window-dragging: true;
1310
padding: 0;
1311
// box-shadow: inset 0 -1px $borders_color;
1312
background-color: $headerbar_color;
1313
> menuitem {
1315
transition: $shorter_transition;
1316
min-height: 20px;
1317
padding: 4px 8px;
1318
color: $secondary_inversed_fg_color;
1319
&:hover { //Seems like it :hover even with keyboard focus
1321
transition: none;
1322
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1323
color: $inversed_fg_color;
1324
}
1325
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1327
}
1328
}
1329
menu,
1331
.menu,
1332
.context-menu {
1333
margin: 4px 0;
1334
padding: 4px 0;
1335
box-shadow: inset 0 1px $highlight_color;
1336
background-color: $base_color;
1337
border: 1px solid $borders_color; // adds borders in a non composited env
1338
.csd & {
1340
border: none; // axes borders in a composited env
1341
border-radius: 2px;
1342
}
1343
menuitem {
1345
transition: $shorter_transition;
1346
min-height: 20px;
1347
min-width: 40px;
1348
padding: 4px 8px;
1349
font: initial;
1350
text-shadow: none;
1351
&:hover {
1353
transition: none;
1354
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1355
}
1356
&:disabled { color: $disabled_fg_color; }
1358
// submenu indicators
1360
arrow {
1361
min-height: 16px;
1362
min-width: 16px;
1363
&:dir(ltr) {
1365
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1366
margin-left: 8px;
1367
}
1368
&:dir(rtl) {
1370
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1371
margin-right: 8px;
1372
}
1373
}
1374
// avoids labels color being overridden, see
1376
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1377
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1378
}
1379
// overflow arrows
1381
> arrow {
1382
min-height: 16px;
1383
min-width: 16px;
1384
padding: 4px;
1385
border-radius: 0;
1386
background-color: $base_color;
1387
color: $secondary_fg_color;
1388
&.top {
1390
margin-top: -4px;
1391
border-bottom: 1px solid $borders_color;
1392
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1393
}
1394
&.bottom {
1396
margin-bottom: -4px;
1397
border-top: 1px solid $borders_color;
1398
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1399
}
1400
&:hover {
1402
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1403
color: $fg_color;
1404
}
1405
&:disabled {
1407
border-color: transparent;
1408
background-color: transparent;
1409
color: transparent;
1410
// color: $disabled_secondary_fg_color;
1411
}
1412
}
1413
separator { margin: 4px 0; }
1415
}
1416
menuitem {
1418
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1419
check,
1421
radio {
1422
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1423
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1424
}
1425
}
1426
.csd.popup { border-radius: 2px; }
1428
/***************
1431
* Popovers *
1432
***************/
1433
popover.background {
1434
transition: $shadow_transition;
1435
padding: 0;
1436
box-shadow: $z-depth-2; // TODO: this should really have a highlight
1437
background-color: $lighter_bg_color;
1438
&:backdrop { box-shadow: $z-depth-1; }
1440
&, .csd & {
1442
border-style: solid;
1443
border-width: 1px;
1444
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1445
border-radius: 2px + 1px;
1446
}
1447
> list,
1449
> .view,
1450
> toolbar {
1451
border-style: none;
1452
box-shadow: none;
1453
background-color: transparent;
1454
}
1455
&, .csd & {
1457
&.touch-selection,
1458
&.magnifier,
1459
&.osd { @extend %osd; }
1460
}
1461
// entry { @extend %entry.flat; }
1463
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1465
&.menu button.model {
1467
@extend %simple_flat_button;
1468
min-height: 32px;
1470
padding: 0 8px;
1471
border-radius: 2px;
1472
&:checked {
1474
background-color: $primary_color;
1475
color: $inversed_fg_color;
1476
}
1477
}
1478
separator { margin: 4px 0; }
1480
list separator { margin: 0; }
1482
}
1483
/*************
1485
* Notebooks *
1486
*************/
1487
notebook {
1488
> header {
1489
border-width: 1px;
1490
border-color: $borders_color;
1491
background-color: $bg_color;
1492
background-clip: border-box;
1493
&.top {
1495
border-bottom-style: solid;
1496
> tabs {
1497
margin-bottom: -1px;
1498
> tab {
1499
&:hover { box-shadow: inset 0 -2px $track_color; }
1501
&:checked { box-shadow: inset 0 -2px $primary_color; }
1503
}
1504
}
1505
}
1506
&.bottom {
1508
border-top-style: solid;
1509
> tabs {
1510
margin-top: -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
&.left {
1521
border-right-style: solid;
1522
> tabs {
1523
margin-right: -1px;
1524
> tab {
1525
&:hover { box-shadow: inset -2px 0 $track_color; }
1527
&:checked { box-shadow: inset -2px 0 $primary_color; }
1529
}
1530
}
1531
}
1532
&.right {
1534
border-left-style: solid;
1535
> tabs {
1536
margin-left: -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
&.top > tabs > arrow {
1547
@extend %notebook_vert_arrows;
1548
border-top-style: none;
1550
}
1551
&.bottom > tabs > arrow {
1553
@extend %notebook_vert_arrows;
1554
border-bottom-style: none;
1556
}
1557
@at-root %notebook_vert_arrows {
1559
padding-left: 4px;
1560
padding-right: 4px;
1561
&.down {
1563
margin-left: -8px;
1564
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1565
}
1566
&.up {
1568
margin-right: -8px;
1569
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1570
}
1571
}
1572
&.left > tabs > arrow {
1574
@extend %notebook_horz_arrows;
1575
border-left-style: none;
1577
}
1578
&.right > tabs > arrow {
1580
@extend %notebook_horz_arrows;
1581
border-right-style: none;
1583
}
1584
@at-root %notebook_horz_arrows {
1586
padding-top: 4px;
1587
padding-bottom: 4px;
1588
&.down {
1590
margin-top: -8px;
1591
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1592
}
1593
&.up {
1595
margin-bottom: -8px;
1596
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1597
}
1598
}
1599
> tabs > arrow {
1601
@extend %simple_flat_button;
1602
min-height: 16px;
1604
min-width: 16px;
1605
border-radius: 0;
1606
}
1607
tab {
1609
transition: $longer_transition;
1610
min-height: $small_size;
1611
min-width: $small_size;
1612
padding: $container_padding 12px;
1613
outline-offset: -6px;
1615
border-width: 1px; // for reorderable tabs
1617
border-color: transparent; //
1618
color: $secondary_fg_color;
1620
font-weight: 500;
1621
&:hover {
1623
color: $fg_color;
1624
&.reorderable-page {
1626
border-color: $borders_color;
1627
background-color: $alt_base_color;
1628
}
1629
}
1630
&:disabled { color: $disabled_secondary_fg_color; }
1632
&:checked {
1634
animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve;
1635
color: $fg_color;
1636
&:disabled { color: $disabled_fg_color; }
1638
&.reorderable-page {
1640
border-color: $borders_color;
1641
background-color: $base_color;
1642
}
1643
}
1644
// colors the button like the label, overridden otherwise
1646
button.flat {
1647
@extend %small_button;
1648
&:last-child {
1650
margin-left: $container_padding;
1651
margin-right: $container_padding - 12px;
1652
}
1653
&:first-child {
1655
margin-left: $container_padding - 12px;
1656
margin-right: $container_padding;
1657
}
1658
}
1659
}
1660
&.top,
1662
&.bottom {
1663
tabs {
1664
padding-left: 8px;
1665
padding-right: 8px;
1666
&:not(:only-child) {
1668
&:first-child { margin-left: 0; }
1669
&:last-child { margin-right: 0; }
1670
}
1671
tab {
1673
&.reorderable-page {
1674
margin: 0 -1px;
1675
border-style: none solid;
1676
}
1677
}
1678
}
1679
}
1680
&.left,
1682
&.right {
1683
tabs {
1684
padding-top: 8px;
1685
padding-bottom: 8px;
1686
&:not(:only-child) {
1688
&:first-child { margin-top: 0; }
1689
&:last-child { margin-bottom: 0; }
1690
}
1691
tab {
1693
&.reorderable-page {
1694
margin: -1px 0;
1695
border-style: solid none;
1696
}
1697
}
1698
}
1699
}
1700
}
1701
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1703
background-color: $base_color;
1704
entry,
1706
spinbutton:not(.vertical) { @extend %entry.flat; }
1707
revealer entry,
1709
revealer spinbutton:not(.vertical) { @extend %entry; }
1710
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1712
}
1713
}
1714
/**************
1717
* Scrollbars *
1718
**************/
1719
scrollbar {
1720
$_slider_min_length: 24px;
1721
// disable steppers
1723
@at-root * {
1724
-GtkScrollbar-has-backward-stepper: false;
1725
-GtkScrollbar-has-forward-stepper: false;
1726
}
1727
transition: $longer_transition;
1729
background-color: $base_color;
1730
background-clip: $extra_background_clip;
1731
// scrollbar border
1733
&.top { border-bottom: 1px solid $borders_color; }
1734
&.bottom { border-top: 1px solid $borders_color; }
1735
&.left { border-right: 1px solid $borders_color; }
1736
&.right { border-left: 1px solid $borders_color; }
1737
// slider
1739
slider {
1740
transition: $shorter_transition, margin 0, border-width 0;
1741
min-width: 8px;
1742
min-height: 8px;
1743
border: 4px solid transparent;
1744
border-radius: $circular_radius;
1745
background-clip: padding-box;
1746
background-color: $tertiary_fg_color;
1747
&:hover { background-color: $secondary_fg_color; }
1749
&:active { background-color: $fg_color; }
1751
&:disabled { background-color: $disabled_tertiary_fg_color; }
1753
}
1754
&.fine-tune {
1756
slider {
1757
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1758
min-width: 4px;
1759
min-height: 4px;
1760
}
1761
&.horizontal slider { margin: 2px 0; }
1763
&.vertical slider { margin: 0 2px; }
1765
}
1766
&.overlay-indicator {
1768
&:not(.dragging):not(.hovering) {
1769
border-color: transparent;
1770
background-color: transparent;
1771
slider {
1773
min-width: 4px;
1774
min-height: 4px;
1775
margin: 4px - 1px;
1776
border: 1px solid scale-alpha($base_color, $lower_opacity);
1777
}
1778
button {
1780
min-width: 4px;
1781
min-height: 4px;
1782
margin: 4px - 1px;
1783
border: 1px solid scale-alpha($base_color, $lower_opacity);
1784
border-radius: $circular_radius;
1785
background-color: $tertiary_fg_color;
1786
background-clip: padding-box;
1787
-gtk-icon-source: none;
1788
&:disabled { background-color: $disabled_tertiary_fg_color; }
1790
}
1791
&.horizontal {
1793
slider { min-width: $_slider_min_length; }
1794
button { min-width: 8px; }
1796
}
1797
&.vertical {
1799
slider { min-height: $_slider_min_length; }
1800
button { min-height: 8px; }
1802
}
1803
}
1804
&.dragging,
1806
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1807
}
1808
&.horizontal slider { min-width: $_slider_min_length; }
1810
&.vertical slider { min-height: $_slider_min_length; }
1812
// button styling
1814
button {
1815
@extend %simple_flat_button;
1816
min-width: 16px;
1818
min-height: 16px;
1819
padding: 0;
1820
border-radius: 0;
1821
}
1822
// button icons
1824
&.vertical {
1825
button {
1826
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1827
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1829
}
1830
}
1831
&.horizontal {
1833
button {
1834
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1835
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1837
}
1838
}
1839
}
1840
/**********
1843
* Switch *
1844
**********/
1845
switch {
1846
transition: $longer_transition;
1847
margin: $container_padding 0;
1848
border: 4px solid transparent;
1849
border-radius: $circular_radius;
1850
background-color: $track_color;
1851
background-clip: padding-box;
1852
font-size: 0;
1853
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1855
&:checked {
1857
background-color: scale-alpha($accent_color, 0.5);
1858
&:disabled {
1860
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1861
color: $disabled_fg_color;
1862
}
1863
}
1864
slider {
1866
@include entry(normal);
1867
transition: $longer_transition, $shadow_transition, margin 0;
1869
min-width: $small_size;
1870
min-height: $small_size;
1871
margin: -4px 0 -4px -4px;
1872
-gtk-outline-radius: $circular_radius;
1873
border-radius: $circular_radius;
1874
}
1875
&:hover slider { @include entry(focus); }
1877
&:checked slider {
1879
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0 $longer_duration;
1880
animation: needs_attention $longer_duration $deceleration_curve;
1881
margin: -4px -4px -4px 0;
1882
background-color: $accent_color;
1883
color: $inversed_fg_color;
1884
}
1885
&:disabled slider { @include entry(disabled); }
1887
&:checked:disabled slider { animation: none; }
1889
row:selected & {
1891
}
1892
}
1893
/*************************
1896
* Check and Radio items *
1897
*************************/
1898
// draw regular check and radio items using our PNG assets
1899
// all assets are rendered from assets.svg. never add pngs directly
1900
//selection-mode
1902
@each $s,$as in ('','-selectionmode'),
1903
(':hover', '-hover-selectionmode'),
1904
(':checked', '-checked-selectionmode'),
1905
(':checked:hover', '-checked-hover-selectionmode') {
1906
.view.content-view.check#{$s}:not(list) {
1907
-gtk-icon-shadow: $z-depth-1;
1908
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1909
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1910
margin: 8px;
1911
background-color: transparent;
1912
}
1913
}
1914
checkbutton.text-button,
1916
radiobutton.text-button {
1917
// this is for a nice focus on check and radios text
1918
padding: 2px;
1919
outline-offset: 0;
1920
label:not(:only-child) { margin: 0 4px; }
1922
}
1923
check,
1925
radio {
1926
min-height: 24px;
1927
min-width: 24px;
1928
margin: -($large_size - 24px) / 2;
1929
padding: ($large_size - 24px) / 2;
1930
@extend %simple_flat_button;
1932
@extend %circular_button;
1934
&:checked, &:indeterminate { color: $accent_color; }
1936
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1938
// &:only-child { margin: -12px; }
1940
row &:not(:checked):not(:indeterminate) {
1942
color: gtkalpha(currentColor, $enabled_opacity);
1943
&:hover, &:active { color: currentColor; }
1945
&:disabled { color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity); }
1947
}
1948
menu menuitem & {
1950
transition: none;
1951
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1952
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1954
&, &:hover, &:disabled {
1956
background-image: none;
1957
// color: inherit;
1958
// animation: none;
1959
}
1960
}
1961
}
1962
%check,
1964
check {
1965
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1966
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1967
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1969
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1970
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1972
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1973
}
1974
$radio_indicator: 10 / ($large_size / 1px) / 2;
1976
$radio_radius_slice: #{$large_size / 2 / 1px};
1977
$radio_radius_width: #{$large_size / 2};
1978
%radio,
1980
radio {
1981
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1982
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1983
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1985
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1986
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1988
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1989
border-image: -gtk-gradient(radial,
1991
center center, 0,
1992
center center, 0.001,
1993
to($accent_color),
1994
to(transparent))
1995
$radio_radius_slice / $radio_radius_width;
1996
&:checked {
1998
border-image: -gtk-gradient(radial,
1999
center center, 0,
2000
center center, $radio_indicator,
2001
to($accent_color),
2002
to(transparent))
2003
$radio_radius_slice / $radio_radius_width;
2004
}
2005
&:checked:disabled {
2007
border-image: -gtk-gradient(radial,
2008
center center, 0,
2009
center center, $radio_indicator,
2010
to(scale-alpha($accent_color, $disabled_opacity)),
2011
to(transparent))
2012
$radio_radius_slice / $radio_radius_width;
2013
}
2014
&:indeterminate:checked {
2016
border-image: -gtk-gradient(radial,
2017
center center, 0,
2018
center center, 0.001,
2019
to($accent_color),
2020
to(transparent))
2021
$radio_radius_slice / $radio_radius_width;
2022
}
2023
}
2024
// let's animate things
2026
@keyframes check_check {
2027
from { -gtk-icon-transform: rotate(90deg); }
2028
to { -gtk-icon-transform: unset; }
2029
}
2030
@keyframes check_radio { // FIXME: cannot animate border-image
2032
from {
2033
border-image: -gtk-gradient(radial,
2034
center center, 0,
2035
center center, 0.001,
2036
to($accent_color),
2037
to(transparent))
2038
$radio_radius_slice / $radio_radius_width;
2039
}
2040
to {
2042
border-image: -gtk-gradient(radial,
2043
center center, 0,
2044
center center, $radio_indicator,
2045
to($accent_color),
2046
to(transparent))
2047
$radio_radius_slice / $radio_radius_width;
2048
}
2049
}
2050
@keyframes check_indeterminate {
2052
from { -gtk-icon-transform: unset; }
2053
50% { -gtk-icon-transform: scale(0, 1); }
2054
to { -gtk-icon-transform: unset; }
2055
}
2056
%check_checked,
2058
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2059
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2061
// %radio_checked,
2063
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2064
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2066
%indeterminate_checked,
2068
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2069
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2071
// no animations in menus
2073
menu menuitem {
2074
check:not(:indeterminate):checked,
2075
radio:not(:indeterminate):checked,
2076
check:indeterminate:checked,
2077
radio:indeterminate:checked { animation: none; }
2078
}
2079
treeview.view check,
2081
treeview.view radio {
2082
padding: 0;
2083
&:hover {
2085
box-shadow: inset 0 0 0 10000px gtkalpha($fg_color, 0.05);
2086
background-image: none;
2087
&:disabled { box-shadow: none; }
2089
&:selected { box-shadow: inset 0 0 0 10000px gtkalpha($inversed_fg_color, 0.05); }
2091
}
2092
& {
2094
color: $secondary_fg_color;
2095
&:hover, &:active { color: $fg_color; }
2097
&:disabled { color: $disabled_secondary_fg_color; }
2099
&:checked, &:indeterminate { color: $accent_color; }
2101
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2103
}
2104
&:selected {
2106
color: $secondary_inversed_fg_color;
2107
&:hover, &:active { color: $inversed_fg_color; }
2109
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2111
&:checked, &:indeterminate { color: $accent_color; }
2113
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2115
}
2116
}
2117
treeview.view radio:checked {
2119
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2120
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2121
border-image: none;
2122
}
2123
/************
2126
* GtkScale *
2127
************/
2128
scale {
2129
// sizing
2130
$_marks_lenght: 8px;
2131
$_marks_distance: 8px;
2132
min-height: $medium_size - 24px;
2134
min-width: $medium_size - 24px;
2135
padding: (24px / 2);
2136
* { transition: $longer_transition; }
2138
// the slider is inside the trough, so to have make it bigger there's a negative margin
2140
slider {
2141
min-height: 24px;
2142
min-width: 24px;
2143
margin: ($bar_size - 24px) / 2;
2144
}
2145
// the backing bit
2147
trough {
2148
outline-offset: 2px;
2149
background-color: $track_color;
2150
&:disabled { color: $disabled_fg_color; }
2152
}
2153
// the colored part of the backing bit
2155
highlight {
2156
background-color: $accent_color;
2157
&:disabled { background-color: transparent; }
2159
}
2160
// this is another differently styled part of the backing bit, the most relevant use case is for example
2162
// in media player to indicate how much video stream as been cached
2163
fill {
2164
background-color: $track_color;
2165
&:disabled { background-color: transparent; }
2167
}
2168
slider {
2170
transition: all $shorter_duration $standard_curve;
2171
// border-radius: 100%;
2172
// background-color: $accent_color;
2173
background-repeat: no-repeat;
2174
background-position: center;
2175
@each $s,$as in ('',''),
2177
(':disabled','-insensitive') {
2178
&#{$s} {
2179
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2180
background-image: -gtk-scaled(url('#{$_url}.png'),
2181
url('#{$_url}@2.png'));
2182
}
2183
}
2184
background-size: calc(100% - 8px);
2186
&:hover { background-size: calc(100% - 4px); }
2188
&:active { background-size: calc(100% - 0px); }
2190
}
2191
// click-and-hold the slider to activate
2193
&.fine-tune {
2194
// to make the slider shrink in fine-tune mode
2195
slider { background-size: calc(100% - 12px); }
2196
}
2197
value { color: gtkalpha(currentColor, $hint_opacity); }
2199
marks {
2201
color: $track_color;
2202
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2204
(bottom, bottom, top),
2205
(top, left, right),
2206
(bottom, right, left) {
2207
&.#{$marks_class} {
2208
margin-#{$marks_margin}: $_marks_distance;
2209
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2210
}
2211
}
2212
}
2213
&.horizontal {
2215
indicator {
2216
min-height: $_marks_lenght;
2217
min-width: 1px;
2218
}
2219
}
2220
&.vertical {
2222
indicator {
2223
min-height: 1px;
2224
min-width: $_marks_lenght;
2225
}
2226
}
2227
// *WARNING* scale with marks madness following
2229
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2231
$suffix: if($variant == 'light', '', '-dark');
2232
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2234
('vertical', 'vert') {
2235
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2236
('scale-has-marks-below', ':first-child:not(:only-child)') {
2237
@each $state, $state_infix in ('', ''),
2238
(':disabled', '-insensitive') {
2239
&.#{$dir_class} {
2240
%#{$marks_infix}-#{$dir_infix},
2241
contents#{$nth_child} > trough > slider {
2242
&#{$state} {
2243
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2244
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2246
}
2247
@if $dir_class == 'horizontal' {
2249
min-height: 30px;
2250
min-width: 24px;
2251
@if $marks_infix == 'scale-has-marks-above' {
2253
margin-top: -16px;
2254
background-position: center calc(100% - 4px);
2256
&:hover { background-position: center calc(100% - 2px); }
2258
&:active { background-position: center calc(100% - 0px); }
2260
}
2261
@if $marks_infix == 'scale-has-marks-below' {
2263
margin-bottom: -16px;
2264
background-position: center calc(4px);
2266
&:hover { background-position: center calc(2px); }
2268
&:active { background-position: center calc(0px); }
2270
}
2271
}
2272
@if $dir_class == 'vertical' {
2274
min-height: 24px;
2275
min-width: 30px;
2276
@if $marks_infix == 'scale-has-marks-above' {
2278
margin-left: -16px;
2279
background-position: calc(4px) center;
2281
&:hover { background-position: calc(2px) center; }
2283
&:active { background-position: calc(0px) center; }
2285
}
2286
@if $marks_infix == 'scale-has-marks-below' {
2288
margin-right: -16px;
2289
background-position: calc(100% - 4px) center;
2291
&:hover { background-position: calc(100% - 2px) center; }
2293
&:active { background-position: calc(100% - 0px) center; }
2295
}
2296
}
2297
}
2298
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2300
&.fine-tune contents#{$nth_child} > trough > slider {
2301
// bigger negative margins to make the trough grow here as well
2302
@if $dir_class == 'horizontal' {
2304
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2305
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2307
}
2308
@if $dir_class == 'vertical' {
2310
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2311
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2313
}
2314
}
2315
}
2316
}
2317
}
2318
}
2319
&.color {
2321
min-height: 0;
2322
min-width: 0;
2323
&.horizontal {
2325
padding: 0 0 12px 0;
2326
trough {
2328
padding-bottom: $bar_size;
2329
}
2330
slider {
2332
@extend %scale-has-marks-above-horz;
2333
margin-bottom: -10px - $bar_size;
2335
margin-top: 0;
2336
}
2337
}
2338
&.vertical {
2340
&:dir(ltr) {
2341
padding: 0 0 0 12px;
2342
trough {
2344
padding-left: $bar_size;
2345
}
2346
slider {
2348
@extend %scale-has-marks-below-vert;
2349
margin-left: -10px - $bar_size;
2351
margin-right: 0;
2352
}
2353
}
2354
&:dir(rtl) {
2356
padding: 0 12px 0 0;
2357
trough {
2359
padding-right: $bar_size;
2360
}
2361
slider {
2363
@extend %scale-has-marks-above-vert;
2364
margin-right: -10px - $bar_size;
2366
margin-left: 0;
2367
}
2368
}
2369
}
2370
&.fine-tune {
2372
&.horizontal {
2373
slider {
2374
@extend %scale-has-marks-above-horz-fine-tune;
2375
}
2376
}
2377
&.vertical {
2379
&:dir(ltr) {
2380
slider {
2381
@extend %scale-has-marks-below-vert-fine-tune;
2382
}
2383
}
2384
&:dir(rtl) {
2386
slider {
2387
@extend %scale-has-marks-above-vert-fine-tune;
2388
}
2389
}
2390
}
2391
}
2392
}
2393
}
2394
/*****************
2397
* Progress bars *
2398
*****************/
2399
progressbar {
2400
// sizing
2401
&.horizontal {
2402
trough,
2403
progress { min-height: $bar_size; }
2404
}
2405
&.vertical {
2407
trough,
2408
progress { min-width: $bar_size; }
2409
}
2410
// FIXME: insensitive state missing and some other state should be set probably
2412
color: $tertiary_fg_color;
2413
font-size: smaller;
2414
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2416
progress { background-color: $primary_color; }
2418
&.osd { // progressbar.osd used for epiphany page loading progress
2420
// min-width: $bar_size;
2421
// min-height: $bar_size;
2422
// background-color: transparent;
2423
// trough { background-color: transparent; }
2425
progress {
2427
}
2428
}
2429
}
2430
/*************
2433
* Level Bar *
2434
*************/
2435
levelbar {
2436
block {
2437
min-width: $medium_size;
2438
min-height: $bar_size;
2439
}
2440
&.vertical block {
2442
min-width: $bar_size;
2443
min-height: $medium_size;
2444
}
2445
trough {
2447
padding: 2px;
2448
border-radius: 2px;
2449
@include entry(normal);
2451
&:disabled { @include entry(disabled); }
2453
}
2454
&.horizontal.discrete block { margin: 0 1px; }
2456
&.vertical.discrete block { margin: 1px 0; }
2458
&.horizontal.discrete trough { padding: 2px 1px; }
2460
&.vertical.discrete trough { padding: 1px 2px; }
2462
block {
2464
&.low {
2465
background-color: $warning_color;
2466
}
2467
&.high,
2469
&:not(.empty) {
2470
background-color: $primary_color;
2471
}
2472
&.full {
2474
background-color: $success_color;
2475
}
2476
&.empty {
2478
background-color: $track_color;
2479
color: $disabled_fg_color;
2480
}
2481
}
2482
}
2483
/****************
2486
* Print dialog *
2487
*****************/
2488
printdialog {
2489
paper {
2490
padding: 0;
2491
border: 1px solid $borders_color;
2492
background: $base_color;
2493
color: $fg_color;
2494
}
2495
.dialog-action-box { margin: 12px; }
2497
}
2498
/**********
2501
* Frames *
2502
**********/
2503
frame > border,
2504
.frame {
2505
margin: 0;
2506
padding: 0;
2507
border: 1px solid $borders_color;
2508
border-radius: 0;
2509
box-shadow: none;
2510
&.flat { border-style: none; }
2512
}
2513
actionbar > revealer > box {
2515
padding: $container_padding;
2516
border-top: 1px solid $borders_color;
2517
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2519
}
2520
scrolledwindow {
2522
viewport.frame { // avoid double borders when viewport inside scrolled window
2523
border-style: none;
2524
}
2525
// This is used when content is touch-dragged past boundaries.
2527
// draws a box on top of the content, the size changes programmatically.
2528
@at-root overshoot {
2529
&.top { @include overshoot(top); }
2530
&.bottom { @include overshoot(bottom); }
2532
&.left { @include overshoot(left); }
2534
&.right { @include overshoot(right); }
2536
}
2537
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2539
@at-root undershoot {
2540
&.top { @include undershoot(top); }
2541
&.bottom { @include undershoot(bottom); }
2543
&.left { @include undershoot(left); }
2545
&.right { @include undershoot(right); }
2547
}
2548
@at-root junction { // the small square between two scrollbars
2550
border-style: solid none none solid;
2551
border-width: 1px;
2552
border-color: $borders_color;
2553
background-color: $base_color;
2554
&:dir(rtl) { border-style: solid solid none none; }
2556
}
2557
}
2558
//vbox and hbox separators
2560
separator {
2561
min-width: 1px;
2562
min-height: 1px;
2563
background: $borders_color;
2564
}
2565
/*********
2568
* Lists *
2569
*********/
2570
list {
2571
border-color: $borders_color;
2572
background-color: $base_color;
2573
row { padding: 2px; }
2575
}
2576
// FIXME
2578
$row_transition: $longer_transition, background-color 0, color 0;
2579
row {
2581
&.activatable {
2582
transition: $row_transition;
2583
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0);
2584
background-image: radial-gradient(circle farthest-corner at center,
2585
gtkalpha(currentColor, 0) 100%,
2586
transparent 0%),
2587
image(gtkalpha(currentColor, 0));
2588
&:hover {
2590
transition: $row_transition, box-shadow 0;
2591
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0.05);
2592
}
2593
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2595
&:active {
2596
transition: $row_transition, background-image 0;
2597
animation: row_ripple_effect $longer_duration $deceleration_curve forwards;
2598
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, $lower_opacity / 2);
2599
}
2600
}
2601
&:selected { @extend %selected_items; }
2603
}
2604
/*********************
2607
* App Notifications *
2608
*********************/
2609
.app-notification,
2610
.app-notification.frame {
2611
@extend %osd;
2612
@extend toolbar.osd;
2614
margin: 8px;
2616
button { @extend %button_basic.flat; }
2618
border { border: none; }
2620
}
2621
/*************
2624
* Expanders *
2625
*************/
2626
expander {
2627
arrow {
2628
transition: all $shorter_duration $standard_curve;
2629
min-width: 16px;
2630
min-height: 16px;
2631
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2632
-gtk-icon-transform: rotate(-90deg);
2633
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2635
&:checked { -gtk-icon-transform: unset; }
2637
color: $secondary_fg_color;
2639
&:hover, &:active { color: $fg_color; }
2641
&:disabled { color: $disabled_secondary_fg_color; }
2643
&:selected {
2645
color: $secondary_inversed_fg_color;
2646
&:hover, &:active { color: $inversed_fg_color; }
2648
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2650
}
2651
}
2652
}
2653
/************
2656
* Calendar *
2657
***********/
2658
calendar {
2659
padding: 1px;
2660
border: 1px solid $borders_color;
2661
color: $fg_color;
2662
&:disabled { color: $disabled_fg_color; }
2664
&:selected {
2666
@extend %selected_items;
2667
border-radius: 2px + 1px;
2669
}
2670
&.header {
2672
border-style: none none solid;
2673
border-radius: 0;
2674
}
2675
&.button { @extend %simple_flat_button; }
2677
&.highlight {
2679
color: gtkalpha(currentColor, $hint_opacity);
2680
font-weight: 500;
2681
}
2682
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2684
}
2685
/***********
2688
* Dialogs *
2689
***********/
2690
messagedialog { // Message Dialog styling
2691
&.background { background-color: $lighter_bg_color; }
2692
.titlebar {
2694
min-height: $small_size;
2695
border-style: none;
2696
box-shadow: inset 0 1px $highlight_color;
2697
background-color: $lighter_bg_color;
2698
}
2699
&.csd { // rounded bottom border styling for csd version
2701
&.background {
2702
// bigger radius for better antialiasing
2703
border-bottom-left-radius: 2px;
2704
border-bottom-right-radius: 2px;
2705
}
2706
.dialog-action-area button {
2708
padding: 8px 16px;
2709
border-top: 1px solid $borders_color;
2710
border-radius: 0;
2711
@extend %simple_flat_button;
2713
&:first-child { border-bottom-left-radius: 2px; }
2715
&:last-child { border-bottom-right-radius: 2px; }
2717
}
2718
}
2719
}
2720
filechooser {
2722
.dialog-action-box { border-top: 1px solid $borders_color; }
2723
#pathbarbox {
2725
border-bottom: 1px solid $borders_color;
2726
background-color: $bg_color;
2727
}
2728
}
2729
filechooserbutton:drop(active) {
2731
box-shadow: none;
2732
}
2733
/***********
2736
* Sidebar *
2737
***********/
2738
.sidebar {
2739
border-style: none;
2740
background-color: $lighter_bg_color;
2741
@at-root %sidebar_left,
2743
&:dir(ltr),
2744
&.left,
2745
&.left:dir(rtl) {
2746
border-right: 1px solid $borders_color;
2747
border-left-style: none;
2748
}
2749
@at-root %sidebar_right
2751
&:dir(rtl),
2752
&.right {
2753
border-left: 1px solid $borders_color;
2754
border-right-style: none;
2755
}
2756
list { background-color: transparent; }
2758
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2760
}
2761
stacksidebar {
2763
&.sidebar {
2764
&:dir(ltr),
2765
&.left,
2766
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2767
&:dir(rtl),
2769
&.right { list { @extend %sidebar_right; }}
2770
}
2771
row {
2773
padding: 10px 4px;
2774
> label {
2776
padding-left: 6px;
2777
padding-right: 6px;
2778
}
2779
&.needs-attention > label { @extend %needs_attention; }
2781
}
2782
}
2783
/****************
2786
* File chooser *
2787
****************/
2788
placessidebar {
2789
> viewport.frame { border-style: none; }
2790
list { padding: (4px - 3px) 0 4px; }
2792
row {
2794
// Needs overriding of the GtkListBoxRow padding
2795
min-height: 32px;
2796
margin: -1px 0; // Remove unknown margins
2797
padding: 0;
2798
// Using margins/padding directly in the SidebarRow
2800
// will make the animation of the new bookmark row jump
2801
> revealer { padding: 0 12px; }
2802
&:selected { color: $inversed_fg_color; }
2804
&:disabled { color: $disabled_fg_color; }
2806
image.sidebar-icon {
2808
opacity: $hint_opacity; // dim the device icons
2809
&:dir(ltr) { padding-right: 8px; }
2811
&:dir(rtl) { padding-left: 8px; }
2812
}
2813
label.sidebar-label {
2815
&:dir(ltr) { padding-right: 2px; }
2816
&:dir(rtl) { padding-left: 2px; }
2817
}
2818
@at-root button.sidebar-button {
2820
@extend %simple_flat_button;
2821
@extend %small_button;
2823
row:selected & {
2825
}
2826
}
2827
&.sidebar-placeholder-row {
2829
min-height: 2px;
2830
padding: 0 8px;
2831
background-image: image($accent_color);
2832
background-clip: content-box;
2833
}
2834
&.sidebar-new-bookmark-row { color: $accent_color; }
2836
&:drop(active):not(:disabled) {
2838
box-shadow: inset 0 0 0 2px $accent_color;
2839
&:selected {
2841
// background-color: $accent_color;
2842
// color: $inversed_fg_color;
2843
}
2844
}
2845
}
2846
}
2847
placesview {
2849
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2850
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2852
// this selects the "connect to server" label
2854
> actionbar > revealer > box > label {
2855
padding-left: 8px;
2856
padding-right: 8px;
2857
}
2858
}
2859
/*********
2862
* Paned *
2863
*********/
2864
paned {
2865
> separator {
2866
min-width: 1px;
2867
min-height: 1px;
2868
-gtk-icon-source: none; // defeats the ugly default handle decoration
2869
border-style: none; // just to be sure
2870
background-color: transparent;
2871
// workaround, using background istead of a border since the border will get rendered twice (?)
2872
background-image: image($borders_color);
2873
background-size: 1px 1px;
2874
&.wide {
2876
min-width: 6px;
2877
min-height: 6px;
2878
background-color: $bg_color;
2879
background-image: image($borders_color), image($borders_color);
2880
background-size: 1px 1px, 1px 1px;
2881
}
2882
}
2883
&.horizontal > separator {
2885
background-repeat: repeat-y;
2886
&:dir(ltr) {
2888
margin: 0 -8px 0 0;
2889
padding: 0 8px 0 0;
2890
background-position: left;
2891
}
2892
&:dir(rtl) {
2894
margin: 0 0 0 -8px;
2895
padding: 0 0 0 8px;
2896
background-position: right;
2897
}
2898
&.wide {
2900
margin: 0;
2901
padding: 0;
2902
background-repeat: repeat-y, repeat-y;
2903
background-position: left, right;
2904
}
2905
}
2906
&.vertical > separator {
2908
margin: 0 0 -8px 0;
2909
padding: 0 0 8px 0;
2910
background-repeat: repeat-x;
2911
background-position: top;
2912
&.wide {
2914
margin: 0;
2915
padding: 0;
2916
background-repeat: repeat-x, repeat-x;
2917
background-position: bottom, top;
2918
}
2919
}
2920
}
2921
/**************
2924
* GtkInfoBar *
2925
**************/
2926
infobar {
2927
border-style: none;
2928
&.info { background-color: $info_bg_color; }
2930
&.question { background-color: $question_bg_color; }
2932
&.warning { background-color: $warning_bg_color; }
2934
&.error { background-color: $error_bg_color; }
2936
&.info,
2938
&.question,
2939
&.warning,
2940
&.error {
2941
> label, & { color: $inversed_fg_color; }
2942
button { @extend %button_selected; }
2944
selection { }
2946
*:link { @extend %link_selected; }
2948
}
2949
}
2950
/************
2953
* Tooltips *
2954
************/
2955
tooltip {
2956
&.background {
2957
// background-color needs to be set this way otherwise it gets drawn twice
2958
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2959
box-shadow: inset 0 1px $highlight_color;
2960
background-color: scale-alpha($base_color, $higher_opacity);
2961
}
2962
// @extend %osd;
2964
// padding: 4px; /* not working */
2966
border-radius: 2px;
2967
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2968
// FIXME: we need a border or tooltips vanish on black background.
2970
decoration { background-color: transparent; }
2971
label {
2973
// tooltip label has already 6px margins
2974
min-height: 32px - 6px * 2;
2975
padding: 0 8px - 6px;
2976
}
2977
* { // Yeah this is ugly
2979
padding: 0;
2980
background-color: transparent;
2981
color: inherit;
2982
}
2983
}
2984
/*****************
2987
* Color Chooser *
2988
*****************/
2989
colorswatch {
2990
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2991
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2992
// applied to the overlay box.
2993
// base color corners rounding
2995
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2996
// sports a bigger radius.
2997
// nth-child is needed by the custom color strip.
2998
&.top {
3000
border-top-left-radius: $md_radius + 0.5px;
3001
border-top-right-radius: $md_radius + 0.5px;
3002
overlay {
3004
border-top-left-radius: $md_radius;
3005
border-top-right-radius: $md_radius;
3006
}
3007
}
3008
&.bottom {
3010
border-bottom-left-radius: $md_radius + 0.5px;
3011
border-bottom-right-radius: $md_radius + 0.5px;
3012
overlay {
3014
border-bottom-left-radius: $md_radius;
3015
border-bottom-right-radius: $md_radius;
3016
}
3017
}
3018
&.left,
3020
&:first-child:not(.top) {
3021
border-top-left-radius: $md_radius + 0.5px;
3022
border-bottom-left-radius: $md_radius + 0.5px;
3023
overlay {
3025
border-top-left-radius: $md_radius;
3026
border-bottom-left-radius: $md_radius;
3027
}
3028
}
3029
&.right,
3031
&:last-child:not(.bottom) {
3032
border-top-right-radius: $md_radius + 0.5px;
3033
border-bottom-right-radius: $md_radius + 0.5px;
3034
overlay {
3036
border-top-right-radius: $md_radius;
3037
border-bottom-right-radius: $md_radius;
3038
}
3039
}
3040
&.dark overlay { color: $dark_contrast_color; }
3042
&.light overlay { color: $light_contrast_color; }
3044
&.dark { color: $dark_contrast_color; } // for focus ring
3046
&.light { color: $light_contrast_color; } // for focus ring
3048
&:drop(active) {
3050
box-shadow: none;
3051
&.light overlay {
3053
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3054
}
3055
&.dark overlay {
3057
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3058
}
3059
}
3060
overlay {
3062
transition: $shadow_transition;
3063
box-shadow: $z-depth-1;
3064
&:hover { box-shadow: $z-depth-2; }
3066
}
3067
&#add-color-button {
3069
border-radius: $md_radius $md_radius 0 0;
3070
color: $dark_contrast_color; // for focus ring
3071
&:only-child { border-radius: $md_radius; }
3073
overlay {
3075
background-image: linear-gradient(to right,
3076
$error_bg_color 25%,
3077
$warning_bg_color 25%, $warning_bg_color 50%,
3078
$info_bg_color 50%, $info_bg_color 75%,
3079
$question_bg_color 75%);
3080
color: $dark_contrast_color;
3081
}
3082
}
3083
&:disabled {
3085
opacity: $disabled_opacity;
3086
overlay { box-shadow: none; }
3088
}
3089
row:selected & {
3091
}
3092
&#editor-color-sample {
3094
border-radius: $md_radius + 0.5px;
3095
overlay { border-radius: $md_radius; }
3097
// overlay:hover { box-shadow: $z-depth-1; }
3099
}
3100
}
3101
// colorscale popup
3103
colorchooser .popover.osd {
3104
transition: $shadow_transition;
3105
border-radius: 2px;
3106
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
3107
background-color: $base_color;
3108
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
3110
spinbutton:not(.vertical) { @extend %entry.flat; }
3112
}
3113
/********
3116
* Misc *
3117
********/
3118
//content view (grid/list)
3119
.content-view {
3120
background-color: $bg_color;
3121
// &:hover { -gtk-icon-effect: highlight; }
3123
rubberband { @extend rubberband; }
3125
}
3126
.scale-popup {
3128
.osd & { @extend %osd; }
3129
.osd & button.flat { //FIXME: quick hack, redo properly
3131
}
3132
button { // +/- buttons on GtkVolumeButton popup
3134
}
3135
}
3136
/**********************
3139
* Window Decorations *
3140
*********************/
3141
decoration {
3142
transition: $shadow_transition;
3143
border-radius: 2px 2px 0 0;
3144
box-shadow: $z-depth-4, 0 16px 16px transparent;
3145
// FIXME rationalize shadows
3147
// this is used for the resize cursor area
3149
margin: 8px;
3150
&:backdrop {
3152
// the transparent shadow here is to enforce that the shadow extents don't
3153
// change when we go to backdrop, to prevent jumping windows.
3154
// The biggest shadow should be in the same order then in the active state
3155
// or the jumping will happen during the transition.
3156
box-shadow: $z-depth-2, 0 16px 16px transparent;
3157
}
3158
.maximized &,
3160
.fullscreen &,
3161
.tiled & { border-radius: 0; }
3162
.popup & { box-shadow: none; }
3164
// server-side decorations as used by mutter
3166
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3167
.csd.popup & {
3169
border-radius: 2px;
3170
box-shadow: $z-depth-2;
3171
}
3172
tooltip.csd & {
3174
border-radius: 2px;
3175
box-shadow: $z-depth-2;
3176
}
3177
messagedialog.csd & {
3179
border-radius: 2px;
3180
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3181
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3183
}
3184
.solid-csd & {
3186
margin: 0;
3187
padding: 4px;
3188
// border: solid 1px $borders_color;
3189
// border-radius: 0;
3190
box-shadow: inset 0 0 0 4px $headerbar_color;
3191
// background-color: $borders_color;
3192
}
3193
}
3194
// Window Close button
3196
button.titlebutton {
3197
// @extend %simple_flat_button;
3198
@extend %circular_button;
3200
.selection-mode & {
3202
}
3203
}
3204
// catch all extend :)
3207
%selected_items {
3209
background-color: $primary_color;
3210
@at-root %nobg_selected_items, & {
3212
color: $inversed_fg_color;
3213
&:disabled { color: $disabled_inversed_fg_color; }
3215
}
3216
}
3217
.monospace { font-family: monospace; }
3219
/**********************
3222
* Touch Copy & Paste *
3223
*********************/
3224
//touch selection handlebars for the Popover.osd above
3225
cursor-handle {
3226
border-radius: $circular_radius;
3227
background-color: $accent_color;
3228
background-image: none;
3229
&.top:dir(ltr), &.bottom:dir(rtl) {
3231
padding-left: 6px;
3232
border-top-right-radius: 0;
3233
}
3234
&.bottom:dir(ltr), &.top:dir(rtl) {
3236
padding-right: 6px;
3237
border-top-left-radius: 0;
3238
}
3239
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3241
-GtkWidget-text-handle-width: 24;
3242
-GtkWidget-text-handle-height: 30;
3243
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3245
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3246
url('#{$_url}@2.png'));
3247
}
3248
}
3249
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3251
%circular_button,
3253
button.circular { // FIXME: aggregate to buttons
3254
border-radius: $circular_radius;
3255
-gtk-outline-radius: $circular_radius;
3256
// label { padding: 0; }
3258
}
3259
%small_button {
3261
min-height: $small_size;
3262
min-width: $small_size;
3263
padding: 0;
3264
border-radius: $circular_radius;
3265
-gtk-outline-radius: $circular_radius;
3266
}
3267
// shortcut window keys
3269
.keycap {
3270
min-width: 28px - 8px * 2;
3271
min-height: 28px - 2px;
3272
margin-top: 2px;
3273
padding-bottom: 2px;
3274
padding-left: 8px;
3275
padding-right: 8px;
3276
border: solid 1px $borders_color;
3278
border-radius: 2px + 1px;
3279
box-shadow: inset 0 -2px $borders_color;
3280
background-color: $base_color;
3281
color: $fg_color;
3282
font-size: smaller;
3283
}
3284
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3286
transition: $longer_transition;
3287
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_color;
3288
caret-color: $accent_color;
3289
}
3290
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3292
stackswitcher button.circular,
3294
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3295
min-width: $medium_size;
3296
min-height: $medium_size;
3297
padding: 0;
3298
}
3299