1 line
11 KiB
CSS
1 line
11 KiB
CSS
page{--app-brand:#00ced1;--app-brand-light:rgba(0,206,209,.1);--app-brand-dark:#20b2aa;--app-bg-primary:#000;--app-bg-secondary:#1c1c1e;--app-bg-tertiary:#2c2c2e;--app-text-primary:#fff;--app-text-secondary:hsla(0,0%,100%,.7);--app-text-tertiary:hsla(0,0%,100%,.4);--app-separator:hsla(0,0%,100%,.05);--ios-indigo:#5856d6;--ios-green:#30d158;--ios-red:#ff3b30;--ios-orange:#ff9500;--ios-yellow:gold;--gold:gold;--gold-light:orange;--pink:#e91e63;--purple:#7b61ff}page{-webkit-font-smoothing:antialiased;background-color:var(--app-bg-primary);color:var(--app-text-primary);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Helvetica Neue,PingFang SC,Microsoft YaHei,sans-serif;font-size:.7rem;line-height:1.5}.container{background:#000;min-height:100vh;padding:0 0 env(safe-area-inset-bottom)}.brand-color{color:#00ced1}.brand-bg{background-color:#00ced1}.brand-gradient{background:-webkit-linear-gradient(315deg,#00ced1,#20b2aa);background:linear-gradient(135deg,#00ced1,#20b2aa)}.gold-color{color:gold}.gold-bg{background:-webkit-linear-gradient(315deg,gold,orange);background:linear-gradient(135deg,gold,orange)}.gradient-text{-webkit-text-fill-color:transparent;background:-webkit-linear-gradient(315deg,#00ced1,#20b2aa);background:linear-gradient(135deg,#00ced1,#20b2aa);-webkit-background-clip:text;background-clip:text}.gold-gradient-text{-webkit-text-fill-color:transparent;background:-webkit-linear-gradient(315deg,gold,orange);background:linear-gradient(135deg,gold,orange);-webkit-background-clip:text;background-clip:text}.btn-primary{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:-webkit-linear-gradient(315deg,#00ced1,#20b2aa);background:linear-gradient(135deg,#00ced1,#20b2aa);border:none;border-radius:1.2rem;-webkit-box-shadow:0 .2rem .6rem rgba(0,206,209,.3);box-shadow:0 .2rem .6rem rgba(0,206,209,.3);color:#fff;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:.8rem;font-weight:600;-webkit-justify-content:center;justify-content:center;padding:.7rem 1.2rem}.btn-primary::after{border:none}.btn-primary:active{opacity:.85;-webkit-transform:scale(.98);-ms-transform:scale(.98);transform:scale(.98)}.btn-secondary{background:rgba(0,206,209,.1);border:.05rem solid rgba(0,206,209,.3);border-radius:1.2rem;color:#00ced1;font-size:.8rem;font-weight:500;padding:.7rem 1.2rem}.btn-secondary::after{border:none}.btn-secondary:active{background:rgba(0,206,209,.2)}.btn-ghost{background:hsla(0,0%,100%,.05);border:.05rem solid hsla(0,0%,100%,.1);border-radius:1.2rem;color:#fff;font-size:.8rem;padding:.7rem 1.2rem}.btn-ghost::after{border:none}.btn-ghost:active{background:hsla(0,0%,100%,.1)}.btn-gold{background:-webkit-linear-gradient(315deg,gold,orange);background:linear-gradient(135deg,gold,orange);border:none;border-radius:1.2rem;-webkit-box-shadow:0 .2rem .6rem rgba(255,215,0,.3);box-shadow:0 .2rem .6rem rgba(255,215,0,.3);color:#000;font-size:.8rem;font-weight:600;padding:.7rem 1.2rem}.btn-gold::after{border:none}.card{background:rgba(28,28,30,.9);border:.05rem solid hsla(0,0%,100%,.05);border-radius:.8rem;margin:.6rem .8rem;padding:.8rem}.card-light{background:rgba(44,44,46,.8);border:.05rem solid hsla(0,0%,100%,.08);border-radius:.6rem;padding:.6rem}.card-gradient{background:-webkit-linear-gradient(315deg,#1c1c1e,#2c2c2e);background:linear-gradient(135deg,#1c1c1e,#2c2c2e);border:.05rem solid rgba(0,206,209,.2);border-radius:.8rem;padding:.8rem}.card-brand{background:-webkit-linear-gradient(315deg,rgba(0,206,209,.1),rgba(32,178,170,.05));background:linear-gradient(135deg,rgba(0,206,209,.1),rgba(32,178,170,.05));border:.05rem solid rgba(0,206,209,.2);border-radius:.8rem;padding:.8rem}.input-ios{background:rgba(0,0,0,.3);border:.05rem solid hsla(0,0%,100%,.1);border-radius:.6rem;color:#fff;font-size:.8rem;padding:.7rem .8rem}.input-ios:focus{border-color:rgba(0,206,209,.5)}.input-ios-placeholder{color:hsla(0,0%,100%,.3)}.list-item{-ms-flex-align:center;-ms-flex-pack:justify;-webkit-align-items:center;align-items:center;background:rgba(28,28,30,.9);border-bottom:.025rem solid hsla(0,0%,100%,.05);display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding:.7rem .8rem}.list-item:first-child{border-radius:.6rem .6rem 0 0}.list-item:last-child{border-bottom:none;border-radius:0 0 .6rem .6rem}.list-item:only-child{border-radius:.6rem}.list-item:active{background:#2c2c2e}.tag{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;border-radius:.2rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;font-size:.55rem;font-weight:500;-webkit-justify-content:center;justify-content:center;min-width:2rem;padding:.2rem .5rem;text-align:center}.tag-brand{background:rgba(0,206,209,.1);color:#00ced1}.tag-gold{background:rgba(255,215,0,.1);color:gold}.tag-pink{background:rgba(233,30,99,.1);color:#e91e63}.tag-purple{background:rgba(123,97,255,.1);color:#7b61ff}.tag-free{background:rgba(0,206,209,.1);color:#00ced1}.divider{background:hsla(0,0%,100%,.05);height:.025rem;margin:.6rem 0}.divider-vertical{background:hsla(0,0%,100%,.1);height:1.2rem;width:.05rem}.skeleton{-webkit-animation:skeleton-loading 1.5s ease-in-out infinite;animation:skeleton-loading 1.5s ease-in-out infinite;background:-webkit-gradient(linear,left top,right top,color-stop(25%,#1c1c1e),color-stop(50%,#2c2c2e),color-stop(75%,#1c1c1e));background:-webkit-linear-gradient(left,#1c1c1e 25%,#2c2c2e 50%,#1c1c1e 75%);background:linear-gradient(90deg,#1c1c1e 25%,#2c2c2e 50%,#1c1c1e 75%);background-size:200% 100%;border-radius:.2rem}@-webkit-keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}.page-transition{-webkit-animation:fadeIn .3s ease-out;animation:fadeIn .3s ease-out}@-webkit-keyframes fadeIn{from{opacity:0;-webkit-transform:translateY(.5rem);transform:translateY(.5rem)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeIn{from{opacity:0;-webkit-transform:translateY(.5rem);transform:translateY(.5rem)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.modal-overlay{-webkit-animation:modalOverlayIn .25s ease-out;animation:modalOverlayIn .25s ease-out}.modal-content{-webkit-animation:modalContentIn .3s cubic-bezier(.32,.72,0,1);animation:modalContentIn .3s cubic-bezier(.32,.72,0,1)}@-webkit-keyframes modalOverlayIn{from{opacity:0}to{opacity:1}}@keyframes modalOverlayIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes modalContentIn{from{opacity:0;-webkit-transform:scale(.95) translateY(.5rem);transform:scale(.95) translateY(.5rem)}to{opacity:1;-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@keyframes modalContentIn{from{opacity:0;-webkit-transform:scale(.95) translateY(.5rem);transform:scale(.95) translateY(.5rem)}to{opacity:1;-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}.pulse{-webkit-animation:pulse 2s ease-in-out infinite;animation:pulse 2s ease-in-out infinite}@-webkit-keyframes pulse{0%,100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:.8;-webkit-transform:scale(1.05);transform:scale(1.05)}}@keyframes pulse{0%,100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:.8;-webkit-transform:scale(1.05);transform:scale(1.05)}}.glow{-webkit-box-shadow:0 0 1rem rgba(0,206,209,.3);box-shadow:0 0 1rem rgba(0,206,209,.3)}.glow-gold{-webkit-box-shadow:0 0 1rem rgba(255,215,0,.3);box-shadow:0 0 1rem rgba(255,215,0,.3)}.text-xs{font-size:.55rem}.text-sm{font-size:.65rem}.text-base{font-size:.7rem}.text-lg{font-size:.8rem}.text-xl{font-size:.9rem}.text-2xl{font-size:1.1rem}.text-3xl{font-size:1.4rem}.text-white{color:#fff}.text-gray{color:hsla(0,0%,100%,.6)}.text-muted{color:hsla(0,0%,100%,.4)}.text-center{text-align:center}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.flex{display:-webkit-flex;display:-ms-flexbox;display:flex}.flex-col{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.items-center{-ms-flex-align:center;-webkit-align-items:center;align-items:center}.justify-center{-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}.justify-between{-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}.justify-around{-ms-flex-pack:distribute;-webkit-justify-content:space-around;justify-content:space-around}.flex-1{-webkit-flex:1;-ms-flex:1;flex:1}.gap-1{gap:.2rem}.gap-2{gap:.4rem}.gap-3{gap:.6rem}.gap-4{gap:.8rem}.p-2{padding:.4rem}.p-3{padding:.6rem}.p-4{padding:.8rem}.p-5{padding:1rem}.px-4{padding-left:.8rem;padding-right:.8rem}.py-2{padding-bottom:.4rem;padding-top:.4rem}.py-3{padding-bottom:.6rem;padding-top:.6rem}.m-4{margin:.8rem}.mx-4{margin-left:.8rem;margin-right:.8rem}.my-3{margin-bottom:.6rem;margin-top:.6rem}.mb-2{margin-bottom:.4rem}.mb-3{margin-bottom:.6rem}.mb-4{margin-bottom:.8rem}.mt-4{margin-top:.8rem}.rounded{border-radius:.2rem}.rounded-lg{border-radius:.4rem}.rounded-xl{border-radius:.6rem}.rounded-2xl{border-radius:.8rem}.rounded-full{border-radius:50%}.safe-bottom{padding-bottom:calc(env(safe-area-inset-bottom) + .5rem)}.pb-tabbar{padding-bottom:5rem}.nav-placeholder{height:calc(2.2rem + env(safe-area-inset-top, 1.1rem))}::-webkit-scrollbar{display:none;height:0;width:0}.touch-feedback{-webkit-transition:all .15s ease;transition:all .15s ease}.touch-feedback:active{opacity:.7;-webkit-transform:scale(.98);-ms-transform:scale(.98);transform:scale(.98)}.progress-bar{background:#2c2c2e;border-radius:.1rem;height:.2rem;overflow:hidden}.progress-fill{background:-webkit-gradient(linear,left top,right top,from(#00ced1),to(#20b2aa));background:-webkit-linear-gradient(left,#00ced1,#20b2aa);background:linear-gradient(90deg,#00ced1,#20b2aa);border-radius:.1rem;height:100%;-webkit-transition:width .3s ease;transition:width .3s ease}.avatar{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:-webkit-linear-gradient(315deg,rgba(0,206,209,.2),rgba(32,178,170,.1));background:linear-gradient(135deg,rgba(0,206,209,.2),rgba(32,178,170,.1));border:.1rem solid rgba(0,206,209,.3);border-radius:50%;color:#00ced1;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:.8rem;font-weight:700;height:2rem;-webkit-justify-content:center;justify-content:center;width:2rem}.avatar-lg{font-size:1.2rem;height:3rem;width:3rem}.icon-box{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;border-radius:.4rem;display:-webkit-flex;display:-ms-flexbox;display:flex;height:1.6rem;-webkit-justify-content:center;justify-content:center;width:1.6rem}.icon-box-brand{background:-webkit-linear-gradient(315deg,rgba(0,206,209,.2),rgba(32,178,170,.1));background:linear-gradient(135deg,rgba(0,206,209,.2),rgba(32,178,170,.1))}.icon-box-gold{background:-webkit-linear-gradient(315deg,rgba(255,215,0,.2),rgba(255,165,0,.1));background:linear-gradient(135deg,rgba(255,215,0,.2),rgba(255,165,0,.1))}.bg-gradient-dark{background:-webkit-gradient(linear,left top,left bottom,from(#000),to(#1a1a1a));background:-webkit-linear-gradient(top,#000,#1a1a1a);background:linear-gradient(180deg,#000,#1a1a1a)}.bg-gradient-brand{background:-webkit-linear-gradient(315deg,rgba(0,206,209,.1),transparent);background:linear-gradient(135deg,rgba(0,206,209,.1),transparent)} |