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
&:drop(active) { @include entry(hover); }
222
&:disabled { @include entry(disabled); }
224
&.flat {
226
min-height: 0;
227
padding: 2px;
228
border-radius: 0;
229
background-color: transparent;
230
}
231
image { // icons inside the entry
233
// @extend %simple_flat_button;
234
// min-height: $small-size;
236
// min-width: $small-size;
237
// border-radius: $circular-radius;
238
// -gtk-outline-radius: $circular-radius;
239
color: $text-secondary;
240
&:hover, &:active { color: $text; }
242
&:disabled { color: $text-disabled; }
244
&.left {
246
margin-left: ($medium-size - 16px) / 2 - 8px;
247
margin-right: 6px;
248
}
249
&.right {
251
margin-left: 6px;
252
margin-right: ($medium-size - 16px) / 2 - 8px;
253
}
254
}
255
undershoot {
257
&.left { @include undershoot(left); }
258
&.right { @include undershoot(right); }
260
}
261
selection { @extend %selected_items; }
263
// entry error and warning style
265
@each $e_type, $e_color in (error, $error),
266
(warning, $warning) {
267
&.#{$e_type} {
268
@include entry(normal, $e_color);
269
&:focus { @include entry(checked, $e_color); }
271
&:disabled { @include entry(disabled, $e_color); }
273
}
274
}
275
.osd & {
277
}
278
}
279
progress {
281
margin: 2px -8px;
282
border-bottom: 2px solid $primary;
283
background-color: transparent;
284
}
285
// linked entries
287
.linked:not(.vertical) > & { @extend %linked_entry; }
288
// Vertically linked entries
290
.linked.vertical > & { @extend %linked_vertical_entry; }
291
}
292
%entry_raised {
294
border-radius: $corner-radius;
295
@include entry(raised-normal);
297
&:focus { @include entry(raised-focus); }
299
&:drop(active) { @include entry(raised-hover); }
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
&:drop(active) { @extend button:hover; }
417
@at-root %flat_button, &.flat {
419
@at-root %simple_flat_button, & {
420
@include button(flat-normal);
421
&:focus { @include button(flat-focus); }
423
&:hover { @include button(flat-hover); }
425
&:active { @include button(flat-active); }
427
&:disabled { @include button(flat-disabled); }
429
}
430
&:checked { @include button(flat-checked); }
432
&:checked:disabled { @include button(flat-checked-disabled); }
434
}
435
&.text-button {
437
padding-left: 16px;
438
padding-right: 16px;
439
}
440
&.image-button {
442
min-width: 24px;
443
padding: ($medium-size - 24px) / 2;
444
@extend %circular_button;
446
}
447
&.text-button.image-button {
449
border-radius: $corner-radius;
450
-gtk-outline-radius: $corner-radius;
451
label {
453
&:first-child { margin-left: 16px - ($medium-size - 24px) / 2; }
454
&:last-child { margin-right: 16px - ($medium-size - 24px) / 2; }
456
}
457
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
459
}
460
.linked > & { @extend %linked; }
462
.linked.vertical > & { @extend %linked_vertical; }
464
.linked > &.flat,
466
.linked.vertical > &.flat {
467
border-radius: $corner-radius;
468
&.image-button { @extend %circular_button; }
470
&.text-button.image-button {
472
border-radius: $corner-radius;
473
-gtk-outline-radius: $corner-radius;
474
}
475
}
476
}
477
@at-root %button_selected {
479
&.flat {
480
color: on(dark, secondary);
481
&:focus, &:hover, &:active, &:checked { color: on(dark); }
483
&:disabled { color: on(dark, secondary-disabled); }
485
&:checked:disabled { color: on(dark, disabled); }
487
}
488
}
489
// big standalone buttons like in Documents pager
491
&.osd {
492
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
493
&.image-button { padding: ($large-size - 24px) / 2; }
495
&:disabled { opacity: 0; }
497
}
498
// overlay / OSD style
500
@at-root %osd_button,
501
.osd & {
502
}
503
// Suggested and Destructive Action buttons
505
@each $b_type, $b_color in (suggested-action, $suggested),
506
(destructive-action, $destructive) {
507
&.#{$b_type} {
508
background-color: $b_color;
509
color: on($b_color);
510
&:disabled { @include button(disabled); }
512
&:checked { background-color: mix(on($b_color), $b_color, percentage(0.3)); }
514
&.flat {
516
background-color: transparent;
517
color: $b_color;
518
&:disabled { @include button(flat-disabled); }
520
&:checked { background-color: rgba($b_color, 0.3); }
522
}
523
.osd & {
525
}
526
}
527
}
528
.stack-switcher > & {
530
// to position the needs attention dot, padding is added to the button
531
// child, a label needs just lateral padding while an icon needs vertical
532
// padding added too.
533
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
535
> label {
537
padding-left: 6px; // label padding
538
padding-right: 6px; //
539
}
540
> image {
542
padding-left: 6px; // image padding
543
padding-right: 6px; //
544
padding-top: 3px; //
545
padding-bottom: 3px; //
546
}
547
&.text-button {
549
// compensate text-button paddings
550
padding-left: 16px - 6px;
551
padding-right: 16px - 6px;
552
}
553
&.image-button {
555
// we want image buttons to have a 1:1 aspect ratio, so compensation
556
// of the padding added to the GtkImage is needed
557
padding-left: ($medium-size - 16px) / 2 - 6px;
558
padding-right: ($medium-size - 16px) / 2 - 6px;
559
}
560
&.needs-attention {
562
> label,
563
> image { @extend %needs-attention; }
564
&:checked {
566
> label,
567
> image {
568
animation: none;
569
background-image: none;
570
}
571
}
572
}
573
}
574
// hide separators
576
&.font,
577
&.file { separator { @extend %hide_separators; }}
578
// &.font { > box > box > label { font-weight: bold; }}
580
// inline-toolbar buttons
582
.inline-toolbar & {
583
// @extend %button_basic.flat;
584
&:not(.text-button) { @extend %circular_button; }
586
}
587
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
589
@at-root %circular_button,
591
&.close,
592
&.circular { // The Bloody Circul Button
593
border-radius: $circular-radius;
594
-gtk-outline-radius: $circular-radius;
595
// label { padding: 0; }
597
}
598
@at-root %small_button {
600
min-height: $small-size;
601
min-width: $small-size;
602
padding: 0;
603
border-radius: $circular-radius;
604
-gtk-outline-radius: $circular-radius;
605
}
606
}
607
%needs-attention {
609
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
610
background-repeat: no-repeat;
611
background-position: right 3px;
612
background-size: 6px 6px;
613
&:dir(rtl) { background-position: left 3px; }
615
}
616
// all the following is for the +|- buttons on inline toolbars, that way
618
// should really be deprecated...
619
.inline-toolbar toolbutton > button { // redefining the button look is
620
// needed since those are flat...
621
}
622
// More inline toolbar buttons
624
toolbar.inline-toolbar toolbutton {
625
// > button.flat { @extend %linked_middle; }
626
// &:first-child > button.flat { @extend %linked:first-child; }
628
// &:last-child > button.flat { @extend %linked:last-child; }
630
// &:only-child > button.flat { @extend %linked:only-child; }
632
}
633
%linked_middle {
635
border-radius: 0;
636
-gtk-outline-radius: $corner-radius;
637
}
638
%linked {
640
@extend %linked_middle;
641
&:first-child {
643
border-top-left-radius: $corner-radius;
644
border-bottom-left-radius: $corner-radius;
645
}
646
&:last-child {
648
border-top-right-radius: $corner-radius;
649
border-bottom-right-radius: $corner-radius;
650
}
651
&:only-child {
653
border-radius: $corner-radius;
654
}
655
}
656
%linked_vertical_middle {
658
border-radius: 0;
659
-gtk-outline-radius: $corner-radius;
660
}
661
%linked_vertical {
663
@extend %linked_vertical_middle;
664
&:first-child {
666
border-top-left-radius: $corner-radius;
667
border-top-right-radius: $corner-radius;
668
}
669
&:last-child {
671
border-bottom-left-radius: $corner-radius;
672
border-bottom-right-radius: $corner-radius;
673
}
674
&:only-child {
676
border-radius: $corner-radius;
677
}
678
}
679
%linked_entry {
681
@extend %linked_middle;
682
&:first-child {
684
border-radius: $corner-radius 0 0 0;
685
}
686
&:last-child {
688
border-radius: 0 $corner-radius 0 0;
689
}
690
&:only-child {
692
border-radius: $corner-radius $corner-radius 0 0;
693
}
694
}
695
%linked_vertical_entry {
697
@extend %linked_vertical_middle;
698
&:first-child {
700
border-radius: $corner-radius $corner-radius 0 0;
701
}
702
&:last-child {
704
border-radius: 0;
705
}
706
&:only-child {
708
border-radius: $corner-radius $corner-radius 0 0;
709
}
710
}
711
/* menu buttons */
713
modelbutton.flat,
714
.menuitem.button.flat {
715
min-height: $menuitem-size;
716
padding: 0 8px;
717
border-radius: $corner-radius;
718
color: inherit;
719
@extend %simple_flat_button;
721
&:selected { @extend %selected_items; }
723
}
724
modelbutton.flat arrow {
726
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
727
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
729
}
730
button.color {
732
min-height: $small-size;
733
min-width: $small-size;
734
padding: $container-padding;
735
colorswatch:only-child {
737
// &, overlay { border-radius: 0; }
738
}
739
}
740
/*********
743
* Links *
744
*********/
745
*:link {
746
color: $link;
747
&:visited { color: $link-visited; }
749
}
750
button:link,
752
button:visited {
753
&, &:focus, &:hover, &:active { @extend *:link; }
754
> label { text-decoration-line: underline; }
756
}
757
/*****************
759
* GtkSpinButton *
760
*****************/
761
spinbutton {
762
&:not(.vertical) {
763
// in this horizontal configuration, the whole spinbutton
764
// behaves as the entry, so we extend the entry styling
765
// and nuke the style on the internal entry
766
@extend %entry;
767
padding: 0;
769
entry {
771
min-width: $large-size - 8px * 2;
772
// reset all the other props since the spinbutton node is styled here
773
margin: 0;
774
border-image: none;
775
border-radius: 0;
776
box-shadow: none;
777
background-color: transparent;
778
}
779
button {
781
// margin: $container-padding;
782
border: solid $container-padding transparent;
783
@extend %simple_flat_button;
785
@extend %small_button;
787
// Remove unwanted focus indicator
789
&:focus:not(:hover):not(:active) {
790
box-shadow: inset 0 0 0 9999px transparent;
791
color: $text-secondary;
792
}
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
entry {
817
@extend %entry_raised;
818
min-height: $medium-size;
820
min-width: $large-size;
821
padding: 0;
822
}
823
button {
825
min-height: $medium-size;
826
min-width: $large-size;
827
padding: 0;
828
@extend %simple_flat_button;
830
// Remove unwanted focus indicator
832
&:focus:not(:hover):not(:active) {
833
box-shadow: inset 0 0 0 9999px transparent;
834
color: $text-secondary;
835
}
836
&.up { border-radius: $corner-radius $corner-radius 0 0; }
838
&.down { border-radius: 0 0 $corner-radius $corner-radius; }
840
}
841
}
842
// OSD vertical
844
.osd &.vertical {
845
}
846
// Misc
848
treeview &:not(.vertical) {
849
min-height: 0;
850
border-style: none;
851
border-radius: 0;
852
entry {
854
min-height: 0;
855
padding: 1px 2px;
856
}
857
}
858
}
859
/**************
862
* ComboBoxes *
863
**************/
864
combobox {
865
arrow {
866
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
867
min-height: 16px;
868
min-width: 16px;
869
}
870
decoration,
872
button.combo:checked { transition: none; } // workaround for menuitem selection
873
button.combo cellview {
875
&:dir(ltr) { margin-left: 8px - ($medium-size - 16px) / 2; }
876
&:dir(rtl) { margin-right: 8px - ($medium-size - 16px) / 2; }
877
}
878
#gtk-combobox-popup-menu {
880
padding: 2px 0;
881
menuitem {
883
min-height: $medium-size - 2px * 2;
884
padding: 0 8px;
885
}
886
// overflow arrows
888
> arrow {
889
&.top { margin-top: -2px; }
890
&.bottom {
892
margin-top: 2px * 2;
893
margin-bottom: -2px * 3;
894
}
895
}
896
}
897
&.linked {
899
button:nth-child(2) {
900
&:dir(ltr) { @extend %linked_entry:last-child; }
901
&:dir(rtl) { @extend %linked_entry:first-child; }
902
}
903
}
904
> .linked > button {
906
@extend %linked_middle;
907
&:first-child { @extend %linked_entry:first-child; }
909
&:last-child { @extend %linked_entry:last-child; }
911
&:only-child { @extend %linked_entry:only-child; }
913
}
914
}
915
// the combo is a composite widget so the way we do button linking doesn't
917
// work, special case needed. See
918
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
919
.linked:not(.vertical) > combobox {
921
> box > button.combo { @extend %linked_middle; }
922
&:first-child > box > button.combo { @extend %linked_entry:first-child; }
924
&:last-child > box > button.combo { @extend %linked_entry:last-child; }
926
&:only-child > box > button.combo { @extend %linked_entry:only-child; }
928
}
929
.linked.vertical > combobox {
931
> box > button.combo { @extend %linked_vertical_middle; }
932
&:first-child > box > button.combo { @extend %linked_vertical_entry:first-child; }
934
&:last-child > box > button.combo { @extend %linked_vertical_entry:last-child; }
936
&:only-child > box > button.combo { @extend %linked_vertical_entry:only-child; }
938
}
939
button.combo {
941
border-radius: $corner-radius $corner-radius 0 0;
942
background-image: none;
943
font-weight: inherit;
944
@include entry(normal);
946
&:focus { @include entry(focus); }
948
&:hover { @include entry(hover); }
950
&:checked { @include entry(checked); }
952
&:disabled { @include entry(disabled); }
954
}
955
/************
958
* Toolbars *
959
************/
960
toolbar {
961
-GtkWidget-window-dragging: true;
962
padding: 2px;
963
background-color: $background;
964
button { @extend %button_basic.flat; }
966
// on OSD
968
.osd & { background-color: transparent; }
969
// stand-alone OSD toolbars
971
&.osd {
972
transition: $transition-shadow;
973
padding: $container-padding;
974
border-radius: $corner-radius;
975
box-shadow: $shadow-2, inset 0 1px highlight($surface);
976
background-color: $surface;
977
&:backdrop { box-shadow: $shadow-1, inset 0 1px highlight($surface); }
979
&.left,
981
&.right,
982
&.top,
983
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
984
}
985
// toolbar separators
987
&.horizontal > separator { margin: 2px; }
988
&.vertical > separator { margin: 2px; }
989
&:not(.inline-toolbar):not(.osd) {
991
scale,
992
entry,
993
spinbutton,
994
button { margin: 2px; }
995
.linked entry,
997
.linked spinbutton,
998
.linked button {
999
&:not(:first-child) { margin-left: 0; }
1000
&:not(:last-child) { margin-right: 0; }
1001
}
1002
spinbutton {
1004
entry,
1005
button { margin: 0; }
1006
}
1007
switch { margin: 2px + $container-padding 2px; }
1009
}
1010
}
1011
// searchbar, location-bar & inline-toolbar
1013
.inline-toolbar {
1014
padding: $container-padding;
1015
border-style: solid;
1016
border-width: 0 1px 1px;
1017
border-color: $frame;
1018
background-color: $base-alt;
1019
}
1020
searchbar > revealer > box,
1022
.location-bar {
1023
padding: $container-padding;
1024
border-style: solid;
1025
border-width: 0 0 1px;
1026
border-color: $divider;
1027
background-color: $background;
1028
background-clip: border-box;
1029
}
1030
searchbar > revealer > box {
1032
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1033
margin: -6px;
1034
padding: $container-padding;
1035
}
1036
/***************
1039
* Header bars *
1040
***************/
1041
%titlebar,
1042
headerbar {
1043
transition: background-color $duration $ease-out, color $duration $ease-out;
1044
min-height: $large-size;
1045
padding: 0 $container-padding;
1046
box-shadow: $shadow-1, inset 0 1px highlight($titlebar);
1047
background-color: $titlebar;
1048
color: $titlebar-text;
1049
&:disabled { color: $titlebar-text-disabled; }
1051
&:backdrop {
1053
color: $titlebar-text-secondary;
1054
&:disabled { color: $titlebar-text-secondary-disabled; }
1056
}
1057
.title {
1059
padding: 0 12px;
1060
font-weight: bold;
1061
}
1062
.subtitle {
1064
padding: 0 12px;
1065
font-size: smaller;
1066
@extend .dim-label;
1068
}
1069
entry {
1071
box-shadow: inset 0 -1px $titlebar-track;
1072
background-color: $titlebar-fill;
1073
color: $titlebar-text;
1074
&:disabled {
1076
box-shadow: inset 0 -1px $titlebar-track-disabled;
1077
background-color: $titlebar-fill;
1078
color: $titlebar-text-disabled;
1079
}
1080
image {
1082
color: $titlebar-text-secondary;
1083
&:hover, &:active { color: $titlebar-text; }
1085
&:disabled { color: $titlebar-text-disabled; }
1087
}
1088
}
1089
.linked:not(.vertical) > entry:not(.flat) { border-radius: $corner-radius $corner-radius 0 0; }
1091
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1093
@extend %button_basic.flat;
1094
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1096
$titlebar-indicator 0%,
1097
transparent 0%)
1098
0 0 0 / 0 0 0px;
1099
color: $titlebar-text-secondary;
1100
&:focus, &:hover, &:active { color: $titlebar-text; }
1102
&:disabled { color: $titlebar-text-secondary-disabled; }
1104
&:checked {
1106
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1107
$titlebar-indicator 100%,
1108
transparent 0%)
1109
0 0 2 / 0 0 2px;
1110
color: $titlebar-text;
1111
&:disabled { color: $titlebar-text-disabled; }
1113
&, &:disabled { background-color: transparent; }
1115
}
1116
&:backdrop {
1118
color: $titlebar-text-disabled;
1119
&:focus, &:hover, &:active { color: $titlebar-text-secondary; }
1121
&:disabled { color: $titlebar-text-secondary-disabled; }
1123
&:checked {
1125
color: $titlebar-text-secondary;
1126
&:disabled { color: $titlebar-text-secondary-disabled; }
1128
}
1129
}
1130
}
1131
button.suggested-action, button.destructive-action {
1133
&:disabled {
1134
background-color: $titlebar-fill;
1135
color: $titlebar-text-disabled;
1136
}
1137
}
1138
&.selection-mode {
1140
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1141
// but let's keep it for backwards compatibility.
1142
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1143
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1144
box-shadow: $shadow-1, inset 0 1px highlight($primary);
1145
background-color: $primary;
1146
color: on($primary);
1147
&:backdrop {
1149
color: on($primary, secondary);
1150
}
1151
.subtitle:link { color: on($primary); }
1153
button:not(.suggested-action):not(.destructive-action) {
1155
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1156
currentColor 0%,
1157
transparent 0%)
1158
0 0 0 / 0 0 0px;
1159
color: on($primary);
1160
&:disabled { color: on($primary, disabled); }
1162
&:checked {
1164
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1165
currentColor 100%,
1166
transparent 0%)
1167
0 0 2 / 0 0 2px;
1168
color: on($primary);
1169
&:disabled { color: on($primary, disabled); }
1171
}
1172
&:backdrop {
1174
color: on($primary, secondary);
1175
&:disabled { color: on($primary, secondary-disabled); }
1177
&:checked {
1179
color: on($primary, secondary);
1180
&:disabled { color: on($primary, secondary-disabled); }
1182
}
1183
}
1184
}
1185
.selection-menu {
1187
padding-left: 16px;
1188
padding-right: 16px;
1189
arrow { -GtkArrow-arrow-scaling: 1; }
1191
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1193
}
1194
}
1195
// squared corners when the window is maximized, tiled, or fullscreen
1197
.tiled &,
1198
.tiled-top &,
1199
.tiled-right &,
1200
.tiled-bottom &,
1201
.tiled-left &,
1202
.maximized &,
1203
.fullscreen & {
1204
border-radius: 0;
1205
box-shadow: $shadow-1;
1206
}
1207
&.default-decoration {
1209
min-height: $small-size;
1210
padding: $container-padding;
1211
box-shadow: inset 0 1px highlight($titlebar);
1212
.tiled &,
1214
.maximized &,
1215
.fullscreen & { box-shadow: none; }
1216
button.titlebutton {
1218
min-height: $small-size;
1219
min-width: $small-size;
1220
margin: 0;
1221
padding: 0;
1222
}
1223
// workaround for non-animatable buttons
1225
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1226
}
1227
.solid-csd & {
1229
&:dir(rtl), &:dir(ltr) { // specificity bump
1230
// margin-left: -2px;
1231
// margin-right: -2px;
1232
// margin-top: -2px;
1233
// border-radius: 0;
1234
box-shadow: $shadow-1; // Remove highlight as window managers should have it
1235
}
1236
}
1237
}
1238
headerbar {
1240
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1241
entry,
1242
spinbutton,
1243
button {
1244
margin-top: $container-padding;
1245
margin-bottom: $container-padding;
1246
}
1247
separator.titlebutton {
1249
margin-top: $large-size / 4;
1250
margin-bottom: $large-size / 4;
1251
background-color: $titlebar-divider;
1252
}
1253
switch {
1255
margin-top: ($large-size - 24px) / 2;
1256
margin-bottom: ($large-size - 24px) / 2;
1257
}
1258
// reset button margins of the spinbutton
1260
spinbutton button {
1261
margin-top: 0;
1262
margin-bottom: 0;
1263
}
1264
// FIXME: This is a hacky workaround.
1266
.entry-tag {
1267
margin-top: 5px;
1268
margin-bottom: 5px;
1269
}
1270
&.titlebar headerbar:not(.titlebar) {
1272
// Drop the background of non-titlebar nested headerbars. This is needed to
1273
// work around headerbar sliding animation issues without refactoring
1274
// Adwaita's support of titlebars and headerbars as it may break
1275
// applications.
1276
// See https://gitlab.gnome.org/GNOME/gtk/issues/1264 for more information.
1277
background-color: transparent;
1278
box-shadow: none;
1279
}
1280
}
1281
.background .titlebar {
1283
border-top-left-radius: $corner-radius;
1284
border-top-right-radius: $corner-radius;
1285
}
1286
.background.tiled .titlebar,
1288
.background.tiled-top .titlebar,
1289
.background.tiled-right .titlebar,
1290
.background.tiled-bottom .titlebar,
1291
.background.tiled-left .titlebar,
1292
.background.maximized .titlebar,
1293
.background.solid-csd .titlebar {
1294
border-top-left-radius: 0;
1295
border-top-right-radius: 0;
1296
}
1297
headerbar { // headerbar border rounding
1299
window separator:first-child + &, // tackles the paned container case
1300
window &:first-child { border-top-left-radius: $corner-radius; }
1301
window &:last-child { border-top-right-radius: $corner-radius; }
1303
window stack & { // tackles the stacked headerbars case
1305
&:first-child, &:last-child {
1306
border-top-left-radius: $corner-radius;
1307
border-top-right-radius: $corner-radius;
1308
}
1309
}
1310
window.tiled &,
1312
window.tiled-top &,
1313
window.tiled-right &,
1314
window.tiled-bottom &,
1315
window.tiled-left &,
1316
window.maximized &,
1317
window.fullscreen &,
1318
window.solid-csd & {
1319
&,
1320
&:first-child,
1321
&:last-child,
1322
&:only-child {
1323
border-top-left-radius: 0;
1324
border-top-right-radius: 0;
1325
}
1326
}
1327
}
1328
.titlebar:not(headerbar) {
1330
window.csd > & {
1331
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1332
padding: 0;
1333
background-color: transparent;
1334
background-image: none;
1335
border-style: none;
1336
box-shadow: none;
1337
}
1338
> separator {
1340
background-color: $titlebar;
1341
background-image: image($divider);
1342
}
1343
@extend %titlebar;
1345
}
1346
// Development versions of apps to use a differently styled headerbar
1348
window.devel headerbar.titlebar:not(.selection-mode) {
1349
}
1350
/************
1353
* Pathbars *
1354
************/
1355
%pathbar_button,
1356
.path-bar button {
1357
padding-left: ($medium-size - 24px) / 2;
1358
padding-right: ($medium-size - 24px) / 2;
1359
label:not(:only-child) {
1361
&:first-child { margin-left: 4px; }
1362
&:last-child { margin-right: 4px; }
1364
}
1365
&.slider-button {
1367
padding-left: (24px - 16px) / 2;
1368
padding-right: (24px - 16px) / 2;
1369
}
1370
:not(headerbar) & {
1372
@extend %flat_button;
1373
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1375
$primary 0%,
1376
transparent 0%)
1377
0 0 0 / 0 0 0px;
1378
border-radius: $corner-radius;
1379
&:checked {
1381
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1382
$primary 100%,
1383
transparent 0%)
1384
0 0 2 / 0 0 2px;
1385
&, &:disabled { background-color: transparent; }
1387
}
1388
}
1389
}
1390
/**************
1393
* Tree Views *
1394
**************/
1395
treeview.view {
1396
@at-root * {
1397
-GtkTreeView-horizontal-separator: 4;
1398
-GtkTreeView-grid-line-width: 1;
1399
-GtkTreeView-grid-line-pattern: '';
1400
-GtkTreeView-tree-line-width: 1;
1401
-GtkTreeView-tree-line-pattern: '';
1402
-GtkTreeView-expander-size: 16;
1403
}
1404
border-left-color: $track; // this is actually the tree lines color,
1406
border-top-color: $divider; // while this is the grid lines color, better then nothing
1407
// FIXME: Avoid transparency background-color being slightly darker
1409
&:selected {
1410
background-color: $base;
1411
background-image: image($overlay-selected);
1412
}
1413
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1415
&:hover, &:selected { border-radius: 0; }
1417
&.separator {
1419
min-height: 1px + 2px * 2;
1420
color: $divider;
1421
}
1422
// FIXME: box-shadow, background-color and background-image are not available here.
1424
&:drop(active) {
1425
border-style: solid none;
1426
border-width: 9999px;
1427
border-color: $overlay-hover;
1428
&.after { border-top-style: none; }
1430
&.before { border-bottom-style: none; }
1432
}
1433
&.expander {
1435
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1436
-gtk-icon-transform: rotate(-90deg);
1437
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1439
&:checked { -gtk-icon-transform: unset; }
1441
color: $text-secondary;
1443
&:hover, &:active { color: $text; }
1445
&:disabled { color: $text-secondary-disabled; }
1447
}
1448
&.progressbar { // progress bar in treeviews
1450
border-bottom: $bar-size solid $primary;
1451
box-shadow: none;
1452
background-color: transparent;
1453
background-image: none;
1454
&:selected:hover { box-shadow: none; }
1456
}
1457
&.trough { // progress bar trough in treeviews
1459
border-bottom: $bar-size solid $track-disabled;
1460
box-shadow: none;
1461
background-color: transparent;
1462
background-image: none;
1463
&:selected:hover { box-shadow: none; }
1465
}
1466
header {
1468
button {
1469
@extend row.activatable;
1470
padding: 2px 6px;
1472
border-style: none solid solid none;
1473
border-width: 1px;
1474
border-color: $divider;
1475
border-radius: 0;
1476
background-clip: border-box;
1477
&:not(:focus):not(:hover):not(:active) { color: $text-secondary; }
1479
&, &:hover, &:active { box-shadow: none; }
1481
&, &:disabled { background-color: $base; }
1483
&:last-child { border-right-style: none; }
1485
}
1486
}
1487
button.dnd,
1489
header.button.dnd { // for treeview-like derive widgets
1490
padding: 2px 6px;
1491
border-style: none solid solid;
1492
border-width: 1px;
1493
border-color: $divider;
1494
border-radius: 0;
1495
box-shadow: none;
1496
background-color: $base;
1497
background-clip: border-box;
1498
color: $primary;
1499
}
1500
acceleditor > label { background-color: $primary; } // see tests/testaccel to test
1502
}
1503
/*********
1506
* Menus *
1507
*********/
1508
menubar,
1509
.menubar {
1510
-GtkWidget-window-dragging: true;
1511
padding: 0;
1512
// box-shadow: inset 0 -1px $divider;
1513
background-color: $titlebar;
1514
color: $titlebar-text;
1515
> menuitem {
1517
transition: $transition;
1518
min-height: 20px;
1519
padding: 4px 8px;
1520
color: $titlebar-text-secondary;
1521
&:hover { // Seems like it :hover even with keyboard focus
1523
transition: none;
1524
background-color: $overlay-checked;
1525
color: $titlebar-text;
1526
}
1527
&:disabled { color: $titlebar-text-secondary-disabled; }
1529
label:disabled { color: inherit; } // to inherit the above color
1531
}
1532
}
1533
// Needed to make the border-radius of menus work
1535
// otherwise the background bleeds out of the menu edges
1536
.background.popup { background-color: transparent; }
1537
menu,
1539
.menu,
1540
.context-menu {
1541
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1542
padding: 4px 0;
1543
box-shadow: inset 0 1px highlight($surface);
1544
background-color: $surface;
1545
border: 1px solid $frame; // adds borders in a non composited env
1546
.csd & {
1548
border: none; // axes borders in a composited env
1549
border-radius: $corner-radius;
1550
}
1551
menuitem {
1553
transition: background-color $duration $ease-out;
1554
min-height: 20px;
1555
min-width: 40px;
1556
padding: 4px 8px;
1557
font: initial;
1558
text-shadow: none;
1559
&:hover {
1561
transition: none;
1562
background-color: $overlay-hover;
1563
}
1564
&:disabled { color: $text-disabled; }
1566
// submenu indicators
1568
arrow {
1569
min-height: 16px;
1570
min-width: 16px;
1571
&:dir(ltr) {
1573
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1574
margin-left: 8px;
1575
}
1576
&:dir(rtl) {
1578
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1579
margin-right: 8px;
1580
}
1581
}
1582
// avoids labels color being overridden, see
1584
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1585
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1586
}
1587
// overflow arrows
1589
> arrow {
1590
min-height: 16px;
1591
min-width: 16px;
1592
padding: 4px;
1593
background-color: $surface;
1594
color: $text-secondary;
1595
&.top {
1597
margin-top: -4px;
1598
border-bottom: 1px solid $divider;
1599
border-radius: $corner-radius $corner-radius 0 0;
1600
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1601
}
1602
&.bottom {
1604
margin-top: 4px * 2;
1605
margin-bottom: -4px * 3;
1606
border-top: 1px solid $divider;
1607
border-radius: 0 0 $corner-radius $corner-radius;
1608
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1609
}
1610
&:hover {
1612
background-image: image($overlay-hover);
1613
color: $text;
1614
}
1615
&:disabled {
1617
border-color: transparent;
1618
background-color: transparent;
1619
color: transparent;
1620
// color: $text-secondary-disabled;
1621
}
1622
}
1623
separator { margin: 4px 0; }
1625
}
1626
menuitem {
1628
accelerator { color: $text-secondary; }
1629
&:disabled accelerator { color: $text-secondary-disabled; }
1631
}
1632
/************
1635
* Popovers *
1636
************/
1637
popover.background {
1638
transition: $transition-shadow;
1639
padding: 2px;
1640
box-shadow: $shadow-2; // TODO: this should really have a highlight
1641
background-color: $surface;
1642
&:backdrop { box-shadow: $shadow-1; }
1644
&, .csd & {
1646
border-style: solid;
1647
border-width: 1px;
1648
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1649
border-radius: $corner-radius + 1px;
1650
}
1651
> stack { margin: -4px; } // remove extra padding from menu style popovers
1653
> toolbar { margin: -2px; }
1655
> list,
1657
> .view,
1658
> toolbar {
1659
border-style: none;
1660
box-shadow: none;
1661
background-color: transparent;
1662
}
1663
// FIXME: Use the popover color instead of transparent as a workaround for .view
1665
list,
1666
.view:not(:selected),
1667
toolbar { background-color: $surface; }
1668
// &.touch-selection,
1670
// &.magnifier,
1671
// &.osd { @extend %osd; }
1672
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1674
&.menu button,
1676
button.model {
1677
@extend %simple_flat_button;
1678
min-height: 32px;
1680
padding: 0 8px;
1681
border-radius: $corner-radius;
1682
&:checked { @extend %selected_items; }
1684
}
1685
separator { margin: 4px 0; }
1687
list separator { margin: 0; }
1689
}
1690
/*************
1692
* Notebooks *
1693
*************/
1694
notebook {
1695
frame > paned > & > header,
1696
&.frame > header { background-color: $base-alt; }
1697
&:focus tab:checked {
1699
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
1700
}
1701
> header {
1703
border-width: 1px;
1704
border-color: $divider;
1705
background-color: $background;
1706
background-clip: border-box;
1707
&.top {
1709
border-bottom-style: solid;
1710
> tabs {
1712
margin-bottom: -1px;
1713
> tab {
1715
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1716
&:checked { border-image-source: linear-gradient(to top, $primary 2px, $frame 2px); }
1718
&.reorderable-page { border-image-width: 0 1px 2px; }
1720
}
1721
}
1722
}
1723
&.bottom {
1725
border-top-style: solid;
1726
> tabs {
1728
margin-top: -1px;
1729
> tab {
1731
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1732
&:checked { border-image-source: linear-gradient(to bottom, $primary 2px, $frame 2px); }
1734
&.reorderable-page { border-image-width: 2px 1px 0; }
1736
}
1737
}
1738
}
1739
&.left {
1741
border-right-style: solid;
1742
> tabs {
1744
margin-right: -1px;
1745
> tab {
1747
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1748
&:checked { border-image-source: linear-gradient(to left, $primary 2px, $frame 2px); }
1750
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1752
}
1753
}
1754
}
1755
&.right {
1757
border-left-style: solid;
1758
> tabs {
1760
margin-left: -1px;
1761
> tab {
1763
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1764
&:checked { border-image-source: linear-gradient(to right, $primary 2px, $frame 2px); }
1766
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1768
}
1769
}
1770
}
1771
&.top > tabs > arrow {
1773
@extend %notebook_vert_arrows;
1774
border-top-style: none;
1776
}
1777
&.bottom > tabs > arrow {
1779
@extend %notebook_vert_arrows;
1780
border-bottom-style: none;
1782
}
1783
@at-root %notebook_vert_arrows {
1785
padding-left: 4px;
1786
padding-right: 4px;
1787
&.down {
1789
margin-left: -8px;
1790
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1791
}
1792
&.up {
1794
margin-right: -8px;
1795
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1796
}
1797
}
1798
&.left > tabs > arrow {
1800
@extend %notebook_horz_arrows;
1801
border-left-style: none;
1803
}
1804
&.right > tabs > arrow {
1806
@extend %notebook_horz_arrows;
1807
border-right-style: none;
1809
}
1810
@at-root %notebook_horz_arrows {
1812
padding-top: 4px;
1813
padding-bottom: 4px;
1814
&.down {
1816
margin-top: -8px;
1817
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1818
}
1819
&.up {
1821
margin-bottom: -8px;
1822
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1823
}
1824
}
1825
> tabs > arrow {
1827
@extend %simple_flat_button;
1828
min-height: 16px;
1830
min-width: 16px;
1831
border-radius: 0;
1832
}
1833
tab {
1835
transition: $transition,
1836
background-size 0ms,
1837
background-image 0ms;
1838
min-height: $small-size;
1839
min-width: $small-size;
1840
padding: $container-padding 12px;
1841
border-width: 1px; // for reorderable tabs
1843
border-color: transparent; //
1844
outline: none;
1846
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
1847
background-repeat: no-repeat;
1848
background-position: center;
1849
background-size: 0% 0%;
1850
background-clip: border-box;
1851
color: $text-secondary;
1853
font-weight: 500;
1854
&:hover {
1856
background-color: $overlay-hover;
1857
color: $text;
1858
}
1859
&:disabled { color: $text-secondary-disabled; }
1861
&:checked {
1863
transition: $transition,
1864
background-size $ripple-fade-in-duration $ease-out,
1865
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
1866
background-color: transparent;
1867
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
1868
background-size: 1000% 1000%;
1869
background-clip: padding-box;
1870
color: $text;
1871
&:disabled { color: $text-disabled; }
1873
&.reorderable-page {
1875
border-color: $frame;
1876
background-color: $base;
1877
}
1878
}
1879
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
1881
> box {
1882
transition: $transition;
1883
margin: -$container-padding -12px;
1884
padding: $container-padding 12px;
1885
&:drop(active) { @extend tab:hover; }
1887
}
1888
// colors the button like the label, overridden otherwise
1890
button.flat {
1891
@extend %small_button;
1892
&:last-child {
1894
margin-left: $container-padding;
1895
margin-right: $container-padding - 12px;
1896
}
1897
&:first-child {
1899
margin-left: $container-padding - 12px;
1900
margin-right: $container-padding;
1901
}
1902
}
1903
}
1904
&.top,
1906
&.bottom {
1907
tabs {
1908
padding-left: 8px;
1909
padding-right: 8px;
1910
&:not(:only-child) {
1912
&:first-child { margin-left: 0; }
1913
&:last-child { margin-right: 0; }
1915
}
1916
tab.reorderable-page { border-style: none solid; }
1918
}
1919
}
1920
&.left,
1922
&.right {
1923
tabs {
1924
padding-top: 8px;
1925
padding-bottom: 8px;
1926
&:not(:only-child) {
1928
&:first-child { margin-top: 0; }
1929
&:last-child { margin-bottom: 0; }
1931
}
1932
tab.reorderable-page { border-style: solid none; }
1934
}
1935
}
1936
}
1937
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1939
background-color: $base;
1940
}
1941
}
1942
/**************
1945
* Scrollbars *
1946
**************/
1947
scrollbar {
1948
$_slider_min_length: 24px;
1949
// disable steppers
1951
@at-root * {
1952
-GtkScrollbar-has-backward-stepper: false;
1953
-GtkScrollbar-has-forward-stepper: false;
1954
}
1955
transition: $transition;
1957
background-color: $base;
1958
background-clip: $background-clip-extra;
1959
// scrollbar border
1961
&.top { border-bottom: 1px solid $divider; }
1962
&.bottom { border-top: 1px solid $divider; }
1963
&.left { border-right: 1px solid $divider; }
1964
&.right { border-left: 1px solid $divider; }
1965
// slider
1967
slider {
1968
transition: $transition, margin 0ms, border-width 0ms;
1969
min-width: 8px;
1970
min-height: 8px;
1971
border: 4px solid transparent;
1972
border-radius: $circular-radius;
1973
background-clip: padding-box;
1974
background-color: $text-disabled;
1975
&:hover { background-color: $text-secondary; }
1977
&:active { background-color: $text; }
1979
&:disabled { background-color: $text-secondary-disabled; }
1981
}
1982
&.fine-tune {
1984
slider {
1985
transition: $transition, margin 0ms, border-width 0ms, min-width 0ms, min-height 0ms;
1986
min-width: 4px;
1987
min-height: 4px;
1988
}
1989
&.horizontal slider { margin: 2px 0; }
1991
&.vertical slider { margin: 0 2px; }
1993
}
1994
&.overlay-indicator {
1996
&:not(.dragging):not(.hovering) {
1997
border-color: transparent;
1998
background-color: transparent;
1999
slider {
2001
min-width: 4px;
2002
min-height: 4px;
2003
margin: 4px - 1px;
2004
border: 1px solid rgba($base, 0.3);
2005
}
2006
button {
2008
min-width: 4px;
2009
min-height: 4px;
2010
margin: 4px - 1px;
2011
border: 1px solid rgba($base, 0.3);
2012
border-radius: $circular-radius;
2013
background-color: $text-disabled;
2014
background-clip: padding-box;
2015
-gtk-icon-source: none;
2016
&:disabled { background-color: $text-secondary-disabled; }
2018
}
2019
&.horizontal {
2021
slider { min-width: $_slider_min_length; }
2022
button { min-width: 8px; }
2024
}
2025
&.vertical {
2027
slider { min-height: $_slider_min_length; }
2028
button { min-height: 8px; }
2030
}
2031
}
2032
&.dragging,
2034
&.hovering { background-color: rgba($base, 0.9); }
2035
}
2036
&.horizontal slider { min-width: $_slider_min_length; }
2038
&.vertical slider { min-height: $_slider_min_length; }
2040
// button styling
2042
button {
2043
@extend %simple_flat_button;
2044
min-width: 16px;
2046
min-height: 16px;
2047
padding: 0;
2048
border-radius: 0;
2049
}
2050
// button icons
2052
&.vertical {
2053
button {
2054
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2055
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2057
}
2058
}
2059
&.horizontal {
2061
button {
2062
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2063
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2065
}
2066
}
2067
}
2068
/**********
2071
* Switch *
2072
**********/
2073
switch {
2074
transition: all $duration $ease-out;
2075
margin: $container-padding 0;
2076
padding: 0 2px;
2077
border: 5px solid transparent;
2078
border-radius: $circular-radius;
2079
background-color: $track;
2080
background-clip: padding-box;
2081
font-size: 0;
2082
&:checked { background-color: rgba($primary, 0.5); }
2084
&:disabled { opacity: 0.5; }
2086
// hide on/off icons for >=3.24.5
2088
image {
2089
margin: -8px;
2090
-gtk-icon-transform: scale(0);
2091
}
2092
slider {
2094
transition: all $duration $ease-out;
2095
min-width: 20px;
2096
min-height: 20px;
2097
margin: -3px -2px;
2098
border-radius: $circular-radius;
2099
outline: none;
2100
box-shadow: 0 0 0 10px transparent, $shadow-1;
2101
background-color: $surface;
2102
}
2103
&:focus slider { box-shadow: 0 0 0 10px $overlay-focus, $shadow-1; }
2105
&:hover slider { box-shadow: 0 0 0 10px $overlay-hover, $shadow-1; }
2107
&:focus:hover slider { box-shadow: 0 0 0 10px $overlay-focus-hover, $shadow-1; }
2109
&:checked slider {
2111
background-color: $primary;
2112
color: $primary;
2113
}
2114
row:selected & {
2116
}
2117
}
2118
/*************************
2121
* Check and Radio items *
2122
*************************/
2123
// draw regular check and radio items using our PNG assets
2124
// all assets are rendered from assets.svg. never add pngs directly
2125
// selection-mode
2127
.view.content-view.check:not(list),
2128
.content-view .tile check:not(list) {
2129
min-height: 40px;
2130
min-width: 40px;
2131
margin: 0;
2132
padding: 0;
2133
box-shadow: none;
2134
background-color: transparent;
2135
background-image: none;
2136
-gtk-icon-shadow: $shadow-1;
2137
&:hover, &:active { -gtk-icon-shadow: $shadow-2; }
2139
@each $s, $as in ('', '-unchecked'),
2141
(':checked', '-checked') {
2142
&#{$s} {
2143
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}.png"),
2144
url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}@2.png"));
2145
}
2146
}
2147
}
2148
checkbutton,
2150
radiobutton {
2151
outline: none;
2152
}
2153
checkbutton.text-button,
2155
radiobutton.text-button {
2156
// this is for a nice focus on check and radios text
2157
padding: 2px;
2158
label:not(:only-child) { margin: 0 4px; }
2160
}
2161
$check_radio_size: 40px;
2163
check,
2165
radio {
2166
min-height: 24px;
2167
min-width: 24px;
2168
margin: -($check_radio_size - 24px) / 2;
2169
padding: ($check_radio_size - 24px) / 2;
2170
@extend %simple_flat_button;
2172
@extend %circular_button;
2174
&:checked, &:indeterminate {
2176
color: $primary;
2177
&:disabled { color: $text-secondary-disabled; }
2179
}
2180
// &:only-child { margin: -12px; }
2182
popover modelbutton.flat & {
2184
&, &:focus, &:hover, &:focus:hover, &:active, &:disabled {
2185
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2186
box-shadow: none;
2187
background-image: none;
2188
}
2189
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2191
&.left:dir(rtl) {
2193
margin-left: -12px;
2194
margin-right: -4px;
2195
}
2196
&.right:dir(ltr) {
2198
margin-left: -4px;
2199
margin-right: -12px;
2200
}
2201
}
2202
menu menuitem & {
2204
transition: none;
2205
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2206
padding: 0;
2207
&:dir(ltr) { margin-right: 8px; }
2209
&:dir(rtl) { margin-left: 8px; }
2211
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2213
&, &:hover, &:disabled {
2215
box-shadow: none;
2216
// color: inherit;
2217
}
2218
}
2219
}
2220
%check,
2222
check {
2223
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2224
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2226
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2228
}
2229
%radio,
2231
radio {
2232
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2233
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2235
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2237
border-image-slice: $check_radio_size / 2px;
2239
border-image-width: $check_radio_size / 2;
2240
$radio_indicator: 10px / $check_radio_size / 2;
2242
& {
2244
border-image-source: -gtk-gradient(radial,
2245
center center, 0,
2246
center center, 0.001,
2247
to($primary),
2248
to(transparent));
2249
}
2250
&:checked:not(:indeterminate) {
2252
border-image-source: -gtk-gradient(radial,
2253
center center, 0,
2254
center center, $radio_indicator,
2255
to($primary),
2256
to(transparent));
2257
}
2258
&:checked:not(:indeterminate):disabled {
2260
border-image-source: -gtk-gradient(radial,
2261
center center, 0,
2262
center center, $radio_indicator,
2263
to($text-secondary-disabled),
2264
to(transparent));
2265
}
2266
}
2267
%small_check,
2269
menu menuitem check {
2270
& {
2271
min-height: 16px;
2272
min-width: 16px;
2273
border-radius: $corner-radius;
2274
-gtk-outline-radius: $corner-radius;
2275
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2276
}
2277
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2279
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2281
}
2282
%small_radio,
2284
menu menuitem radio {
2285
& {
2286
min-height: 16px;
2287
min-width: 16px;
2288
border-image: none;
2289
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2290
}
2291
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2293
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2295
}
2296
// ANIMATION:
2298
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2299
// the transformation is set on the active state and it get reset on the checked state.
2300
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2301
treeview.view check,
2303
treeview.view radio {
2304
padding: 0;
2305
&:hover, &:selected {
2307
box-shadow: none;
2308
background-color: transparent;
2309
}
2310
& {
2312
color: $text-secondary;
2313
&:hover, &:active { color: $text; }
2315
&:disabled { color: $text-secondary-disabled; }
2317
&:checked, &:indeterminate { color: $primary; }
2319
&:checked:disabled, &:indeterminate:disabled { color: $text-secondary-disabled; }
2321
}
2322
}
2323
treeview.view radio:checked {
2325
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2326
border-image: none;
2327
}
2328
/************
2331
* GtkScale *
2332
************/
2333
scale {
2334
// sizing
2335
$_marks_length: 8px;
2336
$_marks_distance: 7px;
2337
$trough_size: 2px;
2339
$finetune_trough_size: 4px;
2340
$slider_size: 32px;
2342
$slider_margin: -($slider_size - $trough_size) / 2;
2344
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2345
$color_slider_margin: -($slider_size) * 3 / 4;
2347
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2348
min-height: $trough_size;
2350
min-width: $trough_size;
2351
&.horizontal { padding: ($medium-size - $trough_size) / 2 12px; }
2353
&.vertical { padding: 12px ($medium-size - $trough_size) / 2; }
2355
// the slider is inside the trough, so to have make it bigger there's a negative margin
2357
slider {
2358
min-height: $slider_size;
2359
min-width: $slider_size;
2360
margin: $slider_margin;
2361
}
2362
// click-and-hold the slider to activate
2364
&.fine-tune {
2365
&.horizontal {
2366
min-height: $finetune_trough_size;
2367
padding-top: ($medium-size - $finetune_trough_size) / 2;
2368
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2369
}
2370
&.vertical {
2372
min-width: $finetune_trough_size;
2373
padding-left: ($medium-size - $finetune_trough_size) / 2;
2374
padding-right: ($medium-size - $finetune_trough_size) / 2;
2375
}
2376
// to make the trough grow in fine-tune mode
2378
slider { margin: $finetune_slider_margin; }
2379
}
2380
// the backing bit
2382
trough {
2383
transition: background-color $duration $ease-out;
2384
outline: none;
2385
background-color: $track;
2386
&:disabled { background-color: $track-disabled; }
2388
}
2389
// the colored part of the backing bit
2391
highlight {
2392
transition: background-color $duration $ease-out;
2393
background-color: $primary;
2394
&:disabled { background-color: transparent; }
2396
}
2397
// this is another differently styled part of the backing bit, the most relevant use case is for example
2399
// in media player to indicate how much video stream as been cached
2400
fill {
2401
transition: background-color $duration $ease-out;
2402
background-color: $track;
2403
&:disabled { background-color: transparent; }
2405
}
2406
slider {
2408
transition: background-color $duration $ease-out,
2409
background-size $ripple-fade-out-duration $ease-out,
2410
background-image $ripple-fade-out-opacity-duration $ease-out;
2411
background-repeat: no-repeat;
2412
background-position: center;
2413
background-size: auto, 1000% 1000%;
2414
border-radius: 50%;
2415
color: $primary;
2416
@each $s, $as in ('', ''),
2418
(':disabled', '-disabled') {
2419
&#{$s} {
2420
$_url: 'assets/scale-slider#{$as}#{$asset-suffix}';
2421
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2423
radial-gradient(circle, transparent 10%, transparent 0%);
2424
}
2425
}
2426
&:focus { background-color: $overlay-focus; }
2428
&:hover { background-color: $overlay-hover; }
2430
&:focus:hover { background-color: $overlay-focus-hover; }
2432
&:active {
2434
$_url: 'assets/scale-slider#{$asset-suffix}';
2435
transition: background-color $duration $ease-out,
2437
background-size 0ms,
2438
background-image 0ms;
2439
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2440
background-color: $overlay-hover;
2441
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2442
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2443
background-size: auto, 0% 0%;
2444
}
2445
}
2446
marks label,
2448
value { color: $text-secondary; }
2449
marks {
2451
color: $track;
2452
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2454
(bottom, bottom, top),
2455
(left, left, right),
2456
(right, right, left) {
2457
&.#{$marks_class} {
2458
margin-#{$marks_margin}: $_marks_distance;
2459
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2460
}
2461
}
2462
}
2463
&.fine-tune marks {
2465
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2466
(bottom, bottom, top),
2467
(left, left, right),
2468
(right, right, left) {
2469
&.#{$marks_class} {
2470
margin-#{$marks_margin}: $_marks_distance - 1px;
2471
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2472
}
2473
}
2474
}
2475
&.horizontal {
2477
indicator {
2478
min-height: $_marks_length;
2479
min-width: 1px;
2480
}
2481
}
2482
&.vertical {
2484
indicator {
2485
min-height: 1px;
2486
min-width: $_marks_length;
2487
}
2488
}
2489
// *WARNING* scale with marks madness following
2491
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2493
('vertical', 'vert') {
2494
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2495
('marks-after', 'marks-after:not(.marks-before)') {
2496
&.#{$dir_class}.#{$marks_class} {
2497
slider {
2498
@each $state, $state_infix in ('', ''),
2499
(':disabled', '-disabled') {
2500
&#{$state} {
2501
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2502
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2504
radial-gradient(circle, transparent 10%, transparent 0%);
2505
}
2506
}
2507
&:active {
2509
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$asset-suffix}';
2510
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2512
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2513
}
2514
}
2515
}
2516
}
2517
}
2518
&.color {
2520
min-height: 0;
2521
min-width: 0;
2522
&.horizontal {
2524
padding: 0 0 12px 0;
2525
slider {
2527
&:dir(ltr), &:dir(rtl) { // specificity bump
2528
margin-bottom: $color_slider_margin;
2529
margin-top: $color_marks_slider_margin;
2530
}
2531
}
2532
}
2533
&.vertical {
2535
&:dir(ltr) {
2536
padding: 0 0 0 12px;
2537
slider {
2539
margin-left: $color_slider_margin;
2540
margin-right: $color_marks_slider_margin;
2541
}
2542
}
2543
&:dir(rtl) {
2545
padding: 0 12px 0 0;
2546
slider {
2548
margin-right: $color_slider_margin;
2549
margin-left: $color_marks_slider_margin;
2550
}
2551
}
2552
}
2553
}
2554
}
2555
/*****************
2558
* Progress bars *
2559
*****************/
2560
progressbar {
2561
// sizing
2562
&.horizontal {
2563
trough,
2564
progress { min-height: $bar-size; }
2565
}
2566
&.vertical {
2568
trough,
2569
progress { min-width: $bar-size; }
2570
}
2571
// FIXME: insensitive state missing and some other state should be set probably
2573
color: $text-secondary;
2574
font-size: smaller;
2575
trough { background-color: $track-disabled; }
2577
progress { background-color: $primary; }
2579
&.osd { // progressbar.osd used for epiphany page loading progress
2581
// min-width: $bar-size;
2582
// min-height: $bar-size;
2583
// background-color: transparent;
2584
// trough { background-color: transparent; }
2586
// progress { background-color: $primary; }
2588
}
2589
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2591
}
2592
/*************
2595
* Level Bar *
2596
*************/
2597
levelbar {
2598
&.horizontal {
2599
block { min-height: $bar-size; }
2600
&.discrete block {
2602
min-width: $medium-size;
2603
&:not(:last-child) { margin-right: 2px; }
2605
}
2606
}
2607
&.vertical {
2609
block { min-width: $bar-size; }
2610
&.discrete block {
2612
min-height: $medium-size;
2613
&:not(:last-child) { margin-bottom: 2px; }
2615
}
2616
}
2617
// imitate the entry style
2619
trough {
2620
// padding: 2px;
2621
// border-radius: $corner-radius;
2622
// box-shadow: $shadow-1;
2623
// background-color: $base;
2624
// &:disabled { background-color: $base-alt; }
2626
}
2627
block {
2629
&.low { background-color: $warning; }
2630
&.high,
2632
&:not(.empty) { background-color: $primary; }
2633
&.full { background-color: $success; }
2635
&.empty { background-color: $track-disabled; }
2637
}
2638
}
2639
/****************
2642
* Print dialog *
2643
*****************/
2644
printdialog {
2645
paper {
2646
padding: 0;
2647
border: 1px solid $frame;
2648
background-color: $base;
2649
color: $text;
2650
}
2651
.dialog-action-box { margin: 12px; }
2653
}
2654
/**********
2657
* Frames *
2658
**********/
2659
frame > border,
2660
.frame {
2661
margin: 0;
2662
padding: 0;
2663
border: 1px solid $frame;
2664
border-radius: 0;
2665
box-shadow: none;
2666
&.flat { border-style: none; }
2668
}
2669
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2671
actionbar > revealer > box {
2673
padding: $container-padding;
2674
border-top: 1px solid $divider;
2675
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2677
}
2678
scrolledwindow {
2680
viewport.frame { // avoid double borders when viewport inside scrolled window
2681
border-style: none;
2682
}
2683
// This is used when content is touch-dragged past boundaries.
2685
// draws a box on top of the content, the size changes programmatically.
2686
@at-root overshoot {
2687
&.top { @include overshoot(top); }
2688
&.bottom { @include overshoot(bottom); }
2690
&.left { @include overshoot(left); }
2692
&.right { @include overshoot(right); }
2694
}
2695
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2697
@at-root undershoot {
2698
&.top { @include undershoot(top); }
2699
&.bottom { @include undershoot(bottom); }
2701
&.left { @include undershoot(left); }
2703
&.right { @include undershoot(right); }
2705
}
2706
@at-root junction { // the small square between two scrollbars
2708
border-style: solid none none solid;
2709
border-width: 1px;
2710
border-color: $divider;
2711
background-color: $base;
2712
&:dir(rtl) { border-style: solid solid none none; }
2714
}
2715
}
2716
// vbox and hbox separators
2718
separator {
2719
min-width: 1px;
2720
min-height: 1px;
2721
background-color: $divider;
2722
}
2723
%hide_separators {
2725
min-width: 0;
2726
min-height: 0;
2727
background-color: transparent;
2728
}
2729
/*********
2732
* Lists *
2733
*********/
2734
list {
2735
border-color: $frame;
2736
background-color: $base;
2737
row { padding: 2px; }
2739
}
2740
row {
2742
&.activatable {
2743
transition: $transition,
2744
background-size $ripple-fade-out-duration $ease-out,
2745
background-image $ripple-fade-out-opacity-duration $ease-out;
2746
outline: none;
2747
box-shadow: inset 0 0 0 9999px transparent;
2748
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2749
background-repeat: no-repeat;
2750
background-position: center;
2751
background-size: 1000% 1000%;
2752
&:focus {
2754
box-shadow: inset 0 0 0 9999px $overlay-focus;
2755
}
2756
&:hover {
2758
transition: $transition,
2759
box-shadow 0ms,
2760
background-size $ripple-fade-out-duration $ease-out,
2761
background-image $ripple-fade-out-opacity-duration $ease-out;
2762
box-shadow: inset 0 0 0 9999px $overlay-hover;
2763
}
2764
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2766
&:active {
2767
transition: $transition,
2768
background-size 0ms,
2769
background-image 0ms;
2770
animation: ripple $ripple-fade-in-duration $ease-out forwards;
2771
box-shadow: inset 0 0 0 9999px $overlay-hover;
2772
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
2773
background-size: 0% 0%;
2774
}
2775
}
2776
&:selected {
2778
@extend %selected_items;
2779
color: $primary; // for overlays
2780
image,
2782
label { color: $text; }
2783
button image,
2785
button label { color: inherit; }
2786
&:disabled {
2788
image,
2789
label { color: $text-disabled; }
2790
}
2791
}
2792
}
2793
/*********************
2796
* App Notifications *
2797
*********************/
2798
.app-notification {
2799
// @extend %osd;
2800
@extend toolbar.osd;
2802
margin: 8px;
2804
button { @extend %button_basic.flat; }
2806
&.frame,
2808
border { border-style: none; }
2809
}
2810
/*************
2813
* Expanders *
2814
*************/
2815
expander {
2816
title > arrow {
2817
transition: all $duration $ease-out;
2818
min-width: 16px;
2819
min-height: 16px;
2820
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2821
-gtk-icon-transform: rotate(-90deg);
2822
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2824
&:checked { -gtk-icon-transform: unset; }
2826
color: $text-secondary;
2828
&:hover, &:active { color: $text; }
2830
&:disabled { color: $text-secondary-disabled; }
2832
}
2833
}
2834
/************
2837
* Calendar *
2838
************/
2839
calendar {
2840
padding: 1px;
2841
border: 1px solid $frame;
2842
color: $text;
2843
&:disabled { color: $text-disabled; }
2845
&:selected {
2847
@extend %selected_items;
2848
border-radius: $corner-radius + 1px;
2850
}
2851
&.header {
2853
border-style: none none solid;
2854
border-color: $divider;
2855
border-radius: 0;
2856
}
2857
&.button { @extend %simple_flat_button; }
2859
&.highlight {
2861
color: $text-secondary;
2862
font-weight: 500;
2863
}
2864
&:indeterminate { color: $text-secondary-disabled; }
2866
}
2867
/***********
2870
* Dialogs *
2871
***********/
2872
messagedialog { // Message Dialog styling
2873
&.background { background-color: $surface; }
2874
.titlebar {
2876
min-height: $small-size;
2877
border-style: none;
2878
box-shadow: inset 0 1px highlight($surface);
2879
background-color: $surface;
2880
color: $text;
2881
&:backdrop { color: $text-secondary; }
2883
}
2884
&.csd { // rounded bottom border styling for csd version
2886
&.background {
2887
// bigger radius for better antialiasing
2888
border-bottom-left-radius: $corner-radius;
2889
border-bottom-right-radius: $corner-radius;
2890
}
2891
.dialog-action-area {
2893
margin-top: -$container-padding;
2894
padding: $container-padding;
2895
button {
2897
@extend %simple_flat_button;
2898
border-radius: $corner-radius;
2899
&:not(:last-child) { margin-right: $container-padding; }
2901
&.suggested-action:not(:disabled) { color: $suggested; }
2903
&.destructive-action:not(:disabled) { color: $destructive; }
2905
}
2906
}
2907
}
2908
}
2909
filechooser {
2911
.dialog-action-box { border-top: 1px solid $divider; }
2912
#pathbarbox {
2914
border-bottom: 1px solid $divider;
2915
background-color: $background;
2916
> stack > box > button { // The new folder button
2918
@extend %button_basic.flat;
2919
@extend %circular_button;
2920
}
2921
}
2922
}
2923
filechooserbutton:drop(active) {
2925
box-shadow: none;
2926
}
2927
/***********
2930
* Sidebar *
2931
***********/
2932
.sidebar {
2933
border-style: none;
2934
background-color: $base-alt;
2935
&:not(separator) {
2937
@at-root %sidebar_left,
2938
&:dir(ltr),
2939
&.left,
2940
&.left:dir(rtl) {
2941
border-right: 1px solid $divider;
2942
border-left-style: none;
2943
}
2944
@at-root %sidebar_right,
2946
&:dir(rtl),
2947
&.right {
2948
border-left: 1px solid $divider;
2949
border-right-style: none;
2950
}
2951
}
2952
list { background-color: transparent; }
2954
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2956
}
2957
stacksidebar {
2959
&.sidebar {
2960
&:dir(ltr),
2961
&.left,
2962
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2963
&:dir(rtl),
2965
&.right { list { @extend %sidebar_right; }}
2966
}
2967
row {
2969
padding: 10px 4px;
2970
> label {
2972
padding-left: 6px;
2973
padding-right: 6px;
2974
}
2975
&.needs-attention > label { @extend %needs-attention; }
2977
}
2978
}
2979
separator.sidebar {
2981
background-color: $divider;
2982
&.selection-mode,
2984
.selection-mode & {
2985
// background-color: $divider;
2986
}
2987
}
2988
/****************
2991
* File chooser *
2992
****************/
2993
// dim the sidebar icons, see bug #786613 for details on this oddity
2994
row {
2995
image.sidebar-icon { color: $text-secondary; }
2996
}
2997
placessidebar {
2999
> viewport.frame { border-style: none; }
3000
list { padding: (4px - 3px) 0 4px; }
3002
row {
3004
// Needs overriding of the GtkListBoxRow padding
3005
min-height: 32px;
3006
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3007
padding: 0;
3008
border-radius: $corner-radius;
3009
// Using margins/padding directly in the SidebarRow
3011
// will make the animation of the new bookmark row jump
3012
> revealer { padding: 0 8px; }
3013
&:selected { font-weight: 500; }
3015
&:disabled { color: $text-disabled; }
3017
image.sidebar-icon {
3019
&:dir(ltr) { padding-right: 8px; }
3020
&:dir(rtl) { padding-left: 8px; }
3021
}
3022
label.sidebar-label {
3024
&:dir(ltr) { padding-right: 2px; }
3025
&:dir(rtl) { padding-left: 2px; }
3026
}
3027
&:selected image.sidebar-icon,
3029
&:selected label.sidebar-label { color: inherit; }
3030
@at-root button.sidebar-button {
3032
@extend %simple_flat_button;
3033
@extend %small_button;
3034
}
3035
&.sidebar-placeholder-row { background-color: $overlay-hover; }
3037
&.sidebar-new-bookmark-row { color: $primary; }
3039
&:drop(active) { @extend row:hover; }
3041
}
3042
}
3043
placesview {
3045
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3046
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3048
// this selects the "connect to server" label
3050
> actionbar > revealer > box > label {
3051
padding-left: 8px;
3052
padding-right: 8px;
3053
}
3054
}
3055
/*********
3058
* Paned *
3059
*********/
3060
paned {
3061
> separator {
3062
min-width: 1px;
3063
min-height: 1px;
3064
-gtk-icon-source: none; // defeats the ugly default handle decoration
3065
border-style: none; // just to be sure
3066
background-color: transparent;
3067
// workaround, using background istead of a border since the border will get rendered twice (?)
3068
background-image: image($divider);
3069
background-size: 1px 1px;
3070
background-clip: content-box; // avoids borders image being rendered twice (?)
3071
&.wide {
3073
min-width: 6px;
3074
min-height: 6px;
3075
background-color: $background;
3076
background-image: image($divider), image($divider);
3077
background-size: 1px 1px, 1px 1px;
3078
}
3079
}
3080
&.horizontal > separator {
3082
background-repeat: repeat-y;
3083
&:dir(ltr) {
3085
margin: 0 -8px 0 0;
3086
padding: 0 8px 0 0;
3087
background-position: left;
3088
}
3089
&:dir(rtl) {
3091
margin: 0 0 0 -8px;
3092
padding: 0 0 0 8px;
3093
background-position: right;
3094
}
3095
&.wide {
3097
margin: 0;
3098
padding: 0;
3099
background-repeat: repeat-y, repeat-y;
3100
background-position: left, right;
3101
}
3102
}
3103
&.vertical > separator {
3105
margin: 0 0 -8px 0;
3106
padding: 0 0 8px 0;
3107
background-repeat: repeat-x;
3108
background-position: top;
3109
&.wide {
3111
margin: 0;
3112
padding: 0;
3113
background-repeat: repeat-x, repeat-x;
3114
background-position: bottom, top;
3115
}
3116
}
3117
}
3118
/**************
3121
* GtkInfoBar *
3122
**************/
3123
infobar {
3124
border-style: none;
3125
&.info { background-color: $infobar-info; }
3127
&.question { background-color: $infobar-question; }
3129
&.warning { background-color: $infobar-warning; }
3131
&.error { background-color: $infobar-error; }
3133
&.info,
3135
&.question,
3136
&.warning,
3137
&.error {
3138
> label, & { color: on(dark); }
3139
button { @extend %button_selected; }
3141
selection {}
3143
*:link { color: on(dark); }
3145
}
3146
}
3147
/************
3150
* Tooltips *
3151
************/
3152
tooltip {
3153
&.background {
3154
// background-color needs to be set this way otherwise it gets drawn twice
3155
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3156
background-color: $tooltip;
3157
color: on($tooltip);
3158
}
3159
// padding: 4px; /* not working */
3161
border-radius: $corner-radius;
3162
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3163
&:not(.csd):not(.unity-csd) {
3165
// border: 1px solid $frame;
3166
// border-radius: $corner-radius + 1px;
3167
// background-clip: $background-clip-extra;
3168
}
3169
// FIXME: we need a border or tooltips vanish on black background.
3171
decoration { background-color: transparent; }
3172
> box {
3174
margin: -6px; // Remove hard-coded 6px padding
3175
min-height: 32px - 4px * 2;
3176
padding: 4px 8px;
3177
}
3178
* {
3180
// workaround for Eclipse.
3181
// do not include any declaration here.
3182
// padding: 0;
3183
// background-color: transparent;
3184
// color: inherit;
3185
}
3186
}
3187
/*****************
3190
* Color Chooser *
3191
*****************/
3192
colorswatch {
3193
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3194
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3195
// applied to the overlay box.
3196
// base color corners rounding
3198
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3199
// sports a bigger radius.
3200
// nth-child is needed by the custom color strip.
3201
&.top {
3203
border-top-left-radius: $corner-radius + 0.5px;
3204
border-top-right-radius: $corner-radius + 0.5px;
3205
overlay {
3207
border-top-left-radius: $corner-radius;
3208
border-top-right-radius: $corner-radius;
3209
}
3210
}
3211
&.bottom {
3213
border-bottom-left-radius: $corner-radius + 0.5px;
3214
border-bottom-right-radius: $corner-radius + 0.5px;
3215
overlay {
3217
border-bottom-left-radius: $corner-radius;
3218
border-bottom-right-radius: $corner-radius;
3219
}
3220
}
3221
&.left,
3223
&:first-child:not(.top) {
3224
border-top-left-radius: $corner-radius + 0.5px;
3225
border-bottom-left-radius: $corner-radius + 0.5px;
3226
overlay {
3228
border-top-left-radius: $corner-radius;
3229
border-bottom-left-radius: $corner-radius;
3230
}
3231
}
3232
&.right,
3234
&:last-child:not(.bottom) {
3235
border-top-right-radius: $corner-radius + 0.5px;
3236
border-bottom-right-radius: $corner-radius + 0.5px;
3237
overlay {
3239
border-top-right-radius: $corner-radius;
3240
border-bottom-right-radius: $corner-radius;
3241
}
3242
}
3243
&.dark { color: on(dark); }
3245
&.light { color: on(light); }
3247
overlay {
3249
transition: $transition-shadow;
3250
box-shadow: $shadow-1;
3251
&:hover { box-shadow: $shadow-2; }
3253
&:drop(active) { box-shadow: $shadow-2; }
3255
}
3256
&#add-color-button {
3258
border-radius: $corner-radius $corner-radius 0 0;
3259
color: on(dark);
3260
&:only-child { border-radius: $corner-radius; }
3262
overlay {
3264
background-image: linear-gradient(to right,
3265
$red 25%,
3266
$yellow 25%, $yellow 50%,
3267
$green 50%, $green 75%,
3268
$blue 75%);
3269
}
3270
}
3271
&:disabled {
3273
opacity: 0.5;
3274
overlay { box-shadow: none; }
3276
}
3277
row:selected & {
3279
}
3280
&#editor-color-sample {
3282
border-radius: $corner-radius + 0.5px;
3283
overlay { border-radius: $corner-radius; }
3285
// overlay:hover { box-shadow: $shadow-1; }
3287
}
3288
}
3289
// colorscale popup
3291
colorchooser .popover.osd {
3292
transition: $transition-shadow;
3293
border-radius: $corner-radius;
3294
box-shadow: $shadow-2, inset 0 1px highlight($surface);
3295
background-color: $surface;
3296
&:backdrop { box-shadow: $shadow-1, inset 0 1px highlight($surface); }
3298
}
3299
/********
3302
* Misc *
3303
********/
3304
// content view (grid/list)
3305
.content-view {
3306
background-color: $background;
3307
// &:hover { -gtk-icon-effect: highlight; }
3309
rubberband, .rubberband { @extend rubberband; }
3311
}
3312
.scale-popup {
3314
// .osd & { @extend %osd; }
3315
.osd & button.flat { // FIXME: quick hack, redo properly
3317
}
3318
button { // +/- buttons on GtkVolumeButton popup
3320
}
3321
}
3322
/**********************
3325
* Window Decorations *
3326
**********************/
3327
decoration {
3328
transition: $transition-shadow;
3329
border-radius: $corner-radius $corner-radius 0 0;
3330
box-shadow: $shadow-4, 0 16px 16px transparent;
3331
// FIXME rationalize shadows
3333
// this is used for the resize cursor area
3335
margin: 8px;
3336
&:backdrop {
3338
// the transparent shadow here is to enforce that the shadow extents don't
3339
// change when we go to backdrop, to prevent jumping windows.
3340
// The biggest shadow should be in the same order then in the active state
3341
// or the jumping will happen during the transition.
3342
box-shadow: $shadow-2, 0 16px 16px transparent;
3343
}
3344
.maximized &,
3346
.fullscreen &,
3347
.tiled &,
3348
.tiled-top &,
3349
.tiled-right &,
3350
.tiled-bottom &,
3351
.tiled-left & { border-radius: 0; }
3352
.popup & { box-shadow: none; }
3354
// server-side decorations as used by mutter
3356
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3357
.csd.popup & {
3359
border-radius: $corner-radius;
3360
box-shadow: $shadow-2;
3361
}
3362
tooltip.csd & {
3364
border-radius: $corner-radius;
3365
box-shadow: none;
3366
}
3367
messagedialog.csd & {
3369
border-radius: $corner-radius;
3370
// box-shadow: $shadow-4, 0 16px 16px transparent;
3371
// &:backdrop { box-shadow: $shadow-2, 0 16px 16px transparent; }
3373
}
3374
.solid-csd & {
3376
margin: 0;
3377
// padding: 4px;
3378
border-radius: 0;
3379
box-shadow: none;
3380
// box-shadow: inset 0 0 0 4px $titlebar;
3381
background-color: $titlebar;
3382
}
3383
}
3384
// Window Close button
3386
button.titlebutton {
3387
// @extend %simple_flat_button;
3388
@extend %circular_button;
3390
.selection-mode & {
3392
}
3393
}
3394
// catch all extend :)
3397
%selected_items {
3399
background-color: $overlay-selected;
3400
}
3401
.monospace { font-family: monospace; }
3403
/**********************
3406
* Touch Copy & Paste *
3407
**********************/
3408
// touch selection handlebars for the Popover.osd above
3409
cursor-handle {
3410
color: $primary;
3411
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
3412
&.top:dir(ltr), &.bottom:dir(rtl) {
3414
-gtk-icon-transform: rotate(90deg);
3415
}
3416
&.bottom:dir(ltr), &.top:dir(rtl) {
3418
-gtk-icon-transform: unset;
3419
}
3420
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3422
padding-top: 6px;
3423
-gtk-icon-transform: rotate(45deg);
3424
}
3425
}
3426
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3428
// shortcut window keys
3430
.keycap {
3431
min-width: 28px - 8px * 2;
3432
min-height: 28px - 2px;
3433
margin-top: 2px;
3434
padding-bottom: 2px;
3435
padding-left: 8px;
3436
padding-right: 8px;
3437
border: solid 1px $frame;
3439
border-radius: $corner-radius + 1px;
3440
box-shadow: inset 0 -2px $frame;
3441
background-color: $surface;
3442
color: $text;
3443
font-size: smaller;
3444
}
3445
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3447
caret-color: $primary;
3448
}
3449
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3451
stackswitcher button.circular,
3453
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3454
min-width: $medium-size;
3455
min-height: $medium-size;
3456
padding: 0;
3457
}
3458
/*************
3461
* App Icons *
3462
*************/
3463
// Outline for low res icons
3464
.lowres-icon {
3465
// -gtk-icon-shadow: none;
3466
}
3467
// Drapshadow for large icons
3469
.icon-dropshadow {
3470
// -gtk-icon-shadow: none;
3471
}
3472
/*********
3475
* Emoji *
3476
*********/
3477
popover.emoji-picker {
3478
padding: 0;
3479
entry {
3481
border-bottom: 1px solid $divider;
3482
border-image: none;
3483
border-radius: 0;
3484
box-shadow: none;
3485
background-color: transparent;
3486
}
3487
scrolledwindow { border-bottom: 1px solid $divider; }
3489
}
3490
// mimic tab style
3492
button.emoji-section {
3493
margin-top: -1px;
3494
padding: 0 8px;
3495
min-width: 24px;
3496
min-height: $medium-size;
3497
border-radius: 0;
3498
outline-offset: -6px;
3499
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3501
&:checked {
3503
box-shadow: inset 0 2px $primary;
3504
background-color: transparent;
3505
}
3506
&:hover, &:active { background-color: $overlay-hover; }
3508
&:first-child { margin-left: 4px; }
3510
&:last-child { margin-right: 4px; }
3512
}
3513
popover.emoji-picker .emoji {
3515
min-width: 3em;
3516
min-height: 3em;
3517
padding: 0 8px;
3518
// font-size: larger;
3519
widget {
3521
transition: $transition;
3522
border-radius: $corner-radius;
3523
&:hover { background-color: $overlay-hover; }
3525
}
3526
}
3527
popover.emoji-completion {
3529
padding: 8px 0;
3530
arrow {
3532
border: none;
3533
background: none;
3534
}
3535
.emoji-completion-row {
3537
min-height: $menuitem-size;
3538
padding: 0 12px;
3539
}
3540
.emoji:hover {
3542
background-color: $overlay-hover;
3543
}
3544
}
3545