MediaWiki:Timeless.css: Difference between revisions

From No Way Out Wiki
← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
/* --- Sitewide dark theme for Timeless --- */
/* --- Make all buttons visibly dark in Timeless (OOUI + MWUI) --- */
:root{
.skin-timeless .mw-ui-button,
  --bg:#111; --bg2:#181a1b; --panel:#1f2224; --border:#2a2e31;
.skin-timeless .oo-ui-buttonElement .oo-ui-buttonElement-button,
   --text:#e6e6e6; --muted:#cbd5e1;
.skin-timeless input[type="submit"],
   --link:#93c5fd; --visited:#c4b5fd; --new:#f87171;
.skin-timeless button[type="submit"] {
  background: #2b3036 !important;             /* use shorthand */
   color: #e6e6e6 !important;
  border: 1px solid #3b4046 !important;
   border-radius: 4px !important;
  padding: 0.35em 0.7em !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}
}


/* Page & content */
/* Frameless/quiet OOUI buttons normally have no background—force one */
html, body{ background:var(--bg) !important; color:var(--text) !important; }
.skin-timeless .oo-ui-buttonElement-frameless .oo-ui-buttonElement-button,
.mw-body, #mw-content, #mw-content-text, .mw-content-text, .mw-body-content{
.skin-timeless .oo-ui-flaggedElement-constructive .oo-ui-buttonElement-button,
   background:var(--bg2) !important; color:var(--text) !important;
.skin-timeless .oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button {
   background: #2b3036 !important;
  border: 1px solid #3b4046 !important;
  color: #e6e6e6 !important;
}
}


/* Header, sidebars, footer */
/* Hover / focus / active states */
#mw-header-container, #mw-site-navigation, #mw-related-navigation, #mw-footer-container{
.skin-timeless .mw-ui-button:hover,
   background:var(--panel) !important; color:var(--text) !important; border-color:var(--border) !important;
.skin-timeless .oo-ui-buttonElement .oo-ui-buttonElement-button:hover,
.skin-timeless input[type="submit"]:hover,
.skin-timeless button[type="submit"]:hover {
   background: #3a4047 !important;
  border-color: #4b5560 !important;
}
}
#mw-panel, #mw-related, .sidebar-chunk{ background:var(--panel) !important; color:var(--text) !important; }


/* Links */
.skin-timeless .mw-ui-button:focus,
a, .mw-parser-output a{ color:var(--link) !important; }
.skin-timeless .oo-ui-buttonElement .oo-ui-buttonElement-button:focus,
a:visited{ color:var(--visited) !important; }
.skin-timeless input[type="submit"]:focus,
a.new, a.new:visited{ color:var(--new) !important; }
.skin-timeless button[type="submit"]:focus {
 
   outline: 2px solid #93c5fd !important;
/* Tables, boxes, TOC, infoboxes */
  outline-offset: 2px !important;
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 */
/* If a control is actually disabled, keep it visible but slightly dim */
input, textarea, select, .mw-ui-input, .oo-ui-inputWidget-input,
.skin-timeless .oo-ui-widget-disabled .oo-ui-buttonElement-button,
.mw-search-input, pre, code, .mw-code, .mw-highlight{
.skin-timeless .mw-ui-button[disabled],
   background:#0f1316 !important; color:var(--text) !important; border-color:var(--border) !important;
.skin-timeless input[type="submit"][disabled],
}
.skin-timeless button[type="submit"][disabled] {
 
   background: #2b3036 !important;
/* Buttons */
  color: #9aa1a9 !important;
.mw-ui-button, .oo-ui-buttonElement-button{
  border: 1px solid #3b4046 !important;
   background:#2b3036 !important; color:var(--text) !important; border-color:var(--border) !important;
  opacity: .65 !important;            /* remove this line if you want full opacity */
   cursor: not-allowed !important;
}
}


/* Misc */
/* Header search buttons (ids vary by page) */
hr{ border-color:var(--border) !important; }
 
  .skin-timeless #mw-content-container {
    background: none !important;
  }
 
 
/* Visible dark-style search buttons */
.skin-timeless #searchButton,
.skin-timeless #searchButton,
.skin-timeless #mw-searchButton,         /* Special:Search */
.skin-timeless #mw-searchButton,
.skin-timeless #searchGoButton,         /* the 'Go' button if present */
.skin-timeless #searchGoButton,
.skin-timeless #p-search input[type="submit"],
.skin-timeless #p-search input[type="submit"],
.skin-timeless #searchform input[type="submit"],
.skin-timeless #searchform input[type="submit"] {
.skin-timeless .mw-ui-button,
   background: #2b3036 !important;
.skin-timeless .oo-ui-buttonElement.oo-ui-buttonElement-framed .oo-ui-buttonElement-button {
  appearance: none;
   background-color: #2b3036 !important;
   color: #e6e6e6 !important;
   color: #e6e6e6 !important;
   border: 1px solid #3b4046 !important;
   border: 1px solid #3b4046 !important;
   border-radius: 4px;
   border-radius: 4px !important;
   padding: 0.35em 0.7em;
   padding: 0.25em 0.6em !important;
   box-shadow: none !important;
   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;
}
}

Revision as of 05:33, 23 September 2025

/* --- Make all buttons visibly dark in Timeless (OOUI + MWUI) --- */
.skin-timeless .mw-ui-button,
.skin-timeless .oo-ui-buttonElement .oo-ui-buttonElement-button,
.skin-timeless input[type="submit"],
.skin-timeless button[type="submit"] {
  background: #2b3036 !important;              /* use shorthand */
  color: #e6e6e6 !important;
  border: 1px solid #3b4046 !important;
  border-radius: 4px !important;
  padding: 0.35em 0.7em !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

/* Frameless/quiet OOUI buttons normally have no background—force one */
.skin-timeless .oo-ui-buttonElement-frameless .oo-ui-buttonElement-button,
.skin-timeless .oo-ui-flaggedElement-constructive .oo-ui-buttonElement-button,
.skin-timeless .oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button {
  background: #2b3036 !important;
  border: 1px solid #3b4046 !important;
  color: #e6e6e6 !important;
}

/* Hover / focus / active states */
.skin-timeless .mw-ui-button:hover,
.skin-timeless .oo-ui-buttonElement .oo-ui-buttonElement-button:hover,
.skin-timeless input[type="submit"]:hover,
.skin-timeless button[type="submit"]:hover {
  background: #3a4047 !important;
  border-color: #4b5560 !important;
}

.skin-timeless .mw-ui-button:focus,
.skin-timeless .oo-ui-buttonElement .oo-ui-buttonElement-button:focus,
.skin-timeless input[type="submit"]:focus,
.skin-timeless button[type="submit"]:focus {
  outline: 2px solid #93c5fd !important;
  outline-offset: 2px !important;
}

/* If a control is actually disabled, keep it visible but slightly dim */
.skin-timeless .oo-ui-widget-disabled .oo-ui-buttonElement-button,
.skin-timeless .mw-ui-button[disabled],
.skin-timeless input[type="submit"][disabled],
.skin-timeless button[type="submit"][disabled] {
  background: #2b3036 !important;
  color: #9aa1a9 !important;
  border: 1px solid #3b4046 !important;
  opacity: .65 !important;             /* remove this line if you want full opacity */
  cursor: not-allowed !important;
}

/* Header search buttons (ids vary by page) */
.skin-timeless #searchButton,
.skin-timeless #mw-searchButton,
.skin-timeless #searchGoButton,
.skin-timeless #p-search input[type="submit"],
.skin-timeless #searchform input[type="submit"] {
  background: #2b3036 !important;
  color: #e6e6e6 !important;
  border: 1px solid #3b4046 !important;
  border-radius: 4px !important;
  padding: 0.25em 0.6em !important;
  box-shadow: none !important;
}
Retrieved from "http://www.no-way-out.com/index.php?title=MediaWiki:Timeless.css&oldid=24"