From 8490360b9d5e034650a6470fe8b71c561a7e79e5 Mon Sep 17 00:00:00 2001 From: birdstudy-nj Date: Fri, 3 Apr 2026 12:10:59 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E6=AD=8C=E5=8D=95=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E6=9C=AC=E5=9C=B0=E5=92=8CMusicFree=E7=9A=84=E6=AD=8C=E6=9B=B2?= =?UTF-8?q?=E5=8A=A0=E5=85=A5=E8=87=AA=E5=AE=9A=E4=B9=89=E6=AD=8C=E5=8D=95?= =?UTF-8?q?=20(#814)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- xiaomusic/static/iwebplayer/iwebplayer.html | 2414 +++++++++++++++---- 1 file changed, 1917 insertions(+), 497 deletions(-) diff --git a/xiaomusic/static/iwebplayer/iwebplayer.html b/xiaomusic/static/iwebplayer/iwebplayer.html index dd2767c..d0a896f 100644 --- a/xiaomusic/static/iwebplayer/iwebplayer.html +++ b/xiaomusic/static/iwebplayer/iwebplayer.html @@ -59,7 +59,6 @@ transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } - .header-logo-group { display: flex; align-items: center; @@ -103,7 +102,6 @@ justify-content: flex-end; min-width: 0; } - .custom-select { position: relative; display: flex; @@ -171,7 +169,7 @@ to { opacity: 1; transform: translateY(0); } } .select-option { - padding: 10px 15px; + padding: 12px 15px; font-size: 15px; border-bottom: 1px solid var(--bg-color); cursor: pointer; @@ -187,7 +185,6 @@ font-weight: bold; background: var(--bg-color); } - .playing-eq { display: inline-flex; align-items: flex-end; @@ -239,10 +236,9 @@ box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3); } } - - .inline-delete-btn { - background: #fee2e2; - color: #ef4444; + .inline-save-btn { + background: rgba(236, 72, 153, 0.1); + color: var(--primary); border: none; border-radius: 8px; flex-shrink: 0; @@ -252,19 +248,19 @@ align-items: center; justify-content: center; cursor: pointer; - transition: background 0.2s; + transition: background 0.2s, transform 0.1s, opacity 0.2s; } @media (prefers-color-scheme: dark) { - .inline-delete-btn { background: rgba(239, 68, 68, 0.2); } + .inline-save-btn { background: rgba(236, 72, 153, 0.15); } } - .inline-delete-btn:active { + .inline-save-btn:active { opacity: 0.8; + transform: scale(0.95); } - .inline-delete-btn.show { + .inline-save-btn.show { display: flex; animation: fadeIn 0.2s; } - .playlist-container-search { flex: 0 0 auto !important; max-width: 160px; } .search-inline-wrap { display: none; @@ -292,7 +288,54 @@ min-width: 0; height: 100%; } - + .search-history-list { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + margin-top: 6px; + background: var(--card-bg); + border: 1px solid var(--border); + border-radius: 8px; + box-shadow: 0 4px 15px rgba(0,0,0,0.1); + list-style: none; + max-height: 40vh; + overflow-y: auto; + z-index: 200; + } + .search-history-list.show { + display: block; + animation: fadeIn 0.15s ease-out; + } + .history-item { + padding: 12px 15px; + font-size: 14px; + border-bottom: 1px solid var(--bg-color); + cursor: pointer; + color: var(--text-main); + display: flex; + align-items: center; + gap: 10px; + } + .history-item:last-child { + border-bottom: none; + } + .history-item:active { + background-color: var(--bg-color); + } + .history-clear-btn { + text-align: center; + color: var(--text-sub); + font-size: 13px; + padding: 12px; + cursor: pointer; + border-top: 1px solid var(--border); + transition: color 0.2s; + } + .history-clear-btn:active { + color: var(--primary); + } .search-actions { display: flex; gap: 14px; @@ -323,7 +366,6 @@ color: var(--primary); background: rgba(236, 72, 153, 0.1); } - #playlist-container { position: static !important; } #playlist-opts { top: 40px !important; @@ -341,8 +383,7 @@ padding: 10px; max-width: 800px; margin: 0 auto; - background-color: #e5e7eb; - min-height: 100vh; + background-color: transparent; } .song-item { background: var(--card-bg); @@ -368,6 +409,85 @@ text-overflow: ellipsis; overflow: hidden; } + .song-platform-tag { + font-size: 11px; + color: var(--primary); + background: rgba(236, 72, 153, 0.08); + padding: 2px 6px; + border-radius: 6px; + margin-left: 8px; + flex-shrink: 0; + white-space: nowrap; + font-weight: 600; + } + @media (prefers-color-scheme: dark) { + .song-platform-tag { background: rgba(236, 72, 153, 0.15); } + } + .song-item.menu-open { + background-color: rgba(236, 72, 153, 0.08); + border-color: rgba(236, 72, 153, 0.3); + z-index: 50; + } + @media (prefers-color-scheme: dark) { + .song-item.menu-open { background-color: rgba(236, 72, 153, 0.15); border-color: rgba(236, 72, 153, 0.4); } + } + .song-more-btn { + position: relative; + color: var(--text-sub); + padding: 2px; + margin-left: 8px; + cursor: pointer; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.2s, color 0.2s; + } + .song-more-btn::after { + content: ''; + position: absolute; + top: -15px; + bottom: -15px; + left: -10px; + right: -10px; + } + .song-more-btn:active { background: var(--border); color: var(--text-main); } + .song-more-menu { + display: none; + position: absolute; + right: 46px; + top: 36px; + background: var(--card-bg); + border: 1px solid var(--border); + border-radius: 10px; + box-shadow: 0 6px 20px rgba(0,0,0,0.12); + z-index: 20; + list-style: none; + min-width: 90px; + overflow: hidden; + } + .song-more-menu.show { + display: block; + animation: fadeIn 0.15s ease-out; + } + .song-more-menu-item { + padding: 12px 15px; + font-size: 15px; + border-bottom: 1px solid var(--bg-color); + color: var(--text-main); + cursor: pointer; + display: flex; + align-items: center; + } + .song-more-menu-item:last-child { border-bottom: none; } + .song-more-menu-item:active { background-color: var(--bg-color); } + .song-more-menu-item.disabled { + color: var(--text-sub); + opacity: 0.4; + } + .song-more-menu-item svg { + pointer-events: none; + } .song-fav-icon { margin-left: 10px; display: flex; align-items: center; } .song-delete-icon { margin-left: 10px; @@ -383,11 +503,10 @@ text-align: center; padding: 20px; color: var(--text-sub); - background-color: #e5e7eb; - min-height: 100vh; + background-color: transparent; } @media (prefers-color-scheme: dark) { - #loading, .playlist { background-color: #000000; } + #loading, .playlist { background-color: transparent; } } /* ========================================== @@ -458,7 +577,6 @@ transition: width 0.3s linear; } .progress-container.remote-mode .progress-thumb { display: none; } - .player-container { max-width: 800px; width: 100%; @@ -474,7 +592,6 @@ opacity: 0.8; font-variant-numeric: tabular-nums; } - .now-playing-info { display: flex; align-items: center; @@ -517,7 +634,6 @@ width: 100%; text-align: center; } - .controls { display: flex; justify-content: space-between; @@ -553,7 +669,6 @@ } .btn.mode-btn, .btn.vol-btn { opacity: 0.8; } .btn:active { opacity: 0.5; } - .volume-wrapper { position: relative; } .volume-popup { position: absolute; @@ -632,7 +747,6 @@ border-radius: 3px; opacity: 0.4; } - .fp-cover-wrapper { flex: 1; display: flex; @@ -659,7 +773,6 @@ 50% { transform: scale(1.05); } 100% { transform: scale(1); } } - .mini-cover { width: 35px; height: 35px; @@ -681,7 +794,6 @@ } .mini-cover.spinning img { animation-play-state: running; } @keyframes rotate-cover { 100% { transform: rotate(360deg); } } - .fp-lyrics-wrapper { height: 28vh; width: 100%; @@ -736,7 +848,6 @@ } .about-modal-backdrop.show { display: flex; animation: about-fade-in 0.15s ease-out; } @keyframes about-fade-in { from { opacity: 0 } to { opacity: 1 } } - .about-modal { width: min(520px, 92vw); background: var(--card-bg); @@ -793,7 +904,6 @@ .about-footer { padding: 12px 18px 18px 18px; display: flex; justify-content: flex-end; gap: 8px; } .about-primary { background: var(--primary); color: #fff; border: none; border-radius: 10px; padding: 10px 16px; font-size: 14px; cursor: pointer; } .about-primary:active { opacity: 0.8; } - .modal-input-group { display: flex; align-items: center; @@ -827,7 +937,6 @@ .about-secondary:active { background: var(--bg-color); } .about-danger { background: #ef4444; color: #fff; border: none; border-radius: 10px; padding: 10px 16px; font-size: 14px; cursor: pointer; transition: opacity 0.2s; } .about-danger:active { opacity: 0.8; } - .toast-message { position: fixed; bottom: calc(var(--player-height) + env(safe-area-inset-bottom) + 80px); @@ -838,7 +947,7 @@ padding: 10px 20px; border-radius: 20px; font-size: 14px; - z-index: 1000; + z-index: 999999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; @@ -869,7 +978,19 @@ .mf-plugin-status.enabled { background: rgba(0, 123, 255, 0.1); color: #007bff; } .mf-plugin-status.disabled { background: rgba(239, 68, 68, 0.1); color: #ef4444; } .mf-plugin-actions { display: flex; gap: 6px; } - .mf-btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; cursor: pointer; transition: opacity 0.2s; } + .mf-btn-sm { + height: 30px; + padding: 0 12px; + font-size: 12px; + border-radius: 6px; + cursor: pointer; + transition: opacity 0.2s; + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: 500; + white-space: nowrap; + } .mf-btn-sm:active { opacity: 0.7; } .mf-btn-blue { background: #007bff; color: #fff; border: none; } .mf-btn-red { background: #ef4444; color: #fff; border: none; } @@ -877,7 +998,99 @@ @keyframes spin-hourglass { 100% { transform: rotate(180deg); } } /* ========================================== - 9. 宽屏适配 + 9. 沉浸式歌单编辑面板 + ========================================== */ + .edit-pl-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 18px; + border-bottom: 1px solid var(--border); + transition: background 0.2s; + min-height: 52px; + } + .edit-pl-name-wrap { + flex: 1; + display: flex; + align-items: center; + gap: 10px; + min-width: 0; + font-size: 16px; + color: var(--text-main); + font-weight: 500; + } + .edit-pl-name-text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .edit-pl-actions { + display: flex; + gap: 8px; + flex-shrink: 0; + align-items: center; + } + .edit-pl-icon-btn { + width: 28px; + height: 28px; + border-radius: 6px; + border: none; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: opacity 0.2s; + } + .edit-pl-icon-btn:active { opacity: 0.7; } + .edit-pl-icon-btn.rename { background: #007bff; color: #fff; } + .edit-pl-icon-btn.delete { background: #6b7280; color: #fff; } + .edit-pl-inline-input { + flex: 1; + height: 30px; + padding: 0 10px; + border: 1px solid var(--primary); + border-radius: 6px; + font-size: 14px; + outline: none; + color: var(--text-main); + background: var(--bg-color); + min-width: 0; + margin-right: 10px; + } + .edit-pl-text-btn { + height: 30px; + padding: 0 12px; + border-radius: 6px; + font-size: 12px; + font-weight: 500; + cursor: pointer; + border: none; + display: flex; + align-items: center; + justify-content: center; + transition: opacity 0.2s; + white-space: nowrap; + } + .edit-pl-text-btn:active { opacity: 0.7; } + .edit-pl-cancel { background: var(--card-bg); color: var(--text-main); border: 1px solid var(--border); } + .edit-pl-cancel:active { background: var(--bg-color); } + .edit-pl-confirm-rename { background: #007bff; color: #fff; border: none; } + .edit-pl-confirm-delete { background: #6b7280; color: #fff; border: none; } + #edit-pl-create-btn { + padding: 0 14px; + height: 34px; + font-size: 13px; + border-radius: 8px; + } + .edit-pl-delete-warn { + font-size: 14px; + color: #ef4444; + font-weight: bold; + margin-right: auto; + } + + /* ========================================== + 10. 宽屏适配 ========================================== */ @media (min-width: 600px) { html { background-color: #e5e7eb; overflow-y: scroll; scrollbar-gutter: stable; } @@ -910,7 +1123,10 @@ -