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

fix(bg): visible button-groups and tracks on dark backgrounds

Browse Source 
The pill containers (.p-tabs, .shop-filters) used a 6% black fill that
disappeared on the dark veil, so the rounded button group lost its
outline and the inactive tabs looked like floating text. Same for the
xp / progress tracks (.ach-xp-progress, .ep-bar, .po-bar) that used
7% black.

Dark-tone overrides:
  • Containers get a 6% white wash + 10% white border so the pill
    shape stays readable
  • Inactive p-tab gets the same color/hover treatment that .shop-filter
    already had (was an oversight in the previous fix)
  • Active pills gain a darker shadow halo so they don't look detached
  • Progress tracks switch to a 10% white track instead of 7% black

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-29 21:31:53 +03:00
parent 23075dddb1
commit d838c94df4
1 changed files with 26 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/ls.css
+26 -2
View File
@@ -1263,13 +1263,37 @@ 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) {
body[data-bg-tone="dark"] .shop-filter:not(.active),
body[data-bg-tone="dark"] .p-tab:not(.active) {
color: rgba(243, 244, 246, 0.78);
}
body[data-bg-tone="dark"] .shop-filter:not(.active):hover {
body[data-bg-tone="dark"] .shop-filter:not(.active):hover,
body[data-bg-tone="dark"] .p-tab:not(.active):hover {
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
/* Container pills (`.p-tabs`, `.shop-filters`) used a 6% dark fill that
vanishes on the dark veil — restore the rounded outline with a
white-tinted wash + subtle border so the button group still reads
as a contained pill. */
body[data-bg-tone="dark"] .p-tabs,
body[data-bg-tone="dark"] .shop-filters {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
}
/* Active tab/filter — keep the white pill but add a contrast halo so
it doesn't look like a separate floating chip. */
body[data-bg-tone="dark"] .p-tab.active,
body[data-bg-tone="dark"] .shop-filter.active {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
/* Thin progress bars (xp, daily-goal) used a 7% dark fill that's
invisible on dark — switch to a faint light track. */
body[data-bg-tone="dark"] .ach-xp-progress,
body[data-bg-tone="dark"] .ep-bar,
body[data-bg-tone="dark"] .po-bar {
background: rgba(255, 255, 255, 0.10);
}
body[data-bg-tone="dark"] .ach-group-head {
border-bottom-color: rgba(255, 255, 255, 0.15);
}