diff --git a/index.html b/index.html index 6e5c0ef..45e2fc6 100644 --- a/index.html +++ b/index.html @@ -16,95 +16,95 @@ * { margin: 0; padding: 0; box-sizing: border-box; } -body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #111; color: #e0e0e0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } -.btn { background: linear-gradient(to bottom, #3a3a3a, #282828); border: 1px solid #484848; color: #e0e0e0; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap; box-shadow: 0 3px 0 #181818, 0 4px 6px rgba(0,0,0,0.4); } -.btn:hover { background: linear-gradient(to bottom, #404040, #2e2e2e); } -.btn:active { background: linear-gradient(to bottom, #282828, #3a3a3a); box-shadow: 0 1px 0 #181818, 0 2px 4px rgba(0,0,0,0.4); transform: translateY(2px); } -.btn-primary { background: linear-gradient(to bottom, #2a7dff, #185dd5); border-color: #1a6df5; color: #fff; box-shadow: 0 3px 0 #0f4ab0, 0 4px 6px rgba(0,0,0,0.4); } -.btn-primary:hover { background: linear-gradient(to bottom, #3a8dff, #1a6de5); } -.btn-primary:active { background: linear-gradient(to bottom, #185dd5, #2a7dff); box-shadow: 0 1px 0 #0f4ab0, 0 2px 4px rgba(0,0,0,0.4); transform: translateY(2px); } +body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #161821; color: #c6c8d1; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } +.btn { background: linear-gradient(to bottom, #272c42, #1e2132); border: 1px solid #6b7089; color: #c6c8d1; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap; box-shadow: 0 3px 0 #161821, 0 4px 6px rgba(0,0,0,0.4); } +.btn:hover { background: linear-gradient(to bottom, #2e3348, #272c42); } +.btn:active { background: linear-gradient(to bottom, #1e2132, #272c42); box-shadow: 0 1px 0 #161821, 0 2px 4px rgba(0,0,0,0.4); transform: translateY(2px); } +.btn-primary { background: linear-gradient(to bottom, #91acd1, #84a0c6); border-color: #84a0c6; color: #161821; box-shadow: 0 3px 0 #6b88b0, 0 4px 6px rgba(0,0,0,0.4); } +.btn-primary:hover { background: linear-gradient(to bottom, #a0b8db, #91acd1); } +.btn-primary:active { background: linear-gradient(to bottom, #84a0c6, #91acd1); box-shadow: 0 1px 0 #6b88b0, 0 2px 4px rgba(0,0,0,0.4); transform: translateY(2px); } .btn-sm { padding: 4px 10px; font-size: 11px; } @keyframes spin { to { transform: rotate(360deg); } } -.brand { font-size: 15px; font-weight: 700; color: #999; letter-spacing: 1px; user-select: none; } -.brand span { color: #666; } -footer { display: flex !important; align-items: center; gap: 16px; padding: 10px 24px; background: linear-gradient(to bottom, #222, #181818); border-top: 1px solid #333; font-size: 14px; color: #aaa; flex-shrink: 0; } +.brand { font-size: 15px; font-weight: 700; color: #6b7089; letter-spacing: 1px; user-select: none; } +.brand span { color: #6b7089; } +footer { display: flex !important; align-items: center; gap: 16px; padding: 10px 24px; background: linear-gradient(to bottom, #1e2132, #161821); border-top: 1px solid #272c42; font-size: 14px; color: #6b7089; flex-shrink: 0; } footer .brand { margin-left: auto; } .content { flex: 1; overflow: hidden; display: flex; flex-direction: column; } -.pinned { flex-shrink: 0; background: linear-gradient(to bottom, #191919, #0f0f0f); padding: 16px 24px; display: flex; flex-direction: row; gap: 20px; align-items: center; } +.pinned { flex-shrink: 0; background: linear-gradient(to bottom, #1e2132, #161821); padding: 16px 24px; display: flex; flex-direction: row; gap: 20px; align-items: center; } .player { display: flex; flex-direction: row; width: 100%; align-items: center; gap: 24px; } canvas { width: 100%; height: 100px; border-radius: 6px; display: block; } .player-right { display: flex; flex-direction: column; width: 320px; flex-shrink: 0; } -.audio-info { font-size: 11px; color: #555; font-variant-numeric: tabular-nums; align-self: flex-end; } +.audio-info { font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; align-self: flex-end; } .player .track-info { margin-bottom: 4px; } -.player .track-info .title { font-size: 16px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.player .track-info .artist-name { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.big-time { font-size: 28px; font-weight: 200; color: #fff; letter-spacing: 1px; font-variant-numeric: tabular-nums; margin-bottom: 6px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; } -.big-time .sep { color: #444; margin: 0 4px; } +.player .track-info .title { font-size: 16px; font-weight: 600; color: #c6c8d1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.player .track-info .artist-name { font-size: 12px; color: #6b7089; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.big-time { font-size: 28px; font-weight: 200; color: #d2d4de; letter-spacing: 1px; font-variant-numeric: tabular-nums; margin-bottom: 6px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; } +.big-time .sep { color: #6b7089; margin: 0 4px; } .canvas-area { display: flex; flex-direction: column; flex: 1; min-width: 200px; gap: 6px; } -.progress-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #666; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; } -.progress-row .progress-bar { flex: 1; height: 6px; background: #333; border-radius: 3px; cursor: pointer; } -.progress-row .progress-bar .fill { height: 100%; background: #1a6df5; border-radius: 3px; width: 0%; } -.progress-row .progress-bar:hover .fill { background: #3a8df5; } +.progress-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; } +.progress-row .progress-bar { flex: 1; height: 6px; background: #272c42; border-radius: 3px; cursor: pointer; } +.progress-row .progress-bar .fill { height: 100%; background: #84a0c6; border-radius: 3px; width: 0%; } +.progress-row .progress-bar:hover .fill { background: #91acd1; } #noiz-overlay { position: fixed; opacity: 0.75; inset: 0; display: flex; justify-content: center; align-items: center; background: transparent; pointer-events: none; z-index: 9999; animation: fadeout 750ms ease 750ms forwards; } #noiz-overlay img { max-width: 50vw; max-height: 50vh; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)); } @keyframes fadeout { from { opacity: 0.75; transform: scale(1); } to { opacity: 0; transform: scale(1.75); visibility: hidden; } } -#timeRemaining { color: #555; } +#timeRemaining { color: #6b7089; } #vuMeter { width: 100%; height: 20px; border-radius: 2px; display: block; } .controls { display: flex; align-items: center; gap: 16px; align-self: flex-end; } -.controls button { background: linear-gradient(to bottom, #3a3a3a, #222); border: none; color: #ccc; cursor: pointer; padding: 6px; font-size: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 #1a1a1a, 0 3px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06); } -.controls button:hover { color: #fff; background: linear-gradient(to bottom, #444, #2a2a2a); } -.controls button:active { background: linear-gradient(to bottom, #222, #3a3a3a); box-shadow: 0 1px 0 #1a1a1a, 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06); transform: translateY(1px); } -.controls .play-btn { width: 44px; height: 44px; background: linear-gradient(to bottom, #2a7dff, #185dd5); color: #fff; font-size: 16px; border: 1px solid #1a6df5; box-shadow: 0 3px 0 #0f4ab0, 0 4px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15); } -.controls .play-btn:hover { background: linear-gradient(to bottom, #3a8dff, #2a6de5); } -.controls .play-btn:active { background: linear-gradient(to bottom, #185dd5, #2a7dff); box-shadow: 0 1px 0 #0f4ab0, 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15); transform: translateY(2px); } +.controls button { background: linear-gradient(to bottom, #272c42, #1e2132); border: none; color: #c6c8d1; cursor: pointer; padding: 6px; font-size: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 #161821, 0 3px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06); } +.controls button:hover { color: #d2d4de; background: linear-gradient(to bottom, #2e3348, #272c42); } +.controls button:active { background: linear-gradient(to bottom, #1e2132, #272c42); box-shadow: 0 1px 0 #161821, 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06); transform: translateY(1px); } +.controls .play-btn { width: 44px; height: 44px; background: linear-gradient(to bottom, #91acd1, #84a0c6); color: #161821; font-size: 16px; border: 1px solid #84a0c6; box-shadow: 0 3px 0 #6b88b0, 0 4px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15); } +.controls .play-btn:hover { background: linear-gradient(to bottom, #a0b8db, #91acd1); } +.controls .play-btn:active { background: linear-gradient(to bottom, #84a0c6, #91acd1); box-shadow: 0 1px 0 #6b88b0, 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15); transform: translateY(2px); } .volume-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; width: 100%; max-width: 200px; align-self: flex-end; } -.volume-row input[type="range"] { flex: 1; height: 3px; -webkit-appearance: none; appearance: none; background: #333; border-radius: 2px; outline: none; } -.volume-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #1a6df5; cursor: pointer; } -.volume-row .vol-icon { font-size: 14px; color: #666; } -.add-bar { display: flex; gap: 8px; padding: 10px 24px; background: linear-gradient(to bottom, #1e1e1e, #141414); border-top: 1px solid #222; flex-shrink: 0; } -.empty-state { display: none; text-align: center; width: 100%; height: 100px; border-radius: 6px; background: #161616; justify-content: center; align-items: center; flex-direction: column; gap: 4px; flex-shrink: 0; } +.volume-row input[type="range"] { flex: 1; height: 3px; -webkit-appearance: none; appearance: none; background: #272c42; border-radius: 2px; outline: none; } +.volume-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #84a0c6; cursor: pointer; } +.volume-row .vol-icon { font-size: 14px; color: #6b7089; } +.add-bar { display: flex; gap: 8px; padding: 10px 24px; background: linear-gradient(to bottom, #1e2132, #161821); border-top: 1px solid #272c42; flex-shrink: 0; } +.empty-state { display: none; text-align: center; width: 100%; height: 100px; border-radius: 6px; background: #1e2132; justify-content: center; align-items: center; flex-direction: column; gap: 4px; flex-shrink: 0; } .empty-state .icon { font-size: 20px; opacity: .2; } -.empty-state h2 { font-size: 14px; font-weight: 600; color: #444; } -.empty-state p { color: #333; font-size: 11px; } +.empty-state h2 { font-size: 14px; font-weight: 600; color: #6b7089; } +.empty-state p { color: #6b7089; font-size: 11px; } .playlist { display: flex; flex-direction: column; flex: 1; min-height: 0; } -.playlist-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 24px; border-bottom: 1px solid #222; flex-shrink: 0; flex-wrap: wrap; } +.playlist-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 24px; border-bottom: 1px solid #272c42; flex-shrink: 0; flex-wrap: wrap; } .playlist-toolbar .spacer { flex: 1; } -.playlist-toolbar select { background: linear-gradient(to bottom, #3a3a3a, #282828); border: 1px solid #484848; color: #e0e0e0; padding: 4px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; outline: none; box-shadow: 0 2px 0 #181818, 0 3px 4px rgba(0,0,0,0.3); transition: transform .1s, box-shadow .1s; } +.playlist-toolbar select { background: linear-gradient(to bottom, #272c42, #1e2132); border: 1px solid #6b7089; color: #c6c8d1; padding: 4px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; outline: none; box-shadow: 0 2px 0 #161821, 0 3px 4px rgba(0,0,0,0.3); transition: transform .1s, box-shadow .1s; } -.playlist-header { display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 60px 60px; gap: 8px; padding: 8px 24px; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #555; border-bottom: 1px solid #222; flex-shrink: 0; background: linear-gradient(to bottom, #1e1e1e, #141414); } +.playlist-header { display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 60px 60px; gap: 8px; padding: 8px 24px; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #6b7089; border-bottom: 1px solid #272c42; flex-shrink: 0; background: linear-gradient(to bottom, #1e2132, #161821); } .playlist-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 0; position: relative; } -#scanning { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.75); z-index: 10; font-size: 14px; color: #ccc; flex-direction: column; gap: 10px; } -#scanning .spinner { width: 20px; height: 20px; border: 2px solid #444; border-top-color: #1a6df5; border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; } +#scanning { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(22,24,33,0.85); z-index: 10; font-size: 14px; color: #c6c8d1; flex-direction: column; gap: 10px; } +#scanning .spinner { width: 20px; height: 20px; border: 2px solid #6b7089; border-top-color: #84a0c6; border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; } .playlist-body::-webkit-scrollbar { width: 6px; } .playlist-body::-webkit-scrollbar-track { background: transparent; } -.playlist-body::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; } +.playlist-body::-webkit-scrollbar-thumb { background: #272c42; border-radius: 3px; } .track-item { display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 60px 60px; gap: 8px; padding: 6px 24px; cursor: pointer; font-size: 12px; border-left: 3px solid transparent; transition: background .08s; align-items: center; user-select: none; } -.track-item:hover { background: #1a1a1a; } -.track-item.active { background: linear-gradient(to bottom, #0f3a0f, #082208); border-left-color: #33ff55; } -.track-item.active .col-title { color: #55ff77; font-weight: 700; } -.track-item.active .col-artist { color: #33dd55; font-weight: 600; } -.track-item.active .col-idx { color: #55ff77; font-weight: 700; } -.track-item.active .col-time { color: #33dd55; font-weight: 600; } -.track-item.active .col-genre { color: #33dd55; } -.track-item.active .col-file { color: #33cc55; font-weight: 600; } -.track-item.selected { background: linear-gradient(to bottom, #1a3a5a, #0f2440); border-left-color: #3399ff; } -.track-item.selected .col-title { color: #77bbff; font-weight: 600; } -.track-item.selected .col-artist { color: #5599dd; } -.track-item.selected .col-idx { color: #5599dd; } -.track-item.selected .col-time { color: #5599dd; } -.track-item.selected .col-file { color: #4488cc; } -.track-item.active.selected { background: linear-gradient(to bottom, #1a6a1a, #0d3d0d); border-left-color: #66ff88; } -.track-item.active.selected .col-title { color: #88ffaa; } +.track-item:hover { background: #1e2132; } +.track-item.active { background: linear-gradient(to bottom, rgba(180,190,130,0.12), rgba(180,190,130,0.06)); border-left-color: #b4be82; } +.track-item.active .col-title { color: #c0ca8e; font-weight: 700; } +.track-item.active .col-artist { color: #b4be82; font-weight: 600; } +.track-item.active .col-idx { color: #c0ca8e; font-weight: 700; } +.track-item.active .col-time { color: #b4be82; font-weight: 600; } +.track-item.active .col-genre { color: #b4be82; } +.track-item.active .col-file { color: #b4be82; font-weight: 600; } +.track-item.selected { background: linear-gradient(to bottom, rgba(132,160,198,0.15), rgba(132,160,198,0.08)); border-left-color: #84a0c6; } +.track-item.selected .col-title { color: #91acd1; font-weight: 600; } +.track-item.selected .col-artist { color: #84a0c6; } +.track-item.selected .col-idx { color: #84a0c6; } +.track-item.selected .col-time { color: #84a0c6; } +.track-item.selected .col-file { color: #84a0c6; } +.track-item.active.selected { background: linear-gradient(to bottom, rgba(180,190,130,0.18), rgba(132,160,198,0.12)); border-left-color: #b4be82; } +.track-item.active.selected .col-title { color: #c0ca8e; } .track-item.dragging { opacity: 0.4; } -.track-item.drag-over { border-top: 2px solid #22bb44; } -.track-item .col-idx { color: #444; text-align: right; font-size: 10px; } -.track-item .col-title { color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.track-item .col-artist { color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.track-item .col-file { color: #666; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.track-item .col-time { color: #666; font-size: 11px; font-variant-numeric: tabular-nums; } -.track-item .col-genre { color: #666; font-size: 10px; } +.track-item.drag-over { border-top: 2px solid #b4be82; } +.track-item .col-idx { color: #6b7089; text-align: right; font-size: 10px; } +.track-item .col-title { color: #c6c8d1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.track-item .col-artist { color: #6b7089; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.track-item .col-file { color: #6b7089; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.track-item .col-time { color: #6b7089; font-size: 11px; font-variant-numeric: tabular-nums; } +.track-item .col-genre { color: #6b7089; font-size: 10px; } footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -#error { display: none; background: #3a1a1a; color: #e88; padding: 8px 16px; font-size: 13px; text-align: center; border-bottom: 1px solid #522; } +#error { display: none; background: rgba(226,120,120,0.15); color: #e27878; padding: 8px 16px; font-size: 13px; text-align: center; border-bottom: 1px solid rgba(226,120,120,0.3); } @media (max-width: 700px) { .player { flex-direction: column; align-items: stretch; } canvas { width: 100%; height: 80px; } @@ -147,8 +147,8 @@ footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hid
- L - R + L + R
@@ -173,7 +173,7 @@ footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hid
- Sort: + Sort: - 0 - Window: + 0 + Window: - Peak Decay: + Peak Decay: - Bar Decay: + Bar Decay: - Crossfade: + Crossfade: - Repeat: + Repeat: - Shuffle: + Shuffle: