/** * 全局弹窗（后台：轮播&广告 -> 全局弹窗）独立样式。 * * 为什么不继续用 assets/front/ads.css： * 那个文件是旧版PHP模板时代的产物，里面的颜色全部引用 --wpnav-card-bg / * --wpnav-text-color / --wpnav-muted-color / --wpnav-main-radius 这几个变量， * 而这几个变量在换成 React 前端之后已经不存在了。就算把 ads.css 重新加载回来， * 弹窗也会是"透明底 + 继承来的文字颜色"这种没法看的样子。 * * 这份样式统一走 react-src/src/styles/tokens.css 里那套设计变量 * （--wpnav-bg-elevated / --wpnav-glass-* / --wpnav-gradient / --wpnav-radius-lg * / --wpnav-ease ...），所以夜间 / 白天(io-grey-mode) / 简约护眼(io-black-mode) * 三种配色模式会自动跟着变，不需要在这里各写一遍。弹窗是的直接子元素， * 配色模式的 class 就挂在 body 上，变量能正常继承下来。 */ /* ============================ 遮罩 ============================ */ .wpnav-popup-overlay { position: fixed; inset: 0; z-index: 100000; /* 高于登录弹窗(10000)，保证不会被别的浮层压住 */ display: flex; align-items: center; justify-content: center; padding: 24px; /* 不用纯黑半透明，而是带一点点主题色调的深色 + 模糊，跟站内登录弹窗(AuthModal)的观感保持一致 */ background: rgba(8, 9, 14, .62); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); opacity: 0; visibility: hidden; transition: opacity .32s var(--wpnav-ease, cubic-bezier(.22, 1, .36, 1)), visibility .32s var(--wpnav-ease, cubic-bezier(.22, 1, .36, 1)); } /* 白天模式下遮罩不能压那么黑，否则整页发闷 */ body.io-grey-mode .wpnav-popup-overlay { background: rgba(24, 27, 38, .38); } .wpnav-popup-overlay.is-visible { opacity: 1; visibility: visible; } /* ============================ 弹窗主体 ============================ */ .wpnav-popup-box { position: relative; /* 宽度由后台"弹窗宽度(px)"通过内联的 --wpnav-popup-w 传进来。用 min() 而不是直接 max-width：窄屏上自动退回容器宽度，不会溢出。 */ width: min(100%, var(--wpnav-popup-w, 480px)); /* overflow:hidden 是为了让上边缘那条渐变细线和四角的圆角对齐裁切；内容超长时的滚动交给里面的 .wpnav-popup-body 处理，不放在这一层。 */ overflow: hidden; border: 1px solid var(--wpnav-border, rgba(255, 255, 255, .08)); border-radius: var(--wpnav-radius-lg, 24px); background-color: var(--wpnav-bg-elevated, #12141f); /* 顶部一层极淡的光晕，让纯色面板不至于太"平"。用背景图层而不是 ::after 伪元素——伪元素留给下面"内容超长时的底部淡出"用了。 */ background-image: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .055), transparent 62%); color: var(--wpnav-text, #ebebeb); /* 两层阴影：一层大范围的柔和落影撑出"浮起来"的层次，一层极淡的内描边高光勾出上边缘——这是玻璃质感的关键，比单纯加大阴影更像回事。 */ box-shadow: 0 32px 80px -24px rgba(0, 0, 0, .7), 0 4px 16px -8px rgba(0, 0, 0, .4), var(--wpnav-glass-highlight, inset 0 1px 0 rgba(255, 255, 255, .1)); transform: translateY(18px) scale(.96); opacity: 0; transition: transform .42s var(--wpnav-ease, cubic-bezier(.22, 1, .36, 1)), opacity .32s ease; } body.io-grey-mode .wpnav-popup-box { background-image: radial-gradient(120% 70% at 50% 0%, rgba(124, 92, 255, .05), transparent 62%); box-shadow: 0 32px 80px -24px rgba(60, 66, 92, .28), 0 4px 16px -8px rgba(60, 66, 92, .18), var(--wpnav-glass-highlight, inset 0 1px 0 rgba(255, 255, 255, .6)); } .wpnav-popup-overlay.is-visible .wpnav-popup-box { transform: translateY(0) scale(1); opacity: 1; } /* 顶边那条主题色渐变细线——整个弹窗唯一的彩色元素。一条 1px 的线就能把"这是本站的弹窗"点出来，比给标题加彩色、给按钮填渐变要克制得多，也更耐看。颜色跟着后台"主题强调色"走。两端用 mask 淡出：整条铺满会显得像个色块拼在顶上，中间实、两头虚才像"一道光扫过边缘"，也不会跟圆角相接的地方硬生生断掉。 */ .wpnav-popup-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: var(--wpnav-gradient, linear-gradient(135deg, #7c5cff, #ff5c9a 60%, #35d0ff)); opacity: .9; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); } /* ============================ 内容区 ============================ */ .wpnav-popup-body { position: relative; z-index: 1; /* 压在上面那层光晕之上 */ padding: 34px 32px 30px; /* 内容再长也不会把弹窗撑出屏幕，超出部分在这一层内部滚动 */ max-height: min(72vh, 620px); overflow-y: auto; overscroll-behavior: contain; /* 内部滚到底之后不会带着整个页面继续滚 */ } /* 内容超长需要滚动时，底部盖一层由透明渐变到面板底色的淡出，暗示"下面还有"。不滚动时不加这个类，免得平白在底部糊一层。 .is-scrolled-end（已经滚到底了）时淡出消失，见 popup.js。 */ .wpnav-popup-box.is-scrollable::after { content: ''; position: absolute; left: 1px; right: 1px; bottom: 0; height: 56px; background: linear-gradient(to bottom, transparent, var(--wpnav-bg-elevated, #12141f) 82%); border-radius: 0 0 var(--wpnav-radius-lg, 24px) var(--wpnav-radius-lg, 24px); pointer-events: none; z-index: 2; opacity: 1; transition: opacity var(--wpnav-dur-med, 320ms) var(--wpnav-ease, ease); } .wpnav-popup-box.is-scrollable.is-scrolled-end::after { opacity: 0; } .wpnav-popup-title { margin: 0 0 12px; padding-right: 28px; /* 给右上角关闭按钮让位，标题长了也不会顶到它 */ font-size: 19px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; color: var(--wpnav-text, #ebebeb); } .wpnav-popup-content { font-size: 14px; line-height: 1.8; color: var(--wpnav-text-dim, #9e9e9e); word-break: break-word; } .wpnav-popup-content > *:first-child { margin-top: 0; } .wpnav-popup-content > *:last-child { margin-bottom: 0; } .wpnav-popup-content p { margin: 0 0 .85em; } .wpnav-popup-content img { max-width: 100%; height: auto; display: block; border-radius: var(--wpnav-radius-sm, 10px); margin: 4px 0; } .wpnav-popup-content h1, .wpnav-popup-content h2, .wpnav-popup-content h3, .wpnav-popup-content h4 { margin: 1.2em 0 .5em; font-size: 15px; font-weight: 600; color: var(--wpnav-text, #ebebeb); } .wpnav-popup-content ul, .wpnav-popup-content ol { margin: 0 0 .85em; padding-left: 1.3em; list-style: revert; /* 主题全局把 ul 的圆点去掉了，弹窗正文里要还原回来 */ } .wpnav-popup-content li { margin-bottom: .3em; } .wpnav-popup-content a { color: var(--wpnav-accent-a, #7c5cff); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--wpnav-dur-fast, 160ms) var(--wpnav-ease, ease); } .wpnav-popup-content a:hover { border-bottom-color: currentColor; } .wpnav-popup-content hr { border: none; border-top: 1px solid var(--wpnav-border, rgba(255, 255, 255, .08)); margin: 1.2em 0; } /* ============================ 关闭按钮 ============================ */ /* 走站内统一的"液态玻璃"那套变量，跟侧边栏/卡片上的小按钮是同一种质感 */ .wpnav-popup-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--wpnav-glass-border, rgba(255, 255, 255, .2)); border-radius: var(--wpnav-radius-pill, 999px); background: var(--wpnav-glass-bg, rgba(255, 255, 255, .07)); -webkit-backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%)); backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%)); color: var(--wpnav-text-dim, #9e9e9e); cursor: pointer; transition: color var(--wpnav-dur-fast, 160ms) var(--wpnav-ease, ease), border-color var(--wpnav-dur-fast, 160ms) var(--wpnav-ease, ease), background var(--wpnav-dur-fast, 160ms) var(--wpnav-ease, ease), transform var(--wpnav-dur-med, 320ms) var(--wpnav-ease, ease); } .wpnav-popup-close:hover { color: var(--wpnav-text, #ebebeb); border-color: var(--wpnav-glass-border-hover, rgba(255, 255, 255, .4)); background: var(--wpnav-glass-bg-hover, rgba(255, 255, 255, .14)); transform: rotate(90deg); /* 转90度：轻量但很有反馈感的一个细节 */ } .wpnav-popup-close:focus-visible { outline: 2px solid var(--wpnav-accent-a, #7c5cff); outline-offset: 2px; } /* ============================ 窄屏 ============================ */ @media (max-width: 480px) { .wpnav-popup-overlay { padding: 16px; } .wpnav-popup-body { padding: 30px 22px 24px; max-height: 76vh; } .wpnav-popup-title { font-size: 17px; } } /* 用户在系统里开了"减少动态效果"：只做显隐，不做位移/缩放/旋转 */ @media (prefers-reduced-motion: reduce) { .wpnav-popup-overlay, .wpnav-popup-box, .wpnav-popup-close { transition: opacity .2s ease, visibility .2s ease; } .wpnav-popup-box { transform: none; } .wpnav-popup-close:hover { transform: none; } }