| * { box-sizing: border-box; } |
| :root { |
| --bg: #fafafa; |
| --surface: #ffffff; |
| --border: #e7e7ea; |
| --border-strong: #d9d9de; |
| --text: #1a1a1e; |
| --text-2: #55555e; |
| --text-3: #9d9da6; |
| --accent: #1d5c45; |
| --accent-dark: #144533; |
| --accent-soft: #e9f1ec; |
| --hl: rgba(29, 92, 69, 0.1); |
| --hl-active: rgba(29, 92, 69, 0.22); |
| --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.05); |
| --shadow-md: 0 4px 16px rgba(20, 20, 30, 0.08), 0 1px 3px rgba(20, 20, 30, 0.06); |
| --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| --serif: "Lora", Georgia, serif; |
| --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; |
| } |
| html, body { margin: 0; height: 100%; } |
| body { font: 14px/1.55 var(--ui); color: var(--text); background: var(--bg); } |
| button { font: inherit; color: inherit; } |
| svg.icon { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; display: block; } |
| .hidden { display: none !important; } |
| .muted { color: var(--text-3); font-size: 13px; } |
| .spacer { flex: 1; } |
| .row { display: flex; gap: 8px; align-items: center; } |
|
|
| .btn { |
| border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); |
| border-radius: 7px; padding: 6px 14px; cursor: pointer; text-decoration: none; |
| display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13.5px; |
| transition: border-color .12s, background .12s; |
| } |
| .btn:hover { border-color: var(--text-3); } |
| .btn.primary { background: var(--text); border-color: var(--text); color: #fff; } |
| .btn.primary:hover { background: #000; } |
| .btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; } |
| .btn.accent:hover { background: var(--accent-dark); } |
| .btn.small { padding: 4px 10px; font-size: 12.5px; } |
| .btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); } |
| .btn.ghost:hover { background: rgba(0,0,0,.05); color: var(--text); } |
|
|
| .iconbtn { |
| border: none; background: transparent; color: var(--text-2); border-radius: 6px; |
| padding: 5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; |
| } |
| .iconbtn:hover { background: rgba(0,0,0,.06); color: var(--text); } |
|
|
| input, textarea { |
| font: inherit; border: 1px solid var(--border-strong); border-radius: 7px; padding: 6px 10px; |
| width: 100%; background: var(--surface); color: var(--text); |
| } |
| input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } |
| textarea { resize: vertical; } |
|
|
| |
| .overlay { position: fixed; inset: 0; background: rgba(18, 18, 24, 0.4); backdrop-filter: blur(2px); z-index: 100; display: flex; align-items: center; justify-content: center; } |
| .overlay .card { |
| background: var(--surface); border-radius: 14px; padding: 40px 44px; max-width: 400px; |
| box-shadow: var(--shadow-md); text-align: center; |
| } |
| .overlay .card h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.01em; } |
| .overlay .card p { color: var(--text-2); margin: 0 0 22px; } |
| #dev-login { margin-top: 14px; display: flex; gap: 8px; } |
|
|
| |
| #topbar { |
| display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 52px; |
| background: var(--surface); border-bottom: 1px solid var(--border); |
| position: sticky; top: 0; z-index: 40; |
| } |
| #topbar .wordmark { font-weight: 650; letter-spacing: -0.02em; text-decoration: none; color: var(--text); font-size: 15px; } |
| #back-link { color: var(--text-2); text-decoration: none; display: flex; align-items: center; padding: 6px; border-radius: 6px; } |
| #back-link:hover { background: rgba(0,0,0,.05); color: var(--text); } |
| #doc-title { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } |
| #conn { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; } |
| #conn.on { background: var(--accent); } |
| #whoami { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; white-space: nowrap; } |
| #whoami img { width: 24px; height: 24px; border-radius: 50%; } |
| #whoami a { color: var(--text-3); text-decoration: none; } |
| #whoami a:hover { color: var(--text); } |
| #presence { display: flex; } |
| #presence .avatar { |
| width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 600; |
| display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); margin-left: -6px; |
| } |
| #presence .avatar:first-child { margin-left: 0; } |
|
|
| |
| #header-tools { display: flex; align-items: center; gap: 1px; margin: 0 8px; overflow-x: auto; scrollbar-width: none; } |
| #header-tools::-webkit-scrollbar { display: none; } |
| #header-tools button { |
| border: none; background: transparent; border-radius: 6px; padding: 5px 8px; cursor: pointer; |
| font-size: 12.5px; color: var(--text-2); min-width: 28px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; |
| white-space: nowrap; flex-shrink: 0; |
| } |
| #header-tools button:hover { background: rgba(0,0,0,.06); color: var(--text); } |
| #header-tools button.on { background: var(--accent-soft); color: var(--accent); } |
| #header-tools .sep { width: 1px; height: 18px; background: var(--border); margin: 0 5px; flex-shrink: 0; } |
|
|
| |
| #link-pop { |
| position: fixed; z-index: 60; background: var(--surface); border: 1px solid var(--border); |
| border-radius: 10px; box-shadow: var(--shadow-md); padding: 10px; width: 320px; display: flex; gap: 6px; |
| } |
|
|
| |
| #agents-pop, #share-pop { |
| position: fixed; z-index: 60; right: 14px; top: 58px; width: 340px; |
| background: var(--surface); border: 1px solid var(--border); border-radius: 12px; |
| box-shadow: var(--shadow-md); padding: 14px 16px; |
| } |
| #share-pop { right: 90px; } |
| #agents-pop h3, #share-pop h3 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); } |
| #agents-pop .hint, #share-pop .hint { font-size: 12.5px; color: var(--text-2); margin: 0 0 10px; } |
| #share-form { display: flex; gap: 6px; margin-top: 10px; } |
| .share-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; } |
| .share-row .iconbtn { margin-left: auto; } |
| .key-box { |
| margin-top: 10px; border: 1px solid var(--accent); background: var(--accent-soft); |
| border-radius: 8px; padding: 10px 12px; font-size: 12.5px; |
| } |
| .key-box code { font-family: var(--mono); font-size: 11.5px; word-break: break-all; display: block; margin: 6px 0; } |
| .key-box .row { margin-top: 6px; } |
| #agents-pop .hint { font-size: 12.5px; color: var(--text-2); margin: 0 0 10px; } |
| .agent-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; } |
| .agent-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; } |
| .agent-row .dot.on { background: var(--accent); } |
| .agent-row .handle { font-weight: 600; } |
| .agent-row .copy { margin-left: auto; } |
| #agent-form { display: flex; gap: 6px; margin-top: 10px; } |
|
|
| |
| #layout { max-width: 1560px; margin: 0 auto; padding: 24px 20px 40vh; display: flex; gap: 20px; align-items: flex-start; } |
| #editor-col { flex: 1; min-width: 0; position: relative; } |
| #editor { |
| background: var(--surface); border: 1px solid var(--border); border-radius: 12px; |
| padding: 44px 52px; min-height: 82vh; box-shadow: var(--shadow-sm); |
| } |
| #margin-col { width: 300px; flex-shrink: 0; position: relative; } |
| #margin-tools { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); margin-bottom: 14px; user-select: none; } |
| #margin-tools input[type="checkbox"] { width: auto; accent-color: var(--accent); margin: 0; } |
| #margin-items { position: relative; } |
|
|
| |
| .tiptap { outline: none; font-family: var(--serif); font-size: calc(16.5px * var(--doc-zoom, 1)); line-height: 1.75; color: #26262b; } |
| .tiptap > * + * { margin-top: 0.7em; } |
| .tiptap p { margin: 0; } |
| .tiptap h1, .tiptap h2, .tiptap h3 { font-family: var(--ui); letter-spacing: -0.022em; line-height: 1.25; color: var(--text); } |
| .tiptap h1 { font-size: 2em; font-weight: 700; margin-top: 0.4em; } |
| .tiptap h2 { font-size: 1.45em; font-weight: 650; margin-top: 1.1em; } |
| .tiptap h3 { font-size: 1.15em; font-weight: 650; margin-top: 1em; } |
| .tiptap pre { |
| background: #f4f4f6; border-radius: 8px; padding: 14px 16px; font-size: 13.5px; |
| overflow-x: auto; font-family: var(--mono); line-height: 1.55; |
| } |
| .tiptap code { font-family: var(--mono); font-size: 0.85em; background: #f0f0f3; border-radius: 4px; padding: 0.1em 0.35em; } |
| .tiptap pre code { background: none; padding: 0; } |
| .tiptap blockquote { border-left: 2px solid var(--border-strong); margin: 0.7em 0 0; padding-left: 18px; color: var(--text-2); font-style: italic; } |
| .tiptap a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(29,92,69,.35); text-underline-offset: 2px; } |
| .tiptap ul, .tiptap ol { padding-left: 1.4em; margin: 0; } |
| .tiptap li { margin: 0.15em 0; } |
| .tiptap hr { border: none; border-top: 1px solid var(--border); margin: 1.6em 0; } |
| .tiptap img { max-width: 100%; border-radius: 8px; display: block; margin: 0.4em 0; } |
| .tiptap img.ProseMirror-selectednode { outline: 3px solid var(--accent-soft); outline-offset: 2px; } |
| .tiptap .comment-hl { background: var(--hl); border-bottom: 1.5px solid rgba(29,92,69,.5); cursor: pointer; } |
| .tiptap .comment-hl.active { background: var(--hl-active); } |
| .tiptap .suggestion-hl { background: transparent; position: relative; } |
| .tiptap .suggestion-hl::before { content: ''; position: absolute; left: -16px; top: 2px; bottom: 2px; width: 2.5px; background: #99b6ab; } |
| .tiptap p.is-editor-empty:first-child::before { color: var(--text-3); content: attr(data-placeholder); float: left; height: 0; pointer-events: none; } |
|
|
| |
| .collaboration-carets__caret { border-left: 1px solid; border-right: 1px solid; margin: 0 -1px; pointer-events: none; word-break: normal; position: relative; } |
| .collaboration-carets__label { |
| border-radius: 3px 3px 3px 0; color: #fff; font-size: 10px; font-weight: 600; font-family: var(--ui); |
| left: -1px; line-height: normal; padding: 0.1rem 0.35rem; position: absolute; top: -1.35em; user-select: none; white-space: nowrap; |
| } |
|
|
| |
| #selection-menu { position: absolute; z-index: 30; display: flex; background: var(--text); border-radius: 8px; box-shadow: var(--shadow-md); overflow: hidden; } |
| #selection-menu button { |
| background: transparent; border: none; color: #fff; padding: 7px 13px; cursor: pointer; |
| display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; |
| } |
| #selection-menu button + button { border-left: 1px solid rgba(255,255,255,.15); } |
| #selection-menu button:hover { background: rgba(255,255,255,.12); } |
|
|
| |
| .card { |
| position: absolute; left: 0; width: 100%; |
| background: var(--surface); border: 1px solid var(--border); border-radius: 10px; |
| padding: 10px 14px; cursor: pointer; transition: top .18s ease, box-shadow .15s, border-color .15s; |
| box-shadow: var(--shadow-sm); |
| } |
| .card:hover { border-color: var(--border-strong); } |
| .card.expanded { box-shadow: var(--shadow-md); border-color: var(--accent); cursor: default; z-index: 5; } |
| .card .head { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-2); } |
| .card .head .icon { color: var(--text-3); } |
| .card.expanded .head .icon { color: var(--accent); } |
| .card .head .who { font-weight: 600; color: var(--text); font-size: 13px; flex-shrink: 0; } |
| .card .head .who.agent::after { content: "agent"; font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; } |
| .card .head .preview { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } |
| .card .head .when { font-size: 11.5px; color: var(--text-3); flex-shrink: 0; } |
| .card .body { margin-top: 10px; } |
| .card blockquote { |
| margin: 0 0 10px; padding: 3px 10px; border-left: 2px solid rgba(29,92,69,.55); background: var(--hl); |
| font-size: 12.5px; color: var(--text-2); border-radius: 0 6px 6px 0; |
| overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; |
| } |
| .card blockquote.orphaned { border-left-color: var(--border-strong); background: #f4f4f6; text-decoration: line-through; } |
| .msg { margin: 10px 0; font-size: 13.5px; } |
| .msg .author { font-weight: 600; font-size: 12.5px; display: flex; align-items: center; gap: 6px; color: var(--text); } |
| .msg .author .when { font-weight: 400; color: var(--text-3); font-size: 11.5px; } |
| .msg .author .agent-tag { font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 1px 5px; } |
| .msg .text { white-space: pre-wrap; word-wrap: break-word; color: var(--text-2); margin-top: 2px; } |
| .msg .text .mention { color: var(--accent); font-weight: 600; } |
| .chip { |
| display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; border-radius: 999px; |
| padding: 2px 9px; margin: 4px 4px 0 0; background: #f0f0f3; color: var(--text-2); |
| } |
| .chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); } |
| .chip.claimed::before { background: var(--text); } |
| .chip.done { background: var(--accent-soft); color: var(--accent); } |
| .chip.done::before { background: var(--accent); } |
| .chip.failed { background: #f0f0f3; color: var(--text); text-decoration: line-through; } |
| .reply-row { display: flex; gap: 6px; margin-top: 10px; } |
| .reply-row input { font-size: 13px; } |
| .card .actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; align-items: center; } |
|
|
| |
| .card .head .iconbtn { padding: 3px; flex-shrink: 0; } |
| .card .head .accept-btn { color: var(--accent); } |
| .card .head .accept-btn:hover { background: var(--accent-soft); } |
| .card .head .reject-btn:hover { color: var(--text); } |
|
|
| |
| .tiptap .sugg-del { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--text-3); background: rgba(0,0,0,.045); border-radius: 2px; cursor: pointer; } |
| .tiptap .sugg-ins { |
| color: var(--accent-dark); background: var(--accent-soft); box-shadow: 0 1.5px 0 var(--accent); |
| border-radius: 2px; padding: 0 1px; cursor: pointer; white-space: pre-wrap; |
| } |
| .tiptap .sugg-del-block { text-decoration: line-through; color: var(--text-3); opacity: 0.75; cursor: pointer; } |
| .tiptap .sugg-del-block.sugg-del-empty { height: 4px; overflow: hidden; margin-top: 0; } |
| .tiptap .sugg-ins-block { |
| border-left: 2.5px solid var(--accent); background: var(--accent-soft); |
| padding: 8px 14px; margin: 0.5em 0; cursor: pointer; |
| } |
| .tiptap .sugg-ins-block > * + * { margin-top: 0.4em; } |
| .tiptap .sugg-ins-block img { max-height: 200px; } |
|
|
| |
| .tiptap .sugg-ins.active { background: #cfe5d9; box-shadow: 0 2px 0 var(--accent); font-weight: 600; } |
| .tiptap .sugg-del.active { background: rgba(0, 0, 0, 0.1); color: var(--text-2); } |
| .tiptap .sugg-ins-block.active { background: #d9ebe1; border-left-width: 4px; box-shadow: var(--shadow-sm); } |
| .tiptap .sugg-del-block.active { opacity: 0.55; background: rgba(0, 0, 0, 0.04); } |
| .tiptap .suggestion-hl { cursor: pointer; } |
| .tiptap .suggestion-hl.active::before { width: 3.5px; background: var(--accent); } |
| .tiptap .suggestion-hl.active { background: rgba(29, 92, 69, 0.045); } |
|
|
| |
| #zoom-label { font-size: 11.5px; color: var(--text-3); min-width: 34px; text-align: center; user-select: none; } |
| .rationale { font-size: 13px; color: var(--text-2); margin-top: 8px; font-style: italic; } |
| .status-note { font-size: 11.5px; color: var(--text-3); } |
|
|
| |
| .composer-box { position: absolute; left: 0; width: 100%; z-index: 6; background: var(--surface); border: 1px solid var(--accent); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 8px; transition: top .18s ease; } |
| .composer-box textarea, .composer-box input { font-size: 13px; } |
| .composer-box .row { justify-content: flex-end; } |
| .composer-box blockquote { margin: 0; padding: 3px 10px; border-left: 2px solid rgba(29,92,69,.55); background: var(--hl); font-size: 12.5px; color: var(--text-2); border-radius: 0 6px 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
|
|
| |
| .mention-menu { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-md); margin-top: 4px; overflow: hidden; position: relative; z-index: 8; } |
| .mention-menu div { padding: 6px 12px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 7px; } |
| .mention-menu div:hover { background: var(--accent-soft); } |
| .mention-menu .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); } |
| .mention-menu .dot.on { background: var(--accent); } |
|
|
| |
| .home { max-width: 680px; margin: 0 auto; padding: 48px 24px 120px; } |
| .home-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } |
| .home h1 { font-size: 22px; letter-spacing: -0.02em; margin: 0; } |
| .home h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin: 44px 0 6px; } |
| .doc-card { |
| display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); |
| border-radius: 10px; padding: 14px 18px; margin-bottom: 8px; text-decoration: none; color: var(--text); |
| transition: border-color .12s, box-shadow .12s; |
| } |
| .doc-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } |
| .doc-card .title { font-weight: 550; } |
| .doc-card .meta { margin-left: auto; font-size: 12.5px; color: var(--text-3); } |
| .doc-card .iconbtn { opacity: 0; transition: opacity .12s; } |
| .doc-card:hover .iconbtn { opacity: 1; } |
| .home #agent-form { display: flex; gap: 8px; max-width: 440px; margin-top: 12px; } |
| .home .agent-row { border-bottom: 1px solid var(--border); padding: 9px 2px; } |
| .home .agent-row:last-of-type { border-bottom: none; } |
|
|
| @media (max-width: 980px) { |
| #layout { flex-direction: column; } |
| #margin-col { width: 100%; } |
| #margin-items { position: static; } |
| .card, .composer-box { position: static; margin-bottom: 10px; } |
| #editor { padding: 32px 26px; } |
| #doc-title { max-width: 120px; } |
| } |
|
|
|
|
| |
| #layout { position: relative; } |
| #sidebar { |
| width: 220px; flex: 0 0 220px; padding: 18px 10px 18px 16px; box-sizing: border-box; |
| border-right: 1px solid var(--line); background: var(--bg-2, rgba(0,0,0,0.015)); |
| overflow-y: auto; font-size: 13.5px; |
| } |
| #sidebar.hidden { display: none; } |
| #sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } |
| .sidebar-title { font-weight: 600; color: var(--text-2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } |
| #page-tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; } |
| #page-tree > ul { padding-left: 0; } |
| #page-tree li { margin: 1px 0; } |
| #page-tree a { |
| display: block; padding: 4px 8px; border-radius: 6px; color: var(--text); text-decoration: none; |
| white-space: nowrap; overflow: hidden; text-overflow: ellipsis; |
| } |
| #page-tree a:hover { background: rgba(29, 92, 69, 0.07); } |
| #page-tree a.current { background: rgba(29, 92, 69, 0.12); font-weight: 600; } |
| #page-tree a.ghost-page { color: var(--text-3); font-style: italic; } |
| #page-tree .unfiled-label { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 10px 0 2px; } |
| #structure-link { |
| display: block; margin-top: 14px; padding: 4px 8px; color: var(--text-3); font-size: 12px; |
| text-decoration: none; border-radius: 6px; |
| } |
| #structure-link:hover { background: rgba(29, 92, 69, 0.07); color: var(--text-2); } |
| #structure-link.current { background: rgba(29, 92, 69, 0.12); color: var(--text); } |
| #sidebar-toggle { |
| position: absolute; left: 0; top: 10px; z-index: 5; width: 22px; height: 26px; |
| border: 1px solid var(--line); border-left: none; border-radius: 0 6px 6px 0; |
| background: var(--paper, #fff); cursor: pointer; color: var(--text-3); font-size: 11px; padding: 0; |
| } |
| #sidebar-toggle:hover { color: var(--text); } |
| #page-add { font-size: 15px; line-height: 1; } |
|
|
|
|
| |
| #image-bubble { |
| position: fixed; z-index: 60; display: flex; align-items: center; gap: 2px; |
| background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 8px; |
| padding: 3px 5px; box-shadow: 0 4px 18px rgba(0,0,0,0.12); |
| } |
| #image-bubble.hidden { display: none; } |
| #image-bubble .iconbtn { font-size: 12px; min-width: 26px; } |
| #image-bubble .iconbtn.on { background: rgba(29, 92, 69, 0.14); color: var(--accent); font-weight: 700; } |
| #image-bubble .sep { width: 1px; height: 16px; background: var(--line); margin: 0 4px; } |
| .tiptap img[data-align='center'] { display: block; margin-left: auto; margin-right: auto; } |
| .tiptap img[data-align='right'] { display: block; margin-left: auto; } |
| .tiptap img[data-align='left'] { display: block; margin-right: auto; } |
|
|
| |
| .sugg-strip { |
| display: flex; align-items: center; gap: 6px; padding: 6px 10px; margin: 0 -1px; |
| border-top: 1px dashed var(--line); font-size: 12.5px; cursor: pointer; |
| background: rgba(29, 92, 69, 0.035); |
| } |
| .sugg-strip.active { background: rgba(29, 92, 69, 0.1); } |
| .sugg-strip .preview { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-2); } |
| .sugg-strip .who { font-weight: 600; } |
| .sugg-strip svg { flex: 0 0 auto; } |
|
|
| |
| .chain-nav { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; } |
| .chain-nav .iconbtn { min-width: 18px; padding: 0 3px; font-size: 13px; } |
| .chain-nav .iconbtn:disabled { opacity: 0.3; cursor: default; } |
| .chain-pos { font-size: 11px; color: var(--text-3); min-width: 26px; text-align: center; } |
|
|
| |
| .card.thread .head .resolve-btn { color: var(--accent); } |
|
|
|
|
| |
| #pagelink-menu { position: fixed; z-index: 70; } |
| .tiptap a { cursor: pointer; } |
| #structure-link { display: flex; align-items: center; gap: 6px; } |
| #structure-link .icon { width: 14px; height: 14px; } |
|
|
|
|
| |
| |
| @media (max-width: 980px) { |
| #sidebar { |
| position: fixed; left: 0; top: 49px; bottom: 0; width: 250px; z-index: 45; |
| background: var(--surface); border-right: 1px solid var(--line); |
| box-shadow: 6px 0 24px rgba(0, 0, 0, 0.12); |
| } |
| #sidebar-toggle { position: fixed; top: 59px; z-index: 46; } |
| } |
|
|
|
|
| |
| #update-banner { |
| position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 10px 16px; |
| background: #b45309; color: #fff; font-size: 13.5px; text-align: center; |
| } |
| #update-banner a { color: #fff; font-weight: 700; } |
|
|
|
|
| |
| |
| |
| .tiptap .sugg-ins.sugg-ins-multi { display: contents; } |
| .sugg-ins-seg, |
| .tiptap .sugg-ins-li, |
| .tiptap .sugg-ins-codeline { |
| color: var(--accent-dark); background: var(--accent-soft); box-shadow: 0 1.5px 0 var(--accent); |
| border-radius: 2px; padding: 0 1px; cursor: pointer; |
| } |
| |
| .tiptap .sugg-ins-li { display: list-item; list-style: disc outside; margin-top: 2px; width: fit-content; } |
| .tiptap .sugg-ins-li::marker { color: var(--accent); } |
| .tiptap .sugg-ins-li.ordered { list-style: none; } |
| .tiptap .sugg-ins-li.ordered::before { content: '+ '; color: var(--accent); font-weight: 700; } |
| .tiptap .sugg-ins-codeline { display: block; width: fit-content; white-space: pre; min-height: 1.2em; } |
| .tiptap .sugg-ins-multi.active .sugg-ins-li, |
| .tiptap .sugg-ins-multi.active .sugg-ins-seg, |
| .tiptap .sugg-ins-multi.active .sugg-ins-codeline { background: #cfe5d9; font-weight: 600; } |
|
|
| |
| |
| |
| .tiptap .suggestion-hl.hl-join::before, |
| .tiptap .sugg-ins-block.hl-join::before { top: calc(-1.8em - 4px); } |
| |
| .tiptap .sugg-ins-block { border-left: none; position: relative; } |
| .tiptap .sugg-ins-block::before { |
| content: ''; position: absolute; left: -16px; top: 0; bottom: 0; width: 2.5px; background: #99b6ab; |
| } |
| .tiptap .sugg-ins-block.active::before { width: 3.5px; background: var(--accent); } |
|
|
|
|
| |
| #margin-col.hidden { display: none; } |
| #margin-toggle { |
| position: absolute; right: 0; top: 10px; z-index: 5; width: 22px; height: 26px; |
| border: 1px solid var(--line); border-right: none; border-radius: 6px 0 0 6px; |
| background: var(--surface); cursor: pointer; color: var(--text-3); font-size: 11px; padding: 0; |
| } |
| #margin-toggle:hover { color: var(--text); } |
|
|
|
|
| |
| #page-tree a { display: flex; align-items: center; } |
| #page-tree a > .page-del { display: none; margin-left: auto; padding: 0 2px; flex: 0 0 auto; } |
| #page-tree a:hover > .page-del { display: inline-flex; } |
| #page-tree .page-del svg { width: 13px; height: 13px; } |
| #page-tree .page-del:hover { color: #b03030; } |
|
|
|
|
| |
| #slug-legend { |
| margin-top: 14px; padding: 14px 20px; background: var(--surface); |
| border: 1px solid var(--border); border-radius: 12px; font-size: 13px; |
| } |
| #slug-legend .legend-title { color: var(--text-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } |
| #slug-legend table { border-collapse: collapse; width: 100%; } |
| #slug-legend th { text-align: left; font-size: 11.5px; color: var(--text-3); font-weight: 600; padding: 4px 12px 4px 0; border-bottom: 1px solid var(--line); } |
| #slug-legend td { padding: 5px 12px 5px 0; border-bottom: 1px solid var(--line); } |
| #slug-legend tr:last-child td { border-bottom: none; } |
| #slug-legend td a { color: var(--text); text-decoration: none; } |
| #slug-legend td a:hover { text-decoration: underline; } |
| #slug-legend code { |
| background: rgba(0, 0, 0, 0.05); padding: 1px 7px; border-radius: 5px; cursor: pointer; |
| font-size: 12px; |
| } |
| #slug-legend code:hover { background: rgba(29, 92, 69, 0.12); } |
| #slug-legend code.copied { background: var(--accent-soft); color: var(--accent); } |
|
|
|
|
| |
| .structure-mode #editor { min-height: 0; padding: 22px 28px; } |
| #structure-hint { |
| margin-bottom: 12px; padding: 10px 14px; font-size: 12.5px; color: var(--text-2); |
| background: rgba(29, 92, 69, 0.05); border: 1px solid var(--line); border-radius: 10px; |
| } |
|
|
|
|
| |
| #agents-list .agent-row { |
| display: flex; align-items: center; gap: 8px; padding: 5px 0; |
| border-bottom: 1px solid var(--line); |
| } |
| #agents-list .agent-row:last-child { border-bottom: none; } |
| #agents-list .agent-id { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; } |
| #agents-list .agent-id .handle { font-weight: 600; font-size: 13px; } |
| #agents-list .agent-id .owner { font-size: 11px; } |
| #agents-list .actions { display: flex; gap: 2px; flex: 0 0 auto; } |
| #agents-list .actions .iconbtn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; } |
| #agents-list .actions .iconbtn.on { color: var(--accent); } |
| #agents-list .actions .iconbtn svg { width: 15px; height: 15px; } |
| .key-box .key-label { font-size: 12px; color: var(--text-2); } |
| .key-box .row { display: flex; gap: 6px; flex-wrap: wrap; } |
| .key-box .row .btn { white-space: nowrap; } |
|
|
|
|
| |
| [data-tip] { position: relative; } |
| [data-tip]:hover::after { |
| content: attr(data-tip); |
| position: absolute; bottom: calc(100% + 7px); right: -4px; |
| background: #223029; color: #fff; font-size: 11.5px; line-height: 1.35; |
| padding: 5px 9px; border-radius: 7px; width: max-content; max-width: 240px; |
| white-space: normal; text-align: left; z-index: 95; pointer-events: none; |
| box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); |
| } |
| [data-tip].tip-below:hover::after { bottom: auto; top: calc(100% + 7px); } |
|
|
|
|
| |
| .tiptap ul[data-type='taskList'] { list-style: none; padding-left: 4px; margin: 0.4em 0; } |
| .tiptap ul[data-type='taskList'] li { display: flex; align-items: flex-start; gap: 8px; margin: 3px 0; } |
| .tiptap ul[data-type='taskList'] li > label { margin-top: 2px; flex: 0 0 auto; } |
| .tiptap ul[data-type='taskList'] li > div { flex: 1; } |
| .tiptap ul[data-type='taskList'] input[type='checkbox'] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } |
| .tiptap ul[data-type='taskList'] li[data-checked='true'] > div { color: var(--text-3); text-decoration: line-through; } |
| |
| .sugg-ins-block ul[data-type='taskList'] { list-style: none; padding-left: 0; } |
| .sugg-ins-block .task-item { display: flex; align-items: flex-start; gap: 8px; } |
| .sugg-ins-block .task-item.checked > span { color: var(--text-3); text-decoration: line-through; } |
|
|
| |
| .tiptap table, .sugg-ins-block table { border-collapse: collapse; width: 100%; margin: 0.6em 0; font-size: 0.95em; table-layout: fixed; overflow: hidden; } |
| .tiptap th, .tiptap td, .sugg-ins-block th, .sugg-ins-block td { |
| border: 1px solid var(--border-strong); padding: 6px 10px; vertical-align: top; text-align: left; |
| } |
| .tiptap th, .sugg-ins-block th { background: rgba(0,0,0,0.035); font-weight: 650; } |
| .tiptap td p, .tiptap th p { margin: 0; } |
| .tiptap .selectedCell:after { |
| content: ''; position: absolute; inset: 0; background: rgba(29,92,69,0.12); pointer-events: none; |
| } |
| .tiptap td, .tiptap th { position: relative; } |
|
|
|
|
| |
| #table-controls { |
| position: fixed; z-index: 60; display: flex; align-items: center; gap: 2px; |
| background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 8px; |
| padding: 3px 5px; box-shadow: 0 4px 18px rgba(0,0,0,0.12); |
| } |
| #table-controls.hidden { display: none; } |
| #table-controls .iconbtn { font-size: 11.5px; padding: 3px 7px; white-space: nowrap; } |
| #table-controls .iconbtn.danger:hover { color: #b03030; } |
| #table-controls .sep { width: 1px; height: 16px; background: var(--line); margin: 0 3px; } |
|
|
|
|
| |
| #page-tree a.pending-page { color: var(--text-2); border: 1px dashed var(--line); border-radius: 6px; } |
| #page-tree a.pending-page .pending-badge { |
| display: inline-block; margin-left: 6px; font-size: 10px; padding: 0 5px; border-radius: 5px; |
| background: rgba(29,92,69,0.1); color: var(--accent); vertical-align: middle; |
| } |
| #proposal-view.hidden { display: none; } |
| #proposal-view { |
| background: var(--surface); border: 1px solid var(--border); border-radius: 12px; |
| min-height: 78vh; box-shadow: var(--shadow-sm); overflow: hidden; |
| } |
| .proposal-bar { |
| display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; |
| padding: 14px 20px; border-bottom: 1px solid var(--line); background: rgba(29,92,69,0.04); |
| } |
| .proposal-meta { font-size: 13px; color: var(--text-2); } |
| .proposal-actions { display: flex; gap: 8px; } |
| .proposal-content { padding: 32px 44px; } |
| .proposal-content::before { |
| content: 'Preview of the proposed page — accept to create it'; display: block; |
| font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); margin-bottom: 16px; |
| } |
|
|
