diff --git a/modules/web.html b/modules/web.html
index 5616164..8d08534 100644
--- a/modules/web.html
+++ b/modules/web.html
@@ -18,6 +18,7 @@
.left{flex:1.2; min-width:420px}
.right{flex:1; display:flex; flex-direction:column; gap:12px}
+ /* Collapsible Header Styling */
.frame-title{ font-size:16px; color:var(--muted); margin-bottom:8px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; padding: 4px 0; transition: color 0.2s ease; }
.frame-title:hover { color: #fff; }
.frame-title::after { content: '▼'; font-size: 10px; transition: transform 0.3s ease; opacity: 0.5; }
@@ -25,7 +26,7 @@
.box { transition: flex 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.box.collapsed { flex-grow: 0 !important; flex-shrink: 0; flex-basis: auto !important; }
.box.collapsed .collapsible-content { display: none; }
- .box.collapsed .frame-title::after { transform: rotate(-90deg); }
+ .box.collapsed .frame-title::after { transform: rotate(90deg); }
.box.collapsed .frame-title { margin-bottom: 0; }
.now, .next {margin-bottom:12px}
@@ -51,28 +52,34 @@
.controls{display:flex; gap:8px; margin-top:8px}
.box{display:flex; flex-direction:column; gap:8px; flex-grow: 1; overflow: hidden;}
- .listbox{height:100%; min-height:100px; overflow:auto; border-radius:6px; background:var(--card); padding:8px; font-size:14px;}
+
+ /* --- HIDE SCROLLBARS ON ALL LISTBOXES --- */
+ .listbox{
+ height:100%;
+ min-height:100px;
+ overflow:auto;
+ border-radius:6px;
+ background:var(--card);
+ padding:8px;
+ font-size:14px;
+ scrollbar-width: none; /* For Firefox */
+ }
+ .listbox::-webkit-scrollbar {
+ display: none; /* For Chrome, Safari, and other WebKit browsers */
+ }
+
.listbox div.item{ padding:6px; border-radius:6px; transition: background-color 0.2s ease; }
.listbox div.item:hover{background:rgba(255,255,255,0.04); cursor:pointer}
.listbox div.item.selected{background:rgba(62, 165, 255, 0.305)}
+ /* --- STICKY QUEUE IMPLEMENTATION --- */
#section-playlist {
flex: 1 1 0; /* Let it grow and shrink, with a zero basis */
min-height: 150px; /* Ensure it's always at least this tall */
}
#section-queue {
- flex: 0 0 240px; /* Don't grow, don't shrink, and have a fixed height */
+ flex: 0 0 160px; /* Don't grow, don't shrink, and have a fixed height */
}
-
- #playlist-box, #queue-box {
- height: 100%;
- overflow-y: auto;
- scrollbar-width: none; /* For Firefox */
- }
- #playlist-box::-webkit-scrollbar, #queue-box::-webkit-scrollbar {
- display: none; /* For Chrome, Safari, etc. */
- }
-
#section-queue .frame-title {
cursor: default;
}