Skip to content

Fix GDPR banner CSS breaking third-party lightboxes (#167)#168

Merged
parhumm merged 1 commit intodevelopmentfrom
fix/167-gdpr-banner-reduced-motion
Mar 10, 2026
Merged

Fix GDPR banner CSS breaking third-party lightboxes (#167)#168
parhumm merged 1 commit intodevelopmentfrom
fix/167-gdpr-banner-reduced-motion

Conversation

@parhumm
Copy link
Copy Markdown
Contributor

@parhumm parhumm commented Mar 10, 2026 •
edited by coderabbitai bot
Loading

Summary

  • Scope @media (prefers-reduced-motion: reduce) CSS rule from global * selector to SlimStat elements only (#slimstat-gdpr-banner, .slimstat-gdpr-management, .slimstat-consent-status)
  • The global * selector with !important was killing all CSS transitions/animations site-wide, breaking third-party plugins like FancyBox V2 / Firelight Lightbox when the user's OS has reduced-motion accessibility enabled

Test plan

  • Enable OS reduced motion (macOS: System Settings > Accessibility > Display > Reduce motion)
  • Load a page with SlimStat GDPR banner active — verify banner still skips animations
  • With a transition-heavy plugin (e.g., any lightbox), verify third-party transitions work normally
  • Disable reduced motion — verify no behavioral change

Fixes #167

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style
    • Refined the GDPR banner's handling of motion preferences to apply only to relevant banner elements, improving performance and ensuring more targeted respect for user accessibility settings.

@parhumm
fix(css): scope prefers-reduced-motion to SlimStat elements only (#167)
25b330e 
The global `*` selector in @media (prefers-reduced-motion: reduce) was
killing ALL CSS transitions/animations on the page with !important,
breaking third-party plugins like FancyBox V2 / Firelight Lightbox.
Now scoped to #slimstat-gdpr-banner, .slimstat-gdpr-management, and
.slimstat-consent-status only.
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 10, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 16f0655f-a50d-48af-bdb4-00ffe09bb8f3

📥 Commits

Reviewing files that changed from the base of the PR and between e59f22e and 25b330e.

📒 Files selected for processing (1)
  • assets/css/gdpr-banner.css
📝 Walkthrough

Walkthrough

A CSS bug fix that restricts reduced-motion CSS rules from a global * selector to specific SlimStat banner elements, preventing unintended overrides of animation and transition properties on third-party plugins like lightboxes.

Changes

Cohort / File(s) Summary
Reduced-Motion CSS Scope
assets/css/gdpr-banner.css		 Replaced global * selector in @media (prefers-reduced-motion: reduce) block with scoped targets: #slimstat-gdpr-banner, #slimstat-gdpr-banner *, .slimstat-gdpr-management, .slimstat-gdpr-management *, and .slimstat-consent-status. Prevents CSS !important overrides from breaking third-party lightbox transitions on pages with OS-level reduced-motion accessibility settings enabled.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A wildcard selector ran wild and free,
Breaking lightboxes for all to see!
Now scoped with care, the banner's tamed,
Third-party friends won't be blamed! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main change: fixing CSS that broke third-party lightboxes by scoping reduced-motion rules to SlimStat elements only.
Linked Issues check ✅ Passed The PR fully addresses issue #167 by replacing the global * selector with scoped selectors (#slimstat-gdpr-banner, .slimstat-gdpr-management, .slimstat-consent-status) in the reduced-motion media query.
Out of Scope Changes check ✅ Passed All changes are within scope of issue #167; only the gdpr-banner.css file is modified to scope the reduced-motion CSS rule to SlimStat elements, with no unrelated alterations.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/167-gdpr-banner-reduced-motion

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@parhumm parhumm merged commit d267ef6 into development Mar 10, 2026
1 check passed
@parhumm parhumm deleted the fix/167-gdpr-banner-reduced-motion branch March 10, 2026 18:10
This was referenced Mar 11, 2026
Merged
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@parhumm