inline spoilers, indicator stamps, and smaller japanese in indicators

3 files changed, 61 insertions, 6 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 5e1f87d..574b560 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -11,7 +11,7 @@
 	--tag-font-size: 80%; /* font size for card tags */
 	--subtile-font-size: 75%; /* font size for subtile style (notes, curly braces in translations) */
 	--subtile-opacity: 50%; /* font opacity for subtile style */
-	--reading-kana-font-size: 1rem; /* font size of kana in reading field */
+	--reading-kana-font-size: var(--native-font-size); /* font size of kana in reading field */
 	--native-font-size: 1.0rem; /* font size for generic native (latin) text */
 	--foreign-font-size: 1.5rem; /* font size for generic foreign (japanese) text */
 	--definition-spacing: 0.75em; /* definition spacing (mobile vertical only) */
@@ -21,7 +21,7 @@
 }
 .mobile #card {
 	--text-block-padding: 0.5em;
-	--native-font-size: 1.25rem;
+	--native-font-size: 1.10rem;
 	--foreign-font-size: 1.75rem;
 }
 
@@ -101,8 +101,19 @@ body {
 .spoiler.hidden .inner { filter: blur(0.6rem); }
 .spoiler.visible .inner { filter: blur(0rem); }
 .spoiler .outer::after { transition: backdrop-filter var(--spoiler-transition); }
-.spoiler.hidden .outer::after { backdrop-filter: contrast(80%); }
+.spoiler.hidden .outer::after { backdrop-filter: contrast(70%); }
 .spoiler.visible .outer::after { backdrop-filter: contrast(100%); }
+/* inline spoilers */
+.spoiler.inline {
+	overflow: hidden;
+	border-radius: 4px;
+	display: inline-block;
+	vertical-align: text-bottom;
+}
+.spoiler.inline .outer {
+	padding: 0;
+	display: inline;
+}
 
 
 /* fill display horizontally or vertically */
@@ -292,5 +303,37 @@ body {
 	margin: 0 0.25em;
 	border-radius: 4px;
 	border: 1.2pt solid currentColor;
+	vertical-align: middle;
 }
 #target-word-translation .indicator { opacity: 50%; }
+.indicator .script-japanese {
+	font-size: 90%;
+	vertical-align: middle;
+}
+.indicator .stamp * { line-height: 0; }
+.indicator:has(.stamp) > *:not(.stamp) { vertical-align: middle; }
+.indicator:has(.stamp) {
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-left: 0;
+}
+.indicator .stamp {
+	padding: 2px 4px;
+	margin: 1px;
+	margin-right: 3px;
+	border-radius: 2px;
+	font-weight: bold;
+	font-size: 90%;
+	vertical-align: top;
+	display: inline-block;
+}
+
+.indicator .stamp {
+	background-color: black;
+	color: white;
+}
+.night_mode .indicator .stamp {
+	background-color: white;
+	color: black;
+}
+
diff --git a/anki-card-template/card.html b/anki-card-template/card.html
index 61e396c..825db5d 100644
--- a/anki-card-template/card.html
+++ b/anki-card-template/card.html
@@ -27,7 +27,7 @@
 <hr id="separator">
 <div id="back">
 <span id="target-word-reading" class="parse parse-format parse-reading parse-indicators parse-script foreign">見舞われる[0]【み・まわれる】(note)</span>
-<span id="target-word-translation" class="parse parse-format parse-definitions parse-indicators parse-script native">[verb] To experi\ence {crisis}, to undergo, to suffer {test,テスト,test} (this is, a single item)\, and still is here, but not here</span>
+<span id="target-word-translation" class="parse parse-format parse-definitions parse-indicators parse-script native">[verb] To experi\ence {crisis}, [な-adj] to <span class="inline spoiler hidden parse">undergo</span>, [テスト] to suffer {test,テスト,test} (this is, a single item)\, and still is here, [ば\-test] but not here</span>
 <span id="sentence-translation" class="parse parse-format native spoiler parse-script hidden">This village is now in danger of *extinction* because of _Vah Ruta_, the water divine beast.</span>
 <span id="tags" class="parse parse-tags">ゼルダの伝説 ブレス・オブ・ザ・ワイルド</span>
 </div>
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index b538664..f723d76 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -88,6 +88,8 @@ function parseIndicators(nodes) {
 
 		var input = node.data;
 		var indicator = false; // indicator is open
+		var content = ""; // indicator content
+		var stamp = ""; // filled if indicator has stamp
 		var out = "";
 		for (var i = 0; i < input.length; i++) {
 			// escape characters preceded by \
@@ -95,12 +97,22 @@ function parseIndicators(nodes) {
 				var escaped = input[i+1];
 				if (escaped == "[") { out += "["; i++; continue; }
 				if (escaped == "]") { out += "]"; i++; continue; }
+				if (escaped == "-" && indicator) { content += "-"; i++; continue; }
 			}
 
 			if (input[i] == "[") { indicator = true; out += `<span class="indicator">`; continue; }
-			if (input[i] == "]" && indicator) { indicator = false; out += `</span>`; continue; }
+			if (input[i] == "]" && indicator) {
+				indicator = false;
+				if (stamp) out += `<span class="stamp">${stamp}</span>`;
+				out += `${content}</span>`;
+				content = "";
+				stamp = "";
+				continue;
+			}
+			if (input[i] == "-" && indicator) { stamp = content; content = ""; continue; }
 
-			out += input[i];
+			if (indicator) content += input[i];
+			else out += input[i];
 		}
 		node.data = out;
 	}