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

Visibility polish: admin sidebar contrast/focus, table header readability, nav focus rings
Local Build and Deploy / deploy (push) Successful in 57s
Details

Browse Source
This commit is contained in:
openhands committed 2026-07-14 16:50:43 +02:00
1 parent db1875b40b
commit 8d5c8ec96f
4 files changed
+21 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/globals.css
+9 -1
View File
@@ -216,6 +216,10 @@ summary,
color: var(--color-primary-readable, var(--color-primary));
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.nav-item:focus-visible {
outline: 2px solid var(--color-primary-readable, var(--color-primary));
outline-offset: 2px;
}
.dropdown-item {
@apply block py-2.5 px-4 text-sm font-semibold rounded-lg mx-1;
color: var(--color-dropdown-text-readable, var(--color-text-readable));
@@ -225,6 +229,10 @@ summary,
background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary-readable, var(--color-primary));
}
.dropdown-item:focus-visible {
outline: 2px solid var(--color-primary-readable, var(--color-primary));
outline-offset: -2px;
}
.dropdown-menu {
background-color: var(--color-dropdown);
border: 1px solid
@@ -550,7 +558,7 @@ tbody tr:hover {
}
.admin-page thead th {
background: color-mix(in srgb, var(--admin-accent) 8%, var(--admin-surface));
color: var(--admin-text-muted);
color: var(--admin-text);
border-bottom: 1px solid var(--admin-border);
white-space: nowrap;
font-size: 0.68rem;
src/components/admin/admin-mobile-wrapper.tsx
+3 -2
View File
@@ -36,8 +36,9 @@ export function AdminMobileWrapper({
<button
type="button"
onClick={() => setOpen(!open)}
className="flex items-center justify-center w-9 h-9 rounded-lg"
style={{ color: "var(--admin-text-muted)" }}
className="flex items-center justify-center w-9 h-9 rounded-lg
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--admin-sidebar-background)]"
style={{ color: "var(--admin-sidebar-text-readable)" }}
>
{open ? <X size={18} /> : <Menu size={18} />}
</button>
src/components/admin/admin-nav-link.tsx
+6 -5
View File
@@ -28,11 +28,12 @@ export function AdminNavLink({
<Link
href={href}
aria-current={active ? "page" : undefined}
className={`group flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm no-underline transition-all duration-150 ${
active
? "bg-[var(--admin-accent)]/20 font-semibold text-[var(--admin-sidebar-text-readable)] border-l-2 border-[var(--admin-accent)] shadow-sm"
: "font-medium text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/10 hover:no-underline"
}`}
className={`group flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm no-underline transition-colors duration-150
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--admin-sidebar-background)] ${
active
? "bg-[var(--admin-accent)]/25 font-semibold text-[var(--admin-sidebar-text-readable)] border-l-2 border-[var(--admin-accent)] shadow-sm"
: "font-medium text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/10 hover:no-underline"
}`}
>
{icon ? (
<span
src/components/mobile-nav.tsx
+3 -2
View File
@@ -35,7 +35,8 @@ export function MobileNav({
className="list-none cursor-pointer flex items-center justify-center w-11 h-11 rounded-xl shrink-0
[&::-webkit-details-marker]:hidden transition-colors duration-150
hover:bg-[color-mix(in_srgb,var(--color-primary)_12%,transparent)]
active:scale-[0.96]"
active:scale-[0.96]
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-readable,var(--color-primary))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-navbar)]"
aria-label={"Menu"}
>
<svg
@@ -102,7 +103,7 @@ export function MobileNav({
>
{brandLabel}
</span>
<span className="ml-auto text-[11px] font-semibold uppercase tracking-wider opacity-60">
<span className="ml-auto text-[11px] font-semibold uppercase tracking-wider opacity-75">
{closeLabel}
</span>
</div>