computer-playbook/roles/web-app-mediawiki/templates/style.css.j2

/* MediaWiki (Vector 2022 + OOUI) color remap via Infinito.Nexus palette
   - Keep changes scoped and variable-driven
   - Prefer variables over hard values
   - Avoid !important unless an inline style or strong OOUI rule requires it
*/

/* ---------- App-scoped variables (derived from global color scale) ---------- */
:root {
  /* Brand & accents */
  --mw-primary:                var(--color-01-60);
  --mw-primary-contrast:       var(--color-01-99);
  --mw-secondary:              var(--color-01-85);
  --mw-accent:                 var(--color-01-50);

  /* Surfaces */
  --mw-surface:                var(--color-01-92);
  --mw-surface-variant:        var(--color-01-90);
  --mw-surface-muted:          var(--color-01-95);

  /* Text */
  --mw-text:                   var(--color-01-20);
  --mw-text-muted:             var(--color-01-45);
  --mw-heading:                var(--color-01-15);
  --mw-link:                   var(--color-01-55);
  --mw-link-hover:             var(--color-01-60);
  --mw-link-visited:           var(--color-01-45);

  /* Lines / borders / focus */
  --mw-border:                 var(--color-01-85);
  --mw-divider:                var(--color-01-87);
  --mw-focus:                  rgba(var(--color-01-rgb-65), .35);

  /* Status */
  --mw-success:                var(--bs-success);
  --mw-warning:                var(--bs-warning);
  --mw-danger:                 var(--bs-danger);
}

/* ---------- Global shell ---------- */
body.skin-vector,
.skin-vector .mw-page-container {
  background-color: var(--mw-surface);
  background-image: linear-gradient({{ range(0, 361) | random }}deg,
    var(--mw-surface),
    var(--mw-surface-variant),
    var(--mw-surface-muted),
    var(--mw-surface)
  );
  color: var(--mw-text);
}

/* ---------- Header / site chrome ---------- */
.skin-vector .vector-header,
.skin-vector .vector-header-container,
.skin-vector .mw-header {
  background-color: var(--color-01-80);
  background-image: linear-gradient({{ range(0, 361) | random }}deg,
    var(--color-01-75), var(--color-01-80), var(--color-01-81), var(--color-01-85)
  );
  color: var(--color-01-17);
  border-bottom: 1px solid var(--mw-divider);
}

/* Logo & title area often inherits link styles—keep readable */
.skin-vector .mw-logo a,
.skin-vector .mw-logo svg,
.skin-vector .vector-header a {
  color: var(--mw-heading);
  fill: currentColor;
}

/* ---------- Sidebar / menus ---------- */
.skin-vector .vector-sidebar,
.skin-vector .mw-portlet,
.skin-vector .vector-menu-content {
  background-color: var(--mw-surface-variant);
  border-color: var(--mw-border);
}

.skin-vector .vector-sidebar .vector-menu-heading,
.skin-vector .vector-menu-heading {
  color: var(--mw-heading);
  border-bottom: 1px solid var(--mw-divider);
}

/* ---------- Table of Contents ---------- */
.skin-vector .vector-toc,
.skin-vector .vector-toc .vector-toc-contents {
  background-color: var(--mw-surface-muted);
  border: 1px solid var(--mw-border);
}

.skin-vector .vector-toc .vector-toc-text {
  color: var(--mw-text);
}

/* ---------- Content area ---------- */
.skin-vector .mw-content-container,
.skin-vector .mw-content-ltr,
.skin-vector .mw-body,
.skin-vector .mw-parser-output {
  color: var(--mw-text);
}

.skin-vector .mw-parser-output h1,
.skin-vector .mw-parser-output h2,
.skin-vector .mw-parser-output h3,
.skin-vector .mw-parser-output h4,
.skin-vector .mw-parser-output h5,
.skin-vector .mw-parser-output h6 {
  color: var(--mw-heading);
}

