/* ============ 青少年模式管理页（youth.php）============ 原版：src/app/youth/page.tsx + components/youth/youth-manage.tsx（分节卡片）。 这一页和别页不同的地方：正文分两块 —— 静态的「青少年模式的限制」由 PHP 直出， 状态区 / 开启表单 / 家长操作由页内脚本 render() 现拼（类名也都在本文件里）， 重置家长密码弹窗由页内脚本自建（骨架借 style.css 的 .mdl-*）。 复用的公共件（style.css，一个字没改）： .ui-head / .ui-head-ico / .ui-head-tx 页头（56 方块 + 24/32 标题 + 说明行）； 原版这一页是 exactly `flex items-center gap-3 mb-8`， .ui-head 的 mb 就是 32、标题就是 24/32 —— 只差颜色 .ui-card / .ui-card-8 rounded-2xl border border-border bg-card，p-6 / p-8 .ui-grid3 grid grid-cols-3 gap-3（事实三格） .ui-btn + .ui-btn-primary/-outline/-danger + .ui-btn-sm 按钮（h-9 / h-8 两档） .ui-input 输入框（h-9 px-3 rounded-md border shadow-xs） .ui-label / .ui-fld / .ui-fld-sm / .ui-fld-3 / .ui-fld-4 / .ui-hint .ui-spin + @keyframes ui-spin 转圈动画 .mdl / .mdl-mask / .mdl-wrap / .mdl-cell / .mdl-box / .mdl-head / .mdl-title / .mdl-desc 弹窗骨架（.mdl-box 默认 512，本页重设成 448，见下） .hidden display:none !important（回复框那种开关用不到，留着不改） ★ `.ym-` 这个前缀**已经有主**：style.css 3486 行起是青少年模式弹窗（.ym-grad/.ym-head/ .ym-badge/.ym-title/.ym-sub/.ym-body/.ym-cards/.ym-card/.ym-notice*/.ym-dot/.ym-manage*/ .ym-label/.ym-input/.ym-help*/.ym-brow/.ym-by/.ym-bu/.ym-bs/.ym-trig/.ym-foot*/.ym-spin/ .ym-btn-green/.ym-field）。本页新增的类名逐个核对过，与那一批完全不相交； 两边要都是 .ym-head 这种同名不同义的，改一处就会互相踩。 数值来源：Tailwind 类名逐个从原版编译产物（.next/static/css/3a69b6a727df9455.css）取， 刻度同 style.css 文件头（--radius = 12 → rounded-lg 12 / rounded-xl 16 / rounded-2xl 16； --spacing = 4）。字号行高：text-xs 12/16 · text-sm 14/20 · text-base 16/24 · text-lg 18/28 · text-2xl 24/32 · text-3xl 30/36 · text-[11px] 11/16.5 · leading-relaxed = 1.625 倍。 ⚠ 三条这一页反复踩到的坑，写在这里免得下一个人再踩： 1) Tailwind v4 的 preflight 有 `svg { display: block }`，所以原版里每一个图标都是块； 我们这边**没有**那条全局规则，每个图标都得自己给 display（要么 display:block， 要么包在带 vertical-align 的盒子里）。 2) IE11 不给 SVG 元素做 CSS transform：转圈的一律「外层 span 转 + 内层 svg 摆正」 （style.css 的 .ym-spin / .pay-spin 就是这么写的）。 3) 行内图标上的 position:relative 在 IE 里没把握（.ui-btn-ic 那条注释，4173 行）。 本文件统一写成「外层 span 定位 + 内层 svg display:block」，只对尺寸用 svg 类。 4) border-spacing 是**继承**的：.ui-grid3 上写了 12px 0，它格子里再嵌的表 （.ym-dt）必须显式 border-spacing:0，否则两张 dt 的格子会各多出 12。 */ /* ---- 页面容器：max-w-2xl mx-auto pb-6 ---- 672 是 --container-2xl = 42rem（不是 640）。 外层 .page-info（公共件）= 原版那句 `flex-1 w-full max-w-[1280px] mx-auto px-4 md:px-8 py-6 animate-fade-in-up`，本页和别的信息页一样 $INFO_LAYOUT=true 走它。 */ .ym-page { max-width: 672px; margin: 0 auto; padding-bottom: 24px; } /* ---- 分节卡片之间的 mt-6 ---- style.css 里没有通用的 mt 工具类（别页都是用相邻兄弟选择器补的）， 这一页要留的间距只有这一处，就自己起一个；数值 24 = mt-6。 */ .ym-mt6 { margin-top: 24px; } /* ---- 页头图标方块的绿色版 ---- 原版这一页的方块是 bg-emerald-500/10 + text-emerald-600，.ui-head-ico 里是主题色 primary(#608DA4)。尺寸完全一样（56 + 28），所以只覆盖两个颜色。 写成 .ui-head-ico.ym-hico 的复合选择器：同权重的两条谁赢只看先后，复合的不用赌。 */ .ui-head-ico.ym-hico { background-color: rgba(0, 188, 125, 0.1); } .ui-head-ico.ym-hico svg { color: #009966; } /* ---- 未登录那张卡：bg-card border border-border rounded-2xl p-8 text-center ---- p-8 用 .ui-card-8，圆角/底色/边框都在 .ui-card 里，这里只加居中。 */ .ym-lock { text-align: center; } /* w-16 h-16 rounded-2xl bg-primary/10 mx-auto mb-4 + 居中一颗 32 的 primary 图标。 64×64 盒子里居中一个图标用「行高 = 盒高 + font-size:0 + vertical-align:middle」—— 同 .ym-badge（style.css 3499 行那条注释讲了为什么这套在 IE 里是准的）。 */ .ym-lock-ico { display: block; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 16px; background-color: rgba(96, 141, 164, 0.1); line-height: 64px; text-align: center; font-size: 0; } .ym-lock-ico svg { display: inline-block; vertical-align: middle; width: 32px; height: 32px; color: #608DA4; } .ym-lock-t { margin-bottom: 8px; font-size: 18px; line-height: 28px; font-weight: 600; color: #111C22; } /* text-sm leading-relaxed mb-6：14 的 relaxed 是 22.75（原版 1.625 倍） */ .ym-lock-p { margin-bottom: 24px; font-size: 14px; line-height: 22.75px; color: #616B70; } /* ---- 读取中那一行：flex items-center gap-2 text-sm py-10 justify-center ---- 原版是 flex，图标 16 + gap-2(8) + 文字，整行居中。单行内容用行内流复刻： 图标包 span（转圈要转 span）走 vertical-align:top + top:2px —— 顶对齐的是**行盒顶**， 16 的图标在 20 的行盒里居中就是 (20−16)/2 = 2（公式同 .ui-btn-ic）。 */ .ym-loading { padding: 40px 0; text-align: center; font-size: 14px; line-height: 20px; color: #616B70; } .ym-loading-i { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: top; position: relative; top: 2px; } .ym-loading-i svg { display: block; width: 16px; height: 16px; } /* ---- 状态读不出来时的兜底卡：text-center text-sm text-muted-foreground ---- 三条值和 style.css 的 .q-empty（队列抽屉的空态）一字不差，但它归 .q-* 那一节， 跨节借名字比抄三行更难读，所以这里重写一遍。 */ .ym-tc { text-align: center; font-size: 14px; line-height: 20px; color: #616B70; } /* ---- 小节标题行：flex items-center gap-2 mb-1（mb-5 的用 .ym-sec-hd5）---- 图标 + 标题两格表格，vertical-align:middle 就是 items-center； gap-2(8) 落在第二格的 padding-left 上。 */ .ym-sec-hd { display: table; border-collapse: separate; border-spacing: 0; margin-bottom: 4px; } .ym-sec-hd5 { margin-bottom: 20px; } .ym-sec-hd-i { display: table-cell; vertical-align: middle; font-size: 0; line-height: 0; } .ym-sec-hd-i svg { display: block; } .ym-sec-hd-t { display: table-cell; vertical-align: middle; padding-left: 8px; font-size: 16px; line-height: 24px; font-weight: 600; color: #111C22; } /* 图标尺寸：w-5 h-5 = 20（静态那节）/ w-3.5 h-3.5 = 14（脚本里 ICON.key）。 尺寸写在 svg 自己的类上，外层的格子不写死宽度 —— 换尺寸时不用改两条规则。 */ .ym-i20 { width: 20px; height: 20px; } .ym-i14 { width: 14px; height: 14px; } /* text-emerald-600（限制节标题行那颗盾牌；方块里的图标颜色由 .ym-lib/.ym-st-ico 给） */ .ym-ce { color: #009966; } /* ---- 小节说明行：text-xs text-muted-foreground mb-5 / mb-3 ---- 同一套字色两个下距（限制节 mb-5 20、家长操作各块 mb-3 12），所以拆成两条。 */ .ym-sec-p, .ym-hp { font-size: 12px; line-height: 16px; color: #616B70; } .ym-sec-p { margin-bottom: 20px; } .ym-hp { margin-bottom: 12px; } /* ---- 限制清单：ul.space-y-4 + li.flex gap-3 ---- 图标方块 32（rounded-lg = 12，不是 8）、内容块吃掉剩余宽度。 方块单独包一层 span 再挂 mt-0.5：mt 在 table-cell 上不生效，写格子高度又会连带 把背景拉长（内容多两行时格子会被撑高），跟原版那个定尺的方块对不上。 */ .ym-ul > li + li { margin-top: 16px; } .ym-li { display: table; width: 100%; border-collapse: separate; border-spacing: 0; } .ym-li-i { display: table-cell; width: 32px; vertical-align: top; font-size: 0; line-height: 0; } .ym-lib { display: inline-block; width: 32px; height: 32px; margin-top: 2px; border-radius: 12px; background-color: rgba(0, 188, 125, 0.1); line-height: 32px; text-align: center; font-size: 0; } .ym-lib svg { display: inline-block; vertical-align: middle; width: 16px; height: 16px; color: #009966; } .ym-li-bd { display: table-cell; vertical-align: top; padding-left: 12px; } .ym-li-t { font-size: 14px; line-height: 20px; font-weight: 500; color: #111C22; } .ym-li-p { margin-top: 2px; font-size: 12px; line-height: 19.5px; color: #616B70; } /* ================= 状态区（脚本现拼） ================= */ /* flex items-center justify-between gap-4 flex-wrap：三格表格 [44 图标方块] [标题块，吃剩余] [开关按钮，width:1% 收缩]。 ★ 原版 flex-wrap 在窄屏会把按钮折到第二行，表格不会 —— 672 宽下按钮折不了 （左边最宽的一行也就 300 出头），这条差异只在手机宽度才看得见，先记着。 */ .ym-hd { display: table; width: 100%; border-collapse: separate; border-spacing: 0; } .ym-hd-i { display: table-cell; width: 44px; vertical-align: middle; font-size: 0; line-height: 0; } .ym-hd-t { display: table-cell; vertical-align: middle; padding-left: 12px; } .ym-hd-b { display: table-cell; width: 1%; vertical-align: middle; padding-left: 16px; text-align: right; white-space: nowrap; font-size: 0; line-height: 0; } /* w-11 h-11 rounded-xl(16) + 居中一颗 20 图标（居中的道理同 .ym-lock-ico） */ .ym-st-ico { display: inline-block; width: 44px; height: 44px; border-radius: 16px; line-height: 44px; text-align: center; font-size: 0; } .ym-st-ico svg { display: inline-block; vertical-align: middle; width: 20px; height: 20px; } .ym-st-on { background-color: rgba(0, 188, 127, 0.15); color: #009966; } /* bg-emerald-500/15 text-emerald-600 */ .ym-st-off { background-color: #E6ECEF; color: #616B70; } /* bg-muted text-muted-foreground */ /* 标题 + 状态胶囊那一行：flex items-center gap-2 flex-wrap。 同样是两格表格（窄屏的 wrap 差异同 .ym-hd 那条注释）。 */ .ym-hd-r1 { display: table; border-collapse: separate; border-spacing: 0; } .ym-hd-t2 { display: table-cell; vertical-align: middle; font-size: 16px; line-height: 24px; font-weight: 600; color: #111C22; } .ym-hd-pill { display: table-cell; vertical-align: middle; padding-left: 8px; } .ym-hd-sub { margin-top: 4px; font-size: 12px; line-height: 16px; color: #616B70; } /* 状态胶囊：inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-full。 盒高 = 16(行) + 4×2 = 24，圆角全圆；小圆点 6 见方，middle + top:-1px 是行内居中的 老补偿（同 .pay-alert-ic 那个 14 的 -1）。 */ .ym-pill { display: inline-block; vertical-align: middle; padding: 4px 10px; border-radius: 9999px; font-size: 12px; line-height: 16px; font-weight: 500; } .ym-pill-on { background-color: rgba(0, 188, 127, 0.15); color: #007A55; } /* bg-emerald-500/15 text-emerald-700 */ .ym-pill-off { background-color: #E6ECEF; color: #616B70; } /* bg-muted text-muted-foreground */ .ym-pill-d { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 9999px; vertical-align: middle; position: relative; top: -1px; } .ym-pill-d-on { background-color: #00BC7D; } /* bg-emerald-500 */ .ym-pill-d-off { background-color: #616B70; } /* bg-muted-foreground */ /* 已开启时才有的那一块：mt-5 pt-5 border-t border-border space-y-5 */ .ym-blk { margin-top: 20px; padding-top: 20px; border-top: 1px solid #D9DFE2; } .ym-blk > * + * { margin-top: 20px; } /* 剩余分钟那一行：flex items-end justify-between mb-2 gap-3 flex-wrap。 两格表格 + vertical-align:bottom（items-end）；右格没写宽度，吃掉剩余宽度， text-right 把「已用 X 分钟 / 上限 Y 分钟」顶到右边，等价于 justify-between。 */ .ym-nums { display: table; width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 8px; } .ym-nums-l { display: table-cell; vertical-align: bottom; } .ym-nums-r { display: table-cell; vertical-align: bottom; padding-left: 12px; text-align: right; font-size: 12px; line-height: 16px; color: #616B70; } .ym-num { font-size: 30px; line-height: 36px; font-weight: 700; color: #111C22; } .ym-num-s { margin-top: 2px; font-size: 12px; line-height: 16px; color: #616B70; } .ym-em { color: #111C22; font-weight: 500; } /* text-foreground font-medium */ /* 进度条：bg-primary/20 relative h-2 w-full overflow-hidden rounded-full， 里面那条 bg-primary h-full w-full。 ★ transform 的 IE 前缀写在行内（脚本拼的 translateX），这里只管过渡。 */ .ym-bar { position: relative; width: 100%; height: 8px; overflow: hidden; border-radius: 9999px; background-color: rgba(96, 141, 164, 0.2); } .ym-bar-in { height: 100%; width: 100%; background-color: #608DA4; -ms-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } /* 事实三格：dl.grid grid-cols-3 gap-3 text-sm → .ui-grid3 + 这里给字号。 （.ui-grid3 已经把 table-layout/border-spacing/margin 都处理好了） */ .ui-grid3.ym-facts { font-size: 14px; line-height: 20px; } /* rounded-xl bg-muted/50 p-3 */ .ym-fact { padding: 12px; border-radius: 16px; background-color: rgba(230, 236, 239, 0.5); } /* dt：text-xs text-muted-foreground mb-1 flex items-center gap-1（图标 14 + gap 4）。 ★ .ui-grid3 上有 border-spacing:12px 0，而 border-spacing 是继承的 —— 这张内层表必须显式归零，不然「图标格」和「文字格」之间会白多 12px。 */ .ym-dt { display: table; border-collapse: separate; border-spacing: 0; margin-bottom: 4px; font-size: 12px; line-height: 16px; color: #616B70; } .ym-dt-i { display: table-cell; vertical-align: middle; font-size: 0; line-height: 0; } .ym-dt-i svg { display: block; width: 14px; height: 14px; } .ym-dt-t { display: table-cell; vertical-align: middle; padding-left: 4px; } .ym-dd { font-weight: 500; color: #111C22; } .ym-dd-n { color: #616B70; font-weight: 400; } /* text-muted-foreground font-normal */ /* 状态那一句：text-xs + text-destructive / text-emerald-700。 ★ 原版这是

里直接塞 svg（preflight 让 svg 成了块级），会变成「图标一行、文字一行」； 看着不是本意（同一份脚本里的其它行都讲究图标和文字并排），这里按**行内**处理： 图标包 span，12/16 的行盒里 14 的图标居中 = top:1px（同 .ym-loading-i 的算法）。 图标与文字之间那个空格是脚本字符串里就有的，所以不给 margin-right。 */ .ym-state { font-size: 12px; line-height: 16px; } .ym-red { color: #E40016; } /* text-destructive */ .ym-grn { color: #007A55; } /* text-emerald-700 */ .ym-state-i { display: inline-block; width: 14px; height: 14px; vertical-align: top; position: relative; top: 1px; } .ym-state-i svg { display: block; width: 14px; height: 14px; } /* ================= 开启表单 / 家长操作（脚本现拼） ================= */ /* 小节标题下的 h3：text-sm font-medium mb-1 */ .ym-h3 { margin-bottom: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: #111C22; } /* 各块之间的分节线：border-t border-border pt-5 mt-5 */ .ym-sep-blk { margin-top: 20px; padding-top: 20px; border-top: 1px solid #D9DFE2; } /* 表单行：flex flex-wrap items-end gap-2 / items-center gap-2。 行距一律换成第二格起的 padding-left（IE 没有 gap）。 font-size/line-height 归零：格子只装按钮时行盒会带 20 的行高， 底部对齐就会差一截（p-community.css 里按钮格同一套处理）。 */ .ym-row, .ym-row-mid { display: table; border-collapse: separate; border-spacing: 0; font-size: 0; line-height: 0; } .ym-row > * + *, .ym-row-mid > * + * { padding-left: 8px; } .ym-row-c, .ym-row-cm { display: table-cell; } .ym-row-c { vertical-align: bottom; } /* items-end */ .ym-row-cm { vertical-align: middle; } /* items-center */ /* 紧跟输入框的量词（分钟 / 时 / 年 / 月）：text-sm text-muted-foreground， 行内行那些还带 pb-2 —— 底对齐时文字要抬到输入框文字那一行（36 里 20 的行居中 = 下留 8）。 ★ font-size 要自己写回来：.ym-row 归零了。 */ .ym-u { padding-bottom: 8px; font-size: 14px; line-height: 20px; color: #616B70; } /* 出生年月那一行：flex items-center gap-2（输入框 96 + 年 + 输入框 96 + 月）。 四格表格，格子按内容收缩，整表贴左（display:table 不写 width 时是收缩宽度，跟 flex 一样）。 */ .ym-inline { display: table; border-collapse: separate; border-spacing: 0; } .ym-inline > * + * { padding-left: 8px; } .ym-inline-c { display: table-cell; vertical-align: middle; font-size: 14px; line-height: 20px; color: #616B70; } /* 开启按钮那一行：mt-5 flex justify-end */ .ym-act-r { margin-top: 20px; text-align: right; } /* 忘记密码那一行：flex flex-wrap items-start gap-1.5 text-xs text-muted-foreground mt-4。 图标按 items-start 顶对齐：vertical-align:top + top:1px（文字 12/16 的半行距约 1px， 同 .ui-hint-ic 的 +2 那个道理，那边是 11/16.5 所以补得更多）。 */ .ym-tip2 { margin-top: 16px; font-size: 12px; line-height: 16px; color: #616B70; } .ym-tip2-i { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: top; position: relative; top: 1px; } .ym-tip2-i svg { display: block; width: 14px; height: 14px; } .ym-link { margin: 0 4px; color: #608DA4; text-decoration: none; } /* text-primary mx-1 */ .ym-link:hover { text-decoration: underline; } /* ---- 绿色按钮：bg-emerald-600 hover:bg-emerald-700 text-white ---- 尺寸/圆角/内边距全由 .ui-btn（h-9）或 .ui-btn-sm（h-8）给，这里**只补两个颜色** —— style.css 3657 行有一条 .ym-btn-green 是同一对色（青少年弹窗的绿按钮），但它连带写了 line-height:36px，套到 .ui-btn-sm 那颗 h-8 的开关上字会矮 4px，所以没有复用、只抄了色值。 色值取自 style.css 里已有的那套（oklch 换算值）；原版编译产物给的是 rgb 兜底 rgb(0,150,105)/rgb(0,120,87)，差 1-3/255，肉眼不可分，以站内一致为先。 text-white 是显式的白，写 #FFFFFF（.ui-btn-primary 的 #FCFCFC 是 primary-foreground，两者不是一回事）。 */ .ui-btn.ym-btn-em { background-color: #009966; color: #FFFFFF; } .ui-btn.ym-btn-em:hover { background-color: #007A55; color: #FFFFFF; } /* ---- 输入框的宽度档：Input 基类 w-full，调用方再写 w-32 / w-28 / w-24 / w-20 ---- 写成 .ui-input.ym-wXX 的复合选择器，不用赌 p-youth.css 和 style.css 谁先加载。 128 那个还给 PIN 输入框配了 tracking-widest（.1em）。 */ .ui-input.ym-w32 { width: 128px; } .ui-input.ym-w28 { width: 112px; } .ui-input.ym-w24 { width: 96px; } .ui-input.ym-w20 { width: 80px; } .ui-input.ym-tw { letter-spacing: 0.1em; text-align: center; } /* 上面这条 = 原版每个 PIN 输入框都写的 `text-center text-lg tracking-widest`： text-lg 由 .ui-input 自己给（14px），这里补居中与字距。 ★ 居中是最初漏掉的一半 —— 原版四处输入框（youth-password-dialog.tsx 282/314/331、 youth-pin-dialog.tsx 118）全带 text-center，参照版实测 textAlign=center （scripts/_ie/r_ypwd.json 的 inp），我们量出来是 start/left（e_ypwd.js 第一版 两腿都报 start）。IE 不认 text-align:start，别为了对齐 Chrome 的报值改写成 start。 */ /* ---- 输入框的聚焦环 ---- 原版每个 Input 上都有 focus-visible:ring-[3px] focus-visible:border-ring ring-ring/50。IE 没有 :focus-visible，只能退回 :focus（style.css 的 .cpl-in / .rp-select 就是这么做、这么注释的）。这里是页面级覆盖，所以不给每个输入框加类， 直接按容器限定：正文在 .ym-page 里，弹窗在 #y-reset-modal 里。 */ .ym-page .ui-input:focus, #y-reset-modal .ui-input:focus, #y-pwd-modal .ui-input:focus { border-color: #608DA4; box-shadow: 0 0 0 3px rgba(96, 141, 164, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.05); } /* ================= 重置家长密码弹窗（脚本自建，挂在 body 上） ================= 骨架用 style.css 的 .mdl-*（全站弹窗同一套）： fixed inset-0 z-50 → .mdl fixed inset-0 bg-black/50 → .mdl-mask（data-yrst-close 挂它上面） 50%/50% + translate 的居中盒 → .mdl-wrap + .mdl-cell + .mdl-box（表格居中， IE 里比 transform 稳；超出屏幕时 .mdl-wrap 自己滚） ★ 宽度是 **448**，不是 .mdl-box 的默认 512：这个弹窗原版是页面脚本自己拼的 div （className 里只有 `w-full max-w-md`），**不是**站点那个 DialogContent —— 没有 sm:max-w-lg 那条基线，也就没有 style.css 3264 行推的那套「调用方 max-w-* 被基线 吃掉」的事。照类名直译就是 448（和 #youth-modal 同宽），另加 max-h-[90vh] overflow-y-auto（长内容在面板内滚，同 #vip-modal / #youth-modal 的写法）。 正文那层 div.space-y-4 py-2 和 DialogFooter 一样靠相邻选择器补间距。 */ #y-reset-modal .mdl-box { width: 448px; max-height: 90vh; overflow-y: auto; } .mdl-head + .ym-rst-bd { margin-top: 16px; } .ym-rst-bd { padding: 8px 0; } .ym-rst-bd > * + * { margin-top: 16px; } /* space-y-4 */ /* flex flex-col-reverse sm:flex-row sm:justify-end gap-2（≥640 就是一行靠右） */ .ym-rst-ft { margin-top: 16px; text-align: right; font-size: 0; line-height: 0; } .ym-rst-ft .ui-btn + .ui-btn { margin-left: 8px; } /* ================= 关闭青少年模式：家长密码弹窗（脚本自建，挂在 body 上） ================= 出处 youth-password-dialog.tsx 的 mode="disable" 分支，数值照 scripts/_ie/r_ypwd.js 在参照版上量的那份（r_ypwd.json，1440×900）。骨架同上一条 .mdl-*。 ★ 宽度 448，和 #y-reset-modal 同值 —— 它俩在原版**是同一个组件**的不同 mode， DialogContent 都写 sm:max-w-md，同前缀把基线那条 sm:max-w-lg 合并掉，再加 max-h-[85dvh] overflow-y-auto。 */ #y-pwd-modal .mdl-box { width: 448px; max-height: 85vh; overflow-y: auto; } /* DialogHeader 的图标方块：48×48 圆角 16 bg-destructive/10 居中（mx-auto）。 它自己的 mb-2 加 flex gap-2 的那条 8 = 到标题 16（参照版量：方块底 347 → 标题顶 363）。 */ .ym-pwd-ico { width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 16px; background-color: rgba(231, 0, 11, 0.1); line-height: 48px; text-align: center; font-size: 0; } .ym-pwd-ico svg { display: inline-block; vertical-align: middle; width: 24px; height: 24px; color: #E7000B; } /* DialogTitle / DialogDescription 各自挂了 text-center（header 本身是 sm:text-left） */ .ym-pwd-c { text-align: center; } /* 正文：space-y-3 py-2，整块与 header 之间是 DialogContent 的 gap-4 */ .ym-pwd-hd + .ym-pwd-bd { margin-top: 16px; } .ym-pwd-bd { padding: 8px 0; } .ym-pwd-bd > * + * { margin-top: 12px; } /* 11px 那行提示：flex items-start gap-1.5，图标 14×14 带 mt-px。 和 .ym-tip2（12/16）只差字号行高，所以另起一条而不是复用它。 */ .ym-pwd-tip { font-size: 11px; line-height: 17.875px; color: #616B70; } .ym-pwd-tip-i { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: top; position: relative; top: 1px; } .ym-pwd-tip-i svg { display: block; width: 14px; height: 14px; } /* 底部两颗 flex-1 gap-2：正文 398 减去 8 的缝，各 195。 IE 没有 flex，用 table + border-spacing 做那条缝：表格两端也会各被吃掉 8， 所以拿 -8 的外边距把首尾 8 让出去、用 calc 把宽度撑回 16 —— 这样按钮的左右边 和上面的输入框严丝合缝。 */ .ym-pwd-ft { display: table; table-layout: fixed; width: calc(100% + 16px); margin: 16px -8px 0; border-collapse: separate; border-spacing: 8px 0; } .ym-pwd-ft-c { display: table-cell; width: 50%; vertical-align: top; } .ym-pwd-b { display: block; width: 100%; } /* bg-destructive hover:bg-destructive/90。★ 实测 #E7000B —— 参照版那条 oklch(0.577 0.245 27.325) 画进 canvas 再读回来就是它，和 .mdl-btn-destructive 同一个值。注意 .ui-btn-danger 用的 #E40016 是另一支红，这里不能拿它顶。 */ .ym-pwd-danger { background-color: #E7000B; color: #FFFFFF; } .ym-pwd-danger:hover { background-color: rgba(231, 0, 11, 0.9); color: #FFFFFF; }