diff options
Diffstat (limited to 'web/pw-frontend/src/lib/visualizer/style.css')
| -rw-r--r-- | web/pw-frontend/src/lib/visualizer/style.css | 309 |
1 files changed, 0 insertions, 309 deletions
diff --git a/web/pw-frontend/src/lib/visualizer/style.css b/web/pw-frontend/src/lib/visualizer/style.css deleted file mode 100644 index 8c5119e..0000000 --- a/web/pw-frontend/src/lib/visualizer/style.css +++ /dev/null @@ -1,309 +0,0 @@ - * { - 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 |