From 8991b7ade7174376ee007dbff7797cc7e65cec02 Mon Sep 17 00:00:00 2001
From: Jan <sentrycraft123@gmail.com>
Date: Tue, 18 Jun 2024 23:07:39 +0200
Subject: fix: Use border when focusing menu items (#950)

Element Plus implements the menu using lists which do not render outlines
---
 src-vue/src/App.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'src-vue/src/App.vue')

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;
 }
-- 
cgit v1.2.3

