MediaWiki: switch feature.css to false and add custom Vector 2022 override stylesheet

See: https://chatgpt.com/share/68b5b925-f418-800f-8f84-de744dd2d093

roles/web-app-mediawiki/config/main.yml

@@ -18,6 +18,6 @@ docker:
 features:
   logout:           true
   central_database: true
-  css:              true
+  css:              false
   desktop:          true
   oidc:             true

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

@@ -0,0 +1,256 @@
+/* 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);
+  }
+}