yomitan-core 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (207) hide show
  1. package/README.md +485 -0
  2. package/dist/anki-connect-BQyCGW3O.cjs +513 -0
  3. package/dist/anki-connect-BQyCGW3O.cjs.map +1 -0
  4. package/dist/anki-connect-CPPuhyiQ.js +6 -0
  5. package/dist/anki-connect-DbrQHphS.js +495 -0
  6. package/dist/anki-connect-DbrQHphS.js.map +1 -0
  7. package/dist/anki-connect-DcheJrp-.cjs +6 -0
  8. package/dist/anki.cjs +1758 -0
  9. package/dist/anki.cjs.map +1 -0
  10. package/dist/anki.d.cts +751 -0
  11. package/dist/anki.d.cts.map +1 -0
  12. package/dist/anki.d.ts +751 -0
  13. package/dist/anki.d.ts.map +1 -0
  14. package/dist/anki.js +1751 -0
  15. package/dist/anki.js.map +1 -0
  16. package/dist/audio-D9DvYyB7.d.cts +48 -0
  17. package/dist/audio-D9DvYyB7.d.cts.map +1 -0
  18. package/dist/audio-DQulUkDM.d.ts +48 -0
  19. package/dist/audio-DQulUkDM.d.ts.map +1 -0
  20. package/dist/audio-url-generator-BXvQaqUi.cjs +4 -0
  21. package/dist/audio-url-generator-Dy2hb2Mm.cjs +414 -0
  22. package/dist/audio-url-generator-Dy2hb2Mm.cjs.map +1 -0
  23. package/dist/audio-url-generator-Qi0rfzHz.js +4 -0
  24. package/dist/audio-url-generator-pFQAB5Nb.js +390 -0
  25. package/dist/audio-url-generator-pFQAB5Nb.js.map +1 -0
  26. package/dist/audio.cjs +7 -0
  27. package/dist/audio.d.cts +86 -0
  28. package/dist/audio.d.cts.map +1 -0
  29. package/dist/audio.d.ts +86 -0
  30. package/dist/audio.d.ts.map +1 -0
  31. package/dist/audio.js +4 -0
  32. package/dist/batch-processor-BR-gB3H3.js +84 -0
  33. package/dist/batch-processor-BR-gB3H3.js.map +1 -0
  34. package/dist/batch-processor-CSF1acTw.cjs +3 -0
  35. package/dist/batch-processor-DFqM_L-_.cjs +91 -0
  36. package/dist/batch-processor-DFqM_L-_.cjs.map +1 -0
  37. package/dist/batch-processor-Quo9jUyf.js +3 -0
  38. package/dist/chunk-BCwAaXi7.cjs +31 -0
  39. package/dist/cjk-util-Dp0ZU0sh.cjs +167 -0
  40. package/dist/cjk-util-Dp0ZU0sh.cjs.map +1 -0
  41. package/dist/cjk-util-DubXBGDG.js +94 -0
  42. package/dist/cjk-util-DubXBGDG.js.map +1 -0
  43. package/dist/core-BUpclilG.d.cts +102 -0
  44. package/dist/core-BUpclilG.d.cts.map +1 -0
  45. package/dist/core-DFUj5GtA.d.ts +102 -0
  46. package/dist/core-DFUj5GtA.d.ts.map +1 -0
  47. package/dist/database.cjs +7 -0
  48. package/dist/database.d.cts +4 -0
  49. package/dist/database.d.ts +4 -0
  50. package/dist/database.js +5 -0
  51. package/dist/dictionary-D7l-qFt1.d.cts +316 -0
  52. package/dist/dictionary-D7l-qFt1.d.cts.map +1 -0
  53. package/dist/dictionary-_vzfBLWi.d.ts +316 -0
  54. package/dist/dictionary-_vzfBLWi.d.ts.map +1 -0
  55. package/dist/dictionary-data-util-CHnRdYZ9.cjs +378 -0
  56. package/dist/dictionary-data-util-CHnRdYZ9.cjs.map +1 -0
  57. package/dist/dictionary-data-util-CfOLfEDE.js +323 -0
  58. package/dist/dictionary-data-util-CfOLfEDE.js.map +1 -0
  59. package/dist/dictionary-database-BDC2f9zc.d.ts +58 -0
  60. package/dist/dictionary-database-BDC2f9zc.d.ts.map +1 -0
  61. package/dist/dictionary-database-CU4TsvCC.js +393 -0
  62. package/dist/dictionary-database-CU4TsvCC.js.map +1 -0
  63. package/dist/dictionary-database-DsOi04Sg.d.cts +58 -0
  64. package/dist/dictionary-database-DsOi04Sg.d.cts.map +1 -0
  65. package/dist/dictionary-database-lvFvftnO.cjs +412 -0
  66. package/dist/dictionary-database-lvFvftnO.cjs.map +1 -0
  67. package/dist/dictionary-importer-BkQQSBhm.d.ts +237 -0
  68. package/dist/dictionary-importer-BkQQSBhm.d.ts.map +1 -0
  69. package/dist/dictionary-importer-Cen1z6co.js +1821 -0
  70. package/dist/dictionary-importer-Cen1z6co.js.map +1 -0
  71. package/dist/dictionary-importer-DYmmWmcX.cjs +8 -0
  72. package/dist/dictionary-importer-Da3AuTZw.d.cts +237 -0
  73. package/dist/dictionary-importer-Da3AuTZw.d.cts.map +1 -0
  74. package/dist/dictionary-importer-Dhn75iZ4.cjs +1834 -0
  75. package/dist/dictionary-importer-Dhn75iZ4.cjs.map +1 -0
  76. package/dist/dictionary-importer-xWkel0h-.js +8 -0
  77. package/dist/dictionary-update-checker-BNE4pGTx.js +4 -0
  78. package/dist/dictionary-update-checker-Byjvifd2.cjs +75 -0
  79. package/dist/dictionary-update-checker-Byjvifd2.cjs.map +1 -0
  80. package/dist/dictionary-update-checker-YdpalZ41.cjs +4 -0
  81. package/dist/dictionary-update-checker-kKukiovj.js +69 -0
  82. package/dist/dictionary-update-checker-kKukiovj.js.map +1 -0
  83. package/dist/display-generator-BGVWiI0t.js +746 -0
  84. package/dist/display-generator-BGVWiI0t.js.map +1 -0
  85. package/dist/display-generator-BMQmG5Ov.cjs +9 -0
  86. package/dist/display-generator-BxZ7mBjP.js +9 -0
  87. package/dist/display-generator-DyP-HNzP.cjs +758 -0
  88. package/dist/display-generator-DyP-HNzP.cjs.map +1 -0
  89. package/dist/errors-BSezaJwm.cjs +35 -0
  90. package/dist/errors-BSezaJwm.cjs.map +1 -0
  91. package/dist/errors-DuuDSO5N.js +22 -0
  92. package/dist/errors-DuuDSO5N.js.map +1 -0
  93. package/dist/frequency-ranking-BXjfhhUQ.js +3 -0
  94. package/dist/frequency-ranking-Cx1kkIrw.cjs +3 -0
  95. package/dist/frequency-ranking-DEJMTMdg.js +159 -0
  96. package/dist/frequency-ranking-DEJMTMdg.js.map +1 -0
  97. package/dist/frequency-ranking-DVYxTXN-.cjs +166 -0
  98. package/dist/frequency-ranking-DVYxTXN-.cjs.map +1 -0
  99. package/dist/furigana-5HK97CY8.js +4 -0
  100. package/dist/furigana-9bBI9-qe.d.ts +47 -0
  101. package/dist/furigana-9bBI9-qe.d.ts.map +1 -0
  102. package/dist/furigana-B3-0y231.js +471 -0
  103. package/dist/furigana-B3-0y231.js.map +1 -0
  104. package/dist/furigana-CjOhzvZt.d.cts +47 -0
  105. package/dist/furigana-CjOhzvZt.d.cts.map +1 -0
  106. package/dist/furigana-DpZLcues.cjs +609 -0
  107. package/dist/furigana-DpZLcues.cjs.map +1 -0
  108. package/dist/furigana-h3v2ub4-.cjs +4 -0
  109. package/dist/import.cjs +12 -0
  110. package/dist/import.d.cts +107 -0
  111. package/dist/import.d.cts.map +1 -0
  112. package/dist/import.d.ts +107 -0
  113. package/dist/import.d.ts.map +1 -0
  114. package/dist/import.js +9 -0
  115. package/dist/index.cjs +275 -0
  116. package/dist/index.cjs.map +1 -0
  117. package/dist/index.d.cts +211 -0
  118. package/dist/index.d.cts.map +1 -0
  119. package/dist/index.d.ts +211 -0
  120. package/dist/index.d.ts.map +1 -0
  121. package/dist/index.js +238 -0
  122. package/dist/index.js.map +1 -0
  123. package/dist/json-DGd-cunA.js +17 -0
  124. package/dist/json-DGd-cunA.js.map +1 -0
  125. package/dist/json-DKWp-B7Y.cjs +30 -0
  126. package/dist/json-DKWp-B7Y.cjs.map +1 -0
  127. package/dist/language-KN_u-nTR.d.ts +104 -0
  128. package/dist/language-KN_u-nTR.d.ts.map +1 -0
  129. package/dist/language-xAbQxgXc.d.cts +104 -0
  130. package/dist/language-xAbQxgXc.d.cts.map +1 -0
  131. package/dist/language.cjs +15626 -0
  132. package/dist/language.cjs.map +1 -0
  133. package/dist/language.d.cts +959 -0
  134. package/dist/language.d.cts.map +1 -0
  135. package/dist/language.d.ts +959 -0
  136. package/dist/language.d.ts.map +1 -0
  137. package/dist/language.js +15522 -0
  138. package/dist/language.js.map +1 -0
  139. package/dist/log-D8KtR3aP.cjs +67 -0
  140. package/dist/log-D8KtR3aP.cjs.map +1 -0
  141. package/dist/log-hgSll-dS.js +60 -0
  142. package/dist/log-hgSll-dS.js.map +1 -0
  143. package/dist/lookup.cjs +13 -0
  144. package/dist/lookup.d.cts +161 -0
  145. package/dist/lookup.d.cts.map +1 -0
  146. package/dist/lookup.d.ts +161 -0
  147. package/dist/lookup.d.ts.map +1 -0
  148. package/dist/lookup.js +10 -0
  149. package/dist/media-loader-BABA_E4W.js +3 -0
  150. package/dist/media-loader-Ce9cuANS.cjs +21 -0
  151. package/dist/media-loader-Ce9cuANS.cjs.map +1 -0
  152. package/dist/media-loader-qRti-Q6h.js +14 -0
  153. package/dist/media-loader-qRti-Q6h.js.map +1 -0
  154. package/dist/media-loader-xlUGaJrx.cjs +3 -0
  155. package/dist/multi-language-transformer-AlxOM6b3.js +637 -0
  156. package/dist/multi-language-transformer-AlxOM6b3.js.map +1 -0
  157. package/dist/multi-language-transformer-MdbQBBOt.cjs +685 -0
  158. package/dist/multi-language-transformer-MdbQBBOt.cjs.map +1 -0
  159. package/dist/multi-language-transformer-SEhcJXEB.d.ts +63 -0
  160. package/dist/multi-language-transformer-SEhcJXEB.d.ts.map +1 -0
  161. package/dist/multi-language-transformer-Ul9mbRce.d.cts +63 -0
  162. package/dist/multi-language-transformer-Ul9mbRce.d.cts.map +1 -0
  163. package/dist/pronunciation-generator-BtBc4q_V.js +397 -0
  164. package/dist/pronunciation-generator-BtBc4q_V.js.map +1 -0
  165. package/dist/pronunciation-generator-CBYdXYou.js +4 -0
  166. package/dist/pronunciation-generator-CFbZlf5J.cjs +445 -0
  167. package/dist/pronunciation-generator-CFbZlf5J.cjs.map +1 -0
  168. package/dist/pronunciation-generator-DOz9hEuk.cjs +4 -0
  169. package/dist/render.cjs +2796 -0
  170. package/dist/render.cjs.map +1 -0
  171. package/dist/render.d.cts +424 -0
  172. package/dist/render.d.cts.map +1 -0
  173. package/dist/render.d.ts +424 -0
  174. package/dist/render.d.ts.map +1 -0
  175. package/dist/render.js +2777 -0
  176. package/dist/render.js.map +1 -0
  177. package/dist/sentence-parser-BPAJNzqW.js +126 -0
  178. package/dist/sentence-parser-BPAJNzqW.js.map +1 -0
  179. package/dist/sentence-parser-BVIOI64h.cjs +132 -0
  180. package/dist/sentence-parser-BVIOI64h.cjs.map +1 -0
  181. package/dist/sentence-parser-BoHO3cHn.js +5 -0
  182. package/dist/sentence-parser-DQVLSW0z.cjs +5 -0
  183. package/dist/structured-content-generator-BtOApkTW.cjs +4 -0
  184. package/dist/structured-content-generator-Bx62RYa8.js +4 -0
  185. package/dist/structured-content-generator-CLnybumI.js +276 -0
  186. package/dist/structured-content-generator-CLnybumI.js.map +1 -0
  187. package/dist/structured-content-generator-DrwkB0-k.cjs +282 -0
  188. package/dist/structured-content-generator-DrwkB0-k.cjs.map +1 -0
  189. package/dist/text-utilities-B7PIythe.js +8 -0
  190. package/dist/text-utilities-B7PIythe.js.map +1 -0
  191. package/dist/text-utilities-Del2Ivkg.cjs +15 -0
  192. package/dist/text-utilities-Del2Ivkg.cjs.map +1 -0
  193. package/dist/translator-CRPlPzqi.cjs +1545 -0
  194. package/dist/translator-CRPlPzqi.cjs.map +1 -0
  195. package/dist/translator-CWgG5drA.js +1539 -0
  196. package/dist/translator-CWgG5drA.js.map +1 -0
  197. package/dist/translator-CaGtJvnQ.cjs +6 -0
  198. package/dist/translator-Cc6OGxrW.d.ts +180 -0
  199. package/dist/translator-Cc6OGxrW.d.ts.map +1 -0
  200. package/dist/translator-CcA-s-W4.d.cts +180 -0
  201. package/dist/translator-CcA-s-W4.d.cts.map +1 -0
  202. package/dist/translator-CuJOTK6l.js +6 -0
  203. package/dist/utilities-C-lbZaJE.cjs +52 -0
  204. package/dist/utilities-C-lbZaJE.cjs.map +1 -0
  205. package/dist/utilities-bi3EF-q5.js +33 -0
  206. package/dist/utilities-bi3EF-q5.js.map +1 -0
  207. package/package.json +102 -0
