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

CSS optimisation

Browse Source
This commit is contained in:
Blaz Kristan 2023-10-17 20:55:10 +02:00
parent a49b49aaa9
commit afa7be6fdc
2 changed files with 1829 additions and 1830 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
wled00/data/index.css
View File

@ -20,8 +20,8 @@
--c-g: #2c1; --c-g: #2c1;
--c-l: #48a; --c-l: #48a;
--c-y: #a90; --c-y: #a90;
--t-b: 0.5; --t-b: .5;
--c-o: rgba(34, 34, 34, 0.9); --c-o: rgba(34, 34, 34, .9);
--c-tb : rgba(34, 34, 34, var(--t-b)); --c-tb : rgba(34, 34, 34, var(--t-b));
--c-tba: rgba(102, 102, 102, var(--t-b)); --c-tba: rgba(102, 102, 102, var(--t-b));
--c-tbh: rgba(51, 51, 51, var(--t-b)); --c-tbh: rgba(51, 51, 51, var(--t-b));
@ -33,7 +33,7 @@
--bbp: 9px 0 7px 0; --bbp: 9px 0 7px 0;
--bhd: none; --bhd: none;
--sgp: "block"; --sgp: "block";
--bmt: 0px; --bmt: 0;
} }
html { html {
@ -88,7 +88,7 @@ a, a:visited {
} }
button { button {
outline: none; outline: 0;
cursor: pointer; cursor: pointer;
} }
@ -238,7 +238,7 @@ button {
.flr { .flr {
color: var(--c-f); color: var(--c-f);
transform: rotate(0deg); transform: rotate(0deg);
transition: transform 0.3s; transition: transform .3s;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -258,13 +258,13 @@ button {
#liveview { #liveview {
height: 4px; height: 4px;
width: 100%; width: 100%;
border: 0px; border: 0;
} }
#liveview2D { #liveview2D {
height: 90%; height: 90%;
width: 90%; width: 90%;
border: 0px; border: 0;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -287,8 +287,8 @@ button {
.tab button { .tab button {
background-color: transparent; background-color: transparent;
float: left; float: left;
border: none; border: 0;
transition: color 0.3s, background-color 0.3s; transition: color .3s, background-color .3s;
font-size: 17px; font-size: 17px;
color: var(--c-c); color: var(--c-c);
min-width: 44px; min-width: 44px;
@ -301,7 +301,7 @@ button {
.bot button { .bot button {
padding: var(--bbp); padding: var(--bbp);
width:25%; width: 25%;
margin: 0; margin: 0;
} }
@ -336,7 +336,7 @@ button {
width: 100%; width: 100%;
width: calc(100%/var(--n)); width: calc(100%/var(--n));
box-sizing: border-box; box-sizing: border-box;
border: 0px; border: 0;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
height: 100%; height: 100%;
@ -389,8 +389,8 @@ button {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 11; z-index: 11;
opacity: 0.95; opacity: .95;
transition: 0.7s; transition: .7s;
pointer-events: none; pointer-events: none;
} }
@ -457,7 +457,7 @@ button {
padding: 4px 2px; padding: 4px 2px;
position: relative; position: relative;
opacity: 1; opacity: 1;
transition: opacity 0.5s linear, height 0.5s, transform 0.5s; transition: opacity .5s linear, height .5s, transform .5s;
} }
.filter { .filter {
@ -466,7 +466,7 @@ button {
} }
/* Tooltip text */ /* Tooltip text */
.slider .tooltiptext, .option .tooltiptext, .filter .tooltiptext { .tooltiptext {
visibility: hidden; visibility: hidden;
background-color: var(--c-5); background-color: var(--c-5);
/*border: 2px solid var(--c-2);*/ /*border: 2px solid var(--c-2);*/
@ -480,28 +480,28 @@ button {
width: 160px; width: 160px;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: 80%; bottom: 120%;
transform: translate(-50%, 0%);
left: 50%; left: 50%;
margin-left: -92px;
/* Ensure tooltip goes away when mouse leaves control */ /* Ensure tooltip goes away when mouse leaves control */
pointer-events: none; pointer-events: none;
/* Fade in tooltip */ /* Fade in tooltip */
opacity: 0; opacity: 0;
transition: opacity 0.75s; transition: opacity .75s;
} }
.option .tooltiptext, .filter .tooltiptext { .slider .tooltiptext {
bottom: 120%; bottom: 100%;
} }
.filter .ttfirst { .ttfirst {
margin-left: -40px; transform: translateX(-20%);
} }
.filter .ttlast { .ttlast {
margin-left: -140px; transform: translateX(-80%);
} }
/* Tooltip arrow */ /* Tooltip arrow */
.slider .tooltiptext::after, .option .tooltiptext::after, .filter .tooltiptext::after { .tooltiptext::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 100%; top: 100%;
@ -511,14 +511,14 @@ button {
border-style: solid; border-style: solid;
border-color: var(--c-5) transparent transparent transparent; border-color: var(--c-5) transparent transparent transparent;
} }
.filter .ttfirst::after { .ttfirst::after {
left: 15%; left: 20%;
} }
.filter .ttlast::after { .ttlast::after {
left: 75%; left: 80%;
} }
/* Show the tooltip text when you mouse over the tooltip container */ /* Show the tooltip text when you mouse over the tooltip container */
.slider:hover .tooltiptext, .option .check:hover .tooltiptext, .filter .check:hover .tooltiptext { .slider:hover .tooltiptext, .check:hover .tooltiptext {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
@ -527,7 +527,7 @@ button {
visibility: hidden; /* hide it */ visibility: hidden; /* hide it */
opacity: 0; /* make it transparent */ opacity: 0; /* make it transparent */
transform: scaleY(0); /* shrink content */ transform: scaleY(0); /* shrink content */
height: 0px; /* force other elements to move */ height: 0; /* force other elements to move */
padding: 0; /* remove empty space */ padding: 0; /* remove empty space */
} }
@ -555,24 +555,24 @@ button {
#toast.show { #toast.show {
opacity: 1; opacity: 1;
animation: fadein 0.5s, fadein 0.5s 2.5s reverse; animation: fadein .5s, fadein .5s 2.5s reverse;
} }
#toast.error { #toast.error {
opacity: 1; opacity: 1;
background-color: #b21; background-color: #b21;
animation: fadein 0.5s; animation: fadein .5s;
} }
.modal { .modal {
position:fixed; position: fixed;
left: 0px; left: 0;
bottom: 0px; bottom: 0;
right: 0px; right: 0;
top: calc(var(--th) - 1px); top: calc(var(--th) - 1px);
background-color: var(--c-o); background-color: var(--c-o);
transform: translateY(100%); transform: translateY(100%);
transition: transform 0.4s; transition: transform .4s;
padding: 8px; padding: 8px;
font-size: 20px; font-size: 20px;
overflow: auto; overflow: auto;
@ -654,7 +654,7 @@ button {
} }
#heart { #heart {
transition: color 0.9s; transition: color .9s;
font-size: 16px; font-size: 16px;
color: #f00; color: #f00;
} }
@ -733,7 +733,7 @@ input[type=range] {
} }
input[type=range]:focus { input[type=range]:focus {
outline: none; outline: 0;
} }
input[type=range]::-webkit-slider-runnable-track { input[type=range]::-webkit-slider-runnable-track {
width: 100%; width: 100%;
@ -756,7 +756,7 @@ input[type=range]::-moz-range-track {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
input[type=range]::-moz-range-thumb { input[type=range]::-moz-range-thumb {
border: 0px solid rgba(0, 0, 0, 0); border: 0 solid rgba(0, 0, 0, 0);
height: 16px; height: 16px;
width: 16px; width: 16px;
border-radius: 50%; border-radius: 50%;
@ -802,11 +802,11 @@ input[type=range]::-moz-range-thumb {
color: var(--c-d); color: var(--c-d);
cursor: pointer; cursor: pointer;
border-radius: 25px; border-radius: 25px;
transition-duration: 0.3s; transition-duration: .3s;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
backface-visibility: hidden; backface-visibility: hidden;
transform:translate3d(0,0,0); transform: translate3d(0,0,0);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
border: 1px solid var(--c-3); border: 1px solid var(--c-3);
@ -906,13 +906,13 @@ select {
cursor: pointer; cursor: pointer;
border: 0 solid var(--c-2); border: 0 solid var(--c-2);
border-radius: 20px; border-radius: 20px;
transition-duration: 0.5s; transition-duration: .5s;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
backface-visibility: hidden; backface-visibility: hidden;
transform:translate3d(0,0,0); transform: translate3d(0,0,0);
text-overflow: ellipsis; text-overflow: ellipsis;
} }
#tt { #tt {
@ -955,13 +955,13 @@ input[type=number],
input[type=text] { input[type=text] {
background: var(--c-3); background: var(--c-3);
color: var(--c-f); color: var(--c-f);
border: 0px solid var(--c-2); border: 0 solid var(--c-2);
border-radius: 10px; border-radius: 10px;
padding: 8px; padding: 8px;
/*margin: 6px 6px 6px 0;*/ /*margin: 6px 6px 6px 0;*/
font-size: 19px; font-size: 19px;
transition: background-color 0.2s; transition: background-color .2s;
outline: none; outline: 0;
-webkit-appearance: textfield; -webkit-appearance: textfield;
-moz-appearance: textfield; -moz-appearance: textfield;
appearance: textfield; appearance: textfield;
@ -1001,7 +1001,7 @@ textarea {
height: 90px; height: 90px;
border-radius: 5px; border-radius: 5px;
border: 2px solid var(--c-5); border: 2px solid var(--c-5);
outline: none; outline: 0;
resize: none; resize: none;
font-size: 19px; font-size: 19px;
padding: 5px; padding: 5px;
@ -1054,7 +1054,7 @@ textarea {
top: 1px; top: 1px;
} }
.plname { .plname {
top:0; top: 0;
} }
/* preset id number */ /* preset id number */
@ -1134,8 +1134,8 @@ textarea {
} }
.revchkl { .revchkl {
padding: 4px 0px 0px 35px; padding: 4px 0 0 35px;
margin-bottom: 0px; margin-bottom: 0;
margin-top: 8px; margin-top: 8px;
} }
@ -1231,9 +1231,9 @@ TD .checkmark, TD .radiomark {
.seg, .pres { .seg, .pres {
background-color: var(--c-2); background-color: var(--c-2);
/*color: var(--c-f);*/ /* seems to affect only the Add segment button, which should be same color as reset segments */ /*color: var(--c-f);*/ /* seems to affect only the Add segment button, which should be same color as reset segments */
border: 0px solid var(--c-f); border: 0 solid var(--c-f);
text-align: left; text-align: left;
transition: background-color 0.5s; transition: background-color .5s;
border-radius: 21px; border-radius: 21px;
} }
@ -1250,8 +1250,8 @@ TD .checkmark, TD .radiomark {
/* checkmark labels */ /* checkmark labels */
.filter .fchkl, .option .ochkl { .filter .fchkl, .option .ochkl {
display: inline-block; display: inline-block;
min-width: 0.7em; min-width: .7em;
padding: 1px 4px 4px 32px; padding: 1px 4px 1px 32px;
text-align: left; text-align: left;
line-height: 24px; line-height: 24px;
vertical-align: middle; vertical-align: middle;
@ -1276,7 +1276,7 @@ TD .checkmark, TD .radiomark {
/* list wrapper */ /* list wrapper */
.list { .list {
position: relative; position: relative;
transition: background-color 0.5s; transition: background-color .5s;
margin: auto auto 10px; margin: auto auto 10px;
line-height: 24px; line-height: 24px;
} }
@ -1326,7 +1326,7 @@ TD .checkmark, TD .radiomark {
.lstI.sticky, .lstI.sticky,
.lstI.selected { .lstI.selected {
z-index: 1; z-index: 1;
box-shadow: 0px 0px 10px 4px var(--c-1); box-shadow: 0 0 10px 4px var(--c-1);
} }
#pcont .selected:not([class*="expanded"]) { #pcont .selected:not([class*="expanded"]) {
@ -1470,7 +1470,7 @@ TD .checkmark, TD .radiomark {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: var(--c-sb); background: var(--c-sb);
opacity: 0.2; opacity: .2;
border-radius: 5px; border-radius: 5px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {

3537
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff