ZDDC/transmittal/css/base.css
2026-06-11 13:32:31 -05:00

119 lines
4.2 KiB
CSS

/* Placeholder for contenteditable elements */
[data-placeholder]:empty::before {
content: attr(data-placeholder);
color: var(--text-muted);
pointer-events: none;
}
/* Hide elements that should be hidden when JavaScript is available */
[data-hydrate-hide] {
display: none;
}
@media screen {
body {
margin: 0;
padding: 0;
background: var(--bg-secondary);
}
.stack-below-600 {
display: flex;
flex-direction: row;
}
.page-container {
width: 100%;
max-width: 8.5in;
margin: 20px auto;
padding: 0.375in;
min-height: 0;
background: var(--bg);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
border: 1px solid var(--border);
}
}
@media (max-width: 600px) {
.stack-below-600 {
flex-direction: column;
}
}
@media (max-width: 640px) {
.page-container {
padding: 12px;
}
}
/* ── Dark mode overrides for transmittal-specific hardcoded colours ──────── */
/* Covers verify cards, table rows, path-diff, integrity cards, workflow badge */
/* and Tailwind utility classes used as attributes in template.html. */
@media screen {
/* Integrity verify cards */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .verify-card--ok { background: #052e16; }
:root:not([data-theme="light"]) .verify-card--fail { background: #2d0c0c; }
:root:not([data-theme="light"]) .verify-card--draft { background: #2d2305; }
:root:not([data-theme="light"]) .verify-card--info { background: #0c1a2e; }
}
[data-theme="dark"] .verify-card--ok { background: #052e16; }
[data-theme="dark"] .verify-card--fail { background: #2d0c0c; }
[data-theme="dark"] .verify-card--draft { background: #2d2305; }
[data-theme="dark"] .verify-card--info { background: #0c1a2e; }
/* Per-row verify result rows in file table */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) tr.verify-match td { background: #052e16; }
:root:not([data-theme="light"]) tr.verify-mismatch td { background: #2d0c0c; }
:root:not([data-theme="light"]) tr.verify-missing td { background: #2d2305; }
:root:not([data-theme="light"]) tr.verify-new td { background: #0c1a2e; }
}
[data-theme="dark"] tr.verify-match td { background: #052e16; }
[data-theme="dark"] tr.verify-mismatch td { background: #2d0c0c; }
[data-theme="dark"] tr.verify-missing td { background: #2d2305; }
[data-theme="dark"] tr.verify-new td { background: #0c1a2e; }
/* Workflow warning badge */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .workflow-badge--warn {
background: #2d2305;
color: #fcd34d;
border-color: #92400e;
}
}
[data-theme="dark"] .workflow-badge--warn {
background: #2d2305;
color: #fcd34d;
border-color: #92400e;
}
/* Path diff semantic colours (verify mismatch) */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .path-diff del {
color: #fca5a5;
background: #2d0c0c;
}
:root:not([data-theme="light"]) .path-diff ins {
color: #86efac;
background: #052e16;
border-bottom-color: #86efac;
}
}
[data-theme="dark"] .path-diff del { color: #fca5a5; background: #2d0c0c; }
[data-theme="dark"] .path-diff ins {
color: #86efac;
background: #052e16;
border-bottom-color: #86efac;
}
/* Note: dark-mode overrides for .bg-white / .bg-gray-* / .text-gray-*
/ .border-gray-* and .header-names used to live here as a 17-line
block of !important rules to fight hardcoded colors in
transmittal/css/utilities.css. The utility classes were tokenized
(var(--bg), var(--bg-secondary), var(--text), var(--text-muted),
var(--border)) so the cascade now does the right thing in both
themes without per-class overrides. .table-filter-input is unused
(no element references it; .column-filter from shared is used
instead) and was likewise dropped. */
}