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(focus); }
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(focus, $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
&:hover { @include button(hover); }
405
&:active { @include button(active); }
407
&:disabled { @include button(disabled); }
409
&:checked { @include button(checked); }
411
&:checked:disabled { @include button(checked-disabled); }
413
@at-root %flat_button, &.flat {
415
@at-root %simple_flat_button, & {
416
@include button(flat-normal);
417
&:hover { @include button(flat-hover); }
419
&:active { @include button(flat-active); }
421
&:disabled { @include button(flat-disabled); }
423
}
424
&:checked { @include button(flat-checked); }
426
&:checked:disabled { @include button(flat-checked-disabled); }
428
}
429
&.text-button {
431
padding-left: 16px;
432
padding-right: 16px;
433
}
434
&.image-button {
436
min-width: 24px;
437
padding: ($medium-size - 24px) / 2;
438
@extend %circular_button;
440
}
441
&.text-button.image-button {
443
border-radius: $corner-radius;
444
-gtk-outline-radius: $corner-radius;
445
label {
447
&:first-child { margin-left: 16px - ($medium-size - 24px) / 2; }
448
&:last-child { margin-right: 16px - ($medium-size - 24px) / 2; }
450
}
451
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
453
}
454
.linked > & { @extend %linked; }
456
.linked.vertical > & { @extend %linked_vertical; }
458
.linked > &.flat,
460
.linked.vertical > &.flat {
461
border-radius: $corner-radius;
462
&.image-button { @extend %circular_button; }
464
&.text-button.image-button {
466
border-radius: $corner-radius;
467
-gtk-outline-radius: $corner-radius;
468
}
469
}
470
&:drop(active) {
472
// box-shadow: inset 0 0 0 2px $primary;
473
}
474
}
475
@at-root %button_selected {
477
&.flat {
478
color: on(dark, secondary);
479
&:hover, &:active { color: on(dark); }
481
&:disabled { color: on(dark, secondary-disabled); }
483
&:checked {
485
background-color: on(dark, track);
486
color: on(dark);
487
}
488
&:checked:disabled {
490
background-color: on(dark, divider);
491
color: on(dark, disabled);
492
}
493
}
494
}
495
// big standalone buttons like in Documents pager
497
&.osd {
498
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
499
&.image-button { padding: ($large-size - 24px) / 2; }
501
&:disabled { opacity: 0; }
503
}
504
// overlay / OSD style
506
@at-root %osd_button,
507
.osd & {
508
}
509
// Suggested and Destructive Action buttons
511
@each $b_type, $b_color in (suggested-action, $suggested),
512
(destructive-action, $destructive) {
513
&.#{$b_type} {
514
background-color: $b_color;
515
color: on($b_color);
516
&:disabled { @include button(disabled); }
518
&:checked { background-color: mix(on($b_color), $b_color, percentage(0.3)); }
520
&.flat {
522
background-color: transparent;
523
color: $b_color;
524
&:disabled { @include button(flat-disabled); }
526
&:checked { background-color: rgba($b_color, 0.3); }
528
}
529
.osd & {
531
}
532
}
533
}
534
.stack-switcher > & {
536
// to position the needs attention dot, padding is added to the button
537
// child, a label needs just lateral padding while an icon needs vertical
538
// padding added too.
539
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
541
> label {
543
padding-left: 6px; // label padding
544
padding-right: 6px; //
545
}
546
> image {
548
padding-left: 6px; // image padding
549
padding-right: 6px; //
550
padding-top: 3px; //
551
padding-bottom: 3px; //
552
}
553
&.text-button {
555
// compensate text-button paddings
556
padding-left: 16px - 6px;
557
padding-right: 16px - 6px;
558
}
559
&.image-button {
561
// we want image buttons to have a 1:1 aspect ratio, so compensation
562
// of the padding added to the GtkImage is needed
563
padding-left: ($medium-size - 16px) / 2 - 6px;
564
padding-right: ($medium-size - 16px) / 2 - 6px;
565
}
566
&.needs-attention {
568
> label,
569
> image { @extend %needs_attention; }
570
&:checked {
572
> label,
573
> image {
574
animation: none;
575
background-image: none;
576
}
577
}
578
}
579
}
580
// hide separators
582
&.font,
583
&.file { separator { @extend %hide_separators; }}
584
// &.font { > box > box > label { font-weight: bold; }}
586
// inline-toolbar buttons
588
.inline-toolbar & {
589
// @extend %button_basic.flat;
590
&:not(.text-button) { @extend %circular_button; }
592
}
593
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
595
@at-root %circular_button,
597
&.close,
598
&.circular { // The Bloody Circul Button
599
border-radius: $circular-radius;
600
-gtk-outline-radius: $circular-radius;
601
// label { padding: 0; }
603
}
604
@at-root %small_button {
606
min-height: $small-size;
607
min-width: $small-size;
608
padding: 0;
609
border-radius: $circular-radius;
610
-gtk-outline-radius: $circular-radius;
611
}
612
}
613
%needs_attention {
615
animation: needs_attention $duration-ripple $ease-out forwards;
616
background-repeat: no-repeat;
617
background-position: right 3px;
618
background-size: 6px 6px;
619
&:dir(rtl) { background-position: left 3px; }
621
}
622
// all the following is for the +|- buttons on inline toolbars, that way
624
// should really be deprecated...
625
.inline-toolbar toolbutton > button { // redefining the button look is
626
// needed since those are flat...
627
}
628
// More inline toolbar buttons
630
toolbar.inline-toolbar toolbutton {
631
// > button.flat { @extend %linked_middle; }
632
// &:first-child > button.flat { @extend %linked:first-child; }
634
// &:last-child > button.flat { @extend %linked:last-child; }
636
// &:only-child > button.flat { @extend %linked:only-child; }
638
}
639
%linked_middle {
641
border-radius: 0;
642
-gtk-outline-radius: $corner-radius;
643
}
644
%linked {
646
@extend %linked_middle;
647
&:first-child {
649
border-top-left-radius: $corner-radius;
650
border-bottom-left-radius: $corner-radius;
651
}
652
&:last-child {
654
border-top-right-radius: $corner-radius;
655
border-bottom-right-radius: $corner-radius;
656
}
657
&:only-child {
659
border-radius: $corner-radius;
660
}
661
}
662
%linked_vertical_middle {
664
border-radius: 0;
665
-gtk-outline-radius: $corner-radius;
666
}
667
%linked_vertical {
669
@extend %linked_vertical_middle;
670
&:first-child {
672
border-top-left-radius: $corner-radius;
673
border-top-right-radius: $corner-radius;
674
}
675
&:last-child {
677
border-bottom-left-radius: $corner-radius;
678
border-bottom-right-radius: $corner-radius;
679
}
680
&:only-child {
682
border-radius: $corner-radius;
683
}
684
}
685
%linked_entry {
687
@extend %linked_middle;
688
&:first-child {
690
border-radius: $corner-radius 0 0 0;
691
}
692
&:last-child {
694
border-radius: 0 $corner-radius 0 0;
695
}
696
&:only-child {
698
border-radius: $corner-radius $corner-radius 0 0;
699
}
700
}
701
%linked_vertical_entry {
703
@extend %linked_vertical_middle;
704
&:first-child {
706
border-radius: $corner-radius $corner-radius 0 0;
707
}
708
&:last-child {
710
border-radius: 0;
711
}
712
&:only-child {
714
border-radius: $corner-radius $corner-radius 0 0;
715
}
716
}
717
/* menu buttons */
719
modelbutton.flat,
720
.menuitem.button.flat {
721
min-height: $menuitem-size;
722
padding: 0 8px;
723
border-radius: $corner-radius;
724
color: inherit;
725
@extend %simple_flat_button;
727
&:selected { @extend %selected_items; }
729
}
730
modelbutton.flat arrow {
732
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
733
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
735
}
736
button.color {
738
min-height: $small-size;
739
min-width: $small-size;
740
padding: $container-padding;
741
colorswatch:only-child {
743
// &, overlay { border-radius: 0; }
744
}
745
}
746
/*********
749
* Links *
750
*********/
751
*:link {
752
color: $link;
753
&:visited { color: $link-visited; }
755
}
756
button:link,
758
button:visited {
759
&, &:hover, &:active { @extend *:link; }
760
> label { text-decoration-line: underline; }
762
}
763
/*****************
765
* GtkSpinButton *
766
*****************/
767
spinbutton {
768
&:not(.vertical) {
769
// in this horizontal configuration, the whole spinbutton
770
// behaves as the entry, so we extend the entry styling
771
// and nuke the style on the internal entry
772
@extend %entry;
773
padding: 0;
775
entry {
777
min-width: $large-size - 8px * 2;
778
// reset all the other props since the spinbutton node is styled here
779
margin: 0;
780
border-image: none;
781
border-radius: 0;
782
box-shadow: none;
783
background-color: transparent;
784
}
785
button {
787
// margin: $container-padding;
788
border: solid $container-padding transparent;
789
@extend %simple_flat_button;
791
@extend %small_button;
793
&.up:dir(ltr),
795
&.down:dir(rtl) { margin-left: -$container-padding / 2; }
796
&.up:dir(rtl),
798
&.down:dir(ltr) { margin-right: -$container-padding / 2; }
799
}
800
}
801
// OSD horizontal
803
.osd &:not(.vertical) {
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: $text-disabled; }
815
&:drop(active) {
817
box-shadow: none;
818
}
819
entry {
821
@extend %entry_raised;
822
min-height: $medium-size;
824
min-width: $large-size;
825
padding: 0;
826
}
827
button {
829
min-height: $medium-size;
830
min-width: $large-size;
831
padding: 0;
832
@extend %simple_flat_button;
834
&.up { border-radius: $corner-radius $corner-radius 0 0; }
836
&.down { border-radius: 0 0 $corner-radius $corner-radius; }
838
}
839
}
840
// OSD vertical
842
.osd &.vertical {
843
}
844
// Misc
846
treeview &:not(.vertical) {
847
min-height: 0;
848
border-style: none;
849
border-radius: 0;
850
entry {
852
min-height: 0;
853
padding: 1px 2px;
854
}
855
}
856
}
857
/**************
860
* ComboBoxes *
861
**************/
862
combobox {
863
arrow {
864
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
865
min-height: 16px;
866
min-width: 16px;
867
}
868
decoration,
870
button.combo:checked { transition: none; } // workaround for menuitem selection
871
button.combo cellview {
873
&:dir(ltr) { margin-left: 8px - ($medium-size - 16px) / 2; }
874
&:dir(rtl) { margin-right: 8px - ($medium-size - 16px) / 2; }
875
}
876
#gtk-combobox-popup-menu {
878
padding: 2px 0;
879
menuitem {
881
min-height: $medium-size - 2px * 2;
882
padding: 0 8px;
883
}
884
// overflow arrows
886
> arrow {
887
&.top { margin-top: -2px; }
888
&.bottom {
890
margin-top: 2px * 2;
891
margin-bottom: -2px * 3;
892
}
893
}
894
}
895
&.linked {
897
button:nth-child(2) {
898
&:dir(ltr) { @extend %linked_entry:last-child; }
899
&:dir(rtl) { @extend %linked_entry:first-child; }
900
}
901
}
902
> .linked > button {
904
@extend %linked_middle;
905
&:first-child { @extend %linked_entry:first-child; }
907
&:last-child { @extend %linked_entry:last-child; }
909
&:only-child { @extend %linked_entry:only-child; }
911
}
912
&:drop(active) { // FIXME: untested
914
box-shadow: none;
915
// button.combo { @extend %button_basic:drop(active); }
917
}
918
}
919
// the combo is a composite widget so the way we do button linking doesn't
921
// work, special case needed. See
922
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
923
.linked:not(.vertical) > combobox {
925
> box > button.combo { @extend %linked_middle; }
926
&:first-child > box > button.combo { @extend %linked_entry:first-child; }
928
&:last-child > box > button.combo { @extend %linked_entry:last-child; }
930
&:only-child > box > button.combo { @extend %linked_entry:only-child; }
932
}
933
.linked.vertical > combobox {
935
> box > button.combo { @extend %linked_vertical_middle; }
936
&:first-child > box > button.combo { @extend %linked_vertical_entry:first-child; }
938
&:last-child > box > button.combo { @extend %linked_vertical_entry:last-child; }
940
&:only-child > box > button.combo { @extend %linked_vertical_entry:only-child; }
942
}
943
button.combo {
945
border-radius: $corner-radius $corner-radius 0 0;
946
background-image: none;
947
font-weight: inherit;
948
@include entry(normal);
950
&:hover { background-image: image($overlay-hover); }
952
&:checked { @include entry(focus); }
954
&:disabled { @include entry(disabled); }
956
}
957
/************
960
* Toolbars *
961
************/
962
toolbar {
963
-GtkWidget-window-dragging: true;
964
padding: 2px;
965
background-color: $background;
966
button { @extend %button_basic.flat; }
968
// on OSD
970
.osd & { background-color: transparent; }
971
// stand-alone OSD toolbars
973
&.osd {
974
transition: $transition-shadow;
975
padding: $container-padding;
976
border-radius: $corner-radius;
977
box-shadow: $shadow-2, inset 0 1px highlight($surface);
978
background-color: $surface;
979
&:backdrop { box-shadow: $shadow-1, inset 0 1px highlight($surface); }
981
&.left,
983
&.right,
984
&.top,
985
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
986
}
987
// toolbar separators
989
&.horizontal > separator { margin: 2px; }
990
&.vertical > separator { margin: 2px; }
991
&:not(.inline-toolbar):not(.osd) {
993
scale,
994
entry,
995
spinbutton,
996
button { margin: 2px; }
997
.linked entry,
999
.linked spinbutton,
1000
.linked button {
1001
&:not(:first-child) { margin-left: 0; }
1002
&:not(:last-child) { margin-right: 0; }
1003
}
1004
spinbutton {
1006
entry,
1007
button { margin: 0; }
1008
}
1009
switch { margin: 2px + $container-padding 2px; }
1011
}
1012
}
1013
// searchbar, location-bar & inline-toolbar
1015
.inline-toolbar {
1016
padding: $container-padding;
1017
border-style: solid;
1018
border-width: 0 1px 1px;
1019
border-color: $border;
1020
background-color: $base-alt;
1021
}
1022
searchbar > revealer > box,
1024
.location-bar {
1025
padding: $container-padding;
1026
border-style: solid;
1027
border-width: 0 0 1px;
1028
border-color: $border;
1029
background-color: $background;
1030
background-clip: border-box;
1031
}
1032
searchbar > revealer > box {
1034
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1035
margin: -6px;
1036
padding: $container-padding;
1037
}
1038
/***************
1041
* Header bars *
1042
***************/
1043
%titlebar,
1044
headerbar {
1045
transition: background-color $duration $ease-out, color $duration $ease-out;
1046
min-height: $large-size;
1047
padding: 0 $container-padding;
1048
box-shadow: $shadow-1, inset 0 1px highlight($titlebar);
1049
background-color: $titlebar;
1050
color: $titlebar-text;
1051
&:disabled { color: $titlebar-text-disabled; }
1053
&:backdrop {
1055
color: $titlebar-text-secondary;
1056
&:disabled { color: $titlebar-text-secondary-disabled; }
1058
}
1059
.title {
1061
padding: 0 12px;
1062
font-weight: bold;
1063
}
1064
.subtitle {
1066
padding: 0 12px;
1067
font-size: smaller;
1068
@extend .dim-label;
1070
}
1071
entry {
1073
box-shadow: inset 0 -1px $titlebar-track;
1074
background-color: $titlebar-fill;
1075
color: $titlebar-text;
1076
&:disabled {
1078
box-shadow: inset 0 -1px $titlebar-divider;
1079
background-color: $titlebar-fill;
1080
color: $titlebar-text-disabled;
1081
}
1082
image {
1084
color: $titlebar-text-secondary;
1085
&:hover, &:active { color: $titlebar-text; }
1087
&:disabled { color: $titlebar-text-disabled; }
1089
}
1090
}
1091
.linked:not(.vertical) > entry:not(.flat) { border-radius: $corner-radius $corner-radius 0 0; }
1093
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1095
@extend %button_basic.flat;
1096
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1098
$titlebar-indicator 0%,
1099
transparent 0%)
1100
0 0 0 / 0 0 0px;
1101
color: $titlebar-text-secondary;
1102
&:hover, &:active { color: $titlebar-text; }
1104
&:disabled { color: $titlebar-text-secondary-disabled; }
1106
&:checked {
1108
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1109
$titlebar-indicator 100%,
1110
transparent 0%)
1111
0 0 2 / 0 0 2px;
1112
color: $titlebar-text;
1113
&:disabled { color: $titlebar-text-disabled; }
1115
&, &:disabled { background-color: transparent; }
1117
}
1118
&:backdrop {
1120
color: $titlebar-text-disabled;
1121
&:hover, &:active { color: $titlebar-text-secondary; }
1123
&:disabled { color: $titlebar-text-secondary-disabled; }
1125
&:checked {
1127
color: $titlebar-text-secondary;
1128
&:disabled { color: $titlebar-text-secondary-disabled; }
1130
}
1131
}
1132
}
1133
button.suggested-action, button.destructive-action {
1135
&:disabled {
1136
background-color: $titlebar-fill;
1137
color: $titlebar-text-disabled;
1138
}
1139
}
1140
&.selection-mode {
1142
// 0.00001s was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1143
// but let's keep it for backwards compatibility.
1144
transition: background-color 0.00001s $duration-ripple, color $duration-ripple $ease-out;
1145
animation: ripple-headerbar $duration-ripple $ease-out;
1146
box-shadow: $shadow-1, inset 0 1px highlight($primary);
1147
background-color: $primary;
1148
color: on($primary);
1149
&:backdrop {
1151
color: on($primary, secondary);
1152
}
1153
.subtitle:link { color: on($primary); }
1155
button:not(.suggested-action):not(.destructive-action) {
1157
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1158
currentColor 0%,
1159
transparent 0%)
1160
0 0 0 / 0 0 0px;
1161
color: on($primary);
1162
&:disabled { color: on($primary, disabled); }
1164
&:checked {
1166
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1167
currentColor 100%,
1168
transparent 0%)
1169
0 0 2 / 0 0 2px;
1170
color: on($primary);
1171
&:disabled { color: on($primary, disabled); }
1173
}
1174
&:backdrop {
1176
color: on($primary, secondary);
1177
&:disabled { color: on($primary, secondary-disabled); }
1179
&:checked {
1181
color: on($primary, secondary);
1182
&:disabled { color: on($primary, secondary-disabled); }
1184
}
1185
}
1186
}
1187
.selection-menu {
1189
padding-left: 16px;
1190
padding-right: 16px;
1191
arrow { -GtkArrow-arrow-scaling: 1; }
1193
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1195
}
1196
}
1197
// squared corners when the window is maximized, tiled, or fullscreen
1199
.tiled &,
1200
.tiled-top &,
1201
.tiled-right &,
1202
.tiled-bottom &,
1203
.tiled-left &,
1204
.maximized &,
1205
.fullscreen & {
1206
border-radius: 0;
1207
box-shadow: $shadow-1;
1208
}
1209
&.default-decoration {
1211
min-height: $small-size;
1212
padding: $container-padding;
1213
box-shadow: inset 0 1px highlight($titlebar);
1214
.tiled &,
1216
.maximized &,
1217
.fullscreen & { box-shadow: none; }
1218
button.titlebutton {
1220
min-height: $small-size;
1221
min-width: $small-size;
1222
margin: 0;
1223
padding: 0;
1224
}
1225
// workaround for non-animatable buttons
1227
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1228
}
1229
.solid-csd & {
1231
&:dir(rtl), &:dir(ltr) { // specificity bump
1232
// margin-left: -2px;
1233
// margin-right: -2px;
1234
// margin-top: -2px;
1235
// border-radius: 0;
1236
box-shadow: $shadow-1; // Remove highlight as window managers should have it
1237
}
1238
}
1239
}
1240
headerbar {
1242
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1243
entry,
1244
spinbutton,
1245
button {
1246
margin-top: $container-padding;
1247
margin-bottom: $container-padding;
1248
}
1249
separator.titlebutton {
1251
margin-top: $large-size / 4;
1252
margin-bottom: $large-size / 4;
1253
background-color: $titlebar-divider;
1254
}
1255
switch {
1257
margin-top: ($large-size - 24px) / 2;
1258
margin-bottom: ($large-size - 24px) / 2;
1259
}
1260
// reset button margins of the spinbutton
1262
spinbutton button {
1263
margin-top: 0;
1264
margin-bottom: 0;
1265
}
1266
// FIXME: This is a hacky workaround.
1268
.entry-tag {
1269
margin-top: 5px;
1270
margin-bottom: 5px;
1271
}
1272
&.titlebar headerbar:not(.titlebar) {
1274
// Drop the background of non-titlebar nested headerbars. This is needed to
1275
// work around headerbar sliding animation issues without refactoring
1276
// Adwaita's support of titlebars and headerbars as it may break
1277
// applications.
1278
// See https://gitlab.gnome.org/GNOME/gtk/issues/1264 for more information.
1279
background-color: transparent;
1280
box-shadow: none;
1281
}
1282
}
1283
.background .titlebar {
1285
border-top-left-radius: $corner-radius;
1286
border-top-right-radius: $corner-radius;
1287
}
1288
.background.tiled .titlebar,
1290
.background.tiled-top .titlebar,
1291
.background.tiled-right .titlebar,
1292
.background.tiled-bottom .titlebar,
1293
.background.tiled-left .titlebar,
1294
.background.maximized .titlebar,
1295
.background.solid-csd .titlebar {
1296
border-top-left-radius: 0;
1297
border-top-right-radius: 0;
1298
}
1299
headerbar { // headerbar border rounding
1301
window separator:first-child + &, // tackles the paned container case
1302
window &:first-child { border-top-left-radius: $corner-radius; }
1303
window &:last-child { border-top-right-radius: $corner-radius; }
1305
window stack & { // tackles the stacked headerbars case
1307
&:first-child, &:last-child {
1308
border-top-left-radius: $corner-radius;
1309
border-top-right-radius: $corner-radius;
1310
}
1311
}
1312
window.tiled &,
1314
window.tiled-top &,
1315
window.tiled-right &,
1316
window.tiled-bottom &,
1317
window.tiled-left &,
1318
window.maximized &,
1319
window.fullscreen &,
1320
window.solid-csd & {
1321
&,
1322
&:first-child,
1323
&:last-child,
1324
&:only-child {
1325
border-top-left-radius: 0;
1326
border-top-right-radius: 0;
1327
}
1328
}
1329
}
1330
.titlebar:not(headerbar) {
1332
window.csd > & {
1333
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1334
padding: 0;
1335
background-color: transparent;
1336
background-image: none;
1337
border-style: none;
1338
box-shadow: none;
1339
}
1340
> separator {
1342
background-color: $titlebar;
1343
background-image: image($border);
1344
}
1345
@extend %titlebar;
1347
}
1348
// Development versions of apps to use a differently styled headerbar
1350
window.devel headerbar.titlebar:not(.selection-mode) {
1351
}
1352
/************
1355
* Pathbars *
1356
************/
1357
%pathbar_button,
1358
.path-bar button {
1359
padding-left: ($medium-size - 24px) / 2;
1360
padding-right: ($medium-size - 24px) / 2;
1361
label:not(:only-child) {
1363
&:first-child { margin-left: 4px; }
1364
&:last-child { margin-right: 4px; }
1366
}
1367
&.slider-button {
1369
padding-left: (24px - 16px) / 2;
1370
padding-right: (24px - 16px) / 2;
1371
}
1372
:not(headerbar) & {
1374
@extend %flat_button;
1375
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1377
$primary 0%,
1378
transparent 0%)
1379
0 0 0 / 0 0 0px;
1380
border-radius: $corner-radius;
1381
&:checked {
1383
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1384
$primary 100%,
1385
transparent 0%)
1386
0 0 2 / 0 0 2px;
1387
&, &:disabled { background-color: transparent; }
1389
}
1390
}
1391
}
1392
/**************
1395
* Tree Views *
1396
**************/
1397
treeview.view {
1398
@at-root * {
1399
-GtkTreeView-horizontal-separator: 4;
1400
-GtkTreeView-grid-line-width: 1;
1401
-GtkTreeView-grid-line-pattern: '';
1402
-GtkTreeView-tree-line-width: 1;
1403
-GtkTreeView-tree-line-pattern: '';
1404
-GtkTreeView-expander-size: 16;
1405
}
1406
border-left-color: $track; // this is actually the tree lines color,
1408
border-top-color: $border; // while this is the grid lines color, better then nothing
1409
// FIXME: Avoid transparency background-color being slightly darker
1411
&:selected {
1412
background-color: $base;
1413
background-image: image($overlay-selected);
1414
}
1415
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1417
&:hover, &:selected { border-radius: 0; }
1419
&.separator {
1421
min-height: 1px + 2px * 2;
1422
color: $border;
1423
}
1424
&:drop(active) {
1426
border-style: solid none;
1427
border-width: 1px;
1428
border-color: $primary;
1429
&.after { border-top-style: none; }
1431
&.before { border-bottom-style: none; }
1433
}
1434
&.expander {
1436
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1437
-gtk-icon-transform: rotate(-90deg);
1438
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1440
&:checked { -gtk-icon-transform: unset; }
1442
color: $text-secondary;
1444
&:hover, &:active { color: $text; }
1446
&:disabled { color: $text-secondary-disabled; }
1448
}
1449
&.progressbar { // progress bar in treeviews
1451
border-bottom: $bar-size solid $primary;
1452
box-shadow: none;
1453
background-color: transparent;
1454
background-image: none;
1455
&:selected:hover { box-shadow: none; }
1457
}
1458
&.trough { // progress bar trough in treeviews
1460
border-bottom: $bar-size solid $divider;
1461
box-shadow: none;
1462
background-color: transparent;
1463
background-image: none;
1464
&:selected:hover { box-shadow: none; }
1466
}
1467
header {
1469
button {
1470
@extend row.activatable;
1471
padding: 2px 6px;
1473
border-style: none solid solid none;
1474
border-width: 1px;
1475
border-color: $border;
1476
border-radius: 0;
1477
background-clip: border-box;
1478
&:not(:hover):not(:active) { color: $text-secondary; }
1480
&, &:hover, &:active { box-shadow: none; }
1482
&, &:disabled { background-color: $base; }
1484
&:last-child { border-right-style: none; }
1486
}
1487
}
1488
button.dnd,
1490
header.button.dnd { // for treeview-like derive widgets
1491
padding: 2px 6px;
1492
border-style: none solid solid;
1493
border-width: 1px;
1494
border-color: $border;
1495
border-radius: 0;
1496
box-shadow: none;
1497
background-color: $base;
1498
background-clip: border-box;
1499
color: $primary;
1500
}
1501
acceleditor > label { background-color: $primary; } // see tests/testaccel to test
1503
}
1504
/*********
1507
* Menus *
1508
*********/
1509
menubar,
1510
.menubar {
1511
-GtkWidget-window-dragging: true;
1512
padding: 0;
1513
// box-shadow: inset 0 -1px $border;
1514
background-color: $titlebar;
1515
color: $titlebar-text;
1516
> menuitem {
1518
transition: $transition;
1519
min-height: 20px;
1520
padding: 4px 8px;
1521
color: $titlebar-text-secondary;
1522
&:hover { // Seems like it :hover even with keyboard focus
1524
transition: none;
1525
background-color: $overlay-checked;
1526
color: $titlebar-text;
1527
}
1528
&:disabled { color: $titlebar-text-secondary-disabled; }
1530
label:disabled { color: inherit; } // to inherit the above color
1532
}
1533
}
1534
// Needed to make the border-radius of menus work
1536
// otherwise the background bleeds out of the menu edges
1537
.background.popup { background-color: transparent; }
1538
menu,
1540
.menu,
1541
.context-menu {
1542
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1543
padding: 4px 0;
1544
box-shadow: inset 0 1px highlight($surface);
1545
background-color: $surface;
1546
border: 1px solid $border; // adds borders in a non composited env
1547
.csd & {
1549
border: none; // axes borders in a composited env
1550
border-radius: $corner-radius;
1551
}
1552
menuitem {
1554
transition: background-color $duration $ease-out;
1555
min-height: 20px;
1556
min-width: 40px;
1557
padding: 4px 8px;
1558
font: initial;
1559
text-shadow: none;
1560
&:hover {
1562
transition: none;
1563
background-color: $overlay-hover;
1564
}
1565
&:disabled { color: $text-disabled; }
1567
// submenu indicators
1569
arrow {
1570
min-height: 16px;
1571
min-width: 16px;
1572
&:dir(ltr) {
1574
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1575
margin-left: 8px;
1576
}
1577
&:dir(rtl) {
1579
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1580
margin-right: 8px;
1581
}
1582
}
1583
// avoids labels color being overridden, see
1585
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1586
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1587
}
1588
// overflow arrows
1590
> arrow {
1591
min-height: 16px;
1592
min-width: 16px;
1593
padding: 4px;
1594
background-color: $surface;
1595
color: $text-secondary;
1596
&.top {
1598
margin-top: -4px;
1599
border-bottom: 1px solid $border;
1600
border-radius: $corner-radius $corner-radius 0 0;
1601
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1602
}
1603
&.bottom {
1605
margin-top: 4px * 2;
1606
margin-bottom: -4px * 3;
1607
border-top: 1px solid $border;
1608
border-radius: 0 0 $corner-radius $corner-radius;
1609
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1610
}
1611
&:hover {
1613
background-image: image($overlay-hover);
1614
color: $text;
1615
}
1616
&:disabled {
1618
border-color: transparent;
1619
background-color: transparent;
1620
color: transparent;
1621
// color: $text-secondary-disabled;
1622
}
1623
}
1624
separator { margin: 4px 0; }
1626
}
1627
menuitem {
1629
accelerator { color: $text-secondary; }
1630
&:disabled accelerator { color: $text-secondary-disabled; }
1632
}
1633
/************
1636
* Popovers *
1637
************/
1638
popover.background {
1639
transition: $transition-shadow;
1640
padding: 2px;
1641
box-shadow: $shadow-2; // TODO: this should really have a highlight
1642
background-color: $surface;
1643
&:backdrop { box-shadow: $shadow-1; }
1645
&, .csd & {
1647
border-style: solid;
1648
border-width: 1px;
1649
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1650
border-radius: $corner-radius + 1px;
1651
}
1652
> stack { margin: -4px; } // remove extra padding from menu style popovers
1654
> toolbar { margin: -2px; }
1656
> list,
1658
> .view,
1659
> toolbar {
1660
border-style: none;
1661
box-shadow: none;
1662
background-color: transparent;
1663
}
1664
// FIXME: Use the popover color instead of transparent as a workaround for .view
1666
list,
1667
.view:not(:selected),
1668
toolbar { background-color: $surface; }
1669
// &.touch-selection,
1671
// &.magnifier,
1672
// &.osd { @extend %osd; }
1673
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1675
&.menu button,
1677
button.model {
1678
@extend %simple_flat_button;
1679
min-height: 32px;
1681
padding: 0 8px;
1682
border-radius: $corner-radius;
1683
&:checked { @extend %selected_items; }
1685
}
1686
separator { margin: 4px 0; }
1688
list separator { margin: 0; }
1690
}
1691
/*************
1693
* Notebooks *
1694
*************/
1695
notebook {
1696
frame > paned > & > header,
1697
&.frame > header { background-color: $base-alt; }
1698
&:focus tab:checked {
1700
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
1701
outline: none;
1702
}
1703
> header {
1705
border-width: 1px;
1706
border-color: $border;
1707
background-color: $background;
1708
background-clip: border-box;
1709
&.top {
1711
border-bottom-style: solid;
1712
> tabs {
1714
margin-bottom: -1px;
1715
> tab {
1717
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1718
&:checked { border-image-source: linear-gradient(to top, $primary 2px, $border 2px); }
1720
&.reorderable-page { border-image-width: 0 1px 2px; }
1722
}
1723
}
1724
}
1725
&.bottom {
1727
border-top-style: solid;
1728
> tabs {
1730
margin-top: -1px;
1731
> tab {
1733
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1734
&:checked { border-image-source: linear-gradient(to bottom, $primary 2px, $border 2px); }
1736
&.reorderable-page { border-image-width: 2px 1px 0; }
1738
}
1739
}
1740
}
1741
&.left {
1743
border-right-style: solid;
1744
> tabs {
1746
margin-right: -1px;
1747
> tab {
1749
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1750
&:checked { border-image-source: linear-gradient(to left, $primary 2px, $border 2px); }
1752
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1754
}
1755
}
1756
}
1757
&.right {
1759
border-left-style: solid;
1760
> tabs {
1762
margin-left: -1px;
1763
> tab {
1765
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1766
&:checked { border-image-source: linear-gradient(to right, $primary 2px, $border 2px); }
1768
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1770
}
1771
}
1772
}
1773
&.top > tabs > arrow {
1775
@extend %notebook_vert_arrows;
1776
border-top-style: none;
1778
}
1779
&.bottom > tabs > arrow {
1781
@extend %notebook_vert_arrows;
1782
border-bottom-style: none;
1784
}
1785
@at-root %notebook_vert_arrows {
1787
padding-left: 4px;
1788
padding-right: 4px;
1789
&.down {
1791
margin-left: -8px;
1792
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1793
}
1794
&.up {
1796
margin-right: -8px;
1797
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1798
}
1799
}
1800
&.left > tabs > arrow {
1802
@extend %notebook_horz_arrows;
1803
border-left-style: none;
1805
}
1806
&.right > tabs > arrow {
1808
@extend %notebook_horz_arrows;
1809
border-right-style: none;
1811
}
1812
@at-root %notebook_horz_arrows {
1814
padding-top: 4px;
1815
padding-bottom: 4px;
1816
&.down {
1818
margin-top: -8px;
1819
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1820
}
1821
&.up {
1823
margin-bottom: -8px;
1824
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1825
}
1826
}
1827
> tabs > arrow {
1829
@extend %simple_flat_button;
1830
min-height: 16px;
1832
min-width: 16px;
1833
border-radius: 0;
1834
}
1835
tab {
1837
transition: $transition,
1838
background-size 0,
1839
background-image 0;
1840
min-height: $small-size;
1841
min-width: $small-size;
1842
padding: $container-padding 12px;
1843
outline-offset: -6px;
1845
border-width: 1px; // for reorderable tabs
1847
border-color: transparent; //
1848
background-image: radial-gradient(circle farthest-corner at center,
1850
$primary 10%,
1851
transparent 0%);
1852
background-repeat: no-repeat;
1853
background-position: center;
1854
background-size: 0% 0%;
1855
background-clip: border-box;
1856
color: $text-secondary;
1858
font-weight: 500;
1859
&:hover {
1861
background-color: $overlay-hover;
1862
color: $text;
1863
}
1864
&:disabled { color: $text-secondary-disabled; }
1866
&:checked {
1868
transition: $transition,
1869
background-size $duration-ripple $ease-out,
1870
background-image $duration-ripple + $duration-ripple-aftermath $ease-out;
1871
background-color: transparent;
1872
background-image: radial-gradient(circle farthest-corner at center,
1873
transparent 10%,
1874
transparent 0%);
1875
background-size: 1000% 1000%;
1876
background-clip: padding-box;
1877
color: $text;
1878
&:disabled { color: $text-disabled; }
1880
&.reorderable-page {
1882
border-color: $border;
1883
background-color: $base;
1884
}
1885
}
1886
// colors the button like the label, overridden otherwise
1888
button.flat {
1889
@extend %small_button;
1890
&:last-child {
1892
margin-left: $container-padding;
1893
margin-right: $container-padding - 12px;
1894
}
1895
&:first-child {
1897
margin-left: $container-padding - 12px;
1898
margin-right: $container-padding;
1899
}
1900
}
1901
}
1902
&.top,
1904
&.bottom {
1905
tabs {
1906
padding-left: 8px;
1907
padding-right: 8px;
1908
&:not(:only-child) {
1910
&:first-child { margin-left: 0; }
1911
&:last-child { margin-right: 0; }
1913
}
1914
tab.reorderable-page { border-style: none solid; }
1916
}
1917
}
1918
&.left,
1920
&.right {
1921
tabs {
1922
padding-top: 8px;
1923
padding-bottom: 8px;
1924
&:not(:only-child) {
1926
&:first-child { margin-top: 0; }
1927
&:last-child { margin-bottom: 0; }
1929
}
1930
tab.reorderable-page { border-style: solid none; }
1932
}
1933
}
1934
}
1935
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1937
background-color: $base;
1938
}
1939
}
1940
/**************
1943
* Scrollbars *
1944
**************/
1945
scrollbar {
1946
$_slider_min_length: 24px;
1947
// disable steppers
1949
@at-root * {
1950
-GtkScrollbar-has-backward-stepper: false;
1951
-GtkScrollbar-has-forward-stepper: false;
1952
}
1953
transition: $transition;
1955
background-color: $base;
1956
background-clip: $background-clip-extra;
1957
// scrollbar border
1959
&.top { border-bottom: 1px solid $border; }
1960
&.bottom { border-top: 1px solid $border; }
1961
&.left { border-right: 1px solid $border; }
1962
&.right { border-left: 1px solid $border; }
1963
// slider
1965
slider {
1966
transition: $transition, margin 0, border-width 0;
1967
min-width: 8px;
1968
min-height: 8px;
1969
border: 4px solid transparent;
1970
border-radius: $circular-radius;
1971
background-clip: padding-box;
1972
background-color: $text-disabled;
1973
&:hover { background-color: $text-secondary; }
1975
&:active { background-color: $text; }
1977
&:disabled { background-color: $text-secondary-disabled; }
1979
}
1980
&.fine-tune {
1982
slider {
1983
transition: $transition, margin 0, border-width 0, min-width 0, min-height 0;
1984
min-width: 4px;
1985
min-height: 4px;
1986
}
1987
&.horizontal slider { margin: 2px 0; }
1989
&.vertical slider { margin: 0 2px; }
1991
}
1992
&.overlay-indicator {
1994
&:not(.dragging):not(.hovering) {
1995
border-color: transparent;
1996
background-color: transparent;
1997
slider {
1999
min-width: 4px;
2000
min-height: 4px;
2001
margin: 4px - 1px;
2002
border: 1px solid rgba($base, 0.3);
2003
}
2004
button {
2006
min-width: 4px;
2007
min-height: 4px;
2008
margin: 4px - 1px;
2009
border: 1px solid rgba($base, 0.3);
2010
border-radius: $circular-radius;
2011
background-color: $text-disabled;
2012
background-clip: padding-box;
2013
-gtk-icon-source: none;
2014
&:disabled { background-color: $text-secondary-disabled; }
2016
}
2017
&.horizontal {
2019
slider { min-width: $_slider_min_length; }
2020
button { min-width: 8px; }
2022
}
2023
&.vertical {
2025
slider { min-height: $_slider_min_length; }
2026
button { min-height: 8px; }
2028
}
2029
}
2030
&.dragging,
2032
&.hovering { background-color: rgba($base, 0.9); }
2033
}
2034
&.horizontal slider { min-width: $_slider_min_length; }
2036
&.vertical slider { min-height: $_slider_min_length; }
2038
// button styling
2040
button {
2041
@extend %simple_flat_button;
2042
min-width: 16px;
2044
min-height: 16px;
2045
padding: 0;
2046
border-radius: 0;
2047
}
2048
// button icons
2050
&.vertical {
2051
button {
2052
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2053
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2055
}
2056
}
2057
&.horizontal {
2059
button {
2060
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2061
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2063
}
2064
}
2065
}
2066
/**********
2069
* Switch *
2070
**********/
2071
switch {
2072
transition: all $duration $ease-out;
2073
margin: $container-padding 0;
2074
padding: 0 2px;
2075
border: 5px solid transparent;
2076
border-radius: $circular-radius;
2077
background-color: $track;
2078
background-clip: padding-box;
2079
font-size: 0;
2080
&:checked { background-color: rgba($primary, 0.5); }
2082
&:disabled { opacity: 0.5; }
2084
// hide on/off icons for >=3.24.5
2086
image {
2087
margin: -8px;
2088
-gtk-icon-transform: scale(0);
2089
}
2090
slider {
2092
transition: all $duration $ease-out;
2093
min-width: 20px;
2094
min-height: 20px;
2095
margin: -3px -2px;
2096
border-radius: $circular-radius;
2097
outline: none;
2098
box-shadow: 0 0 0 10px transparent, $shadow-1;
2099
background-color: $surface;
2100
}
2101
&:hover slider { box-shadow: 0 0 0 10px $overlay-hover, $shadow-1; }
2103
&:focus slider { box-shadow: 0 0 0 10px $overlay-focus, $shadow-1; }
2105
&:focus:hover slider { box-shadow: 0 0 0 10px $overlay-focus-hover, $shadow-1; }
2107
&:checked slider {
2109
background-color: $primary;
2110
color: $primary;
2111
}
2112
row:selected & {
2114
}
2115
}
2116
/*************************
2119
* Check and Radio items *
2120
*************************/
2121
// draw regular check and radio items using our PNG assets
2122
// all assets are rendered from assets.svg. never add pngs directly
2123
// selection-mode
2125
.view.content-view.check:not(list),
2126
.content-view .tile check:not(list) {
2127
min-height: 40px;
2128
min-width: 40px;
2129
margin: 0;
2130
padding: 0;
2131
box-shadow: none;
2132
background-color: transparent;
2133
background-image: none;
2134
-gtk-icon-shadow: $shadow-1;
2135
&:hover, &:active { -gtk-icon-shadow: $shadow-2; }
2137
@each $s, $as in ('', '-unchecked'),
2139
(':checked', '-checked') {
2140
&#{$s} {
2141
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}.png"),
2142
url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}@2.png"));
2143
}
2144
}
2145
}
2146
checkbutton,
2148
radiobutton {
2149
outline: none;
2150
}
2151
checkbutton.text-button,
2153
radiobutton.text-button {
2154
// this is for a nice focus on check and radios text
2155
padding: 2px;
2156
label:not(:only-child) { margin: 0 4px; }
2158
}
2159
$check_radio_size: 40px;
2161
check,
2163
radio {
2164
min-height: 24px;
2165
min-width: 24px;
2166
margin: -($check_radio_size - 24px) / 2;
2167
padding: ($check_radio_size - 24px) / 2;
2168
@extend %simple_flat_button;
2170
@extend %circular_button;
2172
&:hover { box-shadow: inset 0 0 0 9999px $overlay-hover; }
2174
&:focus { box-shadow: inset 0 0 0 9999px $overlay-focus; }
2176
&:focus:hover { box-shadow: inset 0 0 0 9999px $overlay-focus-hover; }
2178
&:checked, &:indeterminate {
2180
color: $primary;
2181
&:disabled { color: $text-secondary-disabled; }
2183
}
2184
// &:only-child { margin: -12px; }
2186
popover modelbutton.flat & {
2188
&, &:hover, &:focus, &:focus:hover, &:active, &:disabled {
2189
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2190
box-shadow: none;
2191
background-image: none;
2192
}
2193
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2195
&.left:dir(rtl) {
2197
margin-left: -12px;
2198
margin-right: -4px;
2199
}
2200
&.right:dir(ltr) {
2202
margin-left: -4px;
2203
margin-right: -12px;
2204
}
2205
}
2206
menu menuitem & {
2208
transition: none;
2209
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2210
padding: 0;
2211
&:dir(ltr) { margin-right: 8px; }
2213
&:dir(rtl) { margin-left: 8px; }
2215
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2217
&, &:hover, &:disabled {
2219
box-shadow: none;
2220
// color: inherit;
2221
}
2222
}
2223
}
2224
%check,
2226
check {
2227
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2228
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2230
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2232
}
2233
%radio,
2235
radio {
2236
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2237
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2239
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2241
border-image-slice: $check_radio_size / 2px;
2243
border-image-width: $check_radio_size / 2;
2244
$radio_indicator: 10px / $check_radio_size / 2;
2246
& {
2248
border-image-source: -gtk-gradient(radial,
2249
center center, 0,
2250
center center, 0.001,
2251
to($primary),
2252
to(transparent));
2253
}
2254
&:checked:not(:indeterminate) {
2256
border-image-source: -gtk-gradient(radial,
2257
center center, 0,
2258
center center, $radio_indicator,
2259
to($primary),
2260
to(transparent));
2261
}
2262
&:checked:not(:indeterminate):disabled {
2264
border-image-source: -gtk-gradient(radial,
2265
center center, 0,
2266
center center, $radio_indicator,
2267
to($text-secondary-disabled),
2268
to(transparent));
2269
}
2270
}
2271
%small_check,
2273
menu menuitem check {
2274
& {
2275
min-height: 16px;
2276
min-width: 16px;
2277
border-radius: $corner-radius;
2278
-gtk-outline-radius: $corner-radius;
2279
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2280
}
2281
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2283
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2285
}
2286
%small_radio,
2288
menu menuitem radio {
2289
& {
2290
min-height: 16px;
2291
min-width: 16px;
2292
border-image: none;
2293
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2294
}
2295
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2297
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2299
}
2300
// ANIMATION:
2302
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2303
// the transformation is set on the active state and it get reset on the checked state.
2304
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2305
treeview.view check,
2307
treeview.view radio {
2308
padding: 0;
2309
&:hover, &:selected {
2311
box-shadow: none;
2312
background-color: transparent;
2313
}
2314
& {
2316
color: $text-secondary;
2317
&:hover, &:active { color: $text; }
2319
&:disabled { color: $text-secondary-disabled; }
2321
&:checked, &:indeterminate { color: $primary; }
2323
&:checked:disabled, &:indeterminate:disabled { color: $text-secondary-disabled; }
2325
}
2326
}
2327
treeview.view radio:checked {
2329
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2330
border-image: none;
2331
}
2332
/************
2335
* GtkScale *
2336
************/
2337
scale {
2338
// sizing
2339
$_marks_length: 8px;
2340
$_marks_distance: 7px;
2341
$trough_size: 2px;
2343
$finetune_trough_size: 4px;
2344
$slider_size: 32px;
2346
$slider_margin: -($slider_size - $trough_size) / 2;
2348
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2349
$color_slider_margin: -($slider_size) * 3 / 4;
2351
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2352
min-height: $trough_size;
2354
min-width: $trough_size;
2355
&.horizontal { padding: ($medium-size - $trough_size) / 2 12px; }
2357
&.vertical { padding: 12px ($medium-size - $trough_size) / 2; }
2359
// the slider is inside the trough, so to have make it bigger there's a negative margin
2361
slider {
2362
min-height: $slider_size;
2363
min-width: $slider_size;
2364
margin: $slider_margin;
2365
}
2366
// click-and-hold the slider to activate
2368
&.fine-tune {
2369
&.horizontal {
2370
min-height: $finetune_trough_size;
2371
padding-top: ($medium-size - $finetune_trough_size) / 2;
2372
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2373
}
2374
&.vertical {
2376
min-width: $finetune_trough_size;
2377
padding-left: ($medium-size - $finetune_trough_size) / 2;
2378
padding-right: ($medium-size - $finetune_trough_size) / 2;
2379
}
2380
// to make the trough grow in fine-tune mode
2382
slider { margin: $finetune_slider_margin; }
2383
}
2384
// the backing bit
2386
trough {
2387
transition: background-color $duration $ease-out;
2388
outline: none;
2389
background-color: $track;
2390
&:disabled { background-color: $divider; }
2392
}
2393
// the colored part of the backing bit
2395
highlight {
2396
transition: background-color $duration $ease-out;
2397
background-color: $primary;
2398
&:disabled { background-color: transparent; }
2400
}
2401
// this is another differently styled part of the backing bit, the most relevant use case is for example
2403
// in media player to indicate how much video stream as been cached
2404
fill {
2405
transition: background-color $duration $ease-out;
2406
background-color: $track;
2407
&:disabled { background-color: transparent; }
2409
}
2410
slider {
2412
transition: background-color $duration $ease-out,
2413
background-size $duration-ripple-aftermath $ease-out,
2414
background-image $duration-ripple-aftermath-opacity $ease-out;
2415
background-repeat: no-repeat;
2416
background-position: center;
2417
background-size: auto, 1000% 1000%;
2418
border-radius: 50%;
2419
color: $primary;
2420
@each $s, $as in ('', ''),
2422
(':disabled', '-disabled') {
2423
&#{$s} {
2424
$_url: 'assets/scale-slider#{$as}#{$asset-suffix}';
2425
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2427
radial-gradient(circle farthest-corner at center,
2428
transparent 10%,
2429
transparent 0%);
2430
}
2431
}
2432
&:hover { background-color: $overlay-hover; }
2434
&:focus { background-color: $overlay-focus; }
2436
&:focus:hover { background-color: $overlay-focus-hover; }
2438
&:active {
2440
$_url: 'assets/scale-slider#{$asset-suffix}';
2441
transition: background-color $duration $ease-out,
2443
background-size 0,
2444
background-image 0;
2445
animation: ripple-slider $duration-ripple $ease-out forwards;
2446
background-color: $overlay-hover;
2447
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2448
radial-gradient(circle farthest-corner at center,
2449
$overlay-active 10%,
2450
transparent 0%);
2451
background-size: auto, 0% 0%;
2452
}
2453
}
2454
marks label,
2456
value { color: $text-secondary; }
2457
marks {
2459
color: $track;
2460
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2462
(bottom, bottom, top),
2463
(left, left, right),
2464
(right, right, left) {
2465
&.#{$marks_class} {
2466
margin-#{$marks_margin}: $_marks_distance;
2467
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2468
}
2469
}
2470
}
2471
&.fine-tune marks {
2473
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2474
(bottom, bottom, top),
2475
(left, left, right),
2476
(right, right, left) {
2477
&.#{$marks_class} {
2478
margin-#{$marks_margin}: $_marks_distance - 1px;
2479
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2480
}
2481
}
2482
}
2483
&.horizontal {
2485
indicator {
2486
min-height: $_marks_length;
2487
min-width: 1px;
2488
}
2489
}
2490
&.vertical {
2492
indicator {
2493
min-height: 1px;
2494
min-width: $_marks_length;
2495
}
2496
}
2497
// *WARNING* scale with marks madness following
2499
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2501
('vertical', 'vert') {
2502
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2503
('marks-after', 'marks-after:not(.marks-before)') {
2504
&.#{$dir_class}.#{$marks_class} {
2505
slider {
2506
@each $state, $state_infix in ('', ''),
2507
(':disabled', '-disabled') {
2508
&#{$state} {
2509
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2510
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2512
radial-gradient(circle farthest-corner at center,
2513
transparent 10%,
2514
transparent 0%);
2515
}
2516
}
2517
&:active {
2519
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$asset-suffix}';
2520
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2522
radial-gradient(circle farthest-corner at center,
2523
$overlay-active 10%,
2524
transparent 0%);
2525
}
2526
}
2527
}
2528
}
2529
}
2530
&.color {
2532
min-height: 0;
2533
min-width: 0;
2534
&.horizontal {
2536
padding: 0 0 12px 0;
2537
slider {
2539
&:dir(ltr), &:dir(rtl) { // specificity bump
2540
margin-bottom: $color_slider_margin;
2541
margin-top: $color_marks_slider_margin;
2542
}
2543
}
2544
}
2545
&.vertical {
2547
&:dir(ltr) {
2548
padding: 0 0 0 12px;
2549
slider {
2551
margin-left: $color_slider_margin;
2552
margin-right: $color_marks_slider_margin;
2553
}
2554
}
2555
&:dir(rtl) {
2557
padding: 0 12px 0 0;
2558
slider {
2560
margin-right: $color_slider_margin;
2561
margin-left: $color_marks_slider_margin;
2562
}
2563
}
2564
}
2565
}
2566
}
2567
/*****************
2570
* Progress bars *
2571
*****************/
2572
progressbar {
2573
// sizing
2574
&.horizontal {
2575
trough,
2576
progress { min-height: $bar-size; }
2577
}
2578
&.vertical {
2580
trough,
2581
progress { min-width: $bar-size; }
2582
}
2583
// FIXME: insensitive state missing and some other state should be set probably
2585
color: $text-secondary;
2586
font-size: smaller;
2587
trough { background-color: $divider; }
2589
progress { background-color: $primary; }
2591
&.osd { // progressbar.osd used for epiphany page loading progress
2593
// min-width: $bar-size;
2594
// min-height: $bar-size;
2595
// background-color: transparent;
2596
// trough { background-color: transparent; }
2598
// progress { background-color: $primary; }
2600
}
2601
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2603
}
2604
/*************
2607
* Level Bar *
2608
*************/
2609
levelbar {
2610
&.horizontal {
2611
block { min-height: $bar-size; }
2612
&.discrete block {
2614
min-width: $medium-size;
2615
&:not(:last-child) { margin-right: 2px; }
2617
}
2618
}
2619
&.vertical {
2621
block { min-width: $bar-size; }
2622
&.discrete block {
2624
min-height: $medium-size;
2625
&:not(:last-child) { margin-bottom: 2px; }
2627
}
2628
}
2629
// imitate the entry style
2631
trough {
2632
// padding: 2px;
2633
// border-radius: $corner-radius;
2634
// box-shadow: $shadow-1;
2635
// background-color: $base;
2636
// &:disabled { background-color: $base-alt; }
2638
}
2639
block {
2641
&.low { background-color: $warning; }
2642
&.high,
2644
&:not(.empty) { background-color: $primary; }
2645
&.full { background-color: $success; }
2647
&.empty { background-color: $divider; }
2649
}
2650
}
2651
/****************
2654
* Print dialog *
2655
*****************/
2656
printdialog {
2657
paper {
2658
padding: 0;
2659
border: 1px solid $border;
2660
background-color: $base;
2661
color: $text;
2662
}
2663
.dialog-action-box { margin: 12px; }
2665
}
2666
/**********
2669
* Frames *
2670
**********/
2671
frame > border,
2672
.frame {
2673
margin: 0;
2674
padding: 0;
2675
border: 1px solid $border;
2676
border-radius: 0;
2677
box-shadow: none;
2678
&.flat { border-style: none; }
2680
}
2681
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2683
actionbar > revealer > box {
2685
padding: $container-padding;
2686
border-top: 1px solid $border;
2687
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2689
}
2690
scrolledwindow {
2692
viewport.frame { // avoid double borders when viewport inside scrolled window
2693
border-style: none;
2694
}
2695
// This is used when content is touch-dragged past boundaries.
2697
// draws a box on top of the content, the size changes programmatically.
2698
@at-root overshoot {
2699
&.top { @include overshoot(top); }
2700
&.bottom { @include overshoot(bottom); }
2702
&.left { @include overshoot(left); }
2704
&.right { @include overshoot(right); }
2706
}
2707
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2709
@at-root undershoot {
2710
&.top { @include undershoot(top); }
2711
&.bottom { @include undershoot(bottom); }
2713
&.left { @include undershoot(left); }
2715
&.right { @include undershoot(right); }
2717
}
2718
@at-root junction { // the small square between two scrollbars
2720
border-style: solid none none solid;
2721
border-width: 1px;
2722
border-color: $border;
2723
background-color: $base;
2724
&:dir(rtl) { border-style: solid solid none none; }
2726
}
2727
}
2728
// vbox and hbox separators
2730
separator {
2731
min-width: 1px;
2732
min-height: 1px;
2733
background-color: $border;
2734
}
2735
%hide_separators {
2737
min-width: 0;
2738
min-height: 0;
2739
background-color: transparent;
2740
}
2741
/*********
2744
* Lists *
2745
*********/
2746
list {
2747
border-color: $border;
2748
background-color: $base;
2749
row { padding: 2px; }
2751
}
2752
row {
2754
&.activatable {
2755
transition: $transition,
2756
background-size $duration-ripple-aftermath $ease-out,
2757
background-image $duration-ripple-aftermath-opacity $ease-out;
2758
box-shadow: inset 0 0 0 9999px transparent;
2759
background-image: radial-gradient(circle farthest-corner at center,
2760
transparent 10%,
2761
transparent 0%);
2762
background-repeat: no-repeat;
2763
background-position: center;
2764
background-size: 1000% 1000%;
2765
&:hover {
2767
transition: $transition,
2768
box-shadow 0,
2769
background-size $duration-ripple-aftermath $ease-out,
2770
background-image $duration-ripple-aftermath-opacity $ease-out;
2771
box-shadow: inset 0 0 0 9999px $overlay-hover;
2772
}
2773
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2775
&:active {
2776
transition: $transition,
2777
background-size 0,
2778
background-image 0;
2779
animation: ripple $duration-ripple $ease-out forwards;
2780
box-shadow: inset 0 0 0 9999px $overlay-hover;
2781
background-image: radial-gradient(circle farthest-corner at center,
2782
$overlay-active 10%,
2783
transparent 0%);
2784
background-size: 0% 0%;
2785
}
2786
}
2787
&:selected {
2789
@extend %selected_items;
2790
color: $primary; // for overlays
2791
image,
2793
label { color: $text; }
2794
button image,
2796
button label { color: inherit; }
2797
&:disabled {
2799
image,
2800
label { color: $text-disabled; }
2801
}
2802
}
2803
}
2804
/*********************
2807
* App Notifications *
2808
*********************/
2809
.app-notification {
2810
// @extend %osd;
2811
@extend toolbar.osd;
2813
margin: 8px;
2815
button { @extend %button_basic.flat; }
2817
&.frame,
2819
border { border-style: none; }
2820
}
2821
/*************
2824
* Expanders *
2825
*************/
2826
expander {
2827
title > arrow {
2828
transition: all $duration $ease-out;
2829
min-width: 16px;
2830
min-height: 16px;
2831
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2832
-gtk-icon-transform: rotate(-90deg);
2833
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2835
&:checked { -gtk-icon-transform: unset; }
2837
color: $text-secondary;
2839
&:hover, &:active { color: $text; }
2841
&:disabled { color: $text-secondary-disabled; }
2843
}
2844
}
2845
/************
2848
* Calendar *
2849
************/
2850
calendar {
2851
padding: 1px;
2852
border: 1px solid $border;
2853
color: $text;
2854
&:disabled { color: $text-disabled; }
2856
&:selected {
2858
@extend %selected_items;
2859
border-radius: $corner-radius + 1px;
2861
}
2862
&.header {
2864
border-style: none none solid;
2865
border-radius: 0;
2866
}
2867
&.button { @extend %simple_flat_button; }
2869
&.highlight {
2871
color: $text-secondary;
2872
font-weight: 500;
2873
}
2874
&:indeterminate { color: $text-secondary-disabled; }
2876
}
2877
/***********
2880
* Dialogs *
2881
***********/
2882
messagedialog { // Message Dialog styling
2883
&.background { background-color: $surface; }
2884
.titlebar {
2886
min-height: $small-size;
2887
border-style: none;
2888
box-shadow: inset 0 1px highlight($surface);
2889
background-color: $surface;
2890
color: $text;
2891
&:backdrop { color: $text-secondary; }
2893
}
2894
&.csd { // rounded bottom border styling for csd version
2896
&.background {
2897
// bigger radius for better antialiasing
2898
border-bottom-left-radius: $corner-radius;
2899
border-bottom-right-radius: $corner-radius;
2900
}
2901
.dialog-action-area {
2903
margin-top: -$container-padding;
2904
padding: $container-padding;
2905
button {
2907
@extend %simple_flat_button;
2908
border-radius: $corner-radius;
2909
&:not(:last-child) { margin-right: $container-padding; }
2911
&.suggested-action:not(:disabled) { color: $suggested; }
2913
&.destructive-action:not(:disabled) { color: $destructive; }
2915
}
2916
}
2917
}
2918
}
2919
filechooser {
2921
.dialog-action-box { border-top: 1px solid $border; }
2922
#pathbarbox {
2924
border-bottom: 1px solid $border;
2925
background-color: $background;
2926
> stack > box > button { // The new folder button
2928
@extend %button_basic.flat;
2929
@extend %circular_button;
2930
}
2931
}
2932
}
2933
filechooserbutton:drop(active) {
2935
box-shadow: none;
2936
}
2937
/***********
2940
* Sidebar *
2941
***********/
2942
.sidebar {
2943
border-style: none;
2944
background-color: $base-alt;
2945
&:not(separator) {
2947
@at-root %sidebar_left,
2948
&:dir(ltr),
2949
&.left,
2950
&.left:dir(rtl) {
2951
border-right: 1px solid $border;
2952
border-left-style: none;
2953
}
2954
@at-root %sidebar_right,
2956
&:dir(rtl),
2957
&.right {
2958
border-left: 1px solid $border;
2959
border-right-style: none;
2960
}
2961
}
2962
list { background-color: transparent; }
2964
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2966
}
2967
stacksidebar {
2969
&.sidebar {
2970
&:dir(ltr),
2971
&.left,
2972
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2973
&:dir(rtl),
2975
&.right { list { @extend %sidebar_right; }}
2976
}
2977
row {
2979
padding: 10px 4px;
2980
> label {
2982
padding-left: 6px;
2983
padding-right: 6px;
2984
}
2985
&.needs-attention > label { @extend %needs_attention; }
2987
}
2988
}
2989
separator.sidebar {
2991
background-color: $border;
2992
&.selection-mode,
2994
.selection-mode & {
2995
// background-color: $border;
2996
}
2997
}
2998
/****************
3001
* File chooser *
3002
****************/
3003
// dim the sidebar icons, see bug #786613 for details on this oddity
3004
row {
3005
image.sidebar-icon { color: $text-secondary; }
3006
}
3007
placessidebar {
3009
> viewport.frame { border-style: none; }
3010
list { padding: (4px - 3px) 0 4px; }
3012
row {
3014
// Needs overriding of the GtkListBoxRow padding
3015
min-height: 32px;
3016
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3017
padding: 0;
3018
border-radius: $corner-radius;
3019
// Using margins/padding directly in the SidebarRow
3021
// will make the animation of the new bookmark row jump
3022
> revealer { padding: 0 8px; }
3023
&:selected { font-weight: 500; }
3025
&:disabled { color: $text-disabled; }
3027
image.sidebar-icon {
3029
&:dir(ltr) { padding-right: 8px; }
3030
&:dir(rtl) { padding-left: 8px; }
3031
}
3032
label.sidebar-label {
3034
&:dir(ltr) { padding-right: 2px; }
3035
&:dir(rtl) { padding-left: 2px; }
3036
}
3037
&:selected image.sidebar-icon,
3039
&:selected label.sidebar-label { color: inherit; }
3040
@at-root button.sidebar-button {
3042
@extend %simple_flat_button;
3043
@extend %small_button;
3044
}
3045
&.sidebar-placeholder-row {
3047
min-height: 2px;
3048
padding: 0 8px;
3049
background-image: image($primary);
3050
background-clip: content-box;
3051
}
3052
&.sidebar-new-bookmark-row { color: $primary; }
3054
&:drop(active):not(:disabled) {
3056
box-shadow: inset 0 0 0 2px $primary;
3057
}
3058
}
3059
}
3060
placesview {
3062
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3063
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3065
// this selects the "connect to server" label
3067
> actionbar > revealer > box > label {
3068
padding-left: 8px;
3069
padding-right: 8px;
3070
}
3071
}
3072
/*********
3075
* Paned *
3076
*********/
3077
paned {
3078
> separator {
3079
min-width: 1px;
3080
min-height: 1px;
3081
-gtk-icon-source: none; // defeats the ugly default handle decoration
3082
border-style: none; // just to be sure
3083
background-color: transparent;
3084
// workaround, using background istead of a border since the border will get rendered twice (?)
3085
background-image: image($border);
3086
background-size: 1px 1px;
3087
background-clip: content-box; // avoids borders image being rendered twice (?)
3088
&.wide {
3090
min-width: 6px;
3091
min-height: 6px;
3092
background-color: $background;
3093
background-image: image($border), image($border);
3094
background-size: 1px 1px, 1px 1px;
3095
}
3096
}
3097
&.horizontal > separator {
3099
background-repeat: repeat-y;
3100
&:dir(ltr) {
3102
margin: 0 -8px 0 0;
3103
padding: 0 8px 0 0;
3104
background-position: left;
3105
}
3106
&:dir(rtl) {
3108
margin: 0 0 0 -8px;
3109
padding: 0 0 0 8px;
3110
background-position: right;
3111
}
3112
&.wide {
3114
margin: 0;
3115
padding: 0;
3116
background-repeat: repeat-y, repeat-y;
3117
background-position: left, right;
3118
}
3119
}
3120
&.vertical > separator {
3122
margin: 0 0 -8px 0;
3123
padding: 0 0 8px 0;
3124
background-repeat: repeat-x;
3125
background-position: top;
3126
&.wide {
3128
margin: 0;
3129
padding: 0;
3130
background-repeat: repeat-x, repeat-x;
3131
background-position: bottom, top;
3132
}
3133
}
3134
}
3135
/**************
3138
* GtkInfoBar *
3139
**************/
3140
infobar {
3141
border-style: none;
3142
&.info { background-color: $infobar-info; }
3144
&.question { background-color: $infobar-question; }
3146
&.warning { background-color: $infobar-warning; }
3148
&.error { background-color: $infobar-error; }
3150
&.info,
3152
&.question,
3153
&.warning,
3154
&.error {
3155
> label, & { color: on(dark); }
3156
button { @extend %button_selected; }
3158
selection {}
3160
*:link { color: on(dark); }
3162
}
3163
}
3164
/************
3167
* Tooltips *
3168
************/
3169
tooltip {
3170
&.background {
3171
// background-color needs to be set this way otherwise it gets drawn twice
3172
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3173
background-color: $tooltip;
3174
color: on($tooltip);
3175
}
3176
// padding: 4px; /* not working */
3178
border-radius: $corner-radius;
3179
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3180
&:not(.csd):not(.unity-csd) {
3182
// border: 1px solid $border;
3183
// border-radius: $corner-radius + 1px;
3184
// background-clip: $background-clip-extra;
3185
}
3186
// FIXME: we need a border or tooltips vanish on black background.
3188
decoration { background-color: transparent; }
3189
> box {
3191
margin: -6px; // Remove hard-coded 6px padding
3192
min-height: 32px - 4px * 2;
3193
padding: 4px 8px;
3194
}
3195
* {
3197
// workaround for Eclipse.
3198
// do not include any declaration here.
3199
// padding: 0;
3200
// background-color: transparent;
3201
// color: inherit;
3202
}
3203
}
3204
/*****************
3207
* Color Chooser *
3208
*****************/
3209
colorswatch {
3210
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3211
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3212
// applied to the overlay box.
3213
// base color corners rounding
3215
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3216
// sports a bigger radius.
3217
// nth-child is needed by the custom color strip.
3218
&.top {
3220
border-top-left-radius: $corner-radius + 0.5px;
3221
border-top-right-radius: $corner-radius + 0.5px;
3222
overlay {
3224
border-top-left-radius: $corner-radius;
3225
border-top-right-radius: $corner-radius;
3226
}
3227
}
3228
&.bottom {
3230
border-bottom-left-radius: $corner-radius + 0.5px;
3231
border-bottom-right-radius: $corner-radius + 0.5px;
3232
overlay {
3234
border-bottom-left-radius: $corner-radius;
3235
border-bottom-right-radius: $corner-radius;
3236
}
3237
}
3238
&.left,
3240
&:first-child:not(.top) {
3241
border-top-left-radius: $corner-radius + 0.5px;
3242
border-bottom-left-radius: $corner-radius + 0.5px;
3243
overlay {
3245
border-top-left-radius: $corner-radius;
3246
border-bottom-left-radius: $corner-radius;
3247
}
3248
}
3249
&.right,
3251
&:last-child:not(.bottom) {
3252
border-top-right-radius: $corner-radius + 0.5px;
3253
border-bottom-right-radius: $corner-radius + 0.5px;
3254
overlay {
3256
border-top-right-radius: $corner-radius;
3257
border-bottom-right-radius: $corner-radius;
3258
}
3259
}
3260
&.dark { color: on(dark); }
3262
&.light { color: on(light); }
3264
&:drop(active) {
3266
box-shadow: none;
3267
&.light overlay { box-shadow: $shadow-1, 0 0 0 2px $primary; }
3269
&.dark overlay { box-shadow: $shadow-1, 0 0 0 2px $primary; }
3271
}
3272
overlay {
3274
transition: $transition-shadow;
3275
box-shadow: $shadow-1;
3276
&:hover { box-shadow: $shadow-2; }
3278
}
3279
&#add-color-button {
3281
border-radius: $corner-radius $corner-radius 0 0;
3282
color: on(dark);
3283
&:only-child { border-radius: $corner-radius; }
3285
overlay {
3287
background-image: linear-gradient(to right,
3288
$red 25%,
3289
$yellow 25%, $yellow 50%,
3290
$green 50%, $green 75%,
3291
$blue 75%);
3292
}
3293
}
3294
&:disabled {
3296
opacity: 0.5;
3297
overlay { box-shadow: none; }
3299
}
3300
row:selected & {
3302
}
3303
&#editor-color-sample {
3305
border-radius: $corner-radius + 0.5px;
3306
overlay { border-radius: $corner-radius; }
3308
// overlay:hover { box-shadow: $shadow-1; }
3310
}
3311
}
3312
// colorscale popup
3314
colorchooser .popover.osd {
3315
transition: $transition-shadow;
3316
border-radius: $corner-radius;
3317
box-shadow: $shadow-2, inset 0 1px highlight($surface);
3318
background-color: $surface;
3319
&:backdrop { box-shadow: $shadow-1, inset 0 1px highlight($surface); }
3321
}
3322
/********
3325
* Misc *
3326
********/
3327
// content view (grid/list)
3328
.content-view {
3329
background-color: $background;
3330
// &:hover { -gtk-icon-effect: highlight; }
3332
rubberband, .rubberband { @extend rubberband; }
3334
}
3335
.scale-popup {
3337
// .osd & { @extend %osd; }
3338
.osd & button.flat { // FIXME: quick hack, redo properly
3340
}
3341
button { // +/- buttons on GtkVolumeButton popup
3343
}
3344
}
3345
/**********************
3348
* Window Decorations *
3349
**********************/
3350
decoration {
3351
transition: $transition-shadow;
3352
border-radius: $corner-radius $corner-radius 0 0;
3353
box-shadow: $shadow-4, 0 16px 16px transparent;
3354
// FIXME rationalize shadows
3356
// this is used for the resize cursor area
3358
margin: 8px;
3359
&:backdrop {
3361
// the transparent shadow here is to enforce that the shadow extents don't
3362
// change when we go to backdrop, to prevent jumping windows.
3363
// The biggest shadow should be in the same order then in the active state
3364
// or the jumping will happen during the transition.
3365
box-shadow: $shadow-2, 0 16px 16px transparent;
3366
}
3367
.maximized &,
3369
.fullscreen &,
3370
.tiled &,
3371
.tiled-top &,
3372
.tiled-right &,
3373
.tiled-bottom &,
3374
.tiled-left & { border-radius: 0; }
3375
.popup & { box-shadow: none; }
3377
// server-side decorations as used by mutter
3379
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3380
.csd.popup & {
3382
border-radius: $corner-radius;
3383
box-shadow: $shadow-2;
3384
}
3385
tooltip.csd & {
3387
border-radius: $corner-radius;
3388
box-shadow: none;
3389
}
3390
messagedialog.csd & {
3392
border-radius: $corner-radius;
3393
// box-shadow: $shadow-4, 0 16px 16px transparent;
3394
// &:backdrop { box-shadow: $shadow-2, 0 16px 16px transparent; }
3396
}
3397
.solid-csd & {
3399
margin: 0;
3400
// padding: 4px;
3401
border-radius: 0;
3402
box-shadow: none;
3403
// box-shadow: inset 0 0 0 4px $titlebar;
3404
background-color: $titlebar;
3405
}
3406
}
3407
// Window Close button
3409
button.titlebutton {
3410
// @extend %simple_flat_button;
3411
@extend %circular_button;
3413
.selection-mode & {
3415
}
3416
}
3417
// catch all extend :)
3420
%selected_items {
3422
background-color: $overlay-selected;
3423
}
3424
.monospace { font-family: monospace; }
3426
/**********************
3429
* Touch Copy & Paste *
3430
**********************/
3431
// touch selection handlebars for the Popover.osd above
3432
cursor-handle {
3433
color: $primary;
3434
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
3435
&.top:dir(ltr), &.bottom:dir(rtl) {
3437
-gtk-icon-transform: rotate(90deg);
3438
}
3439
&.bottom:dir(ltr), &.top:dir(rtl) {
3441
-gtk-icon-transform: unset;
3442
}
3443
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3445
padding-top: 6px;
3446
-gtk-icon-transform: rotate(45deg);
3447
}
3448
}
3449
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3451
// shortcut window keys
3453
.keycap {
3454
min-width: 28px - 8px * 2;
3455
min-height: 28px - 2px;
3456
margin-top: 2px;
3457
padding-bottom: 2px;
3458
padding-left: 8px;
3459
padding-right: 8px;
3460
border: solid 1px $border;
3462
border-radius: $corner-radius + 1px;
3463
box-shadow: inset 0 -2px $border;
3464
background-color: $surface;
3465
color: $text;
3466
font-size: smaller;
3467
}
3468
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3470
transition: $transition;
3471
box-shadow: $shadow-1, inset 0 0 0 2px $primary;
3472
caret-color: $primary;
3473
}
3474
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3476
stackswitcher button.circular,
3478
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3479
min-width: $medium-size;
3480
min-height: $medium-size;
3481
padding: 0;
3482
}
3483
/*************
3486
* App Icons *
3487
*************/
3488
// Outline for low res icons
3489
.lowres-icon {
3490
// -gtk-icon-shadow: none;
3491
}
3492
// Drapshadow for large icons
3494
.icon-dropshadow {
3495
// -gtk-icon-shadow: none;
3496
}
3497
/*********
3500
* Emoji *
3501
*********/
3502
popover.emoji-picker {
3503
padding: 0;
3504
entry {
3506
border-bottom: 1px solid $border;
3507
border-image: none;
3508
border-radius: 0;
3509
box-shadow: none;
3510
background-color: transparent;
3511
}
3512
scrolledwindow { border-bottom: 1px solid $border; }
3514
}
3515
// mimic tab style
3517
button.emoji-section {
3518
margin-top: -1px;
3519
padding: 0 8px;
3520
min-width: 24px;
3521
min-height: $medium-size;
3522
border-radius: 0;
3523
outline-offset: -6px;
3524
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3526
&:checked {
3528
box-shadow: inset 0 2px $primary;
3529
background-color: transparent;
3530
}
3531
&:hover, &:active { background-color: $overlay-hover; }
3533
&:first-child { margin-left: 4px; }
3535
&:last-child { margin-right: 4px; }
3537
}
3538
popover.emoji-picker .emoji {
3540
min-width: 3em;
3541
min-height: 3em;
3542
padding: 0 8px;
3543
// font-size: larger;
3544
widget {
3546
transition: $transition;
3547
border-radius: $corner-radius;
3548
&:hover { background-color: $overlay-hover; }
3550
}
3551
}
3552
popover.emoji-completion {
3554
padding: 8px 0;
3555
arrow {
3557
border: none;
3558
background: none;
3559
}
3560
.emoji-completion-row {
3562
min-height: $menuitem-size;
3563
padding: 0 12px;
3564
}
3565
.emoji:hover {
3567
background-color: $overlay-hover;
3568
}
3569
}
3570