From 2f982095f85a2222a7ea437a54c5cf209baa0e41 Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Sat, 11 May 2024 12:52:48 +0200
Subject: [PATCH] fix weird hover behavior

---
 src/client/app/composables/codeModal.ts           |  3 +++
 .../theme-default/styles/components/vp-doc.css    | 15 +++++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/client/app/composables/codeModal.ts b/src/client/app/composables/codeModal.ts
index 489a3b59..8e28b41f 100644
--- a/src/client/app/composables/codeModal.ts
+++ b/src/client/app/composables/codeModal.ts
@@ -6,6 +6,9 @@ export function useCodeModal() {
       const el = e.target as HTMLElement
 
       if (el.matches('div[class*="language-"] > button.modal')) {
+        //remove focus from button
+        el.blur()
+
         const parent = el.parentElement
         const sibling = el.nextElementSibling
         if (!parent || !sibling) {
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index 6e64d972..5a49931b 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -459,9 +459,13 @@
   top: 64px;
 }
 
-.vp-doc [class*='language-']:hover > button.copy,
+.vp-doc
+  [class*='language-']:hover:not(:has(.modal-container:hover))
+  > button.copy,
 .vp-doc [class*='language-'] > button.copy:focus,
-.vp-doc [class*='language-']:hover > button.modal,
+.vp-doc
+  [class*='language-']:hover:not(:has(.modal-container:hover))
+  > button.modal,
 .vp-doc [class*='language-'] > button.modal:focus {
   opacity: 1;
 }
@@ -520,8 +524,11 @@
     opacity 0.4s;
 }
 
-.vp-doc [class*='language-']:hover button.copy + span.lang,
-.vp-doc [class*='language-'] button.copy:focus + span.lang {
+.vp-doc
+  [class*='language-']:hover:not(:has(.modal-container:hover))
+  > button.copy
+  + span.lang,
+.vp-doc [class*='language-'] > button.copy:focus + span.lang {
   opacity: 0;
 }