package/dist/render.js ADDED
@@ -0,0 +1,2777 @@
1
+ import "./cjk-util-DubXBGDG.js";
2
+ import "./dictionary-data-util-CfOLfEDE.js";
3
+ import "./furigana-B3-0y231.js";
4
+ import "./text-utilities-B7PIythe.js";
5
+ import { DisplayGenerator, HtmlTemplateCollection } from "./display-generator-BGVWiI0t.js";
6
+ import { PronunciationGenerator, getDownstepPositions, getKanaDiacriticInfo, getKanaMoraCount, getKanaMorae, getPitchCategory, isCodePointKanji, isMoraPitchHigh } from "./pronunciation-generator-BtBc4q_V.js";
7
+ import { StructuredContentGenerator } from "./structured-content-generator-CLnybumI.js";
8
+
9
+ //#region src/render/content-manager.ts
10
+ /**
11
+ * A no-op implementation of ContentManager that returns empty values.
12
+ * Useful for rendering dictionary entries without media support.
13
+ */
14
+ var NoOpContentManager = class {
15
+ loadMedia(_path, _dictionary, _mediaType) {
16
+ return "";
17
+ }
18
+ prepareLink(element, href, _internal) {
19
+ element.href = href;
20
+ }
21
+ unloadAll() {}
22
+ };
23
+
24
+ //#endregion
25
+ //#region src/render/css-util.ts
26
+ /**
27
+ * DOM-dependent CSS utility functions for sanitizing and scoping CSS.
28
+ * These require a DOM environment (browser or JSDOM/linkedom).
29
+ */
30
+ /**
31
+ * Sanitizes a CSS string by parsing it through a CSSStyleSheet and
32
+ * re-serializing it. This removes any invalid or potentially dangerous rules.
33
+ * @param css - The raw CSS string to sanitize.
34
+ * @returns The sanitized CSS string.
35
+ */
36
+ function sanitizeCSS(css) {
37
+ const sanitizer = new CSSStyleSheet();
38
+ sanitizer.replaceSync(css);
39
+ return Array.from(sanitizer.cssRules).map((rule) => rule.cssText || "").join("\n");
40
+ }
41
+ /**
42
+ * Wraps a CSS string inside a scope selector using CSS nesting.
43
+ * The resulting CSS will only apply within the scope of the given selector.
44
+ * @param css - The CSS string to scope.
45
+ * @param scopeSelector - The CSS selector to use as the scope.
46
+ * @returns The scoped CSS string.
47
+ */
48
+ function addScopeToCss(css, scopeSelector) {
49
+ return `${scopeSelector} {${css}\n}`;
50
+ }
51
+ /**
52
+ * Wraps a CSS string inside a scope selector using legacy (non-nesting) approach.
53
+ * Each CSS rule's selector is prefixed with the scope selector.
54
+ * This is compatible with older browsers that do not support CSS nesting.
55
+ * @param css - The CSS string to scope.
56
+ * @param scopeSelector - The CSS selector to use as the scope prefix.
57
+ * @returns The scoped CSS string.
58
+ */
59
+ function addScopeToCssLegacy(css, scopeSelector) {
60
+ try {
61
+ const stylesheet = new CSSStyleSheet();
62
+ stylesheet.replaceSync(css);
63
+ const newCSSRules = [];
64
+ for (const cssRule of Array.from(stylesheet.cssRules)) {
65
+ if (!("selectorText" in cssRule)) continue;
66
+ const styleRule = cssRule;
67
+ const newSelectors = [];
68
+ for (const selector of styleRule.selectorText.split(",")) newSelectors.push(`${scopeSelector} ${selector}`);
69
+ const newRule = styleRule.cssText.replace(styleRule.selectorText, newSelectors.join(", "));
70
+ newCSSRules.push(newRule);
71
+ }
72
+ stylesheet.replaceSync(newCSSRules.join("\n"));
73
+ return Array.from(stylesheet.cssRules).map((rule) => rule.cssText || "").join("\n");
74
+ } catch (_e) {
75
+ return addScopeToCss(css, scopeSelector);
76
+ }
77
+ }
78
+
79
+ //#endregion
80
+ //#region src/render/templates/display-templates.ts
81
+ /**
82
+ * The full HTML template string for display rendering.
83
+ * Contains all template elements used by DisplayGenerator and HtmlTemplateCollection.
84
+ * Sourced from Yomitan's templates-display.html.
85
+ */
86
+ const DISPLAY_TEMPLATES = `<!DOCTYPE html><html><head><title>Templates</title></head><body>
87
+
88
+ <!-- Term entry -->
89
+ <template id="term-entry-template" data-remove-whitespace-text="true"><div class="entry" data-type="term">
90
+ <div class="entry-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div>
91
+ <div class="entry-header">
92
+ <div class="actions">
93
+ <div class="note-actions-container"></div>
94
+ <div class="action-button-container">
95
+ <button type="button" class="action-button" data-action="play-audio" title="Play audio" data-title-default="Play audio" data-menu-position="left below h-cover v-cover">
96
+ <span class="action-icon icon color-icon" data-icon="play-audio"></span>
97
+ <span class="action-button-badge icon" hidden></span>
98
+ </button>
99
+ <button type="button" class="action-button action-button-collapsible" data-action="menu" data-menu-position="left below h-cover v-cover">
100
+ <span class="action-icon icon" data-icon="kebab-menu"></span>
101
+ </button>
102
+ </div>
103
+ <span class="entry-current-indicator-icon" title="Current entry">
104
+ <span class="icon color-icon" data-icon="entry-current"></span>
105
+ </span>
106
+ </div>
107
+ <div class="headword-list"></div>
108
+ <div class="headword-list-details">
109
+ <div class="headword-list-tag-list tag-list"></div>
110
+ <ul class="inflection-rule-chains"></ul>
111
+ </div>
112
+ </div>
113
+ <div class="entry-body">
114
+ <div class="entry-body-section" data-section-type="frequencies">
115
+ <div class="entry-body-section-content frequency-group-list"></div>
116
+ </div>
117
+ <div class="entry-body-section" data-section-type="pronunciations">
118
+ <ol class="entry-body-section-content pronunciation-group-list"></ol>
119
+ </div>
120
+ <div class="entry-body-section" data-section-type="definitions">
121
+ <ol class="entry-body-section-content definition-list"></ol>
122
+ </div>
123
+ </div>
124
+ </div></template>
125
+ <template id="headword-template" data-remove-whitespace-text="true"><div class="headword">
126
+ <div class="headword-text-container">
127
+ <span class="headword-term-outer source-text">
128
+ <span class="headword-current-indicator"></span>
129
+ <span class="headword-term"></span>
130
+ </span>
131
+ <span class="headword-reading-outer">
132
+ <span class="headword-reading"></span>
133
+ </span>
134
+ </div>
135
+ <div class="headword-details">
136
+ <button type="button" class="action-button" data-action="play-audio" title="Play audio" data-title-default="Play audio" data-menu-position="right below h-cover v-cover">
137
+ <span class="action-icon icon color-icon" data-icon="play-audio"></span>
138
+ <span class="action-button-badge icon" hidden></span>
139
+ </button>
140
+ </div>
141
+ </div></template>
142
+ <template id="definition-item-template" data-remove-whitespace-text="true"><li class="definition-item">
143
+ <div class="definition-item-inner">
144
+ <button type="button" class="expansion-button"><div class="expansion-button-icon icon" data-icon="double-down-chevron"></div></button>
145
+ <div class="definition-item-content">
146
+ <div class="definition-tag-list tag-list"></div>
147
+ <div class="definition-disambiguation-list"></div>
148
+ <ul class="gloss-list"></ul>
149
+ </div>
150
+ </div>
151
+ </li></template>
152
+ <template id="definition-disambiguation-template"><span class="definition-disambiguation"></span></template>
153
+ <template id="gloss-item-template"><li class="gloss-item click-scannable"><span class="gloss-separator"> </span><span class="gloss-content"></span></li></template>
154
+ <template id="gloss-item-image-description-template"> <span class="gloss-image-description"></span></template>
155
+ <template id="inflection-rule-chain-template"><li class="inflection-rule-chain"></li></template>
156
+ <template id="inflection-template"><span class="inflection"></span><span class="inflection-separator"> </span></template>
157
+
158
+ <!-- Frequency -->
159
+ <template id="frequency-group-item-template"><span class="frequency-group-item"><span class="tag tag-has-body frequency-group-tag" data-category="frequency"><span class="tag-label"><span class="tag-label-content"></span></span><span class="tag-body"><span class="tag-body-content frequency-list"></span></span></span></span></template>
160
+ <template id="term-frequency-item-template" data-remove-whitespace-text="true"><span class="frequency-item"><span class="tag tag-has-body frequency-tag" data-category="frequency" data-frequency-type="term">
161
+ <span class="tag-label"><span class="tag-label-content"></span></span>
162
+ <span class="tag-body"><span class="tag-body-content frequency-body">
163
+ <span class="frequency-disambiguation"><ruby>
164
+ <span class="frequency-disambiguation-term"></span>
165
+ <span class="frequency-disambiguation-separator"></span>
166
+ <rt class="frequency-disambiguation-reading"></rt>
167
+ </ruby></span>
168
+ <span class="frequency-separator"></span>
169
+ <span class="frequency-value-list"></span>
170
+ </span></span>
171
+ </span></span></template>
172
+ <template id="kanji-frequency-item-template" data-remove-whitespace-text="true"><span class="frequency-item"><span class="tag tag-has-body frequency-tag" data-category="frequency" data-frequency-type="kanji">
173
+ <span class="tag-label"><span class="tag-label-content"></span></span>
174
+ <span class="tag-body"><span class="tag-body-content frequency-body">
175
+ <span class="frequency-value-list"></span>
176
+ </span></span>
177
+ </span></span></template>
178
+
179
+ <!-- Pitch accent -->
180
+ <template id="pronunciation-group-template"><li class="pronunciation-group"><span class="pronunciation-group-tag-list tag-list"></span><ul class="pronunciation-list"></ul></li></template>
181
+ <template id="pronunciation-disambiguation-template"><span class="pronunciation-disambiguation"></span></template>
182
+ <template id="pronunciation-template"><li class="pronunciation"><span class="pronunciation-tag-list tag-list"></span><span class="pronunciation-disambiguation-list"></span><span class="pronunciation-representation-list"><span class="pronunciation-text-container"></span><span class="pronunciation-downstep-notation-container"></span><span class="pronunciation-graph-container"></span></span></li></template>
183
+
184
+ <!-- Kanji entry -->
185
+ <template id="kanji-entry-template" data-remove-whitespace-text="true"><div class="entry kanji-entry" data-type="kanji">
186
+ <div class="entry-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div>
187
+ <div class="entry-header">
188
+ <div class="actions">
189
+ <div class="note-actions-container"></div>
190
+ <span class="entry-current-indicator-icon" title="Current entry">
191
+ <span class="icon color-icon" data-icon="entry-current"></span>
192
+ </span>
193
+ <button type="button" class="action-button action-button-collapsible" data-action="menu" data-menu-position="left below h-cover v-cover">
194
+ <span class="action-icon icon" data-icon="kebab-menu"></span>
195
+ </button>
196
+ </div>
197
+ <div class="kanji-glyph-container">
198
+ <span class="headword-current-indicator"></span>
199
+ <div class="kanji-glyph source-text"></div>
200
+ </div>
201
+ <div class="kanji-tag-list tag-list"></div>
202
+ </div>
203
+ <div class="entry-body">
204
+ <div class="entry-body-section" data-section-type="frequencies">
205
+ <div class="entry-body-section-content frequency-group-list"></div>
206
+ </div>
207
+ </div>
208
+ <div class="kanji-glyph-data">
209
+ <button type="button" class="expansion-button"><div class="expansion-button-icon icon" data-icon="double-down-chevron"></div></button>
210
+ <table class="kanji-glyph-table">
211
+ <tbody>
212
+ <tr>
213
+ <th scope="col">Meaning</th>
214
+ <th scope="col">Readings</th>
215
+ <th scope="col">Statistics</th>
216
+ </tr>
217
+ <tr>
218
+ <td class="kanji-gloss-container"><ol class="kanji-gloss-list"></ol></td>
219
+ <td class="kanji-readings"><dl class="kanji-readings-chinese"></dl><dl class="kanji-readings-japanese"></dl></td>
220
+ <td class="kanji-statistics"></td>
221
+ </tr>
222
+ <tr><th scope="col" colspan="3">Classifications</th></tr>
223
+ <tr><td colspan="3" class="kanji-classifications"></td></tr>
224
+ <tr><th scope="col" colspan="3">Codepoints</th></tr>
225
+ <tr><td colspan="3" class="kanji-codepoints"></td></tr>
226
+ <tr><th scope="col" colspan="3">Dictionary Indices</th></tr>
227
+ <tr><td colspan="3" class="kanji-dictionary-indices"></td></tr>
228
+ </tbody>
229
+ </table>
230
+ </div>
231
+ </div></template>
232
+ <template id="kanji-info-table-template"><table class="kanji-info-table"><tbody class="kanji-info-table-body"></tbody></table></template>
233
+ <template id="kanji-info-table-item-template"><tr class="kanji-info-table-item"><th scope="col" class="kanji-info-table-item-header"></th><td class="kanji-info-table-item-value"></td></tr></template>
234
+ <template id="kanji-info-table-empty-template"><tr class="kanji-info-table-item kanji-info-table-item-empty"><td class="kanji-info-table-item-value-empty">No data found</td></tr></template>
235
+ <template id="kanji-gloss-item-template"><li class="kanji-gloss-item"><span class="kanji-gloss-content"></span></li></template>
236
+ <template id="kanji-reading-template"><dd class="kanji-reading"></dd></template>
237
+
238
+ <!-- Tag -->
239
+ <template id="tag-template"><span class="tag"><span class="tag-label"><span class="tag-label-content"></span></span></span></template>
240
+ <template id="tag-with-body-template"><span class="tag tag-has-body"><span class="tag-label"><span class="tag-label-content"></span></span><span class="tag-body"><span class="tag-body-content"></span></span></span></template>
241
+
242
+ <!-- Extra -->
243
+ <template id="footer-notification-template"><div class="footer-notification scrollbar">
244
+ <div class="footer-notification-body"></div>
245
+ <div class="footer-notification-close-button-container">
246
+ <button type="button" class="footer-notification-close-button"><span class="footer-notification-close-button-icon icon" data-icon="cross"></span></button>
247
+ </div>
248
+ </div></template>
249
+ <template id="footer-notification-tag-details-template" data-remove-whitespace-text="true">
250
+ <div class="tag-details"></div>
251
+ <div class="tag-details-disambiguation-list"></div>
252
+ </template>
253
+ <template id="profile-list-item-template"><label class="profile-list-item">
254
+ <div class="profile-list-item-selection"><label class="radio"><input type="radio" class="profile-entry-is-default-radio" name="profile-entry-default-radio"><span class="radio-body"><span class="radio-border"></span><span class="radio-dot"></span></span></label></div>
255
+ <div class="profile-list-item-name"></div>
256
+ </label></template>
257
+
258
+ </body></html>`;
259
+
260
+ //#endregion
261
+ //#region src/render/styles/display-styles.ts
262
+ /**
263
+ * The display CSS styles from the Yomitan extension.
264
+ * Sourced from Yomitan's ext/css/display.css.
265
+ */
266
+ const DISPLAY_CSS = `/*
267
+ * Copyright (C) 2023-2025 Yomitan Authors
268
+ * Copyright (C) 2016-2022 Yomichan Authors
269
+ *
270
+ * This program is free software: you can redistribute it and/or modify
271
+ * it under the entrys of the GNU General Public License as published by
272
+ * the Free Software Foundation, either version 3 of the License, or
273
+ * (at your option) any later version.
274
+ *
275
+ * This program is distributed in the hope that it will be useful,
276
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
277
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
278
+ * GNU General Public License for more details.
279
+ *
280
+ * You should have received a copy of the GNU General Public License
281
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
282
+ */
283
+
284
+ /* Variables */
285
+ :root {
286
+ /* Strings */
287
+ --compact-list-separator: ' | ';
288
+
289
+ --disambiguation-separator: ', ';
290
+ --disambiguation-reading-separator: ':';
291
+
292
+ --headword-separator: '\\3001';
293
+
294
+ --inflection-separator: '\\00AB';
295
+
296
+ /* Layout */
297
+ --font-size-no-units: 14;
298
+ --font-size: calc(1px * var(--font-size-no-units));
299
+ --query-parser-font-size-no-units: 2;
300
+ --query-parser-font-size: calc(1em * var(--query-parser-font-size-no-units));
301
+ --h2-font-size-no-units: 1.25;
302
+ --h2-font-size: calc(1em * var(--h2-font-size-no-units));
303
+
304
+ --headword-font-size-no-units: 2;
305
+ --headword-font-size: calc(1em * var(--headword-font-size-no-units));
306
+ --headword-reading-font-size-no-units: 0.75;
307
+ --headword-reading-font-size: calc(var(--headword-reading-font-size-no-units) * var(--headword-font-size));
308
+ --headword-reading-space: 0.5em;
309
+ --headword-list-end-space: 0.5em;
310
+ --headword-thin-border-size: calc(1em / (var(--headword-font-size-no-units) * var(--font-size-no-units)));
311
+
312
+ --line-height-no-units: 20;
313
+ --line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));
314
+
315
+ --thin-border-size: calc(1em / var(--font-size-no-units));
316
+
317
+ --action-button-size-no-units: 16;
318
+ --action-button-size: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units)));
319
+ --action-button-padding: 0.3em;
320
+
321
+ --list-margin: 0.72em;
322
+ --content-width: 100%;
323
+ --main-content-vertical-padding: 0em;
324
+ --main-content-horizontal-padding: 0em;
325
+ --entry-horizontal-padding: 0.72em;
326
+ --entry-vertical-padding: 0.72em;
327
+ --query-horizontal-padding: 0.72em;
328
+
329
+ --sidebar-width-no-units: 40;
330
+ --sidebar-width: calc(1em * (var(--sidebar-width-no-units) / var(--font-size-no-units)));
331
+ --sidebar-button-height-no-units: 30;
332
+ --sidebar-button-height: calc(1em * (var(--sidebar-button-height-no-units) / var(--font-size-no-units)));
333
+ --sidebar-button-icon-size-no-units: 16;
334
+ --sidebar-button-icon-size: calc(1em * (var(--sidebar-button-icon-size-no-units) / var(--font-size-no-units)));
335
+
336
+ --progress-bar-height-no-units: 4;
337
+ --progress-bar-height: calc(1em * (var(--progress-bar-height-no-units) / var(--font-size-no-units)));
338
+ --progress-bar-active-transition-duration: 0.125s;
339
+ --progress-bar-active-transition-start-delay: 0.0625s;
340
+ --progress-bar-animation-duration: 2s;
341
+
342
+ --entry-current-indicator-width-no-units: 4;
343
+ --entry-current-indicator-width: calc(1em * var(--entry-current-indicator-width-no-units) / var(--font-size-no-units));
344
+ --entry-current-indicator-transition-duration: 0.125s;
345
+
346
+ --tag-height-no-units: 20;
347
+ --tag-height: calc(1em * var(--tag-height-no-units) / var(--font-size-no-units));
348
+ --tag-font-size-no-units: 11;
349
+ --tag-font-size: calc(1em * var(--tag-font-size-no-units) / var(--font-size-no-units));
350
+ --tag-border-size-no-units: 1;
351
+ --tag-border-size: calc(1em * (var(--tag-border-size-no-units) / var(--font-size-no-units)));
352
+ --tag-border-style: solid;
353
+ --tag-font-weight: bold;
354
+ --tag-border-radius: 0.25em;
355
+
356
+ --list-padding1: 1.4em;
357
+ --list-padding2: var(--list-padding1);
358
+
359
+ --entry-current-indicator-triangle-size-no-units: 6;
360
+ --entry-current-indicator-triangle-size: calc(1em * (var(--entry-current-indicator-triangle-size-no-units) / var(--font-size-no-units)));
361
+
362
+ --overlay-panel-translate-distance: 4em;
363
+
364
+ --disambiguation-space: 0.25em;
365
+
366
+ --animation-duration: 0.125s;
367
+ --animation-duration2: calc(2 * var(--animation-duration));
368
+
369
+ --collapsible-definition-line-count: 3;
370
+ --collapsible-kanji-glyph-data-line-count: 3;
371
+ --kanji-glyph-table-header-height: calc((20em / var(--font-size-no-units)) + var(--kanji-glyph-table-cell-padding) * 3);
372
+ --collapsible-definition-test-offset: 0.2em;
373
+ --collpasible-kanji-glyph-data-test-offset: 0.2em;
374
+
375
+ /* Colors */
376
+ --background-color: #ffffff;
377
+ --gloss-image-background-color: #eeeeee;
378
+ --link-color: var(--accent-color);
379
+
380
+ --text-color: #000000;
381
+ --reason-text-color: var(--text-color-light3);
382
+
383
+ --headword-text-color: var(--text-color);
384
+ --headword-text-color-popular: var(--accent-color);
385
+ --headword-text-color-rare: var(--text-color-light4);
386
+ --headword-furigana-text-color: var(--headword-text-color);
387
+ --headword-furigana-text-color-popular: var(--headword-text-color-popular);
388
+ --headword-furigana-text-color-rare: var(--headword-text-color-rare);
389
+ --headword-reading-text-color: var(--headword-furigana-text-color);
390
+ --headword-reading-text-color-popular: var(--headword-furigana-text-color-popular);
391
+ --headword-reading-text-color-rare: var(--headword-furigana-text-color-rare);
392
+ --headword-kanji-text-color: var(--headword-text-color);
393
+ --headword-kanji-text-color-popular: var(--headword-text-color-popular);
394
+ --headword-kanji-text-color-rare: var(--headword-text-color-rare);
395
+ --headword-kanji-border-color: var(--dark-border-color);
396
+ --headword-kanji-border-color-popular: var(--headword-kanji-border-color);
397
+ --headword-kanji-border-color-rare: var(--headword-kanji-border-color);
398
+
399
+ --kanji-glyph-table-cell-padding: 0.36em;
400
+
401
+ --light-border-color: #eeeeee;
402
+ --medium-border-color: #dddddd;
403
+ --dark-border-color: #777777;
404
+
405
+ --tag-text-color: #ffffff;
406
+ --tag-border-color: transparent;
407
+ --tag-default-background-color: #8a8a91;
408
+ --tag-name-background-color: #b6327a;
409
+ --tag-expression-background-color: #f0ad4e;
410
+ --tag-popular-background-color: #0275d8;
411
+ --tag-frequent-background-color: #5bc0de;
412
+ --tag-archaism-background-color: #d9534f;
413
+ --tag-dictionary-background-color: #aa66cc;
414
+ --tag-frequency-background-color: #5cb85c;
415
+ --tag-part-of-speech-background-color: #565656;
416
+ --tag-search-background-color: #8a8a91;
417
+ --tag-pronunciation-dictionary-background-color: #6640be;
418
+
419
+ --sidebar-background-color: #f8f9fa;
420
+
421
+ --sidebar-button-background-color: transparent;
422
+ --sidebar-button-background-color-hover: #cccccc;
423
+ --sidebar-button-background-color-active: #aaaaaa;
424
+ --sidebar-button-danger-background-color: transparent;
425
+ --sidebar-button-danger-background-color-hover: #dd2222;
426
+ --sidebar-button-danger-background-color-active: #bb2222;
427
+ --sidebar-button-icon-color: #333333;
428
+ --sidebar-button-disabled-icon-color: #888888;
429
+ --sidebar-button-danger-icon-color: #ffffff;
430
+
431
+ --scrollbar-thumb-color: #c1c1c1;
432
+ --scrollbar-track-color: #f1f1f1;
433
+ --scrollbar-inverse-thumb-color: #444444;
434
+ --scrollbar-inverse-track-color: #2f2f2f;
435
+
436
+ --progress-bar-track-color: #cccccc;
437
+ --progress-bar-indicator-color: var(--accent-color);
438
+ --entry-current-indicator-color: var(--accent-color);
439
+
440
+ --notification-text-color: #2f2f2f;
441
+ --notification-background-color: #f1f1f1;
442
+ --notification-background-color-light: #e1e1e1;
443
+ --notification-background-color-lighter: #bbbbbb;
444
+ --notification-shadow-color: rgba(255, 255, 255, 0.25);
445
+
446
+ --action-button-hover-color: #dddddd;
447
+ --action-button-active-color: #c1c1c1;
448
+ }
449
+ :root[data-theme=dark] {
450
+ /* Colors */
451
+ --background-color: #1e1e1e;
452
+ --gloss-image-background-color: #2f2f2f;
453
+ --link-color: var(--accent-color);
454
+
455
+ --text-color: #d4d4d4;
456
+ --reason-text-color: var(--text-color-light3);
457
+
458
+ --headword-text-color: var(--text-color);
459
+ --headword-text-color-popular: var(--accent-color);
460
+ --headword-text-color-rare: var(--text-color-light4);
461
+ --headword-furigana-text-color: var(--headword-text-color);
462
+ --headword-furigana-text-color-popular: var(--headword-text-color-popular);
463
+ --headword-furigana-text-color-rare: var(--headword-text-color-rare);
464
+ --headword-reading-text-color: var(--headword-furigana-text-color);
465
+ --headword-reading-text-color-popular: var(--headword-furigana-text-color-popular);
466
+ --headword-reading-text-color-rare: var(--headword-furigana-text-color-rare);
467
+ --headword-kanji-border-color: var(--dark-border-color);
468
+
469
+ --light-border-color: #2f2f2f;
470
+ --medium-border-color: #3f3f3f;
471
+ --dark-border-color: #888888;
472
+
473
+ --tag-text-color: #f1f1f1;
474
+ --tag-border-color: transparent;
475
+ --tag-default-background-color: #69696e;
476
+ --tag-name-background-color: #992a67;
477
+ --tag-expression-background-color: #b07f39;
478
+ --tag-popular-background-color: #025caa;
479
+ --tag-frequent-background-color: #4490a7;
480
+ --tag-archaism-background-color: #b04340;
481
+ --tag-dictionary-background-color: #9057ad;
482
+ --tag-frequency-background-color: #489148;
483
+ --tag-part-of-speech-background-color: #565656;
484
+ --tag-search-background-color: #69696e;
485
+ --tag-pronunciation-dictionary-background-color: #6640be;
486
+
487
+ --sidebar-background-color: #282828;
488
+
489
+ --sidebar-button-background-color: transparent;
490
+ --sidebar-button-background-color-hover: #3a3a3a;
491
+ --sidebar-button-background-color-active: #5a5a5a;
492
+ --sidebar-button-danger-background-color: transparent;
493
+ --sidebar-button-danger-background-color-hover: #dd2222;
494
+ --sidebar-button-danger-background-color-active: #bb2222;
495
+ --sidebar-button-icon-color: #cccccc;
496
+ --sidebar-button-disabled-icon-color: #777777;
497
+ --sidebar-button-danger-icon-color: #ffffff;
498
+
499
+ --scrollbar-thumb-color: #444444;
500
+ --scrollbar-track-color: #2f2f2f;
501
+ --scrollbar-inverse-thumb-color: #c1c1c1;
502
+ --scrollbar-inverse-track-color: #f1f1f1;
503
+
504
+ --progress-bar-track-color: #3a3a3a;
505
+ --progress-bar-indicator-color: var(--accent-color);
506
+ --entry-current-indicator-color: var(--accent-color);
507
+
508
+ --notification-text-color: #ffffff;
509
+ --notification-background-color: #333333;
510
+ --notification-background-color-light: #555555;
511
+ --notification-background-color-lighter: #666666;
512
+ --notification-shadow-color: rgba(0, 0, 0, 0.5);
513
+
514
+ --action-button-hover-color: #282828;
515
+ --action-button-active-color: #444444;
516
+ }
517
+
518
+
519
+ /* Fonts */
520
+ @font-face {
521
+ font-family: kanji-stroke-orders;
522
+ src: url('/data/fonts/kanji-stroke-orders.ttf');
523
+ }
524
+
525
+
526
+ /* General */
527
+ :root[data-page-type=popup]:not([data-theme]),
528
+ :root[data-page-type=popup]:not([data-theme]) body {
529
+ background-color: transparent;
530
+ }
531
+ body {
532
+ overflow: hidden;
533
+ }
534
+ ol, ul {
535
+ margin-top: 0;
536
+ margin-bottom: var(--list-padding);
537
+ }
538
+ h2 {
539
+ font-size: var(--h2-font-size);
540
+ font-weight: normal;
541
+ margin: 0.25em 0 0;
542
+ border-bottom: calc(1em / (var(--font-size-no-units) * var(--h2-font-size-no-units))) solid var(--light-border-color);
543
+ }
544
+ h3 {
545
+ font-size: 1em;
546
+ font-weight: bold;
547
+ margin: 0.25em 0 0.375em;
548
+ padding: 0;
549
+ }
550
+ h5 {
551
+ font-size: calc(12em / var(--font-size-no-units));
552
+ margin: 0;
553
+ padding: 0;
554
+ font-weight: normal;
555
+ }
556
+ a {
557
+ color: var(--link-color);
558
+ text-decoration: underline;
559
+ cursor: pointer;
560
+ text-underline-offset: calc(4em / var(--font-size-no-units));
561
+ text-decoration-thickness: calc(1em / var(--font-size-no-units));
562
+ }
563
+ a:has(rt) {
564
+ text-decoration: none;
565
+ border-bottom: solid calc(1em / var(--font-size-no-units)) var(--link-color);
566
+ }
567
+
568
+
569
+ /* Selection */
570
+ #content-scroll-focus {
571
+ opacity: 0;
572
+ margin: 0;
573
+ padding: 0;
574
+ outline: none;
575
+ background-color: transparent;
576
+ display: inline;
577
+ width: 0;
578
+ height: 0;
579
+ line-height: 0;
580
+ user-select: none;
581
+ }
582
+ #content-scroll-focus::-moz-focus-inner {
583
+ border: 0;
584
+ }
585
+
586
+
587
+ /* Scrollbars */
588
+ :root:not([data-theme=light]) .scrollbar {
589
+ scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
590
+ }
591
+ :root:not([data-theme=light]) .scrollbar::-webkit-scrollbar {
592
+ width: auto;
593
+ }
594
+ :root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-button {
595
+ height: 0;
596
+ }
597
+ :root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-thumb {
598
+ background-color: var(--scrollbar-thumb-color);
599
+ }
600
+ :root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-track {
601
+ background-color: var(--scrollbar-thumb-color);
602
+ }
603
+ :root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-track-piece {
604
+ background-color: var(--scrollbar-track-color);
605
+ }
606
+ :root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-corner {
607
+ background-color: var(--scrollbar-track-color);
608
+ }
609
+ :root .scrollbar-inverse {
610
+ scrollbar-color: var(--scrollbar-inverse-humb-color) var(--scrollbar-inverse-track-color);
611
+ }
612
+ :root .scrollbar-inverse::-webkit-scrollbar {
613
+ width: auto;
614
+ }
615
+ :root .scrollbar-inverse::-webkit-scrollbar-button {
616
+ height: 0;
617
+ }
618
+ :root .scrollbar-inverse::-webkit-scrollbar-thumb {
619
+ background-color: var(--scrollbar-inverse-thumb-color);
620
+ }
621
+ :root .scrollbar-inverse::-webkit-scrollbar-track {
622
+ background-color: var(--scrollbar-inverse-thumb-color);
623
+ }
624
+ :root .scrollbar-inverse::-webkit-scrollbar-track-piece {
625
+ background-color: var(--scrollbar-inverse-track-color);
626
+ }
627
+ :root .scrollbar-inverse::-webkit-scrollbar-corner {
628
+ background-color: var(--scrollbar-inverse-track-color);
629
+ }
630
+ .scrollbar-spacer {
631
+ display: inline-block;
632
+ overflow-x: hidden;
633
+ overflow-y: scroll;
634
+ visibility: hidden;
635
+ flex: 0 1 auto;
636
+ }
637
+
638
+
639
+ /* Main layout */
640
+ .content {
641
+ flex: 1 1 auto;
642
+ position: relative;
643
+ }
644
+ .content-scroll {
645
+ position: absolute;
646
+ left: 0;
647
+ top: 0;
648
+ right: 0;
649
+ bottom: 0;
650
+ display: flex;
651
+ flex-flow: column nowrap;
652
+ overflow-x: hidden;
653
+ overflow-y: scroll;
654
+ align-items: stretch;
655
+ justify-content: flex-start;
656
+ }
657
+ .content-body {
658
+ flex: 1 1 auto;
659
+ position: relative;
660
+ }
661
+ .content-body-inner {
662
+ width: var(--content-width);
663
+ max-width: 100%;
664
+ box-sizing: border-box;
665
+ margin: 0 auto;
666
+ padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
667
+ }
668
+ .content-footer-container1 {
669
+ display: flex;
670
+ flex-flow: row nowrap;
671
+ position: absolute;
672
+ left: 0;
673
+ right: 0;
674
+ bottom: 0;
675
+ max-height: 100%;
676
+ pointer-events: none;
677
+ z-index: 5;
678
+ }
679
+ .content-footer-container2 {
680
+ display: flex;
681
+ flex-flow: row nowrap;
682
+ justify-content: center;
683
+ flex: 1 1 auto;
684
+ max-width: 100%;
685
+ }
686
+ .content-footer {
687
+ width: var(--content-width);
688
+ max-width: 100%;
689
+ }
690
+ .contain-overscroll {
691
+ overscroll-behavior: contain;
692
+ }
693
+
694
+
695
+ /* Sidebar layout */
696
+ .content-outer {
697
+ width: 100%;
698
+ height: 100%;
699
+ display: flex;
700
+ flex-flow: row nowrap;
701
+ overflow: hidden;
702
+ align-items: stretch;
703
+ align-content: stretch;
704
+ justify-content: center;
705
+ }
706
+ .content-sidebar {
707
+ flex: 0 0 auto;
708
+ height: 100%;
709
+ overflow-x: hidden;
710
+ overflow-y: auto;
711
+ background-color: var(--sidebar-background-color);
712
+ z-index: 10;
713
+ position: relative;
714
+ display: none;
715
+ }
716
+ :root[data-has-navigation-previous=true] .content-sidebar,
717
+ :root[data-has-navigation-next=true] .content-sidebar,
718
+ :root[data-popup-action-bar-visibility=always] .content-sidebar,
719
+ :root[data-profile-panel-visible=true] .content-sidebar {
720
+ display: block;
721
+ }
722
+ .content-sidebar-inner {
723
+ display: flex;
724
+ flex-flow: column nowrap;
725
+ width: var(--sidebar-width);
726
+ height: 100%;
727
+ }
728
+ .content-sidebar-top-pre {
729
+ flex: 0 0 auto;
730
+ display: flex;
731
+ flex-flow: column nowrap;
732
+ }
733
+ .content-sidebar-top {
734
+ flex: 1 1 auto;
735
+ display: flex;
736
+ flex-flow: column nowrap;
737
+ }
738
+ .content-sidebar-bottom {
739
+ position: sticky;
740
+ bottom: 0;
741
+ background-color: var(--sidebar-background-color);
742
+ display: flex;
743
+ flex-flow: column nowrap;
744
+ align-items: center;
745
+ }
746
+ :root[data-popup-action-bar-location=top] .content-outer,
747
+ :root[data-popup-action-bar-location=bottom] .content-outer {
748
+ flex-flow: column nowrap;
749
+ }
750
+ :root[data-popup-action-bar-location=top] .content-sidebar,
751
+ :root[data-popup-action-bar-location=bottom] .content-sidebar {
752
+ height: auto;
753
+ width: 100%;
754
+ }
755
+ :root[data-popup-action-bar-location=left] .content-sidebar,
756
+ :root[data-popup-action-bar-location=top] .content-sidebar {
757
+ order: -1;
758
+ }
759
+ :root[data-popup-action-bar-location=top] .content-sidebar-inner,
760
+ :root[data-popup-action-bar-location=bottom] .content-sidebar-inner {
761
+ flex-flow: row nowrap;
762
+ width: auto;
763
+ height: var(--sidebar-button-height);
764
+ }
765
+ :root[data-popup-action-bar-location=top] .content-sidebar-top-pre,
766
+ :root[data-popup-action-bar-location=bottom] .content-sidebar-top-pre {
767
+ flex-flow: row nowrap;
768
+ order: 1;
769
+ }
770
+ :root[data-popup-action-bar-location=top] .content-sidebar-top,
771
+ :root[data-popup-action-bar-location=bottom] .content-sidebar-top {
772
+ flex-flow: row nowrap;
773
+ }
774
+ :root[data-popup-action-bar-location=top] .content-sidebar-bottom,
775
+ :root[data-popup-action-bar-location=bottom] .content-sidebar-bottom {
776
+ flex-flow: row nowrap;
777
+ }
778
+
779
+ :root[data-popup-action-bar-location=right] #profile-name,
780
+ :root[data-popup-action-bar-location=left] #profile-name {
781
+ writing-mode: vertical-rl;
782
+ text-orientation: vertical;
783
+ letter-spacing: 2px;
784
+ }
785
+
786
+
787
+ /* Sidebar buttons */
788
+ button.sidebar-button {
789
+ --button-content-color: var(--sidebar-button-icon-color);
790
+ --button-border-color: transparent;
791
+ --button-background-color: var(--sidebar-button-background-color);
792
+ --button-shadow: none;
793
+
794
+ --button-hover-border-color: transparent;
795
+ --button-hover-background-color: var(--sidebar-button-background-color-hover);
796
+ --button-hover-shadow: none;
797
+
798
+ --button-active-border-color: transparent;
799
+ --button-active-background-color: var(--sidebar-button-background-color-active);
800
+ --button-active-shadow: none;
801
+
802
+ --button-disabled-content-color: var(--sidebar-button-disabled-icon-color);
803
+ --button-disabled-border-color: transparent;
804
+ --button-disabled-background-color: var(--sidebar-button-background-color);
805
+ --button-disabled-shadow: none;
806
+
807
+ width: 100%;
808
+ height: var(--sidebar-button-height);
809
+ margin: 0;
810
+ padding: 0;
811
+ border-style: none;
812
+ border-width: 0;
813
+ cursor: pointer;
814
+ display: block;
815
+ transition: background-color 0.125s ease-in-out;
816
+ outline: none;
817
+ font-size: inherit;
818
+ border-radius: 0;
819
+ }
820
+ :root[data-popup-action-bar-location=top] button.sidebar-button,
821
+ :root[data-popup-action-bar-location=bottom] button.sidebar-button {
822
+ width: var(--sidebar-width);
823
+ height: 100%;
824
+ }
825
+ button.sidebar-button.danger {
826
+ --button-content-color: var(--sidebar-button-icon-color);
827
+ --button-border-color: transparent;
828
+ --button-background-color: var(--sidebar-button-danger-background-color);
829
+ --button-shadow: none;
830
+
831
+ --button-hover-content-color: var(--sidebar-button-danger-icon-color);
832
+ --button-hover-border-color: transparent;
833
+ --button-hover-background-color: var(--sidebar-button-danger-background-color-hover);
834
+ --button-hover-shadow: none;
835
+
836
+ --button-active-content-color: var(--sidebar-button-danger-icon-color);
837
+ --button-active-border-color: transparent;
838
+ --button-active-background-color: var(--sidebar-button-danger-background-color-active);
839
+ --button-active-shadow: none;
840
+ }
841
+ .sidebar-button-icon {
842
+ --icon-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size);
843
+
844
+ display: block;
845
+ width: 100%;
846
+ height: 100%;
847
+ background-color: var(--button-current-content-color);
848
+ transition: background-color 0.125s ease-in-out;
849
+ }
850
+ button.sidebar-button.sidebar-button-highlight {
851
+ --button-content-color: var(--accent-color);
852
+ --button-hover-content-color: var(--accent-color);
853
+ --button-active-content-color: var(--accent-color);
854
+ }
855
+
856
+
857
+ /* Search page */
858
+ .search-header-wrapper {
859
+ background-color: var(--background-color);
860
+ width: 100%;
861
+ display: flex;
862
+ justify-content: center;
863
+ }
864
+ .sticky-header {
865
+ position: sticky;
866
+ top: 0px;
867
+ z-index: 1000;
868
+ }
869
+ #sticky-search-header {
870
+ padding-top: 10px;
871
+ }
872
+ .sticky-header #query-parser-content {
873
+ max-height: calc(var(--query-parser-font-size) * 2);
874
+ }
875
+ .search-header {
876
+ width: var(--content-width);
877
+ display: flex;
878
+ flex-flow: column nowrap;
879
+ max-height: 100vh;
880
+ padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
881
+ }
882
+ #query-parser-container {
883
+ overflow-y: auto;
884
+ padding-left: var(--query-horizontal-padding);
885
+ padding-right: var(--query-horizontal-padding);
886
+ padding-bottom: 0.25em;
887
+ border-bottom: var(--headword-thin-border-size) solid var(--light-border-color);
888
+ }
889
+ #query-parser-content {
890
+ margin-top: 0.5em;
891
+ font-size: var(--query-parser-font-size);
892
+ white-space: pre-wrap;
893
+ }
894
+ #query-parser-content[data-term-spacing=true] .query-parser-term {
895
+ margin-right: 0.2em;
896
+ }
897
+
898
+
899
+ /* Action buttons */
900
+ .actions {
901
+ display: flex;
902
+ flex-flow: row nowrap;
903
+ float: right;
904
+ margin: -0.25em;
905
+ position: relative;
906
+ z-index: 1;
907
+ }
908
+ .actions::after {
909
+ clear: both;
910
+ content: '';
911
+ display: block;
912
+ }
913
+ .note-actions-container {
914
+ display: flex;
915
+ flex-flow: row nowrap;
916
+ align-items: start;
917
+ }
918
+ .action-button-container {
919
+ display: flex;
920
+ flex-direction: column;
921
+ position: relative;
922
+ }
923
+
924
+ .note-actions-container .action-button-container::after {
925
+ content: '';
926
+ position: absolute;
927
+ left: calc(50% - 0.5px);
928
+ top: calc((var(--action-button-size) + var(--action-button-padding) * 2) * 0.5);
929
+ bottom: calc((var(--action-button-size) + var(--action-button-padding) * 2) * 0.5);
930
+ width: 1px;
931
+ background: var(--accent-color);
932
+ pointer-events: none;
933
+ opacity: 0.25;
934
+ z-index: -1;
935
+ }
936
+
937
+ .note-actions-container .action-button-container:first-child {
938
+ flex-direction: row-reverse;
939
+ }
940
+ .note-actions-container .action-button-container:first-child::after {
941
+ top: calc(50% - 0.5px);
942
+ left: calc((var(--action-button-size) + var(--action-button-padding) * 2) * 0.5);
943
+ right: calc((var(--action-button-size) + var(--action-button-padding) * 2) * 0.5);
944
+ bottom: auto;
945
+ height: 1px;
946
+ width: auto;
947
+ }
948
+
949
+ .note-actions-container .action-button-container:only-child::after {
950
+ display: none;
951
+ }
952
+
953
+ button.action-button {
954
+ cursor: pointer;
955
+ display: block;
956
+ opacity: 1;
957
+ border: 0;
958
+ margin: 0;
959
+ padding: var(--action-button-padding);
960
+ background: transparent;
961
+ font-size: inherit;
962
+ box-shadow: none;
963
+ position: relative;
964
+ z-index: 1;
965
+ transition:
966
+ opacity var(--animation-duration) linear,
967
+ visibility 0s linear 0s,
968
+ filter var(--animation-duration) linear,
969
+ -webkit-filter var(--animation-duration) linear,
970
+ background-color var(--animation-duration) linear;
971
+ }
972
+ button.action-button[hidden] {
973
+ display: block;
974
+ visibility: hidden;
975
+ opacity: 0;
976
+ transition:
977
+ opacity var(--animation-duration) linear,
978
+ visibility 0s linear var(--animation-duration),
979
+ filter var(--animation-duration) linear,
980
+ -webkit-filter var(--animation-duration) linear,
981
+ background-color var(--animation-duration) linear;
982
+ }
983
+ button.action-button-collapsible[hidden] {
984
+ display: none;
985
+ }
986
+ button.action-button:disabled {
987
+ pointer-events: auto;
988
+ cursor: default;
989
+ -webkit-filter: grayscale(100%);
990
+ filter: grayscale(100%);
991
+ background-color: transparent;
992
+ }
993
+ button.action-button:disabled:not([hidden]) {
994
+ opacity: 0.25;
995
+ }
996
+ button.action-button:hover,
997
+ button.action-button:focus {
998
+ background-color: transparent;
999
+ box-shadow: none;
1000
+ }
1001
+ button.action-button:focus-visible {
1002
+ background-color: var(--action-button-hover-color);
1003
+ box-shadow: none;
1004
+ }
1005
+ button.action-button:active:not(:disabled) {
1006
+ background-color: var(--action-button-active-color);
1007
+ box-shadow: none;
1008
+ }
1009
+
1010
+ .icon[data-icon=view-note] { background-image: url('/images/view-note.svg'); }
1011
+ .icon[data-icon=view-note-learning] { background-image: url('/images/view-note-learning.svg'); }
1012
+ .icon[data-icon=view-note-review] { background-image: url('/images/view-note-review.svg'); }
1013
+ .icon[data-icon=view-note-suspended] { background-image: url('/images/view-note-suspended.svg'); }
1014
+ .icon[data-icon=view-note-buried] { background-image: url('/images/view-note-buried.svg'); }
1015
+ .icon[data-icon=big-circle] { background-image: url('/images/big-circle.svg'); }
1016
+ .icon[data-icon=small-circle] { background-image: url('/images/small-circle.svg'); }
1017
+ .icon[data-icon=big-square] { background-image: url('/images/big-square.svg'); }
1018
+ .icon[data-icon=big-diamond] { background-image: url('/images/big-diamond.svg'); }
1019
+ .icon[data-icon=overwrite-big-circle] { background-image: url('/images/overwrite-big-circle.svg'); }
1020
+ .icon[data-icon=overwrite-small-circle] { background-image: url('/images/overwrite-small-circle.svg'); }
1021
+ .icon[data-icon=overwrite-big-square] { background-image: url('/images/overwrite-big-square.svg'); }
1022
+ .icon[data-icon=overwrite-big-diamond] { background-image: url('/images/overwrite-big-diamond.svg'); }
1023
+ .icon[data-icon=add-duplicate-big-circle] { background-image: url('/images/add-duplicate-big-circle.svg'); }
1024
+ .icon[data-icon=add-duplicate-small-circle] { background-image: url('/images/add-duplicate-small-circle.svg'); }
1025
+ .icon[data-icon=add-duplicate-big-square] { background-image: url('/images/add-duplicate-big-square.svg'); }
1026
+ .icon[data-icon=add-duplicate-big-diamond] { background-image: url('/images/add-duplicate-big-diamond.svg'); }
1027
+ .icon[data-icon=play-audio] { background-image: url('/images/play-audio.svg'); }
1028
+ .icon[data-icon=source-term] { background-image: url('/images/source-term.svg'); }
1029
+ .icon[data-icon=entry-current] { background-image: url('/images/entry-current.svg'); }
1030
+ .action-icon {
1031
+ display: block;
1032
+ width: var(--action-button-size);
1033
+ height: var(--action-button-size);
1034
+ }
1035
+ .action-icon:not(.color-icon) {
1036
+ background-color: var(--text-color);
1037
+ }
1038
+ :root[data-result-output-mode=merge] .entry[data-type=term] .actions>button.action-button[data-action=play-audio] {
1039
+ display: none;
1040
+ }
1041
+ .action-button-badge {
1042
+ pointer-events: none;
1043
+ position: absolute;
1044
+ display: block;
1045
+ right: 0;
1046
+ top: 0;
1047
+ width: calc(8em / var(--font-size-no-units));
1048
+ height: calc(8em / var(--font-size-no-units));
1049
+ }
1050
+ .action-button-badge[data-icon=cross] {
1051
+ background-color: var(--danger-color);
1052
+ }
1053
+ .action-button-badge[data-icon=plus-thick] {
1054
+ background-color: var(--success-color);
1055
+ }
1056
+
1057
+
1058
+ /* Tags */
1059
+ .tag {
1060
+ --tag-color: var(--tag-default-background-color);
1061
+
1062
+ display: inline-flex;
1063
+ flex-flow: row nowrap;
1064
+ align-items: stretch;
1065
+ border: none;
1066
+ border-right: none;
1067
+ font-size: 1em;
1068
+ min-height: var(--tag-height);
1069
+ margin: calc(1em / var(--font-size-no-units)) 0.375em calc(1em / var(--font-size-no-units)) 0;
1070
+ }
1071
+ .tag-label {
1072
+ display: flex;
1073
+ flex-flow: row nowrap;
1074
+ align-items: center;
1075
+ background-color: var(--tag-color);
1076
+ border-radius: var(--tag-border-radius);
1077
+ padding: calc(2.5em / var(--font-size-no-units)) 0.375em calc(2.5em / var(--font-size-no-units)) 0.375em;
1078
+ color: var(--tag-text-color);
1079
+ cursor: pointer;
1080
+ }
1081
+ .tag-label-content {
1082
+ display: block;
1083
+ font-size: var(--tag-font-size);
1084
+ font-weight: var(--tag-font-weight);
1085
+ }
1086
+ .tag-body {
1087
+ display: flex;
1088
+ flex-flow: row nowrap;
1089
+ align-items: center;
1090
+ position: relative;
1091
+ padding: 0 0.375em 0 0.375em;
1092
+ border-radius: var(--tag-border-radius);
1093
+ border-top-left-radius: 0;
1094
+ border-bottom-left-radius: 0;
1095
+ }
1096
+ .tag-body::before {
1097
+ content: '';
1098
+ display: block;
1099
+ position: absolute;
1100
+ left: 0;
1101
+ top: 0;
1102
+ bottom: 0;
1103
+ right: 0;
1104
+ border-radius: var(--tag-border-radius);
1105
+ border-top-left-radius: 0;
1106
+ border-bottom-left-radius: 0;
1107
+ border: var(--tag-border-size) var(--tag-border-style) var(--tag-color);
1108
+ border-left: none;
1109
+ pointer-events: none;
1110
+ }
1111
+ .tag-body-content {
1112
+ display: block;
1113
+ position: relative;
1114
+ }
1115
+ .tag:not(.tag-has-body)>.tag-body {
1116
+ display: none;
1117
+ }
1118
+ .tag.tag-has-body>.tag-label {
1119
+ border-top-right-radius: 0;
1120
+ border-bottom-right-radius: 0;
1121
+ }
1122
+ .tag[data-category=name] {
1123
+ --tag-color: var(--tag-name-background-color);
1124
+ }
1125
+ .tag[data-category=expression] {
1126
+ --tag-color: var(--tag-expression-background-color);
1127
+ }
1128
+ .tag[data-category=popular] {
1129
+ --tag-color: var(--tag-popular-background-color);
1130
+ }
1131
+ .tag[data-category=frequent] {
1132
+ --tag-color: var(--tag-frequent-background-color);
1133
+ }
1134
+ .tag[data-category=archaism] {
1135
+ --tag-color: var(--tag-archaism-background-color);
1136
+ }
1137
+ .tag[data-category=dictionary] {
1138
+ --tag-color: var(--tag-dictionary-background-color);
1139
+ }
1140
+ .tag[data-category=frequency] {
1141
+ --tag-color: var(--tag-frequency-background-color);
1142
+ }
1143
+ .tag[data-category=partOfSpeech] {
1144
+ --tag-color: var(--tag-part-of-speech-background-color);
1145
+ }
1146
+ .tag[data-category=search] {
1147
+ --tag-color: var(--tag-search-background-color);
1148
+ }
1149
+ .tag[data-category=pronunciation-dictionary] {
1150
+ --tag-color: var(--tag-pronunciation-dictionary-background-color);
1151
+ }
1152
+
1153
+
1154
+ /* Entries */
1155
+ .entry {
1156
+ padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
1157
+ position: relative;
1158
+ content-visibility: auto;
1159
+ contain-intrinsic-height: auto 500px;
1160
+ }
1161
+ .entry+.entry {
1162
+ border-top: var(--thin-border-size) solid var(--light-border-color);
1163
+ }
1164
+ .entry-body {
1165
+ clear: both;
1166
+ }
1167
+ .entry[data-definition-count='0'] .entry-body-section[data-section-type=definitions],
1168
+ .entry[data-frequency-count='0'] .entry-body-section[data-section-type=frequencies],
1169
+ .entry[data-pronunciation-count='0'] .entry-body-section[data-section-type=pronunciations] {
1170
+ display: none;
1171
+ }
1172
+
1173
+
1174
+ /* Inflections */
1175
+ .inflection-rule-chains {
1176
+ padding-inline-start: 0;
1177
+ list-style-type: none;
1178
+ }
1179
+ .inflection-rule-chain {
1180
+ color: var(--reason-text-color);
1181
+ }
1182
+ .inflection-rule-chain:empty {
1183
+ display: none;
1184
+ }
1185
+ .inflection-rule-chain>.inflection+.inflection-separator+.inflection::before {
1186
+ content: var(--inflection-separator);
1187
+ padding: 0 0.25em;
1188
+ }
1189
+ .inflection-source-icon {
1190
+ display: inline-block;
1191
+ white-space: nowrap;
1192
+ text-align: center;
1193
+ width: 1.4em;
1194
+ margin-right: 0.2em;
1195
+ }
1196
+ .inflection-source-icon[data-inflection-source='dictionary']::after {
1197
+ content: '📖';
1198
+ }
1199
+ .inflection-source-icon[data-inflection-source='algorithm']::after {
1200
+ content: '🧩';
1201
+ }
1202
+ .inflection-source-icon[data-inflection-source='both'] {
1203
+ width: 2.8em;
1204
+ }
1205
+ .inflection-source-icon[data-inflection-source='both']::after {
1206
+ content: '🧩📖';
1207
+ }
1208
+ .inflection[title] {
1209
+ cursor: pointer;
1210
+ }
1211
+
1212
+
1213
+ /* Headwords */
1214
+ .headword-list {
1215
+ display: inline;
1216
+ margin-right: var(--headword-list-end-space);
1217
+ }
1218
+ .headword {
1219
+ --headword-current-text-color: var(--headword-text-color);
1220
+ --headword-current-reading-text-color: var(--headword-reading-text-color);
1221
+ --headword-current-furigana-text-color: var(--headword-furigana-text-color);
1222
+ --headword-current-kanji-text-color: var(--headword-kanji-text-color);
1223
+ --headword-current-kanji-border-color: var(--headword-kanji-border-color);
1224
+
1225
+ display: inline-block;
1226
+ }
1227
+ :root[data-result-output-mode=merge] .headword[data-frequency=popular] {
1228
+ --headword-current-text-color: var(--headword-text-color-popular);
1229
+ --headword-current-reading-text-color: var(--headword-reading-text-color-popular);
1230
+ --headword-current-furigana-text-color: var(--headword-furigana-text-color-popular);
1231
+ --headword-current-kanji-text-color: var(--headword-kanji-text-color-popular);
1232
+ --headword-current-kanji-border-color: var(--headword-kanji-border-color-popular);
1233
+ }
1234
+ :root[data-result-output-mode=merge] .headword[data-frequency=rare] {
1235
+ --headword-current-text-color: var(--headword-text-color-rare);
1236
+ --headword-current-reading-text-color: var(--headword-reading-text-color-rare);
1237
+ --headword-current-furigana-text-color: var(--headword-furigana-text-color-rare);
1238
+ --headword-current-kanji-text-color: var(--headword-kanji-text-color-rare);
1239
+ --headword-current-kanji-border-color: var(--headword-kanji-border-color-rare);
1240
+ }
1241
+ .headword-details {
1242
+ display: inline;
1243
+ }
1244
+ .headword-list-details {
1245
+ display: inline;
1246
+ }
1247
+ .headword-list-tag-list {
1248
+ display: inline;
1249
+ }
1250
+ .headword-text-container {
1251
+ display: inline-block;
1252
+ margin-left: calc(-1 * var(--headword-reading-space));
1253
+ }
1254
+ .headword-term-outer {
1255
+ display: inline-block;
1256
+ position: relative;
1257
+ margin-left: var(--headword-reading-space);
1258
+ }
1259
+ .headword-reading-outer {
1260
+ display: none;
1261
+ position: relative;
1262
+ margin-left: var(--headword-reading-space);
1263
+ }
1264
+ .headword-term {
1265
+ color: var(--headword-current-text-color);
1266
+ font-size: var(--headword-font-size);
1267
+ }
1268
+ .headword-reading {
1269
+ color: var(--headword-current-reading-text-color);
1270
+ font-size: var(--headword-reading-font-size);
1271
+ }
1272
+ .headword-list>.headword:not(:last-of-type)>.headword-text-container>.headword-term-outer::after {
1273
+ content: var(--headword-separator);
1274
+ font-size: var(--headword-font-size);
1275
+ }
1276
+ .headword-list>.headword:not(:last-of-type)>.headword-text-container>.headword-reading-outer::after {
1277
+ content: var(--headword-separator);
1278
+ font-size: var(--headword-reading-font-size);
1279
+ }
1280
+ .headword-term>ruby>rt {
1281
+ color: var(--headword-current-furigana-text-color);
1282
+ }
1283
+ .headword-kanji-link {
1284
+ text-decoration: underline dashed var(--headword-current-kanji-border-color) var(--headword-thin-border-size);
1285
+ text-underline-offset: calc(var(--headword-font-size) / 15);
1286
+ color: var(--headword-current-kanji-text-color);
1287
+ cursor: pointer;
1288
+ }
1289
+ :root[data-result-output-mode=merge] .headword-list-details {
1290
+ display: block;
1291
+ }
1292
+ :root[data-term-display-mode=ruby-and-reading] .headword-term-outer::after,
1293
+ :root[data-term-display-mode=term-and-reading] .headword-term-outer::after {
1294
+ display: none;
1295
+ }
1296
+ :root:not([data-language=ja]) {
1297
+ --headword-separator: ', ';
1298
+ }
1299
+ :root[data-term-display-mode=ruby-and-reading] .headword-reading-outer,
1300
+ :root[data-term-display-mode=term-and-reading] .headword-reading-outer {
1301
+ display: inline-block;
1302
+ }
1303
+ :root[data-term-display-mode=ruby-and-reading] .headword[data-reading-is-same=true] .headword-term-outer::after,
1304
+ :root[data-term-display-mode=term-and-reading] .headword[data-reading-is-same=true] .headword-term-outer::after {
1305
+ display: inline-block;
1306
+ }
1307
+ :root[data-term-display-mode=ruby-and-reading] .headword[data-reading-is-same=true] .headword-reading-outer,
1308
+ :root[data-term-display-mode=term-and-reading] .headword[data-reading-is-same=true] .headword-reading-outer {
1309
+ display: none;
1310
+ }
1311
+ :root[data-term-display-mode=term-and-reading] .headword-term>ruby>rt,
1312
+ :root[data-term-display-mode=term-only] .headword-term>ruby>rt {
1313
+ display: none;
1314
+ }
1315
+
1316
+
1317
+ /* Entry indicator */
1318
+ .entry-current-indicator {
1319
+ display: block;
1320
+ position: absolute;
1321
+ left: calc(-1 * var(--main-content-horizontal-padding));
1322
+ top: 0;
1323
+ bottom: 0;
1324
+ width: 0;
1325
+ background-color: var(--entry-current-indicator-color);
1326
+ visibility: hidden;
1327
+ transition:
1328
+ width var(--entry-current-indicator-transition-duration) linear,
1329
+ visibility 0s linear var(--entry-current-indicator-transition-duration);
1330
+ }
1331
+ .entry.entry-current .entry-current-indicator {
1332
+ width: var(--entry-current-indicator-width);
1333
+ visibility: visible;
1334
+ transition:
1335
+ width var(--entry-current-indicator-transition-duration) linear,
1336
+ visibility 0s linear 0s;
1337
+ }
1338
+ :root[data-popup-current-indicator-mode=bar-right] .entry-current-indicator,
1339
+ :root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator {
1340
+ left: auto;
1341
+ right: 0;
1342
+ }
1343
+ .entry-current-indicator-inner {
1344
+ display: none;
1345
+ pointer-events: auto;
1346
+ width: 100%;
1347
+ height: 0;
1348
+ top: 0;
1349
+ background-color: var(--entry-current-indicator-color);
1350
+ transition: none;
1351
+ }
1352
+ .entry.entry-current .entry-current-indicator-inner {
1353
+ height: var(--entry-current-indicator-width);
1354
+ transition: height var(--entry-current-indicator-transition-duration) linear;
1355
+ }
1356
+ :root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator,
1357
+ :root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator {
1358
+ background-color: transparent;
1359
+ }
1360
+ :root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator-inner,
1361
+ :root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator-inner {
1362
+ display: block;
1363
+ position: sticky;
1364
+ transition: height var(--entry-current-indicator-transition-duration) linear;
1365
+ }
1366
+ :root[data-popup-current-indicator-mode=none] .entry-current-indicator,
1367
+ :root[data-popup-current-indicator-mode=asterisk] .entry-current-indicator,
1368
+ :root[data-popup-current-indicator-mode=triangle] .entry-current-indicator {
1369
+ display: none;
1370
+ transition: none;
1371
+ }
1372
+
1373
+
1374
+ /* Triangle entry indicator */
1375
+ .headword-current-indicator {
1376
+ pointer-events: none;
1377
+ position: absolute;
1378
+ left: calc(-1 * var(--main-content-horizontal-padding));
1379
+ top: 0;
1380
+ bottom: 0;
1381
+ opacity: 0;
1382
+ visibility: hidden;
1383
+ transition:
1384
+ opacity var(--entry-current-indicator-transition-duration) linear,
1385
+ visibility 0s linear var(--entry-current-indicator-transition-duration);
1386
+ }
1387
+ .headword-term .headword-current-indicator {
1388
+ font-size: calc(1em / var(--headword-font-size-no-units));
1389
+ }
1390
+ .entry.entry-current .headword-current-indicator {
1391
+ opacity: 1;
1392
+ visibility: visible;
1393
+ transition:
1394
+ opacity var(--entry-current-indicator-transition-duration) linear,
1395
+ visibility 0s linear 0s;
1396
+ }
1397
+ .headword-current-indicator::after {
1398
+ content: '';
1399
+ display: block;
1400
+ position: absolute;
1401
+ width: var(--entry-current-indicator-triangle-size);
1402
+ height: calc(2 * var(--entry-current-indicator-triangle-size));
1403
+ left: calc(-1 * var(--entry-horizontal-padding));
1404
+ top: calc(50% - var(--entry-current-indicator-triangle-size));
1405
+ background-color: var(--entry-current-indicator-color);
1406
+ mask-repeat: no-repeat;
1407
+ mask-position: center center;
1408
+ mask-mode: alpha;
1409
+ mask-size: contain;
1410
+ mask-image: url(/images/material-right-arrow.svg);
1411
+ -webkit-mask-repeat: no-repeat;
1412
+ -webkit-mask-position: center center;
1413
+ -webkit-mask-mode: alpha;
1414
+ -webkit-mask-size: contain;
1415
+ -webkit-mask-image: url(/images/material-right-arrow.svg);
1416
+ }
1417
+ .headword-list>.headword:not(:first-of-type) .headword-current-indicator,
1418
+ :root:not([data-popup-current-indicator-mode=triangle]) .headword-current-indicator {
1419
+ display: none;
1420
+ transition: none;
1421
+ }
1422
+
1423
+
1424
+ /* Old entry indicator */
1425
+ .entry-current-indicator-icon {
1426
+ display: block;
1427
+ padding: var(--action-button-padding);
1428
+ }
1429
+ .entry-current-indicator-icon[hidden],
1430
+ .entry:not(.entry-current) .entry-current-indicator-icon,
1431
+ :root:not([data-popup-current-indicator-mode=asterisk]) .entry-current-indicator-icon {
1432
+ display: none;
1433
+ }
1434
+ .entry-current-indicator-icon>.icon {
1435
+ width: var(--action-button-size);
1436
+ height: var(--action-button-size);
1437
+ display: block;
1438
+ background-image: url('/images/entry-current.svg');
1439
+ }
1440
+
1441
+
1442
+ /* Merged term styles */
1443
+ :root[data-result-output-mode=merge] .headword-list .headword-details {
1444
+ display: inline-block;
1445
+ position: relative;
1446
+ width: 0;
1447
+ height: 0;
1448
+ visibility: hidden;
1449
+ z-index: 1;
1450
+ }
1451
+ :root[data-result-output-mode=merge] .headword-list>.headword:not(:last-of-type) .headword-details {
1452
+ left: calc(-1 * var(--headword-font-size));
1453
+ }
1454
+ :root[data-result-output-mode=merge] .headword:hover .headword-details {
1455
+ visibility: visible;
1456
+ }
1457
+ :root[data-result-output-mode=merge] .headword-list .headword-details>.action-button[data-action=play-audio] {
1458
+ position: absolute;
1459
+ left: 0;
1460
+ bottom: 0.5em;
1461
+ }
1462
+ :root:not([data-result-output-mode=merge]) .headword-list .headword-details>.action-button[data-action=play-audio] {
1463
+ display: none;
1464
+ }
1465
+
1466
+
1467
+ /* Definitions */
1468
+ .definition-list {
1469
+ margin: 0;
1470
+ padding: 0 0 0 var(--list-padding1);
1471
+ list-style-type: decimal;
1472
+ }
1473
+ .definition-list[data-count='0'],
1474
+ .definition-list[data-count='1'] {
1475
+ padding-left: 0;
1476
+ list-style-type: none;
1477
+ }
1478
+ .gloss-list {
1479
+ margin: 0;
1480
+ padding: 0 0 0 var(--list-padding2);
1481
+ list-style-type: circle;
1482
+ }
1483
+ .gloss-list[data-count='0'],
1484
+ .gloss-list[data-count='1'] {
1485
+ padding-left: 0;
1486
+ list-style-type: none;
1487
+ }
1488
+ .definition-item::marker,
1489
+ .gloss-item::marker {
1490
+ color: var(--text-color-light3);
1491
+ }
1492
+ .gloss-content {
1493
+ display: block;
1494
+ white-space: pre-line;
1495
+ }
1496
+ .definition-disambiguation-list {
1497
+ color: var(--text-color-light3);
1498
+ padding-right: var(--disambiguation-space);
1499
+ }
1500
+ .definition-disambiguation-list[data-count='0'] {
1501
+ display: none;
1502
+ }
1503
+ .definition-disambiguation+.definition-disambiguation::before {
1504
+ content: var(--disambiguation-separator);
1505
+ }
1506
+ .gloss-separator,
1507
+ .inflection-separator {
1508
+ display: inline;
1509
+ font-size: 0;
1510
+ opacity: 0;
1511
+ white-space: pre-wrap;
1512
+ }
1513
+ .gloss-separator {
1514
+ display: none;
1515
+ }
1516
+ .definition-item {
1517
+ display: list-item;
1518
+ position: relative;
1519
+ }
1520
+ .definition-item-inner {
1521
+ display: flex;
1522
+ flex-flow: row nowrap;
1523
+ }
1524
+ .definition-item-content {
1525
+ width: 100%;
1526
+ flex: 1 1 auto;
1527
+ background-color: transparent;
1528
+ transition: background-color var(--animation-duration) ease-in-out;
1529
+ }
1530
+
1531
+ /* Collapse & Expand */
1532
+ button.expansion-button {
1533
+ --button-content-color: var(--text-color-light4);
1534
+ --button-border-color: transparent;
1535
+ --button-background-color: transparent;
1536
+
1537
+ --button-hover-content-color: var(--text-color-light1);
1538
+ --button-hover-border-color: var(--accent-color-lighter);
1539
+ --button-hover-background-color: var(--accent-color-lighter);
1540
+
1541
+ --button-active-content-color: var(--text-color);
1542
+ --button-active-border-color: var(--accent-color-light);
1543
+ --button-active-background-color: var(--accent-color-light);
1544
+
1545
+ --button-padding-vertical: 0;
1546
+ --button-padding-horizontal: 0.125em;
1547
+
1548
+ flex: 0 0 auto;
1549
+ order: 1;
1550
+ border-radius: 0;
1551
+ border: 0;
1552
+ }
1553
+
1554
+ button.expansion-button:hover+.definition-item-content,
1555
+ button.expansion-button:active+.definition-item-content,
1556
+ button.expansion-button:focus+.definition-item-content,
1557
+ button.expansion-button:hover+.kanji-glyph-table,
1558
+ button.expansion-button:active+.kanji-glyph-table,
1559
+ button.expansion-button:focus+.kanji-glyph-table {
1560
+ background-color: var(--accent-color-transparent25);
1561
+ }
1562
+ button.expansion-button:focus:not(:focus-visible)+.definition-item-content,
1563
+ button.expansion-button:focus:not(:focus-visible)+.kanji-glyph-table {
1564
+ background-color: transparent;
1565
+ }
1566
+ button.expansion-button:focus:hover+.definition-item-content,
1567
+ button.expansion-button:focus:active+.definition-item-content,
1568
+ button.expansion-button:focus:focus-visible+.definition-item-content,
1569
+ button.expansion-button:focus:hover+.kanji-glyph-table,
1570
+ button.expansion-button:focus:active+.kanji-glyph-table,
1571
+ button.expansion-button:focus:focus-visible+.kanji-glyph-table {
1572
+ background-color: var(--accent-color-transparent25);
1573
+ }
1574
+ .definition-item-inner.collapsible.collapsed {
1575
+ max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height));
1576
+ overflow: hidden;
1577
+ }
1578
+ .definition-item-inner.collapse-test {
1579
+ max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height) + var(--collapsible-definition-test-offset));
1580
+ overflow: hidden;
1581
+ }
1582
+ .kanji-glyph-data.collapsible.collapsed {
1583
+ max-height: calc(1em * var(--collapsible-kanji-glyph-data-line-count) * var(--line-height) + var(--kanji-glyph-table-header-height));
1584
+ overflow: hidden;
1585
+ }
1586
+ .kanji-glyph-data.collapse-test {
1587
+ 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));
1588
+ overflow: hidden;
1589
+ }
1590
+ :not(.collapsible)>button.expansion-button {
1591
+ display: none;
1592
+ }
1593
+ .expansion-button-icon {
1594
+ transform: rotate(0deg);
1595
+ width: calc(16em / var(--font-size-no-units));
1596
+ height: calc(16em / var(--font-size-no-units));
1597
+ background-color: var(--button-current-content-color);
1598
+ transition: background-color var(--animation-duration) ease-in-out;
1599
+ }
1600
+ .collapsible:not(.collapsed)>button.expansion-button>.expansion-button-icon {
1601
+ transform: rotate(180deg);
1602
+ }
1603
+
1604
+ /* Frequencies */
1605
+ .frequency-group-item {
1606
+ display: inline;
1607
+ }
1608
+ .frequency-item {
1609
+ display: inline;
1610
+ }
1611
+ .frequency-disambiguation {
1612
+ color: var(--text-color-light3);
1613
+ padding-right: var(--disambiguation-space);
1614
+ }
1615
+ .frequency-disambiguation-separator::before {
1616
+ content: var(--disambiguation-reading-separator);
1617
+ }
1618
+ .frequency-disambiguation-reading {
1619
+ display: inline;
1620
+ font-size: 1em;
1621
+ }
1622
+ .frequency-body::after {
1623
+ white-space: pre-wrap;
1624
+ display: inline;
1625
+ color: var(--text-color-light3);
1626
+ }
1627
+ .entry[data-unique-term-count='1'] .frequency-item[data-has-reading=false] .frequency-disambiguation,
1628
+ .entry[data-unique-reading-count='1'][data-unique-term-count='1'] .frequency-disambiguation,
1629
+ .frequency-item[data-reading-is-same=true] .frequency-disambiguation-separator,
1630
+ .frequency-item[data-reading-is-same=true] .frequency-disambiguation-reading,
1631
+ .frequency-item[data-has-reading=false] .frequency-disambiguation-separator,
1632
+ .frequency-item[data-has-reading=false] .frequency-disambiguation-reading,
1633
+ .entry[data-unique-term-count='1'] .frequency-disambiguation-separator,
1634
+ .entry[data-unique-term-count='1'] .frequency-disambiguation-term,
1635
+ .entry[data-unique-reading-count='1'] .frequency-disambiguation-separator,
1636
+ .entry[data-unique-reading-count='1'] .frequency-disambiguation-reading {
1637
+ display: none;
1638
+ }
1639
+ :root[data-frequency-display-mode=tags] .frequency-group-tag,
1640
+ :root[data-frequency-display-mode=split-tags] .frequency-group-tag {
1641
+ margin: 0;
1642
+ display: inline;
1643
+ min-height: auto;
1644
+ }
1645
+ :root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-label,
1646
+ :root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-label {
1647
+ display: none;
1648
+ }
1649
+ :root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-body,
1650
+ :root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-body {
1651
+ display: inline;
1652
+ padding: 0;
1653
+ }
1654
+ :root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-body::before,
1655
+ :root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-body::before {
1656
+ display: none;
1657
+ }
1658
+ :root[data-frequency-display-mode=tags] .frequency-list,
1659
+ :root[data-frequency-display-mode=split-tags] .frequency-list {
1660
+ display: inline;
1661
+ }
1662
+ :root[data-frequency-display-mode=list] .frequency-tag,
1663
+ :root[data-frequency-display-mode=inline-list] .frequency-tag,
1664
+ :root[data-frequency-display-mode=tags-grouped] .frequency-tag,
1665
+ :root[data-frequency-display-mode=split-tags-grouped] .frequency-tag {
1666
+ margin: 0;
1667
+ display: inline;
1668
+ min-height: auto;
1669
+ }
1670
+ :root[data-frequency-display-mode=list] .frequency-tag>.tag-label,
1671
+ :root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-label,
1672
+ :root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-label,
1673
+ :root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-label {
1674
+ display: none;
1675
+ }
1676
+ :root[data-frequency-display-mode=list] .frequency-tag>.tag-body,
1677
+ :root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-body,
1678
+ :root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-body,
1679
+ :root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-body {
1680
+ display: inline;
1681
+ padding: 0;
1682
+ }
1683
+ :root[data-frequency-display-mode=list] .frequency-tag>.tag-body::before,
1684
+ :root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-body::before,
1685
+ :root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-body::before,
1686
+ :root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-body::before {
1687
+ display: none;
1688
+ }
1689
+ :root[data-frequency-display-mode=list] .frequency-body,
1690
+ :root[data-frequency-display-mode=inline-list] .frequency-body,
1691
+ :root[data-frequency-display-mode=tags-grouped] .frequency-body,
1692
+ :root[data-frequency-display-mode=split-tags-grouped] .frequency-body {
1693
+ display: inline-block;
1694
+ }
1695
+ :root[data-frequency-display-mode=inline-list] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after,
1696
+ :root[data-frequency-display-mode=tags-grouped] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after,
1697
+ :root[data-frequency-display-mode=split-tags-grouped] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after {
1698
+ content: var(--compact-list-separator);
1699
+ }
1700
+ :root[data-frequency-display-mode=list] .frequency-group-tag>.tag-body::before,
1701
+ :root[data-frequency-display-mode=inline-list] .frequency-group-tag>.tag-body::before {
1702
+ display: none;
1703
+ }
1704
+ :root[data-frequency-display-mode=list] .frequency-group-tag.tag.tag-has-body>.tag-label,
1705
+ :root[data-frequency-display-mode=inline-list] .frequency-group-tag.tag.tag-has-body>.tag-label {
1706
+ border-radius: var(--tag-border-radius);
1707
+ }
1708
+ :root[data-frequency-display-mode=tags] .frequency-tag>.tag-body::before {
1709
+ display: none;
1710
+ }
1711
+ :root[data-frequency-display-mode=tags] .frequency-tag>.tag-body {
1712
+ background-color: var(--tag-color);
1713
+ padding-left: 0;
1714
+ }
1715
+ :root[data-frequency-display-mode=tags] .frequency-body {
1716
+ font-size: var(--tag-font-size);
1717
+ font-weight: var(--tag-font-weight);
1718
+ color: var(--tag-text-color);
1719
+ }
1720
+ :root[data-frequency-display-mode=tags] .frequency-tag>.tag-label>.tag-label-content::after {
1721
+ content: ':';
1722
+ }
1723
+ :root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-body::before {
1724
+ display: none;
1725
+ }
1726
+ :root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-body {
1727
+ background-color: var(--tag-color);
1728
+ padding-left: 0;
1729
+ }
1730
+ :root[data-frequency-display-mode=tags-grouped] .frequency-list {
1731
+ font-size: var(--tag-font-size);
1732
+ font-weight: var(--tag-font-weight);
1733
+ color: var(--tag-text-color);
1734
+ }
1735
+ :root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-label>.tag-label-content::after {
1736
+ content: ':';
1737
+ }
1738
+ :root[data-frequency-display-mode=tags] .frequency-disambiguation,
1739
+ :root[data-frequency-display-mode=tags-grouped] .frequency-disambiguation,
1740
+ :root[data-frequency-display-mode=tags] .frequency-body::after,
1741
+ :root[data-frequency-display-mode=tags-grouped] .frequency-body::after {
1742
+ color: inherit;
1743
+ font-weight: normal;
1744
+ opacity: 0.75;
1745
+ }
1746
+ :root[data-frequency-display-mode=list] .frequency-group-list {
1747
+ list-style-type: decimal;
1748
+ padding: 0 0 0 var(--list-padding1);
1749
+ }
1750
+ :root[data-frequency-display-mode=list] .frequency-group-item {
1751
+ display: list-item;
1752
+ }
1753
+ :root[data-frequency-display-mode=list] .frequency-group-item::marker {
1754
+ color: var(--text-color-light3);
1755
+ }
1756
+ :root[data-frequency-display-mode=list] .frequency-group-tag {
1757
+ display: block;
1758
+ min-height: auto;
1759
+ }
1760
+ :root[data-frequency-display-mode=list] .frequency-group-tag>.tag-label {
1761
+ display: inline-flex;
1762
+ }
1763
+ :root[data-frequency-display-mode=list] .frequency-list {
1764
+ list-style-type: circle;
1765
+ padding: 0 0 0 var(--list-padding2);
1766
+ }
1767
+ :root[data-frequency-display-mode=list] .frequency-item {
1768
+ display: list-item;
1769
+ }
1770
+ :root[data-frequency-display-mode=list] .frequency-item::marker {
1771
+ color: var(--text-color-light3);
1772
+ }
1773
+ :root[data-frequency-display-mode=list] .frequency-group-list[data-count='1'] {
1774
+ list-style-type: none;
1775
+ padding-left: 0;
1776
+ }
1777
+ :root[data-frequency-display-mode=list] .frequency-group-list[data-count='1']>.frequency-group-item {
1778
+ display: inline;
1779
+ }
1780
+ :root[data-frequency-display-mode=list] .frequency-group-item[data-count='1']>.frequency-group-tag>.tag-body {
1781
+ display: inline-flex;
1782
+ }
1783
+ :root[data-frequency-display-mode=list] .frequency-group-item[data-count='1']>.frequency-group-tag>.tag-body>.frequency-body {
1784
+ display: inline;
1785
+ }
1786
+ :root[data-frequency-display-mode=list] .frequency-group-item[data-count='1'] .frequency-list {
1787
+ list-style-type: none;
1788
+ padding-left: 0;
1789
+ }
1790
+ :root[data-frequency-display-mode=list] .frequency-group-item[data-count='1'] .frequency-item {
1791
+ display: inline;
1792
+ }
1793
+
1794
+
1795
+ /* Pitch accent styles */
1796
+ .pronunciation-group-list {
1797
+ margin: 0;
1798
+ padding: 0 0 0 var(--list-padding1);
1799
+ list-style-type: decimal;
1800
+ }
1801
+ .pronunciation-group-list[data-count='0'],
1802
+ .pronunciation-group-list[data-count='1'] {
1803
+ padding-left: 0;
1804
+ list-style-type: none;
1805
+ }
1806
+ .pronunciation-list {
1807
+ margin: 0;
1808
+ padding: 0 0 0 var(--list-padding2);
1809
+ list-style-type: circle;
1810
+ display: block;
1811
+ }
1812
+ .pronunciation-list[data-count='0'],
1813
+ .pronunciation-list[data-count='1'] {
1814
+ padding-left: 0;
1815
+ list-style-type: none;
1816
+ display: inline;
1817
+ }
1818
+ .pronunciation-group::marker,
1819
+ .pronunciation::marker {
1820
+ color: var(--text-color-light3);
1821
+ }
1822
+ .pronunciation {
1823
+ display: list-item;
1824
+ line-height: 1.5;
1825
+ }
1826
+ .pronunciation-list[data-count='0'] .pronunciation,
1827
+ .pronunciation-list[data-count='1'] .pronunciation {
1828
+ display: inline;
1829
+ }
1830
+ .pronunciation-group-tag-list {
1831
+ margin-right: 0.375em;
1832
+ }
1833
+ .pronunciation-disambiguation-list {
1834
+ color: var(--text-color-light3);
1835
+ padding-right: var(--disambiguation-space);
1836
+ }
1837
+ .pronunciation-disambiguation+.pronunciation-disambiguation::before {
1838
+ content: var(--disambiguation-separator);
1839
+ }
1840
+ .pronunciation-disambiguation-list[data-count='0'] {
1841
+ display: none;
1842
+ }
1843
+ .pronunciation-tag-list:not([data-count='0']) {
1844
+ margin-right: 0.375em;
1845
+ }
1846
+ .pronunciation-downstep-notation-container {
1847
+ margin-left: 0.25em;
1848
+ }
1849
+ .pronunciation-graph-container {
1850
+ margin-left: 0.25em;
1851
+ }
1852
+
1853
+
1854
+ /* Kanji */
1855
+ .kanji-glyph-container {
1856
+ display: block;
1857
+ position: relative;
1858
+ }
1859
+ .kanji-glyph {
1860
+ font-family: sans-serif;
1861
+ font-size: 8.5em;
1862
+ line-height: 1;
1863
+ padding: 0.01em;
1864
+ vertical-align: top;
1865
+ }
1866
+ .kanji-glyph-data {
1867
+ margin-top: 0.75em;
1868
+ display: flex;
1869
+ flex-flow: row nowrap;
1870
+ }
1871
+ .kanji-glyph-table {
1872
+ border-spacing: 0;
1873
+ border-collapse: collapse;
1874
+ }
1875
+ .kanji-glyph-table>tbody>tr>* {
1876
+ border-top: var(--thin-border-size) solid var(--medium-border-color);
1877
+ text-align: left;
1878
+ vertical-align: top;
1879
+ padding: var(--kanji-glyph-table-cell-padding);
1880
+ margin: 0;
1881
+ }
1882
+ .kanji-info-table {
1883
+ width: 100%;
1884
+ }
1885
+ .kanji-info-table>tbody>tr>th,
1886
+ .kanji-info-table>tbody>tr>td {
1887
+ text-align: left;
1888
+ vertical-align: top;
1889
+ padding: 0;
1890
+ margin: 0;
1891
+ }
1892
+ .kanji-info-table>tbody>tr>td {
1893
+ text-align: right;
1894
+ }
1895
+ .kanji-glyph-table dl {
1896
+ margin-top: 0;
1897
+ margin-bottom: 1.4em;
1898
+ }
1899
+ .kanji-glyph-table dd {
1900
+ margin-left: 0;
1901
+ }
1902
+ .kanji-gloss-list {
1903
+ margin: 0;
1904
+ padding: 0 0 0 var(--list-padding1);
1905
+ list-style-type: decimal;
1906
+ }
1907
+ .kanji-gloss-list[data-count='0'],
1908
+ .kanji-gloss-list[data-count='1'] {
1909
+ padding-left: 0;
1910
+ list-style-type: none;
1911
+ }
1912
+ .kanji-gloss-item::marker {
1913
+ color: var(--text-color-light3);
1914
+ }
1915
+ .kanji-gloss-content {
1916
+ white-space: pre-line;
1917
+ }
1918
+ .kanji-tag-list {
1919
+ position: relative;
1920
+ }
1921
+ .entry[data-type=kanji] .entry-body-section[data-section-type=frequencies] {
1922
+ position: relative;
1923
+ }
1924
+
1925
+
1926
+ /* Progress bar */
1927
+ @keyframes progress-bar-indeterminant1a {
1928
+ 0% { left: 0; }
1929
+ 25% { left: 0; }
1930
+ 75% { left: 100%; }
1931
+ 100% { left: 100%; }
1932
+ }
1933
+ @keyframes progress-bar-indeterminant1b {
1934
+ 0% { right: 100%; }
1935
+ 50% { right: 0; }
1936
+ 100% { right: 0; }
1937
+ }
1938
+ @keyframes progress-bar-indeterminant2a {
1939
+ 0% { left: 0; }
1940
+ 25% { left: 0; }
1941
+ 100% { left: 100%; }
1942
+ }
1943
+ @keyframes progress-bar-indeterminant2b {
1944
+ 0% { right: 100%; }
1945
+ 75% { right: 0; }
1946
+ 100% { right: 0; }
1947
+ }
1948
+ .progress-bar-indeterminant {
1949
+ display: block;
1950
+ width: 100%;
1951
+ height: 0;
1952
+ background-color: var(--progress-bar-indicator-color);
1953
+ position: relative;
1954
+ transition:
1955
+ height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-duration),
1956
+ background-color var(--progress-bar-active-transition-duration) linear;
1957
+ }
1958
+ .progress-bar-indeterminant[data-active=true] {
1959
+ height: var(--progress-bar-height);
1960
+ background-color: var(--progress-bar-track-color);
1961
+ transition:
1962
+ height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-start-delay),
1963
+ background-color 0s linear;
1964
+ }
1965
+ .progress-bar-indeterminant[hidden]:not([data-active=true]) {
1966
+ display: none;
1967
+ }
1968
+ .progress-bar-indeterminant::before,
1969
+ .progress-bar-indeterminant::after {
1970
+ content: '';
1971
+ display: block;
1972
+ position: absolute;
1973
+ left: 0;
1974
+ top: 0;
1975
+ bottom: 0;
1976
+ right: 100%;
1977
+ background-color: var(--progress-bar-indicator-color);
1978
+ animation: none;
1979
+ }
1980
+ .progress-bar-indeterminant:not([hidden])::before {
1981
+ animation:
1982
+ progress-bar-indeterminant1a var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay),
1983
+ progress-bar-indeterminant1b var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay);
1984
+ }
1985
+ .progress-bar-indeterminant:not([hidden])::after {
1986
+ animation:
1987
+ 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)),
1988
+ 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));
1989
+ }
1990
+ .top-progress-bar-container {
1991
+ position: sticky;
1992
+ top: 0;
1993
+ height: 0;
1994
+ pointer-events: none;
1995
+ z-index: 10;
1996
+ }
1997
+
1998
+
1999
+ /* Frame resizer */
2000
+ .frame-resizer-container {
2001
+ position: fixed;
2002
+ bottom: 0;
2003
+ right: 0;
2004
+ z-index: 100;
2005
+ background: transparent;
2006
+ pointer-events: none;
2007
+ user-select: none;
2008
+ }
2009
+ .frame-resizer-sizer1 {
2010
+ padding-top: 100%;
2011
+ line-height: 0;
2012
+ }
2013
+ .frame-resizer-sizer2 {
2014
+ display: inline-block;
2015
+ overflow-x: hidden;
2016
+ overflow-y: scroll;
2017
+ vertical-align: bottom;
2018
+ }
2019
+ .frame-resizer-sizer2.frame-resizer-sizer2-with-min-size {
2020
+ min-width: 1em;
2021
+ }
2022
+ .frame-resizer-svg {
2023
+ display: block;
2024
+ position: absolute;
2025
+ bottom: 0;
2026
+ right: 0;
2027
+ width: 75%;
2028
+ height: 75%;
2029
+ }
2030
+ .frame-resizer-handle {
2031
+ fill: var(--text-color);
2032
+ opacity: 0.125;
2033
+ cursor: se-resize;
2034
+ pointer-events: auto;
2035
+ transition:
2036
+ fill var(--animation-duration) linear,
2037
+ opacity var(--animation-duration) linear;
2038
+ }
2039
+ .frame-resizer-handle:hover,
2040
+ :root[data-is-resizing=true] .frame-resizer-handle {
2041
+ fill: var(--accent-color);
2042
+ opacity: 1;
2043
+ }
2044
+
2045
+
2046
+ /* Footer notifications */
2047
+ .footer-notification {
2048
+ display: flex;
2049
+ flex-flow: row nowrap;
2050
+ align-items: flex-start;
2051
+ pointer-events: auto;
2052
+ border-radius: 0.25em;
2053
+ background-color: var(--notification-background-color);
2054
+ box-shadow: 0 0.125em 0.25em 0 var(--notification-shadow-color);
2055
+ color: var(--notification-text-color);
2056
+ margin: 0.5em;
2057
+ padding: 0;
2058
+ transition: opacity var(--animation-duration) ease-out;
2059
+ position: relative;
2060
+ overflow: auto;
2061
+ max-height: calc(0.5em * 2 + var(--line-height) * 4 * 1em);
2062
+ }
2063
+ .footer-notification[hidden] {
2064
+ display: flex;
2065
+ opacity: 0;
2066
+ transition: opacity var(--animation-duration) ease-in;
2067
+ }
2068
+ .footer-notification-body {
2069
+ flex: 1 1 auto;
2070
+ padding: 0.5em 0.75em;
2071
+ white-space: pre-line;
2072
+ }
2073
+ .footer-notification-close-button-container {
2074
+ align-self: stretch;
2075
+ display: flex;
2076
+ flex-flow: column nowrap;
2077
+ align-items: center;
2078
+ justify-content: center;
2079
+ padding: 0.25em 0.75em 0.25em 0;
2080
+ position: sticky;
2081
+ top: 0;
2082
+ right: 0;
2083
+ }
2084
+ button.footer-notification-close-button {
2085
+ --button-content-color: var(--notification-text-color);
2086
+ --button-border-color: transparent;
2087
+ --button-background-color: transparent;
2088
+ --button-shadow: none;
2089
+
2090
+ --button-hover-border-color: transparent;
2091
+ --button-hover-background-color: transparent;
2092
+ --button-hover-shadow: none;
2093
+
2094
+ --button-active-border-color: transparent;
2095
+ --button-active-background-color: transparent;
2096
+ --button-active-shadow: none;
2097
+
2098
+ --button-focus-visible-border-color: transparent;
2099
+ --button-focus-visible-background-color: var(--notification-background-color-light);
2100
+ --button-focus-visible-shadow: none;
2101
+
2102
+ flex: 0 0 auto;
2103
+ margin: -0.25em;
2104
+ padding: 0.5em;
2105
+ border-style: none;
2106
+ border-width: 0;
2107
+ cursor: pointer;
2108
+ font-size: inherit;
2109
+ }
2110
+ .footer-notification-close-button-icon {
2111
+ display: block;
2112
+ width: calc(16em / var(--font-size-no-units));
2113
+ height: calc(16em / var(--font-size-no-units));
2114
+ background-color: var(--button-content-color);
2115
+ }
2116
+ .tag-details-disambiguation-list>.tag-details-disambiguation:not(:last-child)::after {
2117
+ content: var(--disambiguation-separator);
2118
+ }
2119
+ .footer-notification a {
2120
+ color: var(--notification-text-color);
2121
+ }
2122
+
2123
+
2124
+ /* Overlays */
2125
+ .overlay-panel-container {
2126
+ pointer-events: none;
2127
+ position: absolute;
2128
+ left: 0;
2129
+ top: 0;
2130
+ bottom: 0;
2131
+ right: 0;
2132
+ z-index: 6;
2133
+ }
2134
+ .overlay-panel {
2135
+ pointer-events: auto;
2136
+ background-color: var(--background-color);
2137
+ display: block;
2138
+ position: absolute;
2139
+ left: 0;
2140
+ top: 0;
2141
+ bottom: 0;
2142
+ width: var(--content-width);
2143
+ max-width: 100%;
2144
+ box-sizing: border-box;
2145
+ margin: 0 auto;
2146
+ padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
2147
+ overflow-y: scroll;
2148
+ transform: none;
2149
+ opacity: 1;
2150
+ visibility: visible;
2151
+ transition:
2152
+ opacity var(--animation-duration2) ease-out,
2153
+ visibility 0s linear,
2154
+ transform var(--animation-duration2) ease-out;
2155
+ }
2156
+ .overlay-panel[hidden] {
2157
+ transform: translate(var(--overlay-panel-translate-distance), 0);
2158
+ opacity: 0;
2159
+ visibility: hidden;
2160
+ transition:
2161
+ opacity var(--animation-duration2) ease-in,
2162
+ visibility 0s linear var(--animation-duration2),
2163
+ transform var(--animation-duration2) ease-in;
2164
+ }
2165
+ .overlay-panel[hidden]:not(.hidden-animating) {
2166
+ display: none;
2167
+ }
2168
+ :root[data-popup-action-bar-location=left] .overlay-panel[hidden] {
2169
+ transform: translate(calc(-1 * var(--overlay-panel-translate-distance)), 0);
2170
+ }
2171
+ :root[data-popup-action-bar-location=top] .overlay-panel[hidden] {
2172
+ transform: translate(0, calc(-1 * var(--overlay-panel-translate-distance)));
2173
+ }
2174
+ :root[data-popup-action-bar-location=bottom] .overlay-panel[hidden] {
2175
+ transform: translate(0, var(--overlay-panel-translate-distance));
2176
+ }
2177
+ .overlay-panel-inner {
2178
+ padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
2179
+ }
2180
+
2181
+
2182
+ /* Profile panel */
2183
+ .profile-list {
2184
+ display: flex;
2185
+ flex-flow: column nowrap;
2186
+ align-items: stretch;
2187
+ }
2188
+ .profile-list-item {
2189
+ display: flex;
2190
+ flex-flow: row nowrap;
2191
+ align-items: center;
2192
+ cursor: pointer;
2193
+ }
2194
+ .profile-list-item-selection {
2195
+ flex: 0 0 auto;
2196
+ text-align: center;
2197
+ padding: 0.25em 0.5em 0.25em 0;
2198
+ }
2199
+ .profile-list-item-name {
2200
+ flex: 1 1 auto;
2201
+ padding: 0.25em 0;
2202
+ }
2203
+
2204
+
2205
+ /* Audio menu */
2206
+ .audio-button-popup-menu[data-show-icons=false] .popup-menu-item-audio-button .popup-menu-item-icon {
2207
+ display: none;
2208
+ }
2209
+ .audio-button-popup-menu .popup-menu-item-icon[data-icon=checkmark] {
2210
+ background-color: var(--success-color);
2211
+ }
2212
+ .audio-button-popup-menu .popup-menu-item-icon[data-icon=cross] {
2213
+ background-color: var(--danger-color);
2214
+ }
2215
+ .audio-button-popup-menu .popup-menu-item-group[data-source-in-options=false][data-valid=null] .popup-menu-item {
2216
+ color: var(--text-color-light1);
2217
+ }
2218
+ .popup-menu-item-audio-button .popup-menu-item-label {
2219
+ padding-right: 2.5em;
2220
+ }
2221
+ .popup-menu-item-set-primary-audio-button {
2222
+ flex-flow: row nowrap;
2223
+ align-items: center;
2224
+ justify-content: center;
2225
+ position: absolute;
2226
+ right: 0;
2227
+ top: 0;
2228
+ bottom: 0;
2229
+ width: 2.5em;
2230
+ }
2231
+ .popup-menu-item-set-primary-audio-button:not([hidden]) {
2232
+ display: flex;
2233
+ }
2234
+ .popup-menu-item-set-primary-audio-button .popup-menu-item-icon {
2235
+ opacity: 0;
2236
+ transition: opacity var(--animation-duration) linear;
2237
+ }
2238
+ .popup-menu-item-audio-button:hover~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon,
2239
+ .popup-menu-item-audio-button:active~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon,
2240
+ .popup-menu-item-audio-button:focus~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon {
2241
+ opacity: 0.25;
2242
+ }
2243
+ .popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,
2244
+ .popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,
2245
+ .popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
2246
+ opacity: 0.375;
2247
+ }
2248
+ .popup-menu-item-set-primary-audio-button:focus:not(:focus-visible) .popup-menu-item-icon {
2249
+ opacity: 0;
2250
+ }
2251
+ .popup-menu-item-audio-button:hover~.popup-menu-item-set-primary-audio-button:not(:focus-visible) .popup-menu-item-icon,
2252
+ .popup-menu-item-audio-button:active~.popup-menu-item-set-primary-audio-button:not(:focus-visible) .popup-menu-item-icon,
2253
+ .popup-menu-item-audio-button:focus~.popup-menu-item-set-primary-audio-button:not(:focus-visible) .popup-menu-item-icon {
2254
+ opacity: 0.25;
2255
+ }
2256
+ .popup-menu-item-set-primary-audio-button:hover:not(:focus-visible) .popup-menu-item-icon,
2257
+ .popup-menu-item-set-primary-audio-button:active:not(:focus-visible) .popup-menu-item-icon {
2258
+ opacity: 0.375;
2259
+ }
2260
+ .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,
2261
+ .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,
2262
+ .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,
2263
+ .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 {
2264
+ opacity: 1;
2265
+ }
2266
+
2267
+
2268
+ /* Anki errors */
2269
+ .anki-note-error-list {
2270
+ margin: 0;
2271
+ padding-left: 1.5em;
2272
+ list-style: disc;
2273
+ }
2274
+ .anki-note-error-info {
2275
+ color: var(--danger-color);
2276
+ }
2277
+ .anki-note-error-header {
2278
+ font-weight: bold;
2279
+ }
2280
+
2281
+
2282
+ /* Conditional styles */
2283
+ :root:not([data-enable-search-tags=true]) .tag[data-category=search] {
2284
+ display: none;
2285
+ }
2286
+ :root[data-compact-tags=true] .tag[data-redundant=true] {
2287
+ display: none;
2288
+ }
2289
+
2290
+ :root:not([data-debug=true]) .action-button[data-action=menu] {
2291
+ display: none;
2292
+ }
2293
+ :root[data-anki-enabled=false] .action-button[data-action=view-note],
2294
+ :root[data-anki-enabled=false] .action-button[data-action=save-note] {
2295
+ display: none;
2296
+ }
2297
+
2298
+ :root[data-average-frequency=true] .frequency-group-item:not([data-details='Average']) {
2299
+ display: none;
2300
+ }
2301
+
2302
+ :root[data-average-frequency=false] .frequency-group-item[data-details='Average'] {
2303
+ display: none;
2304
+ }
2305
+
2306
+ :root[data-audio-enabled=false] .action-button[data-action=play-audio] {
2307
+ display: none;
2308
+ }
2309
+ :root[data-glossary-layout-mode^=compact] .definition-tag-list,
2310
+ :root[data-glossary-layout-mode^=compact] .definition-disambiguation-list:not([data-count='0']) {
2311
+ display: inline;
2312
+ }
2313
+ :root[data-glossary-layout-mode^=compact] .gloss-list {
2314
+ display: inline;
2315
+ list-style: none;
2316
+ padding-left: 0;
2317
+ }
2318
+ :root[data-glossary-layout-mode^=compact] .gloss-item {
2319
+ display: inline;
2320
+ }
2321
+ :root[data-glossary-layout-mode^=compact] .gloss-item:not(:first-child)::before {
2322
+ white-space: pre-wrap;
2323
+ content: var(--compact-list-separator);
2324
+ display: inline;
2325
+ color: var(--text-color-light3);
2326
+ }
2327
+ :root[data-glossary-layout-mode^=compact] .gloss-content {
2328
+ display: inline;
2329
+ }
2330
+ :root[data-glossary-layout-mode^=compact] .gloss-separator {
2331
+ display: inline;
2332
+ }
2333
+
2334
+ :root[data-show-pronunciation-text=true] .pronunciation-disambiguation-list[data-term-count='0'],
2335
+ :root[data-show-pronunciation-text=true] .pronunciation-disambiguation[data-type=reading] {
2336
+ display: none;
2337
+ }
2338
+ :root[data-show-pronunciation-text=false] .pronunciation[data-pronunciation-type=pitch-accent]>.pronunciation-representation-list>.pronunciation-text-container {
2339
+ display: none;
2340
+ }
2341
+ :root[data-show-pronunciation-downstep-position=false] .pronunciation-downstep-notation-container {
2342
+ display: none;
2343
+ }
2344
+ :root[data-show-pronunciation-graph=false] .pronunciation-graph-container {
2345
+ display: none;
2346
+ }
2347
+
2348
+ :root[data-glossary-layout-mode^=compact][data-show-pronunciation-graph=false] .pronunciation-list:not([data-has-tags=true]) {
2349
+ display: inline;
2350
+ list-style: none;
2351
+ padding-left: 0;
2352
+ }
2353
+ :root[data-glossary-layout-mode^=compact][data-show-pronunciation-graph=false] .pronunciation-list:not([data-has-tags=true]) .pronunciation {
2354
+ display: inline;
2355
+ }
2356
+ :root[data-glossary-layout-mode^=compact][data-show-pronunciation-graph=false] .pronunciation-list:not([data-has-tags=true]) .pronunciation:not(:first-child)::before {
2357
+ white-space: pre-wrap;
2358
+ content: var(--compact-list-separator);
2359
+ display: inline;
2360
+ color: var(--text-color-light3);
2361
+ }
2362
+
2363
+ :root[data-popup-display-mode=full-width] .frame-resizer-container {
2364
+ display: none;
2365
+ }
2366
+ `;
2367
+
2368
+ //#endregion
2369
+ //#region src/render/styles/structured-content-styles.ts
2370
+ /**
2371
+ * The structured content CSS styles from the Yomitan extension.
2372
+ * Sourced from Yomitan's ext/css/structured-content.css.
2373
+ */
2374
+ const STRUCTURED_CONTENT_CSS = `/*
2375
+ * Copyright (C) 2023-2025 Yomitan Authors
2376
+ * Copyright (C) 2021-2022 Yomichan Authors
2377
+ *
2378
+ * This program is free software: you can redistribute it and/or modify
2379
+ * it under the entrys of the GNU General Public License as published by
2380
+ * the Free Software Foundation, either version 3 of the License, or
2381
+ * (at your option) any later version.
2382
+ *
2383
+ * This program is distributed in the hope that it will be useful,
2384
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
2385
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
2386
+ * GNU General Public License for more details.
2387
+ *
2388
+ * You should have received a copy of the GNU General Public License
2389
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
2390
+ */
2391
+
2392
+ /* Glossary images */
2393
+ .gloss-image-container {
2394
+ display: inline-block;
2395
+ white-space: nowrap;
2396
+ max-width: 100%;
2397
+ max-height: 100vh;
2398
+ position: relative;
2399
+ vertical-align: top;
2400
+ line-height: 0;
2401
+ font-size: calc(1em / var(--font-size-no-units));
2402
+ overflow: hidden;
2403
+ }
2404
+ .gloss-image-link[data-background=true]>.gloss-image-container {
2405
+ background-color: var(--gloss-image-background-color);
2406
+ }
2407
+ .gloss-image-link {
2408
+ cursor: inherit;
2409
+ color: var(--accent-color);
2410
+ display: inline-block;
2411
+ position: relative;
2412
+ line-height: 1;
2413
+ max-width: 100%;
2414
+ }
2415
+ .gloss-image-link:hover {
2416
+ color: var(--accent-color-dark);
2417
+ cursor: pointer;
2418
+ }
2419
+ .gloss-image-container-overlay {
2420
+ position: absolute;
2421
+ left: 0;
2422
+ top: 0;
2423
+ width: 100%;
2424
+ height: 100%;
2425
+ font-size: calc(1em * var(--font-size-no-units));
2426
+ line-height: var(--line-height);
2427
+ display: table;
2428
+ table-layout: fixed;
2429
+ white-space: normal;
2430
+ color: var(--text-color-light3);
2431
+ }
2432
+ .gloss-image-link[data-has-image=true][data-image-load-state=load-error] .gloss-image-container-overlay::after {
2433
+ content: 'Image failed to load';
2434
+ display: table-cell;
2435
+ width: 100%;
2436
+ height: 100%;
2437
+ vertical-align: middle;
2438
+ text-align: center;
2439
+ padding: 0.25em;
2440
+ }
2441
+ .gloss-image-background {
2442
+ --image: none;
2443
+
2444
+ position: absolute;
2445
+ left: 0;
2446
+ top: 0;
2447
+ width: 100%;
2448
+ height: 100%;
2449
+ background-color: var(--text-color);
2450
+ -webkit-mask-repeat: no-repeat;
2451
+ -webkit-mask-position: center center;
2452
+ -webkit-mask-mode: alpha;
2453
+ -webkit-mask-size: contain;
2454
+ -webkit-mask-image: var(--image);
2455
+ mask-repeat: no-repeat;
2456
+ mask-position: center center;
2457
+ mask-mode: alpha;
2458
+ mask-size: contain;
2459
+ mask-image: var(--image);
2460
+ display: none;
2461
+ }
2462
+ .gloss-image {
2463
+ display: inline-block;
2464
+ vertical-align: top;
2465
+ object-fit: contain;
2466
+ border: none;
2467
+ outline: none;
2468
+ }
2469
+ .gloss-image-link[data-has-aspect-ratio=true] .gloss-image {
2470
+ position: absolute;
2471
+ left: 0;
2472
+ top: 0;
2473
+ width: 100%;
2474
+ height: 100%;
2475
+ }
2476
+ .gloss-image-link[data-image-rendering=pixelated] .gloss-image,
2477
+ .gloss-image-link[data-image-rendering=pixelated] .gloss-image-background {
2478
+ image-rendering: auto;
2479
+ image-rendering: -moz-crisp-edges;
2480
+ image-rendering: -webkit-optimize-contrast;
2481
+ image-rendering: pixelated;
2482
+ image-rendering: crisp-edges;
2483
+ }
2484
+ .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
2485
+ .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background {
2486
+ image-rendering: auto;
2487
+ image-rendering: -moz-crisp-edges;
2488
+ image-rendering: -webkit-optimize-contrast;
2489
+ image-rendering: crisp-edges;
2490
+ }
2491
+ :root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
2492
+ :root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background,
2493
+ :root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
2494
+ :root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background {
2495
+ image-rendering: auto;
2496
+ }
2497
+ .gloss-image-link[data-has-aspect-ratio=true] .gloss-image-sizer {
2498
+ display: inline-block;
2499
+ width: 0;
2500
+ vertical-align: top;
2501
+ font-size: 0;
2502
+ }
2503
+ .gloss-image-link-text {
2504
+ display: none;
2505
+ line-height: var(--line-height);
2506
+ }
2507
+ .gloss-image-link-text::before {
2508
+ content: '[';
2509
+ }
2510
+ .gloss-image-link-text::after {
2511
+ content: ']';
2512
+ }
2513
+ .gloss-image-description {
2514
+ display: block;
2515
+ white-space: pre-line;
2516
+ }
2517
+
2518
+ .gloss-image-link[data-appearance=monochrome] .gloss-image {
2519
+ /* Workaround for coloring monochrome gloss images due to issues with masking using a canvas without loading extra media */
2520
+ /* drop-shadow with 0.01px blur is at minimum required for Firefox to render the shadow when used on a canvas */
2521
+ --shadow-settings: 0 0 0.01px var(--text-color);
2522
+ filter: grayscale(1) opacity(0.5) drop-shadow(var(--shadow-settings)) drop-shadow(var(--shadow-settings)) saturate(1000%) brightness(1000%);
2523
+ }
2524
+
2525
+ .gloss-image-link[data-size-units=em] .gloss-image-container {
2526
+ font-size: 1em;
2527
+ }
2528
+
2529
+ .gloss-image-link[data-vertical-align=baseline] { vertical-align: baseline; }
2530
+ .gloss-image-link[data-vertical-align=sub] { vertical-align: sub; }
2531
+ .gloss-image-link[data-vertical-align=super] { vertical-align: super; }
2532
+ .gloss-image-link[data-vertical-align=text-top] { vertical-align: top; }
2533
+ .gloss-image-link[data-vertical-align=text-bottom] { vertical-align: bottom; }
2534
+ .gloss-image-link[data-vertical-align=middle] { vertical-align: middle; }
2535
+ .gloss-image-link[data-vertical-align=top] { vertical-align: top; }
2536
+ .gloss-image-link[data-vertical-align=bottom] { vertical-align: bottom; }
2537
+ .gloss-image-link[data-collapsed=true],
2538
+ :root[data-glossary-layout-mode^=compact] .gloss-image-link[data-collapsible=true] {
2539
+ vertical-align: baseline;
2540
+ }
2541
+
2542
+ .gloss-image-link[data-collapsed=true] .gloss-image-container,
2543
+ :root[data-glossary-layout-mode^=compact] .gloss-image-link[data-collapsible=true] .gloss-image-container {
2544
+ display: none;
2545
+ position: absolute;
2546
+ left: 0;
2547
+ top: 100%;
2548
+ z-index: 1;
2549
+ }
2550
+ .entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsed=true] .gloss-image-container,
2551
+ :root[data-glossary-layout-mode^=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsible=true] .gloss-image-container,
2552
+ :root[data-glossary-layout-mode^=compact] .definition-item:nth-last-of-type(1) .gloss-image-link[data-collapsible=true] .gloss-image-container {
2553
+ bottom: 100%;
2554
+ top: auto;
2555
+ }
2556
+ .gloss-image-link[data-collapsed=true]:hover .gloss-image-container,
2557
+ .gloss-image-link[data-collapsed=true]:focus .gloss-image-container,
2558
+ :root[data-glossary-layout-mode^=compact] .gloss-image-link[data-collapsible=true]:hover .gloss-image-container,
2559
+ :root[data-glossary-layout-mode^=compact] .gloss-image-link[data-collapsible=true]:focus .gloss-image-container {
2560
+ display: block;
2561
+ }
2562
+ .gloss-image-link[data-collapsed=true] .gloss-image-link-text,
2563
+ :root[data-glossary-layout-mode^=compact] .gloss-image-link[data-collapsible=true] .gloss-image-link-text {
2564
+ display: inline;
2565
+ }
2566
+ .gloss-image-link[data-collapsed=true]~.gloss-image-description,
2567
+ :root[data-glossary-layout-mode^=compact] .gloss-image-description {
2568
+ display: inline;
2569
+ }
2570
+
2571
+
2572
+ /* Links */
2573
+ .gloss-link-text {
2574
+ vertical-align: baseline;
2575
+ }
2576
+ .gloss-link-external-icon {
2577
+ display: inline-block;
2578
+ vertical-align: middle;
2579
+ width: calc(16em / var(--font-size-no-units));
2580
+ height: calc(16em / var(--font-size-no-units));
2581
+ margin-left: 0.25em;
2582
+ background-color: var(--link-color);
2583
+ position: relative;
2584
+ }
2585
+
2586
+
2587
+ /* Structured content glossary styles */
2588
+ .gloss-sc-table-container {
2589
+ display: block;
2590
+ }
2591
+ .gloss-sc-table {
2592
+ table-layout: auto;
2593
+ border-collapse: collapse;
2594
+ }
2595
+ .gloss-sc-thead,
2596
+ .gloss-sc-tfoot,
2597
+ .gloss-sc-th {
2598
+ font-weight: bold;
2599
+ background-color: var(--background-color-dark1);
2600
+ }
2601
+ .gloss-sc-th,
2602
+ .gloss-sc-td {
2603
+ border-width: calc(1em / var(--font-size-no-units));
2604
+ border-style: solid;
2605
+ border-color: var(--text-color-light2);
2606
+ padding: 0.25em;
2607
+ vertical-align: top;
2608
+ }
2609
+ .gloss-sc-ol,
2610
+ .gloss-sc-ul {
2611
+ padding-left: var(--list-padding2);
2612
+ }
2613
+ :root[data-glossary-layout-mode^=compact] .gloss-sc-ul[data-sc-content=glossary] {
2614
+ display: inline;
2615
+ list-style: none;
2616
+ padding-left: 0;
2617
+ }
2618
+ :root[data-glossary-layout-mode^=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li {
2619
+ display: inline;
2620
+ }
2621
+ :root[data-glossary-layout-mode^=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li:not(:first-child)::before {
2622
+ white-space: pre-wrap;
2623
+ content: var(--compact-list-separator);
2624
+ display: inline;
2625
+ color: var(--text-color-light3);
2626
+ }
2627
+ .gloss-sc-details {
2628
+ padding-left: var(--list-padding1);
2629
+ }
2630
+ .gloss-sc-summary {
2631
+ list-style-position: outside;
2632
+ }
2633
+ `;
2634
+
2635
+ //#endregion
2636
+ //#region src/render/styles/pronunciation-styles.ts
2637
+ /**
2638
+ * The pronunciation CSS styles from the Yomitan extension.
2639
+ * Sourced from Yomitan's ext/css/display-pronunciation.css.
2640
+ */
2641
+ const PRONUNCIATION_CSS = `/*
2642
+ * Copyright (C) 2023-2025 Yomitan Authors
2643
+ * Copyright (C) 2021-2022 Yomichan Authors
2644
+ *
2645
+ * This program is free software: you can redistribute it and/or modify
2646
+ * it under the entrys of the GNU General Public License as published by
2647
+ * the Free Software Foundation, either version 3 of the License, or
2648
+ * (at your option) any later version.
2649
+ *
2650
+ * This program is distributed in the hope that it will be useful,
2651
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
2652
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
2653
+ * GNU General Public License for more details.
2654
+ *
2655
+ * You should have received a copy of the GNU General Public License
2656
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
2657
+ */
2658
+
2659
+ :root {
2660
+ --pronunciation-annotation-color: #000000;
2661
+ }
2662
+ :root[data-theme=dark] {
2663
+ --pronunciation-annotation-color: #ffffff;
2664
+ }
2665
+
2666
+ .pronunciation-downstep-notation {
2667
+ display: inline;
2668
+ }
2669
+
2670
+ .pronunciation-text {
2671
+ display: inline;
2672
+ }
2673
+ .pronunciation-mora {
2674
+ display: inline-block;
2675
+ position: relative;
2676
+ }
2677
+ .pronunciation-mora-line {
2678
+ border-color: var(--pronunciation-annotation-color);
2679
+ }
2680
+ .pronunciation-mora[data-pitch=high]>.pronunciation-mora-line {
2681
+ display: block;
2682
+ user-select: none;
2683
+ pointer-events: none;
2684
+ position: absolute;
2685
+ top: 0.1em;
2686
+ left: 0;
2687
+ right: 0;
2688
+ height: 0;
2689
+ border-top-width: 0.1em;
2690
+ border-top-style: solid;
2691
+ }
2692
+ .pronunciation-mora[data-pitch=high][data-pitch-next=low]>.pronunciation-mora-line {
2693
+ right: -0.1em;
2694
+ height: 0.4em;
2695
+ border-right-width: 0.1em;
2696
+ border-right-style: solid;
2697
+ }
2698
+ .pronunciation-mora[data-pitch=high][data-pitch-next=low] {
2699
+ padding-right: 0.1em;
2700
+ margin-right: 0.1em;
2701
+ }
2702
+ .pronunciation-devoice-indicator {
2703
+ display: block;
2704
+ position: absolute;
2705
+ left: 50%;
2706
+ top: 50%;
2707
+ width: 1.125em;
2708
+ height: 1.125em;
2709
+ border: calc(1.5em / var(--font-size-no-units)) dotted var(--danger-color);
2710
+ border-radius: 50%;
2711
+ box-sizing: border-box;
2712
+ z-index: 1;
2713
+ transform: translate(-50%, -50%);
2714
+ }
2715
+ .pronunciation-nasal-indicator {
2716
+ display: block;
2717
+ position: absolute;
2718
+ right: -0.125em;
2719
+ top: 0.125em;
2720
+ width: 0.375em;
2721
+ height: 0.375em;
2722
+ border: calc(1.5em / var(--font-size-no-units)) solid var(--danger-color);
2723
+ border-radius: 50%;
2724
+ box-sizing: border-box;
2725
+ z-index: 1;
2726
+ }
2727
+ .pronunciation-nasal-diacritic {
2728
+ position: absolute;
2729
+ width: 0;
2730
+ height: 0;
2731
+ opacity: 0;
2732
+ }
2733
+ .pronunciation-character {
2734
+ display: inline;
2735
+ }
2736
+ .pronunciation-character-group {
2737
+ display: inline-block;
2738
+ position: relative;
2739
+ }
2740
+
2741
+ .pronunciation-graph {
2742
+ display: inline-block;
2743
+ vertical-align: middle;
2744
+ height: 1.5em;
2745
+ }
2746
+ .pronunciation-graph-line,
2747
+ .pronunciation-graph-line-tail {
2748
+ fill: none;
2749
+ stroke: var(--pronunciation-annotation-color);
2750
+ stroke-width: 5;
2751
+ }
2752
+ .pronunciation-graph-line-tail {
2753
+ stroke-dasharray: 5 5;
2754
+ }
2755
+ .pronunciation-graph-dot {
2756
+ fill: var(--pronunciation-annotation-color);
2757
+ stroke: var(--pronunciation-annotation-color);
2758
+ stroke-width: 5;
2759
+ }
2760
+ .pronunciation-graph-dot-downstep1 {
2761
+ fill: none;
2762
+ stroke: var(--pronunciation-annotation-color);
2763
+ stroke-width: 5;
2764
+ }
2765
+ .pronunciation-graph-dot-downstep2 {
2766
+ fill: var(--pronunciation-annotation-color);
2767
+ }
2768
+ .pronunciation-graph-triangle {
2769
+ fill: none;
2770
+ stroke: var(--pronunciation-annotation-color);
2771
+ stroke-width: 5;
2772
+ }
2773
+ `;
2774
+
2775
+ //#endregion
2776
+ export { DISPLAY_CSS, DISPLAY_TEMPLATES, DisplayGenerator, HtmlTemplateCollection, NoOpContentManager, PRONUNCIATION_CSS, PronunciationGenerator, STRUCTURED_CONTENT_CSS, StructuredContentGenerator, addScopeToCss, addScopeToCssLegacy, getDownstepPositions, getKanaDiacriticInfo, getKanaMoraCount, getKanaMorae, getPitchCategory, isCodePointKanji, isMoraPitchHigh, sanitizeCSS };
2777
+ //# sourceMappingURL=render.js.map