/* ================= 鲸域 · QQ空间风格皮肤 ================= */ :root{ --brand:#1775c8; --brand-2:#3f9de8; --brand-deep:#0f63b4; /* 在浅色底上承载文字的蓝：--brand 用于白字实底，--brand-ink 用于浅底蓝字 */ --brand-ink:#0f63b4; --accent:#b3540e; --accent-2:#e08a3c; --ink-amber:#3b1d04; --bg:#eef4fa; --bg-2:#f7fafd; --card:#ffffff; --card-2:#f6f9fd; --line:#d9e5f1; --line-2:#eaf2fa; --txt:#132435; --txt-2:#4b5f74; --txt-3:#5b6e82; --link:#0d6ec4; /* 选中态底色（账号切换器等）—— 必须比 --card 略深才看得出来 */ --sel:rgba(23,117,200,.10); --ok:#0a7a58; --warn:#9a6200; --rose:#c22252; /* “在底色上承载文字”的语义色：浅色主题等于上面的实底值，深色主题换成提亮版 */ --ok-ink:var(--ok); --warn-ink:var(--warn); --rose-ink:var(--rose); --accent-ink:var(--accent); --shadow:0 1px 2px rgba(16,60,105,.05), 0 10px 24px -14px rgba(16,60,105,.26); --shadow-lg:0 20px 48px -20px rgba(16,60,105,.34); --r:12px; --r-sm:8px; --nav-h:54px; --wrap-w:1320px; --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif; /* 排版刻度：同一个帖子在「列表 / 详情 / 编辑器」三处的标题-副标题-正文必须同源。 规则：详情 = 列表 × 1.36（阅读态放大）；副标题 = 标题 × 0.86 且转正文色。 改这里就能三处一起改，不要再在别处写死 font-size。 */ --fs-title-list:14px; --fs-title-detail:19px; --fs-sub-list:12px; --fs-sub-detail:13.5px; --fs-body:13.5px; --fs-label:12.5px; --lh-title:1.45; /* 动效 token：入场/退场 ease-out，位移 ease-in-out，颜色 ease；UI 全部 < 300ms */ --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --dur-1:130ms; --dur-2:180ms; --dur-3:240ms; --dur-4:340ms; } html[data-theme="night"]{ --bg:#0b131c; --bg-2:#101a25; --card:#131e2a; --card-2:#18242f; --line:#22323f; --line-2:#1b2733; --txt:#e9f1f9; --txt-2:#a7b9c9; --txt-3:#7f93a6; --link:#6dc0ff; --sel:rgba(92,172,255,.20); --ok-ink:#5fe0a1; --warn-ink:#f0c070; --rose-ink:#ff86ac; --accent-ink:#e8b45c; --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 24px -14px rgba(0,0,0,.75); --shadow-lg:0 22px 54px -20px rgba(0,0,0,.8); } *{box-sizing:border-box} html,body{margin:0;padding:0} html{background:var(--bg);color-scheme:light} html[data-theme="night"]{color-scheme:dark} body{ font-family:var(--sans); color:var(--txt); background:var(--bg); font-size:14px; line-height:1.65; -webkit-font-smoothing:antialiased; background-image: radial-gradient(1100px 360px at 50% -150px, rgba(92,196,246,.26), transparent 68%), radial-gradient(760px 300px at 88% -20px, rgba(31,134,232,.09), transparent 62%), linear-gradient(180deg, #e4eef9 0, var(--bg) 340px); background-repeat:no-repeat; min-height:100vh; } html[data-theme="night"] body{background-image:radial-gradient(1000px 340px at 50% -140px, rgba(31,134,232,.17), transparent 70%)} a{color:var(--link);text-decoration:none} a:hover{text-decoration:none;filter:brightness(1.06)} button{font-family:inherit} ::selection{background:#bfe3ff;color:#0b4a76} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:#7f93a6;border-radius:8px;border:2px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:#5b6e82;background-clip:content-box} html[data-theme="night"] ::-webkit-scrollbar-thumb{background:#2b3d52;background-clip:content-box} /* ---------------- 顶部导航 ---------------- */ .nav{ /* v29：60 提到 95 —— 头像 / 消息弹层（.pop，z:70）套在这层 stacking context 里， 原来被右下角悬浮铅笔 #totop（fixed，z:90）盖住，窄屏上正好压住弹层最后一行「退出登录」。 95 仍低于遮罩 120 与 toast 200，弹层不会越过它们。 */ position:sticky;top:0;z-index:95;height:var(--nav-h); background:linear-gradient(90deg,#0a4a86 0%,var(--brand) 46%,#156db8 100%); box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 6px 18px -10px rgba(16,72,120,.75); color:#fff; } .nav-in{max-width:var(--wrap-w);margin:0 auto;height:100%;padding:0 18px;display:flex;align-items:center;gap:16px} .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:.4px;white-space:nowrap;cursor:pointer} .logo .mark{ width:30px;height:30px;border-radius:9px;display:grid;place-items:center; background:linear-gradient(135deg,#fff,#d9f1ff); box-shadow:0 3px 10px rgba(0,40,80,.22); } /* 鲸尾标志：线稿只描边不填充，颜色统一走 currentColor（线宽写在 js/app.js 的 tail() 调用里） */ .logo .mark svg,.foot-mark svg{display:block} .logo .mark svg{color:var(--brand-deep)} /* 新路径的包围盒 5.71~58.29 / 6.22~57.78 已关于 (32,32) 居中，不需要再位移 */ .logo small{font-weight:500;font-size:11px;color:#fff;letter-spacing:0;margin-left:2px} .nav-links{display:flex;align-items:center;gap:2px;flex:1;min-width:0} .nav-links a{ color:#fff;padding:7px 9px;border-radius:20px;font-size:13px;white-space:nowrap; transition:background-color var(--dur-2) ease, color var(--dur-1) ease; font-weight:500; } .nav-links a:hover{background:rgba(9,45,80,.22);color:#fff} .nav-links a.on{background:rgba(255,255,255,.96);color:var(--brand-deep);font-weight:700;box-shadow:0 2px 8px rgba(0,50,90,.16)} .nav-right{display:flex;align-items:center;gap:10px} .nav-search{ display:flex;align-items:center;gap:6px;background:rgba(9,45,80,.34); border:1px solid rgba(255,255,255,.34);border-radius:20px;padding:5px 12px;width:220px; transition:background-color var(--dur-2) ease, border-color var(--dur-2) ease, box-shadow var(--dur-2) ease; } .nav-search:focus-within{background:rgba(255,255,255,.97);border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22)} .nav-search:focus-within input{color:#20405c} .nav-search:focus-within input::placeholder{color:#5b6e82} .nav-search input{background:none;border:0;outline:0;color:#fff;width:100%;font-size:13px;font-family:inherit} .nav-search input::placeholder{color:rgba(255,255,255,.96)} .icon-btn{ position:relative;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer; background:rgba(9,45,80,.26);color:#fff;display:grid;place-items:center;font-size:15px; transition:background-color var(--dur-2) ease, transform var(--dur-1) var(--ease-out); } .icon-btn:hover{background:rgba(9,45,80,.44)} .dot-badge{ position:absolute;top:3px;right:3px;min-width:15px;height:15px;border-radius:9px; background:#c92244;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center; padding:0 4px;border:2px solid var(--brand);line-height:1; } .avatar-btn{display:flex;align-items:center;gap:7px;cursor:pointer;padding:3px 6px 3px 3px;border-radius:22px;transition:background-color var(--dur-2) ease} .avatar-btn:hover{background:rgba(9,45,80,.22)} .avatar-btn img,.avatar-btn .av{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.85)} .avatar-btn span{font-size:13px;font-weight:600;color:#fff} /* 下拉面板 */ .pop{ position:absolute;right:0;top:calc(100% + 10px);width:330px;background:var(--card); /* v29：弹层背景是 var(--card)，但它是从 .nav 继承 color:#fff 的 —— 凡是没显式设色的 文本（例如「还差手机号认证」这个 ）在白天就是白底白字。这里把默认前景色改回正文色。 */ color:var(--txt); border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden; opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;z-index:70;transform-origin:top right; transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); } .pop.open{opacity:1;transform:none;pointer-events:auto} .pop-hd{padding:11px 14px;font-weight:700;font-size:13px;border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center;color:var(--txt)} .pop-hd .mini{font-weight:500;font-size:12px;color:var(--txt-3)} .notice{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-2);cursor:pointer;transition:background-color var(--dur-1) ease} .notice:hover{background:var(--card-2)} .notice:last-child{border-bottom:0} .notice .ni{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex:none} .ni.blue{background:#e6f2fe;color:var(--brand-ink)}.ni.amber{background:#fdf0dc;color:#9a6200} .ni.green{background:#e3f7ee;color:var(--ok)}.ni.rose{background:#fee9ef;color:var(--rose)} html[data-theme="night"] .ni.blue{background:#12314c;color:#6cc0ff} html[data-theme="night"] .ni.amber{background:#3a2a11;color:#ffc46b} html[data-theme="night"] .ni.green{background:#10301f;color:#5fe0a1} html[data-theme="night"] .ni.rose{background:#3a1524;color:#ff86ac} .notice b{font-size:13px;display:block;font-weight:600;color:var(--txt)} .notice p{margin:2px 0 0;font-size:12px;color:var(--txt-2);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .notice time{font-size:11px;color:var(--txt-3);white-space:nowrap} .unread::after{content:"";width:6px;height:6px;background:#ff4d6d;border-radius:50%;display:inline-block;margin-left:6px;vertical-align:middle} /* 页面容器：左分类栏 + 主栏 + 右侧栏 */ .wrap{max-width:var(--wrap-w);margin:0 auto;padding:18px 18px 60px;display:grid;grid-template-columns:176px minmax(0,1fr) 300px;gap:18px;align-items:start} .wrap.solo{grid-template-columns:minmax(0,1fr)} /* 无左栏的页面（帖子详情）：左栏整块撤掉，主栏 + 右栏两列 */ .wrap.no-rail{grid-template-columns:minmax(0,1fr) 300px} .col-main{min-width:0;display:flex;flex-direction:column;gap:14px} .col-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(var(--nav-h) + 16px)} /* 卡片 */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden} .card-hd{ display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px 11px 14px; border-bottom:1px solid var(--line-2);font-weight:700;font-size:14px;color:var(--txt); } .card-hd .t{display:flex;align-items:center;gap:8px} .card-hd .t::before{content:"";width:3px;height:15px;border-radius:2px;background:linear-gradient(180deg,var(--brand-2),var(--brand))} .card-hd .more{font-size:12px;color:var(--txt-3);font-weight:500;cursor:pointer} .card-hd .more:hover{color:var(--link)} .card-bd{padding:14px 16px} /* ---------------- 左侧分类栏（仿微博网页左栏） ---------------- */ .col-rail{display:flex;flex-direction:column;gap:10px;position:sticky;top:calc(var(--nav-h) + 16px)} .rail-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow);padding:6px;overflow:hidden; } .rail-hd{font-size:11.5px;font-weight:700;color:var(--txt-3);letter-spacing:.6px;padding:7px 10px 5px} .rail-item{ display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;cursor:pointer; font-size:13px;color:var(--txt-2);min-width:0; transition:background-color var(--dur-1) ease, color var(--dur-1) ease; } .rail-item:hover{background:var(--card-2);color:var(--link)} .rail-item.on{background:#e8f3ff;color:var(--brand-ink);font-weight:700} /* 夜间选中态：底色是半透明蓝，字必须比 --link 更亮才够 4.5:1 */ html[data-theme="night"] .rail-item.on{background:rgba(31,134,232,.26);color:#d3ecff} .rail-item .ic{ width:24px;height:24px;border-radius:8px;display:grid;place-items:center; font-size:12px;flex:0 0 auto;box-shadow:0 3px 8px -4px rgba(16,60,105,.6); } .rail-item .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rail-item .rail-n{font-size:11px;font-weight:600;color:var(--txt-3);flex:0 0 auto} .rail-item.on .rail-n{color:var(--brand-ink)} html[data-theme="night"] .rail-item.on .rail-n{color:#b9dcf7} /* 点状小圆点（微博那种项目式列表） */ .rail-dot .tx::before{ content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#c3d3e2; margin-right:8px;vertical-align:2px; transition:background-color var(--dur-1) ease, transform var(--dur-2) var(--ease-out); } html[data-theme="night"] .rail-dot .tx::before{background:#3d5063} .rail-dot.on .tx::before{background:var(--brand);transform:scale(1.4)} html[data-theme="night"] .rail-dot.on .tx::before{background:#a8d8ff} /* 分类卡里的那一列（分类表扩到 23 类之后会很高）：卡内滚动兜底，别把左栏顶得比视口还高 —— 否则下面那张卡会掉到看不见的地方。收起状态由「展开全部 / 收起分类」那一行控制。 */ .rail-card .rail-list{ max-height:calc(100vh - 230px);overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;padding-right:2px; } .rail-card .rail-list::-webkit-scrollbar{width:6px} .rail-card .rail-list::-webkit-scrollbar-thumb{background:#c3d3e2;border-radius:3px} .rail-card .rail-list::-webkit-scrollbar-track{background:transparent} html[data-theme="night"] .rail-card .rail-list::-webkit-scrollbar-thumb{background:#3d5063} /* 长分类名（「WSL 与 Windows 互操作」）在 176px 的栏里一行放不下：点状行允许折行，别让 省略号把分类名吃掉。这条必须排在 .rail-item .tx 之后才会生效。 */ .rail-dot .tx{white-space:normal;line-height:1.35} /* 卡头右侧的「23 类」：跟标题同一基线、右对齐（卡头只有标题时看不出差别） */ .rail-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px} .rail-hd-n{font-size:11px;font-weight:600;color:var(--txt-3);letter-spacing:0} /* 「展开全部 / 收起分类」那一行：可点，但比分类行更轻 */ .rail-card .rail-more{color:var(--txt-3);font-size:12px;padding:6px 10px} .rail-card .rail-more:hover{color:var(--brand)} .rail-card .rail-more .cv{font-size:11px;line-height:1;flex:0 0 auto} /* 该类一条内容都没有：数字压暗，别跟有内容的类抢注意力 */ .rail-n.zero{opacity:.55} /* 热门标签卡：十个标签在 176px 里折行铺开，药丸沿用 .tag-plain.click（自带 24×24 热区 伪元素），这里只补容器与卡内边距；选中态加粗，与分类行的 .on 一样看得见。 */ .rail-card .rail-chips{display:flex;flex-wrap:wrap;gap:4px;padding:1px 10px 10px} .rail-card .rail-chips .tag-plain{line-height:1.6;padding:1px 7px} .rail-card .rail-chips .tag-plain.on{font-weight:600} /* ---------------- 首页头部 ---------------- */ .cover{ position:relative;height:172px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line); background: radial-gradient(120px 60px at 78% 28%, rgba(255,255,255,.85), transparent 70%), radial-gradient(160px 70px at 62% 12%, rgba(255,255,255,.55), transparent 70%), radial-gradient(200px 90px at 92% 64%, rgba(255,255,255,.5), transparent 70%), linear-gradient(180deg,#7fd2ff 0%,#a9e3ff 46%,#d9f4ff 100%); box-shadow:var(--shadow); } .cover::after{ content:"";position:absolute;inset:auto 0 0 0;height:52px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.75)); } /* 头图鲸尾水印：压在中右侧的空白处，右让 250px 避开右下头像卡，左让 60% 避开标题 */ .cover .tail-wm{ position:absolute;right:248px;top:-6px;width:136px;height:136px; opacity:.62;pointer-events:none;color:#fff; filter:drop-shadow(0 8px 16px rgba(9,72,124,.18)); } @media (max-width:1240px){.cover .tail-wm{right:210px;width:118px;height:118px}} /* 窄屏头图只剩 148px：标题占左下、头像卡占右下，水印只能收进顶部中间那条空白带 */ @media (max-width:760px){ .cover .tail-wm{left:50%;right:auto;margin-left:-30px;top:8px;width:60px;height:60px;opacity:.34} } .cover .tail-wm svg{display:block;width:100%;height:100%} .cover .cloud{position:absolute;background:#fff;border-radius:100px;opacity:.92;filter:blur(.2px)} .cover .cl1{width:110px;height:30px;left:8%;top:34px;box-shadow:34px 10px 0 -4px #fff,66px -2px 0 -8px #fff} .cover .cl2{width:80px;height:24px;right:14%;top:78px;box-shadow:28px 8px 0 -3px #fff} .cover .cl3{width:60px;height:18px;left:40%;top:20px;opacity:.7} .cover-txt{position:absolute;left:24px;bottom:44px;color:#0a4a7a;z-index:2} .cover-txt h1{margin:0;font-size:23px;letter-spacing:.5px;font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.7)} .cover-txt p{margin:4px 0 0;font-size:12.5px;color:#0b4a75} .cover .me{position:absolute;right:26px;bottom:14px;z-index:3;display:flex;align-items:flex-end;gap:12px} .cover .me .av{width:78px;height:78px;border-radius:16px;border:3px solid #fff;box-shadow:0 10px 22px -8px rgba(9,60,100,.55)} .cover .me .nm{color:#0c5588;font-weight:700;font-size:13px;margin-bottom:8px;text-align:right} .cover .me .nm small{display:block;font-weight:500;opacity:.8;font-size:11px} /* 发布框 */ .composer{display:flex;gap:12px;padding:14px 16px} .composer .box{flex:1;min-width:0} .composer .fake-input{ width:100%;border:1px solid var(--line);background:var(--card-2);border-radius:8px; padding:10px 12px;color:var(--txt-3);font-size:13.5px;cursor:text; transition:background-color var(--dur-1) ease, border-color var(--dur-1) ease; } .composer textarea{ width:100%;min-height:72px;resize:vertical;border:1px solid var(--line);background:var(--card-2); border-radius:8px;padding:10px 12px;color:var(--txt);font-size:13.5px;outline:0;font-family:inherit; transition:border-color var(--dur-1) ease, box-shadow var(--dur-2) ease; } .composer textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,156,244,.16);background:var(--card)} .composer .fake-input:hover{border-color:#bcd6ea;background:var(--card)} .composer-tools{display:flex;align-items:center;justify-content:space-between;margin-top:9px;gap:8px;flex-wrap:wrap} .tool-row{display:flex;gap:4px;flex-wrap:wrap} .tool{ display:flex;align-items:center;gap:5px;border:0;background:none;color:var(--txt-2); font-size:12.5px;padding:5px 9px;border-radius:16px;cursor:pointer; transition:background-color var(--dur-1) ease, color var(--dur-1) ease; } .tool:hover{background:var(--card-2);color:var(--link)} .tool.on{background:var(--sel);color:var(--brand-ink);font-weight:700} .tool:focus-visible{outline:2px solid var(--brand);outline-offset:2px} /* 工具键上的计数徽标：有草稿图时提示「已经排了几张」 */ .tool-n{ font-style:normal;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--brand);color:#fff; font-size:10.5px;font-weight:700;line-height:16px;text-align:center; } /* 待发布配图预览：还没提交，所以是「可撤销的临时态」—— 每一张都挂一个 ✕ */ .imgprev{ display:flex;flex-wrap:wrap;gap:8px;margin-top:9px;align-items:center; } .ipv{ position:relative;margin:0;width:82px;height:82px;border-radius:9px;overflow:hidden; border:1px solid var(--line);background:var(--card-2); } .ipv img{width:100%;height:100%;object-fit:cover;display:block} .ipv-x{ position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:0;cursor:pointer; background:rgba(12,22,34,.72);color:#fff;font-size:11px;line-height:20px;padding:0; transition:background-color var(--dur-1) ease; } .ipv-x:hover{background:rgba(12,22,34,.92)} .ipv-n{font-size:11.5px;color:var(--txt-3);margin-left:2px} /* 关联插件面板 */ .plug-pick{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px; padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--card-2); } .pp-item{ display:flex;align-items:center;gap:8px;text-align:left;font:inherit;cursor:pointer; border:1px solid transparent;border-radius:8px;background:var(--card);padding:6px 8px; transition:border-color var(--dur-1) ease, background-color var(--dur-1) ease; } .pp-item:hover{border-color:var(--line);background:var(--bg-2)} .pp-item.on{border-color:var(--brand);background:var(--sel)} .pp-item:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .pp-ic{font-size:16px;line-height:1} .pp-tx{display:flex;flex-direction:column;min-width:0} .pp-tx b{font-size:12px;color:var(--txt);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pp-tx em{font-style:normal;font-size:10.5px;color:var(--txt-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 已关联的插件：一条可撤销的 chip，贴在输入区右下 */ .plug-picked{ display:flex;align-items:center;gap:6px;margin-top:8px;padding:5px 9px;border-radius:16px; background:var(--sel);color:var(--brand-ink);font-size:12px;width:fit-content;max-width:100%; } .plug-picked b{font-weight:700} .plug-picked em{font-style:normal;color:var(--txt-2);font-size:11px} .plug-picked button{ border:0;background:none;color:var(--txt-3);cursor:pointer;font-size:12px;padding:0 2px;line-height:1; } .plug-picked button:hover{color:var(--rose)} /* 拖拽进入输入区时的落点提示 */ #composer.drop-hot,.newthread-card .form-row.wide.drop-hot{outline:2px dashed var(--brand);outline-offset:2px;border-radius:10px} .nt-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px} .form-hint{font-size:11.5px;color:var(--txt-3);font-weight:400} .form-row label .opt{font-weight:400;color:var(--txt-3);font-size:11.5px;margin-left:2px} .btn{ border:0;border-radius:18px;padding:6px 18px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;flex:none; background:linear-gradient(180deg,#ffb066,#f5852f);color:var(--ink-amber); box-shadow:0 6px 14px -6px rgba(255,134,54,.85), 0 1px 0 rgba(255,255,255,.4) inset; transition:transform var(--dur-1) var(--ease-out), filter var(--dur-1) ease; } /* 也要当成按钮：全局 a{color:var(--link)}、容器里的 .gh-repo a 都会把字染成链接蓝， 压在橙底上读不清。用 a.btn 双类名把优先级抬到容器规则之上。 */ a.btn,a.btn:hover,a.btn.dl-btn,a.btn.dl-btn:hover{color:var(--ink-amber)} a.btn.blue,a.btn.blue:hover{color:#fff} a.btn.ghost,a.btn.ghost:hover{color:var(--txt-2)} a.btn.ghost:hover{color:var(--link)} .btn:hover{filter:brightness(1.04)} .btn:active{transform:scale(.975)} .btn.blue{background:linear-gradient(180deg,var(--brand),var(--brand-deep));color:#fff;box-shadow:0 6px 14px -6px rgba(23,117,200,.72),0 1px 0 rgba(255,255,255,.35) inset} .btn.ghost{background:var(--card);color:var(--txt-2);border:1px solid var(--line);box-shadow:none;font-weight:600} .btn.ghost:hover{color:var(--link);border-color:#b9d9f2} .btn[disabled],.btn[disabled]:hover{ background:var(--card-2);color:var(--txt-3);border:1px solid var(--line); box-shadow:none;cursor:not-allowed;transform:none;filter:none; } .btn.sm{padding:4px 13px;font-size:12px} /* ---------------- 更新日志流 ---------------- */ .tabs{display:flex;gap:4px;padding:0 12px;border-bottom:1px solid var(--line-2);align-items:center} .tabs .tab{ border:0;background:none;padding:11px 14px;font-size:13.5px;color:var(--txt-2);cursor:pointer; position:relative;font-weight:600;transition:color var(--dur-1) ease;white-space:nowrap; } .tabs .tab:hover{color:var(--txt)} .tabs .tab.on{color:var(--brand-deep)} html[data-theme="night"] .tabs .tab.on{color:var(--brand-2)} .tabs .tab.on::after{ content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:3px 3px 0 0; background:linear-gradient(90deg,var(--brand-2),var(--brand));transform-origin:left center; animation:tabIn var(--dur-2) var(--ease-out) both; } @keyframes tabIn{from{transform:scaleX(.4);opacity:0}to{transform:scaleX(1);opacity:1}} .tabs .spacer{flex:1} .tabs .sort{font-size:12px;color:var(--txt-3);padding-right:4px;white-space:nowrap;flex:0 0 auto; /* 小屏没地方放「按时间」，直接收进滚动区里也不折行 */} .feed{display:flex;flex-direction:column} .post{padding:16px;border-bottom:1px solid var(--line-2)} .post:last-child{border-bottom:0} .post-hd{display:flex;gap:11px;align-items:flex-start} .av{display:block;border-radius:50%;flex:none;object-fit:cover;position:relative} .av-wrap{position:relative;flex:none} .av-wrap .ring{position:absolute;inset:-3px;border-radius:50%;background:linear-gradient(135deg,#8fd3ff,#c7a6ff);opacity:.55;z-index:0} .poster{flex:1;min-width:0} .poster .line1{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .poster .nm{font-weight:700;font-size:13.5px;color:var(--link);cursor:pointer} .poster .nm:hover{text-decoration:underline} .lv{font-size:10px;font-weight:700;color:var(--ink-amber);background:linear-gradient(135deg,#ffc46b,#f0a234);border-radius:9px;padding:1px 6px;letter-spacing:.3px} .tag-badge{font-size:10px;font-weight:700;padding:1px 7px;border-radius:9px;background:#e8f3ff;color:var(--brand-ink);border:1px solid #cfe6fb} .tag-badge.mod{background:#e8fbf1;color:var(--ok);border-color:#c8f0dc} .tag-badge.beta{background:#f2edff;color:#5a3fd6;border-color:#e0d6ff} html[data-theme="night"] .tag-badge{background:#12314c;color:#6cc0ff;border-color:#1c4468} html[data-theme="night"] .tag-badge.mod{background:#10301f;color:#5fe0a1;border-color:#1a4a33} html[data-theme="night"] .tag-badge.beta{background:#241c47;color:#b49cff;border-color:#382c6e} .poster .meta{font-size:11.5px;color:var(--txt-3);display:flex;gap:8px;align-items:center;margin-top:3px;flex-wrap:wrap} .pin{font-size:10.5px;color:var(--warn);background:#fff4e0;border:1px solid #ffe2b8;border-radius:6px;padding:0 5px;font-weight:700} html[data-theme="night"] .pin{background:#3a2a11;border-color:#553d16;color:#ffc46b} .post-more{border:0;background:none;color:var(--txt-3);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px;border-radius:6px} .post-more:hover{background:var(--card-2);color:var(--txt)} .post-body{margin:10px 0 0 0;font-size:14px;color:var(--txt);white-space:pre-wrap;word-break:break-word} .post-body .mention{color:var(--link);font-weight:600} .plugin-chip{ display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:12px; background:var(--card-2);border:1px solid var(--line);border-radius:8px;padding:4px 9px;color:var(--txt-2); } .plugin-chip b{color:var(--txt);font-weight:600} .plugin-chip em{font-style:normal;color:var(--txt-3);font-size:11px} .imgs{display:grid;gap:5px;margin-top:11px;border-radius:9px;overflow:hidden} .imgs.n1{grid-template-columns:1fr} .imgs.n2{grid-template-columns:1fr 1fr} .imgs.n3{grid-template-columns:repeat(3,1fr)} .imgs.n4{grid-template-columns:repeat(2,1fr)} .imgs.n1 .ph{aspect-ratio:16/9} .imgs.n2 .ph{aspect-ratio:4/3} .imgs.n3 .ph{aspect-ratio:1/1} .imgs.n4 .ph{aspect-ratio:4/3} .ph{ position:relative;overflow:hidden;cursor:zoom-in;background:#dfe9f3; display:flex;align-items:flex-end;justify-content:flex-start; } .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 26%,rgba(0,0,0,.42) 58%,rgba(0,0,0,.74));opacity:.92;transition:opacity var(--dur-2) var(--ease-out)} .ph:hover::after{opacity:1} /* 真图（后端上传的图片）：铺满格子，不叠渐变压暗，只留一点点 hover 提示 */ .ph.real{align-items:stretch;justify-content:stretch;background:#e9eef5} .ph.real::after{opacity:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.16))} .ph.real:hover::after{opacity:1} .ph.real img{width:100%;height:100%;object-fit:cover;display:block} .ph .cap{ position:relative;z-index:2;color:#fff;font-size:11.5px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.55); width:100%;padding:16px 11px 9px; background:linear-gradient(180deg,rgba(4,16,28,0) 0,rgba(4,16,28,.62) 46%,rgba(4,16,28,.82) 100%); } .ph .cap small{display:block;font-weight:400;opacity:.95;font-size:10.5px} .ph .fakebar{position:absolute;left:10px;right:10px;top:12px;z-index:2;display:flex;gap:4px;align-items:center} .ph .fakebar i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.75);display:block} .ph .fakebar u{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.3);text-decoration:none} .ph .glyph{position:absolute;right:10px;top:10px;z-index:2;font-size:20px;opacity:.85;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))} .ph.art{justify-content:center;align-items:center} .ph.art .cap{font-size:13px;letter-spacing:1px;width:auto;padding:7px 14px;text-align:center;border-radius:10px;background:rgba(4,16,28,.46);text-shadow:0 1px 3px rgba(0,0,0,.5)} .ph.art::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 2px,transparent 2px 9px);opacity:.6} /* v32 · 空间相册：真照片后面那一格「＋」。和 .ph 的灯箱格子共用尺寸， 但它是按钮不是图：虚线边、无压暗遮罩、hover 只亮一个色。 */ .ph.add-ph{ background:var(--card-2);border:1px dashed var(--line);cursor:pointer; align-items:center;justify-content:center;color:var(--txt-2); font-size:22px;font-weight:600;line-height:1; transition:background-color var(--dur-1) ease,color var(--dur-1) ease,border-color var(--dur-1) ease; } .ph.add-ph::after,.ph.add-ph::before{display:none} .ph.add-ph:hover{background:var(--card);color:var(--link);border-color:var(--link)} .ph.add-ph:focus-visible{outline:2px solid var(--link);outline-offset:2px} .wrap.deep .ph.add-ph{background:var(--sea-fill-soft);border-color:var(--sea-line);color:var(--sea-txt-2)} .wrap.deep .ph.add-ph:hover{color:var(--sea-link);border-color:var(--sea-link)} .post-actions{display:flex;gap:2px;margin-top:12px;padding-top:9px;border-top:1px dashed var(--line)} .act{ border:0;background:none;color:var(--txt-2);font-size:12.5px;padding:5px 11px;border-radius:16px; cursor:pointer;display:flex;align-items:center;gap:5px;font-weight:500; transition:background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out); } .act:hover{background:var(--card-2);color:var(--link)} .act:active{transform:scale(.97)} .act.liked{color:var(--rose-ink);font-weight:700} .act.liked .ic{animation:likeIn var(--dur-1) var(--ease-out) both} @keyframes likeIn{from{transform:scale(.62)}to{transform:scale(1)}} .act .ic{font-size:14px;line-height:1} .act .num{font-variant-numeric:tabular-nums} .comments{margin-top:10px;background:var(--card-2);border:1px solid var(--line-2);border-radius:9px;padding:9px 11px} .cmt{display:flex;gap:8px;padding:5px 0;font-size:13px} .cmt + .cmt{border-top:1px solid var(--line-2)} .cmt .av{width:24px;height:24px;border-radius:50%;margin-top:1px} .cmt .cnm{color:var(--link);font-weight:600;cursor:pointer} .cmt .ctx{color:var(--txt);word-break:break-word;flex:1} .cmt .ct{color:var(--txt-3);font-size:11px;white-space:nowrap;margin-left:6px} .cmt .clike{border:0;background:none;padding:0;font-family:inherit;color:var(--txt-3);font-size:11px;white-space:nowrap;cursor:pointer;line-height:1} .cmt .clike:hover{color:var(--rose-ink)} .cmt-more{font-size:12px;color:var(--txt-3);padding-top:6px;cursor:pointer;text-align:left;border:0;background:none} .cmt-more:hover{color:var(--link)} /* 侧栏 */ .side-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden} .side-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;font-size:13px;font-weight:700;border-bottom:1px solid var(--line-2)} .side-hd .t{display:flex;align-items:center;gap:7px} .side-hd .t::before{content:"";width:3px;height:14px;border-radius:2px;background:linear-gradient(180deg,var(--brand-2),var(--brand))} .side-hd a{font-size:11.5px;font-weight:500;color:var(--txt-3)} .side-bd{padding:12px 13px} /* 「这面墙的规矩」：四条规矩 + 并进来的「上墙三件事」清单（原左栏卡） */ .au-rules p{margin:0 0 10px;font-size:12.5px;line-height:1.78;color:var(--txt-2)} .au-rules p:last-of-type{margin-bottom:0} .au-rules p b{color:var(--txt)} .au-req{margin-top:12px;padding-top:11px;border-top:1px dashed var(--line-2)} .au-req-hd{margin-bottom:7px;font-size:12px;font-weight:700;color:var(--txt)} .au-req ul{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none} .au-req li{position:relative;padding-left:14px;font-size:12.5px;line-height:1.6;color:var(--txt-2)} .au-req li::before{content:"";position:absolute;left:2px;top:7px;width:5px;height:5px;border-radius:50%;background:#b9cde0} .au-req-go{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:3px 0;font-size:12px;font-weight:600;color:var(--link)} .au-req-go:hover{text-decoration:underline;text-underline-offset:3px} html[data-theme="night"] .au-req li::before{background:#4a6a86} .me-card{padding:0} .me-card .banner{height:74px;background:linear-gradient(135deg,#7cc9ff,#b3e4ff 55%,#ffe6f3);position:relative;overflow:hidden} .me-card .banner::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.28);right:-30px;top:-50px} .me-card .body{padding:0 13px 13px;margin-top:-26px;position:relative} .me-card .av{width:56px;height:56px;border-radius:14px;border:3px solid var(--card);box-shadow:0 6px 16px -8px rgba(0,0,0,.4)} .me-card .nm{font-weight:700;font-size:14px;display:flex;align-items:center;gap:6px;margin-top:6px} .me-card .sig{font-size:12px;color:var(--txt-2);margin-top:2px} .me-stats{display:flex;margin-top:11px;text-align:center;border-top:1px solid var(--line-2);padding-top:10px} .me-stats div{flex:1} .me-stats b{display:block;font-size:15px;font-variant-numeric:tabular-nums;color:var(--txt)} .me-stats span{font-size:11px;color:var(--txt-3)} /* .mini-nav 随右栏「分类」计数胶囊一起删除：插件库的分类入口现在只有左栏 「插件分类」卡（.rail-dot），这排胶囊已无任何产出方 */ .visitors{display:grid;grid-template-columns:repeat(4,1fr);gap:9px} .visitors .v{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer} .visitors .v .av{width:42px;height:42px;border-radius:50%;transition:transform var(--dur-2) var(--ease-out)} .visitors .v span{font-size:11.5px;color:var(--txt-2);max-width:56px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .visitors .v .tt{font-size:12px;color:var(--txt-3)} .hot-list{display:flex;flex-direction:column;gap:2px} .hot-item{display:flex;align-items:center;gap:9px;padding:7px 4px;border-radius:7px;cursor:pointer;transition:background-color var(--dur-1) ease} .hot-item:hover{background:var(--card-2)} .hot-item .rk{width:18px;font-weight:800;font-size:12.5px;color:var(--txt-3);font-variant-numeric:tabular-nums;text-align:center} .hot-item:nth-child(1) .rk{color:var(--rose-ink)}.hot-item:nth-child(2) .rk{color:var(--accent-ink)}.hot-item:nth-child(3) .rk{color:var(--warn-ink)} .hot-item .hx{flex:1;min-width:0} .hot-item .hx b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)} .hot-item .hx span{font-size:11px;color:var(--txt-3)} .hot-item .tr{font-size:10.5px;color:var(--ok);font-weight:700;background:#e7f9ef;border-radius:8px;padding:1px 6px} html[data-theme="night"] .hot-item .tr{background:#10301f;color:#5fe0a1} .side-plugins{display:flex;flex-direction:column} .sp-row{display:flex;gap:10px;padding:9px 13px;align-items:center;cursor:pointer;border-bottom:1px solid var(--line-2);transition:background-color var(--dur-1) ease} .sp-row:last-child{border-bottom:0} .sp-row:hover{background:var(--card-2)} .sp-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex:none;color:#fff;box-shadow:0 4px 10px -6px rgba(0,0,0,.5)} .sp-row .sx{flex:1;min-width:0} .sp-row b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sp-row span{font-size:11px;color:var(--txt-3)} .sp-row .st{font-size:11px;color:var(--warn-ink);font-weight:700;white-space:nowrap} .announce{font-size:12.5px;color:var(--txt-2);line-height:1.75} .announce b{color:var(--txt)} .announce .k{color:var(--rose-ink);font-weight:700} /* ---------------- 插件市场 ---------------- */ .market-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line-2)} .chips{display:flex;gap:6px;flex-wrap:wrap} .chip{ border:1px solid var(--line);background:var(--card);color:var(--txt-2);border-radius:16px; padding:4px 13px;font-size:12.5px;cursor:pointer;font-weight:500; transition:background-color var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease, box-shadow var(--dur-2) ease; } .chip:hover{border-color:#b9d9f2;color:var(--link)} .chip.on{background:linear-gradient(180deg,var(--brand),var(--brand-deep));color:#fff;border-color:transparent;box-shadow:0 5px 12px -6px rgba(23,117,200,.7);font-weight:700} .mkt-search{ margin-left:auto;display:flex;align-items:center;gap:7px;background:var(--card-2); border:1px solid var(--line);border-radius:18px;padding:5px 13px;min-width:190px; } .mkt-search input{border:0;background:none;outline:0;font-size:12.5px;color:var(--txt);width:100%;font-family:inherit} .mkt-search:focus-within{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(23,117,200,.22)} html[data-theme="night"] .mkt-search:focus-within{border-color:#2f7ebb;box-shadow:0 0 0 3px rgba(90,170,255,.28)} /* 插件库卡头：搜索原来与那排分类胶囊同一行，胶囊删掉后提上来贴卡头右端。 .card-hd 默认 space-between，这里改 flex-start + 搜索 margin-left:auto —— 中间空白只由搜索吃掉， 标题与统计始终贴左；窗口变窄时先缩搜索，再整行落到下面。 */ .card-hd.mkt-hd{justify-content:flex-start;flex-wrap:wrap;row-gap:8px} .mkt-hd .more{margin-left:2px;font-weight:500} .mkt-hd .mkt-search{margin-left:auto;flex:0 1 300px;min-width:150px;padding:4px 12px} /* 搜索 + 「发布插件」编成一组贴右端：组吃中间空白，组内只有搜索可缩（按钮 flex:0 0 auto）， 于是任何宽度下两者都连在一起，按钮不会被单独挤到下一行开头。 组用 flex:1 1 240px —— 基准宽度故意小于「搜索 300 + 按钮」，腾出的空间由组内 grow 分配， 这样卡头在 1241–1400px 这段（左栏还在、中栏只有 712–772px）仍然一行放得下。 */ .mkt-hd-acts{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0;flex:1 1 240px} .mkt-hd-acts .mkt-search{margin-left:0;flex:0 1 300px;min-width:150px;padding:4px 12px} .mkt-hd-acts .mkt-new{margin-left:0;flex:0 0 auto;white-space:nowrap} @media (max-width:760px){ .mkt-hd{gap:8px;padding-top:10px;padding-bottom:10px} .mkt-hd .more{display:none} /* 手机一行放不下三段：统计让位，数量在下面「N 个结果」里还有 */ .mkt-hd-acts{display:contents} /* 拆组：按钮回标题行贴右，搜索独占下一行 */ .mkt-hd .mkt-new{order:2;margin-left:auto} .mkt-hd .mkt-search{flex:1 1 100%;order:3;min-width:0} } .sorts{display:flex;gap:2px;font-size:12px} .sorts button{border:0;background:none;color:var(--txt-3);cursor:pointer;padding:5px 9px;border-radius:10px;font-size:12px;line-height:1.3} .sorts button.on{color:var(--brand-deep);background:#e7f3ff;font-weight:700} html[data-theme="night"] .sorts button.on{background:#12314c;color:#6cc0ff} /* 社群卡头：排序 / 计数 / 搜索 / 发新帖 收进同一行（排序原来自己占一行）。 顺序是「排序 → 计数 …… 搜索 → 发新帖」：左端是筛选语义，右端是动作语义， 搜索用 margin-left:auto 吃中间空白，窗口变窄先缩搜索，撑不住再换行。 */ .forum-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--line-2)} .forum-bar .mkt-search{margin-left:auto;flex:0 1 240px;min-width:150px;padding:4px 12px} .forum-bar .btn{margin-left:0;flex:0 0 auto;white-space:nowrap} .forum-bar .feed-note{white-space:nowrap} @media (max-width:760px){ /* 手机：排序 + 计数 + 发新帖 一行，搜索换行独占一整行铺满 */ .forum-bar{gap:8px 10px;padding:10px 12px} .forum-bar .sorts{order:0} .forum-bar .feed-note{order:1;min-width:0;overflow:hidden;text-overflow:ellipsis} .forum-bar .btn{order:2;margin-left:auto} .forum-bar .mkt-search{order:3;flex:1 1 100%;min-width:0;margin-left:0} } @media (max-width:480px){ /* 极窄屏：分类名/标签后缀让位，只留「N 个话题」，这样排序 + 计数 + 发新帖 仍挤得进一行 */ .forum-bar .fn-sub{display:none} } .mkt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px 16px 18px} /* 渲染分页的收尾按钮：条目库 6000+ 条，先画一屏，剩下的点这里追加 */ .mkt-more{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 16px 22px} .mkt-more .meta{font-size:12px;color:var(--txt-3)} .pl-card{ border:1px solid var(--line);border-radius:12px;padding:13px;background:var(--card); display:flex;flex-direction:column;gap:9px;cursor:pointer;position:relative;overflow:hidden; transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease, border-color var(--dur-1) ease; } .pl-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad,linear-gradient(90deg,#7dd3fc,#4f46e5));opacity:0;transition:opacity var(--dur-2) ease} .pl-card:hover{box-shadow:var(--shadow-lg);border-color:#bcdcf3} .pl-card:hover::before{opacity:1} .pl-top{display:flex;gap:10px;align-items:flex-start} .pl-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex:none;color:#fff;box-shadow:0 6px 14px -8px rgba(0,0,0,.55)} .pl-name{ font-weight:700;font-size:13.5px;line-height:1.3;color:var(--txt);min-width:0; /* 三列时卡片只有 225px 宽，"dsh-blender-plugin" 一行放不下：允许折两行，好过被切成 "…pl…" */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; overflow-wrap:anywhere; } .pl-ver{font-size:10.5px;color:var(--txt-3);font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--card-2);border:1px solid var(--line-2);border-radius:5px;padding:0 5px;flex:none} .pl-auth{font-size:11.5px;color:var(--txt-3);display:flex;align-items:center;gap:5px; /* 卡片最窄只有 200px：作者名 / 版本 / 时间三者放不下时整块换行，绝不逐字竖排 */ flex-wrap:wrap;row-gap:2px;white-space:nowrap;line-height:1.5} .pl-auth .av{width:16px;height:16px} .pl-desc{font-size:12.5px;color:var(--txt-2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px} .pl-tags{display:flex;gap:4px;flex-wrap:wrap} .pl-tags i{font-style:normal;font-size:10.5px;color:var(--txt-2);background:var(--card-2);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px} .pl-stats{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--txt-3);margin-top:auto;padding-top:8px;border-top:1px dashed var(--line)} .pl-stats b{color:var(--txt);font-variant-numeric:tabular-nums;font-weight:700} .pl-stats .install{color:var(--accent-ink)} .pl-install{ margin-left:auto;border:0;border-radius:14px;padding:3px 12px;font-size:11.5px;font-weight:700;cursor:pointer; background:#e9f3fd;color:var(--brand-ink); transition:background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out); } .pl-install:active{transform:scale(.96)} .pl-install:hover{background:#d8ecff} .pl-install.done{background:#e7f9ef;color:var(--ok)} html[data-theme="night"] .pl-install{background:#12314c;color:#6cc0ff} html[data-theme="night"] .pl-install.done{background:#10301f;color:#5fe0a1} .hot-flag{position:absolute;right:0;top:0;background:linear-gradient(135deg,#c0392b,#a3223e);color:#fff;font-size:9.5px;font-weight:800;padding:2px 6px 2px 7px;border-bottom-left-radius:9px;letter-spacing:.4px;line-height:1.5} /* HOT 缎带绝对定位压在卡片右上角，长插件名会被它盖住：只给「名字那一行」让出缎带宽度， 作者行不动 —— 否则整块 .pl-top 被挤窄，作者名会竖着排 */ .pl-card .pl-top > div > div:first-child{padding-right:26px} /* ---------------- 社群 ---------------- */ .thread{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line-2);cursor:pointer;transition:background-color var(--dur-1) ease} .thread:last-child{border-bottom:0} .thread:hover{background:var(--card-2)} .thread .av{width:38px;height:38px;border-radius:50%} .th-main{flex:1;min-width:0} .th-title{font-size:var(--fs-title-list);font-weight:600;color:var(--txt);display:flex;align-items:center;gap:6px;line-height:var(--lh-title);transition:color var(--dur-1) ease} .thread:hover .th-title{color:var(--link)} .th-ex{font-size:var(--fs-sub-list);color:var(--txt-3);margin-top:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .th-meta{display:flex;gap:12px;font-size:11.5px;color:var(--txt-3);margin-top:6px;align-items:center;flex-wrap:wrap} .th-meta b{color:var(--txt-2);font-weight:600} .th-stats{text-align:right;flex:none;min-width:82px;font-size:11.5px;color:var(--txt-3);line-height:1.75} .th-stats b{font-size:14px;color:var(--txt);font-variant-numeric:tabular-nums;margin-right:2px} .th-stats .r{color:var(--accent-ink);font-weight:700} .tag{font-size:10.5px;font-weight:700;border-radius:6px;padding:1px 7px;white-space:nowrap} .tag.公告{background:#ffe9ef;color:var(--rose)}.tag.经验{background:#e6f2fe;color:var(--brand-ink)} .tag.求助{background:#fff3dd;color:var(--warn)}.tag.讨论{background:#efe9ff;color:#5a3fd6} .tag.教程{background:#e6f9ef;color:var(--ok)}.tag.周报{background:#eef2f6;color:var(--txt-2)} html[data-theme="night"] .tag.公告{background:#3a1524;color:#ff86ac} html[data-theme="night"] .tag.经验{background:#12314c;color:#6cc0ff} html[data-theme="night"] .tag.求助{background:#3a2a11;color:#ffc46b} html[data-theme="night"] .tag.讨论{background:#241c47;color:#b49cff} html[data-theme="night"] .tag.教程{background:#10301f;color:#5fe0a1} html[data-theme="night"] .tag.周报{background:#243346;color:#9fb0c4} /* 帖子详情 */ .post-head{padding:18px 20px 16px;border-bottom:1px solid var(--line-2)} .post-head h1,.post-head h2{margin:9px 0 0;font-size:var(--fs-title-detail);line-height:var(--lh-title);font-weight:800;letter-spacing:.2px} /* 副标题：和列表里的 .th-ex 是同一句话的放大版，所以只允许改字号/行高，不许换颜色语义 */ .tb-sub{margin:8px 0 0;font-size:var(--fs-sub-detail);line-height:1.6;color:var(--txt-2);font-weight:500} .post-head .crumb{font-size:12px;color:var(--txt-3)} .post-head .crumb a{color:var(--txt-3)} .post-head .crumb a:hover{color:var(--link)} .thread-body{padding:4px 22px 16px;border-bottom:1px solid var(--line-2)} .tb-text{font-size:var(--fs-body);line-height:1.95;white-space:pre-wrap;color:var(--txt);word-break:break-word} .tb-acts{display:flex;gap:14px;margin-top:14px;font-size:12px;color:var(--txt-3);flex-wrap:wrap} .floor{padding:16px 20px;border-bottom:1px solid var(--line-2);display:flex;gap:12px} .floor:last-child{border-bottom:0} .floor .av{width:40px;height:40px} .floor-main{flex:1;min-width:0} .floor-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--txt-3)} .floor-hd .nm{font-weight:700;font-size:13.5px;color:var(--link)} .floor-no{position:absolute;right:20px;font-size:12px;color:var(--txt-3)} .floor{position:relative} .floor-no b{color:var(--accent-ink);font-weight:700} .floor p{margin:8px 0 0;font-size:13.5px;white-space:pre-wrap;color:var(--txt)} .quote{ margin-top:9px;background:var(--card-2);border-left:3px solid #bfd9f0;border-radius:0 8px 8px 0; padding:7px 11px;font-size:12.5px;color:var(--txt-2); } .floor-actions{display:flex;gap:8px;margin-top:8px;font-size:11.5px;color:var(--txt-3)} .floor-actions button{border:0;background:none;color:var(--txt-3);cursor:pointer;font-size:11.5px;padding:0 2px} .floor-actions button:hover{color:var(--link)} .replybox{padding:14px 20px;background:var(--card-2);border-top:1px solid var(--line)} .replybox textarea{ width:100%;min-height:82px;border:1px solid var(--line);border-radius:8px;padding:10px 12px; font-size:13.5px;font-family:inherit;resize:vertical;outline:0;background:var(--card);color:var(--txt); } .replybox textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,156,244,.15)} .replybox .row{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:11.5px;color:var(--txt-3)} /* ---------------- v23 · 回复框四件套：表情 / 图片 / 提及 / 引用链接 ---------------- 面板都挂在 .replybox 里（syncRpPanel 用 beforeend 追加），所以只在这里定样式， 不动 .replybox 本身的布局；窄屏靠 flex-wrap + max-width + overflow 自适应， 不另加媒体查询，免得和 :950-953 那批既有移动端规则打架。 */ .replybox .rp-tools{display:flex;gap:6px;flex-wrap:wrap} .replybox .tool.on{border-color:var(--brand);color:var(--brand-ink);background:var(--sel);font-weight:700} .replybox .tp-panel{ margin-top:9px;padding:9px 10px;border:1px solid var(--line);border-radius:10px; background:var(--card);max-width:100%; } .replybox .emo-sets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:7px} .replybox .emo-set{ border:1px solid var(--line);background:var(--card-2);color:var(--txt-2);border-radius:14px; font:inherit;font-size:11.5px;padding:3px 10px;cursor:pointer; } .replybox .emo-set.on{border-color:var(--brand);background:var(--sel);color:var(--brand-ink);font-weight:700} .replybox .emo-grid{display:flex;flex-wrap:wrap;gap:3px;max-height:150px;overflow-y:auto} .replybox .emo-i{ width:30px;height:30px;border:0;border-radius:7px;background:none;font-size:18px;line-height:1; cursor:pointer;padding:0;transition:background-color .12s ease,transform .12s ease; } .replybox .emo-i:hover{background:var(--bg-2);transform:translateY(-1px)} .replybox .emo-recent{ display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:7px;padding-top:7px; border-top:1px dashed var(--line); } .replybox .emo-lb{font-size:11px;color:var(--txt-3);margin-right:2px} .replybox .men-panel{display:flex;flex-wrap:wrap;gap:6px;max-height:170px;overflow-y:auto} .replybox .men-i{ display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card-2); border-radius:18px;padding:4px 11px 4px 5px;font:inherit;font-size:12.5px;color:var(--txt);cursor:pointer; } .replybox .men-i:hover{border-color:var(--brand);background:var(--sel)} .replybox .men-i b{font-weight:700;color:var(--link)} .replybox .tp-empty{font-size:12px;color:var(--txt-3)} .replybox .lnk-panel{display:flex;flex-wrap:wrap;gap:7px;align-items:flex-end} .replybox .lnk-f{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--txt-3);flex:1 1 150px} .replybox .lnk-f input{ height:30px;border:1px solid var(--line);border-radius:8px;background:var(--card-2);color:var(--txt); font:inherit;font-size:12.5px;padding:0 9px;min-width:0;width:100%; } .replybox .lnk-f input:focus{border-color:var(--brand);outline:0} .replybox .lnk-tip{font-size:11px;color:var(--txt-3);flex-basis:100%} .replybox.drop-hot{outline:2px dashed var(--brand);outline-offset:-3px;border-radius:10px} /* 楼层正文里的行内富文本（@人 / 引用条 / 楼层链接 / 行内码）：都是短语级标签， .floor p 是 white-space:pre-wrap 的

，插不了

，所以引用条用 display:block 的 span */ .floor p .men{color:var(--link);font-weight:700;cursor:pointer} .floor p .men:hover{text-decoration:underline} .floor p .bq{ display:block;margin:7px 0;padding:6px 10px;border-left:3px solid #bfd9f0;border-radius:0 8px 8px 0; background:var(--card-2);color:var(--txt-2);font-size:12.5px; } .floor p code{background:var(--card-2);border-radius:5px;padding:1px 5px;font-size:12.5px} .floor p .jl{border:0;background:none;padding:0 2px;font:inherit;font-size:12.5px;color:var(--link);cursor:pointer} .floor p .jl:hover{text-decoration:underline} .fl-imgs{margin-top:9px} /* ---------------- 社群：标签云 / 反应 / 楼层导航（借鉴 Discourse + linux.do） ---------------- 分类不在这里着色：中栏那排分类胶囊已经删掉，社群分类只有左栏一张卡（.rail-*） */ .tag-plain{font-size:11px;color:var(--txt-3);background:var(--card-2);border:1px solid var(--line-2);border-radius:7px;padding:1px 7px;white-space:nowrap} .tag-plain.click{cursor:pointer;transition:background-color var(--dur-1) ease,color var(--dur-1) ease} .tag-plain.click:hover,.tag-plain.on{background:#e8f3ff;border-color:#c3e0fb;color:var(--brand-ink)} html[data-theme="night"] .tag-plain.click:hover,html[data-theme="night"] .tag-plain.on{background:rgba(31,134,232,.26);border-color:rgba(90,170,255,.42);color:#d3ecff} .cat-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--brand-ink);background:#eaf4fe;border-radius:6px;padding:1px 7px;white-space:nowrap} html[data-theme="night"] .cat-chip{background:#12314c;color:#6cc0ff} .solved{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;color:var(--ok);background:#e7f9ef;border-radius:6px;padding:1px 7px;white-space:nowrap} html[data-theme="night"] .solved{background:#10301f;color:#5fe0a1} .lock{font-size:11px;line-height:1} .new-dot{font-size:12px;font-weight:800;color:#fff;background:var(--brand);border-radius:7px;padding:1px 5px;letter-spacing:.5px} html[data-theme="night"] .new-dot{background:#1f86e8;color:#08131d} .th-title .pin{font-size:11.5px;padding:0 5px;flex:none;white-space:nowrap} .thread.is-new{background:linear-gradient(90deg,rgba(47,156,244,.06),transparent 62%)} /* 话题行：头像 | 正文 | 参与者 | 统计 */ .thread.trow{align-items:flex-start;gap:11px} .trow .th-main{padding-top:1px} .trow .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color var(--dur-1) ease} .trow:hover .tt{color:var(--link)} .trow-posters{display:flex;align-items:center;flex:none;padding-top:2px} .trow-posters .av{width:22px;height:22px;border-radius:50%;border:2px solid var(--card);margin-left:-6px;box-shadow:0 0 0 1px var(--line-2)} .trow-posters .av:first-child{margin-left:0} .trow-posters .pmore{font-size:10px;font-weight:700;color:var(--txt-3);background:var(--card-2);border:1px solid var(--line-2);border-radius:9px;padding:0 5px;margin-left:3px;line-height:15px} /* v33 · 社群列表行里的收藏星：先说结论再给数据，点它不会跳进帖子（closest 先命中按钮自己的 data-act） */ .th-fav{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:0 0 4px; border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--txt-3);font-size:13px;line-height:1; cursor:pointer;transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)} .th-fav:hover{color:#c98a00;border-color:#f0d19a;background:#fffaf0} .th-fav.on{color:#a15c00;border-color:#f0d19a;background:#fff7e8} html[data-theme="night"] .th-fav:hover,html[data-theme="night"] .th-fav.on{color:#ffd166;border-color:#5a4520;background:#241d10} .trow .th-stats .th-fav{order:-1;margin:0 6px 0 0;width:22px;height:22px;font-size:12px} .trow .th-stats{min-width:88px} .trow .th-stats .lk{color:var(--rose-ink);font-weight:600} .th-meta .tag-plain{padding:0 6px} .th-meta .who{color:var(--txt-2);font-weight:600} .th-meta .byline{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .th-meta .byline .dot{color:var(--txt-3)} .th-meta .lastr{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .th-meta .lastr i{font-style:normal;color:var(--txt-3)} .trow .th-meta .when{font-variant-numeric:tabular-nums} /* 反应条 */ .react-bar{display:flex;gap:5px;flex-wrap:wrap;margin-top:11px} .react{display:inline-flex;align-items:center;gap:3px;font-size:12px;background:var(--card-2);border:1px solid var(--line-2);border-radius:13px;padding:2px 8px;cursor:pointer;color:var(--txt-2);transition:background-color var(--dur-1) ease,border-color var(--dur-1) ease,transform var(--dur-1) var(--ease-out)} .react:hover{background:var(--card);border-color:var(--line);transform:translateY(-1px)} .react:active{transform:scale(.94)} .react b{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--txt-2)} .react.on{background:#e8f3ff;border-color:#bcdcfb;color:var(--brand-ink)} .react.on b{color:var(--brand-ink)} html[data-theme="night"] .react{background:var(--card-2);border-color:var(--line);color:#a7b9c9} html[data-theme="night"] .react b{color:#a7b9c9} html[data-theme="night"] .react:hover{background:#1d2b38;border-color:#2d4457} html[data-theme="night"] .react.on{background:rgba(31,134,232,.26);border-color:rgba(90,170,255,.42);color:#d3ecff} html[data-theme="night"] .react.on b{color:#d3ecff} /* 主楼 / 楼层细节 */ .op-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px} .tb-text{padding:14px 22px 0;font-size:var(--fs-body);line-height:1.85;color:var(--txt);white-space:pre-wrap} .thread-body .react-bar{padding:0 22px} .tb-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 22px 14px} .tb-acts .act{font-size:12px} .post-tip{font-size:11.5px;color:var(--txt-3);background:var(--card-2);border:1px dashed var(--line);border-radius:8px;padding:4px 9px;margin-left:auto} .replyto{font-size:11px;color:var(--brand-ink);background:#eaf4fe;border-radius:6px;padding:0 6px;cursor:pointer} .replyto:hover{background:#dbeeff} html[data-theme="night"] .replyto{background:#12314c;color:#6cc0ff} .reply-hint{font-size:11px;color:var(--txt-3);margin-right:auto;margin-left:10px} .reply-closed{padding:18px 20px;background:var(--card-2);border-top:1px solid var(--line);font-size:12.5px;color:var(--txt-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap} .floor.flash{animation:floorFlash 1.5s var(--ease-out)} @keyframes floorFlash{0%{background:rgba(47,156,244,.18)}100%{background:transparent}} /* 本帖导航 timeline */ .tl-bd{padding:9px 11px 11px} .tl-bar{height:3px;border-radius:2px;background:var(--line-2);overflow:hidden;margin-bottom:8px} .tl-bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--brand-2),var(--brand));transition:width var(--dur-3) var(--ease-out)} .tl-row{display:flex;align-items:center;gap:8px;padding:5px 3px;border-radius:7px;cursor:pointer;transition:background-color var(--dur-1) ease} .tl-row:hover{background:var(--card-2)} .tl-n{flex:0 0 auto;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--txt-2);background:var(--card-2);border:1px solid var(--line-2);font-variant-numeric:tabular-nums} .tl-row:hover .tl-n{background:#e8f3ff;border-color:#c3e0fb;color:var(--brand-ink)} .tl-t{font-size:11.5px;color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tl-back{margin-top:8px;width:100%;border:1px solid var(--line);background:var(--card);border-radius:8px;padding:6px 0;font-size:11.5px;color:var(--txt-2);cursor:pointer;font-family:inherit} .tl-back:hover{border-color:var(--brand);color:var(--brand-ink)} /* 社群准则：一行一条（图标 + 原则名 + 半句补充），四行总计约 130px */ .gl-bd{padding:5px 13px 7px} .gl-row{display:flex;align-items:center;gap:8px;padding:6px 0} .gl-row + .gl-row{border-top:1px dashed var(--line-2)} .gl-ico{flex:0 0 auto;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:11px;background:var(--card-2);border:1px solid var(--line-2)} .gl-row b{flex:0 0 auto;font-size:12.5px;line-height:1.4;color:var(--txt)} .gl-s{min-width:0;font-size:11.5px;line-height:1.4;color:var(--txt-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 本周活跃 / 计数 */ .act-row{display:flex;align-items:center;gap:8px;padding:6px 0} .act-row .rk{width:16px;font-size:12px;text-align:center;flex:0 0 auto} .act-tx{min-width:0} .act-tx b{display:block;font-size:12.5px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .act-tx span{font-size:11px;color:var(--txt-3)} .feed-note{font-size:11.5px;color:var(--txt-3)} .sp-row.on{background:#eaf4fe} .sp-row.on b{color:var(--brand-ink)} html[data-theme="night"] .sp-row.on{background:rgba(31,134,232,.22)} html[data-theme="night"] .sp-row.on b{color:#d3ecff} @media (max-width:1080px){ .trow-posters{display:none} .post-tip{display:none} } @media (max-width:760px){ .tb-text,.thread-body .react-bar,.tb-acts{padding-left:14px;padding-right:14px} .post-head h1,.post-head h2{font-size:16.5px} .tb-sub{font-size:13px} /* 窄屏改成两列网格：头像占左列两行，正文占右列第一行，统计横排到右列第二行 —— 标题因此拿到整行宽度，不必再被右侧 56px 的统计列挤成三个字 */ .trow{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:7px;align-items:start} .trow > .av{grid-column:1;grid-row:1/3} .trow .th-main{grid-column:2;grid-row:1} .trow .th-stats{grid-column:2;grid-row:2;min-width:0;display:flex;align-items:center;gap:14px;text-align:left;font-size:11px;line-height:1.5} .trow .th-stats>div{display:inline-flex;align-items:baseline;gap:3px} .trow .th-stats b{font-size:12px;margin-right:0} .trow .th-ex{-webkit-line-clamp:2} /* 主楼作者行：昵称信息可换行，关注按钮保持一整块 */ .post-head .op-meta,.op-meta{gap:5px} /* 窄屏一行放不下作者/时间/最后回复，最后回复整段落掉，避免出现只以「·」开头的孤立行 */ .trow .th-meta .lastr{display:none} .trow .th-meta{gap:8px} .tl-bd{padding:8px} } /* 个人页 */ .prof-cover{position:relative;height:200px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)} .prof-cover .layer{position:absolute;inset:0;background: radial-gradient(420px 160px at 18% 20%, rgba(255,255,255,.5), transparent 70%), linear-gradient(120deg,#5fc0f8 0%,#83d3ff 40%,#b9e7ff 70%,#ffe1f1 100%);} .prof-cover .grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 78%)} /* 封面总是浅色云霞：底部压一层白色薄纱，保证深色文字稳定过 AA */ .prof-cover::after{content:"";position:absolute;inset:auto 0 0 0;height:66%;pointer-events:none; background:linear-gradient(0deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.44) 48%,rgba(255,255,255,0) 100%)} .prof-id{position:absolute;z-index:2;left:26px;bottom:18px;display:flex;align-items:flex-end;gap:16px} .prof-id .av{width:96px;height:96px;border-radius:18px;border:4px solid #fff;box-shadow:0 12px 30px -12px rgba(5,50,90,.6)} .prof-id h2{margin:0;font-size:22px;color:#06406b;font-weight:800;display:flex;align-items:center;gap:8px;text-shadow:0 1px 0 rgba(255,255,255,.6)} .prof-id p{margin:3px 0 0;font-size:12.5px;color:#17557a} .prof-id .badges{display:flex;gap:6px;margin-top:7px} /* 自定义封面：底色深浅不可控，改成深色薄纱 + 白字，任何渐变上都过 AA */ .prof-cover.custom::after{background:linear-gradient(0deg,rgba(6,24,42,.74) 0%,rgba(6,24,42,.42) 46%,rgba(6,24,42,0) 100%)} .prof-cover.custom .prof-id h2{color:#fff;text-shadow:0 2px 12px rgba(3,18,34,.9)} .prof-cover.custom .prof-id p{color:#e8f3fc;text-shadow:0 1px 8px rgba(3,18,34,.85)} .prof-cover.custom .prof-id .tag-badge{box-shadow:0 1px 6px rgba(3,18,34,.5)} .prof-cover.custom .stat-row .s b{color:#fff;text-shadow:0 1px 8px rgba(3,18,34,.85)} .prof-cover.custom .stat-row .s span{color:#dbeaf8} /* 通用小件 */ .muted{color:var(--txt-3)} .stat-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .stat-row .s b{font-size:17px;display:block;line-height:1.2;font-variant-numeric:tabular-nums} .stat-row .s span{font-size:11.5px;color:var(--txt-3)} /* 封面内的统计块永远落在浅色薄纱上，用固定深色（不随主题变亮） */ .prof-cover .stat-row .s b{color:#06406b} .prof-cover .stat-row .s span{color:#2f5470;font-weight:600} .kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:12.5px} .kv dt{color:var(--txt-3)} .kv dd{margin:0;color:var(--txt)} .empty{padding:36px 16px;text-align:center;color:var(--txt-3);font-size:13px} .empty .big{font-size:30px;display:block;margin-bottom:8px;opacity:.6} .footer{max-width:var(--wrap-w);margin:0 auto;padding:0 18px 34px;color:var(--txt-2);font-size:12px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center} .footer a{color:var(--txt-2)}.footer a:hover{color:var(--link)} .foot-mark{display:inline-flex;align-items:center;gap:6px} .foot-mark svg{opacity:.75} /* 图片灯箱 */ .lightbox{ position:fixed;inset:0;background:rgba(8,18,30,.86);backdrop-filter:blur(4px);z-index:120; display:grid;place-items:center;opacity:0;pointer-events:none; transition:opacity var(--dur-3) var(--ease-out); } .lightbox.open{opacity:1;pointer-events:auto} .lightbox .stage{ width:min(78vw,820px);aspect-ratio:4/3;border-radius:14px;position:relative;overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6);transform:scale(.965);opacity:0; transition:transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out); } .lightbox.open .stage{transform:none;opacity:1} /* 退场与入场对称：更小、更快的反向 */ .lightbox.closing{opacity:0} .lightbox.closing .stage{transform:scale(.98);opacity:0;transition-duration:var(--dur-2)} .lightbox .stage .cap2{position:absolute;left:18px;bottom:16px;color:#fff;font-weight:700;font-size:15px;text-shadow:0 2px 8px rgba(0,0,0,.5)} .lightbox .stage .cap2 small{display:block;font-weight:400;opacity:.8;font-size:12px} /* 真图预览：让 stage 的 4/3 画幅让位给图片自身的比例，图完整可见（contain）， 说明文字压在底部渐变上而不是直接盖在图上。 */ .lightbox .stage.has-img{ aspect-ratio:auto;max-width:min(88vw,1080px);max-height:86vh;background:transparent!important; display:flex;flex-direction:column;align-items:center;justify-content:center; } .lb-img{ max-width:100%;max-height:82vh;border-radius:12px;display:block;object-fit:contain; box-shadow:0 24px 60px rgba(0,0,0,.55);background:#0b131c; } .lightbox .stage.has-img .cap2{ position:static;margin-top:12px;max-width:100%;text-align:center; background:linear-gradient(180deg,rgba(8,18,30,0),rgba(8,18,30,.72));padding:8px 14px;border-radius:10px; } .lightbox .x{position:absolute;top:22px;right:28px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:18px;cursor:pointer} .lightbox .x:hover{background:rgba(255,255,255,.3)} /* 右下浮动按钮 */ #totop{position:fixed;right:22px;bottom:24px;z-index:90;display:flex;flex-direction:column;gap:9px;align-items:center} .fab{ width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1; display:grid;place-items:center; transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease, opacity var(--dur-3) var(--ease-out); } .fab:active{transform:scale(.94)} .fab-write{border:0;color:#fff;background:linear-gradient(180deg,var(--accent),#99490b);box-shadow:0 10px 24px -12px rgba(153,73,11,.8)} .fab-top{ border:1px solid var(--line);color:var(--txt-2);background:var(--card); box-shadow:0 8px 20px -10px rgba(23,58,94,.5);opacity:0;pointer-events:none;transform:translateY(6px); } #totop.show .fab-top{opacity:1;pointer-events:auto;transform:none} @media (max-width:760px){ #totop{right:12px;bottom:calc(58px + env(safe-area-inset-bottom) + 14px)} .fab{width:40px;height:40px;font-size:15px} .toast-wrap{bottom:calc(58px + env(safe-area-inset-bottom) + 18px)} } /* toast */ .toast-wrap{position:fixed;left:50%;bottom:36px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none} .toast{ background:rgba(24,38,54,.94);color:#fff;font-size:13px;padding:9px 18px;border-radius:20px; box-shadow:0 12px 30px -12px rgba(0,0,0,.7);display:flex;align-items:center;gap:8px; opacity:0;transform:translateY(12px) scale(.98); transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); } .toast.in{opacity:1;transform:none} .toast.out{opacity:0;transform:translateY(-6px)} /* 响应式 */ /* 窄桌面：左分类栏降级成一条可横向滚动的胶囊条，占满整行 */ @media (max-width:1240px){ .wrap{grid-template-columns:minmax(0,1fr) 300px} .col-rail{ grid-column:1 / -1;position:static;flex-direction:row;gap:8px; overflow-x:auto;padding-bottom:2px;scrollbar-width:none; } .col-rail::-webkit-scrollbar{display:none} /* 横向滚动条末端渐隐，暗示还能往右滑 */ .col-rail{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%); } html[data-theme="night"] .rail-card{background:var(--card)} .rail-card{display:flex;align-items:center;gap:2px;padding:4px;flex:0 0 auto} /* 登录用户卡不是横条素材：它是「头像 + 昵称 / 数据 / 按钮」的纵排卡，被摊平成一行后每段都被挤窄， 昵称直接变成一列竖字。这一张保持纵排，只让它不参与收缩（横条要滑就滑）。 */ .col-rail > .rail-user{display:block;flex:0 0 auto;width:min(232px,76vw);padding:10px 11px} .rail-hd{display:none} .rail-item{white-space:nowrap;padding:6px 10px} .rail-dot .tx::before{display:none} /* 23 类的横条会非常长：药丸给个上限宽度 + 省略号（计数还留着，滑过去仍然看得出哪类有东西）； 卡内滚动与「收起」这套在横条里不需要，行要回到 .rail-card 的直接子级才能跟着 flex 排。 */ .rail-card .rail-list{display:contents} /* 标签卡整张也摊平成横条里的一串药丸（不然一个 flex 卡片会把十个标签压成一条长条） */ .rail-card .rail-chips{display:contents} .rail-card .rail-more{display:none} .rail-dot .tx{white-space:nowrap;max-width:8.5em;overflow:hidden;text-overflow:ellipsis} } @media (max-width:1080px){ .wrap,.wrap.no-rail{grid-template-columns:1fr} .col-side{position:static;flex-direction:row;flex-wrap:wrap;align-items:flex-start} .col-side > *{flex:1 1 260px} .mkt-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* 761–1100px：顶栏五格 + 250px 搜索框在这个区间排不下，「我的空间」会压到搜索框上（v34 实测 1024px）。 标签胶囊撤掉后省下的宽度还差一截，这里再收三处：logo 英文后缀、导航内边距、搜索框宽度。 */ @media (max-width:1100px) and (min-width:761px){ .nav-in{gap:12px} .logo small{display:none} .nav-links a{padding:7px 9px;font-size:13.5px} .nav-search{width:180px} } @media (max-width:760px){ :root{--nav-h:50px} /* 手机上那张用户卡与紧接着的空间头图完全重复（头像 / 昵称 / 三项数据 / 编辑资料都在）， 留着只是让横条先滚过一整张自己。空间头图跟上方的动作组已经覆盖这一屏的信息。 */ .col-rail > .rail-user{display:none} .nav-in{padding:0 12px;gap:10px} .nav-links{display:none} .logo{font-size:16px;gap:7px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis} .logo small{display:none} .nav-right{gap:7px;flex:0 0 auto} .avatar-btn span{display:none} .avatar-btn{padding:2px} .nav-search{width:auto;flex:0 1 auto;min-width:0;max-width:120px;padding:4px 9px} .wrap{padding:12px 12px 96px} .cover{height:148px} .cover .me .av{width:60px;height:60px;border-radius:12px} /* 窄屏：标题与右侧头像卡各占一边，标题不再钻到头像底下 */ .cover-txt{right:110px;bottom:20px} .cover-txt h1{font-size:16.5px;line-height:1.35;letter-spacing:.2px} /* 390px 下四个 tab 会各折两行：缩内距 + 允许横向滑动，别把标签挤成两行字 */ .tabs{padding:0 8px;gap:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .tabs::-webkit-scrollbar{display:none} .tabs .tab{padding:10px 10px;font-size:12.5px} .tabs .tab.on::after{left:10px;right:10px} .cover-txt p{font-size:11.5px} .cover .me{right:14px;bottom:10px} .cover .me .nm{display:none} .mkt-grid{grid-template-columns:1fr} .col-side{flex-direction:column;align-items:stretch} /* 竖排时 flex-basis 260px 会当成「高度」并靠 flex-grow 摊平，side-card 有 overflow:hidden， 于是每张卡被钉在 ~260px、内容被裁掉。竖排改成按内容定高。 */ .col-side > *{flex:0 0 auto} .prof-id .av{width:70px;height:70px} .prof-id h2{font-size:18px} .prof-cover{height:168px} .imgs.n3{grid-template-columns:1fr 1fr} .post{padding:13px} .floor,.post-head{padding-left:14px;padding-right:14px} .floor-no{right:14px} } /* 小屏（≤480px）：头图标题一行放不下就缩字号，别把「社群」折到第二行 */ @media (max-width:480px){ .cover-txt{right:96px} .cover-txt h1{font-size:14.5px;letter-spacing:0;line-height:1.35} } /* 360px 级小机：缩到 13.5px 才能保住单行（nowrap 自然宽 225 → 209） */ @media (max-width:400px){ /* 360px 级：顶栏一份收窄 —— 搜索 120 + 主题 34 + 消息 75 + 离线胶囊 112 + 间隙会把 .nav-right 顶到 362px（视口 360），整页横向溢出。主题切换在消息弹层与设置页都在，这里先让位 */ /* 语言切换占了 44px 后，品牌字会被压到只剩半个「鲸」；小机只留鲸尾标志，靠 flex:1 继续把右侧推到位 */ .logo{font-size:0;gap:0} .nav-right{gap:6px} .nav-act:not(.nav-act-key) .na-tx{display:none} .nav-right .icon-btn[data-act="theme"]{display:none} .nav-search{max-width:100px} /* 360px 级：tab 排满一行后「按时间」只能折行，索性让位给 tab */ .tabs .sort,.tabs .spacer{display:none} .cover-txt{right:104px} .cover-txt h1{font-size:13px;letter-spacing:0} } /* ── 入场编排：只在整页切换时跑一次（.wrap.enter），列表内状态更新不重播 ── */ .wrap.enter .col-main > *, .wrap.enter .col-rail > *, .wrap.enter .col-side > *{animation:riseIn var(--dur-4) var(--ease-out) both} .wrap.enter .col-main > *:nth-child(2){animation-delay:50ms} .wrap.enter .col-main > *:nth-child(3){animation-delay:100ms} .wrap.enter .col-main > *:nth-child(4){animation-delay:150ms} .wrap.enter .col-rail > *:nth-child(2){animation-delay:40ms} .wrap.enter .col-rail > *:nth-child(3){animation-delay:80ms} .wrap.enter .col-rail > *:nth-child(4){animation-delay:120ms} .wrap.enter .col-side > *:nth-child(2){animation-delay:60ms} .wrap.enter .col-side > *:nth-child(3){animation-delay:120ms} .wrap.enter .col-side > *:nth-child(4){animation-delay:180ms} @keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* 键盘可见焦点 */ :where(a,button,input,textarea,[tabindex]):focus-visible{outline:2px solid #fff;outline-offset:1px;box-shadow:0 0 0 4px rgba(8,58,104,.9);border-radius:8px} html[data-theme="night"] :where(a,button,input,textarea,[tabindex]):focus-visible,html[data-theme="night"] [data-act]:focus-visible{outline-color:#0b131c;box-shadow:0 0 0 4px rgba(120,196,255,.95)} /* 位移只给精确指针：触屏不粘 hover 态 */ @media (hover:hover) and (pointer:fine){ .icon-btn:hover{transform:translateY(-1px)} .btn:hover{transform:translateY(-1px)} .pl-card:hover{transform:translateY(-2px)} .fab:hover{transform:translateY(-2px)} .visitors .v:hover .av{transform:translateY(-2px) scale(1.04)} } /* 减少动态：更少更轻，不是全零——保留颜色过渡与淡入 */ @media (prefers-reduced-motion:reduce){ :root{--dur-1:1ms;--dur-2:90ms;--dur-3:90ms;--dur-4:90ms} *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important} .wrap.enter .col-main > *,.wrap.enter .col-side > *{animation:none!important} .btn:hover,.btn:active,.icon-btn:hover,.pl-card:hover,.fab:hover,.fab:active, .act:active,.pl-install:active,.visitors .v:hover .av{transform:none!important} .lightbox .stage,.toast{transform:none!important} } /* ════════════════════════════════════════════════════════════════ v6 · 条目库与作者授权分发 v44 起档位只描述「包信息登记到哪一步」，不再暗示本站发货： pack = 作者已登记包信息（文件在作者仓库）、link = 只有外链、entry = 只有条目。 档位徽章跨页统一：形状（📋 / ↗ / ·）+ 文字 + 颜色三重编码，不只靠颜色。 ════════════════════════════════════════════════════════════════ */ /* ---------- 档位徽章 ---------- */ .tier-badge{ display:inline-flex;align-items:center;gap:4px;flex:none; font-size:11px;font-weight:700;line-height:1.6;padding:1px 8px;border-radius:9px; border:1px solid transparent;white-space:nowrap;letter-spacing:.1px; } .tier-badge i{font-style:normal;font-size:11px;opacity:.95} .tier-badge.pack{background:linear-gradient(180deg,#1a72c0,var(--brand-deep));color:#fff;box-shadow:0 4px 10px -6px rgba(23,117,200,.85)} .tier-badge.link{background:#eaf4ff;color:var(--brand-ink);border-color:#c6e0fa} .tier-badge.entry{background:var(--card-2);color:var(--txt-3);border-color:var(--line)} html[data-theme="night"] .tier-badge.link{background:#12314c;color:#6cc0ff;border-color:#1d4a70} html[data-theme="night"] .tier-badge.entry{background:#18242f;color:#9fb2c4;border-color:#22323f} html[data-theme="night"] .tier-badge.pack{background:linear-gradient(180deg,#2a76b8,#17599a);color:#fff} .tier-badge.tiny{font-size:10px;padding:0 6px;border-radius:7px} /* 徽章自带配色，父级行内文字色（.pi-tx span / .gt span）不许覆盖 */ .tier-badge.pack{color:#fff!important} .tier-badge.link{color:var(--brand-ink)!important} .tier-badge.entry{color:var(--txt-3)!important} html[data-theme="night"] .tier-badge.link{color:#6cc0ff!important} html[data-theme="night"] .tier-badge.entry{color:#9fb2c4!important} /* ---------- 市场列表：整卡可点 + 档位行 ---------- */ .pl-card{cursor:pointer} .pl-card .pl-install,.pl-card .pl-tier{position:relative;z-index:1} /* 放不下就整段换到第二行，别把「包信息见作者仓库」截成半句 */ /* 不换行：换行会让卡片高度忽高忽低（许可证被挤到第二行），空间不够就让 meta 省略 */ .pl-tier{display:flex;align-items:center;gap:8px;margin-top:8px;min-width:0;flex-wrap:nowrap} /* meta 让位给许可证徽章：以前 meta 是 flex:1 吃满整行，把徽章挤到第二行， 卡片高度忽高忽低。现在 meta 可缩、徽章 margin-left:auto 靠右，空间不够先省略 meta。 */ .pl-tier .meta{font-size:11px;color:var(--txt-3);flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pl-tier .meta b{color:var(--txt-2);font-weight:600;font-variant-numeric:tabular-nums} .pl-tier .meta .none{color:var(--rose-ink);font-weight:700} /* 许可证徽章：三档语义色。绿=宽松（拿去用基本没约束），琥珀=著佐权/非商业（要守条款）， 灰=作者没写（中性，不是错误），红=作者明确 UNLICENSED（那是真的不能用）。 之前对「没写」也用红字，6716 张卡里 6600 张在喊同一句话，反而看不出谁有许可证。 */ .pl-lic{ flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:4px; font-size:10.5px;font-weight:700;letter-spacing:.01em; border-radius:999px;padding:1.5px 7px;border:1px solid var(--line); color:var(--txt-2);background:var(--card-2);white-space:nowrap; font-variant-numeric:tabular-nums; } .pl-lic::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.75} .pl-lic.open{color:#1f7a4d;border-color:#b7e3cb;background:#eefaf3} .pl-lic.strict{color:#8a5a00;border-color:#f0dcae;background:#fdf7e8} .pl-lic.closed{color:var(--rose-ink);border-color:#f3c9d3;background:#fdf1f4} .pl-lic.none{color:var(--txt-3);border-color:var(--line-2);background:transparent;font-weight:600} .pl-lic.none::before{opacity:.45} html[data-theme="night"] .pl-lic.open{color:#5cd39a;border-color:#1e4d36;background:#0f2a1d} html[data-theme="night"] .pl-lic.strict{color:#e0b055;border-color:#4d3c15;background:#2a2210} html[data-theme="night"] .pl-lic.closed{color:#f08aa3;border-color:#4d2230;background:#2a1218} html[data-theme="night"] .pl-lic.none{color:#93a4b4;border-color:#2a3a48;background:transparent} .tier-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line-2);background:var(--card-2)} .tier-bar .lb{font-size:11.5px;color:var(--txt-3);font-weight:700} .tier-chip{ display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--card); color:var(--txt-2);border-radius:14px;padding:3px 11px;font-size:12px;cursor:pointer;font-weight:600; transition:background-color var(--dur-1) ease,border-color var(--dur-1) ease,color var(--dur-1) ease; } .tier-chip i{font-style:normal;font-size:11px} .tier-chip:hover{border-color:#b9d9f2;color:var(--link)} .tier-chip.on{background:var(--brand);border-color:transparent;color:#fff;box-shadow:0 5px 12px -6px rgba(23,117,200,.7)} .tier-bar .dist{margin-left:auto;font-size:11.5px;color:var(--txt-3);font-variant-numeric:tabular-nums} .tier-bar .dist b{color:var(--txt-2);font-weight:700} /* ---------- 条目页 ---------- */ .entry-hero{ background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow); padding:18px;display:flex;gap:16px;align-items:flex-start;position:relative;overflow:hidden; } .entry-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad,linear-gradient(90deg,#7dd3fc,#4f46e5))} .eh-ico{width:88px;height:88px;border-radius:20px;display:grid;place-items:center;font-size:42px;flex:none;box-shadow:0 10px 24px -12px rgba(16,60,105,.6)} .eh-main{flex:1;min-width:0} .eh-name{margin:0;font-size:22px;font-weight:800;letter-spacing:.2px;line-height:1.3;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .eh-pkg{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:12.5px;color:var(--txt-3);margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .eh-ver{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--brand-ink);background:#e8f3ff;border:1px solid #cfe6fb;border-radius:7px;padding:0 6px;font-variant-numeric:tabular-nums} html[data-theme="night"] .eh-ver{background:#12314c;color:#6cc0ff;border-color:#1d4a70} .eh-desc{margin:9px 0 0;font-size:13px;color:var(--txt-2);line-height:1.68;max-width:58ch} .eh-tags{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px} .eh-acts{display:flex;flex-direction:column;gap:8px;flex:none;align-items:stretch;min-width:120px} .eh-acts .btn{white-space:nowrap} .eh-stat{display:flex;gap:14px;font-size:11.5px;color:var(--txt-3);margin-top:11px;flex-wrap:wrap} .eh-stat b{color:var(--txt);font-variant-numeric:tabular-nums} /* ---------- 下载区 ---------- */ .dl-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;position:relative} .dl-box[data-tier="pack"]{border-color:#bcdcf3;box-shadow:var(--shadow),0 0 0 3px rgba(23,117,200,.06)} .dl-box[data-tier="entry"]{background:var(--card-2)} .dl-hd{display:flex;align-items:center;gap:9px;margin-bottom:12px;flex-wrap:wrap} .dl-hd .t{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px} .dl-hd .t::before{content:"";width:3px;height:15px;border-radius:2px;background:linear-gradient(180deg,var(--brand-2),var(--brand))} .dl-tier-full{font-size:11.5px;color:var(--txt-3)} .dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;max-width:100%;padding:11px 22px;border-radius:22px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums} .dl-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--txt-3);margin-top:10px} .dl-info .sha{ font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:11.5px;color:var(--txt-2); background:var(--card-2);border:1px solid var(--line);border-radius:7px;padding:1px 8px;cursor:pointer; transition:color var(--dur-1) ease,border-color var(--dur-1) ease,background-color var(--dur-1) ease; } .dl-info .sha:hover{color:var(--link);border-color:#b9d9f2;background:#f3f9ff} html[data-theme="night"] .dl-info .sha:hover{background:#12314c} .dl-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;margin-top:9px} .dl-links i{font-style:normal;color:var(--txt-3)} /* 「仓库未标注」是中性事实，不是警告：灰字即可，红色留给 UNLICENSED 那种真不能用的情况 */ .dl-links .lic-none{color:var(--txt-3);font-weight:600} .dl-links .lic-doc{color:var(--link);text-decoration:none;border-bottom:1px dashed currentColor;padding-bottom:1px} .dl-links .lic-doc:hover{color:var(--accent-ink)} .dl-note{margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--txt-3);line-height:1.65} /* v44 · 三步获取说明：下载 → 核对 sha256 → 安装。放在按钮下面当「说明书」， 每条一行、命令用等宽字体，复制 sha 的按钮就长在第二步里。 */ .dl-steps{ margin:12px 0 0;padding:12px 14px 12px 30px;list-style:decimal; border:1px solid var(--line-2);border-radius:10px;background:var(--card-2); font-size:12px;line-height:1.75;color:var(--txt-2); } .dl-steps li{margin:0 0 8px;padding-left:2px} .dl-steps li:last-child{margin-bottom:0} .dl-steps li::marker{color:var(--txt-3);font-weight:700;font-size:11px} .dl-steps b{color:var(--txt);font-weight:700} .dl-steps a{color:var(--link);font-weight:700} .dl-steps code{ font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:11.5px; background:var(--card);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px;overflow-wrap:anywhere; } .sha-full{ display:inline;margin:0;padding:0;border:0;background:none;font:inherit; font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:11.5px;font-weight:700; color:var(--brand-ink);cursor:pointer; } .sha-hex{text-decoration:underline;text-underline-offset:2px} /* 提示语别跟着一起下划线，否则整串看着像一个地址 */ .sha-more{font-family:var(--sans);font-weight:400;font-size:11px;color:var(--txt-3);margin-left:2px} .sha-full:hover{color:var(--link)} .sha-full:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:4px} /* 浏览器拒绝写剪贴板时兜底的只读框：完整 64 位都在这儿，已自动全选 */ .sha-fallback{ display:block;width:100%;margin:6px 0 0;padding:5px 8px;border:1px solid var(--brand-2);border-radius:7px; background:var(--card);color:var(--txt);font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:11.5px;letter-spacing:.2px; } html[data-theme="night"] .dl-steps{background:#16212c;border-color:#243444;color:var(--txt-2)} html[data-theme="night"] .sha-full{color:#8fd0ff} .dl-outdated{margin-top:10px;padding:8px 11px;border-radius:9px;font-size:12px;line-height:1.65;background:#fff7e6;border:1px solid #ffe0a8;color:#7a4a00} html[data-theme="night"] .dl-outdated{background:#3a2a11;border-color:#5a3f14;color:#f0c070} .dl-none{font-size:13px;color:var(--txt-2);line-height:1.7} .dl-why{font-size:12px;color:var(--txt-3);margin-top:7px;line-height:1.7} .dl-ask{ margin-top:11px;padding:9px 12px;border-radius:9px;font-size:12px;line-height:1.7; background:#eef6ff;border:1px solid #cfe4fa;color:#12456f;display:flex;align-items:center;gap:8px;flex-wrap:wrap; } html[data-theme="night"] .dl-ask{background:#102a3f;border-color:#1d4a70;color:#a8d8ff} .dl-ask button{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--link);cursor:pointer} .dl-rep{margin-top:10px;font-size:11.5px;color:var(--txt-3)} .dl-rep button{border:0;background:none;padding:0;font:inherit;color:var(--txt-3);text-decoration:underline;cursor:pointer} .dl-rep button:hover{color:var(--rose-ink)} /* 举报面板 */ .rp-box{margin-top:10px;padding:12px 13px;border-radius:10px;background:var(--card-2);border:1px solid var(--line)} .rp-box .rp-t{font-size:12.5px;font-weight:700;margin-bottom:2px} .rp-box .rp-d{font-size:11.5px;color:var(--txt-3);line-height:1.6} .rp-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .rp-opt{ font-size:12px;padding:5px 12px;border-radius:13px;border:1px solid var(--line); background:var(--card);color:var(--txt-2);cursor:pointer;font-family:inherit; transition:border-color var(--dur-1) ease,color var(--dur-1) ease,background-color var(--dur-1) ease; } .rp-opt:hover{border-color:#f3b6c4;color:var(--rose-ink);background:#fff5f8} .rp-opt.on{border-color:var(--rose);color:#fff;background:var(--rose)} html[data-theme="night"] .rp-opt:hover{background:#3a1524;color:#ff86ac} /* ---------- 条目正文 ---------- */ .doc-sec{padding:2px 0 4px} .doc-sec + .doc-sec{margin-top:4px;padding-top:14px;border-top:1px solid var(--line-2)} .doc-sec h2,.doc-sec h3{margin:0 0 8px;font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px} .doc-sec h2::before,.doc-sec h3::before{content:"";width:3px;height:14px;border-radius:2px;background:linear-gradient(180deg,var(--brand-2),var(--brand))} .doc-sec p{margin:0 0 8px;font-size:13px;line-height:1.78;color:var(--txt-2)} .doc-sec p:last-child{margin-bottom:0} .doc-ul{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px} .doc-ul li{position:relative;padding-left:16px;font-size:13px;line-height:1.72;color:var(--txt-2)} .doc-ul li::before{content:"";position:absolute;left:4px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--brand-2)} .doc-code{ margin:9px 0 0;padding:11px 13px;border-radius:9px;background:var(--card-2);border:1px solid var(--line); font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:12.5px;line-height:1.7; color:var(--txt);overflow-x:auto;white-space:pre; } .doc-note{font-size:11.5px;color:var(--txt-3);margin-top:7px;line-height:1.6} /* ---------- 认领页 ---------- */ .claim-hero{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;display:flex;gap:14px;align-items:center} .claim-hero .ch-ico{width:64px;height:64px;border-radius:17px;display:grid;place-items:center;font-size:31px;flex:none} .claim-hero .ch-tx{flex:1;min-width:0} .claim-hero h1,.claim-hero h2{margin:0;font-size:19px;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .claim-hero p{margin:5px 0 0;font-size:12.5px;color:var(--txt-2);line-height:1.65;max-width:60ch} .stamp{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:1px 8px;border-radius:9px;border:1px solid transparent;white-space:nowrap} .stamp.ok{background:#e6f9ef;color:var(--ok-ink);border-color:#c8f0dc} .stamp.wait{background:var(--card-2);color:var(--txt-3);border-color:var(--line)} html[data-theme="night"] .stamp.ok{background:#10301f;border-color:#1b5238} .claim-tabs{display:flex;gap:4px;padding:10px 14px 0;border-bottom:1px solid var(--line-2);flex-wrap:wrap} .claim-tab{ border:1px solid transparent;border-bottom:0;background:none;font-family:inherit; padding:8px 14px;border-radius:9px 9px 0 0;font-size:13px;font-weight:600;color:var(--txt-2); cursor:pointer;display:flex;align-items:center;gap:6px;margin-bottom:-1px; transition:background-color var(--dur-1) ease,color var(--dur-1) ease; } .claim-tab:hover{background:var(--card-2);color:var(--link)} .claim-tab.on{background:var(--card);border-color:var(--line-2);color:var(--brand-ink);box-shadow:0 2px 0 0 var(--card)} html[data-theme="night"] .claim-tab.on{color:#8fd0ff} .claim-pane{padding:16px 18px 18px} .claim-lead{font-size:12.5px;color:var(--txt-2);line-height:1.7;margin:0 0 11px} .verify-str{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 13px;border-radius:10px;background:var(--card-2);border:1px dashed var(--line)} .verify-str code{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:13.5px;font-weight:700;color:var(--txt);letter-spacing:.4px;word-break:break-all} .claim-steps{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;counter-reset:cs} .claim-steps li{position:relative;padding-left:26px;font-size:12.5px;line-height:1.7;color:var(--txt-2);counter-increment:cs} .claim-steps li::before{ content:counter(cs);position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%; background:var(--card-2);border:1px solid var(--line);color:var(--txt-3); font-size:10.5px;font-weight:800;display:grid;place-items:center; } .claim-act{display:flex;align-items:center;gap:10px;margin-top:15px;flex-wrap:wrap} .vf-box{margin-top:13px;padding:11px 13px;border-radius:10px;font-size:12.5px;line-height:1.7;border:1px solid transparent;display:flex;gap:9px} .vf-box .vf-ic{flex:none;font-size:14px;line-height:1.4} .vf-box.ok{background:#e6f9ef;border-color:#c8f0dc;color:#0a6a4c} .vf-box.fail{background:#fff2f6;border-color:#f8ccda;color:#8d1236} .vf-box.work{background:#eef6ff;border-color:#cfe4fa;color:#12456f} html[data-theme="night"] .vf-box.ok{background:#10301f;border-color:#1b5238;color:#5fe0a1} html[data-theme="night"] .vf-box.fail{background:#3a1524;border-color:#5c2136;color:#ff9dba} html[data-theme="night"] .vf-box.work{background:#102a3f;border-color:#1d4a70;color:#a8d8ff} .perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px} .perm-col{padding:11px 13px;border-radius:10px;background:var(--card-2);border:1px solid var(--line)} .perm-col .pc-t{font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:6px;margin-bottom:6px} .perm-col ul{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:4px} .perm-col li{font-size:12px;color:var(--txt-2);line-height:1.6;padding-left:13px;position:relative} .perm-col li::before{content:"";position:absolute;left:2px;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--brand-2)} .perm-note{font-size:11.5px;color:var(--txt-3);margin-top:10px;line-height:1.65} .grant-box{margin-top:14px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--card-2)} .gb-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .gb-hd .gb-t{font-size:13.5px;font-weight:800} .gb-hd .gb-sw{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt-2)} .sw{ width:42px;height:23px;border-radius:13px;border:1px solid var(--line);background:var(--line-2); position:relative;cursor:pointer;flex:none;padding:0; transition:background-color var(--dur-2) ease,border-color var(--dur-2) ease; } .sw::after{ content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff; box-shadow:0 1px 3px rgba(16,60,105,.4);transition:transform var(--dur-2) var(--ease-out); } .sw.on{background:var(--brand);border-color:transparent} .sw.on::after{transform:translateX(19px)} .gb-body{margin-top:11px;display:flex;flex-direction:column;gap:8px} .gb-opt{ display:flex;align-items:flex-start;gap:9px;padding:9px 12px;border-radius:10px; border:1px solid var(--line);background:var(--card);cursor:pointer; transition:border-color var(--dur-1) ease,background-color var(--dur-1) ease; } .gb-opt:hover{border-color:#b9d9f2} .gb-opt.on{border-color:var(--brand);background:#f3f9ff;box-shadow:0 0 0 2px rgba(23,117,200,.1)} html[data-theme="night"] .gb-opt.on{background:#12314c;border-color:#2f7fc4} html[data-theme="night"] .gb-opt.on .gt span:not(.rec){color:#9fb2c4} .gb-opt .rd{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line);flex:none;margin-top:2px;background:var(--card);position:relative} .gb-opt.on .rd{border-color:var(--brand)} .gb-opt.on .rd::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--brand)} .gb-opt .gt{flex:1;min-width:0} .gb-opt .gt b{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .gb-opt .gt span:not(.rec){display:block;font-size:11.5px;color:var(--txt-3);line-height:1.6;margin-top:2px} .gb-note{font-size:11.5px;color:var(--txt-3);margin-top:10px;line-height:1.65} .rec{font-size:10px;font-weight:800;color:#fff;background:var(--ok);border-radius:6px;padding:0 5px;letter-spacing:.2px} /* ---------- 上传页 ---------- */ .up-drop{ border:1.5px dashed var(--line);border-radius:var(--r);background:var(--card-2); padding:26px 18px;text-align:center;cursor:pointer; transition:border-color var(--dur-2) ease,background-color var(--dur-2) ease; } .up-drop:hover,.up-drop.hot{border-color:var(--brand);background:#f3f9ff} html[data-theme="night"] .up-drop.hot{background:#12314c} .up-drop .ud-ic{font-size:28px;line-height:1.2} .up-drop .ud-t{font-size:13.5px;font-weight:700;margin-top:6px} .up-drop .ud-d{font-size:11.5px;color:var(--txt-3);margin-top:4px;line-height:1.6} .up-file{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:10px;background:var(--card-2);border:1px solid var(--line);margin-top:12px} .up-file .uf-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:16px;background:var(--card);border:1px solid var(--line);flex:none} .up-file .uf-tx{flex:1;min-width:0} .up-file .uf-tx b{font-size:12.5px;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .up-file .uf-tx span{font-size:11.5px;color:var(--txt-3);font-variant-numeric:tabular-nums} .up-file .uf-x{border:0;background:none;font-size:15px;color:var(--txt-3);cursor:pointer;padding:2px 4px;font-family:inherit} .up-file .uf-x:hover{color:var(--rose-ink)} .up-err{margin-top:10px;padding:9px 12px;border-radius:9px;font-size:12px;line-height:1.65;background:#fff2f6;border:1px solid #f8ccda;color:#8d1236} html[data-theme="night"] .up-err{background:#3a1524;border-color:#5c2136;color:#ff9dba} .up-warn{margin-top:10px;padding:9px 12px;border-radius:9px;font-size:12px;line-height:1.65;background:#fff7e6;border:1px solid #ffe0a8;color:#7a4a00} html[data-theme="night"] .up-warn{background:#3a2a11;border-color:#5a3f14;color:#f0c070} .up-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:12.5px;margin:12px 0 0} .up-meta dt{color:var(--txt-3)} .up-meta dd{margin:0;font-weight:600;color:var(--txt)} .up-meta dd.mono{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:11.5px;font-weight:400} .pick-row{display:flex;flex-wrap:wrap;gap:7px} .pick{ font-size:12px;padding:5px 12px;border-radius:9px;border:1px solid var(--line); background:var(--card);color:var(--txt-2);cursor:pointer;font-weight:600;font-family:inherit; transition:background-color var(--dur-1) ease,border-color var(--dur-1) ease,color var(--dur-1) ease; } .pick:hover{border-color:#b9d9f2;color:var(--link)} .pick.on{background:#e8f3ff;border-color:#b9d9f2;color:var(--brand-ink)} html[data-theme="night"] .pick.on{background:#12314c;border-color:#1d4a70;color:#8fd0ff} .chk{display:flex;align-items:flex-start;gap:9px;padding:8px 0;cursor:pointer;font-size:12.5px;line-height:1.66;color:var(--txt-2);border:0;background:none;font-family:inherit;text-align:left;width:100%} .chk .bx{ width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line);background:var(--card); flex:none;margin-top:2px;position:relative; transition:background-color var(--dur-1) ease,border-color var(--dur-1) ease; } .chk.on .bx{background:var(--brand);border-color:var(--brand)} .chk.on .bx::after{content:"";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .chk:hover .bx{border-color:var(--brand-2)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .form-row.wide{grid-column:1/-1} .form-row label{font-size:12.5px;font-weight:700;color:var(--txt)} .form-row label .req{color:var(--rose-ink);margin-left:3px} .form-row input[type=text],.form-row textarea{ font-family:inherit;font-size:13px;color:var(--txt);background:var(--card-2); border:1px solid var(--line);border-radius:9px;padding:8px 11px;outline:0;width:100%; transition:border-color var(--dur-1) ease,box-shadow var(--dur-1) ease; } .form-row input[type=text]:focus,.form-row textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(23,117,200,.14);background:var(--card)} .form-row .hint{font-size:11.5px;color:var(--txt-3);line-height:1.6} .form-row textarea{min-height:70px;resize:vertical;line-height:1.7} .form-act{display:flex;align-items:center;gap:11px;padding-top:4px;flex-wrap:wrap} /* 判定卡（Step 2.5） */ .verdict{border-radius:var(--r);border:1px solid var(--line);background:var(--card-2);padding:15px 17px;margin-top:4px;position:relative;overflow:hidden} .verdict::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)} .verdict[data-t="entry"]::before{background:var(--rose)} .verdict[data-t="link"]::before{background:var(--accent-2)} .verdict[data-t="pack"]::before{background:var(--ok)} .verdict .vh{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:800;margin-bottom:10px;flex-wrap:wrap} .verdict .rows{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:12.5px;margin:0} .verdict .rows dt{color:var(--txt-3)} .verdict .rows dd{margin:0;color:var(--txt);font-weight:600} .verdict .tip{margin-top:11px;padding:9px 12px;border-radius:9px;font-size:12px;line-height:1.7;background:#fff7e6;border:1px solid #ffe0a8;color:#7a4a00} html[data-theme="night"] .verdict .tip{background:#3a2a11;border-color:#5a3f14;color:#f0c070} .verdict .tip.good{background:#e6f9ef;border-color:#c8f0dc;color:#0a6a4c} html[data-theme="night"] .verdict .tip.good{background:#10301f;border-color:#1b5238;color:#5fe0a1} /* 作者可见数据 */ .trend{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:8px} .trend i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--brand-2),var(--brand));min-height:3px;opacity:.85} .trend-lb{display:flex;justify-content:space-between;font-size:10.5px;color:var(--txt-3);margin-top:5px;font-variant-numeric:tabular-nums} .aw-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:4px} .aw-stats .s{text-align:center;padding:7px 4px;border-radius:9px;background:var(--card-2);border:1px solid var(--line)} .aw-stats .s b{display:block;font-size:15px;font-variant-numeric:tabular-nums;line-height:1.3} .aw-stats .s span{font-size:10.5px;color:var(--txt-3)} /* ---------- 政策页（左目录 + 右正文） ---------- */ .doc-wrap{max-width:var(--wrap-w);margin:0 auto;padding:18px 18px 60px;display:grid;grid-template-columns:196px minmax(0,1fr);gap:18px;align-items:start} .doc-nav{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;position:sticky;top:calc(var(--nav-h) + 16px)} .doc-nav .hd{padding:11px 14px;font-weight:800;font-size:13px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:7px} .doc-nav .hd::before{content:"";width:3px;height:14px;border-radius:2px;background:linear-gradient(180deg,var(--brand-2),var(--brand))} .doc-nav a{display:block;padding:8px 14px;font-size:12.5px;color:var(--txt-2);border-left:2px solid transparent} .doc-nav a:hover{background:var(--card-2);color:var(--link)} .doc-nav a.on{background:#e8f3ff;color:var(--brand-ink);font-weight:700;border-left-color:var(--brand)} html[data-theme="night"] .doc-nav a.on{background:#12314c;color:#8fd0ff} .doc-body{display:flex;flex-direction:column;gap:14px;min-width:0} .doc-body .card-bd{padding:6px 26px 22px} .doc-body h2{margin:26px 0 10px;font-size:17px;font-weight:800;display:flex;align-items:center;gap:9px;scroll-margin-top:calc(var(--nav-h) + 20px)} .doc-body h2 .no{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;flex:none;font-size:12px;font-weight:800;color:var(--brand-ink);background:#e8f3ff;border:1px solid #cfe6fb} html[data-theme="night"] .doc-body h2 .no{background:#12314c;color:#6cc0ff;border-color:#1d4a70} .doc-body h2:first-child{margin-top:6px} .doc-body p{font-size:13px;line-height:1.82;color:var(--txt-2);margin:0 0 10px} .doc-body .doc-lead{font-size:13px;color:var(--txt-3);padding:10px 0 12px;border-bottom:1px dashed var(--line);margin-bottom:6px;line-height:1.8} .doc-step{display:flex;gap:10px;padding:7px 0} .doc-step .n{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:11px;font-weight:800;margin-top:2px} .doc-step .tx{font-size:13px;line-height:1.75;color:var(--txt-2)} .doc-step .tx b{color:var(--txt)} .doc-quote{margin:12px 0 0;padding:12px 14px;border-radius:9px;background:var(--card-2);border-left:3px solid var(--brand-2);font-size:12.5px;line-height:1.78;color:var(--txt-2)} .doc-tb{width:100%;border-collapse:collapse;margin:10px 0 4px;font-size:12.5px} .doc-tb th,.doc-tb td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line-2);vertical-align:top} .doc-tb th{font-weight:700;color:var(--txt);background:var(--card-2);font-size:12px} .doc-tb td{color:var(--txt-2)} .doc-tb tr:last-child td{border-bottom:0} .doc-tb .ok{color:var(--ok-ink);font-weight:700} .doc-tb .no{color:var(--rose-ink);font-weight:700} .doc-tb .mid{color:var(--warn-ink);font-weight:700} /* ---------- 内嵌插件小卡（日志 / 楼层） ---------- */ .plug-inline{ display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 12px; border:1px solid var(--line);border-radius:10px;background:var(--card-2);cursor:pointer; transition:border-color var(--dur-1) ease,background-color var(--dur-1) ease; } .plug-inline:hover{border-color:#b9d9f2;background:#f3f9ff} html[data-theme="night"] .plug-inline:hover{background:#18242f} .plug-inline .pi-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex:none} /* ================= P0：移动端底栏 + 发帖表单 ================= */ .m-tabbar{display:none} @media (max-width:760px){ .m-tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;z-index:70;background:var(--card);border-top:1px solid var(--line-2);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 14px rgba(16,60,105,.08)} .m-tabbar a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;font-size:11px;font-weight:600;color:var(--txt-2);text-decoration:none} .m-tabbar a .ic{font-size:19px;line-height:1} .m-tabbar a.on{color:var(--brand);font-weight:800} .footer{padding-bottom:calc(34px + 54px)} } .newthread-card .form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px} .newthread-card .form-row.wide{grid-column:1/-1} .newthread-card label{font-size:12.5px;font-weight:600;color:var(--txt-2)} .newthread-card .req{color:var(--rose-ink);margin-left:2px} .newthread-card input,.newthread-card select,.newthread-card textarea{border:1px solid var(--line);background:var(--card-2);color:var(--txt);border-radius:9px;padding:8px 11px;font-size:13px;font-family:inherit;outline:0} .newthread-card input:focus,.newthread-card select:focus,.newthread-card textarea:focus{border-color:var(--brand)} .newthread-card .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px} .newthread-card .form-act{display:flex;justify-content:flex-end;gap:10px;margin-top:4px} .plug-inline .pi-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .plug-inline .pi-tx b{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .plug-inline .pi-tx span{font-size:11px;color:var(--txt-3);display:flex;align-items:center;gap:5px;flex-wrap:wrap} .plug-inline .pi-go{font-size:11.5px;color:var(--link);flex:none;font-weight:600} /* ---------- 响应式 ---------- */ @media (max-width:1240px){ .doc-wrap{grid-template-columns:176px minmax(0,1fr)} .doc-body .card-bd{padding:6px 18px 18px} } @media (max-width:1080px){ .entry-hero{flex-wrap:wrap} .eh-acts{flex-direction:row;width:100%} .eh-acts .btn{flex:1} .doc-wrap{grid-template-columns:minmax(0,1fr)} .doc-nav{position:static;display:flex;flex-wrap:wrap;align-items:center;padding:4px} .doc-nav .hd{width:100%;border-bottom:0;padding:6px 10px} .doc-nav a{border-left:0;border-radius:8px;padding:6px 11px} .doc-nav a.on{border-left:0} .perm-grid{grid-template-columns:1fr} } @media (max-width:760px){ .entry-hero{padding:14px;gap:12px} .eh-ico{width:64px;height:64px;border-radius:16px;font-size:30px} .eh-name{font-size:18px} .eh-desc{font-size:12.5px} .dl-box{padding:14px} .dl-btn{width:100%;padding:11px 14px;font-size:13.5px} .dl-info{font-size:11.5px;gap:7px} .dl-steps{padding:11px 12px 11px 26px;font-size:11.5px;line-height:1.7} .tier-bar{padding:9px 12px} .tier-bar .dist{width:100%;margin-left:0} .claim-hero{padding:14px;gap:11px} .claim-hero .ch-ico{width:52px;height:52px;border-radius:14px;font-size:25px} .claim-hero h1,.claim-hero h2{font-size:16.5px} .claim-pane{padding:13px 14px 15px} .doc-body .card-bd{padding:4px 14px 16px} .doc-body h2{font-size:15.5px} .verdict .rows{grid-template-columns:1fr;gap:2px 0} .verdict .rows dt{margin-top:6px} .form-grid{grid-template-columns:1fr} .claim-tab{padding:7px 10px;font-size:12.5px} .aw-stats{grid-template-columns:1fr 1fr 1fr} } @media (prefers-reduced-motion:reduce){ .pl-card,.plug-inline,.tier-chip,.dl-btn,.sw,.sw::after,.chk .bx,.up-drop,.gb-opt,.claim-tab,.rp-opt{transition:none!important} } /* P1 · 可访问性与响应式补充 */ [data-act]:focus-visible{outline:2px solid #fff;outline-offset:1px;box-shadow:0 0 0 4px rgba(8,58,104,.9);border-radius:8px} @media (min-width:1081px) and (max-width:1239px){ .col-side{max-height:calc(100vh - var(--nav-h) - 32px);overflow:auto} } /* 编辑资料面板 */ .pro-form{margin-top:11px;padding:10px 11px;background:var(--card-2);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:8px} .pro-form label{display:grid;gap:4px;font-size:12px;color:var(--txt-2)} .pro-form .up-input{width:100%;box-sizing:border-box} .pro-acts{display:flex;gap:7px;margin-top:2px} .pro-acts .btn{flex:1} /* ===== v2 · 无障碍与首屏骨架 ===== */ /* 屏幕阅读器专用 */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .sr-only:focus-visible{position:static!important;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal} /* 跳转到主内容 */ .skip-link{ position:fixed;left:12px;top:-64px;z-index:300; padding:9px 16px;border-radius:0 0 10px 10px; background:var(--brand-deep);color:#fff;font-size:13px;font-weight:700;text-decoration:none; box-shadow:0 10px 24px -10px rgba(6,44,80,.8); transition:top var(--dur-2) var(--ease-out); } .skip-link:focus{top:0;outline:2px solid #fff;outline-offset:-4px} /* 顶部装饰条（原 inline 迁入，夜间降饱和） */ .top-strip{ height:3px;position:relative;z-index:61; background:linear-gradient(90deg,#1775c8,#3f9de8,#7ec4f2,#2f9cf4,#0f63b4); transition:opacity var(--dur-3) ease,filter var(--dur-3) ease; } html[data-theme="night"] .top-strip{opacity:.55;filter:saturate(.65)} /* 主内容容器不吃 outline（跳转落点用 tabindex=-1） */ main#main{display:block} main#main:focus{outline:0} /* 首屏骨架：app.js 渲染时整块被 innerHTML 覆盖 */ .boot-skel{max-width:var(--wrap-w);margin:0 auto;padding:18px 18px 60px} .bs-nav{height:52px;border-radius:12px;background:var(--card);border:1px solid var(--line);margin-bottom:16px} .bs-wrap{display:grid;grid-template-columns:176px minmax(0,1fr) 300px;gap:18px;align-items:start} .bs-rail{height:280px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)} .bs-main{display:flex;flex-direction:column;gap:14px} .bs-cover{height:168px;border-radius:var(--r);background:linear-gradient(120deg,#dbeaf8,#eef5fb);border:1px solid var(--line)} .bs-card{height:186px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)} .bs-card.sm{height:118px} .bs-side{display:flex;flex-direction:column;gap:14px} html[data-theme="night"] .bs-cover{background:linear-gradient(120deg,#122a41,#0e1d2d)} @media (max-width:1080px){ .bs-wrap{grid-template-columns:minmax(0,1fr) 300px} .bs-rail{display:none} } @media (max-width:760px){ .boot-skel{padding:12px 12px 96px} .bs-wrap{grid-template-columns:minmax(0,1fr)} .bs-side{display:none} .bs-cover{height:148px} } /* 无脚本提示 */ .nojs{max-width:640px;margin:64px auto;padding:26px 28px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)} .nojs h1{font-size:19px;margin:0 0 12px;color:var(--txt)} .nojs p{margin:0 0 10px;font-size:13.5px;line-height:1.75;color:var(--txt-2)} .nojs p:last-child{margin-bottom:0} /* 24×24 热区：小控件用伪元素外扩，不改视觉尺寸 */ .post-more,.pl-install,.tag-plain.click,.floor-actions button,.up-file .uf-x,.pop-hd .mini,.cmt .clike{position:relative} .post-more::after,.pl-install::after,.tag-plain.click::after,.floor-actions button::after,.up-file .uf-x::after,.pop-hd .mini::after,.cmt .clike::after{ content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:100%;height:100%;min-width:24px;min-height:24px; } /* 相邻的小控件之间留缝，避免热区互相覆盖 */ .post-more::after{min-height:26px} .floor-actions{gap:12px} .pop-hd .mini{padding:4px 2px} /* 灯箱：对话框语义下的焦点与滚动约束 */ body.lb-open{overflow:hidden} .lightbox[data-lb] .x:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px rgba(0,0,0,.65)} /* 点赞 / 收藏等切换按钮的按下态 */ .act[aria-pressed="true"]{color:var(--rose-ink)} html[data-theme="night"] .act[aria-pressed="true"]{color:#ff9db1} /* 导航当前页指示 */ .nav-links a[aria-current="page"]{font-weight:800} .m-tabbar a[aria-current="page"]{color:var(--brand)} html[data-theme="night"] .m-tabbar a[aria-current="page"]{color:#6cc0ff} /* 卡片标题可能是 h1/h2，统一视觉 */ .card-hd .t{margin:0;font-size:14px;font-weight:700;color:var(--txt);line-height:1.4} .card-hd h1.t,.card-hd h2.t{font-size:14px} @media (max-width:760px){ .card-hd h1.t,.card-hd h2.t{font-size:13.5px} } /* ================= v7 · 编辑资料（整页，参考 B 站账号资料） ================= */ /* 旧的侧栏折叠表单已被整页取代，.pro-form 系列留在上方仅供其它表单复用 */ .pro-page .card-hd{padding-bottom:0;border-bottom:0} .pro-wrap{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:6px 18px 4px;align-items:start} /* 左：分区导航（吸顶，跟着页面滚） */ .pro-nav{position:sticky;top:calc(var(--nav-h) + 14px);display:flex;flex-direction:column;gap:2px} .pro-nav a{ display:block;padding:7px 11px;border-radius:9px; font-size:12.5px;font-weight:600;color:var(--txt-2);text-decoration:none; border-left:2px solid transparent; transition:background-color var(--dur-1) ease,color var(--dur-1) ease; } .pro-nav a:hover{background:var(--card-2);color:var(--link)} .pro-nav a.on{background:#e8f3ff;color:var(--brand-ink);border-left-color:var(--brand);font-weight:700} html[data-theme="night"] .pro-nav a.on{background:#12314c;color:#6cc0ff;border-left-color:#3f9de8} /* 右：分区主体 */ .pro-body{min-width:0} .pro-sec{padding:16px 0;border-top:1px solid var(--line-2);scroll-margin-top:calc(var(--nav-h) + 16px)} .pro-sec:first-child{border-top:0;padding-top:4px} .pro-sec > h2{ margin:0 0 14px;font-size:15.5px;font-weight:800;color:var(--txt); display:flex;align-items:center;gap:8px;letter-spacing:.2px; } .pro-sec > h2::before{content:"";width:3px;height:14px;border-radius:2px;background:linear-gradient(180deg,var(--brand-2),var(--brand))} .pro-tip{margin:-6px 0 13px;font-size:12.5px;line-height:1.7;color:var(--txt-3)} .pro-label{font-size:12.5px;font-weight:700;color:var(--txt-2);margin-bottom:7px} /* 头像 */ .ava-row{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap} .ava-big{position:relative;flex:0 0 auto;width:96px;height:96px;border-radius:50%;background:var(--card-2);box-shadow:0 0 0 3px var(--card),0 0 0 4px var(--line)} .ava-big img{width:96px;height:96px;border-radius:50%;display:block;object-fit:cover} .ava-edit{ position:absolute;left:50%;bottom:-9px;transform:translateX(-50%); border:1px solid var(--line);background:var(--card);color:var(--txt-2); font-size:11px;font-weight:700;font-family:inherit;border-radius:11px;padding:3px 11px;cursor:pointer; box-shadow:var(--shadow);white-space:nowrap; } .ava-edit:hover{color:var(--link);border-color:#b9d9f2} .ava-right{flex:1 1 240px;min-width:0} .ava-grid{display:flex;gap:8px;flex-wrap:wrap} .ava-opt{ width:46px;height:46px;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:pointer;background:none; box-shadow:0 0 0 2px var(--line);transition:box-shadow var(--dur-1) ease,transform var(--dur-1) var(--ease-out); } .ava-opt:hover{transform:translateY(-2px)} .ava-opt img{width:100%;height:100%;display:block;border-radius:12px} .ava-opt.on{box-shadow:0 0 0 2px var(--brand),0 0 0 5px rgba(23,117,200,.16)} /* 未选中也要有 24×24 热区（46×46 本来就够，这里只补键盘可见） */ .ava-opt:focus-visible{outline:2px solid #fff;outline-offset:1px;box-shadow:0 0 0 4px rgba(8,58,104,.9)} /* 系统默认头像那一格：用虚线外圈标记，而不是在 46px 的图里压一块「默认」角标 —— 角标正好盖住鲸鱼身体，小图上等于把唯一的辨识点糊掉了。 文字说明交给下面的 .pro-tip（「当前使用系统默认头像…」）和按钮的 aria-label。 */ .ava-opt.ava-def{outline:1.5px dashed rgba(23,117,200,.62);outline-offset:2px} /* 选中时已经有 .on 的品牌色双环，虚线让位，免得套两层圈 */ .ava-opt.ava-def.on{outline:none} html[data-theme="night"] .ava-opt.ava-def{outline-color:rgba(143,208,255,.62)} .ava-opt.ava-def:focus-visible{outline:2px solid #fff;outline-offset:1px} .ava-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px} .pro-hint{font-size:11.5px;color:var(--txt-3);line-height:1.6} /* 封面 */ .cover-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} .cover-opt{ position:relative;height:62px;padding:0;border:0;border-radius:10px;cursor:pointer;overflow:hidden; box-shadow:0 0 0 1px var(--line) inset; transition:box-shadow var(--dur-1) ease,transform var(--dur-1) var(--ease-out); display:flex;align-items:flex-end;justify-content:center;font-family:inherit; } .cover-opt:hover{transform:translateY(-2px)} .cover-opt span{ display:block;width:100%;padding:3px 4px;font-size:11px;font-weight:700;color:#fff; background:rgba(6,32,56,.82);letter-spacing:.2px;text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .cover-opt.on{box-shadow:0 0 0 2px var(--brand),0 0 0 5px rgba(23,117,200,.16)} .cover-opt.on::after{content:"✓";position:absolute;top:4px;right:6px;width:16px;height:16px;border-radius:50%;background:var(--brand);color:#fff;font-size:10px;line-height:16px;text-align:center;font-weight:800} /* 本地封面：整行一格。没图时是一条虚线按钮（"这里能点"）， 有图时把自己当预览铺满整行 —— 选的图就是头图，不用再看小字确认。 横跨 3 列（窄屏 2 列）用 grid-column 1/-1，改列数时不用同步改这里。 */ .cover-up{ grid-column:1/-1;position:relative;display:flex;align-items:center;justify-content:center;gap:7px; height:44px;margin-top:2px;padding:0 12px;border:0;border-radius:10px;cursor:pointer;overflow:hidden; font-family:inherit;font-size:12.5px;font-weight:700;color:var(--txt-2); background:var(--card-2);outline:1.5px dashed rgba(23,117,200,.42);outline-offset:-4px; transition:transform var(--dur-1) var(--ease-out),color var(--dur-1) ease,outline-color var(--dur-1) ease; } .cover-up:hover{transform:translateY(-1px);color:var(--brand-ink);outline-color:var(--brand)} .cover-up .cu-ic{font-style:normal;font-size:13px;font-weight:800;line-height:1} .cover-up .cu-tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 有图态：虚线撤掉，文字压成底部的药丸，保证任何一张照片上都读得清 */ .cover-up.has-img{height:52px;outline:0;color:#fff} .cover-up.has-img .cu-ic{display:none} .cover-up.has-img .cu-tx{padding:3px 10px;border-radius:999px;background:rgba(6,32,56,.66);text-shadow:0 1px 3px rgba(0,0,0,.5)} .cover-up.has-img.on{box-shadow:0 0 0 2px var(--brand),0 0 0 5px rgba(23,117,200,.16)} .cover-up.has-img.on::after{content:"✓";position:absolute;top:4px;right:6px;width:16px;height:16px;border-radius:50%;background:var(--brand);color:#fff;font-size:10px;line-height:16px;text-align:center;font-weight:800} .cover-up.busy{cursor:progress;color:var(--txt-3)} .cover-up:focus-visible{outline-color:var(--brand)} .cover-acts{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:8px} .cover-acts .pro-hint{flex:1 1 220px;min-width:0} /* ── 封面裁切器（v33）────────────────────────────────────────────── 上传后先让用户自己框「露哪一段」，框出来的区域就是存下来的那张图。 弹层挂在 body 上而不是 .wrap 里：编辑页是整页重绘的，挂在 .wrap 内 一次 render 就被 innerHTML 冲掉；挂在 body 上还能顺手锁页面滚动。 配色写死不跟主题变量：照片摆在深底上，昼夜两种主题都读得清， 也免得 .wrap.deep 的作用域问题（deep 的 token 只挂在 .wrap 子树上）。 */ .cropper{ position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:16px; background:rgba(6,14,24,.78);backdrop-filter:blur(6px);opacity:0;transition:opacity var(--dur-2) ease; } .cropper.open{opacity:1} .crop-card{ /* 内容比视口高时（横屏手机）整张卡可滚：否则 overflow:hidden 会把 「使用这张」直接裁掉，等于没有出口 */ width:min(720px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:auto; border-radius:16px;background:#101d2b;color:#eaf2fa; box-shadow:0 30px 90px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.08); transform:translateY(10px) scale(.99);opacity:.5; transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-2) ease; } .cropper.open .crop-card{transform:none;opacity:1} .crop-head{padding:15px 18px 0} .crop-head b{display:block;font-size:15px} .crop-head span{display:block;margin-top:5px;font-size:12px;line-height:1.65;color:#9db4c9} .crop-err{display:none;margin-top:7px;font-size:12px;color:#ffb0a8} .crop-err.on{display:block} .crop-stage{ position:relative;flex:0 0 auto;margin:12px 18px 0;padding:10px;border-radius:12px;background:#0a1420; overflow:hidden;touch-action:none; } .crop-img{display:block;margin:0 auto;max-width:100%;max-height:52vh;user-select:none;-webkit-user-drag:none} /* 框外压黑用的是大范围 box-shadow，比四个遮罩 div 少一半节点， 而且拖动时只有一个元素要重排 —— 手指跟不上是裁切器最常见的槽点。 */ .crop-frame{ position:absolute;left:0;top:0;width:0;height:0;cursor:grab;touch-action:none; outline:2px solid #fff;box-shadow:0 0 0 9999px rgba(4,10,18,.68); } .crop-frame.dragging{cursor:grabbing} .crop-frame:focus-visible{outline-color:#7cc4ff;outline-offset:2px} .crop-frame .h{position:absolute;width:12px;height:12px;border:2px solid #fff;background:rgba(10,20,32,.55);border-radius:2px} .crop-frame .h.tl{left:-7px;top:-7px;border-right:0;border-bottom:0} .crop-frame .h.tr{right:-7px;top:-7px;border-left:0;border-bottom:0} .crop-frame .h.bl{left:-7px;bottom:-7px;border-right:0;border-top:0} .crop-frame .h.br{right:-7px;bottom:-7px;border-left:0;border-top:0} .crop-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:14px 18px 16px} .crop-zoom{display:flex;align-items:center;gap:9px;flex:1 1 240px;min-width:0;font-size:12px;color:#9db4c9} .crop-zoom input[type="range"]{flex:1;min-width:90px;accent-color:#2f9bea;cursor:pointer} .crop-zoom em{font-style:normal;font-variant-numeric:tabular-nums;color:#eaf2fa;min-width:40px;text-align:right} .crop-foot .btn.ghost{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);color:#eaf2fa} .crop-foot .btn.ghost:hover{background:rgba(255,255,255,.18);color:#fff} body.crop-open{overflow:hidden} @media (max-width:560px){ .crop-stage{margin:10px 12px 0;padding:8px} .crop-foot{padding:12px} .crop-img{max-height:44vh} .crop-head{padding:13px 13px 0} /* 窄屏下让滑杆独占一行：不然「取消」会挤到滑杆行尾巴上， 和下一行的「使用这张」拆成两行，看着像两个互不相干的操作 */ .crop-foot .crop-zoom{flex:1 1 100%} } /* 横屏手机（高 ≤560px）：说明文字收起来，图也压矮，否则整张卡比视口高， 取景框的上下边会被 .crop-stage 的 overflow 切掉，等于框不全 */ @media (max-height:560px){ .crop-head .crop-desc{display:none} .crop-stage{margin:8px 12px 0;padding:6px} .crop-img{max-height:34vh} .crop-head{padding:11px 13px 0} .crop-foot{padding:9px 12px 11px} } /* 表单 */ .pro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 18px} .pro-field{display:block;position:relative;min-width:0;margin:0;font-size:12.5px;color:var(--txt-2)} .pro-field > span{display:block;margin-bottom:6px;font-weight:700;color:var(--txt-2)} .pro-field > span i{color:var(--rose-ink);font-style:normal;margin-left:2px} .pro-field.wide{grid-column:1/-1} .pro-field input[type="text"],.pro-field input[type="month"],.pro-field select,.pro-field textarea{ width:100%;box-sizing:border-box;font-family:inherit;font-size:13px;color:var(--txt); background:var(--card-2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;line-height:1.5; transition:border-color var(--dur-1) ease,box-shadow var(--dur-1) ease; } .pro-field textarea{resize:vertical;min-height:72px} .pro-field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:28px; background-image:linear-gradient(45deg,transparent 50%,var(--txt-3) 50%),linear-gradient(135deg,var(--txt-3) 50%,transparent 50%); background-position:calc(100% - 15px) 51%,calc(100% - 10px) 51%; background-size:5px 5px,5px 5px;background-repeat:no-repeat} .pro-field input:focus,.pro-field select:focus,.pro-field textarea:focus{ outline:0;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(23,117,200,.2);background:var(--card); } .pro-field input[disabled]{background:var(--card-2);color:var(--txt-3);cursor:not-allowed;box-shadow:none;border-style:dashed} .pro-count{display:block;margin-top:4px;font-size:11px;font-style:normal;color:var(--txt-3);text-align:right} .pro-field .chips{margin-top:1px} /* 底部操作条 */ .pro-foot{ position:sticky;bottom:0;z-index:6; display:flex;align-items:center;gap:9px;flex-wrap:wrap; padding:12px 18px;border-top:1px solid var(--line); background:var(--card);border-radius:0 0 var(--r) var(--r); box-shadow:0 -8px 18px -14px rgba(16,60,105,.5); } .pro-foot .pro-hint{margin-right:auto} /* 预览卡 */ .prev-card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)} .prev-cover{height:78px;background:linear-gradient(135deg,#7cc9ff,#b3e4ff 55%,#ffe6f3)} .prev-body{display:flex;gap:13px;padding:0 15px 15px;margin-top:-26px} .prev-body img{width:64px;height:64px;border-radius:50%;display:block;border:3px solid var(--card);background:var(--card)} .prev-tx{min-width:0;padding-top:28px;flex:1} .prev-tx b{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:800;color:var(--txt)} .prev-tx p{margin:3px 0 6px;font-size:12.5px;line-height:1.6;color:var(--txt-2);overflow-wrap:anywhere} .prev-meta{font-size:11.5px;color:var(--txt-3)} .prev-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px} /* 资料完整度 */ .meter-row{display:flex;align-items:center;gap:9px;margin-bottom:10px} .meter-row b{flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--brand-ink);font-variant-numeric:tabular-nums} html[data-theme="night"] .meter-row b{color:#6cc0ff} .meter{position:relative;flex:1;height:8px;border-radius:5px;background:var(--card-2);border:1px solid var(--line);overflow:hidden} .meter i{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:4px;background:linear-gradient(90deg,var(--brand-2),var(--brand));transition:width var(--dur-4) var(--ease-out)} .meter-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;font-size:11.5px;color:var(--txt-3)} .meter-list li.ok{color:var(--ok-ink)} @media (max-width:1000px){ .pro-grid{grid-template-columns:minmax(0,1fr)} .pro-field.wide{grid-column:auto} } @media (max-width:760px){ .pro-page .card-hd{padding:12px 13px 0} .pro-wrap{grid-template-columns:minmax(0,1fr);gap:2px;padding:2px 13px 0} .pro-nav{position:static;flex-direction:row;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:6px;scrollbar-width:none} .pro-nav::-webkit-scrollbar{display:none} .pro-nav a{white-space:nowrap;border-left:0;border-radius:14px;background:var(--card-2);border:1px solid var(--line);padding:5px 11px;font-size:12px} .pro-nav a.on{border-color:transparent} .pro-sec{padding:14px 0} .pro-sec > h2{font-size:14.5px;margin-bottom:12px} .ava-row{gap:14px} .ava-right{flex:1 1 100%} .cover-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .pro-foot{position:static;padding:12px 13px;box-shadow:none} .pro-foot .pro-hint{flex:1 1 100%;margin:0 0 4px} .pro-foot .btn{flex:1} .prev-body{margin-top:-22px} .prev-body img{width:56px;height:56px} .prev-tx{padding-top:24px} } /* ================= v8 · 深海主题（个人空间 / 编辑资料） ================= 只挂在 .wrap.deep 上：改写的是这棵子树里的 CSS 变量。 :root 的 --brand / --brand-2 / --brand-ink 一个都不动（动效与对比度断言锁着它们）， 所以深海只影响这两个页面，全站其它地方配色不变。 */ .wrap.deep{ position:relative; isolation:isolate; border-radius:20px; padding:20px 20px 56px; border:1px solid var(--sea-border); background:var(--sea-bg); /* 投影不外溢：负 spread 收在盒子内部 —— 一旦漏到面板下方，会把这层浅色页脚压暗约 30 级， 页脚 --txt-2 对它的对比度就从 7.1:1 掉到 4.46:1，正好卡在 AA 线下。 */ box-shadow:0 10px 24px -34px var(--sea-shadow-outset), var(--sea-inset); /* color 必须在这里声明：CSS 变量在声明处解析，子元素继承的是 body 用 :root --txt 算出的深色… */ color:var(--txt); --txt:var(--sea-txt); --txt-2:var(--sea-txt-2); --txt-3:var(--sea-txt-3); --card:var(--sea-card); --card-2:var(--sea-fill-a); --line:var(--sea-line); --line-2:var(--sea-line-2); --brand-ink:var(--sea-ink); --brand-deep:var(--sea-grad-b); --link:var(--sea-link); --ok-ink:var(--sea-ok-ink); --warn-ink:var(--sea-warn-ink); --rose-ink:var(--sea-rose-ink); --shadow:0 12px 30px -22px var(--sea-shadow-card); /* ---- 浅海（白天）token：夜间值见下方 html[data-theme="night"] .wrap.deep ---- */ /* A 文字 */ --sea-txt:#132435; --sea-txt-2:#4b5f74; --sea-txt-3:#4f6376; --sea-txt-4:#526576; --sea-ink:#0f63b4; --sea-link:#0a5fae; --sea-ok-ink:#08634a; --sea-warn-ink:#8a5a00; --sea-rose-ink:#c22252; --sea-mod-ink:#0a5f92; --sea-badge-bg:rgba(23,117,200,.10); --sea-badge-line:rgba(19,80,140,.42); --sea-badge-mod-bg:rgba(23,117,200,.10); --sea-badge-mod-line:rgba(19,80,140,.42); --sea-badge-beta-bg:rgba(23,117,200,.10); --sea-badge-beta-line:rgba(19,80,140,.42); --sea-alt-ink:#6a44c4; --sea-ink-on-sel:#132435; --sea-ink-badge:#4b5f74; --sea-ink-sub:#4f6376; --sea-ink-ghost:#4b5f74; --sea-ink-ok-2:#08634a; --sea-ink-install:#4b5f74; --sea-ink-off:#4f6376; --sea-pf-hd:#4b5f74; --sea-pf-chip:#4b5f74; --sea-pf-date:#526576; --sea-ink-hi:#132435; /* B 面 */ --sea-card:rgba(255,255,255,.78); --sea-fill:rgba(12,52,92,.07); --sea-fill-2:rgba(12,52,92,.11); --sea-fill-3:rgba(12,52,92,.04); --sea-fill-soft:rgba(12,52,92,.07); --sea-fill-faint:rgba(12,52,92,.04); --sea-fill-off:rgba(12,52,92,.04); --sea-fill-high:rgba(12,52,92,.11); --sea-fill-hover:rgba(12,52,92,.11); --sea-fill-pf:rgba(12,52,92,.07); --sea-fill-a:rgba(12,52,92,.07); --sea-sel:rgba(23,117,200,.10); --sea-sel-2:rgba(23,117,200,.16); --sea-sel-install:rgba(23,117,200,.10); --sea-sel-soft:rgba(23,117,200,.10); --sea-sel-soft-2:rgba(23,117,200,.10); --sea-ok-fill:rgba(10,122,88,.10); --sea-ok-fill-2:rgba(10,122,88,.10); /* C 线 */ --sea-line:rgba(19,80,140,.16); --sea-line-2:rgba(19,80,140,.10); --sea-line-emph:rgba(19,80,140,.42); --sea-line-ctl:rgba(19,80,140,.42); --sea-line-ava:rgba(19,80,140,.42); --sea-line-foot:rgba(19,80,140,.16); --sea-line-card:rgba(19,80,140,.16); --sea-line-faint:rgba(19,80,140,.16); --sea-line-pf:rgba(19,80,140,.16); --sea-line-pf-2:rgba(19,80,140,.10); --sea-line-ctrl:rgba(19,80,140,.42); --sea-line-strong:rgba(19,80,140,.42); --sea-line-hover:rgba(19,80,140,.42); --sea-line-input:rgba(19,80,140,.32); --sea-line-white:rgba(19,80,140,.20); --sea-border:rgba(19,80,140,.14); /* D 实底 / 渐变 */ --sea-grad-a:#1a6dbf; --sea-grad-b:#155a94; --sea-solid:#1a6dbf; --sea-solid-2:#155a94; --sea-solid-btn:#155a94; --sea-solid-btn-hover:#155a94; --sea-solid-hover:#1f78c8; --sea-focus:#1775c8; /* E 影 / 光 / 遮罩 */ --sea-shadow-color:rgba(16,60,105,.24); --sea-shadow-outset:rgba(16,60,105,.26); --sea-shadow-card:rgba(16,60,105,.24); --sea-shadow-btn:rgba(16,60,105,.28); --sea-ring:rgba(23,117,200,.22); --sea-ring-2:rgba(23,117,200,.22); --sea-ava-ring:rgba(255,255,255,.95); --sea-avaedit-bg:rgba(255,255,255,.88); --sea-img-matte:rgba(255,255,255,.92); --sea-foot-bg:rgba(255,255,255,.86); --sea-disabled-bg:rgba(12,52,92,.06); --sea-scrim:rgba(4,20,38,.78); --sea-scrim-soft:rgba(4,20,38,.58); /* F 容器背景与海洋装饰层（整值，不拆端点） */ --sea-bg:radial-gradient(1100px 400px at 50% -170px, rgba(154,216,255,.80), transparent 66%),radial-gradient(760px 340px at 94% 6%, rgba(96,178,246,.42), transparent 70%),radial-gradient(640px 400px at 4% 92%, rgba(64,150,214,.28), transparent 72%),linear-gradient(178deg,#eaf7ff 0%,#dcf1ff 34%,#d2eafb 68%,#c9e3f6 100%); --sea-inset:inset 0 1px 0 rgba(255,255,255,.85); --sea-glow-bg:radial-gradient(58% 100% at 50% 0%, rgba(56,140,220,.22), rgba(56,140,220,0) 72%); --sea-ray-bg:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 76%); --sea-flow1-bg:linear-gradient(96deg, rgba(56,140,220,0) 6%, rgba(56,140,220,.16) 42%, rgba(56,140,220,0) 88%); --sea-flow2-bg:linear-gradient(84deg, rgba(56,140,220,0) 10%, rgba(56,140,220,.11) 52%, rgba(56,140,220,0) 92%); --sea-bub-bg:radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(206,238,255,.75) 46%, rgba(155,212,255,.30) 74%); --sea-bub-sh:inset 0 0 7px rgba(255,255,255,.9), 0 0 12px rgba(132,198,246,.42); --sea-fish:rgba(23,117,200,.16); --sea-fish-2:rgba(23,117,200,.11); --sea-fish-3:rgba(23,117,200,.08); } html[data-theme="night"] .wrap.deep{ /* ---- 夜间：深海外观，取值与改造前逐字一致 ---- */ --sea-txt:#e9f3fc; --sea-txt-2:#b6ccdf; --sea-txt-3:#93aec6; --sea-txt-4:#8ba6bd; --sea-ink:#a8dcff; --sea-link:#7ecbff; --sea-ok-ink:#5fe0a1; --sea-warn-ink:#f0c070; --sea-rose-ink:#ff9dbb; --sea-mod-ink:#c6e9ff; --sea-badge-bg:rgba(90,170,255,.16); --sea-badge-line:rgba(126,190,246,.34); --sea-badge-mod-bg:rgba(70,200,255,.18); --sea-badge-mod-line:rgba(120,200,255,.36); --sea-badge-beta-bg:rgba(180,150,255,.18); --sea-badge-beta-line:rgba(180,150,255,.36); --sea-alt-ink:#ddd0ff; --sea-ink-on-sel:#dcefff; --sea-ink-badge:#bfe0ff; --sea-ink-sub:#a9c4da; --sea-ink-ghost:#cbe2f5; --sea-ink-ok-2:#8fe8bd; --sea-ink-install:#cbe8ff; --sea-ink-off:#a8c6dd; --sea-pf-hd:#cbe3f6; --sea-pf-chip:#bed6e9; --sea-pf-date:#9cb6cd; --sea-ink-hi:#fff; /* B 面 */ --sea-card:rgba(11,32,53,.66); --sea-fill:rgba(255,255,255,.07); --sea-fill-2:rgba(255,255,255,.10); --sea-fill-3:rgba(255,255,255,.04); --sea-fill-soft:rgba(255,255,255,.06); --sea-fill-faint:rgba(255,255,255,.05); --sea-fill-off:rgba(255,255,255,.03); --sea-fill-high:rgba(255,255,255,.08); --sea-fill-hover:rgba(255,255,255,.12); --sea-fill-pf:rgba(255,255,255,.062); --sea-fill-a:rgba(255,255,255,.055); --sea-sel:rgba(92,172,255,.20); --sea-sel-2:rgba(92,172,255,.30); --sea-sel-install:rgba(92,172,255,.18); --sea-sel-soft:rgba(126,190,246,.13); --sea-sel-soft-2:rgba(126,190,246,.14); --sea-ok-fill:rgba(40,190,140,.20); --sea-ok-fill-2:rgba(95,224,161,.17); /* C 线 */ --sea-line:rgba(126,190,246,.20); --sea-line-2:rgba(126,190,246,.12); --sea-line-emph:rgba(126,190,246,.40); --sea-line-ctl:rgba(126,190,246,.26); --sea-line-ava:rgba(126,190,246,.30); --sea-line-foot:rgba(126,190,246,.22); --sea-line-card:rgba(126,190,246,.22); --sea-line-faint:rgba(126,190,246,.18); --sea-line-pf:rgba(126,190,246,.17); --sea-line-pf-2:rgba(126,190,246,.19); --sea-line-ctrl:rgba(126,190,246,.34); --sea-line-strong:rgba(126,190,246,.55); --sea-line-hover:rgba(126,190,246,.46); --sea-line-input:rgba(126,190,246,.24); --sea-line-white:rgba(255,255,255,.16); --sea-border:rgba(122,190,255,.16); /* D 实底 / 渐变 */ --sea-grad-a:#8fd4ff; --sea-grad-b:#2f86d8; --sea-solid:#2470bb; --sea-solid-2:#1a5c96; --sea-solid-btn:#17599a; --sea-solid-btn-hover:#1b63a6; --sea-solid-hover:#2a80cc; --sea-focus:#6cc0ff; /* E 影 / 光 / 遮罩 */ --sea-shadow-color:rgba(0,0,0,.95); --sea-shadow-outset:rgba(2,12,24,.8); --sea-shadow-card:rgba(0,0,0,.9); --sea-shadow-btn:rgba(4,20,38,.9); --sea-ring:rgba(90,180,255,.26); --sea-ring-2:rgba(108,192,255,.26); --sea-ava-ring:rgba(8,25,42,.9); --sea-avaedit-bg:rgba(12,34,56,.9); --sea-img-matte:rgba(10,28,46,.95); --sea-foot-bg:rgba(7,22,38,.92); --sea-disabled-bg:rgba(12,38,62,.72); --sea-scrim:rgba(4,20,38,.78); --sea-scrim-soft:rgba(4,20,38,.58); /* F 容器背景与海洋装饰层 */ --sea-bg:radial-gradient(1100px 400px at 50% -170px, rgba(96,190,255,.34), transparent 66%),radial-gradient(760px 340px at 94% 6%, rgba(52,138,225,.22), transparent 70%),radial-gradient(640px 400px at 4% 92%, rgba(20,92,158,.30), transparent 72%),linear-gradient(178deg,#061726 0%,#0a2438 34%,#081e31 68%,#05141f 100%); --sea-inset:inset 0 1px 0 rgba(255,255,255,.07); --sea-glow-bg:radial-gradient(58% 100% at 50% 0%, rgba(126,208,255,.30), rgba(126,208,255,0) 72%); --sea-ray-bg:linear-gradient(180deg, rgba(158,224,255,.22), rgba(158,224,255,0) 76%); --sea-flow1-bg:linear-gradient(96deg, rgba(46,140,214,0) 6%, rgba(96,196,255,.30) 42%, rgba(46,140,214,0) 88%); --sea-flow2-bg:linear-gradient(84deg, rgba(30,110,180,0) 10%, rgba(64,168,232,.26) 52%, rgba(30,110,180,0) 92%); --sea-bub-bg:radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), rgba(166,226,255,.32) 46%, rgba(120,190,255,.05) 74%); --sea-bub-sh:inset 0 0 7px rgba(255,255,255,.5), 0 0 12px rgba(120,200,255,.26); --sea-fish:rgba(150,212,255,.16); --sea-fish-2:rgba(120,196,255,.12); --sea-fish-3:rgba(190,232,255,.10); } /* 海洋装饰层：绝对定位在内容之下、容器背景之上 */ .sea-life{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit} .sea-life .sl-glow{ position:absolute;left:-12%;right:-12%;top:-14%;height:66%; background:var(--sea-glow-bg); } .sea-life .sl-ray{ position:absolute;top:-16%;width:110px;height:82%;transform-origin:top center;filter:blur(10px); background:var(--sea-ray-bg); } .sea-life .sl-ray.r1{left:12%;transform:rotate(8deg);animation:raySway 17s ease-in-out infinite} .sea-life .sl-ray.r2{left:46%;width:150px;height:92%;transform:rotate(-4deg);opacity:.8;animation:raySway 21s ease-in-out infinite reverse} .sea-life .sl-ray.r3{right:8%;width:86px;transform:rotate(13deg);opacity:.7;animation:raySway 14s ease-in-out infinite} @keyframes raySway{ 0%,100%{transform:rotate(6deg) translateX(-6px);opacity:.55} 50%{transform:rotate(-3deg) translateX(10px);opacity:.9} } /* 暗流：两条斜向的柔光带缓慢平移 */ .sea-life .sl-flow{position:absolute;left:-30%;right:-30%;height:190px;filter:blur(26px);opacity:.5} .sea-life .sl-flow.f1{ top:34%; background:var(--sea-flow1-bg); animation:flowDrift 26s ease-in-out infinite; } .sea-life .sl-flow.f2{ top:68%;height:230px;opacity:.4; background:var(--sea-flow2-bg); animation:flowDrift 34s ease-in-out infinite reverse; } @keyframes flowDrift{ 0%,100%{transform:translate3d(-4%,0,0) rotate(-2deg)} 50%{transform:translate3d(6%,-14px,0) rotate(1.5deg)} } /* 气泡：从底部缓慢上浮 */ .sea-life .bub{ position:absolute;bottom:-48px;border-radius:50%; background:var(--sea-bub-bg); box-shadow:var(--sea-bub-sh); animation:bubRise linear infinite; opacity:0; } @keyframes bubRise{ 0%{transform:translate3d(0,0,0) scale(.7);opacity:0} 10%{opacity:.9} 72%{opacity:.6} 100%{transform:translate3d(18px,-620px,0) scale(1.18);opacity:0} } /* 海洋生物剪影 */ .sea-life .swim{position:absolute;color:var(--sea-fish);animation:swimAcross linear infinite} .sea-life .swim.s2{color:var(--sea-fish-2);animation-duration:78s;animation-delay:-22s} .sea-life .swim.s3{color:var(--sea-fish-3);animation-duration:96s;animation-delay:-54s} @keyframes swimAcross{ 0%{transform:translate3d(-18%,0,0) scaleX(1)} 48%{transform:translate3d(72%,-10px,0) scaleX(1)} 50%{transform:translate3d(76%,-10px,0) scaleX(-1)} 100%{transform:translate3d(-18%,0,0) scaleX(-1)} } /* 深海里的卡片：磨砂玻璃 */ .wrap.deep .card, .wrap.deep .side-card, .wrap.deep .rail-card{ background:var(--card); border-color:var(--sea-line); backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15); } .wrap.deep .side-card, .wrap.deep .rail-card{box-shadow:0 14px 34px -26px var(--sea-shadow-color)} /* rail 选中态：浅蓝底 + 浅蓝字在原配色里够用，深底上必须换 */ .wrap.deep .rail-item.on{background:var(--sea-sel);color:var(--sea-ink-on-sel)} .wrap.deep .rail-item:hover{background:var(--sea-fill)} .wrap.deep .rail-hd{color:var(--sea-txt-3)} .wrap.deep .rail-n{color:var(--sea-txt-3)} /* 标签页 / 选中态 */ .wrap.deep .tabs{border-bottom-color:var(--line-2)} .wrap.deep .tabs .tab.on{color:var(--sea-grad-a)} .wrap.deep .tab-badge,.wrap.deep .tag-badge{ background:var(--sea-badge-bg);color:var(--sea-ink-badge);border-color:var(--sea-badge-line); } .wrap.deep .tag-badge.mod{background:var(--sea-badge-mod-bg);color:var(--sea-mod-ink);border-color:var(--sea-badge-mod-line)} .wrap.deep .tag-badge.beta{background:var(--sea-badge-beta-bg);color:var(--sea-alt-ink);border-color:var(--sea-badge-beta-line)} /* 空间封面上的徽章压在半透明深色遮罩上（两主题都是深底），所以两主题都用浅字 */ .wrap.deep .prof-cover .tag-badge{background:rgba(255,255,255,.20);color:#f2f9ff;border-color:rgba(255,255,255,.40)} .wrap.deep .prof-cover .tag-badge.mod{background:rgba(95,224,161,.28);color:#eafff4;border-color:rgba(140,240,190,.52)} .wrap.deep .tag-plain{background:var(--sea-fill-soft);border-color:var(--sea-line);color:var(--sea-ink-sub)} .wrap.deep .tag-plain.click:hover,.wrap.deep .tag-plain.on{background:var(--sea-sel);border-color:var(--sea-line-emph);color:var(--sea-ink-on-sel)} .wrap.deep .chip{background:var(--sea-fill-soft);border-color:var(--sea-line);color:var(--sea-txt-2)} .wrap.deep .chip:hover{border-color:var(--sea-line-hover);color:var(--sea-txt)} .wrap.deep .chip.on{background:linear-gradient(180deg,var(--sea-solid),var(--sea-solid-2));color:#fff;border-color:transparent} /* 按钮：ghost 在深底上要能看清 */ .wrap.deep .btn.ghost{background:var(--sea-fill);color:var(--sea-ink-ghost);border-color:var(--sea-line-ctl)} .wrap.deep .btn.ghost:hover{background:var(--sea-fill-hover);border-color:var(--sea-line-hover);color:var(--sea-ink-hi)} .wrap.deep .btn.blue{background:linear-gradient(180deg,var(--sea-solid),var(--sea-solid-btn));box-shadow:0 8px 18px -12px var(--sea-shadow-btn)} .wrap.deep .btn.blue:hover{background:linear-gradient(180deg,var(--sea-solid-hover),var(--sea-solid-btn-hover))} /* 插件卡：档位与安装键在深底上的配色 */ .wrap.deep .pl-install{background:var(--sea-sel-install);color:var(--sea-ink-install)} .wrap.deep .pl-install:hover{background:var(--sea-sel-2);color:var(--sea-ink-hi)} .wrap.deep .pl-install.done{background:var(--sea-ok-fill);color:var(--sea-ink-ok-2)} .wrap.deep .pl-ver{background:var(--sea-fill-high);color:var(--sea-txt-2)} .wrap.deep .pl-stats span{color:var(--sea-txt-3)} .wrap.deep .hot-flag{background:linear-gradient(90deg,#ff8a3d,#ff5f5f)} /* 留言 / 回复框 */ .wrap.deep .replybox{background:var(--sea-fill-3);border-top-color:var(--line-2)} .wrap.deep .replybox textarea, .wrap.deep .cin, .wrap.deep .pro-field input[type="text"], .wrap.deep .pro-field input[type="month"], .wrap.deep .pro-field select, .wrap.deep .pro-field textarea, .wrap.deep .doc-wrap textarea{ background:var(--sea-fill); border-color:var(--sea-line-input); color:var(--sea-txt); } .wrap.deep .replybox textarea::placeholder, .wrap.deep .pro-field input::placeholder, .wrap.deep .pro-field textarea::placeholder, .wrap.deep .cin::placeholder{color:var(--sea-txt-4)} .wrap.deep .replybox textarea:focus, .wrap.deep .pro-field input:focus, .wrap.deep .pro-field select:focus, .wrap.deep .pro-field textarea:focus{ outline:0;border-color:var(--sea-focus);box-shadow:0 0 0 3px var(--sea-ring);background:var(--sea-fill-2); } .wrap.deep .pro-field input[disabled]{ background:var(--sea-fill-off);color:var(--sea-txt-4);border-style:dashed;border-color:var(--sea-line-faint); } .wrap.deep .pro-count,.wrap.deep .pro-hint,.wrap.deep .pro-tip{color:var(--sea-txt-3)} .wrap.deep .pro-field > span{color:var(--sea-txt-2)} .wrap.deep .pro-field > span i{color:var(--sea-rose-ink)} /* 编辑资料：分区导航 */ .wrap.deep .pro-nav a{color:var(--sea-ink-sub);border-left-color:transparent} .wrap.deep .pro-nav a:hover{background:var(--sea-fill);color:var(--sea-txt)} .wrap.deep .pro-nav a.on{background:var(--sea-sel);color:var(--sea-ink-on-sel);border-left-color:var(--sea-focus)} .wrap.deep .pro-sec{border-top-color:var(--line-2)} .wrap.deep .pro-sec > h2{color:var(--sea-txt)} .wrap.deep .pro-sec > h2::before{background:linear-gradient(180deg,var(--sea-grad-a),var(--sea-grad-b))} /* 头像 / 封面选择 */ .wrap.deep .ava-big{background:var(--sea-fill-soft);box-shadow:0 0 0 3px var(--sea-ava-ring),0 0 0 4px var(--sea-line-ctrl)} .wrap.deep .ava-edit{background:var(--sea-avaedit-bg);border-color:var(--sea-line-ava);color:var(--sea-ink-ghost)} .wrap.deep .ava-edit:hover{color:var(--sea-ink-hi);border-color:var(--sea-focus)} .wrap.deep .ava-opt{box-shadow:0 0 0 2px var(--sea-line-ctl)} .wrap.deep .ava-opt.on{box-shadow:0 0 0 2px var(--sea-focus),0 0 0 5px var(--sea-ring-2)} .wrap.deep .cover-opt{box-shadow:0 0 0 1px var(--sea-line-ctl) inset} .wrap.deep .cover-opt.on{box-shadow:0 0 0 2px var(--sea-focus),0 0 0 5px var(--sea-ring-2)} .wrap.deep .cover-opt.on::after{background:var(--sea-grad-b)} .wrap.deep .cover-up{background:var(--sea-fill);outline-color:rgba(143,208,255,.4)} .wrap.deep .cover-up:hover{color:var(--sea-txt);outline-color:var(--sea-focus)} .wrap.deep .cover-up.has-img.on{box-shadow:0 0 0 2px var(--sea-focus),0 0 0 5px var(--sea-ring-2)} .wrap.deep .cover-up.has-img.on::after{background:var(--sea-grad-b)} .wrap.deep .pro-foot{ background:var(--sea-foot-bg);border-top-color:var(--sea-line-foot); box-shadow:0 -10px 22px -16px var(--sea-shadow-color); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); } .wrap.deep .prev-card{background:var(--sea-fill-faint);border-color:var(--sea-line-card)} .wrap.deep .prev-body img{border-color:var(--sea-img-matte);background:var(--sea-img-matte)} .wrap.deep .prev-tx b{color:var(--sea-txt)} .wrap.deep .prev-tx p{color:var(--sea-txt-2)} .wrap.deep .prev-meta{color:var(--sea-txt-3)} .wrap.deep .meter{background:var(--sea-fill);border-color:var(--sea-line)} .wrap.deep .meter i{background:linear-gradient(90deg,var(--sea-focus),var(--sea-grad-b))} .wrap.deep .meter-row b{color:var(--sea-ink)} .wrap.deep .meter-list{color:var(--sea-txt-3)} .wrap.deep .meter-list li.ok{color:var(--sea-ok-ink)} /* 空间页头图：深海下默认封面换成深海渐变，自选封面仍优先 */ .wrap.deep .prof-cover{border-color:var(--sea-line-card);box-shadow:0 20px 44px -30px var(--sea-shadow-color)} .wrap.deep .prof-cover .layer{ background: radial-gradient(460px 190px at 20% 12%, rgba(180,232,255,.42), transparent 68%), radial-gradient(520px 220px at 82% 88%, rgba(52,140,214,.50), transparent 70%), linear-gradient(126deg,#083252 0%,#0d4a72 34%,#116089 62%,#0a3350 100%); } .wrap.deep .prof-cover .grid-lines{opacity:.32} .wrap.deep .prof-cover::after{ background:linear-gradient(0deg,rgba(3,16,30,.86) 0%,rgba(3,16,30,.52) 46%,rgba(3,16,30,0) 100%); height:74%; } .wrap.deep .prof-cover .prof-id h2{color:#fff;text-shadow:0 2px 14px rgba(1,10,20,.9)} .wrap.deep .prof-cover .prof-id p{color:#d6e9f8} .wrap.deep .prof-cover .stat-row .s b{color:#fff} .wrap.deep .prof-cover .stat-row .s span{color:#c3dcee} .wrap.deep .empty{color:var(--sea-txt-3)} /* ---------- Contributors（仿 GitHub 撰稿人） ---------- */ .contrib-sum{display:flex;align-items:baseline;gap:6px;margin-bottom:10px} .contrib-sum b{font-size:15px;font-weight:800;color:var(--sea-txt);font-variant-numeric:tabular-nums} .contrib-sum span{font-size:11.5px;color:var(--sea-txt-3)} .cn-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px} .cn-cell{ position:relative;display:block;padding:0;border:1px solid var(--sea-line);border-radius:9px; overflow:hidden;background:var(--sea-fill-faint);cursor:pointer;line-height:0; transition:transform var(--dur-1) var(--ease-out),border-color var(--dur-1) ease; } .cn-cell:hover{transform:translateY(-2px);border-color:var(--sea-line-strong)} .cn-cell .cn-av{display:block;width:100% !important;height:auto !important;aspect-ratio:1/1;object-fit:cover;border-radius:0} .cn-cell .cn-n{ position:absolute;left:0;right:0;bottom:0;padding:1px 0 2px;text-align:center; font-size:9.5px;font-weight:800;color:#eaf5ff;background:var(--sea-scrim); font-variant-numeric:tabular-nums;line-height:1.4; } .cn-more{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:11.5px;font-weight:800;color:#e4f2ff;background:var(--sea-scrim); backdrop-filter:blur(2px);line-height:1; } .cn-cell:hover .cn-more{background:var(--sea-scrim-soft);color:#fff} .cn-bars{display:flex;align-items:flex-end;gap:2px;height:36px;margin-top:11px} .cn-bars i{ flex:1;min-height:3px;border-radius:2px 2px 0 0; background:linear-gradient(180deg,var(--sea-grad-a),var(--sea-grad-b));opacity:.85; transition:height var(--dur-3) var(--ease-out),opacity var(--dur-1) ease; } .cn-bars i:hover{opacity:1} .cn-legend{display:flex;align-items:center;justify-content:space-between;margin-top:7px;font-size:10.5px;color:var(--sea-txt-3)} .cn-legend .lv{display:inline-flex;align-items:center;gap:5px} .cn-legend .lv i{width:9px;height:9px;border-radius:2px;background:linear-gradient(180deg,var(--sea-grad-a),var(--sea-grad-b))} .cn-foot{margin-top:10px;font-size:11px;color:var(--sea-txt-3);line-height:1.6} .cn-foot a{color:var(--sea-link);font-weight:700} /* ---------- 发布插件（仿 GitHub 新建仓库） ---------- */ /* 左栏已整根撤掉（表单页不挂侧栏），卡片吃满 .wrap.solo 那一列； 但包名、简介、分类这些字段都很短，铺到 1284px 会变成一条望不到头的横线， 所以给卡片一个上限并在面板里居中 —— 与 .auth-wrap / .set-wrap 同一个做法。 */ .pub-page{max-width:1120px;margin-inline:auto} .pub-wrap{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:20px;padding:16px 18px 4px;align-items:start} .pub-main{min-width:0} .pub-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 8px;align-items:center} .pub-row .pub-owner{position:relative} .pub-owner select{ width:100%;font-family:inherit;font-size:13px;color:var(--txt);background:var(--card-2); border:1px solid var(--line);border-radius:9px 0 0 9px;padding:8px 10px;line-height:1.5;cursor:pointer; } .pub-row .pub-slash{display:none} .pub-field{display:block;margin:0 0 16px;font-size:12.5px;color:var(--txt-2)} .pub-field > .pub-label{display:block;margin-bottom:6px;font-weight:700;color:var(--txt-2)} .pub-field > .pub-label i{color:var(--rose-ink);font-style:normal;margin-left:2px} .pub-field input[type="text"],.pub-field textarea,.pub-field select{ width:100%;box-sizing:border-box;font-family:inherit;font-size:13px;color:var(--txt); background:var(--card-2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;line-height:1.5; transition:border-color var(--dur-1) ease,box-shadow var(--dur-1) ease; } .pub-field textarea{resize:vertical;min-height:66px} .pub-field input:focus,.pub-field textarea:focus,.pub-field select:focus{ outline:0;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(23,117,200,.2);background:var(--card); } .pub-tip{margin:5px 0 0;font-size:11.5px;line-height:1.6;color:var(--txt-3)} .pub-tip b{color:var(--txt-2);font-weight:700} .pub-sep{height:1px;background:var(--line-2);margin:4px 0 18px} .pub-radios{display:grid;gap:9px} .pub-radio{ display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line); border-radius:10px;cursor:pointer;background:var(--card-2);font-family:inherit;text-align:left; transition:border-color var(--dur-1) ease,background-color var(--dur-1) ease; } .pub-radio:hover{border-color:var(--brand-2)} .pub-radio.on{border-color:var(--brand);background:var(--sea-sel);box-shadow:0 0 0 1px var(--brand) inset} .pub-radio .dot{flex:0 0 auto;width:15px;height:15px;margin-top:2px;border-radius:50%;border:2px solid var(--txt-3);position:relative} .pub-radio.on .dot{border-color:var(--brand)} .pub-radio.on .dot::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--brand)} .pub-radio .rt{min-width:0} .pub-radio .rt b{display:block;font-size:13px;font-weight:700;color:var(--txt)} .pub-radio .rt span{display:block;margin-top:2px;font-size:11.5px;line-height:1.55;color:var(--txt-3)} .pub-radio .tag-free{display:inline-block;margin-left:6px;padding:0 6px;border-radius:9px;font-size:10.5px;font-weight:800; color:var(--brand-ink);background:var(--sea-sel);border:1px solid var(--sea-line);vertical-align:1px} .pub-checks{display:grid;gap:8px} .pub-check{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--txt-2);cursor:pointer;text-align:left; border:0;background:none;font-family:inherit;padding:0;line-height:1.65} .pub-check .bx{ flex:0 0 auto;width:16px;height:16px;margin-top:2px;border-radius:4px;border:1px solid var(--line); background:var(--card-2);position:relative;transition:background-color var(--dur-1) ease,border-color var(--dur-1) ease; } .pub-check.on .bx{background:var(--brand);border-color:var(--brand)} .pub-check.on .bx::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:2px solid #fff; border-top:0;border-left:0;transform:rotate(42deg)} .pub-check.warn .bx{border-color:var(--rose-ink)} .pub-drop{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; padding:22px 14px;border:1.5px dashed var(--line);border-radius:11px;background:var(--card-2); cursor:pointer;text-align:center;transition:border-color var(--dur-1) ease,background-color var(--dur-1) ease; } .pub-drop:hover{border-color:var(--brand-2);background:var(--sea-fill-2)} .pub-drop .pd-ic{font-size:22px;line-height:1} .pub-drop .pd-t{font-size:12.5px;font-weight:700;color:var(--txt)} .pub-drop .pd-d{font-size:11.5px;color:var(--txt-3)} .pub-file{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--card-2);margin-top:9px} .pub-file .pf-ic{font-size:16px} .pub-file .pf-tx{flex:1;min-width:0;font-size:12px;color:var(--txt);overflow-wrap:anywhere} .pub-file .pf-x{border:0;background:none;color:var(--txt-3);font-size:15px;cursor:pointer;font-family:inherit;padding:2px 5px;border-radius:6px;position:relative} .pub-file .pf-x:hover{background:var(--card);color:var(--txt)} .pub-foot{ position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:12px 18px;border-top:1px solid var(--line);background:var(--card); border-radius:0 0 var(--r) var(--r);box-shadow:0 -8px 18px -14px rgba(16,60,105,.5); } .pub-foot .pub-hint{margin-right:auto;font-size:11.5px;color:var(--txt-3);line-height:1.6} .pub-side{display:flex;flex-direction:column;gap:12px} .pub-side .side-card{position:static} .pub-side ol,.pub-side ul{margin:0;padding-left:17px;font-size:11.5px;line-height:1.75;color:var(--txt-3)} .pub-side li b{color:var(--txt-2)} .pub-side li + li{margin-top:5px} .pub-code{font-size:11.5px;background:var(--card-2);border:1px solid var(--line);border-radius:8px;padding:7px 9px; color:var(--txt-2);overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .pub-prev{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--card-2);font-size:12px} .pub-prev .pp-ico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;background:var(--grad,linear-gradient(135deg,#7fc9ff,#2f86d8))} .pub-prev .pp-tx{min-width:0;flex:1} .pub-prev .pp-tx b{display:block;font-size:12.5px;color:var(--txt);overflow-wrap:anywhere} .pub-prev .pp-tx span{display:block;font-size:11px;color:var(--txt-3)} /* 深海里的发布页：跟编辑资料同一套变量 */ .wrap.deep .pub-radio.on{background:var(--sea-sel);border-color:var(--sea-focus);box-shadow:0 0 0 1px var(--sea-focus) inset} .wrap.deep .pub-radio.on .dot::after{background:var(--sea-grad-a)} .wrap.deep .pub-radio.on .dot{border-color:var(--sea-grad-a)} .wrap.deep .pub-radio .rt span{color:var(--sea-txt-3)} .wrap.deep .pub-radio .tag-free{background:var(--sea-sel-install);border-color:var(--sea-line-ctrl);color:var(--sea-ink-badge)} .wrap.deep .pub-drop:hover{border-color:var(--sea-focus);background:var(--sea-fill-high)} .wrap.deep .pub-check .bx{background:var(--sea-fill);border-color:var(--sea-line-ctl)} .wrap.deep .pub-check.on .bx{background:var(--sea-grad-b);border-color:var(--sea-grad-b)} @media (max-width:1000px){ .pub-wrap{grid-template-columns:minmax(0,1fr)} .pub-side{flex-direction:row;flex-wrap:wrap} .pub-side .side-card{flex:1 1 260px} } @media (max-width:760px){ .wrap.deep{padding:14px 12px 92px;border-radius:16px} .sea-life .sl-ray.r3{display:none} .pub-wrap{grid-template-columns:minmax(0,1fr);gap:14px;padding:12px 13px 0} .pub-row{grid-template-columns:minmax(0,1fr)} .pub-owner select{border-radius:9px 9px 0 0;border-bottom:0} .pub-row input{border-radius:0 0 9px 9px} .pub-foot{position:static;padding:12px 13px;box-shadow:none} .pub-foot .pub-hint{flex:1 1 100%;margin:0 0 4px} .pub-foot .btn{flex:1} .cn-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px} .cn-cell .cn-n{font-size:9px} } @media (max-width:420px){ .cn-grid{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (prefers-reduced-motion: reduce){ .sea-life .sl-ray,.sea-life .sl-flow,.sea-life .bub,.sea-life .swim{animation:none !important} .sea-life .bub{opacity:.35;bottom:auto;top:50%} } /* ===== v8 修正 1：深海里的继承色与禁用态 ===== 缘由：.side-hd / .sp-row b / .pub-radio-tag 自身不写 color，继承的是 body 由 :root --txt 算出的 #132435；深海只在 .wrap.deep 上换了变量，继承链不会重新解析变量 → 深底上 1.0:1。 */ .wrap.deep .side-hd, .wrap.deep .side-hd .t{color:var(--txt)} .wrap.deep .side-hd a{color:var(--txt-3)} .wrap.deep .sp-row b{color:var(--txt)} .wrap.deep .pub-prev, .wrap.deep .pub-prev .pub-radio-tag{color:var(--txt)} /* 禁用键：day 的 .btn[disabled] 用 --txt-3 压在蓝底上（2.52）；深海改成暗底浅字 */ .wrap.deep .btn[disabled], .wrap.deep .btn[disabled]:hover{ background:var(--sea-disabled-bg); color:var(--sea-ink-off); border:1px solid var(--sea-line-input); box-shadow:none; } /* 「免费」小签：.wrap.deep .pub-radio .rt span 的特异性(0,4,1)压过了 .tag-free(0,3,0) */ .wrap.deep .pub-radio .rt span .tag-free{ background:var(--sea-sel-install); border:1px solid var(--sea-line-ctrl); color:var(--sea-ink-badge); } /* ================= v14 · 空间页「插件推荐」分组卡（仿 Minecraft 模组页的文件组） ================= 参考图的结构：分组标题（Main File）→ 副标题（1.21.1）→ 灰底圆角块（粗体版本行 + 元信息行 + 右对齐日期） → 分隔线 → 第二组（Recent Files / View all）→ 底部全宽按钮。 映射：主推版本 → 最近更新 → 查看全部条目。 */ .plugin-files .pf-bd{padding:12px 13px 13px} /* 分组标题：比 .side-hd 那层更沉一点，像参考图的 Main File */ .plugin-files .pf-hd{ font-size:12.5px;font-weight:800;color:var(--txt);letter-spacing:.2px; display:flex;align-items:center;gap:7px;margin:0 0 4px } /* 副标题：参考图里写「1.21.1」，这里写插件名 / 收录总数 */ .plugin-files .pf-sub{ font-size:11px;color:var(--txt-3);margin:0 0 8px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis } /* 灰底圆角块 —— 参考图里靠比页面亮一档来分组，不用边框 */ .plugin-files .pf-blk{ background:var(--card-2); border:1px solid var(--line-2); border-radius:9px; padding:9px 10px 8px; margin-bottom:8px; cursor:pointer; transition:background-color var(--dur-1) ease,border-color var(--dur-1) ease, transform var(--dur-2) var(--ease-out) } .plugin-files .pf-blk:hover{background:#eef5fd;border-color:#cfe3f8;transform:translateY(-1px)} .plugin-files .pf-blk:last-of-type{margin-bottom:0} /* 块内第一行：粗体版本行 */ .plugin-files .pf-t{ font-size:12px;font-weight:700;color:var(--txt);line-height:1.4; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;overflow-wrap:anywhere;margin-bottom:5px } /* 块内第二行：小方标 + 两三个 chip + 右对齐日期 */ .plugin-files .pf-meta{ display:flex;align-items:center;gap:6px;flex-wrap:wrap; font-size:10.5px;color:var(--txt-3);line-height:1.5 } /* 参考图左侧那个绿色 R 方标，这里改成档位标（本站包 / 外链 / 仅条目） */ .plugin-files .pf-tag{ width:15px;height:15px;border-radius:3px;flex:none; display:grid;place-items:center; font-size:10px;font-weight:800;line-height:1; background:#e5f8ef;color:#0a7a58;border:1px solid #bfe9d5 } .plugin-files .pf-tag.link{background:#e8f3ff;color:var(--brand-ink);border-color:#c6e0fa} .plugin-files .pf-tag.entry{background:var(--card-2);color:var(--txt-3);border-color:var(--line)} .plugin-files .pf-chip{ font-size:10.5px;color:var(--txt-2);font-weight:600; white-space:nowrap } .plugin-files .pf-date{ margin-left:auto;font-size:10.5px;color:var(--txt-3); font-variant-numeric:tabular-nums;white-space:nowrap } /* 分隔线 + 第二组头：左标题、右「全部 ›」 */ .plugin-files .pf-sec{ display:flex;align-items:center;gap:8px; margin:13px 0 3px;padding-top:12px; border-top:1px solid var(--line-2); font-size:12.5px;font-weight:800;color:var(--txt) } .plugin-files .pf-sec a{ margin-left:auto;font-size:10.5px;font-weight:600; color:var(--txt-3);text-decoration:none;cursor:pointer } .plugin-files .pf-sec a:hover{color:var(--brand-ink)} /* 底部全宽按钮：参考图那条 Report */ .plugin-files .pf-more{ width:100%;margin-top:11px; border:1px solid var(--line);background:var(--card-2); color:var(--txt-2);border-radius:8px; padding:7px 10px;font-size:11.5px;font-weight:700; font-family:inherit;cursor:pointer; transition:background-color var(--dur-1) ease,color var(--dur-1) ease,border-color var(--dur-1) ease } .plugin-files .pf-more:hover{background:#e8f3ff;border-color:#c3e0fb;color:var(--brand-ink)} /* ---------- 深海皮肤：参考图本身就是深色块，这里贴着它的层次做 ---------- */ .wrap.deep .plugin-files .pf-hd{color:var(--sea-pf-hd)} .wrap.deep .plugin-files .pf-sub{color:var(--txt-3)} .wrap.deep .plugin-files .pf-blk{ background:var(--sea-fill-pf); border:1px solid var(--sea-line-pf) } .wrap.deep .plugin-files .pf-blk:hover{ background:var(--sea-sel-soft); border-color:var(--sea-line-ctrl) } .wrap.deep .plugin-files .pf-t{color:var(--sea-txt)} .wrap.deep .plugin-files .pf-meta{color:var(--txt-3)} .wrap.deep .plugin-files .pf-tag.pack{ background:var(--sea-ok-fill-2);color:var(--sea-ink-ok-2);border-color:var(--sea-line-ctrl) } .wrap.deep .plugin-files .pf-tag.link{ background:var(--sea-sel-install);color:var(--sea-ink);border-color:var(--sea-line-ctrl) } .wrap.deep .plugin-files .pf-tag.entry{ background:var(--sea-fill);color:var(--sea-ink-sub);border-color:var(--sea-line-white) } .wrap.deep .plugin-files .pf-chip{color:var(--sea-pf-chip)} .wrap.deep .plugin-files .pf-date{color:var(--sea-pf-date)} .wrap.deep .plugin-files .pf-sec{border-top-color:var(--sea-line-pf-2);color:var(--sea-pf-hd)} .wrap.deep .plugin-files .pf-sec a{color:var(--sea-txt-3)} .wrap.deep .plugin-files .pf-sec a:hover{color:var(--sea-ink)} .wrap.deep .plugin-files .pf-more{ background:var(--sea-fill-pf); border:1px solid var(--sea-line); color:var(--sea-ink-ghost) } .wrap.deep .plugin-files .pf-more:hover{ background:var(--sea-sel-soft-2); border-color:var(--sea-line-ctrl); color:var(--sea-ink-on-sel) } /* 窄栏（≤1240px 侧栏变横向）时不要把块压成一条 */ @media (max-width:1240px){ .col-side{max-height:none} } @media (max-width:760px){ .plugin-files .pf-blk{padding:8px 9px 7px} .plugin-files .pf-t{font-size:11.5px} } @media (prefers-reduced-motion:reduce){ .plugin-files .pf-blk{transition:none} .plugin-files .pf-blk:hover{transform:none} } /* ========================================================================== v17 · 登录 / 注册 / 第三方授权 / 手机号认证 / 设置 版面参照 B 站账号页：左边一块深色主题画面讲规则，右边一张白卡片放表单。 颜色只用现有 token（--card/--line/--txt/--brand…），深浅色都靠变量自动跟随。 ========================================================================== */ /* ---------- 顶栏右上两项（消息胶囊 + 账号入口） ---------- */ .nav-act{ display:inline-flex;align-items:center;gap:6px; height:34px;padding:0 12px;border-radius:17px; border:1px solid rgba(255,255,255,.28); background:rgba(9,45,80,.26); color:#fff;font-size:12.5px;font-weight:600;font-family:inherit; cursor:pointer;position:relative; transition:background var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-1) ease; } .nav-act:hover{background:rgba(9,45,80,.42);border-color:rgba(255,255,255,.5)} .nav-act:active{transform:translateY(1px)} .nav-act:focus-visible{outline:2px solid #fff;outline-offset:2px} .nav-act .na-ic{font-size:13px;line-height:1} .nav-act .dot-badge{position:absolute;top:3px;right:7px} .nav-act-key{background:#fff;color:var(--brand-ink);border-color:#fff} .nav-act-key:hover{background:#eaf4fe;border-color:#eaf4fe;color:var(--brand-ink)} /* v42 · 顶栏语言切换：与消息胶囊同一套玻璃质感，两段式 segmented control。 中 / EN 是固定标签，挂 data-i18n-skip，翻译器不会把它们再翻一遍。 */ .lang-switch{ display:inline-flex;align-items:center;gap:2px;flex:0 0 auto; height:34px;padding:2px;border-radius:17px; border:1px solid rgba(255,255,255,.28); background:rgba(9,45,80,.26); } .lang-switch button{ height:28px;min-width:30px;padding:0 8px;border:0;border-radius:14px; background:transparent;color:#fff;font:inherit;font-size:11px;font-weight:700; line-height:1;letter-spacing:.2px;cursor:pointer; transition:background var(--dur-2) ease, color var(--dur-2) ease; } .lang-switch button:hover{background:rgba(255,255,255,.18)} .lang-switch button.on{background:#fff;color:var(--brand-ink)} .lang-switch button:focus-visible{outline:2px solid #fff;outline-offset:2px} /* 断点必须排在基础规则之后：同优先级下源码顺序决定胜负。 */ @media (max-width:760px){ .lang-switch{height:30px;padding:1px;border-radius:15px} .lang-switch button{height:26px;min-width:26px;padding:0 6px;font-size:10px} } /* 英文导航比中文宽：窄桌面先收两个次级入口，平板再收两个，手机交给左栏与底部 tabbar。 宁可少几个入口，也不让链接溢出容器压到搜索框上（flex 子项不会自动缩短文字）。 */ @media (max-width:1300px){ .nav-links a[data-route="art"], .nav-links a[data-route="vip"]{display:none} } @media (max-width:1060px){ .nav-links a[data-route="rank"], .nav-links a[data-route="space"]{display:none} } @media (max-width:940px){ .nav-links a[data-route="market"]{display:none} } @media (max-width:880px){ .nav-links{display:none} } @media (max-width:400px){ .lang-switch{width:44px;height:28px;padding:1px;justify-content:center} .lang-switch button{min-width:19px;padding:0 2px;font-size:9px} } .avatar-btn.locked .av{filter:grayscale(.4)} .avatar-btn .na-lock{font-size:10px;line-height:1;margin-left:-2px} /* ---------- 账号弹层里的提示块 ---------- */ .pop-me-hd{display:flex;gap:10px;align-items:center;padding:13px 14px;border-bottom:1px solid var(--line-2)} .pop-note{ display:flex;align-items:center;gap:9px; margin:10px 12px;padding:9px 10px; border:1px solid var(--line);border-radius:10px; background:var(--card-2); } .pop-note>span{font-size:15px;line-height:1} .pop-note>div{flex:1;min-width:0} .pop-note b{font-size:12px;display:block} .pop-note p{margin:2px 0 0;font-size:11px;color:var(--txt-3);line-height:1.5} .ni.rose{background:#fde9ef;color:#b81a4c} html[data-theme="night"] .ni.rose{background:#3a1220;color:#ff86ac} /* ---------- 两栏骨架 ---------- */ .auth-wrap{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,404px); gap:18px;align-items:stretch;margin:8px auto 24px;max-width:1000px; } .auth-wrap .auth-panel.only{grid-column:1 / -1;max-width:520px;margin:0 auto} .auth-panel{ background:var(--card);border:1px solid var(--line);border-radius:16px; box-shadow:var(--shadow);padding:22px 22px 20px; display:flex;flex-direction:column;gap:14px; } .auth-hd h1{margin:0;font-size:22px;line-height:1.3;letter-spacing:.3px;color:var(--txt)} .auth-hd p{margin:6px 0 0;font-size:12.5px;line-height:1.65;color:var(--txt-2)} /* ---------- 左侧画面：深海语汇，和空间页同源 ---------- */ .auth-visual{ position:relative;overflow:hidden;border-radius:16px; padding:26px 24px;min-height:420px; display:flex;flex-direction:column;justify-content:flex-end;gap:16px; background:linear-gradient(155deg,#0c2d4a 0%,#12456e 46%,#0a2136 100%); box-shadow:var(--shadow); } .av-sea{position:absolute;inset:0;pointer-events:none} .av-glow{ position:absolute;left:-12%;top:-28%;width:78%;height:78%;border-radius:50%; background:radial-gradient(circle at 40% 40%,rgba(120,200,255,.42),rgba(120,200,255,0) 68%); filter:blur(2px); } .av-ray{position:absolute;top:-30%;width:120px;height:170%;left:32%; background:linear-gradient(180deg,rgba(190,232,255,.30),rgba(190,232,255,0)); transform:rotate(14deg);filter:blur(6px)} .av-ray.r2{left:62%;width:64px;transform:rotate(-9deg);opacity:.72} .av-tail{position:absolute;right:-6%;bottom:16%;width:74%;opacity:.5} .av-bub{position:absolute;border-radius:50%;border:1px solid rgba(190,232,255,.5); background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.55),rgba(255,255,255,.05))} .av-bub.b1{width:16px;height:16px;left:14%;bottom:18%} .av-bub.b2{width:9px;height:9px;left:26%;bottom:38%} .av-bub.b3{width:22px;height:22px;right:18%;top:22%} .av-copy{position:relative;color:#eaf5ff} .av-copy h2{margin:0;font-size:20px;line-height:1.3;letter-spacing:.4px} .av-copy p{margin:6px 0 0;font-size:12.5px;line-height:1.7;color:#b7d6ee} .av-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px} .av-list li{font-size:11.5px;line-height:1.6;color:#a9cbe4;padding-left:14px;position:relative} .av-list li::before{content:"◆";position:absolute;left:0;top:0;font-size:8px;color:#63b8ff} .av-list b{display:block;font-size:12px;color:#eaf5ff;margin-bottom:1px} /* 左卡＝鲸鱼娘人物卡：iframe 铺满，圆角与裁切交给 .auth-visual（卡片自带深海底 + 文字块） */ /* 左列改由 iframe 承担后，`.auth-wrap` 内不再有自带内在宽度（intrinsic width）的元素， 而它带 `margin:8px auto`，作为 grid item 会被 shrink-to-fit 压到 1fr 列宽 0 —— 必须显式撑满， 再由 `max-width:1000px` 约束。 */ .auth-wrap{width:100%} .auth-visual.whale{padding:0;display:block;background:#0a2136;box-shadow:var(--shadow)} .auth-visual.whale .av-frame{ position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:#0a2136; } /* ---------- 表单控件：沿用站点 12.5px 标签 + 9px 圆角 ---------- */ .auth-tabs{display:flex;gap:4px;padding:3px;background:var(--card-2);border-radius:10px} .auth-tab{ flex:1;height:32px;border:0;border-radius:8px;background:transparent; font:inherit;font-size:12.5px;font-weight:600;color:var(--txt-2);cursor:pointer; transition:background var(--dur-2) ease,color var(--dur-2) ease; } .auth-tab.on{background:var(--card);color:var(--brand-ink);box-shadow:0 1px 2px rgba(16,60,105,.12)} .auth-tab:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .auth-form{display:flex;flex-direction:column;gap:12px} .auth-field{display:flex;flex-direction:column;gap:6px;position:relative} .auth-field>span{font-size:var(--fs-label);font-weight:600;color:var(--txt-2)} .auth-field>i{position:absolute;right:11px;bottom:9px;font-size:13px;font-style:normal;opacity:.65;pointer-events:none} .auth-field input{ height:38px;width:100%;box-sizing:border-box; border:1px solid var(--line);background:var(--card-2);color:var(--txt); border-radius:9px;padding:0 34px 0 11px;font:inherit;font-size:13px; transition:border-color var(--dur-2) ease, box-shadow var(--dur-2) ease; } .auth-field input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--sel);background:var(--card)} .auth-field.grow{flex:1} .auth-submit{height:40px;font-size:14px;font-weight:700;margin-top:2px;width:100%} .auth-err{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding:9px 11px;border-radius:9px; background:#fdeff2;border:1px solid #f6c9d4;color:#8d1030; font-size:12px;line-height:1.55;font-weight:600; } html[data-theme="night"] .auth-err{background:#3a1220;border-color:#5c1e33;color:#ffb3c7} .auth-link{ border:0;background:transparent;padding:0;margin-left:auto; font:inherit;font-size:12px;font-weight:700;color:var(--link);cursor:pointer;text-decoration:underline; } .auth-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .auth-or{display:flex;align-items:center;gap:10px;color:var(--txt-3);font-size:11.5px} .auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)} .oauth-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .oauth-btn{ display:flex;align-items:center;justify-content:center;gap:6px; height:38px;border-radius:9px;cursor:pointer;font:inherit; border:1px solid var(--line);background:var(--card);color:var(--txt-2); font-size:12.5px;font-weight:600; transition:border-color var(--dur-2) ease, color var(--dur-2) ease, background var(--dur-2) ease; } .oauth-btn:hover{border-color:var(--oc,var(--brand));color:var(--txt);background:var(--card-2)} .oauth-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .oc-ic{font-size:15px;line-height:1} .auth-legal{margin:0;font-size:11px;line-height:1.6;color:var(--txt-3)} .auth-demo{ display:flex;gap:8px;align-items:baseline;flex-wrap:wrap; padding:8px 10px;border-radius:9px;background:var(--card-2);border:1px dashed var(--line); font-size:11px;color:var(--txt-3); } .auth-demo b{color:var(--txt-2);font-size:11px} .auth-note{ padding:11px 12px;border-radius:10px;background:var(--card-2);border:1px solid var(--line); font-size:12px;line-height:1.7;color:var(--txt-2); } .auth-note.locked{border-color:#f0d4a8;background:#fdf5e8} html[data-theme="night"] .auth-note.locked{border-color:#5a4520;background:#2a2113} .auth-acts{display:flex;gap:10px;flex-wrap:wrap} .auth-acts .btn{flex:1;min-width:120px} .auth-acts.sub{margin-top:2px} .auth-acts.sub .btn{flex:0 0 auto;min-width:0} /* 第三方授权中转卡 */ .oauth-card{ display:flex;gap:12px;align-items:flex-start; padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--card-2); } .oc-big{ width:44px;height:44px;flex:0 0 44px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:22px; background:var(--card);border:1px solid var(--line); } .oauth-card b{font-size:13px;display:block;line-height:1.5} .oauth-card p{margin:4px 0 0;font-size:11.5px;line-height:1.6;color:var(--txt-3)} /* 手机号认证 */ .phone-step{display:flex;gap:6px} .phone-step span{ flex:1;text-align:center;font-size:11px;font-weight:600; padding:6px 4px;border-radius:8px;background:var(--card-2);color:var(--txt-3); border:1px solid var(--line-2); } .phone-step span.on{background:var(--sel);color:var(--brand-ink);border-color:transparent} .phone-row{display:flex;gap:10px;align-items:flex-end} .phone-send{height:38px;flex:0 0 auto;padding:0 14px;font-size:12.5px} .phone-dev{ display:flex;gap:8px;align-items:baseline;flex-wrap:wrap; padding:9px 11px;border-radius:9px;background:#fdf5e8;border:1px dashed #eccf9a; font-size:11.5px;color:#6b4a12; } html[data-theme="night"] .phone-dev{background:#2a2113;border-color:#5a4520;color:#e8b45c} .phone-dev code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;font-weight:700;letter-spacing:2px} .phone-dev span{color:inherit;opacity:.75} /* 没接短信通道时的真话提示：和「演示验证码」区分开，用信息蓝而不是警告黄 */ .phone-hint{ display:flex;gap:8px;align-items:flex-start; padding:9px 11px;border-radius:9px;background:#f1f6ff;border:1px solid #cfdffa; font-size:11.5px;line-height:1.6;color:#2c4c7d; } html[data-theme="night"] .phone-hint{background:#16243c;border-color:#2d4a75;color:#9dc0f0} .phone-hint b{color:inherit;font-weight:700} /* ---------- 设置页 ---------- */ /* 设置页三个局部色 token：day 直接沿用全局值，night 换成高亮版。 不改 :root 是因为这些颜色只有设置页用得上，别处（比如 --brand-ink）还有自己的夜间需求。 */ .set-wrap{--set-on-ink:var(--brand-ink);--set-ok-ink:var(--ok);--set-warn-ink:var(--warn); display:grid;grid-template-columns:196px minmax(0,1fr);gap:18px; align-items:start;margin:8px auto 24px;max-width:940px; } .set-side{ display:flex;flex-direction:column;gap:4px; background:var(--card);border:1px solid var(--line);border-radius:14px; padding:14px 12px;box-shadow:var(--shadow); } .set-side h1{margin:0 0 10px;padding:0 8px;font-size:16px;letter-spacing:.4px;color:var(--txt)} .set-nav-item{ text-align:left;border:0;background:transparent;border-radius:9px; padding:9px 10px;font:inherit;font-size:12.5px;font-weight:600;color:var(--txt-2); cursor:pointer;transition:background var(--dur-2) ease,color var(--dur-2) ease; } .set-nav-item:hover{background:var(--card-2);color:var(--txt)} .set-nav-item.on{background:var(--sel);color:var(--set-on-ink)} .set-nav-item:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .set-main .card{overflow:hidden} .set-body{padding:18px 20px 20px} .set-sec h2{margin:0 0 14px;font-size:15px;letter-spacing:.3px;color:var(--txt)} .set-row{ display:flex;gap:14px;align-items:center;justify-content:space-between; padding:12px 0;border-bottom:1px solid var(--line-2); } .set-row:last-of-type{border-bottom:0} .set-k{font-size:12.5px;font-weight:700;color:var(--txt-2);flex:0 0 104px} .set-v{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--txt);flex:1;justify-content:flex-end;text-align:right} .set-sub{font-size:11.5px;color:var(--txt-3);font-weight:500;line-height:1.6} .set-ok{font-size:11px;font-weight:700;color:var(--set-ok-ink);background:rgba(10,122,88,.10);padding:2px 8px;border-radius:999px} .set-warn{font-size:11px;font-weight:700;color:var(--set-warn-ink);background:rgba(154,98,0,.12);padding:2px 8px;border-radius:999px} /* 夜间覆盖：深蓝面板上 --brand-ink(#0f63b4) 只有 1.93、--ok(#0a7a58) 只有 2.93，都不是可读的 */ html[data-theme="night"] .set-wrap{--set-on-ink:#8fd0ff;--set-ok-ink:var(--ok-ink);--set-warn-ink:var(--warn-ink)} /* 登录设备（v46）：一行一台，标签在上、系统·浏览器与登录时间在下，右边留「退出」。 这里不能用 .set-v 的右对齐 —— 设备卡要占满整宽才看得清是谁在哪台机器上。 */ .set-row-dev{flex-wrap:wrap;align-items:flex-start} .set-row-dev .set-k{flex:0 0 100%;margin-bottom:2px} .set-row-dev .set-v.dev-wrap{flex:1 1 100%;justify-content:flex-start;text-align:left} .dev-list{display:flex;flex-direction:column;gap:8px;width:100%} .dev-row{ display:flex;gap:10px;align-items:center;width:100%;box-sizing:border-box; padding:9px 11px;border:1px solid var(--line-2);border-radius:10px;background:var(--card-2); } .dev-row.on{border-color:var(--line);background:var(--card)} .dev-ico{font-size:15px;line-height:1} .dev-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .dev-main b{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--txt);font-weight:700} .dev-tag{ font-style:normal;font-size:10px;font-weight:700;line-height:1.5; color:var(--txt-3);background:var(--card-2);border-radius:999px;padding:0 6px; } /* 只有「当前」用绿色：绿色在这套界面里等于「就绪 / 生效」，其它在线设备是中性灰 */ .dev-row.on .dev-tag{color:var(--set-ok-ink);background:rgba(10,122,88,.10)} /* 说明行：右对齐的段落会读成「右侧附注」，这里要按正文左对齐 */ .set-row-note{align-items:flex-start} .set-row-note .set-v{text-align:left;justify-content:flex-start;line-height:1.65} .set-acts{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap} .set-seg{display:flex;gap:4px;padding:3px;background:var(--card-2);border-radius:10px} .set-seg-btn{ height:30px;padding:0 14px;border:0;border-radius:8px;background:transparent; font:inherit;font-size:12px;font-weight:600;color:var(--txt-2);cursor:pointer; } .set-seg-btn.on{background:var(--card);color:var(--brand-ink);box-shadow:0 1px 2px rgba(16,60,105,.12)} .set-seg-btn:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .set-switch{ width:42px;height:24px;border-radius:12px;border:1px solid var(--line); background:var(--card-2);position:relative;cursor:pointer;padding:0; transition:background var(--dur-2) ease,border-color var(--dur-2) ease; } .set-switch i{ position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%; background:var(--txt-3);transition:transform var(--dur-2) var(--ease-out), background var(--dur-2) ease; } .set-switch.on{background:var(--brand);border-color:var(--brand)} .set-switch.on i{transform:translateX(18px);background:#fff} .set-switch:focus-visible{outline:2px solid var(--brand);outline-offset:2px} /* ---------- 窄屏：左画面收起为顶部条，两栏叠成一栏 ---------- */ @media (max-width:1000px){ .auth-wrap{grid-template-columns:minmax(0,1fr)} .auth-visual{min-height:0;padding:18px 18px 16px;justify-content:flex-start} .auth-visual.whale{min-height:clamp(320px,64vw,420px)} .av-list{display:none} .auth-visual .av-copy p{font-size:12px} .set-wrap{grid-template-columns:minmax(0,1fr)} .set-side{flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px} .set-side h1{flex:0 0 auto;margin:0 6px 0 0;padding:0} .set-nav-item{padding:7px 10px} } @media (max-width:480px){ .oauth-row{grid-template-columns:1fr 1fr 1fr;gap:6px} .oc-tx{font-size:11.5px} .set-k{flex:0 0 74px;font-size:12px} .set-v{font-size:12px} .set-row{flex-wrap:wrap} /* 说明行在窄屏上标签独占一行，正文铺满，不然 74px 的标签会把一段话挤成竖条 */ .set-row-note .set-k{flex:0 0 100%;margin-bottom:2px} .dev-row{padding:8px 10px;gap:8px} /* 409 提示在窄屏会折成两行：链接独占一行时别再被 margin-left:auto 推到右边， 否则读起来像浮在句子外面 */ .auth-err .auth-link{margin-left:0} } @media (prefers-reduced-motion:reduce){ .av-glow,.av-ray{filter:none} } /* ========================================================================== v18 · 离线名片 / 消息中心（页签 + 未读 + 一键已读）/ 他人空间左栏 / 插件空态 全部是新类，不动旧 token；深浅两套颜色都走现有变量。 ========================================================================== */ /* ---------- 顶栏离线胶囊 ---------- */ .nav-act-off{padding-left:10px} .nav-act-off .na-dot{ width:7px;height:7px;border-radius:50%;background:#ffd166; box-shadow:0 0 0 3px rgba(255,209,102,.22);flex:none; } /* ---------- 首页右栏：离线态名片 ---------- 同一副骨架，只把身份区换成「灰鲸鱼 + 为什么 + 入口」： 这样右上角那张卡的位置、高度、圆角都不跳，离线态读起来像状态，不像坏了。 */ .me-card-off .banner.off{background:linear-gradient(135deg,#c9d9e8,#a9bfd2 55%,#93aec4)} .me-card-off .banner.off::after{background:rgba(255,255,255,.22)} .off-av{position:relative;width:56px;height:56px} .off-av .av{ width:56px;height:56px;border-radius:14px;border:3px solid var(--card); box-shadow:0 6px 16px -8px rgba(0,0,0,.4);filter:grayscale(1) opacity(.92); } .off-av .off-ring{ position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%; background:#94a3b8;border:2.5px solid var(--card); } .me-card-off .nm .lv.off{ background:var(--card-2);color:var(--txt-3);border:1px dashed var(--line); font-weight:700;letter-spacing:.2px; } .me-card-off .sig{color:var(--txt-3);line-height:1.65} .off-acts{display:flex;gap:7px;margin-top:12px} .off-acts .btn{flex:1} .off-tip{margin-top:9px;font-size:11.5px;color:var(--txt-3)} .off-tip a{color:var(--link);font-weight:600} [data-lang="en"] .off-tip a{margin-left:4px} .off-tip a:hover{text-decoration:underline} /* ---------- 消息弹层 ---------- 宽度沿用 330px：_motion.cjs 锁着 .pop 的 transformOrigin = '330px 0px'， 那是 right:96 + width:330 推出来的；改宽度会同时改掉那条几何断言。 */ .pop-notice{ display:flex;flex-direction:column;max-height:min(76vh,540px); right:96px;top:52px;width:330px; } .pop-notice .pop-hd{padding-right:9px} .pop-hd-act{display:flex;align-items:center;gap:2px} .pop-hd-act .mini{padding:4px 6px;border-radius:6px;white-space:nowrap;font-family:inherit} .pop-hd-act .mini:hover{background:var(--card-2);color:var(--link)} .pop-hd-act .mini[disabled]{opacity:.45;cursor:default} /* 五类页签在 330px 的弹层里必须一屏放得下：等分 + 居中， 一旦靠内容宽度排（图标 + 名字 + 数字 = 420px），最后一类会被裁掉， 而 overflow-x:auto 在这个窄面板里既没有滚动条也没有渐隐提示， 用户看到的就是「少了一个分类」。 */ .nt-tabs{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px 6px; border-bottom:1px solid var(--line-2);background:var(--card-2);flex:none; } .nt-tab{ display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:0; border:1px solid transparent;background:transparent;border-radius:8px; padding:5px 2px;font:inherit;font-size:12px;font-weight:600;color:var(--txt-2); cursor:pointer;transition:background-color var(--dur-1) ease,color var(--dur-1) ease; } .nt-tab:hover{background:var(--card);color:var(--txt)} .nt-tab.on{background:var(--card);color:var(--brand-ink);border-color:var(--line)} .nt-tab:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .nt-k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .nt-tab .nt-n{flex:none} .nt-n{ font-style:normal;font-size:10.5px;font-weight:800;line-height:1; min-width:15px;height:15px;padding:0 4px;border-radius:8px; background:#c92244;color:#fff;display:inline-grid;place-items:center; } .nt-list{overflow-y:auto;overscroll-behavior:contain;min-height:0} .nt-row{padding-right:10px} .nt-row.is-read{opacity:.72} .nt-row.is-read b{font-weight:500;color:var(--txt-2)} .nt-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none} .nt-meta time{font-size:10.5px;color:var(--txt-3);white-space:nowrap} .nt-x{ border:1px solid var(--line);background:var(--card);color:var(--txt-3); width:18px;height:18px;border-radius:50%;display:grid;place-items:center; font-size:9px;line-height:1;cursor:pointer;padding:0; transition:color var(--dur-1) ease,border-color var(--dur-1) ease,background-color var(--dur-1) ease; } .nt-x:hover{color:var(--brand-ink);border-color:#c3e0fb;background:var(--sel)} .nt-row.is-read .nt-x{cursor:default;color:var(--ok);border-color:transparent;background:transparent} .nt-empty{padding:26px 14px;text-align:center;font-size:12.5px;color:var(--txt-3)} /* 访客的铃铛弹层：没有消息可列，只有一张登录引导卡 */ .nt-guest{padding:22px 16px 20px;text-align:center} .nt-guest .big{font-size:26px;line-height:1;display:block;margin-bottom:8px} .nt-guest p{margin:0 0 12px;font-size:12.5px;color:var(--txt-3);line-height:1.6} .notice b.unread{font-weight:800} .notice b.unread::after{ content:"";display:inline-block;width:6px;height:6px;border-radius:50%; background:#c92244;margin-left:6px;vertical-align:2px; } /* ---------- 消息中心整页 ---------- */ .nt-page-tabs .tab{display:inline-flex;align-items:center;gap:4px} .nt-page-tabs .tab .nt-n{margin-left:2px} .nt-page{display:flex;flex-direction:column} .nt-line{ display:flex;gap:12px;align-items:flex-start; padding:13px 16px;border-bottom:1px solid var(--line-2); } .nt-line:last-child{border-bottom:0} .nt-line.is-read{opacity:.8} .nt-main{flex:1;min-width:0} .nt-main b{display:block;font-size:13px;font-weight:700;color:var(--txt)} .nt-line.is-read .nt-main b{font-weight:500;color:var(--txt-2)} .nt-main b.unread::after{ content:"";display:inline-block;width:6px;height:6px;border-radius:50%; background:#c92244;margin-left:6px;vertical-align:2px; } .nt-main p{margin:3px 0 0;font-size:12.5px;color:var(--txt-2);line-height:1.6} .nt-main time{display:block;margin-top:5px;font-size:11px;color:var(--txt-3)} .nt-acts{display:flex;align-items:center;gap:8px;flex:none} /* 整页里的「标为已读」是文字按钮，不能套弹层那个 18px 圆钮（会被挤成竖排碎字） */ .nt-mark{ border:1px solid var(--line);background:var(--card);color:var(--txt-3); height:24px;padding:0 10px;border-radius:12px;font:inherit;font-size:11.5px; cursor:pointer;white-space:nowrap; transition:color var(--dur-1) ease,border-color var(--dur-1) ease,background-color var(--dur-1) ease; } .nt-mark:hover{color:var(--brand-ink);border-color:#c3e0fb;background:var(--sel)} .nt-mark:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .nt-done{font-size:11.5px;color:var(--ok-ink);white-space:nowrap} /* ---------- 左栏：他人空间名片 ---------- */ .rail-user{padding:11px 10px 12px} .ru-hd{display:flex;gap:9px;align-items:center} .ru-hd .av{width:46px;height:46px;border-radius:12px;flex:none} .ru-hd b{display:block;font-size:13px;font-weight:700;color:var(--txt);line-height:1.35} .ru-hd span{font-size:11px;color:var(--txt-3)} .ru-sig{ margin:8px 0 0;font-size:11.5px;line-height:1.6;color:var(--txt-2); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .ru-stats{display:flex;margin-top:9px;padding-top:8px;border-top:1px solid var(--line-2)} .ru-stats div{flex:1;text-align:center} .ru-stats b{display:block;font-size:13px;font-variant-numeric:tabular-nums;color:var(--txt)} .ru-stats span{font-size:10.5px;color:var(--txt-3)} .ru-btn{width:100%;margin-top:10px} /* 红底白字必须比 .rail-item.on .rail-n 更具体：那条规则给数字设了 brand-ink， 在选中态下会把未读数染成深蓝压红底（白天 1.10、夜间 3.86，都不可读）。 */ .rail-item .rail-n.nt-n, html[data-theme="night"] .rail-item.on .rail-n.nt-n{ background:#c92244;color:#fff;font-size:10px;font-weight:800; min-width:16px;height:16px;border-radius:8px;display:grid;place-items:center;padding:0 4px; } .rail-item.on .rail-n.nt-n{color:#fff} /* ---------- 空间页：作者自己的插件卡 ---------- */ .pf-empty{ display:flex;flex-direction:column;align-items:center;gap:7px; padding:20px 16px 18px;text-align:center; } .pf-empty .big{font-size:26px;line-height:1;opacity:.75} .pf-empty b{font-size:12.5px;color:var(--txt);font-weight:700} .pf-empty span{font-size:11.5px;color:var(--txt-3);line-height:1.6;max-width:220px} .pf-empty .btn{margin-top:4px} /* ---------- 深海主题覆盖：左栏名片与插件空态都落在 .wrap.deep 里 ---------- */ .wrap.deep .rail-user{background:var(--sea-panel);border-color:var(--sea-line)} .wrap.deep .ru-hd b{color:var(--sea-txt)} .wrap.deep .ru-hd span,.wrap.deep .ru-stats span{color:var(--sea-txt-3)} .wrap.deep .ru-sig{color:var(--sea-txt-2)} .wrap.deep .ru-stats{border-top-color:var(--sea-line-pf-2)} .wrap.deep .ru-stats b{color:var(--sea-txt)} .wrap.deep .pf-empty b{color:var(--sea-txt)} .wrap.deep .pf-empty span{color:var(--sea-txt-3)} @media (max-width:760px){ .nt-line{flex-wrap:wrap} .nt-acts{width:100%;justify-content:flex-end;padding-top:2px} .off-acts{flex-wrap:wrap} /* 330px 宽 + right:96 在 390px 屏上算出 left:-36，半个弹层跑出屏幕； 窄屏改成贴边居中、宽度自适应，并限高保证能滚到底。 */ .pop-notice{left:8px;right:8px;width:auto;top:50px;max-height:min(70vh,460px)} } @media (prefers-reduced-motion:reduce){ .nt-tab,.nt-x{transition:none} } /* ---------- 头图：访客态不再压字（v18 的 .nm.guest / .cover-key 已撤） ---------- 头图（照片区）只留立绘与标题；访客态的「还没登录 / 请登录」 整块移除，所以配套的 .nm.guest、.cover-key 三条状态和 760 断点压缩规则一起删掉， 不留在样式表里当化石。登录入口在顶栏胶囊与右栏离线名片上。 */ /* ---------- 初始默认头像（v20） ---------- 产品指定的一张图：白底 + #1a56db 线稿鲸鱼，源文件 js/default-avatar.js（dataURL）。 这里只负责两件事： 1) .av-guest —— 访客态复用同一张图，但压成灰阶，读起来仍是「你还没登录」而不是「这是你的头像」； 2) 白底线稿在深底上会像一块贴纸，给默认图一个极淡的圆环边界， 让它在浅色卡片与深海主题里都能读成「一个人的头像」，而不是漏出来的一块白。 注意：不要给 .av 统一加 border —— 自选 emoji 头像和上传图不需要这圈线， 它们本身就是有色彩与造型的色块，加环只会显得臃肿。 */ .av-guest{filter:grayscale(1) opacity(.94)} .avatar-btn img.av-guest{border-color:rgba(255,255,255,.92)} html[data-theme="night"] .avatar-btn img.av-guest{border-color:rgba(180,205,230,.7)} /* ══════════════════════════════════════════════════════════════════ v22 · 鲸鲸空间（鲸鱼娘二创作品墙） 一处视觉主张：这面墙按「画廊展签」来排 —— 作品在上，出处用衬线字 贴在下面，发布者退成一行小字。原作与发布者的区分靠三层：字体（衬线 / 界面字）、底色（展签有底，发布行没有）、位置（中间 / 最下）。 不额外加标签，因为「原作」两个字本身已经在行首。 ══════════════════════════════════════════════════════════════════ */ .au-wrap { --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", Georgia, serif; } /* ---------- 头图：和登录页左卡同一套深海渐变，让新页一眼属于这个站 ---------- */ .au-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; gap: 18px; padding: 24px 26px 22px; border-radius: var(--r); color: #eaf5ff; box-shadow: var(--shadow); background: linear-gradient(155deg, #0c2d4a 0%, #12456e 46%, #0a2136 100%); } .au-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 6% 0%, rgba(120, 200, 255, .26), transparent 58%); } .ah-tail { position: absolute; right: -3%; top: 2%; width: 300px; height: 300px; color: #08233c; opacity: .4; pointer-events: none; } .ah-tail svg { width: 100%; height: 100%; display: block; } .ah-in { position: relative; z-index: 1; flex: 1; min-width: 0; } .au-hero h1 { margin: 0 0 8px; font-family: var(--serif); font-size: 30px; line-height: 1.2; letter-spacing: .09em; font-weight: 600; } .ah-sub { margin: 0 0 14px; max-width: 52ch; font-size: 12.5px; line-height: 1.8; color: #b7d6ee; } .ah-stats { display: flex; flex-wrap: wrap; gap: 18px; font-size: 11.5px; color: #9dc0da; } .ah-stats b { margin-right: 4px; font-family: var(--serif); font-size: 16px; color: #eaf5ff; font-variant-numeric: tabular-nums; } /* 发布二创：从深海头图右下搬到「作品墙」卡头 —— 入口贴着它要影响的那面墙。 卡头是浅底，按钮本体走 .btn.blue 的品牌渐变（夜间隔着 .wrap.deep 也照旧）， 这里只管摆位：桌面贴卡头右端，窄屏换行后仍靠右。 */ .au-new { flex: none; margin-left: auto; padding: 5px 14px; font-size: 12.5px; border-radius: 9px; } .card-hd.au-board-hd { justify-content: flex-start; flex-wrap: wrap; row-gap: 8px; gap: 10px; } .au-board-hd .more { margin-left: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 搜索从「作品类型」胶囊那排提到卡头（与插件库 .mkt-hd 同一套做法）： 标题与统计贴左，搜索吃掉中间的空白贴右侧，发布二创紧跟在搜索后面。 宽度是弹性的：卡宽够时到 300px 就停，变窄先缩搜索（min 150px）， 再窄就整行落到下一行、铺满宽度 —— 任何宽度下都不压住标题或按钮。 */ .au-board-hd .mkt-search { margin-left: auto; flex: 0 1 300px; min-width: 150px; padding: 4px 12px; } .au-board-hd .au-new { margin-left: 0; } @media (max-width: 760px) { .au-board-hd { gap: 8px 10px; } .au-board-hd .more { display: none; } /* 手机一行放不下三段：统计让位，数量在卡头下面还有 */ .au-board-hd .au-new { margin-left: auto; } /* 搜索换行后按钮仍贴右 */ .au-board-hd .mkt-search { flex: 1 1 100%; order: 3; min-width: 0; margin-left: 0; } } /* ---------- 工具栏 / 网格 ---------- */ .au-toolbar { border-top: 1px solid var(--line-2); padding: 10px 14px 6px; } .au-toolbar .chip .n { font-variant-numeric: tabular-nums; opacity: .7; margin-left: 2px; } .au-hint { margin-left: auto; font-size: 11.5px; color: var(--txt-3); } .au-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 14px; padding: 4px 14px 16px; } /* ---------- 作品卡 ---------- */ .au-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); } .au-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: #c3d8ea; } html[data-theme="night"] .au-card:hover { border-color: #2d4256; } .au-card:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; } .au-media-wrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0b1d2e; } .au-media-wrap > .au-svg, .au-media-wrap > .au-img { display: block; width: 100%; height: 100%; object-fit: cover; } .au-media-wrap > .au-media { position: absolute; inset: 0; } .au-kind { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 2px 7px; border-radius: 5px; font-size: 10.5px; letter-spacing: .06em; color: #dceeff; background: rgba(8, 24, 40, .58); border: 1px solid rgba(220, 238, 255, .22); backdrop-filter: blur(4px); } .au-gif { position: absolute; right: 8px; top: 8px; z-index: 2; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: #0a2136; background: #9fe0ff; } /* 只索引：不存图，就用斜纹底 + 一句实话。这是本页最该被看见的异常状态 */ .au-3d { position: absolute; inset: 0; background: #071722; } .au-3d canvas { display: block; width: 100%; height: 100%; } .au-3d.big { position: static; aspect-ratio: 16 / 10; } .au-badge3d { position: absolute; left: 8px; bottom: 8px; padding: 2px 7px; border-radius: 20px; font-size: 9.5px; letter-spacing: .04em; color: #dff1ff; background: rgba(6, 22, 36, .62); border: 1px solid rgba(160, 210, 245, .28); backdrop-filter: blur(4px); } .au-media.is-index { display: flex; align-items: center; justify-content: center; text-align: center; background: repeating-linear-gradient(135deg, rgba(120, 160, 190, .12) 0 8px, transparent 8px 16px), var(--card-2); } .ix-in { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 14px; } .ix-mark { padding: 3px 9px 3px 11px; border: 1px solid currentColor; border-radius: 3px; transform: rotate(-3deg); font-family: var(--serif); font-size: 12px; letter-spacing: .24em; color: var(--rose); } html[data-theme="night"] .ix-mark { color: var(--rose-ink); } .ix-in p { margin: 0; font-size: 11.5px; color: var(--txt-3); } .ix-go { font-size: 11px; color: var(--link); } .au-tx { padding: 10px 12px 9px; min-width: 0; } .au-tx h3 { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--txt); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .au-tx p { margin: 5px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--txt-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 展签：原作 + 授权印章。衬线字 + 卡片底色，和下面的发布行分开 */ .au-plate { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px 9px; border-top: 1px dashed var(--line); background: var(--card-2); } .au-plate-link { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; color: inherit; text-decoration: none; } a.au-plate-link:hover b { text-decoration: underline; text-underline-offset: 3px; } .au-plate .lb { flex: none; padding-top: 1px; font-family: var(--serif); font-size: 10px; letter-spacing: .2em; color: var(--txt-3); } .au-plate b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--serif); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: var(--txt); } .au-plate .pf { flex: none; padding: 1px 5px; border-radius: 4px; font-size: 10px; color: var(--brand-ink); background: rgba(23, 117, 200, .08); border: 1px solid rgba(23, 117, 200, .18); } .au-plate .pf.in { color: #0a7a58; background: rgba(10, 122, 88, .08); border-color: rgba(10, 122, 88, .22); } html[data-theme="night"] .au-plate .pf.in { color: var(--ok-ink); } .au-stamp { flex: none; margin-left: auto; padding: 2px 6px; border: 1px solid currentColor; border-radius: 3px; transform: rotate(-4deg); font-size: 10px; line-height: 1.5; letter-spacing: .06em; white-space: nowrap; } .au-stamp.own { color: #0f63b4; } .au-stamp.ok { color: #0a7a58; } .au-stamp.open { color: #9a6200; } .au-stamp.index { color: #c22252; } html[data-theme="night"] .au-stamp.own { color: #6dc0ff; } html[data-theme="night"] .au-stamp.ok { color: var(--ok-ink); } html[data-theme="night"] .au-stamp.open { color: #e8b96a; } html[data-theme="night"] .au-stamp.index { color: var(--rose-ink); } .au-stamp.tiny { font-size: 9.5px; padding: 1px 5px; } /* 发布者行：小一号、界面字、无底色 —— 明确「这行不是作者」 */ .au-by { display: flex; align-items: center; gap: 6px; padding: 7px 12px 9px; border-top: 1px solid var(--line-2); font-size: 11px; color: var(--txt-3); } .au-by .av { flex: none; width: 16px; height: 16px; border-radius: 50%; } .au-by .lb { font-size: 10px; letter-spacing: .16em; color: var(--txt-3); opacity: .8; } .au-by b { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 500; color: var(--txt-2); } .au-by time { font-size: 10.5px; opacity: .85; } .au-num { margin-left: auto; font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* 悬停时气泡才浮起来：静止的墙不该整页在动 */ @keyframes auRise { from { transform: translateY(0); opacity: .45; } to { transform: translateY(-16px); opacity: 0; } } .au-card:hover .au-bub { animation: auRise 3.4s linear infinite; } /* ---------- 发布框 ---------- */ .au-form { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 14px 16px 18px; } .af-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .af-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; border: 1.5px dashed var(--line); border-radius: 10px; background: var(--card-2); transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out); } .af-drop:hover, .af-drop.drop-hot { border-color: var(--brand-2); background: rgba(63, 157, 232, .06); } .af-drop.has { border-style: solid; padding: 0; } .af-drop img { width: 100%; height: 100%; object-fit: contain; background: #08182a; } .af-plus { font-size: 26px; line-height: 1; color: var(--brand-2); } .af-drop b { font-size: 12px; font-weight: 500; color: var(--txt-2); } .af-tip { padding: 0 10px; font-size: 10.5px; line-height: 1.5; text-align: center; color: var(--txt-3); } .af-drop-act { display: flex; gap: 8px; } .af-note { margin: 0; font-size: 10.5px; line-height: 1.6; color: var(--txt-3); } .af-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .af-row { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--txt-2); } .af-row > span { font-size: 11.5px; letter-spacing: .02em; color: var(--txt-3); } .af-row input, .af-row textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--txt); font-size: 12.5px; font-family: inherit; resize: vertical; } .af-row input:focus, .af-row textarea:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(63, 157, 232, .14); } .af-row i { align-self: flex-end; font-size: 10.5px; font-style: normal; color: var(--txt-3); } .af-seg { display: inline-flex; align-self: flex-start; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; } .af-seg button { padding: 7px 14px; border: 0; background: transparent; color: var(--txt-2); font-size: 12px; font-family: inherit; cursor: pointer; transition: background var(--dur-2), color var(--dur-2); } .af-seg button.on { background: var(--brand); color: #fff; } .af-src { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .af-src .af-row:last-child { grid-column: 1 / -1; } .af-own-tip { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--txt-2); } .af-own-tip b { color: var(--txt); } .perm-chips { display: flex; flex-wrap: wrap; gap: 8px; } .perm-chip { padding: 5px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); font-size: 11.5px; font-family: inherit; color: var(--txt-2); cursor: pointer; transition: border-color var(--dur-2), background var(--dur-2), color var(--dur-2); } .perm-chip:hover { border-color: var(--brand-2); } .perm-chip.on.ok { color: #0a7a58; border-color: rgba(10, 122, 88, .45); background: rgba(10, 122, 88, .08); } .perm-chip.on.open { color: #9a6200; border-color: rgba(154, 98, 0, .45); background: rgba(154, 98, 0, .08); } .perm-chip.on.index { color: var(--rose); border-color: rgba(194, 34, 82, .45); background: rgba(194, 34, 82, .07); } html[data-theme="night"] .perm-chip.on.ok { color: var(--ok-ink); } html[data-theme="night"] .perm-chip.on.open { color: #e8b96a; } html[data-theme="night"] .perm-chip.on.index { color: var(--rose-ink); } .af-perm-tip { margin-top: 1px; font-size: 10.5px; font-style: normal; color: var(--txt-3); } .af-agree { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--card-2); font-size: 11.5px; line-height: 1.65; color: var(--txt-2); cursor: pointer; } .af-agree input { flex: none; margin-top: 2px; } .af-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .af-count { margin-left: auto; font-size: 10.5px; color: var(--txt-3); } /* ---------- 作品详情页（#/art/）：3D 舞台 + 展签 + 评论 ---------- */ .ad-back { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 10px; font-size: 12px; color: var(--txt-2); text-decoration: none; } .ad-back:hover { color: var(--brand); } .ad { overflow: hidden; margin-bottom: 14px; } .ad-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; min-height: 300px; background: #071722; } .ad-stage > .au-img, .ad-stage > .au-svg, .ad-stage > .au-3d { display: block; width: 100%; height: 100%; object-fit: cover; } .ad-stage > .au-media { position: absolute; inset: 0; } .ad-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; } .ad-canvas:active { cursor: grabbing; } .ad-3dbar { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; } .ad-3dbtn { padding: 5px 9px; border-radius: 7px; border: 1px solid rgba(160, 210, 245, .3); background: rgba(8, 24, 38, .62); color: #dff1ff; font-size: 11px; font-family: inherit; cursor: pointer; backdrop-filter: blur(4px); transition: background var(--dur-2); } .ad-3dbtn:hover { background: rgba(16, 44, 66, .8); } .ad-3dbtn.ghost { background: rgba(8, 24, 38, .34); } .ad-cap { position: absolute; left: 12px; bottom: 10px; display: flex; align-items: center; gap: 7px; max-width: calc(100% - 24px); padding: 4px 10px; border-radius: 20px; font-size: 10.5px; color: #cfe6f7; background: rgba(6, 20, 32, .55); backdrop-filter: blur(6px); } .ad-cap .b { padding: 1px 5px; border-radius: 4px; background: rgba(120, 190, 240, .22); font-size: 9.5px; letter-spacing: .08em; } .ad-hint3d { position: absolute; right: 12px; bottom: 10px; margin: 0; font-size: 10px; color: rgba(207, 230, 247, .66); } .ad-info { display: grid; gap: 10px; padding: 16px 18px 14px; } .ad-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ad-hd h1 { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 1.3; letter-spacing: .03em; color: var(--txt); } .ad-kind { padding: 2px 8px; border-radius: 20px; background: rgba(23, 117, 200, .08); color: var(--brand-ink); font-size: 10.5px; } .ad-desc { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--txt-2); } .ad-tags { display: flex; flex-wrap: wrap; gap: 6px; } .ad-tags span { padding: 2px 6px; border-radius: 4px; font-size: 10.5px; color: var(--brand-ink); background: rgba(23, 117, 200, .07); } .ad-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--txt-3); font-variant-numeric: tabular-nums; } .ad-meta b { color: var(--txt-2); font-weight: 500; } .ad-note { margin: 0; padding: 8px 10px; border-left: 2px solid var(--brand-2); border-radius: 0 7px 7px 0; background: var(--card-2); font-size: 11px; line-height: 1.7; color: var(--txt-2); } .ad-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 2px; } .ad-plate { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); } .wt { padding: 14px 22px 16px; min-width: 0; } .wt + .wt { border-left: 1px solid var(--line-2); } .wt h3 { margin: 0 0 6px; font-size: 10px; font-weight: 500; letter-spacing: .22em; color: var(--txt-3); } .wt-name { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-family: var(--serif); font-size: 15px; color: var(--txt); } .wt-name .av { border-radius: 50%; } .wt-pf { padding: 1px 5px; border: 1px solid rgba(23, 117, 200, .2); border-radius: 4px; font-family: var(--sans); font-size: 10px; color: var(--brand-ink); } .wt-meta { margin: 0 0 4px; font-size: 11px; color: var(--txt-3); } .wt-lic { margin: 8px 0 0; padding: 7px 9px; border-radius: 7px; background: var(--card-2); font-size: 11px; line-height: 1.65; color: var(--txt-2); } .wt-lic b { display: block; margin-bottom: 3px; font-size: 10px; font-weight: 500; letter-spacing: .14em; color: var(--txt-3); } .wt .au-stamp { display: inline-block; margin: 10px 0 0; } .aw-go { display: inline-block; margin-top: 2px; font-size: 11.5px; color: var(--link); text-decoration: none; } .aw-go:hover { text-decoration: underline; } .aw-fine { margin-left: auto; max-width: 52ch; font-size: 10.5px; line-height: 1.6; color: var(--txt-3); } /* ---------- 评论：发表 / 回复 / 删除 / 审核中 ---------- */ .ad-cm { overflow: hidden; } .cm-hd { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line-2); } .cm-hd .t { font-size: 13px; font-weight: 600; color: var(--txt); } .cm-hd .n { padding: 0 6px; border-radius: 20px; background: var(--card-2); font-size: 11px; color: var(--txt-3); font-variant-numeric: tabular-nums; } .cm-hd .more { margin-left: auto; font-size: 10.5px; color: var(--txt-3); } .cm-form { display: grid; gap: 8px; padding: 14px 18px 12px; border-bottom: 1px solid var(--line-2); background: var(--card-2); } .cm-form textarea, .cm-replybox textarea { width: 100%; box-sizing: border-box; resize: vertical; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--txt); font-family: inherit; font-size: 12.5px; line-height: 1.7; } .cm-form textarea:focus, .cm-replybox textarea:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(23, 117, 200, .1); } .cm-row { display: flex; align-items: center; gap: 10px; } .cm-tip { margin-right: auto; font-size: 10.5px; color: var(--txt-3); } .cm-guest { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--txt-2); } .cm-list { padding: 2px 18px 14px; } .cm-item { display: grid; grid-template-columns: 28px 1fr; gap: 9px; padding: 12px 0; border-top: 1px dashed var(--line-2); } .cm-list > .cm-item:first-child { border-top: 0; } .cm-av .av { border-radius: 50%; } .cm-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11.5px; } .cm-nick { font-weight: 600; color: var(--txt); } .cm-me { padding: 0 4px; border-radius: 3px; background: rgba(23, 117, 200, .1); color: var(--brand-ink); font-size: 9.5px; } .cm-when { color: var(--txt-3); font-size: 10.5px; } .cm-pend { padding: 0 5px; border-radius: 3px; background: rgba(200, 130, 20, .12); color: #a06a10; font-size: 9.5px; } .cm-text { margin: 4px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--txt-2); white-space: pre-wrap; word-break: break-word; } .cm-reason { margin: 4px 0 0; font-size: 10.5px; color: #a06a10; } .cm-item.is-pend .cm-text { color: var(--txt-3); font-style: italic; } .cm-acts { display: flex; gap: 12px; margin-top: 5px; } .cm-link { font-size: 11px; color: var(--link); text-decoration: none; } .cm-link:hover { text-decoration: underline; } .cm-del { color: var(--rose); } .cm-kids { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--line-2); display: grid; } .cm-kids .cm-item { padding: 8px 0; } .cm-replybox { margin-top: 8px; display: grid; gap: 8px; } .cm-empty { padding: 24px 6px; text-align: center; font-size: 12px; color: var(--txt-3); } html[data-theme="night"] .cm-pend, html[data-theme="night"] .cm-reason { color: #e8b96a; } /* ---------- 响应式 ---------- */ @media (max-width: 1080px) { .ad-stage { aspect-ratio: 4 / 3; min-height: 240px; } } @media (max-width: 760px) { .au-hero { flex-wrap: wrap; align-items: flex-start; padding: 18px 16px 16px; } .au-hero h1 { font-size: 24px; } .ah-tail { width: 210px; height: 210px; top: -8%; right: -14%; } .ah-sub { font-size: 11.5px; line-height: 1.7; } .au-grid { grid-template-columns: 1fr; padding: 0 10px 12px; } .au-toolbar { padding-left: 10px; padding-right: 10px; } .au-hint { display: none; } .au-form { grid-template-columns: 1fr; padding: 12px; } .af-drop { aspect-ratio: 16 / 10; } .af-src { grid-template-columns: 1fr; } .ad-plate { grid-template-columns: 1fr; } .ad-stage { aspect-ratio: 4 / 3; min-height: 210px; } .ad-hint3d { display: none; } .cm-hd .more { display: none; } .ad-info { padding: 14px 12px 12px; } .cm-form, .cm-list { padding-left: 12px; padding-right: 12px; } .wt + .wt { border-left: 0; border-top: 1px solid var(--line-2); } .aw-fine { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .au-card, .au-card:hover { transform: none; } .au-card:hover .au-bub { animation: none; } } /* ══════════════════════════════════════════════════════════════════ v24：人物卡的动画场景铺满整张头图（v23 的「右侧竖条」拆掉） ────────────────────────────────────────────────────────────────── 左半边不再自己画底色：卡 `?embed=1&bare=1` 以 inset:0 铺满整块， 深海底 / 光晕 / 尾影 / 气泡都是卡里那一套，左右本来就是同一块布， 没有接缝要对——v23 那条左缘 90deg mask 因此删掉（它会把左半个场景挖成半透明）。 鲸鱼娘在卡内可拖到最左边缘与顶部，宿主这边只叠文案： 整块 pointer-events:none，只有按钮例外，所以在文字上按住也能拖。 ══════════════════════════════════════════════════════════════════ */ .whale-slot { position: absolute; inset: 0; width: auto; height: auto; margin: 0; overflow: hidden; border-radius: inherit; background: #0a2136; z-index: 0; } .whale-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; } /* ---------- 首页头图：动画铺满 732×208，文案贴左上、账号行贴左下 ---------- */ .cover { height: 208px; border-color: rgba(127, 211, 255, .14); background: linear-gradient(155deg, #0c2d4a 0%, #12456e 46%, #0a2136 100%); } /* 两条 scrim 都做成渐隐，不留硬边：左边托文案、底边托账号行 */ .cover::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(4, 16, 31, .72) 0%, rgba(4, 16, 31, .40) 34%, rgba(4, 16, 31, 0) 64%); } .cover::after { background: linear-gradient(180deg, rgba(4, 16, 31, 0) 46%, rgba(4, 16, 31, .62) 100%); } /* 浅蓝底时代的白云与静态尾影，深海底上会浮成两块白斑 */ .cover .cloud, .cover .tail-wm { display: none; } .cover-txt { left: 26px; right: auto; top: 26px; bottom: auto; max-width: min(58%, 520px); color: #eaf4ff; } .cover-txt h1 { font-size: 23px; color: #f4faff; text-shadow: 0 2px 14px rgba(3, 11, 22, .7); } .cover-txt p { color: #cfe3f4; text-shadow: 0 1px 10px rgba(3, 11, 22, .6); } .cover .me { left: 26px; right: auto; bottom: 22px; align-items: center; } .cover .me .nm { text-align: left; margin-bottom: 0; color: #e3f1ff; text-shadow: 0 1px 10px rgba(3, 11, 22, .65); } .cover .me .av { border-color: rgba(234, 245, 255, .8); box-shadow: 0 10px 22px -8px rgba(2, 10, 20, .65); } /* 文案整块不吃指针，点击/拖拽穿透到卡里；只有按钮自己收回来 */ .cover-txt, .cover .me { pointer-events: none; } .cover-txt a, .cover-txt button, .cover .me a { pointer-events: auto; } /* ---------- 鲸鲸空间头图：同一块布，文案压在左下 ---------- */ .au-hero { align-items: flex-end; } .au-hero::before { z-index: 1; background: radial-gradient(120% 100% at 6% 0%, rgba(120, 200, 255, .26), transparent 58%), linear-gradient(100deg, rgba(4, 16, 31, .58) 0%, rgba(4, 16, 31, .28) 36%, rgba(4, 16, 31, 0) 66%); } .au-hero .ah-in { z-index: 2; align-self: flex-end; max-width: min(62%, 620px); pointer-events: none; } .au-hero .ah-in a, .au-hero .ah-in button { pointer-events: auto; } .ah-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .au-hero { padding-bottom: 28px; } .ah-foot .ah-stats { flex: 1; min-width: 0; } /* ---------- 响应式 ---------- */ @media (max-width: 760px) { /* 首页：头图 200 高、动画铺满，文案收窄，账号行只留头像与登录键 */ .cover { height: 200px; } .cover-txt { left: 16px; top: 16px; max-width: 68%; } .cover-txt h1 { font-size: 18px; } .cover-txt p { font-size: 11.5px; } .cover .me { left: 16px; bottom: 12px; } .cover .me .nm { display: none; } /* 鲸鲸空间：文案单列压在场景上，不再把卡顶到文案上方 */ .au-hero { padding: 18px 16px 16px; } .au-hero .ah-in { max-width: none; } .ah-foot { gap: 10px; } .ah-foot .ah-stats { justify-content: space-between; gap: 10px; } /* 作品墙卡头：手机上三段排不进一行 —— 统计让位，标题与「发布二创」同排靠右 */ .card-hd.au-board-hd { padding: 9px 12px; } .au-board-hd .more { display: none; } .au-new { padding: 5px 12px; font-size: 12px; } /* 作品墙工具栏：胶囊换行后搜索整行铺开，不再缩在右半边（与插件库卡头同一套收法） */ .au-toolbar .mkt-search { flex: 1 1 100%; order: 3; min-width: 0; margin-left: 0; } } /* ══════════════════════════════════════════════════════════════ v24 · 标签页（#/tags）—— 参考 linux.do /tags 的信息结构移植 参考页的顺序是：顶部筛选框 → 按 tag group 分节 → 每节「标签 + 话题数」→ 点标签进那个标签的话题列表。这里保留同一套结构，配色全部走本站变量， 所以白天 / 夜间自动成立，也不新增任何依赖。 命名与站内既有类名不冲突：热门标签卡用的是 .tag-plain（不可交互的展示胶囊）， 这里可点的标签统一叫 .tagchip —— 两套控件在同一页（社群左栏 + 本页）并存时， 回归测试仍能按 .tag-plain 数出「十个热门标签」，不会被标签页的按钮污染。 ══════════════════════════════════════════════════════════════ */ /* 卡内工具条：搜索 + 提示（+ 有搜索词时的「清空搜索」） */ .tags-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--line-2)} .tags-search{ display:flex;align-items:center;gap:7px;background:var(--card-2);border:1px solid var(--line); border-radius:18px;padding:5px 13px;flex:0 1 260px;min-width:150px;cursor:text; } .tags-search .ic{font-size:12px;opacity:.7} .tags-search input{border:0;background:none;outline:0;font-size:12.5px;color:var(--txt);width:100%;font-family:inherit} .tags-search:focus-within{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(23,117,200,.22)} html[data-theme="night"] .tags-search:focus-within{border-color:#2f7ebb;box-shadow:0 0 0 3px rgba(90,170,255,.28)} .tags-tip{font-size:11.5px;color:var(--txt-3)} .tags-tip .tags-hit{color:var(--brand-ink);font-weight:700} html[data-theme="night"] .tags-tip .tags-hit{color:#6cc0ff} /* 已选条：标签 × + 组合规则 + 两个出口。社群页那条是同一套样式（.forum-picked） */ .tags-picked{ display:flex;align-items:center;gap:7px;flex-wrap:wrap; padding:9px 16px;border-bottom:1px solid var(--line-2);background:var(--card-2); } .tags-picked .tk{font-size:11.5px;color:var(--txt-3);font-weight:600} .tags-picked .btn{margin-left:0} .tags-picked .tags-goto{margin-left:auto} .tags-mode{display:flex;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:2px} .tags-mode-btn{ border:0;background:none;color:var(--txt-3);cursor:pointer;font-family:inherit; font-size:11.5px;padding:3px 9px;border-radius:9px; } .tags-mode-btn:hover{color:var(--link)} .tags-mode-btn.on{background:#e7f3ff;color:var(--brand-deep);font-weight:700} html[data-theme="night"] .tags-mode-btn.on{background:#12314c;color:#6cc0ff} /* 标签按钮：一颗 = # 名 计数。空标签（0 帖）淡一点但仍可点 —— 点进去看空态 比「点了没反应」清楚，也让「这个板块刚开」这件事自己说出来 */ .tagchip{ display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-family:inherit; border:1px solid var(--line-2);background:var(--card-2);color:var(--txt-2); border-radius:10px;padding:4px 9px;font-size:12.5px;line-height:1.35; transition:background-color var(--dur-1) ease,color var(--dur-1) ease,border-color var(--dur-1) ease,box-shadow var(--dur-2) ease; } .tagchip .hash{color:var(--txt-3);font-weight:700;opacity:.75} .tagchip .n{font-size:11px;color:var(--txt-3);font-variant-numeric:tabular-nums} .tagchip:hover{border-color:#b9d9f2;color:var(--link)} .tagchip.on{background:linear-gradient(180deg,var(--brand),var(--brand-deep));color:#fff;border-color:transparent;font-weight:700;box-shadow:0 5px 12px -6px rgba(23,117,200,.7)} .tagchip.on .hash,.tagchip.on .n{color:rgba(255,255,255,.86)} .tagchip.is-empty{opacity:.62} .tagchip.is-empty:hover{opacity:1} .tagchip.sm{padding:3px 8px;font-size:11.5px;border-radius:9px} .tagchip.sm .n{font-size:10.5px} .tagchip .x{font-size:12px;opacity:.8;margin-left:1px} /* 分组：一节 = 标题 + 一句说明 + 标签云（超过 14 个折叠） */ .tags-body{padding:4px 16px 14px} .tags-group{padding:14px 0;border-top:1px solid var(--line-2)} .tags-group:first-child{border-top:0;padding-top:8px} .tags-g-hd{display:flex;align-items:baseline;gap:8px} .tags-g-t{margin:0;font-size:13.5px;font-weight:700;color:var(--txt)} .tags-g-t::before{content:"";display:inline-block;width:3px;height:13px;border-radius:2px;margin-right:7px;vertical-align:-2px;background:linear-gradient(180deg,var(--brand-2),var(--brand))} .tags-g-n{font-size:11px;color:var(--txt-3);font-variant-numeric:tabular-nums} .tags-g-d{margin:5px 0 0 10px;font-size:11.5px;color:var(--txt-3)} .tags-cloud{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .tags-more{margin-top:10px;border:0;background:none;color:var(--link);cursor:pointer;font-family:inherit;font-size:11.5px;padding:2px 0;font-weight:600} .tags-more:hover{text-decoration:underline} .tags-empty-hint{margin-top:8px;font-size:11.5px;color:var(--txt-3)} /* 结果区：直接复用社群页的 .thread 行，所以这里只补外壳（行内边距由 .thread 自己带） */ .tags-result{margin-top:10px} .tags-result-bd{padding:0} .tags-hd-n{font-weight:500} /* 右栏三张卡 */ .tags-help p{margin:0 0 8px;font-size:12px;color:var(--txt-2);line-height:1.6} .tags-help ul{margin:0;padding-left:16px;font-size:11.5px;color:var(--txt-3);line-height:1.7} .tags-help code{background:var(--card-2);border:1px solid var(--line-2);border-radius:5px;padding:0 4px;font-size:11px} .tags-stat{display:flex;flex-direction:column;gap:7px} .tags-stat-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--txt-2)} .tags-stat-row .k{color:var(--txt-3)} .tags-stat-row b{font-variant-numeric:tabular-nums;color:var(--txt)} /* 左栏热门标签卡底部的「全部标签 ›」入口（标签页的唯一入口） */ .rail-all{margin-top:6px;padding:6px 10px 4px;border-top:1px solid var(--line-2);font-size:11.5px} .rail-all a{color:var(--link);cursor:pointer;font-weight:600} .rail-all a:hover{text-decoration:underline} /* 窄桌面：左栏整体变横条，入口跟着那排胶囊一起横排（竖分割线代替上边框） */ @media (max-width:1240px){ .rail-all{ margin:0;padding:0 6px 0 10px;border-top:0;border-left:1px solid var(--line-2); display:flex;align-items:center;white-space:nowrap;align-self:stretch; } } @media (max-width:760px){ /* 手机：搜索整行铺开，已选条改成可横滑的一条（标签多时不把卡头顶成三行） */ .tags-bar{padding:10px 12px} .tags-search{flex:1 1 100%;order:1} .tags-tip{order:2} .tags-picked{padding:9px 12px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .tags-picked::-webkit-scrollbar{display:none} .tags-picked .tk{flex:0 0 auto} .tags-picked .tags-goto{margin-left:0} .tags-body{padding:4px 12px 12px} .tagchip{font-size:12px;padding:4px 8px} .tags-cloud{gap:6px} } /* ================= v27 · 空间标签条右侧动作组（发布插件并入编辑资料右侧） ================= 为什么这么摆：「+ 发布插件」原本趴在「插件」标签内容的顶上，自己占一整行； 「✎ 编辑资料」却在标签条右端 —— 同一类「对自己空间动手」的动作被拆成两个角落。 现在合成一组贴标签条右端：次要动作在左（编辑资料），主要动作最右（发布插件）， 和 GitHub 仓库页把 Watch / Star / Fork 收在标签条右侧是同一套逻辑。 宽度策略：标签 flex:0 0 auto 绝不缩字，动作组 flex:0 0 auto + margin-left:auto 吃中间空白； 放不下时整组换行贴右（不用横向滚动），到手机宽度再给整组一行。 */ .sp-tabs{flex-wrap:wrap;row-gap:6px} .sp-tabs .tab{flex:0 0 auto} .sp-acts{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto} .sp-acts .btn{flex:0 0 auto;white-space:nowrap} /* 发布是这一页的主按钮：给一点点阴影把它和「编辑资料」拉开层级，两个胶囊仍同一行同高 */ .sp-acts .sp-act-pub{box-shadow:0 6px 14px -10px var(--brand-deep)} /* 插件标签顶上那句「填表 → 上传安装包 → 等审核」：按钮搬走后只剩说明， 做成虚线提示条，别让它看起来像半截 CTA（半截 CTA 比没有更让人犹豫） */ .pub-note{ display:flex;align-items:flex-start;gap:9px;margin:12px 14px 2px;padding:9px 12px; border:1px dashed var(--line);border-radius:9px;background:var(--card-2); } .pub-note .pn-ic{flex:none;font-size:14px;line-height:1.55;opacity:.9} .pub-note p{margin:0;font-size:12px;line-height:1.6;color:var(--txt-2)} .pub-note b{margin-right:6px;color:var(--txt);font-weight:600} /* 深海（自己的空间/编辑资料都是这棵子树）：提示条改用海色令牌，别在深底上留一块白 */ .wrap.deep .pub-note{background:var(--sea-fill-soft);border-color:var(--sea-line)} .wrap.deep .pub-note p{color:var(--sea-txt-2)} .wrap.deep .pub-note b{color:var(--sea-ink-hi)} @media (max-width:760px){ /* .tabs 在窄屏默认是「横向滚动」容器：滚动容器里 flex-wrap 不生效，动作组会被推出可视区。 空间页这条改成可换行 —— 标签保持单行，动作组放不下时整条换到另一行。 */ .sp-tabs{overflow:visible;flex-wrap:wrap;padding:0 10px} .sp-tabs .spacer{display:none} .sp-acts{margin-left:auto;gap:7px} .pub-note{margin:10px 12px 2px} } /* v31：≤560 不再给动作组单开一行，直接和标签同一排（走 >560 那套规则：标签在左、 动作组 margin-left:auto 贴右）。v27/v30 里「一行装不下」的前提已经消失 —— 那时这一排还有「✎ 编辑资料」，两个胶囊要 422px；v29 把改资料入口搬进头像弹层后， 组里只剩「+ 发布插件」（实测 82.7px），四个标签 180px，合计 ≈ 265px： 390 档可用 362px、320 档可用 292px，都装得下，字号和内距都不用缩。 兜底：极窄视口（<320）真放不下时 .sp-tabs 的 flex-wrap 会把整组落到下一行贴右，不横滑。 */ @media (min-width:301px) and (max-width:340px){ /* 320 档：标签 180 + 胶囊 86.7 已经贴得很近，只把内距收窄一点换出 60px 呼吸空间，字号不动 */ .sp-tabs{padding:0 8px} .sp-tabs .tab{padding:10px 7px} .sp-tabs .tab.on::after{left:7px;right:7px} .sp-acts .btn{padding:4px 9px} } /* ================= v27 · 我的收藏 ================= 页面结构：hero（标题 + 总数）→ 卡内 tab 筛选 → 收藏行（左图 / 中名称简介 / 右动作）。 行本身是一个 grid：桌面三列，手机把动作组落到第二行整行右对齐； 图片列固定宽度，正文列 minmax(0,1fr) 保证长中文会换行而不是把动作按钮挤出卡片。 */ .fav-hero{ position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:18px; padding:20px 22px 18px;border:1px solid var(--line);border-radius:var(--r); background:radial-gradient(320px 140px at 100% 0,rgba(63,157,232,.18),transparent 70%),linear-gradient(135deg,#f7fbff,#eef6ff); box-shadow:var(--shadow);overflow:hidden; } .fav-hero::after{ content:"★";position:absolute;right:16px;top:-16px;font-size:94px;line-height:1; color:rgba(23,117,200,.08);transform:rotate(12deg);pointer-events:none; } .fav-hero-bd{min-width:0;position:relative;z-index:1} .fav-kicker{display:block;margin-bottom:3px;font-size:10.5px;font-weight:800;letter-spacing:1.6px;color:var(--brand-ink)} .fav-hero h1{margin:0;font-size:26px;line-height:1.25;letter-spacing:.2px;color:var(--txt)} .fav-hero p{margin:6px 0 0;max-width:46ch;font-size:12.5px;line-height:1.65;color:var(--txt-2)} .fav-total{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;flex:none;line-height:1.2} .fav-total b{font-size:34px;font-variant-numeric:tabular-nums;letter-spacing:-1px;color:var(--brand-ink)} .fav-total span{font-size:11.5px;font-weight:600;color:var(--txt-3)} .fav-total em{margin-top:5px;font-style:normal;font-size:11px;color:var(--txt-3);white-space:nowrap} .fav-page{overflow:hidden} .fav-tabs{padding:0 14px} .fav-tabs .tab .n{ display:inline-grid;place-items:center;min-width:18px;height:17px;margin-left:6px;padding:0 5px; border-radius:9px;background:var(--card-2);border:1px solid var(--line-2); font-size:10.5px;font-weight:700;color:var(--txt-3);font-variant-numeric:tabular-nums;vertical-align:1px; } .fav-tabs .tab.on .n{background:#e8f3ff;border-color:#c9e4fb;color:var(--brand-ink)} .fav-sort{padding-right:2px;font-size:11.5px;color:var(--txt-3);white-space:nowrap} .fav-list{display:flex;flex-direction:column} .fav-item{ position:relative; display:grid;grid-template-columns:84px minmax(0,1fr) auto; grid-template-areas:"thumb bd acts";gap:13px;align-items:center; padding:14px 16px;border-bottom:1px solid var(--line-2); transition:background-color var(--dur-1) ease,opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out); } .fav-item:last-child{border-bottom:0} .fav-item:hover{background:var(--card-2)} /* v42 · 整卡可点：一张透明按钮铺满卡片当点击区，「取消收藏」用 z-index 抬在上面。 不用外层 role="button" 包按钮 —— 那会把可聚焦控件嵌套进可聚焦控件里，读屏和 键盘都会打架。铺层是真正的