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:dir(ltr),
766
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
767
&.up:dir(rtl),
769
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
770
}
771
}
772
// OSD horizontal
774
.osd &:not(.vertical) {
775
button {
776
}
777
}
778
// Vertical
780
&.vertical {
781
// in the vertical configuration, we treat the spinbutton
782
// as a box, and tweak the style of the entry in the middle
783
// so that it's linked
784
// FIXME: this should not be set at all, but otherwise it gets the wrong
786
// color
787
&:disabled { color: $insensitive_fg_color; }
788
&:drop(active) {
790
box-shadow: none;
791
}
792
entry {
794
min-height: $medium_size;
795
min-width: $large_size;
796
padding: 0;
797
}
798
button {
800
min-height: $medium_size;
801
min-width: $large_size;
802
padding: 0;
803
@extend %button_basic.flat;
805
&.up { border-radius: 2px 2px 0 0; }
807
&.down { border-radius: 0 0 2px 2px; }
809
}
810
}
811
// OSD vertical
813
.osd &.vertical button:first-child {
814
}
815
// Misc
817
treeview &:not(.vertical) {
818
min-height: 0;
819
border-style: none;
820
border-radius: 0;
821
entry {
823
min-height: 0;
824
padding: 1px 2px;
825
}
826
}
827
}
828
/**************
831
* ComboBoxes *
832
**************/
833
combobox {
834
arrow {
835
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
836
min-height: 16px;
837
min-width: 16px;
838
}
839
menu,
841
.menu,
842
.context-menu {
843
padding: 2px 0;
844
menuitem {
846
min-height: $medium_size;
847
padding: 0 10px;
848
}
849
}
850
&.linked {
852
button:nth-child(2) {
853
&:dir(ltr) { @extend %linked:last-child; }
854
&:dir(rtl) { @extend %linked:first-child; }
855
}
856
}
857
&:drop(active) { // FIXME: untested
859
box-shadow: none;
860
// button.combo { @extend %button_basic:drop(active); }
862
}
863
}
864
.linked > combobox > box > button.combo {
866
// the combo is a composite widget so the way we do button linking doesn't
867
// work, special case needed. See
868
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
869
&:dir(ltr),
871
&:dir(rtl) { @extend %linked_middle; } // specificity bump
872
}
873
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
875
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
876
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
877
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
879
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
880
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
881
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
882
/************
885
* Toolbars *
886
************/
887
toolbar {
888
-GtkWidget-window-dragging: true;
889
padding: $container_padding / 2;
890
background-color: $bg_color;
891
// on OSD
893
.osd & { background-color: transparent; }
894
// stand-alone OSD toolbars
896
&.osd {
897
transition: $shadow_transition;
898
padding: $container_padding;
899
border-radius: 2px;
900
box-shadow: $z-depth-2;
901
background-color: $base_color;
902
&:backdrop { box-shadow: $z-depth-1; }
904
&.left,
906
&.right,
907
&.top,
908
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
909
button { @extend %button_basic.flat; }
911
}
912
// toolbar separators
914
&.horizontal separator { margin: $container_padding / 2; }
915
&.vertical separator { margin: $container_padding / 2; }
916
&:not(.inline-toolbar):not(.osd) {
918
scale,
919
entry,
920
spinbutton,
921
button { margin: $container_padding / 2; }
922
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
924
}
925
}
926
//searchbar, location-bar & inline-toolbar
928
.inline-toolbar {
929
padding: $container_padding;
930
border-style: solid;
931
border-width: 0 1px 1px;
932
border-color: $borders_color;
933
background-color: $secondary_base_color;
934
}
935
searchbar,
937
.location-bar {
938
padding: $container_padding;
939
border-style: solid;
940
border-width: 0 0 1px;
941
border-color: $borders_color;
942
background-color: $bg_color;
943
background-clip: border-box;
944
}
945
/***************
948
* Header bars *
949
***************/
950
%titlebar,
951
headerbar {
952
transition: background-color $material_faster $material_ease_out, color $material_faster $material_ease_out;
953
min-height: $large_size;
954
padding: 0 $container_padding;
955
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
956
background-color: $headerbar_color;
957
color: $selected_fg_color;
958
&:backdrop {
960
color: $secondary_selected_fg_color;
961
}
962
.title {
964
padding-left: 12px;
965
padding-right: 12px;
966
font-weight: bold;
967
}
968
.subtitle {
970
padding-left: 12px;
971
padding-right: 12px;
972
font-size: smaller;
973
@extend .dim-label;
975
}
976
button:not(.suggested-action):not(.destructive-action) {
978
@extend %button_basic.flat;
979
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
981
currentColor 0%,
982
transparent 0%)
983
0 0 0 / 0 0 0px;
984
color: gtkalpha(currentColor, $enabled_opacity);
985
&:hover, &:active { color: currentColor; }
987
&:disabled {
989
color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity);
990
> label { color: inherit; }
992
}
993
&:checked {
995
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
996
currentColor 100%,
997
transparent 0%)
998
0 0 2 / 0 0 2px;
999
background-color: transparent;
1000
color: currentColor;
1001
&:disabled {
1003
background-color: transparent;
1004
color: gtkalpha(currentColor, $disabled_opacity);
1005
> label { color: inherit; }
1007
}
1008
}
1009
}
1010
button.suggested-action, button.destructive-action {
1012
&:disabled {
1013
color: gtkalpha(currentColor, $disabled_opacity);
1014
> label { color: inherit; }
1016
}
1017
}
1018
&.selection-mode {
1020
transition: background-color 0 $material_slower, color $material_faster $material_ease_out;
1021
animation: header_ripple_effect $material_slower $material_ease_out;
1022
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1023
background-color: $selected_bg_color;
1024
color: $selected_fg_color;
1025
&:backdrop {
1027
color: $secondary_selected_fg_color;
1028
}
1029
.subtitle:link { @extend *:link:selected; }
1031
button:not(.suggested-action):not(.destructive-action) {
1033
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1034
currentColor 0%,
1035
transparent 0%)
1036
0 0 0 / 0 0 0px;
1037
// color: gtkalpha(currentColor, $enabled_opacity);
1038
&, &:hover, &:active { color: currentColor; }
1040
&:disabled {
1042
color: gtkalpha(currentColor, $disabled_opacity);
1043
> label { color: inherit; }
1045
}
1046
&:checked {
1048
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1049
currentColor 100%,
1050
transparent 0%)
1051
0 0 2 / 0 0 2px;
1052
color: currentColor;
1053
&:disabled {
1055
color: gtkalpha(currentColor, $disabled_opacity);
1056
> label { color: inherit; }
1058
}
1059
}
1060
}
1061
.selection-menu {
1063
padding-left: 16px;
1064
padding-right: 16px;
1065
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1067
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1069
}
1070
}
1071
.fullscreen &,
1073
.tiled &,
1074
.maximized & {
1075
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1076
box-shadow: $z-depth-1;
1077
}
1078
&.default-decoration {
1080
min-height: $small_size;
1081
padding: $container_padding;
1082
border-width: 0;
1083
button.titlebutton {
1085
min-height: $small_size;
1086
min-width: $small_size;
1087
margin: 0;
1088
padding: 0;
1089
&:active { // add fallback
1091
background-image: radial-gradient(circle farthest-corner at center,
1092
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1093
transparent 0%),
1094
image(gtkalpha(currentColor, $lower_opacity / 2));
1095
}
1096
}
1097
}
1098
.solid-csd & {
1100
&:dir(rtl), &:dir(ltr) { // specificity bump
1101
margin-left: -1px;
1102
margin-right: -1px;
1103
margin-top: -1px;
1104
border-radius: 0;
1105
box-shadow: none;
1106
}
1107
}
1108
}
1109
headerbar {
1111
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1112
entry,
1113
spinbutton,
1114
// separator,
1115
button {
1116
margin-top: $container_padding;
1117
margin-bottom: $container_padding;
1118
}
1119
switch {
1121
margin-top: $container_padding * 2;
1122
margin-bottom: $container_padding * 2;
1123
}
1124
}
1125
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1127
border-top-left-radius: 2px;
1128
border-top-right-radius: 2px;
1129
}
1130
headerbar {
1132
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1133
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1134
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1136
}
1137
.titlebar:not(headerbar) {
1139
window.csd > & {
1140
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1141
padding: 0;
1142
background-color: transparent;
1143
background-image: none;
1144
border-style: none;
1145
box-shadow: none;
1146
}
1147
> separator {
1149
background-color: $headerbar_color;
1150
background-image: image($borders_color);
1151
}
1152
@extend %titlebar;
1154
}
1155
/************
1158
* Pathbars *
1159
************/
1160
.path-bar button {
1161
&.text-button, &.image-button, & {
1162
padding-left: 6px;
1163
padding-right: 6px;
1164
}
1165
&.text-button.image-button, & {
1167
// label:last-child { padding-left: 2px; padding-right: 8px; }
1168
// label:first-child { padding-left: 8px; padding-right: 2px; }
1169
}
1170
image {
1172
padding-left: 4px;
1173
padding-right: 4px;
1174
}
1175
&.slider-button {
1177
padding-left: 0;
1178
padding-right: 0;
1179
}
1180
}
1181
/**************
1184
* Tree Views *
1185
**************/
1186
treeview.view {
1187
@at-root * {
1188
-GtkTreeView-horizontal-separator: 4;
1189
-GtkTreeView-grid-line-width: 1;
1190
-GtkTreeView-grid-line-pattern: '';
1191
-GtkTreeView-tree-line-width: 1;
1192
-GtkTreeView-tree-line-pattern: '';
1193
-GtkTreeView-expander-size: 16;
1194
}
1195
border-left-color: $track_color; // this is actually the tree lines color,
1197
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1198
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1200
&:hover, &:active, &:selected { border-radius: 0; }
1202
&.separator {
1204
min-height: 1px + 2px * 2;
1205
color: $borders_color;
1206
}
1207
&:drop(active) {
1209
border-style: solid none;
1210
border-width: 1px;
1211
border-color: $accent_bg_color;
1212
&.after { border-top-style: none; }
1214
&.before { border-bottom-style: none; }
1216
}
1217
&.expander {
1219
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1220
-gtk-icon-transform: rotate(-90deg);
1221
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1223
&:checked { -gtk-icon-transform: unset; }
1225
color: $secondary_fg_color;
1227
&:hover, &:active { color: $fg_color; }
1229
&:disabled { color: $insensitive_secondary_fg_color; }
1231
&:selected {
1233
color: $secondary_selected_fg_color;
1234
&:hover, &:active { color: $selected_fg_color; }
1236
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1238
}
1239
}
1240
&.progressbar { // progress bar in treeviews
1242
border-style: none none solid;
1243
border-width: $bar_size;
1244
border-color: $selected_bg_color;
1245
background-color: transparent;
1246
background-image: none;
1247
&:selected { border-color: currentColor; }
1249
}
1250
&.trough { // progress bar trough in treeviews
1252
border-style: none none solid;
1253
border-width: $bar_size;
1254
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1255
background-color: transparent;
1256
background-image: none;
1257
&:selected { border-color: $track_color; }
1259
}
1260
header {
1262
button {
1263
@extend row.activatable;
1264
padding: 2px 6px;
1266
border-style: none solid solid none;
1267
border-width: 1px;
1268
border-color: $borders_color;
1269
border-radius: 0;
1270
background-clip: border-box;
1271
&, &:hover, &:active { box-shadow: none; }
1273
&, &:disabled { background-color: $base_color; }
1275
&:last-child { border-right-style: none; }
1277
}
1278
}
1279
button.dnd,
1281
header.button.dnd { // for treeview-like derive widgets
1282
padding: 2px 6px;
1283
border-style: none solid solid;
1284
border-width: 1px;
1285
border-color: $borders_color;
1286
border-radius: 0;
1287
box-shadow: none;
1288
background-color: $base_color;
1289
background-clip: border-box;
1290
color: $selected_bg_color;
1291
}
1292
acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
1294
}
1295
/*********
1298
* Menus *
1299
*********/
1300
menubar,
1301
.menubar {
1302
-GtkWidget-window-dragging: true;
1303
padding: 0;
1304
// box-shadow: inset 0 -1px $borders_color;
1305
background-color: $headerbar_color;
1306
> menuitem {
1308
transition: background-color $material_faster $material_ease_out;
1309
min-height: 20px;
1310
padding: 4px 8px;
1311
color: $secondary_selected_fg_color;
1312
&:hover { //Seems like it :hover even with keyboard focus
1314
transition: none;
1315
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1316
color: $selected_fg_color;
1317
}
1318
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1320
}
1321
}
1322
menu,
1324
.menu,
1325
.context-menu {
1326
margin: 4px 0;
1327
padding: 4px 0;
1328
background-color: $base_color;
1329
border: 1px solid $borders_color; // adds borders in a non composited env
1330
.csd & {
1332
border: none; // axes borders in a composited env
1333
border-radius: 2px;
1334
}
1335
menuitem {
1337
transition: background-color $material_faster $material_ease_out;
1338
min-height: 20px;
1339
min-width: 40px;
1340
padding: 4px 8px;
1341
font: initial;
1342
text-shadow: none;
1343
&:hover {
1345
transition: none;
1346
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1347
}
1348
&:disabled { color: $insensitive_fg_color; }
1350
// submenu indicators
1352
arrow {
1353
min-height: 16px;
1354
min-width: 16px;
1355
&:dir(ltr) {
1357
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1358
margin-left: 8px;
1359
}
1360
&:dir(rtl) {
1362
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1363
margin-right: 8px;
1364
}
1365
}
1366
// avoids labels color being overridden, see
1368
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1369
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1370
}
1371
// overflow arrows
1373
> arrow {
1374
min-height: 16px;
1375
min-width: 16px;
1376
padding: 4px;
1377
border-radius: 0;
1378
background-color: $base_color;
1379
color: $secondary_fg_color;
1380
&.top {
1382
margin-top: -4px;
1383
border-bottom: 1px solid $borders_color;
1384
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1385
}
1386
&.bottom {
1388
margin-bottom: -4px;
1389
border-top: 1px solid $borders_color;
1390
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1391
}
1392
&:hover {
1394
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1395
color: $fg_color;
1396
}
1397
&:disabled {
1399
border-color: transparent;
1400
background-color: transparent;
1401
color: transparent;
1402
// color: $insensitive_secondary_fg_color;
1403
}
1404
}
1405
separator { margin: 4px 0; }
1407
}
1408
menuitem {
1410
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1411
check,
1413
radio {
1414
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1415
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1416
}
1417
}
1418
.csd.popup { border-radius: 2px; }
1420
/***************
1423
* Popovers *
1424
***************/
1425
popover.background {
1426
transition: $shadow_transition;
1427
padding: 0;
1428
box-shadow: $z-depth-2;
1429
background-color: $light_color;
1430
&:backdrop { box-shadow: $z-depth-1; }
1432
&, .csd & {
1434
border-style: solid;
1435
border-width: 1px;
1436
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1437
border-radius: 2px + 1px;
1438
}
1439
> list,
1441
> .view,
1442
> toolbar {
1443
border-style: none;
1444
box-shadow: none;
1445
background-color: transparent;
1446
}
1447
&, .csd & {
1449
&.touch-selection,
1450
&.magnifier,
1451
&.osd { @extend %osd; }
1452
}
1453
separator { margin: 4px 0; }
1455
list separator { margin: 0; }
1457
}
1458
/*************
1460
* Notebooks *
1461
*************/
1462
notebook {
1463
> header {
1464
border-width: 1px;
1465
border-color: $borders_color;
1466
background-color: $bg_color;
1467
background-clip: border-box;
1468
&.top {
1470
border-bottom-style: solid;
1471
> tabs {
1472
margin-bottom: -1px;
1473
> tab {
1474
&:hover { box-shadow: inset 0 -2px $track_color; }
1476
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1478
}
1479
}
1480
}
1481
&.bottom {
1483
border-top-style: solid;
1484
> tabs {
1485
margin-top: -1px;
1486
> tab {
1487
&:hover { box-shadow: inset 0 2px $track_color; }
1489
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1491
}
1492
}
1493
}
1494
&.left {
1496
border-right-style: solid;
1497
> tabs {
1498
margin-right: -1px;
1499
> tab {
1500
&:hover { box-shadow: inset -2px 0 $track_color; }
1502
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1504
}
1505
}
1506
}
1507
&.right {
1509
border-left-style: solid;
1510
> tabs {
1511
margin-left: -1px;
1512
> tab {
1513
&:hover { box-shadow: inset 2px 0 $track_color; }
1515
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1517
}
1518
}
1519
}
1520
&.top > tabs > arrow {
1522
@extend %notebook_vert_arrows;
1523
border-top-style: none;
1525
}
1526
&.bottom > tabs > arrow {
1528
@extend %notebook_vert_arrows;
1529
border-bottom-style: none;
1531
}
1532
@at-root %notebook_vert_arrows {
1534
padding-left: 4px;
1535
padding-right: 4px;
1536
&.down {
1538
margin-left: -8px;
1539
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1540
}
1541
&.up {
1543
margin-right: -8px;
1544
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1545
}
1546
}
1547
&.left > tabs > arrow {
1549
@extend %notebook_horz_arrows;
1550
border-left-style: none;
1552
}
1553
&.right > tabs > arrow {
1555
@extend %notebook_horz_arrows;
1556
border-right-style: none;
1558
}
1559
@at-root %notebook_horz_arrows {
1561
padding-top: 4px;
1562
padding-bottom: 4px;
1563
&.down {
1565
margin-top: -8px;
1566
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1567
}
1568
&.up {
1570
margin-bottom: -8px;
1571
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1572
}
1573
}
1574
> tabs > arrow {
1576
@extend %button_basic.flat;
1577
min-height: 16px;
1579
min-width: 16px;
1580
border-radius: 0;
1581
}
1582
tab {
1584
transition: $material_transition;
1585
min-height: 24px;
1586
min-width: 24px;
1587
padding: 6px 12px;
1588
outline-offset: -6px;
1590
border-width: 1px; // for reorderable tabs
1592
border-color: transparent; //
1593
color: $secondary_fg_color;
1595
font-weight: 500;
1596
&:hover {
1598
color: $fg_color;
1599
&.reorderable-page {
1601
border-color: $borders_color;
1602
background-color: $secondary_base_color;
1603
}
1604
}
1605
&:disabled { color: $insensitive_secondary_fg_color; }
1607
&:checked {
1609
animation: tab_ripple_effect $material_slower * 3 $material_ease_out;
1610
color: $fg_color;
1611
&:disabled { color: $insensitive_fg_color; }
1613
&.reorderable-page {
1615
border-color: $borders_color;
1616
background-color: $base_color;
1617
}
1618
}
1619
// colors the button like the label, overridden otherwise
1621
button.flat {
1622
// FIXME: generalize .small-button?
1623
min-width: $small_size;
1624
min-height: $small_size;
1625
padding: 0;
1626
@extend %button_basic.image-button;
1628
&:last-child {
1630
margin-left: 6px;
1631
margin-right: -6px;
1632
}
1633
&:first-child {
1635
margin-left: -6px;
1636
margin-right: 6px;
1637
}
1638
}
1639
}
1640
&.top,
1642
&.bottom {
1643
tabs {
1644
padding-left: 8px;
1645
padding-right: 8px;
1646
&:not(:only-child) {
1648
&:first-child { margin-left: 0; }
1649
&:last-child { margin-right: 0; }
1650
}
1651
tab {
1653
&.reorderable-page {
1654
margin: 0 -1px;
1655
border-style: none solid;
1656
}
1657
}
1658
}
1659
}
1660
&.left,
1662
&.right {
1663
tabs {
1664
padding-top: 8px;
1665
padding-bottom: 8px;
1666
&:not(:only-child) {
1668
&:first-child { margin-top: 0; }
1669
&:last-child { margin-bottom: 0; }
1670
}
1671
tab {
1673
&.reorderable-page {
1674
margin: -1px 0;
1675
border-style: solid none;
1676
}
1677
}
1678
}
1679
}
1680
}
1681
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1683
background-color: $base_color;
1684
entry,
1686
spinbutton:not(.vertical) { @extend %entry.flat; }
1687
revealer entry,
1689
revealer spinbutton:not(.vertical) { @extend %entry; }
1690
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1692
}
1693
}
1694
/**************
1697
* Scrollbars *
1698
**************/
1699
scrollbar {
1700
$_slider_min_length: 24px;
1701
// disable steppers
1703
@at-root * {
1704
-GtkScrollbar-has-backward-stepper: false;
1705
-GtkScrollbar-has-forward-stepper: false;
1706
}
1707
transition: $material_transition;
1709
background-color: $base_color;
1710
background-clip: $extra_background_clip;
1711
// scrollbar border
1713
&.top { border-bottom: 1px solid $borders_color; }
1714
&.bottom { border-top: 1px solid $borders_color; }
1715
&.left { border-right: 1px solid $borders_color; }
1716
&.right { border-left: 1px solid $borders_color; }
1717
// slider
1719
slider {
1720
transition: all $material_faster $material_ease_out, margin 0, border-width 0;
1721
min-width: 8px;
1722
min-height: 8px;
1723
border: 4px solid transparent;
1724
border-radius: 100px;
1725
background-clip: padding-box;
1726
background-color: $tertiary_fg_color;
1727
&:hover { background-color: $secondary_fg_color; }
1729
&:active { background-color: $fg_color; }
1731
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1733
}
1734
&.fine-tune {
1736
slider {
1737
transition: all $material_faster $material_ease_out, margin 0, border-width 0, min-width 0, min-height 0;
1738
min-width: 4px;
1739
min-height: 4px;
1740
}
1741
&.horizontal slider { margin: 2px 0; }
1743
&.vertical slider { margin: 0 2px; }
1745
}
1746
&.overlay-indicator {
1748
&:not(.dragging):not(.hovering) {
1749
border-color: transparent;
1750
background-color: transparent;
1751
slider {
1753
min-width: 4px;
1754
min-height: 4px;
1755
margin: 2px;
1756
border: 2px solid scale-alpha($base_color, $lower_opacity);
1757
}
1758
button {
1760
min-width: 4px;
1761
min-height: 4px;
1762
margin: 2px;
1763
border: 2px solid scale-alpha($base_color, $lower_opacity);
1764
border-radius: 100px;
1765
background-color: $tertiary_fg_color;
1766
background-clip: padding-box;
1767
-gtk-icon-source: none;
1768
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1770
}
1771
&.horizontal {
1773
slider { min-width: $_slider_min_length; }
1774
button { min-width: 8px; }
1776
}
1777
&.vertical {
1779
slider { min-height: $_slider_min_length; }
1780
button { min-height: 8px; }
1782
}
1783
}
1784
&.dragging,
1786
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1787
}
1788
&.horizontal slider { min-width: $_slider_min_length; }
1790
&.vertical slider { min-height: $_slider_min_length; }
1792
// button styling
1794
button {
1795
@extend %button_basic.flat;
1796
min-width: 16px;
1797
min-height: 16px;
1798
padding: 0;
1799
border-radius: 0;
1800
}
1801
// button icons
1803
&.vertical {
1804
button {
1805
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1806
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1808
}
1809
}
1810
&.horizontal {
1812
button {
1813
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1814
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1816
}
1817
}
1818
}
1819
/**********
1822
* Switch *
1823
**********/
1824
switch {
1825
transition: $material_transition;
1826
margin: $container_padding 0;
1827
border: 4px solid transparent;
1828
border-radius: 100px;
1829
background-color: $track_color;
1830
background-clip: padding-box;
1831
font-size: 0;
1832
&:disabled { color: $insensitive_fg_color; }
1834
&:checked {
1836
background-color: scale-alpha($accent_bg_color, 0.5);
1837
&:disabled {
1839
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1840
color: $insensitive_fg_color;
1841
}
1842
}
1843
slider {
1845
@include entry(normal);
1846
transition: $material_transition, margin 0;
1848
min-width: $small_size;
1849
min-height: $small_size;
1850
margin: -4px 0 -4px -4px;
1851
-gtk-outline-radius: 100px;
1852
border-radius: 100px;
1853
}
1854
&:hover slider { @include entry(focus); }
1856
&:disabled slider { @include entry(insensitive); }
1858
&:checked slider {
1860
transition: $material_transition, margin 0, background-image 0, background-color 0 $material_slower;
1861
animation: needs_attention $material_slower $material_ease_out;
1862
margin: -4px -4px -4px 0;
1863
background-color: $accent_bg_color;
1864
color: $selected_fg_color;
1865
}
1866
&:checked:disabled slider { animation: none; }
1868
row:selected & {
1870
}
1871
}
1872
/*************************
1875
* Check and Radio items *
1876
*************************/
1877
// draw regular check and radio items using our PNG assets
1878
// all assets are rendered from assets.svg. never add pngs directly
1879
//selection-mode
1881
@each $s,$as in ('','-selectionmode'),
1882
(':hover', '-hover-selectionmode'),
1883
(':checked', '-checked-selectionmode'),
1884
(':checked:hover', '-checked-hover-selectionmode') {
1885
.view.content-view.check#{$s}:not(list) {
1886
-gtk-icon-shadow: $z-depth-1;
1887
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1888
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1889
margin: 8px;
1890
background-color: transparent;
1891
}
1892
}
1893
checkbutton.text-button,
1895
radiobutton.text-button {
1896
// this is for a nice focus on check and radios text
1897
padding: 2px;
1898
outline-offset: 0;
1899
label:not(:only-child) { margin: 0 4px; }
1901
}
1902
check,
1904
radio {
1905
min-height: 24px;
1906
min-width: 24px;
1907
margin: -12px;
1908
padding: 12px;
1909
@extend %button_basic.flat;
1911
@extend %button_basic.image-button;
1913
&:checked, &:checked:disabled { background-color: transparent; }
1915
&:checked, &:indeterminate { color: $accent_bg_color; }
1917
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1919
// &:only-child { margin: -12px; }
1921
row &:not(:checked):not(:indeterminate) {
1923
color: gtkalpha(currentColor, $enabled_opacity);
1924
&:hover, &:active { color: currentColor; }
1926
}
1927
menu menuitem & {
1929
transition: none;
1930
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1931
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1933
&, &:hover, &:disabled {
1935
background-image: none;
1936
// color: inherit;
1937
// animation: none;
1938
}
1939
}
1940
}
1941
%check,
1943
check {
1944
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1945
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1946
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1948
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1949
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1951
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1952
}
1953
%radio,
1955
radio {
1956
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1957
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1958
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1960
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1961
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1963
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1964
border-image: -gtk-gradient(radial,
1966
center center, 0,
1967
center center, 0.001,
1968
to($accent_bg_color),
1969
to(transparent))
1970
24 / 24px;
1971
&:checked {
1973
border-image: -gtk-gradient(radial,
1974
center center, 0,
1975
center center, (10 / 48 / 2),
1976
to($accent_bg_color),
1977
to(transparent))
1978
24 / 24px;
1979
}
1980
&:checked:disabled {
1982
border-image: -gtk-gradient(radial,
1983
center center, 0,
1984
center center, (10 / 48 / 2),
1985
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1986
to(transparent))
1987
24 / 24px;
1988
}
1989
&:indeterminate:checked {
1991
border-image: -gtk-gradient(radial,
1992
center center, 0,
1993
center center, 0.001,
1994
to($accent_bg_color),
1995
to(transparent))
1996
24 / 24px;
1997
}
1998
}
1999
// let's animate things
2001
@keyframes check_check {
2002
from { -gtk-icon-transform: rotate(90deg); }
2003
to { -gtk-icon-transform: unset; }
2004
}
2005
@keyframes check_radio { // FIXME: cannot animate border-image
2007
from {
2008
border-image: -gtk-gradient(radial,
2009
center center, 0,
2010
center center, 0.001,
2011
to($accent_bg_color),
2012
to(transparent))
2013
24 / 24px;
2014
}
2015
to {
2017
border-image: -gtk-gradient(radial,
2018
center center, 0,
2019
center center, (10 / 48 / 2),
2020
to($accent_bg_color),
2021
to(transparent))
2022
24 / 24px;
2023
}
2024
}
2025
@keyframes check_indeterminate {
2027
from { -gtk-icon-transform: unset; }
2028
50% { -gtk-icon-transform: scale(0, 1); }
2029
to { -gtk-icon-transform: unset; }
2030
}
2031
%check_checked,
2033
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
2034
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2036
// %radio_checked,
2038
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
2039
// radio:not(:indeterminate):checked:active { animation: check_radio $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2041
%indeterminate_checked,
2043
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
2044
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2046
// no animations in menus
2048
menu menuitem {
2049
check:not(:indeterminate):checked,
2050
radio:not(:indeterminate):checked,
2051
check:indeterminate:checked,
2052
radio:indeterminate:checked { animation: none; }
2053
}
2054
treeview.view check,
2056
treeview.view radio {
2057
padding: 0;
2058
&:checked:hover, &:selected:checked:hover { background-image: none; }
2060
& {
2062
color: $secondary_fg_color;
2063
&:hover, &:active { color: $fg_color; }
2065
&:disabled { color: $insensitive_secondary_fg_color; }
2067
&:checked, &:indeterminate { color: $accent_bg_color; }
2069
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2071
}
2072
&:selected {
2074
color: $secondary_selected_fg_color;
2075
&:hover, &:active { color: $selected_fg_color; }
2077
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2079
&:checked, &:indeterminate { color: $accent_bg_color; }
2081
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2083
}
2084
}
2085
treeview.view radio:checked {
2087
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2088
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2089
border-image: none;
2090
}
2091
/************
2094
* GtkScale *
2095
************/
2096
scale {
2097
// sizing
2098
$_marks_lenght: 8px;
2099
$_marks_distance: 8px;
2100
min-height: 12px;
2102
min-width: 12px;
2103
padding: 12px;
2104
* { transition: $material_transition; }
2106
// the slider is inside the trough, so to have make it bigger there's a negative margin
2108
slider {
2109
min-height: $small_size;
2110
min-width: $small_size;
2111
margin: -10px;
2112
}
2113
// the backing bit
2115
trough {
2116
outline-offset: 2px;
2117
background-color: $track_color;
2118
&:disabled { color: $insensitive_fg_color; }
2120
}
2121
// the colored part of the backing bit
2123
highlight {
2124
background-color: $accent_bg_color;
2125
&:disabled { background-color: transparent; }
2127
}
2128
// this is another differently styled part of the backing bit, the most relevant use case is for example
2130
// in media player to indicate how much video stream as been cached
2131
fill {
2132
background-color: $track_color;
2133
&:disabled { background-color: transparent; }
2135
}
2136
slider {
2138
transition: all $material_faster $material_ease;
2139
// border-radius: 100%;
2140
// background-color: $accent_bg_color;
2141
background-repeat: no-repeat;
2142
background-position: center;
2143
@each $s,$as in ('',''),
2145
(':disabled','-insensitive') {
2146
&#{$s} {
2147
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2148
background-image: -gtk-scaled(url('#{$_url}.png'),
2149
url('#{$_url}@2.png'));
2150
}
2151
}
2152
background-size: calc(100% - 8px);
2154
&:hover { background-size: calc(100% - 4px); }
2156
&:active { background-size: calc(100% - 0px); }
2158
}
2159
// click-and-hold the slider to activate
2161
&.fine-tune {
2162
// to make the slider shrink in fine-tune mode
2163
slider { background-size: calc(100% - 12px); }
2164
}
2165
value { color: gtkalpha(currentColor, $hint_opacity); }
2167
marks {
2169
color: $track_color;
2170
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2172
(bottom, bottom, top),
2173
(top, left, right),
2174
(bottom, right, left) {
2175
&.#{$marks_class} {
2176
margin-#{$marks_margin}: $_marks_distance;
2177
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2178
}
2179
}
2180
}
2181
&.horizontal {
2183
indicator {
2184
min-height: $_marks_lenght;
2185
min-width: 1px;
2186
}
2187
}
2188
&.vertical {
2190
indicator {
2191
min-height: 1px;
2192
min-width: $_marks_lenght;
2193
}
2194
}
2195
// *WARNING* scale with marks madness following
2197
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2199
$suffix: if($variant == 'light', '', '-dark');
2200
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2202
('vertical', 'vert') {
2203
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2204
('scale-has-marks-below', ':first-child:not(:only-child)') {
2205
@each $state, $state_infix in ('', ''),
2206
(':disabled', '-insensitive') {
2207
&.#{$dir_class} {
2208
%#{$marks_infix}-#{$dir_infix},
2209
contents#{$nth_child} > trough > slider {
2210
&#{$state} {
2211
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2212
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2214
}
2215
@if $dir_class == 'horizontal' {
2217
min-height: 30px;
2218
min-width: $small_size;
2219
@if $marks_infix == 'scale-has-marks-above' {
2221
margin-top: -16px;
2222
background-position: center calc(100% - 4px);
2224
&:hover { background-position: center calc(100% - 2px); }
2226
&:active { background-position: center calc(100% - 0px); }
2228
}
2229
@if $marks_infix == 'scale-has-marks-below' {
2231
margin-bottom: -16px;
2232
background-position: center calc(4px);
2234
&:hover { background-position: center calc(2px); }
2236
&:active { background-position: center calc(0px); }
2238
}
2239
}
2240
@if $dir_class == 'vertical' {
2242
min-height: $small_size;
2243
min-width: 30px;
2244
@if $marks_infix == 'scale-has-marks-above' {
2246
margin-left: -16px;
2247
background-position: calc(4px) center;
2249
&:hover { background-position: calc(2px) center; }
2251
&:active { background-position: calc(0px) center; }
2253
}
2254
@if $marks_infix == 'scale-has-marks-below' {
2256
margin-right: -16px;
2257
background-position: calc(100% - 4px) center;
2259
&:hover { background-position: calc(100% - 2px) center; }
2261
&:active { background-position: calc(100% - 0px) center; }
2263
}
2264
}
2265
}
2266
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2268
&.fine-tune contents#{$nth_child} > trough > slider {
2269
// bigger negative margins to make the trough grow here as well
2270
@if $dir_class == 'horizontal' {
2272
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2273
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2275
}
2276
@if $dir_class == 'vertical' {
2278
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2279
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2281
}
2282
}
2283
}
2284
}
2285
}
2286
}
2287
&.color {
2289
min-height: 0;
2290
min-width: 0;
2291
&.horizontal {
2293
padding: 0 0 12px 0;
2294
trough {
2296
padding-bottom: $bar_size;
2297
}
2298
slider {
2300
@extend %scale-has-marks-above-horz;
2301
margin-bottom: -10px - $bar_size;
2303
margin-top: 0;
2304
}
2305
}
2306
&.vertical {
2308
&:dir(ltr) {
2309
padding: 0 0 0 12px;
2310
trough {
2312
padding-left: $bar_size;
2313
}
2314
slider {
2316
@extend %scale-has-marks-below-vert;
2317
margin-left: -10px - $bar_size;
2319
margin-right: 0;
2320
}
2321
}
2322
&:dir(rtl) {
2324
padding: 0 12px 0 0;
2325
trough {
2327
padding-right: $bar_size;
2328
}
2329
slider {
2331
@extend %scale-has-marks-above-vert;
2332
margin-right: -10px - $bar_size;
2334
margin-left: 0;
2335
}
2336
}
2337
}
2338
&.fine-tune {
2340
&.horizontal {
2341
slider {
2342
@extend %scale-has-marks-above-horz-fine-tune;
2343
}
2344
}
2345
&.vertical {
2347
&:dir(ltr) {
2348
slider {
2349
@extend %scale-has-marks-below-vert-fine-tune;
2350
}
2351
}
2352
&:dir(rtl) {
2354
slider {
2355
@extend %scale-has-marks-above-vert-fine-tune;
2356
}
2357
}
2358
}
2359
}
2360
}
2361
}
2362
/*****************
2365
* Progress bars *
2366
*****************/
2367
progressbar {
2368
// sizing
2369
&.horizontal {
2370
trough,
2371
progress { min-height: $bar_size; }
2372
}
2373
&.vertical {
2375
trough,
2376
progress { min-width: $bar_size; }
2377
}
2378
// FIXME: insensitive state missing and some other state should be set probably
2380
color: $tertiary_fg_color;
2381
font-size: smaller;
2382
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2384
progress { background-color: $selected_bg_color; }
2386
&.osd { // progressbar.osd used for epiphany page loading progress
2388
// min-width: $bar_size;
2389
// min-height: $bar_size;
2390
// background-color: transparent;
2391
// trough { background-color: transparent; }
2393
progress {
2395
}
2396
}
2397
}
2398
/*************
2401
* Level Bar *
2402
*************/
2403
levelbar {
2404
block {
2405
min-width: $medium_size;
2406
min-height: $bar_size;
2407
}
2408
&.vertical block {
2410
min-width: $bar_size;
2411
min-height: $medium_size;
2412
}
2413
trough {
2415
padding: 2px;
2416
border-radius: 2px;
2417
@include entry(normal);
2419
&:disabled { @include entry(insensitive); }
2421
}
2422
&.horizontal.discrete block { margin: 0 1px; }
2424
&.vertical.discrete block { margin: 1px 0; }
2426
&.horizontal.discrete trough { padding: 2px 1px; }
2428
&.vertical.discrete trough { padding: 1px 2px; }
2430
block {
2432
&.low {
2433
background-color: $warning_color;
2434
}
2435
&.high,
2437
&:not(.empty) {
2438
background-color: $selected_bg_color;
2439
}
2440
&.full {
2442
background-color: $success_color;
2443
}
2444
&.empty {
2446
background-color: $track_color;
2447
color: $insensitive_fg_color;
2448
}
2449
}
2450
}
2451
/****************
2454
* Print dialog *
2455
*****************/
2456
printdialog {
2457
paper {
2458
padding: 0;
2459
border: 1px solid $borders_color;
2460
background: $base_color;
2461
color: $fg_color;
2462
}
2463
.dialog-action-box { margin: 12px; }
2465
}
2466
/**********
2469
* Frames *
2470
**********/
2471
frame > border,
2472
.frame {
2473
margin: 0;
2474
padding: 0;
2475
border: 1px solid $borders_color;
2476
border-radius: 0;
2477
box-shadow: none;
2478
&.flat { border-style: none; }
2480
}
2481
actionbar > revealer > box {
2483
padding: $container_padding;
2484
border-top: 1px solid $borders_color;
2485
}
2486
scrolledwindow {
2488
viewport.frame { // avoid double borders when viewport inside scrolled window
2489
border-style: none;
2490
}
2491
// This is used when content is touch-dragged past boundaries.
2493
// draws a box on top of the content, the size changes programmatically.
2494
overshoot {
2495
&.top { @include overshoot(top); }
2496
&.bottom { @include overshoot(bottom); }
2498
&.left { @include overshoot(left); }
2500
&.right { @include overshoot(right); }
2502
}
2503
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2505
undershoot {
2506
&.top { @include undershoot(top); }
2507
&.bottom { @include undershoot(bottom); }
2509
&.left { @include undershoot(left); }
2511
&.right { @include undershoot(right); }
2513
}
2514
junction { // the small square between two scrollbars
2516
border-style: solid none none solid;
2517
border-width: 1px;
2518
border-color: $borders_color;
2519
background-color: $base_color;
2520
&:dir(rtl) { border-style: solid solid none none; }
2522
}
2523
}
2524
//vbox and hbox separators
2526
separator {
2527
min-width: 1px;
2528
min-height: 1px;
2529
background: $borders_color;
2530
}
2531
/*********
2534
* Lists *
2535
*********/
2536
list {
2537
border-color: $borders_color;
2538
background-color: $base_color;
2539
row { padding: 2px; }
2541
}
2542
row {
2544
transition: $material_transition;
2545
&:hover { transition: none; }
2547
&.activatable {
2549
background-image: radial-gradient(circle farthest-corner at center,
2550
gtkalpha(currentColor, 0) 100%,
2551
transparent 0%),
2552
image(gtkalpha(currentColor, 0));
2553
&:hover {
2555
background-image: radial-gradient(circle farthest-corner at center,
2556
gtkalpha(currentColor, 0) 100%,
2557
transparent 0%),
2558
image(gtkalpha(currentColor, 0.05));
2559
}
2560
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2562
&:active {
2563
transition: $material_transition, background-image 0;
2564
animation: row_ripple_effect $material_slower $material_ease_out forwards;
2565
}
2566
}
2567
&:selected { @extend %selected_items; }
2569
}
2570
/*********************
2573
* App Notifications *
2574
*********************/
2575
.app-notification,
2576
.app-notification.frame {
2577
@extend %osd;
2578
@extend toolbar.osd;
2580
margin: 8px;
2582
border { border: none; }
2584
}
2585
/*************
2588
* Expanders *
2589
*************/
2590
expander {
2591
arrow {
2592
transition: all $material_faster $material_ease;
2593
min-width: 16px;
2594
min-height: 16px;
2595
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2596
-gtk-icon-transform: rotate(-90deg);
2597
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2599
&:checked { -gtk-icon-transform: unset; }
2601
color: $secondary_fg_color;
2603
&:hover, &:active { color: $fg_color; }
2605
&:disabled { color: $insensitive_secondary_fg_color; }
2607
&:selected {
2609
color: $secondary_selected_fg_color;
2610
&:hover, &:active { color: $selected_fg_color; }
2612
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2614
}
2615
}
2616
}
2617
/************
2620
* Calendar *
2621
***********/
2622
calendar {
2623
padding: 1px;
2624
border: 1px solid $borders_color;
2625
color: $fg_color;
2626
&:disabled { color: $insensitive_fg_color; }
2628
&:selected {
2630
@extend %selected_items;
2631
border-radius: 2px + 1px;
2633
}
2634
&.header {
2636
border-style: none none solid;
2637
border-radius: 0;
2638
}
2639
&.button { @extend %button_basic.flat; }
2641
&.highlight {
2643
color: gtkalpha(currentColor, $hint_opacity);
2644
font-weight: 500;
2645
}
2646
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2648
}
2649
/***********
2652
* Dialogs *
2653
***********/
2654
messagedialog { // Message Dialog styling
2655
&.background { background-color: $light_color; }
2656
.titlebar {
2658
min-height: $small_size;
2659
border-style: none;
2660
box-shadow: inset 0 1px $highlight_color;
2661
background-color: $light_color;
2662
}
2663
&.csd { // rounded bottom border styling for csd version
2665
&.background {
2666
// bigger radius for better antialiasing
2667
border-bottom-left-radius: 2px;
2668
border-bottom-right-radius: 2px;
2669
}
2670
.dialog-action-area button {
2672
padding: 8px 16px;
2673
border-top: 1px solid $borders_color;
2674
border-radius: 0;
2675
@extend %button_basic.flat;
2677
&:first-child{ border-bottom-left-radius: 2px; }
2679
&:last-child { border-bottom-right-radius: 2px; }
2681
}
2682
}
2683
}
2684
filechooser {
2686
.dialog-action-box { border-top: 1px solid $borders_color; }
2687
#pathbarbox { border-bottom: 1px solid $borders_color; }
2689
}
2690
filechooserbutton:drop(active) {
2692
box-shadow: none;
2693
}
2694
/***********
2697
* Sidebar *
2698
***********/
2699
.sidebar {
2700
border-style: none;
2701
background-color: $light_color;
2702
@at-root %sidebar_left,
2704
&:dir(ltr),
2705
&.left,
2706
&.left:dir(rtl) {
2707
border-right: 1px solid $borders_color;
2708
border-left-style: none;
2709
}
2710
@at-root %sidebar_right
2712
&:dir(rtl),
2713
&.right {
2714
border-left: 1px solid $borders_color;
2715
border-right-style: none;
2716
}
2717
list { background-color: transparent; }
2719
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2721
}
2722
stacksidebar {
2724
&.sidebar {
2725
&:dir(ltr),
2726
&.left,
2727
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2728
&:dir(rtl),
2730
&.right { list { @extend %sidebar_right; }}
2731
}
2732
row {
2734
padding: 10px 4px;
2735
> label {
2737
padding-left: 6px;
2738
padding-right: 6px;
2739
}
2740
&.needs-attention > label { @extend %needs_attention; }
2742
}
2743
}
2744
/****************
2747
* File chooser *
2748
****************/
2749
placessidebar {
2750
> viewport.frame { border-style: none; }
2751
list { padding: (4px - 3px) 0 4px; }
2753
row {
2755
// Needs overriding of the GtkListBoxRow padding
2756
min-height: 32px;
2757
margin: -1px 0; // Remove unknown margins
2758
padding: 0;
2759
// Using margins/padding directly in the SidebarRow
2761
// will make the animation of the new bookmark row jump
2762
> revealer { padding: 0 12px; }
2763
&:selected { color: $selected_fg_color; }
2765
&:disabled { color: $insensitive_fg_color; }
2767
image.sidebar-icon {
2769
opacity: $hint_opacity; // dim the device icons
2770
&:dir(ltr) { padding-right: 8px; }
2772
&:dir(rtl) { padding-left: 8px; }
2773
}
2774
label.sidebar-label {
2776
&:dir(ltr) { padding-right: 2px; }
2777
&:dir(rtl) { padding-left: 2px; }
2778
}
2779
@at-root button.sidebar-button {
2781
@extend %button_basic.flat;
2782
min-height: $small_size;
2784
min-width: $small_size;
2785
margin-top: 0;
2786
margin-bottom: 0;
2787
padding: 0;
2788
border-radius: 100%;
2789
-gtk-outline-radius: 100%;
2790
row:selected & { @extend %button_selected.flat; }
2792
}
2793
&.sidebar-placeholder-row {
2795
min-height: 2px;
2796
padding: 0 8px;
2797
background-image: image($accent_bg_color);
2798
background-clip: content-box;
2799
}
2800
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2802
&:drop(active):not(:disabled) {
2804
box-shadow: inset 0 0 0 2px $accent_bg_color;
2805
&:selected {
2807
// background-color: $accent_bg_color;
2808
// color: $selected_fg_color;
2809
}
2810
}
2811
}
2812
}
2813
placesview {
2815
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2816
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2818
// this selects the "connect to server" label
2820
> actionbar > revealer > box > label {
2821
padding-left: 8px;
2822
padding-right: 8px;
2823
}
2824
}
2825
/*********
2828
* Paned *
2829
*********/
2830
paned {
2831
> separator {
2832
min-width: 1px;
2833
min-height: 1px;
2834
-gtk-icon-source: none; // defeats the ugly default handle decoration
2835
border-style: none; // just to be sure
2836
background-color: transparent;
2837
// workaround, using background istead of a border since the border will get rendered twice (?)
2838
background-image: image($borders_color);
2839
background-size: 1px 1px;
2840
&.wide {
2842
min-width: 6px;
2843
min-height: 6px;
2844
background-color: $bg_color;
2845
background-image: image($borders_color), image($borders_color);
2846
background-size: 1px 1px, 1px 1px;
2847
}
2848
}
2849
&.horizontal > separator {
2851
background-repeat: repeat-y;
2852
&:dir(ltr) {
2854
margin: 0 -8px 0 0;
2855
padding: 0 8px 0 0;
2856
background-position: left;
2857
}
2858
&:dir(rtl) {
2860
margin: 0 0 0 -8px;
2861
padding: 0 0 0 8px;
2862
background-position: right;
2863
}
2864
&.wide {
2866
margin: 0;
2867
padding: 0;
2868
background-repeat: repeat-y, repeat-y;
2869
background-position: left, right;
2870
}
2871
}
2872
&.vertical > separator {
2874
margin: 0 0 -8px 0;
2875
padding: 0 0 8px 0;
2876
background-repeat: repeat-x;
2877
background-position: top;
2878
&.wide {
2880
margin: 0;
2881
padding: 0;
2882
background-repeat: repeat-x, repeat-x;
2883
background-position: bottom, top;
2884
}
2885
}
2886
}
2887
/**************
2890
* GtkInfoBar *
2891
**************/
2892
infobar {
2893
border-style: none;
2894
&.info { background-color: $info_bg_color; }
2896
&.question { background-color: $question_bg_color; }
2898
&.warning { background-color: $warning_bg_color; }
2900
&.error { background-color: $error_bg_color; }
2902
&.info,
2904
&.question,
2905
&.warning,
2906
&.error {
2907
> label, & { color: $selected_fg_color; }
2908
button { @extend %button_selected; }
2910
selection { }
2912
*:link { @extend %link_selected; }
2914
}
2915
}
2916
/************
2919
* Tooltips *
2920
************/
2921
tooltip {
2922
&.background {
2923
// background-color needs to be set this way otherwise it gets drawn twice
2924
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2925
background-color: scale-alpha($base_color, $higher_opacity);
2926
}
2927
// @extend %osd;
2929
// padding: 4px; /* not working */
2931
border-radius: 2px;
2932
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2933
// FIXME: we need a border or tooltips vanish on black background.
2935
decoration { background-color: transparent; }
2936
label {
2938
min-height: 32px - 6px * 2;
2939
padding: 2px 8px - 6px;
2940
}
2941
* { // Yeah this is ugly
2943
padding: 0;
2944
background-color: transparent;
2945
color: inherit;
2946
}
2947
}
2948
/*****************
2951
* Color Chooser *
2952
*****************/
2953
colorswatch {
2954
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2955
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2956
// applied to the overlay box.
2957
// base color corners rounding
2959
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2960
// sports a bigger radius.
2961
// nth-child is needed by the custom color strip.
2962
&.top {
2964
border-top-left-radius: $material_radius + 0.5px;
2965
border-top-right-radius: $material_radius + 0.5px;
2966
overlay {
2968
border-top-left-radius: $material_radius;
2969
border-top-right-radius: $material_radius;
2970
}
2971
}
2972
&.bottom {
2974
border-bottom-left-radius: $material_radius + 0.5px;
2975
border-bottom-right-radius: $material_radius + 0.5px;
2976
overlay {
2978
border-bottom-left-radius: $material_radius;
2979
border-bottom-right-radius: $material_radius;
2980
}
2981
}
2982
&.left,
2984
&:first-child:not(.top) {
2985
border-top-left-radius: $material_radius + 0.5px;
2986
border-bottom-left-radius: $material_radius + 0.5px;
2987
overlay {
2989
border-top-left-radius: $material_radius;
2990
border-bottom-left-radius: $material_radius;
2991
}
2992
}
2993
&.right,
2995
&:last-child:not(.bottom) {
2996
border-top-right-radius: $material_radius + 0.5px;
2997
border-bottom-right-radius: $material_radius + 0.5px;
2998
overlay {
3000
border-top-right-radius: $material_radius;
3001
border-bottom-right-radius: $material_radius;
3002
}
3003
}
3004
&.dark overlay { color: white; }
3006
&.light overlay { color: scale-alpha(black, 0.8); }
3008
&.dark { color: white; } // for focus ring
3010
&.light { color: scale-alpha(black, 0.8); } // for focus ring
3012
&:drop(active) {
3014
box-shadow: none;
3015
&.light overlay {
3017
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3018
}
3019
&.dark overlay {
3021
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3022
}
3023
}
3024
overlay {
3026
transition: $shadow_transition;
3027
box-shadow: $z-depth-1;
3028
&:hover { box-shadow: $z-depth-2; }
3030
}
3031
&#add-color-button {
3033
border-radius: $material_radius $material_radius 0 0;
3034
color: white; // for focus ring
3035
&:only-child { border-radius: $material_radius; }
3037
overlay {
3039
background-image: linear-gradient(to right,
3040
$error_bg_color 25%,
3041
$warning_bg_color 25%, $warning_bg_color 50%,
3042
$info_bg_color 50%, $info_bg_color 75%,
3043
$question_bg_color 75%);
3044
color: white;
3045
}
3046
}
3047
&:disabled {
3049
opacity: $disabled_opacity;
3050
overlay { box-shadow: none; }
3052
}
3053
row:selected & {
3055
}
3056
&#editor-color-sample {
3058
border-radius: $material_radius + 0.5px;
3059
overlay { border-radius: $material_radius; }
3061
// overlay:hover { box-shadow: $z-depth-1; }
3063
}
3064
}
3065
// colorscale popup
3067
colorchooser .popover.osd {
3068
transition: $shadow_transition;
3069
border-radius: 2px;
3070
box-shadow: $z-depth-2;
3071
background-color: $base_color;
3072
&:backdrop { box-shadow: $z-depth-1; }
3074
spinbutton:not(.vertical) { @extend %entry.flat; }
3076
}
3077
/********
3080
* Misc *
3081
********/
3082
//content view (grid/list)
3083
.content-view {
3084
background-color: $bg_color;
3085
// &:hover { -gtk-icon-effect: highlight; }
3087
rubberband { @extend rubberband; }
3089
}
3090
.scale-popup {
3092
.osd & { @extend %osd; }
3093
.osd & button.flat { //FIXME: quick hack, redo properly
3095
}
3096
button { // +/- buttons on GtkVolumeButton popup
3098
}
3099
}
3100
/**********************
3103
* Window Decorations *
3104
*********************/
3105
decoration {
3106
transition: $shadow_transition;
3107
border-radius: 2px 2px 0 0;
3108
box-shadow: $z-depth-4, 0 16px 16px transparent;
3109
// FIXME rationalize shadows
3111
// this is used for the resize cursor area
3113
margin: 8px;
3114
&:backdrop {
3116
// the transparent shadow here is to enforce that the shadow extents don't
3117
// change when we go to backdrop, to prevent jumping windows.
3118
// The biggest shadow should be in the same order then in the active state
3119
// or the jumping will happen during the transition.
3120
box-shadow: $z-depth-2, 0 16px 16px transparent;
3121
}
3122
.maximized &,
3124
.fullscreen &,
3125
.tiled & { border-radius: 0; }
3126
.popup & { box-shadow: none; }
3128
// server-side decorations as used by mutter
3130
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3131
.csd.popup & {
3133
border-radius: 2px;
3134
box-shadow: $z-depth-2;
3135
}
3136
tooltip.csd & {
3138
border-radius: 2px;
3139
box-shadow: $z-depth-2;
3140
}
3141
messagedialog.csd & {
3143
border-radius: 2px;
3144
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3145
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3147
}
3148
.solid-csd & {
3150
margin: 0;
3151
padding: 4px;
3152
// border: solid 1px $borders_color;
3153
border-radius: 0;
3154
box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $secondary_highlight_color;
3155
background-color: $borders_color;
3156
}
3157
}
3158
// Window Close button
3160
button.titlebutton {
3161
// @extend %button_basic.flat;
3162
@extend %button_basic.image-button;
3164
.selection-mode & {
3166
}
3167
}
3168
// catch all extend :)
3171
%selected_items {
3173
background-color: $selected_bg_color;
3174
@at-root %nobg_selected_items, & {
3176
color: $selected_fg_color;
3177
&:disabled { color: $insensitive_selected_fg_color; }
3179
}
3180
}
3181
.monospace { font-family: monospace; }
3183
/**********************
3186
* Touch Copy & Paste *
3187
*********************/
3188
//touch selection handlebars for the Popover.osd above
3189
cursor-handle {
3190
border-radius: 100px;
3191
background-color: $accent_bg_color;
3192
background-image: none;
3193
&.top:dir(ltr), &.bottom:dir(rtl) {
3195
padding-left: 6px;
3196
border-top-right-radius: 0;
3197
}
3198
&.bottom:dir(ltr), &.top:dir(rtl) {
3200
padding-right: 6px;
3201
border-top-left-radius: 0;
3202
}
3203
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3205
-GtkWidget-text-handle-width: 24;
3206
-GtkWidget-text-handle-height: 30;
3207
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3209
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3210
url('#{$_url}@2.png'));
3211
}
3212
}
3213
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3215
button.circular { // FIXME: aggregate to buttons
3217
border-radius: 100px;
3218
-gtk-outline-radius: 100px;
3219
label { padding: 0; }
3221
}
3222
// shortcut window keys
3224
.keycap {
3225
min-width: 28px - 8px * 2;
3226
min-height: 28px - 2px;
3227
margin-top: 2px;
3228
padding-bottom: 2px;
3229
padding-left: 8px;
3230
padding-right: 8px;
3231
border: solid 1px $borders_color;
3233
border-radius: 2px + 1px;
3234
box-shadow: inset 0 -2px $borders_color;
3235
background-color: $base_color;
3236
color: $fg_color;
3237
font-size: smaller;
3238
}
3239
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3241
transition: $material_transition;
3242
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3243
caret-color: $accent_bg_color;
3244
}
3245
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3247
stackswitcher button.circular,
3249
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3250
min-width: $medium_size;
3251
min-height: $medium_size;
3252
padding: 0;
3253
}
3254