audio-vis/out/theme/style.css

1 line
12 KiB
CSS
Raw Permalink Normal View History

2020-08-07 19:31:30 +02:00
@charset "UTF-8";*{box-sizing:border-box}:focus{outline:0}body,html{padding:0;margin:0;overflow:hidden;font-size:16px;font-family:sans-serif;background-color:#303030;background-repeat:no-repeat;background-position:center;background-size:cover;width:100vw;height:100vh}div{position:fixed;color:#fff;padding:1em}.hide{display:none!important}.icon{width:1em;height:1em;vertical-align:middle;font-size:1em;shape-rendering:geometricPrecision;transition:transform .5s cubic-bezier(.22,.61,.36,1);stroke-width:5px;text-align:center;display:block}::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-button{width:15px;height:15px}::-webkit-scrollbar-thumb{background:#e1e1e1;border:0 none #fff;border-radius:100px}::-webkit-scrollbar-thumb:hover{background:#fff}::-webkit-scrollbar-thumb:active{background:#3949ab}::-webkit-scrollbar-track{background:#666;border:0 none #fff;border-radius:46px}::-webkit-scrollbar-track:hover{background:#666}::-webkit-scrollbar-track:active{background:#666}::-webkit-scrollbar-corner{background:0 0}canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none}group{display:block;padding-bottom:10px;user-select:none}group-label{display:block;border-bottom:1px solid #fff;font-size:21px;font-weight:500;user-select:none}group-input{display:flex;align-items:center;margin-top:5px;user-select:none}group-input label{padding-right:10px;user-select:none;width:150px}group-input input{flex-grow:1;user-select:none;max-width:150px}group-input button{border:1px solid #dcdcdc;background-color:transparent;color:#fff;margin-left:5px}.closed{transform:translateX(-350px);transition:all .5s}.top-menu-left{display:flex}.top-menu-left div{position:relative}.loading-screen{z-index:100;background-color:#000;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column}.loading-screen span{font-family:monospace;font-size:4vw;z-index:2}.loading-screen loader{position:absolute;top:calc(6vw + 10px);left:0;right:0;bottom:0;margin:auto;display:block;width:30vw;height:6px;transform:scaleX(0);transform-origin:left;background-color:#3949ab;animation:loadingBar 2s infinite}.loading-screen loader.delay{background-color:rgba(0,110,168,.24);filter:blur(1px);animation-delay:.05s}@keyframes loadingBar{0%,100%{transform:scaleX(0) scaleY(0)}50%{transform:scaleX(1) scaleY(1);transform-origin:left}100%,51%{transform-origin:right}}.grey-screen{position:fixed;top:0;left:0;background-color:rgba(0,0,0,.5);width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;z-index:100}.grey-screen.hide{display:none!important}modal-footer playlist{flex-direction:row-reverse;flex-wrap:wrap}modal-footer playlist .pagination{margin-left:auto}#image-upload form{display:flex;flex-direction:column;width:90%;margin:10px auto}.audio-item{display:flex;flex-direction:column}.audio-item .artist{font-size:.75em;color:#dcdcdc}.now-playing{font-size:.8em;display:block;margin-bottom:10px}.menus{z-index:10}body.fullscreen .menus{display:none}.help-list{display:flex;flex-direction:column}.help-list .item{padding:0 1em}.help-list .item:not(:last-child){border-bottom:1px solid #232323}.help-list .item .h2{font-size:1.2em;margin:10px 0 5px;display:block}.help-list .item p{font-size:.8em;color:#aaa}.range{-webkit-appearance:none;width:100%;margin:5px 0}.range.center{margin-left:auto;margin-right:auto}.range.right{margin-left:10%}.range:focus{outline:0}.range::-webkit-slider-runnable-track{width:100%;height:5px;cursor:pointer;background:rgba(0,0,0,.12);border-radius:15px;border:none}.range::-webkit-slider-thumb{border:0 solid rgba(0,0,30,0);height:15px;width:15px;border-radius:15px;background:#ff0089;cursor:pointer;-webkit-appearance:none;margin-top:-5px}.range:focus::-webkit-slider-runnable-track{background:rgba(89,89,89,.12)}.range::-moz-range-track{width:100%;height:5px;cursor:pointer;background:rgba(0,0,0,.12);border-radius:15px;border:none}.range::-moz-range-thumb{border:0 solid rgba(0,0,30,0);height:15px;width:15px;border-radius:15px;background:#ff0089;cursor:pointer}.range::-ms-track{width:100%;h