diff options
Diffstat (limited to 'web/pw-visualizer/src/style.css')
| -rw-r--r-- | web/pw-visualizer/src/style.css | 309 |
1 files changed, 309 insertions, 0 deletions
diff --git a/web/pw-visualizer/src/style.css b/web/pw-visualizer/src/style.css new file mode 100644 index 0000000..8c5119e --- /dev/null +++ b/web/pw-visualizer/src/style.css @@ -0,0 +1,309 @@ + * { + margin: 0; + padding: 0; + } + + body { + background-color: #333; + } + + p { + padding: 3px 0; + } + + #wrapper { + max-height: 100%; + min-height: 100%; + width: 100%; + height: 100%; + display: flex; + } + + #main { + height: 100%; + flex-grow: 1; + position: relative; + } + + #name { + position: absolute; + top: 10px; + left: 10px; + color: white; + } + + #meta { + padding: 10px 2%; + color: white; + position: absolute; + bottom: 0; + width: 96%; + } + + .options { + background-color: black; + max-width: 300px; + width: 20%; + min-width: 150px; + height: 100%; + display: flex; + flex-direction: column; + overflow-y: auto; + } + + .option { + color: white; + margin: 0 0 20px 0; + padding: 10px; + background-color: #333; + } + + .option:last-child { + margin: 0; + } + + .option:hover { + background-color: #777; + } + + .lds-roller { + display: none; + } + + .loading>.lds-roller { + display: inline-block; + } + + .lds-roller { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 80px; + height: 80px; + } + + .lds-roller div { + animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + transform-origin: 40px 40px; + } + + .lds-roller div:after { + content: " "; + display: block; + position: absolute; + width: 7px; + height: 7px; + border-radius: 50%; + background: #fff; + margin: -4px 0 0 -4px; + } + + .lds-roller div:nth-child(1) { + animation-delay: -0.036s; + } + + .lds-roller div:nth-child(1):after { + top: 63px; + left: 63px; + } + + .lds-roller div:nth-child(2) { + animation-delay: -0.072s; + } + + .lds-roller div:nth-child(2):after { + top: 68px; + left: 56px; + } + + .lds-roller div:nth-child(3) { + animation-delay: -0.108s; + } + + .lds-roller div:nth-child(3):after { + top: 71px; + left: 48px; + } + + .lds-roller div:nth-child(4) { + animation-delay: -0.144s; + } + + .lds-roller div:nth-child(4):after { + top: 72px; + left: 40px; + } + + .lds-roller div:nth-child(5) { + animation-delay: -0.18s; + } + + .lds-roller div:nth-child(5):after { + top: 71px; + left: 32px; + } + + .lds-roller div:nth-child(6) { + animation-delay: -0.216s; + } + + .lds-roller div:nth-child(6):after { + top: 68px; + left: 24px; + } + + .lds-roller div:nth-child(7) { + animation-delay: -0.252s; + } + + .lds-roller div:nth-child(7):after { + top: 63px; + left: 17px; + } + + .lds-roller div:nth-child(8) { + animation-delay: -0.288s; + } + + .lds-roller div:nth-child(8):after { + top: 56px; + left: 12px; + } + + @keyframes lds-roller { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + #speed { + width: 100px; + } + + #canvas { + position: relative; + background-color: black; + width: 100%; + 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. + * See http://animista.net/license for more info. + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + /** + * ---------------------------------------- + * animation slide-top + * ---------------------------------------- + */ + + @-webkit-keyframes slide-top { + 0% { + -webkit-transform: translate(-50%, 50%); + transform: translate(-50%, 50%); + } + 100% { + -webkit-transform: translate(-50%, -150%); + transform: translate(-50%, -150%); + } + } + + @keyframes slide-top { + 0% { + -webkit-transform: translate(-50%, 50%); + transform: translate(-50%, 50%); + } + 100% { + -webkit-transform: translate(-50%, -150%); + 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; + } + + ::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 10px; + background-color: #444; + border-radius: 10px; + } + + ::-webkit-scrollbar { + width: 10px; + background-color: #444; + } + + ::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: #F90; + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent) + }
\ No newline at end of file |