30 lines
1.3 KiB
HTML
30 lines
1.3 KiB
HTML
@if (picker.isPicking()) {
|
|
<div class="pointer-events-none fixed inset-x-0 bottom-4 z-[95] flex justify-center px-4">
|
|
<div class="pointer-events-auto max-w-xl rounded-lg border border-border bg-card px-4 py-3 shadow-lg backdrop-blur">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<div class="min-w-0 flex-1">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Theme Picker Active</p>
|
|
<p class="mt-1 text-sm text-foreground">Click a highlighted area to inspect its theme key.</p>
|
|
<p class="mt-1 text-xs text-muted-foreground">
|
|
Hovering:
|
|
<span class="font-medium text-foreground">{{ hoveredEntry()?.label || 'Move over a themeable region' }}</span>
|
|
@if (hoveredEntry()) {
|
|
<span class="ml-1 rounded-md bg-secondary px-2 py-0.5 font-mono text-[11px] text-foreground/80">
|
|
{{ hoveredEntry()!.key }}
|
|
</span>
|
|
}
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
(click)="cancel()"
|
|
class="inline-flex items-center rounded-md border border-border bg-secondary px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|