homelab/stack
1
0
Fork 0
Code Issues 58 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

update marimo notebook CSS to throwback palette
Some checks failed
ci/woodpecker/push/infra-ci Pipeline failed
Details
ci/woodpecker/push/ci Pipeline was successful
Details
ci/woodpecker/push/deploy Pipeline failed
Details

Browse Source 
Missed the two retro-arcade.css copies (notebooks/ and
notebooks/.marimo-config/) in the theme rename. Now uses
--tb-* variables with Tecmo Super Bowl navy/white/red palette.
Removes CRT scanlines, power-on animation, and cartridge-shine
effect.
This commit is contained in:
kert
2026-02-28 17:54:08 -05:00
parent 5d512ff2ed
commit ced70d554d
2 changed files with 276 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

386
notebooks/.marimo-config/retro-arcade.css
View File

@@ -1,4 +1,4 @@
/* NES SPORTS THEME - RBI Baseball / Tecmo Super Bowl */ /* THROWBACK THEME - Tecmo Super Bowl */
/* Uses marimo's native CSS variable system for proper theming */ /* 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'); @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@@ -13,31 +13,26 @@
} }
/* ============================================ /* ============================================
NES COLOR PALETTE THROWBACK COLOR PALETTE
============================================ */ ============================================ */
:root { :root {
/* Core NES colors */ --tb-navy: #0a1628;
--nes-black: #0f0f0f; --tb-navy-light: #162040;
--nes-dark-gray: #1a1a2e; --tb-navy-mid: #1e2d50;
--nes-gray: #4a4a68; --tb-slate: #2a3f5f;
--nes-light-gray: #9090a8; --tb-steel: #5a7090;
--nes-white: #f0f0f0; --tb-white: #f0f0f0;
/* NES blues (the classic Tecmo/RBI look) */ --tb-blue: #3366cc;
--nes-dark-blue: #1a1a40; --tb-blue-light: #5588dd;
--nes-blue: #2840a0; --tb-blue-bright: #88aaee;
--nes-mid-blue: #4060c0;
--nes-light-blue: #70a0e0;
--nes-sky: #90c0f0;
/* Accent colors */ --tb-red: #cc2244;
--nes-red: #d03030; --tb-red-light: #dd4466;
--nes-orange: #e07020;
--nes-yellow: #e0b040; --tb-green: #44aa44;
--nes-green: #40a040; --tb-green-light: #66cc66;
--nes-light-green: #80d080; --tb-yellow: #ddaa33;
--nes-cyan: #40b0c0;
--nes-cream: #e8d8c0;
} }
/* ============================================ /* ============================================
@@ -45,39 +40,39 @@
============================================ */ ============================================ */
:root { :root {
/* Base colors */ /* Base colors */
--background: var(--nes-dark-blue); --background: var(--tb-navy);
--foreground: var(--nes-white); --foreground: var(--tb-white);
/* Muted/secondary text */ /* Muted/secondary text */
--muted: var(--nes-dark-gray); --muted: var(--tb-navy-light);
--muted-foreground: var(--nes-light-gray); --muted-foreground: var(--tb-steel);
/* Popover/dropdown backgrounds */ /* Popover/dropdown backgrounds */
--popover: var(--nes-dark-gray); --popover: var(--tb-navy-light);
--popover-foreground: var(--nes-white); --popover-foreground: var(--tb-white);
/* Cards (cells) */ /* Cards (cells) */
--card: var(--nes-black); --card: var(--tb-navy);
--card-foreground: var(--nes-white); --card-foreground: var(--tb-white);
/* Borders and inputs */ /* Borders and inputs */
--border: var(--nes-gray); --border: var(--tb-slate);
--input: var(--nes-dark-gray); --input: var(--tb-navy-mid);
/* Primary action color */ /* Primary action color */
--primary: var(--nes-mid-blue); --primary: var(--tb-blue);
--primary-foreground: var(--nes-white); --primary-foreground: var(--tb-white);
/* Secondary elements */ /* Secondary elements */
--secondary: var(--nes-gray); --secondary: var(--tb-slate);
--secondary-foreground: var(--nes-white); --secondary-foreground: var(--tb-white);
/* Accent/highlight */ /* Accent/highlight */
--accent: var(--nes-light-blue); --accent: var(--tb-blue-light);
--accent-foreground: var(--nes-black); --accent-foreground: var(--tb-white);
/* Focus ring */ /* Focus ring */
--ring: var(--nes-light-blue); --ring: var(--tb-blue-light);
} }
/* ============================================ /* ============================================
@@ -85,30 +80,30 @@
============================================ */ ============================================ */
:root { :root {
/* Error states */ /* Error states */
--destructive: var(--nes-red); --destructive: var(--tb-red);
--destructive-foreground: var(--nes-white); --destructive-foreground: var(--tb-white);
--error: var(--nes-red); --error: var(--tb-red);
--error-foreground: var(--nes-white); --error-foreground: var(--tb-white);
/* Success states */ /* Success states */
--success: var(--nes-green); --success: var(--tb-green);
--success-foreground: var(--nes-white); --success-foreground: var(--tb-white);
/* Action buttons (run, etc) */ /* Action buttons (run, etc) */
--action: var(--nes-green); --action: var(--tb-green);
--action-hover: var(--nes-light-green); --action-hover: var(--tb-green-light);
--action-foreground: var(--nes-black); --action-foreground: var(--tb-navy);
/* Links */ /* Links */
--link: var(--nes-sky); --link: var(--tb-blue-bright);
--link-visited: var(--nes-light-blue); --link-visited: var(--tb-blue-light);
/* Stale indicator */ /* Stale indicator */
--stale: rgba(224, 176, 64, 0.25); --stale: rgba(221, 170, 51, 0.25);
} }
/* ============================================ /* ============================================
SHADOWS (subtle, NES-style) SHADOWS
============================================ */ ============================================ */
:root { :root {
--base-shadow: rgba(0, 0, 0, 0.4); --base-shadow: rgba(0, 0, 0, 0.4);
@@ -117,26 +112,17 @@
} }
/* ============================================ /* ============================================
BACKGROUND GRADIENT (Tecmo field style) BACKGROUND
============================================ */ ============================================ */
:root { :root {
--background-image: linear-gradient( --background-image: none;
180deg,
#0a0a28 0%,
#1a1a40 30%,
#1a1a40 70%,
#0a0a28 100%
);
--background-repeat: no-repeat; --background-repeat: no-repeat;
--background-attachment: fixed; --background-attachment: fixed;
--background-size: cover; --background-size: cover;
} }
body { body {
background-image: var(--background-image) !important; background: var(--tb-navy) !important;
background-repeat: var(--background-repeat) !important;
background-attachment: var(--background-attachment) !important;
background-size: var(--background-size) !important;
} }
/* ============================================ /* ============================================
@@ -145,7 +131,7 @@ body {
.cm-editor { .cm-editor {
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
font-size: 14px !important; font-size: 14px !important;
background: var(--nes-black) !important; background: var(--tb-navy) !important;
} }
.cm-content { .cm-content {
@@ -154,52 +140,52 @@ body {
.cm-line { .cm-line {
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
color: var(--nes-white) !important; color: var(--tb-white) !important;
} }
.cm-gutters { .cm-gutters {
background: var(--nes-dark-gray) !important; background: var(--tb-navy-light) !important;
border-right: 2px solid var(--nes-gray) !important; border-right: 2px solid var(--tb-slate) !important;
} }
.cm-lineNumbers .cm-gutterElement { .cm-lineNumbers .cm-gutterElement {
color: var(--nes-light-gray) !important; color: var(--tb-steel) !important;
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
font-size: 12px !important; font-size: 12px !important;
} }
/* Syntax highlighting */ /* Syntax highlighting */
.cm-keyword, .tok-keyword { color: var(--nes-sky) !important; } .cm-keyword, .tok-keyword { color: var(--tb-blue-bright) !important; }
.cm-string, .tok-string { color: var(--nes-light-green) !important; } .cm-string, .tok-string { color: var(--tb-green-light) !important; }
.cm-number, .tok-number { color: var(--nes-yellow) !important; } .cm-number, .tok-number { color: var(--tb-yellow) !important; }
.cm-comment, .tok-comment { color: var(--nes-light-gray) !important; font-style: italic !important; } .cm-comment, .tok-comment { color: var(--tb-steel) !important; font-style: italic !important; }
.cm-function, .tok-function { color: var(--nes-cream) !important; } .cm-function, .tok-function { color: var(--tb-white) !important; }
.cm-variableName, .tok-variableName { color: var(--nes-white) !important; } .cm-variableName, .tok-variableName { color: var(--tb-white) !important; }
.cm-operator, .tok-operator { color: var(--nes-cyan) !important; } .cm-operator, .tok-operator { color: var(--tb-blue-light) !important; }
.cm-propertyName, .tok-propertyName { color: var(--nes-light-blue) !important; } .cm-propertyName, .tok-propertyName { color: var(--tb-blue-bright) !important; }
.tok-standard, .cm-builtin { color: var(--nes-orange) !important; } .tok-standard, .cm-builtin { color: var(--tb-red-light) !important; }
.tok-definition, .cm-def { color: var(--nes-sky) !important; } .tok-definition, .cm-def { color: var(--tb-blue-bright) !important; }
.tok-typeName { color: var(--nes-yellow) !important; } .tok-typeName { color: var(--tb-yellow) !important; }
.tok-bool { color: var(--nes-orange) !important; } .tok-bool { color: var(--tb-red-light) !important; }
/* Cursor */ /* Cursor */
.cm-cursor { .cm-cursor {
border-left: 2px solid var(--nes-light-green) !important; border-left: 2px solid var(--tb-white) !important;
} }
/* Selection */ /* Selection */
.cm-selectionBackground, .cm-selectionBackground,
::selection { ::selection {
background: var(--nes-blue) !important; background: var(--tb-blue) !important;
} }
/* Active line */ /* Active line */
.cm-activeLine { .cm-activeLine {
background: rgba(64, 96, 192, 0.15) !important; background: rgba(51, 102, 204, 0.15) !important;
} }
/* ============================================ /* ============================================
HEADINGS (Press Start 2P for that NES feel) HEADINGS
============================================ */ ============================================ */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: var(--marimo-heading-font) !important; font-family: var(--marimo-heading-font) !important;
@@ -209,19 +195,19 @@ h1, h2, h3, h4, h5, h6 {
h1 { h1 {
font-size: 18px !important; font-size: 18px !important;
color: var(--nes-light-green) !important; color: var(--tb-white) !important;
} }
h2 { h2 {
font-size: 14px !important; font-size: 14px !important;
color: var(--nes-sky) !important; color: var(--tb-blue-bright) !important;
} }
h3 { h3 {
font-size: 12px !important; font-size: 12px !important;
color: var(--nes-yellow) !important; color: var(--tb-white) !important;
} }
h4, h5, h6 { h4, h5, h6 {
font-size: 11px !important; font-size: 11px !important;
color: var(--nes-cream) !important; color: var(--tb-white) !important;
} }
/* ============================================ /* ============================================
@@ -233,34 +219,34 @@ table {
} }
th { th {
background: var(--nes-blue) !important; background: var(--tb-blue) !important;
color: var(--nes-white) !important; color: var(--tb-white) !important;
font-family: var(--marimo-heading-font) !important; font-family: var(--marimo-heading-font) !important;
font-size: 10px !important; font-size: 10px !important;
padding: 10px 12px !important; padding: 10px 12px !important;
text-transform: uppercase !important; text-transform: uppercase !important;
letter-spacing: 1px !important; letter-spacing: 1px !important;
border: 1px solid var(--nes-mid-blue) !important; border: 1px solid var(--tb-blue-light) !important;
} }
td { td {
background: var(--nes-black) !important; background: var(--tb-navy) !important;
color: var(--nes-cream) !important; color: var(--tb-white) !important;
padding: 8px 12px !important; padding: 8px 12px !important;
border: 1px solid var(--nes-dark-gray) !important; border: 1px solid var(--tb-navy-light) !important;
font-size: 13px !important; font-size: 13px !important;
} }
tr:nth-child(even) td { tr:nth-child(even) td {
background: var(--nes-dark-gray) !important; background: var(--tb-navy-light) !important;
} }
tr:hover td { tr:hover td {
background: var(--nes-dark-blue) !important; background: rgba(51, 102, 204, 0.2) !important;
} }
/* ============================================ /* ============================================
BUTTONS (NES menu style) BUTTONS
============================================ */ ============================================ */
button, button,
[role="button"], [role="button"],
@@ -275,15 +261,15 @@ button,
button[data-variant="primary"], button[data-variant="primary"],
button.primary, button.primary,
[data-action="run"] { [data-action="run"] {
background: var(--nes-green) !important; background: var(--tb-green) !important;
color: var(--nes-black) !important; color: var(--tb-navy) !important;
border: 2px solid var(--nes-light-green) !important; border: 2px solid var(--tb-green-light) !important;
} }
button[data-variant="primary"]:hover, button[data-variant="primary"]:hover,
button.primary:hover, button.primary:hover,
[data-action="run"]:hover { [data-action="run"]:hover {
background: var(--nes-light-green) !important; background: var(--tb-green-light) !important;
} }
/* ============================================ /* ============================================
@@ -293,9 +279,9 @@ input,
textarea, textarea,
select { select {
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
background: var(--nes-dark-gray) !important; background: var(--tb-navy-mid) !important;
color: var(--nes-white) !important; color: var(--tb-white) !important;
border: 2px solid var(--nes-gray) !important; border: 2px solid var(--tb-slate) !important;
border-radius: 4px !important; border-radius: 4px !important;
padding: 8px 12px !important; padding: 8px 12px !important;
} }
@@ -303,9 +289,9 @@ select {
input:focus, input:focus,
textarea:focus, textarea:focus,
select:focus { select:focus {
border-color: var(--nes-light-blue) !important; border-color: var(--tb-blue-light) !important;
outline: none !important; outline: none !important;
box-shadow: 0 0 0 2px rgba(112, 160, 224, 0.3) !important; box-shadow: 0 0 0 2px rgba(85, 136, 221, 0.3) !important;
} }
/* ============================================ /* ============================================
@@ -316,16 +302,16 @@ pre, code {
} }
code { code {
background: var(--nes-dark-gray) !important; background: var(--tb-navy-light) !important;
color: var(--nes-light-green) !important; color: var(--tb-blue-bright) !important;
padding: 2px 6px !important; padding: 2px 6px !important;
border-radius: 3px !important; border-radius: 3px !important;
font-size: 0.9em !important; font-size: 0.9em !important;
} }
pre { pre {
background: var(--nes-black) !important; background: var(--tb-navy) !important;
border: 2px solid var(--nes-gray) !important; border: 2px solid var(--tb-slate) !important;
border-radius: 4px !important; border-radius: 4px !important;
padding: 12px !important; padding: 12px !important;
} }
@@ -339,18 +325,18 @@ pre code {
LINKS LINKS
============================================ */ ============================================ */
a { a {
color: var(--nes-sky) !important; color: var(--tb-blue-bright) !important;
text-decoration: none !important; text-decoration: none !important;
transition: color 0.15s ease !important; transition: color 0.15s ease !important;
} }
a:hover { a:hover {
color: var(--nes-white) !important; color: var(--tb-white) !important;
text-decoration: underline !important; text-decoration: underline !important;
} }
a:visited { a:visited {
color: var(--nes-light-blue) !important; color: var(--tb-blue-light) !important;
} }
/* ============================================ /* ============================================
@@ -362,17 +348,17 @@ a:visited {
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: var(--nes-dark-gray); background: var(--tb-navy-light);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: var(--nes-gray); background: var(--tb-slate);
border-radius: 6px; border-radius: 6px;
border: 2px solid var(--nes-dark-gray); border: 2px solid var(--tb-navy-light);
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: var(--nes-light-gray); background: var(--tb-steel);
} }
/* ============================================ /* ============================================
@@ -384,17 +370,17 @@ a:visited {
[data-state="open"][data-side] { [data-state="open"][data-side] {
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
font-size: 12px !important; font-size: 12px !important;
background: var(--nes-black) !important; background: var(--tb-navy-light) !important;
color: var(--nes-white) !important; color: var(--tb-white) !important;
border: 2px solid var(--nes-gray) !important; border: 2px solid var(--tb-slate) !important;
border-radius: 4px !important; border-radius: 4px !important;
} }
/* Dropdown menus */ /* Dropdown menus */
[role="menu"], [role="menu"],
[role="listbox"] { [role="listbox"] {
background: var(--nes-dark-gray) !important; background: var(--tb-navy-light) !important;
border: 2px solid var(--nes-gray) !important; border: 2px solid var(--tb-slate) !important;
border-radius: 4px !important; border-radius: 4px !important;
} }
@@ -402,8 +388,8 @@ a:visited {
[role="option"]:hover, [role="option"]:hover,
[role="menuitem"][data-highlighted], [role="menuitem"][data-highlighted],
[role="option"][data-highlighted] { [role="option"][data-highlighted] {
background: var(--nes-blue) !important; background: var(--tb-blue) !important;
color: var(--nes-white) !important; color: var(--tb-white) !important;
} }
/* Badges and pills */ /* Badges and pills */
@@ -417,7 +403,7 @@ a:visited {
/* Focus visible for accessibility */ /* Focus visible for accessibility */
:focus-visible { :focus-visible {
outline: 2px solid var(--nes-light-blue) !important; outline: 2px solid var(--tb-blue-light) !important;
outline-offset: 2px !important; outline-offset: 2px !important;
} }
@@ -426,8 +412,8 @@ a:visited {
============================================ */ ============================================ */
[data-testid="outputs"], [data-testid="outputs"],
.output-area { .output-area {
background: rgba(26, 26, 64, 0.5) !important; background: rgba(22, 32, 64, 0.5) !important;
border-top: 2px solid var(--nes-gray) !important; border-top: 2px solid var(--tb-slate) !important;
padding: 12px !important; padding: 12px !important;
} }
@@ -443,76 +429,24 @@ svg {
background: transparent !important; background: transparent !important;
} }
/* ============================================
CRT SCANLINE OVERLAY
============================================ */
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9998;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.06) 2px,
rgba(0, 0, 0, 0.06) 4px
);
}
/* ============================================ /* ============================================
HOME PAGE - "CREATE NEW NOTEBOOK" CARD HOME PAGE - "CREATE NEW NOTEBOOK" CARD
============================================ */ ============================================ */
/* The "Create a new notebook" link card */
a[rel="noreferrer"][target="_blank"] { a[rel="noreferrer"][target="_blank"] {
background: linear-gradient(135deg, #1a1a40 0%, #2840a0 100%) !important; background: var(--tb-navy-light) !important;
border: 3px solid var(--nes-mid-blue) !important; border: 3px solid var(--tb-slate) !important;
border-radius: 0 !important; border-radius: 0 !important;
box-shadow:
4px 4px 0 var(--nes-black),
inset 0 0 20px rgba(64, 96, 192, 0.2) !important;
position: relative;
overflow: hidden;
}
a[rel="noreferrer"][target="_blank"]::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(144, 192, 240, 0.08),
transparent
);
animation: cartridge-shine 4s ease-in-out infinite;
}
@keyframes cartridge-shine {
0% { left: -50%; }
50% { left: 100%; }
100% { left: 100%; }
} }
a[rel="noreferrer"][target="_blank"]:hover { a[rel="noreferrer"][target="_blank"]:hover {
border-color: var(--nes-light-green) !important; border-color: var(--tb-blue) !important;
box-shadow: background: var(--tb-navy-mid) !important;
4px 4px 0 var(--nes-black),
0 0 15px rgba(128, 208, 128, 0.3),
inset 0 0 20px rgba(128, 208, 128, 0.1) !important;
} }
a[rel="noreferrer"][target="_blank"] h2 { a[rel="noreferrer"][target="_blank"] h2 {
font-family: var(--marimo-heading-font) !important; font-family: var(--marimo-heading-font) !important;
font-size: 12px !important; font-size: 12px !important;
color: var(--nes-light-green) !important; color: var(--tb-white) !important;
text-transform: uppercase !important; text-transform: uppercase !important;
letter-spacing: 2px !important; letter-spacing: 2px !important;
} }
@@ -520,42 +454,37 @@ a[rel="noreferrer"][target="_blank"] h2 {
/* ============================================ /* ============================================
HOME PAGE - SECTION HEADERS HOME PAGE - SECTION HEADERS
============================================ */ ============================================ */
/* "Running notebooks" / "Recent notebooks" / "Workspace" headers */
h2.text-xl { h2.text-xl {
font-family: var(--marimo-heading-font) !important; font-family: var(--marimo-heading-font) !important;
font-size: 11px !important; font-size: 11px !important;
text-transform: uppercase !important; text-transform: uppercase !important;
letter-spacing: 2px !important; letter-spacing: 2px !important;
color: var(--nes-yellow) !important; color: var(--tb-white) !important;
padding-bottom: 6px; padding-bottom: 6px;
border-bottom: 2px solid var(--nes-gray); border-bottom: 2px solid var(--tb-slate);
} }
/* ============================================ /* ============================================
HOME PAGE - FILE LISTS (notebook lists) HOME PAGE - FILE LISTS (notebook lists)
============================================ */ ============================================ */
/* The bordered list containers */
.divide-y.border.rounded { .divide-y.border.rounded {
border: 3px solid var(--nes-gray) !important; border: 3px solid var(--tb-slate) !important;
border-radius: 0 !important; border-radius: 0 !important;
box-shadow: 4px 4px 0 var(--nes-black) !important; background: var(--tb-navy) !important;
background: var(--nes-black) !important;
} }
/* Individual file rows */
.divide-y.border > a, .divide-y.border > a,
.divide-y.border > div > a { .divide-y.border > div > a {
border-color: var(--nes-dark-gray) !important; border-color: var(--tb-navy-light) !important;
transition: all 0.1s ease !important; transition: all 0.1s ease !important;
} }
.divide-y.border > a:hover, .divide-y.border > a:hover,
.divide-y.border > div > a:hover { .divide-y.border > div > a:hover {
background: rgba(40, 64, 160, 0.3) !important; background: rgba(51, 102, 204, 0.2) !important;
border-left: 3px solid var(--nes-light-green) !important; border-left: 3px solid var(--tb-blue) !important;
} }
/* File names in lists */
.divide-y.border a .flex-1 span { .divide-y.border a .flex-1 span {
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
} }
@@ -563,27 +492,23 @@ h2.text-xl {
/* ============================================ /* ============================================
HOME PAGE - WORKSPACE FILE TREE HOME PAGE - WORKSPACE FILE TREE
============================================ */ ============================================ */
/* Tree row hover */
[class*="cursor-pointer"][class*="whitespace-nowrap"]:hover { [class*="cursor-pointer"][class*="whitespace-nowrap"]:hover {
background: rgba(40, 64, 160, 0.25) !important; background: rgba(51, 102, 204, 0.2) !important;
} }
/* Directory names - slightly brighter */
[class*="cursor-pointer"][class*="whitespace-nowrap"] span { [class*="cursor-pointer"][class*="whitespace-nowrap"] span {
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
font-size: 13px !important; font-size: 13px !important;
} }
/* ============================================ /* ============================================
PIXEL-PERFECT BORDERS (NES cartridge feel) PIXEL-PERFECT BORDERS
============================================ */ ============================================ */
/* Override all rounded corners for that crisp 8-bit look */
.rounded-lg, .rounded-lg,
.rounded-md { .rounded-md {
border-radius: 0 !important; border-radius: 0 !important;
} }
/* Keep small UI elements slightly rounded */
.rounded-sm, .rounded-sm,
.rounded { .rounded {
border-radius: 2px !important; border-radius: 2px !important;
@@ -592,69 +517,34 @@ h2.text-xl {
/* ============================================ /* ============================================
TOP BAR / ACTION BUTTONS TOP BAR / ACTION BUTTONS
============================================ */ ============================================ */
/* Settings and shutdown buttons in top right */
.absolute.top-3.right-5 button { .absolute.top-3.right-5 button {
border: 2px solid var(--nes-gray) !important; border: 2px solid var(--tb-slate) !important;
border-radius: 0 !important; border-radius: 0 !important;
background: var(--nes-dark-gray) !important; background: var(--tb-navy-light) !important;
box-shadow: 2px 2px 0 var(--nes-black) !important;
} }
.absolute.top-3.right-5 button:hover { .absolute.top-3.right-5 button:hover {
background: var(--nes-blue) !important; background: var(--tb-blue) !important;
border-color: var(--nes-light-blue) !important; border-color: var(--tb-blue-light) !important;
}
.absolute.top-3.right-5 button:active {
box-shadow: none !important;
transform: translate(2px, 2px);
} }
/* ============================================ /* ============================================
SEARCH INPUT - PIXEL STYLE SEARCH INPUT
============================================ */ ============================================ */
input#search { input#search {
border: 3px solid var(--nes-gray) !important; border: 3px solid var(--tb-slate) !important;
border-radius: 0 !important; border-radius: 0 !important;
background: var(--nes-black) !important; background: var(--tb-navy) !important;
box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.3) !important;
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
} }
input#search:focus { input#search:focus {
border-color: var(--nes-light-blue) !important; border-color: var(--tb-blue-light) !important;
box-shadow: box-shadow: 0 0 8px rgba(85, 136, 221, 0.3) !important;
inset 2px 2px 0 rgba(0, 0, 0, 0.3),
0 0 8px rgba(112, 160, 224, 0.3) !important;
} }
/* ============================================ /* ============================================
POWER-ON GLOW (subtle animation on page) BUTTON PRESS EFFECT
============================================ */
@keyframes power-on {
0% { opacity: 0; filter: brightness(2) saturate(0); }
30% { opacity: 1; filter: brightness(1.5) saturate(0.5); }
100% { opacity: 1; filter: brightness(1) saturate(1); }
}
#root {
animation: power-on 0.8s ease-out;
}
/* ============================================
BLINKING CURSOR / READY INDICATOR
============================================ */
@keyframes blink-cursor {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.cm-cursor {
animation: blink-cursor 1s step-end infinite !important;
}
/* ============================================
NES-STYLE BUTTON PRESS EFFECT
============================================ */ ============================================ */
button:active, button:active,
[role="button"]:active { [role="button"]:active {

386
notebooks/retro-arcade.css
View File

@@ -1,4 +1,4 @@
/* NES SPORTS THEME - RBI Baseball / Tecmo Super Bowl */ /* THROWBACK THEME - Tecmo Super Bowl */
/* Uses marimo's native CSS variable system for proper theming */ /* 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'); @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@@ -13,31 +13,26 @@
} }
/* ============================================ /* ============================================
NES COLOR PALETTE THROWBACK COLOR PALETTE
============================================ */ ============================================ */
:root { :root {
/* Core NES colors */ --tb-navy: #0a1628;
--nes-black: #0f0f0f; --tb-navy-light: #162040;
--nes-dark-gray: #1a1a2e; --tb-navy-mid: #1e2d50;
--nes-gray: #4a4a68; --tb-slate: #2a3f5f;
--nes-light-gray: #9090a8; --tb-steel: #5a7090;
--nes-white: #f0f0f0; --tb-white: #f0f0f0;
/* NES blues (the classic Tecmo/RBI look) */ --tb-blue: #3366cc;
--nes-dark-blue: #1a1a40; --tb-blue-light: #5588dd;
--nes-blue: #2840a0; --tb-blue-bright: #88aaee;
--nes-mid-blue: #4060c0;
--nes-light-blue: #70a0e0;
--nes-sky: #90c0f0;
/* Accent colors */ --tb-red: #cc2244;
--nes-red: #d03030; --tb-red-light: #dd4466;
--nes-orange: #e07020;
--nes-yellow: #e0b040; --tb-green: #44aa44;
--nes-green: #40a040; --tb-green-light: #66cc66;
--nes-light-green: #80d080; --tb-yellow: #ddaa33;
--nes-cyan: #40b0c0;
--nes-cream: #e8d8c0;
} }
/* ============================================ /* ============================================
@@ -45,39 +40,39 @@
============================================ */ ============================================ */
:root { :root {
/* Base colors */ /* Base colors */
--background: var(--nes-dark-blue); --background: var(--tb-navy);
--foreground: var(--nes-white); --foreground: var(--tb-white);
/* Muted/secondary text */ /* Muted/secondary text */
--muted: var(--nes-dark-gray); --muted: var(--tb-navy-light);
--muted-foreground: var(--nes-light-gray); --muted-foreground: var(--tb-steel);
/* Popover/dropdown backgrounds */ /* Popover/dropdown backgrounds */
--popover: var(--nes-dark-gray); --popover: var(--tb-navy-light);
--popover-foreground: var(--nes-white); --popover-foreground: var(--tb-white);
/* Cards (cells) */ /* Cards (cells) */
--card: var(--nes-black); --card: var(--tb-navy);
--card-foreground: var(--nes-white); --card-foreground: var(--tb-white);
/* Borders and inputs */ /* Borders and inputs */
--border: var(--nes-gray); --border: var(--tb-slate);
--input: var(--nes-dark-gray); --input: var(--tb-navy-mid);
/* Primary action color */ /* Primary action color */
--primary: var(--nes-mid-blue); --primary: var(--tb-blue);
--primary-foreground: var(--nes-white); --primary-foreground: var(--tb-white);
/* Secondary elements */ /* Secondary elements */
--secondary: var(--nes-gray); --secondary: var(--tb-slate);
--secondary-foreground: var(--nes-white); --secondary-foreground: var(--tb-white);
/* Accent/highlight */ /* Accent/highlight */
--accent: var(--nes-light-blue); --accent: var(--tb-blue-light);
--accent-foreground: var(--nes-black); --accent-foreground: var(--tb-white);
/* Focus ring */ /* Focus ring */
--ring: var(--nes-light-blue); --ring: var(--tb-blue-light);
} }
/* ============================================ /* ============================================
@@ -85,30 +80,30 @@
============================================ */ ============================================ */
:root { :root {
/* Error states */ /* Error states */
--destructive: var(--nes-red); --destructive: var(--tb-red);
--destructive-foreground: var(--nes-white); --destructive-foreground: var(--tb-white);
--error: var(--nes-red); --error: var(--tb-red);
--error-foreground: var(--nes-white); --error-foreground: var(--tb-white);
/* Success states */ /* Success states */
--success: var(--nes-green); --success: var(--tb-green);
--success-foreground: var(--nes-white); --success-foreground: var(--tb-white);
/* Action buttons (run, etc) */ /* Action buttons (run, etc) */
--action: var(--nes-green); --action: var(--tb-green);
--action-hover: var(--nes-light-green); --action-hover: var(--tb-green-light);
--action-foreground: var(--nes-black); --action-foreground: var(--tb-navy);
/* Links */ /* Links */
--link: var(--nes-sky); --link: var(--tb-blue-bright);
--link-visited: var(--nes-light-blue); --link-visited: var(--tb-blue-light);
/* Stale indicator */ /* Stale indicator */
--stale: rgba(224, 176, 64, 0.25); --stale: rgba(221, 170, 51, 0.25);
} }
/* ============================================ /* ============================================
SHADOWS (subtle, NES-style) SHADOWS
============================================ */ ============================================ */
:root { :root {
--base-shadow: rgba(0, 0, 0, 0.4); --base-shadow: rgba(0, 0, 0, 0.4);
@@ -117,26 +112,17 @@
} }
/* ============================================ /* ============================================
BACKGROUND GRADIENT (Tecmo field style) BACKGROUND
============================================ */ ============================================ */
:root { :root {
--background-image: linear-gradient( --background-image: none;
180deg,
#0a0a28 0%,
#1a1a40 30%,
#1a1a40 70%,
#0a0a28 100%
);
--background-repeat: no-repeat; --background-repeat: no-repeat;
--background-attachment: fixed; --background-attachment: fixed;
--background-size: cover; --background-size: cover;
} }
body { body {
background-image: var(--background-image) !important; background: var(--tb-navy) !important;
background-repeat: var(--background-repeat) !important;
background-attachment: var(--background-attachment) !important;
background-size: var(--background-size) !important;
} }
/* ============================================ /* ============================================
@@ -145,7 +131,7 @@ body {
.cm-editor { .cm-editor {
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
font-size: 14px !important; font-size: 14px !important;
background: var(--nes-black) !important; background: var(--tb-navy) !important;
} }
.cm-content { .cm-content {
@@ -154,52 +140,52 @@ body {
.cm-line { .cm-line {
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
color: var(--nes-white) !important; color: var(--tb-white) !important;
} }
.cm-gutters { .cm-gutters {
background: var(--nes-dark-gray) !important; background: var(--tb-navy-light) !important;
border-right: 2px solid var(--nes-gray) !important; border-right: 2px solid var(--tb-slate) !important;
} }
.cm-lineNumbers .cm-gutterElement { .cm-lineNumbers .cm-gutterElement {
color: var(--nes-light-gray) !important; color: var(--tb-steel) !important;
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
font-size: 12px !important; font-size: 12px !important;
} }
/* Syntax highlighting */ /* Syntax highlighting */
.cm-keyword, .tok-keyword { color: var(--nes-sky) !important; } .cm-keyword, .tok-keyword { color: var(--tb-blue-bright) !important; }
.cm-string, .tok-string { color: var(--nes-light-green) !important; } .cm-string, .tok-string { color: var(--tb-green-light) !important; }
.cm-number, .tok-number { color: var(--nes-yellow) !important; } .cm-number, .tok-number { color: var(--tb-yellow) !important; }
.cm-comment, .tok-comment { color: var(--nes-light-gray) !important; font-style: italic !important; } .cm-comment, .tok-comment { color: var(--tb-steel) !important; font-style: italic !important; }
.cm-function, .tok-function { color: var(--nes-cream) !important; } .cm-function, .tok-function { color: var(--tb-white) !important; }
.cm-variableName, .tok-variableName { color: var(--nes-white) !important; } .cm-variableName, .tok-variableName { color: var(--tb-white) !important; }
.cm-operator, .tok-operator { color: var(--nes-cyan) !important; } .cm-operator, .tok-operator { color: var(--tb-blue-light) !important; }
.cm-propertyName, .tok-propertyName { color: var(--nes-light-blue) !important; } .cm-propertyName, .tok-propertyName { color: var(--tb-blue-bright) !important; }
.tok-standard, .cm-builtin { color: var(--nes-orange) !important; } .tok-standard, .cm-builtin { color: var(--tb-red-light) !important; }
.tok-definition, .cm-def { color: var(--nes-sky) !important; } .tok-definition, .cm-def { color: var(--tb-blue-bright) !important; }
.tok-typeName { color: var(--nes-yellow) !important; } .tok-typeName { color: var(--tb-yellow) !important; }
.tok-bool { color: var(--nes-orange) !important; } .tok-bool { color: var(--tb-red-light) !important; }
/* Cursor */ /* Cursor */
.cm-cursor { .cm-cursor {
border-left: 2px solid var(--nes-light-green) !important; border-left: 2px solid var(--tb-white) !important;
} }
/* Selection */ /* Selection */
.cm-selectionBackground, .cm-selectionBackground,
::selection { ::selection {
background: var(--nes-blue) !important; background: var(--tb-blue) !important;
} }
/* Active line */ /* Active line */
.cm-activeLine { .cm-activeLine {
background: rgba(64, 96, 192, 0.15) !important; background: rgba(51, 102, 204, 0.15) !important;
} }
/* ============================================ /* ============================================
HEADINGS (Press Start 2P for that NES feel) HEADINGS
============================================ */ ============================================ */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: var(--marimo-heading-font) !important; font-family: var(--marimo-heading-font) !important;
@@ -209,19 +195,19 @@ h1, h2, h3, h4, h5, h6 {
h1 { h1 {
font-size: 18px !important; font-size: 18px !important;
color: var(--nes-light-green) !important; color: var(--tb-white) !important;
} }
h2 { h2 {
font-size: 14px !important; font-size: 14px !important;
color: var(--nes-sky) !important; color: var(--tb-blue-bright) !important;
} }
h3 { h3 {
font-size: 12px !important; font-size: 12px !important;
color: var(--nes-yellow) !important; color: var(--tb-white) !important;
} }
h4, h5, h6 { h4, h5, h6 {
font-size: 11px !important; font-size: 11px !important;
color: var(--nes-cream) !important; color: var(--tb-white) !important;
} }
/* ============================================ /* ============================================
@@ -233,34 +219,34 @@ table {
} }
th { th {
background: var(--nes-blue) !important; background: var(--tb-blue) !important;
color: var(--nes-white) !important; color: var(--tb-white) !important;
font-family: var(--marimo-heading-font) !important; font-family: var(--marimo-heading-font) !important;
font-size: 10px !important; font-size: 10px !important;
padding: 10px 12px !important; padding: 10px 12px !important;
text-transform: uppercase !important; text-transform: uppercase !important;
letter-spacing: 1px !important; letter-spacing: 1px !important;
border: 1px solid var(--nes-mid-blue) !important; border: 1px solid var(--tb-blue-light) !important;
} }
td { td {
background: var(--nes-black) !important; background: var(--tb-navy) !important;
color: var(--nes-cream) !important; color: var(--tb-white) !important;
padding: 8px 12px !important; padding: 8px 12px !important;
border: 1px solid var(--nes-dark-gray) !important; border: 1px solid var(--tb-navy-light) !important;
font-size: 13px !important; font-size: 13px !important;
} }
tr:nth-child(even) td { tr:nth-child(even) td {
background: var(--nes-dark-gray) !important; background: var(--tb-navy-light) !important;
} }
tr:hover td { tr:hover td {
background: var(--nes-dark-blue) !important; background: rgba(51, 102, 204, 0.2) !important;
} }
/* ============================================ /* ============================================
BUTTONS (NES menu style) BUTTONS
============================================ */ ============================================ */
button, button,
[role="button"], [role="button"],
@@ -275,15 +261,15 @@ button,
button[data-variant="primary"], button[data-variant="primary"],
button.primary, button.primary,
[data-action="run"] { [data-action="run"] {
background: var(--nes-green) !important; background: var(--tb-green) !important;
color: var(--nes-black) !important; color: var(--tb-navy) !important;
border: 2px solid var(--nes-light-green) !important; border: 2px solid var(--tb-green-light) !important;
} }
button[data-variant="primary"]:hover, button[data-variant="primary"]:hover,
button.primary:hover, button.primary:hover,
[data-action="run"]:hover { [data-action="run"]:hover {
background: var(--nes-light-green) !important; background: var(--tb-green-light) !important;
} }
/* ============================================ /* ============================================
@@ -293,9 +279,9 @@ input,
textarea, textarea,
select { select {
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
background: var(--nes-dark-gray) !important; background: var(--tb-navy-mid) !important;
color: var(--nes-white) !important; color: var(--tb-white) !important;
border: 2px solid var(--nes-gray) !important; border: 2px solid var(--tb-slate) !important;
border-radius: 4px !important; border-radius: 4px !important;
padding: 8px 12px !important; padding: 8px 12px !important;
} }
@@ -303,9 +289,9 @@ select {
input:focus, input:focus,
textarea:focus, textarea:focus,
select:focus { select:focus {
border-color: var(--nes-light-blue) !important; border-color: var(--tb-blue-light) !important;
outline: none !important; outline: none !important;
box-shadow: 0 0 0 2px rgba(112, 160, 224, 0.3) !important; box-shadow: 0 0 0 2px rgba(85, 136, 221, 0.3) !important;
} }
/* ============================================ /* ============================================
@@ -316,16 +302,16 @@ pre, code {
} }
code { code {
background: var(--nes-dark-gray) !important; background: var(--tb-navy-light) !important;
color: var(--nes-light-green) !important; color: var(--tb-blue-bright) !important;
padding: 2px 6px !important; padding: 2px 6px !important;
border-radius: 3px !important; border-radius: 3px !important;
font-size: 0.9em !important; font-size: 0.9em !important;
} }
pre { pre {
background: var(--nes-black) !important; background: var(--tb-navy) !important;
border: 2px solid var(--nes-gray) !important; border: 2px solid var(--tb-slate) !important;
border-radius: 4px !important; border-radius: 4px !important;
padding: 12px !important; padding: 12px !important;
} }
@@ -339,18 +325,18 @@ pre code {
LINKS LINKS
============================================ */ ============================================ */
a { a {
color: var(--nes-sky) !important; color: var(--tb-blue-bright) !important;
text-decoration: none !important; text-decoration: none !important;
transition: color 0.15s ease !important; transition: color 0.15s ease !important;
} }
a:hover { a:hover {
color: var(--nes-white) !important; color: var(--tb-white) !important;
text-decoration: underline !important; text-decoration: underline !important;
} }
a:visited { a:visited {
color: var(--nes-light-blue) !important; color: var(--tb-blue-light) !important;
} }
/* ============================================ /* ============================================
@@ -362,17 +348,17 @@ a:visited {
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: var(--nes-dark-gray); background: var(--tb-navy-light);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: var(--nes-gray); background: var(--tb-slate);
border-radius: 6px; border-radius: 6px;
border: 2px solid var(--nes-dark-gray); border: 2px solid var(--tb-navy-light);
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: var(--nes-light-gray); background: var(--tb-steel);
} }
/* ============================================ /* ============================================
@@ -384,17 +370,17 @@ a:visited {
[data-state="open"][data-side] { [data-state="open"][data-side] {
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
font-size: 12px !important; font-size: 12px !important;
background: var(--nes-black) !important; background: var(--tb-navy-light) !important;
color: var(--nes-white) !important; color: var(--tb-white) !important;
border: 2px solid var(--nes-gray) !important; border: 2px solid var(--tb-slate) !important;
border-radius: 4px !important; border-radius: 4px !important;
} }
/* Dropdown menus */ /* Dropdown menus */
[role="menu"], [role="menu"],
[role="listbox"] { [role="listbox"] {
background: var(--nes-dark-gray) !important; background: var(--tb-navy-light) !important;
border: 2px solid var(--nes-gray) !important; border: 2px solid var(--tb-slate) !important;
border-radius: 4px !important; border-radius: 4px !important;
} }
@@ -402,8 +388,8 @@ a:visited {
[role="option"]:hover, [role="option"]:hover,
[role="menuitem"][data-highlighted], [role="menuitem"][data-highlighted],
[role="option"][data-highlighted] { [role="option"][data-highlighted] {
background: var(--nes-blue) !important; background: var(--tb-blue) !important;
color: var(--nes-white) !important; color: var(--tb-white) !important;
} }
/* Badges and pills */ /* Badges and pills */
@@ -417,7 +403,7 @@ a:visited {
/* Focus visible for accessibility */ /* Focus visible for accessibility */
:focus-visible { :focus-visible {
outline: 2px solid var(--nes-light-blue) !important; outline: 2px solid var(--tb-blue-light) !important;
outline-offset: 2px !important; outline-offset: 2px !important;
} }
@@ -426,8 +412,8 @@ a:visited {
============================================ */ ============================================ */
[data-testid="outputs"], [data-testid="outputs"],
.output-area { .output-area {
background: rgba(26, 26, 64, 0.5) !important; background: rgba(22, 32, 64, 0.5) !important;
border-top: 2px solid var(--nes-gray) !important; border-top: 2px solid var(--tb-slate) !important;
padding: 12px !important; padding: 12px !important;
} }
@@ -443,76 +429,24 @@ svg {
background: transparent !important; background: transparent !important;
} }
/* ============================================
CRT SCANLINE OVERLAY
============================================ */
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9998;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.06) 2px,
rgba(0, 0, 0, 0.06) 4px
);
}
/* ============================================ /* ============================================
HOME PAGE - "CREATE NEW NOTEBOOK" CARD HOME PAGE - "CREATE NEW NOTEBOOK" CARD
============================================ */ ============================================ */
/* The "Create a new notebook" link card */
a[rel="noreferrer"][target="_blank"] { a[rel="noreferrer"][target="_blank"] {
background: linear-gradient(135deg, #1a1a40 0%, #2840a0 100%) !important; background: var(--tb-navy-light) !important;
border: 3px solid var(--nes-mid-blue) !important; border: 3px solid var(--tb-slate) !important;
border-radius: 0 !important; border-radius: 0 !important;
box-shadow:
4px 4px 0 var(--nes-black),
inset 0 0 20px rgba(64, 96, 192, 0.2) !important;
position: relative;
overflow: hidden;
}
a[rel="noreferrer"][target="_blank"]::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(144, 192, 240, 0.08),
transparent
);
animation: cartridge-shine 4s ease-in-out infinite;
}
@keyframes cartridge-shine {
0% { left: -50%; }
50% { left: 100%; }
100% { left: 100%; }
} }
a[rel="noreferrer"][target="_blank"]:hover { a[rel="noreferrer"][target="_blank"]:hover {
border-color: var(--nes-light-green) !important; border-color: var(--tb-blue) !important;
box-shadow: background: var(--tb-navy-mid) !important;
4px 4px 0 var(--nes-black),
0 0 15px rgba(128, 208, 128, 0.3),
inset 0 0 20px rgba(128, 208, 128, 0.1) !important;
} }
a[rel="noreferrer"][target="_blank"] h2 { a[rel="noreferrer"][target="_blank"] h2 {
font-family: var(--marimo-heading-font) !important; font-family: var(--marimo-heading-font) !important;
font-size: 12px !important; font-size: 12px !important;
color: var(--nes-light-green) !important; color: var(--tb-white) !important;
text-transform: uppercase !important; text-transform: uppercase !important;
letter-spacing: 2px !important; letter-spacing: 2px !important;
} }
@@ -520,42 +454,37 @@ a[rel="noreferrer"][target="_blank"] h2 {
/* ============================================ /* ============================================
HOME PAGE - SECTION HEADERS HOME PAGE - SECTION HEADERS
============================================ */ ============================================ */
/* "Running notebooks" / "Recent notebooks" / "Workspace" headers */
h2.text-xl { h2.text-xl {
font-family: var(--marimo-heading-font) !important; font-family: var(--marimo-heading-font) !important;
font-size: 11px !important; font-size: 11px !important;
text-transform: uppercase !important; text-transform: uppercase !important;
letter-spacing: 2px !important; letter-spacing: 2px !important;
color: var(--nes-yellow) !important; color: var(--tb-white) !important;
padding-bottom: 6px; padding-bottom: 6px;
border-bottom: 2px solid var(--nes-gray); border-bottom: 2px solid var(--tb-slate);
} }
/* ============================================ /* ============================================
HOME PAGE - FILE LISTS (notebook lists) HOME PAGE - FILE LISTS (notebook lists)
============================================ */ ============================================ */
/* The bordered list containers */
.divide-y.border.rounded { .divide-y.border.rounded {
border: 3px solid var(--nes-gray) !important; border: 3px solid var(--tb-slate) !important;
border-radius: 0 !important; border-radius: 0 !important;
box-shadow: 4px 4px 0 var(--nes-black) !important; background: var(--tb-navy) !important;
background: var(--nes-black) !important;
} }
/* Individual file rows */
.divide-y.border > a, .divide-y.border > a,
.divide-y.border > div > a { .divide-y.border > div > a {
border-color: var(--nes-dark-gray) !important; border-color: var(--tb-navy-light) !important;
transition: all 0.1s ease !important; transition: all 0.1s ease !important;
} }
.divide-y.border > a:hover, .divide-y.border > a:hover,
.divide-y.border > div > a:hover { .divide-y.border > div > a:hover {
background: rgba(40, 64, 160, 0.3) !important; background: rgba(51, 102, 204, 0.2) !important;
border-left: 3px solid var(--nes-light-green) !important; border-left: 3px solid var(--tb-blue) !important;
} }
/* File names in lists */
.divide-y.border a .flex-1 span { .divide-y.border a .flex-1 span {
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
} }
@@ -563,27 +492,23 @@ h2.text-xl {
/* ============================================ /* ============================================
HOME PAGE - WORKSPACE FILE TREE HOME PAGE - WORKSPACE FILE TREE
============================================ */ ============================================ */
/* Tree row hover */
[class*="cursor-pointer"][class*="whitespace-nowrap"]:hover { [class*="cursor-pointer"][class*="whitespace-nowrap"]:hover {
background: rgba(40, 64, 160, 0.25) !important; background: rgba(51, 102, 204, 0.2) !important;
} }
/* Directory names - slightly brighter */
[class*="cursor-pointer"][class*="whitespace-nowrap"] span { [class*="cursor-pointer"][class*="whitespace-nowrap"] span {
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
font-size: 13px !important; font-size: 13px !important;
} }
/* ============================================ /* ============================================
PIXEL-PERFECT BORDERS (NES cartridge feel) PIXEL-PERFECT BORDERS
============================================ */ ============================================ */
/* Override all rounded corners for that crisp 8-bit look */
.rounded-lg, .rounded-lg,
.rounded-md { .rounded-md {
border-radius: 0 !important; border-radius: 0 !important;
} }
/* Keep small UI elements slightly rounded */
.rounded-sm, .rounded-sm,
.rounded { .rounded {
border-radius: 2px !important; border-radius: 2px !important;
@@ -592,69 +517,34 @@ h2.text-xl {
/* ============================================ /* ============================================
TOP BAR / ACTION BUTTONS TOP BAR / ACTION BUTTONS
============================================ */ ============================================ */
/* Settings and shutdown buttons in top right */
.absolute.top-3.right-5 button { .absolute.top-3.right-5 button {
border: 2px solid var(--nes-gray) !important; border: 2px solid var(--tb-slate) !important;
border-radius: 0 !important; border-radius: 0 !important;
background: var(--nes-dark-gray) !important; background: var(--tb-navy-light) !important;
box-shadow: 2px 2px 0 var(--nes-black) !important;
} }
.absolute.top-3.right-5 button:hover { .absolute.top-3.right-5 button:hover {
background: var(--nes-blue) !important; background: var(--tb-blue) !important;
border-color: var(--nes-light-blue) !important; border-color: var(--tb-blue-light) !important;
}
.absolute.top-3.right-5 button:active {
box-shadow: none !important;
transform: translate(2px, 2px);
} }
/* ============================================ /* ============================================
SEARCH INPUT - PIXEL STYLE SEARCH INPUT
============================================ */ ============================================ */
input#search { input#search {
border: 3px solid var(--nes-gray) !important; border: 3px solid var(--tb-slate) !important;
border-radius: 0 !important; border-radius: 0 !important;
background: var(--nes-black) !important; background: var(--tb-navy) !important;
box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.3) !important;
font-family: var(--marimo-monospace-font) !important; font-family: var(--marimo-monospace-font) !important;
} }
input#search:focus { input#search:focus {
border-color: var(--nes-light-blue) !important; border-color: var(--tb-blue-light) !important;
box-shadow: box-shadow: 0 0 8px rgba(85, 136, 221, 0.3) !important;
inset 2px 2px 0 rgba(0, 0, 0, 0.3),
0 0 8px rgba(112, 160, 224, 0.3) !important;
} }
/* ============================================ /* ============================================
POWER-ON GLOW (subtle animation on page) BUTTON PRESS EFFECT
============================================ */
@keyframes power-on {
0% { opacity: 0; filter: brightness(2) saturate(0); }
30% { opacity: 1; filter: brightness(1.5) saturate(0.5); }
100% { opacity: 1; filter: brightness(1) saturate(1); }
}
#root {
animation: power-on 0.8s ease-out;
}
/* ============================================
BLINKING CURSOR / READY INDICATOR
============================================ */
@keyframes blink-cursor {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.cm-cursor {
animation: blink-cursor 1s step-end infinite !important;
}
/* ============================================
NES-STYLE BUTTON PRESS EFFECT
============================================ */ ============================================ */
button:active, button:active,
[role="button"]:active { [role="button"]:active {