From b2b48ae14de64cf41bd3de4aa287821bbc5cd5b9 Mon Sep 17 00:00:00 2001
From: stellarshenson <konrad.jelen@gmail.com>
Date: Tue, 10 Feb 2026 09:10:22 +0100
Subject: [PATCH] style: use stock Bootstrap progress bar styling

- remove custom border, radius, and background overrides
- match JupyterHub's built-in spawn progress bar appearance
- set color via --bs-progress-bar-bg variable instead of fighting it
- keep only 10px height override and width transition
---
 .../html_templates_enhanced/static/custom.css         | 11 +----------
 .../html_templates_enhanced/static/session-timer.js   |  5 ++---
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/services/jupyterhub/html_templates_enhanced/static/custom.css b/services/jupyterhub/html_templates_enhanced/static/custom.css
index e59dde2..d6f7ce3 100644
--- a/services/jupyterhub/html_templates_enhanced/static/custom.css
+++ b/services/jupyterhub/html_templates_enhanced/static/custom.css
@@ -1645,16 +1645,10 @@ textarea.form-control {
 
 #session-timer-bar .progress {
   height: 10px;
-  border-radius: 2px;
-  background-color: rgba(0, 0, 0, 0.06);
-  border: 2px solid #446897;  /* initial; JS syncs to bar color */
-  transition: border-color 0.5s ease;
 }
 
 #session-timer-bar .progress-bar {
-  --bs-progress-bar-bg: transparent;  /* clear Bootstrap default */
   transition: width 1s ease-in-out;
-  border-radius: 1px;
 }
 
 #session-time-text {
@@ -1680,7 +1674,4 @@ textarea.form-control {
   font-size: 0.75rem;
 }
 
-/* Dark mode session timer */
-[data-bs-theme="dark"] #session-timer-bar .progress {
-  background-color: rgba(255, 255, 255, 0.08);
-}
+/* Dark mode session timer - stock Bootstrap styling, no overrides needed */
diff --git a/services/jupyterhub/html_templates_enhanced/static/session-timer.js b/services/jupyterhub/html_templates_enhanced/static/session-timer.js
index 5c764fe..8dc545c 100644
--- a/services/jupyterhub/html_templates_enhanced/static/session-timer.js
+++ b/services/jupyterhub/html_templates_enhanced/static/session-timer.js
@@ -97,10 +97,9 @@
     var color = getColor(pct);
     var css = rgbStr(color);
 
-    // progress bar + track border (setProperty to bypass Bootstrap variable)
+    // progress bar color via Bootstrap CSS variable
     $progressBar.removeClass('bg-success bg-warning bg-danger');
-    $progressBar[0].style.setProperty('background-color', css, 'important');
-    $progressBar.closest('.progress').css('border-color', css);
+    $progressBar[0].style.setProperty('--bs-progress-bar-bg', css);
 
     // time text
     $timeText.css('color', css);