mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2026-11-06 02:54:26 +00:00
kevinveenbirkenbachandClaude Opus 5
aa6bbe3b20
SOFTWARE_NAME, SOFTWARE_DOMAIN, SOFTWARE_URL and ORGANIZATION are declared once in group_vars/all/00_general.yml and derive from each other. Eleven templates wrote the value instead, so a rename would reach the four declarations and every consumer that reads them, and silently miss the literal. The lint reads the name from the declaration rather than carrying it, and searches case-insensitively: the domain is the name lowered, the URL is https:// plus the domain and the organization is the name again, so one literal finds the value of all four. A hit is reported with the variable it should have been, derived from the scheme in front of it and its case. The escape is nocheck: software-identity, same line or the one above. Every migrated template renders the same bytes as before. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
238 lines
6.3 KiB
Django/Jinja
238 lines
6.3 KiB
Django/Jinja
/* MediaWiki (Vector 2022 + OOUI) color remap via {{ SOFTWARE_NAME }} 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 {
|
|
--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);
|
|
|
|
--mw-surface: var(--color-01-92);
|
|
--mw-surface-variant: var(--color-01-90);
|
|
--mw-surface-muted: var(--color-01-95);
|
|
|
|
--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);
|
|
|
|
--mw-border: var(--color-01-85);
|
|
--mw-divider: var(--color-01-87);
|
|
--mw-focus: rgba(var(--color-rgb-01-65), .35);
|
|
|
|
--mw-success: var(--bs-success);
|
|
--mw-warning: var(--bs-warning);
|
|
--mw-danger: var(--bs-danger);
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.skin-vector .mw-logo a,
|
|
.skin-vector .mw-logo svg,
|
|
.skin-vector .vector-header a {
|
|
color: var(--mw-heading);
|
|
fill: currentColor;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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); }
|
|
|
|
.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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
.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 {
|
|
--mw-text: var(--color-01-90);
|
|
--mw-text-muted: var(--color-01-80);
|
|
--mw-heading: var(--color-01-95);
|
|
}
|
|
}
|