diff options
Diffstat (limited to 'web/pw-visualizer/src/style.css')
-rw-r--r-- | web/pw-visualizer/src/style.css | 133 |
1 files changed, 67 insertions, 66 deletions
diff --git a/web/pw-visualizer/src/style.css b/web/pw-visualizer/src/style.css index 02ab069..6ec2694 100644 --- a/web/pw-visualizer/src/style.css +++ b/web/pw-visualizer/src/style.css @@ -20,11 +20,10 @@ } #meta { - padding: 10px 2%; color: white; position: absolute; bottom: 0; - width: 96%; + width: 100%; } .options { @@ -52,6 +51,71 @@ .option:hover { background-color: #777; } + + .infocontainer { + padding: 10px; + position: absolute; + bottom: 14px; + } + + + .slidecontainer { + width: 100%; + } + + .slider { + width: 100%; + height: 12px; + position: absolute; + bottom: 0; + cursor: pointer; + border-top: 1px solid black; + margin: 0; + padding: 0; + } + + /*Chrome*/ + @media screen and (-webkit-min-device-pixel-ratio:0) { + .slider { + overflow: hidden; + -webkit-appearance: none; + background-color: #555; + } + + /* .slider::-webkit-slider-runnable-track { + height: 12px; + -webkit-appearance: none; + color: #fff; + margin-top: -1px; + } */ + + .slider::-webkit-slider-thumb { + width: 18px; + height: 12px; + border-radius: 50%; + -webkit-appearance: none; + cursor: ew-resize; + background: #fff; + } + + } + + + /** FF*/ + .slider::-moz-range-thumb { + background: #fff; + border: 0; + height: 100%; + } + .slider::-moz-range-progress { + background-color: #0073e5; + height: 100%; + } + .slider::-moz-range-track { + background-color: #000000; + height: 100%; + } + .lds-roller { display: none; @@ -178,29 +242,7 @@ height: 100%; } - .button { - position: absolute; - top: 10px; - right: 10px; - width: 0; - height: 0; - } - - .button::before { - content: ""; - display: block; - float: left; - margin: 0 -20px 0 0; - font-family: 'fontawesome'; - content: "\f1e1"; - transform: translate(-1em, 0px); - color: antiquewhite; - font-size: 1.5em; - } - - .button:hover::before { - color: #ff7f00; - } + /* ---------------------------------------------- * Generated by Animista on 2019-9-17 14:35:13 * Licensed under FreeBSD License. @@ -234,44 +276,3 @@ transform: translate(-50%, -150%); } } - /** - * ---------------------------------------- - * Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp - * ---------------------------------------- - */ - - .slidecontainer { - margin-top: 10px; - width: 100%; - /* Width of the outside container */ - } - - .slider { - -webkit-appearance: none; - width: 100%; - height: 15px; - border-radius: 5px; - background: #d3d3d3; - outline: none; - opacity: 0.7; - -webkit-transition: .2s; - transition: opacity .2s; - } - - .slider::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 25px; - height: 25px; - border-radius: 50%; - background: #ff7000; - cursor: pointer; - } - - .slider::-moz-range-thumb { - width: 25px; - height: 25px; - border-radius: 50%; - background: #ff7000; - cursor: pointer; - } |