mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 11:44:40 +00:00
style: search styling improvements
This commit is contained in:
@@ -153,14 +153,14 @@
|
||||
role="button"
|
||||
tabindex="0">
|
||||
<div class="relative p-2 border-b border-zinc-900/5 dark:border-zinc-100/5">
|
||||
<div class="absolute top-1/2 translate-y-[calc(-50%-4px)] scale-125 left-5 w-6 h-6 text-[1.3rem] text-zinc-900 dark:text-zinc-400 text-opacity-40 pointer-events-none font-IconFamily">
|
||||
<div class="absolute top-1/2 translate-y-[calc(-50%-3px)] scale-105 left-5 w-6 h-6 text-[1.3rem] text-zinc-900 dark:text-zinc-400 text-opacity-40 pointer-events-none font-IconFamily">
|
||||
{'\ueca5'}
|
||||
</div>
|
||||
<input
|
||||
bind:this={searchbar}
|
||||
bind:value={searchTerm}
|
||||
onkeydown={handleKeyNav}
|
||||
class="pr-4 pl-12 w-full h-12 text-lg bg-transparent border-0 outline-none placeholder-zinc-400 text-zinc-900 dark:placeholder-zinc-500 dark:text-white focus:ring-0 sm:text-xl"
|
||||
class="pr-4 pl-12 w-full h-10 text-lg bg-transparent border-0 outline-none placeholder-zinc-400 text-zinc-700 dark:placeholder-zinc-500 dark:text-white focus:ring-0 sm:text-xl"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin-left: 8px;
|
||||
margin-right: 16px;
|
||||
margin-right: 48px;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
line-height: 32px;
|
||||
@@ -29,7 +29,7 @@
|
||||
|
||||
/* Light mode styles */
|
||||
.search-trigger {
|
||||
background-color: rgba(248, 250, 252, 0.9) !important;
|
||||
background-color: rgba(248, 250, 252, 0.05) !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1) !important;
|
||||
color: #555 !important;
|
||||
|
||||
@@ -42,14 +42,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.search-trigger:hover {
|
||||
background-color: rgba(248, 250, 252, 1) !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
/* Dark mode styles */
|
||||
.dark .search-trigger {
|
||||
background-color: rgba(30, 41, 59, 0.7) !important;
|
||||
background-color: rgba(0, 0, 0, 0.03) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
color: #aaa !important;
|
||||
|
||||
@@ -60,9 +54,4 @@
|
||||
svg {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.dark .search-trigger:hover {
|
||||
background-color: rgba(30, 41, 59, 0.9) !important;
|
||||
color: #eee !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user