diff options
Diffstat (limited to 'apps/theming')
| -rw-r--r-- | apps/theming/css/default.css | 7 | ||||
| -rw-r--r-- | apps/theming/lib/Themes/DefaultTheme.php | 9 | ||||
| -rw-r--r-- | apps/theming/lib/Themes/HighContrastTheme.php | 3 |
3 files changed, 18 insertions, 1 deletions
diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index ad5b27530c3..6a6628f074a 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -74,8 +74,15 @@ --clickable-area-large: 48px; --clickable-area-small: 24px; --default-grid-baseline: 4px; + --header-height: 50px; --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. + */ + --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; + --navigation-width: 300px; --sidebar-min-width: 300px; --sidebar-max-width: 500px; diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 1a301eb9820..7d06926c52f 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -191,9 +191,16 @@ class DefaultTheme implements ITheme { '--default-grid-baseline' => '4px', - // various structure data + // header / navigation bar '--header-height' => '50px', '--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. + */ + '--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', + + // various structure data '--navigation-width' => '300px', '--sidebar-min-width' => '300px', '--sidebar-max-width' => '500px', diff --git a/apps/theming/lib/Themes/HighContrastTheme.php b/apps/theming/lib/Themes/HighContrastTheme.php index 1d20ae251df..5b51114a32f 100644 --- a/apps/theming/lib/Themes/HighContrastTheme.php +++ b/apps/theming/lib/Themes/HighContrastTheme.php @@ -106,6 +106,9 @@ class HighContrastTheme extends DefaultTheme implements ITheme { '--color-border' => $this->util->darken($colorMainBackground, 50), '--color-border-dark' => $this->util->darken($colorMainBackground, 50), '--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 56), + + // remove the gradient from the app icons + '--header-menu-icon-mask' => 'none', ] ); } |