diff --git a/static/flexbox/index.html b/static/flexbox/index.html
index fa7826b..009c080 100644
--- a/static/flexbox/index.html
+++ b/static/flexbox/index.html
@@ -3,6 +3,7 @@
Sanic - Flexbox layout
+
@@ -23,7 +24,7 @@
-
+
diff --git a/static/flexbox/rangeinput.css b/static/flexbox/rangeinput.css
new file mode 100644
index 0000000..73a4ffd
--- /dev/null
+++ b/static/flexbox/rangeinput.css
@@ -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;
+}
diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css
index 25e8f96..7d77655 100644
--- a/static/flexbox/sanic.css
+++ b/static/flexbox/sanic.css
@@ -118,6 +118,14 @@ td.playing {
width: 160px;
}
+#progress {
+ margin-left: 10px;
+}
+
+#volume {
+ margin-left: 10px;
+}
+
#queue-volume-controls {
width: 150px;
}