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
min-height: $large_size;
963
padding: 0 $container_padding;
964
box-shadow: inset 0 1px $secondary_highlight_color, $z-depth-1;
965
background-color: $headerbar_color;
966
color: $selected_fg_color;
967
&:backdrop {
969
color: $secondary_selected_fg_color;
970
}
971
.title {
973
padding-left: 12px;
974
padding-right: 12px;
975
font-weight: bold;
976
}
977
.subtitle {
979
padding-left: 12px;
980
padding-right: 12px;
981
font-size: smaller;
982
@extend .dim-label;
984
}
985
button:not(.suggested-action):not(.destructive-action) {
987
@extend %button_basic.flat;
988
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
990
currentColor 0%,
991
transparent 0%)
992
0 0 0 / 0 0 0px;
993
color: gtkalpha(currentColor, $enabled_opacity);
994
&:hover, &:active { color: currentColor; }
996
&:disabled {
998
color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity);
999
> label { color: inherit; }
1001
}
1002
&:checked {
1004
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1005
currentColor 100%,
1006
transparent 0%)
1007
0 0 2 / 0 0 2px;
1008
background-color: transparent;
1009
color: currentColor;
1010
&:disabled {
1012
background-color: transparent;
1013
color: gtkalpha(currentColor, $disabled_opacity);
1014
> label { color: inherit; }
1016
}
1017
}
1018
}
1019
button.suggested-action, button.destructive-action {
1021
&:disabled {
1022
color: gtkalpha(currentColor, $disabled_opacity);
1023
> label { color: inherit; }
1025
}
1026
}
1027
&.selection-mode {
1029
animation: header_ripple_effect $material_slower $material_ease_out forwards;
1030
// box-shadow: inset 0 1px $secondary_highlight_color;
1031
// background-color: $selected_bg_color;
1032
color: $selected_fg_color;
1033
&:backdrop {
1035
color: $secondary_selected_fg_color;
1036
}
1037
.subtitle:link { @extend *:link:selected; }
1039
button:not(.suggested-action):not(.destructive-action) {
1041
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1042
currentColor 0%,
1043
transparent 0%)
1044
0 0 0 / 0 0 0px;
1045
// color: gtkalpha(currentColor, $enabled_opacity);
1046
&, &:hover, &:active { color: currentColor; }
1048
&:disabled {
1050
color: gtkalpha(currentColor, $disabled_opacity);
1051
> label { color: inherit; }
1053
}
1054
&:checked {
1056
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1057
currentColor 100%,
1058
transparent 0%)
1059
0 0 2 / 0 0 2px;
1060
color: currentColor;
1061
&:disabled {
1063
color: gtkalpha(currentColor, $disabled_opacity);
1064
> label { color: inherit; }
1066
}
1067
}
1068
}
1069
.selection-menu {
1071
padding-left: 16px;
1072
padding-right: 16px;
1073
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1075
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1077
}
1078
}
1079
.tiled &,
1081
.maximized & {
1082
border-radius: 0; // squared corners when the window is max'd or tiled
1083
box-shadow: none;
1084
}
1085
&.default-decoration {
1087
min-height: $small_size;
1088
padding: $container_padding;
1089
border-width: 0;
1090
button.titlebutton {
1092
min-height: $small_size;
1093
min-width: $small_size;
1094
margin: 0;
1095
padding: 0;
1096
&:active { // add fallback
1098
background-image: radial-gradient(circle farthest-corner at center,
1099
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1100
transparent 0%),
1101
image(gtkalpha(currentColor, $lower_opacity / 2));
1102
}
1103
}
1104
}
1105
}
1106
headerbar {
1108
// add vertical margins to headerbar entries, buttons and separators to avoid them spanning the whole height
1109
entry,
1110
spinbutton,
1111
// separator,
1112
button {
1113
margin-top: $container_padding;
1114
margin-bottom: $container_padding;
1115
}
1116
}
1117
.titlebar {
1119
border-top-left-radius: 2px;
1120
border-top-right-radius: 2px;
1121
}
1122
headerbar {
1124
separator:first-child + &, // tackles the paned container case
1125
&:first-child {
1126
border-top-left-radius: 2px;
1127
.tiled &,
1129
.maximized & { border-radius: 0; }
1130
}
1131
&:last-child {
1133
border-top-right-radius: 2px;
1134
.tiled &,
1136
.maximized & { border-radius: 0; }
1137
}
1138
}
1139
.titlebar:not(headerbar) {
1141
window.csd > & {
1142
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1143
padding: 0;
1144
background-color: transparent;
1145
background-image: none;
1146
border-style: none;
1147
box-shadow: none;
1148
}
1149
> separator {
1151
background-color: $headerbar_color;
1152
background-image: image($borders_color);
1153
}
1154
@extend %titlebar;
1156
}
1157
/************
1160
* Pathbars *
1161
************/
1162
.path-bar button {
1163
&.text-button, &.image-button, & {
1164
padding-left: 6px;
1165
padding-right: 6px;
1166
}
1167
&.text-button.image-button, & {
1169
// label:last-child { padding-left: 2px; padding-right: 8px; }
1170
// label:first-child { padding-left: 8px; padding-right: 2px; }
1171
}
1172
image {
1174
padding-left: 4px;
1175
padding-right: 4px;
1176
}
1177
&.slider-button {
1179
padding-left: 0;
1180
padding-right: 0;
1181
}
1182
}
1183
/**************
1186
* Tree Views *
1187
**************/
1188
treeview.view {
1189
-GtkTreeView-grid-line-width: 1;
1190
-GtkTreeView-grid-line-pattern: '';
1191
-GtkTreeView-tree-line-width: 1;
1192
-GtkTreeView-tree-line-pattern: '';
1193
-GtkTreeView-expander-size: 16;
1194
border-left-color: $track_color; // this is actually the tree lines color,
1196
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1197
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1199
&:hover, &:active, &:selected { border-radius: 0; }
1201
&.separator {
1203
min-height: 1px + 2px * 2;
1204
color: $borders_color;
1205
}
1206
&:drop(active) {
1208
border-style: solid none;
1209
border-width: 1px;
1210
border-color: $accent_bg_color;
1211
&.after { border-top-style: none; }
1213
&.before { border-bottom-style: none; }
1215
}
1216
&.expander {
1218
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1219
-gtk-icon-transform: rotate(-90deg);
1220
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1222
&:checked { -gtk-icon-transform: unset; }
1224
color: $secondary_fg_color;
1226
&:hover, &:active { color: $fg_color; }
1228
&:disabled { color: $insensitive_secondary_fg_color; }
1230
&:selected {
1232
color: $secondary_selected_fg_color;
1233
&:hover, &:active { color: $selected_fg_color; }
1235
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1237
}
1238
}
1239
&.progressbar { // progress bar in treeviews
1241
border-style: none none solid;
1242
border-width: $bar_size;
1243
border-color: $selected_bg_color;
1244
background-color: transparent;
1245
background-image: none;
1246
&:selected { border-color: currentColor; }
1248
}
1249
&.trough { // progress bar trough in treeviews
1251
border-style: none none solid;
1252
border-width: $bar_size;
1253
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1254
background-color: transparent;
1255
background-image: none;
1256
&:selected { border-color: $track_color; }
1258
}
1259
header {
1261
button {
1262
@extend row.activatable;
1263
padding: 2px 6px;
1265
border-style: none solid solid none;
1266
border-width: 1px;
1267
border-color: $borders_color;
1268
border-radius: 0;
1269
background-clip: border-box;
1270
&, &:hover, &:active { box-shadow: none; }
1272
&, &:disabled { background-color: $base_color; }
1274
&:last-child { border-right-style: none; }
1276
}
1277
}
1278
button.dnd,
1280
header.button.dnd { // for treeview-like derive widgets
1281
padding: 2px 6px;
1282
border-style: none solid solid;
1283
border-width: 1px;
1284
border-color: $borders_color;
1285
border-radius: 0;
1286
box-shadow: none;
1287
background-color: $base_color;
1288
background-clip: border-box;
1289
color: $selected_bg_color;
1290
}
1291
}
1292
/*********
1295
* Menus *
1296
*********/
1297
menubar,
1298
.menubar {
1299
-GtkWidget-window-dragging: true;
1300
padding: 0;
1301
// box-shadow: inset 0 -1px $borders_color;
1302
background-color: $headerbar_color;
1303
> menuitem {
1305
transition: background-color $material_faster $material_ease_out;
1306
min-height: 20px;
1307
padding: 4px 8px;
1308
color: $secondary_selected_fg_color;
1309
&:hover { //Seems like it :hover even with keyboard focus
1311
transition: none;
1312
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1313
color: $selected_fg_color;
1314
}
1315
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1317
}
1318
}
1319
menu,
1321
.menu {
1322
margin: 4px 0;
1323
padding: 4px 0;
1324
background-color: $base_color;
1325
border: 1px solid $borders_color; // adds borders in a non composited env
1326
.csd & {
1328
border: none; // axes borders in a composited env
1329
border-radius: 2px;
1330
}
1331
menuitem {
1333
transition: background-color $material_faster $material_ease_out;
1334
min-height: 20px;
1335
min-width: 40px;
1336
padding: 4px 8px;
1337
font: initial;
1338
text-shadow: none;
1339
&:hover {
1341
transition: none;
1342
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1343
}
1344
&:disabled { color: $insensitive_fg_color; }
1346
// submenu indicators
1348
arrow {
1349
min-height: 16px;
1350
min-width: 16px;
1351
&:dir(ltr) {
1353
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1354
margin-left: 8px;
1355
}
1356
&:dir(rtl) {
1358
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1359
margin-right: 8px;
1360
}
1361
}
1362
}
1363
// overflow arrows
1365
> arrow {
1366
min-height: 16px;
1367
min-width: 16px;
1368
padding: 4px;
1369
border-radius: 0;
1370
background-color: $base_color;
1371
color: $secondary_fg_color;
1372
&.top {
1374
margin-top: -4px;
1375
border-bottom: 1px solid $borders_color;
1376
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1377
}
1378
&.bottom {
1380
margin-bottom: -4px;
1381
border-top: 1px solid $borders_color;
1382
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1383
}
1384
&:hover {
1386
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1387
color: $fg_color;
1388
}
1389
&:disabled {
1391
border-color: transparent;
1392
background-color: transparent;
1393
color: transparent;
1394
// color: $insensitive_secondary_fg_color;
1395
}
1396
}
1397
separator { margin: 4px 0; }
1399
}
1400
menuitem {
1402
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1403
check,
1405
radio {
1406
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1407
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1408
}
1409
}
1410
.csd.popup { border-radius: 2px; }
1412
/***************
1415
* Popovers *
1416
***************/
1417
popover.background {
1418
transition: $shadow_transition;
1419
padding: 0;
1420
box-shadow: $z-depth-2;
1421
background-color: $light_color;
1422
&:backdrop { box-shadow: $z-depth-1; }
1424
&, .csd & {
1426
border-style: solid;
1427
border-width: 1px;
1428
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1429
border-radius: 2px + 1px;
1430
}
1431
> list,
1433
> .view,
1434
> toolbar {
1435
border-style: none;
1436
box-shadow: none;
1437
background-color: transparent;
1438
}
1439
&, .csd & {
1441
&.touch-selection,
1442
&.magnifier,
1443
&.osd { @extend %osd; }
1444
}
1445
separator { margin: 4px 0; }
1447
list separator { margin: 0; }
1449
}
1450
/*************
1452
* Notebooks *
1453
*************/
1454
notebook {
1455
> header {
1456
border-width: 1px;
1457
border-color: $borders_color;
1458
background-color: $bg_color;
1459
background-clip: border-box;
1460
&.top {
1462
border-bottom-style: solid;
1463
> tabs {
1464
margin-bottom: -1px;
1465
> tab {
1466
&:hover { box-shadow: inset 0 -2px $track_color; }
1468
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1470
}
1471
}
1472
}
1473
&.bottom {
1475
border-top-style: solid;
1476
> tabs {
1477
margin-top: -1px;
1478
> tab {
1479
&:hover { box-shadow: inset 0 2px $track_color; }
1481
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1483
}
1484
}
1485
}
1486
&.left {
1488
border-right-style: solid;
1489
> tabs {
1490
margin-right: -1px;
1491
> tab {
1492
&:hover { box-shadow: inset -2px 0 $track_color; }
1494
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1496
}
1497
}
1498
}
1499
&.right {
1501
border-left-style: solid;
1502
> tabs {
1503
margin-left: -1px;
1504
> tab {
1505
&:hover { box-shadow: inset 2px 0 $track_color; }
1507
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1509
}
1510
}
1511
}
1512
&.top > tabs > arrow {
1514
@extend %notebook_vert_arrows;
1515
border-top-style: none;
1517
}
1518
&.bottom > tabs > arrow {
1520
@extend %notebook_vert_arrows;
1521
border-bottom-style: none;
1523
}
1524
@at-root %notebook_vert_arrows {
1526
padding-left: 4px;
1527
padding-right: 4px;
1528
&.down {
1530
margin-left: -8px;
1531
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1532
}
1533
&.up {
1535
margin-right: -8px;
1536
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1537
}
1538
}
1539
&.left > tabs > arrow {
1541
@extend %notebook_horz_arrows;
1542
border-left-style: none;
1544
}
1545
&.right > tabs > arrow {
1547
@extend %notebook_horz_arrows;
1548
border-right-style: none;
1550
}
1551
@at-root %notebook_horz_arrows {
1553
padding-top: 4px;
1554
padding-bottom: 4px;
1555
&.down {
1557
margin-top: -8px;
1558
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1559
}
1560
&.up {
1562
margin-bottom: -8px;
1563
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1564
}
1565
}
1566
> tabs > arrow {
1568
@extend %button_basic.flat;
1569
min-height: 16px;
1571
min-width: 16px;
1572
border-radius: 0;
1573
}
1574
tab {
1576
transition: $material_transition;
1577
min-height: 24px;
1578
min-width: 24px;
1579
padding: 6px 12px;
1580
outline-offset: -6px;
1582
border-width: 1px; // for reorderable tabs
1584
border-color: transparent; //
1585
color: $secondary_fg_color;
1587
font-weight: 500;
1588
&:hover {
1590
color: $fg_color;
1591
&.reorderable-page {
1593
border-color: $borders_color;
1594
background-color: $secondary_base_color;
1595
}
1596
}
1597
&:disabled { color: $insensitive_secondary_fg_color; }
1599
&:checked {
1601
animation: tab_ripple_effect $material_slower * 3 $material_ease_out;
1602
color: $fg_color;
1603
&:disabled { color: $insensitive_fg_color; }
1605
&.reorderable-page {
1607
border-color: $borders_color;
1608
background-color: $base_color;
1609
}
1610
}
1611
// colors the button like the label, overridden otherwise
1613
button.flat {
1614
// FIXME: generalize .small-button?
1615
min-width: $small_size;
1616
min-height: $small_size;
1617
padding: 0;
1618
@extend %button_basic.image-button;
1620
&:last-child {
1622
margin-left: 6px;
1623
margin-right: -6px;
1624
}
1625
&:first-child {
1627
margin-left: -6px;
1628
margin-right: 6px;
1629
}
1630
}
1631
}
1632
&.top,
1634
&.bottom {
1635
tabs {
1636
padding-left: 8px;
1637
padding-right: 8px;
1638
&:not(:only-child) {
1640
&:first-child { margin-left: 0; }
1641
&:last-child { margin-right: 0; }
1642
}
1643
tab {
1645
&.reorderable-page {
1646
margin: 0 -1px;
1647
border-style: none solid;
1648
}
1649
}
1650
}
1651
}
1652
&.left,
1654
&.right {
1655
tabs {
1656
padding-top: 8px;
1657
padding-bottom: 8px;
1658
&:not(:only-child) {
1660
&:first-child { margin-top: 0; }
1661
&:last-child { margin-bottom: 0; }
1662
}
1663
tab {
1665
&.reorderable-page {
1666
margin: -1px 0;
1667
border-style: solid none;
1668
}
1669
}
1670
}
1671
}
1672
}
1673
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1675
background-color: $base_color;
1676
entry,
1678
spinbutton:not(.vertical) { @extend %entry.flat; }
1679
revealer entry,
1681
revealer spinbutton:not(.vertical) { @extend %entry; }
1682
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1684
}
1685
}
1686
/**************
1689
* Scrollbars *
1690
**************/
1691
scrollbar {
1692
$_slider_min_length: 24px;
1693
// disable steppers
1695
@at-root * {
1696
-GtkScrollbar-has-backward-stepper: false;
1697
-GtkScrollbar-has-forward-stepper: false;
1698
}
1699
transition: $material_transition;
1701
background-color: $base_color;
1702
background-clip: $extra_background_clip;
1703
// scrollbar border
1705
&.top { border-bottom: 1px solid $borders_color; }
1706
&.bottom { border-top: 1px solid $borders_color; }
1707
&.left { border-right: 1px solid $borders_color; }
1708
&.right { border-left: 1px solid $borders_color; }
1709
// slider
1711
slider {
1712
transition: all $material_faster $material_ease_out, margin 0, border-width 0;
1713
min-width: 8px;
1714
min-height: 8px;
1715
border: 4px solid transparent;
1716
border-radius: 100px;
1717
background-clip: padding-box;
1718
background-color: $tertiary_fg_color;
1719
&:hover { background-color: $secondary_fg_color; }
1721
&:active { background-color: $fg_color; }
1723
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1725
}
1726
&.fine-tune {
1728
slider {
1729
transition: all $material_faster $material_ease_out, margin 0, border-width 0, min-width 0, min-height 0;
1730
min-width: 4px;
1731
min-height: 4px;
1732
}
1733
&.horizontal slider { margin: 2px 0; }
1735
&.vertical slider { margin: 0 2px; }
1737
}
1738
&.overlay-indicator {
1740
&:not(.dragging):not(.hovering) {
1741
border-color: transparent;
1742
background-color: transparent;
1743
slider {
1745
min-width: 4px;
1746
min-height: 4px;
1747
margin: 2px;
1748
border: 2px solid scale-alpha($base_color, $lower_opacity);
1749
}
1750
button {
1752
min-width: 4px;
1753
min-height: 4px;
1754
margin: 2px;
1755
border: 2px solid scale-alpha($base_color, $lower_opacity);
1756
border-radius: 100px;
1757
background-color: $tertiary_fg_color;
1758
background-clip: padding-box;
1759
-gtk-icon-source: none;
1760
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1762
}
1763
&.horizontal {
1765
slider { min-width: $_slider_min_length; }
1766
button { min-width: 8px; }
1768
}
1769
&.vertical {
1771
slider { min-height: $_slider_min_length; }
1772
button { min-height: 8px; }
1774
}
1775
}
1776
&.dragging,
1778
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1779
}
1780
&.horizontal slider { min-width: $_slider_min_length; }
1782
&.vertical slider { min-height: $_slider_min_length; }
1784
// button styling
1786
button {
1787
@extend %button_basic.flat;
1788
min-width: 16px;
1789
min-height: 16px;
1790
padding: 0;
1791
border-radius: 0;
1792
}
1793
// button icons
1795
&.vertical {
1796
button {
1797
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1798
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1800
}
1801
}
1802
&.horizontal {
1804
button {
1805
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1806
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1808
}
1809
}
1810
}
1811
/**********
1814
* Switch *
1815
**********/
1816
switch {
1817
transition: $material_transition;
1818
margin: $container_padding 0;
1819
border: 4px solid transparent;
1820
border-radius: 100px;
1821
background-color: $track_color;
1822
background-clip: padding-box;
1823
font-size: 0;
1824
&:disabled { color: $insensitive_fg_color; }
1826
&:checked {
1828
background-color: scale-alpha($accent_bg_color, 0.5);
1829
&:disabled {
1831
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1832
color: $insensitive_fg_color;
1833
}
1834
}
1835
slider {
1837
@include entry(normal);
1838
transition: $material_transition, margin 0;
1840
min-width: $small_size;
1841
min-height: $small_size;
1842
margin: -4px 0 -4px -4px;
1843
-gtk-outline-radius: 100px;
1844
border-radius: 100px;
1845
}
1846
&:hover slider { @include entry(focus); }
1848
&:disabled slider { @include entry(insensitive); }
1850
&:checked slider {
1852
transition: $material_transition, margin 0, background-image 0, background-color 0 $material_slower;
1853
animation: needs_attention $material_slower $material_ease_out;
1854
margin: -4px -4px -4px 0;
1855
background-color: $accent_bg_color;
1856
color: $selected_fg_color;
1857
}
1858
&:checked:disabled slider { animation: none; }
1860
row:selected & {
1862
}
1863
}
1864
/*************************
1867
* Check and Radio items *
1868
*************************/
1869
// draw regular check and radio items using our PNG assets
1870
// all assets are rendered from assets.svg. never add pngs directly
1871
//selection-mode
1873
@each $s,$as in ('','-selectionmode'),
1874
(':hover', '-hover-selectionmode'),
1875
(':checked', '-checked-selectionmode'),
1876
(':checked:hover', '-checked-hover-selectionmode') {
1877
.view.content-view.check#{$s}:not(list) {
1878
-gtk-icon-shadow: $z-depth-1;
1879
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1880
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1881
margin: 8px;
1882
background-color: transparent;
1883
}
1884
}
1885
checkbutton.text-button,
1887
radiobutton.text-button {
1888
// this is for a nice focus on check and radios text
1889
padding: 2px;
1890
outline-offset: 0;
1891
label:not(:only-child) { margin: 0 4px; }
1893
}
1894
check,
1896
radio {
1897
min-height: 24px;
1898
min-width: 24px;
1899
margin: -12px;
1900
padding: 12px;
1901
@extend %button_basic.flat;
1903
@extend %button_basic.image-button;
1905
&:checked, &:checked:disabled { background-color: transparent; }
1907
&:checked, &:indeterminate { color: $accent_bg_color; }
1909
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1911
// &:only-child { margin: -12px; }
1913
row &:not(:checked):not(:indeterminate) {
1915
color: gtkalpha(currentColor, $enabled_opacity);
1916
&:hover, &:active { color: currentColor; }
1918
}
1919
menu menuitem & {
1921
transition: none;
1922
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1923
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1925
&, &:hover, &:disabled {
1927
background-image: none;
1928
// color: inherit;
1929
// animation: none;
1930
}
1931
}
1932
}
1933
%check,
1935
check {
1936
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1937
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1938
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1940
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1941
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1943
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1944
}
1945
%radio,
1947
radio {
1948
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1949
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1950
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1952
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1953
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1955
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1956
border-image: -gtk-gradient(radial,
1958
center center, 0,
1959
center center, 0.001,
1960
to($accent_bg_color),
1961
to(transparent))
1962
24 / 24px;
1963
&:checked {
1965
border-image: -gtk-gradient(radial,
1966
center center, 0,
1967
center center, (10 / 48 / 2),
1968
to($accent_bg_color),
1969
to(transparent))
1970
24 / 24px;
1971
}
1972
&:checked:disabled {
1974
border-image: -gtk-gradient(radial,
1975
center center, 0,
1976
center center, (10 / 48 / 2),
1977
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1978
to(transparent))
1979
24 / 24px;
1980
}
1981
&:indeterminate:checked {
1983
border-image: -gtk-gradient(radial,
1984
center center, 0,
1985
center center, 0.001,
1986
to($accent_bg_color),
1987
to(transparent))
1988
24 / 24px;
1989
}
1990
}
1991
// let's animate things
1993
@keyframes check_check {
1994
from { -gtk-icon-transform: rotate(90deg); }
1995
to { -gtk-icon-transform: unset; }
1996
}
1997
@keyframes check_radio { // FIXME: cannot animate border-image
1999
from {
2000
border-image: -gtk-gradient(radial,
2001
center center, 0,
2002
center center, 0.001,
2003
to($accent_bg_color),
2004
to(transparent))
2005
24 / 24px;
2006
}
2007
to {
2009
border-image: -gtk-gradient(radial,
2010
center center, 0,
2011
center center, (10 / 48 / 2),
2012
to($accent_bg_color),
2013
to(transparent))
2014
24 / 24px;
2015
}
2016
}
2017
@keyframes check_indeterminate {
2019
from { -gtk-icon-transform: unset; }
2020
50% { -gtk-icon-transform: scale(0, 1); }
2021
to { -gtk-icon-transform: unset; }
2022
}
2023
%check_checked,
2025
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
2026
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2028
// %radio_checked,
2030
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
2031
// radio:not(:indeterminate):checked:active { animation: check_radio $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2033
%indeterminate_checked,
2035
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
2036
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2038
// no animations in menus
2040
menu menuitem {
2041
check:not(:indeterminate):checked,
2042
radio:not(:indeterminate):checked,
2043
check:indeterminate:checked,
2044
radio:indeterminate:checked { animation: none; }
2045
}
2046
treeview.view check,
2048
treeview.view radio {
2049
padding: 0;
2050
&:checked:hover, &:selected:checked:hover { background-image: none; }
2052
& {
2054
color: $secondary_fg_color;
2055
&:hover, &:active { color: $fg_color; }
2057
&:disabled { color: $insensitive_secondary_fg_color; }
2059
&:checked, &:indeterminate { color: $accent_bg_color; }
2061
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2063
}
2064
&:selected {
2066
color: $secondary_selected_fg_color;
2067
&:hover, &:active { color: $selected_fg_color; }
2069
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2071
&:checked, &:indeterminate { color: $accent_bg_color; }
2073
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2075
}
2076
}
2077
treeview.view radio:checked {
2079
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2080
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2081
border-image: none;
2082
}
2083
/************
2086
* GtkScale *
2087
************/
2088
scale {
2089
// sizing
2090
$_marks_lenght: 8px;
2092
$_marks_distance: 8px;
2093
min-height: 12px;
2095
min-width: 12px;
2096
padding: 12px;
2097
* { transition: $material_transition; }
2099
// the slider is inside the trough, so to have make it bigger there's a negative margin
2101
slider {
2102
min-height: $small_size;
2103
min-width: $small_size;
2104
margin: -10px;
2105
}
2106
// the backing bit
2108
trough {
2109
outline-offset: 2px;
2110
background-color: $track_color;
2111
&:disabled { color: $insensitive_fg_color; }
2113
}
2114
// the colored part of the backing bit
2116
highlight {
2117
background-color: $accent_bg_color;
2118
&:disabled { background-color: transparent; }
2120
}
2121
// this is another differently styled part of the backing bit, the most relevant use case is for example
2123
// in media player to indicate how much video stream as been cached
2124
fill {
2125
background-color: $track_color;
2126
&:disabled { background-color: transparent; }
2128
}
2129
slider {
2131
transition: all $material_faster $material_ease;
2132
// border-radius: 100%;
2133
// background-color: $accent_bg_color;
2134
background-repeat: no-repeat;
2135
background-position: center;
2136
@each $s,$as in ('',''),
2138
(':disabled','-insensitive') {
2139
&#{$s} {
2140
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2141
background-image: -gtk-scaled(url('#{$_url}.png'),
2142
url('#{$_url}@2.png'));
2143
}
2144
}
2145
background-size: calc(100% - 8px);
2147
&:hover { background-size: calc(100% - 4px); }
2149
&:active { background-size: calc(100% - 0px); }
2151
}
2152
// click-and-hold the slider to activate
2154
&.fine-tune {
2155
// to make the slider shrink in fine-tune mode
2156
slider { background-size: calc(100% - 12px); }
2157
}
2158
value { color: gtkalpha(currentColor, $hint_opacity); }
2160
marks {
2162
color: $track_color;
2163
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2165
(bottom, bottom, top),
2166
(top, left, right),
2167
(bottom, right, left) {
2168
&.#{$marks_class} {
2169
margin-#{$marks_margin}: $_marks_distance;
2170
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2171
}
2172
}
2173
}
2174
&.horizontal {
2176
indicator {
2177
min-height: $_marks_lenght;
2178
min-width: 1px;
2179
}
2180
}
2181
&.vertical {
2183
indicator {
2184
min-height: 1px;
2185
min-width: $_marks_lenght;
2186
}
2187
}
2188
// *WARNING* scale with marks madness following
2190
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2192
$suffix: if($variant == 'light', '', '-dark');
2193
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2195
('vertical', 'vert') {
2196
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2197
('scale-has-marks-below', ':first-child:not(:only-child)') {
2198
@each $state, $state_infix in ('', ''),
2199
(':disabled', '-insensitive') {
2200
&.#{$dir_class} {
2201
%#{$marks_infix}-#{$dir_infix},
2202
contents#{$nth_child} > trough > slider {
2203
&#{$state} {
2204
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2205
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2207
}
2208
@if $dir_class == 'horizontal' {
2210
min-height: 30px;
2211
min-width: $small_size;
2212
@if $marks_infix == 'scale-has-marks-above' {
2214
margin-top: -16px;
2215
background-position: center calc(100% - 4px);
2217
&:hover { background-position: center calc(100% - 2px); }
2219
&:active { background-position: center calc(100% - 0px); }
2221
}
2222
@if $marks_infix == 'scale-has-marks-below' {
2224
margin-bottom: -16px;
2225
background-position: center calc(4px);
2227
&:hover { background-position: center calc(2px); }
2229
&:active { background-position: center calc(0px); }
2231
}
2232
}
2233
@if $dir_class == 'vertical' {
2235
min-height: $small_size;
2236
min-width: 30px;
2237
@if $marks_infix == 'scale-has-marks-above' {
2239
margin-left: -16px;
2240
background-position: calc(4px) center;
2242
&:hover { background-position: calc(2px) center; }
2244
&:active { background-position: calc(0px) center; }
2246
}
2247
@if $marks_infix == 'scale-has-marks-below' {
2249
margin-right: -16px;
2250
background-position: calc(100% - 4px) center;
2252
&:hover { background-position: calc(100% - 2px) center; }
2254
&:active { background-position: calc(100% - 0px) center; }
2256
}
2257
}
2258
}
2259
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2261
&.fine-tune contents#{$nth_child} > trough > slider {
2262
// bigger negative margins to make the trough grow here as well
2263
@if $dir_class == 'horizontal' {
2265
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2266
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2268
}
2269
@if $dir_class == 'vertical' {
2271
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2272
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2274
}
2275
}
2276
}
2277
}
2278
}
2279
}
2280
&.color {
2282
min-height: 0;
2283
min-width: 0;
2284
&.horizontal {
2286
padding: 0 0 12px 0;
2287
trough {
2289
padding-bottom: $bar_size;
2290
}
2291
slider {
2293
@extend %scale-has-marks-above-horz;
2294
margin-bottom: -10px - $bar_size;
2296
margin-top: 0;
2297
}
2298
}
2299
&.vertical {
2301
&:dir(ltr) {
2302
padding: 0 0 0 12px;
2303
trough {
2305
padding-left: $bar_size;
2306
}
2307
slider {
2309
@extend %scale-has-marks-below-vert;
2310
margin-left: -10px - $bar_size;
2312
margin-right: 0;
2313
}
2314
}
2315
&:dir(rtl) {
2317
padding: 0 12px 0 0;
2318
trough {
2320
padding-right: $bar_size;
2321
}
2322
slider {
2324
@extend %scale-has-marks-above-vert;
2325
margin-right: -10px - $bar_size;
2327
margin-left: 0;
2328
}
2329
}
2330
}
2331
&.fine-tune {
2333
&.horizontal {
2334
slider {
2335
@extend %scale-has-marks-above-horz-fine-tune;
2336
}
2337
}
2338
&.vertical {
2340
&:dir(ltr) {
2341
slider {
2342
@extend %scale-has-marks-below-vert-fine-tune;
2343
}
2344
}
2345
&:dir(rtl) {
2347
slider {
2348
@extend %scale-has-marks-above-vert-fine-tune;
2349
}
2350
}
2351
}
2352
}
2353
}
2354
}
2355
/*****************
2358
* Progress bars *
2359
*****************/
2360
progressbar {
2361
// sizing
2362
&.horizontal {
2363
trough,
2364
progress { min-height: $bar_size; }
2365
}
2366
&.vertical {
2368
trough,
2369
progress { min-width: $bar_size; }
2370
}
2371
// FIXME: insensitive state missing and some other state should be set probably
2373
color: $tertiary_fg_color;
2374
font-size: smaller;
2375
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2377
progress { background-color: $selected_bg_color; }
2379
&.osd { // progressbar.osd used for epiphany page loading progress
2381
// min-width: $bar_size;
2382
// min-height: $bar_size;
2383
// background-color: transparent;
2384
// trough { background-color: transparent; }
2386
progress {
2388
}
2389
}
2390
}
2391
/*************
2394
* Level Bar *
2395
*************/
2396
levelbar {
2397
block {
2398
min-width: $medium_size;
2399
min-height: $bar_size;
2400
}
2401
&.vertical block {
2403
min-width: $bar_size;
2404
min-height: $medium_size;
2405
}
2406
trough {
2408
padding: 2px;
2409
border-radius: 2px;
2410
@include entry(normal);
2412
&:disabled { @include entry(insensitive); }
2414
}
2415
&.horizontal.discrete block { margin: 0 1px; }
2417
&.vertical.discrete block { margin: 1px 0; }
2419
&.horizontal.discrete trough { padding: 2px 1px; }
2421
&.vertical.discrete trough { padding: 1px 2px; }
2423
block {
2425
&.low {
2426
background-color: $warning_color;
2427
}
2428
&.high {
2430
background-color: $selected_bg_color;
2431
}
2432
&.full {
2434
background-color: $success_color;
2435
}
2436
&.empty {
2438
background-color: $track_color;
2439
color: $insensitive_fg_color;
2440
}
2441
}
2442
}
2443
/****************
2446
* Print dialog *
2447
*****************/
2448
printdialog {
2449
paper {
2450
padding: 0;
2451
border: 1px solid $borders_color;
2452
background: $base_color;
2453
color: $fg_color;
2454
}
2455
.dialog-action-box { margin: 12px; }
2457
}
2458
/**********
2461
* Frames *
2462
**********/
2463
frame > border,
2464
.frame {
2465
margin: 0;
2466
padding: 0;
2467
border: 1px solid $borders_color;
2468
border-radius: 0;
2469
box-shadow: none;
2470
&.flat { border-style: none; }
2472
}
2473
actionbar > revealer > box {
2475
padding: $container_padding;
2476
border-top: 1px solid $borders_color;
2477
}
2478
scrolledwindow {
2480
viewport.frame { // avoid double borders when viewport inside scrolled window
2481
border-style: none;
2482
}
2483
// This is used when content is touch-dragged past boundaries.
2485
// draws a box on top of the content, the size changes programmatically.
2486
overshoot {
2487
&.top { @include overshoot(top); }
2488
&.bottom { @include overshoot(bottom); }
2490
&.left { @include overshoot(left); }
2492
&.right { @include overshoot(right); }
2494
}
2495
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2497
undershoot {
2498
&.top { @include undershoot(top); }
2499
&.bottom { @include undershoot(bottom); }
2501
&.left { @include undershoot(left); }
2503
&.right { @include undershoot(right); }
2505
}
2506
junction { // the small square between two scrollbars
2508
border-style: solid none none solid;
2509
border-width: 1px;
2510
border-color: $borders_color;
2511
background-color: $base_color;
2512
&:dir(rtl) { border-style: solid solid none none; }
2514
}
2515
}
2516
//vbox and hbox separators
2518
separator {
2519
min-width: 1px;
2520
min-height: 1px;
2521
background: $borders_color;
2522
}
2523
/*********
2526
* Lists *
2527
*********/
2528
list {
2529
border-color: $borders_color;
2530
background-color: $base_color;
2531
row { padding: 2px; }
2533
}
2534
row {
2536
transition: $material_transition;
2537
&:hover { transition: none; }
2539
&.activatable {
2541
background-image: radial-gradient(circle farthest-corner at center,
2542
gtkalpha(currentColor, 0) 100%,
2543
transparent 0%),
2544
image(gtkalpha(currentColor, 0));
2545
&:hover {
2547
background-image: radial-gradient(circle farthest-corner at center,
2548
gtkalpha(currentColor, 0) 100%,
2549
transparent 0%),
2550
image(gtkalpha(currentColor, 0.05));
2551
}
2552
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2554
&:active {
2555
transition: $material_transition, background-image 0;
2556
animation: row_ripple_effect $material_slower $material_ease_out forwards;
2557
}
2558
}
2559
&:selected { @extend %selected_items; }
2561
}
2562
/*********************
2565
* App Notifications *
2566
*********************/
2567
.app-notification,
2568
.app-notification.frame {
2569
@extend %osd;
2570
@extend toolbar.osd;
2572
margin: 8px;
2574
border { border: none; }
2576
}
2577
/*************
2580
* Expanders *
2581
*************/
2582
expander {
2583
arrow {
2584
transition: all $material_faster $material_ease;
2585
min-width: 16px;
2586
min-height: 16px;
2587
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2588
-gtk-icon-transform: rotate(-90deg);
2589
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2591
&:checked { -gtk-icon-transform: unset; }
2593
color: $secondary_fg_color;
2595
&:hover, &:active { color: $fg_color; }
2597
&:disabled { color: $insensitive_secondary_fg_color; }
2599
&:selected {
2601
color: $secondary_selected_fg_color;
2602
&:hover, &:active { color: $selected_fg_color; }
2604
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2606
}
2607
}
2608
}
2609
/************
2612
* Calendar *
2613
***********/
2614
calendar {
2615
padding: 1px;
2616
border: 1px solid $borders_color;
2617
color: $fg_color;
2618
&:disabled { color: $insensitive_fg_color; }
2620
&:selected {
2622
@extend %selected_items;
2623
border-radius: 2px + 1px;
2625
}
2626
&.header {
2628
border: none;
2629
border-bottom: 1px solid $borders_color;
2630
border-radius: 0;
2631
}
2632
&.button { @extend %button_basic.flat; }
2634
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2636
&.highlight {
2638
color: gtkalpha(currentColor, $hint_opacity);
2639
font-weight: 500;
2640
}
2641
}
2642
/***********
2645
* Dialogs *
2646
***********/
2647
messagedialog { // Message Dialog styling
2648
&.background { background-color: $light_color; }
2649
.titlebar {
2651
min-height: $small_size;
2652
border-style: none;
2653
box-shadow: inset 0 1px $highlight_color;
2654
background-color: $light_color;
2655
}
2656
&.csd { // rounded bottom border styling for csd version
2658
&.background {
2659
// bigger radius for better antialiasing
2660
border-bottom-left-radius: 2px;
2661
border-bottom-right-radius: 2px;
2662
}
2663
.dialog-action-area button {
2665
padding: 8px 16px;
2666
border-top: 1px solid $borders_color;
2667
border-radius: 0;
2668
@extend %button_basic.flat;
2670
&:first-child{ border-bottom-left-radius: 2px; }
2672
&:last-child { border-bottom-right-radius: 2px; }
2674
}
2675
}
2676
}
2677
filechooser {
2679
.dialog-action-box { border-top: 1px solid $borders_color; }
2680
#pathbarbox { border-bottom: 1px solid $borders_color; }
2682
}
2683
filechooserbutton:drop(active) {
2685
box-shadow: none;
2686
}
2687
/***********
2690
* Sidebar *
2691
***********/
2692
.sidebar {
2693
border-style: none;
2694
background-color: $light_color;
2695
@at-root %sidebar_left,
2697
&:dir(ltr),
2698
&.left,
2699
&.left:dir(rtl) {
2700
border-right: 1px solid $borders_color;
2701
border-left-style: none;
2702
}
2703
@at-root %sidebar_right
2705
&:dir(rtl),
2706
&.right {
2707
border-left: 1px solid $borders_color;
2708
border-right-style: none;
2709
}
2710
list { background-color: transparent; }
2712
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2714
}
2715
stacksidebar {
2717
&.sidebar {
2718
&:dir(ltr),
2719
&.left,
2720
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2721
&:dir(rtl),
2723
&.right { list { @extend %sidebar_right; }}
2724
}
2725
row {
2727
padding: 10px 4px;
2728
> label {
2730
padding-left: 6px;
2731
padding-right: 6px;
2732
}
2733
&.needs-attention > label { @extend %needs_attention; }
2735
}
2736
}
2737
/****************
2740
* File chooser *
2741
****************/
2742
placessidebar {
2743
> viewport.frame { border-style: none; }
2744
row {
2746
// Needs overriding of the GtkListBoxRow padding
2747
min-height: 32px;
2748
padding: 0;
2749
// Using margins/padding directly in the SidebarRow
2751
// will make the animation of the new bookmark row jump
2752
> revealer { padding: 0 12px; }
2753
&:selected { color: $selected_fg_color; }
2755
&:disabled { color: $insensitive_fg_color; }
2757
image.sidebar-icon {
2759
opacity: $hint_opacity; // dim the device icons
2760
&:dir(ltr) { padding-right: 8px; }
2762
&:dir(rtl) { padding-left: 8px; }
2763
}
2764
label.sidebar-label {
2766
&:dir(ltr) { padding-right: 2px; }
2767
&:dir(rtl) { padding-left: 2px; }
2768
}
2769
@at-root button.sidebar-button {
2771
@extend %button_basic.flat;
2772
min-height: $small_size;
2774
min-width: $small_size;
2775
margin-top: 0;
2776
margin-bottom: 0;
2777
padding: 0;
2778
border-radius: 100%;
2779
-gtk-outline-radius: 100%;
2780
row:selected & { @extend %button_selected.flat; }
2782
}
2783
&.sidebar-placeholder-row {
2785
min-height: 2px;
2786
padding: 0 8px;
2787
background-image: image($accent_bg_color);
2788
background-clip: content-box;
2789
}
2790
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2792
&:drop(active):not(:disabled) {
2794
box-shadow: inset 0 0 0 2px $accent_bg_color;
2795
&:selected {
2797
// background-color: $accent_bg_color;
2798
// color: $selected_fg_color;
2799
}
2800
}
2801
}
2802
}
2803
placesview {
2805
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2806
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2808
// this selects the "connect to server" label
2810
> actionbar > revealer > box > label {
2811
padding-left: 8px;
2812
padding-right: 8px;
2813
}
2814
}
2815
/*********
2818
* Paned *
2819
*********/
2820
paned {
2821
> separator {
2822
min-width: 1px;
2823
min-height: 1px;
2824
-gtk-icon-source: none; // defeats the ugly default handle decoration
2825
border-style: none; // just to be sure
2826
background-color: transparent;
2827
// workaround, using background istead of a border since the border will get rendered twice (?)
2828
background-image: image($borders_color);
2829
background-size: 1px 1px;
2830
&.wide {
2832
min-width: 6px;
2833
min-height: 6px;
2834
background-color: $bg_color;
2835
background-image: image($borders_color), image($borders_color);
2836
background-size: 1px 1px, 1px 1px;
2837
}
2838
}
2839
&.horizontal > separator {
2841
background-repeat: repeat-y;
2842
&:dir(ltr) {
2844
margin: 0 -8px 0 0;
2845
padding: 0 8px 0 0;
2846
background-position: left;
2847
}
2848
&:dir(rtl) {
2850
margin: 0 0 0 -8px;
2851
padding: 0 0 0 8px;
2852
background-position: right;
2853
}
2854
&.wide {
2856
margin: 0;
2857
padding: 0;
2858
background-repeat: repeat-y, repeat-y;
2859
background-position: left, right;
2860
}
2861
}
2862
&.vertical > separator {
2864
margin: 0 0 -8px 0;
2865
padding: 0 0 8px 0;
2866
background-repeat: repeat-x;
2867
background-position: top;
2868
&.wide {
2870
margin: 0;
2871
padding: 0;
2872
background-repeat: repeat-x, repeat-x;
2873
background-position: bottom, top;
2874
}
2875
}
2876
}
2877
/**************
2880
* GtkInfoBar *
2881
**************/
2882
infobar { border-style: none; }
2883
.info { background-color: $info_bg_color; }
2885
.question { background-color: $question_bg_color; }
2887
.warning { background-color: $warning_bg_color; }
2889
.error { background-color: $error_bg_color; }
2891
.info,
2893
.question,
2894
.warning,
2895
.error {
2896
color: $selected_fg_color;
2897
button { @extend %button_selected; }
2899
label:selected {
2901
}
2902
*:link { @extend %link_selected; }
2904
}
2905
/************
2908
* Tooltips *
2909
************/
2910
tooltip {
2911
&.background {
2912
// background-color needs to be set this way otherwise it gets drawn twice
2913
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2914
background-color: scale-alpha($base_color, $higher_opacity);
2915
}
2916
// @extend %osd;
2918
// padding: 4px; /* not working */
2920
border-radius: 2px;
2921
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2922
// FIXME: we need a border or tooltips vanish on black background.
2924
decoration { background-color: transparent; }
2925
label {
2927
min-height: 32px - 6px * 2;
2928
padding: 2px 8px - 6px;
2929
}
2930
* { // Yeah this is ugly
2932
padding: 0;
2933
background-color: transparent;
2934
color: inherit;
2935
}
2936
}
2937
/*****************
2940
* Color Chooser *
2941
*****************/
2942
colorswatch {
2943
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2944
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2945
// applied to the overlay box.
2946
// base color corners rounding
2948
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2949
// sports a bigger radius.
2950
// nth-child is needed by the custom color strip.
2951
&.top {
2953
border-top-left-radius: $material_radius + 0.5px;
2954
border-top-right-radius: $material_radius + 0.5px;
2955
overlay {
2957
border-top-left-radius: $material_radius;
2958
border-top-right-radius: $material_radius;
2959
}
2960
}
2961
&.bottom {
2963
border-bottom-left-radius: $material_radius + 0.5px;
2964
border-bottom-right-radius: $material_radius + 0.5px;
2965
overlay {
2967
border-bottom-left-radius: $material_radius;
2968
border-bottom-right-radius: $material_radius;
2969
}
2970
}
2971
&.left,
2973
&:first-child:not(.top) {
2974
border-top-left-radius: $material_radius + 0.5px;
2975
border-bottom-left-radius: $material_radius + 0.5px;
2976
overlay {
2978
border-top-left-radius: $material_radius;
2979
border-bottom-left-radius: $material_radius;
2980
}
2981
}
2982
&.right,
2984
&:last-child:not(.bottom) {
2985
border-top-right-radius: $material_radius + 0.5px;
2986
border-bottom-right-radius: $material_radius + 0.5px;
2987
overlay {
2989
border-top-right-radius: $material_radius;
2990
border-bottom-right-radius: $material_radius;
2991
}
2992
}
2993
&.dark overlay { color: white; }
2995
&.light overlay { color: scale-alpha(black, 0.8); }
2997
&.dark { color: white; } // for focus ring
2999
&.light { color: scale-alpha(black, 0.8); } // for focus ring
3001
&:drop(active) {
3003
box-shadow: none;
3004
&.light overlay {
3006
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3007
}
3008
&.dark overlay {
3010
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3011
}
3012
}
3013
overlay {
3015
transition: $shadow_transition;
3016
box-shadow: $z-depth-1;
3017
&:hover { box-shadow: $z-depth-2; }
3019
}
3020
&#add-color-button {
3022
border-radius: $material_radius $material_radius 0 0;
3023
color: white; // for focus ring
3024
&:only-child { border-radius: $material_radius; }
3026
overlay {
3028
background-image: linear-gradient(to right,
3029
$error_bg_color 25%,
3030
$warning_bg_color 25%, $warning_bg_color 50%,
3031
$info_bg_color 50%, $info_bg_color 75%,
3032
$question_bg_color 75%);
3033
color: white;
3034
}
3035
}
3036
&:disabled {
3038
opacity: $disabled_opacity;
3039
overlay { box-shadow: none; }
3041
}
3042
row:selected & {
3044
}
3045
&#editor-color-sample {
3047
border-radius: $material_radius + 0.5px;
3048
overlay { border-radius: $material_radius; }
3050
// overlay:hover { box-shadow: $z-depth-1; }
3052
}
3053
}
3054
// colorscale popup
3056
colorchooser .popover.osd {
3057
transition: $shadow_transition;
3058
border-radius: 2px;
3059
box-shadow: $z-depth-2;
3060
background-color: $base_color;
3061
&:backdrop { box-shadow: $z-depth-1; }
3063
spinbutton:not(.vertical) { @extend %entry.flat; }
3065
}
3066
/********
3069
* Misc *
3070
********/
3071
//content view (grid/list)
3072
.content-view {
3073
background-color: $bg_color;
3074
// &:hover { -gtk-icon-effect: highlight; }
3076
rubberband { @extend rubberband; }
3078
}
3079
.scale-popup {
3081
.osd & { @extend %osd; }
3082
.osd & button.flat { //FIXME: quick hack, redo properly
3084
}
3085
button { // +/- buttons on GtkVolumeButton popup
3087
}
3088
}
3089
/**********************
3092
* Window Decorations *
3093
*********************/
3094
decoration {
3095
transition: $shadow_transition;
3096
border-radius: 2px 2px 0 0;
3097
box-shadow: $z-depth-4, 0 16px 16px transparent;
3098
// FIXME rationalize shadows
3100
// this is used for the resize cursor area
3102
margin: 8px;
3103
&:backdrop {
3105
// the transparent shadow here is to enforce that the shadow extents don't
3106
// change when we go to backdrop, to prevent jumping windows.
3107
// The biggest shadow should be in the same order then in the active state
3108
// or the jumping will happen during the transition.
3109
box-shadow: $z-depth-2, 0 16px 16px transparent;
3110
}
3111
.fullscreen &,
3113
.tiled & { border-radius: 0; }
3114
.popup & { box-shadow: none; }
3116
// server-side decorations as used by mutter
3118
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3119
.csd.popup & {
3121
border-radius: 2px;
3122
box-shadow: $z-depth-2;
3123
}
3124
tooltip.csd & {
3126
border-radius: 2px;
3127
box-shadow: $z-depth-2;
3128
}
3129
messagedialog.csd & {
3131
border-radius: 2px;
3132
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3133
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3135
}
3136
.solid-csd & {
3138
margin: 4px;
3139
// border: solid 1px $borders_color;
3140
border-radius: 0;
3141
box-shadow: none;
3142
background-color: $bg_color;
3143
}
3144
}
3145
// Window Close button
3147
button.titlebutton {
3148
// @extend %button_basic.flat;
3149
@extend %button_basic.image-button;
3151
.selection-mode & {
3153
}
3154
}
3155
// catch all extend :)
3158
%selected_items {
3160
background-color: $selected_bg_color;
3161
@at-root %nobg_selected_items, & {
3163
color: $selected_fg_color;
3164
&:disabled { color: $insensitive_selected_fg_color; }
3166
}
3167
}
3168
.monospace { font: Monospace; }
3170
/**********************
3173
* Touch Copy & Paste *
3174
*********************/
3175
//touch selection handlebars for the Popover.osd above
3176
cursor-handle {
3177
border-radius: 100px;
3178
background-color: $accent_bg_color;
3179
background-image: none;
3180
&.top:dir(ltr), &.bottom:dir(rtl) {
3182
padding-left: 6px;
3183
border-top-right-radius: 0;
3184
}
3185
&.bottom:dir(ltr), &.top:dir(rtl) {
3187
padding-right: 6px;
3188
border-top-left-radius: 0;
3189
}
3190
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3192
-GtkWidget-text-handle-width: 24;
3193
-GtkWidget-text-handle-height: 30;
3194
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3196
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3197
url('#{$_url}@2.png'));
3198
}
3199
}
3200
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3202
button.circular { // FIXME: aggregate to buttons
3204
border-radius: 100px;
3205
-gtk-outline-radius: 100px;
3206
label { padding: 0; }
3208
}
3209
// shortcut window keys
3211
.keycap {
3212
min-width: 28px - 8px * 2;
3213
min-height: 28px - 2px;
3214
margin-top: 2px;
3215
padding-bottom: 2px;
3216
padding-left: 8px;
3217
padding-right: 8px;
3218
border: solid 1px $borders_color;
3220
border-radius: 2px + 1px;
3221
box-shadow: inset 0 -2px $borders_color;
3222
background-color: $base_color;
3223
color: $fg_color;
3224
font-size: smaller;
3225
}
3226
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3228
transition: $material_transition;
3229
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3230
caret-color: $accent_bg_color;
3231
}
3232
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3234
stackswitcher button.circular,
3236
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3237
min-width: $medium_size;
3238
min-height: $medium_size;
3239
padding: 0;
3240
}
3241