feat: add fading to mw-data-after-content

This commit is contained in:
alistair3149 2021-08-26 17:11:01 -04:00
parent 17c37f5e8c
commit 9134834d6d
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
2 changed files with 28 additions and 17 deletions

View file

@ -26,9 +26,6 @@
}
.mw-footer {
position: relative;
z-index: 8; // High enough so it covers the floating UI
margin-top: var( --padding-page );
background: @color-footer-background-50;
clear: both;
color: @color-footer-text;
@ -36,20 +33,6 @@
font-size: @ui-menu-text;
line-height: @footer-line-height;
// Footer spacer
&:before {
position: absolute;
top: ~'calc( var( --padding-page ) * -2 )';
right: 0;
left: 0;
display: block;
height: ~'calc( var( --padding-page ) * 2 )';
background: var( --color-surface-0 );
content: '';
-webkit-mask-image: linear-gradient( 0deg, #000, transparent );
mask-image: linear-gradient( 0deg, #000, transparent );
}
a,
a.external {
color: @color-footer-link;

View file

@ -42,6 +42,34 @@ a.image {
}
}
#mw-data-after-content {
background: var( --color-surface-0 );
}
.mw-footer,
#mw-data-after-content {
position: relative;
margin-top: var( --padding-page );
// Footer spacer
&:before {
position: absolute;
top: ~'calc( var( --padding-page ) * -2 )';
right: 0;
left: 0;
display: block;
height: ~'calc( var( --padding-page ) * 2 )';
background: var( --color-surface-0 );
content: '';
-webkit-mask-image: linear-gradient( 0deg, #000, transparent );
mask-image: linear-gradient( 0deg, #000, transparent );
}
}
#mw-data-after-content + .mw-footer {
margin-top: 0;
}
@media ( min-width: @width-breakpoint-tablet ) {
div.tleft,
figure.mw-halign-left,