1e4399d49e
mara, #3757: fold the separate alive badge into the turn-state badge, with pause/resume + cancel-turn moved into its dropdown. Cancel-turn is click-again-to-confirm, not a modal. model/effort/ctx/cost stay as separate badges — not asked to fold those in too.
63 lines
2 KiB
CSS
63 lines
2 KiB
CSS
/* <Dropdown> — anchored option list. `position: absolute` against the
|
|
caller's `position: relative` wrapper (see Dropdown.tsx's file-top
|
|
comment) so it hangs directly under the badge that opened it.
|
|
`--bg-elev` is the same elevated-surface slot the badge uses when
|
|
open (../badge/Badge.css), so the pair reads as one continuous panel. */
|
|
.ui-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 0.25em);
|
|
left: 0;
|
|
z-index: 20;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 12em;
|
|
padding: 0.25em;
|
|
background: var(--bg-elev);
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.5em;
|
|
box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.35);
|
|
}
|
|
.ui-dropdown-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.1em;
|
|
min-height: 2.75em;
|
|
padding: 0.4em 0.7em;
|
|
border: none;
|
|
border-radius: 0.35em;
|
|
background: transparent;
|
|
color: var(--fg);
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.ui-dropdown-item:hover {
|
|
background: var(--border);
|
|
}
|
|
.ui-dropdown-item-active {
|
|
background: var(--purple-dim);
|
|
}
|
|
.ui-dropdown-item-active .ui-dropdown-item-label::before {
|
|
content: '✓ ';
|
|
color: var(--purple);
|
|
}
|
|
/* Destructive action row (cancel turn) — ported from the old standalone
|
|
`.btn-cancel-turn`'s red-on-transparent look now that it lives here
|
|
instead of its own button (mara: "if the cancel turn button moves
|
|
into the dropdown, it should be fine"). */
|
|
.ui-dropdown-item-danger {
|
|
color: var(--red);
|
|
}
|
|
.ui-dropdown-item-danger:hover {
|
|
background: color-mix(in srgb, var(--red) 12%, transparent);
|
|
}
|
|
.ui-dropdown-item-desc {
|
|
font-size: 0.8em;
|
|
/* `--muted-on-dim`, not bare `--muted`: an *active* item's row bg is
|
|
`--purple-dim` (above), the same low-contrast-on-elevated-fill case
|
|
Badge.css hit — see theme.css's `--muted-on-dim` comment. Inactive
|
|
rows are transparent (falls through to `--bg-elev`), where the two
|
|
vars read close enough that this doesn't cost anything there. */
|
|
color: var(--muted-on-dim);
|
|
}
|