From 5289be39deda75a8e5733fe53906066ca9da631d Mon Sep 17 00:00:00 2001 From: codyo-o <113670708+codyo-o@users.noreply.github.com> Date: Wed, 3 Jun 2026 14:05:37 +0200 Subject: [PATCH 1/6] fix(ecosia): update implemented ecosia variables 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) --- styles/ecosia/catppuccin.user.less | 133 +++++++++++++++++++++-------- 1 file changed, 96 insertions(+), 37 deletions(-) diff --git a/styles/ecosia/catppuccin.user.less b/styles/ecosia/catppuccin.user.less index 2ef6c32b66..e72b227307 100644 --- a/styles/ecosia/catppuccin.user.less +++ b/styles/ecosia/catppuccin.user.less @@ -20,53 +20,81 @@ @-moz-document domain("ecosia.org") { :root.light { #catppuccin(@lightFlavor); + #static(); } :root.dark { #catppuccin(@darkFlavor); + #static(); } #catppuccin(@flavor) { #lib.palette(); #lib.defaults(); + /* Augemented palette */ + @accent1: if(@flavor = latte, lighten(@accent, 5%), darken(@accent, 10%)); + @featured: if(@flavor = latte, lighten(@accent, 25%), darken(@accent, 5%)); + @featured1: if(@flavor = latte, lighten(@accent, 20%), darken(@accent, 10%)); + + /* Ecosia variable overrides */ --color-brand-primary: @accent !important; --color-brand-secondary: @crust !important; + --color-brand-featured: @featured !important; --color-error: @red !important; --color-success: @green !important; --color-disabled: @overlay1 !important; --color-button-background-primary: @accent !important; - --color-button-background-primary-active: @accent !important; - --color-button-background-primary-hover: @accent; + --color-button-background-primary-active: @accent1 !important; + --color-button-background-primary-hover: @accent1 !important; + --color-button-background-featured: @featured !important; + --color-button-background-featured-active: @featured1 !important; + --color-button-background-featured-hover: @featured1 !important; --color-button-background-secondary: @surface0 !important; --color-button-background-secondary-active: @surface2 !important; --color-button-background-secondary-hover: @surface1 !important; + --color-button-background-negative: @red !important; + --color-button-background-negative-hover: lighten(@red, 10%) !important; + --color-button-background-negative-active: lighten(@red, 10%) !important; --color-button-content-primary: @base !important; --color-button-content-secondary: @text !important; --color-button-content-tertiary: @accent !important; --color-button-border: @surface0 !important; - --color-button-background-transparent-hover: @surface1; - --color-button-background-transparent-active: @surface2; + --color-button-inverse-border: @base !important; + --color-button-background-transparent-hover: @surface1 !important; + --color-button-background-transparent-active: @surface2 !important; --color-background-primary: @base !important; + --color-background-primary-0: fade(@base, 100%) !important; + --color-background-primary-decorative: @mantle !important; + --color-background-inverse-primary: @text !important; --color-background-secondary: @crust !important; --color-background-tertiary: @mantle !important; - --color-background-quaternary: @surface0; + --color-background-quaternary: @surface0 !important; + --color-background-featured: @featured !important; + --color-background-brand-primary: darken(@featured, 30%) !important; + --color-background-brand-secondary: darken(@featured, 20%) !important; + --color-background-brand-secondary-alt: darken(@featured, 15%) !important; --color-background-elevation-1: @mantle !important; + --color-background-elevation-2: @base !important; --color-highlighter: @surface0 !important; --color-highlight-primary: @surface0 !important; + --color-icon-strong: @text !important; --color-overlay-primary: @overlay0 !important; --color-overlay-secondary: @overlay1 !important; --color-text-primary: @text !important; + --color-text-inverse-primary: @base !important; + --color-text-brand-secondary: darken(@green, 10%) !important; --color-text-secondary: @subtext0 !important; - --color-text-tertiary: @text !important; - --color-link-primary: @sapphire !important; - --color-link-secondary: @sky !important; - --color-url: @sapphire !important; - --color-link-results-default: @sapphire !important; - --color-link-results-visited: @teal !important; - --color-decorative-icon: @accent !important; - --color-elevation-layer-1: @surface1; - --color-elevation-layer-2: @surface2; + --color-link-primary: @blue !important; + --color-link-secondary: @subtext0 !important; + --color-link-inverse: @base !important; + --color-url: @subtext0 !important; + --color-link-results-default: @blue !important; + --color-link-results-visited: @mauve !important; + --color-decorative-icon: @subtext0 !important; + --color-video-background: #000 !important; + --color-elevation-layer-1: @surface1 !important; + --color-elevation-layer-2: @surface2 !important; --color-decorative-border-1: @surface1 !important; --color-focused: @accent !important; --color-form-border-default: @surface0 !important; @@ -74,31 +102,62 @@ --color-form-border-primary-active: @accent !important; --color-tripadvisor-rating: @subtext0 !important; --color-tree-counter-tree-tall: @yellow !important; + --color-surface-brand-secondary: darken(@green, 10%) !important; --color-green-leaf-icon-color-top: @green !important; - --color-green-leaf-icon-color-bottom: @green !important; - --color-fossil-fuel-icon-color-top: @flamingo !important; - --color-fossil-fuel-icon-color-bottom: @maroon !important; - - /* search page */ - --color-above-fold-background: @surface0 !important; - --color-above-fold-background-addon: @overlay1 !important; - --color-above-fold-text: @text !important; - --color-section-wrapper-background-gray: @surface1 !important; - --color-section-wrapper-background-dark-green: @surface0 !important; - --color-section-wrapper-background-light-green: @surface0 !important; - --color-section-header-title: @text !important; - --color-projects-title: @text !important; - --color-projects-description: @surface1; - --color-financial-report-total-background: @surface0 !important; - --color-financial-report-total-text: @text !important; - --color-forest-background-addon: @surface1 !important; - --color-forest-background-secondary: @surface0 !important; - --color-before-after-text: @text !important; + --color-green-leaf-icon-color-bottom: darken(@green, 10%) !important; - /* override color digit on homepage */ - .count__digit, - .counter__description { - color: @text !important; + .inline-alert--light, + .inline-alert--dark { + --alert-text: if(@flavor = latte, @text, @base); + --alert-negative-background: if(@flavor = latte, lighten(@red, 25%), darken(@red, 20%)); + --alert-positive-background: if(@flavor = latte, lighten(@green, 25%), darken(@green, 20%)); + --alert-warning-background: if(@flavor = latte, lighten(@yellow, 25%), darken(@yellow, 20%)); + --alert-info-background: if(@flavor = latte, lighten(@blue, 25%), darken(@blue, 20%)); + --alert-negative-border: @red; + --alert-warning-border: @yellow; + --alert-info-border: @blue; + --alert-positive-border: @green; + } + /* Toast */ + .toast[data-v-bf323c03] { + /* legibility on latte was too low */ + --toast-text: @base; + --toast-neutral: if(@flavor = latte, darken(@subtext0, 20%), @subtext0); + --toast-negative: if(@flavor = latte, darken(@red, 20%), @red); + --toast-warning: if(@flavor = latte, darken(@yellow, 20%), @yellow); + --toast-positive: if(@flavor = latte, darken(@green, 20%), @green); + --toast-informative: if(@flavor = latte, darken(@blue, 20%), @blue); } + .sustainability-label__icon { + /* already defined above */ + --color-green-leaf-icon-color-top: inherit; + --color-green-leaf-icon-color-bottom: inherit; + } + } + + #static() { + /* Vars don't change color on dark and light - base on latte for now */ + @flavor: latte; + #lib.palette(); + + @accent1: if(@flavor = latte, lighten(@accent, 5%), darken(@accent, 10%)); + @featured: if(@flavor = latte, lighten(@accent, 25%), darken(@accent, 5%)); + @featured1: if(@flavor = latte, lighten(@accent, 20%), darken(@accent, 10%)); + + --color-border-glass-static-default: fade(@base, 75%) !important; + --color-border-glass-static-hover: fade(@base, 66%) !important; + --color-border-glass-static-active: fade(@base, 50%) !important; + --color-button-background-featured-static: @featured !important; + --color-button-content-primary-static: @base !important; + --color-button-content-secondary-static: @text !important; + --color-button-background-glass-static: fade(darken(@text, 50%), 66%) !important; + --color-button-background-glass-static-hover: fade(darken(@text, 50%), 50%) !important; + --color-button-background-glass-static-active: fade(darken(@text, 50%), 33%) !important; + --color-background-featured-static: @featured1 !important; + --color-background-glass-static: fade(@text, 66%) !important; + --color-text-static-light: @base !important; + --color-text-static-dark: darken(@text, 50%) !important; + --color-link-static-light: @base !important; + --color-link-static-dark: darken(@text, 50%) !important; } } From c2c0974a295d5c27dd1c23ea1407610730948321 Mon Sep 17 00:00:00 2001 From: codyo-o <113670708+codyo-o@users.noreply.github.com> Date: Wed, 3 Jun 2026 14:22:44 +0200 Subject: [PATCH 2/6] fix(ecosia): color seed icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- styles/ecosia/catppuccin.user.less | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/styles/ecosia/catppuccin.user.less b/styles/ecosia/catppuccin.user.less index e72b227307..f31646cb8f 100644 --- a/styles/ecosia/catppuccin.user.less +++ b/styles/ecosia/catppuccin.user.less @@ -105,6 +105,8 @@ --color-surface-brand-secondary: darken(@green, 10%) !important; --color-green-leaf-icon-color-top: @green !important; --color-green-leaf-icon-color-bottom: darken(@green, 10%) !important; + --color-seed-icon-color-top: @rosewater !important; /* custom */ + --color-seed-icon-color-bottom: darken(@rosewater, 10%) !important; /* custom */ .inline-alert--light, .inline-alert--dark { @@ -133,6 +135,15 @@ --color-green-leaf-icon-color-top: inherit; --color-green-leaf-icon-color-bottom: inherit; } + + svg.icon--icon-seed { + path:first-of-type { + fill: var(--color-seed-icon-color-top) !important; + } + path:last-of-type { + fill: var(--color-seed-icon-color-bottom) !important; + } + } } #static() { From 453b82b4fb5fce4153f288598e5cb3ffc9e52876 Mon Sep 17 00:00:00 2001 From: codyo-o <113670708+codyo-o@users.noreply.github.com> Date: Wed, 3 Jun 2026 14:46:08 +0200 Subject: [PATCH 3/6] feat(ecosia): adjust background images to accent color and flavor 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 --- styles/ecosia/catppuccin.user.less | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/styles/ecosia/catppuccin.user.less b/styles/ecosia/catppuccin.user.less index f31646cb8f..ae2727100c 100644 --- a/styles/ecosia/catppuccin.user.less +++ b/styles/ecosia/catppuccin.user.less @@ -144,6 +144,16 @@ fill: var(--color-seed-icon-color-bottom) !important; } } + + /* Dynamically adjust (leaf) background pictures */ + .above-fold-section, + .main-footer-visual { + img { + @degrees: 280deg + hue(@accent); + @grayscale: if((@accent = @subtext0), 100%, 0%); + filter: saturate(if(@flavor = latte, 0.6, 0.9)) hue-rotate(@degrees) grayscale(@grayscale) brightness(if(@flavor = latte, 1, 0.5)); + } + } } #static() { From 8c3b7bbc12efbdda7078fe964249db557da3a445 Mon Sep 17 00:00:00 2001 From: codyo-o <113670708+codyo-o@users.noreply.github.com> Date: Sat, 6 Jun 2026 13:11:36 +0200 Subject: [PATCH 4/6] refactor(ecosia): restructure into reusable, scoped mixins MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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()`. --- styles/ecosia/catppuccin.user.less | 140 +++++++++++++++++------------ 1 file changed, 82 insertions(+), 58 deletions(-) diff --git a/styles/ecosia/catppuccin.user.less b/styles/ecosia/catppuccin.user.less index ae2727100c..bc33a2e461 100644 --- a/styles/ecosia/catppuccin.user.less +++ b/styles/ecosia/catppuccin.user.less @@ -19,24 +19,51 @@ @-moz-document domain("ecosia.org") { :root.light { - #catppuccin(@lightFlavor); - #static(); + #catppuccin.search(@lightFlavor); } :root.dark { - #catppuccin(@darkFlavor); - #static(); + #catppuccin.search(@darkFlavor); } +} + +#catppuccin() { + .search(@flavor) { + #catppuccin.base(@flavor); - #catppuccin(@flavor) { + /* Dynamically adjust (leaf) background pictures */ + .above-fold-section, + .main-footer-visual { + img { + @degrees: 280deg + hue(@accent); + @grayscale: if((@accent =@subtext0), 100%, 0%); + filter: saturate(if(@flavor =latte, 0.6, 0.9)) hue-rotate(@degrees) grayscale(@grayscale) brightness(if(@flavor =latte, 1, 0.5)); + } + } + } + + .base(@flavor) { + #catppuccin._common-vars(@flavor); + #catppuccin._static(); + #catppuccin._alerts(@flavor); + #catppuccin._toasts(@flavor); + #catppuccin._icons(); + } + + ._init(@flavor, @exclude-defaults: false) { #lib.palette(); - #lib.defaults(); + & when (@exclude-defaults =false) { + #lib.defaults(); + } /* Augemented palette */ - @accent1: if(@flavor = latte, lighten(@accent, 5%), darken(@accent, 10%)); - @featured: if(@flavor = latte, lighten(@accent, 25%), darken(@accent, 5%)); - @featured1: if(@flavor = latte, lighten(@accent, 20%), darken(@accent, 10%)); + @accent1: if(@flavor =latte, lighten(@accent, 5%), darken(@accent, 10%)); + @featured: if(@flavor =latte, lighten(@accent, 25%), darken(@accent, 5%)); + @featured1: if(@flavor =latte, lighten(@accent, 20%), darken(@accent, 10%)); + } + ._common-vars(@flavor) { + #catppuccin._init(@flavor); /* Ecosia variable overrides */ --color-brand-primary: @accent !important; --color-brand-secondary: @crust !important; @@ -105,31 +132,64 @@ --color-surface-brand-secondary: darken(@green, 10%) !important; --color-green-leaf-icon-color-top: @green !important; --color-green-leaf-icon-color-bottom: darken(@green, 10%) !important; - --color-seed-icon-color-top: @rosewater !important; /* custom */ - --color-seed-icon-color-bottom: darken(@rosewater, 10%) !important; /* custom */ + --color-seed-icon-color-top: @rosewater !important; + /* custom */ + --color-seed-icon-color-bottom: darken(@rosewater, 10%) !important; + /* custom */ + } + + ._static() { + #catppuccin._init(latte, true); + + --color-border-glass-static-default: fade(@base, 75%) !important; + --color-border-glass-static-hover: fade(@base, 66%) !important; + --color-border-glass-static-active: fade(@base, 50%) !important; + --color-button-background-featured-static: @featured !important; + --color-button-content-primary-static: @base !important; + --color-button-content-secondary-static: @text !important; + --color-button-background-glass-static: fade(darken(@text, 50%), 66%) !important; + --color-button-background-glass-static-hover: fade(darken(@text, 50%), 50%) !important; + --color-button-background-glass-static-active: fade(darken(@text, 50%), 33%) !important; + --color-background-featured-static: @featured1 !important; + --color-background-glass-static: fade(@text, 66%) !important; + --color-text-static-light: @base !important; + --color-text-static-dark: darken(@text, 50%) !important; + --color-link-static-light: @base !important; + --color-link-static-dark: darken(@text, 50%) !important; + } + + ._alerts(@flavor) { + #catppuccin._init(@flavor); .inline-alert--light, .inline-alert--dark { - --alert-text: if(@flavor = latte, @text, @base); - --alert-negative-background: if(@flavor = latte, lighten(@red, 25%), darken(@red, 20%)); - --alert-positive-background: if(@flavor = latte, lighten(@green, 25%), darken(@green, 20%)); - --alert-warning-background: if(@flavor = latte, lighten(@yellow, 25%), darken(@yellow, 20%)); - --alert-info-background: if(@flavor = latte, lighten(@blue, 25%), darken(@blue, 20%)); + --alert-text: if(@flavor =latte, @text, @base); + --alert-negative-background: if(@flavor =latte, lighten(@red, 25%), darken(@red, 20%)); + --alert-positive-background: if(@flavor =latte, lighten(@green, 25%), darken(@green, 20%)); + --alert-warning-background: if(@flavor =latte, lighten(@yellow, 25%), darken(@yellow, 20%)); + --alert-info-background: if(@flavor =latte, lighten(@blue, 25%), darken(@blue, 20%)); --alert-negative-border: @red; --alert-warning-border: @yellow; --alert-info-border: @blue; --alert-positive-border: @green; } - /* Toast */ + } + + ._toasts(@flavor) { + #catppuccin._init(@flavor); + .toast[data-v-bf323c03] { /* legibility on latte was too low */ --toast-text: @base; - --toast-neutral: if(@flavor = latte, darken(@subtext0, 20%), @subtext0); - --toast-negative: if(@flavor = latte, darken(@red, 20%), @red); - --toast-warning: if(@flavor = latte, darken(@yellow, 20%), @yellow); - --toast-positive: if(@flavor = latte, darken(@green, 20%), @green); - --toast-informative: if(@flavor = latte, darken(@blue, 20%), @blue); + --toast-neutral: if(@flavor =latte, darken(@subtext0, 20%), @subtext0); + --toast-negative: if(@flavor =latte, darken(@red, 20%), @red); + --toast-warning: if(@flavor =latte, darken(@yellow, 20%), @yellow); + --toast-positive: if(@flavor =latte, darken(@green, 20%), @green); + --toast-informative: if(@flavor =latte, darken(@blue, 20%), @blue); } + } + + ._icons() { .sustainability-label__icon { /* already defined above */ --color-green-leaf-icon-color-top: inherit; @@ -144,41 +204,5 @@ fill: var(--color-seed-icon-color-bottom) !important; } } - - /* Dynamically adjust (leaf) background pictures */ - .above-fold-section, - .main-footer-visual { - img { - @degrees: 280deg + hue(@accent); - @grayscale: if((@accent = @subtext0), 100%, 0%); - filter: saturate(if(@flavor = latte, 0.6, 0.9)) hue-rotate(@degrees) grayscale(@grayscale) brightness(if(@flavor = latte, 1, 0.5)); - } - } - } - - #static() { - /* Vars don't change color on dark and light - base on latte for now */ - @flavor: latte; - #lib.palette(); - - @accent1: if(@flavor = latte, lighten(@accent, 5%), darken(@accent, 10%)); - @featured: if(@flavor = latte, lighten(@accent, 25%), darken(@accent, 5%)); - @featured1: if(@flavor = latte, lighten(@accent, 20%), darken(@accent, 10%)); - - --color-border-glass-static-default: fade(@base, 75%) !important; - --color-border-glass-static-hover: fade(@base, 66%) !important; - --color-border-glass-static-active: fade(@base, 50%) !important; - --color-button-background-featured-static: @featured !important; - --color-button-content-primary-static: @base !important; - --color-button-content-secondary-static: @text !important; - --color-button-background-glass-static: fade(darken(@text, 50%), 66%) !important; - --color-button-background-glass-static-hover: fade(darken(@text, 50%), 50%) !important; - --color-button-background-glass-static-active: fade(darken(@text, 50%), 33%) !important; - --color-background-featured-static: @featured1 !important; - --color-background-glass-static: fade(@text, 66%) !important; - --color-text-static-light: @base !important; - --color-text-static-dark: darken(@text, 50%) !important; - --color-link-static-light: @base !important; - --color-link-static-dark: darken(@text, 50%) !important; } } From ad304393ba3f3f8d0901cbaebe65ad688221602a Mon Sep 17 00:00:00 2001 From: codyo-o <113670708+codyo-o@users.noreply.github.com> Date: Sat, 6 Jun 2026 14:43:52 +0200 Subject: [PATCH 5/6] refactor(ecosia): simplify image filtering with color blend-mode overlay Refactor image recoloring from filter-based hue rotation to blend-mode overlay Fix recolored img hiding bottom page ends --- styles/ecosia/catppuccin.user.less | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/styles/ecosia/catppuccin.user.less b/styles/ecosia/catppuccin.user.less index bc33a2e461..293929d4a7 100644 --- a/styles/ecosia/catppuccin.user.less +++ b/styles/ecosia/catppuccin.user.less @@ -34,10 +34,14 @@ /* Dynamically adjust (leaf) background pictures */ .above-fold-section, .main-footer-visual { - img { - @degrees: 280deg + hue(@accent); - @grayscale: if((@accent =@subtext0), 100%, 0%); - filter: saturate(if(@flavor =latte, 0.6, 0.9)) hue-rotate(@degrees) grayscale(@grayscale) brightness(if(@flavor =latte, 1, 0.5)); + picture { + #catppuccin.color-overlay(lighten(@accent, 25%)); + } + } + .main-footer-visual__content { + isolation: isolate; + &::before { + z-index: 1; } } } @@ -205,4 +209,17 @@ } } } + + .color-overlay(@color) { + &::before { + background: @color; + mix-blend-mode: color; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + content: ""; + } + } } From 5a097f424bb4a4f7958d684710c313d8c2f1d3c8 Mon Sep 17 00:00:00 2001 From: codyo-o <113670708+codyo-o@users.noreply.github.com> Date: Sat, 6 Jun 2026 15:21:32 +0200 Subject: [PATCH 6/6] fix(ecosia): img color overlay problems 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 --- styles/ecosia/catppuccin.user.less | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/styles/ecosia/catppuccin.user.less b/styles/ecosia/catppuccin.user.less index 293929d4a7..449445bd63 100644 --- a/styles/ecosia/catppuccin.user.less +++ b/styles/ecosia/catppuccin.user.less @@ -14,7 +14,6 @@ @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ - @import "https://userstyles.catppuccin.com/lib/lib.less"; @-moz-document domain("ecosia.org") { @@ -35,13 +34,16 @@ .above-fold-section, .main-footer-visual { picture { - #catppuccin.color-overlay(lighten(@accent, 25%)); + #catppuccin.color-overlay(@accent); } - } - .main-footer-visual__content { - isolation: isolate; - &::before { - z-index: 1; + picture:has(.above-fold-section__background) { + border-radius: 20px; + } + .main-footer-visual__content { + isolation: isolate; + &::before { + z-index: 1; + } } } } @@ -211,8 +213,8 @@ } .color-overlay(@color) { - &::before { - background: @color; + &::after { + background: hsl(hue(@color), min(saturation(@color), 30%), lightness(@color)); mix-blend-mode: color; position: absolute; top: 0; @@ -220,6 +222,7 @@ width: 100%; height: 100%; content: ""; + border-radius: inherit; } } }