Compare commits

..

4 commits

3 changed files with 35 additions and 17 deletions

View file

@ -23,7 +23,6 @@
<button>⏭️</button>
</div>
<div>
<label for="progress"></label>
<input type="range" id="progress" name="progress" min="0" max="100" value="0">
</div>
</div>
@ -51,8 +50,7 @@
</div>
</div>
<div id="volume-control">
<label for="volume"></label>
<input id="volume" name="volume" type="range" min="1" max="100">
<input id="volume" name="volume" type="range" min="1" max="100" value="50">
</div>
</div>
<div class="track-info">

View file

@ -20,7 +20,6 @@ input[type="range"]:focus {
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
height: 5px;
width: 70px;
border: 1px solid #1a2445;
border-right-color: #3a506b;
border-bottom-color: #3a506b;
@ -54,9 +53,12 @@ input[type="range"]:focus::-webkit-slider-thumb {
/* slider track */
input[type="range"]::-moz-range-track {
background-color: #053a5f;
border-radius: 0.5rem;
height: 0.5rem;
height: 5px;
border: 1px solid #1a2445;
border-right-color: #3a506b;
border-bottom-color: #3a506b;
background-color: #2e2e27;
background-repeat: repeat-x;
}
/* slider thumb */
@ -65,9 +67,13 @@ input[type="range"]::-moz-range-thumb {
border-radius: 0; /*Removes default border-radius that FF applies*/
/* custom styles */
background-color: #5cd5eb;
height: 2rem;
width: 1rem;
height: 11px;
margin-top: -4px;
width: 5px;
background: #640000;
border: 1px solid #812b25;
border-right-color: #21110f;
border-bottom-color: #21110f;
}
input[type="range"]:focus::-moz-range-thumb {

View file

@ -15,11 +15,23 @@ div {
button {
background-color: #28374a;
color: #bbb;
border-left-color: #545454;
border-top-color: #545454;
border-right-color: #3a3a3a;
border-bottom-color: #3A3A3A;
}
input {
input[type=text] {
background-color: #28374a;
color: white;
border: 1px solid black;
border-left-color: black;
border-top-color: black;
border-right-color:#545454;
border-bottom-color: #545454;
}
table {
@ -120,10 +132,12 @@ td.playing {
#progress {
margin-left: 10px;
width: 90%;
}
#volume {
margin-left: 10px;
width: 90%;
}
#queue-volume-controls {