/* InkPage — app.css */ :root { --bg: #ffffff; --bg-sidebar: #f7f7f5; --bg-elev: #ffffff; --bg-soft: #f1f1ef; --text: #37352f; --text-muted: #787774; --text-faint: #a5a29a; --hover: rgba(55, 53, 47, .06); --hover-strong: rgba(55, 53, 47, .1); --border: rgba(55, 53, 47, .12); --accent: #2383e2; --accent-soft: rgba(35, 131, 226, .14); --danger: #e03e3e; --shadow: 0 0 0 1px rgba(15, 15, 15, .05), 0 3px 6px rgba(15, 15, 15, .1), 0 9px 24px rgba(15, 15, 15, .2); --code-bg: #f7f6f3; --inline-code: #eb5757; --sb-w: 248px; --content-w: 720px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif; --mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; --c-gray: #787774; --c-brown: #9f6b53; --c-orange: #d9730d; --c-yellow: #cb912f; --c-green: #448361; --c-blue: #337ea9; --c-purple: #9065b0; --c-pink: #c14c8a; --c-red: #d44c47; --b-gray: #f1f1ef; --b-brown: #f4eeee; --b-orange: #fbecdd; --b-yellow: #fbf3db; --b-green: #edf3ec; --b-blue: #e7f3f8; --b-purple: #f6f3f9; --b-pink: #faf1f5; --b-red: #fdebec; --p-none: rgba(227, 226, 224, .5); --p-gray: #e3e2e0; --p-brown: #eee0da; --p-orange: #fadec9; --p-yellow: #fdecc8; --p-green: #dbeddb; --p-blue: #d3e5ef; --p-purple: #e8deee; --p-pink: #f5e0e9; --p-red: #ffe2dd; color-scheme: light; } :root[data-theme="dark"] { --bg: #191919; --bg-sidebar: #202020; --bg-elev: #252525; --bg-soft: #2a2a2a; --text: #e6e6e4; --text-muted: #9b9b9b; --text-faint: #6b6b6b; --hover: rgba(255, 255, 255, .055); --hover-strong: rgba(255, 255, 255, .1); --border: rgba(255, 255, 255, .1); --accent: #529cca; --accent-soft: rgba(82, 156, 202, .2); --danger: #ff6b6b; --shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 3px 6px rgba(0, 0, 0, .4), 0 9px 24px rgba(0, 0, 0, .5); --code-bg: #202020; --inline-code: #ff8a80; --c-gray: #9b9b9b; --c-brown: #ba856f; --c-orange: #c77d48; --c-yellow: #ca9849; --c-green: #529e72; --c-blue: #5e9fe8; --c-purple: #9d68d3; --c-pink: #d15796; --c-red: #df5452; --b-gray: #2f2f2f; --b-brown: #4a3228; --b-orange: #5c3b23; --b-yellow: #56452f; --b-green: #243d30; --b-blue: #143a4e; --b-purple: #3c2d49; --b-pink: #4e2c3c; --b-red: #522e2a; --p-none: rgba(255, 255, 255, .06); --p-gray: #474747; --p-brown: #5c4033; --p-orange: #7a4a26; --p-yellow: #7a6331; --p-green: #2d5940; --p-blue: #28456c; --p-purple: #493064; --p-pink: #69314c; --p-red: #6e3630; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow: hidden; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } kbd { font-family: var(--font); font-size: 11px; color: var(--text-faint); } mark { background: rgba(255, 212, 0, .35); color: inherit; border-radius: 2px; } [hidden] { display: none !important; } .muted { color: var(--text-muted); } .small-text { font-size: 13px; margin: 4px 0; } .pad { padding: 8px 10px; font-size: 13px; } body.resizing { cursor: col-resize; user-select: none; } /* 手機瀏覽器 / 加到主畫面的 App 會把畫面延伸到狀態列（時間、電量）底下：用安全區域把內容往內推 */ #app { display: flex; height: 100vh; height: 100dvh; box-sizing: border-box; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); } /* ============ 側邊欄 ============ */ #sidebar { width: var(--sb-w); flex: none; background: var(--bg-sidebar); display: flex; flex-direction: column; position: relative; transition: margin-left .2s ease; font-size: 14px; color: var(--text-muted); user-select: none; } body.sb-collapsed #sidebar { margin-left: calc(-1 * var(--sb-w)); } .sb-head { display: flex; align-items: center; padding: 8px 8px 4px 10px; gap: 4px; } .ws-name { flex: 1; display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; min-width: 0; color: var(--text); font-weight: 600; } .ws-name:hover { background: var(--hover); } .ws-logo { width: 22px; height: 22px; border-radius: 5px; background: var(--text); color: var(--bg); display: grid; place-items: center; font-size: 12px; flex: none; } .ws-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-actions { padding: 2px 6px 8px; } .sb-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 8px; border-radius: 6px; text-align: left; min-height: 28px; } .sb-item:hover { background: var(--hover); color: var(--text); } .sb-item kbd { margin-left: auto; } .sb-ico { width: 20px; text-align: center; flex: none; font-size: 14px; } .sb-scroll { flex: 1; overflow-y: auto; padding: 0 6px 12px; } .sb-section { margin-bottom: 14px; } .sb-label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; padding: 2px 8px; color: var(--text-faint); height: 26px; } .sb-label .icon-btn { opacity: 0; } .sb-label:hover .icon-btn { opacity: 1; } .sb-foot { padding: 6px; border-top: 1px solid var(--border); } .storage-info { font-size: 11px; color: var(--text-faint); padding: 4px 8px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .storage-info .storage-free.low { color: var(--danger); font-weight: 600; } .sb-resizer { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 5; } .sb-resizer:hover { background: linear-gradient(90deg, transparent 2px, var(--border) 2px, var(--border) 4px, transparent 4px); } .tree-row { display: flex; align-items: center; gap: 2px; height: 30px; padding-right: 4px; border-radius: 6px; cursor: pointer; position: relative; } .tree-row:hover { background: var(--hover); } .tree-row.active { background: var(--hover-strong); color: var(--text); font-weight: 500; } .tree-row.dragging { opacity: .4; } .tree-row.drop-inside { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); } .tree-row.drop-before::before, .tree-row.drop-after::after { content: ""; position: absolute; left: 8px; right: 4px; height: 2px; background: var(--accent); border-radius: 2px; } .tree-row.drop-before::before { top: -1px; } .tree-row.drop-after::after { bottom: -1px; } .caret, .caret-spacer { width: 20px; height: 20px; flex: none; border-radius: 4px; display: grid; place-items: center; font-size: 16px; color: var(--text-faint); transition: transform .12s; } .caret:hover { background: var(--hover-strong); } .caret.open { transform: rotate(90deg); } .tree-icon { width: 22px; text-align: center; flex: none; font-size: 15px; } .tree-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-acts { display: none; gap: 1px; } .tree-row:hover .row-acts { display: flex; } .tree-empty { font-size: 13px; color: var(--text-faint); padding: 3px 8px 3px 30px; } .icon-btn { width: 28px; height: 28px; border-radius: 6px; display: inline-grid; place-items: center; color: var(--text-muted); flex: none; font-size: 15px; } .icon-btn.sm { width: 22px; height: 22px; font-size: 14px; } .icon-btn:hover { background: var(--hover-strong); color: var(--text); } .icon-btn.on { color: #e6a700; } /* ============ 主區域 ============ */ #main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; } #topbar { height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 12px; flex: none; } #btnExpand { display: none; } body.sb-collapsed #btnExpand { display: inline-grid; } #breadcrumb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; font-size: 14px; overflow: hidden; } .bc-item { display: flex; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 5px; white-space: nowrap; min-width: 0; } .bc-item:hover { background: var(--hover); } .bc-title { overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .bc-sep, .bc-more { color: var(--text-faint); } .tb-right { display: flex; align-items: center; gap: 2px; } #saveState { font-size: 12px; color: var(--text-faint); opacity: 0; transition: opacity .3s; margin-right: 6px; } #saveState.show { opacity: 1; } #saveState.err { color: var(--danger); cursor: pointer; text-decoration: underline dotted; } .save-err p { white-space: pre-line; margin: 0 0 10px; } .save-err-pages { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; max-height: 200px; overflow: auto; } #scroller { flex: 1; overflow-y: auto; overflow-x: hidden; } #page { padding-bottom: 30vh; font-size: calc(16px * var(--fs, 1)); line-height: var(--lh, 1.5); } .banner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px; font-size: 14px; flex-wrap: wrap; } .banner.danger { background: var(--danger); color: #fff; } .banner.danger .btn { color: #fff; border-color: rgba(255,255,255,.6); background: transparent; } .banner.warn { background: var(--b-yellow); color: var(--text); } /* ============ 頁首 ============ */ .cover { height: 30vh; max-height: 280px; min-height: 140px; position: relative; } .cover-acts { position: absolute; right: 16px; bottom: 12px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; } .cover:hover .cover-acts { opacity: 1; } .cover-btn { background: rgba(255,255,255,.9); color: #37352f; font-size: 12px; padding: 4px 10px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.15); } [data-cover="g1"] { background: linear-gradient(120deg, #f6d365, #fda085); } [data-cover="g2"] { background: linear-gradient(120deg, #a1c4fd, #c2e9fb); } [data-cover="g3"] { background: linear-gradient(120deg, #84fab0, #8fd3f4); } [data-cover="g4"] { background: linear-gradient(120deg, #e0c3fc, #8ec5fc); } [data-cover="g5"] { background: linear-gradient(120deg, #fccb90, #d57eeb); } [data-cover="g6"] { background: linear-gradient(120deg, #434343, #000000); } [data-cover="g7"] { background: linear-gradient(120deg, #ff9a9e, #fecfef); } [data-cover="g8"] { background: linear-gradient(120deg, #2b5876, #4e4376); } .cover-grid { display: grid; grid-template-columns: repeat(4, 64px); gap: 8px; padding: 10px; } .cover-swatch { height: 40px; border-radius: 6px; } .cover-swatch:hover { outline: 2px solid var(--accent); } .page-head, .blocks, .row-props, .db-host, .page-tail { width: min(var(--content-w), calc(100% - 96px)); margin: 0 auto; } #page.full-width .page-head, #page.full-width .blocks, #page.full-width .row-props, #page.full-width .page-tail { width: calc(100% - 192px); } #page.is-db .page-head, #page.is-db .db-host { width: calc(100% - 192px); max-width: 1400px; } .page-head { padding-top: 64px; position: relative; } .page-head.has-cover { padding-top: 24px; } .page-head.has-cover.has-icon { padding-top: 0; } .page-icon { font-size: 72px; line-height: 1; padding: 4px; border-radius: 8px; margin-bottom: 4px; } .page-head.has-cover .page-icon { margin-top: -42px; position: relative; } .page-icon:hover { background: var(--hover); } .page-ctrls { display: flex; gap: 4px; height: 30px; opacity: 0; transition: opacity .15s; margin-bottom: 4px; } .page-head:hover .page-ctrls, .page-ctrls:focus-within { opacity: 1; } .ghost-btn { font-size: 14px; color: var(--text-faint); padding: 4px 8px; border-radius: 5px; } .ghost-btn:hover { background: var(--hover); color: var(--text-muted); } .page-title { font-size: 2.5em; font-weight: 700; line-height: 1.2; outline: none; padding: 3px 2px; margin-bottom: 8px; word-break: break-word; } .page-title:empty::before { content: attr(data-placeholder); color: var(--text-faint); opacity: .6; } /* ============ 區塊 ============ */ .blocks { padding-top: 4px; } .blk { position: relative; padding-left: calc(var(--indent, 0) * 26px); margin: 1px 0; } .blk.hidden { display: none; } .blk-gutter { position: absolute; top: 0; left: calc(var(--indent, 0) * 26px - 50px); width: 48px; height: 30px; display: flex; align-items: center; justify-content: flex-end; gap: 0; opacity: 0; transition: opacity .1s; } .blk:hover > .blk-gutter, .blk.focused > .blk-gutter { opacity: 1; } .blk.focused:not(:hover) > .blk-gutter { opacity: 0; } .blk[data-type="h1"] > .blk-gutter { top: 22px; height: 40px; } .blk[data-type="h2"] > .blk-gutter { top: 14px; height: 36px; } .blk[data-type="h3"] > .blk-gutter { top: 8px; height: 32px; } .g-btn { width: 22px; height: 24px; border-radius: 4px; color: var(--text-faint); font-size: 15px; display: grid; place-items: center; letter-spacing: -3px; } .g-handle { cursor: grab; font-size: 13px; padding-right: 3px; } .g-btn:hover { background: var(--hover-strong); color: var(--text-muted); } .blk-body { display: flex; align-items: flex-start; min-height: 30px; border-radius: 4px; } .blk.selected > .blk-body { background: var(--accent-soft); } .blk.dragging { opacity: .35; } .blk-content { flex: 1; min-width: 0; outline: none; padding: 3px 2px; white-space: pre-wrap; word-break: break-word; caret-color: var(--text); } .blk-content:empty::before { content: attr(data-placeholder); color: var(--text-faint); pointer-events: none; } .blk[data-type="text"] .blk-content:empty:not(:focus)::before { content: ""; } .blocks > .blk:only-child[data-type="text"] .blk-content:empty::before { content: attr(data-placeholder); } .blk-content code, .tcell code { font-family: var(--mono); font-size: 85%; background: var(--hover-strong); color: var(--inline-code); padding: .15em .35em; border-radius: 4px; } .blk-content a, .tcell a, .page-title a { color: inherit; text-decoration: underline; text-decoration-color: var(--text-faint); text-underline-offset: 3px; cursor: pointer; } .blk-content a:hover, .tcell a:hover { text-decoration-color: var(--text); } .blk[data-type="h1"] { margin-top: 28px; } .blk[data-type="h2"] { margin-top: 18px; } .blk[data-type="h3"] { margin-top: 10px; } .blk[data-type="h1"] .blk-content { font-size: 1.875em; font-weight: 700; line-height: 1.3; } .blk[data-type="h2"] .blk-content { font-size: 1.5em; font-weight: 650; line-height: 1.3; } .blk[data-type="h3"] .blk-content { font-size: 1.25em; font-weight: 600; line-height: 1.3; } .marker { flex: none; width: 24px; text-align: center; padding-top: 3px; user-select: none; } .bullet-marker { font-size: 1.25em; line-height: 1.2; } .num-marker { width: auto; min-width: 24px; padding-right: 4px; text-align: right; } .todo-box { flex: none; width: 16px; height: 16px; margin: 6px 8px 0 4px; border: 1.5px solid var(--text-muted); border-radius: 3px; display: grid; place-items: center; font-size: 12px; line-height: 1; color: #fff; } .todo-box:hover { background: var(--hover-strong); } .todo-box.on { background: var(--accent); border-color: var(--accent); } .blk.checked .blk-content { text-decoration: line-through; color: var(--text-faint); } .toggle-arrow { flex: none; width: 24px; height: 24px; margin-top: 3px; border-radius: 4px; font-size: 11px; display: grid; place-items: center; transition: transform .12s; color: var(--text); } .toggle-arrow:hover { background: var(--hover-strong); } .toggle-arrow.open { transform: rotate(90deg); } .toggle-wrap { flex: 1; min-width: 0; } .toggle-empty { display: none; font-size: 14px; color: var(--text-faint); padding: 2px 2px 4px 0; cursor: pointer; } .toggle-empty:hover { color: var(--text-muted); } .blk[data-type="toggle"]:not(.toggle-has-children) .toggle-arrow.open + .toggle-wrap .toggle-empty { display: block; } .blk[data-type="quote"] .blk-body { border-left: 3px solid currentColor; padding-left: 12px; margin: 4px 0; } .blk[data-type="quote"] .blk-content { font-size: 1.05em; } .blk[data-type="callout"] .blk-body { background: var(--b-gray); padding: 12px 14px 12px 10px; border-radius: 6px; margin: 4px 0; gap: 8px; } .callout-icon { flex: none; width: 28px; height: 28px; font-size: 20px; border-radius: 4px; } .blk[data-type="notes"] .blk-body { flex-direction: column; align-items: stretch; gap: 2px; background: var(--b-yellow); border-left: 3px solid #d9a400; padding: 8px 12px; border-radius: 4px; margin: 4px 0; } .blk[data-type="notes"] .blk-content { font-size: .95em; } .notes-label { font-size: 12px; color: var(--muted, #888); user-select: none; letter-spacing: .02em; } .callout-icon:hover { background: var(--hover-strong); } .blk[data-type="code"] .blk-body { flex-direction: column; background: var(--code-bg); border-radius: 6px; margin: 4px 0; position: relative; } .code-head { display: flex; justify-content: space-between; width: 100%; padding: 6px 10px 0; opacity: .0; transition: opacity .15s; } .blk[data-type="code"]:hover .code-head, .blk[data-type="code"].focused .code-head { opacity: 1; } .code-lang { background: transparent; border: 0; font-size: 12px; color: var(--text-muted); border-radius: 4px; padding: 2px 4px; cursor: pointer; } .code-lang:hover { background: var(--hover-strong); } .code-lang option { background: var(--bg-elev); } .code-copy { font-size: 12px; color: var(--text-muted); padding: 2px 8px; border-radius: 4px; } .code-copy:hover { background: var(--hover-strong); } .code-content { width: 100%; margin: 0; padding: 4px 18px 18px !important; font-family: var(--mono); font-size: .875em; line-height: 1.6; tab-size: 2; overflow-x: auto; white-space: pre; } /* 程式碼語法上色（highlight.js 類別；淺色 / 深色兩組） */ :root { --hl-kw: #d73a49; --hl-str: #22863a; --hl-num: #b45309; --hl-com: #8b8b86; --hl-fn: #6f42c1; --hl-type: #b45309; --hl-attr: #005cc5; --hl-tag: #22863a; --hl-var: #e36209; --hl-meta: #6a737d; --hl-del: #b31d28; --hl-del-bg: #ffeef0; --hl-add: #22863a; --hl-add-bg: #f0fff4; } :root[data-theme="dark"] { --hl-kw: #ff7b72; --hl-str: #a5d6a7; --hl-num: #f2b36b; --hl-com: #7d7d7d; --hl-fn: #d2a8ff; --hl-type: #ffa657; --hl-attr: #79c0ff; --hl-tag: #7ee787; --hl-var: #ffa657; --hl-meta: #8b949e; --hl-del: #ffa198; --hl-del-bg: rgba(248, 81, 73, .15); --hl-add: #7ee787; --hl-add-bg: rgba(46, 160, 67, .15); } .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-template-tag, .hljs-type.hljs-keyword { color: var(--hl-kw); } .hljs-string, .hljs-regexp, .hljs-char.escape_, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-template-variable { color: var(--hl-str); } .hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link { color: var(--hl-num); } .hljs-comment, .hljs-quote { color: var(--hl-com); font-style: italic; } .hljs-title, .hljs-title.function_, .hljs-title.class_, .hljs-section, .hljs-selector-id, .hljs-selector-class { color: var(--hl-fn); } .hljs-built_in, .hljs-type, .hljs-class .hljs-title, .hljs-title.class_.inherited__ { color: var(--hl-type); } .hljs-attr, .hljs-attribute, .hljs-property, .hljs-params .hljs-variable, .hljs-operator { color: var(--hl-attr); } .hljs-name, .hljs-tag { color: var(--hl-tag); } .hljs-variable, .hljs-variable.language_, .hljs-subst { color: var(--hl-var); } .hljs-meta, .hljs-meta .hljs-keyword { color: var(--hl-meta); } .hljs-meta .hljs-string { color: var(--hl-str); } .hljs-deletion { color: var(--hl-del); background: var(--hl-del-bg); } .hljs-addition { color: var(--hl-add); background: var(--hl-add-bg); } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 600; } .divider { width: 100%; padding: 10px 0; cursor: pointer; outline: none; } .divider hr { border: 0; border-top: 1px solid var(--border); margin: 0; } .img-ph { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--bg-soft); border-radius: 6px; color: var(--text-muted); font-size: 14px; margin: 4px 0; text-align: left; } .img-ph:hover { background: var(--hover-strong); } .img-wrap { position: relative; max-width: 100%; margin: 6px 0; border-radius: 4px; } .img-wrap img { display: block; width: 100%; height: auto; border-radius: 4px; } .img-wrap.broken { min-height: 60px; background: var(--bg-soft); } .img-wrap.broken::after { content: "圖片無法載入"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--text-muted); } .img-resize { position: absolute; right: -6px; top: 50%; width: 8px; height: 48px; margin-top: -24px; border-radius: 4px; background: rgba(15,15,15,.6); border: 1px solid rgba(255,255,255,.9); cursor: ew-resize; opacity: 0; } .img-wrap:hover .img-resize { opacity: 1; } .blk.selected .img-wrap { outline: 3px solid var(--accent-soft); } .img-picker { display: flex; flex-direction: column; gap: 8px; padding: 12px; width: 320px; } .img-picker .or { text-align: center; color: var(--text-faint); font-size: 12px; } .page-link { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 4px; color: inherit; text-decoration: none; flex: 1; font-weight: 500; } .page-link:hover { background: var(--hover); } .pl-title { border-bottom: 1px solid var(--border); } .page-link.gone { color: var(--text-faint); } .page-tail { height: 120px; cursor: text; } /* 區塊顏色 */ [data-color="gray"], .blk[data-blk-color="gray"] .blk-content, .mi-icon[data-color="gray"] { color: var(--c-gray); } [data-color="brown"], .blk[data-blk-color="brown"] .blk-content, .mi-icon[data-color="brown"] { color: var(--c-brown); } [data-color="orange"], .blk[data-blk-color="orange"] .blk-content, .mi-icon[data-color="orange"] { color: var(--c-orange); } [data-color="yellow"], .blk[data-blk-color="yellow"] .blk-content, .mi-icon[data-color="yellow"] { color: var(--c-yellow); } [data-color="green"], .blk[data-blk-color="green"] .blk-content, .mi-icon[data-color="green"] { color: var(--c-green); } [data-color="blue"], .blk[data-blk-color="blue"] .blk-content, .mi-icon[data-color="blue"] { color: var(--c-blue); } [data-color="purple"], .blk[data-blk-color="purple"] .blk-content, .mi-icon[data-color="purple"] { color: var(--c-purple); } [data-color="pink"], .blk[data-blk-color="pink"] .blk-content, .mi-icon[data-color="pink"] { color: var(--c-pink); } [data-color="red"], .blk[data-blk-color="red"] .blk-content, .mi-icon[data-color="red"] { color: var(--c-red); } [data-bg="gray"], .blk[data-blk-color="gray-bg"] > .blk-body, .blk[data-type="callout"][data-blk-color="gray-bg"] .blk-body { background: var(--b-gray); } [data-bg="brown"], .blk[data-blk-color="brown-bg"] > .blk-body, .blk[data-type="callout"][data-blk-color="brown-bg"] .blk-body { background: var(--b-brown); } [data-bg="orange"], .blk[data-blk-color="orange-bg"] > .blk-body, .blk[data-type="callout"][data-blk-color="orange-bg"] .blk-body { background: var(--b-orange); } [data-bg="yellow"], .blk[data-blk-color="yellow-bg"] > .blk-body, .blk[data-type="callout"][data-blk-color="yellow-bg"] .blk-body { background: var(--b-yellow); } [data-bg="green"], .blk[data-blk-color="green-bg"] > .blk-body, .blk[data-type="callout"][data-blk-color="green-bg"] .blk-body { background: var(--b-green); } [data-bg="blue"], .blk[data-blk-color="blue-bg"] > .blk-body, .blk[data-type="callout"][data-blk-color="blue-bg"] .blk-body { background: var(--b-blue); } [data-bg="purple"], .blk[data-blk-color="purple-bg"] > .blk-body, .blk[data-type="callout"][data-blk-color="purple-bg"] .blk-body { background: var(--b-purple); } [data-bg="pink"], .blk[data-blk-color="pink-bg"] > .blk-body, .blk[data-type="callout"][data-blk-color="pink-bg"] .blk-body { background: var(--b-pink); } [data-bg="red"], .blk[data-blk-color="red-bg"] > .blk-body, .blk[data-type="callout"][data-blk-color="red-bg"] .blk-body { background: var(--b-red); } span[data-bg] { border-radius: 3px; padding: 0 2px; } .mi-icon[data-bg] { color: transparent; border-radius: 4px; width: 18px; height: 18px; border: 1px solid var(--border); } .mi-icon[data-bg]::before { content: "A"; color: var(--text); font-size: 12px; } .drop-line { position: fixed; height: 4px; background: var(--accent); opacity: .6; border-radius: 2px; pointer-events: none; z-index: 50; display: none; } /* ============ 浮層 / 選單 ============ */ #layer { position: fixed; inset: 0; pointer-events: none; z-index: 250; } /* 選單要蓋在對話框（200）之上，但在提示訊息（300）之下 */ .popover { position: fixed; pointer-events: auto; background: var(--bg-elev); border-radius: 8px; box-shadow: var(--shadow); max-height: 70vh; overflow-y: auto; font-size: 14px; animation: pop .12s ease-out; } @keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .menu { padding: 6px; min-width: 220px; max-width: 320px; } .menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border-radius: 5px; text-align: left; min-height: 30px; } .menu-item.active, .menu-item:hover { background: var(--hover-strong); } .menu-item.danger { color: var(--danger); } .mi-icon { width: 20px; text-align: center; flex: none; display: inline-grid; place-items: center; } .mi-label { flex: 1; } .mi-hint { color: var(--text-faint); font-size: 12px; } .mi-check { color: var(--accent); margin-left: auto; } .menu-sep { height: 1px; background: var(--border); margin: 5px -6px; } .menu-header { font-size: 12px; color: var(--text-faint); padding: 6px 8px 4px; font-weight: 500; } .menu-input { padding: 4px; } .slash-pop { width: 320px; max-height: 380px; } .slash-list { padding: 6px; } .slash-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 6px; border-radius: 5px; text-align: left; } .slash-item.active { background: var(--hover-strong); } .slash-icon { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 6px; display: grid; place-items: center; background: var(--bg); font-size: 15px; font-weight: 600; flex: none; } .slash-text { display: flex; flex-direction: column; min-width: 0; } .slash-label { font-size: 14px; } .slash-desc { font-size: 12px; color: var(--text-muted); } .slash-empty { padding: 8px 10px; color: var(--text-muted); } #fmtbar { position: fixed; z-index: 120; display: none; align-items: center; gap: 1px; padding: 3px; background: var(--bg-elev); border-radius: 7px; box-shadow: var(--shadow); max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; } #fmtbar.show { display: flex; } .tb-btn { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 4px; font-size: 14px; display: grid; place-items: center; } .tb-btn.wide { padding: 0 8px; color: var(--text-muted); white-space: nowrap; } .tb-btn:hover { background: var(--hover-strong); } .tb-btn.on { color: var(--accent); } .tb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; } .tb-a { text-decoration: underline; font-weight: 600; } .emoji-pop { width: 360px; } .emoji-head { display: flex; gap: 6px; padding: 10px 10px 6px; position: sticky; top: 0; background: var(--bg-elev); } .emoji-head .input { flex: 1; } .emoji-grid { display: grid; grid-template-columns: repeat(10, 1fr); padding: 0 8px 10px; } .emoji-group { grid-column: 1 / -1; font-size: 12px; color: var(--text-faint); padding: 8px 2px 2px; } .emoji { font-size: 22px; height: 32px; border-radius: 5px; } .emoji:hover { background: var(--hover-strong); } #toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; } .toast { background: #2f2f2f; color: #fff; padding: 8px 10px 8px 14px; border-radius: 6px; font-size: 14px; display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow); animation: pop .15s; transition: opacity .3s; } .toast.out { opacity: 0; } .toast-btn { color: #7cc4ff; font-weight: 500; padding: 2px 6px; border-radius: 4px; } .toast-btn:hover { background: rgba(255,255,255,.1); } .modal-wrap { position: fixed; inset: 0; background: rgba(15,15,15,.45); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; animation: fade .12s; } @keyframes fade { from { opacity: 0; } } .modal { background: var(--bg-elev); border-radius: 10px; box-shadow: var(--shadow); width: 100%; max-width: 640px; max-height: 76vh; display: flex; flex-direction: column; overflow: hidden; } .modal.small { max-width: 420px; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; } .modal-title { font-weight: 600; } .confirm { padding: 20px; display: flex; flex-direction: column; gap: 14px; } .confirm p { margin: 0; } .btn-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .btn-row.left { justify-content: flex-start; } .btn { border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; font-size: 14px; background: var(--bg-elev); white-space: nowrap; } .btn:hover { background: var(--hover); } .btn.sm { padding: 3px 8px; font-size: 13px; } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover { filter: brightness(1.08); } .btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); } .btn.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .input { width: 100%; border: 1px solid var(--border); background: var(--bg-soft); border-radius: 6px; padding: 7px 10px; outline: none; font-size: 14px; } .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input.sm { padding: 5px 8px; } .settings { padding: 4px 20px 20px; overflow-y: auto; } .set-sec { padding: 12px 0; border-bottom: 1px solid var(--border); } .set-sec:last-child { border: 0; } .set-sec h3 { font-size: 14px; margin: 0 0 10px; } .seg { display: inline-flex; background: var(--bg-soft); border-radius: 7px; padding: 3px; gap: 2px; } .seg-btn { padding: 4px 14px; border-radius: 5px; font-size: 14px; } .seg-btn.on { background: var(--bg-elev); box-shadow: 0 1px 2px rgba(0,0,0,.15); } .kbd-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 13px; } .kbd-row { display: flex; gap: 10px; align-items: center; } .kbd-row kbd { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; color: var(--text-muted); font-size: 12px; white-space: nowrap; } .info-list { padding: 8px 20px 20px; } .info-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .trash { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; overflow: hidden; } .trash-list { overflow-y: auto; } .trash-item { display: flex; align-items: center; gap: 4px; border-radius: 6px; } .trash-item:hover { background: var(--hover); } .trash-open { flex: 1; display: flex; flex-direction: column; text-align: left; padding: 6px 8px; min-width: 0; } .trash-open small { color: var(--text-faint); font-size: 12px; } .empty-note { color: var(--text-muted); text-align: center; padding: 30px 10px; font-size: 14px; } .search-modal { max-width: 620px; } .search-box { display: flex; flex-direction: column; min-height: 0; } .search-input { border: 0; border-bottom: 1px solid var(--border); padding: 16px 18px; font-size: 17px; outline: none; background: transparent; } .search-results { overflow-y: auto; padding: 6px; max-height: 56vh; } .search-item { display: flex; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 6px; text-align: left; align-items: flex-start; } .search-item.active { background: var(--hover-strong); } .si-icon { font-size: 18px; width: 24px; text-align: center; flex: none; } .si-main { display: flex; flex-direction: column; min-width: 0; } .si-title { font-weight: 500; } .si-path, .si-snippet { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .empty-page { text-align: center; padding: 18vh 20px; color: var(--text-muted); } .empty-emoji { font-size: 56px; } /* ============ 資料庫 ============ */ .db-host { padding-bottom: 40px; } .db-toolbar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); margin-bottom: 4px; gap: 10px; flex-wrap: wrap; } .db-tabs { display: flex; gap: 2px; } .db-tab { padding: 6px 10px; font-size: 14px; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .db-tab.on { color: var(--text); border-color: var(--text); font-weight: 500; } .db-tab:hover { color: var(--text); } .db-tools { display: flex; gap: 6px; align-items: center; padding: 4px 0; flex-wrap: wrap; } .db-search { border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 3px 8px; font-size: 13px; width: 150px; outline: none; } .db-search:hover { background: var(--hover); } .db-search:focus { border-color: var(--border); background: var(--bg-elev); } .db-scroll { overflow-x: auto; } .db-table { border-collapse: collapse; font-size: .875em; table-layout: fixed; min-width: 100%; } .db-table th { text-align: left; font-weight: 400; color: var(--text-muted); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); position: relative; height: 34px; padding: 0; } .db-table th:last-child, .db-table td:last-child { border-right: 0; } .db-table .th-act, .db-table .td-act { width: 30px; border-right: 0 !important; border-bottom-color: transparent; } .db-table .th-add { width: auto; min-width: 60px; } .th-btn { width: 100%; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 8px; text-align: left; white-space: nowrap; overflow: hidden; } .th-btn:hover { background: var(--hover); } .th-icon { color: var(--text-faint); font-size: 12px; min-width: 16px; } .col-resize { position: absolute; right: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; } .col-resize:hover { background: var(--accent); opacity: .5; } .db-table td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0; height: 36px; vertical-align: middle; } .db-table tr:hover td:not(.td-act) { background: var(--hover); } .td-act { text-align: center; } .row-act-btn { opacity: 0; color: var(--text-faint); font-size: 12px; letter-spacing: -2px; width: 22px; height: 24px; border-radius: 4px; } tr:hover .row-act-btn { opacity: 1; } .row-act-btn:hover { background: var(--hover-strong); } .cell-title { display: flex; align-items: center; gap: 6px; padding: 0 8px; min-height: 36px; position: relative; } .cell-title-icon { font-size: 14px; } .cell-title-text { flex: 1; outline: none; font-weight: 500; min-width: 20px; padding: 6px 0; word-break: break-word; } .cell-title-text:empty::before { content: attr(data-placeholder); color: var(--text-faint); font-weight: 400; } .open-btn { display: none; font-size: 12px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; background: var(--bg-elev); white-space: nowrap; } tr:hover .open-btn { display: block; } .open-btn:hover { background: var(--hover-strong); } .cell-input { width: 100%; height: 36px; border: 0; background: transparent; padding: 0 8px; outline: none; font-size: 14px; } .cell-input:focus { box-shadow: inset 0 0 0 2px var(--accent-soft); background: var(--bg-elev); } .cell-input[type="number"] { text-align: right; } .cell-url { display: flex; align-items: center; } .url-go { padding: 0 8px; color: var(--text-muted); text-decoration: none; } .cell-check { display: flex; align-items: center; height: 36px; padding: 0 10px; cursor: pointer; } .cell-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .cell-select { width: 100%; min-height: 36px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px 8px; text-align: left; } .pill { display: inline-flex; align-items: center; padding: 0 7px; border-radius: 4px; font-size: 13px; line-height: 21px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: var(--p-gray); color: var(--text); } .pill[data-c="none"] { background: var(--p-none); } .pill[data-c="gray"] { background: var(--p-gray); } .pill[data-c="brown"] { background: var(--p-brown); } .pill[data-c="orange"] { background: var(--p-orange); } .pill[data-c="yellow"] { background: var(--p-yellow); } .pill[data-c="green"] { background: var(--p-green); } .pill[data-c="blue"] { background: var(--p-blue); } .pill[data-c="purple"] { background: var(--p-purple); } .pill[data-c="pink"] { background: var(--p-pink); } .pill[data-c="red"] { background: var(--p-red); } .db-add-row { display: block; width: 100%; text-align: left; padding: 6px 38px; color: var(--text-faint); font-size: 14px; border-bottom: 1px solid var(--border); } .db-add-row:hover { background: var(--hover); color: var(--text-muted); } .db-count { font-size: 12px; color: var(--text-faint); padding: 8px 4px; } .opt-picker { width: 280px; } .opt-head { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-elev); } .opt-list { padding: 4px; max-height: 300px; overflow-y: auto; } .opt-row { display: flex; align-items: center; border-radius: 5px; } .opt-row:hover { background: var(--hover); } .opt-pick { flex: 1; display: flex; align-items: center; gap: 6px; padding: 4px 6px; text-align: left; } .opt-create { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px; border-radius: 5px; font-size: 13px; } .opt-create:hover { background: var(--hover); } .opt-edit { padding: 10px; width: 220px; display: flex; flex-direction: column; gap: 10px; } .opt-colors { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; } .color-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); } .color-dot.on { outline: 2px solid var(--accent); outline-offset: 1px; } .color-dot[data-c="gray"] { background: var(--p-gray); } .color-dot[data-c="brown"] { background: var(--p-brown); } .color-dot[data-c="orange"] { background: var(--p-orange); } .color-dot[data-c="yellow"] { background: var(--p-yellow); } .color-dot[data-c="green"] { background: var(--p-green); } .color-dot[data-c="blue"] { background: var(--p-blue); } .color-dot[data-c="purple"] { background: var(--p-purple); } .color-dot[data-c="pink"] { background: var(--p-pink); } .color-dot[data-c="red"] { background: var(--p-red); } .board { display: flex; gap: 14px; overflow-x: auto; padding: 8px 0 20px; align-items: flex-start; } .board-col { flex: none; width: 260px; border-radius: 8px; padding: 6px; transition: background .1s; } .board-col.drag-over { background: var(--accent-soft); } .board-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; font-size: 14px; } .board-cards { display: flex; flex-direction: column; gap: 8px; min-height: 10px; } .card { background: var(--bg-elev); border-radius: 6px; box-shadow: 0 0 0 1px var(--border), 0 2px 4px rgba(15,15,15,.06); padding: 10px; cursor: pointer; font-size: 14px; } :root[data-theme="dark"] .card { background: var(--bg-soft); } .card:hover { background: var(--hover); } .card.dragging { opacity: .4; } .card-title { font-weight: 500; word-break: break-word; } .card-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .card-prop { font-size: 12px; color: var(--text-muted); } .board-add { width: 100%; text-align: left; padding: 6px; color: var(--text-faint); font-size: 14px; border-radius: 6px; margin-top: 4px; } .board-add:hover { background: var(--hover); } .board-newcol { flex: none; padding: 8px 12px; color: var(--text-faint); font-size: 14px; border-radius: 6px; white-space: nowrap; } .board-newcol:hover { background: var(--hover); } .row-props { padding: 4px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; font-size: .875em; } .rp-row { display: flex; align-items: center; min-height: 36px; } .rp-name { width: 160px; flex: none; display: flex; align-items: center; gap: 8px; color: var(--text-muted); padding: 0 6px; } .rp-val { flex: 1; min-width: 0; border-radius: 5px; } .rp-val:hover { background: var(--hover); } .rp-foot { padding-top: 4px; } /* ============ 響應式 ============ */ @media (max-width: 760px) { #sidebar { position: absolute; z-index: 60; top: env(safe-area-inset-top, 0px); height: calc(100% - env(safe-area-inset-top, 0px)); box-shadow: var(--shadow); } .page-head, .blocks, .row-props, .db-host, .page-tail, #page.full-width .page-head, #page.full-width .blocks, #page.is-db .page-head, #page.is-db .db-host { width: calc(100% - 56px); } .page-title { font-size: 1.9em; } .blk-gutter { display: none; } .kbd-list { grid-template-columns: 1fr; } .rp-name { width: 110px; } } @media print { #sidebar, #topbar, .blk-gutter, .page-ctrls, .page-tail { display: none !important; } body { overflow: visible; } #scroller { overflow: visible; } } .page-ctrls:empty { display: none; } body:not(.ready) #sidebar { transition: none; } .tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 3px; } @media (max-width: 760px) { body.sb-collapsed #sidebar { box-shadow: none; } } /* ============ 伺服器模式：驗證畫面 ============ */ body.auth-open #app { visibility: hidden; } #authScreen { position: fixed; inset: 0; z-index: 400; background: var(--bg-sidebar); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 24px; overflow-y: auto; } .auth-card { width: 100%; max-width: 380px; background: var(--bg-elev); border-radius: 14px; box-shadow: var(--shadow); padding: 28px 28px 22px; } .auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; margin-bottom: 18px; } .ws-logo.lg { width: 34px; height: 34px; font-size: 18px; border-radius: 8px; } .auth-form { display: flex; flex-direction: column; gap: 12px; } .auth-form h1 { font-size: 22px; margin: 0 0 4px; } .auth-form.in-modal { padding: 4px 20px 20px; } .auth-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-muted); } .auth-field .input { font-size: 15px; padding: 9px 11px; color: var(--text); } .code-input { letter-spacing: .3em; font-family: var(--mono); } .code-input::placeholder { letter-spacing: normal; font-family: var(--font); } .auth-err { color: var(--danger); font-size: 13px; min-height: 1em; } .auth-err:empty { display: none; } .btn.wide { width: 100%; padding: 10px; font-size: 15px; } .btn:disabled { opacity: .6; cursor: default; } .auth-note { font-size: 12px; color: var(--text-muted); margin: 14px 0 0; line-height: 1.6; } .auth-steps { margin: 0; padding-left: 20px; font-size: 13px; color: var(--text-muted); line-height: 1.7; } .qr { width: 200px; height: 200px; margin: 4px auto; background: #fff; border-radius: 8px; padding: 4px; } .qr svg { width: 100%; height: 100%; display: block; } .secret-row { text-align: center; font-size: 12px; } .secret { font-family: var(--mono); font-size: 12px; background: var(--bg-soft); padding: 2px 6px; border-radius: 4px; word-break: break-all; user-select: all; } /* 權限 / 唯讀 */ .access-badge { margin-left: 8px; font-size: 12px; color: var(--text-muted); background: var(--bg-soft); border-radius: 10px; padding: 1px 8px; white-space: nowrap; cursor: default; } body.server-mode .access-badge { cursor: pointer; } .tree-badge { font-size: 11px; opacity: .75; flex: none; margin-left: 2px; } .banner.info { background: var(--b-blue); color: var(--text); } #page.readonly .blk-gutter, #page.readonly .page-ctrls, #page.readonly .page-tail, #page.readonly .cover-acts, #page.readonly .img-resize, #page.readonly .code-lang, #page.readonly .toggle-empty { display: none !important; } #page.readonly .todo-box { cursor: default; } .db-ro .db-add-row, .db-ro .th-add, .db-ro .board-add, .db-ro .board-newcol, .db-ro .row-act-btn, .db-ro .col-resize, .db-ro .rp-foot { display: none !important; } .db-ro .th-btn:disabled, .db-ro .cell-select:disabled { opacity: 1; cursor: default; color: inherit; } .db-ro input:disabled { opacity: 1; color: inherit; background: transparent; } /* 成員管理 */ .users-modal { max-width: 640px; } .users { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } .add-user { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; } .add-user .ucode { grid-column: 1 / span 2; } @media (max-width: 560px) { .add-user .ucode { grid-column: auto; } } .add-user input[hidden] { display: none; } .user-list { display: flex; flex-direction: column; } .user-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .user-row.disabled { opacity: .55; } .user-main { flex: 1; min-width: 180px; display: flex; flex-direction: column; } .user-acts { display: flex; gap: 4px; flex-wrap: wrap; } @media (max-width: 560px) { .add-user { grid-template-columns: 1fr; } } /* ============ 即時協作：他人游標 / 在線成員 ============ */ #page { position: relative; } #cursorLayer { position: absolute; inset: 0; pointer-events: none; z-index: 5; } .rcaret { position: absolute; width: 2px; border-radius: 1px; transition: left .08s linear, top .08s linear; } .rcaret::before { content: ""; position: absolute; top: -3px; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: inherit; } .rname { position: absolute; bottom: 100%; left: -1px; margin-bottom: 3px; color: #fff; font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 4px 4px 4px 0; white-space: nowrap; font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.2); } .rsel { position: absolute; opacity: .22; border-radius: 2px; } .blk.remote-editing > .blk-body { box-shadow: -3px 0 0 -1px var(--remote); } #presenceBar { display: flex; align-items: center; margin-right: 6px; } .avatar { width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; border: 2px solid var(--bg); margin-left: -6px; cursor: default; } .avatar:first-child { margin-left: 0; } .presence-dots { display: inline-flex; gap: 2px; margin-right: 4px; flex: none; } .pdot { width: 7px; height: 7px; border-radius: 50%; } body.rt-offline #topbar { box-shadow: inset 0 -2px 0 var(--danger); } /* ============ 匯入 ============ */ #dropOverlay { position: fixed; inset: 0; z-index: 500; background: rgba(35, 131, 226, .12); border: 3px dashed var(--accent); display: grid; place-items: center; pointer-events: none; } .drop-card { background: var(--bg-elev); border-radius: 12px; box-shadow: var(--shadow); padding: 24px 32px; text-align: center; display: flex; flex-direction: column; gap: 6px; font-size: 16px; } .drop-card small { color: var(--text-muted); font-size: 12px; } .drop-icon { font-size: 32px; color: var(--accent); } .progress-toast { background: var(--accent); } /* ============ 多區塊選取 / 拖曳 / 區塊連結 ============ */ #selectBand { position: fixed; z-index: 90; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 2px; pointer-events: none; } body.block-selecting, body.block-selecting * { user-select: none !important; -webkit-user-select: none !important; cursor: default; } .blk.selected > .blk-body { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); } .blk.drop-into > .blk-body { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); } .drag-ghost { position: fixed; top: -100px; left: -100px; background: var(--accent); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 13px; } .blk.flash > .blk-body { animation: flash 2s ease-out; } @keyframes flash { 0%, 30% { background: rgba(255, 212, 0, .45); } 100% { background: transparent; } } .blk-content a { cursor: pointer; } .blk-content a[href^="#"], .tcell a[href^="#"] { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .blk-content a[href^="#"]::before, .tcell a[href^="#"]::before { content: "↪ "; font-size: .85em; opacity: .8; } .blk-content a[href^="#"]:hover, .tcell a[href^="#"]:hover { background: var(--accent-soft); border-radius: 3px; } .move-picker { width: 320px; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .move-list { max-height: 300px; overflow-y: auto; } .move-list .mi-hint { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============ 鎖定 / 編輯時間 ============ */ #editedAgo { font-size: 12px; color: var(--text-faint); margin-right: 4px; white-space: nowrap; cursor: default; } @media (max-width: 760px) { #editedAgo { display: none; } } .lock-badge { margin-left: 8px; font-size: 12px; color: var(--text-muted); background: var(--bg-soft); border-radius: 10px; padding: 1px 8px; white-space: nowrap; } .lock-badge:hover { background: var(--hover-strong); color: var(--text); } .print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; visibility: hidden; } /* ============ 展示模式 ============ */ #present { position: fixed; inset: 0; z-index: 1000; background: #111; outline: none; cursor: default; overflow: hidden; } .slide-stage { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; transform-origin: center; background: #fff; box-shadow: 0 10px 60px rgba(0,0,0,.5); border-radius: 4px; overflow: hidden; } :root[data-theme="dark"] .slide-stage { background: #191919; } .slide-inner { position: absolute; inset: 0; padding: 64px 88px; overflow-x: hidden; overflow-y: auto; font-size: 30px; transition: opacity .25s, transform .25s; } .slide-inner.in-right { opacity: 0; transform: translateX(30px); } .slide-inner.in-left { opacity: 0; transform: translateX(-30px); } .slide-inner .b.h1:first-child, .slide-inner .b.h2:first-child, .slide-inner .b.h3:first-child { margin-top: 0; } .slide-inner .b.h1 { font-size: 1.9em; } .slide-inner .b.h2 { font-size: 1.55em; } .slide-inner .b.h3 { font-size: 1.25em; } .slide-inner .img img { max-height: 520px; object-fit: contain; } .slide-inner.is-title { display: flex; align-items: center; justify-content: center; text-align: center; } .slide-title-wrap { max-width: 1000px; } .slide-icon { font-size: 110px; line-height: 1.1; } .slide-title { font-size: 76px; line-height: 1.15; margin: 20px 0 16px; } .slide-sub { font-size: 24px; color: var(--m); } .slide-stage.cover .slide-inner { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); } .slide-stage.cover .slide-sub { color: rgba(255,255,255,.85); } .slide-inner.scroll { overflow-y: auto; } .slide-stage.overflow::after { content: "內容較多，可用滑鼠滾輪捲動"; position: absolute; right: 12px; bottom: 8px; font-size: 12px; color: #999; pointer-events: none; } .pres-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.08); z-index: 2; } .pres-bar { height: 100%; background: #2383e2; transition: width .25s; } .pres-controls { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; background: rgba(30,30,30,.85); color: #eee; border-radius: 10px; padding: 4px 8px; opacity: 0; transition: opacity .3s; z-index: 3; font-size: 14px; } #present.show-ui .pres-controls, .pres-controls:hover { opacity: 1; } .pres-btn { color: #eee; width: 34px; height: 32px; border-radius: 6px; font-size: 20px; } .pres-btn:hover:not(:disabled) { background: rgba(255,255,255,.15); } .pres-btn:disabled { opacity: .3; cursor: default; } .pres-count { min-width: 64px; height: 32px; padding: 0 6px; text-align: center; font-variant-numeric: tabular-nums; color: inherit; font-size: 14px; border-radius: 6px; } .pres-count:hover { background: rgba(255,255,255,.15); } #present.jumping .pres-controls { opacity: 1; } #present.jumping, #present.jumping * { cursor: default; } .pres-jump { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 5; width: min(440px, calc(100vw - 32px)); background: rgba(30,30,30,.96); color: #eee; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; max-height: min(60vh, 520px); overflow: hidden; font-size: 14px; } .pj-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.12); } .pj-input { width: 64px; height: 32px; text-align: center; font-size: 16px; background: #111; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; font-variant-numeric: tabular-nums; } .pj-input:focus { outline: none; border-color: #2383e2; } .pj-input.bad { border-color: #e03e3e; animation: pj-shake .3s; } @keyframes pj-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .pj-go { margin-left: auto; background: #2383e2; color: #fff; border-radius: 6px; padding: 5px 14px; } .pj-go:hover { background: #1b6fc2; } .pj-list { overflow-y: auto; padding: 6px; } .pj-item { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; padding: 6px 8px; border-radius: 6px; color: #ddd; } .pj-item:hover { background: rgba(255,255,255,.08); } .pj-item.sel { background: rgba(35,131,226,.45); color: #fff; } .pj-item.cur .pj-num::after { content: " ●"; color: #2383e2; font-size: 10px; } .pj-num { min-width: 34px; text-align: right; color: #999; font-variant-numeric: tabular-nums; flex: none; } .pj-item.sel .pj-num { color: #fff; } .pj-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pres-sep { width: 1px; height: 20px; background: rgba(255,255,255,.2); margin: 0 4px; } /* 放大鏡 */ .pres-btn.pres-mag { font-size: 16px; } .pres-btn.on { background: rgba(35,131,226,.55); } #present.magnifying, #present.magnifying .slide-stage, #present.magnifying .slide-stage * { cursor: none; } #present.magnifying .pres-controls, #present.magnifying .pres-controls * { cursor: default; } .mag-lens { position: absolute; left: 0; top: 0; border-radius: 50%; overflow: hidden; pointer-events: none; z-index: 4; background: #111; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 8px 40px rgba(0,0,0,.55); will-change: transform; } .mag-lens.off { display: none; } .mag-view { position: absolute; inset: 0; overflow: hidden; } .slide-stage.mag-clone { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; box-shadow: none; transition: none; } .slide-stage.mag-clone .slide-inner { transition: none; animation: none; } .mag-ph { background: repeating-linear-gradient(45deg, rgba(128,128,128,.12) 0 10px, rgba(128,128,128,.2) 10px 20px); border-radius: 6px; } .mag-cross { position: absolute; inset: 0; } .mag-cross::before, .mag-cross::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(226,35,35,.75); box-shadow: 0 0 0 1px rgba(255,255,255,.6); } .mag-cross::before { width: 22px; height: 2px; transform: translate(-50%, -50%); } .mag-cross::after { width: 2px; height: 22px; transform: translate(-50%, -50%); } .mag-label { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); background: rgba(0,0,0,.7); color: #fff; font-size: 14px; padding: 2px 10px; border-radius: 10px; opacity: 0; transition: opacity .25s; font-variant-numeric: tabular-nums; } .mag-label.show { opacity: 1; } @media (hover: none) { .pres-btn.pres-mag { display: none; } } body.presenting #toasts { z-index: 1100; } /* ============ 字體大小 / 行距（設定 → 外觀） ============ */ .cell-input { font-size: 1em; } /* ============ 手機與觸控螢幕 ============ */ /* 沒有滑鼠懸停的裝置：原本「滑鼠移上才出現」的按鈕改為常駐 */ @media (hover: none) { .tree-row .row-acts { display: flex; } .page-ctrls { opacity: .7; } .cover-acts { opacity: 1; } .blk[data-type="code"] .code-head { opacity: 1; } .row-act-btn, tr .open-btn { opacity: 1; display: inline-block; } .sb-label .icon-btn { opacity: 1; } .img-resize { opacity: 1; } /* 正在編輯的區塊顯示 ⋮⋮（點一下開啟區塊選單：刪除、轉換、上下移、移到頁面…） */ .blk-gutter { display: flex !important; left: calc(var(--indent, 0) * 26px - 30px); width: 28px; opacity: 0; pointer-events: none; } .blk.focused > .blk-gutter, .blk.selected > .blk-gutter { opacity: 1; pointer-events: auto; } .blk-gutter .g-plus { display: none; } .g-handle { width: 28px; height: 32px; font-size: 15px; } } @media (max-width: 760px), (pointer: coarse) { body { font-size: 16px; -webkit-text-size-adjust: 100%; } /* 輸入框 16px 以上：iPhone 點擊時不會自動放大畫面 */ input, select, textarea, .input, .cell-input, .db-search, .search-input { font-size: 16px !important; } /* 頂端列 */ #topbar { height: 52px; padding: 0 6px 0 8px; gap: 2px; } #topbar .icon-btn { width: 40px; height: 40px; font-size: 19px; } #breadcrumb { font-size: 15px; } .bc-item { padding: 6px 6px; } .avatar { width: 28px; height: 28px; } /* 側邊欄 */ #sidebar { font-size: 16px; --sb-w: min(86vw, 320px); } .sb-item { min-height: 44px; padding: 8px 10px; } .sb-ico { width: 24px; font-size: 17px; } .sb-label { font-size: 13px; height: 36px; } .tree-row { height: 44px; } .caret, .caret-spacer { width: 32px; height: 32px; font-size: 19px; } .tree-icon { width: 26px; font-size: 18px; } .icon-btn.sm { width: 34px; height: 34px; font-size: 17px; } .storage-info { font-size: 12px; } /* 頁面內容 */ #page { font-size: calc(17px * var(--fs, 1)); } .page-head { padding-top: 32px; } .page-head.has-cover { padding-top: 16px; } .cover { height: 22vh; min-height: 120px; } .page-icon { font-size: 56px; } .ghost-btn { font-size: 15px; padding: 8px 10px; } .blk-body { min-height: 36px; } .blk-content { padding: 5px 2px; } .todo-box { width: 22px; height: 22px; margin: 6px 10px 0 2px; font-size: 15px; } .toggle-arrow { width: 32px; height: 32px; font-size: 13px; margin-top: 1px; } .marker { width: 26px; padding-top: 5px; } .callout-icon { width: 34px; height: 34px; } .page-link { padding: 8px 4px; } .page-tail { height: 160px; } /* 選單、彈出視窗：加大點擊範圍 */ .popover { font-size: 16px; max-width: calc(100vw - 16px); } .menu { min-width: min(260px, calc(100vw - 16px)); } .menu-item { min-height: 46px; padding: 8px 10px; } .mi-icon { width: 24px; font-size: 17px; } .slash-pop { width: min(340px, calc(100vw - 16px)); max-height: 50vh; } .slash-item { padding: 6px; } .slash-label { font-size: 16px; } .slash-desc { font-size: 13px; } .emoji-pop { width: min(360px, calc(100vw - 16px)); } .emoji { height: 40px; font-size: 24px; } #fmtbar { padding: 4px; } .tb-btn { min-width: 40px; height: 40px; font-size: 16px; } .btn { min-height: 40px; padding: 8px 14px; font-size: 15px; } .btn.sm { min-height: 36px; padding: 6px 10px; font-size: 14px; } .toast { font-size: 15px; padding: 10px 12px 10px 16px; max-width: calc(100vw - 24px); } #toasts { bottom: max(16px, env(safe-area-inset-bottom)); } /* 對話框：幾乎全螢幕 */ .modal-wrap { padding: 4vh 8px 8px; } .modal { max-height: 92vh; } .modal-head { padding: 14px 14px 8px; } .settings { padding: 4px 14px 20px; } .seg-btn { padding: 8px 14px; font-size: 15px; } .search-item { padding: 12px 10px; } .si-title { font-size: 16px; } /* 資料庫 */ .db-tab { padding: 10px 12px; font-size: 15px; } .db-table td { height: 44px; } .cell-title { min-height: 44px; } .cell-check input { width: 22px; height: 22px; } .cell-select { min-height: 44px; } .th-btn { height: 40px; } .db-add-row, .board-add { padding: 12px 38px; font-size: 15px; } .board-col { width: 78vw; max-width: 300px; } .card { padding: 12px; font-size: 15px; } .rp-row { min-height: 44px; flex-wrap: wrap; } .rp-name { width: 100%; padding-top: 6px; } .rp-val { width: 100%; } /* 登入畫面 */ .auth-card { padding: 22px 18px 18px; } .auth-field .input { font-size: 16px; padding: 11px 12px; } /* 展示模式控制列 */ .pres-btn { width: 44px; height: 44px; } #present .pres-controls { opacity: 1; } } /* 小手機（寬度 < 400px）：左右邊界再縮小 */ @media (max-width: 400px) { .page-head, .blocks, .row-props, .db-host, .page-tail, #page.full-width .page-head, #page.full-width .blocks, #page.is-db .page-head, #page.is-db .db-host { width: calc(100% - 44px); } } /* 側邊欄開啟時的半透明遮罩（點一下關閉） */ @media (max-width: 760px) { body:not(.sb-collapsed) #main::before { content: ""; position: absolute; inset: 0; background: rgba(15,15,15,.35); z-index: 55; } } .set-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; } .set-label { min-width: 64px; font-size: 14px; color: var(--text-muted); } /* ---------- 手機編輯工具列（鍵盤上方，類似 Notion 手機版） ---------- */ #mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: none; align-items: center; gap: 2px; background: var(--bg-elev); border-top: 1px solid var(--border); box-shadow: 0 -2px 10px rgba(0,0,0,.06); padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)) 4px; -webkit-user-select: none; user-select: none; } #mobilebar.show { display: flex; } #mobilebar.kb { padding-bottom: 4px; } /* 鍵盤開著時不需要 Home 指示條的安全距離 */ #mobilebar .mb-scroll { flex: 1; display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #mobilebar .mb-scroll::-webkit-scrollbar { display: none; } #mobilebar .mb-scroll.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); } /* 右邊還有按鈕：淡出提示可滑動 */ #mobilebar .mb-btn { flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 19px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } #mobilebar .mb-btn:active { background: var(--hover-strong); } #mobilebar .mb-btn.primary { font-size: 24px; color: var(--accent); } #mobilebar .mb-btn[data-act="turn"] { font-size: 17px; font-weight: 600; } #mobilebar .mb-btn.done { border-left: 1px solid var(--border); border-radius: 0 8px 8px 0; font-size: 22px; } body.mobilebar-open #scroller { padding-bottom: 72px; } body.mobilebar-open #toasts { bottom: 70px; } .popover.mb-menu { min-width: 240px; max-width: calc(100vw - 16px); } .popover.mb-menu .menu-item { min-height: 46px; } /* ---------- 語言切換 ---------- */ .auth-lang { display: flex; justify-content: center; gap: 4px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); } .auth-lang-btn { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 6px; cursor: pointer; } .auth-lang-btn:hover { background: var(--hover); } .auth-lang-btn.on { color: var(--text); font-weight: 600; } /* ---------- 折疊標題 ---------- */ .blk.fold-heading .blk-body { align-items: flex-start; } .blk.fold-heading[data-type="h1"] .toggle-arrow { margin-top: 12px; } .blk.fold-heading[data-type="h2"] .toggle-arrow { margin-top: 8px; } .blk.fold-heading[data-type="h3"] .toggle-arrow { margin-top: 5px; } .blk.fold-heading:not(.toggle-has-children) .toggle-arrow.open + .toggle-wrap .toggle-empty { display: block; } /* ---------- 分欄 ---------- */ .blk[data-type="columns"] > .blk-body { display: block; min-height: 0; } .col-row { display: flex; gap: 48px; align-items: flex-start; } .blk[data-type="column"] { padding-left: 0; margin: 0; min-width: 0; position: relative; } .blk[data-type="column"] > .blk-gutter { display: none !important; } .blk[data-type="column"] > .blk-body { display: block; min-height: 30px; } .col-body { min-width: 0; } .blk[data-type="columns"]:hover > .blk-gutter { opacity: 0; } .blk[data-type="columns"]:hover:not(:has(.col-body .blk:hover)) > .blk-gutter { opacity: 1; } .blk[data-type="columns"].selected > .blk-body { background: var(--accent-soft); } .col-resizer { position: absolute; top: 0; bottom: 0; right: -27px; width: 6px; cursor: col-resize; border-radius: 3px; z-index: 2; } .col-resizer:hover, .col-resizer.on { background: var(--accent-soft); } #page.readonly .col-resizer { display: none; } .blk-col-fallback { flex: 1 1 0; min-width: 0; } /* ---------- 簡單表格 ---------- */ .tbl-wrap { position: relative; width: 100%; padding: 4px 26px 22px 0; } .tbl-scroll { overflow-x: auto; position: relative; padding: 12px 0 4px 12px; } .tcol-resize { position: absolute; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 3; border-radius: 3px; touch-action: none; } .tcol-resize:hover, .tcol-resize.on { background: var(--accent); opacity: .45; } body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; } .col-resize { touch-action: none; } .col-resize.on { background: var(--accent); opacity: .5; } @media (hover: none) { .tcol-resize { width: 16px; margin-left: -4px; } .tcol-resize::after { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border); border-radius: 1px; } } .stbl { border-collapse: collapse; font-size: .95em; table-layout: fixed; } .stbl .tcell { border: 1px solid var(--border); padding: 6px 9px; vertical-align: top; overflow: hidden; text-align: left; outline: none; line-height: 1.45; word-break: break-word; font-weight: 400; } .stbl.hrow tr:first-child .tcell, .stbl.hcol .tcell:first-child { background: var(--bg-soft); font-weight: 600; } .stbl .tcell:focus { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 2px; } .tbl-add { position: absolute; border: 0; border-radius: 4px; background: var(--hover); color: var(--text-muted); font-size: 14px; opacity: 0; transition: opacity .12s; cursor: pointer; } .tbl-add:hover { background: var(--hover-strong); color: var(--text); } .tbl-add-col { top: 4px; right: 2px; width: 20px; bottom: 22px; } .tbl-add-row { left: 0; right: 26px; bottom: 0; height: 18px; } .blk:hover .tbl-add, .blk.focused .tbl-add { opacity: 1; } #page.readonly .tbl-add { display: none; } /* ---------- 目錄 ---------- */ .toc { display: flex; flex-direction: column; padding: 4px 0; width: 100%; } .toc-item { color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; padding: 3px 4px; border-radius: 4px; line-height: 1.4; } .toc-item:hover { background: var(--hover); color: var(--text); } .toc-h2 { padding-left: 22px; } .toc-h3 { padding-left: 44px; } .toc-empty { color: var(--text-faint); font-size: .92em; padding: 4px; } /* ---------- 內嵌資料庫 ---------- */ .db-inline { width: 100%; margin: 6px 0 4px; min-width: 0; } .blocks .db-inline .db-host { width: 100% !important; margin: 0; padding-bottom: 6px; overflow-x: auto; } .dbi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .dbi-icon { font-size: 1.2em; } .dbi-title { font-size: 1.25em; font-weight: 700; outline: none; min-width: 2em; flex: 0 1 auto; } .dbi-title:empty::before { content: attr(data-placeholder); color: var(--text-faint); } .dbi-open { border: 0; background: transparent; color: var(--text-muted); border-radius: 4px; width: 28px; height: 28px; cursor: pointer; opacity: 0; } .db-inline:hover .dbi-open { opacity: 1; } .dbi-open:hover { background: var(--hover-strong); color: var(--text); } .dbi-missing { color: var(--text-muted); padding: 10px; background: var(--bg-soft); border-radius: 6px; } /* 手機：分欄改為上下排列 */ @media (max-width: 760px) { .col-row { flex-direction: column; gap: 0; } .blk[data-type="column"] { width: 100%; flex: none !important; } .col-resizer { display: none; } .dbi-open { opacity: 1; } .tbl-add { opacity: 1; } } /* ---------- 公開連結 ---------- */ .pub-badge { margin-left: 8px; font-size: 12px; color: #2b7a4b; background: rgba(68, 131, 97, .12); border-radius: 10px; padding: 1px 8px; white-space: nowrap; } .pub-badge:hover { background: rgba(68, 131, 97, .2); } .pub-badge.ro { color: var(--text-muted); background: var(--bg-soft); } .share-box { display: flex; flex-direction: column; gap: 14px; padding: 6px 20px 20px; } .share-row { display: flex; align-items: center; gap: 16px; } .share-text { flex: 1; display: flex; flex-direction: column; gap: 4px; } .share-link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .share-url { flex: 1; min-width: 200px; font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } .share-link a.btn { text-decoration: none; } .share-foot { display: flex; justify-content: flex-end; } .switch { flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--hover-strong); position: relative; transition: background .15s; } .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; } .switch.on { background: var(--accent); } .switch.on::after { transform: translateX(16px); } /* 訪客（公開連結）：隱藏所有編輯功能 */ body.public-mode #btnSettings, body.public-mode #btnNewTop, body.public-mode #btnNewTop2, body.public-mode #btnImport, body.public-mode #btnTrash, body.public-mode #btnFav, body.public-mode #favSection, body.public-mode .row-acts, body.public-mode #saveState, body.public-mode .page-ctrls, body.public-mode .page-tail { display: none !important; } body.public-mode .ws-name { cursor: default; } .public-error { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--bg); color: var(--text); text-align: center; padding: 24px; z-index: 50; } .public-error .pe-icon { font-size: 48px; } .public-error h1 { font-size: 22px; margin: 0; } .blk[data-type="page"]:has(.hidden-public) { display: none; } /* 表格列 / 欄把手 */ .tbl-handle { position: absolute; z-index: 4; display: none; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.08); font-size: 13px; line-height: 1; cursor: pointer; } .tbl-hcol { width: 26px; height: 16px; } .tbl-hrow { width: 16px; height: 26px; } .tbl-handle:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .blk:hover .tbl-scroll.show-handles .tbl-handle, .blk.focused .tbl-scroll.show-handles .tbl-handle { display: flex; } .stbl .tcell.tsel { background: var(--accent-soft) !important; } #page.readonly .tbl-handle { display: none !important; } .menu-item.disabled { opacity: .4; cursor: default; } .menu-item.disabled:hover { background: none; } @media (hover: none) { .tbl-hcol { width: 34px; height: 22px; } .tbl-hrow { width: 22px; height: 34px; } } /* ---------- 連結選單 ---------- */ #linkpop { position: fixed; z-index: 1200; display: none; align-items: center; gap: 2px; padding: 4px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); max-width: calc(100vw - 16px); font-size: 13px; } #linkpop.show { display: flex; } #linkpop .lp-url { color: var(--text-muted); padding: 0 8px 0 6px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid var(--border); margin-right: 2px; } #linkpop .lp-btn { border: 0; background: transparent; color: var(--text); padding: 5px 9px; border-radius: 5px; cursor: pointer; white-space: nowrap; font: inherit; } #linkpop .lp-btn:hover { background: var(--hover-strong); } #linkpop .lp-btn.danger { color: #d44c47; } @media (hover: none) { #linkpop .lp-btn { padding: 9px 11px; } #linkpop .lp-url { max-width: 120px; } } /* ---------- 圖片放大檢視 ---------- */ .img-wrap img { cursor: zoom-in; } .img-zoom { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 6px; background: rgba(15,15,15,.6); color: #fff; font-size: 16px; display: grid; place-items: center; opacity: 0; transition: opacity .12s; cursor: pointer; } .img-wrap:hover .img-zoom { opacity: 1; } @media (hover: none) { .img-zoom { display: none; } .blk.selected .img-zoom { display: grid; opacity: 1; width: 38px; height: 38px; } } body.lb-open { overflow: hidden; } #lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(12, 12, 12, .92); outline: none; animation: lbIn .15s ease-out; } @keyframes lbIn { from { opacity: 0; } to { opacity: 1; } } #lightbox .lb-wrap { position: absolute; inset: 0 0 56px 0; overflow: auto; display: flex; align-items: safe center; justify-content: safe center; padding: 16px; touch-action: pan-x pan-y pinch-zoom; } #lightbox .lb-wrap.zoomed { cursor: grab; } #lightbox .lb-wrap.zoomed:active { cursor: grabbing; } #lightbox .lb-img { flex: none; max-width: none; cursor: zoom-in; user-select: none; box-shadow: 0 8px 40px rgba(0,0,0,.5); border-radius: 2px; background: #fff; transition: opacity .15s; } #lightbox .lb-wrap.zoomed .lb-img { cursor: zoom-out; } #lightbox .lb-img.loading { opacity: .3; } #lightbox .lb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: flex; align-items: center; gap: 4px; padding: 0 12px calc(env(safe-area-inset-bottom, 0px)); color: #eee; } #lightbox .lb-sp { flex: 1; } #lightbox .lb-count, #lightbox .lb-zoom { font-size: 13px; color: #bbb; min-width: 46px; text-align: center; } #lightbox .lb-btn { min-width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: #eee; font-size: 18px; display: inline-grid; place-items: center; text-decoration: none; cursor: pointer; } #lightbox .lb-btn:hover { background: rgba(255,255,255,.12); } #lightbox .lb-nav { position: absolute; top: 50%; margin-top: -48px; width: 48px; height: 64px; font-size: 34px; background: rgba(255,255,255,.08); } #lightbox .lb-prev { left: 12px; } #lightbox .lb-next { right: 12px; } #lightbox .lb-nav[hidden] { display: none; } @media (hover: none) { #lightbox .lb-nav { display: none; } } /* ---------- 側邊欄多選 ---------- */ .tree-check { display: none; width: 18px; flex: 0 0 18px; color: var(--text-muted); font-size: 15px; text-align: center; } body.sb-selecting .tree-check { display: inline-block; } .tree-row.multi-sel { background: var(--accent-soft); color: var(--text); } .tree-row.multi-sel .tree-check { color: var(--accent); } body.sb-selecting .tree-row .row-acts { display: none !important; } #sbSelBar { display: flex; align-items: center; gap: 4px; padding: 8px 6px 8px 10px; border-top: 1px solid var(--border); background: var(--bg-elev); flex-wrap: nowrap; } #sbSelBar .btn.sm { padding: 3px 7px; } #sbSelBar .sb-sel-count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #sbSelBar[hidden] { display: none; } #sbSelBar .sb-sel-count { font-size: 13px; color: var(--text); font-weight: 500; } #sbSelBar .sb-sel-sp { flex: 1; } .trash-bulk { display: flex; gap: 8px; justify-content: flex-end; margin: 8px 0 4px; } .confirm p { white-space: pre-line; } /* ---------- 兩步驟驗證：備用碼、固定驗證碼 ---------- */ .link-btn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 13px; text-align: left; } .link-btn:hover { text-decoration: underline; } .auth-alt { margin: -4px 0 2px; align-self: flex-start; } .recovery-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0 10px; padding: 14px; background: var(--bg-soft); border-radius: 8px; } .recovery-codes code { font-family: var(--mono); font-size: 16px; letter-spacing: .06em; text-align: center; padding: 4px 0; color: var(--text); user-select: all; } .check-row { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 14px; cursor: pointer; } .recovery-view #recoveryDone[disabled] { opacity: .5; cursor: not-allowed; } .warn-text { color: var(--danger); font-size: 13px; margin: 6px 0; } /* ---------- 自訂圖示與封面圖片 ---------- */ .icon-img { width: 1.15em; height: 1.15em; object-fit: cover; border-radius: 3px; display: inline-block; vertical-align: -.2em; } .tree-icon.has-img, .mi-icon.has-img, .si-icon.has-img, .bc-icon.has-img, .pl-icon.has-img, .dbi-icon.has-img { display: inline-grid; place-items: center; } .tree-icon .icon-img { width: 18px; height: 18px; } .page-icon.has-img { padding: 0; line-height: 0; } .page-icon .icon-img { width: 78px; height: 78px; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.12); } .slide-icon .icon-img { width: 1em; height: 1em; border-radius: 12%; } .cover.cover-img { background: var(--bg-soft); overflow: hidden; } .cover.cover-img > img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; } .cover.repositioning { cursor: ns-resize; touch-action: none; } .cover.repositioning .cover-acts { opacity: 1; } .cover-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.55); color: #fff; font-size: 13px; padding: 6px 12px; border-radius: 6px; pointer-events: none; } .cover-btn.primary { background: var(--accent); color: #fff; } .cover-picker { padding: 10px; width: 330px; } .cover-picker .cover-grid { padding: 0; grid-template-columns: repeat(4, 1fr); } .cp-label { font-size: 12px; color: var(--text-muted); font-weight: 600; margin: 4px 0 6px; } .cp-label + .cover-grid { margin-bottom: 2px; } .cp-row { display: flex; gap: 6px; align-items: center; } .cp-row .input { flex: 1; min-width: 0; } .cp-hint { font-size: 11px; color: var(--text-faint); margin: 6px 0 10px; } .emoji-custom { display: flex; gap: 6px; padding: 0 10px 8px; align-items: center; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .emoji-custom .input { flex: 1; min-width: 0; } @media (hover: none) { .cover-acts { opacity: 1; } } /* ---------- 展示：折疊可收合、編排模式 ---------- */ #present details > summary { cursor: pointer; } #present details > summary:hover { opacity: .85; } /* 編排模式：兩行以上的投影片與一般模式相同（照頁面的縮排呈現），只有「只有一行標題」的投影片置中 */ /* 只有一行標題：上下左右置中 */ .slide-inner.arrange-hero { display: flex; align-items: center; justify-content: center; } .slide-inner.arrange-hero .slide-body { width: 100%; } .slide-inner.arrange.arrange-hero .b.h1, .slide-inner.arrange.arrange-hero .b.h2, .slide-inner.arrange.arrange-hero .b.h3 { justify-content: center; text-align: center; margin: 0; } .slide-inner.arrange.arrange-hero .b.h1 > .c, .slide-inner.arrange.arrange-hero .b.h2 > .c, .slide-inner.arrange.arrange-hero .b.h3 > .c { flex: 0 1 auto; } .slide-inner.arrange-hero .b.h1 { font-size: 2.6em; } .slide-inner.arrange-hero .b.h2 { font-size: 2.2em; } .slide-inner.arrange-hero .b.h3 { font-size: 1.8em; } /* ---- 頁面大綱（類似 HackMD 的目錄） ---- */ #btnOutline { font-size: 17px; } #btnOutline.on { color: var(--accent); background: var(--accent-soft); } #outline { position: absolute; z-index: 40; display: flex; flex-direction: column; background: var(--bg); font-size: 13px; } #outline.docked { top: 44px; right: 0; bottom: 0; width: 240px; border-left: 1px solid var(--border); padding: 6px 6px 16px 8px; } #outline.floating { top: 46px; right: 10px; width: min(300px, calc(100% - 20px)); max-height: min(70vh, calc(100% - 60px)); background: var(--bg-elev); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; z-index: 120; } #main.outline-docked #scroller { margin-right: 240px; } .outline-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 6px 8px; color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; flex: none; } .outline-list { overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; } .outline-title { flex: 1; } .outline-acts { display: flex; align-items: center; gap: 2px; } .outline-act { font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); padding: 2px 6px; border-radius: 5px; white-space: nowrap; } .outline-act:hover { background: var(--hover-strong); color: var(--text); } .outline-row { display: flex; align-items: center; min-width: 0; } .outline-row.lv2 { padding-left: 12px; } .outline-row.lv3 { padding-left: 24px; } .outline-caret { flex: none; width: 18px; height: 22px; display: grid; place-items: center; border-radius: 4px; color: var(--text-faint); font-size: 11px; transition: transform .12s; } button.outline-caret:hover { background: var(--hover-strong); color: var(--text); } .outline-row.folded > .outline-caret { transform: rotate(-90deg); } .outline-item { flex: 1; min-width: 0; display: block; padding: 4px 8px 4px 4px; border-radius: 6px; color: var(--text-muted); text-decoration: none; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 2px solid transparent; } .outline-item:hover { background: var(--hover); color: var(--text); } .outline-item.lv1 { font-weight: 600; color: var(--text); } .outline-item.lv3 { font-size: 12.5px; } .outline-item.active { color: var(--accent); background: var(--accent-soft); border-left-color: var(--accent); } .outline-item.active-within { border-left-style: dashed; } .outline-empty { padding: 8px; color: var(--text-faint); line-height: 1.5; } @media (pointer: coarse) { .outline-item { padding-top: 8px; padding-bottom: 8px; } .outline-caret { width: 28px; height: 34px; font-size: 13px; } .outline-act { padding: 6px 8px; } } @media print { #outline, #btnOutline { display: none !important; } #main.outline-docked #scroller { margin-right: 0; } } /* ---- 檔案附件 ---- */ .file-block { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 2px 0; } .file-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px 8px 12px; background: var(--bg); min-width: 0; width: 100%; } .file-card:hover { background: var(--hover); } .file-icon { font-size: 22px; flex: none; line-height: 1; } .file-main { flex: 1; min-width: 0; } .file-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-meta { font-size: 12px; color: var(--text-muted); margin-top: 1px; } .file-acts { display: flex; gap: 6px; flex: none; } .file-acts .btn { text-decoration: none; } .file-progress { height: 4px; border-radius: 2px; background: var(--bg-soft); margin-top: 6px; overflow: hidden; } .file-progress > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; } .file-media { width: 100%; max-height: 70vh; border-radius: 8px; background: #000; } .file-audio { width: 100%; } .file-modal { width: min(1100px, calc(100vw - 32px)); max-width: none; } .file-prev { display: flex; flex-direction: column; gap: 10px; } .file-prev-frame { width: 100%; height: min(60vh, 900px); border: 1px solid var(--border); border-radius: 6px; background: #fff; } .file-prev-img { max-width: 100%; max-height: 60vh; object-fit: contain; align-self: center; } .file-prev-media { max-width: 100%; max-height: 60vh; align-self: center; } .file-prev .btn-row { justify-content: flex-end; } .file-prev .btn { text-decoration: none; } @media (max-width: 560px) { .file-acts .file-open { display: none; } } /* ---- 嵌入（影片 / 網頁） ---- */ .embed-block { width: 100%; padding: 2px 0; } .embed-box { position: relative; width: 100%; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-soft); } .embed-box.ratio { aspect-ratio: 16 / 9; } .embed-frame { display: block; width: 100%; height: 100%; border: 0; } .embed-box.resizing .embed-frame { pointer-events: none; } .embed-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; cursor: ns-resize; } .embed-resize::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--text-faint); opacity: 0; transition: opacity .15s; } .embed-box:hover .embed-resize::after { opacity: .8; } .embed-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--text-muted); padding: 4px 2px 0; } .embed-cap a, .embed-edit { color: var(--text-muted); text-decoration: none; font-size: 12px; } .embed-cap a:hover, .embed-edit:hover { color: var(--accent); } .embed-note { color: var(--text-faint); flex-basis: 100%; } .embed-picker { width: min(420px, calc(100vw - 32px)); } .embed-hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; } .file-acts a.btn { color: var(--text); } /* ---- 版本紀錄 ---- */ .hv-modal { width: min(1100px, calc(100vw - 32px)); max-width: none; height: min(86vh, 900px); display: flex; flex-direction: column; } .hv-modal > .hv { flex: 1; min-height: 0; } .hv { display: flex; gap: 0; height: 100%; min-height: 0; border-top: 1px solid var(--border); } .hv-side { width: 230px; flex: none; border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; } .hv-side-title { font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 10px 12px 6px; } .hv-list { overflow-y: auto; flex: 1; padding: 0 6px 10px; } .hv-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; padding: 7px 10px; border-radius: 6px; gap: 1px; } .hv-item:hover { background: var(--hover); } .hv-item.on { background: var(--accent-soft); } .hv-time { font-size: 13.5px; font-weight: 500; } .hv-by { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .hv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; } .hv-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); flex: none; } .hv-what { font-size: 14px; } .hv-sum { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; } .hv-ro { font-size: 12px; color: var(--text-muted); } .hv-preview { flex: 1; overflow-y: auto; padding: 8px 20px 30px; } .hv-doc { max-width: 760px; margin: 0 auto; } .hv-doc .hv-mod { background: rgba(255, 200, 0, .16); box-shadow: -4px 0 0 #e6a700; border-radius: 3px; } .hv-doc .hv-add { background: rgba(68, 131, 97, .14); box-shadow: -4px 0 0 #448361; border-radius: 3px; } .hv-doc .hv-title-mod { background: rgba(255, 200, 0, .16); border-radius: 4px; } .hv-removed { margin: 18px auto 0; max-width: 760px; border: 1px dashed var(--danger); border-radius: 8px; padding: 10px 14px; font-size: 13px; } .hv-removed-title { color: var(--danger); font-weight: 600; margin-bottom: 4px; } .hv-removed ul { margin: 0; padding-left: 18px; color: var(--text-muted); } .hv-tip, .hv-empty, .hv-loading { color: var(--text-muted); padding: 20px 4px; font-size: 14px; line-height: 1.6; } @media (max-width: 700px) { .hv { flex-direction: column; } .hv-side { width: auto; max-height: 34%; border-right: 0; border-bottom: 1px solid var(--border); } .hv-bar { flex-direction: column; } } /* ---- 頁內尋找與取代 ---- */ #findbar { position: absolute; top: 48px; right: 16px; z-index: 130; background: var(--bg-elev); box-shadow: var(--shadow); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 6px; width: min(460px, calc(100% - 24px)); } #main.outline-docked #findbar { right: 256px; } .find-row { display: flex; align-items: center; gap: 4px; } .find-repl-row { display: none; padding-left: 30px; } #findbar.with-repl .find-repl-row { display: flex; } #findbar.with-repl .find-toggle { color: var(--accent); background: var(--accent-soft); } .find-input { flex: 1; min-width: 0; border: 1px solid var(--border); background: var(--bg-soft); border-radius: 6px; padding: 5px 8px; font-size: 14px; outline: none; color: var(--text); } .find-input:focus { border-color: var(--accent); } .find-count { font-size: 12px; color: var(--text-muted); min-width: 46px; text-align: center; white-space: nowrap; } .find-count.none { color: var(--danger); } .find-btn { min-width: 26px; height: 28px; padding: 0 6px; border-radius: 6px; color: var(--text-muted); font-size: 14px; flex: none; } .find-btn.wide { font-size: 13px; padding: 0 10px; border: 1px solid var(--border); color: var(--text); } .find-btn:hover:not(:disabled) { background: var(--hover-strong); color: var(--text); } .find-btn:disabled { opacity: .4; cursor: default; } .find-case.on { color: var(--accent); background: var(--accent-soft); } ::highlight(ink-find) { background-color: rgba(255, 213, 0, .45); color: inherit; } ::highlight(ink-find-cur) { background-color: #ff9632; color: #000; } @media (max-width: 760px) { #findbar { top: 46px; right: 8px; left: 8px; width: auto; } .find-repl-row { padding-left: 0; flex-wrap: wrap; } .find-btn { min-width: 34px; height: 34px; } } @media print { #findbar { display: none !important; } } /* ---- 側邊欄：最近開啟 ---- */ .sb-label-btn { width: 100%; text-align: left; cursor: pointer; border-radius: 6px; } .sb-label-btn:hover { background: var(--hover); color: var(--text-muted); } .sb-label-arrow { display: inline-block; width: 12px; font-size: 10px; transition: transform .15s; } #recentSection.closed .sb-label-arrow { transform: rotate(-90deg); } /* ---- 反向連結 ---- */ .backlinks { width: min(var(--content-w), calc(100% - 96px)); margin: 28px auto 0; border-top: 1px solid var(--border); padding-top: 10px; font-size: 14px; } #page.full-width .backlinks { width: calc(100% - 192px); } .bl-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; padding: 4px 8px 4px 4px; border-radius: 6px; } .bl-toggle:hover { background: var(--hover); color: var(--text); } .bl-arrow { display: inline-block; font-size: 10px; transition: transform .15s; } .bl-toggle.open .bl-arrow { transform: rotate(90deg); } .bl-list { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 4px; } .bl-group { padding: 4px 0; } .bl-page { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-weight: 500; padding: 3px 6px; border-radius: 6px; max-width: 100%; } .bl-page:hover { background: var(--hover); } .bl-icon { flex: none; } .bl-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--border); } .bl-path { color: var(--text-faint); font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bl-snippet { display: block; margin: 2px 0 2px 30px; padding: 3px 8px; color: var(--text-muted); text-decoration: none; font-size: 13px; border-left: 2px solid var(--border); line-height: 1.5; } .bl-snippet:hover { color: var(--text); border-left-color: var(--accent); background: var(--hover); } @media (max-width: 760px) { .backlinks, #page.full-width .backlinks { width: calc(100% - 56px); } } @media print { .backlinks { display: none; } } /* ---- 留言 ---- */ #btnComments { position: relative; width: auto; min-width: 28px; padding: 0 4px; gap: 2px; display: inline-flex; } #btnComments.on { background: var(--accent-soft); } .cm-count { font-size: 11px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 8px; padding: 0 5px; line-height: 16px; min-width: 16px; text-align: center; } #comments { position: absolute; top: 44px; right: 0; bottom: 0; width: min(360px, 100%); z-index: 125; background: var(--bg-elev); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(15, 15, 15, .08); display: flex; flex-direction: column; } .cm-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 6px 14px; flex: none; } .cm-spacer { flex: 1; } .cm-tabs { display: flex; gap: 4px; padding: 0 12px 8px; border-bottom: 1px solid var(--border); flex: none; } .cm-tab { font-size: 13px; padding: 4px 10px; border-radius: 6px; color: var(--text-muted); } .cm-tab.on { background: var(--hover-strong); color: var(--text); font-weight: 500; } .cm-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; } .cm-empty { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; padding: 12px 4px; } .cm-thread { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg); cursor: default; transition: box-shadow .15s; } .cm-thread.focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .cm-thread.resolved { opacity: .85; } .cm-thread.flash { animation: cmflash 1.4s; } @keyframes cmflash { 0%, 40% { background: var(--accent-soft); } 100% { background: var(--bg); } } .cm-thread-top { display: flex; align-items: flex-start; gap: 6px; } .cm-thread-head { flex: 1; min-width: 0; } .cm-quote { font-size: 12.5px; color: var(--text-muted); border-left: 3px solid #e6a700; padding: 1px 0 1px 8px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .cm-target { font-size: 12px; color: var(--text-faint); margin-bottom: 4px; } .cm-gone { font-size: 12px; color: var(--danger); margin-bottom: 4px; } .cm-resolve { flex: none; width: 26px; height: 26px; border-radius: 6px; color: var(--text-muted); font-size: 14px; border: 1px solid var(--border); } .cm-resolve:hover { background: #448361; color: #fff; border-color: #448361; } .cm-thread.resolved .cm-resolve:hover { background: var(--hover-strong); color: var(--text); border-color: var(--border); } .cm-msg { padding: 4px 0; } .cm-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; } .cm-avatar { width: 20px; height: 20px; border-radius: 50%; color: #fff; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; } .cm-time { color: var(--text-faint); font-size: 12px; } .cm-msg-acts { margin-left: auto; display: none; gap: 6px; } .cm-msg:hover .cm-msg-acts { display: inline-flex; } @media (pointer: coarse) { .cm-msg-acts { display: inline-flex; } } .cm-link { font-size: 12px; color: var(--text-muted); } .cm-link:hover { color: var(--accent); } .cm-text { font-size: 14px; white-space: pre-wrap; word-break: break-word; padding: 3px 0 0 26px; line-height: 1.55; } .cm-edit { padding: 4px 0 0 26px; } .cm-resolved-by { font-size: 12px; color: #448361; padding: 4px 0 0 26px; } .cm-reply { display: flex; gap: 6px; align-items: flex-end; margin-top: 6px; } .cm-reply-input, .cm-input { flex: 1; width: 100%; resize: none; border: 1px solid var(--border); background: var(--bg-soft); border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13.5px; color: var(--text); outline: none; line-height: 1.45; } .cm-reply-input:focus, .cm-input:focus { border-color: var(--accent); background: var(--bg); } .cm-send { flex: none; } .cm-thread:not(.typing):not(:focus-within) .cm-send { display: none; } .cm-row { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 6px; } .cm-hint { font-size: 12px; color: var(--text-faint); margin-right: auto; } .cm-pop .cm-compose { width: min(340px, calc(100vw - 32px)); padding: 10px; } .cm-compose .cm-quote { white-space: normal; max-height: 4.5em; overflow: hidden; cursor: default; } .cm-badge { position: absolute; right: -46px; top: 3px; font-size: 11.5px; white-space: nowrap; color: var(--text-muted); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 0 4px; height: 22px; user-select: none; -webkit-user-select: none; } .cm-badge:hover { color: var(--text); border-color: var(--accent); } .cm-float { position: fixed; z-index: 240; background: var(--bg-elev); box-shadow: var(--shadow); border-radius: 8px; padding: 6px 10px; font-size: 13px; } ::highlight(ink-comment) { background-color: rgba(255, 200, 0, .22); text-decoration: underline 2px rgba(230, 167, 0, .9); } ::highlight(ink-comment-focus) { background-color: rgba(255, 200, 0, .5); text-decoration: underline 2px #e6a700; } #main.comments-open #findbar { right: 376px; } @media (max-width: 760px) { #comments { width: 100%; border-left: 0; } .cm-badge { right: 4px; top: -18px; height: 20px; } } @media print { #comments, .cm-badge, #btnComments { display: none !important; } } @media (min-width: 1180px) { #main.comments-open #scroller { margin-right: 360px; } } /* 安全區域：全螢幕的視窗也避開狀態列與瀏海 */ #authScreen { padding-top: max(10vh, calc(env(safe-area-inset-top, 0px) + 24px)); } @media (min-width: 761px) { .modal-wrap { padding-top: max(12vh, calc(env(safe-area-inset-top, 0px) + 16px)); } } @media (max-width: 760px) { .modal-wrap { padding-top: max(4vh, calc(env(safe-area-inset-top, 0px) + 8px)); } .modal { max-height: calc(100dvh - max(4vh, calc(env(safe-area-inset-top, 0px) + 8px)) - 8px - env(safe-area-inset-bottom, 0px)); } } #scroller { padding-bottom: env(safe-area-inset-bottom, 0px); } /* ---- 登入紀錄（擁有者） ---- */ .login-modal { width: min(720px, calc(100vw - 24px)); max-width: none; } .login-hist { padding: 0 16px 16px; } .lh-scroll { max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; } .lh-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .lh-table th { position: sticky; top: 0; background: var(--bg-soft); text-align: left; font-weight: 600; color: var(--text-muted); } .lh-table th, .lh-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } .lh-table tr:last-child td { border-bottom: 0; } .lh-ip span:first-child { font-family: var(--mono); font-size: 12.5px; } .lh-new, .lh-tag { margin-left: 6px; font-size: 11px; padding: 1px 6px; border-radius: 8px; background: rgba(217, 115, 13, .14); color: #b35c00; } .lh-tag.ok { background: var(--accent-soft); color: var(--accent); } @media (max-width: 560px) { .lh-table th, .lh-table td { white-space: normal; } } /* ---- 簡報封面設定 ---- */ .slide-subtitle { font-size: 32px; color: var(--t); opacity: .85; margin: -4px 0 14px; } .slide-stage.cover .slide-subtitle { color: #fff; } .cover-modal { width: min(520px, calc(100vw - 24px)); } .cv-wrap { display: flex; flex-direction: column; min-height: 0; flex: 1; } .cv { padding: 4px 18px 12px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; flex: 1; } .cv-foot { flex: none; padding: 10px 18px 14px; border-top: 1px solid var(--border); justify-content: flex-end; } .cv-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; } .cv-group { display: flex; flex-direction: column; gap: 6px; } .cv-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; } .cv-row { display: flex; align-items: center; gap: 8px; } .cv-row .input { flex: 1; min-width: 0; } .cv-row .cv-date { flex: 0 1 180px; } .cv-preview { border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; background: var(--bg-soft); } .cv-pv-title { font-size: 22px; font-weight: 700; } .cv-pv-subtitle { font-size: 15px; margin-top: 4px; } .cv-pv-line { font-size: 13px; color: var(--text-muted); margin-top: 6px; } /* ---------- 簡報：雷射筆 / 畫筆 ---------- */ .pres-ink { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; pointer-events: none; z-index: 3; } .pres-laser { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none; z-index: 4; display: none; background: radial-gradient(circle, #fff 0 15%, #ff2a2a 35%, rgba(255,0,0,.55) 60%, rgba(255,0,0,0) 72%); box-shadow: 0 0 18px 6px rgba(255,30,30,.55); } #present.tool-laser, #present.tool-laser .slide-stage, #present.tool-laser .slide-stage * { cursor: none; } #present.tool-pen, #present.tool-pen .slide-stage, #present.tool-pen .slide-stage * { cursor: crosshair; } #present.tool-pen { touch-action: none; } #present.tool-laser .pres-controls, #present.tool-laser .pres-controls *, #present.tool-pen .pres-controls, #present.tool-pen .pres-controls * { cursor: default; } .pres-btn.pres-laser-btn, .pres-btn.pres-pen-btn, .pres-btn.pres-pv-btn { font-size: 15px; } @media (hover: none) { .pres-btn.pres-laser-btn, .pres-btn.pres-pv-btn { display: none; } } /* ---------- 簡報者檢視（另開視窗） ---------- */ body.pv-body { background: #1b1b1b; color: #e8e8e8; overflow: hidden; font-family: var(--font, system-ui, -apple-system, "Segoe UI", "Microsoft JhengHei", sans-serif); } .pv-root { height: 100vh; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 10px 14px; } .pv-top, .pv-bottom { display: flex; align-items: center; gap: 14px; min-width: 0; } .pv-title { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .pv-gap { flex: 1; } .pv-meta { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; } .pv-meta small { color: #999; font-size: 12px; } .pv-clock, .pv-count { font-size: 22px; font-weight: 600; } .pv-timer { font-size: 26px; font-weight: 700; color: #7fd18b; min-width: 4.2ch; } .pv-root.paused .pv-timer { color: #e0b44a; } .pv-btn { background: #2c2c2c; color: #eee; border: 1px solid #3a3a3a; border-radius: 6px; padding: 5px 10px; font-size: 14px; white-space: nowrap; } .pv-btn:hover:not(:disabled) { background: #383838; } .pv-btn:disabled { opacity: .35; cursor: default; } .pv-btn.on { background: #2383e2; border-color: #2383e2; color: #fff; } .pv-nav { padding: 9px 22px; font-size: 16px; } .pv-nav-next { background: #2383e2; border-color: #2383e2; color: #fff; } .pv-nav-next:hover:not(:disabled) { background: #1b6fc2; } .pv-main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 14px; min-height: 0; } .pv-cur, .pv-side { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; } .pv-label { font-size: 12px; color: #999; } .pv-box { position: relative; overflow: hidden; background: #111; border-radius: 6px; } .pv-cur-box { flex: 1; min-height: 0; } .pv-next { display: flex; flex-direction: column; gap: 6px; } .pv-next .pv-box { aspect-ratio: 16 / 9; width: 100%; } .pv-next .pv-end { display: none; aspect-ratio: 16 / 9; background: #111; border-radius: 6px; color: #777; align-items: center; justify-content: center; } .pv-next.end .pv-box { display: none; } .pv-next.end .pv-end { display: flex; } .pv-box .slide-stage { box-shadow: none; } .pv-root.tool-laser .pv-cur-box, .pv-root.tool-laser .pv-cur-box * { cursor: none; } .pv-root.tool-pen .pv-cur-box, .pv-root.tool-pen .pv-cur-box * { cursor: crosshair; } .pv-root.tool-pen .pv-cur-box { touch-action: none; } .pv-notes-head { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .pv-notes { flex: 1; min-height: 0; overflow-y: auto; background: #242424; border-radius: 6px; padding: 12px 16px; line-height: 1.6; } .pv-notes .pv-notes-doc { color: #f0f0f0; } .pv-notes .pv-notes-doc .b { margin: 0 0 .5em; } .pv-empty { color: #777; font-size: 14px; } @media (max-width: 760px) { .pv-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); } .pv-next { display: none; } } /* 成員管理：異地備份狀態 */ .offsite-box { margin-top: 14px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border, rgba(0,0,0,.1)); display: flex; flex-direction: column; gap: 3px; } .offsite-box[hidden] { display: none; } .offsite-box.ok { background: rgba(68,131,97,.08); border-color: rgba(68,131,97,.35); } .offsite-box.warn { background: rgba(203,145,47,.1); border-color: rgba(203,145,47,.45); } .offsite-box.bad { background: rgba(224,62,62,.08); border-color: rgba(224,62,62,.45); } .offsite-box .small-text { word-break: break-word; }