MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
Switch to Vector legacy for a genuinely persistent sidebar (Vector 2022 hard-restricts pinning to logged-in users); add mobile stacking fix |
Switch to Vector legacy for a genuinely persistent sidebar (Vector 2022 hard-restricts pinning to logged-in users); add mobile stacking fix |
||
| Line 70: | Line 70: | ||
(unlike Vector 2022) -- its entire header region (#mw-head, tabs, search, | (unlike Vector 2022) -- its entire header region (#mw-head, tabs, search, | ||
personal tools/login) is built with absolute positioning and floats that | personal tools/login) is built with absolute positioning and floats that | ||
all assume a fixed-width sidebar reserving 10-11em on the left | all assume a fixed-width sidebar reserving 10-11em on the left, AND the | ||
page's actual DOM order is content-then-navigation-then-footer (the | |||
absolute positioning was doing double duty: both moving the header | |||
the | visually to the top AND compensating for that DOM order). Simply | ||
removing the positioning stacks things in DOM order, which reads oddly | |||
on a phone (article text, then the nav/sidebar, then the footer). | |||
Confirmed the actual DOM structure directly (not guessed): <body>'s | |||
not a | real children are #mw-page-base, #mw-head-base, #content, #mw-navigation | ||
(which itself contains #mw-head then #mw-panel, already in the right | |||
relative order), #footer. Since all four major regions are direct | |||
children of <body>, flexbox `order` on <body> can reorder them properly | |||
without needing to touch the DOM itself. | |||
Result: header/search/tabs, then sidebar nav, then content, then | |||
footer -- a plain stacked mobile layout, not a collapsible hamburger | |||
menu, but a correct and readable order. */ | |||
@media ( max-width: 800px ) { | @media ( max-width: 800px ) { | ||
body { | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
#mw-page-base, | |||
#mw-head-base { | |||
order: 0; | |||
height: auto; | |||
} | |||
#mw-navigation { | |||
order: 1; | |||
} | |||
#content { | |||
order: 2; | |||
} | |||
.mw-footer { | |||
order: 3; | |||
} | |||
#mw-head { | #mw-head { | ||
position: static; | position: static; | ||
| Line 117: | Line 143: | ||
padding: 0.5em 1em; | padding: 0.5em 1em; | ||
float: none; | float: none; | ||
border-top: 1px solid #a2a9b1; | |||
border-bottom: 1px solid #a2a9b1; | |||
} | } | ||
.mw-body, | .mw-body, | ||
#mw-data-after-content, | #mw-data-after-content, | ||
.mw-footer { | .mw-footer { | ||
Revision as of 02:49, 7 August 2026
/* EDFM site-wide styling.
* Original CSS written for this project — no code or assets copied from
* runescape.wiki or any other site. Visual direction (warm gold/amber
* accent, classic always-visible left sidebar, bordered header, right-
* floated infoboxes) is loosely inspired by that genre of game wiki, per
* operator request, but implemented from scratch.
*
* SKIN NOTE (2026-08-07): the site uses Vector "legacy" (2011), not
* Vector 2022, specifically because of this layout request. Vector 2022's
* left sidebar can only ever be "pinned" (persistently visible) for
* logged-in users — its own FeatureManager hard-codes a REQUIREMENT_
* LOGGED_IN check for the pinned-menu feature (skins/Vector/includes/
* FeatureManagement/FeatureManagerFactory.php), so no LocalSettings
* config or CSS override can make it persistent for anonymous visitors;
* the actual menu content isn't even server-rendered into the sidebar
* DOM location for them, so there's nothing for CSS to reveal. This was
* verified the hard way (screenshot testing 3 different approaches)
* before switching skins — see docs/content-style-guide.md for the full
* account. Vector legacy has no such restriction (no pin/unpin system at
* all -- the sidebar is unconditionally always rendered), which is
* exactly the classic layout that was asked for, at the cost of legacy's
* weaker built-in mobile responsiveness -- patched below.
*
* Keep this file simple. If it grows much further, split it into
* per-purpose TemplateStyles sheets instead of one large Common.css.
*/
/* --- Accent colour: shift the default Wikipedia-blue "progressive" token
family to the amber already used across EDFM's editorial templates (see
Template:EDFM style/styles.css). Cascades to links, active-tab
underlines, button focus rings, etc. site-wide, in both skins. */
:root {
--color-progressive: #a15a00;
--color-progressive--hover: #7a4500;
--color-progressive--active: #5c3400;
--color-progressive--focus: #a15a00;
--background-color-progressive: #a15a00;
--background-color-progressive--hover: #7a4500;
--background-color-progressive--active: #5c3400;
--border-color-progressive: #a15a00;
--border-color-progressive--hover: #7a4500;
--border-color-progressive--active: #5c3400;
}
a { color: #a15a00; }
a:visited { color: #8a5a2e; }
a:hover { color: #7a4500; }
/* --- Sidebar section headings: bolder, wider letter-spacing, accent-tinted
-- a clean "reference manual nav" feel instead of Vector's plain grey. */
.vector-menu-heading {
color: #a15a00;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 0.8em;
}
/* --- Header: a permanent accent band under the header/tabs area, closer to
a "branded masthead" feel than a plain white header. Kept restrained --
no background image, no gradient, just a bottom border. */
#p-personal,
.vector-header-container {
border-bottom: 3px solid #a15a00;
}
#mw-head-base {
border-bottom: 3px solid #a15a00;
}
/* --- Mobile: Vector legacy has NO built-in responsive breakpoint at all
(unlike Vector 2022) -- its entire header region (#mw-head, tabs, search,
personal tools/login) is built with absolute positioning and floats that
all assume a fixed-width sidebar reserving 10-11em on the left, AND the
page's actual DOM order is content-then-navigation-then-footer (the
absolute positioning was doing double duty: both moving the header
visually to the top AND compensating for that DOM order). Simply
removing the positioning stacks things in DOM order, which reads oddly
on a phone (article text, then the nav/sidebar, then the footer).
Confirmed the actual DOM structure directly (not guessed): <body>'s
real children are #mw-page-base, #mw-head-base, #content, #mw-navigation
(which itself contains #mw-head then #mw-panel, already in the right
relative order), #footer. Since all four major regions are direct
children of <body>, flexbox `order` on <body> can reorder them properly
without needing to touch the DOM itself.
Result: header/search/tabs, then sidebar nav, then content, then
footer -- a plain stacked mobile layout, not a collapsible hamburger
menu, but a correct and readable order. */
@media ( max-width: 800px ) {
body {
display: flex;
flex-direction: column;
}
#mw-page-base,
#mw-head-base {
order: 0;
height: auto;
}
#mw-navigation {
order: 1;
}
#content {
order: 2;
}
.mw-footer {
order: 3;
}
#mw-head {
position: static;
width: auto;
}
#left-navigation,
#right-navigation {
float: none;
margin: 0;
width: auto;
clear: both;
}
#left-navigation {
margin-top: 0;
}
#p-personal {
position: static;
text-align: right;
padding: 0.5em 1em;
right: auto;
top: auto;
}
#p-personal ul {
padding-left: 0;
}
.vector-search-box {
float: none;
margin: 0.5em 1em;
display: block;
}
.vector-search-box-inner {
width: auto;
max-width: none;
}
#mw-panel {
position: static;
width: auto;
padding: 0.5em 1em;
float: none;
border-top: 1px solid #a2a9b1;
border-bottom: 1px solid #a2a9b1;
}
.mw-body,
#mw-data-after-content,
.mw-footer {
margin-left: 0;
}
.mw-body {
margin-top: 0;
border-width: 0;
padding: 1em;
}
}
/* --- Generic infobox: a right-floated, bordered reference box, the kind of
structural element most game-reference wikis use for at-a-glance specs.
Deliberately plain -- no glow, no gradients, no game-specific chrome.
See Template:Infobox for usage. */
.edfm-infobox {
float: right;
clear: right;
width: 300px;
margin: 0 0 1.2em 1.2em;
border: 1px solid #a15a00;
background: #f8f4ee;
font-size: 0.9em;
}
.edfm-infobox-title {
background: #a15a00;
color: #fff;
font-weight: 700;
text-align: center;
padding: 0.4em 0.6em;
}
.edfm-infobox-image {
text-align: center;
padding: 0.6em;
border-bottom: 1px solid #a2a9b1;
}
.edfm-infobox-row {
display: flex;
border-bottom: 1px solid #eaecf0;
padding: 0.35em 0.6em;
}
.edfm-infobox-row:last-child {
border-bottom: none;
}
.edfm-infobox-label {
font-weight: 700;
width: 40%;
flex-shrink: 0;
}
.edfm-infobox-value {
width: 60%;
}
@media ( max-width: 640px ) {
.edfm-infobox {
float: none;
width: auto;
margin: 1em 0;
}
}