/* 汉中中学91级校友录 — 极简淡雅 */ :root{ --bg:#F7F7F5; --surface:#FFFFFF; --surface-2:#FBFBF9; --line:#E9E9E4; --line-soft:#F0F0EC; --line-hover:#D8D8D2; --ink:#2E3336; --ink-2:#6B7280; --ink-3:#9BA1A8; --accent:#6E8B9E; --accent-soft:#EAF0F3; --warm:#C3A88C; --accent-deep:#4F6B7C; --accent-line:#C9D8E0; --on-accent:#FFFFFF; --name-hl:#D2691E; /* 首页几个动态副标题里的会员名（橙色） */ --card:#FFFFFF; /* 首页登录卡用；原来没定义，等于没背景 */ /* ★ 下面这几组原来只在沙盒副本里有定义、源码漏了（变量化时只换了引用没补定义）， 导致顶栏背景/抽屉遮罩/取色板边框在线上是"空值"。2026-10-19 补回。 */ --topbar-bg:rgba(247,247,245,.86); --mask:rgba(20,24,28,.34); --edge:#D9D9D3; --glow-1:#E7EEF2; --glow-2:#EDEFF4; --glow-3:#F1EDE8; /* 捐赠角标（金色小 e）—— 2026-10-19 补回，原先是硬编码色，变量化时漏了定义 */ --don-glow:#FFFDF6; --don-soft:#FBF4E2; --don-soft-2:#F1E0B4; --don-ink:#E8940A; --don-line:#B9B2A2; --don-line-on:#D9820A; /* 「生日快乐」七彩闪烁七色（中等偏深，浅底上不糊） */ --rain-1:#E23A34; --rain-2:#E17E12; --rain-3:#B58A0A; --rain-4:#2E9B4E; --rain-5:#128E9E; --rain-6:#2563C8; --rain-7:#8E45C0; --radius:14px; --radius-sm:9px; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif; --serif:"Songti SC","STSong",Georgia,"SimSun",serif; --shadow:0 1px 2px rgba(46,51,54,.04), 0 8px 24px rgba(46,51,54,.05); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans); font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img{max-width:100%} .wrap{max-width:1080px;margin:0 auto;padding:0 28px} /* 顶栏 */ .topbar{position:sticky;top:0;z-index:20;background:var(--topbar-bg); backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)} .topbar-in{display:flex;align-items:center;justify-content:space-between;height:62px} .brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.01em} .brand-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px; background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700;font-family:var(--serif)} .brand-logo{height:34px;width:auto;display:block} /* 首页登录卡 */ .home-login-card{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center; background:var(--card);border:1px solid var(--line);border-radius:14px;padding:34px 38px} .hl-intro h2{margin:0 0 12px;font-size:21px} .hl-intro p{margin:0 0 12px;color:var(--ink-2);font-size:14px;line-height:1.8} .hl-tip{font-size:13px !important;color:var(--ink-3) !important} .hl-tip a{color:var(--accent)} .hl-form .field{margin-bottom:14px} .field-check{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink-2); line-height:1.5;margin:2px 0 16px;cursor:pointer} .field-check input{margin-top:2px} @media (max-width:760px){.home-login-card{grid-template-columns:1fr;padding:26px 22px}} .brand-text{font-size:15px} /* ★ 顶栏的间距全部用 margin 不用 flex gap：老手机浏览器（iOS<14.5 等） 不支持 flex gap，会全部塌成 0 —— 导航挤成"首页同学相册留言教室"。 （2026-10-19 用户反馈截图。margin 所有浏览器都支持。） */ .nav{display:flex;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)} .nav > a{position:relative;padding:2px 0;margin-right:26px;transition:color .18s; white-space:nowrap;flex-shrink:0} .nav a:hover{color:var(--ink)} .nav a.is-active{color:var(--accent)} .nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-19px;height:2px; background:var(--accent);border-radius:2px} /* 首屏 */ .hero{padding:58px 0 6px;text-align:center} .hero-eyebrow{font-size:12.5px;letter-spacing:.14em;color:var(--ink-3);margin:0 0 20px;text-transform:uppercase} .hero-title{font-family:var(--serif);font-size:40px;line-height:1.35;font-weight:600; letter-spacing:.02em;margin:0 0 18px;color:var(--ink)} .hero-desc{font-size:15.5px;color:var(--ink-2);max-width:560px;margin:0 auto 34px} .stats{display:flex;justify-content:center;gap:0;border:1px solid var(--line);border-radius:var(--radius); background:var(--surface);overflow:hidden;max-width:620px;margin:0 auto} .stat{flex:1;padding:20px 8px;border-right:1px solid var(--line-soft)} .stat:last-child{border-right:0} .stat b{display:block;font-size:24px;font-weight:600;color:var(--accent);letter-spacing:-.01em} .stat span{font-size:12px;color:var(--ink-3)} /* 区块 */ .sec{margin:28px 0 0} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px; padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:24px} .sec-title{font-size:17px;font-weight:600;margin:0;letter-spacing:.01em} .sec-sub{font-size:13px;color:var(--ink-3);margin:5px 0 0} /* 副标题里的会员名（灌水王 / 很久没来 / 瞄了一眼）—— 2026-09-24 用户要求： 去掉引号、橙色、不加粗。底色是浅米白（var(--bg)），橙色取偏深一档 （#D2691E 对比度约 3.4:1），13px 小字不加粗也不糊。 ★ 类名 au-gold 是当天先做成金色时的命名，故意沿用不改：改类名就要连 inc\site.asp 的返回值一起动，而分批上传时"新 index.asp + 旧 site.asp" 会认不出标记 → 把 span 当纯文本转义输出。只改颜色/字重零风险。 */ .au-gold{color:var(--name-hl)} .sec-more{font-size:13px;color:var(--accent);white-space:nowrap} .sec-more:hover{color:var(--ink)} .mt-lg{margin-top:52px} /* 首页「最近留言」右侧的快速留言：一个单行框 + 紧挨着的按钮 + 「全部留言 →」。 只给这一个区块加了 flex-wrap（.sec-head-q），免得改动其它页面的 sec-head 版式。 */ .sec-head-q{flex-wrap:wrap} .quick-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end} .quick-form{display:flex;align-items:center;gap:8px} .quick-in{width:190px;padding:7px 13px;font:inherit;font-size:13px;color:var(--ink); background:var(--surface);border:1px solid var(--line);border-radius:999px;outline:none; transition:border-color .18s,box-shadow .18s} .quick-in::placeholder{color:var(--ink-3)} .quick-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .quick-btn{padding:7px 15px;font:inherit;font-size:13px;line-height:1.4;color:var(--on-accent); background:var(--accent);border:1px solid var(--accent);border-radius:999px; cursor:pointer;white-space:nowrap;transition:background .18s,opacity .18s} .quick-btn:hover{background:var(--accent-deep);border-color:var(--accent-deep)} .quick-btn:active{opacity:.86} @media (max-width:720px){ /* 窄屏：输入框占满一行，按钮和「全部留言 →」跟在下面 */ .sec-head-q{align-items:stretch} .sec-head-q .quick-bar{width:100%;justify-content:space-between;flex-wrap:nowrap} .sec-head-q .quick-form{flex:1;min-width:0} .sec-head-q .quick-in{width:auto;flex:1;min-width:0} } /* 留言 */ .msg-list{list-style:none;margin:0;padding:0} .msg{display:flex;gap:14px;padding:18px 14px;border-radius:var(--radius); border-bottom:1px solid var(--line-soft);transition:background .18s} .msg:last-child{border-bottom:0} .msg:hover{background:var(--surface)} .avatar{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:11px; font-size:15px;font-weight:600;font-family:var(--serif)} .msg-body{flex:1;min-width:0} .msg-meta{display:flex;align-items:baseline;gap:10px;margin:0 0 4px} .msg-meta b{font-size:13.5px;font-weight:600} .msg-meta span{font-size:12px;color:var(--ink-3)} .msg-title{font-size:13.5px;font-weight:600;margin:0 0 3px;color:var(--ink)} .msg-text{margin:0;font-size:14px;color:var(--ink-2);word-break:break-word} .msg-text blockquote{margin:8px 0;padding:6px 0 6px 12px;border-left:2px solid var(--line); color:var(--ink-3);font-size:13.5px} /* 首页「最近留言」：桌面端每排 2 条、共 6 条（只挂首页，board/student 的列表不受影响） 2026-09-28 用户给截图调整：白卡配色（米白底上浮白卡片）+ 方块间距收紧 */ .msg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .msg-grid .msg{background:var(--surface);border:1px solid var(--line-soft); border-radius:var(--radius);padding:13px 15px} .msg-grid .msg:hover{border-color:var(--line)} /* 首页「生日快乐」走马灯（2026-10-08 用户要求：恢复滚动、名字后面带月日； 同日再改：不要无缝，也不管留白 —— 有几人生日就显示几人的信息） 结构：.bday-box > .bday-marquee（裁切窗口）> .bday-track（轨道，只有一份内容） ★ 轨道里【只有一份】内容，不做任何复制：一条信息从右边进来、往左走光， 紧接着下一条（其实是同一份）又从右边进来。人少时卡片里会有一段空着 —— 用户明确说不管留白，就这样。 ★ 起点 from = 视口右缘外（translateX(100vw) 字面量，不写 css 变量）： 老版本 Safari / 手机 WebView 不支持在 @keyframes 里解析 var()，会导致整条 动画失效（桌面 Chrome/新版 Safari 正常，真机老浏览器不动）；用 100vw 字面量 全浏览器通用，且 100vw >= 卡片宽，起点永远在窗口右边外，观感一致。 终点 to = -100%，即"自身宽度"向外 —— 整条刚好完全移出卡片左侧。 ★ 方向：内容自右侧进入、从左侧移出（跑马灯的常规观感，阅读顺序也自然）。 要反方向就把 bd-scroll 的 from/to 两个值对调。 ★ 一轮的秒数由脚本按实际宽度算（约 60 像素/秒，内容长就走得久一点）， 写成内联的 animation-duration —— 所以这里只给动画名、曲线和次数，不给时长。 ★ 悬停暂停：名字多的时候想看清谁是哪天，鼠标放上去就停住，不用等一圈。 */ /* 生日框装饰（B 方案 · 2026-10-23）：白→暖白渐变底 + 暖色描边 + 顶部四色丝带 + 右下角淡淡气球，营造温馨礼盒感；纯静态装饰，不新增动画（老手机不吃性能）。 装饰都绝对定位 + overflow:hidden 裁在圆角内，不会撑出横向滚动； 滚动窗口 .bday-marquee 与占位 .bd-one 都抬到 z-index:2，压在装饰上方。 */ .bday-box{position:relative;overflow:hidden;isolation:isolate; background:linear-gradient(180deg,#FFFFFF 0%,#FFFDF8 100%); border:1px solid #EFE6D6;border-radius:var(--radius);padding:15px 18px; box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px rgba(190,150,100,.10)} .bday-box::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:1; pointer-events:none; background:linear-gradient(90deg,#F2A65A 0%,#EE7F8B 34%,#C99AE8 66%,#7FC8C0 100%);opacity:.85} .bday-box::after{content:"";position:absolute;right:16px;bottom:6px;width:74px;height:52px;z-index:1; pointer-events:none;opacity:.5; background: radial-gradient(circle at 26% 30%, rgba(238,127,139,.55) 0 8px, transparent 9px), radial-gradient(circle at 58% 20%, rgba(242,166,90,.55) 0 7px, transparent 8px), radial-gradient(circle at 76% 46%, rgba(127,200,192,.55) 0 6px, transparent 7px)} .bday-marquee{overflow:hidden;position:relative;z-index:2} .bday-box > .bd-one{position:relative;z-index:2} .bday-track{display:inline-block;white-space:nowrap;will-change:transform} .bday-marquee.is-marquee .bday-track{ animation-name:bd-scroll;animation-timing-function:linear;animation-iteration-count:infinite} .bday-marquee.is-marquee:hover .bday-track{animation-play-state:paused} @keyframes bd-scroll{from{transform:translateX(100vw)}to{transform:translateX(-100%)}} /* 一条信息内部：名字加粗、月日用次色、条目之间用间隔点分开 */ .bd-one{font-size:14px;color:var(--ink-2);line-height:1.9} .bd-one b{font-weight:600;color:var(--ink)} .bd-sep{color:var(--ink-3);margin:0 16px} /* 系统里关掉了动效的用户：停在原地，内容照常能读 */ @media (prefers-reduced-motion: reduce){ .bday-marquee.is-marquee .bday-track{animation:none} } /* 手机上气球收一点，别抢文字宽度（窄屏文字更金贵） */ @media (max-width:680px){ .bday-box::after{right:8px;width:56px} } /* 「生日快乐」七彩闪烁（2026-09-28 用户要求）：四个字各占一个 span， color 在七个色相间循环，每个字延迟错开 -> 颜色像波浪一样流过四个字。 ★ 七色都取中等偏深的明度（浅米白底上亮黄/亮青会糊），色相首尾接回红色 才能无缝循环。用负延迟：页面一打开就是错开的彩字，不用等第一圈。 ★ 不用 background-clip:text 做渐变文字 —— 老浏览器不支持会整句消失； 纯 color 动画兼容性好得多。emoji 与叹号不参与。 */ .bd-rainbow span{display:inline-block;font-weight:600; animation:bd-hue 2.6s linear infinite;text-shadow:0 0 1px currentColor} .bd-rainbow span:nth-child(1){animation-delay:0s} .bd-rainbow span:nth-child(2){animation-delay:-.65s} .bd-rainbow span:nth-child(3){animation-delay:-1.3s} .bd-rainbow span:nth-child(4){animation-delay:-1.95s} @keyframes bd-hue{ 0%{color:var(--rain-1)} 14%{color:var(--rain-2)} 28%{color:var(--rain-3)} 42%{color:var(--rain-4)} 56%{color:var(--rain-5)} 70%{color:var(--rain-6)} 84%{color:var(--rain-7)} 100%{color:var(--rain-1)} } /* 网格 */ .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease} .card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-hover)} /* 照片 */ .ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px} .ph-grid-lg{grid-template-columns:repeat(auto-fill,minmax(222px,1fr))} .ph{display:block;overflow:hidden;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease} .ph:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-hover)} .photo{display:grid;place-items:center;width:100%;aspect-ratio:1/1;font-family:var(--serif); font-size:15px;letter-spacing:.06em;text-align:center;padding:14px;line-height:1.5} .ph-grid-lg .photo{aspect-ratio:4/3;font-size:17px} .ph-meta,.ph-card figcaption{display:flex;flex-direction:column;gap:2px;padding:11px 13px} .ph-card figcaption{padding:12px 14px 14px} .ph-title{font-size:13.5px;font-weight:600} .ph-sub{font-size:12px;color:var(--ink-3)} .ph-meta span{font-size:11.5px;color:var(--ink-3)} .ph-card{padding:0;overflow:hidden;margin:0} .ph-card .photo{border-radius:0} .ph-review{font-size:12px;color:var(--ink-3);line-height:1.6;margin-top:2px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* 话题 */ .topic-list{list-style:none;margin:0;padding:0} .topic,.topic-item{border-bottom:1px solid var(--line-soft)} .topic a,.topic-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px; width:100%;padding:14px 10px;background:none;border:0;font:inherit;text-align:left;cursor:pointer; transition:background .18s;border-radius:var(--radius-sm)} .topic a:hover,.topic-head:hover{background:var(--surface)} .topic-title{font-size:14.5px;font-weight:500;color:var(--ink);min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .topic-meta{font-size:12px;color:var(--ink-3);white-space:nowrap} /* 窄屏分级瘦身（2026-09-24 用户要求）：宽度不够先减 meta、最后才截标题。 隐藏顺序（信息价值从低到高）：回复数 → 日期 → 板块 → 人名； 分隔符「·」放所在段的头/尾，段被隐藏时一起消失，不会留下孤儿点。 */ @media (max-width:720px){ .topic-meta .tm-replies{display:none} .topic a{gap:12px} } @media (max-width:620px){ .topic-meta .tm-date{display:none} } @media (max-width:520px){ .topic-meta .tm-forum{display:none} } @media (max-width:430px){ .topic a{gap:8px} .topic-meta{display:none} /* 人名也收掉，主题独享整行不截断 */ .topic-title{white-space:normal;overflow:visible;text-overflow:clip} } .topic-list-lg .topic-item{background:transparent} .topic-list-lg .topic-head{padding:16px 12px} .topic-detail{padding:4px 16px 22px;border-top:1px dashed var(--line-soft)} .topic-body{font-size:14px;color:var(--ink-2);line-height:1.85;margin:14px 0 0;word-break:break-word} .topic-body blockquote{margin:10px 0;padding:8px 0 8px 13px;border-left:2px solid var(--line); color:var(--ink-3);font-size:13.5px} .topic-foot{display:flex;gap:18px;font-size:12px;color:var(--ink-3);margin-top:14px; padding-top:12px;border-top:1px solid var(--line-soft)} .reply-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px} .reply{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm); padding:11px 14px} .reply b{font-size:13px;font-weight:600} .reply-time{font-size:11.5px;color:var(--ink-3);margin-left:9px} .reply-text{font-size:13.5px;color:var(--ink-2);margin-top:3px;word-break:break-word} /* 工具条 */ .page-head{padding:44px 0 26px;border-bottom:1px solid var(--line);margin-bottom:30px} .page-head h1{font-family:var(--serif);font-size:29px;font-weight:600;margin:0 0 10px;letter-spacing:.02em} .page-desc{margin:0;font-size:13.5px;color:var(--ink-2);max-width:640px} .page-desc b{color:var(--accent);font-weight:600} .toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px} /* ★ 老内核兜底（写法：先写普通色值，再写 var() 版本 —— 浏览器支持 var() 时用后者覆盖前者） 背景：--ink / --surface / --line 这些 CSS 变量在 IE 全系、以及 360 等浏览器的 "兼容模式"（IE 内核）下都不被支持。不支持时，浏览器会把整条声明丢掉 —— 而丢掉的恰好就是 background 和 border，于是输入框、文本域在页面上变成 "看不见的空白"，用起来就像"这里根本没有编辑框"。 所以这里给最关键的几个表单控件补一份不带 var() 的色值： 现代内核走 var()，老内核走这份兜底，两边都能看到框。 （页脚那条「您的浏览器内核过旧」只负责提醒，救不了版面，所以兜底要写在这里。） */ .input{color:var(--ink);background:var(--surface);border:1px solid var(--line); flex:1;min-width:230px;max-width:330px;height:38px;padding:0 14px;font:inherit;font-size:13.5px; color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;outline:none; transition:border-color .18s, box-shadow .18s} .input::placeholder{color:var(--ink-3)} .input::placeholder{color:var(--ink-3)} .input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{height:32px;padding:0 14px;font:inherit;font-size:13px;color:var(--ink-2);background:var(--surface); border:1px solid var(--line);border-radius:999px;cursor:pointer;transition:all .18s} .chip:hover{border-color:var(--line-hover);color:var(--ink)} .chip.is-on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:500} /* 同学卡 */ .student{display:flex;align-items:center;gap:12px;padding:14px;text-align:left;cursor:pointer; font:inherit;color:inherit} .student .avatar{flex-basis:42px;width:42px;height:42px;border-radius:12px;font-size:16px} .st-main{display:flex;flex-direction:column;min-width:0;gap:1px} .st-name{font-size:14.5px;font-weight:600} .st-sub{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px} .is-hidden{display:none !important} .empty{margin:34px 0;text-align:center;font-size:13.5px;color:var(--ink-3)} /* 抽屉 */ .drawer{position:fixed;inset:0;z-index:50} .drawer-mask{position:absolute;inset:0;background:var(--mask);backdrop-filter:blur(2px); animation:fade .22s ease} .drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(430px,92vw);background:var(--surface); border-left:1px solid var(--line);padding:34px 30px;overflow-y:auto;animation:slide .26s ease} @keyframes fade{from{opacity:0}} @keyframes slide{from{transform:translateX(18px);opacity:.5}} .drawer-close{position:absolute;top:18px;right:20px;width:32px;height:32px;border:0;border-radius:9px; background:var(--surface-2);color:var(--ink-3);font-size:19px;line-height:1;cursor:pointer;transition:all .18s} .drawer-close:hover{background:var(--accent-soft);color:var(--accent)} .dw-head{display:flex;align-items:center;gap:15px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:20px} .dw-head .avatar{flex-basis:56px;width:56px;height:56px;border-radius:15px;font-size:22px} .dw-name{font-family:var(--serif);font-size:21px;font-weight:600;margin:0 0 3px} .dw-sub{font-size:12.5px;color:var(--ink-3);margin:0} .dw-rows{display:flex;flex-direction:column} .dw-row{display:flex;gap:14px;padding:9px 0;font-size:13.5px;border-bottom:1px solid var(--line-soft)} .dw-row:last-child{border-bottom:0} .dw-row span{flex:0 0 74px;color:var(--ink-3);font-size:12.5px} .dw-row b{font-weight:500;color:var(--ink);word-break:break-all} .dw-info{margin-top:18px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line-soft); border-radius:var(--radius-sm);font-size:13.5px;color:var(--ink-2);line-height:1.8} .dw-stat{display:flex;gap:22px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)} .dw-stat div{display:flex;flex-direction:column} .dw-stat b{font-size:17px;font-weight:600;color:var(--accent)} .dw-stat span{font-size:11.5px;color:var(--ink-3)} /* 论坛卡：矮方卡（高度=宽度的七成）—— 电脑端一行四个、整行收窄 75% 且左边与正文对齐， 手机端两行两列、高度自适应不压字 */ .forum-grid{grid-template-columns:repeat(4,1fr);max-width:75%} .forum-card{display:flex;flex-direction:column;justify-content:center;gap:3px; aspect-ratio:10/7;padding:12px 15px} /* 老内核没有 aspect-ratio：退而求其次给个近似比例的最小高度 */ @supports not (aspect-ratio:1/1){ .forum-card{min-height:105px} } .forum-name{font-size:14px;font-weight:600} .forum-desc{font-size:12px;color:var(--ink-2)} .forum-meta{font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.65} @media (max-width:720px){ .forum-grid{grid-template-columns:repeat(2,1fr);max-width:none} .forum-card{aspect-ratio:auto;padding:14px 16px} } /* 关于 */ .facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:12px} .fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px; display:flex;flex-direction:column;gap:3px} .fact span{font-size:11.5px;color:var(--ink-3)} .fact b{font-size:14px;font-weight:600} .prose{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:26px 30px;font-size:14.5px;color:var(--ink-2);line-height:1.95;word-break:break-word} .prose p{margin:0 0 12px} .prose p:last-child{margin-bottom:0} .prose a{color:var(--accent);border-bottom:1px solid var(--accent-soft)} .prose blockquote{margin:12px 0;padding:8px 0 8px 14px;border-left:2px solid var(--line);color:var(--ink-3)} /* 页脚 */ .site-footer{margin-top:84px;padding:30px 0 46px;border-top:1px solid var(--line)} /* 2026-09-20：页脚整体居中，网站统计块（从首页顶部挪来）缩一号放页脚 */ .site-footer .wrap{text-align:center} .foot-line{margin:0 0 6px;font-size:13px;color:var(--ink-2)} .foot-dim{margin:4px 0 0;font-size:12px;color:var(--ink-3)} .foot-dim b{color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.02em} .foot-stats{margin:16px auto 4px;max-width:520px} .foot-stats .stat{padding:10px 6px} .foot-stats .stat b{font-size:17px} .foot-stats .stat span{font-size:11px} /* 页脚备案号：按规范链到工信部备案系统，颜色比正文再淡一点不抢眼 */ .foot-record{margin-top:6px} .foot-record a{color:var(--ink-3);border-bottom:1px solid transparent;transition:color .18s,border-color .18s} .foot-record a:hover{color:var(--accent);border-bottom-color:var(--accent)} @media (max-width:720px){ .wrap{padding:0 18px} .topbar-in{height:auto;flex-direction:column;align-items:flex-start;padding:12px 0} .nav{margin-top:9px;font-size:13px;overflow:visible;max-width:100%} .nav > a{margin:6px 17px 6px 0} .nav a.is-active::after{display:none} .hero{padding:36px 0 4px} .hero-title{font-size:29px} .stats{flex-wrap:wrap} .stat{flex:1 0 50%;border-bottom:1px solid var(--line-soft)} .stat:nth-child(2n){border-right:0} .page-head h1{font-size:24px} .prose{padding:20px 18px} } /* ========================================================================== 下面是 ASP 版新增的零件 ========================================================================== */ /* 顶栏右侧的登录区 */ .nav-userbox{margin-left:auto;display:flex;align-items:center; padding-left:16px;border-left:1px solid var(--line);white-space:nowrap;flex-shrink:0} .nav-userbox a{margin-left:14px} .nav-user{color:var(--ink);font-weight:600} .nav-user:hover{color:var(--accent)} .nav-join{color:var(--accent)} /* 按钮 */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px; height:36px;padding:0 16px;font:inherit;font-size:13.5px;color:var(--ink); background:var(--surface);border:1px solid var(--line);border-radius:10px; cursor:pointer;transition:all .18s;white-space:nowrap} .btn:hover{border-color:var(--line-hover);background:var(--surface-2)} .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--on-accent)} .btn-danger{color:var(--danger);border-color:var(--danger-line)} .btn-danger:hover{background:var(--danger-bg);border-color:var(--danger-line)} .btn-sm{height:30px;padding:0 12px;font-size:12.5px;border-radius:8px} .btn:disabled{opacity:.5;cursor:default} /* 表单 */ .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .field label{font-size:12.5px;color:var(--ink-2)} .field .hint{font-size:11.5px;color:var(--ink-3)} textarea.input{height:auto;min-height:118px;padding:11px 14px;line-height:1.75; resize:vertical;font-family:inherit} /* 编辑器（留言板/教室发帖/回复共用 .composer）：正文框通栏、去掉右下角 那个拖不动大小的滑块——与其摆一个调不了的把手，不如干脆不给 */ .composer textarea.input{max-width:none;width:100%;min-height:150px;resize:none} select.input{max-width:220px;cursor:pointer} .form-row{display:flex;gap:14px;flex-wrap:wrap} .form-row .field{flex:1;min-width:200px} .form-actions{display:flex;gap:10px;align-items:center;margin-top:6px} /* 提示条 */ .alert{padding:13px 16px;border-radius:var(--radius-sm);font-size:13.5px; border:1px solid var(--line);background:var(--surface);margin-bottom:20px;line-height:1.7} .alert b{display:block;margin-bottom:3px} .alert p{margin:0} .alert-tip{color:var(--ink-3);font-size:12.5px;margin-top:6px !important} .alert-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)} .alert-err{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink)} .alert-info{background:var(--accent-soft);border-color:var(--info-line);color:var(--info-ink)} /* 橙色提醒条（2026-09-28 新增）：用于"不是错误、但必须让人看见"的话， 目前只有"新注册的账号还在等管理员同意"这一种。比 info 醒目、又不像 err 那样报警。 取 var(--warn-strong) 是因为底色是浅米白（var(--bg)），亮橙（#FF7F00 之类）小字会糊。 */ .alert-warn{background:var(--warn-bg);border-color:var(--warn-line);border-left:3px solid var(--warn-line);color:var(--warn-strong);font-weight:600} .alert-warn p{font-weight:400;color:var(--warn-ink);margin:0} .badge-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-strong)} /* 表单里那个"要等同意才能用"的小号橙色说明（我的资料页的头像上传处） */ .pend-tip{font-size:12.5px;color:var(--warn-strong);margin:0 0 12px} /* 分页 */ .pager{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:34px 0 6px; padding-top:20px;border-top:1px solid var(--line)} .pg{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:32px; padding:0 11px;font-size:13px;color:var(--ink-2);background:var(--surface); border:1px solid var(--line);border-radius:9px;transition:all .18s} .pg:hover{border-color:var(--line-hover);color:var(--ink)} .pg.is-on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:600} .pg.is-off{color:var(--ink-3);opacity:.6} .pg-dot{color:var(--ink-3);padding:0 2px} .pg-info{margin-left:auto;font-size:12px;color:var(--ink-3)} /* 分页跳页（2026-10-27）：服务端渲染在 inc\func.asp 的 Pager() 末尾， 默认不显示 —— js\app.js 绑定成功后才给容器加 .is-on 露出来。 这样老浏览器 / JS 失效时不会出现一个点了没反应的空框。 */ .pg-jump{display:none;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)} .pg-jump.is-on{display:inline-flex} .pg-jump-t{white-space:nowrap} .pg-jump-in{width:54px;height:32px;padding:0 6px;box-sizing:border-box;text-align:center; font-size:13px;color:var(--ink);background:var(--surface); border:1px solid var(--line);border-radius:9px;transition:all .18s} .pg-jump-in:focus{outline:none;border-color:var(--accent-line);background:var(--accent-soft)} .pg-jump-go{height:32px;padding:0 12px;font-size:13px;color:var(--ink-2);cursor:pointer; background:var(--surface);border:1px solid var(--line);border-radius:9px;transition:all .18s} .pg-jump-go:hover{border-color:var(--line-hover);color:var(--ink)} /* 面包屑 */ .crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3); margin-bottom:18px} .crumbs a:hover{color:var(--accent)} .crumb-sep{color:var(--line)} /* 图片（把图片文件放进 photo 目录就会自动显示） */ .photo-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface-2)} .ph-grid .photo-img{aspect-ratio:1/1} .avatar-img{overflow:hidden;padding:0} .avatar-img img{width:100%;height:100%;object-fit:cover;display:block} /* 详情页：正文 + 侧栏 */ .detail{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:34px;align-items:start} .side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:20px 22px} .side-card h3{margin:0 0 14px;font-size:14px;font-weight:600} .kv{display:flex;flex-direction:column;gap:0} .kv-row{display:flex;gap:12px;padding:8px 0;font-size:13px;border-bottom:1px solid var(--line-soft)} .kv-row:last-child{border-bottom:0} .kv-row span{flex:0 0 64px;color:var(--ink-3);font-size:12.5px} .kv-row b{font-weight:500;word-break:break-all} @media (max-width:860px){.detail{grid-template-columns:1fr;gap:26px}} /* 照片详情 */ .photo-hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;margin-bottom:8px} .photo-hero .photo{aspect-ratio:4/3;font-size:22px} /* ★ 详情大图自适应（2026-09-23）：不再强制 4/3 裁切—— 横版照旧铺满宽度；竖版按原比例完整显示，最高约 76% 视口高， 更高的图等比缩小居中，页面不会被竖图拉得老长。 */ .photo-hero .photo-img{aspect-ratio:auto;width:auto;max-width:100%;height:auto; max-height:76vh;object-fit:contain;margin:0 auto} .photo-hero figcaption{padding:16px 20px;display:flex;flex-direction:column;gap:4px} .photo-hero h1{font-family:var(--serif);font-size:21px;font-weight:600;margin:0} .photo-info{font-size:12.5px;color:var(--ink-3)} /* 评论 / 回复 */ .cmt-list{list-style:none;margin:0;padding:0} .cmt{display:flex;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line-soft)} .cmt:last-child{border-bottom:0} .cmt-body{flex:1;min-width:0} .cmt-meta{display:flex;align-items:baseline;gap:10px;margin-bottom:3px} .cmt-meta b{font-size:13px;font-weight:600} .cmt-meta span{font-size:11.5px;color:var(--ink-3)} .cmt-text{font-size:13.5px;color:var(--ink-2);word-break:break-word;margin:0} .cmt-text blockquote{margin:8px 0;padding:6px 0 6px 12px;border-left:2px solid var(--line); color:var(--ink-3);font-size:13px} /* 发帖框 */ .composer{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:22px 24px;margin:26px 0} .composer h3{margin:0 0 16px;font-size:14.5px;font-weight:600} .composer-guest{font-size:13px;color:var(--ink-2)} /* 板块 */ .forum-head{display:flex;align-items:center;gap:12px;margin-bottom:18px} .forum-head .forum-ico{flex-basis:42px;width:42px;height:42px;font-size:18px} .forum-head h1{font-family:var(--serif);font-size:24px;margin:0;font-weight:600} .forum-head p{margin:3px 0 0;font-size:13px;color:var(--ink-2)} /* 表格（后台） */ .table{width:100%;border-collapse:collapse;background:var(--surface); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:13px} .table th,.table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-soft); vertical-align:middle} .table th{background:var(--surface-2);font-weight:600;color:var(--ink-2);font-size:12.5px; white-space:nowrap} .table tr:last-child td{border-bottom:0} .table tr:hover td{background:var(--surface-2)} .table .num{color:var(--ink-3);font-size:12px;white-space:nowrap} .table .acts{white-space:nowrap;display:flex;gap:6px} /* 后台框架 */ .admin-top{background:var(--surface);border-bottom:1px solid var(--line)} .admin-top .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;gap:20px} .admin-nav{display:flex;gap:20px;font-size:13px;color:var(--ink-2);flex-wrap:wrap} .admin-nav a:hover{color:var(--accent)} .admin-nav a.is-active{color:var(--accent);font-weight:600} .admin-body{padding:30px 0 60px} .admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px; padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:22px;flex-wrap:wrap} .admin-head h1{font-family:var(--serif);font-size:23px;margin:0;font-weight:600} .admin-head .sub{font-size:12.5px;color:var(--ink-3);margin-top:5px} /* 小徽标 */ .badge{display:inline-block;padding:1px 8px;font-size:11.5px;border-radius:999px; background:var(--accent-soft);color:var(--accent)} .badge-dim{background:var(--surface-2);color:var(--ink-3)} .badge-good{background:var(--ok-bg);color:var(--badge-good-ink)} /* 登录卡 */ .auth-wrap{max-width:420px;margin:60px auto 20px} .auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:32px 34px} .auth-card h1{font-family:var(--serif);font-size:23px;font-weight:600;margin:0 0 8px} .auth-card .sub{font-size:13px;color:var(--ink-2);margin:0 0 24px} .auth-foot{margin-top:18px;font-size:12.5px;color:var(--ink-3);text-align:center} .auth-foot a{color:var(--accent)} /* 同学录卡片的搜索高亮调色 */ .st-sub .dot{color:var(--line)} /* 空状态 */ .empty-box{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius); padding:38px 20px;text-align:center;color:var(--ink-3);font-size:13.5px} /* 小屏：后台表格可横向滚动 */ .table-scroll{overflow-x:auto} @media (max-width:720px){ .nav-userbox{margin-left:0;padding-left:0;border-left:0} .auth-card{padding:24px 20px} .composer{padding:18px 16px} .pg-info{margin-left:0;width:100%} .pg-jump{width:100%;margin-top:2px} } /* 搜索条 */ .search-form{display:flex;gap:10px;align-items:center;flex:1;min-width:250px;max-width:460px} .search-form .input{max-width:none} .result-line{font-size:13px;color:var(--ink-3);margin:0 0 18px} .result-line b{color:var(--accent)} .result-reset{margin-left:10px;color:var(--accent);border-bottom:1px solid var(--accent-soft)} /* 大号头像（详情页） */ .avatar-lg{flex-basis:56px;width:56px;height:56px;border-radius:15px;font-size:22px} .avatar-lg img{border-radius:15px}.crumb-cur{color:var(--ink-2)} .tip-inline{font-size:11.5px;color:var(--ink-3);font-weight:400} .tip-inline a{color:var(--accent)} /* 表单里的分段小标题（register.asp 一直在用，之前漏了定义，补上） */ .form-sec{font-family:var(--serif);font-size:15px;font-weight:600;margin:24px 0 12px; padding-top:16px;border-top:1px solid var(--line-soft)} /* 后台：统计卡一行能放下 7 个 */ .stats-wide{max-width:none} .stats-wide .stat{min-width:110px} /* 后台：次要说明文字 */ .muted{color:var(--ink-3)} /* 后台：等宽字体（账号、IP、口令这类"看起来要对齐"的内容） */ .mono{font-family:ui-monospace,SFMono-Regular,Consolas,"Courier New",monospace; font-size:12px;letter-spacing:0} /* 后台：表格里的缩略图。给个固定框，真图铺满、占位块也撑得起来 */ .thumb{display:block;width:68px;height:48px;border-radius:8px;overflow:hidden; background:var(--surface-2);border:1px solid var(--line-soft)} .thumb .photo-img,.thumb .photo{width:100%;height:100%;aspect-ratio:auto; object-fit:cover;border-radius:0;font-size:9.5px;letter-spacing:0;padding:2px;line-height:1.3} .thumb.is-missing{outline:1px dashed var(--danger-line);outline-offset:1px} /* 后台：一行内的小表单（比如"给这个同学重设口令"） */ .inline-form{display:inline-flex;gap:6px;align-items:center;flex-wrap:nowrap} .inline-form .input{height:32px;min-width:110px;max-width:150px;font-size:12.5px;padding:0 10px} /* 后台：表格里的表单按钮不该撑高行 */ .table form{display:inline-block;margin:0} /* ========================================================================== 我的资料 profile.asp ========================================================================== */ /* 单列版式（2026-09-17 定稿）：头像卡、账号信息、基本资料、修改口令、 密保问题从上到下依次排，不分两竖列。.detail 的两列 grid 在这里整个退掉， 改普通块级流，卡片间距靠各自的 margin-bottom（22px）。 限宽 800px：全宽表单卡在 1080px 容器里太舒展；窄屏下自然贴边。 */ .prof-detail{display:block;max-width:800px} .prof-detail .side-card{margin-bottom:22px} /* 三块表单各自成一个卡片 */ .prof-form{background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:26px 28px;margin-bottom:22px} .prof-form .sec-title{margin-top:0} /* 表单里的分段小标题：外框已经有了，上边框去掉，靠间距分层 */ .prof-form .form-sec{border-top:0;padding-top:0;margin:26px 0 12px} .prof-form .form-row{margin-bottom:0} .prof-form textarea.input{min-height:140px} /* 头像预览：大方块 + 右边两行说明 */ .face-preview{display:flex;align-items:center;gap:16px;margin-bottom:20px} .avatar-xl{flex:0 0 84px;width:84px;height:84px;border-radius:20px;font-size:30px} .avatar-xl img{border-radius:20px} .face-preview-meta{min-width:0} .face-now{margin:0 0 5px;font-size:13px} .face-now b{color:var(--accent)} .face-src{margin:0;font-size:11.5px;color:var(--ink-3);line-height:1.65} /* 头像卡里的两个小表单：切换那块用一条细线跟上传分开 */ .face-sel-form{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)} .face-sel{display:flex;gap:8px;margin-bottom:9px;flex-wrap:wrap} .face-sel .btn{flex:1;min-width:0} .face-sel-form .hint{display:block;line-height:1.65} @media (max-width:720px){ .prof-form{padding:20px 18px} .avatar-xl{flex-basis:68px;width:68px;height:68px;border-radius:16px;font-size:24px} } .table .btn-sm{height:28px;padding:0 11px;font-size:12px} /* ========================================================================== 手机端适配补充（桌面/手机双端截图审查后补的） ========================================================================== */ @media (max-width:720px){ /* 后台顶栏：原来只有前台 .topbar-in 有竖排规则，.admin-top 漏了 —— 390px 下还硬撑 56px 单行，品牌、七个菜单、登录名挤成一团互相压行。 改成竖排：品牌一行，菜单一行横向滑动 */ .admin-top .wrap{height:auto;flex-direction:column;align-items:flex-start; gap:10px;padding:12px 0 10px} .admin-top .brand-logo{height:28px} .admin-nav{flex-wrap:nowrap;overflow-x:auto;max-width:100%;gap:15px; -webkit-overflow-scrolling:touch;padding-bottom:2px} /* 前台相册：minmax(222px) 在 390px 屏上只装得下一列，单列大图 把页面拉到一万多像素高。固定两列，缩略图大小正合适 */ .ph-grid,.ph-grid-lg{grid-template-columns:repeat(2,1fr);gap:10px} /* 首页「最近留言」：手机端每排 1 条 */ .msg-grid{grid-template-columns:1fr} /* 首页「生日快乐」走马灯：手机上左右内边距收窄（滚动窗口留得宽一点）， 条目字号小一号 */ .bday-box{padding:12px 10px} .bd-one{font-size:13px} .bd-sep{margin:0 10px} } /* 话题正文：桌面端容器有 1100+px 宽，长文一行拉到底没法读。 限一个舒适行宽（约 45 个汉字），在卡片里居左 */ .topic-body{max-width:46em} .topic-body blockquote{max-width:none} /* ========================================================================== 留言板编辑器（board.asp）：工具条 + 表情面板 + 引用块署名行 标记→HTML 的转换在服务端 CleanBody，这里只管样子。 ========================================================================== */ .ed-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px; margin:0 0 10px;padding:8px 10px;background:var(--surface-2); border:1px solid var(--line);border-radius:var(--radius-sm)} .ed-group{display:inline-flex;align-items:center;gap:4px} .ed-btn{min-width:28px;height:28px;padding:0 9px;border:1px solid var(--line); border-radius:7px;background:var(--surface);color:var(--ink-2); font-size:12.5px;line-height:1;cursor:pointer;transition:color .15s,border-color .15s} .ed-btn:hover{color:var(--accent);border-color:var(--accent)} .ed-sw{width:18px;height:18px;padding:0;border:1px solid var(--edge); border-radius:50%;cursor:pointer;transition:transform .12s} .ed-sw:hover{transform:scale(1.18)} .ed-sel{height:28px;padding:0 4px;border:1px solid var(--line);border-radius:7px; background:var(--surface);color:var(--ink-2);font-size:12.5px} .ed-emoji{display:grid;grid-template-columns:repeat(10,34px);gap:4px; margin:0 0 10px;padding:8px 10px;background:var(--surface); border:1px solid var(--line);border-radius:var(--radius-sm)} .ed-emoji[hidden]{display:none} .ed-emo{width:34px;height:34px;padding:0;border:0;border-radius:7px; background:none;font-size:20px;line-height:1;cursor:pointer} .ed-emo:hover{background:var(--accent-soft)} /* 引用块：qt-name 是 [quote=名字] 转出来的署名行 */ .msg-text blockquote .qt-name{display:block;margin:-2px 0 2px; font-size:12px;color:var(--ink-3)} @media (max-width:720px){ .ed-emoji{grid-template-columns:repeat(7,34px)} } /* ====================================================================== 捐赠角标（2026-09-22） 被后台标记"捐赠"的用户，头像右下角一枚金色小 e。 款式：淡底金字 · 粗黑体 —— 底近白淡金（#FBF4E2），字亮金 Arial Black。 角标完全落在头像边框内（.avatar-img 有 overflow:hidden，出边会被裁掉）， 尺寸随头像走：container 查询 + cqw 字号，38px 列表头像到 84px 大头像都清晰。 ====================================================================== */ .avatar{position:relative;container-type:inline-size} .avatar .donor-badge{ position:absolute;right:4%;bottom:4%;width:37%;height:37%; min-width:12px;min-height:12px;border-radius:50%; background:radial-gradient(circle at 32% 28%,var(--don-glow) 0%,var(--don-soft) 55%,var(--don-soft-2) 100%); border:1px solid var(--on-accent);box-shadow:0 1px 3px rgba(120,90,30,.28); display:flex;align-items:center;justify-content:center; font:900 30cqw/1 "Arial Black","Arial","Segoe UI",sans-serif; font-style:normal;color:var(--don-ink);pointer-events:none} @supports not (font-size:1cqw){ .avatar .donor-badge{font-size:9px} } /* 后台用户列表里那枚"预览样章"：不参与定位，就摆在勾选框旁边 */ .don-cell{position:relative;text-align:center} .don-cell .don-demo{position:static;display:inline-flex;width:20px;height:20px;min-width:20px;min-height:20px;vertical-align:middle} .don-form{display:inline-block;margin:0} /* 自绘勾选框：没勾 = 空白方框；勾上 = 框里一个大号粗金勾（允许溢出框沿， 像马克笔画上去的一样醒目）。不用浏览器原生勾（老内核可能画不出来） */ .don-check{position:relative;display:inline-block;width:18px;height:18px;margin:0;cursor:pointer;vertical-align:middle} .don-check input{position:absolute;left:0;top:0;width:18px;height:18px;margin:0;opacity:0;cursor:pointer} .don-check .don-box{display:block;width:18px;height:18px;box-sizing:border-box; border:1px solid var(--don-line);border-radius:4px;background:var(--surface);position:relative} .don-check input:checked ~ .don-box{border-color:var(--don-ink);background:var(--don-soft)} .don-check input:checked ~ .don-box::after{ content:"\2713"; position:absolute;left:50%;top:50%; transform:translate(-50%,-56%); font-size:19px;line-height:1;font-weight:900; color:var(--don-ink); text-shadow:0 0 1px var(--don-line-on),0 0 1px var(--don-line-on)} /* ============================================================================ 教室里插进正文的图片（2026-09-28 新增，配合 attach.asp + CleanBody 的 [img]） 全局 img{max-width:100%} 已经兜了"不撑破版面"，这里补上间距/圆角/描边： 手机拍的图多是竖图，几张连着贴时上下留点缝，别糊成一片。 ============================================================================ */ .post-img{display:block;max-width:100%;height:auto;margin:14px 0; border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface-2)} /* 发帖框下面那行插图状态（压缩中 / 上传中 / 已插入）：单独一行，带一张小缩略图 */ .attach-hint{display:block;margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--ink-3)} .attach-hint img{display:inline-block;vertical-align:middle} /* ---------------------------------------------------------------------------- 前台删除自己的内容（2026-09-28）：留言/回复/话题 meta 行里的小「删除」， 以及照片页的「删除这张照片」。meta 行是 flex 容器，表单整体当一个条目排。 ============================================================================ */ .del-inline{display:inline-block;margin:0;padding:0} .lnk-del{background:none;border:none;padding:0;font:inherit;font-size:12px; cursor:pointer;color:var(--danger)} .lnk-del:hover{text-decoration:underline;color:var(--danger-hover)} /* ---------------------------------------------------------------------------- 首页「教室新帖」表格版式（2026-09-28 用户给截图：白卡 + 表头 + 分列对齐）。 只作用于 index.asp 的 .topic-table，论坛页/同学页的 .topic-meta 列表不受影响。 数据列宽固定、标题列 minmax(0,1fr) 弹性截断；窄屏按信息价值逐列收起， 430 以下收掉表头与全部数据列，标题独占整行（与旧版式的降级顺序一致）。 ============================================================================ */ .tt-card{background:var(--surface);border:1px solid var(--line-soft); border-radius:var(--radius);overflow:hidden} .topic-table .tt-head,.topic-table .topic a{display:grid; grid-template-columns:minmax(0,1fr) 88px 72px 56px 92px;gap:14px;align-items:baseline; width:100%;padding:12px 16px;text-align:left;font:inherit;cursor:pointer} .topic-table .tt-head{background:var(--surface-2);border-bottom:1px solid var(--line-soft); font-size:12px;font-weight:500;color:var(--ink-3)} .topic-table .topic:last-child{border-bottom:0} .topic-table .topic a{border-radius:0} .topic-table .topic a:hover{background:var(--surface-2)} .topic-table .tt-c{font-size:12.5px;color:var(--ink-2);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .topic-table .tt-date{color:var(--ink-3)} .topic-table .tt-replies{font-variant-numeric:tabular-nums} .topic-table .tt-replies,.topic-table .tt-date{text-align:right} @media (max-width:720px){ .topic-table .tt-head,.topic-table .topic a{grid-template-columns:minmax(0,1fr) 88px 72px 92px} .topic-table .tt-replies{display:none} } @media (max-width:620px){ .topic-table .tt-head,.topic-table .topic a{grid-template-columns:minmax(0,1fr) 88px 72px} .topic-table .tt-date{display:none} } @media (max-width:520px){ .topic-table .tt-head,.topic-table .topic a{grid-template-columns:minmax(0,1fr) 72px} .topic-table .tt-forum{display:none} } @media (max-width:430px){ .topic-table .tt-head{display:none} .topic-table .topic a{display:block;padding:12px 14px} .topic-table .tt-user{display:none} .topic-table .topic-title{white-space:normal;overflow:visible;text-overflow:clip} } /* ===== HZ THEME LAYER START（自动生成，勿手改本段之后） ===== */ /* =========================================================================== * 配色方案层 · 浅色（Forest / 深林）—— 2026-10-19 用户定稿 * * 挂在 （页面默认就是这个值）。 * 不写 data-mode（老缓存页 / JS 失效）时沿用上面的 :root 原版配色，可平滑回退。 * * 只用变量 + 装饰性规则，不改任何内容与结构；深色见下面 [data-mode="dark"]。 * ★ 间距一律 margin，不用 flex gap（老手机不支持）。 * =========================================================================== */ [data-mode="light"]{ --bg:#F2F6F2; --surface:#FFFFFF; --surface-2:#F7FAF7; --line:#DDE7DD; --line-soft:#E8F0E8; --ink:#0E1B14; --ink-2:#4F6156; --ink-3:#889A8E; --accent:#047857; --accent-soft:#DCF5E8; --warm:#D9B36C; --name-hl:#A85B12; --card:#FFFFFF; --shadow:0 1px 2px rgba(14,27,20,.04), 0 10px 26px rgba(4,120,87,.07); --line-hover:#CBDACC; --accent-deep:#036247; --accent-line:#B7E6CE; --on-accent:#FFFFFF; --topbar-bg:rgba(242,246,242,.84); --mask:rgba(14,27,20,.28); --warn-bg:#FDF5E6; --warn-line:#EFDCB4; --warn-ink:#8A5A22; --warn-strong:#A85B12; --ok-bg:#E7F8EE; --ok-line:#C3EBD3; --ok-ink:#047857; --err-bg:#FDF0EC; --err-line:#F0D4CA; --err-ink:#A63A1F; --info-bg:#E8F4EF; --info-line:#C9E6DA; --info-ink:#0F5C45; --badge-good-bg:#E7F8EE; --badge-good-ink:#047857; --danger:#B4381E; --danger-line:#F0D4CA; --danger-bg:#FDF0EC; --danger-hover:#8F2A14; --del-bg:rgba(180,56,30,.05); --glow-1:#C8EAD9; --glow-2:#BFE3F0; --glow-3:#E4EFC4; --hero-grad-ink:#036247; --rain-1:#D02B3A; --rain-2:#D97315; --rain-3:#A87E00; --rain-4:#1F7F4C; --rain-5:#0B7E8E; --rain-6:#1F5AA8; --rain-7:#7E3EB0; } /* 首屏光晕是绝对定位的大色块，窄屏会探出右缘 → 裁掉横向溢出（不影响 sticky 顶栏） */ [data-mode="light"] body{background-color:var(--bg);overflow-x:clip} @supports not (overflow:clip){[data-mode="light"] body{overflow-x:hidden}} /* 顶栏：毛玻璃 + 细线；导航当前项 = 实色胶囊 */ [data-mode="light"] .topbar{ background:var(--topbar-bg);border-bottom:1px solid var(--line); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px)} [data-mode="light"] .nav > a{ padding:6px 12px;margin-right:6px;border-radius:999px; font-size:13.5px;color:var(--ink-2)} [data-mode="light"] .nav > a:last-of-type{margin-right:0} [data-mode="light"] .nav > a:hover{color:var(--ink);background:var(--surface-2)} [data-mode="light"] .nav a.is-active{color:var(--on-accent);background:var(--accent);font-weight:500} [data-mode="light"] .nav a.is-active::after{display:none} [data-mode="light"] .nav-userbox{border-left-color:var(--line)} [data-mode="light"] .nav-join{color:var(--accent)} /* 首屏：柔和光晕 + 短竖线 eyebrow */ [data-mode="light"] .hero{position:relative;padding:64px 0 10px;overflow:hidden} [data-mode="light"] .hero::before{ content:"";position:absolute;left:50%;top:-120px;width:900px;height:420px; transform:translateX(-50%);pointer-events:none;z-index:-1; background: radial-gradient(38% 52% at 30% 40%, var(--glow-1) 0%, transparent 70%), radial-gradient(36% 50% at 62% 32%, var(--glow-2) 0%, transparent 72%), radial-gradient(34% 46% at 82% 58%, var(--glow-3) 0%, transparent 70%); filter:blur(18px);opacity:.55} [data-mode="light"] .hero-eyebrow{ display:inline-block;font-size:11.5px;letter-spacing:.18em; color:var(--ink-3);font-weight:500;margin:0 0 22px} [data-mode="light"] .hero-eyebrow::before{ content:"";display:inline-block;width:3px;height:12px;border-radius:2px; background:var(--accent);margin-right:9px;vertical-align:-1px} [data-mode="light"] .hero-title{ font-size:44px;letter-spacing:-.02em;font-weight:600;line-height:1.28} [data-mode="light"] .hero-desc{font-size:16px;line-height:1.8} /* 登录卡：大圆角 + 极淡投影，去边框 */ [data-mode="light"] .home-login-card{ border:0;border-radius:20px;background:var(--surface); box-shadow:var(--shadow);padding:38px 40px} [data-mode="light"] .hl-intro h2{font-size:23px;letter-spacing:-.01em;margin-bottom:10px} /* 按钮：胶囊 + 实色 + hover 轻微上浮 */ [data-mode="light"] .btn, [data-mode="light"] .quick-btn, [data-mode="light"] .sec-more{ border-radius:999px;transition:background .18s,color .18s,transform .18s,box-shadow .18s} [data-mode="light"] .btn{padding:9px 18px} [data-mode="light"] .btn-primary, [data-mode="light"] .quick-btn{ background:var(--accent);border:1px solid var(--accent);color:var(--on-accent);font-weight:500} [data-mode="light"] .btn-primary:hover, [data-mode="light"] .quick-btn:hover{ background:var(--accent-deep);border-color:var(--accent-deep); transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.12)} [data-mode="light"] .sec-more{ border:1px solid var(--line);background:var(--surface);color:var(--ink-2); padding:5px 13px;font-size:12.5px} [data-mode="light"] .sec-more:hover{ border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} /* 输入框：大圆角 + focus 淡光圈 */ [data-mode="light"] .input{ border-radius:10px;background:var(--surface-2);border-color:var(--line); transition:border-color .18s,box-shadow .18s,background .18s} [data-mode="light"] .input:focus{ background:var(--surface);border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)} /* 卡片：大圆角、淡投影、hover 抬一点 */ [data-mode="light"] .card, [data-mode="light"] .ph, [data-mode="light"] .tt-card, [data-mode="light"] .bday-box, [data-mode="light"] .stats{ border-color:var(--line);border-radius:16px;background:var(--surface); box-shadow:var(--shadow)} [data-mode="light"] .card:hover, [data-mode="light"] .ph:hover{ transform:translateY(-3px);border-color:var(--accent-line); box-shadow:0 12px 32px rgba(0,0,0,.09)} /* 统计数字 / 区块标题 / 标签 */ [data-mode="light"] .stat b, [data-mode="light"] .foot-stats .stat b{ font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--accent)} [data-mode="light"] .sec-head{padding-bottom:12px;align-items:center} [data-mode="light"] .sec-title{ position:relative;padding-left:12px;font-size:18px;letter-spacing:-.01em} [data-mode="light"] .sec-title::before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:3px;height:15px;border-radius:2px;background:var(--accent)} [data-mode="light"] .chip, [data-mode="light"] .tag{ border-radius:999px;background:var(--surface-2);border-color:var(--line)} [data-mode="light"] .chip:hover{border-color:var(--accent-line);color:var(--accent)} [data-mode="light"] .chip.is-on, [data-mode="light"] .pg.is-on{ background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:500} [data-mode="light"] .tag{border-radius:999px;font-size:12px;padding:2px 9px} [data-mode="light"] .msg:hover{background:var(--accent-soft)} [data-mode="light"] .list-row:hover{background:var(--surface-2)} [data-mode="light"] .au-gold{color:var(--name-hl)} /* 浅色下的切换控件：选中格 = 实心绿胶囊 */ [data-mode="light"] .theme-switch{background:var(--surface);border-color:var(--line)} [data-mode="light"] .theme-switch button[aria-pressed="true"]{ background:var(--accent);color:var(--on-accent);box-shadow:none} /* 登录用户顶栏有三个子项（品牌 / 导航 / 切换），让导航继续保持靠右 */ [data-can-theme] .topbar-in .nav{margin-left:auto} /* 移动端 */ @media (max-width:720px){ [data-can-theme] .topbar-in .nav{margin-left:0} [data-mode="light"] .nav > a{padding:4px 8px;margin-right:4px;margin-bottom:4px} [data-mode="light"] .nav > a:last-of-type{margin-right:4px} [data-mode="light"] .hero{padding:40px 0 6px} [data-mode="light"] .hero-title{font-size:30px} [data-mode="light"] .home-login-card{padding:26px 22px;border-radius:16px} [data-mode="light"] .hero::before{width:520px;height:300px;top:-70px} } /* ---- 顶栏深/浅切换控件 ---- */ /* =========================================================================== * 顶栏「深 / 浅」切换按钮（2026-10-19 用户要求：将来让用户自选深浅） * * 形态：一枚很轻的分段控件 —— 两个小胶囊并排，外面套一层浅槽。 * · 未选中：透明底 + 次要色字 * · 选中：白底（深色下是浅卡）+ 主色字 + 一点投影，像"被按下去的那格" * · 只占 100×26px，不会把导航挤乱；手机上跟导航一起换行 * * ★ 不用 flex gap 做间距（老手机不支持），内边距 + 边框搞定。 * ★ 按钮本身是