lobsters/lobsters

replace 'opacity' in CSS

Open

#2,032 opened on May 28, 2026

View on GitHub
 (0 comments) (0 reactions) (0 assignees)Ruby (961 forks)user submission
bugdesigngood first issue

Repository metrics

Stars
 (4,680 stars)
PR merge metrics
 (Avg merge 6d 5h) (24 merged PRs in 30d)

Description

In the CSS we use opacity to gray out stories and comments with negative scores. This has prompted recurring bugs over the years because opacity creates a stacking context, sometimes child elements like the popups for caches and flags appear under other elements. And then those inherit the opacity so they're hard to see. (These two bugs have recurred roughly annually for the life of the site.)

We have a light and a dark mode, and high contrast modes. This is not a huge matrix of potential colors for this effect. Can we precalculate those values and use the colors directly on the text color attribute? Then we wouldn't have a growing list of :not exclusions on the opacity like #2024.

Contributor guide

Research direction
Identify all CSS rules using opacity on text elements, calculate the resulting color for light and dark modes using the background color, and replace opacity with hardcoded color values using the `color` property.
Tech stack
csshtml
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
CSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70