From 1b694b3a9e10054179c1d3007ad0a5de89aa1ebc Mon Sep 17 00:00:00 2001 From: coon Date: Fri, 1 Dec 2023 21:53:51 +0100 Subject: [PATCH] static: add custom style to range input control --- static/flexbox/index.html | 3 +- static/flexbox/rangeinput.css | 77 +++++++++++++++++++++++++++++++++++ static/flexbox/sanic.css | 8 ++++ 3 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 static/flexbox/rangeinput.css 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; }