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);