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

Clean & refactor css + linting

Browse source
This commit is contained in:
BlackSigkill 2026-02-05 17:09:43 +01:00
parent c678a761d0
commit 98ae1ff244
2 changed files with 45 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
index.html
View file

@ -1650,7 +1650,7 @@
</div> </div>
</div> </div>
</header> </header>
<form class="track-list-search-container" onsubmit="return false"> <form class="track-list-search-container" onsubmit="return false;">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
@ -1676,7 +1676,12 @@
autocapitalize="off" autocapitalize="off"
spellcheck="false" spellcheck="false"
/> />
<button type="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>
</form> </form>

91
styles.css
View file

@ -474,14 +474,8 @@ kbd {
} }
.search-bar svg.search-icon { .search-bar svg.search-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--muted-foreground);
width: 20px; width: 20px;
height: 20px; height: 20px;
pointer-events: none;
} }
.sidebar-nav .nav-item a:hover { .sidebar-nav .nav-item a:hover {
@ -576,20 +570,11 @@ kbd {
} }
.search-bar { .search-bar {
position: relative;
width: 80%; width: 80%;
max-width: 100%; max-width: 100%;
display: flex;
align-items: center;
} }
.search-bar input { .search-bar input {
width: 100%;
padding: 0.75rem 2.5rem 0.75rem 2.5rem;
background-color: var(--input);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--foreground);
font-size: 1rem; font-size: 1rem;
transition: transition:
box-shadow var(--transition-fast), box-shadow var(--transition-fast),
@ -597,7 +582,44 @@ kbd {
background-color var(--transition-fast); background-color var(--transition-fast);
} }
/* Clear button for search inputs */ /* Shared search bar styles */
.search-bar,
.track-list-search-container {
position: relative;
display: flex;
align-items: center;
}
.search-bar svg.search-icon,
.track-list-search-container svg.search-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--muted-foreground);
pointer-events: none;
}
.search-bar input,
.track-list-search-input {
width: 100%;
padding: 0.75rem 2.5rem;
background-color: var(--input);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--foreground);
transition:
box-shadow var(--transition-fast),
border-color var(--transition-fast);
}
.search-bar input:focus,
.track-list-search-input:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 3px rgb(var(--highlight-rgb) / 0.2);
}
.search-clear-btn { .search-clear-btn {
position: absolute; position: absolute;
right: 0.25rem; right: 0.25rem;
@ -608,12 +630,6 @@ kbd {
z-index: 1; z-index: 1;
} }
.search-bar input:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 3px rgb(var(--highlight-rgb), 0.2);
}
body.has-page-background .search-bar input { body.has-page-background .search-bar input {
background-color: var(--background); background-color: var(--background);
} }
@ -5530,39 +5546,8 @@ textarea:focus {
/* Track List Search */ /* Track List Search */
.track-list-search-container { .track-list-search-container {
margin: 1rem 0; margin: 1rem 0;
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%;
padding: 0.75rem 2.5rem 0.75rem 2.5rem;
background-color: var(--input);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--foreground);
font-size: 0.95rem; font-size: 0.95rem;
transition:
box-shadow var(--transition-fast),
border-color var(--transition-fast);
}
.track-list-search-input:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 3px rgb(var(--highlight-rgb) / 0.2);
}
.track-list-search-input::placeholder {
color: var(--muted-foreground);
} }