lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

JS/CSS optimisations

Browse Source
This commit is contained in:
Blaz Kristan 2022-02-28 23:32:24 +01:00
parent 4d10c9de95
commit 61a01cb163
5 changed files with 4110 additions and 4120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
wled00/data/index.css
View File

@ -565,7 +565,7 @@ output.sliderbubbleshow {
opacity: 1; opacity: 1;
} }
.hidden { #rgbwrap, #kwrap, #wwrap, #wbal {
display: none; display: none;
} }
@ -623,9 +623,6 @@ input[type=range]::-moz-range-thumb {
#Colors input[type=range]::-moz-range-thumb { #Colors input[type=range]::-moz-range-thumb {
border: 2px solid var(--c-1); border: 2px solid var(--c-1);
} }
#kwrap, #wwrap, #wbal {
display: none;
}
.sliderwrap { .sliderwrap {
height: 30px; height: 30px;
@ -651,10 +648,6 @@ input[type=range]::-moz-range-thumb {
width: 260px; width: 260px;
} }
#rgbwrap {
display: none;
}
.btn { .btn {
padding: 8px; padding: 8px;
margin: 10px 4px; margin: 10px 4px;
@ -673,11 +666,11 @@ input[type=range]::-moz-range-thumb {
} }
.btn:hover { .btn:hover {
border: 1px solid var(--c-4); border: 1px solid var(--c-4);
background-color: var(--c-4); background-color: var(--c-5);
} }
.btn { .btn {
border: 1px solid var(--c-3); border: 1px solid var(--c-1);
background-color: var(--c-3); background-color: var(--c-2);
} }
.btn-s { .btn-s {
width: 100%; width: 100%;
@ -728,17 +721,15 @@ input[type=range]::-moz-range-thumb {
margin-top: 5px; margin-top: 5px;
display: none; display: none;
} }
.sel {
margin: 5px 0 10px; select/*, .sel-p, .sel-pl, .sel-ple*/ {
}
.sel-p, .sel-pl, .sel-ple {
padding: 4px; padding: 4px;
margin: 0; margin: 0;
font-size: 19px; font-size: 19px;
background-color: var(--c-3); background-color: var(--c-3);
color: var(--c-d); color: var(--c-d);
cursor: pointer; cursor: pointer;
border: 1px solid var(--c-3); border: 1px solid var(--c-2);
border-radius: 5px; border-radius: 5px;
transition-duration: 0.5s; transition-duration: 0.5s;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
@ -753,7 +744,8 @@ input[type=range]::-moz-range-thumb {
width: 42px; width: 42px;
} }
.sel-p { .sel-p {
width: 4.5em; margin: 5px 0 10px;
width: 5em;
} }
.sel-pl { .sel-pl {
width: 100%; width: 100%;
@ -770,7 +762,7 @@ option {
input[type=number], input[type=text] { input[type=number], input[type=text] {
background: var(--c-3); background: var(--c-3);
color: var(--c-f); color: var(--c-f);
border: 0px solid var(--c-f); border: 1px solid var(--c-2);
border-radius: 5px; border-radius: 5px;
padding: 8px; padding: 8px;
margin: 6px 6px 6px 0; margin: 6px 6px 6px 0;
@ -907,17 +899,16 @@ input[type=number]::-webkit-outer-spin-button {
} }
.check, .radio { .check, .radio {
display: inline-block; display: block;
position: relative; position: relative;
padding-bottom: 32px; padding-bottom: 32px;
margin-bottom: 14px; margin-bottom: 14px;
cursor: pointer; cursor: pointer;
text-align: center;
} }
.schkl { .schkl {
padding: 2px 5px 0px 35px; padding: 2px 0 0;
margin: 0 0 0 2px; margin: 0;
} }
.revchkl { .revchkl {
@ -936,6 +927,8 @@ input[type=number]::-webkit-outer-spin-button {
.checkmark, .radiomark { .checkmark, .radiomark {
position: absolute; position: absolute;
height: 24px;
width: 24px;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -944,14 +937,13 @@ input[type=number]::-webkit-outer-spin-button {
} }
.radiomark { .radiomark {
height: 24px; top: 1px;
width: 24px; height: 22px;
width: 22px;
border-radius: 50%; border-radius: 50%;
} }
.checkmark { .checkmark {
height: 25px;
width: 25px;
border-radius: 10px; border-radius: 10px;
} }
@ -959,24 +951,16 @@ input[type=number]::-webkit-outer-spin-button {
.check:hover input ~ .checkmark { .check:hover input ~ .checkmark {
background-color: var(--c-4); background-color: var(--c-4);
} }
/*
.check input:checked ~ .checkmark {
background-color: var(--c-6);
}
*/
.checkmark:after, .radiomark:after { .checkmark:after, .radiomark:after {
content: ""; content: "";
position: absolute; position: absolute;
display: none; display: none;
} }
.check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after {
display: block;
}
.check .checkmark:after { .check .checkmark:after {
left: 9px; left: 9px;
top: 5px; top: 4px;
width: 5px; width: 5px;
height: 10px; height: 10px;
border: solid var(--c-f); border: solid var(--c-f);
@ -987,11 +971,11 @@ input[type=number]::-webkit-outer-spin-button {
} }
.radio .radiomark:after { .radio .radiomark:after {
width: 12px; width: 14px;
height: 12px; height: 14px;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin: -6px; margin: -7px;
border-radius: 50%; border-radius: 50%;
background: var(--c-f); background: var(--c-f);
} }
@ -1035,10 +1019,6 @@ input[type=number]::-webkit-outer-spin-button {
padding-bottom: 4px; padding-bottom: 4px;
} }
#pcont .pres:hover {
background-color: var(--c-3);
}
.list { .list {
position: relative; position: relative;
width: 280px; width: 280px;
@ -1066,17 +1046,25 @@ input[type=number]::-webkit-outer-spin-button {
background: var(--c-4); background: var(--c-4);
} }
.lstI:hover, #pcont .selected:hover { #pcont .pres:hover, #pcont .selected:hover,
.lstI:hover {
border: 1px solid var(--c-5);
background: var(--c-5); background: var(--c-5);
} }
.selected input[type=number],
.selected input[type=text],
.selected button.btn,
#pcont .expand, #pcont .expand:hover { #pcont .expand, #pcont .expand:hover {
border: 1px solid var(--c-1);
background-color: var(--c-2); background-color: var(--c-2);
} }
.selected .checkmark,
.selected .radiomark,
.selected input[type=number],
.selected input[type=text],
.selected button.btn {
background-color: var(--c-3);
}
.lstI.selected { .lstI.selected {
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -1104,12 +1092,13 @@ input[type=number]::-webkit-outer-spin-button {
} }
.lstIcontent { .lstIcontent {
width: 100%; /*width: 100%;
vertical-align: middle; vertical-align: middle;
padding: 0 20px 0 5px; padding: 0 20px 0 5px;
text-align: left; text-align: left;
display: inline-block; display: inline-block;*/
position: relative; position: relative;
left: 40px;
} }
.lstIname { .lstIname {
@ -1118,10 +1107,11 @@ input[type=number]::-webkit-outer-spin-button {
.lstIprev { .lstIprev {
width: 100%; width: 100%;
height: 8px; height: 7px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: -1;
} }
.fnd { .fnd {
@ -1133,7 +1123,7 @@ input[type="text"].fnd {
display: block; display: block;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 8px 48px 8px 60px; padding: 8px 40px 8px 52px;
margin: 5px auto 0; margin: 5px auto 0;
text-align: left; text-align: left;
border-radius: 25px; border-radius: 25px;
@ -1156,6 +1146,16 @@ input[type="text"].fnd:hover {
display: none; display: none;
} }
.segin .btn {
border: 1px solid var(--c-2);
background-color: var(--c-3);
}
.segin .btn:hover {
border: 1px solid var(--c-4);
background-color: var(--c-5);
}
.check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after,
.expanded { .expanded {
display: block; display: block;
} }

4849
wled00/data/index.js
View File

File diff suppressed because it is too large Load Diff

3264
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff

11
wled00/json.cpp
View File

@ -728,8 +728,7 @@ void serializePalettes(JsonObject root, AsyncWebServerRequest* request)
curPalette.add("c2"); curPalette.add("c2");
curPalette.add("c1"); curPalette.add("c1");
break; break;
case 5: {//primary + secondary (+tert if not off), more distinct case 5: //primary + secondary (+tert if not off), more distinct
curPalette.add("c1"); curPalette.add("c1");
curPalette.add("c1"); curPalette.add("c1");
curPalette.add("c1"); curPalette.add("c1");
@ -746,7 +745,7 @@ void serializePalettes(JsonObject root, AsyncWebServerRequest* request)
curPalette.add("c3"); curPalette.add("c3");
curPalette.add("c3"); curPalette.add("c3");
curPalette.add("c1"); curPalette.add("c1");
break;} break;
case 6: //Party colors case 6: //Party colors
setPaletteColors(curPalette, PartyColors_p); setPaletteColors(curPalette, PartyColors_p);
break; break;
@ -768,14 +767,12 @@ void serializePalettes(JsonObject root, AsyncWebServerRequest* request)
case 12: //Rainbow stripe colors case 12: //Rainbow stripe colors
setPaletteColors(curPalette, RainbowStripeColors_p); setPaletteColors(curPalette, RainbowStripeColors_p);
break; break;
default: default:
if (i < 13) { {
break;
}
byte tcp[72]; byte tcp[72];
memcpy_P(tcp, (byte*)pgm_read_dword(&(gGradientPalettes[i - 13])), 72); memcpy_P(tcp, (byte*)pgm_read_dword(&(gGradientPalettes[i - 13])), 72);
setPaletteColors(curPalette, tcp); setPaletteColors(curPalette, tcp);
}
break; break;
} }
} }

2
wled00/wled.h
View File

@ -8,7 +8,7 @@
*/ */
// version code in format yymmddb (b = daily build) // version code in format yymmddb (b = daily build)
#define VERSION 2202271 #define VERSION 2202281
//uncomment this if you have a "my_config.h" file you'd like to use //uncomment this if you have a "my_config.h" file you'd like to use
//#define WLED_USE_MY_CONFIG //#define WLED_USE_MY_CONFIG