From e00a056209d79dcaf2e9e44e937957920e2d5899 Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 29 Jun 2026 20:23:34 -0400 Subject: [PATCH] feat: HyperCard theme + dark mode - Retheme the whole app 1-bit HyperCard: white cards, hard 1px black borders, Chicago/Geneva/Monaco fonts (with web fallbacks; real fonts go in /fonts, see fonts/README.md), inverted-on-press buttons, a 50% desktop dither, black Mac title bar. Palette runs on CSS variables. - Dark mode toggle (toolbar + home header): flips the palette vars via a class on , persisted in localStorage and applied before first paint. - Per-annotation fat colored left stripe in the annotation pane; annotation name bumped above the md h1; full-color (no longer veiled/desaturated) thumbnails. - Jump popover now labels each part with the clip name + crop-adjusted mark-time frame (e.g. "CU Tashi (1) 45f"), matching the annotation editor. Co-Authored-By: Claude Opus 4.8 --- tl/resources/public/css/app.css | 410 +++++++++++++++------------- tl/resources/public/fonts/README.md | 18 ++ tl/resources/public/index.html | 4 +- tl/src/tl/views.cljs | 47 +++- 4 files changed, 279 insertions(+), 200 deletions(-) create mode 100644 tl/resources/public/fonts/README.md diff --git a/tl/resources/public/css/app.css b/tl/resources/public/css/app.css index a07c301..56e6657 100644 --- a/tl/resources/public/css/app.css +++ b/tl/resources/public/css/app.css @@ -1,8 +1,40 @@ -/* tl — app styles. Dynamic geometry (positions/sizes derived from zoom/frames - or the resizable panes) stays inline in the views; everything static is here. */ +/* tl — HyperCard theme. 1-bit black-on-white: white "cards", hard 1px black + borders, Chicago for chrome / Geneva for body, inverted (black) selection, a + 50% dither for the desktop. Dynamic geometry stays inline in the views; only + cosmetics live here. Drop the real fonts in /fonts (see fonts/README.md). */ + +@font-face { font-family: "Chicago"; font-display: swap; + src: local("Chicago"), local("ChicagoFLF"), url("/fonts/ChicagoFLF.ttf"); } +@font-face { font-family: "Geneva"; font-display: swap; + src: local("Geneva"), url("/fonts/Geneva.ttf"); } +@font-face { font-family: "Monaco"; font-display: swap; + src: local("Monaco"), url("/fonts/Monaco.ttf"); } + +:root { + --paper:#fff; --ink:#000; --gray:#808080; --mute:#555; + --shade:#eee; --hover:#ddd; /* subtle fills (code/err bg, button hover) */ + --chicago:"Chicago","ChicagoFLF","Charcoal","Geneva",system-ui,sans-serif; + --geneva:"Geneva","Verdana","Tahoma","Segoe UI",sans-serif; + --mono:"Monaco","Courier New",monospace; + /* 50% checkerboard — the classic Mac desktop dither */ + --desktop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='%23ffffff'/%3E%3Crect width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23000000'/%3E%3C/svg%3E"); +} + +/* dark mode: flip paper/ink (the 50% desktop dither reads the same either way). + Toggled by adding class "dark" to . */ +html.dark { + --paper:#000; --ink:#fff; --mute:#aaa; --shade:#222; --hover:#333; +} html, body, #app { height: 100%; margin: 0; } -body { overflow: hidden; } +body { overflow: hidden; background: var(--desktop); background-size: 2px 2px; + font-family: var(--geneva); color: var(--ink); -webkit-font-smoothing: none; } + +/* classic Mac scrollbars: white track, dithered thumb, hard black edges */ +::-webkit-scrollbar { width: 15px; height: 15px; } +::-webkit-scrollbar-track { background: var(--paper); border: 1px solid var(--ink); } +::-webkit-scrollbar-thumb { background: var(--desktop); background-size: 2px 2px; + border: 1px solid var(--ink); } .app { height: 100vh; @@ -10,170 +42,159 @@ body { overflow: hidden; } display: flex; flex-direction: column; overflow: hidden; - font-family: sans-serif; - background: #0c0c0c; - color: #ddd; - /* viewport-fit=cover lets content slide under the notch / rounded corners / - home indicator; inset it back so the video isn't covered. box-sizing keeps - total height at 100dvh (timeline-pane is flex:1 and absorbs the padding). */ + font-family: var(--geneva); + background: var(--paper); + color: var(--ink); box-sizing: border-box; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } +/* shared button look: white round-rect, hard black border, Chicago, invert on + press. The default action (.save) gets the heavy Mac "default button" ring. */ +.jump-btn, .add-btn, .edit-btn, .del-btn, .expand-btn, .back-btn, .crumb, +.play-btn, .step-btn, .row-x, .add-mark, .save, .cancel, .hl-ok, .hl-cancel, +.pane-tabs button { + font-family: var(--chicago); background: var(--paper); color: var(--ink); + border: 1px solid var(--ink); border-radius: 8px; cursor: pointer; line-height: 1.3; +} +.jump-btn:hover, .add-btn:hover, .edit-btn:hover, .del-btn:hover, .expand-btn:hover, +.back-btn:hover, .crumb:hover, .play-btn:hover, .step-btn:hover, .row-x:hover, +.add-mark:hover, .save:hover, .cancel:hover, .hl-ok:hover, .hl-cancel:hover, +.pane-tabs button:hover { + background: var(--hover); +} +.jump-btn:active, .add-btn:active, .edit-btn:active, .del-btn:active, .expand-btn:active, +.back-btn:active, .crumb:active, .play-btn:active, .step-btn:active, .row-x:active, +.add-mark:active, .save:active, .cancel:active, .hl-ok:active, .hl-cancel:active, +.pane-tabs button:active { + background: var(--ink); color: var(--paper); +} + /* --- top region: video | annotation ------------------------------------ */ -/* sizes are relative (vh / %), set via CSS vars from the app; px mins below */ .top { display: flex; min-height: 140px; height: var(--top-h, 46vh); } .video-pane { position: relative; flex-shrink: 0; width: var(--video-w, 50%); min-width: 200px; display: flex; align-items: center; justify-content: center; - background: #000; overflow: hidden; + background: #000; overflow: hidden; border-right: 1px solid var(--ink); } .video-pane video { max-width: 100%; max-height: 100%; display: block; background: #000; } .frame-readout { position: absolute; bottom: 6px; right: 8px; z-index: 4; display: flex; gap: 8px; align-items: center; - font-family: monospace; font-size: 11px; color: #cfe3f5; - background: rgba(0,0,0,0.6); padding: 2px 7px; border-radius: 4px; + font-family: var(--mono); font-size: 11px; color: var(--ink); + background: var(--paper); padding: 2px 7px; border: 1px solid var(--ink); pointer-events: none; /* don't block video controls… */ } .frame-readout .fr-clip { pointer-events: auto; } /* …except the clip chip */ -.fr-clip.clickable { cursor: copy; color: #9ed7b0; } -.fr-clip.clickable:hover { color: #c7efd4; } +.fr-clip.clickable { cursor: copy; text-decoration: underline; } +.fr-clip.clickable:hover { background: var(--ink); color: var(--paper); } .annot-pane { flex: 1; min-width: 200px; display: flex; } /* --- draggable dividers ------------------------------------------------- */ -/* touch-action:none so a drag doesn't scroll the page on touch devices */ -.divider-v { flex-shrink: 0; width: 7px; cursor: col-resize; background: #222; touch-action: none; } -.divider-h { flex-shrink: 0; height: 7px; cursor: row-resize; background: #222; touch-action: none; } -.divider-v:hover, .divider-h:hover, .divider-v:active, .divider-h:active { background: #3a6ea5; } +.divider-v { flex-shrink: 0; width: 6px; cursor: col-resize; background: var(--ink); touch-action: none; } +.divider-h { flex-shrink: 0; height: 6px; cursor: row-resize; background: var(--ink); touch-action: none; } +.divider-v:hover, .divider-h:hover, .divider-v:active, .divider-h:active { + background: var(--desktop); background-size: 2px 2px; +} /* --- commentary --------------------------------------------------------- */ .commentary { position: relative; flex: 1; overflow-y: auto; - background: #111; padding: 8px 12px; box-sizing: border-box; + background: var(--paper); padding: 8px 12px; box-sizing: border-box; } .ann { position: relative; - padding: 8px 10px; margin-bottom: 8px; border-radius: 4px; - border: 1px solid transparent; background: #161616; + padding: 8px 10px; margin-bottom: 8px; border-radius: 0; + border: 1px solid var(--ink); background: var(--paper); } -.ann.active { border-color: #3a6ea5; background: #152333; } +.ann.active { box-shadow: 2px 2px 0 var(--ink); } .ann-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } -.ann-title { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; - color: #7aa6d6; } -.ann-empty { color: #666; font-size: 12px; } +.ann-title { font-family: var(--chicago); font-size: 18px; line-height: 1.15; + color: var(--ink); } +.ann-empty { color: var(--mute); font-size: 12px; } -.jump-btn { - flex-shrink: 0; background: #1c2a38; color: #cfe3f5; - border: 1px solid #3a6ea5; border-radius: 4px; - padding: 1px 7px; cursor: pointer; font-size: 10px; white-space: nowrap; -} +.jump-btn { flex-shrink: 0; padding: 1px 7px; font-size: 10px; white-space: nowrap; } /* popover of jump targets for an annotation with discontinuous marks */ .jump-pop { position: absolute; right: 0; top: 100%; z-index: 20; margin-top: 2px; min-width: 150px; max-height: 180px; overflow-y: auto; - background: #1b1b1b; border: 1px solid #3a6ea5; border-radius: 4px; - box-shadow: 0 4px 14px rgba(0,0,0,0.5); padding: 4px; + background: var(--paper); border: 1px solid var(--ink); + box-shadow: 2px 2px 0 var(--ink); padding: 4px; } .jump-pop button { - display: block; width: 100%; text-align: left; background: none; - color: #cde; border: none; border-radius: 3px; padding: 4px 6px; + display: block; width: 100%; text-align: left; background: var(--paper); + color: var(--ink); border: none; padding: 4px 6px; font-family: var(--chicago); cursor: pointer; font-size: 11px; white-space: nowrap; } -.jump-pop button:hover { background: #2a4a6a; } +.jump-pop button:hover { background: var(--ink); color: var(--paper); } /* --- commentary head + actions ----------------------------------------- */ /* the current context's own description, atop the commentary */ .ctx-content { display: flex; align-items: flex-start; gap: 8px; - padding: 8px 10px; margin-bottom: 8px; border-bottom: 1px solid #222; } + padding: 8px 10px; margin-bottom: 8px; border-bottom: 2px solid var(--ink); } .ctx-content .md, .ctx-content .muted { flex: 1; min-width: 0; } .ctx-content .muted { font-style: italic; } .ctx-content .edit-btn { flex-shrink: 0; } .commentary-head { margin-bottom: 8px; } -.add-btn { - width: 100%; background: #1c2a38; color: #cfe3f5; - border: 1px solid #3a6ea5; border-radius: 4px; - padding: 6px 8px; cursor: pointer; font-size: 12px; -} -.add-btn:hover { background: #24384e; } +.add-btn { width: 100%; padding: 6px 8px; font-size: 12px; box-shadow: 1px 1px 0 var(--ink); } .ann-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } -.edit-btn { - background: none; color: #7aa6d6; border: 1px solid transparent; - border-radius: 4px; padding: 1px 6px; cursor: pointer; font-size: 11px; -} -.edit-btn:hover { color: #cfe3f5; border-color: #3a6ea5; } -.del-btn { - background: none; color: #a66; border: 1px solid transparent; - border-radius: 4px; padding: 1px 6px; cursor: pointer; font-size: 11px; -} -.del-btn:hover { color: #e66; border-color: #a44; } - -.clip.clickable { cursor: copy; outline: 1px solid #5ab07a; } - -.expand-btn { - background: none; color: #7aa6d6; border: 1px solid transparent; - border-radius: 4px; padding: 1px 6px; cursor: pointer; font-size: 11px; -} -.expand-btn:hover { color: #cfe3f5; border-color: #3a6ea5; } -.expand-btn.has-children { color: #cfe3f5; border-color: #3a6ea5; background: #16263a; } +.edit-btn, .expand-btn, .del-btn { padding: 1px 6px; font-size: 11px; } +.expand-btn.has-children { background: var(--ink); color: var(--paper); } .nest-badge { margin-left: 3px; font-size: 9px; line-height: 1; vertical-align: top; - background: #3a6ea5; color: #fff; border-radius: 8px; padding: 1px 4px; + background: var(--ink); color: var(--paper); border-radius: 8px; padding: 1px 4px; } +.clip.clickable { cursor: copy; outline: 1px solid var(--ink); } + /* --- authoring form (fills the annotation pane) ------------------------- */ .form { flex: 1; min-width: 0; overflow-y: auto; - background: #111; border: 1px solid #333; box-sizing: border-box; + background: var(--paper); border: 1px solid var(--ink); box-sizing: border-box; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; } -.form-head { font-size: 13px; font-weight: 600; color: #cfe3f5; } +.form-head { font-family: var(--chicago); font-size: 14px; color: var(--ink); } .form-row { display: flex; gap: 8px; align-items: center; } .form-name { flex: 1; } .form input[type=text], .form-name, .form-content { - background: #0e0e0e; color: #ddd; border: 1px solid #333; - border-radius: 4px; padding: 6px 8px; font-size: 13px; + background: var(--paper); color: var(--ink); border: 1px solid var(--ink); + border-radius: 0; padding: 6px 8px; font-size: 13px; font-family: var(--geneva); } -.form-color { width: 40px; height: 32px; padding: 0; border: 1px solid #333; - border-radius: 4px; background: #0e0e0e; cursor: pointer; } +.form-color { width: 40px; height: 32px; padding: 0; border: 1px solid var(--ink); + border-radius: 0; background: var(--paper); cursor: pointer; } .form-content { width: 100%; min-height: 70px; resize: vertical; box-sizing: border-box; font-family: inherit; } -.form-marks-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; - color: #7aa6d6; margin-top: 4px; } +.form-marks-label { font-family: var(--chicago); font-size: 11px; letter-spacing: .5px; + color: var(--ink); margin-top: 4px; } /* contenteditable content surface + inline link chips */ -/* flex-shrink:0 so the surface grows with its content (and the .form scrolls) - instead of the flex column squashing it down to min-height. */ .content-editor { white-space: pre-wrap; word-break: break-word; outline: none; cursor: text; flex-shrink: 0; height: auto; } -.content-editor:empty:before { content: attr(data-placeholder); color: #666; } +.content-editor:empty:before { content: attr(data-placeholder); color: var(--mute); } .link-chip { display: inline-flex; align-items: center; gap: 3px; vertical-align: baseline; - background: #173049; color: #9fd0ff; border: 1px solid #2f5d86; border-radius: 4px; - padding: 0 5px; margin: 0 1px; font-size: 12px; cursor: pointer; user-select: none; } -.link-chip:hover { background: #1d3e60; } -.link-chip.broken { background: #3a1d1d; color: #e69; border-color: #a44; } -.link-chip .link-f { color: #6f9; opacity: .7; font-size: 11px; } -.md .link-chip .link-f { color: #6f9; } + background: var(--paper); color: var(--ink); border: 1px solid var(--ink); + border-radius: 8px; padding: 0 6px; margin: 0 1px; font-size: 12px; + font-family: var(--chicago); cursor: pointer; user-select: none; } +.link-chip:hover { background: var(--ink); color: var(--paper); } +.link-chip.broken { border-style: dashed; text-decoration: line-through; } +.link-chip .link-f { font-size: 11px; opacity: .7; } +.link-chip:hover .link-f { opacity: 1; } .mark-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; } -.mark-arrow { color: #666; } -.row-x, .add-mark { - background: #1c1c1c; color: #aaa; border: 1px solid #333; border-radius: 4px; - padding: 3px 8px; cursor: pointer; font-size: 12px; -} -.row-x:hover { color: #e66; border-color: #a44; } -.add-mark { align-self: flex-start; color: #cfe3f5; border-color: #3a6ea5; } +.mark-arrow { color: var(--ink); } +.row-x, .add-mark { padding: 3px 8px; font-size: 12px; } +.add-mark { align-self: flex-start; } /* the point a clip-click will fill — make it obvious where focus is */ .pt-input.active .pt-text, .pt-chip.active { - outline: 2px solid #5ab07a; outline-offset: 0; + outline: 2px solid var(--ink); outline-offset: 0; } /* point editor + autocomplete */ @@ -181,202 +202,215 @@ body { overflow: hidden; } .mark-row .pt-input { flex: 0 1 160px; max-width: 180px; } .pt-text { flex: 1; min-width: 0; box-sizing: border-box; - background: #0e0e0e; color: #ddd; border: 1px solid #333; - border-radius: 4px; padding: 6px 8px; font-size: 13px; + background: var(--paper); color: var(--ink); border: 1px solid var(--ink); + border-radius: 0; padding: 6px 8px; font-size: 13px; font-family: var(--geneva); } .pt-frame-row { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; } .pt-dropdown { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin: 2px 0 0; padding: 4px; list-style: none; max-height: 124px; overflow-y: auto; - background: #1b1b1b; border: 1px solid #3a6ea5; border-radius: 4px; - box-shadow: 0 6px 18px rgba(0,0,0,0.5); + background: var(--paper); border: 1px solid var(--ink); + box-shadow: 2px 2px 0 var(--ink); } -.pt-dropdown li { padding: 4px 6px; border-radius: 3px; font-size: 12px; - color: #cde; cursor: pointer; white-space: nowrap; +.pt-dropdown li { padding: 4px 6px; font-size: 12px; + color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.pt-dropdown li.hi { background: #2a4a6a; } -.pt-dropdown .cand-group { color: #789; font-size: 11px; } -.pt-dropdown .cand-kind { color: #7aa6d6; } -.pt-dropdown .link-f { color: #6f9; opacity: .7; } +.pt-dropdown li.hi { background: var(--ink); color: var(--paper); } +.pt-dropdown li.hi .cand-group, .pt-dropdown li.hi .cand-kind, +.pt-dropdown li.hi .link-f { color: var(--paper); } +.pt-dropdown .cand-group { color: var(--mute); font-size: 11px; } +.pt-dropdown .cand-kind { color: var(--ink); } +.pt-dropdown .link-f { color: var(--mute); } .link-insert { display: flex; align-items: flex-start; gap: 6px; align-self: stretch; } .link-insert .pt-input { flex: 1 1 auto; max-width: none; } +.hl-ok, .hl-cancel { padding: 2px 9px; font-size: 12px; } .pt-chip { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 4px; - background: #233; border: 1px solid #3a6ea5; border-radius: 4px; + background: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 2px 4px; } -.pt-chip-name { font-size: 12px; color: #cfe3f5; white-space: nowrap; +.pt-chip-name { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } -.pt-frame { width: 56px; background: #0e0e0e; color: #ddd; border: 1px solid #333; - border-radius: 3px; padding: 2px 4px; font-size: 12px; } -.pt-dur { color: #889; font-size: 11px; white-space: nowrap; } -.pt-x { background: none; border: none; color: #a99; cursor: pointer; font-size: 14px; } -.pt-x:hover { color: #e66; } +.pt-frame { width: 56px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); + border-radius: 0; padding: 2px 4px; font-size: 12px; font-family: var(--mono); } +.pt-dur { color: var(--mute); font-size: 11px; white-space: nowrap; } +.pt-x { background: none; border: none; color: var(--ink); cursor: pointer; font-size: 14px; } +.pt-x:hover { text-decoration: underline; } -.form-hint { font-size: 11px; color: #777; } +.form-hint { font-size: 11px; color: var(--mute); } .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } -.save, .cancel { border-radius: 4px; padding: 6px 14px; cursor: pointer; font-size: 13px; } -.save { background: #2a4a6a; color: #fff; border: 1px solid #3a6ea5; } -.cancel { background: #1c1c1c; color: #aaa; border: 1px solid #333; } +.save, .cancel { padding: 6px 14px; font-size: 13px; } +/* default button: the heavy double Mac ring */ +.save { box-shadow: 0 0 0 1px var(--paper), 0 0 0 3px var(--ink); margin: 2px; font-weight: bold; } +.save:active { box-shadow: 0 0 0 1px var(--paper), 0 0 0 3px var(--ink); } /* --- markdown (tl.md output is wrapped in .md) -------------------------- */ +.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { font-family: var(--chicago); } .md h1 { font-size: 16px; margin: 0 0 6px; line-height: 1.25; } .md h2 { font-size: 14px; margin: 0 0 6px; line-height: 1.25; } .md h3 { font-size: 13px; margin: 0 0 6px; line-height: 1.25; } .md h4, .md h5, .md h6 { font-size: 12px; margin: 0 0 6px; } .md p { margin: 0 0 8px; } .md ul { margin: 0 0 8px 18px; padding: 0; } -.md code { background: #222; padding: 0 3px; border-radius: 3px; font-size: 12px; } +.md code { font-family: var(--mono); background: var(--shade); padding: 0 3px; + border: 1px solid var(--ink); font-size: 12px; } /* --- timeline region ---------------------------------------------------- */ -.timeline-pane { flex: 1; display: flex; flex-direction: column; min-height: 150px; } +.timeline-pane { flex: 1; display: flex; flex-direction: column; min-height: 150px; + border-top: 1px solid var(--ink); } -/* --- breadcrumb bar (only present when expanded into a nested timeline) -- */ +/* --- breadcrumb bar ----------------------------------------------------- */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; - padding: 5px 8px; background: #0c0c0c; border-bottom: 1px solid #222; + padding: 5px 8px; background: var(--paper); border-bottom: 1px solid var(--ink); flex-shrink: 0; font-size: 12px; } -.back-btn { background: #1c2a38; color: #cfe3f5; border: 1px solid #3a6ea5; - border-radius: 4px; padding: 2px 10px; cursor: pointer; font-size: 12px; - margin-right: 4px; } -.back-btn:hover { background: #24384e; } +.back-btn { padding: 2px 10px; font-size: 12px; margin-right: 4px; } .crumb-item { display: inline-flex; align-items: center; gap: 6px; } -.crumb-sep { color: #555; } -.crumb { background: none; border: none; color: #7aa6d6; cursor: pointer; - font-size: 12px; padding: 2px 2px; } -.crumb:hover { color: #cfe3f5; text-decoration: underline; } -.crumb.current { color: #cfe3f5; cursor: default; text-decoration: none; } +.crumb-sep { color: var(--ink); } +.crumb { padding: 2px 8px; font-size: 12px; } +.crumb.current { background: var(--ink); color: var(--paper); cursor: default; } .toolbar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; - padding: 6px 8px; background: #0c0c0c; border-bottom: 1px solid #222; + padding: 6px 8px; background: var(--paper); border-bottom: 1px solid var(--ink); flex-shrink: 0; } -.slider { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #9ab; } -.slider input { width: 150px; touch-action: none; } +.slider { display: flex; align-items: center; gap: 6px; font-family: var(--chicago); + font-size: 11px; color: var(--ink); } +.slider input { width: 150px; touch-action: none; accent-color: var(--ink); } .transport { display: flex; align-items: center; gap: 4px; } -.play-btn, .step-btn { - background: #1c2a38; color: #cfe3f5; border: 1px solid #3a6ea5; - border-radius: 4px; cursor: pointer; line-height: 1.4; -} .play-btn { padding: 2px 12px; font-size: 14px; } .step-btn { padding: 2px 7px; font-size: 11px; letter-spacing: -1px; } -.play-btn:hover, .step-btn:hover { background: #24384e; } .timeline-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; } -.timeline { display: flex; align-items: flex-start; background: #111; } +.timeline { display: flex; align-items: flex-start; background: var(--paper); } .gutter { flex-shrink: 0; width: 150px; user-select: none; } .gutter-label { box-sizing: border-box; - border-bottom: 1px solid #2a2a2a; border-right: 1px solid #2a2a2a; - padding: 0 6px; font-size: 10px; color: #9ab; background: #141414; + border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); + padding: 0 6px; font-family: var(--chicago); font-size: 10px; color: var(--ink); + background: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hscroll { overflow-x: auto; flex: 1; } -/* overflow:hidden crops clips that fall outside the (possibly windowed) view */ .content { position: relative; cursor: ew-resize; overflow: hidden; } -/* height transitions so cropped-out tracks animate away and the survivors - slide up to fill the gap ("tracks leave / get rearranged") */ -.track-row { position: relative; background: #1c1c1c; border-bottom: 1px solid #2a2a2a; +.track-row { position: relative; background: var(--paper); border-bottom: 1px solid var(--ink); overflow: hidden; transition: height .3s ease, opacity .3s ease; } .track-row.collapsed { opacity: 0; border-bottom: none; } .gutter-label { transition: height .3s ease, opacity .3s ease; } .gutter-label.collapsed { opacity: 0; border-bottom: none; padding: 0; } .clip { position: absolute; top: 1px; box-sizing: border-box; overflow: hidden; - background: #244966; border: 1px solid #16324f; border-radius: 2px; - font-size: 10px; color: #cfe3f5; white-space: nowrap; + background: var(--paper); border: 1px solid var(--ink); border-radius: 0; + font-size: 10px; color: var(--ink); + font-family: var(--chicago); white-space: nowrap; } .clip-thumb { position: absolute; top: 0; bottom: 0; background-size: cover; background-position: center; - opacity: .82; + opacity: 1; } .clip-name { position: relative; z-index: 1; height: 100%; box-sizing: border-box; - padding: 0 4px; overflow: hidden; text-overflow: ellipsis; - text-shadow: 0 1px 2px #000, 0 0 4px #000; - background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.12)); + padding: 0 4px; overflow: hidden; text-overflow: ellipsis; line-height: 1.8; + color: var(--ink); /* white halo keeps black text + legible without veiling the + full-color thumbnail */ + text-shadow: 0 0 2px var(--paper), 0 0 2px var(--paper), + 1px 1px 0 var(--paper), -1px -1px 0 var(--paper); } -.playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #e33; +.playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); z-index: 10; pointer-events: none; } .playhead-handle { position: absolute; top: 0; left: -5px; width: 12px; height: 10px; - background: #e33; border-radius: 2px; } + background: var(--ink); border-radius: 0; } /* --- annotation lane ---------------------------------------------------- */ .ann-lane-row { position: relative; height: 18px; } -.ann-bar { position: absolute; top: 2px; height: 14px; border-radius: 2px; } -.ann-bar-label { position: absolute; top: 1px; font-size: 9px; line-height: 16px; - color: #eee; white-space: nowrap; pointer-events: none; - text-shadow: 0 1px 2px #000; } +.ann-bar { position: absolute; top: 2px; height: 14px; border-radius: 0; } +.ann-bar-label { position: absolute; top: 1px; font-family: var(--chicago); font-size: 9px; + line-height: 16px; color: var(--ink); white-space: nowrap; + pointer-events: none; } /* --- mobile: stack the top region vertically (video over annotation) ---- */ @media (max-width: 720px) { .top { flex-direction: column; } - .divider-v { display: none; } /* width-split is meaningless when stacked */ - .video-pane { width: 100%; min-width: 0; flex: 1 1 0; min-height: 110px; } + .divider-v { display: none; } + .video-pane { width: 100%; min-width: 0; flex: 1 1 0; min-height: 110px; border-right: none; } .annot-pane { width: 100%; min-width: 0; flex: 1 1 0; min-height: 110px; } - .divider-h { height: 14px; } /* bigger touch target (top vs timeline) */ + .divider-h { height: 14px; } .slider input { width: 120px; } } /* --- landing pages (project list / create) ----------------------------- */ .home { min-height: 100vh; box-sizing: border-box; max-width: 680px; margin: 0 auto; - padding: 32px 20px; color: #ddd; font-family: sans-serif; background: #0c0c0c; - /* keep clear of the notch / rounded corners / home indicator */ + padding: 32px 20px; color: var(--ink); font-family: var(--geneva); + background: var(--paper); border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); padding-top: calc(32px + env(safe-area-inset-top)); padding-right: calc(20px + env(safe-area-inset-right)); padding-bottom: calc(32px + env(safe-area-inset-bottom)); padding-left: calc(20px + env(safe-area-inset-left)); } -.home-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; } -.home-head h1 { font-size: 22px; margin: 0; color: #cfe3f5; letter-spacing: 1px; } -.home a { color: #7aa6d6; text-decoration: none; } -.home a:hover { text-decoration: underline; } -.muted { color: #888; font-size: 12px; } +.home-head { display: flex; align-items: baseline; justify-content: space-between; + margin-bottom: 20px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; } +.home-head h1 { font-family: var(--chicago); font-size: 26px; margin: 0; color: var(--ink); + letter-spacing: 0; } +.home a { color: var(--ink); text-decoration: underline; } +.home a:hover { background: var(--ink); color: var(--paper); text-decoration: none; } +.muted { color: var(--mute); font-size: 12px; } .home .add-btn { display: inline-block; width: auto; margin-bottom: 12px; } .project-list { list-style: none; padding: 0; margin: 12px 0; } -.project-list li { padding: 10px 12px; border: 1px solid #2a2a2a; border-radius: 6px; - margin-bottom: 8px; background: #161616; } -.project-list li a { font-size: 15px; color: #cfe3f5; } -.home .form { background: transparent; border: none; padding: 0; } -.file-row { display: block; margin: 12px 0; color: #cfe3f5; font-size: 13px; } -.err { color: #e66; font-size: 12px; margin: 8px 0; } +.project-list li { padding: 10px 12px; border: 1px solid var(--ink); border-radius: 0; + margin-bottom: 8px; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); } +.project-list li a { font-family: var(--chicago); font-size: 15px; color: var(--ink); } +.home .form { background: transparent; border: none; padding: 0; box-shadow: none; } +.file-row { display: block; margin: 12px 0; color: var(--ink); font-size: 13px; } +.err { color: var(--ink); font-weight: bold; font-size: 12px; margin: 8px 0; + border: 1px solid var(--ink); padding: 4px 8px; background: var(--shade); } -/* editor: project bar above the timeline */ +/* editor: project bar above the timeline — a Mac window title bar (selected) */ .project-bar { display: flex; gap: 10px; align-items: center; padding: 4px 8px; - background: #111; border-bottom: 1px solid #222; font-size: 12px; } -.project-bar .project-name { color: #cfe3f5; font-weight: 600; } -.project-bar .logout-link { margin-left: auto; color: #8aa; text-decoration: none; } -.project-bar .logout-link:hover { color: #cfe3f5; text-decoration: underline; } + background: var(--ink); color: var(--paper); font-family: var(--chicago); + font-size: 12px; } +.project-bar a { color: var(--paper); text-decoration: underline; } +.project-bar .project-name { color: var(--paper); } +.project-bar .logout-link { margin-left: auto; color: var(--paper); text-decoration: underline; } /* --- annotation / script pane tabs ------------------------------------- */ .pane-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; } -.pane-tabs { display: flex; gap: 2px; background: #111; border-bottom: 1px solid #222; } -.pane-tabs button { flex: 1; background: none; color: #889; border: none; padding: 7px 10px; - cursor: pointer; font-size: 12px; border-bottom: 2px solid transparent; } -.pane-tabs button:hover { color: #cfe3f5; } -.pane-tabs button.active { color: #cfe3f5; border-bottom-color: #3a6ea5; background: #152333; } +.pane-tabs { display: flex; gap: 0; background: var(--paper); border-bottom: 1px solid var(--ink); } +.pane-tabs button { flex: 1; padding: 7px 10px; font-size: 12px; border-radius: 0; + border: none; border-right: 1px solid var(--ink); } +.pane-tabs button:last-child { border-right: none; } +.pane-tabs button.active { background: var(--ink); color: var(--paper); } .pane-body { flex: 1; min-height: 0; display: flex; } /* --- script pane (pdf) ------------------------------------------------- */ -.script-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #111; } -.script-hint { padding: 6px 10px; font-size: 11px; color: #8aa; border-bottom: 1px solid #222; } -.script-pages { flex: 1; overflow: auto; padding: 12px; background: #1a1a1a; +.script-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--paper); } +.script-hint { padding: 6px 10px; font-size: 11px; color: var(--ink); border-bottom: 1px solid var(--ink); } +.script-pages { flex: 1; overflow: auto; padding: 12px; + background: var(--desktop); background-size: 2px 2px; display: flex; flex-direction: column; align-items: center; gap: 12px; } -.pdf-page { position: relative; box-shadow: 0 2px 10px rgba(0,0,0,.5); background: #fff; } +.pdf-page { position: relative; box-shadow: 2px 2px 0 var(--ink); background: #fff; + border: 1px solid var(--ink); } .pdf-page.armed { cursor: crosshair; } .pdf-page canvas { display: block; } -.script-hl { position: absolute; border-radius: 2px; cursor: pointer; } -.script-hl.drafting { background: rgba(90,176,122,.25); border: 1.5px dashed #5ab07a; pointer-events: none; } -.script-empty { color: #888; font-size: 12px; padding: 20px; } -.script-badge { margin-left: 6px; color: #7aa6d6; font-size: 11px; } -.ann.selected { box-shadow: inset 3px 0 0 #5ab07a; } +.script-hl { position: absolute; border-radius: 0; cursor: pointer; } +.script-hl.drafting { background: rgba(0,0,0,.12); border: 1.5px dashed var(--ink); pointer-events: none; } +.script-empty { color: var(--mute); font-size: 12px; padding: 20px; } +.script-badge { margin-left: 6px; color: var(--ink); font-size: 11px; } +.ann.selected { box-shadow: inset 3px 0 0 var(--ink); } -/* iOS Safari zooms the whole page when you focus a control whose font-size is - < 16px. On touch devices bump every form control to 16px so tapping an input - never zooms; desktop keeps its denser sizing. !important to beat the various - per-control font-size rules above without re-listing each selector. */ +/* dark-mode toggle button */ +.dark-toggle { font-family: var(--chicago); background: var(--paper); color: var(--ink); + border: 1px solid var(--ink); border-radius: 8px; padding: 2px 8px; + font-size: 11px; cursor: pointer; white-space: nowrap; } +.dark-toggle:hover { background: var(--hover); } +.dark-toggle:active { background: var(--ink); color: var(--paper); } +.toolbar .dark-toggle { margin-left: auto; } +.home-head-right { display: flex; align-items: center; gap: 8px; } + +/* iOS Safari zooms the page when focusing a control with font-size < 16px. + On touch devices bump every form control to 16px so tapping never zooms. */ @media (pointer: coarse) { input, textarea, select, .content-editor { font-size: 16px !important; } } diff --git a/tl/resources/public/fonts/README.md b/tl/resources/public/fonts/README.md new file mode 100644 index 0000000..925d4a9 --- /dev/null +++ b/tl/resources/public/fonts/README.md @@ -0,0 +1,18 @@ +# Fonts — classic Macintosh / HyperCard + +Drop the font files here (filenames matter — `app.css` `@font-face` rules point at +these exact names). Everything has a CSS fallback, so the app still works without +them; you just won't get the pixel-perfect Chicago look until `Chicago` is present. + +| family in CSS | file to put here | what it is | where to get it | +|---|---|---|---| +| `Chicago` | `ChicagoFLF.ttf` | the iconic Mac system/menu/button font (vector recreation) | search "ChicagoFLF" — free TrueType recreation, widely mirrored (e.g. fontsgeek / dafont-style archives) | +| `Geneva` | `Geneva.ttf` | the Mac body sans (optional) | a real Mac (`/System/Library/Fonts/…`) or a free clone; otherwise falls back to Verdana/Tahoma which share its metrics | +| `Monaco` | `Monaco.ttf` | the Mac monospace (optional, used for the frame readout) | a real Mac, or falls back to Courier New / monospace | + +Pixel-perfect alternative to ChicagoFLF: **ChiKareGo2.ttf** (a bitmap-accurate +Chicago). If you use it instead, either rename it to `ChicagoFLF.ttf` or change the +`src:` in `app.css`. Pixel fonts look best at multiples of their native size (16px). + +Apple's original Chicago/Geneva/Monaco are proprietary and can't be redistributed +here, which is why these aren't checked in — grab them yourself and drop them in. diff --git a/tl/resources/public/index.html b/tl/resources/public/index.html index f13a2b5..2636e78 100644 --- a/tl/resources/public/index.html +++ b/tl/resources/public/index.html @@ -8,10 +8,10 @@ - + - + diff --git a/tl/src/tl/views.cljs b/tl/src/tl/views.cljs index 3d63ee6..b1a1fb3 100644 --- a/tl/src/tl/views.cljs +++ b/tl/src/tl/views.cljs @@ -16,6 +16,18 @@ (defonce active-insert! (atom nil)) ; the live content-editor's (insert! link) fn (declare commit-link!) +;; --- dark mode: purely presentational — toggles a class on that flips +;; the CSS palette vars; the choice persists in localStorage. +(defonce dark? (r/atom (= "1" (.getItem js/localStorage "dark")))) +(defn- apply-dark! [on] + (.toggle (.. js/document -documentElement -classList) "dark" (boolean on)) + (.setItem js/localStorage "dark" (if on "1" "0"))) +(defonce ^:private _dark-init (apply-dark! @dark?)) +(defn- dark-toggle [] + [:button.dark-toggle {:title "Toggle dark mode" + :on-click #(apply-dark! (swap! dark? not))} + (if @dark? "☀ Light" "☾ Dark")]) + (def ^:private seek-guard-frames 0.75) (def ^:private seek-settle-frames 2) @@ -177,6 +189,15 @@ (group-by :track segs)) "clip")) +(defn- clip-at + "Describe local frame `lf` the way the annotation editor does: the underlying + clip name plus its crop-adjusted mark-time frame, e.g. \"CU Tashi (1) 45f\"." + [scene segs lf] + (if-let [seg (some (fn [{[c d] :local :as s}] (when (and (<= c lf) (< lf d)) s)) segs)] + (str (clip-label scene segs (:mark seg)) + " " (:at (scene/seg-point scene seg (js/Math.round (- lf (first (:local seg)))))) "f") + (str (js/Math.round lf) "f"))) + (defn frame-readout "Bottom-right of the video: the timeline (context-absolute) frame, and the track + clip + mark-time frame under the playhead. While authoring, the clip @@ -551,8 +572,9 @@ (defn- jump-control "One jump button, or — when the annotation's marks have discontinuities (more - than one bar) — a button that opens a popover of one target per piece." - [open a] + than one bar) — a button that opens a popover of one target per piece, each + labelled with the clip + frame it lands on (as the annotation editor shows it)." + [open a scene segs] (let [bars (:bars a)] (if (< (count bars) 2) [:button.jump-btn {:on-click #(goto! (:start a))} "↪ jump"] @@ -564,7 +586,7 @@ (for [[i [lo _]] (map-indexed vector bars)] ^{:key i} [:button {:on-click #(do (goto! lo) (reset! open nil))} - (str "▸ part " (inc i) " · " (js/Math.round lo) "f")])])]))) + (str "▸ " (clip-at scene segs lo))])])]))) (defn commentary [] (let [el (atom nil) open (r/atom nil)] @@ -573,7 +595,8 @@ active @(rf/subscribe [::subs/active-annotation]) authed? @(rf/subscribe [::subs/authed?]) scene @(rf/subscribe [::subs/scene]) - ctx @(rf/subscribe [::subs/context])] + ctx @(rf/subscribe [::subs/context]) + segs @(rf/subscribe [::subs/segments])] (r/after-render (fn [] (when-let [c @el] (when-let [node (and active (.querySelector c (str "#ann-" (name active))))] @@ -597,12 +620,13 @@ (for [a anns] ^{:key (:id a)} [:div.ann {:id (str "ann-" (name (:id a))) - :class (when (= (:id a) active) "active")} + :class (when (= (:id a) active) "active") + :style {:border-left (str "8px solid " (:color a))}} [:div.ann-head [:div.ann-title (when (:broken a) [:span {:title (:reason a)} "⚠ "]) (:name a) (when (seq (:script a)) [:span.script-badge {:title "linked to script"} "¶"])] [:div.ann-actions - [jump-control open a] + [jump-control open a scene segs] [:button.expand-btn {:title "Expand" :on-click #(rf/dispatch [::events/expand (:id a)])} "⤢" (when (pos? (:nested a)) [:span.nest-badge (:nested a)])] (when authed? @@ -737,7 +761,8 @@ :on-change #(rf/dispatch [::events/set-zoom (js/parseFloat (.. % -target -value))])}]] [:label.slider "Zoom Y" [:input {:type "range" :min 8 :max 120 :value row-h - :on-change #(rf/dispatch [::events/set-row-h (js/parseFloat (.. % -target -value))])}]]])) + :on-change #(rf/dispatch [::events/set-row-h (js/parseFloat (.. % -target -value))])}]] + [dark-toggle]])) (defn- drag-top! "Drag the horizontal divider: set --top-h (in vh) from the pointer's Y." @@ -921,9 +946,11 @@ [:div.home [:div.home-head [:h1 "lumet"] - (when authed? - [:span.muted "signed in as " user " · " - [:a {:href "#" :on-click #(do (.preventDefault %) (rf/dispatch [::events/logout]))} "log out"]])] + [:span.home-head-right + (when authed? + [:span.muted "signed in as " user " · " + [:a {:href "#" :on-click #(do (.preventDefault %) (rf/dispatch [::events/logout]))} "log out"] " "]) + [dark-toggle]]] (when net-err [:div.err "⚠ " net-err]) (if authed? [:<>