feat(AccountMenu): apply some outline to the user avatarfeat/add-account-menu-outline

- resolves https://github.com/nextcloud/server/issues/54140

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

1 files changed, 25 insertions, 19 deletions

diff --git a/core/src/views/AccountMenu.vue b/core/src/views/AccountMenu.vue
index cac02129bac..784a939eaf4 100644
--- a/core/src/views/AccountMenu.vue
+++ b/core/src/views/AccountMenu.vue
@@ -197,27 +197,13 @@ export default defineComponent({
 }
 
 .account-menu {
-	:deep(button) {
-		// Normally header menus are slightly translucent when not active
-		// this is generally ok but for the avatar this is weird so fix the opacity
-		opacity: 1 !important;
-
-		// The avatar is just the "icon" of the button
-		// So we add the focus-visible manually
-		&:focus-visible {
-			.account-menu__avatar {
-				border: var(--border-width-input-focused) solid var(--color-background-plain-text);
-			}
-		}
-	}
-
-	// Ensure we do not waste space, as the header menu sets a default width of 350px
-	:deep(.header-menu__content) {
-		width: fit-content !important;
-	}
-
 	&__avatar {
+		--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;
+
 		&:hover {
+			--account-menu-outline: none;
 			// Add hover styles similar to the focus-visible style
 			border: var(--border-width-input-focused) solid var(--color-background-plain-text);
 		}
@@ -235,5 +221,25 @@ export default defineComponent({
 			flex: 0 1;
 		}
 	}
+
+	// Ensure we do not waste space, as the header menu sets a default width of 350px
+	:deep(.header-menu__content) {
+		width: fit-content !important;
+	}
+
+	:deep(button) {
+		// Normally header menus are slightly translucent when not active
+		// this is generally ok but for the avatar this is weird so fix the opacity
+		opacity: 1 !important;
+
+		// The avatar is just the "icon" of the button
+		// So we add the focus-visible manually
+		&:focus-visible {
+			.account-menu__avatar {
+				--account-menu-outline: none;
+				border: var(--border-width-input-focused) solid var(--color-background-plain-text);
+			}
+		}
+	}
 }
 </style>