mirror of
https://github.com/ksyasuda/SubMiner.git
synced 2026-04-10 04:19:25 -07:00
sudacode
6bd886be47
- Resolve J/Shift+J subtitle-cycle OSD text via track-list labels and property expansion - Add mpv proxy OSD runtime + regression coverage across IPC/main/runtime paths - Scope `make pretty` to maintained source files and add scoped Prettier script - Align release workflow with cache/install order and explicit TypeScript check - Clean up duplicate submodule entry and remove checked-in docs/plans artifacts
1241 lines
28 KiB
CSS
1241 lines
28 KiB
CSS
/*
|
|
* SubMiner - All-in-one sentence mining overlay
|
|
* Copyright (C) 2024 sudacode
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
@font-face {
|
|
font-family: 'M PLUS 1';
|
|
src: url('./fonts/MPLUS1[wght].ttf') format('truetype');
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
font-family:
|
|
'M PLUS 1', 'Noto Sans CJK JP Regular', 'Noto Sans CJK JP', 'Hiragino Sans',
|
|
'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Arial Unicode MS', Arial, sans-serif;
|
|
}
|
|
|
|
#overlay {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#overlay.interactive {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.overlay-error-toast {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
max-width: min(420px, calc(100vw - 32px));
|
|
padding: 10px 14px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 148, 148, 0.5);
|
|
background: rgba(48, 12, 12, 0.9);
|
|
color: rgba(255, 238, 238, 0.98);
|
|
font-size: 13px;
|
|
line-height: 1.35;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transform: translateY(-6px);
|
|
transition:
|
|
opacity 160ms ease,
|
|
transform 160ms ease;
|
|
z-index: 1300;
|
|
}
|
|
|
|
.overlay-error-toast:not(.hidden) {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.modal {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
pointer-events: auto;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#jimakuModal {
|
|
z-index: 1100;
|
|
}
|
|
|
|
.modal.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.modal-content {
|
|
width: min(720px, 92%);
|
|
max-height: 80%;
|
|
background: rgba(20, 20, 20, 0.95);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.modal-close {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #fff;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 6px;
|
|
padding: 6px 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.modal-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.jimaku-form {
|
|
display: grid;
|
|
grid-template-columns: 1fr 120px 120px auto;
|
|
gap: 10px;
|
|
align-items: end;
|
|
}
|
|
|
|
.jimaku-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.jimaku-field input {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.jimaku-button {
|
|
height: 36px;
|
|
padding: 0 14px;
|
|
border-radius: 6px;
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
background: rgba(255, 255, 255, 0.15);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.jimaku-button:hover {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.jimaku-status {
|
|
min-height: 20px;
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.jimaku-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
max-height: 220px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.jimaku-section.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.jimaku-section-title {
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.jimaku-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow-y: auto;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 8px;
|
|
max-height: 180px;
|
|
}
|
|
|
|
.jimaku-list li {
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.jimaku-list li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.jimaku-list li.active {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.jimaku-list .jimaku-subtext {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.jimaku-link {
|
|
align-self: flex-start;
|
|
background: transparent;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.jimaku-link.hidden {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.jimaku-form {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.jimaku-button {
|
|
grid-column: span 2;
|
|
}
|
|
}
|
|
|
|
#subtitleContainer {
|
|
max-width: 80%;
|
|
margin-bottom: 60px;
|
|
padding: 12px 20px;
|
|
background: rgb(30, 32, 48, 0.88);
|
|
border-radius: 8px;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
#subtitleRoot {
|
|
text-align: center;
|
|
font-size: 35px;
|
|
line-height: var(--visible-sub-line-height, 1.32);
|
|
overflow-wrap: anywhere;
|
|
word-break: keep-all;
|
|
color: #cad3f5;
|
|
--subtitle-known-word-color: #a6da95;
|
|
--subtitle-n-plus-one-color: #c6a0f6;
|
|
--subtitle-name-match-color: #f5bde6;
|
|
--subtitle-jlpt-n1-color: #ed8796;
|
|
--subtitle-jlpt-n2-color: #f5a97f;
|
|
--subtitle-jlpt-n3-color: #f9e2af;
|
|
--subtitle-jlpt-n4-color: #a6e3a1;
|
|
--subtitle-jlpt-n5-color: #8aadf4;
|
|
--subtitle-hover-token-color: #f4dbd6;
|
|
--subtitle-hover-token-background-color: rgba(54, 58, 79, 0.84);
|
|
--subtitle-frequency-single-color: #f5a97f;
|
|
--subtitle-frequency-band-1-color: #ed8796;
|
|
--subtitle-frequency-band-2-color: #f5a97f;
|
|
--subtitle-frequency-band-3-color: #f9e2af;
|
|
--subtitle-frequency-band-4-color: #8bd5ca;
|
|
--subtitle-frequency-band-5-color: #8aadf4;
|
|
text-shadow:
|
|
2px 2px 4px rgba(0, 0, 0, 0.8),
|
|
-1px -1px 2px rgba(0, 0, 0, 0.5);
|
|
/* Enable text selection for Yomitan */
|
|
user-select: text;
|
|
cursor: text;
|
|
-webkit-text-fill-color: currentColor;
|
|
}
|
|
|
|
#subtitleRoot:empty {
|
|
display: none;
|
|
}
|
|
|
|
#subtitleContainer:has(#subtitleRoot:empty) {
|
|
display: none;
|
|
}
|
|
|
|
body.settings-modal-open #subtitleContainer {
|
|
display: none !important;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
#subtitleRoot .c {
|
|
display: inline;
|
|
position: relative;
|
|
color: inherit;
|
|
-webkit-text-fill-color: currentColor !important;
|
|
}
|
|
|
|
#subtitleRoot .c:hover {
|
|
background: var(--subtitle-hover-token-background-color, rgba(54, 58, 79, 0.84));
|
|
color: var(--subtitle-hover-token-color, #f4dbd6) !important;
|
|
-webkit-text-fill-color: var(--subtitle-hover-token-color, #f4dbd6) !important;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
#subtitleRoot .word {
|
|
display: inline;
|
|
position: relative;
|
|
-webkit-text-fill-color: currentColor !important;
|
|
}
|
|
|
|
#subtitleRoot .word.keyboard-selected {
|
|
outline: 2px solid rgba(135, 201, 255, 0.92);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
box-shadow:
|
|
0 0 0 2px rgba(12, 18, 28, 0.68),
|
|
0 0 18px rgba(120, 188, 255, 0.45);
|
|
}
|
|
|
|
#subtitleRoot .word[data-frequency-rank]::before {
|
|
content: attr(data-frequency-rank);
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 4px);
|
|
transform: translateX(-50%) translateY(2px);
|
|
padding: 1px 6px;
|
|
border-radius: 6px;
|
|
background: rgba(15, 17, 26, 0.9);
|
|
border: 1px solid rgba(255, 255, 255, 0.22);
|
|
color: #f5f5f5;
|
|
font-size: 0.48em;
|
|
line-height: 1.2;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition:
|
|
opacity 120ms ease,
|
|
transform 120ms ease;
|
|
z-index: 1;
|
|
}
|
|
|
|
#subtitleRoot .word[data-frequency-rank]:hover::before,
|
|
#subtitleRoot .word.keyboard-selected[data-frequency-rank]::before {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
#subtitleRoot .word[data-jlpt-level]::after {
|
|
content: attr(data-jlpt-level);
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -0.42em;
|
|
transform: translateX(-50%) translateY(2px);
|
|
font-size: 0.42em;
|
|
line-height: 1;
|
|
font-weight: 800;
|
|
letter-spacing: 0.03em;
|
|
white-space: nowrap;
|
|
text-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 0.85),
|
|
0 0 3px rgba(0, 0, 0, 0.65);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition:
|
|
opacity 120ms ease,
|
|
transform 120ms ease;
|
|
z-index: 1;
|
|
}
|
|
|
|
#subtitleRoot .word[data-jlpt-level]:hover::after,
|
|
#subtitleRoot .word.keyboard-selected[data-jlpt-level]::after {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
#subtitleRoot .word.word-known {
|
|
color: var(--subtitle-known-word-color, #a6da95);
|
|
text-shadow: 0 0 6px rgba(166, 218, 149, 0.35);
|
|
}
|
|
|
|
#subtitleRoot .word.word-n-plus-one {
|
|
color: var(--subtitle-n-plus-one-color, #c6a0f6);
|
|
text-shadow: 0 0 6px rgba(198, 160, 246, 0.35);
|
|
}
|
|
|
|
#subtitleRoot .word.word-name-match {
|
|
color: var(--subtitle-name-match-color, #f5bde6);
|
|
text-shadow: 0 0 6px rgba(245, 189, 230, 0.35);
|
|
}
|
|
|
|
#subtitleRoot .word.word-jlpt-n1 {
|
|
text-decoration-line: underline;
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: 4px;
|
|
text-decoration-color: var(--subtitle-jlpt-n1-color, #ed8796);
|
|
text-decoration-style: solid;
|
|
}
|
|
|
|
#subtitleRoot .word.word-jlpt-n1[data-jlpt-level]::after {
|
|
color: var(--subtitle-jlpt-n1-color, #ed8796);
|
|
}
|
|
|
|
#subtitleRoot .word.word-jlpt-n2 {
|
|
text-decoration-line: underline;
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: 4px;
|
|
text-decoration-color: var(--subtitle-jlpt-n2-color, #f5a97f);
|
|
text-decoration-style: solid;
|
|
}
|
|
|
|
#subtitleRoot .word.word-jlpt-n2[data-jlpt-level]::after {
|
|
color: var(--subtitle-jlpt-n2-color, #f5a97f);
|
|
}
|
|
|
|
#subtitleRoot .word.word-jlpt-n3 {
|
|
text-decoration-line: underline;
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: 4px;
|
|
text-decoration-color: var(--subtitle-jlpt-n3-color, #f9e2af);
|
|
text-decoration-style: solid;
|
|
}
|
|
|
|
#subtitleRoot .word.word-jlpt-n3[data-jlpt-level]::after {
|
|
color: var(--subtitle-jlpt-n3-color, #f9e2af);
|
|
}
|
|
|
|
#subtitleRoot .word.word-jlpt-n4 {
|
|
text-decoration-line: underline;
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: 4px;
|
|
text-decoration-color: var(--subtitle-jlpt-n4-color, #a6e3a1);
|
|
text-decoration-style: solid;
|
|
}
|
|
|
|
#subtitleRoot .word.word-jlpt-n4[data-jlpt-level]::after {
|
|
color: var(--subtitle-jlpt-n4-color, #a6e3a1);
|
|
}
|
|
|
|
#subtitleRoot .word.word-jlpt-n5 {
|
|
text-decoration-line: underline;
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: 4px;
|
|
text-decoration-color: var(--subtitle-jlpt-n5-color, #8aadf4);
|
|
text-decoration-style: solid;
|
|
}
|
|
|
|
#subtitleRoot .word.word-jlpt-n5[data-jlpt-level]::after {
|
|
color: var(--subtitle-jlpt-n5-color, #8aadf4);
|
|
}
|
|
|
|
#subtitleRoot .word.word-frequency-single,
|
|
#subtitleRoot .word.word-frequency-band-1,
|
|
#subtitleRoot .word.word-frequency-band-2,
|
|
#subtitleRoot .word.word-frequency-band-3,
|
|
#subtitleRoot .word.word-frequency-band-4,
|
|
#subtitleRoot .word.word-frequency-band-5 {
|
|
text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
#subtitleRoot .word.word-frequency-single {
|
|
color: var(--subtitle-frequency-single-color, #f5a97f);
|
|
}
|
|
|
|
#subtitleRoot .word.word-frequency-band-1 {
|
|
color: var(--subtitle-frequency-band-1-color, #ed8796);
|
|
}
|
|
|
|
#subtitleRoot .word.word-frequency-band-2 {
|
|
color: var(--subtitle-frequency-band-2-color, #f5a97f);
|
|
}
|
|
|
|
#subtitleRoot .word.word-frequency-band-3 {
|
|
color: var(--subtitle-frequency-band-3-color, #f9e2af);
|
|
}
|
|
|
|
#subtitleRoot .word.word-frequency-band-4 {
|
|
color: var(--subtitle-frequency-band-4-color, #8bd5ca);
|
|
}
|
|
|
|
#subtitleRoot .word.word-frequency-band-5 {
|
|
color: var(--subtitle-frequency-band-5-color, #8aadf4);
|
|
}
|
|
|
|
#subtitleRoot
|
|
.word:not(.word-known):not(.word-n-plus-one):not(.word-name-match):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 {
|
|
background: var(--subtitle-hover-token-background-color, rgba(54, 58, 79, 0.84));
|
|
border-radius: 3px;
|
|
color: var(--subtitle-hover-token-color, #f4dbd6) !important;
|
|
-webkit-text-fill-color: var(--subtitle-hover-token-color, #f4dbd6) !important;
|
|
}
|
|
|
|
#subtitleRoot .word.word-known:hover,
|
|
#subtitleRoot .word.word-n-plus-one:hover,
|
|
#subtitleRoot .word.word-name-match:hover,
|
|
#subtitleRoot .word.word-frequency-single:hover,
|
|
#subtitleRoot .word.word-frequency-band-1:hover,
|
|
#subtitleRoot .word.word-frequency-band-2:hover,
|
|
#subtitleRoot .word.word-frequency-band-3:hover,
|
|
#subtitleRoot .word.word-frequency-band-4:hover,
|
|
#subtitleRoot .word.word-frequency-band-5:hover {
|
|
background: var(--subtitle-hover-token-background-color, rgba(54, 58, 79, 0.84));
|
|
border-radius: 3px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
#subtitleRoot .word.word-known .c:hover,
|
|
#subtitleRoot .word.word-n-plus-one .c:hover,
|
|
#subtitleRoot .word.word-name-match .c:hover,
|
|
#subtitleRoot .word.word-frequency-single .c:hover,
|
|
#subtitleRoot .word.word-frequency-band-1 .c:hover,
|
|
#subtitleRoot .word.word-frequency-band-2 .c:hover,
|
|
#subtitleRoot .word.word-frequency-band-3 .c:hover,
|
|
#subtitleRoot .word.word-frequency-band-4 .c:hover,
|
|
#subtitleRoot .word.word-frequency-band-5 .c:hover {
|
|
background: transparent;
|
|
color: inherit !important;
|
|
-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-name-match):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 {
|
|
background: var(--subtitle-hover-token-background-color, rgba(54, 58, 79, 0.84));
|
|
color: var(--subtitle-hover-token-color, #f4dbd6) !important;
|
|
-webkit-text-fill-color: var(--subtitle-hover-token-color, #f4dbd6) !important;
|
|
}
|
|
|
|
#subtitleRoot *::selection {
|
|
background: var(--subtitle-hover-token-background-color, rgba(54, 58, 79, 0.84)) !important;
|
|
color: var(--subtitle-hover-token-color, #f4dbd6) !important;
|
|
-webkit-text-fill-color: var(--subtitle-hover-token-color, #f4dbd6) !important;
|
|
}
|
|
|
|
#subtitleRoot .word.word-known::selection,
|
|
#subtitleRoot .word.word-known .c::selection {
|
|
color: var(--subtitle-known-word-color, #a6da95) !important;
|
|
-webkit-text-fill-color: var(--subtitle-known-word-color, #a6da95) !important;
|
|
}
|
|
|
|
#subtitleRoot .word.word-n-plus-one::selection,
|
|
#subtitleRoot .word.word-n-plus-one .c::selection {
|
|
color: var(--subtitle-n-plus-one-color, #c6a0f6) !important;
|
|
-webkit-text-fill-color: var(--subtitle-n-plus-one-color, #c6a0f6) !important;
|
|
}
|
|
|
|
#subtitleRoot .word.word-name-match::selection,
|
|
#subtitleRoot .word.word-name-match .c::selection {
|
|
color: var(--subtitle-name-match-color, #f5bde6) !important;
|
|
-webkit-text-fill-color: var(--subtitle-name-match-color, #f5bde6) !important;
|
|
}
|
|
|
|
#subtitleRoot .word.word-frequency-single::selection,
|
|
#subtitleRoot .word.word-frequency-single .c::selection {
|
|
color: var(--subtitle-frequency-single-color, #f5a97f) !important;
|
|
-webkit-text-fill-color: var(--subtitle-frequency-single-color, #f5a97f) !important;
|
|
}
|
|
|
|
#subtitleRoot .word.word-frequency-band-1::selection,
|
|
#subtitleRoot .word.word-frequency-band-1 .c::selection {
|
|
color: var(--subtitle-frequency-band-1-color, #ed8796) !important;
|
|
-webkit-text-fill-color: var(--subtitle-frequency-band-1-color, #ed8796) !important;
|
|
}
|
|
|
|
#subtitleRoot .word.word-frequency-band-2::selection,
|
|
#subtitleRoot .word.word-frequency-band-2 .c::selection {
|
|
color: var(--subtitle-frequency-band-2-color, #f5a97f) !important;
|
|
-webkit-text-fill-color: var(--subtitle-frequency-band-2-color, #f5a97f) !important;
|
|
}
|
|
|
|
#subtitleRoot .word.word-frequency-band-3::selection,
|
|
#subtitleRoot .word.word-frequency-band-3 .c::selection {
|
|
color: var(--subtitle-frequency-band-3-color, #f9e2af) !important;
|
|
-webkit-text-fill-color: var(--subtitle-frequency-band-3-color, #f9e2af) !important;
|
|
}
|
|
|
|
#subtitleRoot .word.word-frequency-band-4::selection,
|
|
#subtitleRoot .word.word-frequency-band-4 .c::selection {
|
|
color: var(--subtitle-frequency-band-4-color, #8bd5ca) !important;
|
|
-webkit-text-fill-color: var(--subtitle-frequency-band-4-color, #8bd5ca) !important;
|
|
}
|
|
|
|
#subtitleRoot .word.word-frequency-band-5::selection,
|
|
#subtitleRoot .word.word-frequency-band-5 .c::selection {
|
|
color: var(--subtitle-frequency-band-5-color, #8aadf4) !important;
|
|
-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-name-match):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-name-match):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: '';
|
|
margin-bottom: var(--visible-sub-line-gap, 0.08em);
|
|
}
|
|
|
|
body.platform-macos.layer-visible #subtitleRoot {
|
|
--visible-sub-line-height: 1.64;
|
|
--visible-sub-line-gap: 0.54em;
|
|
}
|
|
|
|
#subtitleRoot.has-selection .word:hover,
|
|
#subtitleRoot.has-selection .c:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
#secondarySubContainer {
|
|
position: absolute;
|
|
top: 40px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
max-width: 80%;
|
|
padding: 10px 18px;
|
|
background: transparent;
|
|
border-radius: 8px;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
body.layer-modal #subtitleContainer,
|
|
body.layer-modal #secondarySubContainer {
|
|
display: none !important;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
body.layer-modal #overlay {
|
|
justify-content: center;
|
|
}
|
|
|
|
#secondarySubRoot {
|
|
text-align: center;
|
|
font-size: 24px;
|
|
line-height: 1.5;
|
|
color: #ffffff;
|
|
-webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.7);
|
|
paint-order: stroke fill;
|
|
text-shadow:
|
|
0 2px 4px rgba(0, 0, 0, 0.95),
|
|
0 0 8px rgba(0, 0, 0, 0.8),
|
|
0 0 16px rgba(0, 0, 0, 0.55);
|
|
user-select: text;
|
|
cursor: text;
|
|
}
|
|
|
|
#secondarySubRoot:empty {
|
|
display: none;
|
|
}
|
|
|
|
#secondarySubContainer:has(#secondarySubRoot:empty) {
|
|
display: none;
|
|
}
|
|
|
|
body.settings-modal-open #secondarySubContainer {
|
|
display: none !important;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.secondary-sub-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
#secondarySubContainer.secondary-sub-hover {
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
pointer-events: auto;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
transform: none;
|
|
max-width: 100%;
|
|
background: transparent;
|
|
padding: 40px 0 0 0;
|
|
border-radius: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#secondarySubContainer.secondary-sub-hover #secondarySubRoot {
|
|
background: transparent;
|
|
border-radius: 8px;
|
|
padding: 10px 18px;
|
|
}
|
|
|
|
#secondarySubContainer.secondary-sub-hover:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
iframe.yomitan-popup,
|
|
iframe[id^='yomitan-popup'] {
|
|
pointer-events: auto !important;
|
|
z-index: 2147483647 !important;
|
|
}
|
|
|
|
.kiku-info-text {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.kiku-cards-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.kiku-card {
|
|
background: rgba(40, 40, 40, 0.8);
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 10px;
|
|
padding: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s;
|
|
outline: none;
|
|
}
|
|
|
|
.kiku-card:hover {
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.kiku-card.active {
|
|
border-color: rgba(100, 180, 255, 0.8);
|
|
background: rgba(40, 60, 90, 0.5);
|
|
}
|
|
|
|
.kiku-card-label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.kiku-card.active .kiku-card-label {
|
|
color: rgba(100, 180, 255, 0.9);
|
|
}
|
|
|
|
.kiku-card-expression {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
.kiku-card-sentence {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
max-height: 52px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.kiku-card-meta {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.45);
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.kiku-footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding-top: 8px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.kiku-preview-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.kiku-preview-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: rgba(255, 255, 255, 0.88);
|
|
}
|
|
|
|
.kiku-preview-toggle {
|
|
display: inline-flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.kiku-preview-toggle button {
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: rgba(255, 255, 255, 0.7);
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.kiku-preview-toggle button.active {
|
|
border-color: rgba(100, 180, 255, 0.45);
|
|
background: rgba(100, 180, 255, 0.16);
|
|
color: rgba(100, 180, 255, 0.95);
|
|
}
|
|
|
|
.kiku-preview-json {
|
|
margin: 0;
|
|
min-height: 220px;
|
|
max-height: 320px;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 8px;
|
|
background: rgba(0, 0, 0, 0.34);
|
|
padding: 10px;
|
|
font-size: 11px;
|
|
line-height: 1.45;
|
|
color: rgba(255, 255, 255, 0.88);
|
|
}
|
|
|
|
.kiku-preview-error {
|
|
margin: 0 0 10px;
|
|
font-size: 12px;
|
|
color: #ff8f8f;
|
|
}
|
|
|
|
.kiku-delete-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
user-select: none;
|
|
}
|
|
|
|
.kiku-delete-toggle input {
|
|
accent-color: rgba(100, 180, 255, 0.9);
|
|
}
|
|
|
|
.kiku-confirm-button {
|
|
padding: 8px 20px;
|
|
border-radius: 6px;
|
|
border: 1px solid rgba(100, 180, 255, 0.4);
|
|
background: rgba(100, 180, 255, 0.15);
|
|
color: rgba(100, 180, 255, 0.95);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.kiku-confirm-button:hover {
|
|
background: rgba(100, 180, 255, 0.25);
|
|
}
|
|
|
|
.subsync-modal-content {
|
|
width: min(560px, 92%);
|
|
}
|
|
|
|
.subsync-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.subsync-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
.subsync-radio {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-right: 14px;
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.subsync-field select {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.subsync-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.kiku-cancel-button {
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
background: transparent;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.kiku-cancel-button:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: #fff;
|
|
}
|
|
|
|
.kiku-hint {
|
|
text-align: center;
|
|
font-size: 11px;
|
|
color: rgba(255, 255, 255, 0.35);
|
|
}
|
|
|
|
.runtime-modal-content {
|
|
width: min(560px, 92%);
|
|
}
|
|
|
|
.runtime-options-hint {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.65);
|
|
}
|
|
|
|
.runtime-options-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 8px;
|
|
max-height: 320px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.runtime-options-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.runtime-options-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.runtime-options-item.active {
|
|
background: rgba(100, 180, 255, 0.15);
|
|
}
|
|
|
|
.runtime-options-label {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
}
|
|
|
|
.runtime-options-value {
|
|
font-size: 13px;
|
|
color: rgba(100, 180, 255, 0.9);
|
|
}
|
|
|
|
.runtime-options-allowed {
|
|
font-size: 11px;
|
|
color: rgba(255, 255, 255, 0.55);
|
|
}
|
|
|
|
.runtime-options-status {
|
|
min-height: 18px;
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
.runtime-options-status.error {
|
|
color: #ff8f8f;
|
|
}
|
|
|
|
.session-help-content {
|
|
width: min(760px, 92%);
|
|
max-height: 84%;
|
|
color: rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
.session-help-shortcut,
|
|
.session-help-warning,
|
|
.session-help-status {
|
|
min-height: 18px;
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.session-help-shortcut {
|
|
font-weight: 600;
|
|
color: rgba(255, 255, 255, 0.97);
|
|
}
|
|
|
|
.session-help-warning {
|
|
color: #f8a100;
|
|
}
|
|
|
|
.session-help-content-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
max-height: calc(84vh - 220px);
|
|
overflow-y: auto;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.session-help-filter {
|
|
width: 100%;
|
|
min-height: 32px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 8px;
|
|
padding: 8px 10px;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
color: #fff;
|
|
font-size: 13px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.session-help-filter::placeholder {
|
|
color: rgba(255, 255, 255, 0.45);
|
|
}
|
|
|
|
.session-help-filter:focus {
|
|
outline: none;
|
|
border-color: rgba(137, 180, 255, 0.6);
|
|
box-shadow: 0 0 0 2px rgba(137, 180, 255, 0.2);
|
|
}
|
|
|
|
.session-help-content-no-results {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
padding: 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.session-help-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
backdrop-filter: blur(1px);
|
|
}
|
|
|
|
.session-help-section-title {
|
|
font-size: 11px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
font-weight: 800;
|
|
color: rgba(255, 255, 255, 0.55);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 0;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.session-help-item-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.session-help-item {
|
|
width: 100%;
|
|
min-height: 42px;
|
|
padding: 10px 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
text-align: left;
|
|
border: none;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
background: transparent;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.session-help-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.session-help-item:hover,
|
|
.session-help-item:focus-visible,
|
|
.session-help-item.active {
|
|
background: rgba(137, 180, 255, 0.2);
|
|
outline: none;
|
|
}
|
|
|
|
.session-help-item.active {
|
|
box-shadow: inset 3px 0 0 0 rgba(137, 180, 255, 0.9);
|
|
}
|
|
|
|
.session-help-item-left {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.session-help-item-right {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.session-help-key {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: rgba(255, 255, 255, 0.95);
|
|
white-space: nowrap;
|
|
padding: 4px 9px;
|
|
font-family:
|
|
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
|
monospace;
|
|
border-radius: 999px;
|
|
background: rgba(137, 180, 255, 0.16);
|
|
border: 1px solid rgba(137, 180, 255, 0.35);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.session-help-action {
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, 0.84);
|
|
white-space: normal;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.session-help-color-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.kiku-cards-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.session-help-content-list {
|
|
max-height: calc(84vh - 190px);
|
|
}
|
|
|
|
.session-help-item {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 5px;
|
|
}
|
|
|
|
.session-help-item-right {
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
.session-help-key {
|
|
width: 100%;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
}
|