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
}
1183
/**************
1186
* Tree Views *
1187
**************/
1188
treeview.view {
1189
@at-root * {
1190
-GtkTreeView-horizontal-separator: 4;
1191
-GtkTreeView-grid-line-width: 1;
1192
-GtkTreeView-grid-line-pattern: '';
1193
-GtkTreeView-tree-line-width: 1;
1194
-GtkTreeView-tree-line-pattern: '';
1195
-GtkTreeView-expander-size: 16;
1196
}
1197
border-left-color: $track_color; // this is actually the tree lines color,
1199
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1200
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1202
&:hover, &:active, &:selected { border-radius: 0; }
1204
&.separator {
1206
min-height: 1px + 2px * 2;
1207
color: $borders_color;
1208
}
1209
&:drop(active) {
1211
border-style: solid none;
1212
border-width: 1px;
1213
border-color: $accent_bg_color;
1214
&.after { border-top-style: none; }
1216
&.before { border-bottom-style: none; }
1218
}
1219
&.expander {
1221
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1222
-gtk-icon-transform: rotate(-90deg);
1223
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1225
&:checked { -gtk-icon-transform: unset; }
1227
color: $secondary_fg_color;
1229
&:hover, &:active { color: $fg_color; }
1231
&:disabled { color: $insensitive_secondary_fg_color; }
1233
&:selected {
1235
color: $secondary_selected_fg_color;
1236
&:hover, &:active { color: $selected_fg_color; }
1238
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1240
}
1241
}
1242
&.progressbar { // progress bar in treeviews
1244
border-style: none none solid;
1245
border-width: $bar_size;
1246
border-color: $selected_bg_color;
1247
background-color: transparent;
1248
background-image: none;
1249
&:selected { border-color: currentColor; }
1251
}
1252
&.trough { // progress bar trough in treeviews
1254
border-style: none none solid;
1255
border-width: $bar_size;
1256
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1257
background-color: transparent;
1258
background-image: none;
1259
&:selected { border-color: $track_color; }
1261
}
1262
header {
1264
button {
1265
@extend row.activatable;
1266
padding: 2px 6px;
1268
border-style: none solid solid none;
1269
border-width: 1px;
1270
border-color: $borders_color;
1271
border-radius: 0;
1272
background-clip: border-box;
1273
&, &:hover, &:active { box-shadow: none; }
1275
&, &:disabled { background-color: $base_color; }
1277
&:last-child { border-right-style: none; }
1279
}
1280
}
1281
button.dnd,
1283
header.button.dnd { // for treeview-like derive widgets
1284
padding: 2px 6px;
1285
border-style: none solid solid;
1286
border-width: 1px;
1287
border-color: $borders_color;
1288
border-radius: 0;
1289
box-shadow: none;
1290
background-color: $base_color;
1291
background-clip: border-box;
1292
color: $selected_bg_color;
1293
}
1294
acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
1296
}
1297
/*********
1300
* Menus *
1301
*********/
1302
menubar,
1303
.menubar {
1304
-GtkWidget-window-dragging: true;
1305
padding: 0;
1306
// box-shadow: inset 0 -1px $borders_color;
1307
background-color: $headerbar_color;
1308
> menuitem {
1310
transition: background-color $material_faster $material_ease_out;
1311
min-height: 20px;
1312
padding: 4px 8px;
1313
color: $secondary_selected_fg_color;
1314
&:hover { //Seems like it :hover even with keyboard focus
1316
transition: none;
1317
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1318
color: $selected_fg_color;
1319
}
1320
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1322
}
1323
}
1324
menu,
1326
.menu,
1327
.context-menu {
1328
margin: 4px 0;
1329
padding: 4px 0;
1330
background-color: $base_color;
1331
border: 1px solid $borders_color; // adds borders in a non composited env
1332
.csd & {
1334
border: none; // axes borders in a composited env
1335
border-radius: 2px;
1336
}
1337
menuitem {
1339
transition: background-color $material_faster $material_ease_out;
1340
min-height: 20px;
1341
min-width: 40px;
1342
padding: 4px 8px;
1343
font: initial;
1344
text-shadow: none;
1345
&:hover {
1347
transition: none;
1348
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1349
}
1350
&:disabled { color: $insensitive_fg_color; }
1352
// submenu indicators
1354
arrow {
1355
min-height: 16px;
1356
min-width: 16px;
1357
&:dir(ltr) {
1359
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1360
margin-left: 8px;
1361
}
1362
&:dir(rtl) {
1364
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1365
margin-right: 8px;
1366
}
1367
}
1368
// avoids labels color being overridden, see
1370
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1371
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1372
}
1373
// overflow arrows
1375
> arrow {
1376
min-height: 16px;
1377
min-width: 16px;
1378
padding: 4px;
1379
border-radius: 0;
1380
background-color: $base_color;
1381
color: $secondary_fg_color;
1382
&.top {
1384
margin-top: -4px;
1385
border-bottom: 1px solid $borders_color;
1386
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1387
}
1388
&.bottom {
1390
margin-bottom: -4px;
1391
border-top: 1px solid $borders_color;
1392
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1393
}
1394
&:hover {
1396
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1397
color: $fg_color;
1398
}
1399
&:disabled {
1401
border-color: transparent;
1402
background-color: transparent;
1403
color: transparent;
1404
// color: $insensitive_secondary_fg_color;
1405
}
1406
}
1407
separator { margin: 4px 0; }
1409
}
1410
menuitem {
1412
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1413
check,
1415
radio {
1416
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1417
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1418
}
1419
}
1420
.csd.popup { border-radius: 2px; }
1422
/***************
1425
* Popovers *
1426
***************/
1427
popover.background {
1428
transition: $shadow_transition;
1429
padding: 0;
1430
box-shadow: $z-depth-2;
1431
background-color: $light_color;
1432
&:backdrop { box-shadow: $z-depth-1; }
1434
&, .csd & {
1436
border-style: solid;
1437
border-width: 1px;
1438
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1439
border-radius: 2px + 1px;
1440
}
1441
> list,
1443
> .view,
1444
> toolbar {
1445
border-style: none;
1446
box-shadow: none;
1447
background-color: transparent;
1448
}
1449
&, .csd & {
1451
&.touch-selection,
1452
&.magnifier,
1453
&.osd { @extend %osd; }
1454
}
1455
separator { margin: 4px 0; }
1457
list separator { margin: 0; }
1459
}
1460
/*************
1462
* Notebooks *
1463
*************/
1464
notebook {
1465
> header {
1466
border-width: 1px;
1467
border-color: $borders_color;
1468
background-color: $bg_color;
1469
background-clip: border-box;
1470
&.top {
1472
border-bottom-style: solid;
1473
> tabs {
1474
margin-bottom: -1px;
1475
> tab {
1476
&:hover { box-shadow: inset 0 -2px $track_color; }
1478
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1480
}
1481
}
1482
}
1483
&.bottom {
1485
border-top-style: solid;
1486
> tabs {
1487
margin-top: -1px;
1488
> tab {
1489
&:hover { box-shadow: inset 0 2px $track_color; }
1491
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1493
}
1494
}
1495
}
1496
&.left {
1498
border-right-style: solid;
1499
> tabs {
1500
margin-right: -1px;
1501
> tab {
1502
&:hover { box-shadow: inset -2px 0 $track_color; }
1504
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1506
}
1507
}
1508
}
1509
&.right {
1511
border-left-style: solid;
1512
> tabs {
1513
margin-left: -1px;
1514
> tab {
1515
&:hover { box-shadow: inset 2px 0 $track_color; }
1517
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1519
}
1520
}
1521
}
1522
&.top > tabs > arrow {
1524
@extend %notebook_vert_arrows;
1525
border-top-style: none;
1527
}
1528
&.bottom > tabs > arrow {
1530
@extend %notebook_vert_arrows;
1531
border-bottom-style: none;
1533
}
1534
@at-root %notebook_vert_arrows {
1536
padding-left: 4px;
1537
padding-right: 4px;
1538
&.down {
1540
margin-left: -8px;
1541
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1542
}
1543
&.up {
1545
margin-right: -8px;
1546
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1547
}
1548
}
1549
&.left > tabs > arrow {
1551
@extend %notebook_horz_arrows;
1552
border-left-style: none;
1554
}
1555
&.right > tabs > arrow {
1557
@extend %notebook_horz_arrows;
1558
border-right-style: none;
1560
}
1561
@at-root %notebook_horz_arrows {
1563
padding-top: 4px;
1564
padding-bottom: 4px;
1565
&.down {
1567
margin-top: -8px;
1568
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1569
}
1570
&.up {
1572
margin-bottom: -8px;
1573
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1574
}
1575
}
1576
> tabs > arrow {
1578
@extend %button_basic.flat;
1579
min-height: 16px;
1581
min-width: 16px;
1582
border-radius: 0;
1583
}
1584
tab {
1586
transition: $material_transition;
1587
min-height: $small_size;
1588
min-width: $small_size;
1589
padding: $container_padding 12px;
1590
outline-offset: -6px;
1592
border-width: 1px; // for reorderable tabs
1594
border-color: transparent; //
1595
color: $secondary_fg_color;
1597
font-weight: 500;
1598
&:hover {
1600
color: $fg_color;
1601
&.reorderable-page {
1603
border-color: $borders_color;
1604
background-color: $secondary_base_color;
1605
}
1606
}
1607
&:disabled { color: $insensitive_secondary_fg_color; }
1609
&:checked {
1611
animation: tab_ripple_effect $material_slower * 3 $material_ease_out;
1612
color: $fg_color;
1613
&:disabled { color: $insensitive_fg_color; }
1615
&.reorderable-page {
1617
border-color: $borders_color;
1618
background-color: $base_color;
1619
}
1620
}
1621
// colors the button like the label, overridden otherwise
1623
button.flat {
1624
// FIXME: generalize .small-button?
1625
min-width: $small_size;
1626
min-height: $small_size;
1627
padding: 0;
1628
@extend %button_basic.image-button;
1630
&:last-child {
1632
margin-left: $container_padding;
1633
margin-right: $container_padding - 12px;
1634
}
1635
&:first-child {
1637
margin-left: $container_padding - 12px;
1638
margin-right: $container_padding;
1639
}
1640
}
1641
}
1642
&.top,
1644
&.bottom {
1645
tabs {
1646
padding-left: 8px;
1647
padding-right: 8px;
1648
&:not(:only-child) {
1650
&:first-child { margin-left: 0; }
1651
&:last-child { margin-right: 0; }
1652
}
1653
tab {
1655
&.reorderable-page {
1656
margin: 0 -1px;
1657
border-style: none solid;
1658
}
1659
}
1660
}
1661
}
1662
&.left,
1664
&.right {
1665
tabs {
1666
padding-top: 8px;
1667
padding-bottom: 8px;
1668
&:not(:only-child) {
1670
&:first-child { margin-top: 0; }
1671
&:last-child { margin-bottom: 0; }
1672
}
1673
tab {
1675
&.reorderable-page {
1676
margin: -1px 0;
1677
border-style: solid none;
1678
}
1679
}
1680
}
1681
}
1682
}
1683
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1685
background-color: $base_color;
1686
entry,
1688
spinbutton:not(.vertical) { @extend %entry.flat; }
1689
revealer entry,
1691
revealer spinbutton:not(.vertical) { @extend %entry; }
1692
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1694
}
1695
}
1696
/**************
1699
* Scrollbars *
1700
**************/
1701
scrollbar {
1702
$_slider_min_length: 24px;
1703
// disable steppers
1705
@at-root * {
1706
-GtkScrollbar-has-backward-stepper: false;
1707
-GtkScrollbar-has-forward-stepper: false;
1708
}
1709
transition: $material_transition;
1711
background-color: $base_color;
1712
background-clip: $extra_background_clip;
1713
// scrollbar border
1715
&.top { border-bottom: 1px solid $borders_color; }
1716
&.bottom { border-top: 1px solid $borders_color; }
1717
&.left { border-right: 1px solid $borders_color; }
1718
&.right { border-left: 1px solid $borders_color; }
1719
// slider
1721
slider {
1722
transition: all $material_faster $material_ease_out, margin 0, border-width 0;
1723
min-width: 8px;
1724
min-height: 8px;
1725
border: 4px solid transparent;
1726
border-radius: 100px;
1727
background-clip: padding-box;
1728
background-color: $tertiary_fg_color;
1729
&:hover { background-color: $secondary_fg_color; }
1731
&:active { background-color: $fg_color; }
1733
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1735
}
1736
&.fine-tune {
1738
slider {
1739
transition: all $material_faster $material_ease_out, margin 0, border-width 0, min-width 0, min-height 0;
1740
min-width: 4px;
1741
min-height: 4px;
1742
}
1743
&.horizontal slider { margin: 2px 0; }
1745
&.vertical slider { margin: 0 2px; }
1747
}
1748
&.overlay-indicator {
1750
&:not(.dragging):not(.hovering) {
1751
border-color: transparent;
1752
background-color: transparent;
1753
slider {
1755
min-width: 4px;
1756
min-height: 4px;
1757
margin: 4px - 1px;
1758
border: 1px solid scale-alpha($base_color, $lower_opacity);
1759
}
1760
button {
1762
min-width: 4px;
1763
min-height: 4px;
1764
margin: 4px - 1px;
1765
border: 1px solid scale-alpha($base_color, $lower_opacity);
1766
border-radius: 100px;
1767
background-color: $tertiary_fg_color;
1768
background-clip: padding-box;
1769
-gtk-icon-source: none;
1770
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1772
}
1773
&.horizontal {
1775
slider { min-width: $_slider_min_length; }
1776
button { min-width: 8px; }
1778
}
1779
&.vertical {
1781
slider { min-height: $_slider_min_length; }
1782
button { min-height: 8px; }
1784
}
1785
}
1786
&.dragging,
1788
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1789
}
1790
&.horizontal slider { min-width: $_slider_min_length; }
1792
&.vertical slider { min-height: $_slider_min_length; }
1794
// button styling
1796
button {
1797
@extend %button_basic.flat;
1798
min-width: 16px;
1799
min-height: 16px;
1800
padding: 0;
1801
border-radius: 0;
1802
}
1803
// button icons
1805
&.vertical {
1806
button {
1807
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1808
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1810
}
1811
}
1812
&.horizontal {
1814
button {
1815
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1816
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1818
}
1819
}
1820
}
1821
/**********
1824
* Switch *
1825
**********/
1826
switch {
1827
transition: $material_transition;
1828
margin: $container_padding 0;
1829
border: 4px solid transparent;
1830
border-radius: 100px;
1831
background-color: $track_color;
1832
background-clip: padding-box;
1833
font-size: 0;
1834
&:disabled { color: $insensitive_fg_color; }
1836
&:checked {
1838
background-color: scale-alpha($accent_bg_color, 0.5);
1839
&:disabled {
1841
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1842
color: $insensitive_fg_color;
1843
}
1844
}
1845
slider {
1847
@include entry(normal);
1848
transition: $material_transition, margin 0;
1850
min-width: $small_size;
1851
min-height: $small_size;
1852
margin: -4px 0 -4px -4px;
1853
-gtk-outline-radius: 100px;
1854
border-radius: 100px;
1855
}
1856
&:hover slider { @include entry(focus); }
1858
&:disabled slider { @include entry(insensitive); }
1860
&:checked slider {
1862
transition: $material_transition, margin 0, background-image 0, background-color 0 $material_slower;
1863
animation: needs_attention $material_slower $material_ease_out;
1864
margin: -4px -4px -4px 0;
1865
background-color: $accent_bg_color;
1866
color: $selected_fg_color;
1867
}
1868
&:checked:disabled slider { animation: none; }
1870
row:selected & {
1872
}
1873
}
1874
/*************************
1877
* Check and Radio items *
1878
*************************/
1879
// draw regular check and radio items using our PNG assets
1880
// all assets are rendered from assets.svg. never add pngs directly
1881
//selection-mode
1883
@each $s,$as in ('','-selectionmode'),
1884
(':hover', '-hover-selectionmode'),
1885
(':checked', '-checked-selectionmode'),
1886
(':checked:hover', '-checked-hover-selectionmode') {
1887
.view.content-view.check#{$s}:not(list) {
1888
-gtk-icon-shadow: $z-depth-1;
1889
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1890
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1891
margin: 8px;
1892
background-color: transparent;
1893
}
1894
}
1895
checkbutton.text-button,
1897
radiobutton.text-button {
1898
// this is for a nice focus on check and radios text
1899
padding: 2px;
1900
outline-offset: 0;
1901
label:not(:only-child) { margin: 0 4px; }
1903
}
1904
check,
1906
radio {
1907
min-height: 24px;
1908
min-width: 24px;
1909
margin: -12px;
1910
padding: 12px;
1911
@extend %button_basic.flat;
1913
@extend %button_basic.image-button;
1915
&:checked, &:checked:disabled { background-color: transparent; }
1917
&:checked, &:indeterminate { color: $accent_bg_color; }
1919
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1921
// &:only-child { margin: -12px; }
1923
row &:not(:checked):not(:indeterminate) {
1925
color: gtkalpha(currentColor, $enabled_opacity);
1926
&:hover, &:active { color: currentColor; }
1928
}
1929
menu menuitem & {
1931
transition: none;
1932
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1933
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1935
&, &:hover, &:disabled {
1937
background-image: none;
1938
// color: inherit;
1939
// animation: none;
1940
}
1941
}
1942
}
1943
%check,
1945
check {
1946
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1947
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1948
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1950
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1951
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1953
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1954
}
1955
%radio,
1957
radio {
1958
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1959
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1960
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1962
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1963
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1965
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1966
border-image: -gtk-gradient(radial,
1968
center center, 0,
1969
center center, 0.001,
1970
to($accent_bg_color),
1971
to(transparent))
1972
24 / 24px;
1973
&:checked {
1975
border-image: -gtk-gradient(radial,
1976
center center, 0,
1977
center center, (10 / 48 / 2),
1978
to($accent_bg_color),
1979
to(transparent))
1980
24 / 24px;
1981
}
1982
&:checked:disabled {
1984
border-image: -gtk-gradient(radial,
1985
center center, 0,
1986
center center, (10 / 48 / 2),
1987
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1988
to(transparent))
1989
24 / 24px;
1990
}
1991
&:indeterminate:checked {
1993
border-image: -gtk-gradient(radial,
1994
center center, 0,
1995
center center, 0.001,
1996
to($accent_bg_color),
1997
to(transparent))
1998
24 / 24px;
1999
}
2000
}
2001
// let's animate things
2003
@keyframes check_check {
2004
from { -gtk-icon-transform: rotate(90deg); }
2005
to { -gtk-icon-transform: unset; }
2006
}
2007
@keyframes check_radio { // FIXME: cannot animate border-image
2009
from {
2010
border-image: -gtk-gradient(radial,
2011
center center, 0,
2012
center center, 0.001,
2013
to($accent_bg_color),
2014
to(transparent))
2015
24 / 24px;
2016
}
2017
to {
2019
border-image: -gtk-gradient(radial,
2020
center center, 0,
2021
center center, (10 / 48 / 2),
2022
to($accent_bg_color),
2023
to(transparent))
2024
24 / 24px;
2025
}
2026
}
2027
@keyframes check_indeterminate {
2029
from { -gtk-icon-transform: unset; }
2030
50% { -gtk-icon-transform: scale(0, 1); }
2031
to { -gtk-icon-transform: unset; }
2032
}
2033
%check_checked,
2035
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
2036
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2038
// %radio_checked,
2040
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
2041
// radio:not(:indeterminate):checked:active { animation: check_radio $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2043
%indeterminate_checked,
2045
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
2046
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2048
// no animations in menus
2050
menu menuitem {
2051
check:not(:indeterminate):checked,
2052
radio:not(:indeterminate):checked,
2053
check:indeterminate:checked,
2054
radio:indeterminate:checked { animation: none; }
2055
}
2056
treeview.view check,
2058
treeview.view radio {
2059
padding: 0;
2060
&:checked:hover, &:selected:checked:hover { background-image: none; }
2062
& {
2064
color: $secondary_fg_color;
2065
&:hover, &:active { color: $fg_color; }
2067
&:disabled { color: $insensitive_secondary_fg_color; }
2069
&:checked, &:indeterminate { color: $accent_bg_color; }
2071
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2073
}
2074
&:selected {
2076
color: $secondary_selected_fg_color;
2077
&:hover, &:active { color: $selected_fg_color; }
2079
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2081
&:checked, &:indeterminate { color: $accent_bg_color; }
2083
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2085
}
2086
}
2087
treeview.view radio:checked {
2089
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2090
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2091
border-image: none;
2092
}
2093
/************
2096
* GtkScale *
2097
************/
2098
scale {
2099
// sizing
2100
$_marks_lenght: 8px;
2101
$_marks_distance: 8px;
2102
min-height: $medium_size - 24px;
2104
min-width: $medium_size - 24px;
2105
padding: (24px / 2);
2106
* { transition: $material_transition; }
2108
// the slider is inside the trough, so to have make it bigger there's a negative margin
2110
slider {
2111
min-height: 24px;
2112
min-width: 24px;
2113
margin: ($bar_size - 24px) / 2;
2114
}
2115
// the backing bit
2117
trough {
2118
outline-offset: 2px;
2119
background-color: $track_color;
2120
&:disabled { color: $insensitive_fg_color; }
2122
}
2123
// the colored part of the backing bit
2125
highlight {
2126
background-color: $accent_bg_color;
2127
&:disabled { background-color: transparent; }
2129
}
2130
// this is another differently styled part of the backing bit, the most relevant use case is for example
2132
// in media player to indicate how much video stream as been cached
2133
fill {
2134
background-color: $track_color;
2135
&:disabled { background-color: transparent; }
2137
}
2138
slider {
2140
transition: all $material_faster $material_ease;
2141
// border-radius: 100%;
2142
// background-color: $accent_bg_color;
2143
background-repeat: no-repeat;
2144
background-position: center;
2145
@each $s,$as in ('',''),
2147
(':disabled','-insensitive') {
2148
&#{$s} {
2149
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2150
background-image: -gtk-scaled(url('#{$_url}.png'),
2151
url('#{$_url}@2.png'));
2152
}
2153
}
2154
background-size: calc(100% - 8px);
2156
&:hover { background-size: calc(100% - 4px); }
2158
&:active { background-size: calc(100% - 0px); }
2160
}
2161
// click-and-hold the slider to activate
2163
&.fine-tune {
2164
// to make the slider shrink in fine-tune mode
2165
slider { background-size: calc(100% - 12px); }
2166
}
2167
value { color: gtkalpha(currentColor, $hint_opacity); }
2169
marks {
2171
color: $track_color;
2172
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2174
(bottom, bottom, top),
2175
(top, left, right),
2176
(bottom, right, left) {
2177
&.#{$marks_class} {
2178
margin-#{$marks_margin}: $_marks_distance;
2179
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2180
}
2181
}
2182
}
2183
&.horizontal {
2185
indicator {
2186
min-height: $_marks_lenght;
2187
min-width: 1px;
2188
}
2189
}
2190
&.vertical {
2192
indicator {
2193
min-height: 1px;
2194
min-width: $_marks_lenght;
2195
}
2196
}
2197
// *WARNING* scale with marks madness following
2199
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2201
$suffix: if($variant == 'light', '', '-dark');
2202
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2204
('vertical', 'vert') {
2205
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2206
('scale-has-marks-below', ':first-child:not(:only-child)') {
2207
@each $state, $state_infix in ('', ''),
2208
(':disabled', '-insensitive') {
2209
&.#{$dir_class} {
2210
%#{$marks_infix}-#{$dir_infix},
2211
contents#{$nth_child} > trough > slider {
2212
&#{$state} {
2213
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2214
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2216
}
2217
@if $dir_class == 'horizontal' {
2219
min-height: 30px;
2220
min-width: 24px;
2221
@if $marks_infix == 'scale-has-marks-above' {
2223
margin-top: -16px;
2224
background-position: center calc(100% - 4px);
2226
&:hover { background-position: center calc(100% - 2px); }
2228
&:active { background-position: center calc(100% - 0px); }
2230
}
2231
@if $marks_infix == 'scale-has-marks-below' {
2233
margin-bottom: -16px;
2234
background-position: center calc(4px);
2236
&:hover { background-position: center calc(2px); }
2238
&:active { background-position: center calc(0px); }
2240
}
2241
}
2242
@if $dir_class == 'vertical' {
2244
min-height: 24px;
2245
min-width: 30px;
2246
@if $marks_infix == 'scale-has-marks-above' {
2248
margin-left: -16px;
2249
background-position: calc(4px) center;
2251
&:hover { background-position: calc(2px) center; }
2253
&:active { background-position: calc(0px) center; }
2255
}
2256
@if $marks_infix == 'scale-has-marks-below' {
2258
margin-right: -16px;
2259
background-position: calc(100% - 4px) center;
2261
&:hover { background-position: calc(100% - 2px) center; }
2263
&:active { background-position: calc(100% - 0px) center; }
2265
}
2266
}
2267
}
2268
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2270
&.fine-tune contents#{$nth_child} > trough > slider {
2271
// bigger negative margins to make the trough grow here as well
2272
@if $dir_class == 'horizontal' {
2274
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2275
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2277
}
2278
@if $dir_class == 'vertical' {
2280
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2281
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2283
}
2284
}
2285
}
2286
}
2287
}
2288
}
2289
&.color {
2291
min-height: 0;
2292
min-width: 0;
2293
&.horizontal {
2295
padding: 0 0 12px 0;
2296
trough {
2298
padding-bottom: $bar_size;
2299
}
2300
slider {
2302
@extend %scale-has-marks-above-horz;
2303
margin-bottom: -10px - $bar_size;
2305
margin-top: 0;
2306
}
2307
}
2308
&.vertical {
2310
&:dir(ltr) {
2311
padding: 0 0 0 12px;
2312
trough {
2314
padding-left: $bar_size;
2315
}
2316
slider {
2318
@extend %scale-has-marks-below-vert;
2319
margin-left: -10px - $bar_size;
2321
margin-right: 0;
2322
}
2323
}
2324
&:dir(rtl) {
2326
padding: 0 12px 0 0;
2327
trough {
2329
padding-right: $bar_size;
2330
}
2331
slider {
2333
@extend %scale-has-marks-above-vert;
2334
margin-right: -10px - $bar_size;
2336
margin-left: 0;
2337
}
2338
}
2339
}
2340
&.fine-tune {
2342
&.horizontal {
2343
slider {
2344
@extend %scale-has-marks-above-horz-fine-tune;
2345
}
2346
}
2347
&.vertical {
2349
&:dir(ltr) {
2350
slider {
2351
@extend %scale-has-marks-below-vert-fine-tune;
2352
}
2353
}
2354
&:dir(rtl) {
2356
slider {
2357
@extend %scale-has-marks-above-vert-fine-tune;
2358
}
2359
}
2360
}
2361
}
2362
}
2363
}
2364
/*****************
2367
* Progress bars *
2368
*****************/
2369
progressbar {
2370
// sizing
2371
&.horizontal {
2372
trough,
2373
progress { min-height: $bar_size; }
2374
}
2375
&.vertical {
2377
trough,
2378
progress { min-width: $bar_size; }
2379
}
2380
// FIXME: insensitive state missing and some other state should be set probably
2382
color: $tertiary_fg_color;
2383
font-size: smaller;
2384
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2386
progress { background-color: $selected_bg_color; }
2388
&.osd { // progressbar.osd used for epiphany page loading progress
2390
// min-width: $bar_size;
2391
// min-height: $bar_size;
2392
// background-color: transparent;
2393
// trough { background-color: transparent; }
2395
progress {
2397
}
2398
}
2399
}
2400
/*************
2403
* Level Bar *
2404
*************/
2405
levelbar {
2406
block {
2407
min-width: $medium_size;
2408
min-height: $bar_size;
2409
}
2410
&.vertical block {
2412
min-width: $bar_size;
2413
min-height: $medium_size;
2414
}
2415
trough {
2417
padding: 2px;
2418
border-radius: 2px;
2419
@include entry(normal);
2421
&:disabled { @include entry(insensitive); }
2423
}
2424
&.horizontal.discrete block { margin: 0 1px; }
2426
&.vertical.discrete block { margin: 1px 0; }
2428
&.horizontal.discrete trough { padding: 2px 1px; }
2430
&.vertical.discrete trough { padding: 1px 2px; }
2432
block {
2434
&.low {
2435
background-color: $warning_color;
2436
}
2437
&.high,
2439
&:not(.empty) {
2440
background-color: $selected_bg_color;
2441
}
2442
&.full {
2444
background-color: $success_color;
2445
}
2446
&.empty {
2448
background-color: $track_color;
2449
color: $insensitive_fg_color;
2450
}
2451
}
2452
}
2453
/****************
2456
* Print dialog *
2457
*****************/
2458
printdialog {
2459
paper {
2460
padding: 0;
2461
border: 1px solid $borders_color;
2462
background: $base_color;
2463
color: $fg_color;
2464
}
2465
.dialog-action-box { margin: 12px; }
2467
}
2468
/**********
2471
* Frames *
2472
**********/
2473
frame > border,
2474
.frame {
2475
margin: 0;
2476
padding: 0;
2477
border: 1px solid $borders_color;
2478
border-radius: 0;
2479
box-shadow: none;
2480
&.flat { border-style: none; }
2482
}
2483
actionbar > revealer > box {
2485
padding: $container_padding;
2486
border-top: 1px solid $borders_color;
2487
}
2488
scrolledwindow {
2490
viewport.frame { // avoid double borders when viewport inside scrolled window
2491
border-style: none;
2492
}
2493
// This is used when content is touch-dragged past boundaries.
2495
// draws a box on top of the content, the size changes programmatically.
2496
@at-root overshoot {
2497
&.top { @include overshoot(top); }
2498
&.bottom { @include overshoot(bottom); }
2500
&.left { @include overshoot(left); }
2502
&.right { @include overshoot(right); }
2504
}
2505
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2507
@at-root undershoot {
2508
&.top { @include undershoot(top); }
2509
&.bottom { @include undershoot(bottom); }
2511
&.left { @include undershoot(left); }
2513
&.right { @include undershoot(right); }
2515
}
2516
@at-root junction { // the small square between two scrollbars
2518
border-style: solid none none solid;
2519
border-width: 1px;
2520
border-color: $borders_color;
2521
background-color: $base_color;
2522
&:dir(rtl) { border-style: solid solid none none; }
2524
}
2525
}
2526
//vbox and hbox separators
2528
separator {
2529
min-width: 1px;
2530
min-height: 1px;
2531
background: $borders_color;
2532
}
2533
/*********
2536
* Lists *
2537
*********/
2538
list {
2539
border-color: $borders_color;
2540
background-color: $base_color;
2541
row { padding: 2px; }
2543
}
2544
row {
2546
transition: $material_transition;
2547
&:hover { transition: none; }
2549
&.activatable {
2551
background-image: radial-gradient(circle farthest-corner at center,
2552
gtkalpha(currentColor, 0) 100%,
2553
transparent 0%),
2554
image(gtkalpha(currentColor, 0));
2555
&:hover {
2557
background-image: radial-gradient(circle farthest-corner at center,
2558
gtkalpha(currentColor, 0) 100%,
2559
transparent 0%),
2560
image(gtkalpha(currentColor, 0.05));
2561
}
2562
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2564
&:active {
2565
transition: $material_transition, background-image 0;
2566
animation: row_ripple_effect $material_slower $material_ease_out forwards;
2567
}
2568
}
2569
&:selected { @extend %selected_items; }
2571
}
2572
/*********************
2575
* App Notifications *
2576
*********************/
2577
.app-notification,
2578
.app-notification.frame {
2579
@extend %osd;
2580
@extend toolbar.osd;
2582
margin: 8px;
2584
border { border: none; }
2586
}
2587
/*************
2590
* Expanders *
2591
*************/
2592
expander {
2593
arrow {
2594
transition: all $material_faster $material_ease;
2595
min-width: 16px;
2596
min-height: 16px;
2597
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2598
-gtk-icon-transform: rotate(-90deg);
2599
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2601
&:checked { -gtk-icon-transform: unset; }
2603
color: $secondary_fg_color;
2605
&:hover, &:active { color: $fg_color; }
2607
&:disabled { color: $insensitive_secondary_fg_color; }
2609
&:selected {
2611
color: $secondary_selected_fg_color;
2612
&:hover, &:active { color: $selected_fg_color; }
2614
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2616
}
2617
}
2618
}
2619
/************
2622
* Calendar *
2623
***********/
2624
calendar {
2625
padding: 1px;
2626
border: 1px solid $borders_color;
2627
color: $fg_color;
2628
&:disabled { color: $insensitive_fg_color; }
2630
&:selected {
2632
@extend %selected_items;
2633
border-radius: 2px + 1px;
2635
}
2636
&.header {
2638
border-style: none none solid;
2639
border-radius: 0;
2640
}
2641
&.button { @extend %button_basic.flat; }
2643
&.highlight {
2645
color: gtkalpha(currentColor, $hint_opacity);
2646
font-weight: 500;
2647
}
2648
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2650
}
2651
/***********
2654
* Dialogs *
2655
***********/
2656
messagedialog { // Message Dialog styling
2657
&.background { background-color: $light_color; }
2658
.titlebar {
2660
min-height: $small_size;
2661
border-style: none;
2662
box-shadow: inset 0 1px $highlight_color;
2663
background-color: $light_color;
2664
}
2665
&.csd { // rounded bottom border styling for csd version
2667
&.background {
2668
// bigger radius for better antialiasing
2669
border-bottom-left-radius: 2px;
2670
border-bottom-right-radius: 2px;
2671
}
2672
.dialog-action-area button {
2674
padding: 8px 16px;
2675
border-top: 1px solid $borders_color;
2676
border-radius: 0;
2677
@extend %button_basic.flat;
2679
&:first-child{ border-bottom-left-radius: 2px; }
2681
&:last-child { border-bottom-right-radius: 2px; }
2683
}
2684
}
2685
}
2686
filechooser {
2688
.dialog-action-box { border-top: 1px solid $borders_color; }
2689
#pathbarbox { border-bottom: 1px solid $borders_color; }
2691
}
2692
filechooserbutton:drop(active) {
2694
box-shadow: none;
2695
}
2696
/***********
2699
* Sidebar *
2700
***********/
2701
.sidebar {
2702
border-style: none;
2703
background-color: $light_color;
2704
@at-root %sidebar_left,
2706
&:dir(ltr),
2707
&.left,
2708
&.left:dir(rtl) {
2709
border-right: 1px solid $borders_color;
2710
border-left-style: none;
2711
}
2712
@at-root %sidebar_right
2714
&:dir(rtl),
2715
&.right {
2716
border-left: 1px solid $borders_color;
2717
border-right-style: none;
2718
}
2719
list { background-color: transparent; }
2721
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2723
}
2724
stacksidebar {
2726
&.sidebar {
2727
&:dir(ltr),
2728
&.left,
2729
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2730
&:dir(rtl),
2732
&.right { list { @extend %sidebar_right; }}
2733
}
2734
row {
2736
padding: 10px 4px;
2737
> label {
2739
padding-left: 6px;
2740
padding-right: 6px;
2741
}
2742
&.needs-attention > label { @extend %needs_attention; }
2744
}
2745
}
2746
/****************
2749
* File chooser *
2750
****************/
2751
placessidebar {
2752
> viewport.frame { border-style: none; }
2753
list { padding: (4px - 3px) 0 4px; }
2755
row {
2757
// Needs overriding of the GtkListBoxRow padding
2758
min-height: 32px;
2759
margin: -1px 0; // Remove unknown margins
2760
padding: 0;
2761
// Using margins/padding directly in the SidebarRow
2763
// will make the animation of the new bookmark row jump
2764
> revealer { padding: 0 12px; }
2765
&:selected { color: $selected_fg_color; }
2767
&:disabled { color: $insensitive_fg_color; }
2769
image.sidebar-icon {
2771
opacity: $hint_opacity; // dim the device icons
2772
&:dir(ltr) { padding-right: 8px; }
2774
&:dir(rtl) { padding-left: 8px; }
2775
}
2776
label.sidebar-label {
2778
&:dir(ltr) { padding-right: 2px; }
2779
&:dir(rtl) { padding-left: 2px; }
2780
}
2781
@at-root button.sidebar-button {
2783
@extend %button_basic.flat;
2784
min-height: $small_size;
2786
min-width: $small_size;
2787
margin-top: 0;
2788
margin-bottom: 0;
2789
padding: 0;
2790
border-radius: 100%;
2791
-gtk-outline-radius: 100%;
2792
row:selected & { @extend %button_selected.flat; }
2794
}
2795
&.sidebar-placeholder-row {
2797
min-height: 2px;
2798
padding: 0 8px;
2799
background-image: image($accent_bg_color);
2800
background-clip: content-box;
2801
}
2802
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2804
&:drop(active):not(:disabled) {
2806
box-shadow: inset 0 0 0 2px $accent_bg_color;
2807
&:selected {
2809
// background-color: $accent_bg_color;
2810
// color: $selected_fg_color;
2811
}
2812
}
2813
}
2814
}
2815
placesview {
2817
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2818
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2820
// this selects the "connect to server" label
2822
> actionbar > revealer > box > label {
2823
padding-left: 8px;
2824
padding-right: 8px;
2825
}
2826
}
2827
/*********
2830
* Paned *
2831
*********/
2832
paned {
2833
> separator {
2834
min-width: 1px;
2835
min-height: 1px;
2836
-gtk-icon-source: none; // defeats the ugly default handle decoration
2837
border-style: none; // just to be sure
2838
background-color: transparent;
2839
// workaround, using background istead of a border since the border will get rendered twice (?)
2840
background-image: image($borders_color);
2841
background-size: 1px 1px;
2842
&.wide {
2844
min-width: 6px;
2845
min-height: 6px;
2846
background-color: $bg_color;
2847
background-image: image($borders_color), image($borders_color);
2848
background-size: 1px 1px, 1px 1px;
2849
}
2850
}
2851
&.horizontal > separator {
2853
background-repeat: repeat-y;
2854
&:dir(ltr) {
2856
margin: 0 -8px 0 0;
2857
padding: 0 8px 0 0;
2858
background-position: left;
2859
}
2860
&:dir(rtl) {
2862
margin: 0 0 0 -8px;
2863
padding: 0 0 0 8px;
2864
background-position: right;
2865
}
2866
&.wide {
2868
margin: 0;
2869
padding: 0;
2870
background-repeat: repeat-y, repeat-y;
2871
background-position: left, right;
2872
}
2873
}
2874
&.vertical > separator {
2876
margin: 0 0 -8px 0;
2877
padding: 0 0 8px 0;
2878
background-repeat: repeat-x;
2879
background-position: top;
2880
&.wide {
2882
margin: 0;
2883
padding: 0;
2884
background-repeat: repeat-x, repeat-x;
2885
background-position: bottom, top;
2886
}
2887
}
2888
}
2889
/**************
2892
* GtkInfoBar *
2893
**************/
2894
infobar {
2895
border-style: none;
2896
&.info { background-color: $info_bg_color; }
2898
&.question { background-color: $question_bg_color; }
2900
&.warning { background-color: $warning_bg_color; }
2902
&.error { background-color: $error_bg_color; }
2904
&.info,
2906
&.question,
2907
&.warning,
2908
&.error {
2909
> label, & { color: $selected_fg_color; }
2910
button { @extend %button_selected; }
2912
selection { }
2914
*:link { @extend %link_selected; }
2916
}
2917
}
2918
/************
2921
* Tooltips *
2922
************/
2923
tooltip {
2924
&.background {
2925
// background-color needs to be set this way otherwise it gets drawn twice
2926
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2927
background-color: scale-alpha($base_color, $higher_opacity);
2928
}
2929
// @extend %osd;
2931
// padding: 4px; /* not working */
2933
border-radius: 2px;
2934
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2935
// FIXME: we need a border or tooltips vanish on black background.
2937
decoration { background-color: transparent; }
2938
label {
2940
// tooltip label has already 6px margins
2941
min-height: 32px - 6px * 2;
2942
padding: 0 8px - 6px;
2943
}
2944
* { // Yeah this is ugly
2946
padding: 0;
2947
background-color: transparent;
2948
color: inherit;
2949
}
2950
}
2951
/*****************
2954
* Color Chooser *
2955
*****************/
2956
colorswatch {
2957
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2958
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2959
// applied to the overlay box.
2960
// base color corners rounding
2962
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2963
// sports a bigger radius.
2964
// nth-child is needed by the custom color strip.
2965
&.top {
2967
border-top-left-radius: $material_radius + 0.5px;
2968
border-top-right-radius: $material_radius + 0.5px;
2969
overlay {
2971
border-top-left-radius: $material_radius;
2972
border-top-right-radius: $material_radius;
2973
}
2974
}
2975
&.bottom {
2977
border-bottom-left-radius: $material_radius + 0.5px;
2978
border-bottom-right-radius: $material_radius + 0.5px;
2979
overlay {
2981
border-bottom-left-radius: $material_radius;
2982
border-bottom-right-radius: $material_radius;
2983
}
2984
}
2985
&.left,
2987
&:first-child:not(.top) {
2988
border-top-left-radius: $material_radius + 0.5px;
2989
border-bottom-left-radius: $material_radius + 0.5px;
2990
overlay {
2992
border-top-left-radius: $material_radius;
2993
border-bottom-left-radius: $material_radius;
2994
}
2995
}
2996
&.right,
2998
&:last-child:not(.bottom) {
2999
border-top-right-radius: $material_radius + 0.5px;
3000
border-bottom-right-radius: $material_radius + 0.5px;
3001
overlay {
3003
border-top-right-radius: $material_radius;
3004
border-bottom-right-radius: $material_radius;
3005
}
3006
}
3007
&.dark overlay { color: white; }
3009
&.light overlay { color: scale-alpha(black, 0.8); }
3011
&.dark { color: white; } // for focus ring
3013
&.light { color: scale-alpha(black, 0.8); } // for focus ring
3015
&:drop(active) {
3017
box-shadow: none;
3018
&.light overlay {
3020
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3021
}
3022
&.dark overlay {
3024
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3025
}
3026
}
3027
overlay {
3029
transition: $shadow_transition;
3030
box-shadow: $z-depth-1;
3031
&:hover { box-shadow: $z-depth-2; }
3033
}
3034
&#add-color-button {
3036
border-radius: $material_radius $material_radius 0 0;
3037
color: white; // for focus ring
3038
&:only-child { border-radius: $material_radius; }
3040
overlay {
3042
background-image: linear-gradient(to right,
3043
$error_bg_color 25%,
3044
$warning_bg_color 25%, $warning_bg_color 50%,
3045
$info_bg_color 50%, $info_bg_color 75%,
3046
$question_bg_color 75%);
3047
color: white;
3048
}
3049
}
3050
&:disabled {
3052
opacity: $disabled_opacity;
3053
overlay { box-shadow: none; }
3055
}
3056
row:selected & {
3058
}
3059
&#editor-color-sample {
3061
border-radius: $material_radius + 0.5px;
3062
overlay { border-radius: $material_radius; }
3064
// overlay:hover { box-shadow: $z-depth-1; }
3066
}
3067
}
3068
// colorscale popup
3070
colorchooser .popover.osd {
3071
transition: $shadow_transition;
3072
border-radius: 2px;
3073
box-shadow: $z-depth-2;
3074
background-color: $base_color;
3075
&:backdrop { box-shadow: $z-depth-1; }
3077
spinbutton:not(.vertical) { @extend %entry.flat; }
3079
}
3080
/********
3083
* Misc *
3084
********/
3085
//content view (grid/list)
3086
.content-view {
3087
background-color: $bg_color;
3088
// &:hover { -gtk-icon-effect: highlight; }
3090
rubberband { @extend rubberband; }
3092
}
3093
.scale-popup {
3095
.osd & { @extend %osd; }
3096
.osd & button.flat { //FIXME: quick hack, redo properly
3098
}
3099
button { // +/- buttons on GtkVolumeButton popup
3101
}
3102
}
3103
/**********************
3106
* Window Decorations *
3107
*********************/
3108
decoration {
3109
transition: $shadow_transition;
3110
border-radius: 2px 2px 0 0;
3111
box-shadow: $z-depth-4, 0 16px 16px transparent;
3112
// FIXME rationalize shadows
3114
// this is used for the resize cursor area
3116
margin: 8px;
3117
&:backdrop {
3119
// the transparent shadow here is to enforce that the shadow extents don't
3120
// change when we go to backdrop, to prevent jumping windows.
3121
// The biggest shadow should be in the same order then in the active state
3122
// or the jumping will happen during the transition.
3123
box-shadow: $z-depth-2, 0 16px 16px transparent;
3124
}
3125
.maximized &,
3127
.fullscreen &,
3128
.tiled & { border-radius: 0; }
3129
.popup & { box-shadow: none; }
3131
// server-side decorations as used by mutter
3133
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3134
.csd.popup & {
3136
border-radius: 2px;
3137
box-shadow: $z-depth-2;
3138
}
3139
tooltip.csd & {
3141
border-radius: 2px;
3142
box-shadow: $z-depth-2;
3143
}
3144
messagedialog.csd & {
3146
border-radius: 2px;
3147
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3148
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3150
}
3151
.solid-csd & {
3153
margin: 0;
3154
padding: 4px;
3155
// border: solid 1px $borders_color;
3156
border-radius: 0;
3157
box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $secondary_highlight_color;
3158
background-color: $borders_color;
3159
}
3160
}
3161
// Window Close button
3163
button.titlebutton {
3164
// @extend %button_basic.flat;
3165
@extend %button_basic.image-button;
3167
.selection-mode & {
3169
}
3170
}
3171
// catch all extend :)
3174
%selected_items {
3176
background-color: $selected_bg_color;
3177
@at-root %nobg_selected_items, & {
3179
color: $selected_fg_color;
3180
&:disabled { color: $insensitive_selected_fg_color; }
3182
}
3183
}
3184
.monospace { font-family: monospace; }
3186
/**********************
3189
* Touch Copy & Paste *
3190
*********************/
3191
//touch selection handlebars for the Popover.osd above
3192
cursor-handle {
3193
border-radius: 100px;
3194
background-color: $accent_bg_color;
3195
background-image: none;
3196
&.top:dir(ltr), &.bottom:dir(rtl) {
3198
padding-left: 6px;
3199
border-top-right-radius: 0;
3200
}
3201
&.bottom:dir(ltr), &.top:dir(rtl) {
3203
padding-right: 6px;
3204
border-top-left-radius: 0;
3205
}
3206
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3208
-GtkWidget-text-handle-width: 24;
3209
-GtkWidget-text-handle-height: 30;
3210
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3212
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3213
url('#{$_url}@2.png'));
3214
}
3215
}
3216
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3218
button.circular { // FIXME: aggregate to buttons
3220
border-radius: 100px;
3221
-gtk-outline-radius: 100px;
3222
label { padding: 0; }
3224
}
3225
// shortcut window keys
3227
.keycap {
3228
min-width: 28px - 8px * 2;
3229
min-height: 28px - 2px;
3230
margin-top: 2px;
3231
padding-bottom: 2px;
3232
padding-left: 8px;
3233
padding-right: 8px;
3234
border: solid 1px $borders_color;
3236
border-radius: 2px + 1px;
3237
box-shadow: inset 0 -2px $borders_color;
3238
background-color: $base_color;
3239
color: $fg_color;
3240
font-size: smaller;
3241
}
3242
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3244
transition: $material_transition;
3245
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3246
caret-color: $accent_bg_color;
3247
}
3248
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3250
stackswitcher button.circular,
3252
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3253
min-width: $medium_size;
3254
min-height: $medium_size;
3255
padding: 0;
3256
}
3257