diff --git a/server/src/wled_controller/static/css/components.css b/server/src/wled_controller/static/css/components.css index 980ba76..1d1be40 100644 --- a/server/src/wled_controller/static/css/components.css +++ b/server/src/wled_controller/static/css/components.css @@ -831,3 +831,44 @@ textarea:focus-visible { opacity: 0.5; font-size: 0.9rem; } + +/* ── Scroll-to-top button ── */ + +.scroll-to-top { + position: fixed; + bottom: 24px; + right: 24px; + z-index: 90; + width: 36px; + height: 36px; + border-radius: 50%; + border: 1px solid var(--border-color); + background: var(--card-bg); + color: var(--text-secondary); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.2)); + opacity: 0; + pointer-events: none; + transform: translateY(8px); + transition: opacity 0.25s, transform 0.25s, color 0.15s, background 0.15s; +} + +.scroll-to-top.visible { + opacity: 1; + pointer-events: auto; + transform: translateY(0); +} + +.scroll-to-top:hover { + color: var(--primary-text-color); + background: var(--bg-secondary); + border-color: var(--primary-color); +} + +.scroll-to-top .icon { + width: 18px; + height: 18px; +} diff --git a/server/src/wled_controller/static/js/app.js b/server/src/wled_controller/static/js/app.js index a4cd73b..8e46ac7 100644 --- a/server/src/wled_controller/static/js/app.js +++ b/server/src/wled_controller/static/js/app.js @@ -536,6 +536,14 @@ document.addEventListener('DOMContentLoaded', async () => { window.addEventListener('resize', updateHeaderHeight); } + // Scroll-to-top button visibility + const scrollBtn = document.getElementById('scroll-to-top'); + if (scrollBtn) { + window.addEventListener('scroll', () => { + scrollBtn.classList.toggle('visible', window.scrollY > 300); + }, { passive: true }); + } + // Initialize command palette initCommandPalette(); diff --git a/server/src/wled_controller/templates/index.html b/server/src/wled_controller/templates/index.html index 36a0e5e..8e6bd41 100644 --- a/server/src/wled_controller/templates/index.html +++ b/server/src/wled_controller/templates/index.html @@ -152,6 +152,10 @@ + +
{% include 'modals/calibration.html' %}