/* ── Theme ── Color custom properties used throughout this file's CSS. data-theme is set on by the inline script below (before first paint) and by applyTheme() (see the JS further down). */ :root { --color-bg: #fff; --color-bg-alt: #f0f0f0; --color-bg-active: #e4edfa; --color-bg-active-hover: #dae5f6; --color-text: #2e2e2e; --color-text-secondary: #888; --color-text-faint: #aaa; --color-border: #e6e6e6; --color-input-bg: #fafcff; --color-input-border: #d8e2ec; --color-input-border-focus: #6e8faa; --color-brand-bg: #1d2d45; --color-brand-bg-hover: #263d5e; --color-brand-text: #1d2d45; --color-brand-tint: #f0f4fa; --color-brand-overlay: rgba(29,45,69,0.85); --color-on-brand: #fff; --color-shadow: rgba(0,0,0,0.25); --color-backdrop: rgba(0,0,0,0.35); } :root[data-theme="dark"] { --color-bg: #1c1f26; --color-bg-alt: #262a33; --color-bg-active: #2d3e56; --color-bg-active-hover: #354863; --color-text: #e6e6e6; --color-text-secondary: #9099a6; --color-text-faint: #6b7280; --color-border: #333844; --color-input-bg: #20242c; --color-input-border: #3a4150; --color-input-border-focus: #7f9fc0; --color-brand-bg: #2f4a75; --color-brand-bg-hover: #3c5c8f; --color-brand-text: #7fa8e0; --color-brand-tint: #232f42; --color-brand-overlay: rgba(63,99,153,0.85); --color-on-brand: #fff; --color-shadow: rgba(0,0,0,0.5); --color-backdrop: rgba(0,0,0,0.55); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; } body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; color: var(--color-text); background: var(--color-bg); line-height: 1.5; } /* ── Boot loader ── Covers the static empty #standalone-root while the module script below loads, syncs, and mounts the app view — without it, that gap briefly shows raw unstyled/empty markup. Present by default in the static HTML (no JS needed to show it); boot() adds .hide once the mounted view's first render is actually on screen. */ #boot-loader { position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #1d2d45; color: #fff; transition: opacity 0.15s ease; } #boot-loader.hide { opacity: 0; pointer-events: none; } .boot-loader-logo { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .boot-loader-spinner { width: 26px; height: 26px; border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff; border-radius: 50%; animation: boot-loader-spin 0.8s linear infinite; } @keyframes boot-loader-spin { to { transform: rotate(360deg); } } .boot-loader-force-refresh { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 14px; padding: 8px 16px; border-radius: 8px; cursor: pointer; } .boot-loader-force-refresh.show { opacity: 1; pointer-events: auto; } .boot-loader-force-refresh:hover { background: rgba(255,255,255,0.2); } /* ── Standalone mount point ── the app view owns the whole viewport. */ #standalone-root { display: flex; flex-direction: column; height: 100vh; height: 100dvh; height: var(--app-height, 100dvh); overflow: hidden; padding-bottom: env(safe-area-inset-bottom, 0px); } /* ── Sync toast ── */ #sync-toast { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 20px; background: #2a2a2a; color: #fff; padding: 7px 14px; border-radius: 6px; font-size: 12px; opacity: 0; transition: opacity 0.2s; pointer-events: none; } #sync-toast.show { opacity: 1; } #sync-toast.success { background: #1e7e34; } /* ── Mobile breakpoint ── */ @media (max-width: 640px) { body { font-size: 15px; } } /* Styling for this file's shared utilities/components (format/storage/dialog helpers below). Anything built using their conventions (.note, .dialog) is styled here. */ .placeholder { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--color-text-faint); } /* ── View header/entries chrome (shared container conventions) ── */ .view-header { border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .view-entries { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 32px; display: flex; flex-direction: column; } .header-simple { display: flex; align-items: center; justify-content: space-between; padding: 11px 20px; background: var(--color-bg); } .header-left { display: flex; align-items: center; gap: 6px; } .header-right { display: flex; align-items: center; gap: 6px; } .header-title { font-weight: 600; font-size: 15px; } /* Icon-only header button (e.g. the settings/⚙ trigger — see the Dialog class below) */ .settings-btn { background: none; border: none; cursor: pointer; padding: 4px 6px; font-size: 17px; line-height: 1; color: var(--color-text-secondary); border-radius: 5px; } .settings-btn:hover { background: var(--color-bg-alt); } /* Page contents (markdown-rendered) */ .page-tab-contents { padding: 20px 20px 20px 74px; max-width: 760px; margin: 0 auto; line-height: 1.7; overflow-wrap: break-word; min-width: 0; } .page-tab-contents h1, .page-tab-contents h2, .page-tab-contents h3 { font-weight: 600; margin-top: 1.2em; margin-bottom: 0.3em; } .page-tab-contents h1 { font-size: 18px; } .page-tab-contents h2 { font-size: 15px; } .page-tab-contents h3 { font-size: 14px; } .page-tab-contents p { margin-bottom: 0.6em; } .page-tab-contents p:last-child { margin-bottom: 0; } .page-tab-contents ul, .page-tab-contents ol { padding-left: 1.4em; margin-bottom: 0.6em; } .page-tab-contents ul { list-style: disc; } .page-tab-contents ol { list-style: decimal; } .page-tab-contents li + li { margin-top: 4px; } .page-tab-contents code { font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace; font-size: 12px; background: var(--color-bg-alt); padding: 1px 4px; border-radius: 3px; } .page-tab-contents pre { background: var(--color-bg-alt); padding: 10px 12px; border-radius: 5px; overflow-x: auto; max-width: 100%; margin-bottom: 0.6em; } .page-tab-contents pre code { background: none; padding: 0; white-space: pre; } .page-tab-contents img, .page-tab-contents table { max-width: 100%; } .page-tab-contents table { display: block; overflow-x: auto; } /* ── Notes / blocks — full-width "comment" rows (Zulip-like), not chat bubbles: no right-alignment, no per-message background/border. A same-topic run's messages get a shared left border instead, at the wrapper level — see .app-journal-topic-run below — so the grouping reads at a glance without outlining every individual message. */ .note { display: flex; gap: 14px; padding: 3px 20px; margin: 0 2px; border-radius: 4px; } .note:hover { background: var(--color-bg-alt); } /* Touch devices open the edit menu via long-press (see shared/longpress.js) — without this, the same long-press also triggers the OS's native text-selection/callout ("Copy", "Look Up", …), which visibly fights the custom menu for the gesture. Mouse users are unaffected (they get the menu via right-click/contextmenu instead) and keep normal text selection. */ @media (pointer: coarse) { .note { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } } .note-attrs { width: 38px; flex-shrink: 0; text-align: right; padding-top: 3px; } .note:hover .note-link-btn { color: var(--color-text-secondary); } /* Topicless Journal entry (no page reference, see getJournalFeedForGraph's `topics` field) — never wrapped in an .app-journal-topic-run (see _prependJournalBatch), so it has no border of its own to lean on; muted text is the only cue left that it reads as "not filed under any topic". */ .note-topicless .note-body { color: var(--color-text-secondary); } .note-body { flex: 1; overflow-wrap: break-word; min-width: 0; } .note-body strong { font-weight: 600; } .note-body em { font-style: italic; } .note-body code { font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace; font-size: 12px; background: var(--color-bg-alt); padding: 1px 4px; border-radius: 3px; } .note-body pre { background: var(--color-bg-alt); padding: 8px 10px; border-radius: 5px; overflow-x: auto; max-width: 100%; margin-bottom: 0.4em; } .note-body pre code { background: none; padding: 0; white-space: pre; } .note-body img, .note-body table { max-width: 100%; } .note-body table { display: block; overflow-x: auto; } .note-body h1, .note-body h2, .note-body h3 { font-weight: 600; line-height: 1.3; margin-top: 2px; } .note-body h1 { font-size: 16px; } .note-body h2 { font-size: 14px; } .note-body h3 { font-size: 14px; } .note-body ul, .note-body ol { padding-left: 1.4em; } .note-body ul { list-style: disc; } .note-body ol { list-style: decimal; } .note-body li + li { margin-top: 2px; } .note-body p { margin-bottom: 0.4em; } .note-body p:last-child { margin-bottom: 0; } /* ── Search bar (the Topics list) ── */ .browse-search { padding: 16px 20px 8px; } .browse-search input { width: 100%; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 13px; color: var(--color-text); background: var(--color-input-bg); outline: none; font-family: inherit; } .browse-search input:focus { border-color: var(--color-input-border-focus); background: var(--color-bg); } /* ── Primary filled button — used by dialog forms (e.g. "Add graph" in the Manage graphs dialog). ── */ .compose-btn { padding: 5px 16px; background: var(--color-brand-bg); color: var(--color-on-brand); border: none; border-radius: 5px; font-size: 12px; font-family: inherit; font-weight: 600; cursor: pointer; } .compose-btn:hover:not(:disabled) { background: var(--color-brand-bg-hover); } .compose-btn:disabled { opacity: 0.5; cursor: default; } /* ── Generic centered dialog (the Dialog class below) — e.g. the settings menu ── */ .dialog-backdrop { display: none; position: fixed; inset: 0; z-index: 300; background: var(--color-backdrop); align-items: center; justify-content: center; } .dialog-backdrop.show { display: flex; } .dialog { background: var(--color-bg); border-radius: 10px; width: 90%; max-width: 300px; box-shadow: 0 8px 30px var(--color-shadow); overflow: hidden; } .dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 8px 12px 16px; border-bottom: 1px solid var(--color-border); } .dialog-title { font-weight: 600; font-size: 14px; } .dialog-close-btn { background: none; border: none; cursor: pointer; padding: 2px 8px; font-size: 20px; line-height: 1; color: var(--color-text-secondary); border-radius: 5px; } .dialog-close-btn:hover { background: var(--color-bg-alt); color: var(--color-text); } .dialog-body { padding: 6px; } .dialog-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; background: none; font-size: 13px; font-family: inherit; color: var(--color-text); cursor: pointer; border-radius: 6px; } .dialog-item:hover { background: var(--color-brand-tint); } .dialog-item.active { font-weight: 600; color: var(--color-brand-text); } .dialog-item-disabled { color: var(--color-text-faint); cursor: default; pointer-events: none; } .dialog-divider { height: 1px; background: var(--color-border); margin: 6px 4px; } .dialog-group summary { display: block; width: 100%; padding: 9px 12px; font-size: 13px; font-family: inherit; color: var(--color-text-secondary); cursor: pointer; border-radius: 6px; list-style: none; } .dialog-group summary::-webkit-details-marker { display: none; } .dialog-group summary:hover { background: var(--color-brand-tint); } .dialog-group summary::before { content: '▸ '; } .dialog-group[open] summary::before { content: '▾ '; } .dialog-group[open] summary { color: var(--color-text); } .dialog-group .dialog-item { padding-left: 24px; } .dialog-footer { padding: 9px 12px 4px; font-size: 12px; color: var(--color-text-secondary); text-align: center; } /* ── Mobile breakpoint ── */ @media (max-width: 640px) { .header-simple { padding: 10px 14px; } .page-tab-contents { padding: 14px 14px 24px; } .note { padding: 3px 10px; } .browse-search { padding: 12px 14px 8px; } /* iOS Safari zooms in on focus when an input's font-size is under 16px */ .browse-search input { font-size: 16px; } } /* header/entries/note chrome is covered by the shared-utilities CSS above (.view-header, .view-entries, .placeholder, .header-simple, .header-left, .header-right, .header-title, .note, .settings-btn). Rules below are specific to the two-pane layout, its conversation-list rows, and its back button. */ /* Mounts as a bare custom element inside #standalone-root's flex column (see the #standalone-root rule above) — without this it renders inline with no fixed height, so .app-layout's children have nothing to size themselves against. */ /* touch-action: manipulation drops the double-tap-to-zoom gesture (and the ~300ms tap delay with it) — paired with the no-zoom viewport meta that AppView's connectedCallback sets, so this feels like a native messenger rather than a zoomable web page. */ qorgi-app { display: flex; flex-direction: column; flex: 1; overflow: hidden; touch-action: manipulation; } /* ── Two-pane layout ── Below DESKTOP_BP (900px), only one of the two panes is shown at a time — full width, chosen by which of .route-list/ .route-topic is on .app-layout (set by handleRoute) — reproducing the original single-column phone UI (tap a topic, back returns to the list). At/above DESKTOP_BP both panes show together, list pinned to the left at a fixed width like a desktop messenger; .app-back-btn disappears since the list is always reachable right there. The thread header's topic-menu button (.app-topic-menu-btn) stays visible at every breakpoint — unlike the old duplicate settings button it used to hold, it's the only place topic actions live, so hiding it on desktop would remove them entirely. */ .app-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; } .app-list-pane, .app-thread-pane { display: flex; flex-direction: column; flex: 1 1 100%; min-width: 0; min-height: 0; } @media (max-width: 899px) { .app-layout.route-list .app-thread-pane { display: none; } .app-layout.route-topic .app-list-pane { display: none; } } @media (min-width: 900px) { .app-list-pane { flex: 0 0 320px; border-right: 1px solid var(--color-border); } .app-thread-pane { flex: 1; } .app-back-btn { display: none; } } .app-back-btn { background: none; border: none; cursor: pointer; padding: 0 4px; font-size: 22px; line-height: 1; color: var(--color-brand-text); } /* ── Conversation list — rounded hover highlight instead of hard row dividers, closer to Signal/other mobile chat apps' list feel ── */ .app-item { margin: 2px 10px; padding: 10px 10px; border-radius: 10px; cursor: pointer; } .app-item:hover { background: var(--color-brand-tint); } /* Only meaningful once the list pane can be visible alongside an open thread (desktop, see the two-pane layout section above) — harmless below that breakpoint since the list isn't shown at the same time as a thread. */ .app-item.active { background: var(--color-bg-active); } .app-item.active:hover { background: var(--color-bg-active-hover); } .app-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .app-item-title { font-weight: 600; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-item-time { flex-shrink: 0; font-size: 11px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } /* Unsent composer draft for this topic — see shared/storage.js's getAllDrafts. */ .app-item-draft-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-text); } .app-item-preview { margin-top: 2px; color: var(--color-text-secondary); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-item-preview em { font-style: normal; color: var(--color-text-faint); } /* ── Graph/space switcher — pinned under the list pane's title row, first thing shown on boot (see switcher.js); sets which single registered graph the list/search/journal feed below scope to. Renders as a plain label (.app-switcher-single) rather than a