Trying new colors

templates/template_html.j2

@@ -12,13 +12,13 @@ Below is the prompt that is given to the model. <hr>
     </details>
 {% endfor %}
 
-<h2>Query</h2> <span style="color: #2d8100;">{{ query }}</span>
+<h2>Query</h2> <span style="color: #801616;">{{ query }}</span>
 
 <style>
     .doc-box {
         padding: 10px;
         margin-top: 10px;
-        background-color: #1E90FF;
+        background-color: #48a3ff;
         border: none;
     }
     .doc-short, .doc-full {
@@ -28,3 +28,20 @@ Below is the prompt that is given to the model. <hr>
         color: white;
     }
 </style>
+
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    const detailsElements = document.querySelectorAll('.doc-box');
+
+    detailsElements.forEach(detail => {
+        detail.addEventListener('toggle', function() {
+            const docShort = this.querySelector('.doc-short');
+            if (this.open) {
+                docShort.style.display = 'none';
+            } else {
+                docShort.style.display = 'inline';
+            }
+        });
+    });
+});
+</script>