/** * WAISG 颜色布局 · 核心 CSS（悬浮按钮 / 切换过渡 / 图片降亮度） * * 配套 JS：assets/js/color-scheme.js；暗色变量与皮肤在 color-scheme-skin.css。 * 状态契约 class（挂或，两者任一生效）： * .waisg-scheme-dark 暗色状态（其它模块只认这个，如代码高亮的暗色配色） * .waisg-dim-imgs 图片降亮度开启（须与 .waisg-scheme-dark 同元素） * .waisg-color-toggle 主题侧切换按钮契约（JS 事件委托） */ /* ── 悬浮切换按钮 ─────────────────────────────────────────── 配色自持 + !important：不受主题 button/svg 全局样式干扰，浅暗两态都保证"底色亮于页面底色 + 图标高对比" */ .waisg-scheme-fab { position: fixed; bottom: 24px; z-index: 99999; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 50%; background: #ffffff !important; color: #1d2327 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22); cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: transform 0.15s, box-shadow 0.15s; appearance: none; -webkit-appearance: none; } .waisg-scheme-fab--right { right: 24px; } .waisg-scheme-fab--left { left: 24px; } .waisg-scheme-fab:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } .waisg-scheme-fab:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; } .waisg-scheme-fab svg { width: 22px; height: 22px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 1 !important; visibility: visible !important; } /* 暗色态：底色明显亮于暗色页面底色（#1b1d20），图标近白 */ :is(html, body).waisg-scheme-dark .waisg-scheme-fab { background: #3a3f47 !important; color: #f2f4f7 !important; border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); } /* 图标随状态切换：浅色显示月亮（点击进暗色），暗色显示太阳。用 !important 让显隐规则权威化——既压过主题对 svg 的全局显隐，又保证 .waisg-scheme-fab svg 的通用样式不会反向盖掉这里的单图标切换 */ .waisg-scheme-fab .ico-sun { display: none !important; } .waisg-scheme-fab .ico-moon { display: block !important; } :is(html, body).waisg-scheme-dark .waisg-scheme-fab .ico-sun { display: block !important; } :is(html, body).waisg-scheme-dark .waisg-scheme-fab .ico-moon { display: none !important; } /* ── 手动切换时的颜色过渡（仅切换瞬间挂 .waisg-scheme-fading，载入不扫色） ── */ html.waisg-scheme-fading body, html.waisg-scheme-fading :is(a, p, h1, h2, h3, h4, h5, h6, li, td, th, blockquote, pre, code, input, textarea, select, button, table, hr, img) { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } @media (prefers-reduced-motion: reduce) { html.waisg-scheme-fading body, html.waisg-scheme-fading :is(a, p, h1, h2, h3, h4, h5, h6, li, td, th, blockquote, pre, code, input, textarea, select, button, table, hr, img) { transition: none; } } /* ── 暗色下图片降亮度（可选开关，缓解白底图刺眼） ────────────── */ :is(html, body).waisg-scheme-dark.waisg-dim-imgs img { filter: brightness(0.85); }