Spaces:
Running
Running
File size: 2,745 Bytes
94004a2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | /* ── Menu primitive ─────────────────────────────────────────────── */
.ui-menu {
/* Position is set by Radix via inline styles — declaring `position` here
* (especially `fixed`) fights its anchored placement and can cause the
* popover to render against the viewport edge instead of the trigger. */
z-index: var(--z-overlay);
min-width: 160px;
max-width: 320px;
padding: 4px;
background: linear-gradient(160deg, rgba(47, 41, 39, 0.98) 0%, rgba(32, 28, 27, 0.98) 100%);
backdrop-filter: var(--glass-blur-md);
-webkit-backdrop-filter: var(--glass-blur-md);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
display: flex;
flex-direction: column;
gap: 1px;
animation-duration: var(--dur-fast);
animation-timing-function: var(--ease-out);
animation-fill-mode: both;
}
.ui-menu--below { animation-name: ui-menu-pop-down; transform-origin: top; }
.ui-menu--above { animation-name: ui-menu-pop-up; transform-origin: bottom; }
@keyframes ui-menu-pop-down {
from { opacity: 0; transform: translateY(-4px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ui-menu-pop-up {
from { opacity: 0; transform: translateY( 4px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.ui-menu__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 6px 10px;
background: transparent;
border: 0;
border-radius: var(--radius-sm);
color: var(--color-fg);
font-family: var(--font-sans);
font-size: var(--text-md);
font-weight: var(--weight-medium);
cursor: pointer;
text-align: left;
white-space: nowrap;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ui-menu__item:focus {
outline: none;
background: rgba(211, 134, 155, 0.15);
color: var(--color-fg);
}
.ui-menu__item:hover:not(.is-disabled):not(.is-destructive) {
background: rgba(255, 255, 255, 0.06);
}
.ui-menu__item.is-destructive { color: var(--color-danger); }
.ui-menu__item.is-destructive:focus,
.ui-menu__item.is-destructive:hover { background: rgba(251, 73, 52, 0.15); }
.ui-menu__item.is-disabled {
opacity: 0.4;
cursor: not-allowed;
}
.ui-menu__icon { color: var(--color-fg-muted); flex-shrink: 0; }
.ui-menu__label { flex: 1; }
.ui-menu__shortcut {
margin-left: var(--space-5);
font-size: var(--text-xs);
color: var(--color-fg-subtle);
font-family: var(--font-mono);
letter-spacing: 0.04em;
}
.ui-menu__separator {
height: 1px;
margin: 4px 2px;
background: var(--color-border);
}
|