averello/nextcloud-server-mirror
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-02-27 18:37:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(AppMenu): add slight opactiy gradient to app icons

Browse Source 
- resolves https://github.com/nextcloud/server/issues/54141

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen
2025-07-31 14:37:38 +02:00
parent 876b4898f0
commit 2be7d03395
5 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/theming/css/default.css
View File

@@ -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;

9
apps/theming/lib/Themes/DefaultTheme.php
View File

@@ -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',

3
apps/theming/lib/Themes/HighContrastTheme.php
View File

@@ -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',
]
);
}

4
core/css/header.scss
View File

@@ -85,10 +85,8 @@
max-height: calc(100vh - #{variables.$header-height} - 8px);
}
/* Header menu */
#header {
/* Header menu */
$header-menu-entry-height: 44px;
.header-end > div > .menu {
background-color: var(--color-main-background);
filter: drop-shadow(0 1px 5px var(--color-box-shadow));

1
core/src/components/AppMenuIcon.vue
View File

@@ -51,6 +51,7 @@ $unread-indicator-size: 10px;
height: $icon-size;
width: $icon-size;
filter: var(--background-image-invert-if-bright);
mask: var(--header-menu-icon-mask);
}
&__unread {