StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-15 10:38:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

17
resources/skins.citizen.styles/Footer.less
View file

@ -26,9 +26,6 @@
} }
.mw-footer { .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; background: @color-footer-background-50;
clear: both; clear: both;
color: @color-footer-text; color: @color-footer-text;
@ -36,20 +33,6 @@
font-size: @ui-menu-text; font-size: @ui-menu-text;
line-height: @footer-line-height; 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,
a.external { a.external {
color: @color-footer-link; color: @color-footer-link;

28
resources/skins.citizen.styles/layout.less
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 ) { @media ( min-width: @width-breakpoint-tablet ) {
div.tleft, div.tleft,
figure.mw-halign-left, figure.mw-halign-left,