ASCII text
1
$asset_suffix: if($variant=='dark', '-dark', '');
2
$extra_background_clip: if($variant == 'light', padding-box, border-box);
3
$small_size: 24px;
5
$medium_size: 36px;
6
$large_size: 48px;
7
$bar_size: 4px;
8
$menuitem_size: 28px;
9
$container_padding: 6px;
11
$material_radius: 2px;
12
$material_duration: 0.3s;
13
$material_timing_function: cubic-bezier(0, 0, 0.2, 1);
14
// FIXME: color's transition is too slow
15
$material_transition: all $material_duration $material_timing_function, color 0;
16
// fallback
18
$header_borders_color: mix(#000000, $dark_color, percentage(alpha($borders_color)));
19
* {
21
padding: 0;
22
background-clip: padding-box;
23
-GtkToolButton-icon-spacing: 4;
25
-GtkTextView-error-underline-color: $error_color;
26
// The size for scrollbars. The slider is 2px smaller, but we keep it
28
// up so that the whole area is sensitive to button presses for the
29
// slider. The stepper button is larger in both directions, the slider
30
// only in the width
31
-GtkScrolledWindow-scrollbar-spacing: 0;
33
-GtkToolItemGroup-expander-size: 11;
35
-GtkTreeView-expander-size: 11;
36
-GtkTreeView-horizontal-separator: 4;
38
-GtkWidget-text-handle-width: 24;
40
-GtkWidget-text-handle-height: 24;
41
-GtkDialog-button-spacing: 4;
43
-GtkDialog-action-area-border: 0;
44
// We use the outline properties to signal the focus properties
46
// to the adwaita engine: using real CSS properties is faster,
47
// and we don't use any outlines for now.
48
outline-style: solid;
50
outline-width: 2px;
51
outline-color: $track_color;
52
outline-offset: -4px;
53
-gtk-outline-radius: 2px;
54
-gtk-secondary-caret-color: $selected_bg_color;
56
}
57
/***************
60
* Base States *
61
***************/
62
.background {
63
background-color: $bg_color;
64
color: $fg_color;
65
}
66
/*
68
These wildcard seems unavoidable, need to investigate.
69
Wildcards are bad and troublesome, use them with care,
70
or better, just don't.
71
Everytime a wildcard is used a kitten dies, painfully.
72
*/
73
*:disabled { -gtk-icon-effect: dim; }
75
.gtkstyle-fallback {
77
background-color: $bg_color;
78
color: $fg_color;
79
&:hover {
81
background-color: darken($bg_color, 5%);
82
color: $fg_color;
83
}
84
&:active {
86
background-color: darken($bg_color, 10%);
87
color: $fg_color;
88
}
89
&:disabled {
91
background-color: $bg_color;
92
color: $insensitive_fg_color;
93
}
94
&:selected {
96
background-color: $selected_bg_color;
97
color: $selected_fg_color;
98
}
99
}
100
.view,
102
%view {
103
@extend row.activatable;
104
background-color: $base_color;
106
color: $fg_color;
107
&:hover, &:active, &:selected { border-radius: 2px; }
109
&:disabled {
111
// background-color: $secondary_base_color;
112
color: $insensitive_fg_color;
113
}
114
&:selected { @extend %selected_items; }
116
}
117
.view,
119
textview {
120
text {
121
// @extend %view;
122
background-color: $base_color;
124
color: $fg_color;
125
&:disabled {
127
// background-color: $secondary_base_color;
128
color: $insensitive_fg_color;
129
}
130
selection { @extend %selected_items; }
132
}
133
}
134
textview border {
136
background-color: $secondary_base_color;
137
background-image: image($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
box-shadow: none;
356
background-color: $base_color;
357
&, &:focus { border-image: none; }
359
}
360
}
361
/***********
364
* Buttons *
365
***********/
366
// stuff for .needs-attention
367
@keyframes needs_attention {
368
from {
369
background-image: -gtk-gradient(radial,
370
center center, 0,
371
center center, 0.001,
372
to($accent_bg_color),
373
to(transparent));
374
}
375
to {
377
background-image: -gtk-gradient(radial,
378
center center, 0,
379
center center, 0.5,
380
to($accent_bg_color),
381
to(transparent));
382
}
383
}
384
%button,
386
button {
387
@at-root %button_basic, & {
388
min-height: 24px;
389
min-width: 16px;
390
padding: 6px 10px;
391
border-radius: 2px;
392
font-weight: 500;
393
@include button(normal);
395
&:hover { @include button(hover); }
397
&:active { @include button(active); }
399
&:disabled { @include button(insensitive); }
401
&:checked { @include button(checked); }
403
&:checked:disabled { @include button(checked-insensitive); }
405
&.flat {
407
@include button(flat-normal);
408
&:hover { @include button(flat-hover); }
410
&:active { @include button(flat-active); }
412
&:disabled { @include button(flat-insensitive); }
414
&:checked { @include button(flat-checked); }
416
&:checked:disabled { @include button(flat-checked-insensitive); }
418
}
419
&.image-button {
421
min-width: 24px;
422
padding: 6px;
423
-gtk-outline-radius: 100px;
424
border-radius: 100px;
425
}
426
&.text-button {
428
padding-left: 16px;
429
padding-right: 16px;
430
}
431
&.text-button.image-button {
433
padding-left: 10px;
434
padding-right: 10px;
435
-gtk-outline-radius: 2px;
436
border-radius: 2px;
437
label {
439
&:last-child { padding-left: 2px; padding-right: 6px; }
440
&:first-child { padding-left: 6px; padding-right: 2px; }
441
}
442
}
443
.linked > & { @extend %linked; }
445
.linked.vertical > & { @extend %linked_vertical; }
447
.linked > &.flat,
449
.linked.vertical > &.flat {
450
border-radius: 2px;
451
&.image-button {
453
-gtk-outline-radius: 100px;
454
border-radius: 100px;
455
}
456
&.text-button.image-button {
458
-gtk-outline-radius: 2px;
459
border-radius: 2px;
460
}
461
}
462
&:drop(active) {
464
// box-shadow: inset 0 0 0 2px $accent_bg_color;
465
}
466
}
467
@at-root %button_selected, row:selected & {
469
&:disabled { color: $insensitive_secondary_selected_fg_color; }
470
&.flat {
472
color: $secondary_selected_fg_color;
473
&:hover, &:active { color: $selected_fg_color; }
475
&:disabled { color: $insensitive_secondary_selected_fg_color; }
477
}
478
}
479
separator {
481
min-width: 0;
482
min-height: 0;
483
background: transparent;
484
}
485
// big standalone buttons like in Documents pager
487
&.osd {
488
padding: 12px 16px;
489
&.image-button { padding: 12px; }
491
&:disabled { opacity: 0; }
493
}
494
//overlay / OSD style
496
@at-root %osd_button,
497
.osd & {
498
}
499
// Suggested and Destructive Action buttons
501
@each $b_type, $b_color in (suggested-action, $suggested_color),
502
(destructive-action, $destructive_color) {
503
&.#{$b_type} {
504
background-color: $b_color;
505
color: $selected_fg_color;
506
// @include button(normal, $b_color, white);
508
// &:hover { @include button(hover, $b_color, white); }
510
// &:active, &:checked { @include button(active, $b_color, white); }
512
&:disabled { @include button(insensitive, $b_color, white); }
514
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
516
&.flat {
518
background-color: transparent;
519
color: $b_color;
520
// @include button(flat-normal, $b_color, white);
522
// &:hover { @include button(flat-hover, $b_color, white); }
524
// &:active, &:checked { @include button(flat-active, $b_color, white); }
526
&:disabled { @include button(flat-insensitive, $b_color, white); }
528
}
529
.osd & {
531
}
532
}
533
}
534
.stack-switcher > & {
536
// to position the needs attention dot, padding is added to the button
537
// child, a label needs just lateral padding while an icon needs vertical
538
// padding added too.
539
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
541
> label {
543
padding-left: 6px; // label padding
544
padding-right: 6px; //
545
}
546
> image {
548
padding-left: 6px; // image padding
549
padding-right: 6px; //
550
padding-top: 3px; //
551
padding-bottom: 3px; //
552
}
553
&.text-button {
555
// compensate text-button paddings
556
padding-left: 10px;
557
padding-right: 10px;
558
}
559
&.image-button {
561
// we want image buttons to have a 1:1 aspect ratio, so compensation
562
// of the padding added to the GtkImage is needed
563
padding-left: 4px;
564
padding-right: 4px;
565
}
566
&.needs-attention {
568
> label,
569
> image { @extend %needs_attention; }
570
&:checked {
572
> label,
573
> image {
574
animation: none;
575
background-image: none;
576
}
577
}
578
}
579
}
580
// inline-toolbar buttons
582
.inline-toolbar & {
583
@extend %button_basic.flat;
584
&:not(.text-button) { @extend %button_basic.image-button; }
586
}
587
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
589
}
590
%needs_attention {
592
animation: needs_attention $material_duration $material_timing_function forwards;
593
background-repeat: no-repeat;
594
background-position: right 3px;
595
background-size: 6px 6px;
596
&:dir(rtl) { background-position: left 3px; }
598
}
599
// all the following is for the +|- buttons on inline toolbars, that way
601
// should really be deprecated...
602
.inline-toolbar toolbutton > button { // redefining the button look is
603
// needed since those are flat...
604
}
605
// More inline toolbar buttons
607
toolbar.inline-toolbar toolbutton {
608
// > button.flat { @extend %linked_middle; }
609
// &:first-child > button.flat { @extend %linked:first-child; }
611
// &:last-child > button.flat { @extend %linked:last-child; }
613
// &:only-child > button.flat { @extend %linked:only-child; }
615
}
616
%linked_middle {
618
border-radius: 0;
619
}
620
%linked {
622
-gtk-outline-radius: 2px;
623
@extend %linked_middle;
625
&:first-child {
627
border-top-left-radius: 2px;
628
border-bottom-left-radius: 2px;
629
}
630
&:last-child {
632
border-top-right-radius: 2px;
633
border-bottom-right-radius: 2px;
634
}
635
&:only-child {
637
border-radius: 2px;
638
}
639
}
640
%linked_vertical_middle {
642
border-radius: 0;
643
}
644
%linked_vertical{
646
-gtk-outline-radius: 2px;
647
@extend %linked_vertical_middle;
649
&:first-child {
651
border-top-left-radius: 2px;
652
border-top-right-radius: 2px;
653
}
654
&:last-child {
656
border-bottom-left-radius: 2px;
657
border-bottom-right-radius: 2px;
658
}
659
&:only-child {
661
border-radius: 2px;
662
}
663
}
664
/* menu buttons */
666
modelbutton.flat,
667
.menuitem.button.flat {
668
min-height: $menuitem_size;
669
padding-left: 8px;
670
padding-right: 8px;
671
border-radius: 2px;
672
color: inherit;
673
@extend %button_basic.flat;
675
&:selected { @extend %selected_items; }
677
check,
679
radio {
680
&, &:hover { background-image: none; }
681
&:active { animation: none; }
683
}
684
check:not(:indeterminate):checked:active { animation: check_check $material_duration $material_timing_function; }
686
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_duration $material_timing_function; }
688
// FIXME: remove the following when the checks/radios rewrite lands
690
check:last-child,
691
radio:last-child { margin-left: 8px; }
692
check:first-child,
694
radio:first-child { margin-right: 8px; }
695
}
696
modelbutton.flat arrow {
698
background: none;
699
&:hover { background: none; }
701
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
703
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
705
}
706
button.color {
708
min-height: $small_size;
709
min-width: $small_size;
710
padding: $container_padding;
711
colorswatch:only-child {
713
// &, overlay { border-radius: 0; }
714
}
715
}
716
/*********
719
* Links *
720
*********/
721
*:link {
722
&, &:hover, &:active { color: $link_color; }
723
&:visited {
725
&, &:hover, &:active { color: $link_visited_color; }
726
}
727
@at-root %link_selected,
729
&:selected,
730
*:selected & { color: $selected_fg_color; }
731
}
732
button:link,
734
button:visited {
735
@extend *:link;
736
> label { text-decoration-line: underline; }
738
}
739
/*****************
741
* GtkSpinButton *
742
*****************/
743
spinbutton {
744
&:not(.vertical) {
745
// in this horizontal configuration, the whole spinbutton
746
// behaves as the entry, so we extend the entry styling
747
// and nuke the style on the internal entry
748
@extend %entry;
749
padding: 0;
751
%spinbutton_entry,
753
entry {
754
min-width: $large_size - 16px;
755
// reset all the other props since the spinbutton node is styled here
756
margin: 0;
757
border-image: none;
758
border-radius: 0;
759
box-shadow: none;
760
background-color: transparent;
761
}
762
button {
764
min-height: $small_size;
765
min-width: $small_size;
766
// margin: $container_padding;
767
padding: 0;
768
border: solid $container_padding transparent;
769
@extend %button_basic.flat;
771
@extend %button_basic.image-button;
773
&.up { margin-left: -$container_padding / 2; }
775
&.down { margin-right: -$container_padding / 2; }
777
}
778
}
779
// OSD horizontal
781
.osd &:not(.vertical) {
782
button {
783
}
784
}
785
// Vertical
787
&.vertical {
788
// in the vertical configuration, we treat the spinbutton
789
// as a box, and tweak the style of the entry in the middle
790
// so that it's linked
791
// FIXME: this should not be set at all, but otherwise it gets the wrong
793
// color
794
&:disabled { color: $insensitive_fg_color; }
795
&:drop(active) {
797
box-shadow: none;
798
}
799
entry {
801
min-height: $medium_size;
802
min-width: $large_size;
803
padding: 0;
804
}
805
button {
807
min-height: $medium_size;
808
min-width: $large_size;
809
padding: 0;
810
@extend %button_basic.flat;
812
&.up { border-radius: 2px 2px 0 0; }
814
&.down { border-radius: 0 0 2px 2px; }
816
}
817
}
818
// OSD vertical
820
.osd &.vertical button:first-child {
821
}
822
// Misc
824
treeview &:not(.vertical) {
825
min-height: 0;
826
border-style: none;
827
border-radius: 0;
828
entry {
830
min-height: 0;
831
padding: 1px 2px;
832
}
833
}
834
}
835
/**************
838
* ComboBoxes *
839
**************/
840
combobox {
841
arrow {
842
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
843
min-height: 16px;
844
min-width: 16px;
845
}
846
menu,
848
.menu {
849
padding: 2px 0;
850
menuitem {
852
min-height: $medium_size;
853
padding: 0 10px;
854
}
855
}
856
&.linked {
858
button:nth-child(2) {
859
&:dir(ltr) { @extend %linked:last-child; }
860
&:dir(rtl) { @extend %linked:first-child; }
861
}
862
}
863
&:drop(active) { // FIXME: untested
865
box-shadow: none;
866
// button.combo { @extend %button_basic:drop(active); }
868
}
869
}
870
.linked > combobox > box > button.combo {
872
// the combo is a composite widget so the way we do button linking doesn't
873
// work, special case needed. See
874
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
875
&:dir(ltr),
877
&:dir(rtl) { @extend %linked_middle; } // specificity bump
878
}
879
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
881
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
882
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
883
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
885
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
886
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
887
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
888
/************
891
* Toolbars *
892
************/
893
toolbar {
894
-GtkWidget-window-dragging: true;
895
padding: $container_padding / 2;
896
background-color: $bg_color;
897
// on OSD
899
.osd & { background-color: transparent; }
900
// stand-alone OSD toolbars
902
&.osd {
903
transition: box-shadow $material_duration $material_timing_function;
904
padding: $container_padding;
905
border-radius: 2px;
906
box-shadow: $z-depth-2;
907
background-color: $base_color;
908
&:backdrop { box-shadow: $z-depth-1; }
910
&.left,
912
&.right,
913
&.top,
914
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
915
button { @extend %button_basic.flat; }
917
}
918
// toolbar separators
920
&.horizontal separator { margin: $container_padding / 2; }
921
&.vertical separator { margin: $container_padding / 2; }
922
&:not(.inline-toolbar):not(.osd) {
924
scale,
925
entry,
926
spinbutton,
927
button { margin: $container_padding / 2; }
928
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
930
}
931
}
932
//searchbar, location-bar & inline-toolbar
934
.inline-toolbar {
935
padding: $container_padding;
936
border-style: solid;
937
border-width: 0 1px 1px;
938
border-color: $borders_color;
939
background-color: $secondary_base_color;
940
}
941
searchbar,
943
.location-bar {
944
padding: $container_padding;
945
border-style: solid;
946
border-width: 0 0 1px;
947
border-color: $borders_color;
948
background-color: $dark_color;
949
background-clip: border-box;
950
}
951
/***************
954
* Header bars *
955
***************/
956
%titlebar,
957
headerbar {
958
min-height: $large_size;
959
padding: 0 $container_padding;
960
border-width: 0 0 1px;
961
border-style: solid;
962
border-color: $borders_color;
963
box-shadow: inset 0 1px $highlight_color;
964
background-color: $dark_color;
965
background-clip: border-box;
966
&:backdrop {
968
// background-color: $dark_color;
969
}
970
.title {
972
padding-left: 12px;
973
padding-right: 12px;
974
font-weight: bold;
975
}
976
.subtitle {
978
padding-left: 12px;
979
padding-right: 12px;
980
font-size: smaller;
981
@extend .dim-label;
983
}
984
button:not(.suggested-action):not(.destructive-action) {
986
@extend %button_basic.flat;
987
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
989
$selected_bg_color 0%,
990
transparent 0%)
991
0 0 0 / 0 0 0px;
992
&:checked {
994
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
995
$selected_bg_color 100%,
996
transparent 0%)
997
0 0 2 / 0 0 2px;
998
background-color: transparent;
999
color: $fg_color;
1000
&:disabled {
1002
background-color: transparent;
1003
color: $insensitive_fg_color;
1004
> label { color: inherit; }
1006
}
1007
}
1008
}
1009
&.selection-mode {
1011
animation: header_ripple_effect $material_duration $material_timing_function forwards;
1012
box-shadow: inset 0 1px $secondary_highlight_color;
1013
// background-color: $selected_bg_color;
1014
color: $selected_fg_color;
1015
&:backdrop {
1017
}
1018
.subtitle:link { @extend *:link:selected; }
1020
button:not(.suggested-action):not(.destructive-action) {
1022
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
1023
$selected_fg_color 0%,
1024
transparent 0%)
1025
0 0 0 / 0 0 0px;
1026
// color: $secondary_selected_fg_color;
1027
&, &:hover, &:active, &:checked { color: $selected_fg_color; }
1029
&:disabled {
1031
color: $insensitive_selected_fg_color;
1032
> label { color: inherit; }
1034
}
1035
&:checked {
1037
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
1038
$selected_fg_color 100%,
1039
transparent 0%)
1040
0 0 2 / 0 0 2px;
1041
color: $selected_fg_color;
1042
&:disabled {
1044
color: $insensitive_selected_fg_color;
1045
> label { color: inherit; }
1047
}
1048
}
1049
}
1050
.selection-menu {
1052
padding-left: 16px;
1053
padding-right: 16px;
1054
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1056
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1058
}
1059
}
1060
.tiled &,
1062
.maximized & {
1063
border-radius: 0; // squared corners when the window is max'd or tiled
1064
box-shadow: none;
1065
}
1066
&.default-decoration {
1068
min-height: $small_size;
1069
padding: $container_padding;
1070
border-width: 0;
1071
button.titlebutton {
1073
min-height: $small_size;
1074
min-width: $small_size;
1075
margin: 0;
1076
padding: 0;
1077
}
1078
}
1079
}
1080
headerbar {
1082
// add vertical margins to headerbar entries, buttons and separators to avoid them spanning the whole height
1083
entry,
1084
spinbutton,
1085
// separator,
1086
button {
1087
margin-top: $container_padding;
1088
margin-bottom: $container_padding;
1089
}
1090
}
1091
.titlebar {
1093
border-top-left-radius: 2px;
1094
border-top-right-radius: 2px;
1095
}
1096
headerbar {
1098
separator:first-child + &, // tackles the paned container case
1099
&:first-child {
1100
border-top-left-radius: 2px;
1101
.tiled &,
1103
.maximized & { border-radius: 0; }
1104
}
1105
&:last-child {
1107
border-top-right-radius: 2px;
1108
.tiled &,
1110
.maximized & { border-radius: 0; }
1111
}
1112
}
1113
.titlebar:not(headerbar) {
1115
window.csd > & {
1116
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1117
padding: 0;
1118
background-color: transparent;
1119
background-image: none;
1120
border-style: none;
1121
box-shadow: none;
1122
}
1123
> separator { background-color: $header_borders_color; }
1125
@extend %titlebar;
1127
}
1128
/************
1131
* Pathbars *
1132
************/
1133
.path-bar button {
1134
&.text-button, &.image-button, & {
1135
padding-left: 6px;
1136
padding-right: 6px;
1137
}
1138
&.text-button.image-button, & {
1140
// label:last-child { padding-left: 2px; padding-right: 8px; }
1141
// label:first-child { padding-left: 8px; padding-right: 2px; }
1142
}
1143
image {
1145
padding-left: 4px;
1146
padding-right: 4px;
1147
}
1148
&.slider-button {
1150
padding-left: 0;
1151
padding-right: 0;
1152
}
1153
}
1154
/**************
1157
* Tree Views *
1158
**************/
1159
treeview.view {
1160
-GtkTreeView-grid-line-width: 1;
1161
-GtkTreeView-grid-line-pattern: '';
1162
-GtkTreeView-tree-line-width: 1;
1163
-GtkTreeView-tree-line-pattern: '';
1164
-GtkTreeView-expander-size: 16;
1165
border-left-color: $track_color; // this is actually the tree lines color,
1167
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1168
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1170
&:hover, &:active, &:selected { border-radius: 0; }
1172
&.separator {
1174
min-height: 1px + 2px * 2;
1175
color: $borders_color;
1176
}
1177
&:drop(active) {
1179
border-style: solid none;
1180
border-width: 1px;
1181
border-color: $accent_bg_color;
1182
&.after { border-top-style: none; }
1184
&.before { border-bottom-style: none; }
1186
}
1187
&.expander {
1189
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1190
-gtk-icon-transform: rotate(-90deg);
1191
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1193
&:checked { -gtk-icon-transform: unset; }
1195
color: $secondary_fg_color;
1197
&:hover, &:active { color: $fg_color; }
1199
&:disabled { color: $insensitive_secondary_fg_color; }
1201
&:selected {
1203
color: $secondary_selected_fg_color;
1204
&:hover, &:active { color: $selected_fg_color; }
1206
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1208
}
1209
}
1210
&.progressbar { // progress bar in treeviews
1212
border-style: none none solid;
1213
border-width: $bar_size;
1214
border-color: $selected_bg_color;
1215
background-color: transparent;
1216
background-image: none;
1217
&:selected { border-color: currentColor; }
1219
}
1220
&.trough { // progress bar trough in treeviews
1222
border-style: none none solid;
1223
border-width: $bar_size;
1224
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1225
background-color: transparent;
1226
background-image: none;
1227
&:selected { border-color: $track_color; }
1229
}
1230
header {
1232
button {
1233
@extend row.activatable;
1234
padding: 2px 6px;
1236
border-style: none solid solid none;
1237
border-width: 1px;
1238
border-color: $borders_color;
1239
border-radius: 0;
1240
background-clip: border-box;
1241
&, &:hover, &:active { box-shadow: none; }
1243
&, &:disabled { background-color: $base_color; }
1245
&:last-child { border-right-style: none; }
1247
}
1248
}
1249
button.dnd,
1251
header.button.dnd { // for treeview-like derive widgets
1252
padding: 2px 6px;
1253
border-style: none solid solid;
1254
border-width: 1px;
1255
border-color: $borders_color;
1256
border-radius: 0;
1257
box-shadow: none;
1258
background-color: $base_color;
1259
background-clip: border-box;
1260
color: $selected_bg_color;
1261
}
1262
}
1263
/*********
1266
* Menus *
1267
*********/
1268
menubar,
1269
.menubar {
1270
-GtkWidget-window-dragging: true;
1271
padding: 0;
1272
box-shadow: inset 0 -1px $borders_color;
1273
background-color: $dark_color;
1274
> menuitem {
1276
transition: $material_transition;
1277
min-height: 20px;
1278
padding: 4px 8px;
1279
color: $secondary_fg_color;
1280
&:hover { //Seems like it :hover even with keyboard focus
1282
box-shadow: inset 0 -2px $selected_bg_color;
1283
color: $fg_color;
1284
}
1285
&:disabled { color: $insensitive_secondary_fg_color; }
1287
}
1288
}
1289
menu,
1291
.menu {
1292
margin: 4px 0;
1293
padding: 4px 0;
1294
background-color: $base_color;
1295
border: 1px solid $borders_color; // adds borders in a non composited env
1296
.csd & {
1298
border: none; // axes borders in a composited env
1299
border-radius: 2px;
1300
}
1301
menuitem {
1303
min-height: 20px;
1304
min-width: 40px;
1305
padding: 4px 8px;
1306
font: initial;
1307
text-shadow: none;
1308
&:hover {
1310
// background-color: gtkalpha(currentColor, $lower_opacity / 2);
1311
background-color: $selected_bg_color;
1312
color: $selected_fg_color;
1313
}
1314
&:disabled { color: $insensitive_fg_color; }
1316
// submenu indicators
1318
arrow {
1319
min-height: 16px;
1320
min-width: 16px;
1321
&:dir(ltr) {
1323
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1324
margin-left: 8px;
1325
}
1326
&:dir(rtl) {
1328
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1329
margin-right: 8px;
1330
}
1331
}
1332
}
1333
// overflow arrows
1335
> arrow {
1336
min-height: 16px;
1337
min-width: 16px;
1338
padding: 4px;
1339
border-radius: 0;
1340
background-color: $base_color;
1341
color: $secondary_fg_color;
1342
&.top {
1344
margin-top: -4px;
1345
border-bottom: 1px solid $borders_color;
1346
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1347
}
1348
&.bottom {
1350
margin-bottom: -4px;
1351
border-top: 1px solid $borders_color;
1352
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1353
}
1354
&:hover {
1356
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1357
color: $fg_color;
1358
}
1359
&:disabled {
1361
border-color: transparent;
1362
background-color: transparent;
1363
color: transparent;
1364
// color: $insensitive_secondary_fg_color;
1365
}
1366
}
1367
separator { margin: 4px 0; }
1369
}
1370
menuitem {
1372
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1373
check,
1375
radio {
1376
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1377
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1378
}
1379
}
1380
.csd.popup { border-radius: 2px; }
1382
/***************
1385
* Popovers *
1386
***************/
1387
popover.background {
1388
transition: box-shadow $material_duration $material_timing_function;
1389
padding: 0;
1390
border-radius: 2px + 1px;
1391
box-shadow: $z-depth-2;
1392
background-color: $secondary_base_color;
1393
&:backdrop { box-shadow: $z-depth-1; }
1395
&, .csd & {
1397
border-style: solid;
1398
border-width: 1px;
1399
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1400
}
1401
> list,
1403
> .view,
1404
> toolbar {
1405
border-style: none;
1406
box-shadow: none;
1407
background-color: transparent;
1408
}
1409
&, .csd & {
1411
&.touch-selection,
1412
&.magnifier,
1413
&.osd { @extend %osd; }
1414
}
1415
separator { margin: 4px 0; }
1417
list separator { margin: 0; }
1419
checkbutton,
1421
radiobutton { @extend modelbutton.flat; }
1422
}
1423
/*************
1425
* Notebooks *
1426
*************/
1427
notebook {
1428
> header {
1429
border-width: 1px;
1430
border-color: $borders_color;
1431
background-color: $dark_color;
1432
background-clip: border-box;
1433
&.top {
1435
border-bottom-style: solid;
1436
> tabs {
1437
> tab:not(.reorderable-page) {
1438
margin-bottom: -1px;
1439
&:hover { box-shadow: inset 0 -2px $track_color; }
1441
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1443
}
1444
}
1445
}
1446
&.bottom {
1448
border-top-style: solid;
1449
> tabs {
1450
> tab:not(.reorderable-page) {
1451
margin-top: -1px;
1452
&:hover { box-shadow: inset 0 2px $track_color; }
1454
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1456
}
1457
}
1458
}
1459
&.left {
1461
border-right-style: solid;
1462
> tabs {
1463
> tab:not(.reorderable-page) {
1464
margin-right: -1px;
1465
&:hover { box-shadow: inset -2px 0 $track_color; }
1467
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1469
}
1470
}
1471
}
1472
&.right {
1474
border-left-style: solid;
1475
> tabs {
1476
> tab:not(.reorderable-page) {
1477
margin-left: -1px;
1478
&:hover { box-shadow: inset 2px 0 $track_color; }
1480
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1482
}
1483
}
1484
}
1485
&.top > tabs > arrow {
1487
@extend %notebook_vert_arrows;
1488
border-top-style: none;
1490
}
1491
&.bottom > tabs > arrow {
1493
@extend %notebook_vert_arrows;
1494
border-bottom-style: none;
1496
}
1497
@at-root %notebook_vert_arrows {
1499
padding-left: 4px;
1500
padding-right: 4px;
1501
&.down {
1503
margin-left: -8px;
1504
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1505
}
1506
&.up {
1508
margin-right: -8px;
1509
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1510
}
1511
}
1512
&.left > tabs > arrow {
1514
@extend %notebook_horz_arrows;
1515
border-left-style: none;
1517
}
1518
&.right > tabs > arrow {
1520
@extend %notebook_horz_arrows;
1521
border-right-style: none;
1523
}
1524
@at-root %notebook_horz_arrows {
1526
padding-top: 4px;
1527
padding-bottom: 4px;
1528
&.down {
1530
margin-top: -8px;
1531
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1532
}
1533
&.up {
1535
margin-bottom: -8px;
1536
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1537
}
1538
}
1539
> tabs > arrow {
1541
@extend %button_basic.flat;
1542
min-height: 16px;
1544
min-width: 16px;
1545
border-radius: 0;
1546
}
1547
tab {
1549
transition: $material_transition;
1550
min-height: 24px;
1551
min-width: 24px;
1552
padding: 6px 12px;
1553
outline-offset: -6px;
1555
border-width: 1px; // for reorderable tabs
1557
border-color: transparent; //
1558
color: $secondary_fg_color;
1560
font-weight: 500;
1561
&:hover {
1563
color: $fg_color;
1564
&.reorderable-page {
1566
border-color: $borders_color;
1567
background-color: $bg_color;
1568
}
1569
}
1570
&:disabled { color: $insensitive_secondary_fg_color; }
1572
&:checked {
1574
color: $fg_color;
1575
&:disabled { color: $insensitive_fg_color; }
1577
&:not(.reorderable-page) { animation: tab_ripple_effect $material_duration * 2 ease-in-out; }
1579
&.reorderable-page {
1581
border-color: $borders_color;
1582
background-color: $light_color;
1583
}
1584
}
1585
// colors the button like the label, overridden otherwise
1587
button.flat {
1588
// FIXME: generalize .small-button?
1589
min-width: $small_size;
1590
min-height: $small_size;
1591
padding: 0;
1592
@extend %button_basic.image-button;
1594
&:last-child {
1596
margin-left: 6px;
1597
margin-right: -6px;
1598
}
1599
&:first-child {
1601
margin-left: -6px;
1602
margin-right: 6px;
1603
}
1604
}
1605
}
1606
&.top,
1608
&.bottom {
1609
tabs {
1610
padding-left: 8px;
1611
padding-right: 8px;
1612
&:not(:only-child) {
1614
&:first-child { margin-left: 0; }
1615
&:last-child { margin-right: 0; }
1616
}
1617
tab {
1619
&.reorderable-page {
1620
margin: 0 -1px;
1621
border-style: none solid;
1622
}
1623
}
1624
}
1625
}
1626
&.left,
1628
&.right {
1629
tabs {
1630
padding-top: 8px;
1631
padding-bottom: 8px;
1632
&:not(:only-child) {
1634
&:first-child { margin-top: 0; }
1635
&:last-child { margin-bottom: 0; }
1636
}
1637
tab {
1639
&.reorderable-page {
1640
margin: -1px 0;
1641
border-style: solid none;
1642
}
1643
}
1644
}
1645
}
1646
}
1647
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1649
background-color: $base_color;
1650
entry,
1652
spinbutton:not(.vertical) { @extend %entry.flat; }
1653
revealer entry,
1655
revealer spinbutton:not(.vertical) { @extend %entry; }
1656
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1658
}
1659
}
1660
/**************
1663
* Scrollbars *
1664
**************/
1665
scrollbar {
1666
$_slider_min_length: 24px;
1667
// disable steppers
1669
@at-root * {
1670
-GtkScrollbar-has-backward-stepper: false;
1671
-GtkScrollbar-has-forward-stepper: false;
1672
}
1673
transition: $material_transition;
1675
background-color: $base_color;
1676
background-clip: $extra_background_clip;
1677
// scrollbar border
1679
&.top { border-bottom: 1px solid $borders_color; }
1680
&.bottom { border-top: 1px solid $borders_color; }
1681
&.left { border-right: 1px solid $borders_color; }
1682
&.right { border-left: 1px solid $borders_color; }
1683
// slider
1685
slider {
1686
transition: $material_transition, margin 0, border-width 0;
1687
min-width: 8px;
1688
min-height: 8px;
1689
border: 4px solid transparent;
1690
border-radius: 100px;
1691
background-clip: padding-box;
1692
background-color: $tertiary_fg_color;
1693
&:hover { background-color: $secondary_fg_color; }
1695
&:active { background-color: $fg_color; }
1697
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1699
}
1700
&.fine-tune {
1702
slider {
1703
transition: $material_transition, margin 0, border-width 0, min-width 0, min-height 0;
1704
min-width: 4px;
1705
min-height: 4px;
1706
}
1707
&.horizontal slider { margin: 2px 0; }
1709
&.vertical slider { margin: 0 2px; }
1711
}
1712
&.overlay-indicator {
1714
&:not(.dragging):not(.hovering) {
1715
border-color: transparent;
1716
background-color: transparent;
1717
slider {
1719
min-width: 4px;
1720
min-height: 4px;
1721
margin: 2px;
1722
border: 2px solid scale-alpha($base_color, $lower_opacity);
1723
}
1724
button {
1726
min-width: 4px;
1727
min-height: 4px;
1728
margin: 2px;
1729
border: 2px solid scale-alpha($base_color, $lower_opacity);
1730
border-radius: 100px;
1731
background-color: $tertiary_fg_color;
1732
background-clip: padding-box;
1733
-gtk-icon-source: none;
1734
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1736
}
1737
&.horizontal {
1739
slider { min-width: $_slider_min_length; }
1740
button { min-width: 8px; }
1742
}
1743
&.vertical {
1745
slider { min-height: $_slider_min_length; }
1746
button { min-height: 8px; }
1748
}
1749
}
1750
&.dragging,
1752
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1753
}
1754
&.horizontal slider { min-width: $_slider_min_length; }
1756
&.vertical slider { min-height: $_slider_min_length; }
1758
// button styling
1760
button {
1761
@extend %button_basic.flat;
1762
min-width: 16px;
1763
min-height: 16px;
1764
padding: 0;
1765
border-radius: 0;
1766
}
1767
// button icons
1769
&.vertical {
1770
button {
1771
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1772
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1774
}
1775
}
1776
&.horizontal {
1778
button {
1779
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1780
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1782
}
1783
}
1784
}
1785
/**********
1788
* Switch *
1789
**********/
1790
switch {
1791
transition: $material_transition;
1792
margin: $container_padding 0;
1793
border: 4px solid transparent;
1794
border-radius: 100px;
1795
background-color: $track_color;
1796
background-clip: padding-box;
1797
font-size: 0;
1798
&:disabled { color: $insensitive_fg_color; }
1800
&:checked {
1802
background-color: scale-alpha($accent_bg_color, 0.5);
1803
&:disabled {
1805
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1806
color: $insensitive_fg_color;
1807
}
1808
}
1809
slider {
1811
@include entry(normal);
1812
transition: $material_transition, margin 0;
1814
min-width: $small_size;
1815
min-height: $small_size;
1816
margin: -4px 0 -4px -4px;
1817
-gtk-outline-radius: 100px;
1818
border-radius: 100px;
1819
background-image: -gtk-gradient(radial,
1820
center center, 0,
1821
center center, 0.5,
1822
to(transparent),
1823
to(transparent));
1824
}
1825
&:hover slider { @include entry(focus); }
1827
&:disabled slider { @include entry(insensitive); }
1829
&:checked slider {
1831
transition: $material_transition, margin 0, background-image 0;
1832
animation: needs_attention $material_duration $material_timing_function forwards;
1833
margin: -4px -4px -4px 0;
1834
// background-color: $accent_bg_color;
1835
color: $selected_fg_color;
1836
}
1837
&:checked:disabled slider { animation: none; }
1839
row:selected & {
1841
}
1842
}
1843
/*************************
1846
* Check and Radio items *
1847
*************************/
1848
// draw regular check and radio items using our PNG assets
1849
// all assets are rendered from assets.svg. never add pngs directly
1850
//selection-mode
1852
@each $s,$as in ('','-selectionmode'),
1853
(':active', '-active-selectionmode'),
1854
(':disabled', '-insensitive-selectionmode'),
1855
(':checked', '-checked-selectionmode'),
1856
(':checked:active', '-checked-active-selectionmode'),
1857
(':disabled:checked', '-checked-insensitive-selectionmode') {
1858
.view.content-view.check#{$s}:not(list) {
1859
-gtk-icon-shadow: $z-depth-1;
1860
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
1861
url("assets/checkbox#{$as}@2.png"));
1862
margin: 8px;
1863
background-color: transparent;
1864
&:hover, &:active { -gtk-icon-shadow: $z-depth-2; }
1866
&:disabled { -gtk-icon-shadow: none; }
1868
}
1869
}
1870
checkbutton.text-button, radiobutton.text-button {
1872
// this is for a nice focus on check and radios text
1873
padding: 2px 0;
1874
outline-offset: 0;
1875
label:not(:only-child) {
1877
&:first-child { margin-left: 4px; }
1878
&:last-child { margin-right: 4px; }
1880
}
1881
}
1882
check,
1884
radio {
1885
min-height: 24px;
1886
min-width: 24px;
1887
-gtk-icon-source: none;
1888
margin: -12px -8px;
1890
padding: 12px;
1891
outline-offset: 4px;
1892
// border-radius: 100%;
1893
@extend %button_basic.flat;
1895
@extend %button_basic.image-button;
1897
color: gtkalpha(currentColor, $enabled_opacity);
1899
&:hover, &:active { color: currentColor; }
1901
&:checked, &:checked:disabled { background-color: transparent; }
1903
&:checked, &:indeterminate { color: $accent_bg_color; }
1905
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1907
&:only-child { margin: -12px; }
1909
.osd & {
1911
}
1912
menu menuitem & {
1914
transition: none;
1915
margin: -16px -16px; // this is a workaround for a menu check/radio size allocation issue
1916
&:not(:checked):not(:indeterminate):hover { color: gtkalpha(currentColor, $enabled_opacity); }
1918
&, &:hover, &:disabled {
1920
background-image: none;
1921
// color: inherit;
1922
// animation: none;
1923
}
1924
}
1925
}
1926
%check,
1928
check {
1929
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1930
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1931
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1933
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1934
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1936
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1937
}
1938
%radio,
1940
radio {
1941
border-image: -gtk-gradient(radial,
1942
center center, 0,
1943
center center, 0.001,
1944
to($accent_bg_color),
1945
to(transparent))
1946
24 / 24px;
1947
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1948
-gtk-recolor(url("assets/radio-unchecked-symbolic.png")));
1949
&:checked {
1951
border-image: -gtk-gradient(radial,
1952
center center, 0,
1953
center center, (10 / 48 / 2),
1954
to($accent_bg_color),
1955
to(transparent))
1956
24 / 24px;
1957
}
1958
&:checked:disabled {
1960
border-image: -gtk-gradient(radial,
1961
center center, 0,
1962
center center, (10 / 48 / 2),
1963
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1964
to(transparent))
1965
24 / 24px;
1966
}
1967
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1969
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1970
&:indeterminate:checked {
1972
border-image: -gtk-gradient(radial,
1973
center center, 0,
1974
center center, 0.001,
1975
to($accent_bg_color),
1976
to(transparent))
1977
24 / 24px;
1978
}
1979
}
1980
// let's animate things
1982
@keyframes check_check {
1983
from { -gtk-icon-transform: rotate(90deg); }
1984
to { -gtk-icon-transform: unset; }
1985
}
1986
@keyframes check_radio {
1988
from { -gtk-icon-transform: scale(0); }
1989
to { -gtk-icon-transform: unset; }
1990
}
1991
@keyframes check_indeterminate {
1993
from { -gtk-icon-transform: unset; }
1994
50% { -gtk-icon-transform: scale(0, 1); }
1995
to { -gtk-icon-transform: unset; }
1996
}
1997
check:not(:indeterminate):checked { animation: check_check $material_duration $material_timing_function; }
1999
check:not(:indeterminate):checked:active { animation: check_check $material_duration $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
2001
// radio:not(:indeterminate):checked { animation: check_radio $material_duration $material_timing_function; }
2003
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_duration $material_timing_function; }
2005
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_duration $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
2007
// no animations in menus
2009
menu menuitem {
2010
check:not(:indeterminate):checked,
2011
radio:not(:indeterminate):checked,
2012
check:indeterminate:checked,
2013
radio:indeterminate:checked { animation: none; }
2014
}
2015
treeview.view check,
2017
treeview.view radio {
2018
// margin: -12px;
2019
// padding: 12px;
2020
padding: 0;
2021
&:checked:hover, &:selected:checked:hover { background-image: none; }
2023
& {
2025
color: $secondary_fg_color;
2026
&:hover, &:active { color: $fg_color; }
2028
&:disabled { color: $insensitive_secondary_fg_color; }
2030
&:checked, &:indeterminate { color: $accent_bg_color; }
2032
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2034
}
2035
&:selected {
2037
color: $secondary_selected_fg_color;
2038
&:hover, &:active { color: $selected_fg_color; }
2040
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2042
&:checked, &:indeterminate { color: $accent_bg_color; }
2044
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2046
}
2047
}
2048
treeview.view radio:checked {
2050
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2051
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2052
border-image: none;
2053
}
2054
/************
2057
* GtkScale *
2058
************/
2059
scale {
2060
// sizing
2061
$_marks_lenght: 8px;
2063
$_marks_distance: 8px;
2064
min-height: 12px;
2066
min-width: 12px;
2067
padding: 12px;
2068
* { transition: $material_transition; }
2070
// the slider is inside the trough, so to have make it bigger there's a negative margin
2072
slider {
2073
min-height: $small_size;
2074
min-width: $small_size;
2075
margin: -10px;
2076
}
2077
// the backing bit
2079
trough {
2080
outline-offset: 2px;
2081
background-color: $track_color;
2082
&:disabled { color: $insensitive_fg_color; }
2084
}
2085
// the colored part of the backing bit
2087
highlight {
2088
background-color: $accent_bg_color;
2089
&:disabled { background-color: transparent; }
2091
}
2092
// this is another differently styled part of the backing bit, the most relevant use case is for example
2094
// in media player to indicate how much video stream as been cached
2095
fill {
2096
background-color: $track_color;
2097
&:disabled { background-color: transparent; }
2099
}
2100
slider {
2102
// border-radius: 100%;
2103
// background-color: $accent_bg_color;
2104
background-repeat: no-repeat;
2105
background-position: center;
2106
@each $s,$as in ('',''),
2108
(':disabled','-insensitive') {
2109
&#{$s} {
2110
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2111
background-image: -gtk-scaled(url('#{$_url}.png'),
2112
url('#{$_url}@2.png'));
2113
}
2114
}
2115
background-size: calc(100% - 8px);
2117
&:hover { background-size: calc(100% - 4px); }
2119
&:active { background-size: calc(100% - 0px); }
2121
}
2122
// click-and-hold the slider to activate
2124
&.fine-tune {
2125
// to make the slider shrink in fine-tune mode
2126
slider { background-size: calc(100% - 12px); }
2127
}
2128
value { color: gtkalpha(currentColor, $hint_opacity); }
2130
marks {
2132
color: $track_color;
2133
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2135
(bottom, bottom, top),
2136
(top, left, right),
2137
(bottom, right, left) {
2138
&.#{$marks_class} {
2139
margin-#{$marks_margin}: $_marks_distance;
2140
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2141
}
2142
}
2143
}
2144
&.horizontal {
2146
indicator {
2147
min-height: $_marks_lenght;
2148
min-width: 1px;
2149
}
2150
}
2151
&.vertical {
2153
indicator {
2154
min-height: 1px;
2155
min-width: $_marks_lenght;
2156
}
2157
}
2158
// *WARNING* scale with marks madness following
2160
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2162
$suffix: if($variant == 'light', '', '-dark');
2163
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2165
('vertical', 'vert') {
2166
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2167
('scale-has-marks-below', ':first-child:not(:only-child)') {
2168
@each $state, $state_infix in ('', ''),
2169
(':disabled', '-insensitive') {
2170
&.#{$dir_class} {
2171
%#{$marks_infix}-#{$dir_infix},
2172
contents#{$nth_child} > trough > slider {
2173
&#{$state} {
2174
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2175
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2177
}
2178
@if $dir_class == 'horizontal' {
2180
min-height: 30px;
2181
min-width: $small_size;
2182
@if $marks_infix == 'scale-has-marks-above' {
2184
margin-top: -16px;
2185
background-position: center calc(100% - 4px);
2187
&:hover { background-position: center calc(100% - 2px); }
2189
&:active { background-position: center calc(100% - 0px); }
2191
}
2192
@if $marks_infix == 'scale-has-marks-below' {
2194
margin-bottom: -16px;
2195
background-position: center calc(4px);
2197
&:hover { background-position: center calc(2px); }
2199
&:active { background-position: center calc(0px); }
2201
}
2202
}
2203
@if $dir_class == 'vertical' {
2205
min-height: $small_size;
2206
min-width: 30px;
2207
@if $marks_infix == 'scale-has-marks-above' {
2209
margin-left: -16px;
2210
background-position: calc(4px) center;
2212
&:hover { background-position: calc(2px) center; }
2214
&:active { background-position: calc(0px) center; }
2216
}
2217
@if $marks_infix == 'scale-has-marks-below' {
2219
margin-right: -16px;
2220
background-position: calc(100% - 4px) center;
2222
&:hover { background-position: calc(100% - 2px) center; }
2224
&:active { background-position: calc(100% - 0px) center; }
2226
}
2227
}
2228
}
2229
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2231
&.fine-tune contents#{$nth_child} > trough > slider {
2232
// bigger negative margins to make the trough grow here as well
2233
@if $dir_class == 'horizontal' {
2235
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2236
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2238
}
2239
@if $dir_class == 'vertical' {
2241
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2242
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2244
}
2245
}
2246
}
2247
}
2248
}
2249
}
2250
&.color {
2252
min-height: 0;
2253
min-width: 0;
2254
&.horizontal {
2256
padding: 0 0 12px 0;
2257
trough {
2259
padding-bottom: $bar_size;
2260
}
2261
slider {
2263
@extend %scale-has-marks-above-horz;
2264
margin-bottom: -10px - $bar_size;
2266
margin-top: 0;
2267
}
2268
}
2269
&.vertical {
2271
&:dir(ltr) {
2272
padding: 0 0 0 12px;
2273
trough {
2275
padding-left: $bar_size;
2276
}
2277
slider {
2279
@extend %scale-has-marks-below-vert;
2280
margin-left: -10px - $bar_size;
2282
margin-right: 0;
2283
}
2284
}
2285
&:dir(rtl) {
2287
padding: 0 12px 0 0;
2288
trough {
2290
padding-right: $bar_size;
2291
}
2292
slider {
2294
@extend %scale-has-marks-above-vert;
2295
margin-right: -10px - $bar_size;
2297
margin-left: 0;
2298
}
2299
}
2300
}
2301
&.fine-tune {
2303
&.horizontal {
2304
slider {
2305
@extend %scale-has-marks-above-horz-fine-tune;
2306
}
2307
}
2308
&.vertical {
2310
&:dir(ltr) {
2311
slider {
2312
@extend %scale-has-marks-below-vert-fine-tune;
2313
}
2314
}
2315
&:dir(rtl) {
2317
slider {
2318
@extend %scale-has-marks-above-vert-fine-tune;
2319
}
2320
}
2321
}
2322
}
2323
}
2324
}
2325
/*****************
2328
* Progress bars *
2329
*****************/
2330
progressbar {
2331
// sizing
2332
&.horizontal {
2333
trough,
2334
progress { min-height: $bar_size; }
2335
}
2336
&.vertical {
2338
trough,
2339
progress { min-width: $bar_size; }
2340
}
2341
// FIXME: insensitive state missing and some other state should be set probably
2343
color: $tertiary_fg_color;
2344
font-size: smaller;
2345
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2347
progress { background-color: $selected_bg_color; }
2349
&.osd { // progressbar.osd used for epiphany page loading progress
2351
// min-width: $bar_size;
2352
// min-height: $bar_size;
2353
// background-color: transparent;
2354
// trough { background-color: transparent; }
2356
progress {
2358
}
2359
}
2360
}
2361
/*************
2364
* Level Bar *
2365
*************/
2366
levelbar {
2367
block {
2368
min-width: $medium_size;
2369
min-height: $bar_size;
2370
}
2371
&.vertical block {
2373
min-width: $bar_size;
2374
min-height: $medium_size;
2375
}
2376
trough {
2378
padding: 2px;
2379
border-radius: 2px;
2380
@include entry(normal);
2382
&:disabled { @include entry(insensitive); }
2384
}
2385
&.horizontal.discrete block { margin: 0 1px; }
2387
&.vertical.discrete block { margin: 1px 0; }
2389
&.horizontal.discrete trough { padding: 2px 1px; }
2391
&.vertical.discrete trough { padding: 1px 2px; }
2393
block {
2395
&.low {
2396
background-color: $warning_color;
2397
}
2398
&.high {
2400
background-color: $selected_bg_color;
2401
}
2402
&.full {
2404
background-color: $success_color;
2405
}
2406
&.empty {
2408
background-color: $track_color;
2409
color: $insensitive_fg_color;
2410
}
2411
}
2412
}
2413
/****************
2416
* Print dialog *
2417
*****************/
2418
printdialog {
2419
paper {
2420
padding: 0;
2421
border: 1px solid $borders_color;
2422
background: $base_color;
2423
color: $fg_color;
2424
}
2425
.dialog-action-box { margin: 12px; }
2427
}
2428
/**********
2431
* Frames *
2432
**********/
2433
frame > border,
2434
.frame {
2435
margin: 0;
2436
padding: 0;
2437
border: 1px solid $borders_color;
2438
border-radius: 0;
2439
box-shadow: none;
2440
&.flat { border-style: none; }
2442
}
2443
actionbar > revealer > box {
2445
padding: $container_padding;
2446
border-top: 1px solid $borders_color;
2447
}
2448
scrolledwindow {
2450
viewport.frame { // avoid double borders when viewport inside scrolled window
2451
border-style: none;
2452
}
2453
// This is used when content is touch-dragged past boundaries.
2455
// draws a box on top of the content, the size changes programmatically.
2456
overshoot {
2457
&.top { @include overshoot(top); }
2458
&.bottom { @include overshoot(bottom); }
2460
&.left { @include overshoot(left); }
2462
&.right { @include overshoot(right); }
2464
}
2465
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2467
undershoot {
2468
&.top { @include undershoot(top); }
2469
&.bottom { @include undershoot(bottom); }
2471
&.left { @include undershoot(left); }
2473
&.right { @include undershoot(right); }
2475
}
2476
junction { // the small square between two scrollbars
2478
border-style: solid none none solid;
2479
border-width: 1px;
2480
border-color: $borders_color;
2481
background-color: $base_color;
2482
&:dir(rtl) { border-style: solid solid none none; }
2484
}
2485
}
2486
//vbox and hbox separators
2488
separator {
2489
min-width: 1px;
2490
min-height: 1px;
2491
background: $borders_color;
2492
}
2493
/*********
2496
* Lists *
2497
*********/
2498
list {
2499
border-color: $borders_color;
2500
background-color: $base_color;
2501
row { padding: 2px; }
2503
}
2504
row {
2506
transition: $material_transition;
2507
&:hover { transition: none; }
2509
&.activatable {
2511
background-image: radial-gradient(circle farthest-corner at center,
2512
gtkalpha(currentColor, 0) 100%,
2513
transparent 0%),
2514
image(gtkalpha(currentColor, 0));
2515
&:hover {
2517
background-image: radial-gradient(circle farthest-corner at center,
2518
gtkalpha(currentColor, 0) 100%,
2519
transparent 0%),
2520
image(gtkalpha(currentColor, 0.05));
2521
}
2522
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2524
&:active {
2525
transition: $material_transition, background-image 0;
2526
animation: row_ripple_effect $material_duration $material_timing_function forwards;
2527
}
2528
}
2529
&:selected { @extend %selected_items; }
2531
}
2532
/*********************
2535
* App Notifications *
2536
*********************/
2537
.app-notification,
2538
.app-notification.frame {
2539
@extend %osd;
2540
@extend toolbar.osd;
2542
margin: 8px;
2544
border { border: none; }
2546
}
2547
/*************
2550
* Expanders *
2551
*************/
2552
expander {
2553
arrow {
2554
transition: $material_transition;
2555
min-width: 16px;
2556
min-height: 16px;
2557
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2558
-gtk-icon-transform: rotate(-90deg);
2559
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2561
&:checked { -gtk-icon-transform: unset; }
2563
color: $secondary_fg_color;
2565
&:hover, &:active { color: $fg_color; }
2567
&:disabled { color: $insensitive_secondary_fg_color; }
2569
&:selected {
2571
color: $secondary_selected_fg_color;
2572
&:hover, &:active { color: $selected_fg_color; }
2574
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2576
}
2577
}
2578
}
2579
/************
2582
* Calendar *
2583
***********/
2584
calendar {
2585
padding: 1px;
2586
border: 1px solid $borders_color;
2587
color: $fg_color;
2588
&:disabled { color: $insensitive_fg_color; }
2590
&:selected {
2592
@extend %selected_items;
2593
border-radius: 2px + 1px;
2595
}
2596
&.header {
2598
border: none;
2599
border-bottom: 1px solid $borders_color;
2600
border-radius: 0;
2601
}
2602
&.button { @extend %button_basic.flat; }
2604
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2606
&.highlight {
2608
color: gtkalpha(currentColor, $hint_opacity);
2609
font-weight: 500;
2610
}
2611
}
2612
/***********
2615
* Dialogs *
2616
***********/
2617
messagedialog { // Message Dialog styling
2618
&.background { background-color: $light_color; }
2619
.titlebar {
2621
min-height: $small_size;
2622
border-style: none;
2623
// box-shadow: inset 0 1px $highlight_color;
2624
background-color: $light_color;
2625
}
2626
&.csd { // rounded bottom border styling for csd version
2628
&.background {
2629
// bigger radius for better antialiasing
2630
border-bottom-left-radius: 2px;
2631
border-bottom-right-radius: 2px;
2632
}
2633
.dialog-action-area button {
2635
padding: 8px 16px;
2636
border-top: 1px solid $borders_color;
2637
border-radius: 0;
2638
@extend %button_basic.flat;
2640
&:first-child{ border-bottom-left-radius: 2px; }
2642
&:last-child { border-bottom-right-radius: 2px; }
2644
}
2645
}
2646
}
2647
filechooser {
2649
.dialog-action-box { border-top: 1px solid $borders_color; }
2650
#pathbarbox { border-bottom: 1px solid $borders_color; }
2652
}
2653
filechooserbutton:drop(active) {
2655
box-shadow: none;
2656
}
2657
/***********
2660
* Sidebar *
2661
***********/
2662
.sidebar {
2663
border-style: none;
2664
background-color: $secondary_base_color;
2665
@at-root %sidebar_left,
2667
&:dir(ltr),
2668
&.left,
2669
&.left:dir(rtl) {
2670
border-right: 1px solid $borders_color;
2671
border-left-style: none;
2672
}
2673
@at-root %sidebar_right
2675
&:dir(rtl),
2676
&.right {
2677
border-left: 1px solid $borders_color;
2678
border-right-style: none;
2679
}
2680
list { background-color: transparent; }
2682
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2684
}
2685
stacksidebar {
2687
&.sidebar {
2688
&:dir(ltr),
2689
&.left,
2690
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2691
&:dir(rtl),
2693
&.right { list { @extend %sidebar_right; }}
2694
}
2695
row {
2697
padding: 10px 4px;
2698
> label {
2700
padding-left: 6px;
2701
padding-right: 6px;
2702
}
2703
&.needs-attention > label { @extend %needs_attention; }
2705
}
2706
}
2707
/****************
2710
* File chooser *
2711
****************/
2712
placessidebar {
2713
> viewport.frame { border-style: none; }
2714
row {
2716
// Needs overriding of the GtkListBoxRow padding
2717
min-height: 32px;
2718
padding: 0;
2719
// Using margins/padding directly in the SidebarRow
2721
// will make the animation of the new bookmark row jump
2722
> revealer { padding: 0 12px; }
2723
&:selected { color: $selected_fg_color; }
2725
&:disabled { color: $insensitive_fg_color; }
2727
image.sidebar-icon {
2729
opacity: $hint_opacity; // dim the device icons
2730
&:dir(ltr) { padding-right: 8px; }
2732
&:dir(rtl) { padding-left: 8px; }
2733
}
2734
label.sidebar-label {
2736
&:dir(ltr) { padding-right: 2px; }
2737
&:dir(rtl) { padding-left: 2px; }
2738
}
2739
@at-root button.sidebar-button {
2741
@extend %button_basic.flat;
2742
min-height: $small_size;
2744
min-width: $small_size;
2745
margin-top: 0;
2746
margin-bottom: 0;
2747
padding: 0;
2748
border-radius: 100%;
2749
-gtk-outline-radius: 100%;
2750
row:selected & { @extend %button_selected.flat; }
2752
}
2753
&.sidebar-placeholder-row {
2755
min-height: 2px;
2756
padding: 0 8px;
2757
background-image: image($accent_bg_color);
2758
background-clip: content-box;
2759
}
2760
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2762
&:drop(active):not(:disabled) {
2764
box-shadow: inset 0 0 0 2px $accent_bg_color;
2765
&:selected {
2767
// background-color: $accent_bg_color;
2768
// color: $selected_fg_color;
2769
}
2770
}
2771
}
2772
}
2773
placesview {
2775
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2776
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2778
// this selects the "connect to server" label
2780
> actionbar > revealer > box > label {
2781
padding-left: 8px;
2782
padding-right: 8px;
2783
}
2784
}
2785
/*********
2788
* Paned *
2789
*********/
2790
paned {
2791
> separator {
2792
min-width: 1px;
2793
min-height: 1px;
2794
-gtk-icon-source: none; // defeats the ugly default handle decoration
2795
border-style: none; // just to be sure
2796
background-color: transparent;
2797
// workaround, using background istead of a border since the border will get rendered twice (?)
2798
background-image: image($borders_color);
2799
background-size: 1px 1px;
2800
&.wide {
2802
min-width: 6px;
2803
min-height: 6px;
2804
background-color: $bg_color;
2805
background-image: image($borders_color), image($borders_color);
2806
background-size: 1px 1px, 1px 1px;
2807
}
2808
}
2809
&.horizontal > separator {
2811
background-repeat: repeat-y;
2812
&:dir(ltr) {
2814
margin: 0 -8px 0 0;
2815
padding: 0 8px 0 0;
2816
background-position: left;
2817
}
2818
&:dir(rtl) {
2820
margin: 0 0 0 -8px;
2821
padding: 0 0 0 8px;
2822
background-position: right;
2823
}
2824
&.wide {
2826
margin: 0;
2827
padding: 0;
2828
background-repeat: repeat-y, repeat-y;
2829
background-position: left, right;
2830
}
2831
}
2832
&.vertical > separator {
2834
margin: 0 0 -8px 0;
2835
padding: 0 0 8px 0;
2836
background-repeat: repeat-x;
2837
background-position: top;
2838
&.wide {
2840
margin: 0;
2841
padding: 0;
2842
background-repeat: repeat-x, repeat-x;
2843
background-position: bottom, top;
2844
}
2845
}
2846
}
2847
/**************
2850
* GtkInfoBar *
2851
**************/
2852
infobar { border-style: none; }
2853
.info { background-color: $info_bg_color; }
2855
.question { background-color: $question_bg_color; }
2857
.warning { background-color: $warning_bg_color; }
2859
.error { background-color: $error_bg_color; }
2861
.info,
2863
.question,
2864
.warning,
2865
.error {
2866
color: $selected_fg_color;
2867
button { @extend %button_selected; }
2869
label:selected {
2871
}
2872
*:link { @extend %link_selected; }
2874
}
2875
/************
2878
* Tooltips *
2879
************/
2880
tooltip {
2881
&.background {
2882
// background-color needs to be set this way otherwise it gets drawn twice
2883
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2884
background-color: scale-alpha($base_color, $higher_opacity);
2885
}
2886
// @extend %osd;
2888
// padding: 4px; /* not working */
2890
border-radius: 2px;
2891
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2892
// FIXME: we need a border or tooltips vanish on black background.
2894
decoration { background-color: transparent; }
2895
label {
2897
min-height: 32px - 6px * 2;
2898
padding: 4px 12px - 6px;
2899
}
2900
* { // Yeah this is ugly
2902
padding: 0;
2903
background-color: transparent;
2904
color: inherit;
2905
}
2906
}
2907
/*****************
2910
* Color Chooser *
2911
*****************/
2912
colorswatch {
2913
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2914
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2915
// applied to the overlay box.
2916
// base color corners rounding
2918
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2919
// sports a bigger radius.
2920
// nth-child is needed by the custom color strip.
2921
&.top {
2923
border-top-left-radius: $material_radius + 0.5px;
2924
border-top-right-radius: $material_radius + 0.5px;
2925
overlay {
2927
border-top-left-radius: $material_radius;
2928
border-top-right-radius: $material_radius;
2929
}
2930
}
2931
&.bottom {
2933
border-bottom-left-radius: $material_radius + 0.5px;
2934
border-bottom-right-radius: $material_radius + 0.5px;
2935
overlay {
2937
border-bottom-left-radius: $material_radius;
2938
border-bottom-right-radius: $material_radius;
2939
}
2940
}
2941
&.left,
2943
&:first-child:not(.top) {
2944
border-top-left-radius: $material_radius + 0.5px;
2945
border-bottom-left-radius: $material_radius + 0.5px;
2946
overlay {
2948
border-top-left-radius: $material_radius;
2949
border-bottom-left-radius: $material_radius;
2950
}
2951
}
2952
&.right,
2954
&:last-child:not(.bottom) {
2955
border-top-right-radius: $material_radius + 0.5px;
2956
border-bottom-right-radius: $material_radius + 0.5px;
2957
overlay {
2959
border-top-right-radius: $material_radius;
2960
border-bottom-right-radius: $material_radius;
2961
}
2962
}
2963
&.dark overlay { color: white; }
2965
&.light overlay { color: scale-alpha(black, 0.8); }
2967
&.dark { color: white; } // for focus ring
2969
&.light { color: scale-alpha(black, 0.8); } // for focus ring
2971
&:drop(active) {
2973
box-shadow: none;
2974
&.light overlay {
2976
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
2977
}
2978
&.dark overlay {
2980
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
2981
}
2982
}
2983
overlay {
2985
transition: $material_transition;
2986
box-shadow: $z-depth-1;
2987
&:hover { box-shadow: $z-depth-2; }
2989
}
2990
&#add-color-button {
2992
border-radius: $material_radius $material_radius 0 0;
2993
color: white; // for focus ring
2994
&:only-child { border-radius: $material_radius; }
2996
overlay {
2998
background-image: linear-gradient(to right,
2999
$error_bg_color 25%,
3000
$warning_bg_color 25%, $warning_bg_color 50%,
3001
$info_bg_color 50%, $info_bg_color 75%,
3002
$question_bg_color 75%);
3003
color: white;
3004
}
3005
}
3006
&:disabled {
3008
opacity: $disabled_opacity;
3009
overlay { box-shadow: none; }
3011
}
3012
row:selected & {
3014
}
3015
&#editor-color-sample {
3017
border-radius: $material_radius + 0.5px;
3018
overlay { border-radius: $material_radius; }
3020
// overlay:hover { box-shadow: $z-depth-1; }
3022
}
3023
}
3024
// colorscale popup
3026
colorchooser .popover.osd {
3027
transition: box-shadow $material_duration $material_timing_function;
3028
border-radius: 2px;
3029
box-shadow: $z-depth-2;
3030
background-color: $base_color;
3031
&:backdrop { box-shadow: $z-depth-1; }
3033
spinbutton:not(.vertical) { @extend %entry.flat; }
3035
}
3036
/********
3039
* Misc *
3040
********/
3041
//content view (grid/list)
3042
.content-view {
3043
background-color: $bg_color;
3044
// &:hover { -gtk-icon-effect: highlight; }
3046
rubberband { @extend rubberband; }
3048
}
3049
.scale-popup {
3051
.osd & { @extend %osd; }
3052
.osd & button.flat { //FIXME: quick hack, redo properly
3054
}
3055
button { // +/- buttons on GtkVolumeButton popup
3057
}
3058
}
3059
/**********************
3062
* Window Decorations *
3063
*********************/
3064
decoration {
3065
transition: box-shadow $material_duration $material_timing_function;
3066
border-radius: 2px 2px 0 0;
3067
box-shadow: $z-depth-4, 0 16px 16px transparent;
3068
// FIXME rationalize shadows
3070
// this is used for the resize cursor area
3072
margin: 8px;
3073
&:backdrop {
3075
// the transparent shadow here is to enforce that the shadow extents don't
3076
// change when we go to backdrop, to prevent jumping windows.
3077
// The biggest shadow should be in the same order then in the active state
3078
// or the jumping will happen during the transition.
3079
box-shadow: $z-depth-2, 0 16px 16px transparent;
3080
}
3081
.fullscreen &,
3083
.tiled & { border-radius: 0; }
3084
.popup & { box-shadow: none; }
3086
// server-side decorations as used by mutter
3088
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3089
.csd.popup & {
3091
border-radius: 2px;
3092
box-shadow: $z-depth-2;
3093
}
3094
tooltip.csd & {
3096
border-radius: 2px;
3097
box-shadow: $z-depth-2;
3098
}
3099
messagedialog.csd & {
3101
border-radius: 2px;
3102
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3103
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3105
}
3106
.solid-csd & {
3108
margin: 4px;
3109
// border: solid 1px $borders_color;
3110
border-radius: 0;
3111
box-shadow: none;
3112
background-color: $bg_color;
3113
}
3114
}
3115
// Window Close button
3117
button.titlebutton {
3118
// @extend %button_basic.flat;
3119
@extend %button_basic.image-button;
3121
.selection-mode & {
3123
}
3124
}
3125
// catch all extend :)
3128
%selected_items {
3130
background-color: $selected_bg_color;
3131
@at-root %nobg_selected_items, & {
3133
color: $selected_fg_color;
3134
&:disabled { color: $insensitive_selected_fg_color; }
3136
}
3137
}
3138
.monospace { font: Monospace; }
3140
/**********************
3143
* Touch Copy & Paste *
3144
*********************/
3145
//touch selection handlebars for the Popover.osd above
3146
cursor-handle {
3147
border-radius: 100px;
3148
background-color: $accent_bg_color;
3149
background-image: none;
3150
&.top:dir(ltr), &.bottom:dir(rtl) {
3152
padding-left: 6px;
3153
border-top-right-radius: 0;
3154
}
3155
&.bottom:dir(ltr), &.top:dir(rtl) {
3157
padding-right: 6px;
3158
border-top-left-radius: 0;
3159
}
3160
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3162
-GtkWidget-text-handle-width: 24;
3163
-GtkWidget-text-handle-height: 30;
3164
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3166
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3167
url('#{$_url}@2.png'));
3168
}
3169
}
3170
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3172
button.circular { // FIXME: aggregate to buttons
3174
border-radius: 100px;
3175
-gtk-outline-radius: 100px;
3176
label { padding: 0; }
3178
}
3179
// shortcut window keys
3181
.keycap {
3182
min-width: 28px - 8px * 2;
3183
min-height: 28px - 2px;
3184
margin-top: 2px;
3185
padding-bottom: 2px;
3186
padding-left: 8px;
3187
padding-right: 8px;
3188
border: solid 1px $borders_color;
3190
border-radius: 2px + 1px;
3191
box-shadow: inset 0 -2px $borders_color;
3192
background-color: $base_color;
3193
color: $fg_color;
3194
font-size: smaller;
3195
}
3196
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3198
transition: $material_transition;
3199
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3200
caret-color: $accent_bg_color;
3201
}
3202
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3204
stackswitcher button.circular,
3206
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3207
min-width: $medium_size;
3208
min-height: $medium_size;
3209
padding: 0;
3210
}
3211