/* Shared item picker — the button beside an id field, and the popover it opens. * * Loaded after tool-theme.css, and the popover lives on rather than inside * #tool-root: a `position: fixed` overlay inside a ported app would resolve against that * app's stage instead of the viewport, which is the trap CLAUDE.md records from the seedmap * port (`contain: layout paint` makes the stage a containing block for fixed descendants). * Being outside #tool-root also means these rules need no id prefix to win. */ /* ---------- the button beside a field ---------- * * Sat on its own line at first, because these fields are block-level and 100% wide inside * their label, so an inline sibling wraps. Flexing the label instead would put the label * TEXT on the same row as the field, which is worse. * * So it overlays the field's trailing edge, with matching padding on the input so a long * id never runs under it. `:has()` on the parent is what supplies the positioning context; * scoped to #tool-root so it cannot reach the page chrome, and paired with the * `[data-ipick-on]` marker so it only ever applies to a field the script actually took. */ #tool-root *:has(> .ipick-open) { position: relative; } #tool-root input[data-ipick-on] { padding-inline-end: 42px; } .ipick-open { position: absolute; inset-inline-end: 5px; bottom: 5px; flex: none; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 13px; line-height: 1; color: var(--fg-dim); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: color 120ms, border-color 120ms; } .ipick-open:hover { color: var(--grass); border-color: var(--line-strong); } .ipick-open-glyph { pointer-events: none; } /* ---------- popover ---------- */ .ipick { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; } .ipick[hidden] { display: none !important; } .ipick-card { width: min(880px, 100%); max-height: min(680px, 100%); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); overflow: hidden; } .ipick-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px; border-bottom: 1px solid var(--line); } .ipick-search { flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--fg); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 11px; outline: none; } .ipick-search:focus { border-color: var(--grass); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18); } .ipick-close { flex: none; width: 32px; height: 32px; padding: 0; font: inherit; font-size: 20px; line-height: 1; color: var(--fg-dim); background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; } .ipick-close:hover { color: var(--fg); border-color: var(--line-strong); } .ipick-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; padding: 10px; } .ipick-empty { padding: 20px; color: var(--fg-muted); font-size: 13px; } .ipick-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; padding: 9px 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color 120ms, background 120ms; } .ipick-item:hover { border-color: var(--grass); background: var(--surface-3); } .ipick-name { font-size: 10.5px; line-height: 1.25; text-align: center; color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Same rules as the /give library: 16px art must not be smoothed, and the sprite is scaled * with a transform because scaling background-size would scale the POSITION too and every * cell would point at a different sprite. */ .ipick-sprite { width: 16px; height: 16px; flex: none; display: block; background-image: var(--atlas); background-repeat: no-repeat; image-rendering: pixelated; transform: scale(2); margin: 8px 0; }