From a7ad8d7e754aa6edd0554fa691a02e2bb289f2d0 Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Fri, 24 Nov 2023 14:45:22 +0200
Subject: [PATCH] feat(code frame): tweaks to zoom

---
 components/CodeFrame.vue | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/components/CodeFrame.vue b/components/CodeFrame.vue
index 42f9e83..9c9bd22 100644
--- a/components/CodeFrame.vue
+++ b/components/CodeFrame.vue
@@ -94,32 +94,34 @@ const zoomed = ref(false);
   padding: 0
   width: 32px
   height: 32px
-  inset: auto 4px 4px auto
+  inset: auto 24px 24px auto
   border-radius: 4px
   border: 1px solif var(--vp-button-alt-border)
+  background-color: var(--vp-c-bg)
   z-index: 1
-  background-color: var(--vp-button-alt-bg)
-  color: var(--vp-button-alt-text)
 
   @media (min-width: 1280px)
     display: block
 
   > svg
     position: absolute
-    inset: 2px
+    border-radius: 4px
+    inset: 0
     pointer-events: none
+    background-color: var(--vp-button-alt-bg)
+    color: var(--vp-button-alt-text)
 
-  &:hover
-    border: 1px solif var(--vp-button-alt-hover-border)
-    color: var(--vp-button-alt-hover-text)
-    background-color: var(--vp-button-alt-hover-bg)
+    &:hover
+      border: 1px solif var(--vp-button-alt-hover-border)
+      color: var(--vp-button-alt-hover-text)
+      background-color: var(--vp-button-alt-hover-bg)
 
-  &:active
-    border: 1px solif var(--vp-button-alt-active-border)
-    color: var(--vp-button-alt-active-text)
-    background-color: var(--vp-button-alt-active-bg)
+    &:active
+      border: 1px solif var(--vp-button-alt-active-border)
+      color: var(--vp-button-alt-active-text)
+      background-color: var(--vp-button-alt-active-bg)
 
-  &--active
+  &--active > svg
     color: var(--vp-button-brand-text)
     background-color: var(--vp-button-brand-bg)