mediawiki-skins-Citizen/resources/skins.citizen.styles/Footer.less
2022-10-01 15:11:07 -04:00

161 lines
2.5 KiB
Plaintext

.last-modified-bar {
&-content {
display: flex;
align-items: center;
padding: 12px var( --padding-page );
margin: 0 auto;
}
&-icon {
width: 20px;
height: 20px;
margin-right: @icon-padding;
background-position: center;
background-repeat: no-repeat;
opacity: var( --opacity-icon-base );
}
&-text {
a {
margin-right: 5px;
}
}
}
.citizen-footer {
padding-top: var( --space-xl );
padding-bottom: var( --space-xl );
// Reserve space for header
margin-bottom: var( --header-size );
background-color: var( --color-surface-2 );
clear: both;
color: var( --color-base--subtle );
direction: ltr;
font-size: 0.875rem;
&__container {
max-width: var( --width-layout--extended );
margin-right: auto;
margin-left: auto;
}
&__content,
&__bottom {
display: flex;
flex-wrap: wrap;
padding: var( --space-md ) 0;
gap: var( --space-md );
}
&__bottom {
align-items: center;
justify-content: space-between;
border-top: 1px solid var( --border-color-base );
margin-right: auto;
margin-left: auto;
}
&__siteinfo {
display: flex;
max-width: 90ch;
flex-direction: column;
gap: var( --space-sm );
p {
margin: 0;
line-height: var( --line-height );
}
}
a {
color: var( --color-base--emphasized );
font-weight: 500;
}
ul {
display: flex;
flex-wrap: wrap;
margin: 0;
}
li {
list-style: none;
}
}
#footer {
&-sitetitle {
color: var( --color-base--emphasized );
font-size: 2.5rem;
img.mw-logo-wordmark {
width: auto;
height: 54px;
filter: invert( 1 ) hue-rotate( 180deg );
}
}
&-places {
ul {
flex-direction: column;
}
a {
display: block;
padding: var( --space-sm ) var( --space-md );
border-radius: var( --border-radius--small );
&:hover {
background-color: var( --background-color-quiet--hover );
}
&:active {
background-color: var( --background-color-quiet--active );
}
}
}
&-tagline {
padding: @margin-side / 2 0;
}
&-info {
font-size: 0.8125rem;
opacity: 0.5;
ul {
flex-direction: column;
gap: var( --space-xs );
}
}
&-icons {
display: flex;
ul {
gap: var( --space-sm );
}
li {
display: flex; // Horizontally aligned with there are two icons in the same li
}
a {
display: flex;
align-items: center;
}
}
}
.skin-citizen-dark {
.last-modified-bar-icon {
filter: invert( 1 );
}
}
// NOTE: Temporary disabling them, planning to move them into body footer
.last-modified-bar,
#footer-info-copyright {
display: none;
}