/* ============================================================================ YONETIX 社交 —— 登录 / 注册页样式 主色 = B 站粉；支持明暗两种主题(靠 切) 2026-09-27 改版: 全屏背景图 + 圆角毛玻璃面板 · 背景图原图 /www/wwwroot/www.shhhh.cn/img/dlzc.jpg (4000x2250) 上线用的是派生图 img/dlzc_1920.* / img/dlzc_{1024}.* 换图后跑 /root/shhh-ops/make_bg.py 重新生成派生图 · 桌面端面板靠右, 让人物留在左边不被挡住; 窄屏居中并加强蒙版 · 面板/输入框/验证弹窗统一用 backdrop-filter 毛玻璃 ============================================================================ */ :root{ --bg:#000; --bg-soft:#16181c; --bg-hover:#1c1f23; --line:#2f3336; --txt:#e7e9ea; --dim:#71767b; --mute:#536471; --blue:#FB7299; --blue-h:#e85f86; --grad:linear-gradient(135deg,#FB7299,#a48bff 55%,#ff7bc4); --ease:cubic-bezier(.16,1,.3,1); /* ---- 背景图层 ---- */ --bg-fallback:#101317; /* 图没到之前的兜底底色 */ --bg-image:url("/img/dlzc_1920.jpg"); --bg-pos:38% center; /* 人物略偏左, 右侧留白给面板 */ --bg-scrim:linear-gradient(100deg, rgba(8,10,14,.20) 0%, rgba(8,10,14,.36) 45%, rgba(8,10,14,.76) 100%); /* ---- 毛玻璃 ---- */ --glass-bg:rgba(14,16,20,.54); --glass-bg-solid:rgba(16,18,23,.82); /* 验证弹窗用, 要更实一点 */ --glass-brd:rgba(255,255,255,.16); --glass-hi:rgba(255,255,255,.12); /* 顶部高光 */ --glass-sheen:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,0) 46%); --glass-blur:28px; --hv-blur:24px; /* 验证弹窗的模糊半径(手机下调低, 见响应式) */ --glass-shadow:0 26px 70px rgba(0,0,0,.45); --lbl:#9aa4af; /* 表单小标签, 比 --dim 亮一点 */ --ph:#7f8b96; /* 输入框占位符 */ --input-bg:rgba(255,255,255,.07); --input-bg-focus:rgba(255,255,255,.12); --input-brd:rgba(255,255,255,.15); --track-bg:rgba(0,0,0,.34); } /* 明亮主题: 背景图很亮, 所以蒙版改成压白, 玻璃变成白玻璃 */ :root[data-theme="light"]{ --bg:#fff; --bg-soft:#f2f4f7; --bg-hover:#e9edf2; --line:#dfe4ea; --txt:#0f1419; --dim:#536471; --mute:#8b98a5; --blue:#f2547d; --blue-h:#e0416c; --grad:linear-gradient(135deg,#f2547d,#8b6bff 55%,#f0579c); --bg-fallback:#b2b3b8; --bg-scrim:linear-gradient(100deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.28) 45%, rgba(255,255,255,.62) 100%); --glass-bg:rgba(255,255,255,.56); --glass-bg-solid:rgba(255,255,255,.86); --glass-brd:rgba(255,255,255,.75); --glass-hi:rgba(255,255,255,.95); --glass-sheen:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,0) 52%); --glass-shadow:0 26px 60px rgba(15,20,25,.20); --lbl:#4a5b68; --ph:#8b98a5; /* 输入框占位符 */ --input-bg:rgba(255,255,255,.70); --input-bg-focus:rgba(255,255,255,.95); --input-brd:rgba(15,20,25,.14); --track-bg:rgba(255,255,255,.62); } *{margin:0;padding:0;box-sizing:border-box} html{ background:var(--bg-fallback); -webkit-text-size-adjust:100%; } body{ color:var(--txt);min-height:100vh;min-height:100dvh; font:15px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB", "Microsoft YaHei",system-ui,sans-serif; background:transparent; overflow-x:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:28px 0; } /* 背景图与蒙版做成两个固定层, 互不干扰, 毛玻璃也直接对它们取景 */ body::before{ content:"";position:fixed;inset:0;z-index:0; background-color:var(--bg-fallback); background-image:var(--bg-image); background-size:cover;background-position:var(--bg-pos);background-repeat:no-repeat; } body::after{ content:"";position:fixed;inset:0;z-index:0; background:var(--bg-scrim);pointer-events:none; } a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} input{font:inherit} /* 主题切换按钮(右上角, 也做成毛玻璃) */ .themefloat{ position:fixed;top:14px;right:14px;z-index:50; display:inline-flex;align-items:center;gap:7px; padding:8px 14px;border-radius:999px;cursor:pointer; background:var(--glass-bg);border:1px solid var(--glass-brd);color:var(--dim); font-size:13.5px; -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); box-shadow:0 6px 20px rgba(0,0,0,.18); } .themefloat:hover{background:var(--glass-bg-solid);color:var(--txt)} .themefloat svg{display:block} /* ---------------------------------------------------------------- 玻璃面板 */ .wrap{ position:relative;z-index:1; width:100%;max-width:452px; margin:0 auto; padding:30px 26px 26px; border-radius:26px; background:var(--glass-bg); background-image:var(--glass-sheen); border:1px solid var(--glass-brd); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(165%); backdrop-filter:blur(var(--glass-blur)) saturate(165%); box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi); animation:wrapIn .5s var(--ease) both; } @keyframes wrapIn{ from{opacity:0;transform:translateY(16px) scale(.985)} to{opacity:1;transform:none} } /* 桌面端: 面板靠右, 人物留在左侧 */ @media (min-width:1000px){ body{padding-right:clamp(20px,7vw,120px)} .wrap{margin-left:auto;margin-right:0} } /* 品牌 */ .brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px} .brand .mark{ width:40px;height:40px;border-radius:12px;display:grid;place-items:center; background:var(--grad);font-weight:800;font-size:21px;color:#fff;line-height:1; box-shadow:0 4px 18px rgba(251,114,153,.38); } .brand .wordmark{ font-size:21px;font-weight:800;letter-spacing:.6px; background:var(--grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } h1{font-size:27px;font-weight:800;letter-spacing:-.4px;margin-bottom:18px} /* 表单本身不再单独成卡片, 直接长在玻璃面板上(避免卡片套卡片) */ .card{background:none;border:none;border-radius:0;padding:0} .fld{display:block;margin-bottom:14px} .fld > span{display:block;font-size:13px;color:var(--lbl);margin-bottom:6px} .fld input{ width:100%;padding:13px 14px;border-radius:12px; background:var(--input-bg);border:1px solid var(--input-brd);color:var(--txt);outline:none; transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease); } .fld input:focus{ border-color:var(--blue);background:var(--input-bg-focus); box-shadow:0 0 0 3px rgba(251,114,153,.16); } .fld input::placeholder{color:var(--ph)} .fld .hint{font-size:12px;color:var(--mute);margin-top:5px} .chk{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--lbl);margin:2px 0 16px;cursor:pointer} /* 自绘勾选框: 系统默认那个白方块在深色玻璃上很难看 */ .chk input{ -webkit-appearance:none;appearance:none; flex:0 0 auto;width:18px;height:18px;border-radius:6px; background:var(--input-bg);border:1.5px solid var(--input-brd); cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease); } .chk input:checked{ background:var(--blue) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px 12px no-repeat; border-color:var(--blue); } .chk input:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .btn{ width:100%;padding:14px;border-radius:999px;background:var(--blue);color:#fff; font-weight:700;font-size:16px; box-shadow:0 8px 22px rgba(251,114,153,.28); transition:background .18s var(--ease),opacity .18s var(--ease),transform .18s var(--ease); } .btn:hover:not(:disabled){background:var(--blue-h);transform:translateY(-1px)} .btn:active:not(:disabled){transform:none} .btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none} .alt{margin-top:16px;font-size:14px;color:var(--dim);text-align:center} /* 顶部提示条 */ .alert{ padding:11px 14px;border-radius:12px;font-size:14px;margin-bottom:16px; background:rgba(244,33,46,.14);border:1px solid rgba(244,33,46,.38);color:#ff9aa2; } .alert[hidden]{display:none} .alert.ok{background:rgba(0,186,124,.14);border-color:rgba(0,186,124,.38);color:#5ee0a8} :root[data-theme="light"] .alert{color:#c0272d} :root[data-theme="light"] .alert.ok{color:#0a7a52} /* ---------------------------------------------------- 滑块验证弹窗(毛玻璃) */ .hv-mask{ position:fixed;inset:0;z-index:99;display:grid;place-items:center; background:rgba(0,0,0,.50); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); padding:16px; animation:hvMaskIn .18s ease-out both; /* 遮罩淡入 */ } .hv-mask[hidden]{display:none} .hv-box{ width:min(320px,calc(100vw - 24px)); background:var(--glass-bg-solid); border:1px solid var(--glass-brd); border-radius:18px; padding:16px; -webkit-backdrop-filter:blur(var(--hv-blur)) saturate(160%); backdrop-filter:blur(var(--hv-blur)) saturate(160%); box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 var(--glass-hi); transform-origin:50% 62%; /* 从底部一点弹出, 更像"弹窗" */ /* 注意: 入场动画不在这里 —— 由 .hv-open 触发(题目就绪那一刻), 见下方 原因: 早先是在显示遮罩时就播, 那时框里是空的, 用户根本看不出"弹"; */ } /* 遮罩淡入(立刻给出反馈) */ @keyframes hvMaskIn{from{opacity:0}to{opacity:1}} /* ---- 阶段一: 打开瞬间就弹(框里已有骨架/标题, 所以"弹"看得见) ---- */ @keyframes hvPopIn{ from{opacity:0;transform:translateY(26px) scale(.58)} to {opacity:1;transform:none} } .hv-mask.hv-open .hv-box{ animation:hvPopIn .5s cubic-bezier(.32,2.05,.6,1) both; /* 峰值约超出 8% */ } /* 骨架: 拉取题目期间占住尺寸并微微流光(框体高度不变, 题目到达时不会跳) */ .hv-mask.hv-loading .hv-stage{ min-height:140px; background:linear-gradient(100deg, rgba(255,255,255,.035) 30%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.035) 70%); background-size:220% 100%; animation:hvShimmer 1.05s linear infinite; } @keyframes hvShimmer{from{background-position:130% 0}to{background-position:-130% 0}} .hv-mask.hv-loading .hv-track{opacity:.4;pointer-events:none} /* ---- 阶段二: 题目就绪 → 图片从下方浮入(第二个可感知的动作) ---- */ @keyframes hvRiseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .hv-mask.hv-ready .hv-stage{animation:hvRiseIn .38s var(--ease) both} /* ---- 关闭: 缩小淡出(由 JS 加 .hv-closing, 动画结束后才真正 hidden) ---- */ .hv-mask.hv-closing{animation:hvMaskOut .19s ease-in both} @keyframes hvMaskOut{from{opacity:1}to{opacity:0}} .hv-mask.hv-closing .hv-box{ animation:hvPopOut .19s cubic-bezier(.45,0,.75,.25) both; } @keyframes hvPopOut{ from{opacity:1;transform:translateY(0) scale(1)} to {opacity:0;transform:translateY(10px) scale(.82)} } /* 标题/说明随弹窗一起上浮 */ .hv-mask.hv-open .hv-box h3, .hv-mask.hv-open .hv-sub{animation:hvRiseIn .32s var(--ease) .04s both} .hv-mask.hv-open .hv-track{animation:hvRiseIn .32s var(--ease) .12s both} .hv-mask.hv-open .hv-msg, .hv-mask.hv-open .hv-foot{animation:hvRiseIn .32s var(--ease) .16s both} /* 收起时内容跟着父级一起淡出, 不要再各播各的浮现延迟 */ .hv-mask.hv-closing .hv-stage, .hv-mask.hv-closing .hv-track, .hv-mask.hv-closing .hv-box h3, .hv-mask.hv-closing .hv-sub, .hv-mask.hv-closing .hv-msg, .hv-mask.hv-closing .hv-foot{animation:none} .hv-box h3{font-size:15.5px;font-weight:800;margin-bottom:3px} .hv-sub{font-size:12.5px;color:var(--dim);margin-bottom:11px} .hv-stage{ position:relative;border-radius:11px;overflow:hidden; border:1px solid var(--line);background:#0d0f12; line-height:0; /* 消掉 img 底部空隙 */ touch-action:none; } .hv-stage img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none} .hv-piece{position:absolute;left:0;will-change:left} .hv-track{ position:relative;margin-top:11px;height:40px;border-radius:999px; background:var(--track-bg);border:1px solid var(--input-brd);overflow:hidden; } .hv-fill{ position:absolute;left:0;top:0;bottom:0;width:0; background:linear-gradient(90deg,rgba(251,114,153,.42),rgba(251,114,153,.16)); transition:width .05s linear; } .hv-txt{ position:absolute;inset:0;display:grid;place-items:center; font-size:12.5px;color:var(--mute);pointer-events:none; } .hv-knob{ position:absolute;left:3px;top:3px;width:36px;height:32px;border-radius:9px; background:var(--blue);color:#fff;display:grid;place-items:center; font-size:17px;font-weight:700;cursor:grab; box-shadow:0 4px 14px rgba(251,114,153,.36); transition:background .18s var(--ease); touch-action:none;user-select:none; } .hv-knob:active{cursor:grabbing} .hv-knob.done{background:#00ba7c} .hv-msg{margin-top:10px;font-size:12.5px;min-height:17px;color:#ff8a93} .hv-msg.ok{color:#5ee0a8} .hv-foot{margin-top:6px;display:flex;justify-content:flex-end} .hv-foot button{font-size:12.5px;color:var(--dim)} .hv-foot button:hover{color:var(--txt)} /* 校验中 */ .hv-track.loading .hv-knob{opacity:.35} .hv-track.loading .hv-txt{color:var(--blue)} /* ---------------------------------------------------------------- 响应式 */ /* 999 以下: 面板改为居中/贴底, 蒙版由横向压暗改成上下压暗 */ @media (max-width:999px){ :root{ --bg-scrim:linear-gradient(180deg, rgba(8,10,14,.32) 0%, rgba(8,10,14,.52) 38%, rgba(8,10,14,.74) 100%); } :root[data-theme="light"]{ --bg-scrim:linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.52) 38%, rgba(255,255,255,.76) 100%); } } /* 700 以下(手机): 换成竖版裁剪图, 面板贴底, 让人物脸留在面板上方 */ @media (max-width:700px){ body{padding:14px 0 0;justify-content:flex-start} .wrap{ max-width:none; margin:auto 14px 14px; /* margin-top:auto → 面板压到屏幕底部 */ padding:18px 16px 16px;border-radius:22px; --glass-blur:18px; /* 手机降低模糊半径, 省电 */ } :root{ --bg-pos:50% 50%; --bg-image:url("/img/dlzc_m.jpg"); /* 手机专用竖版裁剪 */ --hv-blur:16px; /* 缩放整个毛玻璃面板时要逐帧重算模糊, 手机调低省电 */ --bg-scrim:linear-gradient(180deg, rgba(8,10,14,.08) 0%, rgba(8,10,14,.30) 34%, rgba(8,10,14,.74) 100%); } :root[data-theme="light"]{ --bg-scrim:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.26) 34%, rgba(255,255,255,.72) 100%); } /* 手机竖屏高度紧张: 整块压紧, 保证人物脸露在面板上方、表单不被切 */ .brand{margin-bottom:12px} .brand .mark{width:32px;height:32px;border-radius:10px;font-size:17px} .brand .wordmark{font-size:17px} h1{font-size:20px;margin-bottom:12px} .fld{margin-bottom:9px} .fld > span{font-size:12.5px;margin-bottom:4px} .fld input{padding:11px 12px;font-size:15px} /* 15px 以下 iOS 会放大页面 */ .fld .hint{font-size:11px;margin-top:3px} .chk{margin:0 0 12px;font-size:13.5px} .btn{padding:12px;font-size:15px} .alt{margin-top:10px;font-size:13px} } /* 内容比屏幕高时(小屏横屏)允许滚动, 别把按钮切掉 */ @media (max-height:560px){ body{justify-content:flex-start} } @media (prefers-reduced-motion:reduce){ /* 关动效偏好: 去掉位移动画, 但保留淡入淡出 —— 否则用户完全看不到任何反馈 */ .hv-mask.hv-open .hv-box{animation:hvFadeIn .2s ease-out both} .hv-mask.hv-open .hv-stage, .hv-mask.hv-open .hv-track, .hv-mask.hv-open .hv-box h3, .hv-mask.hv-open .hv-sub, .hv-mask.hv-open .hv-msg, .hv-mask.hv-open .hv-foot{animation:hvFadeIn .2s ease-out both} .wrap{animation:none} .hv-stage{animation:none} .btn:hover:not(:disabled){transform:none} } @keyframes hvFadeIn{from{opacity:0}to{opacity:1}} /* ------------------------------------------------- 支持 WebP 时优先用 WebP (放在最后: 上面已给 jpg 兜底, 不支持 image-set 的浏览器忽略整段) */ @supports (background-image: image-set(url("/x.webp") type("image/webp"))){ :root{ --bg-image:image-set( url("/img/dlzc_1920.webp") type("image/webp"), url("/img/dlzc_1920.jpg") type("image/jpeg")); } @media (max-width:700px){ :root{ --bg-image:image-set( url("/img/dlzc_m.webp") type("image/webp"), url("/img/dlzc_m.jpg") type("image/jpeg")); } } }