fix janky blur box definition

2 files changed, 14 insertions, 6 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index b9c13e4..41211cc 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -81,16 +81,19 @@ body {
 #card #back #sentence-translation { margin-top: 2em; }
 
 /* blur spoiler */
-.spoiler {
-	cursor: pointer;
+.spoiler { cursor: pointer; }
+.spoiler .inner {
+	display: inline-block;
+	margin: 0 auto;
 	position: relative;
+	padding: var(--spoiler-blur-padding);
 }
-.spoiler.hidden::after { backdrop-filter: blur(1rem) contrast(80%); }
-.spoiler.visible::after { backdrop-filter: blur(0rem); }
-.spoiler::after {
+.spoiler.hidden .inner::after { backdrop-filter: blur(1rem) contrast(80%); }
+.spoiler.visible .inner::after { backdrop-filter: blur(0rem); }
+.spoiler .inner::after {
 	content: "";
 	position: absolute;
-	inset: calc(-1 * var(--spoiler-blur-padding)) calc(var(--text-block-padding) - var(--spoiler-blur-padding));
+	inset: 0;
 	transition: backdrop-filter var(--spoiler-transition);
 	border-radius: 8px;
 }
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index 78aae6a..1e7d3a9 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -227,6 +227,10 @@ function parseScript(nodes) {
 	return HTMLtoParseArr(nodes.map(n => n.data).join("")); // re-parse for newly created html
 }
 
+function setSpoiler(nodes) {
+	return HTMLtoParseArr(`<span class="inner">` + nodes.map(n => n.data).join("") + "</span>");
+}
+
 HTMLElement.prototype.parse = function() {
 	if (this.classList.contains("parsed")) return; // ignore already parsed elements
 	var input = this.innerHTML; // get raw data from anki field
@@ -240,6 +244,7 @@ HTMLElement.prototype.parse = function() {
 	if (this.classList.contains("parse-tags")) nodes = parseTags(nodes);
 	if (this.classList.contains("parse-definitions")) nodes = parseDefinitions(nodes);
 	if (this.classList.contains("parse-script")) nodes = parseScript(nodes);
+	if (this.classList.contains("spoiler")) nodes = setSpoiler(nodes);
 
 	// join parsed text with unmodified html
 	var out = nodes.map(n => n.data).join("");