:root{ --brand-accent:#60a5fa; --ctrl-bg:#0b1f3a; --ctrl-border:#1e3a8a; --ctrl-fg:#e6f0ff; --bg:#13161a; --panel:#181c22; --muted:#a3adb7; --text:#f3f4f6; --accent:#f59e0b; --player-h: 86px;} *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif} a{color:inherit} .container{max-width:1100px;margin:0 auto;padding:1rem} .topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;border-bottom:1px solid #1f2937;background:rgba(0,0,0,.85);backdrop-filter:saturate(180%) blur(8px)} .topbar .brand a{font-weight:900;letter-spacing:.02em;text-decoration:none} .ver{margin-left:.5rem;font-size:.75rem;color:#9ca3af;background:#111827;border:1px solid #374151;padding:.1rem .35rem;border-radius:.4rem} .search{position:relative;flex:1} .search input{width:100%;background:#0f0f0f;border:1px solid #1f2937;border-radius:.6rem;padding:.6rem .8rem;color:#fff} .suggestions{position:absolute;left:0;right:0;top:100%;background:#0f0f0f;border:1px solid #1f2937;border-radius:.6rem;box-shadow:0 10px 30px rgba(0,0,0,.3);padding:.5rem;margin-top:.25rem;max-height:60vh;overflow:auto} .s-title{font-weight:800;font-size:.8rem;color:#9ca3af;margin:.25rem .25rem} .s-item{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border-radius:.4rem;color:inherit;text-decoration:none} .s-item:hover{background:#2a2a2a} .s-item img{width:28px;height:28px;object-fit:cover;border-radius:.3rem} .s-item .ph{width:28px;display:inline-flex;align-items:center;justify-content:center} .letters-bar{padding:.5rem 0 0} .letters{display:flex;gap:.4rem;align-items:center} .letters a{font-weight:700;padding:.25rem .5rem;border-radius:.5rem;text-decoration:none;color:#e5e7eb;border:1px solid #374151;background:#111} .letters a:hover{border-color:#4b5563;background:#1f2937;color:#fff} .letters .artists-link{margin-left:auto;opacity:.8} h2,h3{margin:1rem 0 .6rem 0;display:flex;align-items:center;gap:.6rem} h2::before{content:"";display:inline-block;width:3px;height:16px;background:var(--accent);border-radius:2px} .grid{display:grid;gap:1rem} .grid.tracks{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} .grid.albums,.grid.artists{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} .card{background:#0f0f0f;border:1px solid #1f2937;border-radius:.8rem;overflow:hidden;display:flex;flex-direction:column} .card .thumb{aspect-ratio:1/1;background:#0b0b0b;display:flex;align-items:center;justify-content:center} .card .thumb img{width:100%;height:100%;object-fit:cover} .card .meta{padding:.7rem} .card .title{font-weight:800} .card .sub{font-size:.9rem;color:#9ca3af} .card.track .actions{display:flex;gap:.5rem;padding:.5rem .7rem} .nocover{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#eab308;font-size:1.2rem} .nocover.lg{width:160px;height:160px;border-radius:.8rem;background:#0f0f0f;border:1px solid #1f2937} .btn, a.btn{display:inline-flex;align-items:center;justify-content:center;padding:.45rem .75rem;border-radius:.6rem;background:var(--accent);color:#111827;font-weight:800;border:0;text-decoration:none;cursor:pointer;box-shadow:0 2px 0 rgba(234,179,8,.5)} .btn:hover, a.btn:hover{filter:brightness(.95);transform:translateY(-1px)} .btn:active, a.btn:active{transform:translateY(0);box-shadow:none} .card.track.playing{outline:2px solid var(--accent);box-shadow:0 0 0 2px rgba(245,158,11,.25) inset} .artist-hero{display:flex;align-items:center;gap:1rem;margin:1rem 0} .artist-hero .avatar.lg img{width:120px;height:120px;border-radius:50%;object-fit:cover} .album-hero{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin:1rem 0;text-align:center} .album-hero .thumb.lg img{ width:250px; height:250px; border-radius:.8rem; object-fit:cover; } .album-hero .meta .btn{margin-top:.5rem} .tracklist{list-style:none;margin:0;padding:0;border:1px solid #1f2937;border-radius:.8rem;overflow:hidden} .tracklist .row{display:grid;grid-template-columns:28px 36px 1fr 1fr 60px 120px;align-items:center;gap:.6rem;padding:.5rem .7rem;border-bottom:1px solid #111} .tracklist .row:last-child{border-bottom:0} .tracklist .icon.play{background:#111827;border:1px solid #374151;border-radius:.5rem;color:#e5e7eb;padding:.2rem .4rem} .player{position:sticky;bottom:0;left:0;right:0;background:#0b0b0b;border-top:1px solid #1f2937;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1rem;z-index:20} .p-left{display:flex;align-items:center;gap:.7rem;min-width:220px} .p-cover{width:42px;height:42px;border-radius:.5rem;object-fit:cover} .p-title{font-weight:800;color:#e5e7eb} .p-sub{font-size:.85rem;color:#9ca3af} .p-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem} .p-controls{display:flex;align-items:center;gap:.6rem} .p-controls .icon:hover{background:#132a4a} .p-seek{display:flex;align-items:center;gap:.5rem;width:100%;max-width:620px} .p-seek input[type="range"]{flex:1} .p-right{display:flex;align-items:center;gap:.75rem} .p-volume{display:flex;align-items:center;gap:.4rem} .hidden{display:none} .queue{position:fixed;right:1rem;bottom:4.2rem;width:360px;max-height:40vh;overflow:auto;background:#0b0b0b;border:1px solid #1f2937;border-radius:.8rem;box-shadow:0 20px 40px rgba(0,0,0,.4);padding:.5rem} .queue .item{display:flex;align-items:center;gap:.6rem;padding:.4rem;border-radius:.5rem} .queue .item.playing{background:#111827} .queue .item img{width:36px;height:36px;border-radius:.4rem;object-fit:cover} .queue .title{font-weight:700;color:#e5e7eb} .queue .sub{font-size:.8rem;color:#9ca3af} /* v4.6 unified buttons */ .btn, a.btn{display:inline-flex;align-items:center;justify-content:center;padding:.55rem .9rem;border-radius:.7rem;background:var(--accent);color:#111827;font-weight:800;border:0;text-decoration:none;cursor:pointer;box-shadow:0 2px 0 rgba(234,179,8,.45);transition:transform .12s ease, filter .12s ease} .btn:hover, a.btn:hover{filter:brightness(.96);transform:translateY(-1px)} .btn:active, a.btn:active{transform:translateY(0);box-shadow:none} .card .thumb{position:relative;overflow:hidden} .card .thumb .overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,.0) 55%);display:flex;align-items:flex-end;justify-content:flex-start;gap:.5rem;padding:.6rem;opacity:0;pointer-events:none;transition:opacity .15s ease} .card:hover .thumb .overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,.0) 55%);display:flex;align-items:flex-end;justify-content:flex-start;gap:.5rem;padding:.6rem;opacity:0;pointer-events:none;transition:opacity .15s ease} .card.show-actions .thumb .overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,.0) 55%);display:flex;align-items:flex-end;justify-content:flex-start;gap:.5rem;padding:.6rem;opacity:0;pointer-events:none;transition:opacity .15s ease} @media (pointer:coarse){ .card .thumb .overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,.0) 55%);display:flex;align-items:flex-end;justify-content:flex-start;gap:.5rem;padding:.6rem;opacity:0;pointer-events:none;transition:opacity .15s ease} } /* v4.6 player polish */ .player{background:rgba(19,22,26,.98)} .p-controls .icon:hover{filter:brightness(1.05)} /* v4.6.3: fixed player height, reserve space */ #main{padding-bottom:calc(var(--player-h) + 14px)} .player{position:fixed;bottom:0;left:0;right:0;height:var(--player-h);} /* v4.6.3 player visuals */ .player{box-shadow:0 -12px 30px rgba(0,0,0,.35)} .p-controls .icon:active{transform:translateY(1px)} .p-seek input[type=range]{appearance:none;height:6px;border-radius:9999px;background:#e5e7eb20;outline:none} .p-seek input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:.8rem;background:#60a5fa;border:2px solid #0b1220;box-shadow:0 0 0 2px rgba(96,165,250,.3)} .p-seek input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:.8rem;background:#60a5fa;border:2px solid #0b1220} /* v4.6.3 grid consistency */ .grid.albums .card.album{display:flex;flex-direction:column} .grid.albums .card .meta{min-height:64px} .card.album .thumb{aspect-ratio:1/1} /* v4.6.4 overlay polish */ .grid.albums .card .meta{padding:.65rem .7rem} .grid.albums .card .title{font-weight:800} .grid.albums .card .sub{opacity:.8} /* v4.7.1 player visual tune */ .player{background:#1b1d20;border-top:1px solid #272b30} .p-controls .icon:hover{background:#23272d} .p-seek input[type="range"]{appearance:none;height:6px;border-radius:9999px;outline:none; background:linear-gradient(to right,#f59e0b 0%,#f59e0b var(--seek,0%),rgba(148,163,184,.28) var(--seek,0%),rgba(148,163,184,.28) 100%);} .p-seek input[type="range"]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:9999px;background:#fff;border:1px solid #e5e7eb} .p-seek input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:9999px;background:#fff;border:1px solid #e5e7eb} .p-right .icon{background:transparent;border:0;color:#cfd4da} .p-right .icon:hover{background:#23272d} /* v4.7.2: amber volume slider */ #volume{appearance:none;height:6px;border-radius:9999px;outline:none; background:linear-gradient(to right,#f59e0b 0%,#f59e0b var(--vol,0%),rgba(148,163,184,.28) var(--vol,0%),rgba(148,163,184,.28) 100%);} #volume::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:.8rem;background:#fff;border:1px solid #e5e7eb} #volume::-moz-range-thumb{width:14px;height:14px;border-radius:.8rem;background:#fff;border:1px solid #e5e7eb} /* v4.7.3 */ .p-icon:hover{background:#23272d} /* v4.7.4: amber focus ring */ .card:focus, .card:focus-visible, a:focus, a:focus-visible, .overlay-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(245,158,11,.55); } /* Remove underline from card links (albums, artists, tracks) */ a.card{ text-decoration: none; } /* ==== Mobile responsiveness & small-screen polish (v4.7.4-mobile) ==== */ /* Base: allow grids to shrink gracefully */ .grid.tracks, .grid.albums, .grid.artists { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .85rem; } /* Card images scale correctly */ .card .cover, .card img.cover, .card .album-cover { width: 100%; height: auto; } /* Ensure player stays above iOS home bar safely */ @supports (padding: max(0px)) { footer.player { padding-bottom: max(0px, env(safe-area-inset-bottom)); } } /* Small phones */ @media (max-width: 720px){ .container{ padding: .75rem; } /* Topbar: stack neatly */ .topbar{ display:grid; grid-template-columns: 1fr auto; grid-template-rows:auto auto; row-gap:.5rem; } .topbar .brand{ grid-column:1 / 2; } .topbar .ver{ margin-left:.4rem; } .topbar .search{ grid-column: 1 / -1; order:2; } .topbar nav{ grid-column: 1 / -1; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; } /* Headings tighter */ h1, .h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } /* Grids -> single column for readability */ .grid.tracks, .grid.albums, .grid.artists { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .85rem; } /* Cards padding and play button sizing */ .card{ border-radius: 14px; } .card .actions .btn{ padding:.55rem .7rem; } /* min tap target */ /* Album / artist hero sections become vertical */ .album-hero, .artist-hero{ display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; } .album-hero .album-cover, .artist-hero .avatar{ width: 100%; max-width: 520px; height: auto; } /* Player layout simplified */ footer.player{ height: auto; padding: .6rem .75rem; } footer.player{ display:grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap:.5rem .75rem; align-items:center; } .p-left{ grid-column:1 / 3; grid-row:1; display:flex; align-items:center; gap:.6rem; } .p-cover{ width:44px; height:44px; border-radius:8px; overflow:hidden; } .p-title{ font-size:.95rem; line-height:1.2; } .p-sub{ font-size:.78rem; } .p-controls{ grid-column:1 / -1; grid-row:2; display:flex; justify-content:center; gap:.6rem; } #btn-prev svg,#btn-play svg,#btn-next svg{ width:20px; height:20px; } .p-seek{ grid-column:1 / -1; width:100%; max-width:none; } #seek{ height: 18px; } /* easier to drag */ .p-right{ grid-column:3; grid-row:1; justify-self:end; } .p-volume input[type="range"]{ width: 90px; } /* Queue drawer becomes full-width bottom sheet */ .queue{ right: 0; left: 0; margin: 0 auto; width: 100%; max-width: none; bottom: calc( var(--player-h, 64px) + 8px ); border-radius: 16px 16px 10px 10px; } } /* Very small phones */ @media (max-width: 380px){ .p-volume{ display:none; } /* hide volume to avoid crowding; still accessible via hardware keys */ .p-title{ font-size:.9rem; } .p-sub{ display:none; } } /* Letters bar horizontal scroll for small screens */ .letters-bar{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .letters{ display:flex; gap:.25rem; min-width:max-content; } .letters a{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; border-radius:.5rem; border:1px solid #374151; background:#0d0f12; text-decoration:none; } @media (max-width: 720px){ .letters a{ min-width:28px; height:28px; font-size:.85rem; } } @media (min-width: 1024px){ .card .title{ font-size: .95rem; font-weight: 600; } .card .sub{ font-size: .78rem; color: #9aa4ae; } } @media (max-width: 720px){ .grid.tracks, .grid.albums, .grid.artists { grid-template-columns: repeat(2, 1fr); gap: .75rem; } .card .title{ font-size: .95rem; } .card .sub{ font-size: .8rem; } } @media (max-width: 380px){ .grid.tracks, .grid.albums, .grid.artists { grid-template-columns: 1fr; } } @media (min-width: 1024px){ } /* Album tracklist mobile readability */ .album-tracks .row{ grid-template-columns: 28px 1fr auto 54px; gap:.6rem; } .album-tracks .row .title{ font-weight:700; } .album-tracks .row .artist{ color:#9aa4ae; font-size:.9rem; } .album-tracks .row .dl .icon{ width:38px; height:38px; border-radius:.55rem; background:#111827; border:1px solid #374151; display:inline-flex; align-items:center; justify-content:center; } @media (max-width: 720px){ .album-hero{ flex-direction: column; gap:.8rem; } .album-tracks .row{ grid-template-columns: 24px 1fr 44px; } .album-tracks .row .artist, .album-tracks .row .time{ display:none; } } @media (max-width: 720px){ footer.player{ padding:.6rem .75rem; } .p-seek{ grid-column:1 / -1; order:-1; margin-bottom:.25rem; } .p-controls .icon, .p-controls .icon:hover, .p-icon:hover{ background:#141820; } } @media (max-width: 720px){ .search input{ font-size:16px; } } /* Player refinements */ .p-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 64vw; } @media (max-width: 720px){ .player{ padding:.5rem .75rem; } .p-center{ width:100%; } .p-seek{ width:100%; grid-column:1 / -1; order:-1; margin: .2rem .25rem .4rem; } .p-controls{ justify-content:center; } #cur-time, #dur-time{ font-variant-numeric: tabular-nums; } } /* Album tracklist layout and states */ .tracklist.album-tracks .row{ display:grid; grid-template-columns: 28px 1fr auto 44px; align-items:center; gap:.6rem; } .tracklist.album-tracks .row .dl{ justify-self:end; } .tracklist.album-tracks .row .dl a.icon{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:.5rem; background:#111827; border:1px solid #374151; text-decoration:none; } .tracklist.album-tracks .row:hover{ background:#101318; } .tracklist.album-tracks .row.active{ background:#1f2937; } @media (max-width:720px){ .tracklist.album-tracks .row{ grid-template-columns: 24px 1fr 44px; } .tracklist.album-tracks .row .time, .tracklist.album-tracks .row .artist{ display:none; } } /* Player tweaks (mobile) */ .p-controls{ justify-content:center; } @media (max-width: 720px){ .p-seek{ width:min(720px, 92vw); margin:.15rem auto .4rem; display:flex; align-items:center; justify-content:center; } .p-controls .icon, } .p-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:64vw; } /* Overlays default hidden; visible on hover or show-actions */ .overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 55%);display:flex;align-items:flex-end;gap:.5rem;padding:.6rem;opacity:0;pointer-events:none;transition:opacity .15s ease} .card:hover .thumb .overlay{opacity:1;pointer-events:auto} .card.show-actions .thumb .overlay{opacity:1;pointer-events:auto} /* Album track table layout */ .tracklist.album-tracks{ padding:.4rem; } .tracklist.album-tracks .row{ display:grid; grid-template-columns: 32px 1fr 160px 64px; gap:.6rem; align-items:center; } .tracklist.album-tracks .title{ font-weight:700; } .tracklist.album-tracks .artist{ color:#9aa4ae; } .tracklist.album-tracks .time{ justify-self:end; color:#cbd5e1; } .tracklist.album-tracks .dl{ justify-self:end; } .tracklist.album-tracks .dl a.icon{ width:34px;height:34px;border-radius:.5rem;display:inline-flex;align-items:center;justify-content:center;background:#111827;border:1px solid #374151;text-decoration:none; } .tracklist.album-tracks li.active .row{ background:#1f2937; } @media (max-width:900px){ .tracklist.album-tracks .row{ grid-template-columns: 28px 1fr 44px; } .tracklist.album-tracks .artist, .tracklist.album-tracks .time{ display:none; } } /* Prevent iOS zoom on search focus */ @media (max-width: 720px){ .search input{ font-size:16px; } } /* Suggestion thumbnails */ .suggestions .s-item img{ width:28px; height:28px; object-fit:cover; border-radius:.4rem; margin-right:.5rem; } /* Album table polish */ .tracklist.album-tracks{ border-radius:.8rem; background:#0f1318; border:1px solid #1e2430; } .tracklist.album-tracks li{ border-bottom:1px solid #1a1f29; } .tracklist.album-tracks li:last-child{ border-bottom:0; } .tracklist.album-tracks li .row{ padding:.65rem .75rem; cursor:pointer; } .tracklist.album-tracks li:nth-child(even):not(.active) .row{ background:#10151c; } .tracklist.album-tracks li.active .row{ background:#1f2937; box-shadow:inset 2px 0 0 var(--accent, #f59e0b); } .tracklist.album-tracks .no{ text-align:right; color:#9aa4ae; } .tracklist.album-tracks .title{ font-weight:600; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .tracklist.album-tracks .artist{ color:#9aa4ae; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tracklist.album-tracks .time{ justify-self:end; font-variant-numeric:tabular-nums; color:#cbd5e1; } /* Player buttons unify (anthracite) */ .icon{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; background:#1b1f27; border:1px solid #2a2f3a; color:#e5e7eb; border-radius:.6rem; } @media (min-width: 1024px){ .icon{ width:36px; height:36px; } } /* Album table header */ .tracklist-head{ display:grid; grid-template-columns: 40px 1fr 200px 80px 44px; gap:.6rem; align-items:center; margin:.5rem 0 .25rem; color:#9aa4ae; padding:0 .5rem; } .tracklist-head .h-no{ text-align:right; } @media (max-width:900px){ .tracklist-head{ grid-template-columns: 36px 1fr 44px; } .tracklist-head .h-artist, .tracklist-head .h-time{ display:none; } } /* Album rows — spacing & zebra already set earlier */ .tracklist.album-tracks .no{ text-align:right; width:38px; color:#94a3b8; } .tracklist.album-tracks .row{ grid-template-columns: 40px 1fr 200px 80px 44px; } @media (max-width:900px){ .tracklist.album-tracks .row{ grid-template-columns: 36px 1fr 44px; } } /* Player controls — same look as other icons */ .p-controls .icon:hover{ background:#232936; } .suggestions .s-item{ display:flex; align-items:center; gap:.55rem; padding:.4rem .5rem; border-radius:.5rem; } .suggestions .s-item img{ width:28px; height:28px; object-fit:cover; border-radius:.4rem; } .suggestions .s-item .ph{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:.4rem; background:#111827; color:#9aa4ae; } /* --- Album table: professional layout --- */ .tracklist-head{ display:grid; grid-template-columns: 44px 1fr 220px 80px 64px; align-items:center; gap:.75rem; padding:.25rem .75rem; margin:.5rem 0 .25rem; color:#cbd5e1; } .tracklist-head .h-no{ text-align:right; } @media (max-width: 900px){ .tracklist-head{ grid-template-columns: 40px 1fr 52px; } .tracklist-head .h-artist, .tracklist-head .h-time{ display:none; } } .tracklist.album-tracks{ border-radius:.9rem; border:1px solid #202734; background:#0f1318; overflow:hidden; } .tracklist.album-tracks li{ border-bottom:1px solid #1a1f29; } .tracklist.album-tracks li:last-child{ border-bottom:0; } .tracklist.album-tracks li .row{ display:grid; grid-template-columns: 44px 1fr 220px 80px 64px; align-items:center; gap:.75rem; padding:.8rem .9rem; cursor:pointer; } @media (max-width: 900px){ .tracklist.album-tracks li .row{ grid-template-columns: 40px 1fr 52px; } .tracklist.album-tracks .artist, .tracklist.album-tracks .time{ display:none; } } .tracklist.album-tracks .no{ text-align:right; color:#f59e0b; font-weight:700; } .tracklist.album-tracks .title{ font-weight:600; line-height:1.25; } .tracklist.album-tracks .artist{ color:#9aa4ae; } .tracklist.album-tracks .time{ justify-self:end; font-variant-numeric: tabular-nums; color:#cbd5e1; } .tracklist.album-tracks .dl{ justify-self:end; } /* Zebra + active */ .tracklist.album-tracks li:nth-child(even):not(.active) .row{ background:#11161d; } .tracklist.album-tracks li.active .row{ background:#1f2937; box-shadow: inset 3px 0 0 #f59e0b; } /* Amber download icon button with glow */ .icon{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:.7rem; background:#1b1f27; border:1px solid #2a2f3a; color:#e5e7eb; } .icon.dl-amb:hover{ background:#141a21; box-shadow: 0 0 40px 8px rgba(245,158,11,.15); } /* Player controls unify */ .p-controls .icon:hover{ background:#212734; } /* Mobile player seek centered */ @media (max-width: 720px){ .p-seek{ width:min(720px,92vw); margin:.15rem auto .4rem; } } /* Search suggestions thumbnails */ .suggestions .s-item img{ width:28px; height:28px; border-radius:.4rem; object-fit:cover; margin-right:.5rem; } .suggestions .s-item .ph{ width:28px; height:28px; border-radius:.4rem; display:inline-flex; align-items:center; justify-content:center; background:#111827; color:#9aa4ae; margin-right:.5rem; } /* Prevent iOS zoom on focus */ @media (max-width:720px){ .search input{ font-size:16px; } } /* Overlay action buttons – small, dark-amber, consistent */ .card .thumb .overlay .icon:hover{ background:#232a36; box-shadow: 0 0 22px 4px rgba(245,158,11,.18); transform: translateY(-1px); } .card .thumb .overlay .icon:active{ transform: translateY(0); } .card.show-actions .thumb .overlay{ opacity:1; pointer-events:auto; } .tracks-title{ margin-top:.5rem; margin-bottom:.5rem; } .album-hero .meta .sub{ font-weight:600; color:#cbd5e1; } .suggestions .ti{ display:inline-block; } .suggestions .by{ font-style: italic; opacity:.9; font-size:.9em; margin-left:.25rem; } .tracks-title{ margin-top:.5rem; margin-bottom:.5rem; } /* === PMC: unify button styles (amber + shine) === */ /* Make hover overlay buttons (play/download), album 'Play album' button, and player controls use the same style as album download icons. */ /* Core amber control look (reused) */ :root{ --amb-bg:#101418; --amb-bg-hover:#141a21; --amb-border:rgba(245,158,11,.35); --amb-glow:rgba(245,158,11,.18); } /* Hover overlay buttons - a bit smaller than album page download icon */ .overlay-btn:hover{ background:var(--amb-bg-hover); box-shadow: 0 0 22px 4px var(--amb-glow); transform: translateY(-1px); } .overlay-btn:active{ transform: translateY(0); } .overlay-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(245,158,11,.45); } /* Keep icon sizes tidy */ /* Album page 'Play album' button */ .album-hero .btn, .album-hero a.btn, #np-download.btn{ background:var(--amb-bg); border:1px solid var(--amb-border); color:#e5e7eb; border-radius:.7rem; padding:.55rem .9rem; box-shadow: 0 2px 0 rgba(234,179,8,.5); transition: box-shadow .15s ease, transform .1s ease, background .15s ease; text-decoration:none; } .album-hero .btn:hover, .album-hero a.btn:hover, #np-download.btn:hover{ background:var(--amb-bg-hover); filter:none; transform: translateY(-1px); box-shadow: 0 0 22px 4px var(--amb-glow); } .album-hero .btn:active, .album-hero a.btn:active, #np-download.btn:active{ transform: translateY(0); box-shadow:none; } /* Player controls (desktop + mobile) */ .p-controls .icon:hover{ background:var(--amb-bg-hover); box-shadow: 0 0 22px 4px var(--amb-glow); transform: translateY(-1px); } .p-controls .icon:active{ transform: translateY(0); } .p-controls .icon:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(245,158,11,.45); } /* Mobile tweaks: keep the same look, slightly smaller */ @media (max-width: 720px){ } /* Keep original album download icon hover consistent */ .icon.dl-amb:hover{ background:var(--amb-bg-hover); box-shadow: 0 0 40px 8px var(--amb-glow); } /* === End amber control unification === */ /* === FINAL OVERRIDE: unify all player buttons (prev/play/pause/next) === */ :root{ --amb-bg:#101418; --amb-bg-hover:#141a21; --amb-border:rgba(245,158,11,.35); --amb-glow:rgba(245,158,11,.18); } /* Desktop + default */ footer.player .p-controls .icon, footer.player footer.player .p-controls .icon:hover{ background:var(--amb-bg-hover) !important; box-shadow:0 0 22px 4px var(--amb-glow); transform:translateY(-1px); } footer.player .p-controls .icon:active{ transform:translateY(0); } footer.player .p-controls .icon:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(245,158,11,.45); } /* FINAL MOBILE OVERRIDES */ @media (max-width: 720px){ footer.player .p-controls .icon, footer.player .p-controls .icon#btn-play, footer.player .p-controls .p-icon, .player .p-controls .icon, .player .p-controls .player .p-controls .icon:hover, .player .p-controls .p-icon:hover{ background:#141a21 !important; box-shadow:0 0 22px 4px rgba(245,158,11,.18); transform:translateY(-1px); } /* Neutralize earlier mobile rules that made them transparent */ .p-controls .icon, /* Make sure SVGs inherit the button color */ .p-controls .icon svg, .p-icon svg{ fill:currentColor; } } /* ======================= Unified Controls & Buttons ======================= */ :root{ --amb-bg:#101418; --amb-bg-hover:#141a21; --amb-border:rgba(245,158,11,.35); --amb-glow:rgba(245,158,11,.18); } /* Primary CTA-style buttons */ .btn, a.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.55rem .9rem; border-radius:.7rem; background:var(--amb-bg); border:1px solid var(--amb-border); color:#e5e7eb; font-weight:800; text-decoration:none; cursor:pointer; box-shadow:0 2px 0 rgba(234,179,8,.45); transition: box-shadow .15s ease, transform .1s ease, background .15s ease, filter .1s ease; } .btn:hover, a.btn:hover{ background:var(--amb-bg-hover); transform:translateY(-1px); box-shadow:0 0 22px 4px var(--amb-glow); } .btn:active, a.btn:active{ transform:translateY(0); box-shadow:none; } .btn:focus-visible, a.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(245,158,11,.45); } /* Album hero 'Play album' inherits the same look */ .album-hero .btn, .album-hero a.btn{ padding:.6rem 1rem; } /* Overlay action buttons on cards (play / download) */ .overlay-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:.7rem; background:var(--amb-bg); border:1px solid var(--amb-border); color:#e5e7eb; text-decoration:none; box-shadow:0 0 0 0 rgba(245,158,11,.0); transition: box-shadow .15s ease, transform .1s ease, background .15s ease; } .overlay-btn.play{ font-size:1rem; line-height:1; } .overlay-btn.dl{ font-size:.95rem; } .overlay-btn:hover{ background:var(--amb-bg-hover); box-shadow:0 0 22px 4px var(--amb-glow); transform:translateY(-1px); } .overlay-btn:active{ transform:translateY(0); } .overlay-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(245,158,11,.45); } /* Album table download icon */ .icon.dl-amb{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:.55rem; background:var(--amb-bg); border:1px solid var(--amb-border); color:#f5c052; transition: box-shadow .2s ease, background .2s ease; text-decoration:none; } .icon.dl-amb:hover{ background:var(--amb-bg-hover); box-shadow:0 0 40px 8px var(--amb-glow); } /* Player controls (prev / play-pause / next) */ footer.player .p-controls .icon{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:.7rem; background:var(--amb-bg); border:1px solid var(--amb-border); color:#e5e7eb; padding:0; transition: box-shadow .15s ease, transform .1s ease, background .15s ease; } footer.player .p-controls .icon:hover{ background:var(--amb-bg-hover); box-shadow:0 0 22px 4px var(--amb-glow); transform:translateY(-1px); } footer.player .p-controls .icon:active{ transform:translateY(0); } footer.player .p-controls .icon:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(245,158,11,.45); } /* Mobile sizing + keep same look */ @media (max-width:720px){ footer.player .p-controls .icon{ width:34px; height:34px; } .overlay-btn{ width:44px; height:44px; } /* tap target */ } /* Ensure SVG icons follow text color */ .p-controls .icon svg, .overlay-btn svg, .icon.dl-amb svg{ fill:currentColor; } /* === v2 fixes === */ /* Give the volume/sound button the same amber style */ footer.player .p-right .icon{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:.7rem; background:var(--amb-bg); border:1px solid var(--amb-border); color:#e5e7eb; padding:0; transition: box-shadow .15s ease, transform .1s ease, background .15s ease; } footer.player .p-right .icon:hover{ background:var(--amb-bg-hover); box-shadow:0 0 22px 4px var(--amb-glow); transform:translateY(-1px); } footer.player .p-right .icon:active{ transform:translateY(0); } footer.player .p-right .icon:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(245,158,11,.45); } /* Mobile sizing for volume button */ @media (max-width:720px){ footer.player .p-right .icon{ width:34px; height:34px; } } /* Force mobile player controls to amber even if earlier rules remain */ @media (max-width:720px){ footer.player .p-controls .icon, footer.player .p-right .icon{ background:var(--amb-bg) !important; border:1px solid var(--amb-border) !important; color:#e5e7eb !important; } } /* Prevent sticky hover glow on touch devices (iOS) */ @media (hover:none){ footer.player .p-controls .icon:hover, footer.player .p-right .icon:hover{ box-shadow:none; transform:none; background:var(--amb-bg); } } /* Ensure inner SVGs pick up currentColor */ footer.player .p-controls .icon svg, footer.player .p-right .icon svg{ fill:currentColor; } /* === v3: unify .p-icon (mute button) to match .icon === */ footer.player .p-right .p-icon{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:.7rem; background:var(--amb-bg); border:1px solid var(--amb-border); color:#e5e7eb; padding:0; transition: box-shadow .15s ease, transform .1s ease, background .15s ease; } footer.player .p-right .p-icon:hover{ background:var(--amb-bg-hover); box-shadow:0 0 22px 4px var(--amb-glow); transform:translateY(-1px); } footer.player .p-right .p-icon:active{ transform:translateY(0); } footer.player .p-right .p-icon:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(245,158,11,.45); } footer.player .p-right .p-icon svg{ fill:currentColor; } @media (max-width:720px){ footer.player .p-right .p-icon{ width:34px; height:34px; } /* Strong guarantee on mobile */ footer.player .p-right .p-icon{ background:var(--amb-bg) !important; border:1px solid var(--amb-border) !important; color:#e5e7eb !important; } } /* === v4: iOS Safari reset for player control buttons === */ /* iOS gives