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.2s;
13
$material_timing_function: cubic-bezier(0.4, 0, 0.2, 1);
14
// fallback
16
$header_borders_color: mix(#000000, $dark_color, percentage(alpha($borders_color)));
17
* {
19
padding: 0;
20
background-clip: padding-box;
21
// FIXME: color's transition is too slow
22
transition: all $material_duration $material_timing_function, color 0;
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
transition: none;
593
animation: needs_attention $material_duration $material_timing_function forwards;
594
background-repeat: no-repeat;
595
background-position: right 3px;
596
background-size: 6px 6px;
597
&:dir(rtl) { background-position: left 3px; }
599
}
600
// all the following is for the +|- buttons on inline toolbars, that way
602
// should really be deprecated...
603
.inline-toolbar toolbutton > button { // redefining the button look is
604
// needed since those are flat...
605
}
606
// More inline toolbar buttons
608
toolbar.inline-toolbar toolbutton {
609
// > button.flat { @extend %linked_middle; }
610
// &:first-child > button.flat { @extend %linked:first-child; }
612
// &:last-child > button.flat { @extend %linked:last-child; }
614
// &:only-child > button.flat { @extend %linked:only-child; }
616
}
617
%linked_middle {
619
border-radius: 0;
620
}
621
%linked {
623
-gtk-outline-radius: 2px;
624
@extend %linked_middle;
626
&:first-child {
628
border-top-left-radius: 2px;
629
border-bottom-left-radius: 2px;
630
}
631
&:last-child {
633
border-top-right-radius: 2px;
634
border-bottom-right-radius: 2px;
635
}
636
&:only-child {
638
border-radius: 2px;
639
}
640
}
641
%linked_vertical_middle {
643
border-radius: 0;
644
}
645
%linked_vertical{
647
-gtk-outline-radius: 2px;
648
@extend %linked_vertical_middle;
650
&:first-child {
652
border-top-left-radius: 2px;
653
border-top-right-radius: 2px;
654
}
655
&:last-child {
657
border-bottom-left-radius: 2px;
658
border-bottom-right-radius: 2px;
659
}
660
&:only-child {
662
border-radius: 2px;
663
}
664
}
665
/* menu buttons */
667
modelbutton.flat,
668
.menuitem.button.flat {
669
min-height: $menuitem_size;
670
padding-left: 8px;
671
padding-right: 8px;
672
border-radius: 2px;
673
color: inherit;
674
@extend %button_basic.flat;
676
&:selected { @extend %selected_items; }
678
check,
680
radio {
681
&, &:hover { background-image: none; }
682
&:active { animation: none; }
684
}
685
check:not(:indeterminate):checked:active { animation: check_check $material_duration * 2 $material_timing_function; }
687
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_duration * 2 $material_timing_function; }
689
// FIXME: remove the following when the checks/radios rewrite lands
691
check:last-child,
692
radio:last-child { margin-left: 8px; }
693
check:first-child,
695
radio:first-child { margin-right: 8px; }
696
}
697
modelbutton.flat arrow {
699
background: none;
700
&:hover { background: none; }
702
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
704
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
706
}
707
button.color {
709
min-height: $small_size;
710
min-width: $small_size;
711
padding: $container_padding;
712
colorswatch:only-child {
714
// &, overlay { border-radius: 0; }
715
}
716
}
717
/*********
720
* Links *
721
*********/
722
*:link {
723
&, &:hover, &:active { color: $link_color; }
724
&:visited {
726
&, &:hover, &:active { color: $link_visited_color; }
727
}
728
@at-root %link_selected,
730
&:selected,
731
*:selected & { color: $selected_fg_color; }
732
}
733
button:link,
735
button:visited {
736
@extend *:link;
737
> label { text-decoration-line: underline; }
739
}
740
/*****************
742
* GtkSpinButton *
743
*****************/
744
spinbutton {
745
&:not(.vertical) {
746
// in this horizontal configuration, the whole spinbutton
747
// behaves as the entry, so we extend the entry styling
748
// and nuke the style on the internal entry
749
@extend %entry;
750
padding: 0;
752
%spinbutton_entry,
754
entry {
755
min-width: $large_size - 16px;
756
// reset all the other props since the spinbutton node is styled here
757
margin: 0;
758
border-image: none;
759
border-radius: 0;
760
box-shadow: none;
761
background-color: transparent;
762
}
763
button {
765
min-height: $small_size;
766
min-width: $small_size;
767
// margin: $container_padding;
768
padding: 0;
769
border: solid $container_padding transparent;
770
@extend %button_basic.flat;
772
@extend %button_basic.image-button;
774
&.up { margin-left: -$container_padding / 2; }
776
&.down { margin-right: -$container_padding / 2; }
778
}
779
}
780
// OSD horizontal
782
.osd &:not(.vertical) {
783
button {
784
}
785
}
786
// Vertical
788
&.vertical {
789
// in the vertical configuration, we treat the spinbutton
790
// as a box, and tweak the style of the entry in the middle
791
// so that it's linked
792
// FIXME: this should not be set at all, but otherwise it gets the wrong
794
// color
795
&:disabled { color: $insensitive_fg_color; }
796
&:drop(active) {
798
box-shadow: none;
799
}
800
entry {
802
min-height: $medium_size;
803
min-width: $large_size;
804
padding: 0;
805
}
806
button {
808
min-height: $medium_size;
809
min-width: $large_size;
810
padding: 0;
811
@extend %button_basic.flat;
813
&.up { border-radius: 2px 2px 0 0; }
815
&.down { border-radius: 0 0 2px 2px; }
817
}
818
}
819
// OSD vertical
821
.osd &.vertical button:first-child {
822
}
823
// Misc
825
treeview &:not(.vertical) {
826
min-height: 0;
827
border-style: none;
828
border-radius: 0;
829
entry {
831
min-height: 0;
832
padding: 1px 2px;
833
}
834
}
835
}
836
/**************
839
* ComboBoxes *
840
**************/
841
combobox {
842
arrow {
843
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
844
min-height: 16px;
845
min-width: 16px;
846
}
847
menu,
849
.menu {
850
padding: 2px 0;
851
menuitem {
853
min-height: $medium_size;
854
padding: 0 10px;
855
}
856
}
857
&.linked {
859
button:nth-child(2) {
860
&:dir(ltr) { @extend %linked:last-child; }
861
&:dir(rtl) { @extend %linked:first-child; }
862
}
863
}
864
&:drop(active) { // FIXME: untested
866
box-shadow: none;
867
// button.combo { @extend %button_basic:drop(active); }
869
}
870
}
871
.linked > combobox > box > button.combo {
873
// the combo is a composite widget so the way we do button linking doesn't
874
// work, special case needed. See
875
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
876
&:dir(ltr),
878
&:dir(rtl) { @extend %linked_middle; } // specificity bump
879
}
880
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
882
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
883
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
884
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
886
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
887
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
888
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
889
/************
892
* Toolbars *
893
************/
894
toolbar {
895
-GtkWidget-window-dragging: true;
896
padding: $container_padding / 2;
897
background-color: $bg_color;
898
// on OSD
900
.osd & { background-color: transparent; }
901
// stand-alone OSD toolbars
903
&.osd {
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
box-shadow: inset 0 1px $secondary_highlight_color;
1012
// background-color: $selected_bg_color;
1013
color: $selected_fg_color;
1014
transition: all $material_duration $material_timing_function, color 0, background-image 0;
1015
animation: header_ripple_effect $material_duration $material_timing_function forwards;
1016
&:backdrop {
1018
}
1019
.subtitle:link { @extend *:link:selected; }
1021
button:not(.suggested-action):not(.destructive-action) {
1023
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
1024
$selected_fg_color 0%,
1025
transparent 0%)
1026
0 0 0 / 0 0 0px;
1027
// color: $secondary_selected_fg_color;
1028
&, &:hover, &:active, &:checked { color: $selected_fg_color; }
1030
&:disabled {
1032
color: $insensitive_selected_fg_color;
1033
> label { color: inherit; }
1035
}
1036
&:checked {
1038
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
1039
$selected_fg_color 100%,
1040
transparent 0%)
1041
0 0 2 / 0 0 2px;
1042
color: $selected_fg_color;
1043
&:disabled {
1045
color: $insensitive_selected_fg_color;
1046
> label { color: inherit; }
1048
}
1049
}
1050
}
1051
.selection-menu {
1053
padding-left: 16px;
1054
padding-right: 16px;
1055
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1057
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1059
}
1060
}
1061
.tiled &,
1063
.maximized & {
1064
border-radius: 0; // squared corners when the window is max'd or tiled
1065
box-shadow: none;
1066
}
1067
&.default-decoration {
1069
min-height: $small_size;
1070
padding: $container_padding;
1071
border-width: 0;
1072
button.titlebutton {
1074
min-height: $small_size;
1075
min-width: $small_size;
1076
margin: 0;
1077
padding: 0;
1078
}
1079
}
1080
}
1081
headerbar {
1083
// add vertical margins to headerbar entries, buttons and separators to avoid them spanning the whole height
1084
entry,
1085
spinbutton,
1086
// separator,
1087
button {
1088
margin-top: $container_padding;
1089
margin-bottom: $container_padding;
1090
}
1091
}
1092
.titlebar {
1094
border-top-left-radius: 2px;
1095
border-top-right-radius: 2px;
1096
}
1097
headerbar {
1099
separator:first-child + &, // tackles the paned container case
1100
&:first-child {
1101
border-top-left-radius: 2px;
1102
.tiled &,
1104
.maximized & { border-radius: 0; }
1105
}
1106
&:last-child {
1108
border-top-right-radius: 2px;
1109
.tiled &,
1111
.maximized & { border-radius: 0; }
1112
}
1113
}
1114
.titlebar:not(headerbar) {
1116
window.csd > & {
1117
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1118
padding: 0;
1119
background-color: transparent;
1120
background-image: none;
1121
border-style: none;
1122
box-shadow: none;
1123
}
1124
> separator { background-color: $header_borders_color; }
1126
@extend %titlebar;
1128
}
1129
/************
1132
* Pathbars *
1133
************/
1134
.path-bar button {
1135
&.text-button, &.image-button, & {
1136
padding-left: 6px;
1137
padding-right: 6px;
1138
}
1139
&.text-button.image-button, & {
1141
// label:last-child { padding-left: 2px; padding-right: 8px; }
1142
// label:first-child { padding-left: 8px; padding-right: 2px; }
1143
}
1144
image {
1146
padding-left: 4px;
1147
padding-right: 4px;
1148
}
1149
&.slider-button {
1151
padding-left: 0;
1152
padding-right: 0;
1153
}
1154
}
1155
/**************
1158
* Tree Views *
1159
**************/
1160
treeview.view {
1161
-GtkTreeView-grid-line-width: 1;
1162
-GtkTreeView-grid-line-pattern: '';
1163
-GtkTreeView-tree-line-width: 1;
1164
-GtkTreeView-tree-line-pattern: '';
1165
-GtkTreeView-expander-size: 16;
1166
border-left-color: $track_color; // this is actually the tree lines color,
1168
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1169
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1171
&:hover, &:active, &:selected { border-radius: 0; }
1173
&.separator {
1175
min-height: 1px + 2px * 2;
1176
color: $borders_color;
1177
}
1178
&:drop(active) {
1180
border-style: solid none;
1181
border-width: 1px;
1182
border-color: $accent_bg_color;
1183
&.after { border-top-style: none; }
1185
&.before { border-bottom-style: none; }
1187
}
1188
&.expander {
1190
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1191
-gtk-icon-transform: rotate(-90deg);
1192
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1194
&:checked { -gtk-icon-transform: unset; }
1196
color: $secondary_fg_color;
1198
&:hover, &:active { color: $fg_color; }
1200
&:disabled { color: $insensitive_secondary_fg_color; }
1202
&:selected {
1204
color: $secondary_selected_fg_color;
1205
&:hover, &:active { color: $selected_fg_color; }
1207
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1209
}
1210
}
1211
&.progressbar { // progress bar in treeviews
1213
border-style: none none solid;
1214
border-width: $bar_size;
1215
border-color: $selected_bg_color;
1216
background-color: transparent;
1217
background-image: none;
1218
&:selected { border-color: currentColor; }
1220
}
1221
&.trough { // progress bar trough in treeviews
1223
border-style: none none solid;
1224
border-width: $bar_size;
1225
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1226
background-color: transparent;
1227
background-image: none;
1228
&:selected { border-color: $track_color; }
1230
}
1231
header {
1233
button {
1234
@extend row.activatable;
1235
padding: 2px 6px;
1237
border-style: none solid solid none;
1238
border-width: 1px;
1239
border-color: $borders_color;
1240
border-radius: 0;
1241
background-clip: border-box;
1242
&, &:hover, &:active { box-shadow: none; }
1244
&, &:disabled { background-color: $base_color; }
1246
&:last-child { border-right-style: none; }
1248
}
1249
}
1250
button.dnd,
1252
header.button.dnd { // for treeview-like derive widgets
1253
padding: 2px 6px;
1254
border-style: none solid solid;
1255
border-width: 1px;
1256
border-color: $borders_color;
1257
border-radius: 0;
1258
box-shadow: none;
1259
background-color: $base_color;
1260
background-clip: border-box;
1261
color: $selected_bg_color;
1262
}
1263
}
1264
/*********
1267
* Menus *
1268
*********/
1269
menubar,
1270
.menubar {
1271
-GtkWidget-window-dragging: true;
1272
padding: 0;
1273
box-shadow: inset 0 -1px $borders_color;
1274
background-color: $dark_color;
1275
> menuitem {
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
transition: none;
1304
min-height: 20px;
1305
min-width: 40px;
1306
padding: 4px 8px;
1307
font: initial;
1308
text-shadow: none;
1309
&:hover {
1311
// background-color: gtkalpha(currentColor, $lower_opacity / 2);
1312
background-color: $selected_bg_color;
1313
color: $selected_fg_color;
1314
}
1315
&:disabled { color: $insensitive_fg_color; }
1317
// submenu indicators
1319
arrow {
1320
min-height: 16px;
1321
min-width: 16px;
1322
&:dir(ltr) {
1324
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1325
margin-left: 8px;
1326
}
1327
&:dir(rtl) {
1329
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1330
margin-right: 8px;
1331
}
1332
}
1333
}
1334
// overflow arrows
1336
> arrow {
1337
min-height: 16px;
1338
min-width: 16px;
1339
padding: 4px;
1340
border-radius: 0;
1341
background-color: $base_color;
1342
color: $secondary_fg_color;
1343
&.top {
1345
margin-top: -4px;
1346
border-bottom: 1px solid $borders_color;
1347
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1348
}
1349
&.bottom {
1351
margin-bottom: -4px;
1352
border-top: 1px solid $borders_color;
1353
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1354
}
1355
&:hover {
1357
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1358
color: $fg_color;
1359
}
1360
&:disabled {
1362
border-color: transparent;
1363
background-color: transparent;
1364
color: transparent;
1365
// color: $insensitive_secondary_fg_color;
1366
}
1367
}
1368
separator { margin: 4px 0; }
1370
}
1371
menuitem {
1373
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1374
check,
1376
radio {
1377
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1378
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1379
}
1380
}
1381
.csd.popup { border-radius: 2px; }
1383
/***************
1386
* Popovers *
1387
***************/
1388
popover.background {
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
min-height: 24px;
1570
min-width: 24px;
1571
padding: 6px 12px;
1572
outline-offset: -6px;
1574
border-width: 1px; // for reorderable tabs
1576
border-color: transparent; //
1577
color: $secondary_fg_color;
1579
font-weight: 500;
1580
&:hover {
1582
color: $fg_color;
1583
&.reorderable-page {
1585
border-color: $borders_color;
1586
background-color: $bg_color;
1587
}
1588
}
1589
&:disabled { color: $insensitive_secondary_fg_color; }
1591
&:checked {
1593
color: $fg_color;
1594
&:disabled { color: $insensitive_fg_color; }
1596
&:not(.reorderable-page) { animation: tab_ripple_effect $material_duration * 2 ease-in-out; }
1598
&.reorderable-page {
1600
border-color: $borders_color;
1601
background-color: $light_color;
1602
}
1603
}
1604
// colors the button like the label, overridden otherwise
1606
button.flat {
1607
// FIXME: generalize .small-button?
1608
min-width: $small_size;
1609
min-height: $small_size;
1610
padding: 0;
1611
@extend %button_basic.image-button;
1613
&:last-child {
1615
margin-left: 6px;
1616
margin-right: -6px;
1617
}
1618
&:first-child {
1620
margin-left: -6px;
1621
margin-right: 6px;
1622
}
1623
}
1624
}
1625
&.top,
1627
&.bottom {
1628
tabs {
1629
padding-left: 8px;
1630
padding-right: 8px;
1631
&:not(:only-child) {
1633
&:first-child { margin-left: 0; }
1634
&:last-child { margin-right: 0; }
1635
}
1636
tab {
1638
&.reorderable-page {
1639
margin: 0 -1px;
1640
border-style: none solid;
1641
}
1642
}
1643
}
1644
}
1645
&.left,
1647
&.right {
1648
tabs {
1649
padding-top: 8px;
1650
padding-bottom: 8px;
1651
&:not(:only-child) {
1653
&:first-child { margin-top: 0; }
1654
&:last-child { margin-bottom: 0; }
1655
}
1656
tab {
1658
&.reorderable-page {
1659
margin: -1px 0;
1660
border-style: solid none;
1661
}
1662
}
1663
}
1664
}
1665
}
1666
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1668
background-color: $base_color;
1669
entry,
1671
spinbutton:not(.vertical) { @extend %entry.flat; }
1672
revealer entry,
1674
revealer spinbutton:not(.vertical) { @extend %entry; }
1675
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1677
}
1678
}
1679
/**************
1682
* Scrollbars *
1683
**************/
1684
scrollbar {
1685
$_slider_min_length: 24px;
1686
// disable steppers
1688
@at-root * {
1689
-GtkScrollbar-has-backward-stepper: false;
1690
-GtkScrollbar-has-forward-stepper: false;
1691
}
1692
background-color: $base_color;
1694
background-clip: $extra_background_clip;
1695
// scrollbar border
1697
&.top { border-bottom: 1px solid $borders_color; }
1698
&.bottom { border-top: 1px solid $borders_color; }
1699
&.left { border-right: 1px solid $borders_color; }
1700
&.right { border-left: 1px solid $borders_color; }
1701
// slider
1703
slider {
1704
min-width: 8px;
1705
min-height: 8px;
1706
border: 4px solid transparent;
1707
border-radius: 100px;
1708
background-clip: padding-box;
1709
background-color: $tertiary_fg_color;
1710
transition: all $material_duration $material_timing_function, color 0, margin 0, border-width 0;
1711
&:hover { background-color: $secondary_fg_color; }
1713
&:active { background-color: $fg_color; }
1715
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1717
}
1718
&.fine-tune {
1720
slider {
1721
min-width: 4px;
1722
min-height: 4px;
1723
transition: all $material_duration $material_timing_function, color 0, margin 0, border-width 0, min-width 0, min-height 0;
1724
}
1725
&.horizontal slider { margin: 2px 0; }
1727
&.vertical slider { margin: 0 2px; }
1729
}
1730
&.overlay-indicator {
1732
&:not(.dragging):not(.hovering) {
1733
border-color: transparent;
1734
background-color: transparent;
1735
slider {
1737
min-width: 4px;
1738
min-height: 4px;
1739
margin: 2px;
1740
border: 2px solid scale-alpha($base_color, $lower_opacity);
1741
}
1742
button {
1744
min-width: 4px;
1745
min-height: 4px;
1746
margin: 2px;
1747
border: 2px solid scale-alpha($base_color, $lower_opacity);
1748
border-radius: 100px;
1749
background-color: $tertiary_fg_color;
1750
background-clip: padding-box;
1751
-gtk-icon-source: none;
1752
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1754
}
1755
&.horizontal {
1757
slider { min-width: $_slider_min_length; }
1758
button { min-width: 8px; }
1760
}
1761
&.vertical {
1763
slider { min-height: $_slider_min_length; }
1764
button { min-height: 8px; }
1766
}
1767
}
1768
&.dragging,
1770
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1771
}
1772
&.horizontal slider { min-width: $_slider_min_length; }
1774
&.vertical slider { min-height: $_slider_min_length; }
1776
// button styling
1778
button {
1779
@extend %button_basic.flat;
1780
min-width: 16px;
1781
min-height: 16px;
1782
padding: 0;
1783
border-radius: 0;
1784
}
1785
// button icons
1787
&.vertical {
1788
button {
1789
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1790
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1792
}
1793
}
1794
&.horizontal {
1796
button {
1797
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1798
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1800
}
1801
}
1802
}
1803
/**********
1806
* Switch *
1807
**********/
1808
switch {
1809
margin: $container_padding 0;
1810
border: 4px solid transparent;
1811
border-radius: 100px;
1812
background-color: $track_color;
1813
background-clip: padding-box;
1814
font-size: 0;
1815
&:disabled { color: $insensitive_fg_color; }
1817
&:checked {
1819
background-color: scale-alpha($accent_bg_color, 0.5);
1820
&:disabled {
1822
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1823
color: $insensitive_fg_color;
1824
}
1825
}
1826
slider {
1828
min-width: $small_size;
1829
min-height: $small_size;
1830
margin: -4px 0 -4px -4px;
1831
-gtk-outline-radius: 100px;
1832
border-radius: 100px;
1833
background-image: -gtk-gradient(radial,
1834
center center, 0,
1835
center center, 0.5,
1836
to(transparent),
1837
to(transparent));
1838
transition: all $material_duration $material_timing_function, color 0, margin 0;
1839
@include entry(normal);
1841
}
1842
&:hover slider { @include entry(focus); }
1844
&:disabled slider { @include entry(insensitive); }
1846
&:checked slider {
1848
margin: -4px -4px -4px 0;
1849
// background-color: $accent_bg_color;
1850
color: $selected_fg_color;
1851
transition: all $material_duration $material_timing_function, color 0, margin 0, background-image 0;
1852
animation: needs_attention $material_duration $material_timing_function forwards;
1853
}
1854
&:checked:disabled slider { animation: none; }
1856
row:selected & {
1858
}
1859
}
1860
/*************************
1863
* Check and Radio items *
1864
*************************/
1865
// draw regular check and radio items using our PNG assets
1866
// all assets are rendered from assets.svg. never add pngs directly
1867
//selection-mode
1869
@each $s,$as in ('','-selectionmode'),
1870
(':active', '-active-selectionmode'),
1871
(':disabled', '-insensitive-selectionmode'),
1872
(':checked', '-checked-selectionmode'),
1873
(':checked:active', '-checked-active-selectionmode'),
1874
(':disabled:checked', '-checked-insensitive-selectionmode') {
1875
.view.content-view.check#{$s}:not(list) {
1876
-gtk-icon-shadow: $z-depth-1;
1877
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
1878
url("assets/checkbox#{$as}@2.png"));
1879
margin: 8px;
1880
background-color: transparent;
1881
&:hover, &:active { -gtk-icon-shadow: $z-depth-2; }
1883
&:disabled { -gtk-icon-shadow: none; }
1885
}
1886
}
1887
checkbutton.text-button, radiobutton.text-button {
1889
// this is for a nice focus on check and radios text
1890
padding: 2px 0;
1891
outline-offset: 0;
1892
label:not(:only-child) {
1894
&:first-child { margin-left: 4px; }
1895
&:last-child { margin-right: 4px; }
1897
}
1898
}
1899
check,
1901
radio {
1902
min-height: 24px;
1903
min-width: 24px;
1904
-gtk-icon-source: none;
1905
margin: -12px -8px;
1907
padding: 12px;
1908
outline-offset: 4px;
1909
// border-radius: 100%;
1910
@extend %button_basic.flat;
1912
@extend %button_basic.image-button;
1914
color: gtkalpha(currentColor, $enabled_opacity);
1916
&:hover, &:active { color: currentColor; }
1918
&:checked, &:checked:disabled { background-color: transparent; }
1920
&:checked, &:indeterminate { color: $accent_bg_color; }
1922
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1924
&:only-child { margin: -12px; }
1926
.osd & {
1928
}
1929
menu menuitem & {
1931
margin: -16px -16px; // this is a workaround for a menu check/radio size allocation issue
1932
transition: none;
1933
&:not(:checked):not(:indeterminate):hover { color: gtkalpha(currentColor, $enabled_opacity); }
1935
&, &:hover, &:disabled {
1937
background-image: none;
1938
// color: inherit;
1939
// animation: none;
1940
}
1941
}
1942
}
1943
%check,
1945
check {
1946
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1947
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1948
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1950
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1951
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1953
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1954
}
1955
%radio,
1957
radio {
1958
border-image: -gtk-gradient(radial,
1959
center center, 0,
1960
center center, 0.001,
1961
to($accent_bg_color),
1962
to(transparent))
1963
24 / 24px;
1964
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1965
-gtk-recolor(url("assets/radio-unchecked-symbolic.png")));
1966
&:checked {
1968
border-image: -gtk-gradient(radial,
1969
center center, 0,
1970
center center, (10 / 48 / 2),
1971
to($accent_bg_color),
1972
to(transparent))
1973
24 / 24px;
1974
}
1975
&:checked:disabled {
1977
border-image: -gtk-gradient(radial,
1978
center center, 0,
1979
center center, (10 / 48 / 2),
1980
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1981
to(transparent))
1982
24 / 24px;
1983
}
1984
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1986
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1987
&:indeterminate:checked {
1989
border-image: -gtk-gradient(radial,
1990
center center, 0,
1991
center center, 0.001,
1992
to($accent_bg_color),
1993
to(transparent))
1994
24 / 24px;
1995
}
1996
}
1997
// let's animate things
1999
@keyframes check_check {
2000
from { -gtk-icon-transform: rotate(90deg); }
2001
to { -gtk-icon-transform: unset; }
2002
}
2003
@keyframes check_radio {
2005
from { -gtk-icon-transform: scale(0); }
2006
to { -gtk-icon-transform: unset; }
2007
}
2008
@keyframes check_indeterminate {
2010
from { -gtk-icon-transform: unset; }
2011
50% { -gtk-icon-transform: scale(0, 1); }
2012
to { -gtk-icon-transform: unset; }
2013
}
2014
check:not(:indeterminate):checked { animation: check_check $material_duration * 2 $material_timing_function; }
2016
check:not(:indeterminate):checked:active { animation: check_check $material_duration * 2 $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
2018
// radio:not(:indeterminate):checked { animation: check_radio $material_duration * 2 $material_timing_function; }
2020
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_duration * 2 $material_timing_function; }
2022
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_duration * 2 $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
2024
// no animations in menus
2026
menu menuitem {
2027
check:not(:indeterminate):checked,
2028
radio:not(:indeterminate):checked,
2029
check:indeterminate:checked,
2030
radio:indeterminate:checked { animation: none; }
2031
}
2032
treeview.view check,
2034
treeview.view radio {
2035
// margin: -12px;
2036
// padding: 12px;
2037
padding: 0;
2038
&:checked:hover, &:selected:checked:hover { background-image: none; }
2040
& {
2042
color: $secondary_fg_color;
2043
&:hover, &:active { color: $fg_color; }
2045
&:disabled { color: $insensitive_secondary_fg_color; }
2047
&:checked, &:indeterminate { color: $accent_bg_color; }
2049
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2051
}
2052
&:selected {
2054
color: $secondary_selected_fg_color;
2055
&:hover, &:active { color: $selected_fg_color; }
2057
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2059
&:checked, &:indeterminate { color: $accent_bg_color; }
2061
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2063
}
2064
}
2065
treeview.view radio:checked {
2067
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2068
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2069
border-image: none;
2070
}
2071
/************
2074
* GtkScale *
2075
************/
2076
scale {
2077
// sizing
2078
$_marks_lenght: 8px;
2080
$_marks_distance: 8px;
2081
min-height: 12px;
2083
min-width: 12px;
2084
padding: 12px;
2085
// the slider is inside the trough, so to have make it bigger there's a negative margin
2087
slider {
2088
min-height: $small_size;
2089
min-width: $small_size;
2090
margin: -10px;
2091
}
2092
// the backing bit
2094
trough {
2095
outline-offset: 2px;
2096
background-color: $track_color;
2097
&:disabled { color: $insensitive_fg_color; }
2099
}
2100
// the colored part of the backing bit
2102
highlight {
2103
background-color: $accent_bg_color;
2104
&:disabled { background-color: transparent; }
2106
}
2107
// this is another differently styled part of the backing bit, the most relevant use case is for example
2109
// in media player to indicate how much video stream as been cached
2110
fill {
2111
background-color: $track_color;
2112
&:disabled { background-color: transparent; }
2114
}
2115
slider {
2117
// border-radius: 100%;
2118
// background-color: $accent_bg_color;
2119
background-repeat: no-repeat;
2120
background-position: center;
2121
@each $s,$as in ('',''),
2123
(':disabled','-insensitive') {
2124
&#{$s} {
2125
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2126
background-image: -gtk-scaled(url('#{$_url}.png'),
2127
url('#{$_url}@2.png'));
2128
}
2129
}
2130
background-size: calc(100% - 8px);
2132
&:hover { background-size: calc(100% - 4px); }
2134
&:active { background-size: calc(100% - 0px); }
2136
}
2137
// click-and-hold the slider to activate
2139
&.fine-tune {
2140
// to make the slider shrink in fine-tune mode
2141
slider { background-size: calc(100% - 12px); }
2142
}
2143
value { color: gtkalpha(currentColor, $hint_opacity); }
2145
marks {
2147
color: $track_color;
2148
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2150
(bottom, bottom, top),
2151
(top, left, right),
2152
(bottom, right, left) {
2153
&.#{$marks_class} {
2154
margin-#{$marks_margin}: $_marks_distance;
2155
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2156
}
2157
}
2158
}
2159
&.horizontal {
2161
indicator {
2162
min-height: $_marks_lenght;
2163
min-width: 1px;
2164
}
2165
}
2166
&.vertical {
2168
indicator {
2169
min-height: 1px;
2170
min-width: $_marks_lenght;
2171
}
2172
}
2173
// *WARNING* scale with marks madness following
2175
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2177
$suffix: if($variant == 'light', '', '-dark');
2178
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2180
('vertical', 'vert') {
2181
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2182
('scale-has-marks-below', ':first-child:not(:only-child)') {
2183
@each $state, $state_infix in ('', ''),
2184
(':disabled', '-insensitive') {
2185
&.#{$dir_class} {
2186
%#{$marks_infix}-#{$dir_infix},
2187
contents#{$nth_child} > trough > slider {
2188
&#{$state} {
2189
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2190
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2192
}
2193
@if $dir_class == 'horizontal' {
2195
min-height: 30px;
2196
min-width: $small_size;
2197
@if $marks_infix == 'scale-has-marks-above' {
2199
margin-top: -16px;
2200
background-position: center calc(100% - 4px);
2202
&:hover { background-position: center calc(100% - 2px); }
2204
&:active { background-position: center calc(100% - 0px); }
2206
}
2207
@if $marks_infix == 'scale-has-marks-below' {
2209
margin-bottom: -16px;
2210
background-position: center calc(4px);
2212
&:hover { background-position: center calc(2px); }
2214
&:active { background-position: center calc(0px); }
2216
}
2217
}
2218
@if $dir_class == 'vertical' {
2220
min-height: $small_size;
2221
min-width: 30px;
2222
@if $marks_infix == 'scale-has-marks-above' {
2224
margin-left: -16px;
2225
background-position: calc(4px) center;
2227
&:hover { background-position: calc(2px) center; }
2229
&:active { background-position: calc(0px) center; }
2231
}
2232
@if $marks_infix == 'scale-has-marks-below' {
2234
margin-right: -16px;
2235
background-position: calc(100% - 4px) center;
2237
&:hover { background-position: calc(100% - 2px) center; }
2239
&:active { background-position: calc(100% - 0px) center; }
2241
}
2242
}
2243
}
2244
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2246
&.fine-tune contents#{$nth_child} > trough > slider {
2247
// bigger negative margins to make the trough grow here as well
2248
@if $dir_class == 'horizontal' {
2250
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2251
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2253
}
2254
@if $dir_class == 'vertical' {
2256
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2257
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2259
}
2260
}
2261
}
2262
}
2263
}
2264
}
2265
&.color {
2267
min-height: 0;
2268
min-width: 0;
2269
&.horizontal {
2271
padding: 0 0 12px 0;
2272
trough {
2274
padding-bottom: $bar_size;
2275
}
2276
slider {
2278
@extend %scale-has-marks-above-horz;
2279
margin-bottom: -10px - $bar_size;
2281
margin-top: 0;
2282
}
2283
}
2284
&.vertical {
2286
&:dir(ltr) {
2287
padding: 0 0 0 12px;
2288
trough {
2290
padding-left: $bar_size;
2291
}
2292
slider {
2294
@extend %scale-has-marks-below-vert;
2295
margin-left: -10px - $bar_size;
2297
margin-right: 0;
2298
}
2299
}
2300
&:dir(rtl) {
2302
padding: 0 12px 0 0;
2303
trough {
2305
padding-right: $bar_size;
2306
}
2307
slider {
2309
@extend %scale-has-marks-above-vert;
2310
margin-right: -10px - $bar_size;
2312
margin-left: 0;
2313
}
2314
}
2315
}
2316
&.fine-tune {
2318
&.horizontal {
2319
slider {
2320
@extend %scale-has-marks-above-horz-fine-tune;
2321
}
2322
}
2323
&.vertical {
2325
&:dir(ltr) {
2326
slider {
2327
@extend %scale-has-marks-below-vert-fine-tune;
2328
}
2329
}
2330
&:dir(rtl) {
2332
slider {
2333
@extend %scale-has-marks-above-vert-fine-tune;
2334
}
2335
}
2336
}
2337
}
2338
}
2339
}
2340
/*****************
2343
* Progress bars *
2344
*****************/
2345
progressbar {
2346
// sizing
2347
&.horizontal {
2348
trough,
2349
progress { min-height: $bar_size; }
2350
}
2351
&.vertical {
2353
trough,
2354
progress { min-width: $bar_size; }
2355
}
2356
// FIXME: insensitive state missing and some other state should be set probably
2358
color: $tertiary_fg_color;
2359
font-size: smaller;
2360
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2362
progress { background-color: $selected_bg_color; }
2364
&.osd { // progressbar.osd used for epiphany page loading progress
2366
// min-width: $bar_size;
2367
// min-height: $bar_size;
2368
// background-color: transparent;
2369
// trough { background-color: transparent; }
2371
progress {
2373
}
2374
}
2375
}
2376
/*************
2379
* Level Bar *
2380
*************/
2381
levelbar {
2382
block {
2383
min-width: $medium_size;
2384
min-height: $bar_size;
2385
}
2386
&.vertical block {
2388
min-width: $bar_size;
2389
min-height: $medium_size;
2390
}
2391
trough {
2393
padding: 2px;
2394
border-radius: 2px;
2395
@include entry(normal);
2397
&:disabled { @include entry(insensitive); }
2399
}
2400
&.horizontal.discrete block { margin: 0 1px; }
2402
&.vertical.discrete block { margin: 1px 0; }
2404
&.horizontal.discrete trough { padding: 2px 1px; }
2406
&.vertical.discrete trough { padding: 1px 2px; }
2408
block {
2410
&.low {
2411
background-color: $warning_color;
2412
}
2413
&.high {
2415
background-color: $selected_bg_color;
2416
}
2417
&.full {
2419
background-color: $success_color;
2420
}
2421
&.empty {
2423
background-color: $track_color;
2424
color: $insensitive_fg_color;
2425
}
2426
}
2427
}
2428
/****************
2431
* Print dialog *
2432
*****************/
2433
printdialog {
2434
paper {
2435
padding: 0;
2436
border: 1px solid $borders_color;
2437
background: $base_color;
2438
color: $fg_color;
2439
}
2440
.dialog-action-box { margin: 12px; }
2442
}
2443
/**********
2446
* Frames *
2447
**********/
2448
frame > border,
2449
.frame {
2450
margin: 0;
2451
padding: 0;
2452
border: 1px solid $borders_color;
2453
border-radius: 0;
2454
box-shadow: none;
2455
&.flat { border-style: none; }
2457
}
2458
actionbar > revealer > box {
2460
padding: $container_padding;
2461
border-top: 1px solid $borders_color;
2462
}
2463
scrolledwindow {
2465
viewport.frame { // avoid double borders when viewport inside scrolled window
2466
border-style: none;
2467
}
2468
// This is used when content is touch-dragged past boundaries.
2470
// draws a box on top of the content, the size changes programmatically.
2471
overshoot {
2472
&.top { @include overshoot(top); }
2473
&.bottom { @include overshoot(bottom); }
2475
&.left { @include overshoot(left); }
2477
&.right { @include overshoot(right); }
2479
}
2480
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2482
undershoot {
2483
&.top { @include undershoot(top); }
2484
&.bottom { @include undershoot(bottom); }
2486
&.left { @include undershoot(left); }
2488
&.right { @include undershoot(right); }
2490
}
2491
junction { // the small square between two scrollbars
2493
border-style: solid none none solid;
2494
border-width: 1px;
2495
border-color: $borders_color;
2496
background-color: $base_color;
2497
&:dir(rtl) { border-style: solid solid none none; }
2499
}
2500
}
2501
//vbox and hbox separators
2503
separator {
2504
min-width: 1px;
2505
min-height: 1px;
2506
background: $borders_color;
2507
}
2508
/*********
2511
* Lists *
2512
*********/
2513
list {
2514
border-color: $borders_color;
2515
background-color: $base_color;
2516
row { padding: 2px; }
2518
}
2519
row {
2521
&:hover { transition: none; }
2522
&.activatable {
2524
background-image: radial-gradient(circle farthest-corner at center,
2525
gtkalpha(currentColor, 0) 100%,
2526
transparent 0%),
2527
image(gtkalpha(currentColor, 0));
2528
&:hover {
2530
background-image: radial-gradient(circle farthest-corner at center,
2531
gtkalpha(currentColor, 0) 100%,
2532
transparent 0%),
2533
image(gtkalpha(currentColor, 0.05));
2534
}
2535
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2537
&:active {
2538
transition: all $material_duration $material_timing_function, color 0, background-image 0;
2539
animation: row_ripple_effect $material_duration $material_timing_function forwards;
2540
}
2541
}
2542
&:selected { @extend %selected_items; }
2544
}
2545
/*********************
2548
* App Notifications *
2549
*********************/
2550
.app-notification,
2551
.app-notification.frame {
2552
@extend %osd;
2553
@extend toolbar.osd;
2555
margin: 8px;
2557
border { border: none; }
2559
}
2560
/*************
2563
* Expanders *
2564
*************/
2565
expander {
2566
arrow {
2567
min-width: 16px;
2568
min-height: 16px;
2569
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2570
-gtk-icon-transform: rotate(-90deg);
2571
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2573
&:checked { -gtk-icon-transform: unset; }
2575
color: $secondary_fg_color;
2577
&:hover, &:active { color: $fg_color; }
2579
&:disabled { color: $insensitive_secondary_fg_color; }
2581
&:selected {
2583
color: $secondary_selected_fg_color;
2584
&:hover, &:active { color: $selected_fg_color; }
2586
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2588
}
2589
}
2590
}
2591
/************
2594
* Calendar *
2595
***********/
2596
calendar {
2597
padding: 1px;
2598
border: 1px solid $borders_color;
2599
color: $fg_color;
2600
&:disabled { color: $insensitive_fg_color; }
2602
&:selected {
2604
@extend %selected_items;
2605
border-radius: 2px + 1px;
2607
}
2608
&.header {
2610
border: none;
2611
border-bottom: 1px solid $borders_color;
2612
border-radius: 0;
2613
}
2614
&.button { @extend %button_basic.flat; }
2616
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2618
&.highlight {
2620
color: gtkalpha(currentColor, $hint_opacity);
2621
font-weight: 500;
2622
}
2623
}
2624
/***********
2627
* Dialogs *
2628
***********/
2629
messagedialog { // Message Dialog styling
2630
&.background { background-color: $light_color; }
2631
.titlebar {
2633
min-height: $small_size;
2634
border-style: none;
2635
// box-shadow: inset 0 1px $highlight_color;
2636
background-color: $light_color;
2637
}
2638
&.csd { // rounded bottom border styling for csd version
2640
&.background {
2641
// bigger radius for better antialiasing
2642
border-bottom-left-radius: 2px;
2643
border-bottom-right-radius: 2px;
2644
}
2645
.dialog-action-area button {
2647
padding: 8px 16px;
2648
border-top: 1px solid $borders_color;
2649
border-radius: 0;
2650
@extend %button_basic.flat;
2652
&:first-child{ border-bottom-left-radius: 2px; }
2654
&:last-child { border-bottom-right-radius: 2px; }
2656
}
2657
}
2658
}
2659
filechooser {
2661
.dialog-action-box { border-top: 1px solid $borders_color; }
2662
#pathbarbox { border-bottom: 1px solid $borders_color; }
2664
}
2665
filechooserbutton:drop(active) {
2667
box-shadow: none;
2668
}
2669
/***********
2672
* Sidebar *
2673
***********/
2674
.sidebar {
2675
border-style: none;
2676
background-color: $secondary_base_color;
2677
@at-root %sidebar_left,
2679
&:dir(ltr),
2680
&.left,
2681
&.left:dir(rtl) {
2682
border-right: 1px solid $borders_color;
2683
border-left-style: none;
2684
}
2685
@at-root %sidebar_right
2687
&:dir(rtl),
2688
&.right {
2689
border-left: 1px solid $borders_color;
2690
border-right-style: none;
2691
}
2692
list { background-color: transparent; }
2694
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2696
}
2697
stacksidebar {
2699
&.sidebar {
2700
&:dir(ltr),
2701
&.left,
2702
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2703
&:dir(rtl),
2705
&.right { list { @extend %sidebar_right; }}
2706
}
2707
row {
2709
padding: 10px 4px;
2710
> label {
2712
padding-left: 6px;
2713
padding-right: 6px;
2714
}
2715
&.needs-attention > label { @extend %needs_attention; }
2717
}
2718
}
2719
/****************
2722
* File chooser *
2723
****************/
2724
placessidebar {
2725
> viewport.frame { border-style: none; }
2726
row {
2728
// Needs overriding of the GtkListBoxRow padding
2729
min-height: 32px;
2730
padding: 0;
2731
// Using margins/padding directly in the SidebarRow
2733
// will make the animation of the new bookmark row jump
2734
> revealer { padding: 0 12px; }
2735
&:selected { color: $selected_fg_color; }
2737
&:disabled { color: $insensitive_fg_color; }
2739
image.sidebar-icon {
2741
opacity: $hint_opacity; // dim the device icons
2742
&:dir(ltr) { padding-right: 8px; }
2744
&:dir(rtl) { padding-left: 8px; }
2745
}
2746
label.sidebar-label {
2748
&:dir(ltr) { padding-right: 2px; }
2749
&:dir(rtl) { padding-left: 2px; }
2750
}
2751
@at-root button.sidebar-button {
2753
@extend %button_basic.flat;
2754
min-height: $small_size;
2756
min-width: $small_size;
2757
margin-top: 0;
2758
margin-bottom: 0;
2759
padding: 0;
2760
border-radius: 100%;
2761
-gtk-outline-radius: 100%;
2762
row:selected & { @extend %button_selected.flat; }
2764
}
2765
&.sidebar-placeholder-row {
2767
min-height: 2px;
2768
padding: 0 8px;
2769
background-image: image($accent_bg_color);
2770
background-clip: content-box;
2771
}
2772
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2774
&:drop(active):not(:disabled) {
2776
box-shadow: inset 0 0 0 2px $accent_bg_color;
2777
&:selected {
2779
// background-color: $accent_bg_color;
2780
// color: $selected_fg_color;
2781
}
2782
}
2783
}
2784
}
2785
placesview {
2787
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2788
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2790
// this selects the "connect to server" label
2792
> actionbar > revealer > box > label {
2793
padding-left: 8px;
2794
padding-right: 8px;
2795
}
2796
}
2797
/*********
2800
* Paned *
2801
*********/
2802
paned {
2803
> separator {
2804
min-width: 1px;
2805
min-height: 1px;
2806
-gtk-icon-source: none; // defeats the ugly default handle decoration
2807
border-style: none; // just to be sure
2808
background-color: transparent;
2809
// workaround, using background istead of a border since the border will get rendered twice (?)
2810
background-image: image($borders_color);
2811
background-size: 1px 1px;
2812
&.wide {
2814
min-width: 6px;
2815
min-height: 6px;
2816
background-color: $bg_color;
2817
background-image: image($borders_color), image($borders_color);
2818
background-size: 1px 1px, 1px 1px;
2819
}
2820
}
2821
&.horizontal > separator {
2823
background-repeat: repeat-y;
2824
&:dir(ltr) {
2826
margin: 0 -8px 0 0;
2827
padding: 0 8px 0 0;
2828
background-position: left;
2829
}
2830
&:dir(rtl) {
2832
margin: 0 0 0 -8px;
2833
padding: 0 0 0 8px;
2834
background-position: right;
2835
}
2836
&.wide {
2838
margin: 0;
2839
padding: 0;
2840
background-repeat: repeat-y, repeat-y;
2841
background-position: left, right;
2842
}
2843
}
2844
&.vertical > separator {
2846
margin: 0 0 -8px 0;
2847
padding: 0 0 8px 0;
2848
background-repeat: repeat-x;
2849
background-position: top;
2850
&.wide {
2852
margin: 0;
2853
padding: 0;
2854
background-repeat: repeat-x, repeat-x;
2855
background-position: bottom, top;
2856
}
2857
}
2858
}
2859
/**************
2862
* GtkInfoBar *
2863
**************/
2864
infobar { border-style: none; }
2865
.info { background-color: $info_bg_color; }
2867
.question { background-color: $question_bg_color; }
2869
.warning { background-color: $warning_bg_color; }
2871
.error { background-color: $error_bg_color; }
2873
.info,
2875
.question,
2876
.warning,
2877
.error {
2878
color: $selected_fg_color;
2879
button { @extend %button_selected; }
2881
label:selected {
2883
}
2884
*:link { @extend %link_selected; }
2886
}
2887
/************
2890
* Tooltips *
2891
************/
2892
tooltip {
2893
&.background {
2894
// background-color needs to be set this way otherwise it gets drawn twice
2895
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2896
background-color: scale-alpha($base_color, $higher_opacity);
2897
}
2898
// @extend %osd;
2900
// padding: 4px; /* not working */
2902
border-radius: 2px;
2903
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2904
// FIXME: we need a border or tooltips vanish on black background.
2906
decoration { background-color: transparent; }
2907
label {
2909
min-height: 32px - 6px * 2;
2910
padding: 4px 12px - 6px;
2911
}
2912
* { // Yeah this is ugly
2914
padding: 0;
2915
background-color: transparent;
2916
color: inherit;
2917
}
2918
}
2919
/*****************
2922
* Color Chooser *
2923
*****************/
2924
colorswatch {
2925
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2926
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2927
// applied to the overlay box.
2928
// base color corners rounding
2930
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2931
// sports a bigger radius.
2932
// nth-child is needed by the custom color strip.
2933
&.top {
2935
border-top-left-radius: $material_radius + 0.5px;
2936
border-top-right-radius: $material_radius + 0.5px;
2937
overlay {
2939
border-top-left-radius: $material_radius;
2940
border-top-right-radius: $material_radius;
2941
}
2942
}
2943
&.bottom {
2945
border-bottom-left-radius: $material_radius + 0.5px;
2946
border-bottom-right-radius: $material_radius + 0.5px;
2947
overlay {
2949
border-bottom-left-radius: $material_radius;
2950
border-bottom-right-radius: $material_radius;
2951
}
2952
}
2953
&.left,
2955
&:first-child:not(.top) {
2956
border-top-left-radius: $material_radius + 0.5px;
2957
border-bottom-left-radius: $material_radius + 0.5px;
2958
overlay {
2960
border-top-left-radius: $material_radius;
2961
border-bottom-left-radius: $material_radius;
2962
}
2963
}
2964
&.right,
2966
&:last-child:not(.bottom) {
2967
border-top-right-radius: $material_radius + 0.5px;
2968
border-bottom-right-radius: $material_radius + 0.5px;
2969
overlay {
2971
border-top-right-radius: $material_radius;
2972
border-bottom-right-radius: $material_radius;
2973
}
2974
}
2975
&.dark overlay { color: white; }
2977
&.light overlay { color: scale-alpha(black, 0.8); }
2979
&.dark { color: white; } // for focus ring
2981
&.light { color: scale-alpha(black, 0.8); } // for focus ring
2983
&:drop(active) {
2985
box-shadow: none;
2986
&.light overlay {
2988
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
2989
}
2990
&.dark overlay {
2992
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
2993
}
2994
}
2995
overlay {
2997
box-shadow: $z-depth-1;
2998
&:hover { box-shadow: $z-depth-2; }
3000
}
3001
&#add-color-button {
3003
border-radius: $material_radius $material_radius 0 0;
3004
color: white; // for focus ring
3005
&:only-child { border-radius: $material_radius; }
3007
overlay {
3009
background-image: linear-gradient(to right,
3010
$error_bg_color 25%,
3011
$warning_bg_color 25%, $warning_bg_color 50%,
3012
$info_bg_color 50%, $info_bg_color 75%,
3013
$question_bg_color 75%);
3014
color: white;
3015
}
3016
}
3017
&:disabled {
3019
opacity: $disabled_opacity;
3020
overlay { box-shadow: none; }
3022
}
3023
row:selected & {
3025
}
3026
&#editor-color-sample {
3028
border-radius: $material_radius + 0.5px;
3029
overlay { border-radius: $material_radius; }
3031
// overlay:hover { box-shadow: $z-depth-1; }
3033
}
3034
}
3035
// colorscale popup
3037
colorchooser .popover.osd {
3038
border-radius: 2px;
3039
box-shadow: $z-depth-2;
3040
background-color: $base_color;
3041
&:backdrop { box-shadow: $z-depth-1; }
3043
spinbutton:not(.vertical) { @extend %entry.flat; }
3045
}
3046
/********
3049
* Misc *
3050
********/
3051
//content view (grid/list)
3052
.content-view {
3053
background-color: $bg_color;
3054
// &:hover { -gtk-icon-effect: highlight; }
3056
rubberband { @extend rubberband; }
3058
}
3059
.scale-popup {
3061
.osd & { @extend %osd; }
3062
.osd & button.flat { //FIXME: quick hack, redo properly
3064
}
3065
button { // +/- buttons on GtkVolumeButton popup
3067
}
3068
}
3069
/**********************
3072
* Window Decorations *
3073
*********************/
3074
decoration {
3075
border-radius: 2px 2px 0 0;
3076
box-shadow: $z-depth-4, 0 14px 14px transparent;
3077
transition: none;
3078
// FIXME rationalize shadows
3080
// this is used for the resize cursor area
3082
margin: 8px;
3083
&:backdrop {
3085
// the transparent shadow here is to enforce that the shadow extents don't
3086
// change when we go to backdrop, to prevent jumping windows.
3087
// The biggest shadow should be in the same order then in the active state
3088
// or the jumping will happen during the transition.
3089
box-shadow: $z-depth-2, 0 14px 14px transparent;
3090
transition: all $material_duration $material_timing_function, color 0;
3091
}
3092
.fullscreen &,
3094
.tiled & { border-radius: 0; }
3095
.popup & { box-shadow: none; }
3097
// server-side decorations as used by mutter
3099
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3100
.csd.popup & {
3102
border-radius: 2px;
3103
box-shadow: $z-depth-2;
3104
}
3105
tooltip.csd & {
3107
border-radius: 2px;
3108
box-shadow: $z-depth-2;
3109
}
3110
messagedialog.csd & {
3112
border-radius: 2px;
3113
// box-shadow: $z-depth-4, 0 14px 14px transparent;
3114
// &:backdrop { box-shadow: $z-depth-2, 0 14px 14px transparent; }
3116
}
3117
.solid-csd & {
3119
margin: 4px;
3120
// border: solid 1px $borders_color;
3121
border-radius: 0;
3122
box-shadow: none;
3123
background-color: $bg_color;
3124
}
3125
}
3126
// Window Close button
3128
button.titlebutton {
3129
// @extend %button_basic.flat;
3130
@extend %button_basic.image-button;
3132
.selection-mode & {
3134
}
3135
}
3136
// catch all extend :)
3139
%selected_items {
3141
background-color: $selected_bg_color;
3142
@at-root %nobg_selected_items, & {
3144
color: $selected_fg_color;
3145
&:disabled { color: $insensitive_selected_fg_color; }
3147
}
3148
}
3149
.monospace { font: Monospace; }
3151
/**********************
3154
* Touch Copy & Paste *
3155
*********************/
3156
//touch selection handlebars for the Popover.osd above
3157
cursor-handle {
3158
border-radius: 100px;
3159
background-color: $accent_bg_color;
3160
background-image: none;
3161
&.top:dir(ltr), &.bottom:dir(rtl) {
3163
padding-left: 6px;
3164
border-top-right-radius: 0;
3165
}
3166
&.bottom:dir(ltr), &.top:dir(rtl) {
3168
padding-right: 6px;
3169
border-top-left-radius: 0;
3170
}
3171
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3173
-GtkWidget-text-handle-width: 24;
3174
-GtkWidget-text-handle-height: 30;
3175
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3177
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3178
url('#{$_url}@2.png'));
3179
}
3180
}
3181
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3183
button.circular { // FIXME: aggregate to buttons
3185
border-radius: 100px;
3186
-gtk-outline-radius: 100px;
3187
label { padding: 0; }
3189
}
3190
// shortcut window keys
3192
.keycap {
3193
min-width: 28px - 8px * 2;
3194
min-height: 28px - 2px;
3195
margin-top: 2px;
3196
padding-bottom: 2px;
3197
padding-left: 8px;
3198
padding-right: 8px;
3199
border: solid 1px $borders_color;
3201
border-radius: 2px + 1px;
3202
box-shadow: inset 0 -2px $borders_color;
3203
background-color: $base_color;
3204
color: $fg_color;
3205
font-size: smaller;
3206
}
3207
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3209
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3210
caret-color: $accent_bg_color;
3211
}
3212
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3214
stackswitcher button.circular,
3216
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3217
min-width: $medium_size;
3218
min-height: $medium_size;
3219
padding: 0;
3220
}
3221