CSS optimisation
This commit is contained in:
Blaz Kristan
parent
a49b49aaa9
commit
afa7be6fdc
@ -20,8 +20,8 @@
|
||||
--c-g: #2c1;
|
||||
--c-l: #48a;
|
||||
--c-y: #a90;
|
||||
--t-b: 0.5;
|
||||
--c-o: rgba(34, 34, 34, 0.9);
|
||||
--t-b: .5;
|
||||
--c-o: rgba(34, 34, 34, .9);
|
||||
--c-tb : rgba(34, 34, 34, var(--t-b));
|
||||
--c-tba: rgba(102, 102, 102, var(--t-b));
|
||||
--c-tbh: rgba(51, 51, 51, var(--t-b));
|
||||
@ -33,7 +33,7 @@
|
||||
--bbp: 9px 0 7px 0;
|
||||
--bhd: none;
|
||||
--sgp: "block";
|
||||
--bmt: 0px;
|
||||
--bmt: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
@ -88,7 +88,7 @@ a, a:visited {
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -238,7 +238,7 @@ button {
|
||||
.flr {
|
||||
color: var(--c-f);
|
||||
transform: rotate(0deg);
|
||||
transition: transform 0.3s;
|
||||
transition: transform .3s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -258,13 +258,13 @@ button {
|
||||
#liveview {
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
border: 0px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#liveview2D {
|
||||
height: 90%;
|
||||
width: 90%;
|
||||
border: 0px;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@ -287,8 +287,8 @@ button {
|
||||
.tab button {
|
||||
background-color: transparent;
|
||||
float: left;
|
||||
border: none;
|
||||
transition: color 0.3s, background-color 0.3s;
|
||||
border: 0;
|
||||
transition: color .3s, background-color .3s;
|
||||
font-size: 17px;
|
||||
color: var(--c-c);
|
||||
min-width: 44px;
|
||||
@ -336,7 +336,7 @@ button {
|
||||
width: 100%;
|
||||
width: calc(100%/var(--n));
|
||||
box-sizing: border-box;
|
||||
border: 0px;
|
||||
border: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
@ -389,8 +389,8 @@ button {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 11;
|
||||
opacity: 0.95;
|
||||
transition: 0.7s;
|
||||
opacity: .95;
|
||||
transition: .7s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -457,7 +457,7 @@ button {
|
||||
padding: 4px 2px;
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s linear, height 0.5s, transform 0.5s;
|
||||
transition: opacity .5s linear, height .5s, transform .5s;
|
||||
}
|
||||
|
||||
.filter {
|
||||
@ -466,7 +466,7 @@ button {
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.slider .tooltiptext, .option .tooltiptext, .filter .tooltiptext {
|
||||
.tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: var(--c-5);
|
||||
/*border: 2px solid var(--c-2);*/
|
||||
@ -480,28 +480,28 @@ button {
|
||||
width: 160px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 80%;
|
||||
bottom: 120%;
|
||||
transform: translate(-50%, 0%);
|
||||
left: 50%;
|
||||
margin-left: -92px;
|
||||
|
||||
/* Ensure tooltip goes away when mouse leaves control */
|
||||
pointer-events: none;
|
||||
|
||||
/* Fade in tooltip */
|
||||
opacity: 0;
|
||||
transition: opacity 0.75s;
|
||||
transition: opacity .75s;
|
||||
}
|
||||
.option .tooltiptext, .filter .tooltiptext {
|
||||
bottom: 120%;
|
||||
.slider .tooltiptext {
|
||||
bottom: 100%;
|
||||
}
|
||||
.filter .ttfirst {
|
||||
margin-left: -40px;
|
||||
.ttfirst {
|
||||
transform: translateX(-20%);
|
||||
}
|
||||
.filter .ttlast {
|
||||
margin-left: -140px;
|
||||
.ttlast {
|
||||
transform: translateX(-80%);
|
||||
}
|
||||
/* Tooltip arrow */
|
||||
.slider .tooltiptext::after, .option .tooltiptext::after, .filter .tooltiptext::after {
|
||||
.tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
@ -511,14 +511,14 @@ button {
|
||||
border-style: solid;
|
||||
border-color: var(--c-5) transparent transparent transparent;
|
||||
}
|
||||
.filter .ttfirst::after {
|
||||
left: 15%;
|
||||
.ttfirst::after {
|
||||
left: 20%;
|
||||
}
|
||||
.filter .ttlast::after {
|
||||
left: 75%;
|
||||
.ttlast::after {
|
||||
left: 80%;
|
||||
}
|
||||
/* 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;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -527,7 +527,7 @@ button {
|
||||
visibility: hidden; /* hide it */
|
||||
opacity: 0; /* make it transparent */
|
||||
transform: scaleY(0); /* shrink content */
|
||||
height: 0px; /* force other elements to move */
|
||||
height: 0; /* force other elements to move */
|
||||
padding: 0; /* remove empty space */
|
||||
}
|
||||
|
||||
@ -555,24 +555,24 @@ button {
|
||||
|
||||
#toast.show {
|
||||
opacity: 1;
|
||||
animation: fadein 0.5s, fadein 0.5s 2.5s reverse;
|
||||
animation: fadein .5s, fadein .5s 2.5s reverse;
|
||||
}
|
||||
|
||||
#toast.error {
|
||||
opacity: 1;
|
||||
background-color: #b21;
|
||||
animation: fadein 0.5s;
|
||||
animation: fadein .5s;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
top: calc(var(--th) - 1px);
|
||||
background-color: var(--c-o);
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.4s;
|
||||
transition: transform .4s;
|
||||
padding: 8px;
|
||||
font-size: 20px;
|
||||
overflow: auto;
|
||||
@ -654,7 +654,7 @@ button {
|
||||
}
|
||||
|
||||
#heart {
|
||||
transition: color 0.9s;
|
||||
transition: color .9s;
|
||||
font-size: 16px;
|
||||
color: #f00;
|
||||
}
|
||||
@ -733,7 +733,7 @@ input[type=range] {
|
||||
}
|
||||
|
||||
input[type=range]:focus {
|
||||
outline: none;
|
||||
outline: 0;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
@ -756,7 +756,7 @@ input[type=range]::-moz-range-track {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
input[type=range]::-moz-range-thumb {
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
border: 0 solid rgba(0, 0, 0, 0);
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
@ -802,7 +802,7 @@ input[type=range]::-moz-range-thumb {
|
||||
color: var(--c-d);
|
||||
cursor: pointer;
|
||||
border-radius: 25px;
|
||||
transition-duration: 0.3s;
|
||||
transition-duration: .3s;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
backface-visibility: hidden;
|
||||
@ -906,7 +906,7 @@ select {
|
||||
cursor: pointer;
|
||||
border: 0 solid var(--c-2);
|
||||
border-radius: 20px;
|
||||
transition-duration: 0.5s;
|
||||
transition-duration: .5s;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
-webkit-appearance: none;
|
||||
@ -955,13 +955,13 @@ input[type=number],
|
||||
input[type=text] {
|
||||
background: var(--c-3);
|
||||
color: var(--c-f);
|
||||
border: 0px solid var(--c-2);
|
||||
border: 0 solid var(--c-2);
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
/*margin: 6px 6px 6px 0;*/
|
||||
font-size: 19px;
|
||||
transition: background-color 0.2s;
|
||||
outline: none;
|
||||
transition: background-color .2s;
|
||||
outline: 0;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
@ -1001,7 +1001,7 @@ textarea {
|
||||
height: 90px;
|
||||
border-radius: 5px;
|
||||
border: 2px solid var(--c-5);
|
||||
outline: none;
|
||||
outline: 0;
|
||||
resize: none;
|
||||
font-size: 19px;
|
||||
padding: 5px;
|
||||
@ -1134,8 +1134,8 @@ textarea {
|
||||
}
|
||||
|
||||
.revchkl {
|
||||
padding: 4px 0px 0px 35px;
|
||||
margin-bottom: 0px;
|
||||
padding: 4px 0 0 35px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@ -1231,9 +1231,9 @@ TD .checkmark, TD .radiomark {
|
||||
.seg, .pres {
|
||||
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 */
|
||||
border: 0px solid var(--c-f);
|
||||
border: 0 solid var(--c-f);
|
||||
text-align: left;
|
||||
transition: background-color 0.5s;
|
||||
transition: background-color .5s;
|
||||
border-radius: 21px;
|
||||
}
|
||||
|
||||
@ -1250,8 +1250,8 @@ TD .checkmark, TD .radiomark {
|
||||
/* checkmark labels */
|
||||
.filter .fchkl, .option .ochkl {
|
||||
display: inline-block;
|
||||
min-width: 0.7em;
|
||||
padding: 1px 4px 4px 32px;
|
||||
min-width: .7em;
|
||||
padding: 1px 4px 1px 32px;
|
||||
text-align: left;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
@ -1276,7 +1276,7 @@ TD .checkmark, TD .radiomark {
|
||||
/* list wrapper */
|
||||
.list {
|
||||
position: relative;
|
||||
transition: background-color 0.5s;
|
||||
transition: background-color .5s;
|
||||
margin: auto auto 10px;
|
||||
line-height: 24px;
|
||||
}
|
||||
@ -1326,7 +1326,7 @@ TD .checkmark, TD .radiomark {
|
||||
.lstI.sticky,
|
||||
.lstI.selected {
|
||||
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"]) {
|
||||
@ -1470,7 +1470,7 @@ TD .checkmark, TD .radiomark {
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--c-sb);
|
||||
opacity: 0.2;
|
||||
opacity: .2;
|
||||
border-radius: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
3537
wled00/html_ui.h
3537
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user