From 5c5db692747c58093d4ab63ba0f94d836ffa59c7 Mon Sep 17 00:00:00 2001
From: KubaPro010 <kuba.pro010@gmail.com>
Date: Sat, 20 Jun 2026 17:52:48 +0200
Subject: [PATCH] monochrome

---
 modules/web/index.html | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/modules/web/index.html b/modules/web/index.html
index 2d512d4..cdba49e 100644
--- a/modules/web/index.html
+++ b/modules/web/index.html
@@ -9,15 +9,15 @@
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
         <style>
             :root{
-                --panel:#11161c; --muted:#98a0a8; --accent:#3ea6ff; --card:#0b1014;
-                --success:#47d18b; --danger:#ff6b6b; --glass: rgba(255,255,255,0.1);
+                --panel:#1c1c1c; --muted:#98a0a8; --accent:#bcbcbc; --card:#242424;
+                --success:#47d18b; --danger:#ff6b6b; --glass: rgba(255,255,255,0.05);
                 font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial;
                 font-weight: 400;
             }
-            html,body{height:100%; margin:0; background:linear-gradient(180deg,#071018,#0b1220 60%); color:#eef2f6; overflow: hidden;}
+            html,body{height:100%; margin:0; background:#202020; color:#eef2f6; overflow: hidden;}
             .container{margin:12px auto; padding:14px; display:flex; flex-direction:column; gap:8px}
             .layout{display:flex; gap:10px; height:calc(100vh - 100px);}
-            .panel{background:var(--panel); border-radius:10px; padding:6px; box-shadow: 0 6px 18px rgba(2,8,16,0.6); display:flex; flex-direction:column; overflow:hidden}
+            .panel{background:var(--panel); border-radius:10px; padding:6px; display:flex; flex-direction:column; overflow:hidden}
             .left{flex:1; min-width:420px}
             .right{flex:1.2; display:flex; gap:4px}
 
@@ -35,20 +35,17 @@
             .now .track, .next .track {font-weight:400; font-size:14px; word-break:break-all}
             .progress-wrap { display:flex; gap:10px; align-items:center}
             .progress-bar { flex:1; height:10px; background:var(--glass); border-radius:8px; overflow:hidden; position:relative }
-            .progress-fill { height:100%; width:0%; background:linear-gradient(45deg,var(--accent), #2aa2ff); }
+            .progress-fill { height:100%; width:0%; background:linear-gradient(45deg,var(--accent), #ffffff); }
             .progress-fill.init { opacity: 0;}
 
             button, .btn{ background:transparent; border:1px solid rgba(255,255,255,0.06); padding:8px 12px; border-radius:8px; color:inherit; cursor:pointer; transition: background-color 0.15s ease, transform 0.15s ease; }
             button:hover, .btn:hover { background-color: var(--glass); }
-            .btn.activated { background:linear-gradient(90deg, #9ed3ff46, #5bbbff2a); border-color: #5bbbff55; }
-            .btn.primary{background:linear-gradient(90deg,var(--accent), #6cc7ff); color:#001; border:none; font-weight:600}
-            .btn.primary:hover { background:linear-gradient(90deg, #3399ee, #5bbaff); }
+            .btn.activated { background:linear-gradient(90deg, #9ed3ff46, #5bbbff2a); border-color: #dbdbdb55; }
 
             ul.playlist{list-style:none; padding:6px; margin:0; font-family: "Consolas",monospace; font-size:13px;}
             ul.playlist li{ padding:4px 6px; border-radius:6px; display:flex; justify-content:space-between; gap:8px; transition: background-color 0.2s ease, transform 0.15s ease; }
-            ul.playlist li:hover{ background:rgba(255,255,255,0.04); }
+            ul.playlist li:hover{ background: var(--glass); }
             ul.playlist li.current{background:rgba(62,166,255,0.08)}
-            ul.playlist li.selected{background:rgba(62, 165, 255, 0.305)}
             ul.playlist li.pointer{background:rgba(255,255,255,0.04)}
 
             #queue-ul li:hover {text-decoration: line-through;}
@@ -60,14 +57,17 @@
                 overflow:auto;
                 border-radius:6px;
                 background:var(--card);
-                padding:8px;
+                padding:4px;
                 font-size:14px;
             }
             .listbox::-webkit-scrollbar { display: none; }
 
-            .listbox div.item{ padding:4px; 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)}
+            .listbox div.item{ padding:2px; border-radius:6px; transition: background-color 0.2s ease; }
+            .listbox div.item:hover{background:var(--glass); cursor:pointer}
+            .listbox div.item.selected{background:rgba(142, 142, 142, 0.305)}
+
+            #queue-ul > li { padding: 2px; }
+            #playlist-ul > li { padding: 1.5px; }
 
             #section-playlist { flex: 2 1; overflow: hidden;}
             #section-queue { flex: 1; display: flex; flex-direction: column; }
@@ -76,7 +76,7 @@
             #section-playlist.collapsed + #section-queue { flex: 1 1 auto !important; }
 
             .small{font-size:12px; color:var(--muted)}
-            .footer{display:flex; justify-content:space-between; gap:5px; align-items:center; margin-top:8px; background:var(--panel); border-radius:10px; padding:8px; box-shadow: 0 8px 18px rgba(2,8,16,0.6);}
+            .footer{display:flex; justify-content:space-between; gap:5px; align-items:center; margin-top:8px; background:var(--panel); border-radius:10px; padding:8px; }
             .directory-grid {
                 display: flex;
                 gap: 8px;