/* 登录页：淡蓝色液态玻璃。 故意不复用 app.css —— 这一页要在网络最差的时候第一个到， 为了几个样式拖 50 KB 不值。变量在这里单独写一份，很短。 这一页固定浅色，不跟看板那个日/夜开关走： 看板是盯一天的工作面，深色更护眼；登录页只看三秒，淡蓝玻璃更好看。 玻璃要立得住得同时有三样： 1. 底下有东西可以透 —— body::before 那四团蓝调柔光 2. 面本身半透明 + backdrop-filter 把底下的光揉开 3. 边缘一圈高光 —— 上沿亮、下沿暗，这是「玻璃」和「毛玻璃贴纸」的分界 再加一层斜向的高光扫过卡面（.card::before），才有「一块厚玻璃」的体积感。 */ :root{ --bg:#E3EDFA; /* 卡面只留一层很薄的白。白得越少、透得越多， 就越靠边缘高光和那道斜光来告诉你「这儿有块玻璃」 */ --glass:rgba(246,251,255,.26); --glass-edge:rgba(255,255,255,.70); /* 边缘那圈亮线 */ --field:rgba(246,251,255,.32); --field-line:rgba(255,255,255,.58); /* 字也带一点蓝调，别在蓝底上用中性灰 —— 中性灰压在蓝上会显脏，带点蓝的灰才跟背景是一家人 */ --fg:#121926; --dim:#3D4657; --dim2:#556174; --ph:#8A96A8; /* 整页都是蓝了，按钮得再深一档才跳得出来 */ --accent:#0B57C9; --accent-dk:#083F97; --tintA:rgba(11,87,201,.16); --sell:#C22A1E; /* 上沿一条亮线 + 下沿一条暗线 = 玻璃的厚度 */ --hi:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(60,90,140,.12), inset 1px 0 0 rgba(255,255,255,.55), inset -1px 0 0 rgba(255,255,255,.35); --pop:0 1px 2px rgba(20,50,100,.08), 0 14px 34px rgba(20,50,100,.15), 0 44px 90px rgba(20,50,100,.20); /* 底下那层光。卡面透了之后这层就是主角 —— 你看到的颜色全是它透上来的。 四团都在蓝家族里，但得拉开色相（青→天蓝→靠紫的蓝）—— 全用同一个蓝的话模糊完就是一块死色，玻璃没东西可折 */ --aur1:rgba(126,206,240,.52); /* 浅青 */ --aur2:rgba( 92,158,246,.56); /* 天蓝（最重的一团）*/ --aur3:rgba(146,168,250,.46); /* 靠紫的蓝 */ --aur4:rgba(168,224,246,.42); /* 冰蓝 */ --aur5:rgba(255,255,255,.58); /* 卡背后那团白，把字托住 */ } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{height:100%;margin:0} body{ background:var(--bg);color:var(--fg); font:14px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", sans-serif; -webkit-font-smoothing:antialiased; display:flex;align-items:center;justify-content:center;padding:22px; } /* 四团很大的柔光，固定不动 —— 做成动画会让整页每帧重绘背景， 为了一个登录页不值这个电 */ body::before{ content:'';position:fixed;inset:-22vmax;z-index:-2;pointer-events:none; background: radial-gradient(46vmax 38vmax at 16% 12%, var(--aur1), transparent 60%), radial-gradient(52vmax 44vmax at 84% 6%, var(--aur2), transparent 58%), radial-gradient(44vmax 40vmax at 78% 86%, var(--aur3), transparent 60%), radial-gradient(42vmax 36vmax at 8% 88%, var(--aur4), transparent 60%), /* 正中间一团白：卡就压在这儿。卡面只剩 26% 的白了， 背后没一块亮底的话，深色的字会直接踩在彩光上 */ radial-gradient(30vmax 26vmax at 50% 48%, var(--aur5), transparent 66%); filter:blur(36px); } /* 极光上面只罩很薄一层白纱。原来这层是 55%，把颜色都粉掉了， 看着像一张白纸而不是一块玻璃 */ body::after{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(160deg, rgba(238,246,255,.24), rgba(238,246,255,.06) 45%, rgba(232,242,255,.28)); } .card{ position:relative;overflow:hidden; width:min(348px,100%);padding:30px 26px 24px;border-radius:28px; background:var(--glass); border:1px solid var(--glass-edge); box-shadow:var(--pop), var(--hi); /* 白少了就得把模糊和饱和提上去： 模糊负责把底下揉开（字才读得下去），饱和负责让透上来的颜色不发灰 */ backdrop-filter:blur(34px) saturate(240%); -webkit-backdrop-filter:blur(34px) saturate(240%); } /* 斜着扫过卡面的一道高光 —— 玻璃的体积感全靠它 */ .card::before{ content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(145deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.16) 34%, rgba(255,255,255,0) 58%, rgba(255,255,255,.14) 100%); } .card > *{position:relative} /* 显卡不支持 backdrop-filter 时补成不透明白，否则字会糊在极光上 */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .card{background:rgba(247,251,255,.93)} } .brand{text-align:center;margin-bottom:24px} .brand .mark{ display:inline-flex;align-items:center;justify-content:center; width:52px;height:52px;border-radius:17px;font-size:25px;font-weight:700; color:var(--accent); background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.18)); border:1px solid rgba(255,255,255,.75); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 6px 16px rgba(20,50,100,.12), inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(80,90,110,.10); } .brand b{display:block;margin-top:13px;font-size:18px;letter-spacing:-.02em} .brand .sub{display:block;margin-top:4px;font-size:11px;color:var(--dim2)} .fld{display:block;margin-bottom:13px} .fld span{display:block;font-size:11px;color:var(--dim2);margin-bottom:6px} .fld input{ width:100%;padding:12px 14px;border-radius:14px; background:var(--field);border:1px solid var(--field-line);color:var(--fg); font:15px inherit;letter-spacing:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 2px 6px rgba(40,70,120,.08); backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%); transition:border-color .15s, box-shadow .15s, background .15s; } .fld input::placeholder{color:var(--ph)} .fld input:focus{ outline:none;background:rgba(250,253,255,.55); border-color:var(--accent); box-shadow:0 0 0 4px var(--tintA), inset 0 1px 0 rgba(255,255,255,.9); } .go{ position:relative;overflow:hidden; width:100%;margin-top:8px;padding:13px;border:0;border-radius:14px;cursor:pointer; background:linear-gradient(180deg,var(--accent),var(--accent-dk)); color:#fff;font:15px inherit;font-weight:600;letter-spacing:.02em; box-shadow:0 8px 20px rgba(11,87,201,.32), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.12); transition:filter .15s, transform .06s, box-shadow .15s; } .go:hover{filter:brightness(1.06)} .go:active{transform:scale(.985);box-shadow:0 4px 12px rgba(11,87,201,.28), inset 0 1px 0 rgba(255,255,255,.30)} .go:disabled{filter:grayscale(.35) opacity(.6);cursor:default} .msg{min-height:18px;margin-top:11px;text-align:center;font-size:12px;color:var(--dim2)} .msg.bad{color:var(--sell);font-weight:590} .foot{margin-top:9px;text-align:center;font-size:11px;color:var(--dim2);opacity:.85}