8bd649d9ab
P23 — Skinny Packages: - Break conf→bib circular dependency with lazy guarded import - Extract aco.table.base → conf.table_base (shared foundation) - Add try/except ImportError guards on all cross-module imports - Define per-module optional-dependencies in pyproject.toml - Slim base deps to just pydantic; all heavy deps in optional groups - Add gen_config.py --check validation for module/dep sync - Add skinny-install CI matrix job (tests each extra in isolation) P24 — Tree Reorganization: - Move service configs to infra/ (traefik, coredns, grafana, etc.) - Consolidate Dockerfiles under infra/images/ - Move styles/ → assets/css/ + assets/icons/ + assets/nature.py - Update compose.yml, stack.toml, gen_config.py, all backend emitters - Update bootstrap scripts and install_certs.sh P25 — Cloud Provider Abstraction: - Add cloud/ directory with self-hosted, aws, gcp, azure stubs - Add cloud contexts (aws, gcp, azure) to stack.toml - Add conf/storage.py — get_filesystem() dispatches per context - Add aws, gcp, azure optional dependency groups - Document service mapping for each provider All 11955 tests pass. Zero functionality lost.
881 lines
22 KiB
CSS
881 lines
22 KiB
CSS
/* LOCH — deep-navy design system */
|
|
/* Full marimo theme: semantic vars, Radix scales, prose, CodeMirror */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
|
|
|
/* ============================================
|
|
LOCH COLOR PALETTE
|
|
============================================ */
|
|
:root {
|
|
--ds-navy: #0a1628;
|
|
--ds-navy-light: #162040;
|
|
--ds-navy-mid: #1e2d50;
|
|
--ds-slate: #2a3f5f;
|
|
--ds-steel: #8a9fbb;
|
|
--ds-silver: #b0c0d8;
|
|
--ds-white: #f0f0f0;
|
|
|
|
--ds-blue: #4477dd;
|
|
--ds-blue-light: #6699ee;
|
|
--ds-blue-bright: #99bbff;
|
|
|
|
--ds-red: #ee5577;
|
|
--ds-red-light: #ee6688;
|
|
--ds-red-bright: #ffaabc;
|
|
|
|
--ds-green: #44aa44;
|
|
--ds-green-light: #77dd77;
|
|
--ds-green-bright: #b1f1b1;
|
|
|
|
--ds-yellow: #eebb44;
|
|
--ds-yellow-light: #ffdd77;
|
|
--ds-yellow-bright: #fff0bb;
|
|
|
|
--ds-purple: #9977cc;
|
|
--ds-purple-light: #bb99ee;
|
|
|
|
--ds-cyan: #55bbcc;
|
|
--ds-cyan-light: #88ddee;
|
|
}
|
|
|
|
/* ============================================
|
|
FONT CONFIGURATION
|
|
============================================ */
|
|
:root {
|
|
--monospace-font: 'IBM Plex Mono', 'Courier New', monospace;
|
|
--text-font: 'IBM Plex Mono', 'Courier New', monospace;
|
|
--heading-font: 'IBM Plex Mono', monospace;
|
|
--marimo-monospace-font: 'IBM Plex Mono', 'Courier New', monospace;
|
|
--marimo-text-font: 'IBM Plex Mono', 'Courier New', monospace;
|
|
--marimo-heading-font: 'IBM Plex Mono', monospace;
|
|
}
|
|
|
|
/* ============================================
|
|
MARIMO SEMANTIC VARIABLES
|
|
============================================ */
|
|
:root {
|
|
--background: var(--ds-navy);
|
|
--foreground: var(--ds-white);
|
|
|
|
--muted: var(--ds-navy-light);
|
|
--muted-foreground: var(--ds-steel);
|
|
|
|
--popover: var(--ds-navy-light);
|
|
--popover-foreground: var(--ds-white);
|
|
|
|
--card: var(--ds-navy);
|
|
--card-foreground: var(--ds-white);
|
|
|
|
--border: var(--ds-slate);
|
|
--input: var(--ds-navy-mid);
|
|
--ring: var(--ds-blue-light);
|
|
--radius: 2px;
|
|
|
|
--primary: var(--ds-blue);
|
|
--primary-foreground: var(--ds-white);
|
|
|
|
--secondary: var(--ds-slate);
|
|
--secondary-foreground: var(--ds-white);
|
|
|
|
--accent: var(--ds-navy-mid);
|
|
--accent-foreground: var(--ds-blue-bright);
|
|
|
|
--destructive: var(--ds-red);
|
|
--destructive-foreground: var(--ds-white);
|
|
|
|
--error: var(--ds-red);
|
|
--error-foreground: var(--ds-white);
|
|
|
|
--success: var(--ds-green-light);
|
|
--success-foreground: var(--ds-white);
|
|
|
|
--action: var(--ds-yellow);
|
|
--action-hover: var(--ds-yellow-light);
|
|
--action-foreground: var(--ds-navy);
|
|
|
|
--link: var(--ds-blue-bright);
|
|
--link-visited: var(--ds-purple-light);
|
|
|
|
--stale: rgba(238, 187, 68, 0.25);
|
|
|
|
--base-shadow: rgba(0, 0, 0, 0.4);
|
|
--base-shadow-darker: rgba(0, 0, 0, 0.6);
|
|
--base-shadow-opacity: 20%;
|
|
|
|
--cm-background: var(--ds-navy);
|
|
|
|
--background-image: none;
|
|
--background-repeat: no-repeat;
|
|
--background-attachment: fixed;
|
|
--background-size: cover;
|
|
}
|
|
|
|
/* ============================================
|
|
RADIX COLOR SCALES - Navy-tinted
|
|
Remap neutral scales so all UI surfaces
|
|
use navy tones instead of default grays.
|
|
Steps 11-12 must be bright for text.
|
|
============================================ */
|
|
.dark, .dark-theme, :root {
|
|
/* Gray → Navy */
|
|
--gray-1: #0a1628;
|
|
--gray-2: #0f1b30;
|
|
--gray-3: #162040;
|
|
--gray-4: #1e2d50;
|
|
--gray-5: #253660;
|
|
--gray-6: #2a3f5f;
|
|
--gray-7: #3a5070;
|
|
--gray-8: #506888;
|
|
--gray-9: #6a82a0;
|
|
--gray-10: #7a94b4;
|
|
--gray-11: #a0b4cc;
|
|
--gray-12: #e8edf4;
|
|
|
|
/* Slate → Navy */
|
|
--slate-1: #0a1628;
|
|
--slate-2: #0f1b30;
|
|
--slate-3: #162040;
|
|
--slate-4: #1e2d50;
|
|
--slate-5: #253660;
|
|
--slate-6: #2a3f5f;
|
|
--slate-7: #3a5070;
|
|
--slate-8: #506888;
|
|
--slate-9: #6a82a0;
|
|
--slate-10: #7a94b4;
|
|
--slate-11: #a0b4cc;
|
|
--slate-12: #e8edf4;
|
|
|
|
/* Sage → Navy (slight green tint) */
|
|
--sage-1: #0a1620;
|
|
--sage-2: #0f1b2a;
|
|
--sage-3: #152038;
|
|
--sage-4: #1c2d48;
|
|
--sage-5: #243658;
|
|
--sage-6: #2a3f5a;
|
|
--sage-7: #38506a;
|
|
--sage-8: #4e6882;
|
|
--sage-9: #68829c;
|
|
--sage-10: #7894b0;
|
|
--sage-11: #a0b4c8;
|
|
--sage-12: #e6ecf2;
|
|
|
|
/* Blue - subtle navy tints for bg steps, bright for text steps */
|
|
--blue-1: #0a1628;
|
|
--blue-2: #0e1a30;
|
|
--blue-3: #121f3a;
|
|
--blue-4: #162544;
|
|
--blue-5: #1c2e52;
|
|
--blue-6: #243a62;
|
|
--blue-7: #2e4a78;
|
|
--blue-8: #3a5e96;
|
|
--blue-9: #4477dd;
|
|
--blue-10: #6699ee;
|
|
--blue-11: #99bbff;
|
|
--blue-12: #ccdcff;
|
|
|
|
/* Red */
|
|
--red-1: #1a0f14;
|
|
--red-2: #24121a;
|
|
--red-3: #3a1420;
|
|
--red-4: #50162a;
|
|
--red-5: #661a34;
|
|
--red-6: #802040;
|
|
--red-7: #aa3050;
|
|
--red-8: #ee5577;
|
|
--red-9: #dd4466;
|
|
--red-10: #ee6688;
|
|
--red-11: #ff99aa;
|
|
--red-12: #ffd0d8;
|
|
|
|
/* Green */
|
|
--green-1: #0c1610;
|
|
--green-2: #101e14;
|
|
--green-3: #162a1c;
|
|
--green-4: #1c3824;
|
|
--green-5: #22462e;
|
|
--green-6: #2a5838;
|
|
--green-7: #348844;
|
|
--green-8: #44aa44;
|
|
--green-9: #55bb55;
|
|
--green-10: #77dd77;
|
|
--green-11: #99ee99;
|
|
--green-12: #ccffcc;
|
|
|
|
/* Grass (similar to green) */
|
|
--grass-1: #0c1610;
|
|
--grass-2: #101e14;
|
|
--grass-3: #162a1c;
|
|
--grass-4: #1c3824;
|
|
--grass-5: #22462e;
|
|
--grass-6: #2a5838;
|
|
--grass-7: #348844;
|
|
--grass-8: #44aa44;
|
|
--grass-9: #55bb55;
|
|
--grass-10: #77dd77;
|
|
--grass-11: #99ee99;
|
|
--grass-12: #ccffcc;
|
|
|
|
/* Yellow */
|
|
--yellow-1: #16140a;
|
|
--yellow-2: #1e1c0e;
|
|
--yellow-3: #302804;
|
|
--yellow-4: #443800;
|
|
--yellow-5: #584800;
|
|
--yellow-6: #6c5a08;
|
|
--yellow-7: #887018;
|
|
--yellow-8: #aa8a28;
|
|
--yellow-9: #eebb44;
|
|
--yellow-10: #ffdd77;
|
|
--yellow-11: #ffee99;
|
|
--yellow-12: #fff8cc;
|
|
|
|
/* Amber */
|
|
--amber-1: #16120a;
|
|
--amber-2: #1e1a0e;
|
|
--amber-3: #302408;
|
|
--amber-4: #443200;
|
|
--amber-5: #584000;
|
|
--amber-6: #6c5008;
|
|
--amber-7: #886418;
|
|
--amber-8: #aa7c28;
|
|
--amber-9: #eebb44;
|
|
--amber-10: #ffcc55;
|
|
--amber-11: #ffdd88;
|
|
--amber-12: #fff0cc;
|
|
|
|
/* Purple */
|
|
--purple-1: #140f1e;
|
|
--purple-2: #1c1428;
|
|
--purple-3: #281c3a;
|
|
--purple-4: #34244e;
|
|
--purple-5: #402c60;
|
|
--purple-6: #503872;
|
|
--purple-7: #664888;
|
|
--purple-8: #8060aa;
|
|
--purple-9: #9977cc;
|
|
--purple-10: #aa88dd;
|
|
--purple-11: #cc99ff;
|
|
--purple-12: #e8ccff;
|
|
|
|
/* Crimson */
|
|
--crimson-1: #1a0e14;
|
|
--crimson-2: #24121c;
|
|
--crimson-3: #3a1428;
|
|
--crimson-4: #501634;
|
|
--crimson-5: #661840;
|
|
--crimson-6: #802050;
|
|
--crimson-7: #aa3068;
|
|
--crimson-8: #cc4080;
|
|
--crimson-9: #dd5090;
|
|
--crimson-10: #ee70a8;
|
|
--crimson-11: #ff99c4;
|
|
--crimson-12: #ffd0e4;
|
|
|
|
/* Cyan */
|
|
--cyan-1: #0a1418;
|
|
--cyan-2: #0e1c22;
|
|
--cyan-3: #122830;
|
|
--cyan-4: #163640;
|
|
--cyan-5: #1c4450;
|
|
--cyan-6: #225560;
|
|
--cyan-7: #306a78;
|
|
--cyan-8: #408898;
|
|
--cyan-9: #55aabc;
|
|
--cyan-10: #77ccdd;
|
|
--cyan-11: #99ddee;
|
|
--cyan-12: #ccf0f8;
|
|
|
|
/* Sky */
|
|
--sky-1: #0a1420;
|
|
--sky-2: #0e1c2c;
|
|
--sky-3: #122840;
|
|
--sky-4: #163656;
|
|
--sky-5: #1c4468;
|
|
--sky-6: #225580;
|
|
--sky-7: #306a98;
|
|
--sky-8: #4088b4;
|
|
--sky-9: #55aadd;
|
|
--sky-10: #77ccee;
|
|
--sky-11: #99ddff;
|
|
--sky-12: #ccf0ff;
|
|
|
|
/* Orange */
|
|
--orange-1: #1a1008;
|
|
--orange-2: #241810;
|
|
--orange-3: #38200a;
|
|
--orange-4: #4c2a00;
|
|
--orange-5: #603600;
|
|
--orange-6: #744408;
|
|
--orange-7: #905818;
|
|
--orange-8: #b07028;
|
|
--orange-9: #ee8833;
|
|
--orange-10: #ffaa55;
|
|
--orange-11: #ffcc88;
|
|
--orange-12: #ffe8cc;
|
|
|
|
/* Lime */
|
|
--lime-1: #12160a;
|
|
--lime-2: #1a1e0e;
|
|
--lime-3: #242c08;
|
|
--lime-4: #303a00;
|
|
--lime-5: #3e4800;
|
|
--lime-6: #4e5a08;
|
|
--lime-7: #627018;
|
|
--lime-8: #7a8a28;
|
|
--lime-9: #99aa44;
|
|
--lime-10: #bbcc66;
|
|
--lime-11: #ccee88;
|
|
--lime-12: #eeffcc;
|
|
}
|
|
|
|
/* ============================================
|
|
TAILWIND PROSE - Markdown content
|
|
============================================ */
|
|
:root {
|
|
--tw-prose-body: var(--ds-white);
|
|
--tw-prose-headings: var(--ds-white);
|
|
--tw-prose-lead: var(--ds-silver);
|
|
--tw-prose-links: var(--ds-blue-bright);
|
|
--tw-prose-bold: var(--ds-white);
|
|
--tw-prose-counters: var(--ds-steel);
|
|
--tw-prose-bullets: var(--ds-steel);
|
|
--tw-prose-hr: var(--ds-slate);
|
|
--tw-prose-quotes: var(--ds-silver);
|
|
--tw-prose-quote-borders: var(--ds-slate);
|
|
--tw-prose-captions: var(--ds-steel);
|
|
--tw-prose-kbd: var(--ds-white);
|
|
--tw-prose-kbd-shadows: rgba(240, 240, 240, 0.1);
|
|
--tw-prose-code: var(--ds-blue-bright);
|
|
--tw-prose-pre-code: var(--ds-silver);
|
|
--tw-prose-pre-bg: var(--ds-navy-light);
|
|
--tw-prose-th-borders: var(--ds-slate);
|
|
--tw-prose-td-borders: var(--ds-navy-mid);
|
|
|
|
/* Invert variants (used in dark mode) */
|
|
--tw-prose-invert-body: var(--ds-white);
|
|
--tw-prose-invert-headings: var(--ds-white);
|
|
--tw-prose-invert-lead: var(--ds-silver);
|
|
--tw-prose-invert-links: var(--ds-blue-bright);
|
|
--tw-prose-invert-bold: var(--ds-white);
|
|
--tw-prose-invert-counters: var(--ds-steel);
|
|
--tw-prose-invert-bullets: var(--ds-steel);
|
|
--tw-prose-invert-hr: var(--ds-slate);
|
|
--tw-prose-invert-quotes: var(--ds-silver);
|
|
--tw-prose-invert-quote-borders: var(--ds-slate);
|
|
--tw-prose-invert-captions: var(--ds-steel);
|
|
--tw-prose-invert-kbd: var(--ds-white);
|
|
--tw-prose-invert-kbd-shadows: rgba(240, 240, 240, 0.1);
|
|
--tw-prose-invert-code: var(--ds-blue-bright);
|
|
--tw-prose-invert-pre-code: var(--ds-silver);
|
|
--tw-prose-invert-pre-bg: var(--ds-navy-light);
|
|
--tw-prose-invert-th-borders: var(--ds-slate);
|
|
--tw-prose-invert-td-borders: var(--ds-navy-mid);
|
|
}
|
|
|
|
/* ============================================
|
|
BODY & BACKGROUNDS
|
|
============================================ */
|
|
body {
|
|
background: var(--ds-navy) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
CODE EDITOR - CODEMIRROR
|
|
============================================ */
|
|
.cm-editor {
|
|
font-family: var(--monospace-font) !important;
|
|
font-size: 14px !important;
|
|
background: var(--ds-navy) !important;
|
|
}
|
|
|
|
.cm-content {
|
|
font-family: var(--monospace-font) !important;
|
|
}
|
|
|
|
.cm-line {
|
|
font-family: var(--monospace-font) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
.cm-gutters {
|
|
background: var(--ds-navy-light) !important;
|
|
border-right: 2px solid var(--ds-slate) !important;
|
|
}
|
|
|
|
.cm-lineNumbers .cm-gutterElement {
|
|
color: var(--ds-steel) !important;
|
|
font-family: var(--monospace-font) !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
/* Syntax highlighting */
|
|
.cm-keyword, .tok-keyword { color: var(--ds-blue-bright) !important; }
|
|
.cm-string, .tok-string { color: var(--ds-green-light) !important; }
|
|
.cm-number, .tok-number { color: var(--ds-yellow) !important; }
|
|
.cm-comment, .tok-comment { color: var(--ds-steel) !important; font-style: italic !important; }
|
|
.cm-function, .tok-function { color: var(--ds-white) !important; }
|
|
.cm-variableName, .tok-variableName { color: var(--ds-white) !important; }
|
|
.cm-operator, .tok-operator { color: var(--ds-blue-light) !important; }
|
|
.cm-propertyName, .tok-propertyName { color: var(--ds-blue-bright) !important; }
|
|
.tok-standard, .cm-builtin { color: var(--ds-red-light) !important; }
|
|
.tok-definition, .cm-def { color: var(--ds-blue-bright) !important; }
|
|
.tok-typeName { color: var(--ds-yellow) !important; }
|
|
.tok-bool { color: var(--ds-red-light) !important; }
|
|
|
|
.cm-cursor {
|
|
border-left: 2px solid var(--ds-white) !important;
|
|
}
|
|
|
|
.cm-selectionBackground,
|
|
::selection {
|
|
background: var(--ds-blue) !important;
|
|
}
|
|
|
|
.cm-activeLine {
|
|
background: rgba(68, 119, 221, 0.12) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
HEADINGS
|
|
============================================ */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--heading-font) !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0.5px !important;
|
|
line-height: 1.8 !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
h1 { font-size: 18px !important; }
|
|
h2 { font-size: 14px !important; color: var(--ds-blue-bright) !important; }
|
|
h3 { font-size: 12px !important; }
|
|
h4, h5, h6 { font-size: 11px !important; }
|
|
|
|
/* ============================================
|
|
TABLES (Table styling)
|
|
============================================ */
|
|
table {
|
|
border-collapse: collapse !important;
|
|
font-family: var(--monospace-font) !important;
|
|
}
|
|
|
|
th {
|
|
background: var(--ds-navy-mid) !important;
|
|
color: var(--ds-white) !important;
|
|
font-family: var(--heading-font) !important;
|
|
font-size: 10px !important;
|
|
padding: 10px 12px !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 1px !important;
|
|
border: 1px solid var(--ds-slate) !important;
|
|
border-bottom: 2px solid var(--ds-blue) !important;
|
|
}
|
|
|
|
td {
|
|
background: var(--ds-navy) !important;
|
|
color: var(--ds-white) !important;
|
|
padding: 8px 12px !important;
|
|
border: 1px solid var(--ds-navy-light) !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
tr:nth-child(even) td {
|
|
background: var(--ds-navy-light) !important;
|
|
}
|
|
|
|
tr:hover td {
|
|
background: rgba(68, 119, 221, 0.2) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTONS
|
|
============================================ */
|
|
button,
|
|
[role="button"],
|
|
.btn {
|
|
font-family: var(--monospace-font) !important;
|
|
font-weight: 500 !important;
|
|
border-radius: 2px !important;
|
|
transition: all 0.15s ease !important;
|
|
}
|
|
|
|
button[data-variant="primary"],
|
|
button.primary,
|
|
[data-action="run"] {
|
|
background: var(--ds-green) !important;
|
|
color: var(--ds-white) !important;
|
|
border: 2px solid var(--ds-green-light) !important;
|
|
}
|
|
|
|
button[data-variant="primary"]:hover,
|
|
button.primary:hover,
|
|
[data-action="run"]:hover {
|
|
background: var(--ds-green-light) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
INPUTS AND FORMS
|
|
============================================ */
|
|
input,
|
|
textarea,
|
|
select {
|
|
font-family: var(--monospace-font) !important;
|
|
background: var(--ds-navy-mid) !important;
|
|
color: var(--ds-white) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
border-radius: 2px !important;
|
|
padding: 8px 12px !important;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: var(--ds-blue-light) !important;
|
|
outline: none !important;
|
|
box-shadow: 0 0 0 2px rgba(102, 153, 238, 0.3) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
CODE BLOCKS (in markdown)
|
|
============================================ */
|
|
pre, code {
|
|
font-family: var(--monospace-font) !important;
|
|
}
|
|
|
|
code {
|
|
background: var(--ds-navy-light) !important;
|
|
color: var(--ds-blue-bright) !important;
|
|
padding: 2px 6px !important;
|
|
border-radius: 2px !important;
|
|
font-size: 0.9em !important;
|
|
}
|
|
|
|
pre {
|
|
background: var(--ds-navy-light) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
border-radius: 2px !important;
|
|
padding: 12px !important;
|
|
}
|
|
|
|
pre code {
|
|
background: transparent !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* ============================================
|
|
LINKS
|
|
============================================ */
|
|
a {
|
|
color: var(--ds-blue-bright) !important;
|
|
text-decoration: none !important;
|
|
transition: color 0.15s ease !important;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--ds-white) !important;
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--ds-purple-light) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
SCROLLBARS
|
|
============================================ */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--ds-navy-light);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--ds-slate);
|
|
border-radius: 6px;
|
|
border: 2px solid var(--ds-navy-light);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--ds-steel);
|
|
}
|
|
|
|
/* ============================================
|
|
TOOLTIPS, DROPDOWNS, MENUS
|
|
============================================ */
|
|
[role="tooltip"],
|
|
[data-state="open"][data-side] {
|
|
font-family: var(--monospace-font) !important;
|
|
font-size: 12px !important;
|
|
background: var(--ds-navy-light) !important;
|
|
color: var(--ds-white) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
border-radius: 2px !important;
|
|
}
|
|
|
|
[role="menu"],
|
|
[role="listbox"] {
|
|
background: var(--ds-navy-light) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
border-radius: 2px !important;
|
|
}
|
|
|
|
[role="menuitem"]:hover,
|
|
[role="option"]:hover,
|
|
[role="menuitem"][data-highlighted],
|
|
[role="option"][data-highlighted] {
|
|
background: var(--ds-blue) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
/* Badges and pills */
|
|
[class*="badge"],
|
|
[class*="pill"],
|
|
[class*="tag"] {
|
|
font-family: var(--monospace-font) !important;
|
|
font-size: 11px !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--ds-blue-light) !important;
|
|
outline-offset: 2px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
CELL OUTPUT AREA
|
|
============================================ */
|
|
[data-testid="outputs"],
|
|
.output-area {
|
|
background: rgba(22, 32, 64, 0.5) !important;
|
|
border-top: 2px solid var(--ds-slate) !important;
|
|
padding: 12px !important;
|
|
}
|
|
|
|
[class*="dataframe"] {
|
|
font-family: var(--monospace-font) !important;
|
|
}
|
|
|
|
[class*="plot"],
|
|
[class*="chart"],
|
|
svg {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* ============================================
|
|
HOME PAGE
|
|
============================================ */
|
|
a[rel="noreferrer"][target="_blank"] {
|
|
background: var(--ds-navy-light) !important;
|
|
border: 3px solid var(--ds-slate) !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
a[rel="noreferrer"][target="_blank"]:hover {
|
|
border-color: var(--ds-blue) !important;
|
|
background: var(--ds-navy-mid) !important;
|
|
}
|
|
|
|
a[rel="noreferrer"][target="_blank"] h2 {
|
|
font-family: var(--heading-font) !important;
|
|
font-size: 12px !important;
|
|
color: var(--ds-white) !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 2px !important;
|
|
}
|
|
|
|
h2.text-xl {
|
|
font-family: var(--heading-font) !important;
|
|
font-size: 11px !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 2px !important;
|
|
color: var(--ds-white) !important;
|
|
padding-bottom: 6px;
|
|
border-bottom: 2px solid var(--ds-slate);
|
|
}
|
|
|
|
.divide-y.border.rounded {
|
|
border: 3px solid var(--ds-slate) !important;
|
|
border-radius: 0 !important;
|
|
background: var(--ds-navy) !important;
|
|
}
|
|
|
|
.divide-y.border > a,
|
|
.divide-y.border > div > a {
|
|
border-color: var(--ds-navy-light) !important;
|
|
transition: all 0.1s ease !important;
|
|
}
|
|
|
|
.divide-y.border > a:hover,
|
|
.divide-y.border > div > a:hover {
|
|
background: rgba(68, 119, 221, 0.2) !important;
|
|
border-left: 3px solid var(--ds-blue) !important;
|
|
}
|
|
|
|
.divide-y.border a .flex-1 span {
|
|
font-family: var(--monospace-font) !important;
|
|
}
|
|
|
|
[class*="cursor-pointer"][class*="whitespace-nowrap"]:hover {
|
|
background: rgba(68, 119, 221, 0.2) !important;
|
|
}
|
|
|
|
[class*="cursor-pointer"][class*="whitespace-nowrap"] span {
|
|
font-family: var(--monospace-font) !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
BORDERS
|
|
============================================ */
|
|
.rounded-lg,
|
|
.rounded-md {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.rounded-sm,
|
|
.rounded {
|
|
border-radius: 2px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
TOP BAR / ACTION BUTTONS
|
|
============================================ */
|
|
.absolute.top-3.right-5 button {
|
|
border: 2px solid var(--ds-slate) !important;
|
|
border-radius: 0 !important;
|
|
background: var(--ds-navy-light) !important;
|
|
}
|
|
|
|
.absolute.top-3.right-5 button:hover {
|
|
background: var(--ds-blue) !important;
|
|
border-color: var(--ds-blue-light) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
SEARCH INPUT
|
|
============================================ */
|
|
input#search {
|
|
border: 3px solid var(--ds-slate) !important;
|
|
border-radius: 0 !important;
|
|
background: var(--ds-navy) !important;
|
|
font-family: var(--monospace-font) !important;
|
|
}
|
|
|
|
input#search:focus {
|
|
border-color: var(--ds-blue-light) !important;
|
|
box-shadow: 0 0 8px rgba(102, 153, 238, 0.3) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTON STATES
|
|
============================================ */
|
|
button:active,
|
|
[role="button"]:active {
|
|
transform: translate(1px, 1px) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* ============================================
|
|
CATCH-ALL: ensure no text is dark/black
|
|
============================================ */
|
|
.dark .text-foreground,
|
|
.text-foreground {
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
.dark .text-muted-foreground,
|
|
.text-muted-foreground {
|
|
color: var(--ds-steel) !important;
|
|
}
|
|
|
|
/* ── Dashboard tiles — file browser as card grid ─────────── */
|
|
|
|
/* Hide marimo resources / external links section */
|
|
.home-page a[href*="docs.marimo.io"],
|
|
.home-page a[href*="discord"],
|
|
.home-page a[href*="github.com/marimo-team"],
|
|
.home-page [class*="resource"],
|
|
.home-page [class*="Resource"],
|
|
section:has(a[href*="docs.marimo.io"]) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* File browser → tile grid */
|
|
.home-page [class*="file-list"],
|
|
.home-page [class*="FileList"],
|
|
.home-page .divide-y {
|
|
display: grid !important;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
|
|
gap: 12px !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Individual notebook tiles */
|
|
.home-page [class*="file-list"] > *,
|
|
.home-page [class*="FileList"] > *,
|
|
.home-page .divide-y > * {
|
|
border: 1px solid #2a3f5f !important;
|
|
border-radius: 6px !important;
|
|
padding: 16px !important;
|
|
background: #162040 !important;
|
|
transition: border-color 0.15s, background 0.15s !important;
|
|
}
|
|
|
|
.home-page [class*="file-list"] > *:hover,
|
|
.home-page [class*="FileList"] > *:hover,
|
|
.home-page .divide-y > *:hover {
|
|
border-color: #4488dd !important;
|
|
background: #1e2d50 !important;
|
|
}
|
|
|
|
/* Tile headings */
|
|
.home-page [class*="file-list"] a,
|
|
.home-page [class*="FileList"] a,
|
|
.home-page .divide-y a {
|
|
color: #f0f0f0 !important;
|
|
font-weight: 600 !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
/* Section headers */
|
|
.home-page h2,
|
|
.home-page [class*="section-header"],
|
|
.home-page .text-xl {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
font-weight: 600 !important;
|
|
font-size: 14px !important;
|
|
letter-spacing: 1px !important;
|
|
text-transform: uppercase !important;
|
|
color: #7a90b0 !important;
|
|
border-bottom: 1px solid #2a3f5f !important;
|
|
padding-bottom: 8px !important;
|
|
margin-bottom: 16px !important;
|
|
}
|
|
|
|
/* ── WCAG 2.2 AA — Accessibility ──────────────────────────── */
|
|
|
|
/* Focus indicators (2.4.7, 2.4.11) */
|
|
:focus-visible {
|
|
outline: 2px solid #4488dd !important;
|
|
outline-offset: 2px !important;
|
|
}
|
|
|
|
/* Reduced motion (2.3.3) */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* Minimum target size (2.5.8) */
|
|
button, [role="button"], a, input, select, textarea {
|
|
min-height: 24px;
|
|
min-width: 24px;
|
|
}
|