MediaWiki:Common.css: Difference between revisions
m adding new definitions for future changes to the wiki design. |
m Add sitewide dark theme (Vector legacy) v1 + Fleet News article styling |
||
| Line 204: | Line 204: | ||
} | } | ||
} | } | ||
/* ============================================================ | |||
SITEWIDE DARK THEME (Vector legacy) — v1 | |||
Palette matches the Main Page card (black / gold / red). | |||
============================================================ */ | |||
:root { | |||
--d-bg:#0B0B0D; --d-panel:#141416; --d-panel2:#1c1c20; | |||
--d-text:#E9E6E0; --d-muted:#9A9792; | |||
--d-gold:#F5BD3F; --d-gold2:#F4A345; --d-red:#BE2F24; | |||
--d-border:#2A2A2C; --d-link:#E7B84B; --d-ext:#7FB2D6; | |||
} | |||
html, body { background: var(--d-bg); color: var(--d-text); } | |||
/* Vector legacy light-gradient layers */ | |||
#mw-page-base { background: var(--d-bg) !important; background-image: none !important; } | |||
#mw-head-base { background: var(--d-bg) !important; } | |||
/* Content area */ | |||
.mw-body, #content, #bodyContent, #mw-content-text { background: var(--d-panel); color: var(--d-text); } | |||
.mw-body { border: 1px solid var(--d-border); } | |||
.mw-body-content { color: var(--d-text); } | |||
/* Links */ | |||
.mw-body a, #mw-panel a, #p-personal a, .mw-body a:visited, #footer a { color: var(--d-link); } | |||
.mw-body a.new, a.new { color: var(--d-red) !important; } | |||
.mw-body a.external, a.external { color: var(--d-ext); } | |||
/* Headings */ | |||
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, | |||
#firstHeading, .firstHeading { color: var(--d-gold); } | |||
.mw-body h1, .mw-body h2, #firstHeading, .firstHeading { border-bottom: 1px solid var(--d-border); } | |||
/* Header / tabs / personal tools (Vector legacy) */ | |||
#mw-head, #mw-head-base { color: var(--d-text); } | |||
.vectorTabs li, .vectorMenu .menu { background: var(--d-panel2); } | |||
.vectorTabs li a, .vectorTabs li a span, .vectorMenu h3 span { color: var(--d-muted) !important; } | |||
.vectorTabs li.selected { background: var(--d-panel); } | |||
.vectorTabs li.selected a, .vectorTabs li.selected a span { color: var(--d-gold) !important; } | |||
#p-personal ul li a { color: var(--d-link); } | |||
/* Sidebar */ | |||
#mw-panel .portal h3 { color: var(--d-muted); } | |||
#mw-panel .portal .body ul li a { color: var(--d-link); } | |||
/* Search */ | |||
#simpleSearch, #searchInput { background: var(--d-panel2); color: var(--d-text); border: 1px solid var(--d-border); } | |||
/* Tables */ | |||
.wikitable { background: var(--d-panel); color: var(--d-text); border-color: var(--d-border); } | |||
.wikitable > * > tr > th, .wikitable > tr > th { background: var(--d-panel2); color: var(--d-gold); border-color: var(--d-border); } | |||
.wikitable > * > tr > td, .wikitable > tr > td { border-color: var(--d-border); } | |||
/* TOC, thumbs, code, catlinks, messageboxes */ | |||
.toc, #toc, .thumbinner, .catlinks, pre, code, .mw-code, | |||
.mw-message-box, .warningbox, .errorbox, .successbox { | |||
background: var(--d-panel2); color: var(--d-text); border-color: var(--d-border); | |||
} | |||
.toc a, #toc a, .catlinks a { color: var(--d-link); } | |||
.thumbcaption, .catlinks { color: var(--d-muted); } | |||
/* Edit form */ | |||
textarea, .mw-editfont-monospace { background:#101012 !important; color:var(--d-text) !important; border-color:var(--d-border) !important; } | |||
input[type=text], input[type=search], input[type=password], select { background: var(--d-panel2); color: var(--d-text); border: 1px solid var(--d-border); } | |||
.mw-ui-button, input[type=submit], button { background: var(--d-panel2); color: var(--d-text); border: 1px solid var(--d-border); } | |||
/* Footer */ | |||
#footer { background: var(--d-bg); color: var(--d-muted); } | |||
hr { border: 0; border-top: 1px solid var(--d-border); } | |||
/* ===== Fleet News article pages ===== */ | |||
body:has(.tf-newspage) h1#firstHeading, body:has(.tf-newspage) h1.firstHeading { display: none; } | |||
.tf-newspage { | |||
background:#0B0B0D; color:#E9E6E0; border:1px solid var(--d-border); | |||
border-radius:12px; overflow:hidden; position:relative; max-width:860px; margin:8px auto; | |||
} | |||
.tf-newspage a, .tf-newspage a:visited { color:var(--d-gold); } | |||
.tf-newspage .tf-np-flash { position:absolute; top:0; right:0; width:70px; height:40px; background:var(--d-red); } | |||
.tf-newspage .tf-np-head { padding:34px 42px 22px; border-bottom:3px solid var(--d-gold); } | |||
.tf-newspage .tf-np-kicker { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--d-red); margin-bottom:12px; } | |||
.tf-newspage .tf-np-title { font-size:28px; font-weight:600; color:var(--d-gold); line-height:1.22; } | |||
.tf-newspage .tf-np-meta { font-size:13px; color:var(--d-muted); margin-top:12px; } | |||
.tf-newspage .tf-np-body { padding:24px 42px 12px; font-size:15px; line-height:1.7; color:var(--d-text); } | |||
.tf-newspage .tf-np-body p { margin:0 0 14px; } | |||
.tf-newspage .tf-np-body b, .tf-newspage .tf-np-body strong { color:var(--d-gold2); } | |||
.tf-newspage .tf-np-foot { padding:16px 42px 22px; border-top:1px solid var(--d-border); } | |||
.tf-newspage .tf-np-foot a, .tf-newspage .tf-np-foot a:visited { color:var(--d-muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; } | |||
@media (max-width:700px){ .tf-newspage .tf-np-head,.tf-newspage .tf-np-body,.tf-newspage .tf-np-foot{padding-left:22px;padding-right:22px;} .tf-newspage .tf-np-title{font-size:22px;} } | |||