Compare commits
4 commits
170324134a
...
5f78ea39c8
Author | SHA1 | Date | |
---|---|---|---|
coon | 5f78ea39c8 | ||
coon | f8ab9ae20b | ||
coon | 7c1089197f | ||
coon | 3f8abb8924 |
|
@ -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">
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue