MediaWiki:Timeless.css: Difference between revisions

From No Way Out Wiki
No edit summary
No edit summary
Line 1: Line 1:
/* --- Make all buttons visibly dark in Timeless (OOUI + MWUI) --- */
The timeless ui-button value appears to be disabled, here is the full CSS values I have
.skin-timeless .mw-ui-button,
 
.skin-timeless .oo-ui-buttonElement .oo-ui-buttonElement-button,
/* --- Sitewide dark theme for Timeless --- */
.skin-timeless input[type="submit"],
:root{
.skin-timeless button[type="submit"] {
  --bg:#111; --bg2:#181a1b; --panel:#1f2224; --border:#2a2e31;
   background: #2b3036 !important;             /* use shorthand */
  --text:#e6e6e6; --muted:#cbd5e1;
  color: #e6e6e6 !important;
   --link:#93c5fd; --visited:#c4b5fd; --new:#f87171;
  border: 1px solid #3b4046 !important;
}
  border-radius: 4px !important;
 
  padding: 0.35em 0.7em !important;
/* Page & content */
   line-height: 1.2 !important;
html, body{ background:var(--bg) !important; color:var(--text) !important; }
  box-shadow: none !important;
.mw-body, #mw-content, #mw-content-text, .mw-content-text, .mw-body-content{
   background:var(--bg2) !important; color:var(--text) !important;
}
}


/* Frameless/quiet OOUI buttons normally have no background—force one */
/* Header, sidebars, footer */
.skin-timeless .oo-ui-buttonElement-frameless .oo-ui-buttonElement-button,
#mw-header-container, #mw-site-navigation, #mw-related-navigation, #mw-footer-container{
.skin-timeless .oo-ui-flaggedElement-constructive .oo-ui-buttonElement-button,
   background:var(--panel) !important; color:var(--text) !important; border-color:var(--border) !important;
.skin-timeless .oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button {
   background: #2b3036 !important;
  border: 1px solid #3b4046 !important;
  color: #e6e6e6 !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; }


/* Hover / focus / active states */
/* Tables, boxes, TOC, infoboxes */
.skin-timeless .mw-ui-button:hover,
table, .wikitable, th, td, .mw-parser-output .toc, .infobox, .navbox,
.skin-timeless .oo-ui-buttonElement .oo-ui-buttonElement-button:hover,
.box, .messagebox, .mw-message-box{
.skin-timeless input[type="submit"]:hover,
   background:var(--panel) !important; color:var(--text) !important; border-color:var(--border) !important;
.skin-timeless button[type="submit"]:hover {
   background: #3a4047 !important;
  border-color: #4b5560 !important;
}
}


.skin-timeless .mw-ui-button:focus,
/* Forms & code blocks */
.skin-timeless .oo-ui-buttonElement .oo-ui-buttonElement-button:focus,
input, textarea, select, .mw-ui-input, .oo-ui-inputWidget-input,
.skin-timeless input[type="submit"]:focus,
.mw-search-input, pre, code, .mw-code, .mw-highlight{
.skin-timeless button[type="submit"]:focus {
   background:#0f1316 !important; color:var(--text) !important; border-color:var(--border) !important;
   outline: 2px solid #93c5fd !important;
  outline-offset: 2px !important;
}
}


/* If a control is actually disabled, keep it visible but slightly dim */
/* Buttons */
.skin-timeless .oo-ui-widget-disabled .oo-ui-buttonElement-button,
.mw-ui-button, .oo-ui-buttonElement-button{
.skin-timeless .mw-ui-button[disabled],
   background:#2b3036 !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;
  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) */
/* 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 #searchButton,
.skin-timeless #mw-searchButton,
.skin-timeless #mw-searchButton,         /* Special:Search */
.skin-timeless #searchGoButton,
.skin-timeless #searchGoButton,         /* the 'Go' button if present */
.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"],
   background: #2b3036 !important;
.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;
   color: #e6e6e6 !important;
   border: 1px solid #3b4046 !important;
   border: 1px solid #3b4046 !important;
   border-radius: 4px !important;
   border-radius: 4px;
   padding: 0.25em 0.6em !important;
   padding: 0.35em 0.7em;
   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:34, 23 September 2025

The timeless ui-button value appears to be disabled, here is the full CSS values I have

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