/* * Injected into every page, so every rule is scoped to our own tag. * Colours come from CSS custom properties written on by the reader, * which makes a settings change repaint the page without touching the DOM. */ llr-w { cursor: pointer; border-radius: 3px; /* Keep the highlight intact when a word wraps across two lines. */ -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color 120ms ease, box-shadow 120ms ease; } /* Fill mode (default). Known and Ignored are deliberately unmarked. */ llr-w[data-s='0'] { background-color: var(--llr-c-new); } llr-w[data-s='1'] { background-color: var(--llr-c-1); } llr-w[data-s='2'] { background-color: var(--llr-c-2); } llr-w[data-s='3'] { background-color: var(--llr-c-3); } llr-w[data-s='4'] { background-color: var(--llr-c-4); } llr-w[data-s='5'], llr-w[data-s='6'], llr-w[data-s='7'] { background-color: transparent; } /* * New here, but already known in the other script — 开始 while 開始 is known. * Written as an extra attribute on the new status rather than as a status of * its own, because that is what it is: the word is still new in the script * being read, and only its colour says otherwise. */ llr-w[data-s='0'][data-tw] { background-color: var(--llr-c-twin); } /* Underline mode: gentler over photos and busy layouts. */ html[data-llr-underline] llr-w { background-color: transparent !important; } html[data-llr-underline] llr-w[data-s='0'] { box-shadow: inset 0 -0.16em 0 var(--llr-c-new); } html[data-llr-underline] llr-w[data-s='1'] { box-shadow: inset 0 -0.16em 0 var(--llr-c-1); } html[data-llr-underline] llr-w[data-s='2'] { box-shadow: inset 0 -0.16em 0 var(--llr-c-2); } html[data-llr-underline] llr-w[data-s='3'] { box-shadow: inset 0 -0.16em 0 var(--llr-c-3); } html[data-llr-underline] llr-w[data-s='4'] { box-shadow: inset 0 -0.16em 0 var(--llr-c-4); } html[data-llr-underline] llr-w[data-s='0'][data-tw] { box-shadow: inset 0 -0.16em 0 var(--llr-c-twin); } /* 直排: the mark sits on the right of the glyph, the traditional side. */ html[data-llr-underline] llr-w[data-llr-dir='ttb'][data-s='0'] { box-shadow: inset -0.16em 0 0 var(--llr-c-new); } html[data-llr-underline] llr-w[data-llr-dir='ttb'][data-s='1'] { box-shadow: inset -0.16em 0 0 var(--llr-c-1); } html[data-llr-underline] llr-w[data-llr-dir='ttb'][data-s='2'] { box-shadow: inset -0.16em 0 0 var(--llr-c-2); } html[data-llr-underline] llr-w[data-llr-dir='ttb'][data-s='3'] { box-shadow: inset -0.16em 0 0 var(--llr-c-3); } html[data-llr-underline] llr-w[data-llr-dir='ttb'][data-s='4'] { box-shadow: inset -0.16em 0 0 var(--llr-c-4); } html[data-llr-underline] llr-w[data-llr-dir='ttb'][data-s='0'][data-tw] { box-shadow: inset -0.16em 0 0 var(--llr-c-twin); } llr-w:hover { outline: 2px solid var(--llr-c-outline); outline-offset: 1px; } llr-w[data-llr-sel] { outline: 2px solid var(--llr-c-outline); outline-offset: 1px; } /* The characters the panel's expansion arrows currently cover. A highlight rather than an outline because it can end halfway into a neighbouring word, which no per-element rule can draw. Styled like a text selection, since that is exactly what it stands in for. */ ::highlight(llr-expand) { background-color: var(--llr-c-outline); color: #fff; } /* Highlights toggled off: the page reads normally, wrappers stay in place. */ html[data-llr-off] llr-w { background-color: transparent !important; box-shadow: none !important; outline: none !important; cursor: auto; } /* * A haodoo-style character table rebuilt as real CSS 直排, so the highlighter * can wrap whole words instead of one glyph per cell. */ .llr-vert { writing-mode: vertical-rl; overflow: auto; box-sizing: border-box; line-height: 1.9; letter-spacing: 0.08em; text-orientation: mixed; } /* * Streaming captions are painted with pointer-events: none so they don't * steal clicks from the player. Words inside them have to be hoverable. */ .ytp-caption-window-container, .caption-window, .ytp-caption-segment, .player-timedtext, .player-timedtext-text-container, [data-uia="player-timedtext"], .llr-caption-root { pointer-events: auto !important; } /* SlukaCC toggle, injected into the player's own control bar. */ .llr-ap-btn { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 10px; margin: 0 4px; border: 0; border-radius: 4px; background: transparent; color: #eee; font: 600 12px/1 system-ui, "Segoe UI", sans-serif; letter-spacing: 0.02em; cursor: pointer; vertical-align: top; } .llr-ap-btn:hover { background: rgba(255, 255, 255, 0.12); } .llr-ap-btn[aria-pressed="true"] { color: #fff; } .llr-ap-btn[aria-pressed="true"] .llr-ap-mark { color: #f2b418; } .llr-ap-btn .llr-ap-mark { font-size: 11px; } .ytp-right-controls .llr-ap-btn { height: 100%; background: transparent; } .watch-video--bottom-controls-container .llr-ap-btn, [data-uia="controls-standard"] .llr-ap-btn { height: 32px; background: rgba(0, 0, 0, 0.45); }