MediaWiki:Common.css: Difference between revisions
Myriad-admin (talk | contribs) Trying navbar |
Myriad-admin (talk | contribs) Trying navbar |
||
Line 79: | Line 79: | ||
/* === Hide default Vector header === */ | /* === Hide default Vector header === */ | ||
#p-logo, | |||
#mw-head, | #mw-head, | ||
#mw-head-base, | #mw-head-base, | ||
Line 90: | Line 91: | ||
body { | body { | ||
padding-top: | padding-top: 6em !important; | ||
} | } | ||
Line 103: | Line 104: | ||
top: 0; | top: 0; | ||
z-index: 999; | z-index: 999; | ||
height: 5em; | |||
display: flex; | |||
align-items: center; | |||
} | } | ||
Line 112: | Line 116: | ||
align-items: center; | align-items: center; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
width: 100%; | |||
} | } | ||
.drg-navbar-logo | .drg-navbar-logo img.drg-logo-img { | ||
height: 3.5em; | |||
width: auto; | |||
} | } | ||
Line 161: | Line 164: | ||
} | } | ||
/* Search bar */ | |||
.drg-search { | |||
flex-grow: 1; | |||
display: flex; | |||
justify-content: center; | |||
padding: 0 1em; | |||
} | |||
.drg-search form { | |||
display: flex; | |||
align-items: center; | |||
} | |||
.drg-search input[type="search"] { | |||
font-size: 1em; | |||
padding: 0.5em; | |||
border: 1px solid #ccc; | |||
border-radius: 6px 0 0 6px; | |||
} | |||
.drg-search input[type="submit"] { | |||
font-size: 1em; | |||
padding: 0.5em 1em; | |||
background-color: var(--myriad-blue); | |||
color: white; | |||
border: none; | |||
border-radius: 0 6px 6px 0; | |||
cursor: pointer; | |||
} | |||
/* Responsive */ | |||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.drg-navbar-container { | .drg-navbar-container { | ||
Line 180: | Line 211: | ||
} | } | ||
/* === DRG Footer === */ | /* === DRG Footer (unchanged) === */ | ||
#footer-places, | #footer-places, | ||
#footer-info-lastmod { | #footer-info-lastmod { | ||
Line 199: | Line 230: | ||
font-size: 1.1rem; | font-size: 1.1rem; | ||
margin: 1em 0 2em; | margin: 1em 0 2em; | ||
} | } |
Revision as of 13:31, 24 June 2025
/* === GENERAL CLEANUP === */
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;
}
html {
font-size: 100%;
}
/* === Responsive logo === */
.logo-container {
max-width: 43.75rem;
margin: 0 auto;
padding: 0.3125rem;
text-align: center;
}
.responsive-logo img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
/* === Hide UI Elements === */
#ca-talk {
display: none !important;
}
body.ns-0 #ca-edit,
body.ns-0 #ca-viewsource {
display: none !important;
}
body.page-Main_Page #ca-edit,
body.page-Catalogue #ca-edit,
body.page-Definitions #ca-edit,
body.page-Contribute #ca-edit,
body.page-Resources #ca-edit,
body.page-Main_Page #ca-viewsource,
body.page-Catalogue #ca-viewsource,
body.page-Definitions #ca-viewsource,
body.page-Contribute #ca-viewsource,
body.page-Resources #ca-viewsource {
display: inline !important;
}
/* === MYRIAD colours === */
:root {
--myriad-blue: #374CFF;
--myriad-purple: #8836EA;
--myriad-pink: #DB20D2;
--myriad-dkblue: #000091;
--myriad-yellow: #FFCE00;
--myriad-green: #5AE09A;
}
/* === Links and Buttons === */
a {
color: var(--myriad-blue);
}
.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;
}
/* === Hide default Vector header === */
#p-logo,
#mw-head,
#mw-head-base,
#mw-panel {
display: none !important;
}
#content {
margin-top: 0 !important;
}
body {
padding-top: 6em !important;
}
/* === DRG Navbar === */
#drg-navbar {
background-color: white;
border-bottom: 1px solid #ddd;
font-family: sans-serif;
font-size: 1rem;
padding: 0.5em 1em;
position: sticky;
top: 0;
z-index: 999;
height: 5em;
display: flex;
align-items: center;
}
.drg-navbar-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.drg-navbar-logo img.drg-logo-img {
height: 3.5em;
width: auto;
}
.drg-navbar-links {
display: flex;
gap: 1.5em;
flex: 1;
justify-content: center;
}
.drg-navbar-links a {
color: #000;
text-decoration: none;
position: relative;
padding-bottom: 4px;
transition: color 0.3s;
}
.drg-navbar-links a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 2px;
background-color: var(--myriad-blue);
transition: width 0.3s ease;
}
.drg-navbar-links a:hover {
color: var(--myriad-blue);
}
.drg-navbar-links a:hover::after {
width: 100%;
}
.drg-navbar-actions {
display: flex;
gap: 1em;
align-items: center;
}
/* Search bar */
.drg-search {
flex-grow: 1;
display: flex;
justify-content: center;
padding: 0 1em;
}
.drg-search form {
display: flex;
align-items: center;
}
.drg-search input[type="search"] {
font-size: 1em;
padding: 0.5em;
border: 1px solid #ccc;
border-radius: 6px 0 0 6px;
}
.drg-search input[type="submit"] {
font-size: 1em;
padding: 0.5em 1em;
background-color: var(--myriad-blue);
color: white;
border: none;
border-radius: 0 6px 6px 0;
cursor: pointer;
}
/* Responsive */
@media (max-width: 768px) {
.drg-navbar-container {
flex-direction: column;
align-items: stretch;
}
.drg-navbar-links {
justify-content: center;
flex-wrap: wrap;
gap: 1em;
margin-top: 0.5em;
}
.drg-navbar-actions {
justify-content: center;
margin-top: 0.5em;
}
}
/* === DRG Footer (unchanged) === */
#footer-places,
#footer-info-lastmod {
display: none !important;
}
.mw-footer-container,
#footer {
border-top: none !important;
}
#drg-footer {
border-top: 1px solid #ccc;
background: #fff;
padding-top: 2em;
font-family: sans-serif;
color: #000;
font-size: 1.1rem;
margin: 1em 0 2em;
}