MediaWiki:Timeless.css: Difference between revisions

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; }