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
$material_radius: 2px;
14
$material_faster: 0.2s;
15
$material_slower: 0.3s;
16
$material_ease: cubic-bezier(0.4, 0.0, 0.2, 1);
17
$material_ease_out: cubic-bezier(0.0, 0.0, 0.2, 1);
18
$material_ease_in: cubic-bezier(0.4, 0.0, 1, 1);
19
// FIXME: color's transition is too slow
20
$material_transition: all $material_slower $material_ease_out, color 0;
21
$shadow_transition: box-shadow $material_faster $material_ease_out;
22
* {
24
padding: 0;
25
background-clip: padding-box;
26
-GtkToolButton-icon-spacing: 4;
28
-GtkTextView-error-underline-color: $error_color;
29
// The size for scrollbars. The slider is 2px smaller, but we keep it
31
// up so that the whole area is sensitive to button presses for the
32
// slider. The stepper button is larger in both directions, the slider
33
// only in the width
34
-GtkScrolledWindow-scrollbar-spacing: 0;
36
-GtkToolItemGroup-expander-size: 11;
38
-GtkWidget-text-handle-width: 24;
40
-GtkWidget-text-handle-height: 24;
41
-GtkDialog-button-spacing: 4;
43
-GtkDialog-action-area-border: 0;
44
// We use the outline properties to signal the focus properties
46
// to the adwaita engine: using real CSS properties is faster,
47
// and we don't use any outlines for now.
48
outline-style: solid;
50
outline-width: 2px;
51
outline-color: $track_color;
52
outline-offset: -4px;
53
-gtk-outline-radius: 2px;
54
-gtk-secondary-caret-color: $selected_bg_color;
56
}
57
/***************
60
* Base States *
61
***************/
62
.background {
63
background-color: $bg_color;
64
color: $fg_color;
65
}
66
/*
68
These wildcard seems unavoidable, need to investigate.
69
Wildcards are bad and troublesome, use them with care,
70
or better, just don't.
71
Everytime a wildcard is used a kitten dies, painfully.
72
*/
73
*:disabled { -gtk-icon-effect: dim; }
75
.gtkstyle-fallback {
77
background-color: $bg_color;
78
color: $fg_color;
79
&:hover {
81
background-color: darken($bg_color, 5%);
82
color: $fg_color;
83
}
84
&:active {
86
background-color: darken($bg_color, 10%);
87
color: $fg_color;
88
}
89
&:disabled {
91
background-color: $bg_color;
92
color: $insensitive_fg_color;
93
}
94
&:selected {
96
background-color: $selected_bg_color;
97
color: $selected_fg_color;
98
}
99
}
100
.view,
102
%view {
103
@extend row.activatable;
104
background-color: $base_color;
106
color: $fg_color;
107
&:hover, &:active, &:selected { border-radius: 2px; }
109
&:disabled {
111
// background-color: $secondary_base_color;
112
color: $insensitive_fg_color;
113
}
114
&:selected { @extend %selected_items; }
116
}
117
.view,
119
textview {
120
text {
121
// @extend %view;
122
background-color: $base_color;
124
color: $fg_color;
125
&:disabled {
127
// background-color: $secondary_base_color;
128
color: $insensitive_fg_color;
129
}
130
selection { @extend %selected_items; }
132
}
133
}
134
textview border {
136
background-color: $secondary_base_color;
137
color: $tertiary_fg_color;
138
}
139
iconview { @extend .view; }
141
.rubberband,
143
rubberband {
144
border: 1px solid $secondary_selected_bg_color;
145
background-color: scale-alpha($secondary_selected_bg_color, $lower_opacity);
146
}
147
flowbox {
149
rubberband { @extend rubberband; }
150
flowboxchild {
152
outline-offset: -2px;
153
padding: 4px;
154
border-radius: 2px;
155
&:selected { @extend %selected_items; }
157
}
158
}
159
label {
161
caret-color: currentColor; // this shouldn't be needed.
162
&.separator {
164
@extend .dim-label;
165
color: $fg_color;
167
}
168
row:selected &,
170
&:selected { @extend %nobg_selected_items; }
171
selection {
173
background-color: $selected_bg_color;
174
color: $selected_fg_color;
175
}
176
&:disabled {
178
color: $insensitive_fg_color;
179
selection { @extend %selected_items:disabled; }
181
}
182
}
183
.dim-label { opacity: $hint_opacity; }
185
assistant {
187
.sidebar {
188
padding: 4px 0;
189
// background-color: $base_color;
190
// border-top: 1px solid $borders_color;
191
}
192
// &.csd .sidebar { border-top-style: none; }
194
.sidebar label {
196
min-height: $medium_size;
197
padding: 0 12px;
198
color: $tertiary_fg_color;
199
font-weight: 500;
200
&.highlight { color: $fg_color; }
202
}
203
}
204
%osd, .osd { opacity: $higher_opacity; }
206
/*********************
209
* Spinner Animation *
210
*********************/
211
@keyframes spin {
212
to { -gtk-icon-transform: rotate(1turn); }
213
}
214
@keyframes spin_colors {
216
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
217
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
218
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
219
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
220
}
221
spinner {
223
background: none;
224
opacity: 0; // non spinning spinner makes no sense
225
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
226
&:checked {
228
opacity: 1;
229
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
230
&:disabled { opacity: $disabled_opacity; }
232
}
233
}
234
/****************
237
* Text Entries *
238
****************/
239
%entry,
240
entry {
241
%entry_basic, & {
242
min-height: $medium_size;
243
padding: 0 8px;
244
border-radius: 2px;
245
@include entry(normal);
247
&:focus { @include entry(focus); }
249
&:disabled { @include entry(insensitive); }
251
&.flat {
253
border-radius: 0;
254
@include entry(flat-normal);
256
&:focus { @include entry(flat-focus); }
258
&:disabled { @include entry(flat-insensitive); }
260
}
261
image { // icons inside the entry
263
// @extend %button_basic.flat;
264
min-height: $small_size;
266
min-width: $small_size;
267
-gtk-outline-radius: 100px;
268
border-radius: 100px;
269
color: gtkalpha(currentColor, $enabled_opacity);
270
&:hover, &:active { color: currentColor; }
272
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
274
&.left { margin-left: -2px; margin-right: 2px; }
276
&.right { margin-left: 2px; margin-right: -2px; }
278
}
279
undershoot {
281
&.left { @include undershoot(left); }
282
&.right { @include undershoot(right); }
284
}
285
selection { @extend %selected_items; }
287
// entry error and warning style
289
@each $e_type, $e_color in (error, $error_color),
290
(warning, $warning_color) {
291
&.#{$e_type} {
292
@include entry(normal, $e_color);
293
&:focus { @include entry(focus, $e_color); }
295
&:disabled { @include entry(insensitive, $e_color); }
297
&.flat {
299
@include entry(flat-normal, $e_color);
300
&:focus { @include entry(flat-focus, $e_color); }
302
&:disabled { @include entry(flat-insensitive, $e_color); }
304
}
305
}
306
}
307
&:drop(active) {
309
// box-shadow: inset 0 0 0 2px $accent_bg_color;
310
}
311
.osd & {
313
}
314
}
315
progress {
317
margin: 2px -6px;
318
border-style: none none solid;
319
border-width: 2px;
320
border-color: $selected_bg_color;
321
// border-radius: 0;
322
// box-shadow: none;
323
background-color: transparent;
324
// background-image: none;
325
}
326
// linked entries
328
.linked:not(.vertical) > &:not(.flat) { @extend %linked; }
329
// Vertically linked entries
331
.linked.vertical > &:not(.flat) { @extend %linked_vertical; }
332
}
333
treeview entry {
335
&.flat, & {
336
min-height: 0;
337
padding: 2px;
338
border-radius: 0;
339
background-color: $base_color;
340
&, &:focus {
342
border-image: none;
343
box-shadow: none;
344
}
345
}
346
}
347
/***********
350
* Buttons *
351
***********/
352
// stuff for .needs-attention
353
@keyframes needs_attention {
354
from {
355
background-image: -gtk-gradient(radial,
356
center center, 0,
357
center center, 0.001,
358
to($accent_bg_color),
359
to(transparent));
360
}
361
to {
363
background-image: -gtk-gradient(radial,
364
center center, 0,
365
center center, 0.5,
366
to($accent_bg_color),
367
to(transparent));
368
}
369
}
370
%button,
372
button {
373
@at-root %button_basic, & {
374
min-height: 24px;
375
min-width: 16px;
376
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
377
border-radius: 2px;
378
font-weight: 500;
379
@include button(normal);
381
&:hover { @include button(hover); }
383
&:active { @include button(active); }
385
&:disabled { @include button(insensitive); }
387
&:checked { @include button(checked); }
389
&:checked:disabled { @include button(checked-insensitive); }
391
&.flat {
393
@include button(flat-normal);
394
&:hover { @include button(flat-hover); }
396
&:active { @include button(flat-active); }
398
&:disabled { @include button(flat-insensitive); }
400
&:checked { @include button(flat-checked); }
402
&:checked:disabled { @include button(flat-checked-insensitive); }
404
}
405
&.image-button {
407
min-width: 24px;
408
padding: ($medium_size - 24px) / 2;
409
-gtk-outline-radius: 100px;
410
border-radius: 100px;
411
}
412
&.text-button {
414
padding-left: 16px;
415
padding-right: 16px;
416
}
417
&.text-button.image-button {
419
padding-left: ($medium_size - 16px) / 2;
420
padding-right: ($medium_size - 16px) / 2;
421
-gtk-outline-radius: 2px;
422
border-radius: 2px;
423
label {
425
&:last-child { padding-left: 2px; padding-right: 16px - ($medium_size - 16px) / 2; }
426
&:first-child { padding-left: 16px - ($medium_size - 16px) / 2; padding-right: 2px; }
427
}
428
}
429
.linked > & { @extend %linked; }
431
.linked.vertical > & { @extend %linked_vertical; }
433
.linked > &.flat,
435
.linked.vertical > &.flat {
436
border-radius: 2px;
437
&.image-button {
439
-gtk-outline-radius: 100px;
440
border-radius: 100px;
441
}
442
&.text-button.image-button {
444
-gtk-outline-radius: 2px;
445
border-radius: 2px;
446
}
447
}
448
&:drop(active) {
450
// box-shadow: inset 0 0 0 2px $accent_bg_color;
451
}
452
}
453
@at-root %button_selected, row:selected & {
455
&:disabled { color: $insensitive_secondary_selected_fg_color; }
456
&.flat {
458
color: $secondary_selected_fg_color;
459
&:hover, &:active { color: $selected_fg_color; }
461
&:disabled { color: $insensitive_secondary_selected_fg_color; }
463
}
464
}
465
// big standalone buttons like in Documents pager
467
&.osd {
468
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
469
&.image-button { padding: ($large_size - 24px) / 2; }
471
&:disabled { opacity: 0; }
473
}
474
//overlay / OSD style
476
@at-root %osd_button,
477
.osd & {
478
}
479
// Suggested and Destructive Action buttons
481
@each $b_type, $b_color in (suggested-action, $suggested_color),
482
(destructive-action, $destructive_color) {
483
&.#{$b_type} {
484
background-color: $b_color;
485
color: $selected_fg_color;
486
// @include button(normal, $b_color, white);
488
// &:hover { @include button(hover, $b_color, white); }
490
// &:active, &:checked { @include button(active, $b_color, white); }
492
&:disabled { @include button(insensitive, $b_color, white); }
494
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
496
&.flat {
498
background-color: transparent;
499
color: $b_color;
500
// @include button(flat-normal, $b_color, white);
502
// &:hover { @include button(flat-hover, $b_color, white); }
504
// &:active, &:checked { @include button(flat-active, $b_color, white); }
506
&:disabled { @include button(flat-insensitive, $b_color, white); }
508
}
509
.osd & {
511
}
512
}
513
}
514
.stack-switcher > & {
516
// to position the needs attention dot, padding is added to the button
517
// child, a label needs just lateral padding while an icon needs vertical
518
// padding added too.
519
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
521
> label {
523
padding-left: 6px; // label padding
524
padding-right: 6px; //
525
}
526
> image {
528
padding-left: 6px; // image padding
529
padding-right: 6px; //
530
padding-top: 3px; //
531
padding-bottom: 3px; //
532
}
533
&.text-button {
535
// compensate text-button paddings
536
padding-left: 16px - 6px;
537
padding-right: 16px - 6px;
538
}
539
&.image-button {
541
// we want image buttons to have a 1:1 aspect ratio, so compensation
542
// of the padding added to the GtkImage is needed
543
padding-left: ($medium_size - 16px) / 2 - 6px;
544
padding-right: ($medium_size - 16px) / 2 - 6px;
545
}
546
&.needs-attention {
548
> label,
549
> image { @extend %needs_attention; }
550
&:checked {
552
> label,
553
> image {
554
animation: none;
555
background-image: none;
556
}
557
}
558
}
559
}
560
// hide separators
562
separator {
563
min-width: 0;
564
min-height: 0;
565
background: transparent;
566
}
567
// &.font,
569
// &.file { separator { background-color: transparent; }}
570
// &.font { > box > box > label { font-weight: bold; }}
572
// inline-toolbar buttons
574
.inline-toolbar & {
575
@extend %button_basic.flat;
576
&:not(.text-button) { @extend %button_basic.image-button; }
578
}
579
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
581
}
582
%needs_attention {
584
animation: needs_attention $material_slower $material_ease_out forwards;
585
background-repeat: no-repeat;
586
background-position: right 3px;
587
background-size: 6px 6px;
588
&:dir(rtl) { background-position: left 3px; }
590
}
591
// all the following is for the +|- buttons on inline toolbars, that way
593
// should really be deprecated...
594
.inline-toolbar toolbutton > button { // redefining the button look is
595
// needed since those are flat...
596
}
597
// More inline toolbar buttons
599
toolbar.inline-toolbar toolbutton {
600
// > button.flat { @extend %linked_middle; }
601
// &:first-child > button.flat { @extend %linked:first-child; }
603
// &:last-child > button.flat { @extend %linked:last-child; }
605
// &:only-child > button.flat { @extend %linked:only-child; }
607
}
608
%linked_middle {
610
border-radius: 0;
611
}
612
%linked {
614
-gtk-outline-radius: 2px;
615
@extend %linked_middle;
617
&:first-child {
619
border-top-left-radius: 2px;
620
border-bottom-left-radius: 2px;
621
}
622
&:last-child {
624
border-top-right-radius: 2px;
625
border-bottom-right-radius: 2px;
626
}
627
&:only-child {
629
border-radius: 2px;
630
}
631
}
632
%linked_vertical_middle {
634
border-radius: 0;
635
}
636
%linked_vertical{
638
-gtk-outline-radius: 2px;
639
@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-left: 8px;
662
padding-right: 8px;
663
border-radius: 2px;
664
color: inherit;
665
@extend %button_basic.flat;
667
&:selected { @extend %selected_items; }
669
check,
671
radio {
672
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
673
&, &:hover { background-image: none; }
675
&:active { animation: none; }
677
&:last-child { margin-left: -8px; margin-right: -16px; }
679
&:first-child { margin-left: -16px; margin-right: -8px; }
681
}
682
check:not(:indeterminate):checked { @extend %check_checked; }
684
// radio:not(:indeterminate):checked { @extend %radio_checked; }
686
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
688
}
689
modelbutton.flat arrow {
691
background: none;
692
&:hover { background: none; }
694
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
696
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
698
}
699
button.color {
701
min-height: $small_size;
702
min-width: $small_size;
703
padding: $container_padding;
704
colorswatch:only-child {
706
// &, overlay { border-radius: 0; }
707
}
708
}
709
/*********
712
* Links *
713
*********/
714
*:link {
715
&, &:hover, &:active { color: $link_color; }
716
&:visited {
718
&, &:hover, &:active { color: $link_visited_color; }
719
}
720
@at-root %link_selected,
722
&:selected,
723
*:selected & { color: $selected_fg_color; }
724
}
725
button:link,
727
button:visited {
728
@extend *:link;
729
> label { text-decoration-line: underline; }
731
}
732
/*****************
734
* GtkSpinButton *
735
*****************/
736
spinbutton {
737
&:not(.vertical) {
738
// in this horizontal configuration, the whole spinbutton
739
// behaves as the entry, so we extend the entry styling
740
// and nuke the style on the internal entry
741
@extend %entry;
742
padding: 0;
744
%spinbutton_entry,
746
entry {
747
min-width: $large_size - 8px * 2;
748
// reset all the other props since the spinbutton node is styled here
749
margin: 0;
750
border-image: none;
751
border-radius: 0;
752
box-shadow: none;
753
background-color: transparent;
754
}
755
button {
757
min-height: $small_size;
758
min-width: $small_size;
759
// margin: $container_padding;
760
padding: 0;
761
border: solid $container_padding transparent;
762
@extend %button_basic.flat;
764
@extend %button_basic.image-button;
766
&.up:dir(ltr),
768
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
769
&.up:dir(rtl),
771
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
772
}
773
}
774
// OSD horizontal
776
.osd &:not(.vertical) {
777
button {
778
}
779
}
780
// Vertical
782
&.vertical {
783
// in the vertical configuration, we treat the spinbutton
784
// as a box, and tweak the style of the entry in the middle
785
// so that it's linked
786
// FIXME: this should not be set at all, but otherwise it gets the wrong
788
// color
789
&:disabled { color: $insensitive_fg_color; }
790
&:drop(active) {
792
box-shadow: none;
793
}
794
entry {
796
min-height: $medium_size;
797
min-width: $large_size;
798
padding: 0;
799
}
800
button {
802
min-height: $medium_size;
803
min-width: $large_size;
804
padding: 0;
805
@extend %button_basic.flat;
807
&.up { border-radius: 2px 2px 0 0; }
809
&.down { border-radius: 0 0 2px 2px; }
811
}
812
}
813
// OSD vertical
815
.osd &.vertical button:first-child {
816
}
817
// Misc
819
treeview &:not(.vertical) {
820
min-height: 0;
821
border-style: none;
822
border-radius: 0;
823
entry {
825
min-height: 0;
826
padding: 1px 2px;
827
}
828
}
829
}
830
/**************
833
* ComboBoxes *
834
**************/
835
combobox {
836
arrow {
837
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
838
min-height: 16px;
839
min-width: 16px;
840
}
841
menu,
843
.menu,
844
.context-menu {
845
padding: 2px 0;
846
menuitem {
848
min-height: $medium_size;
849
padding: 0 ($medium_size - 16px) / 2;
850
}
851
}
852
&.linked {
854
button:nth-child(2) {
855
&:dir(ltr) { @extend %linked:last-child; }
856
&:dir(rtl) { @extend %linked:first-child; }
857
}
858
}
859
&:drop(active) { // FIXME: untested
861
box-shadow: none;
862
// button.combo { @extend %button_basic:drop(active); }
864
}
865
}
866
.linked > combobox > box > button.combo {
868
// the combo is a composite widget so the way we do button linking doesn't
869
// work, special case needed. See
870
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
871
&:dir(ltr),
873
&:dir(rtl) { @extend %linked_middle; } // specificity bump
874
}
875
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
877
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
878
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
879
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
881
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
882
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
883
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
884
/************
887
* Toolbars *
888
************/
889
toolbar {
890
-GtkWidget-window-dragging: true;
891
padding: $container_padding / 2;
892
background-color: $bg_color;
893
// on OSD
895
.osd & { background-color: transparent; }
896
// stand-alone OSD toolbars
898
&.osd {
899
transition: $shadow_transition;
900
padding: $container_padding;
901
border-radius: 2px;
902
box-shadow: $z-depth-2;
903
background-color: $base_color;
904
&:backdrop { box-shadow: $z-depth-1; }
906
&.left,
908
&.right,
909
&.top,
910
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
911
button { @extend %button_basic.flat; }
913
}
914
// toolbar separators
916
&.horizontal separator { margin: $container_padding / 2; }
917
&.vertical separator { margin: $container_padding / 2; }
918
&:not(.inline-toolbar):not(.osd) {
920
scale,
921
entry,
922
spinbutton,
923
button { margin: $container_padding / 2; }
924
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
926
}
927
}
928
//searchbar, location-bar & inline-toolbar
930
.inline-toolbar {
931
padding: $container_padding;
932
border-style: solid;
933
border-width: 0 1px 1px;
934
border-color: $borders_color;
935
background-color: $secondary_base_color;
936
}
937
searchbar,
939
.location-bar {
940
padding: $container_padding;
941
border-style: solid;
942
border-width: 0 0 1px;
943
border-color: $borders_color;
944
background-color: $bg_color;
945
background-clip: border-box;
946
}
947
/***************
950
* Header bars *
951
***************/
952
%titlebar,
953
headerbar {
954
transition: background-color $material_faster $material_ease_out, color $material_faster $material_ease_out;
955
min-height: $large_size;
956
padding: 0 $container_padding;
957
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
958
background-color: $headerbar_color;
959
color: $selected_fg_color;
960
&:backdrop {
962
color: $secondary_selected_fg_color;
963
}
964
.title {
966
padding-left: 12px;
967
padding-right: 12px;
968
font-weight: bold;
969
}
970
.subtitle {
972
padding-left: 12px;
973
padding-right: 12px;
974
font-size: smaller;
975
@extend .dim-label;
977
}
978
button:not(.suggested-action):not(.destructive-action) {
980
@extend %button_basic.flat;
981
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
983
currentColor 0%,
984
transparent 0%)
985
0 0 0 / 0 0 0px;
986
color: gtkalpha(currentColor, $enabled_opacity);
987
&:hover, &:active { color: currentColor; }
989
&:disabled {
991
color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity);
992
> label { color: inherit; }
994
}
995
&:checked {
997
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
998
currentColor 100%,
999
transparent 0%)
1000
0 0 2 / 0 0 2px;
1001
background-color: transparent;
1002
color: currentColor;
1003
&:disabled {
1005
background-color: transparent;
1006
color: gtkalpha(currentColor, $disabled_opacity);
1007
> label { color: inherit; }
1009
}
1010
}
1011
}
1012
button.suggested-action, button.destructive-action {
1014
&:disabled {
1015
color: gtkalpha(currentColor, $disabled_opacity);
1016
> label { color: inherit; }
1018
}
1019
}
1020
&.selection-mode {
1022
transition: background-color 0 $material_slower, color $material_faster $material_ease_out;
1023
animation: header_ripple_effect $material_slower $material_ease_out;
1024
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1025
background-color: $selected_bg_color;
1026
color: $selected_fg_color;
1027
&:backdrop {
1029
color: $secondary_selected_fg_color;
1030
}
1031
.subtitle:link { @extend *:link:selected; }
1033
button:not(.suggested-action):not(.destructive-action) {
1035
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1036
currentColor 0%,
1037
transparent 0%)
1038
0 0 0 / 0 0 0px;
1039
// color: gtkalpha(currentColor, $enabled_opacity);
1040
&, &:hover, &:active { color: currentColor; }
1042
&:disabled {
1044
color: gtkalpha(currentColor, $disabled_opacity);
1045
> label { color: inherit; }
1047
}
1048
&:checked {
1050
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1051
currentColor 100%,
1052
transparent 0%)
1053
0 0 2 / 0 0 2px;
1054
color: currentColor;
1055
&:disabled {
1057
color: gtkalpha(currentColor, $disabled_opacity);
1058
> label { color: inherit; }
1060
}
1061
}
1062
}
1063
.selection-menu {
1065
padding-left: 16px;
1066
padding-right: 16px;
1067
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1069
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1071
}
1072
}
1073
.fullscreen &,
1075
.tiled &,
1076
.maximized & {
1077
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1078
box-shadow: $z-depth-1;
1079
}
1080
&.default-decoration {
1082
min-height: $small_size;
1083
padding: $container_padding;
1084
border-width: 0;
1085
button.titlebutton {
1087
min-height: $small_size;
1088
min-width: $small_size;
1089
margin: 0;
1090
padding: 0;
1091
&:active { // add fallback
1093
background-image: radial-gradient(circle farthest-corner at center,
1094
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1095
transparent 0%),
1096
image(gtkalpha(currentColor, $lower_opacity / 2));
1097
}
1098
}
1099
}
1100
.solid-csd & {
1102
&:dir(rtl), &:dir(ltr) { // specificity bump
1103
margin-left: -1px;
1104
margin-right: -1px;
1105
margin-top: -1px;
1106
border-radius: 0;
1107
box-shadow: none;
1108
}
1109
}
1110
}
1111
headerbar {
1113
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1114
entry,
1115
spinbutton,
1116
// separator,
1117
button {
1118
margin-top: $container_padding;
1119
margin-bottom: $container_padding;
1120
}
1121
switch {
1123
margin-top: $container_padding * 2;
1124
margin-bottom: $container_padding * 2;
1125
}
1126
}
1127
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1129
border-top-left-radius: 2px;
1130
border-top-right-radius: 2px;
1131
}
1132
headerbar {
1134
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1135
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1136
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1138
}
1139
.titlebar:not(headerbar) {
1141
window.csd > & {
1142
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1143
padding: 0;
1144
background-color: transparent;
1145
background-image: none;
1146
border-style: none;
1147
box-shadow: none;
1148
}
1149
> separator {
1151
background-color: $headerbar_color;
1152
background-image: image($borders_color);
1153
}
1154
@extend %titlebar;
1156
}
1157
/************
1160
* Pathbars *
1161
************/
1162
.path-bar button {
1163
&.text-button, &.image-button, & {
1164
padding-left: 6px;
1165
padding-right: 6px;
1166
}
1167
&.text-button.image-button, & {
1169
// label:last-child { padding-left: 2px; padding-right: 8px; }
1170
// label:first-child { padding-left: 8px; padding-right: 2px; }
1171
}
1172
image {
1174
padding-left: ($medium_size - 16px) / 2 - 6px;
1175
padding-right: ($medium_size - 16px) / 2 - 6px;
1176
}
1177
&.slider-button {
1179
padding-left: 0;
1180
padding-right: 0;
1181
}
1182
:not(headerbar) & {
1184
@extend %button_basic.flat;
1185
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1187
$selected_bg_color 0%,
1188
transparent 0%)
1189
0 0 0 / 0 0 0px;
1190
border-radius: 2px;
1191
color: gtkalpha(currentColor, $enabled_opacity);
1192
&:hover, &:active { color: currentColor; }
1194
&:disabled {
1196
color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity);
1197
> label { color: inherit; }
1199
}
1200
&:checked {
1202
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1203
$selected_bg_color 100%,
1204
transparent 0%)
1205
0 0 2 / 0 0 2px;
1206
background-color: transparent;
1207
color: currentColor;
1208
&:disabled {
1210
background-color: transparent;
1211
color: gtkalpha(currentColor, $disabled_opacity);
1212
> label { color: inherit; }
1214
}
1215
}
1216
}
1217
}
1218
/**************
1221
* Tree Views *
1222
**************/
1223
treeview.view {
1224
@at-root * {
1225
-GtkTreeView-horizontal-separator: 4;
1226
-GtkTreeView-grid-line-width: 1;
1227
-GtkTreeView-grid-line-pattern: '';
1228
-GtkTreeView-tree-line-width: 1;
1229
-GtkTreeView-tree-line-pattern: '';
1230
-GtkTreeView-expander-size: 16;
1231
}
1232
border-left-color: $track_color; // this is actually the tree lines color,
1234
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1235
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1237
&:hover, &:active, &:selected { border-radius: 0; }
1239
&.separator {
1241
min-height: 1px + 2px * 2;
1242
color: $borders_color;
1243
}
1244
&:drop(active) {
1246
border-style: solid none;
1247
border-width: 1px;
1248
border-color: $accent_bg_color;
1249
&.after { border-top-style: none; }
1251
&.before { border-bottom-style: none; }
1253
}
1254
&.expander {
1256
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1257
-gtk-icon-transform: rotate(-90deg);
1258
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1260
&:checked { -gtk-icon-transform: unset; }
1262
color: $secondary_fg_color;
1264
&:hover, &:active { color: $fg_color; }
1266
&:disabled { color: $insensitive_secondary_fg_color; }
1268
&:selected {
1270
color: $secondary_selected_fg_color;
1271
&:hover, &:active { color: $selected_fg_color; }
1273
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1275
}
1276
}
1277
&.progressbar { // progress bar in treeviews
1279
border-style: none none solid;
1280
border-width: $bar_size;
1281
border-color: $selected_bg_color;
1282
background-color: transparent;
1283
background-image: none;
1284
&:selected { border-color: currentColor; }
1286
}
1287
&.trough { // progress bar trough in treeviews
1289
border-style: none none solid;
1290
border-width: $bar_size;
1291
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1292
background-color: transparent;
1293
background-image: none;
1294
&:selected { border-color: $track_color; }
1296
}
1297
header {
1299
button {
1300
@extend row.activatable;
1301
padding: 2px 6px;
1303
border-style: none solid solid none;
1304
border-width: 1px;
1305
border-color: $borders_color;
1306
border-radius: 0;
1307
background-clip: border-box;
1308
&, &:hover, &:active { box-shadow: none; }
1310
&, &:disabled { background-color: $base_color; }
1312
&:last-child { border-right-style: none; }
1314
}
1315
}
1316
button.dnd,
1318
header.button.dnd { // for treeview-like derive widgets
1319
padding: 2px 6px;
1320
border-style: none solid solid;
1321
border-width: 1px;
1322
border-color: $borders_color;
1323
border-radius: 0;
1324
box-shadow: none;
1325
background-color: $base_color;
1326
background-clip: border-box;
1327
color: $selected_bg_color;
1328
}
1329
acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
1331
}
1332
/*********
1335
* Menus *
1336
*********/
1337
menubar,
1338
.menubar {
1339
-GtkWidget-window-dragging: true;
1340
padding: 0;
1341
// box-shadow: inset 0 -1px $borders_color;
1342
background-color: $headerbar_color;
1343
> menuitem {
1345
transition: background-color $material_faster $material_ease_out;
1346
min-height: 20px;
1347
padding: 4px 8px;
1348
color: $secondary_selected_fg_color;
1349
&:hover { //Seems like it :hover even with keyboard focus
1351
transition: none;
1352
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1353
color: $selected_fg_color;
1354
}
1355
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1357
}
1358
}
1359
menu,
1361
.menu,
1362
.context-menu {
1363
margin: 4px 0;
1364
padding: 4px 0;
1365
background-color: $base_color;
1366
border: 1px solid $borders_color; // adds borders in a non composited env
1367
.csd & {
1369
border: none; // axes borders in a composited env
1370
border-radius: 2px;
1371
}
1372
menuitem {
1374
transition: background-color $material_faster $material_ease_out;
1375
min-height: 20px;
1376
min-width: 40px;
1377
padding: 4px 8px;
1378
font: initial;
1379
text-shadow: none;
1380
&:hover {
1382
transition: none;
1383
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1384
}
1385
&:disabled { color: $insensitive_fg_color; }
1387
// submenu indicators
1389
arrow {
1390
min-height: 16px;
1391
min-width: 16px;
1392
&:dir(ltr) {
1394
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1395
margin-left: 8px;
1396
}
1397
&:dir(rtl) {
1399
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1400
margin-right: 8px;
1401
}
1402
}
1403
// avoids labels color being overridden, see
1405
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1406
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1407
}
1408
// overflow arrows
1410
> arrow {
1411
min-height: 16px;
1412
min-width: 16px;
1413
padding: 4px;
1414
border-radius: 0;
1415
background-color: $base_color;
1416
color: $secondary_fg_color;
1417
&.top {
1419
margin-top: -4px;
1420
border-bottom: 1px solid $borders_color;
1421
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1422
}
1423
&.bottom {
1425
margin-bottom: -4px;
1426
border-top: 1px solid $borders_color;
1427
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1428
}
1429
&:hover {
1431
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1432
color: $fg_color;
1433
}
1434
&:disabled {
1436
border-color: transparent;
1437
background-color: transparent;
1438
color: transparent;
1439
// color: $insensitive_secondary_fg_color;
1440
}
1441
}
1442
separator { margin: 4px 0; }
1444
}
1445
menuitem {
1447
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1448
check,
1450
radio {
1451
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1452
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1453
}
1454
}
1455
.csd.popup { border-radius: 2px; }
1457
/***************
1460
* Popovers *
1461
***************/
1462
popover.background {
1463
transition: $shadow_transition;
1464
padding: 0;
1465
box-shadow: $z-depth-2;
1466
background-color: $light_color;
1467
&:backdrop { box-shadow: $z-depth-1; }
1469
&, .csd & {
1471
border-style: solid;
1472
border-width: 1px;
1473
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1474
border-radius: 2px + 1px;
1475
}
1476
> list,
1478
> .view,
1479
> toolbar {
1480
border-style: none;
1481
box-shadow: none;
1482
background-color: transparent;
1483
}
1484
&, .csd & {
1486
&.touch-selection,
1487
&.magnifier,
1488
&.osd { @extend %osd; }
1489
}
1490
// entry { @extend %entry.flat; }
1492
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1494
&.menu button.model {
1496
@extend %button_basic.flat;
1497
min-height: 32px;
1499
padding: 0 8px;
1500
&:checked {
1502
background-color: $selected_bg_color;
1503
color: $selected_fg_color;
1504
}
1505
}
1506
&.menu .linked > button.model {
1508
&:dir(rtl), &:dir(ltr) { // specificity bump
1509
-gtk-outline-radius: 2px;
1510
border-radius: 2px;
1511
}
1512
}
1513
separator { margin: 4px 0; }
1515
list separator { margin: 0; }
1517
}
1518
/*************
1520
* Notebooks *
1521
*************/
1522
notebook {
1523
> header {
1524
border-width: 1px;
1525
border-color: $borders_color;
1526
background-color: $bg_color;
1527
background-clip: border-box;
1528
&.top {
1530
border-bottom-style: solid;
1531
> tabs {
1532
margin-bottom: -1px;
1533
> tab {
1534
&:hover { box-shadow: inset 0 -2px $track_color; }
1536
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1538
}
1539
}
1540
}
1541
&.bottom {
1543
border-top-style: solid;
1544
> tabs {
1545
margin-top: -1px;
1546
> tab {
1547
&:hover { box-shadow: inset 0 2px $track_color; }
1549
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1551
}
1552
}
1553
}
1554
&.left {
1556
border-right-style: solid;
1557
> tabs {
1558
margin-right: -1px;
1559
> tab {
1560
&:hover { box-shadow: inset -2px 0 $track_color; }
1562
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1564
}
1565
}
1566
}
1567
&.right {
1569
border-left-style: solid;
1570
> tabs {
1571
margin-left: -1px;
1572
> tab {
1573
&:hover { box-shadow: inset 2px 0 $track_color; }
1575
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1577
}
1578
}
1579
}
1580
&.top > tabs > arrow {
1582
@extend %notebook_vert_arrows;
1583
border-top-style: none;
1585
}
1586
&.bottom > tabs > arrow {
1588
@extend %notebook_vert_arrows;
1589
border-bottom-style: none;
1591
}
1592
@at-root %notebook_vert_arrows {
1594
padding-left: 4px;
1595
padding-right: 4px;
1596
&.down {
1598
margin-left: -8px;
1599
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1600
}
1601
&.up {
1603
margin-right: -8px;
1604
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1605
}
1606
}
1607
&.left > tabs > arrow {
1609
@extend %notebook_horz_arrows;
1610
border-left-style: none;
1612
}
1613
&.right > tabs > arrow {
1615
@extend %notebook_horz_arrows;
1616
border-right-style: none;
1618
}
1619
@at-root %notebook_horz_arrows {
1621
padding-top: 4px;
1622
padding-bottom: 4px;
1623
&.down {
1625
margin-top: -8px;
1626
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1627
}
1628
&.up {
1630
margin-bottom: -8px;
1631
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1632
}
1633
}
1634
> tabs > arrow {
1636
@extend %button_basic.flat;
1637
min-height: 16px;
1639
min-width: 16px;
1640
border-radius: 0;
1641
}
1642
tab {
1644
transition: $material_transition;
1645
min-height: $small_size;
1646
min-width: $small_size;
1647
padding: $container_padding 12px;
1648
outline-offset: -6px;
1650
border-width: 1px; // for reorderable tabs
1652
border-color: transparent; //
1653
color: $secondary_fg_color;
1655
font-weight: 500;
1656
&:hover {
1658
color: $fg_color;
1659
&.reorderable-page {
1661
border-color: $borders_color;
1662
background-color: $secondary_base_color;
1663
}
1664
}
1665
&:disabled { color: $insensitive_secondary_fg_color; }
1667
&:checked {
1669
animation: tab_ripple_effect $material_slower * 3 $material_ease_out;
1670
color: $fg_color;
1671
&:disabled { color: $insensitive_fg_color; }
1673
&.reorderable-page {
1675
border-color: $borders_color;
1676
background-color: $base_color;
1677
}
1678
}
1679
// colors the button like the label, overridden otherwise
1681
button.flat {
1682
// FIXME: generalize .small-button?
1683
min-width: $small_size;
1684
min-height: $small_size;
1685
padding: 0;
1686
@extend %button_basic.image-button;
1688
&:last-child {
1690
margin-left: $container_padding;
1691
margin-right: $container_padding - 12px;
1692
}
1693
&:first-child {
1695
margin-left: $container_padding - 12px;
1696
margin-right: $container_padding;
1697
}
1698
}
1699
}
1700
&.top,
1702
&.bottom {
1703
tabs {
1704
padding-left: 8px;
1705
padding-right: 8px;
1706
&:not(:only-child) {
1708
&:first-child { margin-left: 0; }
1709
&:last-child { margin-right: 0; }
1710
}
1711
tab {
1713
&.reorderable-page {
1714
margin: 0 -1px;
1715
border-style: none solid;
1716
}
1717
}
1718
}
1719
}
1720
&.left,
1722
&.right {
1723
tabs {
1724
padding-top: 8px;
1725
padding-bottom: 8px;
1726
&:not(:only-child) {
1728
&:first-child { margin-top: 0; }
1729
&:last-child { margin-bottom: 0; }
1730
}
1731
tab {
1733
&.reorderable-page {
1734
margin: -1px 0;
1735
border-style: solid none;
1736
}
1737
}
1738
}
1739
}
1740
}
1741
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1743
background-color: $base_color;
1744
entry,
1746
spinbutton:not(.vertical) { @extend %entry.flat; }
1747
revealer entry,
1749
revealer spinbutton:not(.vertical) { @extend %entry; }
1750
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1752
}
1753
}
1754
/**************
1757
* Scrollbars *
1758
**************/
1759
scrollbar {
1760
$_slider_min_length: 24px;
1761
// disable steppers
1763
@at-root * {
1764
-GtkScrollbar-has-backward-stepper: false;
1765
-GtkScrollbar-has-forward-stepper: false;
1766
}
1767
transition: $material_transition;
1769
background-color: $base_color;
1770
background-clip: $extra_background_clip;
1771
// scrollbar border
1773
&.top { border-bottom: 1px solid $borders_color; }
1774
&.bottom { border-top: 1px solid $borders_color; }
1775
&.left { border-right: 1px solid $borders_color; }
1776
&.right { border-left: 1px solid $borders_color; }
1777
// slider
1779
slider {
1780
transition: all $material_faster $material_ease_out, margin 0, border-width 0;
1781
min-width: 8px;
1782
min-height: 8px;
1783
border: 4px solid transparent;
1784
border-radius: 100px;
1785
background-clip: padding-box;
1786
background-color: $tertiary_fg_color;
1787
&:hover { background-color: $secondary_fg_color; }
1789
&:active { background-color: $fg_color; }
1791
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1793
}
1794
&.fine-tune {
1796
slider {
1797
transition: all $material_faster $material_ease_out, margin 0, border-width 0, min-width 0, min-height 0;
1798
min-width: 4px;
1799
min-height: 4px;
1800
}
1801
&.horizontal slider { margin: 2px 0; }
1803
&.vertical slider { margin: 0 2px; }
1805
}
1806
&.overlay-indicator {
1808
&:not(.dragging):not(.hovering) {
1809
border-color: transparent;
1810
background-color: transparent;
1811
slider {
1813
min-width: 4px;
1814
min-height: 4px;
1815
margin: 4px - 1px;
1816
border: 1px solid scale-alpha($base_color, $lower_opacity);
1817
}
1818
button {
1820
min-width: 4px;
1821
min-height: 4px;
1822
margin: 4px - 1px;
1823
border: 1px solid scale-alpha($base_color, $lower_opacity);
1824
border-radius: 100px;
1825
background-color: $tertiary_fg_color;
1826
background-clip: padding-box;
1827
-gtk-icon-source: none;
1828
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1830
}
1831
&.horizontal {
1833
slider { min-width: $_slider_min_length; }
1834
button { min-width: 8px; }
1836
}
1837
&.vertical {
1839
slider { min-height: $_slider_min_length; }
1840
button { min-height: 8px; }
1842
}
1843
}
1844
&.dragging,
1846
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1847
}
1848
&.horizontal slider { min-width: $_slider_min_length; }
1850
&.vertical slider { min-height: $_slider_min_length; }
1852
// button styling
1854
button {
1855
@extend %button_basic.flat;
1856
min-width: 16px;
1857
min-height: 16px;
1858
padding: 0;
1859
border-radius: 0;
1860
}
1861
// button icons
1863
&.vertical {
1864
button {
1865
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1866
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1868
}
1869
}
1870
&.horizontal {
1872
button {
1873
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1874
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1876
}
1877
}
1878
}
1879
/**********
1882
* Switch *
1883
**********/
1884
switch {
1885
transition: $material_transition;
1886
margin: $container_padding 0;
1887
border: 4px solid transparent;
1888
border-radius: 100px;
1889
background-color: $track_color;
1890
background-clip: padding-box;
1891
font-size: 0;
1892
&:disabled { color: $insensitive_fg_color; }
1894
&:checked {
1896
background-color: scale-alpha($accent_bg_color, 0.5);
1897
&:disabled {
1899
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1900
color: $insensitive_fg_color;
1901
}
1902
}
1903
slider {
1905
@include entry(normal);
1906
transition: $material_transition, margin 0;
1908
min-width: $small_size;
1909
min-height: $small_size;
1910
margin: -4px 0 -4px -4px;
1911
-gtk-outline-radius: 100px;
1912
border-radius: 100px;
1913
}
1914
&:hover slider { @include entry(focus); }
1916
&:disabled slider { @include entry(insensitive); }
1918
&:checked slider {
1920
transition: $material_transition, margin 0, background-image 0, background-color 0 $material_slower;
1921
animation: needs_attention $material_slower $material_ease_out;
1922
margin: -4px -4px -4px 0;
1923
background-color: $accent_bg_color;
1924
color: $selected_fg_color;
1925
}
1926
&:checked:disabled slider { animation: none; }
1928
row:selected & {
1930
}
1931
}
1932
/*************************
1935
* Check and Radio items *
1936
*************************/
1937
// draw regular check and radio items using our PNG assets
1938
// all assets are rendered from assets.svg. never add pngs directly
1939
//selection-mode
1941
@each $s,$as in ('','-selectionmode'),
1942
(':hover', '-hover-selectionmode'),
1943
(':checked', '-checked-selectionmode'),
1944
(':checked:hover', '-checked-hover-selectionmode') {
1945
.view.content-view.check#{$s}:not(list) {
1946
-gtk-icon-shadow: $z-depth-1;
1947
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1948
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1949
margin: 8px;
1950
background-color: transparent;
1951
}
1952
}
1953
checkbutton.text-button,
1955
radiobutton.text-button {
1956
// this is for a nice focus on check and radios text
1957
padding: 2px;
1958
outline-offset: 0;
1959
label:not(:only-child) { margin: 0 4px; }
1961
}
1962
check,
1964
radio {
1965
min-height: 24px;
1966
min-width: 24px;
1967
margin: -12px;
1968
padding: 12px;
1969
@extend %button_basic.flat;
1971
@extend %button_basic.image-button;
1973
&:checked, &:checked:disabled { background-color: transparent; }
1975
&:checked, &:indeterminate { color: $accent_bg_color; }
1977
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1979
// &:only-child { margin: -12px; }
1981
row &:not(:checked):not(:indeterminate) {
1983
color: gtkalpha(currentColor, $enabled_opacity);
1984
&:hover, &:active { color: currentColor; }
1986
}
1987
menu menuitem & {
1989
transition: none;
1990
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1991
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1993
&, &:hover, &:disabled {
1995
background-image: none;
1996
// color: inherit;
1997
// animation: none;
1998
}
1999
}
2000
}
2001
%check,
2003
check {
2004
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
2005
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
2006
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
2008
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
2009
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
2011
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
2012
}
2013
%radio,
2015
radio {
2016
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
2017
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
2018
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2020
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
2021
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
2023
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
2024
border-image: -gtk-gradient(radial,
2026
center center, 0,
2027
center center, 0.001,
2028
to($accent_bg_color),
2029
to(transparent))
2030
24 / 24px;
2031
&:checked {
2033
border-image: -gtk-gradient(radial,
2034
center center, 0,
2035
center center, (10 / 48 / 2),
2036
to($accent_bg_color),
2037
to(transparent))
2038
24 / 24px;
2039
}
2040
&:checked:disabled {
2042
border-image: -gtk-gradient(radial,
2043
center center, 0,
2044
center center, (10 / 48 / 2),
2045
to(scale-alpha($accent_bg_color, $disabled_opacity)),
2046
to(transparent))
2047
24 / 24px;
2048
}
2049
&:indeterminate:checked {
2051
border-image: -gtk-gradient(radial,
2052
center center, 0,
2053
center center, 0.001,
2054
to($accent_bg_color),
2055
to(transparent))
2056
24 / 24px;
2057
}
2058
}
2059
// let's animate things
2061
@keyframes check_check {
2062
from { -gtk-icon-transform: rotate(90deg); }
2063
to { -gtk-icon-transform: unset; }
2064
}
2065
@keyframes check_radio { // FIXME: cannot animate border-image
2067
from {
2068
border-image: -gtk-gradient(radial,
2069
center center, 0,
2070
center center, 0.001,
2071
to($accent_bg_color),
2072
to(transparent))
2073
24 / 24px;
2074
}
2075
to {
2077
border-image: -gtk-gradient(radial,
2078
center center, 0,
2079
center center, (10 / 48 / 2),
2080
to($accent_bg_color),
2081
to(transparent))
2082
24 / 24px;
2083
}
2084
}
2085
@keyframes check_indeterminate {
2087
from { -gtk-icon-transform: unset; }
2088
50% { -gtk-icon-transform: scale(0, 1); }
2089
to { -gtk-icon-transform: unset; }
2090
}
2091
%check_checked,
2093
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
2094
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2096
// %radio_checked,
2098
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
2099
// radio:not(:indeterminate):checked:active { animation: check_radio $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2101
%indeterminate_checked,
2103
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
2104
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2106
// no animations in menus
2108
menu menuitem {
2109
check:not(:indeterminate):checked,
2110
radio:not(:indeterminate):checked,
2111
check:indeterminate:checked,
2112
radio:indeterminate:checked { animation: none; }
2113
}
2114
treeview.view check,
2116
treeview.view radio {
2117
padding: 0;
2118
&:checked:hover, &:selected:checked:hover { background-image: none; }
2120
& {
2122
color: $secondary_fg_color;
2123
&:hover, &:active { color: $fg_color; }
2125
&:disabled { color: $insensitive_secondary_fg_color; }
2127
&:checked, &:indeterminate { color: $accent_bg_color; }
2129
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2131
}
2132
&:selected {
2134
color: $secondary_selected_fg_color;
2135
&:hover, &:active { color: $selected_fg_color; }
2137
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2139
&:checked, &:indeterminate { color: $accent_bg_color; }
2141
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2143
}
2144
}
2145
treeview.view radio:checked {
2147
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2148
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2149
border-image: none;
2150
}
2151
/************
2154
* GtkScale *
2155
************/
2156
scale {
2157
// sizing
2158
$_marks_lenght: 8px;
2159
$_marks_distance: 8px;
2160
min-height: $medium_size - 24px;
2162
min-width: $medium_size - 24px;
2163
padding: (24px / 2);
2164
* { transition: $material_transition; }
2166
// the slider is inside the trough, so to have make it bigger there's a negative margin
2168
slider {
2169
min-height: 24px;
2170
min-width: 24px;
2171
margin: ($bar_size - 24px) / 2;
2172
}
2173
// the backing bit
2175
trough {
2176
outline-offset: 2px;
2177
background-color: $track_color;
2178
&:disabled { color: $insensitive_fg_color; }
2180
}
2181
// the colored part of the backing bit
2183
highlight {
2184
background-color: $accent_bg_color;
2185
&:disabled { background-color: transparent; }
2187
}
2188
// this is another differently styled part of the backing bit, the most relevant use case is for example
2190
// in media player to indicate how much video stream as been cached
2191
fill {
2192
background-color: $track_color;
2193
&:disabled { background-color: transparent; }
2195
}
2196
slider {
2198
transition: all $material_faster $material_ease;
2199
// border-radius: 100%;
2200
// background-color: $accent_bg_color;
2201
background-repeat: no-repeat;
2202
background-position: center;
2203
@each $s,$as in ('',''),
2205
(':disabled','-insensitive') {
2206
&#{$s} {
2207
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2208
background-image: -gtk-scaled(url('#{$_url}.png'),
2209
url('#{$_url}@2.png'));
2210
}
2211
}
2212
background-size: calc(100% - 8px);
2214
&:hover { background-size: calc(100% - 4px); }
2216
&:active { background-size: calc(100% - 0px); }
2218
}
2219
// click-and-hold the slider to activate
2221
&.fine-tune {
2222
// to make the slider shrink in fine-tune mode
2223
slider { background-size: calc(100% - 12px); }
2224
}
2225
value { color: gtkalpha(currentColor, $hint_opacity); }
2227
marks {
2229
color: $track_color;
2230
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2232
(bottom, bottom, top),
2233
(top, left, right),
2234
(bottom, right, left) {
2235
&.#{$marks_class} {
2236
margin-#{$marks_margin}: $_marks_distance;
2237
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2238
}
2239
}
2240
}
2241
&.horizontal {
2243
indicator {
2244
min-height: $_marks_lenght;
2245
min-width: 1px;
2246
}
2247
}
2248
&.vertical {
2250
indicator {
2251
min-height: 1px;
2252
min-width: $_marks_lenght;
2253
}
2254
}
2255
// *WARNING* scale with marks madness following
2257
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2259
$suffix: if($variant == 'light', '', '-dark');
2260
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2262
('vertical', 'vert') {
2263
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2264
('scale-has-marks-below', ':first-child:not(:only-child)') {
2265
@each $state, $state_infix in ('', ''),
2266
(':disabled', '-insensitive') {
2267
&.#{$dir_class} {
2268
%#{$marks_infix}-#{$dir_infix},
2269
contents#{$nth_child} > trough > slider {
2270
&#{$state} {
2271
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2272
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2274
}
2275
@if $dir_class == 'horizontal' {
2277
min-height: 30px;
2278
min-width: 24px;
2279
@if $marks_infix == 'scale-has-marks-above' {
2281
margin-top: -16px;
2282
background-position: center calc(100% - 4px);
2284
&:hover { background-position: center calc(100% - 2px); }
2286
&:active { background-position: center calc(100% - 0px); }
2288
}
2289
@if $marks_infix == 'scale-has-marks-below' {
2291
margin-bottom: -16px;
2292
background-position: center calc(4px);
2294
&:hover { background-position: center calc(2px); }
2296
&:active { background-position: center calc(0px); }
2298
}
2299
}
2300
@if $dir_class == 'vertical' {
2302
min-height: 24px;
2303
min-width: 30px;
2304
@if $marks_infix == 'scale-has-marks-above' {
2306
margin-left: -16px;
2307
background-position: calc(4px) center;
2309
&:hover { background-position: calc(2px) center; }
2311
&:active { background-position: calc(0px) center; }
2313
}
2314
@if $marks_infix == 'scale-has-marks-below' {
2316
margin-right: -16px;
2317
background-position: calc(100% - 4px) center;
2319
&:hover { background-position: calc(100% - 2px) center; }
2321
&:active { background-position: calc(100% - 0px) center; }
2323
}
2324
}
2325
}
2326
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2328
&.fine-tune contents#{$nth_child} > trough > slider {
2329
// bigger negative margins to make the trough grow here as well
2330
@if $dir_class == 'horizontal' {
2332
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2333
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2335
}
2336
@if $dir_class == 'vertical' {
2338
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2339
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2341
}
2342
}
2343
}
2344
}
2345
}
2346
}
2347
&.color {
2349
min-height: 0;
2350
min-width: 0;
2351
&.horizontal {
2353
padding: 0 0 12px 0;
2354
trough {
2356
padding-bottom: $bar_size;
2357
}
2358
slider {
2360
@extend %scale-has-marks-above-horz;
2361
margin-bottom: -10px - $bar_size;
2363
margin-top: 0;
2364
}
2365
}
2366
&.vertical {
2368
&:dir(ltr) {
2369
padding: 0 0 0 12px;
2370
trough {
2372
padding-left: $bar_size;
2373
}
2374
slider {
2376
@extend %scale-has-marks-below-vert;
2377
margin-left: -10px - $bar_size;
2379
margin-right: 0;
2380
}
2381
}
2382
&:dir(rtl) {
2384
padding: 0 12px 0 0;
2385
trough {
2387
padding-right: $bar_size;
2388
}
2389
slider {
2391
@extend %scale-has-marks-above-vert;
2392
margin-right: -10px - $bar_size;
2394
margin-left: 0;
2395
}
2396
}
2397
}
2398
&.fine-tune {
2400
&.horizontal {
2401
slider {
2402
@extend %scale-has-marks-above-horz-fine-tune;
2403
}
2404
}
2405
&.vertical {
2407
&:dir(ltr) {
2408
slider {
2409
@extend %scale-has-marks-below-vert-fine-tune;
2410
}
2411
}
2412
&:dir(rtl) {
2414
slider {
2415
@extend %scale-has-marks-above-vert-fine-tune;
2416
}
2417
}
2418
}
2419
}
2420
}
2421
}
2422
/*****************
2425
* Progress bars *
2426
*****************/
2427
progressbar {
2428
// sizing
2429
&.horizontal {
2430
trough,
2431
progress { min-height: $bar_size; }
2432
}
2433
&.vertical {
2435
trough,
2436
progress { min-width: $bar_size; }
2437
}
2438
// FIXME: insensitive state missing and some other state should be set probably
2440
color: $tertiary_fg_color;
2441
font-size: smaller;
2442
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2444
progress { background-color: $selected_bg_color; }
2446
&.osd { // progressbar.osd used for epiphany page loading progress
2448
// min-width: $bar_size;
2449
// min-height: $bar_size;
2450
// background-color: transparent;
2451
// trough { background-color: transparent; }
2453
progress {
2455
}
2456
}
2457
}
2458
/*************
2461
* Level Bar *
2462
*************/
2463
levelbar {
2464
block {
2465
min-width: $medium_size;
2466
min-height: $bar_size;
2467
}
2468
&.vertical block {
2470
min-width: $bar_size;
2471
min-height: $medium_size;
2472
}
2473
trough {
2475
padding: 2px;
2476
border-radius: 2px;
2477
@include entry(normal);
2479
&:disabled { @include entry(insensitive); }
2481
}
2482
&.horizontal.discrete block { margin: 0 1px; }
2484
&.vertical.discrete block { margin: 1px 0; }
2486
&.horizontal.discrete trough { padding: 2px 1px; }
2488
&.vertical.discrete trough { padding: 1px 2px; }
2490
block {
2492
&.low {
2493
background-color: $warning_color;
2494
}
2495
&.high,
2497
&:not(.empty) {
2498
background-color: $selected_bg_color;
2499
}
2500
&.full {
2502
background-color: $success_color;
2503
}
2504
&.empty {
2506
background-color: $track_color;
2507
color: $insensitive_fg_color;
2508
}
2509
}
2510
}
2511
/****************
2514
* Print dialog *
2515
*****************/
2516
printdialog {
2517
paper {
2518
padding: 0;
2519
border: 1px solid $borders_color;
2520
background: $base_color;
2521
color: $fg_color;
2522
}
2523
.dialog-action-box { margin: 12px; }
2525
}
2526
/**********
2529
* Frames *
2530
**********/
2531
frame > border,
2532
.frame {
2533
margin: 0;
2534
padding: 0;
2535
border: 1px solid $borders_color;
2536
border-radius: 0;
2537
box-shadow: none;
2538
&.flat { border-style: none; }
2540
}
2541
actionbar > revealer > box {
2543
padding: $container_padding;
2544
border-top: 1px solid $borders_color;
2545
}
2546
scrolledwindow {
2548
viewport.frame { // avoid double borders when viewport inside scrolled window
2549
border-style: none;
2550
}
2551
// This is used when content is touch-dragged past boundaries.
2553
// draws a box on top of the content, the size changes programmatically.
2554
@at-root overshoot {
2555
&.top { @include overshoot(top); }
2556
&.bottom { @include overshoot(bottom); }
2558
&.left { @include overshoot(left); }
2560
&.right { @include overshoot(right); }
2562
}
2563
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2565
@at-root undershoot {
2566
&.top { @include undershoot(top); }
2567
&.bottom { @include undershoot(bottom); }
2569
&.left { @include undershoot(left); }
2571
&.right { @include undershoot(right); }
2573
}
2574
@at-root junction { // the small square between two scrollbars
2576
border-style: solid none none solid;
2577
border-width: 1px;
2578
border-color: $borders_color;
2579
background-color: $base_color;
2580
&:dir(rtl) { border-style: solid solid none none; }
2582
}
2583
}
2584
//vbox and hbox separators
2586
separator {
2587
min-width: 1px;
2588
min-height: 1px;
2589
background: $borders_color;
2590
}
2591
/*********
2594
* Lists *
2595
*********/
2596
list {
2597
border-color: $borders_color;
2598
background-color: $base_color;
2599
row { padding: 2px; }
2601
}
2602
row {
2604
&.activatable {
2605
transition: $material_transition;
2606
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0);
2607
background-image: radial-gradient(circle farthest-corner at center,
2608
gtkalpha(currentColor, 0) 100%,
2609
transparent 0%),
2610
image(gtkalpha(currentColor, 0));
2611
&:hover {
2613
transition: $material_transition, box-shadow 0;
2614
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0.05);
2615
}
2616
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2618
&:active {
2619
transition: $material_transition, background-image 0;
2620
animation: row_ripple_effect $material_slower $material_ease_out forwards;
2621
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, $lower_opacity / 2);
2622
}
2623
}
2624
&:selected { @extend %selected_items; }
2626
}
2627
/*********************
2630
* App Notifications *
2631
*********************/
2632
.app-notification,
2633
.app-notification.frame {
2634
@extend %osd;
2635
@extend toolbar.osd;
2637
margin: 8px;
2639
border { border: none; }
2641
}
2642
/*************
2645
* Expanders *
2646
*************/
2647
expander {
2648
arrow {
2649
transition: all $material_faster $material_ease;
2650
min-width: 16px;
2651
min-height: 16px;
2652
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2653
-gtk-icon-transform: rotate(-90deg);
2654
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2656
&:checked { -gtk-icon-transform: unset; }
2658
color: $secondary_fg_color;
2660
&:hover, &:active { color: $fg_color; }
2662
&:disabled { color: $insensitive_secondary_fg_color; }
2664
&:selected {
2666
color: $secondary_selected_fg_color;
2667
&:hover, &:active { color: $selected_fg_color; }
2669
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2671
}
2672
}
2673
}
2674
/************
2677
* Calendar *
2678
***********/
2679
calendar {
2680
padding: 1px;
2681
border: 1px solid $borders_color;
2682
color: $fg_color;
2683
&:disabled { color: $insensitive_fg_color; }
2685
&:selected {
2687
@extend %selected_items;
2688
border-radius: 2px + 1px;
2690
}
2691
&.header {
2693
border-style: none none solid;
2694
border-radius: 0;
2695
}
2696
&.button { @extend %button_basic.flat; }
2698
&.highlight {
2700
color: gtkalpha(currentColor, $hint_opacity);
2701
font-weight: 500;
2702
}
2703
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2705
}
2706
/***********
2709
* Dialogs *
2710
***********/
2711
messagedialog { // Message Dialog styling
2712
&.background { background-color: $light_color; }
2713
.titlebar {
2715
min-height: $small_size;
2716
border-style: none;
2717
box-shadow: inset 0 1px $highlight_color;
2718
background-color: $light_color;
2719
}
2720
&.csd { // rounded bottom border styling for csd version
2722
&.background {
2723
// bigger radius for better antialiasing
2724
border-bottom-left-radius: 2px;
2725
border-bottom-right-radius: 2px;
2726
}
2727
.dialog-action-area button {
2729
padding: 8px 16px;
2730
border-top: 1px solid $borders_color;
2731
border-radius: 0;
2732
@extend %button_basic.flat;
2734
&:first-child{ border-bottom-left-radius: 2px; }
2736
&:last-child { border-bottom-right-radius: 2px; }
2738
}
2739
}
2740
}
2741
filechooser {
2743
.dialog-action-box { border-top: 1px solid $borders_color; }
2744
#pathbarbox {
2746
border-bottom: 1px solid $borders_color;
2747
background-color: $bg_color;
2748
}
2749
}
2750
filechooserbutton:drop(active) {
2752
box-shadow: none;
2753
}
2754
/***********
2757
* Sidebar *
2758
***********/
2759
.sidebar {
2760
border-style: none;
2761
background-color: $light_color;
2762
@at-root %sidebar_left,
2764
&:dir(ltr),
2765
&.left,
2766
&.left:dir(rtl) {
2767
border-right: 1px solid $borders_color;
2768
border-left-style: none;
2769
}
2770
@at-root %sidebar_right
2772
&:dir(rtl),
2773
&.right {
2774
border-left: 1px solid $borders_color;
2775
border-right-style: none;
2776
}
2777
list { background-color: transparent; }
2779
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2781
}
2782
stacksidebar {
2784
&.sidebar {
2785
&:dir(ltr),
2786
&.left,
2787
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2788
&:dir(rtl),
2790
&.right { list { @extend %sidebar_right; }}
2791
}
2792
row {
2794
padding: 10px 4px;
2795
> label {
2797
padding-left: 6px;
2798
padding-right: 6px;
2799
}
2800
&.needs-attention > label { @extend %needs_attention; }
2802
}
2803
}
2804
/****************
2807
* File chooser *
2808
****************/
2809
placessidebar {
2810
> viewport.frame { border-style: none; }
2811
list { padding: (4px - 3px) 0 4px; }
2813
row {
2815
// Needs overriding of the GtkListBoxRow padding
2816
min-height: 32px;
2817
margin: -1px 0; // Remove unknown margins
2818
padding: 0;
2819
// Using margins/padding directly in the SidebarRow
2821
// will make the animation of the new bookmark row jump
2822
> revealer { padding: 0 12px; }
2823
&:selected { color: $selected_fg_color; }
2825
&:disabled { color: $insensitive_fg_color; }
2827
image.sidebar-icon {
2829
opacity: $hint_opacity; // dim the device icons
2830
&:dir(ltr) { padding-right: 8px; }
2832
&:dir(rtl) { padding-left: 8px; }
2833
}
2834
label.sidebar-label {
2836
&:dir(ltr) { padding-right: 2px; }
2837
&:dir(rtl) { padding-left: 2px; }
2838
}
2839
@at-root button.sidebar-button {
2841
@extend %button_basic.flat;
2842
min-height: $small_size;
2844
min-width: $small_size;
2845
margin-top: 0;
2846
margin-bottom: 0;
2847
padding: 0;
2848
border-radius: 100%;
2849
-gtk-outline-radius: 100%;
2850
row:selected & { @extend %button_selected.flat; }
2852
}
2853
&.sidebar-placeholder-row {
2855
min-height: 2px;
2856
padding: 0 8px;
2857
background-image: image($accent_bg_color);
2858
background-clip: content-box;
2859
}
2860
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2862
&:drop(active):not(:disabled) {
2864
box-shadow: inset 0 0 0 2px $accent_bg_color;
2865
&:selected {
2867
// background-color: $accent_bg_color;
2868
// color: $selected_fg_color;
2869
}
2870
}
2871
}
2872
}
2873
placesview {
2875
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2876
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2878
// this selects the "connect to server" label
2880
> actionbar > revealer > box > label {
2881
padding-left: 8px;
2882
padding-right: 8px;
2883
}
2884
}
2885
/*********
2888
* Paned *
2889
*********/
2890
paned {
2891
> separator {
2892
min-width: 1px;
2893
min-height: 1px;
2894
-gtk-icon-source: none; // defeats the ugly default handle decoration
2895
border-style: none; // just to be sure
2896
background-color: transparent;
2897
// workaround, using background istead of a border since the border will get rendered twice (?)
2898
background-image: image($borders_color);
2899
background-size: 1px 1px;
2900
&.wide {
2902
min-width: 6px;
2903
min-height: 6px;
2904
background-color: $bg_color;
2905
background-image: image($borders_color), image($borders_color);
2906
background-size: 1px 1px, 1px 1px;
2907
}
2908
}
2909
&.horizontal > separator {
2911
background-repeat: repeat-y;
2912
&:dir(ltr) {
2914
margin: 0 -8px 0 0;
2915
padding: 0 8px 0 0;
2916
background-position: left;
2917
}
2918
&:dir(rtl) {
2920
margin: 0 0 0 -8px;
2921
padding: 0 0 0 8px;
2922
background-position: right;
2923
}
2924
&.wide {
2926
margin: 0;
2927
padding: 0;
2928
background-repeat: repeat-y, repeat-y;
2929
background-position: left, right;
2930
}
2931
}
2932
&.vertical > separator {
2934
margin: 0 0 -8px 0;
2935
padding: 0 0 8px 0;
2936
background-repeat: repeat-x;
2937
background-position: top;
2938
&.wide {
2940
margin: 0;
2941
padding: 0;
2942
background-repeat: repeat-x, repeat-x;
2943
background-position: bottom, top;
2944
}
2945
}
2946
}
2947
/**************
2950
* GtkInfoBar *
2951
**************/
2952
infobar {
2953
border-style: none;
2954
&.info { background-color: $info_bg_color; }
2956
&.question { background-color: $question_bg_color; }
2958
&.warning { background-color: $warning_bg_color; }
2960
&.error { background-color: $error_bg_color; }
2962
&.info,
2964
&.question,
2965
&.warning,
2966
&.error {
2967
> label, & { color: $selected_fg_color; }
2968
button { @extend %button_selected; }
2970
selection { }
2972
*:link { @extend %link_selected; }
2974
}
2975
}
2976
/************
2979
* Tooltips *
2980
************/
2981
tooltip {
2982
&.background {
2983
// background-color needs to be set this way otherwise it gets drawn twice
2984
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2985
background-color: scale-alpha($base_color, $higher_opacity);
2986
}
2987
// @extend %osd;
2989
// padding: 4px; /* not working */
2991
border-radius: 2px;
2992
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2993
// FIXME: we need a border or tooltips vanish on black background.
2995
decoration { background-color: transparent; }
2996
label {
2998
// tooltip label has already 6px margins
2999
min-height: 32px - 6px * 2;
3000
padding: 0 8px - 6px;
3001
}
3002
* { // Yeah this is ugly
3004
padding: 0;
3005
background-color: transparent;
3006
color: inherit;
3007
}
3008
}
3009
/*****************
3012
* Color Chooser *
3013
*****************/
3014
colorswatch {
3015
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3016
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3017
// applied to the overlay box.
3018
// base color corners rounding
3020
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3021
// sports a bigger radius.
3022
// nth-child is needed by the custom color strip.
3023
&.top {
3025
border-top-left-radius: $material_radius + 0.5px;
3026
border-top-right-radius: $material_radius + 0.5px;
3027
overlay {
3029
border-top-left-radius: $material_radius;
3030
border-top-right-radius: $material_radius;
3031
}
3032
}
3033
&.bottom {
3035
border-bottom-left-radius: $material_radius + 0.5px;
3036
border-bottom-right-radius: $material_radius + 0.5px;
3037
overlay {
3039
border-bottom-left-radius: $material_radius;
3040
border-bottom-right-radius: $material_radius;
3041
}
3042
}
3043
&.left,
3045
&:first-child:not(.top) {
3046
border-top-left-radius: $material_radius + 0.5px;
3047
border-bottom-left-radius: $material_radius + 0.5px;
3048
overlay {
3050
border-top-left-radius: $material_radius;
3051
border-bottom-left-radius: $material_radius;
3052
}
3053
}
3054
&.right,
3056
&:last-child:not(.bottom) {
3057
border-top-right-radius: $material_radius + 0.5px;
3058
border-bottom-right-radius: $material_radius + 0.5px;
3059
overlay {
3061
border-top-right-radius: $material_radius;
3062
border-bottom-right-radius: $material_radius;
3063
}
3064
}
3065
&.dark overlay { color: white; }
3067
&.light overlay { color: scale-alpha(black, 0.8); }
3069
&.dark { color: white; } // for focus ring
3071
&.light { color: scale-alpha(black, 0.8); } // for focus ring
3073
&:drop(active) {
3075
box-shadow: none;
3076
&.light overlay {
3078
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3079
}
3080
&.dark overlay {
3082
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3083
}
3084
}
3085
overlay {
3087
transition: $shadow_transition;
3088
box-shadow: $z-depth-1;
3089
&:hover { box-shadow: $z-depth-2; }
3091
}
3092
&#add-color-button {
3094
border-radius: $material_radius $material_radius 0 0;
3095
color: white; // for focus ring
3096
&:only-child { border-radius: $material_radius; }
3098
overlay {
3100
background-image: linear-gradient(to right,
3101
$error_bg_color 25%,
3102
$warning_bg_color 25%, $warning_bg_color 50%,
3103
$info_bg_color 50%, $info_bg_color 75%,
3104
$question_bg_color 75%);
3105
color: white;
3106
}
3107
}
3108
&:disabled {
3110
opacity: $disabled_opacity;
3111
overlay { box-shadow: none; }
3113
}
3114
row:selected & {
3116
}
3117
&#editor-color-sample {
3119
border-radius: $material_radius + 0.5px;
3120
overlay { border-radius: $material_radius; }
3122
// overlay:hover { box-shadow: $z-depth-1; }
3124
}
3125
}
3126
// colorscale popup
3128
colorchooser .popover.osd {
3129
transition: $shadow_transition;
3130
border-radius: 2px;
3131
box-shadow: $z-depth-2;
3132
background-color: $base_color;
3133
&:backdrop { box-shadow: $z-depth-1; }
3135
spinbutton:not(.vertical) { @extend %entry.flat; }
3137
}
3138
/********
3141
* Misc *
3142
********/
3143
//content view (grid/list)
3144
.content-view {
3145
background-color: $bg_color;
3146
// &:hover { -gtk-icon-effect: highlight; }
3148
rubberband { @extend rubberband; }
3150
}
3151
.scale-popup {
3153
.osd & { @extend %osd; }
3154
.osd & button.flat { //FIXME: quick hack, redo properly
3156
}
3157
button { // +/- buttons on GtkVolumeButton popup
3159
}
3160
}
3161
/**********************
3164
* Window Decorations *
3165
*********************/
3166
decoration {
3167
transition: $shadow_transition;
3168
border-radius: 2px 2px 0 0;
3169
box-shadow: $z-depth-4, 0 16px 16px transparent;
3170
// FIXME rationalize shadows
3172
// this is used for the resize cursor area
3174
margin: 8px;
3175
&:backdrop {
3177
// the transparent shadow here is to enforce that the shadow extents don't
3178
// change when we go to backdrop, to prevent jumping windows.
3179
// The biggest shadow should be in the same order then in the active state
3180
// or the jumping will happen during the transition.
3181
box-shadow: $z-depth-2, 0 16px 16px transparent;
3182
}
3183
.maximized &,
3185
.fullscreen &,
3186
.tiled & { border-radius: 0; }
3187
.popup & { box-shadow: none; }
3189
// server-side decorations as used by mutter
3191
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3192
.csd.popup & {
3194
border-radius: 2px;
3195
box-shadow: $z-depth-2;
3196
}
3197
tooltip.csd & {
3199
border-radius: 2px;
3200
box-shadow: $z-depth-2;
3201
}
3202
messagedialog.csd & {
3204
border-radius: 2px;
3205
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3206
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3208
}
3209
.solid-csd & {
3211
margin: 0;
3212
padding: 4px;
3213
// border: solid 1px $borders_color;
3214
border-radius: 0;
3215
box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $secondary_highlight_color;
3216
background-color: $borders_color;
3217
}
3218
}
3219
// Window Close button
3221
button.titlebutton {
3222
// @extend %button_basic.flat;
3223
@extend %button_basic.image-button;
3225
.selection-mode & {
3227
}
3228
}
3229
// catch all extend :)
3232
%selected_items {
3234
background-color: $selected_bg_color;
3235
@at-root %nobg_selected_items, & {
3237
color: $selected_fg_color;
3238
&:disabled { color: $insensitive_selected_fg_color; }
3240
}
3241
}
3242
.monospace { font-family: monospace; }
3244
/**********************
3247
* Touch Copy & Paste *
3248
*********************/
3249
//touch selection handlebars for the Popover.osd above
3250
cursor-handle {
3251
border-radius: 100px;
3252
background-color: $accent_bg_color;
3253
background-image: none;
3254
&.top:dir(ltr), &.bottom:dir(rtl) {
3256
padding-left: 6px;
3257
border-top-right-radius: 0;
3258
}
3259
&.bottom:dir(ltr), &.top:dir(rtl) {
3261
padding-right: 6px;
3262
border-top-left-radius: 0;
3263
}
3264
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3266
-GtkWidget-text-handle-width: 24;
3267
-GtkWidget-text-handle-height: 30;
3268
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3270
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3271
url('#{$_url}@2.png'));
3272
}
3273
}
3274
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3276
button.circular { // FIXME: aggregate to buttons
3278
border-radius: 100px;
3279
-gtk-outline-radius: 100px;
3280
label { padding: 0; }
3282
}
3283
// shortcut window keys
3285
.keycap {
3286
min-width: 28px - 8px * 2;
3287
min-height: 28px - 2px;
3288
margin-top: 2px;
3289
padding-bottom: 2px;
3290
padding-left: 8px;
3291
padding-right: 8px;
3292
border: solid 1px $borders_color;
3294
border-radius: 2px + 1px;
3295
box-shadow: inset 0 -2px $borders_color;
3296
background-color: $base_color;
3297
color: $fg_color;
3298
font-size: smaller;
3299
}
3300
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3302
transition: $material_transition;
3303
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3304
caret-color: $accent_bg_color;
3305
}
3306
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3308
stackswitcher button.circular,
3310
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3311
min-width: $medium_size;
3312
min-height: $medium_size;
3313
padding: 0;
3314
}
3315