05183164c1
## WCAG colour contrast fixes (4.5:1 minimum) - --ds-steel: #5a7090 → #7a90b0 (3.59 → 5.56) - --ds-blue: #3366cc → #4488dd (3.38 → 5.02) - --ds-red: #cc2244 → #ee5577 (3.35 → 5.35) ## WCAG accessibility additions - :focus-visible outlines, prefers-reduced-motion, 24px targets ## Marimo dashboard tiles (#53) - Hide resources section, card grid layout, hover states fix #52, fix #53
619 lines
16 KiB
CSS
619 lines
16 KiB
CSS
/* LOCH — deep-navy design system */
|
|
/* Uses marimo's native CSS variable system for proper theming */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
|
|
|
/* ============================================
|
|
FONT CONFIGURATION
|
|
============================================ */
|
|
:root {
|
|
--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;
|
|
}
|
|
|
|
/* ============================================
|
|
LOCH COLOR PALETTE
|
|
============================================ */
|
|
:root {
|
|
--ds-navy: #0a1628;
|
|
--ds-navy-light: #162040;
|
|
--ds-navy-mid: #1e2d50;
|
|
--ds-slate: #2a3f5f;
|
|
--ds-steel: #8a9fbb;
|
|
--ds-white: #f0f0f0;
|
|
|
|
--ds-blue: #4477dd;
|
|
--ds-blue-light: #6699ee;
|
|
--ds-blue-bright: #99bbff;
|
|
|
|
--ds-red: #ee5577;
|
|
--ds-red-light: #ee6688;
|
|
|
|
--ds-green: #44aa44;
|
|
--ds-green-light: #77dd77;
|
|
--ds-yellow: #eebb44;
|
|
}
|
|
|
|
/* ============================================
|
|
MARIMO THEME VARIABLES (Dark Mode)
|
|
============================================ */
|
|
:root {
|
|
/* Base colors */
|
|
--background: var(--ds-navy);
|
|
--foreground: var(--ds-white);
|
|
|
|
/* Muted/secondary text */
|
|
--muted: var(--ds-navy-light);
|
|
--muted-foreground: var(--ds-steel);
|
|
|
|
/* Popover/dropdown backgrounds */
|
|
--popover: var(--ds-navy-light);
|
|
--popover-foreground: var(--ds-white);
|
|
|
|
/* Cards (cells) */
|
|
--card: var(--ds-navy);
|
|
--card-foreground: var(--ds-white);
|
|
|
|
/* Borders and inputs */
|
|
--border: var(--ds-slate);
|
|
--input: var(--ds-navy-mid);
|
|
|
|
/* Primary action color */
|
|
--primary: var(--ds-blue);
|
|
--primary-foreground: var(--ds-white);
|
|
|
|
/* Secondary elements */
|
|
--secondary: var(--ds-slate);
|
|
--secondary-foreground: var(--ds-white);
|
|
|
|
/* Accent/highlight */
|
|
--accent: var(--ds-blue-light);
|
|
--accent-foreground: var(--ds-white);
|
|
|
|
/* Focus ring */
|
|
--ring: var(--ds-blue-light);
|
|
}
|
|
|
|
/* ============================================
|
|
SEMANTIC COLORS
|
|
============================================ */
|
|
:root {
|
|
/* Error states */
|
|
--destructive: var(--ds-red);
|
|
--destructive-foreground: var(--ds-white);
|
|
--error: var(--ds-red);
|
|
--error-foreground: var(--ds-white);
|
|
|
|
/* Success states */
|
|
--success: var(--ds-green);
|
|
--success-foreground: var(--ds-white);
|
|
|
|
/* Action buttons (run, etc) */
|
|
--action: var(--ds-green);
|
|
--action-hover: var(--ds-green-light);
|
|
--action-foreground: var(--ds-white);
|
|
|
|
/* Links */
|
|
--link: var(--ds-blue-bright);
|
|
--link-visited: var(--ds-blue-light);
|
|
|
|
/* Stale indicator */
|
|
--stale: rgba(221, 170, 51, 0.25);
|
|
}
|
|
|
|
/* ============================================
|
|
SHADOWS
|
|
============================================ */
|
|
:root {
|
|
--base-shadow: rgba(0, 0, 0, 0.4);
|
|
--base-shadow-darker: rgba(0, 0, 0, 0.6);
|
|
--base-shadow-opacity: 20%;
|
|
}
|
|
|
|
/* ============================================
|
|
BACKGROUND
|
|
============================================ */
|
|
:root {
|
|
--background-image: none;
|
|
--background-repeat: no-repeat;
|
|
--background-attachment: fixed;
|
|
--background-size: cover;
|
|
}
|
|
|
|
body {
|
|
background: var(--ds-navy) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
CODE EDITOR - CODEMIRROR STYLING
|
|
============================================ */
|
|
.cm-editor {
|
|
font-family: var(--marimo-monospace-font) !important;
|
|
font-size: 14px !important;
|
|
background: var(--ds-navy) !important;
|
|
}
|
|
|
|
.cm-content {
|
|
font-family: var(--marimo-monospace-font) !important;
|
|
}
|
|
|
|
.cm-line {
|
|
font-family: var(--marimo-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(--marimo-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; }
|
|
|
|
/* Cursor */
|
|
.cm-cursor {
|
|
border-left: 2px solid var(--ds-white) !important;
|
|
}
|
|
|
|
/* Selection */
|
|
.cm-selectionBackground,
|
|
::selection {
|
|
background: var(--ds-blue) !important;
|
|
}
|
|
|
|
/* Active line */
|
|
.cm-activeLine {
|
|
background: rgba(51, 102, 204, 0.15) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
HEADINGS
|
|
============================================ */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--marimo-heading-font) !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0.5px !important;
|
|
line-height: 1.8 !important;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 18px !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
h2 {
|
|
font-size: 14px !important;
|
|
color: var(--ds-blue-bright) !important;
|
|
}
|
|
h3 {
|
|
font-size: 12px !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
h4, h5, h6 {
|
|
font-size: 11px !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
TABLES (Table styling)
|
|
============================================ */
|
|
table {
|
|
border-collapse: collapse !important;
|
|
font-family: var(--marimo-monospace-font) !important;
|
|
}
|
|
|
|
th {
|
|
background: var(--ds-blue) !important;
|
|
color: var(--ds-white) !important;
|
|
font-family: var(--marimo-heading-font) !important;
|
|
font-size: 10px !important;
|
|
padding: 10px 12px !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 1px !important;
|
|
border: 1px solid var(--ds-blue-light) !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(51, 102, 204, 0.2) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTONS
|
|
============================================ */
|
|
button,
|
|
[role="button"],
|
|
.btn {
|
|
font-family: var(--marimo-monospace-font) !important;
|
|
font-weight: 500 !important;
|
|
border-radius: 4px !important;
|
|
transition: all 0.15s ease !important;
|
|
}
|
|
|
|
/* Primary/action buttons should be visible */
|
|
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(--marimo-monospace-font) !important;
|
|
background: var(--ds-navy-mid) !important;
|
|
color: var(--ds-white) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
border-radius: 4px !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(85, 136, 221, 0.3) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
CODE BLOCKS (in markdown)
|
|
============================================ */
|
|
pre, code {
|
|
font-family: var(--marimo-monospace-font) !important;
|
|
}
|
|
|
|
code {
|
|
background: var(--ds-navy-light) !important;
|
|
color: var(--ds-blue-bright) !important;
|
|
padding: 2px 6px !important;
|
|
border-radius: 3px !important;
|
|
font-size: 0.9em !important;
|
|
}
|
|
|
|
pre {
|
|
background: var(--ds-navy) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
border-radius: 4px !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-blue-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);
|
|
}
|
|
|
|
/* ============================================
|
|
MISC UI REFINEMENTS
|
|
============================================ */
|
|
|
|
/* Tooltips */
|
|
[role="tooltip"],
|
|
[data-state="open"][data-side] {
|
|
font-family: var(--marimo-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: 4px !important;
|
|
}
|
|
|
|
/* Dropdown menus */
|
|
[role="menu"],
|
|
[role="listbox"] {
|
|
background: var(--ds-navy-light) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
border-radius: 4px !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(--marimo-monospace-font) !important;
|
|
font-size: 11px !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
/* Focus visible for accessibility */
|
|
: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;
|
|
}
|
|
|
|
/* DataFrame outputs */
|
|
[class*="dataframe"] {
|
|
font-family: var(--marimo-monospace-font) !important;
|
|
}
|
|
|
|
/* Plot/chart containers */
|
|
[class*="plot"],
|
|
[class*="chart"],
|
|
svg {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* ============================================
|
|
HOME PAGE - "CREATE NEW NOTEBOOK" CARD
|
|
============================================ */
|
|
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(--marimo-heading-font) !important;
|
|
font-size: 12px !important;
|
|
color: var(--ds-white) !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 2px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
HOME PAGE - SECTION HEADERS
|
|
============================================ */
|
|
h2.text-xl {
|
|
font-family: var(--marimo-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);
|
|
}
|
|
|
|
/* ============================================
|
|
HOME PAGE - FILE LISTS (notebook lists)
|
|
============================================ */
|
|
.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(51, 102, 204, 0.2) !important;
|
|
border-left: 3px solid var(--ds-blue) !important;
|
|
}
|
|
|
|
.divide-y.border a .flex-1 span {
|
|
font-family: var(--marimo-monospace-font) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
HOME PAGE - WORKSPACE FILE TREE
|
|
============================================ */
|
|
[class*="cursor-pointer"][class*="whitespace-nowrap"]:hover {
|
|
background: rgba(51, 102, 204, 0.2) !important;
|
|
}
|
|
|
|
[class*="cursor-pointer"][class*="whitespace-nowrap"] span {
|
|
font-family: var(--marimo-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(--marimo-monospace-font) !important;
|
|
}
|
|
|
|
input#search:focus {
|
|
border-color: var(--ds-blue-light) !important;
|
|
box-shadow: 0 0 8px rgba(85, 136, 221, 0.3) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTON STATES
|
|
============================================ */
|
|
button:active,
|
|
[role="button"]:active {
|
|
transform: translate(1px, 1px) !important;
|
|
box-shadow: none !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;
|
|
}
|