/** * SwiftCloud SC4 - Global Design System * Single source of truth. Cached to R2/CDN. Import once in index.html. * * Themes (set on ): * dark - default dark bg, light text * light - white bg, dark text * auto - JS switches based on sunrise window * high-contrast - dark text on light bg, enlarged fonts (older clients) * * --attention-text is ALWAYS dark on green buttons (fixes white-on-green) */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{font-family:var(--font-body);font-size:var(--text-sm);line-height:1.6;background:var(--bg);color:var(--text-primary);transition:background-color .2s,color .2s;-webkit-font-smoothing:antialiased} img,svg{display:block;max-width:100%} button{cursor:pointer;font:inherit;border:none;background:none} a{color:inherit;text-decoration:none} input,select,textarea{font:inherit} /* ── DARK THEME (default) ──────────────────────────────────────────────── */ :root,[data-theme="dark"]{ --bg:#0f1117;--surface:#181b23;--surface-raised:#22263a;--surface-hover:#2a2f42; --border:#2e3348;--border-strong:#404663; --text-primary:#e8eaf0;--text-secondary:#9ba3be;--text-muted:#616882;--text-inverse:#0f1117; --attention:#39d353;--attention-text:#0d1f12; /* DARK TEXT on green - WCAG AA */ --attention-soft:rgba(57,211,83,.12);--attention-border:rgba(57,211,83,.25); --danger:#f87171;--danger-soft:rgba(248,113,113,.12);--danger-border:rgba(248,113,113,.3); --success:#4ade80;--warning:#fbbf24;--info:#60a5fa; --role-owner:#39d353;--role-admin:#60a5fa;--role-manager:#a78bfa; --role-field:#34d399;--role-readonly:#9ba3be;--role-delegate:#fbbf24; --shadow-sm:0 1px 3px rgba(0,0,0,.4);--shadow-md:0 4px 16px rgba(0,0,0,.5); --color-publish-dark:#2555a7; --scrollbar-bg:#181b23;--scrollbar-thumb:#2e3348; --font-display:'Noto Sans',system-ui,sans-serif; --font-body:'Noto Sans',system-ui,sans-serif; --font-mono:'JetBrains Mono','Fira Code',ui-monospace,monospace; --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem; --text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem; --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem; --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem; --radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-full:9999px; --sidebar-width:208px;--header-height:64px;--max-content:680px; } /* ── LIGHT THEME ─────────────────────────────────────────────────────────── */ [data-theme="light"]{ --bg:#f8f8f8;--surface:#ffffff;--surface-raised:#eef0f5;--surface-hover:#e5e8f0; --border:#d8dce8;--border-strong:#b8bdd0; --text-primary:#1a1d2e;--text-secondary:#4a4f6a;--text-muted:#8087a4;--text-inverse:#ffffff; --attention:#1fa832;--attention-text:#ffffff; /* green dark enough on white, white text ok */ --attention-soft:rgba(31,168,50,.1);--attention-border:rgba(31,168,50,.25); --danger:#dc2626;--danger-soft:rgba(220,38,38,.08);--danger-border:rgba(220,38,38,.25); --success:#16a34a;--warning:#d97706;--info:#2563eb; --role-owner:#16a34a;--role-admin:#2563eb;--role-manager:#7c3aed; --role-field:#059669;--role-readonly:#6b7280;--role-delegate:#b45309; --shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 16px rgba(0,0,0,.12); --scrollbar-bg:#f8f8f8;--scrollbar-thumb:#d8dce8; } /* ── HIGH CONTRAST THEME (older/low-vision clients) ─────────────────────── */ [data-theme="high-contrast"]{ --bg:#ffffff;--surface:#f0f2f8;--surface-raised:#e0e4f0;--surface-hover:#d0d6e8; --border:#6b7280;--border-strong:#1a1d2e; --text-primary:#000000;--text-secondary:#1a1d2e;--text-muted:#374151;--text-inverse:#ffffff; --attention:#145f20;--attention-text:#ffffff; --attention-soft:rgba(20,95,32,.12);--attention-border:rgba(20,95,32,.5); --danger:#991b1b;--danger-soft:rgba(153,27,27,.08);--danger-border:rgba(153,27,27,.4); --success:#14532d;--warning:#78350f;--info:#1e3a8a; --role-owner:#14532d;--role-admin:#1e3a8a;--role-manager:#581c87; --role-field:#064e3b;--role-readonly:#374151;--role-delegate:#78350f; --shadow-sm:0 1px 3px rgba(0,0,0,.2);--shadow-md:0 4px 16px rgba(0,0,0,.25); --scrollbar-bg:#f0f2f8;--scrollbar-thumb:#6b7280; } [data-theme="high-contrast"] body{font-size:17px;font-weight:450} [data-theme="high-contrast"] .sc-text-sm{font-size:15px} [data-theme="high-contrast"] .sc-text-xs{font-size:13px} [data-theme="high-contrast"] .sc-label{font-weight:600} [data-theme="high-contrast"] .sc-input,.sc-select{border-width:2px;font-size:16px} [data-theme="high-contrast"] .sc-btn{border-width:2px;font-size:16px;font-weight:700} /* ── LAYOUT ──────────────────────────────────────────────────────────────── */ .sc-shell{display:flex;min-height:100vh;background:var(--bg)} .sc-sidebar{width:var(--sidebar-width);flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto} .sc-main{flex:1;overflow-x:hidden;overflow-y:auto} .sc-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--border);height:var(--header-height);display:flex;align-items:center;padding:0 var(--space-6);gap:var(--space-4)} .sc-content{padding:var(--space-6);max-width:var(--max-content)} /* ── BUTTONS ─────────────────────────────────────────────────────────────── */ .sc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:8px;font-size:var(--text-sm);font-weight:500;line-height:1.4;transition:opacity .15s,background .15s,color .15s,border-color .15s,box-shadow .15s;white-space:nowrap;border:1px solid transparent} /* PRIMARY: attention green, ALWAYS uses --attention-text (dark on green) */ .sc-btn-primary{background:var(--attention);color:var(--attention-text);border-color:transparent} .sc-btn-primary:hover:not(:disabled){opacity:.9;box-shadow:0 0 0 3px rgba(var(--attention-glow,57 211 83)/.22),0 2px 8px rgba(0,0,0,.18)} .sc-btn-primary:disabled{opacity:.45;cursor:not-allowed} .sc-btn-secondary{background:transparent;color:var(--text-secondary);border-color:var(--border)} .sc-btn-secondary:hover:not(:disabled){border-color:var(--attention);color:var(--text-primary);box-shadow:0 2px 8px rgba(0,0,0,.12)} .sc-btn-ghost{background:transparent;color:var(--text-secondary)} .sc-btn-ghost:hover:not(:disabled){background:var(--surface-hover);color:var(--text-primary);box-shadow:0 1px 4px rgba(0,0,0,.1)} .sc-btn-danger{background:transparent;color:var(--danger);border-color:var(--danger-border)} .sc-btn-danger:hover:not(:disabled){background:var(--danger-soft);box-shadow:0 0 0 3px var(--danger-border)} .sc-btn-xs{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)} .sc-btn-sm{padding:6px var(--space-3);font-size:var(--text-sm)} .sc-btn-lg{padding:var(--space-3) var(--space-6);font-size:var(--text-base)} .sc-btn-saving{background:var(--surface-raised);color:var(--text-muted);cursor:not-allowed} .sc-btn-saved{background:var(--success);color:#fff} .sc-btn-error{background:var(--danger);color:#fff} /* ── INPUTS ──────────────────────────────────────────────────────────────── */ .sc-input,.sc-select,.sc-textarea{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--text-primary);transition:border-color .15s;outline:none} .sc-input::placeholder,.sc-textarea::placeholder{color:var(--text-muted)} .sc-input:focus,.sc-select:focus,.sc-textarea:focus{border-color:var(--attention)} .sc-input[readonly],.sc-input:disabled{opacity:.6;cursor:not-allowed} .sc-input-group{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)} /* ── FIELD WRAPPERS ──────────────────────────────────────────────────────── */ .sc-field{margin-bottom:var(--space-4)} .sc-label{display:block;font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-1)} .sc-hint{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-1)} .sc-field-group{margin-bottom:var(--space-8)} .sc-field-group-title{font-size:var(--text-sm);font-weight:600;color:var(--text-primary);padding-bottom:var(--space-2);border-bottom:1px solid var(--border);margin-bottom:var(--space-4)} /* ── TOGGLE ──────────────────────────────────────────────────────────────── */ .sc-toggle{display:flex;align-items:center;gap:var(--space-3);cursor:pointer} .sc-toggle-track{position:relative;width:2.5rem;height:1.25rem;border-radius:var(--radius-full);background:var(--surface-raised);transition:background .2s;flex-shrink:0} .sc-toggle-track.is-on{background:var(--attention)} .sc-toggle-thumb{position:absolute;top:2px;left:2px;width:1rem;height:1rem;border-radius:var(--radius-full);background:#fff;box-shadow:var(--shadow-sm);transition:transform .2s} .sc-toggle-track.is-on .sc-toggle-thumb{transform:translateX(1.25rem)} .sc-toggle-label{font-size:var(--text-sm);color:var(--text-secondary)} /* ── BADGES ──────────────────────────────────────────────────────────────── */ .sc-badge{display:inline-flex;align-items:center;padding:2px var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:500;border:1px solid transparent} .sc-badge-owner{background:rgba(57,211,83,.1);color:var(--role-owner);border-color:rgba(57,211,83,.2)} .sc-badge-admin{background:rgba(96,165,250,.1);color:var(--role-admin);border-color:rgba(96,165,250,.2)} .sc-badge-manager{background:rgba(167,139,250,.1);color:var(--role-manager);border-color:rgba(167,139,250,.2)} .sc-badge-field{background:rgba(52,211,153,.1);color:var(--role-field);border-color:rgba(52,211,153,.2)} .sc-badge-readonly{background:var(--surface-raised);color:var(--role-readonly);border-color:var(--border)} .sc-badge-delegate{background:rgba(251,191,36,.1);color:var(--role-delegate);border-color:rgba(251,191,36,.2)} .sc-dot{display:inline-block;width:6px;height:6px;border-radius:var(--radius-full)} .sc-dot-green{background:var(--success)}.sc-dot-yellow{background:var(--warning)}.sc-dot-red{background:var(--danger)}.sc-dot-grey{background:var(--text-muted)} /* ── TABLE ───────────────────────────────────────────────────────────────── */ .sc-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)} .sc-table thead tr{background:var(--surface-raised)} .sc-table th{text-align:left;padding:var(--space-2) var(--space-4);font-size:var(--text-xs);font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em} .sc-table td{padding:var(--space-3) var(--space-4);border-top:1px solid var(--border);color:var(--text-secondary);vertical-align:middle} .sc-table tr:hover td{background:var(--surface-hover)} /* ── CARDS ───────────────────────────────────────────────────────────────── */ .sc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4)} .sc-card-raised{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3)} .sc-info-box{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3);font-size:var(--text-xs);color:var(--text-muted)} .sc-danger-box{border:1px solid var(--danger-border);border-radius:var(--radius-md);padding:var(--space-4);background:var(--danger-soft)} /* ── NAV ─────────────────────────────────────────────────────────────────── */ .sc-nav-label{padding:0 var(--space-3) var(--space-3);font-size:var(--text-xs);font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em} .sc-nav-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-secondary);transition:background .1s,color .1s;width:100%;text-align:left} .sc-nav-item:hover{background:var(--surface-hover);color:var(--text-primary)} .sc-nav-item.is-active{background:var(--surface-raised);color:var(--text-primary);font-weight:500} /* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */ .sc-text-xs{font-size:var(--text-xs)}.sc-text-sm{font-size:var(--text-sm)}.sc-text-base{font-size:var(--text-base)} .sc-text-lg{font-size:var(--text-lg)}.sc-text-xl{font-size:var(--text-xl)}.sc-text-2xl{font-size:var(--text-2xl)} .sc-text-primary{color:var(--text-primary)}.sc-text-secondary{color:var(--text-secondary)}.sc-text-muted{color:var(--text-muted)} .sc-text-attention{color:var(--attention)}.sc-text-danger{color:var(--danger)}.sc-text-success{color:var(--success)} .sc-font-display{font-family:var(--font-display)}.sc-font-mono{font-family:var(--font-mono)} .sc-weight-medium{font-weight:500}.sc-weight-semibold{font-weight:600}.sc-weight-bold{font-weight:700} /* ── UTILITIES ───────────────────────────────────────────────────────────── */ .sc-border{border:1px solid var(--border)}.sc-rounded{border-radius:var(--radius-md)}.sc-rounded-lg{border-radius:var(--radius-lg)} .sc-shadow{box-shadow:var(--shadow-md)}.sc-divider{border:none;border-top:1px solid var(--border);margin:var(--space-4) 0} .sc-flex{display:flex}.sc-flex-col{display:flex;flex-direction:column} .sc-items-center{align-items:center}.sc-justify-between{justify-content:space-between} .sc-gap-2{gap:var(--space-2)}.sc-gap-3{gap:var(--space-3)}.sc-gap-4{gap:var(--space-4)} .sc-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)} .sc-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-4)} .sc-w-full{width:100%}.sc-opacity-50{opacity:.5} .sc-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} .sc-mb-2{margin-bottom:var(--space-2)}.sc-mb-4{margin-bottom:var(--space-4)}.sc-mb-6{margin-bottom:var(--space-6)} .sc-mt-1{margin-top:var(--space-1)}.sc-mt-2{margin-top:var(--space-2)}.sc-mt-4{margin-top:var(--space-4)} .sc-p-3{padding:var(--space-3)}.sc-p-4{padding:var(--space-4)} /* ── SPINNER ─────────────────────────────────────────────────────────────── */ .sc-spinner{width:1.5rem;height:1.5rem;border:2px solid var(--border);border-top-color:var(--attention);border-radius:var(--radius-full);animation:sc-spin .7s linear infinite} /* ── ANIMATIONS ──────────────────────────────────────────────────────────── */ @keyframes sc-spin{to{transform:rotate(360deg)}} @keyframes sc-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} @keyframes sc-slide-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}} .sc-animate-in{animation:sc-fade-in .2s ease forwards} .sc-slide-in{animation:sc-slide-in .15s ease forwards} /* ── SCROLLBAR ───────────────────────────────────────────────────────────── */ ::-webkit-scrollbar{width:6px;height:6px} ::-webkit-scrollbar-track{background:var(--scrollbar-bg)} ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-full)} ::-webkit-scrollbar-thumb:hover{background:var(--border-strong)} /* ── RTL ─────────────────────────────────────────────────────────────────── */ [dir="rtl"] .sc-sidebar{border-right:none;border-left:1px solid var(--border)} [dir="rtl"] .sc-nav-item{text-align:right} [dir="rtl"] .sc-table th,[dir="rtl"] .sc-table td{text-align:right} /* ── RESPONSIVE ──────────────────────────────────────────────────────────── */ @media(max-width:768px){ .sc-sidebar{display:none} .sc-input-group,.sc-grid-2,.sc-grid-3{grid-template-columns:1fr} .sc-content{padding:var(--space-4)} } /* ── PRINT ───────────────────────────────────────────────────────────────── */ @media print{ .sc-sidebar,.sc-header{display:none} body{background:#fff;color:#000;font-size:12pt} } /* ── Doc editor action bar ───────────────────────────────────────────────── */ /* Reusable: DocEditorPage save/preview/publish/refresh row. */ /* RTL-safe: uses logical properties (padding-inline, gap, flex-direction). */ /* Hover handled in CSS — no JS state needed. */ .sc-doc-bar { display: flex; align-items: center; justify-content: center; gap: 8px; padding-block: 14px 24px; margin-top: 10px; text-align: center; } [dir="rtl"] .sc-doc-bar { flex-direction: row-reverse; } .sc-doc-bar-msg { font-size: 12px; color: #9ca3af; margin-top: 10px; } .sc-doc-bar-msg--error { color: #dc2626; font-weight: 500; } .sc-doc-bar-msg--ok { color: #16a34a; font-weight: 500; } .sc-doc-bar-savemsg { min-height: 20px; margin-bottom: 12px; font-size: 13px; font-weight: 500; } /* Base button — all variants extend this */ .sc-doc-btn { display: inline-flex; align-items: center; gap: 8px; padding-block: 0; padding-inline: 28px; height: 48px; border: none; border-radius: 6px; font-family: inherit; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; white-space: nowrap; transition: transform 0.1s ease, box-shadow 0.1s ease; -webkit-font-smoothing: antialiased; } .sc-doc-btn svg { display: block; flex-shrink: 0; } .sc-doc-btn:disabled { cursor: not-allowed; opacity: 0.6; } /* Save — attention-1: orange light / nuclear-green dark */ .sc-doc-btn--save { background: #FF6B00; color: #fff; font-weight: 700; } .sc-doc-btn--save:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,107,0,0.45); } .sc-doc-btn--save:disabled { background: #e06010; opacity: 0.65; } /* Preview — attention-3 blue (#2a7ae2). Stays blue in both light and dark. attention-3 = #2a7ae2 — system blue, used for secondary informational CTAs. */ .sc-doc-btn--preview { background: #2a7ae2; } .sc-doc-btn--preview:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(42,122,226,0.40); } /* Publish — attention-2: electric-blue light / orange dark */ .sc-doc-btn--publish { background: #114EB0; } .sc-doc-btn--publish:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(17,78,176,0.40); } /* Refresh — slate, narrow */ .sc-doc-btn--refresh { padding-inline: 16px; background: #8b95a8; } .sc-doc-btn--refresh:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.14); } /* ── Doc editor structural classes ────────────────────────────────────────── DESIGN-LOCKED: Light + Dark mode approved 2026-03-14 (tag: COSMETIC-APPROVED) No visual changes without explicit approval. See docs/DESIGN_RULES.md. ─ These are global standards. ALL doc types use these classes. Never add one-off inline overrides — extend here. RTL: padding-inline, margin-inline-start on tabs. Two-layer CSS: base classes use tokens. Dark/light overrides use hardcoded hex. Reason: Vite bundle redefines tokens as raw RGB — see DESIGN_RULES.md Rule 1. ──────────────────────────────────────────────────────────────────────── */ /* Title row — back button */ .sc-doc-back-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; flex-shrink: 0; background: transparent; border: 1px solid transparent; color: var(--text-primary); text-decoration: none; font-size: 18px; transition: background 0.15s, border-color 0.15s; } .sc-doc-back-btn:hover { background: var(--surface-hover); } /* Title row — title input */ .sc-doc-title-input { flex: 1; height: 40px; padding-block: 0; padding-inline: 12px; font-size: 15px; font-weight: 500; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text-primary); outline: none; transition: border-color 0.15s; } .sc-doc-title-input:focus { border-color: var(--attention); } .sc-doc-title-input::placeholder { color: var(--text-muted); } /* Tab bar — individual tab */ .sc-doc-tab { padding: 6px 16px; border: 1px solid var(--border); border-radius: 4px 4px 0 0; font-size: 13px; cursor: pointer; margin-inline-start: 2px; background: var(--surface-raised); color: var(--text-secondary); font-weight: 400; transition: all 0.15s; } .sc-doc-tab[data-active="true"] { background: var(--surface); color: #125abc; font-weight: 600; border-bottom-color: var(--surface); } [data-theme="dark"] .sc-doc-tab[data-active="true"], /* Editor container — the box wrapping the content area */ .sc-doc-editor-box { border: 1px solid var(--border-strong); border-radius: 0 4px 6px 6px; /* top-left=0 matches tab; all others rounded */ background: var(--surface); /* overflow:clip keeps border-radius visual clipping but does NOT create a scroll container — so position:sticky on the toolbar works against the page scroll */ overflow: clip; } /* Editor area — the actual writing surface */ .sc-doc-editor-area { width: 100%; min-height: 400px; padding: 20px 24px; outline: none; border: none; resize: vertical; line-height: 1.75; font-size: 15px; background: var(--surface); color: var(--text-primary); font-family: var(--font-body); box-sizing: border-box; } .sc-doc-editor-area--mono { min-height: 500px; font-size: 13.5px; line-height: 1.8; font-family: var(--font-mono); } /* Restore UL/OL/LI — Tailwind Preflight resets list-style to none globally */ .sc-doc-editor-area ul, .sc-doc-editor-area ol { padding-left: 1.75em; margin: 0.5em 0; } .sc-doc-editor-area ul { list-style-type: disc; } .sc-doc-editor-area ul ul { list-style-type: circle; } .sc-doc-editor-area ul ul ul { list-style-type: square; } .sc-doc-editor-area ol { list-style-type: decimal; } .sc-doc-editor-area li { margin: 0.2em 0; } /* Dark mode: editor body text should be near-white, not the default dark-theme text-primary */ [data-theme="dark"] .sc-doc-editor-area { color: #dedede; } .sc-doc-editor-area::placeholder { color: var(--text-muted); } /* ── Light mode overrides — hardcoded hex (Vite bundle overrides tokens to raw RGB) ── RULE: Never use var(--token) in these overrides — the Vite bundle redefines tokens as raw RGB components which are invalid without rgb() wrapper. Use hex always. These values match the approved light mode design exactly. See: docs/DESIGN_RULES.md → "CSS Token Conflict" section. ──────────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .sc-doc-back-btn, html:not(.dark) .sc-doc-back-btn { background: transparent; border-color: transparent; color: #1a1d2e; } [data-theme="light"] .sc-doc-back-btn:hover, html:not(.dark) .sc-doc-back-btn:hover { background: rgba(0,0,0,0.05); } [data-theme="light"] .sc-doc-title-input, html:not(.dark) .sc-doc-title-input { background: #ffffff; border-color: #d1d5db; color: #1a1d2e; } [data-theme="light"] .sc-doc-title-input::placeholder, html:not(.dark) .sc-doc-title-input::placeholder { color: #9ca3af; } [data-theme="light"] .sc-doc-title-input:focus, html:not(.dark) .sc-doc-title-input:focus { border-color: #1fa832; } [data-theme="light"] .sc-doc-tab, html:not(.dark) .sc-doc-tab { background: #f3f4f6; border-color: #d1d5db; color: #6b7280; } [data-theme="light"] .sc-doc-tab[data-active="true"], html:not(.dark) .sc-doc-tab[data-active="true"] { background: #ffffff; border-bottom-color: #ffffff; color: #125abc; } [data-theme="light"] .sc-doc-editor-box, html:not(.dark) .sc-doc-editor-box { background: #ffffff; border-color: #d1d5db; } [data-theme="light"] .sc-doc-editor-area, html:not(.dark) .sc-doc-editor-area { background: #ffffff; color: #1f2937; } [data-theme="light"] .sc-doc-toolbar, html:not(.dark) .sc-doc-toolbar { background: #f9fafb; border-bottom-color: #e5e7eb; } [data-theme="light"] .sc-doc-toolbar-btn, html:not(.dark) .sc-doc-toolbar-btn { background: #ffffff; border-color: #d1d5db; color: #374151; } [data-theme="light"] .sc-doc-toolbar-btn:hover, html:not(.dark) .sc-doc-toolbar-btn:hover { background: #f3f4f6; color: #111827; } /* Dark mode — doc button overrides Save → nuclear green (var(--attention) = #39d353, text = #0d1f12) Preview → orange (stays warm, contrasts with green save) Publish/Refresh — unchanged (dark blue + slate read fine on dark) */ /* Dark mode — Save: attention-1 = nuclear green #86FF00 */ [data-theme="dark"] .sc-doc-btn--save { background: #86FF00; color: #1a2a0a; } [data-theme="dark"] .sc-doc-btn--save:hover:not(:disabled) { background: #95ff1a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(134,255,0,0.50); } [data-theme="dark"] .sc-doc-btn--save:disabled { background: rgba(134,255,0,0.45); color: #333; } /* Dark mode — Preview: attention-3 blue, stays blue (user-confirmed) */ [data-theme="dark"] .sc-doc-btn--preview { background: #2a7ae2; } [data-theme="dark"] .sc-doc-btn--preview:hover { box-shadow: 0 4px 12px rgba(42,122,226,0.45); } /* Dark mode — Publish: attention-2 = orange #FF5500 */ [data-theme="dark"] .sc-doc-btn--publish { background: #FF5500; color: #fff; } [data-theme="dark"] .sc-doc-btn--publish:hover:not(:disabled) { background: #ff6a1a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,85,0,0.45); } /* Dark mode — Refresh */ [data-theme="dark"] .sc-doc-btn--refresh { background: #3e4555; } /* Dark mode — editor surface: medium-dark grey, readable */ [data-theme="dark"] .sc-doc-editor-box { background: #272727; border-color: var(--border-strong); } [data-theme="dark"] .sc-doc-editor-area { background: #272727; color: #e8eaf0; /* hardcoded — var(--text-primary) may be overridden by Vite bundle */ } /* Preview iframe container inherits sc-doc-editor-area dark bg */ [data-theme="dark"] .sc-doc-editor-area iframe { background: #272727; color-scheme: dark; } /* Doc editor toolbar — H1 H2 H3 strip + toolbar buttons */ .sc-doc-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-raised); /* Sticky: locks to browser top when user scrolls down in edit mode */ position: sticky; top: 0; z-index: 40; } .sc-doc-toolbar-btn { padding: 3px 8px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); color: var(--text-secondary); cursor: pointer; font-size: 13px; line-height: 1.4; font-family: inherit; transition: background 0.1s, color 0.1s; } .sc-doc-toolbar-btn:hover { background: var(--surface-hover); color: var(--text-primary); } /* Fix 4: Title bar — use surface (slightly lighter than surface-raised) for contrast */ /* Dark overrides — title row */ [data-theme="dark"] .sc-doc-back-btn { background: transparent; border-color: transparent; } [data-theme="dark"] .sc-doc-title-input { background: #272727; border-color: #3d3d3d; color: #e8eaf0; } /* Dark overrides — toolbar (editor header bar) */ [data-theme="dark"] .sc-doc-toolbar { background: #383838; border-color: #4a4a4a; } [data-theme="dark"] .sc-doc-toolbar-btn { background: #2e2e2e; border-color: #4a4a4a; color: #c8c8c8; } [data-theme="dark"] .sc-doc-toolbar-btn:hover { background: #3a3a3a; color: #ffffff; } /* Dark overrides — active tab + tab bar */ [data-theme="dark"] .sc-doc-tab { background: #1e1e1e; border-color: #3a3a3a; color: #9898a8; /* lightened from #8a8a9a for better readability */ } [data-theme="dark"] .sc-doc-tab[data-active="true"] { background: #383838; border-color: #3a3a3a; border-bottom-color: #383838; color: #86FF00; } /* Dark — History tab icon: darken SVG stroke so it doesn't wash out */ /* Tab SVG icons inherit the tab's text color exactly */ .sc-doc-tab svg { stroke: currentColor; opacity: 0.9; } .sc-doc-tab[data-active="true"] svg { stroke: currentColor; opacity: 1; } /* Endcap pattern — icon tile fused to input as one visual unit Usage:
icon
Icon = left cap; input abuts it — no gap, no left border. Design convention: wrap only icon+input in sc-endcap-group; back/delete buttons stay outside. */ .sc-endcap-group { display:flex; align-items:stretch; flex:1; min-width:0; } .sc-endcap-icon { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; border-radius:4px 0 0 4px; font-size:16px; user-select:none; } .sc-endcap-input { flex:1; height:40px; padding:0 12px; font-size:15px; font-weight:500; background:var(--surface-raised); border:1px solid var(--border-strong); border-left:none; border-radius:0 4px 4px 0; color:var(--text-primary); outline:none; transition:border-color 0.15s; min-width:0; } .sc-endcap-input:focus { border-color:var(--attention); } .sc-endcap-input::placeholder { color:var(--text-muted); }