MediaWiki:Timeless.css: Difference between revisions
From No Way Out Wiki
No edit summary Tag: Reverted |
No edit summary Tag: Manual revert |
||
(9 intermediate revisions by the same user not shown) | |||
Line 618: | Line 618: | ||
/* Some skins add gradient clamps—disable */ | /* Some skins add gradient clamps—disable */ | ||
.skin-timeless .gallerybox .gallerytextwrapper::before { display: none !important; } | .skin-timeless .gallerybox .gallerytextwrapper::before { display: none !important; } | ||
Latest revision as of 18:30, 23 September 2025
/* --- 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: full-width overlay (triggered by IMAGE/TILE hover) === */ /* Tile & image are the clip/positioning context */ .skin-timeless .gallerybox, .skin-timeless .gallerybox .thumb { position: relative !important; overflow: hidden !important; border-radius: 10px; /* match your thumbnails */ } /* Make sure the image sits below the overlay */ .skin-timeless .gallerybox .thumb { z-index: 1; } .skin-timeless .gallerybox .thumb a { display:block; } /* consistent hit area */ /* The overlay is the WRAPPER, not just .gallerytext */ .skin-timeless .gallerybox .gallerytextwrapper { position: absolute !important; left: 0; right: 0; bottom: 0; margin: 0 !important; padding: .6rem .8rem !important; background: rgba(31,34,36,.92) !important; color: var(--text) !important; border: 0 !important; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; z-index: 2; /* fully hidden off-canvas until hover */ transform: translateY(100%) !important; opacity: 0 !important; pointer-events: none !important; transition: transform .18s ease, opacity .18s ease; box-shadow: none !important; white-space: normal !important; word-break: break-word !important; max-height: 100% !important; /* allow the caption to grow; will scroll if tall */ overflow: auto !important; } /* Ensure inner text spans full width and inherits colors */ .skin-timeless .gallerybox .gallerytextwrapper .gallerytext { display: block !important; margin: 0 !important; color: inherit !important; } /* Reveal when hovering the IMAGE or anywhere on the tile */ .skin-timeless .gallerybox:hover .gallerytextwrapper, .skin-timeless .gallerybox .thumb:hover ~ .gallerytextwrapper, .skin-timeless .gallerybox .thumb:focus-within ~ .gallerytextwrapper { transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; } /* Link colors inside overlay */ .skin-timeless .gallerybox .gallerytextwrapper a { color: var(--link) !important; } .skin-timeless .gallerybox .gallerytextwrapper a:visited { color: var(--visited) !important; } /* Remove any white mats under the image */ .skin-timeless .gallerybox .thumb, .skin-timeless .gallerybox .thumb div { background: transparent !important; border: 0 !important; } /* Some skins add gradient clamps—disable */ .skin-timeless .gallerybox .gallerytextwrapper::before { display: none !important; }