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
background-image: image($borders_color); // HACK: the border node just draws background so, using a background-image to draw the border
136
background-repeat: no-repeat;
137
color: $tertiary_fg_color;
138
&.bottom {
140
background-size: 100% 1px;
141
background-position: top;
142
}
143
&.top {
145
background-size: 100% 1px;
146
background-position: bottom;
147
}
148
&.left {
150
background-size: 1px 100%;
151
background-position: right;
152
}
153
&.right {
155
background-size: 1px 100%;
156
background-position: left;
157
}
158
}
159
iconview { @extend .view; }
161
.rubberband,
163
rubberband {
164
border: 1px solid $secondary_selected_bg_color;
165
background-color: scale-alpha($secondary_selected_bg_color, $lower_opacity);
166
}
167
flowbox {
169
rubberband { @extend rubberband; }
170
flowboxchild {
172
outline-offset: -2px;
173
padding: 4px;
174
border-radius: 2px;
175
&:selected { @extend %selected_items; }
177
}
178
}
179
label {
181
&.separator {
182
@extend .dim-label;
183
color: $fg_color;
185
}
186
row:selected &,
188
&:selected { @extend %nobg_selected_items; }
189
selection {
191
background-color: $selected_bg_color;
192
color: $selected_fg_color;
193
}
194
&:disabled {
196
color: $insensitive_fg_color;
197
selection { @extend %selected_items:disabled; }
199
}
200
}
201
.dim-label { opacity: $hint_opacity; }
203
assistant {
205
.sidebar {
206
padding: 4px 0;
207
// background-color: $base_color;
208
// border-top: 1px solid $borders_color;
209
}
210
// &.csd .sidebar { border-top-style: none; }
212
.sidebar label {
214
min-height: $medium_size;
215
padding: 0 12px;
216
color: $tertiary_fg_color;
217
font-weight: 500;
218
&.highlight { color: $fg_color; }
220
}
221
}
222
%osd, .osd { opacity: $higher_opacity; }
224
/*********************
227
* Spinner Animation *
228
*********************/
229
@keyframes spin {
230
to { -gtk-icon-transform: rotate(1turn); }
231
}
232
@keyframes spin_colors {
234
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
235
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
236
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
237
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
238
}
239
spinner {
241
background: none;
242
opacity: 0; // non spinning spinner makes no sense
243
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
244
&:checked {
246
opacity: 1;
247
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
248
&:disabled { opacity: $disabled_opacity; }
250
}
251
}
252
/****************
255
* Text Entries *
256
****************/
257
%entry,
258
entry {
259
%entry_basic, & {
260
min-height: $medium_size;
261
padding: 0 8px;
262
border-radius: 2px;
263
@include entry(normal);
265
&:focus { @include entry(focus); }
267
&:disabled { @include entry(insensitive); }
269
&.flat {
271
border-radius: 0;
272
@include entry(flat-normal);
274
&:focus { @include entry(flat-focus); }
276
&:disabled { @include entry(flat-insensitive); }
278
}
279
image { // icons inside the entry
281
color: gtkalpha(currentColor, $enabled_opacity);
282
&:hover, &:active { color: currentColor; }
284
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
286
&.left { padding-left: 2px; padding-right: 6px; }
288
&.right { padding-left: 6px; padding-right: 2px; }
290
}
291
undershoot {
293
&.left { @include undershoot(left); }
294
&.right { @include undershoot(right); }
296
}
297
selection { @extend %selected_items; }
299
// entry error and warning style
301
@each $e_type, $e_color in (error, $error_color),
302
(warning, $warning_color) {
303
&.#{$e_type} {
304
@include entry(normal, $e_color);
305
&:focus { @include entry(focus, $e_color); }
307
&:disabled { @include entry(insensitive, $e_color); }
309
&.flat {
311
@include entry(flat-normal, $e_color);
312
&:focus { @include entry(flat-focus, $e_color); }
314
&:disabled { @include entry(flat-insensitive, $e_color); }
316
}
317
}
318
}
319
&:drop(active) {
321
// box-shadow: inset 0 0 0 2px $accent_bg_color;
322
}
323
.osd & {
325
}
326
}
327
progress {
329
margin: 2px -6px;
330
border-style: none none solid;
331
border-width: 2px;
332
border-color: $selected_bg_color;
333
// border-radius: 0;
334
// box-shadow: none;
335
background-color: transparent;
336
// background-image: none;
337
}
338
// linked entries
340
.linked:not(.vertical) > &:not(.flat) { @extend %linked; }
341
// Vertically linked entries
343
.linked.vertical > &:not(.flat) { @extend %linked_vertical; }
344
}
345
treeview entry {
347
&.flat, & {
348
min-height: 0;
349
padding: 2px;
350
border-radius: 0;
351
background-color: $base_color;
352
&, &:focus {
354
border-image: none;
355
box-shadow: none;
356
}
357
}
358
}
359
/***********
362
* Buttons *
363
***********/
364
// stuff for .needs-attention
365
@keyframes needs_attention {
366
from {
367
background-image: -gtk-gradient(radial,
368
center center, 0,
369
center center, 0.001,
370
to($accent_bg_color),
371
to(transparent));
372
}
373
to {
375
background-image: -gtk-gradient(radial,
376
center center, 0,
377
center center, 0.5,
378
to($accent_bg_color),
379
to(transparent));
380
}
381
}
382
%button,
384
button {
385
@at-root %button_basic, & {
386
min-height: 24px;
387
min-width: 16px;
388
padding: 6px 10px;
389
border-radius: 2px;
390
font-weight: 500;
391
@include button(normal);
393
&:hover { @include button(hover); }
395
&:active { @include button(active); }
397
&:disabled { @include button(insensitive); }
399
&:checked { @include button(checked); }
401
&:checked:disabled { @include button(checked-insensitive); }
403
&.flat {
405
@include button(flat-normal);
406
&:hover { @include button(flat-hover); }
408
&:active { @include button(flat-active); }
410
&:disabled { @include button(flat-insensitive); }
412
&:checked { @include button(flat-checked); }
414
&:checked:disabled { @include button(flat-checked-insensitive); }
416
}
417
&.image-button {
419
min-width: 24px;
420
padding: 6px;
421
-gtk-outline-radius: 100px;
422
border-radius: 100px;
423
}
424
&.text-button {
426
padding-left: 16px;
427
padding-right: 16px;
428
}
429
&.text-button.image-button {
431
padding-left: 10px;
432
padding-right: 10px;
433
-gtk-outline-radius: 2px;
434
border-radius: 2px;
435
label {
437
&:last-child { padding-left: 2px; padding-right: 6px; }
438
&:first-child { padding-left: 6px; padding-right: 2px; }
439
}
440
}
441
.linked > & { @extend %linked; }
443
.linked.vertical > & { @extend %linked_vertical; }
445
.linked > &.flat,
447
.linked.vertical > &.flat {
448
border-radius: 2px;
449
&.image-button {
451
-gtk-outline-radius: 100px;
452
border-radius: 100px;
453
}
454
&.text-button.image-button {
456
-gtk-outline-radius: 2px;
457
border-radius: 2px;
458
}
459
}
460
&:drop(active) {
462
// box-shadow: inset 0 0 0 2px $accent_bg_color;
463
}
464
}
465
@at-root %button_selected, row:selected & {
467
&:disabled { color: $insensitive_secondary_selected_fg_color; }
468
&.flat {
470
color: $secondary_selected_fg_color;
471
&:hover, &:active { color: $selected_fg_color; }
473
&:disabled { color: $insensitive_secondary_selected_fg_color; }
475
}
476
}
477
// big standalone buttons like in Documents pager
479
&.osd {
480
padding: 12px 16px;
481
&.image-button { padding: 12px; }
483
&:disabled { opacity: 0; }
485
}
486
//overlay / OSD style
488
@at-root %osd_button,
489
.osd & {
490
}
491
// Suggested and Destructive Action buttons
493
@each $b_type, $b_color in (suggested-action, $suggested_color),
494
(destructive-action, $destructive_color) {
495
&.#{$b_type} {
496
background-color: $b_color;
497
color: $selected_fg_color;
498
// @include button(normal, $b_color, white);
500
// &:hover { @include button(hover, $b_color, white); }
502
// &:active, &:checked { @include button(active, $b_color, white); }
504
&:disabled { @include button(insensitive, $b_color, white); }
506
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
508
&.flat {
510
background-color: transparent;
511
color: $b_color;
512
// @include button(flat-normal, $b_color, white);
514
// &:hover { @include button(flat-hover, $b_color, white); }
516
// &:active, &:checked { @include button(flat-active, $b_color, white); }
518
&:disabled { @include button(flat-insensitive, $b_color, white); }
520
}
521
.osd & {
523
}
524
}
525
}
526
.stack-switcher > & {
528
// to position the needs attention dot, padding is added to the button
529
// child, a label needs just lateral padding while an icon needs vertical
530
// padding added too.
531
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
533
> label {
535
padding-left: 6px; // label padding
536
padding-right: 6px; //
537
}
538
> image {
540
padding-left: 6px; // image padding
541
padding-right: 6px; //
542
padding-top: 3px; //
543
padding-bottom: 3px; //
544
}
545
&.text-button {
547
// compensate text-button paddings
548
padding-left: 10px;
549
padding-right: 10px;
550
}
551
&.image-button {
553
// we want image buttons to have a 1:1 aspect ratio, so compensation
554
// of the padding added to the GtkImage is needed
555
padding-left: 4px;
556
padding-right: 4px;
557
}
558
&.needs-attention {
560
> label,
561
> image { @extend %needs_attention; }
562
&:checked {
564
> label,
565
> image {
566
animation: none;
567
background-image: none;
568
}
569
}
570
}
571
}
572
// hide separators
574
separator {
575
min-width: 0;
576
min-height: 0;
577
background: transparent;
578
}
579
// &.font,
581
// &.file { separator { background-color: transparent; }}
582
// &.font { > box > box > label { font-weight: bold; }}
584
// inline-toolbar buttons
586
.inline-toolbar & {
587
@extend %button_basic.flat;
588
&:not(.text-button) { @extend %button_basic.image-button; }
590
}
591
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
593
}
594
%needs_attention {
596
animation: needs_attention $material_slower $material_ease_out forwards;
597
background-repeat: no-repeat;
598
background-position: right 3px;
599
background-size: 6px 6px;
600
&:dir(rtl) { background-position: left 3px; }
602
}
603
// all the following is for the +|- buttons on inline toolbars, that way
605
// should really be deprecated...
606
.inline-toolbar toolbutton > button { // redefining the button look is
607
// needed since those are flat...
608
}
609
// More inline toolbar buttons
611
toolbar.inline-toolbar toolbutton {
612
// > button.flat { @extend %linked_middle; }
613
// &:first-child > button.flat { @extend %linked:first-child; }
615
// &:last-child > button.flat { @extend %linked:last-child; }
617
// &:only-child > button.flat { @extend %linked:only-child; }
619
}
620
%linked_middle {
622
border-radius: 0;
623
}
624
%linked {
626
-gtk-outline-radius: 2px;
627
@extend %linked_middle;
629
&:first-child {
631
border-top-left-radius: 2px;
632
border-bottom-left-radius: 2px;
633
}
634
&:last-child {
636
border-top-right-radius: 2px;
637
border-bottom-right-radius: 2px;
638
}
639
&:only-child {
641
border-radius: 2px;
642
}
643
}
644
%linked_vertical_middle {
646
border-radius: 0;
647
}
648
%linked_vertical{
650
-gtk-outline-radius: 2px;
651
@extend %linked_vertical_middle;
653
&:first-child {
655
border-top-left-radius: 2px;
656
border-top-right-radius: 2px;
657
}
658
&:last-child {
660
border-bottom-left-radius: 2px;
661
border-bottom-right-radius: 2px;
662
}
663
&:only-child {
665
border-radius: 2px;
666
}
667
}
668
/* menu buttons */
670
modelbutton.flat,
671
.menuitem.button.flat {
672
min-height: $menuitem_size;
673
padding-left: 8px;
674
padding-right: 8px;
675
border-radius: 2px;
676
color: inherit;
677
@extend %button_basic.flat;
679
&:selected { @extend %selected_items; }
681
check,
683
radio {
684
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
685
&, &:hover { background-image: none; }
687
&:active { animation: none; }
689
&:last-child { margin-left: -8px; margin-right: -16px; }
691
&:first-child { margin-left: -16px; margin-right: -8px; }
693
}
694
check:not(:indeterminate):checked { @extend %check_checked; }
696
// radio:not(:indeterminate):checked { @extend %radio_checked; }
698
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
700
}
701
modelbutton.flat arrow {
703
background: none;
704
&:hover { background: none; }
706
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
708
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
710
}
711
button.color {
713
min-height: $small_size;
714
min-width: $small_size;
715
padding: $container_padding;
716
colorswatch:only-child {
718
// &, overlay { border-radius: 0; }
719
}
720
}
721
/*********
724
* Links *
725
*********/
726
*:link {
727
&, &:hover, &:active { color: $link_color; }
728
&:visited {
730
&, &:hover, &:active { color: $link_visited_color; }
731
}
732
@at-root %link_selected,
734
&:selected,
735
*:selected & { color: $selected_fg_color; }
736
}
737
button:link,
739
button:visited {
740
@extend *:link;
741
> label { text-decoration-line: underline; }
743
}
744
/*****************
746
* GtkSpinButton *
747
*****************/
748
spinbutton {
749
&:not(.vertical) {
750
// in this horizontal configuration, the whole spinbutton
751
// behaves as the entry, so we extend the entry styling
752
// and nuke the style on the internal entry
753
@extend %entry;
754
padding: 0;
756
%spinbutton_entry,
758
entry {
759
min-width: $large_size - 16px;
760
// reset all the other props since the spinbutton node is styled here
761
margin: 0;
762
border-image: none;
763
border-radius: 0;
764
box-shadow: none;
765
background-color: transparent;
766
}
767
button {
769
min-height: $small_size;
770
min-width: $small_size;
771
// margin: $container_padding;
772
padding: 0;
773
border: solid $container_padding transparent;
774
@extend %button_basic.flat;
776
@extend %button_basic.image-button;
778
&.up { margin-left: -$container_padding / 2; }
780
&.down { margin-right: -$container_padding / 2; }
782
}
783
}
784
// OSD horizontal
786
.osd &:not(.vertical) {
787
button {
788
}
789
}
790
// Vertical
792
&.vertical {
793
// in the vertical configuration, we treat the spinbutton
794
// as a box, and tweak the style of the entry in the middle
795
// so that it's linked
796
// FIXME: this should not be set at all, but otherwise it gets the wrong
798
// color
799
&:disabled { color: $insensitive_fg_color; }
800
&:drop(active) {
802
box-shadow: none;
803
}
804
entry {
806
min-height: $medium_size;
807
min-width: $large_size;
808
padding: 0;
809
}
810
button {
812
min-height: $medium_size;
813
min-width: $large_size;
814
padding: 0;
815
@extend %button_basic.flat;
817
&.up { border-radius: 2px 2px 0 0; }
819
&.down { border-radius: 0 0 2px 2px; }
821
}
822
}
823
// OSD vertical
825
.osd &.vertical button:first-child {
826
}
827
// Misc
829
treeview &:not(.vertical) {
830
min-height: 0;
831
border-style: none;
832
border-radius: 0;
833
entry {
835
min-height: 0;
836
padding: 1px 2px;
837
}
838
}
839
}
840
/**************
843
* ComboBoxes *
844
**************/
845
combobox {
846
arrow {
847
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
848
min-height: 16px;
849
min-width: 16px;
850
}
851
menu,
853
.menu {
854
padding: 2px 0;
855
menuitem {
857
min-height: $medium_size;
858
padding: 0 10px;
859
}
860
}
861
&.linked {
863
button:nth-child(2) {
864
&:dir(ltr) { @extend %linked:last-child; }
865
&:dir(rtl) { @extend %linked:first-child; }
866
}
867
}
868
&:drop(active) { // FIXME: untested
870
box-shadow: none;
871
// button.combo { @extend %button_basic:drop(active); }
873
}
874
}
875
.linked > combobox > box > button.combo {
877
// the combo is a composite widget so the way we do button linking doesn't
878
// work, special case needed. See
879
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
880
&:dir(ltr),
882
&:dir(rtl) { @extend %linked_middle; } // specificity bump
883
}
884
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
886
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
887
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
888
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
890
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
891
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
892
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
893
/************
896
* Toolbars *
897
************/
898
toolbar {
899
-GtkWidget-window-dragging: true;
900
padding: $container_padding / 2;
901
background-color: $bg_color;
902
// on OSD
904
.osd & { background-color: transparent; }
905
// stand-alone OSD toolbars
907
&.osd {
908
transition: $shadow_transition;
909
padding: $container_padding;
910
border-radius: 2px;
911
box-shadow: $z-depth-2;
912
background-color: $base_color;
913
&:backdrop { box-shadow: $z-depth-1; }
915
&.left,
917
&.right,
918
&.top,
919
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
920
button { @extend %button_basic.flat; }
922
}
923
// toolbar separators
925
&.horizontal separator { margin: $container_padding / 2; }
926
&.vertical separator { margin: $container_padding / 2; }
927
&:not(.inline-toolbar):not(.osd) {
929
scale,
930
entry,
931
spinbutton,
932
button { margin: $container_padding / 2; }
933
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
935
}
936
}
937
//searchbar, location-bar & inline-toolbar
939
.inline-toolbar {
940
padding: $container_padding;
941
border-style: solid;
942
border-width: 0 1px 1px;
943
border-color: $borders_color;
944
background-color: $secondary_base_color;
945
}
946
searchbar,
948
.location-bar {
949
padding: $container_padding;
950
border-style: solid;
951
border-width: 0 0 1px;
952
border-color: $borders_color;
953
background-color: $bg_color;
954
background-clip: border-box;
955
}
956
/***************
959
* Header bars *
960
***************/
961
%titlebar,
962
headerbar {
963
transition: background-color $material_faster $material_ease_out, color $material_faster $material_ease_out;
964
min-height: $large_size;
965
padding: 0 $container_padding;
966
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
967
background-color: $headerbar_color;
968
color: $selected_fg_color;
969
&:backdrop {
971
color: $secondary_selected_fg_color;
972
}
973
.title {
975
padding-left: 12px;
976
padding-right: 12px;
977
font-weight: bold;
978
}
979
.subtitle {
981
padding-left: 12px;
982
padding-right: 12px;
983
font-size: smaller;
984
@extend .dim-label;
986
}
987
button:not(.suggested-action):not(.destructive-action) {
989
@extend %button_basic.flat;
990
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
992
currentColor 0%,
993
transparent 0%)
994
0 0 0 / 0 0 0px;
995
color: gtkalpha(currentColor, $enabled_opacity);
996
&:hover, &:active { color: currentColor; }
998
&:disabled {
1000
color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity);
1001
> label { color: inherit; }
1003
}
1004
&:checked {
1006
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1007
currentColor 100%,
1008
transparent 0%)
1009
0 0 2 / 0 0 2px;
1010
background-color: transparent;
1011
color: currentColor;
1012
&:disabled {
1014
background-color: transparent;
1015
color: gtkalpha(currentColor, $disabled_opacity);
1016
> label { color: inherit; }
1018
}
1019
}
1020
}
1021
button.suggested-action, button.destructive-action {
1023
&:disabled {
1024
color: gtkalpha(currentColor, $disabled_opacity);
1025
> label { color: inherit; }
1027
}
1028
}
1029
&.selection-mode {
1031
transition: background-color 0 $material_slower, color $material_faster $material_ease_out;
1032
animation: header_ripple_effect $material_slower $material_ease_out;
1033
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1034
background-color: $selected_bg_color;
1035
color: $selected_fg_color;
1036
&:backdrop {
1038
color: $secondary_selected_fg_color;
1039
}
1040
.subtitle:link { @extend *:link:selected; }
1042
button:not(.suggested-action):not(.destructive-action) {
1044
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1045
currentColor 0%,
1046
transparent 0%)
1047
0 0 0 / 0 0 0px;
1048
// color: gtkalpha(currentColor, $enabled_opacity);
1049
&, &:hover, &:active { color: currentColor; }
1051
&:disabled {
1053
color: gtkalpha(currentColor, $disabled_opacity);
1054
> label { color: inherit; }
1056
}
1057
&:checked {
1059
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1060
currentColor 100%,
1061
transparent 0%)
1062
0 0 2 / 0 0 2px;
1063
color: currentColor;
1064
&:disabled {
1066
color: gtkalpha(currentColor, $disabled_opacity);
1067
> label { color: inherit; }
1069
}
1070
}
1071
}
1072
.selection-menu {
1074
padding-left: 16px;
1075
padding-right: 16px;
1076
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1078
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1080
}
1081
}
1082
.fullscreen &,
1084
.tiled &,
1085
.maximized & {
1086
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1087
box-shadow: $z-depth-1;
1088
}
1089
&.default-decoration {
1091
min-height: $small_size;
1092
padding: $container_padding;
1093
border-width: 0;
1094
button.titlebutton {
1096
min-height: $small_size;
1097
min-width: $small_size;
1098
margin: 0;
1099
padding: 0;
1100
&:active { // add fallback
1102
background-image: radial-gradient(circle farthest-corner at center,
1103
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1104
transparent 0%),
1105
image(gtkalpha(currentColor, $lower_opacity / 2));
1106
}
1107
}
1108
}
1109
.solid-csd & {
1111
&:dir(rtl), &:dir(ltr) { // specificity bump
1112
margin-left: -1px;
1113
margin-right: -1px;
1114
margin-top: -1px;
1115
border-radius: 0;
1116
box-shadow: none;
1117
}
1118
}
1119
}
1120
headerbar {
1122
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1123
entry,
1124
spinbutton,
1125
// separator,
1126
button {
1127
margin-top: $container_padding;
1128
margin-bottom: $container_padding;
1129
}
1130
switch {
1132
margin-top: $container_padding * 2;
1133
margin-bottom: $container_padding * 2;
1134
}
1135
}
1136
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1138
border-top-left-radius: 2px;
1139
border-top-right-radius: 2px;
1140
}
1141
headerbar {
1143
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1144
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1145
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1147
}
1148
.titlebar:not(headerbar) {
1150
window.csd > & {
1151
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1152
padding: 0;
1153
background-color: transparent;
1154
background-image: none;
1155
border-style: none;
1156
box-shadow: none;
1157
}
1158
> separator {
1160
background-color: $headerbar_color;
1161
background-image: image($borders_color);
1162
}
1163
@extend %titlebar;
1165
}
1166
/************
1169
* Pathbars *
1170
************/
1171
.path-bar button {
1172
&.text-button, &.image-button, & {
1173
padding-left: 6px;
1174
padding-right: 6px;
1175
}
1176
&.text-button.image-button, & {
1178
// label:last-child { padding-left: 2px; padding-right: 8px; }
1179
// label:first-child { padding-left: 8px; padding-right: 2px; }
1180
}
1181
image {
1183
padding-left: 4px;
1184
padding-right: 4px;
1185
}
1186
&.slider-button {
1188
padding-left: 0;
1189
padding-right: 0;
1190
}
1191
}
1192
/**************
1195
* Tree Views *
1196
**************/
1197
treeview.view {
1198
@at-root * {
1199
-GtkTreeView-horizontal-separator: 4;
1200
-GtkTreeView-grid-line-width: 1;
1201
-GtkTreeView-grid-line-pattern: '';
1202
-GtkTreeView-tree-line-width: 1;
1203
-GtkTreeView-tree-line-pattern: '';
1204
-GtkTreeView-expander-size: 16;
1205
}
1206
border-left-color: $track_color; // this is actually the tree lines color,
1208
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1209
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1211
&:hover, &:active, &:selected { border-radius: 0; }
1213
&.separator {
1215
min-height: 1px + 2px * 2;
1216
color: $borders_color;
1217
}
1218
&:drop(active) {
1220
border-style: solid none;
1221
border-width: 1px;
1222
border-color: $accent_bg_color;
1223
&.after { border-top-style: none; }
1225
&.before { border-bottom-style: none; }
1227
}
1228
&.expander {
1230
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1231
-gtk-icon-transform: rotate(-90deg);
1232
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1234
&:checked { -gtk-icon-transform: unset; }
1236
color: $secondary_fg_color;
1238
&:hover, &:active { color: $fg_color; }
1240
&:disabled { color: $insensitive_secondary_fg_color; }
1242
&:selected {
1244
color: $secondary_selected_fg_color;
1245
&:hover, &:active { color: $selected_fg_color; }
1247
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1249
}
1250
}
1251
&.progressbar { // progress bar in treeviews
1253
border-style: none none solid;
1254
border-width: $bar_size;
1255
border-color: $selected_bg_color;
1256
background-color: transparent;
1257
background-image: none;
1258
&:selected { border-color: currentColor; }
1260
}
1261
&.trough { // progress bar trough in treeviews
1263
border-style: none none solid;
1264
border-width: $bar_size;
1265
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1266
background-color: transparent;
1267
background-image: none;
1268
&:selected { border-color: $track_color; }
1270
}
1271
header {
1273
button {
1274
@extend row.activatable;
1275
padding: 2px 6px;
1277
border-style: none solid solid none;
1278
border-width: 1px;
1279
border-color: $borders_color;
1280
border-radius: 0;
1281
background-clip: border-box;
1282
&, &:hover, &:active { box-shadow: none; }
1284
&, &:disabled { background-color: $base_color; }
1286
&:last-child { border-right-style: none; }
1288
}
1289
}
1290
button.dnd,
1292
header.button.dnd { // for treeview-like derive widgets
1293
padding: 2px 6px;
1294
border-style: none solid solid;
1295
border-width: 1px;
1296
border-color: $borders_color;
1297
border-radius: 0;
1298
box-shadow: none;
1299
background-color: $base_color;
1300
background-clip: border-box;
1301
color: $selected_bg_color;
1302
}
1303
acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
1305
}
1306
/*********
1309
* Menus *
1310
*********/
1311
menubar,
1312
.menubar {
1313
-GtkWidget-window-dragging: true;
1314
padding: 0;
1315
// box-shadow: inset 0 -1px $borders_color;
1316
background-color: $headerbar_color;
1317
> menuitem {
1319
transition: background-color $material_faster $material_ease_out;
1320
min-height: 20px;
1321
padding: 4px 8px;
1322
color: $secondary_selected_fg_color;
1323
&:hover { //Seems like it :hover even with keyboard focus
1325
transition: none;
1326
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1327
color: $selected_fg_color;
1328
}
1329
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1331
}
1332
}
1333
menu,
1335
.menu {
1336
margin: 4px 0;
1337
padding: 4px 0;
1338
background-color: $base_color;
1339
border: 1px solid $borders_color; // adds borders in a non composited env
1340
.csd & {
1342
border: none; // axes borders in a composited env
1343
border-radius: 2px;
1344
}
1345
menuitem {
1347
transition: background-color $material_faster $material_ease_out;
1348
min-height: 20px;
1349
min-width: 40px;
1350
padding: 4px 8px;
1351
font: initial;
1352
text-shadow: none;
1353
&:hover {
1355
transition: none;
1356
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1357
}
1358
&:disabled { color: $insensitive_fg_color; }
1360
// submenu indicators
1362
arrow {
1363
min-height: 16px;
1364
min-width: 16px;
1365
&:dir(ltr) {
1367
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1368
margin-left: 8px;
1369
}
1370
&:dir(rtl) {
1372
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1373
margin-right: 8px;
1374
}
1375
}
1376
}
1377
// overflow arrows
1379
> arrow {
1380
min-height: 16px;
1381
min-width: 16px;
1382
padding: 4px;
1383
border-radius: 0;
1384
background-color: $base_color;
1385
color: $secondary_fg_color;
1386
&.top {
1388
margin-top: -4px;
1389
border-bottom: 1px solid $borders_color;
1390
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1391
}
1392
&.bottom {
1394
margin-bottom: -4px;
1395
border-top: 1px solid $borders_color;
1396
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1397
}
1398
&:hover {
1400
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1401
color: $fg_color;
1402
}
1403
&:disabled {
1405
border-color: transparent;
1406
background-color: transparent;
1407
color: transparent;
1408
// color: $insensitive_secondary_fg_color;
1409
}
1410
}
1411
separator { margin: 4px 0; }
1413
}
1414
menuitem {
1416
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1417
check,
1419
radio {
1420
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1421
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1422
}
1423
}
1424
.csd.popup { border-radius: 2px; }
1426
/***************
1429
* Popovers *
1430
***************/
1431
popover.background {
1432
transition: $shadow_transition;
1433
padding: 0;
1434
box-shadow: $z-depth-2;
1435
background-color: $light_color;
1436
&:backdrop { box-shadow: $z-depth-1; }
1438
&, .csd & {
1440
border-style: solid;
1441
border-width: 1px;
1442
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1443
border-radius: 2px + 1px;
1444
}
1445
> list,
1447
> .view,
1448
> toolbar {
1449
border-style: none;
1450
box-shadow: none;
1451
background-color: transparent;
1452
}
1453
&, .csd & {
1455
&.touch-selection,
1456
&.magnifier,
1457
&.osd { @extend %osd; }
1458
}
1459
separator { margin: 4px 0; }
1461
list separator { margin: 0; }
1463
}
1464
/*************
1466
* Notebooks *
1467
*************/
1468
notebook {
1469
> header {
1470
border-width: 1px;
1471
border-color: $borders_color;
1472
background-color: $bg_color;
1473
background-clip: border-box;
1474
&.top {
1476
border-bottom-style: solid;
1477
> tabs {
1478
margin-bottom: -1px;
1479
> tab {
1480
&:hover { box-shadow: inset 0 -2px $track_color; }
1482
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1484
}
1485
}
1486
}
1487
&.bottom {
1489
border-top-style: solid;
1490
> tabs {
1491
margin-top: -1px;
1492
> tab {
1493
&:hover { box-shadow: inset 0 2px $track_color; }
1495
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1497
}
1498
}
1499
}
1500
&.left {
1502
border-right-style: solid;
1503
> tabs {
1504
margin-right: -1px;
1505
> tab {
1506
&:hover { box-shadow: inset -2px 0 $track_color; }
1508
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1510
}
1511
}
1512
}
1513
&.right {
1515
border-left-style: solid;
1516
> tabs {
1517
margin-left: -1px;
1518
> tab {
1519
&:hover { box-shadow: inset 2px 0 $track_color; }
1521
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1523
}
1524
}
1525
}
1526
&.top > tabs > arrow {
1528
@extend %notebook_vert_arrows;
1529
border-top-style: none;
1531
}
1532
&.bottom > tabs > arrow {
1534
@extend %notebook_vert_arrows;
1535
border-bottom-style: none;
1537
}
1538
@at-root %notebook_vert_arrows {
1540
padding-left: 4px;
1541
padding-right: 4px;
1542
&.down {
1544
margin-left: -8px;
1545
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1546
}
1547
&.up {
1549
margin-right: -8px;
1550
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1551
}
1552
}
1553
&.left > tabs > arrow {
1555
@extend %notebook_horz_arrows;
1556
border-left-style: none;
1558
}
1559
&.right > tabs > arrow {
1561
@extend %notebook_horz_arrows;
1562
border-right-style: none;
1564
}
1565
@at-root %notebook_horz_arrows {
1567
padding-top: 4px;
1568
padding-bottom: 4px;
1569
&.down {
1571
margin-top: -8px;
1572
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1573
}
1574
&.up {
1576
margin-bottom: -8px;
1577
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1578
}
1579
}
1580
> tabs > arrow {
1582
@extend %button_basic.flat;
1583
min-height: 16px;
1585
min-width: 16px;
1586
border-radius: 0;
1587
}
1588
tab {
1590
transition: $material_transition;
1591
min-height: 24px;
1592
min-width: 24px;
1593
padding: 6px 12px;
1594
outline-offset: -6px;
1596
border-width: 1px; // for reorderable tabs
1598
border-color: transparent; //
1599
color: $secondary_fg_color;
1601
font-weight: 500;
1602
&:hover {
1604
color: $fg_color;
1605
&.reorderable-page {
1607
border-color: $borders_color;
1608
background-color: $secondary_base_color;
1609
}
1610
}
1611
&:disabled { color: $insensitive_secondary_fg_color; }
1613
&:checked {
1615
animation: tab_ripple_effect $material_slower * 3 $material_ease_out;
1616
color: $fg_color;
1617
&:disabled { color: $insensitive_fg_color; }
1619
&.reorderable-page {
1621
border-color: $borders_color;
1622
background-color: $base_color;
1623
}
1624
}
1625
// colors the button like the label, overridden otherwise
1627
button.flat {
1628
// FIXME: generalize .small-button?
1629
min-width: $small_size;
1630
min-height: $small_size;
1631
padding: 0;
1632
@extend %button_basic.image-button;
1634
&:last-child {
1636
margin-left: 6px;
1637
margin-right: -6px;
1638
}
1639
&:first-child {
1641
margin-left: -6px;
1642
margin-right: 6px;
1643
}
1644
}
1645
}
1646
&.top,
1648
&.bottom {
1649
tabs {
1650
padding-left: 8px;
1651
padding-right: 8px;
1652
&:not(:only-child) {
1654
&:first-child { margin-left: 0; }
1655
&:last-child { margin-right: 0; }
1656
}
1657
tab {
1659
&.reorderable-page {
1660
margin: 0 -1px;
1661
border-style: none solid;
1662
}
1663
}
1664
}
1665
}
1666
&.left,
1668
&.right {
1669
tabs {
1670
padding-top: 8px;
1671
padding-bottom: 8px;
1672
&:not(:only-child) {
1674
&:first-child { margin-top: 0; }
1675
&:last-child { margin-bottom: 0; }
1676
}
1677
tab {
1679
&.reorderable-page {
1680
margin: -1px 0;
1681
border-style: solid none;
1682
}
1683
}
1684
}
1685
}
1686
}
1687
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1689
background-color: $base_color;
1690
entry,
1692
spinbutton:not(.vertical) { @extend %entry.flat; }
1693
revealer entry,
1695
revealer spinbutton:not(.vertical) { @extend %entry; }
1696
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1698
}
1699
}
1700
/**************
1703
* Scrollbars *
1704
**************/
1705
scrollbar {
1706
$_slider_min_length: 24px;
1707
// disable steppers
1709
@at-root * {
1710
-GtkScrollbar-has-backward-stepper: false;
1711
-GtkScrollbar-has-forward-stepper: false;
1712
}
1713
transition: $material_transition;
1715
background-color: $base_color;
1716
background-clip: $extra_background_clip;
1717
// scrollbar border
1719
&.top { border-bottom: 1px solid $borders_color; }
1720
&.bottom { border-top: 1px solid $borders_color; }
1721
&.left { border-right: 1px solid $borders_color; }
1722
&.right { border-left: 1px solid $borders_color; }
1723
// slider
1725
slider {
1726
transition: all $material_faster $material_ease_out, margin 0, border-width 0;
1727
min-width: 8px;
1728
min-height: 8px;
1729
border: 4px solid transparent;
1730
border-radius: 100px;
1731
background-clip: padding-box;
1732
background-color: $tertiary_fg_color;
1733
&:hover { background-color: $secondary_fg_color; }
1735
&:active { background-color: $fg_color; }
1737
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1739
}
1740
&.fine-tune {
1742
slider {
1743
transition: all $material_faster $material_ease_out, margin 0, border-width 0, min-width 0, min-height 0;
1744
min-width: 4px;
1745
min-height: 4px;
1746
}
1747
&.horizontal slider { margin: 2px 0; }
1749
&.vertical slider { margin: 0 2px; }
1751
}
1752
&.overlay-indicator {
1754
&:not(.dragging):not(.hovering) {
1755
border-color: transparent;
1756
background-color: transparent;
1757
slider {
1759
min-width: 4px;
1760
min-height: 4px;
1761
margin: 2px;
1762
border: 2px solid scale-alpha($base_color, $lower_opacity);
1763
}
1764
button {
1766
min-width: 4px;
1767
min-height: 4px;
1768
margin: 2px;
1769
border: 2px solid scale-alpha($base_color, $lower_opacity);
1770
border-radius: 100px;
1771
background-color: $tertiary_fg_color;
1772
background-clip: padding-box;
1773
-gtk-icon-source: none;
1774
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1776
}
1777
&.horizontal {
1779
slider { min-width: $_slider_min_length; }
1780
button { min-width: 8px; }
1782
}
1783
&.vertical {
1785
slider { min-height: $_slider_min_length; }
1786
button { min-height: 8px; }
1788
}
1789
}
1790
&.dragging,
1792
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1793
}
1794
&.horizontal slider { min-width: $_slider_min_length; }
1796
&.vertical slider { min-height: $_slider_min_length; }
1798
// button styling
1800
button {
1801
@extend %button_basic.flat;
1802
min-width: 16px;
1803
min-height: 16px;
1804
padding: 0;
1805
border-radius: 0;
1806
}
1807
// button icons
1809
&.vertical {
1810
button {
1811
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1812
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1814
}
1815
}
1816
&.horizontal {
1818
button {
1819
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1820
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1822
}
1823
}
1824
}
1825
/**********
1828
* Switch *
1829
**********/
1830
switch {
1831
transition: $material_transition;
1832
margin: $container_padding 0;
1833
border: 4px solid transparent;
1834
border-radius: 100px;
1835
background-color: $track_color;
1836
background-clip: padding-box;
1837
font-size: 0;
1838
&:disabled { color: $insensitive_fg_color; }
1840
&:checked {
1842
background-color: scale-alpha($accent_bg_color, 0.5);
1843
&:disabled {
1845
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1846
color: $insensitive_fg_color;
1847
}
1848
}
1849
slider {
1851
@include entry(normal);
1852
transition: $material_transition, margin 0;
1854
min-width: $small_size;
1855
min-height: $small_size;
1856
margin: -4px 0 -4px -4px;
1857
-gtk-outline-radius: 100px;
1858
border-radius: 100px;
1859
}
1860
&:hover slider { @include entry(focus); }
1862
&:disabled slider { @include entry(insensitive); }
1864
&:checked slider {
1866
transition: $material_transition, margin 0, background-image 0, background-color 0 $material_slower;
1867
animation: needs_attention $material_slower $material_ease_out;
1868
margin: -4px -4px -4px 0;
1869
background-color: $accent_bg_color;
1870
color: $selected_fg_color;
1871
}
1872
&:checked:disabled slider { animation: none; }
1874
row:selected & {
1876
}
1877
}
1878
/*************************
1881
* Check and Radio items *
1882
*************************/
1883
// draw regular check and radio items using our PNG assets
1884
// all assets are rendered from assets.svg. never add pngs directly
1885
//selection-mode
1887
@each $s,$as in ('','-selectionmode'),
1888
(':hover', '-hover-selectionmode'),
1889
(':checked', '-checked-selectionmode'),
1890
(':checked:hover', '-checked-hover-selectionmode') {
1891
.view.content-view.check#{$s}:not(list) {
1892
-gtk-icon-shadow: $z-depth-1;
1893
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1894
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1895
margin: 8px;
1896
background-color: transparent;
1897
}
1898
}
1899
checkbutton.text-button,
1901
radiobutton.text-button {
1902
// this is for a nice focus on check and radios text
1903
padding: 2px;
1904
outline-offset: 0;
1905
label:not(:only-child) { margin: 0 4px; }
1907
}
1908
check,
1910
radio {
1911
min-height: 24px;
1912
min-width: 24px;
1913
margin: -12px;
1914
padding: 12px;
1915
@extend %button_basic.flat;
1917
@extend %button_basic.image-button;
1919
&:checked, &:checked:disabled { background-color: transparent; }
1921
&:checked, &:indeterminate { color: $accent_bg_color; }
1923
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1925
// &:only-child { margin: -12px; }
1927
row &:not(:checked):not(:indeterminate) {
1929
color: gtkalpha(currentColor, $enabled_opacity);
1930
&:hover, &:active { color: currentColor; }
1932
}
1933
menu menuitem & {
1935
transition: none;
1936
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1937
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1939
&, &:hover, &:disabled {
1941
background-image: none;
1942
// color: inherit;
1943
// animation: none;
1944
}
1945
}
1946
}
1947
%check,
1949
check {
1950
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1951
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1952
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1954
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1955
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1957
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1958
}
1959
%radio,
1961
radio {
1962
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1963
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1964
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1966
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1967
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1969
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1970
border-image: -gtk-gradient(radial,
1972
center center, 0,
1973
center center, 0.001,
1974
to($accent_bg_color),
1975
to(transparent))
1976
24 / 24px;
1977
&:checked {
1979
border-image: -gtk-gradient(radial,
1980
center center, 0,
1981
center center, (10 / 48 / 2),
1982
to($accent_bg_color),
1983
to(transparent))
1984
24 / 24px;
1985
}
1986
&:checked:disabled {
1988
border-image: -gtk-gradient(radial,
1989
center center, 0,
1990
center center, (10 / 48 / 2),
1991
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1992
to(transparent))
1993
24 / 24px;
1994
}
1995
&:indeterminate:checked {
1997
border-image: -gtk-gradient(radial,
1998
center center, 0,
1999
center center, 0.001,
2000
to($accent_bg_color),
2001
to(transparent))
2002
24 / 24px;
2003
}
2004
}
2005
// let's animate things
2007
@keyframes check_check {
2008
from { -gtk-icon-transform: rotate(90deg); }
2009
to { -gtk-icon-transform: unset; }
2010
}
2011
@keyframes check_radio { // FIXME: cannot animate border-image
2013
from {
2014
border-image: -gtk-gradient(radial,
2015
center center, 0,
2016
center center, 0.001,
2017
to($accent_bg_color),
2018
to(transparent))
2019
24 / 24px;
2020
}
2021
to {
2023
border-image: -gtk-gradient(radial,
2024
center center, 0,
2025
center center, (10 / 48 / 2),
2026
to($accent_bg_color),
2027
to(transparent))
2028
24 / 24px;
2029
}
2030
}
2031
@keyframes check_indeterminate {
2033
from { -gtk-icon-transform: unset; }
2034
50% { -gtk-icon-transform: scale(0, 1); }
2035
to { -gtk-icon-transform: unset; }
2036
}
2037
%check_checked,
2039
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
2040
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2042
// %radio_checked,
2044
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
2045
// radio:not(:indeterminate):checked:active { animation: check_radio $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2047
%indeterminate_checked,
2049
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
2050
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2052
// no animations in menus
2054
menu menuitem {
2055
check:not(:indeterminate):checked,
2056
radio:not(:indeterminate):checked,
2057
check:indeterminate:checked,
2058
radio:indeterminate:checked { animation: none; }
2059
}
2060
treeview.view check,
2062
treeview.view radio {
2063
padding: 0;
2064
&:checked:hover, &:selected:checked:hover { background-image: none; }
2066
& {
2068
color: $secondary_fg_color;
2069
&:hover, &:active { color: $fg_color; }
2071
&:disabled { color: $insensitive_secondary_fg_color; }
2073
&:checked, &:indeterminate { color: $accent_bg_color; }
2075
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2077
}
2078
&:selected {
2080
color: $secondary_selected_fg_color;
2081
&:hover, &:active { color: $selected_fg_color; }
2083
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2085
&:checked, &:indeterminate { color: $accent_bg_color; }
2087
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2089
}
2090
}
2091
treeview.view radio:checked {
2093
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2094
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2095
border-image: none;
2096
}
2097
/************
2100
* GtkScale *
2101
************/
2102
scale {
2103
// sizing
2104
$_marks_lenght: 8px;
2105
$_marks_distance: 8px;
2106
min-height: 12px;
2108
min-width: 12px;
2109
padding: 12px;
2110
* { transition: $material_transition; }
2112
// the slider is inside the trough, so to have make it bigger there's a negative margin
2114
slider {
2115
min-height: $small_size;
2116
min-width: $small_size;
2117
margin: -10px;
2118
}
2119
// the backing bit
2121
trough {
2122
outline-offset: 2px;
2123
background-color: $track_color;
2124
&:disabled { color: $insensitive_fg_color; }
2126
}
2127
// the colored part of the backing bit
2129
highlight {
2130
background-color: $accent_bg_color;
2131
&:disabled { background-color: transparent; }
2133
}
2134
// this is another differently styled part of the backing bit, the most relevant use case is for example
2136
// in media player to indicate how much video stream as been cached
2137
fill {
2138
background-color: $track_color;
2139
&:disabled { background-color: transparent; }
2141
}
2142
slider {
2144
transition: all $material_faster $material_ease;
2145
// border-radius: 100%;
2146
// background-color: $accent_bg_color;
2147
background-repeat: no-repeat;
2148
background-position: center;
2149
@each $s,$as in ('',''),
2151
(':disabled','-insensitive') {
2152
&#{$s} {
2153
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2154
background-image: -gtk-scaled(url('#{$_url}.png'),
2155
url('#{$_url}@2.png'));
2156
}
2157
}
2158
background-size: calc(100% - 8px);
2160
&:hover { background-size: calc(100% - 4px); }
2162
&:active { background-size: calc(100% - 0px); }
2164
}
2165
// click-and-hold the slider to activate
2167
&.fine-tune {
2168
// to make the slider shrink in fine-tune mode
2169
slider { background-size: calc(100% - 12px); }
2170
}
2171
value { color: gtkalpha(currentColor, $hint_opacity); }
2173
marks {
2175
color: $track_color;
2176
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2178
(bottom, bottom, top),
2179
(top, left, right),
2180
(bottom, right, left) {
2181
&.#{$marks_class} {
2182
margin-#{$marks_margin}: $_marks_distance;
2183
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2184
}
2185
}
2186
}
2187
&.horizontal {
2189
indicator {
2190
min-height: $_marks_lenght;
2191
min-width: 1px;
2192
}
2193
}
2194
&.vertical {
2196
indicator {
2197
min-height: 1px;
2198
min-width: $_marks_lenght;
2199
}
2200
}
2201
// *WARNING* scale with marks madness following
2203
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2205
$suffix: if($variant == 'light', '', '-dark');
2206
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2208
('vertical', 'vert') {
2209
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2210
('scale-has-marks-below', ':first-child:not(:only-child)') {
2211
@each $state, $state_infix in ('', ''),
2212
(':disabled', '-insensitive') {
2213
&.#{$dir_class} {
2214
%#{$marks_infix}-#{$dir_infix},
2215
contents#{$nth_child} > trough > slider {
2216
&#{$state} {
2217
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2218
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2220
}
2221
@if $dir_class == 'horizontal' {
2223
min-height: 30px;
2224
min-width: $small_size;
2225
@if $marks_infix == 'scale-has-marks-above' {
2227
margin-top: -16px;
2228
background-position: center calc(100% - 4px);
2230
&:hover { background-position: center calc(100% - 2px); }
2232
&:active { background-position: center calc(100% - 0px); }
2234
}
2235
@if $marks_infix == 'scale-has-marks-below' {
2237
margin-bottom: -16px;
2238
background-position: center calc(4px);
2240
&:hover { background-position: center calc(2px); }
2242
&:active { background-position: center calc(0px); }
2244
}
2245
}
2246
@if $dir_class == 'vertical' {
2248
min-height: $small_size;
2249
min-width: 30px;
2250
@if $marks_infix == 'scale-has-marks-above' {
2252
margin-left: -16px;
2253
background-position: calc(4px) center;
2255
&:hover { background-position: calc(2px) center; }
2257
&:active { background-position: calc(0px) center; }
2259
}
2260
@if $marks_infix == 'scale-has-marks-below' {
2262
margin-right: -16px;
2263
background-position: calc(100% - 4px) center;
2265
&:hover { background-position: calc(100% - 2px) center; }
2267
&:active { background-position: calc(100% - 0px) center; }
2269
}
2270
}
2271
}
2272
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2274
&.fine-tune contents#{$nth_child} > trough > slider {
2275
// bigger negative margins to make the trough grow here as well
2276
@if $dir_class == 'horizontal' {
2278
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2279
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2281
}
2282
@if $dir_class == 'vertical' {
2284
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2285
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2287
}
2288
}
2289
}
2290
}
2291
}
2292
}
2293
&.color {
2295
min-height: 0;
2296
min-width: 0;
2297
&.horizontal {
2299
padding: 0 0 12px 0;
2300
trough {
2302
padding-bottom: $bar_size;
2303
}
2304
slider {
2306
@extend %scale-has-marks-above-horz;
2307
margin-bottom: -10px - $bar_size;
2309
margin-top: 0;
2310
}
2311
}
2312
&.vertical {
2314
&:dir(ltr) {
2315
padding: 0 0 0 12px;
2316
trough {
2318
padding-left: $bar_size;
2319
}
2320
slider {
2322
@extend %scale-has-marks-below-vert;
2323
margin-left: -10px - $bar_size;
2325
margin-right: 0;
2326
}
2327
}
2328
&:dir(rtl) {
2330
padding: 0 12px 0 0;
2331
trough {
2333
padding-right: $bar_size;
2334
}
2335
slider {
2337
@extend %scale-has-marks-above-vert;
2338
margin-right: -10px - $bar_size;
2340
margin-left: 0;
2341
}
2342
}
2343
}
2344
&.fine-tune {
2346
&.horizontal {
2347
slider {
2348
@extend %scale-has-marks-above-horz-fine-tune;
2349
}
2350
}
2351
&.vertical {
2353
&:dir(ltr) {
2354
slider {
2355
@extend %scale-has-marks-below-vert-fine-tune;
2356
}
2357
}
2358
&:dir(rtl) {
2360
slider {
2361
@extend %scale-has-marks-above-vert-fine-tune;
2362
}
2363
}
2364
}
2365
}
2366
}
2367
}
2368
/*****************
2371
* Progress bars *
2372
*****************/
2373
progressbar {
2374
// sizing
2375
&.horizontal {
2376
trough,
2377
progress { min-height: $bar_size; }
2378
}
2379
&.vertical {
2381
trough,
2382
progress { min-width: $bar_size; }
2383
}
2384
// FIXME: insensitive state missing and some other state should be set probably
2386
color: $tertiary_fg_color;
2387
font-size: smaller;
2388
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2390
progress { background-color: $selected_bg_color; }
2392
&.osd { // progressbar.osd used for epiphany page loading progress
2394
// min-width: $bar_size;
2395
// min-height: $bar_size;
2396
// background-color: transparent;
2397
// trough { background-color: transparent; }
2399
progress {
2401
}
2402
}
2403
}
2404
/*************
2407
* Level Bar *
2408
*************/
2409
levelbar {
2410
block {
2411
min-width: $medium_size;
2412
min-height: $bar_size;
2413
}
2414
&.vertical block {
2416
min-width: $bar_size;
2417
min-height: $medium_size;
2418
}
2419
trough {
2421
padding: 2px;
2422
border-radius: 2px;
2423
@include entry(normal);
2425
&:disabled { @include entry(insensitive); }
2427
}
2428
&.horizontal.discrete block { margin: 0 1px; }
2430
&.vertical.discrete block { margin: 1px 0; }
2432
&.horizontal.discrete trough { padding: 2px 1px; }
2434
&.vertical.discrete trough { padding: 1px 2px; }
2436
block {
2438
&.low {
2439
background-color: $warning_color;
2440
}
2441
&.high,
2443
&:not(.empty) {
2444
background-color: $selected_bg_color;
2445
}
2446
&.full {
2448
background-color: $success_color;
2449
}
2450
&.empty {
2452
background-color: $track_color;
2453
color: $insensitive_fg_color;
2454
}
2455
}
2456
}
2457
/****************
2460
* Print dialog *
2461
*****************/
2462
printdialog {
2463
paper {
2464
padding: 0;
2465
border: 1px solid $borders_color;
2466
background: $base_color;
2467
color: $fg_color;
2468
}
2469
.dialog-action-box { margin: 12px; }
2471
}
2472
/**********
2475
* Frames *
2476
**********/
2477
frame > border,
2478
.frame {
2479
margin: 0;
2480
padding: 0;
2481
border: 1px solid $borders_color;
2482
border-radius: 0;
2483
box-shadow: none;
2484
&.flat { border-style: none; }
2486
}
2487
actionbar > revealer > box {
2489
padding: $container_padding;
2490
border-top: 1px solid $borders_color;
2491
}
2492
scrolledwindow {
2494
viewport.frame { // avoid double borders when viewport inside scrolled window
2495
border-style: none;
2496
}
2497
// This is used when content is touch-dragged past boundaries.
2499
// draws a box on top of the content, the size changes programmatically.
2500
overshoot {
2501
&.top { @include overshoot(top); }
2502
&.bottom { @include overshoot(bottom); }
2504
&.left { @include overshoot(left); }
2506
&.right { @include overshoot(right); }
2508
}
2509
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2511
undershoot {
2512
&.top { @include undershoot(top); }
2513
&.bottom { @include undershoot(bottom); }
2515
&.left { @include undershoot(left); }
2517
&.right { @include undershoot(right); }
2519
}
2520
junction { // the small square between two scrollbars
2522
border-style: solid none none solid;
2523
border-width: 1px;
2524
border-color: $borders_color;
2525
background-color: $base_color;
2526
&:dir(rtl) { border-style: solid solid none none; }
2528
}
2529
}
2530
//vbox and hbox separators
2532
separator {
2533
min-width: 1px;
2534
min-height: 1px;
2535
background: $borders_color;
2536
}
2537
/*********
2540
* Lists *
2541
*********/
2542
list {
2543
border-color: $borders_color;
2544
background-color: $base_color;
2545
row { padding: 2px; }
2547
}
2548
row {
2550
transition: $material_transition;
2551
&:hover { transition: none; }
2553
&.activatable {
2555
background-image: radial-gradient(circle farthest-corner at center,
2556
gtkalpha(currentColor, 0) 100%,
2557
transparent 0%),
2558
image(gtkalpha(currentColor, 0));
2559
&:hover {
2561
background-image: radial-gradient(circle farthest-corner at center,
2562
gtkalpha(currentColor, 0) 100%,
2563
transparent 0%),
2564
image(gtkalpha(currentColor, 0.05));
2565
}
2566
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2568
&:active {
2569
transition: $material_transition, background-image 0;
2570
animation: row_ripple_effect $material_slower $material_ease_out forwards;
2571
}
2572
}
2573
&:selected { @extend %selected_items; }
2575
}
2576
/*********************
2579
* App Notifications *
2580
*********************/
2581
.app-notification,
2582
.app-notification.frame {
2583
@extend %osd;
2584
@extend toolbar.osd;
2586
margin: 8px;
2588
border { border: none; }
2590
}
2591
/*************
2594
* Expanders *
2595
*************/
2596
expander {
2597
arrow {
2598
transition: all $material_faster $material_ease;
2599
min-width: 16px;
2600
min-height: 16px;
2601
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2602
-gtk-icon-transform: rotate(-90deg);
2603
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2605
&:checked { -gtk-icon-transform: unset; }
2607
color: $secondary_fg_color;
2609
&:hover, &:active { color: $fg_color; }
2611
&:disabled { color: $insensitive_secondary_fg_color; }
2613
&:selected {
2615
color: $secondary_selected_fg_color;
2616
&:hover, &:active { color: $selected_fg_color; }
2618
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2620
}
2621
}
2622
}
2623
/************
2626
* Calendar *
2627
***********/
2628
calendar {
2629
padding: 1px;
2630
border: 1px solid $borders_color;
2631
color: $fg_color;
2632
&:disabled { color: $insensitive_fg_color; }
2634
&:selected {
2636
@extend %selected_items;
2637
border-radius: 2px + 1px;
2639
}
2640
&.header {
2642
border-style: none none solid;
2643
border-radius: 0;
2644
}
2645
&.button { @extend %button_basic.flat; }
2647
&.highlight {
2649
color: gtkalpha(currentColor, $hint_opacity);
2650
font-weight: 500;
2651
}
2652
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2654
}
2655
/***********
2658
* Dialogs *
2659
***********/
2660
messagedialog { // Message Dialog styling
2661
&.background { background-color: $light_color; }
2662
.titlebar {
2664
min-height: $small_size;
2665
border-style: none;
2666
box-shadow: inset 0 1px $highlight_color;
2667
background-color: $light_color;
2668
}
2669
&.csd { // rounded bottom border styling for csd version
2671
&.background {
2672
// bigger radius for better antialiasing
2673
border-bottom-left-radius: 2px;
2674
border-bottom-right-radius: 2px;
2675
}
2676
.dialog-action-area button {
2678
padding: 8px 16px;
2679
border-top: 1px solid $borders_color;
2680
border-radius: 0;
2681
@extend %button_basic.flat;
2683
&:first-child{ border-bottom-left-radius: 2px; }
2685
&:last-child { border-bottom-right-radius: 2px; }
2687
}
2688
}
2689
}
2690
filechooser {
2692
.dialog-action-box { border-top: 1px solid $borders_color; }
2693
#pathbarbox { border-bottom: 1px solid $borders_color; }
2695
}
2696
filechooserbutton:drop(active) {
2698
box-shadow: none;
2699
}
2700
/***********
2703
* Sidebar *
2704
***********/
2705
.sidebar {
2706
border-style: none;
2707
background-color: $light_color;
2708
@at-root %sidebar_left,
2710
&:dir(ltr),
2711
&.left,
2712
&.left:dir(rtl) {
2713
border-right: 1px solid $borders_color;
2714
border-left-style: none;
2715
}
2716
@at-root %sidebar_right
2718
&:dir(rtl),
2719
&.right {
2720
border-left: 1px solid $borders_color;
2721
border-right-style: none;
2722
}
2723
list { background-color: transparent; }
2725
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2727
}
2728
stacksidebar {
2730
&.sidebar {
2731
&:dir(ltr),
2732
&.left,
2733
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2734
&:dir(rtl),
2736
&.right { list { @extend %sidebar_right; }}
2737
}
2738
row {
2740
padding: 10px 4px;
2741
> label {
2743
padding-left: 6px;
2744
padding-right: 6px;
2745
}
2746
&.needs-attention > label { @extend %needs_attention; }
2748
}
2749
}
2750
/****************
2753
* File chooser *
2754
****************/
2755
placessidebar {
2756
> viewport.frame { border-style: none; }
2757
row {
2759
// Needs overriding of the GtkListBoxRow padding
2760
min-height: 32px;
2761
padding: 0;
2762
// Using margins/padding directly in the SidebarRow
2764
// will make the animation of the new bookmark row jump
2765
> revealer { padding: 0 12px; }
2766
&:selected { color: $selected_fg_color; }
2768
&:disabled { color: $insensitive_fg_color; }
2770
image.sidebar-icon {
2772
opacity: $hint_opacity; // dim the device icons
2773
&:dir(ltr) { padding-right: 8px; }
2775
&:dir(rtl) { padding-left: 8px; }
2776
}
2777
label.sidebar-label {
2779
&:dir(ltr) { padding-right: 2px; }
2780
&:dir(rtl) { padding-left: 2px; }
2781
}
2782
@at-root button.sidebar-button {
2784
@extend %button_basic.flat;
2785
min-height: $small_size;
2787
min-width: $small_size;
2788
margin-top: 0;
2789
margin-bottom: 0;
2790
padding: 0;
2791
border-radius: 100%;
2792
-gtk-outline-radius: 100%;
2793
row:selected & { @extend %button_selected.flat; }
2795
}
2796
&.sidebar-placeholder-row {
2798
min-height: 2px;
2799
padding: 0 8px;
2800
background-image: image($accent_bg_color);
2801
background-clip: content-box;
2802
}
2803
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2805
&:drop(active):not(:disabled) {
2807
box-shadow: inset 0 0 0 2px $accent_bg_color;
2808
&:selected {
2810
// background-color: $accent_bg_color;
2811
// color: $selected_fg_color;
2812
}
2813
}
2814
}
2815
}
2816
placesview {
2818
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2819
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2821
// this selects the "connect to server" label
2823
> actionbar > revealer > box > label {
2824
padding-left: 8px;
2825
padding-right: 8px;
2826
}
2827
}
2828
/*********
2831
* Paned *
2832
*********/
2833
paned {
2834
> separator {
2835
min-width: 1px;
2836
min-height: 1px;
2837
-gtk-icon-source: none; // defeats the ugly default handle decoration
2838
border-style: none; // just to be sure
2839
background-color: transparent;
2840
// workaround, using background istead of a border since the border will get rendered twice (?)
2841
background-image: image($borders_color);
2842
background-size: 1px 1px;
2843
&.wide {
2845
min-width: 6px;
2846
min-height: 6px;
2847
background-color: $bg_color;
2848
background-image: image($borders_color), image($borders_color);
2849
background-size: 1px 1px, 1px 1px;
2850
}
2851
}
2852
&.horizontal > separator {
2854
background-repeat: repeat-y;
2855
&:dir(ltr) {
2857
margin: 0 -8px 0 0;
2858
padding: 0 8px 0 0;
2859
background-position: left;
2860
}
2861
&:dir(rtl) {
2863
margin: 0 0 0 -8px;
2864
padding: 0 0 0 8px;
2865
background-position: right;
2866
}
2867
&.wide {
2869
margin: 0;
2870
padding: 0;
2871
background-repeat: repeat-y, repeat-y;
2872
background-position: left, right;
2873
}
2874
}
2875
&.vertical > separator {
2877
margin: 0 0 -8px 0;
2878
padding: 0 0 8px 0;
2879
background-repeat: repeat-x;
2880
background-position: top;
2881
&.wide {
2883
margin: 0;
2884
padding: 0;
2885
background-repeat: repeat-x, repeat-x;
2886
background-position: bottom, top;
2887
}
2888
}
2889
}
2890
/**************
2893
* GtkInfoBar *
2894
**************/
2895
infobar { border-style: none; }
2896
.info { background-color: $info_bg_color; }
2898
.question { background-color: $question_bg_color; }
2900
.warning { background-color: $warning_bg_color; }
2902
.error { background-color: $error_bg_color; }
2904
.info,
2906
.question,
2907
.warning,
2908
.error {
2909
color: $selected_fg_color;
2910
button { @extend %button_selected; }
2912
label:selected {
2914
}
2915
*:link { @extend %link_selected; }
2917
}
2918
/************
2921
* Tooltips *
2922
************/
2923
tooltip {
2924
&.background {
2925
// background-color needs to be set this way otherwise it gets drawn twice
2926
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2927
background-color: scale-alpha($base_color, $higher_opacity);
2928
}
2929
// @extend %osd;
2931
// padding: 4px; /* not working */
2933
border-radius: 2px;
2934
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2935
// FIXME: we need a border or tooltips vanish on black background.
2937
decoration { background-color: transparent; }
2938
label {
2940
min-height: 32px - 6px * 2;
2941
padding: 2px 8px - 6px;
2942
}
2943
* { // Yeah this is ugly
2945
padding: 0;
2946
background-color: transparent;
2947
color: inherit;
2948
}
2949
}
2950
/*****************
2953
* Color Chooser *
2954
*****************/
2955
colorswatch {
2956
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2957
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2958
// applied to the overlay box.
2959
// base color corners rounding
2961
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2962
// sports a bigger radius.
2963
// nth-child is needed by the custom color strip.
2964
&.top {
2966
border-top-left-radius: $material_radius + 0.5px;
2967
border-top-right-radius: $material_radius + 0.5px;
2968
overlay {
2970
border-top-left-radius: $material_radius;
2971
border-top-right-radius: $material_radius;
2972
}
2973
}
2974
&.bottom {
2976
border-bottom-left-radius: $material_radius + 0.5px;
2977
border-bottom-right-radius: $material_radius + 0.5px;
2978
overlay {
2980
border-bottom-left-radius: $material_radius;
2981
border-bottom-right-radius: $material_radius;
2982
}
2983
}
2984
&.left,
2986
&:first-child:not(.top) {
2987
border-top-left-radius: $material_radius + 0.5px;
2988
border-bottom-left-radius: $material_radius + 0.5px;
2989
overlay {
2991
border-top-left-radius: $material_radius;
2992
border-bottom-left-radius: $material_radius;
2993
}
2994
}
2995
&.right,
2997
&:last-child:not(.bottom) {
2998
border-top-right-radius: $material_radius + 0.5px;
2999
border-bottom-right-radius: $material_radius + 0.5px;
3000
overlay {
3002
border-top-right-radius: $material_radius;
3003
border-bottom-right-radius: $material_radius;
3004
}
3005
}
3006
&.dark overlay { color: white; }
3008
&.light overlay { color: scale-alpha(black, 0.8); }
3010
&.dark { color: white; } // for focus ring
3012
&.light { color: scale-alpha(black, 0.8); } // for focus ring
3014
&:drop(active) {
3016
box-shadow: none;
3017
&.light overlay {
3019
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3020
}
3021
&.dark overlay {
3023
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3024
}
3025
}
3026
overlay {
3028
transition: $shadow_transition;
3029
box-shadow: $z-depth-1;
3030
&:hover { box-shadow: $z-depth-2; }
3032
}
3033
&#add-color-button {
3035
border-radius: $material_radius $material_radius 0 0;
3036
color: white; // for focus ring
3037
&:only-child { border-radius: $material_radius; }
3039
overlay {
3041
background-image: linear-gradient(to right,
3042
$error_bg_color 25%,
3043
$warning_bg_color 25%, $warning_bg_color 50%,
3044
$info_bg_color 50%, $info_bg_color 75%,
3045
$question_bg_color 75%);
3046
color: white;
3047
}
3048
}
3049
&:disabled {
3051
opacity: $disabled_opacity;
3052
overlay { box-shadow: none; }
3054
}
3055
row:selected & {
3057
}
3058
&#editor-color-sample {
3060
border-radius: $material_radius + 0.5px;
3061
overlay { border-radius: $material_radius; }
3063
// overlay:hover { box-shadow: $z-depth-1; }
3065
}
3066
}
3067
// colorscale popup
3069
colorchooser .popover.osd {
3070
transition: $shadow_transition;
3071
border-radius: 2px;
3072
box-shadow: $z-depth-2;
3073
background-color: $base_color;
3074
&:backdrop { box-shadow: $z-depth-1; }
3076
spinbutton:not(.vertical) { @extend %entry.flat; }
3078
}
3079
/********
3082
* Misc *
3083
********/
3084
//content view (grid/list)
3085
.content-view {
3086
background-color: $bg_color;
3087
// &:hover { -gtk-icon-effect: highlight; }
3089
rubberband { @extend rubberband; }
3091
}
3092
.scale-popup {
3094
.osd & { @extend %osd; }
3095
.osd & button.flat { //FIXME: quick hack, redo properly
3097
}
3098
button { // +/- buttons on GtkVolumeButton popup
3100
}
3101
}
3102
/**********************
3105
* Window Decorations *
3106
*********************/
3107
decoration {
3108
transition: $shadow_transition;
3109
border-radius: 2px 2px 0 0;
3110
box-shadow: $z-depth-4, 0 16px 16px transparent;
3111
// FIXME rationalize shadows
3113
// this is used for the resize cursor area
3115
margin: 8px;
3116
&:backdrop {
3118
// the transparent shadow here is to enforce that the shadow extents don't
3119
// change when we go to backdrop, to prevent jumping windows.
3120
// The biggest shadow should be in the same order then in the active state
3121
// or the jumping will happen during the transition.
3122
box-shadow: $z-depth-2, 0 16px 16px transparent;
3123
}
3124
.maximized &,
3126
.fullscreen &,
3127
.tiled & { border-radius: 0; }
3128
.popup & { box-shadow: none; }
3130
// server-side decorations as used by mutter
3132
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3133
.csd.popup & {
3135
border-radius: 2px;
3136
box-shadow: $z-depth-2;
3137
}
3138
tooltip.csd & {
3140
border-radius: 2px;
3141
box-shadow: $z-depth-2;
3142
}
3143
messagedialog.csd & {
3145
border-radius: 2px;
3146
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3147
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3149
}
3150
.solid-csd & {
3152
margin: 0;
3153
padding: 4px;
3154
// border: solid 1px $borders_color;
3155
border-radius: 0;
3156
box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $secondary_highlight_color;
3157
background-color: $borders_color;
3158
}
3159
}
3160
// Window Close button
3162
button.titlebutton {
3163
// @extend %button_basic.flat;
3164
@extend %button_basic.image-button;
3166
.selection-mode & {
3168
}
3169
}
3170
// catch all extend :)
3173
%selected_items {
3175
background-color: $selected_bg_color;
3176
@at-root %nobg_selected_items, & {
3178
color: $selected_fg_color;
3179
&:disabled { color: $insensitive_selected_fg_color; }
3181
}
3182
}
3183
.monospace { font-family: monospace; }
3185
/**********************
3188
* Touch Copy & Paste *
3189
*********************/
3190
//touch selection handlebars for the Popover.osd above
3191
cursor-handle {
3192
border-radius: 100px;
3193
background-color: $accent_bg_color;
3194
background-image: none;
3195
&.top:dir(ltr), &.bottom:dir(rtl) {
3197
padding-left: 6px;
3198
border-top-right-radius: 0;
3199
}
3200
&.bottom:dir(ltr), &.top:dir(rtl) {
3202
padding-right: 6px;
3203
border-top-left-radius: 0;
3204
}
3205
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3207
-GtkWidget-text-handle-width: 24;
3208
-GtkWidget-text-handle-height: 30;
3209
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3211
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3212
url('#{$_url}@2.png'));
3213
}
3214
}
3215
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3217
button.circular { // FIXME: aggregate to buttons
3219
border-radius: 100px;
3220
-gtk-outline-radius: 100px;
3221
label { padding: 0; }
3223
}
3224
// shortcut window keys
3226
.keycap {
3227
min-width: 28px - 8px * 2;
3228
min-height: 28px - 2px;
3229
margin-top: 2px;
3230
padding-bottom: 2px;
3231
padding-left: 8px;
3232
padding-right: 8px;
3233
border: solid 1px $borders_color;
3235
border-radius: 2px + 1px;
3236
box-shadow: inset 0 -2px $borders_color;
3237
background-color: $base_color;
3238
color: $fg_color;
3239
font-size: smaller;
3240
}
3241
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3243
transition: $material_transition;
3244
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3245
caret-color: $accent_bg_color;
3246
}
3247
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3249
stackswitcher button.circular,
3251
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3252
min-width: $medium_size;
3253
min-height: $medium_size;
3254
padding: 0;
3255
}
3256