/* Links */
.skin-vector .mw-parser-output a { color: var(--mw-link); }
.skin-vector .mw-parser-output a:visited { color: var(--mw-link-visited); }
.skin-vector .mw-parser-output a:hover,
.skin-vector .mw-parser-output a:focus { color: var(--mw-link-hover); }

/* ---------- Search ---------- */
.skin-vector .vector-search-box input,
.skin-vector .vector-search-box .vector-search-input {
  background-color: var(--mw-surface);
  border: 1px solid var(--mw-border);
  color: var(--mw-text);
}

.skin-vector .vector-search-box input:focus {
  outline: 0;
  box-shadow: 0 0 0 3px var(--mw-focus);
  border-color: var(--mw-link);
}

/* ---------- Buttons (MediaWiki UI + OOUI) ---------- */
/* MediaWiki UI */
.mw-ui-button,
.mw-ui-button:visited {
  background-color: var(--mw-surface-muted);
  color: var(--mw-text);
  border: 1px solid var(--mw-border);
}

.mw-ui-button:hover,
.mw-ui-button:focus {
  background-color: var(--mw-surface-variant);
  color: var(--mw-text);
  border-color: var(--mw-link);
  box-shadow: 0 0 0 3px var(--mw-focus);
}

.mw-ui-progressive,
.mw-ui-primary {
  background-color: var(--mw-primary);
  color: var(--mw-primary-contrast);
  border-color: var(--mw-primary);
}

.mw-ui-progressive:hover,
.mw-ui-primary:hover {
  filter: brightness(0.95);
}

/* OOUI (covers most modern UI widgets) */
.oo-ui-buttonElement-button {
  background-color: var(--mw-surface-muted);
  color: var(--mw-text);
  border: 1px solid var(--mw-border);
}

.oo-ui-buttonElement-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--mw-focus);
  border-color: var(--mw-link);
}

.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button,
.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button {
  background-color: var(--mw-primary);
  color: var(--mw-primary-contrast);
  border-color: var(--mw-primary);
}

/* Inputs */
.mw-ui-input,
.oo-ui-inputWidget-input {
  background-color: var(--mw-surface);
  color: var(--mw-text);
  border: 1px solid var(--mw-border);
}

.oo-ui-inputWidget-input:focus,
.mw-ui-input:focus {
  outline: 0;
  box-shadow: 0 0 0 3px var(--mw-focus);
  border-color: var(--mw-link);
}

/* ---------- Tables / infoboxes ---------- */
table.wikitable,
.mw-parser-output table.infobox,
.mw-parser-output table.prettytable {
  background-color: var(--color-01-99);
  border: 1px solid var(--mw-border);
  color: var(--mw-text);
}

table.wikitable > * > tr > th,
table.wikitable > * > tr > td {
  border: 1px solid var(--mw-border);
}

table.wikitable > * > tr > th {
  background-color: var(--color-01-80);
  background-image: linear-gradient({{ range(0, 361) | random }}deg,
    var(--color-01-75), var(--color-01-80), var(--color-01-81), var(--color-01-85)
  );
  color: var(--mw-heading);
}

/* ---------- Notices / boxes ---------- */
.mw-notification,
.mw-message-box,
.mw-message-box-notice {
  background-color: var(--mw-surface-muted);
  border-color: var(--mw-border);
  color: var(--mw-text);
}

.mw-message-box-warning {
  border-left: 4px solid var(--mw-warning);
}

.mw-message-box-error {
  border-left: 4px solid var(--mw-danger);
}

.mw-message-box-success {
  border-left: 4px solid var(--mw-success);
}

/* ---------- Footer ---------- */
.skin-vector .mw-footer {
  background-color: var(--mw-surface-variant);
  border-top: 1px solid var(--mw-divider);
  color: var(--mw-text-muted);
}

/* ---------- Dark-mode helpers (for browser extensions honoring vars) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    /* Nudge contrast a bit in dark environments */
    --mw-text:         var(--color-01-90);
    --mw-text-muted:   var(--color-01-80);
    --mw-heading:      var(--color-01-95);
  }
}