ASCII text
1
$asset_suffix: if($variant=='dark', '-dark', '');
2
$extra_background_clip: if($variant == 'light', padding-box, border-box);
3
$small_size: if($laptop == 'true', 20px, 24px);
5
$medium_size: if($laptop == 'true', 32px, 36px);
6
$large_size: if($laptop == 'true', 44px, 48px);
7
$container_padding: 6px;
9
$bar_size: 4px;
11
$menuitem_size: 28px;
12
$material_radius: 2px;
14
$material_faster: 0.2s;
15
$material_slower: 0.3s;
16
$material_ease: cubic-bezier(0.4, 0.0, 0.2, 1);
17
$material_ease_out: cubic-bezier(0.0, 0.0, 0.2, 1);
18
$material_ease_in: cubic-bezier(0.4, 0.0, 1, 1);
19
// FIXME: color's transition is too slow
20
$material_transition: all $material_slower $material_ease_out, color 0;
21
$shadow_transition: box-shadow $material_faster $material_ease_out;
22
* {
24
padding: 0;
25
background-clip: padding-box;
26
-GtkToolButton-icon-spacing: 4;
28
-GtkTextView-error-underline-color: $error_color;
29
// The size for scrollbars. The slider is 2px smaller, but we keep it
31
// up so that the whole area is sensitive to button presses for the
32
// slider. The stepper button is larger in both directions, the slider
33
// only in the width
34
-GtkScrolledWindow-scrollbar-spacing: 0;
36
-GtkToolItemGroup-expander-size: 11;
38
-GtkWidget-text-handle-width: 24;
40
-GtkWidget-text-handle-height: 24;
41
-GtkDialog-button-spacing: 4;
43
-GtkDialog-action-area-border: 0;
44
// We use the outline properties to signal the focus properties
46
// to the adwaita engine: using real CSS properties is faster,
47
// and we don't use any outlines for now.
48
outline-style: solid;
50
outline-width: 2px;
51
outline-color: $track_color;
52
outline-offset: -4px;
53
-gtk-outline-radius: 2px;
54
-gtk-secondary-caret-color: $selected_bg_color;
56
}
57
/***************
60
* Base States *
61
***************/
62
.background {
63
background-color: $bg_color;
64
color: $fg_color;
65
}
66
/*
68
These wildcard seems unavoidable, need to investigate.
69
Wildcards are bad and troublesome, use them with care,
70
or better, just don't.
71
Everytime a wildcard is used a kitten dies, painfully.
72
*/
73
*:disabled { -gtk-icon-effect: dim; }
75
.gtkstyle-fallback {
77
background-color: $bg_color;
78
color: $fg_color;
79
&:hover {
81
background-color: darken($bg_color, 5%);
82
color: $fg_color;
83
}
84
&:active {
86
background-color: darken($bg_color, 10%);
87
color: $fg_color;
88
}
89
&:disabled {
91
background-color: $bg_color;
92
color: $insensitive_fg_color;
93
}
94
&:selected {
96
background-color: $selected_bg_color;
97
color: $selected_fg_color;
98
}
99
}
100
.view,
102
%view {
103
@extend row.activatable;
104
background-color: $base_color;
106
color: $fg_color;
107
&:hover, &:active, &:selected { border-radius: 2px; }
109
&:disabled {
111
// background-color: $secondary_base_color;
112
color: $insensitive_fg_color;
113
}
114
&:selected { @extend %selected_items; }
116
}
117
.view,
119
textview {
120
text {
121
// @extend %view;
122
background-color: $base_color;
124
color: $fg_color;
125
&:disabled {
127
// background-color: $secondary_base_color;
128
color: $insensitive_fg_color;
129
}
130
selection { @extend %selected_items; }
132
}
133
}
134
textview border {
136
background-color: $secondary_base_color;
137
color: $tertiary_fg_color;
138
}
139
iconview { @extend .view; }
141
.rubberband,
143
rubberband {
144
border: 1px solid $secondary_selected_bg_color;
145
background-color: scale-alpha($secondary_selected_bg_color, $lower_opacity);
146
}
147
flowbox {
149
rubberband { @extend rubberband; }
150
flowboxchild {
152
outline-offset: -2px;
153
padding: 4px;
154
border-radius: 2px;
155
&:selected { @extend %selected_items; }
157
}
158
}
159
label {
161
caret-color: currentColor; // this shouldn't be needed.
162
&.separator {
164
@extend .dim-label;
165
color: $fg_color;
167
}
168
row:selected &,
170
&:selected { @extend %nobg_selected_items; }
171
selection {
173
background-color: $selected_bg_color;
174
color: $selected_fg_color;
175
}
176
&:disabled {
178
color: $insensitive_fg_color;
179
selection { @extend %selected_items:disabled; }
181
}
182
}
183
.dim-label { opacity: $hint_opacity; }
185
assistant {
187
.sidebar {
188
padding: 4px 0;
189
// background-color: $base_color;
190
// border-top: 1px solid $borders_color;
191
}
192
// &.csd .sidebar { border-top-style: none; }
194
.sidebar label {
196
min-height: $medium_size;
197
padding: 0 12px;
198
color: $tertiary_fg_color;
199
font-weight: 500;
200
&.highlight { color: $fg_color; }
202
}
203
}
204
%osd, .osd { opacity: $higher_opacity; }
206
/*********************
209
* Spinner Animation *
210
*********************/
211
@keyframes spin {
212
to { -gtk-icon-transform: rotate(1turn); }
213
}
214
@keyframes spin_colors {
216
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
217
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
218
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
219
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
220
}
221
spinner {
223
background: none;
224
opacity: 0; // non spinning spinner makes no sense
225
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
226
&:checked {
228
opacity: 1;
229
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
230
&:disabled { opacity: $disabled_opacity; }
232
}
233
}
234
/****************
237
* Text Entries *
238
****************/
239
%entry,
240
entry {
241
%entry_basic, & {
242
min-height: $medium_size;
243
padding: 0 8px;
244
border-radius: 2px;
245
@include entry(normal);
247
&:focus { @include entry(focus); }
249
&:disabled { @include entry(insensitive); }
251
&.flat {
253
border-radius: 0;
254
@include entry(flat-normal);
256
&:focus { @include entry(flat-focus); }
258
&:disabled { @include entry(flat-insensitive); }
260
}
261
image { // icons inside the entry
263
// @extend %button_basic.flat;
264
min-height: $small_size;
266
min-width: $small_size;
267
-gtk-outline-radius: 100px;
268
border-radius: 100px;
269
color: gtkalpha(currentColor, $enabled_opacity);
270
&:hover, &:active { color: currentColor; }
272
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
274
&.left { margin-left: -2px; margin-right: 2px; }
276
&.right { margin-left: 2px; margin-right: -2px; }
278
}
279
undershoot {
281
&.left { @include undershoot(left); }
282
&.right { @include undershoot(right); }
284
}
285
selection { @extend %selected_items; }
287
// entry error and warning style
289
@each $e_type, $e_color in (error, $error_color),
290
(warning, $warning_color) {
291
&.#{$e_type} {
292
@include entry(normal, $e_color);
293
&:focus { @include entry(focus, $e_color); }
295
&:disabled { @include entry(insensitive, $e_color); }
297
&.flat {
299
@include entry(flat-normal, $e_color);
300
&:focus { @include entry(flat-focus, $e_color); }
302
&:disabled { @include entry(flat-insensitive, $e_color); }
304
}
305
}
306
}
307
&:drop(active) {
309
// box-shadow: inset 0 0 0 2px $accent_bg_color;
310
}
311
.osd & {
313
}
314
}
315
progress {
317
margin: 2px -6px;
318
border-style: none none solid;
319
border-width: 2px;
320
border-color: $selected_bg_color;
321
// border-radius: 0;
322
// box-shadow: none;
323
background-color: transparent;
324
// background-image: none;
325
}
326
// linked entries
328
.linked:not(.vertical) > &:not(.flat) { @extend %linked; }
329
// Vertically linked entries
331
.linked.vertical > &:not(.flat) { @extend %linked_vertical; }
332
}
333
treeview entry {
335
&.flat, & {
336
min-height: 0;
337
padding: 2px;
338
border-radius: 0;
339
background-color: $base_color;
340
&, &:focus {
342
border-image: none;
343
box-shadow: none;
344
}
345
}
346
}
347
/***********
350
* Buttons *
351
***********/
352
// stuff for .needs-attention
353
@keyframes needs_attention {
354
from {
355
background-image: -gtk-gradient(radial,
356
center center, 0,
357
center center, 0.001,
358
to($accent_bg_color),
359
to(transparent));
360
}
361
to {
363
background-image: -gtk-gradient(radial,
364
center center, 0,
365
center center, 0.5,
366
to($accent_bg_color),
367
to(transparent));
368
}
369
}
370
%button,
372
button {
373
@at-root %button_basic, & {
374
min-height: 24px;
375
min-width: 16px;
376
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
377
border-radius: 2px;
378
font-weight: 500;
379
@include button(normal);
381
&:hover { @include button(hover); }
383
&:active { @include button(active); }
385
&:disabled { @include button(insensitive); }
387
&:checked { @include button(checked); }
389
&:checked:disabled { @include button(checked-insensitive); }
391
&.flat {
393
@include button(flat-normal);
394
&:hover { @include button(flat-hover); }
396
&:active { @include button(flat-active); }
398
&:disabled { @include button(flat-insensitive); }
400
&:checked { @include button(flat-checked); }
402
&:checked:disabled { @include button(flat-checked-insensitive); }
404
}
405
&.image-button {
407
min-width: 24px;
408
padding: ($medium_size - 24px) / 2;
409
-gtk-outline-radius: 100px;
410
border-radius: 100px;
411
}
412
&.text-button {
414
padding-left: 16px;
415
padding-right: 16px;
416
}
417
&.text-button.image-button {
419
padding-left: ($medium_size - 16px) / 2;
420
padding-right: ($medium_size - 16px) / 2;
421
-gtk-outline-radius: 2px;
422
border-radius: 2px;
423
label {
425
&:last-child { padding-left: 2px; padding-right: 16px - ($medium_size - 16px) / 2; }
426
&:first-child { padding-left: 16px - ($medium_size - 16px) / 2; padding-right: 2px; }
427
}
428
}
429
.linked > & { @extend %linked; }
431
.linked.vertical > & { @extend %linked_vertical; }
433
.linked > &.flat,
435
.linked.vertical > &.flat {
436
border-radius: 2px;
437
&.image-button {
439
-gtk-outline-radius: 100px;
440
border-radius: 100px;
441
}
442
&.text-button.image-button {
444
-gtk-outline-radius: 2px;
445
border-radius: 2px;
446
}
447
}
448
&:drop(active) {
450
// box-shadow: inset 0 0 0 2px $accent_bg_color;
451
}
452
}
453
@at-root %button_selected, row:selected & {
455
&:disabled { color: $insensitive_secondary_selected_fg_color; }
456
&.flat {
458
color: $secondary_selected_fg_color;
459
&:hover, &:active { color: $selected_fg_color; }
461
&:disabled { color: $insensitive_secondary_selected_fg_color; }
463
}
464
}
465
// big standalone buttons like in Documents pager
467
&.osd {
468
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
469
&.image-button { padding: ($large_size - 24px) / 2; }
471
&:disabled { opacity: 0; }
473
}
474
//overlay / OSD style
476
@at-root %osd_button,
477
.osd & {
478
}
479
// Suggested and Destructive Action buttons
481
@each $b_type, $b_color in (suggested-action, $suggested_color),
482
(destructive-action, $destructive_color) {
483
&.#{$b_type} {
484
background-color: $b_color;
485
color: $selected_fg_color;
486
// @include button(normal, $b_color, white);
488
// &:hover { @include button(hover, $b_color, white); }
490
// &:active, &:checked { @include button(active, $b_color, white); }
492
&:disabled { @include button(insensitive, $b_color, white); }
494
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
496
&.flat {
498
background-color: transparent;
499
color: $b_color;
500
// @include button(flat-normal, $b_color, white);
502
// &:hover { @include button(flat-hover, $b_color, white); }
504
// &:active, &:checked { @include button(flat-active, $b_color, white); }
506
&:disabled { @include button(flat-insensitive, $b_color, white); }
508
}
509
.osd & {
511
}
512
}
513
}
514
.stack-switcher > & {
516
// to position the needs attention dot, padding is added to the button
517
// child, a label needs just lateral padding while an icon needs vertical
518
// padding added too.
519
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
521
> label {
523
padding-left: 6px; // label padding
524
padding-right: 6px; //
525
}
526
> image {
528
padding-left: 6px; // image padding
529
padding-right: 6px; //
530
padding-top: 3px; //
531
padding-bottom: 3px; //
532
}
533
&.text-button {
535
// compensate text-button paddings
536
padding-left: 16px - 6px;
537
padding-right: 16px - 6px;
538
}
539
&.image-button {
541
// we want image buttons to have a 1:1 aspect ratio, so compensation
542
// of the padding added to the GtkImage is needed
543
padding-left: ($medium_size - 16px) / 2 - 6px;
544
padding-right: ($medium_size - 16px) / 2 - 6px;
545
}
546
&.needs-attention {
548
> label,
549
> image { @extend %needs_attention; }
550
&:checked {
552
> label,
553
> image {
554
animation: none;
555
background-image: none;
556
}
557
}
558
}
559
}
560
// hide separators
562
separator {
563
min-width: 0;
564
min-height: 0;
565
background: transparent;
566
}
567
// &.font,
569
// &.file { separator { background-color: transparent; }}
570
// &.font { > box > box > label { font-weight: bold; }}
572
// inline-toolbar buttons
574
.inline-toolbar & {
575
@extend %button_basic.flat;
576
&:not(.text-button) { @extend %button_basic.image-button; }
578
}
579
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
581
}
582
%needs_attention {
584
animation: needs_attention $material_slower $material_ease_out forwards;
585
background-repeat: no-repeat;
586
background-position: right 3px;
587
background-size: 6px 6px;
588
&:dir(rtl) { background-position: left 3px; }
590
}
591
// all the following is for the +|- buttons on inline toolbars, that way
593
// should really be deprecated...
594
.inline-toolbar toolbutton > button { // redefining the button look is
595
// needed since those are flat...
596
}
597
// More inline toolbar buttons
599
toolbar.inline-toolbar toolbutton {
600
// > button.flat { @extend %linked_middle; }
601
// &:first-child > button.flat { @extend %linked:first-child; }
603
// &:last-child > button.flat { @extend %linked:last-child; }
605
// &:only-child > button.flat { @extend %linked:only-child; }
607
}
608
%linked_middle {
610
border-radius: 0;
611
}
612
%linked {
614
-gtk-outline-radius: 2px;
615
@extend %linked_middle;
617
&:first-child {
619
border-top-left-radius: 2px;
620
border-bottom-left-radius: 2px;
621
}
622
&:last-child {
624
border-top-right-radius: 2px;
625
border-bottom-right-radius: 2px;
626
}
627
&:only-child {
629
border-radius: 2px;
630
}
631
}
632
%linked_vertical_middle {
634
border-radius: 0;
635
}
636
%linked_vertical{
638
-gtk-outline-radius: 2px;
639
@extend %linked_vertical_middle;
641
&:first-child {
643
border-top-left-radius: 2px;
644
border-top-right-radius: 2px;
645
}
646
&:last-child {
648
border-bottom-left-radius: 2px;
649
border-bottom-right-radius: 2px;
650
}
651
&:only-child {
653
border-radius: 2px;
654
}
655
}
656
/* menu buttons */
658
modelbutton.flat,
659
.menuitem.button.flat {
660
min-height: $menuitem_size;
661
padding-left: 8px;
662
padding-right: 8px;
663
border-radius: 2px;
664
color: inherit;
665
@extend %button_basic.flat;
667
&:selected { @extend %selected_items; }
669
check,
671
radio {
672
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
673
&, &:hover { background-image: none; }
675
&:active { animation: none; }
677
&:last-child { margin-left: -8px; margin-right: -16px; }
679
&:first-child { margin-left: -16px; margin-right: -8px; }
681
}
682
check:not(:indeterminate):checked { @extend %check_checked; }
684
// radio:not(:indeterminate):checked { @extend %radio_checked; }
686
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
688
}
689
modelbutton.flat arrow {
691
background: none;
692
&:hover { background: none; }
694
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
696
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
698
}
699
button.color {
701
min-height: $small_size;
702
min-width: $small_size;
703
padding: $container_padding;
704
colorswatch:only-child {
706
// &, overlay { border-radius: 0; }
707
}
708
}
709
/*********
712
* Links *
713
*********/
714
*:link {
715
&, &:hover, &:active { color: $link_color; }
716
&:visited {
718
&, &:hover, &:active { color: $link_visited_color; }
719
}
720
@at-root %link_selected,
722
&:selected,
723
*:selected & { color: $selected_fg_color; }
724
}
725
button:link,
727
button:visited {
728
@extend *:link;
729
> label { text-decoration-line: underline; }
731
}
732
/*****************
734
* GtkSpinButton *
735
*****************/
736
spinbutton {
737
&:not(.vertical) {
738
// in this horizontal configuration, the whole spinbutton
739
// behaves as the entry, so we extend the entry styling
740
// and nuke the style on the internal entry
741
@extend %entry;
742
padding: 0;
744
%spinbutton_entry,
746
entry {
747
min-width: $large_size - 8px * 2;
748
// reset all the other props since the spinbutton node is styled here
749
margin: 0;
750
border-image: none;
751
border-radius: 0;
752
box-shadow: none;
753
background-color: transparent;
754
}
755
button {
757
min-height: $small_size;
758
min-width: $small_size;
759
// margin: $container_padding;
760
padding: 0;
761
border: solid $container_padding transparent;
762
@extend %button_basic.flat;
764
@extend %button_basic.image-button;
766
&.up:dir(ltr),
768
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
769
&.up:dir(rtl),
771
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
772
}
773
}
774
// OSD horizontal
776
.osd &:not(.vertical) {
777
button {
778
}
779
}
780
// Vertical
782
&.vertical {
783
// in the vertical configuration, we treat the spinbutton
784
// as a box, and tweak the style of the entry in the middle
785
// so that it's linked
786
// FIXME: this should not be set at all, but otherwise it gets the wrong
788
// color
789
&:disabled { color: $insensitive_fg_color; }
790
&:drop(active) {
792
box-shadow: none;
793
}
794
entry {
796
min-height: $medium_size;
797
min-width: $large_size;
798
padding: 0;
799
}
800
button {
802
min-height: $medium_size;
803
min-width: $large_size;
804
padding: 0;
805
@extend %button_basic.flat;
807
&.up { border-radius: 2px 2px 0 0; }
809
&.down { border-radius: 0 0 2px 2px; }
811
}
812
}
813
// OSD vertical
815
.osd &.vertical button:first-child {
816
}
817
// Misc
819
treeview &:not(.vertical) {
820
min-height: 0;
821
border-style: none;
822
border-radius: 0;
823
entry {
825
min-height: 0;
826
padding: 1px 2px;
827
}
828
}
829
}
830
/**************
833
* ComboBoxes *
834
**************/
835
combobox {
836
arrow {
837
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
838
min-height: 16px;
839
min-width: 16px;
840
}
841
menu,
843
.menu,
844
.context-menu {
845
padding: 2px 0;
846
menuitem {
848
min-height: $medium_size;
849
padding: 0 ($medium_size - 16px) / 2;
850
}
851
}
852
&.linked {
854
button:nth-child(2) {
855
&:dir(ltr) { @extend %linked:last-child; }
856
&:dir(rtl) { @extend %linked:first-child; }
857
}
858
}
859
&:drop(active) { // FIXME: untested
861
box-shadow: none;
862
// button.combo { @extend %button_basic:drop(active); }
864
}
865
}
866
.linked > combobox > box > button.combo {
868
// the combo is a composite widget so the way we do button linking doesn't
869
// work, special case needed. See
870
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
871
&:dir(ltr),
873
&:dir(rtl) { @extend %linked_middle; } // specificity bump
874
}
875
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
877
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
878
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
879
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
881
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
882
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
883
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
884
/************
887
* Toolbars *
888
************/
889
toolbar {
890
-GtkWidget-window-dragging: true;
891
padding: $container_padding / 2;
892
background-color: $bg_color;
893
// on OSD
895
.osd & { background-color: transparent; }
896
// stand-alone OSD toolbars
898
&.osd {
899
transition: $shadow_transition;
900
padding: $container_padding;
901
border-radius: 2px;
902
box-shadow: $z-depth-2;
903
background-color: $base_color;
904
&:backdrop { box-shadow: $z-depth-1; }
906
&.left,
908
&.right,
909
&.top,
910
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
911
button { @extend %button_basic.flat; }
913
}
914
// toolbar separators
916
&.horizontal separator { margin: $container_padding / 2; }
917
&.vertical separator { margin: $container_padding / 2; }
918
&:not(.inline-toolbar):not(.osd) {
920
scale,
921
entry,
922
spinbutton,
923
button { margin: $container_padding / 2; }
924
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
926
}
927
}
928
//searchbar, location-bar & inline-toolbar
930
.inline-toolbar {
931
padding: $container_padding;
932
border-style: solid;
933
border-width: 0 1px 1px;
934
border-color: $borders_color;
935
background-color: $secondary_base_color;
936
}
937
searchbar,
939
.location-bar {
940
padding: $container_padding;
941
border-style: solid;
942
border-width: 0 0 1px;
943
border-color: $borders_color;
944
background-color: $bg_color;
945
background-clip: border-box;
946
}
947
/***************
950
* Header bars *
951
***************/
952
%titlebar,
953
headerbar {
954
transition: background-color $material_faster $material_ease_out, color $material_faster $material_ease_out;
955
min-height: $large_size;
956
padding: 0 $container_padding;
957
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
958
background-color: $headerbar_color;
959
color: $selected_fg_color;
960
&:backdrop {
962
color: $secondary_selected_fg_color;
963
}
964
.title {
966
padding-left: 12px;
967
padding-right: 12px;
968
font-weight: bold;
969
}
970
.subtitle {
972
padding-left: 12px;
973
padding-right: 12px;
974
font-size: smaller;
975
@extend .dim-label;
977
}
978
button:not(.suggested-action):not(.destructive-action) {
980
@extend %button_basic.flat;
981
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
983
currentColor 0%,
984
transparent 0%)
985
0 0 0 / 0 0 0px;
986
color: gtkalpha(currentColor, $enabled_opacity);
987
&:hover, &:active { color: currentColor; }
989
&:disabled {
991
color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity);
992
> label { color: inherit; }
994
}
995
&:checked {
997
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
998
currentColor 100%,
999
transparent 0%)
1000
0 0 2 / 0 0 2px;
1001
background-color: transparent;
1002
color: currentColor;
1003
&:disabled {
1005
background-color: transparent;
1006
color: gtkalpha(currentColor, $disabled_opacity);
1007
> label { color: inherit; }
1009
}
1010
}
1011
}
1012
button.suggested-action, button.destructive-action {
1014
&:disabled {
1015
color: gtkalpha(currentColor, $disabled_opacity);
1016
> label { color: inherit; }
1018
}
1019
}
1020
&.selection-mode {
1022
transition: background-color 0 $material_slower, color $material_faster $material_ease_out;
1023
animation: header_ripple_effect $material_slower $material_ease_out;
1024
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1025
background-color: $selected_bg_color;
1026
color: $selected_fg_color;
1027
&:backdrop {
1029
color: $secondary_selected_fg_color;
1030
}
1031
.subtitle:link { @extend *:link:selected; }
1033
button:not(.suggested-action):not(.destructive-action) {
1035
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1036
currentColor 0%,
1037
transparent 0%)
1038
0 0 0 / 0 0 0px;
1039
// color: gtkalpha(currentColor, $enabled_opacity);
1040
&, &:hover, &:active { color: currentColor; }
1042
&:disabled {
1044
color: gtkalpha(currentColor, $disabled_opacity);
1045
> label { color: inherit; }
1047
}
1048
&:checked {
1050
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1051
currentColor 100%,
1052
transparent 0%)
1053
0 0 2 / 0 0 2px;
1054
color: currentColor;
1055
&:disabled {
1057
color: gtkalpha(currentColor, $disabled_opacity);
1058
> label { color: inherit; }
1060
}
1061
}
1062
}
1063
.selection-menu {
1065
padding-left: 16px;
1066
padding-right: 16px;
1067
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1069
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1071
}
1072
}
1073
.fullscreen &,
1075
.tiled &,
1076
.maximized & {
1077
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1078
box-shadow: $z-depth-1;
1079
}
1080
&.default-decoration {
1082
min-height: $small_size;
1083
padding: $container_padding;
1084
border-width: 0;
1085
button.titlebutton {
1087
min-height: $small_size;
1088
min-width: $small_size;
1089
margin: 0;
1090
padding: 0;
1091
&:active { // add fallback
1093
background-image: radial-gradient(circle farthest-corner at center,
1094
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1095
transparent 0%),
1096
image(gtkalpha(currentColor, $lower_opacity / 2));
1097
}
1098
}
1099
}
1100
.solid-csd & {
1102
&:dir(rtl), &:dir(ltr) { // specificity bump
1103
margin-left: -1px;
1104
margin-right: -1px;
1105
margin-top: -1px;
1106
border-radius: 0;
1107
box-shadow: none;
1108
}
1109
}
1110
}
1111
headerbar {
1113
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1114
entry,
1115
spinbutton,
1116
// separator,
1117
button {
1118
margin-top: $container_padding;
1119
margin-bottom: $container_padding;
1120
}
1121
switch {
1123
margin-top: $container_padding * 2;
1124
margin-bottom: $container_padding * 2;
1125
}
1126
}
1127
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1129
border-top-left-radius: 2px;
1130
border-top-right-radius: 2px;
1131
}
1132
headerbar {
1134
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1135
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1136
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1138
}
1139
.titlebar:not(headerbar) {
1141
window.csd > & {
1142
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1143
padding: 0;
1144
background-color: transparent;
1145
background-image: none;
1146
border-style: none;
1147
box-shadow: none;
1148
}
1149
> separator {
1151
background-color: $headerbar_color;
1152
background-image: image($borders_color);
1153
}
1154
@extend %titlebar;
1156
}
1157
/************
1160
* Pathbars *
1161
************/
1162
.path-bar button {
1163
&.text-button, &.image-button, & {
1164
padding-left: 6px;
1165
padding-right: 6px;
1166
}
1167
&.text-button.image-button, & {
1169
// label:last-child { padding-left: 2px; padding-right: 8px; }
1170
// label:first-child { padding-left: 8px; padding-right: 2px; }
1171
}
1172
image {
1174
padding-left: ($medium_size - 16px) / 2 - 6px;
1175
padding-right: ($medium_size - 16px) / 2 - 6px;
1176
}
1177
&.slider-button {
1179
padding-left: 0;
1180
padding-right: 0;
1181
}
1182
:not(headerbar) & {
1184
@extend %button_basic.flat;
1185
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1187
$selected_bg_color 0%,
1188
transparent 0%)
1189
0 0 0 / 0 0 0px;
1190
border-radius: 2px;
1191
color: gtkalpha(currentColor, $enabled_opacity);
1192
&:hover, &:active { color: currentColor; }
1194
&:disabled {
1196
color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity);
1197
> label { color: inherit; }
1199
}
1200
&:checked {
1202
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1203
$selected_bg_color 100%,
1204
transparent 0%)
1205
0 0 2 / 0 0 2px;
1206
background-color: transparent;
1207
color: currentColor;
1208
&:disabled {
1210
background-color: transparent;
1211
color: gtkalpha(currentColor, $disabled_opacity);
1212
> label { color: inherit; }
1214
}
1215
}
1216
}
1217
}
1218
/**************
1221
* Tree Views *
1222
**************/
1223
treeview.view {
1224
@at-root * {
1225
-GtkTreeView-horizontal-separator: 4;
1226
-GtkTreeView-grid-line-width: 1;
1227
-GtkTreeView-grid-line-pattern: '';
1228
-GtkTreeView-tree-line-width: 1;
1229
-GtkTreeView-tree-line-pattern: '';
1230
-GtkTreeView-expander-size: 16;
1231
}
1232
border-left-color: $track_color; // this is actually the tree lines color,
1234
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1235
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1237
&:hover, &:active, &:selected { border-radius: 0; }
1239
&.separator {
1241
min-height: 1px + 2px * 2;
1242
color: $borders_color;
1243
}
1244
&:drop(active) {
1246
border-style: solid none;
1247
border-width: 1px;
1248
border-color: $accent_bg_color;
1249
&.after { border-top-style: none; }
1251
&.before { border-bottom-style: none; }
1253
}
1254
&.expander {
1256
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1257
-gtk-icon-transform: rotate(-90deg);
1258
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1260
&:checked { -gtk-icon-transform: unset; }
1262
color: $secondary_fg_color;
1264
&:hover, &:active { color: $fg_color; }
1266
&:disabled { color: $insensitive_secondary_fg_color; }
1268
&:selected {
1270
color: $secondary_selected_fg_color;
1271
&:hover, &:active { color: $selected_fg_color; }
1273
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1275
}
1276
}
1277
&.progressbar { // progress bar in treeviews
1279
border-style: none none solid;
1280
border-width: $bar_size;
1281
border-color: $selected_bg_color;
1282
background-color: transparent;
1283
background-image: none;
1284
&:selected { border-color: currentColor; }
1286
}
1287
&.trough { // progress bar trough in treeviews
1289
border-style: none none solid;
1290
border-width: $bar_size;
1291
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1292
background-color: transparent;
1293
background-image: none;
1294
&:selected { border-color: $track_color; }
1296
}
1297
header {
1299
button {
1300
@extend row.activatable;
1301
padding: 2px 6px;
1303
border-style: none solid solid none;
1304
border-width: 1px;
1305
border-color: $borders_color;
1306
border-radius: 0;
1307
background-clip: border-box;
1308
&, &:hover, &:active { box-shadow: none; }
1310
&, &:disabled { background-color: $base_color; }
1312
&:last-child { border-right-style: none; }
1314
}
1315
}
1316
button.dnd,
1318
header.button.dnd { // for treeview-like derive widgets
1319
padding: 2px 6px;
1320
border-style: none solid solid;
1321
border-width: 1px;
1322
border-color: $borders_color;
1323
border-radius: 0;
1324
box-shadow: none;
1325
background-color: $base_color;
1326
background-clip: border-box;
1327
color: $selected_bg_color;
1328
}
1329
acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
1331
}
1332
/*********
1335
* Menus *
1336
*********/
1337
menubar,
1338
.menubar {
1339
-GtkWidget-window-dragging: true;
1340
padding: 0;
1341
// box-shadow: inset 0 -1px $borders_color;
1342
background-color: $headerbar_color;
1343
> menuitem {
1345
transition: background-color $material_faster $material_ease_out;
1346
min-height: 20px;
1347
padding: 4px 8px;
1348
color: $secondary_selected_fg_color;
1349
&:hover { //Seems like it :hover even with keyboard focus
1351
transition: none;
1352
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1353
color: $selected_fg_color;
1354
}
1355
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1357
}
1358
}
1359
menu,
1361
.menu,
1362
.context-menu {
1363
margin: 4px 0;
1364
padding: 4px 0;
1365
background-color: $base_color;
1366
border: 1px solid $borders_color; // adds borders in a non composited env
1367
.csd & {
1369
border: none; // axes borders in a composited env
1370
border-radius: 2px;
1371
}
1372
menuitem {
1374
transition: background-color $material_faster $material_ease_out;
1375
min-height: 20px;
1376
min-width: 40px;
1377
padding: 4px 8px;
1378
font: initial;
1379
text-shadow: none;
1380
&:hover {
1382
transition: none;
1383
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1384
}
1385
&:disabled { color: $insensitive_fg_color; }
1387
// submenu indicators
1389
arrow {
1390
min-height: 16px;
1391
min-width: 16px;
1392
&:dir(ltr) {
1394
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1395
margin-left: 8px;
1396
}
1397
&:dir(rtl) {
1399
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1400
margin-right: 8px;
1401
}
1402
}
1403
// avoids labels color being overridden, see
1405
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1406
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1407
}
1408
// overflow arrows
1410
> arrow {
1411
min-height: 16px;
1412
min-width: 16px;
1413
padding: 4px;
1414
border-radius: 0;
1415
background-color: $base_color;
1416
color: $secondary_fg_color;
1417
&.top {
1419
margin-top: -4px;
1420
border-bottom: 1px solid $borders_color;
1421
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1422
}
1423
&.bottom {
1425
margin-bottom: -4px;
1426
border-top: 1px solid $borders_color;
1427
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1428
}
1429
&:hover {
1431
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1432
color: $fg_color;
1433
}
1434
&:disabled {
1436
border-color: transparent;
1437
background-color: transparent;
1438
color: transparent;
1439
// color: $insensitive_secondary_fg_color;
1440
}
1441
}
1442
separator { margin: 4px 0; }
1444
}
1445
menuitem {
1447
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1448
check,
1450
radio {
1451
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1452
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1453
}
1454
}
1455
.csd.popup { border-radius: 2px; }
1457
/***************
1460
* Popovers *
1461
***************/
1462
popover.background {
1463
transition: $shadow_transition;
1464
padding: 0;
1465
box-shadow: $z-depth-2;
1466
background-color: $light_color;
1467
&:backdrop { box-shadow: $z-depth-1; }
1469
&, .csd & {
1471
border-style: solid;
1472
border-width: 1px;
1473
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1474
border-radius: 2px + 1px;
1475
}
1476
> list,
1478
> .view,
1479
> toolbar {
1480
border-style: none;
1481
box-shadow: none;
1482
background-color: transparent;
1483
}
1484
&, .csd & {
1486
&.touch-selection,
1487
&.magnifier,
1488
&.osd { @extend %osd; }
1489
}
1490
separator { margin: 4px 0; }
1492
list separator { margin: 0; }
1494
}
1495
/*************
1497
* Notebooks *
1498
*************/
1499
notebook {
1500
> header {
1501
border-width: 1px;
1502
border-color: $borders_color;
1503
background-color: $bg_color;
1504
background-clip: border-box;
1505
&.top {
1507
border-bottom-style: solid;
1508
> tabs {
1509
margin-bottom: -1px;
1510
> tab {
1511
&:hover { box-shadow: inset 0 -2px $track_color; }
1513
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1515
}
1516
}
1517
}
1518
&.bottom {
1520
border-top-style: solid;
1521
> tabs {
1522
margin-top: -1px;
1523
> tab {
1524
&:hover { box-shadow: inset 0 2px $track_color; }
1526
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1528
}
1529
}
1530
}
1531
&.left {
1533
border-right-style: solid;
1534
> tabs {
1535
margin-right: -1px;
1536
> tab {
1537
&:hover { box-shadow: inset -2px 0 $track_color; }
1539
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1541
}
1542
}
1543
}
1544
&.right {
1546
border-left-style: solid;
1547
> tabs {
1548
margin-left: -1px;
1549
> tab {
1550
&:hover { box-shadow: inset 2px 0 $track_color; }
1552
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1554
}
1555
}
1556
}
1557
&.top > tabs > arrow {
1559
@extend %notebook_vert_arrows;
1560
border-top-style: none;
1562
}
1563
&.bottom > tabs > arrow {
1565
@extend %notebook_vert_arrows;
1566
border-bottom-style: none;
1568
}
1569
@at-root %notebook_vert_arrows {
1571
padding-left: 4px;
1572
padding-right: 4px;
1573
&.down {
1575
margin-left: -8px;
1576
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1577
}
1578
&.up {
1580
margin-right: -8px;
1581
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1582
}
1583
}
1584
&.left > tabs > arrow {
1586
@extend %notebook_horz_arrows;
1587
border-left-style: none;
1589
}
1590
&.right > tabs > arrow {
1592
@extend %notebook_horz_arrows;
1593
border-right-style: none;
1595
}
1596
@at-root %notebook_horz_arrows {
1598
padding-top: 4px;
1599
padding-bottom: 4px;
1600
&.down {
1602
margin-top: -8px;
1603
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1604
}
1605
&.up {
1607
margin-bottom: -8px;
1608
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1609
}
1610
}
1611
> tabs > arrow {
1613
@extend %button_basic.flat;
1614
min-height: 16px;
1616
min-width: 16px;
1617
border-radius: 0;
1618
}
1619
tab {
1621
transition: $material_transition;
1622
min-height: $small_size;
1623
min-width: $small_size;
1624
padding: $container_padding 12px;
1625
outline-offset: -6px;
1627
border-width: 1px; // for reorderable tabs
1629
border-color: transparent; //
1630
color: $secondary_fg_color;
1632
font-weight: 500;
1633
&:hover {
1635
color: $fg_color;
1636
&.reorderable-page {
1638
border-color: $borders_color;
1639
background-color: $secondary_base_color;
1640
}
1641
}
1642
&:disabled { color: $insensitive_secondary_fg_color; }
1644
&:checked {
1646
animation: tab_ripple_effect $material_slower * 3 $material_ease_out;
1647
color: $fg_color;
1648
&:disabled { color: $insensitive_fg_color; }
1650
&.reorderable-page {
1652
border-color: $borders_color;
1653
background-color: $base_color;
1654
}
1655
}
1656
// colors the button like the label, overridden otherwise
1658
button.flat {
1659
// FIXME: generalize .small-button?
1660
min-width: $small_size;
1661
min-height: $small_size;
1662
padding: 0;
1663
@extend %button_basic.image-button;
1665
&:last-child {
1667
margin-left: $container_padding;
1668
margin-right: $container_padding - 12px;
1669
}
1670
&:first-child {
1672
margin-left: $container_padding - 12px;
1673
margin-right: $container_padding;
1674
}
1675
}
1676
}
1677
&.top,
1679
&.bottom {
1680
tabs {
1681
padding-left: 8px;
1682
padding-right: 8px;
1683
&:not(:only-child) {
1685
&:first-child { margin-left: 0; }
1686
&:last-child { margin-right: 0; }
1687
}
1688
tab {
1690
&.reorderable-page {
1691
margin: 0 -1px;
1692
border-style: none solid;
1693
}
1694
}
1695
}
1696
}
1697
&.left,
1699
&.right {
1700
tabs {
1701
padding-top: 8px;
1702
padding-bottom: 8px;
1703
&:not(:only-child) {
1705
&:first-child { margin-top: 0; }
1706
&:last-child { margin-bottom: 0; }
1707
}
1708
tab {
1710
&.reorderable-page {
1711
margin: -1px 0;
1712
border-style: solid none;
1713
}
1714
}
1715
}
1716
}
1717
}
1718
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1720
background-color: $base_color;
1721
entry,
1723
spinbutton:not(.vertical) { @extend %entry.flat; }
1724
revealer entry,
1726
revealer spinbutton:not(.vertical) { @extend %entry; }
1727
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1729
}
1730
}
1731
/**************
1734
* Scrollbars *
1735
**************/
1736
scrollbar {
1737
$_slider_min_length: 24px;
1738
// disable steppers
1740
@at-root * {
1741
-GtkScrollbar-has-backward-stepper: false;
1742
-GtkScrollbar-has-forward-stepper: false;
1743
}
1744
transition: $material_transition;
1746
background-color: $base_color;
1747
background-clip: $extra_background_clip;
1748
// scrollbar border
1750
&.top { border-bottom: 1px solid $borders_color; }
1751
&.bottom { border-top: 1px solid $borders_color; }
1752
&.left { border-right: 1px solid $borders_color; }
1753
&.right { border-left: 1px solid $borders_color; }
1754
// slider
1756
slider {
1757
transition: all $material_faster $material_ease_out, margin 0, border-width 0;
1758
min-width: 8px;
1759
min-height: 8px;
1760
border: 4px solid transparent;
1761
border-radius: 100px;
1762
background-clip: padding-box;
1763
background-color: $tertiary_fg_color;
1764
&:hover { background-color: $secondary_fg_color; }
1766
&:active { background-color: $fg_color; }
1768
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1770
}
1771
&.fine-tune {
1773
slider {
1774
transition: all $material_faster $material_ease_out, margin 0, border-width 0, min-width 0, min-height 0;
1775
min-width: 4px;
1776
min-height: 4px;
1777
}
1778
&.horizontal slider { margin: 2px 0; }
1780
&.vertical slider { margin: 0 2px; }
1782
}
1783
&.overlay-indicator {
1785
&:not(.dragging):not(.hovering) {
1786
border-color: transparent;
1787
background-color: transparent;
1788
slider {
1790
min-width: 4px;
1791
min-height: 4px;
1792
margin: 4px - 1px;
1793
border: 1px solid scale-alpha($base_color, $lower_opacity);
1794
}
1795
button {
1797
min-width: 4px;
1798
min-height: 4px;
1799
margin: 4px - 1px;
1800
border: 1px solid scale-alpha($base_color, $lower_opacity);
1801
border-radius: 100px;
1802
background-color: $tertiary_fg_color;
1803
background-clip: padding-box;
1804
-gtk-icon-source: none;
1805
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1807
}
1808
&.horizontal {
1810
slider { min-width: $_slider_min_length; }
1811
button { min-width: 8px; }
1813
}
1814
&.vertical {
1816
slider { min-height: $_slider_min_length; }
1817
button { min-height: 8px; }
1819
}
1820
}
1821
&.dragging,
1823
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1824
}
1825
&.horizontal slider { min-width: $_slider_min_length; }
1827
&.vertical slider { min-height: $_slider_min_length; }
1829
// button styling
1831
button {
1832
@extend %button_basic.flat;
1833
min-width: 16px;
1834
min-height: 16px;
1835
padding: 0;
1836
border-radius: 0;
1837
}
1838
// button icons
1840
&.vertical {
1841
button {
1842
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1843
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1845
}
1846
}
1847
&.horizontal {
1849
button {
1850
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1851
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1853
}
1854
}
1855
}
1856
/**********
1859
* Switch *
1860
**********/
1861
switch {
1862
transition: $material_transition;
1863
margin: $container_padding 0;
1864
border: 4px solid transparent;
1865
border-radius: 100px;
1866
background-color: $track_color;
1867
background-clip: padding-box;
1868
font-size: 0;
1869
&:disabled { color: $insensitive_fg_color; }
1871
&:checked {
1873
background-color: scale-alpha($accent_bg_color, 0.5);
1874
&:disabled {
1876
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1877
color: $insensitive_fg_color;
1878
}
1879
}
1880
slider {
1882
@include entry(normal);
1883
transition: $material_transition, margin 0;
1885
min-width: $small_size;
1886
min-height: $small_size;
1887
margin: -4px 0 -4px -4px;
1888
-gtk-outline-radius: 100px;
1889
border-radius: 100px;
1890
}
1891
&:hover slider { @include entry(focus); }
1893
&:disabled slider { @include entry(insensitive); }
1895
&:checked slider {
1897
transition: $material_transition, margin 0, background-image 0, background-color 0 $material_slower;
1898
animation: needs_attention $material_slower $material_ease_out;
1899
margin: -4px -4px -4px 0;
1900
background-color: $accent_bg_color;
1901
color: $selected_fg_color;
1902
}
1903
&:checked:disabled slider { animation: none; }
1905
row:selected & {
1907
}
1908
}
1909
/*************************
1912
* Check and Radio items *
1913
*************************/
1914
// draw regular check and radio items using our PNG assets
1915
// all assets are rendered from assets.svg. never add pngs directly
1916
//selection-mode
1918
@each $s,$as in ('','-selectionmode'),
1919
(':hover', '-hover-selectionmode'),
1920
(':checked', '-checked-selectionmode'),
1921
(':checked:hover', '-checked-hover-selectionmode') {
1922
.view.content-view.check#{$s}:not(list) {
1923
-gtk-icon-shadow: $z-depth-1;
1924
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1925
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1926
margin: 8px;
1927
background-color: transparent;
1928
}
1929
}
1930
checkbutton.text-button,
1932
radiobutton.text-button {
1933
// this is for a nice focus on check and radios text
1934
padding: 2px;
1935
outline-offset: 0;
1936
label:not(:only-child) { margin: 0 4px; }
1938
}
1939
check,
1941
radio {
1942
min-height: 24px;
1943
min-width: 24px;
1944
margin: -12px;
1945
padding: 12px;
1946
@extend %button_basic.flat;
1948
@extend %button_basic.image-button;
1950
&:checked, &:checked:disabled { background-color: transparent; }
1952
&:checked, &:indeterminate { color: $accent_bg_color; }
1954
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1956
// &:only-child { margin: -12px; }
1958
row &:not(:checked):not(:indeterminate) {
1960
color: gtkalpha(currentColor, $enabled_opacity);
1961
&:hover, &:active { color: currentColor; }
1963
}
1964
menu menuitem & {
1966
transition: none;
1967
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1968
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1970
&, &:hover, &:disabled {
1972
background-image: none;
1973
// color: inherit;
1974
// animation: none;
1975
}
1976
}
1977
}
1978
%check,
1980
check {
1981
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1982
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1983
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1985
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1986
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1988
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1989
}
1990
%radio,
1992
radio {
1993
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1994
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1995
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1997
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1998
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
2000
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
2001
border-image: -gtk-gradient(radial,
2003
center center, 0,
2004
center center, 0.001,
2005
to($accent_bg_color),
2006
to(transparent))
2007
24 / 24px;
2008
&:checked {
2010
border-image: -gtk-gradient(radial,
2011
center center, 0,
2012
center center, (10 / 48 / 2),
2013
to($accent_bg_color),
2014
to(transparent))
2015
24 / 24px;
2016
}
2017
&:checked:disabled {
2019
border-image: -gtk-gradient(radial,
2020
center center, 0,
2021
center center, (10 / 48 / 2),
2022
to(scale-alpha($accent_bg_color, $disabled_opacity)),
2023
to(transparent))
2024
24 / 24px;
2025
}
2026
&:indeterminate:checked {
2028
border-image: -gtk-gradient(radial,
2029
center center, 0,
2030
center center, 0.001,
2031
to($accent_bg_color),
2032
to(transparent))
2033
24 / 24px;
2034
}
2035
}
2036
// let's animate things
2038
@keyframes check_check {
2039
from { -gtk-icon-transform: rotate(90deg); }
2040
to { -gtk-icon-transform: unset; }
2041
}
2042
@keyframes check_radio { // FIXME: cannot animate border-image
2044
from {
2045
border-image: -gtk-gradient(radial,
2046
center center, 0,
2047
center center, 0.001,
2048
to($accent_bg_color),
2049
to(transparent))
2050
24 / 24px;
2051
}
2052
to {
2054
border-image: -gtk-gradient(radial,
2055
center center, 0,
2056
center center, (10 / 48 / 2),
2057
to($accent_bg_color),
2058
to(transparent))
2059
24 / 24px;
2060
}
2061
}
2062
@keyframes check_indeterminate {
2064
from { -gtk-icon-transform: unset; }
2065
50% { -gtk-icon-transform: scale(0, 1); }
2066
to { -gtk-icon-transform: unset; }
2067
}
2068
%check_checked,
2070
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
2071
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2073
// %radio_checked,
2075
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
2076
// radio:not(:indeterminate):checked:active { animation: check_radio $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2078
%indeterminate_checked,
2080
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
2081
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2083
// no animations in menus
2085
menu menuitem {
2086
check:not(:indeterminate):checked,
2087
radio:not(:indeterminate):checked,
2088
check:indeterminate:checked,
2089
radio:indeterminate:checked { animation: none; }
2090
}
2091
treeview.view check,
2093
treeview.view radio {
2094
padding: 0;
2095
&:checked:hover, &:selected:checked:hover { background-image: none; }
2097
& {
2099
color: $secondary_fg_color;
2100
&:hover, &:active { color: $fg_color; }
2102
&:disabled { color: $insensitive_secondary_fg_color; }
2104
&:checked, &:indeterminate { color: $accent_bg_color; }
2106
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2108
}
2109
&:selected {
2111
color: $secondary_selected_fg_color;
2112
&:hover, &:active { color: $selected_fg_color; }
2114
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2116
&:checked, &:indeterminate { color: $accent_bg_color; }
2118
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2120
}
2121
}
2122
treeview.view radio:checked {
2124
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2125
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2126
border-image: none;
2127
}
2128
/************
2131
* GtkScale *
2132
************/
2133
scale {
2134
// sizing
2135
$_marks_lenght: 8px;
2136
$_marks_distance: 8px;
2137
min-height: $medium_size - 24px;
2139
min-width: $medium_size - 24px;
2140
padding: (24px / 2);
2141
* { transition: $material_transition; }
2143
// the slider is inside the trough, so to have make it bigger there's a negative margin
2145
slider {
2146
min-height: 24px;
2147
min-width: 24px;
2148
margin: ($bar_size - 24px) / 2;
2149
}
2150
// the backing bit
2152
trough {
2153
outline-offset: 2px;
2154
background-color: $track_color;
2155
&:disabled { color: $insensitive_fg_color; }
2157
}
2158
// the colored part of the backing bit
2160
highlight {
2161
background-color: $accent_bg_color;
2162
&:disabled { background-color: transparent; }
2164
}
2165
// this is another differently styled part of the backing bit, the most relevant use case is for example
2167
// in media player to indicate how much video stream as been cached
2168
fill {
2169
background-color: $track_color;
2170
&:disabled { background-color: transparent; }
2172
}
2173
slider {
2175
transition: all $material_faster $material_ease;
2176
// border-radius: 100%;
2177
// background-color: $accent_bg_color;
2178
background-repeat: no-repeat;
2179
background-position: center;
2180
@each $s,$as in ('',''),
2182
(':disabled','-insensitive') {
2183
&#{$s} {
2184
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2185
background-image: -gtk-scaled(url('#{$_url}.png'),
2186
url('#{$_url}@2.png'));
2187
}
2188
}
2189
background-size: calc(100% - 8px);
2191
&:hover { background-size: calc(100% - 4px); }
2193
&:active { background-size: calc(100% - 0px); }
2195
}
2196
// click-and-hold the slider to activate
2198
&.fine-tune {
2199
// to make the slider shrink in fine-tune mode
2200
slider { background-size: calc(100% - 12px); }
2201
}
2202
value { color: gtkalpha(currentColor, $hint_opacity); }
2204
marks {
2206
color: $track_color;
2207
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2209
(bottom, bottom, top),
2210
(top, left, right),
2211
(bottom, right, left) {
2212
&.#{$marks_class} {
2213
margin-#{$marks_margin}: $_marks_distance;
2214
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2215
}
2216
}
2217
}
2218
&.horizontal {
2220
indicator {
2221
min-height: $_marks_lenght;
2222
min-width: 1px;
2223
}
2224
}
2225
&.vertical {
2227
indicator {
2228
min-height: 1px;
2229
min-width: $_marks_lenght;
2230
}
2231
}
2232
// *WARNING* scale with marks madness following
2234
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2236
$suffix: if($variant == 'light', '', '-dark');
2237
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2239
('vertical', 'vert') {
2240
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2241
('scale-has-marks-below', ':first-child:not(:only-child)') {
2242
@each $state, $state_infix in ('', ''),
2243
(':disabled', '-insensitive') {
2244
&.#{$dir_class} {
2245
%#{$marks_infix}-#{$dir_infix},
2246
contents#{$nth_child} > trough > slider {
2247
&#{$state} {
2248
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2249
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2251
}
2252
@if $dir_class == 'horizontal' {
2254
min-height: 30px;
2255
min-width: 24px;
2256
@if $marks_infix == 'scale-has-marks-above' {
2258
margin-top: -16px;
2259
background-position: center calc(100% - 4px);
2261
&:hover { background-position: center calc(100% - 2px); }
2263
&:active { background-position: center calc(100% - 0px); }
2265
}
2266
@if $marks_infix == 'scale-has-marks-below' {
2268
margin-bottom: -16px;
2269
background-position: center calc(4px);
2271
&:hover { background-position: center calc(2px); }
2273
&:active { background-position: center calc(0px); }
2275
}
2276
}
2277
@if $dir_class == 'vertical' {
2279
min-height: 24px;
2280
min-width: 30px;
2281
@if $marks_infix == 'scale-has-marks-above' {
2283
margin-left: -16px;
2284
background-position: calc(4px) center;
2286
&:hover { background-position: calc(2px) center; }
2288
&:active { background-position: calc(0px) center; }
2290
}
2291
@if $marks_infix == 'scale-has-marks-below' {
2293
margin-right: -16px;
2294
background-position: calc(100% - 4px) center;
2296
&:hover { background-position: calc(100% - 2px) center; }
2298
&:active { background-position: calc(100% - 0px) center; }
2300
}
2301
}
2302
}
2303
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2305
&.fine-tune contents#{$nth_child} > trough > slider {
2306
// bigger negative margins to make the trough grow here as well
2307
@if $dir_class == 'horizontal' {
2309
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2310
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2312
}
2313
@if $dir_class == 'vertical' {
2315
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2316
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2318
}
2319
}
2320
}
2321
}
2322
}
2323
}
2324
&.color {
2326
min-height: 0;
2327
min-width: 0;
2328
&.horizontal {
2330
padding: 0 0 12px 0;
2331
trough {
2333
padding-bottom: $bar_size;
2334
}
2335
slider {
2337
@extend %scale-has-marks-above-horz;
2338
margin-bottom: -10px - $bar_size;
2340
margin-top: 0;
2341
}
2342
}
2343
&.vertical {
2345
&:dir(ltr) {
2346
padding: 0 0 0 12px;
2347
trough {
2349
padding-left: $bar_size;
2350
}
2351
slider {
2353
@extend %scale-has-marks-below-vert;
2354
margin-left: -10px - $bar_size;
2356
margin-right: 0;
2357
}
2358
}
2359
&:dir(rtl) {
2361
padding: 0 12px 0 0;
2362
trough {
2364
padding-right: $bar_size;
2365
}
2366
slider {
2368
@extend %scale-has-marks-above-vert;
2369
margin-right: -10px - $bar_size;
2371
margin-left: 0;
2372
}
2373
}
2374
}
2375
&.fine-tune {
2377
&.horizontal {
2378
slider {
2379
@extend %scale-has-marks-above-horz-fine-tune;
2380
}
2381
}
2382
&.vertical {
2384
&:dir(ltr) {
2385
slider {
2386
@extend %scale-has-marks-below-vert-fine-tune;
2387
}
2388
}
2389
&:dir(rtl) {
2391
slider {
2392
@extend %scale-has-marks-above-vert-fine-tune;
2393
}
2394
}
2395
}
2396
}
2397
}
2398
}
2399
/*****************
2402
* Progress bars *
2403
*****************/
2404
progressbar {
2405
// sizing
2406
&.horizontal {
2407
trough,
2408
progress { min-height: $bar_size; }
2409
}
2410
&.vertical {
2412
trough,
2413
progress { min-width: $bar_size; }
2414
}
2415
// FIXME: insensitive state missing and some other state should be set probably
2417
color: $tertiary_fg_color;
2418
font-size: smaller;
2419
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2421
progress { background-color: $selected_bg_color; }
2423
&.osd { // progressbar.osd used for epiphany page loading progress
2425
// min-width: $bar_size;
2426
// min-height: $bar_size;
2427
// background-color: transparent;
2428
// trough { background-color: transparent; }
2430
progress {
2432
}
2433
}
2434
}
2435
/*************
2438
* Level Bar *
2439
*************/
2440
levelbar {
2441
block {
2442
min-width: $medium_size;
2443
min-height: $bar_size;
2444
}
2445
&.vertical block {
2447
min-width: $bar_size;
2448
min-height: $medium_size;
2449
}
2450
trough {
2452
padding: 2px;
2453
border-radius: 2px;
2454
@include entry(normal);
2456
&:disabled { @include entry(insensitive); }
2458
}
2459
&.horizontal.discrete block { margin: 0 1px; }
2461
&.vertical.discrete block { margin: 1px 0; }
2463
&.horizontal.discrete trough { padding: 2px 1px; }
2465
&.vertical.discrete trough { padding: 1px 2px; }
2467
block {
2469
&.low {
2470
background-color: $warning_color;
2471
}
2472
&.high,
2474
&:not(.empty) {
2475
background-color: $selected_bg_color;
2476
}
2477
&.full {
2479
background-color: $success_color;
2480
}
2481
&.empty {
2483
background-color: $track_color;
2484
color: $insensitive_fg_color;
2485
}
2486
}
2487
}
2488
/****************
2491
* Print dialog *
2492
*****************/
2493
printdialog {
2494
paper {
2495
padding: 0;
2496
border: 1px solid $borders_color;
2497
background: $base_color;
2498
color: $fg_color;
2499
}
2500
.dialog-action-box { margin: 12px; }
2502
}
2503
/**********
2506
* Frames *
2507
**********/
2508
frame > border,
2509
.frame {
2510
margin: 0;
2511
padding: 0;
2512
border: 1px solid $borders_color;
2513
border-radius: 0;
2514
box-shadow: none;
2515
&.flat { border-style: none; }
2517
}
2518
actionbar > revealer > box {
2520
padding: $container_padding;
2521
border-top: 1px solid $borders_color;
2522
}
2523
scrolledwindow {
2525
viewport.frame { // avoid double borders when viewport inside scrolled window
2526
border-style: none;
2527
}
2528
// This is used when content is touch-dragged past boundaries.
2530
// draws a box on top of the content, the size changes programmatically.
2531
@at-root overshoot {
2532
&.top { @include overshoot(top); }
2533
&.bottom { @include overshoot(bottom); }
2535
&.left { @include overshoot(left); }
2537
&.right { @include overshoot(right); }
2539
}
2540
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2542
@at-root undershoot {
2543
&.top { @include undershoot(top); }
2544
&.bottom { @include undershoot(bottom); }
2546
&.left { @include undershoot(left); }
2548
&.right { @include undershoot(right); }
2550
}
2551
@at-root junction { // the small square between two scrollbars
2553
border-style: solid none none solid;
2554
border-width: 1px;
2555
border-color: $borders_color;
2556
background-color: $base_color;
2557
&:dir(rtl) { border-style: solid solid none none; }
2559
}
2560
}
2561
//vbox and hbox separators
2563
separator {
2564
min-width: 1px;
2565
min-height: 1px;
2566
background: $borders_color;
2567
}
2568
/*********
2571
* Lists *
2572
*********/
2573
list {
2574
border-color: $borders_color;
2575
background-color: $base_color;
2576
row { padding: 2px; }
2578
}
2579
row {
2581
transition: $material_transition;
2582
&:hover { transition: none; }
2584
&.activatable {
2586
background-image: radial-gradient(circle farthest-corner at center,
2587
gtkalpha(currentColor, 0) 100%,
2588
transparent 0%),
2589
image(gtkalpha(currentColor, 0));
2590
&:hover {
2592
background-image: radial-gradient(circle farthest-corner at center,
2593
gtkalpha(currentColor, 0) 100%,
2594
transparent 0%),
2595
image(gtkalpha(currentColor, 0.05));
2596
}
2597
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2599
&:active {
2600
transition: $material_transition, background-image 0;
2601
animation: row_ripple_effect $material_slower $material_ease_out forwards;
2602
}
2603
}
2604
&:selected { @extend %selected_items; }
2606
}
2607
/*********************
2610
* App Notifications *
2611
*********************/
2612
.app-notification,
2613
.app-notification.frame {
2614
@extend %osd;
2615
@extend toolbar.osd;
2617
margin: 8px;
2619
border { border: none; }
2621
}
2622
/*************
2625
* Expanders *
2626
*************/
2627
expander {
2628
arrow {
2629
transition: all $material_faster $material_ease;
2630
min-width: 16px;
2631
min-height: 16px;
2632
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2633
-gtk-icon-transform: rotate(-90deg);
2634
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2636
&:checked { -gtk-icon-transform: unset; }
2638
color: $secondary_fg_color;
2640
&:hover, &:active { color: $fg_color; }
2642
&:disabled { color: $insensitive_secondary_fg_color; }
2644
&:selected {
2646
color: $secondary_selected_fg_color;
2647
&:hover, &:active { color: $selected_fg_color; }
2649
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2651
}
2652
}
2653
}
2654
/************
2657
* Calendar *
2658
***********/
2659
calendar {
2660
padding: 1px;
2661
border: 1px solid $borders_color;
2662
color: $fg_color;
2663
&:disabled { color: $insensitive_fg_color; }
2665
&:selected {
2667
@extend %selected_items;
2668
border-radius: 2px + 1px;
2670
}
2671
&.header {
2673
border-style: none none solid;
2674
border-radius: 0;
2675
}
2676
&.button { @extend %button_basic.flat; }
2678
&.highlight {
2680
color: gtkalpha(currentColor, $hint_opacity);
2681
font-weight: 500;
2682
}
2683
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2685
}
2686
/***********
2689
* Dialogs *
2690
***********/
2691
messagedialog { // Message Dialog styling
2692
&.background { background-color: $light_color; }
2693
.titlebar {
2695
min-height: $small_size;
2696
border-style: none;
2697
box-shadow: inset 0 1px $highlight_color;
2698
background-color: $light_color;
2699
}
2700
&.csd { // rounded bottom border styling for csd version
2702
&.background {
2703
// bigger radius for better antialiasing
2704
border-bottom-left-radius: 2px;
2705
border-bottom-right-radius: 2px;
2706
}
2707
.dialog-action-area button {
2709
padding: 8px 16px;
2710
border-top: 1px solid $borders_color;
2711
border-radius: 0;
2712
@extend %button_basic.flat;
2714
&:first-child{ border-bottom-left-radius: 2px; }
2716
&:last-child { border-bottom-right-radius: 2px; }
2718
}
2719
}
2720
}
2721
filechooser {
2723
.dialog-action-box { border-top: 1px solid $borders_color; }
2724
#pathbarbox {
2726
border-bottom: 1px solid $borders_color;
2727
background-color: $bg_color;
2728
}
2729
}
2730
filechooserbutton:drop(active) {
2732
box-shadow: none;
2733
}
2734
/***********
2737
* Sidebar *
2738
***********/
2739
.sidebar {
2740
border-style: none;
2741
background-color: $light_color;
2742
@at-root %sidebar_left,
2744
&:dir(ltr),
2745
&.left,
2746
&.left:dir(rtl) {
2747
border-right: 1px solid $borders_color;
2748
border-left-style: none;
2749
}
2750
@at-root %sidebar_right
2752
&:dir(rtl),
2753
&.right {
2754
border-left: 1px solid $borders_color;
2755
border-right-style: none;
2756
}
2757
list { background-color: transparent; }
2759
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2761
}
2762
stacksidebar {
2764
&.sidebar {
2765
&:dir(ltr),
2766
&.left,
2767
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2768
&:dir(rtl),
2770
&.right { list { @extend %sidebar_right; }}
2771
}
2772
row {
2774
padding: 10px 4px;
2775
> label {
2777
padding-left: 6px;
2778
padding-right: 6px;
2779
}
2780
&.needs-attention > label { @extend %needs_attention; }
2782
}
2783
}
2784
/****************
2787
* File chooser *
2788
****************/
2789
placessidebar {
2790
> viewport.frame { border-style: none; }
2791
list { padding: (4px - 3px) 0 4px; }
2793
row {
2795
// Needs overriding of the GtkListBoxRow padding
2796
min-height: 32px;
2797
margin: -1px 0; // Remove unknown margins
2798
padding: 0;
2799
// Using margins/padding directly in the SidebarRow
2801
// will make the animation of the new bookmark row jump
2802
> revealer { padding: 0 12px; }
2803
&:selected { color: $selected_fg_color; }
2805
&:disabled { color: $insensitive_fg_color; }
2807
image.sidebar-icon {
2809
opacity: $hint_opacity; // dim the device icons
2810
&:dir(ltr) { padding-right: 8px; }
2812
&:dir(rtl) { padding-left: 8px; }
2813
}
2814
label.sidebar-label {
2816
&:dir(ltr) { padding-right: 2px; }
2817
&:dir(rtl) { padding-left: 2px; }
2818
}
2819
@at-root button.sidebar-button {
2821
@extend %button_basic.flat;
2822
min-height: $small_size;
2824
min-width: $small_size;
2825
margin-top: 0;
2826
margin-bottom: 0;
2827
padding: 0;
2828
border-radius: 100%;
2829
-gtk-outline-radius: 100%;
2830
row:selected & { @extend %button_selected.flat; }
2832
}
2833
&.sidebar-placeholder-row {
2835
min-height: 2px;
2836
padding: 0 8px;
2837
background-image: image($accent_bg_color);
2838
background-clip: content-box;
2839
}
2840
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2842
&:drop(active):not(:disabled) {
2844
box-shadow: inset 0 0 0 2px $accent_bg_color;
2845
&:selected {
2847
// background-color: $accent_bg_color;
2848
// color: $selected_fg_color;
2849
}
2850
}
2851
}
2852
}
2853
placesview {
2855
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2856
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2858
// this selects the "connect to server" label
2860
> actionbar > revealer > box > label {
2861
padding-left: 8px;
2862
padding-right: 8px;
2863
}
2864
}
2865
/*********
2868
* Paned *
2869
*********/
2870
paned {
2871
> separator {
2872
min-width: 1px;
2873
min-height: 1px;
2874
-gtk-icon-source: none; // defeats the ugly default handle decoration
2875
border-style: none; // just to be sure
2876
background-color: transparent;
2877
// workaround, using background istead of a border since the border will get rendered twice (?)
2878
background-image: image($borders_color);
2879
background-size: 1px 1px;
2880
&.wide {
2882
min-width: 6px;
2883
min-height: 6px;
2884
background-color: $bg_color;
2885
background-image: image($borders_color), image($borders_color);
2886
background-size: 1px 1px, 1px 1px;
2887
}
2888
}
2889
&.horizontal > separator {
2891
background-repeat: repeat-y;
2892
&:dir(ltr) {
2894
margin: 0 -8px 0 0;
2895
padding: 0 8px 0 0;
2896
background-position: left;
2897
}
2898
&:dir(rtl) {
2900
margin: 0 0 0 -8px;
2901
padding: 0 0 0 8px;
2902
background-position: right;
2903
}
2904
&.wide {
2906
margin: 0;
2907
padding: 0;
2908
background-repeat: repeat-y, repeat-y;
2909
background-position: left, right;
2910
}
2911
}
2912
&.vertical > separator {
2914
margin: 0 0 -8px 0;
2915
padding: 0 0 8px 0;
2916
background-repeat: repeat-x;
2917
background-position: top;
2918
&.wide {
2920
margin: 0;
2921
padding: 0;
2922
background-repeat: repeat-x, repeat-x;
2923
background-position: bottom, top;
2924
}
2925
}
2926
}
2927
/**************
2930
* GtkInfoBar *
2931
**************/
2932
infobar {
2933
border-style: none;
2934
&.info { background-color: $info_bg_color; }
2936
&.question { background-color: $question_bg_color; }
2938
&.warning { background-color: $warning_bg_color; }
2940
&.error { background-color: $error_bg_color; }
2942
&.info,
2944
&.question,
2945
&.warning,
2946
&.error {
2947
> label, & { color: $selected_fg_color; }
2948
button { @extend %button_selected; }
2950
selection { }
2952
*:link { @extend %link_selected; }
2954
}
2955
}
2956
/************
2959
* Tooltips *
2960
************/
2961
tooltip {
2962
&.background {
2963
// background-color needs to be set this way otherwise it gets drawn twice
2964
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2965
background-color: scale-alpha($base_color, $higher_opacity);
2966
}
2967
// @extend %osd;
2969
// padding: 4px; /* not working */
2971
border-radius: 2px;
2972
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2973
// FIXME: we need a border or tooltips vanish on black background.
2975
decoration { background-color: transparent; }
2976
label {
2978
// tooltip label has already 6px margins
2979
min-height: 32px - 6px * 2;
2980
padding: 0 8px - 6px;
2981
}
2982
* { // Yeah this is ugly
2984
padding: 0;
2985
background-color: transparent;
2986
color: inherit;
2987
}
2988
}
2989
/*****************
2992
* Color Chooser *
2993
*****************/
2994
colorswatch {
2995
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2996
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2997
// applied to the overlay box.
2998
// base color corners rounding
3000
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3001
// sports a bigger radius.
3002
// nth-child is needed by the custom color strip.
3003
&.top {
3005
border-top-left-radius: $material_radius + 0.5px;
3006
border-top-right-radius: $material_radius + 0.5px;
3007
overlay {
3009
border-top-left-radius: $material_radius;
3010
border-top-right-radius: $material_radius;
3011
}
3012
}
3013
&.bottom {
3015
border-bottom-left-radius: $material_radius + 0.5px;
3016
border-bottom-right-radius: $material_radius + 0.5px;
3017
overlay {
3019
border-bottom-left-radius: $material_radius;
3020
border-bottom-right-radius: $material_radius;
3021
}
3022
}
3023
&.left,
3025
&:first-child:not(.top) {
3026
border-top-left-radius: $material_radius + 0.5px;
3027
border-bottom-left-radius: $material_radius + 0.5px;
3028
overlay {
3030
border-top-left-radius: $material_radius;
3031
border-bottom-left-radius: $material_radius;
3032
}
3033
}
3034
&.right,
3036
&:last-child:not(.bottom) {
3037
border-top-right-radius: $material_radius + 0.5px;
3038
border-bottom-right-radius: $material_radius + 0.5px;
3039
overlay {
3041
border-top-right-radius: $material_radius;
3042
border-bottom-right-radius: $material_radius;
3043
}
3044
}
3045
&.dark overlay { color: white; }
3047
&.light overlay { color: scale-alpha(black, 0.8); }
3049
&.dark { color: white; } // for focus ring
3051
&.light { color: scale-alpha(black, 0.8); } // for focus ring
3053
&:drop(active) {
3055
box-shadow: none;
3056
&.light overlay {
3058
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3059
}
3060
&.dark overlay {
3062
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3063
}
3064
}
3065
overlay {
3067
transition: $shadow_transition;
3068
box-shadow: $z-depth-1;
3069
&:hover { box-shadow: $z-depth-2; }
3071
}
3072
&#add-color-button {
3074
border-radius: $material_radius $material_radius 0 0;
3075
color: white; // for focus ring
3076
&:only-child { border-radius: $material_radius; }
3078
overlay {
3080
background-image: linear-gradient(to right,
3081
$error_bg_color 25%,
3082
$warning_bg_color 25%, $warning_bg_color 50%,
3083
$info_bg_color 50%, $info_bg_color 75%,
3084
$question_bg_color 75%);
3085
color: white;
3086
}
3087
}
3088
&:disabled {
3090
opacity: $disabled_opacity;
3091
overlay { box-shadow: none; }
3093
}
3094
row:selected & {
3096
}
3097
&#editor-color-sample {
3099
border-radius: $material_radius + 0.5px;
3100
overlay { border-radius: $material_radius; }
3102
// overlay:hover { box-shadow: $z-depth-1; }
3104
}
3105
}
3106
// colorscale popup
3108
colorchooser .popover.osd {
3109
transition: $shadow_transition;
3110
border-radius: 2px;
3111
box-shadow: $z-depth-2;
3112
background-color: $base_color;
3113
&:backdrop { box-shadow: $z-depth-1; }
3115
spinbutton:not(.vertical) { @extend %entry.flat; }
3117
}
3118
/********
3121
* Misc *
3122
********/
3123
//content view (grid/list)
3124
.content-view {
3125
background-color: $bg_color;
3126
// &:hover { -gtk-icon-effect: highlight; }
3128
rubberband { @extend rubberband; }
3130
}
3131
.scale-popup {
3133
.osd & { @extend %osd; }
3134
.osd & button.flat { //FIXME: quick hack, redo properly
3136
}
3137
button { // +/- buttons on GtkVolumeButton popup
3139
}
3140
}
3141
/**********************
3144
* Window Decorations *
3145
*********************/
3146
decoration {
3147
transition: $shadow_transition;
3148
border-radius: 2px 2px 0 0;
3149
box-shadow: $z-depth-4, 0 16px 16px transparent;
3150
// FIXME rationalize shadows
3152
// this is used for the resize cursor area
3154
margin: 8px;
3155
&:backdrop {
3157
// the transparent shadow here is to enforce that the shadow extents don't
3158
// change when we go to backdrop, to prevent jumping windows.
3159
// The biggest shadow should be in the same order then in the active state
3160
// or the jumping will happen during the transition.
3161
box-shadow: $z-depth-2, 0 16px 16px transparent;
3162
}
3163
.maximized &,
3165
.fullscreen &,
3166
.tiled & { border-radius: 0; }
3167
.popup & { box-shadow: none; }
3169
// server-side decorations as used by mutter
3171
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3172
.csd.popup & {
3174
border-radius: 2px;
3175
box-shadow: $z-depth-2;
3176
}
3177
tooltip.csd & {
3179
border-radius: 2px;
3180
box-shadow: $z-depth-2;
3181
}
3182
messagedialog.csd & {
3184
border-radius: 2px;
3185
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3186
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3188
}
3189
.solid-csd & {
3191
margin: 0;
3192
padding: 4px;
3193
// border: solid 1px $borders_color;
3194
border-radius: 0;
3195
box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $secondary_highlight_color;
3196
background-color: $borders_color;
3197
}
3198
}
3199
// Window Close button
3201
button.titlebutton {
3202
// @extend %button_basic.flat;
3203
@extend %button_basic.image-button;
3205
.selection-mode & {
3207
}
3208
}
3209
// catch all extend :)
3212
%selected_items {
3214
background-color: $selected_bg_color;
3215
@at-root %nobg_selected_items, & {
3217
color: $selected_fg_color;
3218
&:disabled { color: $insensitive_selected_fg_color; }
3220
}
3221
}
3222
.monospace { font-family: monospace; }
3224
/**********************
3227
* Touch Copy & Paste *
3228
*********************/
3229
//touch selection handlebars for the Popover.osd above
3230
cursor-handle {
3231
border-radius: 100px;
3232
background-color: $accent_bg_color;
3233
background-image: none;
3234
&.top:dir(ltr), &.bottom:dir(rtl) {
3236
padding-left: 6px;
3237
border-top-right-radius: 0;
3238
}
3239
&.bottom:dir(ltr), &.top:dir(rtl) {
3241
padding-right: 6px;
3242
border-top-left-radius: 0;
3243
}
3244
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3246
-GtkWidget-text-handle-width: 24;
3247
-GtkWidget-text-handle-height: 30;
3248
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3250
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3251
url('#{$_url}@2.png'));
3252
}
3253
}
3254
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3256
button.circular { // FIXME: aggregate to buttons
3258
border-radius: 100px;
3259
-gtk-outline-radius: 100px;
3260
label { padding: 0; }
3262
}
3263
// shortcut window keys
3265
.keycap {
3266
min-width: 28px - 8px * 2;
3267
min-height: 28px - 2px;
3268
margin-top: 2px;
3269
padding-bottom: 2px;
3270
padding-left: 8px;
3271
padding-right: 8px;
3272
border: solid 1px $borders_color;
3274
border-radius: 2px + 1px;
3275
box-shadow: inset 0 -2px $borders_color;
3276
background-color: $base_color;
3277
color: $fg_color;
3278
font-size: smaller;
3279
}
3280
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3282
transition: $material_transition;
3283
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3284
caret-color: $accent_bg_color;
3285
}
3286
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3288
stackswitcher button.circular,
3290
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3291
min-width: $medium_size;
3292
min-height: $medium_size;
3293
padding: 0;
3294
}
3295