/* public/css/smart-theme.css * Global theme overrides that react to --smart-accent, --smart-font-size, * --smart-row-padding set on by the SettingsDrawer. Non-invasive: we * only target existing classes used by SmartTableSection buttons and legacy * button styles, so nothing in the Smart component files needs to change. * * Linked into the page via public/css/*.css — already served statically. */ :root { /* Defaults — get overridden by SettingsDrawer.applyToDocument() at runtime. */ --smart-accent: #6366f1; --smart-font-size: 14px; --smart-row-padding: 8px; } html { font-size: var(--smart-font-size); } body { font-size: var(--smart-font-size); } /* ── SmartTableSection toolbar buttons ────────────────────────────────── * Shrinks the big legacy Create/Delete/Export buttons and wires them to * the accent colour. Works with the existing .create-btn / .delete-btn / * .excel-btn classes already on those buttons — no Smart edit needed. */ /* !important is intentional — both new-layout.css and Vue scoped styles * in SmartTableSection have legacy colours/padding for .create-btn etc. * We need to beat both without touching those files. */ .sts-toolbar .button, .sts-toolbar button.create-btn, .sts-toolbar button.delete-btn, .sts-toolbar button.excel-btn { font-size: calc(var(--smart-font-size) * 0.92) !important; padding: calc(var(--smart-row-padding) * 0.6) calc(var(--smart-row-padding) * 1.4) !important; border-radius: 6px !important; line-height: 1.2 !important; height: auto !important; min-height: 0 !important; font-weight: 500 !important; font-family: inherit !important; } .sts-toolbar button.create-btn { background: var(--smart-accent) !important; color: #fff !important; border: none !important; } .sts-toolbar button.create-btn:hover { filter: brightness(1.08); } .sts-toolbar button.delete-btn { background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fca5a5 !important; } .sts-toolbar button.delete-btn:hover { background: #fecaca !important; } .sts-toolbar button.excel-btn { background: #f3f4f6 !important; color: #374151 !important; border: 1px solid #d1d5db !important; } .sts-toolbar button.excel-btn:hover { background: #e5e7eb !important; } /* ── Smart table row padding driven by density setting ────────────────── */ .p-datatable .p-datatable-tbody > tr > td { padding: var(--smart-row-padding) calc(var(--smart-row-padding) * 1.25); } .p-datatable .p-datatable-thead > tr > th { padding: calc(var(--smart-row-padding) * 1.2) calc(var(--smart-row-padding) * 1.25); font-size: calc(var(--smart-font-size) * 0.92); } /* ── Dark theme primitives — minimal v1 ─────────────────────────────── */ html[data-smart-theme="dark"] body { background: #0f172a; color: #e5e7eb; } html[data-smart-theme="dark"] .p-datatable { background: #1f2937; color: #e5e7eb; } html[data-smart-theme="dark"] .p-datatable .p-datatable-thead > tr > th { background: #111827; color: #f9fafb; } html[data-smart-theme="dark"] .p-datatable .p-datatable-tbody > tr > td { background: #1f2937; border-color: #374151; } html[data-smart-theme="dark"] .p-datatable .p-datatable-tbody > tr:hover > td { background: #273344; }