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_duration: 0.3s;
13
$material_timing_function: cubic-bezier(0, 0, 0.2, 1);
14
// FIXME: color's transition is too slow
15
$material_transition: all $material_duration $material_timing_function, color 0;
16
// fallback
18
$header_borders_color: mix(#000000, $dark_color, percentage(alpha($borders_color)));
19
* {
21
padding: 0;
22
background-clip: padding-box;
23
-GtkToolButton-icon-spacing: 4;
25
-GtkTextView-error-underline-color: $error_color;
26
// The size for scrollbars. The slider is 2px smaller, but we keep it
28
// up so that the whole area is sensitive to button presses for the
29
// slider. The stepper button is larger in both directions, the slider
30
// only in the width
31
-GtkScrolledWindow-scrollbar-spacing: 0;
33
-GtkToolItemGroup-expander-size: 11;
35
-GtkTreeView-expander-size: 11;
36
-GtkTreeView-horizontal-separator: 4;
38
-GtkWidget-text-handle-width: 24;
40
-GtkWidget-text-handle-height: 24;
41
-GtkDialog-button-spacing: 4;
43
-GtkDialog-action-area-border: 0;
44
// We use the outline properties to signal the focus properties
46
// to the adwaita engine: using real CSS properties is faster,
47
// and we don't use any outlines for now.
48
outline-style: solid;
50
outline-width: 2px;
51
outline-color: $track_color;
52
outline-offset: -4px;
53
-gtk-outline-radius: 2px;
54
-gtk-secondary-caret-color: $selected_bg_color;
56
}
57
/***************
60
* Base States *
61
***************/
62
.background {
63
background-color: $bg_color;
64
color: $fg_color;
65
}
66
/*
68
These wildcard seems unavoidable, need to investigate.
69
Wildcards are bad and troublesome, use them with care,
70
or better, just don't.
71
Everytime a wildcard is used a kitten dies, painfully.
72
*/
73
*:disabled { -gtk-icon-effect: dim; }
75
.gtkstyle-fallback {
77
background-color: $bg_color;
78
color: $fg_color;
79
&:hover {
81
background-color: darken($bg_color, 5%);
82
color: $fg_color;
83
}
84
&:active {
86
background-color: darken($bg_color, 10%);
87
color: $fg_color;
88
}
89
&:disabled {
91
background-color: $bg_color;
92
color: $insensitive_fg_color;
93
}
94
&:selected {
96
background-color: $selected_bg_color;
97
color: $selected_fg_color;
98
}
99
}
100
.view,
102
%view {
103
@extend row.activatable;
104
background-color: $base_color;
106
color: $fg_color;
107
&:hover, &:active, &:selected { border-radius: 2px; }
109
&:disabled {
111
// background-color: $secondary_base_color;
112
color: $insensitive_fg_color;
113
}
114
&:selected { @extend %selected_items; }
116
}
117
.view,
119
textview {
120
text {
121
// @extend %view;
122
background-color: $base_color;
124
color: $fg_color;
125
&:disabled {
127
// background-color: $secondary_base_color;
128
color: $insensitive_fg_color;
129
}
130
selection { @extend %selected_items; }
132
}
133
}
134
textview border {
136
background-color: $secondary_base_color;
137
background-image: image($bg_color); // HACK: the border node just draws background so, using a background-image to draw the border
138
background-repeat: no-repeat;
139
color: $tertiary_fg_color;
140
&.bottom {
142
background-size: 100% 1px;
143
background-position: top;
144
}
145
&.top {
147
background-size: 100% 1px;
148
background-position: bottom;
149
}
150
&.left {
152
background-size: 1px 100%;
153
background-position: right;
154
}
155
&.right {
157
background-size: 1px 100%;
158
background-position: left;
159
}
160
}
161
iconview { @extend .view; }
163
.rubberband,
165
rubberband {
166
border: 1px solid $secondary_selected_bg_color;
167
background-color: scale-alpha($secondary_selected_bg_color, $lower_opacity);
168
}
169
flowbox {
171
rubberband { @extend rubberband; }
172
flowboxchild {
174
outline-offset: -2px;
175
padding: 4px;
176
border-radius: 2px;
177
&:selected { @extend %selected_items; }
179
}
180
}
181
label {
183
&.separator {
184
@extend .dim-label;
185
color: $fg_color;
187
}
188
row:selected &,
190
&:selected { @extend %nobg_selected_items; }
191
selection {
193
background-color: $selected_bg_color;
194
color: $selected_fg_color;
195
}
196
&:disabled {
198
color: $insensitive_fg_color;
199
selection { @extend %selected_items:disabled; }
201
}
202
}
203
.dim-label { opacity: $hint_opacity; }
205
assistant {
207
.sidebar {
208
padding: 4px 0;
209
// background-color: $base_color;
210
// border-top: 1px solid $borders_color;
211
}
212
// &.csd .sidebar { border-top-style: none; }
214
.sidebar label {
216
min-height: $medium_size;
217
padding: 0 12px;
218
color: $tertiary_fg_color;
219
font-weight: 500;
220
&.highlight { color: $fg_color; }
222
}
223
}
224
%osd, .osd { opacity: $higher_opacity; }
226
/*********************
229
* Spinner Animation *
230
*********************/
231
@keyframes spin {
232
to { -gtk-icon-transform: rotate(1turn); }
233
}
234
@keyframes spin_colors {
236
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
237
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
238
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
239
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
240
}
241
spinner {
243
background: none;
244
opacity: 0; // non spinning spinner makes no sense
245
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
246
&:checked {
248
opacity: 1;
249
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
250
&:disabled { opacity: $disabled_opacity; }
252
}
253
}
254
/****************
257
* Text Entries *
258
****************/
259
%entry,
260
entry {
261
%entry_basic, & {
262
min-height: $medium_size;
263
padding: 0 8px;
264
border-radius: 2px;
265
@include entry(normal);
267
&:focus { @include entry(focus); }
269
&:disabled { @include entry(insensitive); }
271
&.flat {
273
border-radius: 0;
274
@include entry(flat-normal);
276
&:focus { @include entry(flat-focus); }
278
&:disabled { @include entry(flat-insensitive); }
280
}
281
image { // icons inside the entry
283
color: gtkalpha(currentColor, $enabled_opacity);
284
&:hover, &:active { color: currentColor; }
286
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
288
&.left { padding-left: 2px; padding-right: 6px; }
290
&.right { padding-left: 6px; padding-right: 2px; }
292
}
293
undershoot {
295
&.left { @include undershoot(left); }
296
&.right { @include undershoot(right); }
298
}
299
selection { @extend %selected_items; }
301
// entry error and warning style
303
@each $e_type, $e_color in (error, $error_color),
304
(warning, $warning_color) {
305
&.#{$e_type} {
306
@include entry(normal, $e_color);
307
&:focus { @include entry(focus, $e_color); }
309
&:disabled { @include entry(insensitive, $e_color); }
311
&.flat {
313
@include entry(flat-normal, $e_color);
314
&:focus { @include entry(flat-focus, $e_color); }
316
&:disabled { @include entry(flat-insensitive, $e_color); }
318
}
319
}
320
}
321
&:drop(active) {
323
// box-shadow: inset 0 0 0 2px $accent_bg_color;
324
}
325
.osd & {
327
}
328
}
329
progress {
331
margin: 2px -6px;
332
border-style: none none solid;
333
border-width: 2px;
334
border-color: $selected_bg_color;
335
// border-radius: 0;
336
// box-shadow: none;
337
background-color: transparent;
338
// background-image: none;
339
}
340
// linked entries
342
.linked:not(.vertical) > &:not(.flat) { @extend %linked; }
343
// Vertically linked entries
345
.linked.vertical > &:not(.flat) { @extend %linked_vertical; }
346
}
347
treeview acceleditor > label { background-color: $selected_bg_color; }
349
treeview entry {
351
&.flat, & {
352
min-height: 0;
353
padding: 2px;
354
border-radius: 0;
355
box-shadow: none;
356
background-color: $base_color;
357
&, &:focus { border-image: none; }
359
}
360
}
361
/***********
364
* Buttons *
365
***********/
366
// stuff for .needs-attention
367
@keyframes needs_attention {
368
from {
369
background-image: -gtk-gradient(radial,
370
center center, 0,
371
center center, 0.001,
372
to($accent_bg_color),
373
to(transparent));
374
}
375
to {
377
background-image: -gtk-gradient(radial,
378
center center, 0,
379
center center, 0.5,
380
to($accent_bg_color),
381
to(transparent));
382
}
383
}
384
%button,
386
button {
387
@at-root %button_basic, & {
388
min-height: 24px;
389
min-width: 16px;
390
padding: 6px 10px;
391
border-radius: 2px;
392
font-weight: 500;
393
@include button(normal);
395
&:hover { @include button(hover); }
397
&:active { @include button(active); }
399
&:disabled { @include button(insensitive); }
401
&:checked { @include button(checked); }
403
&:checked:disabled { @include button(checked-insensitive); }
405
&.flat {
407
@include button(flat-normal);
408
&:hover { @include button(flat-hover); }
410
&:active { @include button(flat-active); }
412
&:disabled { @include button(flat-insensitive); }
414
&:checked { @include button(flat-checked); }
416
&:checked:disabled { @include button(flat-checked-insensitive); }
418
}
419
&.image-button {
421
min-width: 24px;
422
padding: 6px;
423
-gtk-outline-radius: 100px;
424
border-radius: 100px;
425
}
426
&.text-button {
428
padding-left: 16px;
429
padding-right: 16px;
430
}
431
&.text-button.image-button {
433
padding-left: 10px;
434
padding-right: 10px;
435
-gtk-outline-radius: 2px;
436
border-radius: 2px;
437
label {
439
&:last-child { padding-left: 2px; padding-right: 6px; }
440
&:first-child { padding-left: 6px; padding-right: 2px; }
441
}
442
}
443
.linked > & { @extend %linked; }
445
.linked.vertical > & { @extend %linked_vertical; }
447
.linked > &.flat,
449
.linked.vertical > &.flat {
450
border-radius: 2px;
451
&.image-button {
453
-gtk-outline-radius: 100px;
454
border-radius: 100px;
455
}
456
&.text-button.image-button {
458
-gtk-outline-radius: 2px;
459
border-radius: 2px;
460
}
461
}
462
&:drop(active) {
464
// box-shadow: inset 0 0 0 2px $accent_bg_color;
465
}
466
}
467
@at-root %button_selected, row:selected & {
469
&:disabled { color: $insensitive_secondary_selected_fg_color; }
470
&.flat {
472
color: $secondary_selected_fg_color;
473
&:hover, &:active { color: $selected_fg_color; }
475
&:disabled { color: $insensitive_secondary_selected_fg_color; }
477
}
478
}
479
separator {
481
min-width: 0;
482
min-height: 0;
483
background: transparent;
484
}
485
// big standalone buttons like in Documents pager
487
&.osd {
488
padding: 12px 16px;
489
&.image-button { padding: 12px; }
491
&:disabled { opacity: 0; }
493
}
494
//overlay / OSD style
496
@at-root %osd_button,
497
.osd & {
498
}
499
// Suggested and Destructive Action buttons
501
@each $b_type, $b_color in (suggested-action, $suggested_color),
502
(destructive-action, $destructive_color) {
503
&.#{$b_type} {
504
background-color: $b_color;
505
color: $selected_fg_color;
506
// @include button(normal, $b_color, white);
508
// &:hover { @include button(hover, $b_color, white); }
510
// &:active, &:checked { @include button(active, $b_color, white); }
512
&:disabled { @include button(insensitive, $b_color, white); }
514
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
516
&.flat {
518
background-color: transparent;
519
color: $b_color;
520
// @include button(flat-normal, $b_color, white);
522
// &:hover { @include button(flat-hover, $b_color, white); }
524
// &:active, &:checked { @include button(flat-active, $b_color, white); }
526
&:disabled { @include button(flat-insensitive, $b_color, white); }
528
}
529
.osd & {
531
}
532
}
533
}
534
.stack-switcher > & {
536
// to position the needs attention dot, padding is added to the button
537
// child, a label needs just lateral padding while an icon needs vertical
538
// padding added too.
539
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
541
> label {
543
padding-left: 6px; // label padding
544
padding-right: 6px; //
545
}
546
> image {
548
padding-left: 6px; // image padding
549
padding-right: 6px; //
550
padding-top: 3px; //
551
padding-bottom: 3px; //
552
}
553
&.text-button {
555
// compensate text-button paddings
556
padding-left: 10px;
557
padding-right: 10px;
558
}
559
&.image-button {
561
// we want image buttons to have a 1:1 aspect ratio, so compensation
562
// of the padding added to the GtkImage is needed
563
padding-left: 4px;
564
padding-right: 4px;
565
}
566
&.needs-attention {
568
> label,
569
> image { @extend %needs_attention; }
570
&:checked {
572
> label,
573
> image {
574
animation: none;
575
background-image: none;
576
}
577
}
578
}
579
}
580
// inline-toolbar buttons
582
.inline-toolbar & {
583
@extend %button_basic.flat;
584
&:not(.text-button) { @extend %button_basic.image-button; }
586
}
587
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
589
}
590
%needs_attention {
592
animation: needs_attention $material_duration $material_timing_function forwards;
593
background-repeat: no-repeat;
594
background-position: right 3px;
595
background-size: 6px 6px;
596
&:dir(rtl) { background-position: left 3px; }
598
}
599
// all the following is for the +|- buttons on inline toolbars, that way
601
// should really be deprecated...
602
.inline-toolbar toolbutton > button { // redefining the button look is
603
// needed since those are flat...
604
}
605
// More inline toolbar buttons
607
toolbar.inline-toolbar toolbutton {
608
// > button.flat { @extend %linked_middle; }
609
// &:first-child > button.flat { @extend %linked:first-child; }
611
// &:last-child > button.flat { @extend %linked:last-child; }
613
// &:only-child > button.flat { @extend %linked:only-child; }
615
}
616
%linked_middle {
618
border-radius: 0;
619
}
620
%linked {
622
-gtk-outline-radius: 2px;
623
@extend %linked_middle;
625
&:first-child {
627
border-top-left-radius: 2px;
628
border-bottom-left-radius: 2px;
629
}
630
&:last-child {
632
border-top-right-radius: 2px;
633
border-bottom-right-radius: 2px;
634
}
635
&:only-child {
637
border-radius: 2px;
638
}
639
}
640
%linked_vertical_middle {
642
border-radius: 0;
643
}
644
%linked_vertical{
646
-gtk-outline-radius: 2px;
647
@extend %linked_vertical_middle;
649
&:first-child {
651
border-top-left-radius: 2px;
652
border-top-right-radius: 2px;
653
}
654
&:last-child {
656
border-bottom-left-radius: 2px;
657
border-bottom-right-radius: 2px;
658
}
659
&:only-child {
661
border-radius: 2px;
662
}
663
}
664
/* menu buttons */
666
modelbutton.flat,
667
.menuitem.button.flat {
668
min-height: $menuitem_size;
669
padding-left: 8px;
670
padding-right: 8px;
671
border-radius: 2px;
672
color: inherit;
673
@extend %button_basic.flat;
675
&:selected { @extend %selected_items; }
677
check,
679
radio {
680
&, &:hover { background-image: none; }
681
&:active { animation: none; }
683
}
684
check:not(:indeterminate):checked:active { animation: check_check $material_duration $material_timing_function; }
686
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_duration $material_timing_function; }
688
// FIXME: remove the following when the checks/radios rewrite lands
690
check:last-child,
691
radio:last-child { margin-left: 8px; }
692
check:first-child,
694
radio:first-child { margin-right: 8px; }
695
}
696
modelbutton.flat arrow {
698
background: none;
699
&:hover { background: none; }
701
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
703
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
705
}
706
button.color {
708
min-height: $small_size;
709
min-width: $small_size;
710
padding: $container_padding;
711
colorswatch:only-child {
713
// &, overlay { border-radius: 0; }
714
}
715
}
716
/*********
719
* Links *
720
*********/
721
*:link {
722
&, &:hover, &:active { color: $link_color; }
723
&:visited {
725
&, &:hover, &:active { color: $link_visited_color; }
726
}
727
@at-root %link_selected,
729
&:selected,
730
*:selected & { color: $selected_fg_color; }
731
}
732
button:link,
734
button:visited {
735
@extend *:link;
736
> label { text-decoration-line: underline; }
738
}
739
/*****************
741
* GtkSpinButton *
742
*****************/
743
spinbutton {
744
&:not(.vertical) {
745
// in this horizontal configuration, the whole spinbutton
746
// behaves as the entry, so we extend the entry styling
747
// and nuke the style on the internal entry
748
@extend %entry;
749
padding: 0;
751
%spinbutton_entry,
753
entry {
754
min-width: $large_size - 16px;
755
// reset all the other props since the spinbutton node is styled here
756
margin: 0;
757
border-image: none;
758
border-radius: 0;
759
box-shadow: none;
760
background-color: transparent;
761
}
762
button {
764
min-height: $small_size;
765
min-width: $small_size;
766
// margin: $container_padding;
767
padding: 0;
768
border: solid $container_padding transparent;
769
@extend %button_basic.flat;
771
@extend %button_basic.image-button;
773
&.up { margin-left: -$container_padding / 2; }
775
&.down { margin-right: -$container_padding / 2; }
777
}
778
}
779
// OSD horizontal
781
.osd &:not(.vertical) {
782
button {
783
}
784
}
785
// Vertical
787
&.vertical {
788
// in the vertical configuration, we treat the spinbutton
789
// as a box, and tweak the style of the entry in the middle
790
// so that it's linked
791
// FIXME: this should not be set at all, but otherwise it gets the wrong
793
// color
794
&:disabled { color: $insensitive_fg_color; }
795
&:drop(active) {
797
box-shadow: none;
798
}
799
entry {
801
min-height: $medium_size;
802
min-width: $large_size;
803
padding: 0;
804
}
805
button {
807
min-height: $medium_size;
808
min-width: $large_size;
809
padding: 0;
810
@extend %button_basic.flat;
812
&.up { border-radius: 2px 2px 0 0; }
814
&.down { border-radius: 0 0 2px 2px; }
816
}
817
}
818
// OSD vertical
820
.osd &.vertical button:first-child {
821
}
822
// Misc
824
treeview &:not(.vertical) {
825
min-height: 0;
826
border-style: none;
827
border-radius: 0;
828
entry {
830
min-height: 0;
831
padding: 1px 2px;
832
}
833
}
834
}
835
/**************
838
* ComboBoxes *
839
**************/
840
combobox {
841
arrow {
842
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
843
min-height: 16px;
844
min-width: 16px;
845
}
846
menu,
848
.menu {
849
padding: 2px 0;
850
menuitem {
852
min-height: $medium_size;
853
padding: 0 10px;
854
}
855
}
856
&.linked {
858
button:nth-child(2) {
859
&:dir(ltr) { @extend %linked:last-child; }
860
&:dir(rtl) { @extend %linked:first-child; }
861
}
862
}
863
&:drop(active) { // FIXME: untested
865
box-shadow: none;
866
// button.combo { @extend %button_basic:drop(active); }
868
}
869
}
870
.linked > combobox > box > button.combo {
872
// the combo is a composite widget so the way we do button linking doesn't
873
// work, special case needed. See
874
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
875
&:dir(ltr),
877
&:dir(rtl) { @extend %linked_middle; } // specificity bump
878
}
879
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
881
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
882
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
883
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
885
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
886
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
887
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
888
/************
891
* Toolbars *
892
************/
893
toolbar {
894
-GtkWidget-window-dragging: true;
895
padding: $container_padding / 2;
896
background-color: $bg_color;
897
// on OSD
899
.osd & { background-color: transparent; }
900
// stand-alone OSD toolbars
902
&.osd {
903
transition: box-shadow $material_duration $material_timing_function;
904
padding: $container_padding;
905
border-radius: 2px;
906
box-shadow: $z-depth-2;
907
background-color: $base_color;
908
&:backdrop { box-shadow: $z-depth-1; }
910
&.left,
912
&.right,
913
&.top,
914
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
915
button { @extend %button_basic.flat; }
917
}
918
// toolbar separators
920
&.horizontal separator { margin: $container_padding / 2; }
921
&.vertical separator { margin: $container_padding / 2; }
922
&:not(.inline-toolbar):not(.osd) {
924
scale,
925
entry,
926
spinbutton,
927
button { margin: $container_padding / 2; }
928
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
930
}
931
}
932
//searchbar, location-bar & inline-toolbar
934
.inline-toolbar {
935
padding: $container_padding;
936
border-style: solid;
937
border-width: 0 1px 1px;
938
border-color: $borders_color;
939
background-color: $secondary_base_color;
940
}
941
searchbar,
943
.location-bar {
944
padding: $container_padding;
945
border-style: solid;
946
border-width: 0 0 1px;
947
border-color: $borders_color;
948
background-color: $dark_color;
949
background-clip: border-box;
950
}
951
/***************
954
* Header bars *
955
***************/
956
%titlebar,
957
headerbar {
958
min-height: $large_size;
959
padding: 0 $container_padding;
960
border-width: 0 0 1px;
961
border-style: solid;
962
border-color: $borders_color;
963
box-shadow: inset 0 1px $highlight_color;
964
background-color: $dark_color;
965
background-clip: border-box;
966
&:backdrop {
968
// background-color: $dark_color;
969
}
970
.title {
972
padding-left: 12px;
973
padding-right: 12px;
974
font-weight: bold;
975
}
976
.subtitle {
978
padding-left: 12px;
979
padding-right: 12px;
980
font-size: smaller;
981
@extend .dim-label;
983
}
984
button:not(.suggested-action):not(.destructive-action) {
986
@extend %button_basic.flat;
987
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
989
$selected_bg_color 0%,
990
transparent 0%)
991
0 0 0 / 0 0 0px;
992
&:checked {
994
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
995
$selected_bg_color 100%,
996
transparent 0%)
997
0 0 2 / 0 0 2px;
998
background-color: transparent;
999
color: $fg_color;
1000
&:disabled {
1002
background-color: transparent;
1003
color: $insensitive_fg_color;
1004
> label { color: inherit; }
1006
}
1007
}
1008
}
1009
&.selection-mode {
1011
animation: header_ripple_effect $material_duration $material_timing_function forwards;
1012
box-shadow: inset 0 1px $secondary_highlight_color;
1013
// background-color: $selected_bg_color;
1014
color: $selected_fg_color;
1015
&:backdrop {
1017
}
1018
.subtitle:link { @extend *:link:selected; }
1020
button:not(.suggested-action):not(.destructive-action) {
1022
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
1023
$selected_fg_color 0%,
1024
transparent 0%)
1025
0 0 0 / 0 0 0px;
1026
// color: $secondary_selected_fg_color;
1027
&, &:hover, &:active, &:checked { color: $selected_fg_color; }
1029
&:disabled {
1031
color: $insensitive_selected_fg_color;
1032
> label { color: inherit; }
1034
}
1035
&:checked {
1037
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
1038
$selected_fg_color 100%,
1039
transparent 0%)
1040
0 0 2 / 0 0 2px;
1041
color: $selected_fg_color;
1042
&:disabled {
1044
color: $insensitive_selected_fg_color;
1045
> label { color: inherit; }
1047
}
1048
}
1049
}
1050
.selection-menu {
1052
padding-left: 16px;
1053
padding-right: 16px;
1054
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1056
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1058
}
1059
}
1060
.tiled &,
1062
.maximized & {
1063
border-radius: 0; // squared corners when the window is max'd or tiled
1064
box-shadow: none;
1065
}
1066
&.default-decoration {
1068
min-height: $small_size;
1069
padding: $container_padding;
1070
border-width: 0;
1071
button.titlebutton {
1073
min-height: $small_size;
1074
min-width: $small_size;
1075
margin: 0;
1076
padding: 0;
1077
}
1078
}
1079
}
1080
headerbar {
1082
// add vertical margins to headerbar entries, buttons and separators to avoid them spanning the whole height
1083
entry,
1084
spinbutton,
1085
// separator,
1086
button {
1087
margin-top: $container_padding;
1088
margin-bottom: $container_padding;
1089
}
1090
}
1091
.titlebar {
1093
border-top-left-radius: 2px;
1094
border-top-right-radius: 2px;
1095
}
1096
headerbar {
1098
separator:first-child + &, // tackles the paned container case
1099
&:first-child {
1100
border-top-left-radius: 2px;
1101
.tiled &,
1103
.maximized & { border-radius: 0; }
1104
}
1105
&:last-child {
1107
border-top-right-radius: 2px;
1108
.tiled &,
1110
.maximized & { border-radius: 0; }
1111
}
1112
}
1113
.titlebar:not(headerbar) {
1115
window.csd > & {
1116
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1117
padding: 0;
1118
background-color: transparent;
1119
background-image: none;
1120
border-style: none;
1121
box-shadow: none;
1122
}
1123
> separator { background-color: $header_borders_color; }
1125
@extend %titlebar;
1127
}
1128
/************
1131
* Pathbars *
1132
************/
1133
.path-bar button {
1134
&.text-button, &.image-button, & {
1135
padding-left: 6px;
1136
padding-right: 6px;
1137
}
1138
&.text-button.image-button, & {
1140
// label:last-child { padding-left: 2px; padding-right: 8px; }
1141
// label:first-child { padding-left: 8px; padding-right: 2px; }
1142
}
1143
image {
1145
padding-left: 4px;
1146
padding-right: 4px;
1147
}
1148
&.slider-button {
1150
padding-left: 0;
1151
padding-right: 0;
1152
}
1153
}
1154
/**************
1157
* Tree Views *
1158
**************/
1159
treeview.view {
1160
-GtkTreeView-grid-line-width: 1;
1161
-GtkTreeView-grid-line-pattern: '';
1162
-GtkTreeView-tree-line-width: 1;
1163
-GtkTreeView-tree-line-pattern: '';
1164
-GtkTreeView-expander-size: 16;
1165
border-left-color: $track_color; // this is actually the tree lines color,
1167
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1168
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1170
&:hover, &:active, &:selected { border-radius: 0; }
1172
&.separator {
1174
min-height: 1px + 2px * 2;
1175
color: $borders_color;
1176
}
1177
&:drop(active) {
1179
border-style: solid none;
1180
border-width: 1px;
1181
border-color: $accent_bg_color;
1182
&.after { border-top-style: none; }
1184
&.before { border-bottom-style: none; }
1186
}
1187
&.expander {
1189
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1190
-gtk-icon-transform: rotate(-90deg);
1191
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1193
&:checked { -gtk-icon-transform: unset; }
1195
color: $secondary_fg_color;
1197
&:hover, &:active { color: $fg_color; }
1199
&:disabled { color: $insensitive_secondary_fg_color; }
1201
&:selected {
1203
color: $secondary_selected_fg_color;
1204
&:hover, &:active { color: $selected_fg_color; }
1206
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1208
}
1209
}
1210
&.progressbar { // progress bar in treeviews
1212
border-style: none none solid;
1213
border-width: $bar_size;
1214
border-color: $selected_bg_color;
1215
background-color: transparent;
1216
background-image: none;
1217
&:selected { border-color: currentColor; }
1219
}
1220
&.trough { // progress bar trough in treeviews
1222
border-style: none none solid;
1223
border-width: $bar_size;
1224
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1225
background-color: transparent;
1226
background-image: none;
1227
&:selected { border-color: $track_color; }
1229
}
1230
header {
1232
button {
1233
@extend row.activatable;
1234
padding: 2px 6px;
1236
border-style: none solid solid none;
1237
border-width: 1px;
1238
border-color: $borders_color;
1239
border-radius: 0;
1240
background-clip: border-box;
1241
&, &:hover, &:active { box-shadow: none; }
1243
&, &:disabled { background-color: $base_color; }
1245
&:last-child { border-right-style: none; }
1247
}
1248
}
1249
button.dnd,
1251
header.button.dnd { // for treeview-like derive widgets
1252
padding: 2px 6px;
1253
border-style: none solid solid;
1254
border-width: 1px;
1255
border-color: $borders_color;
1256
border-radius: 0;
1257
box-shadow: none;
1258
background-color: $base_color;
1259
background-clip: border-box;
1260
color: $selected_bg_color;
1261
}
1262
}
1263
/*********
1266
* Menus *
1267
*********/
1268
menubar,
1269
.menubar {
1270
-GtkWidget-window-dragging: true;
1271
padding: 0;
1272
box-shadow: inset 0 -1px $borders_color;
1273
background-color: $dark_color;
1274
> menuitem {
1276
transition: $material_transition;
1277
min-height: 20px;
1278
padding: 4px 8px;
1279
color: $secondary_fg_color;
1280
&:hover { //Seems like it :hover even with keyboard focus
1282
box-shadow: inset 0 -2px $selected_bg_color;
1283
color: $fg_color;
1284
}
1285
&:disabled { color: $insensitive_secondary_fg_color; }
1287
}
1288
}
1289
menu,
1291
.menu {
1292
margin: 4px 0;
1293
padding: 4px 0;
1294
background-color: $base_color;
1295
border: 1px solid $borders_color; // adds borders in a non composited env
1296
.csd & {
1298
border: none; // axes borders in a composited env
1299
border-radius: 2px;
1300
}
1301
menuitem {
1303
min-height: 20px;
1304
min-width: 40px;
1305
padding: 4px 8px;
1306
font: initial;
1307
text-shadow: none;
1308
&:hover {
1310
// background-color: gtkalpha(currentColor, $lower_opacity / 2);
1311
background-color: $selected_bg_color;
1312
color: $selected_fg_color;
1313
}
1314
&:disabled { color: $insensitive_fg_color; }
1316
// submenu indicators
1318
arrow {
1319
min-height: 16px;
1320
min-width: 16px;
1321
&:dir(ltr) {
1323
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1324
margin-left: 8px;
1325
}
1326
&:dir(rtl) {
1328
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1329
margin-right: 8px;
1330
}
1331
}
1332
}
1333
// overflow arrows
1335
> arrow {
1336
min-height: 16px;
1337
min-width: 16px;
1338
padding: 4px;
1339
border-radius: 0;
1340
background-color: $base_color;
1341
color: $secondary_fg_color;
1342
&.top {
1344
margin-top: -4px;
1345
border-bottom: 1px solid $borders_color;
1346
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1347
}
1348
&.bottom {
1350
margin-bottom: -4px;
1351
border-top: 1px solid $borders_color;
1352
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1353
}
1354
&:hover {
1356
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1357
color: $fg_color;
1358
}
1359
&:disabled {
1361
border-color: transparent;
1362
background-color: transparent;
1363
color: transparent;
1364
// color: $insensitive_secondary_fg_color;
1365
}
1366
}
1367
separator { margin: 4px 0; }
1369
}
1370
menuitem {
1372
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1373
check,
1375
radio {
1376
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1377
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1378
}
1379
}
1380
.csd.popup { border-radius: 2px; }
1382
/***************
1385
* Popovers *
1386
***************/
1387
popover.background {
1388
transition: box-shadow $material_duration $material_timing_function;
1389
padding: 0;
1390
border-radius: 2px + 1px;
1391
box-shadow: $z-depth-2;
1392
background-color: $secondary_base_color;
1393
&:backdrop { box-shadow: $z-depth-1; }
1395
&, .csd & {
1397
border-style: solid;
1398
border-width: 1px;
1399
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1400
}
1401
> list,
1403
> .view,
1404
> toolbar {
1405
border-style: none;
1406
box-shadow: none;
1407
background-color: transparent;
1408
}
1409
&, .csd & {
1411
&.touch-selection,
1412
&.magnifier,
1413
&.osd { @extend %osd; }
1414
}
1415
separator { margin: 4px 0; }
1417
list separator { margin: 0; }
1419
checkbutton,
1421
radiobutton { @extend modelbutton.flat; }
1422
}
1423
/*************
1425
* Notebooks *
1426
*************/
1427
notebook {
1428
> header {
1429
border-width: 1px;
1430
border-color: $borders_color;
1431
background-color: $dark_color;
1432
background-clip: border-box;
1433
&.top {
1435
border-bottom-style: solid;
1436
> tabs:not(.reorderable-page) { // FIXME: .reorderable-page doesn't work in `tabs`
1437
margin-bottom: -1px;
1438
> tab {
1439
&:hover { box-shadow: inset 0 -2px $track_color; }
1440
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1442
&.reorderable-page {
1444
&:hover { box-shadow: inset 0 -1px $header_borders_color; }
1445
&:checked { box-shadow: inset 0 -1px $header_borders_color; }
1447
}
1448
}
1449
}
1450
}
1451
&.bottom {
1453
border-top-style: solid;
1454
> tabs {
1455
margin-top: -1px;
1456
> tab {
1457
&:hover { box-shadow: inset 0 2px $track_color; }
1458
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1460
&.reorderable-page {
1462
&:hover { box-shadow: inset 0 1px $header_borders_color; }
1463
&:checked { box-shadow: inset 0 1px $header_borders_color; }
1465
}
1466
}
1467
}
1468
}
1469
&.left {
1471
border-right-style: solid;
1472
> tabs {
1473
margin-right: -1px;
1474
> tab {
1475
&:hover { box-shadow: inset -2px 0 $track_color; }
1476
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1478
&.reorderable-page {
1480
&:hover { box-shadow: inset -1px 0 $header_borders_color; }
1481
&:checked { box-shadow: inset -1px 0 $header_borders_color; }
1483
}
1484
}
1485
}
1486
}
1487
&.right {
1489
border-left-style: solid;
1490
> tabs {
1491
margin-left: -1px;
1492
> tab {
1493
&:hover { box-shadow: inset 2px 0 $track_color; }
1494
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1496
&.reorderable-page {
1498
&:hover { box-shadow: inset 1px 0 $header_borders_color; }
1499
&:checked { box-shadow: inset 1px 0 $header_borders_color; }
1501
}
1502
}
1503
}
1504
}
1505
&.top > tabs > arrow {
1507
@extend %notebook_vert_arrows;
1508
border-top-style: none;
1510
}
1511
&.bottom > tabs > arrow {
1513
@extend %notebook_vert_arrows;
1514
border-bottom-style: none;
1516
}
1517
@at-root %notebook_vert_arrows {
1519
padding-left: 4px;
1520
padding-right: 4px;
1521
&.down {
1523
margin-left: -8px;
1524
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1525
}
1526
&.up {
1528
margin-right: -8px;
1529
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1530
}
1531
}
1532
&.left > tabs > arrow {
1534
@extend %notebook_horz_arrows;
1535
border-left-style: none;
1537
}
1538
&.right > tabs > arrow {
1540
@extend %notebook_horz_arrows;
1541
border-right-style: none;
1543
}
1544
@at-root %notebook_horz_arrows {
1546
padding-top: 4px;
1547
padding-bottom: 4px;
1548
&.down {
1550
margin-top: -8px;
1551
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1552
}
1553
&.up {
1555
margin-bottom: -8px;
1556
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1557
}
1558
}
1559
> tabs > arrow {
1561
@extend %button_basic.flat;
1562
min-height: 16px;
1564
min-width: 16px;
1565
border-radius: 0;
1566
}
1567
tab {
1569
transition: $material_transition;
1570
min-height: 24px;
1571
min-width: 24px;
1572
padding: 6px 12px;
1573
outline-offset: -6px;
1575
border-width: 1px; // for reorderable tabs
1577
border-color: transparent; //
1578
color: $secondary_fg_color;
1580
font-weight: 500;
1581
&:hover {
1583
color: $fg_color;
1584
&.reorderable-page {
1586
border-color: $borders_color;
1587
background-color: $bg_color;
1588
}
1589
}
1590
&:disabled { color: $insensitive_secondary_fg_color; }
1592
&:checked {
1594
color: $fg_color;
1595
&:disabled { color: $insensitive_fg_color; }
1597
&:not(.reorderable-page) { animation: tab_ripple_effect $material_duration * 2 ease-in-out; }
1599
&.reorderable-page {
1601
border-color: $borders_color;
1602
background-color: $light_color;
1603
}
1604
}
1605
// colors the button like the label, overridden otherwise
1607
button.flat {
1608
// FIXME: generalize .small-button?
1609
min-width: $small_size;
1610
min-height: $small_size;
1611
padding: 0;
1612
@extend %button_basic.image-button;
1614
&:last-child {
1616
margin-left: 6px;
1617
margin-right: -6px;
1618
}
1619
&:first-child {
1621
margin-left: -6px;
1622
margin-right: 6px;
1623
}
1624
}
1625
}
1626
&.top,
1628
&.bottom {
1629
tabs {
1630
padding-left: 8px;
1631
padding-right: 8px;
1632
&:not(:only-child) {
1634
&:first-child { margin-left: 0; }
1635
&:last-child { margin-right: 0; }
1636
}
1637
tab {
1639
&.reorderable-page {
1640
margin: 0 -1px;
1641
border-style: none solid;
1642
}
1643
}
1644
}
1645
}
1646
&.left,
1648
&.right {
1649
tabs {
1650
padding-top: 8px;
1651
padding-bottom: 8px;
1652
&:not(:only-child) {
1654
&:first-child { margin-top: 0; }
1655
&:last-child { margin-bottom: 0; }
1656
}
1657
tab {
1659
&.reorderable-page {
1660
margin: -1px 0;
1661
border-style: solid none;
1662
}
1663
}
1664
}
1665
}
1666
}
1667
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1669
background-color: $base_color;
1670
entry,
1672
spinbutton:not(.vertical) { @extend %entry.flat; }
1673
revealer entry,
1675
revealer spinbutton:not(.vertical) { @extend %entry; }
1676
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1678
}
1679
}
1680
/**************
1683
* Scrollbars *
1684
**************/
1685
scrollbar {
1686
$_slider_min_length: 24px;
1687
// disable steppers
1689
@at-root * {
1690
-GtkScrollbar-has-backward-stepper: false;
1691
-GtkScrollbar-has-forward-stepper: false;
1692
}
1693
transition: $material_transition;
1695
background-color: $base_color;
1696
background-clip: $extra_background_clip;
1697
// scrollbar border
1699
&.top { border-bottom: 1px solid $borders_color; }
1700
&.bottom { border-top: 1px solid $borders_color; }
1701
&.left { border-right: 1px solid $borders_color; }
1702
&.right { border-left: 1px solid $borders_color; }
1703
// slider
1705
slider {
1706
transition: $material_transition, margin 0, border-width 0;
1707
min-width: 8px;
1708
min-height: 8px;
1709
border: 4px solid transparent;
1710
border-radius: 100px;
1711
background-clip: padding-box;
1712
background-color: $tertiary_fg_color;
1713
&:hover { background-color: $secondary_fg_color; }
1715
&:active { background-color: $fg_color; }
1717
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1719
}
1720
&.fine-tune {
1722
slider {
1723
transition: $material_transition, margin 0, border-width 0, min-width 0, min-height 0;
1724
min-width: 4px;
1725
min-height: 4px;
1726
}
1727
&.horizontal slider { margin: 2px 0; }
1729
&.vertical slider { margin: 0 2px; }
1731
}
1732
&.overlay-indicator {
1734
&:not(.dragging):not(.hovering) {
1735
border-color: transparent;
1736
background-color: transparent;
1737
slider {
1739
min-width: 4px;
1740
min-height: 4px;
1741
margin: 2px;
1742
border: 2px solid scale-alpha($base_color, $lower_opacity);
1743
}
1744
button {
1746
min-width: 4px;
1747
min-height: 4px;
1748
margin: 2px;
1749
border: 2px solid scale-alpha($base_color, $lower_opacity);
1750
border-radius: 100px;
1751
background-color: $tertiary_fg_color;
1752
background-clip: padding-box;
1753
-gtk-icon-source: none;
1754
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1756
}
1757
&.horizontal {
1759
slider { min-width: $_slider_min_length; }
1760
button { min-width: 8px; }
1762
}
1763
&.vertical {
1765
slider { min-height: $_slider_min_length; }
1766
button { min-height: 8px; }
1768
}
1769
}
1770
&.dragging,
1772
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1773
}
1774
&.horizontal slider { min-width: $_slider_min_length; }
1776
&.vertical slider { min-height: $_slider_min_length; }
1778
// button styling
1780
button {
1781
@extend %button_basic.flat;
1782
min-width: 16px;
1783
min-height: 16px;
1784
padding: 0;
1785
border-radius: 0;
1786
}
1787
// button icons
1789
&.vertical {
1790
button {
1791
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1792
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1794
}
1795
}
1796
&.horizontal {
1798
button {
1799
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1800
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1802
}
1803
}
1804
}
1805
/**********
1808
* Switch *
1809
**********/
1810
switch {
1811
transition: $material_transition;
1812
margin: $container_padding 0;
1813
border: 4px solid transparent;
1814
border-radius: 100px;
1815
background-color: $track_color;
1816
background-clip: padding-box;
1817
font-size: 0;
1818
&:disabled { color: $insensitive_fg_color; }
1820
&:checked {
1822
background-color: scale-alpha($accent_bg_color, 0.5);
1823
&:disabled {
1825
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1826
color: $insensitive_fg_color;
1827
}
1828
}
1829
slider {
1831
@include entry(normal);
1832
transition: $material_transition, margin 0;
1834
min-width: $small_size;
1835
min-height: $small_size;
1836
margin: -4px 0 -4px -4px;
1837
-gtk-outline-radius: 100px;
1838
border-radius: 100px;
1839
background-image: -gtk-gradient(radial,
1840
center center, 0,
1841
center center, 0.5,
1842
to(transparent),
1843
to(transparent));
1844
}
1845
&:hover slider { @include entry(focus); }
1847
&:disabled slider { @include entry(insensitive); }
1849
&:checked slider {
1851
transition: $material_transition, margin 0, background-image 0;
1852
animation: needs_attention $material_duration $material_timing_function forwards;
1853
margin: -4px -4px -4px 0;
1854
// background-color: $accent_bg_color;
1855
color: $selected_fg_color;
1856
}
1857
&:checked:disabled slider { animation: none; }
1859
row:selected & {
1861
}
1862
}
1863
/*************************
1866
* Check and Radio items *
1867
*************************/
1868
// draw regular check and radio items using our PNG assets
1869
// all assets are rendered from assets.svg. never add pngs directly
1870
//selection-mode
1872
@each $s,$as in ('','-selectionmode'),
1873
(':active', '-active-selectionmode'),
1874
(':disabled', '-insensitive-selectionmode'),
1875
(':checked', '-checked-selectionmode'),
1876
(':checked:active', '-checked-active-selectionmode'),
1877
(':disabled:checked', '-checked-insensitive-selectionmode') {
1878
.view.content-view.check#{$s}:not(list) {
1879
-gtk-icon-shadow: $z-depth-1;
1880
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
1881
url("assets/checkbox#{$as}@2.png"));
1882
margin: 8px;
1883
background-color: transparent;
1884
&:hover, &:active { -gtk-icon-shadow: $z-depth-2; }
1886
&:disabled { -gtk-icon-shadow: none; }
1888
}
1889
}
1890
checkbutton.text-button, radiobutton.text-button {
1892
// this is for a nice focus on check and radios text
1893
padding: 2px 0;
1894
outline-offset: 0;
1895
label:not(:only-child) {
1897
&:first-child { margin-left: 4px; }
1898
&:last-child { margin-right: 4px; }
1900
}
1901
}
1902
check,
1904
radio {
1905
min-height: 24px;
1906
min-width: 24px;
1907
-gtk-icon-source: none;
1908
margin: -12px -8px;
1910
padding: 12px;
1911
outline-offset: 4px;
1912
// border-radius: 100%;
1913
@extend %button_basic.flat;
1915
@extend %button_basic.image-button;
1917
color: gtkalpha(currentColor, $enabled_opacity);
1919
&:hover, &:active { color: currentColor; }
1921
&:checked, &:checked:disabled { background-color: transparent; }
1923
&:checked, &:indeterminate { color: $accent_bg_color; }
1925
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1927
&:only-child { margin: -12px; }
1929
.osd & {
1931
}
1932
menu menuitem & {
1934
transition: none;
1935
margin: -16px -16px; // this is a workaround for a menu check/radio size allocation issue
1936
&:not(:checked):not(:indeterminate):hover { color: gtkalpha(currentColor, $enabled_opacity); }
1938
&, &:hover, &:disabled {
1940
background-image: none;
1941
// color: inherit;
1942
// animation: none;
1943
}
1944
}
1945
}
1946
%check,
1948
check {
1949
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1950
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1951
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1953
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1954
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1956
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1957
}
1958
%radio,
1960
radio {
1961
border-image: -gtk-gradient(radial,
1962
center center, 0,
1963
center center, 0.001,
1964
to($accent_bg_color),
1965
to(transparent))
1966
24 / 24px;
1967
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1968
-gtk-recolor(url("assets/radio-unchecked-symbolic.png")));
1969
&:checked {
1971
border-image: -gtk-gradient(radial,
1972
center center, 0,
1973
center center, (10 / 48 / 2),
1974
to($accent_bg_color),
1975
to(transparent))
1976
24 / 24px;
1977
}
1978
&:checked:disabled {
1980
border-image: -gtk-gradient(radial,
1981
center center, 0,
1982
center center, (10 / 48 / 2),
1983
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1984
to(transparent))
1985
24 / 24px;
1986
}
1987
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1989
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1990
&:indeterminate:checked {
1992
border-image: -gtk-gradient(radial,
1993
center center, 0,
1994
center center, 0.001,
1995
to($accent_bg_color),
1996
to(transparent))
1997
24 / 24px;
1998
}
1999
}
2000
// let's animate things
2002
@keyframes check_check {
2003
from { -gtk-icon-transform: rotate(90deg); }
2004
to { -gtk-icon-transform: unset; }
2005
}
2006
@keyframes check_radio {
2008
from { -gtk-icon-transform: scale(0); }
2009
to { -gtk-icon-transform: unset; }
2010
}
2011
@keyframes check_indeterminate {
2013
from { -gtk-icon-transform: unset; }
2014
50% { -gtk-icon-transform: scale(0, 1); }
2015
to { -gtk-icon-transform: unset; }
2016
}
2017
check:not(:indeterminate):checked { animation: check_check $material_duration $material_timing_function; }
2019
check:not(:indeterminate):checked:active { animation: check_check $material_duration $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
2021
// radio:not(:indeterminate):checked { animation: check_radio $material_duration $material_timing_function; }
2023
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_duration $material_timing_function; }
2025
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_duration $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
2027
// no animations in menus
2029
menu menuitem {
2030
check:not(:indeterminate):checked,
2031
radio:not(:indeterminate):checked,
2032
check:indeterminate:checked,
2033
radio:indeterminate:checked { animation: none; }
2034
}
2035
treeview.view check,
2037
treeview.view radio {
2038
// margin: -12px;
2039
// padding: 12px;
2040
padding: 0;
2041
&:checked:hover, &:selected:checked:hover { background-image: none; }
2043
& {
2045
color: $secondary_fg_color;
2046
&:hover, &:active { color: $fg_color; }
2048
&:disabled { color: $insensitive_secondary_fg_color; }
2050
&:checked, &:indeterminate { color: $accent_bg_color; }
2052
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2054
}
2055
&:selected {
2057
color: $secondary_selected_fg_color;
2058
&:hover, &:active { color: $selected_fg_color; }
2060
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2062
&:checked, &:indeterminate { color: $accent_bg_color; }
2064
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2066
}
2067
}
2068
treeview.view radio:checked {
2070
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2071
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2072
border-image: none;
2073
}
2074
/************
2077
* GtkScale *
2078
************/
2079
scale {
2080
// sizing
2081
$_marks_lenght: 8px;
2083
$_marks_distance: 8px;
2084
min-height: 12px;
2086
min-width: 12px;
2087
padding: 12px;
2088
* { transition: $material_transition; }
2090
// the slider is inside the trough, so to have make it bigger there's a negative margin
2092
slider {
2093
min-height: $small_size;
2094
min-width: $small_size;
2095
margin: -10px;
2096
}
2097
// the backing bit
2099
trough {
2100
outline-offset: 2px;
2101
background-color: $track_color;
2102
&:disabled { color: $insensitive_fg_color; }
2104
}
2105
// the colored part of the backing bit
2107
highlight {
2108
background-color: $accent_bg_color;
2109
&:disabled { background-color: transparent; }
2111
}
2112
// this is another differently styled part of the backing bit, the most relevant use case is for example
2114
// in media player to indicate how much video stream as been cached
2115
fill {
2116
background-color: $track_color;
2117
&:disabled { background-color: transparent; }
2119
}
2120
slider {
2122
// border-radius: 100%;
2123
// background-color: $accent_bg_color;
2124
background-repeat: no-repeat;
2125
background-position: center;
2126
@each $s,$as in ('',''),
2128
(':disabled','-insensitive') {
2129
&#{$s} {
2130
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2131
background-image: -gtk-scaled(url('#{$_url}.png'),
2132
url('#{$_url}@2.png'));
2133
}
2134
}
2135
background-size: calc(100% - 8px);
2137
&:hover { background-size: calc(100% - 4px); }
2139
&:active { background-size: calc(100% - 0px); }
2141
}
2142
// click-and-hold the slider to activate
2144
&.fine-tune {
2145
// to make the slider shrink in fine-tune mode
2146
slider { background-size: calc(100% - 12px); }
2147
}
2148
value { color: gtkalpha(currentColor, $hint_opacity); }
2150
marks {
2152
color: $track_color;
2153
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2155
(bottom, bottom, top),
2156
(top, left, right),
2157
(bottom, right, left) {
2158
&.#{$marks_class} {
2159
margin-#{$marks_margin}: $_marks_distance;
2160
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2161
}
2162
}
2163
}
2164
&.horizontal {
2166
indicator {
2167
min-height: $_marks_lenght;
2168
min-width: 1px;
2169
}
2170
}
2171
&.vertical {
2173
indicator {
2174
min-height: 1px;
2175
min-width: $_marks_lenght;
2176
}
2177
}
2178
// *WARNING* scale with marks madness following
2180
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2182
$suffix: if($variant == 'light', '', '-dark');
2183
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2185
('vertical', 'vert') {
2186
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2187
('scale-has-marks-below', ':first-child:not(:only-child)') {
2188
@each $state, $state_infix in ('', ''),
2189
(':disabled', '-insensitive') {
2190
&.#{$dir_class} {
2191
%#{$marks_infix}-#{$dir_infix},
2192
contents#{$nth_child} > trough > slider {
2193
&#{$state} {
2194
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2195
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2197
}
2198
@if $dir_class == 'horizontal' {
2200
min-height: 30px;
2201
min-width: $small_size;
2202
@if $marks_infix == 'scale-has-marks-above' {
2204
margin-top: -16px;
2205
background-position: center calc(100% - 4px);
2207
&:hover { background-position: center calc(100% - 2px); }
2209
&:active { background-position: center calc(100% - 0px); }
2211
}
2212
@if $marks_infix == 'scale-has-marks-below' {
2214
margin-bottom: -16px;
2215
background-position: center calc(4px);
2217
&:hover { background-position: center calc(2px); }
2219
&:active { background-position: center calc(0px); }
2221
}
2222
}
2223
@if $dir_class == 'vertical' {
2225
min-height: $small_size;
2226
min-width: 30px;
2227
@if $marks_infix == 'scale-has-marks-above' {
2229
margin-left: -16px;
2230
background-position: calc(4px) center;
2232
&:hover { background-position: calc(2px) center; }
2234
&:active { background-position: calc(0px) center; }
2236
}
2237
@if $marks_infix == 'scale-has-marks-below' {
2239
margin-right: -16px;
2240
background-position: calc(100% - 4px) center;
2242
&:hover { background-position: calc(100% - 2px) center; }
2244
&:active { background-position: calc(100% - 0px) center; }
2246
}
2247
}
2248
}
2249
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2251
&.fine-tune contents#{$nth_child} > trough > slider {
2252
// bigger negative margins to make the trough grow here as well
2253
@if $dir_class == 'horizontal' {
2255
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2256
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2258
}
2259
@if $dir_class == 'vertical' {
2261
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2262
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2264
}
2265
}
2266
}
2267
}
2268
}
2269
}
2270
&.color {
2272
min-height: 0;
2273
min-width: 0;
2274
&.horizontal {
2276
padding: 0 0 12px 0;
2277
trough {
2279
padding-bottom: $bar_size;
2280
}
2281
slider {
2283
@extend %scale-has-marks-above-horz;
2284
margin-bottom: -10px - $bar_size;
2286
margin-top: 0;
2287
}
2288
}
2289
&.vertical {
2291
&:dir(ltr) {
2292
padding: 0 0 0 12px;
2293
trough {
2295
padding-left: $bar_size;
2296
}
2297
slider {
2299
@extend %scale-has-marks-below-vert;
2300
margin-left: -10px - $bar_size;
2302
margin-right: 0;
2303
}
2304
}
2305
&:dir(rtl) {
2307
padding: 0 12px 0 0;
2308
trough {
2310
padding-right: $bar_size;
2311
}
2312
slider {
2314
@extend %scale-has-marks-above-vert;
2315
margin-right: -10px - $bar_size;
2317
margin-left: 0;
2318
}
2319
}
2320
}
2321
&.fine-tune {
2323
&.horizontal {
2324
slider {
2325
@extend %scale-has-marks-above-horz-fine-tune;
2326
}
2327
}
2328
&.vertical {
2330
&:dir(ltr) {
2331
slider {
2332
@extend %scale-has-marks-below-vert-fine-tune;
2333
}
2334
}
2335
&:dir(rtl) {
2337
slider {
2338
@extend %scale-has-marks-above-vert-fine-tune;
2339
}
2340
}
2341
}
2342
}
2343
}
2344
}
2345
/*****************
2348
* Progress bars *
2349
*****************/
2350
progressbar {
2351
// sizing
2352
&.horizontal {
2353
trough,
2354
progress { min-height: $bar_size; }
2355
}
2356
&.vertical {
2358
trough,
2359
progress { min-width: $bar_size; }
2360
}
2361
// FIXME: insensitive state missing and some other state should be set probably
2363
color: $tertiary_fg_color;
2364
font-size: smaller;
2365
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2367
progress { background-color: $selected_bg_color; }
2369
&.osd { // progressbar.osd used for epiphany page loading progress
2371
// min-width: $bar_size;
2372
// min-height: $bar_size;
2373
// background-color: transparent;
2374
// trough { background-color: transparent; }
2376
progress {
2378
}
2379
}
2380
}
2381
/*************
2384
* Level Bar *
2385
*************/
2386
levelbar {
2387
block {
2388
min-width: $medium_size;
2389
min-height: $bar_size;
2390
}
2391
&.vertical block {
2393
min-width: $bar_size;
2394
min-height: $medium_size;
2395
}
2396
trough {
2398
padding: 2px;
2399
border-radius: 2px;
2400
@include entry(normal);
2402
&:disabled { @include entry(insensitive); }
2404
}
2405
&.horizontal.discrete block { margin: 0 1px; }
2407
&.vertical.discrete block { margin: 1px 0; }
2409
&.horizontal.discrete trough { padding: 2px 1px; }
2411
&.vertical.discrete trough { padding: 1px 2px; }
2413
block {
2415
&.low {
2416
background-color: $warning_color;
2417
}
2418
&.high {
2420
background-color: $selected_bg_color;
2421
}
2422
&.full {
2424
background-color: $success_color;
2425
}
2426
&.empty {
2428
background-color: $track_color;
2429
color: $insensitive_fg_color;
2430
}
2431
}
2432
}
2433
/****************
2436
* Print dialog *
2437
*****************/
2438
printdialog {
2439
paper {
2440
padding: 0;
2441
border: 1px solid $borders_color;
2442
background: $base_color;
2443
color: $fg_color;
2444
}
2445
.dialog-action-box { margin: 12px; }
2447
}
2448
/**********
2451
* Frames *
2452
**********/
2453
frame > border,
2454
.frame {
2455
margin: 0;
2456
padding: 0;
2457
border: 1px solid $borders_color;
2458
border-radius: 0;
2459
box-shadow: none;
2460
&.flat { border-style: none; }
2462
}
2463
actionbar > revealer > box {
2465
padding: $container_padding;
2466
border-top: 1px solid $borders_color;
2467
}
2468
scrolledwindow {
2470
viewport.frame { // avoid double borders when viewport inside scrolled window
2471
border-style: none;
2472
}
2473
// This is used when content is touch-dragged past boundaries.
2475
// draws a box on top of the content, the size changes programmatically.
2476
overshoot {
2477
&.top { @include overshoot(top); }
2478
&.bottom { @include overshoot(bottom); }
2480
&.left { @include overshoot(left); }
2482
&.right { @include overshoot(right); }
2484
}
2485
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2487
undershoot {
2488
&.top { @include undershoot(top); }
2489
&.bottom { @include undershoot(bottom); }
2491
&.left { @include undershoot(left); }
2493
&.right { @include undershoot(right); }
2495
}
2496
junction { // the small square between two scrollbars
2498
border-style: solid none none solid;
2499
border-width: 1px;
2500
border-color: $borders_color;
2501
background-color: $base_color;
2502
&:dir(rtl) { border-style: solid solid none none; }
2504
}
2505
}
2506
//vbox and hbox separators
2508
separator {
2509
min-width: 1px;
2510
min-height: 1px;
2511
background: $borders_color;
2512
}
2513
/*********
2516
* Lists *
2517
*********/
2518
list {
2519
border-color: $borders_color;
2520
background-color: $base_color;
2521
row { padding: 2px; }
2523
}
2524
row {
2526
transition: $material_transition;
2527
&:hover { transition: none; }
2529
&.activatable {
2531
background-image: radial-gradient(circle farthest-corner at center,
2532
gtkalpha(currentColor, 0) 100%,
2533
transparent 0%),
2534
image(gtkalpha(currentColor, 0));
2535
&:hover {
2537
background-image: radial-gradient(circle farthest-corner at center,
2538
gtkalpha(currentColor, 0) 100%,
2539
transparent 0%),
2540
image(gtkalpha(currentColor, 0.05));
2541
}
2542
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2544
&:active {
2545
transition: $material_transition, background-image 0;
2546
animation: row_ripple_effect $material_duration $material_timing_function forwards;
2547
}
2548
}
2549
&:selected { @extend %selected_items; }
2551
}
2552
/*********************
2555
* App Notifications *
2556
*********************/
2557
.app-notification,
2558
.app-notification.frame {
2559
@extend %osd;
2560
@extend toolbar.osd;
2562
margin: 8px;
2564
border { border: none; }
2566
}
2567
/*************
2570
* Expanders *
2571
*************/
2572
expander {
2573
arrow {
2574
transition: $material_transition;
2575
min-width: 16px;
2576
min-height: 16px;
2577
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2578
-gtk-icon-transform: rotate(-90deg);
2579
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2581
&:checked { -gtk-icon-transform: unset; }
2583
color: $secondary_fg_color;
2585
&:hover, &:active { color: $fg_color; }
2587
&:disabled { color: $insensitive_secondary_fg_color; }
2589
&:selected {
2591
color: $secondary_selected_fg_color;
2592
&:hover, &:active { color: $selected_fg_color; }
2594
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2596
}
2597
}
2598
}
2599
/************
2602
* Calendar *
2603
***********/
2604
calendar {
2605
padding: 1px;
2606
border: 1px solid $borders_color;
2607
color: $fg_color;
2608
&:disabled { color: $insensitive_fg_color; }
2610
&:selected {
2612
@extend %selected_items;
2613
border-radius: 2px + 1px;
2615
}
2616
&.header {
2618
border: none;
2619
border-bottom: 1px solid $borders_color;
2620
border-radius: 0;
2621
}
2622
&.button { @extend %button_basic.flat; }
2624
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2626
&.highlight {
2628
color: gtkalpha(currentColor, $hint_opacity);
2629
font-weight: 500;
2630
}
2631
}
2632
/***********
2635
* Dialogs *
2636
***********/
2637
messagedialog { // Message Dialog styling
2638
&.background { background-color: $light_color; }
2639
.titlebar {
2641
min-height: $small_size;
2642
border-style: none;
2643
// box-shadow: inset 0 1px $highlight_color;
2644
background-color: $light_color;
2645
}
2646
&.csd { // rounded bottom border styling for csd version
2648
&.background {
2649
// bigger radius for better antialiasing
2650
border-bottom-left-radius: 2px;
2651
border-bottom-right-radius: 2px;
2652
}
2653
.dialog-action-area button {
2655
padding: 8px 16px;
2656
border-top: 1px solid $borders_color;
2657
border-radius: 0;
2658
@extend %button_basic.flat;
2660
&:first-child{ border-bottom-left-radius: 2px; }
2662
&:last-child { border-bottom-right-radius: 2px; }
2664
}
2665
}
2666
}
2667
filechooser {
2669
.dialog-action-box { border-top: 1px solid $borders_color; }
2670
#pathbarbox { border-bottom: 1px solid $borders_color; }
2672
}
2673
filechooserbutton:drop(active) {
2675
box-shadow: none;
2676
}
2677
/***********
2680
* Sidebar *
2681
***********/
2682
.sidebar {
2683
border-style: none;
2684
background-color: $secondary_base_color;
2685
@at-root %sidebar_left,
2687
&:dir(ltr),
2688
&.left,
2689
&.left:dir(rtl) {
2690
border-right: 1px solid $borders_color;
2691
border-left-style: none;
2692
}
2693
@at-root %sidebar_right
2695
&:dir(rtl),
2696
&.right {
2697
border-left: 1px solid $borders_color;
2698
border-right-style: none;
2699
}
2700
list { background-color: transparent; }
2702
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2704
}
2705
stacksidebar {
2707
&.sidebar {
2708
&:dir(ltr),
2709
&.left,
2710
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2711
&:dir(rtl),
2713
&.right { list { @extend %sidebar_right; }}
2714
}
2715
row {
2717
padding: 10px 4px;
2718
> label {
2720
padding-left: 6px;
2721
padding-right: 6px;
2722
}
2723
&.needs-attention > label { @extend %needs_attention; }
2725
}
2726
}
2727
/****************
2730
* File chooser *
2731
****************/
2732
placessidebar {
2733
> viewport.frame { border-style: none; }
2734
row {
2736
// Needs overriding of the GtkListBoxRow padding
2737
min-height: 32px;
2738
padding: 0;
2739
// Using margins/padding directly in the SidebarRow
2741
// will make the animation of the new bookmark row jump
2742
> revealer { padding: 0 12px; }
2743
&:selected { color: $selected_fg_color; }
2745
&:disabled { color: $insensitive_fg_color; }
2747
image.sidebar-icon {
2749
opacity: $hint_opacity; // dim the device icons
2750
&:dir(ltr) { padding-right: 8px; }
2752
&:dir(rtl) { padding-left: 8px; }
2753
}
2754
label.sidebar-label {
2756
&:dir(ltr) { padding-right: 2px; }
2757
&:dir(rtl) { padding-left: 2px; }
2758
}
2759
@at-root button.sidebar-button {
2761
@extend %button_basic.flat;
2762
min-height: $small_size;
2764
min-width: $small_size;
2765
margin-top: 0;
2766
margin-bottom: 0;
2767
padding: 0;
2768
border-radius: 100%;
2769
-gtk-outline-radius: 100%;
2770
row:selected & { @extend %button_selected.flat; }
2772
}
2773
&.sidebar-placeholder-row {
2775
min-height: 2px;
2776
padding: 0 8px;
2777
background-image: image($accent_bg_color);
2778
background-clip: content-box;
2779
}
2780
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2782
&:drop(active):not(:disabled) {
2784
box-shadow: inset 0 0 0 2px $accent_bg_color;
2785
&:selected {
2787
// background-color: $accent_bg_color;
2788
// color: $selected_fg_color;
2789
}
2790
}
2791
}
2792
}
2793
placesview {
2795
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2796
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2798
// this selects the "connect to server" label
2800
> actionbar > revealer > box > label {
2801
padding-left: 8px;
2802
padding-right: 8px;
2803
}
2804
}
2805
/*********
2808
* Paned *
2809
*********/
2810
paned {
2811
> separator {
2812
min-width: 1px;
2813
min-height: 1px;
2814
-gtk-icon-source: none; // defeats the ugly default handle decoration
2815
border-style: none; // just to be sure
2816
background-color: transparent;
2817
// workaround, using background istead of a border since the border will get rendered twice (?)
2818
background-image: image($borders_color);
2819
background-size: 1px 1px;
2820
&.wide {
2822
min-width: 6px;
2823
min-height: 6px;
2824
background-color: $bg_color;
2825
background-image: image($borders_color), image($borders_color);
2826
background-size: 1px 1px, 1px 1px;
2827
}
2828
}
2829
&.horizontal > separator {
2831
background-repeat: repeat-y;
2832
&:dir(ltr) {
2834
margin: 0 -8px 0 0;
2835
padding: 0 8px 0 0;
2836
background-position: left;
2837
}
2838
&:dir(rtl) {
2840
margin: 0 0 0 -8px;
2841
padding: 0 0 0 8px;
2842
background-position: right;
2843
}
2844
&.wide {
2846
margin: 0;
2847
padding: 0;
2848
background-repeat: repeat-y, repeat-y;
2849
background-position: left, right;
2850
}
2851
}
2852
&.vertical > separator {
2854
margin: 0 0 -8px 0;
2855
padding: 0 0 8px 0;
2856
background-repeat: repeat-x;
2857
background-position: top;
2858
&.wide {
2860
margin: 0;
2861
padding: 0;
2862
background-repeat: repeat-x, repeat-x;
2863
background-position: bottom, top;
2864
}
2865
}
2866
}
2867
/**************
2870
* GtkInfoBar *
2871
**************/
2872
infobar { border-style: none; }
2873
.info { background-color: $info_bg_color; }
2875
.question { background-color: $question_bg_color; }
2877
.warning { background-color: $warning_bg_color; }
2879
.error { background-color: $error_bg_color; }
2881
.info,
2883
.question,
2884
.warning,
2885
.error {
2886
color: $selected_fg_color;
2887
button { @extend %button_selected; }
2889
label:selected {
2891
}
2892
*:link { @extend %link_selected; }
2894
}
2895
/************
2898
* Tooltips *
2899
************/
2900
tooltip {
2901
&.background {
2902
// background-color needs to be set this way otherwise it gets drawn twice
2903
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2904
background-color: scale-alpha($base_color, $higher_opacity);
2905
}
2906
// @extend %osd;
2908
// padding: 4px; /* not working */
2910
border-radius: 2px;
2911
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2912
// FIXME: we need a border or tooltips vanish on black background.
2914
decoration { background-color: transparent; }
2915
label {
2917
min-height: 32px - 6px * 2;
2918
padding: 4px 12px - 6px;
2919
}
2920
* { // Yeah this is ugly
2922
padding: 0;
2923
background-color: transparent;
2924
color: inherit;
2925
}
2926
}
2927
/*****************
2930
* Color Chooser *
2931
*****************/
2932
colorswatch {
2933
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2934
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2935
// applied to the overlay box.
2936
// base color corners rounding
2938
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2939
// sports a bigger radius.
2940
// nth-child is needed by the custom color strip.
2941
&.top {
2943
border-top-left-radius: $material_radius + 0.5px;
2944
border-top-right-radius: $material_radius + 0.5px;
2945
overlay {
2947
border-top-left-radius: $material_radius;
2948
border-top-right-radius: $material_radius;
2949
}
2950
}
2951
&.bottom {
2953
border-bottom-left-radius: $material_radius + 0.5px;
2954
border-bottom-right-radius: $material_radius + 0.5px;
2955
overlay {
2957
border-bottom-left-radius: $material_radius;
2958
border-bottom-right-radius: $material_radius;
2959
}
2960
}
2961
&.left,
2963
&:first-child:not(.top) {
2964
border-top-left-radius: $material_radius + 0.5px;
2965
border-bottom-left-radius: $material_radius + 0.5px;
2966
overlay {
2968
border-top-left-radius: $material_radius;
2969
border-bottom-left-radius: $material_radius;
2970
}
2971
}
2972
&.right,
2974
&:last-child:not(.bottom) {
2975
border-top-right-radius: $material_radius + 0.5px;
2976
border-bottom-right-radius: $material_radius + 0.5px;
2977
overlay {
2979
border-top-right-radius: $material_radius;
2980
border-bottom-right-radius: $material_radius;
2981
}
2982
}
2983
&.dark overlay { color: white; }
2985
&.light overlay { color: scale-alpha(black, 0.8); }
2987
&.dark { color: white; } // for focus ring
2989
&.light { color: scale-alpha(black, 0.8); } // for focus ring
2991
&:drop(active) {
2993
box-shadow: none;
2994
&.light overlay {
2996
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
2997
}
2998
&.dark overlay {
3000
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3001
}
3002
}
3003
overlay {
3005
transition: $material_transition;
3006
box-shadow: $z-depth-1;
3007
&:hover { box-shadow: $z-depth-2; }
3009
}
3010
&#add-color-button {
3012
border-radius: $material_radius $material_radius 0 0;
3013
color: white; // for focus ring
3014
&:only-child { border-radius: $material_radius; }
3016
overlay {
3018
background-image: linear-gradient(to right,
3019
$error_bg_color 25%,
3020
$warning_bg_color 25%, $warning_bg_color 50%,
3021
$info_bg_color 50%, $info_bg_color 75%,
3022
$question_bg_color 75%);
3023
color: white;
3024
}
3025
}
3026
&:disabled {
3028
opacity: $disabled_opacity;
3029
overlay { box-shadow: none; }
3031
}
3032
row:selected & {
3034
}
3035
&#editor-color-sample {
3037
border-radius: $material_radius + 0.5px;
3038
overlay { border-radius: $material_radius; }
3040
// overlay:hover { box-shadow: $z-depth-1; }
3042
}
3043
}
3044
// colorscale popup
3046
colorchooser .popover.osd {
3047
transition: box-shadow $material_duration $material_timing_function;
3048
border-radius: 2px;
3049
box-shadow: $z-depth-2;
3050
background-color: $base_color;
3051
&:backdrop { box-shadow: $z-depth-1; }
3053
spinbutton:not(.vertical) { @extend %entry.flat; }
3055
}
3056
/********
3059
* Misc *
3060
********/
3061
//content view (grid/list)
3062
.content-view {
3063
background-color: $bg_color;
3064
// &:hover { -gtk-icon-effect: highlight; }
3066
rubberband { @extend rubberband; }
3068
}
3069
.scale-popup {
3071
.osd & { @extend %osd; }
3072
.osd & button.flat { //FIXME: quick hack, redo properly
3074
}
3075
button { // +/- buttons on GtkVolumeButton popup
3077
}
3078
}
3079
/**********************
3082
* Window Decorations *
3083
*********************/
3084
decoration {
3085
transition: box-shadow $material_duration $material_timing_function;
3086
border-radius: 2px 2px 0 0;
3087
box-shadow: $z-depth-4, 0 16px 16px transparent;
3088
// FIXME rationalize shadows
3090
// this is used for the resize cursor area
3092
margin: 8px;
3093
&:backdrop {
3095
// the transparent shadow here is to enforce that the shadow extents don't
3096
// change when we go to backdrop, to prevent jumping windows.
3097
// The biggest shadow should be in the same order then in the active state
3098
// or the jumping will happen during the transition.
3099
box-shadow: $z-depth-2, 0 16px 16px transparent;
3100
}
3101
.fullscreen &,
3103
.tiled & { border-radius: 0; }
3104
.popup & { box-shadow: none; }
3106
// server-side decorations as used by mutter
3108
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3109
.csd.popup & {
3111
border-radius: 2px;
3112
box-shadow: $z-depth-2;
3113
}
3114
tooltip.csd & {
3116
border-radius: 2px;
3117
box-shadow: $z-depth-2;
3118
}
3119
messagedialog.csd & {
3121
border-radius: 2px;
3122
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3123
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3125
}
3126
.solid-csd & {
3128
margin: 4px;
3129
// border: solid 1px $borders_color;
3130
border-radius: 0;
3131
box-shadow: none;
3132
background-color: $bg_color;
3133
}
3134
}
3135
// Window Close button
3137
button.titlebutton {
3138
// @extend %button_basic.flat;
3139
@extend %button_basic.image-button;
3141
.selection-mode & {
3143
}
3144
}
3145
// catch all extend :)
3148
%selected_items {
3150
background-color: $selected_bg_color;
3151
@at-root %nobg_selected_items, & {
3153
color: $selected_fg_color;
3154
&:disabled { color: $insensitive_selected_fg_color; }
3156
}
3157
}
3158
.monospace { font: Monospace; }
3160
/**********************
3163
* Touch Copy & Paste *
3164
*********************/
3165
//touch selection handlebars for the Popover.osd above
3166
cursor-handle {
3167
border-radius: 100px;
3168
background-color: $accent_bg_color;
3169
background-image: none;
3170
&.top:dir(ltr), &.bottom:dir(rtl) {
3172
padding-left: 6px;
3173
border-top-right-radius: 0;
3174
}
3175
&.bottom:dir(ltr), &.top:dir(rtl) {
3177
padding-right: 6px;
3178
border-top-left-radius: 0;
3179
}
3180
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3182
-GtkWidget-text-handle-width: 24;
3183
-GtkWidget-text-handle-height: 30;
3184
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3186
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3187
url('#{$_url}@2.png'));
3188
}
3189
}
3190
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3192
button.circular { // FIXME: aggregate to buttons
3194
border-radius: 100px;
3195
-gtk-outline-radius: 100px;
3196
label { padding: 0; }
3198
}
3199
// shortcut window keys
3201
.keycap {
3202
min-width: 28px - 8px * 2;
3203
min-height: 28px - 2px;
3204
margin-top: 2px;
3205
padding-bottom: 2px;
3206
padding-left: 8px;
3207
padding-right: 8px;
3208
border: solid 1px $borders_color;
3210
border-radius: 2px + 1px;
3211
box-shadow: inset 0 -2px $borders_color;
3212
background-color: $base_color;
3213
color: $fg_color;
3214
font-size: smaller;
3215
}
3216
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3218
transition: $material_transition;
3219
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3220
caret-color: $accent_bg_color;
3221
}
3222
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3224
stackswitcher button.circular,
3226
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3227
min-width: $medium_size;
3228
min-height: $medium_size;
3229
padding: 0;
3230
}
3231