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
padding: 2px 0;
835
menuitem {
837
min-height: $medium_size;
838
padding: 0 10px;
839
}
840
}
841
&.linked {
843
button:nth-child(2) {
844
&:dir(ltr) { @extend %linked:last-child; }
845
&:dir(rtl) { @extend %linked:first-child; }
846
}
847
}
848
&:drop(active) { // FIXME: untested
850
box-shadow: none;
851
// button.combo { @extend %button_basic:drop(active); }
853
}
854
}
855
.linked > combobox > box > button.combo {
857
// the combo is a composite widget so the way we do button linking doesn't
858
// work, special case needed. See
859
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
860
&:dir(ltr),
862
&:dir(rtl) { @extend %linked_middle; } // specificity bump
863
}
864
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
866
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
867
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
868
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
870
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
871
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
872
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
873
/************
876
* Toolbars *
877
************/
878
toolbar {
879
-GtkWidget-window-dragging: true;
880
padding: $container_padding / 2;
881
background-color: $bg_color;
882
// on OSD
884
.osd & { background-color: transparent; }
885
// stand-alone OSD toolbars
887
&.osd {
888
transition: $shadow_transition;
889
padding: $container_padding;
890
border-radius: 2px;
891
box-shadow: $z-depth-2;
892
background-color: $base_color;
893
&:backdrop { box-shadow: $z-depth-1; }
895
&.left,
897
&.right,
898
&.top,
899
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
900
button { @extend %button_basic.flat; }
902
}
903
// toolbar separators
905
&.horizontal separator { margin: $container_padding / 2; }
906
&.vertical separator { margin: $container_padding / 2; }
907
&:not(.inline-toolbar):not(.osd) {
909
scale,
910
entry,
911
spinbutton,
912
button { margin: $container_padding / 2; }
913
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
915
}
916
}
917
//searchbar, location-bar & inline-toolbar
919
.inline-toolbar {
920
padding: $container_padding;
921
border-style: solid;
922
border-width: 0 1px 1px;
923
border-color: $borders_color;
924
background-color: $secondary_base_color;
925
}
926
searchbar,
928
.location-bar {
929
padding: $container_padding;
930
border-style: solid;
931
border-width: 0 0 1px;
932
border-color: $borders_color;
933
background-color: $bg_color;
934
background-clip: border-box;
935
}
936
/***************
939
* Header bars *
940
***************/
941
%titlebar,
942
headerbar {
943
transition: background-color $material_faster $material_ease_out, color $material_faster $material_ease_out;
944
min-height: $large_size;
945
padding: 0 $container_padding;
946
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
947
background-color: $headerbar_color;
948
color: $selected_fg_color;
949
&:backdrop {
951
color: $secondary_selected_fg_color;
952
}
953
.title {
955
padding-left: 12px;
956
padding-right: 12px;
957
font-weight: bold;
958
}
959
.subtitle {
961
padding-left: 12px;
962
padding-right: 12px;
963
font-size: smaller;
964
@extend .dim-label;
966
}
967
button:not(.suggested-action):not(.destructive-action) {
969
@extend %button_basic.flat;
970
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
972
currentColor 0%,
973
transparent 0%)
974
0 0 0 / 0 0 0px;
975
color: gtkalpha(currentColor, $enabled_opacity);
976
&:hover, &:active { color: currentColor; }
978
&:disabled {
980
color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity);
981
> label { color: inherit; }
983
}
984
&:checked {
986
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
987
currentColor 100%,
988
transparent 0%)
989
0 0 2 / 0 0 2px;
990
background-color: transparent;
991
color: currentColor;
992
&:disabled {
994
background-color: transparent;
995
color: gtkalpha(currentColor, $disabled_opacity);
996
> label { color: inherit; }
998
}
999
}
1000
}
1001
button.suggested-action, button.destructive-action {
1003
&:disabled {
1004
color: gtkalpha(currentColor, $disabled_opacity);
1005
> label { color: inherit; }
1007
}
1008
}
1009
&.selection-mode {
1011
transition: background-color 0 $material_slower, color $material_faster $material_ease_out;
1012
animation: header_ripple_effect $material_slower $material_ease_out;
1013
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1014
background-color: $selected_bg_color;
1015
color: $selected_fg_color;
1016
&:backdrop {
1018
color: $secondary_selected_fg_color;
1019
}
1020
.subtitle:link { @extend *:link:selected; }
1022
button:not(.suggested-action):not(.destructive-action) {
1024
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1025
currentColor 0%,
1026
transparent 0%)
1027
0 0 0 / 0 0 0px;
1028
// color: gtkalpha(currentColor, $enabled_opacity);
1029
&, &:hover, &:active { color: currentColor; }
1031
&:disabled {
1033
color: gtkalpha(currentColor, $disabled_opacity);
1034
> label { color: inherit; }
1036
}
1037
&:checked {
1039
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1040
currentColor 100%,
1041
transparent 0%)
1042
0 0 2 / 0 0 2px;
1043
color: currentColor;
1044
&:disabled {
1046
color: gtkalpha(currentColor, $disabled_opacity);
1047
> label { color: inherit; }
1049
}
1050
}
1051
}
1052
.selection-menu {
1054
padding-left: 16px;
1055
padding-right: 16px;
1056
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1058
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1060
}
1061
}
1062
.fullscreen &,
1064
.tiled &,
1065
.maximized & {
1066
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1067
box-shadow: $z-depth-1;
1068
}
1069
&.default-decoration {
1071
min-height: $small_size;
1072
padding: $container_padding;
1073
border-width: 0;
1074
button.titlebutton {
1076
min-height: $small_size;
1077
min-width: $small_size;
1078
margin: 0;
1079
padding: 0;
1080
&:active { // add fallback
1082
background-image: radial-gradient(circle farthest-corner at center,
1083
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1084
transparent 0%),
1085
image(gtkalpha(currentColor, $lower_opacity / 2));
1086
}
1087
}
1088
}
1089
.solid-csd & {
1091
&:dir(rtl), &:dir(ltr) { // specificity bump
1092
margin-left: -1px;
1093
margin-right: -1px;
1094
margin-top: -1px;
1095
border-radius: 0;
1096
box-shadow: none;
1097
}
1098
}
1099
}
1100
headerbar {
1102
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1103
entry,
1104
spinbutton,
1105
// separator,
1106
button {
1107
margin-top: $container_padding;
1108
margin-bottom: $container_padding;
1109
}
1110
switch {
1112
margin-top: $container_padding * 2;
1113
margin-bottom: $container_padding * 2;
1114
}
1115
}
1116
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1118
border-top-left-radius: 2px;
1119
border-top-right-radius: 2px;
1120
}
1121
headerbar {
1123
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1124
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1125
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1127
}
1128
.titlebar:not(headerbar) {
1130
window.csd > & {
1131
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1132
padding: 0;
1133
background-color: transparent;
1134
background-image: none;
1135
border-style: none;
1136
box-shadow: none;
1137
}
1138
> separator {
1140
background-color: $headerbar_color;
1141
background-image: image($borders_color);
1142
}
1143
@extend %titlebar;
1145
}
1146
/************
1149
* Pathbars *
1150
************/
1151
.path-bar button {
1152
&.text-button, &.image-button, & {
1153
padding-left: 6px;
1154
padding-right: 6px;
1155
}
1156
&.text-button.image-button, & {
1158
// label:last-child { padding-left: 2px; padding-right: 8px; }
1159
// label:first-child { padding-left: 8px; padding-right: 2px; }
1160
}
1161
image {
1163
padding-left: 4px;
1164
padding-right: 4px;
1165
}
1166
&.slider-button {
1168
padding-left: 0;
1169
padding-right: 0;
1170
}
1171
}
1172
/**************
1175
* Tree Views *
1176
**************/
1177
treeview.view {
1178
@at-root * {
1179
-GtkTreeView-horizontal-separator: 4;
1180
-GtkTreeView-grid-line-width: 1;
1181
-GtkTreeView-grid-line-pattern: '';
1182
-GtkTreeView-tree-line-width: 1;
1183
-GtkTreeView-tree-line-pattern: '';
1184
-GtkTreeView-expander-size: 16;
1185
}
1186
border-left-color: $track_color; // this is actually the tree lines color,
1188
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1189
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1191
&:hover, &:active, &:selected { border-radius: 0; }
1193
&.separator {
1195
min-height: 1px + 2px * 2;
1196
color: $borders_color;
1197
}
1198
&:drop(active) {
1200
border-style: solid none;
1201
border-width: 1px;
1202
border-color: $accent_bg_color;
1203
&.after { border-top-style: none; }
1205
&.before { border-bottom-style: none; }
1207
}
1208
&.expander {
1210
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1211
-gtk-icon-transform: rotate(-90deg);
1212
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1214
&:checked { -gtk-icon-transform: unset; }
1216
color: $secondary_fg_color;
1218
&:hover, &:active { color: $fg_color; }
1220
&:disabled { color: $insensitive_secondary_fg_color; }
1222
&:selected {
1224
color: $secondary_selected_fg_color;
1225
&:hover, &:active { color: $selected_fg_color; }
1227
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1229
}
1230
}
1231
&.progressbar { // progress bar in treeviews
1233
border-style: none none solid;
1234
border-width: $bar_size;
1235
border-color: $selected_bg_color;
1236
background-color: transparent;
1237
background-image: none;
1238
&:selected { border-color: currentColor; }
1240
}
1241
&.trough { // progress bar trough in treeviews
1243
border-style: none none solid;
1244
border-width: $bar_size;
1245
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1246
background-color: transparent;
1247
background-image: none;
1248
&:selected { border-color: $track_color; }
1250
}
1251
header {
1253
button {
1254
@extend row.activatable;
1255
padding: 2px 6px;
1257
border-style: none solid solid none;
1258
border-width: 1px;
1259
border-color: $borders_color;
1260
border-radius: 0;
1261
background-clip: border-box;
1262
&, &:hover, &:active { box-shadow: none; }
1264
&, &:disabled { background-color: $base_color; }
1266
&:last-child { border-right-style: none; }
1268
}
1269
}
1270
button.dnd,
1272
header.button.dnd { // for treeview-like derive widgets
1273
padding: 2px 6px;
1274
border-style: none solid solid;
1275
border-width: 1px;
1276
border-color: $borders_color;
1277
border-radius: 0;
1278
box-shadow: none;
1279
background-color: $base_color;
1280
background-clip: border-box;
1281
color: $selected_bg_color;
1282
}
1283
acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
1285
}
1286
/*********
1289
* Menus *
1290
*********/
1291
menubar,
1292
.menubar {
1293
-GtkWidget-window-dragging: true;
1294
padding: 0;
1295
// box-shadow: inset 0 -1px $borders_color;
1296
background-color: $headerbar_color;
1297
> menuitem {
1299
transition: background-color $material_faster $material_ease_out;
1300
min-height: 20px;
1301
padding: 4px 8px;
1302
color: $secondary_selected_fg_color;
1303
&:hover { //Seems like it :hover even with keyboard focus
1305
transition: none;
1306
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1307
color: $selected_fg_color;
1308
}
1309
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1311
}
1312
}
1313
menu,
1315
.menu {
1316
margin: 4px 0;
1317
padding: 4px 0;
1318
background-color: $base_color;
1319
border: 1px solid $borders_color; // adds borders in a non composited env
1320
.csd & {
1322
border: none; // axes borders in a composited env
1323
border-radius: 2px;
1324
}
1325
menuitem {
1327
transition: background-color $material_faster $material_ease_out;
1328
min-height: 20px;
1329
min-width: 40px;
1330
padding: 4px 8px;
1331
font: initial;
1332
text-shadow: none;
1333
&:hover {
1335
transition: none;
1336
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1337
}
1338
&:disabled { color: $insensitive_fg_color; }
1340
// submenu indicators
1342
arrow {
1343
min-height: 16px;
1344
min-width: 16px;
1345
&:dir(ltr) {
1347
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1348
margin-left: 8px;
1349
}
1350
&:dir(rtl) {
1352
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1353
margin-right: 8px;
1354
}
1355
}
1356
}
1357
// overflow arrows
1359
> arrow {
1360
min-height: 16px;
1361
min-width: 16px;
1362
padding: 4px;
1363
border-radius: 0;
1364
background-color: $base_color;
1365
color: $secondary_fg_color;
1366
&.top {
1368
margin-top: -4px;
1369
border-bottom: 1px solid $borders_color;
1370
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1371
}
1372
&.bottom {
1374
margin-bottom: -4px;
1375
border-top: 1px solid $borders_color;
1376
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1377
}
1378
&:hover {
1380
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1381
color: $fg_color;
1382
}
1383
&:disabled {
1385
border-color: transparent;
1386
background-color: transparent;
1387
color: transparent;
1388
// color: $insensitive_secondary_fg_color;
1389
}
1390
}
1391
separator { margin: 4px 0; }
1393
}
1394
menuitem {
1396
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1397
check,
1399
radio {
1400
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1401
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1402
}
1403
}
1404
.csd.popup { border-radius: 2px; }
1406
/***************
1409
* Popovers *
1410
***************/
1411
popover.background {
1412
transition: $shadow_transition;
1413
padding: 0;
1414
box-shadow: $z-depth-2;
1415
background-color: $light_color;
1416
&:backdrop { box-shadow: $z-depth-1; }
1418
&, .csd & {
1420
border-style: solid;
1421
border-width: 1px;
1422
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1423
border-radius: 2px + 1px;
1424
}
1425
> list,
1427
> .view,
1428
> toolbar {
1429
border-style: none;
1430
box-shadow: none;
1431
background-color: transparent;
1432
}
1433
&, .csd & {
1435
&.touch-selection,
1436
&.magnifier,
1437
&.osd { @extend %osd; }
1438
}
1439
separator { margin: 4px 0; }
1441
list separator { margin: 0; }
1443
}
1444
/*************
1446
* Notebooks *
1447
*************/
1448
notebook {
1449
> header {
1450
border-width: 1px;
1451
border-color: $borders_color;
1452
background-color: $bg_color;
1453
background-clip: border-box;
1454
&.top {
1456
border-bottom-style: solid;
1457
> tabs {
1458
margin-bottom: -1px;
1459
> tab {
1460
&:hover { box-shadow: inset 0 -2px $track_color; }
1462
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1464
}
1465
}
1466
}
1467
&.bottom {
1469
border-top-style: solid;
1470
> tabs {
1471
margin-top: -1px;
1472
> tab {
1473
&:hover { box-shadow: inset 0 2px $track_color; }
1475
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1477
}
1478
}
1479
}
1480
&.left {
1482
border-right-style: solid;
1483
> tabs {
1484
margin-right: -1px;
1485
> tab {
1486
&:hover { box-shadow: inset -2px 0 $track_color; }
1488
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1490
}
1491
}
1492
}
1493
&.right {
1495
border-left-style: solid;
1496
> tabs {
1497
margin-left: -1px;
1498
> tab {
1499
&:hover { box-shadow: inset 2px 0 $track_color; }
1501
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1503
}
1504
}
1505
}
1506
&.top > tabs > arrow {
1508
@extend %notebook_vert_arrows;
1509
border-top-style: none;
1511
}
1512
&.bottom > tabs > arrow {
1514
@extend %notebook_vert_arrows;
1515
border-bottom-style: none;
1517
}
1518
@at-root %notebook_vert_arrows {
1520
padding-left: 4px;
1521
padding-right: 4px;
1522
&.down {
1524
margin-left: -8px;
1525
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1526
}
1527
&.up {
1529
margin-right: -8px;
1530
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1531
}
1532
}
1533
&.left > tabs > arrow {
1535
@extend %notebook_horz_arrows;
1536
border-left-style: none;
1538
}
1539
&.right > tabs > arrow {
1541
@extend %notebook_horz_arrows;
1542
border-right-style: none;
1544
}
1545
@at-root %notebook_horz_arrows {
1547
padding-top: 4px;
1548
padding-bottom: 4px;
1549
&.down {
1551
margin-top: -8px;
1552
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1553
}
1554
&.up {
1556
margin-bottom: -8px;
1557
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1558
}
1559
}
1560
> tabs > arrow {
1562
@extend %button_basic.flat;
1563
min-height: 16px;
1565
min-width: 16px;
1566
border-radius: 0;
1567
}
1568
tab {
1570
transition: $material_transition;
1571
min-height: 24px;
1572
min-width: 24px;
1573
padding: 6px 12px;
1574
outline-offset: -6px;
1576
border-width: 1px; // for reorderable tabs
1578
border-color: transparent; //
1579
color: $secondary_fg_color;
1581
font-weight: 500;
1582
&:hover {
1584
color: $fg_color;
1585
&.reorderable-page {
1587
border-color: $borders_color;
1588
background-color: $secondary_base_color;
1589
}
1590
}
1591
&:disabled { color: $insensitive_secondary_fg_color; }
1593
&:checked {
1595
animation: tab_ripple_effect $material_slower * 3 $material_ease_out;
1596
color: $fg_color;
1597
&:disabled { color: $insensitive_fg_color; }
1599
&.reorderable-page {
1601
border-color: $borders_color;
1602
background-color: $base_color;
1603
}
1604
}
1605
// colors the button like the label, overridden otherwise
1607
button.flat {
1608
// FIXME: generalize .small-button?
1609
min-width: $small_size;
1610
min-height: $small_size;
1611
padding: 0;
1612
@extend %button_basic.image-button;
1614
&:last-child {
1616
margin-left: 6px;
1617
margin-right: -6px;
1618
}
1619
&:first-child {
1621
margin-left: -6px;
1622
margin-right: 6px;
1623
}
1624
}
1625
}
1626
&.top,
1628
&.bottom {
1629
tabs {
1630
padding-left: 8px;
1631
padding-right: 8px;
1632
&:not(:only-child) {
1634
&:first-child { margin-left: 0; }
1635
&:last-child { margin-right: 0; }
1636
}
1637
tab {
1639
&.reorderable-page {
1640
margin: 0 -1px;
1641
border-style: none solid;
1642
}
1643
}
1644
}
1645
}
1646
&.left,
1648
&.right {
1649
tabs {
1650
padding-top: 8px;
1651
padding-bottom: 8px;
1652
&:not(:only-child) {
1654
&:first-child { margin-top: 0; }
1655
&:last-child { margin-bottom: 0; }
1656
}
1657
tab {
1659
&.reorderable-page {
1660
margin: -1px 0;
1661
border-style: solid none;
1662
}
1663
}
1664
}
1665
}
1666
}
1667
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1669
background-color: $base_color;
1670
entry,
1672
spinbutton:not(.vertical) { @extend %entry.flat; }
1673
revealer entry,
1675
revealer spinbutton:not(.vertical) { @extend %entry; }
1676
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1678
}
1679
}
1680
/**************
1683
* Scrollbars *
1684
**************/
1685
scrollbar {
1686
$_slider_min_length: 24px;
1687
// disable steppers
1689
@at-root * {
1690
-GtkScrollbar-has-backward-stepper: false;
1691
-GtkScrollbar-has-forward-stepper: false;
1692
}
1693
transition: $material_transition;
1695
background-color: $base_color;
1696
background-clip: $extra_background_clip;
1697
// scrollbar border
1699
&.top { border-bottom: 1px solid $borders_color; }
1700
&.bottom { border-top: 1px solid $borders_color; }
1701
&.left { border-right: 1px solid $borders_color; }
1702
&.right { border-left: 1px solid $borders_color; }
1703
// slider
1705
slider {
1706
transition: all $material_faster $material_ease_out, margin 0, border-width 0;
1707
min-width: 8px;
1708
min-height: 8px;
1709
border: 4px solid transparent;
1710
border-radius: 100px;
1711
background-clip: padding-box;
1712
background-color: $tertiary_fg_color;
1713
&:hover { background-color: $secondary_fg_color; }
1715
&:active { background-color: $fg_color; }
1717
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1719
}
1720
&.fine-tune {
1722
slider {
1723
transition: all $material_faster $material_ease_out, margin 0, border-width 0, min-width 0, min-height 0;
1724
min-width: 4px;
1725
min-height: 4px;
1726
}
1727
&.horizontal slider { margin: 2px 0; }
1729
&.vertical slider { margin: 0 2px; }
1731
}
1732
&.overlay-indicator {
1734
&:not(.dragging):not(.hovering) {
1735
border-color: transparent;
1736
background-color: transparent;
1737
slider {
1739
min-width: 4px;
1740
min-height: 4px;
1741
margin: 2px;
1742
border: 2px solid scale-alpha($base_color, $lower_opacity);
1743
}
1744
button {
1746
min-width: 4px;
1747
min-height: 4px;
1748
margin: 2px;
1749
border: 2px solid scale-alpha($base_color, $lower_opacity);
1750
border-radius: 100px;
1751
background-color: $tertiary_fg_color;
1752
background-clip: padding-box;
1753
-gtk-icon-source: none;
1754
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1756
}
1757
&.horizontal {
1759
slider { min-width: $_slider_min_length; }
1760
button { min-width: 8px; }
1762
}
1763
&.vertical {
1765
slider { min-height: $_slider_min_length; }
1766
button { min-height: 8px; }
1768
}
1769
}
1770
&.dragging,
1772
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1773
}
1774
&.horizontal slider { min-width: $_slider_min_length; }
1776
&.vertical slider { min-height: $_slider_min_length; }
1778
// button styling
1780
button {
1781
@extend %button_basic.flat;
1782
min-width: 16px;
1783
min-height: 16px;
1784
padding: 0;
1785
border-radius: 0;
1786
}
1787
// button icons
1789
&.vertical {
1790
button {
1791
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1792
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1794
}
1795
}
1796
&.horizontal {
1798
button {
1799
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1800
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1802
}
1803
}
1804
}
1805
/**********
1808
* Switch *
1809
**********/
1810
switch {
1811
transition: $material_transition;
1812
margin: $container_padding 0;
1813
border: 4px solid transparent;
1814
border-radius: 100px;
1815
background-color: $track_color;
1816
background-clip: padding-box;
1817
font-size: 0;
1818
&:disabled { color: $insensitive_fg_color; }
1820
&:checked {
1822
background-color: scale-alpha($accent_bg_color, 0.5);
1823
&:disabled {
1825
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1826
color: $insensitive_fg_color;
1827
}
1828
}
1829
slider {
1831
@include entry(normal);
1832
transition: $material_transition, margin 0;
1834
min-width: $small_size;
1835
min-height: $small_size;
1836
margin: -4px 0 -4px -4px;
1837
-gtk-outline-radius: 100px;
1838
border-radius: 100px;
1839
}
1840
&:hover slider { @include entry(focus); }
1842
&:disabled slider { @include entry(insensitive); }
1844
&:checked slider {
1846
transition: $material_transition, margin 0, background-image 0, background-color 0 $material_slower;
1847
animation: needs_attention $material_slower $material_ease_out;
1848
margin: -4px -4px -4px 0;
1849
background-color: $accent_bg_color;
1850
color: $selected_fg_color;
1851
}
1852
&:checked:disabled slider { animation: none; }
1854
row:selected & {
1856
}
1857
}
1858
/*************************
1861
* Check and Radio items *
1862
*************************/
1863
// draw regular check and radio items using our PNG assets
1864
// all assets are rendered from assets.svg. never add pngs directly
1865
//selection-mode
1867
@each $s,$as in ('','-selectionmode'),
1868
(':hover', '-hover-selectionmode'),
1869
(':checked', '-checked-selectionmode'),
1870
(':checked:hover', '-checked-hover-selectionmode') {
1871
.view.content-view.check#{$s}:not(list) {
1872
-gtk-icon-shadow: $z-depth-1;
1873
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1874
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1875
margin: 8px;
1876
background-color: transparent;
1877
}
1878
}
1879
checkbutton.text-button,
1881
radiobutton.text-button {
1882
// this is for a nice focus on check and radios text
1883
padding: 2px;
1884
outline-offset: 0;
1885
label:not(:only-child) { margin: 0 4px; }
1887
}
1888
check,
1890
radio {
1891
min-height: 24px;
1892
min-width: 24px;
1893
margin: -12px;
1894
padding: 12px;
1895
@extend %button_basic.flat;
1897
@extend %button_basic.image-button;
1899
&:checked, &:checked:disabled { background-color: transparent; }
1901
&:checked, &:indeterminate { color: $accent_bg_color; }
1903
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1905
// &:only-child { margin: -12px; }
1907
row &:not(:checked):not(:indeterminate) {
1909
color: gtkalpha(currentColor, $enabled_opacity);
1910
&:hover, &:active { color: currentColor; }
1912
}
1913
menu menuitem & {
1915
transition: none;
1916
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1917
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1919
&, &:hover, &:disabled {
1921
background-image: none;
1922
// color: inherit;
1923
// animation: none;
1924
}
1925
}
1926
}
1927
%check,
1929
check {
1930
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1931
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1932
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1934
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1935
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1937
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1938
}
1939
%radio,
1941
radio {
1942
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1943
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1944
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1946
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1947
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1949
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1950
border-image: -gtk-gradient(radial,
1952
center center, 0,
1953
center center, 0.001,
1954
to($accent_bg_color),
1955
to(transparent))
1956
24 / 24px;
1957
&:checked {
1959
border-image: -gtk-gradient(radial,
1960
center center, 0,
1961
center center, (10 / 48 / 2),
1962
to($accent_bg_color),
1963
to(transparent))
1964
24 / 24px;
1965
}
1966
&:checked:disabled {
1968
border-image: -gtk-gradient(radial,
1969
center center, 0,
1970
center center, (10 / 48 / 2),
1971
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1972
to(transparent))
1973
24 / 24px;
1974
}
1975
&:indeterminate:checked {
1977
border-image: -gtk-gradient(radial,
1978
center center, 0,
1979
center center, 0.001,
1980
to($accent_bg_color),
1981
to(transparent))
1982
24 / 24px;
1983
}
1984
}
1985
// let's animate things
1987
@keyframes check_check {
1988
from { -gtk-icon-transform: rotate(90deg); }
1989
to { -gtk-icon-transform: unset; }
1990
}
1991
@keyframes check_radio { // FIXME: cannot animate border-image
1993
from {
1994
border-image: -gtk-gradient(radial,
1995
center center, 0,
1996
center center, 0.001,
1997
to($accent_bg_color),
1998
to(transparent))
1999
24 / 24px;
2000
}
2001
to {
2003
border-image: -gtk-gradient(radial,
2004
center center, 0,
2005
center center, (10 / 48 / 2),
2006
to($accent_bg_color),
2007
to(transparent))
2008
24 / 24px;
2009
}
2010
}
2011
@keyframes check_indeterminate {
2013
from { -gtk-icon-transform: unset; }
2014
50% { -gtk-icon-transform: scale(0, 1); }
2015
to { -gtk-icon-transform: unset; }
2016
}
2017
%check_checked,
2019
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
2020
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2022
// %radio_checked,
2024
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
2025
// radio:not(:indeterminate):checked:active { animation: check_radio $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2027
%indeterminate_checked,
2029
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
2030
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2032
// no animations in menus
2034
menu menuitem {
2035
check:not(:indeterminate):checked,
2036
radio:not(:indeterminate):checked,
2037
check:indeterminate:checked,
2038
radio:indeterminate:checked { animation: none; }
2039
}
2040
treeview.view check,
2042
treeview.view radio {
2043
padding: 0;
2044
&:checked:hover, &:selected:checked:hover { background-image: none; }
2046
& {
2048
color: $secondary_fg_color;
2049
&:hover, &:active { color: $fg_color; }
2051
&:disabled { color: $insensitive_secondary_fg_color; }
2053
&:checked, &:indeterminate { color: $accent_bg_color; }
2055
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2057
}
2058
&:selected {
2060
color: $secondary_selected_fg_color;
2061
&:hover, &:active { color: $selected_fg_color; }
2063
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2065
&:checked, &:indeterminate { color: $accent_bg_color; }
2067
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2069
}
2070
}
2071
treeview.view radio:checked {
2073
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2074
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2075
border-image: none;
2076
}
2077
/************
2080
* GtkScale *
2081
************/
2082
scale {
2083
// sizing
2084
$_marks_lenght: 8px;
2085
$_marks_distance: 8px;
2086
min-height: 12px;
2088
min-width: 12px;
2089
padding: 12px;
2090
* { transition: $material_transition; }
2092
// the slider is inside the trough, so to have make it bigger there's a negative margin
2094
slider {
2095
min-height: $small_size;
2096
min-width: $small_size;
2097
margin: -10px;
2098
}
2099
// the backing bit
2101
trough {
2102
outline-offset: 2px;
2103
background-color: $track_color;
2104
&:disabled { color: $insensitive_fg_color; }
2106
}
2107
// the colored part of the backing bit
2109
highlight {
2110
background-color: $accent_bg_color;
2111
&:disabled { background-color: transparent; }
2113
}
2114
// this is another differently styled part of the backing bit, the most relevant use case is for example
2116
// in media player to indicate how much video stream as been cached
2117
fill {
2118
background-color: $track_color;
2119
&:disabled { background-color: transparent; }
2121
}
2122
slider {
2124
transition: all $material_faster $material_ease;
2125
// border-radius: 100%;
2126
// background-color: $accent_bg_color;
2127
background-repeat: no-repeat;
2128
background-position: center;
2129
@each $s,$as in ('',''),
2131
(':disabled','-insensitive') {
2132
&#{$s} {
2133
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2134
background-image: -gtk-scaled(url('#{$_url}.png'),
2135
url('#{$_url}@2.png'));
2136
}
2137
}
2138
background-size: calc(100% - 8px);
2140
&:hover { background-size: calc(100% - 4px); }
2142
&:active { background-size: calc(100% - 0px); }
2144
}
2145
// click-and-hold the slider to activate
2147
&.fine-tune {
2148
// to make the slider shrink in fine-tune mode
2149
slider { background-size: calc(100% - 12px); }
2150
}
2151
value { color: gtkalpha(currentColor, $hint_opacity); }
2153
marks {
2155
color: $track_color;
2156
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2158
(bottom, bottom, top),
2159
(top, left, right),
2160
(bottom, right, left) {
2161
&.#{$marks_class} {
2162
margin-#{$marks_margin}: $_marks_distance;
2163
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2164
}
2165
}
2166
}
2167
&.horizontal {
2169
indicator {
2170
min-height: $_marks_lenght;
2171
min-width: 1px;
2172
}
2173
}
2174
&.vertical {
2176
indicator {
2177
min-height: 1px;
2178
min-width: $_marks_lenght;
2179
}
2180
}
2181
// *WARNING* scale with marks madness following
2183
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2185
$suffix: if($variant == 'light', '', '-dark');
2186
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2188
('vertical', 'vert') {
2189
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2190
('scale-has-marks-below', ':first-child:not(:only-child)') {
2191
@each $state, $state_infix in ('', ''),
2192
(':disabled', '-insensitive') {
2193
&.#{$dir_class} {
2194
%#{$marks_infix}-#{$dir_infix},
2195
contents#{$nth_child} > trough > slider {
2196
&#{$state} {
2197
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2198
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2200
}
2201
@if $dir_class == 'horizontal' {
2203
min-height: 30px;
2204
min-width: $small_size;
2205
@if $marks_infix == 'scale-has-marks-above' {
2207
margin-top: -16px;
2208
background-position: center calc(100% - 4px);
2210
&:hover { background-position: center calc(100% - 2px); }
2212
&:active { background-position: center calc(100% - 0px); }
2214
}
2215
@if $marks_infix == 'scale-has-marks-below' {
2217
margin-bottom: -16px;
2218
background-position: center calc(4px);
2220
&:hover { background-position: center calc(2px); }
2222
&:active { background-position: center calc(0px); }
2224
}
2225
}
2226
@if $dir_class == 'vertical' {
2228
min-height: $small_size;
2229
min-width: 30px;
2230
@if $marks_infix == 'scale-has-marks-above' {
2232
margin-left: -16px;
2233
background-position: calc(4px) center;
2235
&:hover { background-position: calc(2px) center; }
2237
&:active { background-position: calc(0px) center; }
2239
}
2240
@if $marks_infix == 'scale-has-marks-below' {
2242
margin-right: -16px;
2243
background-position: calc(100% - 4px) center;
2245
&:hover { background-position: calc(100% - 2px) center; }
2247
&:active { background-position: calc(100% - 0px) center; }
2249
}
2250
}
2251
}
2252
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2254
&.fine-tune contents#{$nth_child} > trough > slider {
2255
// bigger negative margins to make the trough grow here as well
2256
@if $dir_class == 'horizontal' {
2258
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2259
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2261
}
2262
@if $dir_class == 'vertical' {
2264
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2265
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2267
}
2268
}
2269
}
2270
}
2271
}
2272
}
2273
&.color {
2275
min-height: 0;
2276
min-width: 0;
2277
&.horizontal {
2279
padding: 0 0 12px 0;
2280
trough {
2282
padding-bottom: $bar_size;
2283
}
2284
slider {
2286
@extend %scale-has-marks-above-horz;
2287
margin-bottom: -10px - $bar_size;
2289
margin-top: 0;
2290
}
2291
}
2292
&.vertical {
2294
&:dir(ltr) {
2295
padding: 0 0 0 12px;
2296
trough {
2298
padding-left: $bar_size;
2299
}
2300
slider {
2302
@extend %scale-has-marks-below-vert;
2303
margin-left: -10px - $bar_size;
2305
margin-right: 0;
2306
}
2307
}
2308
&:dir(rtl) {
2310
padding: 0 12px 0 0;
2311
trough {
2313
padding-right: $bar_size;
2314
}
2315
slider {
2317
@extend %scale-has-marks-above-vert;
2318
margin-right: -10px - $bar_size;
2320
margin-left: 0;
2321
}
2322
}
2323
}
2324
&.fine-tune {
2326
&.horizontal {
2327
slider {
2328
@extend %scale-has-marks-above-horz-fine-tune;
2329
}
2330
}
2331
&.vertical {
2333
&:dir(ltr) {
2334
slider {
2335
@extend %scale-has-marks-below-vert-fine-tune;
2336
}
2337
}
2338
&:dir(rtl) {
2340
slider {
2341
@extend %scale-has-marks-above-vert-fine-tune;
2342
}
2343
}
2344
}
2345
}
2346
}
2347
}
2348
/*****************
2351
* Progress bars *
2352
*****************/
2353
progressbar {
2354
// sizing
2355
&.horizontal {
2356
trough,
2357
progress { min-height: $bar_size; }
2358
}
2359
&.vertical {
2361
trough,
2362
progress { min-width: $bar_size; }
2363
}
2364
// FIXME: insensitive state missing and some other state should be set probably
2366
color: $tertiary_fg_color;
2367
font-size: smaller;
2368
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2370
progress { background-color: $selected_bg_color; }
2372
&.osd { // progressbar.osd used for epiphany page loading progress
2374
// min-width: $bar_size;
2375
// min-height: $bar_size;
2376
// background-color: transparent;
2377
// trough { background-color: transparent; }
2379
progress {
2381
}
2382
}
2383
}
2384
/*************
2387
* Level Bar *
2388
*************/
2389
levelbar {
2390
block {
2391
min-width: $medium_size;
2392
min-height: $bar_size;
2393
}
2394
&.vertical block {
2396
min-width: $bar_size;
2397
min-height: $medium_size;
2398
}
2399
trough {
2401
padding: 2px;
2402
border-radius: 2px;
2403
@include entry(normal);
2405
&:disabled { @include entry(insensitive); }
2407
}
2408
&.horizontal.discrete block { margin: 0 1px; }
2410
&.vertical.discrete block { margin: 1px 0; }
2412
&.horizontal.discrete trough { padding: 2px 1px; }
2414
&.vertical.discrete trough { padding: 1px 2px; }
2416
block {
2418
&.low {
2419
background-color: $warning_color;
2420
}
2421
&.high,
2423
&:not(.empty) {
2424
background-color: $selected_bg_color;
2425
}
2426
&.full {
2428
background-color: $success_color;
2429
}
2430
&.empty {
2432
background-color: $track_color;
2433
color: $insensitive_fg_color;
2434
}
2435
}
2436
}
2437
/****************
2440
* Print dialog *
2441
*****************/
2442
printdialog {
2443
paper {
2444
padding: 0;
2445
border: 1px solid $borders_color;
2446
background: $base_color;
2447
color: $fg_color;
2448
}
2449
.dialog-action-box { margin: 12px; }
2451
}
2452
/**********
2455
* Frames *
2456
**********/
2457
frame > border,
2458
.frame {
2459
margin: 0;
2460
padding: 0;
2461
border: 1px solid $borders_color;
2462
border-radius: 0;
2463
box-shadow: none;
2464
&.flat { border-style: none; }
2466
}
2467
actionbar > revealer > box {
2469
padding: $container_padding;
2470
border-top: 1px solid $borders_color;
2471
}
2472
scrolledwindow {
2474
viewport.frame { // avoid double borders when viewport inside scrolled window
2475
border-style: none;
2476
}
2477
// This is used when content is touch-dragged past boundaries.
2479
// draws a box on top of the content, the size changes programmatically.
2480
overshoot {
2481
&.top { @include overshoot(top); }
2482
&.bottom { @include overshoot(bottom); }
2484
&.left { @include overshoot(left); }
2486
&.right { @include overshoot(right); }
2488
}
2489
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2491
undershoot {
2492
&.top { @include undershoot(top); }
2493
&.bottom { @include undershoot(bottom); }
2495
&.left { @include undershoot(left); }
2497
&.right { @include undershoot(right); }
2499
}
2500
junction { // the small square between two scrollbars
2502
border-style: solid none none solid;
2503
border-width: 1px;
2504
border-color: $borders_color;
2505
background-color: $base_color;
2506
&:dir(rtl) { border-style: solid solid none none; }
2508
}
2509
}
2510
//vbox and hbox separators
2512
separator {
2513
min-width: 1px;
2514
min-height: 1px;
2515
background: $borders_color;
2516
}
2517
/*********
2520
* Lists *
2521
*********/
2522
list {
2523
border-color: $borders_color;
2524
background-color: $base_color;
2525
row { padding: 2px; }
2527
}
2528
row {
2530
transition: $material_transition;
2531
&:hover { transition: none; }
2533
&.activatable {
2535
background-image: radial-gradient(circle farthest-corner at center,
2536
gtkalpha(currentColor, 0) 100%,
2537
transparent 0%),
2538
image(gtkalpha(currentColor, 0));
2539
&:hover {
2541
background-image: radial-gradient(circle farthest-corner at center,
2542
gtkalpha(currentColor, 0) 100%,
2543
transparent 0%),
2544
image(gtkalpha(currentColor, 0.05));
2545
}
2546
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2548
&:active {
2549
transition: $material_transition, background-image 0;
2550
animation: row_ripple_effect $material_slower $material_ease_out forwards;
2551
}
2552
}
2553
&:selected { @extend %selected_items; }
2555
}
2556
/*********************
2559
* App Notifications *
2560
*********************/
2561
.app-notification,
2562
.app-notification.frame {
2563
@extend %osd;
2564
@extend toolbar.osd;
2566
margin: 8px;
2568
border { border: none; }
2570
}
2571
/*************
2574
* Expanders *
2575
*************/
2576
expander {
2577
arrow {
2578
transition: all $material_faster $material_ease;
2579
min-width: 16px;
2580
min-height: 16px;
2581
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2582
-gtk-icon-transform: rotate(-90deg);
2583
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2585
&:checked { -gtk-icon-transform: unset; }
2587
color: $secondary_fg_color;
2589
&:hover, &:active { color: $fg_color; }
2591
&:disabled { color: $insensitive_secondary_fg_color; }
2593
&:selected {
2595
color: $secondary_selected_fg_color;
2596
&:hover, &:active { color: $selected_fg_color; }
2598
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2600
}
2601
}
2602
}
2603
/************
2606
* Calendar *
2607
***********/
2608
calendar {
2609
padding: 1px;
2610
border: 1px solid $borders_color;
2611
color: $fg_color;
2612
&:disabled { color: $insensitive_fg_color; }
2614
&:selected {
2616
@extend %selected_items;
2617
border-radius: 2px + 1px;
2619
}
2620
&.header {
2622
border-style: none none solid;
2623
border-radius: 0;
2624
}
2625
&.button { @extend %button_basic.flat; }
2627
&.highlight {
2629
color: gtkalpha(currentColor, $hint_opacity);
2630
font-weight: 500;
2631
}
2632
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2634
}
2635
/***********
2638
* Dialogs *
2639
***********/
2640
messagedialog { // Message Dialog styling
2641
&.background { background-color: $light_color; }
2642
.titlebar {
2644
min-height: $small_size;
2645
border-style: none;
2646
box-shadow: inset 0 1px $highlight_color;
2647
background-color: $light_color;
2648
}
2649
&.csd { // rounded bottom border styling for csd version
2651
&.background {
2652
// bigger radius for better antialiasing
2653
border-bottom-left-radius: 2px;
2654
border-bottom-right-radius: 2px;
2655
}
2656
.dialog-action-area button {
2658
padding: 8px 16px;
2659
border-top: 1px solid $borders_color;
2660
border-radius: 0;
2661
@extend %button_basic.flat;
2663
&:first-child{ border-bottom-left-radius: 2px; }
2665
&:last-child { border-bottom-right-radius: 2px; }
2667
}
2668
}
2669
}
2670
filechooser {
2672
.dialog-action-box { border-top: 1px solid $borders_color; }
2673
#pathbarbox { border-bottom: 1px solid $borders_color; }
2675
}
2676
filechooserbutton:drop(active) {
2678
box-shadow: none;
2679
}
2680
/***********
2683
* Sidebar *
2684
***********/
2685
.sidebar {
2686
border-style: none;
2687
background-color: $light_color;
2688
@at-root %sidebar_left,
2690
&:dir(ltr),
2691
&.left,
2692
&.left:dir(rtl) {
2693
border-right: 1px solid $borders_color;
2694
border-left-style: none;
2695
}
2696
@at-root %sidebar_right
2698
&:dir(rtl),
2699
&.right {
2700
border-left: 1px solid $borders_color;
2701
border-right-style: none;
2702
}
2703
list { background-color: transparent; }
2705
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2707
}
2708
stacksidebar {
2710
&.sidebar {
2711
&:dir(ltr),
2712
&.left,
2713
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2714
&:dir(rtl),
2716
&.right { list { @extend %sidebar_right; }}
2717
}
2718
row {
2720
padding: 10px 4px;
2721
> label {
2723
padding-left: 6px;
2724
padding-right: 6px;
2725
}
2726
&.needs-attention > label { @extend %needs_attention; }
2728
}
2729
}
2730
/****************
2733
* File chooser *
2734
****************/
2735
placessidebar {
2736
> viewport.frame { border-style: none; }
2737
row {
2739
// Needs overriding of the GtkListBoxRow padding
2740
min-height: 32px;
2741
padding: 0;
2742
// Using margins/padding directly in the SidebarRow
2744
// will make the animation of the new bookmark row jump
2745
> revealer { padding: 0 12px; }
2746
&:selected { color: $selected_fg_color; }
2748
&:disabled { color: $insensitive_fg_color; }
2750
image.sidebar-icon {
2752
opacity: $hint_opacity; // dim the device icons
2753
&:dir(ltr) { padding-right: 8px; }
2755
&:dir(rtl) { padding-left: 8px; }
2756
}
2757
label.sidebar-label {
2759
&:dir(ltr) { padding-right: 2px; }
2760
&:dir(rtl) { padding-left: 2px; }
2761
}
2762
@at-root button.sidebar-button {
2764
@extend %button_basic.flat;
2765
min-height: $small_size;
2767
min-width: $small_size;
2768
margin-top: 0;
2769
margin-bottom: 0;
2770
padding: 0;
2771
border-radius: 100%;
2772
-gtk-outline-radius: 100%;
2773
row:selected & { @extend %button_selected.flat; }
2775
}
2776
&.sidebar-placeholder-row {
2778
min-height: 2px;
2779
padding: 0 8px;
2780
background-image: image($accent_bg_color);
2781
background-clip: content-box;
2782
}
2783
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2785
&:drop(active):not(:disabled) {
2787
box-shadow: inset 0 0 0 2px $accent_bg_color;
2788
&:selected {
2790
// background-color: $accent_bg_color;
2791
// color: $selected_fg_color;
2792
}
2793
}
2794
}
2795
}
2796
placesview {
2798
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2799
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2801
// this selects the "connect to server" label
2803
> actionbar > revealer > box > label {
2804
padding-left: 8px;
2805
padding-right: 8px;
2806
}
2807
}
2808
/*********
2811
* Paned *
2812
*********/
2813
paned {
2814
> separator {
2815
min-width: 1px;
2816
min-height: 1px;
2817
-gtk-icon-source: none; // defeats the ugly default handle decoration
2818
border-style: none; // just to be sure
2819
background-color: transparent;
2820
// workaround, using background istead of a border since the border will get rendered twice (?)
2821
background-image: image($borders_color);
2822
background-size: 1px 1px;
2823
&.wide {
2825
min-width: 6px;
2826
min-height: 6px;
2827
background-color: $bg_color;
2828
background-image: image($borders_color), image($borders_color);
2829
background-size: 1px 1px, 1px 1px;
2830
}
2831
}
2832
&.horizontal > separator {
2834
background-repeat: repeat-y;
2835
&:dir(ltr) {
2837
margin: 0 -8px 0 0;
2838
padding: 0 8px 0 0;
2839
background-position: left;
2840
}
2841
&:dir(rtl) {
2843
margin: 0 0 0 -8px;
2844
padding: 0 0 0 8px;
2845
background-position: right;
2846
}
2847
&.wide {
2849
margin: 0;
2850
padding: 0;
2851
background-repeat: repeat-y, repeat-y;
2852
background-position: left, right;
2853
}
2854
}
2855
&.vertical > separator {
2857
margin: 0 0 -8px 0;
2858
padding: 0 0 8px 0;
2859
background-repeat: repeat-x;
2860
background-position: top;
2861
&.wide {
2863
margin: 0;
2864
padding: 0;
2865
background-repeat: repeat-x, repeat-x;
2866
background-position: bottom, top;
2867
}
2868
}
2869
}
2870
/**************
2873
* GtkInfoBar *
2874
**************/
2875
infobar { border-style: none; }
2876
.info { background-color: $info_bg_color; }
2878
.question { background-color: $question_bg_color; }
2880
.warning { background-color: $warning_bg_color; }
2882
.error { background-color: $error_bg_color; }
2884
.info,
2886
.question,
2887
.warning,
2888
.error {
2889
color: $selected_fg_color;
2890
button { @extend %button_selected; }
2892
label:selected {
2894
}
2895
*:link { @extend %link_selected; }
2897
}
2898
/************
2901
* Tooltips *
2902
************/
2903
tooltip {
2904
&.background {
2905
// background-color needs to be set this way otherwise it gets drawn twice
2906
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2907
background-color: scale-alpha($base_color, $higher_opacity);
2908
}
2909
// @extend %osd;
2911
// padding: 4px; /* not working */
2913
border-radius: 2px;
2914
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2915
// FIXME: we need a border or tooltips vanish on black background.
2917
decoration { background-color: transparent; }
2918
label {
2920
min-height: 32px - 6px * 2;
2921
padding: 2px 8px - 6px;
2922
}
2923
* { // Yeah this is ugly
2925
padding: 0;
2926
background-color: transparent;
2927
color: inherit;
2928
}
2929
}
2930
/*****************
2933
* Color Chooser *
2934
*****************/
2935
colorswatch {
2936
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2937
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2938
// applied to the overlay box.
2939
// base color corners rounding
2941
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2942
// sports a bigger radius.
2943
// nth-child is needed by the custom color strip.
2944
&.top {
2946
border-top-left-radius: $material_radius + 0.5px;
2947
border-top-right-radius: $material_radius + 0.5px;
2948
overlay {
2950
border-top-left-radius: $material_radius;
2951
border-top-right-radius: $material_radius;
2952
}
2953
}
2954
&.bottom {
2956
border-bottom-left-radius: $material_radius + 0.5px;
2957
border-bottom-right-radius: $material_radius + 0.5px;
2958
overlay {
2960
border-bottom-left-radius: $material_radius;
2961
border-bottom-right-radius: $material_radius;
2962
}
2963
}
2964
&.left,
2966
&:first-child:not(.top) {
2967
border-top-left-radius: $material_radius + 0.5px;
2968
border-bottom-left-radius: $material_radius + 0.5px;
2969
overlay {
2971
border-top-left-radius: $material_radius;
2972
border-bottom-left-radius: $material_radius;
2973
}
2974
}
2975
&.right,
2977
&:last-child:not(.bottom) {
2978
border-top-right-radius: $material_radius + 0.5px;
2979
border-bottom-right-radius: $material_radius + 0.5px;
2980
overlay {
2982
border-top-right-radius: $material_radius;
2983
border-bottom-right-radius: $material_radius;
2984
}
2985
}
2986
&.dark overlay { color: white; }
2988
&.light overlay { color: scale-alpha(black, 0.8); }
2990
&.dark { color: white; } // for focus ring
2992
&.light { color: scale-alpha(black, 0.8); } // for focus ring
2994
&:drop(active) {
2996
box-shadow: none;
2997
&.light overlay {
2999
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3000
}
3001
&.dark overlay {
3003
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3004
}
3005
}
3006
overlay {
3008
transition: $shadow_transition;
3009
box-shadow: $z-depth-1;
3010
&:hover { box-shadow: $z-depth-2; }
3012
}
3013
&#add-color-button {
3015
border-radius: $material_radius $material_radius 0 0;
3016
color: white; // for focus ring
3017
&:only-child { border-radius: $material_radius; }
3019
overlay {
3021
background-image: linear-gradient(to right,
3022
$error_bg_color 25%,
3023
$warning_bg_color 25%, $warning_bg_color 50%,
3024
$info_bg_color 50%, $info_bg_color 75%,
3025
$question_bg_color 75%);
3026
color: white;
3027
}
3028
}
3029
&:disabled {
3031
opacity: $disabled_opacity;
3032
overlay { box-shadow: none; }
3034
}
3035
row:selected & {
3037
}
3038
&#editor-color-sample {
3040
border-radius: $material_radius + 0.5px;
3041
overlay { border-radius: $material_radius; }
3043
// overlay:hover { box-shadow: $z-depth-1; }
3045
}
3046
}
3047
// colorscale popup
3049
colorchooser .popover.osd {
3050
transition: $shadow_transition;
3051
border-radius: 2px;
3052
box-shadow: $z-depth-2;
3053
background-color: $base_color;
3054
&:backdrop { box-shadow: $z-depth-1; }
3056
spinbutton:not(.vertical) { @extend %entry.flat; }
3058
}
3059
/********
3062
* Misc *
3063
********/
3064
//content view (grid/list)
3065
.content-view {
3066
background-color: $bg_color;
3067
// &:hover { -gtk-icon-effect: highlight; }
3069
rubberband { @extend rubberband; }
3071
}
3072
.scale-popup {
3074
.osd & { @extend %osd; }
3075
.osd & button.flat { //FIXME: quick hack, redo properly
3077
}
3078
button { // +/- buttons on GtkVolumeButton popup
3080
}
3081
}
3082
/**********************
3085
* Window Decorations *
3086
*********************/
3087
decoration {
3088
transition: $shadow_transition;
3089
border-radius: 2px 2px 0 0;
3090
box-shadow: $z-depth-4, 0 16px 16px transparent;
3091
// FIXME rationalize shadows
3093
// this is used for the resize cursor area
3095
margin: 8px;
3096
&:backdrop {
3098
// the transparent shadow here is to enforce that the shadow extents don't
3099
// change when we go to backdrop, to prevent jumping windows.
3100
// The biggest shadow should be in the same order then in the active state
3101
// or the jumping will happen during the transition.
3102
box-shadow: $z-depth-2, 0 16px 16px transparent;
3103
}
3104
.maximized &,
3106
.fullscreen &,
3107
.tiled & { border-radius: 0; }
3108
.popup & { box-shadow: none; }
3110
// server-side decorations as used by mutter
3112
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3113
.csd.popup & {
3115
border-radius: 2px;
3116
box-shadow: $z-depth-2;
3117
}
3118
tooltip.csd & {
3120
border-radius: 2px;
3121
box-shadow: $z-depth-2;
3122
}
3123
messagedialog.csd & {
3125
border-radius: 2px;
3126
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3127
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3129
}
3130
.solid-csd & {
3132
margin: 0;
3133
padding: 4px;
3134
// border: solid 1px $borders_color;
3135
border-radius: 0;
3136
box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $secondary_highlight_color;
3137
background-color: $borders_color;
3138
}
3139
}
3140
// Window Close button
3142
button.titlebutton {
3143
// @extend %button_basic.flat;
3144
@extend %button_basic.image-button;
3146
.selection-mode & {
3148
}
3149
}
3150
// catch all extend :)
3153
%selected_items {
3155
background-color: $selected_bg_color;
3156
@at-root %nobg_selected_items, & {
3158
color: $selected_fg_color;
3159
&:disabled { color: $insensitive_selected_fg_color; }
3161
}
3162
}
3163
.monospace { font-family: monospace; }
3165
/**********************
3168
* Touch Copy & Paste *
3169
*********************/
3170
//touch selection handlebars for the Popover.osd above
3171
cursor-handle {
3172
border-radius: 100px;
3173
background-color: $accent_bg_color;
3174
background-image: none;
3175
&.top:dir(ltr), &.bottom:dir(rtl) {
3177
padding-left: 6px;
3178
border-top-right-radius: 0;
3179
}
3180
&.bottom:dir(ltr), &.top:dir(rtl) {
3182
padding-right: 6px;
3183
border-top-left-radius: 0;
3184
}
3185
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3187
-GtkWidget-text-handle-width: 24;
3188
-GtkWidget-text-handle-height: 30;
3189
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3191
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3192
url('#{$_url}@2.png'));
3193
}
3194
}
3195
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3197
button.circular { // FIXME: aggregate to buttons
3199
border-radius: 100px;
3200
-gtk-outline-radius: 100px;
3201
label { padding: 0; }
3203
}
3204
// shortcut window keys
3206
.keycap {
3207
min-width: 28px - 8px * 2;
3208
min-height: 28px - 2px;
3209
margin-top: 2px;
3210
padding-bottom: 2px;
3211
padding-left: 8px;
3212
padding-right: 8px;
3213
border: solid 1px $borders_color;
3215
border-radius: 2px + 1px;
3216
box-shadow: inset 0 -2px $borders_color;
3217
background-color: $base_color;
3218
color: $fg_color;
3219
font-size: smaller;
3220
}
3221
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3223
transition: $material_transition;
3224
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3225
caret-color: $accent_bg_color;
3226
}
3227
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3229
stackswitcher button.circular,
3231
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3232
min-width: $medium_size;
3233
min-height: $medium_size;
3234
padding: 0;
3235
}
3236