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

static: add custom style to range input control

Browse source
This commit is contained in:
coon 2023-12-01 21:53:51 +01:00
parent 6a00390e53
commit 857638e9db
3 changed files with 87 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
static/flexbox/index.html
View file

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Sanic - Flexbox layout</title> <title>Sanic - Flexbox layout</title>
<link rel="stylesheet" href="rangeinput.css">
<link rel="stylesheet" href="treeview.css"> <link rel="stylesheet" href="treeview.css">
<link rel="stylesheet" href="sanic.css"> <link rel="stylesheet" href="sanic.css">
<script src="sanic.js"></script> <script src="sanic.js"></script>
@ -23,7 +24,7 @@
</div> </div>
<div> <div>
<label for="progress"></label> <label for="progress"></label>
<input type="range" id="progress" name="progress" min="0" max="100"> <input type="range" id="progress" name="progress" min="0" max="100" value="0">
</div> </div>
</div> </div>
<div id="queue-volume-controls"> <div id="queue-volume-controls">

77
static/flexbox/rangeinput.css Normal file
View file

@ -0,0 +1,77 @@
/* https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/ */
/********** Range Input Styles **********/
/* Range Reset */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
}
/* Removes default focus */
input[type="range"]:focus {
outline: none;
}
/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* 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;
background-color: #2e2e27;
background-repeat: repeat-x;
}
/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
margin-top: -12px; /* Centers thumb on the track */
/* custom styles */
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::-webkit-slider-thumb {
border: 1px solid #21110f;
border-right-color: #812b25;
border-bottom-color: #812b25;
}
/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
background-color: #053a5f;
border-radius: 0.5rem;
height: 0.5rem;
}
/* slider thumb */
input[type="range"]::-moz-range-thumb {
border: none; /*Removes extra border that FF applies*/
border-radius: 0; /*Removes default border-radius that FF applies*/
/* custom styles */
background-color: #5cd5eb;
height: 2rem;
width: 1rem;
}
input[type="range"]:focus::-moz-range-thumb {
border: 1px solid #053a5f;
outline: 3px solid #053a5f;
outline-offset: 0.125rem;
}

8
static/flexbox/sanic.css
View file

@ -118,6 +118,14 @@ td.playing {
width: 160px; width: 160px;
} }
#progress {
margin-left: 10px;
}
#volume {
margin-left: 10px;
}
#queue-volume-controls { #queue-volume-controls {
width: 150px; width: 150px;
} }