remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix transparent admin Select/Popover overlays and semantic surface tokens.
Local Build and Deploy / deploy (push) Successful in 52s
Details

Browse Source 
Co-authored-by: Cursor <[email protected]>
This commit is contained in:
SimoandCursor committed 2026-07-17 18:10:52 +02:00
1 parent 665d87cbf4
commit b42a313825
3 files changed
+64 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/globals.css
+61 -1
View File
@@ -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;