/** * Entity Navigation Select2 Styles * * Unified styles for character, environment, and scene navigation dropdowns. * v9.4 - January 2026 - Consolidated from character-nav-select2.css */ /* Dropdown result item - shared by all entity types */ .entity-result { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0; } .entity-result--new { color: var(--neutral); font-style: italic; } .entity-result__thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .entity-result__icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; background: rgba(102, 126, 234, 0.1); border-radius: 4px; } .entity-result__info { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; } .entity-result__name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entity-result__count { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); } /* Make the Select2 dropdown wider to show thumbnails */ .entity-nav-select + .select2-container .select2-dropdown { min-width: 280px; } /* Highlight current entity */ .select2-results__option[aria-selected="true"] .entity-result { background: rgba(102, 126, 234, 0.1); border-radius: 4px; margin: -0.25rem; padding: 0.25rem; } /* Legacy support - keep character-result classes working */ .character-result { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0; } .character-result--new { color: var(--neutral); font-style: italic; } .character-result__thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .character-result__icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; background: rgba(102, 126, 234, 0.1); border-radius: 4px; } .character-result__info { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; flex: 1 1 auto; } .character-result__name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .character-result__count { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); } .character-result__remove { flex: 0 0 auto; background: transparent; border: none; color: currentColor; opacity: 0.35; font-size: 1.1rem; line-height: 1; padding: 0 0.5rem; cursor: pointer; border-radius: 4px; transition: opacity 0.12s, background 0.12s; } .character-result__remove:hover { opacity: 1; background: color-mix(in srgb, currentColor 15%, transparent); } .character-nav-select + .select2-container .select2-dropdown { min-width: 280px; } .select2-results__option[aria-selected="true"] .character-result { background: rgba(102, 126, 234, 0.1); border-radius: 4px; margin: -0.25rem; padding: 0.25rem; } /* ─── Hover popover — image + name + chub-tag bubbles ─── Mirrors .ckpt-popover so the two previews read consistently. Lives on ; slot CSS vars bridged in JS on each show. */ .char-popover { position: fixed; z-index: 999999; width: 220px; background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 12%, #161618) 0%, color-mix(in srgb, var(--secondary) 8%, #161618) 50%, #161618 100%); border: 1px solid color-mix(in srgb, var(--secondary) 35%, rgba(255, 255, 255, 0.1)); border-radius: 8px; padding: 0.5rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08); pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity 0.15s ease, transform 0.15s ease; } .char-popover--visible { opacity: 1; transform: translateY(0); } .char-popover__img-wrap { width: 100%; border-radius: 6px; overflow: hidden; margin-bottom: 0.4rem; border: 1px solid rgba(255, 255, 255, 0.08); } .char-popover__img { width: 100%; height: auto; display: block; } .char-popover__name { font-size: 0.75rem; font-weight: 600; color: color-mix(in srgb, var(--secondary) 60%, white); margin-bottom: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .char-popover__tags { display: flex; flex-wrap: wrap; gap: 3px; } .char-popover__tag { display: inline-block; font-size: 0.55rem; font-weight: 500; letter-spacing: 0.03em; padding: 1px 5px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 18%, rgba(255, 255, 255, 0.06)); color: color-mix(in srgb, var(--primary) 40%, rgba(255, 255, 255, 0.7)); border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent); white-space: nowrap; }