/** * Qin_EasyAccess * * 两部分： * A. 偏好效果 —— 由 上的 data-ea-* 属性驱动，作用于整站 * B. 工具条自身样式 —— 命名空间 .qin-ea，不影响主题 * * 纯 CSS，不依赖主题 LESS，因此在 2.3.4 与 2.4.8、以及六个站的定制主题上 * 行为一致。选择器保持低特异性，只在必须压过主题时才提高。 */ /* ══ A. 偏好效果 ═══════════════════════════════════════════════ */ /* 文字间距 —— WCAG SC 1.4.12 的目标值 */ html[data-ea-spacing="on"] body, html[data-ea-spacing="on"] p, html[data-ea-spacing="on"] li, html[data-ea-spacing="on"] dd, html[data-ea-spacing="on"] dt, html[data-ea-spacing="on"] td, html[data-ea-spacing="on"] th, html[data-ea-spacing="on"] label, html[data-ea-spacing="on"] a { line-height: 1.6 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } html[data-ea-spacing="on"] p { margin-bottom: 2em !important; } /* 链接下划线 —— WCAG SC 1.4.1：不能只靠颜色区分链接 */ html[data-ea-links="on"] a:not([class*="button"]):not([class*="btn"]):not(.action) { text-decoration: underline !important; text-underline-offset: 2px; } /* 暂停动画 —— WCAG SC 2.2.2 */ html[data-ea-motion="on"] *, html[data-ea-motion="on"] *::before, html[data-ea-motion="on"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* 用户未做选择时跟随系统设置，不用工具条的默认值覆盖操作系统偏好 */ @media (prefers-reduced-motion: reduce) { html:not([data-ea-motion="off"]) *, html:not([data-ea-motion="off"]) *::before, html:not([data-ea-motion="off"]) *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* 增强焦点环 —— WCAG SC 2.4.13 */ html[data-ea-focus="on"] :focus { outline: 3px solid #1b44e8 !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9) !important; } html[data-ea-focus="on"] :focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* * 主导航例外：Luma 用 jQuery UI Menu，方向键移动时是脚本调用 .focus() * 程序化聚焦，浏览器不一定把它算作 focus-visible。上面那条重置会把 * 键盘用户在导航里的焦点环整个清掉——WCAG 2.4.7 AA 失败。 * 这里用更高的特异性顶回来。 */ html[data-ea-focus="on"] .navigation a:focus:not(:focus-visible) { outline: 3px solid #1b44e8 !important; outline-offset: -3px !important; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.95) !important; } html[data-ea-focus="on"] :focus-visible { outline: 3px solid #1b44e8 !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9) !important; } /* * 配色模式。 * * dark 与 mono 用 filter 实现，是权衡后的选择：一行覆盖全站、不需要为 * 六个定制主题各写一套色板。代价是图片会被反色，所以下面把媒体元素 * 和工具条本身反回来。high 走真实颜色覆盖，因为对比度必须可控。 */ html[data-ea-contrast="dark"] { filter: invert(1) hue-rotate(180deg); background: #fff; } html[data-ea-contrast="mono"] { filter: grayscale(1); } html[data-ea-contrast="dark"] img, html[data-ea-contrast="dark"] video, html[data-ea-contrast="dark"] iframe, html[data-ea-contrast="dark"] picture, html[data-ea-contrast="dark"] [style*="background-image"], html[data-ea-contrast="dark"] .qin-ea { filter: invert(1) hue-rotate(180deg); } /* * high —— 高对比。 * * 注意实现方式：白色只画在 body 这一层，内层元素一律 transparent， * 让 body 的底色透上来。 * * 不要写成 `body * { background-color:#fff }`——那样每一层元素都会被 * 独立刷白，页面所有分区、卡片、按钮的边界全部消失，看上去就是一张白纸， * 而且会把 img / svg 一起匹配进去。 */ html[data-ea-contrast="high"] body { background: #fff !important; color: #000 !important; } html[data-ea-contrast="high"] body * { background-color: transparent !important; color: #000 !important; /* 覆盖渐变文字一类的写法：那种情况下 color 是无效的 */ -webkit-text-fill-color: #000 !important; text-shadow: none !important; } /* 媒体元素完全不参与配色覆盖 */ html[data-ea-contrast="high"] img, html[data-ea-contrast="high"] svg, html[data-ea-contrast="high"] svg *, html[data-ea-contrast="high"] video, html[data-ea-contrast="high"] picture, html[data-ea-contrast="high"] canvas, html[data-ea-contrast="high"] iframe, html[data-ea-contrast="high"] object, html[data-ea-contrast="high"] embed { background-color: initial !important; color: initial !important; -webkit-text-fill-color: initial !important; } html[data-ea-contrast="high"] a, html[data-ea-contrast="high"] a * { color: #00109f !important; -webkit-text-fill-color: #00109f !important; text-decoration: underline !important; } /* * 底色统一之后没有色块了，真正的按钮和表单控件靠边框区分。 * * 千万不要在这里写裸的 `.action`。Luma 把这个 class 用得极其泛滥—— * .action.showcart / .action.nav-toggle / .action.view / 分页的 .action.next / * .action.toggle / .action.tocart / .action.delete 等等，其中大量是 * 普通的行内文字链接。给 .action 加边框的结果是满屏黑框。 * 只匹配 button 元素和明确的 primary/secondary 按钮类。 */ html[data-ea-contrast="high"] button, html[data-ea-contrast="high"] .action.primary, html[data-ea-contrast="high"] .action.secondary, html[data-ea-contrast="high"] .action-primary, html[data-ea-contrast="high"] .action-secondary, html[data-ea-contrast="high"] input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), html[data-ea-contrast="high"] select, html[data-ea-contrast="high"] textarea { border: 2px solid #000 !important; background-color: #fff !important; } /* * 工具条自身要保持可辨识：上面的 body * 会把触发按钮也刷成透明底黑字， * 用户就找不到它了。这里逐项还原。 */ html[data-ea-contrast="high"] .qin-ea__trigger { background: var(--qin-ea-accent) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 2px solid #000 !important; } html[data-ea-contrast="high"] .qin-ea__icon { fill: #fff !important; } html[data-ea-contrast="high"] .qin-ea__panel { background-color: #fff !important; border: 2px solid #000 !important; } html[data-ea-contrast="high"] .qin-ea__choice span, html[data-ea-contrast="high"] .qin-ea__reset { background-color: #fff !important; border: 1px solid #000 !important; } /* 关闭按钮是