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

Make card and box backgrounds follow navbar theme color

Browse Source
This commit is contained in:
openhands committed 2026-07-07 19:26:05 +02:00
1 parent 61ae4e7f8b
commit 4d4d9bc1cd
2 files changed
+12 -12
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/globals.css
+10 -10
View File
@@ -247,7 +247,7 @@ body {
box-shadow: var(--shadow-card-hover); box-shadow: var(--shadow-card-hover);
} }
.card-base { .card-base {
background-color: var(--color-surface); background-color: var(--color-navbar);
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: var(--shadow-card); box-shadow: var(--shadow-card);
border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
@@ -283,7 +283,7 @@ a:hover {
font-size: 0.875rem; font-size: 0.875rem;
} }
.hero { .hero {
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)), color-mix(in srgb, var(--color-accent) 8%, var(--color-surface))); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-navbar)), color-mix(in srgb, var(--color-accent) 8%, var(--color-navbar)));
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 2rem 2.25rem; padding: 2rem 2.25rem;
@@ -291,7 +291,7 @@ a:hover {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.card { .card {
background: var(--color-surface); background: var(--color-navbar);
border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
box-shadow: var(--shadow-card); box-shadow: var(--shadow-card);
@@ -456,7 +456,7 @@ tbody tr:hover {
/* Cards used inside admin pages */ /* Cards used inside admin pages */
.admin-card { .admin-card {
background: var(--color-surface); background: var(--color-navbar);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 16px; border-radius: 16px;
box-shadow: var(--shadow-card); box-shadow: var(--shadow-card);
@@ -490,7 +490,7 @@ tbody tr:hover {
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.4rem;
padding: 0.4rem 0.75rem; padding: 0.4rem 0.75rem;
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-navbar));
border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
border-radius: 999px; border-radius: 999px;
font-size: 0.78rem; font-size: 0.78rem;
@@ -500,7 +500,7 @@ tbody tr:hover {
/* Tables */ /* Tables */
.admin-page table { .admin-page table {
width: 100%; width: 100%;
background: var(--color-surface); background: var(--color-navbar);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 16px; border-radius: 16px;
overflow: hidden; overflow: hidden;
@@ -509,7 +509,7 @@ tbody tr:hover {
border-spacing: 0; border-spacing: 0;
} }
.admin-page thead th { .admin-page thead th {
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-navbar));
color: var(--color-text-muted); color: var(--color-text-muted);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
white-space: nowrap; white-space: nowrap;
@@ -570,7 +570,7 @@ tbody tr:hover {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
background: var(--color-surface); background: var(--color-navbar);
color: var(--color-text); color: var(--color-text);
border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
@@ -586,7 +586,7 @@ tbody tr:hover {
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
padding: 0.9rem 1.1rem; padding: 0.9rem 1.1rem;
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 5%, var(--color-surface))); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-navbar)), color-mix(in srgb, var(--color-primary) 5%, var(--color-navbar)));
border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent);
} }
.content-card-icon { .content-card-icon {
@@ -597,7 +597,7 @@ tbody tr:hover {
display: grid; display: grid;
place-items: center; place-items: center;
font-size: 1.25rem; font-size: 1.25rem;
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 22%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 12%, var(--color-surface))); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 22%, var(--color-navbar)), color-mix(in srgb, var(--color-primary) 12%, var(--color-navbar)));
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(--color-primary) 30%, transparent);
} }
.content-card-head-text { .content-card-head-text {
src/app/news/page.tsx
+2 -2
View File
@@ -48,7 +48,7 @@ export default async function NewsPage() {
> >
<div <div
style={{ style={{
background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)))", background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-navbar)), color-mix(in srgb, var(--color-primary) 5%, var(--color-navbar)))",
borderBottom: "1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent)", borderBottom: "1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
padding: "0.6rem 0.75rem", padding: "0.6rem 0.75rem",
fontSize: "0.78rem", fontSize: "0.78rem",
@@ -65,7 +65,7 @@ export default async function NewsPage() {
/> />
) : ( ) : (
<div <div
style={{ width: "100%", aspectRatio: "16/9", backgroundColor: "var(--color-surface)" }} style={{ width: "100%", aspectRatio: "16/9", backgroundColor: "var(--color-navbar)" }}
/> />
)} )}
<div style={{ padding: "0.75rem" }}> <div style={{ padding: "0.75rem" }}>