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

fix: isolate shared admin styling

Browse Source
This commit is contained in:
Simo committed 2026-07-12 18:50:44 +02:00
1 parent 4ce35e91fb
commit 0fe482009c
15 files changed
+157 -150
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/globals.css
+66 -66
View File
@@ -437,9 +437,9 @@ tbody tr:hover {
/* Cards used inside admin pages */
.admin-card {
background: var(--color-navbar);
color: var(--color-navbar-text-readable, var(--color-navbar-text));
border: 1px solid var(--border-subtle);
background: var(--admin-surface);
color: var(--admin-text);
border: 1px solid var(--admin-border);
border-radius: 16px;
box-shadow: var(--shadow-card);
padding: 1.25rem;
@@ -472,8 +472,8 @@ tbody tr:hover {
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.75rem;
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-navbar));
border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
background: color-mix(in srgb, var(--admin-accent) 8%, var(--admin-surface));
border: 1px solid color-mix(in srgb, var(--admin-accent) 15%, transparent);
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
@@ -482,8 +482,8 @@ tbody tr:hover {
/* Tables */
.admin-page table {
width: 100%;
background: var(--color-navbar);
border: 1px solid var(--border-subtle);
background: var(--admin-surface);
border: 1px solid var(--admin-border);
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-card);
@@ -491,9 +491,9 @@ tbody tr:hover {
border-spacing: 0;
}
.admin-page thead th {
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-navbar));
color: var(--color-text-muted);
border-bottom: 1px solid var(--border-subtle);
background: color-mix(in srgb, var(--admin-accent) 8%, var(--admin-surface));
color: var(--admin-text-muted);
border-bottom: 1px solid var(--admin-border);
white-space: nowrap;
font-size: 0.68rem;
font-weight: 700;
@@ -503,14 +503,14 @@ tbody tr:hover {
}
.admin-page td {
padding: 0.7rem 0.9rem;
border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent);
border-top: 1px solid color-mix(in srgb, var(--admin-text-muted) 8%, transparent);
font-size: 0.88rem;
}
.admin-page tbody tr {
transition: background 0.12s ease;
}
.admin-page tbody tr:hover {
background: color-mix(in srgb, var(--color-primary) 4%, transparent);
background: color-mix(in srgb, var(--admin-accent) 4%, transparent);
}
.admin-page thead tr:first-child th:first-child {
border-radius: 16px 0 0 0;
@@ -524,7 +524,7 @@ tbody tr:hover {
font-size: 0.9rem;
font-weight: 700;
margin: 1.5rem 0 0.75rem;
color: var(--color-text);
color: var(--admin-text);
}
.admin-section-title:first-child {
margin-top: 0;
@@ -540,7 +540,7 @@ tbody tr:hover {
.admin-empty {
text-align: center;
padding: 2.5rem 1rem;
color: var(--color-text-muted);
color: var(--admin-text-muted);
font-size: 0.85rem;
}
/* ── Public design system (faithful to the atom theme) ──────────
@@ -550,9 +550,9 @@ tbody tr:hover {
display: flex;
flex-direction: column;
width: 100%;
background: var(--color-navbar);
color: var(--color-navbar-text-readable, var(--color-navbar-text));
border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
background: var(--admin-surface);
color: var(--admin-text);
border: 1px solid color-mix(in srgb, var(--admin-text-muted) 12%, transparent);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
@@ -568,10 +568,10 @@ tbody tr:hover {
padding: 0.9rem 1.1rem;
background: linear-gradient(
135deg,
color-mix(in srgb, var(--gradient-from) 10%, var(--color-navbar)),
color-mix(in srgb, var(--gradient-to) 5%, var(--color-navbar))
color-mix(in srgb, var(--admin-accent) 10%, var(--admin-surface)),
color-mix(in srgb, var(--admin-accent) 5%, var(--admin-surface))
);
border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--admin-text-muted) 8%, transparent);
}
.content-card-icon {
flex: none;
@@ -583,10 +583,10 @@ tbody tr:hover {
font-size: 1.25rem;
background: linear-gradient(
135deg,
color-mix(in srgb, var(--gradient-from) 22%, var(--color-navbar)),
color-mix(in srgb, var(--gradient-to) 12%, var(--color-navbar))
color-mix(in srgb, var(--admin-accent) 22%, var(--admin-surface)),
color-mix(in srgb, var(--admin-accent) 12%, var(--admin-surface))
);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--admin-accent) 30%, transparent);
}
.content-card-head-text {
min-width: 0;
@@ -597,12 +597,12 @@ tbody tr:hover {
font-weight: 700;
font-size: 1rem;
line-height: 1.3;
color: var(--color-navbar-text-readable, var(--color-navbar-text));
color: var(--admin-text);
}
.content-card-subtitle {
margin: 0.15rem 0 0;
font-size: 0.78rem;
color: var(--color-text-muted-readable, var(--color-text-muted));
color: var(--admin-text-muted);
}
.content-card-action {
flex: none;
@@ -646,8 +646,8 @@ tbody tr:hover {
gap: 0.85rem;
}
.stat-block {
background: var(--color-background);
border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
background: var(--admin-canvas);
border: 1px solid color-mix(in srgb, var(--admin-text-muted) 12%, transparent);
border-radius: 12px;
padding: 0.85rem 1rem;
text-align: center;
@@ -656,12 +656,12 @@ tbody tr:hover {
font-size: 1.6rem;
font-weight: 800;
line-height: 1.1;
color: var(--color-primary-readable, var(--color-primary));
color: var(--admin-accent-text);
}
.stat-block-label {
margin-top: 0.2rem;
font-size: 0.78rem;
color: var(--color-text-muted-readable, var(--color-text-muted));
color: var(--admin-text-muted);
}
/* Empty states */
@@ -683,12 +683,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(--color-text-muted) 14%, transparent);
color: var(--color-text-muted-readable, var(--color-text-muted));
background: color-mix(in srgb, var(--admin-text-muted) 14%, transparent);
color: var(--admin-text-muted);
}
.online-badge.online {
background: color-mix(in srgb, var(--color-success) 16%, transparent);
color: var(--color-success);
background: color-mix(in srgb, var(--admin-success) 16%, transparent);
color: var(--admin-success);
}
.online-dot {
width: 8px;
@@ -697,8 +697,8 @@ tbody tr:hover {
background: currentColor;
}
.online-badge.online .online-dot {
background: var(--color-success);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 22%, transparent);
background: var(--admin-success);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-success) 22%, transparent);
}
/* Leaderboard rank chip */
@@ -711,12 +711,12 @@ tbody tr:hover {
border-radius: 999px;
font-weight: 800;
font-size: 0.95rem;
background: var(--color-background);
border: 1px solid color-mix(in srgb, var(--color-text-muted) 18%, transparent);
background: var(--admin-canvas);
border: 1px solid color-mix(in srgb, var(--admin-text-muted) 18%, transparent);
}
.rank-badge.rank-1 {
background: color-mix(in srgb, var(--color-warning) 20%, transparent);
border-color: var(--color-warning);
background: color-mix(in srgb, var(--admin-warning) 20%, transparent);
border-color: var(--admin-warning);
}
.rank-badge.rank-2 {
background: color-mix(in srgb, #94a3b8 22%, transparent);
@@ -743,7 +743,7 @@ tbody tr:hover {
gap: 0.25rem;
}
.radio-sidebar-link:hover {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
background: color-mix(in srgb, var(--admin-accent) 10%, transparent);
text-decoration: none;
}
@media (max-width: 48rem) {
@@ -757,7 +757,7 @@ tbody tr:hover {
flex-wrap: wrap;
gap: 0.25rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--admin-text-muted) 14%, transparent);
overflow-x: auto;
}
.radio-sidebar-head {
@@ -788,7 +788,7 @@ tbody tr:hover {
appearance: none;
border: 0;
background: transparent;
color: var(--link-color-readable, var(--link-color));
color: var(--admin-accent-text);
cursor: pointer;
font: inherit;
font-size: 0.78rem;
@@ -801,11 +801,11 @@ tbody tr:hover {
}
.cms-info-trigger:hover,
.cms-info-trigger:focus-visible {
color: var(--link-hover-color-readable, var(--link-hover-color));
color: var(--admin-accent-text);
}
.cms-info-trigger:focus-visible,
.cms-info-close:focus-visible {
outline: 3px solid color-mix(in srgb, var(--color-primary) 42%, transparent);
outline: 3px solid color-mix(in srgb, var(--admin-accent) 42%, transparent);
outline-offset: 3px;
}
.cms-info-backdrop {
@@ -821,13 +821,13 @@ tbody tr:hover {
.cms-info-dialog {
position: relative;
width: min(440px, 100%);
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--border));
border: 1px solid color-mix(in srgb, var(--admin-accent) 30%, var(--admin-border));
border-radius: 8px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 42%),
var(--color-surface);
linear-gradient(135deg, color-mix(in srgb, var(--admin-accent) 12%, transparent), transparent 42%),
var(--admin-surface);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
color: var(--color-text-readable, var(--color-text));
color: var(--admin-text);
padding: 1.25rem;
}
.cms-info-close {
@@ -838,20 +838,20 @@ tbody tr:hover {
width: 2rem;
height: 2rem;
place-items: center;
border: 1px solid color-mix(in srgb, var(--color-text-muted) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--admin-text-muted) 18%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--color-surface) 84%, transparent);
color: var(--color-text-muted-readable, var(--color-text-muted));
background: color-mix(in srgb, var(--admin-surface) 84%, transparent);
color: var(--admin-text-muted);
cursor: pointer;
font-weight: 900;
line-height: 1;
}
.cms-info-close:hover {
color: var(--color-text-readable, var(--color-text));
border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
color: var(--admin-text);
border-color: color-mix(in srgb, var(--admin-accent) 40%, transparent);
}
.cms-info-kicker {
color: var(--color-primary-readable, var(--color-primary));
color: var(--admin-accent-text);
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0;
@@ -867,17 +867,17 @@ tbody tr:hover {
display: inline-flex;
align-items: center;
margin-top: 0.65rem;
border: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent);
border: 1px solid color-mix(in srgb, var(--admin-accent) 34%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 14%, transparent);
color: var(--color-text-readable, var(--color-text));
background: color-mix(in srgb, var(--admin-accent) 14%, transparent);
color: var(--admin-text);
font-size: 0.75rem;
font-weight: 900;
padding: 0.3rem 0.6rem;
}
.cms-info-copy {
margin: 0.9rem 0 0;
color: var(--color-text-muted-readable, var(--color-text-muted));
color: var(--admin-text-muted);
font-size: 0.92rem;
line-height: 1.55;
}
@@ -888,20 +888,20 @@ tbody tr:hover {
margin: 1rem 0 0;
}
.cms-info-grid div {
border: 1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--admin-text-muted) 14%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--color-background) 68%, transparent);
background: color-mix(in srgb, var(--admin-canvas) 68%, transparent);
padding: 0.7rem;
}
.cms-info-grid dt {
color: var(--color-text-muted-readable, var(--color-text-muted));
color: var(--admin-text-muted);
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
}
.cms-info-grid dd {
margin: 0.18rem 0 0;
color: var(--color-text-readable, var(--color-text));
color: var(--admin-text);
font-size: 0.8rem;
font-weight: 900;
line-height: 1.25;
@@ -916,17 +916,17 @@ tbody tr:hover {
align-items: center;
justify-content: space-between;
gap: 1rem;
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--admin-accent) 18%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
background: color-mix(in srgb, var(--admin-accent) 8%, transparent);
padding: 0.65rem 0.75rem;
}
.cms-info-credit span {
color: var(--color-text-readable, var(--color-text));
color: var(--admin-text);
font-weight: 900;
}
.cms-info-credit small {
color: var(--color-text-muted-readable, var(--color-text-muted));
color: var(--admin-text-muted);
font-size: 0.74rem;
font-weight: 700;
text-align: right;