mediawiki-skins-Citizen/resources/skins.citizen.styles/Footer.less
2021-03-05 11:40:55 -05:00

142 lines
2.2 KiB
Plaintext

.last-modified-bar {
background: @color-footer-background-60;
&-content {
display: flex;
max-width: @footer-width;
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;
}
}
}
.mw-footer {
position: relative;
z-index: 8; // High enough so it covers the floating UI
margin-top: @margin-side * 2;
background: @color-footer-background-50;
clear: both;
color: @color-footer-text;
direction: ltr;
font-size: @ui-menu-text;
line-height: @footer-line-height;
a,
a.external {
color: @color-footer-link;
&:hover,
&:active,
&:focus {
color: @color-footer-link-active;
text-decoration: none;
}
}
ul {
display: flex;
flex-wrap: wrap;
margin: 0;
}
li {
list-style: none;
}
}
#footer {
&-content {
display: flex;
max-width: @footer-width;
flex-direction: column;
padding: 0 var( --padding-page );
margin: 0 auto;
}
&-bottom {
margin-top: @margin-side * 1.5;
background-color: @color-footer-background-40;
&-content {
display: flex;
max-width: @footer-width;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: @margin-side / 2 var( --padding-page );
margin: 0 auto;
}
}
&-sitetitle {
margin: @margin-side * 2.5 0 @margin-side / 2 0;
color: @base-90;
font-size: 20px;
img.mw-logo-wordmark {
width: auto;
height: 20px;
filter: invert( 1 ) hue-rotate( 180deg );
}
}
&-desc {
margin: @margin-side / 2 0;
}
&-places {
display: flex;
flex-wrap: wrap;
margin: 0 -@margin-side !important;
li a {
display: block;
padding: @margin-side / 2 var( --padding-page );
}
}
&-info {
margin-top: @margin-side / 2;
font-size: 12px;
opacity: 0.5;
li {
margin: @margin-side / 2 0;
}
}
&-tagline {
padding: @margin-side / 2 0;
}
&-icons {
display: flex;
margin: 0 -@margin-side / 2;
li {
display: flex; // Horizontally aligned with there are two icons in the same li
}
a {
display: flex;
align-items: center;
padding: 15px 10px;
}
}
}