/*! ===== 条件式光影增强（Conditional lighting / depth shadows） ===== * ------------------------------------------------------------------ * 开关：由设置面板内「光影增强」一行控制，状态写入 localStorage， * JS 仅在 上增删一个根级类 .eoc-lighting。 * 作用域：本文件所有规则一律挂在 html.eoc-lighting 之下； * 移除该类即刻回落到原基线外观，不残留任何增强样式。 * 配色：全部走 CSS 变量（由 /css/data/theme-default.json 注入），无硬编码色值， * 明暗双主题自适应。 * 说明：仅增强 box-shadow / text-shadow / 描边等绘制属性， * 不改布局盒模型、不改尺寸与定位，因此不影响原有排版。 * =================================================================== */ /* ---------- 根级变量：仅在此作用域内定义，未开启时整块不参与计算 ---------- */ html.eoc-lighting { --el-shadow-ambient: 0 18px 40px rgba(0, 0, 0, 0.30); --el-shadow-key: 0 2px 6px rgba(0, 0, 0, 0.22); --el-shadow-inset: inset 0 1px 0 var(--btn-inset-hover, rgba(255, 255, 255, 0.10)); --el-ring: 0 0 0 1px var(--highlight-border, var(--blue)); } /* ---------- 卡片 / 区块：环境光 + 主光双层，营造景深 ---------- */ html.eoc-lighting .intro-card, html.eoc-lighting .feature-card, html.eoc-lighting .zh-lang-notice { box-shadow: var(--el-shadow-ambient), var(--el-shadow-key), var(--el-shadow-inset); } /* ---------- 语言选择卡片：增强景深，并保持 hover 抬升手感 ---------- */ html.eoc-lighting .zh-lang-btn { box-shadow: var(--el-shadow-ambient), var(--el-shadow-key), var(--el-shadow-inset); } html.eoc-lighting .zh-lang-btn:hover, html.eoc-lighting .zh-lang-btn:focus-visible { box-shadow: 0 26px 56px rgba(0, 0, 0, 0.38), 0 3px 10px rgba(0, 0, 0, 0.26), var(--el-shadow-inset); } /* 选中态补一圈高光描边，强化当前语言的可辨识度 */ html.eoc-lighting .zh-lang-btn.active { box-shadow: var(--el-shadow-ambient), var(--el-shadow-key), var(--el-shadow-inset), var(--el-ring); } /* ---------- 顶部固定控件：悬浮圆钮的投影与高光描边 ---------- */ html.eoc-lighting .theme-toggle, html.eoc-lighting .hamburger { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), var(--el-shadow-inset); } html.eoc-lighting .theme-toggle:hover, html.eoc-lighting .hamburger:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34), 0 0 16px var(--accent-glow, transparent), var(--el-shadow-inset); } /* ---------- 侧边栏 HUD：加深外部投影，与页面拉开层次 ---------- */ html.eoc-lighting .settings-menu.sidebar { box-shadow: 0 28px 64px rgba(0, 0, 0, 0.42), var(--el-shadow-inset); } /* ---------- 主按钮：保留原有渐变，追加立体投影与内高光 ---------- */ html.eoc-lighting .btn { box-shadow: 0 14px 32px var(--accent-glow-strong, rgba(0, 0, 0, 0.28)), var(--el-shadow-inset); } html.eoc-lighting .btn:hover { box-shadow: 0 20px 44px var(--accent-glow-strong, rgba(0, 0, 0, 0.34)), var(--el-shadow-inset); } /* ---------- 标题：为渐变文字追加光晕，与既有 drop-shadow 叠加生效 ---------- */ html.eoc-lighting .area-title { filter: drop-shadow(0 0 12px var(--title-glow)) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28)); } /* ---------- 背景光影板：开启时增强辉光强度 ---------- */ html.eoc-lighting .glow-board { opacity: 1; } /* 若用户同时关闭了「光影映射」，回落到原有关闭态，不与此开关冲突 */ html.eoc-lighting.glow-off .glow-board { opacity: 0; } /* ---------- 无障碍：减弱动态效果时，仅禁用本作用域的阴影过渡 ---------- */ @media (prefers-reduced-motion: reduce) { html.eoc-lighting * { transition-duration: 0.01ms !important; } }