ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error;
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: $corner-radius;
32
-gtk-secondary-caret-color: $primary;
34
&:focus { outline-color: $overlay-checked; }
36
}
37
/***************
40
* Base States *
41
***************/
42
.background {
43
background-color: $background;
44
color: $text;
45
}
46
/*
48
These wildcard seems unavoidable, need to investigate.
49
Wildcards are bad and troublesome, use them with care,
50
or better, just don't.
51
Everytime a wildcard is used a kitten dies, painfully.
52
*/
53
*:disabled { -gtk-icon-effect: dim; }
55
.gtkstyle-fallback {
57
background-color: $background;
58
color: $text;
59
&:hover {
61
background-color: darken($background, 5%);
62
color: $text;
63
}
64
&:active {
66
background-color: darken($background, 10%);
67
color: $text;
68
}
69
&:disabled {
71
background-color: $background;
72
color: $text-disabled;
73
}
74
&:selected {
76
background-color: $primary;
77
color: on($primary);
78
}
79
}
80
.view {
82
// @extend row.activatable;
83
background-color: $base;
85
color: $text;
86
&:hover { box-shadow: inset 0 0 0 9999px $overlay-hover; }
88
&:selected:hover { box-shadow: inset 0 0 0 9999px rgba($primary, 0.08); }
90
&:disabled { color: $text-disabled; }
92
&:hover, &:selected { border-radius: $corner-radius; }
94
selection,
96
&:selected { @extend %selected_items; }
97
}
98
textview {
100
// FIXME: we need to override background-color to ensure text rendering
101
text { background-color: $base; }
102
border {
104
background-color: $base-alt;
105
color: $text-secondary; // FIXME: not working
106
}
107
}
108
// iconview { @extend .view; }
110
.rubberband,
112
rubberband {
113
border: 1px solid $primary-alt;
114
background-color: rgba($primary-alt, 0.3);
115
}
116
flowbox {
118
rubberband { @extend rubberband; }
119
flowboxchild {
121
padding: 4px;
122
border-radius: $corner-radius;
123
&:selected { @extend %selected_items; }
125
}
126
}
127
.content-view .tile {
129
// margin: 2px;
130
// padding: 0;
131
// border-radius: 0;
132
// background-color: black;
133
&:selected {
135
background-color: transparent;
136
}
137
}
138
label {
140
caret-color: currentColor; // this shouldn't be needed.
141
&.separator {
143
@extend .dim-label;
144
color: $text;
146
}
147
selection { @extend %selected_items; }
149
&:disabled {
151
color: $text-disabled;
152
// selection { @extend %selected_items:disabled; }
154
headerbar &,
156
tab &,
157
button & { color: inherit; }
158
}
159
}
160
.dim-label { opacity: 0.6; }
162
assistant {
164
.sidebar {
165
padding: 4px 0;
166
// background-color: $base;
167
// border-top: 1px solid $border;
168
}
169
// &.csd .sidebar { border-top-style: none; }
171
.sidebar label {
173
min-height: $medium-size;
174
padding: 0 12px;
175
color: $text-disabled;
176
font-weight: 500;
177
&.highlight { color: $text; }
179
}
180
}
181
// %osd, .osd { opacity: 0.9; }
183
/*********************
186
* Spinner Animation *
187
*********************/
188
@keyframes spin {
189
to { -gtk-icon-transform: rotate(1turn); }
190
}
191
spinner {
193
background: none;
194
opacity: 0; // non spinning spinner makes no sense
195
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
196
&:checked {
198
opacity: 1;
199
animation: spin 1s linear infinite;
200
&:disabled { opacity: 0.5; }
202
}
203
}
204
/****************
207
* Text Entries *
208
****************/
209
%entry,
210
entry {
211
%entry_basic, & {
212
min-height: $medium-size;
213
padding: 0 8px;
214
border-radius: $corner-radius $corner-radius 0 0;
215
caret-color: currentColor; // this shouldn't be needed.
216
@include entry(normal);
218
&:focus { @include entry(checked); }
220
&:disabled { @include entry(disabled); }
222
&.flat {
224
min-height: 0;
225
padding: 2px;
226
border-radius: 0;
227
background-color: transparent;
228
}
229
image { // icons inside the entry
231
// @extend %simple_flat_button;
232
// min-height: $small-size;
234
// min-width: $small-size;
235
// border-radius: $circular-radius;
236
// -gtk-outline-radius: $circular-radius;
237
color: $text-secondary;
238
&:hover, &:active { color: $text; }
240
&:disabled { color: $text-disabled; }
242
&.left {
244
margin-left: ($medium-size - 16px) / 2 - 8px;
245
margin-right: 6px;
246
}
247
&.right {
249
margin-left: 6px;
250
margin-right: ($medium-size - 16px) / 2 - 8px;
251
}
252
}
253
undershoot {
255
&.left { @include undershoot(left); }
256
&.right { @include undershoot(right); }
258
}
259
selection { @extend %selected_items; }
261
// entry error and warning style
263
@each $e_type, $e_color in (error, $error),
264
(warning, $warning) {
265
&.#{$e_type} {
266
@include entry(normal, $e_color);
267
&:focus { @include entry(checked, $e_color); }
269
&:disabled { @include entry(disabled, $e_color); }
271
}
272
}
273
&:drop(active) {
275
// box-shadow: inset 0 0 0 2px $primary;
276
}
277
.osd & {
279
}
280
}
281
progress {
283
margin: 2px -8px;
284
border-bottom: 2px solid $primary;
285
background-color: transparent;
286
}
287
// linked entries
289
.linked:not(.vertical) > & { @extend %linked_entry; }
290
// Vertically linked entries
292
.linked.vertical > & { @extend %linked_vertical_entry; }
293
}
294
%entry_raised {
296
border-radius: $corner-radius;
297
@include entry(raised-normal);
299
&:focus { @include entry(raised-focus); }
301
&:disabled { @include entry(raised-disabled); }
303
// entry error and warning style
305
@each $e_type, $e_color in (error, $error),
306
(warning, $warning) {
307
&.#{$e_type} {
308
@include entry(raised-normal, $e_color);
309
&:focus { @include entry(raised-focus, $e_color); }
311
&:disabled { @include entry(raised-disabled, $e_color); }
313
image {
315
color: on($e_color, secondary);
316
&:hover, &:active { color: on($e_color); }
318
&:disabled { color: on($e_color, disabled); }
320
}
321
}
322
}
323
}
324
treeview entry {
326
&.flat, & {
327
background-color: $base;
328
&, &:focus {
330
border-image: none;
331
box-shadow: none;
332
}
333
}
334
}
335
.entry-tag {
337
margin: 2px;
338
border-radius: $circular-radius;
339
box-shadow: none;
340
background-color: $divider;
341
color: $text;
342
&:hover { background-image: image($overlay-hover); }
344
// side margins: compensate the entry padding with a negative margin
346
// then the negative margin itself
347
:dir(ltr) & {
348
margin-left: 4px;
349
margin-right: 0;
350
padding-left: 12px;
351
padding-right: 8px;
352
}
353
:dir(rtl) & {
355
margin-left: 0;
356
margin-right: 4px;
357
padding-left: 8px;
358
padding-right: 12px;
359
}
360
// seems any sizing doesn't work
362
&.button {
363
box-shadow: none;
364
background-color: transparent;
365
&:not(:hover):not(:active) { color: $text-secondary; }
367
}
368
}
369
/***********
372
* Buttons *
373
***********/
374
// stuff for .needs-attention
375
@keyframes needs_attention {
376
from {
377
background-image: -gtk-gradient(radial,
378
center center, 0,
379
center center, 0.001,
380
to($primary),
381
to(transparent));
382
}
383
to {
385
background-image: -gtk-gradient(radial,
386
center center, 0,
387
center center, 0.5,
388
to($primary),
389
to(transparent));
390
}
391
}
392
%button,
394
button {
395
@at-root %button_basic, & {
396
min-height: 24px;
397
min-width: 16px;
398
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
399
border-radius: $corner-radius;
400
font-weight: 500;
401
@include button(normal);
403
&:focus { @include button(focus); }
405
&:hover { @include button(hover); }
407
&:active { @include button(active); }
409
&:disabled { @include button(disabled); }
411
&:checked { @include button(checked); }
413
&:checked:disabled { @include button(checked-disabled); }
415
@at-root %flat_button, &.flat {
417
@at-root %simple_flat_button, & {
418
@include button(flat-normal);
419
&:focus { @include button(flat-focus); }
421
&:hover { @include button(flat-hover); }
423
&:active { @include button(flat-active); }
425
&:disabled { @include button(flat-disabled); }
427
}
428
&:checked { @include button(flat-checked); }
430
&:checked:disabled { @include button(flat-checked-disabled); }
432
}
433
&.text-button {
435
padding-left: 16px;
436
padding-right: 16px;
437
}
438
&.image-button {
440
min-width: 24px;
441
padding: ($medium-size - 24px) / 2;
442
@extend %circular_button;
444
}
445
&.text-button.image-button {
447
border-radius: $corner-radius;
448
-gtk-outline-radius: $corner-radius;
449
label {
451
&:first-child { margin-left: 16px - ($medium-size - 24px) / 2; }
452
&:last-child { margin-right: 16px - ($medium-size - 24px) / 2; }
454
}
455
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
457
}
458
.linked > & { @extend %linked; }
460
.linked.vertical > & { @extend %linked_vertical; }
462
.linked > &.flat,
464
.linked.vertical > &.flat {
465
border-radius: $corner-radius;
466
&.image-button { @extend %circular_button; }
468
&.text-button.image-button {
470
border-radius: $corner-radius;
471
-gtk-outline-radius: $corner-radius;
472
}
473
}
474
&:drop(active) {
476
// box-shadow: inset 0 0 0 2px $primary;
477
}
478
}
479
@at-root %button_selected {
481
&.flat {
482
color: on(dark, secondary);
483
&:focus, &:hover, &:active { color: on(dark); }
485
&:disabled { color: on(dark, secondary-disabled); }
487
&:checked {
489
background-color: on(dark, track);
490
color: on(dark);
491
}
492
&:checked:disabled {
494
background-color: on(dark, divider);
495
color: on(dark, disabled);
496
}
497
}
498
}
499
// big standalone buttons like in Documents pager
501
&.osd {
502
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
503
&.image-button { padding: ($large-size - 24px) / 2; }
505
&:disabled { opacity: 0; }
507
}
508
// overlay / OSD style
510
@at-root %osd_button,
511
.osd & {
512
}
513
// Suggested and Destructive Action buttons
515
@each $b_type, $b_color in (suggested-action, $suggested),
516
(destructive-action, $destructive) {
517
&.#{$b_type} {
518
background-color: $b_color;
519
color: on($b_color);
520
&:disabled { @include button(disabled); }
522
&:checked { background-color: mix(on($b_color), $b_color, percentage(0.3)); }
524
&.flat {
526
background-color: transparent;
527
color: $b_color;
528
&:disabled { @include button(flat-disabled); }
530
&:checked { background-color: rgba($b_color, 0.3); }
532
}
533
.osd & {
535
}
536
}
537
}
538
.stack-switcher > & {
540
// to position the needs attention dot, padding is added to the button
541
// child, a label needs just lateral padding while an icon needs vertical
542
// padding added too.
543
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
545
> label {
547
padding-left: 6px; // label padding
548
padding-right: 6px; //
549
}
550
> image {
552
padding-left: 6px; // image padding
553
padding-right: 6px; //
554
padding-top: 3px; //
555
padding-bottom: 3px; //
556
}
557
&.text-button {
559
// compensate text-button paddings
560
padding-left: 16px - 6px;
561
padding-right: 16px - 6px;
562
}
563
&.image-button {
565
// we want image buttons to have a 1:1 aspect ratio, so compensation
566
// of the padding added to the GtkImage is needed
567
padding-left: ($medium-size - 16px) / 2 - 6px;
568
padding-right: ($medium-size - 16px) / 2 - 6px;
569
}
570
&.needs-attention {
572
> label,
573
> image { @extend %needs_attention; }
574
&:checked {
576
> label,
577
> image {
578
animation: none;
579
background-image: none;
580
}
581
}
582
}
583
}
584
// hide separators
586
&.font,
587
&.file { separator { @extend %hide_separators; }}
588
// &.font { > box > box > label { font-weight: bold; }}
590
// inline-toolbar buttons
592
.inline-toolbar & {
593
// @extend %button_basic.flat;
594
&:not(.text-button) { @extend %circular_button; }
596
}
597
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
599
@at-root %circular_button,
601
&.close,
602
&.circular { // The Bloody Circul Button
603
border-radius: $circular-radius;
604
-gtk-outline-radius: $circular-radius;
605
// label { padding: 0; }
607
}
608
@at-root %small_button {
610
min-height: $small-size;
611
min-width: $small-size;
612
padding: 0;
613
border-radius: $circular-radius;
614
-gtk-outline-radius: $circular-radius;
615
}
616
}
617
%needs_attention {
619
animation: needs_attention $duration-ripple $ease-out forwards;
620
background-repeat: no-repeat;
621
background-position: right 3px;
622
background-size: 6px 6px;
623
&:dir(rtl) { background-position: left 3px; }
625
}
626
// all the following is for the +|- buttons on inline toolbars, that way
628
// should really be deprecated...
629
.inline-toolbar toolbutton > button { // redefining the button look is
630
// needed since those are flat...
631
}
632
// More inline toolbar buttons
634
toolbar.inline-toolbar toolbutton {
635
// > button.flat { @extend %linked_middle; }
636
// &:first-child > button.flat { @extend %linked:first-child; }
638
// &:last-child > button.flat { @extend %linked:last-child; }
640
// &:only-child > button.flat { @extend %linked:only-child; }
642
}
643
%linked_middle {
645
border-radius: 0;
646
-gtk-outline-radius: $corner-radius;
647
}
648
%linked {
650
@extend %linked_middle;
651
&:first-child {
653
border-top-left-radius: $corner-radius;
654
border-bottom-left-radius: $corner-radius;
655
}
656
&:last-child {
658
border-top-right-radius: $corner-radius;
659
border-bottom-right-radius: $corner-radius;
660
}
661
&:only-child {
663
border-radius: $corner-radius;
664
}
665
}
666
%linked_vertical_middle {
668
border-radius: 0;
669
-gtk-outline-radius: $corner-radius;
670
}
671
%linked_vertical {
673
@extend %linked_vertical_middle;
674
&:first-child {
676
border-top-left-radius: $corner-radius;
677
border-top-right-radius: $corner-radius;
678
}
679
&:last-child {
681
border-bottom-left-radius: $corner-radius;
682
border-bottom-right-radius: $corner-radius;
683
}
684
&:only-child {
686
border-radius: $corner-radius;
687
}
688
}
689
%linked_entry {
691
@extend %linked_middle;
692
&:first-child {
694
border-radius: $corner-radius 0 0 0;
695
}
696
&:last-child {
698
border-radius: 0 $corner-radius 0 0;
699
}
700
&:only-child {
702
border-radius: $corner-radius $corner-radius 0 0;
703
}
704
}
705
%linked_vertical_entry {
707
@extend %linked_vertical_middle;
708
&:first-child {
710
border-radius: $corner-radius $corner-radius 0 0;
711
}
712
&:last-child {
714
border-radius: 0;
715
}
716
&:only-child {
718
border-radius: $corner-radius $corner-radius 0 0;
719
}
720
}
721
/* menu buttons */
723
modelbutton.flat,
724
.menuitem.button.flat {
725
min-height: $menuitem-size;
726
padding: 0 8px;
727
border-radius: $corner-radius;
728
color: inherit;
729
@extend %simple_flat_button;
731
&:selected { @extend %selected_items; }
733
}
734
modelbutton.flat arrow {
736
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
737
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
739
}
740
button.color {
742
min-height: $small-size;
743
min-width: $small-size;
744
padding: $container-padding;
745
colorswatch:only-child {
747
// &, overlay { border-radius: 0; }
748
}
749
}
750
/*********
753
* Links *
754
*********/
755
*:link {
756
color: $link;
757
&:visited { color: $link-visited; }
759
}
760
button:link,
762
button:visited {
763
&, &:focus, &:hover, &:active { @extend *:link; }
764
> label { text-decoration-line: underline; }
766
}
767
/*****************
769
* GtkSpinButton *
770
*****************/
771
spinbutton {
772
&:not(.vertical) {
773
// in this horizontal configuration, the whole spinbutton
774
// behaves as the entry, so we extend the entry styling
775
// and nuke the style on the internal entry
776
@extend %entry;
777
padding: 0;
779
entry {
781
min-width: $large-size - 8px * 2;
782
// reset all the other props since the spinbutton node is styled here
783
margin: 0;
784
border-image: none;
785
border-radius: 0;
786
box-shadow: none;
787
background-color: transparent;
788
}
789
button {
791
// margin: $container-padding;
792
border: solid $container-padding transparent;
793
@extend %simple_flat_button;
795
@extend %small_button;
797
// Remove unwanted focus indicator
799
&:focus:not(:hover):not(:active) {
800
box-shadow: inset 0 0 0 9999px transparent;
801
color: $text-secondary;
802
}
803
&.up:dir(ltr),
805
&.down:dir(rtl) { margin-left: -$container-padding / 2; }
806
&.up:dir(rtl),
808
&.down:dir(ltr) { margin-right: -$container-padding / 2; }
809
}
810
}
811
// OSD horizontal
813
.osd &:not(.vertical) {
814
}
815
// Vertical
817
&.vertical {
818
// in the vertical configuration, we treat the spinbutton
819
// as a box, and tweak the style of the entry in the middle
820
// so that it's linked
821
// FIXME: this should not be set at all, but otherwise it gets the wrong
823
// color
824
&:disabled { color: $text-disabled; }
825
&:drop(active) {
827
box-shadow: none;
828
}
829
entry {
831
@extend %entry_raised;
832
min-height: $medium-size;
834
min-width: $large-size;
835
padding: 0;
836
}
837
button {
839
min-height: $medium-size;
840
min-width: $large-size;
841
padding: 0;
842
@extend %simple_flat_button;
844
// Remove unwanted focus indicator
846
&:focus:not(:hover):not(:active) {
847
box-shadow: inset 0 0 0 9999px transparent;
848
color: $text-secondary;
849
}
850
&.up { border-radius: $corner-radius $corner-radius 0 0; }
852
&.down { border-radius: 0 0 $corner-radius $corner-radius; }
854
}
855
}
856
// OSD vertical
858
.osd &.vertical {
859
}
860
// Misc
862
treeview &:not(.vertical) {
863
min-height: 0;
864
border-style: none;
865
border-radius: 0;
866
entry {
868
min-height: 0;
869
padding: 1px 2px;
870
}
871
}
872
}
873
/**************
876
* ComboBoxes *
877
**************/
878
combobox {
879
arrow {
880
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
881
min-height: 16px;
882
min-width: 16px;
883
}
884
decoration,
886
button.combo:checked { transition: none; } // workaround for menuitem selection
887
button.combo cellview {
889
&:dir(ltr) { margin-left: 8px - ($medium-size - 16px) / 2; }
890
&:dir(rtl) { margin-right: 8px - ($medium-size - 16px) / 2; }
891
}
892
#gtk-combobox-popup-menu {
894
padding: 2px 0;
895
menuitem {
897
min-height: $medium-size - 2px * 2;
898
padding: 0 8px;
899
}
900
// overflow arrows
902
> arrow {
903
&.top { margin-top: -2px; }
904
&.bottom {
906
margin-top: 2px * 2;
907
margin-bottom: -2px * 3;
908
}
909
}
910
}
911
&.linked {
913
button:nth-child(2) {
914
&:dir(ltr) { @extend %linked_entry:last-child; }
915
&:dir(rtl) { @extend %linked_entry:first-child; }
916
}
917
}
918
> .linked > button {
920
@extend %linked_middle;
921
&:first-child { @extend %linked_entry:first-child; }
923
&:last-child { @extend %linked_entry:last-child; }
925
&:only-child { @extend %linked_entry:only-child; }
927
}
928
&:drop(active) { // FIXME: untested
930
box-shadow: none;
931
// button.combo { @extend %button_basic:drop(active); }
933
}
934
}
935
// the combo is a composite widget so the way we do button linking doesn't
937
// work, special case needed. See
938
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
939
.linked:not(.vertical) > combobox {
941
> box > button.combo { @extend %linked_middle; }
942
&:first-child > box > button.combo { @extend %linked_entry:first-child; }
944
&:last-child > box > button.combo { @extend %linked_entry:last-child; }
946
&:only-child > box > button.combo { @extend %linked_entry:only-child; }
948
}
949
.linked.vertical > combobox {
951
> box > button.combo { @extend %linked_vertical_middle; }
952
&:first-child > box > button.combo { @extend %linked_vertical_entry:first-child; }
954
&:last-child > box > button.combo { @extend %linked_vertical_entry:last-child; }
956
&:only-child > box > button.combo { @extend %linked_vertical_entry:only-child; }
958
}
959
button.combo {
961
border-radius: $corner-radius $corner-radius 0 0;
962
background-image: none;
963
font-weight: inherit;
964
@include entry(normal);
966
&:focus { @include entry(focus); }
968
&:hover { @include entry(hover); }
970
&:checked { @include entry(checked); }
972
&:disabled { @include entry(disabled); }
974
}
975
/************
978
* Toolbars *
979
************/
980
toolbar {
981
-GtkWidget-window-dragging: true;
982
padding: 2px;
983
background-color: $background;
984
button { @extend %button_basic.flat; }
986
// on OSD
988
.osd & { background-color: transparent; }
989
// stand-alone OSD toolbars
991
&.osd {
992
transition: $transition-shadow;
993
padding: $container-padding;
994
border-radius: $corner-radius;
995
box-shadow: $shadow-2, inset 0 1px highlight($surface);
996
background-color: $surface;
997
&:backdrop { box-shadow: $shadow-1, inset 0 1px highlight($surface); }
999
&.left,
1001
&.right,
1002
&.top,
1003
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
1004
}
1005
// toolbar separators
1007
&.horizontal > separator { margin: 2px; }
1008
&.vertical > separator { margin: 2px; }
1009
&:not(.inline-toolbar):not(.osd) {
1011
scale,
1012
entry,
1013
spinbutton,
1014
button { margin: 2px; }
1015
.linked entry,
1017
.linked spinbutton,
1018
.linked button {
1019
&:not(:first-child) { margin-left: 0; }
1020
&:not(:last-child) { margin-right: 0; }
1021
}
1022
spinbutton {
1024
entry,
1025
button { margin: 0; }
1026
}
1027
switch { margin: 2px + $container-padding 2px; }
1029
}
1030
}
1031
// searchbar, location-bar & inline-toolbar
1033
.inline-toolbar {
1034
padding: $container-padding;
1035
border-style: solid;
1036
border-width: 0 1px 1px;
1037
border-color: $border;
1038
background-color: $base-alt;
1039
}
1040
searchbar > revealer > box,
1042
.location-bar {
1043
padding: $container-padding;
1044
border-style: solid;
1045
border-width: 0 0 1px;
1046
border-color: $border;
1047
background-color: $background;
1048
background-clip: border-box;
1049
}
1050
searchbar > revealer > box {
1052
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1053
margin: -6px;
1054
padding: $container-padding;
1055
}
1056
/***************
1059
* Header bars *
1060
***************/
1061
%titlebar,
1062
headerbar {
1063
transition: background-color $duration $ease-out, color $duration $ease-out;
1064
min-height: $large-size;
1065
padding: 0 $container-padding;
1066
box-shadow: $shadow-1, inset 0 1px highlight($titlebar);
1067
background-color: $titlebar;
1068
color: $titlebar-text;
1069
&:disabled { color: $titlebar-text-disabled; }
1071
&:backdrop {
1073
color: $titlebar-text-secondary;
1074
&:disabled { color: $titlebar-text-secondary-disabled; }
1076
}
1077
.title {
1079
padding: 0 12px;
1080
font-weight: bold;
1081
}
1082
.subtitle {
1084
padding: 0 12px;
1085
font-size: smaller;
1086
@extend .dim-label;
1088
}
1089
entry {
1091
box-shadow: inset 0 -1px $titlebar-track;
1092
background-color: $titlebar-fill;
1093
color: $titlebar-text;
1094
&:disabled {
1096
box-shadow: inset 0 -1px $titlebar-divider;
1097
background-color: $titlebar-fill;
1098
color: $titlebar-text-disabled;
1099
}
1100
image {
1102
color: $titlebar-text-secondary;
1103
&:hover, &:active { color: $titlebar-text; }
1105
&:disabled { color: $titlebar-text-disabled; }
1107
}
1108
}
1109
.linked:not(.vertical) > entry:not(.flat) { border-radius: $corner-radius $corner-radius 0 0; }
1111
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1113
@extend %button_basic.flat;
1114
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1116
$titlebar-indicator 0%,
1117
transparent 0%)
1118
0 0 0 / 0 0 0px;
1119
color: $titlebar-text-secondary;
1120
&:focus, &:hover, &:active { color: $titlebar-text; }
1122
&:disabled { color: $titlebar-text-secondary-disabled; }
1124
&:checked {
1126
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1127
$titlebar-indicator 100%,
1128
transparent 0%)
1129
0 0 2 / 0 0 2px;
1130
color: $titlebar-text;
1131
&:disabled { color: $titlebar-text-disabled; }
1133
&, &:disabled { background-color: transparent; }
1135
}
1136
&:backdrop {
1138
color: $titlebar-text-disabled;
1139
&:focus, &:hover, &:active { color: $titlebar-text-secondary; }
1141
&:disabled { color: $titlebar-text-secondary-disabled; }
1143
&:checked {
1145
color: $titlebar-text-secondary;
1146
&:disabled { color: $titlebar-text-secondary-disabled; }
1148
}
1149
}
1150
}
1151
button.suggested-action, button.destructive-action {
1153
&:disabled {
1154
background-color: $titlebar-fill;
1155
color: $titlebar-text-disabled;
1156
}
1157
}
1158
&.selection-mode {
1160
// 0.00001s was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1161
// but let's keep it for backwards compatibility.
1162
transition: background-color 0.00001s $duration-ripple, color $duration-ripple $ease-out;
1163
animation: ripple-headerbar $duration-ripple $ease-out;
1164
box-shadow: $shadow-1, inset 0 1px highlight($primary);
1165
background-color: $primary;
1166
color: on($primary);
1167
&:backdrop {
1169
color: on($primary, secondary);
1170
}
1171
.subtitle:link { color: on($primary); }
1173
button:not(.suggested-action):not(.destructive-action) {
1175
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1176
currentColor 0%,
1177
transparent 0%)
1178
0 0 0 / 0 0 0px;
1179
color: on($primary);
1180
&:disabled { color: on($primary, disabled); }
1182
&:checked {
1184
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1185
currentColor 100%,
1186
transparent 0%)
1187
0 0 2 / 0 0 2px;
1188
color: on($primary);
1189
&:disabled { color: on($primary, disabled); }
1191
}
1192
&:backdrop {
1194
color: on($primary, secondary);
1195
&:disabled { color: on($primary, secondary-disabled); }
1197
&:checked {
1199
color: on($primary, secondary);
1200
&:disabled { color: on($primary, secondary-disabled); }
1202
}
1203
}
1204
}
1205
.selection-menu {
1207
padding-left: 16px;
1208
padding-right: 16px;
1209
arrow { -GtkArrow-arrow-scaling: 1; }
1211
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1213
}
1214
}
1215
// squared corners when the window is maximized, tiled, or fullscreen
1217
.tiled &,
1218
.tiled-top &,
1219
.tiled-right &,
1220
.tiled-bottom &,
1221
.tiled-left &,
1222
.maximized &,
1223
.fullscreen & {
1224
border-radius: 0;
1225
box-shadow: $shadow-1;
1226
}
1227
&.default-decoration {
1229
min-height: $small-size;
1230
padding: $container-padding;
1231
box-shadow: inset 0 1px highlight($titlebar);
1232
.tiled &,
1234
.maximized &,
1235
.fullscreen & { box-shadow: none; }
1236
button.titlebutton {
1238
min-height: $small-size;
1239
min-width: $small-size;
1240
margin: 0;
1241
padding: 0;
1242
}
1243
// workaround for non-animatable buttons
1245
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1246
}
1247
.solid-csd & {
1249
&:dir(rtl), &:dir(ltr) { // specificity bump
1250
// margin-left: -2px;
1251
// margin-right: -2px;
1252
// margin-top: -2px;
1253
// border-radius: 0;
1254
box-shadow: $shadow-1; // Remove highlight as window managers should have it
1255
}
1256
}
1257
}
1258
headerbar {
1260
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1261
entry,
1262
spinbutton,
1263
button {
1264
margin-top: $container-padding;
1265
margin-bottom: $container-padding;
1266
}
1267
separator.titlebutton {
1269
margin-top: $large-size / 4;
1270
margin-bottom: $large-size / 4;
1271
background-color: $titlebar-divider;
1272
}
1273
switch {
1275
margin-top: ($large-size - 24px) / 2;
1276
margin-bottom: ($large-size - 24px) / 2;
1277
}
1278
// reset button margins of the spinbutton
1280
spinbutton button {
1281
margin-top: 0;
1282
margin-bottom: 0;
1283
}
1284
// FIXME: This is a hacky workaround.
1286
.entry-tag {
1287
margin-top: 5px;
1288
margin-bottom: 5px;
1289
}
1290
&.titlebar headerbar:not(.titlebar) {
1292
// Drop the background of non-titlebar nested headerbars. This is needed to
1293
// work around headerbar sliding animation issues without refactoring
1294
// Adwaita's support of titlebars and headerbars as it may break
1295
// applications.
1296
// See https://gitlab.gnome.org/GNOME/gtk/issues/1264 for more information.
1297
background-color: transparent;
1298
box-shadow: none;
1299
}
1300
}
1301
.background .titlebar {
1303
border-top-left-radius: $corner-radius;
1304
border-top-right-radius: $corner-radius;
1305
}
1306
.background.tiled .titlebar,
1308
.background.tiled-top .titlebar,
1309
.background.tiled-right .titlebar,
1310
.background.tiled-bottom .titlebar,
1311
.background.tiled-left .titlebar,
1312
.background.maximized .titlebar,
1313
.background.solid-csd .titlebar {
1314
border-top-left-radius: 0;
1315
border-top-right-radius: 0;
1316
}
1317
headerbar { // headerbar border rounding
1319
window separator:first-child + &, // tackles the paned container case
1320
window &:first-child { border-top-left-radius: $corner-radius; }
1321
window &:last-child { border-top-right-radius: $corner-radius; }
1323
window stack & { // tackles the stacked headerbars case
1325
&:first-child, &:last-child {
1326
border-top-left-radius: $corner-radius;
1327
border-top-right-radius: $corner-radius;
1328
}
1329
}
1330
window.tiled &,
1332
window.tiled-top &,
1333
window.tiled-right &,
1334
window.tiled-bottom &,
1335
window.tiled-left &,
1336
window.maximized &,
1337
window.fullscreen &,
1338
window.solid-csd & {
1339
&,
1340
&:first-child,
1341
&:last-child,
1342
&:only-child {
1343
border-top-left-radius: 0;
1344
border-top-right-radius: 0;
1345
}
1346
}
1347
}
1348
.titlebar:not(headerbar) {
1350
window.csd > & {
1351
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1352
padding: 0;
1353
background-color: transparent;
1354
background-image: none;
1355
border-style: none;
1356
box-shadow: none;
1357
}
1358
> separator {
1360
background-color: $titlebar;
1361
background-image: image($border);
1362
}
1363
@extend %titlebar;
1365
}
1366
// Development versions of apps to use a differently styled headerbar
1368
window.devel headerbar.titlebar:not(.selection-mode) {
1369
}
1370
/************
1373
* Pathbars *
1374
************/
1375
%pathbar_button,
1376
.path-bar button {
1377
padding-left: ($medium-size - 24px) / 2;
1378
padding-right: ($medium-size - 24px) / 2;
1379
label:not(:only-child) {
1381
&:first-child { margin-left: 4px; }
1382
&:last-child { margin-right: 4px; }
1384
}
1385
&.slider-button {
1387
padding-left: (24px - 16px) / 2;
1388
padding-right: (24px - 16px) / 2;
1389
}
1390
:not(headerbar) & {
1392
@extend %flat_button;
1393
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1395
$primary 0%,
1396
transparent 0%)
1397
0 0 0 / 0 0 0px;
1398
border-radius: $corner-radius;
1399
&:checked {
1401
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1402
$primary 100%,
1403
transparent 0%)
1404
0 0 2 / 0 0 2px;
1405
&, &:disabled { background-color: transparent; }
1407
}
1408
}
1409
}
1410
/**************
1413
* Tree Views *
1414
**************/
1415
treeview.view {
1416
@at-root * {
1417
-GtkTreeView-horizontal-separator: 4;
1418
-GtkTreeView-grid-line-width: 1;
1419
-GtkTreeView-grid-line-pattern: '';
1420
-GtkTreeView-tree-line-width: 1;
1421
-GtkTreeView-tree-line-pattern: '';
1422
-GtkTreeView-expander-size: 16;
1423
}
1424
border-left-color: $track; // this is actually the tree lines color,
1426
border-top-color: $border; // while this is the grid lines color, better then nothing
1427
// FIXME: Avoid transparency background-color being slightly darker
1429
&:selected {
1430
background-color: $base;
1431
background-image: image($overlay-selected);
1432
}
1433
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1435
&:hover, &:selected { border-radius: 0; }
1437
&.separator {
1439
min-height: 1px + 2px * 2;
1440
color: $border;
1441
}
1442
&:drop(active) {
1444
border-style: solid none;
1445
border-width: 1px;
1446
border-color: $primary;
1447
&.after { border-top-style: none; }
1449
&.before { border-bottom-style: none; }
1451
}
1452
&.expander {
1454
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1455
-gtk-icon-transform: rotate(-90deg);
1456
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1458
&:checked { -gtk-icon-transform: unset; }
1460
color: $text-secondary;
1462
&:hover, &:active { color: $text; }
1464
&:disabled { color: $text-secondary-disabled; }
1466
}
1467
&.progressbar { // progress bar in treeviews
1469
border-bottom: $bar-size solid $primary;
1470
box-shadow: none;
1471
background-color: transparent;
1472
background-image: none;
1473
&:selected:hover { box-shadow: none; }
1475
}
1476
&.trough { // progress bar trough in treeviews
1478
border-bottom: $bar-size solid $divider;
1479
box-shadow: none;
1480
background-color: transparent;
1481
background-image: none;
1482
&:selected:hover { box-shadow: none; }
1484
}
1485
header {
1487
button {
1488
@extend row.activatable;
1489
padding: 2px 6px;
1491
border-style: none solid solid none;
1492
border-width: 1px;
1493
border-color: $border;
1494
border-radius: 0;
1495
background-clip: border-box;
1496
&:not(:focus):not(:hover):not(:active) { color: $text-secondary; }
1498
&, &:hover, &:active { box-shadow: none; }
1500
&, &:disabled { background-color: $base; }
1502
&:last-child { border-right-style: none; }
1504
}
1505
}
1506
button.dnd,
1508
header.button.dnd { // for treeview-like derive widgets
1509
padding: 2px 6px;
1510
border-style: none solid solid;
1511
border-width: 1px;
1512
border-color: $border;
1513
border-radius: 0;
1514
box-shadow: none;
1515
background-color: $base;
1516
background-clip: border-box;
1517
color: $primary;
1518
}
1519
acceleditor > label { background-color: $primary; } // see tests/testaccel to test
1521
}
1522
/*********
1525
* Menus *
1526
*********/
1527
menubar,
1528
.menubar {
1529
-GtkWidget-window-dragging: true;
1530
padding: 0;
1531
// box-shadow: inset 0 -1px $border;
1532
background-color: $titlebar;
1533
color: $titlebar-text;
1534
> menuitem {
1536
transition: $transition;
1537
min-height: 20px;
1538
padding: 4px 8px;
1539
color: $titlebar-text-secondary;
1540
&:hover { // Seems like it :hover even with keyboard focus
1542
transition: none;
1543
background-color: $overlay-checked;
1544
color: $titlebar-text;
1545
}
1546
&:disabled { color: $titlebar-text-secondary-disabled; }
1548
label:disabled { color: inherit; } // to inherit the above color
1550
}
1551
}
1552
// Needed to make the border-radius of menus work
1554
// otherwise the background bleeds out of the menu edges
1555
.background.popup { background-color: transparent; }
1556
menu,
1558
.menu,
1559
.context-menu {
1560
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1561
padding: 4px 0;
1562
box-shadow: inset 0 1px highlight($surface);
1563
background-color: $surface;
1564
border: 1px solid $border; // adds borders in a non composited env
1565
.csd & {
1567
border: none; // axes borders in a composited env
1568
border-radius: $corner-radius;
1569
}
1570
menuitem {
1572
transition: background-color $duration $ease-out;
1573
min-height: 20px;
1574
min-width: 40px;
1575
padding: 4px 8px;
1576
font: initial;
1577
text-shadow: none;
1578
&:hover {
1580
transition: none;
1581
background-color: $overlay-hover;
1582
}
1583
&:disabled { color: $text-disabled; }
1585
// submenu indicators
1587
arrow {
1588
min-height: 16px;
1589
min-width: 16px;
1590
&:dir(ltr) {
1592
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1593
margin-left: 8px;
1594
}
1595
&:dir(rtl) {
1597
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1598
margin-right: 8px;
1599
}
1600
}
1601
// avoids labels color being overridden, see
1603
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1604
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1605
}
1606
// overflow arrows
1608
> arrow {
1609
min-height: 16px;
1610
min-width: 16px;
1611
padding: 4px;
1612
background-color: $surface;
1613
color: $text-secondary;
1614
&.top {
1616
margin-top: -4px;
1617
border-bottom: 1px solid $border;
1618
border-radius: $corner-radius $corner-radius 0 0;
1619
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1620
}
1621
&.bottom {
1623
margin-top: 4px * 2;
1624
margin-bottom: -4px * 3;
1625
border-top: 1px solid $border;
1626
border-radius: 0 0 $corner-radius $corner-radius;
1627
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1628
}
1629
&:hover {
1631
background-image: image($overlay-hover);
1632
color: $text;
1633
}
1634
&:disabled {
1636
border-color: transparent;
1637
background-color: transparent;
1638
color: transparent;
1639
// color: $text-secondary-disabled;
1640
}
1641
}
1642
separator { margin: 4px 0; }
1644
}
1645
menuitem {
1647
accelerator { color: $text-secondary; }
1648
&:disabled accelerator { color: $text-secondary-disabled; }
1650
}
1651
/************
1654
* Popovers *
1655
************/
1656
popover.background {
1657
transition: $transition-shadow;
1658
padding: 2px;
1659
box-shadow: $shadow-2; // TODO: this should really have a highlight
1660
background-color: $surface;
1661
&:backdrop { box-shadow: $shadow-1; }
1663
&, .csd & {
1665
border-style: solid;
1666
border-width: 1px;
1667
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1668
border-radius: $corner-radius + 1px;
1669
}
1670
> stack { margin: -4px; } // remove extra padding from menu style popovers
1672
> toolbar { margin: -2px; }
1674
> list,
1676
> .view,
1677
> toolbar {
1678
border-style: none;
1679
box-shadow: none;
1680
background-color: transparent;
1681
}
1682
// FIXME: Use the popover color instead of transparent as a workaround for .view
1684
list,
1685
.view:not(:selected),
1686
toolbar { background-color: $surface; }
1687
// &.touch-selection,
1689
// &.magnifier,
1690
// &.osd { @extend %osd; }
1691
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1693
&.menu button,
1695
button.model {
1696
@extend %simple_flat_button;
1697
min-height: 32px;
1699
padding: 0 8px;
1700
border-radius: $corner-radius;
1701
&:checked { @extend %selected_items; }
1703
}
1704
separator { margin: 4px 0; }
1706
list separator { margin: 0; }
1708
}
1709
/*************
1711
* Notebooks *
1712
*************/
1713
notebook {
1714
frame > paned > & > header,
1715
&.frame > header { background-color: $base-alt; }
1716
&:focus tab:checked {
1718
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
1719
outline: none;
1720
}
1721
> header {
1723
border-width: 1px;
1724
border-color: $border;
1725
background-color: $background;
1726
background-clip: border-box;
1727
&.top {
1729
border-bottom-style: solid;
1730
> tabs {
1732
margin-bottom: -1px;
1733
> tab {
1735
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1736
&:checked { border-image-source: linear-gradient(to top, $primary 2px, $border 2px); }
1738
&.reorderable-page { border-image-width: 0 1px 2px; }
1740
}
1741
}
1742
}
1743
&.bottom {
1745
border-top-style: solid;
1746
> tabs {
1748
margin-top: -1px;
1749
> tab {
1751
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1752
&:checked { border-image-source: linear-gradient(to bottom, $primary 2px, $border 2px); }
1754
&.reorderable-page { border-image-width: 2px 1px 0; }
1756
}
1757
}
1758
}
1759
&.left {
1761
border-right-style: solid;
1762
> tabs {
1764
margin-right: -1px;
1765
> tab {
1767
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1768
&:checked { border-image-source: linear-gradient(to left, $primary 2px, $border 2px); }
1770
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1772
}
1773
}
1774
}
1775
&.right {
1777
border-left-style: solid;
1778
> tabs {
1780
margin-left: -1px;
1781
> tab {
1783
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1784
&:checked { border-image-source: linear-gradient(to right, $primary 2px, $border 2px); }
1786
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1788
}
1789
}
1790
}
1791
&.top > tabs > arrow {
1793
@extend %notebook_vert_arrows;
1794
border-top-style: none;
1796
}
1797
&.bottom > tabs > arrow {
1799
@extend %notebook_vert_arrows;
1800
border-bottom-style: none;
1802
}
1803
@at-root %notebook_vert_arrows {
1805
padding-left: 4px;
1806
padding-right: 4px;
1807
&.down {
1809
margin-left: -8px;
1810
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1811
}
1812
&.up {
1814
margin-right: -8px;
1815
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1816
}
1817
}
1818
&.left > tabs > arrow {
1820
@extend %notebook_horz_arrows;
1821
border-left-style: none;
1823
}
1824
&.right > tabs > arrow {
1826
@extend %notebook_horz_arrows;
1827
border-right-style: none;
1829
}
1830
@at-root %notebook_horz_arrows {
1832
padding-top: 4px;
1833
padding-bottom: 4px;
1834
&.down {
1836
margin-top: -8px;
1837
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1838
}
1839
&.up {
1841
margin-bottom: -8px;
1842
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1843
}
1844
}
1845
> tabs > arrow {
1847
@extend %simple_flat_button;
1848
min-height: 16px;
1850
min-width: 16px;
1851
border-radius: 0;
1852
}
1853
tab {
1855
transition: $transition,
1856
background-size 0,
1857
background-image 0;
1858
min-height: $small-size;
1859
min-width: $small-size;
1860
padding: $container-padding 12px;
1861
outline-offset: -6px;
1863
border-width: 1px; // for reorderable tabs
1865
border-color: transparent; //
1866
background-image: radial-gradient(circle farthest-corner at center,
1868
$primary 10%,
1869
transparent 0%);
1870
background-repeat: no-repeat;
1871
background-position: center;
1872
background-size: 0% 0%;
1873
background-clip: border-box;
1874
color: $text-secondary;
1876
font-weight: 500;
1877
&:hover {
1879
background-color: $overlay-hover;
1880
color: $text;
1881
}
1882
&:disabled { color: $text-secondary-disabled; }
1884
&:checked {
1886
transition: $transition,
1887
background-size $duration-ripple $ease-out,
1888
background-image $duration-ripple + $duration-ripple-aftermath $ease-out;
1889
background-color: transparent;
1890
background-image: radial-gradient(circle farthest-corner at center,
1891
transparent 10%,
1892
transparent 0%);
1893
background-size: 1000% 1000%;
1894
background-clip: padding-box;
1895
color: $text;
1896
&:disabled { color: $text-disabled; }
1898
&.reorderable-page {
1900
border-color: $border;
1901
background-color: $base;
1902
}
1903
}
1904
// colors the button like the label, overridden otherwise
1906
button.flat {
1907
@extend %small_button;
1908
&:last-child {
1910
margin-left: $container-padding;
1911
margin-right: $container-padding - 12px;
1912
}
1913
&:first-child {
1915
margin-left: $container-padding - 12px;
1916
margin-right: $container-padding;
1917
}
1918
}
1919
}
1920
&.top,
1922
&.bottom {
1923
tabs {
1924
padding-left: 8px;
1925
padding-right: 8px;
1926
&:not(:only-child) {
1928
&:first-child { margin-left: 0; }
1929
&:last-child { margin-right: 0; }
1931
}
1932
tab.reorderable-page { border-style: none solid; }
1934
}
1935
}
1936
&.left,
1938
&.right {
1939
tabs {
1940
padding-top: 8px;
1941
padding-bottom: 8px;
1942
&:not(:only-child) {
1944
&:first-child { margin-top: 0; }
1945
&:last-child { margin-bottom: 0; }
1947
}
1948
tab.reorderable-page { border-style: solid none; }
1950
}
1951
}
1952
}
1953
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1955
background-color: $base;
1956
}
1957
}
1958
/**************
1961
* Scrollbars *
1962
**************/
1963
scrollbar {
1964
$_slider_min_length: 24px;
1965
// disable steppers
1967
@at-root * {
1968
-GtkScrollbar-has-backward-stepper: false;
1969
-GtkScrollbar-has-forward-stepper: false;
1970
}
1971
transition: $transition;
1973
background-color: $base;
1974
background-clip: $background-clip-extra;
1975
// scrollbar border
1977
&.top { border-bottom: 1px solid $border; }
1978
&.bottom { border-top: 1px solid $border; }
1979
&.left { border-right: 1px solid $border; }
1980
&.right { border-left: 1px solid $border; }
1981
// slider
1983
slider {
1984
transition: $transition, margin 0, border-width 0;
1985
min-width: 8px;
1986
min-height: 8px;
1987
border: 4px solid transparent;
1988
border-radius: $circular-radius;
1989
background-clip: padding-box;
1990
background-color: $text-disabled;
1991
&:hover { background-color: $text-secondary; }
1993
&:active { background-color: $text; }
1995
&:disabled { background-color: $text-secondary-disabled; }
1997
}
1998
&.fine-tune {
2000
slider {
2001
transition: $transition, margin 0, border-width 0, min-width 0, min-height 0;
2002
min-width: 4px;
2003
min-height: 4px;
2004
}
2005
&.horizontal slider { margin: 2px 0; }
2007
&.vertical slider { margin: 0 2px; }
2009
}
2010
&.overlay-indicator {
2012
&:not(.dragging):not(.hovering) {
2013
border-color: transparent;
2014
background-color: transparent;
2015
slider {
2017
min-width: 4px;
2018
min-height: 4px;
2019
margin: 4px - 1px;
2020
border: 1px solid rgba($base, 0.3);
2021
}
2022
button {
2024
min-width: 4px;
2025
min-height: 4px;
2026
margin: 4px - 1px;
2027
border: 1px solid rgba($base, 0.3);
2028
border-radius: $circular-radius;
2029
background-color: $text-disabled;
2030
background-clip: padding-box;
2031
-gtk-icon-source: none;
2032
&:disabled { background-color: $text-secondary-disabled; }
2034
}
2035
&.horizontal {
2037
slider { min-width: $_slider_min_length; }
2038
button { min-width: 8px; }
2040
}
2041
&.vertical {
2043
slider { min-height: $_slider_min_length; }
2044
button { min-height: 8px; }
2046
}
2047
}
2048
&.dragging,
2050
&.hovering { background-color: rgba($base, 0.9); }
2051
}
2052
&.horizontal slider { min-width: $_slider_min_length; }
2054
&.vertical slider { min-height: $_slider_min_length; }
2056
// button styling
2058
button {
2059
@extend %simple_flat_button;
2060
min-width: 16px;
2062
min-height: 16px;
2063
padding: 0;
2064
border-radius: 0;
2065
}
2066
// button icons
2068
&.vertical {
2069
button {
2070
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2071
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2073
}
2074
}
2075
&.horizontal {
2077
button {
2078
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2079
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2081
}
2082
}
2083
}
2084
/**********
2087
* Switch *
2088
**********/
2089
switch {
2090
transition: all $duration $ease-out;
2091
margin: $container-padding 0;
2092
padding: 0 2px;
2093
border: 5px solid transparent;
2094
border-radius: $circular-radius;
2095
background-color: $track;
2096
background-clip: padding-box;
2097
font-size: 0;
2098
&:checked { background-color: rgba($primary, 0.5); }
2100
&:disabled { opacity: 0.5; }
2102
// hide on/off icons for >=3.24.5
2104
image {
2105
margin: -8px;
2106
-gtk-icon-transform: scale(0);
2107
}
2108
slider {
2110
transition: all $duration $ease-out;
2111
min-width: 20px;
2112
min-height: 20px;
2113
margin: -3px -2px;
2114
border-radius: $circular-radius;
2115
outline: none;
2116
box-shadow: 0 0 0 10px transparent, $shadow-1;
2117
background-color: $surface;
2118
}
2119
&:hover slider { box-shadow: 0 0 0 10px $overlay-hover, $shadow-1; }
2121
&:focus slider { box-shadow: 0 0 0 10px $overlay-focus, $shadow-1; }
2123
&:focus:hover slider { box-shadow: 0 0 0 10px $overlay-focus-hover, $shadow-1; }
2125
&:checked slider {
2127
background-color: $primary;
2128
color: $primary;
2129
}
2130
row:selected & {
2132
}
2133
}
2134
/*************************
2137
* Check and Radio items *
2138
*************************/
2139
// draw regular check and radio items using our PNG assets
2140
// all assets are rendered from assets.svg. never add pngs directly
2141
// selection-mode
2143
.view.content-view.check:not(list),
2144
.content-view .tile check:not(list) {
2145
min-height: 40px;
2146
min-width: 40px;
2147
margin: 0;
2148
padding: 0;
2149
box-shadow: none;
2150
background-color: transparent;
2151
background-image: none;
2152
-gtk-icon-shadow: $shadow-1;
2153
&:hover, &:active { -gtk-icon-shadow: $shadow-2; }
2155
@each $s, $as in ('', '-unchecked'),
2157
(':checked', '-checked') {
2158
&#{$s} {
2159
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}.png"),
2160
url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}@2.png"));
2161
}
2162
}
2163
}
2164
checkbutton,
2166
radiobutton {
2167
outline: none;
2168
}
2169
checkbutton.text-button,
2171
radiobutton.text-button {
2172
// this is for a nice focus on check and radios text
2173
padding: 2px;
2174
label:not(:only-child) { margin: 0 4px; }
2176
}
2177
$check_radio_size: 40px;
2179
check,
2181
radio {
2182
min-height: 24px;
2183
min-width: 24px;
2184
margin: -($check_radio_size - 24px) / 2;
2185
padding: ($check_radio_size - 24px) / 2;
2186
@extend %simple_flat_button;
2188
@extend %circular_button;
2190
&:hover { box-shadow: inset 0 0 0 9999px $overlay-hover; }
2192
&:focus { box-shadow: inset 0 0 0 9999px $overlay-focus; }
2194
&:focus:hover { box-shadow: inset 0 0 0 9999px $overlay-focus-hover; }
2196
&:checked, &:indeterminate {
2198
color: $primary;
2199
&:disabled { color: $text-secondary-disabled; }
2201
}
2202
// &:only-child { margin: -12px; }
2204
popover modelbutton.flat & {
2206
&, &:focus, &:hover, &:focus:hover, &:active, &:disabled {
2207
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2208
box-shadow: none;
2209
background-image: none;
2210
}
2211
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2213
&.left:dir(rtl) {
2215
margin-left: -12px;
2216
margin-right: -4px;
2217
}
2218
&.right:dir(ltr) {
2220
margin-left: -4px;
2221
margin-right: -12px;
2222
}
2223
}
2224
menu menuitem & {
2226
transition: none;
2227
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2228
padding: 0;
2229
&:dir(ltr) { margin-right: 8px; }
2231
&:dir(rtl) { margin-left: 8px; }
2233
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2235
&, &:hover, &:disabled {
2237
box-shadow: none;
2238
// color: inherit;
2239
}
2240
}
2241
}
2242
%check,
2244
check {
2245
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2246
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2248
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2250
}
2251
%radio,
2253
radio {
2254
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2255
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2257
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2259
border-image-slice: $check_radio_size / 2px;
2261
border-image-width: $check_radio_size / 2;
2262
$radio_indicator: 10px / $check_radio_size / 2;
2264
& {
2266
border-image-source: -gtk-gradient(radial,
2267
center center, 0,
2268
center center, 0.001,
2269
to($primary),
2270
to(transparent));
2271
}
2272
&:checked:not(:indeterminate) {
2274
border-image-source: -gtk-gradient(radial,
2275
center center, 0,
2276
center center, $radio_indicator,
2277
to($primary),
2278
to(transparent));
2279
}
2280
&:checked:not(:indeterminate):disabled {
2282
border-image-source: -gtk-gradient(radial,
2283
center center, 0,
2284
center center, $radio_indicator,
2285
to($text-secondary-disabled),
2286
to(transparent));
2287
}
2288
}
2289
%small_check,
2291
menu menuitem check {
2292
& {
2293
min-height: 16px;
2294
min-width: 16px;
2295
border-radius: $corner-radius;
2296
-gtk-outline-radius: $corner-radius;
2297
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2298
}
2299
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2301
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2303
}
2304
%small_radio,
2306
menu menuitem radio {
2307
& {
2308
min-height: 16px;
2309
min-width: 16px;
2310
border-image: none;
2311
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2312
}
2313
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2315
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2317
}
2318
// ANIMATION:
2320
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2321
// the transformation is set on the active state and it get reset on the checked state.
2322
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2323
treeview.view check,
2325
treeview.view radio {
2326
padding: 0;
2327
&:hover, &:selected {
2329
box-shadow: none;
2330
background-color: transparent;
2331
}
2332
& {
2334
color: $text-secondary;
2335
&:hover, &:active { color: $text; }
2337
&:disabled { color: $text-secondary-disabled; }
2339
&:checked, &:indeterminate { color: $primary; }
2341
&:checked:disabled, &:indeterminate:disabled { color: $text-secondary-disabled; }
2343
}
2344
}
2345
treeview.view radio:checked {
2347
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2348
border-image: none;
2349
}
2350
/************
2353
* GtkScale *
2354
************/
2355
scale {
2356
// sizing
2357
$_marks_length: 8px;
2358
$_marks_distance: 7px;
2359
$trough_size: 2px;
2361
$finetune_trough_size: 4px;
2362
$slider_size: 32px;
2364
$slider_margin: -($slider_size - $trough_size) / 2;
2366
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2367
$color_slider_margin: -($slider_size) * 3 / 4;
2369
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2370
min-height: $trough_size;
2372
min-width: $trough_size;
2373
&.horizontal { padding: ($medium-size - $trough_size) / 2 12px; }
2375
&.vertical { padding: 12px ($medium-size - $trough_size) / 2; }
2377
// the slider is inside the trough, so to have make it bigger there's a negative margin
2379
slider {
2380
min-height: $slider_size;
2381
min-width: $slider_size;
2382
margin: $slider_margin;
2383
}
2384
// click-and-hold the slider to activate
2386
&.fine-tune {
2387
&.horizontal {
2388
min-height: $finetune_trough_size;
2389
padding-top: ($medium-size - $finetune_trough_size) / 2;
2390
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2391
}
2392
&.vertical {
2394
min-width: $finetune_trough_size;
2395
padding-left: ($medium-size - $finetune_trough_size) / 2;
2396
padding-right: ($medium-size - $finetune_trough_size) / 2;
2397
}
2398
// to make the trough grow in fine-tune mode
2400
slider { margin: $finetune_slider_margin; }
2401
}
2402
// the backing bit
2404
trough {
2405
transition: background-color $duration $ease-out;
2406
outline: none;
2407
background-color: $track;
2408
&:disabled { background-color: $divider; }
2410
}
2411
// the colored part of the backing bit
2413
highlight {
2414
transition: background-color $duration $ease-out;
2415
background-color: $primary;
2416
&:disabled { background-color: transparent; }
2418
}
2419
// this is another differently styled part of the backing bit, the most relevant use case is for example
2421
// in media player to indicate how much video stream as been cached
2422
fill {
2423
transition: background-color $duration $ease-out;
2424
background-color: $track;
2425
&:disabled { background-color: transparent; }
2427
}
2428
slider {
2430
transition: background-color $duration $ease-out,
2431
background-size $duration-ripple-aftermath $ease-out,
2432
background-image $duration-ripple-aftermath-opacity $ease-out;
2433
background-repeat: no-repeat;
2434
background-position: center;
2435
background-size: auto, 1000% 1000%;
2436
border-radius: 50%;
2437
color: $primary;
2438
@each $s, $as in ('', ''),
2440
(':disabled', '-disabled') {
2441
&#{$s} {
2442
$_url: 'assets/scale-slider#{$as}#{$asset-suffix}';
2443
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2445
radial-gradient(circle farthest-corner at center,
2446
transparent 10%,
2447
transparent 0%);
2448
}
2449
}
2450
&:hover { background-color: $overlay-hover; }
2452
&:focus { background-color: $overlay-focus; }
2454
&:focus:hover { background-color: $overlay-focus-hover; }
2456
&:active {
2458
$_url: 'assets/scale-slider#{$asset-suffix}';
2459
transition: background-color $duration $ease-out,
2461
background-size 0,
2462
background-image 0;
2463
animation: ripple-slider $duration-ripple $ease-out forwards;
2464
background-color: $overlay-hover;
2465
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2466
radial-gradient(circle farthest-corner at center,
2467
$overlay-active 10%,
2468
transparent 0%);
2469
background-size: auto, 0% 0%;
2470
}
2471
}
2472
marks label,
2474
value { color: $text-secondary; }
2475
marks {
2477
color: $track;
2478
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2480
(bottom, bottom, top),
2481
(left, left, right),
2482
(right, right, left) {
2483
&.#{$marks_class} {
2484
margin-#{$marks_margin}: $_marks_distance;
2485
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2486
}
2487
}
2488
}
2489
&.fine-tune marks {
2491
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2492
(bottom, bottom, top),
2493
(left, left, right),
2494
(right, right, left) {
2495
&.#{$marks_class} {
2496
margin-#{$marks_margin}: $_marks_distance - 1px;
2497
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2498
}
2499
}
2500
}
2501
&.horizontal {
2503
indicator {
2504
min-height: $_marks_length;
2505
min-width: 1px;
2506
}
2507
}
2508
&.vertical {
2510
indicator {
2511
min-height: 1px;
2512
min-width: $_marks_length;
2513
}
2514
}
2515
// *WARNING* scale with marks madness following
2517
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2519
('vertical', 'vert') {
2520
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2521
('marks-after', 'marks-after:not(.marks-before)') {
2522
&.#{$dir_class}.#{$marks_class} {
2523
slider {
2524
@each $state, $state_infix in ('', ''),
2525
(':disabled', '-disabled') {
2526
&#{$state} {
2527
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2528
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2530
radial-gradient(circle farthest-corner at center,
2531
transparent 10%,
2532
transparent 0%);
2533
}
2534
}
2535
&:active {
2537
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$asset-suffix}';
2538
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2540
radial-gradient(circle farthest-corner at center,
2541
$overlay-active 10%,
2542
transparent 0%);
2543
}
2544
}
2545
}
2546
}
2547
}
2548
&.color {
2550
min-height: 0;
2551
min-width: 0;
2552
&.horizontal {
2554
padding: 0 0 12px 0;
2555
slider {
2557
&:dir(ltr), &:dir(rtl) { // specificity bump
2558
margin-bottom: $color_slider_margin;
2559
margin-top: $color_marks_slider_margin;
2560
}
2561
}
2562
}
2563
&.vertical {
2565
&:dir(ltr) {
2566
padding: 0 0 0 12px;
2567
slider {
2569
margin-left: $color_slider_margin;
2570
margin-right: $color_marks_slider_margin;
2571
}
2572
}
2573
&:dir(rtl) {
2575
padding: 0 12px 0 0;
2576
slider {
2578
margin-right: $color_slider_margin;
2579
margin-left: $color_marks_slider_margin;
2580
}
2581
}
2582
}
2583
}
2584
}
2585
/*****************
2588
* Progress bars *
2589
*****************/
2590
progressbar {
2591
// sizing
2592
&.horizontal {
2593
trough,
2594
progress { min-height: $bar-size; }
2595
}
2596
&.vertical {
2598
trough,
2599
progress { min-width: $bar-size; }
2600
}
2601
// FIXME: insensitive state missing and some other state should be set probably
2603
color: $text-secondary;
2604
font-size: smaller;
2605
trough { background-color: $divider; }
2607
progress { background-color: $primary; }
2609
&.osd { // progressbar.osd used for epiphany page loading progress
2611
// min-width: $bar-size;
2612
// min-height: $bar-size;
2613
// background-color: transparent;
2614
// trough { background-color: transparent; }
2616
// progress { background-color: $primary; }
2618
}
2619
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2621
}
2622
/*************
2625
* Level Bar *
2626
*************/
2627
levelbar {
2628
&.horizontal {
2629
block { min-height: $bar-size; }
2630
&.discrete block {
2632
min-width: $medium-size;
2633
&:not(:last-child) { margin-right: 2px; }
2635
}
2636
}
2637
&.vertical {
2639
block { min-width: $bar-size; }
2640
&.discrete block {
2642
min-height: $medium-size;
2643
&:not(:last-child) { margin-bottom: 2px; }
2645
}
2646
}
2647
// imitate the entry style
2649
trough {
2650
// padding: 2px;
2651
// border-radius: $corner-radius;
2652
// box-shadow: $shadow-1;
2653
// background-color: $base;
2654
// &:disabled { background-color: $base-alt; }
2656
}
2657
block {
2659
&.low { background-color: $warning; }
2660
&.high,
2662
&:not(.empty) { background-color: $primary; }
2663
&.full { background-color: $success; }
2665
&.empty { background-color: $divider; }
2667
}
2668
}
2669
/****************
2672
* Print dialog *
2673
*****************/
2674
printdialog {
2675
paper {
2676
padding: 0;
2677
border: 1px solid $border;
2678
background-color: $base;
2679
color: $text;
2680
}
2681
.dialog-action-box { margin: 12px; }
2683
}
2684
/**********
2687
* Frames *
2688
**********/
2689
frame > border,
2690
.frame {
2691
margin: 0;
2692
padding: 0;
2693
border: 1px solid $border;
2694
border-radius: 0;
2695
box-shadow: none;
2696
&.flat { border-style: none; }
2698
}
2699
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2701
actionbar > revealer > box {
2703
padding: $container-padding;
2704
border-top: 1px solid $border;
2705
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2707
}
2708
scrolledwindow {
2710
viewport.frame { // avoid double borders when viewport inside scrolled window
2711
border-style: none;
2712
}
2713
// This is used when content is touch-dragged past boundaries.
2715
// draws a box on top of the content, the size changes programmatically.
2716
@at-root overshoot {
2717
&.top { @include overshoot(top); }
2718
&.bottom { @include overshoot(bottom); }
2720
&.left { @include overshoot(left); }
2722
&.right { @include overshoot(right); }
2724
}
2725
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2727
@at-root undershoot {
2728
&.top { @include undershoot(top); }
2729
&.bottom { @include undershoot(bottom); }
2731
&.left { @include undershoot(left); }
2733
&.right { @include undershoot(right); }
2735
}
2736
@at-root junction { // the small square between two scrollbars
2738
border-style: solid none none solid;
2739
border-width: 1px;
2740
border-color: $border;
2741
background-color: $base;
2742
&:dir(rtl) { border-style: solid solid none none; }
2744
}
2745
}
2746
// vbox and hbox separators
2748
separator {
2749
min-width: 1px;
2750
min-height: 1px;
2751
background-color: $border;
2752
}
2753
%hide_separators {
2755
min-width: 0;
2756
min-height: 0;
2757
background-color: transparent;
2758
}
2759
/*********
2762
* Lists *
2763
*********/
2764
list {
2765
border-color: $border;
2766
background-color: $base;
2767
row { padding: 2px; }
2769
}
2770
row {
2772
&.activatable {
2773
transition: $transition,
2774
background-size $duration-ripple-aftermath $ease-out,
2775
background-image $duration-ripple-aftermath-opacity $ease-out;
2776
outline: none;
2777
box-shadow: inset 0 0 0 9999px transparent;
2778
background-image: radial-gradient(circle farthest-corner at center,
2779
transparent 10%,
2780
transparent 0%);
2781
background-repeat: no-repeat;
2782
background-position: center;
2783
background-size: 1000% 1000%;
2784
&:focus {
2786
box-shadow: inset 0 0 0 9999px $overlay-focus;
2787
}
2788
&:hover {
2790
transition: $transition,
2791
box-shadow 0,
2792
background-size $duration-ripple-aftermath $ease-out,
2793
background-image $duration-ripple-aftermath-opacity $ease-out;
2794
box-shadow: inset 0 0 0 9999px $overlay-hover;
2795
}
2796
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2798
&:active {
2799
transition: $transition,
2800
background-size 0,
2801
background-image 0;
2802
animation: ripple $duration-ripple $ease-out forwards;
2803
box-shadow: inset 0 0 0 9999px $overlay-hover;
2804
background-image: radial-gradient(circle farthest-corner at center,
2805
$overlay-active 10%,
2806
transparent 0%);
2807
background-size: 0% 0%;
2808
}
2809
}
2810
&:selected {
2812
@extend %selected_items;
2813
color: $primary; // for overlays
2814
image,
2816
label { color: $text; }
2817
button image,
2819
button label { color: inherit; }
2820
&:disabled {
2822
image,
2823
label { color: $text-disabled; }
2824
}
2825
}
2826
}
2827
/*********************
2830
* App Notifications *
2831
*********************/
2832
.app-notification {
2833
// @extend %osd;
2834
@extend toolbar.osd;
2836
margin: 8px;
2838
button { @extend %button_basic.flat; }
2840
&.frame,
2842
border { border-style: none; }
2843
}
2844
/*************
2847
* Expanders *
2848
*************/
2849
expander {
2850
title > arrow {
2851
transition: all $duration $ease-out;
2852
min-width: 16px;
2853
min-height: 16px;
2854
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2855
-gtk-icon-transform: rotate(-90deg);
2856
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2858
&:checked { -gtk-icon-transform: unset; }
2860
color: $text-secondary;
2862
&:hover, &:active { color: $text; }
2864
&:disabled { color: $text-secondary-disabled; }
2866
}
2867
}
2868
/************
2871
* Calendar *
2872
************/
2873
calendar {
2874
padding: 1px;
2875
border: 1px solid $border;
2876
color: $text;
2877
&:disabled { color: $text-disabled; }
2879
&:selected {
2881
@extend %selected_items;
2882
border-radius: $corner-radius + 1px;
2884
}
2885
&.header {
2887
border-style: none none solid;
2888
border-radius: 0;
2889
}
2890
&.button { @extend %simple_flat_button; }
2892
&.highlight {
2894
color: $text-secondary;
2895
font-weight: 500;
2896
}
2897
&:indeterminate { color: $text-secondary-disabled; }
2899
}
2900
/***********
2903
* Dialogs *
2904
***********/
2905
messagedialog { // Message Dialog styling
2906
&.background { background-color: $surface; }
2907
.titlebar {
2909
min-height: $small-size;
2910
border-style: none;
2911
box-shadow: inset 0 1px highlight($surface);
2912
background-color: $surface;
2913
color: $text;
2914
&:backdrop { color: $text-secondary; }
2916
}
2917
&.csd { // rounded bottom border styling for csd version
2919
&.background {
2920
// bigger radius for better antialiasing
2921
border-bottom-left-radius: $corner-radius;
2922
border-bottom-right-radius: $corner-radius;
2923
}
2924
.dialog-action-area {
2926
margin-top: -$container-padding;
2927
padding: $container-padding;
2928
button {
2930
@extend %simple_flat_button;
2931
border-radius: $corner-radius;
2932
&:not(:last-child) { margin-right: $container-padding; }
2934
&.suggested-action:not(:disabled) { color: $suggested; }
2936
&.destructive-action:not(:disabled) { color: $destructive; }
2938
}
2939
}
2940
}
2941
}
2942
filechooser {
2944
.dialog-action-box { border-top: 1px solid $border; }
2945
#pathbarbox {
2947
border-bottom: 1px solid $border;
2948
background-color: $background;
2949
> stack > box > button { // The new folder button
2951
@extend %button_basic.flat;
2952
@extend %circular_button;
2953
}
2954
}
2955
}
2956
filechooserbutton:drop(active) {
2958
box-shadow: none;
2959
}
2960
/***********
2963
* Sidebar *
2964
***********/
2965
.sidebar {
2966
border-style: none;
2967
background-color: $base-alt;
2968
&:not(separator) {
2970
@at-root %sidebar_left,
2971
&:dir(ltr),
2972
&.left,
2973
&.left:dir(rtl) {
2974
border-right: 1px solid $border;
2975
border-left-style: none;
2976
}
2977
@at-root %sidebar_right,
2979
&:dir(rtl),
2980
&.right {
2981
border-left: 1px solid $border;
2982
border-right-style: none;
2983
}
2984
}
2985
list { background-color: transparent; }
2987
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2989
}
2990
stacksidebar {
2992
&.sidebar {
2993
&:dir(ltr),
2994
&.left,
2995
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2996
&:dir(rtl),
2998
&.right { list { @extend %sidebar_right; }}
2999
}
3000
row {
3002
padding: 10px 4px;
3003
> label {
3005
padding-left: 6px;
3006
padding-right: 6px;
3007
}
3008
&.needs-attention > label { @extend %needs_attention; }
3010
}
3011
}
3012
separator.sidebar {
3014
background-color: $border;
3015
&.selection-mode,
3017
.selection-mode & {
3018
// background-color: $border;
3019
}
3020
}
3021
/****************
3024
* File chooser *
3025
****************/
3026
// dim the sidebar icons, see bug #786613 for details on this oddity
3027
row {
3028
image.sidebar-icon { color: $text-secondary; }
3029
}
3030
placessidebar {
3032
> viewport.frame { border-style: none; }
3033
list { padding: (4px - 3px) 0 4px; }
3035
row {
3037
// Needs overriding of the GtkListBoxRow padding
3038
min-height: 32px;
3039
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3040
padding: 0;
3041
border-radius: $corner-radius;
3042
// Using margins/padding directly in the SidebarRow
3044
// will make the animation of the new bookmark row jump
3045
> revealer { padding: 0 8px; }
3046
&:selected { font-weight: 500; }
3048
&:disabled { color: $text-disabled; }
3050
image.sidebar-icon {
3052
&:dir(ltr) { padding-right: 8px; }
3053
&:dir(rtl) { padding-left: 8px; }
3054
}
3055
label.sidebar-label {
3057
&:dir(ltr) { padding-right: 2px; }
3058
&:dir(rtl) { padding-left: 2px; }
3059
}
3060
&:selected image.sidebar-icon,
3062
&:selected label.sidebar-label { color: inherit; }
3063
@at-root button.sidebar-button {
3065
@extend %simple_flat_button;
3066
@extend %small_button;
3067
}
3068
&.sidebar-placeholder-row {
3070
min-height: 2px;
3071
padding: 0 8px;
3072
background-image: image($primary);
3073
background-clip: content-box;
3074
}
3075
&.sidebar-new-bookmark-row { color: $primary; }
3077
&:drop(active):not(:disabled) {
3079
box-shadow: inset 0 0 0 2px $primary;
3080
}
3081
}
3082
}
3083
placesview {
3085
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3086
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3088
// this selects the "connect to server" label
3090
> actionbar > revealer > box > label {
3091
padding-left: 8px;
3092
padding-right: 8px;
3093
}
3094
}
3095
/*********
3098
* Paned *
3099
*********/
3100
paned {
3101
> separator {
3102
min-width: 1px;
3103
min-height: 1px;
3104
-gtk-icon-source: none; // defeats the ugly default handle decoration
3105
border-style: none; // just to be sure
3106
background-color: transparent;
3107
// workaround, using background istead of a border since the border will get rendered twice (?)
3108
background-image: image($border);
3109
background-size: 1px 1px;
3110
background-clip: content-box; // avoids borders image being rendered twice (?)
3111
&.wide {
3113
min-width: 6px;
3114
min-height: 6px;
3115
background-color: $background;
3116
background-image: image($border), image($border);
3117
background-size: 1px 1px, 1px 1px;
3118
}
3119
}
3120
&.horizontal > separator {
3122
background-repeat: repeat-y;
3123
&:dir(ltr) {
3125
margin: 0 -8px 0 0;
3126
padding: 0 8px 0 0;
3127
background-position: left;
3128
}
3129
&:dir(rtl) {
3131
margin: 0 0 0 -8px;
3132
padding: 0 0 0 8px;
3133
background-position: right;
3134
}
3135
&.wide {
3137
margin: 0;
3138
padding: 0;
3139
background-repeat: repeat-y, repeat-y;
3140
background-position: left, right;
3141
}
3142
}
3143
&.vertical > separator {
3145
margin: 0 0 -8px 0;
3146
padding: 0 0 8px 0;
3147
background-repeat: repeat-x;
3148
background-position: top;
3149
&.wide {
3151
margin: 0;
3152
padding: 0;
3153
background-repeat: repeat-x, repeat-x;
3154
background-position: bottom, top;
3155
}
3156
}
3157
}
3158
/**************
3161
* GtkInfoBar *
3162
**************/
3163
infobar {
3164
border-style: none;
3165
&.info { background-color: $infobar-info; }
3167
&.question { background-color: $infobar-question; }
3169
&.warning { background-color: $infobar-warning; }
3171
&.error { background-color: $infobar-error; }
3173
&.info,
3175
&.question,
3176
&.warning,
3177
&.error {
3178
> label, & { color: on(dark); }
3179
button { @extend %button_selected; }
3181
selection {}
3183
*:link { color: on(dark); }
3185
}
3186
}
3187
/************
3190
* Tooltips *
3191
************/
3192
tooltip {
3193
&.background {
3194
// background-color needs to be set this way otherwise it gets drawn twice
3195
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3196
background-color: $tooltip;
3197
color: on($tooltip);
3198
}
3199
// padding: 4px; /* not working */
3201
border-radius: $corner-radius;
3202
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3203
&:not(.csd):not(.unity-csd) {
3205
// border: 1px solid $border;
3206
// border-radius: $corner-radius + 1px;
3207
// background-clip: $background-clip-extra;
3208
}
3209
// FIXME: we need a border or tooltips vanish on black background.
3211
decoration { background-color: transparent; }
3212
> box {
3214
margin: -6px; // Remove hard-coded 6px padding
3215
min-height: 32px - 4px * 2;
3216
padding: 4px 8px;
3217
}
3218
* {
3220
// workaround for Eclipse.
3221
// do not include any declaration here.
3222
// padding: 0;
3223
// background-color: transparent;
3224
// color: inherit;
3225
}
3226
}
3227
/*****************
3230
* Color Chooser *
3231
*****************/
3232
colorswatch {
3233
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3234
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3235
// applied to the overlay box.
3236
// base color corners rounding
3238
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3239
// sports a bigger radius.
3240
// nth-child is needed by the custom color strip.
3241
&.top {
3243
border-top-left-radius: $corner-radius + 0.5px;
3244
border-top-right-radius: $corner-radius + 0.5px;
3245
overlay {
3247
border-top-left-radius: $corner-radius;
3248
border-top-right-radius: $corner-radius;
3249
}
3250
}
3251
&.bottom {
3253
border-bottom-left-radius: $corner-radius + 0.5px;
3254
border-bottom-right-radius: $corner-radius + 0.5px;
3255
overlay {
3257
border-bottom-left-radius: $corner-radius;
3258
border-bottom-right-radius: $corner-radius;
3259
}
3260
}
3261
&.left,
3263
&:first-child:not(.top) {
3264
border-top-left-radius: $corner-radius + 0.5px;
3265
border-bottom-left-radius: $corner-radius + 0.5px;
3266
overlay {
3268
border-top-left-radius: $corner-radius;
3269
border-bottom-left-radius: $corner-radius;
3270
}
3271
}
3272
&.right,
3274
&:last-child:not(.bottom) {
3275
border-top-right-radius: $corner-radius + 0.5px;
3276
border-bottom-right-radius: $corner-radius + 0.5px;
3277
overlay {
3279
border-top-right-radius: $corner-radius;
3280
border-bottom-right-radius: $corner-radius;
3281
}
3282
}
3283
&.dark { color: on(dark); }
3285
&.light { color: on(light); }
3287
&:drop(active) {
3289
box-shadow: none;
3290
&.light overlay { box-shadow: $shadow-1, 0 0 0 2px $primary; }
3292
&.dark overlay { box-shadow: $shadow-1, 0 0 0 2px $primary; }
3294
}
3295
overlay {
3297
transition: $transition-shadow;
3298
box-shadow: $shadow-1;
3299
&:hover { box-shadow: $shadow-2; }
3301
}
3302
&#add-color-button {
3304
border-radius: $corner-radius $corner-radius 0 0;
3305
color: on(dark);
3306
&:only-child { border-radius: $corner-radius; }
3308
overlay {
3310
background-image: linear-gradient(to right,
3311
$red 25%,
3312
$yellow 25%, $yellow 50%,
3313
$green 50%, $green 75%,
3314
$blue 75%);
3315
}
3316
}
3317
&:disabled {
3319
opacity: 0.5;
3320
overlay { box-shadow: none; }
3322
}
3323
row:selected & {
3325
}
3326
&#editor-color-sample {
3328
border-radius: $corner-radius + 0.5px;
3329
overlay { border-radius: $corner-radius; }
3331
// overlay:hover { box-shadow: $shadow-1; }
3333
}
3334
}
3335
// colorscale popup
3337
colorchooser .popover.osd {
3338
transition: $transition-shadow;
3339
border-radius: $corner-radius;
3340
box-shadow: $shadow-2, inset 0 1px highlight($surface);
3341
background-color: $surface;
3342
&:backdrop { box-shadow: $shadow-1, inset 0 1px highlight($surface); }
3344
}
3345
/********
3348
* Misc *
3349
********/
3350
// content view (grid/list)
3351
.content-view {
3352
background-color: $background;
3353
// &:hover { -gtk-icon-effect: highlight; }
3355
rubberband, .rubberband { @extend rubberband; }
3357
}
3358
.scale-popup {
3360
// .osd & { @extend %osd; }
3361
.osd & button.flat { // FIXME: quick hack, redo properly
3363
}
3364
button { // +/- buttons on GtkVolumeButton popup
3366
}
3367
}
3368
/**********************
3371
* Window Decorations *
3372
**********************/
3373
decoration {
3374
transition: $transition-shadow;
3375
border-radius: $corner-radius $corner-radius 0 0;
3376
box-shadow: $shadow-4, 0 16px 16px transparent;
3377
// FIXME rationalize shadows
3379
// this is used for the resize cursor area
3381
margin: 8px;
3382
&:backdrop {
3384
// the transparent shadow here is to enforce that the shadow extents don't
3385
// change when we go to backdrop, to prevent jumping windows.
3386
// The biggest shadow should be in the same order then in the active state
3387
// or the jumping will happen during the transition.
3388
box-shadow: $shadow-2, 0 16px 16px transparent;
3389
}
3390
.maximized &,
3392
.fullscreen &,
3393
.tiled &,
3394
.tiled-top &,
3395
.tiled-right &,
3396
.tiled-bottom &,
3397
.tiled-left & { border-radius: 0; }
3398
.popup & { box-shadow: none; }
3400
// server-side decorations as used by mutter
3402
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3403
.csd.popup & {
3405
border-radius: $corner-radius;
3406
box-shadow: $shadow-2;
3407
}
3408
tooltip.csd & {
3410
border-radius: $corner-radius;
3411
box-shadow: none;
3412
}
3413
messagedialog.csd & {
3415
border-radius: $corner-radius;
3416
// box-shadow: $shadow-4, 0 16px 16px transparent;
3417
// &:backdrop { box-shadow: $shadow-2, 0 16px 16px transparent; }
3419
}
3420
.solid-csd & {
3422
margin: 0;
3423
// padding: 4px;
3424
border-radius: 0;
3425
box-shadow: none;
3426
// box-shadow: inset 0 0 0 4px $titlebar;
3427
background-color: $titlebar;
3428
}
3429
}
3430
// Window Close button
3432
button.titlebutton {
3433
// @extend %simple_flat_button;
3434
@extend %circular_button;
3436
.selection-mode & {
3438
}
3439
}
3440
// catch all extend :)
3443
%selected_items {
3445
background-color: $overlay-selected;
3446
}
3447
.monospace { font-family: monospace; }
3449
/**********************
3452
* Touch Copy & Paste *
3453
**********************/
3454
// touch selection handlebars for the Popover.osd above
3455
cursor-handle {
3456
color: $primary;
3457
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
3458
&.top:dir(ltr), &.bottom:dir(rtl) {
3460
-gtk-icon-transform: rotate(90deg);
3461
}
3462
&.bottom:dir(ltr), &.top:dir(rtl) {
3464
-gtk-icon-transform: unset;
3465
}
3466
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3468
padding-top: 6px;
3469
-gtk-icon-transform: rotate(45deg);
3470
}
3471
}
3472
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3474
// shortcut window keys
3476
.keycap {
3477
min-width: 28px - 8px * 2;
3478
min-height: 28px - 2px;
3479
margin-top: 2px;
3480
padding-bottom: 2px;
3481
padding-left: 8px;
3482
padding-right: 8px;
3483
border: solid 1px $border;
3485
border-radius: $corner-radius + 1px;
3486
box-shadow: inset 0 -2px $border;
3487
background-color: $surface;
3488
color: $text;
3489
font-size: smaller;
3490
}
3491
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3493
transition: $transition;
3494
box-shadow: $shadow-1, inset 0 0 0 2px $primary;
3495
caret-color: $primary;
3496
}
3497
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3499
stackswitcher button.circular,
3501
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3502
min-width: $medium-size;
3503
min-height: $medium-size;
3504
padding: 0;
3505
}
3506
/*************
3509
* App Icons *
3510
*************/
3511
// Outline for low res icons
3512
.lowres-icon {
3513
// -gtk-icon-shadow: none;
3514
}
3515
// Drapshadow for large icons
3517
.icon-dropshadow {
3518
// -gtk-icon-shadow: none;
3519
}
3520
/*********
3523
* Emoji *
3524
*********/
3525
popover.emoji-picker {
3526
padding: 0;
3527
entry {
3529
border-bottom: 1px solid $border;
3530
border-image: none;
3531
border-radius: 0;
3532
box-shadow: none;
3533
background-color: transparent;
3534
}
3535
scrolledwindow { border-bottom: 1px solid $border; }
3537
}
3538
// mimic tab style
3540
button.emoji-section {
3541
margin-top: -1px;
3542
padding: 0 8px;
3543
min-width: 24px;
3544
min-height: $medium-size;
3545
border-radius: 0;
3546
outline-offset: -6px;
3547
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3549
&:checked {
3551
box-shadow: inset 0 2px $primary;
3552
background-color: transparent;
3553
}
3554
&:hover, &:active { background-color: $overlay-hover; }
3556
&:first-child { margin-left: 4px; }
3558
&:last-child { margin-right: 4px; }
3560
}
3561
popover.emoji-picker .emoji {
3563
min-width: 3em;
3564
min-height: 3em;
3565
padding: 0 8px;
3566
// font-size: larger;
3567
widget {
3569
transition: $transition;
3570
border-radius: $corner-radius;
3571
&:hover { background-color: $overlay-hover; }
3573
}
3574
}
3575
popover.emoji-completion {
3577
padding: 8px 0;
3578
arrow {
3580
border: none;
3581
background: none;
3582
}
3583
.emoji-completion-row {
3585
min-height: $menuitem-size;
3586
padding: 0 12px;
3587
}
3588
.emoji:hover {
3590
background-color: $overlay-hover;
3591
}
3592
}
3593