fix(css): Adjust header styles to only add focus-visible styles to menu

Only the main menu should be styles by the header styles, not the popover menus.

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

diff --git a/core/css/header.scss b/core/css/header.scss
index 8eae2af3992d1c7062eb562415a18a3abaae0662..01a8eb7014a3013d020e6c1b4ee189bad94bf499 100644 (file)
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -11,24 +11,25 @@
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
-       a:not(.button):focus-visible, button:not(.button-vue):focus-visible, div[role="button"]:focus-visible {
-               outline: none;
-       }
+       user-select: none;
 
-       a:not(.button):focus-visible::after, .button-vue:focus-visible::after, div[role=button]:focus-visible::after {
-               content: " ";
-               position: absolute;
-               transform: translateX(-50%);
-               width: 12px;
-               height: 2px;
-               border-radius: 3px;
-               background-color: var(--color-background-plain-text);
-               left: 50%;
-               opacity: 1;
-       }
+       #nextcloud:focus-visible,
+       .app-menu-entry a:focus-visible,
+       .header-menu button:first-of-type:focus-visible {
+               outline: none;
 
-       a:not(.button):focus-visible::after, .button-vue:focus-visible::after {
-               bottom: 2px;
+               &::after {
+                       content: " ";
+                       position: absolute;
+                       inset-block-end: 2px;
+                       transform: translateX(-50%);
+                       width: 12px;
+                       height: 2px;
+                       border-radius: 3px;
+                       background-color: var(--color-background-plain-text);
+                       inset-inline-start: 50%;
+                       opacity: 1;
+               }
        }
 
        .header-right {