mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2025-12-02 07:38:22 +00:00
Kevin Veen-Birkenbach
bee833feb4
This ensures CSS output remains stable between runs, preventing unnecessary OpenResty restarts for every service caused by randomized gradients or regenerated CSS files. Ref: https://chatgpt.com/share/69281d4b-2488-800f-8c0c-c0db44810d1d
257 lines
7.0 KiB
Django/Jinja
257 lines
7.0 KiB
Django/Jinja
/* 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({{ CSS_GRADIENT_ANGLE }}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({{ CSS_GRADIENT_ANGLE }}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({{ CSS_GRADIENT_ANGLE }}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);
|
|
}
|
|
}
|