clean ui

Author: simplearyan

content/exercises/graded-assignments/mathematics-1/mathematic-questions.md

@@ -65,7 +65,7 @@ For parabola y = ax² + bx + c, the slope at any point is:
 
 **Step 2: Set up equations using given conditions** 📐
 
-At point ({{< qna/var-value name="a" >}}, {{< qna/var-value name="b" >}}), slope = {{< qna/var-value name="x" >}}:
+At point ({{% qna/var-value name="a" %}}, {{% qna/var-value name="b" %}}), slope = <span class="qna-variable-value" data-var-name="x"></span> :-
 
 \$ 2a(3) + b = 31 \$
 \$ 6a + b = 31 \quad ...(equation 1) \$

content/exercises/graded-assignments/statistics-1/week-4-questions.md

@@ -56,7 +56,7 @@ b = {{< qna/var name="b" value="3" >}} meters.
 
 {{< qna/formula label="sum" title="Sum of " value="a + b" hide="false" >}}
 
-**Formula**: Sum of a + b = {{< qna/var-value name="a" >}} + {{< qna/var-value name="b" >}}
+**Formula**: Sum of a + b={{< qna/var-value name="a" >}} + {{< qna/var-value name="b" >}}
 
 The sum is: {{< qna/formula-value label="sum" >}}
 

layouts/shortcodes/qna/var-value.html

@@ -1,3 +1,6 @@
 {{ $wrapper := .Parent.Get "wrapperId" }}
 
-<span class="qna-variable-value" data-var-name="{{ .Get "name" }}" data-wrapper-id="{{ .Parent.Get "wrapperId" }}"></span>
+
+<span>
+<span class="qna-variable-value" data-var-name="{{ .Get "name" }}" data-wrapper-id="{{ .Parent.Get "wrapperId" }}"></span>
+</span>

layouts/shortcodes/qna/var.html

@@ -42,4 +42,16 @@
     background-color: #e9f5ff; /* Light background on focus */
     box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Add a subtle glow */
   }
+ html:is(.dark) {
+    .calc-variable {
+      border-bottom: 2px solid #555;
+      color: #66bfff;
+      background-color: #181c20;
+    }
+    .calc-variable:focus {
+      border-color: #66bfff;
+      background-color: #22303a;
+      box-shadow: 0 0 5px rgba(102, 191, 255, 0.5);
+    }
+  }
 </style>