cccb/sanic
cccb/sanic
11
1
Fork 0
Code Issues 5 Pull requests Packages Projects 1 Releases Activity

Compare commits

base: cccb:5f78ea39c8075d72a534a20064abfa6b671bbea4
Branches Tags
cccb:main
cccb:grid
..
compare: cccb:170324134a2f9c15eaf109cd95d5eba910e98edf
Branches Tags
cccb:main
cccb:grid

No commits in common. "5f78ea39c8075d72a534a20064abfa6b671bbea4" and "170324134a2f9c15eaf109cd95d5eba910e98edf" have entirely different histories.
5f78ea39c8 ... 170324134a

3 changed files with 17 additions and 35 deletions
Show stats Expand all files Collapse all files

4
static/flexbox/index.html
View file

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

32
static/flexbox/rangeinput.css
View file

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

16
static/flexbox/sanic.css
View file

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