krz/omaha-metro-blotter

  1:root {
  2    --bg: #fff;
  3    --fg: #111;
  4    --muted: #555;
  5    --border: #ddd;
  6    --panel: #fafafa;
  7}
  8
  9@media (prefers-color-scheme: dark) {
 10    :root {
 11        --bg: #14161a;
 12        --fg: #e8e8ea;
 13        --muted: #9aa0a6;
 14        --border: #333840;
 15        --panel: #1b1e24;
 16
 17        /* Dash 3 ships light-only values for its component design tokens. */
 18        --Dash-Text-Primary: #e8e8ea;
 19        --Dash-Text-Strong: #f2f2f4;
 20        --Dash-Text-Weak: #9aa0a6;
 21        --Dash-Text-Disabled: #6b7178;
 22        --Dash-Stroke-Strong: rgba(232, 232, 234, 0.45);
 23        --Dash-Stroke-Weak: rgba(232, 232, 234, 0.15);
 24        --Dash-Fill-Inverse-Strong: #1b1e24;
 25        --Dash-Fill-Interactive-Weak: rgba(255, 255, 255, 0.06);
 26        --Dash-Fill-Primary-Hover: rgba(255, 255, 255, 0.06);
 27        --Dash-Fill-Primary-Active: rgba(255, 255, 255, 0.1);
 28        --Dash-Fill-Disabled: rgba(255, 255, 255, 0.1);
 29    }
 30}
 31
 32body {
 33    background: var(--bg);
 34    color: var(--fg);
 35    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
 36    max-width: 80vw;
 37    margin: 2rem auto;
 38}
 39
 40.dash-table-container {
 41    overflow: scroll;
 42}
 43
 44.dash-table-container,
 45.dash-graph {
 46    margin: 2rem 0;
 47    max-width: 100%;
 48}
 49
 50.subtitle {
 51    color: var(--muted);
 52    margin-top: -0.5rem;
 53}
 54
 55.controls {
 56    display: grid;
 57    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 58    gap: 1rem;
 59    margin: 1.5rem 0;
 60}
 61
 62.controls label {
 63    display: block;
 64    font-size: 0.85rem;
 65    font-weight: 600;
 66    margin-bottom: 0.25rem;
 67}
 68
 69.kpis {
 70    display: grid;
 71    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 72    gap: 1rem;
 73}
 74
 75.kpi {
 76    background: var(--panel);
 77    border: 1px solid var(--border);
 78    border-radius: 6px;
 79    padding: 0.75rem 1rem;
 80}
 81
 82.kpi-value {
 83    display: block;
 84    font-size: 1.6rem;
 85    font-weight: 600;
 86}
 87
 88.kpi-label {
 89    display: block;
 90    font-size: 0.8rem;
 91    color: var(--muted);
 92}
 93
 94.row {
 95    display: grid;
 96    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
 97    gap: 1rem;
 98}
 99
100.row .half {
101    min-width: 0;
102}
103
104/* DataTable paints its own colours instead of reading the tokens above. */
105@media (prefers-color-scheme: dark) {
106    .dash-spreadsheet-inner td,
107    .dash-spreadsheet-inner th,
108    .dash-spreadsheet-inner td.dash-cell,
109    .dash-spreadsheet-inner th.dash-header {
110        background-color: var(--panel) !important;
111        border-color: var(--border) !important;
112        color: var(--fg) !important;
113    }
114
115    .dash-spreadsheet-menu,
116    .dash-spreadsheet-container {
117        color: var(--fg);
118    }
119}