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

Fix card text readability: use navbar-text color paired with navbar background on all cards

Browse Source
This commit is contained in:
openhands committed 2026-07-07 19:40:13 +02:00
1 parent e53a9dc838
commit 54c03c998c
2 files changed
+7 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/globals.css
+5 -2
View File
@@ -248,6 +248,7 @@ body {
} }
.card-base { .card-base {
background-color: var(--color-navbar); background-color: var(--color-navbar);
color: var(--color-navbar-text);
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);
@@ -292,6 +293,7 @@ a:hover {
} }
.card { .card {
background: var(--color-navbar); background: var(--color-navbar);
color: var(--color-navbar-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(--card-border-radius); border-radius: var(--card-border-radius);
box-shadow: var(--shadow-card); box-shadow: var(--shadow-card);
@@ -457,6 +459,7 @@ tbody tr:hover {
/* Cards used inside admin pages */ /* Cards used inside admin pages */
.admin-card { .admin-card {
background: var(--color-navbar); background: var(--color-navbar);
color: var(--color-navbar-text);
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);
@@ -571,7 +574,7 @@ tbody tr:hover {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
background: var(--color-navbar); background: var(--color-navbar);
color: var(--color-text); color: var(--color-navbar-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);
box-shadow: var(--shadow-card); box-shadow: var(--shadow-card);
@@ -609,7 +612,7 @@ tbody tr:hover {
font-weight: 700; font-weight: 700;
font-size: 1rem; font-size: 1rem;
line-height: 1.3; line-height: 1.3;
color: var(--color-text); color: var(--color-navbar-text);
} }
.content-card-subtitle { .content-card-subtitle {
margin: 0.15rem 0 0; margin: 0.15rem 0 0;
src/app/news/page.tsx
+2 -2
View File
@@ -64,13 +64,13 @@ export default async function NewsPage() {
/> />
)} )}
<div style={{ padding: "1rem 1.1rem", flex: 1, display: "flex", flexDirection: "column" }}> <div style={{ padding: "1rem 1.1rem", flex: 1, display: "flex", flexDirection: "column" }}>
<h3 style={{ margin: 0, fontSize: "1.05rem", color: "var(--color-text)", lineHeight: 1.4 }}> <h3 style={{ margin: 0, fontSize: "1.05rem", color: "var(--color-navbar-text)", lineHeight: 1.4 }}>
{a.title} {a.title}
</h3> </h3>
<p className="muted" style={{ margin: "0.35rem 0 0.6rem", fontSize: "0.78rem" }}> <p className="muted" style={{ margin: "0.35rem 0 0.6rem", fontSize: "0.78rem" }}>
{formatDate(a.createdAt)} {formatDate(a.createdAt)}
</p> </p>
<p style={{ margin: 0, color: "var(--color-text)", fontSize: "0.88rem", lineHeight: 1.55 }}> <p style={{ margin: 0, color: "var(--color-navbar-text)", fontSize: "0.88rem", lineHeight: 1.55 }}>
{excerpt(a.shortStory, 150)} {excerpt(a.shortStory, 150)}
</p> </p>
</div> </div>