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 $divider;
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: $track-disabled;
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, &:checked { color: on(dark); }
485
&:disabled { color: on(dark, secondary-disabled); }
487
&:checked:disabled { color: on(dark, disabled); }
489
}
490
}
491
// big standalone buttons like in Documents pager
493
&.osd {
494
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
495
&.image-button { padding: ($large-size - 24px) / 2; }
497
&:disabled { opacity: 0; }
499
}
500
// overlay / OSD style
502
@at-root %osd_button,
503
.osd & {
504
}
505
// Suggested and Destructive Action buttons
507
@each $b_type, $b_color in (suggested-action, $suggested),
508
(destructive-action, $destructive) {
509
&.#{$b_type} {
510
background-color: $b_color;
511
color: on($b_color);
512
&:disabled { @include button(disabled); }
514
&:checked { background-color: mix(on($b_color), $b_color, percentage(0.3)); }
516
&.flat {
518
background-color: transparent;
519
color: $b_color;
520
&:disabled { @include button(flat-disabled); }
522
&:checked { background-color: rgba($b_color, 0.3); }
524
}
525
.osd & {
527
}
528
}
529
}
530
.stack-switcher > & {
532
// to position the needs attention dot, padding is added to the button
533
// child, a label needs just lateral padding while an icon needs vertical
534
// padding added too.
535
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
537
> label {
539
padding-left: 6px; // label padding
540
padding-right: 6px; //
541
}
542
> image {
544
padding-left: 6px; // image padding
545
padding-right: 6px; //
546
padding-top: 3px; //
547
padding-bottom: 3px; //
548
}
549
&.text-button {
551
// compensate text-button paddings
552
padding-left: 16px - 6px;
553
padding-right: 16px - 6px;
554
}
555
&.image-button {
557
// we want image buttons to have a 1:1 aspect ratio, so compensation
558
// of the padding added to the GtkImage is needed
559
padding-left: ($medium-size - 16px) / 2 - 6px;
560
padding-right: ($medium-size - 16px) / 2 - 6px;
561
}
562
&.needs-attention {
564
> label,
565
> image { @extend %needs-attention; }
566
&:checked {
568
> label,
569
> image {
570
animation: none;
571
background-image: none;
572
}
573
}
574
}
575
}
576
// hide separators
578
&.font,
579
&.file { separator { @extend %hide_separators; }}
580
// &.font { > box > box > label { font-weight: bold; }}
582
// inline-toolbar buttons
584
.inline-toolbar & {
585
// @extend %button_basic.flat;
586
&:not(.text-button) { @extend %circular_button; }
588
}
589
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
591
@at-root %circular_button,
593
&.close,
594
&.circular { // The Bloody Circul Button
595
border-radius: $circular-radius;
596
-gtk-outline-radius: $circular-radius;
597
// label { padding: 0; }
599
}
600
@at-root %small_button {
602
min-height: $small-size;
603
min-width: $small-size;
604
padding: 0;
605
border-radius: $circular-radius;
606
-gtk-outline-radius: $circular-radius;
607
}
608
}
609
%needs-attention {
611
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
612
background-repeat: no-repeat;
613
background-position: right 3px;
614
background-size: 6px 6px;
615
&:dir(rtl) { background-position: left 3px; }
617
}
618
// all the following is for the +|- buttons on inline toolbars, that way
620
// should really be deprecated...
621
.inline-toolbar toolbutton > button { // redefining the button look is
622
// needed since those are flat...
623
}
624
// More inline toolbar buttons
626
toolbar.inline-toolbar toolbutton {
627
// > button.flat { @extend %linked_middle; }
628
// &:first-child > button.flat { @extend %linked:first-child; }
630
// &:last-child > button.flat { @extend %linked:last-child; }
632
// &:only-child > button.flat { @extend %linked:only-child; }
634
}
635
%linked_middle {
637
border-radius: 0;
638
-gtk-outline-radius: $corner-radius;
639
}
640
%linked {
642
@extend %linked_middle;
643
&:first-child {
645
border-top-left-radius: $corner-radius;
646
border-bottom-left-radius: $corner-radius;
647
}
648
&:last-child {
650
border-top-right-radius: $corner-radius;
651
border-bottom-right-radius: $corner-radius;
652
}
653
&:only-child {
655
border-radius: $corner-radius;
656
}
657
}
658
%linked_vertical_middle {
660
border-radius: 0;
661
-gtk-outline-radius: $corner-radius;
662
}
663
%linked_vertical {
665
@extend %linked_vertical_middle;
666
&:first-child {
668
border-top-left-radius: $corner-radius;
669
border-top-right-radius: $corner-radius;
670
}
671
&:last-child {
673
border-bottom-left-radius: $corner-radius;
674
border-bottom-right-radius: $corner-radius;
675
}
676
&:only-child {
678
border-radius: $corner-radius;
679
}
680
}
681
%linked_entry {
683
@extend %linked_middle;
684
&:first-child {
686
border-radius: $corner-radius 0 0 0;
687
}
688
&:last-child {
690
border-radius: 0 $corner-radius 0 0;
691
}
692
&:only-child {
694
border-radius: $corner-radius $corner-radius 0 0;
695
}
696
}
697
%linked_vertical_entry {
699
@extend %linked_vertical_middle;
700
&:first-child {
702
border-radius: $corner-radius $corner-radius 0 0;
703
}
704
&:last-child {
706
border-radius: 0;
707
}
708
&:only-child {
710
border-radius: $corner-radius $corner-radius 0 0;
711
}
712
}
713
/* menu buttons */
715
modelbutton.flat,
716
.menuitem.button.flat {
717
min-height: $menuitem-size;
718
padding: 0 8px;
719
border-radius: $corner-radius;
720
color: inherit;
721
@extend %simple_flat_button;
723
&:selected { @extend %selected_items; }
725
}
726
modelbutton.flat arrow {
728
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
729
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
731
}
732
button.color {
734
min-height: $small-size;
735
min-width: $small-size;
736
padding: $container-padding;
737
colorswatch:only-child {
739
// &, overlay { border-radius: 0; }
740
}
741
}
742
/*********
745
* Links *
746
*********/
747
*:link {
748
color: $link;
749
&:visited { color: $link-visited; }
751
}
752
button:link,
754
button:visited {
755
&, &:focus, &:hover, &:active { @extend *:link; }
756
> label { text-decoration-line: underline; }
758
}
759
/*****************
761
* GtkSpinButton *
762
*****************/
763
spinbutton {
764
&:not(.vertical) {
765
// in this horizontal configuration, the whole spinbutton
766
// behaves as the entry, so we extend the entry styling
767
// and nuke the style on the internal entry
768
@extend %entry;
769
padding: 0;
771
entry {
773
min-width: $large-size - 8px * 2;
774
// reset all the other props since the spinbutton node is styled here
775
margin: 0;
776
border-image: none;
777
border-radius: 0;
778
box-shadow: none;
779
background-color: transparent;
780
}
781
button {
783
// margin: $container-padding;
784
border: solid $container-padding transparent;
785
@extend %simple_flat_button;
787
@extend %small_button;
789
// Remove unwanted focus indicator
791
&:focus:not(:hover):not(:active) {
792
box-shadow: inset 0 0 0 9999px transparent;
793
color: $text-secondary;
794
}
795
&.up:dir(ltr),
797
&.down:dir(rtl) { margin-left: -$container-padding / 2; }
798
&.up:dir(rtl),
800
&.down:dir(ltr) { margin-right: -$container-padding / 2; }
801
}
802
}
803
// OSD horizontal
805
.osd &:not(.vertical) {
806
}
807
// Vertical
809
&.vertical {
810
// in the vertical configuration, we treat the spinbutton
811
// as a box, and tweak the style of the entry in the middle
812
// so that it's linked
813
// FIXME: this should not be set at all, but otherwise it gets the wrong
815
// color
816
&:disabled { color: $text-disabled; }
817
&:drop(active) {
819
box-shadow: none;
820
}
821
entry {
823
@extend %entry_raised;
824
min-height: $medium-size;
826
min-width: $large-size;
827
padding: 0;
828
}
829
button {
831
min-height: $medium-size;
832
min-width: $large-size;
833
padding: 0;
834
@extend %simple_flat_button;
836
// Remove unwanted focus indicator
838
&:focus:not(:hover):not(:active) {
839
box-shadow: inset 0 0 0 9999px transparent;
840
color: $text-secondary;
841
}
842
&.up { border-radius: $corner-radius $corner-radius 0 0; }
844
&.down { border-radius: 0 0 $corner-radius $corner-radius; }
846
}
847
}
848
// OSD vertical
850
.osd &.vertical {
851
}
852
// Misc
854
treeview &:not(.vertical) {
855
min-height: 0;
856
border-style: none;
857
border-radius: 0;
858
entry {
860
min-height: 0;
861
padding: 1px 2px;
862
}
863
}
864
}
865
/**************
868
* ComboBoxes *
869
**************/
870
combobox {
871
arrow {
872
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
873
min-height: 16px;
874
min-width: 16px;
875
}
876
decoration,
878
button.combo:checked { transition: none; } // workaround for menuitem selection
879
button.combo cellview {
881
&:dir(ltr) { margin-left: 8px - ($medium-size - 16px) / 2; }
882
&:dir(rtl) { margin-right: 8px - ($medium-size - 16px) / 2; }
883
}
884
#gtk-combobox-popup-menu {
886
padding: 2px 0;
887
menuitem {
889
min-height: $medium-size - 2px * 2;
890
padding: 0 8px;
891
}
892
// overflow arrows
894
> arrow {
895
&.top { margin-top: -2px; }
896
&.bottom {
898
margin-top: 2px * 2;
899
margin-bottom: -2px * 3;
900
}
901
}
902
}
903
&.linked {
905
button:nth-child(2) {
906
&:dir(ltr) { @extend %linked_entry:last-child; }
907
&:dir(rtl) { @extend %linked_entry:first-child; }
908
}
909
}
910
> .linked > button {
912
@extend %linked_middle;
913
&:first-child { @extend %linked_entry:first-child; }
915
&:last-child { @extend %linked_entry:last-child; }
917
&:only-child { @extend %linked_entry:only-child; }
919
}
920
&:drop(active) { // FIXME: untested
922
box-shadow: none;
923
// button.combo { @extend %button_basic:drop(active); }
925
}
926
}
927
// the combo is a composite widget so the way we do button linking doesn't
929
// work, special case needed. See
930
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
931
.linked:not(.vertical) > combobox {
933
> box > button.combo { @extend %linked_middle; }
934
&:first-child > box > button.combo { @extend %linked_entry:first-child; }
936
&:last-child > box > button.combo { @extend %linked_entry:last-child; }
938
&:only-child > box > button.combo { @extend %linked_entry:only-child; }
940
}
941
.linked.vertical > combobox {
943
> box > button.combo { @extend %linked_vertical_middle; }
944
&:first-child > box > button.combo { @extend %linked_vertical_entry:first-child; }
946
&:last-child > box > button.combo { @extend %linked_vertical_entry:last-child; }
948
&:only-child > box > button.combo { @extend %linked_vertical_entry:only-child; }
950
}
951
button.combo {
953
border-radius: $corner-radius $corner-radius 0 0;
954
background-image: none;
955
font-weight: inherit;
956
@include entry(normal);
958
&:focus { @include entry(focus); }
960
&:hover { @include entry(hover); }
962
&:checked { @include entry(checked); }
964
&:disabled { @include entry(disabled); }
966
}
967
/************
970
* Toolbars *
971
************/
972
toolbar {
973
-GtkWidget-window-dragging: true;
974
padding: 2px;
975
background-color: $background;
976
button { @extend %button_basic.flat; }
978
// on OSD
980
.osd & { background-color: transparent; }
981
// stand-alone OSD toolbars
983
&.osd {
984
transition: $transition-shadow;
985
padding: $container-padding;
986
border-radius: $corner-radius;
987
box-shadow: $shadow-2, inset 0 1px highlight($surface);
988
background-color: $surface;
989
&:backdrop { box-shadow: $shadow-1, inset 0 1px highlight($surface); }
991
&.left,
993
&.right,
994
&.top,
995
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
996
}
997
// toolbar separators
999
&.horizontal > separator { margin: 2px; }
1000
&.vertical > separator { margin: 2px; }
1001
&:not(.inline-toolbar):not(.osd) {
1003
scale,
1004
entry,
1005
spinbutton,
1006
button { margin: 2px; }
1007
.linked entry,
1009
.linked spinbutton,
1010
.linked button {
1011
&:not(:first-child) { margin-left: 0; }
1012
&:not(:last-child) { margin-right: 0; }
1013
}
1014
spinbutton {
1016
entry,
1017
button { margin: 0; }
1018
}
1019
switch { margin: 2px + $container-padding 2px; }
1021
}
1022
}
1023
// searchbar, location-bar & inline-toolbar
1025
.inline-toolbar {
1026
padding: $container-padding;
1027
border-style: solid;
1028
border-width: 0 1px 1px;
1029
border-color: $frame;
1030
background-color: $base-alt;
1031
}
1032
searchbar > revealer > box,
1034
.location-bar {
1035
padding: $container-padding;
1036
border-style: solid;
1037
border-width: 0 0 1px;
1038
border-color: $divider;
1039
background-color: $background;
1040
background-clip: border-box;
1041
}
1042
searchbar > revealer > box {
1044
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1045
margin: -6px;
1046
padding: $container-padding;
1047
}
1048
/***************
1051
* Header bars *
1052
***************/
1053
%titlebar,
1054
headerbar {
1055
transition: background-color $duration $ease-out, color $duration $ease-out;
1056
min-height: $large-size;
1057
padding: 0 $container-padding;
1058
box-shadow: $shadow-1, inset 0 1px highlight($titlebar);
1059
background-color: $titlebar;
1060
color: $titlebar-text;
1061
&:disabled { color: $titlebar-text-disabled; }
1063
&:backdrop {
1065
color: $titlebar-text-secondary;
1066
&:disabled { color: $titlebar-text-secondary-disabled; }
1068
}
1069
.title {
1071
padding: 0 12px;
1072
font-weight: bold;
1073
}
1074
.subtitle {
1076
padding: 0 12px;
1077
font-size: smaller;
1078
@extend .dim-label;
1080
}
1081
entry {
1083
box-shadow: inset 0 -1px $titlebar-track;
1084
background-color: $titlebar-fill;
1085
color: $titlebar-text;
1086
&:disabled {
1088
box-shadow: inset 0 -1px $titlebar-track-disabled;
1089
background-color: $titlebar-fill;
1090
color: $titlebar-text-disabled;
1091
}
1092
image {
1094
color: $titlebar-text-secondary;
1095
&:hover, &:active { color: $titlebar-text; }
1097
&:disabled { color: $titlebar-text-disabled; }
1099
}
1100
}
1101
.linked:not(.vertical) > entry:not(.flat) { border-radius: $corner-radius $corner-radius 0 0; }
1103
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1105
@extend %button_basic.flat;
1106
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1108
$titlebar-indicator 0%,
1109
transparent 0%)
1110
0 0 0 / 0 0 0px;
1111
color: $titlebar-text-secondary;
1112
&:focus, &:hover, &:active { color: $titlebar-text; }
1114
&:disabled { color: $titlebar-text-secondary-disabled; }
1116
&:checked {
1118
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1119
$titlebar-indicator 100%,
1120
transparent 0%)
1121
0 0 2 / 0 0 2px;
1122
color: $titlebar-text;
1123
&:disabled { color: $titlebar-text-disabled; }
1125
&, &:disabled { background-color: transparent; }
1127
}
1128
&:backdrop {
1130
color: $titlebar-text-disabled;
1131
&:focus, &:hover, &:active { color: $titlebar-text-secondary; }
1133
&:disabled { color: $titlebar-text-secondary-disabled; }
1135
&:checked {
1137
color: $titlebar-text-secondary;
1138
&:disabled { color: $titlebar-text-secondary-disabled; }
1140
}
1141
}
1142
}
1143
button.suggested-action, button.destructive-action {
1145
&:disabled {
1146
background-color: $titlebar-fill;
1147
color: $titlebar-text-disabled;
1148
}
1149
}
1150
&.selection-mode {
1152
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1153
// but let's keep it for backwards compatibility.
1154
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1155
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1156
box-shadow: $shadow-1, inset 0 1px highlight($primary);
1157
background-color: $primary;
1158
color: on($primary);
1159
&:backdrop {
1161
color: on($primary, secondary);
1162
}
1163
.subtitle:link { color: on($primary); }
1165
button:not(.suggested-action):not(.destructive-action) {
1167
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1168
currentColor 0%,
1169
transparent 0%)
1170
0 0 0 / 0 0 0px;
1171
color: on($primary);
1172
&:disabled { color: on($primary, disabled); }
1174
&:checked {
1176
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1177
currentColor 100%,
1178
transparent 0%)
1179
0 0 2 / 0 0 2px;
1180
color: on($primary);
1181
&:disabled { color: on($primary, disabled); }
1183
}
1184
&:backdrop {
1186
color: on($primary, secondary);
1187
&:disabled { color: on($primary, secondary-disabled); }
1189
&:checked {
1191
color: on($primary, secondary);
1192
&:disabled { color: on($primary, secondary-disabled); }
1194
}
1195
}
1196
}
1197
.selection-menu {
1199
padding-left: 16px;
1200
padding-right: 16px;
1201
arrow { -GtkArrow-arrow-scaling: 1; }
1203
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1205
}
1206
}
1207
// squared corners when the window is maximized, tiled, or fullscreen
1209
.tiled &,
1210
.tiled-top &,
1211
.tiled-right &,
1212
.tiled-bottom &,
1213
.tiled-left &,
1214
.maximized &,
1215
.fullscreen & {
1216
border-radius: 0;
1217
box-shadow: $shadow-1;
1218
}
1219
&.default-decoration {
1221
min-height: $small-size;
1222
padding: $container-padding;
1223
box-shadow: inset 0 1px highlight($titlebar);
1224
.tiled &,
1226
.maximized &,
1227
.fullscreen & { box-shadow: none; }
1228
button.titlebutton {
1230
min-height: $small-size;
1231
min-width: $small-size;
1232
margin: 0;
1233
padding: 0;
1234
}
1235
// workaround for non-animatable buttons
1237
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1238
}
1239
.solid-csd & {
1241
&:dir(rtl), &:dir(ltr) { // specificity bump
1242
// margin-left: -2px;
1243
// margin-right: -2px;
1244
// margin-top: -2px;
1245
// border-radius: 0;
1246
box-shadow: $shadow-1; // Remove highlight as window managers should have it
1247
}
1248
}
1249
}
1250
headerbar {
1252
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1253
entry,
1254
spinbutton,
1255
button {
1256
margin-top: $container-padding;
1257
margin-bottom: $container-padding;
1258
}
1259
separator.titlebutton {
1261
margin-top: $large-size / 4;
1262
margin-bottom: $large-size / 4;
1263
background-color: $titlebar-divider;
1264
}
1265
switch {
1267
margin-top: ($large-size - 24px) / 2;
1268
margin-bottom: ($large-size - 24px) / 2;
1269
}
1270
// reset button margins of the spinbutton
1272
spinbutton button {
1273
margin-top: 0;
1274
margin-bottom: 0;
1275
}
1276
// FIXME: This is a hacky workaround.
1278
.entry-tag {
1279
margin-top: 5px;
1280
margin-bottom: 5px;
1281
}
1282
&.titlebar headerbar:not(.titlebar) {
1284
// Drop the background of non-titlebar nested headerbars. This is needed to
1285
// work around headerbar sliding animation issues without refactoring
1286
// Adwaita's support of titlebars and headerbars as it may break
1287
// applications.
1288
// See https://gitlab.gnome.org/GNOME/gtk/issues/1264 for more information.
1289
background-color: transparent;
1290
box-shadow: none;
1291
}
1292
}
1293
.background .titlebar {
1295
border-top-left-radius: $corner-radius;
1296
border-top-right-radius: $corner-radius;
1297
}
1298
.background.tiled .titlebar,
1300
.background.tiled-top .titlebar,
1301
.background.tiled-right .titlebar,
1302
.background.tiled-bottom .titlebar,
1303
.background.tiled-left .titlebar,
1304
.background.maximized .titlebar,
1305
.background.solid-csd .titlebar {
1306
border-top-left-radius: 0;
1307
border-top-right-radius: 0;
1308
}
1309
headerbar { // headerbar border rounding
1311
window separator:first-child + &, // tackles the paned container case
1312
window &:first-child { border-top-left-radius: $corner-radius; }
1313
window &:last-child { border-top-right-radius: $corner-radius; }
1315
window stack & { // tackles the stacked headerbars case
1317
&:first-child, &:last-child {
1318
border-top-left-radius: $corner-radius;
1319
border-top-right-radius: $corner-radius;
1320
}
1321
}
1322
window.tiled &,
1324
window.tiled-top &,
1325
window.tiled-right &,
1326
window.tiled-bottom &,
1327
window.tiled-left &,
1328
window.maximized &,
1329
window.fullscreen &,
1330
window.solid-csd & {
1331
&,
1332
&:first-child,
1333
&:last-child,
1334
&:only-child {
1335
border-top-left-radius: 0;
1336
border-top-right-radius: 0;
1337
}
1338
}
1339
}
1340
.titlebar:not(headerbar) {
1342
window.csd > & {
1343
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1344
padding: 0;
1345
background-color: transparent;
1346
background-image: none;
1347
border-style: none;
1348
box-shadow: none;
1349
}
1350
> separator {
1352
background-color: $titlebar;
1353
background-image: image($divider);
1354
}
1355
@extend %titlebar;
1357
}
1358
// Development versions of apps to use a differently styled headerbar
1360
window.devel headerbar.titlebar:not(.selection-mode) {
1361
}
1362
/************
1365
* Pathbars *
1366
************/
1367
%pathbar_button,
1368
.path-bar button {
1369
padding-left: ($medium-size - 24px) / 2;
1370
padding-right: ($medium-size - 24px) / 2;
1371
label:not(:only-child) {
1373
&:first-child { margin-left: 4px; }
1374
&:last-child { margin-right: 4px; }
1376
}
1377
&.slider-button {
1379
padding-left: (24px - 16px) / 2;
1380
padding-right: (24px - 16px) / 2;
1381
}
1382
:not(headerbar) & {
1384
@extend %flat_button;
1385
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1387
$primary 0%,
1388
transparent 0%)
1389
0 0 0 / 0 0 0px;
1390
border-radius: $corner-radius;
1391
&:checked {
1393
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1394
$primary 100%,
1395
transparent 0%)
1396
0 0 2 / 0 0 2px;
1397
&, &:disabled { background-color: transparent; }
1399
}
1400
}
1401
}
1402
/**************
1405
* Tree Views *
1406
**************/
1407
treeview.view {
1408
@at-root * {
1409
-GtkTreeView-horizontal-separator: 4;
1410
-GtkTreeView-grid-line-width: 1;
1411
-GtkTreeView-grid-line-pattern: '';
1412
-GtkTreeView-tree-line-width: 1;
1413
-GtkTreeView-tree-line-pattern: '';
1414
-GtkTreeView-expander-size: 16;
1415
}
1416
border-left-color: $track; // this is actually the tree lines color,
1418
border-top-color: $divider; // while this is the grid lines color, better then nothing
1419
// FIXME: Avoid transparency background-color being slightly darker
1421
&:selected {
1422
background-color: $base;
1423
background-image: image($overlay-selected);
1424
}
1425
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1427
&:hover, &:selected { border-radius: 0; }
1429
&.separator {
1431
min-height: 1px + 2px * 2;
1432
color: $divider;
1433
}
1434
&:drop(active) {
1436
border-style: solid none;
1437
border-width: 1px;
1438
border-color: $primary;
1439
&.after { border-top-style: none; }
1441
&.before { border-bottom-style: none; }
1443
}
1444
&.expander {
1446
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1447
-gtk-icon-transform: rotate(-90deg);
1448
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1450
&:checked { -gtk-icon-transform: unset; }
1452
color: $text-secondary;
1454
&:hover, &:active { color: $text; }
1456
&:disabled { color: $text-secondary-disabled; }
1458
}
1459
&.progressbar { // progress bar in treeviews
1461
border-bottom: $bar-size solid $primary;
1462
box-shadow: none;
1463
background-color: transparent;
1464
background-image: none;
1465
&:selected:hover { box-shadow: none; }
1467
}
1468
&.trough { // progress bar trough in treeviews
1470
border-bottom: $bar-size solid $track-disabled;
1471
box-shadow: none;
1472
background-color: transparent;
1473
background-image: none;
1474
&:selected:hover { box-shadow: none; }
1476
}
1477
header {
1479
button {
1480
@extend row.activatable;
1481
padding: 2px 6px;
1483
border-style: none solid solid none;
1484
border-width: 1px;
1485
border-color: $divider;
1486
border-radius: 0;
1487
background-clip: border-box;
1488
&:not(:focus):not(:hover):not(:active) { color: $text-secondary; }
1490
&, &:hover, &:active { box-shadow: none; }
1492
&, &:disabled { background-color: $base; }
1494
&:last-child { border-right-style: none; }
1496
}
1497
}
1498
button.dnd,
1500
header.button.dnd { // for treeview-like derive widgets
1501
padding: 2px 6px;
1502
border-style: none solid solid;
1503
border-width: 1px;
1504
border-color: $divider;
1505
border-radius: 0;
1506
box-shadow: none;
1507
background-color: $base;
1508
background-clip: border-box;
1509
color: $primary;
1510
}
1511
acceleditor > label { background-color: $primary; } // see tests/testaccel to test
1513
}
1514
/*********
1517
* Menus *
1518
*********/
1519
menubar,
1520
.menubar {
1521
-GtkWidget-window-dragging: true;
1522
padding: 0;
1523
// box-shadow: inset 0 -1px $divider;
1524
background-color: $titlebar;
1525
color: $titlebar-text;
1526
> menuitem {
1528
transition: $transition;
1529
min-height: 20px;
1530
padding: 4px 8px;
1531
color: $titlebar-text-secondary;
1532
&:hover { // Seems like it :hover even with keyboard focus
1534
transition: none;
1535
background-color: $overlay-checked;
1536
color: $titlebar-text;
1537
}
1538
&:disabled { color: $titlebar-text-secondary-disabled; }
1540
label:disabled { color: inherit; } // to inherit the above color
1542
}
1543
}
1544
// Needed to make the border-radius of menus work
1546
// otherwise the background bleeds out of the menu edges
1547
.background.popup { background-color: transparent; }
1548
menu,
1550
.menu,
1551
.context-menu {
1552
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1553
padding: 4px 0;
1554
box-shadow: inset 0 1px highlight($surface);
1555
background-color: $surface;
1556
border: 1px solid $frame; // adds borders in a non composited env
1557
.csd & {
1559
border: none; // axes borders in a composited env
1560
border-radius: $corner-radius;
1561
}
1562
menuitem {
1564
transition: background-color $duration $ease-out;
1565
min-height: 20px;
1566
min-width: 40px;
1567
padding: 4px 8px;
1568
font: initial;
1569
text-shadow: none;
1570
&:hover {
1572
transition: none;
1573
background-color: $overlay-hover;
1574
}
1575
&:disabled { color: $text-disabled; }
1577
// submenu indicators
1579
arrow {
1580
min-height: 16px;
1581
min-width: 16px;
1582
&:dir(ltr) {
1584
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1585
margin-left: 8px;
1586
}
1587
&:dir(rtl) {
1589
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1590
margin-right: 8px;
1591
}
1592
}
1593
// avoids labels color being overridden, see
1595
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1596
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1597
}
1598
// overflow arrows
1600
> arrow {
1601
min-height: 16px;
1602
min-width: 16px;
1603
padding: 4px;
1604
background-color: $surface;
1605
color: $text-secondary;
1606
&.top {
1608
margin-top: -4px;
1609
border-bottom: 1px solid $divider;
1610
border-radius: $corner-radius $corner-radius 0 0;
1611
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1612
}
1613
&.bottom {
1615
margin-top: 4px * 2;
1616
margin-bottom: -4px * 3;
1617
border-top: 1px solid $divider;
1618
border-radius: 0 0 $corner-radius $corner-radius;
1619
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1620
}
1621
&:hover {
1623
background-image: image($overlay-hover);
1624
color: $text;
1625
}
1626
&:disabled {
1628
border-color: transparent;
1629
background-color: transparent;
1630
color: transparent;
1631
// color: $text-secondary-disabled;
1632
}
1633
}
1634
separator { margin: 4px 0; }
1636
}
1637
menuitem {
1639
accelerator { color: $text-secondary; }
1640
&:disabled accelerator { color: $text-secondary-disabled; }
1642
}
1643
/************
1646
* Popovers *
1647
************/
1648
popover.background {
1649
transition: $transition-shadow;
1650
padding: 2px;
1651
box-shadow: $shadow-2; // TODO: this should really have a highlight
1652
background-color: $surface;
1653
&:backdrop { box-shadow: $shadow-1; }
1655
&, .csd & {
1657
border-style: solid;
1658
border-width: 1px;
1659
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1660
border-radius: $corner-radius + 1px;
1661
}
1662
> stack { margin: -4px; } // remove extra padding from menu style popovers
1664
> toolbar { margin: -2px; }
1666
> list,
1668
> .view,
1669
> toolbar {
1670
border-style: none;
1671
box-shadow: none;
1672
background-color: transparent;
1673
}
1674
// FIXME: Use the popover color instead of transparent as a workaround for .view
1676
list,
1677
.view:not(:selected),
1678
toolbar { background-color: $surface; }
1679
// &.touch-selection,
1681
// &.magnifier,
1682
// &.osd { @extend %osd; }
1683
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1685
&.menu button,
1687
button.model {
1688
@extend %simple_flat_button;
1689
min-height: 32px;
1691
padding: 0 8px;
1692
border-radius: $corner-radius;
1693
&:checked { @extend %selected_items; }
1695
}
1696
separator { margin: 4px 0; }
1698
list separator { margin: 0; }
1700
}
1701
/*************
1703
* Notebooks *
1704
*************/
1705
notebook {
1706
frame > paned > & > header,
1707
&.frame > header { background-color: $base-alt; }
1708
&:focus tab:checked {
1710
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
1711
}
1712
> header {
1714
border-width: 1px;
1715
border-color: $divider;
1716
background-color: $background;
1717
background-clip: border-box;
1718
&.top {
1720
border-bottom-style: solid;
1721
> tabs {
1723
margin-bottom: -1px;
1724
> tab {
1726
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1727
&:checked { border-image-source: linear-gradient(to top, $primary 2px, $frame 2px); }
1729
&.reorderable-page { border-image-width: 0 1px 2px; }
1731
}
1732
}
1733
}
1734
&.bottom {
1736
border-top-style: solid;
1737
> tabs {
1739
margin-top: -1px;
1740
> tab {
1742
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1743
&:checked { border-image-source: linear-gradient(to bottom, $primary 2px, $frame 2px); }
1745
&.reorderable-page { border-image-width: 2px 1px 0; }
1747
}
1748
}
1749
}
1750
&.left {
1752
border-right-style: solid;
1753
> tabs {
1755
margin-right: -1px;
1756
> tab {
1758
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1759
&:checked { border-image-source: linear-gradient(to left, $primary 2px, $frame 2px); }
1761
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1763
}
1764
}
1765
}
1766
&.right {
1768
border-left-style: solid;
1769
> tabs {
1771
margin-left: -1px;
1772
> tab {
1774
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1775
&:checked { border-image-source: linear-gradient(to right, $primary 2px, $frame 2px); }
1777
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1779
}
1780
}
1781
}
1782
&.top > tabs > arrow {
1784
@extend %notebook_vert_arrows;
1785
border-top-style: none;
1787
}
1788
&.bottom > tabs > arrow {
1790
@extend %notebook_vert_arrows;
1791
border-bottom-style: none;
1793
}
1794
@at-root %notebook_vert_arrows {
1796
padding-left: 4px;
1797
padding-right: 4px;
1798
&.down {
1800
margin-left: -8px;
1801
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1802
}
1803
&.up {
1805
margin-right: -8px;
1806
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1807
}
1808
}
1809
&.left > tabs > arrow {
1811
@extend %notebook_horz_arrows;
1812
border-left-style: none;
1814
}
1815
&.right > tabs > arrow {
1817
@extend %notebook_horz_arrows;
1818
border-right-style: none;
1820
}
1821
@at-root %notebook_horz_arrows {
1823
padding-top: 4px;
1824
padding-bottom: 4px;
1825
&.down {
1827
margin-top: -8px;
1828
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1829
}
1830
&.up {
1832
margin-bottom: -8px;
1833
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1834
}
1835
}
1836
> tabs > arrow {
1838
@extend %simple_flat_button;
1839
min-height: 16px;
1841
min-width: 16px;
1842
border-radius: 0;
1843
}
1844
tab {
1846
transition: $transition,
1847
background-size 0ms,
1848
background-image 0ms;
1849
min-height: $small-size;
1850
min-width: $small-size;
1851
padding: $container-padding 12px;
1852
border-width: 1px; // for reorderable tabs
1854
border-color: transparent; //
1855
outline: none;
1857
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
1858
background-repeat: no-repeat;
1859
background-position: center;
1860
background-size: 0% 0%;
1861
background-clip: border-box;
1862
color: $text-secondary;
1864
font-weight: 500;
1865
&:hover {
1867
background-color: $overlay-hover;
1868
color: $text;
1869
}
1870
&:disabled { color: $text-secondary-disabled; }
1872
&:checked {
1874
transition: $transition,
1875
background-size $ripple-fade-in-duration $ease-out,
1876
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
1877
background-color: transparent;
1878
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
1879
background-size: 1000% 1000%;
1880
background-clip: padding-box;
1881
color: $text;
1882
&:disabled { color: $text-disabled; }
1884
&.reorderable-page {
1886
border-color: $frame;
1887
background-color: $base;
1888
}
1889
}
1890
// colors the button like the label, overridden otherwise
1892
button.flat {
1893
@extend %small_button;
1894
&:last-child {
1896
margin-left: $container-padding;
1897
margin-right: $container-padding - 12px;
1898
}
1899
&:first-child {
1901
margin-left: $container-padding - 12px;
1902
margin-right: $container-padding;
1903
}
1904
}
1905
}
1906
&.top,
1908
&.bottom {
1909
tabs {
1910
padding-left: 8px;
1911
padding-right: 8px;
1912
&:not(:only-child) {
1914
&:first-child { margin-left: 0; }
1915
&:last-child { margin-right: 0; }
1917
}
1918
tab.reorderable-page { border-style: none solid; }
1920
}
1921
}
1922
&.left,
1924
&.right {
1925
tabs {
1926
padding-top: 8px;
1927
padding-bottom: 8px;
1928
&:not(:only-child) {
1930
&:first-child { margin-top: 0; }
1931
&:last-child { margin-bottom: 0; }
1933
}
1934
tab.reorderable-page { border-style: solid none; }
1936
}
1937
}
1938
}
1939
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1941
background-color: $base;
1942
}
1943
}
1944
/**************
1947
* Scrollbars *
1948
**************/
1949
scrollbar {
1950
$_slider_min_length: 24px;
1951
// disable steppers
1953
@at-root * {
1954
-GtkScrollbar-has-backward-stepper: false;
1955
-GtkScrollbar-has-forward-stepper: false;
1956
}
1957
transition: $transition;
1959
background-color: $base;
1960
background-clip: $background-clip-extra;
1961
// scrollbar border
1963
&.top { border-bottom: 1px solid $divider; }
1964
&.bottom { border-top: 1px solid $divider; }
1965
&.left { border-right: 1px solid $divider; }
1966
&.right { border-left: 1px solid $divider; }
1967
// slider
1969
slider {
1970
transition: $transition, margin 0ms, border-width 0ms;
1971
min-width: 8px;
1972
min-height: 8px;
1973
border: 4px solid transparent;
1974
border-radius: $circular-radius;
1975
background-clip: padding-box;
1976
background-color: $text-disabled;
1977
&:hover { background-color: $text-secondary; }
1979
&:active { background-color: $text; }
1981
&:disabled { background-color: $text-secondary-disabled; }
1983
}
1984
&.fine-tune {
1986
slider {
1987
transition: $transition, margin 0ms, border-width 0ms, min-width 0ms, min-height 0ms;
1988
min-width: 4px;
1989
min-height: 4px;
1990
}
1991
&.horizontal slider { margin: 2px 0; }
1993
&.vertical slider { margin: 0 2px; }
1995
}
1996
&.overlay-indicator {
1998
&:not(.dragging):not(.hovering) {
1999
border-color: transparent;
2000
background-color: transparent;
2001
slider {
2003
min-width: 4px;
2004
min-height: 4px;
2005
margin: 4px - 1px;
2006
border: 1px solid rgba($base, 0.3);
2007
}
2008
button {
2010
min-width: 4px;
2011
min-height: 4px;
2012
margin: 4px - 1px;
2013
border: 1px solid rgba($base, 0.3);
2014
border-radius: $circular-radius;
2015
background-color: $text-disabled;
2016
background-clip: padding-box;
2017
-gtk-icon-source: none;
2018
&:disabled { background-color: $text-secondary-disabled; }
2020
}
2021
&.horizontal {
2023
slider { min-width: $_slider_min_length; }
2024
button { min-width: 8px; }
2026
}
2027
&.vertical {
2029
slider { min-height: $_slider_min_length; }
2030
button { min-height: 8px; }
2032
}
2033
}
2034
&.dragging,
2036
&.hovering { background-color: rgba($base, 0.9); }
2037
}
2038
&.horizontal slider { min-width: $_slider_min_length; }
2040
&.vertical slider { min-height: $_slider_min_length; }
2042
// button styling
2044
button {
2045
@extend %simple_flat_button;
2046
min-width: 16px;
2048
min-height: 16px;
2049
padding: 0;
2050
border-radius: 0;
2051
}
2052
// button icons
2054
&.vertical {
2055
button {
2056
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2057
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2059
}
2060
}
2061
&.horizontal {
2063
button {
2064
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2065
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2067
}
2068
}
2069
}
2070
/**********
2073
* Switch *
2074
**********/
2075
switch {
2076
transition: all $duration $ease-out;
2077
margin: $container-padding 0;
2078
padding: 0 2px;
2079
border: 5px solid transparent;
2080
border-radius: $circular-radius;
2081
background-color: $track;
2082
background-clip: padding-box;
2083
font-size: 0;
2084
&:checked { background-color: rgba($primary, 0.5); }
2086
&:disabled { opacity: 0.5; }
2088
// hide on/off icons for >=3.24.5
2090
image {
2091
margin: -8px;
2092
-gtk-icon-transform: scale(0);
2093
}
2094
slider {
2096
transition: all $duration $ease-out;
2097
min-width: 20px;
2098
min-height: 20px;
2099
margin: -3px -2px;
2100
border-radius: $circular-radius;
2101
outline: none;
2102
box-shadow: 0 0 0 10px transparent, $shadow-1;
2103
background-color: $surface;
2104
}
2105
&:focus slider { box-shadow: 0 0 0 10px $overlay-focus, $shadow-1; }
2107
&:hover slider { box-shadow: 0 0 0 10px $overlay-hover, $shadow-1; }
2109
&:focus:hover slider { box-shadow: 0 0 0 10px $overlay-focus-hover, $shadow-1; }
2111
&:checked slider {
2113
background-color: $primary;
2114
color: $primary;
2115
}
2116
row:selected & {
2118
}
2119
}
2120
/*************************
2123
* Check and Radio items *
2124
*************************/
2125
// draw regular check and radio items using our PNG assets
2126
// all assets are rendered from assets.svg. never add pngs directly
2127
// selection-mode
2129
.view.content-view.check:not(list),
2130
.content-view .tile check:not(list) {
2131
min-height: 40px;
2132
min-width: 40px;
2133
margin: 0;
2134
padding: 0;
2135
box-shadow: none;
2136
background-color: transparent;
2137
background-image: none;
2138
-gtk-icon-shadow: $shadow-1;
2139
&:hover, &:active { -gtk-icon-shadow: $shadow-2; }
2141
@each $s, $as in ('', '-unchecked'),
2143
(':checked', '-checked') {
2144
&#{$s} {
2145
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}.png"),
2146
url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}@2.png"));
2147
}
2148
}
2149
}
2150
checkbutton,
2152
radiobutton {
2153
outline: none;
2154
}
2155
checkbutton.text-button,
2157
radiobutton.text-button {
2158
// this is for a nice focus on check and radios text
2159
padding: 2px;
2160
label:not(:only-child) { margin: 0 4px; }
2162
}
2163
$check_radio_size: 40px;
2165
check,
2167
radio {
2168
min-height: 24px;
2169
min-width: 24px;
2170
margin: -($check_radio_size - 24px) / 2;
2171
padding: ($check_radio_size - 24px) / 2;
2172
@extend %simple_flat_button;
2174
@extend %circular_button;
2176
&:checked, &:indeterminate {
2178
color: $primary;
2179
&:disabled { color: $text-secondary-disabled; }
2181
}
2182
// &:only-child { margin: -12px; }
2184
popover modelbutton.flat & {
2186
&, &:focus, &:hover, &:focus:hover, &:active, &:disabled {
2187
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2188
box-shadow: none;
2189
background-image: none;
2190
}
2191
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2193
&.left:dir(rtl) {
2195
margin-left: -12px;
2196
margin-right: -4px;
2197
}
2198
&.right:dir(ltr) {
2200
margin-left: -4px;
2201
margin-right: -12px;
2202
}
2203
}
2204
menu menuitem & {
2206
transition: none;
2207
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2208
padding: 0;
2209
&:dir(ltr) { margin-right: 8px; }
2211
&:dir(rtl) { margin-left: 8px; }
2213
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2215
&, &:hover, &:disabled {
2217
box-shadow: none;
2218
// color: inherit;
2219
}
2220
}
2221
}
2222
%check,
2224
check {
2225
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2226
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2228
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2230
}
2231
%radio,
2233
radio {
2234
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2235
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2237
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2239
border-image-slice: $check_radio_size / 2px;
2241
border-image-width: $check_radio_size / 2;
2242
$radio_indicator: 10px / $check_radio_size / 2;
2244
& {
2246
border-image-source: -gtk-gradient(radial,
2247
center center, 0,
2248
center center, 0.001,
2249
to($primary),
2250
to(transparent));
2251
}
2252
&:checked:not(:indeterminate) {
2254
border-image-source: -gtk-gradient(radial,
2255
center center, 0,
2256
center center, $radio_indicator,
2257
to($primary),
2258
to(transparent));
2259
}
2260
&:checked:not(:indeterminate):disabled {
2262
border-image-source: -gtk-gradient(radial,
2263
center center, 0,
2264
center center, $radio_indicator,
2265
to($text-secondary-disabled),
2266
to(transparent));
2267
}
2268
}
2269
%small_check,
2271
menu menuitem check {
2272
& {
2273
min-height: 16px;
2274
min-width: 16px;
2275
border-radius: $corner-radius;
2276
-gtk-outline-radius: $corner-radius;
2277
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2278
}
2279
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2281
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2283
}
2284
%small_radio,
2286
menu menuitem radio {
2287
& {
2288
min-height: 16px;
2289
min-width: 16px;
2290
border-image: none;
2291
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2292
}
2293
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2295
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2297
}
2298
// ANIMATION:
2300
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2301
// the transformation is set on the active state and it get reset on the checked state.
2302
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2303
treeview.view check,
2305
treeview.view radio {
2306
padding: 0;
2307
&:hover, &:selected {
2309
box-shadow: none;
2310
background-color: transparent;
2311
}
2312
& {
2314
color: $text-secondary;
2315
&:hover, &:active { color: $text; }
2317
&:disabled { color: $text-secondary-disabled; }
2319
&:checked, &:indeterminate { color: $primary; }
2321
&:checked:disabled, &:indeterminate:disabled { color: $text-secondary-disabled; }
2323
}
2324
}
2325
treeview.view radio:checked {
2327
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2328
border-image: none;
2329
}
2330
/************
2333
* GtkScale *
2334
************/
2335
scale {
2336
// sizing
2337
$_marks_length: 8px;
2338
$_marks_distance: 7px;
2339
$trough_size: 2px;
2341
$finetune_trough_size: 4px;
2342
$slider_size: 32px;
2344
$slider_margin: -($slider_size - $trough_size) / 2;
2346
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2347
$color_slider_margin: -($slider_size) * 3 / 4;
2349
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2350
min-height: $trough_size;
2352
min-width: $trough_size;
2353
&.horizontal { padding: ($medium-size - $trough_size) / 2 12px; }
2355
&.vertical { padding: 12px ($medium-size - $trough_size) / 2; }
2357
// the slider is inside the trough, so to have make it bigger there's a negative margin
2359
slider {
2360
min-height: $slider_size;
2361
min-width: $slider_size;
2362
margin: $slider_margin;
2363
}
2364
// click-and-hold the slider to activate
2366
&.fine-tune {
2367
&.horizontal {
2368
min-height: $finetune_trough_size;
2369
padding-top: ($medium-size - $finetune_trough_size) / 2;
2370
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2371
}
2372
&.vertical {
2374
min-width: $finetune_trough_size;
2375
padding-left: ($medium-size - $finetune_trough_size) / 2;
2376
padding-right: ($medium-size - $finetune_trough_size) / 2;
2377
}
2378
// to make the trough grow in fine-tune mode
2380
slider { margin: $finetune_slider_margin; }
2381
}
2382
// the backing bit
2384
trough {
2385
transition: background-color $duration $ease-out;
2386
outline: none;
2387
background-color: $track;
2388
&:disabled { background-color: $track-disabled; }
2390
}
2391
// the colored part of the backing bit
2393
highlight {
2394
transition: background-color $duration $ease-out;
2395
background-color: $primary;
2396
&:disabled { background-color: transparent; }
2398
}
2399
// this is another differently styled part of the backing bit, the most relevant use case is for example
2401
// in media player to indicate how much video stream as been cached
2402
fill {
2403
transition: background-color $duration $ease-out;
2404
background-color: $track;
2405
&:disabled { background-color: transparent; }
2407
}
2408
slider {
2410
transition: background-color $duration $ease-out,
2411
background-size $ripple-fade-out-duration $ease-out,
2412
background-image $ripple-fade-out-opacity-duration $ease-out;
2413
background-repeat: no-repeat;
2414
background-position: center;
2415
background-size: auto, 1000% 1000%;
2416
border-radius: 50%;
2417
color: $primary;
2418
@each $s, $as in ('', ''),
2420
(':disabled', '-disabled') {
2421
&#{$s} {
2422
$_url: 'assets/scale-slider#{$as}#{$asset-suffix}';
2423
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2425
radial-gradient(circle, transparent 10%, transparent 0%);
2426
}
2427
}
2428
&:focus { background-color: $overlay-focus; }
2430
&:hover { background-color: $overlay-hover; }
2432
&:focus:hover { background-color: $overlay-focus-hover; }
2434
&:active {
2436
$_url: 'assets/scale-slider#{$asset-suffix}';
2437
transition: background-color $duration $ease-out,
2439
background-size 0ms,
2440
background-image 0ms;
2441
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2442
background-color: $overlay-hover;
2443
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2444
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2445
background-size: auto, 0% 0%;
2446
}
2447
}
2448
marks label,
2450
value { color: $text-secondary; }
2451
marks {
2453
color: $track;
2454
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2456
(bottom, bottom, top),
2457
(left, left, right),
2458
(right, right, left) {
2459
&.#{$marks_class} {
2460
margin-#{$marks_margin}: $_marks_distance;
2461
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2462
}
2463
}
2464
}
2465
&.fine-tune marks {
2467
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2468
(bottom, bottom, top),
2469
(left, left, right),
2470
(right, right, left) {
2471
&.#{$marks_class} {
2472
margin-#{$marks_margin}: $_marks_distance - 1px;
2473
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2474
}
2475
}
2476
}
2477
&.horizontal {
2479
indicator {
2480
min-height: $_marks_length;
2481
min-width: 1px;
2482
}
2483
}
2484
&.vertical {
2486
indicator {
2487
min-height: 1px;
2488
min-width: $_marks_length;
2489
}
2490
}
2491
// *WARNING* scale with marks madness following
2493
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2495
('vertical', 'vert') {
2496
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2497
('marks-after', 'marks-after:not(.marks-before)') {
2498
&.#{$dir_class}.#{$marks_class} {
2499
slider {
2500
@each $state, $state_infix in ('', ''),
2501
(':disabled', '-disabled') {
2502
&#{$state} {
2503
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2504
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2506
radial-gradient(circle, transparent 10%, transparent 0%);
2507
}
2508
}
2509
&:active {
2511
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$asset-suffix}';
2512
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2514
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2515
}
2516
}
2517
}
2518
}
2519
}
2520
&.color {
2522
min-height: 0;
2523
min-width: 0;
2524
&.horizontal {
2526
padding: 0 0 12px 0;
2527
slider {
2529
&:dir(ltr), &:dir(rtl) { // specificity bump
2530
margin-bottom: $color_slider_margin;
2531
margin-top: $color_marks_slider_margin;
2532
}
2533
}
2534
}
2535
&.vertical {
2537
&:dir(ltr) {
2538
padding: 0 0 0 12px;
2539
slider {
2541
margin-left: $color_slider_margin;
2542
margin-right: $color_marks_slider_margin;
2543
}
2544
}
2545
&:dir(rtl) {
2547
padding: 0 12px 0 0;
2548
slider {
2550
margin-right: $color_slider_margin;
2551
margin-left: $color_marks_slider_margin;
2552
}
2553
}
2554
}
2555
}
2556
}
2557
/*****************
2560
* Progress bars *
2561
*****************/
2562
progressbar {
2563
// sizing
2564
&.horizontal {
2565
trough,
2566
progress { min-height: $bar-size; }
2567
}
2568
&.vertical {
2570
trough,
2571
progress { min-width: $bar-size; }
2572
}
2573
// FIXME: insensitive state missing and some other state should be set probably
2575
color: $text-secondary;
2576
font-size: smaller;
2577
trough { background-color: $track-disabled; }
2579
progress { background-color: $primary; }
2581
&.osd { // progressbar.osd used for epiphany page loading progress
2583
// min-width: $bar-size;
2584
// min-height: $bar-size;
2585
// background-color: transparent;
2586
// trough { background-color: transparent; }
2588
// progress { background-color: $primary; }
2590
}
2591
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2593
}
2594
/*************
2597
* Level Bar *
2598
*************/
2599
levelbar {
2600
&.horizontal {
2601
block { min-height: $bar-size; }
2602
&.discrete block {
2604
min-width: $medium-size;
2605
&:not(:last-child) { margin-right: 2px; }
2607
}
2608
}
2609
&.vertical {
2611
block { min-width: $bar-size; }
2612
&.discrete block {
2614
min-height: $medium-size;
2615
&:not(:last-child) { margin-bottom: 2px; }
2617
}
2618
}
2619
// imitate the entry style
2621
trough {
2622
// padding: 2px;
2623
// border-radius: $corner-radius;
2624
// box-shadow: $shadow-1;
2625
// background-color: $base;
2626
// &:disabled { background-color: $base-alt; }
2628
}
2629
block {
2631
&.low { background-color: $warning; }
2632
&.high,
2634
&:not(.empty) { background-color: $primary; }
2635
&.full { background-color: $success; }
2637
&.empty { background-color: $track-disabled; }
2639
}
2640
}
2641
/****************
2644
* Print dialog *
2645
*****************/
2646
printdialog {
2647
paper {
2648
padding: 0;
2649
border: 1px solid $frame;
2650
background-color: $base;
2651
color: $text;
2652
}
2653
.dialog-action-box { margin: 12px; }
2655
}
2656
/**********
2659
* Frames *
2660
**********/
2661
frame > border,
2662
.frame {
2663
margin: 0;
2664
padding: 0;
2665
border: 1px solid $frame;
2666
border-radius: 0;
2667
box-shadow: none;
2668
&.flat { border-style: none; }
2670
}
2671
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2673
actionbar > revealer > box {
2675
padding: $container-padding;
2676
border-top: 1px solid $divider;
2677
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2679
}
2680
scrolledwindow {
2682
viewport.frame { // avoid double borders when viewport inside scrolled window
2683
border-style: none;
2684
}
2685
// This is used when content is touch-dragged past boundaries.
2687
// draws a box on top of the content, the size changes programmatically.
2688
@at-root overshoot {
2689
&.top { @include overshoot(top); }
2690
&.bottom { @include overshoot(bottom); }
2692
&.left { @include overshoot(left); }
2694
&.right { @include overshoot(right); }
2696
}
2697
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2699
@at-root undershoot {
2700
&.top { @include undershoot(top); }
2701
&.bottom { @include undershoot(bottom); }
2703
&.left { @include undershoot(left); }
2705
&.right { @include undershoot(right); }
2707
}
2708
@at-root junction { // the small square between two scrollbars
2710
border-style: solid none none solid;
2711
border-width: 1px;
2712
border-color: $divider;
2713
background-color: $base;
2714
&:dir(rtl) { border-style: solid solid none none; }
2716
}
2717
}
2718
// vbox and hbox separators
2720
separator {
2721
min-width: 1px;
2722
min-height: 1px;
2723
background-color: $divider;
2724
}
2725
%hide_separators {
2727
min-width: 0;
2728
min-height: 0;
2729
background-color: transparent;
2730
}
2731
/*********
2734
* Lists *
2735
*********/
2736
list {
2737
border-color: $frame;
2738
background-color: $base;
2739
row { padding: 2px; }
2741
}
2742
row {
2744
&.activatable {
2745
transition: $transition,
2746
background-size $ripple-fade-out-duration $ease-out,
2747
background-image $ripple-fade-out-opacity-duration $ease-out;
2748
outline: none;
2749
box-shadow: inset 0 0 0 9999px transparent;
2750
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2751
background-repeat: no-repeat;
2752
background-position: center;
2753
background-size: 1000% 1000%;
2754
&:focus {
2756
box-shadow: inset 0 0 0 9999px $overlay-focus;
2757
}
2758
&:hover {
2760
transition: $transition,
2761
box-shadow 0ms,
2762
background-size $ripple-fade-out-duration $ease-out,
2763
background-image $ripple-fade-out-opacity-duration $ease-out;
2764
box-shadow: inset 0 0 0 9999px $overlay-hover;
2765
}
2766
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2768
&:active {
2769
transition: $transition,
2770
background-size 0ms,
2771
background-image 0ms;
2772
animation: ripple $ripple-fade-in-duration $ease-out forwards;
2773
box-shadow: inset 0 0 0 9999px $overlay-hover;
2774
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
2775
background-size: 0% 0%;
2776
}
2777
}
2778
&:selected {
2780
@extend %selected_items;
2781
color: $primary; // for overlays
2782
image,
2784
label { color: $text; }
2785
button image,
2787
button label { color: inherit; }
2788
&:disabled {
2790
image,
2791
label { color: $text-disabled; }
2792
}
2793
}
2794
}
2795
/*********************
2798
* App Notifications *
2799
*********************/
2800
.app-notification {
2801
// @extend %osd;
2802
@extend toolbar.osd;
2804
margin: 8px;
2806
button { @extend %button_basic.flat; }
2808
&.frame,
2810
border { border-style: none; }
2811
}
2812
/*************
2815
* Expanders *
2816
*************/
2817
expander {
2818
title > arrow {
2819
transition: all $duration $ease-out;
2820
min-width: 16px;
2821
min-height: 16px;
2822
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2823
-gtk-icon-transform: rotate(-90deg);
2824
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2826
&:checked { -gtk-icon-transform: unset; }
2828
color: $text-secondary;
2830
&:hover, &:active { color: $text; }
2832
&:disabled { color: $text-secondary-disabled; }
2834
}
2835
}
2836
/************
2839
* Calendar *
2840
************/
2841
calendar {
2842
padding: 1px;
2843
border: 1px solid $frame;
2844
color: $text;
2845
&:disabled { color: $text-disabled; }
2847
&:selected {
2849
@extend %selected_items;
2850
border-radius: $corner-radius + 1px;
2852
}
2853
&.header {
2855
border-style: none none solid;
2856
border-color: $divider;
2857
border-radius: 0;
2858
}
2859
&.button { @extend %simple_flat_button; }
2861
&.highlight {
2863
color: $text-secondary;
2864
font-weight: 500;
2865
}
2866
&:indeterminate { color: $text-secondary-disabled; }
2868
}
2869
/***********
2872
* Dialogs *
2873
***********/
2874
messagedialog { // Message Dialog styling
2875
&.background { background-color: $surface; }
2876
.titlebar {
2878
min-height: $small-size;
2879
border-style: none;
2880
box-shadow: inset 0 1px highlight($surface);
2881
background-color: $surface;
2882
color: $text;
2883
&:backdrop { color: $text-secondary; }
2885
}
2886
&.csd { // rounded bottom border styling for csd version
2888
&.background {
2889
// bigger radius for better antialiasing
2890
border-bottom-left-radius: $corner-radius;
2891
border-bottom-right-radius: $corner-radius;
2892
}
2893
.dialog-action-area {
2895
margin-top: -$container-padding;
2896
padding: $container-padding;
2897
button {
2899
@extend %simple_flat_button;
2900
border-radius: $corner-radius;
2901
&:not(:last-child) { margin-right: $container-padding; }
2903
&.suggested-action:not(:disabled) { color: $suggested; }
2905
&.destructive-action:not(:disabled) { color: $destructive; }
2907
}
2908
}
2909
}
2910
}
2911
filechooser {
2913
.dialog-action-box { border-top: 1px solid $divider; }
2914
#pathbarbox {
2916
border-bottom: 1px solid $divider;
2917
background-color: $background;
2918
> stack > box > button { // The new folder button
2920
@extend %button_basic.flat;
2921
@extend %circular_button;
2922
}
2923
}
2924
}
2925
filechooserbutton:drop(active) {
2927
box-shadow: none;
2928
}
2929
/***********
2932
* Sidebar *
2933
***********/
2934
.sidebar {
2935
border-style: none;
2936
background-color: $base-alt;
2937
&:not(separator) {
2939
@at-root %sidebar_left,
2940
&:dir(ltr),
2941
&.left,
2942
&.left:dir(rtl) {
2943
border-right: 1px solid $divider;
2944
border-left-style: none;
2945
}
2946
@at-root %sidebar_right,
2948
&:dir(rtl),
2949
&.right {
2950
border-left: 1px solid $divider;
2951
border-right-style: none;
2952
}
2953
}
2954
list { background-color: transparent; }
2956
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2958
}
2959
stacksidebar {
2961
&.sidebar {
2962
&:dir(ltr),
2963
&.left,
2964
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2965
&:dir(rtl),
2967
&.right { list { @extend %sidebar_right; }}
2968
}
2969
row {
2971
padding: 10px 4px;
2972
> label {
2974
padding-left: 6px;
2975
padding-right: 6px;
2976
}
2977
&.needs-attention > label { @extend %needs-attention; }
2979
}
2980
}
2981
separator.sidebar {
2983
background-color: $divider;
2984
&.selection-mode,
2986
.selection-mode & {
2987
// background-color: $divider;
2988
}
2989
}
2990
/****************
2993
* File chooser *
2994
****************/
2995
// dim the sidebar icons, see bug #786613 for details on this oddity
2996
row {
2997
image.sidebar-icon { color: $text-secondary; }
2998
}
2999
placessidebar {
3001
> viewport.frame { border-style: none; }
3002
list { padding: (4px - 3px) 0 4px; }
3004
row {
3006
// Needs overriding of the GtkListBoxRow padding
3007
min-height: 32px;
3008
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3009
padding: 0;
3010
border-radius: $corner-radius;
3011
// Using margins/padding directly in the SidebarRow
3013
// will make the animation of the new bookmark row jump
3014
> revealer { padding: 0 8px; }
3015
&:selected { font-weight: 500; }
3017
&:disabled { color: $text-disabled; }
3019
image.sidebar-icon {
3021
&:dir(ltr) { padding-right: 8px; }
3022
&:dir(rtl) { padding-left: 8px; }
3023
}
3024
label.sidebar-label {
3026
&:dir(ltr) { padding-right: 2px; }
3027
&:dir(rtl) { padding-left: 2px; }
3028
}
3029
&:selected image.sidebar-icon,
3031
&:selected label.sidebar-label { color: inherit; }
3032
@at-root button.sidebar-button {
3034
@extend %simple_flat_button;
3035
@extend %small_button;
3036
}
3037
&.sidebar-placeholder-row {
3039
min-height: 2px;
3040
padding: 0 8px;
3041
background-image: image($primary);
3042
background-clip: content-box;
3043
}
3044
&.sidebar-new-bookmark-row { color: $primary; }
3046
&:drop(active):not(:disabled) {
3048
box-shadow: inset 0 0 0 2px $primary;
3049
}
3050
}
3051
}
3052
placesview {
3054
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3055
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3057
// this selects the "connect to server" label
3059
> actionbar > revealer > box > label {
3060
padding-left: 8px;
3061
padding-right: 8px;
3062
}
3063
}
3064
/*********
3067
* Paned *
3068
*********/
3069
paned {
3070
> separator {
3071
min-width: 1px;
3072
min-height: 1px;
3073
-gtk-icon-source: none; // defeats the ugly default handle decoration
3074
border-style: none; // just to be sure
3075
background-color: transparent;
3076
// workaround, using background istead of a border since the border will get rendered twice (?)
3077
background-image: image($divider);
3078
background-size: 1px 1px;
3079
background-clip: content-box; // avoids borders image being rendered twice (?)
3080
&.wide {
3082
min-width: 6px;
3083
min-height: 6px;
3084
background-color: $background;
3085
background-image: image($divider), image($divider);
3086
background-size: 1px 1px, 1px 1px;
3087
}
3088
}
3089
&.horizontal > separator {
3091
background-repeat: repeat-y;
3092
&:dir(ltr) {
3094
margin: 0 -8px 0 0;
3095
padding: 0 8px 0 0;
3096
background-position: left;
3097
}
3098
&:dir(rtl) {
3100
margin: 0 0 0 -8px;
3101
padding: 0 0 0 8px;
3102
background-position: right;
3103
}
3104
&.wide {
3106
margin: 0;
3107
padding: 0;
3108
background-repeat: repeat-y, repeat-y;
3109
background-position: left, right;
3110
}
3111
}
3112
&.vertical > separator {
3114
margin: 0 0 -8px 0;
3115
padding: 0 0 8px 0;
3116
background-repeat: repeat-x;
3117
background-position: top;
3118
&.wide {
3120
margin: 0;
3121
padding: 0;
3122
background-repeat: repeat-x, repeat-x;
3123
background-position: bottom, top;
3124
}
3125
}
3126
}
3127
/**************
3130
* GtkInfoBar *
3131
**************/
3132
infobar {
3133
border-style: none;
3134
&.info { background-color: $infobar-info; }
3136
&.question { background-color: $infobar-question; }
3138
&.warning { background-color: $infobar-warning; }
3140
&.error { background-color: $infobar-error; }
3142
&.info,
3144
&.question,
3145
&.warning,
3146
&.error {
3147
> label, & { color: on(dark); }
3148
button { @extend %button_selected; }
3150
selection {}
3152
*:link { color: on(dark); }
3154
}
3155
}
3156
/************
3159
* Tooltips *
3160
************/
3161
tooltip {
3162
&.background {
3163
// background-color needs to be set this way otherwise it gets drawn twice
3164
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3165
background-color: $tooltip;
3166
color: on($tooltip);
3167
}
3168
// padding: 4px; /* not working */
3170
border-radius: $corner-radius;
3171
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3172
&:not(.csd):not(.unity-csd) {
3174
// border: 1px solid $frame;
3175
// border-radius: $corner-radius + 1px;
3176
// background-clip: $background-clip-extra;
3177
}
3178
// FIXME: we need a border or tooltips vanish on black background.
3180
decoration { background-color: transparent; }
3181
> box {
3183
margin: -6px; // Remove hard-coded 6px padding
3184
min-height: 32px - 4px * 2;
3185
padding: 4px 8px;
3186
}
3187
* {
3189
// workaround for Eclipse.
3190
// do not include any declaration here.
3191
// padding: 0;
3192
// background-color: transparent;
3193
// color: inherit;
3194
}
3195
}
3196
/*****************
3199
* Color Chooser *
3200
*****************/
3201
colorswatch {
3202
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3203
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3204
// applied to the overlay box.
3205
// base color corners rounding
3207
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3208
// sports a bigger radius.
3209
// nth-child is needed by the custom color strip.
3210
&.top {
3212
border-top-left-radius: $corner-radius + 0.5px;
3213
border-top-right-radius: $corner-radius + 0.5px;
3214
overlay {
3216
border-top-left-radius: $corner-radius;
3217
border-top-right-radius: $corner-radius;
3218
}
3219
}
3220
&.bottom {
3222
border-bottom-left-radius: $corner-radius + 0.5px;
3223
border-bottom-right-radius: $corner-radius + 0.5px;
3224
overlay {
3226
border-bottom-left-radius: $corner-radius;
3227
border-bottom-right-radius: $corner-radius;
3228
}
3229
}
3230
&.left,
3232
&:first-child:not(.top) {
3233
border-top-left-radius: $corner-radius + 0.5px;
3234
border-bottom-left-radius: $corner-radius + 0.5px;
3235
overlay {
3237
border-top-left-radius: $corner-radius;
3238
border-bottom-left-radius: $corner-radius;
3239
}
3240
}
3241
&.right,
3243
&:last-child:not(.bottom) {
3244
border-top-right-radius: $corner-radius + 0.5px;
3245
border-bottom-right-radius: $corner-radius + 0.5px;
3246
overlay {
3248
border-top-right-radius: $corner-radius;
3249
border-bottom-right-radius: $corner-radius;
3250
}
3251
}
3252
&.dark { color: on(dark); }
3254
&.light { color: on(light); }
3256
&:drop(active) {
3258
box-shadow: none;
3259
&.light overlay { box-shadow: $shadow-1, 0 0 0 2px $primary; }
3261
&.dark overlay { box-shadow: $shadow-1, 0 0 0 2px $primary; }
3263
}
3264
overlay {
3266
transition: $transition-shadow;
3267
box-shadow: $shadow-1;
3268
&:hover { box-shadow: $shadow-2; }
3270
}
3271
&#add-color-button {
3273
border-radius: $corner-radius $corner-radius 0 0;
3274
color: on(dark);
3275
&:only-child { border-radius: $corner-radius; }
3277
overlay {
3279
background-image: linear-gradient(to right,
3280
$red 25%,
3281
$yellow 25%, $yellow 50%,
3282
$green 50%, $green 75%,
3283
$blue 75%);
3284
}
3285
}
3286
&:disabled {
3288
opacity: 0.5;
3289
overlay { box-shadow: none; }
3291
}
3292
row:selected & {
3294
}
3295
&#editor-color-sample {
3297
border-radius: $corner-radius + 0.5px;
3298
overlay { border-radius: $corner-radius; }
3300
// overlay:hover { box-shadow: $shadow-1; }
3302
}
3303
}
3304
// colorscale popup
3306
colorchooser .popover.osd {
3307
transition: $transition-shadow;
3308
border-radius: $corner-radius;
3309
box-shadow: $shadow-2, inset 0 1px highlight($surface);
3310
background-color: $surface;
3311
&:backdrop { box-shadow: $shadow-1, inset 0 1px highlight($surface); }
3313
}
3314
/********
3317
* Misc *
3318
********/
3319
// content view (grid/list)
3320
.content-view {
3321
background-color: $background;
3322
// &:hover { -gtk-icon-effect: highlight; }
3324
rubberband, .rubberband { @extend rubberband; }
3326
}
3327
.scale-popup {
3329
// .osd & { @extend %osd; }
3330
.osd & button.flat { // FIXME: quick hack, redo properly
3332
}
3333
button { // +/- buttons on GtkVolumeButton popup
3335
}
3336
}
3337
/**********************
3340
* Window Decorations *
3341
**********************/
3342
decoration {
3343
transition: $transition-shadow;
3344
border-radius: $corner-radius $corner-radius 0 0;
3345
box-shadow: $shadow-4, 0 16px 16px transparent;
3346
// FIXME rationalize shadows
3348
// this is used for the resize cursor area
3350
margin: 8px;
3351
&:backdrop {
3353
// the transparent shadow here is to enforce that the shadow extents don't
3354
// change when we go to backdrop, to prevent jumping windows.
3355
// The biggest shadow should be in the same order then in the active state
3356
// or the jumping will happen during the transition.
3357
box-shadow: $shadow-2, 0 16px 16px transparent;
3358
}
3359
.maximized &,
3361
.fullscreen &,
3362
.tiled &,
3363
.tiled-top &,
3364
.tiled-right &,
3365
.tiled-bottom &,
3366
.tiled-left & { border-radius: 0; }
3367
.popup & { box-shadow: none; }
3369
// server-side decorations as used by mutter
3371
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3372
.csd.popup & {
3374
border-radius: $corner-radius;
3375
box-shadow: $shadow-2;
3376
}
3377
tooltip.csd & {
3379
border-radius: $corner-radius;
3380
box-shadow: none;
3381
}
3382
messagedialog.csd & {
3384
border-radius: $corner-radius;
3385
// box-shadow: $shadow-4, 0 16px 16px transparent;
3386
// &:backdrop { box-shadow: $shadow-2, 0 16px 16px transparent; }
3388
}
3389
.solid-csd & {
3391
margin: 0;
3392
// padding: 4px;
3393
border-radius: 0;
3394
box-shadow: none;
3395
// box-shadow: inset 0 0 0 4px $titlebar;
3396
background-color: $titlebar;
3397
}
3398
}
3399
// Window Close button
3401
button.titlebutton {
3402
// @extend %simple_flat_button;
3403
@extend %circular_button;
3405
.selection-mode & {
3407
}
3408
}
3409
// catch all extend :)
3412
%selected_items {
3414
background-color: $overlay-selected;
3415
}
3416
.monospace { font-family: monospace; }
3418
/**********************
3421
* Touch Copy & Paste *
3422
**********************/
3423
// touch selection handlebars for the Popover.osd above
3424
cursor-handle {
3425
color: $primary;
3426
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
3427
&.top:dir(ltr), &.bottom:dir(rtl) {
3429
-gtk-icon-transform: rotate(90deg);
3430
}
3431
&.bottom:dir(ltr), &.top:dir(rtl) {
3433
-gtk-icon-transform: unset;
3434
}
3435
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3437
padding-top: 6px;
3438
-gtk-icon-transform: rotate(45deg);
3439
}
3440
}
3441
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3443
// shortcut window keys
3445
.keycap {
3446
min-width: 28px - 8px * 2;
3447
min-height: 28px - 2px;
3448
margin-top: 2px;
3449
padding-bottom: 2px;
3450
padding-left: 8px;
3451
padding-right: 8px;
3452
border: solid 1px $frame;
3454
border-radius: $corner-radius + 1px;
3455
box-shadow: inset 0 -2px $frame;
3456
background-color: $surface;
3457
color: $text;
3458
font-size: smaller;
3459
}
3460
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3462
transition: $transition;
3463
box-shadow: $shadow-1, inset 0 0 0 2px $primary;
3464
caret-color: $primary;
3465
}
3466
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3468
stackswitcher button.circular,
3470
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3471
min-width: $medium-size;
3472
min-height: $medium-size;
3473
padding: 0;
3474
}
3475
/*************
3478
* App Icons *
3479
*************/
3480
// Outline for low res icons
3481
.lowres-icon {
3482
// -gtk-icon-shadow: none;
3483
}
3484
// Drapshadow for large icons
3486
.icon-dropshadow {
3487
// -gtk-icon-shadow: none;
3488
}
3489
/*********
3492
* Emoji *
3493
*********/
3494
popover.emoji-picker {
3495
padding: 0;
3496
entry {
3498
border-bottom: 1px solid $divider;
3499
border-image: none;
3500
border-radius: 0;
3501
box-shadow: none;
3502
background-color: transparent;
3503
}
3504
scrolledwindow { border-bottom: 1px solid $divider; }
3506
}
3507
// mimic tab style
3509
button.emoji-section {
3510
margin-top: -1px;
3511
padding: 0 8px;
3512
min-width: 24px;
3513
min-height: $medium-size;
3514
border-radius: 0;
3515
outline-offset: -6px;
3516
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3518
&:checked {
3520
box-shadow: inset 0 2px $primary;
3521
background-color: transparent;
3522
}
3523
&:hover, &:active { background-color: $overlay-hover; }
3525
&:first-child { margin-left: 4px; }
3527
&:last-child { margin-right: 4px; }
3529
}
3530
popover.emoji-picker .emoji {
3532
min-width: 3em;
3533
min-height: 3em;
3534
padding: 0 8px;
3535
// font-size: larger;
3536
widget {
3538
transition: $transition;
3539
border-radius: $corner-radius;
3540
&:hover { background-color: $overlay-hover; }
3542
}
3543
}
3544
popover.emoji-completion {
3546
padding: 8px 0;
3547
arrow {
3549
border: none;
3550
background: none;
3551
}
3552
.emoji-completion-row {
3554
min-height: $menuitem-size;
3555
padding: 0 12px;
3556
}
3557
.emoji:hover {
3559
background-color: $overlay-hover;
3560
}
3561
}
3562