From 1be6223a314be90ce967d2d768c277cacc767fd1 Mon Sep 17 00:00:00 2001 From: Blaz Kristan Date: Sat, 14 Oct 2023 20:44:11 +0200 Subject: [PATCH] Pixelmagic optimisation Filter tooltips --- wled00/data/index.css | 25 +- wled00/data/index.htm | 6 + wled00/data/pxmagic/pxmagic.htm | 74 +- wled00/html_pxmagic.h | 1381 ++++++----- wled00/html_ui.h | 4022 ++++++++++++++++--------------- wled00/wled.h | 2 +- 6 files changed, 2750 insertions(+), 2760 deletions(-) diff --git a/wled00/data/index.css b/wled00/data/index.css index 1b34285d..d67eb0d6 100644 --- a/wled00/data/index.css +++ b/wled00/data/index.css @@ -337,7 +337,8 @@ button { width: calc(100%/var(--n)); box-sizing: border-box; border: 0px; - overflow: auto; + overflow-y: auto; + overflow-x: hidden; height: 100%; overscroll-behavior: none; padding: 0 4px; @@ -461,11 +462,11 @@ button { .filter { z-index: 1; - overflow: hidden; + /*overflow: visible;*/ } /* Tooltip text */ -.slider .tooltiptext, .option .tooltiptext { +.slider .tooltiptext, .option .tooltiptext, .filter .tooltiptext { visibility: hidden; background-color: var(--c-5); /*border: 2px solid var(--c-2);*/ @@ -490,11 +491,17 @@ button { opacity: 0; transition: opacity 0.75s; } -.option .tooltiptext { +.option .tooltiptext, .filter .tooltiptext { bottom: 120%; } +.filter .ttfirst { + margin-left: -40px; +} +.filter .ttlast { + margin-left: -140px; +} /* Tooltip arrow */ -.slider .tooltiptext::after, .option .tooltiptext::after { +.slider .tooltiptext::after, .option .tooltiptext::after, .filter .tooltiptext::after { content: ""; position: absolute; top: 100%; @@ -504,8 +511,14 @@ button { border-style: solid; border-color: var(--c-5) transparent transparent transparent; } +.filter .ttfirst::after { + left: 15%; +} +.filter .ttlast::after { + left: 75%; +} /* Show the tooltip text when you mouse over the tooltip container */ -.slider:hover .tooltiptext, .option .check:hover .tooltiptext { +.slider:hover .tooltiptext, .option .check:hover .tooltiptext, .filter .check:hover .tooltiptext { visibility: visible; opacity: 1; } diff --git a/wled00/data/index.htm b/wled00/data/index.htm index 0cf48d6e..1738bbeb 100644 --- a/wled00/data/index.htm +++ b/wled00/data/index.htm @@ -230,26 +230,32 @@
diff --git a/wled00/data/pxmagic/pxmagic.htm b/wled00/data/pxmagic/pxmagic.htm index acfcb491..43defaad 100644 --- a/wled00/data/pxmagic/pxmagic.htm +++ b/wled00/data/pxmagic/pxmagic.htm @@ -564,12 +564,9 @@
@@ -577,7 +574,6 @@
- - + +
- - Images uploaded to - - WLED - - or upload image - -