/* ============================================================ 移动端交互体验统一（全局，外置） ------------------------------------------------------------ 目标：消除移动端 WebKit 原生点击高亮造成的体验割裂。根因：移动 WebKit 默认 -webkit-tap-highlight-color 会在点击时渲染一个与组件圆角无关的蓝色矩形遮罩，覆盖站点自定义的圆角按压效果。本文件只做「交互反馈层」的统一，严格不动以下业务属性： - 不改任何组件的布局、尺寸、padding、原始 border-radius - 不改点击回调、href 跳转目标 - 不改桌面端既有表现（桌面 WebKit 无 tap-highlight，规则自然不生效）顺序约定：本文件须在 css/index.css 之后加载，作为全局兜底补充。 ============================================================ */ /* ============================================================ 1. 禁用浏览器原生矩形点击高亮覆盖所有交互目标：链接 / 按钮 / 自定义控件 / 可点击卡片 / 展开触发器。不在此处改任何尺寸与圆角 —— 组件自身的 border-radius 保持不变，按压视觉完全交给站点自定义的 :active 规则（见第 2 节）。 ============================================================ */ a, button, [role="button"], [role="link"], [role="tab"], [role="option"], [role="menuitem"], [role="switch"], label, summary, input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"], select, /* 站点自定义交互控件：可点击卡片、展开触发器、图标按钮 */ .intro-card, .feature-card, .zh-lang-btn, .zh-action-btn, .zh-nav-link, .zh-search-btn, .back-link, .sidebar-link, .sidebar-block-link, .sidebar-notice, .theme-toggle, .hamburger, .search-result, .search-clear, .search-mode-trigger, .search-mode-option, .notify-banner, .privacy-banner-btn, .first-visit-hint__close, .lang-redirect-toast { -webkit-tap-highlight-color: transparent; } /* ============================================================ 2. 保障自定义 :active 按压态在移动端生效移动 WebKit 存在已知问题：若祖先节点没有 touch 事件监听，首次 tap 可能不触发 :active。通用解法是在上挂一个空 touchstart 监听（由脚本完成，此处仅说明），CSS 侧同时确保：按压态沿用组件原有 border-radius / 阴影 / 主题色变量，不新增或覆盖圆角与尺寸，只做「视觉强度」层面的表达。 ============================================================ */ @media (hover: none) and (pointer: coarse) { /* 触屏设备上用 :active 表达按压反馈（桌面 hover 在此类设备无意义） */ a:active, button:active, [role="button"]:active, [role="option"]:active, [role="switch"]:active, .zh-lang-btn:active, .zh-action-btn:active, .zh-nav-link:active, .zh-search-btn:active, .back-link:active, .sidebar-link:active, .sidebar-block-link:active, .feature-card:active, .search-result:active, .search-mode-option:active { /* 只调整颜色与阴影强度，不动布局与圆角，保证形状与组件一致 */ transform: none; /* 位移已在各组件自有规则中定义，此处不覆盖 */ transition-duration: 0.08s; /* 按压反馈需即时，缩短过渡 */ filter: brightness(0.94); } /* 暗色主题下 brightness 压暗不明显，改用阴影内凹表达 */ body[data-theme="dark"] a:active, body[data-theme="dark"] button:active, body[data-theme="dark"] [role="button"]:active, body[data-theme="dark"] .zh-lang-btn:active, body[data-theme="dark"] .zh-action-btn:active, body[data-theme="dark"] .sidebar-link:active, body[data-theme="dark"] .search-result:active, body[data-theme="dark"] .search-mode-option:active { filter: none; box-shadow: inset 0 2px 8px var(--accent-glow); } } /* ============================================================ 3. 无障碍：:focus-visible 现代焦点模式 - 键盘 Tab 导航（含移动端外接键盘）→ 显示焦点环 - 普通手指触摸 → 不显示多余轮廓严禁使用无条件 *:focus { outline: none }，此处只收敛「非键盘触发」的默认 outline，键盘可达性完整保留。 ============================================================ */ /* 先移除鼠标/触摸点击产生的默认轮廓，再由 :focus-visible 补回键盘焦点环 */ a:focus:not(:focus-visible), button:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible), [role="option"]:focus:not(:focus-visible), [role="switch"]:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), summary:focus:not(:focus-visible) { outline: none; } /* 键盘导航焦点环：使用站点主题蓝色，保证明暗双主题均可见 */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, [role="option"]:focus-visible, [role="menuitem"]:focus-visible, [role="switch"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: inherit; /* 焦点环沿用组件自身圆角，不产生矩形割裂 */ } /* ============================================================ 4. 修复移动端附带副作用仅对「纯 UI 交互元素」禁用长按菜单与误选文字；正文 / 描述 / 文章区域必须保留正常文本选择能力。严禁使用全局通配符 * { -webkit-user-select: none }。 ============================================================ */ button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], [role="switch"], label, summary, .theme-toggle, .hamburger, .search-clear, .search-mode-trigger, .zh-action-btn, .privacy-banner-btn, .first-visit-hint__close, .notify-banner-dot, .icon-wrap { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; /* 阻止 iOS 长按弹出链接菜单 */ } /* 正文内容区：显式恢复可选中性，防止被上层继承影响 */ p, article, section, h1, h2, h3, h4, h5, h6, li, blockquote, code, pre, .intro-lead, .search-result-title, .search-result-desc, .zh-fact-note, .zh-lang-notice { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /* ============================================================ 5. 减弱动效偏好：按压反馈应立即完成，不做过渡 ============================================================ */ @media (prefers-reduced-motion: reduce) { a:active, button:active, [role="button"]:active, .zh-lang-btn:active, .search-result:active, .search-mode-option:active { transition: none; } }