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
&:active { // add fallback
1078
background-image: radial-gradient(circle farthest-corner at center,
1079
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1080
transparent 0%),
1081
image(gtkalpha(currentColor, $lower_opacity / 2));
1082
}
1083
}
1084
}
1085
}
1086
headerbar {
1088
// add vertical margins to headerbar entries, buttons and separators to avoid them spanning the whole height
1089
entry,
1090
spinbutton,
1091
// separator,
1092
button {
1093
margin-top: $container_padding;
1094
margin-bottom: $container_padding;
1095
}
1096
}
1097
.titlebar {
1099
border-top-left-radius: 2px;
1100
border-top-right-radius: 2px;
1101
}
1102
headerbar {
1104
separator:first-child + &, // tackles the paned container case
1105
&:first-child {
1106
border-top-left-radius: 2px;
1107
.tiled &,
1109
.maximized & { border-radius: 0; }
1110
}
1111
&:last-child {
1113
border-top-right-radius: 2px;
1114
.tiled &,
1116
.maximized & { border-radius: 0; }
1117
}
1118
}
1119
.titlebar:not(headerbar) {
1121
window.csd > & {
1122
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1123
padding: 0;
1124
background-color: transparent;
1125
background-image: none;
1126
border-style: none;
1127
box-shadow: none;
1128
}
1129
> separator {
1131
background-color: $dark_color;
1132
background-image: image($borders_color);
1133
}
1134
@extend %titlebar;
1136
}
1137
/************
1140
* Pathbars *
1141
************/
1142
.path-bar button {
1143
&.text-button, &.image-button, & {
1144
padding-left: 6px;
1145
padding-right: 6px;
1146
}
1147
&.text-button.image-button, & {
1149
// label:last-child { padding-left: 2px; padding-right: 8px; }
1150
// label:first-child { padding-left: 8px; padding-right: 2px; }
1151
}
1152
image {
1154
padding-left: 4px;
1155
padding-right: 4px;
1156
}
1157
&.slider-button {
1159
padding-left: 0;
1160
padding-right: 0;
1161
}
1162
}
1163
/**************
1166
* Tree Views *
1167
**************/
1168
treeview.view {
1169
-GtkTreeView-grid-line-width: 1;
1170
-GtkTreeView-grid-line-pattern: '';
1171
-GtkTreeView-tree-line-width: 1;
1172
-GtkTreeView-tree-line-pattern: '';
1173
-GtkTreeView-expander-size: 16;
1174
border-left-color: $track_color; // this is actually the tree lines color,
1176
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1177
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1179
&:hover, &:active, &:selected { border-radius: 0; }
1181
&.separator {
1183
min-height: 1px + 2px * 2;
1184
color: $borders_color;
1185
}
1186
&:drop(active) {
1188
border-style: solid none;
1189
border-width: 1px;
1190
border-color: $accent_bg_color;
1191
&.after { border-top-style: none; }
1193
&.before { border-bottom-style: none; }
1195
}
1196
&.expander {
1198
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1199
-gtk-icon-transform: rotate(-90deg);
1200
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1202
&:checked { -gtk-icon-transform: unset; }
1204
color: $secondary_fg_color;
1206
&:hover, &:active { color: $fg_color; }
1208
&:disabled { color: $insensitive_secondary_fg_color; }
1210
&:selected {
1212
color: $secondary_selected_fg_color;
1213
&:hover, &:active { color: $selected_fg_color; }
1215
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1217
}
1218
}
1219
&.progressbar { // progress bar in treeviews
1221
border-style: none none solid;
1222
border-width: $bar_size;
1223
border-color: $selected_bg_color;
1224
background-color: transparent;
1225
background-image: none;
1226
&:selected { border-color: currentColor; }
1228
}
1229
&.trough { // progress bar trough in treeviews
1231
border-style: none none solid;
1232
border-width: $bar_size;
1233
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1234
background-color: transparent;
1235
background-image: none;
1236
&:selected { border-color: $track_color; }
1238
}
1239
header {
1241
button {
1242
@extend row.activatable;
1243
padding: 2px 6px;
1245
border-style: none solid solid none;
1246
border-width: 1px;
1247
border-color: $borders_color;
1248
border-radius: 0;
1249
background-clip: border-box;
1250
&, &:hover, &:active { box-shadow: none; }
1252
&, &:disabled { background-color: $base_color; }
1254
&:last-child { border-right-style: none; }
1256
}
1257
}
1258
button.dnd,
1260
header.button.dnd { // for treeview-like derive widgets
1261
padding: 2px 6px;
1262
border-style: none solid solid;
1263
border-width: 1px;
1264
border-color: $borders_color;
1265
border-radius: 0;
1266
box-shadow: none;
1267
background-color: $base_color;
1268
background-clip: border-box;
1269
color: $selected_bg_color;
1270
}
1271
}
1272
/*********
1275
* Menus *
1276
*********/
1277
menubar,
1278
.menubar {
1279
-GtkWidget-window-dragging: true;
1280
padding: 0;
1281
box-shadow: inset 0 -1px $borders_color;
1282
background-color: $dark_color;
1283
> menuitem {
1285
transition: $material_transition;
1286
min-height: 20px;
1287
padding: 4px 8px;
1288
color: $secondary_fg_color;
1289
&:hover { //Seems like it :hover even with keyboard focus
1291
box-shadow: inset 0 -2px $selected_bg_color;
1292
color: $fg_color;
1293
}
1294
&:disabled { color: $insensitive_secondary_fg_color; }
1296
}
1297
}
1298
menu,
1300
.menu {
1301
margin: 4px 0;
1302
padding: 4px 0;
1303
background-color: $base_color;
1304
border: 1px solid $borders_color; // adds borders in a non composited env
1305
.csd & {
1307
border: none; // axes borders in a composited env
1308
border-radius: 2px;
1309
}
1310
menuitem {
1312
min-height: 20px;
1313
min-width: 40px;
1314
padding: 4px 8px;
1315
font: initial;
1316
text-shadow: none;
1317
&:hover {
1319
// background-color: gtkalpha(currentColor, $lower_opacity / 2);
1320
background-color: $selected_bg_color;
1321
color: $selected_fg_color;
1322
}
1323
&:disabled { color: $insensitive_fg_color; }
1325
// submenu indicators
1327
arrow {
1328
min-height: 16px;
1329
min-width: 16px;
1330
&:dir(ltr) {
1332
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1333
margin-left: 8px;
1334
}
1335
&:dir(rtl) {
1337
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1338
margin-right: 8px;
1339
}
1340
}
1341
}
1342
// overflow arrows
1344
> arrow {
1345
min-height: 16px;
1346
min-width: 16px;
1347
padding: 4px;
1348
border-radius: 0;
1349
background-color: $base_color;
1350
color: $secondary_fg_color;
1351
&.top {
1353
margin-top: -4px;
1354
border-bottom: 1px solid $borders_color;
1355
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1356
}
1357
&.bottom {
1359
margin-bottom: -4px;
1360
border-top: 1px solid $borders_color;
1361
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1362
}
1363
&:hover {
1365
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1366
color: $fg_color;
1367
}
1368
&:disabled {
1370
border-color: transparent;
1371
background-color: transparent;
1372
color: transparent;
1373
// color: $insensitive_secondary_fg_color;
1374
}
1375
}
1376
separator { margin: 4px 0; }
1378
}
1379
menuitem {
1381
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1382
check,
1384
radio {
1385
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1386
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1387
}
1388
}
1389
.csd.popup { border-radius: 2px; }
1391
/***************
1394
* Popovers *
1395
***************/
1396
popover.background {
1397
transition: box-shadow $material_duration $material_timing_function;
1398
padding: 0;
1399
box-shadow: $z-depth-2;
1400
background-color: $secondary_base_color;
1401
&:backdrop { box-shadow: $z-depth-1; }
1403
&, .csd & {
1405
border-style: solid;
1406
border-width: 1px;
1407
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1408
border-radius: 2px + 1px;
1409
}
1410
> list,
1412
> .view,
1413
> toolbar {
1414
border-style: none;
1415
box-shadow: none;
1416
background-color: transparent;
1417
}
1418
&, .csd & {
1420
&.touch-selection,
1421
&.magnifier,
1422
&.osd { @extend %osd; }
1423
}
1424
separator { margin: 4px 0; }
1426
list separator { margin: 0; }
1428
checkbutton,
1430
radiobutton { @extend modelbutton.flat; }
1431
}
1432
/*************
1434
* Notebooks *
1435
*************/
1436
notebook {
1437
> header {
1438
border-width: 1px;
1439
border-color: $borders_color;
1440
background-color: $dark_color;
1441
background-clip: border-box;
1442
&.top {
1444
border-bottom-style: solid;
1445
> tabs {
1446
> tab:not(.reorderable-page) {
1447
margin-bottom: -1px;
1448
&:hover { box-shadow: inset 0 -2px $track_color; }
1450
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1452
}
1453
}
1454
}
1455
&.bottom {
1457
border-top-style: solid;
1458
> tabs {
1459
> tab:not(.reorderable-page) {
1460
margin-top: -1px;
1461
&:hover { box-shadow: inset 0 2px $track_color; }
1463
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1465
}
1466
}
1467
}
1468
&.left {
1470
border-right-style: solid;
1471
> tabs {
1472
> tab:not(.reorderable-page) {
1473
margin-right: -1px;
1474
&:hover { box-shadow: inset -2px 0 $track_color; }
1476
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1478
}
1479
}
1480
}
1481
&.right {
1483
border-left-style: solid;
1484
> tabs {
1485
> tab:not(.reorderable-page) {
1486
margin-left: -1px;
1487
&:hover { box-shadow: inset 2px 0 $track_color; }
1489
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1491
}
1492
}
1493
}
1494
&.top > tabs > arrow {
1496
@extend %notebook_vert_arrows;
1497
border-top-style: none;
1499
}
1500
&.bottom > tabs > arrow {
1502
@extend %notebook_vert_arrows;
1503
border-bottom-style: none;
1505
}
1506
@at-root %notebook_vert_arrows {
1508
padding-left: 4px;
1509
padding-right: 4px;
1510
&.down {
1512
margin-left: -8px;
1513
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1514
}
1515
&.up {
1517
margin-right: -8px;
1518
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1519
}
1520
}
1521
&.left > tabs > arrow {
1523
@extend %notebook_horz_arrows;
1524
border-left-style: none;
1526
}
1527
&.right > tabs > arrow {
1529
@extend %notebook_horz_arrows;
1530
border-right-style: none;
1532
}
1533
@at-root %notebook_horz_arrows {
1535
padding-top: 4px;
1536
padding-bottom: 4px;
1537
&.down {
1539
margin-top: -8px;
1540
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1541
}
1542
&.up {
1544
margin-bottom: -8px;
1545
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1546
}
1547
}
1548
> tabs > arrow {
1550
@extend %button_basic.flat;
1551
min-height: 16px;
1553
min-width: 16px;
1554
border-radius: 0;
1555
}
1556
tab {
1558
transition: $material_transition;
1559
min-height: 24px;
1560
min-width: 24px;
1561
padding: 6px 12px;
1562
outline-offset: -6px;
1564
border-width: 1px; // for reorderable tabs
1566
border-color: transparent; //
1567
color: $secondary_fg_color;
1569
font-weight: 500;
1570
&:hover {
1572
color: $fg_color;
1573
&.reorderable-page {
1575
border-color: $borders_color;
1576
background-color: $bg_color;
1577
}
1578
}
1579
&:disabled { color: $insensitive_secondary_fg_color; }
1581
&:checked {
1583
color: $fg_color;
1584
&:disabled { color: $insensitive_fg_color; }
1586
&:not(.reorderable-page) { animation: tab_ripple_effect $material_duration * 2 ease-in-out; }
1588
&.reorderable-page {
1590
border-color: $borders_color;
1591
background-color: $light_color;
1592
}
1593
}
1594
// colors the button like the label, overridden otherwise
1596
button.flat {
1597
// FIXME: generalize .small-button?
1598
min-width: $small_size;
1599
min-height: $small_size;
1600
padding: 0;
1601
@extend %button_basic.image-button;
1603
&:last-child {
1605
margin-left: 6px;
1606
margin-right: -6px;
1607
}
1608
&:first-child {
1610
margin-left: -6px;
1611
margin-right: 6px;
1612
}
1613
}
1614
}
1615
&.top,
1617
&.bottom {
1618
tabs {
1619
padding-left: 8px;
1620
padding-right: 8px;
1621
&:not(:only-child) {
1623
&:first-child { margin-left: 0; }
1624
&:last-child { margin-right: 0; }
1625
}
1626
tab {
1628
&.reorderable-page {
1629
margin: 0 -1px;
1630
border-style: none solid;
1631
}
1632
}
1633
}
1634
}
1635
&.left,
1637
&.right {
1638
tabs {
1639
padding-top: 8px;
1640
padding-bottom: 8px;
1641
&:not(:only-child) {
1643
&:first-child { margin-top: 0; }
1644
&:last-child { margin-bottom: 0; }
1645
}
1646
tab {
1648
&.reorderable-page {
1649
margin: -1px 0;
1650
border-style: solid none;
1651
}
1652
}
1653
}
1654
}
1655
}
1656
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1658
background-color: $base_color;
1659
entry,
1661
spinbutton:not(.vertical) { @extend %entry.flat; }
1662
revealer entry,
1664
revealer spinbutton:not(.vertical) { @extend %entry; }
1665
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1667
}
1668
}
1669
/**************
1672
* Scrollbars *
1673
**************/
1674
scrollbar {
1675
$_slider_min_length: 24px;
1676
// disable steppers
1678
@at-root * {
1679
-GtkScrollbar-has-backward-stepper: false;
1680
-GtkScrollbar-has-forward-stepper: false;
1681
}
1682
transition: $material_transition;
1684
background-color: $base_color;
1685
background-clip: $extra_background_clip;
1686
// scrollbar border
1688
&.top { border-bottom: 1px solid $borders_color; }
1689
&.bottom { border-top: 1px solid $borders_color; }
1690
&.left { border-right: 1px solid $borders_color; }
1691
&.right { border-left: 1px solid $borders_color; }
1692
// slider
1694
slider {
1695
transition: $material_transition, margin 0, border-width 0;
1696
min-width: 8px;
1697
min-height: 8px;
1698
border: 4px solid transparent;
1699
border-radius: 100px;
1700
background-clip: padding-box;
1701
background-color: $tertiary_fg_color;
1702
&:hover { background-color: $secondary_fg_color; }
1704
&:active { background-color: $fg_color; }
1706
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1708
}
1709
&.fine-tune {
1711
slider {
1712
transition: $material_transition, margin 0, border-width 0, min-width 0, min-height 0;
1713
min-width: 4px;
1714
min-height: 4px;
1715
}
1716
&.horizontal slider { margin: 2px 0; }
1718
&.vertical slider { margin: 0 2px; }
1720
}
1721
&.overlay-indicator {
1723
&:not(.dragging):not(.hovering) {
1724
border-color: transparent;
1725
background-color: transparent;
1726
slider {
1728
min-width: 4px;
1729
min-height: 4px;
1730
margin: 2px;
1731
border: 2px solid scale-alpha($base_color, $lower_opacity);
1732
}
1733
button {
1735
min-width: 4px;
1736
min-height: 4px;
1737
margin: 2px;
1738
border: 2px solid scale-alpha($base_color, $lower_opacity);
1739
border-radius: 100px;
1740
background-color: $tertiary_fg_color;
1741
background-clip: padding-box;
1742
-gtk-icon-source: none;
1743
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1745
}
1746
&.horizontal {
1748
slider { min-width: $_slider_min_length; }
1749
button { min-width: 8px; }
1751
}
1752
&.vertical {
1754
slider { min-height: $_slider_min_length; }
1755
button { min-height: 8px; }
1757
}
1758
}
1759
&.dragging,
1761
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1762
}
1763
&.horizontal slider { min-width: $_slider_min_length; }
1765
&.vertical slider { min-height: $_slider_min_length; }
1767
// button styling
1769
button {
1770
@extend %button_basic.flat;
1771
min-width: 16px;
1772
min-height: 16px;
1773
padding: 0;
1774
border-radius: 0;
1775
}
1776
// button icons
1778
&.vertical {
1779
button {
1780
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1781
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1783
}
1784
}
1785
&.horizontal {
1787
button {
1788
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1789
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1791
}
1792
}
1793
}
1794
/**********
1797
* Switch *
1798
**********/
1799
switch {
1800
transition: $material_transition;
1801
margin: $container_padding 0;
1802
border: 4px solid transparent;
1803
border-radius: 100px;
1804
background-color: $track_color;
1805
background-clip: padding-box;
1806
font-size: 0;
1807
&:disabled { color: $insensitive_fg_color; }
1809
&:checked {
1811
background-color: scale-alpha($accent_bg_color, 0.5);
1812
&:disabled {
1814
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1815
color: $insensitive_fg_color;
1816
}
1817
}
1818
slider {
1820
@include entry(normal);
1821
transition: $material_transition, margin 0;
1823
min-width: $small_size;
1824
min-height: $small_size;
1825
margin: -4px 0 -4px -4px;
1826
-gtk-outline-radius: 100px;
1827
border-radius: 100px;
1828
background-image: -gtk-gradient(radial,
1829
center center, 0,
1830
center center, 0.5,
1831
to(transparent),
1832
to(transparent));
1833
}
1834
&:hover slider { @include entry(focus); }
1836
&:disabled slider { @include entry(insensitive); }
1838
&:checked slider {
1840
transition: $material_transition, margin 0, background-image 0;
1841
animation: needs_attention $material_duration $material_timing_function forwards;
1842
margin: -4px -4px -4px 0;
1843
// background-color: $accent_bg_color;
1844
color: $selected_fg_color;
1845
}
1846
&:checked:disabled slider { animation: none; }
1848
row:selected & {
1850
}
1851
}
1852
/*************************
1855
* Check and Radio items *
1856
*************************/
1857
// draw regular check and radio items using our PNG assets
1858
// all assets are rendered from assets.svg. never add pngs directly
1859
//selection-mode
1861
@each $s,$as in ('','-selectionmode'),
1862
(':active', '-active-selectionmode'),
1863
(':disabled', '-insensitive-selectionmode'),
1864
(':checked', '-checked-selectionmode'),
1865
(':checked:active', '-checked-active-selectionmode'),
1866
(':disabled:checked', '-checked-insensitive-selectionmode') {
1867
.view.content-view.check#{$s}:not(list) {
1868
-gtk-icon-shadow: $z-depth-1;
1869
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
1870
url("assets/checkbox#{$as}@2.png"));
1871
margin: 8px;
1872
background-color: transparent;
1873
&:hover, &:active { -gtk-icon-shadow: $z-depth-2; }
1875
&:disabled { -gtk-icon-shadow: none; }
1877
}
1878
}
1879
checkbutton.text-button, radiobutton.text-button {
1881
// this is for a nice focus on check and radios text
1882
padding: 2px 0;
1883
outline-offset: 0;
1884
label:not(:only-child) {
1886
&:first-child { margin-left: 4px; }
1887
&:last-child { margin-right: 4px; }
1889
}
1890
}
1891
check,
1893
radio {
1894
min-height: 24px;
1895
min-width: 24px;
1896
-gtk-icon-source: none;
1897
margin: -12px -8px;
1899
padding: 12px;
1900
outline-offset: 4px;
1901
// border-radius: 100%;
1902
@extend %button_basic.flat;
1904
@extend %button_basic.image-button;
1906
color: gtkalpha(currentColor, $enabled_opacity);
1908
&:hover, &:active { color: currentColor; }
1910
&:checked, &:checked:disabled { background-color: transparent; }
1912
&:checked, &:indeterminate { color: $accent_bg_color; }
1914
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1916
&:only-child { margin: -12px; }
1918
.osd & {
1920
}
1921
menu menuitem & {
1923
transition: none;
1924
margin: -16px -16px; // this is a workaround for a menu check/radio size allocation issue
1925
&:not(:checked):not(:indeterminate):hover { color: gtkalpha(currentColor, $enabled_opacity); }
1927
&, &:hover, &:disabled {
1929
background-image: none;
1930
// color: inherit;
1931
// animation: none;
1932
}
1933
}
1934
}
1935
%check,
1937
check {
1938
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1939
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1940
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1942
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1943
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1945
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1946
}
1947
%radio,
1949
radio {
1950
border-image: -gtk-gradient(radial,
1951
center center, 0,
1952
center center, 0.001,
1953
to($accent_bg_color),
1954
to(transparent))
1955
24 / 24px;
1956
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1957
-gtk-recolor(url("assets/radio-unchecked-symbolic.png")));
1958
&:checked {
1960
border-image: -gtk-gradient(radial,
1961
center center, 0,
1962
center center, (10 / 48 / 2),
1963
to($accent_bg_color),
1964
to(transparent))
1965
24 / 24px;
1966
}
1967
&:checked:disabled {
1969
border-image: -gtk-gradient(radial,
1970
center center, 0,
1971
center center, (10 / 48 / 2),
1972
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1973
to(transparent))
1974
24 / 24px;
1975
}
1976
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1978
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1979
&:indeterminate:checked {
1981
border-image: -gtk-gradient(radial,
1982
center center, 0,
1983
center center, 0.001,
1984
to($accent_bg_color),
1985
to(transparent))
1986
24 / 24px;
1987
}
1988
}
1989
// let's animate things
1991
@keyframes check_check {
1992
from { -gtk-icon-transform: rotate(90deg); }
1993
to { -gtk-icon-transform: unset; }
1994
}
1995
@keyframes check_radio {
1997
from { -gtk-icon-transform: scale(0); }
1998
to { -gtk-icon-transform: unset; }
1999
}
2000
@keyframes check_indeterminate {
2002
from { -gtk-icon-transform: unset; }
2003
50% { -gtk-icon-transform: scale(0, 1); }
2004
to { -gtk-icon-transform: unset; }
2005
}
2006
check:not(:indeterminate):checked { animation: check_check $material_duration $material_timing_function; }
2008
check:not(:indeterminate):checked:active { animation: check_check $material_duration $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
2010
// radio:not(:indeterminate):checked { animation: check_radio $material_duration $material_timing_function; }
2012
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_duration $material_timing_function; }
2014
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; }
2016
// no animations in menus
2018
menu menuitem {
2019
check:not(:indeterminate):checked,
2020
radio:not(:indeterminate):checked,
2021
check:indeterminate:checked,
2022
radio:indeterminate:checked { animation: none; }
2023
}
2024
treeview.view check,
2026
treeview.view radio {
2027
// margin: -12px;
2028
// padding: 12px;
2029
padding: 0;
2030
&:checked:hover, &:selected:checked:hover { background-image: none; }
2032
& {
2034
color: $secondary_fg_color;
2035
&:hover, &:active { color: $fg_color; }
2037
&:disabled { color: $insensitive_secondary_fg_color; }
2039
&:checked, &:indeterminate { color: $accent_bg_color; }
2041
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2043
}
2044
&:selected {
2046
color: $secondary_selected_fg_color;
2047
&:hover, &:active { color: $selected_fg_color; }
2049
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2051
&:checked, &:indeterminate { color: $accent_bg_color; }
2053
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2055
}
2056
}
2057
treeview.view radio:checked {
2059
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2060
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2061
border-image: none;
2062
}
2063
/************
2066
* GtkScale *
2067
************/
2068
scale {
2069
// sizing
2070
$_marks_lenght: 8px;
2072
$_marks_distance: 8px;
2073
min-height: 12px;
2075
min-width: 12px;
2076
padding: 12px;
2077
* { transition: $material_transition; }
2079
// the slider is inside the trough, so to have make it bigger there's a negative margin
2081
slider {
2082
min-height: $small_size;
2083
min-width: $small_size;
2084
margin: -10px;
2085
}
2086
// the backing bit
2088
trough {
2089
outline-offset: 2px;
2090
background-color: $track_color;
2091
&:disabled { color: $insensitive_fg_color; }
2093
}
2094
// the colored part of the backing bit
2096
highlight {
2097
background-color: $accent_bg_color;
2098
&:disabled { background-color: transparent; }
2100
}
2101
// this is another differently styled part of the backing bit, the most relevant use case is for example
2103
// in media player to indicate how much video stream as been cached
2104
fill {
2105
background-color: $track_color;
2106
&:disabled { background-color: transparent; }
2108
}
2109
slider {
2111
// border-radius: 100%;
2112
// background-color: $accent_bg_color;
2113
background-repeat: no-repeat;
2114
background-position: center;
2115
@each $s,$as in ('',''),
2117
(':disabled','-insensitive') {
2118
&#{$s} {
2119
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2120
background-image: -gtk-scaled(url('#{$_url}.png'),
2121
url('#{$_url}@2.png'));
2122
}
2123
}
2124
background-size: calc(100% - 8px);
2126
&:hover { background-size: calc(100% - 4px); }
2128
&:active { background-size: calc(100% - 0px); }
2130
}
2131
// click-and-hold the slider to activate
2133
&.fine-tune {
2134
// to make the slider shrink in fine-tune mode
2135
slider { background-size: calc(100% - 12px); }
2136
}
2137
value { color: gtkalpha(currentColor, $hint_opacity); }
2139
marks {
2141
color: $track_color;
2142
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2144
(bottom, bottom, top),
2145
(top, left, right),
2146
(bottom, right, left) {
2147
&.#{$marks_class} {
2148
margin-#{$marks_margin}: $_marks_distance;
2149
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2150
}
2151
}
2152
}
2153
&.horizontal {
2155
indicator {
2156
min-height: $_marks_lenght;
2157
min-width: 1px;
2158
}
2159
}
2160
&.vertical {
2162
indicator {
2163
min-height: 1px;
2164
min-width: $_marks_lenght;
2165
}
2166
}
2167
// *WARNING* scale with marks madness following
2169
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2171
$suffix: if($variant == 'light', '', '-dark');
2172
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2174
('vertical', 'vert') {
2175
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2176
('scale-has-marks-below', ':first-child:not(:only-child)') {
2177
@each $state, $state_infix in ('', ''),
2178
(':disabled', '-insensitive') {
2179
&.#{$dir_class} {
2180
%#{$marks_infix}-#{$dir_infix},
2181
contents#{$nth_child} > trough > slider {
2182
&#{$state} {
2183
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2184
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2186
}
2187
@if $dir_class == 'horizontal' {
2189
min-height: 30px;
2190
min-width: $small_size;
2191
@if $marks_infix == 'scale-has-marks-above' {
2193
margin-top: -16px;
2194
background-position: center calc(100% - 4px);
2196
&:hover { background-position: center calc(100% - 2px); }
2198
&:active { background-position: center calc(100% - 0px); }
2200
}
2201
@if $marks_infix == 'scale-has-marks-below' {
2203
margin-bottom: -16px;
2204
background-position: center calc(4px);
2206
&:hover { background-position: center calc(2px); }
2208
&:active { background-position: center calc(0px); }
2210
}
2211
}
2212
@if $dir_class == 'vertical' {
2214
min-height: $small_size;
2215
min-width: 30px;
2216
@if $marks_infix == 'scale-has-marks-above' {
2218
margin-left: -16px;
2219
background-position: calc(4px) center;
2221
&:hover { background-position: calc(2px) center; }
2223
&:active { background-position: calc(0px) center; }
2225
}
2226
@if $marks_infix == 'scale-has-marks-below' {
2228
margin-right: -16px;
2229
background-position: calc(100% - 4px) center;
2231
&:hover { background-position: calc(100% - 2px) center; }
2233
&:active { background-position: calc(100% - 0px) center; }
2235
}
2236
}
2237
}
2238
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2240
&.fine-tune contents#{$nth_child} > trough > slider {
2241
// bigger negative margins to make the trough grow here as well
2242
@if $dir_class == 'horizontal' {
2244
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2245
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2247
}
2248
@if $dir_class == 'vertical' {
2250
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2251
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2253
}
2254
}
2255
}
2256
}
2257
}
2258
}
2259
&.color {
2261
min-height: 0;
2262
min-width: 0;
2263
&.horizontal {
2265
padding: 0 0 12px 0;
2266
trough {
2268
padding-bottom: $bar_size;
2269
}
2270
slider {
2272
@extend %scale-has-marks-above-horz;
2273
margin-bottom: -10px - $bar_size;
2275
margin-top: 0;
2276
}
2277
}
2278
&.vertical {
2280
&:dir(ltr) {
2281
padding: 0 0 0 12px;
2282
trough {
2284
padding-left: $bar_size;
2285
}
2286
slider {
2288
@extend %scale-has-marks-below-vert;
2289
margin-left: -10px - $bar_size;
2291
margin-right: 0;
2292
}
2293
}
2294
&:dir(rtl) {
2296
padding: 0 12px 0 0;
2297
trough {
2299
padding-right: $bar_size;
2300
}
2301
slider {
2303
@extend %scale-has-marks-above-vert;
2304
margin-right: -10px - $bar_size;
2306
margin-left: 0;
2307
}
2308
}
2309
}
2310
&.fine-tune {
2312
&.horizontal {
2313
slider {
2314
@extend %scale-has-marks-above-horz-fine-tune;
2315
}
2316
}
2317
&.vertical {
2319
&:dir(ltr) {
2320
slider {
2321
@extend %scale-has-marks-below-vert-fine-tune;
2322
}
2323
}
2324
&:dir(rtl) {
2326
slider {
2327
@extend %scale-has-marks-above-vert-fine-tune;
2328
}
2329
}
2330
}
2331
}
2332
}
2333
}
2334
/*****************
2337
* Progress bars *
2338
*****************/
2339
progressbar {
2340
// sizing
2341
&.horizontal {
2342
trough,
2343
progress { min-height: $bar_size; }
2344
}
2345
&.vertical {
2347
trough,
2348
progress { min-width: $bar_size; }
2349
}
2350
// FIXME: insensitive state missing and some other state should be set probably
2352
color: $tertiary_fg_color;
2353
font-size: smaller;
2354
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2356
progress { background-color: $selected_bg_color; }
2358
&.osd { // progressbar.osd used for epiphany page loading progress
2360
// min-width: $bar_size;
2361
// min-height: $bar_size;
2362
// background-color: transparent;
2363
// trough { background-color: transparent; }
2365
progress {
2367
}
2368
}
2369
}
2370
/*************
2373
* Level Bar *
2374
*************/
2375
levelbar {
2376
block {
2377
min-width: $medium_size;
2378
min-height: $bar_size;
2379
}
2380
&.vertical block {
2382
min-width: $bar_size;
2383
min-height: $medium_size;
2384
}
2385
trough {
2387
padding: 2px;
2388
border-radius: 2px;
2389
@include entry(normal);
2391
&:disabled { @include entry(insensitive); }
2393
}
2394
&.horizontal.discrete block { margin: 0 1px; }
2396
&.vertical.discrete block { margin: 1px 0; }
2398
&.horizontal.discrete trough { padding: 2px 1px; }
2400
&.vertical.discrete trough { padding: 1px 2px; }
2402
block {
2404
&.low {
2405
background-color: $warning_color;
2406
}
2407
&.high {
2409
background-color: $selected_bg_color;
2410
}
2411
&.full {
2413
background-color: $success_color;
2414
}
2415
&.empty {
2417
background-color: $track_color;
2418
color: $insensitive_fg_color;
2419
}
2420
}
2421
}
2422
/****************
2425
* Print dialog *
2426
*****************/
2427
printdialog {
2428
paper {
2429
padding: 0;
2430
border: 1px solid $borders_color;
2431
background: $base_color;
2432
color: $fg_color;
2433
}
2434
.dialog-action-box { margin: 12px; }
2436
}
2437
/**********
2440
* Frames *
2441
**********/
2442
frame > border,
2443
.frame {
2444
margin: 0;
2445
padding: 0;
2446
border: 1px solid $borders_color;
2447
border-radius: 0;
2448
box-shadow: none;
2449
&.flat { border-style: none; }
2451
}
2452
actionbar > revealer > box {
2454
padding: $container_padding;
2455
border-top: 1px solid $borders_color;
2456
}
2457
scrolledwindow {
2459
viewport.frame { // avoid double borders when viewport inside scrolled window
2460
border-style: none;
2461
}
2462
// This is used when content is touch-dragged past boundaries.
2464
// draws a box on top of the content, the size changes programmatically.
2465
overshoot {
2466
&.top { @include overshoot(top); }
2467
&.bottom { @include overshoot(bottom); }
2469
&.left { @include overshoot(left); }
2471
&.right { @include overshoot(right); }
2473
}
2474
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2476
undershoot {
2477
&.top { @include undershoot(top); }
2478
&.bottom { @include undershoot(bottom); }
2480
&.left { @include undershoot(left); }
2482
&.right { @include undershoot(right); }
2484
}
2485
junction { // the small square between two scrollbars
2487
border-style: solid none none solid;
2488
border-width: 1px;
2489
border-color: $borders_color;
2490
background-color: $base_color;
2491
&:dir(rtl) { border-style: solid solid none none; }
2493
}
2494
}
2495
//vbox and hbox separators
2497
separator {
2498
min-width: 1px;
2499
min-height: 1px;
2500
background: $borders_color;
2501
}
2502
/*********
2505
* Lists *
2506
*********/
2507
list {
2508
border-color: $borders_color;
2509
background-color: $base_color;
2510
row { padding: 2px; }
2512
}
2513
row {
2515
transition: $material_transition;
2516
&:hover { transition: none; }
2518
&.activatable {
2520
background-image: radial-gradient(circle farthest-corner at center,
2521
gtkalpha(currentColor, 0) 100%,
2522
transparent 0%),
2523
image(gtkalpha(currentColor, 0));
2524
&:hover {
2526
background-image: radial-gradient(circle farthest-corner at center,
2527
gtkalpha(currentColor, 0) 100%,
2528
transparent 0%),
2529
image(gtkalpha(currentColor, 0.05));
2530
}
2531
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2533
&:active {
2534
transition: $material_transition, background-image 0;
2535
animation: row_ripple_effect $material_duration $material_timing_function forwards;
2536
}
2537
}
2538
&:selected { @extend %selected_items; }
2540
}
2541
/*********************
2544
* App Notifications *
2545
*********************/
2546
.app-notification,
2547
.app-notification.frame {
2548
@extend %osd;
2549
@extend toolbar.osd;
2551
margin: 8px;
2553
border { border: none; }
2555
}
2556
/*************
2559
* Expanders *
2560
*************/
2561
expander {
2562
arrow {
2563
transition: $material_transition;
2564
min-width: 16px;
2565
min-height: 16px;
2566
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2567
-gtk-icon-transform: rotate(-90deg);
2568
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2570
&:checked { -gtk-icon-transform: unset; }
2572
color: $secondary_fg_color;
2574
&:hover, &:active { color: $fg_color; }
2576
&:disabled { color: $insensitive_secondary_fg_color; }
2578
&:selected {
2580
color: $secondary_selected_fg_color;
2581
&:hover, &:active { color: $selected_fg_color; }
2583
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2585
}
2586
}
2587
}
2588
/************
2591
* Calendar *
2592
***********/
2593
calendar {
2594
padding: 1px;
2595
border: 1px solid $borders_color;
2596
color: $fg_color;
2597
&:disabled { color: $insensitive_fg_color; }
2599
&:selected {
2601
@extend %selected_items;
2602
border-radius: 2px + 1px;
2604
}
2605
&.header {
2607
border: none;
2608
border-bottom: 1px solid $borders_color;
2609
border-radius: 0;
2610
}
2611
&.button { @extend %button_basic.flat; }
2613
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2615
&.highlight {
2617
color: gtkalpha(currentColor, $hint_opacity);
2618
font-weight: 500;
2619
}
2620
}
2621
/***********
2624
* Dialogs *
2625
***********/
2626
messagedialog { // Message Dialog styling
2627
&.background { background-color: $light_color; }
2628
.titlebar {
2630
min-height: $small_size;
2631
border-style: none;
2632
// box-shadow: inset 0 1px $highlight_color;
2633
background-color: $light_color;
2634
}
2635
&.csd { // rounded bottom border styling for csd version
2637
&.background {
2638
// bigger radius for better antialiasing
2639
border-bottom-left-radius: 2px;
2640
border-bottom-right-radius: 2px;
2641
}
2642
.dialog-action-area button {
2644
padding: 8px 16px;
2645
border-top: 1px solid $borders_color;
2646
border-radius: 0;
2647
@extend %button_basic.flat;
2649
&:first-child{ border-bottom-left-radius: 2px; }
2651
&:last-child { border-bottom-right-radius: 2px; }
2653
}
2654
}
2655
}
2656
filechooser {
2658
.dialog-action-box { border-top: 1px solid $borders_color; }
2659
#pathbarbox { border-bottom: 1px solid $borders_color; }
2661
}
2662
filechooserbutton:drop(active) {
2664
box-shadow: none;
2665
}
2666
/***********
2669
* Sidebar *
2670
***********/
2671
.sidebar {
2672
border-style: none;
2673
background-color: $secondary_base_color;
2674
@at-root %sidebar_left,
2676
&:dir(ltr),
2677
&.left,
2678
&.left:dir(rtl) {
2679
border-right: 1px solid $borders_color;
2680
border-left-style: none;
2681
}
2682
@at-root %sidebar_right
2684
&:dir(rtl),
2685
&.right {
2686
border-left: 1px solid $borders_color;
2687
border-right-style: none;
2688
}
2689
list { background-color: transparent; }
2691
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2693
}
2694
stacksidebar {
2696
&.sidebar {
2697
&:dir(ltr),
2698
&.left,
2699
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2700
&:dir(rtl),
2702
&.right { list { @extend %sidebar_right; }}
2703
}
2704
row {
2706
padding: 10px 4px;
2707
> label {
2709
padding-left: 6px;
2710
padding-right: 6px;
2711
}
2712
&.needs-attention > label { @extend %needs_attention; }
2714
}
2715
}
2716
/****************
2719
* File chooser *
2720
****************/
2721
placessidebar {
2722
> viewport.frame { border-style: none; }
2723
row {
2725
// Needs overriding of the GtkListBoxRow padding
2726
min-height: 32px;
2727
padding: 0;
2728
// Using margins/padding directly in the SidebarRow
2730
// will make the animation of the new bookmark row jump
2731
> revealer { padding: 0 12px; }
2732
&:selected { color: $selected_fg_color; }
2734
&:disabled { color: $insensitive_fg_color; }
2736
image.sidebar-icon {
2738
opacity: $hint_opacity; // dim the device icons
2739
&:dir(ltr) { padding-right: 8px; }
2741
&:dir(rtl) { padding-left: 8px; }
2742
}
2743
label.sidebar-label {
2745
&:dir(ltr) { padding-right: 2px; }
2746
&:dir(rtl) { padding-left: 2px; }
2747
}
2748
@at-root button.sidebar-button {
2750
@extend %button_basic.flat;
2751
min-height: $small_size;
2753
min-width: $small_size;
2754
margin-top: 0;
2755
margin-bottom: 0;
2756
padding: 0;
2757
border-radius: 100%;
2758
-gtk-outline-radius: 100%;
2759
row:selected & { @extend %button_selected.flat; }
2761
}
2762
&.sidebar-placeholder-row {
2764
min-height: 2px;
2765
padding: 0 8px;
2766
background-image: image($accent_bg_color);
2767
background-clip: content-box;
2768
}
2769
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2771
&:drop(active):not(:disabled) {
2773
box-shadow: inset 0 0 0 2px $accent_bg_color;
2774
&:selected {
2776
// background-color: $accent_bg_color;
2777
// color: $selected_fg_color;
2778
}
2779
}
2780
}
2781
}
2782
placesview {
2784
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2785
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2787
// this selects the "connect to server" label
2789
> actionbar > revealer > box > label {
2790
padding-left: 8px;
2791
padding-right: 8px;
2792
}
2793
}
2794
/*********
2797
* Paned *
2798
*********/
2799
paned {
2800
> separator {
2801
min-width: 1px;
2802
min-height: 1px;
2803
-gtk-icon-source: none; // defeats the ugly default handle decoration
2804
border-style: none; // just to be sure
2805
background-color: transparent;
2806
// workaround, using background istead of a border since the border will get rendered twice (?)
2807
background-image: image($borders_color);
2808
background-size: 1px 1px;
2809
&.wide {
2811
min-width: 6px;
2812
min-height: 6px;
2813
background-color: $bg_color;
2814
background-image: image($borders_color), image($borders_color);
2815
background-size: 1px 1px, 1px 1px;
2816
}
2817
}
2818
&.horizontal > separator {
2820
background-repeat: repeat-y;
2821
&:dir(ltr) {
2823
margin: 0 -8px 0 0;
2824
padding: 0 8px 0 0;
2825
background-position: left;
2826
}
2827
&:dir(rtl) {
2829
margin: 0 0 0 -8px;
2830
padding: 0 0 0 8px;
2831
background-position: right;
2832
}
2833
&.wide {
2835
margin: 0;
2836
padding: 0;
2837
background-repeat: repeat-y, repeat-y;
2838
background-position: left, right;
2839
}
2840
}
2841
&.vertical > separator {
2843
margin: 0 0 -8px 0;
2844
padding: 0 0 8px 0;
2845
background-repeat: repeat-x;
2846
background-position: top;
2847
&.wide {
2849
margin: 0;
2850
padding: 0;
2851
background-repeat: repeat-x, repeat-x;
2852
background-position: bottom, top;
2853
}
2854
}
2855
}
2856
/**************
2859
* GtkInfoBar *
2860
**************/
2861
infobar { border-style: none; }
2862
.info { background-color: $info_bg_color; }
2864
.question { background-color: $question_bg_color; }
2866
.warning { background-color: $warning_bg_color; }
2868
.error { background-color: $error_bg_color; }
2870
.info,
2872
.question,
2873
.warning,
2874
.error {
2875
color: $selected_fg_color;
2876
button { @extend %button_selected; }
2878
label:selected {
2880
}
2881
*:link { @extend %link_selected; }
2883
}
2884
/************
2887
* Tooltips *
2888
************/
2889
tooltip {
2890
&.background {
2891
// background-color needs to be set this way otherwise it gets drawn twice
2892
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2893
background-color: scale-alpha($base_color, $higher_opacity);
2894
}
2895
// @extend %osd;
2897
// padding: 4px; /* not working */
2899
border-radius: 2px;
2900
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2901
// FIXME: we need a border or tooltips vanish on black background.
2903
decoration { background-color: transparent; }
2904
label {
2906
min-height: 32px - 6px * 2;
2907
padding: 4px 12px - 6px;
2908
}
2909
* { // Yeah this is ugly
2911
padding: 0;
2912
background-color: transparent;
2913
color: inherit;
2914
}
2915
}
2916
/*****************
2919
* Color Chooser *
2920
*****************/
2921
colorswatch {
2922
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2923
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2924
// applied to the overlay box.
2925
// base color corners rounding
2927
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2928
// sports a bigger radius.
2929
// nth-child is needed by the custom color strip.
2930
&.top {
2932
border-top-left-radius: $material_radius + 0.5px;
2933
border-top-right-radius: $material_radius + 0.5px;
2934
overlay {
2936
border-top-left-radius: $material_radius;
2937
border-top-right-radius: $material_radius;
2938
}
2939
}
2940
&.bottom {
2942
border-bottom-left-radius: $material_radius + 0.5px;
2943
border-bottom-right-radius: $material_radius + 0.5px;
2944
overlay {
2946
border-bottom-left-radius: $material_radius;
2947
border-bottom-right-radius: $material_radius;
2948
}
2949
}
2950
&.left,
2952
&:first-child:not(.top) {
2953
border-top-left-radius: $material_radius + 0.5px;
2954
border-bottom-left-radius: $material_radius + 0.5px;
2955
overlay {
2957
border-top-left-radius: $material_radius;
2958
border-bottom-left-radius: $material_radius;
2959
}
2960
}
2961
&.right,
2963
&:last-child:not(.bottom) {
2964
border-top-right-radius: $material_radius + 0.5px;
2965
border-bottom-right-radius: $material_radius + 0.5px;
2966
overlay {
2968
border-top-right-radius: $material_radius;
2969
border-bottom-right-radius: $material_radius;
2970
}
2971
}
2972
&.dark overlay { color: white; }
2974
&.light overlay { color: scale-alpha(black, 0.8); }
2976
&.dark { color: white; } // for focus ring
2978
&.light { color: scale-alpha(black, 0.8); } // for focus ring
2980
&:drop(active) {
2982
box-shadow: none;
2983
&.light overlay {
2985
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
2986
}
2987
&.dark overlay {
2989
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
2990
}
2991
}
2992
overlay {
2994
transition: $material_transition;
2995
box-shadow: $z-depth-1;
2996
&:hover { box-shadow: $z-depth-2; }
2998
}
2999
&#add-color-button {
3001
border-radius: $material_radius $material_radius 0 0;
3002
color: white; // for focus ring
3003
&:only-child { border-radius: $material_radius; }
3005
overlay {
3007
background-image: linear-gradient(to right,
3008
$error_bg_color 25%,
3009
$warning_bg_color 25%, $warning_bg_color 50%,
3010
$info_bg_color 50%, $info_bg_color 75%,
3011
$question_bg_color 75%);
3012
color: white;
3013
}
3014
}
3015
&:disabled {
3017
opacity: $disabled_opacity;
3018
overlay { box-shadow: none; }
3020
}
3021
row:selected & {
3023
}
3024
&#editor-color-sample {
3026
border-radius: $material_radius + 0.5px;
3027
overlay { border-radius: $material_radius; }
3029
// overlay:hover { box-shadow: $z-depth-1; }
3031
}
3032
}
3033
// colorscale popup
3035
colorchooser .popover.osd {
3036
transition: box-shadow $material_duration $material_timing_function;
3037
border-radius: 2px;
3038
box-shadow: $z-depth-2;
3039
background-color: $base_color;
3040
&:backdrop { box-shadow: $z-depth-1; }
3042
spinbutton:not(.vertical) { @extend %entry.flat; }
3044
}
3045
/********
3048
* Misc *
3049
********/
3050
//content view (grid/list)
3051
.content-view {
3052
background-color: $bg_color;
3053
// &:hover { -gtk-icon-effect: highlight; }
3055
rubberband { @extend rubberband; }
3057
}
3058
.scale-popup {
3060
.osd & { @extend %osd; }
3061
.osd & button.flat { //FIXME: quick hack, redo properly
3063
}
3064
button { // +/- buttons on GtkVolumeButton popup
3066
}
3067
}
3068
/**********************
3071
* Window Decorations *
3072
*********************/
3073
decoration {
3074
transition: box-shadow $material_duration $material_timing_function;
3075
border-radius: 2px 2px 0 0;
3076
box-shadow: $z-depth-4, 0 16px 16px transparent;
3077
// FIXME rationalize shadows
3079
// this is used for the resize cursor area
3081
margin: 8px;
3082
&:backdrop {
3084
// the transparent shadow here is to enforce that the shadow extents don't
3085
// change when we go to backdrop, to prevent jumping windows.
3086
// The biggest shadow should be in the same order then in the active state
3087
// or the jumping will happen during the transition.
3088
box-shadow: $z-depth-2, 0 16px 16px transparent;
3089
}
3090
.fullscreen &,
3092
.tiled & { border-radius: 0; }
3093
.popup & { box-shadow: none; }
3095
// server-side decorations as used by mutter
3097
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3098
.csd.popup & {
3100
border-radius: 2px;
3101
box-shadow: $z-depth-2;
3102
}
3103
tooltip.csd & {
3105
border-radius: 2px;
3106
box-shadow: $z-depth-2;
3107
}
3108
messagedialog.csd & {
3110
border-radius: 2px;
3111
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3112
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3114
}
3115
.solid-csd & {
3117
margin: 4px;
3118
// border: solid 1px $borders_color;
3119
border-radius: 0;
3120
box-shadow: none;
3121
background-color: $bg_color;
3122
}
3123
}
3124
// Window Close button
3126
button.titlebutton {
3127
// @extend %button_basic.flat;
3128
@extend %button_basic.image-button;
3130
.selection-mode & {
3132
}
3133
}
3134
// catch all extend :)
3137
%selected_items {
3139
background-color: $selected_bg_color;
3140
@at-root %nobg_selected_items, & {
3142
color: $selected_fg_color;
3143
&:disabled { color: $insensitive_selected_fg_color; }
3145
}
3146
}
3147
.monospace { font: Monospace; }
3149
/**********************
3152
* Touch Copy & Paste *
3153
*********************/
3154
//touch selection handlebars for the Popover.osd above
3155
cursor-handle {
3156
border-radius: 100px;
3157
background-color: $accent_bg_color;
3158
background-image: none;
3159
&.top:dir(ltr), &.bottom:dir(rtl) {
3161
padding-left: 6px;
3162
border-top-right-radius: 0;
3163
}
3164
&.bottom:dir(ltr), &.top:dir(rtl) {
3166
padding-right: 6px;
3167
border-top-left-radius: 0;
3168
}
3169
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3171
-GtkWidget-text-handle-width: 24;
3172
-GtkWidget-text-handle-height: 30;
3173
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3175
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3176
url('#{$_url}@2.png'));
3177
}
3178
}
3179
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3181
button.circular { // FIXME: aggregate to buttons
3183
border-radius: 100px;
3184
-gtk-outline-radius: 100px;
3185
label { padding: 0; }
3187
}
3188
// shortcut window keys
3190
.keycap {
3191
min-width: 28px - 8px * 2;
3192
min-height: 28px - 2px;
3193
margin-top: 2px;
3194
padding-bottom: 2px;
3195
padding-left: 8px;
3196
padding-right: 8px;
3197
border: solid 1px $borders_color;
3199
border-radius: 2px + 1px;
3200
box-shadow: inset 0 -2px $borders_color;
3201
background-color: $base_color;
3202
color: $fg_color;
3203
font-size: smaller;
3204
}
3205
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3207
transition: $material_transition;
3208
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3209
caret-color: $accent_bg_color;
3210
}
3211
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3213
stackswitcher button.circular,
3215
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3216
min-width: $medium_size;
3217
min-height: $medium_size;
3218
padding: 0;
3219
}
3220