MediaWiki:Timeless.css
From No Way Out Wiki
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.
/* --- Sitewide dark theme for Timeless --- */
:root{
--bg:#111; --bg2:#181a1b; --panel:#1f2224; --border:#2a2e31;
--text:#e6e6e6; --muted:#cbd5e1;
--link:#93c5fd; --visited:#c4b5fd; --new:#f87171;
}
/* Page & content */
html, body{ background:var(--bg) !important; color:var(--text) !important; }
.mw-body, #mw-content, #mw-content-text, .mw-content-text, .mw-body-content{
background:var(--bg2) !important; color:var(--text) !important;
}
/* Header, sidebars, footer */
#mw-header-container, #mw-site-navigation, #mw-related-navigation, #mw-footer-container{
background:var(--panel) !important; color:var(--text) !important; border-color:var(--border) !important;
}
#mw-panel, #mw-related, .sidebar-chunk{ background:var(--panel) !important; color:var(--text) !important; }
/* Links */
a, .mw-parser-output a{ color:var(--link) !important; }
a:visited{ color:var(--visited) !important; }
a.new, a.new:visited{ color:var(--new) !important; }
/* Tables, boxes, TOC, infoboxes */
table, .wikitable, th, td, .mw-parser-output .toc, .infobox, .navbox,
.box, .messagebox, .mw-message-box{
background:var(--panel) !important; color:var(--text) !important; border-color:var(--border) !important;
}
/* Forms & code blocks */
input, textarea, select, .mw-ui-input, .oo-ui-inputWidget-input,
.mw-search-input, pre, code, .mw-code, .mw-highlight{
background:#0f1316 !important; color:var(--text) !important; border-color:var(--border) !important;
}
/* Buttons */
.mw-ui-button, .oo-ui-buttonElement-button{
background:#2b3036 !important; color:var(--text) !important; border-color:var(--border) !important;
}
/* Misc */
hr{ border-color:var(--border) !important; }
.skin-timeless #mw-content-container {
background: none !important;
}
/* Visible dark-style search buttons */
.skin-timeless #searchButton,
.skin-timeless #mw-searchButton, /* Special:Search */
.skin-timeless #searchGoButton, /* the 'Go' button if present */
.skin-timeless #p-search input[type="submit"],
.skin-timeless #searchform input[type="submit"],
.skin-timeless .mw-ui-button,
.skin-timeless .oo-ui-buttonElement.oo-ui-buttonElement-framed .oo-ui-buttonElement-button {
appearance: none;
background-color: #2b3036 !important;
color: #e6e6e6 !important;
border: 1px solid #3b4046 !important;
border-radius: 4px;
padding: 0.35em 0.7em;
box-shadow: none !important;
}
/* Hover / focus / active states */
.skin-timeless #searchButton:hover,
.skin-timeless #mw-searchButton:hover,
.skin-timeless #searchGoButton:hover,
.skin-timeless .mw-ui-button:hover,
.skin-timeless .oo-ui-buttonElement-button:hover {
background-color: #3a4047 !important;
border-color: #4b5560 !important;
}
.skin-timeless #searchButton:focus,
.skin-timeless #mw-searchButton:focus,
.skin-timeless #searchGoButton:focus,
.skin-timeless .mw-ui-button:focus,
.skin-timeless .oo-ui-buttonElement-button:focus {
outline: 2px solid #93c5fd !important; /* focus ring */
outline-offset: 2px;
}
.skin-timeless #searchButton:active,
.skin-timeless #mw-searchButton:active,
.skin-timeless #searchGoButton:active {
background-color: #32363c !important;
}
/* --- Timeless user dropdown (personal tools) dark theme --- */
/* Base panel (Timeless personal tools portlet) */
.skin-timeless #p-personal,
.skin-timeless #p-personal .mw-portlet-body {
background: var(--panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
/* Trigger/header (the clickable label) */
.skin-timeless #p-personal h3,
.skin-timeless #p-personal .mw-portlet-header {
background: var(--panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: 6px !important;
}
/* List + links inside the dropdown */
.skin-timeless #p-personal .mw-portlet-body ul { margin: 0; padding: .35rem 0; list-style: none; }
.skin-timeless #p-personal .mw-portlet-body li a {
display: block;
padding: .45rem .75rem;
color: var(--text) !important;
text-decoration: none;
}
.skin-timeless #p-personal .mw-portlet-body li a:hover,
.skin-timeless #p-personal .mw-portlet-body li a:focus {
background: #2b3036 !important;
color: var(--text) !important;
}
/* OOUI-powered dropdowns (some wikis render personal tools via OOUI) */
.skin-timeless .oo-ui-popupWidget-popup,
.skin-timeless .oo-ui-menuSelectWidget,
.skin-timeless .oo-ui-menuSelectWidget > .oo-ui-menuSelectWidget-menu {
background: var(--panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
.skin-timeless .oo-ui-optionWidget { color: var(--text) !important; }
.skin-timeless .oo-ui-optionWidget:hover,
.skin-timeless .oo-ui-optionWidget.oo-ui-optionWidget-highlighted {
background: #2b3036 !important;
}
/* Fallback for wikis using #personal instead of #p-personal */
.skin-timeless #personal,
.skin-timeless #personal .menu {
background: var(--panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: 8px !important;
}
.skin-timeless #personal .menu li a { display:block; padding:.45rem .75rem; color:var(--text) !important; }
.skin-timeless #personal .menu li a:hover { background:#2b3036 !important; }
/* Personal (user) dropdown – remove the white frame/arrow */
.skin-timeless #personal-inner.dropdown {
background: transparent !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important; /* some builds draw a white ring via shadow */
filter: none !important;
}
/* Kill the white triangle/backplate if it is drawn with a pseudo-element */
.skin-timeless #personal-inner.dropdown::before,
.skin-timeless #personal-inner.dropdown::after {
content: none !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* Keep the actual menu panel styled dark */
.skin-timeless #personal-inner.dropdown .menu,
.skin-timeless #personal .menu,
.skin-timeless #p-personal .mw-portlet-body {
background: var(--panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(0,0,0,.45) !important;
}
/* ===== Special:CreateAccount dark fix (Timeless) ===== */
/* Page container on CreateAccount */
.skin-timeless.mw-special-CreateAccount #mw-content-container {
background: var(--bg2) !important;
color: var(--text) !important;
box-shadow: none !important;
}
/* Panels / messages / fieldsets rendered by OOUI/HTMLForm */
.skin-timeless.mw-special-CreateAccount .mw-htmlform,
.skin-timeless.mw-special-CreateAccount .mw-htmlform-ooui .oo-ui-panelLayout,
.skin-timeless.mw-special-CreateAccount .oo-ui-panelLayout-framed,
.skin-timeless.mw-special-CreateAccount .oo-ui-fieldsetLayout,
.skin-timeless.mw-special-CreateAccount .oo-ui-messageWidget,
.skin-timeless.mw-special-CreateAccount .mw-message-box {
background: var(--panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
box-shadow: none !important;
}
/* Inputs */
.skin-timeless.mw-special-CreateAccount input,
.skin-timeless.mw-special-CreateAccount textarea,
.skin-timeless.mw-special-CreateAccount select,
.skin-timeless.mw-special-CreateAccount .oo-ui-inputWidget-input {
background: #0f1316 !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
}
.skin-timeless.mw-special-CreateAccount .oo-ui-inputWidget-input::placeholder {
color: #9aa1a9 !important;
}
/* Buttons */
.skin-timeless.mw-special-CreateAccount .oo-ui-buttonElement .oo-ui-buttonElement-button,
.skin-timeless.mw-special-CreateAccount .mw-htmlform input[type="submit"],
.skin-timeless.mw-special-CreateAccount a.mw-ui-button {
background: #2b3036 !important;
color: var(--text) !important;
border: 1px solid #3b4046 !important;
border-radius: 4px !important;
box-shadow: none !important;
}
.skin-timeless.mw-special-CreateAccount .oo-ui-buttonElement .oo-ui-buttonElement-button:hover,
.skin-timeless.mw-special-CreateAccount .mw-htmlform input[type="submit"]:hover {
background: #3a4047 !important;
border-color: #4b5560 !important;
}
/* Captcha blocks */
.skin-timeless.mw-special-CreateAccount #mw-createaccount-captcha,
.skin-timeless.mw-special-CreateAccount .fancycaptcha,
.skin-timeless.mw-special-CreateAccount .mw-captcha {
background: var(--panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
}
/* Keep disabled controls visible but dim */
.skin-timeless.mw-special-CreateAccount .oo-ui-widget-disabled .oo-ui-buttonElement-button,
.skin-timeless.mw-special-CreateAccount .mw-htmlform .mw-ui-button[disabled] {
background: #2b3036 !important;
color: #9aa1a9 !important;
border-color: #3b4046 !important;
opacity: .7 !important;
}
/* Edit Page Modifiers */
/* Toolbar + jQuery UI chrome */
.skin-timeless .wikiEditor-ui,
.skin-timeless .wikiEditor-ui-toolbar,
.skin-timeless .wikiEditor-ui .ui-widget,
.skin-timeless .wikiEditor-ui .ui-widget-content,
.skin-timeless .wikiEditor-ui .ui-widget-header {
background: var(--panel) !important;
color: var(--text) !important;
border-color: var(--border) !important;
box-shadow: none !important;
}
/* Toolbar tabs/groups/buttons */
.skin-timeless .wikiEditor-ui-toolbar .tabs span.tab a,
.skin-timeless .wikiEditor-ui-toolbar .section,
.skin-timeless .wikiEditor-ui-toolbar .group,
.skin-timeless .wikiEditor-ui-toolbar .tool .label {
color: var(--text) !important;
}
.skin-timeless .wikiEditor-ui-toolbar .tabs span.tab a:hover,
.skin-timeless .wikiEditor-ui-toolbar .tool:hover {
background: #2b3036 !important;
border-color: #3b4046 !important;
}
/* Icon visibility on dark backgrounds (optional) */
.skin-timeless .wikiEditor-ui-toolbar .tool .icon,
.skin-timeless .wikiEditor-ui-toolbar .tabs .tab a .icon {
filter: invert(85%) hue-rotate(180deg); /* makes dark icons light */
}
/* Edit textbox + summary */
.skin-timeless #wpTextbox1,
.skin-timeless #wpSummary {
background: #0f1316 !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
}
/* Footer: minor edit / watch / buttons area */
.skin-timeless .editOptions {
background: var(--panel) !important;
color: var(--text) !important;
border-top: 1px solid var(--border) !important;
}
.skin-timeless .editOptions input[type="text"],
.skin-timeless .editOptions textarea,
.skin-timeless .editOptions select {
background: #0f1316 !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
}
.skin-timeless .editOptions input[type="checkbox"] {
accent-color: #93c5fd; /* visible on dark; supported by modern browsers */
}
/* Footer buttons */
.skin-timeless .editOptions .mw-editButtons .mw-ui-button,
.skin-timeless .editOptions .mw-editButtons input[type="submit"] {
background: #2b3036 !important;
color: var(--text) !important;
border: 1px solid #3b4046 !important;
border-radius: 4px !important;
box-shadow: none !important;
}
.skin-timeless .editOptions .mw-editButtons .mw-ui-button:hover,
.skin-timeless .editOptions .mw-editButtons input[type="submit"]:hover {
background: #3a4047 !important;
border-color: #4b5560 !important;
}
/* ==== TOC (Table of contents) ==== */
.skin-timeless .mw-parser-output .toc,
.skin-timeless #toc,
.skin-timeless .toc {
background: var(--panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: 8px;
}
/* TOC title line + toggle link */
.skin-timeless .toc .toctitle,
.skin-timeless #toctitle,
.skin-timeless .toc .toctitle h2,
.skin-timeless #toctitle h2,
.skin-timeless .toc .toctogglelink,
.skin-timeless .toctogglelabel {
color: var(--text) !important;
border-color: var(--border) !important;
}
/* TOC links */
.skin-timeless .toc a { color: var(--link) !important; }
.skin-timeless .toc a:visited { color: var(--visited) !important; }
/* numbers/text inside TOC rows */
.skin-timeless .toc .tocnumber,
.skin-timeless .toc .toctext { color: var(--text) !important; }
/* Legend boxes on Special pages (e.g., RecentChanges, SpecialPages) */
.skin-timeless .mw-changeslist-legend,
.skin-timeless .mw-specialpages-notes {
background: var(--panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: 8px;
padding: .75rem 1rem;
box-shadow: none !important;
}
/* Headings/labels inside the legend */
.skin-timeless .mw-changeslist-legend h2,
.skin-timeless .mw-changeslist-legend h3,
.skin-timeless .mw-changeslist-legend b,
.skin-timeless .mw-changeslist-legend strong,
.skin-timeless .mw-specialpages-notes h2,
.skin-timeless .mw-specialpages-notes h3,
.skin-timeless .mw-specialpages-notes b,
.skin-timeless .mw-specialpages-notes strong {
color: var(--text) !important;
}
/* Links + list items */
.skin-timeless .mw-changeslist-legend a,
.skin-timeless .mw-specialpages-notes a { color: var(--link) !important; }
.skin-timeless .mw-changeslist-legend a:visited,
.skin-timeless .mw-specialpages-notes a:visited { color: var(--visited) !important; }
.skin-timeless .mw-changeslist-legend ul,
.skin-timeless .mw-specialpages-notes ul { margin: .4rem 1rem; }
.skin-timeless .mw-changeslist-legend li,
.skin-timeless .mw-specialpages-notes li { color: var(--text) !important; }
/* ===== Recent changes / Watchlist filters (RCFilters, OOUI) ===== */
/* Top filter panel + sections */
.skin-timeless .mw-rcfilters-ui,
.skin-timeless .mw-rcfilters-ui-topSection,
.skin-timeless .mw-rcfilters-ui-controls,
.skin-timeless .mw-rcfilters-ui-watchlistTopSection,
.skin-timeless .mw-rcfilters-ui-changesWrapper .oo-ui-panelLayout,
.skin-timeless .mw-rcfilters-ui-controls .oo-ui-panelLayout-framed {
background: var(--panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
box-shadow: none !important;
}
/* “Active filters” tray + token area */
.skin-timeless .mw-rcfilters-ui-filterTagMultiselectWidget,
.skin-timeless .oo-ui-tagMultiselectWidget,
.skin-timeless .oo-ui-tagMultiselectWidget-handle {
background: var(--panel) !important;
border-color: var(--border) !important;
}
.skin-timeless .oo-ui-tagItemWidget {
background: #2b3036 !important;
color: var(--text) !important;
border: 1px solid #3b4046 !important;
}
.skin-timeless .oo-ui-tagItemWidget:hover { background: #3a4047 !important; }
.skin-timeless .oo-ui-tagItemWidget .oo-ui-labelElement-label { color: var(--text) !important; }
/* Search input in the filter bar */
.skin-timeless .mw-rcfilters-ui-controls .oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: #0f1316 !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
}
/* Buttons (Saved filters, Hide, Namespaces, Tags, Live updates, etc.) */
.skin-timeless .mw-rcfilters-ui .oo-ui-buttonElement .oo-ui-buttonElement-button {
background: #2b3036 !important;
color: var(--text) !important;
border: 1px solid #3b4046 !important;
box-shadow: none !important;
border-radius: 4px !important;
}
.skin-timeless .mw-rcfilters-ui .oo-ui-buttonElement .oo-ui-buttonElement-button:hover {
background: #3a4047 !important;
border-color: #4b5560 !important;
}
/* Menus, popups, and their options */
.skin-timeless .oo-ui-popupWidget-popup,
.skin-timeless .oo-ui-menuSelectWidget,
.skin-timeless .oo-ui-menuSelectWidget > .oo-ui-menuSelectWidget-menu {
background: var(--panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
box-shadow: 0 8px 24px rgba(0,0,0,.45) !important;
}
.skin-timeless .oo-ui-optionWidget { color: var(--text) !important; }
.skin-timeless .oo-ui-optionWidget:hover,
.skin-timeless .oo-ui-optionWidget.oo-ui-optionWidget-highlighted {
background: #2b3036 !important;
}
/* Small icon buttons inside the panel (e.g., X/remove, chevrons) */
.skin-timeless .oo-ui-iconElement-icon {
filter: invert(85%) hue-rotate(180deg); /* make dark icons visible on dark bg */
}
/* The thin dark header bar under the filter tray (where Namespaces/Tags sit) */
.skin-timeless .mw-rcfilters-ui-filterMenuHeaderWidget,
.skin-timeless .mw-rcfilters-ui-filterMenuHeaderWidget .oo-ui-toolbar-bar,
.skin-timeless .mw-rcfilters-ui-filterMenuHeaderWidget .oo-ui-toolbar-tools {
background: #1f2224 !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
/* Abbreviations/legend box on RC page (right sidebar) */
.skin-timeless .mw-changeslist-legend,
.skin-timeless .mw-specialpages-notes {
background: var(--panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: 8px !important;
}
/* ===== File page nav bar (ul#filetoc) ===== */
.skin-timeless #filetoc {
background: var(--panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: 8px !important;
padding: .5rem .75rem !important;
margin: .5rem 0 1rem !important;
list-style: none !important;
display: flex !important;
gap: 1rem;
justify-content: center; /* center the tabs; remove if you prefer left */
box-shadow: none !important;
}
/* individual items */
.skin-timeless #filetoc > li { margin: 0; padding: 0; }
/* links */
.skin-timeless #filetoc a {
color: var(--link) !important;
text-decoration: none;
padding: .25rem .6rem;
border-radius: 6px;
}
.skin-timeless #filetoc a:visited { color: var(--visited) !important; }
.skin-timeless #filetoc a:hover,
.skin-timeless #filetoc a:focus {
background: #2b3036 !important;
border: 1px solid #3b4046 !important;
outline: none !important;
}
/* current/selected tab (often rendered as mw-selflink) */
.skin-timeless #filetoc .mw-selflink,
.skin-timeless #filetoc li.selected > a,
.skin-timeless #filetoc li a[aria-current="page"] {
color: var(--text) !important;
background: #2b3036 !important;
border: 1px solid #3b4046 !important;
border-radius: 6px !important;
cursor: default;
}
/* Fix spacing for OOUI buttons that include an icon */
.skin-timeless .oo-ui-buttonElement.oo-ui-iconElement .oo-ui-buttonElement-button {
/* room for the icon (≈ 1.2em) + left gutter */
padding-left: 2.4em !important; /* tweak to taste: 2.1–2.6em */
}
/* If the button also has a right-side indicator (chevron, etc.) */
.skin-timeless .oo-ui-buttonElement.oo-ui-indicatorElement .oo-ui-buttonElement-button {
padding-right: 1.8em !important;
}
/* When it has both an icon and an indicator */
.skin-timeless .oo-ui-buttonElement.oo-ui-iconElement.oo-ui-indicatorElement .oo-ui-buttonElement-button {
padding-left: 2.4em !important;
padding-right: 1.8em !important;
}
/* Keep the icon aligned and not sitting on top of the label */
.skin-timeless .oo-ui-buttonElement .oo-ui-iconElement-icon {
left: .55em !important; /* nudge off the edge */
top: 50% !important;
transform: translateY(-50%) !important; /* vertical center */
width: 1.2em; height: 1.2em; /* reasonable size */
background-color: transparent !important;
}
/* === Gallery captions: dark overlay that fully reveals on image/tile hover === */
/* Make each tile a positioning/clip context with rounded corners */
.skin-timeless .mw-gallery-packed .gallerybox,
.skin-timeless .mw-gallery-traditional .gallerybox,
.skin-timeless .mw-gallery-packed-hover .gallerybox,
.skin-timeless .mw-gallery-packed-overlay .gallerybox,
.skin-timeless .gallerybox .thumb {
position: relative !important;
overflow: hidden !important;
border-radius: 10px; /* tweak to match your images */
}
/* Remove gaps/padding under thumbnails some skins add */
.skin-timeless .gallerybox .thumbinner,
.skin-timeless .gallerybox .thumb > div {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
/* Caption overlay — hidden by default, sits on top of the image */
.skin-timeless .mw-gallery-packed .gallerybox .gallerytext,
.skin-timeless .mw-gallery-traditional .gallerybox .gallerytext,
.skin-timeless .mw-gallery-packed-hover .gallerybox .gallerytext,
.skin-timeless .mw-gallery-packed-overlay .gallerybox .gallerytext,
.skin-timeless .gallerybox .gallerytext {
position: absolute !important;
left: 0; right: 0; bottom: 0;
margin: 0;
padding: .6rem .8rem;
line-height: 1.35;
background: rgba(31,34,36,.92) !important; /* dark, slightly transparent */
color: var(--text) !important;
border: 0 !important;
/* match the tile’s corners */
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
/* fully hidden off-canvas until hover */
transform: translateY(100%);
opacity: 0;
pointer-events: none;
transition: transform .18s ease, opacity .18s ease;
box-shadow: none !important;
}
/* Reveal the FULL caption when hovering the whole tile (image OR text) */
.skin-timeless .gallerybox:hover .gallerytext,
.skin-timeless .gallerybox:focus-within .gallerytext {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
max-height: 100%; /* tall captions can scroll if needed */
overflow: auto;
}
/* Links inside the overlay */
.skin-timeless .gallerybox .gallerytext a { color: var(--link) !important; }
.skin-timeless .gallerybox .gallerytext a:visited { color: var(--visited) !important; }
/* Remove any “white mats” that clash with dark theme */
.skin-timeless .gallerybox .thumb,
.skin-timeless .gallerybox .thumb div {
background: transparent !important;
border-color: var(--border) !important;
}
/* Some skins add a gradient clamp; disable it */
.skin-timeless .gallerybox .gallerytext::before { display: none !important; }
