diff --git a/modules/web.html b/modules/web.html index 996db2d..7792eb8 100644 --- a/modules/web.html +++ b/modules/web.html @@ -23,8 +23,10 @@ .progress-wrap{display:flex; gap:10px; align-items:center} .progress-bar{flex:1; height:12px; background:var(--glass); border-radius:8px; overflow:hidden; position:relative} .progress-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--accent), #6cc7ff); transition:width 0.2s linear} - button, .btn{background:transparent;border:1px solid rgba(255,255,255,0.06); padding:8px 12px;border-radius:8px;color:inherit;cursor:pointer} + 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.12s ease;} + button:hover, .btn:hover {background-color: var(--glass);} .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); } .list{background:#07121a; border-radius:8px; padding:8px; overflow:auto; border:1px solid rgba(255,255,255,0.02)} ul.playlist{list-style:none; padding:6px; margin:0; font-family: "Consolas",monospace; font-size:13px;} ul.playlist li{padding:6px 8px; border-radius:6px; display:flex; justify-content:space-between; gap:8px; transition: background-color 0.12s ease;} @@ -42,7 +44,16 @@ .row{display:flex; gap:8px; align-items:center} .muted{color:var(--muted); font-size:13px} .footer{display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:8px} - @media (max-width:900px){ .layout{flex-direction:column} .right{grid-template-columns:1fr} .left{min-width:auto} } + .directory-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; flex-grow:1; overflow:hidden} + @media (max-width:800px){ + html, body{overflow: auto; height: auto} + .container{padding: 10px; margin: 0} + .layout{flex-direction: column; height: auto} + .left{min-width:auto} + .directory-grid {grid-template-columns: 1fr} + .listbox {min-height: 250px} + button, .btn {padding: 10px 14px} + }
@@ -58,7 +69,7 @@