update marimo notebook CSS to throwback palette
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
@@ -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 */
|
||||
|
||||
@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 {
|
||||
/* Core NES colors */
|
||||
--nes-black: #0f0f0f;
|
||||
--nes-dark-gray: #1a1a2e;
|
||||
--nes-gray: #4a4a68;
|
||||
--nes-light-gray: #9090a8;
|
||||
--nes-white: #f0f0f0;
|
||||
--tb-navy: #0a1628;
|
||||
--tb-navy-light: #162040;
|
||||
--tb-navy-mid: #1e2d50;
|
||||
--tb-slate: #2a3f5f;
|
||||
--tb-steel: #5a7090;
|
||||
--tb-white: #f0f0f0;
|
||||
|
||||
/* NES blues (the classic Tecmo/RBI look) */
|
||||
--nes-dark-blue: #1a1a40;
|
||||
--nes-blue: #2840a0;
|
||||
--nes-mid-blue: #4060c0;
|
||||
--nes-light-blue: #70a0e0;
|
||||
--nes-sky: #90c0f0;
|
||||
--tb-blue: #3366cc;
|
||||
--tb-blue-light: #5588dd;
|
||||
--tb-blue-bright: #88aaee;
|
||||
|
||||
/* Accent colors */
|
||||
--nes-red: #d03030;
|
||||
--nes-orange: #e07020;
|
||||
--nes-yellow: #e0b040;
|
||||
--nes-green: #40a040;
|
||||
--nes-light-green: #80d080;
|
||||
--nes-cyan: #40b0c0;
|
||||
--nes-cream: #e8d8c0;
|
||||
--tb-red: #cc2244;
|
||||
--tb-red-light: #dd4466;
|
||||
|
||||
--tb-green: #44aa44;
|
||||
--tb-green-light: #66cc66;
|
||||
--tb-yellow: #ddaa33;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -45,39 +40,39 @@
|
||||
============================================ */
|
||||
:root {
|
||||
/* Base colors */
|
||||
--background: var(--nes-dark-blue);
|
||||
--foreground: var(--nes-white);
|
||||
--background: var(--tb-navy);
|
||||
--foreground: var(--tb-white);
|
||||
|
||||
/* Muted/secondary text */
|
||||
--muted: var(--nes-dark-gray);
|
||||
--muted-foreground: var(--nes-light-gray);
|
||||
--muted: var(--tb-navy-light);
|
||||
--muted-foreground: var(--tb-steel);
|
||||
|
||||
/* Popover/dropdown backgrounds */
|
||||
--popover: var(--nes-dark-gray);
|
||||
--popover-foreground: var(--nes-white);
|
||||
--popover: var(--tb-navy-light);
|
||||
--popover-foreground: var(--tb-white);
|
||||
|
||||
/* Cards (cells) */
|
||||
--card: var(--nes-black);
|
||||
--card-foreground: var(--nes-white);
|
||||
--card: var(--tb-navy);
|
||||
--card-foreground: var(--tb-white);
|
||||
|
||||
/* Borders and inputs */
|
||||
--border: var(--nes-gray);
|
||||
--input: var(--nes-dark-gray);
|
||||
--border: var(--tb-slate);
|
||||
--input: var(--tb-navy-mid);
|
||||
|
||||
/* Primary action color */
|
||||
--primary: var(--nes-mid-blue);
|
||||
--primary-foreground: var(--nes-white);
|
||||
--primary: var(--tb-blue);
|
||||
--primary-foreground: var(--tb-white);
|
||||
|
||||
/* Secondary elements */
|
||||
--secondary: var(--nes-gray);
|
||||
--secondary-foreground: var(--nes-white);
|
||||
--secondary: var(--tb-slate);
|
||||
--secondary-foreground: var(--tb-white);
|
||||
|
||||
/* Accent/highlight */
|
||||
--accent: var(--nes-light-blue);
|
||||
--accent-foreground: var(--nes-black);
|
||||
--accent: var(--tb-blue-light);
|
||||
--accent-foreground: var(--tb-white);
|
||||
|
||||
/* Focus ring */
|
||||
--ring: var(--nes-light-blue);
|
||||
--ring: var(--tb-blue-light);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -85,30 +80,30 @@
|
||||
============================================ */
|
||||
:root {
|
||||
/* Error states */
|
||||
--destructive: var(--nes-red);
|
||||
--destructive-foreground: var(--nes-white);
|
||||
--error: var(--nes-red);
|
||||
--error-foreground: var(--nes-white);
|
||||
--destructive: var(--tb-red);
|
||||
--destructive-foreground: var(--tb-white);
|
||||
--error: var(--tb-red);
|
||||
--error-foreground: var(--tb-white);
|
||||
|
||||
/* Success states */
|
||||
--success: var(--nes-green);
|
||||
--success-foreground: var(--nes-white);
|
||||
--success: var(--tb-green);
|
||||
--success-foreground: var(--tb-white);
|
||||
|
||||
/* Action buttons (run, etc) */
|
||||
--action: var(--nes-green);
|
||||
--action-hover: var(--nes-light-green);
|
||||
--action-foreground: var(--nes-black);
|
||||
--action: var(--tb-green);
|
||||
--action-hover: var(--tb-green-light);
|
||||
--action-foreground: var(--tb-navy);
|
||||
|
||||
/* Links */
|
||||
--link: var(--nes-sky);
|
||||
--link-visited: var(--nes-light-blue);
|
||||
--link: var(--tb-blue-bright);
|
||||
--link-visited: var(--tb-blue-light);
|
||||
|
||||
/* Stale indicator */
|
||||
--stale: rgba(224, 176, 64, 0.25);
|
||||
--stale: rgba(221, 170, 51, 0.25);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SHADOWS (subtle, NES-style)
|
||||
SHADOWS
|
||||
============================================ */
|
||||
:root {
|
||||
--base-shadow: rgba(0, 0, 0, 0.4);
|
||||
@@ -117,26 +112,17 @@
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BACKGROUND GRADIENT (Tecmo field style)
|
||||
BACKGROUND
|
||||
============================================ */
|
||||
:root {
|
||||
--background-image: linear-gradient(
|
||||
180deg,
|
||||
#0a0a28 0%,
|
||||
#1a1a40 30%,
|
||||
#1a1a40 70%,
|
||||
#0a0a28 100%
|
||||
);
|
||||
--background-image: none;
|
||||
--background-repeat: no-repeat;
|
||||
--background-attachment: fixed;
|
||||
--background-size: cover;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: var(--background-image) !important;
|
||||
background-repeat: var(--background-repeat) !important;
|
||||
background-attachment: var(--background-attachment) !important;
|
||||
background-size: var(--background-size) !important;
|
||||
background: var(--tb-navy) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -145,7 +131,7 @@ body {
|
||||
.cm-editor {
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
font-size: 14px !important;
|
||||
background: var(--nes-black) !important;
|
||||
background: var(--tb-navy) !important;
|
||||
}
|
||||
|
||||
.cm-content {
|
||||
@@ -154,52 +140,52 @@ body {
|
||||
|
||||
.cm-line {
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
color: var(--nes-white) !important;
|
||||
color: var(--tb-white) !important;
|
||||
}
|
||||
|
||||
.cm-gutters {
|
||||
background: var(--nes-dark-gray) !important;
|
||||
border-right: 2px solid var(--nes-gray) !important;
|
||||
background: var(--tb-navy-light) !important;
|
||||
border-right: 2px solid var(--tb-slate) !important;
|
||||
}
|
||||
|
||||
.cm-lineNumbers .cm-gutterElement {
|
||||
color: var(--nes-light-gray) !important;
|
||||
color: var(--tb-steel) !important;
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* Syntax highlighting */
|
||||
.cm-keyword, .tok-keyword { color: var(--nes-sky) !important; }
|
||||
.cm-string, .tok-string { color: var(--nes-light-green) !important; }
|
||||
.cm-number, .tok-number { color: var(--nes-yellow) !important; }
|
||||
.cm-comment, .tok-comment { color: var(--nes-light-gray) !important; font-style: italic !important; }
|
||||
.cm-function, .tok-function { color: var(--nes-cream) !important; }
|
||||
.cm-variableName, .tok-variableName { color: var(--nes-white) !important; }
|
||||
.cm-operator, .tok-operator { color: var(--nes-cyan) !important; }
|
||||
.cm-propertyName, .tok-propertyName { color: var(--nes-light-blue) !important; }
|
||||
.tok-standard, .cm-builtin { color: var(--nes-orange) !important; }
|
||||
.tok-definition, .cm-def { color: var(--nes-sky) !important; }
|
||||
.tok-typeName { color: var(--nes-yellow) !important; }
|
||||
.tok-bool { color: var(--nes-orange) !important; }
|
||||
.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(--nes-light-green) !important;
|
||||
border-left: 2px solid var(--tb-white) !important;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
.cm-selectionBackground,
|
||||
::selection {
|
||||
background: var(--nes-blue) !important;
|
||||
background: var(--tb-blue) !important;
|
||||
}
|
||||
|
||||
/* Active line */
|
||||
.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 {
|
||||
font-family: var(--marimo-heading-font) !important;
|
||||
@@ -209,19 +195,19 @@ h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
h1 {
|
||||
font-size: 18px !important;
|
||||
color: var(--nes-light-green) !important;
|
||||
color: var(--tb-white) !important;
|
||||
}
|
||||
h2 {
|
||||
font-size: 14px !important;
|
||||
color: var(--nes-sky) !important;
|
||||
color: var(--tb-blue-bright) !important;
|
||||
}
|
||||
h3 {
|
||||
font-size: 12px !important;
|
||||
color: var(--nes-yellow) !important;
|
||||
color: var(--tb-white) !important;
|
||||
}
|
||||
h4, h5, h6 {
|
||||
font-size: 11px !important;
|
||||
color: var(--nes-cream) !important;
|
||||
color: var(--tb-white) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -233,34 +219,34 @@ table {
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--nes-blue) !important;
|
||||
color: var(--nes-white) !important;
|
||||
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(--nes-mid-blue) !important;
|
||||
border: 1px solid var(--tb-blue-light) !important;
|
||||
}
|
||||
|
||||
td {
|
||||
background: var(--nes-black) !important;
|
||||
color: var(--nes-cream) !important;
|
||||
background: var(--tb-navy) !important;
|
||||
color: var(--tb-white) !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;
|
||||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background: var(--nes-dark-gray) !important;
|
||||
background: var(--tb-navy-light) !important;
|
||||
}
|
||||
|
||||
tr:hover td {
|
||||
background: var(--nes-dark-blue) !important;
|
||||
background: rgba(51, 102, 204, 0.2) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BUTTONS (NES menu style)
|
||||
BUTTONS
|
||||
============================================ */
|
||||
button,
|
||||
[role="button"],
|
||||
@@ -275,15 +261,15 @@ button,
|
||||
button[data-variant="primary"],
|
||||
button.primary,
|
||||
[data-action="run"] {
|
||||
background: var(--nes-green) !important;
|
||||
color: var(--nes-black) !important;
|
||||
border: 2px solid var(--nes-light-green) !important;
|
||||
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(--nes-light-green) !important;
|
||||
background: var(--tb-green-light) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -293,9 +279,9 @@ input,
|
||||
textarea,
|
||||
select {
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
background: var(--nes-dark-gray) !important;
|
||||
color: var(--nes-white) !important;
|
||||
border: 2px solid var(--nes-gray) !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;
|
||||
}
|
||||
@@ -303,9 +289,9 @@ select {
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: var(--nes-light-blue) !important;
|
||||
border-color: var(--tb-blue-light) !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 {
|
||||
background: var(--nes-dark-gray) !important;
|
||||
color: var(--nes-light-green) !important;
|
||||
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(--nes-black) !important;
|
||||
border: 2px solid var(--nes-gray) !important;
|
||||
background: var(--tb-navy) !important;
|
||||
border: 2px solid var(--tb-slate) !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 12px !important;
|
||||
}
|
||||
@@ -339,18 +325,18 @@ pre code {
|
||||
LINKS
|
||||
============================================ */
|
||||
a {
|
||||
color: var(--nes-sky) !important;
|
||||
color: var(--tb-blue-bright) !important;
|
||||
text-decoration: none !important;
|
||||
transition: color 0.15s ease !important;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--nes-white) !important;
|
||||
color: var(--tb-white) !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--nes-light-blue) !important;
|
||||
color: var(--tb-blue-light) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -362,17 +348,17 @@ a:visited {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--nes-dark-gray);
|
||||
background: var(--tb-navy-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--nes-gray);
|
||||
background: var(--tb-slate);
|
||||
border-radius: 6px;
|
||||
border: 2px solid var(--nes-dark-gray);
|
||||
border: 2px solid var(--tb-navy-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--nes-light-gray);
|
||||
background: var(--tb-steel);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -384,17 +370,17 @@ a:visited {
|
||||
[data-state="open"][data-side] {
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
font-size: 12px !important;
|
||||
background: var(--nes-black) !important;
|
||||
color: var(--nes-white) !important;
|
||||
border: 2px solid var(--nes-gray) !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(--nes-dark-gray) !important;
|
||||
border: 2px solid var(--nes-gray) !important;
|
||||
background: var(--tb-navy-light) !important;
|
||||
border: 2px solid var(--tb-slate) !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
@@ -402,8 +388,8 @@ a:visited {
|
||||
[role="option"]:hover,
|
||||
[role="menuitem"][data-highlighted],
|
||||
[role="option"][data-highlighted] {
|
||||
background: var(--nes-blue) !important;
|
||||
color: var(--nes-white) !important;
|
||||
background: var(--tb-blue) !important;
|
||||
color: var(--tb-white) !important;
|
||||
}
|
||||
|
||||
/* Badges and pills */
|
||||
@@ -417,7 +403,7 @@ a:visited {
|
||||
|
||||
/* Focus visible for accessibility */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--nes-light-blue) !important;
|
||||
outline: 2px solid var(--tb-blue-light) !important;
|
||||
outline-offset: 2px !important;
|
||||
}
|
||||
|
||||
@@ -426,8 +412,8 @@ a:visited {
|
||||
============================================ */
|
||||
[data-testid="outputs"],
|
||||
.output-area {
|
||||
background: rgba(26, 26, 64, 0.5) !important;
|
||||
border-top: 2px solid var(--nes-gray) !important;
|
||||
background: rgba(22, 32, 64, 0.5) !important;
|
||||
border-top: 2px solid var(--tb-slate) !important;
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
@@ -443,76 +429,24 @@ svg {
|
||||
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
|
||||
============================================ */
|
||||
/* The "Create a new notebook" link card */
|
||||
a[rel="noreferrer"][target="_blank"] {
|
||||
background: linear-gradient(135deg, #1a1a40 0%, #2840a0 100%) !important;
|
||||
border: 3px solid var(--nes-mid-blue) !important;
|
||||
background: var(--tb-navy-light) !important;
|
||||
border: 3px solid var(--tb-slate) !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 {
|
||||
border-color: var(--nes-light-green) !important;
|
||||
box-shadow:
|
||||
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;
|
||||
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(--nes-light-green) !important;
|
||||
color: var(--tb-white) !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 2px !important;
|
||||
}
|
||||
@@ -520,42 +454,37 @@ a[rel="noreferrer"][target="_blank"] h2 {
|
||||
/* ============================================
|
||||
HOME PAGE - SECTION HEADERS
|
||||
============================================ */
|
||||
/* "Running notebooks" / "Recent notebooks" / "Workspace" 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(--nes-yellow) !important;
|
||||
color: var(--tb-white) !important;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 2px solid var(--nes-gray);
|
||||
border-bottom: 2px solid var(--tb-slate);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
HOME PAGE - FILE LISTS (notebook lists)
|
||||
============================================ */
|
||||
/* The bordered list containers */
|
||||
.divide-y.border.rounded {
|
||||
border: 3px solid var(--nes-gray) !important;
|
||||
border: 3px solid var(--tb-slate) !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: 4px 4px 0 var(--nes-black) !important;
|
||||
background: var(--nes-black) !important;
|
||||
background: var(--tb-navy) !important;
|
||||
}
|
||||
|
||||
/* Individual file rows */
|
||||
.divide-y.border > 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;
|
||||
}
|
||||
|
||||
.divide-y.border > a:hover,
|
||||
.divide-y.border > div > a:hover {
|
||||
background: rgba(40, 64, 160, 0.3) !important;
|
||||
border-left: 3px solid var(--nes-light-green) !important;
|
||||
background: rgba(51, 102, 204, 0.2) !important;
|
||||
border-left: 3px solid var(--tb-blue) !important;
|
||||
}
|
||||
|
||||
/* File names in lists */
|
||||
.divide-y.border a .flex-1 span {
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
}
|
||||
@@ -563,27 +492,23 @@ h2.text-xl {
|
||||
/* ============================================
|
||||
HOME PAGE - WORKSPACE FILE TREE
|
||||
============================================ */
|
||||
/* Tree row 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 {
|
||||
font-family: var(--marimo-monospace-font) !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-md {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Keep small UI elements slightly rounded */
|
||||
.rounded-sm,
|
||||
.rounded {
|
||||
border-radius: 2px !important;
|
||||
@@ -592,69 +517,34 @@ h2.text-xl {
|
||||
/* ============================================
|
||||
TOP BAR / ACTION BUTTONS
|
||||
============================================ */
|
||||
/* Settings and shutdown buttons in top right */
|
||||
.absolute.top-3.right-5 button {
|
||||
border: 2px solid var(--nes-gray) !important;
|
||||
border: 2px solid var(--tb-slate) !important;
|
||||
border-radius: 0 !important;
|
||||
background: var(--nes-dark-gray) !important;
|
||||
box-shadow: 2px 2px 0 var(--nes-black) !important;
|
||||
background: var(--tb-navy-light) !important;
|
||||
}
|
||||
|
||||
.absolute.top-3.right-5 button:hover {
|
||||
background: var(--nes-blue) !important;
|
||||
border-color: var(--nes-light-blue) !important;
|
||||
}
|
||||
|
||||
.absolute.top-3.right-5 button:active {
|
||||
box-shadow: none !important;
|
||||
transform: translate(2px, 2px);
|
||||
background: var(--tb-blue) !important;
|
||||
border-color: var(--tb-blue-light) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SEARCH INPUT - PIXEL STYLE
|
||||
SEARCH INPUT
|
||||
============================================ */
|
||||
input#search {
|
||||
border: 3px solid var(--nes-gray) !important;
|
||||
border: 3px solid var(--tb-slate) !important;
|
||||
border-radius: 0 !important;
|
||||
background: var(--nes-black) !important;
|
||||
box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.3) !important;
|
||||
background: var(--tb-navy) !important;
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
}
|
||||
|
||||
input#search:focus {
|
||||
border-color: var(--nes-light-blue) !important;
|
||||
box-shadow:
|
||||
inset 2px 2px 0 rgba(0, 0, 0, 0.3),
|
||||
0 0 8px rgba(112, 160, 224, 0.3) !important;
|
||||
border-color: var(--tb-blue-light) !important;
|
||||
box-shadow: 0 0 8px rgba(85, 136, 221, 0.3) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
POWER-ON GLOW (subtle animation on page)
|
||||
============================================ */
|
||||
@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 PRESS EFFECT
|
||||
============================================ */
|
||||
button:active,
|
||||
[role="button"]:active {
|
||||
|
||||
@@ -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 */
|
||||
|
||||
@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 {
|
||||
/* Core NES colors */
|
||||
--nes-black: #0f0f0f;
|
||||
--nes-dark-gray: #1a1a2e;
|
||||
--nes-gray: #4a4a68;
|
||||
--nes-light-gray: #9090a8;
|
||||
--nes-white: #f0f0f0;
|
||||
--tb-navy: #0a1628;
|
||||
--tb-navy-light: #162040;
|
||||
--tb-navy-mid: #1e2d50;
|
||||
--tb-slate: #2a3f5f;
|
||||
--tb-steel: #5a7090;
|
||||
--tb-white: #f0f0f0;
|
||||
|
||||
/* NES blues (the classic Tecmo/RBI look) */
|
||||
--nes-dark-blue: #1a1a40;
|
||||
--nes-blue: #2840a0;
|
||||
--nes-mid-blue: #4060c0;
|
||||
--nes-light-blue: #70a0e0;
|
||||
--nes-sky: #90c0f0;
|
||||
--tb-blue: #3366cc;
|
||||
--tb-blue-light: #5588dd;
|
||||
--tb-blue-bright: #88aaee;
|
||||
|
||||
/* Accent colors */
|
||||
--nes-red: #d03030;
|
||||
--nes-orange: #e07020;
|
||||
--nes-yellow: #e0b040;
|
||||
--nes-green: #40a040;
|
||||
--nes-light-green: #80d080;
|
||||
--nes-cyan: #40b0c0;
|
||||
--nes-cream: #e8d8c0;
|
||||
--tb-red: #cc2244;
|
||||
--tb-red-light: #dd4466;
|
||||
|
||||
--tb-green: #44aa44;
|
||||
--tb-green-light: #66cc66;
|
||||
--tb-yellow: #ddaa33;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -45,39 +40,39 @@
|
||||
============================================ */
|
||||
:root {
|
||||
/* Base colors */
|
||||
--background: var(--nes-dark-blue);
|
||||
--foreground: var(--nes-white);
|
||||
--background: var(--tb-navy);
|
||||
--foreground: var(--tb-white);
|
||||
|
||||
/* Muted/secondary text */
|
||||
--muted: var(--nes-dark-gray);
|
||||
--muted-foreground: var(--nes-light-gray);
|
||||
--muted: var(--tb-navy-light);
|
||||
--muted-foreground: var(--tb-steel);
|
||||
|
||||
/* Popover/dropdown backgrounds */
|
||||
--popover: var(--nes-dark-gray);
|
||||
--popover-foreground: var(--nes-white);
|
||||
--popover: var(--tb-navy-light);
|
||||
--popover-foreground: var(--tb-white);
|
||||
|
||||
/* Cards (cells) */
|
||||
--card: var(--nes-black);
|
||||
--card-foreground: var(--nes-white);
|
||||
--card: var(--tb-navy);
|
||||
--card-foreground: var(--tb-white);
|
||||
|
||||
/* Borders and inputs */
|
||||
--border: var(--nes-gray);
|
||||
--input: var(--nes-dark-gray);
|
||||
--border: var(--tb-slate);
|
||||
--input: var(--tb-navy-mid);
|
||||
|
||||
/* Primary action color */
|
||||
--primary: var(--nes-mid-blue);
|
||||
--primary-foreground: var(--nes-white);
|
||||
--primary: var(--tb-blue);
|
||||
--primary-foreground: var(--tb-white);
|
||||
|
||||
/* Secondary elements */
|
||||
--secondary: var(--nes-gray);
|
||||
--secondary-foreground: var(--nes-white);
|
||||
--secondary: var(--tb-slate);
|
||||
--secondary-foreground: var(--tb-white);
|
||||
|
||||
/* Accent/highlight */
|
||||
--accent: var(--nes-light-blue);
|
||||
--accent-foreground: var(--nes-black);
|
||||
--accent: var(--tb-blue-light);
|
||||
--accent-foreground: var(--tb-white);
|
||||
|
||||
/* Focus ring */
|
||||
--ring: var(--nes-light-blue);
|
||||
--ring: var(--tb-blue-light);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -85,30 +80,30 @@
|
||||
============================================ */
|
||||
:root {
|
||||
/* Error states */
|
||||
--destructive: var(--nes-red);
|
||||
--destructive-foreground: var(--nes-white);
|
||||
--error: var(--nes-red);
|
||||
--error-foreground: var(--nes-white);
|
||||
--destructive: var(--tb-red);
|
||||
--destructive-foreground: var(--tb-white);
|
||||
--error: var(--tb-red);
|
||||
--error-foreground: var(--tb-white);
|
||||
|
||||
/* Success states */
|
||||
--success: var(--nes-green);
|
||||
--success-foreground: var(--nes-white);
|
||||
--success: var(--tb-green);
|
||||
--success-foreground: var(--tb-white);
|
||||
|
||||
/* Action buttons (run, etc) */
|
||||
--action: var(--nes-green);
|
||||
--action-hover: var(--nes-light-green);
|
||||
--action-foreground: var(--nes-black);
|
||||
--action: var(--tb-green);
|
||||
--action-hover: var(--tb-green-light);
|
||||
--action-foreground: var(--tb-navy);
|
||||
|
||||
/* Links */
|
||||
--link: var(--nes-sky);
|
||||
--link-visited: var(--nes-light-blue);
|
||||
--link: var(--tb-blue-bright);
|
||||
--link-visited: var(--tb-blue-light);
|
||||
|
||||
/* Stale indicator */
|
||||
--stale: rgba(224, 176, 64, 0.25);
|
||||
--stale: rgba(221, 170, 51, 0.25);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SHADOWS (subtle, NES-style)
|
||||
SHADOWS
|
||||
============================================ */
|
||||
:root {
|
||||
--base-shadow: rgba(0, 0, 0, 0.4);
|
||||
@@ -117,26 +112,17 @@
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BACKGROUND GRADIENT (Tecmo field style)
|
||||
BACKGROUND
|
||||
============================================ */
|
||||
:root {
|
||||
--background-image: linear-gradient(
|
||||
180deg,
|
||||
#0a0a28 0%,
|
||||
#1a1a40 30%,
|
||||
#1a1a40 70%,
|
||||
#0a0a28 100%
|
||||
);
|
||||
--background-image: none;
|
||||
--background-repeat: no-repeat;
|
||||
--background-attachment: fixed;
|
||||
--background-size: cover;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: var(--background-image) !important;
|
||||
background-repeat: var(--background-repeat) !important;
|
||||
background-attachment: var(--background-attachment) !important;
|
||||
background-size: var(--background-size) !important;
|
||||
background: var(--tb-navy) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -145,7 +131,7 @@ body {
|
||||
.cm-editor {
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
font-size: 14px !important;
|
||||
background: var(--nes-black) !important;
|
||||
background: var(--tb-navy) !important;
|
||||
}
|
||||
|
||||
.cm-content {
|
||||
@@ -154,52 +140,52 @@ body {
|
||||
|
||||
.cm-line {
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
color: var(--nes-white) !important;
|
||||
color: var(--tb-white) !important;
|
||||
}
|
||||
|
||||
.cm-gutters {
|
||||
background: var(--nes-dark-gray) !important;
|
||||
border-right: 2px solid var(--nes-gray) !important;
|
||||
background: var(--tb-navy-light) !important;
|
||||
border-right: 2px solid var(--tb-slate) !important;
|
||||
}
|
||||
|
||||
.cm-lineNumbers .cm-gutterElement {
|
||||
color: var(--nes-light-gray) !important;
|
||||
color: var(--tb-steel) !important;
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* Syntax highlighting */
|
||||
.cm-keyword, .tok-keyword { color: var(--nes-sky) !important; }
|
||||
.cm-string, .tok-string { color: var(--nes-light-green) !important; }
|
||||
.cm-number, .tok-number { color: var(--nes-yellow) !important; }
|
||||
.cm-comment, .tok-comment { color: var(--nes-light-gray) !important; font-style: italic !important; }
|
||||
.cm-function, .tok-function { color: var(--nes-cream) !important; }
|
||||
.cm-variableName, .tok-variableName { color: var(--nes-white) !important; }
|
||||
.cm-operator, .tok-operator { color: var(--nes-cyan) !important; }
|
||||
.cm-propertyName, .tok-propertyName { color: var(--nes-light-blue) !important; }
|
||||
.tok-standard, .cm-builtin { color: var(--nes-orange) !important; }
|
||||
.tok-definition, .cm-def { color: var(--nes-sky) !important; }
|
||||
.tok-typeName { color: var(--nes-yellow) !important; }
|
||||
.tok-bool { color: var(--nes-orange) !important; }
|
||||
.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(--nes-light-green) !important;
|
||||
border-left: 2px solid var(--tb-white) !important;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
.cm-selectionBackground,
|
||||
::selection {
|
||||
background: var(--nes-blue) !important;
|
||||
background: var(--tb-blue) !important;
|
||||
}
|
||||
|
||||
/* Active line */
|
||||
.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 {
|
||||
font-family: var(--marimo-heading-font) !important;
|
||||
@@ -209,19 +195,19 @@ h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
h1 {
|
||||
font-size: 18px !important;
|
||||
color: var(--nes-light-green) !important;
|
||||
color: var(--tb-white) !important;
|
||||
}
|
||||
h2 {
|
||||
font-size: 14px !important;
|
||||
color: var(--nes-sky) !important;
|
||||
color: var(--tb-blue-bright) !important;
|
||||
}
|
||||
h3 {
|
||||
font-size: 12px !important;
|
||||
color: var(--nes-yellow) !important;
|
||||
color: var(--tb-white) !important;
|
||||
}
|
||||
h4, h5, h6 {
|
||||
font-size: 11px !important;
|
||||
color: var(--nes-cream) !important;
|
||||
color: var(--tb-white) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -233,34 +219,34 @@ table {
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--nes-blue) !important;
|
||||
color: var(--nes-white) !important;
|
||||
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(--nes-mid-blue) !important;
|
||||
border: 1px solid var(--tb-blue-light) !important;
|
||||
}
|
||||
|
||||
td {
|
||||
background: var(--nes-black) !important;
|
||||
color: var(--nes-cream) !important;
|
||||
background: var(--tb-navy) !important;
|
||||
color: var(--tb-white) !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;
|
||||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background: var(--nes-dark-gray) !important;
|
||||
background: var(--tb-navy-light) !important;
|
||||
}
|
||||
|
||||
tr:hover td {
|
||||
background: var(--nes-dark-blue) !important;
|
||||
background: rgba(51, 102, 204, 0.2) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BUTTONS (NES menu style)
|
||||
BUTTONS
|
||||
============================================ */
|
||||
button,
|
||||
[role="button"],
|
||||
@@ -275,15 +261,15 @@ button,
|
||||
button[data-variant="primary"],
|
||||
button.primary,
|
||||
[data-action="run"] {
|
||||
background: var(--nes-green) !important;
|
||||
color: var(--nes-black) !important;
|
||||
border: 2px solid var(--nes-light-green) !important;
|
||||
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(--nes-light-green) !important;
|
||||
background: var(--tb-green-light) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -293,9 +279,9 @@ input,
|
||||
textarea,
|
||||
select {
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
background: var(--nes-dark-gray) !important;
|
||||
color: var(--nes-white) !important;
|
||||
border: 2px solid var(--nes-gray) !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;
|
||||
}
|
||||
@@ -303,9 +289,9 @@ select {
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: var(--nes-light-blue) !important;
|
||||
border-color: var(--tb-blue-light) !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 {
|
||||
background: var(--nes-dark-gray) !important;
|
||||
color: var(--nes-light-green) !important;
|
||||
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(--nes-black) !important;
|
||||
border: 2px solid var(--nes-gray) !important;
|
||||
background: var(--tb-navy) !important;
|
||||
border: 2px solid var(--tb-slate) !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 12px !important;
|
||||
}
|
||||
@@ -339,18 +325,18 @@ pre code {
|
||||
LINKS
|
||||
============================================ */
|
||||
a {
|
||||
color: var(--nes-sky) !important;
|
||||
color: var(--tb-blue-bright) !important;
|
||||
text-decoration: none !important;
|
||||
transition: color 0.15s ease !important;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--nes-white) !important;
|
||||
color: var(--tb-white) !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--nes-light-blue) !important;
|
||||
color: var(--tb-blue-light) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -362,17 +348,17 @@ a:visited {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--nes-dark-gray);
|
||||
background: var(--tb-navy-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--nes-gray);
|
||||
background: var(--tb-slate);
|
||||
border-radius: 6px;
|
||||
border: 2px solid var(--nes-dark-gray);
|
||||
border: 2px solid var(--tb-navy-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--nes-light-gray);
|
||||
background: var(--tb-steel);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -384,17 +370,17 @@ a:visited {
|
||||
[data-state="open"][data-side] {
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
font-size: 12px !important;
|
||||
background: var(--nes-black) !important;
|
||||
color: var(--nes-white) !important;
|
||||
border: 2px solid var(--nes-gray) !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(--nes-dark-gray) !important;
|
||||
border: 2px solid var(--nes-gray) !important;
|
||||
background: var(--tb-navy-light) !important;
|
||||
border: 2px solid var(--tb-slate) !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
@@ -402,8 +388,8 @@ a:visited {
|
||||
[role="option"]:hover,
|
||||
[role="menuitem"][data-highlighted],
|
||||
[role="option"][data-highlighted] {
|
||||
background: var(--nes-blue) !important;
|
||||
color: var(--nes-white) !important;
|
||||
background: var(--tb-blue) !important;
|
||||
color: var(--tb-white) !important;
|
||||
}
|
||||
|
||||
/* Badges and pills */
|
||||
@@ -417,7 +403,7 @@ a:visited {
|
||||
|
||||
/* Focus visible for accessibility */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--nes-light-blue) !important;
|
||||
outline: 2px solid var(--tb-blue-light) !important;
|
||||
outline-offset: 2px !important;
|
||||
}
|
||||
|
||||
@@ -426,8 +412,8 @@ a:visited {
|
||||
============================================ */
|
||||
[data-testid="outputs"],
|
||||
.output-area {
|
||||
background: rgba(26, 26, 64, 0.5) !important;
|
||||
border-top: 2px solid var(--nes-gray) !important;
|
||||
background: rgba(22, 32, 64, 0.5) !important;
|
||||
border-top: 2px solid var(--tb-slate) !important;
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
@@ -443,76 +429,24 @@ svg {
|
||||
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
|
||||
============================================ */
|
||||
/* The "Create a new notebook" link card */
|
||||
a[rel="noreferrer"][target="_blank"] {
|
||||
background: linear-gradient(135deg, #1a1a40 0%, #2840a0 100%) !important;
|
||||
border: 3px solid var(--nes-mid-blue) !important;
|
||||
background: var(--tb-navy-light) !important;
|
||||
border: 3px solid var(--tb-slate) !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 {
|
||||
border-color: var(--nes-light-green) !important;
|
||||
box-shadow:
|
||||
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;
|
||||
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(--nes-light-green) !important;
|
||||
color: var(--tb-white) !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 2px !important;
|
||||
}
|
||||
@@ -520,42 +454,37 @@ a[rel="noreferrer"][target="_blank"] h2 {
|
||||
/* ============================================
|
||||
HOME PAGE - SECTION HEADERS
|
||||
============================================ */
|
||||
/* "Running notebooks" / "Recent notebooks" / "Workspace" 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(--nes-yellow) !important;
|
||||
color: var(--tb-white) !important;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 2px solid var(--nes-gray);
|
||||
border-bottom: 2px solid var(--tb-slate);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
HOME PAGE - FILE LISTS (notebook lists)
|
||||
============================================ */
|
||||
/* The bordered list containers */
|
||||
.divide-y.border.rounded {
|
||||
border: 3px solid var(--nes-gray) !important;
|
||||
border: 3px solid var(--tb-slate) !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: 4px 4px 0 var(--nes-black) !important;
|
||||
background: var(--nes-black) !important;
|
||||
background: var(--tb-navy) !important;
|
||||
}
|
||||
|
||||
/* Individual file rows */
|
||||
.divide-y.border > 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;
|
||||
}
|
||||
|
||||
.divide-y.border > a:hover,
|
||||
.divide-y.border > div > a:hover {
|
||||
background: rgba(40, 64, 160, 0.3) !important;
|
||||
border-left: 3px solid var(--nes-light-green) !important;
|
||||
background: rgba(51, 102, 204, 0.2) !important;
|
||||
border-left: 3px solid var(--tb-blue) !important;
|
||||
}
|
||||
|
||||
/* File names in lists */
|
||||
.divide-y.border a .flex-1 span {
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
}
|
||||
@@ -563,27 +492,23 @@ h2.text-xl {
|
||||
/* ============================================
|
||||
HOME PAGE - WORKSPACE FILE TREE
|
||||
============================================ */
|
||||
/* Tree row 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 {
|
||||
font-family: var(--marimo-monospace-font) !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-md {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Keep small UI elements slightly rounded */
|
||||
.rounded-sm,
|
||||
.rounded {
|
||||
border-radius: 2px !important;
|
||||
@@ -592,69 +517,34 @@ h2.text-xl {
|
||||
/* ============================================
|
||||
TOP BAR / ACTION BUTTONS
|
||||
============================================ */
|
||||
/* Settings and shutdown buttons in top right */
|
||||
.absolute.top-3.right-5 button {
|
||||
border: 2px solid var(--nes-gray) !important;
|
||||
border: 2px solid var(--tb-slate) !important;
|
||||
border-radius: 0 !important;
|
||||
background: var(--nes-dark-gray) !important;
|
||||
box-shadow: 2px 2px 0 var(--nes-black) !important;
|
||||
background: var(--tb-navy-light) !important;
|
||||
}
|
||||
|
||||
.absolute.top-3.right-5 button:hover {
|
||||
background: var(--nes-blue) !important;
|
||||
border-color: var(--nes-light-blue) !important;
|
||||
}
|
||||
|
||||
.absolute.top-3.right-5 button:active {
|
||||
box-shadow: none !important;
|
||||
transform: translate(2px, 2px);
|
||||
background: var(--tb-blue) !important;
|
||||
border-color: var(--tb-blue-light) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SEARCH INPUT - PIXEL STYLE
|
||||
SEARCH INPUT
|
||||
============================================ */
|
||||
input#search {
|
||||
border: 3px solid var(--nes-gray) !important;
|
||||
border: 3px solid var(--tb-slate) !important;
|
||||
border-radius: 0 !important;
|
||||
background: var(--nes-black) !important;
|
||||
box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.3) !important;
|
||||
background: var(--tb-navy) !important;
|
||||
font-family: var(--marimo-monospace-font) !important;
|
||||
}
|
||||
|
||||
input#search:focus {
|
||||
border-color: var(--nes-light-blue) !important;
|
||||
box-shadow:
|
||||
inset 2px 2px 0 rgba(0, 0, 0, 0.3),
|
||||
0 0 8px rgba(112, 160, 224, 0.3) !important;
|
||||
border-color: var(--tb-blue-light) !important;
|
||||
box-shadow: 0 0 8px rgba(85, 136, 221, 0.3) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
POWER-ON GLOW (subtle animation on page)
|
||||
============================================ */
|
||||
@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 PRESS EFFECT
|
||||
============================================ */
|
||||
button:active,
|
||||
[role="button"]:active {
|
||||
|
||||
Reference in New Issue
Block a user