MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
Hide generated title on Main Page |
Style contextual eyebrow links for dark EDFM theme |
||
| (47 intermediate revisions by 5 users not shown) | |||
| Line 1: | Line 1: | ||
| Line 227: | Line 237: | ||
#firstHeading { | #firstHeading { | ||
color: var( --edfm-text ) !important; | color: var( --edfm-text ) !important; | ||
font-family: | font-family: Georgia, 'Times New Roman', Times, serif; | ||
font-size: | font-size: clamp( 1.75rem, 1.35rem + 1.45vw, 2.15rem ); | ||
font-weight: 700; | font-weight: 700; | ||
margin- | letter-spacing: 0; | ||
line-height: 1.18; | |||
margin: 0.15em 0 0.25em; | |||
padding-bottom: 0.22em; | |||
border-bottom: 1px solid var( --edfm-border ); | |||
} | } | ||
/* Section headings (h2): "// " prefix in orange, bright heading text, a | /* Section headings (h2): "// " prefix in orange, bright heading text, a | ||
| Line 241: | Line 255: | ||
.mw-body h2 { | .mw-body h2 { | ||
position: relative; | position: relative; | ||
padding-bottom: 0. | padding-bottom: 0.25em; | ||
margin-top: | margin-top: 2rem; | ||
margin-bottom: 1. | margin-bottom: 0.85rem; | ||
font- | font-family: Georgia, 'Times New Roman', Times, serif; | ||
font-size: clamp( 1.28rem, 1.08rem + 0.65vw, 1.62rem ); | |||
font-weight: 500; | |||
letter-spacing: 0; | |||
border-bottom: 1px solid var( --edfm-border ) !important; | |||
} | } | ||
.mw-body h2::before { | .mw-body h2::before { | ||
content: | content: none; | ||
} | } | ||
.mw-body h2:has( .edfm-section-number )::before { | .mw-body h2:has( .edfm-section-number )::before { | ||
| Line 293: | Line 309: | ||
.mw-body p { | .mw-body p { | ||
margin: 0 0 1.1em 0; | margin: 0 0 1.1em 0; | ||
max-width: | max-width: none !important; /* Site-wide full-width pass: article text should use the whole content rail. */ | ||
} | } | ||
.mw-body ul, | .mw-body ul, | ||
| Line 299: | Line 315: | ||
line-height: 1.7; | line-height: 1.7; | ||
margin-bottom: 1.1em; | margin-bottom: 1.1em; | ||
} | |||
/* EDFM article bullets: replace the stock browser dot with the provided | |||
cyan field-manual arrow, scaled to text size rather than using the source | |||
image's native 100x91 dimensions. This targets article unordered lists; | |||
interface/navigation lists such as the Jump To TOC and galleries are reset | |||
below so they keep their component-specific layout. */ | |||
.mw-parser-output ul { | |||
list-style: none; | |||
padding-left: 1.55em; | |||
} | |||
.mw-parser-output ul > li { | |||
position: relative; | |||
} | |||
.mw-parser-output ul > li::before { | |||
content: ''; | |||
position: absolute; | |||
left: -1.35em; | |||
top: 0.48em; | |||
width: 0.82em; | |||
height: 0.75em; | |||
background-image: url( '/edfm-assets/list-bullet-arrow.png' ); | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
background-size: contain; | |||
opacity: 0.95; | |||
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.35 ) ); | |||
} | |||
.mw-parser-output ul ul { | |||
margin-top: 0.3em; | |||
padding-left: 1.45em; | |||
} | |||
.mw-parser-output ul ul > li::before { | |||
left: -1.25em; | |||
top: 0.52em; | |||
width: 0.68em; | |||
height: 0.62em; | |||
opacity: 0.82; | |||
} | |||
/* Component exceptions: these are not prose bullet lists. */ | |||
.mw-parser-output .toc ul, | |||
.mw-parser-output .gallery, | |||
.mw-parser-output .gallery ul, | |||
.mw-parser-output .mw-gallery-traditional, | |||
.mw-parser-output .mw-gallery-traditional ul { | |||
padding-left: 0; | |||
} | |||
.mw-parser-output .toc li::before, | |||
.mw-parser-output .gallery li::before, | |||
.mw-parser-output .mw-gallery-traditional li::before { | |||
content: none; | |||
} | } | ||
/* MW 1.46 wraps headings in a `.mw-heading2`/`.mw-heading3` div, so the | /* MW 1.46 wraps headings in a `.mw-heading2`/`.mw-heading3` div, so the | ||
| Line 443: | Line 510: | ||
} | } | ||
.mw-body table.wikitable, | .mw-body table.wikitable, | ||
.mw-body table.mw-datatable { | .mw-body table.mw-datatable, | ||
.mw-parser-output > table.wikitable, | |||
.mw-parser-output > table.mw-datatable { | |||
/* Keep real table layout so header cells and body cells share one column grid. | /* Keep real table layout so header cells and body cells share one column grid. | ||
The earlier display:block + tbody display:table overflow hack made sortable | The earlier display:block + tbody display:table overflow hack made sortable | ||
| Line 484: | Line 553: | ||
larger title/subtitle type scale, rather than one drawn box. */ | larger title/subtitle type scale, rather than one drawn box. */ | ||
.edfm-eyebrow { | .edfm-eyebrow { | ||
display: | display: block; | ||
margin: 0.2em 0 0.15em 0; | |||
padding: 0; | |||
border: 0; | |||
padding | font-family: var( --edfm-sans ); | ||
border | font-size: 0.78rem; | ||
font-family: var( --edfm- | font-weight: 600; | ||
font-size: | letter-spacing: 0.04em; | ||
font-weight: | |||
letter-spacing: 0. | |||
text-transform: uppercase; | text-transform: uppercase; | ||
color: var( --edfm-text-dim ); | color: var( --edfm-text-dim ); | ||
} | } | ||
.edfm-eyebrow::before { | .edfm-eyebrow::before { | ||
content: | content: none; | ||
} | } | ||
.edfm-eyebrow .edfm-orange-mark { | .edfm-eyebrow .edfm-orange-mark { | ||
color: var( --edfm-orange ); | color: var( --edfm-orange ); | ||
} | |||
.edfm-eyebrow a, | |||
.edfm-eyebrow a:visited { | |||
color: inherit; | |||
text-decoration: underline; | |||
text-decoration-color: rgba( 255, 138, 0, 0.45 ); | |||
text-decoration-thickness: 0.08em; | |||
text-underline-offset: 0.22em; | |||
} | |||
.edfm-eyebrow a:hover { | |||
color: var( --edfm-orange ); | |||
text-decoration-color: currentColor; | |||
} | |||
.edfm-eyebrow a:focus-visible { | |||
color: var( --edfm-orange ); | |||
outline: 2px solid var( --edfm-orange ); | |||
outline-offset: 0.18em; | |||
border-radius: 2px; | |||
} | } | ||
.edfm-deck { | .edfm-deck { | ||
color: var( --edfm-text-muted ); | color: var( --edfm-text-muted ); | ||
font-size: | font-family: var( --edfm-sans ); | ||
line-height: 1. | font-size: 0.95rem; | ||
max-width: | font-style: italic; | ||
margin: 0. | line-height: 1.45; | ||
padding | max-width: none; | ||
border | margin: 0.25em 0 0.85em 1.4em; | ||
padding: 0; | |||
border: 0; | |||
} | } | ||
| Line 530: | Line 612: | ||
z-index: 3; | z-index: 3; | ||
} | } | ||
/* Logo anchors the sidebar visually. | /* Logo anchors the sidebar visually. Keep raster logo artwork contained in | ||
Vector legacy's fixed sidebar slot rather than letting the image render at | |||
its intrinsic PNG size and clip against the rail. */ | |||
#p-logo { | #p-logo { | ||
box-sizing: border-box; | box-sizing: border-box; | ||
width: auto; | width: auto; | ||
margin: 0 -0.65rem | height: 10rem; | ||
padding: 0. | margin: 0 -0.65rem 0.65rem -0.65rem; | ||
padding: 0.5rem 0.55rem 0.45rem 0.55rem; | |||
border-bottom: 0 !important; | border-bottom: 0 !important; | ||
background: radial-gradient( circle at 50% 25%, rgba( 255, 138, 0, 0.08 ), transparent 58% ); | background: radial-gradient( circle at 50% 25%, rgba( 255, 138, 0, 0.08 ), transparent 58% ); | ||
overflow: hidden; | |||
} | |||
#p-logo a.mw-wiki-logo { | |||
box-sizing: border-box; | |||
display: block; | |||
width: 100% !important; | |||
height: 100% !important; | |||
background-position: center center !important; | |||
background-repeat: no-repeat !important; | |||
background-size: contain !important; | |||
} | } | ||
/* Each nav group gets real breathing room from the one before it instead | /* Each nav group gets real breathing room from the one before it instead | ||
of being packed together like a stock wiki sidebar. */ | of being packed together like a stock wiki sidebar. */ | ||
#mw-panel .portal, | |||
#mw-panel .vector-menu-portal { | |||
#mw-panel .portal, | |||
#mw-panel .vector-menu-portal { | |||
box-sizing: border-box; | box-sizing: border-box; | ||
width: auto; | width: auto; | ||
| Line 653: | Line 700: | ||
margin-left: -0.5em; | margin-left: -0.5em; | ||
margin-bottom: 0.4em; | margin-bottom: 0.4em; | ||
} | |||
/* Keep the first static Vector sidebar portlet visibly labeled after renaming | |||
MediaWiki:Sidebar's navigation group to "Getting Started". Vector legacy | |||
hides the first post-logo portlet heading by default via #p-logo + .mw-portlet, | |||
so restore only this renamed starter group instead of changing all portlets. */ | |||
#p-Getting_Started.vector-menu-portal .vector-menu-heading, | |||
#p-Getting_Started.portal .vector-menu-heading { | |||
display: block !important; | |||
visibility: visible !important; | |||
height: auto !important; | |||
width: auto !important; | |||
overflow: visible !important; | |||
clip: auto !important; | |||
clip-path: none !important; | |||
} | |||
#p-Getting_Started .vector-menu-heading-label { | |||
display: inline !important; | |||
} | } | ||
| Line 719: | Line 784: | ||
#p-personal a:hover { | #p-personal a:hover { | ||
color: var( --edfm-orange ); | color: var( --edfm-orange ); | ||
} | |||
/* Echo's alert/notification icons (bell/tray) in the personal toolbar. | |||
Confirmed by rendering the actual logged-in markup server-side: in | |||
legacy Vector these links get merged straight into the plain personal | |||
tools menu (SkinVectorLegacy::runOnSkinTemplateNavigationHooks) rather | |||
than going through Vector's own `.vector-icon` icon system (that only | |||
wraps items in the views/associated-pages menus). The icon is instead a | |||
`background-image` on the <a> itself, from OOUI's generated | |||
`.oo-ui-icon-bell` / `-tray` / `-bellOutline` classes -- a flat black SVG | |||
baked straight into the image URL, so it's not recolourable via | |||
`background-color` the way the search icon was; this is exactly the | |||
"dark OOUI icon invisible on our dark theme" problem the invert fix | |||
below already solves elsewhere, so reuse that same technique here | |||
instead of a different one. The unread-count badge itself already | |||
colours correctly on its own (Echo maps it to | |||
`@background-color-destructive` / `-progressive`, both redefined to | |||
EDFM's palette) and, being a mostly-saturated colour rather than | |||
black/white/grey, survives this filter close to unchanged. */ | |||
#pt-notifications-alert .oo-ui-icon-bell, | |||
#pt-notifications-notice .oo-ui-icon-tray, | |||
#pt-notifications .oo-ui-icon-bellOutline { | |||
filter: invert( 1 ) hue-rotate( 180deg ); | |||
} | } | ||
.edfm-topbar-clocks { | .edfm-topbar-clocks { | ||
| Line 786: | Line 873: | ||
#searchInput::placeholder { | #searchInput::placeholder { | ||
color: var( --edfm-text-dim ); | color: var( --edfm-text-dim ); | ||
} | |||
/* Search submit control: neither rendering path gives this any color of | |||
its own, so on our dark input background it was effectively invisible. | |||
The no-JS legacy form's <button> is a plain black icon at 0.67 opacity | |||
(core skins.vector.styles.legacy/components/SearchBox.less); the | |||
JS/Vue-Codex widget (.vector-search-box-vue) has no separate button at | |||
all, just a start icon inside the input using the same technique | |||
(mask-image recoloured via `background-color`, see Codex's | |||
CdxSearchInput.css). Recolour both to match the site's orange | |||
progressive-action colour used everywhere else. */ | |||
.vector-search-box-vue .cdx-text-input__start-icon { | |||
background-color: var( --edfm-orange ); | |||
opacity: 1; | |||
} | |||
.searchButton[ name='go' ] { | |||
background-image: none; | |||
background-color: var( --edfm-orange ); | |||
opacity: 0.85; | |||
-webkit-mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' ); | |||
mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' ); | |||
} | |||
.searchButton[ name='go' ]:hover, | |||
.searchButton[ name='go' ]:focus { | |||
background-color: var( --edfm-orange-bright ); | |||
opacity: 1; | |||
} | } | ||
/* Namespace tabs (Main Page / Discussion, left) and view tabs | /* Namespace tabs (Main Page / Discussion, left) and view tabs | ||
| Line 963: | Line 1,075: | ||
} | } | ||
.edfm-home-hero-text { | .edfm-home-hero-text { | ||
max-width: | max-width: none; | ||
margin-top: 0.55rem; | margin-top: 0.55rem; | ||
color: var( --edfm-text-muted ); | color: var( --edfm-text-muted ); | ||
| Line 1,210: | Line 1,322: | ||
color: var( --edfm-text-dim ); | color: var( --edfm-text-dim ); | ||
} | } | ||
/* Desktop: a | /* Desktop: a balanced multi-column jump list. CSS grid flows row-first, | ||
which makes numbered sections read 1, 2, 3, 4 across the first row. For a | |||
reference/walkthrough TOC, scan order is clearer when each column reads | |||
downward first: 1/2/3, then 4/5/6, then 7/8/9. CSS columns preserve the | |||
real DOM/source order while presenting that column-major layout on every | |||
page that uses the stock MediaWiki TOC. */ | |||
.toc > ul { | .toc > ul { | ||
display: | display: block; | ||
/* Short TOCs, like the front page's four Jump To entries, read awkwardly | |||
gap: 0. | in three CSS columns because the browser fills only two narrow columns | ||
and leaves an empty third slot. Default to two full-width columns so | |||
short jump lists feel centered and stretched across the article rail. */ | |||
column-count: 2; | |||
column-gap: 0.55rem; | |||
list-style: none; | list-style: none; | ||
margin: 0; | margin: 0 auto; | ||
padding: 0; | padding: 0; | ||
} | |||
/* Longer article TOCs still benefit from the denser three-column layout. This | |||
keeps source/keyboard order untouched while avoiding the empty-column look | |||
on short page-level navigation blocks. */ | |||
.toc > ul:has( > li:nth-child( 5 ) ) { | |||
column-count: 3; | |||
} | |||
.toc > ul > li { | |||
break-inside: avoid; | |||
page-break-inside: avoid; | |||
-webkit-column-break-inside: avoid; | |||
margin: 0 0 0.45rem; | |||
} | } | ||
.toc li { | .toc li { | ||
margin: 0; | margin-top: 0; | ||
} | } | ||
/* 2026-08-08 density pass: reverted to side-by-side number/label (from the | /* 2026-08-08 density pass: reverted to side-by-side number/label (from the | ||
| Line 1,296: | Line 1,425: | ||
line-height: 1.3; | line-height: 1.3; | ||
} | } | ||
/* | /* Column count changes only at readable/touch-friendly breakpoints. Keep | ||
column-major ordering at 3 and 2 columns; mobile becomes the natural single | |||
source-order list. */ | |||
@media ( max-width: 860px ) { | @media ( max-width: 860px ) { | ||
.toc > ul { | .toc > ul { | ||
column-count: 2; | |||
} | } | ||
} | } | ||
@media ( max-width: 560px ) { | @media ( max-width: 560px ) { | ||
.toc > ul { | .toc > ul { | ||
column-count: 1; | |||
} | } | ||
/* Single-column tiles are already full-width here, so there's no | /* Single-column tiles are already full-width here, so there's no | ||
| Line 1,327: | Line 1,445: | ||
padding: 0.7em 0.95em; | padding: 0.7em 0.95em; | ||
} | } | ||
} | |||
/* ========================================================================== | |||
5b. FULL-WIDTH ARTICLE FLOW OVERRIDES | |||
========================================================================== */ | |||
/* 2026-08-10 audit: EDFM pages should not leave half the article rail empty. | |||
Earlier readability caps on paragraphs/hero copy made long-form sections | |||
look like narrow blocks while tables, TOCs, and navigation tiles spanned | |||
the page. Keep the main rail full-width everywhere; individual components | |||
may still opt into their own internal grids, but ordinary article copy and | |||
common block containers should stretch to the content edge. */ | |||
.mw-parser-output > p, | |||
.mw-parser-output > ul, | |||
.mw-parser-output > ol, | |||
.mw-parser-output > dl, | |||
.mw-parser-output > div:not( .thumb ):not( .tright ):not( .tleft ):not( .floatright ):not( .floatleft ):not( .edfm-status ):not( .edfm-panel ):not( .edfm-box ) { | |||
max-width: none; | |||
box-sizing: border-box; | |||
} | |||
/* Final guard against stale/skin rules recapping article prose while leaving | |||
compact maintenance/status panels free to keep their intentional centred width. */ | |||
.mw-body .mw-parser-output > p, | |||
.mw-parser-output > p { | |||
max-width: none !important; | |||
width: 100%; | |||
box-sizing: border-box; | |||
} | } | ||
| Line 1,380: | Line 1,525: | ||
} | } | ||
/* ========================================================================== | /* mw-json content model (Module:Data/* pages, e.g. Module:Data/Engineers/*) | ||
15. FOOTER | -- MediaWiki core's JSON page view (resources/src/mediawiki.content.json.less) | ||
========================================================================== */ | styles itself from Codex design tokens, which this site's dark theme never | ||
/* A real branded footer: a small wordmark line (pure CSS generated | touches, so these tables rendered in MediaWiki's stock light colours | ||
content -- decorative branding only, redundant with the sidebar logo | against every other dark surface on the site. Recoloured to match the | ||
already visible, so nothing load-bearing depends on it being | table.wikitable treatment above instead of inventing a new look. */ | ||
selectable), a top rule with more separation from the article above it, | table.mw-json { | ||
background-color: var( --edfm-surface-2 ); | |||
color: var( --edfm-text ); | |||
font-size: var( --edfm-fs-body ); | |||
} | |||
table.mw-json tr { | |||
background-color: var( --edfm-surface-2 ); | |||
} | |||
table.mw-json th, | |||
table.mw-json td { | |||
border-color: var( --edfm-border-soft ); | |||
padding: 0.6em 0.8em; | |||
} | |||
table.mw-json th { | |||
background-color: var( --edfm-surface-3 ); | |||
color: var( --edfm-text ); | |||
font-family: var( --edfm-mono ); | |||
letter-spacing: 0.03em; | |||
text-transform: uppercase; | |||
font-size: var( --edfm-fs-meta ); | |||
text-align: left; | |||
} | |||
.mw-json-value, | |||
.mw-json-single-value { | |||
background-color: transparent; | |||
color: var( --edfm-text ); | |||
} | |||
.mw-json-empty { | |||
background-color: transparent; | |||
color: var( --edfm-text-dim ); | |||
} | |||
/* ========================================================================== | |||
15. FOOTER | |||
========================================================================== */ | |||
/* A real branded footer: a small wordmark line (pure CSS generated | |||
content -- decorative branding only, redundant with the sidebar logo | |||
already visible, so nothing load-bearing depends on it being | |||
selectable), a top rule with more separation from the article above it, | |||
and MediaWiki's real info/places/icon links laid out on a clean grid | and MediaWiki's real info/places/icon links laid out on a clean grid | ||
with the badges aligned as a group rather than floating alone. */ | with the badges aligned as a group rather than floating alone. */ | ||
| Line 1,479: | Line 1,662: | ||
background: none !important; | background: none !important; | ||
border: none !important; | border: none !important; | ||
border-top: 1px solid var( --edfm-border | border-top: 1px solid var( --edfm-border ) !important; | ||
color: var( --edfm-text-dim ); | color: var( --edfm-text-dim ); | ||
font-size: var( --edfm-fs-meta ); | font-size: var( --edfm-fs-meta ); | ||
| Line 1,508: | Line 1,691: | ||
========================================================================== */ | ========================================================================== */ | ||
.edfm-infobox { | .edfm-infobox { | ||
position: relative; | |||
z-index: 2; | |||
float: right; | float: right; | ||
clear: right; | clear: right; | ||
width: | width: 350px; | ||
margin: 0 0 1. | max-width: min( 350px, 42% ); | ||
margin: 0 0 1.25em 1.35em; | |||
border: 1px solid var( --edfm-border ); | border: 1px solid var( --edfm-border ); | ||
border-top: 2px solid var( --edfm-orange ); | border-top: 2px solid var( --edfm-orange ); | ||
| Line 1,589: | Line 1,775: | ||
float: none; | float: none; | ||
width: auto; | width: auto; | ||
max-width: none; | |||
margin: 1em 0; | margin: 1em 0; | ||
} | } | ||
| Line 1,778: | Line 1,965: | ||
border-color: var( --edfm-border ) !important; | border-color: var( --edfm-border ) !important; | ||
} | } | ||
.ve-ui- | /* VisualEditor's reference dialog embeds a mini target widget for the | ||
.oo-ui- | reference body. The widget ships with a white WikimediaUI base surface, | ||
.oo-ui- | so theme that inner editing box separately from the surrounding OOUI | ||
background: var( --edfm-surface- | dialog chrome. */ | ||
.ve-ui-mwReferenceDialog .ve-ui-targetWidget, | |||
.ve-ui-mwReferenceDialog .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ), | |||
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget, | |||
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ) { | |||
background: var( --edfm-surface-1 ) !important; | |||
color: var( --edfm-text ) !important; | color: var( --edfm-text ) !important; | ||
border-color: var( --edfm-border ) !important; | |||
} | } | ||
.oo-ui-popupWidget-popup { | .ve-ui-mwReferenceDialog .ve-ui-surface, | ||
background: var( --edfm-surface-2 ) !important; | .ve-ui-mwReferenceDialog .ve-ce-surface, | ||
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode, | |||
.ve-ui-mwReferenceDialog .ve-ce-documentNode, | |||
.ve-ui-mwReferenceDialog .ve-ui-surface-placeholder { | |||
background: var( --edfm-bg-deep ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode p, | |||
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode li, | |||
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode span { | |||
color: var( --edfm-text ) !important; | |||
} | |||
.ve-ui-mwReferenceDialog .ve-ui-targetWidget-focused { | |||
border-color: var( --edfm-cyan ) !important; | |||
box-shadow: inset 0 0 0 1px rgba( 77, 199, 232, 0.42 ) !important; | |||
} | |||
.ve-ui-mwSaveDialog-options, | |||
.oo-ui-panelLayout, | |||
.oo-ui-window-body { | |||
background: var( --edfm-surface-2 ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
.oo-ui-popupWidget-popup { | |||
background: var( --edfm-surface-2 ) !important; | |||
color: var( --edfm-text ) !important; | color: var( --edfm-text ) !important; | ||
border-color: var( --edfm-border ) !important; | border-color: var( --edfm-border ) !important; | ||
| Line 1,882: | Line 2,098: | ||
.wikiEditor-ui-tabs, | .wikiEditor-ui-tabs, | ||
.wikiEditor-ui-buttons, | .wikiEditor-ui-buttons, | ||
.wikiEditor-ui-left, | |||
.wikiEditor-ui-right, | |||
.editButtons, | |||
.CodeMirror, | .CodeMirror, | ||
.CodeMirror-scroll { | .CodeMirror-scroll { | ||
| Line 1,946: | Line 2,165: | ||
.CodeMirror-matchingbracket { | .CodeMirror-matchingbracket { | ||
color: var( --edfm-orange-bright ) !important; | color: var( --edfm-orange-bright ) !important; | ||
} | |||
/* VisualEditor's standalone "Edit source" mode (.ve-ui-surface-source, set | |||
by ve.ui.Surface when this.mode === 'source') ships its own white surface | |||
-- unlike visual mode, which reuses normal dark article styling since | |||
it's just contenteditable article HTML. Scoped to -source only so the | |||
visual WYSIWYG canvas is untouched. */ | |||
.ve-ui-surface-source, | |||
.ve-init-mw-tempWikitextEditorWidget { | |||
background: var( --edfm-surface-1 ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
.ve-ui-surface-source .ve-ce-surface, | |||
.ve-ui-surface-source .ve-ce-documentNode, | |||
.ve-ui-surface-source .ve-ui-surface-placeholder { | |||
background: var( --edfm-bg-deep ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | } | ||
| Line 1,984: | Line 2,220: | ||
} | } | ||
/* =========================================================================== | |||
23. RUNE-WIKI-INSPIRED MOBILE APP SHELL | /* Core MediaWiki/action buttons: match EDFM dark theme instead of default white/orange controls. */ | ||
=========================================================================== */ | .mw-ui-button, | ||
/* Inspired by RuneScape.wiki's mobile ergonomics -- persistent top app bar, | .mw-htmlform-submit, | ||
large touch targets, off-canvas navigation, search-forward layout, and | .mw-htmlform-ooui-wrapper button, | ||
single-column readable article flow -- while preserving EDFM's dark field | #mw-patrol-form button, | ||
manual identity and not copying RuneScape.wiki assets/CSS. | #mw-patrol-form input[type="submit"], | ||
form.mw-htmlform button, | |||
form.mw-htmlform input[type="submit"], | |||
input[type="submit"].mw-ui-button, | |||
button.mw-ui-button, | |||
.cdx-button:not( .cdx-button--fake-button--enabled ) { | |||
background: var( --edfm-surface-4 ) !important; | |||
color: var( --edfm-text ) !important; | |||
border: 1px solid var( --edfm-border-strong, var( --edfm-border ) ) !important; | |||
border-radius: 0 !important; | |||
box-shadow: none !important; | |||
font-family: var( --edfm-mono ) !important; | |||
font-weight: 800 !important; | |||
text-shadow: none !important; | |||
} | |||
.mw-ui-button:hover, | |||
.mw-htmlform-submit:hover, | |||
.mw-htmlform-ooui-wrapper button:hover, | |||
#mw-patrol-form button:hover, | |||
#mw-patrol-form input[type="submit"]:hover, | |||
form.mw-htmlform button:hover, | |||
form.mw-htmlform input[type="submit"]:hover, | |||
input[type="submit"].mw-ui-button:hover, | |||
button.mw-ui-button:hover, | |||
.cdx-button:not( .cdx-button--fake-button--enabled ):hover { | |||
background: var( --edfm-surface-3 ) !important; | |||
color: var( --edfm-orange-bright ) !important; | |||
border-color: var( --edfm-orange ) !important; | |||
} | |||
.mw-ui-button:focus, | |||
.mw-htmlform-submit:focus, | |||
.mw-htmlform-ooui-wrapper button:focus, | |||
#mw-patrol-form button:focus, | |||
#mw-patrol-form input[type="submit"]:focus, | |||
form.mw-htmlform button:focus, | |||
form.mw-htmlform input[type="submit"]:focus, | |||
input[type="submit"].mw-ui-button:focus, | |||
button.mw-ui-button:focus, | |||
.cdx-button:not( .cdx-button--fake-button--enabled ):focus { | |||
outline: 2px solid var( --edfm-cyan ) !important; | |||
outline-offset: 2px !important; | |||
} | |||
/* Patrol action: remove the cramped review button from the public article chrome. */ | |||
#mw-patrol-form { | |||
display: none !important; | |||
} | |||
/* Frontier news: after removing the repeated dispatch list, keep attribution compact. */ | |||
.edfm-news-attribution-compact { | |||
margin-top: 0.35rem; | |||
padding-top: 0.6rem; | |||
} | |||
/* =========================================================================== | |||
23. RUNE-WIKI-INSPIRED MOBILE APP SHELL | |||
=========================================================================== */ | |||
/* Inspired by RuneScape.wiki's mobile ergonomics -- persistent top app bar, | |||
large touch targets, off-canvas navigation, search-forward layout, and | |||
single-column readable article flow -- while preserving EDFM's dark field | |||
manual identity and not copying RuneScape.wiki assets/CSS. | |||
The close button is injected into #mw-panel by Common.js, so it must be | The close button is injected into #mw-panel by Common.js, so it must be | ||
explicitly hidden by default; otherwise a tiny native white button appears | explicitly hidden by default; otherwise a tiny native white button appears | ||
| Line 2,139: | Line 2,436: | ||
align-items: center; | align-items: center; | ||
} | } | ||
#p-personal { | /* Only hides it at its original #mw-head location, and only once JS has | ||
confirmed it will actually relocate it into #mw-panel below (Common.js | |||
initMobileChrome) -- nojs visitors still reach login/account through | |||
the earlier stacked-layout #p-personal rule instead, rather than | |||
losing the control outright. */ | |||
html.client-js #mw-head #p-personal { | |||
display: none; | display: none; | ||
} | |||
/* The desktop #p-personal rule further down this file sets | |||
`display: flex` (a plain, unscoped ID selector, so it applies | |||
wherever the element ends up) intended for a wide horizontal header | |||
strip. Left as flex-row inside the narrow drawer, its heading and | |||
list get squeezed to near-zero width by flexbox's default shrink | |||
behaviour and wrap character-by-character. Reset back to normal | |||
block stacking here so it lays out exactly like every other | |||
#mw-panel section (heading, then list, top to bottom). */ | |||
#mw-panel #p-personal { | |||
display: block; | |||
text-align: left; | |||
} | |||
#mw-panel #p-personal ul { | |||
display: block; | |||
} | |||
#mw-panel #p-personal li { | |||
margin: 0; | |||
} | |||
/* #p-logo (the wiki logo) lives in #mw-panel on desktop too, so this | |||
has to stay inside this mobile-only block rather than becoming a | |||
bare #mw-panel #p-logo rule -- unlike #p-personal, JS never moves | |||
this one, it's always been here. Confirmed by direct testing: the | |||
combination already on #p-logo elsewhere in this file | |||
(box-sizing:border-box + width:auto + overflow:hidden) ends up | |||
shrink-to-fit instead of filling the available width once this | |||
block's own #mw-panel padding drops to 0 -- forcing an explicit | |||
width sidesteps the ambiguity rather than removing overflow:hidden | |||
(which is there to clip the background-image cleanly) or relying on | |||
auto again. */ | |||
#p-logo { | |||
width: 100%; | |||
} | } | ||
#mw-panel { | #mw-panel { | ||
| Line 2,612: | Line 2,946: | ||
font-size: var( --edfm-fs-meta ); | font-size: var( --edfm-fs-meta ); | ||
line-height: 1.45; | line-height: 1.45; | ||
} | |||
/* Patrol action: hide MediaWiki generated patrol footer/link from article chrome. */ | |||
.patrollink, | |||
.patrollink[data-mw-interface], | |||
.patrollink .cdx-button, | |||
#mw-content-text + .patrollink, | |||
.mw-parser-output + .patrollink { | |||
display: none !important; | |||
visibility: hidden !important; | |||
height: 0 !important; | |||
min-height: 0 !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 0 !important; | |||
overflow: hidden !important; | |||
} | |||
/* =========================================================================== | |||
2026-08-10 PROSE RAIL SLEDGEHAMMER | |||
=========================================================================== */ | |||
/* Plain article prose on EDFM is supposed to occupy the article rail. Keep this | |||
deliberately simple and selector-separated: no comma-list dependency on | |||
advanced :not() parsing, no TemplateStyles scoping, and both physical and | |||
logical width properties so later/readability rules cannot re-cap lines. */ | |||
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > p, | |||
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ul, | |||
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ol, | |||
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > dl { | |||
display: block !important; | |||
width: 100% !important; | |||
max-width: none !important; | |||
inline-size: 100% !important; | |||
max-inline-size: none !important; | |||
box-sizing: border-box !important; | |||
} | |||
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output p { | |||
max-width: none !important; | |||
max-inline-size: none !important; | |||
} | |||
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output li, | |||
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output dd { | |||
max-width: none !important; | |||
max-inline-size: none !important; | |||
} | |||
/* Restore the intentional compact maintenance notice after the broad prose | |||
override above. */ | |||
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-status, | |||
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-panel-review, | |||
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-status, | |||
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-panel-draft, | |||
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-draft { | |||
width: auto !important; | |||
max-width: 44rem !important; | |||
inline-size: auto !important; | |||
max-inline-size: 44rem !important; | |||
margin-left: auto !important; | |||
margin-right: auto !important; | |||
} | |||
/* ========================================================================== | |||
EDFM login/register auth surface template alignment | |||
========================================================================== */ | |||
body.mediawiki.mw-special-Userlogin #userloginForm, | |||
body.mediawiki.mw-special-CreateAccount #userloginForm { | |||
color: var( --edfm-text ); | |||
} | |||
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-label__label__text, | |||
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-label__label__text { | |||
color: var( --edfm-text ) !important; | |||
font-family: var( --edfm-mono ); | |||
font-size: 0.82rem; | |||
font-weight: 850; | |||
letter-spacing: 0.015em; | |||
} | |||
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input, | |||
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input, | |||
body.mediawiki.mw-special-Userlogin #userloginForm input[type='text'], | |||
body.mediawiki.mw-special-Userlogin #userloginForm input[type='password'], | |||
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='text'], | |||
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='password'] { | |||
background: var( --edfm-surface-1 ) !important; | |||
border: 1px solid var( --edfm-border ) !important; | |||
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ); | |||
color: var( --edfm-text ) !important; | |||
} | |||
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input::placeholder, | |||
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input::placeholder { | |||
color: var( --edfm-text-muted ) !important; | |||
opacity: 1; | |||
} | |||
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field__help-text, | |||
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field__help-text, | |||
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-help, | |||
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-password-help { | |||
color: var( --edfm-text-muted ) !important; | |||
font-size: 0.88rem; | |||
line-height: 1.45; | |||
} | |||
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: stretch; | |||
gap: 0.55rem; | |||
margin-top: 0.85rem; | |||
padding: 0.9rem; | |||
background: | |||
linear-gradient( 135deg, rgba( 255, 138, 0, 0.12 ), transparent 34% ), | |||
var( --edfm-surface-1 ); | |||
border: 1px solid rgba( 255, 138, 0, 0.42 ); | |||
border-left: 3px solid var( --edfm-orange ); | |||
box-shadow: 0 12px 26px rgba( 0, 0, 0, 0.28 ); | |||
color: var( --edfm-text ); | |||
font-family: var( --edfm-mono ); | |||
font-size: var( --edfm-fs-meta ); | |||
font-weight: 850; | |||
letter-spacing: 0.04em; | |||
line-height: 1.35; | |||
text-transform: uppercase; | |||
} | |||
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
min-height: 0; | |||
margin: 0; | |||
padding: 0.55rem 0.8rem; | |||
background: rgba( 255, 138, 0, 0.1 ) !important; | |||
border: 1px solid var( --edfm-orange ) !important; | |||
border-radius: 0; | |||
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.035 ); | |||
color: var( --edfm-orange-bright ) !important; | |||
font-family: var( --edfm-mono ); | |||
font-size: 0.72rem; | |||
font-weight: 900; | |||
letter-spacing: 0.045em; | |||
line-height: 1.25; | |||
white-space: normal; | |||
overflow-wrap: anywhere; | |||
text-align: center; | |||
text-decoration: none !important; | |||
text-transform: uppercase; | |||
} | |||
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:hover, | |||
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:focus-visible { | |||
background: var( --edfm-orange ) !important; | |||
border-color: var( --edfm-orange-bright ) !important; | |||
color: #10171b !important; | |||
text-decoration: none !important; | |||
} | |||
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container { | |||
margin-top: 0.2rem; | |||
padding: 1.15rem 1.25rem; | |||
background: | |||
linear-gradient( 135deg, rgba( 66, 199, 217, 0.08 ), transparent 38% ), | |||
var( --edfm-surface-1 ); | |||
border: 1px solid var( --edfm-border ); | |||
border-left: 3px solid var( --edfm-cyan ); | |||
box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.28 ); | |||
color: var( --edfm-text ); | |||
} | |||
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-heading { | |||
color: var( --edfm-text ) !important; | |||
font-family: var( --edfm-sans ); | |||
font-size: 1.35rem; | |||
font-weight: 800; | |||
line-height: 1.25; | |||
} | |||
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list { | |||
margin-top: 1rem; | |||
} | |||
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text { | |||
color: var( --edfm-text-muted ) !important; | |||
opacity: 1 !important; | |||
} | |||
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text::before { | |||
filter: none !important; | |||
opacity: 0.78 !important; | |||
} | |||
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong { | |||
color: var( --edfm-orange-bright ) !important; | |||
font-family: var( --edfm-mono ); | |||
font-size: 1.75rem; | |||
font-weight: 850; | |||
} | |||
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p { | |||
color: var( --edfm-text-muted ) !important; | |||
font-size: 0.9rem; | |||
line-height: 1.35; | |||
} | |||
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label, | |||
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label { | |||
margin: 0 !important; | |||
} | |||
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text, | |||
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text { | |||
display: none !important; | |||
} | |||
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit, | |||
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit { | |||
background: var( --edfm-surface-3 ) !important; | |||
border: 1px solid var( --edfm-border ) !important; | |||
border-left: 3px solid var( --edfm-orange ) !important; | |||
border-radius: 0 !important; | |||
color: var( --edfm-text ) !important; | |||
font-family: var( --edfm-mono ); | |||
font-weight: 850; | |||
letter-spacing: 0.06em; | |||
} | |||
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit:hover, | |||
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit:hover { | |||
background: rgba( 255, 138, 0, 0.16 ) !important; | |||
border-color: var( --edfm-orange ) !important; | |||
color: var( --edfm-orange-bright ) !important; | |||
} | |||
/* ========================================================================== | |||
EDFM auth cards and CMDR account field polish — 2026-08-11 | |||
========================================================================== */ | |||
/* ========================================================================== | |||
EDFM auth cards and CMDR account field polish — 2026-08-11 | |||
========================================================================== */ | |||
body.mediawiki.mw-special-Userlogin #mw-content-text, | |||
body.mediawiki.mw-special-CreateAccount #mw-content-text { | |||
padding-top: 0.55rem; | |||
} | |||
body.mediawiki.mw-special-Userlogin #firstHeading { | |||
text-align: center; | |||
} | |||
body.mediawiki.mw-special-Userlogin #mw-content-text > .mw-ui-container { | |||
display: flex !important; | |||
justify-content: center !important; | |||
align-items: flex-start !important; | |||
width: 100% !important; | |||
max-width: none !important; | |||
margin: 0 auto !important; | |||
} | |||
body.mediawiki.mw-special-Userlogin #userloginForm { | |||
width: min( 100%, 34rem ) !important; | |||
margin: 0 auto !important; | |||
padding: 1.15rem 1.2rem 1.25rem !important; | |||
background: | |||
linear-gradient( 135deg, rgba( 255, 138, 0, 0.1 ), transparent 34% ), | |||
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 55% ), | |||
var( --edfm-surface-1 ) !important; | |||
border: 1px solid var( --edfm-border ) !important; | |||
border-left: 3px solid var( --edfm-orange ) !important; | |||
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.34 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important; | |||
box-sizing: border-box !important; | |||
} | |||
body.mediawiki.mw-special-Userlogin #userloginForm form { | |||
margin: 0 !important; | |||
} | |||
body.mediawiki.mw-special-Userlogin #userloginForm .mw-userlogin-help { | |||
text-align: center; | |||
} | |||
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta { | |||
margin: 1.05rem auto 0 !important; | |||
max-width: 18rem; | |||
} | |||
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container { | |||
display: grid !important; | |||
grid-template-columns: minmax( 19rem, 28rem ) minmax( 20rem, 1fr ) !important; | |||
gap: clamp( 1.4rem, 4vw, 3rem ) !important; | |||
align-items: stretch !important; | |||
width: min( 100%, 76rem ) !important; | |||
max-width: 76rem !important; | |||
margin: 0 auto !important; | |||
} | |||
body.mediawiki.mw-special-CreateAccount #userloginForm, | |||
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container { | |||
margin: 0 !important; | |||
background: | |||
linear-gradient( 135deg, rgba( 66, 199, 217, 0.07 ), transparent 38% ), | |||
linear-gradient( 180deg, rgba( 255, 138, 0, 0.035 ), rgba( 0, 0, 0, 0 ) 54% ), | |||
var( --edfm-surface-1 ) !important; | |||
border: 1px solid var( --edfm-border ) !important; | |||
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.32 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important; | |||
box-sizing: border-box !important; | |||
} | |||
body.mediawiki.mw-special-CreateAccount #userloginForm { | |||
padding: 1.15rem 1.2rem 1.25rem !important; | |||
border-left: 3px solid var( --edfm-orange ) !important; | |||
} | |||
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container { | |||
padding: clamp( 1.3rem, 2.2vw, 2.05rem ) !important; | |||
border-left: 3px solid var( --edfm-cyan ) !important; | |||
} | |||
body.mediawiki.mw-special-CreateAccount #userloginForm form { | |||
margin: 0 !important; | |||
} | |||
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field, | |||
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field { | |||
margin-bottom: 1rem !important; | |||
} | |||
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLSubmitField, | |||
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLSubmitField { | |||
margin-bottom: 0 !important; | |||
} | |||
body.mediawiki.mw-special-CreateAccount #wpRealName { | |||
border-color: rgba( 66, 199, 217, 0.45 ) !important; | |||
} | |||
body.mediawiki.mw-special-CreateAccount #wpRealName:focus { | |||
border-color: var( --edfm-cyan ) !important; | |||
box-shadow: 0 0 0 1px rgba( 66, 199, 217, 0.35 ), 0 0 18px rgba( 66, 199, 217, 0.14 ) !important; | |||
} | |||
@media ( max-width: 860px ) { | |||
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container { | |||
display: flex !important; | |||
flex-direction: column !important; | |||
width: min( 100%, 34rem ) !important; | |||
max-width: 34rem !important; | |||
} | |||
body.mediawiki.mw-special-Userlogin #userloginForm, | |||
body.mediawiki.mw-special-CreateAccount #userloginForm, | |||
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container { | |||
width: 100% !important; | |||
} | |||
} | |||
/* ========================================================================== | |||
EDFM dark thumbnail/frame treatment — 2026-08-13 | |||
Keep MediaWiki image captions from falling back to the default white frame. | |||
========================================================================== */ | |||
.mw-parser-output .thumb { | |||
color: var( --edfm-text-dim ) !important; | |||
} | |||
.mw-parser-output .thumbinner, | |||
.mw-parser-output figure[typeof~="mw:File/Thumb"], | |||
.mw-parser-output figure[typeof~="mw:File/Frame"], | |||
.mw-parser-output figure.mw-halign-right, | |||
.mw-parser-output figure.mw-halign-left, | |||
.mw-parser-output figure.mw-halign-center { | |||
background: | |||
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 56% ), | |||
var( --edfm-surface-1 ) !important; | |||
border: 1px solid var( --edfm-border ) !important; | |||
border-left: 1px solid var( --edfm-border ) !important; | |||
box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.28 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important; | |||
box-sizing: border-box !important; | |||
color: var( --edfm-text-dim ) !important; | |||
} | |||
.mw-parser-output .thumbimage, | |||
.mw-parser-output .thumbinner img, | |||
.mw-parser-output figure[typeof~="mw:File/Thumb"] img, | |||
.mw-parser-output figure[typeof~="mw:File/Frame"] img { | |||
background-color: var( --edfm-bg-deep ) !important; | |||
border: 1px solid var( --edfm-border ) !important; | |||
box-sizing: border-box !important; | |||
} | |||
.mw-parser-output .thumbcaption, | |||
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption, | |||
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption { | |||
background: var( --edfm-surface-1 ) !important; | |||
border-top: 1px solid var( --edfm-border ) !important; | |||
color: var( --edfm-text-dim ) !important; | |||
font-size: var( --edfm-fs-small ) !important; | |||
line-height: 1.42 !important; | |||
padding: 0.42rem 0.5rem 0.5rem !important; | |||
} | |||
.mw-parser-output .thumbcaption a, | |||
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a, | |||
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a { | |||
color: var( --edfm-link ) !important; | |||
} | |||
.mw-parser-output .thumbcaption a:hover, | |||
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a:hover, | |||
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a:hover { | |||
color: var( --edfm-link-hover ) !important; | |||
} | |||
.mw-parser-output .magnify a, | |||
.mw-parser-output .mw-file-magnify { | |||
filter: invert( 1 ) opacity( 0.72 ) drop-shadow( 0 0 2px rgba( 66, 199, 217, 0.28 ) ); | |||
} | |||
/* ========================================================================== | |||
EDFM VisualEditor template dialog dark theme — 2026-08-13 | |||
Keep template editing dialogs from falling back to white/light OOUI panels. | |||
========================================================================== */ | |||
.ve-ui-mwTransclusionDialog, | |||
.ve-ui-mwTransclusionDialog .oo-ui-window-frame, | |||
.ve-ui-mwTransclusionDialog .oo-ui-window-head, | |||
.ve-ui-mwTransclusionDialog .oo-ui-window-body, | |||
.ve-ui-mwTransclusionDialog .oo-ui-window-foot, | |||
.ve-ui-mwTransclusionDialog .oo-ui-panelLayout, | |||
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout, | |||
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout-stackLayout, | |||
.ve-ui-mwTransclusionDialog .oo-ui-pageLayout, | |||
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage, | |||
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget, | |||
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget, | |||
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineTemplateWidget, | |||
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget, | |||
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu, | |||
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-content, | |||
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout, | |||
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout, | |||
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input, | |||
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea, | |||
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input { | |||
background-color: var( --edfm-bg-deep ) !important; | |||
color: var( --edfm-text ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .oo-ui-window-head, | |||
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget, | |||
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu { | |||
background-color: var( --edfm-surface-1 ) !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget, | |||
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterSelectWidget { | |||
background-color: var( --edfm-surface-2 ) !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .oo-ui-labelElement-label, | |||
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout-header label, | |||
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-header label, | |||
.ve-ui-mwTransclusionDialog .oo-ui-widget { | |||
color: var( --edfm-text ) !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-help, | |||
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-field .oo-ui-labelElement-label em, | |||
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-description, | |||
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-undocumentedLabel { | |||
color: var( --edfm-text-muted ) !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input, | |||
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea, | |||
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input { | |||
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus, | |||
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus, | |||
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus { | |||
border-color: var( --edfm-cyan ) !important; | |||
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { | |||
background: var( --edfm-surface-3 ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { | |||
background: var( --edfm-surface-4 ) !important; | |||
border-color: var( --edfm-orange ) !important; | |||
color: var( --edfm-orange-bright ) !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button { | |||
background: var( --edfm-orange ) !important; | |||
border-color: var( --edfm-orange ) !important; | |||
color: var( --edfm-bg-deep ) !important; | |||
} | |||
/* Additional VE template-dialog color polish — disabled/apply buttons, search, | |||
unused-toggle buttons, and parameter checkboxes. */ | |||
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button, | |||
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button { | |||
background: var( --edfm-surface-2 ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
color: var( --edfm-text ) !important; | |||
box-shadow: none !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button, | |||
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover, | |||
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button, | |||
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover { | |||
background: var( --edfm-surface-3 ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
color: var( --edfm-text-muted ) !important; | |||
opacity: 0.82 !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget, | |||
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget .oo-ui-inputWidget-input, | |||
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget .oo-ui-inputWidget-input { | |||
background: var( --edfm-bg-deep ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .oo-ui-inputWidget-input::placeholder { | |||
color: var( --edfm-text-muted ) !important; | |||
opacity: 1 !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span, | |||
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span::before { | |||
background-color: var( --edfm-bg-deep ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span, | |||
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before { | |||
background-color: var( --edfm-orange ) !important; | |||
border-color: var( --edfm-orange ) !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-highlighted, | |||
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-selected, | |||
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected, | |||
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover { | |||
background: var( --edfm-surface-3 ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget .oo-ui-labelElement-label { | |||
color: var( --edfm-text ) !important; | |||
} | |||
/* EDFM VisualEditor template/infobox popup hard-dark theme — targets the actual | |||
Edit: <template> popup chrome and body, not just article/sidebar chrome. */ | |||
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame, | |||
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active > .oo-ui-window-frame, | |||
.oo-ui-windowManager-modal .oo-ui-processDialog-content, | |||
.oo-ui-windowManager-modal .oo-ui-window-content, | |||
.oo-ui-windowManager-modal .oo-ui-window-body, | |||
.oo-ui-windowManager-modal .oo-ui-window-foot, | |||
.ve-ui-mwTemplateDialog, | |||
.ve-ui-mwTemplateDialog .oo-ui-panelLayout, | |||
.ve-ui-mwTemplateDialog .oo-ui-menuLayout, | |||
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu, | |||
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-content, | |||
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout, | |||
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout-stackLayout, | |||
.ve-ui-mwTemplateDialog .oo-ui-pageLayout, | |||
.ve-ui-mwTemplateDialog .ve-ui-mwTemplatePage, | |||
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage, | |||
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineWidget, | |||
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget, | |||
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget, | |||
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget { | |||
background: #111b20 !important; | |||
color: #f4f7f8 !important; | |||
border-color: #52646b !important; | |||
} | |||
.oo-ui-windowManager-modal .oo-ui-processDialog-content > .oo-ui-window-head, | |||
.oo-ui-windowManager-modal .oo-ui-window-head, | |||
.oo-ui-windowManager-modal .oo-ui-processDialog-navigation, | |||
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu, | |||
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget { | |||
background: #1c2a31 !important; | |||
color: #f4f7f8 !important; | |||
border-color: #7f9299 !important; | |||
} | |||
.oo-ui-windowManager-modal .oo-ui-processDialog-title, | |||
.oo-ui-windowManager-modal .oo-ui-labelElement-label, | |||
.oo-ui-windowManager-modal .oo-ui-fieldLayout-header label, | |||
.oo-ui-windowManager-modal .oo-ui-widget, | |||
.ve-ui-mwTemplateDialog .oo-ui-labelElement-label, | |||
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-header label, | |||
.ve-ui-mwTemplateDialog .oo-ui-fieldsetLayout-header label { | |||
color: #f4f7f8 !important; | |||
} | |||
.oo-ui-windowManager-modal .oo-ui-fieldLayout-help, | |||
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-description, | |||
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-undocumentedLabel, | |||
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-help, | |||
.ve-ui-mwTemplateDialog .mw-widget-titleOptionWidget-description { | |||
color: #a9bbc1 !important; | |||
} | |||
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget input, | |||
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget textarea, | |||
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget input, | |||
.ve-ui-mwTemplateDialog .oo-ui-inputWidget-input, | |||
.oo-ui-windowManager-modal .oo-ui-textInputWidget input, | |||
.oo-ui-windowManager-modal .oo-ui-textInputWidget textarea, | |||
.oo-ui-windowManager-modal .oo-ui-searchInputWidget input, | |||
.oo-ui-windowManager-modal .oo-ui-inputWidget-input { | |||
background: #0d1519 !important; | |||
color: #f4f7f8 !important; | |||
border-color: #52646b !important; | |||
box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important; | |||
} | |||
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus, | |||
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus, | |||
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus, | |||
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus, | |||
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus, | |||
.oo-ui-windowManager-modal .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus { | |||
border-color: #42c7d9 !important; | |||
box-shadow: 0 0 0 2px rgba(66,199,217,.32) !important; | |||
} | |||
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button, | |||
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button, | |||
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button, | |||
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button { | |||
background: #25353d !important; | |||
border-color: #52646b !important; | |||
color: #f4f7f8 !important; | |||
box-shadow: none !important; | |||
} | |||
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, | |||
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, | |||
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, | |||
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { | |||
background: #31454f !important; | |||
border-color: #ff8a00 !important; | |||
color: #ffb347 !important; | |||
} | |||
.oo-ui-windowManager-modal .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button, | |||
.ve-ui-mwTemplateDialog .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button { | |||
background: #ff8a00 !important; | |||
border-color: #ff8a00 !important; | |||
color: #111820 !important; | |||
font-weight: 700 !important; | |||
} | |||
.oo-ui-windowManager-modal .oo-ui-widget-disabled > .oo-ui-buttonElement-button, | |||
.ve-ui-mwTemplateDialog .oo-ui-widget-disabled > .oo-ui-buttonElement-button { | |||
background: #1c2a31 !important; | |||
border-color: #3f5159 !important; | |||
color: #8fa1a8 !important; | |||
opacity: 1 !important; | |||
} | |||
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-highlighted, | |||
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-selected, | |||
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget-selected, | |||
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected, | |||
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget:hover, | |||
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover { | |||
background: #25353d !important; | |||
color: #f4f7f8 !important; | |||
} | |||
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span, | |||
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span::before, | |||
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span, | |||
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span::before { | |||
background-color: #0d1519 !important; | |||
border-color: #7f9299 !important; | |||
} | |||
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span, | |||
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before, | |||
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span, | |||
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before { | |||
background-color: #ff8a00 !important; | |||
border-color: #ff8a00 !important; | |||
} | |||
/* EDFM cookie preferences banner */ | |||
#edfm-cookie-banner { | |||
position: fixed; | |||
z-index: 10000; | |||
left: 1rem; | |||
right: 1rem; | |||
bottom: 1rem; | |||
display: flex; | |||
justify-content: center; | |||
pointer-events: none; | |||
} | |||
#edfm-cookie-banner .edfm-cookie-card { | |||
max-width: 800px; | |||
border: 1px solid rgba(80, 220, 240, 0.65); | |||
background: rgba(3, 14, 22, 0.98); | |||
box-shadow: 0 0 22px rgba(80, 220, 240, 0.22), 0 12px 36px rgba(0, 0, 0, 0.45); | |||
color: #dffbff; | |||
padding: 1rem; | |||
font-size: 0.95rem; | |||
pointer-events: auto; | |||
} | |||
#edfm-cookie-banner .edfm-cookie-title { | |||
font-weight: 700; | |||
letter-spacing: 0.08em; | |||
text-transform: uppercase; | |||
color: #7fe0ec; | |||
margin-bottom: 0.35rem; | |||
} | |||
#edfm-cookie-banner .edfm-cookie-text { margin: 0 0 0.75rem; line-height: 1.45; } | |||
#edfm-cookie-banner .edfm-cookie-categories { | |||
display: grid; | |||
gap: 0.65rem; | |||
margin: 0.65rem 0 0.85rem; | |||
} | |||
#edfm-cookie-banner .edfm-cookie-category { | |||
border: 1px solid rgba(127, 224, 236, 0.32); | |||
background: rgba(7, 28, 38, 0.74); | |||
padding: 0.7rem; | |||
} | |||
#edfm-cookie-banner .edfm-cookie-category-head { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
gap: 0.85rem; | |||
margin-bottom: 0.35rem; | |||
} | |||
#edfm-cookie-banner .edfm-cookie-category h3 { | |||
margin: 0; | |||
font-size: 0.95rem; | |||
letter-spacing: 0.06em; | |||
text-transform: uppercase; | |||
color: #f3feff; | |||
} | |||
#edfm-cookie-banner .edfm-cookie-category p { | |||
margin: 0; | |||
line-height: 1.42; | |||
color: #c6e6eb; | |||
} | |||
#edfm-cookie-banner .edfm-cookie-status { | |||
white-space: nowrap; | |||
border: 1px solid rgba(255, 138, 0, 0.7); | |||
color: #ffd69a; | |||
background: rgba(255, 138, 0, 0.12); | |||
padding: 0.2rem 0.48rem; | |||
font-size: 0.78rem; | |||
font-weight: 700; | |||
letter-spacing: 0.04em; | |||
text-transform: uppercase; | |||
} | |||
#edfm-cookie-banner .edfm-cookie-switch { | |||
display: inline-flex; | |||
align-items: center; | |||
gap: 0.4rem; | |||
white-space: nowrap; | |||
font-weight: 700; | |||
color: #f3feff; | |||
cursor: pointer; | |||
} | |||
#edfm-cookie-banner .edfm-cookie-switch input { | |||
inline-size: 1.1rem; | |||
block-size: 1.1rem; | |||
accent-color: #ff8a00; | |||
} | |||
#edfm-cookie-banner .edfm-cookie-switch input:focus-visible { | |||
outline: 2px solid #7fe0ec; | |||
outline-offset: 2px; | |||
} | |||
#edfm-cookie-banner .edfm-cookie-actions { | |||
display: flex; | |||
gap: 0.5rem; | |||
flex-wrap: wrap; | |||
} | |||
#edfm-cookie-banner button { | |||
border: 1px solid rgba(127, 224, 236, 0.7); | |||
background: rgba(9, 50, 65, 0.92); | |||
color: #f3feff; | |||
padding: 0.45rem 0.7rem; | |||
cursor: pointer; | |||
} | |||
#edfm-cookie-banner button:hover, | |||
#edfm-cookie-banner button:focus-visible { | |||
background: rgba(17, 88, 108, 0.98); | |||
outline: 2px solid rgba(127, 224, 236, 0.85); | |||
outline-offset: 2px; | |||
} | |||
#edfm-cookie-banner .edfm-cookie-links { margin-top: 0.6rem; font-size: 0.85rem; } | |||
#edfm-cookie-banner a { color: #7fe0ec; } | |||
@media (max-width: 600px) { | |||
#edfm-cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; } | |||
#edfm-cookie-banner .edfm-cookie-card { max-height: calc(100vh - 1rem); overflow: auto; } | |||
#edfm-cookie-banner .edfm-cookie-category-head { align-items: flex-start; } | |||
#edfm-cookie-banner .edfm-cookie-actions button { flex: 1 1 100%; } | |||
} | |||
/* ========================================================================== | |||
EDFM Vector watchstar dark-theme fix — 2026-08-16 | |||
Vector legacy renders the page watch/unwatch affordance as a small SVG | |||
background on `#ca-watch/#ca-unwatch a::before`. On EDFM's dark tab row the | |||
upstream light-skin URLs can be too low-contrast, and some deployments do not | |||
expose ResourceLoader's dotted asset path directly. Use inline SVGs in the | |||
EDFM palette so the watchstar is always visible in the top action menu. | |||
========================================================================== */ | |||
.vector-menu-tabs #ca-watch.icon a::before, | |||
.vector-menu-tabs-legacy #ca-watch.icon a::before { | |||
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2310171b' stroke='%2342c7d9' stroke-width='1.35' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important; | |||
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.42 ) ); | |||
opacity: 0.96; | |||
} | |||
.vector-menu-tabs #ca-unwatch.icon a::before, | |||
.vector-menu-tabs-legacy #ca-unwatch.icon a::before { | |||
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.2' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important; | |||
filter: drop-shadow( 0 0 4px rgba( 255, 138, 0, 0.45 ) ); | |||
opacity: 0.98; | |||
} | |||
.vector-menu-tabs #ca-watch.icon a:hover::before, | |||
.vector-menu-tabs #ca-watch.icon a:focus::before, | |||
.vector-menu-tabs-legacy #ca-watch.icon a:hover::before, | |||
.vector-menu-tabs-legacy #ca-watch.icon a:focus::before, | |||
.vector-menu-tabs #ca-unwatch.icon a:hover::before, | |||
.vector-menu-tabs #ca-unwatch.icon a:focus::before, | |||
.vector-menu-tabs-legacy #ca-unwatch.icon a:hover::before, | |||
.vector-menu-tabs-legacy #ca-unwatch.icon a:focus::before { | |||
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.25' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important; | |||
filter: drop-shadow( 0 0 5px rgba( 255, 138, 0, 0.65 ) ); | |||
opacity: 1; | |||
} | |||
/* ========================================================================== | |||
EDFM Special:Preferences dark theme fix — 2026-08-16 | |||
Preferences is an OOUI/Codex-heavy special page. Core styles bring in a | |||
light tab strip and sticky submit footer, so theme the actual preferences | |||
wrapper rather than only generic form controls. | |||
========================================================================== */ | |||
body.mediawiki.mw-special-Preferences #preferences, | |||
body.mediawiki.mw-special-Preferences #mw-prefs-container, | |||
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper, | |||
body.mediawiki.mw-special-Preferences .mw-prefs-tabs, | |||
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content, | |||
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout, | |||
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout, | |||
body.mediawiki.mw-special-Preferences .mw-prefs-fieldset-wrapper, | |||
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout, | |||
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout-framed { | |||
background: var( --edfm-surface-1 ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed { | |||
box-shadow: 0 18px 36px rgba( 0, 0, 0, 0.32 ); | |||
} | |||
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-menu, | |||
body.mediawiki.mw-special-Preferences .oo-ui-menuLayout-menu { | |||
background: var( --edfm-surface-2 ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
body.mediawiki.mw-special-Preferences .oo-ui-tabSelectWidget, | |||
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget, | |||
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget > .oo-ui-labelElement-label, | |||
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-widget-enabled > .oo-ui-labelElement-label { | |||
background: var( --edfm-surface-2 ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
color: var( --edfm-text-muted ) !important; | |||
} | |||
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget:hover, | |||
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-highlighted { | |||
background: var( --edfm-surface-3 ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected, | |||
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected > .oo-ui-labelElement-label, | |||
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected.oo-ui-widget-enabled > .oo-ui-labelElement-label { | |||
background: var( --edfm-surface-3 ) !important; | |||
border-color: var( --edfm-orange ) !important; | |||
box-shadow: inset 0 -3px 0 var( --edfm-orange ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header, | |||
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label, | |||
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header, | |||
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header label, | |||
body.mediawiki.mw-special-Preferences .oo-ui-labelElement-label, | |||
body.mediawiki.mw-special-Preferences .mw-prefs-title { | |||
color: var( --edfm-text ) !important; | |||
} | |||
body.mediawiki.mw-special-Preferences .mw-prefs-description, | |||
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-help, | |||
body.mediawiki.mw-special-Preferences .oo-ui-inline-help, | |||
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-messages, | |||
body.mediawiki.mw-special-Preferences .htmlform-tip, | |||
body.mediawiki.mw-special-Preferences .mw-htmlform-help { | |||
background: transparent !important; | |||
color: var( --edfm-text-muted ) !important; | |||
} | |||
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget .oo-ui-inputWidget-input, | |||
body.mediawiki.mw-special-Preferences .oo-ui-dropdownInputWidget select, | |||
body.mediawiki.mw-special-Preferences .oo-ui-dropdownWidget-handle, | |||
body.mediawiki.mw-special-Preferences input[type='text'], | |||
body.mediawiki.mw-special-Preferences input[type='number'], | |||
body.mediawiki.mw-special-Preferences input[type='email'], | |||
body.mediawiki.mw-special-Preferences textarea, | |||
body.mediawiki.mw-special-Preferences select { | |||
background: var( --edfm-bg-deep ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
body.mediawiki.mw-special-Preferences .oo-ui-inputWidget-input::placeholder, | |||
body.mediawiki.mw-special-Preferences input::placeholder { | |||
color: var( --edfm-text-muted ) !important; | |||
opacity: 1; | |||
} | |||
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus, | |||
body.mediawiki.mw-special-Preferences input:focus, | |||
body.mediawiki.mw-special-Preferences textarea:focus, | |||
body.mediawiki.mw-special-Preferences select:focus { | |||
border-color: var( --edfm-cyan ) !important; | |||
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important; | |||
outline: none !important; | |||
} | |||
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span, | |||
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span::before, | |||
body.mediawiki.mw-special-Preferences input[type='checkbox'] { | |||
background-color: var( --edfm-bg-deep ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
} | |||
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span, | |||
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before, | |||
body.mediawiki.mw-special-Preferences input[type='checkbox']:checked { | |||
background-color: var( --edfm-orange ) !important; | |||
border-color: var( --edfm-orange ) !important; | |||
accent-color: var( --edfm-orange ); | |||
} | |||
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button, | |||
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button, | |||
body.mediawiki.mw-special-Preferences .mw-htmlform-submit, | |||
body.mediawiki.mw-special-Preferences button, | |||
body.mediawiki.mw-special-Preferences input[type='submit'] { | |||
background: var( --edfm-surface-3 ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
color: var( --edfm-text ) !important; | |||
box-shadow: none !important; | |||
} | |||
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, | |||
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, | |||
body.mediawiki.mw-special-Preferences .mw-htmlform-submit:hover, | |||
body.mediawiki.mw-special-Preferences button:hover, | |||
body.mediawiki.mw-special-Preferences input[type='submit']:hover { | |||
background: rgba( 255, 138, 0, 0.16 ) !important; | |||
border-color: var( --edfm-orange ) !important; | |||
color: var( --edfm-orange-bright ) !important; | |||
} | |||
body.mediawiki.mw-special-Preferences #preferences .mw-htmlform-submit-buttons, | |||
body.mediawiki.mw-special-Preferences .mw-htmlform-submit-buttons, | |||
body.mediawiki.mw-special-Preferences .oo-ui-window-foot .mw-htmlform-submit-buttons { | |||
background: rgba( 16, 23, 27, 0.96 ) !important; | |||
border-top: 1px solid var( --edfm-border ) !important; | |||
box-shadow: 0 -10px 24px rgba( 0, 0, 0, 0.34 ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
body.mediawiki.mw-special-Preferences .mw-prefs-search-highlight, | |||
body.mediawiki.mw-special-Preferences .mw-prefs-tabs:not( .mw-prefs-tabs-searching ) .oo-ui-fieldsetLayout:target > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label { | |||
background: rgba( 66, 199, 217, 0.18 ) !important; | |||
outline-color: rgba( 66, 199, 217, 0.32 ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
/* Special:ChangeContentModel's "New content model" dropdown otherwise only | |||
gets the generic .oo-ui-inputWidget-input treatment (surface-1, no focus | |||
ring) -- match it to the same OOUI dropdown treatment used on | |||
Special:Preferences above (deeper background, inset hairline, cyan focus | |||
ring) instead of leaving it one shade lighter than the template. */ | |||
body.mediawiki.mw-special-ChangeContentModel #mw-input-model { | |||
background: var( --edfm-bg-deep ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
body.mediawiki.mw-special-ChangeContentModel #mw-input-model:focus { | |||
border-color: var( --edfm-cyan ) !important; | |||
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important; | |||
outline: none !important; | |||
} | |||
/* =========================================================================== | |||
EDFM external link icon theme fix — 2026-08-20 | |||
MediaWiki Vector adds a small external-link background image after external | |||
links. On EDFM's dark theme the stock progressive-blue SVG was too subtle, | |||
leaving a visible gap before punctuation in Sources lists. Replace it with a | |||
currentColor mask so the indicator inherits the site's cyan/hover/visited | |||
external-link colors and remains visible before commas/periods. | |||
========================================================================== */ | |||
.mw-parser-output a.external, | |||
.mw-parser-output a.extiw.external { | |||
background-image: none !important; | |||
padding-right: 0 !important; | |||
} | |||
.mw-parser-output a.external::after, | |||
.mw-parser-output a.extiw.external::after { | |||
content: ''; | |||
display: inline-block; | |||
width: 0.72em; | |||
height: 0.72em; | |||
margin-left: 0.18em; | |||
margin-right: 0.08em; | |||
vertical-align: 0.04em; | |||
background-color: currentColor; | |||
opacity: 0.9; | |||
-webkit-mask: no-repeat center / contain url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11 3h6v6h-2V6.41l-7.29 7.3-1.42-1.42 7.3-7.29H11V3z"/><path d="M5 5h4v2H6v8h8v-3h2v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/></svg>' ); | |||
mask: no-repeat center / contain url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11 3h6v6h-2V6.41l-7.29 7.3-1.42-1.42 7.3-7.29H11V3z"/><path d="M5 5h4v2H6v8h8v-3h2v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/></svg>' ); | |||
} | |||
.mw-parser-output .reference-text a.external::after { | |||
margin-left: 0.2em; | |||
margin-right: 0.12em; | |||
} | |||
/* =========================================================================== | |||
ECHO NOTIFICATIONS / ALERTS -- EDFM dark flyout theme | |||
Echo's alert/notices popups are injected by OOUI after page load and keep | |||
their own default white notification cards unless themed explicitly. Keep | |||
the structure/behavior intact, but make the flyouts match EDFM's dark panel | |||
template: dark chrome, orange active state, cyan focus/link accents, and | |||
muted secondary text. | |||
=========================================================================== */ | |||
.mw-echo-ui-notificationBadgeController-popup > .oo-ui-popupWidget-popup { | |||
background: linear-gradient( 180deg, var( --edfm-surface-2 ) 0%, var( --edfm-surface-1 ) 100% ) !important; | |||
border: 1px solid var( --edfm-border ) !important; | |||
box-shadow: 0 18px 45px rgba( 0, 0, 0, 0.48 ), 0 0 0 1px rgba( 255, 138, 0, 0.08 ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head, | |||
.mw-echo-ui-notificationBadgeController-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer { | |||
background: var( --edfm-surface-2 ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head { | |||
border-left: 3px solid var( --edfm-orange ); | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-anchor::before, | |||
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-anchor::after { | |||
border-bottom-color: var( --edfm-surface-2 ) !important; | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-head .oo-ui-labelElement-label, | |||
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-footer .oo-ui-labelElement-label { | |||
color: var( --edfm-text ) !important; | |||
font-family: var( --edfm-sans ); | |||
font-weight: 700; | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-head .oo-ui-iconElement-icon, | |||
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-footer .oo-ui-iconElement-icon, | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-actions .oo-ui-iconElement-icon { | |||
filter: invert( 1 ) hue-rotate( 180deg ); | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-notificationsWrapper, | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationsListWidget { | |||
background: var( --edfm-bg-deep ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget { | |||
background: var( --edfm-surface-1 ) !important; | |||
border-bottom: 1px solid var( --edfm-border ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-unread { | |||
background: linear-gradient( 90deg, rgba( 255, 138, 0, 0.10 ) 0, var( --edfm-surface-1 ) 30% ) !important; | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget:hover, | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget:focus { | |||
background: var( --edfm-surface-3 ) !important; | |||
box-shadow: inset 3px 0 0 var( --edfm-orange ) !important; | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-message-header, | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-message-header a { | |||
color: var( --edfm-text ) !important; | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-message-body, | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-actions-timestamp { | |||
color: var( --edfm-text-muted ) !important; | |||
opacity: 1 !important; | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-message-body a, | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget a { | |||
color: var( --edfm-link ) !important; | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-toggleReadCircleButtonWidget-circle { | |||
background: var( --edfm-orange ) !important; | |||
border-color: var( --edfm-orange ) !important; | |||
box-shadow: 0 0 0 2px rgba( 255, 138, 0, 0.18 ); | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-toggleReadCircleButtonWidget-circle-unread { | |||
background: var( --edfm-surface-4 ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
box-shadow: none; | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationsWidget-markAllReadButton > .oo-ui-buttonElement-button, | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-actions .oo-ui-buttonElement-button, | |||
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-footer .oo-ui-buttonElement-button { | |||
background: var( --edfm-surface-4 ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
color: var( --edfm-text ) !important; | |||
text-shadow: none !important; | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationsWidget-markAllReadButton > .oo-ui-buttonElement-button:hover, | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-actions .oo-ui-buttonElement-button:hover, | |||
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-footer .oo-ui-buttonElement-button:hover { | |||
background: rgba( 255, 138, 0, 0.14 ) !important; | |||
border-color: var( --edfm-orange ) !important; | |||
color: var( --edfm-orange-bright ) !important; | |||
} | |||
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationBadgeController-footer-buttons .oo-ui-buttonElement:last-child { | |||
border-left-color: var( --edfm-border ) !important; | |||
} | |||
/* Special:Notifications uses the same Echo widgets outside the small flyout. */ | |||
.mw-special-Notifications .mw-echo-ui-notificationsInboxWidget, | |||
.mw-special-Notifications .mw-echo-ui-notificationsInboxWidget-toolbarWrapper { | |||
background: var( --edfm-bg-page ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
.mw-special-Notifications .mw-echo-ui-notificationItemWidget { | |||
background: var( --edfm-surface-1 ) !important; | |||
border: 1px solid var( --edfm-border ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
.mw-special-Notifications .mw-echo-ui-notificationItemWidget-content-message-header, | |||
.mw-special-Notifications .mw-echo-ui-notificationItemWidget-content-message-body, | |||
.mw-special-Notifications .mw-echo-ui-notificationItemWidget-content-actions-timestamp { | |||
color: var( --edfm-text ) !important; | |||
opacity: 1 !important; | |||
} | |||
/* ========================================================================== | |||
Special:AllMessages dark-theme polish | |||
Keep the MediaWiki system-message filter form and its filtered/search | |||
results table aligned with the EDFM template palette instead of default | |||
light TablePager/OOUI surfaces. | |||
========================================================================== */ | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper { | |||
background: linear-gradient( 180deg, var( --edfm-surface-2 ), var( --edfm-surface-1 ) ) !important; | |||
border: 1px solid var( --edfm-border ) !important; | |||
border-radius: var( --edfm-corner ); | |||
box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.24 ); | |||
color: var( --edfm-text ) !important; | |||
margin: 1.25rem 0; | |||
} | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-fieldsetLayout-header { | |||
border-bottom-color: var( --edfm-border ) !important; | |||
color: var( --edfm-orange-bright ) !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-labelElement-label, | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-fieldLayout-help, | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-fieldLayout-messages { | |||
color: var( --edfm-text-muted ) !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input, | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-dropdownInputWidget select, | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-dropdownWidget-handle { | |||
background-color: var( --edfm-bg-deep ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.02 ); | |||
color: var( --edfm-text ) !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input:focus, | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus { | |||
border-color: var( --edfm-cyan ) !important; | |||
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.18 ) !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-radioInputWidget [type='radio'] + span { | |||
background-color: var( --edfm-bg-deep ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-radioInputWidget [type='radio']:checked + span { | |||
background-color: var( --edfm-orange ) !important; | |||
border-color: var( --edfm-orange-bright ) !important; | |||
box-shadow: 0 0 0 2px rgba( 255, 138, 0, 0.18 ); | |||
} | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button, | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-submit-buttons .oo-ui-buttonElement-button { | |||
background: linear-gradient( 180deg, var( --edfm-surface-4 ), var( --edfm-surface-3 ) ) !important; | |||
border-color: var( --edfm-orange ) !important; | |||
color: var( --edfm-orange-bright ) !important; | |||
font-weight: 700; | |||
text-shadow: none !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button:hover, | |||
body.mediawiki.mw-special-Allmessages .mw-htmlform-submit-buttons .oo-ui-buttonElement-button:hover { | |||
background: rgba( 255, 138, 0, 0.14 ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable { | |||
background: var( --edfm-surface-1 ) !important; | |||
border: 1px solid var( --edfm-border ) !important; | |||
border-collapse: separate; | |||
border-radius: var( --edfm-corner ); | |||
border-spacing: 0; | |||
box-shadow: 0 16px 34px rgba( 0, 0, 0, 0.30 ); | |||
color: var( --edfm-text ) !important; | |||
overflow: hidden; | |||
width: 100%; | |||
} | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable th { | |||
background: linear-gradient( 180deg, var( --edfm-surface-4 ), var( --edfm-surface-3 ) ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
color: var( --edfm-orange-bright ) !important; | |||
font-weight: 800; | |||
letter-spacing: 0.025em; | |||
text-shadow: none !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable td { | |||
background: var( --edfm-surface-1 ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
color: var( --edfm-text ) !important; | |||
vertical-align: top; | |||
} | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable tbody tr:nth-child( odd ) td { | |||
background: #0d1418 !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable tbody tr:hover td { | |||
background: rgba( 66, 199, 217, 0.10 ) !important; | |||
box-shadow: inset 3px 0 0 var( --edfm-cyan ); | |||
} | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable td[dir], | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable td[lang] { | |||
color: var( --edfm-text ) !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable tr > td:first-child { | |||
background: var( --edfm-surface-1 ) !important; | |||
font-family: var( --edfm-mono ); | |||
font-size: 0.88rem; | |||
} | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable tr:nth-child( odd ) > td:first-child { | |||
background: #0d1418 !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable a { | |||
color: var( --edfm-link ) !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable a.external { | |||
color: var( --edfm-link-external ) !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable a.new, | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable a.new:visited { | |||
color: var( --edfm-link-new ) !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable .mw-allmessages-customised, | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable .mw-allmessages-modified, | |||
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable .mw-allmessages-default { | |||
background: rgba( 66, 199, 217, 0.12 ) !important; | |||
color: var( --edfm-text ) !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages .TablePager_nav { | |||
margin: 0.85rem 0; | |||
} | |||
body.mediawiki.mw-special-Allmessages .TablePager_nav .oo-ui-buttonElement-button { | |||
background-color: var( --edfm-surface-2 ) !important; | |||
border-color: var( --edfm-border ) !important; | |||
color: var( --edfm-link ) !important; | |||
} | |||
body.mediawiki.mw-special-Allmessages .TablePager_nav .oo-ui-widget-disabled .oo-ui-buttonElement-button { | |||
background-color: var( --edfm-bg-deep ) !important; | |||
color: var( --edfm-text-dim ) !important; | |||
opacity: 0.78; | |||
} | } | ||
Latest revision as of 21:58, 24 August 2026
/* ==========================================================================
EDFM site-wide styling -- "Elite Dangerous technical field manual" theme.
Original CSS written for this project -- no code or assets copied from
runescape.wiki, Elite Dangerous, or any other site/game, and no Frontier
logo/branding/proprietary fonts/copied HUD elements. Restrained visual
influence only: dark industrial surfaces, subtle angular geometry,
orange/cyan accents used sparingly, information hierarchy first. This is
a reference site, not a HUD -- no glow, no neon, no glassmorphism, no
constant animation.
SKIN NOTE: the site uses Vector "legacy" (2011), not Vector 2022 -- see
the "Why Vector legacy" note in docs/content-style-guide.md (Vector 2022
hard-restricts its pinned sidebar to logged-in users; legacy has no such
restriction). Several rules below exist specifically to beat core Vector
legacy/mediawiki.skinning selectors that are *more specific* than a naive
override would be (documented inline at each occurrence) -- this isn't
guesswork, each one was found by reading the actual core .less source and
confirmed with a real rendered screenshot, not just computed-style checks
(:visited colours in particular are invisible to getComputedStyle by
design -- see the tab-bar note below).
2026-08-07 SECOND PASS: the first redesign pass was judged too close to
stock MediaWiki with a colour change -- this pass changes the actual
visual composition (centred workspace instead of a huge dead gutter,
a two-tier header, a real masthead, a tile-grid TOC, a restructured
status module, larger deliberate type scale, depth via surface
elevation instead of borders-around-everything) while reusing every
working mechanism from the first pass rather than throwing it away --
the tab/:visited fix, the external-link specificity fix, the mobile
reorder fix, and focus-visible/reduced-motion are all still here,
unchanged in mechanism.
========================================================================== */
/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
/* Depth system: site (outermost, visible in the sidebar/header/gutters)
-> article surface -> component surfaces, each a deliberate step
brighter so the page reads as having actual depth rather than "one
background colour with slightly lighter boxes everywhere". */
--edfm-bg-deep: #07090b;
--edfm-bg-page: #0a0e11;
--edfm-surface-1: #10171b;
--edfm-surface-2: #161f24;
--edfm-surface-3: #1c272d;
--edfm-surface-4: #233037;
--edfm-border: #26333b;
--edfm-border-soft: rgba( 255, 255, 255, 0.06 );
--edfm-text: #edf0f2;
--edfm-text-muted: #98a5ad;
--edfm-text-dim: #6c7a82;
/* Accents -- orange is reserved for navigation/selection/emphasis/
section numbering; cyan/blue are for links, verification info, and
secondary interface elements. See "Links" and "Colour system" in
docs/content-style-guide.md for the reasoning. */
--edfm-orange: #ff8a00;
--edfm-orange-bright: #ffa21a;
--edfm-cyan: #42c7d9;
--edfm-blue: #4f9fe8;
/* Derived link colours */
--edfm-link: var( --edfm-blue );
--edfm-link-visited: #3f7bb3;
--edfm-link-hover: #8cc4f7;
--edfm-link-external: var( --edfm-cyan );
--edfm-link-external-visited: #2f8f9c;
--edfm-link-external-hover: #7fe0ec;
--edfm-link-new: #e07a7a;
/* Status semantics (article metadata module) -- text label always
present too, never colour-only. */
--edfm-status-positive: var( --edfm-cyan );
--edfm-status-attention: var( --edfm-orange );
--edfm-status-neutral: var( --edfm-text-dim );
--edfm-status-positive-bg: rgba( 66, 199, 217, 0.12 );
--edfm-status-attention-bg: rgba( 255, 138, 0, 0.12 );
--edfm-status-neutral-bg: rgba( 108, 122, 130, 0.12 );
/* Typography -- explicit desktop scale (2026-08-07 pass 2). Sized in
rem against the root's real 16px (Vector legacy's own
@font-size-root is 100%, i.e. browser default -- confirmed by
reading skins.vector.styles.legacy/variables.less, not assumed)
rather than nested em, specifically so component sizes can't
compound smaller than intended inside whatever ambient size an
ancestor happens to set. */
--edfm-fs-title: clamp( 1.9rem, 1.4rem + 2vw, 2.25rem ); /* ~30-36px */
--edfm-fs-h2: 1.35rem; /* ~21.6px */
--edfm-fs-h3: 1.15rem; /* ~18.4px */
--edfm-fs-body: 1rem; /* 16px */
--edfm-fs-resource-name: 1.1rem; /* ~17.6px */
--edfm-fs-meta: 0.8rem; /* ~12.8px */
--edfm-fs-sidebar: 0.9375rem; /* 15px -- polish pass: +1px for readability */
--edfm-fs-utility: 0.72rem; /* ~11.5px */
--edfm-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
--edfm-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
/* Legacy aliases: earlier revisions of this stylesheet used these names
directly and some inline template output/older docs may still refer
to them; keep pointing at the current tokens rather than duplicate
values that could drift out of sync. */
--edfm-orange-hover: var( --edfm-orange-bright );
--edfm-orange-active: var( --edfm-orange-bright );
--color-progressive: var( --edfm-orange );
--color-progressive--hover: var( --edfm-orange-bright );
--color-progressive--active: var( --edfm-orange-bright );
--color-progressive--focus: var( --edfm-orange );
--background-color-progressive: var( --edfm-orange );
--background-color-progressive--hover: var( --edfm-orange-bright );
--background-color-progressive--active: var( --edfm-orange-bright );
--border-color-progressive: var( --edfm-orange );
--border-color-progressive--hover: var( --edfm-orange-bright );
--border-color-progressive--active: var( --edfm-orange-bright );
/* Geometry / layout */
--edfm-corner: 10px;
/* Full-width article workspace: keep the fixed Vector sidebar clear,
but let the article surface use the entire remaining viewport. */
--edfm-sidebar-width: 12.75rem;
--edfm-sidebar-clear: 12.75rem;
--edfm-content-max: calc( 100vw - var( --edfm-sidebar-clear ) );
--edfm-gutter: 0px;
}
/* ==========================================================================
2. BASE / RESET-ADJACENT
========================================================================== */
html, body {
background-color: var( --edfm-bg-page );
color: var( --edfm-text );
}
body.mediawiki {
color: var( --edfm-text );
font-family: var( --edfm-sans );
font-size: var( --edfm-fs-body );
}
/* Background treatment: a faint technical grid plus a very soft radial
glow centred behind the (now centred) content column, so the composition
still has quiet visual interest in the gutters on ultrawide screens
instead of just flat colour -- both stay under ~3% opacity, this is
texture, not a HUD. Not image assets; pure CSS gradients. */
body {
background-image:
radial-gradient( ellipse 1400px 900px at 50% 0%, rgba( 66, 199, 217, 0.05 ), transparent 60% ),
linear-gradient( rgba( 255, 255, 255, 0.025 ) 1px, transparent 1px ),
linear-gradient( 90deg, rgba( 255, 255, 255, 0.025 ) 1px, transparent 1px );
background-size: auto, 48px 48px, 48px 48px;
background-repeat: no-repeat, repeat, repeat;
background-attachment: fixed, scroll, scroll;
}
/* Full-height sidebar rail: mirrors the RuneScape.wiki behavior where the
left rail has no visible bottom edge. The real #mw-panel only carries the
navigation content; this fixed layer paints the uninterrupted surface,
border, and shadow down the whole viewport. */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var( --edfm-sidebar-width );
background: linear-gradient( 180deg, var( --edfm-surface-1 ) 0%, var( --edfm-bg-deep ) 100% );
border-right: 1px solid var( --edfm-border );
box-shadow: 10px 0 22px rgba( 0, 0, 0, 0.32 );
pointer-events: none;
z-index: 1;
}
@media ( prefers-reduced-motion: reduce ) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* Focus visibility: applies to every interactive element, not just links. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var( --edfm-cyan );
outline-offset: 2px;
}
/* Small reusable angular motif: a corner-cut bracket, used sparingly (see
the redesign notes in docs/content-style-guide.md for exactly where) --
deliberately not applied everywhere. */
.edfm-corner-cut {
clip-path: polygon( 0 0, calc( 100% - var( --edfm-corner ) ) 0, 100% var( --edfm-corner ), 100% 100%, 0 100% );
}
/* ==========================================================================
3. TYPOGRAPHY
========================================================================== */
h1, h2, h3, h4, h5, h6 {
color: var( --edfm-text );
border-color: var( --edfm-border );
}
/* !important justified here: MediaWiki core's mediawiki.skinning module
sets heading colour with equal-specificity plain-tag selectors and kept
winning in testing despite this stylesheet loading later -- rather than
keep chasing exact cascade/bundling order, force it. This is a
correctness/contrast fix, not decoration. */
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
.mw-heading1, .mw-heading2, .mw-heading3, .mw-heading4, .mw-heading5, .mw-heading6,
h1, h2, h3, h4, h5, h6 {
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
font-family: var( --edfm-mono );
letter-spacing: 0.01em;
line-height: 1.3;
}
#firstHeading {
color: var( --edfm-text ) !important;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.75rem, 1.35rem + 1.45vw, 2.15rem );
font-weight: 700;
letter-spacing: 0;
line-height: 1.18;
margin: 0.15em 0 0.25em;
padding-bottom: 0.22em;
border-bottom: 1px solid var( --edfm-border );
}
/* Section headings (h2): "// " prefix in orange, bright heading text, a
short orange accent segment over the dim full-width divider core
already draws. Substantially more vertical space than a wiki section
normally gets, per the "sections feel packed together" fix -- 3.25rem
(~52px) above, ~1.1rem gap to the first content component below. If a
heading opts into explicit numbering via {{Section number}}, the
automatic "// " is suppressed so the two treatments don't double up. */
.mw-body h2 {
position: relative;
padding-bottom: 0.25em;
margin-top: 2rem;
margin-bottom: 0.85rem;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: clamp( 1.28rem, 1.08rem + 0.65vw, 1.62rem );
font-weight: 500;
letter-spacing: 0;
border-bottom: 1px solid var( --edfm-border ) !important;
}
.mw-body h2::before {
content: none;
}
.mw-body h2:has( .edfm-section-number )::before {
content: none;
}
.mw-body h2::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 3em;
max-width: 100%;
height: 2px;
background: var( --edfm-orange );
}
.edfm-section-number {
color: var( --edfm-orange );
font-weight: 700;
}
.edfm-section-sep {
color: var( --edfm-orange );
margin-right: 0.15em;
}
h3, h4 {
color: var( --edfm-text );
font-size: var( --edfm-fs-h3 );
}
h3::before {
content: '/ ';
color: var( --edfm-text-dim );
font-weight: 400;
}
/* Body text: readable sans-serif, deliberately NOT monospace -- long-form
reading in monospace hurts readability, which stays a hard requirement
even with a more technical visual language elsewhere. */
.mw-body p,
.mw-body li,
.mw-body dd {
line-height: 1.7;
font-size: var( --edfm-fs-body );
}
.mw-body p {
margin: 0 0 1.1em 0;
max-width: none !important; /* Site-wide full-width pass: article text should use the whole content rail. */
}
.mw-body ul,
.mw-body ol {
line-height: 1.7;
margin-bottom: 1.1em;
}
/* EDFM article bullets: replace the stock browser dot with the provided
cyan field-manual arrow, scaled to text size rather than using the source
image's native 100x91 dimensions. This targets article unordered lists;
interface/navigation lists such as the Jump To TOC and galleries are reset
below so they keep their component-specific layout. */
.mw-parser-output ul {
list-style: none;
padding-left: 1.55em;
}
.mw-parser-output ul > li {
position: relative;
}
.mw-parser-output ul > li::before {
content: '';
position: absolute;
left: -1.35em;
top: 0.48em;
width: 0.82em;
height: 0.75em;
background-image: url( '/edfm-assets/list-bullet-arrow.png' );
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.95;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.35 ) );
}
.mw-parser-output ul ul {
margin-top: 0.3em;
padding-left: 1.45em;
}
.mw-parser-output ul ul > li::before {
left: -1.25em;
top: 0.52em;
width: 0.68em;
height: 0.62em;
opacity: 0.82;
}
/* Component exceptions: these are not prose bullet lists. */
.mw-parser-output .toc ul,
.mw-parser-output .gallery,
.mw-parser-output .gallery ul,
.mw-parser-output .mw-gallery-traditional,
.mw-parser-output .mw-gallery-traditional ul {
padding-left: 0;
}
.mw-parser-output .toc li::before,
.mw-parser-output .gallery li::before,
.mw-parser-output .mw-gallery-traditional li::before {
content: none;
}
/* MW 1.46 wraps headings in a `.mw-heading2`/`.mw-heading3` div, so the
sibling that immediately follows is that wrapper, not the `h2`/`h3`
itself -- matching both forms since a page could still have a bare
heading in edge cases (e.g. content generated without the wrapper). */
.mw-heading2 + p, .mw-body h2 + p,
.mw-heading3 + p, .mw-body h3 + p,
.mw-heading2 + div, .mw-body h2 + div,
.mw-heading3 + div, .mw-body h3 + div {
margin-top: 0;
}
hr {
background-color: var( --edfm-border );
border-color: var( --edfm-border );
}
/* Quiet, discoverable section-edit controls (logged-in editors only --
MediaWiki only renders these for users who can edit). Keeping the
functionality/keyboard access intact while making sure they don't
compete visually with the heading they're attached to: low opacity at
rest, full opacity on hover/focus of the heading OR the control itself,
brackets hidden (the opacity+letter-spacing treatment already reads as
a distinct control without them). */
.mw-editsection {
margin-left: 1em;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility ) !important;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.45;
transition: opacity 0.15s ease;
}
.mw-heading:hover .mw-editsection,
.mw-heading:focus-within .mw-editsection,
.mw-editsection:hover,
.mw-editsection:focus-within {
opacity: 1;
}
.mw-editsection a {
color: var( --edfm-text-dim );
}
.mw-editsection a:hover,
.mw-editsection a:focus-visible {
color: var( --edfm-cyan );
}
.mw-editsection-bracket {
display: none;
}
.mw-editsection-divider {
color: var( --edfm-text-dim );
margin: 0 0.3em;
}
/* ==========================================================================
8. LINKS
========================================================================== */
a { color: var( --edfm-link ); transition: color 0.1s ease; }
a:visited { color: var( --edfm-link-visited ); }
a:hover { color: var( --edfm-link-hover ); }
a.new, .new a { color: var( --edfm-link-new ); }
a.external { color: var( --edfm-link-external ); }
/* Core MediaWiki ships `.mw-parser-output a.external`/`a.extiw` (and their
:visited/:hover states) at higher specificity (two classes + a tag) than
a plain `a.external` rule (one class + a tag), so the line above never
actually wins for real article links on its own -- the same underlying
"core selector outranks a naive theme override" gotcha as the tab
:visited fix further down. Matching the same selector shape here (this
stylesheet loads after core skin styles) is what actually applies our
colour to external links in article content. */
.mw-parser-output a.external,
.mw-parser-output a.extiw {
color: var( --edfm-link-external );
}
.mw-parser-output a.external:visited,
.mw-parser-output a.extiw:visited {
color: var( --edfm-link-external-visited );
}
.mw-parser-output a.external:hover,
.mw-parser-output a.extiw:hover {
color: var( --edfm-link-external-hover );
}
.mw-footer a {
color: var( --edfm-link );
}
.mw-footer a:hover {
color: var( --edfm-link-hover );
}
/* ==========================================================================
1. GLOBAL LAYOUT -- centred workspace
========================================================================== */
/* Full-width article pass: the article now fills the workspace to the right edge.
Historical note: this block originally centred a capped article column.
THE fix for "enormous unused region on the right side of wide displays".
Vector legacy's core layout (skins.vector.styles.legacy/layouts/
screen.less) gives `.mw-body` (#content) a left margin to clear the
fixed-width sidebar and otherwise lets it run edge-to-edge to the
browser's right side with no max-width at all -- the first redesign
pass added a max-width but left the column pinned to the sidebar's left
edge, which is *why* it still read as "a column stuck on the left with
dead space on the right" rather than a composed layout.
Fix: instead of a fixed `margin-left: 11em`, compute how much space is
left over in the workspace (viewport minus the sidebar) once the
content has its max-width, and split that leftover evenly between the
left and right margins (via the --edfm-gutter token above) -- so the
article is centred *within the workspace to the right of the sidebar*,
not centred in the full viewport (which would ignore the sidebar and
look off-centre) and not pinned to its left edge either. On a screen
too narrow for sidebar + max-width content, --edfm-gutter naturally
evaluates to 0 and this degrades to the old "fill the workspace"
behaviour -- no separate narrow-screen override needed.
The header/tab bar's own float/absolute-position box (#mw-head) is left
at its native full width deliberately -- rewriting *that* mechanism is
a different, much higher-risk change (it took several rounds to get
right originally) -- but its *contents* (search box, personal tools,
namespace/view tabs) get their own right/left offsets pulled in by the
same --edfm-gutter below, so they still visually line up with the
centred column beneath them instead of hugging the browser edge. */
.mw-body,
#mw-data-after-content,
.mw-footer {
position: relative;
z-index: 2;
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
max-width: var( --edfm-content-max );
box-sizing: border-box;
}
/* Tables, code blocks, and preformatted content are still allowed to be
wider than a comfortable reading measure (technical data often needs
it) -- they scroll horizontally inside the capped column instead of
being force-shrunk or breaking the layout. Ordinary images/galleries
already respect the column via max-width:100% below. */
.mw-body table,
.mw-body pre,
.mw-body .mw-code {
max-width: 100%;
overflow-x: auto;
}
.mw-body table.wikitable,
.mw-body table.mw-datatable,
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
/* Keep real table layout so header cells and body cells share one column grid.
The earlier display:block + tbody display:table overflow hack made sortable
headers size independently from body columns, which visibly misaligned the
Engineer directory after portrait chips were added. */
display: table;
width: 100%;
table-layout: auto;
}
.mw-body table.wikitable th,
.mw-body table.wikitable td,
.mw-body table.mw-datatable th,
.mw-body table.mw-datatable td {
vertical-align: middle;
}
.mw-body img {
max-width: 100%;
height: auto;
}
/* ==========================================================================
4. ARTICLE MASTHEAD (eyebrow / title / deck)
========================================================================== */
/* Eyebrow line is authored as ordinary wikitext (see Template:Article
header) and, purely as a placement detail, a small script
(MediaWiki:Common.js) moves it directly above #firstHeading on load --
see the comment there for why that needs JS rather than CSS/a template
(the title is rendered by the skin before the article body in the DOM,
so nothing living inside the article body can appear earlier than it
without either moving it in the DOM or abandoning the real semantic H1).
If JS is unavailable the eyebrow still renders, just directly under the
title instead of above it.
The eyebrow/title/deck aren't wrapped in one literal bounding box (they
live at two different DOM depths -- eyebrow is a sibling of #firstHeading,
deck is inside the article body further down -- wrapping them in one
real container would need heavier JS than is justified here), so the
"designed masthead" read comes from a matching top rule above the
eyebrow and bottom rule below the deck, a small angular marker, and the
larger title/subtitle type scale, rather than one drawn box. */
.edfm-eyebrow {
display: block;
margin: 0.2em 0 0.15em 0;
padding: 0;
border: 0;
font-family: var( --edfm-sans );
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var( --edfm-text-dim );
}
.edfm-eyebrow::before {
content: none;
}
.edfm-eyebrow .edfm-orange-mark {
color: var( --edfm-orange );
}
.edfm-eyebrow a,
.edfm-eyebrow a:visited {
color: inherit;
text-decoration: underline;
text-decoration-color: rgba( 255, 138, 0, 0.45 );
text-decoration-thickness: 0.08em;
text-underline-offset: 0.22em;
}
.edfm-eyebrow a:hover {
color: var( --edfm-orange );
text-decoration-color: currentColor;
}
.edfm-eyebrow a:focus-visible {
color: var( --edfm-orange );
outline: 2px solid var( --edfm-orange );
outline-offset: 0.18em;
border-radius: 2px;
}
.edfm-deck {
color: var( --edfm-text-muted );
font-family: var( --edfm-sans );
font-size: 0.95rem;
font-style: italic;
line-height: 1.45;
max-width: none;
margin: 0.25em 0 0.85em 1.4em;
padding: 0;
border: 0;
}
/* ==========================================================================
1. SIDEBAR
========================================================================== */
#mw-panel {
background: transparent;
box-sizing: border-box;
width: var( --edfm-sidebar-width );
padding: 0 0.65rem 1.35rem 0.65rem;
border-right: 0;
box-shadow: none;
z-index: 3;
}
/* Logo anchors the sidebar visually. Keep raster logo artwork contained in
Vector legacy's fixed sidebar slot rather than letting the image render at
its intrinsic PNG size and clip against the rail. */
#p-logo {
box-sizing: border-box;
width: auto;
height: 10rem;
margin: 0 -0.65rem 0.65rem -0.65rem;
padding: 0.5rem 0.55rem 0.45rem 0.55rem;
border-bottom: 0 !important;
background: radial-gradient( circle at 50% 25%, rgba( 255, 138, 0, 0.08 ), transparent 58% );
overflow: hidden;
}
#p-logo a.mw-wiki-logo {
box-sizing: border-box;
display: block;
width: 100% !important;
height: 100% !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
/* Each nav group gets real breathing room from the one before it instead
of being packed together like a stock wiki sidebar. */
#mw-panel .portal,
#mw-panel .vector-menu-portal {
box-sizing: border-box;
width: auto;
max-width: none;
margin-top: 1.45rem;
}
#mw-panel .portal:first-of-type,
#mw-panel .vector-menu-portal:first-of-type {
margin-top: 0;
}
#mw-panel .portal .body,
#mw-panel .portal ul,
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content-list {
box-sizing: border-box;
width: auto;
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
border-color: var( --edfm-border-soft );
}
#mw-panel .portal a {
color: var( --edfm-text-muted );
display: block;
font-size: var( --edfm-fs-sidebar );
line-height: 1.35;
padding: 0.42em 0.55em;
margin: 0.08em -0.35em;
border-left: 2px solid transparent;
border-radius: 2px;
}
#mw-panel .portal a:hover {
color: var( --edfm-cyan );
background: var( --edfm-surface-1 );
}
/* "You are here" -- MediaWiki's sidebar has no built-in current-page
indication; MediaWiki:Common.js adds the .edfm-nav-current class to the
matching list item by comparing hrefs to the current URL. Orange is
reserved for exactly this kind of "important navigation / selected
state" per the colour system, which is why the rest of the sidebar is
deliberately muted rather than orange throughout (an all-orange sidebar
would both fight this indicator and read as visually dominant). */
.edfm-nav-current > a {
color: var( --edfm-orange ) !important;
font-weight: 700;
border-left-color: var( --edfm-orange );
border-left-width: 3px;
background: var( --edfm-surface-2 );
box-shadow: inset 0 0 0 1px rgba( 255, 138, 0, 0.08 );
}
.vector-menu-heading {
color: var( --edfm-text-dim );
font-weight: 700;
font-family: var( --edfm-mono );
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: var( --edfm-fs-utility );
border-left: 2px solid var( --edfm-orange );
padding-left: 0.5em;
margin-left: -0.5em;
margin-bottom: 0.4em;
}
/* Keep the first static Vector sidebar portlet visibly labeled after renaming
MediaWiki:Sidebar's navigation group to "Getting Started". Vector legacy
hides the first post-logo portlet heading by default via #p-logo + .mw-portlet,
so restore only this renamed starter group instead of changing all portlets. */
#p-Getting_Started.vector-menu-portal .vector-menu-heading,
#p-Getting_Started.portal .vector-menu-heading {
display: block !important;
visibility: visible !important;
height: auto !important;
width: auto !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
}
#p-Getting_Started .vector-menu-heading-label {
display: inline !important;
}
/* ==========================================================================
3. TOP BAR -- two-tier chrome
========================================================================== */
/* Vector legacy's #mw-head naturally has ~2.5em of empty space above the
tabs row (core: `#left-navigation/#right-navigation { margin-top:2.5em }`),
originally reserved just for #p-personal to float in. Painting that same
box with a background gradient that stays transparent for that top
band and then switches to a surface colour for the tabs band creates a
real two-tier read -- "primary chrome" (personal tools/search, over the
page's own background) above "wiki authoring controls" (the tabs, on
their own distinct strip) below -- without touching #mw-head's own
position/width mechanics, which is the same fragile absolute-position
system the very first pass of this project had to debug carefully to
get the persistent sidebar working at all. Not worth re-risking that
for a background change. */
#mw-head {
background-image: linear-gradient(
to bottom,
transparent 0,
transparent 2.35em,
var( --edfm-surface-2 ) 2.35em,
var( --edfm-surface-2 ) 100%
);
border-bottom: 1px solid var( --edfm-border );
}
#mw-page-base {
background-color: var( --edfm-bg-deep );
background-image: none;
}
#mw-head-base {
background-color: var( --edfm-bg-deep );
/* Polish pass: thinned from 2px -- at 2px this competed visually with
the masthead's own orange marker/rule directly below it; a single
thinner accent line still reads as "site identity colour" without
the repetition. */
border-bottom: 1px solid var( --edfm-orange );
}
/* Personal tools (login/logout) and the search box are the "primary
chrome" tier -- pulled in by the same gutter used to centre the article,
so on wide screens they visually line up with the centred column
instead of hugging the browser edge, and given noticeably more visual
weight than the tabs below them. */
#p-personal {
right: calc( 0.75em + var( --edfm-gutter ) );
display: flex;
align-items: center;
gap: 0.75rem;
}
#p-personal ul {
display: flex;
align-items: center;
gap: 0.55rem;
}
#p-personal li {
margin-left: 0;
}
#p-personal a {
color: var( --edfm-text-muted );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.3em 0.2em;
}
#p-personal a:hover {
color: var( --edfm-orange );
}
/* Echo's alert/notification icons (bell/tray) in the personal toolbar.
Confirmed by rendering the actual logged-in markup server-side: in
legacy Vector these links get merged straight into the plain personal
tools menu (SkinVectorLegacy::runOnSkinTemplateNavigationHooks) rather
than going through Vector's own `.vector-icon` icon system (that only
wraps items in the views/associated-pages menus). The icon is instead a
`background-image` on the <a> itself, from OOUI's generated
`.oo-ui-icon-bell` / `-tray` / `-bellOutline` classes -- a flat black SVG
baked straight into the image URL, so it's not recolourable via
`background-color` the way the search icon was; this is exactly the
"dark OOUI icon invisible on our dark theme" problem the invert fix
below already solves elsewhere, so reuse that same technique here
instead of a different one. The unread-count badge itself already
colours correctly on its own (Echo maps it to
`@background-color-destructive` / `-progressive`, both redefined to
EDFM's palette) and, being a mostly-saturated colour rather than
black/white/grey, survives this filter close to unchanged. */
#pt-notifications-alert .oo-ui-icon-bell,
#pt-notifications-notice .oo-ui-icon-tray,
#pt-notifications .oo-ui-icon-bellOutline {
filter: invert( 1 ) hue-rotate( 180deg );
}
.edfm-topbar-clocks {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
line-height: 1;
white-space: nowrap;
}
.edfm-topbar-clock {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.3em 0.55em;
background: rgba( 66, 199, 217, 0.08 );
border: 1px solid var( --edfm-border-soft );
border-left: 2px solid var( --edfm-cyan );
color: var( --edfm-text );
}
.edfm-topbar-clock-label {
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
}
.edfm-topbar-clock time {
color: var( --edfm-cyan );
font-weight: 700;
}
.edfm-topbar-clock-local {
background: rgba( 255, 138, 0, 0.06 );
border-left-color: var( --edfm-orange );
}
.edfm-topbar-clock-local time {
color: var( --edfm-orange-bright );
}
#right-navigation {
margin-right: var( --edfm-gutter );
}
#left-navigation {
margin-left: var( --edfm-sidebar-clear );
}
/* Polish pass: core caps this at `width:20vw; max-width:20em`, which read
as cramped next to the rest of the (now larger-scale) interface --
given more room on desktop, still capped so it can't dominate the bar. */
.vector-search-box-inner {
width: 22vw;
max-width: 24em;
}
.vector-search-box-inner input,
#searchInput {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
border: 1px solid var( --edfm-border );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-sidebar );
padding: 0.5em 0.7em;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#searchInput:focus {
border-color: var( --edfm-cyan );
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.22 );
outline: none;
}
#searchInput::placeholder {
color: var( --edfm-text-dim );
}
/* Search submit control: neither rendering path gives this any color of
its own, so on our dark input background it was effectively invisible.
The no-JS legacy form's <button> is a plain black icon at 0.67 opacity
(core skins.vector.styles.legacy/components/SearchBox.less); the
JS/Vue-Codex widget (.vector-search-box-vue) has no separate button at
all, just a start icon inside the input using the same technique
(mask-image recoloured via `background-color`, see Codex's
CdxSearchInput.css). Recolour both to match the site's orange
progressive-action colour used everywhere else. */
.vector-search-box-vue .cdx-text-input__start-icon {
background-color: var( --edfm-orange );
opacity: 1;
}
.searchButton[ name='go' ] {
background-image: none;
background-color: var( --edfm-orange );
opacity: 0.85;
-webkit-mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
mask: no-repeat center / 16px url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/></svg>' );
}
.searchButton[ name='go' ]:hover,
.searchButton[ name='go' ]:focus {
background-color: var( --edfm-orange-bright );
opacity: 1;
}
/* Namespace tabs (Main Page / Discussion, left) and view tabs
(Read / Edit / View history, right) both use Vector legacy's
.vector-menu-tabs-legacy markup. Core skin CSS paints every tab `li`
with a gradient fading to white and forces the selected tab to pure
white -- neither is touched by recolouring the link text alone, which is
why these stayed light before this stylesheet covered the `li`
background too. Core also has an `a:visited` rule (higher specificity
than a plain `a` rule, since a pseudo-class counts the same as a class)
that reasserts a near-black "visited" colour meant for a white
background; since these tabs point at pages you've almost always
already visited, without an explicit `:visited` override here the text
goes dark-on-dark. This can't be caught by reading getComputedStyle() in
an automated check -- browsers deliberately report the *unvisited*
colour to JS for privacy reasons, so it only shows up on an actual
screen; verified with real rendered screenshots, including after
genuinely visiting the linked pages first.
These are the "wiki authoring controls" utility tier -- deliberately
smaller (--edfm-fs-utility) and quieter than personal-tools/search
above them, sitting on their own background strip (see #mw-head above).
Selected state stays orange (it's still real navigation, just
secondary); unselected rests dim so the *selected* tab is the one that
reads clearly. */
.vector-menu-tabs-legacy li {
background-image: none;
background-color: transparent;
}
.vector-menu-tabs-legacy li.selected {
background-image: none;
background-color: var( --edfm-surface-1 );
/* Polish pass: a small underline makes the selected tab unambiguous at
a glance instead of relying on the text colour change alone. */
box-shadow: inset 0 -2px 0 var( --edfm-orange );
}
.vector-menu-tabs-legacy li a,
.vector-menu-tabs-legacy li a:visited {
background-color: transparent;
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility );
letter-spacing: 0.03em;
text-transform: uppercase;
font-weight: 700;
}
.vector-menu-tabs-legacy li a:hover,
.vector-menu-tabs-legacy li a:visited:hover {
color: var( --edfm-text );
}
.vector-menu-tabs-legacy li.selected a,
.vector-menu-tabs-legacy li.selected a:visited {
color: var( --edfm-orange );
}
.vector-menu-tabs-legacy li.new a,
.vector-menu-tabs-legacy li.new a:visited {
color: var( --edfm-link-new );
}
/* "More" actions dropdown (#p-cactions) sits in the same tab row; same
:visited gotcha applies to its menu items. */
.vector-menu-dropdown .vector-menu-heading {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
border-left: none;
padding-left: 8px;
margin-left: 0;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: var( --edfm-fs-utility );
font-weight: 700;
}
.vector-menu-dropdown .vector-menu-heading:hover,
.vector-menu-dropdown .vector-menu-heading:focus {
color: var( --edfm-orange );
}
.vector-menu-dropdown .vector-menu-content {
background-color: var( --edfm-surface-3 );
border-color: var( --edfm-border );
}
.vector-menu-dropdown .vector-menu-content a,
.vector-menu-dropdown .vector-menu-content a:visited {
color: var( --edfm-text-muted );
font-size: var( --edfm-fs-sidebar );
}
.vector-menu-dropdown .vector-menu-content li.selected a,
.vector-menu-dropdown .vector-menu-content li.selected a:visited {
color: var( --edfm-orange );
}
.vector-menu-dropdown .vector-menu-content li:hover {
background-color: var( --edfm-surface-4 );
}
/* Front-page chrome: the hero already names the site, so suppress the
generated MediaWiki page title only on the Main Page. Keep the namespace
tab label and all other article titles intact. */
body.page-Main_Page #firstHeading {
display: none;
}
body.page-Main_Page .mw-body-content {
margin-top: 0;
}
/* ==========================================================================
CONTENT / ARTICLE SURFACE
========================================================================== */
.mw-body,
.parsoid-body {
background-color: var( --edfm-surface-1 );
color: var( --edfm-text );
border-color: var( --edfm-border );
font-family: var( --edfm-sans );
}
.mw-body {
border-right: 1px solid var( --edfm-border );
}
#content {
background-color: var( --edfm-surface-1 );
}
/* Site notice chrome. The global disclaimer was moved to its dedicated
legal/disclaimer page, so an empty #siteNotice must not leave behind a
phantom divider at the top of the article surface. */
#siteNotice:empty {
display: none;
}
#siteNotice:not( :empty ) {
font-size: var( --edfm-fs-meta );
line-height: 1.5;
color: var( --edfm-text-dim );
font-style: normal;
padding-bottom: 0.7em;
margin-bottom: 1.4rem;
border-bottom: 1px solid var( --edfm-border-soft );
}
#siteNotice:not( :empty ) em, #siteNotice:not( :empty ) i {
color: var( --edfm-text-muted );
font-style: italic;
}
#siteNotice:not( :empty ) a {
color: var( --edfm-link-external );
}
#siteNotice a:hover {
color: var( --edfm-link-external-hover );
}
/* ==========================================================================
HOME PAGE DASHBOARD
========================================================================== */
.edfm-home-hero {
margin: 0.9rem 0 1.6rem;
padding: 1.35rem 1.55rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.16 ), transparent 34% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.14 ), transparent 42% ),
var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 4px solid var( --edfm-cyan );
clip-path: polygon( 0 0, calc( 100% - 12px ) 0, 100% 12px, 100% 100%, 0 100% );
}
.edfm-home-hero-kicker,
.edfm-home-card-kicker {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.edfm-home-hero-title {
margin-top: 0.25rem;
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: clamp( 1.55rem, 1.1rem + 1.5vw, 2.2rem );
font-weight: 800;
line-height: 1.15;
}
.edfm-home-hero-text {
max-width: none;
margin-top: 0.55rem;
color: var( --edfm-text-muted );
font-size: 1.05rem;
line-height: 1.55;
}
.edfm-home-grid {
display: grid;
gap: 1rem;
margin: 1.2rem 0 2rem;
}
.edfm-home-grid-four {
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}
.edfm-home-grid-topics {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-grid-two {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.edfm-home-card {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
padding: 1rem 1.1rem;
box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.2 );
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-home-card:hover {
transform: translateY( -2px );
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-orange );
}
.edfm-home-card-primary {
border-left-color: var( --edfm-orange );
}
.edfm-home-card-warning {
border-left-color: var( --edfm-text-dim );
}
.edfm-home-card-title,
.edfm-home-card-title a {
margin-top: 0.35rem;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
line-height: 1.3;
text-decoration: none;
}
.edfm-home-card-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-home-card-text,
.edfm-home-link-list {
margin-top: 0.65rem;
color: var( --edfm-text-muted );
line-height: 1.6;
}
.edfm-home-link-list a {
font-weight: 600;
}
@media ( max-width: 1100px ) {
.edfm-home-grid-four {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
@media ( max-width: 760px ) {
.edfm-home-grid-four,
.edfm-home-grid-topics,
.edfm-home-grid-two {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
HOME PAGE NEWS MODULE
========================================================================== */
.edfm-home-news {
margin: 1.8rem 0 2.2rem;
}
.edfm-news-feature-grid {
display: grid;
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
gap: 1rem;
margin-bottom: 1rem;
}
.edfm-news-card,
.edfm-news-list {
background: var( --edfm-surface-2 );
border: 1px solid var( --edfm-border );
box-shadow: 0 14px 26px rgba( 0, 0, 0, 0.22 );
overflow: hidden;
}
.edfm-news-card {
display: flex;
flex-direction: column;
min-height: 100%;
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.edfm-news-card:hover {
transform: translateY( -2px );
border-color: rgba( 255, 138, 0, 0.48 );
background: var( --edfm-surface-3 );
}
.edfm-news-card-art {
display: flex;
align-items: flex-end;
min-height: 7rem;
padding: 0.8rem 1rem;
box-sizing: border-box;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.28 ), transparent 42% ),
linear-gradient( 315deg, rgba( 66, 199, 217, 0.2 ), transparent 48% ),
linear-gradient( 180deg, var( --edfm-surface-4 ), var( --edfm-surface-1 ) );
border-bottom: 1px solid var( --edfm-border );
color: rgba( 237, 240, 242, 0.72 );
font-family: var( --edfm-mono );
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.edfm-news-card-primary .edfm-news-card-art {
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.38 ), transparent 46% ),
linear-gradient( 315deg, rgba( 79, 159, 232, 0.26 ), transparent 52% ),
var( --edfm-surface-4 );
}
.edfm-news-card-body {
padding: 1rem 1.15rem 1.15rem;
}
.edfm-news-meta {
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
.edfm-news-title,
.edfm-news-title a {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 1.1rem;
font-weight: 800;
line-height: 1.25;
text-decoration: none;
}
.edfm-news-title a:hover {
color: var( --edfm-orange-bright ) !important;
}
.edfm-news-summary {
color: var( --edfm-text-muted );
line-height: 1.55;
margin-top: 0.65rem;
}
.edfm-news-list {
padding: 1.1rem 1.25rem 1.2rem;
border-left: 4px solid var( --edfm-orange );
}
.edfm-news-list-heading {
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.edfm-news-list ul {
margin: 0;
}
.edfm-news-list li {
margin-bottom: 0.55rem;
color: var( --edfm-text-muted );
}
.edfm-news-more {
margin-top: 0.9rem;
padding-top: 0.85rem;
border-top: 1px solid var( --edfm-border-soft );
text-align: right;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
@media ( max-width: 900px ) {
.edfm-news-feature-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
10. JUMP NAVIGATION (table of contents)
========================================================================== */
/* A compact navigation strip/tile-grid rather than a traditional TOC box
of small text links -- real MediaWiki anchors/markup untouched, this is
all presentation. "Contents" is kept in the DOM for screen readers/
no-JS/no-CSS fallback (more standard wording there anyway) and visually
replaced with "Jump to" via ::before on the wrapper, with the real
heading text hidden via font-size rather than display:none so it
remains in the accessibility tree. */
#toc, .toc {
display: block;
width: 100%;
box-sizing: border-box;
background: none;
border: none;
color: var( --edfm-text );
padding: 0;
margin: 1.8rem 0;
}
.toctitle {
position: relative;
margin-bottom: 0.7em;
}
.toctitle::before {
content: 'Jump to';
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var( --edfm-orange );
}
/* Core ships `.toc h2 { font-size: 100%; ... }` (mediawiki.skinning/toc/
screen.less) at the exact same specificity (one class + one tag) as a
plain `.toctitle h2` rule -- same "tie that doesn't resolve the way
naive source order would suggest" gotcha documented elsewhere in this
file. #toc's own ID makes this one unambiguous instead of relying on
cascade order. */
#toc .toctitle h2,
.toc .toctitle h2 {
font-size: 0 !important;
line-height: 0;
margin: 0;
border: none;
padding: 0;
display: inline;
}
.toctitle h2::before,
.toctitle h2::after {
content: none;
}
.toctogglelabel::before {
color: var( --edfm-text-dim );
}
/* Desktop: a balanced multi-column jump list. CSS grid flows row-first,
which makes numbered sections read 1, 2, 3, 4 across the first row. For a
reference/walkthrough TOC, scan order is clearer when each column reads
downward first: 1/2/3, then 4/5/6, then 7/8/9. CSS columns preserve the
real DOM/source order while presenting that column-major layout on every
page that uses the stock MediaWiki TOC. */
.toc > ul {
display: block;
/* Short TOCs, like the front page's four Jump To entries, read awkwardly
in three CSS columns because the browser fills only two narrow columns
and leaves an empty third slot. Default to two full-width columns so
short jump lists feel centered and stretched across the article rail. */
column-count: 2;
column-gap: 0.55rem;
list-style: none;
margin: 0 auto;
padding: 0;
}
/* Longer article TOCs still benefit from the denser three-column layout. This
keeps source/keyboard order untouched while avoiding the empty-column look
on short page-level navigation blocks. */
.toc > ul:has( > li:nth-child( 5 ) ) {
column-count: 3;
}
.toc > ul > li {
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 0.45rem;
}
.toc li {
margin-top: 0;
}
/* 2026-08-08 density pass: reverted to side-by-side number/label (from the
earlier "stacked number-above-label" polish pass) specifically to cut
per-tile height -- with 12 sections on articles like The Dweller, the
stacked layout meant the jump nav alone filled most of the first
viewport. Row layout plus tighter padding/font-size gets noticeably
more sections above the fold without dropping the numbering or shrinking
tap targets below a comfortable size -- see the dedicated mobile padding
bump further down for keeping touch targets safe on small screens
specifically. Whole tile stays one real <a>, so it's still a single
click/focus target and keyboard tab stop either way. */
.toc a {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
height: 100%;
box-sizing: border-box;
padding: 0.5em 0.75em 0.5em 0.7em;
background: var( --edfm-surface-3 );
/* Left accent rail: matches the orange section numbers and gives each
jump tile a stronger EDFM navigation affordance without boxing the
entire card. */
border-left: 4px solid var( --edfm-orange );
box-shadow: inset 1px 0 0 rgba( 255, 162, 26, 0.35 );
color: var( --edfm-text-muted );
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.toc a:hover {
background: var( --edfm-surface-4 );
border-left-color: var( --edfm-cyan );
box-shadow: inset 1px 0 0 rgba( 66, 199, 217, 0.45 );
color: var( --edfm-text );
transform: translateY( -1px );
}
/* Nested sub-levels (rare on this site so far) drop back to a plain
indented block list inside their parent tile's grid cell rather than
trying to stay gridded themselves. */
.toc ul ul {
grid-column: unset;
list-style: none;
margin: 0.3em 0 0 1.2em;
padding: 0;
display: block;
}
.toc ul ul a {
flex-direction: row;
align-items: center;
background: none;
border-left-width: 1px;
padding: 0.3em 0.6em;
}
.toc ul ul .tocnumber {
font-size: 0.85em;
}
.toc ul ul .toctext {
font-size: 0.85em;
}
.tocnumber {
color: var( --edfm-orange );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: 1.05rem;
line-height: 1;
}
.toctext {
color: inherit;
font-size: 0.85rem;
line-height: 1.3;
}
/* Column count changes only at readable/touch-friendly breakpoints. Keep
column-major ordering at 3 and 2 columns; mobile becomes the natural single
source-order list. */
@media ( max-width: 860px ) {
.toc > ul {
column-count: 2;
}
}
@media ( max-width: 560px ) {
.toc > ul {
column-count: 1;
}
/* Single-column tiles are already full-width here, so there's no
density pressure left -- restore closer to the pre-2026-08-08
padding instead of the tighter desktop value, keeping tap targets
comfortable rather than compacting mobile just because desktop
compacted. */
.toc a {
padding: 0.7em 0.95em;
}
}
/* ==========================================================================
5b. FULL-WIDTH ARTICLE FLOW OVERRIDES
========================================================================== */
/* 2026-08-10 audit: EDFM pages should not leave half the article rail empty.
Earlier readability caps on paragraphs/hero copy made long-form sections
look like narrow blocks while tables, TOCs, and navigation tiles spanned
the page. Keep the main rail full-width everywhere; individual components
may still opt into their own internal grids, but ordinary article copy and
common block containers should stretch to the content edge. */
.mw-parser-output > p,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > dl,
.mw-parser-output > div:not( .thumb ):not( .tright ):not( .tleft ):not( .floatright ):not( .floatleft ):not( .edfm-status ):not( .edfm-panel ):not( .edfm-box ) {
max-width: none;
box-sizing: border-box;
}
/* Final guard against stale/skin rules recapping article prose while leaving
compact maintenance/status panels free to keep their intentional centred width. */
.mw-body .mw-parser-output > p,
.mw-parser-output > p {
max-width: none !important;
width: 100%;
box-sizing: border-box;
}
/* ==========================================================================
6. PANELS / CALLOUTS, and 11. ARTICLE METADATA / STATUS MODULE
========================================================================== */
/* Deliberately NOT defined here. .edfm-box / .edfm-panel* / .edfm-status* /
.edfm-inline-flag / .edfm-related* are used exclusively by the
editorial templates (see Template:Article status, Template:Draft
warning, Template:Related articles, etc.), which already load
Template:EDFM style/styles.css themselves via <templatestyles>.
Defining the same class names in both this file and that one would
leave their relative precedence dependent on unclear/unstable ordering
between a ResourceLoader "site" stylesheet and a TemplateStyles-injected
<style> tag -- rather than rely on that, there is exactly one definition
of each, living in Template:EDFM style/styles.css. That file freely uses
the --edfm-* custom properties defined above; custom properties resolve
through the DOM regardless of which stylesheet declared vs references
them, so this split costs nothing. */
/* ==========================================================================
7. TABLES (wikitables, and Special: pages' tables)
========================================================================== */
table.wikitable,
table.mw-datatable {
background-color: var( --edfm-surface-2 );
color: var( --edfm-text );
border-color: var( --edfm-border );
font-size: var( --edfm-fs-body );
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
border-color: var( --edfm-border );
font-family: var( --edfm-mono );
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: var( --edfm-fs-meta );
text-align: left;
padding: 0.6em 0.8em;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
border-color: var( --edfm-border-soft );
padding: 0.6em 0.8em;
}
/* Subtle alternating row treatment -- helps scanning wide/dense reference
tables without turning them into cards. */
table.wikitable > tbody > tr:nth-child( even ),
table.wikitable > * > tr:nth-child( even ) {
background-color: var( --edfm-surface-1 );
}
/* mw-json content model (Module:Data/* pages, e.g. Module:Data/Engineers/*)
-- MediaWiki core's JSON page view (resources/src/mediawiki.content.json.less)
styles itself from Codex design tokens, which this site's dark theme never
touches, so these tables rendered in MediaWiki's stock light colours
against every other dark surface on the site. Recoloured to match the
table.wikitable treatment above instead of inventing a new look. */
table.mw-json {
background-color: var( --edfm-surface-2 );
color: var( --edfm-text );
font-size: var( --edfm-fs-body );
}
table.mw-json tr {
background-color: var( --edfm-surface-2 );
}
table.mw-json th,
table.mw-json td {
border-color: var( --edfm-border-soft );
padding: 0.6em 0.8em;
}
table.mw-json th {
background-color: var( --edfm-surface-3 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: var( --edfm-fs-meta );
text-align: left;
}
.mw-json-value,
.mw-json-single-value {
background-color: transparent;
color: var( --edfm-text );
}
.mw-json-empty {
background-color: transparent;
color: var( --edfm-text-dim );
}
/* ==========================================================================
15. FOOTER
========================================================================== */
/* A real branded footer: a small wordmark line (pure CSS generated
content -- decorative branding only, redundant with the sidebar logo
already visible, so nothing load-bearing depends on it being
selectable), a top rule with more separation from the article above it,
and MediaWiki's real info/places/icon links laid out on a clean grid
with the badges aligned as a group rather than floating alone. */
.mw-footer {
margin-left: var( --edfm-sidebar-clear );
margin-right: var( --edfm-gutter );
margin-top: 2.5rem;
padding-top: 1.6rem;
border-top: 1px solid var( --edfm-border );
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "brand brand" "info icons" "places icons";
align-items: center;
column-gap: 2em;
row-gap: 0.4rem;
}
.mw-footer::before {
grid-area: brand;
content: 'EDFM // Elite Dangerous Field Manual';
font-family: var( --edfm-mono );
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var( --edfm-text-muted );
margin-bottom: 0.5rem;
}
.mw-footer,
.mw-footer li,
#footer-info,
#footer-info li {
color: var( --edfm-text-dim );
border-color: var( --edfm-border-soft );
font-size: var( --edfm-fs-meta );
}
#footer-info {
grid-area: info;
margin: 0;
line-height: 1.6;
}
#footer-places {
grid-area: places;
margin: 0;
}
/* Same "small uppercase label" treatment used for tags/meta text
elsewhere, so these read as deliberate EDFM navigation rather than
default MediaWiki footer links. */
#footer-places li {
display: inline-block;
margin-right: 1.4em;
}
#footer-places a {
font-family: var( --edfm-mono );
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 0.78rem;
}
/* A left rule ties the badges to the rest of the footer instead of
letting them read as detached/floating in their own space. */
#footer-icons {
grid-area: icons;
align-self: center;
display: flex;
gap: 0.75em;
margin: 0;
padding-left: 1.6em;
border-left: 1px solid var( --edfm-border-soft );
}
#footer-icons img {
background: var( --edfm-text );
border-radius: 2px;
}
@media ( max-width: 640px ) {
.mw-footer {
grid-template-columns: 1fr;
grid-template-areas: "brand" "info" "places" "icons";
}
#footer-icons {
margin-top: 0.7em;
padding-left: 0;
border-left: none;
border-top: 1px solid var( --edfm-border-soft );
padding-top: 0.7em;
}
}
/* ==========================================================================
MISC MediaWiki UI chrome that ships with light backgrounds by default
========================================================================== */
.catlinks {
background: none !important;
border: none !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim );
font-size: var( --edfm-fs-meta );
padding: 0.9em 0 0 0 !important;
margin-top: 1.8rem !important;
}
div.thumbinner {
background-color: var( --edfm-surface-2 );
border-color: var( --edfm-border );
}
.thumbimage {
background-color: var( --edfm-surface-1 );
border-color: var( --edfm-border );
}
/* Code / preformatted text (syntaxhighlight uses its own Pygments theme,
set via $wgPygmentsStyle in LocalSettings.php; this covers plain
<pre>/<code> that isn't Pygments-highlighted). */
pre, code, .mw-code {
background-color: var( --edfm-surface-2 );
color: var( --edfm-text );
border-color: var( --edfm-border );
font-family: var( --edfm-mono );
}
/* ==========================================================================
GENERIC INFOBOX -- see Template:Infobox
========================================================================== */
.edfm-infobox {
position: relative;
z-index: 2;
float: right;
clear: right;
width: 350px;
max-width: min( 350px, 42% );
margin: 0 0 1.25em 1.35em;
border: 1px solid var( --edfm-border );
border-top: 2px solid var( --edfm-orange );
background: var( --edfm-surface-2 );
color: var( --edfm-text );
font-size: 0.92rem;
}
.edfm-infobox-title {
background: var( --edfm-orange );
color: var( --edfm-bg-deep );
font-weight: 700;
font-family: var( --edfm-mono );
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: center;
padding: 0.5em 0.6em;
clip-path: polygon( 0 0, calc( 100% - 14px ) 0, 100% 14px, 100% 100%, 0 100% );
}
.edfm-infobox-image {
text-align: center;
padding: 0.6em;
border-bottom: 1px solid var( --edfm-border );
}
.edfm-infobox-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 160px;
border: 1px dashed var( --edfm-border );
background: var( --edfm-surface-1 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-utility );
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
padding: 0.5em;
}
/* Optional section label (Template:Infobox's |groupN=) splitting a long
infobox into scannable groups, e.g. Engineer infoboxes into "ENGINEER"
and "ACCESS" (2026-08-08, part of the Engineer article layout pass). A
shaded band with a bottom rule rather than a full boxed sub-header --
consistent with .edfm-infobox-row's own bottom-rule-only separator, not
a new visual language. */
.edfm-infobox-group {
background: var( --edfm-surface-3 );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-weight: 700;
font-size: var( --edfm-fs-utility );
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.35em 0.7em;
border-bottom: 1px solid var( --edfm-border );
}
.edfm-infobox-row {
display: flex;
border-bottom: 1px solid var( --edfm-border-soft );
padding: 0.45em 0.7em;
}
.edfm-infobox-row:last-child {
border-bottom: none;
}
.edfm-infobox-label {
font-weight: 700;
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
width: 40%;
flex-shrink: 0;
color: var( --edfm-cyan );
}
.edfm-infobox-value {
width: 60%;
}
@media ( max-width: 640px ) {
.edfm-infobox {
float: none;
width: auto;
max-width: none;
margin: 1em 0;
}
}
/* ==========================================================================
14. 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::before {
display: none;
}
body {
display: flex;
flex-direction: column;
}
/* #mw-head-base ships with `margin-top: -5em` in Vector legacy's own
CSS -- a trick to sit it behind the absolutely-positioned header.
Now that the header is a normal flex sibling, that negative margin
drags everything after it upward. Neutralize both decorative
strips. */
#mw-page-base,
#mw-head-base {
order: 0;
height: 0;
margin: 0;
min-height: 0;
}
#mw-navigation {
order: 1;
}
#content {
order: 2;
}
.mw-footer {
order: 3;
}
#mw-head {
position: static;
width: auto;
background-image: none;
background-color: var( --edfm-surface-2 );
}
#left-navigation,
#right-navigation {
float: none;
margin: 0 !important;
width: auto;
clear: both;
}
#left-navigation {
margin-top: 0 !important;
}
/* Core Vector legacy floats each tab/dropdown portlet
(.vector-menu-tabs-legacy for Page/Discussion and Read/View
source/View history, .vector-menu-dropdown for the More menu) AND
floats every <li> inside their <ul>, with no wrapping at all -- at
narrow widths the labels just overflow and overlap each other
(confirmed with a real screenshot: "View source" and "More"
overlapped instead of wrapping to a new line). Switching the
portlets to inline-block and their tab lists to flex-wrap lets them
reflow onto as many rows as needed instead. */
#left-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-dropdown {
float: none;
display: inline-block;
vertical-align: top;
}
.vector-menu-tabs-legacy ul {
float: none;
display: flex;
flex-wrap: wrap;
}
.vector-menu-tabs-legacy li {
float: none;
}
#p-personal {
position: static;
text-align: right;
padding: 0.5em 1em;
margin: 0;
right: auto !important;
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;
background: var( --edfm-bg-deep );
border-top: 1px solid var( --edfm-border );
border-bottom: 1px solid var( --edfm-border );
}
.mw-body,
#mw-data-after-content,
.mw-footer {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none;
}
.mw-body {
margin-top: 0;
border-width: 0;
padding: 1em;
}
.edfm-status-details {
grid-template-columns: 1fr;
}
/* .toc > ul column count is NOT overridden here -- the dedicated
1150px/560px breakpoints above already cover every width down to
the smallest phones; duplicating a rule here previously fought
those (same specificity, this position in the cascade would have
won and wrongly forced 1 column as low as 561px). */
#firstHeading {
font-size: 1.6rem;
}
.mw-body h2 {
margin-top: 2.25rem;
}
.edfm-eyebrow {
padding-top: 0.9em;
}
}
/* ==========================================================================
16. OOUI DIALOGS -- VisualEditor's save dialog, and any other OOUI
dialog (delete/move/protect confirmations, special-page dialogs).
These render via OOUI's own bundled WikimediaUI theme stylesheet,
entirely outside the .edfm-* component system this file otherwise
covers, so without this they show up starkly white against the rest of
the dark-themed site regardless of any variable/token used elsewhere in
this file. !important is justified the same way as the h1-h6 fix above:
OOUI's own stylesheet loads with equal-or-higher effective specificity,
and this is a correctness/contrast fix, not decoration.
========================================================================== */
.oo-ui-window-frame {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-processDialog {
background: rgba( 7, 9, 11, 0.75 ) !important;
}
.oo-ui-processDialog-navigation,
.oo-ui-window-head,
.oo-ui-window-foot {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-processDialog-title,
.oo-ui-labelElement-label,
.oo-ui-fieldLayout-header,
.oo-ui-fieldLayout .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-inputWidget-input {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* VisualEditor's reference dialog embeds a mini target widget for the
reference body. The widget ships with a white WikimediaUI base surface,
so theme that inner editing box separately from the surrounding OOUI
dialog chrome. */
.ve-ui-mwReferenceDialog .ve-ui-targetWidget,
.ve-ui-mwReferenceDialog .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ),
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget,
.ve-ui-mwReferenceEditPanel .ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ) {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-surface,
.ve-ui-mwReferenceDialog .ve-ce-surface,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode,
.ve-ui-mwReferenceDialog .ve-ce-documentNode,
.ve-ui-mwReferenceDialog .ve-ui-surface-placeholder {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode p,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode li,
.ve-ui-mwReferenceDialog .ve-ce-attachedRootNode span {
color: var( --edfm-text ) !important;
}
.ve-ui-mwReferenceDialog .ve-ui-targetWidget-focused {
border-color: var( --edfm-cyan ) !important;
box-shadow: inset 0 0 0 1px rgba( 77, 199, 232, 0.42 ) !important;
}
.ve-ui-mwSaveDialog-options,
.oo-ui-panelLayout,
.oo-ui-window-body {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
}
.oo-ui-popupWidget-popup {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-buttonElement:not( .oo-ui-flaggedElement-primary ) > .oo-ui-buttonElement-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
17. OOUI TOOLBAR -- VisualEditor's persistent editing toolbar and its
dropdown menus (Cite, Insert, paragraph style, etc.), and the equivalent
toolbar/popups used when editing a single section. Same root cause as
16. OOUI DIALOGS above (OOUI's own bundled theme, not touched by
anything else in this file), found separately because it's a different
set of OOUI classes (toolbar chrome, not dialog chrome). Icons are not
overridden here and don't need to be -- they're currentColor-based, so
they pick up the text colour set below automatically.
========================================================================== */
.oo-ui-toolbar-bar,
.oo-ui-toolGroup-tools,
.oo-ui-popupToolGroup-tools {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-tool-title,
.oo-ui-tool-link,
.oo-ui-toolGroup-tools .oo-ui-optionWidget,
.oo-ui-menuOptionWidget,
.oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
.oo-ui-optionWidget.oo-ui-optionWidget-selected,
.oo-ui-optionWidget:hover,
.oo-ui-tool:hover .oo-ui-tool-link {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
18. OOUI GENERIC MENUS -- .oo-ui-menuSelectWidget is OOUI's general
dropdown/autocomplete menu class (paragraph-style picker, citation-type
picker, link/media search suggestions, etc.) -- a different class from
the toolbar-specific popups in 17. above, confirmed separately via
computed-style inspection to default to the same white OOUI theme
background.
========================================================================== */
.oo-ui-menuSelectWidget {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
}
.oo-ui-menuOptionWidget {
color: var( --edfm-text ) !important;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget:hover {
background: var( --edfm-surface-4 ) !important;
}
/* ==========================================================================
19. OOUI ICONS -- the toolbar/menu icons themselves (Bold, link, list,
Cite, undo/redo, etc.) are rendered as background-image SVGs with a
colour baked into the SVG markup, not currentColor-based masks -- so
16-18 above (which only recolour backgrounds/text) left them dark and
low-contrast against the now-dark surfaces. OOUI ships its own fix for
exactly this, gated behind a narrow accessibility media query
(forced-colors + prefers-color-scheme: dark) that doesn't apply to this
site's own always-on dark theme -- reusing that exact technique
unconditionally rather than inventing a different one. `:not(
.oo-ui-image-invert )` is OOUI's own exclusion for icons already meant
to render light (e.g. on the orange primary-button background) --
inverting those too would flip them back to dark.
========================================================================== */
.oo-ui-iconElement-icon:not( .oo-ui-image-invert ),
.oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) {
filter: invert( 1 ) hue-rotate( 180deg );
}
/* ==========================================================================
20. EDIT SOURCE FORM -- MediaWiki core + WikiEditor + CodeMirror
The source editor is not covered by the article/component selectors above:
`action=edit` loads core edit-form CSS, WikiEditor chrome, and sometimes
CodeMirror with their own light neutral surfaces. Force the same EDFM dark
surface stack here so the source page no longer flashes as a white island.
========================================================================== */
.mw-editform,
#editform,
#toolbar,
.editOptions,
.mw-editTools,
.mw-summary-preview,
.mw-datatable,
.wikiEditor-ui,
.wikiEditor-ui-view,
.wikiEditor-ui-text,
.wikiEditor-ui-toolbar,
.wikiEditor-ui-top,
.wikiEditor-ui-controls,
.wikiEditor-ui-tabs,
.wikiEditor-ui-buttons,
.wikiEditor-ui-left,
.wikiEditor-ui-right,
.editButtons,
.CodeMirror,
.CodeMirror-scroll {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-editform textarea,
#wpTextbox1,
#wpSummary,
#wpSummaryWidget input,
#editform input[type='text'],
#editform input[type='search'],
#editform textarea,
.wikiEditor-ui-text textarea,
.CodeMirror-code,
.CodeMirror-lines,
.CodeMirror pre {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
caret-color: var( --edfm-orange-bright );
}
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .tabs,
.wikiEditor-ui-toolbar .page,
.wikiEditor-ui-toolbar .sections,
.wikiEditor-ui-toolbar .section,
.wikiEditor-ui-toolbar .options,
.wikiEditor-ui-toolbar .booklet,
.wikiEditor-ui-toolbar .pages,
.CodeMirror-gutters {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text-muted ) !important;
border-color: var( --edfm-border ) !important;
}
.wikiEditor-ui-toolbar a,
.wikiEditor-ui-toolbar .label,
.wikiEditor-ui-toolbar .tab a,
.mw-editTools a,
.editOptions label,
.mw-editform label,
.CodeMirror-linenumber {
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab a:hover,
.wikiEditor-ui-toolbar .tool-button:hover,
.wikiEditor-ui-toolbar .tool-select:hover,
.wikiEditor-ui-toolbar .page-table th,
.wikiEditor-ui-toolbar .page-table td,
.CodeMirror-activeline-background {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.wikiEditor-ui-toolbar .tab.current a,
.wikiEditor-ui-toolbar .section-main,
.CodeMirror-selected {
background: var( --edfm-surface-4 ) !important;
}
.CodeMirror-cursor {
border-left-color: var( --edfm-orange-bright ) !important;
}
.CodeMirror-matchingbracket {
color: var( --edfm-orange-bright ) !important;
}
/* VisualEditor's standalone "Edit source" mode (.ve-ui-surface-source, set
by ve.ui.Surface when this.mode === 'source') ships its own white surface
-- unlike visual mode, which reuses normal dark article styling since
it's just contenteditable article HTML. Scoped to -source only so the
visual WYSIWYG canvas is untouched. */
.ve-ui-surface-source,
.ve-init-mw-tempWikitextEditorWidget {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-surface-source .ve-ce-surface,
.ve-ui-surface-source .ve-ce-documentNode,
.ve-ui-surface-source .ve-ui-surface-placeholder {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}
/* ==========================================================================
21. FILE PAGE CHROME -- #filetoc (the File / File history / File usage /
Metadata nav on File: description pages) is defined in MediaWiki core's
mediawiki.action.view.filepage.less, entirely separate from both the
.edfm-* system and the OOUI fixes in 16-19 above -- a different
subsystem again, only loaded on File: pages, which is why it was never
touched by anything else in this file. Link colour inside it already
correctly inherits the site's normal link blue; only the light neutral
background/border needed overriding.
========================================================================== */
#filetoc {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
}
/* ==========================================================================
22. FILE PAGE: METADATA TABLE + MEDIA VIEWER BUTTON -- #mw_metadata is
the EXIF-style metadata table (separate from the File history table
above -- that one already carries the .wikitable class and picked up
dark styling from 7. TABLES automatically; this one doesn't have that
class, so it never matched). The "Open in Media Viewer" button is a
Codex component (MultimediaViewer extension) -- a third distinct
styling subsystem from OOUI and MediaWiki core skinning, again never
touched by anything else in this file.
========================================================================== */
#mw_metadata th,
#mw_metadata td {
background: var( --edfm-surface-2 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.mw-mmv-view-expanded.cdx-button {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* Core MediaWiki/action buttons: match EDFM dark theme instead of default white/orange controls. */
.mw-ui-button,
.mw-htmlform-submit,
.mw-htmlform-ooui-wrapper button,
#mw-patrol-form button,
#mw-patrol-form input[type="submit"],
form.mw-htmlform button,
form.mw-htmlform input[type="submit"],
input[type="submit"].mw-ui-button,
button.mw-ui-button,
.cdx-button:not( .cdx-button--fake-button--enabled ) {
background: var( --edfm-surface-4 ) !important;
color: var( --edfm-text ) !important;
border: 1px solid var( --edfm-border-strong, var( --edfm-border ) ) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var( --edfm-mono ) !important;
font-weight: 800 !important;
text-shadow: none !important;
}
.mw-ui-button:hover,
.mw-htmlform-submit:hover,
.mw-htmlform-ooui-wrapper button:hover,
#mw-patrol-form button:hover,
#mw-patrol-form input[type="submit"]:hover,
form.mw-htmlform button:hover,
form.mw-htmlform input[type="submit"]:hover,
input[type="submit"].mw-ui-button:hover,
button.mw-ui-button:hover,
.cdx-button:not( .cdx-button--fake-button--enabled ):hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-orange-bright ) !important;
border-color: var( --edfm-orange ) !important;
}
.mw-ui-button:focus,
.mw-htmlform-submit:focus,
.mw-htmlform-ooui-wrapper button:focus,
#mw-patrol-form button:focus,
#mw-patrol-form input[type="submit"]:focus,
form.mw-htmlform button:focus,
form.mw-htmlform input[type="submit"]:focus,
input[type="submit"].mw-ui-button:focus,
button.mw-ui-button:focus,
.cdx-button:not( .cdx-button--fake-button--enabled ):focus {
outline: 2px solid var( --edfm-cyan ) !important;
outline-offset: 2px !important;
}
/* Patrol action: remove the cramped review button from the public article chrome. */
#mw-patrol-form {
display: none !important;
}
/* Frontier news: after removing the repeated dispatch list, keep attribution compact. */
.edfm-news-attribution-compact {
margin-top: 0.35rem;
padding-top: 0.6rem;
}
/* ===========================================================================
23. RUNE-WIKI-INSPIRED MOBILE APP SHELL
=========================================================================== */
/* Inspired by RuneScape.wiki's mobile ergonomics -- persistent top app bar,
large touch targets, off-canvas navigation, search-forward layout, and
single-column readable article flow -- while preserving EDFM's dark field
manual identity and not copying RuneScape.wiki assets/CSS.
The close button is injected into #mw-panel by Common.js, so it must be
explicitly hidden by default; otherwise a tiny native white button appears
in the desktop sidebar's top-left corner. */
.edfm-mobile-appbar,
.edfm-mobile-scrim,
.edfm-mobile-close-button {
display: none;
}
@media ( max-width: 800px ) {
html {
-webkit-text-size-adjust: 100%;
}
body {
background: var( --edfm-bg-page );
overflow-x: hidden;
}
body.edfm-mobile-menu-open {
overflow: hidden;
}
.edfm-mobile-appbar {
display: grid;
grid-template-columns: 48px 1fr 48px;
align-items: center;
position: sticky;
top: 0;
z-index: 1200;
min-height: 56px;
padding: 0 0.35rem;
background:
linear-gradient( 90deg, rgba( 255, 138, 0, 0.18 ), transparent 38% ),
var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.35 );
}
.edfm-mobile-brand {
min-width: 0;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.edfm-mobile-brand::before {
content: 'EDFM // ';
color: var( --edfm-orange );
}
.edfm-mobile-menu-button,
.edfm-mobile-search-button,
.edfm-mobile-close-button {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var( --edfm-text );
font: 700 1.5rem/1 var( --edfm-mono );
cursor: pointer;
}
.edfm-mobile-menu-button:focus-visible,
.edfm-mobile-search-button:focus-visible,
.edfm-mobile-close-button:focus-visible {
outline: 2px solid var( --edfm-cyan );
outline-offset: -4px;
}
.edfm-mobile-menu-button::before {
content: '☰';
color: var( --edfm-orange );
}
.edfm-mobile-search-button::before {
content: '⌕';
font-size: 1.85rem;
color: var( --edfm-cyan );
}
.edfm-mobile-close-button::before {
content: '×';
color: var( --edfm-text );
}
.edfm-mobile-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba( 0, 0, 0, 0.58 );
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
body.edfm-mobile-menu-open .edfm-mobile-scrim {
opacity: 1;
pointer-events: auto;
}
#mw-navigation {
background: var( --edfm-surface-2 );
box-shadow: none;
}
#mw-head {
position: relative;
z-index: 1100;
border-bottom: 1px solid var( --edfm-border );
}
#mw-head .vector-search-box {
display: none;
margin: 0;
padding: 0.65rem;
background: var( --edfm-surface-2 );
border-top: 1px solid var( --edfm-border-soft );
}
body.edfm-mobile-search-open #mw-head .vector-search-box {
display: block;
}
#mw-head .vector-search-box-inner,
#mw-head #searchform {
width: 100%;
}
#mw-head #searchInput {
min-height: 44px;
box-sizing: border-box;
width: 100%;
font-size: 1rem;
}
#left-navigation,
#right-navigation {
padding: 0 0.45rem 0.35rem;
background: var( --edfm-surface-2 );
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.vector-menu-tabs-legacy ul {
flex-wrap: nowrap;
}
.vector-menu-tabs-legacy li a,
.vector-menu-tabs-legacy li a:visited,
.vector-menu-dropdown .vector-menu-heading {
min-height: 36px;
display: inline-flex;
align-items: center;
}
/* Only hides it at its original #mw-head location, and only once JS has
confirmed it will actually relocate it into #mw-panel below (Common.js
initMobileChrome) -- nojs visitors still reach login/account through
the earlier stacked-layout #p-personal rule instead, rather than
losing the control outright. */
html.client-js #mw-head #p-personal {
display: none;
}
/* The desktop #p-personal rule further down this file sets
`display: flex` (a plain, unscoped ID selector, so it applies
wherever the element ends up) intended for a wide horizontal header
strip. Left as flex-row inside the narrow drawer, its heading and
list get squeezed to near-zero width by flexbox's default shrink
behaviour and wrap character-by-character. Reset back to normal
block stacking here so it lays out exactly like every other
#mw-panel section (heading, then list, top to bottom). */
#mw-panel #p-personal {
display: block;
text-align: left;
}
#mw-panel #p-personal ul {
display: block;
}
#mw-panel #p-personal li {
margin: 0;
}
/* #p-logo (the wiki logo) lives in #mw-panel on desktop too, so this
has to stay inside this mobile-only block rather than becoming a
bare #mw-panel #p-logo rule -- unlike #p-personal, JS never moves
this one, it's always been here. Confirmed by direct testing: the
combination already on #p-logo elsewhere in this file
(box-sizing:border-box + width:auto + overflow:hidden) ends up
shrink-to-fit instead of filling the available width once this
block's own #mw-panel padding drops to 0 -- forcing an explicit
width sidesteps the ambiguity rather than removing overflow:hidden
(which is there to clip the background-image cleanly) or relying on
auto again. */
#p-logo {
width: 100%;
}
#mw-panel {
position: fixed;
top: 0;
left: 0;
z-index: 1300;
width: min( 82vw, 22rem );
height: 100dvh;
box-sizing: border-box;
padding: 0;
background: var( --edfm-surface-1 );
border: 0;
border-right: 1px solid var( --edfm-border );
box-shadow: 18px 0 36px rgba( 0, 0, 0, 0.45 );
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX( -105% );
transition: transform 0.2s ease;
}
body.edfm-mobile-menu-open #mw-panel {
transform: translateX( 0 );
}
#mw-panel::before {
content: 'EDFM Navigation';
display: block;
position: sticky;
top: 0;
z-index: 1;
padding: 1rem 3.4rem 1rem 1rem;
background: var( --edfm-surface-2 );
border-bottom: 1px solid var( --edfm-border );
color: var( --edfm-orange );
font: 800 0.86rem/1.2 var( --edfm-mono );
letter-spacing: 0.08em;
text-transform: uppercase;
}
#mw-panel .edfm-mobile-close-button {
position: absolute;
top: 0.3rem;
right: 0.35rem;
z-index: 2;
}
#mw-panel .portal,
#mw-panel .vector-menu-portal {
margin: 0;
padding: 0.75rem 0;
border-bottom: 1px solid var( --edfm-border-soft );
}
#mw-panel .vector-menu-heading {
margin: 0.25rem 1rem 0.45rem;
}
#mw-panel .vector-menu-content-list li a,
#mw-panel .vector-menu-content-list li a:visited {
display: flex;
align-items: center;
min-height: 46px;
box-sizing: border-box;
padding: 0.55rem 1rem;
border-left: 3px solid transparent;
color: var( --edfm-text-muted );
font-size: 1rem;
text-decoration: none;
}
#mw-panel .vector-menu-content-list li a:hover,
#mw-panel .vector-menu-content-list li a:focus {
background: var( --edfm-surface-3 );
border-left-color: var( --edfm-cyan );
color: var( --edfm-text );
}
#mw-panel .edfm-nav-current > a,
#mw-panel .edfm-nav-current > a:visited {
background: rgba( 255, 138, 0, 0.12 );
border-left-color: var( --edfm-orange );
color: var( --edfm-orange ) !important;
}
.mw-body {
padding: clamp( 1rem, 4vw, 1.35rem );
font-size: 1rem;
line-height: 1.68;
}
#siteNotice {
margin-bottom: 1rem;
padding-bottom: 0.85rem;
}
#firstHeading {
font-size: clamp( 1.65rem, 8vw, 2.25rem );
line-height: 1.1;
letter-spacing: -0.015em;
}
.mw-body h2 {
font-size: 1.18rem;
line-height: 1.25;
}
.mw-body p,
.mw-body li {
max-width: none;
}
.mw-body img,
.mw-body .thumb,
.mw-body .thumbinner,
.mw-body .thumbimage {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box;
}
.mw-body .thumb,
.mw-body .tright,
.mw-body .tleft {
float: none !important;
clear: both;
width: auto !important;
margin: 1rem 0 !important;
}
.mw-parser-output > table.wikitable,
.mw-parser-output > table.mw-datatable {
display: block;
width: 100% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.mw-parser-output > table.wikitable th,
.mw-parser-output > table.wikitable td,
.mw-parser-output > table.mw-datatable th,
.mw-parser-output > table.mw-datatable td {
white-space: normal;
min-width: 8rem;
}
.edfm-infobox {
font-size: 0.95rem;
}
.edfm-infobox-row {
display: grid;
grid-template-columns: minmax( 7.5rem, 40% ) 1fr;
gap: 0.5rem;
padding: 0.65rem 0.8rem;
}
.edfm-infobox-label,
.edfm-infobox-value {
width: auto;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tbody,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type tr,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th,
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
display: block;
width: 100% !important;
box-sizing: border-box;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type {
overflow: visible;
white-space: normal;
background: transparent;
border: 0;
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type th {
margin-top: 0.75rem;
border-left: 3px solid var( --edfm-orange );
}
body.page-Main_Page .mw-parser-output > table.wikitable:first-of-type td {
margin-bottom: 0.75rem;
background: var( --edfm-surface-2 );
border-left: 3px solid var( --edfm-border );
}
.mw-footer {
padding: 1rem;
margin-top: 1.5rem;
}
}
@media ( max-width: 430px ) {
.edfm-mobile-brand::before {
content: 'EDFM';
margin-right: 0.45rem;
}
.edfm-mobile-brand {
font-size: 0.88rem;
}
.edfm-infobox-row {
grid-template-columns: 1fr;
gap: 0.2rem;
}
}
/* 22a. Mobile action tabs refinement: keep Vector's page/discussion/read/
source/history controls available, but put them on one compact horizontal
action rail so the first phone viewport feels like a real mobile app shell
instead of two stacked desktop tab bars. */
@media ( max-width: 800px ) {
body:not( .edfm-mobile-search-open ) #mw-head {
display: flex;
align-items: stretch;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
body:not( .edfm-mobile-search-open ) #left-navigation,
body:not( .edfm-mobile-search-open ) #right-navigation {
flex: 0 0 auto;
clear: none !important;
float: none !important;
width: auto;
padding: 0 0.25rem;
margin: 0 !important;
border-right: 1px solid var( --edfm-border-soft );
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown {
float: none !important;
display: inline-block;
}
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a,
body:not( .edfm-mobile-search-open ) .vector-menu-tabs-legacy li a:visited,
body:not( .edfm-mobile-search-open ) .vector-menu-dropdown .vector-menu-heading {
min-height: 40px;
padding-left: 0.55rem;
padding-right: 0.55rem;
font-size: 0.68rem;
}
body.edfm-mobile-search-open #mw-head {
display: block;
}
}
/* ===========================================================================
24. HARD OVERRIDE: JUMP TILE LEFT RAIL
The earlier border-left rail can be swallowed by ResourceLoader/cascade or
visually read as part of the tile edge. Draw the rail as a high-specificity
gradient on the actual top-level TOC anchors so it is unmistakable on the
live jump grid.
=========================================================================== */
#toc.toc > ul > li > a,
.mw-parser-output #toc > ul > li > a,
.mw-parser-output .toc > ul > li > a {
background-image: linear-gradient( 90deg, var( --edfm-orange ) 0, var( --edfm-orange ) 6px, transparent 6px ) !important;
border-left: 0 !important;
padding-left: 1rem !important;
}
#toc.toc > ul > li > a:hover,
#toc.toc > ul > li > a:focus-visible,
.mw-parser-output #toc > ul > li > a:hover,
.mw-parser-output #toc > ul > li > a:focus-visible,
.mw-parser-output .toc > ul > li > a:hover,
.mw-parser-output .toc > ul > li > a:focus-visible {
background-image: linear-gradient( 90deg, var( --edfm-cyan ) 0, var( --edfm-cyan ) 6px, transparent 6px ) !important;
}
/* ===========================================================================
25. SOURCE EDIT CONFLICT / WIKITEXT DIFF THEME
Source-edit conflict review uses MediaWiki's diff table classes, not the
normal edit textarea/WikiEditor chrome. Without this, unchanged rows and
inline change pills fall back to stark white/yellow/blue defaults. Keep the
old/new meaning, but render it in EDFM's dark surfaces with restrained
orange/cyan accents.
=========================================================================== */
.mw-parser-output table.diff,
table.diff,
.diff {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-collapse: separate !important;
border-spacing: 0 0.12rem !important;
}
.diff-title,
.diff-otitle,
.diff-ntitle,
#mw-diff-otitle1,
#mw-diff-ntitle1 {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
}
td.diff-lineno,
.diff-lineno {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
border: 0 !important;
padding: 0.35rem 0.5rem !important;
}
td.diff-marker,
.diff-marker {
background: transparent !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 700;
padding: 0.25rem 0.45rem !important;
text-align: center;
}
td.diff-context,
td.diff-addedline,
td.diff-deletedline,
.diff-context,
.diff-addedline,
.diff-deletedline,
.mw-diff-inline-context,
.mw-diff-inline-added,
.mw-diff-inline-deleted,
.mw-diff-inline-changed,
.mw-diff-inline-moved {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
font-family: var( --edfm-mono );
box-shadow: none !important;
}
td.diff-context:empty,
td.diff-addedline:empty,
td.diff-deletedline:empty,
.diff-context:empty,
.diff-addedline:empty,
.diff-deletedline:empty {
/* Empty diff cells are alignment placeholders. Keep their card boundary so
the two-column source-conflict diff does not look broken, but make them
compact and neutral instead of tall blank blocks. */
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: none !important;
min-height: 0;
padding-top: 0.08rem !important;
padding-bottom: 0.08rem !important;
}
td.diff-deletedline,
.diff-deletedline,
.mw-diff-inline-deleted {
background: rgba( 255, 138, 0, 0.08 ) !important;
border-color: rgba( 255, 138, 0, 0.6 ) !important;
border-left-color: var( --edfm-orange ) !important;
}
td.diff-addedline,
.diff-addedline,
.mw-diff-inline-added {
background: rgba( 66, 199, 217, 0.08 ) !important;
border-color: rgba( 66, 199, 217, 0.6 ) !important;
border-left-color: var( --edfm-cyan ) !important;
}
.diffchange,
.diff-addedline .diffchange,
.diff-deletedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
border-radius: 3px !important;
padding: 0.08rem 0.22rem !important;
font-weight: 700;
text-decoration: none !important;
color: var( --edfm-bg-deep ) !important;
}
.diff-deletedline .diffchange,
.mw-diff-inline-deleted del,
.mw-diff-inline-changed del,
.mw-diff-inline-moved del {
background: var( --edfm-orange-bright ) !important;
}
.diff-addedline .diffchange,
.mw-diff-inline-added ins,
.mw-diff-inline-changed ins,
.mw-diff-inline-moved ins {
background: var( --edfm-cyan ) !important;
}
.mw-explainconflict,
#wpTextbox2,
textarea#wpTextbox2,
textarea.mw-textarea-oldrev {
background: var( --edfm-surface-1 ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
/* Engineer directory portrait chips -- intentionally quiet so table rows still
read like data rows, not card/list hybrids. */
.edfm-engineer-entry {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-width: max-content;
}
.edfm-engineer-entry .mw-file-element {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 3px;
border: 1px solid var( --edfm-border );
background: var( --edfm-surface-0 );
box-shadow: none;
}
.edfm-engineer-entry__name {
line-height: 1.2;
}
/* Frontier official news feed image treatment */
.edfm-frontier-news .edfm-news-card-art-image {
display: block;
position: relative;
padding: 0;
/* Keep all news thumbnails uniform, including the first/primary story. */
height: 9.5rem;
min-height: 9.5rem;
aspect-ratio: 16 / 9;
background: var( --edfm-surface-4 );
overflow: hidden;
}
.edfm-frontier-news .edfm-news-card-primary .edfm-news-card-art-image {
height: 9.5rem;
min-height: 9.5rem;
}
.edfm-frontier-news .edfm-news-card-art-image > span,
.edfm-frontier-news .edfm-news-card-art-image .mw-default-size,
.edfm-frontier-news .edfm-news-card-art-image .mw-file-description {
display: block !important;
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.edfm-frontier-news .edfm-news-card-art-image .mw-file-element {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
transition: transform 0.2s ease, filter 0.2s ease;
}
.edfm-frontier-news .edfm-news-card:hover .edfm-news-card-art-image .mw-file-element {
filter: brightness( 1.08 ) contrast( 1.05 );
transform: scale( 1.035 );
}
.edfm-frontier-news .edfm-news-source-badge {
display: inline-flex !important;
align-items: center;
position: absolute !important;
left: 0.8rem !important;
right: auto !important;
bottom: 0.75rem !important;
z-index: 2;
max-width: calc( 100% - 1.6rem );
padding: 0.25rem 0.55rem;
background: rgba( 10, 13, 17, 0.82 );
border: 1px solid rgba( 255, 138, 0, 0.48 );
box-shadow: 0 8px 18px rgba( 0, 0, 0, 0.34 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
}
.edfm-news-attribution {
margin-top: 0.85rem;
padding-top: 0.75rem;
border-top: 1px solid var( --edfm-border-soft );
color: var( --edfm-text-dim );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
line-height: 1.45;
}
/* Patrol action: hide MediaWiki generated patrol footer/link from article chrome. */
.patrollink,
.patrollink[data-mw-interface],
.patrollink .cdx-button,
#mw-content-text + .patrollink,
.mw-parser-output + .patrollink {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
/* ===========================================================================
2026-08-10 PROSE RAIL SLEDGEHAMMER
=========================================================================== */
/* Plain article prose on EDFM is supposed to occupy the article rail. Keep this
deliberately simple and selector-separated: no comma-list dependency on
advanced :not() parsing, no TemplateStyles scoping, and both physical and
logical width properties so later/readability rules cannot re-cap lines. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > p,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ul,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > ol,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > dl {
display: block !important;
width: 100% !important;
max-width: none !important;
inline-size: 100% !important;
max-inline-size: none !important;
box-sizing: border-box !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output p {
max-width: none !important;
max-inline-size: none !important;
}
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output li,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output dd {
max-width: none !important;
max-inline-size: none !important;
}
/* Restore the intentional compact maintenance notice after the broad prose
override above. */
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-status,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-panel-review,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-status,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-panel-draft,
body.mediawiki #content.mw-body #mw-content-text .mw-parser-output > .edfm-draft {
width: auto !important;
max-width: 44rem !important;
inline-size: auto !important;
max-inline-size: 44rem !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ==========================================================================
EDFM login/register auth surface template alignment
========================================================================== */
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm {
color: var( --edfm-text );
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-label__label__text {
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-size: 0.82rem;
font-weight: 850;
letter-spacing: 0.015em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input,
body.mediawiki.mw-special-Userlogin #userloginForm input[type='text'],
body.mediawiki.mw-special-Userlogin #userloginForm input[type='password'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='text'],
body.mediawiki.mw-special-CreateAccount #userloginForm input[type='password'] {
background: var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 );
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-text-input__input::placeholder,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-text-input__input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field__help-text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-help,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-password-help {
color: var( --edfm-text-muted ) !important;
font-size: 0.88rem;
line-height: 1.45;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
margin-top: 0.85rem;
padding: 0.9rem;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.12 ), transparent 34% ),
var( --edfm-surface-1 );
border: 1px solid rgba( 255, 138, 0, 0.42 );
border-left: 3px solid var( --edfm-orange );
box-shadow: 0 12px 26px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
font-family: var( --edfm-mono );
font-size: var( --edfm-fs-meta );
font-weight: 850;
letter-spacing: 0.04em;
line-height: 1.35;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 0;
margin: 0;
padding: 0.55rem 0.8rem;
background: rgba( 255, 138, 0, 0.1 ) !important;
border: 1px solid var( --edfm-orange ) !important;
border-radius: 0;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.035 );
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.045em;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
text-decoration: none !important;
text-transform: uppercase;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:hover,
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta > a#mw-createaccount-join:focus-visible {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange-bright ) !important;
color: #10171b !important;
text-decoration: none !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin-top: 0.2rem;
padding: 1.15rem 1.25rem;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.08 ), transparent 38% ),
var( --edfm-surface-1 );
border: 1px solid var( --edfm-border );
border-left: 3px solid var( --edfm-cyan );
box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.28 );
color: var( --edfm-text );
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-heading {
color: var( --edfm-text ) !important;
font-family: var( --edfm-sans );
font-size: 1.35rem;
font-weight: 800;
line-height: 1.25;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list {
margin-top: 1rem;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text::before {
filter: none !important;
opacity: 0.78 !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {
color: var( --edfm-orange-bright ) !important;
font-family: var( --edfm-mono );
font-size: 1.75rem;
font-weight: 850;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {
color: var( --edfm-text-muted ) !important;
font-size: 0.9rem;
line-height: 1.35;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLTurnstileField .cdx-label__label__text {
display: none !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit {
background: var( --edfm-surface-3 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
border-radius: 0 !important;
color: var( --edfm-text ) !important;
font-family: var( --edfm-mono );
font-weight: 850;
letter-spacing: 0.06em;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-submit:hover,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-submit:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
/* ==========================================================================
EDFM auth cards and CMDR account field polish — 2026-08-11
========================================================================== */
body.mediawiki.mw-special-Userlogin #mw-content-text,
body.mediawiki.mw-special-CreateAccount #mw-content-text {
padding-top: 0.55rem;
}
body.mediawiki.mw-special-Userlogin #firstHeading {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-content-text > .mw-ui-container {
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm {
width: min( 100%, 34rem ) !important;
margin: 0 auto !important;
padding: 1.15rem 1.2rem 1.25rem !important;
background:
linear-gradient( 135deg, rgba( 255, 138, 0, 0.1 ), transparent 34% ),
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 55% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 3px solid var( --edfm-orange ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.34 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-userlogin-help {
text-align: center;
}
body.mediawiki.mw-special-Userlogin #mw-createaccount-cta {
margin: 1.05rem auto 0 !important;
max-width: 18rem;
}
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: grid !important;
grid-template-columns: minmax( 19rem, 28rem ) minmax( 20rem, 1fr ) !important;
gap: clamp( 1.4rem, 4vw, 3rem ) !important;
align-items: stretch !important;
width: min( 100%, 76rem ) !important;
max-width: 76rem !important;
margin: 0 auto !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
margin: 0 !important;
background:
linear-gradient( 135deg, rgba( 66, 199, 217, 0.07 ), transparent 38% ),
linear-gradient( 180deg, rgba( 255, 138, 0, 0.035 ), rgba( 0, 0, 0, 0 ) 54% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.32 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm {
padding: 1.15rem 1.2rem 1.25rem !important;
border-left: 3px solid var( --edfm-orange ) !important;
}
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
padding: clamp( 1.3rem, 2.2vw, 2.05rem ) !important;
border-left: 3px solid var( --edfm-cyan ) !important;
}
body.mediawiki.mw-special-CreateAccount #userloginForm form {
margin: 0 !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .cdx-field,
body.mediawiki.mw-special-CreateAccount #userloginForm .cdx-field {
margin-bottom: 1rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLSubmitField,
body.mediawiki.mw-special-CreateAccount #userloginForm .mw-htmlform-field-HTMLSubmitField {
margin-bottom: 0 !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName {
border-color: rgba( 66, 199, 217, 0.45 ) !important;
}
body.mediawiki.mw-special-CreateAccount #wpRealName:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 1px rgba( 66, 199, 217, 0.35 ), 0 0 18px rgba( 66, 199, 217, 0.14 ) !important;
}
@media ( max-width: 860px ) {
body.mediawiki.mw-special-CreateAccount #mw-content-text > .mw-ui-container {
display: flex !important;
flex-direction: column !important;
width: min( 100%, 34rem ) !important;
max-width: 34rem !important;
}
body.mediawiki.mw-special-Userlogin #userloginForm,
body.mediawiki.mw-special-CreateAccount #userloginForm,
body.mediawiki.mw-special-CreateAccount .mw-createacct-benefits-container {
width: 100% !important;
}
}
/* ==========================================================================
EDFM dark thumbnail/frame treatment — 2026-08-13
Keep MediaWiki image captions from falling back to the default white frame.
========================================================================== */
.mw-parser-output .thumb {
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbinner,
.mw-parser-output figure[typeof~="mw:File/Thumb"],
.mw-parser-output figure[typeof~="mw:File/Frame"],
.mw-parser-output figure.mw-halign-right,
.mw-parser-output figure.mw-halign-left,
.mw-parser-output figure.mw-halign-center {
background:
linear-gradient( 180deg, rgba( 66, 199, 217, 0.045 ), rgba( 0, 0, 0, 0 ) 56% ),
var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-left: 1px solid var( --edfm-border ) !important;
box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.28 ), inset 0 1px 0 rgba( 255, 255, 255, 0.035 ) !important;
box-sizing: border-box !important;
color: var( --edfm-text-dim ) !important;
}
.mw-parser-output .thumbimage,
.mw-parser-output .thumbinner img,
.mw-parser-output figure[typeof~="mw:File/Thumb"] img,
.mw-parser-output figure[typeof~="mw:File/Frame"] img {
background-color: var( --edfm-bg-deep ) !important;
border: 1px solid var( --edfm-border ) !important;
box-sizing: border-box !important;
}
.mw-parser-output .thumbcaption,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption {
background: var( --edfm-surface-1 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text-dim ) !important;
font-size: var( --edfm-fs-small ) !important;
line-height: 1.42 !important;
padding: 0.42rem 0.5rem 0.5rem !important;
}
.mw-parser-output .thumbcaption a,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a {
color: var( --edfm-link ) !important;
}
.mw-parser-output .thumbcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Thumb"] figcaption a:hover,
.mw-parser-output figure[typeof~="mw:File/Frame"] figcaption a:hover {
color: var( --edfm-link-hover ) !important;
}
.mw-parser-output .magnify a,
.mw-parser-output .mw-file-magnify {
filter: invert( 1 ) opacity( 0.72 ) drop-shadow( 0 0 2px rgba( 66, 199, 217, 0.28 ) );
}
/* ==========================================================================
EDFM VisualEditor template dialog dark theme — 2026-08-13
Keep template editing dialogs from falling back to white/light OOUI panels.
========================================================================== */
.ve-ui-mwTransclusionDialog,
.ve-ui-mwTransclusionDialog .oo-ui-window-frame,
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .oo-ui-window-body,
.ve-ui-mwTransclusionDialog .oo-ui-window-foot,
.ve-ui-mwTransclusionDialog .oo-ui-panelLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout,
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTransclusionDialog .oo-ui-pageLayout,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-content,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
background-color: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-window-head,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineControlsWidget,
.ve-ui-mwTransclusionDialog .oo-ui-menuLayout-menu {
background-color: var( --edfm-surface-1 ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterSelectWidget {
background-color: var( --edfm-surface-2 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-labelElement-label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldsetLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTransclusionDialog .oo-ui-widget {
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTransclusionDialog .oo-ui-fieldLayout-field .oo-ui-labelElement-label em,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTransclusionDialog .ve-ui-mwParameterPage-undocumentedLabel {
color: var( --edfm-text-muted ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget input {
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-4 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-bg-deep ) !important;
}
/* Additional VE template-dialog color polish — disabled/apply buttons, search,
unused-toggle buttons, and parameter checkboxes. */
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTransclusionDialog .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
opacity: 0.82 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget,
.ve-ui-mwTransclusionDialog .oo-ui-searchInputWidget .oo-ui-inputWidget-input,
.ve-ui-mwTransclusionDialog .oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-inputWidget-input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget [type='checkbox'] + span::before {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.ve-ui-mwTransclusionDialog .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
}
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTransclusionDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
.ve-ui-mwTransclusionDialog .ve-ui-mwTransclusionOutlineParameterWidget .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
}
/* EDFM VisualEditor template/infobox popup hard-dark theme — targets the actual
Edit: <template> popup chrome and body, not just article/sidebar chrome. */
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active > .oo-ui-window-frame,
.oo-ui-windowManager-modal .oo-ui-processDialog-content,
.oo-ui-windowManager-modal .oo-ui-window-content,
.oo-ui-windowManager-modal .oo-ui-window-body,
.oo-ui-windowManager-modal .oo-ui-window-foot,
.ve-ui-mwTemplateDialog,
.ve-ui-mwTemplateDialog .oo-ui-panelLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-content,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout,
.ve-ui-mwTemplateDialog .oo-ui-bookletLayout-stackLayout,
.ve-ui-mwTemplateDialog .oo-ui-pageLayout,
.ve-ui-mwTemplateDialog .ve-ui-mwTemplatePage,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #111b20 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-content > .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-window-head,
.oo-ui-windowManager-modal .oo-ui-processDialog-navigation,
.ve-ui-mwTemplateDialog .oo-ui-menuLayout-menu,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineControlsWidget {
background: #1c2a31 !important;
color: #f4f7f8 !important;
border-color: #7f9299 !important;
}
.oo-ui-windowManager-modal .oo-ui-processDialog-title,
.oo-ui-windowManager-modal .oo-ui-labelElement-label,
.oo-ui-windowManager-modal .oo-ui-fieldLayout-header label,
.oo-ui-windowManager-modal .oo-ui-widget,
.ve-ui-mwTemplateDialog .oo-ui-labelElement-label,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-header label,
.ve-ui-mwTemplateDialog .oo-ui-fieldsetLayout-header label {
color: #f4f7f8 !important;
}
.oo-ui-windowManager-modal .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-description,
.ve-ui-mwTemplateDialog .ve-ui-mwParameterPage-undocumentedLabel,
.ve-ui-mwTemplateDialog .oo-ui-fieldLayout-help,
.ve-ui-mwTemplateDialog .mw-widget-titleOptionWidget-description {
color: #a9bbc1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget textarea,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget input,
.ve-ui-mwTemplateDialog .oo-ui-inputWidget-input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget input,
.oo-ui-windowManager-modal .oo-ui-textInputWidget textarea,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget input,
.oo-ui-windowManager-modal .oo-ui-inputWidget-input {
background: #0d1519 !important;
color: #f4f7f8 !important;
border-color: #52646b !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.ve-ui-mwTemplateDialog .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.ve-ui-mwTemplateDialog .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
.oo-ui-windowManager-modal .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus,
.oo-ui-windowManager-modal .oo-ui-searchInputWidget.oo-ui-widget-enabled input:focus {
border-color: #42c7d9 !important;
box-shadow: 0 0 0 2px rgba(66,199,217,.32) !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
background: #25353d !important;
border-color: #52646b !important;
color: #f4f7f8 !important;
box-shadow: none !important;
}
.oo-ui-windowManager-modal .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-windowManager-modal .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.ve-ui-mwTemplateDialog .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: #31454f !important;
border-color: #ff8a00 !important;
color: #ffb347 !important;
}
.oo-ui-windowManager-modal .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: #ff8a00 !important;
border-color: #ff8a00 !important;
color: #111820 !important;
font-weight: 700 !important;
}
.oo-ui-windowManager-modal .oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.ve-ui-mwTemplateDialog .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background: #1c2a31 !important;
border-color: #3f5159 !important;
color: #8fa1a8 !important;
opacity: 1 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-highlighted,
.ve-ui-mwTemplateDialog .oo-ui-optionWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget-selected,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineTemplateWidget:hover,
.ve-ui-mwTemplateDialog .ve-ui-mwTransclusionOutlineParameterWidget:hover {
background: #25353d !important;
color: #f4f7f8 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"] + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"] + span::before {
background-color: #0d1519 !important;
border-color: #7f9299 !important;
}
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.ve-ui-mwTemplateDialog .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span,
.oo-ui-windowManager-modal .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span::before {
background-color: #ff8a00 !important;
border-color: #ff8a00 !important;
}
/* EDFM cookie preferences banner */
#edfm-cookie-banner {
position: fixed;
z-index: 10000;
left: 1rem;
right: 1rem;
bottom: 1rem;
display: flex;
justify-content: center;
pointer-events: none;
}
#edfm-cookie-banner .edfm-cookie-card {
max-width: 800px;
border: 1px solid rgba(80, 220, 240, 0.65);
background: rgba(3, 14, 22, 0.98);
box-shadow: 0 0 22px rgba(80, 220, 240, 0.22), 0 12px 36px rgba(0, 0, 0, 0.45);
color: #dffbff;
padding: 1rem;
font-size: 0.95rem;
pointer-events: auto;
}
#edfm-cookie-banner .edfm-cookie-title {
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7fe0ec;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-text { margin: 0 0 0.75rem; line-height: 1.45; }
#edfm-cookie-banner .edfm-cookie-categories {
display: grid;
gap: 0.65rem;
margin: 0.65rem 0 0.85rem;
}
#edfm-cookie-banner .edfm-cookie-category {
border: 1px solid rgba(127, 224, 236, 0.32);
background: rgba(7, 28, 38, 0.74);
padding: 0.7rem;
}
#edfm-cookie-banner .edfm-cookie-category-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
margin-bottom: 0.35rem;
}
#edfm-cookie-banner .edfm-cookie-category h3 {
margin: 0;
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #f3feff;
}
#edfm-cookie-banner .edfm-cookie-category p {
margin: 0;
line-height: 1.42;
color: #c6e6eb;
}
#edfm-cookie-banner .edfm-cookie-status {
white-space: nowrap;
border: 1px solid rgba(255, 138, 0, 0.7);
color: #ffd69a;
background: rgba(255, 138, 0, 0.12);
padding: 0.2rem 0.48rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#edfm-cookie-banner .edfm-cookie-switch {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
font-weight: 700;
color: #f3feff;
cursor: pointer;
}
#edfm-cookie-banner .edfm-cookie-switch input {
inline-size: 1.1rem;
block-size: 1.1rem;
accent-color: #ff8a00;
}
#edfm-cookie-banner .edfm-cookie-switch input:focus-visible {
outline: 2px solid #7fe0ec;
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
#edfm-cookie-banner button {
border: 1px solid rgba(127, 224, 236, 0.7);
background: rgba(9, 50, 65, 0.92);
color: #f3feff;
padding: 0.45rem 0.7rem;
cursor: pointer;
}
#edfm-cookie-banner button:hover,
#edfm-cookie-banner button:focus-visible {
background: rgba(17, 88, 108, 0.98);
outline: 2px solid rgba(127, 224, 236, 0.85);
outline-offset: 2px;
}
#edfm-cookie-banner .edfm-cookie-links { margin-top: 0.6rem; font-size: 0.85rem; }
#edfm-cookie-banner a { color: #7fe0ec; }
@media (max-width: 600px) {
#edfm-cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
#edfm-cookie-banner .edfm-cookie-card { max-height: calc(100vh - 1rem); overflow: auto; }
#edfm-cookie-banner .edfm-cookie-category-head { align-items: flex-start; }
#edfm-cookie-banner .edfm-cookie-actions button { flex: 1 1 100%; }
}
/* ==========================================================================
EDFM Vector watchstar dark-theme fix — 2026-08-16
Vector legacy renders the page watch/unwatch affordance as a small SVG
background on `#ca-watch/#ca-unwatch a::before`. On EDFM's dark tab row the
upstream light-skin URLs can be too low-contrast, and some deployments do not
expose ResourceLoader's dotted asset path directly. Use inline SVGs in the
EDFM palette so the watchstar is always visible in the top action menu.
========================================================================== */
.vector-menu-tabs #ca-watch.icon a::before,
.vector-menu-tabs-legacy #ca-watch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2310171b' stroke='%2342c7d9' stroke-width='1.35' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 3px rgba( 66, 199, 217, 0.42 ) );
opacity: 0.96;
}
.vector-menu-tabs #ca-unwatch.icon a::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.2' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 4px rgba( 255, 138, 0, 0.45 ) );
opacity: 0.98;
}
.vector-menu-tabs #ca-watch.icon a:hover::before,
.vector-menu-tabs #ca-watch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-watch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-watch.icon a:focus::before,
.vector-menu-tabs #ca-unwatch.icon a:hover::before,
.vector-menu-tabs #ca-unwatch.icon a:focus::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:hover::before,
.vector-menu-tabs-legacy #ca-unwatch.icon a:focus::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8a00' stroke='%23ffa21a' stroke-width='1.25' stroke-linejoin='round' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E" ) !important;
filter: drop-shadow( 0 0 5px rgba( 255, 138, 0, 0.65 ) );
opacity: 1;
}
/* ==========================================================================
EDFM Special:Preferences dark theme fix — 2026-08-16
Preferences is an OOUI/Codex-heavy special page. Core styles bring in a
light tab strip and sticky submit footer, so theme the actual preferences
wrapper rather than only generic form controls.
========================================================================== */
body.mediawiki.mw-special-Preferences #preferences,
body.mediawiki.mw-special-Preferences #mw-prefs-container,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout,
body.mediawiki.mw-special-Preferences .mw-prefs-fieldset-wrapper,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout,
body.mediawiki.mw-special-Preferences .oo-ui-panelLayout-framed {
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed {
box-shadow: 0 18px 36px rgba( 0, 0, 0, 0.32 );
}
body.mediawiki.mw-special-Preferences .mw-prefs-tabs > .oo-ui-menuLayout-menu,
body.mediawiki.mw-special-Preferences .oo-ui-menuLayout-menu {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabSelectWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget:hover,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-highlighted {
background: var( --edfm-surface-3 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected.oo-ui-widget-enabled > .oo-ui-labelElement-label {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-orange ) !important;
box-shadow: inset 0 -3px 0 var( --edfm-orange ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-header label,
body.mediawiki.mw-special-Preferences .oo-ui-labelElement-label,
body.mediawiki.mw-special-Preferences .mw-prefs-title {
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-description,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-help,
body.mediawiki.mw-special-Preferences .oo-ui-inline-help,
body.mediawiki.mw-special-Preferences .oo-ui-fieldLayout-messages,
body.mediawiki.mw-special-Preferences .htmlform-tip,
body.mediawiki.mw-special-Preferences .mw-htmlform-help {
background: transparent !important;
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget .oo-ui-inputWidget-input,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownInputWidget select,
body.mediawiki.mw-special-Preferences .oo-ui-dropdownWidget-handle,
body.mediawiki.mw-special-Preferences input[type='text'],
body.mediawiki.mw-special-Preferences input[type='number'],
body.mediawiki.mw-special-Preferences input[type='email'],
body.mediawiki.mw-special-Preferences textarea,
body.mediawiki.mw-special-Preferences select {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-inputWidget-input::placeholder,
body.mediawiki.mw-special-Preferences input::placeholder {
color: var( --edfm-text-muted ) !important;
opacity: 1;
}
body.mediawiki.mw-special-Preferences .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus,
body.mediawiki.mw-special-Preferences input:focus,
body.mediawiki.mw-special-Preferences textarea:focus,
body.mediawiki.mw-special-Preferences select:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
outline: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget [type='checkbox'] + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox'] {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
body.mediawiki.mw-special-Preferences .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span::before,
body.mediawiki.mw-special-Preferences input[type='checkbox']:checked {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
accent-color: var( --edfm-orange );
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit,
body.mediawiki.mw-special-Preferences button,
body.mediawiki.mw-special-Preferences input[type='submit'] {
background: var( --edfm-surface-3 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
box-shadow: none !important;
}
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit:hover,
body.mediawiki.mw-special-Preferences button:hover,
body.mediawiki.mw-special-Preferences input[type='submit']:hover {
background: rgba( 255, 138, 0, 0.16 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
body.mediawiki.mw-special-Preferences #preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .mw-htmlform-submit-buttons,
body.mediawiki.mw-special-Preferences .oo-ui-window-foot .mw-htmlform-submit-buttons {
background: rgba( 16, 23, 27, 0.96 ) !important;
border-top: 1px solid var( --edfm-border ) !important;
box-shadow: 0 -10px 24px rgba( 0, 0, 0, 0.34 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Preferences .mw-prefs-search-highlight,
body.mediawiki.mw-special-Preferences .mw-prefs-tabs:not( .mw-prefs-tabs-searching ) .oo-ui-fieldsetLayout:target > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
background: rgba( 66, 199, 217, 0.18 ) !important;
outline-color: rgba( 66, 199, 217, 0.32 ) !important;
color: var( --edfm-text ) !important;
}
/* Special:ChangeContentModel's "New content model" dropdown otherwise only
gets the generic .oo-ui-inputWidget-input treatment (surface-1, no focus
ring) -- match it to the same OOUI dropdown treatment used on
Special:Preferences above (deeper background, inset hairline, cyan focus
ring) instead of leaving it one shade lighter than the template. */
body.mediawiki.mw-special-ChangeContentModel #mw-input-model {
background: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-ChangeContentModel #mw-input-model:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.24 ) !important;
outline: none !important;
}
/* ===========================================================================
EDFM external link icon theme fix — 2026-08-20
MediaWiki Vector adds a small external-link background image after external
links. On EDFM's dark theme the stock progressive-blue SVG was too subtle,
leaving a visible gap before punctuation in Sources lists. Replace it with a
currentColor mask so the indicator inherits the site's cyan/hover/visited
external-link colors and remains visible before commas/periods.
========================================================================== */
.mw-parser-output a.external,
.mw-parser-output a.extiw.external {
background-image: none !important;
padding-right: 0 !important;
}
.mw-parser-output a.external::after,
.mw-parser-output a.extiw.external::after {
content: '';
display: inline-block;
width: 0.72em;
height: 0.72em;
margin-left: 0.18em;
margin-right: 0.08em;
vertical-align: 0.04em;
background-color: currentColor;
opacity: 0.9;
-webkit-mask: no-repeat center / contain url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11 3h6v6h-2V6.41l-7.29 7.3-1.42-1.42 7.3-7.29H11V3z"/><path d="M5 5h4v2H6v8h8v-3h2v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/></svg>' );
mask: no-repeat center / contain url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11 3h6v6h-2V6.41l-7.29 7.3-1.42-1.42 7.3-7.29H11V3z"/><path d="M5 5h4v2H6v8h8v-3h2v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/></svg>' );
}
.mw-parser-output .reference-text a.external::after {
margin-left: 0.2em;
margin-right: 0.12em;
}
/* ===========================================================================
ECHO NOTIFICATIONS / ALERTS -- EDFM dark flyout theme
Echo's alert/notices popups are injected by OOUI after page load and keep
their own default white notification cards unless themed explicitly. Keep
the structure/behavior intact, but make the flyouts match EDFM's dark panel
template: dark chrome, orange active state, cyan focus/link accents, and
muted secondary text.
=========================================================================== */
.mw-echo-ui-notificationBadgeController-popup > .oo-ui-popupWidget-popup {
background: linear-gradient( 180deg, var( --edfm-surface-2 ) 0%, var( --edfm-surface-1 ) 100% ) !important;
border: 1px solid var( --edfm-border ) !important;
box-shadow: 0 18px 45px rgba( 0, 0, 0, 0.48 ), 0 0 0 1px rgba( 255, 138, 0, 0.08 ) !important;
color: var( --edfm-text ) !important;
}
.mw-echo-ui-notificationBadgeController-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head,
.mw-echo-ui-notificationBadgeController-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer {
background: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.mw-echo-ui-notificationBadgeController-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head {
border-left: 3px solid var( --edfm-orange );
}
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-anchor::before,
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-anchor::after {
border-bottom-color: var( --edfm-surface-2 ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-head .oo-ui-labelElement-label,
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-footer .oo-ui-labelElement-label {
color: var( --edfm-text ) !important;
font-family: var( --edfm-sans );
font-weight: 700;
}
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-head .oo-ui-iconElement-icon,
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-footer .oo-ui-iconElement-icon,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-actions .oo-ui-iconElement-icon {
filter: invert( 1 ) hue-rotate( 180deg );
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-notificationsWrapper,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationsListWidget {
background: var( --edfm-bg-deep ) !important;
color: var( --edfm-text ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget {
background: var( --edfm-surface-1 ) !important;
border-bottom: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-unread {
background: linear-gradient( 90deg, rgba( 255, 138, 0, 0.10 ) 0, var( --edfm-surface-1 ) 30% ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget:hover,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget:focus {
background: var( --edfm-surface-3 ) !important;
box-shadow: inset 3px 0 0 var( --edfm-orange ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-message-header,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-message-header a {
color: var( --edfm-text ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-message-body,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-actions-timestamp {
color: var( --edfm-text-muted ) !important;
opacity: 1 !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-message-body a,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget a {
color: var( --edfm-link ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-toggleReadCircleButtonWidget-circle {
background: var( --edfm-orange ) !important;
border-color: var( --edfm-orange ) !important;
box-shadow: 0 0 0 2px rgba( 255, 138, 0, 0.18 );
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-toggleReadCircleButtonWidget-circle-unread {
background: var( --edfm-surface-4 ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: none;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationsWidget-markAllReadButton > .oo-ui-buttonElement-button,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-actions .oo-ui-buttonElement-button,
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-footer .oo-ui-buttonElement-button {
background: var( --edfm-surface-4 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
text-shadow: none !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationsWidget-markAllReadButton > .oo-ui-buttonElement-button:hover,
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationItemWidget-content-actions .oo-ui-buttonElement-button:hover,
.mw-echo-ui-notificationBadgeController-popup .oo-ui-popupWidget-footer .oo-ui-buttonElement-button:hover {
background: rgba( 255, 138, 0, 0.14 ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
}
.mw-echo-ui-notificationBadgeController-popup .mw-echo-ui-notificationBadgeController-footer-buttons .oo-ui-buttonElement:last-child {
border-left-color: var( --edfm-border ) !important;
}
/* Special:Notifications uses the same Echo widgets outside the small flyout. */
.mw-special-Notifications .mw-echo-ui-notificationsInboxWidget,
.mw-special-Notifications .mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
background: var( --edfm-bg-page ) !important;
color: var( --edfm-text ) !important;
}
.mw-special-Notifications .mw-echo-ui-notificationItemWidget {
background: var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
}
.mw-special-Notifications .mw-echo-ui-notificationItemWidget-content-message-header,
.mw-special-Notifications .mw-echo-ui-notificationItemWidget-content-message-body,
.mw-special-Notifications .mw-echo-ui-notificationItemWidget-content-actions-timestamp {
color: var( --edfm-text ) !important;
opacity: 1 !important;
}
/* ==========================================================================
Special:AllMessages dark-theme polish
Keep the MediaWiki system-message filter form and its filtered/search
results table aligned with the EDFM template palette instead of default
light TablePager/OOUI surfaces.
========================================================================== */
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper {
background: linear-gradient( 180deg, var( --edfm-surface-2 ), var( --edfm-surface-1 ) ) !important;
border: 1px solid var( --edfm-border ) !important;
border-radius: var( --edfm-corner );
box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.24 );
color: var( --edfm-text ) !important;
margin: 1.25rem 0;
}
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-fieldsetLayout-header {
border-bottom-color: var( --edfm-border ) !important;
color: var( --edfm-orange-bright ) !important;
}
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-labelElement-label,
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-fieldLayout-help,
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-fieldLayout-messages {
color: var( --edfm-text-muted ) !important;
}
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input,
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-dropdownInputWidget select,
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-dropdownWidget-handle {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.02 );
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input:focus,
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus {
border-color: var( --edfm-cyan ) !important;
box-shadow: 0 0 0 2px rgba( 66, 199, 217, 0.18 ) !important;
}
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-radioInputWidget [type='radio'] + span {
background-color: var( --edfm-bg-deep ) !important;
border-color: var( --edfm-border ) !important;
}
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-radioInputWidget [type='radio']:checked + span {
background-color: var( --edfm-orange ) !important;
border-color: var( --edfm-orange-bright ) !important;
box-shadow: 0 0 0 2px rgba( 255, 138, 0, 0.18 );
}
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
body.mediawiki.mw-special-Allmessages .mw-htmlform-submit-buttons .oo-ui-buttonElement-button {
background: linear-gradient( 180deg, var( --edfm-surface-4 ), var( --edfm-surface-3 ) ) !important;
border-color: var( --edfm-orange ) !important;
color: var( --edfm-orange-bright ) !important;
font-weight: 700;
text-shadow: none !important;
}
body.mediawiki.mw-special-Allmessages .mw-htmlform-ooui-wrapper .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button:hover,
body.mediawiki.mw-special-Allmessages .mw-htmlform-submit-buttons .oo-ui-buttonElement-button:hover {
background: rgba( 255, 138, 0, 0.14 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable {
background: var( --edfm-surface-1 ) !important;
border: 1px solid var( --edfm-border ) !important;
border-collapse: separate;
border-radius: var( --edfm-corner );
border-spacing: 0;
box-shadow: 0 16px 34px rgba( 0, 0, 0, 0.30 );
color: var( --edfm-text ) !important;
overflow: hidden;
width: 100%;
}
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable th {
background: linear-gradient( 180deg, var( --edfm-surface-4 ), var( --edfm-surface-3 ) ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-orange-bright ) !important;
font-weight: 800;
letter-spacing: 0.025em;
text-shadow: none !important;
}
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable td {
background: var( --edfm-surface-1 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-text ) !important;
vertical-align: top;
}
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable tbody tr:nth-child( odd ) td {
background: #0d1418 !important;
}
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable tbody tr:hover td {
background: rgba( 66, 199, 217, 0.10 ) !important;
box-shadow: inset 3px 0 0 var( --edfm-cyan );
}
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable td[dir],
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable td[lang] {
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable tr > td:first-child {
background: var( --edfm-surface-1 ) !important;
font-family: var( --edfm-mono );
font-size: 0.88rem;
}
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable tr:nth-child( odd ) > td:first-child {
background: #0d1418 !important;
}
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable a {
color: var( --edfm-link ) !important;
}
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable a.external {
color: var( --edfm-link-external ) !important;
}
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable a.new,
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable a.new:visited {
color: var( --edfm-link-new ) !important;
}
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable .mw-allmessages-customised,
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable .mw-allmessages-modified,
body.mediawiki.mw-special-Allmessages #mw-allmessagestable.mw-datatable .mw-allmessages-default {
background: rgba( 66, 199, 217, 0.12 ) !important;
color: var( --edfm-text ) !important;
}
body.mediawiki.mw-special-Allmessages .TablePager_nav {
margin: 0.85rem 0;
}
body.mediawiki.mw-special-Allmessages .TablePager_nav .oo-ui-buttonElement-button {
background-color: var( --edfm-surface-2 ) !important;
border-color: var( --edfm-border ) !important;
color: var( --edfm-link ) !important;
}
body.mediawiki.mw-special-Allmessages .TablePager_nav .oo-ui-widget-disabled .oo-ui-buttonElement-button {
background-color: var( --edfm-bg-deep ) !important;
color: var( --edfm-text-dim ) !important;
opacity: 0.78;
}