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: rgba($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: $secondary_fg_color;
244
&:hover, &:active { color: $fg_color; }
246
&:disabled { color: $tertiary_fg_color; }
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
image {
287
color: $secondary_inverse_fg_color;
288
&:hover, &:active { color: $inverse_fg_color; }
290
&:disabled { color: $tertiary_inverse_fg_color; }
292
}
293
}
294
}
295
&:drop(active) {
297
// box-shadow: inset 0 0 0 2px $accent_color;
298
}
299
.osd & {
301
}
302
}
303
progress {
305
margin: 2px (2px - 8px);
306
border-bottom: 2px solid $primary_color;
307
background-color: transparent;
308
}
309
// linked entries
311
.linked:not(.vertical) > & { @extend %linked; }
312
// Vertically linked entries
314
.linked.vertical > & { @extend %linked_vertical; }
315
.linked:not(.vertical) > &.flat,
317
.linked.vertical > &.flat { border-radius: 0; }
318
}
319
treeview entry {
321
&.flat, & {
322
min-height: 0;
323
padding: 2px;
324
border-radius: 0;
325
background-color: $base_color;
326
&, &:focus {
328
border-image: none;
329
box-shadow: none;
330
}
331
}
332
}
333
.entry-tag {
335
$tag_height: 24px;
336
$tag_margin: ($medium_size - $tag_height) / 2;
337
margin: $tag_margin; // instead of min-height: $tag_height;
339
border-radius: $circular_radius;
340
box-shadow: none;
341
background-color: $primary_color;
342
color: $inverse_fg_color;
343
&:hover { box-shadow: $shadow_1; }
345
// side margins: compensate the entry padding with a negative margin
347
// then the negative margin itself
348
:dir(ltr) & {
349
margin-left: 8px;
350
margin-right: $tag_margin - 8px;
351
padding-left: 8px;
352
padding-right: ($tag_height - 16px) / 2;
353
}
354
:dir(rtl) & {
356
margin-left: $tag_margin - 8px;
357
margin-right: 8px;
358
padding-left: ($tag_height - 16px) / 2;
359
padding-right: 8px;
360
}
361
// seems any sizing doesn't work
363
&.button {
364
box-shadow: none;
365
background-color: transparent;
366
&:not(:hover):not(:active) { color: $secondary_inverse_fg_color; }
368
}
369
}
370
/***********
373
* Buttons *
374
***********/
375
// stuff for .needs-attention
376
@keyframes needs_attention {
377
from {
378
background-image: -gtk-gradient(radial,
379
center center, 0,
380
center center, 0.001,
381
to($accent_color),
382
to(transparent));
383
}
384
to {
386
background-image: -gtk-gradient(radial,
387
center center, 0,
388
center center, 0.5,
389
to($accent_color),
390
to(transparent));
391
}
392
}
393
%button,
395
button {
396
@at-root %button_basic, & {
397
min-height: 24px;
398
min-width: 16px;
399
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
400
border-radius: 2px;
401
font-weight: 500;
402
@include button(normal);
404
&:hover { @include button(hover); }
406
&:active { @include button(active); }
408
&:disabled { @include button(disabled); }
410
&:checked { @include button(checked); }
412
&:checked:disabled { @include button(checked-disabled); }
414
@at-root %flat_button, &.flat {
416
@at-root %simple_flat_button, & {
417
@include button(flat-normal);
418
&:hover { @include button(flat-hover); }
420
&:active { @include button(flat-active); }
422
&:disabled { @include button(flat-disabled); }
424
}
425
&:checked { @include button(flat-checked); }
427
&:checked:disabled { @include button(flat-checked-disabled); }
429
}
430
&.text-button {
432
padding-left: 16px;
433
padding-right: 16px;
434
}
435
&.image-button {
437
min-width: 24px;
438
padding: ($medium_size - 24px) / 2;
439
@extend %circular_button;
441
}
442
&.text-button.image-button {
444
border-radius: 2px;
445
-gtk-outline-radius: 2px;
446
label {
448
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
449
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
451
}
452
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
454
}
455
.linked > & { @extend %linked; }
457
.linked.vertical > & { @extend %linked_vertical; }
459
.linked > &.flat,
461
.linked.vertical > &.flat {
462
border-radius: 2px;
463
&.image-button { @extend %circular_button; }
465
&.text-button.image-button {
467
border-radius: 2px;
468
-gtk-outline-radius: 2px;
469
}
470
}
471
&:drop(active) {
473
// box-shadow: inset 0 0 0 2px $accent_color;
474
}
475
}
476
@at-root %button_selected, row:selected & {
478
&:disabled { color: $disabled_secondary_inverse_fg_color; }
479
}
480
// big standalone buttons like in Documents pager
482
&.osd {
483
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
484
&.image-button { padding: ($large_size - 24px) / 2; }
486
&:disabled { opacity: 0; }
488
}
489
// overlay / OSD style
491
@at-root %osd_button,
492
.osd & {
493
}
494
// Suggested and Destructive Action buttons
496
@each $b_type, $b_color in (suggested-action, $suggested_color),
497
(destructive-action, $destructive_color) {
498
&.#{$b_type} {
499
background-color: $b_color;
500
color: $inverse_fg_color;
501
&:disabled { @include button(disabled, $b_color); }
503
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
505
&.flat {
507
background-color: transparent;
508
color: $b_color;
509
&:disabled { @include button(flat-disabled, $b_color); }
511
&:checked { background-color: rgba($b_color, 0.3); }
513
}
514
.osd & {
516
}
517
}
518
}
519
.stack-switcher > & {
521
// to position the needs attention dot, padding is added to the button
522
// child, a label needs just lateral padding while an icon needs vertical
523
// padding added too.
524
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
526
> label {
528
padding-left: 6px; // label padding
529
padding-right: 6px; //
530
}
531
> image {
533
padding-left: 6px; // image padding
534
padding-right: 6px; //
535
padding-top: 3px; //
536
padding-bottom: 3px; //
537
}
538
&.text-button {
540
// compensate text-button paddings
541
padding-left: 16px - 6px;
542
padding-right: 16px - 6px;
543
}
544
&.image-button {
546
// we want image buttons to have a 1:1 aspect ratio, so compensation
547
// of the padding added to the GtkImage is needed
548
padding-left: ($medium_size - 16px) / 2 - 6px;
549
padding-right: ($medium_size - 16px) / 2 - 6px;
550
}
551
&.needs-attention {
553
> label,
554
> image { @extend %needs_attention; }
555
&:checked {
557
> label,
558
> image {
559
animation: none;
560
background-image: none;
561
}
562
}
563
}
564
}
565
// hide separators
567
&.font,
568
&.file { separator { @extend %hide_separators; }}
569
// &.font { > box > box > label { font-weight: bold; }}
571
// inline-toolbar buttons
573
.inline-toolbar & {
574
// @extend %button_basic.flat;
575
&:not(.text-button) { @extend %circular_button; }
577
}
578
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
580
@at-root %circular_button,
582
&.close,
583
&.circular { // The Bloody Circul Button
584
border-radius: $circular_radius;
585
-gtk-outline-radius: $circular_radius;
586
// label { padding: 0; }
588
}
589
@at-root %small_button {
591
min-height: $small_size;
592
min-width: $small_size;
593
padding: 0;
594
border-radius: $circular_radius;
595
-gtk-outline-radius: $circular_radius;
596
}
597
}
598
%needs_attention {
600
animation: needs_attention $longer_duration $deceleration_curve forwards;
601
background-repeat: no-repeat;
602
background-position: right 3px;
603
background-size: 6px 6px;
604
&:dir(rtl) { background-position: left 3px; }
606
}
607
// all the following is for the +|- buttons on inline toolbars, that way
609
// should really be deprecated...
610
.inline-toolbar toolbutton > button { // redefining the button look is
611
// needed since those are flat...
612
}
613
// More inline toolbar buttons
615
toolbar.inline-toolbar toolbutton {
616
// > button.flat { @extend %linked_middle; }
617
// &:first-child > button.flat { @extend %linked:first-child; }
619
// &:last-child > button.flat { @extend %linked:last-child; }
621
// &:only-child > button.flat { @extend %linked:only-child; }
623
}
624
%linked_middle {
626
border-radius: 0;
627
-gtk-outline-radius: 2px;
628
}
629
%linked {
631
@extend %linked_middle;
632
&:first-child {
634
border-top-left-radius: 2px;
635
border-bottom-left-radius: 2px;
636
}
637
&:last-child {
639
border-top-right-radius: 2px;
640
border-bottom-right-radius: 2px;
641
}
642
&:only-child {
644
border-radius: 2px;
645
}
646
}
647
%linked_vertical_middle {
649
border-radius: 0;
650
-gtk-outline-radius: 2px;
651
}
652
%linked_vertical {
654
@extend %linked_vertical_middle;
655
&:first-child {
657
border-top-left-radius: 2px;
658
border-top-right-radius: 2px;
659
}
660
&:last-child {
662
border-bottom-left-radius: 2px;
663
border-bottom-right-radius: 2px;
664
}
665
&:only-child {
667
border-radius: 2px;
668
}
669
}
670
/* menu buttons */
672
modelbutton.flat,
673
.menuitem.button.flat {
674
min-height: $menuitem_size;
675
padding: 0 8px;
676
border-radius: 2px;
677
color: inherit;
678
@extend %simple_flat_button;
680
&:selected { @extend %selected_items; }
682
}
683
modelbutton.flat arrow {
685
background: none;
686
&:hover { background: none; }
688
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
690
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
692
}
693
button.color {
695
min-height: $small_size;
696
min-width: $small_size;
697
padding: $container_padding;
698
colorswatch:only-child {
700
// &, overlay { border-radius: 0; }
701
}
702
}
703
/*********
706
* Links *
707
*********/
708
*:link {
709
&, &:hover, &:active { color: $link_color; }
710
&:visited {
712
&, &:hover, &:active { color: $visited_link_color; }
713
}
714
@at-root %link_selected,
716
&:selected,
717
*:selected & { color: $inverse_fg_color; }
718
}
719
button:link,
721
button:visited {
722
@extend *:link;
723
> label { text-decoration-line: underline; }
725
}
726
/*****************
728
* GtkSpinButton *
729
*****************/
730
spinbutton {
731
&:not(.vertical) {
732
// in this horizontal configuration, the whole spinbutton
733
// behaves as the entry, so we extend the entry styling
734
// and nuke the style on the internal entry
735
@extend %entry;
736
padding: 0;
738
%spinbutton_entry,
740
entry {
741
min-width: $large_size - 8px * 2;
742
// reset all the other props since the spinbutton node is styled here
743
margin: 0;
744
border-image: none;
745
border-radius: 0;
746
box-shadow: none;
747
background-color: transparent;
748
//
749
// This will help to simplify spinbutton's code, but unfortunatelly
750
// doesn't work properly in :dir(rtl). It needs z-index property.
751
//
752
// min-width: $large_size - 8px;
753
//
754
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
755
//
756
// &:dir(ltr) {
757
// margin-right: -$spinbuttons_width;
758
// padding-right: $spinbuttons_width;
759
// }
760
//
761
// &:dir(rtl) {
762
// margin-left: -$spinbuttons_width;
763
// padding-left: $spinbuttons_width;
764
// }
765
}
766
button {
768
// margin: $container_padding;
769
border: solid $container_padding transparent;
770
@extend %simple_flat_button;
772
@extend %small_button;
774
&.up:dir(ltr),
776
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
777
&.up:dir(rtl),
779
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
780
}
781
}
782
// OSD horizontal
784
.osd &:not(.vertical) {
785
button {
786
}
787
}
788
// Vertical
790
&.vertical {
791
// in the vertical configuration, we treat the spinbutton
792
// as a box, and tweak the style of the entry in the middle
793
// so that it's linked
794
// FIXME: this should not be set at all, but otherwise it gets the wrong
796
// color
797
&:disabled { color: $disabled_fg_color; }
798
&:drop(active) {
800
box-shadow: none;
801
}
802
entry {
804
min-height: $medium_size;
805
min-width: $large_size;
806
padding: 0;
807
}
808
button {
810
min-height: $medium_size;
811
min-width: $large_size;
812
padding: 0;
813
@extend %simple_flat_button;
815
&.up { border-radius: 2px 2px 0 0; }
817
&.down { border-radius: 0 0 2px 2px; }
819
}
820
}
821
// OSD vertical
823
.osd &.vertical button:first-child {
824
}
825
// Misc
827
treeview &:not(.vertical) {
828
min-height: 0;
829
border-style: none;
830
border-radius: 0;
831
entry {
833
min-height: 0;
834
padding: 1px 2px;
835
}
836
}
837
}
838
/**************
841
* ComboBoxes *
842
**************/
843
combobox {
844
arrow {
845
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
846
min-height: 16px;
847
min-width: 16px;
848
}
849
decoration,
851
button.combo:checked { transition: none; } // workaround for menuitem selection
852
button.combo cellview {
854
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
855
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
856
}
857
#gtk-combobox-popup-menu {
859
padding: 2px 0;
860
menuitem {
862
min-height: $medium_size - 2px * 2;
863
padding: 0 8px;
864
}
865
// overflow arrows
867
> arrow {
868
&.top { margin-top: -2px; }
869
&.bottom { margin-bottom: -2px * 3; }
871
}
872
}
873
&.linked {
875
button:nth-child(2) {
876
&:dir(ltr) { @extend %linked:last-child; }
877
&:dir(rtl) { @extend %linked:first-child; }
878
}
879
}
880
&:drop(active) { // FIXME: untested
882
box-shadow: none;
883
// button.combo { @extend %button_basic:drop(active); }
885
}
886
}
887
// the combo is a composite widget so the way we do button linking doesn't
889
// work, special case needed. See
890
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
891
.linked:not(.vertical) > combobox {
893
> box > button.combo { @extend %linked_middle; }
894
&:first-child > box > button.combo { @extend %linked:first-child; }
896
&:last-child > box > button.combo { @extend %linked:last-child; }
898
&:only-child > box > button.combo { @extend %linked:only-child; }
900
}
901
.linked.vertical > combobox {
903
> box > button.combo { @extend %linked_vertical_middle; }
904
&:first-child > box > button.combo { @extend %linked_vertical:first-child; }
906
&:last-child > box > button.combo { @extend %linked_vertical:last-child; }
908
&:only-child > box > button.combo { @extend %linked_vertical:only-child; }
910
}
911
%combo_flat {
913
border-radius: 0;
914
background-image: none;
915
font-weight: inherit;
916
@include entry(flat-normal);
918
&:hover { box-shadow: inset 0 -2px $tertiary_fg_color; }
920
&:checked {
922
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
923
$primary_color 100%,
924
transparent 0%)
925
0 0 2 / 0 0 2px;
926
}
927
&:disabled { color: $disabled_fg_color; }
929
}
930
/************
933
* Toolbars *
934
************/
935
toolbar {
936
-GtkWidget-window-dragging: true;
937
padding: $container_padding / 2;
938
background-color: $bg_color;
939
button { @extend %button_basic.flat; }
941
// on OSD
943
.osd & { background-color: transparent; }
944
// stand-alone OSD toolbars
946
&.osd {
947
transition: $shadow_transition;
948
padding: $container_padding;
949
border-radius: 2px;
950
box-shadow: $shadow_2, inset 0 1px $highlight_color;
951
background-color: $base_color;
952
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
954
&.left,
956
&.right,
957
&.top,
958
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
959
}
960
// toolbar separators
962
&.horizontal separator { margin: $container_padding / 2; }
963
&.vertical separator { margin: $container_padding / 2; }
964
&:not(.inline-toolbar):not(.osd) {
966
scale,
967
entry,
968
spinbutton,
969
button { margin: $container_padding / 2; }
970
.linked entry,
972
.linked spinbutton,
973
.linked button {
974
&:not(:first-child) { margin-left: 0; }
975
&:not(:last-child) { margin-right: 0; }
976
}
977
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
979
}
980
}
981
// searchbar, location-bar & inline-toolbar
983
.inline-toolbar {
984
padding: $container_padding;
985
border-style: solid;
986
border-width: 0 1px 1px;
987
border-color: $border_color;
988
background-color: $alt_base_color;
989
}
990
searchbar,
992
.location-bar {
993
padding: $container_padding;
994
border-style: solid;
995
border-width: 0 0 1px;
996
border-color: $border_color;
997
background-color: $bg_color;
998
background-clip: border-box;
999
}
1000
/***************
1003
* Header bars *
1004
***************/
1005
%titlebar,
1006
headerbar {
1007
transition: background-color $shorter_duration $deceleration_curve;
1008
min-height: $large_size;
1009
padding: 0 $container_padding;
1010
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1011
background-color: $titlebar_bg_color;
1012
color: $titlebar_fg_color;
1013
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
1015
&:backdrop {
1017
color: $secondary_titlebar_fg_color;
1018
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
1020
}
1021
.title {
1023
transition: $longer_transition;
1024
padding: 0 12px;
1025
font-weight: bold;
1026
}
1027
.subtitle {
1029
transition: $longer_transition;
1030
padding: 0 12px;
1031
font-size: smaller;
1032
@extend .dim-label;
1034
}
1035
.linked:not(.vertical) > entry:not(.flat) { border-radius: 2px; }
1037
button:not(.suggested-action):not(.destructive-action) {
1039
@extend %button_basic.flat;
1040
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1042
$titlebar_indicator_color 0%,
1043
transparent 0%)
1044
0 0 0 / 0 0 0px;
1045
color: $secondary_titlebar_fg_color;
1046
&:hover, &:active { color: $titlebar_fg_color; }
1048
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1050
&:checked {
1052
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1053
$titlebar_indicator_color 100%,
1054
transparent 0%)
1055
0 0 2 / 0 0 2px;
1056
color: $titlebar_fg_color;
1057
&:disabled { color: $disabled_titlebar_fg_color; }
1059
&, &:disabled { background-color: transparent; }
1061
}
1062
&:backdrop {
1064
color: $tertiary_titlebar_fg_color;
1065
&:hover, &:active { color: $secondary_titlebar_fg_color; }
1067
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1069
&:checked {
1071
color: $secondary_titlebar_fg_color;
1072
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1074
}
1075
}
1076
}
1077
button.suggested-action, button.destructive-action {
1079
&:disabled {
1080
background-color: $titlebar_divider_color;
1081
color: $disabled_titlebar_fg_color;
1082
}
1083
}
1084
&.selection-mode {
1086
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1087
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1088
transition: background-color 0.00001s $longer_duration;
1089
animation: header_ripple_effect $longer_duration $deceleration_curve;
1090
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1091
background-color: $primary_color;
1092
color: $inverse_fg_color;
1093
&:backdrop {
1095
color: $secondary_inverse_fg_color;
1096
}
1097
.subtitle:link { @extend *:link:selected; }
1099
button:not(.suggested-action):not(.destructive-action) {
1101
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1102
currentColor 0%,
1103
transparent 0%)
1104
0 0 0 / 0 0 0px;
1105
color: $inverse_fg_color;
1106
&:disabled { color: $disabled_inverse_fg_color; }
1108
&:checked {
1110
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1111
currentColor 100%,
1112
transparent 0%)
1113
0 0 2 / 0 0 2px;
1114
color: $inverse_fg_color;
1115
&:disabled { color: $disabled_inverse_fg_color; }
1117
}
1118
}
1119
.selection-menu {
1121
padding-left: 16px;
1122
padding-right: 16px;
1123
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1125
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1127
}
1128
}
1129
.fullscreen &,
1131
.tiled &,
1132
.maximized & {
1133
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1134
box-shadow: $shadow_1;
1135
}
1136
&.default-decoration {
1138
min-height: $small_size;
1139
padding: $container_padding;
1140
box-shadow: inset 0 1px $titlebar_highlight_color;
1141
.fullscreen &,
1143
.tiled &,
1144
.maximized & { box-shadow: none; }
1145
button.titlebutton {
1147
min-height: $small_size;
1148
min-width: $small_size;
1149
margin: 0;
1150
padding: 0;
1151
}
1152
// workaround for non-animatable buttons
1154
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1155
}
1156
.solid-csd & {
1158
&:dir(rtl), &:dir(ltr) { // specificity bump
1159
// margin-left: -2px;
1160
// margin-right: -2px;
1161
// margin-top: -2px;
1162
// border-radius: 0;
1163
// box-shadow: inset 0 1px $titlebar_highlight_color;
1164
}
1165
}
1166
}
1167
headerbar {
1169
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1170
entry,
1171
spinbutton,
1172
// separator,
1173
button {
1174
margin-top: $container_padding;
1175
margin-bottom: $container_padding;
1176
}
1177
switch {
1179
margin-top: $container_padding * 2;
1180
margin-bottom: $container_padding * 2;
1181
}
1182
// reset button margins of the spinbutton
1184
spinbutton button {
1185
margin-top: 0;
1186
margin-bottom: 0;
1187
}
1188
}
1189
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1191
border-top-left-radius: 2px;
1192
border-top-right-radius: 2px;
1193
}
1194
headerbar { // headerbar border rounding
1196
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1197
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1198
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1200
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1202
&:first-child, &:last-child {
1203
border-top-left-radius: 2px;
1204
border-top-right-radius: 2px;
1205
}
1206
}
1207
}
1208
.titlebar:not(headerbar) {
1210
window.csd > & {
1211
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1212
padding: 0;
1213
background-color: transparent;
1214
background-image: none;
1215
border-style: none;
1216
box-shadow: none;
1217
}
1218
> separator {
1220
background-color: $titlebar_bg_color;
1221
background-image: image($border_color);
1222
}
1223
@extend %titlebar;
1225
}
1226
/************
1229
* Pathbars *
1230
************/
1231
%pathbar_button,
1232
.path-bar button {
1233
padding-left: ($medium_size - 24px) / 2;
1234
padding-right: ($medium_size - 24px) / 2;
1235
label:not(:only-child) {
1237
&:first-child { margin-left: 4px; }
1238
&:last-child { margin-right: 4px; }
1240
}
1241
&.slider-button {
1243
padding-left: (24px - 16px) / 2;
1244
padding-right: (24px - 16px) / 2;
1245
}
1246
:not(headerbar) & {
1248
@extend %flat_button;
1249
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1251
$primary_color 0%,
1252
transparent 0%)
1253
0 0 0 / 0 0 0px;
1254
border-radius: 2px;
1255
&:checked {
1257
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1258
$primary_color 100%,
1259
transparent 0%)
1260
0 0 2 / 0 0 2px;
1261
&, &:disabled { background-color: transparent; }
1263
}
1264
}
1265
}
1266
/**************
1269
* Tree Views *
1270
**************/
1271
treeview.view {
1272
@at-root * {
1273
-GtkTreeView-horizontal-separator: 4;
1274
-GtkTreeView-grid-line-width: 1;
1275
-GtkTreeView-grid-line-pattern: '';
1276
-GtkTreeView-tree-line-width: 1;
1277
-GtkTreeView-tree-line-pattern: '';
1278
-GtkTreeView-expander-size: 16;
1279
}
1280
border-left-color: $fill_color; // this is actually the tree lines color,
1282
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1283
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1285
&:hover, &:active, &:selected { border-radius: 0; }
1287
&.separator {
1289
min-height: 1px + 2px * 2;
1290
color: $border_color;
1291
}
1292
&:drop(active) {
1294
border-style: solid none;
1295
border-width: 1px;
1296
border-color: $accent_color;
1297
&.after { border-top-style: none; }
1299
&.before { border-bottom-style: none; }
1301
}
1302
&.expander {
1304
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1305
-gtk-icon-transform: rotate(-90deg);
1306
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1308
&:checked { -gtk-icon-transform: unset; }
1310
color: $secondary_fg_color;
1312
&:hover, &:active { color: $fg_color; }
1314
&:disabled { color: $disabled_secondary_fg_color; }
1316
&:selected {
1318
color: $secondary_inverse_fg_color;
1319
&:hover, &:active { color: $inverse_fg_color; }
1321
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1323
}
1324
}
1325
&.progressbar { // progress bar in treeviews
1327
border-bottom: $bar_size solid $primary_color;
1328
box-shadow: none;
1329
background-color: transparent;
1330
&:selected { border-bottom-color: $inverse_fg_color; }
1332
}
1333
&.trough { // progress bar trough in treeviews
1335
border-bottom: $bar_size solid rgba($primary_color, $lower_opacity);
1336
box-shadow: none;
1337
background-color: transparent;
1338
&:selected { border-bottom-color: $inverse_track_color; }
1340
}
1341
header {
1343
button {
1344
@extend row.activatable;
1345
padding: 2px 6px;
1347
border-style: none solid solid none;
1348
border-width: 1px;
1349
border-color: $border_color;
1350
border-radius: 0;
1351
background-clip: border-box;
1352
&, &:hover, &:active { box-shadow: none; }
1354
&, &:disabled { background-color: $base_color; }
1356
&:last-child { border-right-style: none; }
1358
}
1359
}
1360
button.dnd,
1362
header.button.dnd { // for treeview-like derive widgets
1363
padding: 2px 6px;
1364
border-style: none solid solid;
1365
border-width: 1px;
1366
border-color: $border_color;
1367
border-radius: 0;
1368
box-shadow: none;
1369
background-color: $base_color;
1370
background-clip: border-box;
1371
color: $primary_color;
1372
}
1373
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1375
}
1376
/*********
1379
* Menus *
1380
*********/
1381
menubar,
1382
.menubar {
1383
-GtkWidget-window-dragging: true;
1384
padding: 0;
1385
// box-shadow: inset 0 -1px $border_color;
1386
background-color: $titlebar_bg_color;
1387
> menuitem {
1389
transition: $shorter_transition;
1390
min-height: 20px;
1391
padding: 4px 8px;
1392
color: $secondary_titlebar_fg_color;
1393
&:hover { // Seems like it :hover even with keyboard focus
1395
transition: none;
1396
background-color: $titlebar_divider_color;
1397
color: $titlebar_fg_color;
1398
}
1399
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1401
}
1402
}
1403
.csd.popup { background-color: transparent; }
1405
menu,
1407
.menu,
1408
.context-menu {
1409
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1410
padding: 4px 0;
1411
box-shadow: inset 0 1px $highlight_color;
1412
background-color: $base_color;
1413
border: 1px solid $border_color; // adds borders in a non composited env
1414
.csd & {
1416
border: none; // axes borders in a composited env
1417
border-radius: 2px;
1418
}
1419
menuitem {
1421
transition: $shorter_transition;
1422
min-height: 20px;
1423
min-width: 40px;
1424
padding: 4px 8px;
1425
font: initial;
1426
text-shadow: none;
1427
&:hover {
1429
transition: none;
1430
background-color: $divider_color;
1431
}
1432
&:disabled { color: $disabled_fg_color; }
1434
// submenu indicators
1436
arrow {
1437
min-height: 16px;
1438
min-width: 16px;
1439
&:dir(ltr) {
1441
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1442
margin-left: 8px;
1443
}
1444
&:dir(rtl) {
1446
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1447
margin-right: 8px;
1448
}
1449
}
1450
// avoids labels color being overridden, see
1452
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1453
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1454
}
1455
// overflow arrows
1457
> arrow {
1458
min-height: 16px;
1459
min-width: 16px;
1460
padding: 4px;
1461
background-color: $base_color;
1462
color: $secondary_fg_color;
1463
&.top {
1465
margin-top: -4px;
1466
border-bottom: 1px solid $border_color;
1467
border-radius: 2px 2px 0 0;
1468
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1469
}
1470
&.bottom {
1472
margin-bottom: -4px * 3;
1473
border-top: 1px solid $border_color;
1474
border-radius: 0 0 2px 2px;
1475
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1476
}
1477
&:hover {
1479
background-image: image($divider_color);
1480
color: $fg_color;
1481
}
1482
&:disabled {
1484
border-color: transparent;
1485
background-color: transparent;
1486
color: transparent;
1487
// color: $disabled_secondary_fg_color;
1488
}
1489
}
1490
separator { margin: 4px 0; }
1492
}
1493
menuitem {
1495
accelerator { color: $secondary_fg_color; }
1496
}
1497
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1499
// Electron/Atom render all translucent colors in opaque colors.
1500
// It's a very critical issue for this theme and should be fixed by upstream...
1501
.popup:not(.csd) menu {
1502
$opaque_fg_color: if($variant == 'light', $grey_900, $white);
1503
$opaque_divider_color: if($variant == 'light', $grey_300, mix($white, $base_color, percentage(0.12)));
1504
$opaque_disabled_fg_color: if($variant == 'light', $grey_500, mix($white, $base_color, percentage(0.5)));
1505
$opaque_secondary_fg_color: if($variant == 'light', $grey_600, mix($white, $base_color, percentage(0.7)));
1506
menuitem {
1508
color: $opaque_fg_color;
1509
&:hover { background-color: $opaque_divider_color; }
1511
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1513
}
1514
// TODO: not working this, where/how i can set the accelerators?
1516
accelerator { color: $opaque_secondary_fg_color; }
1517
}
1518
/************
1521
* Popovers *
1522
************/
1523
popover.background {
1524
transition: $shadow_transition;
1525
padding: 2px;
1526
box-shadow: $shadow_2; // TODO: this should really have a highlight
1527
background-color: $lighter_bg_color;
1528
&:backdrop { box-shadow: $shadow_1; }
1530
&, .csd & {
1532
border-style: solid;
1533
border-width: 1px;
1534
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1535
border-radius: 2px + 1px;
1536
}
1537
> stack { margin: -4px; } // remove extra padding from menu style popovers
1539
> toolbar { margin: -2px; }
1541
> list,
1543
> .view,
1544
> toolbar {
1545
border-style: none;
1546
box-shadow: none;
1547
background-color: transparent;
1548
}
1549
&.touch-selection,
1551
&.magnifier,
1552
&.osd { @extend %osd; }
1553
// entry { @extend %entry.flat; }
1555
// button.combo { @extend %combo_flat; }
1557
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1559
&.menu button,
1561
button.model {
1562
@extend %simple_flat_button;
1563
min-height: 32px;
1565
padding: 0 8px;
1566
border-radius: 2px;
1567
&:checked { @extend %selected_items; }
1569
}
1570
separator { margin: 4px 0; }
1572
list separator { margin: 0; }
1574
}
1575
/*************
1577
* Notebooks *
1578
*************/
1579
notebook {
1580
> header {
1581
border-width: 1px;
1582
border-color: $border_color;
1583
background-color: $bg_color;
1584
background-clip: border-box;
1585
&.top {
1587
border-bottom-style: solid;
1588
> tabs {
1589
margin-bottom: -1px;
1590
> tab {
1591
&:hover { box-shadow: inset 0 -2px $track_color; }
1593
&:checked { box-shadow: inset 0 -2px $primary_color; }
1595
}
1596
}
1597
}
1598
&.bottom {
1600
border-top-style: solid;
1601
> tabs {
1602
margin-top: -1px;
1603
> tab {
1604
&:hover { box-shadow: inset 0 2px $track_color; }
1606
&:checked { box-shadow: inset 0 2px $primary_color; }
1608
}
1609
}
1610
}
1611
&.left {
1613
border-right-style: solid;
1614
> tabs {
1615
margin-right: -1px;
1616
> tab {
1617
&:hover { box-shadow: inset -2px 0 $track_color; }
1619
&:checked { box-shadow: inset -2px 0 $primary_color; }
1621
}
1622
}
1623
}
1624
&.right {
1626
border-left-style: solid;
1627
> tabs {
1628
margin-left: -1px;
1629
> tab {
1630
&:hover { box-shadow: inset 2px 0 $track_color; }
1632
&:checked { box-shadow: inset 2px 0 $primary_color; }
1634
}
1635
}
1636
}
1637
&.top > tabs > arrow {
1639
@extend %notebook_vert_arrows;
1640
border-top-style: none;
1642
}
1643
&.bottom > tabs > arrow {
1645
@extend %notebook_vert_arrows;
1646
border-bottom-style: none;
1648
}
1649
@at-root %notebook_vert_arrows {
1651
padding-left: 4px;
1652
padding-right: 4px;
1653
&.down {
1655
margin-left: -8px;
1656
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1657
}
1658
&.up {
1660
margin-right: -8px;
1661
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1662
}
1663
}
1664
&.left > tabs > arrow {
1666
@extend %notebook_horz_arrows;
1667
border-left-style: none;
1669
}
1670
&.right > tabs > arrow {
1672
@extend %notebook_horz_arrows;
1673
border-right-style: none;
1675
}
1676
@at-root %notebook_horz_arrows {
1678
padding-top: 4px;
1679
padding-bottom: 4px;
1680
&.down {
1682
margin-top: -8px;
1683
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1684
}
1685
&.up {
1687
margin-bottom: -8px;
1688
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1689
}
1690
}
1691
> tabs > arrow {
1693
@extend %simple_flat_button;
1694
min-height: 16px;
1696
min-width: 16px;
1697
border-radius: 0;
1698
}
1699
tab {
1701
transition: $longer_transition,
1702
background-size 0,
1703
background-image 0;
1704
min-height: $small_size;
1705
min-width: $small_size;
1706
padding: $container_padding 12px;
1707
outline-offset: -6px;
1709
border-width: 1px; // for reorderable tabs
1711
border-color: transparent; //
1712
background-image: radial-gradient(circle farthest-corner at center,
1714
$primary_color 10%,
1715
transparent 0%);
1716
background-repeat: no-repeat;
1717
background-position: center;
1718
background-size: 0% 0%;
1719
color: $secondary_fg_color;
1721
font-weight: 500;
1722
&:hover {
1724
color: $fg_color;
1725
&.reorderable-page {
1727
border-color: $border_color;
1728
background-color: $alt_base_color;
1729
}
1730
}
1731
&:disabled { color: $disabled_secondary_fg_color; }
1733
&:checked {
1735
transition: $longer_transition,
1736
background-size $longer_duration $deceleration_curve,
1737
background-image $longer_duration + $ripple_duration $deceleration_curve;
1738
background-image: radial-gradient(circle farthest-corner at center,
1739
transparent 10%,
1740
transparent 0%);
1741
background-size: 1000% 1000%;
1742
color: $fg_color;
1743
&:disabled { color: $disabled_fg_color; }
1745
&.reorderable-page {
1747
border-color: $border_color;
1748
background-color: $base_color;
1749
}
1750
}
1751
// colors the button like the label, overridden otherwise
1753
button.flat {
1754
@extend %small_button;
1755
&:last-child {
1757
margin-left: $container_padding;
1758
margin-right: $container_padding - 12px;
1759
}
1760
&:first-child {
1762
margin-left: $container_padding - 12px;
1763
margin-right: $container_padding;
1764
}
1765
}
1766
}
1767
&.top,
1769
&.bottom {
1770
tabs {
1771
padding-left: 8px;
1772
padding-right: 8px;
1773
&:not(:only-child) {
1775
&:first-child { margin-left: 0; }
1776
&:last-child { margin-right: 0; }
1777
}
1778
tab {
1780
&.reorderable-page {
1781
margin: 0 -1px;
1782
border-style: none solid;
1783
}
1784
}
1785
}
1786
}
1787
&.left,
1789
&.right {
1790
tabs {
1791
padding-top: 8px;
1792
padding-bottom: 8px;
1793
&:not(:only-child) {
1795
&:first-child { margin-top: 0; }
1796
&:last-child { margin-bottom: 0; }
1797
}
1798
tab {
1800
&.reorderable-page {
1801
margin: -1px 0;
1802
border-style: solid none;
1803
}
1804
}
1805
}
1806
}
1807
}
1808
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1810
background-color: $base_color;
1811
entry:not(.search),
1813
spinbutton:not(.vertical) { @extend %entry.flat; }
1814
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1816
button.combo { @extend %combo_flat; }
1818
}
1819
}
1820
/**************
1823
* Scrollbars *
1824
**************/
1825
scrollbar {
1826
$_slider_min_length: 24px;
1827
// disable steppers
1829
@at-root * {
1830
-GtkScrollbar-has-backward-stepper: false;
1831
-GtkScrollbar-has-forward-stepper: false;
1832
}
1833
transition: $longer_transition;
1835
background-color: $base_color;
1836
background-clip: $extra_background_clip;
1837
// scrollbar border
1839
&.top { border-bottom: 1px solid $border_color; }
1840
&.bottom { border-top: 1px solid $border_color; }
1841
&.left { border-right: 1px solid $border_color; }
1842
&.right { border-left: 1px solid $border_color; }
1843
// slider
1845
slider {
1846
transition: $shorter_transition, margin 0, border-width 0;
1847
min-width: 8px;
1848
min-height: 8px;
1849
border: 4px solid transparent;
1850
border-radius: $circular_radius;
1851
background-clip: padding-box;
1852
background-color: $tertiary_fg_color;
1853
&:hover { background-color: $secondary_fg_color; }
1855
&:active { background-color: $fg_color; }
1857
&:disabled { background-color: $disabled_secondary_fg_color; }
1859
}
1860
&.fine-tune {
1862
slider {
1863
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1864
min-width: 4px;
1865
min-height: 4px;
1866
}
1867
&.horizontal slider { margin: 2px 0; }
1869
&.vertical slider { margin: 0 2px; }
1871
}
1872
&.overlay-indicator {
1874
&:not(.dragging):not(.hovering) {
1875
border-color: transparent;
1876
background-color: transparent;
1877
slider {
1879
min-width: 4px;
1880
min-height: 4px;
1881
margin: 4px - 1px;
1882
border: 1px solid rgba($base_color, $lower_opacity);
1883
}
1884
button {
1886
min-width: 4px;
1887
min-height: 4px;
1888
margin: 4px - 1px;
1889
border: 1px solid rgba($base_color, $lower_opacity);
1890
border-radius: $circular_radius;
1891
background-color: $tertiary_fg_color;
1892
background-clip: padding-box;
1893
-gtk-icon-source: none;
1894
&:disabled { background-color: $disabled_secondary_fg_color; }
1896
}
1897
&.horizontal {
1899
slider { min-width: $_slider_min_length; }
1900
button { min-width: 8px; }
1902
}
1903
&.vertical {
1905
slider { min-height: $_slider_min_length; }
1906
button { min-height: 8px; }
1908
}
1909
}
1910
&.dragging,
1912
&.hovering { background-color: rgba($base_color, $higher_opacity); }
1913
}
1914
&.horizontal slider { min-width: $_slider_min_length; }
1916
&.vertical slider { min-height: $_slider_min_length; }
1918
// button styling
1920
button {
1921
@extend %simple_flat_button;
1922
min-width: 16px;
1924
min-height: 16px;
1925
padding: 0;
1926
border-radius: 0;
1927
}
1928
// button icons
1930
&.vertical {
1931
button {
1932
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1933
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1935
}
1936
}
1937
&.horizontal {
1939
button {
1940
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1941
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1943
}
1944
}
1945
}
1946
/**********
1949
* Switch *
1950
**********/
1951
switch {
1952
transition: $longer_transition;
1953
margin: $container_padding 0;
1954
padding: 0 2px;
1955
border: 4px solid transparent;
1956
border-radius: $circular_radius;
1957
background-color: $track_color;
1958
background-clip: padding-box;
1959
font-size: 0;
1960
&:disabled { background-color: $divider_color; }
1962
&:checked {
1964
background-color: rgba($accent_color, 0.5);
1965
&:disabled { background-color: rgba($accent_color, 0.3); }
1967
}
1968
slider {
1970
transition: $longer_transition, $shadow_transition;
1971
min-width: 20px;
1972
min-height: 20px;
1973
margin: -3px -2px;
1974
border-radius: $circular_radius;
1975
-gtk-outline-radius: $circular_radius;
1976
box-shadow: $shadow_1;
1977
background-color: $base_color;
1978
}
1979
&:hover slider { box-shadow: $shadow_2; }
1981
&:checked slider {
1983
transition: $longer_transition, $shadow_transition, background-image 0, background-color 0.00001s $longer_duration;
1984
animation: needs_attention $longer_duration $deceleration_curve;
1985
background-color: $accent_color;
1986
color: $inverse_fg_color;
1987
}
1988
&:disabled slider { background-color: $alt_base_color; }
1990
&:checked:disabled slider { animation: none; }
1992
row:selected & {
1994
}
1995
}
1996
/*************************
1999
* Check and Radio items *
2000
*************************/
2001
// draw regular check and radio items using our PNG assets
2002
// all assets are rendered from assets.svg. never add pngs directly
2003
// selection-mode
2005
.view.content-view.check:not(list),
2006
.content-view .tile check:not(list) {
2007
min-height: 40px;
2008
min-width: 40px;
2009
margin: 0;
2010
padding: 0;
2011
box-shadow: none;
2012
background-color: transparent;
2013
background-image: none;
2014
-gtk-icon-shadow: $shadow_1;
2015
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2017
@each $s, $as in ('', '-unchecked'),
2019
(':checked', '-checked') {
2020
&#{$s} {
2021
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2022
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2023
}
2024
}
2025
}
2026
checkbutton.text-button,
2028
radiobutton.text-button {
2029
// this is for a nice focus on check and radios text
2030
padding: 2px;
2031
outline-offset: 0;
2032
label:not(:only-child) { margin: 0 4px; }
2034
}
2035
check,
2037
radio {
2038
min-height: 24px;
2039
min-width: 24px;
2040
margin: -($large_size - 24px) / 2;
2041
padding: ($large_size - 24px) / 2;
2042
@extend %simple_flat_button;
2044
@extend %circular_button;
2046
&:checked, &:indeterminate {
2048
color: $accent_color;
2049
&:disabled { color: $disabled_accent_color; }
2051
}
2052
// &:only-child { margin: -12px; }
2054
row:selected &:not(:checked):not(:indeterminate) {
2056
color: $secondary_inverse_fg_color;
2057
&:hover, &:active { color: $inverse_fg_color; }
2059
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2061
}
2062
popover & {
2064
&, &:hover, &:disabled {
2065
box-shadow: none;
2066
background-image: none;
2067
}
2068
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2070
&.left:dir(rtl) {
2072
margin-left: -16px;
2073
margin-right: -8px;
2074
}
2075
&.right:dir(ltr) {
2077
margin-left: -8px;
2078
margin-right: -16px;
2079
}
2080
}
2081
menu menuitem & {
2083
transition: none;
2084
min-height: 16px;
2085
min-width: 16px;
2086
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2087
padding: 0;
2088
&:dir(ltr) { margin-right: 8px; }
2090
&:dir(rtl) { margin-left: 8px; }
2092
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2094
&, &:hover, &:disabled {
2096
box-shadow: none;
2097
// color: inherit;
2098
}
2099
}
2100
}
2101
%check,
2103
check {
2104
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2105
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2106
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2108
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2109
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2111
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2112
}
2113
%radio,
2115
radio {
2116
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2117
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2118
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2120
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2121
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2123
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2124
border-image-slice: $large_size / 2px;
2126
border-image-width: $large_size / 2;
2127
$radio_indicator: 10px / $large_size / 2;
2129
& {
2131
border-image-source: -gtk-gradient(radial,
2132
center center, 0,
2133
center center, 0.001,
2134
to($accent_color),
2135
to(transparent));
2136
}
2137
&:checked:not(:indeterminate) {
2139
border-image-source: -gtk-gradient(radial,
2140
center center, 0,
2141
center center, $radio_indicator,
2142
to($accent_color),
2143
to(transparent));
2144
}
2145
&:checked:not(:indeterminate):disabled {
2147
border-image-source: -gtk-gradient(radial,
2148
center center, 0,
2149
center center, $radio_indicator,
2150
to($disabled_accent_color),
2151
to(transparent));
2152
}
2153
}
2154
%small_check,
2156
menu menuitem check {
2157
& {
2158
border-radius: 2px;
2159
-gtk-outline-radius: 2px;
2160
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")),
2161
-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2162
}
2163
&:checked {
2165
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")),
2166
-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2167
}
2168
&:indeterminate {
2170
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")),
2171
-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2172
}
2173
}
2174
%small_radio,
2176
menu menuitem radio {
2177
& {
2178
border-image: none;
2179
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")),
2180
-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2181
}
2182
&:checked {
2184
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")),
2185
-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2186
}
2187
&:indeterminate {
2189
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")),
2190
-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2191
}
2192
}
2193
// ANIMATION:
2195
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2196
// the transformation is set on the active state and it get reset on the checked state.
2197
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2198
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2200
check:not(:checked):indeterminate:active,
2202
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2203
check:not(:checked),
2205
radio:not(:checked) {
2206
& {
2207
transition: $longer_transition,
2208
background-size $ripple_duration $deceleration_curve,
2209
background-image $ripple_duration * 2 $deceleration_curve,
2210
-gtk-icon-transform 0;
2211
}
2212
&:active {
2214
transition: $longer_transition,
2215
background-size 0,
2216
background-image 0,
2217
-gtk-icon-transform 0;
2218
}
2219
menu menuitem & { transition: none; }
2221
}
2222
treeview.view check,
2224
treeview.view radio {
2225
padding: 0;
2226
&:hover {
2228
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2229
&:disabled { box-shadow: none; }
2231
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2233
}
2234
& {
2236
color: $secondary_fg_color;
2237
&:hover, &:active { color: $fg_color; }
2239
&:disabled { color: $disabled_secondary_fg_color; }
2241
&:checked, &:indeterminate { color: $accent_color; }
2243
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2245
}
2246
&:selected {
2248
color: $secondary_inverse_fg_color;
2249
&:hover, &:active { color: $inverse_fg_color; }
2251
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2253
&:checked, &:indeterminate { color: $accent_color; }
2255
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2257
}
2258
}
2259
treeview.view radio:checked {
2261
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2262
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2263
border-image: none;
2264
}
2265
/************
2268
* GtkScale *
2269
************/
2270
scale {
2271
// sizing
2272
$_marks_length: 8px;
2273
$_marks_distance: 8px;
2274
$trough_size: 2px;
2276
$slider_size: 24px;
2278
$marks_slider_size: 30px;
2279
$slider_margin: -($slider_size - $trough_size) / 2;
2281
$marks_slider_margin: -($marks_slider_size - $trough_size) - $slider_margin;
2282
$color_slider_margin: -($slider_size) / 2;
2284
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2285
min-height: $medium_size - $slider_size;
2287
min-width: $medium_size - $slider_size;
2288
padding: ($slider_size / 2);
2289
* { transition: $longer_transition; }
2291
// the slider is inside the trough, so to have make it bigger there's a negative margin
2293
slider {
2294
min-height: $slider_size;
2295
min-width: $slider_size;
2296
margin: $slider_margin;
2297
}
2298
// the backing bit
2300
trough {
2301
outline-offset: 2px;
2302
background-color: $track_color;
2303
&:disabled { background-color: $divider_color; }
2305
}
2306
// the colored part of the backing bit
2308
highlight {
2309
background-color: $accent_color;
2310
&:disabled { background-color: transparent; }
2312
}
2313
// this is another differently styled part of the backing bit, the most relevant use case is for example
2315
// in media player to indicate how much video stream as been cached
2316
fill {
2317
background-color: $track_color;
2318
&:disabled { background-color: transparent; }
2320
}
2321
slider {
2323
transition: all $shorter_duration $standard_curve;
2324
// border-radius: 100%;
2325
// background-color: $accent_color;
2326
background-repeat: no-repeat;
2327
background-position: center;
2328
@each $s, $as in ('', ''),
2330
(':disabled', '-disabled') {
2331
&#{$s} {
2332
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2333
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2335
}
2336
}
2337
background-size: calc(100% - 10px);
2339
&:hover { background-size: calc(100% - 8px); }
2341
&:active { background-size: calc(100% - 6px); }
2343
}
2344
// click-and-hold the slider to activate
2346
&.fine-tune {
2347
// to make the slider shrink in fine-tune mode
2348
slider { background-size: calc(100% - 12px); }
2349
}
2350
value { color: $tertiary_fg_color; }
2352
marks {
2354
color: $track_color;
2355
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2357
(bottom, bottom, top),
2358
(top, left, right),
2359
(bottom, right, left) {
2360
&.#{$marks_class} {
2361
margin-#{$marks_margin}: $_marks_distance;
2362
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2363
}
2364
}
2365
}
2366
&.horizontal {
2368
indicator {
2369
min-height: $_marks_length;
2370
min-width: 1px;
2371
}
2372
}
2373
&.vertical {
2375
indicator {
2376
min-height: 1px;
2377
min-width: $_marks_length;
2378
}
2379
}
2380
// *WARNING* scale with marks madness following
2382
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2384
('vertical', 'vert') {
2385
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2386
('marks-after', 'marks-after:not(.marks-before)') {
2387
&.#{$dir_class}.#{$marks_class} {
2388
slider {
2389
@each $state, $state_infix in ('', ''),
2390
(':disabled', '-disabled') {
2391
&#{$state} {
2392
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2393
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2395
}
2396
}
2397
@if $dir_class == 'horizontal' {
2399
min-height: $marks_slider_size;
2400
min-width: $slider_size;
2401
@if $marks_infix == 'marks-before' {
2403
margin-top: $marks_slider_margin;
2404
background-position: center calc(100% - 5px);
2406
&:hover { background-position: center calc(100% - 4px); }
2408
&:active { background-position: center calc(100% - 3px); }
2410
}
2411
@if $marks_infix == 'marks-after' {
2413
margin-bottom: $marks_slider_margin;
2414
background-position: center calc(5px);
2416
&:hover { background-position: center calc(4px); }
2418
&:active { background-position: center calc(3px); }
2420
}
2421
}
2422
@if $dir_class == 'vertical' {
2424
min-height: $slider_size;
2425
min-width: $marks_slider_size;
2426
@if $marks_infix == 'marks-before' {
2428
margin-left: $marks_slider_margin;
2429
background-position: calc(5px) center;
2431
&:hover { background-position: calc(4px) center; }
2433
&:active { background-position: calc(3px) center; }
2435
}
2436
@if $marks_infix == 'marks-after' {
2438
margin-right: $marks_slider_margin;
2439
background-position: calc(100% - 5px) center;
2441
&:hover { background-position: calc(100% - 4px) center; }
2443
&:active { background-position: calc(100% - 3px) center; }
2445
}
2446
}
2447
}
2448
&.fine-tune slider {
2450
@if $dir_class == 'horizontal' {
2451
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2452
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2454
}
2455
@if $dir_class == 'vertical' {
2457
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2458
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2460
}
2461
}
2462
}
2463
}
2464
}
2465
&.color {
2467
min-height: 0;
2468
min-width: 0;
2469
&.horizontal {
2471
padding: 0 0 12px 0;
2472
slider {
2474
&:dir(ltr), &:dir(rtl) { // specificity bump
2475
margin-bottom: $color_slider_margin;
2476
margin-top: $color_marks_slider_margin;
2477
}
2478
}
2479
}
2480
&.vertical {
2482
&:dir(ltr) {
2483
padding: 0 0 0 12px;
2484
slider {
2486
margin-left: $color_slider_margin;
2487
margin-right: $color_marks_slider_margin;
2488
}
2489
}
2490
&:dir(rtl) {
2492
padding: 0 12px 0 0;
2493
slider {
2495
margin-right: $color_slider_margin;
2496
margin-left: $color_marks_slider_margin;
2497
}
2498
}
2499
}
2500
}
2501
}
2502
/*****************
2505
* Progress bars *
2506
*****************/
2507
progressbar {
2508
// sizing
2509
&.horizontal {
2510
trough,
2511
progress { min-height: $bar_size; }
2512
}
2513
&.vertical {
2515
trough,
2516
progress { min-width: $bar_size; }
2517
}
2518
// FIXME: insensitive state missing and some other state should be set probably
2520
color: $tertiary_fg_color;
2521
font-size: smaller;
2522
trough { background-color: rgba($primary_color, $lower_opacity); }
2524
progress { background-color: $primary_color; }
2526
&.osd { // progressbar.osd used for epiphany page loading progress
2528
// min-width: $bar_size;
2529
// min-height: $bar_size;
2530
// background-color: transparent;
2531
// trough { background-color: transparent; }
2533
// progress { background-color: $primary_color; }
2535
}
2536
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2538
}
2539
/*************
2542
* Level Bar *
2543
*************/
2544
levelbar {
2545
block {
2546
min-width: $medium_size;
2547
min-height: $bar_size;
2548
}
2549
&.vertical block {
2551
min-width: $bar_size;
2552
min-height: $medium_size;
2553
}
2554
// imitate the entry style
2556
trough {
2557
padding: 2px;
2558
border-radius: 2px;
2559
box-shadow: $shadow_1;
2560
background-color: $base_color;
2561
&:disabled { background-color: $alt_base_color; }
2563
}
2564
&.horizontal.discrete {
2566
block { margin: 0 1px; }
2567
trough { padding: 2px 1px; }
2569
}
2570
&.vertical.discrete {
2572
block { margin: 1px 0; }
2573
trough { padding: 1px 2px; }
2575
}
2576
block {
2578
&.low { background-color: $warning_color; }
2579
&.high,
2581
&:not(.empty) { background-color: $primary_color; }
2582
&.full { background-color: $success_color; }
2584
&.empty { background-color: $divider_color; }
2586
}
2587
}
2588
/****************
2591
* Print dialog *
2592
*****************/
2593
printdialog {
2594
paper {
2595
padding: 0;
2596
border: 1px solid $border_color;
2597
background-color: $base_color;
2598
color: $fg_color;
2599
}
2600
.dialog-action-box { margin: 12px; }
2602
}
2603
/**********
2606
* Frames *
2607
**********/
2608
frame > border,
2609
.frame {
2610
margin: 0;
2611
padding: 0;
2612
border: 1px solid $border_color;
2613
border-radius: 0;
2614
box-shadow: none;
2615
&.flat { border-style: none; }
2617
}
2618
frame.flat > border { @extend .frame.flat; } // for backporting
2620
actionbar > revealer > box {
2622
padding: $container_padding;
2623
border-top: 1px solid $border_color;
2624
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2626
}
2627
scrolledwindow {
2629
viewport.frame { // avoid double borders when viewport inside scrolled window
2630
border-style: none;
2631
}
2632
// This is used when content is touch-dragged past boundaries.
2634
// draws a box on top of the content, the size changes programmatically.
2635
@at-root overshoot {
2636
&.top { @include overshoot(top); }
2637
&.bottom { @include overshoot(bottom); }
2639
&.left { @include overshoot(left); }
2641
&.right { @include overshoot(right); }
2643
}
2644
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2646
@at-root undershoot {
2647
&.top { @include undershoot(top); }
2648
&.bottom { @include undershoot(bottom); }
2650
&.left { @include undershoot(left); }
2652
&.right { @include undershoot(right); }
2654
}
2655
@at-root junction { // the small square between two scrollbars
2657
border-style: solid none none solid;
2658
border-width: 1px;
2659
border-color: $border_color;
2660
background-color: $base_color;
2661
&:dir(rtl) { border-style: solid solid none none; }
2663
}
2664
}
2665
// vbox and hbox separators
2667
separator {
2668
min-width: 1px;
2669
min-height: 1px;
2670
background-color: $border_color;
2671
}
2672
%hide_separators {
2674
min-width: 0;
2675
min-height: 0;
2676
background-color: transparent;
2677
}
2678
/*********
2681
* Lists *
2682
*********/
2683
list {
2684
border-color: $border_color;
2685
background-color: $base_color;
2686
row { padding: 2px; }
2688
}
2689
// FIXME
2691
$row_transition: $longer_transition, background-color 0, color 0;
2692
row {
2694
&.activatable {
2695
transition: $row_transition,
2696
background-size $ripple_duration $deceleration_curve,
2697
background-image $ripple_duration * 2 $deceleration_curve;
2698
box-shadow: inset 0 0 0 9999px transparent;
2699
background-image: radial-gradient(circle farthest-corner at center,
2700
transparent 10%,
2701
transparent 0%);
2702
background-repeat: no-repeat;
2703
background-position: center;
2704
background-size: 1000% 1000%;
2705
&:hover {
2707
transition: $row_transition,
2708
box-shadow 0,
2709
background-size $ripple_duration $deceleration_curve,
2710
background-image $ripple_duration * 2 $deceleration_curve;
2711
box-shadow: inset 0 0 0 9999px $row_fill_color;
2712
}
2713
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2715
&:active {
2716
transition: $row_transition,
2717
background-size 0,
2718
background-image 0;
2719
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2720
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2721
background-image: radial-gradient(circle farthest-corner at center,
2722
$semi_fill_color 10%,
2723
transparent 0%);
2724
background-size: 0% 0%;
2725
}
2726
}
2727
&:selected { @extend %selected_items; }
2729
}
2730
/*********************
2733
* App Notifications *
2734
*********************/
2735
.app-notification {
2736
@extend %osd;
2737
@extend toolbar.osd;
2739
margin: 8px;
2741
button { @extend %button_basic.flat; }
2743
&.frame,
2745
border { border-style: none; }
2746
}
2747
/*************
2750
* Expanders *
2751
*************/
2752
expander {
2753
arrow {
2754
transition: all $shorter_duration $standard_curve;
2755
min-width: 16px;
2756
min-height: 16px;
2757
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2758
-gtk-icon-transform: rotate(-90deg);
2759
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2761
&:checked { -gtk-icon-transform: unset; }
2763
color: $secondary_fg_color;
2765
&:hover, &:active { color: $fg_color; }
2767
&:disabled { color: $disabled_secondary_fg_color; }
2769
&:selected {
2771
color: $secondary_inverse_fg_color;
2772
&:hover, &:active { color: $inverse_fg_color; }
2774
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2776
}
2777
}
2778
}
2779
/************
2782
* Calendar *
2783
************/
2784
calendar {
2785
padding: 1px;
2786
border: 1px solid $border_color;
2787
color: $fg_color;
2788
&:disabled { color: $disabled_fg_color; }
2790
&:selected {
2792
@extend %selected_items;
2793
border-radius: 2px + 1px;
2795
}
2796
&.header {
2798
border-style: none none solid;
2799
border-radius: 0;
2800
}
2801
&.button { @extend %simple_flat_button; }
2803
&.highlight {
2805
color: $secondary_fg_color;
2806
font-weight: 500;
2807
}
2808
&:indeterminate { color: $disabled_secondary_fg_color; }
2810
}
2811
/***********
2814
* Dialogs *
2815
***********/
2816
messagedialog { // Message Dialog styling
2817
&.background { background-color: $lighter_bg_color; }
2818
.titlebar {
2820
min-height: $small_size;
2821
border-style: none;
2822
box-shadow: inset 0 1px $highlight_color;
2823
background-color: $lighter_bg_color;
2824
color: $fg_color;
2825
&:backdrop { color: $secondary_fg_color; }
2827
}
2828
&.csd { // rounded bottom border styling for csd version
2830
&.background {
2831
// bigger radius for better antialiasing
2832
border-bottom-left-radius: 2px;
2833
border-bottom-right-radius: 2px;
2834
}
2835
.dialog-action-area button {
2837
padding: 8px 16px;
2838
border-top: 1px solid $border_color;
2839
border-radius: 0;
2840
@extend %simple_flat_button;
2842
&:first-child { border-bottom-left-radius: 2px; }
2844
&:last-child { border-bottom-right-radius: 2px; }
2846
}
2847
}
2848
entry { @extend %entry.flat; }
2850
}
2851
filechooser {
2853
.dialog-action-box { border-top: 1px solid $border_color; }
2854
#pathbarbox {
2856
border-bottom: 1px solid $border_color;
2857
background-color: $bg_color;
2858
}
2859
}
2860
filechooserbutton:drop(active) {
2862
box-shadow: none;
2863
}
2864
/***********
2867
* Sidebar *
2868
***********/
2869
.sidebar {
2870
border-style: none;
2871
background-color: $lighter_bg_color;
2872
@at-root %sidebar_left,
2874
&:dir(ltr),
2875
&.left,
2876
&.left:dir(rtl) {
2877
border-right: 1px solid $border_color;
2878
border-left-style: none;
2879
}
2880
@at-root %sidebar_right,
2882
&:dir(rtl),
2883
&.right {
2884
border-left: 1px solid $border_color;
2885
border-right-style: none;
2886
}
2887
list { background-color: transparent; }
2889
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2891
}
2892
stacksidebar {
2894
&.sidebar {
2895
&:dir(ltr),
2896
&.left,
2897
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2898
&:dir(rtl),
2900
&.right { list { @extend %sidebar_right; }}
2901
}
2902
row {
2904
padding: 10px 4px;
2905
> label {
2907
padding-left: 6px;
2908
padding-right: 6px;
2909
}
2910
&.needs-attention > label { @extend %needs_attention; }
2912
}
2913
}
2914
/****************
2917
* File chooser *
2918
****************/
2919
placessidebar {
2920
> viewport.frame { border-style: none; }
2921
list { padding: (4px - 3px) 0 4px; }
2923
row {
2925
// Needs overriding of the GtkListBoxRow padding
2926
min-height: 32px;
2927
margin: -1px 0; // Remove unknown margins
2928
padding: 0;
2929
// Using margins/padding directly in the SidebarRow
2931
// will make the animation of the new bookmark row jump
2932
> revealer { padding: 0 12px; }
2933
&:selected { color: $inverse_fg_color; }
2935
&:disabled { color: $disabled_fg_color; }
2937
image.sidebar-icon {
2939
color: $secondary_fg_color; // dim the device icons
2940
&:dir(ltr) { padding-right: 8px; }
2942
&:dir(rtl) { padding-left: 8px; }
2943
}
2944
&:selected image.sidebar-icon { color: $secondary_inverse_fg_color; }
2946
label.sidebar-label {
2948
&:dir(ltr) { padding-right: 2px; }
2949
&:dir(rtl) { padding-left: 2px; }
2950
}
2951
@at-root button.sidebar-button {
2953
@extend %simple_flat_button;
2954
@extend %small_button;
2956
row:selected & {
2958
}
2959
}
2960
&.sidebar-placeholder-row {
2962
min-height: 2px;
2963
padding: 0 8px;
2964
background-image: image($accent_color);
2965
background-clip: content-box;
2966
}
2967
&.sidebar-new-bookmark-row { color: $accent_color; }
2969
&:drop(active):not(:disabled) {
2971
box-shadow: inset 0 0 0 2px $accent_color;
2972
&:selected {
2974
// background-color: $accent_color;
2975
// color: $inverse_fg_color;
2976
}
2977
}
2978
}
2979
}
2980
placesview {
2982
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2983
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2985
// this selects the "connect to server" label
2987
> actionbar > revealer > box > label {
2988
padding-left: 8px;
2989
padding-right: 8px;
2990
}
2991
}
2992
/*********
2995
* Paned *
2996
*********/
2997
paned {
2998
> separator {
2999
min-width: 1px;
3000
min-height: 1px;
3001
-gtk-icon-source: none; // defeats the ugly default handle decoration
3002
border-style: none; // just to be sure
3003
background-color: transparent;
3004
// workaround, using background istead of a border since the border will get rendered twice (?)
3005
background-image: image($border_color);
3006
background-size: 1px 1px;
3007
background-clip: content-box; // avoids borders image being rendered twice (?)
3008
&.wide {
3010
min-width: 6px;
3011
min-height: 6px;
3012
background-color: $bg_color;
3013
background-image: image($border_color), image($border_color);
3014
background-size: 1px 1px, 1px 1px;
3015
}
3016
}
3017
&.horizontal > separator {
3019
background-repeat: repeat-y;
3020
&:dir(ltr) {
3022
margin: 0 -8px 0 0;
3023
padding: 0 8px 0 0;
3024
background-position: left;
3025
}
3026
&:dir(rtl) {
3028
margin: 0 0 0 -8px;
3029
padding: 0 0 0 8px;
3030
background-position: right;
3031
}
3032
&.wide {
3034
margin: 0;
3035
padding: 0;
3036
background-repeat: repeat-y, repeat-y;
3037
background-position: left, right;
3038
}
3039
}
3040
&.vertical > separator {
3042
margin: 0 0 -8px 0;
3043
padding: 0 0 8px 0;
3044
background-repeat: repeat-x;
3045
background-position: top;
3046
&.wide {
3048
margin: 0;
3049
padding: 0;
3050
background-repeat: repeat-x, repeat-x;
3051
background-position: bottom, top;
3052
}
3053
}
3054
}
3055
/**************
3058
* GtkInfoBar *
3059
**************/
3060
infobar {
3061
border-style: none;
3062
&.info { background-color: $info_bg_color; }
3064
&.question { background-color: $question_bg_color; }
3066
&.warning { background-color: $warning_bg_color; }
3068
&.error { background-color: $error_bg_color; }
3070
&.info,
3072
&.question,
3073
&.warning,
3074
&.error {
3075
> label, & { color: $inverse_fg_color; }
3076
button { @extend %button_selected; }
3078
selection {}
3080
*:link { @extend %link_selected; }
3082
}
3083
}
3084
/************
3087
* Tooltips *
3088
************/
3089
tooltip {
3090
&.background {
3091
// background-color needs to be set this way otherwise it gets drawn twice
3092
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3093
box-shadow: inset 0 1px $highlight_color;
3094
background-color: rgba($base_color, $higher_opacity);
3095
}
3096
// @extend %osd;
3098
// padding: 4px; /* not working */
3100
border-radius: 2px;
3101
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3102
&:not(.csd):not(.unity-csd) {
3104
border: 1px solid $border_color;
3105
border-radius: 2px + 1px;
3106
background-clip: $extra_background_clip;
3107
}
3108
// FIXME: we need a border or tooltips vanish on black background.
3110
decoration { background-color: transparent; }
3111
label {
3113
// tooltip label already seems to have 6px margins
3114
min-height: 32px - 6px * 2;
3115
padding: 0 8px - 6px;
3116
}
3117
* {
3119
// workaround for Eclipse.
3120
// do not include any declaration here.
3121
// padding: 0;
3122
// background-color: transparent;
3123
// color: inherit;
3124
}
3125
}
3126
/*****************
3129
* Color Chooser *
3130
*****************/
3131
colorswatch {
3132
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3133
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3134
// applied to the overlay box.
3135
// base color corners rounding
3137
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3138
// sports a bigger radius.
3139
// nth-child is needed by the custom color strip.
3140
&.top {
3142
border-top-left-radius: $material_radius + 0.5px;
3143
border-top-right-radius: $material_radius + 0.5px;
3144
overlay {
3146
border-top-left-radius: $material_radius;
3147
border-top-right-radius: $material_radius;
3148
}
3149
}
3150
&.bottom {
3152
border-bottom-left-radius: $material_radius + 0.5px;
3153
border-bottom-right-radius: $material_radius + 0.5px;
3154
overlay {
3156
border-bottom-left-radius: $material_radius;
3157
border-bottom-right-radius: $material_radius;
3158
}
3159
}
3160
&.left,
3162
&:first-child:not(.top) {
3163
border-top-left-radius: $material_radius + 0.5px;
3164
border-bottom-left-radius: $material_radius + 0.5px;
3165
overlay {
3167
border-top-left-radius: $material_radius;
3168
border-bottom-left-radius: $material_radius;
3169
}
3170
}
3171
&.right,
3173
&:last-child:not(.bottom) {
3174
border-top-right-radius: $material_radius + 0.5px;
3175
border-bottom-right-radius: $material_radius + 0.5px;
3176
overlay {
3178
border-top-right-radius: $material_radius;
3179
border-bottom-right-radius: $material_radius;
3180
}
3181
}
3182
&.dark overlay { color: $light_fg_color; }
3184
&.light overlay { color: $dark_fg_color; }
3186
&.dark { color: $light_fg_color; } // for focus ring
3188
&.light { color: $dark_fg_color; } // for focus ring
3190
&:drop(active) {
3192
box-shadow: none;
3193
&.light overlay {
3195
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3196
}
3197
&.dark overlay {
3199
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3200
}
3201
}
3202
overlay {
3204
transition: $shadow_transition;
3205
box-shadow: $shadow_1;
3206
&:hover { box-shadow: $shadow_2; }
3208
}
3209
&#add-color-button {
3211
border-radius: $material_radius $material_radius 0 0;
3212
color: $light_fg_color; // for focus ring
3213
&:only-child { border-radius: $material_radius; }
3215
overlay {
3217
background-image: linear-gradient(to right,
3218
$error_bg_color 25%,
3219
$warning_bg_color 25%, $warning_bg_color 50%,
3220
$info_bg_color 50%, $info_bg_color 75%,
3221
$question_bg_color 75%);
3222
color: $light_fg_color;
3223
}
3224
}
3225
&:disabled {
3227
opacity: $disabled_opacity;
3228
overlay { box-shadow: none; }
3230
}
3231
row:selected & {
3233
}
3234
&#editor-color-sample {
3236
border-radius: $material_radius + 0.5px;
3237
overlay { border-radius: $material_radius; }
3239
// overlay:hover { box-shadow: $shadow_1; }
3241
}
3242
}
3243
// colorscale popup
3245
colorchooser .popover.osd {
3246
transition: $shadow_transition;
3247
border-radius: 2px;
3248
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3249
background-color: $base_color;
3250
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3252
spinbutton:not(.vertical) { @extend %entry.flat; }
3254
}
3255
/********
3258
* Misc *
3259
********/
3260
// content view (grid/list)
3261
.content-view {
3262
background-color: $bg_color;
3263
// &:hover { -gtk-icon-effect: highlight; }
3265
rubberband, .rubberband { @extend rubberband; }
3267
}
3268
.scale-popup {
3270
.osd & { @extend %osd; }
3271
.osd & button.flat { // FIXME: quick hack, redo properly
3273
}
3274
button { // +/- buttons on GtkVolumeButton popup
3276
}
3277
}
3278
/**********************
3281
* Window Decorations *
3282
**********************/
3283
decoration {
3284
transition: $shadow_transition;
3285
border-radius: 2px 2px 0 0;
3286
box-shadow: $shadow_4, 0 16px 16px transparent;
3287
// FIXME rationalize shadows
3289
// this is used for the resize cursor area
3291
margin: 8px;
3292
&:backdrop {
3294
// the transparent shadow here is to enforce that the shadow extents don't
3295
// change when we go to backdrop, to prevent jumping windows.
3296
// The biggest shadow should be in the same order then in the active state
3297
// or the jumping will happen during the transition.
3298
box-shadow: $shadow_2, 0 16px 16px transparent;
3299
}
3300
.maximized &,
3302
.fullscreen &,
3303
.tiled & { border-radius: 0; }
3304
.popup & { box-shadow: none; }
3306
// server-side decorations as used by mutter
3308
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3309
.csd.popup & {
3311
border-radius: 2px;
3312
box-shadow: $shadow_2;
3313
}
3314
tooltip.csd & {
3316
border-radius: 2px;
3317
box-shadow: $shadow_2;
3318
}
3319
messagedialog.csd & {
3321
border-radius: 2px;
3322
// box-shadow: $shadow_4, 0 16px 16px transparent;
3323
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3325
}
3326
.solid-csd & {
3328
margin: 0;
3329
// padding: 4px;
3330
border-radius: 0;
3331
box-shadow: none;
3332
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3333
background-color: $titlebar_bg_color;
3334
}
3335
}
3336
// Window Close button
3338
button.titlebutton {
3339
// @extend %simple_flat_button;
3340
@extend %circular_button;
3342
.selection-mode & {
3344
}
3345
}
3346
// catch all extend :)
3349
%selected_items {
3351
background-color: $primary_color;
3352
@at-root %nobg_selected_items, & {
3354
color: $inverse_fg_color;
3355
&:disabled { color: $disabled_inverse_fg_color; }
3357
}
3358
}
3359
.monospace { font-family: monospace; }
3361
/**********************
3364
* Touch Copy & Paste *
3365
**********************/
3366
// touch selection handlebars for the Popover.osd above
3367
cursor-handle {
3368
border-radius: $circular_radius;
3369
background-color: $accent_color;
3370
background-image: none;
3371
&.top:dir(ltr), &.bottom:dir(rtl) {
3373
padding-left: 6px;
3374
border-top-right-radius: 0;
3375
}
3376
&.bottom:dir(ltr), &.top:dir(rtl) {
3378
padding-right: 6px;
3379
border-top-left-radius: 0;
3380
}
3381
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3383
-GtkWidget-text-handle-width: 24;
3384
-GtkWidget-text-handle-height: 30;
3385
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3387
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3388
url('#{$_url}@2.png'));
3389
}
3390
}
3391
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3393
// shortcut window keys
3395
.keycap {
3396
min-width: 28px - 8px * 2;
3397
min-height: 28px - 2px;
3398
margin-top: 2px;
3399
padding-bottom: 2px;
3400
padding-left: 8px;
3401
padding-right: 8px;
3402
border: solid 1px $border_color;
3404
border-radius: 2px + 1px;
3405
box-shadow: inset 0 -2px $border_color;
3406
background-color: $base_color;
3407
color: $fg_color;
3408
font-size: smaller;
3409
}
3410
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3412
transition: $longer_transition;
3413
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3414
caret-color: $accent_color;
3415
}
3416
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3418
stackswitcher button.circular,
3420
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3421
min-width: $medium_size;
3422
min-height: $medium_size;
3423
padding: 0;
3424
}
3425