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: $bg_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
box-shadow: inset 0 1px $secondary_highlight_color, $z-depth-1;
960
background-color: $headerbar_color;
961
color: $selected_fg_color;
962
&:backdrop {
964
// background-color: $headerbar_color;
965
}
966
.title {
968
padding-left: 12px;
969
padding-right: 12px;
970
font-weight: bold;
971
}
972
.subtitle {
974
padding-left: 12px;
975
padding-right: 12px;
976
font-size: smaller;
977
@extend .dim-label;
979
}
980
button:not(.suggested-action):not(.destructive-action) {
982
@extend %button_basic.flat;
983
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
985
$selected_fg_color 0%,
986
transparent 0%)
987
0 0 0 / 0 0 0px;
988
color: $secondary_selected_fg_color;
989
&:hover, &:active, &:checked { color: $selected_fg_color; }
991
&:disabled {
993
color: $insensitive_secondary_selected_fg_color;
994
> label { color: inherit; }
996
}
997
&:checked {
999
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1000
$selected_fg_color 100%,
1001
transparent 0%)
1002
0 0 2 / 0 0 2px;
1003
background-color: transparent;
1004
color: $selected_fg_color;
1005
&:disabled {
1007
background-color: transparent;
1008
color: $insensitive_selected_fg_color;
1009
> label { color: inherit; }
1011
}
1012
}
1013
}
1014
button.suggested-action, button.destructive-action {
1016
&:disabled {
1017
color: $insensitive_secondary_selected_fg_color;
1018
> label { color: inherit; }
1020
}
1021
}
1022
&.selection-mode {
1024
animation: header_ripple_effect $material_duration $material_timing_function forwards;
1025
// box-shadow: inset 0 1px $secondary_highlight_color;
1026
// background-color: $selected_bg_color;
1027
color: $selected_fg_color;
1028
&:backdrop {
1030
}
1031
.subtitle:link { @extend *:link:selected; }
1033
button:not(.suggested-action):not(.destructive-action) {
1035
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1036
$selected_fg_color 0%,
1037
transparent 0%)
1038
0 0 0 / 0 0 0px;
1039
// color: $secondary_selected_fg_color;
1040
&, &:hover, &:active, &:checked { color: $selected_fg_color; }
1042
&:disabled {
1044
color: $insensitive_selected_fg_color;
1045
> label { color: inherit; }
1047
}
1048
&:checked {
1050
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1051
$selected_fg_color 100%,
1052
transparent 0%)
1053
0 0 2 / 0 0 2px;
1054
color: $selected_fg_color;
1055
&:disabled {
1057
color: $insensitive_selected_fg_color;
1058
> label { color: inherit; }
1060
}
1061
}
1062
}
1063
.selection-menu {
1065
padding-left: 16px;
1066
padding-right: 16px;
1067
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1069
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1071
}
1072
}
1073
.tiled &,
1075
.maximized & {
1076
border-radius: 0; // squared corners when the window is max'd or tiled
1077
box-shadow: none;
1078
}
1079
&.default-decoration {
1081
min-height: $small_size;
1082
padding: $container_padding;
1083
border-width: 0;
1084
button.titlebutton {
1086
min-height: $small_size;
1087
min-width: $small_size;
1088
margin: 0;
1089
padding: 0;
1090
&:active { // add fallback
1092
background-image: radial-gradient(circle farthest-corner at center,
1093
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1094
transparent 0%),
1095
image(gtkalpha(currentColor, $lower_opacity / 2));
1096
}
1097
}
1098
}
1099
}
1100
headerbar {
1102
// add vertical margins to headerbar entries, buttons and separators to avoid them spanning the whole height
1103
entry,
1104
spinbutton,
1105
// separator,
1106
button {
1107
margin-top: $container_padding;
1108
margin-bottom: $container_padding;
1109
}
1110
}
1111
.titlebar {
1113
border-top-left-radius: 2px;
1114
border-top-right-radius: 2px;
1115
}
1116
headerbar {
1118
separator:first-child + &, // tackles the paned container case
1119
&:first-child {
1120
border-top-left-radius: 2px;
1121
.tiled &,
1123
.maximized & { border-radius: 0; }
1124
}
1125
&:last-child {
1127
border-top-right-radius: 2px;
1128
.tiled &,
1130
.maximized & { border-radius: 0; }
1131
}
1132
}
1133
.titlebar:not(headerbar) {
1135
window.csd > & {
1136
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1137
padding: 0;
1138
background-color: transparent;
1139
background-image: none;
1140
border-style: none;
1141
box-shadow: none;
1142
}
1143
> separator {
1145
background-color: $headerbar_color;
1146
background-image: image($borders_color);
1147
}
1148
@extend %titlebar;
1150
}
1151
/************
1154
* Pathbars *
1155
************/
1156
.path-bar button {
1157
&.text-button, &.image-button, & {
1158
padding-left: 6px;
1159
padding-right: 6px;
1160
}
1161
&.text-button.image-button, & {
1163
// label:last-child { padding-left: 2px; padding-right: 8px; }
1164
// label:first-child { padding-left: 8px; padding-right: 2px; }
1165
}
1166
image {
1168
padding-left: 4px;
1169
padding-right: 4px;
1170
}
1171
&.slider-button {
1173
padding-left: 0;
1174
padding-right: 0;
1175
}
1176
}
1177
/**************
1180
* Tree Views *
1181
**************/
1182
treeview.view {
1183
-GtkTreeView-grid-line-width: 1;
1184
-GtkTreeView-grid-line-pattern: '';
1185
-GtkTreeView-tree-line-width: 1;
1186
-GtkTreeView-tree-line-pattern: '';
1187
-GtkTreeView-expander-size: 16;
1188
border-left-color: $track_color; // this is actually the tree lines color,
1190
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1191
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1193
&:hover, &:active, &:selected { border-radius: 0; }
1195
&.separator {
1197
min-height: 1px + 2px * 2;
1198
color: $borders_color;
1199
}
1200
&:drop(active) {
1202
border-style: solid none;
1203
border-width: 1px;
1204
border-color: $accent_bg_color;
1205
&.after { border-top-style: none; }
1207
&.before { border-bottom-style: none; }
1209
}
1210
&.expander {
1212
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1213
-gtk-icon-transform: rotate(-90deg);
1214
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1216
&:checked { -gtk-icon-transform: unset; }
1218
color: $secondary_fg_color;
1220
&:hover, &:active { color: $fg_color; }
1222
&:disabled { color: $insensitive_secondary_fg_color; }
1224
&:selected {
1226
color: $secondary_selected_fg_color;
1227
&:hover, &:active { color: $selected_fg_color; }
1229
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1231
}
1232
}
1233
&.progressbar { // progress bar in treeviews
1235
border-style: none none solid;
1236
border-width: $bar_size;
1237
border-color: $selected_bg_color;
1238
background-color: transparent;
1239
background-image: none;
1240
&:selected { border-color: currentColor; }
1242
}
1243
&.trough { // progress bar trough in treeviews
1245
border-style: none none solid;
1246
border-width: $bar_size;
1247
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1248
background-color: transparent;
1249
background-image: none;
1250
&:selected { border-color: $track_color; }
1252
}
1253
header {
1255
button {
1256
@extend row.activatable;
1257
padding: 2px 6px;
1259
border-style: none solid solid none;
1260
border-width: 1px;
1261
border-color: $borders_color;
1262
border-radius: 0;
1263
background-clip: border-box;
1264
&, &:hover, &:active { box-shadow: none; }
1266
&, &:disabled { background-color: $base_color; }
1268
&:last-child { border-right-style: none; }
1270
}
1271
}
1272
button.dnd,
1274
header.button.dnd { // for treeview-like derive widgets
1275
padding: 2px 6px;
1276
border-style: none solid solid;
1277
border-width: 1px;
1278
border-color: $borders_color;
1279
border-radius: 0;
1280
box-shadow: none;
1281
background-color: $base_color;
1282
background-clip: border-box;
1283
color: $selected_bg_color;
1284
}
1285
}
1286
/*********
1289
* Menus *
1290
*********/
1291
menubar,
1292
.menubar {
1293
-GtkWidget-window-dragging: true;
1294
padding: 0;
1295
// box-shadow: inset 0 -1px $borders_color;
1296
background-color: $headerbar_color;
1297
> menuitem {
1299
transition: $material_transition;
1300
min-height: 20px;
1301
padding: 4px 8px;
1302
color: $secondary_selected_fg_color;
1303
&:hover { //Seems like it :hover even with keyboard focus
1305
box-shadow: inset 0 -2px $selected_fg_color;
1306
color: $selected_fg_color;
1307
}
1308
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1310
}
1311
}
1312
menu,
1314
.menu {
1315
margin: 4px 0;
1316
padding: 4px 0;
1317
background-color: $base_color;
1318
border: 1px solid $borders_color; // adds borders in a non composited env
1319
.csd & {
1321
border: none; // axes borders in a composited env
1322
border-radius: 2px;
1323
}
1324
menuitem {
1326
min-height: 20px;
1327
min-width: 40px;
1328
padding: 4px 8px;
1329
font: initial;
1330
text-shadow: none;
1331
&:hover {
1333
// background-color: gtkalpha(currentColor, $lower_opacity / 2);
1334
background-color: $selected_bg_color;
1335
color: $selected_fg_color;
1336
}
1337
&:disabled { color: $insensitive_fg_color; }
1339
// submenu indicators
1341
arrow {
1342
min-height: 16px;
1343
min-width: 16px;
1344
&:dir(ltr) {
1346
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1347
margin-left: 8px;
1348
}
1349
&:dir(rtl) {
1351
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1352
margin-right: 8px;
1353
}
1354
}
1355
}
1356
// overflow arrows
1358
> arrow {
1359
min-height: 16px;
1360
min-width: 16px;
1361
padding: 4px;
1362
border-radius: 0;
1363
background-color: $base_color;
1364
color: $secondary_fg_color;
1365
&.top {
1367
margin-top: -4px;
1368
border-bottom: 1px solid $borders_color;
1369
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1370
}
1371
&.bottom {
1373
margin-bottom: -4px;
1374
border-top: 1px solid $borders_color;
1375
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1376
}
1377
&:hover {
1379
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1380
color: $fg_color;
1381
}
1382
&:disabled {
1384
border-color: transparent;
1385
background-color: transparent;
1386
color: transparent;
1387
// color: $insensitive_secondary_fg_color;
1388
}
1389
}
1390
separator { margin: 4px 0; }
1392
}
1393
menuitem {
1395
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1396
check,
1398
radio {
1399
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1400
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1401
}
1402
}
1403
.csd.popup { border-radius: 2px; }
1405
/***************
1408
* Popovers *
1409
***************/
1410
popover.background {
1411
transition: box-shadow $material_duration $material_timing_function;
1412
padding: 0;
1413
box-shadow: $z-depth-2;
1414
background-color: $light_color;
1415
&:backdrop { box-shadow: $z-depth-1; }
1417
&, .csd & {
1419
border-style: solid;
1420
border-width: 1px;
1421
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1422
border-radius: 2px + 1px;
1423
}
1424
> list,
1426
> .view,
1427
> toolbar {
1428
border-style: none;
1429
box-shadow: none;
1430
background-color: transparent;
1431
}
1432
&, .csd & {
1434
&.touch-selection,
1435
&.magnifier,
1436
&.osd { @extend %osd; }
1437
}
1438
separator { margin: 4px 0; }
1440
list separator { margin: 0; }
1442
checkbutton,
1444
radiobutton { @extend modelbutton.flat; }
1445
}
1446
/*************
1448
* Notebooks *
1449
*************/
1450
notebook {
1451
> header {
1452
border-width: 1px;
1453
border-color: $borders_color;
1454
background-color: $bg_color;
1455
background-clip: border-box;
1456
&.top {
1458
border-bottom-style: solid;
1459
> tabs {
1460
> tab:not(.reorderable-page) {
1461
margin-bottom: -1px;
1462
&:hover { box-shadow: inset 0 -2px $track_color; }
1464
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1466
}
1467
}
1468
}
1469
&.bottom {
1471
border-top-style: solid;
1472
> tabs {
1473
> tab:not(.reorderable-page) {
1474
margin-top: -1px;
1475
&:hover { box-shadow: inset 0 2px $track_color; }
1477
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1479
}
1480
}
1481
}
1482
&.left {
1484
border-right-style: solid;
1485
> tabs {
1486
> tab:not(.reorderable-page) {
1487
margin-right: -1px;
1488
&:hover { box-shadow: inset -2px 0 $track_color; }
1490
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1492
}
1493
}
1494
}
1495
&.right {
1497
border-left-style: solid;
1498
> tabs {
1499
> tab:not(.reorderable-page) {
1500
margin-left: -1px;
1501
&:hover { box-shadow: inset 2px 0 $track_color; }
1503
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1505
}
1506
}
1507
}
1508
&.top > tabs > arrow {
1510
@extend %notebook_vert_arrows;
1511
border-top-style: none;
1513
}
1514
&.bottom > tabs > arrow {
1516
@extend %notebook_vert_arrows;
1517
border-bottom-style: none;
1519
}
1520
@at-root %notebook_vert_arrows {
1522
padding-left: 4px;
1523
padding-right: 4px;
1524
&.down {
1526
margin-left: -8px;
1527
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1528
}
1529
&.up {
1531
margin-right: -8px;
1532
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1533
}
1534
}
1535
&.left > tabs > arrow {
1537
@extend %notebook_horz_arrows;
1538
border-left-style: none;
1540
}
1541
&.right > tabs > arrow {
1543
@extend %notebook_horz_arrows;
1544
border-right-style: none;
1546
}
1547
@at-root %notebook_horz_arrows {
1549
padding-top: 4px;
1550
padding-bottom: 4px;
1551
&.down {
1553
margin-top: -8px;
1554
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1555
}
1556
&.up {
1558
margin-bottom: -8px;
1559
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1560
}
1561
}
1562
> tabs > arrow {
1564
@extend %button_basic.flat;
1565
min-height: 16px;
1567
min-width: 16px;
1568
border-radius: 0;
1569
}
1570
tab {
1572
transition: $material_transition;
1573
min-height: 24px;
1574
min-width: 24px;
1575
padding: 6px 12px;
1576
outline-offset: -6px;
1578
border-width: 1px; // for reorderable tabs
1580
border-color: transparent; //
1581
color: $secondary_fg_color;
1583
font-weight: 500;
1584
&:hover {
1586
color: $fg_color;
1587
&.reorderable-page {
1589
border-color: $borders_color;
1590
background-color: $secondary_base_color;
1591
}
1592
}
1593
&:disabled { color: $insensitive_secondary_fg_color; }
1595
&:checked {
1597
color: $fg_color;
1598
&:disabled { color: $insensitive_fg_color; }
1600
&:not(.reorderable-page) { animation: tab_ripple_effect $material_duration * 2 ease-in-out; }
1602
&.reorderable-page {
1604
border-color: $borders_color;
1605
background-color: $base_color;
1606
}
1607
}
1608
// colors the button like the label, overridden otherwise
1610
button.flat {
1611
// FIXME: generalize .small-button?
1612
min-width: $small_size;
1613
min-height: $small_size;
1614
padding: 0;
1615
@extend %button_basic.image-button;
1617
&:last-child {
1619
margin-left: 6px;
1620
margin-right: -6px;
1621
}
1622
&:first-child {
1624
margin-left: -6px;
1625
margin-right: 6px;
1626
}
1627
}
1628
}
1629
&.top,
1631
&.bottom {
1632
tabs {
1633
padding-left: 8px;
1634
padding-right: 8px;
1635
&:not(:only-child) {
1637
&:first-child { margin-left: 0; }
1638
&:last-child { margin-right: 0; }
1639
}
1640
tab {
1642
&.reorderable-page {
1643
margin: 0 -1px;
1644
border-style: none solid;
1645
}
1646
}
1647
}
1648
}
1649
&.left,
1651
&.right {
1652
tabs {
1653
padding-top: 8px;
1654
padding-bottom: 8px;
1655
&:not(:only-child) {
1657
&:first-child { margin-top: 0; }
1658
&:last-child { margin-bottom: 0; }
1659
}
1660
tab {
1662
&.reorderable-page {
1663
margin: -1px 0;
1664
border-style: solid none;
1665
}
1666
}
1667
}
1668
}
1669
}
1670
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1672
background-color: $base_color;
1673
entry,
1675
spinbutton:not(.vertical) { @extend %entry.flat; }
1676
revealer entry,
1678
revealer spinbutton:not(.vertical) { @extend %entry; }
1679
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1681
}
1682
}
1683
/**************
1686
* Scrollbars *
1687
**************/
1688
scrollbar {
1689
$_slider_min_length: 24px;
1690
// disable steppers
1692
@at-root * {
1693
-GtkScrollbar-has-backward-stepper: false;
1694
-GtkScrollbar-has-forward-stepper: false;
1695
}
1696
transition: $material_transition;
1698
background-color: $base_color;
1699
background-clip: $extra_background_clip;
1700
// scrollbar border
1702
&.top { border-bottom: 1px solid $borders_color; }
1703
&.bottom { border-top: 1px solid $borders_color; }
1704
&.left { border-right: 1px solid $borders_color; }
1705
&.right { border-left: 1px solid $borders_color; }
1706
// slider
1708
slider {
1709
transition: $material_transition, margin 0, border-width 0;
1710
min-width: 8px;
1711
min-height: 8px;
1712
border: 4px solid transparent;
1713
border-radius: 100px;
1714
background-clip: padding-box;
1715
background-color: $tertiary_fg_color;
1716
&:hover { background-color: $secondary_fg_color; }
1718
&:active { background-color: $fg_color; }
1720
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1722
}
1723
&.fine-tune {
1725
slider {
1726
transition: $material_transition, margin 0, border-width 0, min-width 0, min-height 0;
1727
min-width: 4px;
1728
min-height: 4px;
1729
}
1730
&.horizontal slider { margin: 2px 0; }
1732
&.vertical slider { margin: 0 2px; }
1734
}
1735
&.overlay-indicator {
1737
&:not(.dragging):not(.hovering) {
1738
border-color: transparent;
1739
background-color: transparent;
1740
slider {
1742
min-width: 4px;
1743
min-height: 4px;
1744
margin: 2px;
1745
border: 2px solid scale-alpha($base_color, $lower_opacity);
1746
}
1747
button {
1749
min-width: 4px;
1750
min-height: 4px;
1751
margin: 2px;
1752
border: 2px solid scale-alpha($base_color, $lower_opacity);
1753
border-radius: 100px;
1754
background-color: $tertiary_fg_color;
1755
background-clip: padding-box;
1756
-gtk-icon-source: none;
1757
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1759
}
1760
&.horizontal {
1762
slider { min-width: $_slider_min_length; }
1763
button { min-width: 8px; }
1765
}
1766
&.vertical {
1768
slider { min-height: $_slider_min_length; }
1769
button { min-height: 8px; }
1771
}
1772
}
1773
&.dragging,
1775
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1776
}
1777
&.horizontal slider { min-width: $_slider_min_length; }
1779
&.vertical slider { min-height: $_slider_min_length; }
1781
// button styling
1783
button {
1784
@extend %button_basic.flat;
1785
min-width: 16px;
1786
min-height: 16px;
1787
padding: 0;
1788
border-radius: 0;
1789
}
1790
// button icons
1792
&.vertical {
1793
button {
1794
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1795
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1797
}
1798
}
1799
&.horizontal {
1801
button {
1802
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1803
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1805
}
1806
}
1807
}
1808
/**********
1811
* Switch *
1812
**********/
1813
switch {
1814
transition: $material_transition;
1815
margin: $container_padding 0;
1816
border: 4px solid transparent;
1817
border-radius: 100px;
1818
background-color: $track_color;
1819
background-clip: padding-box;
1820
font-size: 0;
1821
&:disabled { color: $insensitive_fg_color; }
1823
&:checked {
1825
background-color: scale-alpha($accent_bg_color, 0.5);
1826
&:disabled {
1828
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1829
color: $insensitive_fg_color;
1830
}
1831
}
1832
slider {
1834
@include entry(normal);
1835
transition: $material_transition, margin 0;
1837
min-width: $small_size;
1838
min-height: $small_size;
1839
margin: -4px 0 -4px -4px;
1840
-gtk-outline-radius: 100px;
1841
border-radius: 100px;
1842
background-image: -gtk-gradient(radial,
1843
center center, 0,
1844
center center, 0.5,
1845
to(transparent),
1846
to(transparent));
1847
}
1848
&:hover slider { @include entry(focus); }
1850
&:disabled slider { @include entry(insensitive); }
1852
&:checked slider {
1854
transition: $material_transition, margin 0, background-image 0;
1855
animation: needs_attention $material_duration $material_timing_function forwards;
1856
margin: -4px -4px -4px 0;
1857
// background-color: $accent_bg_color;
1858
color: $selected_fg_color;
1859
}
1860
&:checked:disabled slider { animation: none; }
1862
row:selected & {
1864
}
1865
}
1866
/*************************
1869
* Check and Radio items *
1870
*************************/
1871
// draw regular check and radio items using our PNG assets
1872
// all assets are rendered from assets.svg. never add pngs directly
1873
//selection-mode
1875
@each $s,$as in ('','-selectionmode'),
1876
(':active', '-active-selectionmode'),
1877
(':disabled', '-insensitive-selectionmode'),
1878
(':checked', '-checked-selectionmode'),
1879
(':checked:active', '-checked-active-selectionmode'),
1880
(':disabled:checked', '-checked-insensitive-selectionmode') {
1881
.view.content-view.check#{$s}:not(list) {
1882
-gtk-icon-shadow: $z-depth-1;
1883
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
1884
url("assets/checkbox#{$as}@2.png"));
1885
margin: 8px;
1886
background-color: transparent;
1887
&:hover, &:active { -gtk-icon-shadow: $z-depth-2; }
1889
&:disabled { -gtk-icon-shadow: none; }
1891
}
1892
}
1893
checkbutton.text-button, radiobutton.text-button {
1895
// this is for a nice focus on check and radios text
1896
padding: 2px 0;
1897
outline-offset: 0;
1898
label:not(:only-child) {
1900
&:first-child { margin-left: 4px; }
1901
&:last-child { margin-right: 4px; }
1903
}
1904
}
1905
check,
1907
radio {
1908
min-height: 24px;
1909
min-width: 24px;
1910
-gtk-icon-source: none;
1911
margin: -12px -8px;
1913
padding: 12px;
1914
outline-offset: 4px;
1915
// border-radius: 100%;
1916
@extend %button_basic.flat;
1918
@extend %button_basic.image-button;
1920
color: gtkalpha(currentColor, $enabled_opacity);
1922
&:hover, &:active { color: currentColor; }
1924
&:checked, &:checked:disabled { background-color: transparent; }
1926
&:checked, &:indeterminate { color: $accent_bg_color; }
1928
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1930
&:only-child { margin: -12px; }
1932
.osd & {
1934
}
1935
menu menuitem & {
1937
transition: none;
1938
margin: -16px -16px; // this is a workaround for a menu check/radio size allocation issue
1939
&:not(:checked):not(:indeterminate):hover { color: gtkalpha(currentColor, $enabled_opacity); }
1941
&, &:hover, &:disabled {
1943
background-image: none;
1944
// color: inherit;
1945
// animation: none;
1946
}
1947
}
1948
}
1949
%check,
1951
check {
1952
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1953
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1954
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1956
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1957
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1959
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1960
}
1961
%radio,
1963
radio {
1964
border-image: -gtk-gradient(radial,
1965
center center, 0,
1966
center center, 0.001,
1967
to($accent_bg_color),
1968
to(transparent))
1969
24 / 24px;
1970
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1971
-gtk-recolor(url("assets/radio-unchecked-symbolic.png")));
1972
&:checked {
1974
border-image: -gtk-gradient(radial,
1975
center center, 0,
1976
center center, (10 / 48 / 2),
1977
to($accent_bg_color),
1978
to(transparent))
1979
24 / 24px;
1980
}
1981
&:checked:disabled {
1983
border-image: -gtk-gradient(radial,
1984
center center, 0,
1985
center center, (10 / 48 / 2),
1986
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1987
to(transparent))
1988
24 / 24px;
1989
}
1990
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1992
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1993
&:indeterminate:checked {
1995
border-image: -gtk-gradient(radial,
1996
center center, 0,
1997
center center, 0.001,
1998
to($accent_bg_color),
1999
to(transparent))
2000
24 / 24px;
2001
}
2002
}
2003
// let's animate things
2005
@keyframes check_check {
2006
from { -gtk-icon-transform: rotate(90deg); }
2007
to { -gtk-icon-transform: unset; }
2008
}
2009
@keyframes check_radio {
2011
from { -gtk-icon-transform: scale(0); }
2012
to { -gtk-icon-transform: unset; }
2013
}
2014
@keyframes check_indeterminate {
2016
from { -gtk-icon-transform: unset; }
2017
50% { -gtk-icon-transform: scale(0, 1); }
2018
to { -gtk-icon-transform: unset; }
2019
}
2020
check:not(:indeterminate):checked { animation: check_check $material_duration $material_timing_function; }
2022
check:not(:indeterminate):checked:active { animation: check_check $material_duration $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
2024
// radio:not(:indeterminate):checked { animation: check_radio $material_duration $material_timing_function; }
2026
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_duration $material_timing_function; }
2028
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; }
2030
// no animations in menus
2032
menu menuitem {
2033
check:not(:indeterminate):checked,
2034
radio:not(:indeterminate):checked,
2035
check:indeterminate:checked,
2036
radio:indeterminate:checked { animation: none; }
2037
}
2038
treeview.view check,
2040
treeview.view radio {
2041
// margin: -12px;
2042
// padding: 12px;
2043
padding: 0;
2044
&:checked:hover, &:selected:checked:hover { background-image: none; }
2046
& {
2048
color: $secondary_fg_color;
2049
&:hover, &:active { color: $fg_color; }
2051
&:disabled { color: $insensitive_secondary_fg_color; }
2053
&:checked, &:indeterminate { color: $accent_bg_color; }
2055
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2057
}
2058
&:selected {
2060
color: $secondary_selected_fg_color;
2061
&:hover, &:active { color: $selected_fg_color; }
2063
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2065
&:checked, &:indeterminate { color: $accent_bg_color; }
2067
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2069
}
2070
}
2071
treeview.view radio:checked {
2073
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2074
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2075
border-image: none;
2076
}
2077
/************
2080
* GtkScale *
2081
************/
2082
scale {
2083
// sizing
2084
$_marks_lenght: 8px;
2086
$_marks_distance: 8px;
2087
min-height: 12px;
2089
min-width: 12px;
2090
padding: 12px;
2091
* { transition: $material_transition; }
2093
// the slider is inside the trough, so to have make it bigger there's a negative margin
2095
slider {
2096
min-height: $small_size;
2097
min-width: $small_size;
2098
margin: -10px;
2099
}
2100
// the backing bit
2102
trough {
2103
outline-offset: 2px;
2104
background-color: $track_color;
2105
&:disabled { color: $insensitive_fg_color; }
2107
}
2108
// the colored part of the backing bit
2110
highlight {
2111
background-color: $accent_bg_color;
2112
&:disabled { background-color: transparent; }
2114
}
2115
// this is another differently styled part of the backing bit, the most relevant use case is for example
2117
// in media player to indicate how much video stream as been cached
2118
fill {
2119
background-color: $track_color;
2120
&:disabled { background-color: transparent; }
2122
}
2123
slider {
2125
// border-radius: 100%;
2126
// background-color: $accent_bg_color;
2127
background-repeat: no-repeat;
2128
background-position: center;
2129
@each $s,$as in ('',''),
2131
(':disabled','-insensitive') {
2132
&#{$s} {
2133
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2134
background-image: -gtk-scaled(url('#{$_url}.png'),
2135
url('#{$_url}@2.png'));
2136
}
2137
}
2138
background-size: calc(100% - 8px);
2140
&:hover { background-size: calc(100% - 4px); }
2142
&:active { background-size: calc(100% - 0px); }
2144
}
2145
// click-and-hold the slider to activate
2147
&.fine-tune {
2148
// to make the slider shrink in fine-tune mode
2149
slider { background-size: calc(100% - 12px); }
2150
}
2151
value { color: gtkalpha(currentColor, $hint_opacity); }
2153
marks {
2155
color: $track_color;
2156
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2158
(bottom, bottom, top),
2159
(top, left, right),
2160
(bottom, right, left) {
2161
&.#{$marks_class} {
2162
margin-#{$marks_margin}: $_marks_distance;
2163
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2164
}
2165
}
2166
}
2167
&.horizontal {
2169
indicator {
2170
min-height: $_marks_lenght;
2171
min-width: 1px;
2172
}
2173
}
2174
&.vertical {
2176
indicator {
2177
min-height: 1px;
2178
min-width: $_marks_lenght;
2179
}
2180
}
2181
// *WARNING* scale with marks madness following
2183
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2185
$suffix: if($variant == 'light', '', '-dark');
2186
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2188
('vertical', 'vert') {
2189
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2190
('scale-has-marks-below', ':first-child:not(:only-child)') {
2191
@each $state, $state_infix in ('', ''),
2192
(':disabled', '-insensitive') {
2193
&.#{$dir_class} {
2194
%#{$marks_infix}-#{$dir_infix},
2195
contents#{$nth_child} > trough > slider {
2196
&#{$state} {
2197
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2198
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2200
}
2201
@if $dir_class == 'horizontal' {
2203
min-height: 30px;
2204
min-width: $small_size;
2205
@if $marks_infix == 'scale-has-marks-above' {
2207
margin-top: -16px;
2208
background-position: center calc(100% - 4px);
2210
&:hover { background-position: center calc(100% - 2px); }
2212
&:active { background-position: center calc(100% - 0px); }
2214
}
2215
@if $marks_infix == 'scale-has-marks-below' {
2217
margin-bottom: -16px;
2218
background-position: center calc(4px);
2220
&:hover { background-position: center calc(2px); }
2222
&:active { background-position: center calc(0px); }
2224
}
2225
}
2226
@if $dir_class == 'vertical' {
2228
min-height: $small_size;
2229
min-width: 30px;
2230
@if $marks_infix == 'scale-has-marks-above' {
2232
margin-left: -16px;
2233
background-position: calc(4px) center;
2235
&:hover { background-position: calc(2px) center; }
2237
&:active { background-position: calc(0px) center; }
2239
}
2240
@if $marks_infix == 'scale-has-marks-below' {
2242
margin-right: -16px;
2243
background-position: calc(100% - 4px) center;
2245
&:hover { background-position: calc(100% - 2px) center; }
2247
&:active { background-position: calc(100% - 0px) center; }
2249
}
2250
}
2251
}
2252
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2254
&.fine-tune contents#{$nth_child} > trough > slider {
2255
// bigger negative margins to make the trough grow here as well
2256
@if $dir_class == 'horizontal' {
2258
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2259
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2261
}
2262
@if $dir_class == 'vertical' {
2264
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2265
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2267
}
2268
}
2269
}
2270
}
2271
}
2272
}
2273
&.color {
2275
min-height: 0;
2276
min-width: 0;
2277
&.horizontal {
2279
padding: 0 0 12px 0;
2280
trough {
2282
padding-bottom: $bar_size;
2283
}
2284
slider {
2286
@extend %scale-has-marks-above-horz;
2287
margin-bottom: -10px - $bar_size;
2289
margin-top: 0;
2290
}
2291
}
2292
&.vertical {
2294
&:dir(ltr) {
2295
padding: 0 0 0 12px;
2296
trough {
2298
padding-left: $bar_size;
2299
}
2300
slider {
2302
@extend %scale-has-marks-below-vert;
2303
margin-left: -10px - $bar_size;
2305
margin-right: 0;
2306
}
2307
}
2308
&:dir(rtl) {
2310
padding: 0 12px 0 0;
2311
trough {
2313
padding-right: $bar_size;
2314
}
2315
slider {
2317
@extend %scale-has-marks-above-vert;
2318
margin-right: -10px - $bar_size;
2320
margin-left: 0;
2321
}
2322
}
2323
}
2324
&.fine-tune {
2326
&.horizontal {
2327
slider {
2328
@extend %scale-has-marks-above-horz-fine-tune;
2329
}
2330
}
2331
&.vertical {
2333
&:dir(ltr) {
2334
slider {
2335
@extend %scale-has-marks-below-vert-fine-tune;
2336
}
2337
}
2338
&:dir(rtl) {
2340
slider {
2341
@extend %scale-has-marks-above-vert-fine-tune;
2342
}
2343
}
2344
}
2345
}
2346
}
2347
}
2348
/*****************
2351
* Progress bars *
2352
*****************/
2353
progressbar {
2354
// sizing
2355
&.horizontal {
2356
trough,
2357
progress { min-height: $bar_size; }
2358
}
2359
&.vertical {
2361
trough,
2362
progress { min-width: $bar_size; }
2363
}
2364
// FIXME: insensitive state missing and some other state should be set probably
2366
color: $tertiary_fg_color;
2367
font-size: smaller;
2368
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2370
progress { background-color: $selected_bg_color; }
2372
&.osd { // progressbar.osd used for epiphany page loading progress
2374
// min-width: $bar_size;
2375
// min-height: $bar_size;
2376
// background-color: transparent;
2377
// trough { background-color: transparent; }
2379
progress {
2381
}
2382
}
2383
}
2384
/*************
2387
* Level Bar *
2388
*************/
2389
levelbar {
2390
block {
2391
min-width: $medium_size;
2392
min-height: $bar_size;
2393
}
2394
&.vertical block {
2396
min-width: $bar_size;
2397
min-height: $medium_size;
2398
}
2399
trough {
2401
padding: 2px;
2402
border-radius: 2px;
2403
@include entry(normal);
2405
&:disabled { @include entry(insensitive); }
2407
}
2408
&.horizontal.discrete block { margin: 0 1px; }
2410
&.vertical.discrete block { margin: 1px 0; }
2412
&.horizontal.discrete trough { padding: 2px 1px; }
2414
&.vertical.discrete trough { padding: 1px 2px; }
2416
block {
2418
&.low {
2419
background-color: $warning_color;
2420
}
2421
&.high {
2423
background-color: $selected_bg_color;
2424
}
2425
&.full {
2427
background-color: $success_color;
2428
}
2429
&.empty {
2431
background-color: $track_color;
2432
color: $insensitive_fg_color;
2433
}
2434
}
2435
}
2436
/****************
2439
* Print dialog *
2440
*****************/
2441
printdialog {
2442
paper {
2443
padding: 0;
2444
border: 1px solid $borders_color;
2445
background: $base_color;
2446
color: $fg_color;
2447
}
2448
.dialog-action-box { margin: 12px; }
2450
}
2451
/**********
2454
* Frames *
2455
**********/
2456
frame > border,
2457
.frame {
2458
margin: 0;
2459
padding: 0;
2460
border: 1px solid $borders_color;
2461
border-radius: 0;
2462
box-shadow: none;
2463
&.flat { border-style: none; }
2465
}
2466
actionbar > revealer > box {
2468
padding: $container_padding;
2469
border-top: 1px solid $borders_color;
2470
}
2471
scrolledwindow {
2473
viewport.frame { // avoid double borders when viewport inside scrolled window
2474
border-style: none;
2475
}
2476
// This is used when content is touch-dragged past boundaries.
2478
// draws a box on top of the content, the size changes programmatically.
2479
overshoot {
2480
&.top { @include overshoot(top); }
2481
&.bottom { @include overshoot(bottom); }
2483
&.left { @include overshoot(left); }
2485
&.right { @include overshoot(right); }
2487
}
2488
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2490
undershoot {
2491
&.top { @include undershoot(top); }
2492
&.bottom { @include undershoot(bottom); }
2494
&.left { @include undershoot(left); }
2496
&.right { @include undershoot(right); }
2498
}
2499
junction { // the small square between two scrollbars
2501
border-style: solid none none solid;
2502
border-width: 1px;
2503
border-color: $borders_color;
2504
background-color: $base_color;
2505
&:dir(rtl) { border-style: solid solid none none; }
2507
}
2508
}
2509
//vbox and hbox separators
2511
separator {
2512
min-width: 1px;
2513
min-height: 1px;
2514
background: $borders_color;
2515
}
2516
/*********
2519
* Lists *
2520
*********/
2521
list {
2522
border-color: $borders_color;
2523
background-color: $base_color;
2524
row { padding: 2px; }
2526
}
2527
row {
2529
transition: $material_transition;
2530
&:hover { transition: none; }
2532
&.activatable {
2534
background-image: radial-gradient(circle farthest-corner at center,
2535
gtkalpha(currentColor, 0) 100%,
2536
transparent 0%),
2537
image(gtkalpha(currentColor, 0));
2538
&:hover {
2540
background-image: radial-gradient(circle farthest-corner at center,
2541
gtkalpha(currentColor, 0) 100%,
2542
transparent 0%),
2543
image(gtkalpha(currentColor, 0.05));
2544
}
2545
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2547
&:active {
2548
transition: $material_transition, background-image 0;
2549
animation: row_ripple_effect $material_duration $material_timing_function forwards;
2550
}
2551
}
2552
&:selected { @extend %selected_items; }
2554
}
2555
/*********************
2558
* App Notifications *
2559
*********************/
2560
.app-notification,
2561
.app-notification.frame {
2562
@extend %osd;
2563
@extend toolbar.osd;
2565
margin: 8px;
2567
border { border: none; }
2569
}
2570
/*************
2573
* Expanders *
2574
*************/
2575
expander {
2576
arrow {
2577
transition: $material_transition;
2578
min-width: 16px;
2579
min-height: 16px;
2580
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2581
-gtk-icon-transform: rotate(-90deg);
2582
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2584
&:checked { -gtk-icon-transform: unset; }
2586
color: $secondary_fg_color;
2588
&:hover, &:active { color: $fg_color; }
2590
&:disabled { color: $insensitive_secondary_fg_color; }
2592
&:selected {
2594
color: $secondary_selected_fg_color;
2595
&:hover, &:active { color: $selected_fg_color; }
2597
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2599
}
2600
}
2601
}
2602
/************
2605
* Calendar *
2606
***********/
2607
calendar {
2608
padding: 1px;
2609
border: 1px solid $borders_color;
2610
color: $fg_color;
2611
&:disabled { color: $insensitive_fg_color; }
2613
&:selected {
2615
@extend %selected_items;
2616
border-radius: 2px + 1px;
2618
}
2619
&.header {
2621
border: none;
2622
border-bottom: 1px solid $borders_color;
2623
border-radius: 0;
2624
}
2625
&.button { @extend %button_basic.flat; }
2627
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2629
&.highlight {
2631
color: gtkalpha(currentColor, $hint_opacity);
2632
font-weight: 500;
2633
}
2634
}
2635
/***********
2638
* Dialogs *
2639
***********/
2640
messagedialog { // Message Dialog styling
2641
&.background { background-color: $light_color; }
2642
.titlebar {
2644
min-height: $small_size;
2645
border-style: none;
2646
box-shadow: inset 0 1px $highlight_color;
2647
background-color: $light_color;
2648
}
2649
&.csd { // rounded bottom border styling for csd version
2651
&.background {
2652
// bigger radius for better antialiasing
2653
border-bottom-left-radius: 2px;
2654
border-bottom-right-radius: 2px;
2655
}
2656
.dialog-action-area button {
2658
padding: 8px 16px;
2659
border-top: 1px solid $borders_color;
2660
border-radius: 0;
2661
@extend %button_basic.flat;
2663
&:first-child{ border-bottom-left-radius: 2px; }
2665
&:last-child { border-bottom-right-radius: 2px; }
2667
}
2668
}
2669
}
2670
filechooser {
2672
.dialog-action-box { border-top: 1px solid $borders_color; }
2673
#pathbarbox { border-bottom: 1px solid $borders_color; }
2675
}
2676
filechooserbutton:drop(active) {
2678
box-shadow: none;
2679
}
2680
/***********
2683
* Sidebar *
2684
***********/
2685
.sidebar {
2686
border-style: none;
2687
background-color: $light_color;
2688
@at-root %sidebar_left,
2690
&:dir(ltr),
2691
&.left,
2692
&.left:dir(rtl) {
2693
border-right: 1px solid $borders_color;
2694
border-left-style: none;
2695
}
2696
@at-root %sidebar_right
2698
&:dir(rtl),
2699
&.right {
2700
border-left: 1px solid $borders_color;
2701
border-right-style: none;
2702
}
2703
list { background-color: transparent; }
2705
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2707
}
2708
stacksidebar {
2710
&.sidebar {
2711
&:dir(ltr),
2712
&.left,
2713
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2714
&:dir(rtl),
2716
&.right { list { @extend %sidebar_right; }}
2717
}
2718
row {
2720
padding: 10px 4px;
2721
> label {
2723
padding-left: 6px;
2724
padding-right: 6px;
2725
}
2726
&.needs-attention > label { @extend %needs_attention; }
2728
}
2729
}
2730
/****************
2733
* File chooser *
2734
****************/
2735
placessidebar {
2736
> viewport.frame { border-style: none; }
2737
row {
2739
// Needs overriding of the GtkListBoxRow padding
2740
min-height: 32px;
2741
padding: 0;
2742
// Using margins/padding directly in the SidebarRow
2744
// will make the animation of the new bookmark row jump
2745
> revealer { padding: 0 12px; }
2746
&:selected { color: $selected_fg_color; }
2748
&:disabled { color: $insensitive_fg_color; }
2750
image.sidebar-icon {
2752
opacity: $hint_opacity; // dim the device icons
2753
&:dir(ltr) { padding-right: 8px; }
2755
&:dir(rtl) { padding-left: 8px; }
2756
}
2757
label.sidebar-label {
2759
&:dir(ltr) { padding-right: 2px; }
2760
&:dir(rtl) { padding-left: 2px; }
2761
}
2762
@at-root button.sidebar-button {
2764
@extend %button_basic.flat;
2765
min-height: $small_size;
2767
min-width: $small_size;
2768
margin-top: 0;
2769
margin-bottom: 0;
2770
padding: 0;
2771
border-radius: 100%;
2772
-gtk-outline-radius: 100%;
2773
row:selected & { @extend %button_selected.flat; }
2775
}
2776
&.sidebar-placeholder-row {
2778
min-height: 2px;
2779
padding: 0 8px;
2780
background-image: image($accent_bg_color);
2781
background-clip: content-box;
2782
}
2783
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2785
&:drop(active):not(:disabled) {
2787
box-shadow: inset 0 0 0 2px $accent_bg_color;
2788
&:selected {
2790
// background-color: $accent_bg_color;
2791
// color: $selected_fg_color;
2792
}
2793
}
2794
}
2795
}
2796
placesview {
2798
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2799
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2801
// this selects the "connect to server" label
2803
> actionbar > revealer > box > label {
2804
padding-left: 8px;
2805
padding-right: 8px;
2806
}
2807
}
2808
/*********
2811
* Paned *
2812
*********/
2813
paned {
2814
> separator {
2815
min-width: 1px;
2816
min-height: 1px;
2817
-gtk-icon-source: none; // defeats the ugly default handle decoration
2818
border-style: none; // just to be sure
2819
background-color: transparent;
2820
// workaround, using background istead of a border since the border will get rendered twice (?)
2821
background-image: image($borders_color);
2822
background-size: 1px 1px;
2823
&.wide {
2825
min-width: 6px;
2826
min-height: 6px;
2827
background-color: $bg_color;
2828
background-image: image($borders_color), image($borders_color);
2829
background-size: 1px 1px, 1px 1px;
2830
}
2831
}
2832
&.horizontal > separator {
2834
background-repeat: repeat-y;
2835
&:dir(ltr) {
2837
margin: 0 -8px 0 0;
2838
padding: 0 8px 0 0;
2839
background-position: left;
2840
}
2841
&:dir(rtl) {
2843
margin: 0 0 0 -8px;
2844
padding: 0 0 0 8px;
2845
background-position: right;
2846
}
2847
&.wide {
2849
margin: 0;
2850
padding: 0;
2851
background-repeat: repeat-y, repeat-y;
2852
background-position: left, right;
2853
}
2854
}
2855
&.vertical > separator {
2857
margin: 0 0 -8px 0;
2858
padding: 0 0 8px 0;
2859
background-repeat: repeat-x;
2860
background-position: top;
2861
&.wide {
2863
margin: 0;
2864
padding: 0;
2865
background-repeat: repeat-x, repeat-x;
2866
background-position: bottom, top;
2867
}
2868
}
2869
}
2870
/**************
2873
* GtkInfoBar *
2874
**************/
2875
infobar { border-style: none; }
2876
.info { background-color: $info_bg_color; }
2878
.question { background-color: $question_bg_color; }
2880
.warning { background-color: $warning_bg_color; }
2882
.error { background-color: $error_bg_color; }
2884
.info,
2886
.question,
2887
.warning,
2888
.error {
2889
color: $selected_fg_color;
2890
button { @extend %button_selected; }
2892
label:selected {
2894
}
2895
*:link { @extend %link_selected; }
2897
}
2898
/************
2901
* Tooltips *
2902
************/
2903
tooltip {
2904
&.background {
2905
// background-color needs to be set this way otherwise it gets drawn twice
2906
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2907
background-color: scale-alpha($base_color, $higher_opacity);
2908
}
2909
// @extend %osd;
2911
// padding: 4px; /* not working */
2913
border-radius: 2px;
2914
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2915
// FIXME: we need a border or tooltips vanish on black background.
2917
decoration { background-color: transparent; }
2918
label {
2920
min-height: 32px - 6px * 2;
2921
padding: 4px 12px - 6px;
2922
}
2923
* { // Yeah this is ugly
2925
padding: 0;
2926
background-color: transparent;
2927
color: inherit;
2928
}
2929
}
2930
/*****************
2933
* Color Chooser *
2934
*****************/
2935
colorswatch {
2936
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2937
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2938
// applied to the overlay box.
2939
// base color corners rounding
2941
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2942
// sports a bigger radius.
2943
// nth-child is needed by the custom color strip.
2944
&.top {
2946
border-top-left-radius: $material_radius + 0.5px;
2947
border-top-right-radius: $material_radius + 0.5px;
2948
overlay {
2950
border-top-left-radius: $material_radius;
2951
border-top-right-radius: $material_radius;
2952
}
2953
}
2954
&.bottom {
2956
border-bottom-left-radius: $material_radius + 0.5px;
2957
border-bottom-right-radius: $material_radius + 0.5px;
2958
overlay {
2960
border-bottom-left-radius: $material_radius;
2961
border-bottom-right-radius: $material_radius;
2962
}
2963
}
2964
&.left,
2966
&:first-child:not(.top) {
2967
border-top-left-radius: $material_radius + 0.5px;
2968
border-bottom-left-radius: $material_radius + 0.5px;
2969
overlay {
2971
border-top-left-radius: $material_radius;
2972
border-bottom-left-radius: $material_radius;
2973
}
2974
}
2975
&.right,
2977
&:last-child:not(.bottom) {
2978
border-top-right-radius: $material_radius + 0.5px;
2979
border-bottom-right-radius: $material_radius + 0.5px;
2980
overlay {
2982
border-top-right-radius: $material_radius;
2983
border-bottom-right-radius: $material_radius;
2984
}
2985
}
2986
&.dark overlay { color: white; }
2988
&.light overlay { color: scale-alpha(black, 0.8); }
2990
&.dark { color: white; } // for focus ring
2992
&.light { color: scale-alpha(black, 0.8); } // for focus ring
2994
&:drop(active) {
2996
box-shadow: none;
2997
&.light overlay {
2999
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3000
}
3001
&.dark overlay {
3003
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3004
}
3005
}
3006
overlay {
3008
transition: $material_transition;
3009
box-shadow: $z-depth-1;
3010
&:hover { box-shadow: $z-depth-2; }
3012
}
3013
&#add-color-button {
3015
border-radius: $material_radius $material_radius 0 0;
3016
color: white; // for focus ring
3017
&:only-child { border-radius: $material_radius; }
3019
overlay {
3021
background-image: linear-gradient(to right,
3022
$error_bg_color 25%,
3023
$warning_bg_color 25%, $warning_bg_color 50%,
3024
$info_bg_color 50%, $info_bg_color 75%,
3025
$question_bg_color 75%);
3026
color: white;
3027
}
3028
}
3029
&:disabled {
3031
opacity: $disabled_opacity;
3032
overlay { box-shadow: none; }
3034
}
3035
row:selected & {
3037
}
3038
&#editor-color-sample {
3040
border-radius: $material_radius + 0.5px;
3041
overlay { border-radius: $material_radius; }
3043
// overlay:hover { box-shadow: $z-depth-1; }
3045
}
3046
}
3047
// colorscale popup
3049
colorchooser .popover.osd {
3050
transition: box-shadow $material_duration $material_timing_function;
3051
border-radius: 2px;
3052
box-shadow: $z-depth-2;
3053
background-color: $base_color;
3054
&:backdrop { box-shadow: $z-depth-1; }
3056
spinbutton:not(.vertical) { @extend %entry.flat; }
3058
}
3059
/********
3062
* Misc *
3063
********/
3064
//content view (grid/list)
3065
.content-view {
3066
background-color: $bg_color;
3067
// &:hover { -gtk-icon-effect: highlight; }
3069
rubberband { @extend rubberband; }
3071
}
3072
.scale-popup {
3074
.osd & { @extend %osd; }
3075
.osd & button.flat { //FIXME: quick hack, redo properly
3077
}
3078
button { // +/- buttons on GtkVolumeButton popup
3080
}
3081
}
3082
/**********************
3085
* Window Decorations *
3086
*********************/
3087
decoration {
3088
transition: box-shadow $material_duration $material_timing_function;
3089
border-radius: 2px 2px 0 0;
3090
box-shadow: $z-depth-4, 0 16px 16px transparent;
3091
// FIXME rationalize shadows
3093
// this is used for the resize cursor area
3095
margin: 8px;
3096
&:backdrop {
3098
// the transparent shadow here is to enforce that the shadow extents don't
3099
// change when we go to backdrop, to prevent jumping windows.
3100
// The biggest shadow should be in the same order then in the active state
3101
// or the jumping will happen during the transition.
3102
box-shadow: $z-depth-2, 0 16px 16px transparent;
3103
}
3104
.fullscreen &,
3106
.tiled & { border-radius: 0; }
3107
.popup & { box-shadow: none; }
3109
// server-side decorations as used by mutter
3111
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3112
.csd.popup & {
3114
border-radius: 2px;
3115
box-shadow: $z-depth-2;
3116
}
3117
tooltip.csd & {
3119
border-radius: 2px;
3120
box-shadow: $z-depth-2;
3121
}
3122
messagedialog.csd & {
3124
border-radius: 2px;
3125
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3126
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3128
}
3129
.solid-csd & {
3131
margin: 4px;
3132
// border: solid 1px $borders_color;
3133
border-radius: 0;
3134
box-shadow: none;
3135
background-color: $bg_color;
3136
}
3137
}
3138
// Window Close button
3140
button.titlebutton {
3141
// @extend %button_basic.flat;
3142
@extend %button_basic.image-button;
3144
.selection-mode & {
3146
}
3147
}
3148
// catch all extend :)
3151
%selected_items {
3153
background-color: $selected_bg_color;
3154
@at-root %nobg_selected_items, & {
3156
color: $selected_fg_color;
3157
&:disabled { color: $insensitive_selected_fg_color; }
3159
}
3160
}
3161
.monospace { font: Monospace; }
3163
/**********************
3166
* Touch Copy & Paste *
3167
*********************/
3168
//touch selection handlebars for the Popover.osd above
3169
cursor-handle {
3170
border-radius: 100px;
3171
background-color: $accent_bg_color;
3172
background-image: none;
3173
&.top:dir(ltr), &.bottom:dir(rtl) {
3175
padding-left: 6px;
3176
border-top-right-radius: 0;
3177
}
3178
&.bottom:dir(ltr), &.top:dir(rtl) {
3180
padding-right: 6px;
3181
border-top-left-radius: 0;
3182
}
3183
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3185
-GtkWidget-text-handle-width: 24;
3186
-GtkWidget-text-handle-height: 30;
3187
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3189
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3190
url('#{$_url}@2.png'));
3191
}
3192
}
3193
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3195
button.circular { // FIXME: aggregate to buttons
3197
border-radius: 100px;
3198
-gtk-outline-radius: 100px;
3199
label { padding: 0; }
3201
}
3202
// shortcut window keys
3204
.keycap {
3205
min-width: 28px - 8px * 2;
3206
min-height: 28px - 2px;
3207
margin-top: 2px;
3208
padding-bottom: 2px;
3209
padding-left: 8px;
3210
padding-right: 8px;
3211
border: solid 1px $borders_color;
3213
border-radius: 2px + 1px;
3214
box-shadow: inset 0 -2px $borders_color;
3215
background-color: $base_color;
3216
color: $fg_color;
3217
font-size: smaller;
3218
}
3219
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3221
transition: $material_transition;
3222
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3223
caret-color: $accent_bg_color;
3224
}
3225
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3227
stackswitcher button.circular,
3229
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3230
min-width: $medium_size;
3231
min-height: $medium_size;
3232
padding: 0;
3233
}
3234