MediaWiki:Timeless.css: Difference between revisions

Revision as of 05:40, 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;
}