:root{ /* ── 主题变量 ────────────────────────────────────────────── 这一整块是【亮色】，值全部照搬改造前的原值，所以亮色渲染不变。 暗色在文件末尾的 [data-theme="dark"] 里覆盖。 命名按语义不按字面：--surface 是「卡片的底」， 暗色下它该是深的，名字不用改。 最容易出错的是 --on-fg。站上有十二处写的是 background:var(--fg); color:#fff 暗色下 --fg 翻成近白，那个写死的 #fff 就成了白字白底， 按钮文字整个消失。所以「压在 --fg 上面的颜色」必须是变量。 另一类【刻意不做成变量】：压在照片上的白色 —— 首屏字幕、 灯箱箭头、轮播圆点、缩略图角标、.nav.over 的品牌字。 那些压的是照片，照片在两个主题下长得一样，跟着翻反而看不见。 */ /* 底 */ --bg:#FAFAF9; /* 前台页面底 */ --bg2:#F6F6F4; /* 后台页面底 */ --surface:#fff; /* 卡片、面板、输入框 */ --surface2:#F0F0EE; /* 次级填充：hover、选中、小标签 */ --surface3:#F2F2EE; /* 空占位块 */ --imgbg:#eee; /* 图片位的底 */ --imgbg2:#E5E5E3; /* 同上，另一档；也用于细分隔块 */ --avbg:#ddd; /* 头像圆底，比 --imgbg 深一档 */ --nav-bg:rgba(250,250,249,.97); /* 吸顶导航的半透明底 */ /* 字 */ --fg:#1A1A1A; /* 正文 */ --fg2:#6B6B6B; /* 次级 */ --fg3:#A5A5A0; /* 弱：计数、说明 */ --fg4:#BDBDB8; /* 更弱：label 上的「选填」 */ --fg5:#C9C9C4; /* 最弱：placeholder、面包屑斜杠 */ --fg6:#8A8A85; /* 灰底小标签上的字 */ --on-fg:#fff; /* 压在 --fg 上面 */ --prose:#3a3a3a; /* 长段落：关于页、简介、系列序言 */ --prose2:#4a4a4a; /* 长段落，次级 */ /* 线 */ --line:#E5E5E3; /* 主分割线、边框 */ --line2:#D8D8D4; /* 虚线框 */ --line3:#C9C9C4; /* 虚线框，重一点 */ --line4:#BDBDB8; /* hover 边框 */ --line5:#9A9A95; /* 输入框聚焦 */ /* 状态色。暗色下要降饱和 —— 原色搬到暗底上会发脏 */ --danger:#A8452F; --danger2:#8C2F2F; --on-danger:#fff; --danger-bg:#FBF3F3; --danger-bg2:#FDF6F4; --danger-bg3:#FDF7F5; --danger-line:#E8CEC7; --danger-line2:#C08070; --warn:#8A6A2F; --warn2:#8A6A1F; --warn-bg:#FBF8EE; --warn-bg2:#F3EBDC; --warn-line:#C9A227; --ok:#3C7A4E; --ok2:#2F6B4F; --arch-bg:#EFEDE7; --arch-fg:#6E6A60; /* 状态角标的底色（永远配白字，两个主题下都得是深的） */ --stag-ok:#2F6B4F; --stag-pending:#8A6A1F; --stag-rejected:#8C2F2F; --stag-draft:#6B6B6B; --soft:#FAFAF7; --soft2:#FCFCFA; --bar:#EAEAE6; --mark:#C0BCB2; /* 灯箱与大图预览：它们【本来就是深色】，不属于主题。 暗色下要比页面底【更深】，否则两层糊在一起 —— 所以暗色里 --dbg 压到纯黑，而页面底停在 #131313。 */ --dbg:#0A0A0A; --dfg:#F5F5F5; --dfg2:#8A8A8A; --dfg3:#B9B9B4; --dline:#2A2A2A; --serif: Georgia,"Songti SC","Source Han Serif SC",serif; --sans: -apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC",sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:auto} body{background:var(--bg);color:var(--fg);font-family:var(--sans); font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} .wrap{max-width:1440px;margin:0 auto;padding:0 48px} /* ---------- 数据加载中 / 加载失败 ---------- booting 这个类由 db.js 加、也由 db.js 去掉。 如果 db.js 压根没跑起来，类就不会被加上，页面照常显示 —— 故意做成这样， 免得一个脚本错误把整站变成白屏。 */ body{transition:opacity .28s ease} body.booting{opacity:0} .loaderr{position:fixed;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:10px;padding:40px; text-align:center;background:var(--bg);z-index:200} .loaderr b{font-family:var(--serif);font-weight:400;font-size:20px} .loaderr span{font-size:12px;color:var(--fg2);max-width:520px;line-height:1.7; font-family:ui-monospace,Menlo,monospace;word-break:break-all} /* ---------- nav ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:28px 48px; transition:transform .38s cubic-bezier(.2,.7,.2,1),background .3s,padding .3s,box-shadow .3s} .nav.hide{transform:translateY(-105%)} .nav.solid{border-bottom:1px solid var(--line);background:var(--bg);padding:22px 48px} body.pad{padding-top:78px} .nav .crumb{font-size:12px;color:var(--fg2);margin-left:14px;letter-spacing:.04em} .nav .crumb::before{content:"/";margin-right:12px;color:var(--fg5)} .brand{font-family:var(--serif);font-size:20px;letter-spacing:.06em} .brand em{font-style:normal;font-size:11px;letter-spacing:.28em; opacity:.55;margin-left:10px;vertical-align:2px} .navlinks{display:flex;gap:32px;font-size:13px;letter-spacing:.04em} .nav.over{position:fixed;transition:background .35s ease,padding .35s ease,box-shadow .35s} .nav.over .brand,.nav.over .navlinks{color:#fff;transition:color .35s} .nav.over .navlinks a{opacity:.8} .nav.over.stuck{background:var(--nav-bg);padding:18px 48px; box-shadow:0 1px 0 var(--line)} .nav.over.stuck .brand,.nav.over.stuck .navlinks{color:var(--fg)} .nav.over.stuck .navlinks a{opacity:.65} .nav.over.stuck .navlinks a.on{opacity:1} /* 导航下划线滑入 */ .navlinks a{position:relative;padding-bottom:3px} .navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right; transition:transform .3s cubic-bezier(.2,.7,.2,1)} .navlinks a:hover::after,.navlinks a.on::after{transform:scaleX(1);transform-origin:left} /* ---------- 导航里往下展开的摄影师菜单 ---------- */ .navdrop{position:relative;display:inline-flex} .dropwrap{position:absolute;top:100%;left:50%;width:296px;padding-top:20px; transform:translateX(-50%) translateY(-8px); opacity:0;pointer-events:none; transition:opacity .26s cubic-bezier(.2,.7,.2,1),transform .26s cubic-bezier(.2,.7,.2,1)} .navdrop:hover .dropwrap,.navdrop.open .dropwrap{ opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)} .dropwrap .dinner{display:block;background:var(--bg);border:1px solid var(--line); box-shadow:0 20px 44px rgba(0,0,0,.10);padding:8px} .navlinks .dropwrap a{display:flex;align-items:center;gap:13px;padding:9px 11px; color:var(--fg);opacity:1;transition:background .2s} .navlinks .dropwrap a::after{display:none} .navlinks .dropwrap a:hover{background:var(--surface2)} .dropwrap .da{display:block;width:40px;height:40px;border-radius:50%;overflow:hidden; flex:none;background:var(--imgbg2)} .dropwrap .da img{width:100%;height:100%;object-fit:cover} .dropwrap b{font-weight:500;font-size:14px;display:block;line-height:1.4} .dropwrap i{font-style:normal;font-size:11px;color:var(--fg2)} .navlinks .dropwrap a.dall{justify-content:center;font-size:12px;color:var(--fg2); border-top:1px solid var(--line);margin-top:6px;padding-top:12px} /* ---------- hero ---------- */ .hero{position:relative;height:100vh;overflow:hidden;background:#000; perspective:1500px;perspective-origin:50% 46%} .hstage{position:absolute;inset:0;transform-style:preserve-3d; will-change:transform,opacity} /* 新的一张从很远处推上来，旧的一张越过镜头退场 —— 这是纵深感的来源 */ .hero .slide{position:absolute;inset:0; opacity:0;transform:translateZ(-300px) scale(1.26); transition:opacity 1.15s ease,transform 1.5s cubic-bezier(.16,.84,.3,1)} .hero .slide.on{opacity:1;transform:translateZ(0) scale(1.03);z-index:2} .hero .slide.out{opacity:0;transform:translateZ(240px) scale(1.06);z-index:1} .hero .slide .ph{position:absolute;inset:-48px;overflow:hidden; /* 留出视差位移的余量 */ transition:transform .55s cubic-bezier(.2,.7,.2,1)} .hero .slide.on .ph img{animation:kb 11s linear forwards} @keyframes kb{from{transform:scale(1.0)}to{transform:scale(1.07)}} .hero .slide .cap{opacity:0; transition:opacity .8s ease .4s,transform .55s cubic-bezier(.2,.7,.2,1)} .hero .slide.on .cap{opacity:1} .hero img{width:100%;height:100%;object-fit:cover} .hnav{position:absolute;top:0;bottom:0;width:110px;z-index:6;cursor:pointer; display:flex;align-items:center;justify-content:center; color:#fff;font-size:30px;opacity:0;transition:opacity .25s;user-select:none} .hnav:hover{opacity:.9} .hnav.prev{left:0} .hnav.next{right:0} .hero:hover .hnav{opacity:.45} .dots i{cursor:pointer;transition:background .25s,width .25s} .hero .grad{position:absolute;inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.38) 0%,rgba(0,0,0,0) 26%, rgba(0,0,0,0) 46%,rgba(0,0,0,.62) 100%)} .hero .cap{position:absolute;left:48px;bottom:88px;color:#fff} .hero .cap h1{font-family:var(--serif);font-weight:400; font-size:clamp(32px,5vw,64px);line-height:1.12;letter-spacing:.01em} .hero .cap .loc{margin-top:14px;font-size:15px;opacity:.86;letter-spacing:.02em} .hero .cap .by{margin-top:4px;font-size:12px;opacity:.6;letter-spacing:.1em;text-transform:uppercase} .dots{position:absolute;left:50%;transform:translateX(-50%);bottom:42px;display:flex;gap:10px} .dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35)} /* 轮播圆点压在首屏照片上，跟 .dots i 的半透明白是一套，写死 */ .dots i.on{background:#fff;width:22px;border-radius:3px} .hint{position:absolute;right:48px;bottom:40px;color:rgba(255,255,255,.7);cursor:pointer; font-size:11px;letter-spacing:.18em;display:flex;align-items:center;gap:10px;z-index:6} .hint:hover{color:#fff} .hint i{display:block;width:1px;height:34px;background:rgba(255,255,255,.45); animation:drop 2.2s ease-in-out infinite;transform-origin:top} @keyframes drop{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}} /* ---------- section ---------- */ .sec{padding:96px 0} .sechead{display:flex;align-items:baseline;justify-content:space-between; padding-bottom:22px;margin-bottom:40px;border-bottom:1px solid var(--line)} .sechead h2{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:.02em} .sechead .sub{font-size:13px;color:var(--fg2)} /* ---------- 作品网格：两列 + 大间距 + 图注在下 ---------- */ .cols{column-count:2;column-gap:72px} .card{break-inside:avoid;margin:0 0 84px;display:block;position:relative} .card .ph{position:relative;background:var(--surface2);overflow:hidden} .card img{width:100%;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)} .card:hover img{transform:scale(1.02)} .card .cap{padding-top:14px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .card .cap .who{font-size:10px;letter-spacing:.2em;color:var(--fg3);text-transform:uppercase; flex:none;min-width:52px} .card .cap b{font-weight:400;font-size:16px} .card .cap .loc{font-size:12px;color:var(--fg2)} .card .serieschip{position:absolute;top:14px;left:14px;font-size:10px;letter-spacing:.12em; background:rgba(0,0,0,.5);color:#fff;padding:4px 9px; opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s} .card:hover .serieschip{opacity:1;transform:none} /* 悬停时右下角的放大标记 */ .card .zoom{position:absolute;right:14px;bottom:14px;width:36px;height:36px; display:flex;align-items:center;justify-content:center;font-size:15px; background:rgba(255,255,255,.92);color:#1A1A1A; opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s} .card:hover .zoom{opacity:1;transform:none} .card .cap b{transition:opacity .25s} .card:hover .cap b{opacity:.55} /* 筛选 chips */ .chips{display:flex;gap:8px;margin:0 0 40px} .chip{font-size:12px;letter-spacing:.04em;padding:7px 16px;border:1px solid var(--line); color:var(--fg2);cursor:pointer;background:none; transition:border-color .25s,color .25s,background .25s} .chip:hover{border-color:var(--line4);color:var(--fg)} .chip.on{background:var(--fg);border-color:var(--fg);color:var(--on-fg)} /* 加载更多 */ .more{display:block;margin:12px auto 0;background:none;border:1px solid var(--line); padding:14px 34px;cursor:pointer;font-family:inherit; transition:border-color .25s,background .25s} .more span{font-size:13px;color:var(--fg2);transition:color .25s} .more:hover{border-color:var(--fg);background:var(--fg)} .more:hover span{color:var(--on-fg)} .more:active{transform:translateY(1px)} /* 滚动入场 */ .rv{opacity:0;transform:translateY(14px)} .rv.in{opacity:1;transform:none; transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)} /* 回到顶部 */ .totop{position:fixed;right:28px;bottom:28px;width:42px;height:42px;z-index:40; display:flex;align-items:center;justify-content:center;cursor:pointer; background:var(--fg);color:var(--on-fg);font-size:15px; opacity:0;transform:translateY(10px);pointer-events:none;transition:all .3s} .totop.on{opacity:.85;transform:none;pointer-events:auto} .totop:hover{opacity:1} /* 灯箱（覆盖层） */ body.lbopen{overflow:hidden} .lbox{position:fixed;inset:0;z-index:100;background:var(--dbg);color:var(--dfg); opacity:0;pointer-events:none;transition:opacity .28s ease} .lbox.on{opacity:1;pointer-events:auto} .lbstage{position:absolute;inset:64px 108px 118px;display:flex;align-items:center;justify-content:center} .lbstage img{max-width:100%;max-height:100%;object-fit:contain; opacity:0;transform:scale(.985);transition:opacity .45s ease,transform .45s ease} .lbstage img.ready{opacity:1;transform:none} .lbox .lbtop{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between; padding:24px 30px;font-size:12px;color:var(--dfg2);letter-spacing:.06em;z-index:2} .lbox .x{color:var(--dfg2);font-size:18px;line-height:1;cursor:pointer;transition:color .2s,transform .2s} .lbox .x:hover{color:#fff;transform:rotate(90deg)} .lbox .arrow{position:absolute;top:0;bottom:0;width:96px;display:flex;align-items:center; justify-content:center;color:rgba(255,255,255,.4);font-size:28px;cursor:pointer; transition:color .2s,background .3s;user-select:none} .lbox .arrow:hover{color:#fff;background:rgba(255,255,255,.04)} .lbox .arrow.l{left:0} .lbox .arrow.r{right:0} .lbox .lbbar{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--dline); padding:18px 30px 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px} .lbox .lbbar h3{font-family:var(--serif);font-weight:400;font-size:20px} .lbox .lbbar .loc{font-size:13px;color:var(--dfg2);margin-top:4px} .lbox .note i{font-style:normal;font-size:12px;color:var(--dfg2);cursor:pointer; border-bottom:1px solid var(--dline);display:inline-block;margin-top:10px; padding-bottom:2px;transition:color .2s,border-color .2s} .lbox .note i:hover{color:var(--dfg);border-color:var(--dfg2)} .lbox .note p{max-width:560px;font-size:13px;line-height:1.8;color:var(--dfg3); max-height:0;overflow:hidden;transition:max-height .4s ease,margin .4s ease} .lbox .note.open p{max-height:140px;margin-top:10px} .lbox .exif{display:flex;gap:26px;font-size:11px;color:var(--dfg2);letter-spacing:.05em;flex:none} .lbox .exif div b{display:block;color:var(--dfg);font-weight:400;font-size:12px;margin-top:2px} /* 搜索 */ .searchbtn{display:flex;align-items:center;gap:7px;cursor:pointer} .searchbtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6} .srch{position:fixed;inset:0;z-index:60;background:rgba(250,250,249,.985); opacity:0;pointer-events:none;transition:opacity .25s ease} .srch.on{opacity:1;pointer-events:auto} .srch .box{max-width:1000px;margin:0 auto;padding:110px 48px 0} .srch input{width:100%;border:none;border-bottom:1px solid var(--line);background:none; font-family:var(--serif);font-size:38px;padding:0 0 18px;outline:none;color:var(--fg); transition:border-color .25s} .srch input:focus{border-color:var(--fg)} .srch input::placeholder{color:var(--fg5)} .srch .hintrow{display:flex;justify-content:space-between;margin-top:14px; font-size:12px;color:var(--fg3);letter-spacing:.03em} .srch .hintrow kbd{font-family:var(--sans);border:1px solid var(--line); padding:1px 6px;font-size:11px;margin:0 2px} .srch .res{margin-top:38px;max-height:50vh;overflow:auto} .srch .r{display:flex;gap:18px;align-items:center;padding:11px 10px;cursor:pointer; transition:background .18s} .srch .r:hover,.srch .r.sel{background:var(--surface2)} .srch .grp{font-size:10px;letter-spacing:.2em;color:var(--fg3);text-transform:uppercase; padding:18px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:6px} .srch .res > .grp:first-child{padding-top:2px} .srch .r .t{width:88px;height:60px;flex:none;overflow:hidden;background:var(--imgbg2)} .srch .r .t.av{width:60px;height:60px;border-radius:50%;margin:0 14px} .srch .r .t img{width:100%;height:100%;object-fit:cover} .srch .r b{font-weight:400;font-size:16px} .srch .r .m{font-size:12px;color:var(--fg2);margin-top:3px} .srch .r .who{margin-left:auto;font-size:11px;letter-spacing:.16em;color:var(--fg3); text-transform:uppercase;flex:none} .srch .empty{padding:28px 10px;color:var(--fg2);font-size:14px} .srch .close{position:absolute;top:26px;right:42px;font-size:20px;color:var(--fg2); cursor:pointer;transition:transform .2s,color .2s} .srch .close:hover{color:var(--fg);transform:rotate(90deg)} body.srchopen{overflow:hidden} /* ---------- 首页的摄影师：大头像 + 简介，两列错落 ---------- */ .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:52px 64px;padding-bottom:8px} .pgrid > *:nth-child(even){margin-top:72px} /* 错落 */ .pgrid .pc{display:flex;gap:26px;align-items:flex-start;padding:22px; transition:background .28s} a.pc:hover{background:var(--surface2)} .pgrid .pcav{width:138px;height:138px;border-radius:50%;overflow:hidden;flex:none; background:var(--imgbg2)} .pgrid .pcav img{width:100%;height:100%;object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.6,.2,1)} a.pc:hover .pcav img{transform:scale(1.07)} .pgrid h3{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.15} .pgrid .en{font-size:10px;letter-spacing:.2em;color:var(--fg3);text-transform:uppercase; margin-top:7px} .pgrid .bio{margin-top:13px;font-size:13.5px;line-height:1.85;color:var(--prose2)} .pgrid .n{margin-top:12px;font-size:12px;color:var(--fg2); display:inline-block;border-bottom:1px solid var(--line);padding-bottom:2px; transition:border-color .25s} a.pc:hover .n{border-color:var(--fg)} .pgrid .empty{border:1px dashed var(--line3);display:flex;align-items:center; justify-content:center;font-size:20px;color:var(--fg3);background:none} /* ---------- members（内页「其他摄影师」用的紧凑版） ---------- */ .members{display:flex;gap:56px;flex-wrap:wrap} .mem{display:flex;align-items:center;gap:14px;padding:10px 14px 10px 10px; transition:background .2s} a.mem:hover{background:var(--surface2)} .mem .av{width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--avbg);flex:none} .mem .av img{width:100%;height:100%;object-fit:cover} .mem b{font-weight:500;font-size:15px;display:block} .mem span{font-size:12px;color:var(--fg2)} /* ---------- footer ---------- */ footer{border-top:1px solid var(--line);padding:44px 0 64px; font-size:12px;color:var(--fg2);display:flex;justify-content:space-between} /* ---------- photographer ---------- */ .phead{padding:80px 0 56px;border-bottom:1px solid var(--line); display:flex;gap:64px;align-items:flex-start} .phead h1{font-family:var(--serif);font-weight:400;font-size:46px;line-height:1.1} .phead .en{font-size:11px;letter-spacing:.26em;color:var(--fg2); text-transform:uppercase;margin-top:12px} .phead .bio{max-width:520px;font-size:15px;color:var(--prose)} .phead .gear{margin-top:18px;font-size:12px;color:var(--fg2);letter-spacing:.03em} .phead .links{margin-top:10px;font-size:12px} .phead .links a{border-bottom:1px solid var(--line)} .band{position:relative;margin:44px 0;height:300px;overflow:hidden;background:#111} .band img{width:100%;height:100%;object-fit:cover;opacity:.82} .band .bc{position:absolute;left:40px;bottom:34px;color:#fff} .band .bc .k{font-size:10px;letter-spacing:.22em;opacity:.7;text-transform:uppercase} .band .bc h3{font-family:var(--serif);font-weight:400;font-size:30px;margin:8px 0 6px} .band .bc p{font-size:13px;opacity:.8} /* ---------- series page ---------- */ .shead{padding:96px 0 12px;text-align:center} .shead .k{font-size:11px;letter-spacing:.24em;color:var(--fg2);text-transform:uppercase} .shead h1{font-family:var(--serif);font-weight:400;font-size:52px;margin:16px 0 12px} .shead .m{font-size:13px;color:var(--fg2)} .snote{max-width:640px;margin:40px auto 0;font-size:15px;line-height:1.9;color:var(--prose)} .stream{padding:88px 0 40px} .shot{max-width:1200px;margin:0 auto 96px} .shot .cap{margin-top:16px;display:flex;gap:14px;align-items:baseline} .shot .cap b{font-weight:500;font-size:15px} .shot .cap span{font-size:12px;color:var(--fg2)} .shot .note{margin-top:8px;max-width:640px;font-size:14px;color:var(--prose2);line-height:1.8} /* ---------- 系列预览页（方向 B 阶段一）---------- 默认排版：竖排一列、大留白、配文限宽。以上面 .shead/.shot 为起点， 留白再放宽一档 —— 这一页是「作品集」而不是「照片列表」， 所以每张都占满一屏的注意力，滚动节奏靠 120px 的块间距定。 颜色全部走语义变量，所以暗色不需要单独一套规则； 唯一写死的是状态角标上的白字，见 .pvst。 */ .pvstrip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px; padding:11px 15px;border:1px solid var(--line);background:var(--surface);font-size:12px} .pvstrip .pvsay{color:var(--fg2)} .pvstrip .pvgo{margin-left:auto;color:var(--fg2);white-space:nowrap; border-bottom:1px solid var(--line3);padding-bottom:1px} .pvstrip .pvgo:hover{color:var(--fg);border-color:var(--fg)} /* 行内状态角标。不能复用 .stag —— 那个是 position:absolute， 专门压在缩略图角上的。底色沿用同一组变量：它们永远配白字， 所以在亮暗两个主题下都是深的（见 .stag 处的说明）。 */ .pvst{display:inline-block;flex:none;font-size:10px;letter-spacing:.08em; padding:3px 8px;color:#fff;background:var(--stag-draft)} .pvst.approved{background:var(--stag-ok)} .pvst.pending{background:var(--stag-pending)} .pvst.rejected{background:var(--stag-rejected)} .pvst.draft{background:var(--stag-draft)} .pvst.archived{background:var(--arch-bg);color:var(--arch-fg)} .pvhead{padding:104px 0 0;text-align:center} .pvstrip + .pvhead{padding-top:64px} .pvhead .k{font-size:11px;letter-spacing:.24em;color:var(--fg2);text-transform:uppercase} .pvhead .k a{border-bottom:1px solid var(--line3);padding-bottom:1px} .pvhead .k a:hover{border-color:var(--fg)} .pvhead h1{font-family:var(--serif);font-weight:400;font-size:56px; line-height:1.15;margin:18px 0 14px} .pvhead .m{font-size:13px;color:var(--fg2)} .pvpre{max-width:640px;margin:46px auto 0;font-size:15px;line-height:1.95; color:var(--prose);text-align:left} .pvpre p + p{margin-top:1.05em} .pvstream{padding:104px 0 40px} .pvb{max-width:1200px;margin:0 auto 120px} .pvb:last-child{margin-bottom:56px} /* 图位先按原图比例撑开，免得图一张张下来时整页往下跳 */ .pvimg{background:var(--imgbg);overflow:hidden} .pvimg img{width:100%;height:100%;object-fit:cover} .pvcap{margin-top:18px} .pvcap b{font-weight:500;font-size:16px;margin-right:14px} .pvcap span{font-size:12px;color:var(--fg2)} .pvtx{margin-top:10px;max-width:640px;font-size:14.5px;line-height:1.85;color:var(--prose2)} .pvtx p + p{margin-top:.8em} .pvwarn{margin-top:12px;display:flex;align-items:center;gap:9px; font-size:11.5px;color:var(--warn)} .pvghost{max-width:1200px;margin:0 auto 64px;padding:12px 15px; background:var(--soft);border-left:2px solid var(--line3); font-size:12px;line-height:1.75;color:var(--fg2)} .pvempty,.pvfail{padding:160px 0;text-align:center; display:flex;flex-direction:column;align-items:center;gap:8px} .pvempty b,.pvfail b{font-family:var(--serif);font-weight:400;font-size:24px} .pvempty span,.pvfail span{font-size:13px;color:var(--fg2);max-width:520px;line-height:1.7} /* ---------- 系列卡片的放大预览弹窗（批二）---------- 比普通 .cfm 宽得多：里面装的是真的排版预览，窄了就看不出效果。 三段式 —— 头（标题+关闭）/ 中（预览，自己滚）/ 底（操作，固定不滚）。 */ .serpanel .cfmin.sp{max-width:1080px;width:100%;max-height:88vh;padding:0; display:flex;flex-direction:column} .sphead{display:flex;align-items:center;gap:12px;padding:16px 20px; border-bottom:1px solid var(--line);flex:none} .sphead b{font-size:15px;font-weight:500;flex:1;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spx{flex:none;width:30px;height:30px;font-size:19px;line-height:1;cursor:pointer; border:1px solid var(--line);background:none;color:var(--fg2)} .spx:hover{color:var(--fg);border-color:var(--fg)} .sploading{padding:60px 20px;text-align:center;font-size:13px;color:var(--fg2)} /* 预览那一段自己滚。缩一档间距 —— 弹窗不是整页， 原样的 104px 留白在这里会让人以为内容没加载出来。 */ .spwrap{flex:1;min-height:0;overflow:auto;padding:0 20px 8px} .spwrap .pvhead{padding:28px 0 0} .spwrap .pvstream{padding:28px 0 8px} .spwrap .pvb{margin-bottom:44px} .spwrap .pvstrip{margin-top:16px} /* 状态条里那个「我的系列 → / 系列审核 →」在弹窗里是多余的： 你就是从那个列表点开的，它只会让人以为点了会跳走。 */ .spwrap .pvstrip .pvgo{display:none} .spwrap .pvempty,.spwrap .pvfail{padding:72px 0} /* 操作条：统一大小、统一间距。审核那三个按钮原先大小不一又挨在一起。 */ .spacts{flex:none;display:flex;flex-wrap:wrap;gap:10px;align-items:center; padding:14px 20px;border-top:1px solid var(--line);background:var(--soft)} .spacts .btn{font-size:12.5px;padding:9px 18px} /* 删除推到最右边，和其余动作隔开 —— 不可逆的那个别挨着常用的 */ .spacts .btn.warn{margin-left:auto;color:var(--danger)} /* 照片弹窗的正文（批六）。系列弹窗那边正文是整页预览，照片这边是 「一张大图 + 它的全部信息」，所以只有这一块不一样，外面三段 （.sphead / .spwrap / .spacts）完全共用。 图在上、信息在下：横排会让竖幅照片挤成一条。 */ .phv{padding:20px 0 4px} .phvimg{background:var(--imgbg);display:flex;align-items:center;justify-content:center; max-height:62vh;overflow:hidden} .phvimg img{max-width:100%;max-height:62vh;object-fit:contain;display:block} .phvside{padding:18px 0 0} .phvtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px} .phvser{font-size:11.5px;color:var(--fg2)} .phvline{font-size:13px;color:var(--fg)} /* EXIF 用等宽数字，几张照片连着看时参数不会左右跳 */ .phvexif{font-size:11.5px;color:var(--fg3);margin-top:5px;font-variant-numeric:tabular-nums} .phvnote{font-size:13px;line-height:1.85;color:var(--fg2);margin:14px 0 0; white-space:pre-wrap;max-width:62em} .phvside .why,.phvside .warn{margin-top:14px} /* ---------- 批量操作（批七）---------- */ /* 「选择」入口。刻意做成一个【文字按钮】而不是操作条： 顶部那条常驻按钮条刚拆掉（见 PROJECT_STATUS「只有一处入口」那节）， 别又长回来。它跟在 lead / 计数行右边，不吸顶、不占一整行。 */ .leadrow{display:flex;align-items:baseline;gap:16px;margin-bottom:30px} .leadrow .lead{margin-bottom:0;flex:1;min-width:0} .noterow{display:flex;align-items:baseline;gap:16px} .selgo{flex:none;font-family:inherit;font-size:12px;cursor:pointer; background:none;border:1px solid var(--line3);border-radius:8px; padding:5px 13px;color:var(--fg2);transition:color .2s,border-color .2s} .selgo:hover{color:var(--fg);border-color:var(--fg)} /* 选择模式下的卡片。整张卡是「选中/取消」，所以不放复选框控件 —— 缩略图角上一个勾就够，选中时整张卡描边加深。 */ .selable{cursor:pointer} .selable .selck{position:absolute;top:10px;right:10px;width:20px;height:20px; border-radius:50%;border:1px solid var(--line4);background:var(--surface); display:flex;align-items:center;justify-content:center} .selable .selck::after{content:'';width:9px;height:5px;margin-top:-2px; border-left:1.5px solid var(--on-fg);border-bottom:1.5px solid var(--on-fg); transform:rotate(-45deg);opacity:0} .selon .selck{background:var(--fg);border-color:var(--fg)} .selon .selck::after{opacity:1} .selon{outline:2px solid var(--fg);outline-offset:-1px} /* 审核队列那一行的缩略图也要能放下这个勾 */ .qitem .th,.qitem .qth{position:relative} /* 选择模式下行内按钮灰掉：你要么在挨个判，要么在挑一批 */ .selable .acts button,.selable .rejectbox button{opacity:.35} /* 底部那条。只在选择模式下存在 —— 所以它不违反「顶部不加常驻操作条」。 放底部而不是顶部：拇指够得着，而且不遮住刚点过的那张卡。 ⚠️ z-index 【必须低于 .cfm 的 90】。原先写的是 95，于是确认框开着的时候 这条还浮在遮罩之上、按钮照样点得动 —— 实测能开出第二个确认框， 两个都确认就是两批并发跑。80 这一档在后台页里是空的 （.cfm 90 / .bigview 120 / .toast 130，后台页没有前台那个 .nav 50）。 改这个数之前先看一遍上面那几个。 */ .selfoot{position:fixed;left:0;right:0;bottom:0;z-index:80; background:var(--bg2);border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(0,0,0,.18)} .sfin{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:12px 40px;max-width:1400px;margin:0 auto} .sfn{font-size:12.5px;font-weight:500;flex:none;min-width:6.5em} .sfsep{flex:1} .selfoot .btn{font-size:12.5px;padding:8px 16px} .selfoot .btn.off{opacity:.3} .selfoot .sfx{margin-left:4px} /* 底部条是 fixed，不垫高的话最后一行卡片永远被压在下面点不着； toast 默认在 bottom:34px，也正好落在条子里。 两者都跟着 --selfooth 走 —— 那是 selFoot() 把条子【量出来】写上的 （见 admin.js 里那段）。不写死数字：条子有几个按钮取决于选中了什么， 实测会从 199px 长到 248px，固定值追不上。 兜底的 72px 是桌面单行的高度，只在变量还没写上的那一帧用得到。 */ body.selmode .main{padding-bottom:calc(var(--selfooth, 72px) + 36px)} body.selmode .toast{bottom:calc(var(--selfooth, 72px) + 20px)} /* 「我的系列」的状态分区小标题（批四）。 和侧栏的 .grp 同一档字号字距，但多一条横线 —— 它要在一列卡片之间 把节奏切开，光靠间距分不出来。 */ /* 吸顶（八-4）。它是【内容结构】，像表格的表头 —— 和上一轮拆掉的那条 「常驻按钮条」不是一回事：那条是页面级的工具栏、一直占着位置； 这个薄薄一行，而且滚过这一组就换成下一组的标题。 吸顶顺带解决了「选择入口够不着」：滚到哪一组，那一组的 「选这组」就贴在顶上，不用翻回页首。 top:0 —— 后台页没有吸顶导航（侧栏就是导航）。 背景必须是不透明的 --bg：卡片会从它底下滚过去。 z-index 5 只要压住卡片就够，别往上加 —— 底部条 80、.cfm 90 在它上面。 组间距仍然用 margin：贴住时 margin 不参与，但那时标题已经在视窗最上方， 上面没有内容会从缝里露出来，所以不用改成 padding。 只补了一点 padding-top，让贴住的那一条不至于贴着字。 */ .sergrp{position:sticky;top:0;z-index:5;background:var(--bg); display:flex;align-items:center;gap:9px; margin:30px 0 12px;padding:8px 0 7px;border-bottom:1px solid var(--line)} .sergrp:first-of-type{margin-top:20px} .sergrp b{font-size:11px;font-weight:400;letter-spacing:.16em;color:var(--fg2); text-transform:uppercase} .sergrp i{font-style:normal;font-size:11px;color:var(--fg3); font-variant-numeric:tabular-nums} /* 分区标题右边那个「选这组 / 取消这组」（八-2）。 推到最右、做得很轻 —— 它每一组都有一个，做重了整页就成了一排按钮。 平时几乎看不见，鼠标扫过去才亮起来。 */ .sergrp .grpsel{margin-left:auto;flex:none;font-family:inherit;font-size:11px; cursor:pointer;background:none;border:1px solid transparent;border-radius:7px; padding:3px 9px;color:var(--fg3);transition:color .2s,border-color .2s} .sergrp .grpsel:hover{color:var(--fg);border-color:var(--line3)} /* 选择模式下让它亮一档 —— 那时它是主要的操作方式 */ body.selmode .sergrp .grpsel{color:var(--fg2);border-color:var(--line3)} body.selmode .sergrp .grpsel:hover{color:var(--fg);border-color:var(--fg)} /* 系列卡片：整张可点，按钮已经全部收进弹窗 */ .wcard.serc{cursor:pointer} .wcard.serc:hover{border-color:var(--line4)} .wcard.serc:focus-visible{outline:2px solid var(--fg);outline-offset:2px} /* 审核卡片底部那句「点开看」 */ .qopen{margin-top:12px;font-size:12px;color:var(--fg2)} .qitem{cursor:pointer} .qitem:hover{border-color:var(--line4)} .qitem:focus-visible{outline:2px solid var(--fg);outline-offset:2px} /* ---------- 系列预览页 · 编辑态（一-3）---------- 编辑和观赏刻意长得不一样。观赏那套是 1200px 宽、块间 120px， 12 张的系列有一万像素高 —— 在那上面拖一次要跨大半个系列。 所以编辑态把每张压成一行矮卡片，整个系列一两屏装得下， 真实版式点「预览」看。两套 CSS 互不打扰，阶段二改观赏视觉时 不用顺带验编辑态有没有被改坏。 */ /* 顶上那条开关。sticky 贴在导航下面 —— 导航是 position:fixed、 高 78px（见 body.pad），z-index 50，所以这里压低一档。 底色必须不透明，否则滚动时照片会从它后面透出来。 */ .pvbar{position:sticky;top:78px;z-index:40;display:flex;align-items:center;gap:12px; margin-top:20px;padding:10px 14px;border:1px solid var(--line);background:var(--bg)} .pvtabs{display:flex} .pvtabs button{font-family:inherit;font-size:11.5px;padding:6px 14px;cursor:pointer; border:1px solid var(--line);background:none;color:var(--fg2);transition:all .2s} .pvtabs button + button{border-left:none} .pvtabs button:hover{color:var(--fg)} .pvtabs button.on{background:var(--fg);border-color:var(--fg);color:var(--on-fg)} .pvstat{margin-left:auto;font-size:11.5px;color:var(--fg2); font-variant-numeric:tabular-nums} .pvstat.bad{color:var(--danger)} /* 说明条上「为什么这里不给编辑」那一句 */ .pvstrip .pvwhy{color:var(--fg3);font-size:11.5px} .pvedit{max-width:1080px;margin:0 auto;padding:30px 0 72px} .pvehint{font-size:12px;color:var(--fg2);line-height:1.8;margin-bottom:20px} .pvehint i{display:block;font-style:normal;font-size:11.5px;color:var(--fg3)} .pvedit .pvghost{max-width:none;margin-bottom:22px} .pvpref{display:block;margin-bottom:28px} .pvpref b{font-size:12px;font-weight:500} .pvpref i{display:block;font-style:normal;font-size:11px;color:var(--fg3);margin:2px 0 7px} .pvelist{display:flex;flex-direction:column;gap:10px} .pve{display:flex;align-items:flex-start;gap:14px;padding:12px; border:1px solid var(--line);background:var(--surface)} .pve.dragging{opacity:.4} /* 放下的位置：拖过的那一行上边或下边画一条线 */ .pve.over-a{box-shadow:0 -2px 0 var(--fg)} .pve.over-b{box-shadow:0 2px 0 var(--fg)} /* 手柄。只有精确指针（鼠标）才发得出来，见 preview.js 的 ctx.fine */ .pveh{flex:none;align-self:center;cursor:grab;user-select:none; padding:6px 2px;color:var(--fg5);font-size:15px;line-height:1} .pveh:hover{color:var(--fg2)} .pveh:active{cursor:grabbing} .pvet{position:relative;flex:none;width:150px;height:100px;background:var(--imgbg); overflow:hidden} .pvet img{width:100%;height:100%;object-fit:cover} /* 序号。换完位置由 marks() 直接改 textContent，不重画整页 */ .pvet u{position:absolute;left:0;top:0;text-decoration:none;font-size:10px; padding:2px 6px;background:rgba(10,10,10,.62);color:#fff; font-variant-numeric:tabular-nums} .pvef{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .pvem{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--fg3)} .pveb{flex:none;display:flex;flex-direction:column;gap:6px} .pveb button{font-family:inherit;font-size:12px;line-height:1;width:28px;height:26px; cursor:pointer;border:1px solid var(--line);background:none;color:var(--fg2); transition:all .2s} .pveb button:hover:not(:disabled){border-color:var(--fg);color:var(--fg)} .pveb button:disabled{opacity:.3;cursor:not-allowed} /* ---------- admin ---------- */ .adm{display:flex;min-height:900px} .side{width:232px;flex:none;border-right:1px solid var(--line);padding:28px 0} .side .brand{padding:0 24px 28px} .side a{display:block;padding:9px 24px;font-size:13px;color:var(--fg2)} .side a.on{color:var(--fg);background:var(--surface2);border-left:2px solid var(--fg);padding-left:22px} /* 「＋ 新建」那一项：圆角描边框，和下面几条纯文字的入口拉开一档。 它是这个后台里唯一「开始做一件事」的入口，其余都是「去看已有的东西」。 .on 的左边竖线在圆角框上会显得别扭，所以这里把它盖掉、换成整框加深。 （原来这个类叫 .up、那一项叫「上传」；现在它盖着上传和新建系列两件事。） */ .side a.new{margin:2px 16px 4px;padding:9px 14px;border:1px solid var(--line3); border-radius:10px;color:var(--fg)} .side a.new:hover{border-color:var(--fg);background:var(--surface2)} .side a.new.on{border-color:var(--fg);background:var(--surface2);border-left-width:1px; padding-left:14px} .side .grp{font-size:10px;letter-spacing:.16em;color:var(--fg3);padding:22px 24px 6px;text-transform:uppercase} .side .badge{float:right;background:var(--fg);color:var(--on-fg);font-size:10px;padding:1px 6px;border-radius:9px} .main{flex:1;padding:36px 40px} .main h1{font-family:var(--serif);font-weight:400;font-size:28px;margin-bottom:6px} .main .lead{font-size:13px;color:var(--fg2);margin-bottom:30px} .qitem{display:flex;gap:24px;border:1px solid var(--line);padding:16px;margin-bottom:16px;background:var(--surface)} .qitem .th{width:210px;height:140px;flex:none;overflow:hidden;background:var(--imgbg)} .qitem .th img{width:100%;height:100%;object-fit:cover} .qitem .body{flex:1} .qitem h4{font-size:16px;font-weight:500} .qitem .sub{font-size:12px;color:var(--fg2);margin-top:3px} .qitem .fields{display:flex;gap:30px;margin-top:14px;font-size:11px;color:var(--fg2)} .qitem .fields b{display:block;color:var(--fg);font-weight:400;font-size:12px;margin-top:2px} .qitem .nt b{font-weight:400;color:var(--fg3);margin-right:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase} .qitem .nt{margin-top:12px;font-size:12px;color:var(--prose2);max-width:520px; border-left:2px solid var(--line);padding-left:10px} .acts{display:flex;flex-direction:column;gap:8px;justify-content:center} /* ---------- 后台：补充 ---------- */ body[data-page]{background:var(--bg2)} .adm{min-height:100vh} .side{background:var(--bg);display:flex;flex-direction:column} .side .brand a{display:block} .side .brand em{display:block;margin:4px 0 0;font-size:9px;letter-spacing:.28em;opacity:.5} .side a{transition:color .2s,background .2s} .side a:hover{color:var(--fg)} .side a.off{opacity:.42;cursor:default} .side a.off:hover{color:var(--fg2)} .sidefoot{margin-top:auto;padding:22px 24px 4px;border-top:1px solid var(--line)} .sidefoot .demo{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px} .sidefoot .demo span{font-size:9px;letter-spacing:.16em;color:var(--fg3); text-transform:uppercase;width:100%;margin-bottom:2px} .sidefoot button{font-family:inherit;font-size:11px;padding:4px 10px;cursor:pointer; border:1px solid var(--line);background:none;color:var(--fg2);transition:all .2s} .sidefoot button:hover{border-color:var(--line4);color:var(--fg)} .sidefoot button.on{background:var(--fg);border-color:var(--fg);color:var(--on-fg)} .langbtn2,.thmsel2{width:100%;margin-top:4px} /* 按钮 */ .btn{font-family:inherit;font-size:12px;padding:9px 16px;cursor:pointer;white-space:nowrap; border:1px solid var(--fg);background:var(--fg);color:var(--on-fg);transition:all .2s} .btn:hover{opacity:.84} .btn.g{background:none;color:var(--fg)} .btn.g:hover{background:var(--surface2);opacity:1} .btn.t{background:none;border-color:transparent;color:var(--fg2);text-decoration:underline; text-underline-offset:3px} .btn.t:hover{color:var(--fg);background:none} .btn.danger{background:var(--danger2);border-color:var(--danger2)} .btn.sm{font-size:11px;padding:6px 12px} .btn.big{padding:13px 26px;font-size:13px} .btn.off{opacity:.4;cursor:default} .btn:disabled{opacity:.35;cursor:not-allowed} /* 队列 */ .qcount{font-size:11px;letter-spacing:.14em;color:var(--fg3);text-transform:uppercase; margin-bottom:14px} .qitem{transition:opacity .3s,transform .3s} .qitem.gone{opacity:0;transform:translateY(-8px)} .qitem .th{cursor:zoom-in} .rejectbox{display:none;margin-top:14px;border-top:1px solid var(--line);padding-top:14px} .rejectbox.on{display:block} .rejectbox .rt{font-size:13px;font-weight:500} .rejectbox .rh{font-size:11px;color:var(--fg2);margin:3px 0 8px} .rejectbox textarea,.ufields textarea,.ufields input,.ufields select, .pvpref textarea,.pvef input,.pvef textarea{ width:100%;font-family:inherit;font-size:13px;padding:9px 11px; border:1px solid var(--line);background:var(--surface);color:var(--fg);resize:vertical;outline:none; transition:border-color .2s} .rejectbox textarea:focus,.ufields textarea:focus,.ufields input:focus, .pvpref textarea:focus,.pvef input:focus,.pvef textarea:focus{border-color:var(--line5)} .rejectbox .rb{display:flex;gap:8px;margin-top:9px} /* 空状态 */ .blank{border:1px dashed var(--line2);padding:64px 20px;text-align:center;background:var(--surface)} .blank b{display:block;font-family:var(--serif);font-weight:400;font-size:19px} .blank span{font-size:13px;color:var(--fg2);display:block;margin-top:6px} /* 「新建」选择页：并排两张大卡。 左边是 （真链接，中键能开新标签页），右边是