/* 深色主题页面的壁纸层 + 背景控件（2026-09-20 新增） ============================================================================ 为什么需要这个文件： /jobs /track /advisor /recruit /plans 等页是**各页内联的不透明深色主题**， 既不引 style.css（于是没有 --bg-image 的消费点），也没挂 /ui.js —— 结果「背景轮换」只在引了 style.css 的毛玻璃页（/、/alumni、/admin、/ops） 生效，用户看到的就是「只有学长毕业去向会换背景」。 做法是两层，**缺一不可**： ① 壁纸挂在 html 的两个伪元素上（图片层 z-index:-2 + 压暗层 z-index:-1）； ② 把 body 的不透明背景去掉 —— 这不是可选优化，而是必需： 层叠顺序里 html::before 画在 **body 背景之下**，body 只要还留着一层不透明的 linear-gradient，壁纸就会被整块盖住（"改了 CSS 却完全没反应"就是这么来的）。 可读性优先：这些页是密集表格，壁纸只当环境色用 —— 先高斯模糊 + 压暗再透出， 文字对比度由不透明的压暗层兜住（tools/check-wallpaper.mjs 会真机量）。 浅色页（status.html）给 ，改用浅色底与浅色压暗层。 ============================================================================ */ :root { --bg-image: none; --bg-base: #0b0e18; /* 没有壁纸时的兜底底色 */ --bg-scrim-a: rgba(15, 19, 32, .62); /* 压暗层（上） */ --bg-scrim-b: rgba(11, 14, 24, .78); /* 压暗层（下） */ --bg-photo-filter: blur(26px) saturate(1.2) brightness(.72); } html { background: var(--bg-base); } /* 壁纸层：四周外扩 40px，避免高斯模糊后视口边缘出现一圈"虚边" */ html::before { content: ''; position: fixed; inset: -40px; z-index: -2; pointer-events: none; background-image: var(--bg-image, none); background-size: cover; background-position: center center; background-repeat: no-repeat; filter: var(--bg-photo-filter); } /* 压暗层：主题底色（半透明）叠在壁纸之上、内容之下 */ html::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--bg-scrim-a), var(--bg-scrim-b)); } /* 浅色页（如 /status）：白色卡片 + 深色文字，压暗层必须反过来用浅色 */ html.bg-light { --bg-base: #eef1f6; --bg-scrim-a: rgba(238, 241, 246, .70); --bg-scrim-b: rgba(233, 237, 244, .82); --bg-photo-filter: blur(30px) saturate(1.05) brightness(1.04); } /* ---------- 背景控件（style.css 里那份是毛玻璃页专用的浅色版，这里给深色版； 不写这段的话 ui.js 注入的 🖼 按钮会是个没有样式的默认按钮） ---------- */ .bgctl { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .bg-fab { width: 44px; height: 44px; padding: 0; font-size: 19px; border-radius: 50%; cursor: pointer; background: rgba(28, 34, 50, .74); color: #e8ebf2; border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 8px 24px rgba(0, 0, 0, .38); line-height: 1; } .bg-fab:hover { background: rgba(40, 48, 68, .88); } .bg-panel { width: min(300px, calc(100vw - 24px)); padding: 16px; border-radius: 16px; text-align: left; background: rgba(18, 22, 34, .94); color: #e8ebf2; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 16px 44px rgba(0, 0, 0, .5); } .bg-h { font-weight: 600; margin-bottom: 6px; font-size: 14px; } .bg-now { font-size: 12.5px; color: #9aa3b2; margin-bottom: 12px; } .bg-up, .bg-reset { display: block; width: 100%; text-align: center; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; cursor: pointer; box-sizing: border-box; font-family: inherit; } .bg-up { background: #2f6f86; color: #fff; margin-bottom: 8px; border: 0; } .bg-up:hover { background: #3b8299; } .bg-reset { background: rgba(255, 255, 255, .12); color: #e8ebf2; border: 1px solid rgba(255, 255, 255, .2); } .bg-reset:hover { background: rgba(255, 255, 255, .2); } .bg-msg { font-size: 12px; color: #7fb6c9; min-height: 18px; margin-top: 8px; } .bg-tip { font-size: 11.5px; color: #9aa3b2; line-height: 1.6; } .bg-sub { font-size: 12px; color: #9aa3b2; margin: 10px 0 6px; } .bg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 224px; overflow-y: auto; padding: 2px; } .bg-thumb { position: relative; padding: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px; background: rgba(255, 255, 255, .06); overflow: hidden; cursor: pointer; aspect-ratio: 16 / 10; } .bg-thumb:hover { filter: brightness(1.12); } .bg-thumb.on { border-color: #5d8ea3; box-shadow: 0 0 0 2px rgba(93, 142, 163, .45); } .bg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .bg-thumb span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; font-size: 10px; color: #fff; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .68)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bg-thumb i { position: absolute; top: 3px; left: 3px; font-style: normal; font-size: 9.5px; padding: 1px 5px; border-radius: 999px; background: #2f6f86; color: #fff; } .bg-empty { font-size: 12px; color: #9aa3b2; padding: 8px 2px; } @media (max-width: 860px) { .bgctl { right: 12px; bottom: 12px; } .bg-grid { grid-template-columns: repeat(3, 1fr); } }