Updated sponsor label color web rendering for CTA card#22530
Updated sponsor label color web rendering for CTA card#22530ronaldlangeveld merged 1 commit intomainfrom
Conversation
Ref https://linear.app/ghost/issue/PLG-370/fix-sponsor-label-rendering-on-web - With the sponsor label being stripped of the p tag, the color was not being applied correctly. - Added hover state to the sponsor label and text links
WalkthroughThis pull request refines the CSS styling for call-to-action elements. The changes simplify and update the selectors targeting sponsor labels and text. In particular, the selector Possibly Related PRs
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
ghost/core/core/frontend/src/cards/css/cta.css (1)
75-77: Selector Refinement & Color-Mix Usage:
The updated selector.kg-cta-sponsor-label span:not(a span)correctly reflects the removal of the<p>tag, ensuring that the color is now applied directly to the desired span elements. One note: the use ofcolor-mix(in srgb, currentColor 45%, transparent)is modern and may not be fully supported in all browsers. Please verify that this approach works across all target environments or consider a fallback strategy if needed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
ghost/core/core/frontend/src/cards/css/cta.css(3 hunks)
🔇 Additional comments (5)
ghost/core/core/frontend/src/cards/css/cta.css (5)
79-83: Unified Link Styling for Sponsor Label:
The new CSS block targeting.kg-cta-sponsor-label a, .kg-cta-sponsor-label a spansets the color and applies the transition ofopacity 0.15s ease-in-out. This ensures consistency in the visual behavior of links within the sponsor label. The change is aligned with the PR objective and overall design.
85-89: Hover State Enhancement for Sponsor Label Links:
The addition of the hover state with selectors.kg-cta-sponsor-label a:hover, .kg-cta-sponsor-label a:hover spanthat setsopacity: 0.85provides clear visual feedback on interaction. This change is consistent with the design improvements outlined in the PR.
182-186: Consistent Transition for Text Links:
The updated rule for.kg-cta-text anow includes a transition toopacity 0.15s ease-in-out, which matches the hover transition used in other elements. This helps maintain a uniform user interaction experience across call-to-action components.
187-190: Hover State for Text Links:
The hover state for.kg-cta-text a:hoversettingopacity: 0.85is in line with the updated UI behavior for sponsor labels, ensuring consistency in user feedback upon interaction with text links.
205-205: Button Transition Duration Update:
The modification of the transition duration for the call-to-action button (a.kg-cta-button) toopacity 0.15s ease-in-outnow aligns with the transitions applied to other interactive elements on the card. This consistency reinforces the overall design coherence.
2 participants
Ref https://linear.app/ghost/issue/PLG-370/fix-sponsor-label-rendering-on-web