Fix styles

Author: hasparus

src/components/index-page/what-is-graphql/wires.tsx

@@ -482,19 +482,38 @@ export function Wires({ className }: { className?: string }) {
 
   const ref = useRef<SVGSVGElement>(null)
 
+  // set to true by manual interaction: we skip the next animation end
+  // if the animation finishes right after the user's click
+  const shouldAvoidDoubleSpin = useRef(false)
+
   useEffect(() => {
     const animate = document.querySelector(
       "#paint_sr_pri_highlight_linear_671_9150 animate",
     )
 
+    const onAnimationRepeat = () => {
+      if (shouldAvoidDoubleSpin.current) return
+      inc()
+    }
+
     if (animate && animate instanceof SVGAnimateElement) {
-      animate.addEventListener("repeatEvent", inc)
+      animate.addEventListener("repeatEvent", onAnimationRepeat)
     }
 
-    return () => animate?.removeEventListener("repeatEvent", inc)
+    return () => animate?.removeEventListener("repeatEvent", onAnimationRepeat)
   }, [])
 
-  const onBackgroundClick = useMemo(() => throttle(inc, 150), [])
+  const onBackgroundClick = useMemo(
+    () =>
+      throttle(() => {
+        inc()
+        shouldAvoidDoubleSpin.current = true
+        setTimeout(() => {
+          shouldAvoidDoubleSpin.current = false
+        }, 750)
+      }, 500),
+    [],
+  )
 
   return (
     <div className={clsx(className, "relative isolate", styles.wires)}>
@@ -547,7 +566,7 @@ export function Wires({ className }: { className?: string }) {
           step === 2
             ? "[transform:rotateX(0deg)_translateY(0px)_translateZ(150px)]"
             : step === 1
-              ? "duration-0 [transform:rotateX(90deg)_translateY(60px)_translateZ(150px)]"
+              ? "!duration-0 [transform:rotateX(90deg)_translateY(60px)_translateZ(150px)]"
               : "[transform:rotateX(-90deg)_translateY(-60px)_translateZ(150px)]",
         )}
       >

src/nextra-theme-docs.css

@@ -2977,6 +2977,12 @@ div:hover > .\[div\:hover\>\&\]\:_opacity-100 {
 
 kbd._border._gap-1 {
   border-bottom-width: 2px;
-  border-color: hsl(var(--color-neu-300));
   gap: 0.125rem;
+  border-color: hsl(var(--color-neu-300));
+  color: hsl(var(--color-neu-700));
+
+  .dark & {
+    border-color: hsl(var(--color-neu-100) / 0.8);
+    color: hsl(var(--color-neu-500));
+  }
 }