From 6eec40c43b7e27dc28feebfd6f5e598cb0f03ba5 Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Mon, 10 Nov 2025 21:25:47 +0000
Subject: [PATCH] Style: Enhance overview button appearance and add hover
 effects for improved user experience

---
 physics/templates/physics/exam_take.html | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/physics/templates/physics/exam_take.html b/physics/templates/physics/exam_take.html
index 4ad5faee..ea8c2bd8 100755
--- a/physics/templates/physics/exam_take.html
+++ b/physics/templates/physics/exam_take.html
@@ -98,7 +98,7 @@
                 {% endif %}
 
                 <br />
-                <button type="submit" name="finish" class="save btn btn-default" title="Click to go to the overview page (your answers will be saved).">Overview</button>
+                <button type="submit" id="overview-button" name="finish" class="save btn btn-default" title="Click to go to the overview page (your answers will be saved).">Overview</button>
                 <button type="submit" id="goto-button" value="test" name="goto" class="hide">goto</button>
             </div>
         </form>
@@ -171,6 +171,7 @@
             --bg: #ffffff;
             --text: #212529;
             --muted: #6c757d;
+            --secondary: #6c757d;
             --card-bg: #ffffff;
             --card-border: #e9ecef;
             --primary: #0d6efd;
@@ -294,6 +295,17 @@
         .mt-2 .save { margin-right: 0.5rem; }
         .mt-2 .save.btn.btn-default { background: var(--feedback-bg); border: 1px solid var(--card-border); color: var(--text); }
 
+    /* Overview button - make it stand out using the primary color */
+    #overview-button { background: var(--primary); border-color: var(--primary); color: #fff; }
+    #overview-button:hover { filter: brightness(0.95); box-shadow: 0 3px 8px rgba(13,110,253,0.18); }
+
+    /* Previous / Next button colors */
+    .mt-2 button[name="previous"] { background: var(--secondary); border-color: var(--secondary); color: #fff; }
+    .mt-2 button[name="previous"]:hover { filter: brightness(0.95); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
+
+    .mt-2 button[name="next"] { background: var(--primary); border-color: var(--primary); color: #fff; }
+    .mt-2 button[name="next"]:hover { filter: brightness(0.95); box-shadow: 0 3px 8px rgba(13,110,253,0.18); }
+
         /* Small helper: make labels wrap nicely on small screens */
         @media (max-width: 576px) {
             /* On small screens, stack the label and input for readability */