/* Docker Control Panel — e-ink stylesheet. * * Design constraints for Kindle Scribe / Silk: * - Pure black/white (no grays that ghost). * - No animations, no transitions, no shadows, no gradients, no rounded * corners (each anti-aliased curve costs a redraw). * - Large tap/pen targets: 48px min height, scalable text size. * - No auto-refresh; user hits Refresh when they want a new frame. * - System fonts only — no web fonts. * * Theme + size are driven by CSS variables set from `data-theme` and * `data-size` attributes on . Both persist as cookies. */ :root { /* Light (default) */ --fg: #000; --bg: #fff; --edge: 2px; /* border thickness — bumps up for dark */ /* Size — bumped by data-size overrides below */ --base-font: 20px; --title-font: 24px; --btn-font: 20px; --btn-small-font: 17px; --btn-tap: 52px; --btn-small-tap: 44px; --status-font: 16px; } html[data-theme="dark"], body[data-theme="dark"] { --fg: #fff; --bg: #000; --edge: 3px; /* thicker borders on dark — helps e-ink contrast */ } html[data-size="large"], body[data-size="large"] { --base-font: 24px; --title-font: 30px; --btn-font: 24px; --btn-small-font: 20px; --btn-tap: 60px; --btn-small-tap: 52px; --status-font: 18px; } html[data-size="xl"], body[data-size="xl"] { --base-font: 30px; --title-font: 38px; --btn-font: 28px; --btn-small-font: 24px; --btn-tap: 72px; --btn-small-tap: 60px; --status-font: 22px; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: auto; background: var(--bg); color: var(--fg); } body { font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: var(--base-font); line-height: 1.35; padding-bottom: 24px; background: var(--bg); color: var(--fg); } /* Top bar */ .bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: var(--edge) solid var(--fg); background: var(--bg); color: var(--fg); gap: 12px; flex-wrap: wrap; } .bar strong { font-size: var(--title-font); margin-right: 8px; } .bar .tag { border: var(--edge) solid var(--fg); padding: 4px 10px; font-family: monospace; font-size: calc(var(--base-font) * 0.6); font-weight: 700; text-transform: uppercase; } .bar .right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .stamp { font: 14px/1 monospace; } /* Prefs row (sizes + theme + refresh) */ .prefs { gap: 10px; } .sizerow { display: inline-flex; gap: 0; } .sizerow .tinybtn { margin-left: -2px; /* borders overlap so they look grouped */ } .sizerow .tinybtn:first-child { margin-left: 0; } .tinybtn.active { background: var(--fg); color: var(--bg); } /* Buttons — no hover, no transitions */ .btn, .linkish { font-weight: 700; font-size: var(--btn-font); line-height: 1; padding: 14px 22px; border: var(--edge) solid var(--fg); background: var(--bg); color: var(--fg); cursor: pointer; min-height: var(--btn-tap); min-width: var(--btn-tap); text-align: center; text-decoration: none; display: inline-block; font-family: inherit; } .btn:active, .linkish:active { background: var(--fg); color: var(--bg); } .btn.small { padding: 10px 14px; min-height: var(--btn-small-tap); font-size: var(--btn-small-font); } .btn.danger { border-width: calc(var(--edge) + 1px); } .btn:disabled { opacity: .5; } /* Container list */ main { padding: 12px; max-width: 100vw; overflow-x: hidden; background: var(--bg); color: var(--fg); } .msg { font-size: var(--base-font); padding: 20px; text-align: center; } /* ─── Container cards ─────────────────────────────────────────── * Vertical stack, full-width. Every card fits the Kindle Scribe * viewport in either orientation without horizontal scroll. * Buttons wrap naturally within each card. */ .ct-list { display: flex; flex-direction: column; gap: 12px; } .ct-card { border: var(--edge) solid var(--fg); padding: 12px; width: 100%; box-sizing: border-box; background: var(--bg); color: var(--fg); } .ct-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--fg); padding-bottom: 8px; margin-bottom: 10px; flex-wrap: wrap; } .ct-status { font-family: monospace; font-size: var(--status-font); font-weight: 700; line-height: 1; padding: 6px 12px; border: var(--edge) solid var(--fg); white-space: nowrap; } .ct-name { margin: 0; font-size: var(--title-font); font-weight: 700; word-break: break-all; flex: 1 1 auto; } .ct-desc { font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: calc(var(--base-font) * 0.95); font-weight: 700; line-height: 1.3; margin-bottom: 10px; padding: 6px 10px; border-left: var(--edge) solid var(--fg); } .ct-image { font-family: monospace; font-size: calc(var(--base-font) * 0.75); line-height: 1.3; word-break: break-all; margin-bottom: 12px; color: var(--fg); } .ct-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; } .ct-actions .btn { /* Two per row on portrait Kindle (each ~44%). More per row on wider. */ flex: 1 1 44%; min-width: 0; text-align: center; } /* Port links — tap to open the container's web app in a new tab. * INVERTED from the theme so they visually pop. */ .ct-ports { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .ct-ports .port-link { display: inline-block; padding: 14px 18px; min-height: var(--btn-tap); background: var(--fg); color: var(--bg); border: var(--edge) solid var(--fg); text-decoration: none; font-family: monospace; font-weight: 700; font-size: var(--btn-font); line-height: 1.4; flex: 1 1 44%; text-align: center; box-sizing: border-box; } .ct-ports .port-link:active { background: var(--bg); color: var(--fg); } /* Exited containers get strikethrough treatment (still B&W) */ .ct-exited .ct-name, .ct-created .ct-name { text-decoration: line-through; } /* Errors */ .err { margin: 16px; padding: 12px 16px; border: 3px solid var(--fg); font-family: monospace; font-weight: 700; font-size: var(--status-font); line-height: 1.3; white-space: pre-wrap; color: var(--fg); background: var(--bg); } .err.hidden { display: none; } /* Footer */ .foot { padding: 16px; border-top: var(--edge) solid var(--fg); margin-top: 24px; background: var(--bg); color: var(--fg); } .foot .links { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: var(--status-font); } .foot .links a, .foot .links .linkish { color: var(--fg); text-decoration: underline; padding: 4px 8px; background: none; border: 0; font-weight: 400; min-height: 0; min-width: 0; } .foot .sep { color: var(--fg); } /* Server-rendered form buttons (per-container) — flex row, wraps */ .rowform { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; } /* Feedback message pill after an action */ .msg-pill { margin: 16px; padding: 14px 18px; border: 3px solid var(--fg); font-family: monospace; font-weight: 700; font-size: var(--base-font); line-height: 1.3; background: var(--bg); color: var(--fg); } .msg-pill.ok { /* same as base */ } .msg-pill.err { background: var(--fg); color: var(--bg); } /* Full-page confirmation view for destructive actions */ .confirm-page { margin: 40px 20px; padding: 24px; border: 4px solid var(--fg); text-align: center; background: var(--bg); color: var(--fg); } .confirm-page h2 { font-size: var(--title-font); margin-bottom: 12px; } .confirm-page code { font-family: monospace; font-weight: 700; font-size: var(--title-font); line-height: 1; padding: 4px 10px; border: 2px solid var(--fg); background: var(--bg); color: var(--fg); } .confirm-page .hint { font-size: var(--base-font); margin: 12px 0 24px; } .confirm-page .confirm-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .confirm-page form { display: inline; margin: 0; padding: 0; border: 0; } /* Force landscape-friendly layout on narrow Scribes in portrait */ @media (max-width: 700px) { .bar { flex-direction: column; align-items: flex-start; gap: 10px; } .bar .right { width: 100%; justify-content: flex-start; } }