ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
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: transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: 2px;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
switch:focus slider,
37
notebook:focus tab,
38
*:focus { outline-color: $fill_color; }
39
/***************
42
* Base States *
43
***************/
44
.background {
45
background-color: $bg_color;
46
color: $fg_color;
47
}
48
/*
50
These wildcard seems unavoidable, need to investigate.
51
Wildcards are bad and troublesome, use them with care,
52
or better, just don't.
53
Everytime a wildcard is used a kitten dies, painfully.
54
*/
55
*:disabled { -gtk-icon-effect: dim; }
57
.gtkstyle-fallback {
59
background-color: $bg_color;
60
color: $fg_color;
61
&:hover {
63
background-color: darken($bg_color, 5%);
64
color: $fg_color;
65
}
66
&:active {
68
background-color: darken($bg_color, 10%);
69
color: $fg_color;
70
}
71
&:disabled {
73
background-color: $bg_color;
74
color: $disabled_fg_color;
75
}
76
&:selected {
78
background-color: $primary_color;
79
color: $inverse_fg_color;
80
}
81
}
82
.view {
84
@extend row.activatable;
85
background-color: $base_color;
87
color: $fg_color;
88
&:disabled { color: $disabled_fg_color; }
90
&:hover, &:active, &:selected { border-radius: 2px; }
92
selection,
94
&:selected { @extend %selected_items; }
95
}
96
textview {
98
// FIXME: we need to override background-color to ensure text rendering
99
text { background-color: $base_color; }
100
border {
102
background-color: $alt_base_color;
103
color: $tertiary_fg_color; // FIXME: not working
104
}
105
}
106
// iconview { @extend .view; }
108
.rubberband,
110
rubberband {
111
border: 1px solid $alt_primary_color;
112
background-color: scale-alpha($alt_primary_color, $lower_opacity);
113
}
114
flowbox {
116
rubberband { @extend rubberband; }
117
flowboxchild {
119
padding: 4px;
120
border-radius: 2px;
121
&:selected { @extend %selected_items; }
123
}
124
}
125
.content-view .tile {
127
// margin: 2px;
128
// padding: 0;
129
// border-radius: 0;
130
// background-color: $black;
131
&:selected {
133
background-color: transparent;
134
color: inherit;
135
}
136
}
137
label {
139
caret-color: currentColor; // this shouldn't be needed.
140
&.separator {
142
@extend .dim-label;
143
color: $fg_color;
145
}
146
row:selected &,
148
&:selected { @extend %nobg_selected_items; }
149
selection {
151
background-color: $primary_color;
152
color: $inverse_fg_color;
153
}
154
&:disabled {
156
color: $disabled_fg_color;
157
selection { @extend %selected_items:disabled; }
159
tab &,
161
button & { color: inherit; }
162
}
163
}
164
.dim-label { opacity: $tertiary_opacity; }
166
assistant {
168
.sidebar {
169
padding: 4px 0;
170
// background-color: $base_color;
171
// border-top: 1px solid $border_color;
172
}
173
// &.csd .sidebar { border-top-style: none; }
175
.sidebar label {
177
min-height: $medium_size;
178
padding: 0 12px;
179
color: $tertiary_fg_color;
180
font-weight: 500;
181
&.highlight { color: $fg_color; }
183
}
184
}
185
%osd, .osd { opacity: $higher_opacity; }
187
/*********************
190
* Spinner Animation *
191
*********************/
192
@keyframes spin {
193
to { -gtk-icon-transform: rotate(1turn); }
194
}
195
spinner {
197
background: none;
198
opacity: 0; // non spinning spinner makes no sense
199
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
200
&:checked {
202
opacity: 1;
203
animation: spin 1s linear infinite;
204
&:disabled { opacity: $disabled_opacity; }
206
}
207
}
208
/****************
211
* Text Entries *
212
****************/
213
%entry,
214
entry {
215
%entry_basic, & {
216
min-height: $medium_size;
217
padding: 0 8px;
218
border-radius: 2px;
219
@include entry(normal);
221
&:focus { @include entry(focus); }
223
&:disabled { @include entry(disabled); }
225
&.flat {
227
border-radius: 0;
228
@include entry(flat-normal);
230
&:focus { @include entry(flat-focus); }
232
&:disabled { @include entry(flat-disabled); }
234
}
235
image { // icons inside the entry
237
// @extend %simple_flat_button;
238
// min-height: $small_size;
240
// min-width: $small_size;
241
// border-radius: $circular_radius;
242
// -gtk-outline-radius: $circular_radius;
243
color: gtkalpha(currentColor, $secondary_opacity);
244
&:hover, &:active { color: currentColor; }
246
&:disabled { color: gtkalpha(currentColor, $tertiary_opacity); }
248
&.left {
250
margin-left: ($medium_size - 16px) / 2 - 8px;
251
margin-right: 6px;
252
}
253
&.right {
255
margin-left: 6px;
256
margin-right: ($medium_size - 16px) / 2 - 8px;
257
}
258
}
259
undershoot {
261
&.left { @include undershoot(left); }
262
&.right { @include undershoot(right); }
264
}
265
selection { @extend %selected_items; }
267
// entry error and warning style
269
@each $e_type, $e_color in (error, $error_color),
270
(warning, $warning_color) {
271
&.#{$e_type} {
272
@include entry(normal, $e_color);
273
&:focus { @include entry(focus, $e_color); }
275
&:disabled { @include entry(disabled, $e_color); }
277
&.flat {
279
@include entry(flat-normal, $e_color);
280
&:focus { @include entry(flat-focus, $e_color); }
282
&:disabled { @include entry(flat-disabled, $e_color); }
284
}
285
}
286
}
287
&:drop(active) {
289
// box-shadow: inset 0 0 0 2px $accent_color;
290
}
291
.osd & {
293
}
294
}
295
progress {
297
margin: 2px (2px - 8px);
298
border-bottom: 2px solid $primary_color;
299
background-color: transparent;
300
}
301
// linked entries
303
.linked:not(.vertical) > & { @extend %linked; }
304
// Vertically linked entries
306
.linked.vertical > & { @extend %linked_vertical; }
307
.linked:not(.vertical) > &.flat,
309
.linked.vertical > &.flat { border-radius: 0; }
310
}
311
treeview entry {
313
&.flat, & {
314
min-height: 0;
315
padding: 2px;
316
border-radius: 0;
317
background-color: $base_color;
318
&, &:focus {
320
border-image: none;
321
box-shadow: none;
322
}
323
}
324
}
325
.entry-tag {
327
$tag_height: 24px;
328
$tag_margin: ($medium_size - $tag_height) / 2;
329
margin: $tag_margin; // instead of min-height: $tag_height;
331
border-radius: $circular_radius;
332
box-shadow: none;
333
background-color: $primary_color;
334
color: $inverse_fg_color;
335
&:hover { box-shadow: $shadow_1; }
337
// side margins: compensate the entry padding with a negative margin
339
// then the negative margin itself
340
:dir(ltr) & {
341
margin-left: 8px;
342
margin-right: $tag_margin - 8px;
343
padding-left: 8px;
344
padding-right: ($tag_height - 16px) / 2;
345
}
346
:dir(rtl) & {
348
margin-left: $tag_margin - 8px;
349
margin-right: 8px;
350
padding-left: ($tag_height - 16px) / 2;
351
padding-right: 8px;
352
}
353
// seems any sizing doesn't work
355
&.button {
356
box-shadow: none;
357
background-color: transparent;
358
&:not(:hover):not(:active) { color: $secondary_inverse_fg_color; }
360
}
361
}
362
/***********
365
* Buttons *
366
***********/
367
// stuff for .needs-attention
368
@keyframes needs_attention {
369
from {
370
background-image: -gtk-gradient(radial,
371
center center, 0,
372
center center, 0.001,
373
to($accent_color),
374
to(transparent));
375
}
376
to {
378
background-image: -gtk-gradient(radial,
379
center center, 0,
380
center center, 0.5,
381
to($accent_color),
382
to(transparent));
383
}
384
}
385
%button,
387
button {
388
@at-root %button_basic, & {
389
min-height: 24px;
390
min-width: 16px;
391
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
392
border-radius: 2px;
393
font-weight: 500;
394
@include button(normal);
396
&:hover { @include button(hover); }
398
&:active { @include button(active); }
400
&:disabled { @include button(disabled); }
402
&:checked { @include button(checked); }
404
&:checked:disabled { @include button(checked-disabled); }
406
@at-root %flat_button, &.flat {
408
@at-root %simple_flat_button, & {
409
@include button(flat-normal);
410
&:hover { @include button(flat-hover); }
412
&:active { @include button(flat-active); }
414
&:disabled { @include button(flat-disabled); }
416
}
417
&:checked { @include button(flat-checked); }
419
&:checked:disabled { @include button(flat-checked-disabled); }
421
}
422
&.text-button {
424
padding-left: 16px;
425
padding-right: 16px;
426
}
427
&.image-button {
429
min-width: 24px;
430
padding: ($medium_size - 24px) / 2;
431
&:not(.text-button) { @extend %circular_button; }
433
}
434
&.text-button.image-button {
436
label {
437
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
438
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
440
}
441
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
443
}
444
.linked > & { @extend %linked; }
446
.linked.vertical > & { @extend %linked_vertical; }
448
.linked > &.flat,
450
.linked.vertical > &.flat {
451
border-radius: 2px;
452
&.image-button:not(.text-button) { @extend %circular_button; }
454
}
455
&:drop(active) {
457
// box-shadow: inset 0 0 0 2px $accent_color;
458
}
459
}
460
@at-root %button_selected, row:selected & {
462
&:disabled { color: $disabled_secondary_inverse_fg_color; }
463
}
464
// big standalone buttons like in Documents pager
466
&.osd {
467
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
468
&.image-button { padding: ($large_size - 24px) / 2; }
470
&:disabled { opacity: 0; }
472
}
473
// overlay / OSD style
475
@at-root %osd_button,
476
.osd & {
477
}
478
// Suggested and Destructive Action buttons
480
@each $b_type, $b_color in (suggested-action, $suggested_color),
481
(destructive-action, $destructive_color) {
482
&.#{$b_type} {
483
background-color: $b_color;
484
color: $inverse_fg_color;
485
&:disabled { @include button(disabled, $b_color); }
487
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
489
&.flat {
491
background-color: transparent;
492
color: $b_color;
493
&:disabled { @include button(flat-disabled, $b_color); }
495
&:checked { background-color: $fill_color; }
497
}
498
.osd & {
500
}
501
}
502
}
503
.stack-switcher > & {
505
// to position the needs attention dot, padding is added to the button
506
// child, a label needs just lateral padding while an icon needs vertical
507
// padding added too.
508
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
510
> label {
512
padding-left: 6px; // label padding
513
padding-right: 6px; //
514
}
515
> image {
517
padding-left: 6px; // image padding
518
padding-right: 6px; //
519
padding-top: 3px; //
520
padding-bottom: 3px; //
521
}
522
&.text-button {
524
// compensate text-button paddings
525
padding-left: 16px - 6px;
526
padding-right: 16px - 6px;
527
}
528
&.image-button {
530
// we want image buttons to have a 1:1 aspect ratio, so compensation
531
// of the padding added to the GtkImage is needed
532
padding-left: ($medium_size - 16px) / 2 - 6px;
533
padding-right: ($medium_size - 16px) / 2 - 6px;
534
}
535
&.needs-attention {
537
> label,
538
> image { @extend %needs_attention; }
539
&:checked {
541
> label,
542
> image {
543
animation: none;
544
background-image: none;
545
}
546
}
547
}
548
}
549
// hide separators
551
&.font,
552
&.file { separator { @extend %hide_separators; }}
553
// &.font { > box > box > label { font-weight: bold; }}
555
// inline-toolbar buttons
557
.inline-toolbar & {
558
// @extend %button_basic.flat;
559
&:not(.text-button) { @extend %circular_button; }
561
}
562
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
564
@at-root %circular_button,
566
&.close,
567
&.circular { // The Bloody Circul Button
568
border-radius: $circular_radius;
569
-gtk-outline-radius: $circular_radius;
570
// label { padding: 0; }
572
}
573
@at-root %small_button {
575
min-height: $small_size;
576
min-width: $small_size;
577
padding: 0;
578
border-radius: $circular_radius;
579
-gtk-outline-radius: $circular_radius;
580
}
581
}
582
%needs_attention {
584
animation: needs_attention $longer_duration $deceleration_curve 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
-gtk-outline-radius: 2px;
612
}
613
%linked {
615
@extend %linked_middle;
616
&:first-child {
618
border-top-left-radius: 2px;
619
border-bottom-left-radius: 2px;
620
}
621
&:last-child {
623
border-top-right-radius: 2px;
624
border-bottom-right-radius: 2px;
625
}
626
&:only-child {
628
border-radius: 2px;
629
}
630
}
631
%linked_vertical_middle {
633
border-radius: 0;
634
-gtk-outline-radius: 2px;
635
}
636
%linked_vertical {
638
@extend %linked_vertical_middle;
639
&:first-child {
641
border-top-left-radius: 2px;
642
border-top-right-radius: 2px;
643
}
644
&:last-child {
646
border-bottom-left-radius: 2px;
647
border-bottom-right-radius: 2px;
648
}
649
&:only-child {
651
border-radius: 2px;
652
}
653
}
654
/* menu buttons */
656
modelbutton.flat,
657
.menuitem.button.flat {
658
min-height: $menuitem_size;
659
padding: 0 8px;
660
border-radius: 2px;
661
color: inherit;
662
@extend %simple_flat_button;
664
&:selected { @extend %selected_items; }
666
}
667
modelbutton.flat arrow {
669
background: none;
670
&:hover { background: none; }
672
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
674
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
676
}
677
button.color {
679
min-height: $small_size;
680
min-width: $small_size;
681
padding: $container_padding;
682
colorswatch:only-child {
684
// &, overlay { border-radius: 0; }
685
}
686
}
687
/*********
690
* Links *
691
*********/
692
*:link {
693
&, &:hover, &:active { color: $link_color; }
694
&:visited {
696
&, &:hover, &:active { color: $visited_link_color; }
697
}
698
@at-root %link_selected,
700
&:selected,
701
*:selected & { color: $inverse_fg_color; }
702
}
703
button:link,
705
button:visited {
706
@extend *:link;
707
> label { text-decoration-line: underline; }
709
}
710
/*****************
712
* GtkSpinButton *
713
*****************/
714
spinbutton {
715
&:not(.vertical) {
716
// in this horizontal configuration, the whole spinbutton
717
// behaves as the entry, so we extend the entry styling
718
// and nuke the style on the internal entry
719
@extend %entry;
720
padding: 0;
722
%spinbutton_entry,
724
entry {
725
min-width: $large_size - 8px * 2;
726
// reset all the other props since the spinbutton node is styled here
727
margin: 0;
728
border-image: none;
729
border-radius: 0;
730
box-shadow: none;
731
background-color: transparent;
732
//
733
// This will help to simplify spinbutton's code, but unfortunatelly
734
// doesn't work properly in :dir(rtl). It needs z-index property.
735
//
736
// min-width: $large_size - 8px;
737
//
738
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
739
//
740
// &:dir(ltr) {
741
// margin-right: -$spinbuttons_width;
742
// padding-right: $spinbuttons_width;
743
// }
744
//
745
// &:dir(rtl) {
746
// margin-left: -$spinbuttons_width;
747
// padding-left: $spinbuttons_width;
748
// }
749
}
750
button {
752
// margin: $container_padding;
753
border: solid $container_padding transparent;
754
@extend %simple_flat_button;
756
@extend %small_button;
758
&.up:dir(ltr),
760
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
761
&.up:dir(rtl),
763
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
764
}
765
}
766
// OSD horizontal
768
.osd &:not(.vertical) {
769
button {
770
}
771
}
772
// Vertical
774
&.vertical {
775
// in the vertical configuration, we treat the spinbutton
776
// as a box, and tweak the style of the entry in the middle
777
// so that it's linked
778
// FIXME: this should not be set at all, but otherwise it gets the wrong
780
// color
781
&:disabled { color: $disabled_fg_color; }
782
&:drop(active) {
784
box-shadow: none;
785
}
786
entry {
788
min-height: $medium_size;
789
min-width: $large_size;
790
padding: 0;
791
}
792
button {
794
min-height: $medium_size;
795
min-width: $large_size;
796
padding: 0;
797
@extend %simple_flat_button;
799
&.up { border-radius: 2px 2px 0 0; }
801
&.down { border-radius: 0 0 2px 2px; }
803
}
804
}
805
// OSD vertical
807
.osd &.vertical button:first-child {
808
}
809
// Misc
811
treeview &:not(.vertical) {
812
min-height: 0;
813
border-style: none;
814
border-radius: 0;
815
entry {
817
min-height: 0;
818
padding: 1px 2px;
819
}
820
}
821
}
822
/**************
825
* ComboBoxes *
826
**************/
827
combobox {
828
arrow {
829
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
830
min-height: 16px;
831
min-width: 16px;
832
}
833
decoration,
835
button.combo:checked { transition: none; } // workaround for menuitem selection
836
button.combo cellview {
838
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
839
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
840
}
841
#gtk-combobox-popup-menu {
843
padding: 2px 0;
844
menuitem {
846
min-height: $medium_size - 2px * 2;
847
padding: 0 8px;
848
}
849
// overflow arrows
851
> arrow {
852
&.top { margin-top: -2px; }
853
&.bottom { margin-bottom: -2px * 3; }
855
}
856
}
857
&.linked {
859
button:nth-child(2) {
860
&:dir(ltr) { @extend %linked:last-child; }
861
&:dir(rtl) { @extend %linked:first-child; }
862
}
863
}
864
&:drop(active) { // FIXME: untested
866
box-shadow: none;
867
// button.combo { @extend %button_basic:drop(active); }
869
}
870
}
871
// the combo is a composite widget so the way we do button linking doesn't
873
// work, special case needed. See
874
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
875
.linked:not(.vertical) > combobox {
877
> box > button.combo { @extend %linked_middle; }
878
&:first-child > box > button.combo { @extend %linked:first-child; }
880
&:last-child > box > button.combo { @extend %linked:last-child; }
882
&:only-child > box > button.combo { @extend %linked:only-child; }
884
}
885
.linked.vertical > combobox {
887
> box > button.combo { @extend %linked_vertical_middle; }
888
&:first-child > box > button.combo { @extend %linked_vertical:first-child; }
890
&:last-child > box > button.combo { @extend %linked_vertical:last-child; }
892
&:only-child > box > button.combo { @extend %linked_vertical:only-child; }
894
}
895
%combo_flat {
897
border-radius: 0;
898
background-image: none;
899
font-weight: inherit;
900
@include entry(flat-normal);
902
&:hover { box-shadow: inset 0 -2px $fill_color; }
904
&:checked {
906
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
907
$primary_color 100%,
908
transparent 0%)
909
0 0 2 / 0 0 2px;
910
}
911
&:disabled { color: $disabled_fg_color; }
913
}
914
/************
917
* Toolbars *
918
************/
919
toolbar {
920
-GtkWidget-window-dragging: true;
921
padding: $container_padding / 2;
922
background-color: $bg_color;
923
button { @extend %button_basic.flat; }
925
// on OSD
927
.osd & { background-color: transparent; }
928
// stand-alone OSD toolbars
930
&.osd {
931
transition: $shadow_transition;
932
padding: $container_padding;
933
border-radius: 2px;
934
box-shadow: $shadow_2, inset 0 1px $highlight_color;
935
background-color: $base_color;
936
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
938
&.left,
940
&.right,
941
&.top,
942
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
943
}
944
// toolbar separators
946
&.horizontal separator { margin: $container_padding / 2; }
947
&.vertical separator { margin: $container_padding / 2; }
948
&:not(.inline-toolbar):not(.osd) {
950
scale,
951
entry,
952
spinbutton,
953
button { margin: $container_padding / 2; }
954
.linked entry,
956
.linked spinbutton,
957
.linked button {
958
&:not(:first-child) { margin-left: 0; }
959
&:not(:last-child) { margin-right: 0; }
960
}
961
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
963
}
964
}
965
// searchbar, location-bar & inline-toolbar
967
.inline-toolbar {
968
padding: $container_padding;
969
border-style: solid;
970
border-width: 0 1px 1px;
971
border-color: $border_color;
972
background-color: $alt_base_color;
973
}
974
searchbar,
976
.location-bar {
977
padding: $container_padding;
978
border-style: solid;
979
border-width: 0 0 1px;
980
border-color: $border_color;
981
background-color: $bg_color;
982
background-clip: border-box;
983
}
984
/***************
987
* Header bars *
988
***************/
989
%titlebar,
990
headerbar {
991
transition: background-color $shorter_duration $deceleration_curve;
992
min-height: $large_size;
993
padding: 0 $container_padding;
994
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
995
background-color: $titlebar_bg_color;
996
color: $titlebar_fg_color;
997
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
999
&:backdrop {
1001
color: $secondary_titlebar_fg_color;
1002
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
1004
}
1005
.title {
1007
transition: $longer_transition;
1008
padding: 0 12px;
1009
font-weight: bold;
1010
}
1011
.subtitle {
1013
transition: $longer_transition;
1014
padding: 0 12px;
1015
font-size: smaller;
1016
@extend .dim-label;
1018
}
1019
.linked:not(.vertical) > entry:not(.flat) { border-radius: 2px; }
1021
button:not(.suggested-action):not(.destructive-action) {
1023
@extend %button_basic.flat;
1024
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1026
$titlebar_indicator_color 0%,
1027
transparent 0%)
1028
0 0 0 / 0 0 0px;
1029
&:checked {
1031
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1032
$titlebar_indicator_color 100%,
1033
transparent 0%)
1034
0 0 2 / 0 0 2px;
1035
&, &:disabled { background-color: transparent; }
1037
}
1038
}
1039
button.suggested-action, button.destructive-action {
1041
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1042
}
1043
&.selection-mode {
1045
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1046
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1047
transition: background-color 0.00001s $longer_duration;
1048
animation: header_ripple_effect $longer_duration $deceleration_curve;
1049
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1050
background-color: $primary_color;
1051
color: $inverse_fg_color;
1052
&:backdrop {
1054
color: $secondary_inverse_fg_color;
1055
}
1056
.subtitle:link { @extend *:link:selected; }
1058
button:not(.suggested-action):not(.destructive-action) {
1060
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1061
currentColor 0%,
1062
transparent 0%)
1063
0 0 0 / 0 0 0px;
1064
color: currentColor;
1065
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1067
&:checked {
1069
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1070
currentColor 100%,
1071
transparent 0%)
1072
0 0 2 / 0 0 2px;
1073
color: currentColor;
1074
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1076
}
1077
}
1078
.selection-menu {
1080
padding-left: 16px;
1081
padding-right: 16px;
1082
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1084
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1086
}
1087
}
1088
.fullscreen &,
1090
.tiled &,
1091
.maximized & {
1092
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1093
box-shadow: $shadow_1;
1094
}
1095
&.default-decoration {
1097
min-height: $small_size;
1098
padding: $container_padding;
1099
box-shadow: inset 0 1px $titlebar_highlight_color;
1100
.fullscreen &,
1102
.tiled &,
1103
.maximized & { box-shadow: none; }
1104
button.titlebutton {
1106
min-height: $small_size;
1107
min-width: $small_size;
1108
margin: 0;
1109
padding: 0;
1110
}
1111
// workaround for non-animatable buttons
1113
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1114
}
1115
.solid-csd & {
1117
&:dir(rtl), &:dir(ltr) { // specificity bump
1118
// margin-left: -2px;
1119
// margin-right: -2px;
1120
// margin-top: -2px;
1121
// border-radius: 0;
1122
// box-shadow: inset 0 1px $titlebar_highlight_color;
1123
}
1124
}
1125
}
1126
headerbar {
1128
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1129
entry,
1130
spinbutton,
1131
// separator,
1132
button {
1133
margin-top: $container_padding;
1134
margin-bottom: $container_padding;
1135
}
1136
switch {
1138
margin-top: $container_padding * 2;
1139
margin-bottom: $container_padding * 2;
1140
}
1141
// reset button margins of the spinbutton
1143
spinbutton button {
1144
margin-top: 0;
1145
margin-bottom: 0;
1146
}
1147
}
1148
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1150
border-top-left-radius: 2px;
1151
border-top-right-radius: 2px;
1152
}
1153
headerbar { // headerbar border rounding
1155
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1156
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1157
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1159
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1161
&:first-child, &:last-child {
1162
border-top-left-radius: 2px;
1163
border-top-right-radius: 2px;
1164
}
1165
}
1166
}
1167
.titlebar:not(headerbar) {
1169
window.csd > & {
1170
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1171
padding: 0;
1172
background-color: transparent;
1173
background-image: none;
1174
border-style: none;
1175
box-shadow: none;
1176
}
1177
> separator {
1179
background-color: $titlebar_bg_color;
1180
background-image: image($border_color);
1181
}
1182
@extend %titlebar;
1184
}
1185
/************
1188
* Pathbars *
1189
************/
1190
%pathbar_button,
1191
.path-bar button {
1192
padding-left: ($medium_size - 24px) / 2;
1193
padding-right: ($medium_size - 24px) / 2;
1194
label:not(:only-child) {
1196
&:first-child { margin-left: 4px; }
1197
&:last-child { margin-right: 4px; }
1199
}
1200
&.slider-button {
1202
padding-left: (24px - 16px) / 2;
1203
padding-right: (24px - 16px) / 2;
1204
}
1205
:not(headerbar) & {
1207
@extend %flat_button;
1208
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1210
$primary_color 0%,
1211
transparent 0%)
1212
0 0 0 / 0 0 0px;
1213
border-radius: 2px;
1214
&:checked {
1216
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1217
$primary_color 100%,
1218
transparent 0%)
1219
0 0 2 / 0 0 2px;
1220
&, &:disabled { background-color: transparent; }
1222
}
1223
}
1224
}
1225
/**************
1228
* Tree Views *
1229
**************/
1230
treeview.view {
1231
@at-root * {
1232
-GtkTreeView-horizontal-separator: 4;
1233
-GtkTreeView-grid-line-width: 1;
1234
-GtkTreeView-grid-line-pattern: '';
1235
-GtkTreeView-tree-line-width: 1;
1236
-GtkTreeView-tree-line-pattern: '';
1237
-GtkTreeView-expander-size: 16;
1238
}
1239
border-left-color: $fill_color; // this is actually the tree lines color,
1241
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1242
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1244
&:hover, &:active, &:selected { border-radius: 0; }
1246
&.separator {
1248
min-height: 1px + 2px * 2;
1249
color: $border_color;
1250
}
1251
&:drop(active) {
1253
border-style: solid none;
1254
border-width: 1px;
1255
border-color: $accent_color;
1256
&.after { border-top-style: none; }
1258
&.before { border-bottom-style: none; }
1260
}
1261
&.expander {
1263
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1264
-gtk-icon-transform: rotate(-90deg);
1265
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1267
&:checked { -gtk-icon-transform: unset; }
1269
color: $secondary_fg_color;
1271
&:hover, &:active { color: $fg_color; }
1273
&:disabled { color: $disabled_secondary_fg_color; }
1275
&:selected {
1277
color: $secondary_inverse_fg_color;
1278
&:hover, &:active { color: $inverse_fg_color; }
1280
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1282
}
1283
}
1284
&.progressbar { // progress bar in treeviews
1286
border-bottom: $bar_size solid $primary_color;
1287
box-shadow: none;
1288
background-color: transparent;
1289
&:selected { border-bottom-color: currentColor; }
1291
}
1292
&.trough { // progress bar trough in treeviews
1294
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
1295
box-shadow: none;
1296
background-color: transparent;
1297
&:selected { border-bottom-color: $fill_color; }
1299
}
1300
header {
1302
button {
1303
@extend row.activatable;
1304
padding: 2px 6px;
1306
border-style: none solid solid none;
1307
border-width: 1px;
1308
border-color: $border_color;
1309
border-radius: 0;
1310
background-clip: border-box;
1311
&, &:hover, &:active { box-shadow: none; }
1313
&, &:disabled { background-color: $base_color; }
1315
&:last-child { border-right-style: none; }
1317
}
1318
}
1319
button.dnd,
1321
header.button.dnd { // for treeview-like derive widgets
1322
padding: 2px 6px;
1323
border-style: none solid solid;
1324
border-width: 1px;
1325
border-color: $border_color;
1326
border-radius: 0;
1327
box-shadow: none;
1328
background-color: $base_color;
1329
background-clip: border-box;
1330
color: $primary_color;
1331
}
1332
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1334
}
1335
/*********
1338
* Menus *
1339
*********/
1340
menubar,
1341
.menubar {
1342
-GtkWidget-window-dragging: true;
1343
padding: 0;
1344
// box-shadow: inset 0 -1px $border_color;
1345
background-color: $titlebar_bg_color;
1346
> menuitem {
1348
transition: $shorter_transition;
1349
min-height: 20px;
1350
padding: 4px 8px;
1351
color: $secondary_titlebar_fg_color;
1352
&:hover { // Seems like it :hover even with keyboard focus
1354
transition: none;
1355
background-color: $semi_fill_color;
1356
color: $titlebar_fg_color;
1357
}
1358
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1360
}
1361
}
1362
.csd.popup { border-radius: 2px; }
1364
menu,
1366
.menu,
1367
.context-menu {
1368
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1369
padding: 4px 0;
1370
box-shadow: inset 0 1px $highlight_color;
1371
background-color: $base_color;
1372
border: 1px solid $border_color; // adds borders in a non composited env
1373
.csd & {
1375
border: none; // axes borders in a composited env
1376
border-radius: 2px;
1377
}
1378
menuitem {
1380
transition: $shorter_transition;
1381
min-height: 20px;
1382
min-width: 40px;
1383
padding: 4px 8px;
1384
font: initial;
1385
text-shadow: none;
1386
&:hover {
1388
transition: none;
1389
background-color: $semi_fill_color;
1390
}
1391
&:disabled { color: $disabled_fg_color; }
1393
// submenu indicators
1395
arrow {
1396
min-height: 16px;
1397
min-width: 16px;
1398
&:dir(ltr) {
1400
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1401
margin-left: 8px;
1402
}
1403
&:dir(rtl) {
1405
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1406
margin-right: 8px;
1407
}
1408
}
1409
// avoids labels color being overridden, see
1411
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1412
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1413
}
1414
// overflow arrows
1416
> arrow {
1417
min-height: 16px;
1418
min-width: 16px;
1419
padding: 4px;
1420
background-color: $base_color;
1421
color: $secondary_fg_color;
1422
&.top {
1424
margin-top: -4px;
1425
border-bottom: 1px solid $border_color;
1426
border-radius: 2px 2px 0 0;
1427
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1428
}
1429
&.bottom {
1431
margin-bottom: -4px * 3;
1432
border-top: 1px solid $border_color;
1433
border-radius: 0 0 2px 2px;
1434
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1435
}
1436
&:hover {
1438
background-image: image($semi_fill_color);
1439
color: $fg_color;
1440
}
1441
&:disabled {
1443
border-color: transparent;
1444
background-color: transparent;
1445
color: transparent;
1446
// color: $disabled_secondary_fg_color;
1447
}
1448
}
1449
separator { margin: 4px 0; }
1451
}
1452
menuitem {
1454
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1455
}
1456
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1458
// Electron/Atom render all translucent colors in opaque colors.
1459
// It's a very critical issue for this theme and should be fixed by upstream...
1460
.popup:not(.csd) menu {
1461
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1462
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1463
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1464
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1465
menuitem {
1467
color: $opaque_fg_color;
1468
&:hover { background-color: $opaque_semi_fill_color; }
1470
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1472
}
1473
// TODO: not working this, where/how i can set the accelerators?
1475
accelerator { color: $opaque_tertiary_fg_color; }
1476
}
1477
/************
1480
* Popovers *
1481
************/
1482
popover.background {
1483
transition: $shadow_transition;
1484
padding: 2px;
1485
box-shadow: $shadow_2; // TODO: this should really have a highlight
1486
background-color: $lighter_bg_color;
1487
&:backdrop { box-shadow: $shadow_1; }
1489
&, .csd & {
1491
border-style: solid;
1492
border-width: 1px;
1493
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1494
border-radius: 2px + 1px;
1495
}
1496
> stack { margin: -4px; } // remove extra padding from menu style popovers
1498
> toolbar { margin: -2px; }
1500
> list,
1502
> .view,
1503
> toolbar {
1504
border-style: none;
1505
box-shadow: none;
1506
background-color: transparent;
1507
}
1508
&.touch-selection,
1510
&.magnifier,
1511
&.osd { @extend %osd; }
1512
// entry { @extend %entry.flat; }
1514
// button.combo { @extend %combo_flat; }
1516
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1518
&.menu button,
1520
button.model {
1521
@extend %simple_flat_button;
1522
min-height: 32px;
1524
padding: 0 8px;
1525
border-radius: 2px;
1526
&:checked { @extend %selected_items; }
1528
}
1529
separator { margin: 4px 0; }
1531
list separator { margin: 0; }
1533
}
1534
/*************
1536
* Notebooks *
1537
*************/
1538
notebook {
1539
> header {
1540
border-width: 1px;
1541
border-color: $border_color;
1542
background-color: $bg_color;
1543
background-clip: border-box;
1544
&.top {
1546
border-bottom-style: solid;
1547
> tabs {
1548
margin-bottom: -1px;
1549
> tab {
1550
&:hover { box-shadow: inset 0 -2px $fill_color; }
1552
&:checked { box-shadow: inset 0 -2px $primary_color; }
1554
}
1555
}
1556
}
1557
&.bottom {
1559
border-top-style: solid;
1560
> tabs {
1561
margin-top: -1px;
1562
> tab {
1563
&:hover { box-shadow: inset 0 2px $fill_color; }
1565
&:checked { box-shadow: inset 0 2px $primary_color; }
1567
}
1568
}
1569
}
1570
&.left {
1572
border-right-style: solid;
1573
> tabs {
1574
margin-right: -1px;
1575
> tab {
1576
&:hover { box-shadow: inset -2px 0 $fill_color; }
1578
&:checked { box-shadow: inset -2px 0 $primary_color; }
1580
}
1581
}
1582
}
1583
&.right {
1585
border-left-style: solid;
1586
> tabs {
1587
margin-left: -1px;
1588
> tab {
1589
&:hover { box-shadow: inset 2px 0 $fill_color; }
1591
&:checked { box-shadow: inset 2px 0 $primary_color; }
1593
}
1594
}
1595
}
1596
&.top > tabs > arrow {
1598
@extend %notebook_vert_arrows;
1599
border-top-style: none;
1601
}
1602
&.bottom > tabs > arrow {
1604
@extend %notebook_vert_arrows;
1605
border-bottom-style: none;
1607
}
1608
@at-root %notebook_vert_arrows {
1610
padding-left: 4px;
1611
padding-right: 4px;
1612
&.down {
1614
margin-left: -8px;
1615
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1616
}
1617
&.up {
1619
margin-right: -8px;
1620
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1621
}
1622
}
1623
&.left > tabs > arrow {
1625
@extend %notebook_horz_arrows;
1626
border-left-style: none;
1628
}
1629
&.right > tabs > arrow {
1631
@extend %notebook_horz_arrows;
1632
border-right-style: none;
1634
}
1635
@at-root %notebook_horz_arrows {
1637
padding-top: 4px;
1638
padding-bottom: 4px;
1639
&.down {
1641
margin-top: -8px;
1642
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1643
}
1644
&.up {
1646
margin-bottom: -8px;
1647
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1648
}
1649
}
1650
> tabs > arrow {
1652
@extend %simple_flat_button;
1653
min-height: 16px;
1655
min-width: 16px;
1656
border-radius: 0;
1657
}
1658
tab {
1660
transition: $longer_transition,
1661
background-size 0,
1662
background-image 0;
1663
min-height: $small_size;
1664
min-width: $small_size;
1665
padding: $container_padding 12px;
1666
outline-offset: -6px;
1668
border-width: 1px; // for reorderable tabs
1670
border-color: transparent; //
1671
background-image: radial-gradient(circle farthest-corner at center,
1673
$primary_color 10%,
1674
transparent 0%);
1675
background-repeat: no-repeat;
1676
background-position: center;
1677
background-size: 0% 0%;
1678
color: $secondary_fg_color;
1680
font-weight: 500;
1681
&:hover {
1683
color: $fg_color;
1684
&.reorderable-page {
1686
border-color: $border_color;
1687
background-color: $alt_base_color;
1688
}
1689
}
1690
&:disabled { color: $disabled_secondary_fg_color; }
1692
&:checked {
1694
transition: $longer_transition,
1695
background-size $longer_duration $deceleration_curve,
1696
background-image $longer_duration + $ripple_duration $deceleration_curve;
1697
background-image: radial-gradient(circle farthest-corner at center,
1698
transparent 10%,
1699
transparent 0%);
1700
background-size: 1000% 1000%;
1701
color: $fg_color;
1702
&:disabled { color: $disabled_fg_color; }
1704
&.reorderable-page {
1706
border-color: $border_color;
1707
background-color: $base_color;
1708
}
1709
}
1710
// colors the button like the label, overridden otherwise
1712
button.flat {
1713
@extend %small_button;
1714
&:last-child {
1716
margin-left: $container_padding;
1717
margin-right: $container_padding - 12px;
1718
}
1719
&:first-child {
1721
margin-left: $container_padding - 12px;
1722
margin-right: $container_padding;
1723
}
1724
}
1725
}
1726
&.top,
1728
&.bottom {
1729
tabs {
1730
padding-left: 8px;
1731
padding-right: 8px;
1732
&:not(:only-child) {
1734
&:first-child { margin-left: 0; }
1735
&:last-child { margin-right: 0; }
1736
}
1737
tab {
1739
&.reorderable-page {
1740
margin: 0 -1px;
1741
border-style: none solid;
1742
}
1743
}
1744
}
1745
}
1746
&.left,
1748
&.right {
1749
tabs {
1750
padding-top: 8px;
1751
padding-bottom: 8px;
1752
&:not(:only-child) {
1754
&:first-child { margin-top: 0; }
1755
&:last-child { margin-bottom: 0; }
1756
}
1757
tab {
1759
&.reorderable-page {
1760
margin: -1px 0;
1761
border-style: solid none;
1762
}
1763
}
1764
}
1765
}
1766
}
1767
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1769
background-color: $base_color;
1770
entry:not(.search),
1772
spinbutton:not(.vertical) { @extend %entry.flat; }
1773
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1775
button.combo { @extend %combo_flat; }
1777
}
1778
}
1779
/**************
1782
* Scrollbars *
1783
**************/
1784
scrollbar {
1785
$_slider_min_length: 24px;
1786
// disable steppers
1788
@at-root * {
1789
-GtkScrollbar-has-backward-stepper: false;
1790
-GtkScrollbar-has-forward-stepper: false;
1791
}
1792
transition: $longer_transition;
1794
background-color: $base_color;
1795
background-clip: $extra_background_clip;
1796
// scrollbar border
1798
&.top { border-bottom: 1px solid $border_color; }
1799
&.bottom { border-top: 1px solid $border_color; }
1800
&.left { border-right: 1px solid $border_color; }
1801
&.right { border-left: 1px solid $border_color; }
1802
// slider
1804
slider {
1805
transition: $shorter_transition, margin 0, border-width 0;
1806
min-width: 8px;
1807
min-height: 8px;
1808
border: 4px solid transparent;
1809
border-radius: $circular_radius;
1810
background-clip: padding-box;
1811
background-color: $tertiary_fg_color;
1812
&:hover { background-color: $secondary_fg_color; }
1814
&:active { background-color: $fg_color; }
1816
&:disabled { background-color: $disabled_tertiary_fg_color; }
1818
}
1819
&.fine-tune {
1821
slider {
1822
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1823
min-width: 4px;
1824
min-height: 4px;
1825
}
1826
&.horizontal slider { margin: 2px 0; }
1828
&.vertical slider { margin: 0 2px; }
1830
}
1831
&.overlay-indicator {
1833
&:not(.dragging):not(.hovering) {
1834
border-color: transparent;
1835
background-color: transparent;
1836
slider {
1838
min-width: 4px;
1839
min-height: 4px;
1840
margin: 4px - 1px;
1841
border: 1px solid scale-alpha($base_color, $lower_opacity);
1842
}
1843
button {
1845
min-width: 4px;
1846
min-height: 4px;
1847
margin: 4px - 1px;
1848
border: 1px solid scale-alpha($base_color, $lower_opacity);
1849
border-radius: $circular_radius;
1850
background-color: $tertiary_fg_color;
1851
background-clip: padding-box;
1852
-gtk-icon-source: none;
1853
&:disabled { background-color: $disabled_tertiary_fg_color; }
1855
}
1856
&.horizontal {
1858
slider { min-width: $_slider_min_length; }
1859
button { min-width: 8px; }
1861
}
1862
&.vertical {
1864
slider { min-height: $_slider_min_length; }
1865
button { min-height: 8px; }
1867
}
1868
}
1869
&.dragging,
1871
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1872
}
1873
&.horizontal slider { min-width: $_slider_min_length; }
1875
&.vertical slider { min-height: $_slider_min_length; }
1877
// button styling
1879
button {
1880
@extend %simple_flat_button;
1881
min-width: 16px;
1883
min-height: 16px;
1884
padding: 0;
1885
border-radius: 0;
1886
}
1887
// button icons
1889
&.vertical {
1890
button {
1891
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1892
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1894
}
1895
}
1896
&.horizontal {
1898
button {
1899
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1900
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1902
}
1903
}
1904
}
1905
/**********
1908
* Switch *
1909
**********/
1910
switch {
1911
transition: $longer_transition;
1912
margin: $container_padding 0;
1913
border: 4px solid transparent;
1914
border-radius: $circular_radius;
1915
background-color: $fill_color;
1916
background-clip: padding-box;
1917
font-size: 0;
1918
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1920
&:checked {
1922
background-color: scale-alpha($accent_color, 0.5);
1923
&:disabled {
1925
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1926
color: $disabled_fg_color;
1927
}
1928
}
1929
slider {
1931
@include entry(normal);
1932
transition: $longer_transition, $shadow_transition, margin 0;
1934
min-width: $small_size;
1935
min-height: $small_size;
1936
margin: -4px 0 -4px -4px;
1937
border-radius: $circular_radius;
1938
-gtk-outline-radius: $circular_radius;
1939
}
1940
&:hover slider { @include entry(focus); }
1942
&:checked slider {
1944
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1945
animation: needs_attention $longer_duration $deceleration_curve;
1946
margin: -4px -4px -4px 0;
1947
background-color: $accent_color;
1948
color: $inverse_fg_color;
1949
}
1950
&:disabled slider { @include entry(disabled); }
1952
&:checked:disabled slider { animation: none; }
1954
row:selected & {
1956
}
1957
}
1958
/*************************
1961
* Check and Radio items *
1962
*************************/
1963
// draw regular check and radio items using our PNG assets
1964
// all assets are rendered from assets.svg. never add pngs directly
1965
// selection-mode
1967
.view.content-view.check:not(list),
1968
.content-view .tile check:not(list) {
1969
min-height: 40px;
1970
min-width: 40px;
1971
margin: 0;
1972
padding: 0;
1973
box-shadow: none;
1974
background-color: transparent;
1975
background-image: none;
1976
-gtk-icon-shadow: $shadow_1;
1977
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1979
@each $s, $as in ('', '-unchecked'),
1981
(':checked', '-checked') {
1982
&#{$s} {
1983
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1984
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1985
}
1986
}
1987
}
1988
checkbutton.text-button,
1990
radiobutton.text-button {
1991
// this is for a nice focus on check and radios text
1992
padding: 2px;
1993
outline-offset: 0;
1994
label:not(:only-child) { margin: 0 4px; }
1996
}
1997
check,
1999
radio {
2000
min-height: 24px;
2001
min-width: 24px;
2002
margin: -($large_size - 24px) / 2;
2003
padding: ($large_size - 24px) / 2;
2004
@extend %simple_flat_button;
2006
@extend %circular_button;
2008
&:checked, &:indeterminate {
2010
color: $accent_color;
2011
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2013
}
2014
// &:only-child { margin: -12px; }
2016
row &:not(:checked):not(:indeterminate) {
2018
color: gtkalpha(currentColor, $secondary_opacity);
2019
&:hover, &:active { color: currentColor; }
2021
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
2023
}
2024
popover & {
2026
&, &:hover, &:disabled {
2027
box-shadow: none;
2028
background-image: none;
2029
}
2030
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2032
&.left:dir(rtl) {
2034
margin-left: -16px;
2035
margin-right: -8px;
2036
}
2037
&.right:dir(ltr) {
2039
margin-left: -8px;
2040
margin-right: -16px;
2041
}
2042
}
2043
menu menuitem & {
2045
transition: none;
2046
min-height: 16px;
2047
min-width: 16px;
2048
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2049
padding: 0;
2050
&:dir(ltr) { margin-right: 8px; }
2052
&:dir(rtl) { margin-left: 8px; }
2054
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2056
&, &:hover, &:disabled {
2058
box-shadow: none;
2059
// color: inherit;
2060
}
2061
}
2062
}
2063
%check,
2065
check {
2066
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2067
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2068
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2070
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2071
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2073
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2074
}
2075
%radio,
2077
radio {
2078
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2079
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2080
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2082
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2083
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2085
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2086
border-image-slice: $large_size / 2px;
2088
border-image-width: $large_size / 2;
2089
$radio_indicator: 10px / $large_size / 2;
2091
& {
2093
border-image-source: -gtk-gradient(radial,
2094
center center, 0,
2095
center center, 0.001,
2096
to($accent_color),
2097
to(transparent));
2098
}
2099
&:checked:not(:indeterminate) {
2101
border-image-source: -gtk-gradient(radial,
2102
center center, 0,
2103
center center, $radio_indicator,
2104
to($accent_color),
2105
to(transparent));
2106
}
2107
&:checked:not(:indeterminate):disabled {
2109
border-image-source: -gtk-gradient(radial,
2110
center center, 0,
2111
center center, $radio_indicator,
2112
to(scale-alpha($accent_color, $disabled_opacity)),
2113
to(transparent));
2114
}
2115
}
2116
%small_check,
2118
menu menuitem check {
2119
& {
2120
border-radius: 2px;
2121
-gtk-outline-radius: 2px;
2122
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")),
2123
-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2124
}
2125
&:checked {
2127
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")),
2128
-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2129
}
2130
&:indeterminate {
2132
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")),
2133
-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2134
}
2135
}
2136
%small_radio,
2138
menu menuitem radio {
2139
& {
2140
border-image: none;
2141
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")),
2142
-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2143
}
2144
&:checked {
2146
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")),
2147
-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2148
}
2149
&:indeterminate {
2151
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")),
2152
-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2153
}
2154
}
2155
// ANIMATION:
2157
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2158
// the transformation is set on the active state and it get reset on the checked state.
2159
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2160
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2162
check:not(:checked):indeterminate:active,
2164
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2165
check:not(:checked),
2167
radio:not(:checked) {
2168
& {
2169
transition: $longer_transition,
2170
background-size $ripple_duration $deceleration_curve,
2171
background-image $ripple_duration * 2 $deceleration_curve,
2172
-gtk-icon-transform 0;
2173
}
2174
&:active {
2176
transition: $longer_transition,
2177
background-size 0,
2178
background-image 0,
2179
-gtk-icon-transform 0;
2180
}
2181
menu menuitem & { transition: none; }
2183
}
2184
treeview.view check,
2186
treeview.view radio {
2187
padding: 0;
2188
&:hover {
2190
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2191
&:disabled { box-shadow: none; }
2193
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2195
}
2196
& {
2198
color: $secondary_fg_color;
2199
&:hover, &:active { color: $fg_color; }
2201
&:disabled { color: $disabled_secondary_fg_color; }
2203
&:checked, &:indeterminate { color: $accent_color; }
2205
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2207
}
2208
&:selected {
2210
color: $secondary_inverse_fg_color;
2211
&:hover, &:active { color: $inverse_fg_color; }
2213
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2215
&:checked, &:indeterminate { color: $accent_color; }
2217
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2219
}
2220
}
2221
treeview.view radio:checked {
2223
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2224
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2225
border-image: none;
2226
}
2227
/************
2230
* GtkScale *
2231
************/
2232
scale {
2233
// sizing
2234
$_marks_lenght: 8px;
2235
$_marks_distance: 8px;
2236
$slider_size: 24px;
2238
$marks_slider_size: 30px;
2239
$slider_margin: -($slider_size - $bar_size) / 2;
2241
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2242
$color_slider_margin: -($slider_size) / 2;
2244
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2245
min-height: $medium_size - $slider_size;
2247
min-width: $medium_size - $slider_size;
2248
padding: ($slider_size / 2);
2249
* { transition: $longer_transition; }
2251
// the slider is inside the trough, so to have make it bigger there's a negative margin
2253
slider {
2254
min-height: $slider_size;
2255
min-width: $slider_size;
2256
margin: $slider_margin;
2257
}
2258
// the backing bit
2260
trough {
2261
outline-offset: 2px;
2262
background-color: $fill_color;
2263
&:disabled { color: $disabled_fg_color; }
2265
}
2266
// the colored part of the backing bit
2268
highlight {
2269
background-color: $accent_color;
2270
&:disabled { background-color: transparent; }
2272
}
2273
// this is another differently styled part of the backing bit, the most relevant use case is for example
2275
// in media player to indicate how much video stream as been cached
2276
fill {
2277
background-color: $fill_color;
2278
&:disabled { background-color: transparent; }
2280
}
2281
slider {
2283
transition: all $shorter_duration $standard_curve;
2284
// border-radius: 100%;
2285
// background-color: $accent_color;
2286
background-repeat: no-repeat;
2287
background-position: center;
2288
@each $s, $as in ('', ''),
2290
(':disabled', '-disabled') {
2291
&#{$s} {
2292
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2293
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2295
}
2296
}
2297
background-size: calc(100% - 8px);
2299
&:hover { background-size: calc(100% - 4px); }
2301
&:active { background-size: calc(100% - 0px); }
2303
}
2304
// click-and-hold the slider to activate
2306
&.fine-tune {
2307
// to make the slider shrink in fine-tune mode
2308
slider { background-size: calc(100% - 12px); }
2309
}
2310
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2312
marks {
2314
color: $fill_color;
2315
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2317
(bottom, bottom, top),
2318
(top, left, right),
2319
(bottom, right, left) {
2320
&.#{$marks_class} {
2321
margin-#{$marks_margin}: $_marks_distance;
2322
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2323
}
2324
}
2325
}
2326
&.horizontal {
2328
indicator {
2329
min-height: $_marks_lenght;
2330
min-width: 1px;
2331
}
2332
}
2333
&.vertical {
2335
indicator {
2336
min-height: 1px;
2337
min-width: $_marks_lenght;
2338
}
2339
}
2340
// *WARNING* scale with marks madness following
2342
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2344
('vertical', 'vert') {
2345
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2346
('marks-after', 'marks-after:not(.marks-before)') {
2347
&.#{$dir_class}.#{$marks_class} {
2348
slider {
2349
@each $state, $state_infix in ('', ''),
2350
(':disabled', '-disabled') {
2351
&#{$state} {
2352
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2353
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2355
}
2356
}
2357
@if $dir_class == 'horizontal' {
2359
min-height: $marks_slider_size;
2360
min-width: $slider_size;
2361
@if $marks_infix == 'marks-before' {
2363
margin-top: $marks_slider_margin;
2364
background-position: center calc(100% - 4px);
2366
&:hover { background-position: center calc(100% - 2px); }
2368
&:active { background-position: center calc(100% - 0px); }
2370
}
2371
@if $marks_infix == 'marks-after' {
2373
margin-bottom: $marks_slider_margin;
2374
background-position: center calc(4px);
2376
&:hover { background-position: center calc(2px); }
2378
&:active { background-position: center calc(0px); }
2380
}
2381
}
2382
@if $dir_class == 'vertical' {
2384
min-height: $slider_size;
2385
min-width: $marks_slider_size;
2386
@if $marks_infix == 'marks-before' {
2388
margin-left: $marks_slider_margin;
2389
background-position: calc(4px) center;
2391
&:hover { background-position: calc(2px) center; }
2393
&:active { background-position: calc(0px) center; }
2395
}
2396
@if $marks_infix == 'marks-after' {
2398
margin-right: $marks_slider_margin;
2399
background-position: calc(100% - 4px) center;
2401
&:hover { background-position: calc(100% - 2px) center; }
2403
&:active { background-position: calc(100% - 0px) center; }
2405
}
2406
}
2407
}
2408
&.fine-tune slider {
2410
@if $dir_class == 'horizontal' {
2411
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2412
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2414
}
2415
@if $dir_class == 'vertical' {
2417
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2418
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2420
}
2421
}
2422
}
2423
}
2424
}
2425
&.color {
2427
min-height: 0;
2428
min-width: 0;
2429
&.horizontal {
2431
padding: 0 0 12px 0;
2432
slider {
2434
&:dir(ltr), &:dir(rtl) { // specificity bump
2435
margin-bottom: $color_slider_margin;
2436
margin-top: $color_marks_slider_margin;
2437
}
2438
}
2439
}
2440
&.vertical {
2442
&:dir(ltr) {
2443
padding: 0 0 0 12px;
2444
slider {
2446
margin-left: $color_slider_margin;
2447
margin-right: $color_marks_slider_margin;
2448
}
2449
}
2450
&:dir(rtl) {
2452
padding: 0 12px 0 0;
2453
slider {
2455
margin-right: $color_slider_margin;
2456
margin-left: $color_marks_slider_margin;
2457
}
2458
}
2459
}
2460
}
2461
}
2462
/*****************
2465
* Progress bars *
2466
*****************/
2467
progressbar {
2468
// sizing
2469
&.horizontal {
2470
trough,
2471
progress { min-height: $bar_size; }
2472
}
2473
&.vertical {
2475
trough,
2476
progress { min-width: $bar_size; }
2477
}
2478
// FIXME: insensitive state missing and some other state should be set probably
2480
color: $tertiary_fg_color;
2481
font-size: smaller;
2482
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2484
progress { background-color: $primary_color; }
2486
&.osd { // progressbar.osd used for epiphany page loading progress
2488
// min-width: $bar_size;
2489
// min-height: $bar_size;
2490
// background-color: transparent;
2491
// trough { background-color: transparent; }
2493
// progress { background-color: $primary_color; }
2495
}
2496
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2498
}
2499
/*************
2502
* Level Bar *
2503
*************/
2504
levelbar {
2505
block {
2506
min-width: $medium_size;
2507
min-height: $bar_size;
2508
}
2509
&.vertical block {
2511
min-width: $bar_size;
2512
min-height: $medium_size;
2513
}
2514
trough {
2516
padding: 2px;
2517
border-radius: 2px;
2518
@include entry(normal);
2520
&:disabled { @include entry(disabled); }
2522
}
2523
&.horizontal.discrete {
2525
block { margin: 0 1px; }
2526
trough { padding: 2px 1px; }
2528
}
2529
&.vertical.discrete {
2531
block { margin: 1px 0; }
2532
trough { padding: 1px 2px; }
2534
}
2535
block {
2537
&.low { background-color: $warning_color; }
2538
&.high,
2540
&:not(.empty) { background-color: $primary_color; }
2541
&.full { background-color: $success_color; }
2543
&.empty {
2545
background-color: $fill_color;
2546
color: $disabled_fg_color;
2547
}
2548
}
2549
}
2550
/****************
2553
* Print dialog *
2554
*****************/
2555
printdialog {
2556
paper {
2557
padding: 0;
2558
border: 1px solid $border_color;
2559
background-color: $base_color;
2560
color: $fg_color;
2561
}
2562
.dialog-action-box { margin: 12px; }
2564
}
2565
/**********
2568
* Frames *
2569
**********/
2570
frame > border,
2571
.frame {
2572
margin: 0;
2573
padding: 0;
2574
border: 1px solid $border_color;
2575
border-radius: 0;
2576
box-shadow: none;
2577
&.flat { border-style: none; }
2579
}
2580
frame.flat > border { @extend .frame.flat; } // for backporting
2582
actionbar > revealer > box {
2584
padding: $container_padding;
2585
border-top: 1px solid $border_color;
2586
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2588
}
2589
scrolledwindow {
2591
viewport.frame { // avoid double borders when viewport inside scrolled window
2592
border-style: none;
2593
}
2594
// This is used when content is touch-dragged past boundaries.
2596
// draws a box on top of the content, the size changes programmatically.
2597
@at-root overshoot {
2598
&.top { @include overshoot(top); }
2599
&.bottom { @include overshoot(bottom); }
2601
&.left { @include overshoot(left); }
2603
&.right { @include overshoot(right); }
2605
}
2606
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2608
@at-root undershoot {
2609
&.top { @include undershoot(top); }
2610
&.bottom { @include undershoot(bottom); }
2612
&.left { @include undershoot(left); }
2614
&.right { @include undershoot(right); }
2616
}
2617
@at-root junction { // the small square between two scrollbars
2619
border-style: solid none none solid;
2620
border-width: 1px;
2621
border-color: $border_color;
2622
background-color: $base_color;
2623
&:dir(rtl) { border-style: solid solid none none; }
2625
}
2626
}
2627
// vbox and hbox separators
2629
separator {
2630
min-width: 1px;
2631
min-height: 1px;
2632
background-color: $border_color;
2633
}
2634
%hide_separators {
2636
min-width: 0;
2637
min-height: 0;
2638
background-color: transparent;
2639
}
2640
/*********
2643
* Lists *
2644
*********/
2645
list {
2646
border-color: $border_color;
2647
background-color: $base_color;
2648
row { padding: 2px; }
2650
}
2651
// FIXME
2653
$row_transition: $longer_transition, background-color 0, color 0;
2654
row {
2656
&.activatable {
2657
transition: $row_transition,
2658
background-size $ripple_duration $deceleration_curve,
2659
background-image $ripple_duration * 2 $deceleration_curve;
2660
box-shadow: inset 0 0 0 9999px transparent;
2661
background-image: radial-gradient(circle farthest-corner at center,
2662
transparent 10%,
2663
transparent 0%);
2664
background-repeat: no-repeat;
2665
background-position: center;
2666
background-size: 1000% 1000%;
2667
&:hover {
2669
transition: $row_transition,
2670
box-shadow 0,
2671
background-size $ripple_duration $deceleration_curve,
2672
background-image $ripple_duration * 2 $deceleration_curve;
2673
box-shadow: inset 0 0 0 9999px $row_fill_color;
2674
}
2675
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2677
&:active {
2678
transition: $row_transition,
2679
background-size 0,
2680
background-image 0;
2681
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2682
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2683
background-image: radial-gradient(circle farthest-corner at center,
2684
$semi_fill_color 10%,
2685
transparent 0%);
2686
background-size: 0% 0%;
2687
}
2688
}
2689
&:selected { @extend %selected_items; }
2691
}
2692
/*********************
2695
* App Notifications *
2696
*********************/
2697
.app-notification {
2698
@extend %osd;
2699
@extend toolbar.osd;
2701
margin: 8px;
2703
button { @extend %button_basic.flat; }
2705
&.frame,
2707
border { border-style: none; }
2708
}
2709
/*************
2712
* Expanders *
2713
*************/
2714
expander {
2715
arrow {
2716
transition: all $shorter_duration $standard_curve;
2717
min-width: 16px;
2718
min-height: 16px;
2719
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2720
-gtk-icon-transform: rotate(-90deg);
2721
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2723
&:checked { -gtk-icon-transform: unset; }
2725
color: $secondary_fg_color;
2727
&:hover, &:active { color: $fg_color; }
2729
&:disabled { color: $disabled_secondary_fg_color; }
2731
&:selected {
2733
color: $secondary_inverse_fg_color;
2734
&:hover, &:active { color: $inverse_fg_color; }
2736
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2738
}
2739
}
2740
}
2741
/************
2744
* Calendar *
2745
************/
2746
calendar {
2747
padding: 1px;
2748
border: 1px solid $border_color;
2749
color: $fg_color;
2750
&:disabled { color: $disabled_fg_color; }
2752
&:selected {
2754
@extend %selected_items;
2755
border-radius: 2px + 1px;
2757
}
2758
&.header {
2760
border-style: none none solid;
2761
border-radius: 0;
2762
}
2763
&.button { @extend %simple_flat_button; }
2765
&.highlight {
2767
color: gtkalpha(currentColor, $tertiary_opacity);
2768
font-weight: 500;
2769
}
2770
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2772
}
2773
/***********
2776
* Dialogs *
2777
***********/
2778
messagedialog { // Message Dialog styling
2779
&.background { background-color: $lighter_bg_color; }
2780
.titlebar {
2782
min-height: $small_size;
2783
border-style: none;
2784
box-shadow: inset 0 1px $highlight_color;
2785
background-color: $lighter_bg_color;
2786
color: $fg_color;
2787
&:backdrop { color: $secondary_fg_color; }
2789
}
2790
&.csd { // rounded bottom border styling for csd version
2792
&.background {
2793
// bigger radius for better antialiasing
2794
border-bottom-left-radius: 2px;
2795
border-bottom-right-radius: 2px;
2796
}
2797
.dialog-action-area button {
2799
padding: 8px 16px;
2800
border-top: 1px solid $border_color;
2801
border-radius: 0;
2802
@extend %simple_flat_button;
2804
&:first-child { border-bottom-left-radius: 2px; }
2806
&:last-child { border-bottom-right-radius: 2px; }
2808
}
2809
}
2810
entry { @extend %entry.flat; }
2812
}
2813
filechooser {
2815
.dialog-action-box { border-top: 1px solid $border_color; }
2816
#pathbarbox {
2818
border-bottom: 1px solid $border_color;
2819
background-color: $bg_color;
2820
}
2821
}
2822
filechooserbutton:drop(active) {
2824
box-shadow: none;
2825
}
2826
/***********
2829
* Sidebar *
2830
***********/
2831
.sidebar {
2832
border-style: none;
2833
background-color: $lighter_bg_color;
2834
@at-root %sidebar_left,
2836
&:dir(ltr),
2837
&.left,
2838
&.left:dir(rtl) {
2839
border-right: 1px solid $border_color;
2840
border-left-style: none;
2841
}
2842
@at-root %sidebar_right,
2844
&:dir(rtl),
2845
&.right {
2846
border-left: 1px solid $border_color;
2847
border-right-style: none;
2848
}
2849
list { background-color: transparent; }
2851
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2853
}
2854
stacksidebar {
2856
&.sidebar {
2857
&:dir(ltr),
2858
&.left,
2859
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2860
&:dir(rtl),
2862
&.right { list { @extend %sidebar_right; }}
2863
}
2864
row {
2866
padding: 10px 4px;
2867
> label {
2869
padding-left: 6px;
2870
padding-right: 6px;
2871
}
2872
&.needs-attention > label { @extend %needs_attention; }
2874
}
2875
}
2876
/****************
2879
* File chooser *
2880
****************/
2881
placessidebar {
2882
> viewport.frame { border-style: none; }
2883
list { padding: (4px - 3px) 0 4px; }
2885
row {
2887
// Needs overriding of the GtkListBoxRow padding
2888
min-height: 32px;
2889
margin: -1px 0; // Remove unknown margins
2890
padding: 0;
2891
// Using margins/padding directly in the SidebarRow
2893
// will make the animation of the new bookmark row jump
2894
> revealer { padding: 0 12px; }
2895
&:selected { color: $inverse_fg_color; }
2897
&:disabled { color: $disabled_fg_color; }
2899
image.sidebar-icon {
2901
opacity: $tertiary_opacity; // dim the device icons
2902
&:dir(ltr) { padding-right: 8px; }
2904
&:dir(rtl) { padding-left: 8px; }
2905
}
2906
label.sidebar-label {
2908
&:dir(ltr) { padding-right: 2px; }
2909
&:dir(rtl) { padding-left: 2px; }
2910
}
2911
@at-root button.sidebar-button {
2913
@extend %simple_flat_button;
2914
@extend %small_button;
2916
row:selected & {
2918
}
2919
}
2920
&.sidebar-placeholder-row {
2922
min-height: 2px;
2923
padding: 0 8px;
2924
background-image: image($accent_color);
2925
background-clip: content-box;
2926
}
2927
&.sidebar-new-bookmark-row { color: $accent_color; }
2929
&:drop(active):not(:disabled) {
2931
box-shadow: inset 0 0 0 2px $accent_color;
2932
&:selected {
2934
// background-color: $accent_color;
2935
// color: $inverse_fg_color;
2936
}
2937
}
2938
}
2939
}
2940
placesview {
2942
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2943
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2945
// this selects the "connect to server" label
2947
> actionbar > revealer > box > label {
2948
padding-left: 8px;
2949
padding-right: 8px;
2950
}
2951
}
2952
/*********
2955
* Paned *
2956
*********/
2957
paned {
2958
> separator {
2959
min-width: 1px;
2960
min-height: 1px;
2961
-gtk-icon-source: none; // defeats the ugly default handle decoration
2962
border-style: none; // just to be sure
2963
background-color: transparent;
2964
// workaround, using background istead of a border since the border will get rendered twice (?)
2965
background-image: image($border_color);
2966
background-size: 1px 1px;
2967
background-clip: content-box; // avoids borders image being rendered twice (?)
2968
&.wide {
2970
min-width: 6px;
2971
min-height: 6px;
2972
background-color: $bg_color;
2973
background-image: image($border_color), image($border_color);
2974
background-size: 1px 1px, 1px 1px;
2975
}
2976
}
2977
&.horizontal > separator {
2979
background-repeat: repeat-y;
2980
&:dir(ltr) {
2982
margin: 0 -8px 0 0;
2983
padding: 0 8px 0 0;
2984
background-position: left;
2985
}
2986
&:dir(rtl) {
2988
margin: 0 0 0 -8px;
2989
padding: 0 0 0 8px;
2990
background-position: right;
2991
}
2992
&.wide {
2994
margin: 0;
2995
padding: 0;
2996
background-repeat: repeat-y, repeat-y;
2997
background-position: left, right;
2998
}
2999
}
3000
&.vertical > separator {
3002
margin: 0 0 -8px 0;
3003
padding: 0 0 8px 0;
3004
background-repeat: repeat-x;
3005
background-position: top;
3006
&.wide {
3008
margin: 0;
3009
padding: 0;
3010
background-repeat: repeat-x, repeat-x;
3011
background-position: bottom, top;
3012
}
3013
}
3014
}
3015
/**************
3018
* GtkInfoBar *
3019
**************/
3020
infobar {
3021
border-style: none;
3022
&.info { background-color: $info_bg_color; }
3024
&.question { background-color: $question_bg_color; }
3026
&.warning { background-color: $warning_bg_color; }
3028
&.error { background-color: $error_bg_color; }
3030
&.info,
3032
&.question,
3033
&.warning,
3034
&.error {
3035
> label, & { color: $inverse_fg_color; }
3036
button { @extend %button_selected; }
3038
selection {}
3040
*:link { @extend %link_selected; }
3042
}
3043
}
3044
/************
3047
* Tooltips *
3048
************/
3049
tooltip {
3050
&.background {
3051
// background-color needs to be set this way otherwise it gets drawn twice
3052
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3053
box-shadow: inset 0 1px $highlight_color;
3054
background-color: scale-alpha($base_color, $higher_opacity);
3055
}
3056
// @extend %osd;
3058
// padding: 4px; /* not working */
3060
border-radius: 2px;
3061
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3062
&:not(.csd):not(.unity-csd) {
3064
border: 1px solid $border_color;
3065
border-radius: 2px + 1px;
3066
background-clip: $extra_background_clip;
3067
}
3068
// FIXME: we need a border or tooltips vanish on black background.
3070
decoration { background-color: transparent; }
3071
label {
3073
// tooltip label already seems to have 6px margins
3074
min-height: 32px - 6px * 2;
3075
padding: 0 8px - 6px;
3076
}
3077
* {
3079
// workaround for Eclipse.
3080
// do not include any declaration here.
3081
// padding: 0;
3082
// background-color: transparent;
3083
// color: inherit;
3084
}
3085
}
3086
/*****************
3089
* Color Chooser *
3090
*****************/
3091
colorswatch {
3092
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3093
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3094
// applied to the overlay box.
3095
// base color corners rounding
3097
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3098
// sports a bigger radius.
3099
// nth-child is needed by the custom color strip.
3100
&.top {
3102
border-top-left-radius: $material_radius + 0.5px;
3103
border-top-right-radius: $material_radius + 0.5px;
3104
overlay {
3106
border-top-left-radius: $material_radius;
3107
border-top-right-radius: $material_radius;
3108
}
3109
}
3110
&.bottom {
3112
border-bottom-left-radius: $material_radius + 0.5px;
3113
border-bottom-right-radius: $material_radius + 0.5px;
3114
overlay {
3116
border-bottom-left-radius: $material_radius;
3117
border-bottom-right-radius: $material_radius;
3118
}
3119
}
3120
&.left,
3122
&:first-child:not(.top) {
3123
border-top-left-radius: $material_radius + 0.5px;
3124
border-bottom-left-radius: $material_radius + 0.5px;
3125
overlay {
3127
border-top-left-radius: $material_radius;
3128
border-bottom-left-radius: $material_radius;
3129
}
3130
}
3131
&.right,
3133
&:last-child:not(.bottom) {
3134
border-top-right-radius: $material_radius + 0.5px;
3135
border-bottom-right-radius: $material_radius + 0.5px;
3136
overlay {
3138
border-top-right-radius: $material_radius;
3139
border-bottom-right-radius: $material_radius;
3140
}
3141
}
3142
&.dark overlay { color: $light_fg_color; }
3144
&.light overlay { color: $dark_fg_color; }
3146
&.dark { color: $light_fg_color; } // for focus ring
3148
&.light { color: $dark_fg_color; } // for focus ring
3150
&:drop(active) {
3152
box-shadow: none;
3153
&.light overlay {
3155
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3156
}
3157
&.dark overlay {
3159
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3160
}
3161
}
3162
overlay {
3164
transition: $shadow_transition;
3165
box-shadow: $shadow_1;
3166
&:hover { box-shadow: $shadow_2; }
3168
}
3169
&#add-color-button {
3171
border-radius: $material_radius $material_radius 0 0;
3172
color: $light_fg_color; // for focus ring
3173
&:only-child { border-radius: $material_radius; }
3175
overlay {
3177
background-image: linear-gradient(to right,
3178
$error_bg_color 25%,
3179
$warning_bg_color 25%, $warning_bg_color 50%,
3180
$info_bg_color 50%, $info_bg_color 75%,
3181
$question_bg_color 75%);
3182
color: $light_fg_color;
3183
}
3184
}
3185
&:disabled {
3187
opacity: $disabled_opacity;
3188
overlay { box-shadow: none; }
3190
}
3191
row:selected & {
3193
}
3194
&#editor-color-sample {
3196
border-radius: $material_radius + 0.5px;
3197
overlay { border-radius: $material_radius; }
3199
// overlay:hover { box-shadow: $shadow_1; }
3201
}
3202
}
3203
// colorscale popup
3205
colorchooser .popover.osd {
3206
transition: $shadow_transition;
3207
border-radius: 2px;
3208
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3209
background-color: $base_color;
3210
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3212
spinbutton:not(.vertical) { @extend %entry.flat; }
3214
}
3215
/********
3218
* Misc *
3219
********/
3220
// content view (grid/list)
3221
.content-view {
3222
background-color: $bg_color;
3223
// &:hover { -gtk-icon-effect: highlight; }
3225
rubberband, .rubberband { @extend rubberband; }
3227
}
3228
.scale-popup {
3230
.osd & { @extend %osd; }
3231
.osd & button.flat { // FIXME: quick hack, redo properly
3233
}
3234
button { // +/- buttons on GtkVolumeButton popup
3236
}
3237
}
3238
/**********************
3241
* Window Decorations *
3242
**********************/
3243
decoration {
3244
transition: $shadow_transition;
3245
border-radius: 2px 2px 0 0;
3246
box-shadow: $shadow_4, 0 16px 16px transparent;
3247
// FIXME rationalize shadows
3249
// this is used for the resize cursor area
3251
margin: 8px;
3252
&:backdrop {
3254
// the transparent shadow here is to enforce that the shadow extents don't
3255
// change when we go to backdrop, to prevent jumping windows.
3256
// The biggest shadow should be in the same order then in the active state
3257
// or the jumping will happen during the transition.
3258
box-shadow: $shadow_2, 0 16px 16px transparent;
3259
}
3260
.maximized &,
3262
.fullscreen &,
3263
.tiled & { border-radius: 0; }
3264
.popup & { box-shadow: none; }
3266
// server-side decorations as used by mutter
3268
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3269
.csd.popup & {
3271
border-radius: 2px;
3272
box-shadow: $shadow_2;
3273
}
3274
tooltip.csd & {
3276
border-radius: 2px;
3277
box-shadow: $shadow_2;
3278
}
3279
messagedialog.csd & {
3281
border-radius: 2px;
3282
// box-shadow: $shadow_4, 0 16px 16px transparent;
3283
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3285
}
3286
.solid-csd & {
3288
margin: 0;
3289
// padding: 4px;
3290
border-radius: 0;
3291
box-shadow: none;
3292
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3293
background-color: $titlebar_bg_color;
3294
}
3295
}
3296
// Window Close button
3298
button.titlebutton {
3299
// @extend %simple_flat_button;
3300
@extend %circular_button;
3302
.selection-mode & {
3304
}
3305
}
3306
// catch all extend :)
3309
%selected_items {
3311
background-color: $primary_color;
3312
@at-root %nobg_selected_items, & {
3314
color: $inverse_fg_color;
3315
&:disabled { color: $disabled_inverse_fg_color; }
3317
}
3318
}
3319
.monospace { font-family: monospace; }
3321
/**********************
3324
* Touch Copy & Paste *
3325
**********************/
3326
// touch selection handlebars for the Popover.osd above
3327
cursor-handle {
3328
border-radius: $circular_radius;
3329
background-color: $accent_color;
3330
background-image: none;
3331
&.top:dir(ltr), &.bottom:dir(rtl) {
3333
padding-left: 6px;
3334
border-top-right-radius: 0;
3335
}
3336
&.bottom:dir(ltr), &.top:dir(rtl) {
3338
padding-right: 6px;
3339
border-top-left-radius: 0;
3340
}
3341
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3343
-GtkWidget-text-handle-width: 24;
3344
-GtkWidget-text-handle-height: 30;
3345
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3347
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3348
url('#{$_url}@2.png'));
3349
}
3350
}
3351
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3353
// shortcut window keys
3355
.keycap {
3356
min-width: 28px - 8px * 2;
3357
min-height: 28px - 2px;
3358
margin-top: 2px;
3359
padding-bottom: 2px;
3360
padding-left: 8px;
3361
padding-right: 8px;
3362
border: solid 1px $border_color;
3364
border-radius: 2px + 1px;
3365
box-shadow: inset 0 -2px $border_color;
3366
background-color: $base_color;
3367
color: $fg_color;
3368
font-size: smaller;
3369
}
3370
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3372
transition: $longer_transition;
3373
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3374
caret-color: $accent_color;
3375
}
3376
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3378
stackswitcher button.circular,
3380
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3381
min-width: $medium_size;
3382
min-height: $medium_size;
3383
padding: 0;
3384
}
3385