frame for explanation

Author: stared

src/style.css

@@ -276,9 +276,19 @@ h1 {
   font-size: 1rem;
   line-height: 1.6;
   color: var(--text-secondary);
-  text-align: center;
+  text-align: left; /* Left aligned */
   font-family: var(--font-ui);
-  margin-top: 1rem;
+  margin: 1rem auto 0 auto;
+
+  /* Frame style */
+  border: 1px solid var(--accent-color); /* Relevant color */
+  background-color: #fff;
+  padding: 1rem;
+  border-radius: 4px;
+
+  /* Full width of text column */
+  width: 100%;
+  max-width: 700px; /* Match static-description max-width */
 }
 
 .hover-explanation.visible {

src/ui/hover-effects.ts

@@ -41,9 +41,14 @@ export function setupHoverEffects(parsedContent: ParsedContent) {
     }
   };
 
-  const showDefinition = (definition: string) => {
+  const showDefinition = (definition: string, color: string = '') => {
     hoverDiv.innerHTML = renderLatexInText(definition);
     hoverDiv.classList.add("visible");
+    if (color) {
+        hoverDiv.style.borderColor = color;
+    } else {
+        hoverDiv.style.borderColor = 'var(--border-color)'; // Fallback
+    }
   };
 
   document.querySelectorAll('[class*="term-"]').forEach((element) => {
@@ -55,7 +60,10 @@ export function setupHoverEffects(parsedContent: ParsedContent) {
     const definition = parsedContent.definitions.get(
       termClass.replace("term-", "")
     );
-    // if (!definition) return; // Description might not have definition map if logic differs, but usually it matches
+    
+    // Pre-calculate color
+    const computedStyle = window.getComputedStyle(element);
+    const termColor = computedStyle.color;
 
     (element as HTMLElement).style.cursor = "pointer";
 
@@ -68,7 +76,7 @@ export function setupHoverEffects(parsedContent: ParsedContent) {
         // If clicked from description, we need to find a definition if possible or just highlight
         if (definition) {
           clicked = { element: element as HTMLElement, termClass, definition };
-          showDefinition(definition);
+          showDefinition(definition, termColor);
         } else {
           // Just highlight for visual feedback if no definition?
           // Assuming definitions exist for all valid term classes
@@ -92,7 +100,7 @@ export function setupHoverEffects(parsedContent: ParsedContent) {
         .querySelectorAll(`.static-description .${termClass}`)
         .forEach((el) => el.classList.add("active"));
 
-      if (definition) showDefinition(definition);
+      if (definition) showDefinition(definition, termColor);
     });
 
     element.addEventListener("mouseleave", () => {
@@ -102,9 +110,14 @@ export function setupHoverEffects(parsedContent: ParsedContent) {
         .forEach((el) => el.classList.remove("active"));
 
       updateOverlay(); // Restore clicked state or clear
-      clicked
-        ? showDefinition(clicked.definition)
-        : hoverDiv.classList.remove("visible");
+      if (clicked) {
+          // Re-apply color for clicked element
+          const clickedEl = document.querySelector(`.${clicked.termClass}`);
+          const clickedColor = clickedEl ? window.getComputedStyle(clickedEl).color : '';
+          showDefinition(clicked.definition, clickedColor);
+      } else {
+          hoverDiv.classList.remove("visible");
+      }
     });
   });
 }