coco-modal
Version:
1 lines • 2.71 kB
CSS
body{margin:0}*{box-sizing:border-box;outline:0}.root{width:calc(100% - 40px);height:calc(200vh - 260px);margin:0 auto;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.content{box-shadow:0 0 0 2px rgba(66,133,255,.25);background-color:rgba(66,133,255,.036);padding:30px;border-radius:6px}.github{position:absolute;top:0;left:0;width:100%;height:100px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;margin:0 auto}.github,.github a:visited{color:#4285ff}.btn{font-size:14px;text-decoration:none;padding:6px 22px;white-space:nowrap;border-radius:5px;font-weight:500;display:inline-block;cursor:pointer;position:relative;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:30px;position:relative}.btn span{position:relative}.btn{background-color:#ec558f;background-color:#e71e63;background-color:#4285ff;color:#fff}.btn::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;transition:all .16s ease-out;background-color:rgba(0,0,0,0)}.btn:hover::before{background-color:rgba(0,0,0,.08)}.btn:active::before{transition:all 50ms ease;background-color:rgba(0,0,0,.16)}.swiper-container{width:100%;height:700px}.swiper-slide{text-align:center;font-size:18px;background:#e9e9e9;display:flex;justify-content:center;align-items:center}.swiper-slide img{width:100%}.long{background-color:#4158d0;background-image:linear-gradient(43deg,#4158d0 0,#c850c0 46%,#ffcc70 100%)}.full{background-color:#fbda61;background-image:linear-gradient(45deg,#fbda61 0,#ff5acd 100%)}.input{margin:14px 0;width:100%;height:39px;border-radius:6px;padding:7px 15px;font-weight:400;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:#333;background-color:#f3f3f4;outline:0;border:1px solid transparent;font-size:14px;box-shadow:0 0 0 0 rgba(53,120,229,.1);transition:all .16s ease-out;line-height:20px}.input::-webkit-input-placeholder{line-height:24px;color:#a2a2a3}.input::-moz-placeholder{line-height:24px;color:#a2a2a3}.input:-ms-input-placeholder{line-height:24px;color:#a2a2a3}.input::-ms-input-placeholder{line-height:24px;color:#a2a2a3}.input::placeholder{line-height:24px;color:#a2a2a3}.input:hover{transition:all .1s ease-out;background-color:#fff;box-shadow:0 0 0 0 rgba(111,111,111,.2);box-shadow:0 0 0 1px rgba(66,133,255,.25);border-color:rgba(66,133,255,.5)}.input:focus{background-color:#fff;box-shadow:0 0 0 1px rgba(66,133,255,.25);border-color:rgba(66,133,255,.5)}.input:active{transition:all 80ms ease-out;background-color:#fff;border-color:#cbcbcc;box-shadow:0 0 0 0 rgba(66,133,255,.125)}.tip{padding:10px 0;display:inline-block;color:#000;font-size:16px;font-weight:600}