fix: Use border when focusing menu items (#950)

Element Plus implements the menu using lists which do not render outlines

1 files changed, 10 insertions, 0 deletions

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 1b7ee91b..162b0b34 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -137,6 +137,12 @@ export default {
   font-weight: bold;
   font-size: large;
   background-color: transparent !important;
+
+  border-width: 2px !important;
+  border-style: solid !important;
+  border-color: transparent !important;
+  border-radius: 10px !important;
+  transition: none;
 }
 
 #fc__menu_items .el-menu-item:hover, #fc__menu_items .el-sub-menu__title {
@@ -144,6 +150,10 @@ export default {
   background-color: transparent;
 }
 
+#fc__menu_items .el-menu-item:focus-visible {
+  border-color: rgb(160, 207, 255) !important;
+}
+
 #fc__menu_items .el-menu-item.is-active, #fc__menu_items .el-sub-menu.is-active > .el-sub-menu__title {
   color: white !important;
 }