Merge pull request #54178 from nextcloud/feat/app-icon-opacity

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

Author: susnux

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;

apps/theming/lib/Themes/DefaultTheme.php

@@ -191,9 +191,16 @@ public function getCSSVariables(): array {
 
 			'--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',

apps/theming/lib/Themes/HighContrastTheme.php

@@ -106,6 +106,9 @@ public function getCSSVariables(): array {
 				'--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',
 			]
 		);
 	}

core/css/header.css.map

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

core/css/header.scss

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

core/css/server.css.map

@@ -201,6 +201,8 @@ export default defineComponent({
 		--account-menu-outline: var(--border-width-input) solid color-mix(in srgb, var(--color-background-plain-text), transparent 75%);
 		outline: var(--account-menu-outline);
 		position: fixed;
+		// do not apply the alpha mask on the avatar div
+		mask: none !important;
 
 		&:hover {
 			--account-menu-outline: none;