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_faster $material_ease_out, color 0;
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($borders_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
background-color: $base_color;
356
&, &:focus {
358
border-image: none;
359
box-shadow: none;
360
}
361
}
362
}
363
/***********
366
* Buttons *
367
***********/
368
// stuff for .needs-attention
369
@keyframes needs_attention {
370
from {
371
background-image: -gtk-gradient(radial,
372
center center, 0,
373
center center, 0.001,
374
to($accent_bg_color),
375
to(transparent));
376
}
377
to {
379
background-image: -gtk-gradient(radial,
380
center center, 0,
381
center center, 0.5,
382
to($accent_bg_color),
383
to(transparent));
384
}
385
}
386
%button,
388
button {
389
@at-root %button_basic, & {
390
min-height: 24px;
391
min-width: 16px;
392
padding: 6px 10px;
393
border-radius: 2px;
394
font-weight: 500;
395
@include button(normal);
397
&:hover { @include button(hover); }
399
&:active { @include button(active); }
401
&:disabled { @include button(insensitive); }
403
&:checked { @include button(checked); }
405
&:checked:disabled { @include button(checked-insensitive); }
407
&.flat {
409
@include button(flat-normal);
410
&:hover { @include button(flat-hover); }
412
&:active { @include button(flat-active); }
414
&:disabled { @include button(flat-insensitive); }
416
&:checked { @include button(flat-checked); }
418
&:checked:disabled { @include button(flat-checked-insensitive); }
420
}
421
&.image-button {
423
min-width: 24px;
424
padding: 6px;
425
-gtk-outline-radius: 100px;
426
border-radius: 100px;
427
}
428
&.text-button {
430
padding-left: 16px;
431
padding-right: 16px;
432
}
433
&.text-button.image-button {
435
padding-left: 10px;
436
padding-right: 10px;
437
-gtk-outline-radius: 2px;
438
border-radius: 2px;
439
label {
441
&:last-child { padding-left: 2px; padding-right: 6px; }
442
&:first-child { padding-left: 6px; padding-right: 2px; }
443
}
444
}
445
.linked > & { @extend %linked; }
447
.linked.vertical > & { @extend %linked_vertical; }
449
.linked > &.flat,
451
.linked.vertical > &.flat {
452
border-radius: 2px;
453
&.image-button {
455
-gtk-outline-radius: 100px;
456
border-radius: 100px;
457
}
458
&.text-button.image-button {
460
-gtk-outline-radius: 2px;
461
border-radius: 2px;
462
}
463
}
464
&:drop(active) {
466
// box-shadow: inset 0 0 0 2px $accent_bg_color;
467
}
468
}
469
@at-root %button_selected, row:selected & {
471
&:disabled { color: $insensitive_secondary_selected_fg_color; }
472
&.flat {
474
color: $secondary_selected_fg_color;
475
&:hover, &:active { color: $selected_fg_color; }
477
&:disabled { color: $insensitive_secondary_selected_fg_color; }
479
}
480
}
481
separator {
483
min-width: 0;
484
min-height: 0;
485
background: transparent;
486
}
487
// big standalone buttons like in Documents pager
489
&.osd {
490
padding: 12px 16px;
491
&.image-button { padding: 12px; }
493
&:disabled { opacity: 0; }
495
}
496
//overlay / OSD style
498
@at-root %osd_button,
499
.osd & {
500
}
501
// Suggested and Destructive Action buttons
503
@each $b_type, $b_color in (suggested-action, $suggested_color),
504
(destructive-action, $destructive_color) {
505
&.#{$b_type} {
506
background-color: $b_color;
507
color: $selected_fg_color;
508
// @include button(normal, $b_color, white);
510
// &:hover { @include button(hover, $b_color, white); }
512
// &:active, &:checked { @include button(active, $b_color, white); }
514
&:disabled { @include button(insensitive, $b_color, white); }
516
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
518
&.flat {
520
background-color: transparent;
521
color: $b_color;
522
// @include button(flat-normal, $b_color, white);
524
// &:hover { @include button(flat-hover, $b_color, white); }
526
// &:active, &:checked { @include button(flat-active, $b_color, white); }
528
&:disabled { @include button(flat-insensitive, $b_color, white); }
530
}
531
.osd & {
533
}
534
}
535
}
536
.stack-switcher > & {
538
// to position the needs attention dot, padding is added to the button
539
// child, a label needs just lateral padding while an icon needs vertical
540
// padding added too.
541
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
543
> label {
545
padding-left: 6px; // label padding
546
padding-right: 6px; //
547
}
548
> image {
550
padding-left: 6px; // image padding
551
padding-right: 6px; //
552
padding-top: 3px; //
553
padding-bottom: 3px; //
554
}
555
&.text-button {
557
// compensate text-button paddings
558
padding-left: 10px;
559
padding-right: 10px;
560
}
561
&.image-button {
563
// we want image buttons to have a 1:1 aspect ratio, so compensation
564
// of the padding added to the GtkImage is needed
565
padding-left: 4px;
566
padding-right: 4px;
567
}
568
&.needs-attention {
570
> label,
571
> image { @extend %needs_attention; }
572
&:checked {
574
> label,
575
> image {
576
animation: none;
577
background-image: none;
578
}
579
}
580
}
581
}
582
// inline-toolbar buttons
584
.inline-toolbar & {
585
@extend %button_basic.flat;
586
&:not(.text-button) { @extend %button_basic.image-button; }
588
}
589
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
591
}
592
%needs_attention {
594
animation: needs_attention $material_slower $material_ease_out forwards;
595
background-repeat: no-repeat;
596
background-position: right 3px;
597
background-size: 6px 6px;
598
&:dir(rtl) { background-position: left 3px; }
600
}
601
// all the following is for the +|- buttons on inline toolbars, that way
603
// should really be deprecated...
604
.inline-toolbar toolbutton > button { // redefining the button look is
605
// needed since those are flat...
606
}
607
// More inline toolbar buttons
609
toolbar.inline-toolbar toolbutton {
610
// > button.flat { @extend %linked_middle; }
611
// &:first-child > button.flat { @extend %linked:first-child; }
613
// &:last-child > button.flat { @extend %linked:last-child; }
615
// &:only-child > button.flat { @extend %linked:only-child; }
617
}
618
%linked_middle {
620
border-radius: 0;
621
}
622
%linked {
624
-gtk-outline-radius: 2px;
625
@extend %linked_middle;
627
&:first-child {
629
border-top-left-radius: 2px;
630
border-bottom-left-radius: 2px;
631
}
632
&:last-child {
634
border-top-right-radius: 2px;
635
border-bottom-right-radius: 2px;
636
}
637
&:only-child {
639
border-radius: 2px;
640
}
641
}
642
%linked_vertical_middle {
644
border-radius: 0;
645
}
646
%linked_vertical{
648
-gtk-outline-radius: 2px;
649
@extend %linked_vertical_middle;
651
&:first-child {
653
border-top-left-radius: 2px;
654
border-top-right-radius: 2px;
655
}
656
&:last-child {
658
border-bottom-left-radius: 2px;
659
border-bottom-right-radius: 2px;
660
}
661
&:only-child {
663
border-radius: 2px;
664
}
665
}
666
/* menu buttons */
668
modelbutton.flat,
669
.menuitem.button.flat {
670
min-height: $menuitem_size;
671
padding-left: 8px;
672
padding-right: 8px;
673
border-radius: 2px;
674
color: inherit;
675
@extend %button_basic.flat;
677
&:selected { @extend %selected_items; }
679
check,
681
radio {
682
&, &:hover { background-image: none; }
683
&:active { animation: none; }
685
}
686
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease; }
688
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease; }
690
// FIXME: remove the following when the checks/radios rewrite lands
692
check:last-child,
693
radio:last-child { margin-left: 8px; }
694
check:first-child,
696
radio:first-child { margin-right: 8px; }
697
}
698
modelbutton.flat arrow {
700
background: none;
701
&:hover { background: none; }
703
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
705
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
707
}
708
button.color {
710
min-height: $small_size;
711
min-width: $small_size;
712
padding: $container_padding;
713
colorswatch:only-child {
715
// &, overlay { border-radius: 0; }
716
}
717
}
718
/*********
721
* Links *
722
*********/
723
*:link {
724
&, &:hover, &:active { color: $link_color; }
725
&:visited {
727
&, &:hover, &:active { color: $link_visited_color; }
728
}
729
@at-root %link_selected,
731
&:selected,
732
*:selected & { color: $selected_fg_color; }
733
}
734
button:link,
736
button:visited {
737
@extend *:link;
738
> label { text-decoration-line: underline; }
740
}
741
/*****************
743
* GtkSpinButton *
744
*****************/
745
spinbutton {
746
&:not(.vertical) {
747
// in this horizontal configuration, the whole spinbutton
748
// behaves as the entry, so we extend the entry styling
749
// and nuke the style on the internal entry
750
@extend %entry;
751
padding: 0;
753
%spinbutton_entry,
755
entry {
756
min-width: $large_size - 16px;
757
// reset all the other props since the spinbutton node is styled here
758
margin: 0;
759
border-image: none;
760
border-radius: 0;
761
box-shadow: none;
762
background-color: transparent;
763
}
764
button {
766
min-height: $small_size;
767
min-width: $small_size;
768
// margin: $container_padding;
769
padding: 0;
770
border: solid $container_padding transparent;
771
@extend %button_basic.flat;
773
@extend %button_basic.image-button;
775
&.up { margin-left: -$container_padding / 2; }
777
&.down { margin-right: -$container_padding / 2; }
779
}
780
}
781
// OSD horizontal
783
.osd &:not(.vertical) {
784
button {
785
}
786
}
787
// Vertical
789
&.vertical {
790
// in the vertical configuration, we treat the spinbutton
791
// as a box, and tweak the style of the entry in the middle
792
// so that it's linked
793
// FIXME: this should not be set at all, but otherwise it gets the wrong
795
// color
796
&:disabled { color: $insensitive_fg_color; }
797
&:drop(active) {
799
box-shadow: none;
800
}
801
entry {
803
min-height: $medium_size;
804
min-width: $large_size;
805
padding: 0;
806
}
807
button {
809
min-height: $medium_size;
810
min-width: $large_size;
811
padding: 0;
812
@extend %button_basic.flat;
814
&.up { border-radius: 2px 2px 0 0; }
816
&.down { border-radius: 0 0 2px 2px; }
818
}
819
}
820
// OSD vertical
822
.osd &.vertical button:first-child {
823
}
824
// Misc
826
treeview &:not(.vertical) {
827
min-height: 0;
828
border-style: none;
829
border-radius: 0;
830
entry {
832
min-height: 0;
833
padding: 1px 2px;
834
}
835
}
836
}
837
/**************
840
* ComboBoxes *
841
**************/
842
combobox {
843
arrow {
844
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
845
min-height: 16px;
846
min-width: 16px;
847
}
848
menu,
850
.menu {
851
padding: 2px 0;
852
menuitem {
854
min-height: $medium_size;
855
padding: 0 10px;
856
}
857
}
858
&.linked {
860
button:nth-child(2) {
861
&:dir(ltr) { @extend %linked:last-child; }
862
&:dir(rtl) { @extend %linked:first-child; }
863
}
864
}
865
&:drop(active) { // FIXME: untested
867
box-shadow: none;
868
// button.combo { @extend %button_basic:drop(active); }
870
}
871
}
872
.linked > combobox > box > button.combo {
874
// the combo is a composite widget so the way we do button linking doesn't
875
// work, special case needed. See
876
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
877
&:dir(ltr),
879
&:dir(rtl) { @extend %linked_middle; } // specificity bump
880
}
881
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
883
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
884
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
885
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
887
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
888
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
889
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
890
/************
893
* Toolbars *
894
************/
895
toolbar {
896
-GtkWidget-window-dragging: true;
897
padding: $container_padding / 2;
898
background-color: $bg_color;
899
// on OSD
901
.osd & { background-color: transparent; }
902
// stand-alone OSD toolbars
904
&.osd {
905
transition: box-shadow $material_faster $material_ease_out;
906
padding: $container_padding;
907
border-radius: 2px;
908
box-shadow: $z-depth-2;
909
background-color: $base_color;
910
&:backdrop { box-shadow: $z-depth-1; }
912
&.left,
914
&.right,
915
&.top,
916
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
917
button { @extend %button_basic.flat; }
919
}
920
// toolbar separators
922
&.horizontal separator { margin: $container_padding / 2; }
923
&.vertical separator { margin: $container_padding / 2; }
924
&:not(.inline-toolbar):not(.osd) {
926
scale,
927
entry,
928
spinbutton,
929
button { margin: $container_padding / 2; }
930
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
932
}
933
}
934
//searchbar, location-bar & inline-toolbar
936
.inline-toolbar {
937
padding: $container_padding;
938
border-style: solid;
939
border-width: 0 1px 1px;
940
border-color: $borders_color;
941
background-color: $secondary_base_color;
942
}
943
searchbar,
945
.location-bar {
946
padding: $container_padding;
947
border-style: solid;
948
border-width: 0 0 1px;
949
border-color: $borders_color;
950
background-color: $bg_color;
951
background-clip: border-box;
952
}
953
/***************
956
* Header bars *
957
***************/
958
%titlebar,
959
headerbar {
960
min-height: $large_size;
961
padding: 0 $container_padding;
962
box-shadow: inset 0 1px $secondary_highlight_color, $z-depth-1;
963
background-color: $headerbar_color;
964
color: $selected_fg_color;
965
&:backdrop {
967
// background-color: $headerbar_color;
968
}
969
.title {
971
padding-left: 12px;
972
padding-right: 12px;
973
font-weight: bold;
974
}
975
.subtitle {
977
padding-left: 12px;
978
padding-right: 12px;
979
font-size: smaller;
980
@extend .dim-label;
982
}
983
button:not(.suggested-action):not(.destructive-action) {
985
@extend %button_basic.flat;
986
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
988
$selected_fg_color 0%,
989
transparent 0%)
990
0 0 0 / 0 0 0px;
991
color: $secondary_selected_fg_color;
992
&:hover, &:active, &:checked { color: $selected_fg_color; }
994
&:disabled {
996
color: $insensitive_secondary_selected_fg_color;
997
> label { color: inherit; }
999
}
1000
&:checked {
1002
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1003
$selected_fg_color 100%,
1004
transparent 0%)
1005
0 0 2 / 0 0 2px;
1006
background-color: transparent;
1007
color: $selected_fg_color;
1008
&:disabled {
1010
background-color: transparent;
1011
color: $insensitive_selected_fg_color;
1012
> label { color: inherit; }
1014
}
1015
}
1016
}
1017
button.suggested-action, button.destructive-action {
1019
&:disabled {
1020
color: $insensitive_secondary_selected_fg_color;
1021
> label { color: inherit; }
1023
}
1024
}
1025
&.selection-mode {
1027
animation: header_ripple_effect $material_slower $material_ease_out forwards;
1028
// box-shadow: inset 0 1px $secondary_highlight_color;
1029
// background-color: $selected_bg_color;
1030
color: $selected_fg_color;
1031
&:backdrop {
1033
}
1034
.subtitle:link { @extend *:link:selected; }
1036
button:not(.suggested-action):not(.destructive-action) {
1038
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1039
$selected_fg_color 0%,
1040
transparent 0%)
1041
0 0 0 / 0 0 0px;
1042
// color: $secondary_selected_fg_color;
1043
&, &:hover, &:active, &:checked { color: $selected_fg_color; }
1045
&:disabled {
1047
color: $insensitive_selected_fg_color;
1048
> label { color: inherit; }
1050
}
1051
&:checked {
1053
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1054
$selected_fg_color 100%,
1055
transparent 0%)
1056
0 0 2 / 0 0 2px;
1057
color: $selected_fg_color;
1058
&:disabled {
1060
color: $insensitive_selected_fg_color;
1061
> label { color: inherit; }
1063
}
1064
}
1065
}
1066
.selection-menu {
1068
padding-left: 16px;
1069
padding-right: 16px;
1070
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1072
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1074
}
1075
}
1076
.tiled &,
1078
.maximized & {
1079
border-radius: 0; // squared corners when the window is max'd or tiled
1080
box-shadow: none;
1081
}
1082
&.default-decoration {
1084
min-height: $small_size;
1085
padding: $container_padding;
1086
border-width: 0;
1087
button.titlebutton {
1089
min-height: $small_size;
1090
min-width: $small_size;
1091
margin: 0;
1092
padding: 0;
1093
&:active { // add fallback
1095
background-image: radial-gradient(circle farthest-corner at center,
1096
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1097
transparent 0%),
1098
image(gtkalpha(currentColor, $lower_opacity / 2));
1099
}
1100
}
1101
}
1102
}
1103
headerbar {
1105
// add vertical margins to headerbar entries, buttons and separators to avoid them spanning the whole height
1106
entry,
1107
spinbutton,
1108
// separator,
1109
button {
1110
margin-top: $container_padding;
1111
margin-bottom: $container_padding;
1112
}
1113
}
1114
.titlebar {
1116
border-top-left-radius: 2px;
1117
border-top-right-radius: 2px;
1118
}
1119
headerbar {
1121
separator:first-child + &, // tackles the paned container case
1122
&:first-child {
1123
border-top-left-radius: 2px;
1124
.tiled &,
1126
.maximized & { border-radius: 0; }
1127
}
1128
&:last-child {
1130
border-top-right-radius: 2px;
1131
.tiled &,
1133
.maximized & { border-radius: 0; }
1134
}
1135
}
1136
.titlebar:not(headerbar) {
1138
window.csd > & {
1139
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1140
padding: 0;
1141
background-color: transparent;
1142
background-image: none;
1143
border-style: none;
1144
box-shadow: none;
1145
}
1146
> separator {
1148
background-color: $headerbar_color;
1149
background-image: image($borders_color);
1150
}
1151
@extend %titlebar;
1153
}
1154
/************
1157
* Pathbars *
1158
************/
1159
.path-bar button {
1160
&.text-button, &.image-button, & {
1161
padding-left: 6px;
1162
padding-right: 6px;
1163
}
1164
&.text-button.image-button, & {
1166
// label:last-child { padding-left: 2px; padding-right: 8px; }
1167
// label:first-child { padding-left: 8px; padding-right: 2px; }
1168
}
1169
image {
1171
padding-left: 4px;
1172
padding-right: 4px;
1173
}
1174
&.slider-button {
1176
padding-left: 0;
1177
padding-right: 0;
1178
}
1179
}
1180
/**************
1183
* Tree Views *
1184
**************/
1185
treeview.view {
1186
-GtkTreeView-grid-line-width: 1;
1187
-GtkTreeView-grid-line-pattern: '';
1188
-GtkTreeView-tree-line-width: 1;
1189
-GtkTreeView-tree-line-pattern: '';
1190
-GtkTreeView-expander-size: 16;
1191
border-left-color: $track_color; // this is actually the tree lines color,
1193
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1194
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1196
&:hover, &:active, &:selected { border-radius: 0; }
1198
&.separator {
1200
min-height: 1px + 2px * 2;
1201
color: $borders_color;
1202
}
1203
&:drop(active) {
1205
border-style: solid none;
1206
border-width: 1px;
1207
border-color: $accent_bg_color;
1208
&.after { border-top-style: none; }
1210
&.before { border-bottom-style: none; }
1212
}
1213
&.expander {
1215
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1216
-gtk-icon-transform: rotate(-90deg);
1217
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1219
&:checked { -gtk-icon-transform: unset; }
1221
color: $secondary_fg_color;
1223
&:hover, &:active { color: $fg_color; }
1225
&:disabled { color: $insensitive_secondary_fg_color; }
1227
&:selected {
1229
color: $secondary_selected_fg_color;
1230
&:hover, &:active { color: $selected_fg_color; }
1232
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1234
}
1235
}
1236
&.progressbar { // progress bar in treeviews
1238
border-style: none none solid;
1239
border-width: $bar_size;
1240
border-color: $selected_bg_color;
1241
background-color: transparent;
1242
background-image: none;
1243
&:selected { border-color: currentColor; }
1245
}
1246
&.trough { // progress bar trough in treeviews
1248
border-style: none none solid;
1249
border-width: $bar_size;
1250
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1251
background-color: transparent;
1252
background-image: none;
1253
&:selected { border-color: $track_color; }
1255
}
1256
header {
1258
button {
1259
@extend row.activatable;
1260
padding: 2px 6px;
1262
border-style: none solid solid none;
1263
border-width: 1px;
1264
border-color: $borders_color;
1265
border-radius: 0;
1266
background-clip: border-box;
1267
&, &:hover, &:active { box-shadow: none; }
1269
&, &:disabled { background-color: $base_color; }
1271
&:last-child { border-right-style: none; }
1273
}
1274
}
1275
button.dnd,
1277
header.button.dnd { // for treeview-like derive widgets
1278
padding: 2px 6px;
1279
border-style: none solid solid;
1280
border-width: 1px;
1281
border-color: $borders_color;
1282
border-radius: 0;
1283
box-shadow: none;
1284
background-color: $base_color;
1285
background-clip: border-box;
1286
color: $selected_bg_color;
1287
}
1288
}
1289
/*********
1292
* Menus *
1293
*********/
1294
menubar,
1295
.menubar {
1296
-GtkWidget-window-dragging: true;
1297
padding: 0;
1298
// box-shadow: inset 0 -1px $borders_color;
1299
background-color: $headerbar_color;
1300
> menuitem {
1302
transition: $material_transition;
1303
min-height: 20px;
1304
padding: 4px 8px;
1305
color: $secondary_selected_fg_color;
1306
&:hover { //Seems like it :hover even with keyboard focus
1308
box-shadow: inset 0 -2px $selected_fg_color;
1309
color: $selected_fg_color;
1310
}
1311
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1313
}
1314
}
1315
menu,
1317
.menu {
1318
margin: 4px 0;
1319
padding: 4px 0;
1320
background-color: $base_color;
1321
border: 1px solid $borders_color; // adds borders in a non composited env
1322
.csd & {
1324
border: none; // axes borders in a composited env
1325
border-radius: 2px;
1326
}
1327
menuitem {
1329
min-height: 20px;
1330
min-width: 40px;
1331
padding: 4px 8px;
1332
font: initial;
1333
text-shadow: none;
1334
&:hover {
1336
// background-color: gtkalpha(currentColor, $lower_opacity / 2);
1337
background-color: $selected_bg_color;
1338
color: $selected_fg_color;
1339
}
1340
&:disabled { color: $insensitive_fg_color; }
1342
// submenu indicators
1344
arrow {
1345
min-height: 16px;
1346
min-width: 16px;
1347
&:dir(ltr) {
1349
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1350
margin-left: 8px;
1351
}
1352
&:dir(rtl) {
1354
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1355
margin-right: 8px;
1356
}
1357
}
1358
}
1359
// overflow arrows
1361
> arrow {
1362
min-height: 16px;
1363
min-width: 16px;
1364
padding: 4px;
1365
border-radius: 0;
1366
background-color: $base_color;
1367
color: $secondary_fg_color;
1368
&.top {
1370
margin-top: -4px;
1371
border-bottom: 1px solid $borders_color;
1372
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1373
}
1374
&.bottom {
1376
margin-bottom: -4px;
1377
border-top: 1px solid $borders_color;
1378
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1379
}
1380
&:hover {
1382
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1383
color: $fg_color;
1384
}
1385
&:disabled {
1387
border-color: transparent;
1388
background-color: transparent;
1389
color: transparent;
1390
// color: $insensitive_secondary_fg_color;
1391
}
1392
}
1393
separator { margin: 4px 0; }
1395
}
1396
menuitem {
1398
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1399
check,
1401
radio {
1402
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1403
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1404
}
1405
}
1406
.csd.popup { border-radius: 2px; }
1408
/***************
1411
* Popovers *
1412
***************/
1413
popover.background {
1414
transition: box-shadow $material_faster $material_ease_out;
1415
padding: 0;
1416
box-shadow: $z-depth-2;
1417
background-color: $light_color;
1418
&:backdrop { box-shadow: $z-depth-1; }
1420
&, .csd & {
1422
border-style: solid;
1423
border-width: 1px;
1424
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1425
border-radius: 2px + 1px;
1426
}
1427
> list,
1429
> .view,
1430
> toolbar {
1431
border-style: none;
1432
box-shadow: none;
1433
background-color: transparent;
1434
}
1435
&, .csd & {
1437
&.touch-selection,
1438
&.magnifier,
1439
&.osd { @extend %osd; }
1440
}
1441
separator { margin: 4px 0; }
1443
list separator { margin: 0; }
1445
checkbutton,
1447
radiobutton { @extend modelbutton.flat; }
1448
}
1449
/*************
1451
* Notebooks *
1452
*************/
1453
notebook {
1454
> header {
1455
border-width: 1px;
1456
border-color: $borders_color;
1457
background-color: $bg_color;
1458
background-clip: border-box;
1459
&.top {
1461
border-bottom-style: solid;
1462
> tabs {
1463
> tab:not(.reorderable-page) {
1464
margin-bottom: -1px;
1465
&:hover { box-shadow: inset 0 -2px $track_color; }
1467
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1469
}
1470
}
1471
}
1472
&.bottom {
1474
border-top-style: solid;
1475
> tabs {
1476
> tab:not(.reorderable-page) {
1477
margin-top: -1px;
1478
&:hover { box-shadow: inset 0 2px $track_color; }
1480
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1482
}
1483
}
1484
}
1485
&.left {
1487
border-right-style: solid;
1488
> tabs {
1489
> tab:not(.reorderable-page) {
1490
margin-right: -1px;
1491
&:hover { box-shadow: inset -2px 0 $track_color; }
1493
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1495
}
1496
}
1497
}
1498
&.right {
1500
border-left-style: solid;
1501
> tabs {
1502
> tab:not(.reorderable-page) {
1503
margin-left: -1px;
1504
&:hover { box-shadow: inset 2px 0 $track_color; }
1506
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1508
}
1509
}
1510
}
1511
&.top > tabs > arrow {
1513
@extend %notebook_vert_arrows;
1514
border-top-style: none;
1516
}
1517
&.bottom > tabs > arrow {
1519
@extend %notebook_vert_arrows;
1520
border-bottom-style: none;
1522
}
1523
@at-root %notebook_vert_arrows {
1525
padding-left: 4px;
1526
padding-right: 4px;
1527
&.down {
1529
margin-left: -8px;
1530
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1531
}
1532
&.up {
1534
margin-right: -8px;
1535
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1536
}
1537
}
1538
&.left > tabs > arrow {
1540
@extend %notebook_horz_arrows;
1541
border-left-style: none;
1543
}
1544
&.right > tabs > arrow {
1546
@extend %notebook_horz_arrows;
1547
border-right-style: none;
1549
}
1550
@at-root %notebook_horz_arrows {
1552
padding-top: 4px;
1553
padding-bottom: 4px;
1554
&.down {
1556
margin-top: -8px;
1557
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1558
}
1559
&.up {
1561
margin-bottom: -8px;
1562
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1563
}
1564
}
1565
> tabs > arrow {
1567
@extend %button_basic.flat;
1568
min-height: 16px;
1570
min-width: 16px;
1571
border-radius: 0;
1572
}
1573
tab {
1575
transition: $material_transition;
1576
min-height: 24px;
1577
min-width: 24px;
1578
padding: 6px 12px;
1579
outline-offset: -6px;
1581
border-width: 1px; // for reorderable tabs
1583
border-color: transparent; //
1584
color: $secondary_fg_color;
1586
font-weight: 500;
1587
&:hover {
1589
color: $fg_color;
1590
&.reorderable-page {
1592
border-color: $borders_color;
1593
background-color: $secondary_base_color;
1594
}
1595
}
1596
&:disabled { color: $insensitive_secondary_fg_color; }
1598
&:checked {
1600
color: $fg_color;
1601
&:disabled { color: $insensitive_fg_color; }
1603
&:not(.reorderable-page) { animation: tab_ripple_effect $material_slower * 2 $material_ease; }
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: $material_transition, 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: $material_transition, 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
background-image: -gtk-gradient(radial,
1846
center center, 0,
1847
center center, 0.5,
1848
to(transparent),
1849
to(transparent));
1850
}
1851
&:hover slider { @include entry(focus); }
1853
&:disabled slider { @include entry(insensitive); }
1855
&:checked slider {
1857
transition: $material_transition, margin 0, background-image 0;
1858
animation: needs_attention $material_slower $material_ease_out forwards;
1859
margin: -4px -4px -4px 0;
1860
// background-color: $accent_bg_color;
1861
color: $selected_fg_color;
1862
}
1863
&:checked:disabled slider { animation: none; }
1865
row:selected & {
1867
}
1868
}
1869
/*************************
1872
* Check and Radio items *
1873
*************************/
1874
// draw regular check and radio items using our PNG assets
1875
// all assets are rendered from assets.svg. never add pngs directly
1876
//selection-mode
1878
@each $s,$as in ('','-selectionmode'),
1879
(':active', '-active-selectionmode'),
1880
(':disabled', '-insensitive-selectionmode'),
1881
(':checked', '-checked-selectionmode'),
1882
(':checked:active', '-checked-active-selectionmode'),
1883
(':disabled:checked', '-checked-insensitive-selectionmode') {
1884
.view.content-view.check#{$s}:not(list) {
1885
-gtk-icon-shadow: $z-depth-1;
1886
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
1887
url("assets/checkbox#{$as}@2.png"));
1888
margin: 8px;
1889
background-color: transparent;
1890
&:hover, &:active { -gtk-icon-shadow: $z-depth-2; }
1892
&:disabled { -gtk-icon-shadow: none; }
1894
}
1895
}
1896
checkbutton.text-button, radiobutton.text-button {
1898
// this is for a nice focus on check and radios text
1899
padding: 2px 0;
1900
outline-offset: 0;
1901
label:not(:only-child) {
1903
&:first-child { margin-left: 4px; }
1904
&:last-child { margin-right: 4px; }
1906
}
1907
}
1908
check,
1910
radio {
1911
min-height: 24px;
1912
min-width: 24px;
1913
-gtk-icon-source: none;
1914
margin: -12px -8px;
1916
padding: 12px;
1917
outline-offset: 4px;
1918
// border-radius: 100%;
1919
@extend %button_basic.flat;
1921
@extend %button_basic.image-button;
1923
color: gtkalpha(currentColor, $enabled_opacity);
1925
&:hover, &:active { color: currentColor; }
1927
&:checked, &:checked:disabled { background-color: transparent; }
1929
&:checked, &:indeterminate { color: $accent_bg_color; }
1931
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1933
&:only-child { margin: -12px; }
1935
.osd & {
1937
}
1938
menu menuitem & {
1940
transition: none;
1941
margin: -16px -16px; // this is a workaround for a menu check/radio size allocation issue
1942
&:not(:checked):not(:indeterminate):hover { color: gtkalpha(currentColor, $enabled_opacity); }
1944
&, &:hover, &:disabled {
1946
background-image: none;
1947
// color: inherit;
1948
// animation: none;
1949
}
1950
}
1951
}
1952
%check,
1954
check {
1955
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1956
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1957
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1959
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1960
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1962
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1963
}
1964
%radio,
1966
radio {
1967
border-image: -gtk-gradient(radial,
1968
center center, 0,
1969
center center, 0.001,
1970
to($accent_bg_color),
1971
to(transparent))
1972
24 / 24px;
1973
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1974
-gtk-recolor(url("assets/radio-unchecked-symbolic.png")));
1975
&:checked {
1977
border-image: -gtk-gradient(radial,
1978
center center, 0,
1979
center center, (10 / 48 / 2),
1980
to($accent_bg_color),
1981
to(transparent))
1982
24 / 24px;
1983
}
1984
&:checked:disabled {
1986
border-image: -gtk-gradient(radial,
1987
center center, 0,
1988
center center, (10 / 48 / 2),
1989
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1990
to(transparent))
1991
24 / 24px;
1992
}
1993
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1995
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1996
&:indeterminate:checked {
1998
border-image: -gtk-gradient(radial,
1999
center center, 0,
2000
center center, 0.001,
2001
to($accent_bg_color),
2002
to(transparent))
2003
24 / 24px;
2004
}
2005
}
2006
// let's animate things
2008
@keyframes check_check {
2009
from { -gtk-icon-transform: rotate(90deg); }
2010
to { -gtk-icon-transform: unset; }
2011
}
2012
@keyframes check_radio {
2014
from { -gtk-icon-transform: scale(0); }
2015
to { -gtk-icon-transform: unset; }
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:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
2025
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2027
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
2029
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
2031
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2033
// no animations in menus
2035
menu menuitem {
2036
check:not(:indeterminate):checked,
2037
radio:not(:indeterminate):checked,
2038
check:indeterminate:checked,
2039
radio:indeterminate:checked { animation: none; }
2040
}
2041
treeview.view check,
2043
treeview.view radio {
2044
// margin: -12px;
2045
// padding: 12px;
2046
padding: 0;
2047
&:checked:hover, &:selected:checked:hover { background-image: none; }
2049
& {
2051
color: $secondary_fg_color;
2052
&:hover, &:active { color: $fg_color; }
2054
&:disabled { color: $insensitive_secondary_fg_color; }
2056
&:checked, &:indeterminate { color: $accent_bg_color; }
2058
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2060
}
2061
&:selected {
2063
color: $secondary_selected_fg_color;
2064
&:hover, &:active { color: $selected_fg_color; }
2066
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2068
&:checked, &:indeterminate { color: $accent_bg_color; }
2070
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2072
}
2073
}
2074
treeview.view radio:checked {
2076
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2077
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2078
border-image: none;
2079
}
2080
/************
2083
* GtkScale *
2084
************/
2085
scale {
2086
// sizing
2087
$_marks_lenght: 8px;
2089
$_marks_distance: 8px;
2090
min-height: 12px;
2092
min-width: 12px;
2093
padding: 12px;
2094
* { transition: $material_transition; }
2096
// the slider is inside the trough, so to have make it bigger there's a negative margin
2098
slider {
2099
min-height: $small_size;
2100
min-width: $small_size;
2101
margin: -10px;
2102
}
2103
// the backing bit
2105
trough {
2106
outline-offset: 2px;
2107
background-color: $track_color;
2108
&:disabled { color: $insensitive_fg_color; }
2110
}
2111
// the colored part of the backing bit
2113
highlight {
2114
background-color: $accent_bg_color;
2115
&:disabled { background-color: transparent; }
2117
}
2118
// this is another differently styled part of the backing bit, the most relevant use case is for example
2120
// in media player to indicate how much video stream as been cached
2121
fill {
2122
background-color: $track_color;
2123
&:disabled { background-color: transparent; }
2125
}
2126
slider {
2128
// border-radius: 100%;
2129
// background-color: $accent_bg_color;
2130
background-repeat: no-repeat;
2131
background-position: center;
2132
@each $s,$as in ('',''),
2134
(':disabled','-insensitive') {
2135
&#{$s} {
2136
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2137
background-image: -gtk-scaled(url('#{$_url}.png'),
2138
url('#{$_url}@2.png'));
2139
}
2140
}
2141
background-size: calc(100% - 8px);
2143
&:hover { background-size: calc(100% - 4px); }
2145
&:active { background-size: calc(100% - 0px); }
2147
}
2148
// click-and-hold the slider to activate
2150
&.fine-tune {
2151
// to make the slider shrink in fine-tune mode
2152
slider { background-size: calc(100% - 12px); }
2153
}
2154
value { color: gtkalpha(currentColor, $hint_opacity); }
2156
marks {
2158
color: $track_color;
2159
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2161
(bottom, bottom, top),
2162
(top, left, right),
2163
(bottom, right, left) {
2164
&.#{$marks_class} {
2165
margin-#{$marks_margin}: $_marks_distance;
2166
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2167
}
2168
}
2169
}
2170
&.horizontal {
2172
indicator {
2173
min-height: $_marks_lenght;
2174
min-width: 1px;
2175
}
2176
}
2177
&.vertical {
2179
indicator {
2180
min-height: 1px;
2181
min-width: $_marks_lenght;
2182
}
2183
}
2184
// *WARNING* scale with marks madness following
2186
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2188
$suffix: if($variant == 'light', '', '-dark');
2189
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2191
('vertical', 'vert') {
2192
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2193
('scale-has-marks-below', ':first-child:not(:only-child)') {
2194
@each $state, $state_infix in ('', ''),
2195
(':disabled', '-insensitive') {
2196
&.#{$dir_class} {
2197
%#{$marks_infix}-#{$dir_infix},
2198
contents#{$nth_child} > trough > slider {
2199
&#{$state} {
2200
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2201
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2203
}
2204
@if $dir_class == 'horizontal' {
2206
min-height: 30px;
2207
min-width: $small_size;
2208
@if $marks_infix == 'scale-has-marks-above' {
2210
margin-top: -16px;
2211
background-position: center calc(100% - 4px);
2213
&:hover { background-position: center calc(100% - 2px); }
2215
&:active { background-position: center calc(100% - 0px); }
2217
}
2218
@if $marks_infix == 'scale-has-marks-below' {
2220
margin-bottom: -16px;
2221
background-position: center calc(4px);
2223
&:hover { background-position: center calc(2px); }
2225
&:active { background-position: center calc(0px); }
2227
}
2228
}
2229
@if $dir_class == 'vertical' {
2231
min-height: $small_size;
2232
min-width: 30px;
2233
@if $marks_infix == 'scale-has-marks-above' {
2235
margin-left: -16px;
2236
background-position: calc(4px) center;
2238
&:hover { background-position: calc(2px) center; }
2240
&:active { background-position: calc(0px) center; }
2242
}
2243
@if $marks_infix == 'scale-has-marks-below' {
2245
margin-right: -16px;
2246
background-position: calc(100% - 4px) center;
2248
&:hover { background-position: calc(100% - 2px) center; }
2250
&:active { background-position: calc(100% - 0px) center; }
2252
}
2253
}
2254
}
2255
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2257
&.fine-tune contents#{$nth_child} > trough > slider {
2258
// bigger negative margins to make the trough grow here as well
2259
@if $dir_class == 'horizontal' {
2261
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2262
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2264
}
2265
@if $dir_class == 'vertical' {
2267
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2268
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2270
}
2271
}
2272
}
2273
}
2274
}
2275
}
2276
&.color {
2278
min-height: 0;
2279
min-width: 0;
2280
&.horizontal {
2282
padding: 0 0 12px 0;
2283
trough {
2285
padding-bottom: $bar_size;
2286
}
2287
slider {
2289
@extend %scale-has-marks-above-horz;
2290
margin-bottom: -10px - $bar_size;
2292
margin-top: 0;
2293
}
2294
}
2295
&.vertical {
2297
&:dir(ltr) {
2298
padding: 0 0 0 12px;
2299
trough {
2301
padding-left: $bar_size;
2302
}
2303
slider {
2305
@extend %scale-has-marks-below-vert;
2306
margin-left: -10px - $bar_size;
2308
margin-right: 0;
2309
}
2310
}
2311
&:dir(rtl) {
2313
padding: 0 12px 0 0;
2314
trough {
2316
padding-right: $bar_size;
2317
}
2318
slider {
2320
@extend %scale-has-marks-above-vert;
2321
margin-right: -10px - $bar_size;
2323
margin-left: 0;
2324
}
2325
}
2326
}
2327
&.fine-tune {
2329
&.horizontal {
2330
slider {
2331
@extend %scale-has-marks-above-horz-fine-tune;
2332
}
2333
}
2334
&.vertical {
2336
&:dir(ltr) {
2337
slider {
2338
@extend %scale-has-marks-below-vert-fine-tune;
2339
}
2340
}
2341
&:dir(rtl) {
2343
slider {
2344
@extend %scale-has-marks-above-vert-fine-tune;
2345
}
2346
}
2347
}
2348
}
2349
}
2350
}
2351
/*****************
2354
* Progress bars *
2355
*****************/
2356
progressbar {
2357
// sizing
2358
&.horizontal {
2359
trough,
2360
progress { min-height: $bar_size; }
2361
}
2362
&.vertical {
2364
trough,
2365
progress { min-width: $bar_size; }
2366
}
2367
// FIXME: insensitive state missing and some other state should be set probably
2369
color: $tertiary_fg_color;
2370
font-size: smaller;
2371
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2373
progress { background-color: $selected_bg_color; }
2375
&.osd { // progressbar.osd used for epiphany page loading progress
2377
// min-width: $bar_size;
2378
// min-height: $bar_size;
2379
// background-color: transparent;
2380
// trough { background-color: transparent; }
2382
progress {
2384
}
2385
}
2386
}
2387
/*************
2390
* Level Bar *
2391
*************/
2392
levelbar {
2393
block {
2394
min-width: $medium_size;
2395
min-height: $bar_size;
2396
}
2397
&.vertical block {
2399
min-width: $bar_size;
2400
min-height: $medium_size;
2401
}
2402
trough {
2404
padding: 2px;
2405
border-radius: 2px;
2406
@include entry(normal);
2408
&:disabled { @include entry(insensitive); }
2410
}
2411
&.horizontal.discrete block { margin: 0 1px; }
2413
&.vertical.discrete block { margin: 1px 0; }
2415
&.horizontal.discrete trough { padding: 2px 1px; }
2417
&.vertical.discrete trough { padding: 1px 2px; }
2419
block {
2421
&.low {
2422
background-color: $warning_color;
2423
}
2424
&.high {
2426
background-color: $selected_bg_color;
2427
}
2428
&.full {
2430
background-color: $success_color;
2431
}
2432
&.empty {
2434
background-color: $track_color;
2435
color: $insensitive_fg_color;
2436
}
2437
}
2438
}
2439
/****************
2442
* Print dialog *
2443
*****************/
2444
printdialog {
2445
paper {
2446
padding: 0;
2447
border: 1px solid $borders_color;
2448
background: $base_color;
2449
color: $fg_color;
2450
}
2451
.dialog-action-box { margin: 12px; }
2453
}
2454
/**********
2457
* Frames *
2458
**********/
2459
frame > border,
2460
.frame {
2461
margin: 0;
2462
padding: 0;
2463
border: 1px solid $borders_color;
2464
border-radius: 0;
2465
box-shadow: none;
2466
&.flat { border-style: none; }
2468
}
2469
actionbar > revealer > box {
2471
padding: $container_padding;
2472
border-top: 1px solid $borders_color;
2473
}
2474
scrolledwindow {
2476
viewport.frame { // avoid double borders when viewport inside scrolled window
2477
border-style: none;
2478
}
2479
// This is used when content is touch-dragged past boundaries.
2481
// draws a box on top of the content, the size changes programmatically.
2482
overshoot {
2483
&.top { @include overshoot(top); }
2484
&.bottom { @include overshoot(bottom); }
2486
&.left { @include overshoot(left); }
2488
&.right { @include overshoot(right); }
2490
}
2491
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2493
undershoot {
2494
&.top { @include undershoot(top); }
2495
&.bottom { @include undershoot(bottom); }
2497
&.left { @include undershoot(left); }
2499
&.right { @include undershoot(right); }
2501
}
2502
junction { // the small square between two scrollbars
2504
border-style: solid none none solid;
2505
border-width: 1px;
2506
border-color: $borders_color;
2507
background-color: $base_color;
2508
&:dir(rtl) { border-style: solid solid none none; }
2510
}
2511
}
2512
//vbox and hbox separators
2514
separator {
2515
min-width: 1px;
2516
min-height: 1px;
2517
background: $borders_color;
2518
}
2519
/*********
2522
* Lists *
2523
*********/
2524
list {
2525
border-color: $borders_color;
2526
background-color: $base_color;
2527
row { padding: 2px; }
2529
}
2530
row {
2532
transition: $material_transition;
2533
&:hover { transition: none; }
2535
&.activatable {
2537
background-image: radial-gradient(circle farthest-corner at center,
2538
gtkalpha(currentColor, 0) 100%,
2539
transparent 0%),
2540
image(gtkalpha(currentColor, 0));
2541
&:hover {
2543
background-image: radial-gradient(circle farthest-corner at center,
2544
gtkalpha(currentColor, 0) 100%,
2545
transparent 0%),
2546
image(gtkalpha(currentColor, 0.05));
2547
}
2548
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2550
&:active {
2551
transition: $material_transition, background-image 0;
2552
animation: row_ripple_effect $material_slower $material_ease_out forwards;
2553
}
2554
}
2555
&:selected { @extend %selected_items; }
2557
}
2558
/*********************
2561
* App Notifications *
2562
*********************/
2563
.app-notification,
2564
.app-notification.frame {
2565
@extend %osd;
2566
@extend toolbar.osd;
2568
margin: 8px;
2570
border { border: none; }
2572
}
2573
/*************
2576
* Expanders *
2577
*************/
2578
expander {
2579
arrow {
2580
transition: $material_transition;
2581
min-width: 16px;
2582
min-height: 16px;
2583
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2584
-gtk-icon-transform: rotate(-90deg);
2585
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2587
&:checked { -gtk-icon-transform: unset; }
2589
color: $secondary_fg_color;
2591
&:hover, &:active { color: $fg_color; }
2593
&:disabled { color: $insensitive_secondary_fg_color; }
2595
&:selected {
2597
color: $secondary_selected_fg_color;
2598
&:hover, &:active { color: $selected_fg_color; }
2600
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2602
}
2603
}
2604
}
2605
/************
2608
* Calendar *
2609
***********/
2610
calendar {
2611
padding: 1px;
2612
border: 1px solid $borders_color;
2613
color: $fg_color;
2614
&:disabled { color: $insensitive_fg_color; }
2616
&:selected {
2618
@extend %selected_items;
2619
border-radius: 2px + 1px;
2621
}
2622
&.header {
2624
border: none;
2625
border-bottom: 1px solid $borders_color;
2626
border-radius: 0;
2627
}
2628
&.button { @extend %button_basic.flat; }
2630
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2632
&.highlight {
2634
color: gtkalpha(currentColor, $hint_opacity);
2635
font-weight: 500;
2636
}
2637
}
2638
/***********
2641
* Dialogs *
2642
***********/
2643
messagedialog { // Message Dialog styling
2644
&.background { background-color: $light_color; }
2645
.titlebar {
2647
min-height: $small_size;
2648
border-style: none;
2649
box-shadow: inset 0 1px $highlight_color;
2650
background-color: $light_color;
2651
}
2652
&.csd { // rounded bottom border styling for csd version
2654
&.background {
2655
// bigger radius for better antialiasing
2656
border-bottom-left-radius: 2px;
2657
border-bottom-right-radius: 2px;
2658
}
2659
.dialog-action-area button {
2661
padding: 8px 16px;
2662
border-top: 1px solid $borders_color;
2663
border-radius: 0;
2664
@extend %button_basic.flat;
2666
&:first-child{ border-bottom-left-radius: 2px; }
2668
&:last-child { border-bottom-right-radius: 2px; }
2670
}
2671
}
2672
}
2673
filechooser {
2675
.dialog-action-box { border-top: 1px solid $borders_color; }
2676
#pathbarbox { border-bottom: 1px solid $borders_color; }
2678
}
2679
filechooserbutton:drop(active) {
2681
box-shadow: none;
2682
}
2683
/***********
2686
* Sidebar *
2687
***********/
2688
.sidebar {
2689
border-style: none;
2690
background-color: $light_color;
2691
@at-root %sidebar_left,
2693
&:dir(ltr),
2694
&.left,
2695
&.left:dir(rtl) {
2696
border-right: 1px solid $borders_color;
2697
border-left-style: none;
2698
}
2699
@at-root %sidebar_right
2701
&:dir(rtl),
2702
&.right {
2703
border-left: 1px solid $borders_color;
2704
border-right-style: none;
2705
}
2706
list { background-color: transparent; }
2708
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2710
}
2711
stacksidebar {
2713
&.sidebar {
2714
&:dir(ltr),
2715
&.left,
2716
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2717
&:dir(rtl),
2719
&.right { list { @extend %sidebar_right; }}
2720
}
2721
row {
2723
padding: 10px 4px;
2724
> label {
2726
padding-left: 6px;
2727
padding-right: 6px;
2728
}
2729
&.needs-attention > label { @extend %needs_attention; }
2731
}
2732
}
2733
/****************
2736
* File chooser *
2737
****************/
2738
placessidebar {
2739
> viewport.frame { border-style: none; }
2740
row {
2742
// Needs overriding of the GtkListBoxRow padding
2743
min-height: 32px;
2744
padding: 0;
2745
// Using margins/padding directly in the SidebarRow
2747
// will make the animation of the new bookmark row jump
2748
> revealer { padding: 0 12px; }
2749
&:selected { color: $selected_fg_color; }
2751
&:disabled { color: $insensitive_fg_color; }
2753
image.sidebar-icon {
2755
opacity: $hint_opacity; // dim the device icons
2756
&:dir(ltr) { padding-right: 8px; }
2758
&:dir(rtl) { padding-left: 8px; }
2759
}
2760
label.sidebar-label {
2762
&:dir(ltr) { padding-right: 2px; }
2763
&:dir(rtl) { padding-left: 2px; }
2764
}
2765
@at-root button.sidebar-button {
2767
@extend %button_basic.flat;
2768
min-height: $small_size;
2770
min-width: $small_size;
2771
margin-top: 0;
2772
margin-bottom: 0;
2773
padding: 0;
2774
border-radius: 100%;
2775
-gtk-outline-radius: 100%;
2776
row:selected & { @extend %button_selected.flat; }
2778
}
2779
&.sidebar-placeholder-row {
2781
min-height: 2px;
2782
padding: 0 8px;
2783
background-image: image($accent_bg_color);
2784
background-clip: content-box;
2785
}
2786
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2788
&:drop(active):not(:disabled) {
2790
box-shadow: inset 0 0 0 2px $accent_bg_color;
2791
&:selected {
2793
// background-color: $accent_bg_color;
2794
// color: $selected_fg_color;
2795
}
2796
}
2797
}
2798
}
2799
placesview {
2801
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2802
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2804
// this selects the "connect to server" label
2806
> actionbar > revealer > box > label {
2807
padding-left: 8px;
2808
padding-right: 8px;
2809
}
2810
}
2811
/*********
2814
* Paned *
2815
*********/
2816
paned {
2817
> separator {
2818
min-width: 1px;
2819
min-height: 1px;
2820
-gtk-icon-source: none; // defeats the ugly default handle decoration
2821
border-style: none; // just to be sure
2822
background-color: transparent;
2823
// workaround, using background istead of a border since the border will get rendered twice (?)
2824
background-image: image($borders_color);
2825
background-size: 1px 1px;
2826
&.wide {
2828
min-width: 6px;
2829
min-height: 6px;
2830
background-color: $bg_color;
2831
background-image: image($borders_color), image($borders_color);
2832
background-size: 1px 1px, 1px 1px;
2833
}
2834
}
2835
&.horizontal > separator {
2837
background-repeat: repeat-y;
2838
&:dir(ltr) {
2840
margin: 0 -8px 0 0;
2841
padding: 0 8px 0 0;
2842
background-position: left;
2843
}
2844
&:dir(rtl) {
2846
margin: 0 0 0 -8px;
2847
padding: 0 0 0 8px;
2848
background-position: right;
2849
}
2850
&.wide {
2852
margin: 0;
2853
padding: 0;
2854
background-repeat: repeat-y, repeat-y;
2855
background-position: left, right;
2856
}
2857
}
2858
&.vertical > separator {
2860
margin: 0 0 -8px 0;
2861
padding: 0 0 8px 0;
2862
background-repeat: repeat-x;
2863
background-position: top;
2864
&.wide {
2866
margin: 0;
2867
padding: 0;
2868
background-repeat: repeat-x, repeat-x;
2869
background-position: bottom, top;
2870
}
2871
}
2872
}
2873
/**************
2876
* GtkInfoBar *
2877
**************/
2878
infobar { border-style: none; }
2879
.info { background-color: $info_bg_color; }
2881
.question { background-color: $question_bg_color; }
2883
.warning { background-color: $warning_bg_color; }
2885
.error { background-color: $error_bg_color; }
2887
.info,
2889
.question,
2890
.warning,
2891
.error {
2892
color: $selected_fg_color;
2893
button { @extend %button_selected; }
2895
label:selected {
2897
}
2898
*:link { @extend %link_selected; }
2900
}
2901
/************
2904
* Tooltips *
2905
************/
2906
tooltip {
2907
&.background {
2908
// background-color needs to be set this way otherwise it gets drawn twice
2909
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2910
background-color: scale-alpha($base_color, $higher_opacity);
2911
}
2912
// @extend %osd;
2914
// padding: 4px; /* not working */
2916
border-radius: 2px;
2917
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2918
// FIXME: we need a border or tooltips vanish on black background.
2920
decoration { background-color: transparent; }
2921
label {
2923
min-height: 32px - 6px * 2;
2924
padding: 4px 12px - 6px;
2925
}
2926
* { // Yeah this is ugly
2928
padding: 0;
2929
background-color: transparent;
2930
color: inherit;
2931
}
2932
}
2933
/*****************
2936
* Color Chooser *
2937
*****************/
2938
colorswatch {
2939
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2940
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2941
// applied to the overlay box.
2942
// base color corners rounding
2944
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2945
// sports a bigger radius.
2946
// nth-child is needed by the custom color strip.
2947
&.top {
2949
border-top-left-radius: $material_radius + 0.5px;
2950
border-top-right-radius: $material_radius + 0.5px;
2951
overlay {
2953
border-top-left-radius: $material_radius;
2954
border-top-right-radius: $material_radius;
2955
}
2956
}
2957
&.bottom {
2959
border-bottom-left-radius: $material_radius + 0.5px;
2960
border-bottom-right-radius: $material_radius + 0.5px;
2961
overlay {
2963
border-bottom-left-radius: $material_radius;
2964
border-bottom-right-radius: $material_radius;
2965
}
2966
}
2967
&.left,
2969
&:first-child:not(.top) {
2970
border-top-left-radius: $material_radius + 0.5px;
2971
border-bottom-left-radius: $material_radius + 0.5px;
2972
overlay {
2974
border-top-left-radius: $material_radius;
2975
border-bottom-left-radius: $material_radius;
2976
}
2977
}
2978
&.right,
2980
&:last-child:not(.bottom) {
2981
border-top-right-radius: $material_radius + 0.5px;
2982
border-bottom-right-radius: $material_radius + 0.5px;
2983
overlay {
2985
border-top-right-radius: $material_radius;
2986
border-bottom-right-radius: $material_radius;
2987
}
2988
}
2989
&.dark overlay { color: white; }
2991
&.light overlay { color: scale-alpha(black, 0.8); }
2993
&.dark { color: white; } // for focus ring
2995
&.light { color: scale-alpha(black, 0.8); } // for focus ring
2997
&:drop(active) {
2999
box-shadow: none;
3000
&.light overlay {
3002
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3003
}
3004
&.dark overlay {
3006
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3007
}
3008
}
3009
overlay {
3011
transition: $material_transition;
3012
box-shadow: $z-depth-1;
3013
&:hover { box-shadow: $z-depth-2; }
3015
}
3016
&#add-color-button {
3018
border-radius: $material_radius $material_radius 0 0;
3019
color: white; // for focus ring
3020
&:only-child { border-radius: $material_radius; }
3022
overlay {
3024
background-image: linear-gradient(to right,
3025
$error_bg_color 25%,
3026
$warning_bg_color 25%, $warning_bg_color 50%,
3027
$info_bg_color 50%, $info_bg_color 75%,
3028
$question_bg_color 75%);
3029
color: white;
3030
}
3031
}
3032
&:disabled {
3034
opacity: $disabled_opacity;
3035
overlay { box-shadow: none; }
3037
}
3038
row:selected & {
3040
}
3041
&#editor-color-sample {
3043
border-radius: $material_radius + 0.5px;
3044
overlay { border-radius: $material_radius; }
3046
// overlay:hover { box-shadow: $z-depth-1; }
3048
}
3049
}
3050
// colorscale popup
3052
colorchooser .popover.osd {
3053
transition: box-shadow $material_faster $material_ease_out;
3054
border-radius: 2px;
3055
box-shadow: $z-depth-2;
3056
background-color: $base_color;
3057
&:backdrop { box-shadow: $z-depth-1; }
3059
spinbutton:not(.vertical) { @extend %entry.flat; }
3061
}
3062
/********
3065
* Misc *
3066
********/
3067
//content view (grid/list)
3068
.content-view {
3069
background-color: $bg_color;
3070
// &:hover { -gtk-icon-effect: highlight; }
3072
rubberband { @extend rubberband; }
3074
}
3075
.scale-popup {
3077
.osd & { @extend %osd; }
3078
.osd & button.flat { //FIXME: quick hack, redo properly
3080
}
3081
button { // +/- buttons on GtkVolumeButton popup
3083
}
3084
}
3085
/**********************
3088
* Window Decorations *
3089
*********************/
3090
decoration {
3091
transition: box-shadow $material_faster $material_ease_out;
3092
border-radius: 2px 2px 0 0;
3093
box-shadow: $z-depth-4, 0 16px 16px transparent;
3094
// FIXME rationalize shadows
3096
// this is used for the resize cursor area
3098
margin: 8px;
3099
&:backdrop {
3101
// the transparent shadow here is to enforce that the shadow extents don't
3102
// change when we go to backdrop, to prevent jumping windows.
3103
// The biggest shadow should be in the same order then in the active state
3104
// or the jumping will happen during the transition.
3105
box-shadow: $z-depth-2, 0 16px 16px transparent;
3106
}
3107
.fullscreen &,
3109
.tiled & { border-radius: 0; }
3110
.popup & { box-shadow: none; }
3112
// server-side decorations as used by mutter
3114
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3115
.csd.popup & {
3117
border-radius: 2px;
3118
box-shadow: $z-depth-2;
3119
}
3120
tooltip.csd & {
3122
border-radius: 2px;
3123
box-shadow: $z-depth-2;
3124
}
3125
messagedialog.csd & {
3127
border-radius: 2px;
3128
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3129
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3131
}
3132
.solid-csd & {
3134
margin: 4px;
3135
// border: solid 1px $borders_color;
3136
border-radius: 0;
3137
box-shadow: none;
3138
background-color: $bg_color;
3139
}
3140
}
3141
// Window Close button
3143
button.titlebutton {
3144
// @extend %button_basic.flat;
3145
@extend %button_basic.image-button;
3147
.selection-mode & {
3149
}
3150
}
3151
// catch all extend :)
3154
%selected_items {
3156
background-color: $selected_bg_color;
3157
@at-root %nobg_selected_items, & {
3159
color: $selected_fg_color;
3160
&:disabled { color: $insensitive_selected_fg_color; }
3162
}
3163
}
3164
.monospace { font: Monospace; }
3166
/**********************
3169
* Touch Copy & Paste *
3170
*********************/
3171
//touch selection handlebars for the Popover.osd above
3172
cursor-handle {
3173
border-radius: 100px;
3174
background-color: $accent_bg_color;
3175
background-image: none;
3176
&.top:dir(ltr), &.bottom:dir(rtl) {
3178
padding-left: 6px;
3179
border-top-right-radius: 0;
3180
}
3181
&.bottom:dir(ltr), &.top:dir(rtl) {
3183
padding-right: 6px;
3184
border-top-left-radius: 0;
3185
}
3186
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3188
-GtkWidget-text-handle-width: 24;
3189
-GtkWidget-text-handle-height: 30;
3190
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3192
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3193
url('#{$_url}@2.png'));
3194
}
3195
}
3196
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3198
button.circular { // FIXME: aggregate to buttons
3200
border-radius: 100px;
3201
-gtk-outline-radius: 100px;
3202
label { padding: 0; }
3204
}
3205
// shortcut window keys
3207
.keycap {
3208
min-width: 28px - 8px * 2;
3209
min-height: 28px - 2px;
3210
margin-top: 2px;
3211
padding-bottom: 2px;
3212
padding-left: 8px;
3213
padding-right: 8px;
3214
border: solid 1px $borders_color;
3216
border-radius: 2px + 1px;
3217
box-shadow: inset 0 -2px $borders_color;
3218
background-color: $base_color;
3219
color: $fg_color;
3220
font-size: smaller;
3221
}
3222
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3224
transition: $material_transition;
3225
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3226
caret-color: $accent_bg_color;
3227
}
3228
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3230
stackswitcher button.circular,
3232
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3233
min-width: $medium_size;
3234
min-height: $medium_size;
3235
padding: 0;
3236
}
3237