diff options
Diffstat (limited to 'core/src/views/AccountMenu.vue')
| -rw-r--r-- | core/src/views/AccountMenu.vue | 46 |
1 files changed, 27 insertions, 19 deletions
diff --git a/core/src/views/AccountMenu.vue b/core/src/views/AccountMenu.vue index d1b4694ebc1..5b7ead636bd 100644 --- a/core/src/views/AccountMenu.vue +++ b/core/src/views/AccountMenu.vue @@ -197,27 +197,15 @@ 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 wast 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; + // do not apply the alpha mask on the avatar div + mask: none !important; + &: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 +223,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> |