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 id="meta">
|
||||
<div id="turnCounter">0 / 0</div>
|
||||
<div>
|
||||
<span>Ms per frame: </span>
|
||||
<input type="number" id="speed" value="300" />
|
||||
<div class="infocontainer">
|
||||
<div id="turnCounter">0 / 0</div>
|
||||
<div>
|
||||
<span>Ms per frame: </span>
|
||||
<input type="number" id="speed" value="300" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="slidecontainer">
|
||||
<input type="range" min="0" max="1" value="1" class="slider" id="turnSlider" />
|
||||
|
|
|
@ -20,11 +20,10 @@
|
|||
}
|
||||
|
||||
#meta {
|
||||
padding: 10px 2%;
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 96%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.options {
|
||||
|
@ -52,6 +51,71 @@
|
|||
.option:hover {
|
||||
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 {
|
||||
display: none;
|
||||
|
@ -178,29 +242,7 @@
|
|||
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
|
||||
* Licensed under FreeBSD License.
|
||||
|
@ -234,44 +276,3 @@
|
|||
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