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_faster: 0.2s;
13
$material_slower: 0.3s;
14
$material_ease: cubic-bezier(0.4, 0.0, 0.2, 1);
15
$material_ease_out: cubic-bezier(0.0, 0.0, 0.2, 1);
16
$material_ease_in: cubic-bezier(0.4, 0.0, 1, 1);
17
// FIXME: color's transition is too slow
18
$material_transition: all $material_slower $material_ease_out, color 0;
19
$shadow_transition: box-shadow $material_faster $material_ease_out;
20
* {
22
padding: 0;
23
background-clip: padding-box;
24
-GtkToolButton-icon-spacing: 4;
26
-GtkTextView-error-underline-color: $error_color;
27
// The size for scrollbars. The slider is 2px smaller, but we keep it
29
// up so that the whole area is sensitive to button presses for the
30
// slider. The stepper button is larger in both directions, the slider
31
// only in the width
32
-GtkScrolledWindow-scrollbar-spacing: 0;
34
-GtkToolItemGroup-expander-size: 11;
36
-GtkWidget-text-handle-width: 24;
38
-GtkWidget-text-handle-height: 24;
39
-GtkDialog-button-spacing: 4;
41
-GtkDialog-action-area-border: 0;
42
// We use the outline properties to signal the focus properties
44
// to the adwaita engine: using real CSS properties is faster,
45
// and we don't use any outlines for now.
46
outline-style: solid;
48
outline-width: 2px;
49
outline-color: $track_color;
50
outline-offset: -4px;
51
-gtk-outline-radius: 2px;
52
-gtk-secondary-caret-color: $selected_bg_color;
54
}
55
/***************
58
* Base States *
59
***************/
60
.background {
61
background-color: $bg_color;
62
color: $fg_color;
63
}
64
/*
66
These wildcard seems unavoidable, need to investigate.
67
Wildcards are bad and troublesome, use them with care,
68
or better, just don't.
69
Everytime a wildcard is used a kitten dies, painfully.
70
*/
71
*:disabled { -gtk-icon-effect: dim; }
73
.gtkstyle-fallback {
75
background-color: $bg_color;
76
color: $fg_color;
77
&:hover {
79
background-color: darken($bg_color, 5%);
80
color: $fg_color;
81
}
82
&:active {
84
background-color: darken($bg_color, 10%);
85
color: $fg_color;
86
}
87
&:disabled {
89
background-color: $bg_color;
90
color: $insensitive_fg_color;
91
}
92
&:selected {
94
background-color: $selected_bg_color;
95
color: $selected_fg_color;
96
}
97
}
98
.view,
100
%view {
101
@extend row.activatable;
102
background-color: $base_color;
104
color: $fg_color;
105
&:hover, &:active, &:selected { border-radius: 2px; }
107
&:disabled {
109
// background-color: $secondary_base_color;
110
color: $insensitive_fg_color;
111
}
112
&:selected { @extend %selected_items; }
114
}
115
.view,
117
textview {
118
text {
119
// @extend %view;
120
background-color: $base_color;
122
color: $fg_color;
123
&:disabled {
125
// background-color: $secondary_base_color;
126
color: $insensitive_fg_color;
127
}
128
selection { @extend %selected_items; }
130
}
131
}
132
textview border {
134
background-color: $secondary_base_color;
135
color: $tertiary_fg_color;
136
}
137
iconview { @extend .view; }
139
.rubberband,
141
rubberband {
142
border: 1px solid $secondary_selected_bg_color;
143
background-color: scale-alpha($secondary_selected_bg_color, $lower_opacity);
144
}
145
flowbox {
147
rubberband { @extend rubberband; }
148
flowboxchild {
150
outline-offset: -2px;
151
padding: 4px;
152
border-radius: 2px;
153
&:selected { @extend %selected_items; }
155
}
156
}
157
label {
159
caret-color: currentColor; // this shouldn't be needed.
160
&.separator {
162
@extend .dim-label;
163
color: $fg_color;
165
}
166
row:selected &,
168
&:selected { @extend %nobg_selected_items; }
169
selection {
171
background-color: $selected_bg_color;
172
color: $selected_fg_color;
173
}
174
&:disabled {
176
color: $insensitive_fg_color;
177
selection { @extend %selected_items:disabled; }
179
}
180
}
181
.dim-label { opacity: $hint_opacity; }
183
assistant {
185
.sidebar {
186
padding: 4px 0;
187
// background-color: $base_color;
188
// border-top: 1px solid $borders_color;
189
}
190
// &.csd .sidebar { border-top-style: none; }
192
.sidebar label {
194
min-height: $medium_size;
195
padding: 0 12px;
196
color: $tertiary_fg_color;
197
font-weight: 500;
198
&.highlight { color: $fg_color; }
200
}
201
}
202
%osd, .osd { opacity: $higher_opacity; }
204
/*********************
207
* Spinner Animation *
208
*********************/
209
@keyframes spin {
210
to { -gtk-icon-transform: rotate(1turn); }
211
}
212
@keyframes spin_colors {
214
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
215
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
216
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
217
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
218
}
219
spinner {
221
background: none;
222
opacity: 0; // non spinning spinner makes no sense
223
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
224
&:checked {
226
opacity: 1;
227
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
228
&:disabled { opacity: $disabled_opacity; }
230
}
231
}
232
/****************
235
* Text Entries *
236
****************/
237
%entry,
238
entry {
239
%entry_basic, & {
240
min-height: $medium_size;
241
padding: 0 8px;
242
border-radius: 2px;
243
@include entry(normal);
245
&:focus { @include entry(focus); }
247
&:disabled { @include entry(insensitive); }
249
&.flat {
251
border-radius: 0;
252
@include entry(flat-normal);
254
&:focus { @include entry(flat-focus); }
256
&:disabled { @include entry(flat-insensitive); }
258
}
259
image { // icons inside the entry
261
color: gtkalpha(currentColor, $enabled_opacity);
262
&:hover, &:active { color: currentColor; }
264
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
266
&.left { padding-left: 2px; padding-right: 6px; }
268
&.right { padding-left: 6px; padding-right: 2px; }
270
}
271
undershoot {
273
&.left { @include undershoot(left); }
274
&.right { @include undershoot(right); }
276
}
277
selection { @extend %selected_items; }
279
// entry error and warning style
281
@each $e_type, $e_color in (error, $error_color),
282
(warning, $warning_color) {
283
&.#{$e_type} {
284
@include entry(normal, $e_color);
285
&:focus { @include entry(focus, $e_color); }
287
&:disabled { @include entry(insensitive, $e_color); }
289
&.flat {
291
@include entry(flat-normal, $e_color);
292
&:focus { @include entry(flat-focus, $e_color); }
294
&:disabled { @include entry(flat-insensitive, $e_color); }
296
}
297
}
298
}
299
&:drop(active) {
301
// box-shadow: inset 0 0 0 2px $accent_bg_color;
302
}
303
.osd & {
305
}
306
}
307
progress {
309
margin: 2px -6px;
310
border-style: none none solid;
311
border-width: 2px;
312
border-color: $selected_bg_color;
313
// border-radius: 0;
314
// box-shadow: none;
315
background-color: transparent;
316
// background-image: none;
317
}
318
// linked entries
320
.linked:not(.vertical) > &:not(.flat) { @extend %linked; }
321
// Vertically linked entries
323
.linked.vertical > &:not(.flat) { @extend %linked_vertical; }
324
}
325
treeview entry {
327
&.flat, & {
328
min-height: 0;
329
padding: 2px;
330
border-radius: 0;
331
background-color: $base_color;
332
&, &:focus {
334
border-image: none;
335
box-shadow: none;
336
}
337
}
338
}
339
/***********
342
* Buttons *
343
***********/
344
// stuff for .needs-attention
345
@keyframes needs_attention {
346
from {
347
background-image: -gtk-gradient(radial,
348
center center, 0,
349
center center, 0.001,
350
to($accent_bg_color),
351
to(transparent));
352
}
353
to {
355
background-image: -gtk-gradient(radial,
356
center center, 0,
357
center center, 0.5,
358
to($accent_bg_color),
359
to(transparent));
360
}
361
}
362
%button,
364
button {
365
@at-root %button_basic, & {
366
min-height: 24px;
367
min-width: 16px;
368
padding: 6px 10px;
369
border-radius: 2px;
370
font-weight: 500;
371
@include button(normal);
373
&:hover { @include button(hover); }
375
&:active { @include button(active); }
377
&:disabled { @include button(insensitive); }
379
&:checked { @include button(checked); }
381
&:checked:disabled { @include button(checked-insensitive); }
383
&.flat {
385
@include button(flat-normal);
386
&:hover { @include button(flat-hover); }
388
&:active { @include button(flat-active); }
390
&:disabled { @include button(flat-insensitive); }
392
&:checked { @include button(flat-checked); }
394
&:checked:disabled { @include button(flat-checked-insensitive); }
396
}
397
&.image-button {
399
min-width: 24px;
400
padding: 6px;
401
-gtk-outline-radius: 100px;
402
border-radius: 100px;
403
}
404
&.text-button {
406
padding-left: 16px;
407
padding-right: 16px;
408
}
409
&.text-button.image-button {
411
padding-left: 10px;
412
padding-right: 10px;
413
-gtk-outline-radius: 2px;
414
border-radius: 2px;
415
label {
417
&:last-child { padding-left: 2px; padding-right: 6px; }
418
&:first-child { padding-left: 6px; padding-right: 2px; }
419
}
420
}
421
.linked > & { @extend %linked; }
423
.linked.vertical > & { @extend %linked_vertical; }
425
.linked > &.flat,
427
.linked.vertical > &.flat {
428
border-radius: 2px;
429
&.image-button {
431
-gtk-outline-radius: 100px;
432
border-radius: 100px;
433
}
434
&.text-button.image-button {
436
-gtk-outline-radius: 2px;
437
border-radius: 2px;
438
}
439
}
440
&:drop(active) {
442
// box-shadow: inset 0 0 0 2px $accent_bg_color;
443
}
444
}
445
@at-root %button_selected, row:selected & {
447
&:disabled { color: $insensitive_secondary_selected_fg_color; }
448
&.flat {
450
color: $secondary_selected_fg_color;
451
&:hover, &:active { color: $selected_fg_color; }
453
&:disabled { color: $insensitive_secondary_selected_fg_color; }
455
}
456
}
457
// big standalone buttons like in Documents pager
459
&.osd {
460
padding: 12px 16px;
461
&.image-button { padding: 12px; }
463
&:disabled { opacity: 0; }
465
}
466
//overlay / OSD style
468
@at-root %osd_button,
469
.osd & {
470
}
471
// Suggested and Destructive Action buttons
473
@each $b_type, $b_color in (suggested-action, $suggested_color),
474
(destructive-action, $destructive_color) {
475
&.#{$b_type} {
476
background-color: $b_color;
477
color: $selected_fg_color;
478
// @include button(normal, $b_color, white);
480
// &:hover { @include button(hover, $b_color, white); }
482
// &:active, &:checked { @include button(active, $b_color, white); }
484
&:disabled { @include button(insensitive, $b_color, white); }
486
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
488
&.flat {
490
background-color: transparent;
491
color: $b_color;
492
// @include button(flat-normal, $b_color, white);
494
// &:hover { @include button(flat-hover, $b_color, white); }
496
// &:active, &:checked { @include button(flat-active, $b_color, white); }
498
&:disabled { @include button(flat-insensitive, $b_color, white); }
500
}
501
.osd & {
503
}
504
}
505
}
506
.stack-switcher > & {
508
// to position the needs attention dot, padding is added to the button
509
// child, a label needs just lateral padding while an icon needs vertical
510
// padding added too.
511
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
513
> label {
515
padding-left: 6px; // label padding
516
padding-right: 6px; //
517
}
518
> image {
520
padding-left: 6px; // image padding
521
padding-right: 6px; //
522
padding-top: 3px; //
523
padding-bottom: 3px; //
524
}
525
&.text-button {
527
// compensate text-button paddings
528
padding-left: 10px;
529
padding-right: 10px;
530
}
531
&.image-button {
533
// we want image buttons to have a 1:1 aspect ratio, so compensation
534
// of the padding added to the GtkImage is needed
535
padding-left: 4px;
536
padding-right: 4px;
537
}
538
&.needs-attention {
540
> label,
541
> image { @extend %needs_attention; }
542
&:checked {
544
> label,
545
> image {
546
animation: none;
547
background-image: none;
548
}
549
}
550
}
551
}
552
// hide separators
554
separator {
555
min-width: 0;
556
min-height: 0;
557
background: transparent;
558
}
559
// &.font,
561
// &.file { separator { background-color: transparent; }}
562
// &.font { > box > box > label { font-weight: bold; }}
564
// inline-toolbar buttons
566
.inline-toolbar & {
567
@extend %button_basic.flat;
568
&:not(.text-button) { @extend %button_basic.image-button; }
570
}
571
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
573
}
574
%needs_attention {
576
animation: needs_attention $material_slower $material_ease_out forwards;
577
background-repeat: no-repeat;
578
background-position: right 3px;
579
background-size: 6px 6px;
580
&:dir(rtl) { background-position: left 3px; }
582
}
583
// all the following is for the +|- buttons on inline toolbars, that way
585
// should really be deprecated...
586
.inline-toolbar toolbutton > button { // redefining the button look is
587
// needed since those are flat...
588
}
589
// More inline toolbar buttons
591
toolbar.inline-toolbar toolbutton {
592
// > button.flat { @extend %linked_middle; }
593
// &:first-child > button.flat { @extend %linked:first-child; }
595
// &:last-child > button.flat { @extend %linked:last-child; }
597
// &:only-child > button.flat { @extend %linked:only-child; }
599
}
600
%linked_middle {
602
border-radius: 0;
603
}
604
%linked {
606
-gtk-outline-radius: 2px;
607
@extend %linked_middle;
609
&:first-child {
611
border-top-left-radius: 2px;
612
border-bottom-left-radius: 2px;
613
}
614
&:last-child {
616
border-top-right-radius: 2px;
617
border-bottom-right-radius: 2px;
618
}
619
&:only-child {
621
border-radius: 2px;
622
}
623
}
624
%linked_vertical_middle {
626
border-radius: 0;
627
}
628
%linked_vertical{
630
-gtk-outline-radius: 2px;
631
@extend %linked_vertical_middle;
633
&:first-child {
635
border-top-left-radius: 2px;
636
border-top-right-radius: 2px;
637
}
638
&:last-child {
640
border-bottom-left-radius: 2px;
641
border-bottom-right-radius: 2px;
642
}
643
&:only-child {
645
border-radius: 2px;
646
}
647
}
648
/* menu buttons */
650
modelbutton.flat,
651
.menuitem.button.flat {
652
min-height: $menuitem_size;
653
padding-left: 8px;
654
padding-right: 8px;
655
border-radius: 2px;
656
color: inherit;
657
@extend %button_basic.flat;
659
&:selected { @extend %selected_items; }
661
check,
663
radio {
664
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
665
&, &:hover { background-image: none; }
667
&:active { animation: none; }
669
&:last-child { margin-left: -8px; margin-right: -16px; }
671
&:first-child { margin-left: -16px; margin-right: -8px; }
673
}
674
check:not(:indeterminate):checked { @extend %check_checked; }
676
// radio:not(:indeterminate):checked { @extend %radio_checked; }
678
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
680
}
681
modelbutton.flat arrow {
683
background: none;
684
&:hover { background: none; }
686
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
688
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
690
}
691
button.color {
693
min-height: $small_size;
694
min-width: $small_size;
695
padding: $container_padding;
696
colorswatch:only-child {
698
// &, overlay { border-radius: 0; }
699
}
700
}
701
/*********
704
* Links *
705
*********/
706
*:link {
707
&, &:hover, &:active { color: $link_color; }
708
&:visited {
710
&, &:hover, &:active { color: $link_visited_color; }
711
}
712
@at-root %link_selected,
714
&:selected,
715
*:selected & { color: $selected_fg_color; }
716
}
717
button:link,
719
button:visited {
720
@extend *:link;
721
> label { text-decoration-line: underline; }
723
}
724
/*****************
726
* GtkSpinButton *
727
*****************/
728
spinbutton {
729
&:not(.vertical) {
730
// in this horizontal configuration, the whole spinbutton
731
// behaves as the entry, so we extend the entry styling
732
// and nuke the style on the internal entry
733
@extend %entry;
734
padding: 0;
736
%spinbutton_entry,
738
entry {
739
min-width: $large_size - 16px;
740
// reset all the other props since the spinbutton node is styled here
741
margin: 0;
742
border-image: none;
743
border-radius: 0;
744
box-shadow: none;
745
background-color: transparent;
746
}
747
button {
749
min-height: $small_size;
750
min-width: $small_size;
751
// margin: $container_padding;
752
padding: 0;
753
border: solid $container_padding transparent;
754
@extend %button_basic.flat;
756
@extend %button_basic.image-button;
758
&.up { margin-left: -$container_padding / 2; }
760
&.down { margin-right: -$container_padding / 2; }
762
}
763
}
764
// OSD horizontal
766
.osd &:not(.vertical) {
767
button {
768
}
769
}
770
// Vertical
772
&.vertical {
773
// in the vertical configuration, we treat the spinbutton
774
// as a box, and tweak the style of the entry in the middle
775
// so that it's linked
776
// FIXME: this should not be set at all, but otherwise it gets the wrong
778
// color
779
&:disabled { color: $insensitive_fg_color; }
780
&:drop(active) {
782
box-shadow: none;
783
}
784
entry {
786
min-height: $medium_size;
787
min-width: $large_size;
788
padding: 0;
789
}
790
button {
792
min-height: $medium_size;
793
min-width: $large_size;
794
padding: 0;
795
@extend %button_basic.flat;
797
&.up { border-radius: 2px 2px 0 0; }
799
&.down { border-radius: 0 0 2px 2px; }
801
}
802
}
803
// OSD vertical
805
.osd &.vertical button:first-child {
806
}
807
// Misc
809
treeview &:not(.vertical) {
810
min-height: 0;
811
border-style: none;
812
border-radius: 0;
813
entry {
815
min-height: 0;
816
padding: 1px 2px;
817
}
818
}
819
}
820
/**************
823
* ComboBoxes *
824
**************/
825
combobox {
826
arrow {
827
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
828
min-height: 16px;
829
min-width: 16px;
830
}
831
menu,
833
.menu,
834
.context-menu {
835
padding: 2px 0;
836
menuitem {
838
min-height: $medium_size;
839
padding: 0 10px;
840
}
841
}
842
&.linked {
844
button:nth-child(2) {
845
&:dir(ltr) { @extend %linked:last-child; }
846
&:dir(rtl) { @extend %linked:first-child; }
847
}
848
}
849
&:drop(active) { // FIXME: untested
851
box-shadow: none;
852
// button.combo { @extend %button_basic:drop(active); }
854
}
855
}
856
.linked > combobox > box > button.combo {
858
// the combo is a composite widget so the way we do button linking doesn't
859
// work, special case needed. See
860
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
861
&:dir(ltr),
863
&:dir(rtl) { @extend %linked_middle; } // specificity bump
864
}
865
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
867
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
868
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
869
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
871
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
872
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
873
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
874
/************
877
* Toolbars *
878
************/
879
toolbar {
880
-GtkWidget-window-dragging: true;
881
padding: $container_padding / 2;
882
background-color: $bg_color;
883
// on OSD
885
.osd & { background-color: transparent; }
886
// stand-alone OSD toolbars
888
&.osd {
889
transition: $shadow_transition;
890
padding: $container_padding;
891
border-radius: 2px;
892
box-shadow: $z-depth-2;
893
background-color: $base_color;
894
&:backdrop { box-shadow: $z-depth-1; }
896
&.left,
898
&.right,
899
&.top,
900
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
901
button { @extend %button_basic.flat; }
903
}
904
// toolbar separators
906
&.horizontal separator { margin: $container_padding / 2; }
907
&.vertical separator { margin: $container_padding / 2; }
908
&:not(.inline-toolbar):not(.osd) {
910
scale,
911
entry,
912
spinbutton,
913
button { margin: $container_padding / 2; }
914
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
916
}
917
}
918
//searchbar, location-bar & inline-toolbar
920
.inline-toolbar {
921
padding: $container_padding;
922
border-style: solid;
923
border-width: 0 1px 1px;
924
border-color: $borders_color;
925
background-color: $secondary_base_color;
926
}
927
searchbar,
929
.location-bar {
930
padding: $container_padding;
931
border-style: solid;
932
border-width: 0 0 1px;
933
border-color: $borders_color;
934
background-color: $bg_color;
935
background-clip: border-box;
936
}
937
/***************
940
* Header bars *
941
***************/
942
%titlebar,
943
headerbar {
944
transition: background-color $material_faster $material_ease_out, color $material_faster $material_ease_out;
945
min-height: $large_size;
946
padding: 0 $container_padding;
947
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
948
background-color: $headerbar_color;
949
color: $selected_fg_color;
950
&:backdrop {
952
color: $secondary_selected_fg_color;
953
}
954
.title {
956
padding-left: 12px;
957
padding-right: 12px;
958
font-weight: bold;
959
}
960
.subtitle {
962
padding-left: 12px;
963
padding-right: 12px;
964
font-size: smaller;
965
@extend .dim-label;
967
}
968
button:not(.suggested-action):not(.destructive-action) {
970
@extend %button_basic.flat;
971
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
973
currentColor 0%,
974
transparent 0%)
975
0 0 0 / 0 0 0px;
976
color: gtkalpha(currentColor, $enabled_opacity);
977
&:hover, &:active { color: currentColor; }
979
&:disabled {
981
color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity);
982
> label { color: inherit; }
984
}
985
&:checked {
987
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
988
currentColor 100%,
989
transparent 0%)
990
0 0 2 / 0 0 2px;
991
background-color: transparent;
992
color: currentColor;
993
&:disabled {
995
background-color: transparent;
996
color: gtkalpha(currentColor, $disabled_opacity);
997
> label { color: inherit; }
999
}
1000
}
1001
}
1002
button.suggested-action, button.destructive-action {
1004
&:disabled {
1005
color: gtkalpha(currentColor, $disabled_opacity);
1006
> label { color: inherit; }
1008
}
1009
}
1010
&.selection-mode {
1012
transition: background-color 0 $material_slower, color $material_faster $material_ease_out;
1013
animation: header_ripple_effect $material_slower $material_ease_out;
1014
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1015
background-color: $selected_bg_color;
1016
color: $selected_fg_color;
1017
&:backdrop {
1019
color: $secondary_selected_fg_color;
1020
}
1021
.subtitle:link { @extend *:link:selected; }
1023
button:not(.suggested-action):not(.destructive-action) {
1025
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1026
currentColor 0%,
1027
transparent 0%)
1028
0 0 0 / 0 0 0px;
1029
// color: gtkalpha(currentColor, $enabled_opacity);
1030
&, &:hover, &:active { color: currentColor; }
1032
&:disabled {
1034
color: gtkalpha(currentColor, $disabled_opacity);
1035
> label { color: inherit; }
1037
}
1038
&:checked {
1040
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1041
currentColor 100%,
1042
transparent 0%)
1043
0 0 2 / 0 0 2px;
1044
color: currentColor;
1045
&:disabled {
1047
color: gtkalpha(currentColor, $disabled_opacity);
1048
> label { color: inherit; }
1050
}
1051
}
1052
}
1053
.selection-menu {
1055
padding-left: 16px;
1056
padding-right: 16px;
1057
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1059
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1061
}
1062
}
1063
.fullscreen &,
1065
.tiled &,
1066
.maximized & {
1067
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1068
box-shadow: $z-depth-1;
1069
}
1070
&.default-decoration {
1072
min-height: $small_size;
1073
padding: $container_padding;
1074
border-width: 0;
1075
button.titlebutton {
1077
min-height: $small_size;
1078
min-width: $small_size;
1079
margin: 0;
1080
padding: 0;
1081
&:active { // add fallback
1083
background-image: radial-gradient(circle farthest-corner at center,
1084
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1085
transparent 0%),
1086
image(gtkalpha(currentColor, $lower_opacity / 2));
1087
}
1088
}
1089
}
1090
.solid-csd & {
1092
&:dir(rtl), &:dir(ltr) { // specificity bump
1093
margin-left: -1px;
1094
margin-right: -1px;
1095
margin-top: -1px;
1096
border-radius: 0;
1097
box-shadow: none;
1098
}
1099
}
1100
}
1101
headerbar {
1103
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1104
entry,
1105
spinbutton,
1106
// separator,
1107
button {
1108
margin-top: $container_padding;
1109
margin-bottom: $container_padding;
1110
}
1111
switch {
1113
margin-top: $container_padding * 2;
1114
margin-bottom: $container_padding * 2;
1115
}
1116
}
1117
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1119
border-top-left-radius: 2px;
1120
border-top-right-radius: 2px;
1121
}
1122
headerbar {
1124
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1125
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1126
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1128
}
1129
.titlebar:not(headerbar) {
1131
window.csd > & {
1132
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1133
padding: 0;
1134
background-color: transparent;
1135
background-image: none;
1136
border-style: none;
1137
box-shadow: none;
1138
}
1139
> separator {
1141
background-color: $headerbar_color;
1142
background-image: image($borders_color);
1143
}
1144
@extend %titlebar;
1146
}
1147
/************
1150
* Pathbars *
1151
************/
1152
.path-bar button {
1153
&.text-button, &.image-button, & {
1154
padding-left: 6px;
1155
padding-right: 6px;
1156
}
1157
&.text-button.image-button, & {
1159
// label:last-child { padding-left: 2px; padding-right: 8px; }
1160
// label:first-child { padding-left: 8px; padding-right: 2px; }
1161
}
1162
image {
1164
padding-left: 4px;
1165
padding-right: 4px;
1166
}
1167
&.slider-button {
1169
padding-left: 0;
1170
padding-right: 0;
1171
}
1172
}
1173
/**************
1176
* Tree Views *
1177
**************/
1178
treeview.view {
1179
@at-root * {
1180
-GtkTreeView-horizontal-separator: 4;
1181
-GtkTreeView-grid-line-width: 1;
1182
-GtkTreeView-grid-line-pattern: '';
1183
-GtkTreeView-tree-line-width: 1;
1184
-GtkTreeView-tree-line-pattern: '';
1185
-GtkTreeView-expander-size: 16;
1186
}
1187
border-left-color: $track_color; // this is actually the tree lines color,
1189
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1190
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1192
&:hover, &:active, &:selected { border-radius: 0; }
1194
&.separator {
1196
min-height: 1px + 2px * 2;
1197
color: $borders_color;
1198
}
1199
&:drop(active) {
1201
border-style: solid none;
1202
border-width: 1px;
1203
border-color: $accent_bg_color;
1204
&.after { border-top-style: none; }
1206
&.before { border-bottom-style: none; }
1208
}
1209
&.expander {
1211
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1212
-gtk-icon-transform: rotate(-90deg);
1213
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1215
&:checked { -gtk-icon-transform: unset; }
1217
color: $secondary_fg_color;
1219
&:hover, &:active { color: $fg_color; }
1221
&:disabled { color: $insensitive_secondary_fg_color; }
1223
&:selected {
1225
color: $secondary_selected_fg_color;
1226
&:hover, &:active { color: $selected_fg_color; }
1228
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1230
}
1231
}
1232
&.progressbar { // progress bar in treeviews
1234
border-style: none none solid;
1235
border-width: $bar_size;
1236
border-color: $selected_bg_color;
1237
background-color: transparent;
1238
background-image: none;
1239
&:selected { border-color: currentColor; }
1241
}
1242
&.trough { // progress bar trough in treeviews
1244
border-style: none none solid;
1245
border-width: $bar_size;
1246
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1247
background-color: transparent;
1248
background-image: none;
1249
&:selected { border-color: $track_color; }
1251
}
1252
header {
1254
button {
1255
@extend row.activatable;
1256
padding: 2px 6px;
1258
border-style: none solid solid none;
1259
border-width: 1px;
1260
border-color: $borders_color;
1261
border-radius: 0;
1262
background-clip: border-box;
1263
&, &:hover, &:active { box-shadow: none; }
1265
&, &:disabled { background-color: $base_color; }
1267
&:last-child { border-right-style: none; }
1269
}
1270
}
1271
button.dnd,
1273
header.button.dnd { // for treeview-like derive widgets
1274
padding: 2px 6px;
1275
border-style: none solid solid;
1276
border-width: 1px;
1277
border-color: $borders_color;
1278
border-radius: 0;
1279
box-shadow: none;
1280
background-color: $base_color;
1281
background-clip: border-box;
1282
color: $selected_bg_color;
1283
}
1284
acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
1286
}
1287
/*********
1290
* Menus *
1291
*********/
1292
menubar,
1293
.menubar {
1294
-GtkWidget-window-dragging: true;
1295
padding: 0;
1296
// box-shadow: inset 0 -1px $borders_color;
1297
background-color: $headerbar_color;
1298
> menuitem {
1300
transition: background-color $material_faster $material_ease_out;
1301
min-height: 20px;
1302
padding: 4px 8px;
1303
color: $secondary_selected_fg_color;
1304
&:hover { //Seems like it :hover even with keyboard focus
1306
transition: none;
1307
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1308
color: $selected_fg_color;
1309
}
1310
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1312
}
1313
}
1314
menu,
1316
.menu,
1317
.context-menu {
1318
margin: 4px 0;
1319
padding: 4px 0;
1320
background-color: $base_color;
1321
border: 1px solid $borders_color; // adds borders in a non composited env
1322
.csd & {
1324
border: none; // axes borders in a composited env
1325
border-radius: 2px;
1326
}
1327
menuitem {
1329
transition: background-color $material_faster $material_ease_out;
1330
min-height: 20px;
1331
min-width: 40px;
1332
padding: 4px 8px;
1333
font: initial;
1334
text-shadow: none;
1335
&:hover {
1337
transition: none;
1338
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1339
}
1340
&:disabled { color: $insensitive_fg_color; }
1342
// submenu indicators
1344
arrow {
1345
min-height: 16px;
1346
min-width: 16px;
1347
&:dir(ltr) {
1349
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1350
margin-left: 8px;
1351
}
1352
&:dir(rtl) {
1354
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1355
margin-right: 8px;
1356
}
1357
}
1358
// avoids labels color being overridden, see
1360
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1361
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1362
}
1363
// overflow arrows
1365
> arrow {
1366
min-height: 16px;
1367
min-width: 16px;
1368
padding: 4px;
1369
border-radius: 0;
1370
background-color: $base_color;
1371
color: $secondary_fg_color;
1372
&.top {
1374
margin-top: -4px;
1375
border-bottom: 1px solid $borders_color;
1376
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1377
}
1378
&.bottom {
1380
margin-bottom: -4px;
1381
border-top: 1px solid $borders_color;
1382
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1383
}
1384
&:hover {
1386
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1387
color: $fg_color;
1388
}
1389
&:disabled {
1391
border-color: transparent;
1392
background-color: transparent;
1393
color: transparent;
1394
// color: $insensitive_secondary_fg_color;
1395
}
1396
}
1397
separator { margin: 4px 0; }
1399
}
1400
menuitem {
1402
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1403
check,
1405
radio {
1406
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1407
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1408
}
1409
}
1410
.csd.popup { border-radius: 2px; }
1412
/***************
1415
* Popovers *
1416
***************/
1417
popover.background {
1418
transition: $shadow_transition;
1419
padding: 0;
1420
box-shadow: $z-depth-2;
1421
background-color: $light_color;
1422
&:backdrop { box-shadow: $z-depth-1; }
1424
&, .csd & {
1426
border-style: solid;
1427
border-width: 1px;
1428
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1429
border-radius: 2px + 1px;
1430
}
1431
> list,
1433
> .view,
1434
> toolbar {
1435
border-style: none;
1436
box-shadow: none;
1437
background-color: transparent;
1438
}
1439
&, .csd & {
1441
&.touch-selection,
1442
&.magnifier,
1443
&.osd { @extend %osd; }
1444
}
1445
separator { margin: 4px 0; }
1447
list separator { margin: 0; }
1449
}
1450
/*************
1452
* Notebooks *
1453
*************/
1454
notebook {
1455
> header {
1456
border-width: 1px;
1457
border-color: $borders_color;
1458
background-color: $bg_color;
1459
background-clip: border-box;
1460
&.top {
1462
border-bottom-style: solid;
1463
> tabs {
1464
margin-bottom: -1px;
1465
> tab {
1466
&:hover { box-shadow: inset 0 -2px $track_color; }
1468
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1470
}
1471
}
1472
}
1473
&.bottom {
1475
border-top-style: solid;
1476
> tabs {
1477
margin-top: -1px;
1478
> tab {
1479
&:hover { box-shadow: inset 0 2px $track_color; }
1481
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1483
}
1484
}
1485
}
1486
&.left {
1488
border-right-style: solid;
1489
> tabs {
1490
margin-right: -1px;
1491
> tab {
1492
&:hover { box-shadow: inset -2px 0 $track_color; }
1494
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1496
}
1497
}
1498
}
1499
&.right {
1501
border-left-style: solid;
1502
> tabs {
1503
margin-left: -1px;
1504
> tab {
1505
&:hover { box-shadow: inset 2px 0 $track_color; }
1507
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1509
}
1510
}
1511
}
1512
&.top > tabs > arrow {
1514
@extend %notebook_vert_arrows;
1515
border-top-style: none;
1517
}
1518
&.bottom > tabs > arrow {
1520
@extend %notebook_vert_arrows;
1521
border-bottom-style: none;
1523
}
1524
@at-root %notebook_vert_arrows {
1526
padding-left: 4px;
1527
padding-right: 4px;
1528
&.down {
1530
margin-left: -8px;
1531
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1532
}
1533
&.up {
1535
margin-right: -8px;
1536
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1537
}
1538
}
1539
&.left > tabs > arrow {
1541
@extend %notebook_horz_arrows;
1542
border-left-style: none;
1544
}
1545
&.right > tabs > arrow {
1547
@extend %notebook_horz_arrows;
1548
border-right-style: none;
1550
}
1551
@at-root %notebook_horz_arrows {
1553
padding-top: 4px;
1554
padding-bottom: 4px;
1555
&.down {
1557
margin-top: -8px;
1558
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1559
}
1560
&.up {
1562
margin-bottom: -8px;
1563
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1564
}
1565
}
1566
> tabs > arrow {
1568
@extend %button_basic.flat;
1569
min-height: 16px;
1571
min-width: 16px;
1572
border-radius: 0;
1573
}
1574
tab {
1576
transition: $material_transition;
1577
min-height: 24px;
1578
min-width: 24px;
1579
padding: 6px 12px;
1580
outline-offset: -6px;
1582
border-width: 1px; // for reorderable tabs
1584
border-color: transparent; //
1585
color: $secondary_fg_color;
1587
font-weight: 500;
1588
&:hover {
1590
color: $fg_color;
1591
&.reorderable-page {
1593
border-color: $borders_color;
1594
background-color: $secondary_base_color;
1595
}
1596
}
1597
&:disabled { color: $insensitive_secondary_fg_color; }
1599
&:checked {
1601
animation: tab_ripple_effect $material_slower * 3 $material_ease_out;
1602
color: $fg_color;
1603
&:disabled { color: $insensitive_fg_color; }
1605
&.reorderable-page {
1607
border-color: $borders_color;
1608
background-color: $base_color;
1609
}
1610
}
1611
// colors the button like the label, overridden otherwise
1613
button.flat {
1614
// FIXME: generalize .small-button?
1615
min-width: $small_size;
1616
min-height: $small_size;
1617
padding: 0;
1618
@extend %button_basic.image-button;
1620
&:last-child {
1622
margin-left: 6px;
1623
margin-right: -6px;
1624
}
1625
&:first-child {
1627
margin-left: -6px;
1628
margin-right: 6px;
1629
}
1630
}
1631
}
1632
&.top,
1634
&.bottom {
1635
tabs {
1636
padding-left: 8px;
1637
padding-right: 8px;
1638
&:not(:only-child) {
1640
&:first-child { margin-left: 0; }
1641
&:last-child { margin-right: 0; }
1642
}
1643
tab {
1645
&.reorderable-page {
1646
margin: 0 -1px;
1647
border-style: none solid;
1648
}
1649
}
1650
}
1651
}
1652
&.left,
1654
&.right {
1655
tabs {
1656
padding-top: 8px;
1657
padding-bottom: 8px;
1658
&:not(:only-child) {
1660
&:first-child { margin-top: 0; }
1661
&:last-child { margin-bottom: 0; }
1662
}
1663
tab {
1665
&.reorderable-page {
1666
margin: -1px 0;
1667
border-style: solid none;
1668
}
1669
}
1670
}
1671
}
1672
}
1673
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1675
background-color: $base_color;
1676
entry,
1678
spinbutton:not(.vertical) { @extend %entry.flat; }
1679
revealer entry,
1681
revealer spinbutton:not(.vertical) { @extend %entry; }
1682
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1684
}
1685
}
1686
/**************
1689
* Scrollbars *
1690
**************/
1691
scrollbar {
1692
$_slider_min_length: 24px;
1693
// disable steppers
1695
@at-root * {
1696
-GtkScrollbar-has-backward-stepper: false;
1697
-GtkScrollbar-has-forward-stepper: false;
1698
}
1699
transition: $material_transition;
1701
background-color: $base_color;
1702
background-clip: $extra_background_clip;
1703
// scrollbar border
1705
&.top { border-bottom: 1px solid $borders_color; }
1706
&.bottom { border-top: 1px solid $borders_color; }
1707
&.left { border-right: 1px solid $borders_color; }
1708
&.right { border-left: 1px solid $borders_color; }
1709
// slider
1711
slider {
1712
transition: all $material_faster $material_ease_out, margin 0, border-width 0;
1713
min-width: 8px;
1714
min-height: 8px;
1715
border: 4px solid transparent;
1716
border-radius: 100px;
1717
background-clip: padding-box;
1718
background-color: $tertiary_fg_color;
1719
&:hover { background-color: $secondary_fg_color; }
1721
&:active { background-color: $fg_color; }
1723
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1725
}
1726
&.fine-tune {
1728
slider {
1729
transition: all $material_faster $material_ease_out, margin 0, border-width 0, min-width 0, min-height 0;
1730
min-width: 4px;
1731
min-height: 4px;
1732
}
1733
&.horizontal slider { margin: 2px 0; }
1735
&.vertical slider { margin: 0 2px; }
1737
}
1738
&.overlay-indicator {
1740
&:not(.dragging):not(.hovering) {
1741
border-color: transparent;
1742
background-color: transparent;
1743
slider {
1745
min-width: 4px;
1746
min-height: 4px;
1747
margin: 2px;
1748
border: 2px solid scale-alpha($base_color, $lower_opacity);
1749
}
1750
button {
1752
min-width: 4px;
1753
min-height: 4px;
1754
margin: 2px;
1755
border: 2px solid scale-alpha($base_color, $lower_opacity);
1756
border-radius: 100px;
1757
background-color: $tertiary_fg_color;
1758
background-clip: padding-box;
1759
-gtk-icon-source: none;
1760
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1762
}
1763
&.horizontal {
1765
slider { min-width: $_slider_min_length; }
1766
button { min-width: 8px; }
1768
}
1769
&.vertical {
1771
slider { min-height: $_slider_min_length; }
1772
button { min-height: 8px; }
1774
}
1775
}
1776
&.dragging,
1778
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1779
}
1780
&.horizontal slider { min-width: $_slider_min_length; }
1782
&.vertical slider { min-height: $_slider_min_length; }
1784
// button styling
1786
button {
1787
@extend %button_basic.flat;
1788
min-width: 16px;
1789
min-height: 16px;
1790
padding: 0;
1791
border-radius: 0;
1792
}
1793
// button icons
1795
&.vertical {
1796
button {
1797
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1798
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1800
}
1801
}
1802
&.horizontal {
1804
button {
1805
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1806
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1808
}
1809
}
1810
}
1811
/**********
1814
* Switch *
1815
**********/
1816
switch {
1817
transition: $material_transition;
1818
margin: $container_padding 0;
1819
border: 4px solid transparent;
1820
border-radius: 100px;
1821
background-color: $track_color;
1822
background-clip: padding-box;
1823
font-size: 0;
1824
&:disabled { color: $insensitive_fg_color; }
1826
&:checked {
1828
background-color: scale-alpha($accent_bg_color, 0.5);
1829
&:disabled {
1831
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1832
color: $insensitive_fg_color;
1833
}
1834
}
1835
slider {
1837
@include entry(normal);
1838
transition: $material_transition, margin 0;
1840
min-width: $small_size;
1841
min-height: $small_size;
1842
margin: -4px 0 -4px -4px;
1843
-gtk-outline-radius: 100px;
1844
border-radius: 100px;
1845
}
1846
&:hover slider { @include entry(focus); }
1848
&:disabled slider { @include entry(insensitive); }
1850
&:checked slider {
1852
transition: $material_transition, margin 0, background-image 0, background-color 0 $material_slower;
1853
animation: needs_attention $material_slower $material_ease_out;
1854
margin: -4px -4px -4px 0;
1855
background-color: $accent_bg_color;
1856
color: $selected_fg_color;
1857
}
1858
&:checked:disabled slider { animation: none; }
1860
row:selected & {
1862
}
1863
}
1864
/*************************
1867
* Check and Radio items *
1868
*************************/
1869
// draw regular check and radio items using our PNG assets
1870
// all assets are rendered from assets.svg. never add pngs directly
1871
//selection-mode
1873
@each $s,$as in ('','-selectionmode'),
1874
(':hover', '-hover-selectionmode'),
1875
(':checked', '-checked-selectionmode'),
1876
(':checked:hover', '-checked-hover-selectionmode') {
1877
.view.content-view.check#{$s}:not(list) {
1878
-gtk-icon-shadow: $z-depth-1;
1879
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1880
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1881
margin: 8px;
1882
background-color: transparent;
1883
}
1884
}
1885
checkbutton.text-button,
1887
radiobutton.text-button {
1888
// this is for a nice focus on check and radios text
1889
padding: 2px;
1890
outline-offset: 0;
1891
label:not(:only-child) { margin: 0 4px; }
1893
}
1894
check,
1896
radio {
1897
min-height: 24px;
1898
min-width: 24px;
1899
margin: -12px;
1900
padding: 12px;
1901
@extend %button_basic.flat;
1903
@extend %button_basic.image-button;
1905
&:checked, &:checked:disabled { background-color: transparent; }
1907
&:checked, &:indeterminate { color: $accent_bg_color; }
1909
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1911
// &:only-child { margin: -12px; }
1913
row &:not(:checked):not(:indeterminate) {
1915
color: gtkalpha(currentColor, $enabled_opacity);
1916
&:hover, &:active { color: currentColor; }
1918
}
1919
menu menuitem & {
1921
transition: none;
1922
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1923
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1925
&, &:hover, &:disabled {
1927
background-image: none;
1928
// color: inherit;
1929
// animation: none;
1930
}
1931
}
1932
}
1933
%check,
1935
check {
1936
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1937
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1938
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1940
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1941
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1943
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1944
}
1945
%radio,
1947
radio {
1948
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1949
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1950
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1952
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1953
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1955
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1956
border-image: -gtk-gradient(radial,
1958
center center, 0,
1959
center center, 0.001,
1960
to($accent_bg_color),
1961
to(transparent))
1962
24 / 24px;
1963
&:checked {
1965
border-image: -gtk-gradient(radial,
1966
center center, 0,
1967
center center, (10 / 48 / 2),
1968
to($accent_bg_color),
1969
to(transparent))
1970
24 / 24px;
1971
}
1972
&:checked:disabled {
1974
border-image: -gtk-gradient(radial,
1975
center center, 0,
1976
center center, (10 / 48 / 2),
1977
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1978
to(transparent))
1979
24 / 24px;
1980
}
1981
&:indeterminate:checked {
1983
border-image: -gtk-gradient(radial,
1984
center center, 0,
1985
center center, 0.001,
1986
to($accent_bg_color),
1987
to(transparent))
1988
24 / 24px;
1989
}
1990
}
1991
// let's animate things
1993
@keyframes check_check {
1994
from { -gtk-icon-transform: rotate(90deg); }
1995
to { -gtk-icon-transform: unset; }
1996
}
1997
@keyframes check_radio { // FIXME: cannot animate border-image
1999
from {
2000
border-image: -gtk-gradient(radial,
2001
center center, 0,
2002
center center, 0.001,
2003
to($accent_bg_color),
2004
to(transparent))
2005
24 / 24px;
2006
}
2007
to {
2009
border-image: -gtk-gradient(radial,
2010
center center, 0,
2011
center center, (10 / 48 / 2),
2012
to($accent_bg_color),
2013
to(transparent))
2014
24 / 24px;
2015
}
2016
}
2017
@keyframes check_indeterminate {
2019
from { -gtk-icon-transform: unset; }
2020
50% { -gtk-icon-transform: scale(0, 1); }
2021
to { -gtk-icon-transform: unset; }
2022
}
2023
%check_checked,
2025
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
2026
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2028
// %radio_checked,
2030
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
2031
// radio:not(:indeterminate):checked:active { animation: check_radio $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2033
%indeterminate_checked,
2035
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
2036
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2038
// no animations in menus
2040
menu menuitem {
2041
check:not(:indeterminate):checked,
2042
radio:not(:indeterminate):checked,
2043
check:indeterminate:checked,
2044
radio:indeterminate:checked { animation: none; }
2045
}
2046
treeview.view check,
2048
treeview.view radio {
2049
padding: 0;
2050
&:checked:hover, &:selected:checked:hover { background-image: none; }
2052
& {
2054
color: $secondary_fg_color;
2055
&:hover, &:active { color: $fg_color; }
2057
&:disabled { color: $insensitive_secondary_fg_color; }
2059
&:checked, &:indeterminate { color: $accent_bg_color; }
2061
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2063
}
2064
&:selected {
2066
color: $secondary_selected_fg_color;
2067
&:hover, &:active { color: $selected_fg_color; }
2069
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2071
&:checked, &:indeterminate { color: $accent_bg_color; }
2073
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2075
}
2076
}
2077
treeview.view radio:checked {
2079
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2080
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2081
border-image: none;
2082
}
2083
/************
2086
* GtkScale *
2087
************/
2088
scale {
2089
// sizing
2090
$_marks_lenght: 8px;
2091
$_marks_distance: 8px;
2092
min-height: 12px;
2094
min-width: 12px;
2095
padding: 12px;
2096
* { transition: $material_transition; }
2098
// the slider is inside the trough, so to have make it bigger there's a negative margin
2100
slider {
2101
min-height: $small_size;
2102
min-width: $small_size;
2103
margin: -10px;
2104
}
2105
// the backing bit
2107
trough {
2108
outline-offset: 2px;
2109
background-color: $track_color;
2110
&:disabled { color: $insensitive_fg_color; }
2112
}
2113
// the colored part of the backing bit
2115
highlight {
2116
background-color: $accent_bg_color;
2117
&:disabled { background-color: transparent; }
2119
}
2120
// this is another differently styled part of the backing bit, the most relevant use case is for example
2122
// in media player to indicate how much video stream as been cached
2123
fill {
2124
background-color: $track_color;
2125
&:disabled { background-color: transparent; }
2127
}
2128
slider {
2130
transition: all $material_faster $material_ease;
2131
// border-radius: 100%;
2132
// background-color: $accent_bg_color;
2133
background-repeat: no-repeat;
2134
background-position: center;
2135
@each $s,$as in ('',''),
2137
(':disabled','-insensitive') {
2138
&#{$s} {
2139
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2140
background-image: -gtk-scaled(url('#{$_url}.png'),
2141
url('#{$_url}@2.png'));
2142
}
2143
}
2144
background-size: calc(100% - 8px);
2146
&:hover { background-size: calc(100% - 4px); }
2148
&:active { background-size: calc(100% - 0px); }
2150
}
2151
// click-and-hold the slider to activate
2153
&.fine-tune {
2154
// to make the slider shrink in fine-tune mode
2155
slider { background-size: calc(100% - 12px); }
2156
}
2157
value { color: gtkalpha(currentColor, $hint_opacity); }
2159
marks {
2161
color: $track_color;
2162
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2164
(bottom, bottom, top),
2165
(top, left, right),
2166
(bottom, right, left) {
2167
&.#{$marks_class} {
2168
margin-#{$marks_margin}: $_marks_distance;
2169
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2170
}
2171
}
2172
}
2173
&.horizontal {
2175
indicator {
2176
min-height: $_marks_lenght;
2177
min-width: 1px;
2178
}
2179
}
2180
&.vertical {
2182
indicator {
2183
min-height: 1px;
2184
min-width: $_marks_lenght;
2185
}
2186
}
2187
// *WARNING* scale with marks madness following
2189
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2191
$suffix: if($variant == 'light', '', '-dark');
2192
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2194
('vertical', 'vert') {
2195
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2196
('scale-has-marks-below', ':first-child:not(:only-child)') {
2197
@each $state, $state_infix in ('', ''),
2198
(':disabled', '-insensitive') {
2199
&.#{$dir_class} {
2200
%#{$marks_infix}-#{$dir_infix},
2201
contents#{$nth_child} > trough > slider {
2202
&#{$state} {
2203
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2204
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2206
}
2207
@if $dir_class == 'horizontal' {
2209
min-height: 30px;
2210
min-width: $small_size;
2211
@if $marks_infix == 'scale-has-marks-above' {
2213
margin-top: -16px;
2214
background-position: center calc(100% - 4px);
2216
&:hover { background-position: center calc(100% - 2px); }
2218
&:active { background-position: center calc(100% - 0px); }
2220
}
2221
@if $marks_infix == 'scale-has-marks-below' {
2223
margin-bottom: -16px;
2224
background-position: center calc(4px);
2226
&:hover { background-position: center calc(2px); }
2228
&:active { background-position: center calc(0px); }
2230
}
2231
}
2232
@if $dir_class == 'vertical' {
2234
min-height: $small_size;
2235
min-width: 30px;
2236
@if $marks_infix == 'scale-has-marks-above' {
2238
margin-left: -16px;
2239
background-position: calc(4px) center;
2241
&:hover { background-position: calc(2px) center; }
2243
&:active { background-position: calc(0px) center; }
2245
}
2246
@if $marks_infix == 'scale-has-marks-below' {
2248
margin-right: -16px;
2249
background-position: calc(100% - 4px) center;
2251
&:hover { background-position: calc(100% - 2px) center; }
2253
&:active { background-position: calc(100% - 0px) center; }
2255
}
2256
}
2257
}
2258
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2260
&.fine-tune contents#{$nth_child} > trough > slider {
2261
// bigger negative margins to make the trough grow here as well
2262
@if $dir_class == 'horizontal' {
2264
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2265
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2267
}
2268
@if $dir_class == 'vertical' {
2270
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2271
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2273
}
2274
}
2275
}
2276
}
2277
}
2278
}
2279
&.color {
2281
min-height: 0;
2282
min-width: 0;
2283
&.horizontal {
2285
padding: 0 0 12px 0;
2286
trough {
2288
padding-bottom: $bar_size;
2289
}
2290
slider {
2292
@extend %scale-has-marks-above-horz;
2293
margin-bottom: -10px - $bar_size;
2295
margin-top: 0;
2296
}
2297
}
2298
&.vertical {
2300
&:dir(ltr) {
2301
padding: 0 0 0 12px;
2302
trough {
2304
padding-left: $bar_size;
2305
}
2306
slider {
2308
@extend %scale-has-marks-below-vert;
2309
margin-left: -10px - $bar_size;
2311
margin-right: 0;
2312
}
2313
}
2314
&:dir(rtl) {
2316
padding: 0 12px 0 0;
2317
trough {
2319
padding-right: $bar_size;
2320
}
2321
slider {
2323
@extend %scale-has-marks-above-vert;
2324
margin-right: -10px - $bar_size;
2326
margin-left: 0;
2327
}
2328
}
2329
}
2330
&.fine-tune {
2332
&.horizontal {
2333
slider {
2334
@extend %scale-has-marks-above-horz-fine-tune;
2335
}
2336
}
2337
&.vertical {
2339
&:dir(ltr) {
2340
slider {
2341
@extend %scale-has-marks-below-vert-fine-tune;
2342
}
2343
}
2344
&:dir(rtl) {
2346
slider {
2347
@extend %scale-has-marks-above-vert-fine-tune;
2348
}
2349
}
2350
}
2351
}
2352
}
2353
}
2354
/*****************
2357
* Progress bars *
2358
*****************/
2359
progressbar {
2360
// sizing
2361
&.horizontal {
2362
trough,
2363
progress { min-height: $bar_size; }
2364
}
2365
&.vertical {
2367
trough,
2368
progress { min-width: $bar_size; }
2369
}
2370
// FIXME: insensitive state missing and some other state should be set probably
2372
color: $tertiary_fg_color;
2373
font-size: smaller;
2374
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2376
progress { background-color: $selected_bg_color; }
2378
&.osd { // progressbar.osd used for epiphany page loading progress
2380
// min-width: $bar_size;
2381
// min-height: $bar_size;
2382
// background-color: transparent;
2383
// trough { background-color: transparent; }
2385
progress {
2387
}
2388
}
2389
}
2390
/*************
2393
* Level Bar *
2394
*************/
2395
levelbar {
2396
block {
2397
min-width: $medium_size;
2398
min-height: $bar_size;
2399
}
2400
&.vertical block {
2402
min-width: $bar_size;
2403
min-height: $medium_size;
2404
}
2405
trough {
2407
padding: 2px;
2408
border-radius: 2px;
2409
@include entry(normal);
2411
&:disabled { @include entry(insensitive); }
2413
}
2414
&.horizontal.discrete block { margin: 0 1px; }
2416
&.vertical.discrete block { margin: 1px 0; }
2418
&.horizontal.discrete trough { padding: 2px 1px; }
2420
&.vertical.discrete trough { padding: 1px 2px; }
2422
block {
2424
&.low {
2425
background-color: $warning_color;
2426
}
2427
&.high,
2429
&:not(.empty) {
2430
background-color: $selected_bg_color;
2431
}
2432
&.full {
2434
background-color: $success_color;
2435
}
2436
&.empty {
2438
background-color: $track_color;
2439
color: $insensitive_fg_color;
2440
}
2441
}
2442
}
2443
/****************
2446
* Print dialog *
2447
*****************/
2448
printdialog {
2449
paper {
2450
padding: 0;
2451
border: 1px solid $borders_color;
2452
background: $base_color;
2453
color: $fg_color;
2454
}
2455
.dialog-action-box { margin: 12px; }
2457
}
2458
/**********
2461
* Frames *
2462
**********/
2463
frame > border,
2464
.frame {
2465
margin: 0;
2466
padding: 0;
2467
border: 1px solid $borders_color;
2468
border-radius: 0;
2469
box-shadow: none;
2470
&.flat { border-style: none; }
2472
}
2473
actionbar > revealer > box {
2475
padding: $container_padding;
2476
border-top: 1px solid $borders_color;
2477
}
2478
scrolledwindow {
2480
viewport.frame { // avoid double borders when viewport inside scrolled window
2481
border-style: none;
2482
}
2483
// This is used when content is touch-dragged past boundaries.
2485
// draws a box on top of the content, the size changes programmatically.
2486
overshoot {
2487
&.top { @include overshoot(top); }
2488
&.bottom { @include overshoot(bottom); }
2490
&.left { @include overshoot(left); }
2492
&.right { @include overshoot(right); }
2494
}
2495
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2497
undershoot {
2498
&.top { @include undershoot(top); }
2499
&.bottom { @include undershoot(bottom); }
2501
&.left { @include undershoot(left); }
2503
&.right { @include undershoot(right); }
2505
}
2506
junction { // the small square between two scrollbars
2508
border-style: solid none none solid;
2509
border-width: 1px;
2510
border-color: $borders_color;
2511
background-color: $base_color;
2512
&:dir(rtl) { border-style: solid solid none none; }
2514
}
2515
}
2516
//vbox and hbox separators
2518
separator {
2519
min-width: 1px;
2520
min-height: 1px;
2521
background: $borders_color;
2522
}
2523
/*********
2526
* Lists *
2527
*********/
2528
list {
2529
border-color: $borders_color;
2530
background-color: $base_color;
2531
row { padding: 2px; }
2533
}
2534
row {
2536
transition: $material_transition;
2537
&:hover { transition: none; }
2539
&.activatable {
2541
background-image: radial-gradient(circle farthest-corner at center,
2542
gtkalpha(currentColor, 0) 100%,
2543
transparent 0%),
2544
image(gtkalpha(currentColor, 0));
2545
&:hover {
2547
background-image: radial-gradient(circle farthest-corner at center,
2548
gtkalpha(currentColor, 0) 100%,
2549
transparent 0%),
2550
image(gtkalpha(currentColor, 0.05));
2551
}
2552
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2554
&:active {
2555
transition: $material_transition, background-image 0;
2556
animation: row_ripple_effect $material_slower $material_ease_out forwards;
2557
}
2558
}
2559
&:selected { @extend %selected_items; }
2561
}
2562
/*********************
2565
* App Notifications *
2566
*********************/
2567
.app-notification,
2568
.app-notification.frame {
2569
@extend %osd;
2570
@extend toolbar.osd;
2572
margin: 8px;
2574
border { border: none; }
2576
}
2577
/*************
2580
* Expanders *
2581
*************/
2582
expander {
2583
arrow {
2584
transition: all $material_faster $material_ease;
2585
min-width: 16px;
2586
min-height: 16px;
2587
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2588
-gtk-icon-transform: rotate(-90deg);
2589
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2591
&:checked { -gtk-icon-transform: unset; }
2593
color: $secondary_fg_color;
2595
&:hover, &:active { color: $fg_color; }
2597
&:disabled { color: $insensitive_secondary_fg_color; }
2599
&:selected {
2601
color: $secondary_selected_fg_color;
2602
&:hover, &:active { color: $selected_fg_color; }
2604
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2606
}
2607
}
2608
}
2609
/************
2612
* Calendar *
2613
***********/
2614
calendar {
2615
padding: 1px;
2616
border: 1px solid $borders_color;
2617
color: $fg_color;
2618
&:disabled { color: $insensitive_fg_color; }
2620
&:selected {
2622
@extend %selected_items;
2623
border-radius: 2px + 1px;
2625
}
2626
&.header {
2628
border-style: none none solid;
2629
border-radius: 0;
2630
}
2631
&.button { @extend %button_basic.flat; }
2633
&.highlight {
2635
color: gtkalpha(currentColor, $hint_opacity);
2636
font-weight: 500;
2637
}
2638
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2640
}
2641
/***********
2644
* Dialogs *
2645
***********/
2646
messagedialog { // Message Dialog styling
2647
&.background { background-color: $light_color; }
2648
.titlebar {
2650
min-height: $small_size;
2651
border-style: none;
2652
box-shadow: inset 0 1px $highlight_color;
2653
background-color: $light_color;
2654
}
2655
&.csd { // rounded bottom border styling for csd version
2657
&.background {
2658
// bigger radius for better antialiasing
2659
border-bottom-left-radius: 2px;
2660
border-bottom-right-radius: 2px;
2661
}
2662
.dialog-action-area button {
2664
padding: 8px 16px;
2665
border-top: 1px solid $borders_color;
2666
border-radius: 0;
2667
@extend %button_basic.flat;
2669
&:first-child{ border-bottom-left-radius: 2px; }
2671
&:last-child { border-bottom-right-radius: 2px; }
2673
}
2674
}
2675
}
2676
filechooser {
2678
.dialog-action-box { border-top: 1px solid $borders_color; }
2679
#pathbarbox { border-bottom: 1px solid $borders_color; }
2681
}
2682
filechooserbutton:drop(active) {
2684
box-shadow: none;
2685
}
2686
/***********
2689
* Sidebar *
2690
***********/
2691
.sidebar {
2692
border-style: none;
2693
background-color: $light_color;
2694
@at-root %sidebar_left,
2696
&:dir(ltr),
2697
&.left,
2698
&.left:dir(rtl) {
2699
border-right: 1px solid $borders_color;
2700
border-left-style: none;
2701
}
2702
@at-root %sidebar_right
2704
&:dir(rtl),
2705
&.right {
2706
border-left: 1px solid $borders_color;
2707
border-right-style: none;
2708
}
2709
list { background-color: transparent; }
2711
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2713
}
2714
stacksidebar {
2716
&.sidebar {
2717
&:dir(ltr),
2718
&.left,
2719
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2720
&:dir(rtl),
2722
&.right { list { @extend %sidebar_right; }}
2723
}
2724
row {
2726
padding: 10px 4px;
2727
> label {
2729
padding-left: 6px;
2730
padding-right: 6px;
2731
}
2732
&.needs-attention > label { @extend %needs_attention; }
2734
}
2735
}
2736
/****************
2739
* File chooser *
2740
****************/
2741
placessidebar {
2742
> viewport.frame { border-style: none; }
2743
row {
2745
// Needs overriding of the GtkListBoxRow padding
2746
min-height: 32px;
2747
padding: 0;
2748
// Using margins/padding directly in the SidebarRow
2750
// will make the animation of the new bookmark row jump
2751
> revealer { padding: 0 12px; }
2752
&:selected { color: $selected_fg_color; }
2754
&:disabled { color: $insensitive_fg_color; }
2756
image.sidebar-icon {
2758
opacity: $hint_opacity; // dim the device icons
2759
&:dir(ltr) { padding-right: 8px; }
2761
&:dir(rtl) { padding-left: 8px; }
2762
}
2763
label.sidebar-label {
2765
&:dir(ltr) { padding-right: 2px; }
2766
&:dir(rtl) { padding-left: 2px; }
2767
}
2768
@at-root button.sidebar-button {
2770
@extend %button_basic.flat;
2771
min-height: $small_size;
2773
min-width: $small_size;
2774
margin-top: 0;
2775
margin-bottom: 0;
2776
padding: 0;
2777
border-radius: 100%;
2778
-gtk-outline-radius: 100%;
2779
row:selected & { @extend %button_selected.flat; }
2781
}
2782
&.sidebar-placeholder-row {
2784
min-height: 2px;
2785
padding: 0 8px;
2786
background-image: image($accent_bg_color);
2787
background-clip: content-box;
2788
}
2789
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2791
&:drop(active):not(:disabled) {
2793
box-shadow: inset 0 0 0 2px $accent_bg_color;
2794
&:selected {
2796
// background-color: $accent_bg_color;
2797
// color: $selected_fg_color;
2798
}
2799
}
2800
}
2801
}
2802
placesview {
2804
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2805
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2807
// this selects the "connect to server" label
2809
> actionbar > revealer > box > label {
2810
padding-left: 8px;
2811
padding-right: 8px;
2812
}
2813
}
2814
/*********
2817
* Paned *
2818
*********/
2819
paned {
2820
> separator {
2821
min-width: 1px;
2822
min-height: 1px;
2823
-gtk-icon-source: none; // defeats the ugly default handle decoration
2824
border-style: none; // just to be sure
2825
background-color: transparent;
2826
// workaround, using background istead of a border since the border will get rendered twice (?)
2827
background-image: image($borders_color);
2828
background-size: 1px 1px;
2829
&.wide {
2831
min-width: 6px;
2832
min-height: 6px;
2833
background-color: $bg_color;
2834
background-image: image($borders_color), image($borders_color);
2835
background-size: 1px 1px, 1px 1px;
2836
}
2837
}
2838
&.horizontal > separator {
2840
background-repeat: repeat-y;
2841
&:dir(ltr) {
2843
margin: 0 -8px 0 0;
2844
padding: 0 8px 0 0;
2845
background-position: left;
2846
}
2847
&:dir(rtl) {
2849
margin: 0 0 0 -8px;
2850
padding: 0 0 0 8px;
2851
background-position: right;
2852
}
2853
&.wide {
2855
margin: 0;
2856
padding: 0;
2857
background-repeat: repeat-y, repeat-y;
2858
background-position: left, right;
2859
}
2860
}
2861
&.vertical > separator {
2863
margin: 0 0 -8px 0;
2864
padding: 0 0 8px 0;
2865
background-repeat: repeat-x;
2866
background-position: top;
2867
&.wide {
2869
margin: 0;
2870
padding: 0;
2871
background-repeat: repeat-x, repeat-x;
2872
background-position: bottom, top;
2873
}
2874
}
2875
}
2876
/**************
2879
* GtkInfoBar *
2880
**************/
2881
infobar { border-style: none; }
2882
.info { background-color: $info_bg_color; }
2884
.question { background-color: $question_bg_color; }
2886
.warning { background-color: $warning_bg_color; }
2888
.error { background-color: $error_bg_color; }
2890
.info,
2892
.question,
2893
.warning,
2894
.error {
2895
color: $selected_fg_color;
2896
button { @extend %button_selected; }
2898
label:selected {
2900
}
2901
*:link { @extend %link_selected; }
2903
}
2904
/************
2907
* Tooltips *
2908
************/
2909
tooltip {
2910
&.background {
2911
// background-color needs to be set this way otherwise it gets drawn twice
2912
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2913
background-color: scale-alpha($base_color, $higher_opacity);
2914
}
2915
// @extend %osd;
2917
// padding: 4px; /* not working */
2919
border-radius: 2px;
2920
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2921
// FIXME: we need a border or tooltips vanish on black background.
2923
decoration { background-color: transparent; }
2924
label {
2926
min-height: 32px - 6px * 2;
2927
padding: 2px 8px - 6px;
2928
}
2929
* { // Yeah this is ugly
2931
padding: 0;
2932
background-color: transparent;
2933
color: inherit;
2934
}
2935
}
2936
/*****************
2939
* Color Chooser *
2940
*****************/
2941
colorswatch {
2942
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2943
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2944
// applied to the overlay box.
2945
// base color corners rounding
2947
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2948
// sports a bigger radius.
2949
// nth-child is needed by the custom color strip.
2950
&.top {
2952
border-top-left-radius: $material_radius + 0.5px;
2953
border-top-right-radius: $material_radius + 0.5px;
2954
overlay {
2956
border-top-left-radius: $material_radius;
2957
border-top-right-radius: $material_radius;
2958
}
2959
}
2960
&.bottom {
2962
border-bottom-left-radius: $material_radius + 0.5px;
2963
border-bottom-right-radius: $material_radius + 0.5px;
2964
overlay {
2966
border-bottom-left-radius: $material_radius;
2967
border-bottom-right-radius: $material_radius;
2968
}
2969
}
2970
&.left,
2972
&:first-child:not(.top) {
2973
border-top-left-radius: $material_radius + 0.5px;
2974
border-bottom-left-radius: $material_radius + 0.5px;
2975
overlay {
2977
border-top-left-radius: $material_radius;
2978
border-bottom-left-radius: $material_radius;
2979
}
2980
}
2981
&.right,
2983
&:last-child:not(.bottom) {
2984
border-top-right-radius: $material_radius + 0.5px;
2985
border-bottom-right-radius: $material_radius + 0.5px;
2986
overlay {
2988
border-top-right-radius: $material_radius;
2989
border-bottom-right-radius: $material_radius;
2990
}
2991
}
2992
&.dark overlay { color: white; }
2994
&.light overlay { color: scale-alpha(black, 0.8); }
2996
&.dark { color: white; } // for focus ring
2998
&.light { color: scale-alpha(black, 0.8); } // for focus ring
3000
&:drop(active) {
3002
box-shadow: none;
3003
&.light overlay {
3005
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3006
}
3007
&.dark overlay {
3009
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3010
}
3011
}
3012
overlay {
3014
transition: $shadow_transition;
3015
box-shadow: $z-depth-1;
3016
&:hover { box-shadow: $z-depth-2; }
3018
}
3019
&#add-color-button {
3021
border-radius: $material_radius $material_radius 0 0;
3022
color: white; // for focus ring
3023
&:only-child { border-radius: $material_radius; }
3025
overlay {
3027
background-image: linear-gradient(to right,
3028
$error_bg_color 25%,
3029
$warning_bg_color 25%, $warning_bg_color 50%,
3030
$info_bg_color 50%, $info_bg_color 75%,
3031
$question_bg_color 75%);
3032
color: white;
3033
}
3034
}
3035
&:disabled {
3037
opacity: $disabled_opacity;
3038
overlay { box-shadow: none; }
3040
}
3041
row:selected & {
3043
}
3044
&#editor-color-sample {
3046
border-radius: $material_radius + 0.5px;
3047
overlay { border-radius: $material_radius; }
3049
// overlay:hover { box-shadow: $z-depth-1; }
3051
}
3052
}
3053
// colorscale popup
3055
colorchooser .popover.osd {
3056
transition: $shadow_transition;
3057
border-radius: 2px;
3058
box-shadow: $z-depth-2;
3059
background-color: $base_color;
3060
&:backdrop { box-shadow: $z-depth-1; }
3062
spinbutton:not(.vertical) { @extend %entry.flat; }
3064
}
3065
/********
3068
* Misc *
3069
********/
3070
//content view (grid/list)
3071
.content-view {
3072
background-color: $bg_color;
3073
// &:hover { -gtk-icon-effect: highlight; }
3075
rubberband { @extend rubberband; }
3077
}
3078
.scale-popup {
3080
.osd & { @extend %osd; }
3081
.osd & button.flat { //FIXME: quick hack, redo properly
3083
}
3084
button { // +/- buttons on GtkVolumeButton popup
3086
}
3087
}
3088
/**********************
3091
* Window Decorations *
3092
*********************/
3093
decoration {
3094
transition: $shadow_transition;
3095
border-radius: 2px 2px 0 0;
3096
box-shadow: $z-depth-4, 0 16px 16px transparent;
3097
// FIXME rationalize shadows
3099
// this is used for the resize cursor area
3101
margin: 8px;
3102
&:backdrop {
3104
// the transparent shadow here is to enforce that the shadow extents don't
3105
// change when we go to backdrop, to prevent jumping windows.
3106
// The biggest shadow should be in the same order then in the active state
3107
// or the jumping will happen during the transition.
3108
box-shadow: $z-depth-2, 0 16px 16px transparent;
3109
}
3110
.maximized &,
3112
.fullscreen &,
3113
.tiled & { border-radius: 0; }
3114
.popup & { box-shadow: none; }
3116
// server-side decorations as used by mutter
3118
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3119
.csd.popup & {
3121
border-radius: 2px;
3122
box-shadow: $z-depth-2;
3123
}
3124
tooltip.csd & {
3126
border-radius: 2px;
3127
box-shadow: $z-depth-2;
3128
}
3129
messagedialog.csd & {
3131
border-radius: 2px;
3132
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3133
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3135
}
3136
.solid-csd & {
3138
margin: 0;
3139
padding: 4px;
3140
// border: solid 1px $borders_color;
3141
border-radius: 0;
3142
box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $secondary_highlight_color;
3143
background-color: $borders_color;
3144
}
3145
}
3146
// Window Close button
3148
button.titlebutton {
3149
// @extend %button_basic.flat;
3150
@extend %button_basic.image-button;
3152
.selection-mode & {
3154
}
3155
}
3156
// catch all extend :)
3159
%selected_items {
3161
background-color: $selected_bg_color;
3162
@at-root %nobg_selected_items, & {
3164
color: $selected_fg_color;
3165
&:disabled { color: $insensitive_selected_fg_color; }
3167
}
3168
}
3169
.monospace { font-family: monospace; }
3171
/**********************
3174
* Touch Copy & Paste *
3175
*********************/
3176
//touch selection handlebars for the Popover.osd above
3177
cursor-handle {
3178
border-radius: 100px;
3179
background-color: $accent_bg_color;
3180
background-image: none;
3181
&.top:dir(ltr), &.bottom:dir(rtl) {
3183
padding-left: 6px;
3184
border-top-right-radius: 0;
3185
}
3186
&.bottom:dir(ltr), &.top:dir(rtl) {
3188
padding-right: 6px;
3189
border-top-left-radius: 0;
3190
}
3191
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3193
-GtkWidget-text-handle-width: 24;
3194
-GtkWidget-text-handle-height: 30;
3195
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3197
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3198
url('#{$_url}@2.png'));
3199
}
3200
}
3201
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3203
button.circular { // FIXME: aggregate to buttons
3205
border-radius: 100px;
3206
-gtk-outline-radius: 100px;
3207
label { padding: 0; }
3209
}
3210
// shortcut window keys
3212
.keycap {
3213
min-width: 28px - 8px * 2;
3214
min-height: 28px - 2px;
3215
margin-top: 2px;
3216
padding-bottom: 2px;
3217
padding-left: 8px;
3218
padding-right: 8px;
3219
border: solid 1px $borders_color;
3221
border-radius: 2px + 1px;
3222
box-shadow: inset 0 -2px $borders_color;
3223
background-color: $base_color;
3224
color: $fg_color;
3225
font-size: smaller;
3226
}
3227
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3229
transition: $material_transition;
3230
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3231
caret-color: $accent_bg_color;
3232
}
3233
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3235
stackswitcher button.circular,
3237
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3238
min-width: $medium_size;
3239
min-height: $medium_size;
3240
padding: 0;
3241
}
3242