/* ============================================================================ OneCanvas · standalone canvas shell redesign (ADDITIVE) ---------------------------------------------------------------------------- Load order (public/prototype/onecanvas_ko.html ): 1. existing s (diagram-studio, onboarding, onecanvas-ai-connect) 2. existing inline 3. 4. ← this file 5. It must come AFTER the inline block: every selector below mirrors the engine's own specificity so a later position is what makes it win. No element IDs, event hooks, or geometry the JS depends on (card-head 28px, #world, #selbox handles, layers z-index) are changed. Canvas content (.k-text bodies, card inner content) keeps its font metrics — only the shell is restyled. ============================================================================ */ /* 0 · Retone the engine variables so every existing rule picks up the system */ :root { --accent: var(--oc-accent); --accent-weak: var(--oc-accent-soft); --danger: var(--oc-danger); --leftw: 272px; --rightw: 288px; --oc-topbar-h: 48px; --oc-bottombar-h: 36px; } :root[data-theme="dark"] { --surface-0: var(--oc-bg); --surface-1: var(--oc-surface); --surface-2: var(--oc-surface-2); --surface-3: var(--oc-surface-3); --line: var(--oc-line); --text-1: var(--oc-text); --text-2: var(--oc-text-2); --grid-dot: var(--oc-grid-dot); } :root[data-theme="light"] { --surface-0: var(--oc-surface-2); --surface-1: var(--oc-surface); --surface-2: var(--oc-surface-2); --surface-3: var(--oc-surface-3); --line: var(--oc-line); --text-1: var(--oc-text); --text-2: var(--oc-text-2); --grid-dot: var(--oc-grid-dot); } body { font-family: var(--oc-font); } /* Shell chrome reads at 14px; the stage (card content) keeps the engine's 13px base. */ #topbar, #left, #right, #bottombar, #quickDock, #penOptions, #chatPanel, #activityPanel, #insertMenu, #globalSearch, .modal-card, #showcaseReplay, #experienceTasks, #experienceNav, #focusTop, #toasts { font-size: var(--oc-fs-ui); } #topbar :focus-visible, #left :focus-visible, #right :focus-visible, #bottombar :focus-visible, #quickDock :focus-visible, #insertMenu :focus-visible, #globalSearch :focus-visible, .modal-card :focus-visible, #showcaseReplay :focus-visible, #experienceTasks :focus-visible, #activityPanel :focus-visible, #chatPanel :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; } /* 1 · Frame */ #app { grid-template-rows: var(--oc-topbar-h) 1fr var(--oc-bottombar-h); } input, textarea, select { border-radius: var(--oc-r-control); } input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: var(--oc-focus-ring); } /* 2 · Topbar — single command row */ #topbar { gap: 6px; padding: 0 10px 0 8px; background: var(--surface-1); border-bottom: 1px solid var(--line); } #topbar .logo { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 2px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; } #topbar .logo::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 6px; background: var(--accent); box-shadow: inset 0 0 0 5px var(--surface-1), inset 0 0 0 6px var(--accent); } #topbar .logo .ver { color: var(--text-2); font-size: var(--oc-fs-micro); font-weight: 600; vertical-align: 0; margin-left: 0; } .doc-title { width: clamp(160px, 22vw, 320px); height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--oc-r-control); background: transparent; font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .doc-title:hover { border-color: var(--line); background: var(--surface-2); } .doc-title:focus { border-color: var(--accent); background: var(--surface-2); box-shadow: var(--oc-focus-ring); } #topbar .save-status { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--oc-r-pill); background: var(--surface-2); color: var(--text-2); font-size: var(--oc-fs-meta); font-weight: 500; } #topbar .save-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); opacity: .6; } #topbar .save-status[data-state="saved"]::before, #topbar .save-status[data-state="synced"]::before { background: var(--oc-ok); opacity: 1; } #topbar .save-status[data-state="saving"]::before, #topbar .save-status[data-state="pending"]::before { background: var(--accent); opacity: 1; } #topbar .save-status[data-state="error"], #topbar .save-status[data-state="offline"] { color: var(--oc-danger-text); background: var(--oc-danger-soft); } #topbar .save-status[data-state="error"]::before, #topbar .save-status[data-state="offline"]::before { background: var(--oc-danger); opacity: 1; } #topbar .save-status:empty { display: none; } .tbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--oc-r-control); color: var(--text-2); font-weight: 600; transition: background var(--oc-motion-fast) var(--oc-ease), color var(--oc-motion-fast) var(--oc-ease); } .tbtn:hover { color: var(--text-1); background: var(--surface-2); } .tbtn:active { background: var(--surface-3); } .tbtn[aria-expanded="true"] { color: var(--text-1); background: var(--surface-3); } .tbtn:disabled, .tbtn[aria-disabled="true"], .tbtn[data-coming-soon="true"] { color: var(--text-2); opacity: .55; cursor: not-allowed; background: transparent; } .tbtn[data-coming-soon="true"]::after, .tbtn[aria-disabled="true"]::after { content: "준비 중"; padding: 2px 6px; border-radius: 4px; background: var(--surface-3); color: var(--text-2); font-size: 11px; font-weight: 700; line-height: 1.2; } .global-search-trigger { min-width: 190px; justify-content: flex-start; border: 1px solid var(--line); background: var(--surface-0); color: var(--text-2); font-weight: 500; } .global-search-trigger::before { content: "⌕"; color: var(--text-2); font-size: 17px; } .global-search-trigger:hover { border-color: var(--oc-line-strong); background: var(--surface-0); color: var(--text-1); } #topbar .live-web { border-color: transparent; background: transparent; } #topbar .live-web .live-dot { display: none; } #topbar .live-web::before { content: "▶"; color: #ff0033; font-size: 10px; } .presence { gap: 4px; margin-right: 2px; } .chip { height: 28px; padding: 0 10px 0 8px; gap: 6px; border-radius: var(--oc-r-pill); color: var(--text-1); font-size: var(--oc-fs-meta); font-weight: 600; background: var(--surface-2); border-color: transparent; } .chip .dot { width: 8px; height: 8px; } .chip.idle { opacity: .5; } .activity-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-3); color: var(--text-1); font-size: var(--oc-fs-micro); font-weight: 700; } #btnAiSettings.ai-connect-top-trigger { color: var(--accent); border: 1px solid var(--oc-accent-line); background: var(--oc-accent-soft); } #btnAiSettings.ai-connect-top-trigger::before { content: "✦"; font-size: 13px; } #btnAiSettings.ai-connect-top-trigger:hover, #btnAiSettings.ai-connect-top-trigger[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); background: var(--oc-accent-soft); } /* Optional overflow group (markup change B in canvas-shell.markup-changes.md). Wrap #btnHelp #btnDrive #btnImport #btnExport #btnTheme in
…
*/ .topbar-overflow { position: relative; } .topbar-overflow-trigger { width: 32px; padding: 0; justify-content: center; font-size: 18px; line-height: 1; } .topbar-overflow-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; display: none; min-width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: var(--oc-r-card); background: var(--surface-1); box-shadow: var(--oc-shadow-3); } .topbar-overflow[open] .topbar-overflow-menu { display: grid; gap: 2px; } .topbar-overflow-menu .tbtn { width: 100%; height: 36px; justify-content: flex-start; padding: 0 10px; } .topbar-overflow-menu .tbtn:hover { background: var(--surface-2); } /* 3 · Experience nav merges INTO the topbar (no second bar) */ body[data-experience-shell="1"] #app { height: 100%; margin-top: 0; } #experienceNav { height: var(--oc-topbar-h); width: auto; right: auto; gap: 8px; padding: 0 8px 0 10px; border: 0; background: transparent; box-shadow: none; z-index: 41; pointer-events: none; color: var(--text-1); } #experienceNav > * { pointer-events: auto; } #experienceNav .experience-brand { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 2px; color: var(--text-1); font-size: 15px; font-weight: 700; letter-spacing: -.02em; } #experienceNav .experience-brand::before { content: ""; width: 20px; height: 20px; border-radius: 6px; background: var(--accent); box-shadow: inset 0 0 0 5px var(--surface-1), inset 0 0 0 6px var(--accent); } #experienceNav .experience-links a { height: 32px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--oc-r-control); color: var(--text-2); font-size: var(--oc-fs-ui); font-weight: 600; } #experienceNav .experience-links a:hover, #experienceNav .experience-links a.on { color: var(--accent); background: var(--oc-accent-soft); } #experienceNav .experience-spacer { display: none; } #experienceAccessBadge { height: 26px; padding: 0 10px 0 8px; border: 1px solid var(--line); border-radius: var(--oc-r-pill); color: var(--text-2); background: var(--surface-2); font-size: var(--oc-fs-micro); font-weight: 700; } #experienceAccessBadge::before { width: 7px; height: 7px; background: var(--text-2); } body[data-onecanvas-access="admin"] #experienceAccessBadge { color: var(--oc-ok-text); border-color: transparent; background: var(--oc-ok-soft); } body[data-onecanvas-access="admin"] #experienceAccessBadge::before { background: var(--oc-ok); } body[data-onecanvas-access="viewer"] #experienceAccessBadge { color: var(--accent); border-color: transparent; background: var(--oc-accent-soft); } body[data-onecanvas-access="viewer"] #experienceAccessBadge::before { background: var(--accent); } body[data-experience-shell="1"] #topbar { padding-left: 344px; } body[data-experience-shell="1"] #topbar .logo { display: none; } /* 4 · Left panel — pages · layers · assets */ #left { background: var(--surface-1); border-right: 1px solid var(--line); } .tabs { gap: 4px; padding: 10px 10px 0; border-bottom: 1px solid var(--line); } .tabs button { height: 34px; padding: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; color: var(--text-2); font-size: var(--oc-fs-ui); font-weight: 600; } .tabs button:hover { color: var(--text-1); background: var(--surface-2); } .tabs button.on { color: var(--text-1); border-bottom-color: var(--accent); background: transparent; } .page-section { max-height: min(240px, 40%); padding: 8px 0 8px; } .panel-section-head { height: 32px; padding: 0 10px 0 12px; color: var(--text-2); font-size: var(--oc-fs-micro); font-weight: 700; letter-spacing: .02em; } .panel-section-head .count { color: var(--text-2); font-size: var(--oc-fs-micro); font-weight: 600; opacity: .8; } .panel-section-head button { width: 24px; height: 24px; border-radius: 6px; font-size: 18px; } #pageList { padding: 0 8px; } .page-row { min-height: 32px; gap: 8px; padding: 4px 8px 4px 8px; border-radius: var(--oc-r-control); color: var(--text-2); font-size: var(--oc-fs-ui); } .page-row:hover { color: var(--text-1); background: var(--surface-2); } .page-row.active { color: var(--text-1); background: var(--accent-weak); font-weight: 600; } .page-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); outline: 0; } .page-row .page-icon { width: 16px; font-size: 13px; } .page-row .page-count { font-size: var(--oc-fs-micro); font-variant-numeric: tabular-nums; } .page-row .page-delete { width: 22px; height: 22px; border-radius: 6px; font-size: 14px; } /* temporary-data indicator: the trial space row */ .trial-space-row { min-height: 44px; margin: 4px 0 6px; padding: 8px; border-radius: var(--oc-r-card); } .trial-space-row:not(.active) { border-color: var(--oc-warn-line); background: var(--oc-warn-soft); color: var(--oc-warn-text); } .trial-space-row:not(.active):hover { border-color: var(--oc-warn); background: var(--oc-warn-soft); } .trial-space-row .page-icon { width: 30px; height: 24px; border-radius: 6px; color: var(--oc-warn-text); background: color-mix(in srgb, var(--oc-warn) 22%, transparent); font-size: 11px; font-weight: 800; } .trial-space-row:not(.active) .page-count { color: var(--oc-warn-text); font-weight: 700; } .layer-section-head { height: 32px; padding: 6px 12px 0; color: var(--text-2); font-size: var(--oc-fs-micro); font-weight: 700; letter-spacing: .02em; } #layerSearch { height: 32px; margin: 6px 10px 6px; padding: 0 10px; background: var(--surface-0); } .layer-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 0 10px 8px; } .layer-tools button { height: 28px; padding: 0; border-radius: 6px; font-size: var(--oc-fs-meta); font-weight: 600; } .layer-tools #btnArrangeSelection { grid-column: 1 / -1; } .layer-row { min-height: 30px; gap: 6px; padding: 3px 10px 3px 0; font-size: var(--oc-fs-ui); } .layer-row:hover { background: var(--surface-2); } .layer-row.sel { background: var(--accent-weak); } .layer-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); outline: 0; } .layer-row .glyph { width: 30px; height: 20px; border-radius: 5px; font-size: 10px; font-weight: 700; font-family: var(--oc-mono); letter-spacing: 0; } .layer-row .mode { height: 18px; padding: 0 6px; border-radius: 4px; font-size: 11px; } .layer-row .rbtn { font-size: 13px; padding: 2px 4px; border-radius: 4px; } .wide { margin: 10px; padding: 10px 0; border: 1px dashed var(--oc-line-strong); border-radius: var(--oc-r-control); background: transparent; color: var(--accent); font-weight: 600; } .wide:hover { border-color: var(--accent); background: var(--accent-weak); } .asset-card { border-radius: var(--oc-r-control); padding: 8px; } .asset-card .thumb { border-radius: 6px; } .asset-card .meta { font-size: var(--oc-fs-meta); } /* 5 · Stage chrome (canvas engine geometry untouched) */ .workspace-panel-toggle { width: 28px; height: 32px; border-radius: var(--oc-r-control); background: var(--surface-1); box-shadow: var(--oc-shadow-2); } .workspace-panel-toggle:hover, .workspace-panel-toggle:focus-visible { color: var(--accent); border-color: var(--oc-accent-line); } .item.sel { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-weak); } .item.content-editing { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-weak); } .k-code, .k-pro, .k-url, .k-youtube, .k-browser, .k-collaboration, .k-screenShare, .k-file, .k-media, .k-database, .k-calendar { border-radius: 10px; box-shadow: var(--oc-shadow-1); } .card-head { border-radius: 10px 10px 0 0; font-size: var(--oc-fs-micro); } .card-body { border-radius: 0 0 10px 10px; } .card-tag { font-size: 11px; letter-spacing: .04em; } .card-name { color: var(--text-1); } .card-open { border-radius: 6px; } .k-frame { border-radius: 12px; } .frame-label { top: -26px; padding: 0 6px; border-radius: 6px; font-size: var(--oc-fs-micro); font-weight: 650; } .item[data-entry-mode]:not([data-entry-mode=""]).sel:not(.content-editing)::after, .item.content-editing::after { height: 22px; top: -28px; padding: 0 8px; border-radius: 6px; font-size: 11px; line-height: 22px; } #minimapBox { right: 12px; bottom: 12px; padding: 4px; border-radius: 10px; box-shadow: var(--oc-shadow-2); } .comment-pin { width: 28px; height: 28px; font-size: 11px; } .remote-selection-label { height: 22px; padding: 0 8px; border-radius: 6px 6px 6px 0; font-size: 11px; line-height: 22px; } .rcursor .tag { padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; } /* Empty canvas guide (markup change C):