Fix sticky top.

wled00/data/index.css

@@ -34,6 +34,7 @@
 	--bhd: none;
 	--sgp: "block";
 	--bmt: 0;
+	--sti: 42px;
 }
 
 html {
@@ -457,7 +458,7 @@ button {
 	padding: 4px 2px;
 	position: relative;
 	opacity: 1;
-	transition: opacity .5s linear, height .5s, transform .5s;
+	transition: opacity .5s linear, height .25s, transform .25s;
 }
 
 .filter {
@@ -475,7 +476,7 @@ button {
 	position: absolute;
 	opacity: 0;
 	visibility: hidden;
-	transition: opacity .4s ease, visibility .4s ease;
+	transition: opacity .25s ease, visibility .25s ease;
 	background-color: var(--c-5);
 	box-shadow: 4px 4px 10px 4px var(--c-1);
 	color: var(--c-f);
@@ -1316,20 +1317,14 @@ TD .checkmark, TD .radiomark {
 	top: 42px;
 }
 
-#fxlist .lstI.selected {
-	top: 84px;
-}
-
-#fxlist .lstI.sticky {
-	top: 42px;
-}
-
+#fxlist .lstI.selected,
 #pallist .lstI.selected {
-	top: 84px;
+	top: calc(var(--sti) + 42px);
 }
 
+#fxlist .lstI.sticky,
 #pallist .lstI.sticky {
-	top: 42px;
+	top: var(--sti);
 }
 
 /* list item content */

wled00/data/index.htm

@@ -198,9 +198,9 @@
 		<div id="fx">
 			<p class="labels hd" id="modeLabel">Effect mode</p>
 			<div class="staytop fnd" id="fxFind">
-				<input type="text" placeholder="Search" oninput="search(this,'fxlist')" onfocus="search(this,'fxlist');gId('filters').classList.remove('fade');" onblur="filterFocus(event);" />
+				<input type="text" placeholder="Search" oninput="search(this,'fxlist')" onfocus="filterFocus(event);search(this,'fxlist');" onblur="filterFocus(event);" />
 				<i class="icons clear-icon" onclick="clean(this);">&#xe38f;</i>
-				<i class="icons search-icon" x-onclick="gId('filters').classList.toggle('fade');" style="cursor:pointer;">&#xe0a1;</i>
+				<i class="icons search-icon" style="cursor:pointer;">&#xe0a1;</i>
 				<div id="filters" class="filter fade">
 					<label id="filterPal" tooltip="Uses palette" class="check fchkl">&#x1F3A8;
 						<input type="checkbox" data-flt="&#x1F3A8;" onchange="filterFx(this);">

wled00/data/index.js

@@ -2746,12 +2746,23 @@ function clean(c)
 
 function filterFocus(e)
 {
+	//console.log(e);
 	let t = e.explicitOriginalTarget;
-	do {
-		if (t.id && (t.id === "fxFind")) { setTimeout(()=>{t.firstElementChild.focus()},150); return; }
-		t = t.parentElement;
-	} while (t.tagName !== "BODY");
-	setTimeout(()=>{gId('filters').classList.toggle('fade')},150);
+	let f = gId("filters");
+	if (e.type === "focus") f.classList.remove('fade');	// immediately show (still has transition)
+	// compute sticky top (with delay for transition)
+	setTimeout(()=>{
+		let sti = parseInt(getComputedStyle(d.documentElement).getPropertyValue('--sti')) + (e.type === "focus" ? 1 : -1) * f.offsetHeight;
+		console.log(sti);
+		sCol('--sti', sti+"px");
+	}, 252);
+	if (e.type === "blur") {
+		do {
+			if (t.id && (t.id === "fxFind")) { setTimeout(()=>{t.firstElementChild.focus();},150); return; }
+			t = t.parentElement;
+		} while (t.tagName !== "BODY");
+		setTimeout(()=>{f.classList.add('fade');},255);	// wait with hiding
+	}
 }
 
 function filterFx(o)