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
notebook:focus tab,
37
*:focus { outline-color: $fill_color; }
38
/***************
41
* Base States *
42
***************/
43
.background {
44
background-color: $bg_color;
45
color: $fg_color;
46
}
47
/*
49
These wildcard seems unavoidable, need to investigate.
50
Wildcards are bad and troublesome, use them with care,
51
or better, just don't.
52
Everytime a wildcard is used a kitten dies, painfully.
53
*/
54
*:disabled { -gtk-icon-effect: dim; }
56
.gtkstyle-fallback {
58
background-color: $bg_color;
59
color: $fg_color;
60
&:hover {
62
background-color: darken($bg_color, 5%);
63
color: $fg_color;
64
}
65
&:active {
67
background-color: darken($bg_color, 10%);
68
color: $fg_color;
69
}
70
&:disabled {
72
background-color: $bg_color;
73
color: $disabled_fg_color;
74
}
75
&:selected {
77
background-color: $primary_color;
78
color: $inverse_fg_color;
79
}
80
}
81
.view {
83
@extend row.activatable;
84
background-color: $base_color;
86
color: $fg_color;
87
&:disabled { color: $disabled_fg_color; }
89
&:hover, &:active, &:selected { border-radius: 2px; }
91
selection,
93
&:selected { @extend %selected_items; }
94
}
95
textview {
97
// FIXME: we need to override background-color to ensure text rendering
98
text { background-color: $base_color; }
99
border {
101
background-color: $alt_base_color;
102
color: $hint_fg_color; // FIXME: not working
103
}
104
}
105
// iconview { @extend .view; }
107
.rubberband,
109
rubberband {
110
border: 1px solid $alt_primary_color;
111
background-color: rgba($alt_primary_color, 0.3);
112
}
113
flowbox {
115
rubberband { @extend rubberband; }
116
flowboxchild {
118
padding: 4px;
119
border-radius: 2px;
120
&:selected { @extend %selected_items; }
122
}
123
}
124
.content-view .tile {
126
// margin: 2px;
127
// padding: 0;
128
// border-radius: 0;
129
// background-color: black;
130
&:selected {
132
background-color: transparent;
133
color: inherit;
134
}
135
}
136
label {
138
caret-color: currentColor; // this shouldn't be needed.
139
&.separator {
141
@extend .dim-label;
142
color: $fg_color;
144
}
145
row:selected &,
147
&:selected { @extend %nobg_selected_items; }
148
selection {
150
background-color: $primary_color;
151
color: $inverse_fg_color;
152
}
153
&:disabled {
155
color: $disabled_fg_color;
156
selection { @extend %selected_items:disabled; }
158
tab &,
160
button & { color: inherit; }
161
}
162
}
163
.dim-label { opacity: 0.6; }
165
assistant {
167
.sidebar {
168
padding: 4px 0;
169
// background-color: $base_color;
170
// border-top: 1px solid $border_color;
171
}
172
// &.csd .sidebar { border-top-style: none; }
174
.sidebar label {
176
min-height: $medium_size;
177
padding: 0 12px;
178
color: $hint_fg_color;
179
font-weight: 500;
180
&.highlight { color: $fg_color; }
182
}
183
}
184
// %osd, .osd { opacity: 0.9; }
186
/*********************
189
* Spinner Animation *
190
*********************/
191
@keyframes spin {
192
to { -gtk-icon-transform: rotate(1turn); }
193
}
194
spinner {
196
background: none;
197
opacity: 0; // non spinning spinner makes no sense
198
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
199
&:checked {
201
opacity: 1;
202
animation: spin 1s linear infinite;
203
&:disabled { opacity: 0.5; }
205
}
206
}
207
/****************
210
* Text Entries *
211
****************/
212
%entry,
213
entry {
214
%entry_basic, & {
215
min-height: $medium_size;
216
padding: 0 8px;
217
border-radius: 2px;
218
@include entry(normal);
220
&:focus { @include entry(focus); }
222
&:disabled { @include entry(disabled); }
224
&.flat {
226
border-radius: 0;
227
@include entry(flat-normal);
229
&:focus { @include entry(flat-focus); }
231
&:disabled { @include entry(flat-disabled); }
233
}
234
image { // icons inside the entry
236
// @extend %simple_flat_button;
237
// min-height: $small_size;
239
// min-width: $small_size;
240
// border-radius: $circular_radius;
241
// -gtk-outline-radius: $circular_radius;
242
color: $secondary_fg_color;
243
&:hover, &:active { color: $fg_color; }
245
&:disabled { color: $hint_fg_color; }
247
&.left {
249
margin-left: ($medium_size - 16px) / 2 - 8px;
250
margin-right: 6px;
251
}
252
&.right {
254
margin-left: 6px;
255
margin-right: ($medium_size - 16px) / 2 - 8px;
256
}
257
}
258
undershoot {
260
&.left { @include undershoot(left); }
261
&.right { @include undershoot(right); }
263
}
264
selection { @extend %selected_items; }
266
// entry error and warning style
268
@each $e_type, $e_color in (error, $error_color),
269
(warning, $warning_color) {
270
&.#{$e_type} {
271
@include entry(normal, $e_color);
272
&:focus { @include entry(focus, $e_color); }
274
&:disabled { @include entry(disabled, $e_color); }
276
&.flat {
278
@include entry(flat-normal, $e_color);
279
&:focus { @include entry(flat-focus, $e_color); }
281
&:disabled { @include entry(flat-disabled, $e_color); }
283
}
284
image {
286
color: $inverse_secondary_fg_color;
287
&:hover, &:active { color: $inverse_fg_color; }
289
&:disabled { color: $inverse_hint_fg_color; }
291
}
292
}
293
}
294
&:drop(active) {
296
// box-shadow: inset 0 0 0 2px $accent_color;
297
}
298
.osd & {
300
}
301
}
302
progress {
304
margin: 2px (2px - 8px);
305
border-bottom: 2px solid $primary_color;
306
background-color: transparent;
307
}
308
// linked entries
310
.linked:not(.vertical) > & { @extend %linked; }
311
// Vertically linked entries
313
.linked.vertical > & { @extend %linked_vertical; }
314
.linked:not(.vertical) > &.flat,
316
.linked.vertical > &.flat { border-radius: 0; }
317
}
318
treeview entry {
320
&.flat, & {
321
min-height: 0;
322
padding: 2px;
323
border-radius: 0;
324
background-color: $base_color;
325
&, &:focus {
327
border-image: none;
328
box-shadow: none;
329
}
330
}
331
}
332
.entry-tag {
334
margin: 2px;
335
border-radius: $circular_radius;
336
box-shadow: none;
337
background-color: $divider_color;
338
color: $fg_color;
339
&:hover { background-image: image($divider_color); }
341
// side margins: compensate the entry padding with a negative margin
343
// then the negative margin itself
344
:dir(ltr) & {
345
margin-left: 4px;
346
margin-right: 0;
347
padding-left: 12px;
348
padding-right: 8px;
349
}
350
:dir(rtl) & {
352
margin-left: 0;
353
margin-right: 4px;
354
padding-left: 8px;
355
padding-right: 12px;
356
}
357
// seems any sizing doesn't work
359
&.button {
360
box-shadow: none;
361
background-color: transparent;
362
&:not(:hover):not(:active) { color: $secondary_fg_color; }
364
}
365
}
366
/***********
369
* Buttons *
370
***********/
371
// stuff for .needs-attention
372
@keyframes needs_attention {
373
from {
374
background-image: -gtk-gradient(radial,
375
center center, 0,
376
center center, 0.001,
377
to($accent_color),
378
to(transparent));
379
}
380
to {
382
background-image: -gtk-gradient(radial,
383
center center, 0,
384
center center, 0.5,
385
to($accent_color),
386
to(transparent));
387
}
388
}
389
%button,
391
button {
392
@at-root %button_basic, & {
393
min-height: 24px;
394
min-width: 16px;
395
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
396
border-radius: 2px;
397
font-weight: 500;
398
@include button(normal);
400
&:hover { @include button(hover); }
402
&:active { @include button(active); }
404
&:disabled { @include button(disabled); }
406
&:checked { @include button(checked); }
408
&:checked:disabled { @include button(checked-disabled); }
410
@at-root %flat_button, &.flat {
412
@at-root %simple_flat_button, & {
413
@include button(flat-normal);
414
&:hover { @include button(flat-hover); }
416
&:active { @include button(flat-active); }
418
&:disabled { @include button(flat-disabled); }
420
}
421
&:checked { @include button(flat-checked); }
423
&:checked:disabled { @include button(flat-checked-disabled); }
425
}
426
&.text-button {
428
padding-left: 16px;
429
padding-right: 16px;
430
}
431
&.image-button {
433
min-width: 24px;
434
padding: ($medium_size - 24px) / 2;
435
@extend %circular_button;
437
}
438
&.text-button.image-button {
440
border-radius: 2px;
441
-gtk-outline-radius: 2px;
442
label {
444
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
445
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
447
}
448
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
450
}
451
.linked > & { @extend %linked; }
453
.linked.vertical > & { @extend %linked_vertical; }
455
.linked > &.flat,
457
.linked.vertical > &.flat {
458
border-radius: 2px;
459
&.image-button { @extend %circular_button; }
461
&.text-button.image-button {
463
border-radius: 2px;
464
-gtk-outline-radius: 2px;
465
}
466
}
467
&:drop(active) {
469
// box-shadow: inset 0 0 0 2px $accent_color;
470
}
471
}
472
@at-root %button_selected, row:selected & {
474
&:disabled {
475
background-color: $inverse_divider_color;
476
color: $inverse_disabled_secondary_fg_color;
477
}
478
&.flat {
480
color: $inverse_secondary_fg_color;
481
&:hover, &:active { color: $inverse_fg_color; }
483
&:disabled { color: $inverse_disabled_secondary_fg_color; }
485
&:checked {
487
background-color: $inverse_track_color;
488
color: $inverse_fg_color;
489
}
490
&:checked:disabled {
492
background-color: $inverse_divider_color;
493
color: $inverse_disabled_fg_color;
494
}
495
}
496
}
497
// big standalone buttons like in Documents pager
499
&.osd {
500
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
501
&.image-button { padding: ($large_size - 24px) / 2; }
503
&:disabled { opacity: 0; }
505
}
506
// overlay / OSD style
508
@at-root %osd_button,
509
.osd & {
510
}
511
// Suggested and Destructive Action buttons
513
@each $b_type, $b_color in (suggested-action, $suggested_color),
514
(destructive-action, $destructive_color) {
515
&.#{$b_type} {
516
background-color: $b_color;
517
color: $inverse_fg_color;
518
&:disabled { @include button(disabled, $b_color); }
520
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage(0.3)); }
522
&.flat {
524
background-color: transparent;
525
color: $b_color;
526
&:disabled { @include button(flat-disabled, $b_color); }
528
&:checked { background-color: rgba($b_color, 0.3); }
530
}
531
.osd & {
533
}
534
}
535
}
536
.stack-switcher > & {
538
// to position the needs attention dot, padding is added to the button
539
// child, a label needs just lateral padding while an icon needs vertical
540
// padding added too.
541
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
543
> label {
545
padding-left: 6px; // label padding
546
padding-right: 6px; //
547
}
548
> image {
550
padding-left: 6px; // image padding
551
padding-right: 6px; //
552
padding-top: 3px; //
553
padding-bottom: 3px; //
554
}
555
&.text-button {
557
// compensate text-button paddings
558
padding-left: 16px - 6px;
559
padding-right: 16px - 6px;
560
}
561
&.image-button {
563
// we want image buttons to have a 1:1 aspect ratio, so compensation
564
// of the padding added to the GtkImage is needed
565
padding-left: ($medium_size - 16px) / 2 - 6px;
566
padding-right: ($medium_size - 16px) / 2 - 6px;
567
}
568
&.needs-attention {
570
> label,
571
> image { @extend %needs_attention; }
572
&:checked {
574
> label,
575
> image {
576
animation: none;
577
background-image: none;
578
}
579
}
580
}
581
}
582
// hide separators
584
&.font,
585
&.file { separator { @extend %hide_separators; }}
586
// &.font { > box > box > label { font-weight: bold; }}
588
// inline-toolbar buttons
590
.inline-toolbar & {
591
// @extend %button_basic.flat;
592
&:not(.text-button) { @extend %circular_button; }
594
}
595
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
597
@at-root %circular_button,
599
&.close,
600
&.circular { // The Bloody Circul Button
601
border-radius: $circular_radius;
602
-gtk-outline-radius: $circular_radius;
603
// label { padding: 0; }
605
}
606
@at-root %small_button {
608
min-height: $small_size;
609
min-width: $small_size;
610
padding: 0;
611
border-radius: $circular_radius;
612
-gtk-outline-radius: $circular_radius;
613
}
614
}
615
%needs_attention {
617
animation: needs_attention $longer_duration $deceleration_curve forwards;
618
background-repeat: no-repeat;
619
background-position: right 3px;
620
background-size: 6px 6px;
621
&:dir(rtl) { background-position: left 3px; }
623
}
624
// all the following is for the +|- buttons on inline toolbars, that way
626
// should really be deprecated...
627
.inline-toolbar toolbutton > button { // redefining the button look is
628
// needed since those are flat...
629
}
630
// More inline toolbar buttons
632
toolbar.inline-toolbar toolbutton {
633
// > button.flat { @extend %linked_middle; }
634
// &:first-child > button.flat { @extend %linked:first-child; }
636
// &:last-child > button.flat { @extend %linked:last-child; }
638
// &:only-child > button.flat { @extend %linked:only-child; }
640
}
641
%linked_middle {
643
border-radius: 0;
644
-gtk-outline-radius: 2px;
645
}
646
%linked {
648
@extend %linked_middle;
649
&:first-child {
651
border-top-left-radius: 2px;
652
border-bottom-left-radius: 2px;
653
}
654
&:last-child {
656
border-top-right-radius: 2px;
657
border-bottom-right-radius: 2px;
658
}
659
&:only-child {
661
border-radius: 2px;
662
}
663
}
664
%linked_vertical_middle {
666
border-radius: 0;
667
-gtk-outline-radius: 2px;
668
}
669
%linked_vertical {
671
@extend %linked_vertical_middle;
672
&:first-child {
674
border-top-left-radius: 2px;
675
border-top-right-radius: 2px;
676
}
677
&:last-child {
679
border-bottom-left-radius: 2px;
680
border-bottom-right-radius: 2px;
681
}
682
&:only-child {
684
border-radius: 2px;
685
}
686
}
687
/* menu buttons */
689
modelbutton.flat,
690
.menuitem.button.flat {
691
min-height: $menuitem_size;
692
padding: 0 8px;
693
border-radius: 2px;
694
color: inherit;
695
@extend %simple_flat_button;
697
&:selected { @extend %selected_items; }
699
}
700
modelbutton.flat arrow {
702
background: none;
703
&:hover { background: none; }
705
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
707
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
709
}
710
button.color {
712
min-height: $small_size;
713
min-width: $small_size;
714
padding: $container_padding;
715
colorswatch:only-child {
717
// &, overlay { border-radius: 0; }
718
}
719
}
720
/*********
723
* Links *
724
*********/
725
*:link {
726
&, &:hover, &:active { color: $link_color; }
727
&:visited {
729
&, &:hover, &:active { color: $visited_link_color; }
730
}
731
@at-root %link_selected,
733
&:selected,
734
*:selected & { color: $inverse_fg_color; }
735
}
736
button:link,
738
button:visited {
739
@extend *:link;
740
> label { text-decoration-line: underline; }
742
}
743
/*****************
745
* GtkSpinButton *
746
*****************/
747
spinbutton {
748
&:not(.vertical) {
749
// in this horizontal configuration, the whole spinbutton
750
// behaves as the entry, so we extend the entry styling
751
// and nuke the style on the internal entry
752
@extend %entry;
753
padding: 0;
755
%spinbutton_entry,
757
entry {
758
min-width: $large_size - 8px * 2;
759
// reset all the other props since the spinbutton node is styled here
760
margin: 0;
761
border-image: none;
762
border-radius: 0;
763
box-shadow: none;
764
background-color: transparent;
765
//
766
// This will help to simplify spinbutton's code, but unfortunatelly
767
// doesn't work properly in :dir(rtl). It needs z-index property.
768
//
769
// min-width: $large_size - 8px;
770
//
771
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
772
//
773
// &:dir(ltr) {
774
// margin-right: -$spinbuttons_width;
775
// padding-right: $spinbuttons_width;
776
// }
777
//
778
// &:dir(rtl) {
779
// margin-left: -$spinbuttons_width;
780
// padding-left: $spinbuttons_width;
781
// }
782
}
783
button {
785
// margin: $container_padding;
786
border: solid $container_padding transparent;
787
@extend %simple_flat_button;
789
@extend %small_button;
791
&.up:dir(ltr),
793
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
794
&.up:dir(rtl),
796
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
797
}
798
}
799
// OSD horizontal
801
.osd &:not(.vertical) {
802
button {
803
}
804
}
805
// Vertical
807
&.vertical {
808
// in the vertical configuration, we treat the spinbutton
809
// as a box, and tweak the style of the entry in the middle
810
// so that it's linked
811
// FIXME: this should not be set at all, but otherwise it gets the wrong
813
// color
814
&:disabled { color: $disabled_fg_color; }
815
&:drop(active) {
817
box-shadow: none;
818
}
819
entry {
821
min-height: $medium_size;
822
min-width: $large_size;
823
padding: 0;
824
}
825
button {
827
min-height: $medium_size;
828
min-width: $large_size;
829
padding: 0;
830
@extend %simple_flat_button;
832
&.up { border-radius: 2px 2px 0 0; }
834
&.down { border-radius: 0 0 2px 2px; }
836
}
837
}
838
// OSD vertical
840
.osd &.vertical button:first-child {
841
}
842
// Misc
844
treeview &:not(.vertical) {
845
min-height: 0;
846
border-style: none;
847
border-radius: 0;
848
entry {
850
min-height: 0;
851
padding: 1px 2px;
852
}
853
}
854
}
855
/**************
858
* ComboBoxes *
859
**************/
860
combobox {
861
arrow {
862
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
863
min-height: 16px;
864
min-width: 16px;
865
}
866
decoration,
868
button.combo:checked { transition: none; } // workaround for menuitem selection
869
button.combo cellview {
871
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
872
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
873
}
874
#gtk-combobox-popup-menu {
876
padding: 2px 0;
877
menuitem {
879
min-height: $medium_size - 2px * 2;
880
padding: 0 8px;
881
}
882
// overflow arrows
884
> arrow {
885
&.top { margin-top: -2px; }
886
&.bottom { margin-bottom: -2px * 3; }
888
}
889
}
890
&.linked {
892
button:nth-child(2) {
893
&:dir(ltr) { @extend %linked:last-child; }
894
&:dir(rtl) { @extend %linked:first-child; }
895
}
896
}
897
&:drop(active) { // FIXME: untested
899
box-shadow: none;
900
// button.combo { @extend %button_basic:drop(active); }
902
}
903
}
904
// the combo is a composite widget so the way we do button linking doesn't
906
// work, special case needed. See
907
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
908
.linked:not(.vertical) > combobox {
910
> box > button.combo { @extend %linked_middle; }
911
&:first-child > box > button.combo { @extend %linked:first-child; }
913
&:last-child > box > button.combo { @extend %linked:last-child; }
915
&:only-child > box > button.combo { @extend %linked:only-child; }
917
}
918
.linked.vertical > combobox {
920
> box > button.combo { @extend %linked_vertical_middle; }
921
&:first-child > box > button.combo { @extend %linked_vertical:first-child; }
923
&:last-child > box > button.combo { @extend %linked_vertical:last-child; }
925
&:only-child > box > button.combo { @extend %linked_vertical:only-child; }
927
}
928
%combo_flat {
930
border-radius: 0;
931
background-image: none;
932
font-weight: inherit;
933
@include entry(flat-normal);
935
&:hover { box-shadow: inset 0 -2px $hint_fg_color; }
937
&:checked {
939
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
940
$primary_color 100%,
941
transparent 0%)
942
0 0 2 / 0 0 2px;
943
}
944
&:disabled {
946
box-shadow: inset 0 -1px $divider_color;
947
color: $disabled_fg_color;
948
}
949
}
950
/************
953
* Toolbars *
954
************/
955
toolbar {
956
-GtkWidget-window-dragging: true;
957
padding: 2px;
958
background-color: $bg_color;
959
button { @extend %button_basic.flat; }
961
// on OSD
963
.osd & { background-color: transparent; }
964
// stand-alone OSD toolbars
966
&.osd {
967
transition: $shadow_transition;
968
padding: $container_padding;
969
border-radius: 2px;
970
box-shadow: $shadow_2, inset 0 1px $highlight_color;
971
background-color: $popup_bg_color;
972
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
974
&.left,
976
&.right,
977
&.top,
978
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
979
}
980
// toolbar separators
982
&.horizontal > separator { margin: 2px; }
983
&.vertical > separator { margin: 2px; }
984
&:not(.inline-toolbar):not(.osd) {
986
scale,
987
entry,
988
spinbutton,
989
button { margin: 2px; }
990
.linked entry,
992
.linked spinbutton,
993
.linked button {
994
&:not(:first-child) { margin-left: 0; }
995
&:not(:last-child) { margin-right: 0; }
996
}
997
spinbutton {
999
entry,
1000
button { margin: 0; }
1001
}
1002
switch { margin: 2px + $container_padding 2px; }
1004
}
1005
}
1006
// searchbar, location-bar & inline-toolbar
1008
.inline-toolbar {
1009
padding: $container_padding;
1010
border-style: solid;
1011
border-width: 0 1px 1px;
1012
border-color: $border_color;
1013
background-color: $alt_base_color;
1014
}
1015
searchbar > revealer > box,
1017
.location-bar {
1018
padding: $container_padding;
1019
border-style: solid;
1020
border-width: 0 0 1px;
1021
border-color: $border_color;
1022
background-color: $bg_color;
1023
background-clip: border-box;
1024
}
1025
searchbar > revealer > box {
1027
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1028
margin: -$container_padding;
1029
padding: $container_padding;
1030
}
1031
/***************
1034
* Header bars *
1035
***************/
1036
%titlebar,
1037
headerbar {
1038
transition: background-color $shorter_duration $deceleration_curve, color $longer_duration $deceleration_curve;
1039
min-height: $large_size;
1040
padding: 0 $container_padding;
1041
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1042
background-color: $titlebar_bg_color;
1043
color: $titlebar_fg_color;
1044
&:disabled :not(button) > label { color: $titlebar_disabled_fg_color; }
1046
&:backdrop {
1048
color: $titlebar_secondary_fg_color;
1049
&:disabled :not(button) > label { color: $titlebar_disabled_secondary_fg_color; }
1051
}
1052
.title {
1054
padding: 0 12px;
1055
font-weight: bold;
1056
}
1057
.subtitle {
1059
padding: 0 12px;
1060
font-size: smaller;
1061
@extend .dim-label;
1063
}
1064
.linked:not(.vertical) > entry:not(.flat) { border-radius: 2px; }
1066
button:not(.suggested-action):not(.destructive-action) {
1068
@extend %button_basic.flat;
1069
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1071
$titlebar_indicator_color 0%,
1072
transparent 0%)
1073
0 0 0 / 0 0 0px;
1074
color: $titlebar_secondary_fg_color;
1075
&:hover, &:active { color: $titlebar_fg_color; }
1077
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1079
&:checked {
1081
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1082
$titlebar_indicator_color 100%,
1083
transparent 0%)
1084
0 0 2 / 0 0 2px;
1085
color: $titlebar_fg_color;
1086
&:disabled { color: $titlebar_disabled_fg_color; }
1088
&, &:disabled { background-color: transparent; }
1090
}
1091
&:backdrop {
1093
color: $titlebar_hint_fg_color;
1094
&:hover, &:active { color: $titlebar_secondary_fg_color; }
1096
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1098
&:checked {
1100
color: $titlebar_secondary_fg_color;
1101
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1103
}
1104
}
1105
}
1106
button.suggested-action, button.destructive-action {
1108
&:disabled {
1109
background-color: $titlebar_divider_color;
1110
color: $titlebar_disabled_fg_color;
1111
}
1112
}
1113
&.selection-mode {
1115
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1116
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1117
transition: background-color 0.00001s $longer_duration, color $longer_duration $deceleration_curve;
1118
animation: header_ripple_effect $longer_duration $deceleration_curve;
1119
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1120
background-color: $primary_color;
1121
color: $inverse_fg_color;
1122
&:backdrop {
1124
color: $inverse_secondary_fg_color;
1125
}
1126
.subtitle:link { @extend *:link:selected; }
1128
button:not(.suggested-action):not(.destructive-action) {
1130
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1131
currentColor 0%,
1132
transparent 0%)
1133
0 0 0 / 0 0 0px;
1134
color: $inverse_fg_color;
1135
&:disabled { color: $inverse_disabled_fg_color; }
1137
&:checked {
1139
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1140
currentColor 100%,
1141
transparent 0%)
1142
0 0 2 / 0 0 2px;
1143
color: $inverse_fg_color;
1144
&:disabled { color: $inverse_disabled_fg_color; }
1146
}
1147
&:backdrop {
1149
color: $inverse_secondary_fg_color;
1150
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1152
&:checked {
1154
color: $inverse_secondary_fg_color;
1155
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1157
}
1158
}
1159
}
1160
.selection-menu {
1162
padding-left: 16px;
1163
padding-right: 16px;
1164
arrow { -GtkArrow-arrow-scaling: 1; }
1166
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1168
}
1169
}
1170
// squared corners when the window is maximized, tiled, or fullscreen
1172
.tiled &,
1173
.tiled-top &,
1174
.tiled-right &,
1175
.tiled-bottom &,
1176
.tiled-left &,
1177
.maximized &,
1178
.fullscreen & {
1179
border-radius: 0;
1180
box-shadow: $shadow_1;
1181
}
1182
&.default-decoration {
1184
min-height: $small_size;
1185
padding: $container_padding;
1186
box-shadow: inset 0 1px $titlebar_highlight_color;
1187
.tiled &,
1189
.maximized &,
1190
.fullscreen & { box-shadow: none; }
1191
button.titlebutton {
1193
min-height: $small_size;
1194
min-width: $small_size;
1195
margin: 0;
1196
padding: 0;
1197
}
1198
// workaround for non-animatable buttons
1200
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1201
}
1202
.solid-csd & {
1204
&:dir(rtl), &:dir(ltr) { // specificity bump
1205
// margin-left: -2px;
1206
// margin-right: -2px;
1207
// margin-top: -2px;
1208
// border-radius: 0;
1209
// box-shadow: inset 0 1px $titlebar_highlight_color;
1210
}
1211
}
1212
}
1213
headerbar {
1215
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1216
entry,
1217
spinbutton,
1218
// separator,
1219
button {
1220
margin-top: $container_padding;
1221
margin-bottom: $container_padding;
1222
}
1223
switch {
1225
margin-top: ($large_size - 24px) / 2;
1226
margin-bottom: ($large_size - 24px) / 2;
1227
}
1228
// reset button margins of the spinbutton
1230
spinbutton button {
1231
margin-top: 0;
1232
margin-bottom: 0;
1233
}
1234
}
1235
.background .titlebar {
1237
border-top-left-radius: 2px;
1238
border-top-right-radius: 2px;
1239
}
1240
.background.tiled .titlebar,
1242
.background.tiled-top .titlebar,
1243
.background.tiled-right .titlebar,
1244
.background.tiled-bottom .titlebar,
1245
.background.tiled-left .titlebar,
1246
.background.maximized .titlebar,
1247
.background.solid-csd .titlebar {
1248
border-top-left-radius: 0;
1249
border-top-right-radius: 0;
1250
}
1251
headerbar { // headerbar border rounding
1253
window separator:first-child + &, // tackles the paned container case
1254
window &:first-child { border-top-left-radius: 2px; }
1255
window &:last-child { border-top-right-radius: 2px; }
1257
window stack & { // tackles the stacked headerbars case
1259
&:first-child, &:last-child {
1260
border-top-left-radius: 2px;
1261
border-top-right-radius: 2px;
1262
}
1263
}
1264
window.tiled &,
1266
window.tiled-top &,
1267
window.tiled-right &,
1268
window.tiled-bottom &,
1269
window.tiled-left &,
1270
window.maximized &,
1271
window.fullscreen &,
1272
window.solid-csd & {
1273
&,
1274
&:first-child,
1275
&:last-child,
1276
&:only-child {
1277
border-top-left-radius: 0;
1278
border-top-right-radius: 0;
1279
}
1280
}
1281
}
1282
.titlebar:not(headerbar) {
1284
window.csd > & {
1285
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1286
padding: 0;
1287
background-color: transparent;
1288
background-image: none;
1289
border-style: none;
1290
box-shadow: none;
1291
}
1292
> separator {
1294
background-color: $titlebar_bg_color;
1295
background-image: image($border_color);
1296
}
1297
@extend %titlebar;
1299
}
1300
/************
1303
* Pathbars *
1304
************/
1305
%pathbar_button,
1306
.path-bar button {
1307
padding-left: ($medium_size - 24px) / 2;
1308
padding-right: ($medium_size - 24px) / 2;
1309
label:not(:only-child) {
1311
&:first-child { margin-left: 4px; }
1312
&:last-child { margin-right: 4px; }
1314
}
1315
&.slider-button {
1317
padding-left: (24px - 16px) / 2;
1318
padding-right: (24px - 16px) / 2;
1319
}
1320
:not(headerbar) & {
1322
@extend %flat_button;
1323
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1325
$primary_color 0%,
1326
transparent 0%)
1327
0 0 0 / 0 0 0px;
1328
border-radius: 2px;
1329
&:checked {
1331
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1332
$primary_color 100%,
1333
transparent 0%)
1334
0 0 2 / 0 0 2px;
1335
&, &:disabled { background-color: transparent; }
1337
}
1338
}
1339
}
1340
/**************
1343
* Tree Views *
1344
**************/
1345
treeview.view {
1346
@at-root * {
1347
-GtkTreeView-horizontal-separator: 4;
1348
-GtkTreeView-grid-line-width: 1;
1349
-GtkTreeView-grid-line-pattern: '';
1350
-GtkTreeView-tree-line-width: 1;
1351
-GtkTreeView-tree-line-pattern: '';
1352
-GtkTreeView-expander-size: 16;
1353
}
1354
border-left-color: $track_color; // this is actually the tree lines color,
1356
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1357
&:selected { border-left-color: $inverse_track_color; }
1359
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1361
&:hover, &:active, &:selected { border-radius: 0; }
1363
&.separator {
1365
min-height: 1px + 2px * 2;
1366
color: $border_color;
1367
}
1368
&:drop(active) {
1370
border-style: solid none;
1371
border-width: 1px;
1372
border-color: $accent_color;
1373
&.after { border-top-style: none; }
1375
&.before { border-bottom-style: none; }
1377
}
1378
&.expander {
1380
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1381
-gtk-icon-transform: rotate(-90deg);
1382
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1384
&:checked { -gtk-icon-transform: unset; }
1386
color: $secondary_fg_color;
1388
&:hover, &:active { color: $fg_color; }
1390
&:disabled { color: $disabled_secondary_fg_color; }
1392
&:selected {
1394
color: $inverse_secondary_fg_color;
1395
&:hover, &:active { color: $inverse_fg_color; }
1397
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1399
}
1400
}
1401
&.progressbar { // progress bar in treeviews
1403
border-bottom: $bar_size solid $primary_color;
1404
box-shadow: none;
1405
background-color: transparent;
1406
&:selected { border-bottom-color: $inverse_fg_color; }
1408
}
1409
&.trough { // progress bar trough in treeviews
1411
border-bottom: $bar_size solid rgba($primary_color, 0.3);
1412
box-shadow: none;
1413
background-color: transparent;
1414
&:selected { border-bottom-color: $inverse_track_color; }
1416
}
1417
header {
1419
button {
1420
@extend row.activatable;
1421
padding: 2px 6px;
1423
border-style: none solid solid none;
1424
border-width: 1px;
1425
border-color: $border_color;
1426
border-radius: 0;
1427
background-clip: border-box;
1428
&, &:hover, &:active { box-shadow: none; }
1430
&, &:disabled { background-color: $base_color; }
1432
&:last-child { border-right-style: none; }
1434
}
1435
}
1436
button.dnd,
1438
header.button.dnd { // for treeview-like derive widgets
1439
padding: 2px 6px;
1440
border-style: none solid solid;
1441
border-width: 1px;
1442
border-color: $border_color;
1443
border-radius: 0;
1444
box-shadow: none;
1445
background-color: $base_color;
1446
background-clip: border-box;
1447
color: $primary_color;
1448
}
1449
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1451
}
1452
/*********
1455
* Menus *
1456
*********/
1457
menubar,
1458
.menubar {
1459
-GtkWidget-window-dragging: true;
1460
padding: 0;
1461
// box-shadow: inset 0 -1px $border_color;
1462
background-color: $titlebar_bg_color;
1463
> menuitem {
1465
transition: $shorter_transition;
1466
min-height: 20px;
1467
padding: 4px 8px;
1468
color: $titlebar_secondary_fg_color;
1469
&:hover { // Seems like it :hover even with keyboard focus
1471
transition: none;
1472
background-color: $titlebar_divider_color;
1473
color: $titlebar_fg_color;
1474
}
1475
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1477
label:disabled { color: inherit; } // to inherit the above color
1479
}
1480
}
1481
.csd.popup { background-color: transparent; }
1483
menu,
1485
.menu,
1486
.context-menu {
1487
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1488
padding: 4px 0;
1489
box-shadow: inset 0 1px $highlight_color;
1490
background-color: $popup_bg_color;
1491
border: 1px solid $border_color; // adds borders in a non composited env
1492
.csd & {
1494
border: none; // axes borders in a composited env
1495
border-radius: 2px;
1496
}
1497
menuitem {
1499
transition: background-color $shorter_duration $deceleration_curve;
1500
min-height: 20px;
1501
min-width: 40px;
1502
padding: 4px 8px;
1503
font: initial;
1504
text-shadow: none;
1505
&:hover {
1507
transition: none;
1508
background-color: $divider_color;
1509
}
1510
&:disabled { color: $disabled_fg_color; }
1512
// submenu indicators
1514
arrow {
1515
min-height: 16px;
1516
min-width: 16px;
1517
&:dir(ltr) {
1519
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1520
margin-left: 8px;
1521
}
1522
&:dir(rtl) {
1524
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1525
margin-right: 8px;
1526
}
1527
}
1528
// avoids labels color being overridden, see
1530
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1531
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1532
}
1533
// overflow arrows
1535
> arrow {
1536
min-height: 16px;
1537
min-width: 16px;
1538
padding: 4px;
1539
background-color: $popup_bg_color;
1540
color: $secondary_fg_color;
1541
&.top {
1543
margin-top: -4px;
1544
border-bottom: 1px solid $border_color;
1545
border-radius: 2px 2px 0 0;
1546
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1547
}
1548
&.bottom {
1550
margin-bottom: -4px * 3;
1551
border-top: 1px solid $border_color;
1552
border-radius: 0 0 2px 2px;
1553
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1554
}
1555
&:hover {
1557
background-image: image($divider_color);
1558
color: $fg_color;
1559
}
1560
&:disabled {
1562
border-color: transparent;
1563
background-color: transparent;
1564
color: transparent;
1565
// color: $disabled_secondary_fg_color;
1566
}
1567
}
1568
separator { margin: 4px 0; }
1570
}
1571
menuitem {
1573
accelerator { color: $secondary_fg_color; }
1574
}
1575
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1577
// Electron/Atom render all translucent colors in opaque colors.
1578
// It's a very critical issue for this theme and should be fixed by upstream...
1579
.popup:not(.csd) menu {
1580
menuitem {
1581
color: $opaque_fg_color;
1582
&:hover { background-color: $opaque_divider_color; }
1584
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1586
}
1587
// FIXME: not working this
1589
accelerator { color: $opaque_secondary_fg_color; }
1590
}
1591
/************
1594
* Popovers *
1595
************/
1596
popover.background {
1597
transition: $shadow_transition;
1598
padding: 2px;
1599
box-shadow: $shadow_2; // TODO: this should really have a highlight
1600
background-color: $popup_bg_color;
1601
&:backdrop { box-shadow: $shadow_1; }
1603
&, .csd & {
1605
border-style: solid;
1606
border-width: 1px;
1607
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1608
border-radius: 2px + 1px;
1609
}
1610
> stack { margin: -4px; } // remove extra padding from menu style popovers
1612
> toolbar { margin: -2px; }
1614
> list,
1616
> .view,
1617
> toolbar {
1618
border-style: none;
1619
box-shadow: none;
1620
background-color: transparent;
1621
}
1622
// &.touch-selection,
1624
// &.magnifier,
1625
// &.osd { @extend %osd; }
1626
// entry { @extend %entry.flat; }
1628
// button.combo { @extend %combo_flat; }
1630
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1632
&.menu button,
1634
button.model {
1635
@extend %simple_flat_button;
1636
min-height: 32px;
1638
padding: 0 8px;
1639
border-radius: 2px;
1640
&:checked { @extend %selected_items; }
1642
}
1643
separator { margin: 4px 0; }
1645
list separator { margin: 0; }
1647
}
1648
/*************
1650
* Notebooks *
1651
*************/
1652
notebook {
1653
> header {
1654
border-width: 1px;
1655
border-color: $border_color;
1656
background-color: $bg_color;
1657
background-clip: border-box;
1658
&.top {
1660
border-bottom-style: solid;
1661
> tabs {
1662
margin-bottom: -1px;
1663
> tab {
1664
&:hover { box-shadow: inset 0 -2px $track_color; }
1666
&:checked { box-shadow: inset 0 -2px $primary_color; }
1668
}
1669
}
1670
}
1671
&.bottom {
1673
border-top-style: solid;
1674
> tabs {
1675
margin-top: -1px;
1676
> tab {
1677
&:hover { box-shadow: inset 0 2px $track_color; }
1679
&:checked { box-shadow: inset 0 2px $primary_color; }
1681
}
1682
}
1683
}
1684
&.left {
1686
border-right-style: solid;
1687
> tabs {
1688
margin-right: -1px;
1689
> tab {
1690
&:hover { box-shadow: inset -2px 0 $track_color; }
1692
&:checked { box-shadow: inset -2px 0 $primary_color; }
1694
}
1695
}
1696
}
1697
&.right {
1699
border-left-style: solid;
1700
> tabs {
1701
margin-left: -1px;
1702
> tab {
1703
&:hover { box-shadow: inset 2px 0 $track_color; }
1705
&:checked { box-shadow: inset 2px 0 $primary_color; }
1707
}
1708
}
1709
}
1710
&.top > tabs > arrow {
1712
@extend %notebook_vert_arrows;
1713
border-top-style: none;
1715
}
1716
&.bottom > tabs > arrow {
1718
@extend %notebook_vert_arrows;
1719
border-bottom-style: none;
1721
}
1722
@at-root %notebook_vert_arrows {
1724
padding-left: 4px;
1725
padding-right: 4px;
1726
&.down {
1728
margin-left: -8px;
1729
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1730
}
1731
&.up {
1733
margin-right: -8px;
1734
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1735
}
1736
}
1737
&.left > tabs > arrow {
1739
@extend %notebook_horz_arrows;
1740
border-left-style: none;
1742
}
1743
&.right > tabs > arrow {
1745
@extend %notebook_horz_arrows;
1746
border-right-style: none;
1748
}
1749
@at-root %notebook_horz_arrows {
1751
padding-top: 4px;
1752
padding-bottom: 4px;
1753
&.down {
1755
margin-top: -8px;
1756
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1757
}
1758
&.up {
1760
margin-bottom: -8px;
1761
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1762
}
1763
}
1764
> tabs > arrow {
1766
@extend %simple_flat_button;
1767
min-height: 16px;
1769
min-width: 16px;
1770
border-radius: 0;
1771
}
1772
tab {
1774
transition: $longer_transition,
1775
background-size 0,
1776
background-image 0;
1777
min-height: $small_size;
1778
min-width: $small_size;
1779
padding: $container_padding 12px;
1780
outline-offset: -6px;
1782
border-width: 1px; // for reorderable tabs
1784
border-color: transparent; //
1785
background-image: radial-gradient(circle farthest-corner at center,
1787
$primary_color 10%,
1788
transparent 0%);
1789
background-repeat: no-repeat;
1790
background-position: center;
1791
background-size: 0% 0%;
1792
color: $secondary_fg_color;
1794
font-weight: 500;
1795
&:hover {
1797
color: $fg_color;
1798
&.reorderable-page {
1800
border-color: $border_color;
1801
background-color: $alt_base_color;
1802
}
1803
}
1804
&:disabled { color: $disabled_secondary_fg_color; }
1806
&:checked {
1808
transition: $longer_transition,
1809
background-size $longer_duration $deceleration_curve,
1810
background-image $longer_duration + $ripple_duration $deceleration_curve;
1811
background-image: radial-gradient(circle farthest-corner at center,
1812
transparent 10%,
1813
transparent 0%);
1814
background-size: 1000% 1000%;
1815
color: $fg_color;
1816
&:disabled { color: $disabled_fg_color; }
1818
&.reorderable-page {
1820
border-color: $border_color;
1821
background-color: $base_color;
1822
}
1823
}
1824
// colors the button like the label, overridden otherwise
1826
button.flat {
1827
@extend %small_button;
1828
&:last-child {
1830
margin-left: $container_padding;
1831
margin-right: $container_padding - 12px;
1832
}
1833
&:first-child {
1835
margin-left: $container_padding - 12px;
1836
margin-right: $container_padding;
1837
}
1838
}
1839
}
1840
&.top,
1842
&.bottom {
1843
tabs {
1844
padding-left: 8px;
1845
padding-right: 8px;
1846
&:not(:only-child) {
1848
&:first-child { margin-left: 0; }
1849
&:last-child { margin-right: 0; }
1850
}
1851
tab {
1853
&.reorderable-page {
1854
margin: 0 -1px;
1855
border-style: none solid;
1856
}
1857
}
1858
}
1859
}
1860
&.left,
1862
&.right {
1863
tabs {
1864
padding-top: 8px;
1865
padding-bottom: 8px;
1866
&:not(:only-child) {
1868
&:first-child { margin-top: 0; }
1869
&:last-child { margin-bottom: 0; }
1870
}
1871
tab {
1873
&.reorderable-page {
1874
margin: -1px 0;
1875
border-style: solid none;
1876
}
1877
}
1878
}
1879
}
1880
}
1881
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1883
background-color: $base_color;
1884
entry:not(.search),
1886
spinbutton:not(.vertical) { @extend %entry.flat; }
1887
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1889
button.combo { @extend %combo_flat; }
1891
}
1892
}
1893
/**************
1896
* Scrollbars *
1897
**************/
1898
scrollbar {
1899
$_slider_min_length: 24px;
1900
// disable steppers
1902
@at-root * {
1903
-GtkScrollbar-has-backward-stepper: false;
1904
-GtkScrollbar-has-forward-stepper: false;
1905
}
1906
transition: $longer_transition;
1908
background-color: $base_color;
1909
background-clip: $extra_background_clip;
1910
// scrollbar border
1912
&.top { border-bottom: 1px solid $border_color; }
1913
&.bottom { border-top: 1px solid $border_color; }
1914
&.left { border-right: 1px solid $border_color; }
1915
&.right { border-left: 1px solid $border_color; }
1916
// slider
1918
slider {
1919
transition: $shorter_transition, margin 0, border-width 0;
1920
min-width: 8px;
1921
min-height: 8px;
1922
border: 4px solid transparent;
1923
border-radius: $circular_radius;
1924
background-clip: padding-box;
1925
background-color: $hint_fg_color;
1926
&:hover { background-color: $secondary_fg_color; }
1928
&:active { background-color: $fg_color; }
1930
&:disabled { background-color: $disabled_secondary_fg_color; }
1932
}
1933
&.fine-tune {
1935
slider {
1936
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1937
min-width: 4px;
1938
min-height: 4px;
1939
}
1940
&.horizontal slider { margin: 2px 0; }
1942
&.vertical slider { margin: 0 2px; }
1944
}
1945
&.overlay-indicator {
1947
&:not(.dragging):not(.hovering) {
1948
border-color: transparent;
1949
background-color: transparent;
1950
slider {
1952
min-width: 4px;
1953
min-height: 4px;
1954
margin: 4px - 1px;
1955
border: 1px solid rgba($base_color, 0.3);
1956
}
1957
button {
1959
min-width: 4px;
1960
min-height: 4px;
1961
margin: 4px - 1px;
1962
border: 1px solid rgba($base_color, 0.3);
1963
border-radius: $circular_radius;
1964
background-color: $hint_fg_color;
1965
background-clip: padding-box;
1966
-gtk-icon-source: none;
1967
&:disabled { background-color: $disabled_secondary_fg_color; }
1969
}
1970
&.horizontal {
1972
slider { min-width: $_slider_min_length; }
1973
button { min-width: 8px; }
1975
}
1976
&.vertical {
1978
slider { min-height: $_slider_min_length; }
1979
button { min-height: 8px; }
1981
}
1982
}
1983
&.dragging,
1985
&.hovering { background-color: rgba($base_color, 0.9); }
1986
}
1987
&.horizontal slider { min-width: $_slider_min_length; }
1989
&.vertical slider { min-height: $_slider_min_length; }
1991
// button styling
1993
button {
1994
@extend %simple_flat_button;
1995
min-width: 16px;
1997
min-height: 16px;
1998
padding: 0;
1999
border-radius: 0;
2000
}
2001
// button icons
2003
&.vertical {
2004
button {
2005
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2006
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2008
}
2009
}
2010
&.horizontal {
2012
button {
2013
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2014
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2016
}
2017
}
2018
}
2019
/**********
2022
* Switch *
2023
**********/
2024
switch {
2025
transition: background-color 100ms $deceleration_curve, opacity $longer_duration $deceleration_curve;
2026
margin: $container_padding 0;
2027
padding: 0 2px;
2028
border: 5px solid transparent;
2029
border-radius: $circular_radius;
2030
background-color: $track_color;
2031
background-clip: padding-box;
2032
font-size: 0;
2033
&:checked { background-color: rgba($accent_color, 0.5); }
2035
&:disabled { opacity: 0.5; }
2037
slider {
2039
transition: all 100ms $deceleration_curve, box-shadow $longer_duration $deceleration_curve;
2040
min-width: 20px;
2041
min-height: 20px;
2042
margin: -3px -2px;
2043
border-radius: $circular_radius;
2044
box-shadow: 0 0 0 10px transparent, $shadow_1;
2045
background-color: $popup_bg_color;
2046
color: $secondary_fg_color;
2047
}
2048
&:hover slider { box-shadow: 0 0 0 10px gtkalpha(currentColor, 0.16), $shadow_1; }
2050
&:focus slider { box-shadow: 0 0 0 10px gtkalpha(currentColor, 0.2), $shadow_1; }
2052
&:focus:hover slider { box-shadow: 0 0 0 10px gtkalpha(currentColor, 0.24), $shadow_1; }
2054
&:checked slider {
2056
background-color: $accent_color;
2057
color: $accent_color;
2058
}
2059
row:selected & {
2061
}
2062
}
2063
/*************************
2066
* Check and Radio items *
2067
*************************/
2068
// draw regular check and radio items using our PNG assets
2069
// all assets are rendered from assets.svg. never add pngs directly
2070
// selection-mode
2072
.view.content-view.check:not(list),
2073
.content-view .tile check:not(list) {
2074
min-height: 40px;
2075
min-width: 40px;
2076
margin: 0;
2077
padding: 0;
2078
box-shadow: none;
2079
background-color: transparent;
2080
background-image: none;
2081
-gtk-icon-shadow: $shadow_1;
2082
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2084
@each $s, $as in ('', '-unchecked'),
2086
(':checked', '-checked') {
2087
&#{$s} {
2088
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2089
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2090
}
2091
}
2092
}
2093
checkbutton,
2095
radiobutton {
2096
outline: none;
2097
}
2098
checkbutton.text-button,
2100
radiobutton.text-button {
2101
// this is for a nice focus on check and radios text
2102
padding: 2px;
2103
label:not(:only-child) { margin: 0 4px; }
2105
}
2106
$check_radio_size: 40px;
2108
check,
2110
radio {
2111
min-height: 24px;
2112
min-width: 24px;
2113
margin: -($check_radio_size - 24px) / 2;
2114
padding: ($check_radio_size - 24px) / 2;
2115
@extend %simple_flat_button;
2117
@extend %circular_button;
2119
&:focus { box-shadow: inset 0 0 0 9999px gtkalpha(currentColor, 0.2); }
2121
&:hover { box-shadow: inset 0 0 0 9999px $semi_fill_color; }
2123
&:checked, &:indeterminate {
2125
color: $accent_color;
2126
&:disabled { color: $disabled_accent_color; }
2128
}
2129
// &:only-child { margin: -12px; }
2131
row:selected &:not(:checked):not(:indeterminate) {
2133
color: $inverse_secondary_fg_color;
2134
&:hover, &:active { color: $inverse_fg_color; }
2136
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2138
}
2139
popover & {
2141
&, &:focus, &:hover, &:active, &:disabled {
2142
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2143
box-shadow: none;
2144
background-image: none;
2145
}
2146
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2148
&.left:dir(rtl) {
2150
margin-left: -12px;
2151
margin-right: -4px;
2152
}
2153
&.right:dir(ltr) {
2155
margin-left: -4px;
2156
margin-right: -12px;
2157
}
2158
}
2159
menu menuitem & {
2161
transition: none;
2162
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2163
padding: 0;
2164
&:dir(ltr) { margin-right: 8px; }
2166
&:dir(rtl) { margin-left: 8px; }
2168
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2170
&, &:hover, &:disabled {
2172
box-shadow: none;
2173
// color: inherit;
2174
}
2175
}
2176
}
2177
%check,
2179
check {
2180
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2181
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2183
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2185
}
2186
%radio,
2188
radio {
2189
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2190
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2192
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2194
border-image-slice: $check_radio_size / 2px;
2196
border-image-width: $check_radio_size / 2;
2197
$radio_indicator: 10px / $check_radio_size / 2;
2199
& {
2201
border-image-source: -gtk-gradient(radial,
2202
center center, 0,
2203
center center, 0.001,
2204
to($accent_color),
2205
to(transparent));
2206
}
2207
&:checked:not(:indeterminate) {
2209
border-image-source: -gtk-gradient(radial,
2210
center center, 0,
2211
center center, $radio_indicator,
2212
to($accent_color),
2213
to(transparent));
2214
}
2215
&:checked:not(:indeterminate):disabled {
2217
border-image-source: -gtk-gradient(radial,
2218
center center, 0,
2219
center center, $radio_indicator,
2220
to($disabled_accent_color),
2221
to(transparent));
2222
}
2223
}
2224
%small_check,
2226
menu menuitem check {
2227
& {
2228
min-height: 16px;
2229
min-width: 16px;
2230
border-radius: 2px;
2231
-gtk-outline-radius: 2px;
2232
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2233
}
2234
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2236
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2238
}
2239
%small_radio,
2241
menu menuitem radio {
2242
& {
2243
min-height: 16px;
2244
min-width: 16px;
2245
border-image: none;
2246
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2247
}
2248
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2250
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2252
}
2253
// ANIMATION:
2255
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2256
// the transformation is set on the active state and it get reset on the checked state.
2257
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2258
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2260
check:not(:checked):indeterminate:active,
2262
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2263
check:not(:checked),
2265
radio:not(:checked) {
2266
& {
2267
transition: $longer_transition,
2268
background-size $ripple_duration $deceleration_curve,
2269
background-image $ripple_opacity_duration $deceleration_curve,
2270
-gtk-icon-transform 0;
2271
}
2272
&:active {
2274
transition: $longer_transition,
2275
background-size 0,
2276
background-image 0,
2277
-gtk-icon-transform 0;
2278
}
2279
menu menuitem & { transition: none; }
2281
}
2282
treeview.view check,
2284
treeview.view radio {
2285
padding: 0;
2286
&:hover {
2288
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2289
&:disabled { box-shadow: none; }
2291
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2293
}
2294
& {
2296
color: $secondary_fg_color;
2297
&:hover, &:active { color: $fg_color; }
2299
&:disabled { color: $disabled_secondary_fg_color; }
2301
&:checked, &:indeterminate { color: $accent_color; }
2303
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2305
}
2306
&:selected {
2308
color: $inverse_secondary_fg_color;
2309
&:hover, &:active { color: $inverse_fg_color; }
2311
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2313
&:checked, &:indeterminate { color: $accent_color; }
2315
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2317
}
2318
}
2319
treeview.view radio:checked {
2321
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2322
border-image: none;
2323
}
2324
/************
2327
* GtkScale *
2328
************/
2329
scale {
2330
// sizing
2331
$_marks_length: 8px;
2332
$_marks_distance: 7px;
2333
$trough_size: 2px;
2335
$finetune_trough_size: 4px;
2336
$slider_size: 32px;
2338
$slider_margin: -($slider_size - $trough_size) / 2;
2340
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2341
$color_slider_margin: -($slider_size) * 3 / 4;
2343
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2344
min-height: $trough_size;
2346
min-width: $trough_size;
2347
&.horizontal { padding: ($medium_size - $trough_size) / 2 12px; }
2349
&.vertical { padding: 12px ($medium_size - $trough_size) / 2; }
2351
// the slider is inside the trough, so to have make it bigger there's a negative margin
2353
slider {
2354
min-height: $slider_size;
2355
min-width: $slider_size;
2356
margin: $slider_margin;
2357
}
2358
// click-and-hold the slider to activate
2360
&.fine-tune {
2361
&.horizontal {
2362
min-height: $finetune_trough_size;
2363
padding-top: ($medium_size - $finetune_trough_size) / 2;
2364
padding-bottom: ($medium_size - $finetune_trough_size) / 2;
2365
}
2366
&.vertical {
2368
min-width: $finetune_trough_size;
2369
padding-left: ($medium_size - $finetune_trough_size) / 2;
2370
padding-right: ($medium_size - $finetune_trough_size) / 2;
2371
}
2372
// to make the trough grow in fine-tune mode
2374
slider { margin: $finetune_slider_margin; }
2375
}
2376
// the backing bit
2378
trough {
2379
transition: background-color $longer_duration $deceleration_curve;
2380
outline: none;
2381
background-color: $track_color;
2382
&:disabled { background-color: $divider_color; }
2384
}
2385
// the colored part of the backing bit
2387
highlight {
2388
transition: background-color $longer_duration $deceleration_curve;
2389
background-color: $accent_color;
2390
&:disabled { background-color: transparent; }
2392
}
2393
// this is another differently styled part of the backing bit, the most relevant use case is for example
2395
// in media player to indicate how much video stream as been cached
2396
fill {
2397
transition: background-color $longer_duration $deceleration_curve;
2398
background-color: $track_color;
2399
&:disabled { background-color: transparent; }
2401
}
2402
slider {
2404
transition: background-color $longer_duration $deceleration_curve,
2405
background-size $ripple_duration $deceleration_curve,
2406
background-image $ripple_opacity_duration $deceleration_curve;
2407
background-repeat: no-repeat;
2408
background-position: center;
2409
background-size: auto, 1000% 1000%;
2410
border-radius: 50%;
2411
color: transparent;
2412
@each $s, $as in ('', ''),
2414
(':disabled', '-disabled') {
2415
&#{$s} {
2416
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2417
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2419
radial-gradient(circle farthest-corner at center,
2420
currentColor 10%,
2421
transparent 0%);
2422
}
2423
}
2424
&:focus { background-color: rgba($accent_color, 0.16); }
2426
&:hover { background-color: rgba($accent_color, 0.12); }
2428
&:active {
2430
transition: background-color $longer_duration $deceleration_curve,
2431
background-size 0,
2432
background-image 0;
2433
animation: scale_ripple_effect $longer_duration $deceleration_curve forwards;
2434
background-size: auto, 0% 0%;
2435
background-color: rgba($accent_color, 0.12);
2436
color: rgba($accent_color, 0.12);
2437
}
2438
}
2439
marks label,
2441
value { color: $hint_fg_color; }
2442
marks {
2444
color: $track_color;
2445
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2447
(bottom, bottom, top),
2448
(left, left, right),
2449
(right, right, left) {
2450
&.#{$marks_class} {
2451
margin-#{$marks_margin}: $_marks_distance;
2452
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2453
}
2454
}
2455
}
2456
&.fine-tune marks {
2458
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2459
(bottom, bottom, top),
2460
(left, left, right),
2461
(right, right, left) {
2462
&.#{$marks_class} {
2463
margin-#{$marks_margin}: $_marks_distance - 1px;
2464
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2465
}
2466
}
2467
}
2468
&.horizontal {
2470
indicator {
2471
min-height: $_marks_length;
2472
min-width: 1px;
2473
}
2474
}
2475
&.vertical {
2477
indicator {
2478
min-height: 1px;
2479
min-width: $_marks_length;
2480
}
2481
}
2482
// *WARNING* scale with marks madness following
2484
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2486
('vertical', 'vert') {
2487
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2488
('marks-after', 'marks-after:not(.marks-before)') {
2489
&.#{$dir_class}.#{$marks_class} {
2490
slider {
2491
@each $state, $state_infix in ('', ''),
2492
(':disabled', '-disabled') {
2493
&#{$state} {
2494
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2495
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2497
radial-gradient(circle farthest-corner at center,
2498
currentColor 10%,
2499
transparent 0%);
2500
}
2501
}
2502
}
2503
}
2504
}
2505
}
2506
&.color {
2508
min-height: 0;
2509
min-width: 0;
2510
&.horizontal {
2512
padding: 0 0 12px 0;
2513
slider {
2515
&:dir(ltr), &:dir(rtl) { // specificity bump
2516
margin-bottom: $color_slider_margin;
2517
margin-top: $color_marks_slider_margin;
2518
}
2519
}
2520
}
2521
&.vertical {
2523
&:dir(ltr) {
2524
padding: 0 0 0 12px;
2525
slider {
2527
margin-left: $color_slider_margin;
2528
margin-right: $color_marks_slider_margin;
2529
}
2530
}
2531
&:dir(rtl) {
2533
padding: 0 12px 0 0;
2534
slider {
2536
margin-right: $color_slider_margin;
2537
margin-left: $color_marks_slider_margin;
2538
}
2539
}
2540
}
2541
}
2542
}
2543
/*****************
2546
* Progress bars *
2547
*****************/
2548
progressbar {
2549
// sizing
2550
&.horizontal {
2551
trough,
2552
progress { min-height: $bar_size; }
2553
}
2554
&.vertical {
2556
trough,
2557
progress { min-width: $bar_size; }
2558
}
2559
// FIXME: insensitive state missing and some other state should be set probably
2561
color: $hint_fg_color;
2562
font-size: smaller;
2563
trough { background-color: rgba($primary_color, 0.3); }
2565
progress { background-color: $primary_color; }
2567
&.osd { // progressbar.osd used for epiphany page loading progress
2569
// min-width: $bar_size;
2570
// min-height: $bar_size;
2571
// background-color: transparent;
2572
// trough { background-color: transparent; }
2574
// progress { background-color: $primary_color; }
2576
}
2577
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2579
}
2580
/*************
2583
* Level Bar *
2584
*************/
2585
levelbar {
2586
&.horizontal {
2587
block { min-height: $bar_size; }
2588
&.discrete block {
2590
min-width: $medium_size;
2591
&:not(:last-child) { margin-right: 2px; }
2593
}
2594
}
2595
&.vertical {
2597
block { min-width: $bar_size; }
2598
&.discrete block {
2600
min-height: $medium_size;
2601
&:not(:last-child) { margin-bottom: 2px; }
2603
}
2604
}
2605
// imitate the entry style
2607
trough {
2608
// padding: 2px;
2609
// border-radius: 2px;
2610
// box-shadow: $shadow_1;
2611
// background-color: $base_color;
2612
// &:disabled { background-color: $alt_base_color; }
2614
}
2615
block {
2617
&.low { background-color: $warning_color; }
2618
&.high,
2620
&:not(.empty) { background-color: $primary_color; }
2621
&.full { background-color: $success_color; }
2623
&.empty { background-color: $divider_color; }
2625
}
2626
}
2627
/****************
2630
* Print dialog *
2631
*****************/
2632
printdialog {
2633
paper {
2634
padding: 0;
2635
border: 1px solid $border_color;
2636
background-color: $base_color;
2637
color: $fg_color;
2638
}
2639
.dialog-action-box { margin: 12px; }
2641
}
2642
/**********
2645
* Frames *
2646
**********/
2647
frame > border,
2648
.frame {
2649
margin: 0;
2650
padding: 0;
2651
border: 1px solid $border_color;
2652
border-radius: 0;
2653
box-shadow: none;
2654
&.flat { border-style: none; }
2656
}
2657
frame.flat > border { @extend .frame.flat; } // for backporting
2659
actionbar > revealer > box {
2661
padding: $container_padding;
2662
border-top: 1px solid $border_color;
2663
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2665
}
2666
scrolledwindow {
2668
viewport.frame { // avoid double borders when viewport inside scrolled window
2669
border-style: none;
2670
}
2671
// This is used when content is touch-dragged past boundaries.
2673
// draws a box on top of the content, the size changes programmatically.
2674
@at-root overshoot {
2675
&.top { @include overshoot(top); }
2676
&.bottom { @include overshoot(bottom); }
2678
&.left { @include overshoot(left); }
2680
&.right { @include overshoot(right); }
2682
}
2683
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2685
@at-root undershoot {
2686
&.top { @include undershoot(top); }
2687
&.bottom { @include undershoot(bottom); }
2689
&.left { @include undershoot(left); }
2691
&.right { @include undershoot(right); }
2693
}
2694
@at-root junction { // the small square between two scrollbars
2696
border-style: solid none none solid;
2697
border-width: 1px;
2698
border-color: $border_color;
2699
background-color: $base_color;
2700
&:dir(rtl) { border-style: solid solid none none; }
2702
}
2703
}
2704
// vbox and hbox separators
2706
separator {
2707
min-width: 1px;
2708
min-height: 1px;
2709
background-color: $border_color;
2710
}
2711
%hide_separators {
2713
min-width: 0;
2714
min-height: 0;
2715
background-color: transparent;
2716
}
2717
/*********
2720
* Lists *
2721
*********/
2722
list {
2723
border-color: $border_color;
2724
background-color: $base_color;
2725
row { padding: 2px; }
2727
}
2728
// FIXME
2730
$row_transition: $longer_transition, background-color 0, color 0;
2731
row {
2733
&.activatable {
2734
transition: $row_transition,
2735
background-size $ripple_duration $deceleration_curve,
2736
background-image $ripple_opacity_duration $deceleration_curve;
2737
box-shadow: inset 0 0 0 9999px transparent;
2738
background-image: radial-gradient(circle farthest-corner at center,
2739
transparent 10%,
2740
transparent 0%);
2741
background-repeat: no-repeat;
2742
background-position: center;
2743
background-size: 1000% 1000%;
2744
&:hover {
2746
transition: $row_transition,
2747
box-shadow 0,
2748
background-size $ripple_duration $deceleration_curve,
2749
background-image $ripple_opacity_duration $deceleration_curve;
2750
box-shadow: inset 0 0 0 9999px $row_fill_color;
2751
}
2752
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2754
&:active {
2755
transition: $row_transition,
2756
background-size 0,
2757
background-image 0;
2758
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2759
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2760
background-image: radial-gradient(circle farthest-corner at center,
2761
$semi_fill_color 10%,
2762
transparent 0%);
2763
background-size: 0% 0%;
2764
}
2765
}
2766
&:selected { @extend %selected_items; }
2768
}
2769
/*********************
2772
* App Notifications *
2773
*********************/
2774
.app-notification {
2775
// @extend %osd;
2776
@extend toolbar.osd;
2778
margin: 8px;
2780
button { @extend %button_basic.flat; }
2782
&.frame,
2784
border { border-style: none; }
2785
}
2786
/*************
2789
* Expanders *
2790
*************/
2791
expander {
2792
title > arrow {
2793
transition: all $shorter_duration $standard_curve;
2794
min-width: 16px;
2795
min-height: 16px;
2796
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2797
-gtk-icon-transform: rotate(-90deg);
2798
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2800
&:checked { -gtk-icon-transform: unset; }
2802
color: $secondary_fg_color;
2804
&:hover, &:active { color: $fg_color; }
2806
&:disabled { color: $disabled_secondary_fg_color; }
2808
&:selected {
2810
color: $inverse_secondary_fg_color;
2811
&:hover, &:active { color: $inverse_fg_color; }
2813
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2815
}
2816
}
2817
}
2818
/************
2821
* Calendar *
2822
************/
2823
calendar {
2824
padding: 1px;
2825
border: 1px solid $border_color;
2826
color: $fg_color;
2827
&:disabled { color: $disabled_fg_color; }
2829
&:selected {
2831
@extend %selected_items;
2832
border-radius: 2px + 1px;
2834
}
2835
&.header {
2837
border-style: none none solid;
2838
border-radius: 0;
2839
}
2840
&.button { @extend %simple_flat_button; }
2842
&.highlight {
2844
color: $secondary_fg_color;
2845
font-weight: 500;
2846
}
2847
&:indeterminate { color: $disabled_secondary_fg_color; }
2849
}
2850
/***********
2853
* Dialogs *
2854
***********/
2855
messagedialog { // Message Dialog styling
2856
&.background { background-color: $popup_bg_color; }
2857
.titlebar {
2859
min-height: $small_size;
2860
border-style: none;
2861
box-shadow: inset 0 1px $highlight_color;
2862
background-color: $popup_bg_color;
2863
color: $fg_color;
2864
&:backdrop { color: $secondary_fg_color; }
2866
}
2867
&.csd { // rounded bottom border styling for csd version
2869
&.background {
2870
// bigger radius for better antialiasing
2871
border-bottom-left-radius: 2px;
2872
border-bottom-right-radius: 2px;
2873
}
2874
.dialog-action-area {
2876
margin-top: -$container_padding;
2877
padding: $container_padding;
2878
button {
2880
@extend %simple_flat_button;
2881
border-radius: 2px;
2882
&:not(:last-child) { margin-right: $container_padding; }
2884
&.suggested-action:not(:disabled) { color: $suggested_color; }
2886
&.destructive-action:not(:disabled) { color: $destructive_color; }
2888
}
2889
}
2890
}
2891
entry { @extend %entry.flat; }
2893
}
2894
filechooser {
2896
.dialog-action-box { border-top: 1px solid $border_color; }
2897
#pathbarbox {
2899
border-bottom: 1px solid $border_color;
2900
background-color: $bg_color;
2901
}
2902
}
2903
filechooserbutton:drop(active) {
2905
box-shadow: none;
2906
}
2907
/***********
2910
* Sidebar *
2911
***********/
2912
.sidebar {
2913
border-style: none;
2914
background-color: $alt_base_color;
2915
@at-root %sidebar_left,
2917
&:dir(ltr),
2918
&.left,
2919
&.left:dir(rtl) {
2920
border-right: 1px solid $border_color;
2921
border-left-style: none;
2922
}
2923
@at-root %sidebar_right,
2925
&:dir(rtl),
2926
&.right {
2927
border-left: 1px solid $border_color;
2928
border-right-style: none;
2929
}
2930
list { background-color: transparent; }
2932
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2934
}
2935
stacksidebar {
2937
&.sidebar {
2938
&:dir(ltr),
2939
&.left,
2940
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2941
&:dir(rtl),
2943
&.right { list { @extend %sidebar_right; }}
2944
}
2945
row {
2947
padding: 10px 4px;
2948
> label {
2950
padding-left: 6px;
2951
padding-right: 6px;
2952
}
2953
&.needs-attention > label { @extend %needs_attention; }
2955
}
2956
}
2957
/****************
2960
* File chooser *
2961
****************/
2962
// dim the sidebar icons, see bug #786613 for details on this oddity
2963
row {
2964
image.sidebar-icon { color: $secondary_fg_color; }
2965
&:selected image.sidebar-icon { color: $inverse_secondary_fg_color; }
2967
}
2968
placessidebar {
2970
> viewport.frame { border-style: none; }
2971
list { padding: (4px - 3px) 0 4px; }
2973
row {
2975
// Needs overriding of the GtkListBoxRow padding
2976
min-height: 32px;
2977
margin: -1px 0; // Remove unknown margins
2978
padding: 0;
2979
// Using margins/padding directly in the SidebarRow
2981
// will make the animation of the new bookmark row jump
2982
> revealer { padding: 0 12px; }
2983
&:selected { color: $inverse_fg_color; }
2985
&:disabled { color: $disabled_fg_color; }
2987
image.sidebar-icon {
2989
&:dir(ltr) { padding-right: 8px; }
2990
&:dir(rtl) { padding-left: 8px; }
2991
}
2992
label.sidebar-label {
2994
&:dir(ltr) { padding-right: 2px; }
2995
&:dir(rtl) { padding-left: 2px; }
2996
}
2997
@at-root button.sidebar-button {
2999
@extend %simple_flat_button;
3000
@extend %small_button;
3002
row:selected & { @extend %button_selected.flat; }
3004
}
3005
&.sidebar-placeholder-row {
3007
min-height: 2px;
3008
padding: 0 8px;
3009
background-image: image($accent_color);
3010
background-clip: content-box;
3011
}
3012
&.sidebar-new-bookmark-row { color: $accent_color; }
3014
&:drop(active):not(:disabled) {
3016
box-shadow: inset 0 0 0 2px $accent_color;
3017
&:selected {
3019
// background-color: $accent_color;
3020
// color: $inverse_fg_color;
3021
}
3022
}
3023
}
3024
}
3025
placesview {
3027
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3028
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3030
// this selects the "connect to server" label
3032
> actionbar > revealer > box > label {
3033
padding-left: 8px;
3034
padding-right: 8px;
3035
}
3036
}
3037
/*********
3040
* Paned *
3041
*********/
3042
paned {
3043
> separator {
3044
min-width: 1px;
3045
min-height: 1px;
3046
-gtk-icon-source: none; // defeats the ugly default handle decoration
3047
border-style: none; // just to be sure
3048
background-color: transparent;
3049
// workaround, using background istead of a border since the border will get rendered twice (?)
3050
background-image: image($border_color);
3051
background-size: 1px 1px;
3052
background-clip: content-box; // avoids borders image being rendered twice (?)
3053
&.wide {
3055
min-width: 6px;
3056
min-height: 6px;
3057
background-color: $bg_color;
3058
background-image: image($border_color), image($border_color);
3059
background-size: 1px 1px, 1px 1px;
3060
}
3061
}
3062
&.horizontal > separator {
3064
background-repeat: repeat-y;
3065
&:dir(ltr) {
3067
margin: 0 -8px 0 0;
3068
padding: 0 8px 0 0;
3069
background-position: left;
3070
}
3071
&:dir(rtl) {
3073
margin: 0 0 0 -8px;
3074
padding: 0 0 0 8px;
3075
background-position: right;
3076
}
3077
&.wide {
3079
margin: 0;
3080
padding: 0;
3081
background-repeat: repeat-y, repeat-y;
3082
background-position: left, right;
3083
}
3084
}
3085
&.vertical > separator {
3087
margin: 0 0 -8px 0;
3088
padding: 0 0 8px 0;
3089
background-repeat: repeat-x;
3090
background-position: top;
3091
&.wide {
3093
margin: 0;
3094
padding: 0;
3095
background-repeat: repeat-x, repeat-x;
3096
background-position: bottom, top;
3097
}
3098
}
3099
}
3100
/**************
3103
* GtkInfoBar *
3104
**************/
3105
infobar {
3106
border-style: none;
3107
&.info { background-color: $info_bg_color; }
3109
&.question { background-color: $question_bg_color; }
3111
&.warning { background-color: $warning_bg_color; }
3113
&.error { background-color: $error_bg_color; }
3115
&.info,
3117
&.question,
3118
&.warning,
3119
&.error {
3120
> label, & { color: $inverse_fg_color; }
3121
button { @extend %button_selected; }
3123
selection {}
3125
*:link { @extend %link_selected; }
3127
}
3128
}
3129
/************
3132
* Tooltips *
3133
************/
3134
tooltip {
3135
&.background {
3136
// background-color needs to be set this way otherwise it gets drawn twice
3137
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3138
// box-shadow: inset 0 1px $highlight_color;
3139
background-color: $tooltip_bg_color;
3140
color: $tooltip_fg_color;
3141
}
3142
// padding: 4px; /* not working */
3144
border-radius: 2px;
3145
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3146
&:not(.csd):not(.unity-csd) {
3148
// border: 1px solid $border_color;
3149
// border-radius: 2px + 1px;
3150
// background-clip: $extra_background_clip;
3151
}
3152
// FIXME: we need a border or tooltips vanish on black background.
3154
decoration { background-color: transparent; }
3155
label {
3157
// tooltip label already seems to have 6px margins
3158
min-height: 32px - 6px * 2;
3159
padding: 0 8px - 6px;
3160
}
3161
* {
3163
// workaround for Eclipse.
3164
// do not include any declaration here.
3165
// padding: 0;
3166
// background-color: transparent;
3167
// color: inherit;
3168
}
3169
}
3170
/*****************
3173
* Color Chooser *
3174
*****************/
3175
colorswatch {
3176
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3177
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3178
// applied to the overlay box.
3179
// base color corners rounding
3181
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3182
// sports a bigger radius.
3183
// nth-child is needed by the custom color strip.
3184
&.top {
3186
border-top-left-radius: $material_radius + 0.5px;
3187
border-top-right-radius: $material_radius + 0.5px;
3188
overlay {
3190
border-top-left-radius: $material_radius;
3191
border-top-right-radius: $material_radius;
3192
}
3193
}
3194
&.bottom {
3196
border-bottom-left-radius: $material_radius + 0.5px;
3197
border-bottom-right-radius: $material_radius + 0.5px;
3198
overlay {
3200
border-bottom-left-radius: $material_radius;
3201
border-bottom-right-radius: $material_radius;
3202
}
3203
}
3204
&.left,
3206
&:first-child:not(.top) {
3207
border-top-left-radius: $material_radius + 0.5px;
3208
border-bottom-left-radius: $material_radius + 0.5px;
3209
overlay {
3211
border-top-left-radius: $material_radius;
3212
border-bottom-left-radius: $material_radius;
3213
}
3214
}
3215
&.right,
3217
&:last-child:not(.bottom) {
3218
border-top-right-radius: $material_radius + 0.5px;
3219
border-bottom-right-radius: $material_radius + 0.5px;
3220
overlay {
3222
border-top-right-radius: $material_radius;
3223
border-bottom-right-radius: $material_radius;
3224
}
3225
}
3226
&.dark { color: $light_fg_color; }
3228
&.light { color: $dark_fg_color; }
3230
&:drop(active) {
3232
box-shadow: none;
3233
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $accent_color; }
3235
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $accent_color; }
3237
}
3238
overlay {
3240
transition: $shadow_transition;
3241
box-shadow: $shadow_1;
3242
&:hover { box-shadow: $shadow_2; }
3244
}
3245
&#add-color-button {
3247
border-radius: $material_radius $material_radius 0 0;
3248
color: $light_fg_color;
3249
&:only-child { border-radius: $material_radius; }
3251
overlay {
3253
background-image: linear-gradient(to right,
3254
$error_bg_color 25%,
3255
$warning_bg_color 25%, $warning_bg_color 50%,
3256
$info_bg_color 50%, $info_bg_color 75%,
3257
$question_bg_color 75%);
3258
}
3259
}
3260
&:disabled {
3262
opacity: 0.5;
3263
overlay { box-shadow: none; }
3265
}
3266
row:selected & {
3268
}
3269
&#editor-color-sample {
3271
border-radius: $material_radius + 0.5px;
3272
overlay { border-radius: $material_radius; }
3274
// overlay:hover { box-shadow: $shadow_1; }
3276
}
3277
}
3278
// colorscale popup
3280
colorchooser .popover.osd {
3281
transition: $shadow_transition;
3282
border-radius: 2px;
3283
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3284
background-color: $popup_bg_color;
3285
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3287
spinbutton:not(.vertical) { @extend %entry.flat; }
3289
}
3290
/********
3293
* Misc *
3294
********/
3295
// content view (grid/list)
3296
.content-view {
3297
background-color: $bg_color;
3298
// &:hover { -gtk-icon-effect: highlight; }
3300
rubberband, .rubberband { @extend rubberband; }
3302
}
3303
.scale-popup {
3305
// .osd & { @extend %osd; }
3306
.osd & button.flat { // FIXME: quick hack, redo properly
3308
}
3309
button { // +/- buttons on GtkVolumeButton popup
3311
}
3312
}
3313
/**********************
3316
* Window Decorations *
3317
**********************/
3318
decoration {
3319
transition: $shadow_transition;
3320
border-radius: 2px 2px 0 0;
3321
box-shadow: $shadow_4, 0 16px 16px transparent;
3322
// FIXME rationalize shadows
3324
// this is used for the resize cursor area
3326
margin: 8px;
3327
&:backdrop {
3329
// the transparent shadow here is to enforce that the shadow extents don't
3330
// change when we go to backdrop, to prevent jumping windows.
3331
// The biggest shadow should be in the same order then in the active state
3332
// or the jumping will happen during the transition.
3333
box-shadow: $shadow_2, 0 16px 16px transparent;
3334
}
3335
.maximized &,
3337
.fullscreen &,
3338
.tiled &,
3339
.tiled-top &,
3340
.tiled-right &,
3341
.tiled-bottom &,
3342
.tiled-left & { border-radius: 0; }
3343
.popup & { box-shadow: none; }
3345
// server-side decorations as used by mutter
3347
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3348
.csd.popup & {
3350
border-radius: 2px;
3351
box-shadow: $shadow_2;
3352
}
3353
tooltip.csd & {
3355
border-radius: 2px;
3356
box-shadow: none;
3357
}
3358
messagedialog.csd & {
3360
border-radius: 2px;
3361
// box-shadow: $shadow_4, 0 16px 16px transparent;
3362
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3364
}
3365
.solid-csd & {
3367
margin: 0;
3368
// padding: 4px;
3369
border-radius: 0;
3370
box-shadow: none;
3371
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3372
background-color: $titlebar_bg_color;
3373
}
3374
}
3375
// Window Close button
3377
button.titlebutton {
3378
// @extend %simple_flat_button;
3379
@extend %circular_button;
3381
.selection-mode & {
3383
}
3384
}
3385
// catch all extend :)
3388
%selected_items {
3390
background-color: $primary_color;
3391
@at-root %nobg_selected_items, & {
3393
color: $inverse_fg_color;
3394
&:disabled { color: $inverse_disabled_fg_color; }
3396
}
3397
}
3398
.monospace { font-family: monospace; }
3400
/**********************
3403
* Touch Copy & Paste *
3404
**********************/
3405
// touch selection handlebars for the Popover.osd above
3406
cursor-handle {
3407
border-radius: $circular_radius;
3408
background-color: $accent_color;
3409
background-image: none;
3410
&.top:dir(ltr), &.bottom:dir(rtl) {
3412
padding-left: 6px;
3413
border-top-right-radius: 0;
3414
}
3415
&.bottom:dir(ltr), &.top:dir(rtl) {
3417
padding-right: 6px;
3418
border-top-left-radius: 0;
3419
}
3420
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3422
-GtkWidget-text-handle-width: 24;
3423
-GtkWidget-text-handle-height: 30;
3424
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3426
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3427
url('#{$_url}@2.png'));
3428
}
3429
}
3430
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3432
// shortcut window keys
3434
.keycap {
3435
min-width: 28px - 8px * 2;
3436
min-height: 28px - 2px;
3437
margin-top: 2px;
3438
padding-bottom: 2px;
3439
padding-left: 8px;
3440
padding-right: 8px;
3441
border: solid 1px $border_color;
3443
border-radius: 2px + 1px;
3444
box-shadow: inset 0 -2px $border_color;
3445
background-color: $popup_bg_color;
3446
color: $fg_color;
3447
font-size: smaller;
3448
}
3449
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3451
transition: $longer_transition;
3452
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3453
caret-color: $accent_color;
3454
}
3455
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3457
stackswitcher button.circular,
3459
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3460
min-width: $medium_size;
3461
min-height: $medium_size;
3462
padding: 0;
3463
}
3464
/*********
3467
* Emoji *
3468
*********/
3469
popover.emoji-picker {
3470
padding: 0;
3471
entry {
3473
border-bottom: 1px solid $border_color;
3474
border-bottom-left-radius: 0;
3475
border-bottom-right-radius: 0;
3476
box-shadow: none;
3477
}
3478
scrolledwindow { border-bottom: 1px solid $border_color; }
3480
}
3481
// mimic tab style
3483
button.emoji-section {
3484
margin-top: -1px;
3485
padding: 0 8px;
3486
min-width: 24px;
3487
min-height: $medium_size;
3488
border-radius: 0;
3489
outline-offset: -6px;
3490
box-shadow: none;
3491
&:hover { box-shadow: inset 0 2px $track_color; }
3493
&:active {
3495
box-shadow: inset 0 2px $primary_color;
3496
background-image: radial-gradient(circle farthest-corner at center,
3497
rgba($primary_color, 0.7) 10%,
3498
transparent 0%);
3499
}
3500
&:checked {
3502
box-shadow: inset 0 2px $primary_color;
3503
background-color: transparent;
3504
}
3505
&:first-child { margin-left: 4px; }
3507
&:last-child { margin-right: 4px; }
3509
}
3510
.emoji {
3512
min-width: 3em;
3513
min-height: 3em;
3514
padding: 0;
3515
// font-size: large;
3516
widget {
3518
transition: $shorter_transition;
3519
&:hover { font-size: larger; }
3521
}
3522
}
3523