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
// on OSD
891
.osd & { background-color: transparent; }
892
// stand-alone OSD toolbars
894
&.osd {
895
transition: $shadow_transition;
896
padding: $container_padding;
897
border-radius: 2px;
898
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
899
background-color: $base_color;
900
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
902
&.left,
904
&.right,
905
&.top,
906
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
907
button { @extend %button_basic.flat; }
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
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
922
}
923
}
924
//searchbar, location-bar & inline-toolbar
926
.inline-toolbar {
927
padding: $container_padding;
928
border-style: solid;
929
border-width: 0 1px 1px;
930
border-color: $borders_color;
931
background-color: $alt_base_color;
932
}
933
searchbar,
935
.location-bar {
936
padding: $container_padding;
937
border-style: solid;
938
border-width: 0 0 1px;
939
border-color: $borders_color;
940
background-color: $bg_color;
941
background-clip: border-box;
942
}
943
/***************
946
* Header bars *
947
***************/
948
%titlebar,
949
headerbar {
950
transition: background-color $shorter_duration $deceleration_curve;
951
min-height: $large_size;
952
padding: 0 $container_padding;
953
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
954
background-color: $headerbar_color;
955
color: $inversed_fg_color;
956
&:backdrop {
958
color: $secondary_inversed_fg_color;
959
}
960
.title {
962
transition: $longer_transition;
963
padding: 0 12px;
964
font-weight: bold;
965
}
966
.subtitle {
968
transition: $longer_transition;
969
padding: 0 12px;
970
font-size: smaller;
971
@extend .dim-label;
973
}
974
button:not(.suggested-action):not(.destructive-action) {
976
@extend %button_basic.flat;
977
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
979
currentColor 0%,
980
transparent 0%)
981
0 0 0 / 0 0 0px;
982
&:checked {
984
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
985
currentColor 100%,
986
transparent 0%)
987
0 0 2 / 0 0 2px;
988
&, &:disabled { background-color: transparent; }
990
}
991
}
992
button.suggested-action, button.destructive-action {
994
&:disabled {
995
color: gtkalpha(currentColor, $disabled_opacity);
996
> label { color: inherit; }
998
}
999
}
1000
&.selection-mode {
1002
transition: background-color 0 $longer_duration;
1003
animation: header_ripple_effect $longer_duration $deceleration_curve;
1004
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1005
background-color: $primary_color;
1006
color: $inversed_fg_color;
1007
&:backdrop {
1009
color: $secondary_inversed_fg_color;
1010
}
1011
.subtitle:link { @extend *:link:selected; }
1013
button:not(.suggested-action):not(.destructive-action) {
1015
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1016
currentColor 0%,
1017
transparent 0%)
1018
0 0 0 / 0 0 0px;
1019
color: currentColor;
1020
&:disabled {
1022
color: gtkalpha(currentColor, $disabled_opacity);
1023
> label { color: inherit; }
1025
}
1026
&:checked {
1028
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1029
currentColor 100%,
1030
transparent 0%)
1031
0 0 2 / 0 0 2px;
1032
color: currentColor;
1033
&:disabled {
1035
color: gtkalpha(currentColor, $disabled_opacity);
1036
> label { color: inherit; }
1038
}
1039
}
1040
}
1041
.selection-menu {
1043
padding-left: 16px;
1044
padding-right: 16px;
1045
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1047
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1049
}
1050
}
1051
.fullscreen &,
1053
.tiled &,
1054
.maximized & {
1055
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1056
box-shadow: $z-depth-1;
1057
}
1058
&.default-decoration {
1060
min-height: $small_size;
1061
padding: $container_padding;
1062
border-width: 0;
1063
button.titlebutton {
1065
min-height: $small_size;
1066
min-width: $small_size;
1067
margin: 0;
1068
padding: 0;
1069
&:active { // add fallback
1071
background-image: radial-gradient(circle farthest-corner at center,
1072
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1073
transparent 0%),
1074
image(gtkalpha(currentColor, $lower_opacity / 2));
1075
}
1076
}
1077
}
1078
.solid-csd & {
1080
&:dir(rtl), &:dir(ltr) { // specificity bump
1081
margin-left: -2px;
1082
margin-right: -2px;
1083
margin-top: -2px;
1084
// border-radius: 0;
1085
box-shadow: inset 0 1px $secondary_highlight_color;
1086
}
1087
}
1088
}
1089
headerbar {
1091
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1092
entry,
1093
spinbutton,
1094
// separator,
1095
button {
1096
margin-top: $container_padding;
1097
margin-bottom: $container_padding;
1098
}
1099
switch {
1101
margin-top: $container_padding * 2;
1102
margin-bottom: $container_padding * 2;
1103
}
1104
}
1105
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1107
border-top-left-radius: 2px;
1108
border-top-right-radius: 2px;
1109
}
1110
headerbar {
1112
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1113
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1114
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1116
}
1117
.titlebar:not(headerbar) {
1119
window.csd > & {
1120
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1121
padding: 0;
1122
background-color: transparent;
1123
background-image: none;
1124
border-style: none;
1125
box-shadow: none;
1126
}
1127
> separator {
1129
background-color: $headerbar_color;
1130
background-image: image($borders_color);
1131
}
1132
@extend %titlebar;
1134
}
1135
/************
1138
* Pathbars *
1139
************/
1140
.path-bar button {
1141
&.text-button, &.image-button, & {
1142
padding-left: 6px;
1143
padding-right: 6px;
1144
}
1145
&.text-button.image-button, & {
1147
// label:last-child { padding-left: 2px; padding-right: 8px; }
1148
// label:first-child { padding-left: 8px; padding-right: 2px; }
1149
}
1150
image {
1152
padding-left: ($medium_size - 16px) / 2 - 6px;
1153
padding-right: ($medium_size - 16px) / 2 - 6px;
1154
}
1155
&.slider-button {
1157
padding-left: 0;
1158
padding-right: 0;
1159
}
1160
:not(headerbar) & {
1162
@extend %flat_button;
1163
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1165
$primary_color 0%,
1166
transparent 0%)
1167
0 0 0 / 0 0 0px;
1168
border-radius: 2px;
1169
&:checked {
1171
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1172
$primary_color 100%,
1173
transparent 0%)
1174
0 0 2 / 0 0 2px;
1175
&, &:disabled { background-color: transparent; }
1177
}
1178
}
1179
}
1180
/**************
1183
* Tree Views *
1184
**************/
1185
treeview.view {
1186
@at-root * {
1187
-GtkTreeView-horizontal-separator: 4;
1188
-GtkTreeView-grid-line-width: 1;
1189
-GtkTreeView-grid-line-pattern: '';
1190
-GtkTreeView-tree-line-width: 1;
1191
-GtkTreeView-tree-line-pattern: '';
1192
-GtkTreeView-expander-size: 16;
1193
}
1194
border-left-color: $track_color; // this is actually the tree lines color,
1196
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1197
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1199
&:hover, &:active, &:selected { border-radius: 0; }
1201
&.separator {
1203
min-height: 1px + 2px * 2;
1204
color: $borders_color;
1205
}
1206
&:drop(active) {
1208
border-style: solid none;
1209
border-width: 1px;
1210
border-color: $accent_color;
1211
&.after { border-top-style: none; }
1213
&.before { border-bottom-style: none; }
1215
}
1216
&.expander {
1218
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1219
-gtk-icon-transform: rotate(-90deg);
1220
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1222
&:checked { -gtk-icon-transform: unset; }
1224
color: $secondary_fg_color;
1226
&:hover, &:active { color: $fg_color; }
1228
&:disabled { color: $disabled_secondary_fg_color; }
1230
&:selected {
1232
color: $secondary_inversed_fg_color;
1233
&:hover, &:active { color: $inversed_fg_color; }
1235
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1237
}
1238
}
1239
&.progressbar { // progress bar in treeviews
1241
border-style: none none solid;
1242
border-width: $bar_size;
1243
border-color: $primary_color;
1244
background-color: transparent;
1245
background-image: none;
1246
&:selected { border-color: currentColor; }
1248
}
1249
&.trough { // progress bar trough in treeviews
1251
border-style: none none solid;
1252
border-width: $bar_size;
1253
border-color: scale-alpha($primary_color, $lower_opacity);
1254
background-color: transparent;
1255
background-image: none;
1256
&:selected { border-color: $track_color; }
1258
}
1259
header {
1261
button {
1262
@extend row.activatable;
1263
padding: 2px 6px;
1265
border-style: none solid solid none;
1266
border-width: 1px;
1267
border-color: $borders_color;
1268
border-radius: 0;
1269
background-clip: border-box;
1270
&, &:hover, &:active { box-shadow: none; }
1272
&, &:disabled { background-color: $base_color; }
1274
&:last-child { border-right-style: none; }
1276
}
1277
}
1278
button.dnd,
1280
header.button.dnd { // for treeview-like derive widgets
1281
padding: 2px 6px;
1282
border-style: none solid solid;
1283
border-width: 1px;
1284
border-color: $borders_color;
1285
border-radius: 0;
1286
box-shadow: none;
1287
background-color: $base_color;
1288
background-clip: border-box;
1289
color: $primary_color;
1290
}
1291
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1293
}
1294
/*********
1297
* Menus *
1298
*********/
1299
menubar,
1300
.menubar {
1301
-GtkWidget-window-dragging: true;
1302
padding: 0;
1303
// box-shadow: inset 0 -1px $borders_color;
1304
background-color: $headerbar_color;
1305
> menuitem {
1307
transition: $shorter_transition;
1308
min-height: 20px;
1309
padding: 4px 8px;
1310
color: $secondary_inversed_fg_color;
1311
&:hover { //Seems like it :hover even with keyboard focus
1313
transition: none;
1314
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1315
color: $inversed_fg_color;
1316
}
1317
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1319
}
1320
}
1321
menu,
1323
.menu,
1324
.context-menu {
1325
margin: 4px 0;
1326
padding: 4px 0;
1327
box-shadow: inset 0 1px $highlight_color;
1328
background-color: $base_color;
1329
border: 1px solid $borders_color; // adds borders in a non composited env
1330
.csd & {
1332
border: none; // axes borders in a composited env
1333
border-radius: 2px;
1334
}
1335
menuitem {
1337
transition: $shorter_transition;
1338
min-height: 20px;
1339
min-width: 40px;
1340
padding: 4px 8px;
1341
font: initial;
1342
text-shadow: none;
1343
&:hover {
1345
transition: none;
1346
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1347
}
1348
&:disabled { color: $disabled_fg_color; }
1350
// submenu indicators
1352
arrow {
1353
min-height: 16px;
1354
min-width: 16px;
1355
&:dir(ltr) {
1357
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1358
margin-left: 8px;
1359
}
1360
&:dir(rtl) {
1362
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1363
margin-right: 8px;
1364
}
1365
}
1366
// avoids labels color being overridden, see
1368
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1369
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1370
}
1371
// overflow arrows
1373
> arrow {
1374
min-height: 16px;
1375
min-width: 16px;
1376
padding: 4px;
1377
border-radius: 0;
1378
background-color: $base_color;
1379
color: $secondary_fg_color;
1380
&.top {
1382
margin-top: -4px;
1383
border-bottom: 1px solid $borders_color;
1384
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1385
}
1386
&.bottom {
1388
margin-bottom: -4px;
1389
border-top: 1px solid $borders_color;
1390
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1391
}
1392
&:hover {
1394
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1395
color: $fg_color;
1396
}
1397
&:disabled {
1399
border-color: transparent;
1400
background-color: transparent;
1401
color: transparent;
1402
// color: $disabled_secondary_fg_color;
1403
}
1404
}
1405
separator { margin: 4px 0; }
1407
}
1408
menuitem {
1410
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1411
check,
1413
radio {
1414
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1415
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1416
}
1417
}
1418
.csd.popup { border-radius: 2px; }
1420
/***************
1423
* Popovers *
1424
***************/
1425
popover.background {
1426
transition: $shadow_transition;
1427
padding: 0;
1428
box-shadow: $z-depth-2; // TODO: this should really have a highlight
1429
background-color: $lighter_bg_color;
1430
&:backdrop { box-shadow: $z-depth-1; }
1432
&, .csd & {
1434
border-style: solid;
1435
border-width: 1px;
1436
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1437
border-radius: 2px + 1px;
1438
}
1439
> list,
1441
> .view,
1442
> toolbar {
1443
border-style: none;
1444
box-shadow: none;
1445
background-color: transparent;
1446
}
1447
&, .csd & {
1449
&.touch-selection,
1450
&.magnifier,
1451
&.osd { @extend %osd; }
1452
}
1453
// entry { @extend %entry.flat; }
1455
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1457
&.menu button.model {
1459
@extend %simple_flat_button;
1460
min-height: 32px;
1462
padding: 0 8px;
1463
border-radius: 2px;
1464
&:checked {
1466
background-color: $primary_color;
1467
color: $inversed_fg_color;
1468
}
1469
}
1470
separator { margin: 4px 0; }
1472
list separator { margin: 0; }
1474
}
1475
/*************
1477
* Notebooks *
1478
*************/
1479
notebook {
1480
> header {
1481
border-width: 1px;
1482
border-color: $borders_color;
1483
background-color: $bg_color;
1484
background-clip: border-box;
1485
&.top {
1487
border-bottom-style: solid;
1488
> tabs {
1489
margin-bottom: -1px;
1490
> tab {
1491
&:hover { box-shadow: inset 0 -2px $track_color; }
1493
&:checked { box-shadow: inset 0 -2px $primary_color; }
1495
}
1496
}
1497
}
1498
&.bottom {
1500
border-top-style: solid;
1501
> tabs {
1502
margin-top: -1px;
1503
> tab {
1504
&:hover { box-shadow: inset 0 2px $track_color; }
1506
&:checked { box-shadow: inset 0 2px $primary_color; }
1508
}
1509
}
1510
}
1511
&.left {
1513
border-right-style: solid;
1514
> tabs {
1515
margin-right: -1px;
1516
> tab {
1517
&:hover { box-shadow: inset -2px 0 $track_color; }
1519
&:checked { box-shadow: inset -2px 0 $primary_color; }
1521
}
1522
}
1523
}
1524
&.right {
1526
border-left-style: solid;
1527
> tabs {
1528
margin-left: -1px;
1529
> tab {
1530
&:hover { box-shadow: inset 2px 0 $track_color; }
1532
&:checked { box-shadow: inset 2px 0 $primary_color; }
1534
}
1535
}
1536
}
1537
&.top > tabs > arrow {
1539
@extend %notebook_vert_arrows;
1540
border-top-style: none;
1542
}
1543
&.bottom > tabs > arrow {
1545
@extend %notebook_vert_arrows;
1546
border-bottom-style: none;
1548
}
1549
@at-root %notebook_vert_arrows {
1551
padding-left: 4px;
1552
padding-right: 4px;
1553
&.down {
1555
margin-left: -8px;
1556
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1557
}
1558
&.up {
1560
margin-right: -8px;
1561
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1562
}
1563
}
1564
&.left > tabs > arrow {
1566
@extend %notebook_horz_arrows;
1567
border-left-style: none;
1569
}
1570
&.right > tabs > arrow {
1572
@extend %notebook_horz_arrows;
1573
border-right-style: none;
1575
}
1576
@at-root %notebook_horz_arrows {
1578
padding-top: 4px;
1579
padding-bottom: 4px;
1580
&.down {
1582
margin-top: -8px;
1583
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1584
}
1585
&.up {
1587
margin-bottom: -8px;
1588
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1589
}
1590
}
1591
> tabs > arrow {
1593
@extend %simple_flat_button;
1594
min-height: 16px;
1596
min-width: 16px;
1597
border-radius: 0;
1598
}
1599
tab {
1601
transition: $longer_transition;
1602
min-height: $small_size;
1603
min-width: $small_size;
1604
padding: $container_padding 12px;
1605
outline-offset: -6px;
1607
border-width: 1px; // for reorderable tabs
1609
border-color: transparent; //
1610
color: $secondary_fg_color;
1612
font-weight: 500;
1613
&:hover {
1615
color: $fg_color;
1616
&.reorderable-page {
1618
border-color: $borders_color;
1619
background-color: $alt_base_color;
1620
}
1621
}
1622
&:disabled { color: $disabled_secondary_fg_color; }
1624
&:checked {
1626
animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve;
1627
color: $fg_color;
1628
&:disabled { color: $disabled_fg_color; }
1630
&.reorderable-page {
1632
border-color: $borders_color;
1633
background-color: $base_color;
1634
}
1635
}
1636
// colors the button like the label, overridden otherwise
1638
button.flat {
1639
@extend %small_button;
1640
&:last-child {
1642
margin-left: $container_padding;
1643
margin-right: $container_padding - 12px;
1644
}
1645
&:first-child {
1647
margin-left: $container_padding - 12px;
1648
margin-right: $container_padding;
1649
}
1650
}
1651
}
1652
&.top,
1654
&.bottom {
1655
tabs {
1656
padding-left: 8px;
1657
padding-right: 8px;
1658
&:not(:only-child) {
1660
&:first-child { margin-left: 0; }
1661
&:last-child { margin-right: 0; }
1662
}
1663
tab {
1665
&.reorderable-page {
1666
margin: 0 -1px;
1667
border-style: none solid;
1668
}
1669
}
1670
}
1671
}
1672
&.left,
1674
&.right {
1675
tabs {
1676
padding-top: 8px;
1677
padding-bottom: 8px;
1678
&:not(:only-child) {
1680
&:first-child { margin-top: 0; }
1681
&:last-child { margin-bottom: 0; }
1682
}
1683
tab {
1685
&.reorderable-page {
1686
margin: -1px 0;
1687
border-style: solid none;
1688
}
1689
}
1690
}
1691
}
1692
}
1693
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1695
background-color: $base_color;
1696
entry,
1698
spinbutton:not(.vertical) { @extend %entry.flat; }
1699
revealer entry,
1701
revealer spinbutton:not(.vertical) { @extend %entry; }
1702
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1704
}
1705
}
1706
/**************
1709
* Scrollbars *
1710
**************/
1711
scrollbar {
1712
$_slider_min_length: 24px;
1713
// disable steppers
1715
@at-root * {
1716
-GtkScrollbar-has-backward-stepper: false;
1717
-GtkScrollbar-has-forward-stepper: false;
1718
}
1719
transition: $longer_transition;
1721
background-color: $base_color;
1722
background-clip: $extra_background_clip;
1723
// scrollbar border
1725
&.top { border-bottom: 1px solid $borders_color; }
1726
&.bottom { border-top: 1px solid $borders_color; }
1727
&.left { border-right: 1px solid $borders_color; }
1728
&.right { border-left: 1px solid $borders_color; }
1729
// slider
1731
slider {
1732
transition: $shorter_transition, margin 0, border-width 0;
1733
min-width: 8px;
1734
min-height: 8px;
1735
border: 4px solid transparent;
1736
border-radius: $circular_radius;
1737
background-clip: padding-box;
1738
background-color: $tertiary_fg_color;
1739
&:hover { background-color: $secondary_fg_color; }
1741
&:active { background-color: $fg_color; }
1743
&:disabled { background-color: $disabled_tertiary_fg_color; }
1745
}
1746
&.fine-tune {
1748
slider {
1749
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1750
min-width: 4px;
1751
min-height: 4px;
1752
}
1753
&.horizontal slider { margin: 2px 0; }
1755
&.vertical slider { margin: 0 2px; }
1757
}
1758
&.overlay-indicator {
1760
&:not(.dragging):not(.hovering) {
1761
border-color: transparent;
1762
background-color: transparent;
1763
slider {
1765
min-width: 4px;
1766
min-height: 4px;
1767
margin: 4px - 1px;
1768
border: 1px solid scale-alpha($base_color, $lower_opacity);
1769
}
1770
button {
1772
min-width: 4px;
1773
min-height: 4px;
1774
margin: 4px - 1px;
1775
border: 1px solid scale-alpha($base_color, $lower_opacity);
1776
border-radius: $circular_radius;
1777
background-color: $tertiary_fg_color;
1778
background-clip: padding-box;
1779
-gtk-icon-source: none;
1780
&:disabled { background-color: $disabled_tertiary_fg_color; }
1782
}
1783
&.horizontal {
1785
slider { min-width: $_slider_min_length; }
1786
button { min-width: 8px; }
1788
}
1789
&.vertical {
1791
slider { min-height: $_slider_min_length; }
1792
button { min-height: 8px; }
1794
}
1795
}
1796
&.dragging,
1798
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1799
}
1800
&.horizontal slider { min-width: $_slider_min_length; }
1802
&.vertical slider { min-height: $_slider_min_length; }
1804
// button styling
1806
button {
1807
@extend %simple_flat_button;
1808
min-width: 16px;
1810
min-height: 16px;
1811
padding: 0;
1812
border-radius: 0;
1813
}
1814
// button icons
1816
&.vertical {
1817
button {
1818
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1819
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1821
}
1822
}
1823
&.horizontal {
1825
button {
1826
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1827
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1829
}
1830
}
1831
}
1832
/**********
1835
* Switch *
1836
**********/
1837
switch {
1838
transition: $longer_transition;
1839
margin: $container_padding 0;
1840
border: 4px solid transparent;
1841
border-radius: $circular_radius;
1842
background-color: $track_color;
1843
background-clip: padding-box;
1844
font-size: 0;
1845
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1847
&:checked {
1849
background-color: scale-alpha($accent_color, 0.5);
1850
&:disabled {
1852
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1853
color: $disabled_fg_color;
1854
}
1855
}
1856
slider {
1858
@include entry(normal);
1859
transition: $longer_transition, $shadow_transition, margin 0;
1861
min-width: $small_size;
1862
min-height: $small_size;
1863
margin: -4px 0 -4px -4px;
1864
-gtk-outline-radius: $circular_radius;
1865
border-radius: $circular_radius;
1866
}
1867
&:hover slider { @include entry(focus); }
1869
&:checked slider {
1871
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0 $longer_duration;
1872
animation: needs_attention $longer_duration $deceleration_curve;
1873
margin: -4px -4px -4px 0;
1874
background-color: $accent_color;
1875
color: $inversed_fg_color;
1876
}
1877
&:disabled slider { @include entry(disabled); }
1879
&:checked:disabled slider { animation: none; }
1881
row:selected & {
1883
}
1884
}
1885
/*************************
1888
* Check and Radio items *
1889
*************************/
1890
// draw regular check and radio items using our PNG assets
1891
// all assets are rendered from assets.svg. never add pngs directly
1892
//selection-mode
1894
@each $s,$as in ('','-selectionmode'),
1895
(':hover', '-hover-selectionmode'),
1896
(':checked', '-checked-selectionmode'),
1897
(':checked:hover', '-checked-hover-selectionmode') {
1898
.view.content-view.check#{$s}:not(list) {
1899
-gtk-icon-shadow: $z-depth-1;
1900
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1901
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1902
margin: 8px;
1903
background-color: transparent;
1904
}
1905
}
1906
checkbutton.text-button,
1908
radiobutton.text-button {
1909
// this is for a nice focus on check and radios text
1910
padding: 2px;
1911
outline-offset: 0;
1912
label:not(:only-child) { margin: 0 4px; }
1914
}
1915
check,
1917
radio {
1918
min-height: 24px;
1919
min-width: 24px;
1920
margin: -($large_size - 24px) / 2;
1921
padding: ($large_size - 24px) / 2;
1922
@extend %simple_flat_button;
1924
@extend %circular_button;
1926
&:checked, &:indeterminate { color: $accent_color; }
1928
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1930
// &:only-child { margin: -12px; }
1932
row &:not(:checked):not(:indeterminate) {
1934
color: gtkalpha(currentColor, $enabled_opacity);
1935
&:hover, &:active { color: currentColor; }
1937
&:disabled { color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity); }
1939
}
1940
menu menuitem & {
1942
transition: none;
1943
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1944
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1946
&, &:hover, &:disabled {
1948
background-image: none;
1949
// color: inherit;
1950
// animation: none;
1951
}
1952
}
1953
}
1954
%check,
1956
check {
1957
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1958
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1959
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1961
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1962
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1964
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1965
}
1966
$radio_indicator: 10 / ($large_size / 1px) / 2;
1968
$radio_radius_slice: #{$large_size / 2 / 1px};
1969
$radio_radius_width: #{$large_size / 2};
1970
%radio,
1972
radio {
1973
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1974
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1975
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1977
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1978
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1980
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1981
border-image: -gtk-gradient(radial,
1983
center center, 0,
1984
center center, 0.001,
1985
to($accent_color),
1986
to(transparent))
1987
$radio_radius_slice / $radio_radius_width;
1988
&:checked {
1990
border-image: -gtk-gradient(radial,
1991
center center, 0,
1992
center center, $radio_indicator,
1993
to($accent_color),
1994
to(transparent))
1995
$radio_radius_slice / $radio_radius_width;
1996
}
1997
&:checked:disabled {
1999
border-image: -gtk-gradient(radial,
2000
center center, 0,
2001
center center, $radio_indicator,
2002
to(scale-alpha($accent_color, $disabled_opacity)),
2003
to(transparent))
2004
$radio_radius_slice / $radio_radius_width;
2005
}
2006
&:indeterminate:checked {
2008
border-image: -gtk-gradient(radial,
2009
center center, 0,
2010
center center, 0.001,
2011
to($accent_color),
2012
to(transparent))
2013
$radio_radius_slice / $radio_radius_width;
2014
}
2015
}
2016
// let's animate things
2018
@keyframes check_check {
2019
from { -gtk-icon-transform: rotate(90deg); }
2020
to { -gtk-icon-transform: unset; }
2021
}
2022
@keyframes check_radio { // FIXME: cannot animate border-image
2024
from {
2025
border-image: -gtk-gradient(radial,
2026
center center, 0,
2027
center center, 0.001,
2028
to($accent_color),
2029
to(transparent))
2030
$radio_radius_slice / $radio_radius_width;
2031
}
2032
to {
2034
border-image: -gtk-gradient(radial,
2035
center center, 0,
2036
center center, $radio_indicator,
2037
to($accent_color),
2038
to(transparent))
2039
$radio_radius_slice / $radio_radius_width;
2040
}
2041
}
2042
@keyframes check_indeterminate {
2044
from { -gtk-icon-transform: unset; }
2045
50% { -gtk-icon-transform: scale(0, 1); }
2046
to { -gtk-icon-transform: unset; }
2047
}
2048
%check_checked,
2050
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2051
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2053
// %radio_checked,
2055
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2056
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2058
%indeterminate_checked,
2060
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2061
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2063
// no animations in menus
2065
menu menuitem {
2066
check:not(:indeterminate):checked,
2067
radio:not(:indeterminate):checked,
2068
check:indeterminate:checked,
2069
radio:indeterminate:checked { animation: none; }
2070
}
2071
treeview.view check,
2073
treeview.view radio {
2074
padding: 0;
2075
&:hover {
2077
box-shadow: inset 0 0 0 10000px gtkalpha($fg_color, 0.05);
2078
background-image: none;
2079
&:selected { box-shadow: inset 0 0 0 10000px gtkalpha($inversed_fg_color, 0.05); }
2081
}
2082
& {
2084
color: $secondary_fg_color;
2085
&:hover, &:active { color: $fg_color; }
2087
&:disabled { color: $disabled_secondary_fg_color; }
2089
&:checked, &:indeterminate { color: $accent_color; }
2091
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2093
}
2094
&:selected {
2096
color: $secondary_inversed_fg_color;
2097
&:hover, &:active { color: $inversed_fg_color; }
2099
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2101
&:checked, &:indeterminate { color: $accent_color; }
2103
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2105
}
2106
}
2107
treeview.view radio:checked {
2109
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2110
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2111
border-image: none;
2112
}
2113
/************
2116
* GtkScale *
2117
************/
2118
scale {
2119
// sizing
2120
$_marks_lenght: 8px;
2121
$_marks_distance: 8px;
2122
min-height: $medium_size - 24px;
2124
min-width: $medium_size - 24px;
2125
padding: (24px / 2);
2126
* { transition: $longer_transition; }
2128
// the slider is inside the trough, so to have make it bigger there's a negative margin
2130
slider {
2131
min-height: 24px;
2132
min-width: 24px;
2133
margin: ($bar_size - 24px) / 2;
2134
}
2135
// the backing bit
2137
trough {
2138
outline-offset: 2px;
2139
background-color: $track_color;
2140
&:disabled { color: $disabled_fg_color; }
2142
}
2143
// the colored part of the backing bit
2145
highlight {
2146
background-color: $accent_color;
2147
&:disabled { background-color: transparent; }
2149
}
2150
// this is another differently styled part of the backing bit, the most relevant use case is for example
2152
// in media player to indicate how much video stream as been cached
2153
fill {
2154
background-color: $track_color;
2155
&:disabled { background-color: transparent; }
2157
}
2158
slider {
2160
transition: all $shorter_duration $standard_curve;
2161
// border-radius: 100%;
2162
// background-color: $accent_color;
2163
background-repeat: no-repeat;
2164
background-position: center;
2165
@each $s,$as in ('',''),
2167
(':disabled','-insensitive') {
2168
&#{$s} {
2169
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2170
background-image: -gtk-scaled(url('#{$_url}.png'),
2171
url('#{$_url}@2.png'));
2172
}
2173
}
2174
background-size: calc(100% - 8px);
2176
&:hover { background-size: calc(100% - 4px); }
2178
&:active { background-size: calc(100% - 0px); }
2180
}
2181
// click-and-hold the slider to activate
2183
&.fine-tune {
2184
// to make the slider shrink in fine-tune mode
2185
slider { background-size: calc(100% - 12px); }
2186
}
2187
value { color: gtkalpha(currentColor, $hint_opacity); }
2189
marks {
2191
color: $track_color;
2192
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2194
(bottom, bottom, top),
2195
(top, left, right),
2196
(bottom, right, left) {
2197
&.#{$marks_class} {
2198
margin-#{$marks_margin}: $_marks_distance;
2199
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2200
}
2201
}
2202
}
2203
&.horizontal {
2205
indicator {
2206
min-height: $_marks_lenght;
2207
min-width: 1px;
2208
}
2209
}
2210
&.vertical {
2212
indicator {
2213
min-height: 1px;
2214
min-width: $_marks_lenght;
2215
}
2216
}
2217
// *WARNING* scale with marks madness following
2219
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2221
$suffix: if($variant == 'light', '', '-dark');
2222
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2224
('vertical', 'vert') {
2225
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2226
('scale-has-marks-below', ':first-child:not(:only-child)') {
2227
@each $state, $state_infix in ('', ''),
2228
(':disabled', '-insensitive') {
2229
&.#{$dir_class} {
2230
%#{$marks_infix}-#{$dir_infix},
2231
contents#{$nth_child} > trough > slider {
2232
&#{$state} {
2233
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2234
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2236
}
2237
@if $dir_class == 'horizontal' {
2239
min-height: 30px;
2240
min-width: 24px;
2241
@if $marks_infix == 'scale-has-marks-above' {
2243
margin-top: -16px;
2244
background-position: center calc(100% - 4px);
2246
&:hover { background-position: center calc(100% - 2px); }
2248
&:active { background-position: center calc(100% - 0px); }
2250
}
2251
@if $marks_infix == 'scale-has-marks-below' {
2253
margin-bottom: -16px;
2254
background-position: center calc(4px);
2256
&:hover { background-position: center calc(2px); }
2258
&:active { background-position: center calc(0px); }
2260
}
2261
}
2262
@if $dir_class == 'vertical' {
2264
min-height: 24px;
2265
min-width: 30px;
2266
@if $marks_infix == 'scale-has-marks-above' {
2268
margin-left: -16px;
2269
background-position: calc(4px) center;
2271
&:hover { background-position: calc(2px) center; }
2273
&:active { background-position: calc(0px) center; }
2275
}
2276
@if $marks_infix == 'scale-has-marks-below' {
2278
margin-right: -16px;
2279
background-position: calc(100% - 4px) center;
2281
&:hover { background-position: calc(100% - 2px) center; }
2283
&:active { background-position: calc(100% - 0px) center; }
2285
}
2286
}
2287
}
2288
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2290
&.fine-tune contents#{$nth_child} > trough > slider {
2291
// bigger negative margins to make the trough grow here as well
2292
@if $dir_class == 'horizontal' {
2294
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2295
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2297
}
2298
@if $dir_class == 'vertical' {
2300
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2301
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2303
}
2304
}
2305
}
2306
}
2307
}
2308
}
2309
&.color {
2311
min-height: 0;
2312
min-width: 0;
2313
&.horizontal {
2315
padding: 0 0 12px 0;
2316
trough {
2318
padding-bottom: $bar_size;
2319
}
2320
slider {
2322
@extend %scale-has-marks-above-horz;
2323
margin-bottom: -10px - $bar_size;
2325
margin-top: 0;
2326
}
2327
}
2328
&.vertical {
2330
&:dir(ltr) {
2331
padding: 0 0 0 12px;
2332
trough {
2334
padding-left: $bar_size;
2335
}
2336
slider {
2338
@extend %scale-has-marks-below-vert;
2339
margin-left: -10px - $bar_size;
2341
margin-right: 0;
2342
}
2343
}
2344
&:dir(rtl) {
2346
padding: 0 12px 0 0;
2347
trough {
2349
padding-right: $bar_size;
2350
}
2351
slider {
2353
@extend %scale-has-marks-above-vert;
2354
margin-right: -10px - $bar_size;
2356
margin-left: 0;
2357
}
2358
}
2359
}
2360
&.fine-tune {
2362
&.horizontal {
2363
slider {
2364
@extend %scale-has-marks-above-horz-fine-tune;
2365
}
2366
}
2367
&.vertical {
2369
&:dir(ltr) {
2370
slider {
2371
@extend %scale-has-marks-below-vert-fine-tune;
2372
}
2373
}
2374
&:dir(rtl) {
2376
slider {
2377
@extend %scale-has-marks-above-vert-fine-tune;
2378
}
2379
}
2380
}
2381
}
2382
}
2383
}
2384
/*****************
2387
* Progress bars *
2388
*****************/
2389
progressbar {
2390
// sizing
2391
&.horizontal {
2392
trough,
2393
progress { min-height: $bar_size; }
2394
}
2395
&.vertical {
2397
trough,
2398
progress { min-width: $bar_size; }
2399
}
2400
// FIXME: insensitive state missing and some other state should be set probably
2402
color: $tertiary_fg_color;
2403
font-size: smaller;
2404
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2406
progress { background-color: $primary_color; }
2408
&.osd { // progressbar.osd used for epiphany page loading progress
2410
// min-width: $bar_size;
2411
// min-height: $bar_size;
2412
// background-color: transparent;
2413
// trough { background-color: transparent; }
2415
progress {
2417
}
2418
}
2419
}
2420
/*************
2423
* Level Bar *
2424
*************/
2425
levelbar {
2426
block {
2427
min-width: $medium_size;
2428
min-height: $bar_size;
2429
}
2430
&.vertical block {
2432
min-width: $bar_size;
2433
min-height: $medium_size;
2434
}
2435
trough {
2437
padding: 2px;
2438
border-radius: 2px;
2439
@include entry(normal);
2441
&:disabled { @include entry(disabled); }
2443
}
2444
&.horizontal.discrete block { margin: 0 1px; }
2446
&.vertical.discrete block { margin: 1px 0; }
2448
&.horizontal.discrete trough { padding: 2px 1px; }
2450
&.vertical.discrete trough { padding: 1px 2px; }
2452
block {
2454
&.low {
2455
background-color: $warning_color;
2456
}
2457
&.high,
2459
&:not(.empty) {
2460
background-color: $primary_color;
2461
}
2462
&.full {
2464
background-color: $success_color;
2465
}
2466
&.empty {
2468
background-color: $track_color;
2469
color: $disabled_fg_color;
2470
}
2471
}
2472
}
2473
/****************
2476
* Print dialog *
2477
*****************/
2478
printdialog {
2479
paper {
2480
padding: 0;
2481
border: 1px solid $borders_color;
2482
background: $base_color;
2483
color: $fg_color;
2484
}
2485
.dialog-action-box { margin: 12px; }
2487
}
2488
/**********
2491
* Frames *
2492
**********/
2493
frame > border,
2494
.frame {
2495
margin: 0;
2496
padding: 0;
2497
border: 1px solid $borders_color;
2498
border-radius: 0;
2499
box-shadow: none;
2500
&.flat { border-style: none; }
2502
}
2503
actionbar > revealer > box {
2505
padding: $container_padding;
2506
border-top: 1px solid $borders_color;
2507
}
2508
scrolledwindow {
2510
viewport.frame { // avoid double borders when viewport inside scrolled window
2511
border-style: none;
2512
}
2513
// This is used when content is touch-dragged past boundaries.
2515
// draws a box on top of the content, the size changes programmatically.
2516
@at-root overshoot {
2517
&.top { @include overshoot(top); }
2518
&.bottom { @include overshoot(bottom); }
2520
&.left { @include overshoot(left); }
2522
&.right { @include overshoot(right); }
2524
}
2525
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2527
@at-root undershoot {
2528
&.top { @include undershoot(top); }
2529
&.bottom { @include undershoot(bottom); }
2531
&.left { @include undershoot(left); }
2533
&.right { @include undershoot(right); }
2535
}
2536
@at-root junction { // the small square between two scrollbars
2538
border-style: solid none none solid;
2539
border-width: 1px;
2540
border-color: $borders_color;
2541
background-color: $base_color;
2542
&:dir(rtl) { border-style: solid solid none none; }
2544
}
2545
}
2546
//vbox and hbox separators
2548
separator {
2549
min-width: 1px;
2550
min-height: 1px;
2551
background: $borders_color;
2552
}
2553
/*********
2556
* Lists *
2557
*********/
2558
list {
2559
border-color: $borders_color;
2560
background-color: $base_color;
2561
row { padding: 2px; }
2563
}
2564
// FIXME
2566
$row_transition: $longer_transition, background-color 0, color 0;
2567
row {
2569
&.activatable {
2570
transition: $row_transition;
2571
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0);
2572
background-image: radial-gradient(circle farthest-corner at center,
2573
gtkalpha(currentColor, 0) 100%,
2574
transparent 0%),
2575
image(gtkalpha(currentColor, 0));
2576
&:hover {
2578
transition: $row_transition, box-shadow 0;
2579
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0.05);
2580
}
2581
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2583
&:active {
2584
transition: $row_transition, background-image 0;
2585
animation: row_ripple_effect $longer_duration $deceleration_curve forwards;
2586
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, $lower_opacity / 2);
2587
}
2588
}
2589
&:selected { @extend %selected_items; }
2591
}
2592
/*********************
2595
* App Notifications *
2596
*********************/
2597
.app-notification,
2598
.app-notification.frame {
2599
@extend %osd;
2600
@extend toolbar.osd;
2602
margin: 8px;
2604
border { border: none; }
2606
}
2607
/*************
2610
* Expanders *
2611
*************/
2612
expander {
2613
arrow {
2614
transition: all $shorter_duration $standard_curve;
2615
min-width: 16px;
2616
min-height: 16px;
2617
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2618
-gtk-icon-transform: rotate(-90deg);
2619
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2621
&:checked { -gtk-icon-transform: unset; }
2623
color: $secondary_fg_color;
2625
&:hover, &:active { color: $fg_color; }
2627
&:disabled { color: $disabled_secondary_fg_color; }
2629
&:selected {
2631
color: $secondary_inversed_fg_color;
2632
&:hover, &:active { color: $inversed_fg_color; }
2634
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2636
}
2637
}
2638
}
2639
/************
2642
* Calendar *
2643
***********/
2644
calendar {
2645
padding: 1px;
2646
border: 1px solid $borders_color;
2647
color: $fg_color;
2648
&:disabled { color: $disabled_fg_color; }
2650
&:selected {
2652
@extend %selected_items;
2653
border-radius: 2px + 1px;
2655
}
2656
&.header {
2658
border-style: none none solid;
2659
border-radius: 0;
2660
}
2661
&.button { @extend %simple_flat_button; }
2663
&.highlight {
2665
color: gtkalpha(currentColor, $hint_opacity);
2666
font-weight: 500;
2667
}
2668
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2670
}
2671
/***********
2674
* Dialogs *
2675
***********/
2676
messagedialog { // Message Dialog styling
2677
&.background { background-color: $lighter_bg_color; }
2678
.titlebar {
2680
min-height: $small_size;
2681
border-style: none;
2682
box-shadow: inset 0 1px $highlight_color;
2683
background-color: $lighter_bg_color;
2684
}
2685
&.csd { // rounded bottom border styling for csd version
2687
&.background {
2688
// bigger radius for better antialiasing
2689
border-bottom-left-radius: 2px;
2690
border-bottom-right-radius: 2px;
2691
}
2692
.dialog-action-area button {
2694
padding: 8px 16px;
2695
border-top: 1px solid $borders_color;
2696
border-radius: 0;
2697
@extend %simple_flat_button;
2699
&:first-child { border-bottom-left-radius: 2px; }
2701
&:last-child { border-bottom-right-radius: 2px; }
2703
}
2704
}
2705
}
2706
filechooser {
2708
.dialog-action-box { border-top: 1px solid $borders_color; }
2709
#pathbarbox {
2711
border-bottom: 1px solid $borders_color;
2712
background-color: $bg_color;
2713
}
2714
}
2715
filechooserbutton:drop(active) {
2717
box-shadow: none;
2718
}
2719
/***********
2722
* Sidebar *
2723
***********/
2724
.sidebar {
2725
border-style: none;
2726
background-color: $lighter_bg_color;
2727
@at-root %sidebar_left,
2729
&:dir(ltr),
2730
&.left,
2731
&.left:dir(rtl) {
2732
border-right: 1px solid $borders_color;
2733
border-left-style: none;
2734
}
2735
@at-root %sidebar_right
2737
&:dir(rtl),
2738
&.right {
2739
border-left: 1px solid $borders_color;
2740
border-right-style: none;
2741
}
2742
list { background-color: transparent; }
2744
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2746
}
2747
stacksidebar {
2749
&.sidebar {
2750
&:dir(ltr),
2751
&.left,
2752
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2753
&:dir(rtl),
2755
&.right { list { @extend %sidebar_right; }}
2756
}
2757
row {
2759
padding: 10px 4px;
2760
> label {
2762
padding-left: 6px;
2763
padding-right: 6px;
2764
}
2765
&.needs-attention > label { @extend %needs_attention; }
2767
}
2768
}
2769
/****************
2772
* File chooser *
2773
****************/
2774
placessidebar {
2775
> viewport.frame { border-style: none; }
2776
list { padding: (4px - 3px) 0 4px; }
2778
row {
2780
// Needs overriding of the GtkListBoxRow padding
2781
min-height: 32px;
2782
margin: -1px 0; // Remove unknown margins
2783
padding: 0;
2784
// Using margins/padding directly in the SidebarRow
2786
// will make the animation of the new bookmark row jump
2787
> revealer { padding: 0 12px; }
2788
&:selected { color: $inversed_fg_color; }
2790
&:disabled { color: $disabled_fg_color; }
2792
image.sidebar-icon {
2794
opacity: $hint_opacity; // dim the device icons
2795
&:dir(ltr) { padding-right: 8px; }
2797
&:dir(rtl) { padding-left: 8px; }
2798
}
2799
label.sidebar-label {
2801
&:dir(ltr) { padding-right: 2px; }
2802
&:dir(rtl) { padding-left: 2px; }
2803
}
2804
@at-root button.sidebar-button {
2806
@extend %simple_flat_button;
2807
@extend %small_button;
2809
row:selected & {
2811
}
2812
}
2813
&.sidebar-placeholder-row {
2815
min-height: 2px;
2816
padding: 0 8px;
2817
background-image: image($accent_color);
2818
background-clip: content-box;
2819
}
2820
&.sidebar-new-bookmark-row { color: $accent_color; }
2822
&:drop(active):not(:disabled) {
2824
box-shadow: inset 0 0 0 2px $accent_color;
2825
&:selected {
2827
// background-color: $accent_color;
2828
// color: $inversed_fg_color;
2829
}
2830
}
2831
}
2832
}
2833
placesview {
2835
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2836
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2838
// this selects the "connect to server" label
2840
> actionbar > revealer > box > label {
2841
padding-left: 8px;
2842
padding-right: 8px;
2843
}
2844
}
2845
/*********
2848
* Paned *
2849
*********/
2850
paned {
2851
> separator {
2852
min-width: 1px;
2853
min-height: 1px;
2854
-gtk-icon-source: none; // defeats the ugly default handle decoration
2855
border-style: none; // just to be sure
2856
background-color: transparent;
2857
// workaround, using background istead of a border since the border will get rendered twice (?)
2858
background-image: image($borders_color);
2859
background-size: 1px 1px;
2860
&.wide {
2862
min-width: 6px;
2863
min-height: 6px;
2864
background-color: $bg_color;
2865
background-image: image($borders_color), image($borders_color);
2866
background-size: 1px 1px, 1px 1px;
2867
}
2868
}
2869
&.horizontal > separator {
2871
background-repeat: repeat-y;
2872
&:dir(ltr) {
2874
margin: 0 -8px 0 0;
2875
padding: 0 8px 0 0;
2876
background-position: left;
2877
}
2878
&:dir(rtl) {
2880
margin: 0 0 0 -8px;
2881
padding: 0 0 0 8px;
2882
background-position: right;
2883
}
2884
&.wide {
2886
margin: 0;
2887
padding: 0;
2888
background-repeat: repeat-y, repeat-y;
2889
background-position: left, right;
2890
}
2891
}
2892
&.vertical > separator {
2894
margin: 0 0 -8px 0;
2895
padding: 0 0 8px 0;
2896
background-repeat: repeat-x;
2897
background-position: top;
2898
&.wide {
2900
margin: 0;
2901
padding: 0;
2902
background-repeat: repeat-x, repeat-x;
2903
background-position: bottom, top;
2904
}
2905
}
2906
}
2907
/**************
2910
* GtkInfoBar *
2911
**************/
2912
infobar {
2913
border-style: none;
2914
&.info { background-color: $info_bg_color; }
2916
&.question { background-color: $question_bg_color; }
2918
&.warning { background-color: $warning_bg_color; }
2920
&.error { background-color: $error_bg_color; }
2922
&.info,
2924
&.question,
2925
&.warning,
2926
&.error {
2927
> label, & { color: $inversed_fg_color; }
2928
button { @extend %button_selected; }
2930
selection { }
2932
*:link { @extend %link_selected; }
2934
}
2935
}
2936
/************
2939
* Tooltips *
2940
************/
2941
tooltip {
2942
&.background {
2943
// background-color needs to be set this way otherwise it gets drawn twice
2944
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2945
box-shadow: inset 0 1px $highlight_color;
2946
background-color: scale-alpha($base_color, $higher_opacity);
2947
}
2948
// @extend %osd;
2950
// padding: 4px; /* not working */
2952
border-radius: 2px;
2953
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2954
// FIXME: we need a border or tooltips vanish on black background.
2956
decoration { background-color: transparent; }
2957
label {
2959
// tooltip label has already 6px margins
2960
min-height: 32px - 6px * 2;
2961
padding: 0 8px - 6px;
2962
}
2963
* { // Yeah this is ugly
2965
padding: 0;
2966
background-color: transparent;
2967
color: inherit;
2968
}
2969
}
2970
/*****************
2973
* Color Chooser *
2974
*****************/
2975
colorswatch {
2976
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2977
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2978
// applied to the overlay box.
2979
// base color corners rounding
2981
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2982
// sports a bigger radius.
2983
// nth-child is needed by the custom color strip.
2984
&.top {
2986
border-top-left-radius: $md_radius + 0.5px;
2987
border-top-right-radius: $md_radius + 0.5px;
2988
overlay {
2990
border-top-left-radius: $md_radius;
2991
border-top-right-radius: $md_radius;
2992
}
2993
}
2994
&.bottom {
2996
border-bottom-left-radius: $md_radius + 0.5px;
2997
border-bottom-right-radius: $md_radius + 0.5px;
2998
overlay {
3000
border-bottom-left-radius: $md_radius;
3001
border-bottom-right-radius: $md_radius;
3002
}
3003
}
3004
&.left,
3006
&:first-child:not(.top) {
3007
border-top-left-radius: $md_radius + 0.5px;
3008
border-bottom-left-radius: $md_radius + 0.5px;
3009
overlay {
3011
border-top-left-radius: $md_radius;
3012
border-bottom-left-radius: $md_radius;
3013
}
3014
}
3015
&.right,
3017
&:last-child:not(.bottom) {
3018
border-top-right-radius: $md_radius + 0.5px;
3019
border-bottom-right-radius: $md_radius + 0.5px;
3020
overlay {
3022
border-top-right-radius: $md_radius;
3023
border-bottom-right-radius: $md_radius;
3024
}
3025
}
3026
&.dark overlay { color: $dark_contrast_color; }
3028
&.light overlay { color: $light_contrast_color; }
3030
&.dark { color: $dark_contrast_color; } // for focus ring
3032
&.light { color: $light_contrast_color; } // for focus ring
3034
&:drop(active) {
3036
box-shadow: none;
3037
&.light overlay {
3039
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3040
}
3041
&.dark overlay {
3043
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3044
}
3045
}
3046
overlay {
3048
transition: $shadow_transition;
3049
box-shadow: $z-depth-1;
3050
&:hover { box-shadow: $z-depth-2; }
3052
}
3053
&#add-color-button {
3055
border-radius: $md_radius $md_radius 0 0;
3056
color: $dark_contrast_color; // for focus ring
3057
&:only-child { border-radius: $md_radius; }
3059
overlay {
3061
background-image: linear-gradient(to right,
3062
$error_bg_color 25%,
3063
$warning_bg_color 25%, $warning_bg_color 50%,
3064
$info_bg_color 50%, $info_bg_color 75%,
3065
$question_bg_color 75%);
3066
color: $dark_contrast_color;
3067
}
3068
}
3069
&:disabled {
3071
opacity: $disabled_opacity;
3072
overlay { box-shadow: none; }
3074
}
3075
row:selected & {
3077
}
3078
&#editor-color-sample {
3080
border-radius: $md_radius + 0.5px;
3081
overlay { border-radius: $md_radius; }
3083
// overlay:hover { box-shadow: $z-depth-1; }
3085
}
3086
}
3087
// colorscale popup
3089
colorchooser .popover.osd {
3090
transition: $shadow_transition;
3091
border-radius: 2px;
3092
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
3093
background-color: $base_color;
3094
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
3096
spinbutton:not(.vertical) { @extend %entry.flat; }
3098
}
3099
/********
3102
* Misc *
3103
********/
3104
//content view (grid/list)
3105
.content-view {
3106
background-color: $bg_color;
3107
// &:hover { -gtk-icon-effect: highlight; }
3109
rubberband { @extend rubberband; }
3111
}
3112
.scale-popup {
3114
.osd & { @extend %osd; }
3115
.osd & button.flat { //FIXME: quick hack, redo properly
3117
}
3118
button { // +/- buttons on GtkVolumeButton popup
3120
}
3121
}
3122
/**********************
3125
* Window Decorations *
3126
*********************/
3127
decoration {
3128
transition: $shadow_transition;
3129
border-radius: 2px 2px 0 0;
3130
box-shadow: $z-depth-4, 0 16px 16px transparent;
3131
// FIXME rationalize shadows
3133
// this is used for the resize cursor area
3135
margin: 8px;
3136
&:backdrop {
3138
// the transparent shadow here is to enforce that the shadow extents don't
3139
// change when we go to backdrop, to prevent jumping windows.
3140
// The biggest shadow should be in the same order then in the active state
3141
// or the jumping will happen during the transition.
3142
box-shadow: $z-depth-2, 0 16px 16px transparent;
3143
}
3144
.maximized &,
3146
.fullscreen &,
3147
.tiled & { border-radius: 0; }
3148
.popup & { box-shadow: none; }
3150
// server-side decorations as used by mutter
3152
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3153
.csd.popup & {
3155
border-radius: 2px;
3156
box-shadow: $z-depth-2;
3157
}
3158
tooltip.csd & {
3160
border-radius: 2px;
3161
box-shadow: $z-depth-2;
3162
}
3163
messagedialog.csd & {
3165
border-radius: 2px;
3166
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3167
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3169
}
3170
.solid-csd & {
3172
margin: 0;
3173
padding: 4px;
3174
// border: solid 1px $borders_color;
3175
// border-radius: 0;
3176
box-shadow: inset 0 0 0 4px $headerbar_color;
3177
// background-color: $borders_color;
3178
}
3179
}
3180
// Window Close button
3182
button.titlebutton {
3183
// @extend %simple_flat_button;
3184
@extend %circular_button;
3186
.selection-mode & {
3188
}
3189
}
3190
// catch all extend :)
3193
%selected_items {
3195
background-color: $primary_color;
3196
@at-root %nobg_selected_items, & {
3198
color: $inversed_fg_color;
3199
&:disabled { color: $disabled_inversed_fg_color; }
3201
}
3202
}
3203
.monospace { font-family: monospace; }
3205
/**********************
3208
* Touch Copy & Paste *
3209
*********************/
3210
//touch selection handlebars for the Popover.osd above
3211
cursor-handle {
3212
border-radius: $circular_radius;
3213
background-color: $accent_color;
3214
background-image: none;
3215
&.top:dir(ltr), &.bottom:dir(rtl) {
3217
padding-left: 6px;
3218
border-top-right-radius: 0;
3219
}
3220
&.bottom:dir(ltr), &.top:dir(rtl) {
3222
padding-right: 6px;
3223
border-top-left-radius: 0;
3224
}
3225
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3227
-GtkWidget-text-handle-width: 24;
3228
-GtkWidget-text-handle-height: 30;
3229
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3231
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3232
url('#{$_url}@2.png'));
3233
}
3234
}
3235
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3237
%circular_button,
3239
button.circular { // FIXME: aggregate to buttons
3240
border-radius: $circular_radius;
3241
-gtk-outline-radius: $circular_radius;
3242
// label { padding: 0; }
3244
}
3245
%small_button {
3247
min-height: $small_size;
3248
min-width: $small_size;
3249
padding: 0;
3250
border-radius: $circular_radius;
3251
-gtk-outline-radius: $circular_radius;
3252
}
3253
// shortcut window keys
3255
.keycap {
3256
min-width: 28px - 8px * 2;
3257
min-height: 28px - 2px;
3258
margin-top: 2px;
3259
padding-bottom: 2px;
3260
padding-left: 8px;
3261
padding-right: 8px;
3262
border: solid 1px $borders_color;
3264
border-radius: 2px + 1px;
3265
box-shadow: inset 0 -2px $borders_color;
3266
background-color: $base_color;
3267
color: $fg_color;
3268
font-size: smaller;
3269
}
3270
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3272
transition: $longer_transition;
3273
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_color;
3274
caret-color: $accent_color;
3275
}
3276
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3278
stackswitcher button.circular,
3280
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3281
min-width: $medium_size;
3282
min-height: $medium_size;
3283
padding: 0;
3284
}
3285