/* Faaglarna styles. Themes are applied via classes on (theme-paper, theme-light, theme-dark, theme-sepia, theme-night, theme-hicon). Each theme overrides the CSS custom properties defined in :root below. UI elements consume only the variables so theme switching is a single class swap. */ :root { --courier: "Courier Prime", "Courier New", Courier, monospace; --sans: system-ui, -apple-system, "Segoe UI", sans-serif; /* Reference defaults — overridden per theme on body. */ --bg: #ececea; --paper: #fefefe; --ink: #111; --muted: #777; --rule: #e2e2e2; --sidebar: #f6f6f4; --topbar: #fafafa; --accent: #2b6cb0; --accent-bg: #dbe7f5; --selection: #d1e6ff; --shadow: 0 1px 0 #ddd, 0 8px 24px rgba(0,0,0,0.06); --page-width: 60ch; --left-margin: 9ch; --right-margin: 6ch; --dialogue-indent: 10ch; --dialogue-width: 33ch; --paren-indent: 16ch; --character-indent: 22ch; --zoom: 1; --ui-scale: 1; } /* ---------- themes ---------- */ body.theme-paper { --bg: #ececea; --paper: #fdfbf5; --ink: #1a1a1a; --muted: #777; --rule: #e2ddd0; --sidebar: #f4f1ea; --topbar: #f8f5ee; --accent: #2b6cb0; } body.theme-light { --bg: #f4f4f4; --paper: #ffffff; --ink: #1a1a1a; --muted: #6b7280; --rule: #e5e7eb; --sidebar: #f9fafb; --topbar: #ffffff; --accent: #2563eb; } body.theme-sepia { --bg: #d8c8a8; --paper: #f4ecd8; --ink: #3a2e1f; --muted: #8a7559; --rule: #d9c8a3; --sidebar: #ebe0c4; --topbar: #ece1c5; --accent: #8b4513; --accent-bg: #e8d8a8; } body.theme-dark { --bg: #0f1115; --paper: #181b21; --ink: #e6e4dd; --muted: #8a8f99; --rule: #2a2e36; --sidebar: #14161b; --topbar: #14161b; --accent: #6aa0ff; --accent-bg: #1e2a44; --selection: #1e3a66; --shadow: 0 1px 0 #000, 0 12px 32px rgba(0,0,0,0.5); } body.theme-night { --bg: #0a0805; --paper: #161106; --ink: #d8b88a; --muted: #7a6244; --rule: #2a200f; --sidebar: #100c06; --topbar: #100c06; --accent: #d18a3c; --accent-bg: #2a1a08; --selection: #3a2410; --shadow: none; } body.theme-hicon { --bg: #ffffff; --paper: #ffffff; --ink: #000000; --muted: #555; --rule: #000000; --sidebar: #f4f4f4; --topbar: #ffffff; --accent: #0000ee; --accent-bg: #ffffaa; } * { box-sizing: border-box; } html { font-size: calc(16px * var(--ui-scale)); } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--ink); } body { font-family: var(--sans); font-size: 0.875rem; line-height: 1.45; } body { display: flex; flex-direction: row; height: 100%; } #sidebar { flex: 0 0 260px; transition: flex-basis 0.18s ease; } #main { flex: 1 1 auto; min-width: 0; } body.sidebar-collapsed #sidebar { flex-basis: 0; overflow: hidden; padding: 0; border-right-width: 0; } ::selection { background: var(--selection); } /* ---------- sidebar ---------- */ #sidebar { background: var(--sidebar); border-right: 1px solid var(--rule); overflow: auto; display: flex; flex-direction: column; padding: 0.75rem; } .sidebar-head { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; } .brand { font-weight: 600; letter-spacing: 0.02em; color: var(--ink); } .toolbar { display: flex; flex-wrap: wrap; gap: 0.25rem; } .toolbar button { background: var(--paper); border: 1px solid var(--rule); padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; font-size: 0.85rem; color: var(--ink); } .toolbar button:hover { background: var(--accent-bg); } .tree-list { list-style: none; padding-left: 0.75rem; margin: 0; } .tree > .tree-list { padding-left: 0; } .tree-dir { font-weight: 600; padding: 0.2rem 0; color: var(--muted); } .tree-file { display: block; padding: 0.15rem 0.25rem; color: var(--ink); text-decoration: none; font-size: 0.92rem; border-radius: 3px; } .tree-file:hover { background: var(--accent-bg); } .tree-file.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; } .outline-panel { margin-top: 1rem; } .section-head { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.25rem; } .outline { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; } .outline li { padding: 0.1rem 0; } .outline a { color: var(--ink); text-decoration: none; } .outline a:hover { color: var(--accent); } .ol-section { font-weight: 600; text-transform: uppercase; font-size: 0.78rem; margin-top: 0.3rem; } .ol-section a { color: var(--accent); } .ol-level-2 { padding-left: 0.5rem; } .ol-level-3 { padding-left: 1rem; } .ol-scene { font: 0.85rem var(--courier); cursor: grab; } .ol-scene.dragging { opacity: 0.4; } .ol-scene.drop-above { border-top: 2px solid var(--accent); } .ol-synopsis { font-style: italic; padding-left: 0.5rem; font-size: 0.8rem; } .ol-synopsis a { color: var(--muted); } .ol-char { display: flex; align-items: center; gap: 0.4rem; font: 0.85rem var(--courier); } .ol-char .ch-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .ol-char .ch-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-count { color: var(--muted); font-size: 0.75rem; flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; } .ch-count .ch-unit { opacity: 0.6; margin-left: 1px; } .bm-item { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; } .bm-item a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bm-del { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 0.3rem; } .bm-del:hover { color: #b00020; } .bm-empty { color: var(--muted); font-size: 0.8rem; font-style: italic; } /* ---------- main ---------- */ #main { display: flex; flex-direction: column; overflow: hidden; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rule); background: var(--topbar); gap: 0.6rem; flex: 0 0 auto; } .crumbs { font: 0.95rem/1 var(--courier); color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .actions { display: flex; align-items: center; gap: 0.3rem; } .actions button, .icon-btn { background: var(--paper); border: 1px solid var(--rule); padding: 0.3rem 0.55rem; border-radius: 4px; cursor: pointer; font-size: 0.85rem; color: var(--ink); } .actions button:hover:not(:disabled), .icon-btn:hover { background: var(--accent-bg); } .actions button:disabled { opacity: 0.4; cursor: not-allowed; } .actions button.danger:hover { background: #fce4e4; border-color: #f0b4b4; color: #b00020; } .icon-btn { padding: 0.3rem 0.45rem; } #btn-sidebar-toggle { background: transparent; border: none; font-size: 1.1rem; } #btn-sync { transition: color 0.15s, background 0.15s; } #btn-sync.active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); } #btn-sync:not(.active) { opacity: 0.55; } .zoom-group { display: inline-flex; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; } .zoom-group .icon-btn { border: none; border-radius: 0; padding: 0.3rem 0.5rem; font: 0.78rem var(--courier); } .zoom-group .icon-btn + .icon-btn { border-left: 1px solid var(--rule); } .mode-switch { display: inline-flex; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; } .mode-switch button { border: none; border-radius: 0; padding: 0.3rem 0.7rem; background: var(--paper); color: var(--ink); } .mode-switch button.active { background: var(--accent); color: white; } .mode-switch button + button { border-left: 1px solid var(--rule); } .markup-toggle { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; color: var(--muted); padding: 0 0.3rem; cursor: pointer; user-select: none; } .markup-toggle input { accent-color: var(--accent); margin: 0; } /* WYSIWYG: editable script surface */ .script.editable .page-content[contenteditable="true"] { outline: none; } .script.editable .page-content[contenteditable="true"]:focus { outline: 1px dashed var(--accent); outline-offset: -2px; } .script.editable .elem { caret-color: var(--accent); } .script.editable .elem:focus { background: rgba(43,108,176,0.05); } /* Split-view caret/selection mirror */ .elem.mirror-caret { position: relative; } .elem.mirror-caret::before { content: ""; position: absolute; left: -2px; top: 0.05em; width: 2px; height: 1.1em; background: var(--accent); animation: caret-blink 1s steps(2) infinite; pointer-events: none; } .elem.mirror-highlight { background: rgba(43,108,176,0.10); } body.theme-dark .elem.mirror-highlight, body.theme-night .elem.mirror-highlight { background: rgba(106,160,255,0.15); } /* Inline selection mirror — character-level highlight in either pane. */ .mirror-sel { background: rgba(43,108,176,0.32); color: inherit; border-radius: 1px; } body.theme-dark .mirror-sel, body.theme-night .mirror-sel { background: rgba(106,160,255,0.32); } /* Faux caret overlay in the source textarea (visible only when focus is in the page pane). Positioned absolutely inside .pane-edit, which is now position: relative. */ .pane-edit, .pane-view { position: relative; } .faux-caret { position: absolute; width: 2px; background: var(--accent); pointer-events: none; z-index: 2; animation: caret-blink 1s steps(2) infinite; } .faux-caret.hidden { display: none; } @keyframes caret-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } } /* Block-level selection overlay drawn over the source textarea — used when the textarea isn't focused (so the browser would hide its native selection). Covers full source-line spans, not column-precise. */ .source-mirror-sel { position: absolute; background: rgba(43,108,176,0.22); border-radius: 2px; pointer-events: none; z-index: 1; } .source-mirror-sel.hidden { display: none; } body.theme-dark .source-mirror-sel, body.theme-night .source-mirror-sel { background: rgba(106,160,255,0.25); } /* Current find match highlight — overlay boxes drawn over the source textarea (its own selection is invisible while the find box has focus), plus a tint on the matching element in the page view. */ #find-hl { position: absolute; inset: 0; pointer-events: none; z-index: 3; } #find-hl.hidden { display: none; } .find-hl-box { position: absolute; background: rgba(255,196,0,0.45); border-radius: 2px; pointer-events: none; } body.theme-dark .find-hl-box, body.theme-night .find-hl-box { background: rgba(255,210,80,0.40); } .elem.find-hit { background: rgba(255,196,0,0.35); border-radius: 2px; } body.theme-dark .elem.find-hit, body.theme-night .elem.find-hit { background: rgba(255,210,80,0.30); } /* Typewriter / focus mode: dim everything except the active line. */ body.typewriter .elem { transition: opacity 0.18s; } body.typewriter .elem:not(.elem-active) { opacity: 0.32; } body.typewriter .elem.elem-active { opacity: 1; } body.typewriter .pane { padding-top: 40vh; padding-bottom: 40vh; } /* Show-markup highlighting */ .mk { color: var(--muted); opacity: 0.6; } .mk-note { display: inline-block; margin-left: 0.4em; color: var(--accent); background: var(--accent-bg); border-radius: 3px; padding: 0 0.3em; font-size: 0.85em; } .scene-nav { font: 0.85rem var(--courier); border: 1px solid var(--rule); border-radius: 4px; padding: 0.25rem; background: var(--paper); color: var(--ink); max-width: 30ch; } /* ---------- tabs ---------- */ .tab-strip { flex: 0 0 auto; display: flex; align-items: stretch; background: var(--sidebar); border-bottom: 1px solid var(--rule); padding: 0 0.4rem; overflow-x: auto; } .tab-strip.hidden { display: none; } .tab { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem 0.3rem 0.7rem; border-right: 1px solid var(--rule); font: 0.82rem var(--courier); color: var(--ink); cursor: pointer; user-select: none; max-width: 24ch; } .tab .tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tab.active { background: var(--paper); border-bottom: 2px solid var(--accent); } .tab:hover { background: var(--accent-bg); } .tab .tab-close { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 0.2rem; line-height: 1; } .tab .tab-close:hover { color: #b00020; } /* ---------- format toolbar ---------- */ .format-toolbar { display: flex; gap: 0.5rem; align-items: stretch; padding: 0.35rem 0.75rem; background: var(--topbar); border-bottom: 1px solid var(--rule); overflow-x: auto; flex: 0 0 auto; } .format-toolbar.hidden { display: none; } .ft-group { display: flex; flex-direction: column; border-right: 1px solid var(--rule); padding-right: 0.6rem; padding-left: 0.2rem; } .ft-group:last-child { border-right: none; } .ft-banner { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.2rem; } .ft-row { display: flex; gap: 0.15rem; } .ft-row button { background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; padding: 0.18rem 0.45rem; font: 0.8rem var(--courier); color: var(--ink); cursor: pointer; min-width: 1.8rem; } .ft-row button:hover { background: var(--accent-bg); color: var(--accent); } .ft-row button:active { transform: translateY(1px); } .ft-spacer { flex: 1; } /* ---------- content / panes ---------- */ #content { flex: 1 1 auto; overflow: hidden; position: relative; display: grid; } #content.mode-view { grid-template-columns: 1fr 0; } #content.mode-source { grid-template-columns: 0 1fr; } #content.mode-split { grid-template-columns: 1fr 1fr; } .pane { overflow: auto; padding: 2rem 1rem; } .pane-edit { padding: 0; background: var(--sidebar); border-left: 1px solid var(--rule); } #content.mode-source .pane-edit { border-left: none; } .editor { width: 100%; height: 100%; border: none; outline: none; font-family: var(--courier); font-size: calc(13px * var(--zoom)); line-height: 1.55; padding: 1.5rem; resize: none; background: transparent; color: var(--ink); caret-color: var(--accent); } .status { display: flex; justify-content: space-between; padding: 0.3rem 1rem; border-top: 1px solid var(--rule); background: var(--topbar); font-size: 0.8rem; color: var(--muted); flex: 0 0 auto; } /* ---------- script (multi-page container) ---------- */ .script { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 1.5rem 1rem; font-family: var(--courier); font-size: calc(12pt * var(--zoom)); line-height: 1; color: var(--ink); } /* A single physical page. Sized in ch (chars wide) and em (lines tall) relative to the page font-size, so it scales cleanly with --zoom. */ .page { background: var(--paper-tint, var(--paper)); box-shadow: var(--shadow); width: calc(var(--page-w-ch) * 1ch); min-height: calc(var(--page-h-em) * 1em); position: relative; white-space: pre-wrap; word-break: break-word; } .page-content { padding-top: calc(var(--mar-t-em) * 1em); padding-bottom: calc(var(--mar-b-em) * 1em); padding-left: calc(var(--mar-l-ch) * 1ch); padding-right: calc(var(--mar-r-ch) * 1ch); } .page-number { position: absolute; top: calc((var(--mar-t-em) - 3) * 1em); right: calc(var(--mar-r-ch) * 1ch); color: var(--ink); font-size: 1em; } /* Elements (single line of vertical breathing room between most). */ .elem + .elem { margin-top: 1em; } /* Leave a breath of space above when jumped to via scrollIntoView. */ .elem, .page { scroll-margin-top: 1.5rem; } /* Tight stack inside a cue → keep character + parenthetical + dialogue together. */ .elem-character + .elem-dialogue, .elem-character + .elem-parenthetical, .elem-parenthetical + .elem-dialogue, .elem-dialogue + .elem-dialogue, .elem-dialogue + .elem-parenthetical { margin-top: 0; } .elem-more + .elem, .elem-contd + .elem { margin-top: 0; } .elem-scene { font-weight: 700; position: relative; } .elem-scene::before { content: attr(data-scene-num); position: absolute; left: -5ch; color: var(--muted); font-weight: 400; font-size: 0.9em; } .elem-scene::after { content: attr(data-scene-num); position: absolute; right: -5ch; color: var(--muted); font-weight: 400; font-size: 0.9em; } .elem-action { } .elem-character { } .elem-parenthetical { max-width: 22ch; } .elem-dialogue { max-width: 33ch; } .elem-transition { } .elem-section { font-weight: 700; color: var(--accent); border-bottom: 1px dashed var(--rule); letter-spacing: 0.05em; } .elem-synopsis { color: var(--muted); font-style: italic; } .elem-lyric { font-style: italic; } .elem-centered { } .elem-more, .elem-contd { font-weight: 400; } .elem-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 2ch; margin: 1em 0; } .elem-dual-col { display: flex; flex-direction: column; } .elem-dual-col .elem { margin-left: 0 !important; max-width: none; } .elem-dual-col .elem-character, .elem-dual-col .elem-parenthetical { text-align: center; } /* Title page sits in its own .page; layout fills the page interior. */ .page-title .page-content { display: none; } .script.editable .page-title { cursor: pointer; } .script.editable .page-title:hover { outline: 1px dashed var(--accent); outline-offset: -8px; } .script.editable .page-title:hover::before { content: "click to edit title page"; position: absolute; top: 1em; left: 50%; transform: translateX(-50%); background: var(--accent-bg); color: var(--accent); font: 0.75em var(--sans); padding: 0.2em 0.6em; border-radius: 3px; letter-spacing: 0.04em; text-transform: uppercase; pointer-events: none; } .page-title .title-page { display: flex; flex-direction: column; justify-content: space-between; width: 100%; min-height: calc(var(--page-h-em) * 1em); padding: calc(var(--mar-t-em) * 1em) calc(var(--mar-r-ch) * 1ch) calc(var(--mar-b-em) * 1em) calc(var(--mar-l-ch) * 1ch); } .tp-center { text-align: center; margin: auto 0; } .tp-title { text-transform: uppercase; font-weight: 700; margin-bottom: 2em; } .tp-credit, .tp-author, .tp-source { margin-bottom: 0.5em; } .tp-corner { color: var(--muted); } .tp-line { margin-top: 0.3em; } /* ---------- format overrides ---------- */ .format-stage .elem-character { font-weight: 700; } .format-stage .elem-parenthetical { font-style: italic; max-width: none; } .format-stage .elem-dialogue { max-width: 50ch; } .format-stage .elem-scene { display: none; } .format-stage .elem-action { font-style: italic; color: var(--muted); } .format-stage .elem-section { text-align: center; border-bottom: 2px solid var(--accent); font-size: 1.1em; } .format-radio .elem-scene { display: none; } .format-radio .elem-character { font-weight: 700; } .format-radio .elem-dialogue { max-width: 55ch; } .format-radio .elem-parenthetical { font-style: italic; } .format-radio .elem-action { color: var(--muted); font-style: italic; } .format-radio .cue { font-weight: 700; letter-spacing: 0.03em; background: var(--accent-bg); color: var(--ink); font-style: normal; padding: 0.2em 0.5em; border-left: 3px solid var(--accent); } .format-radio .cue-sfx { border-left-color: #c89b1f; } .format-radio .cue-music { border-left-color: #6b8c4f; } .format-radio .elem-section { text-align: center; border-bottom: 2px solid var(--accent); } /* ---------- autocomplete ---------- */ .autocomplete { position: fixed; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; box-shadow: var(--shadow); color: var(--ink); font: 0.85rem var(--courier); z-index: 100; min-width: 12ch; } .autocomplete.hidden { display: none; } .ac-item { padding: 0.3rem 0.6rem; cursor: pointer; } .ac-item:hover { background: var(--accent-bg); color: var(--accent); } /* ---------- context menu ---------- */ .ctx-menu { position: fixed; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); z-index: 300; min-width: 240px; padding: 0.3rem 0; color: var(--ink); } .ctx-menu.hidden { display: none; } .ctx-item { display: flex; justify-content: space-between; gap: 1rem; width: 100%; background: transparent; border: none; text-align: left; padding: 0.35rem 0.8rem; font: 0.85rem var(--sans); color: var(--ink); cursor: pointer; } .ctx-item:hover:not(.disabled) { background: var(--accent-bg); color: var(--accent); } .ctx-item.disabled { color: var(--muted); cursor: default; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; padding-top: 0.5rem; } .ctx-hint { color: var(--muted); font: 0.75rem var(--courier); } .ctx-sep { height: 1px; background: var(--rule); margin: 0.3rem 0; } /* ---------- modal ---------- */ .modal-root { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 200; } .modal-root.hidden { display: none; } .modal { background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; min-width: 420px; max-width: 640px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .modal-wide { min-width: 720px; max-width: 920px; } /* Help modal is fixed-width so it doesn't reflow as tabs switch. */ .modal-help { width: min(820px, 95vw); min-width: min(820px, 95vw); max-width: min(820px, 95vw); height: min(720px, 85vh); } .modal-help .modal-body { height: 100%; } .modal-head { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--rule); } .modal-head h3 { margin: 0; font-size: 1rem; } .modal-body { padding: 1rem; overflow: auto; } .modal-body h4 { margin: 1rem 0 0.4rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } /* ---------- beat board / cards ---------- */ .modal-cards { width: min(1100px, 95vw); max-width: 1100px; min-width: 700px; max-height: 90vh; } .apply-btn { background: var(--accent); color: white; border: none; border-radius: 4px; padding: 0.35rem 0.9rem; font-size: 0.85rem; cursor: pointer; margin-right: 0.5rem; } .apply-btn:hover { filter: brightness(1.1); } .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; } .card { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 0.6rem 0.7rem 0.7rem; min-height: 140px; position: relative; cursor: grab; display: flex; flex-direction: column; box-shadow: 0 1px 0 var(--rule); user-select: none; transition: transform 0.12s, box-shadow 0.12s; } .card:hover { transform: translateY(-1px); box-shadow: 0 2px 12px rgba(0,0,0,0.08); } .card.dragging { opacity: 0.4; cursor: grabbing; } .card.drop-target { outline: 2px solid var(--accent); outline-offset: -1px; } .card-head { font: 600 0.78rem var(--courier); text-transform: uppercase; letter-spacing: 0.02em; border-bottom: 1px solid var(--rule); padding-bottom: 0.3rem; margin-bottom: 0.4rem; word-break: break-word; } .card-syn { font: italic 0.82rem var(--sans); color: var(--accent); margin-bottom: 0.4rem; } .card-prev { font: 0.78rem var(--courier); color: var(--muted); flex: 1; } .card-num { position: absolute; top: 0.35rem; right: 0.5rem; font: 600 0.7rem var(--courier); color: var(--muted); } /* ---------- command palette ---------- */ .modal-palette { min-width: 540px; max-width: 720px; padding: 0; overflow: hidden; } .palette-input { width: 100%; border: none; border-bottom: 1px solid var(--rule); background: var(--paper); color: var(--ink); padding: 0.8rem 1rem; font: 1rem var(--sans); outline: none; } .palette-list { list-style: none; padding: 0; margin: 0; max-height: 50vh; overflow: auto; } .palette-item { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 1rem; cursor: pointer; gap: 1rem; } .palette-item.active, .palette-item:hover { background: var(--accent-bg); color: var(--accent); } .pal-label { font-size: 0.92rem; } .pal-meta { color: var(--muted); font: 0.78rem var(--courier); } .palette-item.active .pal-meta { color: var(--accent); opacity: 0.75; } /* ---------- help / hotkeys ---------- */ .help-tabs { display: flex; gap: 0.25rem; flex: 1; margin: 0 1rem; } .help-tab { background: transparent; border: 1px solid transparent; color: var(--muted); font: 0.85rem var(--sans); padding: 0.3rem 0.75rem; cursor: pointer; border-radius: 4px; } .help-tab:hover { color: var(--accent); } .help-tab.active { color: var(--accent); border-color: var(--rule); background: var(--accent-bg); font-weight: 600; } .help-pane { display: none; } .help-pane.active { display: block; } .hk-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 0.5rem; } .hk-table td { padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--rule); } .hk-key { font: 0.78rem var(--courier); background: var(--accent-bg); color: var(--accent); border-radius: 4px; padding: 0.1rem 0.5rem; white-space: nowrap; width: 14ch; } .howto h4 { font-size: 0.95rem; color: var(--ink); margin: 1.1rem 0 0.35rem; text-transform: none; letter-spacing: 0; } .howto h4:first-child { margin-top: 0; } .howto p, .howto ul, .howto ol { margin: 0.3rem 0 0.5rem; line-height: 1.55; } .howto ul, .howto ol { padding-left: 1.4rem; } .howto li { margin: 0.15rem 0; } .howto code { font: 0.85em var(--courier); color: var(--accent); background: var(--accent-bg); padding: 0.05em 0.35em; border-radius: 3px; } .howto pre { font: 0.82rem var(--courier); color: var(--ink); background: var(--sidebar); border: 1px solid var(--rule); border-radius: 4px; padding: 0.6rem; overflow: auto; margin: 0.5rem 0; } .howto kbd { font: 0.78rem var(--courier); background: var(--accent-bg); color: var(--accent); border: 1px solid var(--rule); border-radius: 4px; padding: 0.05rem 0.35rem; box-shadow: 0 1px 0 var(--rule); } .howto a { color: var(--accent); } /* ---------- theme picker ---------- */ .ui-scale-row { display: flex; flex-direction: column; gap: 0.35rem; } .ui-scale-row label { display: flex; justify-content: space-between; align-items: baseline; } .ui-scale-val { font: 0.85rem var(--courier); color: var(--accent); } .ui-scale-row input[type="range"] { width: 100%; accent-color: var(--accent); } .ui-scale-hint { color: var(--muted); font-size: 0.78rem; } .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .theme-card { background: var(--paper); border: 2px solid var(--rule); border-radius: 8px; padding: 0.5rem; cursor: pointer; text-align: left; color: var(--ink); font: inherit; } .theme-card:hover { border-color: var(--accent); } .theme-card.active { border-color: var(--accent); background: var(--accent-bg); } .theme-swatch { height: 70px; border-radius: 4px; padding: 0.4rem; margin-bottom: 0.4rem; display: flex; align-items: center; justify-content: center; } .sw-page { background: rgba(255,255,255,0.95); width: 60%; height: 90%; border-radius: 2px; padding: 0.3rem; display: flex; flex-direction: column; gap: 4px; } .sw-line { height: 4px; background: rgba(0,0,0,0.6); border-radius: 1px; } .sw-line.short { width: 60%; } .theme-swatch.theme-paper { background: #ececea; } .theme-swatch.theme-paper .sw-page { background: #fdfbf5; } .theme-swatch.theme-light { background: #e5e7eb; } .theme-swatch.theme-light .sw-page { background: #ffffff; } .theme-swatch.theme-sepia { background: #c8b48f; } .theme-swatch.theme-sepia .sw-page { background: #f4ecd8; } .theme-swatch.theme-sepia .sw-line { background: #3a2e1f; } .theme-swatch.theme-dark { background: #0f1115; } .theme-swatch.theme-dark .sw-page { background: #181b21; } .theme-swatch.theme-dark .sw-line { background: #e6e4dd; } .theme-swatch.theme-night { background: #0a0805; } .theme-swatch.theme-night .sw-page { background: #161106; } .theme-swatch.theme-night .sw-line { background: #d8b88a; } .theme-swatch.theme-hicon { background: #555; } .theme-swatch.theme-hicon .sw-page { background: #fff; } .theme-swatch.theme-hicon .sw-line { background: #000; } .theme-name { font-weight: 600; font-size: 0.9rem; } .theme-desc { color: var(--muted); font-size: 0.78rem; margin-top: 0.1rem; } /* ---------- history list ---------- */ .history-list { list-style: none; padding: 0; margin: 0; } .history-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--rule); align-items: center; font-family: var(--courier); font-size: 0.85rem; } .hist-restore, .hist-diff { background: var(--paper); border: 1px solid var(--rule); padding: 0.2rem 0.5rem; border-radius: 4px; cursor: pointer; color: var(--ink); font-size: 0.78rem; } .hist-restore:hover, .hist-diff:hover { background: var(--accent-bg); color: var(--accent); } .hist-size { color: var(--muted); } .history-list li { grid-template-columns: 1fr auto auto auto; } .modal-diff { min-width: 760px; } .modal-tp { min-width: 480px; } .tp-form { display: flex; flex-direction: column; gap: 0.6rem; } .tp-form label { display: grid; grid-template-columns: 9rem 1fr; align-items: start; gap: 0.5rem; } .tp-form label > span { font-size: 0.85rem; color: var(--muted); padding-top: 0.3rem; } .tp-form input, .tp-form select, .tp-form textarea { border: 1px solid var(--rule); border-radius: 4px; padding: 0.35rem 0.5rem; font: 0.9rem var(--courier); background: var(--paper); color: var(--ink); width: 100%; } .tp-form textarea { font-family: var(--courier); resize: vertical; } .tp-form .apply-btn { align-self: flex-end; margin-top: 0.5rem; } .diff-stats { color: var(--muted); font-size: 0.8rem; font-weight: 400; margin-left: 0.5rem; } .diff-view { font: 0.82rem var(--courier); margin: 0; padding: 0.5rem 0; background: var(--sidebar); border-radius: 4px; overflow: auto; max-height: 65vh; white-space: pre; } .diff-view .d-eq { display: block; color: var(--muted); padding: 0 0.5rem; } .diff-view .d-add { display: block; background: rgba(70, 165, 60, 0.15); color: #2e7a23; padding: 0 0.5rem; } .diff-view .d-del { display: block; background: rgba(176, 0, 32, 0.10); color: #b00020; padding: 0 0.5rem; } body.theme-dark .diff-view .d-add { color: #88e088; } body.theme-dark .diff-view .d-del { color: #f7a0a0; } /* ---------- stats ---------- */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0.5rem; margin-bottom: 1rem; } .stat-box { background: var(--accent-bg); border-radius: 6px; padding: 0.6rem; text-align: center; } .stat-num { font: 600 1.4rem var(--courier); color: var(--accent); } .stat-lbl { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .stat-note { color: var(--muted); font-size: 0.78rem; margin: -0.4rem 0 1rem; } /* ---------- cast list / notes review ---------- */ .modal-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .modal-actions button { padding: 0.35rem 0.9rem; font-size: 0.85rem; cursor: pointer; border: 1px solid var(--rule); border-radius: 4px; background: var(--sidebar); color: inherit; } .modal-actions button:hover { border-color: var(--accent); } .note-list { list-style: none; margin: 0; padding: 0; } .note-item { padding: 0.55rem 0.7rem; border: 1px solid var(--rule); border-radius: 6px; margin-bottom: 0.5rem; cursor: pointer; } .note-item:hover { border-color: var(--accent); background: var(--accent-bg); } .note-text { font-size: 0.9rem; } .note-ctx { color: var(--muted); font-size: 0.75rem; margin-top: 0.2rem; font-family: var(--courier); } .note-empty { color: var(--muted); font-size: 0.85rem; list-style: none; } .spell-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.7rem; font-size: 0.9rem; } .stat-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 1rem; } .stat-table th { text-align: left; font-weight: 600; padding: 0.4rem 0.6rem; border-bottom: 2px solid var(--rule); background: var(--sidebar); } .stat-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--rule); } .stat-table td:first-child { font-family: var(--courier); } .stat-table td:not(:first-child) { text-align: right; color: var(--muted); } /* ---------- find & replace bar ---------- */ .find-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; background: var(--topbar); border-top: 1px solid var(--rule); } .find-bar.hidden { display: none; } .find-bar input[type="search"] { border: 1px solid var(--rule); background: var(--paper); border-radius: 4px; padding: 0.3rem 0.5rem; font: 0.85rem var(--courier); color: var(--ink); min-width: 18ch; } .find-bar select { border: 1px solid var(--rule); background: var(--paper); border-radius: 4px; padding: 0.25rem; font-size: 0.82rem; color: var(--ink); } .find-bar button { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 0.25rem 0.6rem; font-size: 0.82rem; cursor: pointer; color: var(--ink); } .find-bar button:hover { background: var(--accent-bg); color: var(--accent); } .find-count { color: var(--muted); font: 0.78rem var(--courier); min-width: 6ch; } /* ---------- performance mode ---------- */ body.perform #sidebar, body.perform .topbar, body.perform .format-toolbar, body.perform .status { display: none; } body.perform .pane { padding: 4rem 1rem; } /* Lock interactivity that doesn't belong in performance mode. */ body.perform .page-title { cursor: default; pointer-events: none; } body.perform .elem { cursor: default; } body.perform .script.editable { caret-color: transparent; } /* Active element highlight for arrow-key navigation. */ .elem.perform-active, .page-title.perform-active { position: relative; } .elem.perform-active::before, .page-title.perform-active::before { content: ""; position: absolute; left: -1.5ch; top: 0; bottom: 0; width: 3px; background: var(--accent); border-radius: 2px; } .rehearse-placeholder { display: inline-block; padding: 0 0.6em; color: var(--muted); letter-spacing: 0.2em; background: var(--accent-bg); border-radius: 3px; cursor: pointer; user-select: none; } .rehearse-placeholder:hover { color: var(--accent); } body.perform .screenplay { --page-width: 70ch; font-size: 14pt; line-height: 1.7; box-shadow: none; } /* ---------- responsive ---------- */ @media (max-width: 800px) { body { flex-direction: column; } #sidebar { flex: 0 0 auto; max-height: 30vh; } .actions button, .icon-btn { padding: 0.25rem 0.35rem; font-size: 0.75rem; } .format-toolbar { padding: 0.2rem 0.4rem; } .ft-banner { display: none; } } /* ---------- print → PDF ---------- Used when there is no server-side PDF exporter (static hosting). The on-screen #view already holds one .page section per physical page, with forced `===` page breaks landing on their own page — so printing those nodes reproduces the exact pagination. We reset zoom to 1 so the ch/em page math lands at real inches (85ch × 66em at 12pt Courier = 8.5in × 11in), strip the app chrome, and put each page on its own sheet. */ @media print { @page { size: 8.5in 11in; margin: 0; } :root { --zoom: 1 !important; } /* Hide everything that isn't the rendered page view. */ #sidebar, .topbar, #tabs, #format-toolbar, .pane-edit, #status, #find-bar, #ctx-menu, #modal-root, .faux-caret, #autocomplete, .source-mirror-sel, #page-faux-caret, #source-faux-caret { display: none !important; } html, body { background: #fff !important; height: auto; overflow: visible; } #main, #content, .pane, .pane-view { display: block !important; margin: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important; border: 0 !important; } .script { display: block !important; padding: 0 !important; gap: 0 !important; } .page { box-shadow: none !important; background: #fff !important; margin: 0 !important; break-after: page; page-break-after: always; break-inside: avoid; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .page:last-child { break-after: auto; page-break-after: auto; } } /* ---------- cloud mode (accounts + live collaboration) ---------- Only present when the app is signed in to a cloud backend; the local server and offline builds never add the .cloud-mode class, so none of this applies to them. Everything consumes the theme variables so it follows theme swaps. */ /* Connection pill in the toolbar. */ .cloud-status { font: 600 0.7rem var(--sans); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.45rem; border-radius: 999px; border: 1px solid var(--rule); white-space: nowrap; } .cloud-status.live { color: #2e7a23; border-color: #2e7a23; background: rgba(70, 165, 60, 0.12); } .cloud-status.down { color: var(--muted); } body.theme-dark .cloud-status.live { color: #88e088; border-color: #88e088; } /* Collaborator initials, one chip per person currently in the document. */ .peer-chips { display: inline-flex; gap: 0.2rem; align-items: center; } .peer-chips.hidden { display: none; } .peer-chip { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 0.7rem var(--sans); color: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); } /* Sign-in and share dialogs. */ .cloud-field { display: block; margin-bottom: 0.7rem; font-size: 0.85rem; color: var(--muted); } .cloud-field input, .cloud-field select { display: block; width: 100%; margin-top: 0.25rem; border: 1px solid var(--rule); border-radius: 4px; padding: 0.4rem 0.5rem; font: 0.9rem var(--sans); background: var(--paper); color: var(--ink); } .cloud-field input:focus, .cloud-field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .cloud-hint { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.9rem; } .cloud-hint code { font: 0.78rem var(--courier); word-break: break-all; } .cloud-error { color: #b00020; font-size: 0.85rem; margin: 0 0 0.6rem; } .cloud-error.hidden, .cloud-hint.hidden { display: none; } body.theme-dark .cloud-error { color: #f7a0a0; } .modal-actions button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .modal-actions button.primary:hover { filter: brightness(1.08); } .modal-actions button.primary:disabled { opacity: 0.6; cursor: default; filter: none; } .modal-actions { justify-content: flex-end; } .modal-actions button.ghost { margin-right: auto; } /* Who a script is shared with. */ .share-list { list-style: none; margin: 0 0 1rem; padding: 0; } .share-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--rule); font-size: 0.88rem; } .share-who { flex: 1; } .share-role { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; } .share-remove { border: 1px solid var(--rule); border-radius: 4px; background: var(--sidebar); color: inherit; font-size: 0.75rem; padding: 0.15rem 0.5rem; cursor: pointer; } .share-remove:hover { border-color: #b00020; color: #b00020; } /* A read-only collaborator still sees the source, but cannot type into it. */ body.cloud-mode .editor[readonly] { background: var(--sidebar); cursor: default; } /* Sub-heading inside the account dialog, separating identity from the password form. */ .cloud-subhead { font: 600 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1.2rem 0 0.7rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }