MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ==========================================================================
Arcana Novum Wiki - site-wide styles
Page: MediaWiki:Common.css Skin: legacy Vector (MediaWiki 1.43)
Edit this FILE, then: python scripts/wikisync.py push
==========================================================================
THE ASTRAL THEME
A dark site, not a dark mode: there is no light variant to toggle to.
Backgrounds are the deep purple of a Minecraft item tooltip (#100010 with
its #5000FF-to-#28007F border); text is light gold; purples carry the
chrome and golds the highlights.
Every text colour below was contrast-checked against every surface it
sits on. WCAG AA needs 4.5:1 for body text; the lowest pairing used for
text here is 6.2:1. `--astral-violet` does NOT pass on the lighter
surfaces, so it is used only for borders and decoration, never for text.
Sections
1. tokens
2. page and chrome (legacy Vector)
3. content defaults
4. MediaWiki components (tables, TOC, boxes, edit form)
5. Arcana components
========================================================================== */
/* ==========================================================================
1. TOKENS
========================================================================== */
:root {
color-scheme: dark; /* native scrollbars and form controls go dark too */
/* --- surfaces, darkest to lightest -------------------------------- */
--astral-void: #0D0612; /* page background: the tooltip's #100010 */
--astral-deep: #160B22; /* content panel */
--astral-panel: #1F1030; /* infobox, tables, TOC */
--astral-raised: #2A1642; /* table headers, selected tab */
--astral-hover: #34204F;
--astral-line: #3D2466; /* borders */
--astral-violet: #8E6BD8; /* decoration only - fails as text on panel */
--astral-glow: #6A3CFF; /* tooltip-border violet, focus rings */
/* --- gold -------------------------------------------------------- */
--gold: #F4D88A; /* body text 13.6:1 on deep */
--gold-bright: #FFE7A3; /* headings 15.6:1 */
--gold-muted: #C9B07A; /* secondary text 9.0:1 */
--gold-deep: #D9A441; /* accents, rules 8.5:1 */
/* --- links: lavender, so they separate from gold body text ---------- */
--link: #C9B0FF; /* 10.1:1 */
--link-visited: #B39AE8; /* 7.9:1 */
--link-hover: #E6DCFF;
--link-new: #FF9A8A; /* 9.3:1 pages that don't exist yet */
/* --- rarity: the mod's exact in-game colours ----------------------
All five pass as plain text on every surface above (6.2:1 - 16.3:1). */
--rarity-mundane: #AAAAAA;
--rarity-empowered: #55FF55;
--rarity-exotic: #55FFFF;
--rarity-sovereign: #FFAA00;
--rarity-divine: #FF55FF;
/* On light parchment the game colours vanish (Empowered is 1.04:1), so
the tome uses the same hues darkened to ink, each at least 5.0:1. */
--rarity-mundane-ink: #5F5F5F;
--rarity-empowered-ink: #246D24;
--rarity-exotic-ink: #226868;
--rarity-sovereign-ink: #825600;
--rarity-divine-ink: #983298;
/* --- parchment (lore tome) ------------------------------------------ */
--parchment: #F1E3BF;
--parchment-ink: #3B2A1A;
--parchment-edge: #A8844F;
}
/* ==========================================================================
2. PAGE AND CHROME
========================================================================== */
/* The page background is a faint nebula and starfield, drawn entirely in
CSS - no image requests, and it stays behind the solid content panel so
it never sits under text. */
html,
body {
background-color: var( --astral-void );
color: var( --gold );
}
body {
background-image:
radial-gradient( 1px 1px at 20px 30px, rgba( 255, 231, 163, 0.55 ), transparent ),
radial-gradient( 1px 1px at 140px 80px, rgba( 201, 176, 255, 0.45 ), transparent ),
radial-gradient( 1.5px 1.5px at 90px 160px, rgba( 255, 231, 163, 0.35 ), transparent ),
radial-gradient( 1px 1px at 190px 190px, rgba( 255, 255, 255, 0.35 ), transparent ),
radial-gradient( ellipse 60% 40% at 15% 10%, rgba( 106, 60, 255, 0.16 ), transparent 70% ),
radial-gradient( ellipse 50% 35% at 90% 5%, rgba( 217, 164, 65, 0.07 ), transparent 70% );
background-size: 220px 220px, 220px 220px, 220px 220px, 220px 220px, 100% 100%, 100% 100%;
background-attachment: fixed;
}
/* Vector paints a white-to-grey fade behind the tabs; remove it. */
#mw-page-base,
#mw-head-base {
background: none;
}
/* --- content panel -------------------------------------------------------- */
.mw-body {
background-color: var( --astral-deep );
color: var( --gold );
border-color: var( --astral-line );
box-shadow: 0 0 0 1px rgba( 106, 60, 255, 0.10 ), 0 8px 30px rgba( 0, 0, 0, 0.45 );
}
.mw-body h1,
.mw-body-content h1,
.mw-body-content h2 {
color: var( --gold-bright );
border-bottom-color: var( --astral-line );
}
.mw-body .firstHeading {
border-bottom: 1px solid var( --gold-deep );
border-bottom-color: rgba( 217, 164, 65, 0.45 );
}
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
color: var( --gold-bright );
}
#siteSub,
#contentSub,
#contentSub2,
.mw-body .mw-indicators {
color: var( --gold-muted );
}
/* --- tabs (Page / Discussion / Read / Edit / View history) ---------------- */
/* Vector draws tab separators and fades with background images; replace
them with flat purple so there is no white seam anywhere. */
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
background-image: none;
}
.vector-menu-tabs-legacy li {
background-image: none;
background-color: var( --astral-panel );
border-left: 1px solid var( --astral-line );
border-top: 1px solid var( --astral-line );
}
.vector-menu-tabs-legacy li:last-child {
border-right: 1px solid var( --astral-line );
}
.vector-menu-tabs-legacy li a,
.vector-menu-tabs-legacy li a:visited {
color: var( --link );
}
.vector-menu-tabs-legacy li:hover {
background-color: var( --astral-hover );
}
.vector-menu-tabs-legacy .selected {
background: var( --astral-deep );
}
.vector-menu-tabs-legacy .selected a,
.vector-menu-tabs-legacy .selected a:visited {
color: var( --gold-bright );
}
.vector-menu-tabs-legacy .new a,
.vector-menu-tabs-legacy .new a:visited {
color: var( --link-new );
}
/* "More" dropdown */
.vector-menu-dropdown .vector-menu-heading {
color: var( --link );
background-color: var( --astral-panel );
}
.vector-menu-dropdown .vector-menu-heading::after {
filter: invert( 1 ) brightness( 1.6 );
}
.vector-menu-dropdown .vector-menu-content {
background-color: var( --astral-panel );
border-color: var( --astral-line );
}
.vector-menu-dropdown .mw-list-item a,
.vector-menu-dropdown .mw-list-item a:visited {
color: var( --link );
}
/* watch star and other icon tabs are dark SVGs */
.vector-menu-tabs .mw-watchlink .vector-icon,
.vector-menu-tabs .icon a {
filter: invert( 1 ) sepia( 1 ) saturate( 2 ) hue-rotate( 5deg );
}
/* --- personal tools (Log in, Talk, ...) ----------------------------------- */
#p-personal a,
#p-personal a:visited {
color: var( --link );
}
#p-personal .vector-menu-content-list li,
#p-personal #pt-anonuserpage {
color: var( --gold-muted );
}
#pt-anonuserpage,
#pt-userpage a {
filter: none;
}
/* --- search ----------------------------------------------------------------- */
.vector-search-box-input {
background-color: var( --astral-panel );
color: var( --gold );
border-color: var( --astral-line );
}
.vector-search-box-input::placeholder {
color: var( --gold-muted );
opacity: 0.8;
}
.vector-search-box-inner:hover .vector-search-box-input {
border-color: var( --astral-violet );
}
.vector-search-box-input:focus,
.vector-search-box-inner:hover .vector-search-box-input:focus {
border-color: var( --astral-glow );
box-shadow: inset 0 0 0 1px var( --astral-glow );
}
.searchButton[ name='go' ] {
filter: invert( 1 ) sepia( 1 ) saturate( 3 ) hue-rotate( 5deg ) brightness( 1.1 );
}
/* search suggestions dropdown */
.suggestions,
.suggestions-results,
.suggestions-special {
background-color: var( --astral-panel );
border-color: var( --astral-line );
color: var( --gold );
}
.suggestions-result-current,
.suggestions-special.suggestions-result-current {
background-color: var( --astral-raised );
}
/* --- sidebar ---------------------------------------------------------------- */
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
color: var( --gold-deep );
background-image: linear-gradient( to right, transparent 0, var( --astral-line ) 33%, var( --astral-line ) 66%, transparent 100% );
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a,
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
color: var( --link );
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a.new,
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li.new a {
color: var( --link-new );
}
/* --- footer ----------------------------------------------------------------- */
#footer,
.mw-footer {
color: var( --gold-muted );
}
#footer li,
.mw-footer li {
color: var( --gold-muted );
}
#footer a,
.mw-footer a {
color: var( --link );
}
#footer-icons img {
opacity: 0.85;
}
/* ==========================================================================
3. CONTENT DEFAULTS
========================================================================== */
a,
a:visited {
color: var( --link );
}
a:visited {
color: var( --link-visited );
}
a:hover,
a:focus {
color: var( --link-hover );
}
a.new,
a.new:visited,
.mw-body-content a.new {
color: var( --link-new );
}
/* Links inside running text also get a faint underline. Lavender and gold
are nearly the same brightness (1.35:1), so colour alone would be the
only thing marking a link in a sentence - not enough for readers who
can't tell those hues apart. Tables and navigation don't need it. */
.mw-parser-output p a,
.mw-parser-output li a,
.mw-parser-output dd a {
text-decoration: underline;
text-decoration-color: rgba( 201, 176, 255, 0.35 );
text-underline-offset: 0.18em;
}
.mw-parser-output p a:hover,
.mw-parser-output li a:hover {
text-decoration-color: currentColor;
}
/* Core gives external and interwiki links their own blues (#36b / #636);
same specificity as these, but site CSS loads later, so these win. */
.mw-parser-output a.external,
.mw-parser-output a.external:visited,
.mw-parser-output a.extiw,
.mw-parser-output a.extiw:visited {
color: var( --link );
}
.mw-parser-output a.external:hover,
.mw-parser-output a.extiw:hover {
color: var( --link-hover );
}
/* External links: Vector's blue arrow icon, recoloured */
.mw-parser-output a.external {
background-image: none;
padding-right: 0;
}
.mw-parser-output a.external:not( .mw-magiclink )::after {
content: '\2197';
font-size: 0.75em;
margin-left: 0.15em;
color: var( --astral-violet );
}
/* {{Mc}} links reach minecraft.wiki but read like internal links - an arrow
on every vanilla item name is noise. .plainlinks is MediaWiki's convention
for links to the wiki's own pages written as URLs (e.g. an edit link). */
.mcw-link a.external::after,
.plainlinks a.external::after {
content: none !important;
}
.mw-editsection,
.mw-editsection-bracket {
color: var( --gold-muted );
}
hr {
background-color: var( --astral-line );
}
/* Vector draws list bullets with a dark SVG, invisible on this theme. Its
rule is a bare `ul`, so this override is a bare `ul` too: anything more
specific would beat the "no bullets" rules of the TOC, galleries and
category links and put squares on them. */
ul {
list-style-image: none;
}
.mw-parser-output li::marker {
color: var( --gold-deep );
}
code,
pre,
.mw-code {
background-color: var( --astral-panel );
color: var( --gold-bright );
border-color: var( --astral-line );
}
blockquote {
border-left: 3px solid var( --gold-deep );
padding-left: 1em;
color: var( --gold-muted );
}
::selection {
background: rgba( 106, 60, 255, 0.55 );
color: #FFFFFF;
}
/* ==========================================================================
4. MEDIAWIKI COMPONENTS
========================================================================== */
/* --- tables ------------------------------------------------------------- */
.wikitable {
background-color: var( --astral-panel );
color: var( --gold );
border-color: var( --astral-line );
}
.wikitable > * > tr > th,
.wikitable > * > tr > td {
border-color: var( --astral-line );
}
.wikitable > * > tr > th {
background-color: var( --astral-raised );
color: var( --gold-bright );
}
.wikitable > caption {
color: var( --gold-bright );
}
/* sortable-table arrows are dark SVGs */
table.jquery-tablesorter th.headerSort {
background-blend-mode: normal;
}
table.jquery-tablesorter th.headerSort,
table.jquery-tablesorter th.headerSortUp,
table.jquery-tablesorter th.headerSortDown {
background-color: var( --astral-raised );
}
/* --- table of contents ---------------------------------------------------- */
#toc,
.toc,
.mw-warning {
background-color: var( --astral-panel );
border-color: var( --astral-line );
color: var( --gold );
}
.toc .toctitle h2,
.toctitle h2 {
color: var( --gold-bright );
}
.tocnumber {
color: var( --gold-muted );
}
.toctogglelabel,
.toctogglespan,
.toc .toctogglelabel {
color: var( --link );
}
/* --- category links, notices, message boxes --------------------------------- */
.catlinks {
background-color: var( --astral-panel );
border-color: var( --astral-line );
color: var( --gold-muted );
}
.mw-message-box,
.cdx-message,
.warningbox,
.errorbox,
.successbox,
.messagebox {
background-color: var( --astral-panel );
border-color: var( --astral-violet );
color: var( --gold );
}
.mw-message-box-error,
.errorbox,
.cdx-message--error {
border-color: var( --link-new );
}
.mw-message-box-success,
.successbox,
.cdx-message--success {
border-color: var( --rarity-empowered );
}
#siteNotice,
.mw-dismissable-notice {
color: var( --gold );
}
/* --- thumbnails and galleries ---------------------------------------------- */
.thumbinner,
.thumbimage,
figure[ typeof~='mw:File/Thumb' ] > figcaption,
figure[ typeof~='mw:File/Frame' ] > figcaption,
figure[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ],
ul.gallery li.gallerybox div.thumb {
background-color: var( --astral-panel );
border-color: var( --astral-line );
color: var( --gold-muted );
}
/* --- collapsible toggles ----------------------------------------------------- */
.mw-collapsible-toggle,
.mw-collapsible-text {
color: var( --link );
}
/* --- TabberNeue tabs (recipe Default / Original Recipes) --------------------- */
.tabber__header {
background: none;
box-shadow: inset 0 -1px 0 var( --astral-line );
}
.tabber__header::before,
.tabber__header::after {
background-image: none !important;
}
.tabber__tab,
.tabber__tab:visited {
color: var( --gold-muted );
}
.tabber__tab:hover {
color: var( --gold-bright );
}
.tabber__tab[ aria-selected='true' ] {
color: var( --gold-bright );
box-shadow: inset 0 -2px 0 var( --gold-deep );
}
/* --- edit form ---------------------------------------------------------------
The source editor is made dark here. MediaWiki's OOUI widgets (some
buttons, dialogs) and VisualEditor bring their own light styling; a full
dark treatment of those is a separate job. */
textarea,
#wpTextbox1,
input[ type='text' ],
input[ type='search' ],
input[ type='password' ],
select {
background-color: var( --astral-panel );
color: var( --gold );
border-color: var( --astral-line );
}
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .tabs,
.wikiEditor-ui-toolbar .sections,
.wikiEditor-ui-view {
background-color: var( --astral-raised );
border-color: var( --astral-line );
}
.editOptions {
background-color: var( --astral-panel );
border-color: var( --astral-line );
color: var( --gold );
}
/* --- diffs ------------------------------------------------------------------ */
.diff-addedline {
border-color: #2E7D5B;
background-color: rgba( 46, 125, 91, 0.12 );
}
.diff-deletedline {
border-color: #B3565E;
background-color: rgba( 179, 86, 94, 0.12 );
}
.diff-context {
background-color: var( --astral-panel );
border-color: var( --astral-line );
color: var( --gold-muted );
}
.diffchange {
color: #FFFFFF;
}
.diff-addedline .diffchange {
background-color: rgba( 46, 125, 91, 0.45 );
}
.diff-deletedline .diffchange {
background-color: rgba( 179, 86, 94, 0.45 );
}
/* ==========================================================================
5. ARCANA COMPONENTS
========================================================================== */
/* --- rarity -----------------------------------------------------------------
Plain in-game colours: on this theme all five pass as text. */
.rarity-mundane,
.rarity-empowered,
.rarity-exotic,
.rarity-sovereign,
.rarity-divine {
font-weight: bold;
}
.rarity-mundane { color: var( --rarity-mundane ); }
.rarity-empowered { color: var( --rarity-empowered ); }
.rarity-exotic { color: var( --rarity-exotic ); }
.rarity-sovereign { color: var( --rarity-sovereign ); }
.rarity-divine { color: var( --rarity-divine ); }
/* Augment tiers: one coloured ❖ per level, as the game shows them. Each
carries an aria-label ("Level 2: Exotic") and a hover title. */
.arcana-tiers {
white-space: nowrap;
letter-spacing: 0.14em;
font-size: 1.35em;
line-height: 1;
}
.arcana-tiers > span {
font-weight: normal;
cursor: help;
}
/* --- infobox ------------------------------------------------------------------ */
.arcana-infobox {
background-color: var( --astral-panel );
border: 1px solid rgba( 217, 164, 65, 0.45 );
box-shadow: 0 0 0 1px rgba( 106, 60, 255, 0.18 ), 0 4px 16px rgba( 0, 0, 0, 0.35 );
}
.arcana-infobox > caption {
color: var( --gold-bright );
font-size: 1.15em;
padding-bottom: 0.3em;
}
.arcana-infobox > * > tr > th {
background-color: var( --astral-raised );
color: var( --gold-muted );
font-weight: normal;
text-align: left;
}
.arcana-infobox .arcana-infobox-image {
background-color: var( --astral-void );
text-align: center;
padding: 0.8em;
}
/* Sprites are pixel art: scale them up as hard pixels, not a blur. Upload
them at a whole multiple of 16 px (128 px is ideal) so no pixel is uneven. */
.arcana-infobox .arcana-infobox-image img {
image-rendering: pixelated;
}
/* Shown until the item's image is uploaded. */
.arcana-missing-image {
display: inline-block;
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
border: 1px dashed var( --astral-line );
color: var( --astral-violet );
font-size: 0.85em;
}
/* --- tooltips ------------------------------------------------------------------- */
.arcana-tooltip {
border-collapse: collapse;
margin: 0.5em 0;
}
.arcana-tooltip > * > tr > td {
vertical-align: top;
padding: 0 1em 0 0;
}
/* Styled like the in-game tooltip it sits beside. */
.arcana-tooltip-text {
max-width: 34em;
padding: 0.6em 0.8em;
background-color: #100010;
border: 2px solid transparent;
border-image: linear-gradient( to bottom, rgba( 80, 0, 255, 0.65 ), rgba( 40, 0, 127, 0.65 ) ) 1;
color: var( --gold );
font-style: normal;
}
/* --- config tables ------------------------------------------------------------------
Config keys are long camelCase words ("shieldOfFortitudeShieldBash...") that
would otherwise force the table wider than the page. */
.arcana-configs code {
overflow-wrap: anywhere;
}
.arcana-configs td:first-child {
min-width: 12em;
}
/* --- recipes: item slots ------------------------------------------------------------
Recipe grids and altar pads are built in the page from item icons (genpages
forge_grid / altar_strip), so every slot animates, links and names its item
on hover. Our own frame; no game GUI art. Icons are 32px: the renders are
160 or 320px, so the scaling is a whole number and pixel art stays crisp. */
.arcana-forge {
display: inline-flex;
align-items: center;
gap: 0.75em;
margin: 0.4em 0 0.8em;
padding: 0.6em;
background-color: var( --astral-panel );
border: 1px solid var( --astral-line );
border-radius: 4px;
}
.arcana-forge-grid {
display: grid;
gap: 2px;
}
.arcana-forge-grid-5 {
grid-template-columns: repeat( 5, 38px );
}
.arcana-forge-arrow,
.arcana-altar-arrow {
color: var( --gold-muted );
font-size: 1.4em;
line-height: 1;
}
.arcana-slot {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 38px;
height: 38px;
vertical-align: middle;
background-color: var( --astral-deep );
border: 1px solid var( --astral-line );
border-radius: 2px;
}
.arcana-slot img,
.arcana-sprite img,
.arcana-gallery img,
.arcana-skins img {
image-rendering: pixelated;
}
/* Stack size in the corner, like the inventory. */
.arcana-slot-count {
position: absolute;
right: 2px;
bottom: 0;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
line-height: 1.1;
text-shadow: 1px 1px 0 #3F3F3F;
pointer-events: none;
}
/* A slot described only in words (hard-coded transmutations): hover for it. */
.arcana-slot-text {
color: var( --gold-muted );
font-weight: bold;
cursor: help;
}
/* Until a render is uploaded MediaWiki prints a red "File:..." link; show a
quiet "?" instead. */
.arcana-slot a.new,
.arcana-sprite a.new {
font-size: 0;
}
.arcana-slot a.new::after,
.arcana-sprite a.new::after {
content: "?";
font-size: 14px;
color: var( --astral-violet );
}
.arcana-pad-output {
width: 46px;
height: 46px;
border-color: var( --gold-deep );
}
/* Transmutation Altar pads, coloured after the blocks under them. */
.arcana-altar {
display: inline-flex;
align-items: center;
gap: 3px;
white-space: nowrap;
}
.arcana-altar .arcana-slot {
border-width: 2px;
}
.arcana-pad-reagent { border-color: #9A5CC6; } /* amethyst */
.arcana-pad-input { border-color: #E3DDD4; } /* quartz */
.arcana-pad-focus { border-color: #857A8C; } /* blackstone (lightened to show on the dark theme) */
.arcana-pad-aequalis { border-color: #4AEDD9; } /* diamond block */
.arcana-ingredients td:last-child,
.arcana-ingredients th:last-child {
text-align: right;
white-space: nowrap;
}
/* --- spoilers ----------------------------------------------------------------------
<details>/<summary> are not in MediaWiki's sanitiser whitelist, so core's
mw-collapsible is used instead (see Template:Spoiler). */
.arcana-spoiler {
border: 1px solid rgba( 217, 164, 65, 0.5 );
border-radius: 3px;
padding: 0.6em 0.9em;
margin: 0.8em 0;
background: rgba( 106, 60, 255, 0.07 );
}
.arcana-spoiler-title {
color: var( --gold-deep );
}
.arcana-spoiler .mw-collapsible-toggle {
float: none;
margin-left: 0.5em;
font-weight: normal;
}
/* --- generated-page banner and tag lists ------------------------------------------ */
.arcana-generated-notice {
border-left: 3px solid var( --astral-glow );
background: rgba( 106, 60, 255, 0.08 );
padding: 0.45em 0.9em;
margin-bottom: 1em;
font-size: 0.9em;
color: var( --gold-muted );
}
/* --- notices: {{Stub}}, {{Spoiler notice}}, {{Main}} ------------------------------- */
.arcana-stub,
.arcana-spoiler-notice {
border-left: 3px solid var( --gold-deep );
background: rgba( 217, 164, 65, 0.07 );
padding: 0.45em 0.9em;
margin: 0 0 1em;
font-size: 0.92em;
color: var( --gold-muted );
}
/* {{Section stub}}: the same notice, quieter, inside a section. */
.arcana-section-stub {
margin: 0.3em 0 0.8em;
font-size: 0.88em;
}
.arcana-spoiler-notice {
border-left-color: var( --rarity-divine );
background: rgba( 255, 85, 255, 0.06 );
}
.hatnote {
font-style: italic;
color: var( --gold-muted );
padding-left: 1.6em;
margin: 0 0 0.6em;
}
/* --- hub lists (Items, Multiblocks) ------------------------------------------------ */
.arcana-item-list {
min-width: 24em;
}
.arcana-list-sprite {
width: 32px;
text-align: center;
padding: 2px 4px !important;
}
.arcana-list-sprite img {
image-rendering: pixelated;
vertical-align: middle;
}
.arcana-tag-members {
display: inline;
font-size: 0.9em;
}
.arcana-tag-members .mw-collapsible-content {
display: block;
max-width: 30em;
}
/* --- lore tome ({{Lore}}) -------------------------------------------------------------
Parchment on the dark site, like a page lying on a desk. One page that grows
with the text. The flourishes are ::before/::after content, which browsers
never include in a copy, so pasted lore is clean text. */
.arcana-tome {
position: relative;
max-width: 34em;
margin: 1em 0 1.6em;
padding: 2.6em 2.8em 2.4em;
color: var( --parchment-ink );
background-color: var( --parchment );
background-image:
radial-gradient( ellipse at 50% 40%, rgba( 255, 251, 238, 0.6 ) 0%, rgba( 255, 251, 238, 0 ) 65% ),
radial-gradient( ellipse at center, transparent 58%, rgba( 110, 72, 28, 0.25 ) 100% );
border: 1px solid var( --parchment-edge );
border-radius: 2px;
box-shadow:
0 6px 24px rgba( 0, 0, 0, 0.55 ),
inset 0 0 0 5px var( --parchment ),
inset 0 0 0 6px rgba( 168, 132, 79, 0.55 );
font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
font-size: 1.03em;
line-height: 1.7;
}
.arcana-tome a,
.arcana-tome a:visited {
color: #5B3A9E;
}
.arcana-tome ::selection {
background: rgba( 217, 164, 65, 0.45 );
color: var( --parchment-ink );
}
.arcana-tome p {
margin: 0 0 0.85em;
}
.arcana-tome p:last-child {
margin-bottom: 0;
}
.arcana-tome p + p {
text-indent: 1.5em;
}
/* Entry header: item name centred, rarity below it, left-aligned. */
.arcana-tome-title {
text-align: center;
font-weight: bold;
font-size: 1.15em;
margin: 0 0 0.3em;
}
.arcana-tome-rarity {
text-align: left;
margin: 0 0 1em;
padding-bottom: 0.7em;
border-bottom: 1px solid rgba( 168, 132, 79, 0.45 );
}
.arcana-tome .rarity-mundane { color: var( --rarity-mundane-ink ); }
.arcana-tome .rarity-empowered { color: var( --rarity-empowered-ink ); }
.arcana-tome .rarity-exotic { color: var( --rarity-exotic-ink ); }
.arcana-tome .rarity-sovereign { color: var( --rarity-sovereign-ink ); }
.arcana-tome .rarity-divine { color: var( --rarity-divine-ink ); }
.arcana-tome::before,
.arcana-tome::after {
display: block;
text-align: center;
color: var( --gold-deep );
letter-spacing: 0.6em;
font-size: 0.85em;
line-height: 1;
user-select: none;
}
.arcana-tome::before {
content: '\2726 \2727 \2726';
margin: -1.2em 0 1.1em;
}
.arcana-tome::after {
content: '\2727';
margin: 1.2em 0 -1em;
}
/* --- Swapping in a painted texture for the tome -----------------------------
Use a 9-slice border-image instead of the CSS parchment: corners stay fixed,
edges tile, the centre fills, so ornate corners never distort however long
the entry gets. Upload your own art (NOT Minecraft's book.png), then:
.arcana-tome {
background: none;
box-shadow: none;
border-style: solid;
border-width: 48px 44px;
border-image: url( '/wiki/Special:FilePath/Tome_page.png' ) 48 44 fill round;
padding: 0.4em 0.6em;
}
-------------------------------------------------------------------------- */
/* {{Version}} */
.arcana-version a {
font-weight: bold;
}
/* Skin colors: a small chip beside the hex code (genpages skin tables). */
.arcana-swatch {
display: inline-block;
min-width: 1.5em;
border: 1px solid var( --astral-line );
border-radius: 2px;
vertical-align: middle;
}
/* Classic Recipes value under a transmutation cell's default. */
.arcana-classic-value {
margin-top: 0.25em;
color: var( --gold-muted );
}
/* Transmutation Recipes: reagents never wrap; a long pool gets the width it
needs but no more (the rest of a long pool is collapsed). */
.arcana-transmutations td.arcana-tm-reagents,
.arcana-transmutations td.arcana-tm-input,
.arcana-transmutations td.arcana-tm-output {
white-space: nowrap;
}
.arcana-transmutations td.arcana-tm-pool {
min-width: 12em;
max-width: 24em;
}
/* --- multiblock structures ----------------------------------------------------------
One tab per layer, seen from above with north up (genpages multiblock_layers). */
.arcana-mb {
display: inline-block;
padding: 0.5em 0.6em 0.6em;
background-color: var( --astral-panel );
border: 1px solid var( --astral-line );
border-radius: 4px;
max-width: 100%;
overflow-x: auto;
}
.arcana-mb-north {
text-align: center;
font-size: 0.8em;
color: var( --gold-muted );
margin-bottom: 0.3em;
}
.arcana-mb-grid {
display: grid;
gap: 2px;
}
/* "." in the export: the block there is not checked. */
.arcana-slot-any {
background-color: transparent;
border-color: rgba( 61, 36, 102, 0.45 );
}
/* Air the structure requires. */
.arcana-slot-air {
background-color: transparent;
border: 1px dashed var( --astral-violet );
opacity: 0.6;
}
.arcana-pad-core {
border: 2px solid var( --gold-deep );
box-shadow: 0 0 6px rgba( 217, 164, 65, 0.45 );
}
/* Which way a stair / slab / pane faces. */
.arcana-slot-facing {
position: absolute;
top: -1px;
left: 1px;
font-size: 11px;
line-height: 1;
color: var( --gold-bright );
text-shadow: 1px 1px 0 #000000;
pointer-events: none;
}
.arcana-structure-image {
margin: 0.3em 0 0.8em;
}
/* Served at full size (scaling would freeze the animation); fit the column. */
.arcana-structure-image img,
.arcana-wide-image img,
.arcana-home-banner img {
max-width: 100%;
height: auto;
}
.arcana-painting {
float: right;
margin: 0 0 1em 1em;
}
.arcana-painting img {
image-rendering: pixelated;
border: 6px solid #5A3A1E;
box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.5 );
}
.arcana-mb-materials {
margin-top: 0.8em;
}
/* ==========================================================================
6. POLISH
Chrome (header, tabs, sidebar, logo, footer), every MediaWiki form system
(OOUI on Special:BotPasswords / Preferences / Search, Codex on the login
page, plain HTMLForm), dialogs, notifications, the Main Page, and small
screens. Everything uses the tokens from section 1.
========================================================================== */
::selection {
background-color: rgba( 106, 60, 255, 0.55 );
color: #FFFFFF;
}
:focus-visible {
outline: 2px solid var( --astral-glow );
outline-offset: 1px;
}
/* --- header: a faint violet glow across the top of the page ---------------- */
#mw-page-base {
height: 5em;
background: linear-gradient( to bottom, rgba( 106, 60, 255, 0.22 ), rgba( 106, 60, 255, 0 ) );
}
/* --- logo: the Tome, with a soft halo ------------------------------------------ */
#p-logo a,
.mw-wiki-logo {
image-rendering: pixelated;
filter: drop-shadow( 0 0 10px rgba( 106, 60, 255, 0.55 ) );
transition: filter 0.2s ease;
}
#p-logo a:hover {
filter: drop-shadow( 0 0 14px rgba( 217, 164, 65, 0.55 ) );
}
/* --- page tabs: rounded, with a gold edge on the current tab ------------------- */
.vector-menu-tabs-legacy li {
border-radius: 6px 6px 0 0;
margin-right: 2px;
background-image: linear-gradient( to bottom, var( --astral-raised ), var( --astral-panel ) );
transition: background-color 0.15s ease;
}
.vector-menu-tabs-legacy li:last-child {
margin-right: 0;
}
.vector-menu-tabs-legacy li:hover {
background-image: linear-gradient( to bottom, var( --astral-hover ), var( --astral-raised ) );
}
.vector-menu-tabs-legacy .selected {
background-image: none;
background-color: var( --astral-deep );
box-shadow: inset 0 2px 0 var( --gold-deep );
}
.vector-menu-tabs-legacy li a {
font-weight: 500;
letter-spacing: 0.01em;
}
.vector-menu-dropdown .vector-menu-content {
border-radius: 0 0 6px 6px;
box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.5 );
}
.vector-menu-dropdown .mw-list-item a:hover {
background-color: var( --astral-hover );
}
/* --- personal tools ----------------------------------------------------------- */
#p-personal .vector-menu-content-list li a {
padding: 0.15em 0.45em;
border-radius: 4px;
transition: background-color 0.15s ease;
}
#p-personal .vector-menu-content-list li a:hover {
background-color: var( --astral-panel );
text-decoration: none;
}
/* the user and notification icons are dark SVGs */
#pt-userpage a,
#pt-anonuserpage,
#p-personal .mw-echo-notification-badge-nojs {
background-blend-mode: normal;
}
#pt-userpage,
#pt-anonuserpage {
background-image: none;
}
/* --- search: gold text everywhere, including autofill and the suggestions ---- */
#searchInput,
#simpleSearch #searchInput,
.vector-search-box-input,
.vector-search-box input[ type='search' ],
.cdx-search-input .cdx-text-input__input {
color: var( --gold ) !important;
-webkit-text-fill-color: var( --gold );
caret-color: var( --gold-bright );
background-color: var( --astral-panel ) !important;
border-color: var( --astral-line );
border-radius: 4px;
}
#searchInput:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var( --astral-panel ) inset;
}
.suggestions {
box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.55 );
border-radius: 0 0 6px 6px;
overflow: hidden;
}
.suggestions-result,
.suggestions-result a,
.suggestions .mw-searchSuggest-link,
.suggestions .mw-searchSuggest-link .suggestions-result {
color: var( --gold ) !important;
}
.suggestions-result .highlight,
.suggestions-special .special-query {
color: var( --gold-bright );
font-weight: bold;
}
/* Special:Search: the "Content pages / Multimedia / Everything" strip and results */
.mw-search-profile-tabs,
.search-types {
background-color: var( --astral-panel ) !important;
border-color: var( --astral-line ) !important;
border-radius: 4px;
}
.search-types .current a,
.mw-search-profile-tabs .current a {
color: var( --gold-bright );
}
.mw-search-result-heading a,
.searchresult {
color: var( --gold );
}
.mw-search-result-data,
.mw-search-results-info {
color: var( --gold-muted );
}
.searchmatch {
color: var( --gold-bright );
font-weight: bold;
}
.suggestions-special .special-label {
color: var( --gold-muted );
}
.suggestions-result-current,
.suggestions-result-current a {
color: var( --gold-bright ) !important;
}
/* --- sidebar: each group a panel with a gold accent ---------------------------- */
.vector-legacy-sidebar .vector-menu-portal {
margin: 0 0.5em 0.8em 0.6em;
padding: 0.3em 0.2em 0.4em;
background-color: rgba( 31, 16, 48, 0.55 );
border: 1px solid rgba( 61, 36, 102, 0.8 );
border-left: 2px solid var( --gold-deep );
border-radius: 0 6px 6px 0;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
background-image: none;
color: var( --gold-deep );
font-size: 0.72em;
font-weight: bold;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 0.2em 0 0.3em 0.6em;
padding: 0;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content {
margin-left: 0.6em;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li {
padding: 0.2em 0;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a {
display: block;
padding: 0.1em 0.4em;
border-radius: 3px;
transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:hover {
background-color: var( --astral-hover );
color: var( --link-hover );
padding-left: 0.7em;
text-decoration: none;
}
/* the first group (navigation) has no heading in Vector; keep it framed */
#p-navigation .vector-menu-heading {
display: block;
}
/* --- content headings: a small violet mark before each section -------------- */
.mw-body-content h2::before {
content: "\2756\00a0";
color: var( --astral-violet );
font-size: 0.7em;
vertical-align: 0.15em;
}
.page-Main_Page .mw-body-content h2::before {
content: none;
}
/* --- footer ---------------------------------------------------------------------- */
#footer,
.mw-footer {
margin-top: 1.5em;
padding-top: 1em;
border-top: 1px solid transparent;
border-image: linear-gradient( to right, transparent, var( --astral-line ), var( --gold-deep ), var( --astral-line ), transparent ) 1;
}
#footer-icons img {
filter: grayscale( 0.3 ) brightness( 0.9 );
}
/* --- plain HTML forms (HTMLForm "div"/"table" mode, edit summary, selects) ----- */
.mw-body input[ type='text' ],
.mw-body input[ type='search' ],
.mw-body input[ type='password' ],
.mw-body input[ type='email' ],
.mw-body input[ type='number' ],
.mw-body input[ type='url' ],
.mw-body input[ type='date' ],
.mw-body select,
.mw-body textarea {
background-color: var( --astral-panel );
color: var( --gold );
border: 1px solid var( --astral-line );
border-radius: 4px;
}
.mw-body input:focus,
.mw-body select:focus,
.mw-body textarea:focus {
border-color: var( --astral-glow );
outline: none;
box-shadow: 0 0 0 1px var( --astral-glow );
}
.mw-body input[ type='submit' ],
.mw-body input[ type='button' ],
.mw-body button:not( [ class*='oo-ui' ] ):not( [ class*='cdx-' ] ) {
background-color: var( --astral-raised );
color: var( --gold-bright );
border: 1px solid var( --astral-line );
border-radius: 4px;
padding: 0.3em 0.9em;
cursor: pointer;
}
.mw-body fieldset {
border: 1px solid var( --astral-line );
border-radius: 6px;
background-color: rgba( 31, 16, 48, 0.4 );
}
.mw-body legend {
color: var( --gold-bright );
padding: 0 0.4em;
}
/* --- OOUI (Special:BotPasswords, Preferences, Search, RecentChanges, VE) --------- */
.oo-ui-labelElement-label,
.oo-ui-fieldLayout-header,
.oo-ui-fieldsetLayout-header .oo-ui-labelElement-label {
color: var( --gold );
}
.oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header .oo-ui-labelElement-label {
color: var( --gold-bright );
}
.oo-ui-fieldLayout-help,
.oo-ui-inline-help,
.oo-ui-fieldLayout-messages,
.mw-htmlform-help {
color: var( --gold-muted );
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
.oo-ui-textInputWidget textarea,
.oo-ui-dropdownInputWidget select,
.oo-ui-dropdownWidget-handle,
.oo-ui-comboBoxInputWidget .oo-ui-inputWidget-input,
.oo-ui-tagMultiselectWidget-handle,
.oo-ui-capsuleMultiselectWidget-handle {
background-color: var( --astral-panel ) !important;
color: var( --gold ) !important;
border-color: var( --astral-line ) !important;
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input:focus,
.oo-ui-dropdownWidget-handle:focus {
border-color: var( --astral-glow ) !important;
box-shadow: inset 0 0 0 1px var( --astral-glow ) !important;
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input::placeholder {
color: var( --gold-muted );
}
.oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-inputWidget-input {
background-color: var( --astral-deep ) !important;
color: var( --gold-muted ) !important;
}
/* buttons */
/* OOUI's own rules are as specific as these, so they need !important; the
primary rules below are more specific and still win over the plain ones. */
.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background-color: var( --astral-raised ) !important;
color: var( --gold-bright ) !important;
border-color: var( --astral-line ) !important;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: var( --astral-hover ) !important;
color: #FFFFFF !important;
border-color: var( --astral-violet ) !important;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
.oo-ui-toggleWidget-on.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
background-color: var( --astral-hover ) !important;
border-color: var( --astral-glow ) !important;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
background-color: var( --astral-glow ) !important;
border-color: var( --astral-glow ) !important;
color: #FFFFFF !important;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
background-color: #7D55FF !important;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
background-color: #B3261E !important;
border-color: #B3261E !important;
color: #FFFFFF !important;
}
/* filter chips (RecentChanges, tag inputs) */
.oo-ui-tagItemWidget {
background-color: var( --astral-raised ) !important;
color: var( --gold ) !important;
border-color: var( --astral-line ) !important;
}
/* RecentChanges filter area: the chip group paints its own light background */
.mw-rcfilters-ui-filterWrapperWidget .oo-ui-draggableGroupElement,
.oo-ui-tagMultiselectWidget-group {
background-color: transparent !important;
}
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget .oo-ui-buttonElement-button {
color: var( --link ) !important;
}
.mw-changeslist-legend {
background-color: var( --astral-panel ) !important;
border-color: var( --astral-line ) !important;
color: var( --gold-muted ) !important;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: var( --link );
}
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background-color: var( --astral-deep ) !important;
color: var( --gold-muted ) !important;
border-color: var( --astral-line ) !important;
}
/* checkboxes and radios */
.oo-ui-checkboxInputWidget [ type='checkbox' ] + span,
.oo-ui-radioInputWidget [ type='radio' ] + span {
background-color: var( --astral-panel );
border-color: var( --astral-violet );
}
.oo-ui-checkboxInputWidget [ type='checkbox' ]:checked + span,
.oo-ui-radioInputWidget [ type='radio' ]:checked + span {
background-color: var( --astral-glow );
border-color: var( --astral-glow );
}
.oo-ui-radioInputWidget [ type='radio' ]:checked + span::before {
border-color: var( --astral-glow );
}
/* dark icons on dark buttons: lighten every icon that is not already white */
.oo-ui-iconElement-icon:not( .oo-ui-image-invert ),
.oo-ui-indicatorElement-indicator {
filter: invert( 1 ) brightness( 1.3 ) sepia( 0.2 ) hue-rotate( 210deg );
}
/* menus, dropdown lists, popups, tabs */
.oo-ui-menuSelectWidget,
.oo-ui-popupWidget-popup,
.oo-ui-selectWidget-unpressed,
.mw-rcfilters-ui-filterWrapperWidget {
background-color: var( --astral-panel );
border-color: var( --astral-line );
color: var( --gold );
}
.oo-ui-optionWidget,
.oo-ui-menuOptionWidget {
color: var( --gold );
}
.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
background-color: var( --astral-hover );
color: var( --gold-bright );
}
.oo-ui-optionWidget-selected,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
background-color: var( --astral-raised );
color: var( --gold-bright );
}
.oo-ui-popupWidget-anchor::before {
border-bottom-color: var( --astral-line );
}
.oo-ui-popupWidget-anchor::after {
border-bottom-color: var( --astral-panel );
}
.oo-ui-tabSelectWidget-framed,
.oo-ui-indexLayout > .oo-ui-menuLayout-menu {
background-color: var( --astral-panel );
}
.oo-ui-tabOptionWidget {
color: var( --gold-muted );
}
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
color: var( --gold-bright );
box-shadow: inset 0 -2px 0 var( --gold-deep );
}
.oo-ui-panelLayout-framed,
.oo-ui-panelLayout-padded.oo-ui-panelLayout-framed {
background-color: var( --astral-panel );
border-color: var( --astral-line );
}
/* messages */
.oo-ui-messageWidget,
.oo-ui-messageWidget.oo-ui-messageWidget-block {
background-color: rgba( 106, 60, 255, 0.12 );
border-color: var( --astral-line );
color: var( --gold );
}
.oo-ui-messageWidget.oo-ui-flaggedElement-warning {
background-color: rgba( 255, 170, 0, 0.10 );
border-color: #8A6A1F;
}
.oo-ui-messageWidget.oo-ui-flaggedElement-error {
background-color: rgba( 179, 38, 30, 0.18 );
border-color: #8C2A24;
}
.oo-ui-messageWidget.oo-ui-flaggedElement-success {
background-color: rgba( 85, 255, 85, 0.08 );
border-color: #2F6B2F;
}
/* dialogs (VisualEditor, link and media pickers) */
.oo-ui-windowManager-modal > .oo-ui-dialog {
background-color: rgba( 5, 2, 10, 0.7 );
}
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
.oo-ui-window-body,
.oo-ui-window-head,
.oo-ui-window-foot,
.oo-ui-processDialog-navigation {
background-color: var( --astral-deep );
color: var( --gold );
border-color: var( --astral-line );
}
.oo-ui-processDialog-title,
.oo-ui-messageDialog-title {
color: var( --gold-bright );
}
.oo-ui-toolbar-bar,
.ve-ui-toolbar > .oo-ui-toolbar-bar,
.oo-ui-toolGroup-tools,
.oo-ui-popupToolGroup-tools {
background-color: var( --astral-panel ) !important;
border-color: var( --astral-line ) !important;
color: var( --gold );
}
.oo-ui-tool .oo-ui-tool-title {
color: var( --gold );
}
.oo-ui-tool-active,
.oo-ui-toolGroup .oo-ui-tool-link:hover {
background-color: var( --astral-hover ) !important;
}
/* --- Codex (Special:UserLogin, CreateAccount, some 1.43 special pages) ---------- */
.cdx-text-input__input,
.cdx-select,
.cdx-select-vue__handle,
.cdx-text-area__textarea {
background-color: var( --astral-panel ) !important;
color: var( --gold ) !important;
border-color: var( --astral-line ) !important;
}
.cdx-text-input__input:focus,
.cdx-text-area__textarea:focus {
border-color: var( --astral-glow ) !important;
box-shadow: inset 0 0 0 1px var( --astral-glow ) !important;
}
.cdx-label__label__text,
.cdx-field__help-text,
.cdx-checkbox__label,
.cdx-radio__label {
color: var( --gold );
}
.cdx-button {
background-color: var( --astral-raised ) !important;
color: var( --gold-bright ) !important;
border-color: var( --astral-line ) !important;
}
.cdx-button:enabled:hover {
background-color: var( --astral-hover ) !important;
}
.cdx-button--action-progressive.cdx-button--weight-primary {
background-color: var( --astral-glow ) !important;
border-color: var( --astral-glow ) !important;
color: #FFFFFF !important;
}
.cdx-checkbox__icon,
.cdx-radio__icon {
background-color: var( --astral-panel ) !important;
border-color: var( --astral-violet ) !important;
}
.cdx-checkbox__input:checked + .cdx-checkbox__icon,
.cdx-radio__input:checked + .cdx-radio__icon {
background-color: var( --astral-glow ) !important;
border-color: var( --astral-glow ) !important;
}
.cdx-message {
background-color: rgba( 106, 60, 255, 0.12 ) !important;
border-color: var( --astral-line ) !important;
color: var( --gold ) !important;
}
.cdx-message--error {
background-color: rgba( 179, 38, 30, 0.18 ) !important;
}
.cdx-message--warning {
background-color: rgba( 255, 170, 0, 0.10 ) !important;
}
.cdx-message__icon {
filter: invert( 1 ) brightness( 1.4 );
}
/* --- notifications ("Your edit was saved.") and misc special pages -------------- */
.mw-notification {
background-color: var( --astral-panel );
color: var( --gold );
border: 1px solid var( --astral-line );
box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.5 );
}
.mw-notification-type-error {
border-color: #8C2A24;
}
.mw-changeslist-line-inner,
.mw-changeslist-links,
.mw-changeslist-date,
.mw-userlink,
.comment {
color: var( --gold-muted );
}
.mw-specialpage-summary,
.mw-htmlform-submit-buttons {
color: var( --gold-muted );
}
.mw-special-Preferences .mw-prefs-tabs {
background-color: var( --astral-panel );
}
/* --- the debug toolbar (only when MW_DEBUG=1; never on a public wiki) ---------- */
#mw-debug-toolbar,
#mw-debug-toolbar .mw-debug-bits,
#mw-debug-toolbar .mw-debug-pane {
background-color: var( --astral-panel ) !important;
color: var( --gold ) !important;
border-color: var( --astral-line ) !important;
}
#mw-debug-toolbar a {
color: var( --link ) !important;
}
/* --- Main Page ------------------------------------------------------------------- */
.page-Main_Page .firstHeading,
.page-Main_Page #siteSub,
.page-Main_Page #contentSub {
display: none;
}
.arcana-home-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.6em;
padding: 1.2em 1.4em;
margin-bottom: 1em;
background:
radial-gradient( ellipse 60% 120% at 0% 50%, rgba( 106, 60, 255, 0.30 ), transparent 70% ),
linear-gradient( to right, var( --astral-panel ), var( --astral-deep ) );
border: 1px solid var( --astral-line );
border-radius: 10px;
box-shadow: inset 0 0 40px rgba( 106, 60, 255, 0.12 );
}
.arcana-home-hero-icon img {
image-rendering: pixelated;
filter: drop-shadow( 0 0 12px rgba( 106, 60, 255, 0.7 ) );
}
.arcana-home-title {
font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
font-size: 2.2em;
line-height: 1.15;
color: var( --gold-bright );
text-shadow: 0 0 18px rgba( 217, 164, 65, 0.35 );
}
.arcana-home-tagline {
color: var( --gold-muted );
margin-top: 0.2em;
}
.arcana-home-stats {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
margin: 0 0 0.4em;
}
.arcana-home-stat a {
display: inline-flex;
align-items: baseline;
gap: 0.35em;
padding: 0.25em 0.7em;
background-color: var( --astral-panel );
border: 1px solid var( --astral-line );
border-radius: 999px;
text-decoration: none;
}
.arcana-home-stat a:hover {
border-color: var( --astral-violet );
background-color: var( --astral-hover );
}
.arcana-home-stat-num {
color: var( --gold-bright );
font-weight: bold;
}
.arcana-home-stat-label {
color: var( --link );
font-size: 0.9em;
}
.arcana-home-version {
color: var( --gold-muted );
font-size: 0.85em;
margin-bottom: 1em;
}
.arcana-home-intro {
font-size: 1.05em;
margin-bottom: 1.2em;
}
.arcana-home-grid {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 22em, 1fr ) ); /* 3 x 2 on desktop */
gap: 0.9em;
margin-bottom: 1.2em;
}
.arcana-home-card {
padding: 0.9em 1em;
background-color: var( --astral-panel );
border: 1px solid var( --astral-line );
border-radius: 8px;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.arcana-home-card:hover {
border-color: var( --astral-violet );
transform: translateY( -2px );
box-shadow: 0 6px 18px rgba( 106, 60, 255, 0.18 );
}
.arcana-home-card-head {
display: flex;
align-items: center;
gap: 0.5em;
font-size: 1.25em;
font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
margin-bottom: 0.35em;
}
.arcana-home-card-head img {
image-rendering: pixelated;
}
.arcana-home-card-head a {
color: var( --gold-bright );
}
.arcana-home-card-body {
color: var( --gold );
margin-bottom: 0.5em;
}
.arcana-home-card-links {
font-size: 0.88em;
color: var( --gold-muted );
}
.arcana-home-rarities {
padding: 0.6em 1em;
margin-bottom: 1em;
background-color: rgba( 31, 16, 48, 0.6 );
border: 1px solid var( --astral-line );
border-radius: 8px;
word-spacing: 0.4em;
}
.arcana-home-rarities-label {
color: var( --gold-deep );
font-size: 0.75em;
font-weight: bold;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-right: 0.6em;
word-spacing: normal;
}
.arcana-home-contribute {
padding: 0.8em 1em;
margin-bottom: 0.8em;
border-left: 3px solid var( --gold-deep );
background: rgba( 217, 164, 65, 0.06 );
border-radius: 0 6px 6px 0;
}
.arcana-home-footnote {
font-size: 0.8em;
color: var( --gold-muted );
text-align: center;
}
/* --- small screens ------------------------------------------------------------------ */
@media screen and ( max-width: 720px ) {
.arcana-infobox {
float: none !important;
width: 100% !important;
margin: 0 0 1em !important;
}
.mw-body-content table.wikitable:not( .arcana-infobox ) {
display: block;
overflow-x: auto;
}
.arcana-forge {
display: flex;
flex-wrap: wrap;
}
.arcana-home-hero {
flex-direction: column;
text-align: center;
}
.arcana-home-title {
font-size: 1.7em;
}
}