MediaWiki:Common.css: Difference between revisions
Myriad-admin (talk | contribs) Adding spacing and trying to show logos Tags: Mobile edit Mobile web edit |
Myriad-admin (talk | contribs) Checking for logos Tags: Mobile edit Mobile web edit |
||
Line 1: | Line 1: | ||
/* | /* === General tweaks === */ | ||
body.page-Help_Main_Page.action-view h1.firstHeading, | body.page-Help_Main_Page.action-view h1.firstHeading, | ||
body.page-Main_Page.action-view h1.firstHeading { | body.page-Main_Page.action-view h1.firstHeading { | ||
Line 10: | Line 10: | ||
} | } | ||
/* MYRIAD | /* === MYRIAD colour palette === */ | ||
:root { | :root { | ||
--myriad-blue: #374CFF; | --myriad-blue: #374CFF; | ||
Line 20: | Line 20: | ||
} | } | ||
/* Clickable button */ | /* === Clickable button styling === */ | ||
.drg-button { | .drg-button { | ||
display: inline-block; | display: inline-block; | ||
Line 34: | Line 34: | ||
} | } | ||
/* | /* === Footer base cleanup === */ | ||
#footer, footer#footer { | #footer, footer#footer { | ||
border-top: none !important; | border-top: none !important; | ||
padding-top: 0 !important; | padding-top: 0 !important; | ||
padding-bottom: 2em !important; | padding-bottom: 2em !important; | ||
background: white; | |||
color: #202122; | |||
} | } | ||
footer { | footer { | ||
width: 100%; | width: 100%; | ||
font-size: 1.2rem; | font-size: 1.2rem; | ||
min-height: 150px; | min-height: 150px; | ||
} | } | ||
Line 82: | Line 54: | ||
} | } | ||
/* Custom EU Footer Section */ | footer a:hover { | ||
color: var(--myriad-dkblue); | |||
font-weight: bold; | |||
} | |||
/* === Restore and style native footer sections === */ | |||
#footer-info, | |||
#footer-places, | |||
#footer-icons { | |||
margin: 1em auto; | |||
text-align: center; | |||
font-size: 0.9rem; | |||
padding: 0; | |||
list-style: none; | |||
} | |||
#footer-icons { | |||
display: flex !important; | |||
justify-content: center; | |||
gap: 1em; | |||
flex-wrap: wrap; | |||
margin-top: 1em; | |||
} | |||
#footer-icons img { | |||
max-height: 40px; | |||
opacity: 0.9; | |||
} | |||
/* === Custom EU Footer Section === */ | |||
#lcc-footer { | #lcc-footer { | ||
width: 100%; | width: 100%; | ||
padding: 2em 1em | padding: 2em 1em 1em; | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
font-family: sans-serif; | font-family: sans-serif; | ||
font-weight: 300; | font-weight: 300; | ||
background: #ffffff; | background: #ffffff; | ||
border-top: 1px solid #ccc; | |||
margin-top: 1em; | margin-top: 1em; | ||
} | } | ||
#lcc-footer-content { | #lcc-footer-content { | ||
display: | display: flex; | ||
flex-direction: column; | |||
align-items: center; | |||
align-items: | |||
max-width: 1200px; | max-width: 1200px; | ||
margin: 0 auto; | margin: 0 auto; | ||
gap: 2em; | |||
text-align: center; | |||
} | |||
/* Grid blocks for link groups */ | |||
.lcc-link-group { | |||
display: grid; | |||
grid-template-columns: repeat(2, auto); | |||
gap: 0.5em 2em; | |||
} | } | ||
#lcc-footer-content .footer-links, | #lcc-footer-content .footer-links, | ||
#lcc-footer-content .footer-nav { | #lcc-footer-content .footer-nav { | ||
display: | display: flex; | ||
flex-direction: column; | |||
align-items: center; | |||
} | } | ||
/* Link styling */ | |||
#lcc-footer-content a { | #lcc-footer-content a { | ||
color: var(--myriad-blue); | color: var(--myriad-blue); | ||
transition: all 0.3s ease; | transition: all 0.3s ease; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
Line 130: | Line 131: | ||
} | } | ||
/* EU logo and text */ | |||
#lcc-footer-content .footer-eu-logo img { | #lcc-footer-content .footer-eu-logo img { | ||
height: 2.5em; | height: 2.5em; | ||
Line 145: | Line 137: | ||
} | } | ||
.footer-eu-text { | |||
max-width: 800px; | |||
margin: 0 auto; | |||
font-size: 0.9em; | font-size: 0.9em; | ||
} | } | ||
/* | /* === Mobile layout === */ | ||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
.lcc-link-group { | |||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
} | } | ||
#lcc-footer-content | #lcc-footer-content { | ||
text-align: center; | text-align: center; | ||
} | } | ||
} | } | ||
Revision as of 15:52, 21 May 2025
/* === General tweaks === */
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 colour palette === */
:root {
--myriad-blue: #374CFF;
--myriad-purple: #8836EA;
--myriad-pink: #DB20D2;
--myriad-dkblue: #000091;
--myriad-yellow: #FFCE00;
--myriad-green: #5AE09A;
}
/* === Clickable button styling === */
.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 base cleanup === */
#footer, footer#footer {
border-top: none !important;
padding-top: 0 !important;
padding-bottom: 2em !important;
background: white;
color: #202122;
}
footer {
width: 100%;
font-size: 1.2rem;
min-height: 150px;
}
footer a {
color: var(--myriad-blue);
text-decoration: none;
}
footer a:hover {
color: var(--myriad-dkblue);
font-weight: bold;
}
/* === Restore and style native footer sections === */
#footer-info,
#footer-places,
#footer-icons {
margin: 1em auto;
text-align: center;
font-size: 0.9rem;
padding: 0;
list-style: none;
}
#footer-icons {
display: flex !important;
justify-content: center;
gap: 1em;
flex-wrap: wrap;
margin-top: 1em;
}
#footer-icons img {
max-height: 40px;
opacity: 0.9;
}
/* === Custom EU Footer Section === */
#lcc-footer {
width: 100%;
padding: 2em 1em 1em;
font-size: 0.9rem;
font-family: sans-serif;
font-weight: 300;
background: #ffffff;
border-top: 1px solid #ccc;
margin-top: 1em;
}
#lcc-footer-content {
display: flex;
flex-direction: column;
align-items: center;
max-width: 1200px;
margin: 0 auto;
gap: 2em;
text-align: center;
}
/* Grid blocks for link groups */
.lcc-link-group {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 0.5em 2em;
}
#lcc-footer-content .footer-links,
#lcc-footer-content .footer-nav {
display: flex;
flex-direction: column;
align-items: center;
}
/* Link styling */
#lcc-footer-content a {
color: var(--myriad-blue);
transition: all 0.3s ease;
text-decoration: none;
}
#lcc-footer-content a:hover {
color: var(--myriad-dkblue);
font-weight: bold;
}
/* EU logo and text */
#lcc-footer-content .footer-eu-logo img {
height: 2.5em;
opacity: 0.8;
}
.footer-eu-text {
max-width: 800px;
margin: 0 auto;
font-size: 0.9em;
}
/* === Mobile layout === */
@media screen and (max-width: 768px) {
.lcc-link-group {
grid-template-columns: 1fr;
}
#lcc-footer-content {
text-align: center;
}
}