|
|
@@ -435,10 +435,52 @@
|
|
|
}
|
|
|
|
|
|
.reader-settings-toggle {
|
|
|
- width: 100%;
|
|
|
- justify-content: space-between;
|
|
|
+ display: inline-flex;
|
|
|
align-items: center;
|
|
|
- padding-inline: 12px;
|
|
|
+ gap: 8px;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ padding: 0;
|
|
|
+ color: #475569;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reader-settings-toggle-track {
|
|
|
+ position: relative;
|
|
|
+ width: 38px;
|
|
|
+ height: 22px;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: #cbd5e1;
|
|
|
+ transition: background-color 160ms ease;
|
|
|
+ box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
|
|
|
+ }
|
|
|
+
|
|
|
+ .reader-settings-toggle.is-selected .reader-settings-toggle-track {
|
|
|
+ background: #0f172a;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reader-settings-toggle-thumb {
|
|
|
+ position: absolute;
|
|
|
+ top: 2px;
|
|
|
+ left: 2px;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
|
|
|
+ transition: transform 160ms ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reader-settings-toggle.is-selected .reader-settings-toggle-thumb {
|
|
|
+ transform: translateX(16px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .reader-settings-toggle-text {
|
|
|
+ min-width: 24px;
|
|
|
+ text-transform: uppercase;
|
|
|
+ letter-spacing: 0.04em;
|
|
|
}
|
|
|
|
|
|
.reader-highlight-colors {
|
|
|
@@ -1258,7 +1300,12 @@
|
|
|
</div>
|
|
|
<div class="reader-settings-group">
|
|
|
<label class="reader-settings-label">文本高亮</label>
|
|
|
- <button id="ttsHighlightToggle" class="reader-settings-option reader-settings-toggle" type="button" aria-pressed="true">开启</button>
|
|
|
+ <button id="ttsHighlightToggle" class="reader-settings-toggle" type="button" aria-pressed="true" aria-label="文本高亮开关">
|
|
|
+ <span class="reader-settings-toggle-track" aria-hidden="true">
|
|
|
+ <span class="reader-settings-toggle-thumb"></span>
|
|
|
+ </span>
|
|
|
+ <span class="reader-settings-toggle-text">ON</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
<div class="reader-settings-group">
|
|
|
<label class="reader-settings-label">高亮颜色</label>
|
|
|
@@ -1709,8 +1756,12 @@
|
|
|
const enabled = isTtsHighlightEnabled();
|
|
|
const colorKey = getTtsHighlightColorKey();
|
|
|
ttsHighlightToggle.classList.toggle('is-selected', enabled);
|
|
|
- ttsHighlightToggle.textContent = enabled ? '开启' : '关闭';
|
|
|
ttsHighlightToggle.setAttribute('aria-pressed', enabled ? 'true' : 'false');
|
|
|
+ ttsHighlightToggle.setAttribute('aria-label', enabled ? '文本高亮已开启' : '文本高亮已关闭');
|
|
|
+ const toggleText = ttsHighlightToggle.querySelector('.reader-settings-toggle-text');
|
|
|
+ if (toggleText) {
|
|
|
+ toggleText.textContent = enabled ? 'ON' : 'OFF';
|
|
|
+ }
|
|
|
document.querySelectorAll('[data-highlight-color]').forEach(button => {
|
|
|
button.classList.toggle('is-selected', button.dataset.highlightColor === colorKey);
|
|
|
});
|
