/* --------------------------------------------------------------------------- Themes via CSS custom properties. `data-theme` is set on before paint. --------------------------------------------------------------------------- */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-alt: #f5f6f8; --fg: #1b1f24; --fg-muted: #5a6470; --border: #e1e4e8; --accent: #2563eb; --accent-fg: #ffffff; --danger: #c0392b; --code-bg: #f5f6f8; --sidebar-bg: #fafbfc; } :root[data-theme="dark"] { color-scheme: dark; --bg: #1e2228; --bg-alt: #2a2f37; --fg: #e6e9ee; --fg-muted: #9aa4b0; --border: #353b45; --accent: #4f8cff; --accent-fg: #11151a; --danger: #ff6b5e; --code-bg: #262b32; --sidebar-bg: #23272e; } :root[data-theme="sepia"] { color-scheme: light; --bg: #f4ecd8; --bg-alt: #ece0c4; --fg: #433422; --fg-muted: #7a6a52; --border: #d8c9a8; --accent: #9a6a3a; --accent-fg: #fff8ec; --danger: #b0392b; --code-bg: #ece0c4; --sidebar-bg: #efe5cd; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--fg); font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* --------------------------------------------------------------------------- Layout: a full-width top bar; below it, a togglable sidebar on the left and the content filling the rest. The top bar is fixed-height; the row below fills the remaining viewport height. --------------------------------------------------------------------------- */ :root { --topbar-h: 48px; --sidebar-w: 260px; } .topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: 0.75rem; padding: 0 0.75rem; padding-right: max(0.75rem, env(safe-area-inset-right)); background: var(--sidebar-bg); border-bottom: 1px solid var(--border); } .brand { font-weight: 700; font-size: 1.05rem; } .topbar-spacer { flex: 1 1 auto; } /* Three zones: equal-width left & right keep the center title truly centered. */ .topbar-left, .topbar-right { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 0; min-width: 0; } .topbar-right { justify-content: flex-end; } /* Centered, editable note title. Looks like plain text until focused. */ .note-title-input { flex: 0 1 auto; max-width: 40%; text-align: center; font-size: 1.05rem; font-weight: 600; color: var(--fg); background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 0.25rem 0.5rem; text-overflow: ellipsis; } .note-title-input:hover { border-color: var(--border); } .note-title-input:focus { outline: none; border-color: var(--accent); background: var(--bg); text-align: left; } .drawer-btn { cursor: pointer; font-size: 1.3rem; line-height: 1; user-select: none; padding: 0.25rem 0.4rem; border-radius: 6px; } .drawer-btn:hover { background: var(--bg-alt); } /* Row under the top bar. */ .layout { display: flex; height: calc(100dvh - var(--topbar-h)); } .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--border); width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); padding: 0.75rem; overflow-y: auto; transition: margin-left 0.2s ease; } /* Toggle: unchecked = sidebar collapsed (slides out, content reflows full-width). */ .drawer-toggle:not(:checked) ~ .layout .sidebar { margin-left: calc(-1 * var(--sidebar-w)); } .main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 1.5rem 1.25rem; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); } /* The text column: narrower than the pane, centered, but NO border/box — it floats on the page background (Chorus look). */ .content { max-width: 50rem; margin: 0 auto; } /* Scrim: only used to dismiss the drawer when it overlays content on mobile. */ .scrim { display: none; } /* On narrow screens the sidebar overlays content instead of pushing it. */ @media (max-width: 720px) { .sidebar { position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: 25; box-shadow: 2px 0 12px rgba(0,0,0,0.15); } .drawer-toggle:checked ~ .layout .scrim { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 24; background: rgba(0,0,0,0.35); } } /* --------------------------------------------------------------------------- Tree / sidebar widgets --------------------------------------------------------------------------- */ .tree ul { list-style: none; margin: 0; padding-left: 0.75rem; } .tree-root { padding-left: 0 !important; } .tree-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .note-item { margin: 0.1rem 0; } .note-link { color: var(--fg); text-decoration: none; cursor: pointer; display: block; padding: 0.25rem 0.4rem; border-radius: 5px; } .note-link:hover { background: var(--bg-alt); } .folder > details > summary { cursor: pointer; padding: 0.25rem 0.4rem; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .folder > details > summary:hover { background: var(--bg-alt); } .folder-name { font-weight: 600; } .folder-tools { display: inline-flex; gap: 0.2rem; opacity: 0; transition: opacity 0.15s; } .folder > details > summary:hover .folder-tools { opacity: 1; } /* Compact top-bar controls. */ .theme-picker, .login-input { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.45rem; font-size: 16px; /* prevents iOS zoom on focus */ } .theme-picker { font-size: 0.85rem; cursor: pointer; } .auth-box { display: inline-flex; align-items: center; } .login-form { display: flex; gap: 0.4rem; align-items: center; } .login-input { width: 9rem; min-width: 0; } /* Top-bar items align vertically and don't shrink into each other. */ .topbar .theme-picker, .topbar .auth-box, .topbar .save-status { flex: 0 0 auto; } /* --------------------------------------------------------------------------- Buttons --------------------------------------------------------------------------- */ .btn, .btn-small, .btn-tiny { background: var(--bg-alt); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font: inherit; } .btn { padding: 0.45rem 0.9rem; min-height: 44px; } .btn-small { padding: 0.35rem 0.7rem; font-size: 0.85rem; } .btn-tiny { padding: 0.1rem 0.35rem; font-size: 0.7rem; } .btn:hover, .btn-small:hover, .btn-tiny:hover { border-color: var(--accent); } .btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .btn.danger, .btn-tiny.danger { color: var(--danger); } /* --------------------------------------------------------------------------- Note view + editor --------------------------------------------------------------------------- */ .note-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; } .note-title { margin: 0; font-size: 2rem; font-weight: 700; } .note-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } /* Top-bar RT/MD segmented toggle. */ .mode-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; } .mode-btn { border: none; background: var(--bg); color: var(--fg-muted); padding: 0.25rem 0.7rem; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; } .mode-btn + .mode-btn { border-left: 1px solid var(--border); } .mode-btn.active { background: var(--accent); color: var(--accent-fg); } .mode-btn:not(.active):hover { background: var(--bg-alt); } .editor { display: flex; flex-direction: column; gap: 0.75rem; } .md-input { width: 100%; min-height: 60vh; resize: vertical; background: var(--code-bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; field-sizing: content; /* progressive enhancement; JS fallback handles the rest */ } .placeholder { color: var(--fg-muted); padding: 2rem 0; } /* --------------------------------------------------------------------------- Toast UI rich-text editor (Phase 2), styled like Chorus: - the formatting toolbar is a clean FULL-WIDTH strip pinned under the top bar (RT/MD lives in the top bar; the editor's own bottom mode-switch is hidden) - the editor frame is BORDERLESS — no box around the document - only the TEXT is constrained to a centered reading column --------------------------------------------------------------------------- */ .rt-mount { min-height: 55vh; } /* Borderless frame: editor blends into the page. */ .rt-editor .toastui-editor-defaultUI { border: none; border-radius: 0; background: transparent; } .rt-editor .toastui-editor-defaultUI .toastui-editor-md-container, .rt-editor .toastui-editor-defaultUI .toastui-editor-ww-container, .rt-editor .toastui-editor-main, .rt-editor .toastui-editor-md-preview { background: transparent; } /* Hide the editor's bottom mode-switch (RT/MD is in the top bar). */ .toastui-editor-mode-switch { display: none !important; } /* Hide Toast's in-editor "Write | Preview" tabs shown in Markdown mode. They're redundant with our top-bar RT/MD toggle and confusing; we keep the editing pane only (math/iOS notes live-edit as raw markdown). */ .rt-editor .toastui-editor-md-tab-container { display: none !important; } /* Second top-bar row: the editor's formatting toolbar is relocated here by JS so it spans the FULL window width (Chorus layout), not just the text column. The formatting toolbar sits on the left; the delete icon is pinned to the right. */ .toolbar-row { display: flex; align-items: center; background: var(--sidebar-bg); border-bottom: 1px solid var(--border); padding: 0.25rem 0.6rem; min-height: 46px; } .toolbar-slot { flex: 1 1 auto; min-width: 0; overflow: hidden; } /* The relocated Toast toolbar fills the slot; strip its own frame. The icons are fixed-size PNG sprites, so we DON'T resize their boxes (that clips the sprite — e.g. cuts the "3" off the numbered-list icon). Instead scale the whole toolbar down proportionally with a transform, which shrinks icons cleanly. */ .toolbar-row .toastui-editor-defaultUI-toolbar { border: none; border-radius: 0; background: transparent; padding: 0; transform: scale(0.8); transform-origin: left center; } .toolbar-row .toastui-editor-toolbar { background: transparent; } .toolbar-row .toastui-editor-toolbar-divider { background: var(--border); } /* Keep native sprite box; only restyle the frame/hover. */ .toolbar-row .toastui-editor-toolbar-icons { border: none; background-color: transparent; } .toolbar-row .toastui-editor-toolbar-icons:not(:disabled):hover { background-color: var(--bg-alt); } /* Icons are dark PNG sprites — can't recolor via `color`. In dark mode, invert to white then dial back to a soft light gray (not stark white). */ :root[data-theme="dark"] .toolbar-row .toastui-editor-toolbar-icons { filter: invert(1) brightness(0.85); } /* Icon-only action button (delete) at the right end of the toolbar row. */ .icon-btn { flex: 0 0 auto; border: 1px solid transparent; background: transparent; border-radius: 6px; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0.4rem 0.5rem; } .icon-btn:hover { background: var(--bg-alt); border-color: var(--border); } .icon-btn.danger:hover { border-color: var(--danger); } /* The text column: centered + readable, no box. */ .rt-editor .toastui-editor-contents { color: var(--fg); font-size: 1.05rem; } .rt-editor .toastui-editor-md-container .toastui-editor, .rt-editor .toastui-editor-ww-container .toastui-editor, .rt-editor .toastui-editor-md-preview { max-width: 50rem; margin: 0 auto; } /* --- Cleaner WYSIWYG content rendering (override Toast defaults) --- */ /* Headings: no underline rule, just larger. */ .rt-editor .toastui-editor-contents h1, .rt-editor .toastui-editor-contents h2, .rt-editor .toastui-editor-contents h3 { border-bottom: none; padding-bottom: 0; font-weight: 700; line-height: 1.25; color: var(--fg); } .rt-editor .toastui-editor-contents h1 { font-size: 2rem; margin: 1.4rem 0 0.7rem; } .rt-editor .toastui-editor-contents h2 { font-size: 1.55rem; margin: 1.3rem 0 0.6rem; } .rt-editor .toastui-editor-contents h3 { font-size: 1.25rem; margin: 1.1rem 0 0.5rem; } /* Hide the floating "language" box pinned to the right of WYSIWYG code blocks (global, not scoped — it's position:fixed and we never want it). */ .toastui-editor-ww-code-block-language { display: none !important; } /* Code blocks themed to match our palette (Toast hardcodes light colors). */ .rt-editor .toastui-editor-contents pre { background-color: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem; } .rt-editor .toastui-editor-contents pre code { background: transparent; } /* Default code text color, but let Prism's .token colors win where present. */ .rt-editor .toastui-editor-contents pre code:not([class*="language-"]) { color: var(--fg); } .rt-editor .toastui-editor-contents pre .token { background: transparent; } /* Inline code. */ .rt-editor .toastui-editor-contents code { background-color: var(--code-bg); color: var(--accent); border-radius: 4px; padding: 0.1rem 0.35rem; } /* Top-bar autosave status. */ .save-status { font-size: 0.8rem; color: var(--fg-muted); user-select: none; white-space: nowrap; transition: color 0.15s; } .save-status[data-state="saving"] { color: var(--accent); } .save-status[data-state="dirty"] { color: var(--fg-muted); } .save-status[data-state="error"] { color: var(--danger); } .save-status::before { content: "● "; font-size: 0.7em; vertical-align: middle; } /* --------------------------------------------------------------------------- Rendered markdown (prose) + code --------------------------------------------------------------------------- */ .prose { word-wrap: break-word; } .prose h1, .prose h2, .prose h3 { line-height: 1.25; margin-top: 1.6rem; } .prose p, .prose li { font-size: 1.02rem; } .prose a { color: var(--accent); } .prose img { max-width: 100%; height: auto; } .prose blockquote { border-left: 3px solid var(--border); margin: 1rem 0; padding: 0.25rem 1rem; color: var(--fg-muted); } .prose table { border-collapse: collapse; width: 100%; margin: 1rem 0; } .prose th, .prose td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; } .prose code { background: var(--code-bg); padding: 0.1rem 0.35rem; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; } .prose pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; overflow-x: auto; } .prose pre code { background: none; padding: 0; } /* --------------------------------------------------------------------------- syntect CSS-class highlighting (subset; class names from syntect/two-face). Light defaults; dark theme overrides below. --------------------------------------------------------------------------- */ .prose pre code .comment, .prose pre code .punctuation.definition.comment { color: #6a737d; font-style: italic; } .prose pre code .keyword, .prose pre code .storage { color: #d73a49; } .prose pre code .string, .prose pre code .string.quoted { color: #032f62; } .prose pre code .constant.numeric { color: #005cc5; } .prose pre code .entity.name.function { color: #6f42c1; } .prose pre code .entity.name.type { color: #22863a; } :root[data-theme="dark"] .prose pre code .comment { color: #8b98a5; } :root[data-theme="dark"] .prose pre code .keyword, :root[data-theme="dark"] .prose pre code .storage { color: #ff7b72; } :root[data-theme="dark"] .prose pre code .string, :root[data-theme="dark"] .prose pre code .string.quoted { color: #a5d6ff; } :root[data-theme="dark"] .prose pre code .constant.numeric { color: #79c0ff; } :root[data-theme="dark"] .prose pre code .entity.name.function { color: #d2a8ff; } :root[data-theme="dark"] .prose pre code .entity.name.type { color: #7ee787; }