homelab/stack
1
0
Fork 0
Code Issues 54 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity
Files
f3d93127e40d43b4a21cba7732696d49f7f2a046
stack/notebooks/.marimo-config/retro-arcade.css
kert 3698cd0c63 full dark theme for marimo, PFS payment calculator notebook, marimo check pre-commit hook 
Rewrote retro-arcade CSS to properly integrate with marimo's theming:
override all Radix color scales, Tailwind prose vars, and semantic
variables so no dark blue or black text appears on the navy background.
Switched marimo.toml to theme=dark. Added pfs_calcs.py notebook
demonstrating three ways to look up PFS payment rates (carrier file,
RVU calc, pure SQL). Fixed all marimo check warnings/errors across
existing notebooks (branch expressions, empty cells, raw strings).
Added marimo check to pre-commit hook.
2026-03-07 13:20:52 -05:00

554 lines
14 KiB
CSS
Raw Blame History

/* 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: #8a9fbb;
--tb-white: #f0f0f0;
--tb-blue: #4477dd;
--tb-blue-light: #6699ee;
--tb-blue-bright: #99bbff;
--tb-red: #cc2244;
--tb-red-light: #ee6688;
--tb-green: #44aa44;
--tb-green-light: #77dd77;
--tb-yellow: #eebb44;
}
/* ============================================
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-white);
/* 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-white) !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 View Git Blame Copy Permalink