mirror of
https://git.mirrors.martin98.com/https://github.com/luc-github/ESP3D.git
synced 2025-08-02 23:00:38 +08:00
code cleaning
Use same method as button for home button - so rendering is now identical remove css part for range as not working under IE and Safari 5 will use div / svg and javascript instead
This commit is contained in:
luc lebosse
parent
4830bf3911
commit
2dea6fe379
269
UI/testui.htm
269
UI/testui.htm
@ -1,216 +1,5 @@
|
|||||||
<HTML>
|
<HTML>
|
||||||
<HEAD>
|
<HEAD>
|
||||||
<style>
|
|
||||||
.line > input[type=range] {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
margin: 5px 0 ;
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line{
|
|
||||||
width:300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line > input[type=range]:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.line > input[type=range]::-webkit-slider-runnable-track {
|
|
||||||
width: 300px;
|
|
||||||
height: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
animate: 0.2s;
|
|
||||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
|
||||||
background: linear-gradient(90deg, #4F818F 0.125em, rgba(0, 0, 0, 0) 0.125em) repeat-x 0.5625em 50% #77AEBD;
|
|
||||||
background-size: 0.4em 100%;
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 0.2px solid #010101;
|
|
||||||
}
|
|
||||||
.line > input[type=range]::-webkit-slider-thumb {
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
background: linear-gradient(to top right, rgba(0, 0, 0, 0) 0.64em, #000000 0.64em, #000000 1.28em, rgba(0, 0, 0, 0) 1.28em) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
margin-top: -0.2em;
|
|
||||||
}
|
|
||||||
.line > input[type=range]:focus::-webkit-slider-runnable-track {
|
|
||||||
background: linear-gradient(90deg, #4F818F 0.125em, rgba(0, 0, 0, 0) 0.125em) repeat-x 0.5625em 50% #77AEBD;
|
|
||||||
background-size: 0.4em 100%;
|
|
||||||
}
|
|
||||||
.line > input[type=range]::-moz-range-track {
|
|
||||||
width: 300px;
|
|
||||||
height: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
animate: 0.2s;
|
|
||||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
|
||||||
background: linear-gradient(90deg, #4F818F 0.125em, rgba(0, 0, 0, 0) 0.125em) repeat-x 0.5625em 50% #77AEBD;
|
|
||||||
background-size: 0.4em 100%;
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 0.2px solid #010101;
|
|
||||||
}
|
|
||||||
.line > input[type=range]::-moz-range-thumb {
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
background: linear-gradient(to top right, rgba(0, 0, 0, 0) 0.64em, #000000 0.64em, #000000 1.28em, rgba(0, 0, 0, 0) 1.28em) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
border-radius: 0px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-color:transparent;
|
|
||||||
}
|
|
||||||
.line > input[type=range]::-ms-track {
|
|
||||||
width: 300px;
|
|
||||||
height: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
animate: 0.2s;
|
|
||||||
background: linear-gradient(90deg, #4F818F 0.125em, rgba(0, 0, 0, 0) 0.125em) repeat-x 0.5625em 50% #77AEBD content-box;
|
|
||||||
background-size: 0.4em 100%;
|
|
||||||
border-color: white;
|
|
||||||
border-width: 7px 0;
|
|
||||||
color: transparent;
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
.line > input[type=range]::-ms-fill-lower {
|
|
||||||
background: linear-gradient(90deg, #4F818F 0.125em, rgba(0, 0, 0, 0) 0.125em) repeat-x 0.5625em 50% #77AEBD content-box;
|
|
||||||
background-size: 0.4em 100%;
|
|
||||||
border: 0.2px solid #010101;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
|
||||||
}
|
|
||||||
.line > input[type=range]::-ms-fill-upper {
|
|
||||||
background: linear-gradient(90deg, #4F818F 0.125em, rgba(0, 0, 0, 0) 0.125em) repeat-x 0.5625em 50% #77AEBD content-box;
|
|
||||||
background-size: 0.4em 100%;
|
|
||||||
border: 0.2px solid #010101;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
|
||||||
}
|
|
||||||
.line > input[type=range]::-ms-thumb {
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
background: linear-gradient(to top right, rgba(0, 0, 0, 0) 0.5em, #000000 0.5em, #000000 1.1em, rgba(0, 0, 0, 0) 1.1em) no-repeat content-box;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
border-color:transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.line > input[type=range]:focus::-ms-fill-lower {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.line > input[type=range]:focus::-ms-fill-upper {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.temp > input[type=range] {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
margin: 5px 0 ;
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.temp > input[type=range]:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.temp > input[type=range]::-webkit-slider-runnable-track {
|
|
||||||
width: 300px;
|
|
||||||
height: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
animate: 0.2s;
|
|
||||||
background: linear-gradient(90deg, #0007FE, #00FAFE, #00FF00, #FAFD00, #FE0700);
|
|
||||||
background-size: 100% 100%;
|
|
||||||
border: 0.2px solid #010101;
|
|
||||||
}
|
|
||||||
.temp > input[type=range]::-webkit-slider-thumb {
|
|
||||||
height: 21px;
|
|
||||||
width: 10px;
|
|
||||||
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='21'><path d='M1,0 L4.5,4 L4.5,17 L1,21 L9,21 L5.5,17 L5.5,4 L9,0 z'/></svg>") no-repeat;
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
margin-top: -0.27em;
|
|
||||||
}
|
|
||||||
.temp > input[type=range]:focus::-webkit-slider-runnable-track {
|
|
||||||
background: linear-gradient(90deg, #0007FE, #00FAFE, #00FF00, #FAFD00, #FE0700);
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.temp > input[type=range]::-moz-range-track {
|
|
||||||
width: 300px;
|
|
||||||
height: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
animate: 0.2s;
|
|
||||||
background: linear-gradient(90deg, #0007FE, #00FAFE, #00FF00, #FAFD00, #FE0700);
|
|
||||||
background-size: 100% 100%;
|
|
||||||
border: 0.2px solid #010101;
|
|
||||||
}
|
|
||||||
.temp > input[type=range]::-moz-range-thumb {
|
|
||||||
height: 21px;
|
|
||||||
width: 10px;
|
|
||||||
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='20'><path d='M1,1 L4.5,5 L4.5,16 L1,20 L9,20 L5.5,16 L5.5,5 L9,1 z'/></svg>") no-repeat;
|
|
||||||
border-radius: 0px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-color:transparent;
|
|
||||||
}
|
|
||||||
.temp > input[type=range]::-ms-track {
|
|
||||||
width: 300px;
|
|
||||||
height: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
animate: 0.2s;
|
|
||||||
background: linear-gradient(90deg, #0007FE, #00FAFE, #00FF00, #FAFD00, #FE0700);
|
|
||||||
background-size: 100% 100%;
|
|
||||||
border-color: white;
|
|
||||||
border-width: 7px;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
.temp > input[type=range]::-ms-fill-lower {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.temp > input[type=range]::-ms-thumb {
|
|
||||||
border: transparent;
|
|
||||||
width: 2em;
|
|
||||||
height: 1.25em;;
|
|
||||||
background: linear-gradient(-45deg, rgba(0, 0, 0, 0) 0em, #000000 0em, #000000 0.25em, rgba(0, 0, 0, 0) 0.25em) 1em 0.05em no-repeat, linear-gradient(-135deg, rgba(0, 0, 0, 0) 0em, #000000 0em, #000000 0.25em, rgba(0, 0, 0, 0) 0.25em) no-repeat 1em 0.6em, linear-gradient(45deg, rgba(0, 0, 0, 0) 0em, #000000 0em, #000000 0.25em, rgba(0, 0, 0, 0) 0.25em) no-repeat 0.29em 0em, linear-gradient(135deg, rgba(0, 0, 0, 0) 0em, #000000 0em, #000000 0.25em, rgba(0, 0, 0, 0) 0.25em) no-repeat 0.29em 0.6em;
|
|
||||||
background-size: 0.66667em 50%, 0.66667em 50%, 0.66667em 50%, 0.66667em 50%,0.66667em 50%;
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
.temp{
|
|
||||||
width:300px;
|
|
||||||
}
|
|
||||||
text.slide {
|
|
||||||
font-weight:600;
|
|
||||||
font-size:16;
|
|
||||||
font-family:sans-serif;
|
|
||||||
pointer-events:none;
|
|
||||||
}
|
|
||||||
.lineslidertext{
|
|
||||||
position:relative;
|
|
||||||
text-align:top;
|
|
||||||
top:-1.7em;
|
|
||||||
left:0.7em;
|
|
||||||
width:10em;
|
|
||||||
height:0em;
|
|
||||||
font-size:11;
|
|
||||||
font-family:sans-serif;
|
|
||||||
font-weight: 900;
|
|
||||||
color:#000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tempslidertext{
|
|
||||||
position:relative;
|
|
||||||
text-align:top;
|
|
||||||
top:-1.7em;
|
|
||||||
left:0.7em;
|
|
||||||
width:10em;
|
|
||||||
height:0em;
|
|
||||||
font-size:11;
|
|
||||||
font-family:sans-serif;
|
|
||||||
font-weight: 900;
|
|
||||||
color:#FFFFFF;
|
|
||||||
text-shadow:
|
|
||||||
-1px -1px 0 #000,
|
|
||||||
1px -1px 0 #000,
|
|
||||||
-1px 1px 0 #000,
|
|
||||||
1px 1px 0 #000;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</HEAD>
|
</HEAD>
|
||||||
<BODY>
|
<BODY>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
@ -319,7 +108,7 @@ font-family:sans-serif;
|
|||||||
pointer-events:none;
|
pointer-events:none;
|
||||||
}
|
}
|
||||||
text.home {
|
text.home {
|
||||||
font-weight:600;
|
font-weight:800;
|
||||||
text-anchor:middle;
|
text-anchor:middle;
|
||||||
font-size:14;
|
font-size:14;
|
||||||
font-family:sans-serif;
|
font-family:sans-serif;
|
||||||
@ -365,43 +154,41 @@ fill:#0052E1;
|
|||||||
|
|
||||||
]]>
|
]]>
|
||||||
</style>
|
</style>
|
||||||
<symbol id="homeIcon" viewBox="0 0 40 35">
|
|
||||||
<desc>Home Icon</desc>
|
|
||||||
<path class="bg" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" filter="url(#shadow)"/>
|
|
||||||
<path class="bg" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)"/>
|
|
||||||
<path class="bg" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" opacity=0.7 filter="url(#light)"/>
|
|
||||||
<path class="bg" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" opacity=0.7 filter="url(#light)"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="homeIconmask" viewBox="0 0 40 35">
|
|
||||||
<desc>Home Icon</desc>
|
|
||||||
<path class="msk" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z"/>
|
|
||||||
<path class="msk" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z"/>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
|
|
||||||
</defs>
|
</defs>
|
||||||
|
|
||||||
<g id='homeall' onmouseup="alert('all');" onmouseover="show_hide(maskall,0.5);" onmouseout="show_hide(maskall,0);" >
|
<g id="homeall" transform="translate(10,175)" onmouseup="alert('all');" onmouseover="changecolor(ha1,ha2,ha3,ha4,'#2F65FF');" onmouseout="changecolor(ha1,ha2,ha3,ha4,'#608B98');">
|
||||||
<use opacity=1 x="13" y="175" width="35" height="35" xlink:href="#homeIcon" />
|
<circle cx='17' cy='17' r='18' fill='white' />
|
||||||
<use id="maskall" opacity=0 x="13" y="175" width="35" height="35" xlink:href="#homeIconmask" />
|
<path class="bg" id="ha1" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" filter="url(#shadow)"/>
|
||||||
|
<path class="bg" id="ha2" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" opacity='0.7' filter="url(#light)"/>
|
||||||
|
<path class="bg" id="ha3" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)"/>
|
||||||
|
<path class="bg" id="ha4" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)" opacity='0.7' filter="url(#light)"/>
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<g id='homex' onmouseup="alert('x');" onmouseover="show_hide(maskx,0.5);" onmouseout="show_hide(maskx,0);" >
|
<g id="homex" transform="translate(10,35)" onmouseup="alert('X');" onmouseover="changecolor(hx1,hx2,hx3,hx4,'#2F65FF');" onmouseout="changecolor(hx1,hx2,hx3,hx4,'#608B98');">
|
||||||
<use opacity=1 x="13" y="35" width="35" height="35" xlink:href="#homeIcon" />
|
<circle cx='17' cy='17' r='18' fill='white' />
|
||||||
<use id="maskx" opacity=0 x="13" y="35" width="35" height="35" xlink:href="#homeIconmask" />
|
<path class="bg" id="hx1" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" filter="url(#shadow)"/>
|
||||||
<text x="27.5" y="60" class="home">X</text>
|
<path class="bg" id="hx2" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" opacity='0.7' filter="url(#light)"/>
|
||||||
|
<path class="bg" id="hx3" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)"/>
|
||||||
|
<path class="bg" id="hx4" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)" opacity='0.7' filter="url(#light)"/>
|
||||||
|
<text x="17" y="26" class="home">X</text>
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<g id='homey' onmouseup="alert('y');" onmouseover="show_hide(masky,0.5);" onmouseout="show_hide(masky,0);" >
|
<g id="homey" transform="translate(159,35)" onmouseup="alert('y');" onmouseover="changecolor(hy1,hy2,hy3,hy4,'#2F65FF');" onmouseout="changecolor(hy1,hy2,hy3,hy4,'#608B98');">
|
||||||
<use opacity=1 x="155" y="35" width="35" height="35" xlink:href="#homeIcon" />
|
<circle cx='17' cy='17' r='18' fill='white' />
|
||||||
<use id="masky" opacity=0 x="155" y="35" width="35" height="35" xlink:href="#homeIconmask" />
|
<path class="bg" id="hy1" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" filter="url(#shadow)"/>
|
||||||
<text x="169.5" y="60" class="home"> Y</text>
|
<path class="bg" id="hy2" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" opacity='0.7' filter="url(#light)"/>
|
||||||
|
<path class="bg" id="hy3" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)"/>
|
||||||
|
<path class="bg" id="hy4" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)" opacity='0.7' filter="url(#light)"/>
|
||||||
|
<text x="17" y="26" class="home">Y</text>
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<g id='homez' onmouseup="alert('z');" onmouseover="show_hide(maskz,0.5);" onmouseout="show_hide(maskz,0);" >
|
<g id="homez" transform="translate(159,175)" onmouseup="alert('z');" onmouseover="changecolor(hz1,hz2,hz3,hz4,'#2F65FF');" onmouseout="changecolor(hz1,hz2,hz3,hz4,'#608B98');">
|
||||||
<use opacity=1 x="155" y="175" width="35" height="35" xlink:href="#homeIcon" />
|
<circle cx='17' cy='17' r='18' fill='white' />
|
||||||
<use id="maskz" opacity=0 x="155" y="175" width="35" height="35" xlink:href="#homeIconmask" />
|
<path class="bg" id="hz1" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" filter="url(#shadow)"/>
|
||||||
<text x="169.5" y="200" class="home"> Z</text>
|
<path class="bg" id="hz2" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" opacity='0.7' filter="url(#light)"/>
|
||||||
|
<path class="bg" id="hz3" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)"/>
|
||||||
|
<path class="bg" id="hz4" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)" opacity='0.7' filter="url(#light)"/>
|
||||||
|
<text x="17" y="26" class="home">Z</text>
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<g id="topxy">
|
<g id="topxy">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user