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?
[:<>