maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(bg): light text on dark-tone backgrounds

Browse Source 
The dark veil was right (deep navy at 78%), but every page chrome
element below it inherited light-theme text colors and faded to
invisible — 'Магазин наград' header, shop filter buttons, achievement
group titles, balance counter etc.

Targeted overrides for body[data-bg-tone='dark']: only the elements
that sit directly on the veil get a light text color. White cards
(.shop-item, .ach-item, .ep-card) keep their dark text intact.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-29 21:29:54 +03:00
parent d2ca0d61cc
commit 23075dddb1
1 changed files with 45 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/ls.css
+45 -1
View File
@@ -1233,8 +1233,52 @@ body.no-gamification [data-gamified] { display: none !important; }
/* On the 'dark' preset we want a darker veil so light content still
pops. body[data-bg-tone="dark"] is set by api.js for dark slugs. */
body[data-bg-tone="dark"] #ls-bg-veil {
background: rgba(15, 23, 42, 0.55);
background: rgba(11, 17, 32, 0.78);
}
/* ── Dark-tone readability overrides ──
When a dark background is active the page chrome (headings, filter
tabs, section titles, breadcrumbs, balance counters) sits directly
on the dark veil and inherits the light-theme text colors — which
become invisible. Override only elements that don't have an opaque
container of their own. White cards (`.shop-item`, `.ach-item`,
`.ep-card`, etc.) keep their dark text unchanged. */
body[data-bg-tone="dark"] {
color: #e6e9f2;
}
body[data-bg-tone="dark"] .shop-title,
body[data-bg-tone="dark"] .ach-group-title,
body[data-bg-tone="dark"] .ach-group-count,
body[data-bg-tone="dark"] .ach-sum-chip,
body[data-bg-tone="dark"] .shop-balance,
body[data-bg-tone="dark"] .filter-bar,
body[data-bg-tone="dark"] .filter-tab,
body[data-bg-tone="dark"] .p-stat-label,
body[data-bg-tone="dark"] .p-stat-val,
body[data-bg-tone="dark"] .profile-name,
body[data-bg-tone="dark"] .frames-section > h4,
body[data-bg-tone="dark"] .p-pane > h2,
body[data-bg-tone="dark"] .p-pane > h3,
body[data-bg-tone="dark"] .p-section > h2,
body[data-bg-tone="dark"] .p-section > h3 {
color: #f3f4f6;
}
body[data-bg-tone="dark"] .shop-filter:not(.active) {
color: rgba(243, 244, 246, 0.78);
}
body[data-bg-tone="dark"] .shop-filter:not(.active):hover {
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
body[data-bg-tone="dark"] .ach-group-head {
border-bottom-color: rgba(255, 255, 255, 0.15);
}
body[data-bg-tone="dark"] .ach-group-count,
body[data-bg-tone="dark"] .shop-balance,
body[data-bg-tone="dark"] .frame-unlock-hint {
color: rgba(230, 233, 242, 0.72);
}
/* Sidebar already has its own opaque background — leave it alone. */
.bg-preview {
position: relative;
width: 100%;