MediaWiki:Common.css: Difference between revisions
Myriad-admin (talk | contribs) No edit summary |
Myriad-admin (talk | contribs) No edit summary |
||
Line 1: | Line 1: | ||
/* === GENERAL RESET & VECTOR OVERRIDES === */ | /* === 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; | display: none; | ||
} | } | ||
#p-logo, #mw-head, #mw-head-base, #mw-panel { | |||
/* Hide Vector and MobileFrontend headers */ | |||
#p-logo, | |||
#mw-head, | |||
#mw-head-base, | |||
#mw-panel, | |||
#mw-navigation, | |||
#mw-mf-page-header, | |||
#mw-mf-main-menu-button { | |||
display: none !important; | display: none !important; | ||
} | } | ||
/* Ensure no leftover margins */ | |||
html { font-size: 100%; } | |||
body { | body { | ||
margin: 0; | margin: 0; | ||
padding-top: 50px !important; /* Space for fixed navbar */ | |||
} | } | ||
#content { | #content { | ||
Line 15: | Line 27: | ||
} | } | ||
/* === | /* === MYRIAD COLOURS === */ | ||
:root { | :root { | ||
--myriad-blue: #374CFF; | --myriad-blue: #374CFF; | ||
Line 25: | Line 37: | ||
} | } | ||
/* === NAVBAR === */ | /* === LINK & BUTTON STYLES === */ | ||
a { | |||
color: var(--myriad-blue); | |||
text-decoration: none; | |||
} | |||
.drg-button { | |||
display: inline-block; | |||
padding: .5em 1em; | |||
font-variant: small-caps; | |||
border-radius: 7px; | |||
background-color: var(--myriad-blue); | |||
color: #fff !important; | |||
transition: background 200ms; | |||
text-decoration: none !important; | |||
} | |||
/* === CUSTOM NAVBAR === */ | |||
#drg-navbar { | #drg-navbar { | ||
background | position: fixed; | ||
top: 0; | |||
left: 0; | |||
right: 0; | |||
background: #fff; | |||
border-bottom: 1px solid #ddd; | border-bottom: 1px solid #ddd; | ||
z-index: 10000; | |||
z-index: | |||
} | } | ||
Line 42: | Line 69: | ||
margin: 0 auto; | margin: 0 auto; | ||
display: flex; | display: flex; | ||
align-items: center; | |||
justify-content: space-between; | justify-content: space-between; | ||
padding: .75em 1em; | |||
gap: 1em; | |||
flex-wrap: wrap; | flex-wrap: wrap; | ||
} | } | ||
/* Logo */ | |||
.drg-navbar-logo img { | .drg-navbar-logo img { | ||
height: | height: 40px; | ||
width: auto; | width: auto; | ||
} | } | ||
/* | /* Links */ | ||
.drg-navbar-links { | .drg-navbar-links { | ||
display: flex; | display: flex; | ||
gap: | gap: 2em; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
flex-grow: 1; | |||
justify-content: center; | justify-content: center; | ||
} | } | ||
.drg-navbar-links a { | .drg-navbar-links a { | ||
position: relative; | |||
padding-bottom: 2px; | |||
font-weight: 500; | font-weight: 500; | ||
} | } | ||
Line 76: | Line 100: | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
bottom: | bottom: 0; | ||
left: 0; | left: 0; | ||
height: 2px; | height: 2px; | ||
width: 0; | width: 0; | ||
background | background: var(--myriad-blue); | ||
transition: width | transition: width 200ms ease; | ||
} | } | ||
.drg-navbar-links a:hover::after { | .drg-navbar-links a:hover::after { | ||
width: 100%; | width: 100%; | ||
} | } | ||
/* | /* Search */ | ||
.drg-search { | .drg-search { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
gap: 0; | |||
} | } | ||
.drg-search input[type="search"] { | .drg-search input[type="search"] { | ||
padding: | padding: .4em .6em; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
border-radius: 4px 0 0 4px; | border-radius: 4px 0 0 4px; | ||
width: 200px; | |||
} | } | ||
.drg-search input[type="submit"] { | .drg-search input[type="submit"] { | ||
padding: | padding: .4em 1em; | ||
border: none; | border: none; | ||
border-radius: 0 4px 4px 0; | |||
background: var(--myriad-blue); | background: var(--myriad-blue); | ||
color: #fff; | color: #fff; | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
/* | /* User actions */ | ||
.drg-navbar-actions { | .drg-navbar-actions { | ||
display: flex; | display: flex; | ||
Line 116: | Line 143: | ||
} | } | ||
/* | /* Mobile responsiveness */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.drg-navbar-container { | .drg-navbar-container { | ||
Line 126: | Line 153: | ||
} | } | ||
} | } | ||
Revision as of 13:58, 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;
}
/* Hide Vector and MobileFrontend headers */
#p-logo,
#mw-head,
#mw-head-base,
#mw-panel,
#mw-navigation,
#mw-mf-page-header,
#mw-mf-main-menu-button {
display: none !important;
}
/* Ensure no leftover margins */
html { font-size: 100%; }
body {
margin: 0;
padding-top: 50px !important; /* Space for fixed navbar */
}
#content {
margin-top: 0 !important;
}
/* === MYRIAD COLOURS === */
:root {
--myriad-blue: #374CFF;
--myriad-purple: #8836EA;
--myriad-pink: #DB20D2;
--myriad-dkblue: #000091;
--myriad-yellow: #FFCE00;
--myriad-green: #5AE09A;
}
/* === LINK & BUTTON STYLES === */
a {
color: var(--myriad-blue);
text-decoration: none;
}
.drg-button {
display: inline-block;
padding: .5em 1em;
font-variant: small-caps;
border-radius: 7px;
background-color: var(--myriad-blue);
color: #fff !important;
transition: background 200ms;
text-decoration: none !important;
}
/* === CUSTOM NAVBAR === */
#drg-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fff;
border-bottom: 1px solid #ddd;
z-index: 10000;
}
.drg-navbar-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: .75em 1em;
gap: 1em;
flex-wrap: wrap;
}
/* Logo */
.drg-navbar-logo img {
height: 40px;
width: auto;
}
/* Links */
.drg-navbar-links {
display: flex;
gap: 2em;
flex-wrap: wrap;
flex-grow: 1;
justify-content: center;
}
.drg-navbar-links a {
position: relative;
padding-bottom: 2px;
font-weight: 500;
}
.drg-navbar-links a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 0;
background: var(--myriad-blue);
transition: width 200ms ease;
}
.drg-navbar-links a:hover::after {
width: 100%;
}
/* Search */
.drg-search {
display: flex;
align-items: center;
gap: 0;
}
.drg-search input[type="search"] {
padding: .4em .6em;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
width: 200px;
}
.drg-search input[type="submit"] {
padding: .4em 1em;
border: none;
border-radius: 0 4px 4px 0;
background: var(--myriad-blue);
color: #fff;
cursor: pointer;
}
/* User actions */
.drg-navbar-actions {
display: flex;
align-items: center;
gap: 1em;
white-space: nowrap;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.drg-navbar-container {
flex-direction: column;
align-items: stretch;
}
.drg-navbar-links {
justify-content: center;
}
}