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
// @extend %button_basic.flat;
262
min-height: $small_size;
264
min-width: $small_size;
265
-gtk-outline-radius: 100px;
266
border-radius: 100px;
267
color: gtkalpha(currentColor, $enabled_opacity);
268
&:hover, &:active { color: currentColor; }
270
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
272
&.left { margin-left: -2px; margin-right: 2px; }
274
&.right { margin-left: 2px; margin-right: -2px; }
276
}
277
undershoot {
279
&.left { @include undershoot(left); }
280
&.right { @include undershoot(right); }
282
}
283
selection { @extend %selected_items; }
285
// entry error and warning style
287
@each $e_type, $e_color in (error, $error_color),
288
(warning, $warning_color) {
289
&.#{$e_type} {
290
@include entry(normal, $e_color);
291
&:focus { @include entry(focus, $e_color); }
293
&:disabled { @include entry(insensitive, $e_color); }
295
&.flat {
297
@include entry(flat-normal, $e_color);
298
&:focus { @include entry(flat-focus, $e_color); }
300
&:disabled { @include entry(flat-insensitive, $e_color); }
302
}
303
}
304
}
305
&:drop(active) {
307
// box-shadow: inset 0 0 0 2px $accent_bg_color;
308
}
309
.osd & {
311
}
312
}
313
progress {
315
margin: 2px -6px;
316
border-style: none none solid;
317
border-width: 2px;
318
border-color: $selected_bg_color;
319
// border-radius: 0;
320
// box-shadow: none;
321
background-color: transparent;
322
// background-image: none;
323
}
324
// linked entries
326
.linked:not(.vertical) > &:not(.flat) { @extend %linked; }
327
// Vertically linked entries
329
.linked.vertical > &:not(.flat) { @extend %linked_vertical; }
330
}
331
treeview entry {
333
&.flat, & {
334
min-height: 0;
335
padding: 2px;
336
border-radius: 0;
337
background-color: $base_color;
338
&, &:focus {
340
border-image: none;
341
box-shadow: none;
342
}
343
}
344
}
345
/***********
348
* Buttons *
349
***********/
350
// stuff for .needs-attention
351
@keyframes needs_attention {
352
from {
353
background-image: -gtk-gradient(radial,
354
center center, 0,
355
center center, 0.001,
356
to($accent_bg_color),
357
to(transparent));
358
}
359
to {
361
background-image: -gtk-gradient(radial,
362
center center, 0,
363
center center, 0.5,
364
to($accent_bg_color),
365
to(transparent));
366
}
367
}
368
%button,
370
button {
371
@at-root %button_basic, & {
372
min-height: 24px;
373
min-width: 16px;
374
padding: 6px 10px;
375
border-radius: 2px;
376
font-weight: 500;
377
@include button(normal);
379
&:hover { @include button(hover); }
381
&:active { @include button(active); }
383
&:disabled { @include button(insensitive); }
385
&:checked { @include button(checked); }
387
&:checked:disabled { @include button(checked-insensitive); }
389
&.flat {
391
@include button(flat-normal);
392
&:hover { @include button(flat-hover); }
394
&:active { @include button(flat-active); }
396
&:disabled { @include button(flat-insensitive); }
398
&:checked { @include button(flat-checked); }
400
&:checked:disabled { @include button(flat-checked-insensitive); }
402
}
403
&.image-button {
405
min-width: 24px;
406
padding: 6px;
407
-gtk-outline-radius: 100px;
408
border-radius: 100px;
409
}
410
&.text-button {
412
padding-left: 16px;
413
padding-right: 16px;
414
}
415
&.text-button.image-button {
417
padding-left: 10px;
418
padding-right: 10px;
419
-gtk-outline-radius: 2px;
420
border-radius: 2px;
421
label {
423
&:last-child { padding-left: 2px; padding-right: 6px; }
424
&:first-child { padding-left: 6px; padding-right: 2px; }
425
}
426
}
427
.linked > & { @extend %linked; }
429
.linked.vertical > & { @extend %linked_vertical; }
431
.linked > &.flat,
433
.linked.vertical > &.flat {
434
border-radius: 2px;
435
&.image-button {
437
-gtk-outline-radius: 100px;
438
border-radius: 100px;
439
}
440
&.text-button.image-button {
442
-gtk-outline-radius: 2px;
443
border-radius: 2px;
444
}
445
}
446
&:drop(active) {
448
// box-shadow: inset 0 0 0 2px $accent_bg_color;
449
}
450
}
451
@at-root %button_selected, row:selected & {
453
&:disabled { color: $insensitive_secondary_selected_fg_color; }
454
&.flat {
456
color: $secondary_selected_fg_color;
457
&:hover, &:active { color: $selected_fg_color; }
459
&:disabled { color: $insensitive_secondary_selected_fg_color; }
461
}
462
}
463
// big standalone buttons like in Documents pager
465
&.osd {
466
padding: 12px 16px;
467
&.image-button { padding: 12px; }
469
&:disabled { opacity: 0; }
471
}
472
//overlay / OSD style
474
@at-root %osd_button,
475
.osd & {
476
}
477
// Suggested and Destructive Action buttons
479
@each $b_type, $b_color in (suggested-action, $suggested_color),
480
(destructive-action, $destructive_color) {
481
&.#{$b_type} {
482
background-color: $b_color;
483
color: $selected_fg_color;
484
// @include button(normal, $b_color, white);
486
// &:hover { @include button(hover, $b_color, white); }
488
// &:active, &:checked { @include button(active, $b_color, white); }
490
&:disabled { @include button(insensitive, $b_color, white); }
492
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
494
&.flat {
496
background-color: transparent;
497
color: $b_color;
498
// @include button(flat-normal, $b_color, white);
500
// &:hover { @include button(flat-hover, $b_color, white); }
502
// &:active, &:checked { @include button(flat-active, $b_color, white); }
504
&:disabled { @include button(flat-insensitive, $b_color, white); }
506
}
507
.osd & {
509
}
510
}
511
}
512
.stack-switcher > & {
514
// to position the needs attention dot, padding is added to the button
515
// child, a label needs just lateral padding while an icon needs vertical
516
// padding added too.
517
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
519
> label {
521
padding-left: 6px; // label padding
522
padding-right: 6px; //
523
}
524
> image {
526
padding-left: 6px; // image padding
527
padding-right: 6px; //
528
padding-top: 3px; //
529
padding-bottom: 3px; //
530
}
531
&.text-button {
533
// compensate text-button paddings
534
padding-left: 10px;
535
padding-right: 10px;
536
}
537
&.image-button {
539
// we want image buttons to have a 1:1 aspect ratio, so compensation
540
// of the padding added to the GtkImage is needed
541
padding-left: 4px;
542
padding-right: 4px;
543
}
544
&.needs-attention {
546
> label,
547
> image { @extend %needs_attention; }
548
&:checked {
550
> label,
551
> image {
552
animation: none;
553
background-image: none;
554
}
555
}
556
}
557
}
558
// hide separators
560
separator {
561
min-width: 0;
562
min-height: 0;
563
background: transparent;
564
}
565
// &.font,
567
// &.file { separator { background-color: transparent; }}
568
// &.font { > box > box > label { font-weight: bold; }}
570
// inline-toolbar buttons
572
.inline-toolbar & {
573
@extend %button_basic.flat;
574
&:not(.text-button) { @extend %button_basic.image-button; }
576
}
577
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
579
}
580
%needs_attention {
582
animation: needs_attention $material_slower $material_ease_out forwards;
583
background-repeat: no-repeat;
584
background-position: right 3px;
585
background-size: 6px 6px;
586
&:dir(rtl) { background-position: left 3px; }
588
}
589
// all the following is for the +|- buttons on inline toolbars, that way
591
// should really be deprecated...
592
.inline-toolbar toolbutton > button { // redefining the button look is
593
// needed since those are flat...
594
}
595
// More inline toolbar buttons
597
toolbar.inline-toolbar toolbutton {
598
// > button.flat { @extend %linked_middle; }
599
// &:first-child > button.flat { @extend %linked:first-child; }
601
// &:last-child > button.flat { @extend %linked:last-child; }
603
// &:only-child > button.flat { @extend %linked:only-child; }
605
}
606
%linked_middle {
608
border-radius: 0;
609
}
610
%linked {
612
-gtk-outline-radius: 2px;
613
@extend %linked_middle;
615
&:first-child {
617
border-top-left-radius: 2px;
618
border-bottom-left-radius: 2px;
619
}
620
&:last-child {
622
border-top-right-radius: 2px;
623
border-bottom-right-radius: 2px;
624
}
625
&:only-child {
627
border-radius: 2px;
628
}
629
}
630
%linked_vertical_middle {
632
border-radius: 0;
633
}
634
%linked_vertical{
636
-gtk-outline-radius: 2px;
637
@extend %linked_vertical_middle;
639
&:first-child {
641
border-top-left-radius: 2px;
642
border-top-right-radius: 2px;
643
}
644
&:last-child {
646
border-bottom-left-radius: 2px;
647
border-bottom-right-radius: 2px;
648
}
649
&:only-child {
651
border-radius: 2px;
652
}
653
}
654
/* menu buttons */
656
modelbutton.flat,
657
.menuitem.button.flat {
658
min-height: $menuitem_size;
659
padding-left: 8px;
660
padding-right: 8px;
661
border-radius: 2px;
662
color: inherit;
663
@extend %button_basic.flat;
665
&:selected { @extend %selected_items; }
667
check,
669
radio {
670
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
671
&, &:hover { background-image: none; }
673
&:active { animation: none; }
675
&:last-child { margin-left: -8px; margin-right: -16px; }
677
&:first-child { margin-left: -16px; margin-right: -8px; }
679
}
680
check:not(:indeterminate):checked { @extend %check_checked; }
682
// radio:not(:indeterminate):checked { @extend %radio_checked; }
684
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
686
}
687
modelbutton.flat arrow {
689
background: none;
690
&:hover { background: none; }
692
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
694
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
696
}
697
button.color {
699
min-height: $small_size;
700
min-width: $small_size;
701
padding: $container_padding;
702
colorswatch:only-child {
704
// &, overlay { border-radius: 0; }
705
}
706
}
707
/*********
710
* Links *
711
*********/
712
*:link {
713
&, &:hover, &:active { color: $link_color; }
714
&:visited {
716
&, &:hover, &:active { color: $link_visited_color; }
717
}
718
@at-root %link_selected,
720
&:selected,
721
*:selected & { color: $selected_fg_color; }
722
}
723
button:link,
725
button:visited {
726
@extend *:link;
727
> label { text-decoration-line: underline; }
729
}
730
/*****************
732
* GtkSpinButton *
733
*****************/
734
spinbutton {
735
&:not(.vertical) {
736
// in this horizontal configuration, the whole spinbutton
737
// behaves as the entry, so we extend the entry styling
738
// and nuke the style on the internal entry
739
@extend %entry;
740
padding: 0;
742
%spinbutton_entry,
744
entry {
745
min-width: $large_size - 16px;
746
// reset all the other props since the spinbutton node is styled here
747
margin: 0;
748
border-image: none;
749
border-radius: 0;
750
box-shadow: none;
751
background-color: transparent;
752
}
753
button {
755
min-height: $small_size;
756
min-width: $small_size;
757
// margin: $container_padding;
758
padding: 0;
759
border: solid $container_padding transparent;
760
@extend %button_basic.flat;
762
@extend %button_basic.image-button;
764
&.up { margin-left: -$container_padding / 2; }
766
&.down { margin-right: -$container_padding / 2; }
768
}
769
}
770
// OSD horizontal
772
.osd &:not(.vertical) {
773
button {
774
}
775
}
776
// Vertical
778
&.vertical {
779
// in the vertical configuration, we treat the spinbutton
780
// as a box, and tweak the style of the entry in the middle
781
// so that it's linked
782
// FIXME: this should not be set at all, but otherwise it gets the wrong
784
// color
785
&:disabled { color: $insensitive_fg_color; }
786
&:drop(active) {
788
box-shadow: none;
789
}
790
entry {
792
min-height: $medium_size;
793
min-width: $large_size;
794
padding: 0;
795
}
796
button {
798
min-height: $medium_size;
799
min-width: $large_size;
800
padding: 0;
801
@extend %button_basic.flat;
803
&.up { border-radius: 2px 2px 0 0; }
805
&.down { border-radius: 0 0 2px 2px; }
807
}
808
}
809
// OSD vertical
811
.osd &.vertical button:first-child {
812
}
813
// Misc
815
treeview &:not(.vertical) {
816
min-height: 0;
817
border-style: none;
818
border-radius: 0;
819
entry {
821
min-height: 0;
822
padding: 1px 2px;
823
}
824
}
825
}
826
/**************
829
* ComboBoxes *
830
**************/
831
combobox {
832
arrow {
833
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
834
min-height: 16px;
835
min-width: 16px;
836
}
837
menu,
839
.menu,
840
.context-menu {
841
padding: 2px 0;
842
menuitem {
844
min-height: $medium_size;
845
padding: 0 10px;
846
}
847
}
848
&.linked {
850
button:nth-child(2) {
851
&:dir(ltr) { @extend %linked:last-child; }
852
&:dir(rtl) { @extend %linked:first-child; }
853
}
854
}
855
&:drop(active) { // FIXME: untested
857
box-shadow: none;
858
// button.combo { @extend %button_basic:drop(active); }
860
}
861
}
862
.linked > combobox > box > button.combo {
864
// the combo is a composite widget so the way we do button linking doesn't
865
// work, special case needed. See
866
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
867
&:dir(ltr),
869
&:dir(rtl) { @extend %linked_middle; } // specificity bump
870
}
871
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
873
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
874
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
875
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
877
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
878
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
879
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
880
/************
883
* Toolbars *
884
************/
885
toolbar {
886
-GtkWidget-window-dragging: true;
887
padding: $container_padding / 2;
888
background-color: $bg_color;
889
// on OSD
891
.osd & { background-color: transparent; }
892
// stand-alone OSD toolbars
894
&.osd {
895
transition: $shadow_transition;
896
padding: $container_padding;
897
border-radius: 2px;
898
box-shadow: $z-depth-2;
899
background-color: $base_color;
900
&:backdrop { box-shadow: $z-depth-1; }
902
&.left,
904
&.right,
905
&.top,
906
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
907
button { @extend %button_basic.flat; }
909
}
910
// toolbar separators
912
&.horizontal separator { margin: $container_padding / 2; }
913
&.vertical separator { margin: $container_padding / 2; }
914
&:not(.inline-toolbar):not(.osd) {
916
scale,
917
entry,
918
spinbutton,
919
button { margin: $container_padding / 2; }
920
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
922
}
923
}
924
//searchbar, location-bar & inline-toolbar
926
.inline-toolbar {
927
padding: $container_padding;
928
border-style: solid;
929
border-width: 0 1px 1px;
930
border-color: $borders_color;
931
background-color: $secondary_base_color;
932
}
933
searchbar,
935
.location-bar {
936
padding: $container_padding;
937
border-style: solid;
938
border-width: 0 0 1px;
939
border-color: $borders_color;
940
background-color: $bg_color;
941
background-clip: border-box;
942
}
943
/***************
946
* Header bars *
947
***************/
948
%titlebar,
949
headerbar {
950
transition: background-color $material_faster $material_ease_out, color $material_faster $material_ease_out;
951
min-height: $large_size;
952
padding: 0 $container_padding;
953
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
954
background-color: $headerbar_color;
955
color: $selected_fg_color;
956
&:backdrop {
958
color: $secondary_selected_fg_color;
959
}
960
.title {
962
padding-left: 12px;
963
padding-right: 12px;
964
font-weight: bold;
965
}
966
.subtitle {
968
padding-left: 12px;
969
padding-right: 12px;
970
font-size: smaller;
971
@extend .dim-label;
973
}
974
button:not(.suggested-action):not(.destructive-action) {
976
@extend %button_basic.flat;
977
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
979
currentColor 0%,
980
transparent 0%)
981
0 0 0 / 0 0 0px;
982
color: gtkalpha(currentColor, $enabled_opacity);
983
&:hover, &:active { color: currentColor; }
985
&:disabled {
987
color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity);
988
> label { color: inherit; }
990
}
991
&:checked {
993
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
994
currentColor 100%,
995
transparent 0%)
996
0 0 2 / 0 0 2px;
997
background-color: transparent;
998
color: currentColor;
999
&:disabled {
1001
background-color: transparent;
1002
color: gtkalpha(currentColor, $disabled_opacity);
1003
> label { color: inherit; }
1005
}
1006
}
1007
}
1008
button.suggested-action, button.destructive-action {
1010
&:disabled {
1011
color: gtkalpha(currentColor, $disabled_opacity);
1012
> label { color: inherit; }
1014
}
1015
}
1016
&.selection-mode {
1018
transition: background-color 0 $material_slower, color $material_faster $material_ease_out;
1019
animation: header_ripple_effect $material_slower $material_ease_out;
1020
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1021
background-color: $selected_bg_color;
1022
color: $selected_fg_color;
1023
&:backdrop {
1025
color: $secondary_selected_fg_color;
1026
}
1027
.subtitle:link { @extend *:link:selected; }
1029
button:not(.suggested-action):not(.destructive-action) {
1031
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1032
currentColor 0%,
1033
transparent 0%)
1034
0 0 0 / 0 0 0px;
1035
// color: gtkalpha(currentColor, $enabled_opacity);
1036
&, &:hover, &:active { color: currentColor; }
1038
&:disabled {
1040
color: gtkalpha(currentColor, $disabled_opacity);
1041
> label { color: inherit; }
1043
}
1044
&:checked {
1046
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1047
currentColor 100%,
1048
transparent 0%)
1049
0 0 2 / 0 0 2px;
1050
color: currentColor;
1051
&:disabled {
1053
color: gtkalpha(currentColor, $disabled_opacity);
1054
> label { color: inherit; }
1056
}
1057
}
1058
}
1059
.selection-menu {
1061
padding-left: 16px;
1062
padding-right: 16px;
1063
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1065
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1067
}
1068
}
1069
.fullscreen &,
1071
.tiled &,
1072
.maximized & {
1073
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1074
box-shadow: $z-depth-1;
1075
}
1076
&.default-decoration {
1078
min-height: $small_size;
1079
padding: $container_padding;
1080
border-width: 0;
1081
button.titlebutton {
1083
min-height: $small_size;
1084
min-width: $small_size;
1085
margin: 0;
1086
padding: 0;
1087
&:active { // add fallback
1089
background-image: radial-gradient(circle farthest-corner at center,
1090
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1091
transparent 0%),
1092
image(gtkalpha(currentColor, $lower_opacity / 2));
1093
}
1094
}
1095
}
1096
.solid-csd & {
1098
&:dir(rtl), &:dir(ltr) { // specificity bump
1099
margin-left: -1px;
1100
margin-right: -1px;
1101
margin-top: -1px;
1102
border-radius: 0;
1103
box-shadow: none;
1104
}
1105
}
1106
}
1107
headerbar {
1109
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1110
entry,
1111
spinbutton,
1112
// separator,
1113
button {
1114
margin-top: $container_padding;
1115
margin-bottom: $container_padding;
1116
}
1117
switch {
1119
margin-top: $container_padding * 2;
1120
margin-bottom: $container_padding * 2;
1121
}
1122
}
1123
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1125
border-top-left-radius: 2px;
1126
border-top-right-radius: 2px;
1127
}
1128
headerbar {
1130
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1131
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1132
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1134
}
1135
.titlebar:not(headerbar) {
1137
window.csd > & {
1138
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1139
padding: 0;
1140
background-color: transparent;
1141
background-image: none;
1142
border-style: none;
1143
box-shadow: none;
1144
}
1145
> separator {
1147
background-color: $headerbar_color;
1148
background-image: image($borders_color);
1149
}
1150
@extend %titlebar;
1152
}
1153
/************
1156
* Pathbars *
1157
************/
1158
.path-bar button {
1159
&.text-button, &.image-button, & {
1160
padding-left: 6px;
1161
padding-right: 6px;
1162
}
1163
&.text-button.image-button, & {
1165
// label:last-child { padding-left: 2px; padding-right: 8px; }
1166
// label:first-child { padding-left: 8px; padding-right: 2px; }
1167
}
1168
image {
1170
padding-left: 4px;
1171
padding-right: 4px;
1172
}
1173
&.slider-button {
1175
padding-left: 0;
1176
padding-right: 0;
1177
}
1178
}
1179
/**************
1182
* Tree Views *
1183
**************/
1184
treeview.view {
1185
@at-root * {
1186
-GtkTreeView-horizontal-separator: 4;
1187
-GtkTreeView-grid-line-width: 1;
1188
-GtkTreeView-grid-line-pattern: '';
1189
-GtkTreeView-tree-line-width: 1;
1190
-GtkTreeView-tree-line-pattern: '';
1191
-GtkTreeView-expander-size: 16;
1192
}
1193
border-left-color: $track_color; // this is actually the tree lines color,
1195
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1196
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1198
&:hover, &:active, &:selected { border-radius: 0; }
1200
&.separator {
1202
min-height: 1px + 2px * 2;
1203
color: $borders_color;
1204
}
1205
&:drop(active) {
1207
border-style: solid none;
1208
border-width: 1px;
1209
border-color: $accent_bg_color;
1210
&.after { border-top-style: none; }
1212
&.before { border-bottom-style: none; }
1214
}
1215
&.expander {
1217
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1218
-gtk-icon-transform: rotate(-90deg);
1219
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1221
&:checked { -gtk-icon-transform: unset; }
1223
color: $secondary_fg_color;
1225
&:hover, &:active { color: $fg_color; }
1227
&:disabled { color: $insensitive_secondary_fg_color; }
1229
&:selected {
1231
color: $secondary_selected_fg_color;
1232
&:hover, &:active { color: $selected_fg_color; }
1234
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1236
}
1237
}
1238
&.progressbar { // progress bar in treeviews
1240
border-style: none none solid;
1241
border-width: $bar_size;
1242
border-color: $selected_bg_color;
1243
background-color: transparent;
1244
background-image: none;
1245
&:selected { border-color: currentColor; }
1247
}
1248
&.trough { // progress bar trough in treeviews
1250
border-style: none none solid;
1251
border-width: $bar_size;
1252
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1253
background-color: transparent;
1254
background-image: none;
1255
&:selected { border-color: $track_color; }
1257
}
1258
header {
1260
button {
1261
@extend row.activatable;
1262
padding: 2px 6px;
1264
border-style: none solid solid none;
1265
border-width: 1px;
1266
border-color: $borders_color;
1267
border-radius: 0;
1268
background-clip: border-box;
1269
&, &:hover, &:active { box-shadow: none; }
1271
&, &:disabled { background-color: $base_color; }
1273
&:last-child { border-right-style: none; }
1275
}
1276
}
1277
button.dnd,
1279
header.button.dnd { // for treeview-like derive widgets
1280
padding: 2px 6px;
1281
border-style: none solid solid;
1282
border-width: 1px;
1283
border-color: $borders_color;
1284
border-radius: 0;
1285
box-shadow: none;
1286
background-color: $base_color;
1287
background-clip: border-box;
1288
color: $selected_bg_color;
1289
}
1290
acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
1292
}
1293
/*********
1296
* Menus *
1297
*********/
1298
menubar,
1299
.menubar {
1300
-GtkWidget-window-dragging: true;
1301
padding: 0;
1302
// box-shadow: inset 0 -1px $borders_color;
1303
background-color: $headerbar_color;
1304
> menuitem {
1306
transition: background-color $material_faster $material_ease_out;
1307
min-height: 20px;
1308
padding: 4px 8px;
1309
color: $secondary_selected_fg_color;
1310
&:hover { //Seems like it :hover even with keyboard focus
1312
transition: none;
1313
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1314
color: $selected_fg_color;
1315
}
1316
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1318
}
1319
}
1320
menu,
1322
.menu,
1323
.context-menu {
1324
margin: 4px 0;
1325
padding: 4px 0;
1326
background-color: $base_color;
1327
border: 1px solid $borders_color; // adds borders in a non composited env
1328
.csd & {
1330
border: none; // axes borders in a composited env
1331
border-radius: 2px;
1332
}
1333
menuitem {
1335
transition: background-color $material_faster $material_ease_out;
1336
min-height: 20px;
1337
min-width: 40px;
1338
padding: 4px 8px;
1339
font: initial;
1340
text-shadow: none;
1341
&:hover {
1343
transition: none;
1344
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1345
}
1346
&:disabled { color: $insensitive_fg_color; }
1348
// submenu indicators
1350
arrow {
1351
min-height: 16px;
1352
min-width: 16px;
1353
&:dir(ltr) {
1355
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1356
margin-left: 8px;
1357
}
1358
&:dir(rtl) {
1360
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1361
margin-right: 8px;
1362
}
1363
}
1364
// avoids labels color being overridden, see
1366
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1367
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1368
}
1369
// overflow arrows
1371
> arrow {
1372
min-height: 16px;
1373
min-width: 16px;
1374
padding: 4px;
1375
border-radius: 0;
1376
background-color: $base_color;
1377
color: $secondary_fg_color;
1378
&.top {
1380
margin-top: -4px;
1381
border-bottom: 1px solid $borders_color;
1382
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1383
}
1384
&.bottom {
1386
margin-bottom: -4px;
1387
border-top: 1px solid $borders_color;
1388
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1389
}
1390
&:hover {
1392
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1393
color: $fg_color;
1394
}
1395
&:disabled {
1397
border-color: transparent;
1398
background-color: transparent;
1399
color: transparent;
1400
// color: $insensitive_secondary_fg_color;
1401
}
1402
}
1403
separator { margin: 4px 0; }
1405
}
1406
menuitem {
1408
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1409
check,
1411
radio {
1412
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1413
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1414
}
1415
}
1416
.csd.popup { border-radius: 2px; }
1418
/***************
1421
* Popovers *
1422
***************/
1423
popover.background {
1424
transition: $shadow_transition;
1425
padding: 0;
1426
box-shadow: $z-depth-2;
1427
background-color: $light_color;
1428
&:backdrop { box-shadow: $z-depth-1; }
1430
&, .csd & {
1432
border-style: solid;
1433
border-width: 1px;
1434
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1435
border-radius: 2px + 1px;
1436
}
1437
> list,
1439
> .view,
1440
> toolbar {
1441
border-style: none;
1442
box-shadow: none;
1443
background-color: transparent;
1444
}
1445
&, .csd & {
1447
&.touch-selection,
1448
&.magnifier,
1449
&.osd { @extend %osd; }
1450
}
1451
separator { margin: 4px 0; }
1453
list separator { margin: 0; }
1455
}
1456
/*************
1458
* Notebooks *
1459
*************/
1460
notebook {
1461
> header {
1462
border-width: 1px;
1463
border-color: $borders_color;
1464
background-color: $bg_color;
1465
background-clip: border-box;
1466
&.top {
1468
border-bottom-style: solid;
1469
> tabs {
1470
margin-bottom: -1px;
1471
> tab {
1472
&:hover { box-shadow: inset 0 -2px $track_color; }
1474
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1476
}
1477
}
1478
}
1479
&.bottom {
1481
border-top-style: solid;
1482
> tabs {
1483
margin-top: -1px;
1484
> tab {
1485
&:hover { box-shadow: inset 0 2px $track_color; }
1487
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1489
}
1490
}
1491
}
1492
&.left {
1494
border-right-style: solid;
1495
> tabs {
1496
margin-right: -1px;
1497
> tab {
1498
&:hover { box-shadow: inset -2px 0 $track_color; }
1500
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1502
}
1503
}
1504
}
1505
&.right {
1507
border-left-style: solid;
1508
> tabs {
1509
margin-left: -1px;
1510
> tab {
1511
&:hover { box-shadow: inset 2px 0 $track_color; }
1513
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1515
}
1516
}
1517
}
1518
&.top > tabs > arrow {
1520
@extend %notebook_vert_arrows;
1521
border-top-style: none;
1523
}
1524
&.bottom > tabs > arrow {
1526
@extend %notebook_vert_arrows;
1527
border-bottom-style: none;
1529
}
1530
@at-root %notebook_vert_arrows {
1532
padding-left: 4px;
1533
padding-right: 4px;
1534
&.down {
1536
margin-left: -8px;
1537
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1538
}
1539
&.up {
1541
margin-right: -8px;
1542
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1543
}
1544
}
1545
&.left > tabs > arrow {
1547
@extend %notebook_horz_arrows;
1548
border-left-style: none;
1550
}
1551
&.right > tabs > arrow {
1553
@extend %notebook_horz_arrows;
1554
border-right-style: none;
1556
}
1557
@at-root %notebook_horz_arrows {
1559
padding-top: 4px;
1560
padding-bottom: 4px;
1561
&.down {
1563
margin-top: -8px;
1564
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1565
}
1566
&.up {
1568
margin-bottom: -8px;
1569
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1570
}
1571
}
1572
> tabs > arrow {
1574
@extend %button_basic.flat;
1575
min-height: 16px;
1577
min-width: 16px;
1578
border-radius: 0;
1579
}
1580
tab {
1582
transition: $material_transition;
1583
min-height: 24px;
1584
min-width: 24px;
1585
padding: 6px 12px;
1586
outline-offset: -6px;
1588
border-width: 1px; // for reorderable tabs
1590
border-color: transparent; //
1591
color: $secondary_fg_color;
1593
font-weight: 500;
1594
&:hover {
1596
color: $fg_color;
1597
&.reorderable-page {
1599
border-color: $borders_color;
1600
background-color: $secondary_base_color;
1601
}
1602
}
1603
&:disabled { color: $insensitive_secondary_fg_color; }
1605
&:checked {
1607
animation: tab_ripple_effect $material_slower * 3 $material_ease_out;
1608
color: $fg_color;
1609
&:disabled { color: $insensitive_fg_color; }
1611
&.reorderable-page {
1613
border-color: $borders_color;
1614
background-color: $base_color;
1615
}
1616
}
1617
// colors the button like the label, overridden otherwise
1619
button.flat {
1620
// FIXME: generalize .small-button?
1621
min-width: $small_size;
1622
min-height: $small_size;
1623
padding: 0;
1624
@extend %button_basic.image-button;
1626
&:last-child {
1628
margin-left: 6px;
1629
margin-right: -6px;
1630
}
1631
&:first-child {
1633
margin-left: -6px;
1634
margin-right: 6px;
1635
}
1636
}
1637
}
1638
&.top,
1640
&.bottom {
1641
tabs {
1642
padding-left: 8px;
1643
padding-right: 8px;
1644
&:not(:only-child) {
1646
&:first-child { margin-left: 0; }
1647
&:last-child { margin-right: 0; }
1648
}
1649
tab {
1651
&.reorderable-page {
1652
margin: 0 -1px;
1653
border-style: none solid;
1654
}
1655
}
1656
}
1657
}
1658
&.left,
1660
&.right {
1661
tabs {
1662
padding-top: 8px;
1663
padding-bottom: 8px;
1664
&:not(:only-child) {
1666
&:first-child { margin-top: 0; }
1667
&:last-child { margin-bottom: 0; }
1668
}
1669
tab {
1671
&.reorderable-page {
1672
margin: -1px 0;
1673
border-style: solid none;
1674
}
1675
}
1676
}
1677
}
1678
}
1679
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1681
background-color: $base_color;
1682
entry,
1684
spinbutton:not(.vertical) { @extend %entry.flat; }
1685
revealer entry,
1687
revealer spinbutton:not(.vertical) { @extend %entry; }
1688
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1690
}
1691
}
1692
/**************
1695
* Scrollbars *
1696
**************/
1697
scrollbar {
1698
$_slider_min_length: 24px;
1699
// disable steppers
1701
@at-root * {
1702
-GtkScrollbar-has-backward-stepper: false;
1703
-GtkScrollbar-has-forward-stepper: false;
1704
}
1705
transition: $material_transition;
1707
background-color: $base_color;
1708
background-clip: $extra_background_clip;
1709
// scrollbar border
1711
&.top { border-bottom: 1px solid $borders_color; }
1712
&.bottom { border-top: 1px solid $borders_color; }
1713
&.left { border-right: 1px solid $borders_color; }
1714
&.right { border-left: 1px solid $borders_color; }
1715
// slider
1717
slider {
1718
transition: all $material_faster $material_ease_out, margin 0, border-width 0;
1719
min-width: 8px;
1720
min-height: 8px;
1721
border: 4px solid transparent;
1722
border-radius: 100px;
1723
background-clip: padding-box;
1724
background-color: $tertiary_fg_color;
1725
&:hover { background-color: $secondary_fg_color; }
1727
&:active { background-color: $fg_color; }
1729
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1731
}
1732
&.fine-tune {
1734
slider {
1735
transition: all $material_faster $material_ease_out, margin 0, border-width 0, min-width 0, min-height 0;
1736
min-width: 4px;
1737
min-height: 4px;
1738
}
1739
&.horizontal slider { margin: 2px 0; }
1741
&.vertical slider { margin: 0 2px; }
1743
}
1744
&.overlay-indicator {
1746
&:not(.dragging):not(.hovering) {
1747
border-color: transparent;
1748
background-color: transparent;
1749
slider {
1751
min-width: 4px;
1752
min-height: 4px;
1753
margin: 2px;
1754
border: 2px solid scale-alpha($base_color, $lower_opacity);
1755
}
1756
button {
1758
min-width: 4px;
1759
min-height: 4px;
1760
margin: 2px;
1761
border: 2px solid scale-alpha($base_color, $lower_opacity);
1762
border-radius: 100px;
1763
background-color: $tertiary_fg_color;
1764
background-clip: padding-box;
1765
-gtk-icon-source: none;
1766
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1768
}
1769
&.horizontal {
1771
slider { min-width: $_slider_min_length; }
1772
button { min-width: 8px; }
1774
}
1775
&.vertical {
1777
slider { min-height: $_slider_min_length; }
1778
button { min-height: 8px; }
1780
}
1781
}
1782
&.dragging,
1784
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1785
}
1786
&.horizontal slider { min-width: $_slider_min_length; }
1788
&.vertical slider { min-height: $_slider_min_length; }
1790
// button styling
1792
button {
1793
@extend %button_basic.flat;
1794
min-width: 16px;
1795
min-height: 16px;
1796
padding: 0;
1797
border-radius: 0;
1798
}
1799
// button icons
1801
&.vertical {
1802
button {
1803
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1804
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1806
}
1807
}
1808
&.horizontal {
1810
button {
1811
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1812
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1814
}
1815
}
1816
}
1817
/**********
1820
* Switch *
1821
**********/
1822
switch {
1823
transition: $material_transition;
1824
margin: $container_padding 0;
1825
border: 4px solid transparent;
1826
border-radius: 100px;
1827
background-color: $track_color;
1828
background-clip: padding-box;
1829
font-size: 0;
1830
&:disabled { color: $insensitive_fg_color; }
1832
&:checked {
1834
background-color: scale-alpha($accent_bg_color, 0.5);
1835
&:disabled {
1837
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1838
color: $insensitive_fg_color;
1839
}
1840
}
1841
slider {
1843
@include entry(normal);
1844
transition: $material_transition, margin 0;
1846
min-width: $small_size;
1847
min-height: $small_size;
1848
margin: -4px 0 -4px -4px;
1849
-gtk-outline-radius: 100px;
1850
border-radius: 100px;
1851
}
1852
&:hover slider { @include entry(focus); }
1854
&:disabled slider { @include entry(insensitive); }
1856
&:checked slider {
1858
transition: $material_transition, margin 0, background-image 0, background-color 0 $material_slower;
1859
animation: needs_attention $material_slower $material_ease_out;
1860
margin: -4px -4px -4px 0;
1861
background-color: $accent_bg_color;
1862
color: $selected_fg_color;
1863
}
1864
&:checked:disabled slider { animation: none; }
1866
row:selected & {
1868
}
1869
}
1870
/*************************
1873
* Check and Radio items *
1874
*************************/
1875
// draw regular check and radio items using our PNG assets
1876
// all assets are rendered from assets.svg. never add pngs directly
1877
//selection-mode
1879
@each $s,$as in ('','-selectionmode'),
1880
(':hover', '-hover-selectionmode'),
1881
(':checked', '-checked-selectionmode'),
1882
(':checked:hover', '-checked-hover-selectionmode') {
1883
.view.content-view.check#{$s}:not(list) {
1884
-gtk-icon-shadow: $z-depth-1;
1885
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1886
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1887
margin: 8px;
1888
background-color: transparent;
1889
}
1890
}
1891
checkbutton.text-button,
1893
radiobutton.text-button {
1894
// this is for a nice focus on check and radios text
1895
padding: 2px;
1896
outline-offset: 0;
1897
label:not(:only-child) { margin: 0 4px; }
1899
}
1900
check,
1902
radio {
1903
min-height: 24px;
1904
min-width: 24px;
1905
margin: -12px;
1906
padding: 12px;
1907
@extend %button_basic.flat;
1909
@extend %button_basic.image-button;
1911
&:checked, &:checked:disabled { background-color: transparent; }
1913
&:checked, &:indeterminate { color: $accent_bg_color; }
1915
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1917
// &:only-child { margin: -12px; }
1919
row &:not(:checked):not(:indeterminate) {
1921
color: gtkalpha(currentColor, $enabled_opacity);
1922
&:hover, &:active { color: currentColor; }
1924
}
1925
menu menuitem & {
1927
transition: none;
1928
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1929
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1931
&, &:hover, &:disabled {
1933
background-image: none;
1934
// color: inherit;
1935
// animation: none;
1936
}
1937
}
1938
}
1939
%check,
1941
check {
1942
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1943
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1944
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1946
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1947
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1949
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1950
}
1951
%radio,
1953
radio {
1954
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1955
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1956
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1958
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1959
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1961
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1962
border-image: -gtk-gradient(radial,
1964
center center, 0,
1965
center center, 0.001,
1966
to($accent_bg_color),
1967
to(transparent))
1968
24 / 24px;
1969
&:checked {
1971
border-image: -gtk-gradient(radial,
1972
center center, 0,
1973
center center, (10 / 48 / 2),
1974
to($accent_bg_color),
1975
to(transparent))
1976
24 / 24px;
1977
}
1978
&:checked:disabled {
1980
border-image: -gtk-gradient(radial,
1981
center center, 0,
1982
center center, (10 / 48 / 2),
1983
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1984
to(transparent))
1985
24 / 24px;
1986
}
1987
&:indeterminate:checked {
1989
border-image: -gtk-gradient(radial,
1990
center center, 0,
1991
center center, 0.001,
1992
to($accent_bg_color),
1993
to(transparent))
1994
24 / 24px;
1995
}
1996
}
1997
// let's animate things
1999
@keyframes check_check {
2000
from { -gtk-icon-transform: rotate(90deg); }
2001
to { -gtk-icon-transform: unset; }
2002
}
2003
@keyframes check_radio { // FIXME: cannot animate border-image
2005
from {
2006
border-image: -gtk-gradient(radial,
2007
center center, 0,
2008
center center, 0.001,
2009
to($accent_bg_color),
2010
to(transparent))
2011
24 / 24px;
2012
}
2013
to {
2015
border-image: -gtk-gradient(radial,
2016
center center, 0,
2017
center center, (10 / 48 / 2),
2018
to($accent_bg_color),
2019
to(transparent))
2020
24 / 24px;
2021
}
2022
}
2023
@keyframes check_indeterminate {
2025
from { -gtk-icon-transform: unset; }
2026
50% { -gtk-icon-transform: scale(0, 1); }
2027
to { -gtk-icon-transform: unset; }
2028
}
2029
%check_checked,
2031
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
2032
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2034
// %radio_checked,
2036
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
2037
// radio:not(:indeterminate):checked:active { animation: check_radio $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2039
%indeterminate_checked,
2041
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
2042
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2044
// no animations in menus
2046
menu menuitem {
2047
check:not(:indeterminate):checked,
2048
radio:not(:indeterminate):checked,
2049
check:indeterminate:checked,
2050
radio:indeterminate:checked { animation: none; }
2051
}
2052
treeview.view check,
2054
treeview.view radio {
2055
padding: 0;
2056
&:checked:hover, &:selected:checked:hover { background-image: none; }
2058
& {
2060
color: $secondary_fg_color;
2061
&:hover, &:active { color: $fg_color; }
2063
&:disabled { color: $insensitive_secondary_fg_color; }
2065
&:checked, &:indeterminate { color: $accent_bg_color; }
2067
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2069
}
2070
&:selected {
2072
color: $secondary_selected_fg_color;
2073
&:hover, &:active { color: $selected_fg_color; }
2075
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2077
&:checked, &:indeterminate { color: $accent_bg_color; }
2079
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2081
}
2082
}
2083
treeview.view radio:checked {
2085
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2086
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2087
border-image: none;
2088
}
2089
/************
2092
* GtkScale *
2093
************/
2094
scale {
2095
// sizing
2096
$_marks_lenght: 8px;
2097
$_marks_distance: 8px;
2098
min-height: 12px;
2100
min-width: 12px;
2101
padding: 12px;
2102
* { transition: $material_transition; }
2104
// the slider is inside the trough, so to have make it bigger there's a negative margin
2106
slider {
2107
min-height: $small_size;
2108
min-width: $small_size;
2109
margin: -10px;
2110
}
2111
// the backing bit
2113
trough {
2114
outline-offset: 2px;
2115
background-color: $track_color;
2116
&:disabled { color: $insensitive_fg_color; }
2118
}
2119
// the colored part of the backing bit
2121
highlight {
2122
background-color: $accent_bg_color;
2123
&:disabled { background-color: transparent; }
2125
}
2126
// this is another differently styled part of the backing bit, the most relevant use case is for example
2128
// in media player to indicate how much video stream as been cached
2129
fill {
2130
background-color: $track_color;
2131
&:disabled { background-color: transparent; }
2133
}
2134
slider {
2136
transition: all $material_faster $material_ease;
2137
// border-radius: 100%;
2138
// background-color: $accent_bg_color;
2139
background-repeat: no-repeat;
2140
background-position: center;
2141
@each $s,$as in ('',''),
2143
(':disabled','-insensitive') {
2144
&#{$s} {
2145
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2146
background-image: -gtk-scaled(url('#{$_url}.png'),
2147
url('#{$_url}@2.png'));
2148
}
2149
}
2150
background-size: calc(100% - 8px);
2152
&:hover { background-size: calc(100% - 4px); }
2154
&:active { background-size: calc(100% - 0px); }
2156
}
2157
// click-and-hold the slider to activate
2159
&.fine-tune {
2160
// to make the slider shrink in fine-tune mode
2161
slider { background-size: calc(100% - 12px); }
2162
}
2163
value { color: gtkalpha(currentColor, $hint_opacity); }
2165
marks {
2167
color: $track_color;
2168
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2170
(bottom, bottom, top),
2171
(top, left, right),
2172
(bottom, right, left) {
2173
&.#{$marks_class} {
2174
margin-#{$marks_margin}: $_marks_distance;
2175
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2176
}
2177
}
2178
}
2179
&.horizontal {
2181
indicator {
2182
min-height: $_marks_lenght;
2183
min-width: 1px;
2184
}
2185
}
2186
&.vertical {
2188
indicator {
2189
min-height: 1px;
2190
min-width: $_marks_lenght;
2191
}
2192
}
2193
// *WARNING* scale with marks madness following
2195
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2197
$suffix: if($variant == 'light', '', '-dark');
2198
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2200
('vertical', 'vert') {
2201
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2202
('scale-has-marks-below', ':first-child:not(:only-child)') {
2203
@each $state, $state_infix in ('', ''),
2204
(':disabled', '-insensitive') {
2205
&.#{$dir_class} {
2206
%#{$marks_infix}-#{$dir_infix},
2207
contents#{$nth_child} > trough > slider {
2208
&#{$state} {
2209
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2210
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2212
}
2213
@if $dir_class == 'horizontal' {
2215
min-height: 30px;
2216
min-width: $small_size;
2217
@if $marks_infix == 'scale-has-marks-above' {
2219
margin-top: -16px;
2220
background-position: center calc(100% - 4px);
2222
&:hover { background-position: center calc(100% - 2px); }
2224
&:active { background-position: center calc(100% - 0px); }
2226
}
2227
@if $marks_infix == 'scale-has-marks-below' {
2229
margin-bottom: -16px;
2230
background-position: center calc(4px);
2232
&:hover { background-position: center calc(2px); }
2234
&:active { background-position: center calc(0px); }
2236
}
2237
}
2238
@if $dir_class == 'vertical' {
2240
min-height: $small_size;
2241
min-width: 30px;
2242
@if $marks_infix == 'scale-has-marks-above' {
2244
margin-left: -16px;
2245
background-position: calc(4px) center;
2247
&:hover { background-position: calc(2px) center; }
2249
&:active { background-position: calc(0px) center; }
2251
}
2252
@if $marks_infix == 'scale-has-marks-below' {
2254
margin-right: -16px;
2255
background-position: calc(100% - 4px) center;
2257
&:hover { background-position: calc(100% - 2px) center; }
2259
&:active { background-position: calc(100% - 0px) center; }
2261
}
2262
}
2263
}
2264
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2266
&.fine-tune contents#{$nth_child} > trough > slider {
2267
// bigger negative margins to make the trough grow here as well
2268
@if $dir_class == 'horizontal' {
2270
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2271
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2273
}
2274
@if $dir_class == 'vertical' {
2276
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2277
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2279
}
2280
}
2281
}
2282
}
2283
}
2284
}
2285
&.color {
2287
min-height: 0;
2288
min-width: 0;
2289
&.horizontal {
2291
padding: 0 0 12px 0;
2292
trough {
2294
padding-bottom: $bar_size;
2295
}
2296
slider {
2298
@extend %scale-has-marks-above-horz;
2299
margin-bottom: -10px - $bar_size;
2301
margin-top: 0;
2302
}
2303
}
2304
&.vertical {
2306
&:dir(ltr) {
2307
padding: 0 0 0 12px;
2308
trough {
2310
padding-left: $bar_size;
2311
}
2312
slider {
2314
@extend %scale-has-marks-below-vert;
2315
margin-left: -10px - $bar_size;
2317
margin-right: 0;
2318
}
2319
}
2320
&:dir(rtl) {
2322
padding: 0 12px 0 0;
2323
trough {
2325
padding-right: $bar_size;
2326
}
2327
slider {
2329
@extend %scale-has-marks-above-vert;
2330
margin-right: -10px - $bar_size;
2332
margin-left: 0;
2333
}
2334
}
2335
}
2336
&.fine-tune {
2338
&.horizontal {
2339
slider {
2340
@extend %scale-has-marks-above-horz-fine-tune;
2341
}
2342
}
2343
&.vertical {
2345
&:dir(ltr) {
2346
slider {
2347
@extend %scale-has-marks-below-vert-fine-tune;
2348
}
2349
}
2350
&:dir(rtl) {
2352
slider {
2353
@extend %scale-has-marks-above-vert-fine-tune;
2354
}
2355
}
2356
}
2357
}
2358
}
2359
}
2360
/*****************
2363
* Progress bars *
2364
*****************/
2365
progressbar {
2366
// sizing
2367
&.horizontal {
2368
trough,
2369
progress { min-height: $bar_size; }
2370
}
2371
&.vertical {
2373
trough,
2374
progress { min-width: $bar_size; }
2375
}
2376
// FIXME: insensitive state missing and some other state should be set probably
2378
color: $tertiary_fg_color;
2379
font-size: smaller;
2380
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2382
progress { background-color: $selected_bg_color; }
2384
&.osd { // progressbar.osd used for epiphany page loading progress
2386
// min-width: $bar_size;
2387
// min-height: $bar_size;
2388
// background-color: transparent;
2389
// trough { background-color: transparent; }
2391
progress {
2393
}
2394
}
2395
}
2396
/*************
2399
* Level Bar *
2400
*************/
2401
levelbar {
2402
block {
2403
min-width: $medium_size;
2404
min-height: $bar_size;
2405
}
2406
&.vertical block {
2408
min-width: $bar_size;
2409
min-height: $medium_size;
2410
}
2411
trough {
2413
padding: 2px;
2414
border-radius: 2px;
2415
@include entry(normal);
2417
&:disabled { @include entry(insensitive); }
2419
}
2420
&.horizontal.discrete block { margin: 0 1px; }
2422
&.vertical.discrete block { margin: 1px 0; }
2424
&.horizontal.discrete trough { padding: 2px 1px; }
2426
&.vertical.discrete trough { padding: 1px 2px; }
2428
block {
2430
&.low {
2431
background-color: $warning_color;
2432
}
2433
&.high,
2435
&:not(.empty) {
2436
background-color: $selected_bg_color;
2437
}
2438
&.full {
2440
background-color: $success_color;
2441
}
2442
&.empty {
2444
background-color: $track_color;
2445
color: $insensitive_fg_color;
2446
}
2447
}
2448
}
2449
/****************
2452
* Print dialog *
2453
*****************/
2454
printdialog {
2455
paper {
2456
padding: 0;
2457
border: 1px solid $borders_color;
2458
background: $base_color;
2459
color: $fg_color;
2460
}
2461
.dialog-action-box { margin: 12px; }
2463
}
2464
/**********
2467
* Frames *
2468
**********/
2469
frame > border,
2470
.frame {
2471
margin: 0;
2472
padding: 0;
2473
border: 1px solid $borders_color;
2474
border-radius: 0;
2475
box-shadow: none;
2476
&.flat { border-style: none; }
2478
}
2479
actionbar > revealer > box {
2481
padding: $container_padding;
2482
border-top: 1px solid $borders_color;
2483
}
2484
scrolledwindow {
2486
viewport.frame { // avoid double borders when viewport inside scrolled window
2487
border-style: none;
2488
}
2489
// This is used when content is touch-dragged past boundaries.
2491
// draws a box on top of the content, the size changes programmatically.
2492
overshoot {
2493
&.top { @include overshoot(top); }
2494
&.bottom { @include overshoot(bottom); }
2496
&.left { @include overshoot(left); }
2498
&.right { @include overshoot(right); }
2500
}
2501
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2503
undershoot {
2504
&.top { @include undershoot(top); }
2505
&.bottom { @include undershoot(bottom); }
2507
&.left { @include undershoot(left); }
2509
&.right { @include undershoot(right); }
2511
}
2512
junction { // the small square between two scrollbars
2514
border-style: solid none none solid;
2515
border-width: 1px;
2516
border-color: $borders_color;
2517
background-color: $base_color;
2518
&:dir(rtl) { border-style: solid solid none none; }
2520
}
2521
}
2522
//vbox and hbox separators
2524
separator {
2525
min-width: 1px;
2526
min-height: 1px;
2527
background: $borders_color;
2528
}
2529
/*********
2532
* Lists *
2533
*********/
2534
list {
2535
border-color: $borders_color;
2536
background-color: $base_color;
2537
row { padding: 2px; }
2539
}
2540
row {
2542
transition: $material_transition;
2543
&:hover { transition: none; }
2545
&.activatable {
2547
background-image: radial-gradient(circle farthest-corner at center,
2548
gtkalpha(currentColor, 0) 100%,
2549
transparent 0%),
2550
image(gtkalpha(currentColor, 0));
2551
&:hover {
2553
background-image: radial-gradient(circle farthest-corner at center,
2554
gtkalpha(currentColor, 0) 100%,
2555
transparent 0%),
2556
image(gtkalpha(currentColor, 0.05));
2557
}
2558
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2560
&:active {
2561
transition: $material_transition, background-image 0;
2562
animation: row_ripple_effect $material_slower $material_ease_out forwards;
2563
}
2564
}
2565
&:selected { @extend %selected_items; }
2567
}
2568
/*********************
2571
* App Notifications *
2572
*********************/
2573
.app-notification,
2574
.app-notification.frame {
2575
@extend %osd;
2576
@extend toolbar.osd;
2578
margin: 8px;
2580
border { border: none; }
2582
}
2583
/*************
2586
* Expanders *
2587
*************/
2588
expander {
2589
arrow {
2590
transition: all $material_faster $material_ease;
2591
min-width: 16px;
2592
min-height: 16px;
2593
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2594
-gtk-icon-transform: rotate(-90deg);
2595
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2597
&:checked { -gtk-icon-transform: unset; }
2599
color: $secondary_fg_color;
2601
&:hover, &:active { color: $fg_color; }
2603
&:disabled { color: $insensitive_secondary_fg_color; }
2605
&:selected {
2607
color: $secondary_selected_fg_color;
2608
&:hover, &:active { color: $selected_fg_color; }
2610
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2612
}
2613
}
2614
}
2615
/************
2618
* Calendar *
2619
***********/
2620
calendar {
2621
padding: 1px;
2622
border: 1px solid $borders_color;
2623
color: $fg_color;
2624
&:disabled { color: $insensitive_fg_color; }
2626
&:selected {
2628
@extend %selected_items;
2629
border-radius: 2px + 1px;
2631
}
2632
&.header {
2634
border-style: none none solid;
2635
border-radius: 0;
2636
}
2637
&.button { @extend %button_basic.flat; }
2639
&.highlight {
2641
color: gtkalpha(currentColor, $hint_opacity);
2642
font-weight: 500;
2643
}
2644
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2646
}
2647
/***********
2650
* Dialogs *
2651
***********/
2652
messagedialog { // Message Dialog styling
2653
&.background { background-color: $light_color; }
2654
.titlebar {
2656
min-height: $small_size;
2657
border-style: none;
2658
box-shadow: inset 0 1px $highlight_color;
2659
background-color: $light_color;
2660
}
2661
&.csd { // rounded bottom border styling for csd version
2663
&.background {
2664
// bigger radius for better antialiasing
2665
border-bottom-left-radius: 2px;
2666
border-bottom-right-radius: 2px;
2667
}
2668
.dialog-action-area button {
2670
padding: 8px 16px;
2671
border-top: 1px solid $borders_color;
2672
border-radius: 0;
2673
@extend %button_basic.flat;
2675
&:first-child{ border-bottom-left-radius: 2px; }
2677
&:last-child { border-bottom-right-radius: 2px; }
2679
}
2680
}
2681
}
2682
filechooser {
2684
.dialog-action-box { border-top: 1px solid $borders_color; }
2685
#pathbarbox { border-bottom: 1px solid $borders_color; }
2687
}
2688
filechooserbutton:drop(active) {
2690
box-shadow: none;
2691
}
2692
/***********
2695
* Sidebar *
2696
***********/
2697
.sidebar {
2698
border-style: none;
2699
background-color: $light_color;
2700
@at-root %sidebar_left,
2702
&:dir(ltr),
2703
&.left,
2704
&.left:dir(rtl) {
2705
border-right: 1px solid $borders_color;
2706
border-left-style: none;
2707
}
2708
@at-root %sidebar_right
2710
&:dir(rtl),
2711
&.right {
2712
border-left: 1px solid $borders_color;
2713
border-right-style: none;
2714
}
2715
list { background-color: transparent; }
2717
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2719
}
2720
stacksidebar {
2722
&.sidebar {
2723
&:dir(ltr),
2724
&.left,
2725
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2726
&:dir(rtl),
2728
&.right { list { @extend %sidebar_right; }}
2729
}
2730
row {
2732
padding: 10px 4px;
2733
> label {
2735
padding-left: 6px;
2736
padding-right: 6px;
2737
}
2738
&.needs-attention > label { @extend %needs_attention; }
2740
}
2741
}
2742
/****************
2745
* File chooser *
2746
****************/
2747
placessidebar {
2748
> viewport.frame { border-style: none; }
2749
row {
2751
// Needs overriding of the GtkListBoxRow padding
2752
min-height: 32px;
2753
padding: 0;
2754
// Using margins/padding directly in the SidebarRow
2756
// will make the animation of the new bookmark row jump
2757
> revealer { padding: 0 12px; }
2758
&:selected { color: $selected_fg_color; }
2760
&:disabled { color: $insensitive_fg_color; }
2762
image.sidebar-icon {
2764
opacity: $hint_opacity; // dim the device icons
2765
&:dir(ltr) { padding-right: 8px; }
2767
&:dir(rtl) { padding-left: 8px; }
2768
}
2769
label.sidebar-label {
2771
&:dir(ltr) { padding-right: 2px; }
2772
&:dir(rtl) { padding-left: 2px; }
2773
}
2774
@at-root button.sidebar-button {
2776
@extend %button_basic.flat;
2777
min-height: $small_size;
2779
min-width: $small_size;
2780
margin-top: 0;
2781
margin-bottom: 0;
2782
padding: 0;
2783
border-radius: 100%;
2784
-gtk-outline-radius: 100%;
2785
row:selected & { @extend %button_selected.flat; }
2787
}
2788
&.sidebar-placeholder-row {
2790
min-height: 2px;
2791
padding: 0 8px;
2792
background-image: image($accent_bg_color);
2793
background-clip: content-box;
2794
}
2795
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2797
&:drop(active):not(:disabled) {
2799
box-shadow: inset 0 0 0 2px $accent_bg_color;
2800
&:selected {
2802
// background-color: $accent_bg_color;
2803
// color: $selected_fg_color;
2804
}
2805
}
2806
}
2807
}
2808
placesview {
2810
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2811
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2813
// this selects the "connect to server" label
2815
> actionbar > revealer > box > label {
2816
padding-left: 8px;
2817
padding-right: 8px;
2818
}
2819
}
2820
/*********
2823
* Paned *
2824
*********/
2825
paned {
2826
> separator {
2827
min-width: 1px;
2828
min-height: 1px;
2829
-gtk-icon-source: none; // defeats the ugly default handle decoration
2830
border-style: none; // just to be sure
2831
background-color: transparent;
2832
// workaround, using background istead of a border since the border will get rendered twice (?)
2833
background-image: image($borders_color);
2834
background-size: 1px 1px;
2835
&.wide {
2837
min-width: 6px;
2838
min-height: 6px;
2839
background-color: $bg_color;
2840
background-image: image($borders_color), image($borders_color);
2841
background-size: 1px 1px, 1px 1px;
2842
}
2843
}
2844
&.horizontal > separator {
2846
background-repeat: repeat-y;
2847
&:dir(ltr) {
2849
margin: 0 -8px 0 0;
2850
padding: 0 8px 0 0;
2851
background-position: left;
2852
}
2853
&:dir(rtl) {
2855
margin: 0 0 0 -8px;
2856
padding: 0 0 0 8px;
2857
background-position: right;
2858
}
2859
&.wide {
2861
margin: 0;
2862
padding: 0;
2863
background-repeat: repeat-y, repeat-y;
2864
background-position: left, right;
2865
}
2866
}
2867
&.vertical > separator {
2869
margin: 0 0 -8px 0;
2870
padding: 0 0 8px 0;
2871
background-repeat: repeat-x;
2872
background-position: top;
2873
&.wide {
2875
margin: 0;
2876
padding: 0;
2877
background-repeat: repeat-x, repeat-x;
2878
background-position: bottom, top;
2879
}
2880
}
2881
}
2882
/**************
2885
* GtkInfoBar *
2886
**************/
2887
infobar { border-style: none; }
2888
.info { background-color: $info_bg_color; }
2890
.question { background-color: $question_bg_color; }
2892
.warning { background-color: $warning_bg_color; }
2894
.error { background-color: $error_bg_color; }
2896
.info,
2898
.question,
2899
.warning,
2900
.error {
2901
color: $selected_fg_color;
2902
button { @extend %button_selected; }
2904
label:selected {
2906
}
2907
*:link { @extend %link_selected; }
2909
}
2910
/************
2913
* Tooltips *
2914
************/
2915
tooltip {
2916
&.background {
2917
// background-color needs to be set this way otherwise it gets drawn twice
2918
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2919
background-color: scale-alpha($base_color, $higher_opacity);
2920
}
2921
// @extend %osd;
2923
// padding: 4px; /* not working */
2925
border-radius: 2px;
2926
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2927
// FIXME: we need a border or tooltips vanish on black background.
2929
decoration { background-color: transparent; }
2930
label {
2932
min-height: 32px - 6px * 2;
2933
padding: 2px 8px - 6px;
2934
}
2935
* { // Yeah this is ugly
2937
padding: 0;
2938
background-color: transparent;
2939
color: inherit;
2940
}
2941
}
2942
/*****************
2945
* Color Chooser *
2946
*****************/
2947
colorswatch {
2948
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2949
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2950
// applied to the overlay box.
2951
// base color corners rounding
2953
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2954
// sports a bigger radius.
2955
// nth-child is needed by the custom color strip.
2956
&.top {
2958
border-top-left-radius: $material_radius + 0.5px;
2959
border-top-right-radius: $material_radius + 0.5px;
2960
overlay {
2962
border-top-left-radius: $material_radius;
2963
border-top-right-radius: $material_radius;
2964
}
2965
}
2966
&.bottom {
2968
border-bottom-left-radius: $material_radius + 0.5px;
2969
border-bottom-right-radius: $material_radius + 0.5px;
2970
overlay {
2972
border-bottom-left-radius: $material_radius;
2973
border-bottom-right-radius: $material_radius;
2974
}
2975
}
2976
&.left,
2978
&:first-child:not(.top) {
2979
border-top-left-radius: $material_radius + 0.5px;
2980
border-bottom-left-radius: $material_radius + 0.5px;
2981
overlay {
2983
border-top-left-radius: $material_radius;
2984
border-bottom-left-radius: $material_radius;
2985
}
2986
}
2987
&.right,
2989
&:last-child:not(.bottom) {
2990
border-top-right-radius: $material_radius + 0.5px;
2991
border-bottom-right-radius: $material_radius + 0.5px;
2992
overlay {
2994
border-top-right-radius: $material_radius;
2995
border-bottom-right-radius: $material_radius;
2996
}
2997
}
2998
&.dark overlay { color: white; }
3000
&.light overlay { color: scale-alpha(black, 0.8); }
3002
&.dark { color: white; } // for focus ring
3004
&.light { color: scale-alpha(black, 0.8); } // for focus ring
3006
&:drop(active) {
3008
box-shadow: none;
3009
&.light overlay {
3011
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3012
}
3013
&.dark overlay {
3015
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3016
}
3017
}
3018
overlay {
3020
transition: $shadow_transition;
3021
box-shadow: $z-depth-1;
3022
&:hover { box-shadow: $z-depth-2; }
3024
}
3025
&#add-color-button {
3027
border-radius: $material_radius $material_radius 0 0;
3028
color: white; // for focus ring
3029
&:only-child { border-radius: $material_radius; }
3031
overlay {
3033
background-image: linear-gradient(to right,
3034
$error_bg_color 25%,
3035
$warning_bg_color 25%, $warning_bg_color 50%,
3036
$info_bg_color 50%, $info_bg_color 75%,
3037
$question_bg_color 75%);
3038
color: white;
3039
}
3040
}
3041
&:disabled {
3043
opacity: $disabled_opacity;
3044
overlay { box-shadow: none; }
3046
}
3047
row:selected & {
3049
}
3050
&#editor-color-sample {
3052
border-radius: $material_radius + 0.5px;
3053
overlay { border-radius: $material_radius; }
3055
// overlay:hover { box-shadow: $z-depth-1; }
3057
}
3058
}
3059
// colorscale popup
3061
colorchooser .popover.osd {
3062
transition: $shadow_transition;
3063
border-radius: 2px;
3064
box-shadow: $z-depth-2;
3065
background-color: $base_color;
3066
&:backdrop { box-shadow: $z-depth-1; }
3068
spinbutton:not(.vertical) { @extend %entry.flat; }
3070
}
3071
/********
3074
* Misc *
3075
********/
3076
//content view (grid/list)
3077
.content-view {
3078
background-color: $bg_color;
3079
// &:hover { -gtk-icon-effect: highlight; }
3081
rubberband { @extend rubberband; }
3083
}
3084
.scale-popup {
3086
.osd & { @extend %osd; }
3087
.osd & button.flat { //FIXME: quick hack, redo properly
3089
}
3090
button { // +/- buttons on GtkVolumeButton popup
3092
}
3093
}
3094
/**********************
3097
* Window Decorations *
3098
*********************/
3099
decoration {
3100
transition: $shadow_transition;
3101
border-radius: 2px 2px 0 0;
3102
box-shadow: $z-depth-4, 0 16px 16px transparent;
3103
// FIXME rationalize shadows
3105
// this is used for the resize cursor area
3107
margin: 8px;
3108
&:backdrop {
3110
// the transparent shadow here is to enforce that the shadow extents don't
3111
// change when we go to backdrop, to prevent jumping windows.
3112
// The biggest shadow should be in the same order then in the active state
3113
// or the jumping will happen during the transition.
3114
box-shadow: $z-depth-2, 0 16px 16px transparent;
3115
}
3116
.maximized &,
3118
.fullscreen &,
3119
.tiled & { border-radius: 0; }
3120
.popup & { box-shadow: none; }
3122
// server-side decorations as used by mutter
3124
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3125
.csd.popup & {
3127
border-radius: 2px;
3128
box-shadow: $z-depth-2;
3129
}
3130
tooltip.csd & {
3132
border-radius: 2px;
3133
box-shadow: $z-depth-2;
3134
}
3135
messagedialog.csd & {
3137
border-radius: 2px;
3138
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3139
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3141
}
3142
.solid-csd & {
3144
margin: 0;
3145
padding: 4px;
3146
// border: solid 1px $borders_color;
3147
border-radius: 0;
3148
box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $secondary_highlight_color;
3149
background-color: $borders_color;
3150
}
3151
}
3152
// Window Close button
3154
button.titlebutton {
3155
// @extend %button_basic.flat;
3156
@extend %button_basic.image-button;
3158
.selection-mode & {
3160
}
3161
}
3162
// catch all extend :)
3165
%selected_items {
3167
background-color: $selected_bg_color;
3168
@at-root %nobg_selected_items, & {
3170
color: $selected_fg_color;
3171
&:disabled { color: $insensitive_selected_fg_color; }
3173
}
3174
}
3175
.monospace { font-family: monospace; }
3177
/**********************
3180
* Touch Copy & Paste *
3181
*********************/
3182
//touch selection handlebars for the Popover.osd above
3183
cursor-handle {
3184
border-radius: 100px;
3185
background-color: $accent_bg_color;
3186
background-image: none;
3187
&.top:dir(ltr), &.bottom:dir(rtl) {
3189
padding-left: 6px;
3190
border-top-right-radius: 0;
3191
}
3192
&.bottom:dir(ltr), &.top:dir(rtl) {
3194
padding-right: 6px;
3195
border-top-left-radius: 0;
3196
}
3197
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3199
-GtkWidget-text-handle-width: 24;
3200
-GtkWidget-text-handle-height: 30;
3201
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3203
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3204
url('#{$_url}@2.png'));
3205
}
3206
}
3207
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3209
button.circular { // FIXME: aggregate to buttons
3211
border-radius: 100px;
3212
-gtk-outline-radius: 100px;
3213
label { padding: 0; }
3215
}
3216
// shortcut window keys
3218
.keycap {
3219
min-width: 28px - 8px * 2;
3220
min-height: 28px - 2px;
3221
margin-top: 2px;
3222
padding-bottom: 2px;
3223
padding-left: 8px;
3224
padding-right: 8px;
3225
border: solid 1px $borders_color;
3227
border-radius: 2px + 1px;
3228
box-shadow: inset 0 -2px $borders_color;
3229
background-color: $base_color;
3230
color: $fg_color;
3231
font-size: smaller;
3232
}
3233
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3235
transition: $material_transition;
3236
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3237
caret-color: $accent_bg_color;
3238
}
3239
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3241
stackswitcher button.circular,
3243
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3244
min-width: $medium_size;
3245
min-height: $medium_size;
3246
padding: 0;
3247
}
3248