1 line
12 KiB
CSS
1 line
12 KiB
CSS
@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%;height:5px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.range::-ms-fill-lower{background:rgba(0,0,0,.12);border:none;border-radius:30px}.range::-ms-fill-upper{background:rgba(0,0,0,.12);border:none;border-radius:30px}.range::-ms-thumb{border:0 solid rgba(0,0,30,0);height:15px;width:15px;border-radius:15px;background:#ff0089;cursor:pointer}.range:focus::-ms-fill-lower{background:rgba(0,0,0,.12)}.range:focus::-ms-fill-upper{background:rgba(89,89,89,.12)}.input{width:100%;position:relative;display:inline-block;margin-top:1rem;background-color:transparent}.input-range{margin-bottom:20px}input:focus+.input:after{width:100%}.input input:not([type=range]){border:none;border-bottom:2px solid #dcdcdc;position:relative;width:100%;background-color:transparent;padding:5px;color:#fff}.input input:not([type=range]):focus{outline:0}.input.center{margin-left:auto;margin-right:auto}.input.right{margin-left:10%}.input-label{display:none}.floating-label .input-label{display:block;position:absolute;top:0;transition:.4s cubic-bezier(.25,.8,.25,1);pointer-events:none;border-bottom:1px solid transparent}.floating-label input:focus~.input-label,.floating-label input:valid~.input-label{transform:translateY(-.72rem);color:#5ff507;font-size:.7rem}.floating-label input:valid~.input-label{transform:translateY(-.72rem);color:#ff0089;font-size:.7rem}.focus{content:'';width:0;background-color:#ff0089;position:absolute;bottom:0;left:0;right:0;margin:auto;height:2px;transition:.4s cubic-bezier(.8,.4,.25,1)}input:focus~.focus{width:100%}*{box-sizing:border-box}switch{display:flex;flex-direction:row;padding:5px}switch input{position:absolute;appearance:none;opacity:0}switch input:checked+label:after{transform:translateX(20px)}switch span{margin-left:10px}switch label{display:block;border-radius:10px;width:40px;height:20px;background-color:#dcdcdc;position:relative;cursor:pointer;padding:0}switch label:after{content:'';background-color:#3949ab;position:absolute;top:2px;left:2px;height:16px;width:16px;border-radius:10px;transition:.5s}input[type=file]{position:fixed;left:-100000vw;height:1px;width:1px}input[type=color]{opacity:0}.color-picker{position:relative}.color-picker input{position:absolute!important;top:0}.colorBlob{display:block;width:100%;height:20px;margin:5px 0}.button{text-align:center;user-select:none;border-radius:5px;border:1px solid #3949ab;padding:.5em 1em;cursor:pointer;transition:.5s}.button.spaced{margin-bottom:10px}.button:hover{border-color:#ff0089;border-radius:7px;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.input .current,.input .max,.input .min{font-size:.8em;color:#ff0089;position:absolute;bottom:-1rem}.input .current{display:block;width:100%;text-align:center}.input .min{left:0}.input .max{right:0}custom-select{width:auto;min-width:200px;display:block}custom-select label{color:#ff0089;font-size:.7rem}custom-select input{display:none}custom-select .label{padding:10px 30px 10px 10px;cursor:pointer;position:relative;transition:all .3s;box-shadow:inset 0 0 3px #5e5e5e}custom-select .label::after{content:'';border:solid #dcdcdc;border-width:0 3px 3px 0;display:inline-block;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg);transition:all .3s ease-in-out;position:absolute;right:10px;top:calc(50% - 6px)}custom-select custom-options{max-height:0;overflow:hidden;transition:all .5s ease;font-size:.9em;display:block;border:1px solid transparent}custom-select custom-option{display:block;width:100%;padding:10px 5px;cursor:pointer;box-shadow:0 -1px 0 0 rgba(0,0,0,.08)}custom-select custom-option:hover{background-color:#3949ab;color:#fff}custom-select custom-option.active{font-weight:700}custom-select.open .label{background-color:rgba(0,0,0,.1)}custom-select.open .label::after{transform:rotate(-135deg);-webkit-transform:rotate(-135deg);top:calc(50% - 3px)}custom-select.open custom-options{max-height:none;border:1px solid #1b1b1b!important}.controls{right:0;display:flex}.controls button,.menu-icon{background-color:rgba(33,33,33,.6);border:none;font-size:1.4em;border-top:4px solid #3949ab;padding:1.5rem;cursor:pointer;color:#fff;transition:.5s}.controls button.active,.menu-icon.active{border-color:#ff0089}.controls button:hover,.menu-icon:hover{background-color:rgba(21,21,21,.7);border-color:#5ff507}playlist{display:flex;flex-direction:column}playlist div{padding:unset;position:unset}playlist .playlist-content h1{padding:0 1em}playlist .pagination{display:flex;justify-content:flex-end;font-size:1.5em;padding:5px}playlist .pagination .current{font-size:.9em}playlist .pagination .item{cursor:pointer;user-select:none;border-radius:5px;margin:0 3px;display:flex;align-items:center}playlist .pagination .item.inactive{color:#aaa;pointer-events:none;cursor:not-allowed}playlist .pagination .item:hover{color:#3949ab}playlist .playlist-item{display:flex;padding:5px;box-shadow:0 -1px 0 0 rgba(0,0,0,.08);cursor:pointer;transition:.5s}playlist .playlist-item.active{background-color:rgba(0,0,0,.2)}playlist .playlist-item.active .playlist-item-title:before{content:'🔊 ';padding-right:5px}playlist .playlist-item-title{margin-left:10px;padding:5px;display:flex;align-items:center}playlist .playlist-item-number{padding:5px 10px 5px 5px;width:50px;display:flex;align-items:center}playlist .playlist-item:hover{background-color:rgba(0,0,0,.4)}#modal{max-width:860px;width:90%;background-color:#303030;padding:unset;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);border-radius:15px;overflow:hidden}#modal.lightMode{background-color:rgba(0,0,0,.1)}#modal div{position:unset}#modal header{height:50px;font-size:30px;line-height:50px;padding-left:10px;overflow:hidden;background-color:#212121;display:flex;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}#modal header .headline{flex-grow:1}#modal header .close{margin-right:10px;font-size:24px;cursor:pointer}#modal header .close:hover{color:#3949ab}#modal modal-content{display:block;max-height:calc(100vh - 200px);overflow:auto}#modal modal-footer{display:block;box-shadow:0 -3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}#modal modal-footer .inner{padding:5px;width:calc(100% - 40px);margin:0 auto}.notification{right:10px;top:0;height:100%;display:flex;flex-direction:column-reverse;width:90%;max-width:400px;pointer-events:none}.notification .notification-item{margin-top:10px}.notification div{position:unset;padding:unset}.notification div.notification-item{position:relative}.notification-item{width:100%;border-radius:5px;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);overflow:hidden}.notification-item.success{background-color:rgba(74,177,11,.6)}.notification-item.error{background-color:rgba(255,50,50,.6)}.notification-item.warning{background-color:rgba(255,177,89,.6)}.notification-item.info{background-color:rgba(71,73,171,.6)}.notification-item .message{padding:1em}.notification-item .fade-bar{animation:fadeOut ease-in-out 3s;height:100%;width:100%;position:absolute;top:0;z-index:-1;opacity:.4;transform-origin:left}.notification-item .fade-bar:after{content:'';z-index:1;bottom:0;height:4px;width:100%;position:absolute;background-color:#fff}.notification-item .fade-bar.endless{animation:endlessFade ease-in-out .5s infinite}.notification-item .fade-bar.success{background-color:#60ff00}.notification-item .fade-bar.error{background-color:#fa0000}.notification-item .fade-bar.warning{background-color:#f70}.notification-item .fade-bar.info{background-color:#3949ab}@keyframes fadeOut{from{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes endlessFade{0%{transform:scaleX(1);transform-origin:right}49%{transform-origin:right}50%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1)}}.config-nav{display:flex;flex-direction:row;background-color:#1b1b1b;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.config-nav div{padding:10px 5px;cursor:pointer;user-select:none;border-bottom:1px solid transparent}.config-nav div.active{border-color:#5ff507}.config-nav div:hover{background-color:rgba(0,0,0,.4)}.config-content{padding:1em;min-height:200px}.config-content .visuals{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around}.config-content .visuals .visual-item{display:flex;align-items:center;justify-content:center;padding:1em;min-width:100px;min-height:100px;background-color:#212121;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);transition:.5s;cursor:pointer}.config-content .visuals .visual-item:hover{background-color:#1b1b1b}.config-content .visuals .visual-item.active{border:1px solid #3949ab} |