1 line
8.1 KiB
CSS
1 line
8.1 KiB
CSS
.btn,.switch label .switch-button{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:center;font-size:15px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}.btn:before,.switch label .switch-button:before{content:"";width:100%;height:calc(100% - 6px);position:absolute;bottom:0;left:0;z-index:100;border-radius:8px;background-color:#694f9b}.btn:after,.switch label .switch-button:after{content:"";width:100%;height:calc(100% - 6px);position:absolute;top:0;left:0;z-index:200;border-radius:7px;background-color:#927de4;transition:transform .04s ease-out .2s,background 0s .2s}.btn .label,.switch label .switch-button .label{height:calc(100% - 6px);display:flex;align-items:center;margin-top:-6px;position:relative;z-index:300;font-weight:600;font-size:15px;color:#fffbe9;text-transform:uppercase;transition:transform .04s ease-out .2s;will-change:transform}.btn:active:after,.switch:active label .switch-button:after,.switch label .switch-button:active:after{transform:translateY(3px);background-color:#6c619a;border-radius:8px;transition:transform 0s,background 0s .01s}.btn:active .label,.switch:active label .switch-button .label,.switch label .switch-button:active .label{transform:translateY(3px);color:#fffbe8;transition:transform 0s,background 0s .01s}.btn[disabled],.switch[disabled] label .switch-button,.switch label .switch-button[disabled]{cursor:default}.btn[disabled]:before,.switch[disabled] label .switch-button:before,.switch label .switch-button[disabled]:before{background-color:#999}.btn[disabled]:after,.switch[disabled] label .switch-button:after,.switch label .switch-button[disabled]:after{background-color:#ddd;transition:transform 0s,background 0s 0s}.btn[disabled] .label,.switch[disabled] label .switch-button .label,.switch label .switch-button[disabled] .label{transition:transform 0s,background 0s 0s}.btn[disabled]:active:after,.switch:active label .switch-button[disabled]:after,.switch[disabled]:active label .switch-button:after,.switch[disabled] label .switch-button:active:after,.switch label .switch-button[disabled]:active:after{transform:translatey(0);background-color:#ddd;transition:transform 0s,background 0s 0s}.btn[disabled]:active .label,.switch:active label .switch-button[disabled] .label,.switch[disabled]:active label .switch-button .label,.switch[disabled] label .switch-button:active .label,.switch label .switch-button[disabled]:active .label{transform:translatey(0);transition:transform 0s,background 0s 0s}.btn.border,.switch label .border.switch-button{background:#1b001c;border:2px solid #1b001c;border-radius:9px}.switch input[type=checkbox]{display:none}.switch label{display:flex;align-items:center;cursor:pointer}.switch label .switch-button{flex-shrink:0;flex-grow:0}.switch label .switch-label{color:#4d4131;font-weight:600;margin-top:-6px;margin-left:10px;font-size:15px;text-transform:uppercase}.switch:active label{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}.switch[disabled] label{cursor:default}.flip-switch input[type=checkbox]{display:none}.flip-switch input[type=checkbox]:checked+label:before{opacity:0}.flip-switch input[type=checkbox]:checked+label:after{transform:translateX(22px)}.flip-switch label{width:46px;height:18px;display:block;position:relative;cursor:pointer;background:#927de4;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(105,79,155,.4)}.flip-switch label:before{content:"";width:100%;height:100%;position:absolute;left:0;background:#ddd;border-radius:9px;transition:opacity .1s ease;box-shadow:inset 0 0 0 1px hsla(0,0%,60%,.4)}.flip-switch label:after{content:"";width:24px;height:24px;border-radius:50%;background:#694f9b;position:absolute;left:0;margin:-3px 0 -3px;transition:transform .1s ease}body,html{width:100%;height:100%;margin:0;padding:0;overflow:hidden}body{position:fixed;font-family:Source Sans Pro,Arial,sans-serif;font-size:17px;font-weight:400;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.loading-screen{background-color:#380028;width:100%;height:100%;position:absolute;z-index:20000;display:flex;justify-content:center;align-items:center}.loading-screen .loading-screen-container{display:flex;flex-direction:column;justify-content:center}.loading-screen .loading-screen-container img{width:200px;height:100px;margin:0 auto;order:1}.loading-screen .loading-screen-container .btn,.loading-screen .loading-screen-container .switch label .switch-button,.switch label .loading-screen .loading-screen-container .switch-button{width:150px;height:54px;border:0;margin:50px auto auto auto;order:2}.loading-screen-container .btn:before,.loading-screen-container .switch label .switch-button:before,.switch label .loading-screen-container .switch-button:before{background-color:#999;transition:background-color .25s ease-out}.loading-screen-container .btn:after,.loading-screen-container .switch label .switch-button:after,.switch label .loading-screen-container .switch-button:after{background-color:#ddd;transition:transform .04s ease-out .2s,background 0s .2s,background-color .25s ease-out}.loading-screen-container .btn .loading-screen-button-animation,.loading-screen-container .switch label .switch-button .loading-screen-button-animation,.switch label .loading-screen-container .switch-button .loading-screen-button-animation{opacity:1;transition:opacity .25s ease-out}.loading-screen-container .btn .label,.loading-screen-container .switch label .switch-button .label,.switch label .loading-screen-container .switch-button .label{opacity:0;transition:opacity .15s ease-out .35s}.loading-screen-container .btn.js-ready:before,.loading-screen-container .switch label .js-ready.switch-button:before,.switch label .loading-screen-container .js-ready.switch-button:before{background-color:#694f9b}.loading-screen-container .btn.js-ready:after,.loading-screen-container .switch label .js-ready.switch-button:after,.switch label .loading-screen-container .js-ready.switch-button:after{background-color:#927de4}.loading-screen-container .btn.js-ready .loading-screen-button-animation,.loading-screen-container .switch label .js-ready.switch-button .loading-screen-button-animation,.switch label .loading-screen-container .js-ready.switch-button .loading-screen-button-animation{opacity:0;display:none}.loading-screen-container .btn.js-ready .label,.loading-screen-container .switch label .js-ready.switch-button .label,.switch label .loading-screen-container .js-ready.switch-button .label{opacity:1}.loading-screen-button-animation{display:inline-block;position:absolute;width:58px;height:30px;top:0;right:0;bottom:0;left:0;margin:auto;z-index:1000}.loading-screen-button-animation div{position:absolute;top:11px;width:7px;height:7px;border-radius:50%;background:#d79f47;-webkit-animation-timing-function:cubic-bezier(0,1,1,0);animation-timing-function:cubic-bezier(0,1,1,0)}.loading-screen-button-animation div:first-child{left:6px;-webkit-animation:loading-screen-button-animation1 .6s infinite;animation:loading-screen-button-animation1 .6s infinite}.loading-screen-button-animation div:nth-child(2){left:6px}.loading-screen-button-animation div:nth-child(2),.loading-screen-button-animation div:nth-child(3){-webkit-animation:loading-screen-button-animation2 .6s infinite;animation:loading-screen-button-animation2 .6s infinite}.loading-screen-button-animation div:nth-child(3){left:26px}.loading-screen-button-animation div:nth-child(4){left:45px;-webkit-animation:loading-screen-button-animation3 .6s infinite;animation:loading-screen-button-animation3 .6s infinite}@-webkit-keyframes loading-screen-button-animation1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes loading-screen-button-animation1{0%{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes loading-screen-button-animation3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes loading-screen-button-animation3{0%{transform:scale(1)}to{transform:scale(0)}}@-webkit-keyframes loading-screen-button-animation2{0%{transform:translate(0)}to{transform:translate(19px)}}@keyframes loading-screen-button-animation2{0%{transform:translate(0)}to{transform:translate(19px)}} |