26 lines
16 KiB
CSS
26 lines
16 KiB
CSS
:root{color-scheme:dark;--pink:#fe2c55;--ease:cubic-bezier(.22,.72,.18,1)}
|
|
*{box-sizing:border-box}html,body,#__next{margin:0;width:100%;height:100%;overflow:hidden;background:#08080b;color:#fff;overscroll-behavior:none}
|
|
body{font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;-webkit-font-smoothing:antialiased}
|
|
button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #65e9e0;outline-offset:5px}button:disabled{opacity:.35;cursor:default}a{color:inherit;text-decoration:none}button svg{flex-shrink:0}button{transition:transform .2s var(--ease),color .2s,background .2s}button:active:not(.video-hit){transform:scale(.92)}
|
|
.app-shell{width:100%;height:100dvh;display:flex;flex-direction:column}.main{flex:1;min-height:0;width:100%;position:relative;overflow:hidden}
|
|
.feed-viewport,.feed-track{position:absolute;inset:0;width:100%;height:100%}.feed-viewport{overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}.feed-viewport[data-moving]{cursor:grabbing}.feed-track{will-change:transform}.video-page{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;isolation:isolate;background:#182333;contain:layout paint}.video{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 48%;pointer-events:none}.scrim{position:absolute;inset:0;background:linear-gradient(0deg,#040609c9,transparent 45%,#070c1748);pointer-events:none}.video-hit{position:absolute;inset:0;width:100%;height:100%;cursor:inherit;touch-action:none}
|
|
.feed-header{position:absolute;z-index:2;top:0;left:0;right:0;height:92px;padding:26px 35px;display:flex;align-items:center;pointer-events:none;background:linear-gradient(#070a1428,transparent)}.feed-header button,.feed-header a{pointer-events:auto}.brand{display:flex;align-items:center;gap:10px}.brand>svg{width:28px;height:28px;filter:drop-shadow(-2px -1px 0 #25eee1) drop-shadow(2px 2px 0 #fe345b)}.brand strong{font-size:25px;letter-spacing:2px}.brand>span{font-size:9px;letter-spacing:2px;opacity:.65;align-self:flex-end;margin-bottom:4px}.feed-tabs{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:32px;font-size:18px;font-weight:600;text-shadow:0 2px 8px #0003}.feed-tabs button{color:#ffffffa0;position:relative}.feed-tabs .selected{color:white}.feed-tabs .selected:after{content:'';position:absolute;width:24px;height:3px;background:#fff;border-radius:3px;bottom:-12px;left:50%;transform:translateX(-50%)}.search-trigger{margin-left:auto;display:flex;align-items:center;gap:10px;border:1px solid #ffffff2b;border-radius:22px;padding:10px 14px;background:#00000012;color:#ffffffe0}.search-trigger svg{width:18px;height:18px}.search-trigger span{font-size:12px}.search-trigger kbd{font-size:11px;opacity:.5;margin-left:18px}.mobile-sound{display:none}
|
|
.scene-copy{position:absolute;top:27%;width:100%;text-align:center;pointer-events:none;text-shadow:0 3px 20px #152c3d44}.scene-copy>span{display:block;letter-spacing:6px;font-size:10px;opacity:.8}.scene-copy strong{font-family:'Songti SC','Noto Serif SC',SimSun,serif;display:block;letter-spacing:15px;font-weight:400;font-size:clamp(40px,5vw,82px);margin:23px 0 19px}.scene-copy i{font-style:normal;font-size:8px;letter-spacing:3px;opacity:.6}
|
|
.video-info{position:absolute;bottom:91px;left:35px;right:130px;pointer-events:none;text-shadow:0 1px 8px #0003}.video-info button{pointer-events:auto}.location{font-size:11px;display:flex;gap:5px;align-items:center;color:#fffb}.location>span{margin:0 4px}.video-info h2{font-size:22px;margin:11px 0 12px;display:flex;align-items:center;gap:8px;letter-spacing:.2px}.verified{display:inline-flex;background:#54b8d8;border-radius:50%;padding:2px}.video-info h3{font-size:16px;font-weight:500;margin:0 0 7px}.video-info p{font-size:13px;color:#ffffffcc;margin:0 0 10px;line-height:1.6}.tags{display:flex;gap:12px;flex-wrap:wrap}.tags button{font-size:13px;color:#f5e7ca}.music{display:flex;align-items:center;gap:7px;margin-top:15px;font-size:11px;color:#fff9}.music-bars{display:flex;gap:3px;align-items:center;margin-left:10px;height:13px}.music-bars i{display:block;width:2px;height:5px;background:#fffb}.music-bars i:nth-child(2){height:11px;animation-delay:-.3s!important}.music-bars i:nth-child(3){height:8px;animation-delay:-.5s!important}.music-bars i:nth-child(4){height:12px;animation-delay:-.2s!important}.music-bars.playing i{animation:equalizer .8s ease-in-out infinite alternate}
|
|
.actions{position:absolute;right:39px;bottom:94px;display:flex;align-items:center;gap:25px;flex-direction:column}.avatar{border-radius:50%;height:48px;width:48px;position:relative;border:2px solid white;font-family:serif;font-size:23px;color:#fff;text-shadow:0 1px 4px #0004}.avatar>span{display:flex;align-items:center;justify-content:center;background:var(--pink);border-radius:50%;position:absolute;width:20px;height:20px;bottom:-9px;left:12px;animation:badge-in .35s var(--ease)}.avatar.following>span{background:#fff;color:var(--pink)}.action{display:flex;flex-direction:column;align-items:center;gap:7px;filter:drop-shadow(0 2px 4px #0003)}.action>svg{height:33px;width:33px;stroke-width:1.4;transition:color .18s,transform .2s var(--ease)}.action:active>svg{transform:scale(.8)}.action span{font-size:12px;font-weight:600;animation:count-in .25s var(--ease)}.action.liked{color:var(--pink)}.action.saved{color:#ffd266}.action.liked svg,.action.saved svg{animation:reaction-pop .5s var(--ease)}.record{width:44px;height:44px;background:repeating-radial-gradient(#26262c 0 2px,#121216 3px 5px);border:1px solid #ffffff1a;border-radius:50%;display:grid;place-items:center;animation:spin 8s linear infinite;animation-play-state:paused}.record>span{width:27px;height:27px;border-radius:50%;display:grid;place-items:center}.record.spinning{animation-play-state:running}
|
|
.player-controls{position:absolute;bottom:0;width:100%;padding:0 28px;background:linear-gradient(transparent,#080b1166)}.progress{--progress:0%;display:block;appearance:none;width:100%;height:3px;border:0;padding:0;cursor:pointer;background:linear-gradient(to right,#fffc var(--progress),#ffffff35 var(--progress));border-radius:9px;margin:0;touch-action:none;transition:height .18s}.progress:hover{height:5px}.progress::-webkit-slider-thumb{appearance:none;width:8px;height:8px;border-radius:50%;background:white;transition:transform .15s}.progress:hover::-webkit-slider-thumb{transform:scale(1.4)}.progress::-moz-range-thumb{width:8px;height:8px;background:white;border:0;border-radius:50%}.control-row{display:flex;height:55px;align-items:center;gap:20px}.control-row button{display:flex;align-items:center}.time{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.5px}.time>span{color:#fff8}.control-hint{font-size:11px;color:#fff6;margin:auto}.quality{font-size:12px;display:flex;align-items:center;gap:5px}.quality small{font-size:8px;padding:1px 3px;border:1px solid #fff5;border-radius:2px}
|
|
.next-controls{position:absolute;right:38px;top:20%;display:flex;align-items:center;flex-direction:column;border:1px solid #ffffff26;background:#1417202b;backdrop-filter:blur(12px);border-radius:30px}.next-controls button{padding:13px;display:flex;color:#ffffffbe}.next-controls button:hover{color:white;background:#ffffff16;border-radius:24px}.next-controls>span{height:1px;width:18px;background:#ffffff20}.next-controls svg{width:19px;height:19px}.feed-position{position:absolute;right:14px;top:50%;display:flex;flex-direction:column;gap:6px;transform:translateY(-50%)}.feed-position i{width:3px;height:8px;background:#ffffff40;border-radius:5px;transition:height .35s var(--ease),background .3s}.feed-position i.active{height:20px;background:#fff}
|
|
.paused{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;color:#ffffffbd;filter:drop-shadow(0 4px 18px #0003);animation:pause-in .25s var(--ease)}.heart-burst{position:absolute;pointer-events:none;z-index:4;color:var(--pink);filter:drop-shadow(0 5px 18px #6003);animation:heart-float .95s var(--ease) forwards}.heart-burst i{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:#ff95a9;animation:particle .65s ease-out forwards;--x:-75px;--y:-55px}.heart-burst i:nth-of-type(2){--x:65px;--y:-70px}.heart-burst i:nth-of-type(3){--x:-70px;--y:60px}.heart-burst i:nth-of-type(4){--x:70px;--y:45px}.video-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:24px;background:#16161ceb;border-radius:12px;font-size:14px}.video-error button{display:block;margin:16px auto 0;color:#61dfd6}
|
|
.mobile-bottom{display:none}.modal-backdrop{position:fixed;inset:0;z-index:20;background:#0006;display:flex;justify-content:flex-end;animation:backdrop-in .3s ease-out}.panel{width:min(430px,94vw);height:100%;background:#16161cf5;backdrop-filter:blur(24px);border-left:1px solid #ffffff15;padding:29px 25px;display:flex;flex-direction:column;box-shadow:-24px 0 80px #0003;animation:drawer-in .42s var(--ease);transition:transform .28s var(--ease)}.panel>header{display:flex;align-items:center;justify-content:space-between}.panel h2{font-size:18px;margin:0}.panel header button{display:flex;color:#aaa;padding:5px;border-radius:50%;background:#ffffff09}.panel-note{font-size:11px;color:#828290;margin-top:20px}.comments{overflow:auto;min-height:120px;flex:1;overscroll-behavior:contain}.comments article{display:flex;gap:12px;margin:25px 0;align-items:flex-start;animation:comment-in .28s var(--ease)}.comment-avatar{display:grid;place-items:center;border-radius:50%;width:36px;height:36px;background:#343441;color:#c6bdd7;flex-shrink:0}.comments article>div{flex:1}.comments strong{font-size:12px;color:#92929f}.comments p{font-size:13px;line-height:1.6;margin:6px 0;overflow-wrap:anywhere}.comments small{font-size:10px;color:#62626f}.comments article>svg{color:#747480;margin-top:18px}.panel form,.search-input{display:flex;align-items:center;gap:12px;background:#272730;border-radius:10px;padding:13px}.panel form{margin-top:20px}.panel input{border:0;background:none;color:#fff;font:inherit;font-size:13px;flex:1;min-width:0}.panel form button{color:#ff476d;display:flex}.search-input{margin-top:25px;color:#9494a2}.search-results{overflow:auto}.search-results>button{display:flex;align-items:center;width:100%;text-align:left;gap:14px;margin:22px 0}.search-results img{width:60px;height:78px;object-fit:cover;border-radius:7px}.search-results span{flex:1}.search-results strong{font-size:13px;display:block}.search-results small{font-size:11px;color:#878795;display:block;margin-top:10px}.search-results>p{font-size:13px;color:#999;padding:20px}.share-link{flex:0!important;background:#272730!important;padding:14px;border-radius:9px;width:100%}.sheet-grip{display:none}.closing{animation:backdrop-out .24s ease-in forwards}.closing .panel{animation:drawer-out .24s ease-in forwards}.toast{position:fixed;z-index:50;bottom:100px;left:50%;transform:translate(-50%,15px);background:#24242eea;backdrop-filter:blur(16px);border:1px solid #ffffff17;box-shadow:0 8px 30px #0005;border-radius:30px;padding:12px 22px;max-width:85vw;font-size:13px;opacity:0;pointer-events:none;transition:opacity .22s,transform .3s var(--ease);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}
|
|
@keyframes spin{to{transform:rotate(360deg)}}@keyframes equalizer{to{transform:scaleY(.3)}}@keyframes badge-in{from{transform:scale(.3) rotate(-50deg);opacity:.2}to{transform:scale(1) rotate(0);opacity:1}}@keyframes count-in{from{transform:translateY(3px);opacity:.5}to{transform:translateY(0);opacity:1}}@keyframes reaction-pop{0%{transform:scale(.65)}45%{transform:scale(1.26)}70%{transform:scale(.93)}100%{transform:scale(1)}}@keyframes pause-in{from{opacity:0;transform:translate(-50%,-50%) scale(1.3)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes heart-float{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-18deg)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(-12deg)}45%{opacity:1;transform:translate(-50%,-60%) scale(1) rotate(-12deg)}100%{opacity:0;transform:translate(-50%,-130%) scale(1.1) rotate(-8deg)}}@keyframes particle{0%{transform:translate(0,0) scale(.2);opacity:0}20%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(.4);opacity:0}}@keyframes backdrop-in{from{background:#0000}to{background:#0006}}@keyframes backdrop-out{to{background:#0000}}@keyframes drawer-in{from{transform:translateX(100%);opacity:.7}to{transform:translateX(0);opacity:1}}@keyframes drawer-out{to{transform:translateX(100%);opacity:0}}@keyframes sheet-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sheet-out{to{transform:translateY(100%)}}@keyframes comment-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
|
|
@media(max-width:900px){.search-trigger span,.search-trigger kbd{display:none}.search-trigger{padding:10px}.control-hint{font-size:10px}.scene-copy strong{font-size:54px;letter-spacing:10px}}
|
|
@media(max-width:700px){
|
|
.feed-header{height:auto;padding:calc(20px + env(safe-area-inset-top)) 18px 22px}.brand{display:none}.mobile-sound{display:flex}.mobile-sound svg{width:23px;height:23px}.feed-tabs{font-size:17px;gap:29px}.feed-tabs .selected:after{bottom:-10px}.search-trigger{padding:0;border:0;background:none}.search-trigger svg{width:24px;height:24px}
|
|
.mobile-bottom{display:flex;flex-shrink:0;height:calc(58px + env(safe-area-inset-bottom));padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:#08080b;align-items:center;justify-content:space-around;border-top:1px solid #ffffff10}.mobile-bottom button{display:flex;flex-direction:column;gap:3px;align-items:center;font-size:10px;color:#aaaab1;width:54px}.mobile-bottom button svg{width:22px;height:22px}.mobile-bottom .selected{color:white;font-weight:600}.mobile-bottom .create{width:42px;height:29px;border-radius:7px;background:#fff;color:#08080b;box-shadow:-5px 0 #25e2db,5px 0 #fc315a;display:grid;place-items:center;margin:0 6px}.mobile-bottom .create svg{width:26px;height:26px}
|
|
.video{object-position:50% 50%}.scene-copy{top:29%}.scene-copy>span{font-size:8px;letter-spacing:3px}.scene-copy strong{font-size:43px;letter-spacing:8px;margin:22px 0}.scene-copy i{font-size:6px;letter-spacing:2px}.video-info{left:15px;bottom:25px;right:72px}.location{display:none}.video-info h2{font-size:17px;margin-bottom:11px}.video-info h3{font-size:14px;line-height:1.5;margin-bottom:4px}.video-info p{font-size:12px;line-height:1.6;margin-bottom:7px}.tags{gap:6px 9px}.tags button{font-size:12px}.music{margin-top:12px;font-size:11px;gap:6px}.music-bars{display:none}.actions{right:12px;bottom:32px;gap:23px}.action>svg{width:33px;height:33px}.action span{font-size:11px}.avatar{height:44px;width:44px;margin-bottom:3px;font-size:21px}.avatar>span{left:10px}.record{width:38px;height:38px}.record>span{width:23px;height:23px}.player-controls{padding:0;bottom:1px}.progress,.progress:hover{height:2px}.progress::-webkit-slider-thumb{height:5px;width:5px}.control-row,.next-controls,.feed-position{display:none}.scrim{background:linear-gradient(0deg,#06090bc9,transparent 60%,#0c172033)}
|
|
.modal-backdrop{align-items:flex-end}.panel{width:100%;height:65dvh;max-height:85dvh;border-radius:18px 18px 0 0;padding:0 20px calc(20px + env(safe-area-inset-bottom));border:0;border-top:1px solid #ffffff10;animation:sheet-in .4s var(--ease)}.sheet-grip{display:flex;height:27px;flex-shrink:0;align-items:center;justify-content:center;touch-action:none;cursor:grab}.sheet-grip span{width:35px;height:4px;border-radius:4px;background:#ffffff3b}.closing .panel{animation:sheet-out .24s ease-in forwards}.toast{bottom:85px;font-size:12px}.paused svg{width:49px}.video-error{width:75%;text-align:center}
|
|
}
|
|
@media(max-height:680px){.actions{gap:14px}.action>svg{width:29px;height:29px}.scene-copy{top:23%}.video-info p{display:none}.record{display:none}.next-controls{top:17%}.video-info{bottom:78px}}
|
|
@media(max-height:680px) and (max-width:700px){.video-info{bottom:22px}.actions{bottom:30px}.scene-copy strong{font-size:35px}.scene-copy i{display:none}.feed-header{padding-top:17px}}
|
|
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
|