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 %simple_flat_button;
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) > & { @extend %linked; }
329
// Vertically linked entries
331
.linked.vertical > & { @extend %linked_vertical; }
332
.linked:not(.vertical) > &.flat,
334
.linked.vertical > &.flat { border-radius: 0; }
335
}
336
treeview entry {
338
&.flat, & {
339
min-height: 0;
340
padding: 2px;
341
border-radius: 0;
342
background-color: $base_color;
343
&, &:focus {
345
border-image: none;
346
box-shadow: none;
347
}
348
}
349
}
350
/***********
353
* Buttons *
354
***********/
355
// stuff for .needs-attention
356
@keyframes needs_attention {
357
from {
358
background-image: -gtk-gradient(radial,
359
center center, 0,
360
center center, 0.001,
361
to($accent_bg_color),
362
to(transparent));
363
}
364
to {
366
background-image: -gtk-gradient(radial,
367
center center, 0,
368
center center, 0.5,
369
to($accent_bg_color),
370
to(transparent));
371
}
372
}
373
%button,
375
button {
376
@at-root %button_basic, & {
377
min-height: 24px;
378
min-width: 16px;
379
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
380
border-radius: 2px;
381
font-weight: 500;
382
@include button(normal);
384
&:hover { @include button(hover); }
386
&:active { @include button(active); }
388
&:disabled { @include button(insensitive); }
390
&:checked { @include button(checked); }
392
&:checked:disabled { @include button(checked-insensitive); }
394
@at-root %flat_button, &.flat {
396
@at-root %simple_flat_button, & {
397
@include button(flat-normal);
398
&:hover { @include button(flat-hover); }
400
&:active { @include button(flat-active); }
402
&:disabled { @include button(flat-insensitive); }
404
}
405
&:checked { @include button(flat-checked); }
407
&:checked:disabled { @include button(flat-checked-insensitive); }
409
}
410
&.image-button {
412
min-width: 24px;
413
padding: ($medium_size - 24px) / 2;
414
-gtk-outline-radius: 100px;
415
border-radius: 100px;
416
}
417
&.text-button {
419
padding-left: 16px;
420
padding-right: 16px;
421
}
422
&.text-button.image-button {
424
padding-left: ($medium_size - 16px) / 2;
425
padding-right: ($medium_size - 16px) / 2;
426
-gtk-outline-radius: 2px;
427
border-radius: 2px;
428
label {
430
&:last-child { padding-left: 2px; padding-right: 16px - ($medium_size - 16px) / 2; }
431
&:first-child { padding-left: 16px - ($medium_size - 16px) / 2; padding-right: 2px; }
432
}
433
}
434
.linked > & { @extend %linked; }
436
.linked.vertical > & { @extend %linked_vertical; }
438
.linked > &.flat,
440
.linked.vertical > &.flat {
441
border-radius: 2px;
442
&.image-button {
444
-gtk-outline-radius: 100px;
445
border-radius: 100px;
446
}
447
&.text-button.image-button {
449
-gtk-outline-radius: 2px;
450
border-radius: 2px;
451
}
452
}
453
&:drop(active) {
455
// box-shadow: inset 0 0 0 2px $accent_bg_color;
456
}
457
}
458
@at-root %button_selected, row:selected & {
460
&:disabled { color: $insensitive_secondary_selected_fg_color; }
461
}
462
// big standalone buttons like in Documents pager
464
&.osd {
465
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
466
&.image-button { padding: ($large_size - 24px) / 2; }
468
&:disabled { opacity: 0; }
470
}
471
//overlay / OSD style
473
@at-root %osd_button,
474
.osd & {
475
}
476
// Suggested and Destructive Action buttons
478
@each $b_type, $b_color in (suggested-action, $suggested_color),
479
(destructive-action, $destructive_color) {
480
&.#{$b_type} {
481
background-color: $b_color;
482
color: $selected_fg_color;
483
// @include button(normal, $b_color, white);
485
// &:hover { @include button(hover, $b_color, white); }
487
// &:active, &:checked { @include button(active, $b_color, white); }
489
&:disabled { @include button(insensitive, $b_color, white); }
491
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
493
&.flat {
495
background-color: transparent;
496
color: $b_color;
497
// @include button(flat-normal, $b_color, white);
499
// &:hover { @include button(flat-hover, $b_color, white); }
501
// &:active, &:checked { @include button(flat-active, $b_color, white); }
503
&:disabled { @include button(flat-insensitive, $b_color, white); }
505
}
506
.osd & {
508
}
509
}
510
}
511
.stack-switcher > & {
513
// to position the needs attention dot, padding is added to the button
514
// child, a label needs just lateral padding while an icon needs vertical
515
// padding added too.
516
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
518
> label {
520
padding-left: 6px; // label padding
521
padding-right: 6px; //
522
}
523
> image {
525
padding-left: 6px; // image padding
526
padding-right: 6px; //
527
padding-top: 3px; //
528
padding-bottom: 3px; //
529
}
530
&.text-button {
532
// compensate text-button paddings
533
padding-left: 16px - 6px;
534
padding-right: 16px - 6px;
535
}
536
&.image-button {
538
// we want image buttons to have a 1:1 aspect ratio, so compensation
539
// of the padding added to the GtkImage is needed
540
padding-left: ($medium_size - 16px) / 2 - 6px;
541
padding-right: ($medium_size - 16px) / 2 - 6px;
542
}
543
&.needs-attention {
545
> label,
546
> image { @extend %needs_attention; }
547
&:checked {
549
> label,
550
> image {
551
animation: none;
552
background-image: none;
553
}
554
}
555
}
556
}
557
// hide separators
559
separator {
560
min-width: 0;
561
min-height: 0;
562
background: transparent;
563
}
564
// &.font,
566
// &.file { separator { background-color: transparent; }}
567
// &.font { > box > box > label { font-weight: bold; }}
569
// inline-toolbar buttons
571
.inline-toolbar & {
572
@extend %button_basic.flat;
573
&:not(.text-button) { @extend %circular_button; }
575
}
576
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
578
}
579
%needs_attention {
581
animation: needs_attention $material_slower $material_ease_out forwards;
582
background-repeat: no-repeat;
583
background-position: right 3px;
584
background-size: 6px 6px;
585
&:dir(rtl) { background-position: left 3px; }
587
}
588
// all the following is for the +|- buttons on inline toolbars, that way
590
// should really be deprecated...
591
.inline-toolbar toolbutton > button { // redefining the button look is
592
// needed since those are flat...
593
}
594
// More inline toolbar buttons
596
toolbar.inline-toolbar toolbutton {
597
// > button.flat { @extend %linked_middle; }
598
// &:first-child > button.flat { @extend %linked:first-child; }
600
// &:last-child > button.flat { @extend %linked:last-child; }
602
// &:only-child > button.flat { @extend %linked:only-child; }
604
}
605
%linked_middle {
607
-gtk-outline-radius: 2px;
608
border-radius: 0;
609
}
610
%linked {
612
@extend %linked_middle;
613
&:first-child {
615
border-top-left-radius: 2px;
616
border-bottom-left-radius: 2px;
617
}
618
&:last-child {
620
border-top-right-radius: 2px;
621
border-bottom-right-radius: 2px;
622
}
623
&:only-child {
625
border-radius: 2px;
626
}
627
}
628
%linked_vertical_middle {
630
-gtk-outline-radius: 2px;
631
border-radius: 0;
632
}
633
%linked_vertical{
635
@extend %linked_vertical_middle;
636
&:first-child {
638
border-top-left-radius: 2px;
639
border-top-right-radius: 2px;
640
}
641
&:last-child {
643
border-bottom-left-radius: 2px;
644
border-bottom-right-radius: 2px;
645
}
646
&:only-child {
648
border-radius: 2px;
649
}
650
}
651
/* menu buttons */
653
modelbutton.flat,
654
.menuitem.button.flat {
655
min-height: $menuitem_size;
656
padding-left: 8px;
657
padding-right: 8px;
658
border-radius: 2px;
659
color: inherit;
660
@extend %simple_flat_button;
662
&:selected { @extend %selected_items; }
664
check,
666
radio {
667
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
668
&, &:hover { background-image: none; }
670
&:active { animation: none; }
672
&:last-child { margin-left: -8px; margin-right: -16px; }
674
&:first-child { margin-left: -16px; margin-right: -8px; }
676
}
677
check:not(:indeterminate):checked { @extend %check_checked; }
679
// radio:not(:indeterminate):checked { @extend %radio_checked; }
681
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
683
}
684
modelbutton.flat arrow {
686
background: none;
687
&:hover { background: none; }
689
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
691
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
693
}
694
button.color {
696
min-height: $small_size;
697
min-width: $small_size;
698
padding: $container_padding;
699
colorswatch:only-child {
701
// &, overlay { border-radius: 0; }
702
}
703
}
704
/*********
707
* Links *
708
*********/
709
*:link {
710
&, &:hover, &:active { color: $link_color; }
711
&:visited {
713
&, &:hover, &:active { color: $link_visited_color; }
714
}
715
@at-root %link_selected,
717
&:selected,
718
*:selected & { color: $selected_fg_color; }
719
}
720
button:link,
722
button:visited {
723
@extend *:link;
724
> label { text-decoration-line: underline; }
726
}
727
/*****************
729
* GtkSpinButton *
730
*****************/
731
spinbutton {
732
&:not(.vertical) {
733
// in this horizontal configuration, the whole spinbutton
734
// behaves as the entry, so we extend the entry styling
735
// and nuke the style on the internal entry
736
@extend %entry;
737
padding: 0;
739
%spinbutton_entry,
741
entry {
742
min-width: $large_size - 8px * 2;
743
// reset all the other props since the spinbutton node is styled here
744
margin: 0;
745
border-image: none;
746
border-radius: 0;
747
box-shadow: none;
748
background-color: transparent;
749
}
750
button {
752
// margin: $container_padding;
753
border: solid $container_padding transparent;
754
@extend %simple_flat_button;
756
@extend %small_button;
758
&.up:dir(ltr),
760
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
761
&.up:dir(rtl),
763
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
764
}
765
}
766
// OSD horizontal
768
.osd &:not(.vertical) {
769
button {
770
}
771
}
772
// Vertical
774
&.vertical {
775
// in the vertical configuration, we treat the spinbutton
776
// as a box, and tweak the style of the entry in the middle
777
// so that it's linked
778
// FIXME: this should not be set at all, but otherwise it gets the wrong
780
// color
781
&:disabled { color: $insensitive_fg_color; }
782
&:drop(active) {
784
box-shadow: none;
785
}
786
entry {
788
min-height: $medium_size;
789
min-width: $large_size;
790
padding: 0;
791
}
792
button {
794
min-height: $medium_size;
795
min-width: $large_size;
796
padding: 0;
797
@extend %simple_flat_button;
799
&.up { border-radius: 2px 2px 0 0; }
801
&.down { border-radius: 0 0 2px 2px; }
803
}
804
}
805
// OSD vertical
807
.osd &.vertical button:first-child {
808
}
809
// Misc
811
treeview &:not(.vertical) {
812
min-height: 0;
813
border-style: none;
814
border-radius: 0;
815
entry {
817
min-height: 0;
818
padding: 1px 2px;
819
}
820
}
821
}
822
/**************
825
* ComboBoxes *
826
**************/
827
combobox {
828
arrow {
829
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
830
min-height: 16px;
831
min-width: 16px;
832
}
833
menu,
835
.menu,
836
.context-menu {
837
padding: 2px 0;
838
menuitem {
840
min-height: $medium_size;
841
padding: 0 ($medium_size - 16px) / 2;
842
}
843
}
844
&.linked {
846
button:nth-child(2) {
847
&:dir(ltr) { @extend %linked:last-child; }
848
&:dir(rtl) { @extend %linked:first-child; }
849
}
850
}
851
&:drop(active) { // FIXME: untested
853
box-shadow: none;
854
// button.combo { @extend %button_basic:drop(active); }
856
}
857
}
858
.linked > combobox > box > button.combo {
860
// the combo is a composite widget so the way we do button linking doesn't
861
// work, special case needed. See
862
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
863
&:dir(ltr),
865
&:dir(rtl) { @extend %linked_middle; } // specificity bump
866
}
867
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
869
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
870
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
871
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
873
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
874
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
875
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
876
/************
879
* Toolbars *
880
************/
881
toolbar {
882
-GtkWidget-window-dragging: true;
883
padding: $container_padding / 2;
884
background-color: $bg_color;
885
// on OSD
887
.osd & { background-color: transparent; }
888
// stand-alone OSD toolbars
890
&.osd {
891
transition: $shadow_transition;
892
padding: $container_padding;
893
border-radius: 2px;
894
box-shadow: $z-depth-2;
895
background-color: $base_color;
896
&:backdrop { box-shadow: $z-depth-1; }
898
&.left,
900
&.right,
901
&.top,
902
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
903
button { @extend %button_basic.flat; }
905
}
906
// toolbar separators
908
&.horizontal separator { margin: $container_padding / 2; }
909
&.vertical separator { margin: $container_padding / 2; }
910
&:not(.inline-toolbar):not(.osd) {
912
scale,
913
entry,
914
spinbutton,
915
button { margin: $container_padding / 2; }
916
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
918
}
919
}
920
//searchbar, location-bar & inline-toolbar
922
.inline-toolbar {
923
padding: $container_padding;
924
border-style: solid;
925
border-width: 0 1px 1px;
926
border-color: $borders_color;
927
background-color: $secondary_base_color;
928
}
929
searchbar,
931
.location-bar {
932
padding: $container_padding;
933
border-style: solid;
934
border-width: 0 0 1px;
935
border-color: $borders_color;
936
background-color: $bg_color;
937
background-clip: border-box;
938
}
939
/***************
942
* Header bars *
943
***************/
944
%titlebar,
945
headerbar {
946
transition: background-color $material_faster $material_ease_out, color $material_faster $material_ease_out;
947
min-height: $large_size;
948
padding: 0 $container_padding;
949
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
950
background-color: $headerbar_color;
951
color: $selected_fg_color;
952
&:backdrop {
954
color: $secondary_selected_fg_color;
955
}
956
.title {
958
padding-left: 12px;
959
padding-right: 12px;
960
font-weight: bold;
961
}
962
.subtitle {
964
padding-left: 12px;
965
padding-right: 12px;
966
font-size: smaller;
967
@extend .dim-label;
969
}
970
button:not(.suggested-action):not(.destructive-action) {
972
@extend %button_basic.flat;
973
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
975
currentColor 0%,
976
transparent 0%)
977
0 0 0 / 0 0 0px;
978
&:checked {
980
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
981
currentColor 100%,
982
transparent 0%)
983
0 0 2 / 0 0 2px;
984
&, &:disabled { background-color: transparent; }
986
}
987
}
988
button.suggested-action, button.destructive-action {
990
&:disabled {
991
color: gtkalpha(currentColor, $disabled_opacity);
992
> label { color: inherit; }
994
}
995
}
996
&.selection-mode {
998
transition: background-color 0 $material_slower, color $material_faster $material_ease_out;
999
animation: header_ripple_effect $material_slower $material_ease_out;
1000
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1001
background-color: $selected_bg_color;
1002
color: $selected_fg_color;
1003
&:backdrop {
1005
color: $secondary_selected_fg_color;
1006
}
1007
.subtitle:link { @extend *:link:selected; }
1009
button:not(.suggested-action):not(.destructive-action) {
1011
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1012
currentColor 0%,
1013
transparent 0%)
1014
0 0 0 / 0 0 0px;
1015
color: currentColor;
1016
&:disabled {
1018
color: gtkalpha(currentColor, $disabled_opacity);
1019
> label { color: inherit; }
1021
}
1022
&:checked {
1024
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1025
currentColor 100%,
1026
transparent 0%)
1027
0 0 2 / 0 0 2px;
1028
color: currentColor;
1029
&:disabled {
1031
color: gtkalpha(currentColor, $disabled_opacity);
1032
> label { color: inherit; }
1034
}
1035
}
1036
}
1037
.selection-menu {
1039
padding-left: 16px;
1040
padding-right: 16px;
1041
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1043
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1045
}
1046
}
1047
.fullscreen &,
1049
.tiled &,
1050
.maximized & {
1051
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1052
box-shadow: $z-depth-1;
1053
}
1054
&.default-decoration {
1056
min-height: $small_size;
1057
padding: $container_padding;
1058
border-width: 0;
1059
button.titlebutton {
1061
min-height: $small_size;
1062
min-width: $small_size;
1063
margin: 0;
1064
padding: 0;
1065
&:active { // add fallback
1067
background-image: radial-gradient(circle farthest-corner at center,
1068
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1069
transparent 0%),
1070
image(gtkalpha(currentColor, $lower_opacity / 2));
1071
}
1072
}
1073
}
1074
.solid-csd & {
1076
&:dir(rtl), &:dir(ltr) { // specificity bump
1077
margin-left: -1px;
1078
margin-right: -1px;
1079
margin-top: -1px;
1080
border-radius: 0;
1081
box-shadow: none;
1082
}
1083
}
1084
}
1085
headerbar {
1087
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1088
entry,
1089
spinbutton,
1090
// separator,
1091
button {
1092
margin-top: $container_padding;
1093
margin-bottom: $container_padding;
1094
}
1095
switch {
1097
margin-top: $container_padding * 2;
1098
margin-bottom: $container_padding * 2;
1099
}
1100
}
1101
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1103
border-top-left-radius: 2px;
1104
border-top-right-radius: 2px;
1105
}
1106
headerbar {
1108
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1109
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1110
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1112
}
1113
.titlebar:not(headerbar) {
1115
window.csd > & {
1116
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1117
padding: 0;
1118
background-color: transparent;
1119
background-image: none;
1120
border-style: none;
1121
box-shadow: none;
1122
}
1123
> separator {
1125
background-color: $headerbar_color;
1126
background-image: image($borders_color);
1127
}
1128
@extend %titlebar;
1130
}
1131
/************
1134
* Pathbars *
1135
************/
1136
.path-bar button {
1137
&.text-button, &.image-button, & {
1138
padding-left: 6px;
1139
padding-right: 6px;
1140
}
1141
&.text-button.image-button, & {
1143
// label:last-child { padding-left: 2px; padding-right: 8px; }
1144
// label:first-child { padding-left: 8px; padding-right: 2px; }
1145
}
1146
image {
1148
padding-left: ($medium_size - 16px) / 2 - 6px;
1149
padding-right: ($medium_size - 16px) / 2 - 6px;
1150
}
1151
&.slider-button {
1153
padding-left: 0;
1154
padding-right: 0;
1155
}
1156
:not(headerbar) & {
1158
@extend %flat_button;
1159
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1161
$selected_bg_color 0%,
1162
transparent 0%)
1163
0 0 0 / 0 0 0px;
1164
border-radius: 2px;
1165
&:checked {
1167
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1168
$selected_bg_color 100%,
1169
transparent 0%)
1170
0 0 2 / 0 0 2px;
1171
&, &:disabled { background-color: transparent; }
1173
}
1174
}
1175
}
1176
/**************
1179
* Tree Views *
1180
**************/
1181
treeview.view {
1182
@at-root * {
1183
-GtkTreeView-horizontal-separator: 4;
1184
-GtkTreeView-grid-line-width: 1;
1185
-GtkTreeView-grid-line-pattern: '';
1186
-GtkTreeView-tree-line-width: 1;
1187
-GtkTreeView-tree-line-pattern: '';
1188
-GtkTreeView-expander-size: 16;
1189
}
1190
border-left-color: $track_color; // this is actually the tree lines color,
1192
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1193
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1195
&:hover, &:active, &:selected { border-radius: 0; }
1197
&.separator {
1199
min-height: 1px + 2px * 2;
1200
color: $borders_color;
1201
}
1202
&:drop(active) {
1204
border-style: solid none;
1205
border-width: 1px;
1206
border-color: $accent_bg_color;
1207
&.after { border-top-style: none; }
1209
&.before { border-bottom-style: none; }
1211
}
1212
&.expander {
1214
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1215
-gtk-icon-transform: rotate(-90deg);
1216
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1218
&:checked { -gtk-icon-transform: unset; }
1220
color: $secondary_fg_color;
1222
&:hover, &:active { color: $fg_color; }
1224
&:disabled { color: $insensitive_secondary_fg_color; }
1226
&:selected {
1228
color: $secondary_selected_fg_color;
1229
&:hover, &:active { color: $selected_fg_color; }
1231
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1233
}
1234
}
1235
&.progressbar { // progress bar in treeviews
1237
border-style: none none solid;
1238
border-width: $bar_size;
1239
border-color: $selected_bg_color;
1240
background-color: transparent;
1241
background-image: none;
1242
&:selected { border-color: currentColor; }
1244
}
1245
&.trough { // progress bar trough in treeviews
1247
border-style: none none solid;
1248
border-width: $bar_size;
1249
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1250
background-color: transparent;
1251
background-image: none;
1252
&:selected { border-color: $track_color; }
1254
}
1255
header {
1257
button {
1258
@extend row.activatable;
1259
padding: 2px 6px;
1261
border-style: none solid solid none;
1262
border-width: 1px;
1263
border-color: $borders_color;
1264
border-radius: 0;
1265
background-clip: border-box;
1266
&, &:hover, &:active { box-shadow: none; }
1268
&, &:disabled { background-color: $base_color; }
1270
&:last-child { border-right-style: none; }
1272
}
1273
}
1274
button.dnd,
1276
header.button.dnd { // for treeview-like derive widgets
1277
padding: 2px 6px;
1278
border-style: none solid solid;
1279
border-width: 1px;
1280
border-color: $borders_color;
1281
border-radius: 0;
1282
box-shadow: none;
1283
background-color: $base_color;
1284
background-clip: border-box;
1285
color: $selected_bg_color;
1286
}
1287
acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
1289
}
1290
/*********
1293
* Menus *
1294
*********/
1295
menubar,
1296
.menubar {
1297
-GtkWidget-window-dragging: true;
1298
padding: 0;
1299
// box-shadow: inset 0 -1px $borders_color;
1300
background-color: $headerbar_color;
1301
> menuitem {
1303
transition: background-color $material_faster $material_ease_out;
1304
min-height: 20px;
1305
padding: 4px 8px;
1306
color: $secondary_selected_fg_color;
1307
&:hover { //Seems like it :hover even with keyboard focus
1309
transition: none;
1310
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1311
color: $selected_fg_color;
1312
}
1313
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1315
}
1316
}
1317
menu,
1319
.menu,
1320
.context-menu {
1321
margin: 4px 0;
1322
padding: 4px 0;
1323
background-color: $base_color;
1324
border: 1px solid $borders_color; // adds borders in a non composited env
1325
.csd & {
1327
border: none; // axes borders in a composited env
1328
border-radius: 2px;
1329
}
1330
menuitem {
1332
transition: background-color $material_faster $material_ease_out;
1333
min-height: 20px;
1334
min-width: 40px;
1335
padding: 4px 8px;
1336
font: initial;
1337
text-shadow: none;
1338
&:hover {
1340
transition: none;
1341
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1342
}
1343
&:disabled { color: $insensitive_fg_color; }
1345
// submenu indicators
1347
arrow {
1348
min-height: 16px;
1349
min-width: 16px;
1350
&:dir(ltr) {
1352
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1353
margin-left: 8px;
1354
}
1355
&:dir(rtl) {
1357
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1358
margin-right: 8px;
1359
}
1360
}
1361
// avoids labels color being overridden, see
1363
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1364
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1365
}
1366
// overflow arrows
1368
> arrow {
1369
min-height: 16px;
1370
min-width: 16px;
1371
padding: 4px;
1372
border-radius: 0;
1373
background-color: $base_color;
1374
color: $secondary_fg_color;
1375
&.top {
1377
margin-top: -4px;
1378
border-bottom: 1px solid $borders_color;
1379
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1380
}
1381
&.bottom {
1383
margin-bottom: -4px;
1384
border-top: 1px solid $borders_color;
1385
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1386
}
1387
&:hover {
1389
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1390
color: $fg_color;
1391
}
1392
&:disabled {
1394
border-color: transparent;
1395
background-color: transparent;
1396
color: transparent;
1397
// color: $insensitive_secondary_fg_color;
1398
}
1399
}
1400
separator { margin: 4px 0; }
1402
}
1403
menuitem {
1405
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1406
check,
1408
radio {
1409
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1410
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1411
}
1412
}
1413
.csd.popup { border-radius: 2px; }
1415
/***************
1418
* Popovers *
1419
***************/
1420
popover.background {
1421
transition: $shadow_transition;
1422
padding: 0;
1423
box-shadow: $z-depth-2;
1424
background-color: $light_color;
1425
&:backdrop { box-shadow: $z-depth-1; }
1427
&, .csd & {
1429
border-style: solid;
1430
border-width: 1px;
1431
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1432
border-radius: 2px + 1px;
1433
}
1434
> list,
1436
> .view,
1437
> toolbar {
1438
border-style: none;
1439
box-shadow: none;
1440
background-color: transparent;
1441
}
1442
&, .csd & {
1444
&.touch-selection,
1445
&.magnifier,
1446
&.osd { @extend %osd; }
1447
}
1448
// entry { @extend %entry.flat; }
1450
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1452
&.menu button.model {
1454
@extend %simple_flat_button;
1455
min-height: 32px;
1457
padding: 0 8px;
1458
border-radius: 2px;
1459
&:checked {
1461
background-color: $selected_bg_color;
1462
color: $selected_fg_color;
1463
}
1464
}
1465
separator { margin: 4px 0; }
1467
list separator { margin: 0; }
1469
}
1470
/*************
1472
* Notebooks *
1473
*************/
1474
notebook {
1475
> header {
1476
border-width: 1px;
1477
border-color: $borders_color;
1478
background-color: $bg_color;
1479
background-clip: border-box;
1480
&.top {
1482
border-bottom-style: solid;
1483
> tabs {
1484
margin-bottom: -1px;
1485
> tab {
1486
&:hover { box-shadow: inset 0 -2px $track_color; }
1488
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1490
}
1491
}
1492
}
1493
&.bottom {
1495
border-top-style: solid;
1496
> tabs {
1497
margin-top: -1px;
1498
> tab {
1499
&:hover { box-shadow: inset 0 2px $track_color; }
1501
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1503
}
1504
}
1505
}
1506
&.left {
1508
border-right-style: solid;
1509
> tabs {
1510
margin-right: -1px;
1511
> tab {
1512
&:hover { box-shadow: inset -2px 0 $track_color; }
1514
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1516
}
1517
}
1518
}
1519
&.right {
1521
border-left-style: solid;
1522
> tabs {
1523
margin-left: -1px;
1524
> tab {
1525
&:hover { box-shadow: inset 2px 0 $track_color; }
1527
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1529
}
1530
}
1531
}
1532
&.top > tabs > arrow {
1534
@extend %notebook_vert_arrows;
1535
border-top-style: none;
1537
}
1538
&.bottom > tabs > arrow {
1540
@extend %notebook_vert_arrows;
1541
border-bottom-style: none;
1543
}
1544
@at-root %notebook_vert_arrows {
1546
padding-left: 4px;
1547
padding-right: 4px;
1548
&.down {
1550
margin-left: -8px;
1551
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1552
}
1553
&.up {
1555
margin-right: -8px;
1556
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1557
}
1558
}
1559
&.left > tabs > arrow {
1561
@extend %notebook_horz_arrows;
1562
border-left-style: none;
1564
}
1565
&.right > tabs > arrow {
1567
@extend %notebook_horz_arrows;
1568
border-right-style: none;
1570
}
1571
@at-root %notebook_horz_arrows {
1573
padding-top: 4px;
1574
padding-bottom: 4px;
1575
&.down {
1577
margin-top: -8px;
1578
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1579
}
1580
&.up {
1582
margin-bottom: -8px;
1583
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1584
}
1585
}
1586
> tabs > arrow {
1588
@extend %simple_flat_button;
1589
min-height: 16px;
1591
min-width: 16px;
1592
border-radius: 0;
1593
}
1594
tab {
1596
transition: $material_transition;
1597
min-height: $small_size;
1598
min-width: $small_size;
1599
padding: $container_padding 12px;
1600
outline-offset: -6px;
1602
border-width: 1px; // for reorderable tabs
1604
border-color: transparent; //
1605
color: $secondary_fg_color;
1607
font-weight: 500;
1608
&:hover {
1610
color: $fg_color;
1611
&.reorderable-page {
1613
border-color: $borders_color;
1614
background-color: $secondary_base_color;
1615
}
1616
}
1617
&:disabled { color: $insensitive_secondary_fg_color; }
1619
&:checked {
1621
animation: tab_ripple_effect $material_slower * 3 $material_ease_out;
1622
color: $fg_color;
1623
&:disabled { color: $insensitive_fg_color; }
1625
&.reorderable-page {
1627
border-color: $borders_color;
1628
background-color: $base_color;
1629
}
1630
}
1631
// colors the button like the label, overridden otherwise
1633
button.flat {
1634
@extend %small_button;
1635
&:last-child {
1637
margin-left: $container_padding;
1638
margin-right: $container_padding - 12px;
1639
}
1640
&:first-child {
1642
margin-left: $container_padding - 12px;
1643
margin-right: $container_padding;
1644
}
1645
}
1646
}
1647
&.top,
1649
&.bottom {
1650
tabs {
1651
padding-left: 8px;
1652
padding-right: 8px;
1653
&:not(:only-child) {
1655
&:first-child { margin-left: 0; }
1656
&:last-child { margin-right: 0; }
1657
}
1658
tab {
1660
&.reorderable-page {
1661
margin: 0 -1px;
1662
border-style: none solid;
1663
}
1664
}
1665
}
1666
}
1667
&.left,
1669
&.right {
1670
tabs {
1671
padding-top: 8px;
1672
padding-bottom: 8px;
1673
&:not(:only-child) {
1675
&:first-child { margin-top: 0; }
1676
&:last-child { margin-bottom: 0; }
1677
}
1678
tab {
1680
&.reorderable-page {
1681
margin: -1px 0;
1682
border-style: solid none;
1683
}
1684
}
1685
}
1686
}
1687
}
1688
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1690
background-color: $base_color;
1691
entry,
1693
spinbutton:not(.vertical) { @extend %entry.flat; }
1694
revealer entry,
1696
revealer spinbutton:not(.vertical) { @extend %entry; }
1697
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1699
}
1700
}
1701
/**************
1704
* Scrollbars *
1705
**************/
1706
scrollbar {
1707
$_slider_min_length: 24px;
1708
// disable steppers
1710
@at-root * {
1711
-GtkScrollbar-has-backward-stepper: false;
1712
-GtkScrollbar-has-forward-stepper: false;
1713
}
1714
transition: $material_transition;
1716
background-color: $base_color;
1717
background-clip: $extra_background_clip;
1718
// scrollbar border
1720
&.top { border-bottom: 1px solid $borders_color; }
1721
&.bottom { border-top: 1px solid $borders_color; }
1722
&.left { border-right: 1px solid $borders_color; }
1723
&.right { border-left: 1px solid $borders_color; }
1724
// slider
1726
slider {
1727
transition: all $material_faster $material_ease_out, margin 0, border-width 0;
1728
min-width: 8px;
1729
min-height: 8px;
1730
border: 4px solid transparent;
1731
border-radius: 100px;
1732
background-clip: padding-box;
1733
background-color: $tertiary_fg_color;
1734
&:hover { background-color: $secondary_fg_color; }
1736
&:active { background-color: $fg_color; }
1738
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1740
}
1741
&.fine-tune {
1743
slider {
1744
transition: all $material_faster $material_ease_out, margin 0, border-width 0, min-width 0, min-height 0;
1745
min-width: 4px;
1746
min-height: 4px;
1747
}
1748
&.horizontal slider { margin: 2px 0; }
1750
&.vertical slider { margin: 0 2px; }
1752
}
1753
&.overlay-indicator {
1755
&:not(.dragging):not(.hovering) {
1756
border-color: transparent;
1757
background-color: transparent;
1758
slider {
1760
min-width: 4px;
1761
min-height: 4px;
1762
margin: 4px - 1px;
1763
border: 1px solid scale-alpha($base_color, $lower_opacity);
1764
}
1765
button {
1767
min-width: 4px;
1768
min-height: 4px;
1769
margin: 4px - 1px;
1770
border: 1px solid scale-alpha($base_color, $lower_opacity);
1771
border-radius: 100px;
1772
background-color: $tertiary_fg_color;
1773
background-clip: padding-box;
1774
-gtk-icon-source: none;
1775
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1777
}
1778
&.horizontal {
1780
slider { min-width: $_slider_min_length; }
1781
button { min-width: 8px; }
1783
}
1784
&.vertical {
1786
slider { min-height: $_slider_min_length; }
1787
button { min-height: 8px; }
1789
}
1790
}
1791
&.dragging,
1793
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1794
}
1795
&.horizontal slider { min-width: $_slider_min_length; }
1797
&.vertical slider { min-height: $_slider_min_length; }
1799
// button styling
1801
button {
1802
@extend %simple_flat_button;
1803
min-width: 16px;
1805
min-height: 16px;
1806
padding: 0;
1807
border-radius: 0;
1808
}
1809
// button icons
1811
&.vertical {
1812
button {
1813
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1814
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1816
}
1817
}
1818
&.horizontal {
1820
button {
1821
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1822
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1824
}
1825
}
1826
}
1827
/**********
1830
* Switch *
1831
**********/
1832
switch {
1833
transition: $material_transition;
1834
margin: $container_padding 0;
1835
border: 4px solid transparent;
1836
border-radius: 100px;
1837
background-color: $track_color;
1838
background-clip: padding-box;
1839
font-size: 0;
1840
&:disabled { color: $insensitive_fg_color; }
1842
&:checked {
1844
background-color: scale-alpha($accent_bg_color, 0.5);
1845
&:disabled {
1847
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1848
color: $insensitive_fg_color;
1849
}
1850
}
1851
slider {
1853
@include entry(normal);
1854
transition: $material_transition, margin 0;
1856
min-width: $small_size;
1857
min-height: $small_size;
1858
margin: -4px 0 -4px -4px;
1859
-gtk-outline-radius: 100px;
1860
border-radius: 100px;
1861
}
1862
&:hover slider { @include entry(focus); }
1864
&:disabled slider { @include entry(insensitive); }
1866
&:checked slider {
1868
transition: $material_transition, margin 0, background-image 0, background-color 0 $material_slower;
1869
animation: needs_attention $material_slower $material_ease_out;
1870
margin: -4px -4px -4px 0;
1871
background-color: $accent_bg_color;
1872
color: $selected_fg_color;
1873
}
1874
&:checked:disabled slider { animation: none; }
1876
row:selected & {
1878
}
1879
}
1880
/*************************
1883
* Check and Radio items *
1884
*************************/
1885
// draw regular check and radio items using our PNG assets
1886
// all assets are rendered from assets.svg. never add pngs directly
1887
//selection-mode
1889
@each $s,$as in ('','-selectionmode'),
1890
(':hover', '-hover-selectionmode'),
1891
(':checked', '-checked-selectionmode'),
1892
(':checked:hover', '-checked-hover-selectionmode') {
1893
.view.content-view.check#{$s}:not(list) {
1894
-gtk-icon-shadow: $z-depth-1;
1895
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1896
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1897
margin: 8px;
1898
background-color: transparent;
1899
}
1900
}
1901
checkbutton.text-button,
1903
radiobutton.text-button {
1904
// this is for a nice focus on check and radios text
1905
padding: 2px;
1906
outline-offset: 0;
1907
label:not(:only-child) { margin: 0 4px; }
1909
}
1910
check,
1912
radio {
1913
min-height: 24px;
1914
min-width: 24px;
1915
margin: -12px;
1916
padding: 12px;
1917
@extend %simple_flat_button;
1919
@extend %circular_button;
1921
&:checked, &:indeterminate { color: $accent_bg_color; }
1923
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1925
// &:only-child { margin: -12px; }
1927
row &:not(:checked):not(:indeterminate) {
1929
color: gtkalpha(currentColor, $enabled_opacity);
1930
&:hover, &:active { color: currentColor; }
1932
}
1933
menu menuitem & {
1935
transition: none;
1936
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1937
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1939
&, &:hover, &:disabled {
1941
background-image: none;
1942
// color: inherit;
1943
// animation: none;
1944
}
1945
}
1946
}
1947
%check,
1949
check {
1950
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1951
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1952
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1954
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1955
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1957
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1958
}
1959
%radio,
1961
radio {
1962
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1963
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1964
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1966
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1967
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1969
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1970
border-image: -gtk-gradient(radial,
1972
center center, 0,
1973
center center, 0.001,
1974
to($accent_bg_color),
1975
to(transparent))
1976
24 / 24px;
1977
&:checked {
1979
border-image: -gtk-gradient(radial,
1980
center center, 0,
1981
center center, (10 / 48 / 2),
1982
to($accent_bg_color),
1983
to(transparent))
1984
24 / 24px;
1985
}
1986
&:checked:disabled {
1988
border-image: -gtk-gradient(radial,
1989
center center, 0,
1990
center center, (10 / 48 / 2),
1991
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1992
to(transparent))
1993
24 / 24px;
1994
}
1995
&:indeterminate:checked {
1997
border-image: -gtk-gradient(radial,
1998
center center, 0,
1999
center center, 0.001,
2000
to($accent_bg_color),
2001
to(transparent))
2002
24 / 24px;
2003
}
2004
}
2005
// let's animate things
2007
@keyframes check_check {
2008
from { -gtk-icon-transform: rotate(90deg); }
2009
to { -gtk-icon-transform: unset; }
2010
}
2011
@keyframes check_radio { // FIXME: cannot animate border-image
2013
from {
2014
border-image: -gtk-gradient(radial,
2015
center center, 0,
2016
center center, 0.001,
2017
to($accent_bg_color),
2018
to(transparent))
2019
24 / 24px;
2020
}
2021
to {
2023
border-image: -gtk-gradient(radial,
2024
center center, 0,
2025
center center, (10 / 48 / 2),
2026
to($accent_bg_color),
2027
to(transparent))
2028
24 / 24px;
2029
}
2030
}
2031
@keyframes check_indeterminate {
2033
from { -gtk-icon-transform: unset; }
2034
50% { -gtk-icon-transform: scale(0, 1); }
2035
to { -gtk-icon-transform: unset; }
2036
}
2037
%check_checked,
2039
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
2040
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2042
// %radio_checked,
2044
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
2045
// radio:not(:indeterminate):checked:active { animation: check_radio $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2047
%indeterminate_checked,
2049
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
2050
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2052
// no animations in menus
2054
menu menuitem {
2055
check:not(:indeterminate):checked,
2056
radio:not(:indeterminate):checked,
2057
check:indeterminate:checked,
2058
radio:indeterminate:checked { animation: none; }
2059
}
2060
treeview.view check,
2062
treeview.view radio {
2063
padding: 0;
2064
&:checked:hover, &:selected:checked:hover { background-image: none; }
2066
& {
2068
color: $secondary_fg_color;
2069
&:hover, &:active { color: $fg_color; }
2071
&:disabled { color: $insensitive_secondary_fg_color; }
2073
&:checked, &:indeterminate { color: $accent_bg_color; }
2075
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2077
}
2078
&:selected {
2080
color: $secondary_selected_fg_color;
2081
&:hover, &:active { color: $selected_fg_color; }
2083
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2085
&:checked, &:indeterminate { color: $accent_bg_color; }
2087
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2089
}
2090
}
2091
treeview.view radio:checked {
2093
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2094
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2095
border-image: none;
2096
}
2097
/************
2100
* GtkScale *
2101
************/
2102
scale {
2103
// sizing
2104
$_marks_lenght: 8px;
2105
$_marks_distance: 8px;
2106
min-height: $medium_size - 24px;
2108
min-width: $medium_size - 24px;
2109
padding: (24px / 2);
2110
* { transition: $material_transition; }
2112
// the slider is inside the trough, so to have make it bigger there's a negative margin
2114
slider {
2115
min-height: 24px;
2116
min-width: 24px;
2117
margin: ($bar_size - 24px) / 2;
2118
}
2119
// the backing bit
2121
trough {
2122
outline-offset: 2px;
2123
background-color: $track_color;
2124
&:disabled { color: $insensitive_fg_color; }
2126
}
2127
// the colored part of the backing bit
2129
highlight {
2130
background-color: $accent_bg_color;
2131
&:disabled { background-color: transparent; }
2133
}
2134
// this is another differently styled part of the backing bit, the most relevant use case is for example
2136
// in media player to indicate how much video stream as been cached
2137
fill {
2138
background-color: $track_color;
2139
&:disabled { background-color: transparent; }
2141
}
2142
slider {
2144
transition: all $material_faster $material_ease;
2145
// border-radius: 100%;
2146
// background-color: $accent_bg_color;
2147
background-repeat: no-repeat;
2148
background-position: center;
2149
@each $s,$as in ('',''),
2151
(':disabled','-insensitive') {
2152
&#{$s} {
2153
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2154
background-image: -gtk-scaled(url('#{$_url}.png'),
2155
url('#{$_url}@2.png'));
2156
}
2157
}
2158
background-size: calc(100% - 8px);
2160
&:hover { background-size: calc(100% - 4px); }
2162
&:active { background-size: calc(100% - 0px); }
2164
}
2165
// click-and-hold the slider to activate
2167
&.fine-tune {
2168
// to make the slider shrink in fine-tune mode
2169
slider { background-size: calc(100% - 12px); }
2170
}
2171
value { color: gtkalpha(currentColor, $hint_opacity); }
2173
marks {
2175
color: $track_color;
2176
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2178
(bottom, bottom, top),
2179
(top, left, right),
2180
(bottom, right, left) {
2181
&.#{$marks_class} {
2182
margin-#{$marks_margin}: $_marks_distance;
2183
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2184
}
2185
}
2186
}
2187
&.horizontal {
2189
indicator {
2190
min-height: $_marks_lenght;
2191
min-width: 1px;
2192
}
2193
}
2194
&.vertical {
2196
indicator {
2197
min-height: 1px;
2198
min-width: $_marks_lenght;
2199
}
2200
}
2201
// *WARNING* scale with marks madness following
2203
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2205
$suffix: if($variant == 'light', '', '-dark');
2206
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2208
('vertical', 'vert') {
2209
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2210
('scale-has-marks-below', ':first-child:not(:only-child)') {
2211
@each $state, $state_infix in ('', ''),
2212
(':disabled', '-insensitive') {
2213
&.#{$dir_class} {
2214
%#{$marks_infix}-#{$dir_infix},
2215
contents#{$nth_child} > trough > slider {
2216
&#{$state} {
2217
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2218
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2220
}
2221
@if $dir_class == 'horizontal' {
2223
min-height: 30px;
2224
min-width: 24px;
2225
@if $marks_infix == 'scale-has-marks-above' {
2227
margin-top: -16px;
2228
background-position: center calc(100% - 4px);
2230
&:hover { background-position: center calc(100% - 2px); }
2232
&:active { background-position: center calc(100% - 0px); }
2234
}
2235
@if $marks_infix == 'scale-has-marks-below' {
2237
margin-bottom: -16px;
2238
background-position: center calc(4px);
2240
&:hover { background-position: center calc(2px); }
2242
&:active { background-position: center calc(0px); }
2244
}
2245
}
2246
@if $dir_class == 'vertical' {
2248
min-height: 24px;
2249
min-width: 30px;
2250
@if $marks_infix == 'scale-has-marks-above' {
2252
margin-left: -16px;
2253
background-position: calc(4px) center;
2255
&:hover { background-position: calc(2px) center; }
2257
&:active { background-position: calc(0px) center; }
2259
}
2260
@if $marks_infix == 'scale-has-marks-below' {
2262
margin-right: -16px;
2263
background-position: calc(100% - 4px) center;
2265
&:hover { background-position: calc(100% - 2px) center; }
2267
&:active { background-position: calc(100% - 0px) center; }
2269
}
2270
}
2271
}
2272
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2274
&.fine-tune contents#{$nth_child} > trough > slider {
2275
// bigger negative margins to make the trough grow here as well
2276
@if $dir_class == 'horizontal' {
2278
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2279
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2281
}
2282
@if $dir_class == 'vertical' {
2284
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2285
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2287
}
2288
}
2289
}
2290
}
2291
}
2292
}
2293
&.color {
2295
min-height: 0;
2296
min-width: 0;
2297
&.horizontal {
2299
padding: 0 0 12px 0;
2300
trough {
2302
padding-bottom: $bar_size;
2303
}
2304
slider {
2306
@extend %scale-has-marks-above-horz;
2307
margin-bottom: -10px - $bar_size;
2309
margin-top: 0;
2310
}
2311
}
2312
&.vertical {
2314
&:dir(ltr) {
2315
padding: 0 0 0 12px;
2316
trough {
2318
padding-left: $bar_size;
2319
}
2320
slider {
2322
@extend %scale-has-marks-below-vert;
2323
margin-left: -10px - $bar_size;
2325
margin-right: 0;
2326
}
2327
}
2328
&:dir(rtl) {
2330
padding: 0 12px 0 0;
2331
trough {
2333
padding-right: $bar_size;
2334
}
2335
slider {
2337
@extend %scale-has-marks-above-vert;
2338
margin-right: -10px - $bar_size;
2340
margin-left: 0;
2341
}
2342
}
2343
}
2344
&.fine-tune {
2346
&.horizontal {
2347
slider {
2348
@extend %scale-has-marks-above-horz-fine-tune;
2349
}
2350
}
2351
&.vertical {
2353
&:dir(ltr) {
2354
slider {
2355
@extend %scale-has-marks-below-vert-fine-tune;
2356
}
2357
}
2358
&:dir(rtl) {
2360
slider {
2361
@extend %scale-has-marks-above-vert-fine-tune;
2362
}
2363
}
2364
}
2365
}
2366
}
2367
}
2368
/*****************
2371
* Progress bars *
2372
*****************/
2373
progressbar {
2374
// sizing
2375
&.horizontal {
2376
trough,
2377
progress { min-height: $bar_size; }
2378
}
2379
&.vertical {
2381
trough,
2382
progress { min-width: $bar_size; }
2383
}
2384
// FIXME: insensitive state missing and some other state should be set probably
2386
color: $tertiary_fg_color;
2387
font-size: smaller;
2388
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2390
progress { background-color: $selected_bg_color; }
2392
&.osd { // progressbar.osd used for epiphany page loading progress
2394
// min-width: $bar_size;
2395
// min-height: $bar_size;
2396
// background-color: transparent;
2397
// trough { background-color: transparent; }
2399
progress {
2401
}
2402
}
2403
}
2404
/*************
2407
* Level Bar *
2408
*************/
2409
levelbar {
2410
block {
2411
min-width: $medium_size;
2412
min-height: $bar_size;
2413
}
2414
&.vertical block {
2416
min-width: $bar_size;
2417
min-height: $medium_size;
2418
}
2419
trough {
2421
padding: 2px;
2422
border-radius: 2px;
2423
@include entry(normal);
2425
&:disabled { @include entry(insensitive); }
2427
}
2428
&.horizontal.discrete block { margin: 0 1px; }
2430
&.vertical.discrete block { margin: 1px 0; }
2432
&.horizontal.discrete trough { padding: 2px 1px; }
2434
&.vertical.discrete trough { padding: 1px 2px; }
2436
block {
2438
&.low {
2439
background-color: $warning_color;
2440
}
2441
&.high,
2443
&:not(.empty) {
2444
background-color: $selected_bg_color;
2445
}
2446
&.full {
2448
background-color: $success_color;
2449
}
2450
&.empty {
2452
background-color: $track_color;
2453
color: $insensitive_fg_color;
2454
}
2455
}
2456
}
2457
/****************
2460
* Print dialog *
2461
*****************/
2462
printdialog {
2463
paper {
2464
padding: 0;
2465
border: 1px solid $borders_color;
2466
background: $base_color;
2467
color: $fg_color;
2468
}
2469
.dialog-action-box { margin: 12px; }
2471
}
2472
/**********
2475
* Frames *
2476
**********/
2477
frame > border,
2478
.frame {
2479
margin: 0;
2480
padding: 0;
2481
border: 1px solid $borders_color;
2482
border-radius: 0;
2483
box-shadow: none;
2484
&.flat { border-style: none; }
2486
}
2487
actionbar > revealer > box {
2489
padding: $container_padding;
2490
border-top: 1px solid $borders_color;
2491
}
2492
scrolledwindow {
2494
viewport.frame { // avoid double borders when viewport inside scrolled window
2495
border-style: none;
2496
}
2497
// This is used when content is touch-dragged past boundaries.
2499
// draws a box on top of the content, the size changes programmatically.
2500
@at-root overshoot {
2501
&.top { @include overshoot(top); }
2502
&.bottom { @include overshoot(bottom); }
2504
&.left { @include overshoot(left); }
2506
&.right { @include overshoot(right); }
2508
}
2509
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2511
@at-root undershoot {
2512
&.top { @include undershoot(top); }
2513
&.bottom { @include undershoot(bottom); }
2515
&.left { @include undershoot(left); }
2517
&.right { @include undershoot(right); }
2519
}
2520
@at-root junction { // the small square between two scrollbars
2522
border-style: solid none none solid;
2523
border-width: 1px;
2524
border-color: $borders_color;
2525
background-color: $base_color;
2526
&:dir(rtl) { border-style: solid solid none none; }
2528
}
2529
}
2530
//vbox and hbox separators
2532
separator {
2533
min-width: 1px;
2534
min-height: 1px;
2535
background: $borders_color;
2536
}
2537
/*********
2540
* Lists *
2541
*********/
2542
list {
2543
border-color: $borders_color;
2544
background-color: $base_color;
2545
row { padding: 2px; }
2547
}
2548
row {
2550
&.activatable {
2551
transition: $material_transition;
2552
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0);
2553
background-image: radial-gradient(circle farthest-corner at center,
2554
gtkalpha(currentColor, 0) 100%,
2555
transparent 0%),
2556
image(gtkalpha(currentColor, 0));
2557
&:hover {
2559
transition: $material_transition, box-shadow 0;
2560
box-shadow: inset 0 0 0 10000px 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
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, $lower_opacity / 2);
2568
}
2569
}
2570
&:selected { @extend %selected_items; }
2572
}
2573
/*********************
2576
* App Notifications *
2577
*********************/
2578
.app-notification,
2579
.app-notification.frame {
2580
@extend %osd;
2581
@extend toolbar.osd;
2583
margin: 8px;
2585
border { border: none; }
2587
}
2588
/*************
2591
* Expanders *
2592
*************/
2593
expander {
2594
arrow {
2595
transition: all $material_faster $material_ease;
2596
min-width: 16px;
2597
min-height: 16px;
2598
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2599
-gtk-icon-transform: rotate(-90deg);
2600
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2602
&:checked { -gtk-icon-transform: unset; }
2604
color: $secondary_fg_color;
2606
&:hover, &:active { color: $fg_color; }
2608
&:disabled { color: $insensitive_secondary_fg_color; }
2610
&:selected {
2612
color: $secondary_selected_fg_color;
2613
&:hover, &:active { color: $selected_fg_color; }
2615
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2617
}
2618
}
2619
}
2620
/************
2623
* Calendar *
2624
***********/
2625
calendar {
2626
padding: 1px;
2627
border: 1px solid $borders_color;
2628
color: $fg_color;
2629
&:disabled { color: $insensitive_fg_color; }
2631
&:selected {
2633
@extend %selected_items;
2634
border-radius: 2px + 1px;
2636
}
2637
&.header {
2639
border-style: none none solid;
2640
border-radius: 0;
2641
}
2642
&.button { @extend %simple_flat_button; }
2644
&.highlight {
2646
color: gtkalpha(currentColor, $hint_opacity);
2647
font-weight: 500;
2648
}
2649
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2651
}
2652
/***********
2655
* Dialogs *
2656
***********/
2657
messagedialog { // Message Dialog styling
2658
&.background { background-color: $light_color; }
2659
.titlebar {
2661
min-height: $small_size;
2662
border-style: none;
2663
box-shadow: inset 0 1px $highlight_color;
2664
background-color: $light_color;
2665
}
2666
&.csd { // rounded bottom border styling for csd version
2668
&.background {
2669
// bigger radius for better antialiasing
2670
border-bottom-left-radius: 2px;
2671
border-bottom-right-radius: 2px;
2672
}
2673
.dialog-action-area button {
2675
padding: 8px 16px;
2676
border-top: 1px solid $borders_color;
2677
border-radius: 0;
2678
@extend %simple_flat_button;
2680
&:first-child { border-bottom-left-radius: 2px; }
2682
&:last-child { border-bottom-right-radius: 2px; }
2684
}
2685
}
2686
}
2687
filechooser {
2689
.dialog-action-box { border-top: 1px solid $borders_color; }
2690
#pathbarbox {
2692
border-bottom: 1px solid $borders_color;
2693
background-color: $bg_color;
2694
}
2695
}
2696
filechooserbutton:drop(active) {
2698
box-shadow: none;
2699
}
2700
/***********
2703
* Sidebar *
2704
***********/
2705
.sidebar {
2706
border-style: none;
2707
background-color: $light_color;
2708
@at-root %sidebar_left,
2710
&:dir(ltr),
2711
&.left,
2712
&.left:dir(rtl) {
2713
border-right: 1px solid $borders_color;
2714
border-left-style: none;
2715
}
2716
@at-root %sidebar_right
2718
&:dir(rtl),
2719
&.right {
2720
border-left: 1px solid $borders_color;
2721
border-right-style: none;
2722
}
2723
list { background-color: transparent; }
2725
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2727
}
2728
stacksidebar {
2730
&.sidebar {
2731
&:dir(ltr),
2732
&.left,
2733
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2734
&:dir(rtl),
2736
&.right { list { @extend %sidebar_right; }}
2737
}
2738
row {
2740
padding: 10px 4px;
2741
> label {
2743
padding-left: 6px;
2744
padding-right: 6px;
2745
}
2746
&.needs-attention > label { @extend %needs_attention; }
2748
}
2749
}
2750
/****************
2753
* File chooser *
2754
****************/
2755
placessidebar {
2756
> viewport.frame { border-style: none; }
2757
list { padding: (4px - 3px) 0 4px; }
2759
row {
2761
// Needs overriding of the GtkListBoxRow padding
2762
min-height: 32px;
2763
margin: -1px 0; // Remove unknown margins
2764
padding: 0;
2765
// Using margins/padding directly in the SidebarRow
2767
// will make the animation of the new bookmark row jump
2768
> revealer { padding: 0 12px; }
2769
&:selected { color: $selected_fg_color; }
2771
&:disabled { color: $insensitive_fg_color; }
2773
image.sidebar-icon {
2775
opacity: $hint_opacity; // dim the device icons
2776
&:dir(ltr) { padding-right: 8px; }
2778
&:dir(rtl) { padding-left: 8px; }
2779
}
2780
label.sidebar-label {
2782
&:dir(ltr) { padding-right: 2px; }
2783
&:dir(rtl) { padding-left: 2px; }
2784
}
2785
@at-root button.sidebar-button {
2787
@extend %simple_flat_button;
2788
@extend %small_button;
2790
row:selected & {
2792
}
2793
}
2794
&.sidebar-placeholder-row {
2796
min-height: 2px;
2797
padding: 0 8px;
2798
background-image: image($accent_bg_color);
2799
background-clip: content-box;
2800
}
2801
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2803
&:drop(active):not(:disabled) {
2805
box-shadow: inset 0 0 0 2px $accent_bg_color;
2806
&:selected {
2808
// background-color: $accent_bg_color;
2809
// color: $selected_fg_color;
2810
}
2811
}
2812
}
2813
}
2814
placesview {
2816
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2817
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2819
// this selects the "connect to server" label
2821
> actionbar > revealer > box > label {
2822
padding-left: 8px;
2823
padding-right: 8px;
2824
}
2825
}
2826
/*********
2829
* Paned *
2830
*********/
2831
paned {
2832
> separator {
2833
min-width: 1px;
2834
min-height: 1px;
2835
-gtk-icon-source: none; // defeats the ugly default handle decoration
2836
border-style: none; // just to be sure
2837
background-color: transparent;
2838
// workaround, using background istead of a border since the border will get rendered twice (?)
2839
background-image: image($borders_color);
2840
background-size: 1px 1px;
2841
&.wide {
2843
min-width: 6px;
2844
min-height: 6px;
2845
background-color: $bg_color;
2846
background-image: image($borders_color), image($borders_color);
2847
background-size: 1px 1px, 1px 1px;
2848
}
2849
}
2850
&.horizontal > separator {
2852
background-repeat: repeat-y;
2853
&:dir(ltr) {
2855
margin: 0 -8px 0 0;
2856
padding: 0 8px 0 0;
2857
background-position: left;
2858
}
2859
&:dir(rtl) {
2861
margin: 0 0 0 -8px;
2862
padding: 0 0 0 8px;
2863
background-position: right;
2864
}
2865
&.wide {
2867
margin: 0;
2868
padding: 0;
2869
background-repeat: repeat-y, repeat-y;
2870
background-position: left, right;
2871
}
2872
}
2873
&.vertical > separator {
2875
margin: 0 0 -8px 0;
2876
padding: 0 0 8px 0;
2877
background-repeat: repeat-x;
2878
background-position: top;
2879
&.wide {
2881
margin: 0;
2882
padding: 0;
2883
background-repeat: repeat-x, repeat-x;
2884
background-position: bottom, top;
2885
}
2886
}
2887
}
2888
/**************
2891
* GtkInfoBar *
2892
**************/
2893
infobar {
2894
border-style: none;
2895
&.info { background-color: $info_bg_color; }
2897
&.question { background-color: $question_bg_color; }
2899
&.warning { background-color: $warning_bg_color; }
2901
&.error { background-color: $error_bg_color; }
2903
&.info,
2905
&.question,
2906
&.warning,
2907
&.error {
2908
> label, & { color: $selected_fg_color; }
2909
button { @extend %button_selected; }
2911
selection { }
2913
*:link { @extend %link_selected; }
2915
}
2916
}
2917
/************
2920
* Tooltips *
2921
************/
2922
tooltip {
2923
&.background {
2924
// background-color needs to be set this way otherwise it gets drawn twice
2925
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2926
background-color: scale-alpha($base_color, $higher_opacity);
2927
}
2928
// @extend %osd;
2930
// padding: 4px; /* not working */
2932
border-radius: 2px;
2933
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2934
// FIXME: we need a border or tooltips vanish on black background.
2936
decoration { background-color: transparent; }
2937
label {
2939
// tooltip label has already 6px margins
2940
min-height: 32px - 6px * 2;
2941
padding: 0 8px - 6px;
2942
}
2943
* { // Yeah this is ugly
2945
padding: 0;
2946
background-color: transparent;
2947
color: inherit;
2948
}
2949
}
2950
/*****************
2953
* Color Chooser *
2954
*****************/
2955
colorswatch {
2956
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2957
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2958
// applied to the overlay box.
2959
// base color corners rounding
2961
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2962
// sports a bigger radius.
2963
// nth-child is needed by the custom color strip.
2964
&.top {
2966
border-top-left-radius: $material_radius + 0.5px;
2967
border-top-right-radius: $material_radius + 0.5px;
2968
overlay {
2970
border-top-left-radius: $material_radius;
2971
border-top-right-radius: $material_radius;
2972
}
2973
}
2974
&.bottom {
2976
border-bottom-left-radius: $material_radius + 0.5px;
2977
border-bottom-right-radius: $material_radius + 0.5px;
2978
overlay {
2980
border-bottom-left-radius: $material_radius;
2981
border-bottom-right-radius: $material_radius;
2982
}
2983
}
2984
&.left,
2986
&:first-child:not(.top) {
2987
border-top-left-radius: $material_radius + 0.5px;
2988
border-bottom-left-radius: $material_radius + 0.5px;
2989
overlay {
2991
border-top-left-radius: $material_radius;
2992
border-bottom-left-radius: $material_radius;
2993
}
2994
}
2995
&.right,
2997
&:last-child:not(.bottom) {
2998
border-top-right-radius: $material_radius + 0.5px;
2999
border-bottom-right-radius: $material_radius + 0.5px;
3000
overlay {
3002
border-top-right-radius: $material_radius;
3003
border-bottom-right-radius: $material_radius;
3004
}
3005
}
3006
&.dark overlay { color: white; }
3008
&.light overlay { color: scale-alpha(black, 0.8); }
3010
&.dark { color: white; } // for focus ring
3012
&.light { color: scale-alpha(black, 0.8); } // for focus ring
3014
&:drop(active) {
3016
box-shadow: none;
3017
&.light overlay {
3019
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3020
}
3021
&.dark overlay {
3023
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3024
}
3025
}
3026
overlay {
3028
transition: $shadow_transition;
3029
box-shadow: $z-depth-1;
3030
&:hover { box-shadow: $z-depth-2; }
3032
}
3033
&#add-color-button {
3035
border-radius: $material_radius $material_radius 0 0;
3036
color: white; // for focus ring
3037
&:only-child { border-radius: $material_radius; }
3039
overlay {
3041
background-image: linear-gradient(to right,
3042
$error_bg_color 25%,
3043
$warning_bg_color 25%, $warning_bg_color 50%,
3044
$info_bg_color 50%, $info_bg_color 75%,
3045
$question_bg_color 75%);
3046
color: white;
3047
}
3048
}
3049
&:disabled {
3051
opacity: $disabled_opacity;
3052
overlay { box-shadow: none; }
3054
}
3055
row:selected & {
3057
}
3058
&#editor-color-sample {
3060
border-radius: $material_radius + 0.5px;
3061
overlay { border-radius: $material_radius; }
3063
// overlay:hover { box-shadow: $z-depth-1; }
3065
}
3066
}
3067
// colorscale popup
3069
colorchooser .popover.osd {
3070
transition: $shadow_transition;
3071
border-radius: 2px;
3072
box-shadow: $z-depth-2;
3073
background-color: $base_color;
3074
&:backdrop { box-shadow: $z-depth-1; }
3076
spinbutton:not(.vertical) { @extend %entry.flat; }
3078
}
3079
/********
3082
* Misc *
3083
********/
3084
//content view (grid/list)
3085
.content-view {
3086
background-color: $bg_color;
3087
// &:hover { -gtk-icon-effect: highlight; }
3089
rubberband { @extend rubberband; }
3091
}
3092
.scale-popup {
3094
.osd & { @extend %osd; }
3095
.osd & button.flat { //FIXME: quick hack, redo properly
3097
}
3098
button { // +/- buttons on GtkVolumeButton popup
3100
}
3101
}
3102
/**********************
3105
* Window Decorations *
3106
*********************/
3107
decoration {
3108
transition: $shadow_transition;
3109
border-radius: 2px 2px 0 0;
3110
box-shadow: $z-depth-4, 0 16px 16px transparent;
3111
// FIXME rationalize shadows
3113
// this is used for the resize cursor area
3115
margin: 8px;
3116
&:backdrop {
3118
// the transparent shadow here is to enforce that the shadow extents don't
3119
// change when we go to backdrop, to prevent jumping windows.
3120
// The biggest shadow should be in the same order then in the active state
3121
// or the jumping will happen during the transition.
3122
box-shadow: $z-depth-2, 0 16px 16px transparent;
3123
}
3124
.maximized &,
3126
.fullscreen &,
3127
.tiled & { border-radius: 0; }
3128
.popup & { box-shadow: none; }
3130
// server-side decorations as used by mutter
3132
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3133
.csd.popup & {
3135
border-radius: 2px;
3136
box-shadow: $z-depth-2;
3137
}
3138
tooltip.csd & {
3140
border-radius: 2px;
3141
box-shadow: $z-depth-2;
3142
}
3143
messagedialog.csd & {
3145
border-radius: 2px;
3146
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3147
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3149
}
3150
.solid-csd & {
3152
margin: 0;
3153
padding: 4px;
3154
// border: solid 1px $borders_color;
3155
border-radius: 0;
3156
box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $secondary_highlight_color;
3157
background-color: $borders_color;
3158
}
3159
}
3160
// Window Close button
3162
button.titlebutton {
3163
// @extend %simple_flat_button;
3164
@extend %circular_button;
3166
.selection-mode & {
3168
}
3169
}
3170
// catch all extend :)
3173
%selected_items {
3175
background-color: $selected_bg_color;
3176
@at-root %nobg_selected_items, & {
3178
color: $selected_fg_color;
3179
&:disabled { color: $insensitive_selected_fg_color; }
3181
}
3182
}
3183
.monospace { font-family: monospace; }
3185
/**********************
3188
* Touch Copy & Paste *
3189
*********************/
3190
//touch selection handlebars for the Popover.osd above
3191
cursor-handle {
3192
border-radius: 100px;
3193
background-color: $accent_bg_color;
3194
background-image: none;
3195
&.top:dir(ltr), &.bottom:dir(rtl) {
3197
padding-left: 6px;
3198
border-top-right-radius: 0;
3199
}
3200
&.bottom:dir(ltr), &.top:dir(rtl) {
3202
padding-right: 6px;
3203
border-top-left-radius: 0;
3204
}
3205
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3207
-GtkWidget-text-handle-width: 24;
3208
-GtkWidget-text-handle-height: 30;
3209
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3211
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3212
url('#{$_url}@2.png'));
3213
}
3214
}
3215
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3217
%circular_button,
3219
button.circular { // FIXME: aggregate to buttons
3220
border-radius: 100px;
3221
-gtk-outline-radius: 100px;
3222
// label { padding: 0; }
3224
}
3225
%small_button {
3227
min-height: $small_size;
3228
min-width: $small_size;
3229
padding: 0;
3230
border-radius: 100px;
3231
-gtk-outline-radius: 100px;
3232
}
3233
// shortcut window keys
3235
.keycap {
3236
min-width: 28px - 8px * 2;
3237
min-height: 28px - 2px;
3238
margin-top: 2px;
3239
padding-bottom: 2px;
3240
padding-left: 8px;
3241
padding-right: 8px;
3242
border: solid 1px $borders_color;
3244
border-radius: 2px + 1px;
3245
box-shadow: inset 0 -2px $borders_color;
3246
background-color: $base_color;
3247
color: $fg_color;
3248
font-size: smaller;
3249
}
3250
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3252
transition: $material_transition;
3253
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3254
caret-color: $accent_bg_color;
3255
}
3256
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3258
stackswitcher button.circular,
3260
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3261
min-width: $medium_size;
3262
min-height: $medium_size;
3263
padding: 0;
3264
}
3265