/* ========================================================================== Helsuo 光效样式与门控（glow.css） -------------------------------------------------------------------------- 与 glow.js 配套，是全站光效规则的唯一来源： ① 变量默认值（--hs-glow-color / -rgb / -strength） ② 已有光效的门控（默认全部关闭，由 html[data-hs-glow-fx~="…"] 打开） ③ 后台「光效管理」面板的实时预览样式 注意：keyframes 定义在各自页面（bannerGlow 在 styles.css、featuredGlow 在 forum.html、qqGlowDrift 在 music.html），本文件只负责「是否启用 + 参数」。 ========================================================================== */ :root { --hs-glow-color: #49b1f5; --hs-glow-rgb: 73, 177, 245; --hs-glow-rgb-2: 115, 219, 255; --hs-glow-strength: 1; } /* ---------------- ① 总开关 ---------------- 光效关闭时把残留的动画/光晕压平，保证「关掉 = 完全没有光效」 */ html[data-hs-glow="off"] .banner-main-title, html[data-hs-glow="off"] .article-card-title .featured-badge, html[data-hs-glow="off"] .article-card-title .hot-badge, html[data-hs-glow="off"] .qq-banner-glow, html[data-hs-glow="off"] .qq-banner-card::before, html[data-hs-glow="off"] .qq-banner-card::after { animation: none !important; } /* ---------------- ② 首页 Banner 标题辉光 ---------------- 原 styles.css 里静态挂载的 animation 移到这里，改为按配置门控； 模糊半径随 --hs-glow-strength 线性缩放（0% 时完全无光晕）。 */ html:not([data-hs-glow-fx~="bannerTitle"]) .banner-main-title { animation: none !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important; } html[data-hs-glow-fx~="bannerTitle"] .banner-main-title { animation: hsBannerGlow 3s ease-in-out 1.8s infinite; } @keyframes hsBannerGlow { 0%, 100% { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 calc(30px * var(--hs-glow-strength)) rgba(var(--hs-glow-rgb), 0.18); } 50% { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 calc(30px * var(--hs-glow-strength)) rgba(255, 255, 255, 0.26), 0 0 calc(100px * var(--hs-glow-strength)) rgba(var(--hs-glow-rgb), 0.45); } } /* ---------------- ③ 论坛「精选」/「HOT」徽章光晕 ---------------- 两种徽章共用同一档光晕与同一个开关，开关状态永远同步。 */ html:not([data-hs-glow-fx~="featuredBadge"]) .article-card-title .featured-badge, html:not([data-hs-glow-fx~="featuredBadge"]) .article-card-title .hot-badge { animation: none !important; } html[data-hs-glow-fx~="featuredBadge"] .article-card-title .featured-badge, html[data-hs-glow-fx~="featuredBadge"] .article-card-title .hot-badge { animation: hsFeaturedGlow 2.4s ease-in-out infinite; } @keyframes hsFeaturedGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--hs-glow-rgb), 0); } 50% { box-shadow: 0 0 calc(12px * var(--hs-glow-strength)) calc(2px * var(--hs-glow-strength)) rgba(var(--hs-glow-rgb), 0.45); } } /* ---------------- ④ 音乐页极光 ---------------- .qq-banner-glow 的渐变底色在 music.html 里用 var(--hs-glow-color) 取色， 这里只控制「显不显示」与整体透明度。 */ html:not([data-hs-glow-fx~="musicAurora"]) .qq-banner-glow, html:not([data-hs-glow-fx~="musicAurora"]) .qq-banner-card::before, html:not([data-hs-glow-fx~="musicAurora"]) .qq-banner-card::after { animation: none !important; opacity: 0 !important; } html[data-hs-glow-fx~="musicAurora"] .qq-banner-glow { opacity: calc(0.35 + 0.65 * var(--hs-glow-strength)); } /* ---------------- ⑤ 后台面板：实时预览 ---------------- */ .glow-preview-card { padding: 18px 22px; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e3e8ef); border-radius: var(--card-radius, 16px); box-shadow: var(--shadow-sm, none); } .glow-preview-title { margin-bottom: 14px; font-size: 14px; font-weight: 700; color: var(--text-primary, #1f2733); } .glow-preview-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .glow-demo { position: relative; padding: 20px 18px; border-radius: 14px; background: var(--bg-primary, #f2f5f9); border: 1px solid var(--border-color, #e3e8ef); overflow: hidden; text-align: center; } /* 预览：发光标题 */ .glow-demo-text { font-size: 18px; font-weight: 800; color: var(--text-primary, #1f2733); text-shadow: 0 0 calc(14px * var(--hs-glow-strength)) rgba(var(--hs-glow-rgb), 0.75); } .glow-demo-badge { display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--hs-glow-color); background: rgba(var(--hs-glow-rgb), 0.14); border: 1px solid rgba(var(--hs-glow-rgb), 0.45); box-shadow: 0 0 calc(10px * var(--hs-glow-strength)) rgba(var(--hs-glow-rgb), 0.45); } /* 预览：极光球 */ .glow-demo-aurora { width: 86px; height: 86px; margin: 0 auto 10px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.55), transparent 55%), radial-gradient(circle at 50% 50%, rgba(var(--hs-glow-rgb), 0.85), transparent 70%); filter: blur(calc(6px - 3px * var(--hs-glow-strength))); animation: hsGlowAurora 6s ease-in-out infinite alternate; } @keyframes hsGlowAurora { from { transform: translateY(-4px) scale(0.96); } to { transform: translateY(4px) scale(1.04); } } /* 预览：折线辉光 */ .glow-demo-line { width: 100%; height: 34px; margin-bottom: 10px; } .glow-demo-line path { fill: none; stroke: var(--hs-glow-color); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 calc(6px * var(--hs-glow-strength)) rgba(var(--hs-glow-rgb), 0.9)); } .glow-demo-note { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-color, #e3e8ef); font-size: 12px; line-height: 1.8; color: var(--text-secondary, #7c8794); } /* 「一键预览」按钮触发的一次性加强闪 */ @keyframes hsGlowFlash { 0% { box-shadow: 0 0 0 0 rgba(var(--hs-glow-rgb), 0); } 35% { box-shadow: 0 0 42px 6px rgba(var(--hs-glow-rgb), 0.45); } 100% { box-shadow: 0 0 0 0 rgba(var(--hs-glow-rgb), 0); } } .glow-preview-card.flash { animation: hsGlowFlash 0.9s ease-out 1; } /* 光效总开关关闭时，预览区同步降级 */ html[data-hs-glow="off"] .glow-preview-card { filter: grayscale(0.6); opacity: 0.6; } /* ---------------- 通用光效类（供页面按需启用） ---------------- 与其它动效类（hs-spot / hs-tilt / hs-ripple）同一范式， 需要哪处发光，加一个 class 即可，颜色/强度统一吃 --hs-glow-* 变量。 */ .hs-glow { box-shadow: 0 0 calc(18px * var(--hs-glow-strength)) rgba(var(--hs-glow-rgb), 0.55); } .hs-glow-soft { box-shadow: 0 0 calc(10px * var(--hs-glow-strength)) rgba(var(--hs-glow-rgb), 0.3); } .hs-glow-text { text-shadow: 0 0 calc(12px * var(--hs-glow-strength)) rgba(var(--hs-glow-rgb), 0.65); } .hs-glow-ring { border-color: rgba(var(--hs-glow-rgb), 0.55); box-shadow: 0 0 0 1px rgba(var(--hs-glow-rgb), 0.25), 0 0 calc(22px * var(--hs-glow-strength)) rgba(var(--hs-glow-rgb), 0.35); } html[data-hs-glow="off"] .hs-glow, html[data-hs-glow="off"] .hs-glow-soft, html[data-hs-glow="off"] .hs-glow-text, html[data-hs-glow="off"] .hs-glow-ring { box-shadow: none; text-shadow: none; border-color: inherit; }