aboutsummaryrefslogtreecommitdiff
path: root/anki-card-template
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2023-01-25 18:03:05 +0100
committerlonkaars <loek@pipeframe.xyz>2023-01-25 18:03:05 +0100
commitcc4511ffe8cdb40133dd9488c7cd4f700097d166 (patch)
tree5697e3328a6b31a02becc2a0dbf7178aabd25479 /anki-card-template
parent64672694c35d3bd2358ae7412151f70b8740897c (diff)
fix janky blur box definition
Diffstat (limited to 'anki-card-template')
-rw-r--r--anki-card-template/card.css15
-rw-r--r--anki-card-template/card.js5
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("");