出自flip the world
MediaWiki:Common.css
注意：在您發布之後，您可能需要清除瀏覽器快取才能看到變更。
- Firefox或Safari：按住Shift時點擊重新整理，或按Ctrl-F5或Ctrl-R（Mac則為⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac則為⌘-Shift-R）
- Edge：按住Ctrl時點擊重新整理，或按Ctrl-F5。
/* ============================================================================
"flip the world" — DARK HUD sci-fi theme
Target skin: Timeless (site default). MediaWiki 1.43.
Loaded from MediaWiki:Common.css, so it applies to every skin and every
namespace; the structural selectors below are Timeless-specific and are
simply inert under other skins.
Palette: bg #0a0f1a / panel #0e1524 / text #c8d6e5
cyan #35e0ff (structure, links, headings)
amber #ffb340 (markers, emphasis, keywords)
mint #7cf6c8 (strings, positive)
No animation, no scanlines: this wiki is meant to be read.
============================================================================ */
:root {
--sf-bg: #0a0f1a;
--sf-bg-deep: #060b14;
--sf-panel: #0e1524;
--sf-panel-2: #111c2e;
--sf-panel-3: #16233a;
--sf-fg: #c8d6e5;
--sf-fg-dim: #8a9cb2;
--sf-fg-faint: #63758c;
--sf-cyan: #35e0ff;
--sf-cyan-2: #7ceaff;
--sf-amber: #ffb340;
--sf-mint: #7cf6c8;
--sf-red: #ff5f6d;
--sf-violet: #c9a6ff;
--sf-line: rgba( 53, 224, 255, 0.22 );
--sf-line-soft: rgba( 53, 224, 255, 0.09 );
--sf-glow: 0 0 8px rgba( 53, 224, 255, 0.3 );
--sf-mono: 'JetBrains Mono', 'SFMono-Regular', 'Menlo', 'Consolas', 'Noto Sans Mono', 'DejaVu Sans Mono', monospace;
--sf-display: 'Eurostile', 'Bahnschrift', 'DIN Alternate', 'Segoe UI Semibold', 'Noto Sans', sans-serif;
}
/* Native widgets, scrollbars and form controls follow the theme. */
html {
color-scheme: dark;
background-color: var(--sf-bg-deep);
}
body {
background-color: var(--sf-bg-deep);
color: var(--sf-fg);
}
::selection {
background: rgba( 53, 224, 255, 0.3 );
color: #fff;
}
/* ---------------------------------------------------------------- Header -- */
#mw-header-container {
background: linear-gradient( 180deg, #0b1322 0%, var(--sf-bg) 100% );
border-bottom: 1px solid var(--sf-line);
}
#mw-header-container.ts-container {
box-shadow: 0 1px 12px rgba( 0, 0, 0, 0.6 );
}
/* Site title, top left. */
#p-logo-text a {
color: var(--sf-cyan);
font-family: var(--sf-display);
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
white-space: nowrap;
text-shadow: var(--sf-glow);
}
#p-logo-text a:hover {
color: #fff;
text-decoration: none;
text-shadow: 0 0 10px rgba( 53, 224, 255, 0.7 );
}
/* The Maker Faire robot is flat red art on a white square. Inverting it turns
the white to black and the red to cyan; `lighten` then drops the black out
against the dark header, so it reads as a cyan HUD glyph with no re-upload. */
#p-logo img,
#p-logo a.mw-wiki-logo,
.mw-wiki-logo.timeless-logo {
max-width: 100%;
max-height: 80px;
width: auto;
height: auto;
}
/* Apply the inversion to the image only — putting it on the <a> as well would
invert twice and hand the red robot back. */
#p-logo img {
filter: invert( 1 ) saturate( 1.35 );
mix-blend-mode: lighten;
}
#p-logo {
padding: 0.5em 0;
overflow: hidden;
}
/* Accent stripe under the header: red/blue/green -> cyan/amber HUD bar. */
.color-left {
background: linear-gradient( 90deg, rgba( 53, 224, 255, 0 ) 0%, var(--sf-cyan) 100% );
}
.color-right {
background: linear-gradient( 90deg, var(--sf-amber) 0%, rgba( 255, 179, 64, 0 ) 100% );
}
.color-middle {
background: var(--sf-cyan);
box-shadow: 0 0 10px rgba( 53, 224, 255, 0.5 );
}
/* ---------------------------------------------------------------- Search -- */
#simpleSearch {
background: var(--sf-bg-deep);
border: 1px solid var(--sf-line);
border-radius: 0;
box-shadow: inset 0 0 12px rgba( 53, 224, 255, 0.06 );
}
#simpleSearch:focus-within {
border-color: var(--sf-cyan);
box-shadow: 0 0 0 1px rgba( 53, 224, 255, 0.35 ), inset 0 0 12px rgba( 53, 224, 255, 0.1 );
}
#searchInput {
color: var(--sf-fg);
font-family: var(--sf-mono);
font-size: 0.9em;
}
#searchInput::placeholder {
color: var(--sf-fg-faint);
}
/* Skin search glyph is a dark grey SVG; lift it onto the dark field. */
#searchButton,
#mw-searchButton {
filter: invert( 1 ) brightness( 1.1 );
opacity: 0.75;
}
.suggestions .suggestions-results,
.suggestions .suggestions-special {
background: var(--sf-panel-2);
border: 1px solid var(--sf-line);
color: var(--sf-fg);
}
.suggestions .suggestions-result {
color: var(--sf-fg);
}
.suggestions .suggestions-result-current,
.suggestions .suggestions-special.suggestions-result-current {
background: var(--sf-panel-3);
color: var(--sf-cyan);
}
/* --------------------------------------------------- Page / content shell -- */
#mw-content-container {
background-color: var(--sf-bg);
/* Skin ships a decorative cat as a backdrop; replace with a soft glow. */
background-image: radial-gradient( 900px 420px at 50% -120px, rgba( 53, 224, 255, 0.08 ), transparent 70% );
background-repeat: no-repeat;
background-position: center top;
border-bottom: 1px solid var(--sf-cyan);
box-shadow: inset 0 -1px 14px rgba( 53, 224, 255, 0.18 );
}
/* The main reading panel. */
#mw-content {
background: var(--sf-panel);
border: 1px solid var(--sf-line);
border-radius: 0;
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.5 ), 0 8px 30px rgba( 0, 0, 0, 0.45 );
position: relative;
}
/* Corner bracket, top right — HUD framing without clipping any menus. */
#mw-content::before {
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 22px;
height: 22px;
border-top: 2px solid var(--sf-cyan);
border-right: 2px solid var(--sf-cyan);
box-shadow: var(--sf-glow);
pointer-events: none;
}
#mw-content::after {
content: '';
position: absolute;
bottom: -1px;
left: -1px;
width: 22px;
height: 22px;
border-bottom: 2px solid var(--sf-cyan);
border-left: 2px solid var(--sf-cyan);
box-shadow: var(--sf-glow);
pointer-events: none;
}
/* ------------------------------------------------------------- Sidebars -- */
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
background: var(--sf-panel-2);
border: 1px solid var(--sf-line-soft);
border-radius: 0;
box-shadow: 0 4px 18px rgba( 0, 0, 0, 0.4 );
}
#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-inner {
background: transparent;
border-radius: 0;
}
.sidebar-chunk .mw-portlet h3,
#mw-site-navigation h3,
#mw-related-navigation h3,
#personal h3 {
color: var(--sf-cyan);
font-family: var(--sf-display);
font-size: 0.8em;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
border-bottom: 1px solid var(--sf-line-soft);
padding-bottom: 0.35em;
}
/* Leading marker on every nav link. */
.sidebar-chunk .mw-portlet-body li,
#personal-inner .mw-portlet-body li {
list-style: none;
}
.sidebar-chunk .mw-portlet-body li a::before,
#personal-inner .mw-portlet-body li a::before {
content: '\203A\00a0';
color: var(--sf-cyan);
opacity: 0.55;
}
.sidebar-chunk .mw-portlet-body li a:hover::before {
opacity: 1;
color: var(--sf-amber);
}
/* Personal tools dropdown (top right). */
#personal-inner.dropdown,
#personal .dropdown {
background: var(--sf-panel-2);
border: 1px solid var(--sf-line);
box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.6 );
}
/* ----------------------------------------------------- Page action tabs -- */
#mw-page-header-links .mw-portlet h3,
#mw-page-header-links h3 {
color: var(--sf-fg-faint);
}
#mw-page-header-links .tools-inline li a {
color: var(--sf-fg-dim);
font-family: var(--sf-display);
font-size: 0.9em;
letter-spacing: 0.08em;
text-transform: uppercase;
border-bottom: 2px solid transparent;
}
#mw-page-header-links .tools-inline li a:hover {
color: var(--sf-cyan);
text-decoration: none;
border-bottom-color: var(--sf-line);
}
#mw-page-header-links .tools-inline li.selected a,
#mw-page-header-links .tools-inline li.selected a:visited {
color: var(--sf-cyan);
border-bottom-color: var(--sf-cyan);
text-shadow: var(--sf-glow);
}
/* ------------------------------------------------------------ Typography -- */
.mw-body-content {
line-height: 1.75;
color: var(--sf-fg);
}
#firstHeading,
.firstHeading {
color: #eaf6ff;
font-family: var(--sf-display);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
border-bottom: 1px solid var(--sf-line);
padding-bottom: 0.35em;
text-shadow: 0 0 14px rgba( 53, 224, 255, 0.25 );
}
/* Small callsign above the title. */
#siteSub {
display: block;
color: var(--sf-fg-faint);
font-family: var(--sf-mono);
font-size: 0.72em;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4 {
color: var(--sf-cyan);
font-family: var(--sf-display);
font-weight: 600;
}
.mw-body-content h2 {
margin-top: 1.8em;
padding: 0 0 0.3em 0.7em;
border-bottom: 1px solid var(--sf-line);
border-left: 3px solid var(--sf-cyan);
letter-spacing: 0.08em;
text-transform: uppercase;
text-shadow: var(--sf-glow);
background: linear-gradient( 90deg, rgba( 53, 224, 255, 0.1 ), transparent 55% );
}
.mw-body-content h3 {
margin-top: 1.4em;
padding-left: 0.7em;
color: var(--sf-cyan-2);
border-left: 2px solid var(--sf-line);
letter-spacing: 0.04em;
}
.mw-body-content h4 {
color: var(--sf-fg);
letter-spacing: 0.04em;
}
.mw-body-content b,
.mw-body-content strong {
color: #e6f3ff;
}
/* Section [edit] links. */
.mw-editsection,
.mw-editsection a {
color: var(--sf-fg-faint);
font-family: var(--sf-mono);
font-size: 0.75em;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.mw-editsection a:hover {
color: var(--sf-amber);
}
/* ----------------------------------------------------------------- Links -- */
.mw-body-content a,
#mw-content a {
color: var(--sf-cyan);
}
.mw-body-content a:visited,
#mw-content a:visited {
color: #9bb8ff;
}
.mw-body-content a:hover,
#mw-content a:hover {
color: #fff;
text-shadow: var(--sf-glow);
}
.mw-body-content a.new,
#mw-content a.new,
a.new:visited,
.sidebar-chunk a.new {
color: var(--sf-red);
}
/* External links: drop the skin's blue icon for a HUD arrow. */
.mw-parser-output a.external {
background-image: none;
padding-right: 0;
border-bottom: 1px dotted var(--sf-line);
}
.mw-parser-output a.external::after {
content: '\2197';
color: var(--sf-amber);
font-size: 0.85em;
padding-left: 0.15em;
vertical-align: super;
}
/* Sidebar / footer links. */
.sidebar-chunk a,
#personal a,
#mw-footer a,
#catlinks a {
color: var(--sf-fg-dim);
}
.sidebar-chunk a:hover,
#personal a:hover,
#mw-footer a:hover,
#catlinks a:hover {
color: var(--sf-cyan);
text-decoration: none;
}
/* ----------------------------------------------------------------- Lists -- */
.mw-parser-output ul {
list-style: none;
padding-left: 1.4em;
}
.mw-parser-output ul > li {
margin-bottom: 0.4em;
position: relative;
}
.mw-parser-output ul > li::before {
content: '\25B8';
position: absolute;
left: -1.1em;
color: var(--sf-amber);
}
/* Nested bullets step down in weight. */
.mw-parser-output ul ul > li::before {
content: '\25AA';
color: var(--sf-cyan);
opacity: 0.7;
}
.mw-parser-output ol {
padding-left: 1.8em;
}
.mw-parser-output ol > li {
margin-bottom: 0.4em;
}
.mw-parser-output ol > li::marker {
color: var(--sf-amber);
font-family: var(--sf-mono);
}
/* Galleries and TOC keep their own list semantics — no HUD bullets there. */
.mw-parser-output ul.gallery > li::before,
.mw-parser-output #toc ul > li::before,
.mw-parser-output .toc ul > li::before {
content: none;
}
.mw-parser-output ul.gallery,
.mw-parser-output #toc ul {
padding-left: 0;
}
/* ------------------------------------------------------------------ Code -- */
.mw-body-content pre,
.mw-highlight pre,
.mw-parser-output pre {
background: var(--sf-bg-deep);
color: #dbe7f3;
border: 1px solid var(--sf-line);
border-left: 3px solid var(--sf-cyan);
border-radius: 0;
padding: 0.9em 1.1em;
overflow-x: auto;
font-family: var(--sf-mono);
font-size: 0.9em;
line-height: 1.55;
box-shadow: inset 0 0 24px rgba( 53, 224, 255, 0.05 );
/* Cut corner, bottom right. */
clip-path: polygon( 0 0, 100% 0, 100% calc( 100% - 12px ), calc( 100% - 12px ) 100%, 0 100% );
}
.mw-body-content code,
.mw-parser-output code,
.mw-body-content tt {
background: var(--sf-bg-deep);
color: var(--sf-mint);
border: 1px solid var(--sf-line-soft);
border-radius: 0;
padding: 0.05em 0.4em;
font-family: var(--sf-mono);
font-size: 0.9em;
}
.mw-body-content pre code {
background: transparent;
border: 0;
padding: 0;
color: inherit;
}
.mw-highlight,
.mw-highlight pre {
background: var(--sf-bg-deep);
}
/* Pygments ships a light theme (dark green keywords, dark red strings) which is
unreadable on this background. Remap the tokens the wiki actually uses. */
.mw-highlight .hll { background-color: rgba( 53, 224, 255, 0.12 ); }
.mw-highlight .c,
.mw-highlight .ch,
.mw-highlight .cm,
.mw-highlight .c1,
.mw-highlight .cs,
.mw-highlight .cpf { color: #5f7f95; font-style: italic; }
.mw-highlight .cp { color: var(--sf-amber); }
.mw-highlight .k,
.mw-highlight .kc,
.mw-highlight .kd,
.mw-highlight .kn,
.mw-highlight .kr { color: var(--sf-amber); font-weight: bold; }
.mw-highlight .kp { color: var(--sf-amber); font-weight: normal; }
.mw-highlight .kt { color: #ffd479; font-weight: normal; }
.mw-highlight .s,
.mw-highlight .s1,
.mw-highlight .s2,
.mw-highlight .sa,
.mw-highlight .sb,
.mw-highlight .sc,
.mw-highlight .dl,
.mw-highlight .sd,
.mw-highlight .se,
.mw-highlight .sh,
.mw-highlight .si,
.mw-highlight .sx,
.mw-highlight .sr,
.mw-highlight .ss { color: var(--sf-mint); }
.mw-highlight .m,
.mw-highlight .mb,
.mw-highlight .mf,
.mw-highlight .mh,
.mw-highlight .mi,
.mw-highlight .mo,
.mw-highlight .il { color: #ff9d7a; }
.mw-highlight .nb,
.mw-highlight .bp,
.mw-highlight .na { color: #9fd6ff; }
.mw-highlight .nc,
.mw-highlight .nn { color: var(--sf-cyan); font-weight: bold; }
.mw-highlight .nf,
.mw-highlight .fm { color: var(--sf-cyan); }
.mw-highlight .nt { color: var(--sf-amber); }
.mw-highlight .nv,
.mw-highlight .vc,
.mw-highlight .vg,
.mw-highlight .vi,
.mw-highlight .vm { color: var(--sf-violet); }
.mw-highlight .no { color: #ffd479; }
.mw-highlight .nd,
.mw-highlight .ne { color: #ff8fa3; }
.mw-highlight .o,
.mw-highlight .ow { color: #a9c0d6; }
.mw-highlight .p { color: var(--sf-fg-dim); }
.mw-highlight .err { color: var(--sf-red); border: 1px solid rgba( 255, 95, 109, 0.5 ); }
.mw-highlight .gd { color: var(--sf-red); }
.mw-highlight .gi { color: var(--sf-mint); }
.mw-highlight .go { color: var(--sf-fg-dim); }
.mw-highlight .gr,
.mw-highlight .gt { color: var(--sf-red); }
.mw-highlight .gh,
.mw-highlight .gp,
.mw-highlight .gu { color: var(--sf-cyan); font-weight: bold; }
.mw-highlight .linenos,
.mw-highlight .lineno,
.mw-highlight .linenodiv pre { color: var(--sf-fg-faint); background: transparent; }
/* Copy button shipped by SyntaxHighlight. */
.mw-highlight-copy,
.mw-highlight .mw-highlight-copy {
background: var(--sf-panel-3);
border: 1px solid var(--sf-line);
color: var(--sf-cyan);
}
/* ---------------------------------------------------------------- Tables -- */
.mw-body-content table.wikitable,
.mw-body-content .mw-datatable,
.mw-body-content table.mw_metadata {
background: var(--sf-panel-2);
color: var(--sf-fg);
border: 1px solid var(--sf-line);
border-collapse: collapse;
}
.mw-body-content table.wikitable > tr > th,
.mw-body-content table.wikitable > * > tr > th,
.mw-body-content .mw-datatable th,
.mw-body-content table.mw_metadata th {
background: var(--sf-panel-3);
color: var(--sf-cyan);
border: 1px solid var(--sf-line);
font-family: var(--sf-display);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mw-body-content table.wikitable > tr > td,
.mw-body-content table.wikitable > * > tr > td,
.mw-body-content .mw-datatable td,
.mw-body-content table.mw_metadata td {
border: 1px solid var(--sf-line-soft);
}
.mw-body-content table.wikitable > * > tr:hover > td {
background: rgba( 53, 224, 255, 0.05 );
}
/* The pin-out tables (Raspberry Pi) set cell fills inline. Those fills split
into light and dark, so each needs its own text colour — a single blanket
rule leaves half the pin numbers invisible. Values enumerated from the
wikitext: cyan / #00FF80 / magenta / yellow / orange are light; black, green
and red are dark. */
.mw-parser-output td[style*="#00FFFF" i],
.mw-parser-output td[style*="#00FF80" i],
.mw-parser-output td[style*="#FF00FF" i],
.mw-parser-output td[style*="cyan" i],
.mw-parser-output td[style*="yellow" i],
.mw-parser-output td[style*="orange" i],
.mw-parser-output td[style*="white" i],
.mw-parser-output th[style*="#00FFFF" i],
.mw-parser-output th[style*="yellow" i] {
color: #06121f !important;
}
.mw-parser-output td[style*="black" i],
.mw-parser-output td[style*="green" i],
.mw-parser-output td[style*="red" i],
.mw-parser-output td[style*="blue" i],
.mw-parser-output td[style*="navy" i],
.mw-parser-output td[style*="purple" i] {
color: #ffffff !important;
}
.mw-parser-output td[style*="background" i] a,
.mw-parser-output th[style*="background" i] a {
color: inherit !important;
text-decoration: underline;
}
/* Inline red text (used as a warning marker on a handful of pages) is too dark
against this background — lift it without changing the wikitext. */
.mw-parser-output [style*="color:red"],
.mw-parser-output [style*="color: red"],
.mw-parser-output [style*="color:#FF0000"],
.mw-parser-output [style*="color:#ff0000"],
.mw-parser-output [style*="color: #FF0000"] {
color: var(--sf-red) !important;
}
/* ---------------------------------------------------- Images & galleries -- */
.mw-body-content .thumbinner,
.mw-parser-output .thumbinner {
background: var(--sf-panel-2);
border: 1px solid var(--sf-line);
border-radius: 0;
box-shadow: 0 4px 18px rgba( 0, 0, 0, 0.45 );
}
.mw-body-content .thumbimage,
.mw-parser-output .thumbimage {
background: var(--sf-bg-deep);
border: 1px solid var(--sf-line-soft);
}
.mw-body-content .thumbcaption,
.mw-parser-output .thumbcaption {
color: var(--sf-fg-dim);
font-family: var(--sf-mono);
font-size: 0.85em;
line-height: 1.5;
}
/* Enlarge icon is a dark grey SVG. */
.mw-body-content .magnify a,
.mw-parser-output .magnify a {
filter: invert( 1 ) brightness( 1.1 );
opacity: 0.7;
}
.mw-body-content ul.gallery {
margin: 1.4em 0 2em;
}
.mw-body-content .gallerybox div.thumb {
background: var(--sf-panel-2);
border: 1px solid var(--sf-line);
border-radius: 0;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mw-body-content .gallerybox:hover div.thumb {
border-color: var(--sf-cyan);
box-shadow: 0 0 14px rgba( 53, 224, 255, 0.35 );
}
.mw-body-content .gallerybox .thumb img {
border-radius: 0;
box-shadow: none;
}
.mw-body-content .gallerybox .gallerytext {
font-size: 0.88em;
color: var(--sf-fg-dim);
padding-top: 0.5em;
}
/* ------------------------------------------------------------------- TOC -- */
#toc,
.toc,
.toccolours {
background: var(--sf-bg-deep);
border: 1px solid var(--sf-line);
border-radius: 0;
box-shadow: inset 0 0 20px rgba( 53, 224, 255, 0.05 );
}
#toc .toctitle h2,
.toc .toctitle h2,
#mw-toc-heading {
color: var(--sf-cyan);
font-family: var(--sf-display);
font-size: 0.85em;
letter-spacing: 0.2em;
text-transform: uppercase;
border: 0;
background: none;
padding: 0;
text-shadow: none;
}
#toc .tocnumber,
.toc .tocnumber {
color: var(--sf-amber);
font-family: var(--sf-mono);
}
#toc .toctext,
.toc .toctext {
color: var(--sf-fg);
}
/* ------------------------------------------------- Categories & footer -- */
#catlinks,
.catlinks {
background: var(--sf-bg-deep);
border: 1px solid var(--sf-line-soft);
border-left: 3px solid var(--sf-amber);
border-radius: 0;
color: var(--sf-fg-dim);
}
#catlinks .mw-normal-catlinks > a {
color: var(--sf-amber);
font-family: var(--sf-display);
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 0.85em;
}
#mw-footer-container,
#mw-footer {
background: var(--sf-bg-deep);
color: var(--sf-fg-faint);
border-top: 1px solid var(--sf-line);
}
#mw-footer li,
#footer-info li {
color: var(--sf-fg-faint);
font-family: var(--sf-mono);
font-size: 0.82em;
}
/* -------------------------------------------------- Forms / editing UI -- */
textarea,
#wpTextbox1,
.mw-editform textarea {
background: var(--sf-bg-deep);
color: var(--sf-fg);
border: 1px solid var(--sf-line);
border-radius: 0;
caret-color: var(--sf-cyan);
font-family: var(--sf-mono);
}
textarea:focus,
#wpTextbox1:focus {
border-color: var(--sf-cyan);
box-shadow: 0 0 0 1px rgba( 53, 224, 255, 0.3 );
outline: 0;
}
input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
select {
background: var(--sf-bg-deep);
color: var(--sf-fg);
border: 1px solid var(--sf-line);
border-radius: 0;
}
.mw-editform #wpSummary,
#wpSummary {
background: var(--sf-bg-deep);
color: var(--sf-fg);
border: 1px solid var(--sf-line);
}
/* Preview / diff / history and message boxes. */
table.diff,
table.diff td,
.mw-diff-table {
background: transparent;
color: var(--sf-fg);
}
td.diff-context,
.diff-context {
background: var(--sf-panel-2);
color: var(--sf-fg-dim);
border-color: var(--sf-line-soft);
}
td.diff-deletedline,
.diff-deletedline {
background: rgba( 255, 95, 109, 0.12 );
border-color: rgba( 255, 95, 109, 0.4 );
}
td.diff-addedline,
.diff-addedline {
background: rgba( 124, 246, 200, 0.12 );
border-color: rgba( 124, 246, 200, 0.4 );
}
.diff-deletedline .diffchange {
background: rgba( 255, 95, 109, 0.35 );
color: #fff;
}
.diff-addedline .diffchange {
background: rgba( 124, 246, 200, 0.3 );
color: #06121f;
}
.mw-message-box,
.mw-message-box-warning,
.mw-message-box-error,
.mw-message-box-success,
.warningbox,
.errorbox,
.successbox,
.mw-warning,
#mw-content .mw-message-box {
background: var(--sf-panel-2);
color: var(--sf-fg);
border: 1px solid var(--sf-line);
border-left: 3px solid var(--sf-amber);
border-radius: 0;
}
.mw-message-box-error,
.errorbox {
border-left-color: var(--sf-red);
}
.mw-message-box-success,
.successbox {
border-left-color: var(--sf-mint);
}
/* Special: pages and search results ride on .mw-body-content, but a few bits
carry their own light backgrounds. */
.mw-search-result-heading,
.searchresult {
color: var(--sf-fg);
}
.mw-search-results li {
border-bottom: 1px solid var(--sf-line-soft);
padding-bottom: 0.5em;
}
.mw-changeslist-line,
.mw-changeslist td,
.mw-changeslist th,
.mw-history-histlinks {
color: var(--sf-fg);
}
/* ------------------------------------------------- Narrow viewports (Timeless
switches to its stacked layout with drop-down menus at 850px) -- */
@media screen and ( max-width: 850px ) {
#mw-header-container {
background: var(--sf-bg);
}
/* Menu / user / tools toggles are dark grey SVGs on a dark bar. */
#user-tools h2,
.sidebar-chunk h2,
#ca-more span,
#ca-languages span,
.tools-inline li a {
filter: invert( 1 ) brightness( 1.15 );
}
.sidebar-inner,
.dropdown {
background: var(--sf-panel-2);
border: 1px solid var(--sf-line);
box-shadow: 0 8px 28px rgba( 0, 0, 0, 0.7 );
}
/* Backdrop behind an open menu was a light wash. */
#menus-cover {
background: #02060d;
opacity: 0.82;
}
#mw-content {
border-left: 0;
border-right: 0;
}
#mw-content::before,
#mw-content::after {
display: none;
}
}
/* --------------------------------------------------------------- Printing -- */
@media print {
/* Never print the dark theme — it wastes toner and reads badly on paper. */
body,
#mw-content,
#mw-content-container,
.mw-body-content,
#toc,
.toc,
#catlinks,
.mw-parser-output pre,
.mw-body-content pre,
.mw-highlight pre,
.mw-parser-output code,
.thumbinner {
background: #fff !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
.mw-body-content h2,
.mw-body-content h3,
#firstHeading {
color: #000 !important;
background: none !important;
text-shadow: none !important;
}
#p-logo img {
filter: none !important;
mix-blend-mode: normal !important;
}
#mw-content::before,
#mw-content::after {
display: none !important;
}
}