mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2026-11-09 20:26:33 +00:00
kevinveenbirkenbachandClaude Opus 5
faadf5b850
sys-front-inj-design now renders templates/css/app.css.j2 ahead of the role's stylesheet and templates/js/design.js.j2 ahead of its script. The branding URLs, the slot dimensions and the logo guard live there instead of being repeated per role: the guard that stood in 41 sheets is one condition in the composing template, and a sheet reads branding through --design-url-* / --design-slot-* custom properties. 29 stylesheets and 43 design scripts lose their Jinja and move to static files. Roles whose sheet carries app-specific URLs declare them as design_css_urls and read them as --design-url-app-*. The script prelude is prepended only when the role script references it, and it carries urls only while a logo is configured, so every role that needs neither is emitted byte for byte as before. Five checks keep the mechanism honest: a composed sheet may only read design custom properties that app.css.j2 declares for its role, a template may not carry Jinja expression text outside its delimiters, a design script may not quote its config object, and the injected-script parse check now covers the design channel. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
198 lines
6.7 KiB
CSS
198 lines
6.7 KiB
CSS
html:not([data-pgadmin-theme="high_contrast"]) body {
|
|
background-color: var(--design-surface-1);
|
|
color: var(--design-text);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .dock-layout .dock-content,
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .dock-layout .dock-bar,
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .dock-layout .dock-panel .dock-tabpane {
|
|
background-color: var(--design-surface-1);
|
|
color: var(--design-text);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .dock-layout .dock-tab {
|
|
color: var(--design-text-muted);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .dock-layout .dock-tab.dock-tab-active {
|
|
color: var(--design-link);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .dock-layout .dock-ink-bar {
|
|
background-color: var(--design-primary);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .dock-layout .dock-divider::before {
|
|
background-color: var(--design-border);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .file-tree {
|
|
color: var(--design-text) !important;
|
|
background-color: var(--design-surface-1) !important;
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .file-entry:hover,
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .file-entry.pseudo-active {
|
|
color: var(--design-text) !important;
|
|
background-color: var(--design-surface-hover) !important;
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .file-entry.active,
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .file-entry.prompt {
|
|
color: var(--design-text) !important;
|
|
background-color: var(--design-surface-active) !important;
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body [data-test="app-menu-bar"] {
|
|
--design-focus: var(--design-on-frame);
|
|
background-color: var(--design-frame);
|
|
color: var(--design-on-frame);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body [data-test="app-menu-bar"] .MuiButton-root {
|
|
background-color: var(--design-frame);
|
|
color: var(--design-on-frame);
|
|
border-color: var(--design-frame);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body [data-test="app-menu-bar"] .MuiButton-root:hover {
|
|
background-color: var(--design-frame-hover);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body [data-test="app-menu-bar"] .MuiButton-root[aria-expanded="true"] {
|
|
background-color: var(--design-frame-active);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .szh-menu {
|
|
--design-focus: var(--design-link);
|
|
background-color: var(--design-surface-2);
|
|
color: var(--design-text);
|
|
border-color: var(--design-border);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiPaper-root,
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiDialog-paper {
|
|
background-color: var(--design-surface-2);
|
|
color: var(--design-text);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiTabs-root,
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiAccordionSummary-root,
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiCardHeader-root {
|
|
background-color: var(--design-surface-2);
|
|
border-color: var(--design-border);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiTab-root.Mui-selected {
|
|
color: var(--design-link);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiTabs-indicator {
|
|
background-color: var(--design-primary);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiInputBase-root,
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiInputBase-input {
|
|
background-color: var(--design-surface-2);
|
|
color: var(--design-text);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiOutlinedInput-notchedOutline {
|
|
border-color: var(--design-border-strong);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiInputBase-root.Mui-disabled,
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiInputBase-input[readonly] {
|
|
background-color: var(--design-surface-3);
|
|
color: var(--design-text-muted);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiFormLabel-root {
|
|
color: var(--design-text);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiFormHelperText-root,
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .text-muted {
|
|
color: var(--design-text-muted);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiButton-containedPrimary {
|
|
background-color: var(--design-primary);
|
|
color: var(--design-on-primary);
|
|
border-color: var(--design-primary);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiButton-containedPrimary:hover {
|
|
background-color: var(--design-primary-hover);
|
|
border-color: var(--design-primary-hover);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiButton-outlined {
|
|
background-color: var(--design-surface-2);
|
|
color: var(--design-text);
|
|
border-color: var(--design-border-strong);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiButton-outlined:hover {
|
|
background-color: var(--design-surface-hover);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiListItemButton-root.Mui-selected,
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiToggleButton-root.Mui-selected {
|
|
background-color: var(--design-surface-active);
|
|
color: var(--design-text);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .MuiTooltip-tooltip {
|
|
background-color: var(--design-text);
|
|
color: var(--design-surface-1);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body a {
|
|
color: var(--design-link);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .cm-editor {
|
|
background-color: var(--design-surface-1);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .cm-editor .cm-gutters {
|
|
background-color: var(--design-surface-3);
|
|
color: var(--design-text-muted);
|
|
border-color: var(--design-border);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body .cm-editor .cm-activeLine {
|
|
background-color: var(--design-surface-hover);
|
|
}
|
|
|
|
html:not([data-pgadmin-theme="high_contrast"]) body [data-test="app-menu-bar"] .MuiButton-root:focus-visible,
|
|
html:not([data-pgadmin-theme="high_contrast"]) body [data-test="app-menu-bar"] .MuiButton-root.Mui-focusVisible {
|
|
outline: 2px solid var(--design-focus);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
html body #root > div:has(> div > .BasePage-pageContent) {
|
|
background-color: var(--design-frame);
|
|
color: var(--design-on-frame);
|
|
}
|
|
|
|
html body #root .BasePage-pageContent {
|
|
background-color: var(--design-frame-active);
|
|
color: var(--design-on-frame);
|
|
}
|
|
|
|
html body #root .BasePage-pageContent a {
|
|
color: var(--design-on-frame);
|
|
}
|
|
|
|
html body #root .BasePage-pageContent .MuiButton-root.MuiButton-outlinedPrimary {
|
|
background-color: var(--design-primary);
|
|
border-color: var(--design-primary);
|
|
color: var(--design-on-primary);
|
|
}
|
|
|
|
html body #root .BasePage-pageContent .MuiButton-root.MuiButton-outlinedPrimary:hover {
|
|
background-color: var(--design-primary-hover);
|
|
}
|