/* ============================================================ Nova CMS — nova.js 配套精简 UI 样式 (nova-ui.css) 版本: 1.1.0 作用范围: Toast 通知 / 验证码弹窗 / 表单字段错误 / 富文本表格响应式 ============================================================ ★ 此文件是「跨主题复用」的精简版，与 nova.css 区别： - nova.css 含 reset/utility（仅 nova-template-zh.v1 本主题用） - nova-ui.css 纯 UI 组件样式，可被任意主题直接引入，对宿主样式零侵入 ★ 接入方式（其他主题）: 1. 复制本文件到 /assets/css/nova-ui.css 2. 在含表单的模板 加： 3. 引入 nova.js（同目录的 scripts/nova.js） ★ 升级注意: - 本文件是 canonical 源，修改后需同步到所有派生主题 - 升级流程见 docs/theme-guide/ui-kit/README.md ============================================================ */ /* ---------- Nova Toast 通知 ---------- */ .nova-toast-wrap { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .nova-toast { padding: 10px 22px; border-radius: 6px; font-size: 14px; color: #fff; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; pointer-events: auto; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,.18); } .nova-toast.nova-show { opacity: 1; transform: translateY(0); } .nova-toast-success { background: #00b42a; } .nova-toast-error { background: #f53f3f; } .nova-toast-warning { background: #ff7d00; } .nova-toast-info { background: #165dff; } /* ---------- 验证码弹窗 ---------- */ .nova-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.52); display: none; /* nova.js 控制显示 */ align-items: center; justify-content: center; z-index: 9998; } .nova-captcha-box { background: #fff; border-radius: 16px; padding: 36px 32px 28px; min-width: 320px; max-width: 420px; width: 90vw; box-shadow: 0 12px 48px rgba(0,0,0,.22); text-align: center; } .nova-captcha-box__title { font-size: 18px; font-weight: 600; color: #1d2129; margin-bottom: 6px; } .nova-captcha-box__hint { font-size: 13px; color: #86909c; margin-bottom: 24px; } .nova-captcha-box__q { font-size: 28px; font-weight: 700; color: #165dff; letter-spacing: 2px; margin-bottom: 18px; min-height: 38px; } .nova-captcha-box__input { width: 100%; height: 48px; border: 1.5px solid #e5e6eb; border-radius: 8px; text-align: center; font-size: 20px; font-weight: 600; color: #1d2129; outline: none; transition: border-color .2s; } .nova-captcha-box__input:focus { border-color: #165dff; } .nova-captcha-box__err { min-height: 20px; font-size: 12px; color: #f53f3f; margin-top: 6px; margin-bottom: 4px; } .nova-captcha-box__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; } .nova-captcha-box__refresh { font-size: 13px; color: #86909c; text-decoration: none; transition: color .15s; } .nova-captcha-box__refresh:hover { color: #165dff; } .nova-captcha-box__btn { height: 38px; padding: 0 20px; border-radius: 6px; font-size: 14px; cursor: pointer; border: none; transition: opacity .15s; } .nova-captcha-box__btn--cancel { background: #f2f3f5; color: #4e5969; } .nova-captcha-box__btn--cancel:hover { opacity: .8; } .nova-captcha-box__btn--confirm { background: #165dff; color: #fff; font-weight: 500; } .nova-captcha-box__btn--confirm:hover { opacity: .88; } /* ---------- 表单字段验证错误 ---------- */ .nova-field-invalid { border-color: #f53f3f !important; outline: none; } .nova-field-error { display: block; font-size: 12px; color: #f53f3f; margin-top: 4px; padding-left: 2px; } /* ---------- 富文本内容渲染 (.nv-richtext) 表格响应式 ---------- * .nv-richtext 是平台级 class，所有主题富文本区域均应用此样式。 * 主题可在自己的 CSS 中对特定容器（如 .team-member__detail）追加更高优先级的覆盖。 * * 策略（参考 polymole-template-zh.v1 patterns.css）： * 含图表格 → 单列堆叠（图集排版场景） * 纯文字表格 → 横向滚动（保留表格语义，不破坏列对齐） * 用 :has() 选择器（Chrome 105+ / Safari 15.4+ / Firefox 121+，2026 覆盖率充足） * ---------------------------------------------------------------- */ .nv-richtext table { width: 100%; table-layout: auto; } .nv-richtext td, .nv-richtext th { vertical-align: top; } @media (max-width: 767px) { /* 含图表格：取消表格布局，按行块级堆叠 */ .nv-richtext table:has(img) { display: block; border: 0; min-width: 0 !important; width: 100% !important; } .nv-richtext table:has(img) colgroup, .nv-richtext table:has(img) col { display: none; } .nv-richtext table:has(img) thead, .nv-richtext table:has(img) tbody, .nv-richtext table:has(img) tr { display: block; width: 100%; min-width: 0 !important; } .nv-richtext table:has(img) td, .nv-richtext table:has(img) th { display: block; width: 100% !important; min-width: 0 !important; box-sizing: border-box; border: 0; padding: 8px 0; } /* 图片高度兜底：编辑器常写入 height inline style，手机端强制 auto */ .nv-richtext table:has(img) img { height: auto !important; max-width: 100% !important; } /* 纯文字表格：横向滚动，不破坏列对齐 */ .nv-richtext table:not(:has(img)) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }