/* ============================================================ 全站统一对话框组件 · 替代浏览器原生 alert / confirm / prompt 前台与后台共用，视觉与既有 .modal-box（举报弹窗）保持一致 依赖变量：--primary --primary-600 --primary-soft --bad --bad-bg --ok --ok-bg --warn --warn-bg --ink --ink-2 --muted --faint --line --line-2 --surface --soft --radius --font ============================================================ */ /* 打开弹窗时锁定背景滚动（由 JS 加在 上） */ html.rsm-lock, html.rsm-lock body { overflow: hidden !important; } /* ---------- 遮罩 ---------- */ .rsm-mask { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: rsmFade .16s ease; } /* ---------- 容器 ---------- */ .rsm-box { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 424px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); background: var(--surface); color: var(--ink-2); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .32); overflow: hidden; font-family: var(--font); font-size: 14px; line-height: 1.7; animation: rsmPop .2s cubic-bezier(.2, .8, .3, 1); } .rsm-wide { max-width: 520px; } /* 容器仅用于接收程序化焦点，不显示焦点环（按钮仍保留 :focus-visible 环） */ .rsm-box:focus { outline: none; } /* ---------- 头部 ---------- */ .rsm-head { display: flex; align-items: flex-start; gap: 11px; padding: 20px 22px 0; } .rsm-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.45; color: var(--ink); word-break: break-word; } .rsm-close { flex: none; width: 30px; height: 30px; margin: -3px -4px 0 0; border: none; border-radius: 8px; background: var(--soft); color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; transition: background .12s, color .12s; } @media (hover:hover) and (pointer:fine){.rsm-close:hover { background: var(--line); color: var(--ink); }} /* ---------- 图标 ---------- */ .rsm-ico { flex: none; width: 34px; height: 34px; margin-top: -2px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 700; line-height: 1; } .rsm-ico svg { width: 18px; height: 18px; display: block; } .rsm-ico-info { background: var(--primary-soft); color: var(--primary-600); } .rsm-ico-ok { background: var(--ok-bg); color: var(--ok); } .rsm-ico-warn { background: var(--warn-bg); color: var(--warn); } .rsm-ico-danger { background: var(--bad-bg); color: var(--bad); } /* ---------- 内容区 ---------- */ .rsm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 22px 2px; -webkit-overflow-scrolling: touch; } .rsm-head:not(:has(.rsm-ico)) + .rsm-body { padding-top: 14px; } .rsm-box.rsm-noicon .rsm-body { padding-top: 14px; } .rsm-msg { font-size: 14px; line-height: 1.75; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; } .rsm-msg:empty { display: none; } .rsm-body > .rsm-msg + .rsm-fields { margin-top: 14px; } /* ---------- 表单字段 ---------- */ .rsm-fields { display: flex; flex-direction: column; gap: 13px; } .rsm-field { display: flex; flex-direction: column; gap: 6px; } .rsm-field > label { font-size: 13px; font-weight: 600; color: var(--ink-2); } .rsm-field > label .rsm-req { color: var(--bad); margin-left: 2px; } .rsm-input, .rsm-textarea, .rsm-select { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: 14px; line-height: 1.6; outline: none; transition: border-color .14s, box-shadow .14s; } .rsm-textarea { min-height: 92px; resize: vertical; } .rsm-select { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer; } .rsm-input:focus, .rsm-textarea:focus, .rsm-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .rsm-input:disabled, .rsm-textarea:disabled { background: var(--soft); color: var(--faint); cursor: not-allowed; } .rsm-field .rsm-tip { font-size: 12px; line-height: 1.6; color: var(--faint); } .rsm-field.is-invalid .rsm-input, .rsm-field.is-invalid .rsm-textarea, .rsm-field.is-invalid .rsm-select { border-color: var(--bad); } .rsm-field.is-invalid .rsm-input:focus, .rsm-field.is-invalid .rsm-textarea:focus { box-shadow: 0 0 0 3px var(--bad-bg); } /* 勾选项 */ .rsm-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; user-select: none; } .rsm-check input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--primary); flex: none; cursor: pointer; } /* 错误提示（全局） */ .rsm-hint { padding: 0 22px; font-size: 12.5px; line-height: 1.6; color: var(--bad); min-height: 0; } .rsm-hint:not(:empty) { padding-top: 10px; } /* ---------- 底部按钮 ---------- */ .rsm-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 16px 22px 18px; } .rsm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 88px; padding: 9px 18px; border: 1px solid transparent; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.5; cursor: pointer; transition: filter .14s, background .14s, color .14s, border-color .14s, opacity .14s; } .rsm-btn:active { transform: translateY(.5px); } .rsm-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .rsm-btn[disabled] { opacity: .6; cursor: not-allowed; } .rsm-btn-primary { background: var(--primary); color: #fff; } @media (hover:hover) and (pointer:fine){.rsm-btn-primary:hover:not([disabled]) { background: var(--primary-600); }} .rsm-btn-danger { background: var(--bad); color: #fff; } @media (hover:hover) and (pointer:fine){.rsm-btn-danger:hover:not([disabled]) { filter: brightness(.92); }} .rsm-btn-ghost { background: var(--soft); color: var(--ink-2); border-color: var(--line); } @media (hover:hover) and (pointer:fine){.rsm-btn-ghost:hover:not([disabled]) { background: var(--line-2); color: var(--ink); }} /* ---------- 轻提示（不依赖页面元素，后台也可用） ---------- */ .rsm-toast { position: fixed; left: 50%; top: 80px; z-index: 1400; max-width: min(84vw, 420px); padding: 10px 18px; border-radius: 10px; background: #0f172a; color: #f8fafc; font-family: var(--font); font-size: 13.5px; line-height: 1.6; text-align: center; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); opacity: 0; transform: translateX(-50%) translateY(-12px); transition: opacity .18s, transform .18s; pointer-events: none; word-break: break-word; } .rsm-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); } .rsm-toast.is-ok { background: var(--ok); color: #fff; } .rsm-toast.is-err { background: var(--bad); color: #fff; } /* ---------- 动画 ---------- */ @keyframes rsmFade { from { opacity: 0; } to { opacity: 1; } } @keyframes rsmPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes rsmUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } } /* ---------- 移动端：底部抽屉式 ---------- */ @media (max-width: 560px) { .rsm-mask { align-items: flex-end; padding: 0; } .rsm-box { max-width: none; max-height: calc(100dvh - 48px); border-radius: 18px 18px 0 0; animation: rsmUp .24s cubic-bezier(.2, .8, .3, 1); } .rsm-head { padding: 18px 18px 0; } .rsm-head h3 { font-size: 16px; } .rsm-body { padding: 12px 18px 2px; } .rsm-hint { padding: 0 18px; } .rsm-foot { padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px)); gap: 8px; } .rsm-btn { flex: 1 1 0; min-width: 0; padding: 11px 12px; } } /* ---------- 夜间模式补充 ---------- */ [data-theme="dark"] .rsm-mask { background: rgba(2, 6, 16, .68); } [data-theme="dark"] .rsm-box { box-shadow: 0 24px 64px rgba(0, 0, 0, .55); } [data-theme="dark"] .rsm-close { background: var(--soft); color: var(--muted); } @media (hover:hover) and (pointer:fine){[data-theme="dark"] .rsm-close:hover { background: #2f3d59; color: var(--ink); }} [data-theme="dark"] .rsm-toast { background: #26324a; color: #e9eef8; } /* ---------- 减少动效偏好 ---------- */ @media (prefers-reduced-motion: reduce) { .rsm-mask, .rsm-box, .rsm-toast { animation: none !important; transition: none !important; } }