mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2025-10-31 18:29:21 +00:00
MediaWiki: switch feature.css to false and add custom Vector 2022 override stylesheet
See: https://chatgpt.com/share/68b5b925-f418-800f-8f84-de744dd2d093
This commit is contained in:
@@ -18,6 +18,6 @@ docker:
|
||||
features:
|
||||
logout: true
|
||||
central_database: true
|
||||
css: true
|
||||
css: false
|
||||
desktop: true
|
||||
oidc: true
|
||||
|
||||
256
roles/web-app-mediawiki/templates/style.css.j2
Normal file
256
roles/web-app-mediawiki/templates/style.css.j2
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user