/* ============================================================================ * Claude — L3 free-selector patches * * Everything here is something the token layer CANNOT express: the radius * ladder, the pill composer, sidebar geometry, and the DSH-specific tool-call * cards that claude.ai has no equivalent for. * * SELECTOR POLICY — every attribute used below was verified against the * installed bundles, not guessed. The contract surface actually stamped at * runtime is: * * data-dsh-surface : root | sidebar | conversation | session-header | * composer | details | overlay | settings * data-dsh-part : message-row | message-body | scrollport | composer-input | * composer-chip | queue-dock | turn-tail | resize-handle | * new-session | sidebar-entry * data-dsh-plugin : doctor | liangshen | pet | preset-center | * remote-web-ui | session-archive | ssh | task-board | usage * data-pane : sidebar | conversation | details * plus [data-composer-card], [data-composer-seat], [data-shell-overlay], * [data-chat-flow-kind], [data-slot="…"], [role], [aria-*] * * NEVER [class*=…] (hash-named, warns, breaks on rebuild) and NEVER a * self-written html[…]-rooted state selector: the loader prefixes blindly, so * `html[data-we-wallpaper] x` becomes `html[data-dsh-skin="claude"] html[…] x` * and never matches. Background state therefore uses the body:is([…]) idiom. * * All selectors are force-scoped under html[data-dsh-skin="claude"]. * ========================================================================== */ /* --------------------------------------------------------------------------- * 1. Palette plumbing * ------------------------------------------------------------------------- */ html[data-dsh-skin="claude"] { --cl-serif: 'Newsreader', 'Noto Serif CJK SC', 'Source Han Serif SC', 'Songti SC', Georgia, serif; --cl-sans: 'Inter', 'Noto Sans CJK SC', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cl-mono: 'JetBrains Mono', 'Noto Sans Mono CJK SC', ui-monospace, SFMono-Regular, Menlo, monospace; --cl-coral: #d97757; --cl-coral-active: #a9583e; --cl-canvas: #faf9f5; --cl-soft: #f5f0e8; --cl-card: #efe9de; --cl-ink: #141413; --cl-hairline: #e6dfd8; --cl-radius-md: 8px; --cl-radius-lg: 12px; --cl-radius-xl: 16px; } html[data-dsh-skin="claude"] body { --cl-serif: 'Newsreader', 'Noto Serif CJK SC', 'Source Han Serif SC', 'Songti SC', Georgia, serif; --cl-sans: 'Inter', 'Noto Sans CJK SC', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cl-mono: 'JetBrains Mono', 'Noto Sans Mono CJK SC', ui-monospace, SFMono-Regular, Menlo, monospace; --cl-coral: #d97757; --cl-coral-active: #a9583e; --cl-canvas: #faf9f5; --cl-soft: #f5f0e8; --cl-card: #efe9de; --cl-ink: #141413; --cl-hairline: #e6dfd8; --cl-radius-md: 8px; --cl-radius-lg: 12px; --cl-radius-xl: 16px; } html[data-dsh-skin="claude"] body[data-ds-dark-theme] { --cl-coral: #e08a6a; --cl-coral-active: #d97757; --cl-canvas: #181715; --cl-soft: #1f1e1b; --cl-card: #252320; --cl-ink: #faf9f5; --cl-hairline: #ffffff1f; } /* --------------------------------------------------------------------------- * 2. Typography — the editorial voice * Claude's split is unbreakable: serif for reading, sans for chrome. * ------------------------------------------------------------------------- */ html[data-dsh-skin="claude"] body { font-family: var(--cl-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* The reading column carries the serif. `message-body` is the real part name. */ html[data-dsh-skin="claude"] [data-dsh-part="message-body"] :is(p, li, blockquote, td) { font-family: var(--cl-serif); font-optical-sizing: auto; font-kerning: normal; letter-spacing: 0; } /* Headings: serif, weight 400, negative tracking. DESIGN-claude.md: "Copernicus at 700 reads as bombastic; the system stays at 400." */ html[data-dsh-skin="claude"] :is(h1, h2, h3) { font-family: var(--cl-serif) !important; font-weight: 400 !important; letter-spacing: -0.02em; } html[data-dsh-skin="claude"] h1 { letter-spacing: -0.03em; } /* Code stays monospace — never let the serif leak in. */ html[data-dsh-skin="claude"] :is(code, pre, kbd, samp) { font-family: var(--cl-mono); font-variant-ligatures: none; } /* --------------------------------------------------------------------------- * 3. Surfaces, hairlines, elevation * Claude's philosophy: colour-block first, shadow rare. * ------------------------------------------------------------------------- */ html[data-dsh-skin="claude"] [data-dsh-surface="sidebar"], html[data-dsh-skin="claude"] [data-pane="sidebar"] { border-right: 1px solid var(--dsw-alias-border-l1); } html[data-dsh-skin="claude"] [role="dialog"], html[data-dsh-skin="claude"] [data-dsh-surface="overlay"], html[data-dsh-skin="claude"] [data-shell-overlay] { border: 1px solid var(--dsw-alias-border-l1); border-radius: var(--cl-radius-lg); box-shadow: var(--dsw-shadow-lv3); } html[data-dsh-skin="claude"] [role="tooltip"] { border-radius: 6px; font-family: var(--cl-sans); font-size: 12px; letter-spacing: 0; } /* --------------------------------------------------------------------------- * 4. The composer — the signature pill * ------------------------------------------------------------------------- */ html[data-dsh-skin="claude"] [data-composer-card] { border-radius: 26px; border: 1px solid var(--cl-hairline); background: var(--dsw-specific-input-major); box-shadow: 0 1px 3px rgba(20, 20, 19, 0.04); transition: border-color .15s ease, box-shadow .15s ease; } html[data-dsh-skin="claude"] [data-composer-card]:focus-within { border-color: color-mix(in srgb, var(--cl-coral) 55%, var(--cl-hairline)); /* 3px coral ring at ~15% — DESIGN-claude.md text-input-focused */ box-shadow: 0 0 0 3px color-mix(in srgb, var(--cl-coral) 15%, transparent); } html[data-dsh-skin="claude"] [data-composer-seat] { font-family: var(--cl-sans); } /* --------------------------------------------------------------------------- * 5. Message rows * User turns read as a soft card; assistant turns stay on the canvas. * ------------------------------------------------------------------------- */ html[data-dsh-skin="claude"] [data-chat-flow-kind="user"] { border-radius: var(--cl-radius-lg); } /* --------------------------------------------------------------------------- * 6. Tool-call cards — DSH-specific, so they get Claude's card language rather * than being left stock (which would read as cold grey blocks on cream). * * NO overflow:hidden on any of these nodes, and turn-process is not styled as a * card at all. * * The skin previously put `overflow:hidden` on tool-call, turn-process and * workflow-run together, to clip child backgrounds against the rounded corner. * That was removed for a simple reason that does not depend on any theory about * the bug: these nodes carry content we do not control (tool output, thinking * text), and clipping them can only ever lose information. A skin must not be * able to do that. The owner sets no overflow here either. * * It is NOT established that this caused the reported "thinking sometimes not * shown" bug — an A/B test of overflow:hidden against a control produced * identical results, so that theory was not confirmed. See the note in the * repository history; the fix stands on the principle, not on that diagnosis. * ------------------------------------------------------------------------- */ html[data-dsh-skin="claude"] [data-chat-flow-kind="tool-call"], html[data-dsh-skin="claude"] [data-chat-flow-kind="workflow-run"] { border-radius: var(--cl-radius-lg); border: 1px solid var(--dsw-alias-border-l1); background: var(--dsw-alias-bg-layer-1); } /* The thinking block: colours only, never geometry. */ html[data-dsh-skin="claude"] [data-chat-flow-kind="turn-process"] { border-radius: var(--cl-radius-lg); } html[data-dsh-skin="claude"] [data-chat-flow-kind] { font-family: var(--cl-sans); } /* --------------------------------------------------------------------------- * 7. Controls * ------------------------------------------------------------------------- */ html[data-dsh-skin="claude"] [data-dsh-part="sidebar-entry"] { border-radius: var(--cl-radius-md); } html[data-dsh-skin="claude"] [role="treeitem"][aria-selected="true"] { border-radius: var(--cl-radius-md); } html[data-dsh-skin="claude"] button, html[data-dsh-skin="claude"] [role="button"], html[data-dsh-skin="claude"] [role="tab"], html[data-dsh-skin="claude"] [role="menuitem"] { border-radius: var(--cl-radius-md); } html[data-dsh-skin="claude"] :focus-visible { outline: 2px solid var(--cl-coral); outline-offset: 2px; } html[data-dsh-skin="claude"] button, html[data-dsh-skin="claude"] [role="button"], html[data-dsh-skin="claude"] [role="tab"], html[data-dsh-skin="claude"] a { transition: background-color .13s ease, border-color .13s ease, color .13s ease, opacity .13s ease; } /* --------------------------------------------------------------------------- * 8. Blend the third-party chrome into Claude's language * These render their own glyphs/art; tokens alone leave them looking foreign. * All plugin names below are verified emitters. * ------------------------------------------------------------------------- */ html[data-dsh-skin="claude"] [data-dsh-plugin="liangshen"] { border-radius: var(--cl-radius-lg); } html[data-dsh-skin="claude"] [data-dsh-part="lever-track"] { border-radius: 9999px; } html[data-dsh-skin="claude"] [data-dsh-part="lever-arm"] { border-radius: 9999px; } html[data-dsh-skin="claude"] [data-dsh-plugin="remote-web-ui"], html[data-dsh-skin="claude"] [data-dsh-plugin="task-board"], html[data-dsh-skin="claude"] [data-dsh-plugin="usage"], html[data-dsh-skin="claude"] [data-dsh-plugin="ssh"], html[data-dsh-skin="claude"] [data-dsh-plugin="session-archive"], html[data-dsh-skin="claude"] [data-dsh-plugin="preset-center"], html[data-dsh-skin="claude"] [data-dsh-plugin="doctor"] { border-radius: var(--cl-radius-lg); font-family: var(--cl-sans); } /* --------------------------------------------------------------------------- * 9. Glass state — when a wallpaper/backdrop is active the panels go frosted. * Idiom taken from the real skins: body:is([…]), never html[…]. * ------------------------------------------------------------------------- */ html[data-dsh-skin="claude"] body:is([data-dsh-backdrop-active], [data-we-wallpaper]) [data-composer-card] { backdrop-filter: blur(10px); background: color-mix(in srgb, var(--dsw-specific-input-major) 78%, transparent); } html[data-dsh-skin="claude"] body:is([data-dsh-backdrop-active], [data-we-wallpaper]) [data-dsh-surface="sidebar"] { backdrop-filter: blur(10px); } /* --------------------------------------------------------------------------- * 10. Scrollbars * ------------------------------------------------------------------------- */ html[data-dsh-skin="claude"] ::-webkit-scrollbar-thumb { border-radius: 9999px; background: var(--dsw-alias-scrollbar-bg-l1); } html[data-dsh-skin="claude"] ::-webkit-scrollbar-thumb:hover { background: var(--dsw-alias-scrollbar-hover-l1); } /* --------------------------------------------------------------------------- * 11. Make room for the crab * * The queued-message dock (插话) is the composer stack's other row: it sits * directly ABOVE the composer card and, like the card, spans the full width. * Clawd (crab-plugin/) stands on the card's top-right, so the two collide — * the crab covered the dock's right end, which is where the per-row * edit/delete buttons live. * * Shortening the dock is safe because its row is already built for it: * .row display:flex, width:100% * .preview overflow:hidden + text-overflow:ellipsis -> the text truncates * .actions flex:none -> buttons never squash * So the dock simply ends before the crab, and nothing becomes unreachable. * * Clearance maths: the crab is anchored at right:32px and is ~41px wide, so it * occupies the rightmost ~73px. 80px leaves a small breathing gap. * WIDTH_VAR is exposed so this is tunable without hunting the number down. * * `[data-queue-dock]` is the owner's own semantic attribute (NOT a CSS-Modules * hash), so this survives a DSH rebuild. * ------------------------------------------------------------------------- */ html[data-dsh-skin="claude"] { --cl-crab-clearance: 80px; } html[data-dsh-skin="claude"] body { --cl-crab-clearance: 80px; } html[data-dsh-skin="claude"] [data-queue-dock] { width: calc(100% - var(--cl-crab-clearance)); } /* --------------------------------------------------------------------------- * 12. Reduced motion * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html[data-dsh-skin="claude"] button, html[data-dsh-skin="claude"] [role="button"], html[data-dsh-skin="claude"] [role="tab"], html[data-dsh-skin="claude"] a, html[data-dsh-skin="claude"] ::-webkit-scrollbar-thumb { transition: none; } } /* ============================================================================ * Greeting pixel sparkle * * GENERATED by scripts/gen-crab.py — do not hand-edit. * * One 3x3px dot replicated by `box-shadow`. No image, no request, no asset * weight. It sits beside the greeting on an empty session. * * The composer crab is NOT drawn here: that is crab-plugin/, which mounts a * real element so it can be clicked. See this file's generator for the history. * ========================================================================== */ html[data-dsh-skin="claude"] { --cl-spark: #141413; } html[data-dsh-skin="claude"] body { --cl-spark: #141413; } html[data-dsh-skin="claude"] body[data-ds-dark-theme] { --cl-spark: #faf9f5; } html[data-dsh-skin="claude"] [data-slot="conversation.hero.brand.mark"] { position: relative; } html[data-dsh-skin="claude"] [data-slot="conversation.hero.brand.mark"]::after { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 3px; background: transparent; pointer-events: none; box-shadow: 39px 0 0 var(--cl-spark), 42px 0 0 var(--cl-spark), 45px 0 0 var(--cl-spark), 45px 3px 0 var(--cl-spark), 42px 6px 0 var(--cl-spark), 21px 12px 0 var(--cl-spark), 27px 12px 0 var(--cl-spark), 33px 12px 0 var(--cl-spark), 42px 12px 0 var(--cl-spark); animation: cl-spark-float 2.83s cubic-bezier(.37,0,.22,1) .41s infinite; } @keyframes cl-spark-float { 0%, 100% { transform: translateY(0); opacity: .8; } 50% { transform: translateY(-4px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { html[data-dsh-skin="claude"] [data-slot="conversation.hero.brand.mark"]::after { animation: none; } } html[data-dsh-skin="claude"] [id="root"] { background: transparent; } html[data-dsh-skin="claude"] body { --shiki-background: var(--dsw-alias-markdown-code-block); }