MediaWiki:Common.css: Difference between revisions
Myriad-admin (talk | contribs) Checking for logos Tags: Mobile edit Mobile web edit |
Myriad-admin (talk | contribs) Adding spacing and trying to show logos Tags: Mobile edit Mobile web edit |
||
Line 100: | Line 100: | ||
"links nav" | "links nav" | ||
"eu-logo eu-text"; | "eu-logo eu-text"; | ||
gap: | gap: 2em 2em; /* Increased row gap for better spacing */ | ||
font-size: 1rem; | font-size: 1rem; | ||
justify-content: center; | justify-content: center; | ||
Line 107: | Line 107: | ||
max-width: 1200px; | max-width: 1200px; | ||
margin: 0 auto; | margin: 0 auto; | ||
} | |||
/* Footer links spacing */ | |||
#lcc-footer-content .footer-links, | |||
#lcc-footer-content .footer-nav { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
gap: 0.5em 2em; | |||
} | } | ||
Line 120: | Line 128: | ||
color: var(--myriad-dkblue); | color: var(--myriad-dkblue); | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
Line 172: | Line 168: | ||
text-align: center; | text-align: center; | ||
justify-items: center; | justify-items: center; | ||
} | |||
#lcc-footer-content .footer-links, | |||
#lcc-footer-content .footer-nav { | |||
grid-template-columns: 1fr; | |||
gap: 0.5em; | |||
} | } | ||
Revision as of 15:45, 21 May 2025
/* CSS placed here will be applied to all skins */
body.page-Help_Main_Page.action-view h1.firstHeading,
body.page-Main_Page.action-view h1.firstHeading {
display: none;
}
div#content a.external[href ^="https://"] {
background-image: none;
padding-right: 0;
}
/* MYRIAD colours */
:root {
--myriad-blue: #374CFF;
--myriad-purple: #8836EA;
--myriad-pink: #DB20D2;
--myriad-dkblue: #000091;
--myriad-yellow: #FFCE00;
--myriad-green: #5AE09A;
}
/* Clickable button */
.drg-button {
display: inline-block;
padding: .5em 1em;
text-align: center;
font-variant: small-caps;
border-radius: 7px;
background-color: var(--myriad-blue);
color: rgba(255, 255, 255, .8) !important;
transition: all 400ms;
text-decoration: none !important;
box-shadow: rgba(25, 128, 195, .3) 3px 3px 4px 0px;
}
/* FOOTER START */
/* #region */
/* Hide default footer links only */
#footer ul {
display: none !important;
}
/* Restore and style default footer logos/icons */
#footer-icons,
#footer-icons .footer-icons {
display: flex !important;
justify-content: center;
gap: 1em;
margin-top: 2em;
flex-wrap: wrap;
}
#footer-icons img {
max-height: 40px;
opacity: 0.9;
}
/* Remove default top border and spacing */
#footer, footer#footer {
border-top: none !important;
padding-top: 0 !important;
padding-bottom: 2em !important;
}
footer#footer.footer {
padding: 0;
}
footer {
width: 100%;
padding: 1em;
font-size: 1.2rem;
background: white;
color: rgba(0, 0, 0, 0.6);
min-height: 150px;
}
footer a {
color: var(--myriad-blue);
text-decoration: none;
}
/* Custom EU Footer Section */
#lcc-footer {
width: 100%;
padding: 2em 1em 0.5em 1em;
font-size: 0.9rem;
font-family: sans-serif;
font-weight: 300;
background: #ffffff;
color: #202122;
margin-top: 1em;
border-top: 1px solid #ccc;
}
#lcc-footer-content {
display: grid;
grid-template:
"links nav"
"eu-logo eu-text";
gap: 2em 2em; /* Increased row gap for better spacing */
font-size: 1rem;
justify-content: center;
align-items: start;
text-align: left;
max-width: 1200px;
margin: 0 auto;
}
/* Footer links spacing */
#lcc-footer-content .footer-links,
#lcc-footer-content .footer-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5em 2em;
}
#lcc-footer-content a {
color: var(--myriad-blue);
margin-bottom: 0.4em;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
#lcc-footer-content a:hover {
color: var(--myriad-dkblue);
font-weight: bold;
}
#lcc-footer-content .footer-legal {
grid-area: legal;
display: flex;
flex-direction: column;
}
#lcc-footer-content .footer-eu-logo {
grid-area: eu-logo;
}
#lcc-footer-content .footer-eu-logo img {
height: 2.5em;
opacity: 0.8;
}
#lcc-footer-content .footer-eu-text {
grid-area: eu-text;
display: flex;
justify-content: start;
align-items: center;
}
#lcc-footer-content .footer-eu-text p {
font-size: 0.9em;
max-width: 800px;
margin: 0;
}
/* Responsive layout for mobile */
@media screen and (max-width: 768px) {
#lcc-footer-content {
grid-template:
"links"
"nav"
"eu-logo"
"eu-text";
text-align: center;
justify-items: center;
}
#lcc-footer-content .footer-links,
#lcc-footer-content .footer-nav {
grid-template-columns: 1fr;
gap: 0.5em;
}
#lcc-footer-content .footer-eu-text {
justify-content: center;
text-align: center;
}
#lcc-footer-content .footer-eu-text p {
text-align: center;
}
}
/* #endregion */