From 03050047095fdae5107a64f2f22a3a4c9833d937 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Thu, 14 Aug 2025 10:06:46 +0200 Subject: [PATCH] fix: add more transparency to the header icon gradient Signed-off-by: Ferdinand Thiessen --- apps/theming/css/default.css | 4 ++-- apps/theming/lib/Themes/DefaultTheme.php | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index 6a6628f074a..41f0272f017 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -79,9 +79,9 @@ --header-menu-item-height: 44px; /* An alpha mask to be applied to all icons on the navigation bar (header menu). * Icons are have a size of 20px but usually we use MDI which have a content of 16px so 2px padding top bottom, - * for better gradient we set those 2px (10% of height) as start and stop positions, this is also somewhat size agnostic as we only depend on the percentage. + * for better gradient we must at first begin at those 2px (10% of height) as start and stop positions. */ - --header-menu-icon-mask: linear-gradient(var(--color-background-plain-text) 10%, color-mix(in srgb, var(--color-background-plain-text), 25% transparent) 90%) alpha; + --header-menu-icon-mask: linear-gradient(var(--color-background-plain-text) 25%, color-mix(in srgb, var(--color-background-plain-text), 55% transparent) 90%) alpha; --navigation-width: 300px; --sidebar-min-width: 300px; diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 7d06926c52f..bdd3048a498 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -196,9 +196,9 @@ class DefaultTheme implements ITheme { '--header-menu-item-height' => '44px', /* An alpha mask to be applied to all icons on the navigation bar (header menu). * Icons are have a size of 20px but usually we use MDI which have a content of 16px so 2px padding top bottom, - * for better gradient we set those 2px (10% of height) as start and stop positions, this is also somewhat size agnostic as we only depend on the percentage. + * for better gradient we must at first begin at those 2px (10% of height) as start and stop positions. */ - '--header-menu-icon-mask' => 'linear-gradient(var(--color-background-plain-text) 10%, color-mix(in srgb, var(--color-background-plain-text), 25% transparent) 90%) alpha', + '--header-menu-icon-mask' => 'linear-gradient(var(--color-background-plain-text) 25%, color-mix(in srgb, var(--color-background-plain-text), 55% transparent) 90%) alpha', // various structure data '--navigation-width' => '300px',