ASCII text
1
* {
2
padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 4;
6
-GtkTextView-error-underline-color: $error_color;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: 4;
21
-GtkDialog-action-area-border: 0;
22
// We use the outline properties to signal the focus properties
24
// to the adwaita engine: using real CSS properties is faster,
25
// and we don't use any outlines for now.
26
outline-style: solid;
28
outline-width: 2px;
29
outline-color: $fill_color;
30
outline-offset: -4px;
31
-gtk-outline-radius: 2px;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
/***************
38
* Base States *
39
***************/
40
.background {
41
background-color: $bg_color;
42
color: $fg_color;
43
}
44
/*
46
These wildcard seems unavoidable, need to investigate.
47
Wildcards are bad and troublesome, use them with care,
48
or better, just don't.
49
Everytime a wildcard is used a kitten dies, painfully.
50
*/
51
*:disabled { -gtk-icon-effect: dim; }
53
.gtkstyle-fallback {
55
background-color: $bg_color;
56
color: $fg_color;
57
&:hover {
59
background-color: darken($bg_color, 5%);
60
color: $fg_color;
61
}
62
&:active {
64
background-color: darken($bg_color, 10%);
65
color: $fg_color;
66
}
67
&:disabled {
69
background-color: $bg_color;
70
color: $disabled_fg_color;
71
}
72
&:selected {
74
background-color: $primary_color;
75
color: $inverse_fg_color;
76
}
77
}
78
.view {
80
@extend row.activatable;
81
background-color: $base_color;
83
color: $fg_color;
84
&:disabled { color: $disabled_fg_color; }
86
selection,
88
&:selected { @extend %selected_items; }
89
}
90
textview {
92
// FIXME: we need to override background-color to ensure text rendering
93
text { background-color: $base_color; }
94
// FIXME: we cannot specify text color for the border node
96
border { background-color: $alt_base_color; }
97
}
98
iconview { border-radius: 2px; }
100
.rubberband,
102
rubberband {
103
border: 1px solid $alt_primary_color;
104
background-color: scale-alpha($alt_primary_color, $lower_opacity);
105
}
106
flowbox {
108
rubberband { @extend rubberband; }
109
flowboxchild {
111
padding: 4px;
112
border-radius: 2px;
113
outline-offset: -2px;
114
&:selected { @extend %selected_items; }
116
}
117
}
118
label {
120
caret-color: currentColor; // this shouldn't be needed.
121
&.separator {
123
@extend .dim-label;
124
color: $fg_color;
126
}
127
row:selected &,
129
&:selected { @extend %nobg_selected_items; }
130
selection {
132
background-color: $primary_color;
133
color: $inverse_fg_color;
134
}
135
&:disabled {
137
color: $disabled_fg_color;
138
selection { @extend %selected_items:disabled; }
140
tab &,
142
button & { color: inherit; }
143
}
144
}
145
.dim-label { opacity: $tertiary_opacity; }
147
assistant {
149
.sidebar {
150
padding: 4px 0;
151
// background-color: $base_color;
152
// border-top: 1px solid $border_color;
153
}
154
// &.csd .sidebar { border-top-style: none; }
156
.sidebar label {
158
min-height: $medium_size;
159
padding: 0 12px;
160
color: $tertiary_fg_color;
161
font-weight: 500;
162
&.highlight { color: $fg_color; }
164
}
165
}
166
%osd, .osd { opacity: $higher_opacity; }
168
/*********************
171
* Spinner Animation *
172
*********************/
173
@keyframes spin {
174
to { -gtk-icon-transform: rotate(1turn); }
175
}
176
@keyframes spin_colors {
178
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
179
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
180
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
181
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
182
}
183
spinner {
185
background: none;
186
opacity: 0; // non spinning spinner makes no sense
187
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
188
&:checked {
190
opacity: 1;
191
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
192
&:disabled { opacity: $disabled_opacity; }
194
}
195
}
196
/****************
199
* Text Entries *
200
****************/
201
%entry,
202
entry {
203
%entry_basic, & {
204
min-height: $medium_size;
205
padding: 0 8px;
206
border-radius: 2px;
207
@include entry(normal);
209
&:focus { @include entry(focus); }
211
&:disabled { @include entry(disabled); }
213
&.flat {
215
border-radius: 0;
216
@include entry(flat-normal);
218
&:focus { @include entry(flat-focus); }
220
&:disabled { @include entry(flat-disabled); }
222
}
223
image { // icons inside the entry
225
// @extend %simple_flat_button;
226
// min-height: $small_size;
228
// min-width: $small_size;
229
// border-radius: $circular_radius;
230
// -gtk-outline-radius: $circular_radius;
231
color: gtkalpha(currentColor, $secondary_opacity);
232
&:hover, &:active { color: currentColor; }
234
&:disabled { color: gtkalpha(currentColor, $tertiary_opacity); }
236
&.left { margin-left: 2px; margin-right: 6px; }
238
&.right { margin-left: 6px; margin-right: 2px; }
240
}
241
undershoot {
243
&.left { @include undershoot(left); }
244
&.right { @include undershoot(right); }
246
}
247
selection { @extend %selected_items; }
249
// entry error and warning style
251
@each $e_type, $e_color in (error, $error_color),
252
(warning, $warning_color) {
253
&.#{$e_type} {
254
@include entry(normal, $e_color);
255
&:focus { @include entry(focus, $e_color); }
257
&:disabled { @include entry(disabled, $e_color); }
259
&.flat {
261
@include entry(flat-normal, $e_color);
262
&:focus { @include entry(flat-focus, $e_color); }
264
&:disabled { @include entry(flat-disabled, $e_color); }
266
}
267
}
268
}
269
&:drop(active) {
271
// box-shadow: inset 0 0 0 2px $accent_color;
272
}
273
.osd & {
275
}
276
}
277
progress {
279
margin: 2px (2px - 8px);
280
border-bottom: 2px solid $primary_color;
281
background-color: transparent;
282
}
283
// linked entries
285
.linked:not(.vertical) > & { @extend %linked; }
286
// Vertically linked entries
288
.linked.vertical > & { @extend %linked_vertical; }
289
.linked:not(.vertical) > &.flat,
291
.linked.vertical > &.flat { border-radius: 0; }
292
}
293
treeview entry {
295
&.flat, & {
296
min-height: 0;
297
padding: 2px;
298
border-radius: 0;
299
background-color: $base_color;
300
&, &:focus {
302
border-image: none;
303
box-shadow: none;
304
}
305
}
306
}
307
/***********
310
* Buttons *
311
***********/
312
// stuff for .needs-attention
313
@keyframes needs_attention {
314
from {
315
background-image: -gtk-gradient(radial,
316
center center, 0,
317
center center, 0.001,
318
to($accent_color),
319
to(transparent));
320
}
321
to {
323
background-image: -gtk-gradient(radial,
324
center center, 0,
325
center center, 0.5,
326
to($accent_color),
327
to(transparent));
328
}
329
}
330
%button,
332
button {
333
@at-root %button_basic, & {
334
min-height: 24px;
335
min-width: 16px;
336
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
337
border-radius: 2px;
338
font-weight: 500;
339
@include button(normal);
341
&:hover { @include button(hover); }
343
&:active { @include button(active); }
345
&:disabled { @include button(disabled); }
347
&:checked { @include button(checked); }
349
&:checked:disabled { @include button(checked-disabled); }
351
@at-root %flat_button, &.flat {
353
@at-root %simple_flat_button, & {
354
@include button(flat-normal);
355
&:hover { @include button(flat-hover); }
357
&:active { @include button(flat-active); }
359
&:disabled { @include button(flat-disabled); }
361
}
362
&:checked { @include button(flat-checked); }
364
&:checked:disabled { @include button(flat-checked-disabled); }
366
}
367
&.text-button {
369
padding-left: 16px;
370
padding-right: 16px;
371
}
372
&.image-button {
374
min-width: 24px;
375
padding: ($medium_size - 24px) / 2;
376
border-radius: $circular_radius;
377
-gtk-outline-radius: $circular_radius;
378
}
379
&.text-button.image-button {
381
border-radius: 2px;
382
-gtk-outline-radius: 2px;
383
label {
385
&:first-child {
386
margin-left: 16px - ($medium_size - 24px) / 2;
387
margin-right: 2px;
388
}
389
&:last-child {
391
margin-left: 2px;
392
margin-right: 16px - ($medium_size - 24px) / 2;
393
}
394
&:only-child {
396
margin-left: 16px - ($medium_size - 24px) / 2;
397
margin-right: 16px - ($medium_size - 24px) / 2;
398
}
399
}
400
image:not(:only-child) {
402
&:first-child { margin-left: (24px - 16px) / 2; }
403
&:last-child { margin-right: (24px - 16px) / 2; }
405
}
406
}
407
.linked > & { @extend %linked; }
409
.linked.vertical > & { @extend %linked_vertical; }
411
.linked > &.flat,
413
.linked.vertical > &.flat {
414
border-radius: 2px;
415
&.image-button {
417
border-radius: $circular_radius;
418
-gtk-outline-radius: $circular_radius;
419
}
420
&.text-button.image-button {
422
border-radius: 2px;
423
-gtk-outline-radius: 2px;
424
}
425
}
426
&:drop(active) {
428
// box-shadow: inset 0 0 0 2px $accent_color;
429
}
430
}
431
@at-root %button_selected, row:selected & {
433
&:disabled { color: $disabled_secondary_inverse_fg_color; }
434
}
435
// big standalone buttons like in Documents pager
437
&.osd {
438
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
439
&.image-button { padding: ($large_size - 24px) / 2; }
441
&:disabled { opacity: 0; }
443
}
444
// overlay / OSD style
446
@at-root %osd_button,
447
.osd & {
448
}
449
// Suggested and Destructive Action buttons
451
@each $b_type, $b_color in (suggested-action, $suggested_color),
452
(destructive-action, $destructive_color) {
453
&.#{$b_type} {
454
background-color: $b_color;
455
color: $inverse_fg_color;
456
&:disabled { @include button(disabled, $b_color); }
458
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
460
&.flat {
462
background-color: transparent;
463
color: $b_color;
464
&:disabled { @include button(flat-disabled, $b_color); }
466
&:checked { background-color: $fill_color; }
468
}
469
.osd & {
471
}
472
}
473
}
474
.stack-switcher > & {
476
// to position the needs attention dot, padding is added to the button
477
// child, a label needs just lateral padding while an icon needs vertical
478
// padding added too.
479
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
481
> label {
483
padding-left: 6px; // label padding
484
padding-right: 6px; //
485
}
486
> image {
488
padding-left: 6px; // image padding
489
padding-right: 6px; //
490
padding-top: 3px; //
491
padding-bottom: 3px; //
492
}
493
&.text-button {
495
// compensate text-button paddings
496
padding-left: 16px - 6px;
497
padding-right: 16px - 6px;
498
}
499
&.image-button {
501
// we want image buttons to have a 1:1 aspect ratio, so compensation
502
// of the padding added to the GtkImage is needed
503
padding-left: ($medium_size - 16px) / 2 - 6px;
504
padding-right: ($medium_size - 16px) / 2 - 6px;
505
}
506
&.needs-attention {
508
> label,
509
> image { @extend %needs_attention; }
510
&:checked {
512
> label,
513
> image {
514
animation: none;
515
background-image: none;
516
}
517
}
518
}
519
}
520
// hide separators
522
separator {
523
min-width: 0;
524
min-height: 0;
525
background-color: transparent;
526
}
527
// &.font,
529
// &.file { separator { background-color: transparent; }}
530
// &.font { > box > box > label { font-weight: bold; }}
532
// inline-toolbar buttons
534
.inline-toolbar & {
535
// @extend %button_basic.flat;
536
&:not(.text-button) { @extend %circular_button; }
538
}
539
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
541
@at-root %circular_button,
543
&.close,
544
&.circular { // The Bloody Circul Button
545
border-radius: $circular_radius;
546
-gtk-outline-radius: $circular_radius;
547
// label { padding: 0; }
549
}
550
@at-root %small_button {
552
min-height: $small_size;
553
min-width: $small_size;
554
padding: 0;
555
border-radius: $circular_radius;
556
-gtk-outline-radius: $circular_radius;
557
}
558
}
559
%needs_attention {
561
animation: needs_attention $longer_duration $deceleration_curve forwards;
562
background-repeat: no-repeat;
563
background-position: right 3px;
564
background-size: 6px 6px;
565
&:dir(rtl) { background-position: left 3px; }
567
}
568
// all the following is for the +|- buttons on inline toolbars, that way
570
// should really be deprecated...
571
.inline-toolbar toolbutton > button { // redefining the button look is
572
// needed since those are flat...
573
}
574
// More inline toolbar buttons
576
toolbar.inline-toolbar toolbutton {
577
// > button.flat { @extend %linked_middle; }
578
// &:first-child > button.flat { @extend %linked:first-child; }
580
// &:last-child > button.flat { @extend %linked:last-child; }
582
// &:only-child > button.flat { @extend %linked:only-child; }
584
}
585
%linked_middle {
587
border-radius: 0;
588
-gtk-outline-radius: 2px;
589
}
590
%linked {
592
@extend %linked_middle;
593
&:first-child {
595
border-top-left-radius: 2px;
596
border-bottom-left-radius: 2px;
597
}
598
&:last-child {
600
border-top-right-radius: 2px;
601
border-bottom-right-radius: 2px;
602
}
603
&:only-child {
605
border-radius: 2px;
606
}
607
}
608
%linked_vertical_middle {
610
border-radius: 0;
611
-gtk-outline-radius: 2px;
612
}
613
%linked_vertical{
615
@extend %linked_vertical_middle;
616
&:first-child {
618
border-top-left-radius: 2px;
619
border-top-right-radius: 2px;
620
}
621
&:last-child {
623
border-bottom-left-radius: 2px;
624
border-bottom-right-radius: 2px;
625
}
626
&:only-child {
628
border-radius: 2px;
629
}
630
}
631
/* menu buttons */
633
modelbutton.flat,
634
.menuitem.button.flat {
635
min-height: $menuitem_size;
636
padding: 0 8px;
637
border-radius: 2px;
638
color: inherit;
639
@extend %simple_flat_button;
641
&:selected { @extend %selected_items; }
643
check,
645
radio {
646
box-shadow: none;
647
background-image: none;
648
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
650
&:last-child { margin-left: -8px; margin-right: -16px; }
652
&:first-child { margin-left: -16px; margin-right: -8px; }
654
}
655
}
656
modelbutton.flat arrow {
658
background: none;
659
&:hover { background: none; }
661
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
663
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
665
}
666
button.color {
668
min-height: $small_size;
669
min-width: $small_size;
670
padding: $container_padding;
671
colorswatch:only-child {
673
// &, overlay { border-radius: 0; }
674
}
675
}
676
/*********
679
* Links *
680
*********/
681
*:link {
682
&, &:hover, &:active { color: $link_color; }
683
&:visited {
685
&, &:hover, &:active { color: $visited_link_color; }
686
}
687
@at-root %link_selected,
689
&:selected,
690
*:selected & { color: $inverse_fg_color; }
691
}
692
button:link,
694
button:visited {
695
@extend *:link;
696
> label { text-decoration-line: underline; }
698
}
699
/*****************
701
* GtkSpinButton *
702
*****************/
703
spinbutton {
704
&:not(.vertical) {
705
// in this horizontal configuration, the whole spinbutton
706
// behaves as the entry, so we extend the entry styling
707
// and nuke the style on the internal entry
708
@extend %entry;
709
padding: 0;
711
%spinbutton_entry,
713
entry {
714
min-width: $large_size - 8px * 2;
715
// reset all the other props since the spinbutton node is styled here
716
margin: 0;
717
border-image: none;
718
border-radius: 0;
719
box-shadow: none;
720
background-color: transparent;
721
//
722
// This will help to simplify spinbutton's code, but unfortunatelly
723
// doesn't work properly in :dir(rtl). It needs z-index property.
724
//
725
// min-width: $large_size - 8px;
726
//
727
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
728
//
729
// &:dir(ltr) {
730
// margin-right: -$spinbuttons_width;
731
// padding-right: $spinbuttons_width;
732
// }
733
//
734
// &:dir(rtl) {
735
// margin-left: -$spinbuttons_width;
736
// padding-left: $spinbuttons_width;
737
// }
738
}
739
button {
741
// margin: $container_padding;
742
border: solid $container_padding transparent;
743
@extend %simple_flat_button;
745
@extend %small_button;
747
&.up:dir(ltr),
749
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
750
&.up:dir(rtl),
752
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
753
}
754
}
755
// OSD horizontal
757
.osd &:not(.vertical) {
758
button {
759
}
760
}
761
// Vertical
763
&.vertical {
764
// in the vertical configuration, we treat the spinbutton
765
// as a box, and tweak the style of the entry in the middle
766
// so that it's linked
767
// FIXME: this should not be set at all, but otherwise it gets the wrong
769
// color
770
&:disabled { color: $disabled_fg_color; }
771
&:drop(active) {
773
box-shadow: none;
774
}
775
entry {
777
min-height: $medium_size;
778
min-width: $large_size;
779
padding: 0;
780
}
781
button {
783
min-height: $medium_size;
784
min-width: $large_size;
785
padding: 0;
786
@extend %simple_flat_button;
788
&.up { border-radius: 2px 2px 0 0; }
790
&.down { border-radius: 0 0 2px 2px; }
792
}
793
}
794
// OSD vertical
796
.osd &.vertical button:first-child {
797
}
798
// Misc
800
treeview &:not(.vertical) {
801
min-height: 0;
802
border-style: none;
803
border-radius: 0;
804
entry {
806
min-height: 0;
807
padding: 1px 2px;
808
}
809
}
810
}
811
/**************
814
* ComboBoxes *
815
**************/
816
combobox {
817
arrow {
818
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
819
min-height: 16px;
820
min-width: 16px;
821
}
822
button.combo:checked { transition: none; } // workaround for menuitem selection
824
button.combo cellview {
826
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
827
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
828
}
829
#gtk-combobox-popup-menu {
831
padding: 2px 0;
832
menuitem {
834
min-height: $medium_size - 2px * 2;
835
padding: 0 8px;
836
}
837
}
838
&.linked {
840
button:nth-child(2) {
841
&:dir(ltr) { @extend %linked:last-child; }
842
&:dir(rtl) { @extend %linked:first-child; }
843
}
844
}
845
&:drop(active) { // FIXME: untested
847
box-shadow: none;
848
// button.combo { @extend %button_basic:drop(active); }
850
}
851
}
852
.linked > combobox > box > button.combo {
854
// the combo is a composite widget so the way we do button linking doesn't
855
// work, special case needed. See
856
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
857
&:dir(ltr),
859
&:dir(rtl) { @extend %linked_middle; } // specificity bump
860
}
861
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
863
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
864
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
865
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
867
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child; }
868
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
869
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
870
%combo_flat {
872
border-radius: 0;
873
background-image: none;
874
font-weight: inherit;
875
@include entry(flat-normal);
877
&:hover { box-shadow: inset 0 -2px $fill_color; }
879
&:checked {
881
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
882
$primary_color 100%,
883
transparent 0%)
884
0 0 2 / 0 0 2px;
885
}
886
&:disabled { color: $disabled_fg_color; }
888
}
889
/************
892
* Toolbars *
893
************/
894
toolbar {
895
-GtkWidget-window-dragging: true;
896
padding: $container_padding / 2;
897
background-color: $bg_color;
898
button { @extend %button_basic.flat; }
900
// on OSD
902
.osd & { background-color: transparent; }
903
// stand-alone OSD toolbars
905
&.osd {
906
transition: $shadow_transition;
907
padding: $container_padding;
908
border-radius: 2px;
909
box-shadow: $shadow_2, inset 0 1px $highlight_color;
910
background-color: $base_color;
911
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
913
&.left,
915
&.right,
916
&.top,
917
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
918
}
919
// toolbar separators
921
&.horizontal separator { margin: $container_padding / 2; }
922
&.vertical separator { margin: $container_padding / 2; }
923
&:not(.inline-toolbar):not(.osd) {
925
scale,
926
entry,
927
spinbutton,
928
button { margin: $container_padding / 2; }
929
.linked entry,
931
.linked spinbutton,
932
.linked button {
933
&:not(:first-child) { margin-left: 0; }
934
&:not(:last-child) { margin-right: 0; }
935
}
936
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
938
}
939
}
940
// searchbar, location-bar & inline-toolbar
942
.inline-toolbar {
943
padding: $container_padding;
944
border-style: solid;
945
border-width: 0 1px 1px;
946
border-color: $border_color;
947
background-color: $alt_base_color;
948
}
949
searchbar,
951
.location-bar {
952
padding: $container_padding;
953
border-style: solid;
954
border-width: 0 0 1px;
955
border-color: $border_color;
956
background-color: $bg_color;
957
background-clip: border-box;
958
}
959
/***************
962
* Header bars *
963
***************/
964
%titlebar,
965
headerbar {
966
transition: background-color $shorter_duration $deceleration_curve;
967
min-height: $large_size;
968
padding: 0 $container_padding;
969
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
970
background-color: $titlebar_bg_color;
971
color: $titlebar_fg_color;
972
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
974
&:backdrop {
976
color: $secondary_titlebar_fg_color;
977
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
979
}
980
.title {
982
transition: $longer_transition;
983
padding: 0 12px;
984
font-weight: bold;
985
}
986
.subtitle {
988
transition: $longer_transition;
989
padding: 0 12px;
990
font-size: smaller;
991
@extend .dim-label;
993
}
994
button:not(.suggested-action):not(.destructive-action) {
996
@extend %button_basic.flat;
997
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
999
$titlebar_indicator_color 0%,
1000
transparent 0%)
1001
0 0 0 / 0 0 0px;
1002
&:checked {
1004
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1005
$titlebar_indicator_color 100%,
1006
transparent 0%)
1007
0 0 2 / 0 0 2px;
1008
&, &:disabled { background-color: transparent; }
1010
}
1011
}
1012
button.suggested-action, button.destructive-action {
1014
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1015
}
1016
&.selection-mode {
1018
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1019
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1020
transition: background-color 0.00001s $longer_duration;
1021
animation: header_ripple_effect $longer_duration $deceleration_curve;
1022
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1023
background-color: $primary_color;
1024
color: $inverse_fg_color;
1025
&:backdrop {
1027
color: $secondary_inverse_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: currentColor;
1038
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1040
&:checked {
1042
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1043
currentColor 100%,
1044
transparent 0%)
1045
0 0 2 / 0 0 2px;
1046
color: currentColor;
1047
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1049
}
1050
}
1051
.selection-menu {
1053
padding-left: 16px;
1054
padding-right: 16px;
1055
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1057
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1059
}
1060
}
1061
.fullscreen &,
1063
.tiled &,
1064
.maximized & {
1065
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1066
box-shadow: $shadow_1;
1067
}
1068
&.default-decoration {
1070
min-height: $small_size;
1071
padding: $container_padding;
1072
box-shadow: inset 0 1px $titlebar_highlight_color;
1073
.fullscreen &,
1075
.tiled &,
1076
.maximized & { box-shadow: none; }
1077
button.titlebutton {
1079
min-height: $small_size;
1080
min-width: $small_size;
1081
margin: 0;
1082
padding: 0;
1083
}
1084
// workaround for non-animatable buttons
1086
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1087
}
1088
.solid-csd & {
1090
&:dir(rtl), &:dir(ltr) { // specificity bump
1091
// margin-left: -2px;
1092
// margin-right: -2px;
1093
// margin-top: -2px;
1094
// border-radius: 0;
1095
// box-shadow: inset 0 1px $titlebar_highlight_color;
1096
}
1097
}
1098
}
1099
headerbar {
1101
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1102
entry,
1103
spinbutton,
1104
// separator,
1105
button {
1106
margin-top: $container_padding;
1107
margin-bottom: $container_padding;
1108
}
1109
switch {
1111
margin-top: $container_padding * 2;
1112
margin-bottom: $container_padding * 2;
1113
}
1114
// reset button margins of the spinbutton
1116
spinbutton button {
1117
margin-top: 0;
1118
margin-bottom: 0;
1119
}
1120
}
1121
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1123
border-top-left-radius: 2px;
1124
border-top-right-radius: 2px;
1125
}
1126
headerbar { // headerbar border rounding
1128
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1129
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1130
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1132
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1134
&:first-child, &:last-child {
1135
border-top-left-radius: 2px;
1136
border-top-right-radius: 2px;
1137
}
1138
}
1139
}
1140
.titlebar:not(headerbar) {
1142
window.csd > & {
1143
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1144
padding: 0;
1145
background-color: transparent;
1146
background-image: none;
1147
border-style: none;
1148
box-shadow: none;
1149
}
1150
> separator {
1152
background-color: $titlebar_bg_color;
1153
background-image: image($border_color);
1154
}
1155
@extend %titlebar;
1157
}
1158
/************
1161
* Pathbars *
1162
************/
1163
%pathbar_button,
1164
.path-bar button {
1165
padding-left: ($medium_size - 24px) / 2;
1166
padding-right: ($medium_size - 24px) / 2;
1167
label:not(:only-child) {
1169
&:first-child { margin-left: 4px; }
1170
&:last-child { margin-right: 4px; }
1172
}
1173
&.slider-button {
1175
padding-left: (24px - 16px) / 2;
1176
padding-right: (24px - 16px) / 2;
1177
}
1178
:not(headerbar) & {
1180
@extend %flat_button;
1181
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1183
$primary_color 0%,
1184
transparent 0%)
1185
0 0 0 / 0 0 0px;
1186
border-radius: 2px;
1187
&:checked {
1189
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1190
$primary_color 100%,
1191
transparent 0%)
1192
0 0 2 / 0 0 2px;
1193
&, &:disabled { background-color: transparent; }
1195
}
1196
}
1197
}
1198
/**************
1201
* Tree Views *
1202
**************/
1203
treeview.view {
1204
@at-root * {
1205
-GtkTreeView-horizontal-separator: 4;
1206
-GtkTreeView-grid-line-width: 1;
1207
-GtkTreeView-grid-line-pattern: '';
1208
-GtkTreeView-tree-line-width: 1;
1209
-GtkTreeView-tree-line-pattern: '';
1210
-GtkTreeView-expander-size: 16;
1211
}
1212
border-left-color: $fill_color; // this is actually the tree lines color,
1214
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1215
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1217
&.separator {
1219
min-height: 1px + 2px * 2;
1220
color: $border_color;
1221
}
1222
&:drop(active) {
1224
border-style: solid none;
1225
border-width: 1px;
1226
border-color: $accent_color;
1227
&.after { border-top-style: none; }
1229
&.before { border-bottom-style: none; }
1231
}
1232
&.expander {
1234
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1235
-gtk-icon-transform: rotate(-90deg);
1236
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1238
&:checked { -gtk-icon-transform: unset; }
1240
color: $secondary_fg_color;
1242
&:hover, &:active { color: $fg_color; }
1244
&:disabled { color: $disabled_secondary_fg_color; }
1246
&:selected {
1248
color: $secondary_inverse_fg_color;
1249
&:hover, &:active { color: $inverse_fg_color; }
1251
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1253
}
1254
}
1255
&.progressbar { // progress bar in treeviews
1257
border-bottom: $bar_size solid $primary_color;
1258
box-shadow: none;
1259
background-color: transparent;
1260
&:selected { border-bottom-color: currentColor; }
1262
}
1263
&.trough { // progress bar trough in treeviews
1265
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
1266
box-shadow: none;
1267
background-color: transparent;
1268
&:selected { border-bottom-color: $fill_color; }
1270
}
1271
header {
1273
button {
1274
@extend row.activatable;
1275
padding: 2px 6px;
1277
border-style: none solid solid none;
1278
border-width: 1px;
1279
border-color: $border_color;
1280
border-radius: 0;
1281
background-clip: border-box;
1282
&, &:hover, &:active { box-shadow: none; }
1284
&, &:disabled { background-color: $base_color; }
1286
&:last-child { border-right-style: none; }
1288
}
1289
}
1290
button.dnd,
1292
header.button.dnd { // for treeview-like derive widgets
1293
padding: 2px 6px;
1294
border-style: none solid solid;
1295
border-width: 1px;
1296
border-color: $border_color;
1297
border-radius: 0;
1298
box-shadow: none;
1299
background-color: $base_color;
1300
background-clip: border-box;
1301
color: $primary_color;
1302
}
1303
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1305
}
1306
/*********
1309
* Menus *
1310
*********/
1311
menubar,
1312
.menubar {
1313
-GtkWidget-window-dragging: true;
1314
padding: 0;
1315
// box-shadow: inset 0 -1px $border_color;
1316
background-color: $titlebar_bg_color;
1317
> menuitem {
1319
transition: $shorter_transition;
1320
min-height: 20px;
1321
padding: 4px 8px;
1322
color: $secondary_titlebar_fg_color;
1323
&:hover { // Seems like it :hover even with keyboard focus
1325
transition: none;
1326
background-color: $semi_fill_color;
1327
color: $titlebar_fg_color;
1328
}
1329
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1331
}
1332
}
1333
.csd.popup { border-radius: 2px; }
1335
menu,
1337
.menu,
1338
.context-menu {
1339
margin: 4px 0;
1340
padding: 4px 0;
1341
box-shadow: inset 0 1px $highlight_color;
1342
background-color: $base_color;
1343
border: 1px solid $border_color; // adds borders in a non composited env
1344
.csd & {
1346
border: none; // axes borders in a composited env
1347
border-radius: 2px;
1348
}
1349
menuitem {
1351
transition: $shorter_transition;
1352
min-height: 20px;
1353
min-width: 40px;
1354
padding: 4px 8px;
1355
font: initial;
1356
text-shadow: none;
1357
&:hover {
1359
transition: none;
1360
background-color: $semi_fill_color;
1361
}
1362
&:disabled { color: $disabled_fg_color; }
1364
// submenu indicators
1366
arrow {
1367
min-height: 16px;
1368
min-width: 16px;
1369
&:dir(ltr) {
1371
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1372
margin-left: 8px;
1373
}
1374
&:dir(rtl) {
1376
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1377
margin-right: 8px;
1378
}
1379
}
1380
// avoids labels color being overridden, see
1382
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1383
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1384
}
1385
// overflow arrows
1387
> arrow {
1388
min-height: 16px;
1389
min-width: 16px;
1390
padding: 4px;
1391
border-radius: 0;
1392
background-color: $base_color;
1393
color: $secondary_fg_color;
1394
&.top {
1396
margin-top: -4px;
1397
border-bottom: 1px solid $border_color;
1398
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1399
}
1400
&.bottom {
1402
margin-bottom: -4px;
1403
border-top: 1px solid $border_color;
1404
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1405
}
1406
&:hover {
1408
background-image: image($semi_fill_color);
1409
color: $fg_color;
1410
}
1411
&:disabled {
1413
border-color: transparent;
1414
background-color: transparent;
1415
color: transparent;
1416
// color: $disabled_secondary_fg_color;
1417
}
1418
}
1419
separator { margin: 4px 0; }
1421
}
1422
menuitem {
1424
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1425
check,
1427
radio {
1428
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1429
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1430
}
1431
}
1432
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1434
// Electron/Atom render all translucent colors in opaque colors.
1435
// It's a very critical issue for this theme and should be fixed by upstream...
1436
.popup:not(.csd) menu {
1437
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1438
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1439
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1440
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1441
menuitem {
1443
color: $opaque_fg_color;
1444
&:hover { background-color: $opaque_semi_fill_color; }
1446
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1448
}
1449
// TODO: not working this, where/how i can set the accelerators?
1451
accelerator { color: $opaque_tertiary_fg_color; }
1452
}
1453
/************
1456
* Popovers *
1457
************/
1458
popover.background {
1459
transition: $shadow_transition;
1460
padding: 2px;
1461
box-shadow: $shadow_2; // TODO: this should really have a highlight
1462
background-color: $lighter_bg_color;
1463
&:backdrop { box-shadow: $shadow_1; }
1465
&, .csd & {
1467
border-style: solid;
1468
border-width: 1px;
1469
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1470
border-radius: 2px + 1px;
1471
}
1472
> stack { margin: -4px; } // remove extra padding from menu style popovers
1474
> toolbar { margin: -2px; }
1476
> list,
1478
> .view,
1479
> toolbar {
1480
border-style: none;
1481
box-shadow: none;
1482
background-color: transparent;
1483
}
1484
&.touch-selection,
1486
&.magnifier,
1487
&.osd { @extend %osd; }
1488
// entry { @extend %entry.flat; }
1490
// button.combo { @extend %combo_flat; }
1492
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1494
&.menu button,
1496
button.model {
1497
@extend %simple_flat_button;
1498
min-height: 32px;
1500
padding: 0 8px;
1501
border-radius: 2px;
1502
&:checked { @extend %selected_items; }
1504
}
1505
separator { margin: 4px 0; }
1507
list separator { margin: 0; }
1509
}
1510
/*************
1512
* Notebooks *
1513
*************/
1514
notebook {
1515
> header {
1516
border-width: 1px;
1517
border-color: $border_color;
1518
background-color: $bg_color;
1519
background-clip: border-box;
1520
&.top {
1522
border-bottom-style: solid;
1523
> tabs {
1524
margin-bottom: -1px;
1525
> tab {
1526
&:hover { box-shadow: inset 0 -2px $fill_color; }
1528
&:checked { box-shadow: inset 0 -2px $primary_color; }
1530
}
1531
}
1532
}
1533
&.bottom {
1535
border-top-style: solid;
1536
> tabs {
1537
margin-top: -1px;
1538
> tab {
1539
&:hover { box-shadow: inset 0 2px $fill_color; }
1541
&:checked { box-shadow: inset 0 2px $primary_color; }
1543
}
1544
}
1545
}
1546
&.left {
1548
border-right-style: solid;
1549
> tabs {
1550
margin-right: -1px;
1551
> tab {
1552
&:hover { box-shadow: inset -2px 0 $fill_color; }
1554
&:checked { box-shadow: inset -2px 0 $primary_color; }
1556
}
1557
}
1558
}
1559
&.right {
1561
border-left-style: solid;
1562
> tabs {
1563
margin-left: -1px;
1564
> tab {
1565
&:hover { box-shadow: inset 2px 0 $fill_color; }
1567
&:checked { box-shadow: inset 2px 0 $primary_color; }
1569
}
1570
}
1571
}
1572
&.top > tabs > arrow {
1574
@extend %notebook_vert_arrows;
1575
border-top-style: none;
1577
}
1578
&.bottom > tabs > arrow {
1580
@extend %notebook_vert_arrows;
1581
border-bottom-style: none;
1583
}
1584
@at-root %notebook_vert_arrows {
1586
padding-left: 4px;
1587
padding-right: 4px;
1588
&.down {
1590
margin-left: -8px;
1591
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1592
}
1593
&.up {
1595
margin-right: -8px;
1596
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1597
}
1598
}
1599
&.left > tabs > arrow {
1601
@extend %notebook_horz_arrows;
1602
border-left-style: none;
1604
}
1605
&.right > tabs > arrow {
1607
@extend %notebook_horz_arrows;
1608
border-right-style: none;
1610
}
1611
@at-root %notebook_horz_arrows {
1613
padding-top: 4px;
1614
padding-bottom: 4px;
1615
&.down {
1617
margin-top: -8px;
1618
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1619
}
1620
&.up {
1622
margin-bottom: -8px;
1623
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1624
}
1625
}
1626
> tabs > arrow {
1628
@extend %simple_flat_button;
1629
min-height: 16px;
1631
min-width: 16px;
1632
border-radius: 0;
1633
}
1634
tab {
1636
transition: $longer_transition,
1637
background-size 0,
1638
background-image 0;
1639
min-height: $small_size;
1640
min-width: $small_size;
1641
padding: $container_padding 12px;
1642
outline-offset: -6px;
1644
border-width: 1px; // for reorderable tabs
1646
border-color: transparent; //
1647
background-image: radial-gradient(circle farthest-corner at center,
1649
$primary_color 10%,
1650
transparent 0%);
1651
background-repeat: no-repeat;
1652
background-position: center;
1653
background-size: 0% 0%;
1654
color: $secondary_fg_color;
1656
font-weight: 500;
1657
&:hover {
1659
color: $fg_color;
1660
&.reorderable-page {
1662
border-color: $border_color;
1663
background-color: $alt_base_color;
1664
}
1665
}
1666
&:disabled { color: $disabled_secondary_fg_color; }
1668
&:checked {
1670
transition: $longer_transition,
1671
background-size $longer_duration $deceleration_curve,
1672
background-image $longer_duration + $ripple_duration $deceleration_curve;
1673
background-image: radial-gradient(circle farthest-corner at center,
1674
transparent 10%,
1675
transparent 0%);
1676
background-size: 1000% 1000%;
1677
color: $fg_color;
1678
&:disabled { color: $disabled_fg_color; }
1680
&.reorderable-page {
1682
border-color: $border_color;
1683
background-color: $base_color;
1684
}
1685
}
1686
// colors the button like the label, overridden otherwise
1688
button.flat {
1689
@extend %small_button;
1690
&:last-child {
1692
margin-left: $container_padding;
1693
margin-right: $container_padding - 12px;
1694
}
1695
&:first-child {
1697
margin-left: $container_padding - 12px;
1698
margin-right: $container_padding;
1699
}
1700
}
1701
}
1702
&.top,
1704
&.bottom {
1705
tabs {
1706
padding-left: 8px;
1707
padding-right: 8px;
1708
&:not(:only-child) {
1710
&:first-child { margin-left: 0; }
1711
&:last-child { margin-right: 0; }
1712
}
1713
tab {
1715
&.reorderable-page {
1716
margin: 0 -1px;
1717
border-style: none solid;
1718
}
1719
}
1720
}
1721
}
1722
&.left,
1724
&.right {
1725
tabs {
1726
padding-top: 8px;
1727
padding-bottom: 8px;
1728
&:not(:only-child) {
1730
&:first-child { margin-top: 0; }
1731
&:last-child { margin-bottom: 0; }
1732
}
1733
tab {
1735
&.reorderable-page {
1736
margin: -1px 0;
1737
border-style: solid none;
1738
}
1739
}
1740
}
1741
}
1742
}
1743
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1745
background-color: $base_color;
1746
entry:not(.search),
1748
spinbutton:not(.vertical) { @extend %entry.flat; }
1749
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1751
button.combo { @extend %combo_flat; }
1753
}
1754
}
1755
/**************
1758
* Scrollbars *
1759
**************/
1760
scrollbar {
1761
$_slider_min_length: 24px;
1762
// disable steppers
1764
@at-root * {
1765
-GtkScrollbar-has-backward-stepper: false;
1766
-GtkScrollbar-has-forward-stepper: false;
1767
}
1768
transition: $longer_transition;
1770
background-color: $base_color;
1771
background-clip: $extra_background_clip;
1772
// scrollbar border
1774
&.top { border-bottom: 1px solid $border_color; }
1775
&.bottom { border-top: 1px solid $border_color; }
1776
&.left { border-right: 1px solid $border_color; }
1777
&.right { border-left: 1px solid $border_color; }
1778
// slider
1780
slider {
1781
transition: $shorter_transition, margin 0, border-width 0;
1782
min-width: 8px;
1783
min-height: 8px;
1784
border: 4px solid transparent;
1785
border-radius: $circular_radius;
1786
background-clip: padding-box;
1787
background-color: $tertiary_fg_color;
1788
&:hover { background-color: $secondary_fg_color; }
1790
&:active { background-color: $fg_color; }
1792
&:disabled { background-color: $disabled_tertiary_fg_color; }
1794
}
1795
&.fine-tune {
1797
slider {
1798
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1799
min-width: 4px;
1800
min-height: 4px;
1801
}
1802
&.horizontal slider { margin: 2px 0; }
1804
&.vertical slider { margin: 0 2px; }
1806
}
1807
&.overlay-indicator {
1809
&:not(.dragging):not(.hovering) {
1810
border-color: transparent;
1811
background-color: transparent;
1812
slider {
1814
min-width: 4px;
1815
min-height: 4px;
1816
margin: 4px - 1px;
1817
border: 1px solid scale-alpha($base_color, $lower_opacity);
1818
}
1819
button {
1821
min-width: 4px;
1822
min-height: 4px;
1823
margin: 4px - 1px;
1824
border: 1px solid scale-alpha($base_color, $lower_opacity);
1825
border-radius: $circular_radius;
1826
background-color: $tertiary_fg_color;
1827
background-clip: padding-box;
1828
-gtk-icon-source: none;
1829
&:disabled { background-color: $disabled_tertiary_fg_color; }
1831
}
1832
&.horizontal {
1834
slider { min-width: $_slider_min_length; }
1835
button { min-width: 8px; }
1837
}
1838
&.vertical {
1840
slider { min-height: $_slider_min_length; }
1841
button { min-height: 8px; }
1843
}
1844
}
1845
&.dragging,
1847
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1848
}
1849
&.horizontal slider { min-width: $_slider_min_length; }
1851
&.vertical slider { min-height: $_slider_min_length; }
1853
// button styling
1855
button {
1856
@extend %simple_flat_button;
1857
min-width: 16px;
1859
min-height: 16px;
1860
padding: 0;
1861
border-radius: 0;
1862
}
1863
// button icons
1865
&.vertical {
1866
button {
1867
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1868
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1870
}
1871
}
1872
&.horizontal {
1874
button {
1875
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1876
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1878
}
1879
}
1880
}
1881
/**********
1884
* Switch *
1885
**********/
1886
switch {
1887
transition: $longer_transition;
1888
margin: $container_padding 0;
1889
border: 4px solid transparent;
1890
border-radius: $circular_radius;
1891
background-color: $fill_color;
1892
background-clip: padding-box;
1893
font-size: 0;
1894
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1896
&:checked {
1898
background-color: scale-alpha($accent_color, 0.5);
1899
&:disabled {
1901
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1902
color: $disabled_fg_color;
1903
}
1904
}
1905
slider {
1907
@include entry(normal);
1908
transition: $longer_transition, $shadow_transition, margin 0;
1910
min-width: $small_size;
1911
min-height: $small_size;
1912
margin: -4px 0 -4px -4px;
1913
border-radius: $circular_radius;
1914
-gtk-outline-radius: $circular_radius;
1915
}
1916
&:hover slider { @include entry(focus); }
1918
&:checked slider {
1920
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1921
animation: needs_attention $longer_duration $deceleration_curve;
1922
margin: -4px -4px -4px 0;
1923
background-color: $accent_color;
1924
color: $inverse_fg_color;
1925
}
1926
&:disabled slider { @include entry(disabled); }
1928
&:checked:disabled slider { animation: none; }
1930
row:selected & {
1932
}
1933
}
1934
/*************************
1937
* Check and Radio items *
1938
*************************/
1939
// draw regular check and radio items using our PNG assets
1940
// all assets are rendered from assets.svg. never add pngs directly
1941
// selection-mode
1943
@each $s, $as in ('', '-unchecked'),
1944
(':checked', '-checked') {
1945
.view.content-view.check#{$s}:not(list) {
1946
margin: 8px;
1947
box-shadow: none;
1948
background-color: transparent;
1949
background-image: none;
1950
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1951
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1952
-gtk-icon-shadow: $shadow_1;
1953
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1955
}
1956
}
1957
checkbutton.text-button,
1959
radiobutton.text-button {
1960
// this is for a nice focus on check and radios text
1961
padding: 2px;
1962
outline-offset: 0;
1963
label:not(:only-child) { margin: 0 4px; }
1965
}
1966
check,
1968
radio {
1969
min-height: 24px;
1970
min-width: 24px;
1971
margin: -($large_size - 24px) / 2;
1972
padding: ($large_size - 24px) / 2;
1973
@extend %simple_flat_button;
1975
@extend %circular_button;
1977
&:checked, &:indeterminate {
1979
color: $accent_color;
1980
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1982
}
1983
// &:only-child { margin: -12px; }
1985
row &:not(:checked):not(:indeterminate) {
1987
color: gtkalpha(currentColor, $secondary_opacity);
1988
&:hover, &:active { color: currentColor; }
1990
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1992
}
1993
menu menuitem & {
1995
transition: none;
1996
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1997
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1999
&, &:hover, &:disabled {
2001
box-shadow: none;
2002
// color: inherit;
2003
}
2004
}
2005
}
2006
%check,
2008
check {
2009
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2010
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2011
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2013
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2014
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2016
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2017
}
2018
%radio,
2020
radio {
2021
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2022
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2023
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2025
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2026
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2028
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2029
border-image-slice: $large_size / 2px;
2031
border-image-width: $large_size / 2;
2032
$radio_indicator: 10px / $large_size / 2;
2034
& {
2036
border-image-source: -gtk-gradient(radial,
2037
center center, 0,
2038
center center, 0.001,
2039
to($accent_color),
2040
to(transparent));
2041
}
2042
&:checked:not(:indeterminate) {
2044
border-image-source: -gtk-gradient(radial,
2045
center center, 0,
2046
center center, $radio_indicator,
2047
to($accent_color),
2048
to(transparent));
2049
}
2050
&:checked:not(:indeterminate):disabled {
2052
border-image-source: -gtk-gradient(radial,
2053
center center, 0,
2054
center center, $radio_indicator,
2055
to(scale-alpha($accent_color, $disabled_opacity)),
2056
to(transparent));
2057
}
2058
}
2059
// ANIMATION:
2061
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2062
// the transformation is set on the active state and it get reset on the checked state.
2063
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2064
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2066
check:not(:checked):indeterminate:active,
2068
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2069
check:not(:checked),
2071
radio:not(:checked) {
2072
& {
2073
transition: $longer_transition,
2074
background-size $ripple_duration $deceleration_curve,
2075
background-image $ripple_duration * 2 $deceleration_curve,
2076
-gtk-icon-transform 0;
2077
}
2078
&:active {
2080
transition: $longer_transition,
2081
background-size 0,
2082
background-image 0,
2083
-gtk-icon-transform 0;
2084
}
2085
menu menuitem & { transition: none; }
2087
}
2088
treeview.view check,
2090
treeview.view radio {
2091
padding: 0;
2092
&:hover {
2094
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2095
&:disabled { box-shadow: none; }
2097
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2099
}
2100
& {
2102
color: $secondary_fg_color;
2103
&:hover, &:active { color: $fg_color; }
2105
&:disabled { color: $disabled_secondary_fg_color; }
2107
&:checked, &:indeterminate { color: $accent_color; }
2109
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2111
}
2112
&:selected {
2114
color: $secondary_inverse_fg_color;
2115
&:hover, &:active { color: $inverse_fg_color; }
2117
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2119
&:checked, &:indeterminate { color: $accent_color; }
2121
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2123
}
2124
}
2125
treeview.view radio:checked {
2127
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2128
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2129
border-image: none;
2130
}
2131
/************
2134
* GtkScale *
2135
************/
2136
scale {
2137
// sizing
2138
$_marks_lenght: 8px;
2139
$_marks_distance: 8px;
2140
$slider_size: 24px;
2142
$marks_slider_size: 30px;
2143
$slider_margin: -($slider_size - $bar_size) / 2;
2145
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2146
$color_slider_margin: -($slider_size) / 2;
2148
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2149
min-height: $medium_size - $slider_size;
2151
min-width: $medium_size - $slider_size;
2152
padding: ($slider_size / 2);
2153
* { transition: $longer_transition; }
2155
// the slider is inside the trough, so to have make it bigger there's a negative margin
2157
slider {
2158
min-height: $slider_size;
2159
min-width: $slider_size;
2160
margin: $slider_margin;
2161
}
2162
// the backing bit
2164
trough {
2165
outline-offset: 2px;
2166
background-color: $fill_color;
2167
&:disabled { color: $disabled_fg_color; }
2169
}
2170
// the colored part of the backing bit
2172
highlight {
2173
background-color: $accent_color;
2174
&:disabled { background-color: transparent; }
2176
}
2177
// this is another differently styled part of the backing bit, the most relevant use case is for example
2179
// in media player to indicate how much video stream as been cached
2180
fill {
2181
background-color: $fill_color;
2182
&:disabled { background-color: transparent; }
2184
}
2185
slider {
2187
transition: all $shorter_duration $standard_curve;
2188
// border-radius: 100%;
2189
// background-color: $accent_color;
2190
background-repeat: no-repeat;
2191
background-position: center;
2192
@each $s, $as in ('', ''),
2194
(':disabled', '-disabled') {
2195
&#{$s} {
2196
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2197
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2199
}
2200
}
2201
background-size: calc(100% - 8px);
2203
&:hover { background-size: calc(100% - 4px); }
2205
&:active { background-size: calc(100% - 0px); }
2207
}
2208
// click-and-hold the slider to activate
2210
&.fine-tune {
2211
// to make the slider shrink in fine-tune mode
2212
slider { background-size: calc(100% - 12px); }
2213
}
2214
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2216
marks {
2218
color: $fill_color;
2219
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2221
(bottom, bottom, top),
2222
(top, left, right),
2223
(bottom, right, left) {
2224
&.#{$marks_class} {
2225
margin-#{$marks_margin}: $_marks_distance;
2226
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2227
}
2228
}
2229
}
2230
&.horizontal {
2232
indicator {
2233
min-height: $_marks_lenght;
2234
min-width: 1px;
2235
}
2236
}
2237
&.vertical {
2239
indicator {
2240
min-height: 1px;
2241
min-width: $_marks_lenght;
2242
}
2243
}
2244
// *WARNING* scale with marks madness following
2246
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2248
('vertical', 'vert') {
2249
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2250
('marks-after', 'marks-after:not(.marks-before)') {
2251
&.#{$dir_class}.#{$marks_class} {
2252
slider {
2253
@each $state, $state_infix in ('', ''),
2254
(':disabled', '-disabled') {
2255
&#{$state} {
2256
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2257
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2259
}
2260
}
2261
@if $dir_class == 'horizontal' {
2263
min-height: $marks_slider_size;
2264
min-width: $slider_size;
2265
@if $marks_infix == 'marks-before' {
2267
margin-top: $marks_slider_margin;
2268
background-position: center calc(100% - 4px);
2270
&:hover { background-position: center calc(100% - 2px); }
2272
&:active { background-position: center calc(100% - 0px); }
2274
}
2275
@if $marks_infix == 'marks-after' {
2277
margin-bottom: $marks_slider_margin;
2278
background-position: center calc(4px);
2280
&:hover { background-position: center calc(2px); }
2282
&:active { background-position: center calc(0px); }
2284
}
2285
}
2286
@if $dir_class == 'vertical' {
2288
min-height: $slider_size;
2289
min-width: $marks_slider_size;
2290
@if $marks_infix == 'marks-before' {
2292
margin-left: $marks_slider_margin;
2293
background-position: calc(4px) center;
2295
&:hover { background-position: calc(2px) center; }
2297
&:active { background-position: calc(0px) center; }
2299
}
2300
@if $marks_infix == 'marks-after' {
2302
margin-right: $marks_slider_margin;
2303
background-position: calc(100% - 4px) center;
2305
&:hover { background-position: calc(100% - 2px) center; }
2307
&:active { background-position: calc(100% - 0px) center; }
2309
}
2310
}
2311
}
2312
&.fine-tune slider {
2314
@if $dir_class == 'horizontal' {
2315
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2316
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2318
}
2319
@if $dir_class == 'vertical' {
2321
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2322
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2324
}
2325
}
2326
}
2327
}
2328
}
2329
&.color {
2331
min-height: 0;
2332
min-width: 0;
2333
&.horizontal {
2335
padding: 0 0 12px 0;
2336
slider {
2338
&:dir(ltr), &:dir(rtl) { // specificity bump
2339
margin-bottom: $color_slider_margin;
2340
margin-top: $color_marks_slider_margin;
2341
}
2342
}
2343
}
2344
&.vertical {
2346
&:dir(ltr) {
2347
padding: 0 0 0 12px;
2348
slider {
2350
margin-left: $color_slider_margin;
2351
margin-right: $color_marks_slider_margin;
2352
}
2353
}
2354
&:dir(rtl) {
2356
padding: 0 12px 0 0;
2357
slider {
2359
margin-right: $color_slider_margin;
2360
margin-left: $color_marks_slider_margin;
2361
}
2362
}
2363
}
2364
}
2365
}
2366
/*****************
2369
* Progress bars *
2370
*****************/
2371
progressbar {
2372
// sizing
2373
&.horizontal {
2374
trough,
2375
progress { min-height: $bar_size; }
2376
}
2377
&.vertical {
2379
trough,
2380
progress { min-width: $bar_size; }
2381
}
2382
// FIXME: insensitive state missing and some other state should be set probably
2384
color: $tertiary_fg_color;
2385
font-size: smaller;
2386
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2388
progress { background-color: $primary_color; }
2390
&.osd { // progressbar.osd used for epiphany page loading progress
2392
// min-width: $bar_size;
2393
// min-height: $bar_size;
2394
// background-color: transparent;
2395
// trough { background-color: transparent; }
2397
progress {
2399
}
2400
}
2401
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2403
}
2404
/*************
2407
* Level Bar *
2408
*************/
2409
levelbar {
2410
block {
2411
min-width: $medium_size;
2412
min-height: $bar_size;
2413
}
2414
&.vertical block {
2416
min-width: $bar_size;
2417
min-height: $medium_size;
2418
}
2419
trough {
2421
padding: 2px;
2422
border-radius: 2px;
2423
@include entry(normal);
2425
&:disabled { @include entry(disabled); }
2427
}
2428
&.horizontal.discrete block { margin: 0 1px; }
2430
&.vertical.discrete block { margin: 1px 0; }
2432
&.horizontal.discrete trough { padding: 2px 1px; }
2434
&.vertical.discrete trough { padding: 1px 2px; }
2436
block {
2438
&.low {
2439
background-color: $warning_color;
2440
}
2441
&.high,
2443
&:not(.empty) {
2444
background-color: $primary_color;
2445
}
2446
&.full {
2448
background-color: $success_color;
2449
}
2450
&.empty {
2452
background-color: $fill_color;
2453
color: $disabled_fg_color;
2454
}
2455
}
2456
}
2457
/****************
2460
* Print dialog *
2461
*****************/
2462
printdialog {
2463
paper {
2464
padding: 0;
2465
border: 1px solid $border_color;
2466
background-color: $base_color;
2467
color: $fg_color;
2468
}
2469
.dialog-action-box { margin: 12px; }
2471
}
2472
/**********
2475
* Frames *
2476
**********/
2477
frame > border,
2478
.frame {
2479
margin: 0;
2480
padding: 0;
2481
border: 1px solid $border_color;
2482
border-radius: 0;
2483
box-shadow: none;
2484
&.flat { border-style: none; }
2486
}
2487
frame.flat > border { @extend .frame.flat; } // for backporting
2489
actionbar > revealer > box {
2491
padding: $container_padding;
2492
border-top: 1px solid $border_color;
2493
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2495
}
2496
scrolledwindow {
2498
viewport.frame { // avoid double borders when viewport inside scrolled window
2499
border-style: none;
2500
}
2501
// This is used when content is touch-dragged past boundaries.
2503
// draws a box on top of the content, the size changes programmatically.
2504
@at-root overshoot {
2505
&.top { @include overshoot(top); }
2506
&.bottom { @include overshoot(bottom); }
2508
&.left { @include overshoot(left); }
2510
&.right { @include overshoot(right); }
2512
}
2513
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2515
@at-root undershoot {
2516
&.top { @include undershoot(top); }
2517
&.bottom { @include undershoot(bottom); }
2519
&.left { @include undershoot(left); }
2521
&.right { @include undershoot(right); }
2523
}
2524
@at-root junction { // the small square between two scrollbars
2526
border-style: solid none none solid;
2527
border-width: 1px;
2528
border-color: $border_color;
2529
background-color: $base_color;
2530
&:dir(rtl) { border-style: solid solid none none; }
2532
}
2533
}
2534
// vbox and hbox separators
2536
separator {
2537
min-width: 1px;
2538
min-height: 1px;
2539
background-color: $border_color;
2540
}
2541
/*********
2544
* Lists *
2545
*********/
2546
list {
2547
border-color: $border_color;
2548
background-color: $base_color;
2549
row { padding: 2px; }
2551
}
2552
// FIXME
2554
$row_transition: $longer_transition, background-color 0, color 0;
2555
row {
2557
&.activatable {
2558
transition: $row_transition,
2559
background-size $ripple_duration $deceleration_curve,
2560
background-image $ripple_duration * 2 $deceleration_curve;
2561
box-shadow: inset 0 0 0 9999px transparent;
2562
background-image: radial-gradient(circle farthest-corner at center,
2563
transparent 10%,
2564
transparent 0%);
2565
background-repeat: no-repeat;
2566
background-position: center;
2567
background-size: 1000% 1000%;
2568
&:hover {
2570
transition: $row_transition,
2571
box-shadow 0,
2572
background-size $ripple_duration $deceleration_curve,
2573
background-image $ripple_duration * 2 $deceleration_curve;
2574
box-shadow: inset 0 0 0 9999px $row_fill_color;
2575
}
2576
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2578
&:active {
2579
transition: $row_transition,
2580
background-size 0,
2581
background-image 0;
2582
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2583
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2584
background-image: radial-gradient(circle farthest-corner at center,
2585
$semi_fill_color 10%,
2586
transparent 0%);
2587
background-size: 0% 0%;
2588
}
2589
}
2590
&:selected { @extend %selected_items; }
2592
}
2593
/*********************
2596
* App Notifications *
2597
*********************/
2598
.app-notification {
2599
@extend %osd;
2600
@extend toolbar.osd;
2602
margin: 8px;
2604
button { @extend %button_basic.flat; }
2606
&.frame,
2608
border { border-style: none; }
2609
}
2610
/*************
2613
* Expanders *
2614
*************/
2615
expander {
2616
arrow {
2617
transition: all $shorter_duration $standard_curve;
2618
min-width: 16px;
2619
min-height: 16px;
2620
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2621
-gtk-icon-transform: rotate(-90deg);
2622
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2624
&:checked { -gtk-icon-transform: unset; }
2626
color: $secondary_fg_color;
2628
&:hover, &:active { color: $fg_color; }
2630
&:disabled { color: $disabled_secondary_fg_color; }
2632
&:selected {
2634
color: $secondary_inverse_fg_color;
2635
&:hover, &:active { color: $inverse_fg_color; }
2637
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2639
}
2640
}
2641
}
2642
/************
2645
* Calendar *
2646
***********/
2647
calendar {
2648
padding: 1px;
2649
border: 1px solid $border_color;
2650
color: $fg_color;
2651
&:disabled { color: $disabled_fg_color; }
2653
&:selected {
2655
@extend %selected_items;
2656
border-radius: 2px + 1px;
2658
}
2659
&.header {
2661
border-style: none none solid;
2662
border-radius: 0;
2663
}
2664
&.button { @extend %simple_flat_button; }
2666
&.highlight {
2668
color: gtkalpha(currentColor, $tertiary_opacity);
2669
font-weight: 500;
2670
}
2671
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2673
}
2674
/***********
2677
* Dialogs *
2678
***********/
2679
messagedialog { // Message Dialog styling
2680
&.background { background-color: $lighter_bg_color; }
2681
.titlebar {
2683
min-height: $small_size;
2684
border-style: none;
2685
box-shadow: inset 0 1px $highlight_color;
2686
background-color: $lighter_bg_color;
2687
color: $fg_color;
2688
&:backdrop { color: $secondary_fg_color; }
2690
}
2691
&.csd { // rounded bottom border styling for csd version
2693
&.background {
2694
// bigger radius for better antialiasing
2695
border-bottom-left-radius: 2px;
2696
border-bottom-right-radius: 2px;
2697
}
2698
.dialog-action-area button {
2700
padding: 8px 16px;
2701
border-top: 1px solid $border_color;
2702
border-radius: 0;
2703
@extend %simple_flat_button;
2705
&:first-child { border-bottom-left-radius: 2px; }
2707
&:last-child { border-bottom-right-radius: 2px; }
2709
}
2710
}
2711
}
2712
filechooser {
2714
.dialog-action-box { border-top: 1px solid $border_color; }
2715
#pathbarbox {
2717
border-bottom: 1px solid $border_color;
2718
background-color: $bg_color;
2719
}
2720
}
2721
filechooserbutton:drop(active) {
2723
box-shadow: none;
2724
}
2725
/***********
2728
* Sidebar *
2729
***********/
2730
.sidebar {
2731
border-style: none;
2732
background-color: $lighter_bg_color;
2733
@at-root %sidebar_left,
2735
&:dir(ltr),
2736
&.left,
2737
&.left:dir(rtl) {
2738
border-right: 1px solid $border_color;
2739
border-left-style: none;
2740
}
2741
@at-root %sidebar_right,
2743
&:dir(rtl),
2744
&.right {
2745
border-left: 1px solid $border_color;
2746
border-right-style: none;
2747
}
2748
list { background-color: transparent; }
2750
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2752
}
2753
stacksidebar {
2755
&.sidebar {
2756
&:dir(ltr),
2757
&.left,
2758
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2759
&:dir(rtl),
2761
&.right { list { @extend %sidebar_right; }}
2762
}
2763
row {
2765
padding: 10px 4px;
2766
> label {
2768
padding-left: 6px;
2769
padding-right: 6px;
2770
}
2771
&.needs-attention > label { @extend %needs_attention; }
2773
}
2774
}
2775
/****************
2778
* File chooser *
2779
****************/
2780
placessidebar {
2781
> viewport.frame { border-style: none; }
2782
list { padding: (4px - 3px) 0 4px; }
2784
row {
2786
// Needs overriding of the GtkListBoxRow padding
2787
min-height: 32px;
2788
margin: -1px 0; // Remove unknown margins
2789
padding: 0;
2790
// Using margins/padding directly in the SidebarRow
2792
// will make the animation of the new bookmark row jump
2793
> revealer { padding: 0 12px; }
2794
&:selected { color: $inverse_fg_color; }
2796
&:disabled { color: $disabled_fg_color; }
2798
image.sidebar-icon {
2800
opacity: $tertiary_opacity; // dim the device icons
2801
&:dir(ltr) { padding-right: 8px; }
2803
&:dir(rtl) { padding-left: 8px; }
2804
}
2805
label.sidebar-label {
2807
&:dir(ltr) { padding-right: 2px; }
2808
&:dir(rtl) { padding-left: 2px; }
2809
}
2810
@at-root button.sidebar-button {
2812
@extend %simple_flat_button;
2813
@extend %small_button;
2815
row:selected & {
2817
}
2818
}
2819
&.sidebar-placeholder-row {
2821
min-height: 2px;
2822
padding: 0 8px;
2823
background-image: image($accent_color);
2824
background-clip: content-box;
2825
}
2826
&.sidebar-new-bookmark-row { color: $accent_color; }
2828
&:drop(active):not(:disabled) {
2830
box-shadow: inset 0 0 0 2px $accent_color;
2831
&:selected {
2833
// background-color: $accent_color;
2834
// color: $inverse_fg_color;
2835
}
2836
}
2837
}
2838
}
2839
placesview {
2841
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2842
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2844
// this selects the "connect to server" label
2846
> actionbar > revealer > box > label {
2847
padding-left: 8px;
2848
padding-right: 8px;
2849
}
2850
}
2851
/*********
2854
* Paned *
2855
*********/
2856
paned {
2857
> separator {
2858
min-width: 1px;
2859
min-height: 1px;
2860
-gtk-icon-source: none; // defeats the ugly default handle decoration
2861
border-style: none; // just to be sure
2862
background-color: transparent;
2863
// workaround, using background istead of a border since the border will get rendered twice (?)
2864
background-image: image($border_color);
2865
background-size: 1px 1px;
2866
background-clip: content-box; // avoids borders image being rendered twice (?)
2867
&.wide {
2869
min-width: 6px;
2870
min-height: 6px;
2871
background-color: $bg_color;
2872
background-image: image($border_color), image($border_color);
2873
background-size: 1px 1px, 1px 1px;
2874
}
2875
}
2876
&.horizontal > separator {
2878
background-repeat: repeat-y;
2879
&:dir(ltr) {
2881
margin: 0 -8px 0 0;
2882
padding: 0 8px 0 0;
2883
background-position: left;
2884
}
2885
&:dir(rtl) {
2887
margin: 0 0 0 -8px;
2888
padding: 0 0 0 8px;
2889
background-position: right;
2890
}
2891
&.wide {
2893
margin: 0;
2894
padding: 0;
2895
background-repeat: repeat-y, repeat-y;
2896
background-position: left, right;
2897
}
2898
}
2899
&.vertical > separator {
2901
margin: 0 0 -8px 0;
2902
padding: 0 0 8px 0;
2903
background-repeat: repeat-x;
2904
background-position: top;
2905
&.wide {
2907
margin: 0;
2908
padding: 0;
2909
background-repeat: repeat-x, repeat-x;
2910
background-position: bottom, top;
2911
}
2912
}
2913
}
2914
/**************
2917
* GtkInfoBar *
2918
**************/
2919
infobar {
2920
border-style: none;
2921
&.info { background-color: $info_bg_color; }
2923
&.question { background-color: $question_bg_color; }
2925
&.warning { background-color: $warning_bg_color; }
2927
&.error { background-color: $error_bg_color; }
2929
&.info,
2931
&.question,
2932
&.warning,
2933
&.error {
2934
> label, & { color: $inverse_fg_color; }
2935
button { @extend %button_selected; }
2937
selection {}
2939
*:link { @extend %link_selected; }
2941
}
2942
}
2943
/************
2946
* Tooltips *
2947
************/
2948
tooltip {
2949
&.background {
2950
// background-color needs to be set this way otherwise it gets drawn twice
2951
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2952
box-shadow: inset 0 1px $highlight_color;
2953
background-color: scale-alpha($base_color, $higher_opacity);
2954
}
2955
// @extend %osd;
2957
// padding: 4px; /* not working */
2959
border-radius: 2px;
2960
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2961
&:not(.csd) {
2963
border: 1px solid $border_color;
2964
border-radius: 2px + 1px;
2965
background-clip: $extra_background_clip;
2966
}
2967
// FIXME: we need a border or tooltips vanish on black background.
2969
decoration { background-color: transparent; }
2970
label {
2972
// tooltip label has already 6px margins
2973
min-height: 32px - 6px * 2;
2974
padding: 0 8px - 6px;
2975
}
2976
* {
2978
// workaround for Eclipse.
2979
// do not include any declaration here.
2980
// padding: 0;
2981
// background-color: transparent;
2982
// color: inherit;
2983
}
2984
}
2985
/*****************
2988
* Color Chooser *
2989
*****************/
2990
colorswatch {
2991
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2992
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2993
// applied to the overlay box.
2994
// base color corners rounding
2996
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2997
// sports a bigger radius.
2998
// nth-child is needed by the custom color strip.
2999
&.top {
3001
border-top-left-radius: $material_radius + 0.5px;
3002
border-top-right-radius: $material_radius + 0.5px;
3003
overlay {
3005
border-top-left-radius: $material_radius;
3006
border-top-right-radius: $material_radius;
3007
}
3008
}
3009
&.bottom {
3011
border-bottom-left-radius: $material_radius + 0.5px;
3012
border-bottom-right-radius: $material_radius + 0.5px;
3013
overlay {
3015
border-bottom-left-radius: $material_radius;
3016
border-bottom-right-radius: $material_radius;
3017
}
3018
}
3019
&.left,
3021
&:first-child:not(.top) {
3022
border-top-left-radius: $material_radius + 0.5px;
3023
border-bottom-left-radius: $material_radius + 0.5px;
3024
overlay {
3026
border-top-left-radius: $material_radius;
3027
border-bottom-left-radius: $material_radius;
3028
}
3029
}
3030
&.right,
3032
&:last-child:not(.bottom) {
3033
border-top-right-radius: $material_radius + 0.5px;
3034
border-bottom-right-radius: $material_radius + 0.5px;
3035
overlay {
3037
border-top-right-radius: $material_radius;
3038
border-bottom-right-radius: $material_radius;
3039
}
3040
}
3041
&.dark overlay { color: $light_fg_color; }
3043
&.light overlay { color: $dark_fg_color; }
3045
&.dark { color: $light_fg_color; } // for focus ring
3047
&.light { color: $dark_fg_color; } // for focus ring
3049
&:drop(active) {
3051
box-shadow: none;
3052
&.light overlay {
3054
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3055
}
3056
&.dark overlay {
3058
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3059
}
3060
}
3061
overlay {
3063
transition: $shadow_transition;
3064
box-shadow: $shadow_1;
3065
&:hover { box-shadow: $shadow_2; }
3067
}
3068
&#add-color-button {
3070
border-radius: $material_radius $material_radius 0 0;
3071
color: $light_fg_color; // for focus ring
3072
&:only-child { border-radius: $material_radius; }
3074
overlay {
3076
background-image: linear-gradient(to right,
3077
$error_bg_color 25%,
3078
$warning_bg_color 25%, $warning_bg_color 50%,
3079
$info_bg_color 50%, $info_bg_color 75%,
3080
$question_bg_color 75%);
3081
color: $light_fg_color;
3082
}
3083
}
3084
&:disabled {
3086
opacity: $disabled_opacity;
3087
overlay { box-shadow: none; }
3089
}
3090
row:selected & {
3092
}
3093
&#editor-color-sample {
3095
border-radius: $material_radius + 0.5px;
3096
overlay { border-radius: $material_radius; }
3098
// overlay:hover { box-shadow: $shadow_1; }
3100
}
3101
}
3102
// colorscale popup
3104
colorchooser .popover.osd {
3105
transition: $shadow_transition;
3106
border-radius: 2px;
3107
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3108
background-color: $base_color;
3109
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3111
spinbutton:not(.vertical) { @extend %entry.flat; }
3113
}
3114
/********
3117
* Misc *
3118
********/
3119
// content view (grid/list)
3120
.content-view {
3121
background-color: $bg_color;
3122
// &:hover { -gtk-icon-effect: highlight; }
3124
rubberband, .rubberband { @extend rubberband; }
3126
}
3127
.scale-popup {
3129
.osd & { @extend %osd; }
3130
.osd & button.flat { // FIXME: quick hack, redo properly
3132
}
3133
button { // +/- buttons on GtkVolumeButton popup
3135
}
3136
}
3137
/**********************
3140
* Window Decorations *
3141
*********************/
3142
decoration {
3143
transition: $shadow_transition;
3144
border-radius: 2px 2px 0 0;
3145
box-shadow: $shadow_4, 0 16px 16px transparent;
3146
// FIXME rationalize shadows
3148
// this is used for the resize cursor area
3150
margin: 8px;
3151
&:backdrop {
3153
// the transparent shadow here is to enforce that the shadow extents don't
3154
// change when we go to backdrop, to prevent jumping windows.
3155
// The biggest shadow should be in the same order then in the active state
3156
// or the jumping will happen during the transition.
3157
box-shadow: $shadow_2, 0 16px 16px transparent;
3158
}
3159
.maximized &,
3161
.fullscreen &,
3162
.tiled & { border-radius: 0; }
3163
.popup & { box-shadow: none; }
3165
// server-side decorations as used by mutter
3167
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3168
.csd.popup & {
3170
border-radius: 2px;
3171
box-shadow: $shadow_2;
3172
}
3173
tooltip.csd & {
3175
border-radius: 2px;
3176
box-shadow: $shadow_2;
3177
}
3178
messagedialog.csd & {
3180
border-radius: 2px;
3181
// box-shadow: $shadow_4, 0 16px 16px transparent;
3182
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3184
}
3185
.solid-csd & {
3187
margin: 0;
3188
// padding: 4px;
3189
border-radius: 0;
3190
box-shadow: none;
3191
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3192
background-color: $titlebar_bg_color;
3193
}
3194
}
3195
// Window Close button
3197
button.titlebutton {
3198
// @extend %simple_flat_button;
3199
@extend %circular_button;
3201
.selection-mode & {
3203
}
3204
}
3205
// catch all extend :)
3208
%selected_items {
3210
background-color: $primary_color;
3211
@at-root %nobg_selected_items, & {
3213
color: $inverse_fg_color;
3214
&:disabled { color: $disabled_inverse_fg_color; }
3216
}
3217
}
3218
.monospace { font-family: monospace; }
3220
/**********************
3223
* Touch Copy & Paste *
3224
*********************/
3225
// touch selection handlebars for the Popover.osd above
3226
cursor-handle {
3227
border-radius: $circular_radius;
3228
background-color: $accent_color;
3229
background-image: none;
3230
&.top:dir(ltr), &.bottom:dir(rtl) {
3232
padding-left: 6px;
3233
border-top-right-radius: 0;
3234
}
3235
&.bottom:dir(ltr), &.top:dir(rtl) {
3237
padding-right: 6px;
3238
border-top-left-radius: 0;
3239
}
3240
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3242
-GtkWidget-text-handle-width: 24;
3243
-GtkWidget-text-handle-height: 30;
3244
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3246
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3247
url('#{$_url}@2.png'));
3248
}
3249
}
3250
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3252
// shortcut window keys
3254
.keycap {
3255
min-width: 28px - 8px * 2;
3256
min-height: 28px - 2px;
3257
margin-top: 2px;
3258
padding-bottom: 2px;
3259
padding-left: 8px;
3260
padding-right: 8px;
3261
border: solid 1px $border_color;
3263
border-radius: 2px + 1px;
3264
box-shadow: inset 0 -2px $border_color;
3265
background-color: $base_color;
3266
color: $fg_color;
3267
font-size: smaller;
3268
}
3269
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3271
transition: $longer_transition;
3272
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3273
caret-color: $accent_color;
3274
}
3275
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3277
stackswitcher button.circular,
3279
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3280
min-width: $medium_size;
3281
min-height: $medium_size;
3282
padding: 0;
3283
}
3284