restyle turn progress bar

This commit is contained in:
Ilion Beyst 2022-11-15 22:31:50 +01:00
parent 4aa8ca8303
commit 3afa795cf5
2 changed files with 73 additions and 70 deletions

View file

@ -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:&nbsp;</span> <div>
<input type="number" id="speed" value="300" /> <span>Ms per frame:&nbsp;</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" />

View file

@ -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;
}