MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1,229: | Line 1,229: | ||
flex-direction: column !important; | flex-direction: column !important; | ||
} | } | ||
} | |||
/* === Doom floating buttons (front page) === */ | |||
/* Base float animation */ | |||
@keyframes doomFloat { | |||
0% { transform: translateY(0); } | |||
50% { transform: translateY(-6px); } | |||
100% { transform: translateY(0); } | |||
} | |||
/* Apply to main-page button images only */ | |||
.page-Main_Page img[alt="Add a Relic"], | |||
.page-Main_Page img[alt="Random Relic"], | |||
.page-Main_Page img[alt="How to Contribute"] { | |||
animation: doomFloat 4.5s ease-in-out infinite; | |||
} | |||
/* Slight desync so they don't move together */ | |||
.page-Main_Page img[alt="Random Relic"] { | |||
animation-delay: 1.2s; | |||
} | |||
.page-Main_Page img[alt="How to Contribute"] { | |||
animation-delay: 2.4s; | |||
} | } | ||
Revision as of 20:04, 25 December 2025
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@400;700&display=swap');
/* Vector 2022: hide the wordmark (site title) and tagline next to the logo */
.mw-logo-wordmark,
.mw-logo-tagline,
.mw-wiki-title,
.mw-logo-text {
display: none !important;
}
/* --- BIG LOGO: Vector 2022 --- */
/* 1) Set how tall you want the header area */
.vector-header {
min-height: 160px !important; /* adjust */
}
/* 2) Let the logo block use that height */
.vector-header-start,
.mw-logo {
height: 160px !important; /* match the header height */
display: flex !important;
align-items: center !important;
}
/* 3) Kill Vector's built-in logo caps */
.mw-logo-icon,
.mw-logo-icon img,
.mw-logo img {
max-height: none !important;
height: 190px !important; /* THIS is what makes it bigger */
width: auto !important;
}
/* Move logo left + down (Vector 2022) */
.mw-logo {
margin-left: -18px !important; /* left */
margin-top: 50px !important; /* down */
}
body {
background-image: url("https://doomrelics.com/images/bg.png");
background-size: cover;
background-position: center top;
background-attachment: fixed;
}
/* Main content background transparency */
.mw-page-container,
.mw-content-container,
.vector-body {
background: rgba(0, 0, 0, 0) !important; /* adjust opacity */
}
/* Glass-style header background */
.vector-header {
background-color: rgba(0, 0, 0, 0) !important;
backdrop-filter: blur(4px);
}
/* Ensure background image still shows */
.vector-header {
background-blend-mode: overlay;
}
/* =========================
DOOM EMBERS (SEAMLESS + FADE)
Background-only, behind content
========================= */
body { position: relative; }
/* Ember layers */
body::before,
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
mix-blend-mode: screen; /* makes embers feel like light */
-webkit-mask-image: linear-gradient(to top, transparent 0%, black 18%, black 100%);
mask-image: linear-gradient(to top, transparent 0%, black 18%, black 100%);
}
/* Layer 1: small sharp embers */
body::before {
opacity: 0.55;
background-repeat: repeat;
background-image:
radial-gradient(circle, rgba(255,120,0,0.85) 0 1px, transparent 2px),
radial-gradient(circle, rgba(255,60,0,0.70) 0 1px, transparent 2px),
radial-gradient(circle, rgba(255,200,120,0.55) 0 1px, transparent 2px);
background-size: 240px 240px, 340px 340px, 520px 520px;
background-position: 10% 100%, 60% 120%, 90% 80%;
filter: blur(0.25px);
animation: embersScroll1 10s linear infinite;
}
/* Layer 2: larger soft embers */
body::after {
opacity: 0.30;
background-repeat: repeat;
background-image:
radial-gradient(circle, rgba(255,120,0,0.35) 0 2px, transparent 7px),
radial-gradient(circle, rgba(255,80,0,0.32) 0 2px, transparent 8px),
radial-gradient(circle, rgba(255,220,150,0.22) 0 2px, transparent 9px);
background-size: 560px 560px, 820px 820px, 1040px 1040px;
background-position: 20% 120%, 70% 90%, 40% 140%;
filter: blur(0.8px);
animation: embersScroll2 18s linear infinite;
}
/* Keep wiki content above embers */
.vector-header,
.mw-page-container,
#content,
.mw-body {
position: relative;
z-index: 1;
}
/* Animate the tile upward smoothly (no snap-glitch) */
@keyframes embersScroll1 {
from { background-position: 10% 120%, 60% 140%, 90% 110%; }
to { background-position: -10% -120%, 55% -140%, 85% -110%; }
}
@keyframes embersScroll2 {
from { background-position: 20% 140%, 70% 120%, 40% 160%; }
to { background-position: 30% -180%, 80% -160%, 50% -220%; }
}
/* DOOM STYLE for Vector 2022 sidebar portlets (Tools / Appearance) */
#mw-panel .mw-portlet,
.vector-sidebar-container .mw-portlet,
.vector-column-start .mw-portlet,
#mw-panel .vector-menu-portal,
.vector-sidebar-container .vector-menu-portal {
background: rgba(0,0,0,0.75) !important;
border: 1px solid rgba(255,120,0,0.30) !important;
border-radius: 16px !important;
padding: 0 !important;
overflow: hidden !important;
box-shadow: 0 10px 26px rgba(0,0,0,0.55), 0 0 18px rgba(255,120,0,0.12) !important;
backdrop-filter: blur(4px);
}
/* Headings (“Tools”, “Appearance”) */
#mw-panel .mw-portlet h3,
.vector-sidebar-container .mw-portlet h3,
#mw-panel .vector-menu-heading,
.vector-sidebar-container .vector-menu-heading {
margin: 0 !important;
padding: 12px 12px !important;
background: linear-gradient(to bottom, rgba(255,120,0,0.18), rgba(0,0,0,0)) !important;
border-bottom: 1px solid rgba(255,120,0,0.22) !important;
color: #f2f2f2 !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 0.7px !important;
}
/* Content area inside portlets */
#mw-panel .mw-portlet .vector-menu-content,
#mw-panel .mw-portlet .mw-portlet-body,
.vector-sidebar-container .mw-portlet .vector-menu-content,
.vector-sidebar-container .mw-portlet .mw-portlet-body {
padding: 10px 10px 12px !important;
}
/* Links inside */
#mw-panel .mw-portlet a,
.vector-sidebar-container .mw-portlet a {
display: block !important;
padding: 9px 10px !important;
border-radius: 12px !important;
color: #eaeaea !important;
text-decoration: none !important;
}
#mw-panel .mw-portlet a:hover,
.vector-sidebar-container .mw-portlet a:hover {
background: rgba(255,120,0,0.10) !important;
box-shadow: inset 0 0 0 1px rgba(255,120,0,0.28) !important;
color: #ffd0a0 !important;
}
/************ DOOM STYLE: TOOLS BOX ONLY ************/
/* Tools box container */
#p-tb {
background: rgba(0,0,0,0.78) !important;
border: 1px solid rgba(255,120,0,0.32) !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 10px 26px rgba(0,0,0,0.55), 0 0 18px rgba(255,120,0,0.12) !important;
backdrop-filter: blur(4px);
}
/* Tools header (“Tools” + hide) */
#p-tb > h3,
#p-tb .vector-menu-heading {
margin: 0 !important;
padding: 12px 12px !important;
background: linear-gradient(to bottom, rgba(255,120,0,0.18), rgba(0,0,0,0)) !important;
border-bottom: 1px solid rgba(255,120,0,0.22) !important;
color: #f2f2f2 !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 0.7px !important;
}
/* Tools inner content */
#p-tb .vector-menu-content,
#p-tb .mw-portlet-body {
padding: 10px 10px 12px !important;
}
/* Section dividers inside Tools */
#p-tb hr {
border: 0 !important;
border-top: 1px solid rgba(255,120,0,0.18) !important;
margin: 10px 6px !important;
}
/* Links inside Tools */
#p-tb a {
display: block !important;
padding: 9px 10px !important;
border-radius: 12px !important;
color: #eaeaea !important;
text-decoration: none !important;
}
#p-tb a:hover {
background: rgba(255,120,0,0.10) !important;
box-shadow: inset 0 0 0 1px rgba(255,120,0,0.28) !important;
color: #ffd0a0 !important;
text-decoration: none !important;
}
/************ DOOM STYLE: APPEARANCE BOX (EXACT ID) ************/
/* Appearance box container */
#vector-appearance {
background: rgba(0,0,0,0.78) !important;
border: 1px solid rgba(255,120,0,0.32) !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow:
0 10px 26px rgba(0,0,0,0.55),
0 0 18px rgba(255,120,0,0.12) !important;
backdrop-filter: blur(4px);
}
/* Header row (“Appearance” + hide) */
#vector-appearance > h3,
#vector-appearance .vector-menu-heading {
margin: 0 !important;
padding: 12px 12px !important;
background: linear-gradient(
to bottom,
rgba(255,120,0,0.18),
rgba(0,0,0,0)
) !important;
border-bottom: 1px solid rgba(255,120,0,0.22) !important;
color: #f2f2f2 !important;
font-weight: 900 !important;
letter-spacing: 0.7px !important;
text-transform: uppercase !important;
}
/* Inner content */
#vector-appearance .vector-menu-content,
#vector-appearance .mw-portlet-body {
padding: 10px 10px 12px !important;
}
/* Section labels (Text / Width) */
#vector-appearance h4 {
color: rgba(255,180,120,0.95) !important;
font-weight: 800 !important;
letter-spacing: 0.4px !important;
text-transform: uppercase !important;
margin: 10px 6px 6px !important;
}
/* Dividers */
#vector-appearance hr {
border: 0 !important;
border-top: 1px solid rgba(255,120,0,0.18) !important;
margin: 10px 6px !important;
}
/* Radio buttons */
#vector-appearance input[type="radio"] {
accent-color: rgb(255,120,0) !important;
}
/* Make each option row feel clickable */
#vector-appearance label,
#vector-appearance .oo-ui-fieldLayout {
display: block !important;
padding: 7px 10px !important;
border-radius: 12px !important;
cursor: pointer;
}
/* Hover glow */
#vector-appearance label:hover,
#vector-appearance .oo-ui-fieldLayout:hover {
background: rgba(255,120,0,0.10) !important;
box-shadow: inset 0 0 0 1px rgba(255,120,0,0.28) !important;
}
/* Checked radio emphasis */
#vector-appearance input[type="radio"]:checked + label {
background: rgba(255,120,0,0.16) !important;
box-shadow: inset 0 0 0 1px rgba(255,120,0,0.35) !important;
}
/************ APPEARANCE RADIO ALIGNMENT FIX (robust) ************/
/* Reset anything we did to labels/rows that could break OOUI */
#vector-appearance label,
#vector-appearance .oo-ui-fieldLayout,
#vector-appearance .oo-ui-fieldLayout-body {
display: block !important;
}
/* Make each option row have a consistent left gutter for the radio */
#vector-appearance .oo-ui-fieldLayout {
position: relative !important;
padding: 8px 10px 8px 42px !important; /* LEFT SPACE FOR RADIO */
border-radius: 12px !important;
}
/* Put the actual radio control in that left gutter */
#vector-appearance .oo-ui-inputWidget,
#vector-appearance .oo-ui-radioInputWidget,
#vector-appearance input[type="radio"] {
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
}
/* Text always starts after the radio */
#vector-appearance .oo-ui-labelElement-label,
#vector-appearance label {
margin: 0 !important;
line-height: 1.2 !important;
}
/* Hover/active row styling (on the wrapper, not the label) */
#vector-appearance .oo-ui-fieldLayout:hover {
background: rgba(255,120,0,0.10) !important;
box-shadow: inset 0 0 0 1px rgba(255,120,0,0.28) !important;
}
/* Optional: make the section headings not crowd the first option */
#vector-appearance h4 {
margin-bottom: 10px !important;
}
/******** FINAL TEXT NUDGE (Appearance radios) ********/
/* Move label text right + slightly up */
#vector-appearance .oo-ui-labelElement-label,
#vector-appearance label {
position: relative !important;
left: 20px; /* move text right */
top: -5px; /* move text up */
line-height: 1.15 !important;
}
/* === CLICK FIX: ensure nothing overlays header/user links === */
/* If you have a header overlay, it must not capture clicks */
.vector-header::before,
.vector-sticky-header::before {
pointer-events: none !important;
}
/* Force ember layers behind everything (even if z-index got changed elsewhere) */
body::before,
body::after {
pointer-events: none !important;
z-index: -1 !important;
}
/* Put header + user links above page containers */
.vector-header,
.vector-sticky-header,
.vector-user-links,
.vector-user-links-dropdown,
.vector-user-menu,
#p-personal,
#pt-userpage,
#pt-logout,
#pt-login {
position: relative !important;
z-index: 50 !important;
}
/* Prevent page container from covering the header */
.mw-page-container,
.mw-page,
.mw-page-container-inner,
#content {
position: relative !important;
z-index: 1 !important;
}
html {
color-scheme: dark !important;
}
html[data-mw-skin-theme="light"] {
--background-color-base: #000 !important;
--background-color-neutral: #000 !important;
--background-color-interactive: #111 !important;
--color-base: #e7e7e7 !important;
}
/************ FORCE DARK (Vector 2022) — KILL REMAINING WHITE ************/
/* Default browser form controls to dark */
html { color-scheme: dark !important; }
/* Force the skin theme variable surfaces dark even if Vector says "light" */
html[data-mw-skin-theme="light"],
html:not([data-mw-skin-theme]) {
--background-color-base: #000 !important;
--background-color-neutral: #0a0a0a !important;
--background-color-interactive: #111 !important;
--background-color-progressive: #111 !important;
--background-color-subtle: #0b0b0b !important;
--color-base: #e7e7e7 !important;
--color-emphasized: #fff !important;
--border-color-base: rgba(255,120,0,0.22) !important;
--border-color-subtle: rgba(255,120,0,0.16) !important;
}
/* Hard override common white containers */
html[data-mw-skin-theme="light"] body,
html:not([data-mw-skin-theme]) body,
.vector-header,
.vector-sticky-header,
.mw-page-container,
.mw-content-container,
.vector-body,
.vector-sidebar-container,
.vector-toc,
.mw-panel,
.vector-page-tools,
.vector-dropdown-content,
.vector-menu-portal,
.vector-menu-content,
.mw-portlet,
.mw-body,
#content {
background-color: rgba(0,0,0,0) !important;
color: #e7e7e7 !important;
}
/* Links stay readable */
a { color: #ffb36b; }
a:hover { color: #ffd2a2; }
/* Inputs / search boxes */
input, textarea, select {
background: rgba(0,0,0,0.65) !important;
color: #e7e7e7 !important;
border: 1px solid rgba(255,120,0,0.22) !important;
}
/******** HIDE APPEARANCE MENU FOR LOGGED-OUT USERS ********/
/* Appearance portlet (Vector 2022) */
.mw-anon #vector-appearance {
display: none !important;
}
/******** FORCE-HIDE APPEARANCE FOR LOGGED-OUT USERS ********/
/* Body class for anonymous users */
.mw-anon {
/* Hide Appearance portlet by ID (when present) */
#vector-appearance,
/* Hide Appearance menu portal (Vector 2022 anon layout) */
.vector-appearance,
/* Hide any menu explicitly labeled Appearance */
.vector-menu-portal[aria-labelledby*="appearance"],
.vector-menu-portal[aria-label*="Appearance"],
nav[aria-labelledby*="appearance"],
nav[aria-label*="Appearance"] {
display: none !important;
}
}
/******** HIDE APPEARANCE (PINNED CONTAINER) FOR LOGGED-OUT USERS ********/
.mw-anon #vector-appearance-pinned-container {
display: none !important;
}
/******** HARD-KILL APPEARANCE UI FOR LOGGED-OUT USERS ********/
/* Any Appearance container by ID */
.mw-anon #vector-appearance,
.mw-anon #vector-appearance-pinned-container,
/* Any Appearance container by class */
.mw-anon .vector-appearance,
.mw-anon .vector-appearance-pinned-container,
/* Any Vector menu explicitly labeled Appearance */
.mw-anon nav[aria-label="Appearance"],
.mw-anon nav[aria-labelledby*="appearance"],
.mw-anon .vector-menu-portal[aria-label="Appearance"],
.mw-anon .vector-menu-portal[aria-labelledby*="appearance"],
/* Nuclear option: any portlet whose heading text is Appearance */
.mw-anon .mw-portlet:has(.vector-menu-heading:has-text("Appearance")) {
display: none !important;
}
/******** HIDE APPEARANCE LANDMARK (LOGGED OUT ONLY) ********/
.mw-anon nav.vector-appearance-landmark[aria-label="Appearance"] {
display: none !important;
}
/******** HIDE BY DEFAULT, SHOW ONLY WHEN LOGGED IN ********/
nav.vector-appearance-landmark[aria-label="Appearance"],
#vector-appearance-pinned-container {
display: none !important;
}
/* Logged-in pages usually have #pt-userpage */
#pt-userpage ~ * nav.vector-appearance-landmark[aria-label="Appearance"],
#pt-userpage ~ * #vector-appearance-pinned-container {
display: block !important;
}
/******** REMOVE LEFTOVER BAR AFTER HIDING APPEARANCE (LOGGED OUT) ********/
/* When logged out (no userpage link), remove the pinned/sticky container styling */
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container,
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container-inner {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* If it’s still reserving height, collapse it */
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
/******** REMOVE LEFTOVER GRADIENT BAR (LOGGED OUT) ********/
/* Logged out detection (no user page link) */
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container,
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container-inner,
body:not(:has(#pt-userpage)) nav.vector-page-tools-landmark,
body:not(:has(#pt-userpage)) nav.vector-page-tools-landmark > * {
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: 0 !important;
filter: none !important;
}
/* Collapse the bar height if it’s just an empty pinned strip */
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
height: auto !important;
}
/* If a pseudo-element is drawing the gradient */
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container::before,
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container::after,
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container-inner::before,
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container-inner::after {
content: none !important;
display: none !important;
}
/******** FINAL SEARCH CENTER + SIZE FIX ********/
/* Center relative to header */
.vector-header,
.vector-sticky-header {
position: relative !important;
}
/* Center the search form itself */
#searchform {
position: absolute !important;
left: 50% !important;
transform: translateX(-75%) !important;
/* CONTROL SIZE */
width: 520px !important; /* <- normal desktop size */
max-width: 80vw !important; /* responsive on small screens */
margin: 0 !important;
}
/* Prevent Codex from stretching inner elements */
#searchform .cdx-search-input,
#searchform .cdx-typeahead-search__form,
#searchform .cdx-text-input {
width: 100% !important;
flex: 0 0 auto !important;
}
/* Ensure right-side buttons stay put */
.vector-header .vector-header-end,
.vector-sticky-header .vector-header-end,
.vector-user-links,
#p-personal {
position: relative !important;
z-index: 10 !important;
}
/******** SEARCH BUTTON DOOM POLISH ********/
/* Search button */
#searchform button,
#searchform .cdx-button,
#searchform .searchButton {
background: rgba(0,0,0,0.85) !important;
color: #f2f2f2 !important;
border: 1px solid rgba(255,120,0,0.30) !important;
border-left: 1px solid rgba(255,120,0,0.45) !important; /* divider emphasis */
border-radius: 0 !important;
font-weight: 700 !important;
letter-spacing: 0.4px !important;
}
/* Hover */
#searchform button:hover,
#searchform .cdx-button:hover,
#searchform .searchButton:hover {
background: rgba(255,120,0,0.12) !important;
border-color: rgba(255,120,0,0.45) !important;
}
/* Active / pressed */
#searchform button:active,
#searchform .cdx-button:active {
background: rgba(255,120,0,0.18) !important;
}
/* Doom Archives main page icon grid */
.doom-archive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 24px;
margin: 30px 0;
text-align: center;
}
.doom-archive-icon img {
width: 100%;
max-width: 220px;
border: 2px solid #3a0000;
background: #000;
padding: 10px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.doom-archive-icon img:hover {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(180, 0, 0, 0.8);
}
/* ===== Vector 2022 sidebar icons (pinned main menu) ===== */
/* Target BOTH legacy panel and Vector 2022 main menu containers */
#mw-panel .vector-menu-content a,
#vector-main-menu-pinned-container .vector-menu-content a,
nav.vector-main-menu .vector-menu-content a,
nav.vector-main-menu a {
padding-left: 30px;
background-repeat: no-repeat;
background-position: 8px center;
background-size: 16px 16px;
}
/* Use Special:Redirect/file so MediaWiki serves the right file URL */
#mw-panel a[href*="Category:Doom_(1993)"],
#vector-main-menu-pinned-container a[href*="Category:Doom_(1993)"],
nav.vector-main-menu a[href*="Category:Doom_(1993)"] {
background-image: url(/index.php?title=Special:Redirect/file/Doom1993.png);
}
#mw-panel a[href*="Category:Doom_II"],
#vector-main-menu-pinned-container a[href*="Category:Doom_II"],
nav.vector-main-menu a[href*="Category:Doom_II"] {
background-image: url(/index.php?title=Special:Redirect/file/Doom2.png);
}
#mw-panel a[href*="Category:Doom_3"],
#vector-main-menu-pinned-container a[href*="Category:Doom_3"],
nav.vector-main-menu a[href*="Category:Doom_3"] {
background-image: url(/index.php?title=Special:Redirect/file/Doom3.png);
}
#mw-panel a[href*="Category:Doom_(2016)"],
#vector-main-menu-pinned-container a[href*="Category:Doom_(2016)"],
nav.vector-main-menu a[href*="Category:Doom_(2016)"] {
background-image: url(/index.php?title=Special:Redirect/file/Doom2016.png);
}
#mw-panel a[href*="Category:Doom_Eternal"],
#vector-main-menu-pinned-container a[href*="Category:Doom_Eternal"],
nav.vector-main-menu a[href*="Category:Doom_Eternal"] {
background-image: url(/index.php?title=Special:Redirect/file/DoomEternal.png);
}
#mw-panel a[href*="Category:Doom_The_Dark_Ages"],
#vector-main-menu-pinned-container a[href*="Category:Doom_The_Dark_Ages"],
nav.vector-main-menu a[href*="Category:Doom_The_Dark_Ages"] {
background-image: url(/index.php?title=Special:Redirect/file/DoomDarkAges.png);
}
#mw-panel a[href*="Category:Doom_Movies"],
#vector-main-menu-pinned-container a[href*="Category:Doom_Movies"],
nav.vector-main-menu a[href*="Category:Doom_Movies"] {
background-image: url(/index.php?title=Special:Redirect/file/DoomMovies.png);
}
#mw-panel a[href*="Category:Doom_Other"],
#vector-main-menu-pinned-container a[href*="Category:Doom_Other"],
nav.vector-main-menu a[href*="Category:Doom_Other"] {
background-image: url(/index.php?title=Special:Redirect/file/DoomOther.png);
}
/* ===== Doom sidebar icons: bigger + proper spacing ===== */
#mw-panel .vector-menu-content a,
#vector-main-menu-pinned-container .vector-menu-content a,
nav.vector-main-menu .vector-menu-content a,
nav.vector-main-menu a{
background-size: 32px auto !important; /* 2x size */
background-position: 10px center !important;
padding-left: 52px !important; /* shift text right */
line-height: 34px !important; /* prevents overlap */
min-height: 34px !important;
display: block; /* ensures padding applies cleanly */
}
/* ===== Doom sidebar icons (robust): use ::before so hover can't wipe them ===== */
/* 1) Base styling for sidebar links: make room for an icon */
#mw-panel .vector-menu-content a,
#vector-main-menu-pinned-container .vector-menu-content a,
nav.vector-main-menu .vector-menu-content a,
nav.vector-main-menu a {
position: relative !important;
padding-left: 56px !important; /* space for icon */
line-height: 34px !important;
min-height: 34px !important;
display: block !important;
/* IMPORTANT: stop using background-image on the link itself */
background-image: none !important;
}
/* 2) The icon element */
#mw-panel .vector-menu-content a::before,
#vector-main-menu-pinned-container .vector-menu-content a::before,
nav.vector-main-menu .vector-menu-content a::before,
nav.vector-main-menu a::before {
content: "" !important;
position: absolute !important;
left: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 32px !important;
height: 32px !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important; /* keeps aspect ratio, no stretching */
opacity: 1 !important;
pointer-events: none !important;
}
/* 3) Assign the icon per category link (uses the same matching you already had) */
#mw-panel a[href*="Category:Doom_(1993)"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_(1993)"]::before,
nav.vector-main-menu a[href*="Category:Doom_(1993)"]::before {
background-image: url(/index.php?title=Special:Redirect/file/Doom1993.png) !important;
}
#mw-panel a[href*="Category:Doom_II"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_II"]::before,
nav.vector-main-menu a[href*="Category:Doom_II"]::before {
background-image: url(/index.php?title=Special:Redirect/file/Doom2.png) !important;
}
#mw-panel a[href*="Category:Doom_3"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_3"]::before,
nav.vector-main-menu a[href*="Category:Doom_3"]::before {
background-image: url(/index.php?title=Special:Redirect/file/Doom3.png) !important;
}
#mw-panel a[href*="Category:Doom_(2016)"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_(2016)"]::before,
nav.vector-main-menu a[href*="Category:Doom_(2016)"]::before {
background-image: url(/index.php?title=Special:Redirect/file/Doom2016.png) !important;
}
#mw-panel a[href*="Category:Doom_Eternal"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_Eternal"]::before,
nav.vector-main-menu a[href*="Category:Doom_Eternal"]::before {
background-image: url(/index.php?title=Special:Redirect/file/DoomEternal.png) !important;
}
#mw-panel a[href*="Category:Doom_The_Dark_Ages"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_The_Dark_Ages"]::before,
nav.vector-main-menu a[href*="Category:Doom_The_Dark_Ages"]::before {
background-image: url(/index.php?title=Special:Redirect/file/DoomDarkAges.png) !important;
}
#mw-panel a[href*="Category:Doom_Movies"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_Movies"]::before,
nav.vector-main-menu a[href*="Category:Doom_Movies"]::before {
background-image: url(/index.php?title=Special:Redirect/file/DoomMovies.png) !important;
}
#mw-panel a[href*="Category:Doom_Other"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_Other"]::before,
nav.vector-main-menu a[href*="Category:Doom_Other"]::before {
background-image: url(/index.php?title=Special:Redirect/file/Other.png) !important;
}
/* ===== Vector 2022: remove the main-menu header controls (Hide/Pin/etc.) ===== */
/* Pinned menu header action buttons */
#vector-main-menu-pinned-container .vector-pinnable-header-toggle,
#vector-main-menu-pinned-container .vector-pinnable-header-buttons,
#vector-main-menu-pinned-container .vector-pinnable-header-actions,
#vector-main-menu-pinned-container .vector-pinnable-header,
#vector-main-menu-pinned-container .vector-menu-heading-actions,
#vector-main-menu-pinned-container .vector-menu-heading {
display: none !important;
}
/* Also cover nav variant */
nav.vector-main-menu .vector-pinnable-header-toggle,
nav.vector-main-menu .vector-pinnable-header-buttons,
nav.vector-main-menu .vector-pinnable-header-actions,
nav.vector-main-menu .vector-pinnable-header,
nav.vector-main-menu .vector-menu-heading-actions,
nav.vector-main-menu .vector-menu-heading {
display: none !important;
}
nav.vector-main-menu-landmark{
background: rgba(0,0,0,0.85) !important;
border: 1px solid rgba(255,120,0,0.30) !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 0 18px rgba(255,120,0,0.18) !important;
}
/* ===== FINAL: keep only OUTER frame, kill any INNER frame lines ===== */
/* Keep your OUTER frame exactly here */
nav.vector-main-menu-landmark {
background: rgba(0,0,0,0.85) !important;
border: 1px solid rgba(255,120,0,0.30) !important;
border-radius: 16px !important;
overflow: hidden !important;
}
/* Kill ALL inner borders/shadows/gradients that can look like a second outline */
nav.vector-main-menu-landmark :is(
#vector-main-menu-pinned-container,
nav.vector-main-menu,
.vector-menu-portal,
.vector-menu-content,
.mw-portlet,
.vector-pinnable-header,
.vector-pinnable-header-buttons,
.vector-pinnable-header-actions,
.vector-menu-heading,
.vector-menu-heading-actions
),
nav.vector-main-menu-landmark :is(
#vector-main-menu-pinned-container *,
nav.vector-main-menu *,
.vector-menu-portal *,
.vector-menu-content *,
.mw-portlet *
) {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background-image: none !important; /* <-- key for "inner line" gradients */
}
/* Kill pseudo-elements that often draw inner frames */
nav.vector-main-menu-landmark :is(
#vector-main-menu-pinned-container,
nav.vector-main-menu,
.vector-menu-portal,
.vector-menu-content,
.mw-portlet,
.vector-menu-heading
)::before,
nav.vector-main-menu-landmark :is(
#vector-main-menu-pinned-container,
nav.vector-main-menu,
.vector-menu-portal,
.vector-menu-content,
.mw-portlet,
.vector-menu-heading
)::after {
content: none !important;
display: none !important;
box-shadow: none !important;
background: none !important;
}
/* Make the orange border wrapper match the sidebar black */
nav.vector-main-menu-landmark {
background-color: rgba(0,0,0,0.85) !important; /* same Doom black */
}
/* ===== CLASSIC DOOM (1993) TYPOGRAPHY ===== */
/* Body text — gritty but readable */
body,
.mw-body,
.mw-parser-output,
.vector-body {
font-family: 'Roboto Condensed', Arial, sans-serif !important;
letter-spacing: 0.015em;
}
/* Page titles & section headers */
h1, h2, h3, h4, h5, h6,
.mw-first-heading {
font-family: 'Metal Mania', Arial, sans-serif !important;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #f5c542; /* classic Doom yellow */
}
/* Sidebar + menu links */
nav.vector-main-menu-landmark,
.vector-menu-content a,
#mw-panel {
font-family: 'Roboto Condensed', Arial, sans-serif !important;
letter-spacing: 0.05em;
}
/* Sidebar category emphasis */
.vector-menu-content a {
font-weight: 700;
}
h1, h2, h3, h4, h5, h6,
.mw-first-heading {
font-family: 'Bebas Neue', Arial, sans-serif !important;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #f5c542;
}
/* ===== REMOVE CONTENTS / TOC EVERYWHERE ===== */
/* Standard table of contents */
#toc,
.toc,
.mw-table-of-contents {
display: none !important;
}
/* Vector 2022 sticky Contents panel */
.vector-toc,
.vector-toc-pinned,
.vector-toc-pinned-container,
#vector-toc-pinned-container {
display: none !important;
}
/* Remove the toggle button / label */
.vector-toc-toggle,
.vector-toc-toggle-button {
display: none !important;
}
/* Prevent layout gap where TOC used to be */
.mw-body-content {
margin-right: 0 !important;
}
/* ===== FORCE Vector 2022 search input text color ===== */
/* Actual typed text */
html body .cdx-text-input__input,
html body .vector-search-box-input,
html body #searchInput {
color: #f5c542 !important; /* Doom yellow */
caret-color: #f5c542 !important; /* Cursor color */
}
/* Placeholder text */
html body .cdx-text-input__input::placeholder,
html body .vector-search-box-input::placeholder,
html body #searchInput::placeholder {
color: rgba(245,197,66,0.65) !important;
}
/* Chrome autofill fix */
html body .cdx-text-input__input:-webkit-autofill,
html body .vector-search-box-input:-webkit-autofill,
html body #searchInput:-webkit-autofill {
-webkit-text-fill-color: #f5c542 !important;
box-shadow: 0 0 0 1000px rgba(0,0,0,0.85) inset !important;
}
/* ===== FORCE Vector 2022 search magnifying glass color ===== */
/* 1) Override Codex icon color variables within the search box */
html body .vector-search-box,
html body .cdx-search-input {
--color-base: #f5c542 !important;
--color-base--hover: #ffd966 !important;
--color-subtle: #f5c542 !important;
--color-subtle--hover: #ffd966 !important;
--color-emphasized: #f5c542 !important;
}
/* 2) Force the actual SVG + PATH to Doom yellow */
html body .vector-search-box svg,
html body .vector-search-box svg * ,
html body .cdx-search-input__icon svg,
html body .cdx-search-input__icon svg * ,
html body .cdx-icon svg,
html body .cdx-icon svg * {
fill: #f5c542 !important;
stroke: #f5c542 !important;
color: #f5c542 !important;
}
/* ===== Doom readability overlay: PAGE CONTENT ===== */
/* Ensure outer containers are transparent */
.mw-body,
.vector-body,
.mw-body-content {
background: transparent !important;
box-shadow: none !important;
}
/* Apply ONE shading layer to article content only */
#mw-content-text {
background: rgba(0, 0, 0, 0.55) !important;
border-radius: 12px;
padding: 18px;
}
/* ===== Doom icon hover effect (Main Page) ===== */
/* Target main page icons only */
.page-Main_Page a img {
transition:
transform 0.18s ease,
filter 0.18s ease;
}
/* Hover effect */
.page-Main_Page a:hover img {
transform: scale(1.06);
filter:
drop-shadow(0 0 6px rgba(245,197,66,0.55))
drop-shadow(0 0 14px rgba(255,120,0,0.35));
}
/* ===== Doom-style STICKY header only (Vector 2022) ===== */
/* Style ONLY the sticky header bar */
.vector-sticky-header .vector-page-titlebar,
.vector-sticky-header .vector-page-titlebar-title {
background: rgba(0,0,0,0.85) !important;
border-bottom: 1px solid rgba(255,120,0,0.35) !important;
box-shadow: 0 6px 18px rgba(0,0,0,0.70) !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
/* Sticky header title text */
.vector-sticky-header .mw-page-title-main,
.vector-sticky-header .vector-page-titlebar .mw-page-title-main {
font-family: 'Bebas Neue', Arial, sans-serif !important;
color: #f5c542 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
font-weight: 700 !important;
font-size: 20px !important;
text-shadow: 0 0 4px rgba(245,197,66,0.35) !important;
}
.relic-card{
max-width:980px;
margin:18px auto;
padding:16px;
border-radius:14px;
border:1px solid rgba(255,120,0,.30);
background:rgba(0,0,0,.55);
}
.relic-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:14px;
padding-bottom:10px;
border-bottom:1px solid rgba(255,120,0,.22);
}
.relic-title{
font-size:20px;
letter-spacing:.12em;
text-transform:uppercase;
}
.relic-chip{
padding:6px 10px;
border-radius:999px;
font-size:12px;
letter-spacing:.14em;
text-transform:uppercase;
border:1px solid rgba(255,120,0,.35);
background:rgba(0,0,0,.35);
}
.relic-body{
display:grid;
grid-template-columns:440px 1fr;
gap:16px;
}
.relic-noimg{
height:240px;
border-radius:12px;
border:1px dashed rgba(255,120,0,.35);
display:flex;
align-items:center;
justify-content:center;
opacity:.85;
}
.relic-row{
display:flex;
justify-content:space-between;
gap:12px;
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(255,120,0,.18);
background:rgba(0,0,0,.35);
margin-bottom:8px;
}
.relic-row .k{
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
opacity:.75;
}
.relic-desc--full{
margin-top:18px;
padding:14px;
border-radius:12px;
border:1px solid rgba(255,120,0,.18);
background:rgba(0,0,0,.35);
}
.relic-desc--full .k{
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
opacity:.75;
margin-bottom:6px;
}
.relic-desc--full .desc{
line-height:1.6;
white-space:pre-wrap;
}
@media (max-width: 860px){
.relic-body{
grid-template-columns: 1fr;
}
}
.doom-divider {
height: 2px;
background: linear-gradient(
to right,
transparent,
rgba(255,120,0,0.45),
transparent
);
margin: 28px 0;
}
}
/* Main page action buttons: left + right */
.doom-main-buttons{
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
max-width: 1100px;
margin: 28px auto;
gap: 24px;
}
.doom-main-buttons .doom-btn{
display: block;
}
/* prevent MediaWiki paragraph wrappers from breaking the row */
.doom-main-buttons p{
margin: 0 !important;
}
/* hover polish */
.doom-main-buttons img{
transition: transform .18s ease, filter .18s ease;
}
.doom-main-buttons a:hover img{
transform: scale(1.05);
filter:
drop-shadow(0 0 6px rgba(245,197,66,0.55))
drop-shadow(0 0 14px rgba(255,120,0,0.35));
}
/* optional mobile stack */
@media (max-width: 700px){
.doom-main-buttons{
flex-direction: column !important;
}
}
/* === Doom floating buttons (front page) === */
/* Base float animation */
@keyframes doomFloat {
0% { transform: translateY(0); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0); }
}
/* Apply to main-page button images only */
.page-Main_Page img[alt="Add a Relic"],
.page-Main_Page img[alt="Random Relic"],
.page-Main_Page img[alt="How to Contribute"] {
animation: doomFloat 4.5s ease-in-out infinite;
}
/* Slight desync so they don't move together */
.page-Main_Page img[alt="Random Relic"] {
animation-delay: 1.2s;
}
.page-Main_Page img[alt="How to Contribute"] {
animation-delay: 2.4s;
}