diff --git a/wled00/data/index.css b/wled00/data/index.css index 0fe848f6bb..1f2e23330a 100644 --- a/wled00/data/index.css +++ b/wled00/data/index.css @@ -298,7 +298,7 @@ button { top: -1px; z-index: 1; margin-top: 1px; - width: 274px; + width: auto; margin: auto; border-radius: 25px; } @@ -432,20 +432,23 @@ img { } .sliderbubble { - width: 36px; - line-height: 24px; - background: var(--c-3); - position: absolute; - transform: translateX(-50%); - border-radius: 12px; - margin-left: 12px; - margin-top: 3px; - padding: 0px; - display: inline; -} - -.hidden { - display: none; + width: 24px; + position: relative; + display: inline-block; + border-radius: 4px; + background: var(--c-3); + color: white; + padding: 2px 5px; + font-size: 14px; + right: 5px; + transition: visibility 0.25s ease, opacity 0.25s ease; + opacity: 0; + visibility: hidden; +} + +output.sliderbubbleshow { + visibility: visible; + opacity: 1; } input[type=range] { @@ -487,10 +490,6 @@ input[type=range]::-moz-range-thumb { background: var(--c-f); transform: translateY(7px); } -input[type=range]:active + .sliderbubble { - display: inline; - transform: translateX(-50%); -} #wwrap { display: none; @@ -904,6 +903,13 @@ input[type=number]::-webkit-outer-spin-button { background: var(--c-sbh); } +@media not all and (hover: none) { + .sliderwrap:hover + output.sliderbubble { + visibility: visible; + opacity: 1; + } +} + @media all and (max-width: 335px) { .sliderbubble { display: none; diff --git a/wled00/data/index.htm b/wled00/data/index.htm index 9bdaae8657..b19501784f 100644 --- a/wled00/data/index.htm +++ b/wled00/data/index.htm @@ -35,6 +35,7 @@
+ @@ -45,18 +46,30 @@White channel
@@ -64,6 +77,7 @@Color palette
+Color palette
Effect intensity
Effect mode