playground+repl: bend+vault on one line, grid-only layout, hidden fix
- bend URL and vault password now share a single config-bar row, split
via a 2-column grid (1fr 1fr). Vault still hidden when free-form
isn't selected; just collapses its column.
- Every flexbox removed. Every multi-child container uses CSS grid:
.controls, .config-bar, .bend-bar, .vault-bar, .panes, .pane,
.brand, .tabbar, .tabs, .tab, .transcript, .entry, .tier-output,
.prompt-bar, .lock-screen, .lock-card, .lock-row.
- Added `[hidden] { display: none !important; }` so the ephemeral
button on the REPL lock screen actually hides the modal. Without
this, .lock-screen's `display: grid` overrode the hidden attribute's
UA-default display: none.
This commit is contained in:
parent
e24176a447
commit
656f206c40
9 changed files with 327 additions and 239 deletions
|
|
@ -59,22 +59,21 @@
|
|||
<span id="status" class="status"></span>
|
||||
</section>
|
||||
|
||||
<section class="bend-bar">
|
||||
<span class="bend-icon" title="gpu-worker bend URL">⚡</span>
|
||||
<label>bend URL
|
||||
<section class="config-bar">
|
||||
<div class="bend-bar">
|
||||
<span class="bend-icon" title="gpu-worker bend URL">⚡</span>
|
||||
<input id="bend-url" type="url" placeholder="https://your-gpu-worker.example/bend (sets (bend!-call ...) destination)">
|
||||
</label>
|
||||
<button id="bend-save" class="secondary">save</button>
|
||||
<span id="bend-state" class="bend-state"></span>
|
||||
</section>
|
||||
|
||||
<section class="vault-bar" id="vault-bar" hidden>
|
||||
<span class="vault-icon" title="local vault">🔒</span>
|
||||
<span id="vault-state" class="vault-state">locked</span>
|
||||
<input id="vault-pw" type="password" autocomplete="off" placeholder="password to unlock free-form vault">
|
||||
<button id="vault-unlock" class="secondary">unlock</button>
|
||||
<button id="vault-lock" class="secondary" hidden>lock</button>
|
||||
<span id="vault-note" class="vault-note"></span>
|
||||
<button id="bend-save" class="secondary">save</button>
|
||||
<span id="bend-state" class="bend-state"></span>
|
||||
</div>
|
||||
<div class="vault-bar" id="vault-bar" hidden>
|
||||
<span class="vault-icon" title="local vault">🔒</span>
|
||||
<span id="vault-state" class="vault-state">locked</span>
|
||||
<input id="vault-pw" type="password" autocomplete="off" placeholder="vault password">
|
||||
<button id="vault-unlock" class="secondary">unlock</button>
|
||||
<button id="vault-lock" class="secondary" hidden>lock</button>
|
||||
<span id="vault-note" class="vault-note"></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panes">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* lumbda playground — styled to match lumbda.com homepage.
|
||||
* palette + typography mirror www/style.css.
|
||||
*/
|
||||
/* lumbda playground — grid-only layout, matches lumbda.com homepage palette.
|
||||
* No flexbox. Every multi-child layout uses CSS Grid. */
|
||||
|
||||
@font-face {
|
||||
font-family: 'chunkfive';
|
||||
|
|
@ -15,7 +14,7 @@
|
|||
--fg: #1a1a1a;
|
||||
--bg: #fafaf7;
|
||||
--muted: #666;
|
||||
--accent: #227842; /* single brand green — matches homepage */
|
||||
--accent: #227842;
|
||||
--green: #227842;
|
||||
--rule: #d4d4d0;
|
||||
--code-bg: #f0ede4;
|
||||
|
|
@ -30,7 +29,7 @@
|
|||
--fg: #e8e6e0;
|
||||
--bg: #161613;
|
||||
--muted: #9a9892;
|
||||
--accent: #5ec07a; /* lightened for contrast on dark bg */
|
||||
--accent: #5ec07a;
|
||||
--green: #5ec07a;
|
||||
--rule: #3a3a36;
|
||||
--code-bg: #22221f;
|
||||
|
|
@ -42,9 +41,13 @@
|
|||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
/* The hidden attribute must beat author display rules.
|
||||
* Without !important, .lock-screen { display: grid } overrides
|
||||
* [hidden]'s UA default of display: none. */
|
||||
[hidden] { display: none !important; }
|
||||
|
||||
html {
|
||||
/* Default zoom so text is comfortably readable. Native CSS zoom
|
||||
* preserves layout proportions across the whole document. */
|
||||
/* Comfortable default zoom. */
|
||||
zoom: 1.33;
|
||||
}
|
||||
|
||||
|
|
@ -65,8 +68,9 @@ header {
|
|||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto auto;
|
||||
align-items: end;
|
||||
gap: 0.6rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
|
@ -124,10 +128,10 @@ header code {
|
|||
.controls {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto 1fr;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
|
|
@ -189,30 +193,33 @@ header code {
|
|||
.controls .status {
|
||||
color: var(--muted);
|
||||
font-size: 0.8em;
|
||||
margin-left: auto;
|
||||
justify-self: end;
|
||||
}
|
||||
.controls .status.busy { color: var(--busy); }
|
||||
.controls .status.warn { color: var(--busy); }
|
||||
.controls .status.err { color: var(--err); }
|
||||
.controls .status.ok { color: var(--green); }
|
||||
|
||||
.bend-bar {
|
||||
/* ─── Config bar: bend + vault side by side ────────────────────── */
|
||||
|
||||
.config-bar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.6rem;
|
||||
padding: 0.4rem 1.5rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex; align-items: center; gap: 0.6rem;
|
||||
background: var(--bg);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.bend-bar .bend-icon { font-size: 1em; }
|
||||
.bend-bar label {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.bend-bar {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
gap: 0.5rem;
|
||||
color: var(--muted);
|
||||
align-items: center;
|
||||
}
|
||||
.bend-bar .bend-icon { font-size: 1em; }
|
||||
.bend-bar input[type=url] {
|
||||
flex: 1;
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--rule);
|
||||
color: var(--fg);
|
||||
|
|
@ -220,6 +227,7 @@ header code {
|
|||
font-family: var(--mono);
|
||||
font-size: 0.9em;
|
||||
border-radius: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
.bend-bar input[type=url]:focus { outline: none; border-color: var(--green); }
|
||||
.bend-bar button {
|
||||
|
|
@ -237,11 +245,10 @@ header code {
|
|||
.bend-bar .bend-state { color: var(--green); font-size: 0.8em; min-width: 4em; }
|
||||
|
||||
.vault-bar {
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex; align-items: center; gap: 0.6rem;
|
||||
background: var(--bg);
|
||||
font-size: 0.85em;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto auto 1fr;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
.vault-bar .vault-icon { font-size: 1em; }
|
||||
.vault-bar .vault-state { color: var(--muted); }
|
||||
|
|
@ -254,7 +261,7 @@ header code {
|
|||
font-family: var(--mono);
|
||||
font-size: 0.9em;
|
||||
border-radius: 3px;
|
||||
width: 18rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.vault-bar input[type=password]:focus { outline: none; border-color: var(--green); }
|
||||
.vault-bar button {
|
||||
|
|
@ -284,11 +291,12 @@ header code {
|
|||
.pane {
|
||||
background: var(--pane-bg);
|
||||
padding: 0.5rem 0.75rem 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.pane h2 {
|
||||
margin: 0 0 0.4rem;
|
||||
margin: 0;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
|
|
@ -311,7 +319,6 @@ header code {
|
|||
font-size: 13px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
/* Append-only: results arrive in finish order — fastest tier shows up first. */
|
||||
#output .tier-block { margin-bottom: 1rem; }
|
||||
#output .tier-block:last-child { margin-bottom: 0; }
|
||||
#output .tier-block h3 {
|
||||
|
|
@ -334,9 +341,7 @@ header code {
|
|||
white-space: pre;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
#output .err {
|
||||
color: var(--err);
|
||||
}
|
||||
#output .err { color: var(--err); }
|
||||
|
||||
/* ─── Footer ────────────────────────────────────────────────────── */
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,17 @@
|
|||
/* lumbda repl specific styles — inherits style.css palette. */
|
||||
/* lumbda repl — grid-only layout. Inherits palette + base from style.css. */
|
||||
|
||||
body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
||||
body.repl {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr auto auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ─── Lock screen overlay ──────────────────────────────────────── */
|
||||
|
||||
.lock-screen {
|
||||
position: fixed; inset: 0; z-index: 1000;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(15, 17, 21, 0.85);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
|
@ -15,16 +22,18 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
padding: 1.5rem 2rem;
|
||||
max-width: 28rem;
|
||||
width: 90%;
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.lock-card h2 {
|
||||
margin: 0 0 0.5rem;
|
||||
margin: 0 0 0.1rem;
|
||||
font-family: 'chunkfive', Georgia, serif;
|
||||
font-size: 1.4rem;
|
||||
color: var(--green);
|
||||
font-weight: normal;
|
||||
}
|
||||
.lock-card p {
|
||||
margin: 0 0 0.8rem;
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
|
|
@ -32,7 +41,7 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
.lock-card input[type=password] {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.7rem;
|
||||
margin: 0.4rem 0;
|
||||
margin: 0.4rem 0 0;
|
||||
background: var(--code-bg);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--rule);
|
||||
|
|
@ -44,7 +53,13 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
outline: none;
|
||||
border-color: var(--green);
|
||||
}
|
||||
.lock-row { display: flex; gap: 0.6rem; margin-top: 0.5rem; }
|
||||
.lock-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 0.6rem;
|
||||
margin-top: 0.5rem;
|
||||
justify-content: start;
|
||||
}
|
||||
.lock-row button {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.85em; font-weight: 600;
|
||||
|
|
@ -58,14 +73,17 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
.lock-row .primary:hover { filter: brightness(1.1); }
|
||||
.lock-row .secondary:hover { background: var(--code-bg); }
|
||||
.lock-note {
|
||||
margin: 0.6rem 0 0;
|
||||
margin: 0.4rem 0 0;
|
||||
color: var(--err);
|
||||
font-size: 0.8rem;
|
||||
min-height: 1.2em;
|
||||
}
|
||||
|
||||
/* ─── Tab bar ──────────────────────────────────────────────────── */
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr auto auto auto auto;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
padding: 0.4rem 1rem;
|
||||
|
|
@ -73,10 +91,11 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
background: var(--bg);
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: max-content;
|
||||
gap: 0.3rem;
|
||||
overflow-x: auto;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
.tab {
|
||||
background: var(--pane-bg);
|
||||
|
|
@ -85,9 +104,10 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
border-radius: 3px 3px 0 0;
|
||||
font-size: 0.85em;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tab.active {
|
||||
|
|
@ -115,15 +135,17 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
border-color: var(--green); color: var(--green);
|
||||
}
|
||||
.tabbar .ghost:disabled { opacity: 0.4; cursor: default; }
|
||||
.tabbar .spacer { flex: 1; }
|
||||
|
||||
/* ─── Transcript ───────────────────────────────────────────────── */
|
||||
|
||||
.transcript-wrap {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
background: var(--code-bg);
|
||||
}
|
||||
.transcript {
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5;
|
||||
|
|
@ -131,17 +153,18 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
margin: 0 auto;
|
||||
}
|
||||
.transcript .entry {
|
||||
margin-bottom: 0.8rem;
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-left: 2px solid var(--rule);
|
||||
}
|
||||
.transcript .entry .prompt-line {
|
||||
color: var(--green);
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.transcript .entry .tier-output {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 7rem 1fr;
|
||||
gap: 0.6rem;
|
||||
padding: 0.25rem 0;
|
||||
border-top: 1px dashed var(--rule);
|
||||
|
|
@ -152,13 +175,10 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
font-size: 0.7em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
min-width: 7rem;
|
||||
flex-shrink: 0;
|
||||
padding-top: 0.15rem;
|
||||
}
|
||||
.transcript .entry .tier-result {
|
||||
white-space: pre-wrap;
|
||||
flex: 1;
|
||||
}
|
||||
.transcript .entry .tier-time {
|
||||
color: var(--muted);
|
||||
|
|
@ -167,10 +187,13 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
}
|
||||
.transcript .entry.error .tier-result { color: var(--err); }
|
||||
|
||||
/* ─── Prompt bar ───────────────────────────────────────────────── */
|
||||
|
||||
.prompt-bar {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
gap: 0.5rem;
|
||||
align-items: end;
|
||||
padding: 0.5rem 1rem 0.8rem;
|
||||
border-top: 1px solid var(--rule);
|
||||
background: var(--bg);
|
||||
|
|
@ -181,7 +204,6 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
padding: 0.4rem 0 0;
|
||||
}
|
||||
.prompt-bar textarea {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--rule);
|
||||
|
|
@ -192,6 +214,7 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
border-radius: 3px;
|
||||
min-height: 1.6em;
|
||||
max-height: 30vh;
|
||||
min-width: 0;
|
||||
}
|
||||
.prompt-bar textarea:focus { outline: none; border-color: var(--green); }
|
||||
.prompt-bar select {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* lumbda playground — styled to match lumbda.com homepage.
|
||||
* palette + typography mirror www/style.css.
|
||||
*/
|
||||
/* lumbda playground — grid-only layout, matches lumbda.com homepage palette.
|
||||
* No flexbox. Every multi-child layout uses CSS Grid. */
|
||||
|
||||
@font-face {
|
||||
font-family: 'chunkfive';
|
||||
|
|
@ -15,7 +14,7 @@
|
|||
--fg: #1a1a1a;
|
||||
--bg: #fafaf7;
|
||||
--muted: #666;
|
||||
--accent: #227842; /* single brand green — matches homepage */
|
||||
--accent: #227842;
|
||||
--green: #227842;
|
||||
--rule: #d4d4d0;
|
||||
--code-bg: #f0ede4;
|
||||
|
|
@ -30,7 +29,7 @@
|
|||
--fg: #e8e6e0;
|
||||
--bg: #161613;
|
||||
--muted: #9a9892;
|
||||
--accent: #5ec07a; /* lightened for contrast on dark bg */
|
||||
--accent: #5ec07a;
|
||||
--green: #5ec07a;
|
||||
--rule: #3a3a36;
|
||||
--code-bg: #22221f;
|
||||
|
|
@ -42,9 +41,13 @@
|
|||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
/* The hidden attribute must beat author display rules.
|
||||
* Without !important, .lock-screen { display: grid } overrides
|
||||
* [hidden]'s UA default of display: none. */
|
||||
[hidden] { display: none !important; }
|
||||
|
||||
html {
|
||||
/* Default zoom so text is comfortably readable. Native CSS zoom
|
||||
* preserves layout proportions across the whole document. */
|
||||
/* Comfortable default zoom. */
|
||||
zoom: 1.33;
|
||||
}
|
||||
|
||||
|
|
@ -65,8 +68,9 @@ header {
|
|||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto auto;
|
||||
align-items: end;
|
||||
gap: 0.6rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
|
@ -124,10 +128,10 @@ header code {
|
|||
.controls {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto 1fr;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
|
|
@ -146,7 +150,8 @@ header code {
|
|||
letter-spacing: 0.08em;
|
||||
}
|
||||
.controls label {
|
||||
margin-right: 0.7em;
|
||||
display: block;
|
||||
margin: 0.1em 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 0.85em;
|
||||
|
|
@ -188,30 +193,33 @@ header code {
|
|||
.controls .status {
|
||||
color: var(--muted);
|
||||
font-size: 0.8em;
|
||||
margin-left: auto;
|
||||
justify-self: end;
|
||||
}
|
||||
.controls .status.busy { color: var(--busy); }
|
||||
.controls .status.warn { color: var(--busy); }
|
||||
.controls .status.err { color: var(--err); }
|
||||
.controls .status.ok { color: var(--green); }
|
||||
|
||||
.bend-bar {
|
||||
/* ─── Config bar: bend + vault side by side ────────────────────── */
|
||||
|
||||
.config-bar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.6rem;
|
||||
padding: 0.4rem 1.5rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex; align-items: center; gap: 0.6rem;
|
||||
background: var(--bg);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.bend-bar .bend-icon { font-size: 1em; }
|
||||
.bend-bar label {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.bend-bar {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
gap: 0.5rem;
|
||||
color: var(--muted);
|
||||
align-items: center;
|
||||
}
|
||||
.bend-bar .bend-icon { font-size: 1em; }
|
||||
.bend-bar input[type=url] {
|
||||
flex: 1;
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--rule);
|
||||
color: var(--fg);
|
||||
|
|
@ -219,6 +227,7 @@ header code {
|
|||
font-family: var(--mono);
|
||||
font-size: 0.9em;
|
||||
border-radius: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
.bend-bar input[type=url]:focus { outline: none; border-color: var(--green); }
|
||||
.bend-bar button {
|
||||
|
|
@ -236,11 +245,10 @@ header code {
|
|||
.bend-bar .bend-state { color: var(--green); font-size: 0.8em; min-width: 4em; }
|
||||
|
||||
.vault-bar {
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex; align-items: center; gap: 0.6rem;
|
||||
background: var(--bg);
|
||||
font-size: 0.85em;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto auto 1fr;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
.vault-bar .vault-icon { font-size: 1em; }
|
||||
.vault-bar .vault-state { color: var(--muted); }
|
||||
|
|
@ -253,7 +261,7 @@ header code {
|
|||
font-family: var(--mono);
|
||||
font-size: 0.9em;
|
||||
border-radius: 3px;
|
||||
width: 18rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.vault-bar input[type=password]:focus { outline: none; border-color: var(--green); }
|
||||
.vault-bar button {
|
||||
|
|
@ -283,11 +291,12 @@ header code {
|
|||
.pane {
|
||||
background: var(--pane-bg);
|
||||
padding: 0.5rem 0.75rem 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.pane h2 {
|
||||
margin: 0 0 0.4rem;
|
||||
margin: 0;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
|
|
@ -310,7 +319,6 @@ header code {
|
|||
font-size: 13px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
/* Append-only: results arrive in finish order — fastest tier shows up first. */
|
||||
#output .tier-block { margin-bottom: 1rem; }
|
||||
#output .tier-block:last-child { margin-bottom: 0; }
|
||||
#output .tier-block h3 {
|
||||
|
|
@ -333,9 +341,7 @@ header code {
|
|||
white-space: pre;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
#output .err {
|
||||
color: var(--err);
|
||||
}
|
||||
#output .err { color: var(--err); }
|
||||
|
||||
/* ─── Footer ────────────────────────────────────────────────────── */
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,17 @@
|
|||
/* lumbda repl specific styles — inherits style.css palette. */
|
||||
/* lumbda repl — grid-only layout. Inherits palette + base from style.css. */
|
||||
|
||||
body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
||||
body.repl {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr auto auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ─── Lock screen overlay ──────────────────────────────────────── */
|
||||
|
||||
.lock-screen {
|
||||
position: fixed; inset: 0; z-index: 1000;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(15, 17, 21, 0.85);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
|
@ -15,16 +22,18 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
padding: 1.5rem 2rem;
|
||||
max-width: 28rem;
|
||||
width: 90%;
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.lock-card h2 {
|
||||
margin: 0 0 0.5rem;
|
||||
margin: 0 0 0.1rem;
|
||||
font-family: 'chunkfive', Georgia, serif;
|
||||
font-size: 1.4rem;
|
||||
color: var(--green);
|
||||
font-weight: normal;
|
||||
}
|
||||
.lock-card p {
|
||||
margin: 0 0 0.8rem;
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
|
|
@ -32,7 +41,7 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
.lock-card input[type=password] {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.7rem;
|
||||
margin: 0.4rem 0;
|
||||
margin: 0.4rem 0 0;
|
||||
background: var(--code-bg);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--rule);
|
||||
|
|
@ -44,7 +53,13 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
outline: none;
|
||||
border-color: var(--green);
|
||||
}
|
||||
.lock-row { display: flex; gap: 0.6rem; margin-top: 0.5rem; }
|
||||
.lock-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 0.6rem;
|
||||
margin-top: 0.5rem;
|
||||
justify-content: start;
|
||||
}
|
||||
.lock-row button {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.85em; font-weight: 600;
|
||||
|
|
@ -58,14 +73,17 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
.lock-row .primary:hover { filter: brightness(1.1); }
|
||||
.lock-row .secondary:hover { background: var(--code-bg); }
|
||||
.lock-note {
|
||||
margin: 0.6rem 0 0;
|
||||
margin: 0.4rem 0 0;
|
||||
color: var(--err);
|
||||
font-size: 0.8rem;
|
||||
min-height: 1.2em;
|
||||
}
|
||||
|
||||
/* ─── Tab bar ──────────────────────────────────────────────────── */
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr auto auto auto auto;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
padding: 0.4rem 1rem;
|
||||
|
|
@ -73,10 +91,11 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
background: var(--bg);
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: max-content;
|
||||
gap: 0.3rem;
|
||||
overflow-x: auto;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
.tab {
|
||||
background: var(--pane-bg);
|
||||
|
|
@ -85,9 +104,10 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
border-radius: 3px 3px 0 0;
|
||||
font-size: 0.85em;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tab.active {
|
||||
|
|
@ -115,15 +135,17 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
border-color: var(--green); color: var(--green);
|
||||
}
|
||||
.tabbar .ghost:disabled { opacity: 0.4; cursor: default; }
|
||||
.tabbar .spacer { flex: 1; }
|
||||
|
||||
/* ─── Transcript ───────────────────────────────────────────────── */
|
||||
|
||||
.transcript-wrap {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
background: var(--code-bg);
|
||||
}
|
||||
.transcript {
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5;
|
||||
|
|
@ -131,17 +153,18 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
margin: 0 auto;
|
||||
}
|
||||
.transcript .entry {
|
||||
margin-bottom: 0.8rem;
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-left: 2px solid var(--rule);
|
||||
}
|
||||
.transcript .entry .prompt-line {
|
||||
color: var(--green);
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.transcript .entry .tier-output {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 7rem 1fr;
|
||||
gap: 0.6rem;
|
||||
padding: 0.25rem 0;
|
||||
border-top: 1px dashed var(--rule);
|
||||
|
|
@ -152,13 +175,10 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
font-size: 0.7em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
min-width: 7rem;
|
||||
flex-shrink: 0;
|
||||
padding-top: 0.15rem;
|
||||
}
|
||||
.transcript .entry .tier-result {
|
||||
white-space: pre-wrap;
|
||||
flex: 1;
|
||||
}
|
||||
.transcript .entry .tier-time {
|
||||
color: var(--muted);
|
||||
|
|
@ -167,10 +187,13 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
}
|
||||
.transcript .entry.error .tier-result { color: var(--err); }
|
||||
|
||||
/* ─── Prompt bar ───────────────────────────────────────────────── */
|
||||
|
||||
.prompt-bar {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
gap: 0.5rem;
|
||||
align-items: end;
|
||||
padding: 0.5rem 1rem 0.8rem;
|
||||
border-top: 1px solid var(--rule);
|
||||
background: var(--bg);
|
||||
|
|
@ -181,7 +204,6 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
padding: 0.4rem 0 0;
|
||||
}
|
||||
.prompt-bar textarea {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--rule);
|
||||
|
|
@ -192,6 +214,7 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
border-radius: 3px;
|
||||
min-height: 1.6em;
|
||||
max-height: 30vh;
|
||||
min-width: 0;
|
||||
}
|
||||
.prompt-bar textarea:focus { outline: none; border-color: var(--green); }
|
||||
.prompt-bar select {
|
||||
|
|
|
|||
|
|
@ -59,22 +59,21 @@
|
|||
<span id="status" class="status"></span>
|
||||
</section>
|
||||
|
||||
<section class="bend-bar">
|
||||
<span class="bend-icon" title="gpu-worker bend URL">⚡</span>
|
||||
<label>bend URL
|
||||
<section class="config-bar">
|
||||
<div class="bend-bar">
|
||||
<span class="bend-icon" title="gpu-worker bend URL">⚡</span>
|
||||
<input id="bend-url" type="url" placeholder="https://your-gpu-worker.example/bend (sets (bend!-call ...) destination)">
|
||||
</label>
|
||||
<button id="bend-save" class="secondary">save</button>
|
||||
<span id="bend-state" class="bend-state"></span>
|
||||
</section>
|
||||
|
||||
<section class="vault-bar" id="vault-bar" hidden>
|
||||
<span class="vault-icon" title="local vault">🔒</span>
|
||||
<span id="vault-state" class="vault-state">locked</span>
|
||||
<input id="vault-pw" type="password" autocomplete="off" placeholder="password to unlock free-form vault">
|
||||
<button id="vault-unlock" class="secondary">unlock</button>
|
||||
<button id="vault-lock" class="secondary" hidden>lock</button>
|
||||
<span id="vault-note" class="vault-note"></span>
|
||||
<button id="bend-save" class="secondary">save</button>
|
||||
<span id="bend-state" class="bend-state"></span>
|
||||
</div>
|
||||
<div class="vault-bar" id="vault-bar" hidden>
|
||||
<span class="vault-icon" title="local vault">🔒</span>
|
||||
<span id="vault-state" class="vault-state">locked</span>
|
||||
<input id="vault-pw" type="password" autocomplete="off" placeholder="vault password">
|
||||
<button id="vault-unlock" class="secondary">unlock</button>
|
||||
<button id="vault-lock" class="secondary" hidden>lock</button>
|
||||
<span id="vault-note" class="vault-note"></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panes">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* lumbda playground — styled to match lumbda.com homepage.
|
||||
* palette + typography mirror www/style.css.
|
||||
*/
|
||||
/* lumbda playground — grid-only layout, matches lumbda.com homepage palette.
|
||||
* No flexbox. Every multi-child layout uses CSS Grid. */
|
||||
|
||||
@font-face {
|
||||
font-family: 'chunkfive';
|
||||
|
|
@ -15,7 +14,7 @@
|
|||
--fg: #1a1a1a;
|
||||
--bg: #fafaf7;
|
||||
--muted: #666;
|
||||
--accent: #227842; /* single brand green — matches homepage */
|
||||
--accent: #227842;
|
||||
--green: #227842;
|
||||
--rule: #d4d4d0;
|
||||
--code-bg: #f0ede4;
|
||||
|
|
@ -30,7 +29,7 @@
|
|||
--fg: #e8e6e0;
|
||||
--bg: #161613;
|
||||
--muted: #9a9892;
|
||||
--accent: #5ec07a; /* lightened for contrast on dark bg */
|
||||
--accent: #5ec07a;
|
||||
--green: #5ec07a;
|
||||
--rule: #3a3a36;
|
||||
--code-bg: #22221f;
|
||||
|
|
@ -42,9 +41,13 @@
|
|||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
/* The hidden attribute must beat author display rules.
|
||||
* Without !important, .lock-screen { display: grid } overrides
|
||||
* [hidden]'s UA default of display: none. */
|
||||
[hidden] { display: none !important; }
|
||||
|
||||
html {
|
||||
/* Default zoom so text is comfortably readable. Native CSS zoom
|
||||
* preserves layout proportions across the whole document. */
|
||||
/* Comfortable default zoom. */
|
||||
zoom: 1.33;
|
||||
}
|
||||
|
||||
|
|
@ -65,8 +68,9 @@ header {
|
|||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto auto;
|
||||
align-items: end;
|
||||
gap: 0.6rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
|
@ -124,10 +128,10 @@ header code {
|
|||
.controls {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto 1fr;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
|
|
@ -189,30 +193,33 @@ header code {
|
|||
.controls .status {
|
||||
color: var(--muted);
|
||||
font-size: 0.8em;
|
||||
margin-left: auto;
|
||||
justify-self: end;
|
||||
}
|
||||
.controls .status.busy { color: var(--busy); }
|
||||
.controls .status.warn { color: var(--busy); }
|
||||
.controls .status.err { color: var(--err); }
|
||||
.controls .status.ok { color: var(--green); }
|
||||
|
||||
.bend-bar {
|
||||
/* ─── Config bar: bend + vault side by side ────────────────────── */
|
||||
|
||||
.config-bar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.6rem;
|
||||
padding: 0.4rem 1.5rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex; align-items: center; gap: 0.6rem;
|
||||
background: var(--bg);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.bend-bar .bend-icon { font-size: 1em; }
|
||||
.bend-bar label {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.bend-bar {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
gap: 0.5rem;
|
||||
color: var(--muted);
|
||||
align-items: center;
|
||||
}
|
||||
.bend-bar .bend-icon { font-size: 1em; }
|
||||
.bend-bar input[type=url] {
|
||||
flex: 1;
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--rule);
|
||||
color: var(--fg);
|
||||
|
|
@ -220,6 +227,7 @@ header code {
|
|||
font-family: var(--mono);
|
||||
font-size: 0.9em;
|
||||
border-radius: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
.bend-bar input[type=url]:focus { outline: none; border-color: var(--green); }
|
||||
.bend-bar button {
|
||||
|
|
@ -237,11 +245,10 @@ header code {
|
|||
.bend-bar .bend-state { color: var(--green); font-size: 0.8em; min-width: 4em; }
|
||||
|
||||
.vault-bar {
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex; align-items: center; gap: 0.6rem;
|
||||
background: var(--bg);
|
||||
font-size: 0.85em;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto auto 1fr;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
.vault-bar .vault-icon { font-size: 1em; }
|
||||
.vault-bar .vault-state { color: var(--muted); }
|
||||
|
|
@ -254,7 +261,7 @@ header code {
|
|||
font-family: var(--mono);
|
||||
font-size: 0.9em;
|
||||
border-radius: 3px;
|
||||
width: 18rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.vault-bar input[type=password]:focus { outline: none; border-color: var(--green); }
|
||||
.vault-bar button {
|
||||
|
|
@ -284,11 +291,12 @@ header code {
|
|||
.pane {
|
||||
background: var(--pane-bg);
|
||||
padding: 0.5rem 0.75rem 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.pane h2 {
|
||||
margin: 0 0 0.4rem;
|
||||
margin: 0;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
|
|
@ -311,7 +319,6 @@ header code {
|
|||
font-size: 13px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
/* Append-only: results arrive in finish order — fastest tier shows up first. */
|
||||
#output .tier-block { margin-bottom: 1rem; }
|
||||
#output .tier-block:last-child { margin-bottom: 0; }
|
||||
#output .tier-block h3 {
|
||||
|
|
@ -334,9 +341,7 @@ header code {
|
|||
white-space: pre;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
#output .err {
|
||||
color: var(--err);
|
||||
}
|
||||
#output .err { color: var(--err); }
|
||||
|
||||
/* ─── Footer ────────────────────────────────────────────────────── */
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,17 @@
|
|||
/* lumbda repl specific styles — inherits style.css palette. */
|
||||
/* lumbda repl — grid-only layout. Inherits palette + base from style.css. */
|
||||
|
||||
body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
||||
body.repl {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr auto auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ─── Lock screen overlay ──────────────────────────────────────── */
|
||||
|
||||
.lock-screen {
|
||||
position: fixed; inset: 0; z-index: 1000;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(15, 17, 21, 0.85);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
|
@ -15,16 +22,18 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
padding: 1.5rem 2rem;
|
||||
max-width: 28rem;
|
||||
width: 90%;
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.lock-card h2 {
|
||||
margin: 0 0 0.5rem;
|
||||
margin: 0 0 0.1rem;
|
||||
font-family: 'chunkfive', Georgia, serif;
|
||||
font-size: 1.4rem;
|
||||
color: var(--green);
|
||||
font-weight: normal;
|
||||
}
|
||||
.lock-card p {
|
||||
margin: 0 0 0.8rem;
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
|
|
@ -32,7 +41,7 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
.lock-card input[type=password] {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.7rem;
|
||||
margin: 0.4rem 0;
|
||||
margin: 0.4rem 0 0;
|
||||
background: var(--code-bg);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--rule);
|
||||
|
|
@ -44,7 +53,13 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
outline: none;
|
||||
border-color: var(--green);
|
||||
}
|
||||
.lock-row { display: flex; gap: 0.6rem; margin-top: 0.5rem; }
|
||||
.lock-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 0.6rem;
|
||||
margin-top: 0.5rem;
|
||||
justify-content: start;
|
||||
}
|
||||
.lock-row button {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.85em; font-weight: 600;
|
||||
|
|
@ -58,14 +73,17 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
.lock-row .primary:hover { filter: brightness(1.1); }
|
||||
.lock-row .secondary:hover { background: var(--code-bg); }
|
||||
.lock-note {
|
||||
margin: 0.6rem 0 0;
|
||||
margin: 0.4rem 0 0;
|
||||
color: var(--err);
|
||||
font-size: 0.8rem;
|
||||
min-height: 1.2em;
|
||||
}
|
||||
|
||||
/* ─── Tab bar ──────────────────────────────────────────────────── */
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr auto auto auto auto;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
padding: 0.4rem 1rem;
|
||||
|
|
@ -73,10 +91,11 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
background: var(--bg);
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: max-content;
|
||||
gap: 0.3rem;
|
||||
overflow-x: auto;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
.tab {
|
||||
background: var(--pane-bg);
|
||||
|
|
@ -85,9 +104,10 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
border-radius: 3px 3px 0 0;
|
||||
font-size: 0.85em;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tab.active {
|
||||
|
|
@ -115,15 +135,17 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
border-color: var(--green); color: var(--green);
|
||||
}
|
||||
.tabbar .ghost:disabled { opacity: 0.4; cursor: default; }
|
||||
.tabbar .spacer { flex: 1; }
|
||||
|
||||
/* ─── Transcript ───────────────────────────────────────────────── */
|
||||
|
||||
.transcript-wrap {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
background: var(--code-bg);
|
||||
}
|
||||
.transcript {
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5;
|
||||
|
|
@ -131,17 +153,18 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
margin: 0 auto;
|
||||
}
|
||||
.transcript .entry {
|
||||
margin-bottom: 0.8rem;
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-left: 2px solid var(--rule);
|
||||
}
|
||||
.transcript .entry .prompt-line {
|
||||
color: var(--green);
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.transcript .entry .tier-output {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 7rem 1fr;
|
||||
gap: 0.6rem;
|
||||
padding: 0.25rem 0;
|
||||
border-top: 1px dashed var(--rule);
|
||||
|
|
@ -152,13 +175,10 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
font-size: 0.7em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
min-width: 7rem;
|
||||
flex-shrink: 0;
|
||||
padding-top: 0.15rem;
|
||||
}
|
||||
.transcript .entry .tier-result {
|
||||
white-space: pre-wrap;
|
||||
flex: 1;
|
||||
}
|
||||
.transcript .entry .tier-time {
|
||||
color: var(--muted);
|
||||
|
|
@ -167,10 +187,13 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
}
|
||||
.transcript .entry.error .tier-result { color: var(--err); }
|
||||
|
||||
/* ─── Prompt bar ───────────────────────────────────────────────── */
|
||||
|
||||
.prompt-bar {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
gap: 0.5rem;
|
||||
align-items: end;
|
||||
padding: 0.5rem 1rem 0.8rem;
|
||||
border-top: 1px solid var(--rule);
|
||||
background: var(--bg);
|
||||
|
|
@ -181,7 +204,6 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
padding: 0.4rem 0 0;
|
||||
}
|
||||
.prompt-bar textarea {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--rule);
|
||||
|
|
@ -192,6 +214,7 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
|
|||
border-radius: 3px;
|
||||
min-height: 1.6em;
|
||||
max-height: 30vh;
|
||||
min-width: 0;
|
||||
}
|
||||
.prompt-bar textarea:focus { outline: none; border-color: var(--green); }
|
||||
.prompt-bar select {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* lumbda playground — styled to match lumbda.com homepage.
|
||||
* palette + typography mirror www/style.css.
|
||||
*/
|
||||
/* lumbda playground — grid-only layout, matches lumbda.com homepage palette.
|
||||
* No flexbox. Every multi-child layout uses CSS Grid. */
|
||||
|
||||
@font-face {
|
||||
font-family: 'chunkfive';
|
||||
|
|
@ -15,7 +14,7 @@
|
|||
--fg: #1a1a1a;
|
||||
--bg: #fafaf7;
|
||||
--muted: #666;
|
||||
--accent: #227842; /* single brand green — matches homepage */
|
||||
--accent: #227842;
|
||||
--green: #227842;
|
||||
--rule: #d4d4d0;
|
||||
--code-bg: #f0ede4;
|
||||
|
|
@ -30,7 +29,7 @@
|
|||
--fg: #e8e6e0;
|
||||
--bg: #161613;
|
||||
--muted: #9a9892;
|
||||
--accent: #5ec07a; /* lightened for contrast on dark bg */
|
||||
--accent: #5ec07a;
|
||||
--green: #5ec07a;
|
||||
--rule: #3a3a36;
|
||||
--code-bg: #22221f;
|
||||
|
|
@ -42,9 +41,13 @@
|
|||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
/* The hidden attribute must beat author display rules.
|
||||
* Without !important, .lock-screen { display: grid } overrides
|
||||
* [hidden]'s UA default of display: none. */
|
||||
[hidden] { display: none !important; }
|
||||
|
||||
html {
|
||||
/* Default zoom so text is comfortably readable. Native CSS zoom
|
||||
* preserves layout proportions across the whole document. */
|
||||
/* Comfortable default zoom. */
|
||||
zoom: 1.33;
|
||||
}
|
||||
|
||||
|
|
@ -65,8 +68,9 @@ header {
|
|||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto auto;
|
||||
align-items: end;
|
||||
gap: 0.6rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
|
@ -124,10 +128,10 @@ header code {
|
|||
.controls {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto 1fr;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
|
|
@ -189,30 +193,33 @@ header code {
|
|||
.controls .status {
|
||||
color: var(--muted);
|
||||
font-size: 0.8em;
|
||||
margin-left: auto;
|
||||
justify-self: end;
|
||||
}
|
||||
.controls .status.busy { color: var(--busy); }
|
||||
.controls .status.warn { color: var(--busy); }
|
||||
.controls .status.err { color: var(--err); }
|
||||
.controls .status.ok { color: var(--green); }
|
||||
|
||||
.bend-bar {
|
||||
/* ─── Config bar: bend + vault side by side ────────────────────── */
|
||||
|
||||
.config-bar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.6rem;
|
||||
padding: 0.4rem 1.5rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex; align-items: center; gap: 0.6rem;
|
||||
background: var(--bg);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.bend-bar .bend-icon { font-size: 1em; }
|
||||
.bend-bar label {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.bend-bar {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
gap: 0.5rem;
|
||||
color: var(--muted);
|
||||
align-items: center;
|
||||
}
|
||||
.bend-bar .bend-icon { font-size: 1em; }
|
||||
.bend-bar input[type=url] {
|
||||
flex: 1;
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--rule);
|
||||
color: var(--fg);
|
||||
|
|
@ -220,6 +227,7 @@ header code {
|
|||
font-family: var(--mono);
|
||||
font-size: 0.9em;
|
||||
border-radius: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
.bend-bar input[type=url]:focus { outline: none; border-color: var(--green); }
|
||||
.bend-bar button {
|
||||
|
|
@ -237,11 +245,10 @@ header code {
|
|||
.bend-bar .bend-state { color: var(--green); font-size: 0.8em; min-width: 4em; }
|
||||
|
||||
.vault-bar {
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex; align-items: center; gap: 0.6rem;
|
||||
background: var(--bg);
|
||||
font-size: 0.85em;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto auto 1fr;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
.vault-bar .vault-icon { font-size: 1em; }
|
||||
.vault-bar .vault-state { color: var(--muted); }
|
||||
|
|
@ -254,7 +261,7 @@ header code {
|
|||
font-family: var(--mono);
|
||||
font-size: 0.9em;
|
||||
border-radius: 3px;
|
||||
width: 18rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.vault-bar input[type=password]:focus { outline: none; border-color: var(--green); }
|
||||
.vault-bar button {
|
||||
|
|
@ -284,11 +291,12 @@ header code {
|
|||
.pane {
|
||||
background: var(--pane-bg);
|
||||
padding: 0.5rem 0.75rem 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.pane h2 {
|
||||
margin: 0 0 0.4rem;
|
||||
margin: 0;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
|
|
@ -311,7 +319,6 @@ header code {
|
|||
font-size: 13px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
/* Append-only: results arrive in finish order — fastest tier shows up first. */
|
||||
#output .tier-block { margin-bottom: 1rem; }
|
||||
#output .tier-block:last-child { margin-bottom: 0; }
|
||||
#output .tier-block h3 {
|
||||
|
|
@ -334,9 +341,7 @@ header code {
|
|||
white-space: pre;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
#output .err {
|
||||
color: var(--err);
|
||||
}
|
||||
#output .err { color: var(--err); }
|
||||
|
||||
/* ─── Footer ────────────────────────────────────────────────────── */
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue