restyle turn progress bar
This commit is contained in:
parent
4aa8ca8303
commit
3afa795cf5
2 changed files with 73 additions and 70 deletions
|
@ -57,10 +57,12 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="meta">
|
<div id="meta">
|
||||||
<div id="turnCounter">0 / 0</div>
|
<div class="infocontainer">
|
||||||
<div>
|
<div id="turnCounter">0 / 0</div>
|
||||||
<span>Ms per frame: </span>
|
<div>
|
||||||
<input type="number" id="speed" value="300" />
|
<span>Ms per frame: </span>
|
||||||
|
<input type="number" id="speed" value="300" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slidecontainer">
|
<div class="slidecontainer">
|
||||||
<input type="range" min="0" max="1" value="1" class="slider" id="turnSlider" />
|
<input type="range" min="0" max="1" value="1" class="slider" id="turnSlider" />
|
||||||
|
|
|
@ -20,11 +20,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#meta {
|
#meta {
|
||||||
padding: 10px 2%;
|
|
||||||
color: white;
|
color: white;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 96%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.options {
|
.options {
|
||||||
|
@ -52,6 +51,71 @@
|
||||||
.option:hover {
|
.option:hover {
|
||||||
background-color: #777;
|
background-color: #777;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.infocontainer {
|
||||||
|
padding: 10px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.slidecontainer {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
width: 100%;
|
||||||
|
height: 12px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
border-top: 1px solid black;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Chrome*/
|
||||||
|
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||||
|
.slider {
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background-color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .slider::-webkit-slider-runnable-track {
|
||||||
|
height: 12px;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: -1px;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.slider::-webkit-slider-thumb {
|
||||||
|
width: 18px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
cursor: ew-resize;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/** FF*/
|
||||||
|
.slider::-moz-range-thumb {
|
||||||
|
background: #fff;
|
||||||
|
border: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.slider::-moz-range-progress {
|
||||||
|
background-color: #0073e5;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.slider::-moz-range-track {
|
||||||
|
background-color: #000000;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.lds-roller {
|
.lds-roller {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -178,29 +242,7 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button::before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
margin: 0 -20px 0 0;
|
|
||||||
font-family: 'fontawesome';
|
|
||||||
content: "\f1e1";
|
|
||||||
transform: translate(-1em, 0px);
|
|
||||||
color: antiquewhite;
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:hover::before {
|
|
||||||
color: #ff7f00;
|
|
||||||
}
|
|
||||||
/* ----------------------------------------------
|
/* ----------------------------------------------
|
||||||
* Generated by Animista on 2019-9-17 14:35:13
|
* Generated by Animista on 2019-9-17 14:35:13
|
||||||
* Licensed under FreeBSD License.
|
* Licensed under FreeBSD License.
|
||||||
|
@ -234,44 +276,3 @@
|
||||||
transform: translate(-50%, -150%);
|
transform: translate(-50%, -150%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/**
|
|
||||||
* ----------------------------------------
|
|
||||||
* Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp
|
|
||||||
* ----------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
.slidecontainer {
|
|
||||||
margin-top: 10px;
|
|
||||||
width: 100%;
|
|
||||||
/* Width of the outside container */
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
width: 100%;
|
|
||||||
height: 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: #d3d3d3;
|
|
||||||
outline: none;
|
|
||||||
opacity: 0.7;
|
|
||||||
-webkit-transition: .2s;
|
|
||||||
transition: opacity .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
width: 25px;
|
|
||||||
height: 25px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #ff7000;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider::-moz-range-thumb {
|
|
||||||
width: 25px;
|
|
||||||
height: 25px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #ff7000;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in a new issue