diff --git a/app/templates/keys_status.html b/app/templates/keys_status.html index bca5ea6..619cbdd 100644 --- a/app/templates/keys_status.html +++ b/app/templates/keys_status.html @@ -31,6 +31,14 @@ backdrop-filter: blur(10px); position: relative; margin: 20px auto; + overflow-y: auto; + max-height: calc(100vh - 40px); + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + } + + .container::-webkit-scrollbar { + display: none; /* Chrome, Safari, Opera */ } @media (max-width: 768px) { @@ -154,13 +162,17 @@ } .key-list .key-content { - transition: max-height 0.3s ease-out; + transition: all 0.3s ease-out; overflow: hidden; - max-height: 2000px; + height: auto; + opacity: 1; } .key-list .key-content.collapsed { - max-height: 0; + height: 0; + opacity: 0; + padding-top: 0; + padding-bottom: 0; } ul { list-style-type: none; @@ -288,13 +300,13 @@ position: fixed; right: 20px; bottom: 20px; - display: flex; + display: none; flex-direction: column; gap: 10px; z-index: 1000; } .scroll-btn { - background: rgba(118, 75, 162, 0.9); + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; width: 40px; height: 40px; @@ -310,7 +322,7 @@ box-shadow: 0 2px 10px rgba(0,0,0,0.2); } .scroll-btn:hover { - background: rgba(102, 126, 234, 0.9); + background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); transform: scale(1.1); } .scroll-btn:active { @@ -525,15 +537,17 @@ } function scrollToTop() { - window.scrollTo({ + const container = document.querySelector('.container'); + container.scrollTo({ top: 0, behavior: 'smooth' }); } - + function scrollToBottom() { - window.scrollTo({ - top: document.documentElement.scrollHeight, + const container = document.querySelector('.container'); + container.scrollTo({ + top: container.scrollHeight, behavior: 'smooth' }); }