minor indicator css tweaks2.2.1

3 files changed, 41 insertions, 23 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 648fd2b..c8ffd6f 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -18,12 +18,13 @@
 	--definition-marker-width: 2em; /* definition marker width (mobile vertical only) */
 	--definition-marker-height: 2px; /* definition marker height (mobile vertical only) */
 	--definition-marker-opacity: 50%; /* definition marker opacity (mobile vertical only) */
-	--indicator-stroke-weight: 1.2pt; /* pitch accent / word type indicator stroke weight */
+	--indicator-stroke-weight: 1px; /* pitch accent / word type indicator stroke weight */
 }
 .mobile #card {
 	--text-block-padding: 0.5em;
 	--native-font-size: 1.10rem;
 	--foreign-font-size: 1.75rem;
+	--indicator-stroke-weight: 1.2pt;
 }
 
 /* default fonts */
@@ -32,6 +33,7 @@ body {
 	font-weight: 400;
 }
 
+/* increase contrast of highlighted word */
 #card #sentence:has(b) { color: #000b; }
 #card #sentence b { color: #000f; }
 .night_mode #card #sentence:has(b) { color: #fffb; }
@@ -297,13 +299,11 @@ body {
 	transform: translate(-50%, 50%);
 }
 
-/* indicator (pitch accent or word type) */
+/* indicator (word type + defaults) */
 .indicator {
 	position: relative;
 	display: inline-block;
-	padding: 1px 4px;
-	margin: 0 0.25em;
-	vertical-align: middle;
+	margin: 0.25em;
 	border: var(--indicator-stroke-weight) solid transparent;
 }
 .indicator::after {
@@ -312,27 +312,19 @@ body {
 	inset: calc(-1 * var(--indicator-stroke-weight));
 	border-radius: 4px;
 	border: var(--indicator-stroke-weight) solid currentColor;
+	z-index: -1;
 }
-.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 .script-japanese { font-size: 90%; }
+.indicator .content,
+.indicator .stamp { display: inline-block; }
+.indicator .content { margin: 1px 4px; }
 .indicator .stamp {
 	position: relative;
 	padding: 2px 4px;
 	margin: 1px;
-	margin-right: 3px;
 	font-weight: bold;
 	font-size: 90%;
-	vertical-align: top;
-	display: inline-block;
+	height: 100%;
 }
 .indicator .stamp::before {
 	content: "";
@@ -341,11 +333,37 @@ body {
 	border-radius: 2px;
 	z-index: -1;
 }
+.indicator .stamp * {
+	display: inline-block;
+}
+
+/* indicator (pitch accent pattern) */
+#target-word-reading .indicator::after { border: none; }
+#target-word-reading .indicator {
+	position: relative;
+	bottom: 1px; /* cancel out margin of .indicator > .content */
+	font-size: 80%;
+	font-weight: bold;
+	vertical-align: baseline;
+}
+#target-word-reading .indicator .content { margin: 1px 6px; }
+#target-word-reading .indicator::before {
+	border-radius: 6px;
+	content: "";
+	z-index: -1;
+	position: absolute;
+	inset: 0;
+	opacity: 70%;
+}
+
 
 /* theme colors */
+#target-word-reading .indicator,
 .indicator .stamp { color: white; }
-.indicator .stamp::before { background-color: black; }
-.night_mode #target-word-translation .indicator .stamp::before { background-color: white; opacity: 40%; }
+.indicator .stamp::before,
+#target-word-reading .indicator::before { background-color: black; }
+.night_mode #target-word-translation .indicator .stamp::before,
+.night_mode #target-word-reading .indicator::before { background-color: white; opacity: 40%; }
 
 /* grey color in definitions */
 #target-word-translation .indicator .stamp::before,
diff --git a/anki-card-template/card.html b/anki-card-template/card.html
index 825db5d..dbc6028 100644
--- a/anki-card-template/card.html
+++ b/anki-card-template/card.html
@@ -26,7 +26,7 @@
 </div>
 <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-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}, [な-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>
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index d39e7a0..d110c33 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -107,7 +107,7 @@ function parseIndicators(nodes) {
 			if (input[i] == "]" && indicator) {
 				indicator = false;
 				if (stamp) out += `<span class="stamp">${stamp}</span>`;
-				out += `${content}</span>`;
+				out += `<span class="content">${content}</span></span>`;
 				content = "";
 				stamp = "";
 				continue;