diff --git a/.gitignore b/.gitignore index a95dd5ac22..7c0dd1e5b6 100644 --- a/.gitignore +++ b/.gitignore @@ -7,9 +7,10 @@ /wled00/Release /wled00/extLibs /platformio_override.ini -/wled00/my_config.h +/wled00/my_config.h /build_output .DS_Store .gitignore .clang-format node_modules +.idea diff --git a/wled00/data/index.css b/wled00/data/index.css index 035d0041a0..827f64dd05 100644 --- a/wled00/data/index.css +++ b/wled00/data/index.css @@ -166,6 +166,14 @@ button { color: var(--c-d); } +.search-cancel-icon { + position: absolute; + right: 8px; + top: 9px; + cursor: pointer; + display: none; +} + .flr { float: right; cursor: pointer; @@ -215,7 +223,7 @@ button { .top button { padding: var(--tbp); -} +} .bot button { padding: var(--bbp); @@ -299,7 +307,7 @@ button { top: -1px; z-index: 1; margin-top: 1px; - width: 274px; + width: 272px; margin: auto; border-radius: 25px; } @@ -308,10 +316,6 @@ button { top: 28px; } -#staytop2 { - top: 56px; -} - #fxb0 { margin-bottom: 2px; filter: drop-shadow(0 0 1px #000); @@ -548,6 +552,7 @@ input[type=range]:active + .sliderbubble { font-size: 19px; background-color: var(--c-3); color: var(--c-f); + cursor: pointer; border: 0px solid white; border-radius: 25px; transition-duration: 0.5s; @@ -668,8 +673,8 @@ input[type=number]:focus, input[type=text]:focus { background: var(--c-6); } -input[type=number]::-webkit-inner-spin-button, -input[type=number]::-webkit-outer-spin-button { +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; } @@ -742,7 +747,7 @@ input[type=number]::-webkit-outer-spin-button { } .pwr { - color: var(--c-6); + color: var(--c-6); transform: translate(2px, 3px); cursor: pointer; } @@ -764,7 +769,7 @@ input[type=number]::-webkit-outer-spin-button { cursor: pointer; } -.check { +.check, .radio { display: inline-block; position: relative; padding-bottom: 32px; @@ -774,7 +779,7 @@ input[type=number]::-webkit-outer-spin-button { } .schkl { - padding: 2px 22px 0px 35px; + padding: 2px 5px 0px 35px; margin: 0 0 0 2px; } @@ -784,7 +789,13 @@ input[type=number]::-webkit-outer-spin-button { margin-top: 8px; } -.check input { +.fxchkl { + position: absolute; + top: 0px; + left: 8px; +} + +.check input, .radio input { position: absolute; opacity: 0; cursor: pointer; @@ -792,7 +803,7 @@ input[type=number]::-webkit-outer-spin-button { width: 0; } -.checkmark { +.checkmark, .radiomark { position: absolute; bottom: 0; left: 0; @@ -802,6 +813,13 @@ input[type=number]::-webkit-outer-spin-button { border-radius: 10px; } +.radiomark { + height: 24px; + width: 24px; + border-radius: 50%; + background-color: transparent; +} + .schk { top: 0; } @@ -828,13 +846,13 @@ input[type=number]::-webkit-outer-spin-button { background-color: var(--c-6); } -.checkmark:after { +.checkmark:after, .radiomark:after { content: ""; position: absolute; display: none; } -.check input:checked ~ .checkmark:after { +.check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after { display: block; } @@ -850,6 +868,16 @@ input[type=number]::-webkit-outer-spin-button { transform: rotate(45deg); } +.radio .radiomark:after { + width: 12px; + height: 12px; + top: 50%; + left: 50%; + margin: -6px; + border-radius: 50%; + background: var(--c-f); +} + .h { font-size: 13px; text-align: center; @@ -873,7 +901,93 @@ input[type=number]::-webkit-outer-spin-button { border-radius: 20px; text-align: left; transition: background-color 0.5s; - filter: brightness(1); + filter: brightness(1); +} + +.list { + position: relative; + transition: background-color 0.5s; + margin: auto auto 10px; + padding-bottom: 10px; + width: 230px; +} + +.lstI { + overflow: hidden; +} + +.fxbtn { + margin: 20px auto; + padding: 8px 0; +} + +.lstI:hover { + background: var(--c-4); +} + +.lstI:last-child { + border: none; +} + +.lstI.sticky, .lstI.selected { + position: sticky; + z-index: 1; +} + +#selectPalette .lstI.selected { + top: 27px; + bottom: -11px; +} + +#selectPalette .lstI.sticky { + top: -11px; +} + +.lstI.selected { + background: var(--c-5); + top: 95px; + bottom: -11px; +} + +.lstI.sticky { + top: 57px; +} + +.lstIname { + margin: 3px 0; + white-space: nowrap; + cursor: pointer; + font-size: 19px; +} + +.lstIprev { + width: 100%; + height: 5px; + margin: auto; + position: absolute; + bottom: 0px; + left: 0px; +} + +input[type="text"].search { + display: block; + width: 230px; + box-sizing: border-box; + padding: 8px 8px 9px 38px; + margin: 6px auto 0 auto; + text-align: left; + background: url("data:image/svg+xml;utf8,") + no-repeat 10px 10px; + background-size: 20px; + background-color: var(--c-3); +} + +input[type="text"].search:focus { + background-color: var(--c-4); +} + +input[type="text"].search:not(:placeholder-shown) { + background-color: var(--c-5); } .pres { @@ -906,7 +1020,7 @@ input[type=number]::-webkit-outer-spin-button { width: 6px; } ::-webkit-scrollbar-track { - background: transparent; + background: transparent; } ::-webkit-scrollbar-thumb { background: var(--c-sb); @@ -947,4 +1061,4 @@ input[type=number]::-webkit-outer-spin-button { #buttonPcm { display: none; } -} \ No newline at end of file +} diff --git a/wled00/data/index.htm b/wled00/data/index.htm index c981c9dfed..8560ee14fa 100644 --- a/wled00/data/index.htm +++ b/wled00/data/index.htm @@ -88,13 +88,33 @@ -
Color palette
- - + Color palette +
+Effect mode
-