MediaWiki:Common.css: Difference between revisions
Myriad-admin (talk | contribs) Trying navbar |
Myriad-admin (talk | contribs) No edit summary |
||
Line 1: | Line 1: | ||
/* === GENERAL | /* === GENERAL RESET & VECTOR OVERRIDES === */ | ||
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 { | ||
display: none; | |||
} | } | ||
#p-logo, #mw-head, #mw-head-base, #mw-panel { | |||
# | |||
display: none !important; | display: none !important; | ||
} | } | ||
body { | |||
body | padding-top: 6.5em !important; | ||
margin: 0; | |||
} | } | ||
#content { | |||
margin-top: 0 !important; | |||
} | } | ||
/* === | /* === COLORS === */ | ||
:root { | :root { | ||
--myriad-blue: #374CFF; | --myriad-blue: #374CFF; | ||
Line 60: | Line 25: | ||
} | } | ||
/* === | /* === NAVBAR === */ | ||
#drg-navbar { | #drg-navbar { | ||
background-color: | background-color: #fff; | ||
border-bottom: 1px solid #ddd; | border-bottom: 1px solid #ddd; | ||
font-family: sans-serif; | font-family: sans-serif; | ||
Line 104: | Line 35: | ||
top: 0; | top: 0; | ||
z-index: 999; | z-index: 999; | ||
height: | height: auto; | ||
} | } | ||
Line 116: | Line 45: | ||
align-items: center; | align-items: center; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: 1em; | |||
} | } | ||
.drg-navbar-logo | .drg-navbar-logo img { | ||
height: 3.5em; | height: 3.5em; | ||
width: auto; | width: auto; | ||
} | } | ||
/* NAV LINKS */ | |||
.drg-navbar-links { | .drg-navbar-links { | ||
display: flex; | display: flex; | ||
gap: 1.5em; | gap: 1.5em; | ||
flex: | flex-wrap: wrap; | ||
justify-content: center; | justify-content: center; | ||
flex-grow: 1; | |||
} | } | ||
Line 134: | Line 65: | ||
color: #000; | color: #000; | ||
text-decoration: none; | text-decoration: none; | ||
font-weight: 500; | |||
position: relative; | position: relative; | ||
} | |||
.drg-navbar-links a:hover { | |||
color: var(--myriad-blue); | |||
} | } | ||
Line 142: | Line 76: | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
bottom: | bottom: -4px; | ||
left: 0; | left: 0; | ||
height: 2px; | height: 2px; | ||
width: 0; | |||
background-color: var(--myriad-blue); | background-color: var(--myriad-blue); | ||
transition: width 0.3s ease; | transition: width 0.3s ease; | ||
} | } | ||
.drg-navbar-links a:hover::after { | .drg-navbar-links a:hover::after { | ||
width: 100%; | width: 100%; | ||
} | } | ||
/* SEARCH BAR */ | |||
/* | |||
.drg-search { | .drg-search { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
} | } | ||
.drg-search input[type="search"] { | .drg-search input[type="search"] { | ||
padding: 0.4em 0.8em; | |||
font-size: 1em; | font-size: 1em; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
border-radius: | border-radius: 4px 0 0 4px; | ||
} | } | ||
.drg-search input[type="submit"] { | .drg-search input[type="submit"] { | ||
padding: 0.4em 1em; | |||
font-size: 1em; | font-size: 1em; | ||
border: none; | border: none; | ||
border-radius: 0 | background: var(--myriad-blue); | ||
color: #fff; | |||
border-radius: 0 4px 4px 0; | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
/* | /* USER AREA */ | ||
.drg-navbar-actions { | |||
display: flex; | |||
align-items: center; | |||
gap: 1em; | |||
white-space: nowrap; | |||
} | |||
/* === MOBILE === */ | |||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.drg-navbar-container { | .drg-navbar-container { | ||
Line 197: | Line 122: | ||
align-items: stretch; | align-items: stretch; | ||
} | } | ||
.drg-navbar-links { | .drg-navbar-links { | ||
justify-content: center; | justify-content: center; | ||
} | } | ||
} | } | ||
/* === | /* === FOOTER + MISC remain unchanged === */ | ||
Revision as of 13:48, 24 June 2025
/* === GENERAL RESET & VECTOR OVERRIDES === */
body.page-Help_Main_Page.action-view h1.firstHeading,
body.page-Main_Page.action-view h1.firstHeading {
display: none;
}
#p-logo, #mw-head, #mw-head-base, #mw-panel {
display: none !important;
}
body {
padding-top: 6.5em !important;
margin: 0;
}
#content {
margin-top: 0 !important;
}
/* === COLORS === */
:root {
--myriad-blue: #374CFF;
--myriad-purple: #8836EA;
--myriad-pink: #DB20D2;
--myriad-dkblue: #000091;
--myriad-yellow: #FFCE00;
--myriad-green: #5AE09A;
}
/* === NAVBAR === */
#drg-navbar {
background-color: #fff;
border-bottom: 1px solid #ddd;
font-family: sans-serif;
font-size: 1rem;
padding: 0.5em 1em;
position: sticky;
top: 0;
z-index: 999;
height: auto;
}
.drg-navbar-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1em;
}
.drg-navbar-logo img {
height: 3.5em;
width: auto;
}
/* NAV LINKS */
.drg-navbar-links {
display: flex;
gap: 1.5em;
flex-wrap: wrap;
justify-content: center;
flex-grow: 1;
}
.drg-navbar-links a {
color: #000;
text-decoration: none;
font-weight: 500;
position: relative;
}
.drg-navbar-links a:hover {
color: var(--myriad-blue);
}
.drg-navbar-links a::after {
content: "";
position: absolute;
bottom: -4px;
left: 0;
height: 2px;
width: 0;
background-color: var(--myriad-blue);
transition: width 0.3s ease;
}
.drg-navbar-links a:hover::after {
width: 100%;
}
/* SEARCH BAR */
.drg-search {
display: flex;
align-items: center;
}
.drg-search input[type="search"] {
padding: 0.4em 0.8em;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
}
.drg-search input[type="submit"] {
padding: 0.4em 1em;
font-size: 1em;
border: none;
background: var(--myriad-blue);
color: #fff;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
/* USER AREA */
.drg-navbar-actions {
display: flex;
align-items: center;
gap: 1em;
white-space: nowrap;
}
/* === MOBILE === */
@media (max-width: 768px) {
.drg-navbar-container {
flex-direction: column;
align-items: stretch;
}
.drg-navbar-links {
justify-content: center;
}
}
/* === FOOTER + MISC remain unchanged === */