broodjeaap/streamwatcher
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fancied up the slider a bit

Browse source
This commit is contained in:
BroodjeAap 2020-08-09 14:50:10 +00:00
parent c9edab1d7d
commit 5b26865959
3 changed files with 100 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
static/css/slider.css Executable file
View file

@ -0,0 +1,93 @@
input[type=range].moment-range {
width: 100%;
margin: 13.8px 0;
background-color: transparent;
-webkit-appearance: none;
padding-left: 1%;
padding-right: 1%;
}
input[type=range].moment-range:focus {
outline: none;
}
input[type=range].moment-range::-webkit-slider-runnable-track {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 1.3px;
width: 100%;
height: 8.4px;
cursor: pointer;
}
input[type=range].moment-range::-webkit-slider-thumb {
margin-top: -14px;
width: 16px;
height: 36px;
background: #ffffff;
border: 1px solid #000000;
border-radius: 3px;
cursor: pointer;
-webkit-appearance: none;
}
input[type=range].moment-range:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range].moment-range::-moz-range-track {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 1.3px;
width: 100%;
height: 8.4px;
cursor: pointer;
}
input[type=range].moment-range::-moz-range-thumb {
width: 16px;
height: 36px;
background: #ffffff;
border: 1px solid #000000;
border-radius: 3px;
cursor: pointer;
}
input[type=range].moment-range::-ms-track {
background: transparent;
border-color: transparent;
border-width: 14.8px 0;
color: transparent;
width: 100%;
height: 8.4px;
cursor: pointer;
}
input[type=range].moment-range::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
}
input[type=range].moment-range::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
}
input[type=range].moment-range::-ms-thumb {
width: 16px;
height: 36px;
background: #ffffff;
border: 1px solid #000000;
border-radius: 3px;
cursor: pointer;
margin-top: 0px;
/*Needed to keep the Edge thumb centred*/
}
input[type=range].moment-range:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range].moment-range:focus::-ms-fill-upper {
background: #367ebd;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
/* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
input[type=range].moment-range {
margin: 0;
/*Edge starts the margin from the thumb, not the track as other browsers do*/
}
}

1
static/css/style.css
View file

@ -45,6 +45,7 @@
.content {
flex-basis: 80%;
padding-left: 5%;
padding-right: 5%;
}
.content-header {

5
templates/moments.html
View file

@ -1,13 +1,16 @@
{{template "base" .}}
{{define "head"}}
<script src="/static/js/moments.js"></script>
<link rel="stylesheet" href="/static/css/slider.css">
{{end}}
{{define "content"}}
<img src="#" id="moment_current_image">
<div class="flex-row">
<input type="button" onclick="play_moment()" value="Play">
<input type="button" onclick="pause_moment()" value="Pause">
<input type="range" min="0" max="1" value="0" id="moment_slider">
<input type="range" min="0" max="1" value="0" class="moment-range" id="moment_slider">
</div>
<table class="pure-table pure-table-horizontal pure-table-striped">
<thead>
<th>Moment</th>