Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
| − | /* === | + | /* === Global background: banner top-left + dark left column + parchment === */ |
:root{ | :root{ | ||
| − | --hf-banner-h: 150px; | + | --hf-banner-h: 150px; /* banner height */ |
| − | --hf-leftcol-w: 320px; | + | --hf-leftcol-w: 320px; /* left column width (match sidebar ~300–360px) */ |
--hf-parchment: #E1DCCE; | --hf-parchment: #E1DCCE; | ||
--hf-left-top: #2F2D2B; | --hf-left-top: #2F2D2B; | ||
| Line 8: | Line 8: | ||
} | } | ||
| − | /* Page background | + | /* Page background has THREE layers; nothing else gets sized/shifted */ |
| − | html, body{ | + | html, body { |
background: | background: | ||
| − | url("/Special:FilePath/BannerImage.png") left top no-repeat, | + | url("/Special:FilePath/BannerImage.png") left top no-repeat, /* 1) banner strip */ |
| − | linear-gradient(to bottom, var(--hf-left-top) | + | linear-gradient(to bottom, var(--hf-left-top), var(--hf-left-bot)) left top repeat-y, /* 2) dark column */ |
| − | var(--hf-parchment); | + | var(--hf-parchment); /* 3) parchment base */ |
background-size: | background-size: | ||
| − | var(--hf-leftcol-w) var(--hf-banner-h), /* banner only | + | var(--hf-leftcol-w) var(--hf-banner-h), /* banner only in left column area */ |
| − | var(--hf-leftcol-w) 100%, /* | + | var(--hf-leftcol-w) 100%, /* column runs full height */ |
auto; | auto; | ||
| − | background-attachment: | + | background-attachment: fixed, fixed, fixed; /* true page background */ |
} | } | ||
| − | /* Header | + | /* Header + sidebar should NOT paint their own backgrounds */ |
#mw-head, | #mw-head, | ||
.vector-header-container, | .vector-header-container, | ||
| − | #mw-page-base, #mw-head-base { | + | #mw-page-base, #mw-head-base, |
| + | #mw-panel, #column-one, .mw-sidebar { | ||
background: transparent !important; | background: transparent !important; | ||
| − | |||
} | } | ||
| − | /* | + | /* Main content stays opaque parchment so the dark column doesn't bleed under it */ |
| − | #content, | + | #content, .mw-body, .vector-body .mw-body, |
| − | .mw-body, | + | .mw-workspace-container, .mw-content-container { |
| − | .vector-body .mw-body, | ||
| − | .mw-workspace-container, | ||
| − | .mw-content-container { | ||
background: var(--hf-parchment) !important; | background: var(--hf-parchment) !important; | ||
} | } | ||
| − | /* Sidebar | + | /* (Optional) Sidebar link colors over the dark column */ |
| − | #mw-panel, #column-one, .mw-sidebar{ | + | #mw-panel, #column-one, .mw-sidebar { color: #EEEDEB !important; } |
| − | + | #mw-panel a, #column-one a, .mw-sidebar a { color: #EEEDEB !important; text-decoration: none; } | |
| − | + | #mw-panel a:hover, #column-one a:hover, .mw-sidebar a:hover { color: #5A65EA !important; text-decoration: underline; } | |
| − | } | ||
| − | #mw-panel a, #column-one a, .mw-sidebar a{ | ||
| − | |||
| − | } | ||
| − | #mw-panel a:hover, #column-one a:hover, .mw-sidebar a:hover{ | ||
| − | |||
| − | } | ||
Revision as of 09:41, 10 October 2025
/* === Global background: banner top-left + dark left column + parchment === */
:root{
--hf-banner-h: 150px; /* banner height */
--hf-leftcol-w: 320px; /* left column width (match sidebar ~300–360px) */
--hf-parchment: #E1DCCE;
--hf-left-top: #2F2D2B;
--hf-left-bot: #1E1E1D;
}
/* Page background has THREE layers; nothing else gets sized/shifted */
html, body {
background:
url("/Special:FilePath/BannerImage.png") left top no-repeat, /* 1) banner strip */
linear-gradient(to bottom, var(--hf-left-top), var(--hf-left-bot)) left top repeat-y, /* 2) dark column */
var(--hf-parchment); /* 3) parchment base */
background-size:
var(--hf-leftcol-w) var(--hf-banner-h), /* banner only in left column area */
var(--hf-leftcol-w) 100%, /* column runs full height */
auto;
background-attachment: fixed, fixed, fixed; /* true page background */
}
/* Header + sidebar should NOT paint their own backgrounds */
#mw-head,
.vector-header-container,
#mw-page-base, #mw-head-base,
#mw-panel, #column-one, .mw-sidebar {
background: transparent !important;
}
/* Main content stays opaque parchment so the dark column doesn't bleed under it */
#content, .mw-body, .vector-body .mw-body,
.mw-workspace-container, .mw-content-container {
background: var(--hf-parchment) !important;
}
/* (Optional) Sidebar link colors over the dark column */
#mw-panel, #column-one, .mw-sidebar { color: #EEEDEB !important; }
#mw-panel a, #column-one a, .mw-sidebar a { color: #EEEDEB !important; text-decoration: none; }
#mw-panel a:hover, #column-one a:hover, .mw-sidebar a:hover { color: #5A65EA !important; text-decoration: underline; }