radio95/RadioPlayer
0
1
Fork 0
mirror of https://github.com/radio95-rnt/RadioPlayer.git synced 2026-07-29 15:29:14 +02:00
Code Issues Activity

monochrome

Browse Source
This commit is contained in:
kuba
2026-06-20 17:52:48 +02:00
parent 9d25a5ea74
commit 5c5db69274
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/web/index.html
+15 -15
View File
@@ -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;