ASCII text
1
$asset_suffix: if($variant=='dark', '-dark', '');
2
$extra_background_clip: if($variant == 'light', padding-box, border-box);
3
$small_size: 24px;
5
$medium_size: 36px;
6
$large_size: 48px;
7
$bar_size: 4px;
8
$menuitem_size: 28px;
9
$container_padding: 6px;
11
$material_radius: 2px;
12
$material_faster: 0.2s;
13
$material_slower: 0.3s;
14
$material_ease: cubic-bezier(0.4, 0.0, 0.2, 1);
15
$material_ease_out: cubic-bezier(0.0, 0.0, 0.2, 1);
16
$material_ease_in: cubic-bezier(0.4, 0.0, 1, 1);
17
// FIXME: color's transition is too slow
18
$material_transition: all $material_slower $material_ease_out, color 0;
19
$shadow_transition: box-shadow $material_faster $material_ease_out;
20
* {
22
padding: 0;
23
background-clip: padding-box;
24
-GtkToolButton-icon-spacing: 4;
26
-GtkTextView-error-underline-color: $error_color;
27
// The size for scrollbars. The slider is 2px smaller, but we keep it
29
// up so that the whole area is sensitive to button presses for the
30
// slider. The stepper button is larger in both directions, the slider
31
// only in the width
32
-GtkScrolledWindow-scrollbar-spacing: 0;
34
-GtkToolItemGroup-expander-size: 11;
36
-GtkTreeView-expander-size: 11;
37
-GtkTreeView-horizontal-separator: 4;
39
-GtkWidget-text-handle-width: 24;
41
-GtkWidget-text-handle-height: 24;
42
-GtkDialog-button-spacing: 4;
44
-GtkDialog-action-area-border: 0;
45
// We use the outline properties to signal the focus properties
47
// to the adwaita engine: using real CSS properties is faster,
48
// and we don't use any outlines for now.
49
outline-style: solid;
51
outline-width: 2px;
52
outline-color: $track_color;
53
outline-offset: -4px;
54
-gtk-outline-radius: 2px;
55
-gtk-secondary-caret-color: $selected_bg_color;
57
}
58
/***************
61
* Base States *
62
***************/
63
.background {
64
background-color: $bg_color;
65
color: $fg_color;
66
}
67
/*
69
These wildcard seems unavoidable, need to investigate.
70
Wildcards are bad and troublesome, use them with care,
71
or better, just don't.
72
Everytime a wildcard is used a kitten dies, painfully.
73
*/
74
*:disabled { -gtk-icon-effect: dim; }
76
.gtkstyle-fallback {
78
background-color: $bg_color;
79
color: $fg_color;
80
&:hover {
82
background-color: darken($bg_color, 5%);
83
color: $fg_color;
84
}
85
&:active {
87
background-color: darken($bg_color, 10%);
88
color: $fg_color;
89
}
90
&:disabled {
92
background-color: $bg_color;
93
color: $insensitive_fg_color;
94
}
95
&:selected {
97
background-color: $selected_bg_color;
98
color: $selected_fg_color;
99
}
100
}
101
.view,
103
%view {
104
@extend row.activatable;
105
background-color: $base_color;
107
color: $fg_color;
108
&:hover, &:active, &:selected { border-radius: 2px; }
110
&:disabled {
112
// background-color: $secondary_base_color;
113
color: $insensitive_fg_color;
114
}
115
&:selected { @extend %selected_items; }
117
}
118
.view,
120
textview {
121
text {
122
// @extend %view;
123
background-color: $base_color;
125
color: $fg_color;
126
&:disabled {
128
// background-color: $secondary_base_color;
129
color: $insensitive_fg_color;
130
}
131
selection { @extend %selected_items; }
133
}
134
}
135
textview border {
137
background-color: $secondary_base_color;
138
background-image: image($borders_color); // HACK: the border node just draws background so, using a background-image to draw the border
139
background-repeat: no-repeat;
140
color: $tertiary_fg_color;
141
&.bottom {
143
background-size: 100% 1px;
144
background-position: top;
145
}
146
&.top {
148
background-size: 100% 1px;
149
background-position: bottom;
150
}
151
&.left {
153
background-size: 1px 100%;
154
background-position: right;
155
}
156
&.right {
158
background-size: 1px 100%;
159
background-position: left;
160
}
161
}
162
iconview { @extend .view; }
164
.rubberband,
166
rubberband {
167
border: 1px solid $secondary_selected_bg_color;
168
background-color: scale-alpha($secondary_selected_bg_color, $lower_opacity);
169
}
170
flowbox {
172
rubberband { @extend rubberband; }
173
flowboxchild {
175
outline-offset: -2px;
176
padding: 4px;
177
border-radius: 2px;
178
&:selected { @extend %selected_items; }
180
}
181
}
182
label {
184
&.separator {
185
@extend .dim-label;
186
color: $fg_color;
188
}
189
row:selected &,
191
&:selected { @extend %nobg_selected_items; }
192
selection {
194
background-color: $selected_bg_color;
195
color: $selected_fg_color;
196
}
197
&:disabled {
199
color: $insensitive_fg_color;
200
selection { @extend %selected_items:disabled; }
202
}
203
}
204
.dim-label { opacity: $hint_opacity; }
206
assistant {
208
.sidebar {
209
padding: 4px 0;
210
// background-color: $base_color;
211
// border-top: 1px solid $borders_color;
212
}
213
// &.csd .sidebar { border-top-style: none; }
215
.sidebar label {
217
min-height: $medium_size;
218
padding: 0 12px;
219
color: $tertiary_fg_color;
220
font-weight: 500;
221
&.highlight { color: $fg_color; }
223
}
224
}
225
%osd, .osd { opacity: $higher_opacity; }
227
/*********************
230
* Spinner Animation *
231
*********************/
232
@keyframes spin {
233
to { -gtk-icon-transform: rotate(1turn); }
234
}
235
@keyframes spin_colors {
237
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
238
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
239
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
240
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
241
}
242
spinner {
244
background: none;
245
opacity: 0; // non spinning spinner makes no sense
246
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
247
&:checked {
249
opacity: 1;
250
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
251
&:disabled { opacity: $disabled_opacity; }
253
}
254
}
255
/****************
258
* Text Entries *
259
****************/
260
%entry,
261
entry {
262
%entry_basic, & {
263
min-height: $medium_size;
264
padding: 0 8px;
265
border-radius: 2px;
266
@include entry(normal);
268
&:focus { @include entry(focus); }
270
&:disabled { @include entry(insensitive); }
272
&.flat {
274
border-radius: 0;
275
@include entry(flat-normal);
277
&:focus { @include entry(flat-focus); }
279
&:disabled { @include entry(flat-insensitive); }
281
}
282
image { // icons inside the entry
284
color: gtkalpha(currentColor, $enabled_opacity);
285
&:hover, &:active { color: currentColor; }
287
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
289
&.left { padding-left: 2px; padding-right: 6px; }
291
&.right { padding-left: 6px; padding-right: 2px; }
293
}
294
undershoot {
296
&.left { @include undershoot(left); }
297
&.right { @include undershoot(right); }
299
}
300
selection { @extend %selected_items; }
302
// entry error and warning style
304
@each $e_type, $e_color in (error, $error_color),
305
(warning, $warning_color) {
306
&.#{$e_type} {
307
@include entry(normal, $e_color);
308
&:focus { @include entry(focus, $e_color); }
310
&:disabled { @include entry(insensitive, $e_color); }
312
&.flat {
314
@include entry(flat-normal, $e_color);
315
&:focus { @include entry(flat-focus, $e_color); }
317
&:disabled { @include entry(flat-insensitive, $e_color); }
319
}
320
}
321
}
322
&:drop(active) {
324
// box-shadow: inset 0 0 0 2px $accent_bg_color;
325
}
326
.osd & {
328
}
329
}
330
progress {
332
margin: 2px -6px;
333
border-style: none none solid;
334
border-width: 2px;
335
border-color: $selected_bg_color;
336
// border-radius: 0;
337
// box-shadow: none;
338
background-color: transparent;
339
// background-image: none;
340
}
341
// linked entries
343
.linked:not(.vertical) > &:not(.flat) { @extend %linked; }
344
// Vertically linked entries
346
.linked.vertical > &:not(.flat) { @extend %linked_vertical; }
347
}
348
treeview acceleditor > label { background-color: $selected_bg_color; }
350
treeview entry {
352
&.flat, & {
353
min-height: 0;
354
padding: 2px;
355
border-radius: 0;
356
background-color: $base_color;
357
&, &:focus {
359
border-image: none;
360
box-shadow: none;
361
}
362
}
363
}
364
/***********
367
* Buttons *
368
***********/
369
// stuff for .needs-attention
370
@keyframes needs_attention {
371
from {
372
background-image: -gtk-gradient(radial,
373
center center, 0,
374
center center, 0.001,
375
to($accent_bg_color),
376
to(transparent));
377
}
378
to {
380
background-image: -gtk-gradient(radial,
381
center center, 0,
382
center center, 0.5,
383
to($accent_bg_color),
384
to(transparent));
385
}
386
}
387
%button,
389
button {
390
@at-root %button_basic, & {
391
min-height: 24px;
392
min-width: 16px;
393
padding: 6px 10px;
394
border-radius: 2px;
395
font-weight: 500;
396
@include button(normal);
398
&:hover { @include button(hover); }
400
&:active { @include button(active); }
402
&:disabled { @include button(insensitive); }
404
&:checked { @include button(checked); }
406
&:checked:disabled { @include button(checked-insensitive); }
408
&.flat {
410
@include button(flat-normal);
411
&:hover { @include button(flat-hover); }
413
&:active { @include button(flat-active); }
415
&:disabled { @include button(flat-insensitive); }
417
&:checked { @include button(flat-checked); }
419
&:checked:disabled { @include button(flat-checked-insensitive); }
421
}
422
&.image-button {
424
min-width: 24px;
425
padding: 6px;
426
-gtk-outline-radius: 100px;
427
border-radius: 100px;
428
}
429
&.text-button {
431
padding-left: 16px;
432
padding-right: 16px;
433
}
434
&.text-button.image-button {
436
padding-left: 10px;
437
padding-right: 10px;
438
-gtk-outline-radius: 2px;
439
border-radius: 2px;
440
label {
442
&:last-child { padding-left: 2px; padding-right: 6px; }
443
&:first-child { padding-left: 6px; padding-right: 2px; }
444
}
445
}
446
.linked > & { @extend %linked; }
448
.linked.vertical > & { @extend %linked_vertical; }
450
.linked > &.flat,
452
.linked.vertical > &.flat {
453
border-radius: 2px;
454
&.image-button {
456
-gtk-outline-radius: 100px;
457
border-radius: 100px;
458
}
459
&.text-button.image-button {
461
-gtk-outline-radius: 2px;
462
border-radius: 2px;
463
}
464
}
465
&:drop(active) {
467
// box-shadow: inset 0 0 0 2px $accent_bg_color;
468
}
469
}
470
@at-root %button_selected, row:selected & {
472
&:disabled { color: $insensitive_secondary_selected_fg_color; }
473
&.flat {
475
color: $secondary_selected_fg_color;
476
&:hover, &:active { color: $selected_fg_color; }
478
&:disabled { color: $insensitive_secondary_selected_fg_color; }
480
}
481
}
482
separator {
484
min-width: 0;
485
min-height: 0;
486
background: transparent;
487
}
488
// big standalone buttons like in Documents pager
490
&.osd {
491
padding: 12px 16px;
492
&.image-button { padding: 12px; }
494
&:disabled { opacity: 0; }
496
}
497
//overlay / OSD style
499
@at-root %osd_button,
500
.osd & {
501
}
502
// Suggested and Destructive Action buttons
504
@each $b_type, $b_color in (suggested-action, $suggested_color),
505
(destructive-action, $destructive_color) {
506
&.#{$b_type} {
507
background-color: $b_color;
508
color: $selected_fg_color;
509
// @include button(normal, $b_color, white);
511
// &:hover { @include button(hover, $b_color, white); }
513
// &:active, &:checked { @include button(active, $b_color, white); }
515
&:disabled { @include button(insensitive, $b_color, white); }
517
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
519
&.flat {
521
background-color: transparent;
522
color: $b_color;
523
// @include button(flat-normal, $b_color, white);
525
// &:hover { @include button(flat-hover, $b_color, white); }
527
// &:active, &:checked { @include button(flat-active, $b_color, white); }
529
&:disabled { @include button(flat-insensitive, $b_color, white); }
531
}
532
.osd & {
534
}
535
}
536
}
537
.stack-switcher > & {
539
// to position the needs attention dot, padding is added to the button
540
// child, a label needs just lateral padding while an icon needs vertical
541
// padding added too.
542
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
544
> label {
546
padding-left: 6px; // label padding
547
padding-right: 6px; //
548
}
549
> image {
551
padding-left: 6px; // image padding
552
padding-right: 6px; //
553
padding-top: 3px; //
554
padding-bottom: 3px; //
555
}
556
&.text-button {
558
// compensate text-button paddings
559
padding-left: 10px;
560
padding-right: 10px;
561
}
562
&.image-button {
564
// we want image buttons to have a 1:1 aspect ratio, so compensation
565
// of the padding added to the GtkImage is needed
566
padding-left: 4px;
567
padding-right: 4px;
568
}
569
&.needs-attention {
571
> label,
572
> image { @extend %needs_attention; }
573
&:checked {
575
> label,
576
> image {
577
animation: none;
578
background-image: none;
579
}
580
}
581
}
582
}
583
// inline-toolbar buttons
585
.inline-toolbar & {
586
@extend %button_basic.flat;
587
&:not(.text-button) { @extend %button_basic.image-button; }
589
}
590
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
592
}
593
%needs_attention {
595
animation: needs_attention $material_slower $material_ease_out forwards;
596
background-repeat: no-repeat;
597
background-position: right 3px;
598
background-size: 6px 6px;
599
&:dir(rtl) { background-position: left 3px; }
601
}
602
// all the following is for the +|- buttons on inline toolbars, that way
604
// should really be deprecated...
605
.inline-toolbar toolbutton > button { // redefining the button look is
606
// needed since those are flat...
607
}
608
// More inline toolbar buttons
610
toolbar.inline-toolbar toolbutton {
611
// > button.flat { @extend %linked_middle; }
612
// &:first-child > button.flat { @extend %linked:first-child; }
614
// &:last-child > button.flat { @extend %linked:last-child; }
616
// &:only-child > button.flat { @extend %linked:only-child; }
618
}
619
%linked_middle {
621
border-radius: 0;
622
}
623
%linked {
625
-gtk-outline-radius: 2px;
626
@extend %linked_middle;
628
&:first-child {
630
border-top-left-radius: 2px;
631
border-bottom-left-radius: 2px;
632
}
633
&:last-child {
635
border-top-right-radius: 2px;
636
border-bottom-right-radius: 2px;
637
}
638
&:only-child {
640
border-radius: 2px;
641
}
642
}
643
%linked_vertical_middle {
645
border-radius: 0;
646
}
647
%linked_vertical{
649
-gtk-outline-radius: 2px;
650
@extend %linked_vertical_middle;
652
&:first-child {
654
border-top-left-radius: 2px;
655
border-top-right-radius: 2px;
656
}
657
&:last-child {
659
border-bottom-left-radius: 2px;
660
border-bottom-right-radius: 2px;
661
}
662
&:only-child {
664
border-radius: 2px;
665
}
666
}
667
/* menu buttons */
669
modelbutton.flat,
670
.menuitem.button.flat {
671
min-height: $menuitem_size;
672
padding-left: 8px;
673
padding-right: 8px;
674
border-radius: 2px;
675
color: inherit;
676
@extend %button_basic.flat;
678
&:selected { @extend %selected_items; }
680
check,
682
radio {
683
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
684
&, &:hover { background-image: none; }
686
&:active { animation: none; }
688
&:last-child { margin-left: -8px; margin-right: -16px; }
690
&:first-child { margin-left: -16px; margin-right: -8px; }
692
}
693
check:not(:indeterminate):checked { @extend %check_checked; }
695
// radio:not(:indeterminate):checked { @extend %radio_checked; }
697
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
699
}
700
modelbutton.flat arrow {
702
background: none;
703
&:hover { background: none; }
705
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
707
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
709
}
710
button.color {
712
min-height: $small_size;
713
min-width: $small_size;
714
padding: $container_padding;
715
colorswatch:only-child {
717
// &, overlay { border-radius: 0; }
718
}
719
}
720
/*********
723
* Links *
724
*********/
725
*:link {
726
&, &:hover, &:active { color: $link_color; }
727
&:visited {
729
&, &:hover, &:active { color: $link_visited_color; }
730
}
731
@at-root %link_selected,
733
&:selected,
734
*:selected & { color: $selected_fg_color; }
735
}
736
button:link,
738
button:visited {
739
@extend *:link;
740
> label { text-decoration-line: underline; }
742
}
743
/*****************
745
* GtkSpinButton *
746
*****************/
747
spinbutton {
748
&:not(.vertical) {
749
// in this horizontal configuration, the whole spinbutton
750
// behaves as the entry, so we extend the entry styling
751
// and nuke the style on the internal entry
752
@extend %entry;
753
padding: 0;
755
%spinbutton_entry,
757
entry {
758
min-width: $large_size - 16px;
759
// reset all the other props since the spinbutton node is styled here
760
margin: 0;
761
border-image: none;
762
border-radius: 0;
763
box-shadow: none;
764
background-color: transparent;
765
}
766
button {
768
min-height: $small_size;
769
min-width: $small_size;
770
// margin: $container_padding;
771
padding: 0;
772
border: solid $container_padding transparent;
773
@extend %button_basic.flat;
775
@extend %button_basic.image-button;
777
&.up { margin-left: -$container_padding / 2; }
779
&.down { margin-right: -$container_padding / 2; }
781
}
782
}
783
// OSD horizontal
785
.osd &:not(.vertical) {
786
button {
787
}
788
}
789
// Vertical
791
&.vertical {
792
// in the vertical configuration, we treat the spinbutton
793
// as a box, and tweak the style of the entry in the middle
794
// so that it's linked
795
// FIXME: this should not be set at all, but otherwise it gets the wrong
797
// color
798
&:disabled { color: $insensitive_fg_color; }
799
&:drop(active) {
801
box-shadow: none;
802
}
803
entry {
805
min-height: $medium_size;
806
min-width: $large_size;
807
padding: 0;
808
}
809
button {
811
min-height: $medium_size;
812
min-width: $large_size;
813
padding: 0;
814
@extend %button_basic.flat;
816
&.up { border-radius: 2px 2px 0 0; }
818
&.down { border-radius: 0 0 2px 2px; }
820
}
821
}
822
// OSD vertical
824
.osd &.vertical button:first-child {
825
}
826
// Misc
828
treeview &:not(.vertical) {
829
min-height: 0;
830
border-style: none;
831
border-radius: 0;
832
entry {
834
min-height: 0;
835
padding: 1px 2px;
836
}
837
}
838
}
839
/**************
842
* ComboBoxes *
843
**************/
844
combobox {
845
arrow {
846
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
847
min-height: 16px;
848
min-width: 16px;
849
}
850
menu,
852
.menu {
853
padding: 2px 0;
854
menuitem {
856
min-height: $medium_size;
857
padding: 0 10px;
858
}
859
}
860
&.linked {
862
button:nth-child(2) {
863
&:dir(ltr) { @extend %linked:last-child; }
864
&:dir(rtl) { @extend %linked:first-child; }
865
}
866
}
867
&:drop(active) { // FIXME: untested
869
box-shadow: none;
870
// button.combo { @extend %button_basic:drop(active); }
872
}
873
}
874
.linked > combobox > box > button.combo {
876
// the combo is a composite widget so the way we do button linking doesn't
877
// work, special case needed. See
878
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
879
&:dir(ltr),
881
&:dir(rtl) { @extend %linked_middle; } // specificity bump
882
}
883
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
885
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
886
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
887
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
889
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
890
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
891
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
892
/************
895
* Toolbars *
896
************/
897
toolbar {
898
-GtkWidget-window-dragging: true;
899
padding: $container_padding / 2;
900
background-color: $bg_color;
901
// on OSD
903
.osd & { background-color: transparent; }
904
// stand-alone OSD toolbars
906
&.osd {
907
transition: $shadow_transition;
908
padding: $container_padding;
909
border-radius: 2px;
910
box-shadow: $z-depth-2;
911
background-color: $base_color;
912
&:backdrop { box-shadow: $z-depth-1; }
914
&.left,
916
&.right,
917
&.top,
918
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
919
button { @extend %button_basic.flat; }
921
}
922
// toolbar separators
924
&.horizontal separator { margin: $container_padding / 2; }
925
&.vertical separator { margin: $container_padding / 2; }
926
&:not(.inline-toolbar):not(.osd) {
928
scale,
929
entry,
930
spinbutton,
931
button { margin: $container_padding / 2; }
932
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
934
}
935
}
936
//searchbar, location-bar & inline-toolbar
938
.inline-toolbar {
939
padding: $container_padding;
940
border-style: solid;
941
border-width: 0 1px 1px;
942
border-color: $borders_color;
943
background-color: $secondary_base_color;
944
}
945
searchbar,
947
.location-bar {
948
padding: $container_padding;
949
border-style: solid;
950
border-width: 0 0 1px;
951
border-color: $borders_color;
952
background-color: $bg_color;
953
background-clip: border-box;
954
}
955
/***************
958
* Header bars *
959
***************/
960
%titlebar,
961
headerbar {
962
transition: background-color $material_faster $material_ease_out, color $material_faster $material_ease_out;
963
min-height: $large_size;
964
padding: 0 $container_padding;
965
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
966
background-color: $headerbar_color;
967
color: $selected_fg_color;
968
&:backdrop {
970
color: $secondary_selected_fg_color;
971
}
972
.title {
974
padding-left: 12px;
975
padding-right: 12px;
976
font-weight: bold;
977
}
978
.subtitle {
980
padding-left: 12px;
981
padding-right: 12px;
982
font-size: smaller;
983
@extend .dim-label;
985
}
986
button:not(.suggested-action):not(.destructive-action) {
988
@extend %button_basic.flat;
989
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
991
currentColor 0%,
992
transparent 0%)
993
0 0 0 / 0 0 0px;
994
color: gtkalpha(currentColor, $enabled_opacity);
995
&:hover, &:active { color: currentColor; }
997
&:disabled {
999
color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity);
1000
> label { color: inherit; }
1002
}
1003
&:checked {
1005
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1006
currentColor 100%,
1007
transparent 0%)
1008
0 0 2 / 0 0 2px;
1009
background-color: transparent;
1010
color: currentColor;
1011
&:disabled {
1013
background-color: transparent;
1014
color: gtkalpha(currentColor, $disabled_opacity);
1015
> label { color: inherit; }
1017
}
1018
}
1019
}
1020
button.suggested-action, button.destructive-action {
1022
&:disabled {
1023
color: gtkalpha(currentColor, $disabled_opacity);
1024
> label { color: inherit; }
1026
}
1027
}
1028
&.selection-mode {
1030
transition: background-color 0 $material_slower, color $material_faster $material_ease_out;
1031
animation: header_ripple_effect $material_slower $material_ease_out;
1032
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1033
background-color: $selected_bg_color;
1034
color: $selected_fg_color;
1035
&:backdrop {
1037
color: $secondary_selected_fg_color;
1038
}
1039
.subtitle:link { @extend *:link:selected; }
1041
button:not(.suggested-action):not(.destructive-action) {
1043
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1044
currentColor 0%,
1045
transparent 0%)
1046
0 0 0 / 0 0 0px;
1047
// color: gtkalpha(currentColor, $enabled_opacity);
1048
&, &:hover, &:active { color: currentColor; }
1050
&:disabled {
1052
color: gtkalpha(currentColor, $disabled_opacity);
1053
> label { color: inherit; }
1055
}
1056
&:checked {
1058
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1059
currentColor 100%,
1060
transparent 0%)
1061
0 0 2 / 0 0 2px;
1062
color: currentColor;
1063
&:disabled {
1065
color: gtkalpha(currentColor, $disabled_opacity);
1066
> label { color: inherit; }
1068
}
1069
}
1070
}
1071
.selection-menu {
1073
padding-left: 16px;
1074
padding-right: 16px;
1075
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1077
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1079
}
1080
}
1081
.fullscreen &,
1083
.tiled &,
1084
.maximized & {
1085
border-radius: 0; // squared corners when the window is max'd or tiled
1086
box-shadow: $z-depth-1;
1087
}
1088
&.default-decoration {
1090
min-height: $small_size;
1091
padding: $container_padding;
1092
border-width: 0;
1093
button.titlebutton {
1095
min-height: $small_size;
1096
min-width: $small_size;
1097
margin: 0;
1098
padding: 0;
1099
&:active { // add fallback
1101
background-image: radial-gradient(circle farthest-corner at center,
1102
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1103
transparent 0%),
1104
image(gtkalpha(currentColor, $lower_opacity / 2));
1105
}
1106
}
1107
}
1108
}
1109
headerbar {
1111
// add vertical margins to headerbar entries, buttons and separators to avoid them spanning the whole height
1112
entry,
1113
spinbutton,
1114
// separator,
1115
button {
1116
margin-top: $container_padding;
1117
margin-bottom: $container_padding;
1118
}
1119
}
1120
.titlebar {
1122
border-top-left-radius: 2px;
1123
border-top-right-radius: 2px;
1124
}
1125
headerbar {
1127
separator:first-child + &, // tackles the paned container case
1128
&:first-child {
1129
border-top-left-radius: 2px;
1130
.tiled &,
1132
.maximized & { border-radius: 0; }
1133
}
1134
&:last-child {
1136
border-top-right-radius: 2px;
1137
.tiled &,
1139
.maximized & { border-radius: 0; }
1140
}
1141
}
1142
.titlebar:not(headerbar) {
1144
window.csd > & {
1145
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1146
padding: 0;
1147
background-color: transparent;
1148
background-image: none;
1149
border-style: none;
1150
box-shadow: none;
1151
}
1152
> separator {
1154
background-color: $headerbar_color;
1155
background-image: image($borders_color);
1156
}
1157
@extend %titlebar;
1159
}
1160
/************
1163
* Pathbars *
1164
************/
1165
.path-bar button {
1166
&.text-button, &.image-button, & {
1167
padding-left: 6px;
1168
padding-right: 6px;
1169
}
1170
&.text-button.image-button, & {
1172
// label:last-child { padding-left: 2px; padding-right: 8px; }
1173
// label:first-child { padding-left: 8px; padding-right: 2px; }
1174
}
1175
image {
1177
padding-left: 4px;
1178
padding-right: 4px;
1179
}
1180
&.slider-button {
1182
padding-left: 0;
1183
padding-right: 0;
1184
}
1185
}
1186
/**************
1189
* Tree Views *
1190
**************/
1191
treeview.view {
1192
-GtkTreeView-grid-line-width: 1;
1193
-GtkTreeView-grid-line-pattern: '';
1194
-GtkTreeView-tree-line-width: 1;
1195
-GtkTreeView-tree-line-pattern: '';
1196
-GtkTreeView-expander-size: 16;
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
}
1295
/*********
1298
* Menus *
1299
*********/
1300
menubar,
1301
.menubar {
1302
-GtkWidget-window-dragging: true;
1303
padding: 0;
1304
// box-shadow: inset 0 -1px $borders_color;
1305
background-color: $headerbar_color;
1306
> menuitem {
1308
transition: background-color $material_faster $material_ease_out;
1309
min-height: 20px;
1310
padding: 4px 8px;
1311
color: $secondary_selected_fg_color;
1312
&:hover { //Seems like it :hover even with keyboard focus
1314
transition: none;
1315
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1316
color: $selected_fg_color;
1317
}
1318
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1320
}
1321
}
1322
menu,
1324
.menu {
1325
margin: 4px 0;
1326
padding: 4px 0;
1327
background-color: $base_color;
1328
border: 1px solid $borders_color; // adds borders in a non composited env
1329
.csd & {
1331
border: none; // axes borders in a composited env
1332
border-radius: 2px;
1333
}
1334
menuitem {
1336
transition: background-color $material_faster $material_ease_out;
1337
min-height: 20px;
1338
min-width: 40px;
1339
padding: 4px 8px;
1340
font: initial;
1341
text-shadow: none;
1342
&:hover {
1344
transition: none;
1345
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1346
}
1347
&:disabled { color: $insensitive_fg_color; }
1349
// submenu indicators
1351
arrow {
1352
min-height: 16px;
1353
min-width: 16px;
1354
&:dir(ltr) {
1356
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1357
margin-left: 8px;
1358
}
1359
&:dir(rtl) {
1361
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1362
margin-right: 8px;
1363
}
1364
}
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
separator { margin: 4px 0; }
1450
list separator { margin: 0; }
1452
}
1453
/*************
1455
* Notebooks *
1456
*************/
1457
notebook {
1458
> header {
1459
border-width: 1px;
1460
border-color: $borders_color;
1461
background-color: $bg_color;
1462
background-clip: border-box;
1463
&.top {
1465
border-bottom-style: solid;
1466
> tabs {
1467
margin-bottom: -1px;
1468
> tab {
1469
&:hover { box-shadow: inset 0 -2px $track_color; }
1471
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1473
}
1474
}
1475
}
1476
&.bottom {
1478
border-top-style: solid;
1479
> tabs {
1480
margin-top: -1px;
1481
> tab {
1482
&:hover { box-shadow: inset 0 2px $track_color; }
1484
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1486
}
1487
}
1488
}
1489
&.left {
1491
border-right-style: solid;
1492
> tabs {
1493
margin-right: -1px;
1494
> tab {
1495
&:hover { box-shadow: inset -2px 0 $track_color; }
1497
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1499
}
1500
}
1501
}
1502
&.right {
1504
border-left-style: solid;
1505
> tabs {
1506
margin-left: -1px;
1507
> tab {
1508
&:hover { box-shadow: inset 2px 0 $track_color; }
1510
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1512
}
1513
}
1514
}
1515
&.top > tabs > arrow {
1517
@extend %notebook_vert_arrows;
1518
border-top-style: none;
1520
}
1521
&.bottom > tabs > arrow {
1523
@extend %notebook_vert_arrows;
1524
border-bottom-style: none;
1526
}
1527
@at-root %notebook_vert_arrows {
1529
padding-left: 4px;
1530
padding-right: 4px;
1531
&.down {
1533
margin-left: -8px;
1534
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1535
}
1536
&.up {
1538
margin-right: -8px;
1539
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1540
}
1541
}
1542
&.left > tabs > arrow {
1544
@extend %notebook_horz_arrows;
1545
border-left-style: none;
1547
}
1548
&.right > tabs > arrow {
1550
@extend %notebook_horz_arrows;
1551
border-right-style: none;
1553
}
1554
@at-root %notebook_horz_arrows {
1556
padding-top: 4px;
1557
padding-bottom: 4px;
1558
&.down {
1560
margin-top: -8px;
1561
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1562
}
1563
&.up {
1565
margin-bottom: -8px;
1566
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1567
}
1568
}
1569
> tabs > arrow {
1571
@extend %button_basic.flat;
1572
min-height: 16px;
1574
min-width: 16px;
1575
border-radius: 0;
1576
}
1577
tab {
1579
transition: $material_transition;
1580
min-height: 24px;
1581
min-width: 24px;
1582
padding: 6px 12px;
1583
outline-offset: -6px;
1585
border-width: 1px; // for reorderable tabs
1587
border-color: transparent; //
1588
color: $secondary_fg_color;
1590
font-weight: 500;
1591
&:hover {
1593
color: $fg_color;
1594
&.reorderable-page {
1596
border-color: $borders_color;
1597
background-color: $secondary_base_color;
1598
}
1599
}
1600
&:disabled { color: $insensitive_secondary_fg_color; }
1602
&:checked {
1604
animation: tab_ripple_effect $material_slower * 3 $material_ease_out;
1605
color: $fg_color;
1606
&:disabled { color: $insensitive_fg_color; }
1608
&.reorderable-page {
1610
border-color: $borders_color;
1611
background-color: $base_color;
1612
}
1613
}
1614
// colors the button like the label, overridden otherwise
1616
button.flat {
1617
// FIXME: generalize .small-button?
1618
min-width: $small_size;
1619
min-height: $small_size;
1620
padding: 0;
1621
@extend %button_basic.image-button;
1623
&:last-child {
1625
margin-left: 6px;
1626
margin-right: -6px;
1627
}
1628
&:first-child {
1630
margin-left: -6px;
1631
margin-right: 6px;
1632
}
1633
}
1634
}
1635
&.top,
1637
&.bottom {
1638
tabs {
1639
padding-left: 8px;
1640
padding-right: 8px;
1641
&:not(:only-child) {
1643
&:first-child { margin-left: 0; }
1644
&:last-child { margin-right: 0; }
1645
}
1646
tab {
1648
&.reorderable-page {
1649
margin: 0 -1px;
1650
border-style: none solid;
1651
}
1652
}
1653
}
1654
}
1655
&.left,
1657
&.right {
1658
tabs {
1659
padding-top: 8px;
1660
padding-bottom: 8px;
1661
&:not(:only-child) {
1663
&:first-child { margin-top: 0; }
1664
&:last-child { margin-bottom: 0; }
1665
}
1666
tab {
1668
&.reorderable-page {
1669
margin: -1px 0;
1670
border-style: solid none;
1671
}
1672
}
1673
}
1674
}
1675
}
1676
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1678
background-color: $base_color;
1679
entry,
1681
spinbutton:not(.vertical) { @extend %entry.flat; }
1682
revealer entry,
1684
revealer spinbutton:not(.vertical) { @extend %entry; }
1685
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1687
}
1688
}
1689
/**************
1692
* Scrollbars *
1693
**************/
1694
scrollbar {
1695
$_slider_min_length: 24px;
1696
// disable steppers
1698
@at-root * {
1699
-GtkScrollbar-has-backward-stepper: false;
1700
-GtkScrollbar-has-forward-stepper: false;
1701
}
1702
transition: $material_transition;
1704
background-color: $base_color;
1705
background-clip: $extra_background_clip;
1706
// scrollbar border
1708
&.top { border-bottom: 1px solid $borders_color; }
1709
&.bottom { border-top: 1px solid $borders_color; }
1710
&.left { border-right: 1px solid $borders_color; }
1711
&.right { border-left: 1px solid $borders_color; }
1712
// slider
1714
slider {
1715
transition: all $material_faster $material_ease_out, margin 0, border-width 0;
1716
min-width: 8px;
1717
min-height: 8px;
1718
border: 4px solid transparent;
1719
border-radius: 100px;
1720
background-clip: padding-box;
1721
background-color: $tertiary_fg_color;
1722
&:hover { background-color: $secondary_fg_color; }
1724
&:active { background-color: $fg_color; }
1726
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1728
}
1729
&.fine-tune {
1731
slider {
1732
transition: all $material_faster $material_ease_out, margin 0, border-width 0, min-width 0, min-height 0;
1733
min-width: 4px;
1734
min-height: 4px;
1735
}
1736
&.horizontal slider { margin: 2px 0; }
1738
&.vertical slider { margin: 0 2px; }
1740
}
1741
&.overlay-indicator {
1743
&:not(.dragging):not(.hovering) {
1744
border-color: transparent;
1745
background-color: transparent;
1746
slider {
1748
min-width: 4px;
1749
min-height: 4px;
1750
margin: 2px;
1751
border: 2px solid scale-alpha($base_color, $lower_opacity);
1752
}
1753
button {
1755
min-width: 4px;
1756
min-height: 4px;
1757
margin: 2px;
1758
border: 2px solid scale-alpha($base_color, $lower_opacity);
1759
border-radius: 100px;
1760
background-color: $tertiary_fg_color;
1761
background-clip: padding-box;
1762
-gtk-icon-source: none;
1763
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1765
}
1766
&.horizontal {
1768
slider { min-width: $_slider_min_length; }
1769
button { min-width: 8px; }
1771
}
1772
&.vertical {
1774
slider { min-height: $_slider_min_length; }
1775
button { min-height: 8px; }
1777
}
1778
}
1779
&.dragging,
1781
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1782
}
1783
&.horizontal slider { min-width: $_slider_min_length; }
1785
&.vertical slider { min-height: $_slider_min_length; }
1787
// button styling
1789
button {
1790
@extend %button_basic.flat;
1791
min-width: 16px;
1792
min-height: 16px;
1793
padding: 0;
1794
border-radius: 0;
1795
}
1796
// button icons
1798
&.vertical {
1799
button {
1800
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1801
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1803
}
1804
}
1805
&.horizontal {
1807
button {
1808
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1809
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1811
}
1812
}
1813
}
1814
/**********
1817
* Switch *
1818
**********/
1819
switch {
1820
transition: $material_transition;
1821
margin: $container_padding 0;
1822
border: 4px solid transparent;
1823
border-radius: 100px;
1824
background-color: $track_color;
1825
background-clip: padding-box;
1826
font-size: 0;
1827
&:disabled { color: $insensitive_fg_color; }
1829
&:checked {
1831
background-color: scale-alpha($accent_bg_color, 0.5);
1832
&:disabled {
1834
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1835
color: $insensitive_fg_color;
1836
}
1837
}
1838
slider {
1840
@include entry(normal);
1841
transition: $material_transition, margin 0;
1843
min-width: $small_size;
1844
min-height: $small_size;
1845
margin: -4px 0 -4px -4px;
1846
-gtk-outline-radius: 100px;
1847
border-radius: 100px;
1848
}
1849
&:hover slider { @include entry(focus); }
1851
&:disabled slider { @include entry(insensitive); }
1853
&:checked slider {
1855
transition: $material_transition, margin 0, background-image 0, background-color 0 $material_slower;
1856
animation: needs_attention $material_slower $material_ease_out;
1857
margin: -4px -4px -4px 0;
1858
background-color: $accent_bg_color;
1859
color: $selected_fg_color;
1860
}
1861
&:checked:disabled slider { animation: none; }
1863
row:selected & {
1865
}
1866
}
1867
/*************************
1870
* Check and Radio items *
1871
*************************/
1872
// draw regular check and radio items using our PNG assets
1873
// all assets are rendered from assets.svg. never add pngs directly
1874
//selection-mode
1876
@each $s,$as in ('','-selectionmode'),
1877
(':hover', '-hover-selectionmode'),
1878
(':checked', '-checked-selectionmode'),
1879
(':checked:hover', '-checked-hover-selectionmode') {
1880
.view.content-view.check#{$s}:not(list) {
1881
-gtk-icon-shadow: $z-depth-1;
1882
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1883
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1884
margin: 8px;
1885
background-color: transparent;
1886
}
1887
}
1888
checkbutton.text-button,
1890
radiobutton.text-button {
1891
// this is for a nice focus on check and radios text
1892
padding: 2px;
1893
outline-offset: 0;
1894
label:not(:only-child) { margin: 0 4px; }
1896
}
1897
check,
1899
radio {
1900
min-height: 24px;
1901
min-width: 24px;
1902
margin: -12px;
1903
padding: 12px;
1904
@extend %button_basic.flat;
1906
@extend %button_basic.image-button;
1908
&:checked, &:checked:disabled { background-color: transparent; }
1910
&:checked, &:indeterminate { color: $accent_bg_color; }
1912
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1914
// &:only-child { margin: -12px; }
1916
row &:not(:checked):not(:indeterminate) {
1918
color: gtkalpha(currentColor, $enabled_opacity);
1919
&:hover, &:active { color: currentColor; }
1921
}
1922
menu menuitem & {
1924
transition: none;
1925
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1926
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1928
&, &:hover, &:disabled {
1930
background-image: none;
1931
// color: inherit;
1932
// animation: none;
1933
}
1934
}
1935
}
1936
%check,
1938
check {
1939
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1940
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1941
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1943
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1944
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1946
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1947
}
1948
%radio,
1950
radio {
1951
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1952
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1953
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1955
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1956
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1958
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1959
border-image: -gtk-gradient(radial,
1961
center center, 0,
1962
center center, 0.001,
1963
to($accent_bg_color),
1964
to(transparent))
1965
24 / 24px;
1966
&:checked {
1968
border-image: -gtk-gradient(radial,
1969
center center, 0,
1970
center center, (10 / 48 / 2),
1971
to($accent_bg_color),
1972
to(transparent))
1973
24 / 24px;
1974
}
1975
&:checked:disabled {
1977
border-image: -gtk-gradient(radial,
1978
center center, 0,
1979
center center, (10 / 48 / 2),
1980
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1981
to(transparent))
1982
24 / 24px;
1983
}
1984
&:indeterminate:checked {
1986
border-image: -gtk-gradient(radial,
1987
center center, 0,
1988
center center, 0.001,
1989
to($accent_bg_color),
1990
to(transparent))
1991
24 / 24px;
1992
}
1993
}
1994
// let's animate things
1996
@keyframes check_check {
1997
from { -gtk-icon-transform: rotate(90deg); }
1998
to { -gtk-icon-transform: unset; }
1999
}
2000
@keyframes check_radio { // FIXME: cannot animate border-image
2002
from {
2003
border-image: -gtk-gradient(radial,
2004
center center, 0,
2005
center center, 0.001,
2006
to($accent_bg_color),
2007
to(transparent))
2008
24 / 24px;
2009
}
2010
to {
2012
border-image: -gtk-gradient(radial,
2013
center center, 0,
2014
center center, (10 / 48 / 2),
2015
to($accent_bg_color),
2016
to(transparent))
2017
24 / 24px;
2018
}
2019
}
2020
@keyframes check_indeterminate {
2022
from { -gtk-icon-transform: unset; }
2023
50% { -gtk-icon-transform: scale(0, 1); }
2024
to { -gtk-icon-transform: unset; }
2025
}
2026
%check_checked,
2028
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
2029
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2031
// %radio_checked,
2033
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
2034
// radio:not(:indeterminate):checked:active { animation: check_radio $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2036
%indeterminate_checked,
2038
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
2039
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2041
// no animations in menus
2043
menu menuitem {
2044
check:not(:indeterminate):checked,
2045
radio:not(:indeterminate):checked,
2046
check:indeterminate:checked,
2047
radio:indeterminate:checked { animation: none; }
2048
}
2049
treeview.view check,
2051
treeview.view radio {
2052
padding: 0;
2053
&:checked:hover, &:selected:checked:hover { background-image: none; }
2055
& {
2057
color: $secondary_fg_color;
2058
&:hover, &:active { color: $fg_color; }
2060
&:disabled { color: $insensitive_secondary_fg_color; }
2062
&:checked, &:indeterminate { color: $accent_bg_color; }
2064
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2066
}
2067
&:selected {
2069
color: $secondary_selected_fg_color;
2070
&:hover, &:active { color: $selected_fg_color; }
2072
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2074
&:checked, &:indeterminate { color: $accent_bg_color; }
2076
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2078
}
2079
}
2080
treeview.view radio:checked {
2082
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2083
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2084
border-image: none;
2085
}
2086
/************
2089
* GtkScale *
2090
************/
2091
scale {
2092
// sizing
2093
$_marks_lenght: 8px;
2095
$_marks_distance: 8px;
2096
min-height: 12px;
2098
min-width: 12px;
2099
padding: 12px;
2100
* { transition: $material_transition; }
2102
// the slider is inside the trough, so to have make it bigger there's a negative margin
2104
slider {
2105
min-height: $small_size;
2106
min-width: $small_size;
2107
margin: -10px;
2108
}
2109
// the backing bit
2111
trough {
2112
outline-offset: 2px;
2113
background-color: $track_color;
2114
&:disabled { color: $insensitive_fg_color; }
2116
}
2117
// the colored part of the backing bit
2119
highlight {
2120
background-color: $accent_bg_color;
2121
&:disabled { background-color: transparent; }
2123
}
2124
// this is another differently styled part of the backing bit, the most relevant use case is for example
2126
// in media player to indicate how much video stream as been cached
2127
fill {
2128
background-color: $track_color;
2129
&:disabled { background-color: transparent; }
2131
}
2132
slider {
2134
transition: all $material_faster $material_ease;
2135
// border-radius: 100%;
2136
// background-color: $accent_bg_color;
2137
background-repeat: no-repeat;
2138
background-position: center;
2139
@each $s,$as in ('',''),
2141
(':disabled','-insensitive') {
2142
&#{$s} {
2143
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2144
background-image: -gtk-scaled(url('#{$_url}.png'),
2145
url('#{$_url}@2.png'));
2146
}
2147
}
2148
background-size: calc(100% - 8px);
2150
&:hover { background-size: calc(100% - 4px); }
2152
&:active { background-size: calc(100% - 0px); }
2154
}
2155
// click-and-hold the slider to activate
2157
&.fine-tune {
2158
// to make the slider shrink in fine-tune mode
2159
slider { background-size: calc(100% - 12px); }
2160
}
2161
value { color: gtkalpha(currentColor, $hint_opacity); }
2163
marks {
2165
color: $track_color;
2166
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2168
(bottom, bottom, top),
2169
(top, left, right),
2170
(bottom, right, left) {
2171
&.#{$marks_class} {
2172
margin-#{$marks_margin}: $_marks_distance;
2173
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2174
}
2175
}
2176
}
2177
&.horizontal {
2179
indicator {
2180
min-height: $_marks_lenght;
2181
min-width: 1px;
2182
}
2183
}
2184
&.vertical {
2186
indicator {
2187
min-height: 1px;
2188
min-width: $_marks_lenght;
2189
}
2190
}
2191
// *WARNING* scale with marks madness following
2193
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2195
$suffix: if($variant == 'light', '', '-dark');
2196
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2198
('vertical', 'vert') {
2199
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2200
('scale-has-marks-below', ':first-child:not(:only-child)') {
2201
@each $state, $state_infix in ('', ''),
2202
(':disabled', '-insensitive') {
2203
&.#{$dir_class} {
2204
%#{$marks_infix}-#{$dir_infix},
2205
contents#{$nth_child} > trough > slider {
2206
&#{$state} {
2207
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2208
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2210
}
2211
@if $dir_class == 'horizontal' {
2213
min-height: 30px;
2214
min-width: $small_size;
2215
@if $marks_infix == 'scale-has-marks-above' {
2217
margin-top: -16px;
2218
background-position: center calc(100% - 4px);
2220
&:hover { background-position: center calc(100% - 2px); }
2222
&:active { background-position: center calc(100% - 0px); }
2224
}
2225
@if $marks_infix == 'scale-has-marks-below' {
2227
margin-bottom: -16px;
2228
background-position: center calc(4px);
2230
&:hover { background-position: center calc(2px); }
2232
&:active { background-position: center calc(0px); }
2234
}
2235
}
2236
@if $dir_class == 'vertical' {
2238
min-height: $small_size;
2239
min-width: 30px;
2240
@if $marks_infix == 'scale-has-marks-above' {
2242
margin-left: -16px;
2243
background-position: calc(4px) center;
2245
&:hover { background-position: calc(2px) center; }
2247
&:active { background-position: calc(0px) center; }
2249
}
2250
@if $marks_infix == 'scale-has-marks-below' {
2252
margin-right: -16px;
2253
background-position: calc(100% - 4px) center;
2255
&:hover { background-position: calc(100% - 2px) center; }
2257
&:active { background-position: calc(100% - 0px) center; }
2259
}
2260
}
2261
}
2262
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2264
&.fine-tune contents#{$nth_child} > trough > slider {
2265
// bigger negative margins to make the trough grow here as well
2266
@if $dir_class == 'horizontal' {
2268
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2269
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2271
}
2272
@if $dir_class == 'vertical' {
2274
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2275
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2277
}
2278
}
2279
}
2280
}
2281
}
2282
}
2283
&.color {
2285
min-height: 0;
2286
min-width: 0;
2287
&.horizontal {
2289
padding: 0 0 12px 0;
2290
trough {
2292
padding-bottom: $bar_size;
2293
}
2294
slider {
2296
@extend %scale-has-marks-above-horz;
2297
margin-bottom: -10px - $bar_size;
2299
margin-top: 0;
2300
}
2301
}
2302
&.vertical {
2304
&:dir(ltr) {
2305
padding: 0 0 0 12px;
2306
trough {
2308
padding-left: $bar_size;
2309
}
2310
slider {
2312
@extend %scale-has-marks-below-vert;
2313
margin-left: -10px - $bar_size;
2315
margin-right: 0;
2316
}
2317
}
2318
&:dir(rtl) {
2320
padding: 0 12px 0 0;
2321
trough {
2323
padding-right: $bar_size;
2324
}
2325
slider {
2327
@extend %scale-has-marks-above-vert;
2328
margin-right: -10px - $bar_size;
2330
margin-left: 0;
2331
}
2332
}
2333
}
2334
&.fine-tune {
2336
&.horizontal {
2337
slider {
2338
@extend %scale-has-marks-above-horz-fine-tune;
2339
}
2340
}
2341
&.vertical {
2343
&:dir(ltr) {
2344
slider {
2345
@extend %scale-has-marks-below-vert-fine-tune;
2346
}
2347
}
2348
&:dir(rtl) {
2350
slider {
2351
@extend %scale-has-marks-above-vert-fine-tune;
2352
}
2353
}
2354
}
2355
}
2356
}
2357
}
2358
/*****************
2361
* Progress bars *
2362
*****************/
2363
progressbar {
2364
// sizing
2365
&.horizontal {
2366
trough,
2367
progress { min-height: $bar_size; }
2368
}
2369
&.vertical {
2371
trough,
2372
progress { min-width: $bar_size; }
2373
}
2374
// FIXME: insensitive state missing and some other state should be set probably
2376
color: $tertiary_fg_color;
2377
font-size: smaller;
2378
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2380
progress { background-color: $selected_bg_color; }
2382
&.osd { // progressbar.osd used for epiphany page loading progress
2384
// min-width: $bar_size;
2385
// min-height: $bar_size;
2386
// background-color: transparent;
2387
// trough { background-color: transparent; }
2389
progress {
2391
}
2392
}
2393
}
2394
/*************
2397
* Level Bar *
2398
*************/
2399
levelbar {
2400
block {
2401
min-width: $medium_size;
2402
min-height: $bar_size;
2403
}
2404
&.vertical block {
2406
min-width: $bar_size;
2407
min-height: $medium_size;
2408
}
2409
trough {
2411
padding: 2px;
2412
border-radius: 2px;
2413
@include entry(normal);
2415
&:disabled { @include entry(insensitive); }
2417
}
2418
&.horizontal.discrete block { margin: 0 1px; }
2420
&.vertical.discrete block { margin: 1px 0; }
2422
&.horizontal.discrete trough { padding: 2px 1px; }
2424
&.vertical.discrete trough { padding: 1px 2px; }
2426
block {
2428
&.low {
2429
background-color: $warning_color;
2430
}
2431
&.high {
2433
background-color: $selected_bg_color;
2434
}
2435
&.full {
2437
background-color: $success_color;
2438
}
2439
&.empty {
2441
background-color: $track_color;
2442
color: $insensitive_fg_color;
2443
}
2444
}
2445
}
2446
/****************
2449
* Print dialog *
2450
*****************/
2451
printdialog {
2452
paper {
2453
padding: 0;
2454
border: 1px solid $borders_color;
2455
background: $base_color;
2456
color: $fg_color;
2457
}
2458
.dialog-action-box { margin: 12px; }
2460
}
2461
/**********
2464
* Frames *
2465
**********/
2466
frame > border,
2467
.frame {
2468
margin: 0;
2469
padding: 0;
2470
border: 1px solid $borders_color;
2471
border-radius: 0;
2472
box-shadow: none;
2473
&.flat { border-style: none; }
2475
}
2476
actionbar > revealer > box {
2478
padding: $container_padding;
2479
border-top: 1px solid $borders_color;
2480
}
2481
scrolledwindow {
2483
viewport.frame { // avoid double borders when viewport inside scrolled window
2484
border-style: none;
2485
}
2486
// This is used when content is touch-dragged past boundaries.
2488
// draws a box on top of the content, the size changes programmatically.
2489
overshoot {
2490
&.top { @include overshoot(top); }
2491
&.bottom { @include overshoot(bottom); }
2493
&.left { @include overshoot(left); }
2495
&.right { @include overshoot(right); }
2497
}
2498
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2500
undershoot {
2501
&.top { @include undershoot(top); }
2502
&.bottom { @include undershoot(bottom); }
2504
&.left { @include undershoot(left); }
2506
&.right { @include undershoot(right); }
2508
}
2509
junction { // the small square between two scrollbars
2511
border-style: solid none none solid;
2512
border-width: 1px;
2513
border-color: $borders_color;
2514
background-color: $base_color;
2515
&:dir(rtl) { border-style: solid solid none none; }
2517
}
2518
}
2519
//vbox and hbox separators
2521
separator {
2522
min-width: 1px;
2523
min-height: 1px;
2524
background: $borders_color;
2525
}
2526
/*********
2529
* Lists *
2530
*********/
2531
list {
2532
border-color: $borders_color;
2533
background-color: $base_color;
2534
row { padding: 2px; }
2536
}
2537
row {
2539
transition: $material_transition;
2540
&:hover { transition: none; }
2542
&.activatable {
2544
background-image: radial-gradient(circle farthest-corner at center,
2545
gtkalpha(currentColor, 0) 100%,
2546
transparent 0%),
2547
image(gtkalpha(currentColor, 0));
2548
&:hover {
2550
background-image: radial-gradient(circle farthest-corner at center,
2551
gtkalpha(currentColor, 0) 100%,
2552
transparent 0%),
2553
image(gtkalpha(currentColor, 0.05));
2554
}
2555
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2557
&:active {
2558
transition: $material_transition, background-image 0;
2559
animation: row_ripple_effect $material_slower $material_ease_out forwards;
2560
}
2561
}
2562
&:selected { @extend %selected_items; }
2564
}
2565
/*********************
2568
* App Notifications *
2569
*********************/
2570
.app-notification,
2571
.app-notification.frame {
2572
@extend %osd;
2573
@extend toolbar.osd;
2575
margin: 8px;
2577
border { border: none; }
2579
}
2580
/*************
2583
* Expanders *
2584
*************/
2585
expander {
2586
arrow {
2587
transition: all $material_faster $material_ease;
2588
min-width: 16px;
2589
min-height: 16px;
2590
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2591
-gtk-icon-transform: rotate(-90deg);
2592
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2594
&:checked { -gtk-icon-transform: unset; }
2596
color: $secondary_fg_color;
2598
&:hover, &:active { color: $fg_color; }
2600
&:disabled { color: $insensitive_secondary_fg_color; }
2602
&:selected {
2604
color: $secondary_selected_fg_color;
2605
&:hover, &:active { color: $selected_fg_color; }
2607
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2609
}
2610
}
2611
}
2612
/************
2615
* Calendar *
2616
***********/
2617
calendar {
2618
padding: 1px;
2619
border: 1px solid $borders_color;
2620
color: $fg_color;
2621
&:disabled { color: $insensitive_fg_color; }
2623
&:selected {
2625
@extend %selected_items;
2626
border-radius: 2px + 1px;
2628
}
2629
&.header {
2631
border: none;
2632
border-bottom: 1px solid $borders_color;
2633
border-radius: 0;
2634
}
2635
&.button { @extend %button_basic.flat; }
2637
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2639
&.highlight {
2641
color: gtkalpha(currentColor, $hint_opacity);
2642
font-weight: 500;
2643
}
2644
}
2645
/***********
2648
* Dialogs *
2649
***********/
2650
messagedialog { // Message Dialog styling
2651
&.background { background-color: $light_color; }
2652
.titlebar {
2654
min-height: $small_size;
2655
border-style: none;
2656
box-shadow: inset 0 1px $highlight_color;
2657
background-color: $light_color;
2658
}
2659
&.csd { // rounded bottom border styling for csd version
2661
&.background {
2662
// bigger radius for better antialiasing
2663
border-bottom-left-radius: 2px;
2664
border-bottom-right-radius: 2px;
2665
}
2666
.dialog-action-area button {
2668
padding: 8px 16px;
2669
border-top: 1px solid $borders_color;
2670
border-radius: 0;
2671
@extend %button_basic.flat;
2673
&:first-child{ border-bottom-left-radius: 2px; }
2675
&:last-child { border-bottom-right-radius: 2px; }
2677
}
2678
}
2679
}
2680
filechooser {
2682
.dialog-action-box { border-top: 1px solid $borders_color; }
2683
#pathbarbox { border-bottom: 1px solid $borders_color; }
2685
}
2686
filechooserbutton:drop(active) {
2688
box-shadow: none;
2689
}
2690
/***********
2693
* Sidebar *
2694
***********/
2695
.sidebar {
2696
border-style: none;
2697
background-color: $light_color;
2698
@at-root %sidebar_left,
2700
&:dir(ltr),
2701
&.left,
2702
&.left:dir(rtl) {
2703
border-right: 1px solid $borders_color;
2704
border-left-style: none;
2705
}
2706
@at-root %sidebar_right
2708
&:dir(rtl),
2709
&.right {
2710
border-left: 1px solid $borders_color;
2711
border-right-style: none;
2712
}
2713
list { background-color: transparent; }
2715
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2717
}
2718
stacksidebar {
2720
&.sidebar {
2721
&:dir(ltr),
2722
&.left,
2723
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2724
&:dir(rtl),
2726
&.right { list { @extend %sidebar_right; }}
2727
}
2728
row {
2730
padding: 10px 4px;
2731
> label {
2733
padding-left: 6px;
2734
padding-right: 6px;
2735
}
2736
&.needs-attention > label { @extend %needs_attention; }
2738
}
2739
}
2740
/****************
2743
* File chooser *
2744
****************/
2745
placessidebar {
2746
> viewport.frame { border-style: none; }
2747
row {
2749
// Needs overriding of the GtkListBoxRow padding
2750
min-height: 32px;
2751
padding: 0;
2752
// Using margins/padding directly in the SidebarRow
2754
// will make the animation of the new bookmark row jump
2755
> revealer { padding: 0 12px; }
2756
&:selected { color: $selected_fg_color; }
2758
&:disabled { color: $insensitive_fg_color; }
2760
image.sidebar-icon {
2762
opacity: $hint_opacity; // dim the device icons
2763
&:dir(ltr) { padding-right: 8px; }
2765
&:dir(rtl) { padding-left: 8px; }
2766
}
2767
label.sidebar-label {
2769
&:dir(ltr) { padding-right: 2px; }
2770
&:dir(rtl) { padding-left: 2px; }
2771
}
2772
@at-root button.sidebar-button {
2774
@extend %button_basic.flat;
2775
min-height: $small_size;
2777
min-width: $small_size;
2778
margin-top: 0;
2779
margin-bottom: 0;
2780
padding: 0;
2781
border-radius: 100%;
2782
-gtk-outline-radius: 100%;
2783
row:selected & { @extend %button_selected.flat; }
2785
}
2786
&.sidebar-placeholder-row {
2788
min-height: 2px;
2789
padding: 0 8px;
2790
background-image: image($accent_bg_color);
2791
background-clip: content-box;
2792
}
2793
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2795
&:drop(active):not(:disabled) {
2797
box-shadow: inset 0 0 0 2px $accent_bg_color;
2798
&:selected {
2800
// background-color: $accent_bg_color;
2801
// color: $selected_fg_color;
2802
}
2803
}
2804
}
2805
}
2806
placesview {
2808
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2809
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2811
// this selects the "connect to server" label
2813
> actionbar > revealer > box > label {
2814
padding-left: 8px;
2815
padding-right: 8px;
2816
}
2817
}
2818
/*********
2821
* Paned *
2822
*********/
2823
paned {
2824
> separator {
2825
min-width: 1px;
2826
min-height: 1px;
2827
-gtk-icon-source: none; // defeats the ugly default handle decoration
2828
border-style: none; // just to be sure
2829
background-color: transparent;
2830
// workaround, using background istead of a border since the border will get rendered twice (?)
2831
background-image: image($borders_color);
2832
background-size: 1px 1px;
2833
&.wide {
2835
min-width: 6px;
2836
min-height: 6px;
2837
background-color: $bg_color;
2838
background-image: image($borders_color), image($borders_color);
2839
background-size: 1px 1px, 1px 1px;
2840
}
2841
}
2842
&.horizontal > separator {
2844
background-repeat: repeat-y;
2845
&:dir(ltr) {
2847
margin: 0 -8px 0 0;
2848
padding: 0 8px 0 0;
2849
background-position: left;
2850
}
2851
&:dir(rtl) {
2853
margin: 0 0 0 -8px;
2854
padding: 0 0 0 8px;
2855
background-position: right;
2856
}
2857
&.wide {
2859
margin: 0;
2860
padding: 0;
2861
background-repeat: repeat-y, repeat-y;
2862
background-position: left, right;
2863
}
2864
}
2865
&.vertical > separator {
2867
margin: 0 0 -8px 0;
2868
padding: 0 0 8px 0;
2869
background-repeat: repeat-x;
2870
background-position: top;
2871
&.wide {
2873
margin: 0;
2874
padding: 0;
2875
background-repeat: repeat-x, repeat-x;
2876
background-position: bottom, top;
2877
}
2878
}
2879
}
2880
/**************
2883
* GtkInfoBar *
2884
**************/
2885
infobar { border-style: none; }
2886
.info { background-color: $info_bg_color; }
2888
.question { background-color: $question_bg_color; }
2890
.warning { background-color: $warning_bg_color; }
2892
.error { background-color: $error_bg_color; }
2894
.info,
2896
.question,
2897
.warning,
2898
.error {
2899
color: $selected_fg_color;
2900
button { @extend %button_selected; }
2902
label:selected {
2904
}
2905
*:link { @extend %link_selected; }
2907
}
2908
/************
2911
* Tooltips *
2912
************/
2913
tooltip {
2914
&.background {
2915
// background-color needs to be set this way otherwise it gets drawn twice
2916
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2917
background-color: scale-alpha($base_color, $higher_opacity);
2918
}
2919
// @extend %osd;
2921
// padding: 4px; /* not working */
2923
border-radius: 2px;
2924
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2925
// FIXME: we need a border or tooltips vanish on black background.
2927
decoration { background-color: transparent; }
2928
label {
2930
min-height: 32px - 6px * 2;
2931
padding: 2px 8px - 6px;
2932
}
2933
* { // Yeah this is ugly
2935
padding: 0;
2936
background-color: transparent;
2937
color: inherit;
2938
}
2939
}
2940
/*****************
2943
* Color Chooser *
2944
*****************/
2945
colorswatch {
2946
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2947
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2948
// applied to the overlay box.
2949
// base color corners rounding
2951
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2952
// sports a bigger radius.
2953
// nth-child is needed by the custom color strip.
2954
&.top {
2956
border-top-left-radius: $material_radius + 0.5px;
2957
border-top-right-radius: $material_radius + 0.5px;
2958
overlay {
2960
border-top-left-radius: $material_radius;
2961
border-top-right-radius: $material_radius;
2962
}
2963
}
2964
&.bottom {
2966
border-bottom-left-radius: $material_radius + 0.5px;
2967
border-bottom-right-radius: $material_radius + 0.5px;
2968
overlay {
2970
border-bottom-left-radius: $material_radius;
2971
border-bottom-right-radius: $material_radius;
2972
}
2973
}
2974
&.left,
2976
&:first-child:not(.top) {
2977
border-top-left-radius: $material_radius + 0.5px;
2978
border-bottom-left-radius: $material_radius + 0.5px;
2979
overlay {
2981
border-top-left-radius: $material_radius;
2982
border-bottom-left-radius: $material_radius;
2983
}
2984
}
2985
&.right,
2987
&:last-child:not(.bottom) {
2988
border-top-right-radius: $material_radius + 0.5px;
2989
border-bottom-right-radius: $material_radius + 0.5px;
2990
overlay {
2992
border-top-right-radius: $material_radius;
2993
border-bottom-right-radius: $material_radius;
2994
}
2995
}
2996
&.dark overlay { color: white; }
2998
&.light overlay { color: scale-alpha(black, 0.8); }
3000
&.dark { color: white; } // for focus ring
3002
&.light { color: scale-alpha(black, 0.8); } // for focus ring
3004
&:drop(active) {
3006
box-shadow: none;
3007
&.light overlay {
3009
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3010
}
3011
&.dark overlay {
3013
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3014
}
3015
}
3016
overlay {
3018
transition: $shadow_transition;
3019
box-shadow: $z-depth-1;
3020
&:hover { box-shadow: $z-depth-2; }
3022
}
3023
&#add-color-button {
3025
border-radius: $material_radius $material_radius 0 0;
3026
color: white; // for focus ring
3027
&:only-child { border-radius: $material_radius; }
3029
overlay {
3031
background-image: linear-gradient(to right,
3032
$error_bg_color 25%,
3033
$warning_bg_color 25%, $warning_bg_color 50%,
3034
$info_bg_color 50%, $info_bg_color 75%,
3035
$question_bg_color 75%);
3036
color: white;
3037
}
3038
}
3039
&:disabled {
3041
opacity: $disabled_opacity;
3042
overlay { box-shadow: none; }
3044
}
3045
row:selected & {
3047
}
3048
&#editor-color-sample {
3050
border-radius: $material_radius + 0.5px;
3051
overlay { border-radius: $material_radius; }
3053
// overlay:hover { box-shadow: $z-depth-1; }
3055
}
3056
}
3057
// colorscale popup
3059
colorchooser .popover.osd {
3060
transition: $shadow_transition;
3061
border-radius: 2px;
3062
box-shadow: $z-depth-2;
3063
background-color: $base_color;
3064
&:backdrop { box-shadow: $z-depth-1; }
3066
spinbutton:not(.vertical) { @extend %entry.flat; }
3068
}
3069
/********
3072
* Misc *
3073
********/
3074
//content view (grid/list)
3075
.content-view {
3076
background-color: $bg_color;
3077
// &:hover { -gtk-icon-effect: highlight; }
3079
rubberband { @extend rubberband; }
3081
}
3082
.scale-popup {
3084
.osd & { @extend %osd; }
3085
.osd & button.flat { //FIXME: quick hack, redo properly
3087
}
3088
button { // +/- buttons on GtkVolumeButton popup
3090
}
3091
}
3092
/**********************
3095
* Window Decorations *
3096
*********************/
3097
decoration {
3098
transition: $shadow_transition;
3099
border-radius: 2px 2px 0 0;
3100
box-shadow: $z-depth-4, 0 16px 16px transparent;
3101
// FIXME rationalize shadows
3103
// this is used for the resize cursor area
3105
margin: 8px;
3106
&:backdrop {
3108
// the transparent shadow here is to enforce that the shadow extents don't
3109
// change when we go to backdrop, to prevent jumping windows.
3110
// The biggest shadow should be in the same order then in the active state
3111
// or the jumping will happen during the transition.
3112
box-shadow: $z-depth-2, 0 16px 16px transparent;
3113
}
3114
.fullscreen &,
3116
.tiled & { border-radius: 0; }
3117
.popup & { box-shadow: none; }
3119
// server-side decorations as used by mutter
3121
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3122
.csd.popup & {
3124
border-radius: 2px;
3125
box-shadow: $z-depth-2;
3126
}
3127
tooltip.csd & {
3129
border-radius: 2px;
3130
box-shadow: $z-depth-2;
3131
}
3132
messagedialog.csd & {
3134
border-radius: 2px;
3135
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3136
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3138
}
3139
.solid-csd & {
3141
margin: 4px;
3142
// border: solid 1px $borders_color;
3143
border-radius: 0;
3144
box-shadow: none;
3145
background-color: $bg_color;
3146
}
3147
}
3148
// Window Close button
3150
button.titlebutton {
3151
// @extend %button_basic.flat;
3152
@extend %button_basic.image-button;
3154
.selection-mode & {
3156
}
3157
}
3158
// catch all extend :)
3161
%selected_items {
3163
background-color: $selected_bg_color;
3164
@at-root %nobg_selected_items, & {
3166
color: $selected_fg_color;
3167
&:disabled { color: $insensitive_selected_fg_color; }
3169
}
3170
}
3171
.monospace { font: Monospace; }
3173
/**********************
3176
* Touch Copy & Paste *
3177
*********************/
3178
//touch selection handlebars for the Popover.osd above
3179
cursor-handle {
3180
border-radius: 100px;
3181
background-color: $accent_bg_color;
3182
background-image: none;
3183
&.top:dir(ltr), &.bottom:dir(rtl) {
3185
padding-left: 6px;
3186
border-top-right-radius: 0;
3187
}
3188
&.bottom:dir(ltr), &.top:dir(rtl) {
3190
padding-right: 6px;
3191
border-top-left-radius: 0;
3192
}
3193
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3195
-GtkWidget-text-handle-width: 24;
3196
-GtkWidget-text-handle-height: 30;
3197
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3199
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3200
url('#{$_url}@2.png'));
3201
}
3202
}
3203
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3205
button.circular { // FIXME: aggregate to buttons
3207
border-radius: 100px;
3208
-gtk-outline-radius: 100px;
3209
label { padding: 0; }
3211
}
3212
// shortcut window keys
3214
.keycap {
3215
min-width: 28px - 8px * 2;
3216
min-height: 28px - 2px;
3217
margin-top: 2px;
3218
padding-bottom: 2px;
3219
padding-left: 8px;
3220
padding-right: 8px;
3221
border: solid 1px $borders_color;
3223
border-radius: 2px + 1px;
3224
box-shadow: inset 0 -2px $borders_color;
3225
background-color: $base_color;
3226
color: $fg_color;
3227
font-size: smaller;
3228
}
3229
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3231
transition: $material_transition;
3232
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3233
caret-color: $accent_bg_color;
3234
}
3235
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3237
stackswitcher button.circular,
3239
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3240
min-width: $medium_size;
3241
min-height: $medium_size;
3242
padding: 0;
3243
}
3244