| 1 |
- *{padding:0;margin:0}html,body{width:100%;height:100%;background:#efefef;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}input,textarea{-webkit-user-select:auto;margin:0;padding:0;outline:none}#container{display:flex;flex-direction:column;position:absolute;left:0;top:0;height:100%!important;width:100%}#canvas{width:100%;height:100%;cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEdSURBVEhL3dU/a8JAHMbxIChYlQ52aIeCU6Gbk2+hXcV306lDofSttIvuQsGhk4uLIIiCVVF0KxQ6td9HchDkvDvSdKgPfCC55H4PJP6Jjj4tPKOwO8s4ZSzxjTb+pKSODVTSwf8sKeIVKsi85ARdaPAa2/g4k5IKetBAvexr6HFlUnKKN2jQDFcw+fU7qaIPDZighv2kLjnDANo4wiUOJVXJC7RhiAsteJIsudeCK3l84RPnWghMAyqY7s4cyeEDujkNb4HyBNvmEN5HpOhF6YfNNsDFvORmzBndqA22QTZmeAnzmI6dCS1JfjzvYNZ17I2vJDlcGcNc03FQDpXY/oDeYa7r5yU4+n48YIEVHrE/XLmFBsuNFo4hUfQDRmuR/2vYwfIAAAAASUVORK5CYII=) 24 24,default;z-index:1}#progress-toolbar{height:20px}#toolbar-bottom{position:fixed;bottom:0;left:0;width:100%;text-align:center;z-index:2;pointer-events:none;transition:transform 1s ease-in-out,opacity 1s ease-in-out}.hidden-toolbar-bottom{transform:translateY(100%);opacity:0}.hidden-toolbar-right{transform:translate(150%);opacity:0}#color-btns{display:flex;flex-direction:row;padding:0 10px 10px;overflow-x:scroll;height:60px;align-items:center;gap:10px;-webkit-user-select:none;user-select:none}.color-btn-container{position:relative;min-width:48px;width:48px;height:48px}.color-btn-container-selected{transform:scale(1.2)}.color-btn-progress-ring{width:100%;height:100%}.color-btn-progress-ring-track{transition:none}.color-btn-progress-ring-value{transition:stroke-dashoffset .5s ease-in-out;transform:rotate(-90deg);transform-origin:50% 50%}.color-btn{position:absolute;min-width:40px;width:40px;height:40px;line-height:40px;text-align:center;border-radius:50%;box-shadow:0 4px 12px #00000026;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;box-sizing:border-box;cursor:pointer;pointer-events:auto;transition:all .2s}#progress-wrapper{box-sizing:border-box;display:flex;align-items:center;flex-direction:row;width:100vw;padding-left:10px;padding-right:10px;gap:10px}#progress-bar{box-sizing:border-box;flex-grow:1;overflow:hidden;text-align:left;background-color:#d3d3d3;border-radius:2px;height:4px}#progress{transition:width .5s ease-in-out;width:0%;height:4px;background-color:#07ce07}#percent{font-size:12px;color:#07ce07;line-height:12px;font-weight:500;font-family:Arial,Helvetica,sans-serif}.btn-img{width:100%;height:100%}.btn-img-mask{position:absolute;width:100%;height:100%;top:0%;border-radius:50%;opacity:0;background:#000}@media (hover: hover) and (pointer: fine){.btn-img-mask:hover{opacity:.5}}.btn-img-mask:active{opacity:.5}.btn{z-index:120;width:40px;height:40px;border-radius:50%;box-shadow:0 0 4px #00000029}#goback{position:absolute;left:20px;top:5%}#hint{position:absolute;right:20px;top:5%;opacity:1;transition:transform 1s ease-in-out,opacity 1s ease-in-out}#hint .adtext{position:absolute;width:65%;top:78%;background:#5ac8fa;color:#fff;text-align:center;border-radius:6.5px;font-weight:500;font-size:10px;font-family:PingFangSC-Semibold}#save{position:absolute;bottom:210px;right:20px;opacity:1;transition:transform 1s ease-in-out,opacity 1s ease-in-out}#reduction{position:absolute;bottom:160px;right:20px;opacity:1;transition:transform 1s ease-in-out,opacity 1s ease-in-out}#setting{position:absolute;bottom:110px;right:20px;opacity:1;transition:transform 1s ease-in-out,opacity 1s ease-in-out}.finish-btn{position:absolute;display:none;opacity:0;z-index:90;left:50%;top:70%;transform:translate(-50%);transition:opacity 1s}@media (max-width: 768px){.finish-btn{top:60%}}.star-rating{display:flex;width:200px;align-items:center;flex-direction:row-reverse;justify-content:space-evenly;position:relative;margin:10px auto}.star-rating input{display:none}.star-rating>label{width:36px;height:36px;font-family:Verdana;font-size:36px;font-weight:500;color:#fc0;transition:.2 ease}.star-rating label:before{content:"☆";position:absolute;top:0;line-height:30px}.star-rating input:checked~label:before{content:"★"}@media (hover: hover) and (pointer: fine){.star-rating label:hover{color:orange;transition:color .2s ease}}.star-rating label:active:before{transform:scale(1.1)}@-moz-document url-prefix(){.star-rating input:checked~label:before{font-size:36px;line-height:21px}}.finish-btn .tools{display:flex;align-items:center;flex-direction:row;justify-content:space-evenly}.finish-btn .tools .tools-btn{display:flex;align-items:center;flex-direction:column;position:relative;margin:20px auto;width:40px;height:40px;border-radius:50%;box-shadow:0 0 4px #00000029;color:#999;text-align:center;font-weight:600;font-size:15px;font-family:Arial,Helvetica,sans-serif;cursor:pointer;transition:transform .2s}.finish-btn .tools .tools-btn:hover{transform:translateY(-5px)}.finish-btn .continue{width:315px;height:44px;margin-top:25px;text-align:center;background-image:linear-gradient(-180deg,#ffc787 12%,#ff9274 90%);box-shadow:0 2px 4px #e9b06f80;border-radius:100px;cursor:pointer}.finish-btn .continue p{font-size:17px;color:#fff;font-weight:600;line-height:44px}.finish-ani-wrapper{position:absolute;pointer-events:none;width:95vw;height:95vh;z-index:90;top:0%}.finish-ani-div{position:absolute;width:10px;height:10px;top:0%;opacity:1;z-index:90;transition:top 3s,left 3s,opacity 3s}.finish-ani-canvas{position:fixed;pointer-events:none;bottom:0;z-index:300}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:12px 24px;border-radius:4px;animation:fadeInOut 2.5s;z-index:9999}.toast-hidden{display:none}@keyframes fadeInOut{0%{opacity:0;bottom:-20px}20%{opacity:1;bottom:20px}80%{opacity:1;bottom:20px}to{opacity:0;bottom:-20px}}.action-sheet{position:fixed;bottom:-1000px;right:0;left:0;z-index:1000;background:#fff;box-shadow:0 2px 4px #0000001a;border-radius:6px 6px 0 0;transition:bottom .5s}.action-sheet img{width:24px;height:24px}.action-sheet p{line-height:22px;font-size:15px;font-weight:600;font-family:Arial,Helvetica,sans-serif;color:#333;padding-left:20px}.setting{display:flex;padding-left:5.3%}.setting.hint{margin-top:18px;margin-bottom:15px}.hint-list{width:83%;margin:0 auto;white-space:nowrap;overflow:auto;scrollbar-width:none}.hint-list::-webkit-scrollbar{display:none}.hint-item{display:inline-block;width:34px;height:34px;border:2px solid #EFEFF4;border-radius:50%;margin-left:5px}.line{width:89.4%;height:1px;background:#efeff4;margin:8px auto}.setting.autonext{margin-bottom:10px}.switch{position:absolute;display:inline-block;width:40px;height:22px;right:6%;-webkit-tap-highlight-color:transparent}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#e5e5ea;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:20px;width:20px;left:1px;bottom:1px;top:1px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#ff9500}input:focus+.slider{box-shadow:0 0 1px #ff9500}input:checked+.slider:before{-webkit-transform:translateX(18px);-ms-transform:translateX(18px);transform:translate(18px)}.slider.round{border-radius:10px}.slider.round:before{border-radius:50%}.buld-circle-wrap{position:absolute;left:-100px;top:40%;width:50px;height:50px;background:#c4c4c4;z-index:300;border-radius:50%;border:1px solid transparent;transition:left .5s;animation:buld-scale 2s ease-in-out infinite}@keyframes buld-scale{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@-webkit-keyframes buld-scale{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.buld-circle-wrap .buld-circle .buld-mask,.buld-circle-wrap .buld-circle .buld-fill{width:50px;height:50px;position:absolute;border-radius:50%}.buld-mask .buld-fill{clip:rect(0px,25px,50px,0px);background-color:#1b9619}.buld-circle-wrap .buld-circle .buld-mask{clip:rect(0px,50px,50px,25px)}.buld-mask.buld-full,.buld-circle .buld-fill{transition:transform 10s ease-in-out}@keyframes buld-fill{0%{transform:rotate(0)}to{transform:rotate(180deg)}}@-webkit-keyframes buld-fill{0%{transform:rotate(0)}to{transform:rotate(180deg)}}.buld-circle-wrap .buld-inside-circle{position:absolute;width:42px;height:42px;border-radius:50%;background:#eeb422;line-height:42px;text-align:center;margin-top:4px;margin-left:4px;color:#000;z-index:500;font-weight:500;font-size:20px;font-family:Arial,Helvetica,sans-serif;box-shadow:0 0 4px #00000029}.buld-wrapper{position:absolute;width:78%;height:78%;left:50%;top:50%;transform:translate(-50%,-45%);z-index:1000;animation:buld-wrapper 2s ease-in-out infinite}@keyframes buld-wrapper{0%{top:50%}50%{top:40%}to{top:50%}}@-webkit-keyframes buld-wrapper{0%{top:50%}50%{top:40%}to{top:50%}}.buld-bgimg{position:absolute;width:100%;height:100%}.buld-wrapper p{position:absolute;left:50%;top:50%;transform:translate(-50%,-75%);font-size:15px;font-weight:600;font-family:Arial,Helvetica,sans-serif}.shinning-mask{position:absolute;width:78%;height:78%;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:#eeb422;z-index:600}.shinning{position:absolute;left:50%;top:50%;width:30px;height:1px;margin:0 auto;background:#fcff62;transform-origin:0%;z-index:500;animation:shinning 2s infinite}@keyframes shinning{0%{opacity:0}50%{opacity:1}to{opacity:0}}@-webkit-keyframes shinning{0%{opacity:0}50%{opacity:1}to{opacity:0}}#shinning2{transform:rotate(-20deg)}#shinning3{transform:rotate(-40deg)}#shinning4{transform:rotate(-60deg)}#shinning5{transform:rotate(-80deg)}#shinning6{transform:rotate(-100deg)}#shinning7{transform:rotate(-120deg)}#shinning8{transform:rotate(-140deg)}#shinning9{transform:rotate(-160deg)}#shinning10{transform:rotate(-180deg)}.adtext{position:absolute;color:#a9a9a9;left:50%;top:100%;margin-top:3px;transform:translate(-50%);font-size:12px;font-weight:600;font-family:Arial,Helvetica,sans-serif}.remind{position:absolute;display:none;right:20px;top:5%;width:40px;height:40px;z-index:150;transform:scale(.1)}.remind-bg{width:100%;height:100%}.remind p{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);font-size:15px;font-weight:600;font-family:Arial,Helvetica,sans-serif}.remind.animation{animation:reminder 2s}@keyframes reminder{0%{right:50%;top:50%;transform:scale(3)}40%{right:50%;top:50%;transform:scale(1.5)}65%{right:50%;top:50%;transform:scale(1.5)}to{right:20px;top:5%;transform:scale(.1)}}@-webkit-keyframes reminder{0%{right:50%;top:50%;transform:scale(3)}40%{right:50%;top:50%;transform:scale(1.5)}65%{right:50%;top:50%;transform:scale(1.5)}to{right:20px;top:5%;transform:scale(.1)}}#loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#efefef;z-index:9999;display:none;justify-content:center;align-items:center;transition:opacity .3s}.spinner{width:50px;height:50px;border:5px solid white;border-top:5px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.active{display:flex!important;opacity:1}
|
