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