MediaWiki:Common.css: Difference between revisions
Myriad-admin (talk | contribs) No edit summary |
Myriad-admin (talk | contribs) Testing with links.communitycenter.eu Common.css |
||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* 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; } | 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://"] { | div#content a.external[href ^="https://"] { | ||
background-image: none; | background-image: none; | ||
Line 6: | Line 10: | ||
} | } | ||
/* MYRIAD colours */ | |||
:root { | |||
--myriad-blue: #374CFF; | --myriad-blue: #374CFF; | ||
--myriad-purple: #8836EA; | --myriad-purple: #8836EA; | ||
Line 14: | Line 18: | ||
--myriad-yellow: #FFCE00; | --myriad-yellow: #FFCE00; | ||
--myriad-green: #5AE09A; | --myriad-green: #5AE09A; | ||
} | |||
/* Clickable button */ | |||
.drg-button { | |||
display: inline-block; | display: inline-block; | ||
padding: .5em 1em; | padding: .5em 1em; | ||
Line 28: | Line 32: | ||
text-decoration: none !important; | text-decoration: none !important; | ||
box-shadow: rgba(25, 128, 195, .3) 3px 3px 4px 0px; | box-shadow: rgba(25, 128, 195, .3) 3px 3px 4px 0px; | ||
} | |||
/* FOOTER START */ | |||
/* #region */ | /* #region */ | ||
Line 47: | Line 51: | ||
footer a { | footer a { | ||
color: var(--myriad-blue); | color: var(--myriad-blue); | ||
text-decoration: none; /* Optional: removes underline */ | text-decoration: none; /* Optional: removes underline */ | ||
} | } | ||
/* EU Footer Section */ | |||
#lcc-footer { | |||
width: 100%; | |||
padding: 2em; | |||
font-size: 0.9rem; | |||
font-family: sans-serif; | |||
font-weight: 300; | |||
background: linear-gradient(to top, #1A2026, #415262); | |||
color: rgba(255, 255, 255, 0.8); | |||
margin-top: 2em; | |||
} | |||
#lcc-footer-content { | |||
display: grid; | |||
grid-template: | |||
"links links" | |||
"nav legal" | |||
"eu-logo eu-logo" | |||
"eu-text eu-text"; | |||
gap: 1em; | |||
font-size: 1rem; | |||
text-align: center; | |||
justify-content: center; | |||
} | |||
#lcc-footer-content a { | |||
color: rgba(255, 255, 255, 0.8); | |||
margin-bottom: 0.5em; | |||
transition: all 0.3s ease; | |||
text-decoration: none; | |||
} | |||
#lcc-footer-content a:hover { | |||
color: white; | |||
font-weight: bold; | |||
} | |||
#lcc-footer-content .footer-links { | |||
grid-area: links; | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
#lcc-footer-content .footer-nav { | |||
grid-area: nav; | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
#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: center; | |||
} | |||
#lcc-footer-content .footer-eu-text p { | |||
font-size: 0.9em; | |||
max-width: 800px; | |||
margin: 0 auto; | |||
} | |||
/* Responsive layout on wider screens */ | |||
@media screen and (min-width: 992px) { | |||
#lcc-footer-content { | |||
width: 80%; | |||
grid-template: | |||
"links nav legal" | |||
"eu-logo eu-text eu-text" | |||
/ 1fr 1fr 1fr; | |||
gap: 2em; | |||
text-align: left; | |||
} | |||
#lcc-footer-content .footer-eu-text { | |||
justify-content: flex-start; | |||
} | |||
#lcc-footer-content .footer-eu-text p { | |||
text-align: left; | |||
} | |||
#lcc-footer-content .footer-legal { | |||
text-align: right; | |||
} | |||
} | |||
/* #endregion */ |
Revision as of 17:48, 20 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 */
footer#footer.footer {
padding: 0;
}
footer {
width: 100%;
padding: 1em;
font-size: 1.2rem;
background: white; /* Changed to white */
color: rgba(0, 0, 0, 0.6); /* Adjusted text color for contrast */
min-height: 250px;
}
footer a {
color: var(--myriad-blue);
text-decoration: none; /* Optional: removes underline */
}
/* EU Footer Section */
#lcc-footer {
width: 100%;
padding: 2em;
font-size: 0.9rem;
font-family: sans-serif;
font-weight: 300;
background: linear-gradient(to top, #1A2026, #415262);
color: rgba(255, 255, 255, 0.8);
margin-top: 2em;
}
#lcc-footer-content {
display: grid;
grid-template:
"links links"
"nav legal"
"eu-logo eu-logo"
"eu-text eu-text";
gap: 1em;
font-size: 1rem;
text-align: center;
justify-content: center;
}
#lcc-footer-content a {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0.5em;
transition: all 0.3s ease;
text-decoration: none;
}
#lcc-footer-content a:hover {
color: white;
font-weight: bold;
}
#lcc-footer-content .footer-links {
grid-area: links;
display: flex;
flex-direction: column;
}
#lcc-footer-content .footer-nav {
grid-area: nav;
display: flex;
flex-direction: column;
}
#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: center;
}
#lcc-footer-content .footer-eu-text p {
font-size: 0.9em;
max-width: 800px;
margin: 0 auto;
}
/* Responsive layout on wider screens */
@media screen and (min-width: 992px) {
#lcc-footer-content {
width: 80%;
grid-template:
"links nav legal"
"eu-logo eu-text eu-text"
/ 1fr 1fr 1fr;
gap: 2em;
text-align: left;
}
#lcc-footer-content .footer-eu-text {
justify-content: flex-start;
}
#lcc-footer-content .footer-eu-text p {
text-align: left;
}
#lcc-footer-content .footer-legal {
text-align: right;
}
}
/* #endregion */