Fix transparent admin Select/Popover overlays and semantic surface tokens.
Local Build and Deploy / deploy (push) Successful in 52s
Local Build and Deploy / deploy (push) Successful in 52s
Co-authored-by: Cursor <[email protected]>
This commit is contained in:
SimoandCursor committed
1 parent
665d87cbf4
commit
b42a313825
3 files changed
+64
-4
No files matched your search
+61
-1
@@ -22,7 +22,22 @@
|
||||
:root {
|
||||
--color-primary: #eeb425;
|
||||
--color-primary-hover: #d4a01f;
|
||||
--color-primary-foreground: #1a1a2e;
|
||||
--color-background: #f4f6f9;
|
||||
--color-foreground: #0f172a;
|
||||
--color-card: #ffffff;
|
||||
--color-card-foreground: #0f172a;
|
||||
--color-popover: #ffffff;
|
||||
--color-popover-foreground: #0f172a;
|
||||
--color-secondary: #f1f5f9;
|
||||
--color-secondary-foreground: #0f172a;
|
||||
--color-muted: #f1f5f9;
|
||||
--color-muted-foreground: #6b7280;
|
||||
--color-destructive: #ef4444;
|
||||
--color-destructive-foreground: #ffffff;
|
||||
--color-border: #e2e8f0;
|
||||
--color-input: #e2e8f0;
|
||||
--color-ring: #eeb425;
|
||||
--color-surface: #ffffff;
|
||||
--color-dropdown: #ffffff;
|
||||
--color-navbar: #ffffff;
|
||||
@@ -37,6 +52,7 @@
|
||||
--color-accent-foreground-readable: #000000;
|
||||
--color-navbar-text-readable: #1e293b;
|
||||
--color-accent: #10b981;
|
||||
--color-accent-foreground: #000000;
|
||||
--color-success: #16a34a;
|
||||
--color-warning: #eab308;
|
||||
--color-error: #ef4444;
|
||||
@@ -1197,7 +1213,7 @@ body:has([data-admin]) {
|
||||
--color-foreground: var(--admin-text);
|
||||
--color-card: var(--admin-surface);
|
||||
--color-card-foreground: var(--admin-text);
|
||||
--color-popover: var(--admin-surface);
|
||||
--color-popover: var(--admin-surface-elevated);
|
||||
--color-popover-foreground: var(--admin-text);
|
||||
--color-primary: var(--admin-accent);
|
||||
--color-primary-hover: color-mix(in srgb, var(--admin-accent) 84%, #000000);
|
||||
@@ -1287,6 +1303,50 @@ html.dark body:has([data-admin]) textarea {
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
/* Opaque floating surfaces for Radix portals (Select / Dropdown / Popover / Dialog).
|
||||
Without this, bg-popover can resolve transparent and lists paint over forms. */
|
||||
body:has([data-admin]) [data-slot="select-content"],
|
||||
body:has([data-admin]) [data-slot="dropdown-menu-content"],
|
||||
body:has([data-admin]) [data-slot="dropdown-menu-sub-content"],
|
||||
body:has([data-admin]) [data-slot="popover-content"],
|
||||
body:has([data-admin]) [data-slot="context-menu-content"],
|
||||
body:has([data-admin]) [data-slot="dialog-content"],
|
||||
body:has([data-admin]) [data-slot="sheet-content"] {
|
||||
background-color: var(--admin-surface-elevated);
|
||||
color: var(--admin-text);
|
||||
border-color: var(--admin-border);
|
||||
box-shadow:
|
||||
0 18px 48px rgba(0, 0, 0, 0.45),
|
||||
0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
body:has([data-admin]) [data-slot="select-trigger"],
|
||||
body:has([data-admin]) [data-slot="dropdown-menu-trigger"] {
|
||||
background-color: var(--admin-surface-elevated);
|
||||
color: var(--admin-text);
|
||||
border-color: var(--admin-border);
|
||||
}
|
||||
|
||||
body:has([data-admin]) [data-slot="select-item"][data-highlighted],
|
||||
body:has([data-admin]) [data-slot="select-item"]:focus,
|
||||
body:has([data-admin]) [data-slot="dropdown-menu-item"][data-highlighted],
|
||||
body:has([data-admin]) [data-slot="dropdown-menu-item"]:focus,
|
||||
body:has([data-admin]) [data-slot="context-menu-item"][data-highlighted],
|
||||
body:has([data-admin]) [data-slot="context-menu-item"]:focus {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--admin-accent) 18%,
|
||||
var(--admin-surface-elevated)
|
||||
);
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
body:has([data-admin]) [data-slot="card"] {
|
||||
background-color: var(--admin-surface);
|
||||
color: var(--admin-text);
|
||||
border-color: var(--admin-border);
|
||||
}
|
||||
|
||||
/* ── Details/summary open states for nav ──────────────────── */
|
||||
details[open] > summary .details-open\:hidden {
|
||||
display: none;
|
||||
|
||||
@@ -60,7 +60,7 @@ function DialogContent({
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
|
||||
"bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -37,7 +37,7 @@ function SelectTrigger({
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-background dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -53,7 +53,7 @@ function SelectTrigger({
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
position = "item-aligned",
|
||||
position = "popper",
|
||||
align = "center",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
|
||||
Reference in new issue
Block a user