simpread/guide/bundle.css

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font:300 16px/1.8 -apple-system,PingFang SC,Verdana,Helvetica Neue,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;font-size:62.5%;background:#fafafa;text-rendering:optimizelegibility;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}body,html{color:#333}body{margin:0;padding:0;text-align:center;background-color:#fafafa}.intro-tips{position:absolute}.intro-tips[data-hits=toc]{top:415px;left:100px}.intro-tips[data-hits=process]{top:90px;left:420px}.intro-tips[data-hits=trigger]{top:83px;right:130px}.intro-tips[data-hits=readmodefap]{bottom:215px;right:85px}.intro-tips[data-hits=sync]{top:363px;left:457px}.intro-tips[data-hits=config]{top:406px;left:310px}.intro-tips[data-hits=newsites]{top:448px;left:310px}.intro-tips[data-hits=clear]{top:448px;right:310px}.intro-tips[data-hits=readmodestyle]{top:115px;right:415px}.intro-tips[data-hits=readmodecontrol_action]{top:130px;right:415px}.intro-tips[data-hits=readmodecontrol_sites]{top:130px;right:200px}.intro-tips[data-hits=readmodecontrol_plugins]{top:130px;right:140px}.intro-tips[data-hits=focuscontrolbar]{bottom:215px;right:85px}.intro-tips[data-hits=focusmodefab]{bottom:315px;right:125px}.intro-tips[data-hits=common]{top:276px;left:197px}.intro-tips[data-hits=option_simple]{top:276px;left:297px}.intro-tips[data-hits=option_labs]{top:276px;left:397px}.intro-tips[data-hits=option_sites]{top:276px;left:497px}.intro-tips[data-hits=option_plugins]{top:276px;left:567px}.intro-tips[data-hits=option_later]{top:276px;left:657px}.intro-tips[data-hits=option_account]{top:276px;left:757px}.intro-tips[data-hits=option_about]{top:276px;left:857px}.intro-tips[data-hits=option_help]{bottom:255px;right:352px}.intro-tips[data-hits=option_notice]{bottom:130px;right:155px}body{position:relative}kbd{display:inline-block;padding:3px 5px;line-height:10px;font-size:11px;color:#444d56;background-color:#fafbfc;vertical-align:middle;border-radius:3px;-webkit-box-shadow:inset 0 -1px 0 #959da5;box-shadow:inset 0 -1px 0 #959da5}.main{-webkit-box-align:center;-moz-box-align:center;-o-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;min-height:314px;color:#fff;overflow:hidden}.frame,.main{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-o-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}.frame .setps{position:relative;width:1100px}.frame .setps img{max-width:1100px}.controlbar{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-pack:space-evenly;-moz-box-pack:space-evenly;-o-box-pack:space-evenly;-ms-flex-pack:space-evenly;-webkit-justify-content:space-evenly;justify-content:space-evenly}.controlbar button{position:relative;padding:0 16px;width:200px;height:48px;line-height:48px;text-decoration:none;border-radius:2px;color:#fff;background-color:#f44336;font-size:2.4rem;font-family:inherit;outline:none;border:none;overflow:hidden;-webkit-transition:color 1.4s ease-in-out;-moz-transition:color 1.4s ease-in-out;-o-transition:color 1.4s ease-in-out;-ms-transition:color 1.4s ease-in-out;transition:color 1.4s ease-in-out;z-index:1}.controlbar button:before{content:"";z-index:-1;position:absolute;bottom:100%;right:100%;width:200px;height:48px;border-radius:50%;background-color:#b71c1c;-webkit-transform-origin:center;-moz-transform-origin:center;-o-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:translate3d(50%,50%,0) scale3d(0,0,0);-moz-transform:translate3d(50%,50%,0) scale3d(0,0,0);-o-transform:translate3d(50%,50%,0) scale3d(0,0,0);-ms-transform:translate3d(50%,50%,0) scale3d(0,0,0);transform:translate3d(50%,50%,0) scale3d(0,0,0);-webkit-transition:-webkit-transform .4s ease-in-out;-moz-transition:-moz-transform .4s ease-in-out;-o-transition:-o-transform .4s ease-in-out;-ms-transition:-ms-transform .4s ease-in-out;transition:transform .4s ease-in-out}.controlbar button:hover{cursor:pointer;-webkit-box-shadow:0 5px 5px rgba(0,0,0,.3),0 5px 5px rgba(0,0,0,.3);box-shadow:0 5px 5px rgba(0,0,0,.3),0 5px 5px rgba(0,0,0,.3)}.controlbar button:hover:before{-webkit-transform:translate3d(50%,50%,0) scale3d(15,15,15);-moz-transform:translate3d(50%,50%,0) scale3d(15,15,15);-o-transform:translate3d(50%,50%,0) scale3d(15,15,15);-ms-transform:translate3d(50%,50%,0) scale3d(15,15,15);transform:translate3d(50%,50%,0) scale3d(15,15,15)}.controlbar button .group{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-o-box-orient:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-moz-box-pack:center;-o-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-o-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.controlbar button .group .arrow-icon{position:relative;top:-1px;margin:10px;-webkit-transition:-webkit--webkit-transform .3s ease;-moz-transition:-webkit--moz-transform .3s ease;-o-transition:-webkit--o-transform .3s ease;-ms-transition:-webkit--ms-transform .3s ease;transition:-webkit-transform .3s ease;-webkit-transition:-webkit-transform .3s ease;-moz-transition:-moz-transform .3s ease;-o-transition:-o-transform .3s ease;-ms-transition:-ms-transform .3s ease;transition:transform .3s ease;-webkit-transition:-webkit-transform .3s ease,-webkit--webkit-transform .3s ease;-moz-transition:-moz-transform .3s ease,-webkit--moz-transform .3s ease;-o-transition:-o-transform .3s ease,-webkit--o-transform .3s ease;-ms-transition:-ms-transform .3s ease,-webkit--ms-transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;vertical-align:middle}.controlbar button .group .arrow-icon.prev{-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-o-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}.controlbar button .group .arrow-icon--circle{-webkit-transition:stroke-dashoffset .3s ease;-moz-transition:stroke-dashoffset .3s ease;-o-transition:stroke-dashoffset .3s ease;-ms-transition:stroke-dashoffset .3s ease;transition:stroke-dashoffset .3s ease;stroke-dasharray:95;stroke-dashoffset:95}.controlbar button .group:hover .arrow-icon{-webkit-transform:translate3d(5px,0,0);-moz-transform:translate3d(5px,0,0);-o-transform:translate3d(5px,0,0);-ms-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}.controlbar button .group:hover .arrow-icon.prev{-webkit-transform:rotate(-180deg) translate3d(5px,0,0);-moz-transform:rotate(-180deg) translate3d(5px,0,0);-o-transform:rotate(-180deg) translate3d(5px,0,0);-ms-transform:rotate(-180deg) translate3d(5px,0,0);transform:rotate(-180deg) translate3d(5px,0,0)}.controlbar button .group:hover .arrow-icon--circle{stroke-dashoffset:0}.tutorial .title{font-size:3rem;font-weight:500;letter-spacing:2px;padding:40px 0 0}.tutorial .desc{font-size:2.4rem;font-weight:100;letter-spacing:1px;text-shadow:0 1px hsla(0,0%,100%,.5)}.welcome .introduce{font-size:2rem;font-weight:100;letter-spacing:1px}.welcome .banner img{padding:40px 0;max-width:800px}.welcome .start{padding:40px 0}.end .airboard{position:relative;width:1100px;height:708px}.end .symbol{position:absolute;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}.end .symbol.show{opacity:1;-ms-filter:none;filter:none}.end .symbol.delay-02s{-webkit-animation-delay:.2s;-moz-animation-delay:.2s;-o-animation-delay:.2s;-ms-animation-delay:.2s;animation-delay:.2s}.end .symbol.circle{top:31%;left:0;width:370px;height:370px;background-color:hsla(0,0%,100%,.5);border-radius:50%}.end .symbol.humaaan{top:25%;left:0;height:450px}.end .symbol.decoration{right:53px;bottom:15%;width:500px;opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20);pointer-events:none}.end .symbol.listview{right:53px;top:35%;display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-orient:vertical;-moz-box-orient:vertical;-o-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;font-size:25px;-webkit-box-align:start;-moz-box-align:start;-o-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;opacity:1;-ms-filter:none;filter:none}.end .symbol.listview .list a{color:#fff;text-decoration:none;border-bottom:2px solid transparent;-webkit-transition:border-color .5s;-moz-transition:border-color .5s;-o-transition:border-color .5s;-ms-transition:border-color .5s;transition:border-color .5s}.end .symbol.listview .list a:hover{font-weight:700;border-bottom:2px solid #fff}@media only screen and (max-width:1440px){.tutorial{-webkit-transform:scale(.8);-moz-transform:scale(.8);-o-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.tutorial[data-direction=down]{-webkit-transform-origin:center top;-moz-transform-origin:center top;-o-transform-origin:center top;-ms-transform-origin:center top;transform-origin:center top}.tutorial[data-direction=up]{-webkit-transform-origin:center 80%;-moz-transform-origin:center 80%;-o-transform-origin:center 80%;-ms-transform-origin:center 80%;transform-origin:center 80%}}@media only screen and (max-width:768px){.tutorial{-webkit-transform:scale(.6);-moz-transform:scale(.6);-o-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6)}}