Fix focus border and adjust active app indicator

Signed-off-by: Julius Härtl <jus@bitgrid.net>

diff --git a/core/src/components/AppMenu.vue b/core/src/components/AppMenu.vue
index a8ea725085254bf44c94cc835e9b0f2d6b292300..ca96fa569c6f8a532efd675d17fa1141e294d455 100644 (file)
--- a/core/src/components/AppMenu.vue
+++ b/core/src/components/AppMenu.vue
@@ -137,11 +137,14 @@ $header-icon-size: 20px;
                                content: " ";
                                position: absolute;
                                pointer-events: none;
-                               border: 8px solid transparent;
                                border-bottom-color: var(--color-main-background);
                                transform: translateX(-50%);
+                               width: 12px;
+                               height: 5px;
+                               border-radius: 3px;
+                               background-color: var(--color-primary-text);
                                left: 50%;
-                               bottom: 0;
+                               bottom: 3px;
                                display: block;
                                transition: all 0.1s ease-in-out;
                                opacity: 1;
@@ -153,8 +156,9 @@ $header-icon-size: 20px;
                }
 
                a {
-                       width: 100%;
-                       height: 100%;
+                       width: calc(100% - 4px);
+                       height: calc(100% - 4px);
+                       margin: 2px;
                        color: var(--color-primary-text);
                        position: relative;
                }
@@ -216,7 +220,7 @@ $header-icon-size: 20px;
                }
 
                &::before, .app-menu-entry::before {
-                       border-width: 3px;
+                       opacity: 0;
                }
        }
 }
@@ -230,6 +234,14 @@ $header-icon-size: 20px;
                opacity: 1;
                background-color: transparent !important;
        }
+
+       &:focus-visible {
+               opacity: 1;
+               background-color: transparent !important;
+               border-radius: var(--border-radius);
+               outline: none;
+               box-shadow: 0 0 0 2px var(--color-primary-text);
+       }
 }
 
 .app-menu-popover-entry {