/* ════════════════════════════════════════════════════════════════════ icon-picker.css — standalone stylesheet for the icon/emoji/SVG picker. Extracted from TaskMaster DesignV2 (src/main.css .cat-editor block + tokens.css). The .cat-* rules are verbatim; what was added for standalone use is scoping: 1. The design tokens the modal consumes are declared ON the backdrop (not :root), so the picker looks exactly like the original in any host page without leaking variables into it. Every token can be overridden from outside via a --ip-* variable on :root or body, e.g. :root { --ip-orange: #7c3aed; } to re-accent. 2. Dark mode mirrors the original app mechanism: set and the dark token set applies. 3. box-sizing / button / input resets the app applied globally are scoped to the backdrop subtree here. ════════════════════════════════════════════════════════════════════ */ /* ── Tokens (light) + baseline, scoped to the picker ─────────────── */ .cat-editor-backdrop { --paper: var(--ip-paper, #f4efe6); --paper-2: var(--ip-paper-2, #ebe5d8); --ink: var(--ip-ink, #0e0e0c); --orange: var(--ip-orange, #ff4612); --line: var(--ip-line, #0e0e0c1f); --muted: var(--ip-muted, #0e0e0c88); --muted-2: var(--ip-muted-2, #0e0e0c66); --bad: var(--ip-bad, #c4321a); --font-sans: var(--ip-font-sans, 'Archivo', -apple-system, sans-serif); --font-mono: var(--ip-font-mono, 'JetBrains Mono', ui-monospace, monospace); --r-lg: var(--ip-r-lg, 14px); --r-pill: var(--ip-r-pill, 999px); /* body-level baseline the modal inherited in the original app */ font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--ink); -webkit-font-smoothing: antialiased; } /* ── Tokens (dark) — same mechanism as the app: */ [data-theme="dark"] .cat-editor-backdrop { --paper: var(--ip-paper-dark, #14130f); --paper-2: var(--ip-paper-2-dark, #1d1c17); --ink: var(--ip-ink-dark, #f4efe6); --orange: var(--ip-orange-dark, #ff5a2a); --line: var(--ip-line-dark, #f4efe61f); --muted: var(--ip-muted-dark, #f4efe688); --muted-2: var(--ip-muted-2-dark, #f4efe666); --bad: var(--ip-bad-dark, #ee6a55); } /* ── Scoped resets (global in the original app) ──────────────────── */ .cat-editor-backdrop, .cat-editor-backdrop * { box-sizing: border-box; margin: 0; padding: 0; } .cat-editor-backdrop button { font-family: inherit; cursor: pointer; } .cat-editor-backdrop input, .cat-editor-backdrop textarea { font-family: inherit; } /* ── Scrollbars inside the picker (WebKit) ───────────────────────── */ .cat-editor-backdrop ::-webkit-scrollbar { width: 8px; height: 8px; } .cat-editor-backdrop ::-webkit-scrollbar-track { background: transparent; } .cat-editor-backdrop ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } .cat-editor-backdrop ::-webkit-scrollbar-thumb:hover { background: var(--muted-2); } /* ── Buttons (subset of tokens.css the modal uses) ───────────────── */ .cat-editor-backdrop .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; transition: transform 80ms ease; white-space: nowrap; } .cat-editor-backdrop .btn:active { transform: translateY(1px); } .cat-editor-backdrop .btn.sm { padding: 6px 12px; font-size: 10px; } .cat-editor-backdrop .btn.accent { background: var(--orange); color: #fff; border-color: var(--orange); } .cat-editor-backdrop .btn.ghost { border-color: transparent; } .cat-editor-backdrop .btn.ghost:hover { border-color: var(--ink); } /* ════════════════════════════════════════════════════════════════════ Everything below is VERBATIM from DesignV2 src/main.css (the .cat-editor block). Do not restyle here — this is the shipped design. ════════════════════════════════════════════════════════════════════ */ .cat-editor-backdrop { position:fixed; inset:0; background:color-mix(in oklab, var(--paper) 70%, transparent); backdrop-filter: blur(4px); z-index:120; display:flex; align-items:center; justify-content:center; padding:32px; } .cat-editor-modal { width:100%; max-width:540px; max-height:calc(100vh - 64px); background:var(--paper-2); border:1.5px solid var(--orange); border-radius:var(--r-lg); display:flex; flex-direction:column; overflow:hidden; } .cat-editor-head { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px dotted var(--line); } .cat-editor-preview { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; } .cat-preview-swatch { width:32px; height:32px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; color:#fff; } .cat-preview-swatch svg { width:18px; height:18px; } .cat-preview-emoji { font-size:18px; line-height:1; } .cat-editor-title { flex:1; min-width:0; font-family:var(--font-sans); font-size:18px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); margin:0; } .cat-editor-x { width:28px; height:28px; padding:0; border:none; background:transparent; color:var(--muted); cursor:pointer; font-family:var(--font-mono); font-size:18px; line-height:1; border-radius:4px; } .cat-editor-x:hover { color:var(--ink); background:var(--paper); } .cat-editor-body { flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; gap:14px; } .cat-editor-field { display:flex; flex-direction:column; gap:6px; } .cat-editor-row-label { font-family:var(--font-mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); } .cat-opacity-pct { color:var(--ink); margin-left:6px; } .cat-name-input { width:100%; padding:8px 10px; font-family:var(--font-sans); font-size:14px; font-weight:600; background:var(--paper); border:1px solid var(--line); border-radius:4px; color:var(--ink); outline:none; } .cat-name-input:focus { border-color:var(--orange); } .cat-name-input.invalid { border-color:var(--bad); box-shadow:0 0 0 2px color-mix(in oklab, var(--bad) 25%, transparent); } .cat-tabs { display:flex; gap:4px; } .cat-tab { padding:5px 12px; font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; background:transparent; border:1px solid var(--line); border-radius:4px; color:var(--muted); cursor:pointer; } .cat-tab:hover { color:var(--ink); } .cat-tab.active { border-color:var(--orange); color:var(--orange); background:transparent; } .cat-tab-body { display:flex; flex-direction:column; gap:8px; padding-top:6px; } .cat-search-input { width:100%; padding:6px 10px; font-family:var(--font-mono); font-size:11px; background:var(--paper); border:1px solid var(--line); border-radius:4px; color:var(--ink); outline:none; } .cat-search-input:focus { border-color:var(--orange); } .cat-icon-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap:4px; max-height:240px; overflow-y:auto; padding:4px; border:1px solid var(--line); border-radius:4px; background:var(--paper); } .cat-icon-tile { width:100%; aspect-ratio:1/1; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid transparent; border-radius:4px; background:transparent; color:var(--ink); cursor:pointer; padding:0; } .cat-icon-tile:hover { background:var(--paper-2); } .cat-icon-tile.active { border-color:var(--orange); } .cat-icon-tile svg { width:18px; height:18px; } .cat-emoji-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap:4px; max-height:240px; overflow-y:auto; padding:4px; border:1px solid var(--line); border-radius:4px; background:var(--paper); } .cat-emoji-tile { width:100%; aspect-ratio:1/1; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid transparent; border-radius:4px; background:transparent; cursor:pointer; font-size:20px; line-height:1; padding:0; } .cat-emoji-tile:hover { background:var(--paper-2); } .cat-emoji-tile.active { border-color:var(--orange); } .cat-emoji-tile svg { width:22px; height:22px; } .cat-preview-swatch svg.twemoji, .cat-preview-swatch > svg { width:20px; height:20px; } .cat-svg-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap:6px; min-height:60px; padding:6px; border:1px solid var(--line); border-radius:4px; background:var(--paper); } .cat-svg-tile { width:100%; aspect-ratio:1/1; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid transparent; border-radius:4px; background:transparent; color:var(--ink); cursor:pointer; padding:4px; } .cat-svg-tile:hover { background:var(--paper-2); } .cat-svg-tile.active { border-color:var(--orange); } .cat-svg-tile svg { max-width:100%; max-height:100%; } .cat-svg-add { display:flex; flex-direction:column; gap:6px; align-items:flex-start; } .cat-svg-input { width:100%; min-height:64px; padding:6px 10px; font-family:var(--font-mono); font-size:10px; background:var(--paper); border:1px solid var(--line); border-radius:4px; color:var(--ink); outline:none; resize:vertical; } .cat-svg-input:focus { border-color:var(--orange); } .cat-empty-tile { grid-column: 1 / -1; padding:12px; text-align:center; font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; color:var(--muted); } .cat-icon-fallback { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:14px; color:var(--muted-2); } .cat-icon-spinner { display:inline-block; width:10px; height:10px; border:1.5px solid var(--line); border-top-color:var(--orange); border-radius:50%; animation: cat-spin 0.7s linear infinite; } @keyframes cat-spin { to { transform: rotate(360deg); } } .cat-swatch-row { display:flex; flex-wrap:wrap; gap:4px; align-items:center; } .cat-swatch { width:24px; height:24px; padding:0; border:1.5px solid var(--line); border-radius:4px; cursor:pointer; } .cat-swatch.active { border-color:var(--ink); box-shadow:0 0 0 2px var(--orange); } /* "No background" swatch: checkered transparency pattern. */ .cat-swatch-none { background: linear-gradient(45deg, var(--line) 25%, transparent 25%), linear-gradient(-45deg, var(--line) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--line) 75%), linear-gradient(-45deg, transparent 75%, var(--line) 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0; background-color: var(--paper); position:relative; } .cat-swatch-none::after { content:""; position:absolute; inset:3px; border:1.5px solid var(--bad); border-radius:2px; background:linear-gradient(135deg, transparent calc(50% - 1px), var(--bad) 50%, transparent calc(50% + 1px)); } /* Preview swatch in "no background" mode: drop the coloured pill, show only the icon (icon stroke inherits --ink, emoji renders bare). */ .cat-preview-no-bg { color: var(--ink); } .cat-preview-no-bg svg { color: inherit; } .cat-hex-input { margin-left:auto; width:96px; padding:5px 8px; font-family:var(--font-mono); font-size:11px; background:var(--paper); border:1px solid var(--line); border-radius:4px; color:var(--ink); outline:none; text-transform:uppercase; } .cat-hex-input:focus { border-color:var(--orange); } /* (.cat-hex-text-input — the label variant's text-colour hex field — has no dedicated rule in the original app either; kept unstyled for parity.) */ .cat-opacity-slider { width:100%; -webkit-appearance:none; appearance:none; height:4px; background:var(--line); border-radius:2px; outline:none; } .cat-opacity-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:var(--orange); border:2px solid var(--paper); cursor:pointer; } .cat-opacity-slider::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--orange); border:2px solid var(--paper); cursor:pointer; } .cat-editor-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 18px; border-top:1px dotted var(--line); background:color-mix(in oklab, var(--paper) 50%, var(--paper-2)); } .cat-editor-foot .btn { padding:7px 14px; font-size:10px; } .cat-foot-spacer { flex:1; } .cat-editor-foot-right { display:flex; gap:8px; } .cat-btn-delete { color:var(--bad); } .cat-btn-delete:hover { border-color:var(--bad); color:var(--bad); } .cat-editor-error { padding:0 18px; color:var(--bad); font-family:var(--font-mono); font-size:10px; letter-spacing:0.04em; min-height:0; } .cat-editor-error:not(:empty) { padding-bottom:10px; } /* Label preview pill in modal header (label variant) — production parity: 20px tall, 10px radius, 0 6px padding, font-weight:600 sample text. */ .label-preview-pill { display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius:10px; font-family:var(--font-sans); font-size:11px; font-weight:600; white-space:nowrap; }