onedeuxtriseigo.nullpo.dev
Pop-up dictionary browser extension for language learning. Successor to Yomichan. (PERSONAL FORK)
1/*
2 * Copyright (C) 2023-2025 Yomitan Authors
3 * Copyright (C) 2016-2022 Yomichan Authors
4 *
5 * This program is free software: you can redistribute it and/or modify
6 * it under the entrys of the GNU General Public License as published by
7 * the Free Software Foundation, either version 3 of the License, or
8 * (at your option) any later version.
9 *
10 * This program is distributed in the hope that it will be useful,
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 * GNU General Public License for more details.
14 *
15 * You should have received a copy of the GNU General Public License
16 * along with this program. If not, see <https://www.gnu.org/licenses/>.
17 */
18
19/* Variables */
20:root {
21 /* Strings */
22 --compact-list-separator: ' | ';
23
24 --disambiguation-separator: ', ';
25 --disambiguation-reading-separator: ':';
26
27 --headword-separator: '\3001';
28
29 --inflection-separator: '\00AB';
30
31 /* Layout */
32 --font-size-no-units: 14;
33 --font-size: calc(1px * var(--font-size-no-units));
34 --query-parser-font-size-no-units: 2;
35 --query-parser-font-size: calc(1em * var(--query-parser-font-size-no-units));
36 --h2-font-size-no-units: 1.25;
37 --h2-font-size: calc(1em * var(--h2-font-size-no-units));
38
39 --headword-font-size-no-units: 2;
40 --headword-font-size: calc(1em * var(--headword-font-size-no-units));
41 --headword-reading-font-size-no-units: 0.75;
42 --headword-reading-font-size: calc(var(--headword-reading-font-size-no-units) * var(--headword-font-size));
43 --headword-reading-space: 0.5em;
44 --headword-list-end-space: 0.5em;
45 --headword-thin-border-size: calc(1em / (var(--headword-font-size-no-units) * var(--font-size-no-units)));
46
47 --line-height-no-units: 20;
48 --line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));
49
50 --thin-border-size: calc(1em / var(--font-size-no-units));
51
52 --action-button-size-no-units: 16;
53 --action-button-size: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units)));
54 --action-button-padding: 0.3em;
55
56 --list-margin: 0.72em;
57 --content-width: 100%;
58 --main-content-vertical-padding: 0em;
59 --main-content-horizontal-padding: 0em;
60 --entry-horizontal-padding: 0.72em;
61 --entry-vertical-padding: 0.72em;
62 --query-horizontal-padding: 0.72em;
63
64 --sidebar-width-no-units: 40;
65 --sidebar-width: calc(1em * (var(--sidebar-width-no-units) / var(--font-size-no-units)));
66 --sidebar-button-height-no-units: 30;
67 --sidebar-button-height: calc(1em * (var(--sidebar-button-height-no-units) / var(--font-size-no-units)));
68 --sidebar-button-icon-size-no-units: 16;
69 --sidebar-button-icon-size: calc(1em * (var(--sidebar-button-icon-size-no-units) / var(--font-size-no-units)));
70
71 --progress-bar-height-no-units: 4;
72 --progress-bar-height: calc(1em * (var(--progress-bar-height-no-units) / var(--font-size-no-units)));
73 --progress-bar-active-transition-duration: 0.125s;
74 --progress-bar-active-transition-start-delay: 0.0625s;
75 --progress-bar-animation-duration: 2s;
76
77 --entry-current-indicator-width-no-units: 4;
78 --entry-current-indicator-width: calc(1em * var(--entry-current-indicator-width-no-units) / var(--font-size-no-units));
79 --entry-current-indicator-transition-duration: 0.125s;
80
81 --tag-height-no-units: 20;
82 --tag-height: calc(1em * var(--tag-height-no-units) / var(--font-size-no-units));
83 --tag-font-size-no-units: 11;
84 --tag-font-size: calc(1em * var(--tag-font-size-no-units) / var(--font-size-no-units));
85 --tag-border-size-no-units: 1;
86 --tag-border-size: calc(1em * (var(--tag-border-size-no-units) / var(--font-size-no-units)));
87 --tag-border-style: solid;
88 --tag-font-weight: bold;
89 --tag-border-radius: 0.25em;
90
91 --list-padding1: 1.4em;
92 --list-padding2: var(--list-padding1);
93
94 --entry-current-indicator-triangle-size-no-units: 6;
95 --entry-current-indicator-triangle-size: calc(1em * (var(--entry-current-indicator-triangle-size-no-units) / var(--font-size-no-units)));
96
97 --overlay-panel-translate-distance: 4em;
98
99 --disambiguation-space: 0.25em;
100
101 --animation-duration: 0.125s;
102 --animation-duration2: calc(2 * var(--animation-duration));
103
104 --collapsible-definition-line-count: 3;
105 --collapsible-kanji-glyph-data-line-count: 3;
106 --kanji-glyph-table-header-height: calc((20em / var(--font-size-no-units)) + var(--kanji-glyph-table-cell-padding) * 3);
107 --collapsible-definition-test-offset: 0.2em;
108 --collpasible-kanji-glyph-data-test-offset: 0.2em;
109
110 /* Colors */
111 --background-color: #ffffff;
112 --gloss-image-background-color: #eeeeee;
113 --link-color: var(--accent-color);
114
115 --text-color: #000000;
116 --reason-text-color: var(--text-color-light3);
117
118 --headword-text-color: var(--text-color);
119 --headword-text-color-popular: var(--accent-color);
120 --headword-text-color-rare: var(--text-color-light4);
121 --headword-furigana-text-color: var(--headword-text-color);
122 --headword-furigana-text-color-popular: var(--headword-text-color-popular);
123 --headword-furigana-text-color-rare: var(--headword-text-color-rare);
124 --headword-reading-text-color: var(--headword-furigana-text-color);
125 --headword-reading-text-color-popular: var(--headword-furigana-text-color-popular);
126 --headword-reading-text-color-rare: var(--headword-furigana-text-color-rare);
127 --headword-kanji-text-color: var(--headword-text-color);
128 --headword-kanji-text-color-popular: var(--headword-text-color-popular);
129 --headword-kanji-text-color-rare: var(--headword-text-color-rare);
130 --headword-kanji-border-color: var(--dark-border-color);
131 --headword-kanji-border-color-popular: var(--headword-kanji-border-color);
132 --headword-kanji-border-color-rare: var(--headword-kanji-border-color);
133
134 --kanji-glyph-table-cell-padding: 0.36em;
135
136 --light-border-color: #eeeeee;
137 --medium-border-color: #dddddd;
138 --dark-border-color: #777777;
139
140 --tag-text-color: #ffffff;
141 --tag-border-color: transparent;
142 --tag-default-background-color: #8a8a91;
143 --tag-name-background-color: #b6327a;
144 --tag-expression-background-color: #f0ad4e;
145 --tag-popular-background-color: #0275d8;
146 --tag-frequent-background-color: #5bc0de;
147 --tag-archaism-background-color: #d9534f;
148 --tag-dictionary-background-color: #aa66cc;
149 --tag-frequency-background-color: #5cb85c;
150 --tag-part-of-speech-background-color: #565656;
151 --tag-search-background-color: #8a8a91;
152 --tag-pronunciation-dictionary-background-color: #6640be;
153
154 --sidebar-background-color: #f8f9fa;
155
156 --sidebar-button-background-color: transparent;
157 --sidebar-button-background-color-hover: #cccccc;
158 --sidebar-button-background-color-active: #aaaaaa;
159 --sidebar-button-danger-background-color: transparent;
160 --sidebar-button-danger-background-color-hover: #dd2222;
161 --sidebar-button-danger-background-color-active: #bb2222;
162 --sidebar-button-icon-color: #333333;
163 --sidebar-button-disabled-icon-color: #888888;
164 --sidebar-button-danger-icon-color: #ffffff;
165
166 --scrollbar-thumb-color: #c1c1c1;
167 --scrollbar-track-color: #f1f1f1;
168 --scrollbar-inverse-thumb-color: #444444;
169 --scrollbar-inverse-track-color: #2f2f2f;
170
171 --progress-bar-track-color: #cccccc;
172 --progress-bar-indicator-color: var(--accent-color);
173 --entry-current-indicator-color: var(--accent-color);
174
175 --notification-text-color: #2f2f2f;
176 --notification-background-color: #f1f1f1;
177 --notification-background-color-light: #e1e1e1;
178 --notification-background-color-lighter: #bbbbbb;
179 --notification-shadow-color: rgba(255, 255, 255, 0.25);
180
181 --action-button-hover-color: #dddddd;
182 --action-button-active-color: #c1c1c1;
183}
184:root[data-theme=dark] {
185 /* Colors */
186 --background-color: #1e1e1e;
187 --gloss-image-background-color: #2f2f2f;
188 --link-color: var(--accent-color);
189
190 --text-color: #d4d4d4;
191 --reason-text-color: var(--text-color-light3);
192
193 --headword-text-color: var(--text-color);
194 --headword-text-color-popular: var(--accent-color);
195 --headword-text-color-rare: var(--text-color-light4);
196 --headword-furigana-text-color: var(--headword-text-color);
197 --headword-furigana-text-color-popular: var(--headword-text-color-popular);
198 --headword-furigana-text-color-rare: var(--headword-text-color-rare);
199 --headword-reading-text-color: var(--headword-furigana-text-color);
200 --headword-reading-text-color-popular: var(--headword-furigana-text-color-popular);
201 --headword-reading-text-color-rare: var(--headword-furigana-text-color-rare);
202 --headword-kanji-border-color: var(--dark-border-color);
203
204 --light-border-color: #2f2f2f;
205 --medium-border-color: #3f3f3f;
206 --dark-border-color: #888888;
207
208 --tag-text-color: #f1f1f1;
209 --tag-border-color: transparent;
210 --tag-default-background-color: #69696e;
211 --tag-name-background-color: #992a67;
212 --tag-expression-background-color: #b07f39;
213 --tag-popular-background-color: #025caa;
214 --tag-frequent-background-color: #4490a7;
215 --tag-archaism-background-color: #b04340;
216 --tag-dictionary-background-color: #9057ad;
217 --tag-frequency-background-color: #489148;
218 --tag-part-of-speech-background-color: #565656;
219 --tag-search-background-color: #69696e;
220 --tag-pronunciation-dictionary-background-color: #6640be;
221
222 --sidebar-background-color: #282828;
223
224 --sidebar-button-background-color: transparent;
225 --sidebar-button-background-color-hover: #3a3a3a;
226 --sidebar-button-background-color-active: #5a5a5a;
227 --sidebar-button-danger-background-color: transparent;
228 --sidebar-button-danger-background-color-hover: #dd2222;
229 --sidebar-button-danger-background-color-active: #bb2222;
230 --sidebar-button-icon-color: #cccccc;
231 --sidebar-button-disabled-icon-color: #777777;
232 --sidebar-button-danger-icon-color: #ffffff;
233
234 --scrollbar-thumb-color: #444444;
235 --scrollbar-track-color: #2f2f2f;
236 --scrollbar-inverse-thumb-color: #c1c1c1;
237 --scrollbar-inverse-track-color: #f1f1f1;
238
239 --progress-bar-track-color: #3a3a3a;
240 --progress-bar-indicator-color: var(--accent-color);
241 --entry-current-indicator-color: var(--accent-color);
242
243 --notification-text-color: #ffffff;
244 --notification-background-color: #333333;
245 --notification-background-color-light: #555555;
246 --notification-background-color-lighter: #666666;
247 --notification-shadow-color: rgba(0, 0, 0, 0.5);
248
249 --action-button-hover-color: #282828;
250 --action-button-active-color: #444444;
251}
252
253
254/* Fonts */
255@font-face {
256 font-family: kanji-stroke-orders;
257 src: url('/data/fonts/kanji-stroke-orders.ttf');
258}
259
260
261/* General */
262:root[data-page-type=popup]:not([data-theme]),
263:root[data-page-type=popup]:not([data-theme]) body {
264 background-color: transparent;
265}
266body {
267 overflow: hidden;
268}
269ol, ul {
270 margin-top: 0;
271 margin-bottom: var(--list-padding);
272}
273h2 {
274 font-size: var(--h2-font-size);
275 font-weight: normal;
276 margin: 0.25em 0 0;
277 border-bottom: calc(1em / (var(--font-size-no-units) * var(--h2-font-size-no-units))) solid var(--light-border-color);
278}
279h3 {
280 font-size: 1em;
281 font-weight: bold;
282 margin: 0.25em 0 0.375em;
283 padding: 0;
284}
285h5 {
286 font-size: calc(12em / var(--font-size-no-units));
287 margin: 0;
288 padding: 0;
289 font-weight: normal;
290}
291a {
292 color: var(--link-color);
293 text-decoration: underline;
294 cursor: pointer;
295 text-underline-offset: calc(4em / var(--font-size-no-units));
296 text-decoration-thickness: calc(1em / var(--font-size-no-units));
297}
298a:has(rt) {
299 text-decoration: none;
300 border-bottom: solid calc(1em / var(--font-size-no-units)) var(--link-color);
301}
302
303
304/* Selection */
305#content-scroll-focus {
306 opacity: 0;
307 margin: 0;
308 padding: 0;
309 outline: none;
310 background-color: transparent;
311 display: inline;
312 width: 0;
313 height: 0;
314 line-height: 0;
315 user-select: none;
316}
317#content-scroll-focus::-moz-focus-inner {
318 border: 0;
319}
320
321
322/* Scrollbars */
323:root:not([data-theme=light]) .scrollbar {
324 scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
325}
326:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar {
327 width: auto;
328}
329:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-button {
330 height: 0;
331}
332:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-thumb {
333 background-color: var(--scrollbar-thumb-color);
334}
335:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-track {
336 background-color: var(--scrollbar-thumb-color);
337}
338:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-track-piece {
339 background-color: var(--scrollbar-track-color);
340}
341:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-corner {
342 background-color: var(--scrollbar-track-color);
343}
344:root .scrollbar-inverse {
345 scrollbar-color: var(--scrollbar-inverse-humb-color) var(--scrollbar-inverse-track-color);
346}
347:root .scrollbar-inverse::-webkit-scrollbar {
348 width: auto;
349}
350:root .scrollbar-inverse::-webkit-scrollbar-button {
351 height: 0;
352}
353:root .scrollbar-inverse::-webkit-scrollbar-thumb {
354 background-color: var(--scrollbar-inverse-thumb-color);
355}
356:root .scrollbar-inverse::-webkit-scrollbar-track {
357 background-color: var(--scrollbar-inverse-thumb-color);
358}
359:root .scrollbar-inverse::-webkit-scrollbar-track-piece {
360 background-color: var(--scrollbar-inverse-track-color);
361}
362:root .scrollbar-inverse::-webkit-scrollbar-corner {
363 background-color: var(--scrollbar-inverse-track-color);
364}
365.scrollbar-spacer {
366 display: inline-block;
367 overflow-x: hidden;
368 overflow-y: scroll;
369 visibility: hidden;
370 flex: 0 1 auto;
371}
372
373
374/* Main layout */
375.content {
376 flex: 1 1 auto;
377 position: relative;
378}
379.content-scroll {
380 position: absolute;
381 left: 0;
382 top: 0;
383 right: 0;
384 bottom: 0;
385 display: flex;
386 flex-flow: column nowrap;
387 overflow-x: hidden;
388 overflow-y: scroll;
389 align-items: stretch;
390 justify-content: flex-start;
391}
392.content-body {
393 flex: 1 1 auto;
394 position: relative;
395}
396.content-body-inner {
397 width: var(--content-width);
398 max-width: 100%;
399 box-sizing: border-box;
400 margin: 0 auto;
401 padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
402}
403.content-footer-container1 {
404 display: flex;
405 flex-flow: row nowrap;
406 position: absolute;
407 left: 0;
408 right: 0;
409 bottom: 0;
410 max-height: 100%;
411 pointer-events: none;
412 z-index: 5;
413}
414.content-footer-container2 {
415 display: flex;
416 flex-flow: row nowrap;
417 justify-content: center;
418 flex: 1 1 auto;
419 max-width: 100%;
420}
421.content-footer {
422 width: var(--content-width);
423 max-width: 100%;
424}
425.contain-overscroll {
426 overscroll-behavior: contain;
427}
428
429
430/* Sidebar layout */
431.content-outer {
432 width: 100%;
433 height: 100%;
434 display: flex;
435 flex-flow: row nowrap;
436 overflow: hidden;
437 align-items: stretch;
438 align-content: stretch;
439 justify-content: center;
440}
441.content-sidebar {
442 flex: 0 0 auto;
443 height: 100%;
444 overflow-x: hidden;
445 overflow-y: auto;
446 background-color: var(--sidebar-background-color);
447 z-index: 10;
448 position: relative;
449 display: none;
450}
451:root[data-has-navigation-previous=true] .content-sidebar,
452:root[data-has-navigation-next=true] .content-sidebar,
453:root[data-popup-action-bar-visibility=always] .content-sidebar,
454:root[data-profile-panel-visible=true] .content-sidebar {
455 display: block;
456}
457.content-sidebar-inner {
458 display: flex;
459 flex-flow: column nowrap;
460 width: var(--sidebar-width);
461 height: 100%;
462}
463.content-sidebar-top-pre {
464 flex: 0 0 auto;
465 display: flex;
466 flex-flow: column nowrap;
467}
468.content-sidebar-top {
469 flex: 1 1 auto;
470 display: flex;
471 flex-flow: column nowrap;
472}
473.content-sidebar-bottom {
474 position: sticky;
475 bottom: 0;
476 background-color: var(--sidebar-background-color);
477 display: flex;
478 flex-flow: column nowrap;
479 align-items: center;
480}
481:root[data-popup-action-bar-location=top] .content-outer,
482:root[data-popup-action-bar-location=bottom] .content-outer {
483 flex-flow: column nowrap;
484}
485:root[data-popup-action-bar-location=top] .content-sidebar,
486:root[data-popup-action-bar-location=bottom] .content-sidebar {
487 height: auto;
488 width: 100%;
489}
490:root[data-popup-action-bar-location=left] .content-sidebar,
491:root[data-popup-action-bar-location=top] .content-sidebar {
492 order: -1;
493}
494:root[data-popup-action-bar-location=top] .content-sidebar-inner,
495:root[data-popup-action-bar-location=bottom] .content-sidebar-inner {
496 flex-flow: row nowrap;
497 width: auto;
498 height: var(--sidebar-button-height);
499}
500:root[data-popup-action-bar-location=top] .content-sidebar-top-pre,
501:root[data-popup-action-bar-location=bottom] .content-sidebar-top-pre {
502 flex-flow: row nowrap;
503 order: 1;
504}
505:root[data-popup-action-bar-location=top] .content-sidebar-top,
506:root[data-popup-action-bar-location=bottom] .content-sidebar-top {
507 flex-flow: row nowrap;
508}
509:root[data-popup-action-bar-location=top] .content-sidebar-bottom,
510:root[data-popup-action-bar-location=bottom] .content-sidebar-bottom {
511 flex-flow: row nowrap;
512}
513
514:root[data-popup-action-bar-location=right] #profile-name,
515:root[data-popup-action-bar-location=left] #profile-name {
516 writing-mode: vertical-rl;
517 text-orientation: vertical;
518 letter-spacing: 2px;
519}
520
521
522/* Sidebar buttons */
523button.sidebar-button {
524 --button-content-color: var(--sidebar-button-icon-color);
525 --button-border-color: transparent;
526 --button-background-color: var(--sidebar-button-background-color);
527 --button-shadow: none;
528
529 --button-hover-border-color: transparent;
530 --button-hover-background-color: var(--sidebar-button-background-color-hover);
531 --button-hover-shadow: none;
532
533 --button-active-border-color: transparent;
534 --button-active-background-color: var(--sidebar-button-background-color-active);
535 --button-active-shadow: none;
536
537 --button-disabled-content-color: var(--sidebar-button-disabled-icon-color);
538 --button-disabled-border-color: transparent;
539 --button-disabled-background-color: var(--sidebar-button-background-color);
540 --button-disabled-shadow: none;
541
542 width: 100%;
543 height: var(--sidebar-button-height);
544 margin: 0;
545 padding: 0;
546 border-style: none;
547 border-width: 0;
548 cursor: pointer;
549 display: block;
550 transition: background-color 0.125s ease-in-out;
551 outline: none;
552 font-size: inherit;
553 border-radius: 0;
554}
555:root[data-popup-action-bar-location=top] button.sidebar-button,
556:root[data-popup-action-bar-location=bottom] button.sidebar-button {
557 width: var(--sidebar-width);
558 height: 100%;
559}
560button.sidebar-button.danger {
561 --button-content-color: var(--sidebar-button-icon-color);
562 --button-border-color: transparent;
563 --button-background-color: var(--sidebar-button-danger-background-color);
564 --button-shadow: none;
565
566 --button-hover-content-color: var(--sidebar-button-danger-icon-color);
567 --button-hover-border-color: transparent;
568 --button-hover-background-color: var(--sidebar-button-danger-background-color-hover);
569 --button-hover-shadow: none;
570
571 --button-active-content-color: var(--sidebar-button-danger-icon-color);
572 --button-active-border-color: transparent;
573 --button-active-background-color: var(--sidebar-button-danger-background-color-active);
574 --button-active-shadow: none;
575}
576.sidebar-button-icon {
577 --icon-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size);
578
579 display: block;
580 width: 100%;
581 height: 100%;
582 background-color: var(--button-current-content-color);
583 transition: background-color 0.125s ease-in-out;
584}
585button.sidebar-button.sidebar-button-highlight {
586 --button-content-color: var(--accent-color);
587 --button-hover-content-color: var(--accent-color);
588 --button-active-content-color: var(--accent-color);
589}
590
591
592/* Search page */
593.search-header-wrapper {
594 background-color: var(--background-color);
595 width: 100%;
596 display: flex;
597 justify-content: center;
598}
599.sticky-header {
600 position: sticky;
601 top: 0px;
602 z-index: 1000;
603}
604#sticky-search-header {
605 padding-top: 10px;
606}
607.sticky-header #query-parser-content {
608 max-height: calc(var(--query-parser-font-size) * 2);
609}
610.search-header {
611 width: var(--content-width);
612 display: flex;
613 flex-flow: column nowrap;
614 max-height: 100vh;
615 padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
616}
617#query-parser-container {
618 overflow-y: auto;
619 padding-left: var(--query-horizontal-padding);
620 padding-right: var(--query-horizontal-padding);
621 padding-bottom: 0.25em;
622 border-bottom: var(--headword-thin-border-size) solid var(--light-border-color);
623}
624#query-parser-content {
625 margin-top: 0.5em;
626 font-size: var(--query-parser-font-size);
627 white-space: pre-wrap;
628}
629#query-parser-content[data-term-spacing=true] .query-parser-term {
630 margin-right: 0.2em;
631}
632
633
634/* Action buttons */
635.actions {
636 display: flex;
637 flex-flow: row nowrap;
638 float: right;
639 margin: -0.25em;
640 position: relative;
641 z-index: 1;
642}
643.actions::after {
644 clear: both;
645 content: '';
646 display: block;
647}
648.note-actions-container {
649 display: flex;
650 flex-flow: row nowrap;
651 align-items: start;
652}
653.action-button-container {
654 display: flex;
655 flex-direction: column;
656 position: relative;
657}
658
659.note-actions-container .action-button-container::after {
660 content: '';
661 position: absolute;
662 left: calc(50% - 0.5px);
663 top: calc((var(--action-button-size) + var(--action-button-padding) * 2) * 0.5);
664 bottom: calc((var(--action-button-size) + var(--action-button-padding) * 2) * 0.5);
665 width: 1px;
666 background: var(--accent-color);
667 pointer-events: none;
668 opacity: 0.25;
669 z-index: -1;
670}
671
672.note-actions-container .action-button-container:first-child {
673 flex-direction: row-reverse;
674}
675.note-actions-container .action-button-container:first-child::after {
676 top: calc(50% - 0.5px);
677 left: calc((var(--action-button-size) + var(--action-button-padding) * 2) * 0.5);
678 right: calc((var(--action-button-size) + var(--action-button-padding) * 2) * 0.5);
679 bottom: auto;
680 height: 1px;
681 width: auto;
682}
683
684.note-actions-container .action-button-container:only-child::after {
685 display: none;
686}
687
688button.action-button {
689 cursor: pointer;
690 display: block;
691 opacity: 1;
692 border: 0;
693 margin: 0;
694 padding: var(--action-button-padding);
695 background: transparent;
696 font-size: inherit;
697 box-shadow: none;
698 position: relative;
699 z-index: 1;
700 transition:
701 opacity var(--animation-duration) linear,
702 visibility 0s linear 0s,
703 filter var(--animation-duration) linear,
704 -webkit-filter var(--animation-duration) linear,
705 background-color var(--animation-duration) linear;
706}
707button.action-button[hidden] {
708 display: block;
709 visibility: hidden;
710 opacity: 0;
711 transition:
712 opacity var(--animation-duration) linear,
713 visibility 0s linear var(--animation-duration),
714 filter var(--animation-duration) linear,
715 -webkit-filter var(--animation-duration) linear,
716 background-color var(--animation-duration) linear;
717}
718button.action-button-collapsible[hidden] {
719 display: none;
720}
721button.action-button:disabled {
722 pointer-events: auto;
723 cursor: default;
724 -webkit-filter: grayscale(100%);
725 filter: grayscale(100%);
726 background-color: transparent;
727}
728button.action-button:disabled:not([hidden]) {
729 opacity: 0.25;
730}
731button.action-button:hover,
732button.action-button:focus {
733 background-color: transparent;
734 box-shadow: none;
735}
736button.action-button:focus-visible {
737 background-color: var(--action-button-hover-color);
738 box-shadow: none;
739}
740button.action-button:active:not(:disabled) {
741 background-color: var(--action-button-active-color);
742 box-shadow: none;
743}
744
745.icon[data-icon=view-note] { background-image: url('/images/view-note.svg'); }
746.icon[data-icon=view-note-learning] { background-image: url('/images/view-note-learning.svg'); }
747.icon[data-icon=view-note-review] { background-image: url('/images/view-note-review.svg'); }
748.icon[data-icon=view-note-suspended] { background-image: url('/images/view-note-suspended.svg'); }
749.icon[data-icon=view-note-buried] { background-image: url('/images/view-note-buried.svg'); }
750.icon[data-icon=big-circle] { background-image: url('/images/big-circle.svg'); }
751.icon[data-icon=small-circle] { background-image: url('/images/small-circle.svg'); }
752.icon[data-icon=big-square] { background-image: url('/images/big-square.svg'); }
753.icon[data-icon=big-diamond] { background-image: url('/images/big-diamond.svg'); }
754.icon[data-icon=overwrite-big-circle] { background-image: url('/images/overwrite-big-circle.svg'); }
755.icon[data-icon=overwrite-small-circle] { background-image: url('/images/overwrite-small-circle.svg'); }
756.icon[data-icon=overwrite-big-square] { background-image: url('/images/overwrite-big-square.svg'); }
757.icon[data-icon=overwrite-big-diamond] { background-image: url('/images/overwrite-big-diamond.svg'); }
758.icon[data-icon=add-duplicate-big-circle] { background-image: url('/images/add-duplicate-big-circle.svg'); }
759.icon[data-icon=add-duplicate-small-circle] { background-image: url('/images/add-duplicate-small-circle.svg'); }
760.icon[data-icon=add-duplicate-big-square] { background-image: url('/images/add-duplicate-big-square.svg'); }
761.icon[data-icon=add-duplicate-big-diamond] { background-image: url('/images/add-duplicate-big-diamond.svg'); }
762.icon[data-icon=play-audio] { background-image: url('/images/play-audio.svg'); }
763.icon[data-icon=source-term] { background-image: url('/images/source-term.svg'); }
764.icon[data-icon=entry-current] { background-image: url('/images/entry-current.svg'); }
765.action-icon {
766 display: block;
767 width: var(--action-button-size);
768 height: var(--action-button-size);
769}
770.action-icon:not(.color-icon) {
771 background-color: var(--text-color);
772}
773:root[data-result-output-mode=merge] .entry[data-type=term] .actions>button.action-button[data-action=play-audio] {
774 display: none;
775}
776.action-button-badge {
777 pointer-events: none;
778 position: absolute;
779 display: block;
780 right: 0;
781 top: 0;
782 width: calc(8em / var(--font-size-no-units));
783 height: calc(8em / var(--font-size-no-units));
784}
785.action-button-badge[data-icon=cross] {
786 background-color: var(--danger-color);
787}
788.action-button-badge[data-icon=plus-thick] {
789 background-color: var(--success-color);
790}
791
792
793/* Tags */
794.tag {
795 --tag-color: var(--tag-default-background-color);
796
797 display: inline-flex;
798 flex-flow: row nowrap;
799 align-items: stretch;
800 border: none;
801 border-right: none;
802 font-size: 1em;
803 min-height: var(--tag-height);
804 margin: calc(1em / var(--font-size-no-units)) 0.375em calc(1em / var(--font-size-no-units)) 0;
805}
806.tag-label {
807 display: flex;
808 flex-flow: row nowrap;
809 align-items: center;
810 background-color: var(--tag-color);
811 border-radius: var(--tag-border-radius);
812 padding: calc(2.5em / var(--font-size-no-units)) 0.375em calc(2.5em / var(--font-size-no-units)) 0.375em;
813 color: var(--tag-text-color);
814 cursor: pointer;
815}
816.tag-label-content {
817 display: block;
818 font-size: var(--tag-font-size);
819 font-weight: var(--tag-font-weight);
820}
821.tag-body {
822 display: flex;
823 flex-flow: row nowrap;
824 align-items: center;
825 position: relative;
826 padding: 0 0.375em 0 0.375em;
827 border-radius: var(--tag-border-radius);
828 border-top-left-radius: 0;
829 border-bottom-left-radius: 0;
830}
831.tag-body::before {
832 content: '';
833 display: block;
834 position: absolute;
835 left: 0;
836 top: 0;
837 bottom: 0;
838 right: 0;
839 border-radius: var(--tag-border-radius);
840 border-top-left-radius: 0;
841 border-bottom-left-radius: 0;
842 border: var(--tag-border-size) var(--tag-border-style) var(--tag-color);
843 border-left: none;
844 pointer-events: none;
845}
846.tag-body-content {
847 display: block;
848 position: relative;
849}
850.tag:not(.tag-has-body)>.tag-body {
851 display: none;
852}
853.tag.tag-has-body>.tag-label {
854 border-top-right-radius: 0;
855 border-bottom-right-radius: 0;
856}
857.tag[data-category=name] {
858 --tag-color: var(--tag-name-background-color);
859}
860.tag[data-category=expression] {
861 --tag-color: var(--tag-expression-background-color);
862}
863.tag[data-category=popular] {
864 --tag-color: var(--tag-popular-background-color);
865}
866.tag[data-category=frequent] {
867 --tag-color: var(--tag-frequent-background-color);
868}
869.tag[data-category=archaism] {
870 --tag-color: var(--tag-archaism-background-color);
871}
872.tag[data-category=dictionary] {
873 --tag-color: var(--tag-dictionary-background-color);
874}
875.tag[data-category=frequency] {
876 --tag-color: var(--tag-frequency-background-color);
877}
878.tag[data-category=partOfSpeech] {
879 --tag-color: var(--tag-part-of-speech-background-color);
880}
881.tag[data-category=search] {
882 --tag-color: var(--tag-search-background-color);
883}
884.tag[data-category=pronunciation-dictionary] {
885 --tag-color: var(--tag-pronunciation-dictionary-background-color);
886}
887
888
889/* Entries */
890.entry {
891 padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
892 position: relative;
893 content-visibility: auto;
894 contain-intrinsic-height: auto 500px;
895}
896.entry+.entry {
897 border-top: var(--thin-border-size) solid var(--light-border-color);
898}
899.entry-body {
900 clear: both;
901}
902.entry[data-definition-count='0'] .entry-body-section[data-section-type=definitions],
903.entry[data-frequency-count='0'] .entry-body-section[data-section-type=frequencies],
904.entry[data-pronunciation-count='0'] .entry-body-section[data-section-type=pronunciations] {
905 display: none;
906}
907
908
909/* Inflections */
910.inflection-rule-chains {
911 padding-inline-start: 0;
912 list-style-type: none;
913}
914.inflection-rule-chain {
915 color: var(--reason-text-color);
916}
917.inflection-rule-chain:empty {
918 display: none;
919}
920.inflection-rule-chain>.inflection+.inflection-separator+.inflection::before {
921 content: var(--inflection-separator);
922 padding: 0 0.25em;
923}
924.inflection-source-icon {
925 display: inline-block;
926 white-space: nowrap;
927 text-align: center;
928 width: 1.4em;
929 margin-right: 0.2em;
930}
931.inflection-source-icon[data-inflection-source='dictionary']::after {
932 content: '📖';
933}
934.inflection-source-icon[data-inflection-source='algorithm']::after {
935 content: '🧩';
936}
937.inflection-source-icon[data-inflection-source='both'] {
938 width: 2.8em;
939}
940.inflection-source-icon[data-inflection-source='both']::after {
941 content: '🧩📖';
942}
943.inflection[title] {
944 cursor: pointer;
945}
946
947
948/* Headwords */
949.headword-list {
950 display: inline;
951 margin-right: var(--headword-list-end-space);
952}
953.headword {
954 --headword-current-text-color: var(--headword-text-color);
955 --headword-current-reading-text-color: var(--headword-reading-text-color);
956 --headword-current-furigana-text-color: var(--headword-furigana-text-color);
957 --headword-current-kanji-text-color: var(--headword-kanji-text-color);
958 --headword-current-kanji-border-color: var(--headword-kanji-border-color);
959
960 display: inline-block;
961}
962:root[data-result-output-mode=merge] .headword[data-frequency=popular] {
963 --headword-current-text-color: var(--headword-text-color-popular);
964 --headword-current-reading-text-color: var(--headword-reading-text-color-popular);
965 --headword-current-furigana-text-color: var(--headword-furigana-text-color-popular);
966 --headword-current-kanji-text-color: var(--headword-kanji-text-color-popular);
967 --headword-current-kanji-border-color: var(--headword-kanji-border-color-popular);
968}
969:root[data-result-output-mode=merge] .headword[data-frequency=rare] {
970 --headword-current-text-color: var(--headword-text-color-rare);
971 --headword-current-reading-text-color: var(--headword-reading-text-color-rare);
972 --headword-current-furigana-text-color: var(--headword-furigana-text-color-rare);
973 --headword-current-kanji-text-color: var(--headword-kanji-text-color-rare);
974 --headword-current-kanji-border-color: var(--headword-kanji-border-color-rare);
975}
976.headword-details {
977 display: inline;
978}
979.headword-list-details {
980 display: inline;
981}
982.headword-list-tag-list {
983 display: inline;
984}
985.headword-text-container {
986 display: inline-block;
987 margin-left: calc(-1 * var(--headword-reading-space));
988}
989.headword-term-outer {
990 display: inline-block;
991 position: relative;
992 margin-left: var(--headword-reading-space);
993}
994.headword-reading-outer {
995 display: none;
996 position: relative;
997 margin-left: var(--headword-reading-space);
998}
999.headword-term {
1000 color: var(--headword-current-text-color);
1001 font-size: var(--headword-font-size);
1002}
1003.headword-reading {
1004 color: var(--headword-current-reading-text-color);
1005 font-size: var(--headword-reading-font-size);
1006}
1007.headword-list>.headword:not(:last-of-type)>.headword-text-container>.headword-term-outer::after {
1008 content: var(--headword-separator);
1009 font-size: var(--headword-font-size);
1010}
1011.headword-list>.headword:not(:last-of-type)>.headword-text-container>.headword-reading-outer::after {
1012 content: var(--headword-separator);
1013 font-size: var(--headword-reading-font-size);
1014}
1015.headword-term>ruby>rt {
1016 color: var(--headword-current-furigana-text-color);
1017}
1018.headword-kanji-link {
1019 text-decoration: underline dashed var(--headword-current-kanji-border-color) var(--headword-thin-border-size);
1020 text-underline-offset: calc(var(--headword-font-size) / 15);
1021 color: var(--headword-current-kanji-text-color);
1022 cursor: pointer;
1023}
1024:root[data-result-output-mode=merge] .headword-list-details {
1025 display: block;
1026}
1027:root[data-term-display-mode=ruby-and-reading] .headword-term-outer::after,
1028:root[data-term-display-mode=term-and-reading] .headword-term-outer::after {
1029 display: none;
1030}
1031:root:not([data-language=ja]) {
1032 --headword-separator: ', ';
1033}
1034:root[data-term-display-mode=ruby-and-reading] .headword-reading-outer,
1035:root[data-term-display-mode=term-and-reading] .headword-reading-outer {
1036 display: inline-block;
1037}
1038:root[data-term-display-mode=ruby-and-reading] .headword[data-reading-is-same=true] .headword-term-outer::after,
1039:root[data-term-display-mode=term-and-reading] .headword[data-reading-is-same=true] .headword-term-outer::after {
1040 display: inline-block;
1041}
1042:root[data-term-display-mode=ruby-and-reading] .headword[data-reading-is-same=true] .headword-reading-outer,
1043:root[data-term-display-mode=term-and-reading] .headword[data-reading-is-same=true] .headword-reading-outer {
1044 display: none;
1045}
1046:root[data-term-display-mode=term-and-reading] .headword-term>ruby>rt,
1047:root[data-term-display-mode=term-only] .headword-term>ruby>rt {
1048 display: none;
1049}
1050
1051
1052/* Entry indicator */
1053.entry-current-indicator {
1054 display: block;
1055 position: absolute;
1056 left: calc(-1 * var(--main-content-horizontal-padding));
1057 top: 0;
1058 bottom: 0;
1059 width: 0;
1060 background-color: var(--entry-current-indicator-color);
1061 visibility: hidden;
1062 transition:
1063 width var(--entry-current-indicator-transition-duration) linear,
1064 visibility 0s linear var(--entry-current-indicator-transition-duration);
1065}
1066.entry.entry-current .entry-current-indicator {
1067 width: var(--entry-current-indicator-width);
1068 visibility: visible;
1069 transition:
1070 width var(--entry-current-indicator-transition-duration) linear,
1071 visibility 0s linear 0s;
1072}
1073:root[data-popup-current-indicator-mode=bar-right] .entry-current-indicator,
1074:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator {
1075 left: auto;
1076 right: 0;
1077}
1078.entry-current-indicator-inner {
1079 display: none;
1080 pointer-events: auto;
1081 width: 100%;
1082 height: 0;
1083 top: 0;
1084 background-color: var(--entry-current-indicator-color);
1085 transition: none;
1086}
1087.entry.entry-current .entry-current-indicator-inner {
1088 height: var(--entry-current-indicator-width);
1089 transition: height var(--entry-current-indicator-transition-duration) linear;
1090}
1091:root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator,
1092:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator {
1093 background-color: transparent;
1094}
1095:root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator-inner,
1096:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator-inner {
1097 display: block;
1098 position: sticky;
1099 transition: height var(--entry-current-indicator-transition-duration) linear;
1100}
1101:root[data-popup-current-indicator-mode=none] .entry-current-indicator,
1102:root[data-popup-current-indicator-mode=asterisk] .entry-current-indicator,
1103:root[data-popup-current-indicator-mode=triangle] .entry-current-indicator {
1104 display: none;
1105 transition: none;
1106}
1107
1108
1109/* Triangle entry indicator */
1110.headword-current-indicator {
1111 pointer-events: none;
1112 position: absolute;
1113 left: calc(-1 * var(--main-content-horizontal-padding));
1114 top: 0;
1115 bottom: 0;
1116 opacity: 0;
1117 visibility: hidden;
1118 transition:
1119 opacity var(--entry-current-indicator-transition-duration) linear,
1120 visibility 0s linear var(--entry-current-indicator-transition-duration);
1121}
1122.headword-term .headword-current-indicator {
1123 font-size: calc(1em / var(--headword-font-size-no-units));
1124}
1125.entry.entry-current .headword-current-indicator {
1126 opacity: 1;
1127 visibility: visible;
1128 transition:
1129 opacity var(--entry-current-indicator-transition-duration) linear,
1130 visibility 0s linear 0s;
1131}
1132.headword-current-indicator::after {
1133 content: '';
1134 display: block;
1135 position: absolute;
1136 width: var(--entry-current-indicator-triangle-size);
1137 height: calc(2 * var(--entry-current-indicator-triangle-size));
1138 left: calc(-1 * var(--entry-horizontal-padding));
1139 top: calc(50% - var(--entry-current-indicator-triangle-size));
1140 background-color: var(--entry-current-indicator-color);
1141 mask-repeat: no-repeat;
1142 mask-position: center center;
1143 mask-mode: alpha;
1144 mask-size: contain;
1145 mask-image: url(/images/material-right-arrow.svg);
1146 -webkit-mask-repeat: no-repeat;
1147 -webkit-mask-position: center center;
1148 -webkit-mask-mode: alpha;
1149 -webkit-mask-size: contain;
1150 -webkit-mask-image: url(/images/material-right-arrow.svg);
1151}
1152.headword-list>.headword:not(:first-of-type) .headword-current-indicator,
1153:root:not([data-popup-current-indicator-mode=triangle]) .headword-current-indicator {
1154 display: none;
1155 transition: none;
1156}
1157
1158
1159/* Old entry indicator */
1160.entry-current-indicator-icon {
1161 display: block;
1162 padding: var(--action-button-padding);
1163}
1164.entry-current-indicator-icon[hidden],
1165.entry:not(.entry-current) .entry-current-indicator-icon,
1166:root:not([data-popup-current-indicator-mode=asterisk]) .entry-current-indicator-icon {
1167 display: none;
1168}
1169.entry-current-indicator-icon>.icon {
1170 width: var(--action-button-size);
1171 height: var(--action-button-size);
1172 display: block;
1173 background-image: url('/images/entry-current.svg');
1174}
1175
1176
1177/* Merged term styles */
1178:root[data-result-output-mode=merge] .headword-list .headword-details {
1179 display: inline-block;
1180 position: relative;
1181 width: 0;
1182 height: 0;
1183 visibility: hidden;
1184 z-index: 1;
1185}
1186:root[data-result-output-mode=merge] .headword-list>.headword:not(:last-of-type) .headword-details {
1187 left: calc(-1 * var(--headword-font-size));
1188}
1189:root[data-result-output-mode=merge] .headword:hover .headword-details {
1190 visibility: visible;
1191}
1192:root[data-result-output-mode=merge] .headword-list .headword-details>.action-button[data-action=play-audio] {
1193 position: absolute;
1194 left: 0;
1195 bottom: 0.5em;
1196}
1197:root:not([data-result-output-mode=merge]) .headword-list .headword-details>.action-button[data-action=play-audio] {
1198 display: none;
1199}
1200
1201
1202/* Definitions */
1203.definition-list {
1204 margin: 0;
1205 padding: 0 0 0 var(--list-padding1);
1206 list-style-type: decimal;
1207}
1208.definition-list[data-count='0'],
1209.definition-list[data-count='1'] {
1210 padding-left: 0;
1211 list-style-type: none;
1212}
1213.gloss-list {
1214 margin: 0;
1215 padding: 0 0 0 var(--list-padding2);
1216 list-style-type: circle;
1217}
1218.gloss-list[data-count='0'],
1219.gloss-list[data-count='1'] {
1220 padding-left: 0;
1221 list-style-type: none;
1222}
1223.definition-item::marker,
1224.gloss-item::marker {
1225 color: var(--text-color-light3);
1226}
1227.gloss-content {
1228 display: block;
1229 white-space: pre-line;
1230}
1231.definition-disambiguation-list {
1232 color: var(--text-color-light3);
1233 padding-right: var(--disambiguation-space);
1234}
1235.definition-disambiguation-list[data-count='0'] {
1236 display: none;
1237}
1238.definition-disambiguation+.definition-disambiguation::before {
1239 content: var(--disambiguation-separator);
1240}
1241.gloss-separator,
1242.inflection-separator {
1243 display: inline;
1244 font-size: 0;
1245 opacity: 0;
1246 white-space: pre-wrap;
1247}
1248.gloss-separator {
1249 display: none;
1250}
1251.definition-item {
1252 display: list-item;
1253 position: relative;
1254}
1255.definition-item-inner {
1256 display: flex;
1257 flex-flow: row nowrap;
1258}
1259.definition-item-content {
1260 width: 100%;
1261 flex: 1 1 auto;
1262 background-color: transparent;
1263 transition: background-color var(--animation-duration) ease-in-out;
1264}
1265
1266/* Collapse & Expand */
1267button.expansion-button {
1268 --button-content-color: var(--text-color-light4);
1269 --button-border-color: transparent;
1270 --button-background-color: transparent;
1271
1272 --button-hover-content-color: var(--text-color-light1);
1273 --button-hover-border-color: var(--accent-color-lighter);
1274 --button-hover-background-color: var(--accent-color-lighter);
1275
1276 --button-active-content-color: var(--text-color);
1277 --button-active-border-color: var(--accent-color-light);
1278 --button-active-background-color: var(--accent-color-light);
1279
1280 --button-padding-vertical: 0;
1281 --button-padding-horizontal: 0.125em;
1282
1283 flex: 0 0 auto;
1284 order: 1;
1285 border-radius: 0;
1286 border: 0;
1287}
1288
1289button.expansion-button:hover+.definition-item-content,
1290button.expansion-button:active+.definition-item-content,
1291button.expansion-button:focus+.definition-item-content,
1292button.expansion-button:hover+.kanji-glyph-table,
1293button.expansion-button:active+.kanji-glyph-table,
1294button.expansion-button:focus+.kanji-glyph-table {
1295 background-color: var(--accent-color-transparent25);
1296}
1297button.expansion-button:focus:not(:focus-visible)+.definition-item-content,
1298button.expansion-button:focus:not(:focus-visible)+.kanji-glyph-table {
1299 background-color: transparent;
1300}
1301button.expansion-button:focus:hover+.definition-item-content,
1302button.expansion-button:focus:active+.definition-item-content,
1303button.expansion-button:focus:focus-visible+.definition-item-content,
1304button.expansion-button:focus:hover+.kanji-glyph-table,
1305button.expansion-button:focus:active+.kanji-glyph-table,
1306button.expansion-button:focus:focus-visible+.kanji-glyph-table {
1307 background-color: var(--accent-color-transparent25);
1308}
1309.definition-item-inner.collapsible.collapsed {
1310 max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height));
1311 overflow: hidden;
1312}
1313.definition-item-inner.collapse-test {
1314 max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height) + var(--collapsible-definition-test-offset));
1315 overflow: hidden;
1316}
1317.kanji-glyph-data.collapsible.collapsed {
1318 max-height: calc(1em * var(--collapsible-kanji-glyph-data-line-count) * var(--line-height) + var(--kanji-glyph-table-header-height));
1319 overflow: hidden;
1320}
1321.kanji-glyph-data.collapse-test {
1322 max-height: calc(1em * var(--collapsible-kanji-glyph-data-line-count) * var(--line-height) + var(--kanji-glyph-table-header-height) + var(--collpasible-kanji-glyph-data-test-offset));
1323 overflow: hidden;
1324}
1325:not(.collapsible)>button.expansion-button {
1326 display: none;
1327}
1328.expansion-button-icon {
1329 transform: rotate(0deg);
1330 width: calc(16em / var(--font-size-no-units));
1331 height: calc(16em / var(--font-size-no-units));
1332 background-color: var(--button-current-content-color);
1333 transition: background-color var(--animation-duration) ease-in-out;
1334}
1335.collapsible:not(.collapsed)>button.expansion-button>.expansion-button-icon {
1336 transform: rotate(180deg);
1337}
1338
1339/* Frequencies */
1340.frequency-group-item {
1341 display: inline;
1342}
1343.frequency-item {
1344 display: inline;
1345}
1346.frequency-disambiguation {
1347 color: var(--text-color-light3);
1348 padding-right: var(--disambiguation-space);
1349}
1350.frequency-disambiguation-separator::before {
1351 content: var(--disambiguation-reading-separator);
1352}
1353.frequency-disambiguation-reading {
1354 display: inline;
1355 font-size: 1em;
1356}
1357.frequency-body::after {
1358 white-space: pre-wrap;
1359 display: inline;
1360 color: var(--text-color-light3);
1361}
1362.entry[data-unique-term-count='1'] .frequency-item[data-has-reading=false] .frequency-disambiguation,
1363.entry[data-unique-reading-count='1'][data-unique-term-count='1'] .frequency-disambiguation,
1364.frequency-item[data-reading-is-same=true] .frequency-disambiguation-separator,
1365.frequency-item[data-reading-is-same=true] .frequency-disambiguation-reading,
1366.frequency-item[data-has-reading=false] .frequency-disambiguation-separator,
1367.frequency-item[data-has-reading=false] .frequency-disambiguation-reading,
1368.entry[data-unique-term-count='1'] .frequency-disambiguation-separator,
1369.entry[data-unique-term-count='1'] .frequency-disambiguation-term,
1370.entry[data-unique-reading-count='1'] .frequency-disambiguation-separator,
1371.entry[data-unique-reading-count='1'] .frequency-disambiguation-reading {
1372 display: none;
1373}
1374:root[data-frequency-display-mode=tags] .frequency-group-tag,
1375:root[data-frequency-display-mode=split-tags] .frequency-group-tag {
1376 margin: 0;
1377 display: inline;
1378 min-height: auto;
1379}
1380:root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-label,
1381:root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-label {
1382 display: none;
1383}
1384:root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-body,
1385:root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-body {
1386 display: inline;
1387 padding: 0;
1388}
1389:root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-body::before,
1390:root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-body::before {
1391 display: none;
1392}
1393:root[data-frequency-display-mode=tags] .frequency-list,
1394:root[data-frequency-display-mode=split-tags] .frequency-list {
1395 display: inline;
1396}
1397:root[data-frequency-display-mode=list] .frequency-tag,
1398:root[data-frequency-display-mode=inline-list] .frequency-tag,
1399:root[data-frequency-display-mode=tags-grouped] .frequency-tag,
1400:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag {
1401 margin: 0;
1402 display: inline;
1403 min-height: auto;
1404}
1405:root[data-frequency-display-mode=list] .frequency-tag>.tag-label,
1406:root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-label,
1407:root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-label,
1408:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-label {
1409 display: none;
1410}
1411:root[data-frequency-display-mode=list] .frequency-tag>.tag-body,
1412:root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-body,
1413:root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-body,
1414:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-body {
1415 display: inline;
1416 padding: 0;
1417}
1418:root[data-frequency-display-mode=list] .frequency-tag>.tag-body::before,
1419:root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-body::before,
1420:root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-body::before,
1421:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-body::before {
1422 display: none;
1423}
1424:root[data-frequency-display-mode=list] .frequency-body,
1425:root[data-frequency-display-mode=inline-list] .frequency-body,
1426:root[data-frequency-display-mode=tags-grouped] .frequency-body,
1427:root[data-frequency-display-mode=split-tags-grouped] .frequency-body {
1428 display: inline-block;
1429}
1430:root[data-frequency-display-mode=inline-list] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after,
1431:root[data-frequency-display-mode=tags-grouped] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after,
1432:root[data-frequency-display-mode=split-tags-grouped] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after {
1433 content: var(--compact-list-separator);
1434}
1435:root[data-frequency-display-mode=list] .frequency-group-tag>.tag-body::before,
1436:root[data-frequency-display-mode=inline-list] .frequency-group-tag>.tag-body::before {
1437 display: none;
1438}
1439:root[data-frequency-display-mode=list] .frequency-group-tag.tag.tag-has-body>.tag-label,
1440:root[data-frequency-display-mode=inline-list] .frequency-group-tag.tag.tag-has-body>.tag-label {
1441 border-radius: var(--tag-border-radius);
1442}
1443:root[data-frequency-display-mode=tags] .frequency-tag>.tag-body::before {
1444 display: none;
1445}
1446:root[data-frequency-display-mode=tags] .frequency-tag>.tag-body {
1447 background-color: var(--tag-color);
1448 padding-left: 0;
1449}
1450:root[data-frequency-display-mode=tags] .frequency-body {
1451 font-size: var(--tag-font-size);
1452 font-weight: var(--tag-font-weight);
1453 color: var(--tag-text-color);
1454}
1455:root[data-frequency-display-mode=tags] .frequency-tag>.tag-label>.tag-label-content::after {
1456 content: ':';
1457}
1458:root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-body::before {
1459 display: none;
1460}
1461:root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-body {
1462 background-color: var(--tag-color);
1463 padding-left: 0;
1464}
1465:root[data-frequency-display-mode=tags-grouped] .frequency-list {
1466 font-size: var(--tag-font-size);
1467 font-weight: var(--tag-font-weight);
1468 color: var(--tag-text-color);
1469}
1470:root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-label>.tag-label-content::after {
1471 content: ':';
1472}
1473:root[data-frequency-display-mode=tags] .frequency-disambiguation,
1474:root[data-frequency-display-mode=tags-grouped] .frequency-disambiguation,
1475:root[data-frequency-display-mode=tags] .frequency-body::after,
1476:root[data-frequency-display-mode=tags-grouped] .frequency-body::after {
1477 color: inherit;
1478 font-weight: normal;
1479 opacity: 0.75;
1480}
1481:root[data-frequency-display-mode=list] .frequency-group-list {
1482 list-style-type: decimal;
1483 padding: 0 0 0 var(--list-padding1);
1484}
1485:root[data-frequency-display-mode=list] .frequency-group-item {
1486 display: list-item;
1487}
1488:root[data-frequency-display-mode=list] .frequency-group-item::marker {
1489 color: var(--text-color-light3);
1490}
1491:root[data-frequency-display-mode=list] .frequency-group-tag {
1492 display: block;
1493 min-height: auto;
1494}
1495:root[data-frequency-display-mode=list] .frequency-group-tag>.tag-label {
1496 display: inline-flex;
1497}
1498:root[data-frequency-display-mode=list] .frequency-list {
1499 list-style-type: circle;
1500 padding: 0 0 0 var(--list-padding2);
1501}
1502:root[data-frequency-display-mode=list] .frequency-item {
1503 display: list-item;
1504}
1505:root[data-frequency-display-mode=list] .frequency-item::marker {
1506 color: var(--text-color-light3);
1507}
1508:root[data-frequency-display-mode=list] .frequency-group-list[data-count='1'] {
1509 list-style-type: none;
1510 padding-left: 0;
1511}
1512:root[data-frequency-display-mode=list] .frequency-group-list[data-count='1']>.frequency-group-item {
1513 display: inline;
1514}
1515:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1']>.frequency-group-tag>.tag-body {
1516 display: inline-flex;
1517}
1518:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1']>.frequency-group-tag>.tag-body>.frequency-body {
1519 display: inline;
1520}
1521:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1'] .frequency-list {
1522 list-style-type: none;
1523 padding-left: 0;
1524}
1525:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1'] .frequency-item {
1526 display: inline;
1527}
1528
1529
1530/* Pitch accent styles */
1531.pronunciation-group-list {
1532 margin: 0;
1533 padding: 0 0 0 var(--list-padding1);
1534 list-style-type: decimal;
1535}
1536.pronunciation-group-list[data-count='0'],
1537.pronunciation-group-list[data-count='1'] {
1538 padding-left: 0;
1539 list-style-type: none;
1540}
1541.pronunciation-list {
1542 margin: 0;
1543 padding: 0 0 0 var(--list-padding2);
1544 list-style-type: circle;
1545 display: block;
1546}
1547.pronunciation-list[data-count='0'],
1548.pronunciation-list[data-count='1'] {
1549 padding-left: 0;
1550 list-style-type: none;
1551 display: inline;
1552}
1553.pronunciation-group::marker,
1554.pronunciation::marker {
1555 color: var(--text-color-light3);
1556}
1557.pronunciation {
1558 display: list-item;
1559 line-height: 1.5;
1560}
1561.pronunciation-list[data-count='0'] .pronunciation,
1562.pronunciation-list[data-count='1'] .pronunciation {
1563 display: inline;
1564}
1565.pronunciation-group-tag-list {
1566 margin-right: 0.375em;
1567}
1568.pronunciation-disambiguation-list {
1569 color: var(--text-color-light3);
1570 padding-right: var(--disambiguation-space);
1571}
1572.pronunciation-disambiguation+.pronunciation-disambiguation::before {
1573 content: var(--disambiguation-separator);
1574}
1575.pronunciation-disambiguation-list[data-count='0'] {
1576 display: none;
1577}
1578.pronunciation-tag-list:not([data-count='0']) {
1579 margin-right: 0.375em;
1580}
1581.pronunciation-downstep-notation-container {
1582 margin-left: 0.25em;
1583}
1584.pronunciation-graph-container {
1585 margin-left: 0.25em;
1586}
1587
1588
1589/* Kanji */
1590.kanji-glyph-container {
1591 display: block;
1592 position: relative;
1593}
1594.kanji-glyph {
1595 font-family: sans-serif;
1596 font-size: 8.5em;
1597 line-height: 1;
1598 padding: 0.01em;
1599 vertical-align: top;
1600}
1601.kanji-glyph-data {
1602 margin-top: 0.75em;
1603 display: flex;
1604 flex-flow: row nowrap;
1605}
1606.kanji-glyph-table {
1607 border-spacing: 0;
1608 border-collapse: collapse;
1609}
1610.kanji-glyph-table>tbody>tr>* {
1611 border-top: var(--thin-border-size) solid var(--medium-border-color);
1612 text-align: left;
1613 vertical-align: top;
1614 padding: var(--kanji-glyph-table-cell-padding);
1615 margin: 0;
1616}
1617.kanji-info-table {
1618 width: 100%;
1619}
1620.kanji-info-table>tbody>tr>th,
1621.kanji-info-table>tbody>tr>td {
1622 text-align: left;
1623 vertical-align: top;
1624 padding: 0;
1625 margin: 0;
1626}
1627.kanji-info-table>tbody>tr>td {
1628 text-align: right;
1629}
1630.kanji-glyph-table dl {
1631 margin-top: 0;
1632 margin-bottom: 1.4em;
1633}
1634.kanji-glyph-table dd {
1635 margin-left: 0;
1636}
1637.kanji-gloss-list {
1638 margin: 0;
1639 padding: 0 0 0 var(--list-padding1);
1640 list-style-type: decimal;
1641}
1642.kanji-gloss-list[data-count='0'],
1643.kanji-gloss-list[data-count='1'] {
1644 padding-left: 0;
1645 list-style-type: none;
1646}
1647.kanji-gloss-item::marker {
1648 color: var(--text-color-light3);
1649}
1650.kanji-gloss-content {
1651 white-space: pre-line;
1652}
1653.kanji-tag-list {
1654 position: relative;
1655}
1656.entry[data-type=kanji] .entry-body-section[data-section-type=frequencies] {
1657 position: relative;
1658}
1659
1660
1661/* Progress bar */
1662@keyframes progress-bar-indeterminant1a {
1663 0% { left: 0; }
1664 25% { left: 0; }
1665 75% { left: 100%; }
1666 100% { left: 100%; }
1667}
1668@keyframes progress-bar-indeterminant1b {
1669 0% { right: 100%; }
1670 50% { right: 0; }
1671 100% { right: 0; }
1672}
1673@keyframes progress-bar-indeterminant2a {
1674 0% { left: 0; }
1675 25% { left: 0; }
1676 100% { left: 100%; }
1677}
1678@keyframes progress-bar-indeterminant2b {
1679 0% { right: 100%; }
1680 75% { right: 0; }
1681 100% { right: 0; }
1682}
1683.progress-bar-indeterminant {
1684 display: block;
1685 width: 100%;
1686 height: 0;
1687 background-color: var(--progress-bar-indicator-color);
1688 position: relative;
1689 transition:
1690 height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-duration),
1691 background-color var(--progress-bar-active-transition-duration) linear;
1692}
1693.progress-bar-indeterminant[data-active=true] {
1694 height: var(--progress-bar-height);
1695 background-color: var(--progress-bar-track-color);
1696 transition:
1697 height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-start-delay),
1698 background-color 0s linear;
1699}
1700.progress-bar-indeterminant[hidden]:not([data-active=true]) {
1701 display: none;
1702}
1703.progress-bar-indeterminant::before,
1704.progress-bar-indeterminant::after {
1705 content: '';
1706 display: block;
1707 position: absolute;
1708 left: 0;
1709 top: 0;
1710 bottom: 0;
1711 right: 100%;
1712 background-color: var(--progress-bar-indicator-color);
1713 animation: none;
1714}
1715.progress-bar-indeterminant:not([hidden])::before {
1716 animation:
1717 progress-bar-indeterminant1a var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay),
1718 progress-bar-indeterminant1b var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay);
1719}
1720.progress-bar-indeterminant:not([hidden])::after {
1721 animation:
1722 progress-bar-indeterminant2a var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration)),
1723 progress-bar-indeterminant2b var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration));
1724}
1725.top-progress-bar-container {
1726 position: sticky;
1727 top: 0;
1728 height: 0;
1729 pointer-events: none;
1730 z-index: 10;
1731}
1732
1733
1734/* Frame resizer */
1735.frame-resizer-container {
1736 position: fixed;
1737 bottom: 0;
1738 right: 0;
1739 z-index: 100;
1740 background: transparent;
1741 pointer-events: none;
1742 user-select: none;
1743}
1744.frame-resizer-sizer1 {
1745 padding-top: 100%;
1746 line-height: 0;
1747}
1748.frame-resizer-sizer2 {
1749 display: inline-block;
1750 overflow-x: hidden;
1751 overflow-y: scroll;
1752 vertical-align: bottom;
1753}
1754.frame-resizer-sizer2.frame-resizer-sizer2-with-min-size {
1755 min-width: 1em;
1756}
1757.frame-resizer-svg {
1758 display: block;
1759 position: absolute;
1760 bottom: 0;
1761 right: 0;
1762 width: 75%;
1763 height: 75%;
1764}
1765.frame-resizer-handle {
1766 fill: var(--text-color);
1767 opacity: 0.125;
1768 cursor: se-resize;
1769 pointer-events: auto;
1770 transition:
1771 fill var(--animation-duration) linear,
1772 opacity var(--animation-duration) linear;
1773}
1774.frame-resizer-handle:hover,
1775:root[data-is-resizing=true] .frame-resizer-handle {
1776 fill: var(--accent-color);
1777 opacity: 1;
1778}
1779
1780
1781/* Footer notifications */
1782.footer-notification {
1783 display: flex;
1784 flex-flow: row nowrap;
1785 align-items: flex-start;
1786 pointer-events: auto;
1787 border-radius: 0.25em;
1788 background-color: var(--notification-background-color);
1789 box-shadow: 0 0.125em 0.25em 0 var(--notification-shadow-color);
1790 color: var(--notification-text-color);
1791 margin: 0.5em;
1792 padding: 0;
1793 transition: opacity var(--animation-duration) ease-out;
1794 position: relative;
1795 overflow: auto;
1796 max-height: calc(0.5em * 2 + var(--line-height) * 4 * 1em);
1797}
1798.footer-notification[hidden] {
1799 display: flex;
1800 opacity: 0;
1801 transition: opacity var(--animation-duration) ease-in;
1802}
1803.footer-notification-body {
1804 flex: 1 1 auto;
1805 padding: 0.5em 0.75em;
1806 white-space: pre-line;
1807}
1808.footer-notification-close-button-container {
1809 align-self: stretch;
1810 display: flex;
1811 flex-flow: column nowrap;
1812 align-items: center;
1813 justify-content: center;
1814 padding: 0.25em 0.75em 0.25em 0;
1815 position: sticky;
1816 top: 0;
1817 right: 0;
1818}
1819button.footer-notification-close-button {
1820 --button-content-color: var(--notification-text-color);
1821 --button-border-color: transparent;
1822 --button-background-color: transparent;
1823 --button-shadow: none;
1824
1825 --button-hover-border-color: transparent;
1826 --button-hover-background-color: transparent;
1827 --button-hover-shadow: none;
1828
1829 --button-active-border-color: transparent;
1830 --button-active-background-color: transparent;
1831 --button-active-shadow: none;
1832
1833 --button-focus-visible-border-color: transparent;
1834 --button-focus-visible-background-color: var(--notification-background-color-light);
1835 --button-focus-visible-shadow: none;
1836
1837 flex: 0 0 auto;
1838 margin: -0.25em;
1839 padding: 0.5em;
1840 border-style: none;
1841 border-width: 0;
1842 cursor: pointer;
1843 font-size: inherit;
1844}
1845.footer-notification-close-button-icon {
1846 display: block;
1847 width: calc(16em / var(--font-size-no-units));
1848 height: calc(16em / var(--font-size-no-units));
1849 background-color: var(--button-content-color);
1850}
1851.tag-details-disambiguation-list>.tag-details-disambiguation:not(:last-child)::after {
1852 content: var(--disambiguation-separator);
1853}
1854.footer-notification a {
1855 color: var(--notification-text-color);
1856}
1857
1858
1859/* Overlays */
1860.overlay-panel-container {
1861 pointer-events: none;
1862 position: absolute;
1863 left: 0;
1864 top: 0;
1865 bottom: 0;
1866 right: 0;
1867 z-index: 6;
1868}
1869.overlay-panel {
1870 pointer-events: auto;
1871 background-color: var(--background-color);
1872 display: block;
1873 position: absolute;
1874 left: 0;
1875 top: 0;
1876 bottom: 0;
1877 width: var(--content-width);
1878 max-width: 100%;
1879 box-sizing: border-box;
1880 margin: 0 auto;
1881 padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
1882 overflow-y: scroll;
1883 transform: none;
1884 opacity: 1;
1885 visibility: visible;
1886 transition:
1887 opacity var(--animation-duration2) ease-out,
1888 visibility 0s linear,
1889 transform var(--animation-duration2) ease-out;
1890}
1891.overlay-panel[hidden] {
1892 transform: translate(var(--overlay-panel-translate-distance), 0);
1893 opacity: 0;
1894 visibility: hidden;
1895 transition:
1896 opacity var(--animation-duration2) ease-in,
1897 visibility 0s linear var(--animation-duration2),
1898 transform var(--animation-duration2) ease-in;
1899}
1900.overlay-panel[hidden]:not(.hidden-animating) {
1901 display: none;
1902}
1903:root[data-popup-action-bar-location=left] .overlay-panel[hidden] {
1904 transform: translate(calc(-1 * var(--overlay-panel-translate-distance)), 0);
1905}
1906:root[data-popup-action-bar-location=top] .overlay-panel[hidden] {
1907 transform: translate(0, calc(-1 * var(--overlay-panel-translate-distance)));
1908}
1909:root[data-popup-action-bar-location=bottom] .overlay-panel[hidden] {
1910 transform: translate(0, var(--overlay-panel-translate-distance));
1911}
1912.overlay-panel-inner {
1913 padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
1914}
1915
1916
1917/* Profile panel */
1918.profile-list {
1919 display: flex;
1920 flex-flow: column nowrap;
1921 align-items: stretch;
1922}
1923.profile-list-item {
1924 display: flex;
1925 flex-flow: row nowrap;
1926 align-items: center;
1927 cursor: pointer;
1928}
1929.profile-list-item-selection {
1930 flex: 0 0 auto;
1931 text-align: center;
1932 padding: 0.25em 0.5em 0.25em 0;
1933}
1934.profile-list-item-name {
1935 flex: 1 1 auto;
1936 padding: 0.25em 0;
1937}
1938
1939
1940/* Audio menu */
1941.audio-button-popup-menu[data-show-icons=false] .popup-menu-item-audio-button .popup-menu-item-icon {
1942 display: none;
1943}
1944.audio-button-popup-menu .popup-menu-item-icon[data-icon=checkmark] {
1945 background-color: var(--success-color);
1946}
1947.audio-button-popup-menu .popup-menu-item-icon[data-icon=cross] {
1948 background-color: var(--danger-color);
1949}
1950.audio-button-popup-menu .popup-menu-item-group[data-source-in-options=false][data-valid=null] .popup-menu-item {
1951 color: var(--text-color-light1);
1952}
1953.popup-menu-item-audio-button .popup-menu-item-label {
1954 padding-right: 2.5em;
1955}
1956.popup-menu-item-set-primary-audio-button {
1957 flex-flow: row nowrap;
1958 align-items: center;
1959 justify-content: center;
1960 position: absolute;
1961 right: 0;
1962 top: 0;
1963 bottom: 0;
1964 width: 2.5em;
1965}
1966.popup-menu-item-set-primary-audio-button:not([hidden]) {
1967 display: flex;
1968}
1969.popup-menu-item-set-primary-audio-button .popup-menu-item-icon {
1970 opacity: 0;
1971 transition: opacity var(--animation-duration) linear;
1972}
1973.popup-menu-item-audio-button:hover~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon,
1974.popup-menu-item-audio-button:active~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon,
1975.popup-menu-item-audio-button:focus~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon {
1976 opacity: 0.25;
1977}
1978.popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,
1979.popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,
1980.popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
1981 opacity: 0.375;
1982}
1983.popup-menu-item-set-primary-audio-button:focus:not(:focus-visible) .popup-menu-item-icon {
1984 opacity: 0;
1985}
1986.popup-menu-item-audio-button:hover~.popup-menu-item-set-primary-audio-button:not(:focus-visible) .popup-menu-item-icon,
1987.popup-menu-item-audio-button:active~.popup-menu-item-set-primary-audio-button:not(:focus-visible) .popup-menu-item-icon,
1988.popup-menu-item-audio-button:focus~.popup-menu-item-set-primary-audio-button:not(:focus-visible) .popup-menu-item-icon {
1989 opacity: 0.25;
1990}
1991.popup-menu-item-set-primary-audio-button:hover:not(:focus-visible) .popup-menu-item-icon,
1992.popup-menu-item-set-primary-audio-button:active:not(:focus-visible) .popup-menu-item-icon {
1993 opacity: 0.375;
1994}
1995.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon,
1996.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,
1997.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,
1998.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
1999 opacity: 1;
2000}
2001
2002
2003/* Anki errors */
2004.anki-note-error-list {
2005 margin: 0;
2006 padding-left: 1.5em;
2007 list-style: disc;
2008}
2009.anki-note-error-info {
2010 color: var(--danger-color);
2011}
2012.anki-note-error-header {
2013 font-weight: bold;
2014}
2015
2016
2017/* Conditional styles */
2018:root:not([data-enable-search-tags=true]) .tag[data-category=search] {
2019 display: none;
2020}
2021:root[data-compact-tags=true] .tag[data-redundant=true] {
2022 display: none;
2023}
2024
2025:root:not([data-debug=true]) .action-button[data-action=menu] {
2026 display: none;
2027}
2028:root[data-anki-enabled=false] .action-button[data-action=view-note],
2029:root[data-anki-enabled=false] .action-button[data-action=save-note] {
2030 display: none;
2031}
2032
2033:root[data-average-frequency=true] .frequency-group-item:not([data-details='Average']) {
2034 display: none;
2035}
2036
2037:root[data-average-frequency=false] .frequency-group-item[data-details='Average'] {
2038 display: none;
2039}
2040
2041:root[data-audio-enabled=false] .action-button[data-action=play-audio] {
2042 display: none;
2043}
2044:root[data-glossary-layout-mode^=compact] .definition-tag-list,
2045:root[data-glossary-layout-mode^=compact] .definition-disambiguation-list:not([data-count='0']) {
2046 display: inline;
2047}
2048:root[data-glossary-layout-mode^=compact] .gloss-list {
2049 display: inline;
2050 list-style: none;
2051 padding-left: 0;
2052}
2053:root[data-glossary-layout-mode^=compact] .gloss-item {
2054 display: inline;
2055}
2056:root[data-glossary-layout-mode^=compact] .gloss-item:not(:first-child)::before {
2057 white-space: pre-wrap;
2058 content: var(--compact-list-separator);
2059 display: inline;
2060 color: var(--text-color-light3);
2061}
2062:root[data-glossary-layout-mode^=compact] .gloss-content {
2063 display: inline;
2064}
2065:root[data-glossary-layout-mode^=compact] .gloss-separator {
2066 display: inline;
2067}
2068
2069:root[data-show-pronunciation-text=true] .pronunciation-disambiguation-list[data-term-count='0'],
2070:root[data-show-pronunciation-text=true] .pronunciation-disambiguation[data-type=reading] {
2071 display: none;
2072}
2073:root[data-show-pronunciation-text=false] .pronunciation[data-pronunciation-type=pitch-accent]>.pronunciation-representation-list>.pronunciation-text-container {
2074 display: none;
2075}
2076:root[data-show-pronunciation-downstep-position=false] .pronunciation-downstep-notation-container {
2077 display: none;
2078}
2079:root[data-show-pronunciation-graph=false] .pronunciation-graph-container {
2080 display: none;
2081}
2082
2083:root[data-glossary-layout-mode^=compact][data-show-pronunciation-graph=false] .pronunciation-list:not([data-has-tags=true]) {
2084 display: inline;
2085 list-style: none;
2086 padding-left: 0;
2087}
2088:root[data-glossary-layout-mode^=compact][data-show-pronunciation-graph=false] .pronunciation-list:not([data-has-tags=true]) .pronunciation {
2089 display: inline;
2090}
2091:root[data-glossary-layout-mode^=compact][data-show-pronunciation-graph=false] .pronunciation-list:not([data-has-tags=true]) .pronunciation:not(:first-child)::before {
2092 white-space: pre-wrap;
2093 content: var(--compact-list-separator);
2094 display: inline;
2095 color: var(--text-color-light3);
2096}
2097
2098:root[data-popup-display-mode=full-width] .frame-resizer-container {
2099 display: none;
2100}