BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: search styling improvements

Browse Source
This commit is contained in:
SethBurkart123
2025-03-31 23:03:45 +11:00
parent 1f3354c47b
commit adbba730c4
2 changed files with 6 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/plugins/built-in/globalSearch/SearchBar.svelte
+2 -2
View File
@@ -153,14 +153,14 @@
role="button" role="button"
tabindex="0"> tabindex="0">
<div class="relative p-2 border-b border-zinc-900/5 dark:border-zinc-100/5"> <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'} {'\ueca5'}
</div> </div>
<input <input
bind:this={searchbar} bind:this={searchbar}
bind:value={searchTerm} bind:value={searchTerm}
onkeydown={handleKeyNav} 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..." placeholder="Search..."
/> />
</div> </div>
src/plugins/built-in/globalSearch/styles.css
+4 -15
View File
@@ -19,7 +19,7 @@
p { p {
font-size: 14px; font-size: 14px;
margin-left: 8px; margin-left: 8px;
margin-right: 16px; margin-right: 48px;
height: 100%; height: 100%;
margin-bottom: 0; margin-bottom: 0;
line-height: 32px; line-height: 32px;
@@ -29,7 +29,7 @@
/* Light mode styles */ /* Light mode styles */
.search-trigger { .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; border: 1px solid rgba(0, 0, 0, 0.1) !important;
color: #555 !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 { .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; border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #aaa !important; color: #aaa !important;
@@ -60,9 +54,4 @@
svg { svg {
color: #aaa; color: #aaa;
} }
} }
.dark .search-trigger:hover {
background-color: rgba(30, 41, 59, 0.9) !important;
color: #eee !important;
}