diff --git a/wled00/data/simple.css b/wled00/data/simple.css index a7a5c6033..87eecee73 100644 --- a/wled00/data/simple.css +++ b/wled00/data/simple.css @@ -102,7 +102,7 @@ button:hover { .label { margin: 0; - padding: 8px 0 2px 0; + padding: 6px 0 0; } #namelabel { @@ -135,6 +135,7 @@ button:hover { line-height: 1; display: inline-block; margin: -2px 0 4px 0; + text-shadow: -1px -1px 0 var(--c-3), 1px -1px 0 var(--c-3), -1px 1px 0 var(--c-3), 1px 1px 0 var(--c-3); } .huge { @@ -378,8 +379,9 @@ img { .sliderwrap { height: 30px; - width: 225px; + width: 250px; position: relative; + margin: 4px 0; } #Colors .sliderwrap { width: 260px; @@ -389,8 +391,8 @@ img { .sliderdisplay { content:''; position: absolute; - top: 13px; left: 8px; right: 8px; - height: 4px; + top: 10px; left: 8px; right: 8px; + height: 8px; background: var(--c-4); border-radius: 16px; pointer-events: none; @@ -452,37 +454,53 @@ input[type=range]::-webkit-slider-runnable-track { background: transparent; } input[type=range]::-webkit-slider-thumb { - height: 16px; - width: 16px; + border: 2px solid #000; + height: 20px; + width: 20px; border-radius: 50%; background: var(--c-f); cursor: pointer; -webkit-appearance: none; - margin-top: 7px; + margin-top: 4px; } input[type=range]::-moz-range-track { width: 100%; height: 30px; - background-color: rgba(0, 0, 0, 0); + background-color: var(--c-0); } input[type=range]::-moz-range-thumb { - border: 0px solid rgba(0, 0, 0, 0); - height: 16px; - width: 16px; + border: 2px solid var(--c-3); + height: 20px; + width: 20px; border-radius: 50%; background: var(--c-f); transform: translateY(5px); } #Colors input[type=range]::-webkit-slider-thumb { - height: 18px; - width: 18px; border: 2px solid #000; - margin-top: 5px; } #Colors input[type=range]::-moz-range-thumb { border: 2px solid var(--c-1); } +#Presets .list { + max-height: 215px; + overflow-y: scroll; + overflow-x: hidden; + width: 280px; + margin: 0 0 0 20px; + -ms-overflow-style: none; + scrollbar-width: none; /* Firefox */ +} +/* Hide scrollbar for Chrome, Safari and Opera */ +#Presets .list::-webkit-scrollbar { + display: none; +} + +#Segments .sliderwrap{ + width: 225px; +} + #picker, #rgbwrap, #kwrap, #vwrap, #wwrap, #wbal { display: none; } @@ -530,6 +548,7 @@ input[type=range]::-moz-range-thumb { width: 42px; height: 42px; margin: 4px; + padding: 0; } #fxBtn, #palBtn { @@ -609,6 +628,7 @@ input[type=number]::-webkit-outer-spin-button { width: 44px; height: 44px; margin: 5px; + padding: 0; } .xxs-w { @@ -616,6 +636,7 @@ input[type=number]::-webkit-outer-spin-button { margin: 2px; width: 50px; height: 50px; + padding: 0; } .qcs, .xxs { @@ -629,7 +650,6 @@ input[type=number]::-webkit-outer-spin-button { .pwr { color: var(--c-6); - /*transform: translate(2px, 3px);*/ cursor: pointer; } @@ -645,8 +665,8 @@ input[type=number]::-webkit-outer-spin-button { } .schkl { - padding: 2px 2px 2px 16px; - margin: 0; + width: 24px; + top: -2px; } .check input, .radio input { @@ -785,20 +805,17 @@ input[type=number]::-webkit-outer-spin-button { position: absolute; width: 284px; z-index: 1; - height: 266px; + height: 260px; overflow-y: scroll; overflow-x: hidden; padding: 0 18px; margin-top: 10px; + -ms-overflow-style: none; + scrollbar-width: none; /* Firefox */ } - -.fndIcn { /* needed for magnifier SVG, can be removed when magnifier is in Wicons font */ - width: 24px; - height: 24px; - stroke: var(--c-e); - stroke-width: 3px; - fill-opacity: 0; - margin-top: 1px; +/* Hide scrollbar for Chrome, Safari and Opera */ +.dd-content::-webkit-scrollbar { + display: none; } .fnd { @@ -809,39 +826,44 @@ input[type=number]::-webkit-outer-spin-button { margin: 0 auto; } -div.fnd div { +.search-icon { position: absolute; top: 10px; left: 13px; + pointer-events: none; + width: 24px; + height: 24px; + margin-top: -1px; z-index: 1; } -div.fnd span { +.clear-icon { position: absolute; display: none; top: 10px; right: 13px; cursor: pointer; + margin-top: -1px; z-index: 1; } -input[type="text"].fnd { +input[type=text].fnd { display: block; width: 100%; box-sizing: border-box; - padding: 8px 44px 8px 44px; + padding: 8px 48px 8px 48px; margin: 5px auto 0; text-align: left; - border-radius: 20px; + border-radius: 25px; background-color: var(--c-2); border: 1px solid var(--c-4); } -input[type="text"].fnd:focus { +input[type=text].fnd:focus { background-color: var(--c-4); } -input[type="text"].fnd:not(:placeholder-shown), input[type="text"].fnd:hover { +input[type=text].fnd:not(:placeholder-shown), input[type=text].fnd:hover { background-color: var(--c-3); } diff --git a/wled00/data/simple.htm b/wled00/data/simple.htm index d9d60c61c..2789f51bc 100644 --- a/wled00/data/simple.htm +++ b/wled00/data/simple.htm @@ -61,7 +61,7 @@ - +

Global brightness

@@ -79,43 +79,47 @@
-
-
-
-
-
-
-

-
-
-
-
-
R
-
-