fix(stats): make footer background transparent for seamless screen#84
Merged
Merged
Conversation
… seamless screen The .footer carries background: var(--bg-card), which renders as a darker band below the chart area on /stats once the divider is gone and the .footer-inner content is hidden. The fixed-position .stats-glow-bg sits behind the footer at z-index:0 and was being masked by the opaque card-color background, breaking the visual continuity the rest of the page has. Add background: transparent to the .stats-footer override so: - the glow flows continuously through the footer area, and - the body background flows continuously through it too, producing one seamless screen instead of a card-bg band at the bottom. Scope: .stats-footer only. Other routes keep the card background.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Small follow-up on PR #83. With the divider line removed and the page using the orange glow as its background, the
.footer's ownbackground: var(--bg-card)was rendering as a darker horizontal band at the bottom of/stats, breaking visual continuity with the rest of the page.Root cause
.footercarriesbackground: var(--bg-card), which sits above theposition: fixed.stats-glow-bgat z-index 0. Even after dropping the divider in PR #83, the footer's opaque card-color background masked the glow underneath and produced a visible "burn" — a slightly-darker rectangular band at the bottom of the viewport.Fix
Add
background: transparentto the.stats-footerSCSS override so:producing one seamless screen. Scope:
.stats-footeronly — other routes keep the card background unchanged.Test plan
/stats— chart area and footer share the same background; no visible horizontal band/burn separating them; glow visibly continues through the footer area./,/about,/agents,/dashboard,/privacy,/support— footer still has its solid card background; visually unchanged from current production.npm run build— green, 30 routes prerendered, 0 errors.npm run lint:i18n— 0 errors.ng extract-i18n— no diff against committedmessages.xlf.