fix(renderer): preserve jlpt hover and lookup token colors

This commit is contained in:
2026-02-28 15:25:42 -08:00
parent 536db5ff85
commit dac9a3429a
3 changed files with 51 additions and 34 deletions

View File

@@ -406,7 +406,6 @@ body.settings-modal-open #subtitleContainer {
}
#subtitleRoot .word.word-jlpt-n1 {
color: inherit;
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
@@ -419,7 +418,6 @@ body.settings-modal-open #subtitleContainer {
}
#subtitleRoot .word.word-jlpt-n2 {
color: inherit;
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
@@ -432,7 +430,6 @@ body.settings-modal-open #subtitleContainer {
}
#subtitleRoot .word.word-jlpt-n3 {
color: inherit;
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
@@ -445,7 +442,6 @@ body.settings-modal-open #subtitleContainer {
}
#subtitleRoot .word.word-jlpt-n4 {
color: inherit;
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
@@ -458,7 +454,6 @@ body.settings-modal-open #subtitleContainer {
}
#subtitleRoot .word.word-jlpt-n5 {
color: inherit;
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
@@ -540,6 +535,16 @@ body.settings-modal-open #subtitleContainer {
-webkit-text-fill-color: currentColor !important;
}
#subtitleRoot
.word:is(.word-jlpt-n1, .word-jlpt-n2, .word-jlpt-n3, .word-jlpt-n4, .word-jlpt-n5):not(
.word-known
):not(.word-n-plus-one):not(.word-frequency-single):not(.word-frequency-band-1):not(
.word-frequency-band-2
):not(.word-frequency-band-3):not(.word-frequency-band-4):not(.word-frequency-band-5):hover {
color: var(--subtitle-hover-token-color, #f4dbd6) !important;
-webkit-text-fill-color: var(--subtitle-hover-token-color, #f4dbd6) !important;
}
#subtitleRoot::selection,
#subtitleRoot .word::selection,
#subtitleRoot .c::selection {
@@ -602,6 +607,23 @@ body.settings-modal-open #subtitleContainer {
-webkit-text-fill-color: var(--subtitle-frequency-band-5-color, #8aadf4) !important;
}
#subtitleRoot
.word:is(.word-jlpt-n1, .word-jlpt-n2, .word-jlpt-n3, .word-jlpt-n4, .word-jlpt-n5):not(
.word-known
):not(.word-n-plus-one):not(.word-frequency-single):not(.word-frequency-band-1):not(
.word-frequency-band-2
):not(.word-frequency-band-3):not(.word-frequency-band-4):not(.word-frequency-band-5)::selection,
#subtitleRoot
.word:is(.word-jlpt-n1, .word-jlpt-n2, .word-jlpt-n3, .word-jlpt-n4, .word-jlpt-n5):not(
.word-known
):not(.word-n-plus-one):not(.word-frequency-single):not(.word-frequency-band-1):not(
.word-frequency-band-2
):not(.word-frequency-band-3):not(.word-frequency-band-4):not(.word-frequency-band-5)
.c::selection {
color: var(--subtitle-hover-token-color, #f4dbd6) !important;
-webkit-text-fill-color: var(--subtitle-hover-token-color, #f4dbd6) !important;
}
#subtitleRoot br {
display: block;
content: '';

View File

@@ -353,7 +353,7 @@ test('JLPT CSS rules use underline-only styling in renderer stylesheet', () => {
assert.match(block, /text-decoration-line:\s*underline;/);
assert.match(block, /text-decoration-thickness:\s*2px;/);
assert.match(block, /text-underline-offset:\s*4px;/);
assert.match(block, /color:\s*inherit;/);
assert.doesNotMatch(block, /(?:^|\n)\s*color\s*:/m);
}
for (let band = 1; band <= 5; band += 1) {
@@ -446,6 +446,15 @@ test('JLPT CSS rules use underline-only styling in renderer stylesheet', () => {
assert.match(coloredCharHoverBlock, /background:\s*transparent;/);
assert.match(coloredCharHoverBlock, /color:\s*inherit\s*!important;/);
assert.match(
cssText,
/\.word:is\(\.word-jlpt-n1,\s*\.word-jlpt-n2,\s*\.word-jlpt-n3,\s*\.word-jlpt-n4,\s*\.word-jlpt-n5\):not\(\s*\.word-known\s*\):not\(\.word-n-plus-one\):not\(\.word-frequency-single\):not\(\.word-frequency-band-1\):not\(\s*\.word-frequency-band-2\s*\):not\(\.word-frequency-band-3\):not\(\.word-frequency-band-4\):not\(\.word-frequency-band-5\):hover\s*\{[\s\S]*?color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;[\s\S]*?-webkit-text-fill-color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;/,
);
assert.match(
cssText,
/\.word:is\(\.word-jlpt-n1,\s*\.word-jlpt-n2,\s*\.word-jlpt-n3,\s*\.word-jlpt-n4,\s*\.word-jlpt-n5\):not\(\s*\.word-known\s*\):not\(\.word-n-plus-one\):not\(\.word-frequency-single\):not\(\.word-frequency-band-1\):not\(\s*\.word-frequency-band-2\s*\):not\(\.word-frequency-band-3\):not\(\.word-frequency-band-4\):not\(\.word-frequency-band-5\)::selection[\s\S]*?color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;[\s\S]*?-webkit-text-fill-color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;/,
);
const selectionBlock = extractClassBlock(cssText, '#subtitleRoot::selection');
assert.match(
selectionBlock,