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
* {
18
padding: 0;
19
background-clip: padding-box;
20
-GtkToolButton-icon-spacing: 4;
22
-GtkTextView-error-underline-color: $error_color;
23
// The size for scrollbars. The slider is 2px smaller, but we keep it
25
// up so that the whole area is sensitive to button presses for the
26
// slider. The stepper button is larger in both directions, the slider
27
// only in the width
28
-GtkScrolledWindow-scrollbar-spacing: 0;
30
-GtkToolItemGroup-expander-size: 11;
32
-GtkTreeView-expander-size: 11;
33
-GtkTreeView-horizontal-separator: 4;
35
-GtkWidget-text-handle-width: 24;
37
-GtkWidget-text-handle-height: 24;
38
-GtkDialog-button-spacing: 4;
40
-GtkDialog-action-area-border: 0;
41
// We use the outline properties to signal the focus properties
43
// to the adwaita engine: using real CSS properties is faster,
44
// and we don't use any outlines for now.
45
outline-style: solid;
47
outline-width: 2px;
48
outline-color: $track_color;
49
outline-offset: -4px;
50
-gtk-outline-radius: 2px;
51
-gtk-secondary-caret-color: $selected_bg_color;
53
}
54
/***************
57
* Base States *
58
***************/
59
.background {
60
background-color: $bg_color;
61
color: $fg_color;
62
}
63
/*
65
These wildcard seems unavoidable, need to investigate.
66
Wildcards are bad and troublesome, use them with care,
67
or better, just don't.
68
Everytime a wildcard is used a kitten dies, painfully.
69
*/
70
*:disabled { -gtk-icon-effect: dim; }
72
.gtkstyle-fallback {
74
background-color: $bg_color;
75
color: $fg_color;
76
&:hover {
78
background-color: darken($bg_color, 5%);
79
color: $fg_color;
80
}
81
&:active {
83
background-color: darken($bg_color, 10%);
84
color: $fg_color;
85
}
86
&:disabled {
88
background-color: $bg_color;
89
color: $insensitive_fg_color;
90
}
91
&:selected {
93
background-color: $selected_bg_color;
94
color: $selected_fg_color;
95
}
96
}
97
.view,
99
%view {
100
@extend row.activatable;
101
background-color: $base_color;
103
color: $fg_color;
104
&:hover, &:active, &:selected { border-radius: 2px; }
106
&:disabled {
108
// background-color: $secondary_base_color;
109
color: $insensitive_fg_color;
110
}
111
&:selected { @extend %selected_items; }
113
}
114
.view,
116
textview {
117
text {
118
// @extend %view;
119
background-color: $base_color;
121
color: $fg_color;
122
&:disabled {
124
// background-color: $secondary_base_color;
125
color: $insensitive_fg_color;
126
}
127
selection { @extend %selected_items; }
129
}
130
}
131
textview border {
133
background-color: $secondary_base_color;
134
background-image: image($borders_color); // HACK: the border node just draws background so, using a background-image to draw the border
135
background-repeat: no-repeat;
136
color: $tertiary_fg_color;
137
&.bottom {
139
background-size: 100% 1px;
140
background-position: top;
141
}
142
&.top {
144
background-size: 100% 1px;
145
background-position: bottom;
146
}
147
&.left {
149
background-size: 1px 100%;
150
background-position: right;
151
}
152
&.right {
154
background-size: 1px 100%;
155
background-position: left;
156
}
157
}
158
iconview { @extend .view; }
160
.rubberband,
162
rubberband {
163
border: 1px solid $secondary_selected_bg_color;
164
background-color: scale-alpha($secondary_selected_bg_color, $lower_opacity);
165
}
166
flowbox {
168
rubberband { @extend rubberband; }
169
flowboxchild {
171
outline-offset: -2px;
172
padding: 4px;
173
border-radius: 2px;
174
&:selected { @extend %selected_items; }
176
}
177
}
178
label {
180
&.separator {
181
@extend .dim-label;
182
color: $fg_color;
184
}
185
row:selected &,
187
&:selected { @extend %nobg_selected_items; }
188
selection {
190
background-color: $selected_bg_color;
191
color: $selected_fg_color;
192
}
193
&:disabled {
195
color: $insensitive_fg_color;
196
selection { @extend %selected_items:disabled; }
198
}
199
}
200
.dim-label { opacity: $hint_opacity; }
202
assistant {
204
.sidebar {
205
padding: 4px 0;
206
// background-color: $base_color;
207
// border-top: 1px solid $borders_color;
208
}
209
// &.csd .sidebar { border-top-style: none; }
211
.sidebar label {
213
min-height: $medium_size;
214
padding: 0 12px;
215
color: $tertiary_fg_color;
216
font-weight: 500;
217
&.highlight { color: $fg_color; }
219
}
220
}
221
%osd, .osd { opacity: $higher_opacity; }
223
/*********************
226
* Spinner Animation *
227
*********************/
228
@keyframes spin {
229
to { -gtk-icon-transform: rotate(1turn); }
230
}
231
@keyframes spin_colors {
233
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
234
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
235
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
236
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
237
}
238
spinner {
240
background: none;
241
opacity: 0; // non spinning spinner makes no sense
242
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
243
&:checked {
245
opacity: 1;
246
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
247
&:disabled { opacity: $disabled_opacity; }
249
}
250
}
251
/****************
254
* Text Entries *
255
****************/
256
%entry,
257
entry {
258
%entry_basic, & {
259
min-height: $medium_size;
260
padding: 0 8px;
261
border-radius: 2px;
262
@include entry(normal);
264
&:focus { @include entry(focus); }
266
&:disabled { @include entry(insensitive); }
268
&.flat {
270
border-radius: 0;
271
@include entry(flat-normal);
273
&:focus { @include entry(flat-focus); }
275
&:disabled { @include entry(flat-insensitive); }
277
}
278
image { // icons inside the entry
280
color: gtkalpha(currentColor, $enabled_opacity);
281
&:hover, &:active { color: currentColor; }
283
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
285
&.left { padding-left: 2px; padding-right: 6px; }
287
&.right { padding-left: 6px; padding-right: 2px; }
289
}
290
undershoot {
292
&.left { @include undershoot(left); }
293
&.right { @include undershoot(right); }
295
}
296
selection { @extend %selected_items; }
298
// entry error and warning style
300
@each $e_type, $e_color in (error, $error_color),
301
(warning, $warning_color) {
302
&.#{$e_type} {
303
@include entry(normal, $e_color);
304
&:focus { @include entry(focus, $e_color); }
306
&:disabled { @include entry(insensitive, $e_color); }
308
&.flat {
310
@include entry(flat-normal, $e_color);
311
&:focus { @include entry(flat-focus, $e_color); }
313
&:disabled { @include entry(flat-insensitive, $e_color); }
315
}
316
}
317
}
318
&:drop(active) {
320
// box-shadow: inset 0 0 0 2px $accent_bg_color;
321
}
322
.osd & {
324
}
325
}
326
progress {
328
margin: 2px -6px;
329
border-style: none none solid;
330
border-width: 2px;
331
border-color: $selected_bg_color;
332
// border-radius: 0;
333
// box-shadow: none;
334
background-color: transparent;
335
// background-image: none;
336
}
337
// linked entries
339
.linked:not(.vertical) > &:not(.flat) { @extend %linked; }
340
// Vertically linked entries
342
.linked.vertical > &:not(.flat) { @extend %linked_vertical; }
343
}
344
treeview acceleditor > label { background-color: $selected_bg_color; }
346
treeview entry {
348
&.flat, & {
349
min-height: 0;
350
padding: 2px;
351
border-radius: 0;
352
background-color: $base_color;
353
&, &:focus {
355
border-image: none;
356
box-shadow: none;
357
}
358
}
359
}
360
/***********
363
* Buttons *
364
***********/
365
// stuff for .needs-attention
366
@keyframes needs_attention {
367
from {
368
background-image: -gtk-gradient(radial,
369
center center, 0,
370
center center, 0.001,
371
to($accent_bg_color),
372
to(transparent));
373
}
374
to {
376
background-image: -gtk-gradient(radial,
377
center center, 0,
378
center center, 0.5,
379
to($accent_bg_color),
380
to(transparent));
381
}
382
}
383
%button,
385
button {
386
@at-root %button_basic, & {
387
min-height: 24px;
388
min-width: 16px;
389
padding: 6px 10px;
390
border-radius: 2px;
391
font-weight: 500;
392
@include button(normal);
394
&:hover { @include button(hover); }
396
&:active { @include button(active); }
398
&:disabled { @include button(insensitive); }
400
&:checked { @include button(checked); }
402
&:checked:disabled { @include button(checked-insensitive); }
404
&.flat {
406
@include button(flat-normal);
407
&:hover { @include button(flat-hover); }
409
&:active { @include button(flat-active); }
411
&:disabled { @include button(flat-insensitive); }
413
&:checked { @include button(flat-checked); }
415
&:checked:disabled { @include button(flat-checked-insensitive); }
417
}
418
&.image-button {
420
min-width: 24px;
421
padding: 6px;
422
-gtk-outline-radius: 100px;
423
border-radius: 100px;
424
}
425
&.text-button {
427
padding-left: 16px;
428
padding-right: 16px;
429
}
430
&.text-button.image-button {
432
padding-left: 10px;
433
padding-right: 10px;
434
-gtk-outline-radius: 2px;
435
border-radius: 2px;
436
label {
438
&:last-child { padding-left: 2px; padding-right: 6px; }
439
&:first-child { padding-left: 6px; padding-right: 2px; }
440
}
441
}
442
.linked > & { @extend %linked; }
444
.linked.vertical > & { @extend %linked_vertical; }
446
.linked > &.flat,
448
.linked.vertical > &.flat {
449
border-radius: 2px;
450
&.image-button {
452
-gtk-outline-radius: 100px;
453
border-radius: 100px;
454
}
455
&.text-button.image-button {
457
-gtk-outline-radius: 2px;
458
border-radius: 2px;
459
}
460
}
461
&:drop(active) {
463
// box-shadow: inset 0 0 0 2px $accent_bg_color;
464
}
465
}
466
@at-root %button_selected, row:selected & {
468
&:disabled { color: $insensitive_secondary_selected_fg_color; }
469
&.flat {
471
color: $secondary_selected_fg_color;
472
&:hover, &:active { color: $selected_fg_color; }
474
&:disabled { color: $insensitive_secondary_selected_fg_color; }
476
}
477
}
478
separator {
480
min-width: 0;
481
min-height: 0;
482
background: transparent;
483
}
484
// big standalone buttons like in Documents pager
486
&.osd {
487
padding: 12px 16px;
488
&.image-button { padding: 12px; }
490
&:disabled { opacity: 0; }
492
}
493
//overlay / OSD style
495
@at-root %osd_button,
496
.osd & {
497
}
498
// Suggested and Destructive Action buttons
500
@each $b_type, $b_color in (suggested-action, $suggested_color),
501
(destructive-action, $destructive_color) {
502
&.#{$b_type} {
503
background-color: $b_color;
504
color: $selected_fg_color;
505
// @include button(normal, $b_color, white);
507
// &:hover { @include button(hover, $b_color, white); }
509
// &:active, &:checked { @include button(active, $b_color, white); }
511
&:disabled { @include button(insensitive, $b_color, white); }
513
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
515
&.flat {
517
background-color: transparent;
518
color: $b_color;
519
// @include button(flat-normal, $b_color, white);
521
// &:hover { @include button(flat-hover, $b_color, white); }
523
// &:active, &:checked { @include button(flat-active, $b_color, white); }
525
&:disabled { @include button(flat-insensitive, $b_color, white); }
527
}
528
.osd & {
530
}
531
}
532
}
533
.stack-switcher > & {
535
// to position the needs attention dot, padding is added to the button
536
// child, a label needs just lateral padding while an icon needs vertical
537
// padding added too.
538
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
540
> label {
542
padding-left: 6px; // label padding
543
padding-right: 6px; //
544
}
545
> image {
547
padding-left: 6px; // image padding
548
padding-right: 6px; //
549
padding-top: 3px; //
550
padding-bottom: 3px; //
551
}
552
&.text-button {
554
// compensate text-button paddings
555
padding-left: 10px;
556
padding-right: 10px;
557
}
558
&.image-button {
560
// we want image buttons to have a 1:1 aspect ratio, so compensation
561
// of the padding added to the GtkImage is needed
562
padding-left: 4px;
563
padding-right: 4px;
564
}
565
&.needs-attention {
567
> label,
568
> image { @extend %needs_attention; }
569
&:checked {
571
> label,
572
> image {
573
animation: none;
574
background-image: none;
575
}
576
}
577
}
578
}
579
// inline-toolbar buttons
581
.inline-toolbar & {
582
@extend %button_basic.flat;
583
&:not(.text-button) { @extend %button_basic.image-button; }
585
}
586
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
588
}
589
%needs_attention {
591
animation: needs_attention $material_duration $material_timing_function forwards;
592
background-repeat: no-repeat;
593
background-position: right 3px;
594
background-size: 6px 6px;
595
&:dir(rtl) { background-position: left 3px; }
597
}
598
// all the following is for the +|- buttons on inline toolbars, that way
600
// should really be deprecated...
601
.inline-toolbar toolbutton > button { // redefining the button look is
602
// needed since those are flat...
603
}
604
// More inline toolbar buttons
606
toolbar.inline-toolbar toolbutton {
607
// > button.flat { @extend %linked_middle; }
608
// &:first-child > button.flat { @extend %linked:first-child; }
610
// &:last-child > button.flat { @extend %linked:last-child; }
612
// &:only-child > button.flat { @extend %linked:only-child; }
614
}
615
%linked_middle {
617
border-radius: 0;
618
}
619
%linked {
621
-gtk-outline-radius: 2px;
622
@extend %linked_middle;
624
&:first-child {
626
border-top-left-radius: 2px;
627
border-bottom-left-radius: 2px;
628
}
629
&:last-child {
631
border-top-right-radius: 2px;
632
border-bottom-right-radius: 2px;
633
}
634
&:only-child {
636
border-radius: 2px;
637
}
638
}
639
%linked_vertical_middle {
641
border-radius: 0;
642
}
643
%linked_vertical{
645
-gtk-outline-radius: 2px;
646
@extend %linked_vertical_middle;
648
&:first-child {
650
border-top-left-radius: 2px;
651
border-top-right-radius: 2px;
652
}
653
&:last-child {
655
border-bottom-left-radius: 2px;
656
border-bottom-right-radius: 2px;
657
}
658
&:only-child {
660
border-radius: 2px;
661
}
662
}
663
/* menu buttons */
665
modelbutton.flat,
666
.menuitem.button.flat {
667
min-height: $menuitem_size;
668
padding-left: 8px;
669
padding-right: 8px;
670
border-radius: 2px;
671
color: inherit;
672
@extend %button_basic.flat;
674
&:selected { @extend %selected_items; }
676
check,
678
radio {
679
&, &:hover { background-image: none; }
680
&:active { animation: none; }
682
}
683
check:not(:indeterminate):checked:active { animation: check_check $material_duration $material_timing_function; }
685
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_duration $material_timing_function; }
687
// FIXME: remove the following when the checks/radios rewrite lands
689
check:last-child,
690
radio:last-child { margin-left: 8px; }
691
check:first-child,
693
radio:first-child { margin-right: 8px; }
694
}
695
modelbutton.flat arrow {
697
background: none;
698
&:hover { background: none; }
700
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
702
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
704
}
705
button.color {
707
min-height: $small_size;
708
min-width: $small_size;
709
padding: $container_padding;
710
colorswatch:only-child {
712
// &, overlay { border-radius: 0; }
713
}
714
}
715
/*********
718
* Links *
719
*********/
720
*:link {
721
&, &:hover, &:active { color: $link_color; }
722
&:visited {
724
&, &:hover, &:active { color: $link_visited_color; }
725
}
726
@at-root %link_selected,
728
&:selected,
729
*:selected & { color: $selected_fg_color; }
730
}
731
button:link,
733
button:visited {
734
@extend *:link;
735
> label { text-decoration-line: underline; }
737
}
738
/*****************
740
* GtkSpinButton *
741
*****************/
742
spinbutton {
743
&:not(.vertical) {
744
// in this horizontal configuration, the whole spinbutton
745
// behaves as the entry, so we extend the entry styling
746
// and nuke the style on the internal entry
747
@extend %entry;
748
padding: 0;
750
%spinbutton_entry,
752
entry {
753
min-width: $large_size - 16px;
754
// reset all the other props since the spinbutton node is styled here
755
margin: 0;
756
border-image: none;
757
border-radius: 0;
758
box-shadow: none;
759
background-color: transparent;
760
}
761
button {
763
min-height: $small_size;
764
min-width: $small_size;
765
// margin: $container_padding;
766
padding: 0;
767
border: solid $container_padding transparent;
768
@extend %button_basic.flat;
770
@extend %button_basic.image-button;
772
&.up { margin-left: -$container_padding / 2; }
774
&.down { margin-right: -$container_padding / 2; }
776
}
777
}
778
// OSD horizontal
780
.osd &:not(.vertical) {
781
button {
782
}
783
}
784
// Vertical
786
&.vertical {
787
// in the vertical configuration, we treat the spinbutton
788
// as a box, and tweak the style of the entry in the middle
789
// so that it's linked
790
// FIXME: this should not be set at all, but otherwise it gets the wrong
792
// color
793
&:disabled { color: $insensitive_fg_color; }
794
&:drop(active) {
796
box-shadow: none;
797
}
798
entry {
800
min-height: $medium_size;
801
min-width: $large_size;
802
padding: 0;
803
}
804
button {
806
min-height: $medium_size;
807
min-width: $large_size;
808
padding: 0;
809
@extend %button_basic.flat;
811
&.up { border-radius: 2px 2px 0 0; }
813
&.down { border-radius: 0 0 2px 2px; }
815
}
816
}
817
// OSD vertical
819
.osd &.vertical button:first-child {
820
}
821
// Misc
823
treeview &:not(.vertical) {
824
min-height: 0;
825
border-style: none;
826
border-radius: 0;
827
entry {
829
min-height: 0;
830
padding: 1px 2px;
831
}
832
}
833
}
834
/**************
837
* ComboBoxes *
838
**************/
839
combobox {
840
arrow {
841
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
842
min-height: 16px;
843
min-width: 16px;
844
}
845
menu,
847
.menu {
848
padding: 2px 0;
849
menuitem {
851
min-height: $medium_size;
852
padding: 0 10px;
853
}
854
}
855
&.linked {
857
button:nth-child(2) {
858
&:dir(ltr) { @extend %linked:last-child; }
859
&:dir(rtl) { @extend %linked:first-child; }
860
}
861
}
862
&:drop(active) { // FIXME: untested
864
box-shadow: none;
865
// button.combo { @extend %button_basic:drop(active); }
867
}
868
}
869
.linked > combobox > box > button.combo {
871
// the combo is a composite widget so the way we do button linking doesn't
872
// work, special case needed. See
873
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
874
&:dir(ltr),
876
&:dir(rtl) { @extend %linked_middle; } // specificity bump
877
}
878
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
880
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
881
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
882
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
884
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
885
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
886
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
887
/************
890
* Toolbars *
891
************/
892
toolbar {
893
-GtkWidget-window-dragging: true;
894
padding: $container_padding / 2;
895
background-color: $bg_color;
896
// on OSD
898
.osd & { background-color: transparent; }
899
// stand-alone OSD toolbars
901
&.osd {
902
transition: box-shadow $material_duration $material_timing_function;
903
padding: $container_padding;
904
border-radius: 2px;
905
box-shadow: $z-depth-2;
906
background-color: $base_color;
907
&:backdrop { box-shadow: $z-depth-1; }
909
&.left,
911
&.right,
912
&.top,
913
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
914
button { @extend %button_basic.flat; }
916
}
917
// toolbar separators
919
&.horizontal separator { margin: $container_padding / 2; }
920
&.vertical separator { margin: $container_padding / 2; }
921
&:not(.inline-toolbar):not(.osd) {
923
scale,
924
entry,
925
spinbutton,
926
button { margin: $container_padding / 2; }
927
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
929
}
930
}
931
//searchbar, location-bar & inline-toolbar
933
.inline-toolbar {
934
padding: $container_padding;
935
border-style: solid;
936
border-width: 0 1px 1px;
937
border-color: $borders_color;
938
background-color: $secondary_base_color;
939
}
940
searchbar,
942
.location-bar {
943
padding: $container_padding;
944
border-style: solid;
945
border-width: 0 0 1px;
946
border-color: $borders_color;
947
background-color: $dark_color;
948
background-clip: border-box;
949
}
950
/***************
953
* Header bars *
954
***************/
955
%titlebar,
956
headerbar {
957
min-height: $large_size;
958
padding: 0 $container_padding;
959
border-width: 0 0 1px;
960
border-style: solid;
961
border-color: $borders_color;
962
box-shadow: inset 0 1px $highlight_color;
963
background-color: $dark_color;
964
background-clip: border-box;
965
&:backdrop {
967
// background-color: $dark_color;
968
}
969
.title {
971
padding-left: 12px;
972
padding-right: 12px;
973
font-weight: bold;
974
}
975
.subtitle {
977
padding-left: 12px;
978
padding-right: 12px;
979
font-size: smaller;
980
@extend .dim-label;
982
}
983
button:not(.suggested-action):not(.destructive-action) {
985
@extend %button_basic.flat;
986
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
988
$selected_bg_color 0%,
989
transparent 0%)
990
0 0 0 / 0 0 0px;
991
&:checked {
993
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
994
$selected_bg_color 100%,
995
transparent 0%)
996
0 0 2 / 0 0 2px;
997
background-color: transparent;
998
color: $fg_color;
999
&:disabled {
1001
background-color: transparent;
1002
color: $insensitive_fg_color;
1003
> label { color: inherit; }
1005
}
1006
}
1007
}
1008
&.selection-mode {
1010
animation: header_ripple_effect $material_duration $material_timing_function forwards;
1011
box-shadow: inset 0 1px $secondary_highlight_color;
1012
// background-color: $selected_bg_color;
1013
color: $selected_fg_color;
1014
&:backdrop {
1016
}
1017
.subtitle:link { @extend *:link:selected; }
1019
button:not(.suggested-action):not(.destructive-action) {
1021
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1022
$selected_fg_color 0%,
1023
transparent 0%)
1024
0 0 0 / 0 0 0px;
1025
// color: $secondary_selected_fg_color;
1026
&, &:hover, &:active, &:checked { color: $selected_fg_color; }
1028
&:disabled {
1030
color: $insensitive_selected_fg_color;
1031
> label { color: inherit; }
1033
}
1034
&:checked {
1036
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1037
$selected_fg_color 100%,
1038
transparent 0%)
1039
0 0 2 / 0 0 2px;
1040
color: $selected_fg_color;
1041
&:disabled {
1043
color: $insensitive_selected_fg_color;
1044
> label { color: inherit; }
1046
}
1047
}
1048
}
1049
.selection-menu {
1051
padding-left: 16px;
1052
padding-right: 16px;
1053
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1055
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1057
}
1058
}
1059
.tiled &,
1061
.maximized & {
1062
border-radius: 0; // squared corners when the window is max'd or tiled
1063
box-shadow: none;
1064
}
1065
&.default-decoration {
1067
min-height: $small_size;
1068
padding: $container_padding;
1069
border-width: 0;
1070
button.titlebutton {
1072
min-height: $small_size;
1073
min-width: $small_size;
1074
margin: 0;
1075
padding: 0;
1076
}
1077
}
1078
}
1079
headerbar {
1081
// add vertical margins to headerbar entries, buttons and separators to avoid them spanning the whole height
1082
entry,
1083
spinbutton,
1084
// separator,
1085
button {
1086
margin-top: $container_padding;
1087
margin-bottom: $container_padding;
1088
}
1089
}
1090
.titlebar {
1092
border-top-left-radius: 2px;
1093
border-top-right-radius: 2px;
1094
}
1095
headerbar {
1097
separator:first-child + &, // tackles the paned container case
1098
&:first-child {
1099
border-top-left-radius: 2px;
1100
.tiled &,
1102
.maximized & { border-radius: 0; }
1103
}
1104
&:last-child {
1106
border-top-right-radius: 2px;
1107
.tiled &,
1109
.maximized & { border-radius: 0; }
1110
}
1111
}
1112
.titlebar:not(headerbar) {
1114
window.csd > & {
1115
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1116
padding: 0;
1117
background-color: transparent;
1118
background-image: none;
1119
border-style: none;
1120
box-shadow: none;
1121
}
1122
> separator {
1124
background-color: $dark_color;
1125
background-image: image($borders_color);
1126
}
1127
@extend %titlebar;
1129
}
1130
/************
1133
* Pathbars *
1134
************/
1135
.path-bar button {
1136
&.text-button, &.image-button, & {
1137
padding-left: 6px;
1138
padding-right: 6px;
1139
}
1140
&.text-button.image-button, & {
1142
// label:last-child { padding-left: 2px; padding-right: 8px; }
1143
// label:first-child { padding-left: 8px; padding-right: 2px; }
1144
}
1145
image {
1147
padding-left: 4px;
1148
padding-right: 4px;
1149
}
1150
&.slider-button {
1152
padding-left: 0;
1153
padding-right: 0;
1154
}
1155
}
1156
/**************
1159
* Tree Views *
1160
**************/
1161
treeview.view {
1162
-GtkTreeView-grid-line-width: 1;
1163
-GtkTreeView-grid-line-pattern: '';
1164
-GtkTreeView-tree-line-width: 1;
1165
-GtkTreeView-tree-line-pattern: '';
1166
-GtkTreeView-expander-size: 16;
1167
border-left-color: $track_color; // this is actually the tree lines color,
1169
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1170
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1172
&:hover, &:active, &:selected { border-radius: 0; }
1174
&.separator {
1176
min-height: 1px + 2px * 2;
1177
color: $borders_color;
1178
}
1179
&:drop(active) {
1181
border-style: solid none;
1182
border-width: 1px;
1183
border-color: $accent_bg_color;
1184
&.after { border-top-style: none; }
1186
&.before { border-bottom-style: none; }
1188
}
1189
&.expander {
1191
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1192
-gtk-icon-transform: rotate(-90deg);
1193
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1195
&:checked { -gtk-icon-transform: unset; }
1197
color: $secondary_fg_color;
1199
&:hover, &:active { color: $fg_color; }
1201
&:disabled { color: $insensitive_secondary_fg_color; }
1203
&:selected {
1205
color: $secondary_selected_fg_color;
1206
&:hover, &:active { color: $selected_fg_color; }
1208
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1210
}
1211
}
1212
&.progressbar { // progress bar in treeviews
1214
border-style: none none solid;
1215
border-width: $bar_size;
1216
border-color: $selected_bg_color;
1217
background-color: transparent;
1218
background-image: none;
1219
&:selected { border-color: currentColor; }
1221
}
1222
&.trough { // progress bar trough in treeviews
1224
border-style: none none solid;
1225
border-width: $bar_size;
1226
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1227
background-color: transparent;
1228
background-image: none;
1229
&:selected { border-color: $track_color; }
1231
}
1232
header {
1234
button {
1235
@extend row.activatable;
1236
padding: 2px 6px;
1238
border-style: none solid solid none;
1239
border-width: 1px;
1240
border-color: $borders_color;
1241
border-radius: 0;
1242
background-clip: border-box;
1243
&, &:hover, &:active { box-shadow: none; }
1245
&, &:disabled { background-color: $base_color; }
1247
&:last-child { border-right-style: none; }
1249
}
1250
}
1251
button.dnd,
1253
header.button.dnd { // for treeview-like derive widgets
1254
padding: 2px 6px;
1255
border-style: none solid solid;
1256
border-width: 1px;
1257
border-color: $borders_color;
1258
border-radius: 0;
1259
box-shadow: none;
1260
background-color: $base_color;
1261
background-clip: border-box;
1262
color: $selected_bg_color;
1263
}
1264
}
1265
/*********
1268
* Menus *
1269
*********/
1270
menubar,
1271
.menubar {
1272
-GtkWidget-window-dragging: true;
1273
padding: 0;
1274
box-shadow: inset 0 -1px $borders_color;
1275
background-color: $dark_color;
1276
> menuitem {
1278
transition: $material_transition;
1279
min-height: 20px;
1280
padding: 4px 8px;
1281
color: $secondary_fg_color;
1282
&:hover { //Seems like it :hover even with keyboard focus
1284
box-shadow: inset 0 -2px $selected_bg_color;
1285
color: $fg_color;
1286
}
1287
&:disabled { color: $insensitive_secondary_fg_color; }
1289
}
1290
}
1291
menu,
1293
.menu {
1294
margin: 4px 0;
1295
padding: 4px 0;
1296
background-color: $base_color;
1297
border: 1px solid $borders_color; // adds borders in a non composited env
1298
.csd & {
1300
border: none; // axes borders in a composited env
1301
border-radius: 2px;
1302
}
1303
menuitem {
1305
min-height: 20px;
1306
min-width: 40px;
1307
padding: 4px 8px;
1308
font: initial;
1309
text-shadow: none;
1310
&:hover {
1312
// background-color: gtkalpha(currentColor, $lower_opacity / 2);
1313
background-color: $selected_bg_color;
1314
color: $selected_fg_color;
1315
}
1316
&:disabled { color: $insensitive_fg_color; }
1318
// submenu indicators
1320
arrow {
1321
min-height: 16px;
1322
min-width: 16px;
1323
&:dir(ltr) {
1325
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1326
margin-left: 8px;
1327
}
1328
&:dir(rtl) {
1330
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1331
margin-right: 8px;
1332
}
1333
}
1334
}
1335
// overflow arrows
1337
> arrow {
1338
min-height: 16px;
1339
min-width: 16px;
1340
padding: 4px;
1341
border-radius: 0;
1342
background-color: $base_color;
1343
color: $secondary_fg_color;
1344
&.top {
1346
margin-top: -4px;
1347
border-bottom: 1px solid $borders_color;
1348
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1349
}
1350
&.bottom {
1352
margin-bottom: -4px;
1353
border-top: 1px solid $borders_color;
1354
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1355
}
1356
&:hover {
1358
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1359
color: $fg_color;
1360
}
1361
&:disabled {
1363
border-color: transparent;
1364
background-color: transparent;
1365
color: transparent;
1366
// color: $insensitive_secondary_fg_color;
1367
}
1368
}
1369
separator { margin: 4px 0; }
1371
}
1372
menuitem {
1374
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1375
check,
1377
radio {
1378
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1379
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1380
}
1381
}
1382
.csd.popup { border-radius: 2px; }
1384
/***************
1387
* Popovers *
1388
***************/
1389
popover.background {
1390
transition: box-shadow $material_duration $material_timing_function;
1391
padding: 0;
1392
border-radius: 2px + 1px;
1393
box-shadow: $z-depth-2;
1394
background-color: $secondary_base_color;
1395
&:backdrop { box-shadow: $z-depth-1; }
1397
&, .csd & {
1399
border-style: solid;
1400
border-width: 1px;
1401
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1402
}
1403
> list,
1405
> .view,
1406
> toolbar {
1407
border-style: none;
1408
box-shadow: none;
1409
background-color: transparent;
1410
}
1411
&, .csd & {
1413
&.touch-selection,
1414
&.magnifier,
1415
&.osd { @extend %osd; }
1416
}
1417
separator { margin: 4px 0; }
1419
list separator { margin: 0; }
1421
checkbutton,
1423
radiobutton { @extend modelbutton.flat; }
1424
}
1425
/*************
1427
* Notebooks *
1428
*************/
1429
notebook {
1430
> header {
1431
border-width: 1px;
1432
border-color: $borders_color;
1433
background-color: $dark_color;
1434
background-clip: border-box;
1435
&.top {
1437
border-bottom-style: solid;
1438
> tabs {
1439
> tab:not(.reorderable-page) {
1440
margin-bottom: -1px;
1441
&:hover { box-shadow: inset 0 -2px $track_color; }
1443
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1445
}
1446
}
1447
}
1448
&.bottom {
1450
border-top-style: solid;
1451
> tabs {
1452
> tab:not(.reorderable-page) {
1453
margin-top: -1px;
1454
&:hover { box-shadow: inset 0 2px $track_color; }
1456
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1458
}
1459
}
1460
}
1461
&.left {
1463
border-right-style: solid;
1464
> tabs {
1465
> tab:not(.reorderable-page) {
1466
margin-right: -1px;
1467
&:hover { box-shadow: inset -2px 0 $track_color; }
1469
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1471
}
1472
}
1473
}
1474
&.right {
1476
border-left-style: solid;
1477
> tabs {
1478
> tab:not(.reorderable-page) {
1479
margin-left: -1px;
1480
&:hover { box-shadow: inset 2px 0 $track_color; }
1482
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1484
}
1485
}
1486
}
1487
&.top > tabs > arrow {
1489
@extend %notebook_vert_arrows;
1490
border-top-style: none;
1492
}
1493
&.bottom > tabs > arrow {
1495
@extend %notebook_vert_arrows;
1496
border-bottom-style: none;
1498
}
1499
@at-root %notebook_vert_arrows {
1501
padding-left: 4px;
1502
padding-right: 4px;
1503
&.down {
1505
margin-left: -8px;
1506
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1507
}
1508
&.up {
1510
margin-right: -8px;
1511
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1512
}
1513
}
1514
&.left > tabs > arrow {
1516
@extend %notebook_horz_arrows;
1517
border-left-style: none;
1519
}
1520
&.right > tabs > arrow {
1522
@extend %notebook_horz_arrows;
1523
border-right-style: none;
1525
}
1526
@at-root %notebook_horz_arrows {
1528
padding-top: 4px;
1529
padding-bottom: 4px;
1530
&.down {
1532
margin-top: -8px;
1533
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1534
}
1535
&.up {
1537
margin-bottom: -8px;
1538
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1539
}
1540
}
1541
> tabs > arrow {
1543
@extend %button_basic.flat;
1544
min-height: 16px;
1546
min-width: 16px;
1547
border-radius: 0;
1548
}
1549
tab {
1551
transition: $material_transition;
1552
min-height: 24px;
1553
min-width: 24px;
1554
padding: 6px 12px;
1555
outline-offset: -6px;
1557
border-width: 1px; // for reorderable tabs
1559
border-color: transparent; //
1560
color: $secondary_fg_color;
1562
font-weight: 500;
1563
&:hover {
1565
color: $fg_color;
1566
&.reorderable-page {
1568
border-color: $borders_color;
1569
background-color: $bg_color;
1570
}
1571
}
1572
&:disabled { color: $insensitive_secondary_fg_color; }
1574
&:checked {
1576
color: $fg_color;
1577
&:disabled { color: $insensitive_fg_color; }
1579
&:not(.reorderable-page) { animation: tab_ripple_effect $material_duration * 2 ease-in-out; }
1581
&.reorderable-page {
1583
border-color: $borders_color;
1584
background-color: $light_color;
1585
}
1586
}
1587
// colors the button like the label, overridden otherwise
1589
button.flat {
1590
// FIXME: generalize .small-button?
1591
min-width: $small_size;
1592
min-height: $small_size;
1593
padding: 0;
1594
@extend %button_basic.image-button;
1596
&:last-child {
1598
margin-left: 6px;
1599
margin-right: -6px;
1600
}
1601
&:first-child {
1603
margin-left: -6px;
1604
margin-right: 6px;
1605
}
1606
}
1607
}
1608
&.top,
1610
&.bottom {
1611
tabs {
1612
padding-left: 8px;
1613
padding-right: 8px;
1614
&:not(:only-child) {
1616
&:first-child { margin-left: 0; }
1617
&:last-child { margin-right: 0; }
1618
}
1619
tab {
1621
&.reorderable-page {
1622
margin: 0 -1px;
1623
border-style: none solid;
1624
}
1625
}
1626
}
1627
}
1628
&.left,
1630
&.right {
1631
tabs {
1632
padding-top: 8px;
1633
padding-bottom: 8px;
1634
&:not(:only-child) {
1636
&:first-child { margin-top: 0; }
1637
&:last-child { margin-bottom: 0; }
1638
}
1639
tab {
1641
&.reorderable-page {
1642
margin: -1px 0;
1643
border-style: solid none;
1644
}
1645
}
1646
}
1647
}
1648
}
1649
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1651
background-color: $base_color;
1652
entry,
1654
spinbutton:not(.vertical) { @extend %entry.flat; }
1655
revealer entry,
1657
revealer spinbutton:not(.vertical) { @extend %entry; }
1658
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1660
}
1661
}
1662
/**************
1665
* Scrollbars *
1666
**************/
1667
scrollbar {
1668
$_slider_min_length: 24px;
1669
// disable steppers
1671
@at-root * {
1672
-GtkScrollbar-has-backward-stepper: false;
1673
-GtkScrollbar-has-forward-stepper: false;
1674
}
1675
transition: $material_transition;
1677
background-color: $base_color;
1678
background-clip: $extra_background_clip;
1679
// scrollbar border
1681
&.top { border-bottom: 1px solid $borders_color; }
1682
&.bottom { border-top: 1px solid $borders_color; }
1683
&.left { border-right: 1px solid $borders_color; }
1684
&.right { border-left: 1px solid $borders_color; }
1685
// slider
1687
slider {
1688
transition: $material_transition, margin 0, border-width 0;
1689
min-width: 8px;
1690
min-height: 8px;
1691
border: 4px solid transparent;
1692
border-radius: 100px;
1693
background-clip: padding-box;
1694
background-color: $tertiary_fg_color;
1695
&:hover { background-color: $secondary_fg_color; }
1697
&:active { background-color: $fg_color; }
1699
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1701
}
1702
&.fine-tune {
1704
slider {
1705
transition: $material_transition, margin 0, border-width 0, min-width 0, min-height 0;
1706
min-width: 4px;
1707
min-height: 4px;
1708
}
1709
&.horizontal slider { margin: 2px 0; }
1711
&.vertical slider { margin: 0 2px; }
1713
}
1714
&.overlay-indicator {
1716
&:not(.dragging):not(.hovering) {
1717
border-color: transparent;
1718
background-color: transparent;
1719
slider {
1721
min-width: 4px;
1722
min-height: 4px;
1723
margin: 2px;
1724
border: 2px solid scale-alpha($base_color, $lower_opacity);
1725
}
1726
button {
1728
min-width: 4px;
1729
min-height: 4px;
1730
margin: 2px;
1731
border: 2px solid scale-alpha($base_color, $lower_opacity);
1732
border-radius: 100px;
1733
background-color: $tertiary_fg_color;
1734
background-clip: padding-box;
1735
-gtk-icon-source: none;
1736
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1738
}
1739
&.horizontal {
1741
slider { min-width: $_slider_min_length; }
1742
button { min-width: 8px; }
1744
}
1745
&.vertical {
1747
slider { min-height: $_slider_min_length; }
1748
button { min-height: 8px; }
1750
}
1751
}
1752
&.dragging,
1754
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1755
}
1756
&.horizontal slider { min-width: $_slider_min_length; }
1758
&.vertical slider { min-height: $_slider_min_length; }
1760
// button styling
1762
button {
1763
@extend %button_basic.flat;
1764
min-width: 16px;
1765
min-height: 16px;
1766
padding: 0;
1767
border-radius: 0;
1768
}
1769
// button icons
1771
&.vertical {
1772
button {
1773
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1774
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1776
}
1777
}
1778
&.horizontal {
1780
button {
1781
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1782
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1784
}
1785
}
1786
}
1787
/**********
1790
* Switch *
1791
**********/
1792
switch {
1793
transition: $material_transition;
1794
margin: $container_padding 0;
1795
border: 4px solid transparent;
1796
border-radius: 100px;
1797
background-color: $track_color;
1798
background-clip: padding-box;
1799
font-size: 0;
1800
&:disabled { color: $insensitive_fg_color; }
1802
&:checked {
1804
background-color: scale-alpha($accent_bg_color, 0.5);
1805
&:disabled {
1807
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1808
color: $insensitive_fg_color;
1809
}
1810
}
1811
slider {
1813
@include entry(normal);
1814
transition: $material_transition, margin 0;
1816
min-width: $small_size;
1817
min-height: $small_size;
1818
margin: -4px 0 -4px -4px;
1819
-gtk-outline-radius: 100px;
1820
border-radius: 100px;
1821
background-image: -gtk-gradient(radial,
1822
center center, 0,
1823
center center, 0.5,
1824
to(transparent),
1825
to(transparent));
1826
}
1827
&:hover slider { @include entry(focus); }
1829
&:disabled slider { @include entry(insensitive); }
1831
&:checked slider {
1833
transition: $material_transition, margin 0, background-image 0;
1834
animation: needs_attention $material_duration $material_timing_function forwards;
1835
margin: -4px -4px -4px 0;
1836
// background-color: $accent_bg_color;
1837
color: $selected_fg_color;
1838
}
1839
&:checked:disabled slider { animation: none; }
1841
row:selected & {
1843
}
1844
}
1845
/*************************
1848
* Check and Radio items *
1849
*************************/
1850
// draw regular check and radio items using our PNG assets
1851
// all assets are rendered from assets.svg. never add pngs directly
1852
//selection-mode
1854
@each $s,$as in ('','-selectionmode'),
1855
(':active', '-active-selectionmode'),
1856
(':disabled', '-insensitive-selectionmode'),
1857
(':checked', '-checked-selectionmode'),
1858
(':checked:active', '-checked-active-selectionmode'),
1859
(':disabled:checked', '-checked-insensitive-selectionmode') {
1860
.view.content-view.check#{$s}:not(list) {
1861
-gtk-icon-shadow: $z-depth-1;
1862
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
1863
url("assets/checkbox#{$as}@2.png"));
1864
margin: 8px;
1865
background-color: transparent;
1866
&:hover, &:active { -gtk-icon-shadow: $z-depth-2; }
1868
&:disabled { -gtk-icon-shadow: none; }
1870
}
1871
}
1872
checkbutton.text-button, radiobutton.text-button {
1874
// this is for a nice focus on check and radios text
1875
padding: 2px 0;
1876
outline-offset: 0;
1877
label:not(:only-child) {
1879
&:first-child { margin-left: 4px; }
1880
&:last-child { margin-right: 4px; }
1882
}
1883
}
1884
check,
1886
radio {
1887
min-height: 24px;
1888
min-width: 24px;
1889
-gtk-icon-source: none;
1890
margin: -12px -8px;
1892
padding: 12px;
1893
outline-offset: 4px;
1894
// border-radius: 100%;
1895
@extend %button_basic.flat;
1897
@extend %button_basic.image-button;
1899
color: gtkalpha(currentColor, $enabled_opacity);
1901
&:hover, &:active { color: currentColor; }
1903
&:checked, &:checked:disabled { background-color: transparent; }
1905
&:checked, &:indeterminate { color: $accent_bg_color; }
1907
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1909
&:only-child { margin: -12px; }
1911
.osd & {
1913
}
1914
menu menuitem & {
1916
transition: none;
1917
margin: -16px -16px; // this is a workaround for a menu check/radio size allocation issue
1918
&:not(:checked):not(:indeterminate):hover { color: gtkalpha(currentColor, $enabled_opacity); }
1920
&, &:hover, &:disabled {
1922
background-image: none;
1923
// color: inherit;
1924
// animation: none;
1925
}
1926
}
1927
}
1928
%check,
1930
check {
1931
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1932
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1933
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1935
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1936
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1938
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1939
}
1940
%radio,
1942
radio {
1943
border-image: -gtk-gradient(radial,
1944
center center, 0,
1945
center center, 0.001,
1946
to($accent_bg_color),
1947
to(transparent))
1948
24 / 24px;
1949
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1950
-gtk-recolor(url("assets/radio-unchecked-symbolic.png")));
1951
&:checked {
1953
border-image: -gtk-gradient(radial,
1954
center center, 0,
1955
center center, (10 / 48 / 2),
1956
to($accent_bg_color),
1957
to(transparent))
1958
24 / 24px;
1959
}
1960
&:checked:disabled {
1962
border-image: -gtk-gradient(radial,
1963
center center, 0,
1964
center center, (10 / 48 / 2),
1965
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1966
to(transparent))
1967
24 / 24px;
1968
}
1969
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1971
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1972
&:indeterminate:checked {
1974
border-image: -gtk-gradient(radial,
1975
center center, 0,
1976
center center, 0.001,
1977
to($accent_bg_color),
1978
to(transparent))
1979
24 / 24px;
1980
}
1981
}
1982
// let's animate things
1984
@keyframes check_check {
1985
from { -gtk-icon-transform: rotate(90deg); }
1986
to { -gtk-icon-transform: unset; }
1987
}
1988
@keyframes check_radio {
1990
from { -gtk-icon-transform: scale(0); }
1991
to { -gtk-icon-transform: unset; }
1992
}
1993
@keyframes check_indeterminate {
1995
from { -gtk-icon-transform: unset; }
1996
50% { -gtk-icon-transform: scale(0, 1); }
1997
to { -gtk-icon-transform: unset; }
1998
}
1999
check:not(:indeterminate):checked { animation: check_check $material_duration $material_timing_function; }
2001
check:not(:indeterminate):checked:active { animation: check_check $material_duration $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
2003
// radio:not(:indeterminate):checked { animation: check_radio $material_duration $material_timing_function; }
2005
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_duration $material_timing_function; }
2007
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; }
2009
// no animations in menus
2011
menu menuitem {
2012
check:not(:indeterminate):checked,
2013
radio:not(:indeterminate):checked,
2014
check:indeterminate:checked,
2015
radio:indeterminate:checked { animation: none; }
2016
}
2017
treeview.view check,
2019
treeview.view radio {
2020
// margin: -12px;
2021
// padding: 12px;
2022
padding: 0;
2023
&:checked:hover, &:selected:checked:hover { background-image: none; }
2025
& {
2027
color: $secondary_fg_color;
2028
&:hover, &:active { color: $fg_color; }
2030
&:disabled { color: $insensitive_secondary_fg_color; }
2032
&:checked, &:indeterminate { color: $accent_bg_color; }
2034
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2036
}
2037
&:selected {
2039
color: $secondary_selected_fg_color;
2040
&:hover, &:active { color: $selected_fg_color; }
2042
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2044
&:checked, &:indeterminate { color: $accent_bg_color; }
2046
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2048
}
2049
}
2050
treeview.view radio:checked {
2052
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2053
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2054
border-image: none;
2055
}
2056
/************
2059
* GtkScale *
2060
************/
2061
scale {
2062
// sizing
2063
$_marks_lenght: 8px;
2065
$_marks_distance: 8px;
2066
min-height: 12px;
2068
min-width: 12px;
2069
padding: 12px;
2070
* { transition: $material_transition; }
2072
// the slider is inside the trough, so to have make it bigger there's a negative margin
2074
slider {
2075
min-height: $small_size;
2076
min-width: $small_size;
2077
margin: -10px;
2078
}
2079
// the backing bit
2081
trough {
2082
outline-offset: 2px;
2083
background-color: $track_color;
2084
&:disabled { color: $insensitive_fg_color; }
2086
}
2087
// the colored part of the backing bit
2089
highlight {
2090
background-color: $accent_bg_color;
2091
&:disabled { background-color: transparent; }
2093
}
2094
// this is another differently styled part of the backing bit, the most relevant use case is for example
2096
// in media player to indicate how much video stream as been cached
2097
fill {
2098
background-color: $track_color;
2099
&:disabled { background-color: transparent; }
2101
}
2102
slider {
2104
// border-radius: 100%;
2105
// background-color: $accent_bg_color;
2106
background-repeat: no-repeat;
2107
background-position: center;
2108
@each $s,$as in ('',''),
2110
(':disabled','-insensitive') {
2111
&#{$s} {
2112
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2113
background-image: -gtk-scaled(url('#{$_url}.png'),
2114
url('#{$_url}@2.png'));
2115
}
2116
}
2117
background-size: calc(100% - 8px);
2119
&:hover { background-size: calc(100% - 4px); }
2121
&:active { background-size: calc(100% - 0px); }
2123
}
2124
// click-and-hold the slider to activate
2126
&.fine-tune {
2127
// to make the slider shrink in fine-tune mode
2128
slider { background-size: calc(100% - 12px); }
2129
}
2130
value { color: gtkalpha(currentColor, $hint_opacity); }
2132
marks {
2134
color: $track_color;
2135
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2137
(bottom, bottom, top),
2138
(top, left, right),
2139
(bottom, right, left) {
2140
&.#{$marks_class} {
2141
margin-#{$marks_margin}: $_marks_distance;
2142
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2143
}
2144
}
2145
}
2146
&.horizontal {
2148
indicator {
2149
min-height: $_marks_lenght;
2150
min-width: 1px;
2151
}
2152
}
2153
&.vertical {
2155
indicator {
2156
min-height: 1px;
2157
min-width: $_marks_lenght;
2158
}
2159
}
2160
// *WARNING* scale with marks madness following
2162
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2164
$suffix: if($variant == 'light', '', '-dark');
2165
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2167
('vertical', 'vert') {
2168
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2169
('scale-has-marks-below', ':first-child:not(:only-child)') {
2170
@each $state, $state_infix in ('', ''),
2171
(':disabled', '-insensitive') {
2172
&.#{$dir_class} {
2173
%#{$marks_infix}-#{$dir_infix},
2174
contents#{$nth_child} > trough > slider {
2175
&#{$state} {
2176
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2177
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2179
}
2180
@if $dir_class == 'horizontal' {
2182
min-height: 30px;
2183
min-width: $small_size;
2184
@if $marks_infix == 'scale-has-marks-above' {
2186
margin-top: -16px;
2187
background-position: center calc(100% - 4px);
2189
&:hover { background-position: center calc(100% - 2px); }
2191
&:active { background-position: center calc(100% - 0px); }
2193
}
2194
@if $marks_infix == 'scale-has-marks-below' {
2196
margin-bottom: -16px;
2197
background-position: center calc(4px);
2199
&:hover { background-position: center calc(2px); }
2201
&:active { background-position: center calc(0px); }
2203
}
2204
}
2205
@if $dir_class == 'vertical' {
2207
min-height: $small_size;
2208
min-width: 30px;
2209
@if $marks_infix == 'scale-has-marks-above' {
2211
margin-left: -16px;
2212
background-position: calc(4px) center;
2214
&:hover { background-position: calc(2px) center; }
2216
&:active { background-position: calc(0px) center; }
2218
}
2219
@if $marks_infix == 'scale-has-marks-below' {
2221
margin-right: -16px;
2222
background-position: calc(100% - 4px) center;
2224
&:hover { background-position: calc(100% - 2px) center; }
2226
&:active { background-position: calc(100% - 0px) center; }
2228
}
2229
}
2230
}
2231
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2233
&.fine-tune contents#{$nth_child} > trough > slider {
2234
// bigger negative margins to make the trough grow here as well
2235
@if $dir_class == 'horizontal' {
2237
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2238
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2240
}
2241
@if $dir_class == 'vertical' {
2243
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2244
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2246
}
2247
}
2248
}
2249
}
2250
}
2251
}
2252
&.color {
2254
min-height: 0;
2255
min-width: 0;
2256
&.horizontal {
2258
padding: 0 0 12px 0;
2259
trough {
2261
padding-bottom: $bar_size;
2262
}
2263
slider {
2265
@extend %scale-has-marks-above-horz;
2266
margin-bottom: -10px - $bar_size;
2268
margin-top: 0;
2269
}
2270
}
2271
&.vertical {
2273
&:dir(ltr) {
2274
padding: 0 0 0 12px;
2275
trough {
2277
padding-left: $bar_size;
2278
}
2279
slider {
2281
@extend %scale-has-marks-below-vert;
2282
margin-left: -10px - $bar_size;
2284
margin-right: 0;
2285
}
2286
}
2287
&:dir(rtl) {
2289
padding: 0 12px 0 0;
2290
trough {
2292
padding-right: $bar_size;
2293
}
2294
slider {
2296
@extend %scale-has-marks-above-vert;
2297
margin-right: -10px - $bar_size;
2299
margin-left: 0;
2300
}
2301
}
2302
}
2303
&.fine-tune {
2305
&.horizontal {
2306
slider {
2307
@extend %scale-has-marks-above-horz-fine-tune;
2308
}
2309
}
2310
&.vertical {
2312
&:dir(ltr) {
2313
slider {
2314
@extend %scale-has-marks-below-vert-fine-tune;
2315
}
2316
}
2317
&:dir(rtl) {
2319
slider {
2320
@extend %scale-has-marks-above-vert-fine-tune;
2321
}
2322
}
2323
}
2324
}
2325
}
2326
}
2327
/*****************
2330
* Progress bars *
2331
*****************/
2332
progressbar {
2333
// sizing
2334
&.horizontal {
2335
trough,
2336
progress { min-height: $bar_size; }
2337
}
2338
&.vertical {
2340
trough,
2341
progress { min-width: $bar_size; }
2342
}
2343
// FIXME: insensitive state missing and some other state should be set probably
2345
color: $tertiary_fg_color;
2346
font-size: smaller;
2347
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2349
progress { background-color: $selected_bg_color; }
2351
&.osd { // progressbar.osd used for epiphany page loading progress
2353
// min-width: $bar_size;
2354
// min-height: $bar_size;
2355
// background-color: transparent;
2356
// trough { background-color: transparent; }
2358
progress {
2360
}
2361
}
2362
}
2363
/*************
2366
* Level Bar *
2367
*************/
2368
levelbar {
2369
block {
2370
min-width: $medium_size;
2371
min-height: $bar_size;
2372
}
2373
&.vertical block {
2375
min-width: $bar_size;
2376
min-height: $medium_size;
2377
}
2378
trough {
2380
padding: 2px;
2381
border-radius: 2px;
2382
@include entry(normal);
2384
&:disabled { @include entry(insensitive); }
2386
}
2387
&.horizontal.discrete block { margin: 0 1px; }
2389
&.vertical.discrete block { margin: 1px 0; }
2391
&.horizontal.discrete trough { padding: 2px 1px; }
2393
&.vertical.discrete trough { padding: 1px 2px; }
2395
block {
2397
&.low {
2398
background-color: $warning_color;
2399
}
2400
&.high {
2402
background-color: $selected_bg_color;
2403
}
2404
&.full {
2406
background-color: $success_color;
2407
}
2408
&.empty {
2410
background-color: $track_color;
2411
color: $insensitive_fg_color;
2412
}
2413
}
2414
}
2415
/****************
2418
* Print dialog *
2419
*****************/
2420
printdialog {
2421
paper {
2422
padding: 0;
2423
border: 1px solid $borders_color;
2424
background: $base_color;
2425
color: $fg_color;
2426
}
2427
.dialog-action-box { margin: 12px; }
2429
}
2430
/**********
2433
* Frames *
2434
**********/
2435
frame > border,
2436
.frame {
2437
margin: 0;
2438
padding: 0;
2439
border: 1px solid $borders_color;
2440
border-radius: 0;
2441
box-shadow: none;
2442
&.flat { border-style: none; }
2444
}
2445
actionbar > revealer > box {
2447
padding: $container_padding;
2448
border-top: 1px solid $borders_color;
2449
}
2450
scrolledwindow {
2452
viewport.frame { // avoid double borders when viewport inside scrolled window
2453
border-style: none;
2454
}
2455
// This is used when content is touch-dragged past boundaries.
2457
// draws a box on top of the content, the size changes programmatically.
2458
overshoot {
2459
&.top { @include overshoot(top); }
2460
&.bottom { @include overshoot(bottom); }
2462
&.left { @include overshoot(left); }
2464
&.right { @include overshoot(right); }
2466
}
2467
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2469
undershoot {
2470
&.top { @include undershoot(top); }
2471
&.bottom { @include undershoot(bottom); }
2473
&.left { @include undershoot(left); }
2475
&.right { @include undershoot(right); }
2477
}
2478
junction { // the small square between two scrollbars
2480
border-style: solid none none solid;
2481
border-width: 1px;
2482
border-color: $borders_color;
2483
background-color: $base_color;
2484
&:dir(rtl) { border-style: solid solid none none; }
2486
}
2487
}
2488
//vbox and hbox separators
2490
separator {
2491
min-width: 1px;
2492
min-height: 1px;
2493
background: $borders_color;
2494
}
2495
/*********
2498
* Lists *
2499
*********/
2500
list {
2501
border-color: $borders_color;
2502
background-color: $base_color;
2503
row { padding: 2px; }
2505
}
2506
row {
2508
transition: $material_transition;
2509
&:hover { transition: none; }
2511
&.activatable {
2513
background-image: radial-gradient(circle farthest-corner at center,
2514
gtkalpha(currentColor, 0) 100%,
2515
transparent 0%),
2516
image(gtkalpha(currentColor, 0));
2517
&:hover {
2519
background-image: radial-gradient(circle farthest-corner at center,
2520
gtkalpha(currentColor, 0) 100%,
2521
transparent 0%),
2522
image(gtkalpha(currentColor, 0.05));
2523
}
2524
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2526
&:active {
2527
transition: $material_transition, background-image 0;
2528
animation: row_ripple_effect $material_duration $material_timing_function forwards;
2529
}
2530
}
2531
&:selected { @extend %selected_items; }
2533
}
2534
/*********************
2537
* App Notifications *
2538
*********************/
2539
.app-notification,
2540
.app-notification.frame {
2541
@extend %osd;
2542
@extend toolbar.osd;
2544
margin: 8px;
2546
border { border: none; }
2548
}
2549
/*************
2552
* Expanders *
2553
*************/
2554
expander {
2555
arrow {
2556
transition: $material_transition;
2557
min-width: 16px;
2558
min-height: 16px;
2559
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2560
-gtk-icon-transform: rotate(-90deg);
2561
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2563
&:checked { -gtk-icon-transform: unset; }
2565
color: $secondary_fg_color;
2567
&:hover, &:active { color: $fg_color; }
2569
&:disabled { color: $insensitive_secondary_fg_color; }
2571
&:selected {
2573
color: $secondary_selected_fg_color;
2574
&:hover, &:active { color: $selected_fg_color; }
2576
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2578
}
2579
}
2580
}
2581
/************
2584
* Calendar *
2585
***********/
2586
calendar {
2587
padding: 1px;
2588
border: 1px solid $borders_color;
2589
color: $fg_color;
2590
&:disabled { color: $insensitive_fg_color; }
2592
&:selected {
2594
@extend %selected_items;
2595
border-radius: 2px + 1px;
2597
}
2598
&.header {
2600
border: none;
2601
border-bottom: 1px solid $borders_color;
2602
border-radius: 0;
2603
}
2604
&.button { @extend %button_basic.flat; }
2606
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2608
&.highlight {
2610
color: gtkalpha(currentColor, $hint_opacity);
2611
font-weight: 500;
2612
}
2613
}
2614
/***********
2617
* Dialogs *
2618
***********/
2619
messagedialog { // Message Dialog styling
2620
&.background { background-color: $light_color; }
2621
.titlebar {
2623
min-height: $small_size;
2624
border-style: none;
2625
// box-shadow: inset 0 1px $highlight_color;
2626
background-color: $light_color;
2627
}
2628
&.csd { // rounded bottom border styling for csd version
2630
&.background {
2631
// bigger radius for better antialiasing
2632
border-bottom-left-radius: 2px;
2633
border-bottom-right-radius: 2px;
2634
}
2635
.dialog-action-area button {
2637
padding: 8px 16px;
2638
border-top: 1px solid $borders_color;
2639
border-radius: 0;
2640
@extend %button_basic.flat;
2642
&:first-child{ border-bottom-left-radius: 2px; }
2644
&:last-child { border-bottom-right-radius: 2px; }
2646
}
2647
}
2648
}
2649
filechooser {
2651
.dialog-action-box { border-top: 1px solid $borders_color; }
2652
#pathbarbox { border-bottom: 1px solid $borders_color; }
2654
}
2655
filechooserbutton:drop(active) {
2657
box-shadow: none;
2658
}
2659
/***********
2662
* Sidebar *
2663
***********/
2664
.sidebar {
2665
border-style: none;
2666
background-color: $secondary_base_color;
2667
@at-root %sidebar_left,
2669
&:dir(ltr),
2670
&.left,
2671
&.left:dir(rtl) {
2672
border-right: 1px solid $borders_color;
2673
border-left-style: none;
2674
}
2675
@at-root %sidebar_right
2677
&:dir(rtl),
2678
&.right {
2679
border-left: 1px solid $borders_color;
2680
border-right-style: none;
2681
}
2682
list { background-color: transparent; }
2684
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2686
}
2687
stacksidebar {
2689
&.sidebar {
2690
&:dir(ltr),
2691
&.left,
2692
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2693
&:dir(rtl),
2695
&.right { list { @extend %sidebar_right; }}
2696
}
2697
row {
2699
padding: 10px 4px;
2700
> label {
2702
padding-left: 6px;
2703
padding-right: 6px;
2704
}
2705
&.needs-attention > label { @extend %needs_attention; }
2707
}
2708
}
2709
/****************
2712
* File chooser *
2713
****************/
2714
placessidebar {
2715
> viewport.frame { border-style: none; }
2716
row {
2718
// Needs overriding of the GtkListBoxRow padding
2719
min-height: 32px;
2720
padding: 0;
2721
// Using margins/padding directly in the SidebarRow
2723
// will make the animation of the new bookmark row jump
2724
> revealer { padding: 0 12px; }
2725
&:selected { color: $selected_fg_color; }
2727
&:disabled { color: $insensitive_fg_color; }
2729
image.sidebar-icon {
2731
opacity: $hint_opacity; // dim the device icons
2732
&:dir(ltr) { padding-right: 8px; }
2734
&:dir(rtl) { padding-left: 8px; }
2735
}
2736
label.sidebar-label {
2738
&:dir(ltr) { padding-right: 2px; }
2739
&:dir(rtl) { padding-left: 2px; }
2740
}
2741
@at-root button.sidebar-button {
2743
@extend %button_basic.flat;
2744
min-height: $small_size;
2746
min-width: $small_size;
2747
margin-top: 0;
2748
margin-bottom: 0;
2749
padding: 0;
2750
border-radius: 100%;
2751
-gtk-outline-radius: 100%;
2752
row:selected & { @extend %button_selected.flat; }
2754
}
2755
&.sidebar-placeholder-row {
2757
min-height: 2px;
2758
padding: 0 8px;
2759
background-image: image($accent_bg_color);
2760
background-clip: content-box;
2761
}
2762
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2764
&:drop(active):not(:disabled) {
2766
box-shadow: inset 0 0 0 2px $accent_bg_color;
2767
&:selected {
2769
// background-color: $accent_bg_color;
2770
// color: $selected_fg_color;
2771
}
2772
}
2773
}
2774
}
2775
placesview {
2777
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2778
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2780
// this selects the "connect to server" label
2782
> actionbar > revealer > box > label {
2783
padding-left: 8px;
2784
padding-right: 8px;
2785
}
2786
}
2787
/*********
2790
* Paned *
2791
*********/
2792
paned {
2793
> separator {
2794
min-width: 1px;
2795
min-height: 1px;
2796
-gtk-icon-source: none; // defeats the ugly default handle decoration
2797
border-style: none; // just to be sure
2798
background-color: transparent;
2799
// workaround, using background istead of a border since the border will get rendered twice (?)
2800
background-image: image($borders_color);
2801
background-size: 1px 1px;
2802
&.wide {
2804
min-width: 6px;
2805
min-height: 6px;
2806
background-color: $bg_color;
2807
background-image: image($borders_color), image($borders_color);
2808
background-size: 1px 1px, 1px 1px;
2809
}
2810
}
2811
&.horizontal > separator {
2813
background-repeat: repeat-y;
2814
&:dir(ltr) {
2816
margin: 0 -8px 0 0;
2817
padding: 0 8px 0 0;
2818
background-position: left;
2819
}
2820
&:dir(rtl) {
2822
margin: 0 0 0 -8px;
2823
padding: 0 0 0 8px;
2824
background-position: right;
2825
}
2826
&.wide {
2828
margin: 0;
2829
padding: 0;
2830
background-repeat: repeat-y, repeat-y;
2831
background-position: left, right;
2832
}
2833
}
2834
&.vertical > separator {
2836
margin: 0 0 -8px 0;
2837
padding: 0 0 8px 0;
2838
background-repeat: repeat-x;
2839
background-position: top;
2840
&.wide {
2842
margin: 0;
2843
padding: 0;
2844
background-repeat: repeat-x, repeat-x;
2845
background-position: bottom, top;
2846
}
2847
}
2848
}
2849
/**************
2852
* GtkInfoBar *
2853
**************/
2854
infobar { border-style: none; }
2855
.info { background-color: $info_bg_color; }
2857
.question { background-color: $question_bg_color; }
2859
.warning { background-color: $warning_bg_color; }
2861
.error { background-color: $error_bg_color; }
2863
.info,
2865
.question,
2866
.warning,
2867
.error {
2868
color: $selected_fg_color;
2869
button { @extend %button_selected; }
2871
label:selected {
2873
}
2874
*:link { @extend %link_selected; }
2876
}
2877
/************
2880
* Tooltips *
2881
************/
2882
tooltip {
2883
&.background {
2884
// background-color needs to be set this way otherwise it gets drawn twice
2885
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2886
background-color: scale-alpha($base_color, $higher_opacity);
2887
}
2888
// @extend %osd;
2890
// padding: 4px; /* not working */
2892
border-radius: 2px;
2893
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2894
// FIXME: we need a border or tooltips vanish on black background.
2896
decoration { background-color: transparent; }
2897
label {
2899
min-height: 32px - 6px * 2;
2900
padding: 4px 12px - 6px;
2901
}
2902
* { // Yeah this is ugly
2904
padding: 0;
2905
background-color: transparent;
2906
color: inherit;
2907
}
2908
}
2909
/*****************
2912
* Color Chooser *
2913
*****************/
2914
colorswatch {
2915
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2916
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2917
// applied to the overlay box.
2918
// base color corners rounding
2920
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2921
// sports a bigger radius.
2922
// nth-child is needed by the custom color strip.
2923
&.top {
2925
border-top-left-radius: $material_radius + 0.5px;
2926
border-top-right-radius: $material_radius + 0.5px;
2927
overlay {
2929
border-top-left-radius: $material_radius;
2930
border-top-right-radius: $material_radius;
2931
}
2932
}
2933
&.bottom {
2935
border-bottom-left-radius: $material_radius + 0.5px;
2936
border-bottom-right-radius: $material_radius + 0.5px;
2937
overlay {
2939
border-bottom-left-radius: $material_radius;
2940
border-bottom-right-radius: $material_radius;
2941
}
2942
}
2943
&.left,
2945
&:first-child:not(.top) {
2946
border-top-left-radius: $material_radius + 0.5px;
2947
border-bottom-left-radius: $material_radius + 0.5px;
2948
overlay {
2950
border-top-left-radius: $material_radius;
2951
border-bottom-left-radius: $material_radius;
2952
}
2953
}
2954
&.right,
2956
&:last-child:not(.bottom) {
2957
border-top-right-radius: $material_radius + 0.5px;
2958
border-bottom-right-radius: $material_radius + 0.5px;
2959
overlay {
2961
border-top-right-radius: $material_radius;
2962
border-bottom-right-radius: $material_radius;
2963
}
2964
}
2965
&.dark overlay { color: white; }
2967
&.light overlay { color: scale-alpha(black, 0.8); }
2969
&.dark { color: white; } // for focus ring
2971
&.light { color: scale-alpha(black, 0.8); } // for focus ring
2973
&:drop(active) {
2975
box-shadow: none;
2976
&.light overlay {
2978
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
2979
}
2980
&.dark overlay {
2982
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
2983
}
2984
}
2985
overlay {
2987
transition: $material_transition;
2988
box-shadow: $z-depth-1;
2989
&:hover { box-shadow: $z-depth-2; }
2991
}
2992
&#add-color-button {
2994
border-radius: $material_radius $material_radius 0 0;
2995
color: white; // for focus ring
2996
&:only-child { border-radius: $material_radius; }
2998
overlay {
3000
background-image: linear-gradient(to right,
3001
$error_bg_color 25%,
3002
$warning_bg_color 25%, $warning_bg_color 50%,
3003
$info_bg_color 50%, $info_bg_color 75%,
3004
$question_bg_color 75%);
3005
color: white;
3006
}
3007
}
3008
&:disabled {
3010
opacity: $disabled_opacity;
3011
overlay { box-shadow: none; }
3013
}
3014
row:selected & {
3016
}
3017
&#editor-color-sample {
3019
border-radius: $material_radius + 0.5px;
3020
overlay { border-radius: $material_radius; }
3022
// overlay:hover { box-shadow: $z-depth-1; }
3024
}
3025
}
3026
// colorscale popup
3028
colorchooser .popover.osd {
3029
transition: box-shadow $material_duration $material_timing_function;
3030
border-radius: 2px;
3031
box-shadow: $z-depth-2;
3032
background-color: $base_color;
3033
&:backdrop { box-shadow: $z-depth-1; }
3035
spinbutton:not(.vertical) { @extend %entry.flat; }
3037
}
3038
/********
3041
* Misc *
3042
********/
3043
//content view (grid/list)
3044
.content-view {
3045
background-color: $bg_color;
3046
// &:hover { -gtk-icon-effect: highlight; }
3048
rubberband { @extend rubberband; }
3050
}
3051
.scale-popup {
3053
.osd & { @extend %osd; }
3054
.osd & button.flat { //FIXME: quick hack, redo properly
3056
}
3057
button { // +/- buttons on GtkVolumeButton popup
3059
}
3060
}
3061
/**********************
3064
* Window Decorations *
3065
*********************/
3066
decoration {
3067
transition: box-shadow $material_duration $material_timing_function;
3068
border-radius: 2px 2px 0 0;
3069
box-shadow: $z-depth-4, 0 16px 16px transparent;
3070
// FIXME rationalize shadows
3072
// this is used for the resize cursor area
3074
margin: 8px;
3075
&:backdrop {
3077
// the transparent shadow here is to enforce that the shadow extents don't
3078
// change when we go to backdrop, to prevent jumping windows.
3079
// The biggest shadow should be in the same order then in the active state
3080
// or the jumping will happen during the transition.
3081
box-shadow: $z-depth-2, 0 16px 16px transparent;
3082
}
3083
.fullscreen &,
3085
.tiled & { border-radius: 0; }
3086
.popup & { box-shadow: none; }
3088
// server-side decorations as used by mutter
3090
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3091
.csd.popup & {
3093
border-radius: 2px;
3094
box-shadow: $z-depth-2;
3095
}
3096
tooltip.csd & {
3098
border-radius: 2px;
3099
box-shadow: $z-depth-2;
3100
}
3101
messagedialog.csd & {
3103
border-radius: 2px;
3104
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3105
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3107
}
3108
.solid-csd & {
3110
margin: 4px;
3111
// border: solid 1px $borders_color;
3112
border-radius: 0;
3113
box-shadow: none;
3114
background-color: $bg_color;
3115
}
3116
}
3117
// Window Close button
3119
button.titlebutton {
3120
// @extend %button_basic.flat;
3121
@extend %button_basic.image-button;
3123
.selection-mode & {
3125
}
3126
}
3127
// catch all extend :)
3130
%selected_items {
3132
background-color: $selected_bg_color;
3133
@at-root %nobg_selected_items, & {
3135
color: $selected_fg_color;
3136
&:disabled { color: $insensitive_selected_fg_color; }
3138
}
3139
}
3140
.monospace { font: Monospace; }
3142
/**********************
3145
* Touch Copy & Paste *
3146
*********************/
3147
//touch selection handlebars for the Popover.osd above
3148
cursor-handle {
3149
border-radius: 100px;
3150
background-color: $accent_bg_color;
3151
background-image: none;
3152
&.top:dir(ltr), &.bottom:dir(rtl) {
3154
padding-left: 6px;
3155
border-top-right-radius: 0;
3156
}
3157
&.bottom:dir(ltr), &.top:dir(rtl) {
3159
padding-right: 6px;
3160
border-top-left-radius: 0;
3161
}
3162
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3164
-GtkWidget-text-handle-width: 24;
3165
-GtkWidget-text-handle-height: 30;
3166
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3168
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3169
url('#{$_url}@2.png'));
3170
}
3171
}
3172
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3174
button.circular { // FIXME: aggregate to buttons
3176
border-radius: 100px;
3177
-gtk-outline-radius: 100px;
3178
label { padding: 0; }
3180
}
3181
// shortcut window keys
3183
.keycap {
3184
min-width: 28px - 8px * 2;
3185
min-height: 28px - 2px;
3186
margin-top: 2px;
3187
padding-bottom: 2px;
3188
padding-left: 8px;
3189
padding-right: 8px;
3190
border: solid 1px $borders_color;
3192
border-radius: 2px + 1px;
3193
box-shadow: inset 0 -2px $borders_color;
3194
background-color: $base_color;
3195
color: $fg_color;
3196
font-size: smaller;
3197
}
3198
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3200
transition: $material_transition;
3201
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3202
caret-color: $accent_bg_color;
3203
}
3204
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3206
stackswitcher button.circular,
3208
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3209
min-width: $medium_size;
3210
min-height: $medium_size;
3211
padding: 0;
3212
}
3213