feat(modal): fandom picker markup + styles
HTML/CSS for the inline fandom picker that slides in below the add-tag input. JS wiring in the next commit. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -3032,3 +3032,36 @@ body.select-mode .gallery-infinite-container {
|
|||||||
border-radius: 0.2rem;
|
border-radius: 0.2rem;
|
||||||
cursor: help;
|
cursor: help;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Fandom picker (Task 22 - fandom association during character tag creation) */
|
||||||
|
.fandom-picker-wrapper {
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
transition: max-height 180ms ease-out, opacity 180ms ease-out;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.fandom-picker-wrapper.visible {
|
||||||
|
max-height: 16rem;
|
||||||
|
opacity: 1;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
.fandom-picker-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--muted, #888);
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
.fandom-picker-input-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.25rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.fandom-picker-input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.4rem 0.6rem;
|
||||||
|
background: var(--input-bg, #111);
|
||||||
|
border: 1px solid var(--input-border, #333);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
color: var(--fg, #eee);
|
||||||
|
}
|
||||||
|
|||||||
@@ -61,6 +61,17 @@
|
|||||||
</div>
|
</div>
|
||||||
<button type="submit">Add</button>
|
<button type="submit">Add</button>
|
||||||
</form>
|
</form>
|
||||||
|
<div id="fandomPickerWrapper" class="fandom-picker-wrapper" aria-hidden="true">
|
||||||
|
<label class="fandom-picker-label" for="fandomPickerInput">Fandom</label>
|
||||||
|
<div class="fandom-picker-input-row">
|
||||||
|
<input type="text" id="fandomPickerInput" class="fandom-picker-input"
|
||||||
|
placeholder="Pick or create fandom (optional)" autocomplete="off">
|
||||||
|
<button type="button" id="fandomPickerClear" class="btn-small"
|
||||||
|
aria-label="Clear fandom" title="Clear fandom">×</button>
|
||||||
|
</div>
|
||||||
|
<div id="fandomPickerAutocomplete"
|
||||||
|
class="tag-autocomplete tag-autocomplete-inline" aria-live="polite"></div>
|
||||||
|
</div>
|
||||||
<div id="tagAutocomplete" class="tag-autocomplete tag-autocomplete-inline" aria-live="polite"></div>
|
<div id="tagAutocomplete" class="tag-autocomplete tag-autocomplete-inline" aria-live="polite"></div>
|
||||||
<span id="tagActionFeedback" class="tag-feedback tag-feedback-inline"></span>
|
<span id="tagActionFeedback" class="tag-feedback tag-feedback-inline"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user