/* ========================================================================== 滑动拼图验证码 · 极验式弹窗组件前台 / 后台共用，零依赖。形态： [ 按钮态 ] 点击按钮进行验证 ← 页面里只有这一条，不占地方 [ 弹窗态 ] 点击后全屏遮罩 + 居中面板：图片画布 / 拖动条 / 底部工具条（关闭·刷新·帮助·品牌） [ 成功态 ] 面板放大淡出关闭，按钮变成绿色「验证成功 ✓」配色自带，不依赖站点主题变量；暗色模式自动切换。面板与遮罩挂在下，避免被父容器的 overflow / transform 裁掉。 ========================================================================== */ /* ------------------------------------------------------------------ 配色 ⚠️ 变量必须同时挂在 .slider-cap 和 .sc-popup 上：弹窗是 append 到的（为了不被父容器 overflow / transform 裁掉），它和触发条不在同一棵子树里，只写在 .slider-cap 上它一个都继承不到。 */ .slider-cap, .sc-popup { --sc-brand: #2b6cf6; --sc-brand-2: #5189ff; --sc-brand-soft: #eaf0ff; --sc-card: #fbfcfd; --sc-card-hover: #ffffff; --sc-border: #e3e6ea; --sc-border-hover: #c4cfe4; --sc-text: #1f2933; --sc-text-2: #4a5568; --sc-text-3: #97a2ad; --sc-rail: #f2f4f7; --sc-ok: #2f9e63; --sc-ok-soft: #eaf7f0; --sc-danger: #d4574e; } /* ------------------------------------------------------------------ 按钮态 */ .slider-cap { position: relative; display: block; width: 100%; max-width: 320px; box-sizing: border-box; font-size: 14px; line-height: 1.4; color: var(--sc-text); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .slider-cap *, .sc-popup * { box-sizing: border-box; } /* 触发条 */ .sc-trigger { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid var(--sc-border); border-radius: 8px; background: var(--sc-card); cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; } .sc-trigger:hover { border-color: var(--sc-border-hover); background: var(--sc-card-hover); box-shadow: 0 2px 10px rgba(43, 108, 246, .10); } .sc-trigger:active { transform: translateY(.5px); } .sc-trigger-ico { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, var(--sc-brand-2), var(--sc-brand)); color: #fff; font-size: 12px; box-shadow: 0 2px 6px rgba(43, 108, 246, .3); } .sc-trigger-ico svg { display: block; } .sc-trigger-text { flex: 1 1 auto; color: var(--sc-text-2); letter-spacing: .2px; } .sc-trigger-brand { flex: 0 0 auto; color: #c2c8d2; display: grid; place-items: center; transition: color .2s ease; } .sc-trigger:hover .sc-trigger-brand { color: #a9b2bf; } /* 已通过 */ .slider-cap.is-pass .sc-trigger { border-color: #b6e2c9; background: var(--sc-ok-soft); cursor: default; } .slider-cap.is-pass .sc-trigger-ico { background: linear-gradient(160deg, #4cb377, var(--sc-ok)); box-shadow: 0 2px 6px rgba(47, 158, 99, .3); } .slider-cap.is-pass .sc-trigger-text { color: var(--sc-ok); font-weight: 600; } .slider-cap.is-pass .sc-trigger:hover { box-shadow: none; border-color: #b6e2c9; } .slider-cap.is-pass .sc-trigger-brand { display: none; } /* 加载中 */ .slider-cap.is-loading .sc-trigger-ico { animation: sc-spin 1s linear infinite; } @keyframes sc-spin { to { transform: rotate(360deg); } } /* ------------------------------------------------------------- 弹窗 */ /* 弹窗打开时锁住页面滚动（挂在上，前后台通用） */ html.sc-lock, html.sc-lock body { overflow: hidden !important; } .sc-popup { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; } .sc-popup.is-open { opacity: 1; visibility: visible; } .sc-mask { position: absolute; inset: 0; background: rgba(15, 22, 36, .42); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); } .sc-panel { position: relative; width: 320px; max-width: calc(100vw - 24px); background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 60px rgba(8, 18, 40, .28), 0 2px 8px rgba(8, 18, 40, .12); transform: scale(.9) translateY(10px); opacity: 0; transition: transform .3s cubic-bezier(.34, 1.42, .64, 1), opacity .22s ease; } .sc-popup.is-open .sc-panel { transform: scale(1) translateY(0); opacity: 1; } /* ------------------------------------------------------------- 画布 */ .sc-stage { position: relative; width: 320px; height: 160px; overflow: hidden; background: var(--sc-rail); touch-action: none; } .sc-stage-inner { position: absolute; left: 0; top: 0; width: 320px; height: 160px; transform-origin: 0 0; } .sc-bg { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 100% 100%; opacity: 0; transition: opacity .3s ease; } .sc-stage.is-ready .sc-bg { opacity: 1; } .sc-piece { position: absolute; left: 0; top: 0; display: block; pointer-events: none; will-change: transform; opacity: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .24)); transition: opacity .18s ease; } .sc-piece.is-show { opacity: 1; } /* 加载骨架 */ .sc-skeleton { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa6b5; font-size: 13px; letter-spacing: .5px; background: linear-gradient(100deg, #f3f5f8 30%, #e9edf3 50%, #f3f5f8 70%); background-size: 220% 100%; animation: sc-shimmer 1.3s ease-in-out infinite; transition: opacity .25s ease; } .sc-stage.is-ready .sc-skeleton { opacity: 0; pointer-events: none; } @keyframes sc-shimmer { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } } /* 画布上的提示（拖动中 / 失败） */ .sc-tip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.94); padding: 6px 16px; border-radius: 999px; background: rgba(18, 26, 38, .8); color: #fff; font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .sc-popup.is-fail .sc-tip { opacity: 1; transform: translate(-50%, -50%) scale(1); background: rgba(190, 74, 66, .92); } .sc-popup.is-fail .sc-stage { animation: sc-shake .42s ease; } @keyframes sc-shake { 0%, 100% { transform: translateX(0); } 18% { transform: translateX(-7px); } 36% { transform: translateX(6px); } 54% { transform: translateX(-4px); } 72% { transform: translateX(3px); } 88% { transform: translateX(-1px); } } /* 关闭按钮（画布右上角） */ .sc-close { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .82); color: #3d4756; font-size: 13px; line-height: 1; cursor: pointer; transition: background .2s ease, transform .2s ease; } .sc-close:hover { background: #fff; transform: rotate(90deg); } /* 成功覆盖层 */ .sc-ok { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(240, 250, 244, .93); color: var(--sc-ok); opacity: 0; transform: scale(1.06); transition: opacity .26s ease, transform .32s cubic-bezier(.34, 1.42, .64, 1); pointer-events: none; } .sc-popup.is-pass .sc-ok { opacity: 1; transform: scale(1); } .sc-ok-mark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sc-ok); color: #fff; box-shadow: 0 6px 18px rgba(47, 158, 99, .34); } .sc-popup.is-pass .sc-ok-mark { animation: sc-pop .42s cubic-bezier(.34, 1.5, .64, 1); } @keyframes sc-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } } .sc-ok-text { font-size: 14px; font-weight: 600; letter-spacing: .5px; } /* ------------------------------------------------------------- 拖动条 */ .sc-bar { padding: 12px; } .sc-rail { position: relative; height: 40px; border-radius: 6px; background: var(--sc-rail); box-shadow: inset 0 1px 2px rgba(20, 30, 45, .06); overflow: hidden; touch-action: none; } .sc-hint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--sc-text-3); font-size: 13px; letter-spacing: .4px; pointer-events: none; transition: opacity .2s ease; } .sc-popup.is-drag .sc-hint, .sc-popup.is-pass .sc-hint { opacity: 0; } .sc-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--sc-brand-soft); transition: width .06s linear; } .sc-popup.is-pass .sc-progress { background: rgba(47, 158, 99, .18); } .sc-handle { position: absolute; left: 0; top: 0; width: 40px; height: 100%; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(180deg, var(--sc-brand-2), var(--sc-brand)); color: #fff; font-size: 15px; cursor: grab; box-shadow: 0 2px 8px rgba(43, 108, 246, .34); will-change: transform; touch-action: none; transition: filter .18s ease, box-shadow .18s ease; } .sc-handle::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); } .sc-handle:hover { filter: brightness(1.05); } .sc-popup.is-drag .sc-handle { cursor: grabbing; box-shadow: 0 3px 14px rgba(43, 108, 246, .46); } .sc-popup.is-pass .sc-handle { background: linear-gradient(180deg, #4cb377, var(--sc-ok)); box-shadow: none; cursor: default; } .sc-popup.is-fail .sc-handle { background: linear-gradient(180deg, #e08079, var(--sc-danger)); } .sc-handle svg { display: block; transition: transform .2s ease; } .sc-popup.is-pass .sc-handle svg { transform: scale(1.1); } /* ------------------------------------------------------------- 底部工具条 */ .sc-tools { display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 8px; border-top: 1px solid #f0f2f5; background: #fcfdfe; } .sc-tool { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #7a8595; font-size: 14px; line-height: 1; cursor: pointer; transition: background .16s ease, color .16s ease, transform .2s ease; } .sc-tool:hover { background: #eef1f5; color: #46536a; } .sc-tool:active { transform: scale(.92); } .sc-tool.is-busy { animation: sc-spin .9s linear infinite; } .sc-brand { margin-left: auto; display: flex; align-items: center; gap: 4px; color: #b4bcc9; font-size: 11px; letter-spacing: .3px; padding-right: 2px; } .sc-brand svg { display: block; } /* 帮助气泡 */ .sc-help { margin: 0 12px 10px; padding: 8px 10px; border-radius: 8px; background: #f5f7fa; color: #66707f; font-size: 12px; line-height: 1.6; display: none; } .sc-help.is-show { display: block; } /* ------------------------------------------------------------- 暗色 */ html[data-theme="dark"] .slider-cap, html[data-theme="dark"] .sc-popup, body.dark .slider-cap, body.dark .sc-popup { --sc-card: #1e232a; --sc-card-hover: #242a32; --sc-border: #333b45; --sc-border-hover: #46536a; --sc-text: #e6ebef; --sc-text-2: #aab4c0; --sc-text-3: #78848f; --sc-rail: #262c34; --sc-brand-soft: #1c2a4a; --sc-ok-soft: #16281e; } html[data-theme="dark"] .sc-panel, body.dark .sc-panel { background: #1a1f26; } html[data-theme="dark"] .sc-skeleton, body.dark .sc-skeleton { color: #6b7480; background: linear-gradient(100deg, #232930 30%, #2b323a 50%, #232930 70%); background-size: 220% 100%; } html[data-theme="dark"] .sc-tools, body.dark .sc-tools { background: #151a20; border-top-color: #262c34; } html[data-theme="dark"] .sc-tool:hover, body.dark .sc-tool:hover { background: #242b33; color: #c3ccd8; } html[data-theme="dark"] .sc-help, body.dark .sc-help { background: #232930; color: #98a3b1; } html[data-theme="dark"] .sc-ok, body.dark .sc-ok { background: rgba(22, 40, 30, .94); } html[data-theme="dark"] .sc-close, body.dark .sc-close { background: rgba(30, 36, 44, .85); color: #d5dde7; } html[data-theme="dark"] .sc-trigger-ico, body.dark .sc-trigger-ico { box-shadow: 0 2px 6px rgba(0, 0, 0, .4); } /* ------------------------------------------------------------- 嵌入位置 */ /* 后台登录页 */ .login-box .slider-cap { margin: 0 auto; max-width: 320px; } /* 前台评论表单 */ .captcha-box .slider-cap { margin-top: 2px; } /* 面板里画布宽度固定 320：窄屏由 JS 计算 scale 后整体缩放，不要用 CSS 去拉伸画布 —— 背景是 320px 位图，拉伸会让缺口错位。 */