/* Comment widget - "Marker" design language. Self-contained: graphite layers, one highlighter-yellow accent, Space Grotesk UI + JetBrains Mono details. Nothing here inherits from the host site on purpose - it must read as its own instrument floating over any page. All motion is GSAP-driven (comments.js); CSS keeps only hover states and the reduced-motion fallbacks. Fonts are injected as a by comments.js. */ /* The accent is declared on :root and nowhere else. comments.js sets it on from the data-accent attribute, and a declaration on .cb-root - which is what this file used to carry - shadows that, so the attribute silently did nothing. */ :root { --cb-accent: #F08F48; } .cb-root { --cb-accent-ink: #161304; --cb-bg: #101214; --cb-bg2: #171a1f; --cb-bg3: #1f232a; --cb-line: rgba(255, 255, 255, 0.08); --cb-text: #f2f4f6; --cb-muted: #9aa3ad; --cb-danger: #ff7a70; --cb-radius: 10px; --cb-radius-s: 8px; --cb-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45); --cb-font: 'Space Grotesk', system-ui, sans-serif; --cb-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace; font-family: var(--cb-font); color: var(--cb-text); text-align: left; } .cb-root [hidden] { display: none; } /* The widget carries no reset of its own and a page's reset does not reach in here. Without this the 100%-wide fields add their padding and border on top of that 100%, ending up wider than the popover, which then clips them on the right. The drawer is the other box that sets a width and a padding together. */ .cb-input, .cb-ta, .cb-drawer { box-sizing: border-box; } .cb-root button { font-family: inherit; } /* ---------- dock (bottom right) ---------- */ .cb-dock { position: fixed; right: 20px; bottom: 20px; z-index: 950; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .cb-fab { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 52px; min-height: 52px; padding: 0 16px; border: none; border-radius: 999px; background: var(--cb-accent); color: var(--cb-accent-ink); font-size: 14px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; box-shadow: var(--cb-shadow), 0 0 0 1px rgba(255, 255, 255, 0.18); } .cb-fab:hover { filter: brightness(1.08); } .cb-fab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .cb-fab svg { display: block; } .cb-fab-add { padding: 0; } .cb-fab-view { background: var(--cb-bg2); color: var(--cb-text); box-shadow: var(--cb-shadow), 0 0 0 1px var(--cb-line); font-weight: 600; } .cb-fab-view:hover { background: var(--cb-bg3); } .cb-count { min-width: 20px; padding: 2px 7px; border-radius: 999px; background: var(--cb-accent); color: var(--cb-accent-ink); font-family: var(--cb-mono); font-size: 11px; font-weight: 700; text-align: center; } /* ---------- pick mode ---------- */ body.cb-picking { cursor: crosshair; } .cb-spot { position: fixed; z-index: 940; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(8, 9, 11, 0.55); pointer-events: none; } /* marching ants: animated dash offset on an svg rect, 1.5px stroke */ .cb-ants { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; } .cb-ants rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); rx: 6px; fill: none; stroke: var(--cb-accent); stroke-width: 1.5px; stroke-dasharray: 7 5; } .cb-ants-fallback rect { animation: cb-ants-march 0.5s linear infinite; } @keyframes cb-ants-march { to { stroke-dashoffset: -12; } } .cb-spot-tag { position: absolute; top: -30px; left: 0; max-width: 320px; padding: 4px 9px; border-radius: 6px; background: var(--cb-bg); color: var(--cb-accent); font-family: var(--cb-mono); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cb-banner { position: fixed; top: 16px; left: 50%; z-index: 946; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 16px; border-radius: 999px; background: var(--cb-bg); box-shadow: var(--cb-shadow), 0 0 0 1px var(--cb-line); color: var(--cb-text); font-size: 13px; font-weight: 500; } .cb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cb-accent); } .cb-banner kbd { padding: 2px 7px; border-radius: 5px; background: var(--cb-bg3); color: var(--cb-muted); font-family: var(--cb-mono); font-size: 11px; } .cb-banner .cb-btn { padding: 6px 14px; font-size: 12px; } /* ---------- pins ---------- */ .cb-marker { position: absolute; z-index: 945; border: none; background: none; padding: 0; cursor: pointer; /* tip sits on the exact click point */ transform: translate(-50%, -100%); } .cb-pin { display: flex; align-items: center; justify-content: center; min-width: 26px; min-height: 26px; padding: 0 4px; border-radius: 999px 999px 999px 2px; background: var(--cb-accent); color: var(--cb-accent-ink); font-family: var(--cb-mono); font-size: 12px; font-weight: 700; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.22); } .cb-pin::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 6px; height: 6px; background: var(--cb-accent); transform: translateX(-50%) rotate(45deg); border-radius: 1px; } .cb-mc { position: absolute; right: -7px; top: -7px; min-width: 16px; padding: 1px 4px; border-radius: 999px; background: var(--cb-bg); color: var(--cb-accent); font-family: var(--cb-mono); font-size: 10px; font-weight: 700; text-align: center; box-shadow: 0 0 0 1px var(--cb-line); } .cb-ring { position: absolute; left: 50%; top: 100%; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--cb-accent); transform: translate(-50%, -50%); pointer-events: none; } /* ---------- flash on jump ---------- */ .cb-flashbox { position: absolute; z-index: 944; border-radius: 8px; pointer-events: none; } /* ---------- composer popover ---------- */ .cb-pop { /* absolute, not fixed: the composer belongs to the spot being commented on, so it has to travel with the page. its containing block is the document (nothing above it is positioned), which is the same basis the pins use. comments.js adds the scroll offsets when it places it. */ position: absolute; z-index: 970; /* 100%, not 100vw: a percentage resolves against the containing block, which is the viewport minus the scrollbar, where 100vw includes it and lets the popover sit a scrollbar's width past the right edge */ width: min(344px, calc(100% - 24px)); border-radius: var(--cb-radius); background: var(--cb-bg); box-shadow: var(--cb-shadow), 0 0 0 1px var(--cb-line); overflow: hidden; } .cb-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: var(--cb-bg2); box-shadow: 0 1px 0 var(--cb-line); } .cb-pop-title { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .cb-pop-target { padding: 9px 14px 0; color: var(--cb-muted); font-family: var(--cb-mono); font-size: 11px; } .cb-pop-body { padding: 10px 14px 14px; } .cb-pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } /* ---------- drawer (thread list) ---------- */ .cb-scrim { position: fixed; inset: 0; z-index: 960; background: rgba(6, 7, 9, 0.5); } .cb-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 965; width: min(392px, 94vw); background: var(--cb-bg); box-shadow: 1px 0 0 var(--cb-line), -24px 0 60px rgba(0, 0, 0, 0.45); } .cb-drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--cb-bg2); box-shadow: 0 1px 0 var(--cb-line); } .cb-drawer-title { font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .cb-drawer-head .cb-count { margin-left: auto; } .cb-threads { padding: 6px 16px 28px; overflow-y: auto; max-height: calc(100vh - 53px); } .cb-thread { padding: 14px 0; box-shadow: 0 1px 0 var(--cb-line); } .cb-trow { display: flex; gap: 10px; } .cb-ava { display: flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--cb-accent); color: var(--cb-accent-ink); font-family: var(--cb-mono); font-size: 12px; font-weight: 700; } .cb-tmain { flex: 1 1 auto; min-width: 0; } .cb-tmeta { display: flex; align-items: baseline; gap: 8px; } .cb-who { font-size: 13px; font-weight: 700; } .cb-when { font-family: var(--cb-mono); font-size: 10px; color: var(--cb-muted); } .cb-chip { display: inline-block; margin-top: 5px; max-width: 100%; padding: 2px 8px; border-radius: 5px; background: var(--cb-bg3); color: var(--cb-accent); font-family: var(--cb-mono); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .cb-chip:hover, .cb-chip:focus-visible { background: #2b313a; color: #ffe27a; outline: none; } .cb-text { margin-top: 6px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; } .cb-replies { margin-top: 10px; padding-left: 12px; box-shadow: inset 2px 0 0 var(--cb-bg3); } .cb-reply { padding: 8px 0; } .cb-del { flex: none; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; padding: 2px 4px; border-radius: 5px; color: var(--cb-muted); cursor: pointer; } .cb-del svg { display: block; } .cb-del:hover { color: var(--cb-danger); } .cb-replybox { display: flex; gap: 8px; margin-top: 10px; align-items: flex-start; } /* ---------- inputs + buttons ---------- */ .cb-input, .cb-ta { display: block; font: inherit; font-size: 13.5px; color: var(--cb-text); background: var(--cb-bg2); border: 1px solid var(--cb-line); border-radius: var(--cb-radius-s); padding: 9px 11px; } .cb-ta { width: 100%; min-height: 84px; margin-top: 10px; resize: vertical; } .cb-pop .cb-input { width: 100%; margin-top: 10px; } .cb-input:focus, .cb-ta:focus { outline: none; border-color: var(--cb-accent); box-shadow: 0 0 0 1px var(--cb-accent); } .cb-input::placeholder, .cb-ta::placeholder { color: var(--cb-muted); } .cb-replybox .cb-input { flex: 1 1 auto; min-width: 0; margin-top: 0; } .cb-btn { border: none; border-radius: var(--cb-radius-s); padding: 9px 16px; background: var(--cb-bg3); color: var(--cb-text); font-size: 13px; font-weight: 600; cursor: pointer; } .cb-btn:hover { background: #272c34; } .cb-btn:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 1px; } .cb-btn.cb-primary { background: var(--cb-accent); color: var(--cb-accent-ink); } .cb-btn.cb-primary:hover { filter: brightness(1.08); } .cb-err { margin: 10px 0 0; font-size: 12.5px; color: var(--cb-danger); } .cb-x { min-width: 28px; min-height: 28px; border: none; border-radius: 7px; background: none; color: var(--cb-muted); font-size: 18px; line-height: 1; cursor: pointer; } .cb-x:hover { color: var(--cb-text); background: var(--cb-bg3); } .cb-empty { padding: 30px 8px; text-align: center; color: var(--cb-muted); font-size: 13px; } .cb-offline { color: var(--cb-danger); } @media (max-width: 560px) { .cb-drawer { width: 100vw; } .cb-banner { left: 12px; right: 12px; justify-content: space-between; } }