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
&.bottom {
986
box-shadow: none;
987
background-color: transparent;
988
background-image: linear-gradient(to bottom,
989
transparent,
990
rgba(black, 0.1) 30%,
991
rgba(black, 0.2) 50%,
992
rgba(black, 0.4));
993
}
994
}
995
// toolbar separators
997
&.horizontal > separator { margin: 2px; }
998
&.vertical > separator { margin: 2px; }
999
&:not(.inline-toolbar):not(.osd) {
1001
scale,
1002
entry,
1003
spinbutton,
1004
button { margin: 2px; }
1005
.linked entry,
1007
.linked spinbutton,
1008
.linked button {
1009
&:not(:first-child) { margin-left: 0; }
1010
&:not(:last-child) { margin-right: 0; }
1011
}
1012
spinbutton {
1014
entry,
1015
button { margin: 0; }
1016
}
1017
switch { margin: 2px + $container-padding 2px; }
1019
}
1020
}
1021
// searchbar, location-bar & inline-toolbar
1023
.inline-toolbar {
1024
padding: $container-padding;
1025
border-style: solid;
1026
border-width: 0 1px 1px;
1027
border-color: $frame;
1028
background-color: $base-alt;
1029
}
1030
searchbar > revealer > box,
1032
.location-bar {
1033
padding: $container-padding;
1034
border-style: solid;
1035
border-width: 0 0 1px;
1036
border-color: $divider;
1037
background-color: $background;
1038
background-clip: border-box;
1039
}
1040
searchbar > revealer > box {
1042
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1043
margin: -6px;
1044
padding: $container-padding;
1045
}
1046
/***************
1049
* Header bars *
1050
***************/
1051
%titlebar,
1052
headerbar {
1053
transition: background-color $duration $ease-out, color $duration $ease-out;
1054
min-height: $large-size;
1055
padding: 0 $container-padding;
1056
box-shadow: $shadow-1, inset 0 1px highlight($titlebar);
1057
background-color: $titlebar;
1058
color: $titlebar-text;
1059
&:disabled { color: $titlebar-text-disabled; }
1061
&:backdrop {
1063
color: $titlebar-text-secondary;
1064
&:disabled { color: $titlebar-text-secondary-disabled; }
1066
}
1067
.title {
1069
padding: 0 12px;
1070
font-weight: bold;
1071
}
1072
.subtitle {
1074
padding: 0 12px;
1075
font-size: smaller;
1076
@extend .dim-label;
1078
}
1079
entry {
1081
box-shadow: inset 0 -1px $titlebar-track;
1082
background-color: $titlebar-fill;
1083
color: $titlebar-text;
1084
&:disabled {
1086
box-shadow: inset 0 -1px $titlebar-track-disabled;
1087
background-color: $titlebar-fill;
1088
color: $titlebar-text-disabled;
1089
}
1090
image {
1092
color: $titlebar-text-secondary;
1093
&:hover, &:active { color: $titlebar-text; }
1095
&:disabled { color: $titlebar-text-disabled; }
1097
}
1098
}
1099
.linked:not(.vertical) > entry:not(.flat) { border-radius: $corner-radius $corner-radius 0 0; }
1101
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1103
@extend %button_basic.flat;
1104
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1106
$titlebar-indicator 0%,
1107
transparent 0%)
1108
0 0 0 / 0 0 0px;
1109
color: $titlebar-text-secondary;
1110
&:focus, &:hover, &:active { color: $titlebar-text; }
1112
&:disabled { color: $titlebar-text-secondary-disabled; }
1114
&:checked {
1116
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1117
$titlebar-indicator 100%,
1118
transparent 0%)
1119
0 0 2 / 0 0 2px;
1120
color: $titlebar-text;
1121
&:disabled { color: $titlebar-text-disabled; }
1123
&, &:disabled { background-color: transparent; }
1125
}
1126
&:backdrop {
1128
color: $titlebar-text-disabled;
1129
&:focus, &:hover, &:active { color: $titlebar-text-secondary; }
1131
&:disabled { color: $titlebar-text-secondary-disabled; }
1133
&:checked {
1135
color: $titlebar-text-secondary;
1136
&:disabled { color: $titlebar-text-secondary-disabled; }
1138
}
1139
}
1140
}
1141
button.suggested-action, button.destructive-action {
1143
&:disabled {
1144
background-color: $titlebar-fill;
1145
color: $titlebar-text-disabled;
1146
}
1147
}
1148
&.selection-mode {
1150
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1151
// but let's keep it for backwards compatibility.
1152
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1153
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1154
box-shadow: $shadow-1, inset 0 1px highlight($primary);
1155
background-color: $primary;
1156
color: on($primary);
1157
&:backdrop {
1159
color: on($primary, secondary);
1160
}
1161
.subtitle:link { color: on($primary); }
1163
button:not(.suggested-action):not(.destructive-action) {
1165
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1166
currentColor 0%,
1167
transparent 0%)
1168
0 0 0 / 0 0 0px;
1169
color: on($primary);
1170
&:disabled { color: on($primary, disabled); }
1172
&:checked {
1174
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1175
currentColor 100%,
1176
transparent 0%)
1177
0 0 2 / 0 0 2px;
1178
color: on($primary);
1179
&:disabled { color: on($primary, disabled); }
1181
}
1182
&:backdrop {
1184
color: on($primary, secondary);
1185
&:disabled { color: on($primary, secondary-disabled); }
1187
&:checked {
1189
color: on($primary, secondary);
1190
&:disabled { color: on($primary, secondary-disabled); }
1192
}
1193
}
1194
}
1195
.selection-menu {
1197
padding-left: 16px;
1198
padding-right: 16px;
1199
arrow { -GtkArrow-arrow-scaling: 1; }
1201
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1203
}
1204
}
1205
// squared corners when the window is maximized, tiled, or fullscreen
1207
.tiled &,
1208
.tiled-top &,
1209
.tiled-right &,
1210
.tiled-bottom &,
1211
.tiled-left &,
1212
.maximized &,
1213
.fullscreen & {
1214
border-radius: 0;
1215
box-shadow: $shadow-1;
1216
}
1217
&.default-decoration {
1219
min-height: $small-size;
1220
padding: $container-padding;
1221
box-shadow: inset 0 1px highlight($titlebar);
1222
.tiled &,
1224
.maximized &,
1225
.fullscreen & { box-shadow: none; }
1226
button.titlebutton {
1228
min-height: $small-size;
1229
min-width: $small-size;
1230
margin: 0;
1231
padding: 0;
1232
}
1233
// workaround for non-animatable buttons
1235
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1236
}
1237
.solid-csd & {
1239
&:dir(rtl), &:dir(ltr) { // specificity bump
1240
// margin-left: -2px;
1241
// margin-right: -2px;
1242
// margin-top: -2px;
1243
// border-radius: 0;
1244
box-shadow: $shadow-1; // Remove highlight as window managers should have it
1245
}
1246
}
1247
}
1248
headerbar {
1250
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1251
entry,
1252
spinbutton,
1253
button {
1254
margin-top: $container-padding;
1255
margin-bottom: $container-padding;
1256
}
1257
separator.titlebutton {
1259
margin-top: $large-size / 4;
1260
margin-bottom: $large-size / 4;
1261
background-color: $titlebar-divider;
1262
}
1263
switch {
1265
margin-top: ($large-size - 24px) / 2;
1266
margin-bottom: ($large-size - 24px) / 2;
1267
}
1268
// reset button margins of the spinbutton
1270
spinbutton button {
1271
margin-top: 0;
1272
margin-bottom: 0;
1273
}
1274
// FIXME: This is a hacky workaround.
1276
.entry-tag {
1277
margin-top: 5px;
1278
margin-bottom: 5px;
1279
}
1280
&.titlebar headerbar:not(.titlebar) {
1282
// Drop the background of non-titlebar nested headerbars. This is needed to
1283
// work around headerbar sliding animation issues without refactoring
1284
// Adwaita's support of titlebars and headerbars as it may break
1285
// applications.
1286
// See https://gitlab.gnome.org/GNOME/gtk/issues/1264 for more information.
1287
background-color: transparent;
1288
box-shadow: none;
1289
}
1290
}
1291
.background .titlebar {
1293
border-top-left-radius: $corner-radius;
1294
border-top-right-radius: $corner-radius;
1295
}
1296
.background.tiled .titlebar,
1298
.background.tiled-top .titlebar,
1299
.background.tiled-right .titlebar,
1300
.background.tiled-bottom .titlebar,
1301
.background.tiled-left .titlebar,
1302
.background.maximized .titlebar,
1303
.background.solid-csd .titlebar {
1304
border-top-left-radius: 0;
1305
border-top-right-radius: 0;
1306
}
1307
headerbar { // headerbar border rounding
1309
window separator:first-child + &, // tackles the paned container case
1310
window &:first-child { border-top-left-radius: $corner-radius; }
1311
window &:last-child { border-top-right-radius: $corner-radius; }
1313
window stack & { // tackles the stacked headerbars case
1315
&:first-child, &:last-child {
1316
border-top-left-radius: $corner-radius;
1317
border-top-right-radius: $corner-radius;
1318
}
1319
}
1320
window.tiled &,
1322
window.tiled-top &,
1323
window.tiled-right &,
1324
window.tiled-bottom &,
1325
window.tiled-left &,
1326
window.maximized &,
1327
window.fullscreen &,
1328
window.solid-csd & {
1329
&,
1330
&:first-child,
1331
&:last-child,
1332
&:only-child {
1333
border-top-left-radius: 0;
1334
border-top-right-radius: 0;
1335
}
1336
}
1337
}
1338
.titlebar:not(headerbar) {
1340
window.csd > & {
1341
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1342
padding: 0;
1343
background-color: transparent;
1344
background-image: none;
1345
border-style: none;
1346
box-shadow: none;
1347
}
1348
> separator {
1350
background-color: $titlebar;
1351
background-image: image($divider);
1352
}
1353
@extend %titlebar;
1355
}
1356
// Development versions of apps to use a differently styled headerbar
1358
window.devel headerbar.titlebar:not(.selection-mode) {
1359
}
1360
/************
1363
* Pathbars *
1364
************/
1365
%pathbar_button,
1366
.path-bar button {
1367
padding-left: ($medium-size - 24px) / 2;
1368
padding-right: ($medium-size - 24px) / 2;
1369
label:not(:only-child) {
1371
&:first-child { margin-left: 4px; }
1372
&:last-child { margin-right: 4px; }
1374
}
1375
&.slider-button {
1377
padding-left: (24px - 16px) / 2;
1378
padding-right: (24px - 16px) / 2;
1379
}
1380
:not(headerbar) & {
1382
@extend %flat_button;
1383
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1385
$primary 0%,
1386
transparent 0%)
1387
0 0 0 / 0 0 0px;
1388
border-radius: $corner-radius;
1389
&:checked {
1391
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1392
$primary 100%,
1393
transparent 0%)
1394
0 0 2 / 0 0 2px;
1395
&, &:disabled { background-color: transparent; }
1397
}
1398
}
1399
}
1400
/**************
1403
* Tree Views *
1404
**************/
1405
treeview.view {
1406
@at-root * {
1407
-GtkTreeView-horizontal-separator: 4;
1408
-GtkTreeView-grid-line-width: 1;
1409
-GtkTreeView-grid-line-pattern: '';
1410
-GtkTreeView-tree-line-width: 1;
1411
-GtkTreeView-tree-line-pattern: '';
1412
-GtkTreeView-expander-size: 16;
1413
}
1414
border-left-color: $track; // this is actually the tree lines color,
1416
border-top-color: $divider; // while this is the grid lines color, better then nothing
1417
// FIXME: Avoid transparency background-color being slightly darker
1419
&:selected {
1420
background-color: $base;
1421
background-image: image($overlay-selected);
1422
}
1423
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1425
&:hover, &:selected { border-radius: 0; }
1427
&.separator {
1429
min-height: 1px + 2px * 2;
1430
color: $divider;
1431
}
1432
// FIXME: box-shadow, background-color and background-image are not available here.
1434
&:drop(active) {
1435
border-style: solid none;
1436
border-width: 9999px;
1437
border-color: $overlay-hover;
1438
&.after { border-top-style: none; }
1440
&.before { border-bottom-style: none; }
1442
}
1443
&.expander {
1445
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1446
-gtk-icon-transform: rotate(-90deg);
1447
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1449
&:checked { -gtk-icon-transform: unset; }
1451
color: $text-secondary;
1453
&:hover, &:active { color: $text; }
1455
&:disabled { color: $text-secondary-disabled; }
1457
}
1458
&.progressbar { // progress bar in treeviews
1460
border-bottom: $bar-size solid $primary;
1461
box-shadow: none;
1462
background-color: transparent;
1463
background-image: none;
1464
&:selected:hover { box-shadow: none; }
1466
}
1467
&.trough { // progress bar trough in treeviews
1469
border-bottom: $bar-size solid $track-disabled;
1470
box-shadow: none;
1471
background-color: transparent;
1472
background-image: none;
1473
&:selected:hover { box-shadow: none; }
1475
}
1476
header {
1478
button {
1479
@extend row.activatable;
1480
padding: 2px 6px;
1482
border-style: none solid solid none;
1483
border-width: 1px;
1484
border-color: $divider;
1485
border-radius: 0;
1486
background-clip: border-box;
1487
&:not(:focus):not(:hover):not(:active) { color: $text-secondary; }
1489
&, &:hover, &:active { box-shadow: none; }
1491
&, &:disabled { background-color: $base; }
1493
&:last-child { border-right-style: none; }
1495
}
1496
}
1497
button.dnd,
1499
header.button.dnd { // for treeview-like derive widgets
1500
padding: 2px 6px;
1501
border-style: none solid solid;
1502
border-width: 1px;
1503
border-color: $divider;
1504
border-radius: 0;
1505
box-shadow: none;
1506
background-color: $base;
1507
background-clip: border-box;
1508
color: $primary;
1509
}
1510
acceleditor > label { background-color: $primary; } // see tests/testaccel to test
1512
}
1513
/*********
1516
* Menus *
1517
*********/
1518
menubar,
1519
.menubar {
1520
-GtkWidget-window-dragging: true;
1521
padding: 0;
1522
// box-shadow: inset 0 -1px $divider;
1523
background-color: $titlebar;
1524
color: $titlebar-text;
1525
> menuitem {
1527
transition: $transition;
1528
min-height: 20px;
1529
padding: 4px 8px;
1530
color: $titlebar-text-secondary;
1531
&:hover { // Seems like it :hover even with keyboard focus
1533
transition: none;
1534
background-color: $overlay-checked;
1535
color: $titlebar-text;
1536
}
1537
&:disabled { color: $titlebar-text-secondary-disabled; }
1539
label:disabled { color: inherit; } // to inherit the above color
1541
}
1542
}
1543
// Needed to make the border-radius of menus work
1545
// otherwise the background bleeds out of the menu edges
1546
.background.popup { background-color: transparent; }
1547
menu,
1549
.menu,
1550
.context-menu {
1551
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1552
padding: 4px 0;
1553
box-shadow: inset 0 1px highlight($surface);
1554
background-color: $surface;
1555
border: 1px solid $frame; // adds borders in a non composited env
1556
.csd & {
1558
border: none; // axes borders in a composited env
1559
border-radius: $corner-radius;
1560
}
1561
menuitem {
1563
transition: background-color $duration $ease-out;
1564
min-height: 20px;
1565
min-width: 40px;
1566
padding: 4px 8px;
1567
font: initial;
1568
text-shadow: none;
1569
&:hover {
1571
transition: none;
1572
background-color: $overlay-hover;
1573
}
1574
&:disabled { color: $text-disabled; }
1576
// submenu indicators
1578
arrow {
1579
min-height: 16px;
1580
min-width: 16px;
1581
&:dir(ltr) {
1583
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1584
margin-left: 8px;
1585
}
1586
&:dir(rtl) {
1588
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1589
margin-right: 8px;
1590
}
1591
}
1592
// avoids labels color being overridden, see
1594
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1595
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1596
}
1597
// overflow arrows
1599
> arrow {
1600
min-height: 16px;
1601
min-width: 16px;
1602
padding: 4px;
1603
background-color: $surface;
1604
color: $text-secondary;
1605
&.top {
1607
margin-top: -4px;
1608
border-bottom: 1px solid $divider;
1609
border-radius: $corner-radius $corner-radius 0 0;
1610
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1611
}
1612
&.bottom {
1614
margin-top: 4px * 2;
1615
margin-bottom: -4px * 3;
1616
border-top: 1px solid $divider;
1617
border-radius: 0 0 $corner-radius $corner-radius;
1618
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1619
}
1620
&:hover {
1622
background-image: image($overlay-hover);
1623
color: $text;
1624
}
1625
&:disabled {
1627
border-color: transparent;
1628
background-color: transparent;
1629
color: transparent;
1630
// color: $text-secondary-disabled;
1631
}
1632
}
1633
separator { margin: 4px 0; }
1635
}
1636
menuitem {
1638
accelerator { color: $text-secondary; }
1639
&:disabled accelerator { color: $text-secondary-disabled; }
1641
}
1642
/************
1645
* Popovers *
1646
************/
1647
popover.background {
1648
transition: $transition-shadow;
1649
padding: 2px;
1650
box-shadow: $shadow-2; // TODO: this should really have a highlight
1651
background-color: $surface;
1652
&:backdrop { box-shadow: $shadow-1; }
1654
&, .csd & {
1656
border-style: solid;
1657
border-width: 1px;
1658
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1659
border-radius: $corner-radius + 1px;
1660
}
1661
> stack { margin: -4px; } // remove extra padding from menu style popovers
1663
> toolbar { margin: -2px; }
1665
> list,
1667
> .view,
1668
> toolbar {
1669
border-style: none;
1670
box-shadow: none;
1671
background-color: transparent;
1672
}
1673
// FIXME: Use the popover color instead of transparent as a workaround for .view
1675
list,
1676
.view:not(:selected),
1677
toolbar { background-color: $surface; }
1678
// &.touch-selection,
1680
// &.magnifier,
1681
// &.osd { @extend %osd; }
1682
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1684
&.menu button,
1686
button.model {
1687
@extend %simple_flat_button;
1688
min-height: 32px;
1690
padding: 0 8px;
1691
border-radius: $corner-radius;
1692
&:checked { @extend %selected_items; }
1694
}
1695
separator { margin: 4px 0; }
1697
list separator { margin: 0; }
1699
}
1700
/*************
1702
* Notebooks *
1703
*************/
1704
notebook {
1705
frame > paned > & > header,
1706
&.frame > header { background-color: $base-alt; }
1707
&:focus tab:checked {
1709
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
1710
}
1711
> header {
1713
border-width: 1px;
1714
border-color: $divider;
1715
background-color: $background;
1716
background-clip: border-box;
1717
&.top {
1719
border-bottom-style: solid;
1720
> tabs {
1722
margin-bottom: -1px;
1723
> tab {
1725
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1726
&:checked { border-image-source: linear-gradient(to top, $primary 2px, $frame 2px); }
1728
&.reorderable-page { border-image-width: 0 1px 2px; }
1730
}
1731
}
1732
}
1733
&.bottom {
1735
border-top-style: solid;
1736
> tabs {
1738
margin-top: -1px;
1739
> tab {
1741
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1742
&:checked { border-image-source: linear-gradient(to bottom, $primary 2px, $frame 2px); }
1744
&.reorderable-page { border-image-width: 2px 1px 0; }
1746
}
1747
}
1748
}
1749
&.left {
1751
border-right-style: solid;
1752
> tabs {
1754
margin-right: -1px;
1755
> tab {
1757
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1758
&:checked { border-image-source: linear-gradient(to left, $primary 2px, $frame 2px); }
1760
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1762
}
1763
}
1764
}
1765
&.right {
1767
border-left-style: solid;
1768
> tabs {
1770
margin-left: -1px;
1771
> tab {
1773
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1774
&:checked { border-image-source: linear-gradient(to right, $primary 2px, $frame 2px); }
1776
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1778
}
1779
}
1780
}
1781
&.top > tabs > arrow {
1783
@extend %notebook_vert_arrows;
1784
border-top-style: none;
1786
}
1787
&.bottom > tabs > arrow {
1789
@extend %notebook_vert_arrows;
1790
border-bottom-style: none;
1792
}
1793
@at-root %notebook_vert_arrows {
1795
padding-left: 4px;
1796
padding-right: 4px;
1797
&.down {
1799
margin-left: -8px;
1800
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1801
}
1802
&.up {
1804
margin-right: -8px;
1805
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1806
}
1807
}
1808
&.left > tabs > arrow {
1810
@extend %notebook_horz_arrows;
1811
border-left-style: none;
1813
}
1814
&.right > tabs > arrow {
1816
@extend %notebook_horz_arrows;
1817
border-right-style: none;
1819
}
1820
@at-root %notebook_horz_arrows {
1822
padding-top: 4px;
1823
padding-bottom: 4px;
1824
&.down {
1826
margin-top: -8px;
1827
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1828
}
1829
&.up {
1831
margin-bottom: -8px;
1832
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1833
}
1834
}
1835
> tabs > arrow {
1837
@extend %simple_flat_button;
1838
min-height: 16px;
1840
min-width: 16px;
1841
border-radius: 0;
1842
}
1843
tab {
1845
transition: $transition,
1846
background-size 0ms,
1847
background-image 0ms;
1848
min-height: $small-size;
1849
min-width: $small-size;
1850
padding: $container-padding 12px;
1851
border-width: 1px; // for reorderable tabs
1853
border-color: transparent; //
1854
outline: none;
1856
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
1857
background-repeat: no-repeat;
1858
background-position: center;
1859
background-size: 0% 0%;
1860
background-clip: border-box;
1861
color: $text-secondary;
1863
font-weight: 500;
1864
&:hover {
1866
background-color: $overlay-hover;
1867
color: $text;
1868
}
1869
&:disabled { color: $text-secondary-disabled; }
1871
&:checked {
1873
transition: $transition,
1874
background-size $ripple-fade-in-duration $ease-out,
1875
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
1876
background-color: transparent;
1877
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
1878
background-size: 1000% 1000%;
1879
background-clip: padding-box;
1880
color: $text;
1881
&:disabled { color: $text-disabled; }
1883
&.reorderable-page {
1885
border-color: $frame;
1886
background-color: $base;
1887
}
1888
}
1889
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
1891
> box {
1892
transition: $transition;
1893
margin: -$container-padding -12px;
1894
padding: $container-padding 12px;
1895
&:drop(active) { @extend tab:hover; }
1897
}
1898
// colors the button like the label, overridden otherwise
1900
button.flat {
1901
@extend %small_button;
1902
&:last-child {
1904
margin-left: $container-padding;
1905
margin-right: $container-padding - 12px;
1906
}
1907
&:first-child {
1909
margin-left: $container-padding - 12px;
1910
margin-right: $container-padding;
1911
}
1912
}
1913
}
1914
&.top,
1916
&.bottom {
1917
tabs {
1918
padding-left: 8px;
1919
padding-right: 8px;
1920
&:not(:only-child) {
1922
&:first-child { margin-left: 0; }
1923
&:last-child { margin-right: 0; }
1925
}
1926
tab.reorderable-page { border-style: none solid; }
1928
}
1929
}
1930
&.left,
1932
&.right {
1933
tabs {
1934
padding-top: 8px;
1935
padding-bottom: 8px;
1936
&:not(:only-child) {
1938
&:first-child { margin-top: 0; }
1939
&:last-child { margin-bottom: 0; }
1941
}
1942
tab.reorderable-page { border-style: solid none; }
1944
}
1945
}
1946
}
1947
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1949
background-color: $base;
1950
}
1951
}
1952
/**************
1955
* Scrollbars *
1956
**************/
1957
scrollbar {
1958
$_slider_min_length: 24px;
1959
// disable steppers
1961
@at-root * {
1962
-GtkScrollbar-has-backward-stepper: false;
1963
-GtkScrollbar-has-forward-stepper: false;
1964
}
1965
transition: $transition;
1967
background-color: $base;
1968
background-clip: $background-clip-extra;
1969
// scrollbar border
1971
&.top { border-bottom: 1px solid $divider; }
1972
&.bottom { border-top: 1px solid $divider; }
1973
&.left { border-right: 1px solid $divider; }
1974
&.right { border-left: 1px solid $divider; }
1975
// slider
1977
slider {
1978
transition: $transition, margin 0ms, border-width 0ms;
1979
min-width: 8px;
1980
min-height: 8px;
1981
border: 4px solid transparent;
1982
border-radius: $circular-radius;
1983
background-clip: padding-box;
1984
background-color: $text-disabled;
1985
&:hover { background-color: $text-secondary; }
1987
&:active { background-color: $text; }
1989
&:disabled { background-color: $text-secondary-disabled; }
1991
}
1992
&.fine-tune {
1994
slider {
1995
transition: $transition, margin 0ms, border-width 0ms, min-width 0ms, min-height 0ms;
1996
min-width: 4px;
1997
min-height: 4px;
1998
}
1999
&.horizontal slider { margin: 2px 0; }
2001
&.vertical slider { margin: 0 2px; }
2003
}
2004
&.overlay-indicator {
2006
&:not(.dragging):not(.hovering) {
2007
border-color: transparent;
2008
background-color: transparent;
2009
slider {
2011
min-width: 4px;
2012
min-height: 4px;
2013
margin: 4px - 1px;
2014
border: 1px solid rgba($base, 0.3);
2015
}
2016
button {
2018
min-width: 4px;
2019
min-height: 4px;
2020
margin: 4px - 1px;
2021
border: 1px solid rgba($base, 0.3);
2022
border-radius: $circular-radius;
2023
background-color: $text-disabled;
2024
background-clip: padding-box;
2025
-gtk-icon-source: none;
2026
&:disabled { background-color: $text-secondary-disabled; }
2028
}
2029
&.horizontal {
2031
slider { min-width: $_slider_min_length; }
2032
button { min-width: 8px; }
2034
}
2035
&.vertical {
2037
slider { min-height: $_slider_min_length; }
2038
button { min-height: 8px; }
2040
}
2041
}
2042
&.dragging,
2044
&.hovering { background-color: rgba($base, 0.9); }
2045
}
2046
&.horizontal slider { min-width: $_slider_min_length; }
2048
&.vertical slider { min-height: $_slider_min_length; }
2050
// button styling
2052
button {
2053
@extend %simple_flat_button;
2054
min-width: 16px;
2056
min-height: 16px;
2057
padding: 0;
2058
border-radius: 0;
2059
}
2060
// button icons
2062
&.vertical {
2063
button {
2064
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2065
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2067
}
2068
}
2069
&.horizontal {
2071
button {
2072
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2073
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2075
}
2076
}
2077
}
2078
/**********
2081
* Switch *
2082
**********/
2083
switch {
2084
transition: all $duration $ease-out;
2085
margin: $container-padding 0;
2086
padding: 0 2px;
2087
border: 5px solid transparent;
2088
border-radius: $circular-radius;
2089
background-color: $track;
2090
background-clip: padding-box;
2091
font-size: 0;
2092
&:checked { background-color: rgba($primary, 0.5); }
2094
&:disabled { opacity: 0.5; }
2096
// hide on/off icons for >=3.24.5
2098
image {
2099
margin: -8px;
2100
-gtk-icon-transform: scale(0);
2101
}
2102
slider {
2104
transition: all $duration $ease-out;
2105
min-width: 20px;
2106
min-height: 20px;
2107
margin: -3px -2px;
2108
border-radius: $circular-radius;
2109
outline: none;
2110
box-shadow: 0 0 0 10px transparent, $shadow-1;
2111
background-color: $surface;
2112
}
2113
&:focus slider { box-shadow: 0 0 0 10px $overlay-focus, $shadow-1; }
2115
&:hover slider { box-shadow: 0 0 0 10px $overlay-hover, $shadow-1; }
2117
&:focus:hover slider { box-shadow: 0 0 0 10px $overlay-focus-hover, $shadow-1; }
2119
&:checked slider {
2121
background-color: $primary;
2122
color: $primary;
2123
}
2124
row:selected & {
2126
}
2127
}
2128
/*************************
2131
* Check and Radio items *
2132
*************************/
2133
// draw regular check and radio items using our PNG assets
2134
// all assets are rendered from assets.svg. never add pngs directly
2135
// selection-mode
2137
.view.content-view.check:not(list),
2138
.content-view .tile check:not(list) {
2139
min-height: 40px;
2140
min-width: 40px;
2141
margin: 0;
2142
padding: 0;
2143
box-shadow: none;
2144
background-color: transparent;
2145
background-image: none;
2146
-gtk-icon-shadow: $shadow-1;
2147
&:hover, &:active { -gtk-icon-shadow: $shadow-2; }
2149
@each $s, $as in ('', '-unchecked'),
2151
(':checked', '-checked') {
2152
&#{$s} {
2153
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}.png"),
2154
url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}@2.png"));
2155
}
2156
}
2157
}
2158
checkbutton,
2160
radiobutton {
2161
outline: none;
2162
}
2163
checkbutton.text-button,
2165
radiobutton.text-button {
2166
// this is for a nice focus on check and radios text
2167
padding: 2px;
2168
label:not(:only-child) { margin: 0 4px; }
2170
}
2171
$check_radio_size: 40px;
2173
check,
2175
radio {
2176
min-height: 24px;
2177
min-width: 24px;
2178
margin: -($check_radio_size - 24px) / 2;
2179
padding: ($check_radio_size - 24px) / 2;
2180
@extend %simple_flat_button;
2182
@extend %circular_button;
2184
&:checked, &:indeterminate {
2186
color: $primary;
2187
&:disabled { color: $text-secondary-disabled; }
2189
}
2190
// &:only-child { margin: -12px; }
2192
popover modelbutton.flat & {
2194
&, &:focus, &:hover, &:focus:hover, &:active, &:disabled {
2195
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2196
box-shadow: none;
2197
background-image: none;
2198
}
2199
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2201
&.left:dir(rtl) {
2203
margin-left: -12px;
2204
margin-right: -4px;
2205
}
2206
&.right:dir(ltr) {
2208
margin-left: -4px;
2209
margin-right: -12px;
2210
}
2211
}
2212
menu menuitem & {
2214
transition: none;
2215
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2216
padding: 0;
2217
&:dir(ltr) { margin-right: 8px; }
2219
&:dir(rtl) { margin-left: 8px; }
2221
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2223
&, &:hover, &:disabled {
2225
box-shadow: none;
2226
// color: inherit;
2227
}
2228
}
2229
}
2230
%check,
2232
check {
2233
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2234
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2236
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2238
}
2239
%radio,
2241
radio {
2242
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2243
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2245
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2247
border-image-slice: $check_radio_size / 2px;
2249
border-image-width: $check_radio_size / 2;
2250
$radio_indicator: 10px / $check_radio_size / 2;
2252
& {
2254
border-image-source: -gtk-gradient(radial,
2255
center center, 0,
2256
center center, 0.001,
2257
to($primary),
2258
to(transparent));
2259
}
2260
&:checked:not(:indeterminate) {
2262
border-image-source: -gtk-gradient(radial,
2263
center center, 0,
2264
center center, $radio_indicator,
2265
to($primary),
2266
to(transparent));
2267
}
2268
&:checked:not(:indeterminate):disabled {
2270
border-image-source: -gtk-gradient(radial,
2271
center center, 0,
2272
center center, $radio_indicator,
2273
to($text-secondary-disabled),
2274
to(transparent));
2275
}
2276
}
2277
%small_check,
2279
menu menuitem check {
2280
& {
2281
min-height: 16px;
2282
min-width: 16px;
2283
border-radius: $corner-radius;
2284
-gtk-outline-radius: $corner-radius;
2285
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2286
}
2287
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2289
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2291
}
2292
%small_radio,
2294
menu menuitem radio {
2295
& {
2296
min-height: 16px;
2297
min-width: 16px;
2298
border-image: none;
2299
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2300
}
2301
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2303
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2305
}
2306
// ANIMATION:
2308
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2309
// the transformation is set on the active state and it get reset on the checked state.
2310
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2311
treeview.view check,
2313
treeview.view radio {
2314
padding: 0;
2315
&:hover, &:selected {
2317
box-shadow: none;
2318
background-color: transparent;
2319
}
2320
& {
2322
color: $text-secondary;
2323
&:hover, &:active { color: $text; }
2325
&:disabled { color: $text-secondary-disabled; }
2327
&:checked, &:indeterminate { color: $primary; }
2329
&:checked:disabled, &:indeterminate:disabled { color: $text-secondary-disabled; }
2331
}
2332
}
2333
treeview.view radio:checked {
2335
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2336
border-image: none;
2337
}
2338
/************
2341
* GtkScale *
2342
************/
2343
scale {
2344
// sizing
2345
$_marks_length: 8px;
2346
$_marks_distance: 7px;
2347
$trough_size: 2px;
2349
$finetune_trough_size: 4px;
2350
$slider_size: 32px;
2352
$slider_margin: -($slider_size - $trough_size) / 2;
2354
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2355
$color_slider_margin: -($slider_size) * 3 / 4;
2357
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2358
min-height: $trough_size;
2360
min-width: $trough_size;
2361
&.horizontal { padding: ($medium-size - $trough_size) / 2 12px; }
2363
&.vertical { padding: 12px ($medium-size - $trough_size) / 2; }
2365
// the slider is inside the trough, so to have make it bigger there's a negative margin
2367
slider {
2368
min-height: $slider_size;
2369
min-width: $slider_size;
2370
margin: $slider_margin;
2371
}
2372
// click-and-hold the slider to activate
2374
&.fine-tune {
2375
&.horizontal {
2376
min-height: $finetune_trough_size;
2377
padding-top: ($medium-size - $finetune_trough_size) / 2;
2378
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2379
}
2380
&.vertical {
2382
min-width: $finetune_trough_size;
2383
padding-left: ($medium-size - $finetune_trough_size) / 2;
2384
padding-right: ($medium-size - $finetune_trough_size) / 2;
2385
}
2386
// to make the trough grow in fine-tune mode
2388
slider { margin: $finetune_slider_margin; }
2389
}
2390
// the backing bit
2392
trough {
2393
transition: background-color $duration $ease-out;
2394
outline: none;
2395
background-color: $track;
2396
&:disabled { background-color: $track-disabled; }
2398
}
2399
// the colored part of the backing bit
2401
highlight {
2402
transition: background-color $duration $ease-out;
2403
background-color: $primary;
2404
&:disabled { background-color: transparent; }
2406
}
2407
// this is another differently styled part of the backing bit, the most relevant use case is for example
2409
// in media player to indicate how much video stream as been cached
2410
fill {
2411
transition: background-color $duration $ease-out;
2412
background-color: $track;
2413
&:disabled { background-color: transparent; }
2415
}
2416
slider {
2418
transition: background-color $duration $ease-out,
2419
background-size $ripple-fade-out-duration $ease-out,
2420
background-image $ripple-fade-out-opacity-duration $ease-out;
2421
background-repeat: no-repeat;
2422
background-position: center;
2423
background-size: auto, 1000% 1000%;
2424
border-radius: 50%;
2425
color: $primary;
2426
@each $s, $as in ('', ''),
2428
(':disabled', '-disabled') {
2429
&#{$s} {
2430
$_url: 'assets/scale-slider#{$as}#{$asset-suffix}';
2431
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2433
radial-gradient(circle, transparent 10%, transparent 0%);
2434
}
2435
}
2436
&:focus { background-color: $overlay-focus; }
2438
&:hover { background-color: $overlay-hover; }
2440
&:focus:hover { background-color: $overlay-focus-hover; }
2442
&:active {
2444
$_url: 'assets/scale-slider#{$asset-suffix}';
2445
transition: background-color $duration $ease-out,
2447
background-size 0ms,
2448
background-image 0ms;
2449
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2450
background-color: $overlay-hover;
2451
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2452
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2453
background-size: auto, 0% 0%;
2454
}
2455
}
2456
marks label,
2458
value { color: $text-secondary; }
2459
marks {
2461
color: $track;
2462
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2464
(bottom, bottom, top),
2465
(left, left, right),
2466
(right, right, left) {
2467
&.#{$marks_class} {
2468
margin-#{$marks_margin}: $_marks_distance;
2469
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2470
}
2471
}
2472
}
2473
&.fine-tune marks {
2475
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2476
(bottom, bottom, top),
2477
(left, left, right),
2478
(right, right, left) {
2479
&.#{$marks_class} {
2480
margin-#{$marks_margin}: $_marks_distance - 1px;
2481
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2482
}
2483
}
2484
}
2485
&.horizontal {
2487
indicator {
2488
min-height: $_marks_length;
2489
min-width: 1px;
2490
}
2491
}
2492
&.vertical {
2494
indicator {
2495
min-height: 1px;
2496
min-width: $_marks_length;
2497
}
2498
}
2499
// *WARNING* scale with marks madness following
2501
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2503
('vertical', 'vert') {
2504
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2505
('marks-after', 'marks-after:not(.marks-before)') {
2506
&.#{$dir_class}.#{$marks_class} {
2507
slider {
2508
@each $state, $state_infix in ('', ''),
2509
(':disabled', '-disabled') {
2510
&#{$state} {
2511
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2512
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2514
radial-gradient(circle, transparent 10%, transparent 0%);
2515
}
2516
}
2517
&:active {
2519
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$asset-suffix}';
2520
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2522
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2523
}
2524
}
2525
}
2526
}
2527
}
2528
&.color {
2530
min-height: 0;
2531
min-width: 0;
2532
&.horizontal {
2534
padding: 0 0 12px 0;
2535
slider {
2537
&:dir(ltr), &:dir(rtl) { // specificity bump
2538
margin-bottom: $color_slider_margin;
2539
margin-top: $color_marks_slider_margin;
2540
}
2541
}
2542
}
2543
&.vertical {
2545
&:dir(ltr) {
2546
padding: 0 0 0 12px;
2547
slider {
2549
margin-left: $color_slider_margin;
2550
margin-right: $color_marks_slider_margin;
2551
}
2552
}
2553
&:dir(rtl) {
2555
padding: 0 12px 0 0;
2556
slider {
2558
margin-right: $color_slider_margin;
2559
margin-left: $color_marks_slider_margin;
2560
}
2561
}
2562
}
2563
}
2564
}
2565
/*****************
2568
* Progress bars *
2569
*****************/
2570
progressbar {
2571
// sizing
2572
&.horizontal {
2573
trough,
2574
progress { min-height: $bar-size; }
2575
}
2576
&.vertical {
2578
trough,
2579
progress { min-width: $bar-size; }
2580
}
2581
// FIXME: insensitive state missing and some other state should be set probably
2583
color: $text-secondary;
2584
font-size: smaller;
2585
trough { background-color: $track-disabled; }
2587
progress { background-color: $primary; }
2589
&.osd { // progressbar.osd used for epiphany page loading progress
2591
// min-width: $bar-size;
2592
// min-height: $bar-size;
2593
// background-color: transparent;
2594
// trough { background-color: transparent; }
2596
// progress { background-color: $primary; }
2598
}
2599
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2601
}
2602
/*************
2605
* Level Bar *
2606
*************/
2607
levelbar {
2608
&.horizontal {
2609
block { min-height: $bar-size; }
2610
&.discrete block {
2612
min-width: $medium-size;
2613
&:not(:last-child) { margin-right: 2px; }
2615
}
2616
}
2617
&.vertical {
2619
block { min-width: $bar-size; }
2620
&.discrete block {
2622
min-height: $medium-size;
2623
&:not(:last-child) { margin-bottom: 2px; }
2625
}
2626
}
2627
// imitate the entry style
2629
trough {
2630
// padding: 2px;
2631
// border-radius: $corner-radius;
2632
// box-shadow: $shadow-1;
2633
// background-color: $base;
2634
// &:disabled { background-color: $base-alt; }
2636
}
2637
block {
2639
&.low { background-color: $warning; }
2640
&.high,
2642
&:not(.empty) { background-color: $primary; }
2643
&.full { background-color: $success; }
2645
&.empty { background-color: $track-disabled; }
2647
}
2648
}
2649
/****************
2652
* Print dialog *
2653
*****************/
2654
printdialog {
2655
paper {
2656
padding: 0;
2657
border: 1px solid $frame;
2658
background-color: $base;
2659
color: $text;
2660
}
2661
.dialog-action-box { margin: 12px; }
2663
}
2664
/**********
2667
* Frames *
2668
**********/
2669
frame > border,
2670
.frame {
2671
margin: 0;
2672
padding: 0;
2673
border: 1px solid $frame;
2674
border-radius: 0;
2675
box-shadow: none;
2676
&.flat { border-style: none; }
2678
}
2679
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2681
actionbar > revealer > box {
2683
padding: $container-padding;
2684
border-top: 1px solid $divider;
2685
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2687
}
2688
scrolledwindow {
2690
viewport.frame { // avoid double borders when viewport inside scrolled window
2691
border-style: none;
2692
}
2693
// This is used when content is touch-dragged past boundaries.
2695
// draws a box on top of the content, the size changes programmatically.
2696
@at-root overshoot {
2697
&.top { @include overshoot(top); }
2698
&.bottom { @include overshoot(bottom); }
2700
&.left { @include overshoot(left); }
2702
&.right { @include overshoot(right); }
2704
}
2705
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2707
@at-root undershoot {
2708
&.top { @include undershoot(top); }
2709
&.bottom { @include undershoot(bottom); }
2711
&.left { @include undershoot(left); }
2713
&.right { @include undershoot(right); }
2715
}
2716
@at-root junction { // the small square between two scrollbars
2718
border-style: solid none none solid;
2719
border-width: 1px;
2720
border-color: $divider;
2721
background-color: $base;
2722
&:dir(rtl) { border-style: solid solid none none; }
2724
}
2725
}
2726
// vbox and hbox separators
2728
separator {
2729
min-width: 1px;
2730
min-height: 1px;
2731
background-color: $divider;
2732
}
2733
%hide_separators {
2735
min-width: 0;
2736
min-height: 0;
2737
background-color: transparent;
2738
}
2739
/*********
2742
* Lists *
2743
*********/
2744
list {
2745
border-color: $frame;
2746
background-color: $base;
2747
row { padding: 2px; }
2749
}
2750
row {
2752
&.activatable {
2753
transition: $transition,
2754
background-size $ripple-fade-out-duration $ease-out,
2755
background-image $ripple-fade-out-opacity-duration $ease-out;
2756
outline: none;
2757
box-shadow: inset 0 0 0 9999px transparent;
2758
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2759
background-repeat: no-repeat;
2760
background-position: center;
2761
background-size: 1000% 1000%;
2762
&:focus {
2764
box-shadow: inset 0 0 0 9999px $overlay-focus;
2765
}
2766
&:hover {
2768
transition: $transition,
2769
box-shadow 0ms,
2770
background-size $ripple-fade-out-duration $ease-out,
2771
background-image $ripple-fade-out-opacity-duration $ease-out;
2772
box-shadow: inset 0 0 0 9999px $overlay-hover;
2773
}
2774
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2776
&:active {
2777
transition: $transition,
2778
background-size 0ms,
2779
background-image 0ms;
2780
animation: ripple $ripple-fade-in-duration $ease-out forwards;
2781
box-shadow: inset 0 0 0 9999px $overlay-hover;
2782
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
2783
background-size: 0% 0%;
2784
}
2785
}
2786
&:selected {
2788
@extend %selected_items;
2789
color: $primary; // for overlays
2790
image,
2792
label { color: $text; }
2793
button image,
2795
button label { color: inherit; }
2796
&:disabled {
2798
image,
2799
label { color: $text-disabled; }
2800
}
2801
}
2802
}
2803
/*********************
2806
* App Notifications *
2807
*********************/
2808
.app-notification {
2809
// @extend %osd;
2810
@extend toolbar.osd;
2812
margin: 8px;
2814
button { @extend %button_basic.flat; }
2816
&.frame,
2818
border { border-style: none; }
2819
}
2820
/*************
2823
* Expanders *
2824
*************/
2825
expander {
2826
title > arrow {
2827
transition: all $duration $ease-out;
2828
min-width: 16px;
2829
min-height: 16px;
2830
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2831
-gtk-icon-transform: rotate(-90deg);
2832
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2834
&:checked { -gtk-icon-transform: unset; }
2836
color: $text-secondary;
2838
&:hover, &:active { color: $text; }
2840
&:disabled { color: $text-secondary-disabled; }
2842
}
2843
}
2844
/************
2847
* Calendar *
2848
************/
2849
calendar {
2850
padding: 1px;
2851
border: 1px solid $frame;
2852
color: $text;
2853
&:disabled { color: $text-disabled; }
2855
&:selected {
2857
@extend %selected_items;
2858
border-radius: $corner-radius + 1px;
2860
}
2861
&.header {
2863
border-style: none none solid;
2864
border-color: $divider;
2865
border-radius: 0;
2866
}
2867
&.button { @extend %simple_flat_button; }
2869
&.highlight {
2871
color: $text-secondary;
2872
font-weight: 500;
2873
}
2874
&:indeterminate { color: $text-secondary-disabled; }
2876
}
2877
/***********
2880
* Dialogs *
2881
***********/
2882
messagedialog { // Message Dialog styling
2883
&.background { background-color: $surface; }
2884
.titlebar {
2886
min-height: $small-size;
2887
border-style: none;
2888
box-shadow: inset 0 1px highlight($surface);
2889
background-color: $surface;
2890
color: $text;
2891
&:backdrop { color: $text-secondary; }
2893
}
2894
&.csd { // rounded bottom border styling for csd version
2896
&.background {
2897
// bigger radius for better antialiasing
2898
border-bottom-left-radius: $corner-radius;
2899
border-bottom-right-radius: $corner-radius;
2900
}
2901
.dialog-action-area {
2903
margin-top: -$container-padding;
2904
padding: $container-padding;
2905
button {
2907
@extend %simple_flat_button;
2908
border-radius: $corner-radius;
2909
&:not(:last-child) { margin-right: $container-padding; }
2911
&:not(:disabled) { color: $primary; }
2913
// &.suggested-action:not(:disabled) { color: $suggested; }
2915
&.destructive-action:not(:disabled) { color: $destructive; }
2917
}
2918
}
2919
}
2920
}
2921
filechooser {
2923
.dialog-action-box { border-top: 1px solid $divider; }
2924
#pathbarbox {
2926
border-bottom: 1px solid $divider;
2927
background-color: $background;
2928
> stack > box > button { // The new folder button
2930
@extend %button_basic.flat;
2931
@extend %circular_button;
2932
}
2933
}
2934
}
2935
filechooserbutton:drop(active) {
2937
box-shadow: none;
2938
}
2939
/***********
2942
* Sidebar *
2943
***********/
2944
.sidebar {
2945
border-style: none;
2946
background-color: $base-alt;
2947
&:not(separator) {
2949
@at-root %sidebar_left,
2950
&:dir(ltr),
2951
&.left,
2952
&.left:dir(rtl) {
2953
border-right: 1px solid $divider;
2954
border-left-style: none;
2955
}
2956
@at-root %sidebar_right,
2958
&:dir(rtl),
2959
&.right {
2960
border-left: 1px solid $divider;
2961
border-right-style: none;
2962
}
2963
}
2964
list { background-color: transparent; }
2966
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2968
}
2969
stacksidebar {
2971
&.sidebar {
2972
&:dir(ltr),
2973
&.left,
2974
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2975
&:dir(rtl),
2977
&.right { list { @extend %sidebar_right; }}
2978
}
2979
row {
2981
padding: 10px 4px;
2982
> label {
2984
padding-left: 6px;
2985
padding-right: 6px;
2986
}
2987
&.needs-attention > label { @extend %needs-attention; }
2989
}
2990
}
2991
separator.sidebar {
2993
background-color: $divider;
2994
&.selection-mode,
2996
.selection-mode & {
2997
// background-color: $divider;
2998
}
2999
}
3000
/****************
3003
* File chooser *
3004
****************/
3005
// dim the sidebar icons, see bug #786613 for details on this oddity
3006
row {
3007
image.sidebar-icon { color: $text-secondary; }
3008
}
3009
placessidebar {
3011
> viewport.frame { border-style: none; }
3012
list { padding: (4px - 3px) 0 4px; }
3014
row {
3016
// Needs overriding of the GtkListBoxRow padding
3017
min-height: 32px;
3018
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3019
padding: 0;
3020
border-radius: $corner-radius;
3021
// Using margins/padding directly in the SidebarRow
3023
// will make the animation of the new bookmark row jump
3024
> revealer { padding: 0 8px; }
3025
&:selected { font-weight: 500; }
3027
&:disabled { color: $text-disabled; }
3029
image.sidebar-icon {
3031
&:dir(ltr) { padding-right: 8px; }
3032
&:dir(rtl) { padding-left: 8px; }
3033
}
3034
label.sidebar-label {
3036
&:dir(ltr) { padding-right: 2px; }
3037
&:dir(rtl) { padding-left: 2px; }
3038
}
3039
&:selected image.sidebar-icon,
3041
&:selected label.sidebar-label { color: inherit; }
3042
@at-root button.sidebar-button {
3044
@extend %simple_flat_button;
3045
@extend %small_button;
3046
}
3047
&.sidebar-placeholder-row { background-color: $overlay-hover; }
3049
&.sidebar-new-bookmark-row { color: $primary; }
3051
&:drop(active) { @extend row:hover; }
3053
}
3054
}
3055
placesview {
3057
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3058
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3060
// this selects the "connect to server" label
3062
> actionbar > revealer > box > label {
3063
padding-left: 8px;
3064
padding-right: 8px;
3065
}
3066
}
3067
/*********
3070
* Paned *
3071
*********/
3072
paned {
3073
> separator {
3074
min-width: 1px;
3075
min-height: 1px;
3076
-gtk-icon-source: none; // defeats the ugly default handle decoration
3077
border-style: none; // just to be sure
3078
background-color: transparent;
3079
// workaround, using background istead of a border since the border will get rendered twice (?)
3080
background-image: image($divider);
3081
background-size: 1px 1px;
3082
background-clip: content-box; // avoids borders image being rendered twice (?)
3083
&.wide {
3085
min-width: 6px;
3086
min-height: 6px;
3087
background-color: $background;
3088
background-image: image($divider), image($divider);
3089
background-size: 1px 1px, 1px 1px;
3090
}
3091
}
3092
&.horizontal > separator {
3094
background-repeat: repeat-y;
3095
&:dir(ltr) {
3097
margin: 0 -8px 0 0;
3098
padding: 0 8px 0 0;
3099
background-position: left;
3100
}
3101
&:dir(rtl) {
3103
margin: 0 0 0 -8px;
3104
padding: 0 0 0 8px;
3105
background-position: right;
3106
}
3107
&.wide {
3109
margin: 0;
3110
padding: 0;
3111
background-repeat: repeat-y, repeat-y;
3112
background-position: left, right;
3113
}
3114
}
3115
&.vertical > separator {
3117
margin: 0 0 -8px 0;
3118
padding: 0 0 8px 0;
3119
background-repeat: repeat-x;
3120
background-position: top;
3121
&.wide {
3123
margin: 0;
3124
padding: 0;
3125
background-repeat: repeat-x, repeat-x;
3126
background-position: bottom, top;
3127
}
3128
}
3129
}
3130
/**************
3133
* GtkInfoBar *
3134
**************/
3135
infobar {
3136
border-style: none;
3137
&.info,
3139
&.question {
3140
border-bottom: 1px solid $divider;
3141
background-color: $base;
3142
button {
3144
@extend %simple_flat_button;
3145
&.text-button {
3147
padding-left: 8px;
3148
padding-right: 8px;
3149
&:not(:disabled) { color: $primary; }
3151
}
3152
}
3153
}
3154
&.warning {
3156
background-color: $warning;
3157
color: on($warning);
3158
// button { @extend %button_selected; }
3160
selection {}
3162
*:link { color: on($warning); }
3164
}
3165
&.error {
3167
background-color: $error;
3168
color: on($error);
3169
button { @extend %button_selected; }
3171
selection {}
3173
*:link { color: on($error); }
3175
}
3176
}
3177
/************
3180
* Tooltips *
3181
************/
3182
tooltip {
3183
&.background {
3184
// background-color needs to be set this way otherwise it gets drawn twice
3185
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3186
background-color: $tooltip;
3187
color: on($tooltip);
3188
}
3189
// padding: 4px; /* not working */
3191
border-radius: $corner-radius;
3192
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3193
&:not(.csd):not(.unity-csd) {
3195
// border: 1px solid $frame;
3196
// border-radius: $corner-radius + 1px;
3197
// background-clip: $background-clip-extra;
3198
}
3199
// FIXME: we need a border or tooltips vanish on black background.
3201
decoration { background-color: transparent; }
3202
> box {
3204
margin: -6px; // Remove hard-coded 6px padding
3205
min-height: 32px - 4px * 2;
3206
padding: 4px 8px;
3207
}
3208
* {
3210
// workaround for Eclipse.
3211
// do not include any declaration here.
3212
// padding: 0;
3213
// background-color: transparent;
3214
// color: inherit;
3215
}
3216
}
3217
/*****************
3220
* Color Chooser *
3221
*****************/
3222
colorswatch {
3223
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3224
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3225
// applied to the overlay box.
3226
// base color corners rounding
3228
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3229
// sports a bigger radius.
3230
// nth-child is needed by the custom color strip.
3231
&.top {
3233
border-top-left-radius: $corner-radius + 0.5px;
3234
border-top-right-radius: $corner-radius + 0.5px;
3235
overlay {
3237
border-top-left-radius: $corner-radius;
3238
border-top-right-radius: $corner-radius;
3239
}
3240
}
3241
&.bottom {
3243
border-bottom-left-radius: $corner-radius + 0.5px;
3244
border-bottom-right-radius: $corner-radius + 0.5px;
3245
overlay {
3247
border-bottom-left-radius: $corner-radius;
3248
border-bottom-right-radius: $corner-radius;
3249
}
3250
}
3251
&.left,
3253
&:first-child:not(.top) {
3254
border-top-left-radius: $corner-radius + 0.5px;
3255
border-bottom-left-radius: $corner-radius + 0.5px;
3256
overlay {
3258
border-top-left-radius: $corner-radius;
3259
border-bottom-left-radius: $corner-radius;
3260
}
3261
}
3262
&.right,
3264
&:last-child:not(.bottom) {
3265
border-top-right-radius: $corner-radius + 0.5px;
3266
border-bottom-right-radius: $corner-radius + 0.5px;
3267
overlay {
3269
border-top-right-radius: $corner-radius;
3270
border-bottom-right-radius: $corner-radius;
3271
}
3272
}
3273
&.dark { color: on(dark); }
3275
&.light { color: on(light); }
3277
overlay {
3279
transition: $transition-shadow;
3280
box-shadow: $shadow-1;
3281
&:hover { box-shadow: $shadow-2; }
3283
&:drop(active) { box-shadow: $shadow-2; }
3285
}
3286
&#add-color-button {
3288
border-radius: $corner-radius $corner-radius 0 0;
3289
color: on(dark);
3290
&:only-child { border-radius: $corner-radius; }
3292
overlay {
3294
background-image: linear-gradient(to right,
3295
$red 25%,
3296
$yellow 25%, $yellow 50%,
3297
$green 50%, $green 75%,
3298
$blue 75%);
3299
}
3300
}
3301
&:disabled {
3303
opacity: 0.5;
3304
overlay { box-shadow: none; }
3306
}
3307
row:selected & {
3309
}
3310
&#editor-color-sample {
3312
border-radius: $corner-radius + 0.5px;
3313
overlay { border-radius: $corner-radius; }
3315
// overlay:hover { box-shadow: $shadow-1; }
3317
}
3318
}
3319
// colorscale popup
3321
colorchooser .popover.osd {
3322
transition: $transition-shadow;
3323
border-radius: $corner-radius;
3324
box-shadow: $shadow-2, inset 0 1px highlight($surface);
3325
background-color: $surface;
3326
&:backdrop { box-shadow: $shadow-1, inset 0 1px highlight($surface); }
3328
}
3329
/********
3332
* Misc *
3333
********/
3334
// content view (grid/list)
3335
.content-view {
3336
background-color: $background;
3337
// &:hover { -gtk-icon-effect: highlight; }
3339
rubberband, .rubberband { @extend rubberband; }
3341
}
3342
.scale-popup {
3344
// .osd & { @extend %osd; }
3345
.osd & button.flat { // FIXME: quick hack, redo properly
3347
}
3348
button { // +/- buttons on GtkVolumeButton popup
3350
}
3351
}
3352
/**********************
3355
* Window Decorations *
3356
**********************/
3357
decoration {
3358
transition: $transition-shadow;
3359
border-radius: $corner-radius $corner-radius 0 0;
3360
box-shadow: $shadow-4, 0 16px 16px transparent;
3361
// FIXME rationalize shadows
3363
// this is used for the resize cursor area
3365
margin: 8px;
3366
&:backdrop {
3368
// the transparent shadow here is to enforce that the shadow extents don't
3369
// change when we go to backdrop, to prevent jumping windows.
3370
// The biggest shadow should be in the same order then in the active state
3371
// or the jumping will happen during the transition.
3372
box-shadow: $shadow-2, 0 16px 16px transparent;
3373
}
3374
.maximized &,
3376
.fullscreen &,
3377
.tiled &,
3378
.tiled-top &,
3379
.tiled-right &,
3380
.tiled-bottom &,
3381
.tiled-left & { border-radius: 0; }
3382
.popup & { box-shadow: none; }
3384
// server-side decorations as used by mutter
3386
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3387
.csd.popup & {
3389
border-radius: $corner-radius;
3390
box-shadow: $shadow-2;
3391
}
3392
tooltip.csd & {
3394
border-radius: $corner-radius;
3395
box-shadow: none;
3396
}
3397
messagedialog.csd & {
3399
border-radius: $corner-radius;
3400
// box-shadow: $shadow-4, 0 16px 16px transparent;
3401
// &:backdrop { box-shadow: $shadow-2, 0 16px 16px transparent; }
3403
}
3404
.solid-csd & {
3406
margin: 0;
3407
// padding: 4px;
3408
border-radius: 0;
3409
box-shadow: none;
3410
// box-shadow: inset 0 0 0 4px $titlebar;
3411
background-color: $titlebar;
3412
}
3413
}
3414
// Window Close button
3416
button.titlebutton {
3417
// @extend %simple_flat_button;
3418
@extend %circular_button;
3420
.selection-mode & {
3422
}
3423
}
3424
// catch all extend :)
3427
%selected_items {
3429
background-color: $overlay-selected;
3430
}
3431
.monospace { font-family: monospace; }
3433
/**********************
3436
* Touch Copy & Paste *
3437
**********************/
3438
// touch selection handlebars for the Popover.osd above
3439
cursor-handle {
3440
color: $primary;
3441
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
3442
&.top:dir(ltr), &.bottom:dir(rtl) {
3444
-gtk-icon-transform: rotate(90deg);
3445
}
3446
&.bottom:dir(ltr), &.top:dir(rtl) {
3448
-gtk-icon-transform: unset;
3449
}
3450
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3452
padding-top: 6px;
3453
-gtk-icon-transform: rotate(45deg);
3454
}
3455
}
3456
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3458
// shortcut window keys
3460
.keycap {
3461
min-width: 28px - 8px * 2;
3462
min-height: 28px - 2px;
3463
margin-top: 2px;
3464
padding-bottom: 2px;
3465
padding-left: 8px;
3466
padding-right: 8px;
3467
border: solid 1px $frame;
3469
border-radius: $corner-radius + 1px;
3470
box-shadow: inset 0 -2px $frame;
3471
background-color: $surface;
3472
color: $text;
3473
font-size: smaller;
3474
}
3475
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3477
caret-color: $primary;
3478
}
3479
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3481
stackswitcher button.circular,
3483
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3484
min-width: $medium-size;
3485
min-height: $medium-size;
3486
padding: 0;
3487
}
3488
/*************
3491
* App Icons *
3492
*************/
3493
// Outline for low res icons
3494
.lowres-icon {
3495
// -gtk-icon-shadow: none;
3496
}
3497
// Drapshadow for large icons
3499
.icon-dropshadow {
3500
// -gtk-icon-shadow: none;
3501
}
3502
/*********
3505
* Emoji *
3506
*********/
3507
popover.emoji-picker {
3508
padding: 0;
3509
entry {
3511
border-bottom: 1px solid $divider;
3512
border-image: none;
3513
border-radius: 0;
3514
box-shadow: none;
3515
background-color: transparent;
3516
}
3517
scrolledwindow { border-bottom: 1px solid $divider; }
3519
}
3520
// mimic tab style
3522
button.emoji-section {
3523
margin-top: -1px;
3524
padding: 0 8px;
3525
min-width: 24px;
3526
min-height: $medium-size;
3527
border-radius: 0;
3528
outline-offset: -6px;
3529
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3531
&:checked {
3533
box-shadow: inset 0 2px $primary;
3534
background-color: transparent;
3535
}
3536
&:hover, &:active { background-color: $overlay-hover; }
3538
&:first-child { margin-left: 4px; }
3540
&:last-child { margin-right: 4px; }
3542
}
3543
popover.emoji-picker .emoji {
3545
min-width: 3em;
3546
min-height: 3em;
3547
padding: 0 8px;
3548
// font-size: larger;
3549
widget {
3551
transition: $transition;
3552
border-radius: $corner-radius;
3553
&:hover { background-color: $overlay-hover; }
3555
}
3556
}
3557
popover.emoji-completion {
3559
padding: 8px 0;
3560
arrow {
3562
border: none;
3563
background: none;
3564
}
3565
.emoji-completion-row {
3567
min-height: $menuitem-size;
3568
padding: 0 12px;
3569
}
3570
.emoji:hover {
3572
background-color: $overlay-hover;
3573
}
3574
}
3575