fix "noaudio" detection on mobile and add tap-highlight to play button on mobile3.5.2

2 files changed, 19 insertions, 10 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 1c7444e..a112218 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -24,7 +24,7 @@
 	--indicator-opacity: 50%; /* opacity of indicators in translations (word type) */
 	--pitch-accent-opacity: 70%; /* opacity of pitch accent indicator in reading field */
 	--reading-expand-transition: calc(300ms * var(--global-transition-scale)); /* hover expand transition duration for multiple readings */
-	--active-transition: calc(80ms * var(--global-transition-scale));
+	--active-detransition: calc(150ms * var(--global-transition-scale));
 
 	/* colors */
 	--fg: canvastext;
@@ -558,12 +558,17 @@ rt { user-select: none; }
 
 /* mobile tap highlight */
 .mobile #card * { -webkit-tap-highlight-color: transparent; }
-.mobile #card #sentence-translation .outer {
+.mobile #card #sentence-translation .outer,
+.mobile #card #audio svg {
 	box-shadow: 0 0 0 0px currentColor;
 	transition-property: box-shadow;
-	transition-duration: var(--active-transition);
+	transition-duration: var(--active-detransition);
+}
+.mobile #card #sentence-translation .outer:active,
+.mobile #card #audio:active svg {
+	box-shadow: 0 0 0 2px currentColor;
+	transition-duration: 0ms;
 }
-.mobile #card #sentence-translation .outer:active { box-shadow: 0 0 0 2px currentColor; }
 
 #card { color-scheme: light; }
 .night_mode #card { color-scheme: dark; }
@@ -598,6 +603,7 @@ rt { user-select: none; }
 .replay-button svg {
 	width: 24px !important;
 	height: 24px !important;
+	border-radius: 25%; /* display rounded tap highlight on mobile */
 }
 
 /* maximize size of touch target (for mobile) */
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index 193e7fe..a98e2fe 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -419,14 +419,17 @@ function run() {
 		document.getElementById("sentence-translation").classList.add("visible");
 	}
 
-	// replace ugly anki play icon with material design icon
-	for (var el of document.querySelectorAll("#audio .replay-button")) {
-		el.innerHTML = document.getElementById("play-icon").outerHTML;
-		el.children[0].classList.remove("display-none");
-	}
 
 	var audio = document.getElementById("audio");
-	if (audio.innerText.trim() == "noaudio") audio.classList.add("display-none");
+	if (audio != null && audio.innerHTML == "noaudio") {
+		audio.classList.add("display-none");
+	} else {
+		// replace ugly anki play icon with material design icon
+		for (var el of document.querySelectorAll("#audio .replay-button")) {
+			el.innerHTML = document.getElementById("play-icon").outerHTML;
+			el.children[0].classList.remove("display-none");
+		}
+	}
 
 	layout();
 }