/* ============================================================ 来宝贝中台 · 志愿者资料库原型 · 基础样式 设计约束： 1) 移动优先（客户主要在手机上看资料） 2) 零外部依赖（离线可点，可直接转 Blade + Tailwind） 3) 类名按语义分层，便于后续映射到 Tailwind / Blade partials ============================================================ */ :root{ --ink:#12212f; --ink2:#47606f; --ink3:#7d92a3; --line:#e2e8f0; --line2:#d3dde7; --bg:#f5f7fa; --card:#ffffff; --accent:#1f5fd6; --accent2:#0e3f96; --soft:#eaf1fd; --ok:#0f7a52; --okbg:#e9f6f0; --warn:#a75b12; --warnbg:#fdf3e7; --risk:#a3282a; --riskbg:#fdecec; --r:10px; --r-sm:7px; --shadow:0 1px 3px rgba(18,33,47,.06), 0 6px 20px rgba(18,33,47,.05); /* ---------- 字号令牌（9 档，全站唯一出口） ---------- 调全站字号只改这里，不要在组件里写死 px。 档位对应语义：micro 角标 / xs 标签 / sm 次要 / base 正文 / md 表单 / lg 小标 / xl 区块标 / 2xl 页标 / 3xl 大标 2026-10-29 明哥定调：常用区间 12.5–14.5（正文 14.5，辅助 13，角标 12.5） */ --fs-micro:12.5px; --fs-xs:13px; --fs-sm:13.5px; --fs-base:14.5px; --fs-md:15.5px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:23px; --fs-3xl:29px; } /* 大屏只抬标题档，正文与手机保持一致 —— 避免同一段文字在宽屏上又变大一截 */ @media (min-width:1200px){ :root{ --fs-xl:21px; --fs-2xl:24px; --fs-3xl:30px; } } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.68 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block} a{color:var(--accent); text-decoration:none} button{font-family:inherit} /* ---------- layout ---------- */ .wrap{max-width:1000px; margin:0 auto; padding:0 16px} .wrap-wide{max-width:1160px; margin:0 auto; padding:0 16px} .page{padding:20px 0 96px} .row{display:flex; gap:10px; align-items:center} .row-between{display:flex; gap:10px; align-items:center; justify-content:space-between} .col{display:flex; flex-direction:column; gap:10px} .spacer{flex:1} .muted{color:var(--ink3)} .small{font-size:var(--fs-sm)} .tiny{font-size:var(--fs-xs)} /* ---------- appbar ---------- */ .appbar{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line); } .appbar .inner{max-width:1160px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px} .brand{display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.2px; font-size:var(--fs-lg)} .brand i{ width:24px; height:24px; border-radius:7px; flex:none; background:linear-gradient(135deg,#1f5fd6,#0e3f96); display:grid; place-items:center; color:#fff; font-size:var(--fs-xs); font-style:normal; font-weight:700; } .brand u{text-decoration:none; color:var(--ink3); font-weight:500; font-size:var(--fs-sm); margin-left:2px} .appnav{display:flex; gap:2px; margin-left:8px; overflow:auto; scrollbar-width:none} .appnav::-webkit-scrollbar{display:none} .appnav a{ padding:6px 11px; border-radius:7px; font-size:var(--fs-base); color:var(--ink2); white-space:nowrap; border-bottom:2px solid transparent; } .appnav a:hover{background:#f1f5fa; color:var(--accent2)} .appnav a.on{color:var(--accent2); font-weight:600; background:var(--soft)} .whoami{ display:flex; align-items:center; gap:7px; font-size:var(--fs-sm); color:var(--ink2); border:1px solid var(--line); border-radius:999px; padding:4px 10px 4px 4px; white-space:nowrap; } .whoami .av{width:22px; height:22px; border-radius:50%; background:#dfe8f3; display:grid; place-items:center; font-size:var(--fs-micro); color:var(--ink2); font-weight:700} /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line2); background:#fff; color:var(--ink); padding:9px 15px; border-radius:8px; font-size:var(--fs-base); font-weight:500; cursor:pointer; transition:.15s; white-space:nowrap; } .btn:hover{border-color:#b9c8d6; background:#fbfcfe} .btn-primary{background:var(--accent); border-color:var(--accent); color:#fff} .btn-primary:hover{background:var(--accent2); border-color:var(--accent2)} .btn-ghost{background:transparent; border-color:transparent; color:var(--ink2)} .btn-ghost:hover{background:#eef3f9} .btn-sm{padding:6px 11px; font-size:var(--fs-sm); border-radius:6px} .btn-lg{padding:12px 21px; font-size:var(--fs-md)} .btn-block{width:100%} .btn[disabled]{opacity:.45; cursor:not-allowed} .btn-danger{border-color:#e0b3b4; color:var(--risk); background:#fff} .btn-danger:hover{background:var(--riskbg)} /* ---------- chips / badges ---------- */ .chip{ display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line2); background:#fff; color:var(--ink2); padding:6px 12px; border-radius:999px; font-size:var(--fs-sm); cursor:pointer; white-space:nowrap; transition:.15s; } .chip:hover{border-color:#b9c8d6} .chip.on{background:var(--soft); border-color:#a8c4ee; color:var(--accent2); font-weight:600} .chip.static{cursor:default} .chip.static:hover{border-color:var(--line2)} .chip.x{padding-right:7px} .chip .rm{font-size:var(--fs-md); line-height:1; color:var(--ink3); margin-left:1px} .chip .rm:hover{color:var(--risk)} /* ---------- 生成链接页：带首图的选择卡片（.spick，勿与资料库多选的 .pick 撞名） ---------- 图宽跟随编号文字（卡片兜底 min-width，防止编号太短时图小到看不清）， 高度由 media_assets 的 width/height 推出 aspect-ratio，图片等比例不裁切 */ .spickrow{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start} .spick{ display:flex; flex-direction:column; gap:6px; width:max-content; min-width:78px; max-width:130px; padding:6px; border:1px solid var(--line2); border-radius:9px; background:#fff; cursor:pointer; transition:.15s; } .spick:hover{border-color:#b9c8d6} .spick.on{border-color:#7fb0e8; background:var(--soft)} .spick-img{display:block; width:100%; aspect-ratio:3/4; border-radius:6px; overflow:hidden; background:#f1f4f8} .spick-img img{display:block; width:100%; height:100%; object-fit:cover} .spick-none{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:var(--fs-xs); color:var(--ink3); background:#f6f8fa; } .spick-code{ display:flex; align-items:center; justify-content:center; gap:5px; font-size:var(--fs-sm); color:var(--ink2); white-space:nowrap; } .spick.on .spick-code{color:var(--accent2); font-weight:600} .b{display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); padding:2px 8px; border-radius:5px; font-weight:600; white-space:nowrap} .b-ok{background:var(--okbg); color:var(--ok)} .b-new{background:var(--soft); color:var(--accent2)} .b-warn{background:var(--warnbg); color:var(--warn)} .b-risk{background:var(--riskbg); color:var(--risk)} .b-gray{background:#eef1f5; color:var(--ink3)} .b-dot::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; display:inline-block} /* ---------- panels ---------- */ .panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)} .panel-h{padding:13px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; justify-content:space-between} .panel-h h3{margin:0; font-size:var(--fs-md); letter-spacing:-.1px} .panel-b{padding:16px} .panel-b.tight{padding:10px} .notice{ border-left:3px solid var(--accent); background:#f7fbff; border-radius:var(--r-sm); padding:11px 14px; font-size:var(--fs-base); color:var(--ink2); } .notice.warn{border-color:#d0871f; background:var(--warnbg)} .notice.risk{border-color:#c0393b; background:var(--riskbg)} .notice.ok{border-color:var(--ok); background:var(--okbg)} .notice b{color:var(--ink)} /* ---------- 筛选条 ---------- */ .filterbar{ position:sticky; top:55px; z-index:30; background:var(--bg); border-bottom:1px solid var(--line); padding:10px 0; } .nlp{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line2); border-radius:9px; padding:8px 12px; } .nlp input{ flex:1; border:0; outline:0; font-size:var(--fs-base); color:var(--ink); background:transparent; font-family:inherit; min-width:0; } .nlp input::placeholder{color:#9fb0c0} .parsed{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; } .parsed .lbl{font-size:var(--fs-sm); color:var(--ink3); margin-right:2px} .chiprow{display:flex; gap:6px; overflow:auto; padding:2px 0 4px; scrollbar-width:none} .chiprow::-webkit-scrollbar{display:none} /* ---------- 资料卡片 ---------- */ .grid-donors{ display:grid; gap:12px; margin-top:14px; grid-template-columns:repeat(auto-fill, minmax(158px, 1fr)); } @media (min-width:720px){ .grid-donors{grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); gap:16px} } .dcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; position:relative; transition:.16s; display:flex; flex-direction:column; } .dcard:hover{border-color:#b9c8d6; transform:translateY(-1px); box-shadow:var(--shadow)} .dcard.sel{border-color:var(--accent); box-shadow:0 0 0 2px rgba(31,95,214,.16)} /* 照片位：真实项目替换为受控媒体副本；原型中一律用占位块，避免使用真人照片 */ .thumb{ aspect-ratio:4/5; position:relative; overflow:hidden; background:linear-gradient(150deg,#e9eff7 0%,#dbe5f0 52%,#cfdcea 100%); } .thumb.g2{background:linear-gradient(150deg,#eef0f6 0%,#e0e4ee 52%,#d3d9e6 100%)} .thumb.g3{background:linear-gradient(150deg,#eaf2f0 0%,#dce8e4 52%,#cfded9 100%)} .thumb.g4{background:linear-gradient(150deg,#f2eee9 0%,#e8e1d8 52%,#dcd3c7 100%)} .thumb::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.32) 0 1px,transparent 1px 9px); opacity:.55; } .thumb .ph{ position:absolute; inset:0; display:grid; place-items:center; font-size:var(--fs-xs); letter-spacing:.16em; color:#8fa2b4; text-transform:uppercase; font-weight:600; } .thumb .code{ position:absolute; left:8px; bottom:7px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; color:#3d5568; background:rgba(255,255,255,.82); padding:2px 7px; border-radius:5px; } .thumb .us{ position:absolute; right:7px; top:7px; font-size:var(--fs-micro); font-weight:700; background:rgba(255,255,255,.9); color:var(--ok); padding:2px 6px; border-radius:5px; } .thumb .us.no{color:var(--ink3)} .dbody{padding:10px 11px 12px; display:flex; flex-direction:column; gap:7px; flex:1} .dmeta{display:flex; flex-wrap:wrap; gap:4px} .dmeta span{ font-size:var(--fs-xs); color:var(--ink2); background:#f2f5f9; border-radius:5px; padding:1.5px 6px; white-space:nowrap; } .dco{display:flex; flex-wrap:wrap; gap:4px} .dco i{ font-style:normal; font-size:var(--fs-xs); color:var(--accent2); background:var(--soft); border:1px solid #d3e2f8; border-radius:4px; padding:1px 5px; white-space:nowrap; } .dco i.more{background:#f2f5f9; border-color:#e4eaf1; color:var(--ink3)} .pick{ position:absolute; right:8px; top:8px; width:22px; height:22px; border-radius:6px; border:1.5px solid rgba(255,255,255,.9); background:rgba(255,255,255,.7); display:none; place-items:center; cursor:pointer; z-index:3; box-shadow:0 1px 4px rgba(18,33,47,.14); } body.selecting .pick{display:grid} .dcard.sel .pick{background:var(--accent); border-color:var(--accent); color:#fff} .pick svg{width:12px; height:12px; display:none} .dcard.sel .pick svg{display:block} /* 选中态底部条 */ .selbar{ position:fixed; left:0; right:0; bottom:0; z-index:50; background:rgba(255,255,255,.97); border-top:1px solid var(--line); backdrop-filter:blur(10px); padding:10px 16px; display:none; align-items:center; gap:12px; box-shadow:0 -4px 18px rgba(18,33,47,.06); } .selbar.on{display:flex} .selbar .n{font-size:var(--fs-base); color:var(--ink2)} .selbar .n b{font-size:var(--fs-lg); color:var(--accent2)} /* ---------- 详情页 ---------- */ .gallery{display:flex; gap:8px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:4px; scrollbar-width:none} .gallery::-webkit-scrollbar{display:none} .gallery .shot{ flex:none; width:74%; max-width:300px; aspect-ratio:3/4; border-radius:var(--r); scroll-snap-align:start; position:relative; overflow:hidden; } @media (min-width:720px){ .gallery .shot{width:31%} } .kv{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border-radius:var(--r-sm); overflow:hidden} @media (min-width:720px){ .kv{grid-template-columns:repeat(4,1fr)} } .kv div{background:#fff; padding:10px 13px} .kv dt{font-size:var(--fs-xs); color:var(--ink3); margin:0 0 2px} .kv dd{margin:0; font-size:var(--fs-md); font-weight:600; color:var(--ink)} .actionbar{ position:sticky; bottom:0; z-index:35; background:rgba(255,255,255,.97); border-top:1px solid var(--line); backdrop-filter:blur(10px); padding:10px 0; margin-top:18px; } .actionbar .inner{max-width:1000px; margin:0 auto; padding:0 16px; display:flex; gap:8px; align-items:center} /* ---------- 净版分享页（无任何品牌元素） ---------- */ .share-body{background:#fbfbfc} .share-head{padding:26px 0 18px; border-bottom:1px solid #eceff3; background:#fff} .share-head h1{margin:0 0 6px; font-size:var(--fs-xl); letter-spacing:-.2px} .share-meta{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:var(--fs-sm); color:#7d8b98} .share-meta b{color:#3d4c59; font-weight:600} .share-note{ margin:16px 0 0; font-size:var(--fs-sm); color:#8b98a4; line-height:1.7; border-left:2px solid #e2e8f0; padding-left:11px; } .share-item{ background:#fff; border:1px solid #eceff3; border-radius:10px; overflow:hidden; margin-top:14px; } .share-item .si-h{padding:13px 16px 0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap} .share-item .si-h b{font-size:var(--fs-md); letter-spacing:.02em} .share-item .si-b{padding:12px 16px 16px} .share-photo{width:100%; border-radius:7px; overflow:hidden; margin-bottom:12px} .share-foot{padding:26px 0 40px; text-align:center; font-size:var(--fs-xs); color:#98a4b0; line-height:1.9} /* 失效状态页 */ .state-card{max-width:420px; margin:60px auto; background:#fff; border:1px solid #eceff3; border-radius:12px; padding:32px 26px; text-align:center} .state-card .ic{width:44px; height:44px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; font-size:var(--fs-2xl); background:#f4f6f9; color:#8b98a4} .state-card h2{margin:0 0 8px; font-size:var(--fs-xl)} .state-card p{margin:0; font-size:var(--fs-base); color:#7d8b98; line-height:1.8} /* ---------- 上传页 ---------- */ .dropzone{ border:1.5px dashed #c2d0de; border-radius:var(--r); background:#fbfcfe; padding:34px 20px; text-align:center; transition:.18s; cursor:pointer; } .dropzone:hover,.dropzone.over{border-color:var(--accent); background:#f5f9ff} .dropzone .ic{font-size:var(--fs-3xl); color:#a9bacb; margin-bottom:8px} .dropzone .t{font-size:var(--fs-md); font-weight:600; margin-bottom:4px} .dropzone .s{font-size:var(--fs-sm); color:var(--ink3)} .flist{display:flex; flex-direction:column; gap:8px} .fitem{ display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:var(--fs-base); } .ficon{ width:30px; height:30px; border-radius:7px; flex:none; display:grid; place-items:center; font-size:var(--fs-micro); font-weight:700; letter-spacing:.02em; } .f-pdf{background:#fdeceb; color:#a3282a} .f-zip{background:#fdf3e7; color:#a75b12} .f-img{background:#e9f6f0; color:#0f7a52} .f-doc{background:#eaf1fd; color:#0e3f96} .fitem .fn{flex:1; min-width:0} .fitem .fn b{display:block; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%} .fitem .fn span{font-size:var(--fs-xs); color:var(--ink3)} /* 字段置信度 */ .fld{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px dashed var(--line)} .fld:last-child{border-bottom:0} .fld label{width:104px; flex:none; font-size:var(--fs-sm); color:var(--ink3)} .fld .val{flex:1; font-size:var(--fs-base)} .fld .val input, .fld .val select{ width:100%; border:1px solid var(--line2); border-radius:6px; padding:5px 8px; font-size:var(--fs-base); font-family:inherit; color:var(--ink); background:#fff; } .conf{font-size:var(--fs-micro); font-weight:700; padding:1px 6px; border-radius:4px; flex:none} .c-hi{background:var(--okbg); color:var(--ok)} .c-mid{background:var(--warnbg); color:var(--warn)} .c-lo{background:var(--riskbg); color:var(--risk)} /* ---------- 后台审核 ---------- */ .two{display:grid; gap:14px} @media (min-width:860px){ .two{grid-template-columns:1fr 1fr} } .fields{display:flex; flex-direction:column} .frow{display:flex; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:var(--fs-base); align-items:flex-start} .frow:last-child{border-bottom:0} .frow .k{width:120px; flex:none; color:var(--ink3); font-size:var(--fs-sm)} .frow .v{flex:1; color:var(--ink)} .frow.locked{background:linear-gradient(90deg,var(--riskbg),transparent); margin:0 -16px; padding:9px 16px} .perm{font-size:var(--fs-micro); color:var(--risk); font-weight:700; letter-spacing:.02em; white-space:nowrap} .tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); padding:0 16px} .tab{ padding:9px 4px; margin-right:16px; font-size:var(--fs-base); color:var(--ink2); cursor:pointer; border-bottom:2px solid transparent; background:none; border-top:0; border-left:0; border-right:0; } .tab.on{color:var(--accent2); font-weight:600; border-bottom-color:var(--accent)} /* ---------- 目录页 ---------- */ .hero{ background:linear-gradient(135deg,#0b2540 0%,#133a5e 58%,#1b5183 100%); color:#fff; padding:38px 0 32px; position:relative; overflow:hidden; } .hero::after{content:""; position:absolute; right:-90px; top:-110px; width:330px; height:330px; border-radius:50%; background:radial-gradient(circle,rgba(90,170,255,.2),transparent 66%)} .hero .in{position:relative; z-index:1} .hero h1{margin:8px 0 8px; font-size:var(--fs-3xl); letter-spacing:-.4px; line-height:1.35} .hero p{margin:0; color:#bcd4e8; font-size:var(--fs-base); max-width:640px; line-height:1.85} .tagline{display:inline-block; font-size:var(--fs-xs); letter-spacing:.14em; color:#9fc6f0; border:1px solid rgba(159,198,240,.4); border-radius:999px; padding:3px 11px; text-transform:uppercase} .nav-grid{display:grid; gap:12px; margin-top:18px; grid-template-columns:1fr} @media (min-width:680px){ .nav-grid{grid-template-columns:1fr 1fr} } .nav-card{ display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px 17px; transition:.16s; color:inherit; } .nav-card:hover{border-color:#a8c4ee; box-shadow:var(--shadow); transform:translateY(-1px)} .nav-card .t{display:flex; align-items:center; gap:8px; font-weight:700; font-size:var(--fs-md); margin-bottom:4px} .nav-card .t .no{ width:20px; height:20px; border-radius:6px; background:var(--soft); color:var(--accent2); font-size:var(--fs-xs); display:grid; place-items:center; font-weight:700; flex:none; } .nav-card .d{font-size:var(--fs-sm); color:var(--ink2); line-height:1.75} .nav-card .m{margin-top:9px; display:flex; flex-wrap:wrap; gap:5px} /* ---------- 原型标注（仅 ?from=proto 时显示） ---------- */ .protobar{ position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:99; background:rgba(18,33,47,.9); color:#dbe6f0; font-size:var(--fs-sm); border-radius:999px; padding:7px 8px 7px 15px; display:none; align-items:center; gap:12px; backdrop-filter:blur(8px); box-shadow:0 6px 24px rgba(0,0,0,.18); } .proto.show-proto .protobar{display:flex} .protobar a{color:#8fc0f0; font-size:var(--fs-sm)} .protobar span{opacity:.62} /* ---------- 移动端收敛 ---------- */ @media (max-width:720px){ /* 吸顶筛选区在手机上会占掉近三分之一屏，改为随页面滚动 */ .filterbar{position:static; top:auto} .brand u{display:none} .appnav a{padding:6px 9px; font-size:var(--fs-base)} .whoami{max-width:104px; overflow:hidden; text-overflow:ellipsis} .whoami .av{flex:none} .kv{grid-template-columns:repeat(2,1fr)} .page{padding-bottom:104px} } @media (max-width:400px){ .grid-donors{grid-template-columns:repeat(2,1fr); gap:9px} .dbody{padding:8px 9px 10px} .dmeta span{font-size:var(--fs-xs); padding:1px 5px} } /* ============================================================ LinkedDonors 风格版式（catalog 页 1:1 参考重排 · 2026-10-28） 布局参照截图：顶栏 + 身高快捷行 + 筛选行 + 工具行 + 大图 5 列 仅参照布局与比例，不复制对方品牌素材与源代码 ============================================================ */ .ld-top{position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid #e8edf2} .ld-top-in{max-width:1440px; margin:0 auto; padding:0 22px; height:52px; display:flex; align-items:center; gap:24px} .ld-logo{font-size:var(--fs-xl); font-weight:800; color:#1256a0; letter-spacing:-.3px; white-space:nowrap} .ld-nav{display:flex; gap:2px; flex:1; justify-content:center; overflow:auto; scrollbar-width:none} .ld-nav::-webkit-scrollbar{display:none} .ld-nav a{ padding:15px 13px; font-size:var(--fs-base); font-weight:600; letter-spacing:.03em; color:#5c6b7a; border-bottom:2px solid transparent; white-space:nowrap; } .ld-nav a:hover{color:#12212f} .ld-nav a.on{color:#1e7fe0} .ld-acts{display:flex; gap:15px; align-items:center; color:#5c6b7a; flex:none} .ld-acts .ic{width:18px; height:18px; cursor:pointer; display:block} .ld-acts .ic:hover{color:#12212f} .ld-acts .out{font-size:var(--fs-sm); cursor:pointer; white-space:nowrap} .ld-acts .out:hover{color:#12212f} .ld-filter{background:#fff; border-bottom:1px solid #eef2f6; padding-bottom:13px} .ld-hrow{ max-width:1440px; margin:0 auto; padding:11px 22px 0; display:flex; justify-content:center; gap:28px; font-size:var(--fs-sm); color:#5c6b7a; flex-wrap:wrap; } .ld-hrow span{cursor:pointer; padding-bottom:3px; border-bottom:2px solid transparent; white-space:nowrap} .ld-hrow span:hover{color:#12212f} .ld-hrow span.on{color:#12212f; font-weight:600; border-bottom-color:#12212f} .ld-frow{max-width:1440px; margin:0 auto; padding:13px 22px 0; display:flex; gap:13px; align-items:flex-end; flex-wrap:wrap} .ld-age{ width:200px; border:0; border-bottom:1px solid #c9d4de; padding:5px 2px; font-size:var(--fs-base); outline:0; background:transparent; color:var(--ink); font-family:inherit; } .ld-age::placeholder{color:#a3b1bf} .ld-age:focus{border-bottom-color:#1e7fe0} .ld-sel{ border:1px solid #d5dee6; border-radius:4px; padding:5px 8px; font-size:var(--fs-sm); color:#3d4c59; background:#fff; min-width:108px; font-family:inherit; outline:0; cursor:pointer; } .ld-sel:focus{border-color:#1e7fe0} .ld-go{ color:#fff; font-weight:700; font-size:var(--fs-sm); cursor:pointer; white-space:nowrap; background:linear-gradient(135deg,var(--aurora-ink),var(--aurora-end)); border:0; border-radius:999px; padding:7px 20px; letter-spacing:.04em; box-shadow:0 4px 12px -4px var(--aurora-glow); } .ld-go:hover{filter:brightness(1.07); box-shadow:0 6px 16px -4px var(--aurora-glow)} .ld-go:active{filter:brightness(.95)} .ld-count{font-size:var(--fs-sm); color:#8b98a4; white-space:nowrap} .ld-frow .parsed{flex-basis:100%; margin-top:2px} .ld-tools{max-width:1440px; margin:0 auto; padding:16px 22px 12px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap} .ld-tools .hint{font-size:var(--fs-sm); color:#98a4b0} .ld-tbtns{display:flex; gap:8px; flex-wrap:wrap} .ld-tbtn{ display:inline-flex; gap:6px; align-items:center; border:1px solid #b9cfe8; color:#1e7fe0; background:#fff; font-size:var(--fs-sm); font-weight:600; padding:6px 13px; border-radius:4px; cursor:pointer; white-space:nowrap; transition:.15s; } .ld-tbtn:hover{background:#f2f8ff; border-color:#8fb8ec} .ld-tbtn svg{width:13px; height:13px} .ld-wrap{max-width:1440px; margin:0 auto; padding:0 22px 100px} .ldgrid{display:grid; gap:14px; grid-template-columns:repeat(5, 1fr)} @media (max-width:1360px){ .ldgrid{grid-template-columns:repeat(4, 1fr)} } @media (max-width:1080px){ .ldgrid{grid-template-columns:repeat(3, 1fr)} } @media (max-width:700px){ .ldgrid{grid-template-columns:repeat(2, 1fr); gap:10px} } .ldcard{position:relative; cursor:pointer} .ldcard .ldimg{border-radius:3px; overflow:hidden} .ldcard.sel .ldimg{outline:3px solid #1e7fe0; outline-offset:-3px} body.selecting .fav, body.selecting .ldicons{display:none} .ldimg .cam{ position:absolute; right:7px; bottom:7px; width:20px; height:20px; border-radius:50%; z-index:2; background:rgba(255,255,255,.9); display:grid; place-items:center; color:#5c6b7a; } /* 左上角勾选框：与右上 ♡ 同一选中状态；点它只切换选择、不跳详情页 */ .ldimg .ck{ position:absolute; left:8px; top:8px; width:22px; height:22px; border-radius:5px; z-index:2; border:2px solid #fff; background:rgba(17,34,51,.28); color:transparent; display:grid; place-items:center; cursor:pointer; transition:background .12s; } .ldimg .ck:hover{background:rgba(17,34,51,.45)} .ldimg .ck.on{background:#1e7fe0; color:#fff} .ldimg .ck > svg{width:14px; height:14px; display:block; pointer-events:none} .ldimg .ck.on:hover{background:#1668bd} body.selecting .ck{display:none} /* 悬停信息层：鼠标停在照片上时展示资料（同参考站）；z 低于勾选框/摄像头，不挡点击 */ .ldimg .hover-info{ position:absolute; inset:0; z-index:1; background:rgba(9,17,28,.74); color:#fff; opacity:0; transition:opacity .16s; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:10px 12px; text-align:center; pointer-events:none; } .ldcard:hover .hover-info{opacity:1} .hover-info .hi{font-size:var(--fs-micro); line-height:1.45; color:#b7c3cf} .hover-info .hi b{display:block; color:#fff; font-size:var(--fs-sm); font-weight:600; margin-top:1px} .hover-info .hi b.na{color:#8494a5; font-weight:400} .ldrow1{display:flex; justify-content:space-between; align-items:center; margin-top:7px; gap:8px; padding:0 10px} .ldrow1 .code{font-size:var(--fs-base); font-weight:700; color:var(--ink); letter-spacing:.02em} .ldicons{display:flex; gap:9px; color:#8b98a4; flex:none} .ldicons .i{width:15px; height:15px; cursor:pointer; display:block; color:inherit} .ldicons .i:hover{color:#12212f} .ldicons .i.fav.on{color:#e0245e; fill:currentColor} /* 图标里嵌的 svg 必须跟着外框走，否则 svg 无宽高会塌成 0×0（曾导致卡片 ♡ 与下载图标完全不可见） */ .ldicons .i > svg{width:100%; height:100%; display:block} .ldicons a.i{text-decoration:none} .ldrow2{display:flex; align-items:center; gap:8px; margin-top:1px; font-size:var(--fs-xs); color:#98a4b0; padding:1px 10px 10px} .ldrow2 .cnt{display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); color:#98a4b0} .ldrow2 .cnt > svg{width:12px; height:12px; flex:none} /* 已收藏标记：♡ 只在图标列里，小屏上容易被忽略，这里补一个文字兜底 */ .ldrow2 .favtag{ margin-left:auto; font-size:var(--fs-micro); font-weight:600; color:#e0245e; background:#fdeef3; border-radius:4px; padding:0 5px; line-height:1.6; } @media (max-width:700px){ .ld-top-in{gap:12px; padding:0 14px} .ld-logo{font-size:var(--fs-xl)} .ld-nav a{padding:14px 8px; font-size:var(--fs-sm)} .ld-acts{gap:10px} .ld-hrow{gap:18px; padding-top:9px} .ld-frow{gap:9px; padding-top:11px} .ld-age{width:100%; flex-basis:100%} .ld-sel{min-width:0; flex:1} .ld-tools{padding:13px 14px 10px} .ld-tools .hint{flex-basis:100%} .ld-wrap{padding:0 14px 110px} } /* ---------- S1 上传建档补充 ---------- */ .f-doc{background:#eef2fd; color:#25459a} .fld .val input, .fld .val select, .fld .val textarea{ width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:7px; font-family:inherit; font-size:var(--fs-base); color:var(--ink); background:#fff; } .fld .val input:disabled{background:#f7f8fa; color:#9ca3af} .fld .val input:focus, .fld .val select:focus, .fld .val textarea:focus{ outline:2px solid #bfdbfe; border-color:#93c5fd; } .fld .val code{background:#f3f4f6; padding:1px 5px; border-radius:4px; font-size:var(--fs-sm)} /* ———————————————————————————————————————————————— S2 补充：自然语言搜索条 / 未提供态 / 资料包页头 / 轻提示 ———————————————————————————————————————————————— */ .page-head{padding:18px 0 4px} .page-head h1{font-size:var(--fs-2xl); margin:0 0 6px; letter-spacing:-.3px} .page-head .sub{color:#6b7280; font-size:var(--fs-base); margin:0} /* 自然语言搜索 */ .ld-nl{padding:14px 0 0} .nl-box{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:6px 6px 6px 14px; box-shadow:0 1px 2px rgba(16,24,40,.04)} .nl-box:focus-within{border-color:#93c5fd; box-shadow:0 0 0 3px #eff6ff} .nl-ico{width:17px; height:17px; color:#9ca3af; flex:none} .nl-input{flex:1; border:0; outline:0; font:inherit; font-size:var(--fs-md); padding:8px 0; color:var(--ink); background:transparent} .nl-input::placeholder{color:#9ca3af} .nl-go{flex:none; border:0; background:#1d4ed8; color:#fff; border-radius:9px; padding:9px 18px; font:inherit; font-size:var(--fs-md); cursor:pointer} .nl-go:hover{background:#1e40af} .nl-examples{margin-top:8px; font-size:var(--fs-sm); color:#9ca3af; display:flex; flex-wrap:wrap; gap:6px; align-items:center} .nl-examples a{color:#3b6ea5; text-decoration:none; background:#f1f5fb; border-radius:6px; padding:3px 8px} .nl-examples a:hover{background:#e2eaf7; color:#1d4ed8} .nl-unsupported{margin-top:10px; background:#fffbeb; border:1px solid #fde68a; border-radius:10px; padding:9px 12px; font-size:var(--fs-sm); color:#92400e; display:flex; flex-wrap:wrap; gap:6px; align-items:center} .nl-unsupported .tiny{color:#a16207; margin-left:2px} /* 「未提供」灰色态：视觉上必须明显区别于真实值，不能被当成数据 */ .na{color:#9ca3af} /* 轻提示 */ .toast{position:fixed; left:50%; bottom:96px; transform:translateX(-50%); background:#111827; color:#fff; font-size:var(--fs-base); padding:9px 16px; border-radius:999px; z-index:9999; box-shadow:0 8px 24px rgba(0,0,0,.18); transition:opacity .4s, transform .4s} .toast.out{opacity:0; transform:translateX(-50%) translateY(6px)} /* 详情页底部固定操作条 */ .actionbar{position:fixed; left:0; right:0; bottom:0; z-index:900; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); border-top:1px solid var(--line); padding:9px 16px; display:flex; align-items:center; gap:12px; box-shadow:0 -4px 16px rgba(16,24,40,.06)} .actionbar .ab-info{display:flex; flex-direction:column; line-height:1.35} .actionbar .ab-info b{font-size:var(--fs-base)} .actionbar .ab-btns{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap} .btn-fav-on{background:#fff1f2; border-color:#fecdd3; color:#be123c} .btn-fav-on .hb{color:#e11d48} @media (max-width:640px){ .actionbar{flex-wrap:wrap; padding:8px 12px} .actionbar .ab-btns{margin-left:0; width:100%; justify-content:space-between} } /* ———————————————————————————————————————————————— S5 工作中心编辑态 ———————————————————————————————————————————————— */ /* 表单骨架 */ .form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px} .form-grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .fld-in{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:9px; font:inherit; font-size:var(--fs-md); color:var(--ink); background:#fff; box-sizing:border-box} .fld-in:focus{outline:2px solid #dbeafe; border-color:#93c5fd} textarea.fld-in{resize:vertical; line-height:1.65; min-height:76px} select.fld-in{appearance:none; background-image:linear-gradient(45deg,transparent 50%,#9ca3af 50%),linear-gradient(135deg,#9ca3af 50%,transparent 50%); background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:32px} .fld-hint{font-size:var(--fs-xs); color:#9ca3af; margin-top:4px; line-height:1.5} .fld-hint.warn{color:#b45309} .fld-ro{display:flex; align-items:center; gap:8px; padding:9px 11px; background:#f8fafc; border:1px dashed var(--line); border-radius:9px; font-size:var(--fs-base); color:#6b7280} /* 分组标题 */ .grp{font-size:var(--fs-sm); font-weight:600; color:#374151; letter-spacing:.2px; display:flex; align-items:center; gap:8px; margin:0 0 12px} .grp .tag{font-weight:400; font-size:var(--fs-xs); padding:2px 7px; border-radius:5px; background:#eff6ff; color:#1d4ed8} .grp .tag.lock{background:#fff7ed; color:#9a3412} .grp::after{content:''; flex:1; height:1px; background:var(--line)} /* 版本条 */ .vbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px} .vbar .b{font-size:var(--fs-xs)} /* 差异表 */ .difftable{width:100%; border-collapse:collapse; font-size:var(--fs-base)} .difftable th{text-align:left; padding:8px 12px; background:#f8fafc; border-bottom:1px solid var(--line); font-weight:600; font-size:var(--fs-sm); color:#6b7280} .difftable td{padding:9px 12px; border-bottom:1px solid #f1f3f5; vertical-align:top} .difftable .fname{color:#374151; width:120px; white-space:nowrap} .difftable .old{color:#9ca3af; text-decoration:line-through; word-break:break-all} .difftable .new{color:#0f766e; word-break:break-all} .difftable tr.k-added .new{color:#15803d} .difftable tr.k-removed .old{color:#b91c1c; text-decoration:none} .difftable .hiddenval{color:#b45309; font-size:var(--fs-sm)} .kdot{display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; vertical-align:1px} .kdot.added{background:#15803d} .kdot.removed{background:#b91c1c} .kdot.changed{background:#1d4ed8} .kdot.hidden{background:#d97706} /* 提示条 */ .leakwarn{background:#fffbeb; border:1px solid #fde68a; border-radius:10px; padding:11px 14px; font-size:var(--fs-base); color:#92400e; margin-bottom:14px; line-height:1.7} .leakwarn b{color:#78350f} /* ============================================================ 对齐层 · LinkedDonors 精确实测（2026-10-28） —— 1440 视口实测取数，图片尺寸一律按此，不估算 —— 后台列表缩略图 52×64（object-fit:cover） 前台卡片图 264×371 详情 hero 图 633×993（宽 ≈ 高×0.638，随英雄区高度） 详情图集 393.7×476.3（3 列 · 间距 25px） 列表行高 85px · 内容宽 1360（视口两侧各 40） ============================================================ */ :root{ --adm-ink:#111418; --adm-ink2:#212529; --adm-muted:#868e96; --adm-line:#e9ecef; --adm-line2:#eceef0; --adm-blue:#1a9bd7; } /* ---------- 顶栏（48px，与参考同高） ---------- */ .ld-top{background:#fff; border-bottom:1px solid var(--adm-line); position:sticky; top:0; z-index:40} .ld-top-in{max-width:none; margin:0; padding:0 22px; height:48px; display:flex; align-items:center; gap:0} .ld-logo{font-size:var(--fs-xl); font-weight:800; letter-spacing:-.2px; color:var(--adm-ink2); white-space:nowrap} .ld-logo .b{color:var(--adm-blue)} .ld-nav{display:flex; gap:26px; flex:1; justify-content:center; overflow:auto; scrollbar-width:none} .ld-nav::-webkit-scrollbar{display:none} .ld-nav a{padding:14px 0; font-size:var(--fs-sm); font-weight:500; letter-spacing:.6px; color:#3d4247; border-bottom:2px solid transparent; white-space:nowrap} .ld-nav a:hover{color:#000} .ld-nav a.on{color:#000; font-weight:600; border-bottom-color:var(--adm-ink)} .ld-acts{display:flex; gap:10px; align-items:center; color:var(--adm-muted); font-size:var(--fs-xs); flex:none} .ld-acts .whoami{padding:0; border:0; font-size:var(--fs-xs); color:var(--adm-muted)} .ld-acts .whoami b{font-weight:500; color:#495057} .ld-acts .out{font-size:var(--fs-xs); cursor:pointer; color:var(--adm-muted); background:none; border:0; font-family:inherit} .ld-acts .out:hover{color:#000} /* ---------- 后台容器 ---------- */ .adm-main{padding:0 0 80px} .adm-wrap{padding:26px 40px 0} .adm-head{display:flex; align-items:flex-end; gap:10px; margin-bottom:22px; flex-wrap:wrap} .adm-head h1{font-size:var(--fs-xl); font-weight:700; margin:0; letter-spacing:.2px; color:var(--adm-ink2)} .adm-head .count{font-size:var(--fs-sm); color:var(--adm-muted); padding-bottom:2px} .adm-tools{margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap} .adm-search{border:0; border-bottom:1px solid var(--adm-ink); background:transparent; font-family:inherit; font-size:var(--fs-sm); padding:4px 2px; width:200px; outline:none; color:var(--adm-ink2)} .adm-search::placeholder{color:#aab1b7} .adm-stamp{font-size:var(--fs-xs); color:var(--adm-muted)} .adm-btn{background:var(--adm-ink); color:#fff; border:0; font-family:inherit; font-size:var(--fs-sm); letter-spacing:.4px; padding:9px 16px; cursor:pointer; white-space:nowrap} .adm-btn:hover{background:#000} .adm-btn-line{background:#fff; color:var(--adm-ink); border:1px solid var(--adm-ink); font-family:inherit; font-size:var(--fs-xs); padding:3px 9px; cursor:pointer; white-space:nowrap} .adm-btn-line:hover{background:var(--adm-ink); color:#fff} /* ---------- 筛选 chips（单行平铺 · 选中黑底白字） ---------- */ .adm-chips{display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding-bottom:16px} .adm-chip{font-size:var(--fs-xs); line-height:1; padding:7px 12px; border:1px solid #c9cfd4; color:#495057; background:#fff; cursor:pointer; white-space:nowrap; font-family:inherit; text-decoration:none; display:inline-block} .adm-chip:hover{border-color:var(--adm-ink); color:#000} .adm-chip.on{background:var(--adm-ink); border-color:var(--adm-ink); color:#fff} /* 纯展示徽标（不是筛选/按钮）：不做悬停反馈，避免看着能点 */ .adm-chip.static{cursor:default} .adm-chip.static:hover{border-color:#c9cfd4; color:#495057} .adm-vsep{width:1px; height:18px; background:var(--adm-line); margin:0 4px} /* ---------- 表格（内容宽 1240 @1440 视口） ---------- 字号令牌化后各列内容变宽，固定列同步瘦身： 类别/照片/版本/快照列内容本来就短（卵子 / v1 / #6），把宽度让给编号与操作列 */ .adm-table{width:100%; overflow-x:auto} .adm-thead,.adm-row{ display:grid; grid-template-columns:24px 52px 250px 70px 110px 60px 70px 70px 110px minmax(170px,1fr); gap:12px; align-items:center; } .adm-thead{padding:10px 4px; border-bottom:1px solid var(--adm-ink); font-size:var(--fs-xs); color:#7d858c; letter-spacing:.4px} .adm-row{min-height:85px; padding:8px 4px; border-bottom:1px solid var(--adm-line); font-size:var(--fs-sm); color:var(--adm-ink2)} .adm-row:hover{background:#fcfcfd} .adm-c{text-align:center} .adm-cbx{width:13px; height:13px; border:1px solid #adb5bd; display:block; cursor:pointer} .adm-cbx:checked{accent-color:#111418} /* 缩略图：实测 52×64，cover，无圆角 */ .adm-thumb{width:52px; height:64px; object-fit:cover; display:block; background:#f1f3f5} .adm-code{font-size:var(--fs-base); font-weight:700; letter-spacing:.3px; color:var(--adm-ink2); display:block; text-decoration:none} .adm-code:hover{text-decoration:underline} .adm-slug{font-size:var(--fs-micro); color:#9aa2a9; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:250px; display:block} .adm-badge{display:inline-block; font-size:var(--fs-micro); line-height:1; padding:5px 8px; border:1px solid var(--adm-ink); color:var(--adm-ink); white-space:nowrap; text-decoration:none} .adm-badge.soft{border-color:#c9cfd4; color:#6c757d} .adm-badge.sq::before{content:""; display:inline-block; width:7px; height:7px; border:1px solid currentColor; margin-right:5px; vertical-align:1px} .adm-num{font-size:var(--fs-base); color:#343a40} .adm-date{font-size:var(--fs-xs); color:#495057; white-space:nowrap} .adm-ops{display:flex; justify-content:flex-end; gap:10px; white-space:nowrap} .adm-ops a,.adm-ops button{font-size:var(--fs-xs); text-decoration:underline; color:#343a40; background:none; border:0; font-family:inherit; cursor:pointer; padding:0} .adm-ops a:hover,.adm-ops button:hover{color:#000} /* ---------- 详情页：黑带 hero ---------- */ .adm-bar{display:flex; justify-content:center; align-items:center; gap:14px; padding:14px 0} .adm-bar a.back{font-size:var(--fs-xs); text-decoration:underline; color:var(--adm-ink2)} .adm-ro{font-size:var(--fs-xs); color:var(--adm-muted); display:flex; align-items:center; gap:5px} .adm-ro .dot{width:7px; height:7px; border:1px solid #adb5bd; border-radius:50%} .adm-hero{background:#000; color:#fff; display:flex; align-items:center; justify-content:center; min-height:520px} /* hero 大图：实测 633×993 → 宽 = 高 × 0.638；用弹性高度撑满英雄区 */ .adm-hero .pic{ height:min(993px, 78vh); width:auto; aspect-ratio:633/993; object-fit:cover; flex:none; display:block; } .adm-hero .meta{padding:0 0 0 108px; min-width:380px} .adm-hero .name-row{display:flex; align-items:baseline; gap:12px; margin-bottom:26px} .adm-hero .code{font-family:Georgia,"Times New Roman",serif; font-size:var(--fs-3xl); font-weight:700; letter-spacing:1px} .adm-hero .nick{font-size:var(--fs-sm); color:#adb5bd} .adm-hero dl{display:grid; grid-template-columns:auto 1fr; gap:9px 14px; align-items:baseline; margin:0} .adm-hero dt{font-family:Georgia,serif; font-style:italic; font-size:var(--fs-md); letter-spacing:1.6px; text-transform:uppercase; color:#fff; white-space:nowrap; font-weight:400} .adm-hero dd{margin:0; font-family:Georgia,serif; font-size:var(--fs-md); color:#f1f3f5; letter-spacing:.4px} .adm-hero .units{margin-top:26px; font-family:Georgia,serif; font-style:italic; font-size:var(--fs-sm); letter-spacing:1.4px; color:#ced4da} /* TAB 行 */ .adm-tabs{display:flex; justify-content:center; gap:44px; padding:30px 0 0} .adm-tabs a{font-size:var(--fs-sm); letter-spacing:1.4px; text-transform:uppercase; color:#495057; display:flex; align-items:center; gap:7px; padding-bottom:12px; border-bottom:2px solid transparent} .adm-tabs a span{font-size:var(--fs-xs); letter-spacing:0; text-transform:none; color:#868e96} .adm-tabs a.on{color:#000; font-weight:600; border-bottom-color:var(--adm-ink)} .adm-tabs a.on span{color:#495057} /* 图集：实测 393.7×476.3（3 列 · 间距 25 · 比例 62/75） */ .adm-gallery{display:grid; grid-template-columns:repeat(3, 1fr); gap:25px; max-width:1231px; margin:0 auto; padding:26px 40px 0} .adm-gallery figure{margin:0; background:#f8f9fa} .adm-gallery img{width:100%; aspect-ratio:62/75; object-fit:cover; display:block} /* ---------- 面板/表单（去圆角去阴影，1px 细线） ---------- */ .adm-panel{border:1px solid var(--adm-line); background:#fff; margin-bottom:14px} .adm-panel-h{padding:12px 16px; border-bottom:1px solid var(--adm-line); display:flex; align-items:center; gap:10px; justify-content:space-between} .adm-panel-h h3{margin:0; font-size:var(--fs-sm); font-weight:700; letter-spacing:.3px; color:var(--adm-ink2)} .adm-panel-b{padding:16px} .adm-hint{font-size:var(--fs-micro); color:#9aa2a9; line-height:1.6} .adm-label{font-size:var(--fs-micro); color:var(--adm-muted); display:block; margin-bottom:4px} .adm-in{width:100%; border:0; border-bottom:1px solid #adb5bd; background:transparent; font-family:inherit; font-size:var(--fs-sm); padding:5px 2px; outline:none; color:var(--adm-ink2); box-sizing:border-box} .adm-in:focus{border-bottom-color:var(--adm-ink)} select.adm-in{cursor:pointer} textarea.adm-in{border:1px solid #ced4da; padding:8px 10px; resize:vertical; line-height:1.7} .adm-sub{font-size:var(--fs-xs); color:var(--adm-muted); margin:-14px 0 20px} @media (max-width:1100px){ .adm-wrap{padding:20px 20px 0} .adm-thead,.adm-row{grid-template-columns:24px 52px 170px 80px 120px 70px 110px 110px 110px 1fr; gap:8px} .adm-hero{flex-direction:column; padding:26px 20px; gap:22px} .adm-hero .meta{padding:0; min-width:0} .adm-gallery{padding:20px 20px 0; gap:14px} } @media (max-width:760px){ .adm-thead{display:none} .adm-row{grid-template-columns:52px 1fr auto; gap:10px} .adm-row > .adm-col-hide{display:none} } /* 编辑页表单控件并入对齐皮肤（adm-panel 内的下划线输入） */ .adm-panel-b .fld-in{border:0; border-bottom:1px solid #adb5bd; border-radius:0; background:transparent; padding:5px 2px; font-size:var(--fs-sm); outline:none; box-shadow:none} .adm-panel-b .fld-in:focus{outline:none; border-bottom-color:#111418; box-shadow:none} .adm-panel-b select.fld-in{cursor:pointer} .adm-panel-b textarea.fld-in{border:1px solid #ced4da; padding:8px 10px; line-height:1.7} .adm-panel-b .fld-ro{background:transparent; border:0; border-bottom:1px dashed #ced4ce; border-radius:0; padding:5px 2px; font-size:var(--fs-sm)} .adm-panel-b .fld-hint{font-size:var(--fs-micro); color:#9aa2a9} .adm-panel-b .grp{font-size:var(--fs-sm); letter-spacing:.3px; color:#111418} .adm-panel-b .grp .tag{background:#f1f3f5; color:#495057; border-radius:0; font-size:var(--fs-micro)} .adm-panel-b .grp .tag.lock{background:#fff3f3; color:#b02a30} .adm-panel .notice{border-radius:0; border-left-width:2px} /* 前台卡片图：实测 264×371（5 列 · 内容宽 1360 · 间距 10px），圆角 0 */ .ld-wrap{padding:0 40px 100px} .ldgrid{gap:10px} .ldcard .ldimg{border-radius:0} .ldcard .thumb{aspect-ratio:264/371} @media (max-width:700px){ .ld-wrap{padding:0 14px 110px} } /* 2026-10-28 明哥：网页内容左右统一留出 100px（顶栏/搜索区/筛选区/工具行/卡片网格全对齐） */ .ld-top-in{max-width:none; padding:0 100px} .ld-nl{padding:14px 100px 0} .ld-hrow{max-width:none; padding:11px 100px 0} .ld-frow{max-width:none; padding:13px 100px 0} .ld-tools{max-width:none; padding:16px 100px 12px} .ld-wrap{max-width:none; padding:0 100px 100px} @media (min-width:701px) and (max-width:1100px){ .ld-top-in{padding:0 32px} .ld-nl{padding:14px 32px 0} .ld-hrow{padding:11px 32px 0} .ld-frow{padding:13px 32px 0} .ld-tools{padding:16px 32px 12px} .ld-wrap{padding:0 32px 100px} } @media (max-width:700px){ .ld-top-in{padding:0 14px} .ld-nl{padding:14px 14px 0} .ld-hrow{padding:11px 14px 0} .ld-frow{padding:13px 14px 0} .ld-tools{padding:13px 14px 10px} .ld-wrap{padding:0 14px 110px} } /* 帐号管理：扁平行内编辑表（1px 黑头线 + 浅灰行线） */ .acc-table{width:100%; border-collapse:collapse} .acc-table th{font-size:var(--fs-xs); color:#7d858c; font-weight:400; text-align:left; padding:10px 8px; border-bottom:1px solid var(--adm-ink); letter-spacing:.4px} .acc-table td{padding:14px 8px; border-bottom:1px solid var(--adm-line2); vertical-align:middle; font-size:var(--fs-sm); color:var(--adm-ink2)} .acc-table b{font-weight:700; font-size:var(--fs-base)} /* ---------- 全局形态收敛：无圆角 / 无阴影 / 黑色主按钮（对齐参考站） ---------- */ .btn{border-radius:0} .btn-primary{background:var(--adm-ink); border-color:var(--adm-ink)} .btn-primary:hover{background:#000; border-color:#000} .panel{border-radius:0; box-shadow:none; border-color:var(--adm-line)} .chip{border-radius:0} .notice{border-radius:0} .dropzone{border-radius:0; border-color:#ced4da; text-align:center; padding:52px 20px} .dropzone:hover, .dropzone.over{border-color:var(--adm-ink); background:#fff} .dropzone .t{font-size:var(--fs-sm)} .dropzone .s{font-size:var(--fs-xs); color:#9aa2a9; line-height:2} .fld-in{border-radius:0} .pager a, .pager span{border-radius:0} .auth-card{border-radius:0} /* ===== 分销管理（ops/dist、admin/dist-settings、my/dist 共用） ===== */ .dbox{background:#fff; border:1px solid var(--adm-line2); border-radius:10px; padding:16px 18px; margin-bottom:18px} .dbox h2{font-size:var(--fs-sm); font-weight:700; color:var(--adm-ink2); margin:0 0 12px; letter-spacing:.2px} .dform{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end} .dform .f{display:flex; flex-direction:column; gap:5px} .dform label{font-size:var(--fs-xs); color:var(--adm-muted)} .dform input,.dform select{border:1px solid #c9cfd4; border-radius:6px; padding:8px 10px; font-size:var(--fs-sm); font-family:inherit; background:#fff; color:#212529} .dform input:focus,.dform select:focus{outline:none; border-color:var(--adm-ink)} .dform input[type=number]{width:118px} .dform .w-sm{width:92px} .dform .w-md{width:180px} .dform .w-lg{width:250px} .dhint{font-size:var(--fs-xs); color:#9aa2a9; line-height:1.8; margin:10px 0 0} .dhint b{color:#495057; font-weight:600} .dmoney{font-variant-numeric:tabular-nums; white-space:nowrap} .dpos{color:#1f7a3f} .dneg{color:#b03030} .drow{display:flex; gap:6px; align-items:center; justify-content:flex-end} .drow input{border:1px solid #c9cfd4; border-radius:6px; padding:4px 6px; font-size:var(--fs-xs); font-family:inherit; width:88px; background:#fff} .drow button{font-size:var(--fs-xs); text-decoration:underline; color:#343a40; background:none; border:0; cursor:pointer; font-family:inherit; padding:0} .dtag{display:inline-block; font-size:var(--fs-micro); line-height:1; padding:4px 7px; border:1px solid #c9cfd4; color:#495057} .dtag.on{border-color:var(--adm-ink); color:#000; font-weight:600} .dtag.warn{border-color:#e0b4b4; color:#b03030} .dtag.ok{border-color:#a9d5b5; color:#1f7a3f} .dsep{width:100%; height:1px; background:var(--adm-line2); margin:14px 0} /* ===== 框架分页兜底（巡检第三批） ===== 全站没有 tailwind，Laravel 默认分页视图里的 SVG 箭头没有尺寸约束， 会按原始 viewBox 渲染成几百像素的大图标（实测审计页、dist 各页均中招）。 这里按框架输出的类名给一套与站内一致的分页外观，所有 links() 页面统一生效。 */ nav[aria-label="Pagination Navigation"]{margin-top:14px} nav[aria-label="Pagination Navigation"] svg{width:13px; height:13px} nav[aria-label="Pagination Navigation"] p{font-size:var(--fs-sm); color:#7d858c; margin:0 0 8px} nav[aria-label="Pagination Navigation"] .sm\:hidden{display:none} nav[aria-label="Pagination Navigation"] .hidden{display:block} nav[aria-label="Pagination Navigation"] .relative{display:inline-flex} nav[aria-label="Pagination Navigation"] span, nav[aria-label="Pagination Navigation"] a{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 10px; margin:0 3px 3px 0; border:1px solid #dee2e6; background:#fff; color:#495057; font-size:var(--fs-sm); line-height:1; text-decoration:none; white-space:nowrap} nav[aria-label="Pagination Navigation"] span[aria-disabled="true"], nav[aria-label="Pagination Navigation"] span[disabled]{opacity:.45; pointer-events:none} nav[aria-label="Pagination Navigation"] a:hover{border-color:var(--adm-ink); color:var(--adm-ink)} nav[aria-label="Pagination Navigation"] span[aria-current="page"]{background:var(--adm-ink); border-color:var(--adm-ink); color:#fff; font-weight:600} /* ================= 全站内容左右边距 · 100px（明哥 2026-10-29 定） ================= 前台那套 100px 原来写死在 .ld-* 里（见上方 2026-10-28 那条注释）， 后台、志愿者端、清单页各写各的（40px / 20px / 有的干脆贴边）。 现在收成一个变量，并且把留白提到
上 —— 这样连没有包裹层的页面 （审核页、版本历史、上传建档…）也自动对齐，新增页面不用再记得加。 改一处、全站生效；要调边距只改 --edge。 */ :root{ --edge:100px } /* ① 主内容区统一左右留白（前台 / 后台 / 志愿者 / 清单，全部走
） */ main.page, main.adm-main{ padding-left:var(--edge); padding-right:var(--edge) } /* ② 页面内的容器不再自带水平留白，也不再二次居中 —— 否则 100px 会叠成 200px，大屏上内容又缩回中间一小条 */ .ld-nl, .ld-hrow, .ld-frow, .ld-tools, .ld-wrap, .wrap, .wrap-wide, .adm-wrap, .adm-bar, .my-wrap, .dist-wrap, .mu-wrap, .mr-wrap{ max-width:none; margin-left:0; margin-right:0; padding-left:0; padding-right:0; } /* ③ 需要通栏底纹的条带（搜索区 / 筛选条 / 后台黑带）： 负边距顶回视口边缘，内部再补回 100px，视觉上仍是通栏，内容照样对齐 */ .ld-nl, .ld-filter, .adm-hero{ margin-left:calc(var(--edge) * -1); margin-right:calc(var(--edge) * -1); padding-left:var(--edge); padding-right:var(--edge); } /* ④ 顶栏不在
里，单独对齐；同时也压过上面 .ld-top-in 的旧写法 */ .ld-top-in{ max-width:none; padding-left:var(--edge); padding-right:var(--edge) } /* 断点：不让手机上一屏只剩一点点内容。数值与原来的 32 / 14 保持一致 */ @media (min-width:701px) and (max-width:1100px){ :root{ --edge:32px } } @media (max-width:700px){ :root{ --edge:14px } } /* ================= 志愿者 · 我的资料（编辑 / 核对 / 手工填写 共用） ================= 这一套类原来写在 my/edit.blade.php 页内