Fix multi-theme contrast: separate public tokens from admin remap.
Local Build and Deploy / deploy (push) Successful in 54s
Local Build and Deploy / deploy (push) Successful in 54s
Public cards no longer paint with always-dark admin surfaces, and admin pages fully remap background/text/surface so shadcn UI stays readable on the admin canvas. Co-authored-by: Cursor <[email protected]>
This commit is contained in:
SimoandCursor committed
1 parent
d7278c77f9
commit
ed56bf0917
2 files changed
+83
-58
No files matched your search
+82
-57
@@ -251,6 +251,17 @@ summary,
|
||||
url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
|
||||
background-blend-mode: overlay;
|
||||
}
|
||||
html.dark .site-bg {
|
||||
background:
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
color-mix(in srgb, var(--color-primary) 10%, rgba(0, 0, 0, 0.72)),
|
||||
rgba(0, 0, 0, 0.82)
|
||||
),
|
||||
url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
|
||||
background-blend-mode: overlay;
|
||||
}
|
||||
|
||||
|
||||
.article-body {
|
||||
line-height: 1.7;
|
||||
@@ -326,8 +337,8 @@ a:hover {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--color-navbar);
|
||||
color: var(--color-navbar-text-readable, var(--color-navbar-text));
|
||||
background: var(--color-surface);
|
||||
color: var(--color-surface-text-readable, var(--color-text-readable));
|
||||
border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-card);
|
||||
@@ -363,7 +374,7 @@ a:hover {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
background: #eef2f7;
|
||||
background: color-mix(in srgb, var(--color-text-muted) 14%, var(--color-surface));
|
||||
color: var(--color-text-readable, var(--color-text));
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -446,7 +457,7 @@ tbody tr:hover {
|
||||
}
|
||||
.avatar {
|
||||
border-radius: var(--avatar-border-radius);
|
||||
background: #f1f5f9;
|
||||
background: var(--color-surface);
|
||||
border: 2px solid var(--avatar-border-color);
|
||||
}
|
||||
.currency {
|
||||
@@ -457,7 +468,7 @@ tbody tr:hover {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.2rem 0.6rem 0.2rem 0.2rem;
|
||||
border-radius: 999px;
|
||||
background: #f8fafc;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
|
||||
color: var(--color-pill-text-readable, var(--color-text-readable));
|
||||
}
|
||||
@@ -616,9 +627,9 @@ tbody tr:hover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
background: var(--admin-surface);
|
||||
color: var(--admin-text);
|
||||
border: 1px solid color-mix(in srgb, var(--admin-text-muted) 12%, transparent);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
|
||||
border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 12%, transparent);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-card);
|
||||
overflow: hidden;
|
||||
@@ -634,11 +645,11 @@ tbody tr:hover {
|
||||
padding: 0.9rem 1.1rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--admin-accent) 10%, var(--admin-surface)),
|
||||
color-mix(in srgb, var(--admin-accent) 5%, var(--admin-surface))
|
||||
color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)),
|
||||
color-mix(in srgb, var(--color-primary) 5%, var(--color-surface))
|
||||
);
|
||||
border-bottom: 1px solid
|
||||
color-mix(in srgb, var(--admin-text-muted) 8%, transparent);
|
||||
color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 8%, transparent);
|
||||
}
|
||||
.content-card-icon {
|
||||
flex: none;
|
||||
@@ -650,11 +661,11 @@ tbody tr:hover {
|
||||
font-size: 1.25rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--admin-accent) 22%, var(--admin-surface)),
|
||||
color-mix(in srgb, var(--admin-accent) 12%, var(--admin-surface))
|
||||
color-mix(in srgb, var(--color-primary) 22%, var(--color-surface)),
|
||||
color-mix(in srgb, var(--color-primary) 12%, var(--color-surface))
|
||||
);
|
||||
box-shadow: inset 0 0 0 1px
|
||||
color-mix(in srgb, var(--admin-accent) 30%, transparent);
|
||||
color-mix(in srgb, var(--color-primary) 30%, transparent);
|
||||
}
|
||||
.content-card-head-text {
|
||||
min-width: 0;
|
||||
@@ -665,12 +676,12 @@ tbody tr:hover {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
line-height: 1.3;
|
||||
color: var(--admin-text);
|
||||
color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
|
||||
}
|
||||
.content-card-subtitle {
|
||||
margin: 0.15rem 0 0;
|
||||
font-size: 0.78rem;
|
||||
color: var(--admin-text-muted);
|
||||
color: var(--color-text-muted-readable, var(--color-text-muted));
|
||||
}
|
||||
.content-card-action {
|
||||
flex: none;
|
||||
@@ -714,8 +725,8 @@ tbody tr:hover {
|
||||
gap: 0.85rem;
|
||||
}
|
||||
.stat-block {
|
||||
background: var(--admin-canvas);
|
||||
border: 1px solid color-mix(in srgb, var(--admin-text-muted) 12%, transparent);
|
||||
background: var(--color-background);
|
||||
border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 12%, transparent);
|
||||
border-radius: 12px;
|
||||
padding: 0.85rem 1rem;
|
||||
text-align: center;
|
||||
@@ -724,12 +735,12 @@ tbody tr:hover {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
color: var(--admin-accent-text);
|
||||
color: var(--color-primary-readable, var(--color-primary));
|
||||
}
|
||||
.stat-block-label {
|
||||
margin-top: 0.2rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--admin-text-muted);
|
||||
color: var(--color-text-muted-readable, var(--color-text-muted));
|
||||
}
|
||||
|
||||
/* Empty states */
|
||||
@@ -751,12 +762,12 @@ tbody tr:hover {
|
||||
font-weight: 700;
|
||||
padding: 0.1rem 0.55rem 0.1rem 0.45rem;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--admin-text-muted) 14%, transparent);
|
||||
color: var(--admin-text-muted);
|
||||
background: color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 14%, transparent);
|
||||
color: var(--color-text-muted-readable, var(--color-text-muted));
|
||||
}
|
||||
.online-badge.online {
|
||||
background: color-mix(in srgb, var(--admin-success) 16%, transparent);
|
||||
color: var(--admin-success);
|
||||
background: color-mix(in srgb, var(--color-success) 16%, transparent);
|
||||
color: var(--color-success);
|
||||
}
|
||||
.online-dot {
|
||||
width: 8px;
|
||||
@@ -765,9 +776,9 @@ tbody tr:hover {
|
||||
background: currentColor;
|
||||
}
|
||||
.online-badge.online .online-dot {
|
||||
background: var(--admin-success);
|
||||
background: var(--color-success);
|
||||
box-shadow: 0 0 0 3px
|
||||
color-mix(in srgb, var(--admin-success) 22%, transparent);
|
||||
color-mix(in srgb, var(--color-success) 22%, transparent);
|
||||
}
|
||||
|
||||
/* Leaderboard rank chip */
|
||||
@@ -780,12 +791,12 @@ tbody tr:hover {
|
||||
border-radius: 999px;
|
||||
font-weight: 800;
|
||||
font-size: 0.95rem;
|
||||
background: var(--admin-canvas);
|
||||
border: 1px solid color-mix(in srgb, var(--admin-text-muted) 18%, transparent);
|
||||
background: var(--color-background);
|
||||
border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 18%, transparent);
|
||||
}
|
||||
.rank-badge.rank-1 {
|
||||
background: color-mix(in srgb, var(--admin-warning) 20%, transparent);
|
||||
border-color: var(--admin-warning);
|
||||
background: color-mix(in srgb, var(--color-warning) 20%, transparent);
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
.rank-badge.rank-2 {
|
||||
background: color-mix(in srgb, #94a3b8 22%, transparent);
|
||||
@@ -812,7 +823,7 @@ tbody tr:hover {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.radio-sidebar-link:hover {
|
||||
background: color-mix(in srgb, var(--admin-accent) 10%, transparent);
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (max-width: 48rem) {
|
||||
@@ -827,7 +838,7 @@ tbody tr:hover {
|
||||
gap: 0.25rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid
|
||||
color-mix(in srgb, var(--admin-text-muted) 14%, transparent);
|
||||
color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 14%, transparent);
|
||||
overflow-x: auto;
|
||||
}
|
||||
.radio-sidebar-head {
|
||||
@@ -858,7 +869,7 @@ tbody tr:hover {
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--admin-accent-text);
|
||||
color: var(--color-primary-readable, var(--color-primary));
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 0.78rem;
|
||||
@@ -871,11 +882,11 @@ tbody tr:hover {
|
||||
}
|
||||
.cms-info-trigger:hover,
|
||||
.cms-info-trigger:focus-visible {
|
||||
color: var(--admin-accent-text);
|
||||
color: var(--color-primary-readable, var(--color-primary));
|
||||
}
|
||||
.cms-info-trigger:focus-visible,
|
||||
.cms-info-close:focus-visible {
|
||||
outline: 3px solid color-mix(in srgb, var(--admin-accent) 42%, transparent);
|
||||
outline: 3px solid color-mix(in srgb, var(--color-primary) 42%, transparent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.cms-info-backdrop {
|
||||
@@ -892,17 +903,17 @@ tbody tr:hover {
|
||||
position: relative;
|
||||
width: min(440px, 100%);
|
||||
border: 1px solid
|
||||
color-mix(in srgb, var(--admin-accent) 30%, var(--admin-border));
|
||||
color-mix(in srgb, var(--color-primary) 30%, color-mix(in srgb, var(--color-text-muted) 22%, transparent));
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--admin-accent) 12%, transparent),
|
||||
color-mix(in srgb, var(--color-primary) 12%, transparent),
|
||||
transparent 42%
|
||||
),
|
||||
var(--admin-surface);
|
||||
var(--color-surface);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
|
||||
color: var(--admin-text);
|
||||
color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.cms-info-close {
|
||||
@@ -913,20 +924,20 @@ tbody tr:hover {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
place-items: center;
|
||||
border: 1px solid color-mix(in srgb, var(--admin-text-muted) 18%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 18%, transparent);
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--admin-surface) 84%, transparent);
|
||||
color: var(--admin-text-muted);
|
||||
background: color-mix(in srgb, var(--color-surface) 84%, transparent);
|
||||
color: var(--color-text-muted-readable, var(--color-text-muted));
|
||||
cursor: pointer;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
.cms-info-close:hover {
|
||||
color: var(--admin-text);
|
||||
border-color: color-mix(in srgb, var(--admin-accent) 40%, transparent);
|
||||
color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
|
||||
border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
|
||||
}
|
||||
.cms-info-kicker {
|
||||
color: var(--admin-accent-text);
|
||||
color: var(--color-primary-readable, var(--color-primary));
|
||||
font-size: 0.74rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
@@ -942,17 +953,17 @@ tbody tr:hover {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-top: 0.65rem;
|
||||
border: 1px solid color-mix(in srgb, var(--admin-accent) 34%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent);
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--admin-accent) 14%, transparent);
|
||||
color: var(--admin-text);
|
||||
background: color-mix(in srgb, var(--color-primary) 14%, transparent);
|
||||
color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
|
||||
font-size: 0.75rem;
|
||||
font-weight: 900;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
.cms-info-copy {
|
||||
margin: 0.9rem 0 0;
|
||||
color: var(--admin-text-muted);
|
||||
color: var(--color-text-muted-readable, var(--color-text-muted));
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
@@ -963,20 +974,20 @@ tbody tr:hover {
|
||||
margin: 1rem 0 0;
|
||||
}
|
||||
.cms-info-grid div {
|
||||
border: 1px solid color-mix(in srgb, var(--admin-text-muted) 14%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 14%, transparent);
|
||||
border-radius: 8px;
|
||||
background: color-mix(in srgb, var(--admin-canvas) 68%, transparent);
|
||||
background: color-mix(in srgb, var(--color-background) 68%, transparent);
|
||||
padding: 0.7rem;
|
||||
}
|
||||
.cms-info-grid dt {
|
||||
color: var(--admin-text-muted);
|
||||
color: var(--color-text-muted-readable, var(--color-text-muted));
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.cms-info-grid dd {
|
||||
margin: 0.18rem 0 0;
|
||||
color: var(--admin-text);
|
||||
color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
|
||||
font-size: 0.8rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.25;
|
||||
@@ -991,17 +1002,17 @@ tbody tr:hover {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
border: 1px solid color-mix(in srgb, var(--admin-accent) 18%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
|
||||
border-radius: 8px;
|
||||
background: color-mix(in srgb, var(--admin-accent) 8%, transparent);
|
||||
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
|
||||
padding: 0.65rem 0.75rem;
|
||||
}
|
||||
.cms-info-credit span {
|
||||
color: var(--admin-text);
|
||||
color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
|
||||
font-weight: 900;
|
||||
}
|
||||
.cms-info-credit small {
|
||||
color: var(--admin-text-muted);
|
||||
color: var(--color-text-muted-readable, var(--color-text-muted));
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
@@ -1100,6 +1111,9 @@ tbody tr:hover {
|
||||
unaffected. This also covers Radix portals (Dialog/Select/Dropdown/
|
||||
Popover/Tooltip) which mount under <body>. */
|
||||
body:has([data-admin]) {
|
||||
/* Full public→admin token remap so shadcn + body + leftover
|
||||
public utilities all inherit the admin palette with contrast. */
|
||||
--color-background: var(--admin-canvas);
|
||||
--color-foreground: var(--admin-text);
|
||||
--color-card: var(--admin-surface);
|
||||
--color-card-foreground: var(--admin-text);
|
||||
@@ -1127,6 +1141,17 @@ body:has([data-admin]) {
|
||||
--color-border: var(--admin-border);
|
||||
--color-input: var(--admin-border);
|
||||
--color-ring: var(--admin-accent);
|
||||
/* Public Atom tokens still referenced by body / .muted / inputs */
|
||||
--color-text: var(--admin-text);
|
||||
--color-text-readable: var(--admin-text);
|
||||
--color-text-muted: var(--admin-text-muted);
|
||||
--color-text-muted-readable: var(--admin-text-muted);
|
||||
--color-surface: var(--admin-surface);
|
||||
--color-surface-text-readable: var(--admin-text);
|
||||
--color-dropdown: var(--admin-surface);
|
||||
--color-dropdown-text-readable: var(--admin-text);
|
||||
color: var(--admin-text);
|
||||
background-color: var(--admin-canvas);
|
||||
}
|
||||
|
||||
/* ── Details/summary open states for nav ──────────────────── */
|
||||
|
||||
@@ -13,7 +13,7 @@ const buttonVariants = cva(
|
||||
destructive:
|
||||
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
"border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost:
|
||||
|
||||
Reference in new issue
Block a user