MediaWiki:Bhcvectorbrand-css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 5: | Line 5: | ||
========================================================= */ | ========================================================= */ | ||
/* | :root { --bhc-bar-height: 0px; } | ||
body.bhc-branding { | |||
/* Base */ | |||
body.bhc-branding{ | |||
padding-top: 0; | padding-top: 0; | ||
overflow-x: hidden; | overflow-x: hidden; | ||
| Line 14: | Line 16: | ||
HEADER BAR (scrolls normally) | HEADER BAR (scrolls normally) | ||
--------------------------------------------------------- */ | --------------------------------------------------------- */ | ||
body.bhc-branding .bhc-sitebar { | |||
body.bhc-branding .bhc-sitebar{ | |||
position: static; | position: static; | ||
border-top: 5px solid rgb(165,174,121); | border-top: 5px solid rgb(165,174,121); | ||
| Line 22: | Line 25: | ||
} | } | ||
body.bhc-branding .bhc-sitebar-inner { | body.bhc-branding .bhc-sitebar-inner{ | ||
max-width: 1200px; | max-width: 1200px; | ||
margin: 0 auto; | margin: 0 auto; | ||
| Line 32: | Line 35: | ||
} | } | ||
body.bhc-branding .bhc-logo { | body.bhc-branding .bhc-logo{ | ||
width: 56px; | width: 56px; | ||
height: 56px; | height: 56px; | ||
background: url(/extensions/BHCVectorBrand/resources/images/bhc-logo.png) | background: url(/extensions/BHCVectorBrand/resources/images/bhc-logo.png) center/contain no-repeat; | ||
border-radius: 6px; | border-radius: 6px; | ||
} | } | ||
body.bhc-branding .bhc-title { | body.bhc-branding .bhc-title{ | ||
font-size: 18px; | font-size: 18px; | ||
letter-spacing: 1px; | letter-spacing: 1px; | ||
} | } | ||
body.bhc-branding .bhc-strapline { | body.bhc-branding .bhc-strapline{ | ||
opacity: .95; | opacity: .95; | ||
margin-top: 2px; | margin-top: 2px; | ||
} | } | ||
body.bhc-branding .bhc-test-badge { | body.bhc-branding .bhc-test-badge{ | ||
margin-left: auto; | margin-left: auto; | ||
background: rgba(0,0,0,.18); | background: rgba(0,0,0,.18); | ||
| Line 63: | Line 65: | ||
FOOTER | FOOTER | ||
--------------------------------------------------------- */ | --------------------------------------------------------- */ | ||
body.bhc-branding .bhc-footer { | |||
body.bhc-branding .bhc-footer{ | |||
margin-top: 2.25rem; | margin-top: 2.25rem; | ||
padding: 1.5rem 0; | padding: 1.5rem 0; | ||
| Line 73: | Line 76: | ||
} | } | ||
body.bhc-branding .bhc-footer-inner { | body.bhc-branding .bhc-footer-inner{ | ||
max-width: 1200px; | max-width: 1200px; | ||
margin: 0 auto; | margin: 0 auto; | ||
padding: 0 16px; | padding: 0 16px; | ||
font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; | font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; | ||
font-size: | font-size: .95rem; | ||
line-height: 1.6; | |||
} | } | ||
| Line 85: | Line 89: | ||
JS sets --bhc-bar-height to header height when header is on-screen, else 0 | JS sets --bhc-bar-height to header height when header is on-screen, else 0 | ||
--------------------------------------------------------- */ | --------------------------------------------------------- */ | ||
body.bhc-branding .vector-sticky-header, | body.bhc-branding .vector-sticky-header, | ||
body.bhc-branding .vector-page-toolbar { | body.bhc-branding .vector-page-toolbar{ | ||
top: var(--bhc-bar-height) !important; | top: var(--bhc-bar-height) !important; | ||
} | } | ||
Revision as of 17:16, 23 January 2026
/* =========================================================
BHC Vector Brand – presentation layer Scoped to body.bhc-branding only Header is NON-STICKY and scrolls with the page ========================================================= */
- root { --bhc-bar-height: 0px; }
/* Base */ body.bhc-branding{
padding-top: 0; overflow-x: hidden;
}
/* ---------------------------------------------------------
HEADER BAR (scrolls normally) --------------------------------------------------------- */
body.bhc-branding .bhc-sitebar{
position: static; border-top: 5px solid rgb(165,174,121); border-bottom: 10px solid rgb(228,186,149); background: rgb(130,156,149); color: #fff;
}
body.bhc-branding .bhc-sitebar-inner{
max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 12px; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
body.bhc-branding .bhc-logo{
width: 56px; height: 56px; background: url(/extensions/BHCVectorBrand/resources/images/bhc-logo.png) center/contain no-repeat; border-radius: 6px;
}
body.bhc-branding .bhc-title{
font-size: 18px; letter-spacing: 1px;
}
body.bhc-branding .bhc-strapline{
opacity: .95; margin-top: 2px;
}
body.bhc-branding .bhc-test-badge{
margin-left: auto; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.35); padding: 4px 10px; border-radius: 999px; font-size: 12px; letter-spacing: .06em;
}
/* ---------------------------------------------------------
FOOTER --------------------------------------------------------- */
body.bhc-branding .bhc-footer{
margin-top: 2.25rem; padding: 1.5rem 0; border-top: 6px solid rgb(228,186,149); background: #f6f6f6; color: #222; clear: both; width: 100%;
}
body.bhc-branding .bhc-footer-inner{
max-width: 1200px; margin: 0 auto; padding: 0 16px; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; font-size: .95rem; line-height: 1.6;
}
/* ---------------------------------------------------------
Vector sticky UI should sit BELOW the BHC header (only while visible) JS sets --bhc-bar-height to header height when header is on-screen, else 0 --------------------------------------------------------- */
body.bhc-branding .vector-sticky-header, body.bhc-branding .vector-page-toolbar{
top: var(--bhc-bar-height) !important;
}
