fix(ecosia): update css vars and fix missing styling on main search pages#2253
Draft
codyo-o wants to merge 7 commits into
Draft
fix(ecosia): update css vars and fix missing styling on main search pages#2253codyo-o wants to merge 7 commits into
codyo-o wants to merge 7 commits into
Conversation
Update userstyle to use new ecosia.org css variables Remove unused variables (vars not found on ecosia stylesheets) Update styling to conform more to catppuccin styleguide (esp. links)
Add styling for seed icon svg in top right of ecosia search view. - Add custom css variables (`--color-seed-icon-color-top`,`—color-seed-icon-color-bottom`) for easy (conformed) adjustment.
Add CSS filters to dynamically adapt leaf background picture colors based on the current Catppuccin flavor and accent color. - Adjusts color via hue rotation to match the selected accent color and keep picture values intact. - Adjusts saturation and brightness depending on flavor
Reorganize theme structure into modular mixins. - `.search()` implements all changes needed for ecosia’s search pages (typically everything under www.ecosia.org) - based on `.base()` - `.base()` is a collection of all simple variable changes including common icons - uses `._common-vars()`, `._static()`, `._alerts()`, `._toasts()`, `._icons()` - `._` mixins are ecosia’s variables grouped as they were within their own code as well. (The grouping may be unnecessary.) - `._static()` needs to be implemented separately as it always initialises using `latte` instead of the dynamic `@flavor` - `_icons()` re-assignes colors for common icons to use the adjusted css variables from `._common-vars()`.
Refactor image recoloring from filter-based hue rotation to blend-mode overlay Fix recolored img hiding bottom page ends
Fix color overlay not showing on homepage background (::before vs ::after) Fix img overlay spilling beyond border-radius on homepage background Fix overlay could be completely desaturated on dark mode
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.
🗒 Checklist 🗒
🔧 What does this fix? 🔧
This pull request updates the variables to conform to the one used on ecosia's search pages.
Update css vars on www.ecosia.org pages and therefor fixes missing styling for:
Fix missing styling for other elements on www.ecosia.org pages
Implement a few changes to align further to the catppuccin style guide
blueandmauveinstead ofsapphire--color-button-content-secondaryis nowtextinstead ofaccentto make it less prominent🔍 Reproduction Steps 🔍
css variable changes affect elements on https://www.ecosia.org/
/search/ai-chat/videos/news(available via searching or the nav-row at the top)
seed icon is located on the search pages in the top right corner
leaf backgrounds are on the homepage as well as at the bottom of the search pages
--color-button-content-secondaryaffects e.g. the text next to the seed icon and on the sign in button on the news pages🎯 TODOs – Upcoming changes 🎯
For separate PRs?