From 0456e3813e84378f2bb8cece6ce3d0b9a9bb7d29 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Wed, 25 Jan 2023 18:53:15 +0100
Subject: fix sentence blur transition

---
 anki-card-template/card.css | 23 ++++++++++++++---------
 anki-card-template/card.js  |  2 +-
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 627c4e3..5e1f87d 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -84,21 +84,26 @@ body {
 
 /* blur spoiler */
 .spoiler { cursor: pointer; }
-.spoiler .inner {
-	display: inline-block;
+.spoiler .outer {
 	margin: 0 auto;
+	display: inline-block;
 	position: relative;
+	border-radius: 8px;
+	overflow: hidden;
 	padding: var(--spoiler-blur-padding);
 }
-.spoiler.hidden .inner::after { backdrop-filter: blur(1rem) contrast(80%); }
-.spoiler.visible .inner::after { backdrop-filter: blur(0rem); }
-.spoiler .inner::after {
+.spoiler .outer::after {
 	content: "";
 	position: absolute;
 	inset: 0;
-	transition: backdrop-filter var(--spoiler-transition);
-	border-radius: 8px;
 }
+.spoiler .inner { transition: filter var(--spoiler-transition); }
+.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.visible .outer::after { backdrop-filter: contrast(100%); }
+
 
 /* fill display horizontally or vertically */
 #card.horizontal-layout { width: 100vw; }
@@ -285,7 +290,7 @@ body {
 	display: inline-block;
 	padding: 1px 4px;
 	margin: 0 0.25em;
-	border-radius: 3px;
-	border: 1px solid currentColor;
+	border-radius: 4px;
+	border: 1.2pt solid currentColor;
 }
 #target-word-translation .indicator { opacity: 50%; }
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index 2b04ca3..b538664 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -262,7 +262,7 @@ function parseScript(nodes) {
 }
 
 function setSpoiler(nodes) {
-	return HTMLtoParseArr(`<span class="inner">` + nodes.map(n => n.data).join("") + "</span>");
+	return HTMLtoParseArr(`<span class="outer"><span class="inner">` + nodes.map(n => n.data).join("") + "</span></span>");
 }
 
 HTMLElement.prototype.parse = function() {
-- 
cgit v1.2.3