centralize all theme CSS into top-level css/ directory
Move scattered CSS files into css/ as canonical home for all styles: - inject.css (universal injectable, was nginx/throwback.css) - dashboard.css (extracted from nginx/index.html inline styles) - gitea.css, woodpecker.css, marimo.css (moved from service dirs) - throwback.css (reference palette, single source of truth) Rewire compose.yml volume mounts to source from css/.
This commit is contained in:
kert
@@ -116,6 +116,7 @@ services:
|
||||
- gitea_data:/var/lib/gitea
|
||||
- gitea_config:/etc/gitea
|
||||
- ./gitea/custom:/var/lib/gitea/custom:ro
|
||||
- ./css/gitea.css:/var/lib/gitea/custom/public/assets/css/theme-throwback.css:ro
|
||||
ports:
|
||||
- "2222:2222"
|
||||
depends_on:
|
||||
@@ -148,7 +149,7 @@ services:
|
||||
- WOODPECKER_CUSTOM_CSS_FILE=/etc/woodpecker/custom.css
|
||||
volumes:
|
||||
- woodpecker_data:/var/lib/woodpecker
|
||||
- ./woodpecker/custom.css:/etc/woodpecker/custom.css:ro
|
||||
- ./css/woodpecker.css:/etc/woodpecker/custom.css:ro
|
||||
depends_on:
|
||||
- gitea
|
||||
- postgres
|
||||
@@ -184,6 +185,7 @@ services:
|
||||
volumes:
|
||||
- ./notebooks:/home/kert/notebooks
|
||||
- ./notebooks/.marimo-config:/home/kert/.config/marimo:ro
|
||||
- ./css/marimo.css:/home/kert/.config/marimo/retro-arcade.css:ro
|
||||
- ./notebooks/home-page-DUMF8ZY4.js:/home/kert/workspace/.venv/lib/python3.13/site-packages/marimo/_static/assets/home-page-DUMF8ZY4.js:ro
|
||||
- ./data:/home/kert/data
|
||||
- ./zotero/data:/home/kert/zotero:ro
|
||||
@@ -331,7 +333,8 @@ services:
|
||||
volumes:
|
||||
- ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
|
||||
- ./nginx/index.html:/usr/share/nginx/html/index.html:ro
|
||||
- ./nginx/throwback.css:/usr/share/nginx/html/throwback.css:ro
|
||||
- ./css/dashboard.css:/usr/share/nginx/html/dashboard.css:ro
|
||||
- ./css/inject.css:/usr/share/nginx/html/throwback.css:ro
|
||||
security_opt:
|
||||
- no-new-privileges:true
|
||||
restart: unless-stopped
|
||||
|
||||
192
css/dashboard.css
Normal file
192
css/dashboard.css
Normal file
@@ -0,0 +1,192 @@
|
||||
/* THROWBACK THEME — Dashboard (nginx landing page)
|
||||
Extracted from nginx/index.html inline styles */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
||||
|
||||
:root {
|
||||
--tb-navy: #0a1628;
|
||||
--tb-navy-light: #162040;
|
||||
--tb-navy-mid: #1e2d50;
|
||||
--tb-slate: #2a3f5f;
|
||||
--tb-steel: #5a7090;
|
||||
--tb-white: #f0f0f0;
|
||||
--tb-blue: #3366cc;
|
||||
--tb-blue-light: #5588dd;
|
||||
--tb-blue-bright: #88aaee;
|
||||
--tb-red: #cc2244;
|
||||
--tb-red-light: #dd4466;
|
||||
--tb-green: #44aa44;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'IBM Plex Mono', 'Courier New', monospace;
|
||||
background: var(--tb-navy);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
color: var(--tb-white);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
border-bottom: 4px solid var(--tb-red);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 2rem;
|
||||
color: var(--tb-white);
|
||||
letter-spacing: 6px;
|
||||
text-shadow: 3px 3px 0 var(--tb-navy-mid);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
color: var(--tb-blue-bright);
|
||||
font-size: 0.55rem;
|
||||
margin-top: 15px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.score-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin-top: 20px;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.score-item {
|
||||
color: var(--tb-white);
|
||||
background: var(--tb-blue);
|
||||
padding: 6px 14px;
|
||||
border: 2px solid var(--tb-blue-light);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
padding: 20px 0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.tile {
|
||||
background: var(--tb-navy-light);
|
||||
border: 3px solid var(--tb-slate);
|
||||
padding: 25px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tile:hover {
|
||||
border-color: var(--tb-blue);
|
||||
background: var(--tb-navy-mid);
|
||||
}
|
||||
|
||||
/* All tile variants use the same base style */
|
||||
.tile .icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tile.storage .icon,
|
||||
.tile.database .icon { color: var(--tb-red); }
|
||||
.tile.git .icon { color: var(--tb-blue-bright); }
|
||||
.tile.ci .icon { color: var(--tb-blue-light); }
|
||||
.tile.notebook .icon,
|
||||
.tile.research .icon { color: var(--tb-white); }
|
||||
.tile.catalog .icon { color: var(--tb-blue-bright); }
|
||||
.tile.query .icon { color: var(--tb-blue-light); }
|
||||
.tile.observability .icon { color: var(--tb-red-light); }
|
||||
.tile.metrics .icon { color: var(--tb-blue-bright); }
|
||||
.tile.logs .icon { color: var(--tb-blue-light); }
|
||||
.tile.proxy .icon { color: var(--tb-white); }
|
||||
|
||||
.tile-title {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 0.7rem;
|
||||
color: var(--tb-white);
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.tile-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--tb-steel);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.tile-port {
|
||||
font-size: 0.7rem;
|
||||
color: var(--tb-blue-bright);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: var(--tb-green);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.stripe {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--tb-red);
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: var(--tb-slate);
|
||||
font-size: 0.7rem;
|
||||
border-top: 3px solid var(--tb-slate);
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
footer span {
|
||||
color: var(--tb-red);
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 20px;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
color: var(--tb-white);
|
||||
font-size: 0.35rem;
|
||||
padding: 4px 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.badge.new { background: var(--tb-red); }
|
||||
.badge.gpu { background: var(--tb-blue); }
|
||||
.badge.data { background: var(--tb-blue); }
|
||||
26
css/throwback.css
Normal file
26
css/throwback.css
Normal file
@@ -0,0 +1,26 @@
|
||||
/* THROWBACK COLOR PALETTE — Single Source of Truth
|
||||
Tecmo Super Bowl inspired: deep navy, white text, patriotic red/blue
|
||||
When changing a color here, propagate to the service-specific files:
|
||||
inject.css, dashboard.css, gitea.css, woodpecker.css, marimo.css */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
||||
|
||||
:root {
|
||||
--tb-navy: #0a1628;
|
||||
--tb-navy-light: #162040;
|
||||
--tb-navy-mid: #1e2d50;
|
||||
--tb-slate: #2a3f5f;
|
||||
--tb-steel: #5a7090;
|
||||
--tb-white: #f0f0f0;
|
||||
|
||||
--tb-blue: #3366cc;
|
||||
--tb-blue-light: #5588dd;
|
||||
--tb-blue-bright: #88aaee;
|
||||
|
||||
--tb-red: #cc2244;
|
||||
--tb-red-light: #dd4466;
|
||||
|
||||
--tb-green: #44aa44;
|
||||
--tb-green-light: #66cc66;
|
||||
--tb-yellow: #ddaa33;
|
||||
}
|
||||
191
nginx/index.html
191
nginx/index.html
@@ -4,196 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HOMELAB COMMAND CENTER</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--tb-navy: #0a1628;
|
||||
--tb-navy-light: #162040;
|
||||
--tb-navy-mid: #1e2d50;
|
||||
--tb-slate: #2a3f5f;
|
||||
--tb-steel: #5a7090;
|
||||
--tb-white: #f0f0f0;
|
||||
--tb-blue: #3366cc;
|
||||
--tb-blue-light: #5588dd;
|
||||
--tb-blue-bright: #88aaee;
|
||||
--tb-red: #cc2244;
|
||||
--tb-red-light: #dd4466;
|
||||
--tb-green: #44aa44;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'IBM Plex Mono', 'Courier New', monospace;
|
||||
background: var(--tb-navy);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
color: var(--tb-white);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
border-bottom: 4px solid var(--tb-red);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 2rem;
|
||||
color: var(--tb-white);
|
||||
letter-spacing: 6px;
|
||||
text-shadow: 3px 3px 0 var(--tb-navy-mid);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
color: var(--tb-blue-bright);
|
||||
font-size: 0.55rem;
|
||||
margin-top: 15px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.score-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin-top: 20px;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.score-item {
|
||||
color: var(--tb-white);
|
||||
background: var(--tb-blue);
|
||||
padding: 6px 14px;
|
||||
border: 2px solid var(--tb-blue-light);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
padding: 20px 0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.tile {
|
||||
background: var(--tb-navy-light);
|
||||
border: 3px solid var(--tb-slate);
|
||||
padding: 25px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tile:hover {
|
||||
border-color: var(--tb-blue);
|
||||
background: var(--tb-navy-mid);
|
||||
}
|
||||
|
||||
/* All tile variants use the same base style */
|
||||
.tile .icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tile.storage .icon,
|
||||
.tile.database .icon { color: var(--tb-red); }
|
||||
.tile.git .icon { color: var(--tb-blue-bright); }
|
||||
.tile.ci .icon { color: var(--tb-blue-light); }
|
||||
.tile.notebook .icon,
|
||||
.tile.research .icon { color: var(--tb-white); }
|
||||
.tile.catalog .icon { color: var(--tb-blue-bright); }
|
||||
.tile.query .icon { color: var(--tb-blue-light); }
|
||||
.tile.observability .icon { color: var(--tb-red-light); }
|
||||
.tile.metrics .icon { color: var(--tb-blue-bright); }
|
||||
.tile.logs .icon { color: var(--tb-blue-light); }
|
||||
.tile.proxy .icon { color: var(--tb-white); }
|
||||
|
||||
.tile-title {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 0.7rem;
|
||||
color: var(--tb-white);
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.tile-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--tb-steel);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.tile-port {
|
||||
font-size: 0.7rem;
|
||||
color: var(--tb-blue-bright);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: var(--tb-green);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.stripe {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--tb-red);
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: var(--tb-slate);
|
||||
font-size: 0.7rem;
|
||||
border-top: 3px solid var(--tb-slate);
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
footer span {
|
||||
color: var(--tb-red);
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 20px;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
color: var(--tb-white);
|
||||
font-size: 0.35rem;
|
||||
padding: 4px 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.badge.new { background: var(--tb-red); }
|
||||
.badge.gpu { background: var(--tb-blue); }
|
||||
.badge.data { background: var(--tb-blue); }
|
||||
</style>
|
||||
<link rel="stylesheet" href="/dashboard.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
@@ -1,553 +0,0 @@
|
||||
/* THROWBACK THEME - Tecmo Super Bowl */
|
||||
/* Uses marimo's native CSS variable system for proper theming */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&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: 'Press Start 2P', 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
THROWBACK COLOR PALETTE
|
||||
============================================ */
|
||||
:root {
|
||||
--tb-navy: #0a1628;
|
||||
--tb-navy-light: #162040;
|
||||
--tb-navy-mid: #1e2d50;
|
||||
--tb-slate: #2a3f5f;
|
||||
--tb-steel: #5a7090;
|
||||
--tb-white: #f0f0f0;
|
||||
|
||||
--tb-blue: #3366cc;
|
||||
--tb-blue-light: #5588dd;
|
||||
--tb-blue-bright: #88aaee;
|
||||
|
||||
--tb-red: #cc2244;
|
||||
--tb-red-light: #dd4466;
|
||||
|
||||
--tb-green: #44aa44;
|
||||
--tb-green-light: #66cc66;
|
||||
--tb-yellow: #ddaa33;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
MARIMO THEME VARIABLES (Dark Mode)
|
||||
============================================ */
|
||||
:root {
|
||||
/* Base colors */
|
||||
--background: var(--tb-navy);
|
||||
--foreground: var(--tb-white);
|
||||
|
||||
/* Muted/secondary text */
|
||||
--muted: var(--tb-navy-light);
|
||||
--muted-foreground: var(--tb-steel);
|
||||
|
||||
/* Popover/dropdown backgrounds */
|
||||
--popover: var(--tb-navy-light);
|
||||
--popover-foreground: var(--tb-white);
|
||||
|
||||
/* Cards (cells) */
|
||||
--card: var(--tb-navy);
|
||||
--card-foreground: var(--tb-white);
|
||||
|
||||
/* Borders and inputs */
|
||||
--border: var(--tb-slate);
|
||||
--input: var(--tb-navy-mid);
|
||||
|
||||
/* Primary action color */
|
||||
--primary: var(--tb-blue);
|
||||
--primary-foreground: var(--tb-white);
|
||||
|
||||
/* Secondary elements */
|
||||
--secondary: var(--tb-slate);
|
||||
--secondary-foreground: var(--tb-white);
|
||||
|
||||
/* Accent/highlight */
|
||||
--accent: var(--tb-blue-light);
|
||||
--accent-foreground: var(--tb-white);
|
||||
|
||||
/* Focus ring */
|
||||
--ring: var(--tb-blue-light);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SEMANTIC COLORS
|
||||
============================================ */
|
||||
:root {
|
||||
/* Error states */
|
||||
--destructive: var(--tb-red);
|
||||
--destructive-foreground: var(--tb-white);
|
||||
--error: var(--tb-red);
|
||||
--error-foreground: var(--tb-white);
|
||||
|
||||
/* Success states */
|
||||
--success: var(--tb-green);
|
||||
--success-foreground: var(--tb-white);
|
||||
|
||||
/* Action buttons (run, etc) */
|
||||
--action: var(--tb-green);
|
||||
--action-hover: var(--tb-green-light);
|
||||
--action-foreground: var(--tb-navy);
|
||||
|
||||
/* Links */
|
||||
--link: var(--tb-blue-bright);
|
||||
--link-visited: var(--tb-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(--tb-navy) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
CODE EDITOR - CODEMIRROR STYLING
|
||||
============================================ */
|
||||
.cm-editor {
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
font-size: 14px !important;
|
||||
background: var(--tb-navy) !important;
|
||||
}
|
||||
|
||||
.cm-content {
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
}
|
||||
|
||||
.cm-line {
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
color: var(--tb-white) !important;
|
||||
}
|
||||
|
||||
.cm-gutters {
|
||||
background: var(--tb-navy-light) !important;
|
||||
border-right: 2px solid var(--tb-slate) !important;
|
||||
}
|
||||
|
||||
.cm-lineNumbers .cm-gutterElement {
|
||||
color: var(--tb-steel) !important;
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* Syntax highlighting */
|
||||
.cm-keyword, .tok-keyword { color: var(--tb-blue-bright) !important; }
|
||||
.cm-string, .tok-string { color: var(--tb-green-light) !important; }
|
||||
.cm-number, .tok-number { color: var(--tb-yellow) !important; }
|
||||
.cm-comment, .tok-comment { color: var(--tb-steel) !important; font-style: italic !important; }
|
||||
.cm-function, .tok-function { color: var(--tb-white) !important; }
|
||||
.cm-variableName, .tok-variableName { color: var(--tb-white) !important; }
|
||||
.cm-operator, .tok-operator { color: var(--tb-blue-light) !important; }
|
||||
.cm-propertyName, .tok-propertyName { color: var(--tb-blue-bright) !important; }
|
||||
.tok-standard, .cm-builtin { color: var(--tb-red-light) !important; }
|
||||
.tok-definition, .cm-def { color: var(--tb-blue-bright) !important; }
|
||||
.tok-typeName { color: var(--tb-yellow) !important; }
|
||||
.tok-bool { color: var(--tb-red-light) !important; }
|
||||
|
||||
/* Cursor */
|
||||
.cm-cursor {
|
||||
border-left: 2px solid var(--tb-white) !important;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
.cm-selectionBackground,
|
||||
::selection {
|
||||
background: var(--tb-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;
|
||||
letter-spacing: 0.5px !important;
|
||||
line-height: 1.8 !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 18px !important;
|
||||
color: var(--tb-white) !important;
|
||||
}
|
||||
h2 {
|
||||
font-size: 14px !important;
|
||||
color: var(--tb-blue-bright) !important;
|
||||
}
|
||||
h3 {
|
||||
font-size: 12px !important;
|
||||
color: var(--tb-white) !important;
|
||||
}
|
||||
h4, h5, h6 {
|
||||
font-size: 11px !important;
|
||||
color: var(--tb-white) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
TABLES (Scoreboard style)
|
||||
============================================ */
|
||||
table {
|
||||
border-collapse: collapse !important;
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--tb-blue) !important;
|
||||
color: var(--tb-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(--tb-blue-light) !important;
|
||||
}
|
||||
|
||||
td {
|
||||
background: var(--tb-navy) !important;
|
||||
color: var(--tb-white) !important;
|
||||
padding: 8px 12px !important;
|
||||
border: 1px solid var(--tb-navy-light) !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background: var(--tb-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(--tb-green) !important;
|
||||
color: var(--tb-navy) !important;
|
||||
border: 2px solid var(--tb-green-light) !important;
|
||||
}
|
||||
|
||||
button[data-variant="primary"]:hover,
|
||||
button.primary:hover,
|
||||
[data-action="run"]:hover {
|
||||
background: var(--tb-green-light) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
INPUTS AND FORMS
|
||||
============================================ */
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
background: var(--tb-navy-mid) !important;
|
||||
color: var(--tb-white) !important;
|
||||
border: 2px solid var(--tb-slate) !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: var(--tb-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(--tb-navy-light) !important;
|
||||
color: var(--tb-blue-bright) !important;
|
||||
padding: 2px 6px !important;
|
||||
border-radius: 3px !important;
|
||||
font-size: 0.9em !important;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--tb-navy) !important;
|
||||
border: 2px solid var(--tb-slate) !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
LINKS
|
||||
============================================ */
|
||||
a {
|
||||
color: var(--tb-blue-bright) !important;
|
||||
text-decoration: none !important;
|
||||
transition: color 0.15s ease !important;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--tb-white) !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--tb-blue-light) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SCROLLBARS
|
||||
============================================ */
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--tb-navy-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--tb-slate);
|
||||
border-radius: 6px;
|
||||
border: 2px solid var(--tb-navy-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--tb-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(--tb-navy-light) !important;
|
||||
color: var(--tb-white) !important;
|
||||
border: 2px solid var(--tb-slate) !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
/* Dropdown menus */
|
||||
[role="menu"],
|
||||
[role="listbox"] {
|
||||
background: var(--tb-navy-light) !important;
|
||||
border: 2px solid var(--tb-slate) !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
[role="menuitem"]:hover,
|
||||
[role="option"]:hover,
|
||||
[role="menuitem"][data-highlighted],
|
||||
[role="option"][data-highlighted] {
|
||||
background: var(--tb-blue) !important;
|
||||
color: var(--tb-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(--tb-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(--tb-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(--tb-navy-light) !important;
|
||||
border: 3px solid var(--tb-slate) !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
a[rel="noreferrer"][target="_blank"]:hover {
|
||||
border-color: var(--tb-blue) !important;
|
||||
background: var(--tb-navy-mid) !important;
|
||||
}
|
||||
|
||||
a[rel="noreferrer"][target="_blank"] h2 {
|
||||
font-family: var(--marimo-heading-font) !important;
|
||||
font-size: 12px !important;
|
||||
color: var(--tb-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(--tb-white) !important;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 2px solid var(--tb-slate);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
HOME PAGE - FILE LISTS (notebook lists)
|
||||
============================================ */
|
||||
.divide-y.border.rounded {
|
||||
border: 3px solid var(--tb-slate) !important;
|
||||
border-radius: 0 !important;
|
||||
background: var(--tb-navy) !important;
|
||||
}
|
||||
|
||||
.divide-y.border > a,
|
||||
.divide-y.border > div > a {
|
||||
border-color: var(--tb-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(--tb-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;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PIXEL-PERFECT 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(--tb-slate) !important;
|
||||
border-radius: 0 !important;
|
||||
background: var(--tb-navy-light) !important;
|
||||
}
|
||||
|
||||
.absolute.top-3.right-5 button:hover {
|
||||
background: var(--tb-blue) !important;
|
||||
border-color: var(--tb-blue-light) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SEARCH INPUT
|
||||
============================================ */
|
||||
input#search {
|
||||
border: 3px solid var(--tb-slate) !important;
|
||||
border-radius: 0 !important;
|
||||
background: var(--tb-navy) !important;
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
}
|
||||
|
||||
input#search:focus {
|
||||
border-color: var(--tb-blue-light) !important;
|
||||
box-shadow: 0 0 8px rgba(85, 136, 221, 0.3) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BUTTON PRESS EFFECT
|
||||
============================================ */
|
||||
button:active,
|
||||
[role="button"]:active {
|
||||
transform: translate(1px, 1px) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
Reference in New Issue
Block a user