vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix playlist search bar want to register new credential in browser

Browse source
This commit is contained in:
BlackSigkill 2026-02-05 17:05:36 +01:00
parent 2482df31be
commit c678a761d0
2 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
index.html
View file

@ -1650,17 +1650,36 @@
</div> </div>
</div> </div>
</header> </header>
<div class="track-list-search-container"> <form class="track-list-search-container" onsubmit="return false">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="search-icon"
>
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input <input
type="text" type="search"
id="track-list-search-input" id="track-list-search-input"
placeholder="Search tracks..." placeholder="Search tracks..."
class="track-list-search-input" class="track-list-search-input"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
/> />
<button class="search-clear-btn btn-icon" title="Clear search" style="display: none"> <button type="button" class="search-clear-btn btn-icon" title="Clear search" style="display: none">
&times; &times;
</button> </button>
</div> </form>
<div id="playlist-detail-tracklist" class="track-list"></div> <div id="playlist-detail-tracklist" class="track-list"></div>
<section <section

13
styles.css
View file

@ -5531,11 +5531,22 @@ textarea:focus {
.track-list-search-container { .track-list-search-container {
margin: 1rem 0; margin: 1rem 0;
position: relative; position: relative;
display: flex;
align-items: center;
}
.track-list-search-container svg.search-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--muted-foreground);
pointer-events: none;
} }
.track-list-search-input { .track-list-search-input {
width: 100%; width: 100%;
padding: 0.75rem 2.5rem 0.75rem 1rem; padding: 0.75rem 2.5rem 0.75rem 2.5rem;
background-color: var(--input); background-color: var(--input);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius);