update jp sentences template

templates/Japanese sentences/Recognition/back.html

@@ -3,8 +3,8 @@
 
     <div class="sent-center">
         <div class="jpsentence" lang="ja">
-            {{edit:furigana:SentFurigana}}
+            <div class="background">{{furigana:SentFurigana}}{{^SentFurigana}}{{furigana:SentKanji}}{{/SentFurigana}}</div>
-	    {{^SentFurigana}}{{edit:furigana:SentKanji}}{{/SentFurigana}}
+            <div class="overlay">{{edit:furigana:SentFurigana}}{{^SentFurigana}}{{edit:furigana:SentKanji}}{{/SentFurigana}}</div>
         </div>
         {{#SentEng}}
         <div class="ensentence" lang="en">{{hint:SentEng}}</div>
@@ -12,35 +12,39 @@
     </div>
 
     <div class="vocab">
-        {{VocabAudio}}{{SentAudio}}{{VocabPitchPattern}}
+        {{VocabAudio}}{{SentAudio}}
-	{{^VocabPitchPattern}}{{text:kana:VocabFurigana}}{{/VocabPitchPattern}}
+        <div class="reading">{{VocabPitchPattern}}{{^VocabPitchPattern}}{{text:kana:VocabFurigana}}{{/VocabPitchPattern}}</div>
-	{{#VocabPitchNum}}<span class="tags" id="pitchnum">{{VocabPitchNum}}</span>{{/VocabPitchNum}}
+        {{#VocabPitchNum}}<span class="tags" id="pitchnum">{{text:VocabPitchNum}}</span>{{/VocabPitchNum}}
-	{{#VocabKanji}}【{{text:kanji:VocabKanji}}】{{/VocabKanji}}
+        {{#VocabKanji}}<div class="target_word">{{text:kanji:VocabKanji}}</div>{{/VocabKanji}}
     </div>
 
     {{#VocabDef}}
     <div class="definitions">{{edit:furigana:VocabDef}}</div>
     {{/VocabDef}}
+
     {{#Notes}}
     <div class="notes">
         <div class="tags">Notes</div>
         <div>{{furigana:Notes}}</div>
     </div>
     {{/Notes}}
+
     {{#Image}}
     <div class="images">{{Image}}</div>
     {{/Image}}
 
-    <hr />
+    <hr>
 
     <footer>
-        {{#SentKanji}}<a title="Translate with SimplyTranslate"
+        {{#SentKanji}}
-            href="https://simplytranslate.org/?engine=google&text={{text:kanji:SentKanji}}&sl=ja&tl=en">Translate</a><a
+        <a href="https://simplytranslate.org/?engine=google&text={{text:kanji:SentKanji}}&sl=ja&tl=en" title="Translate with SimplyTranslate">Translate</a>
-            href="https://jisho.org/search?keyword={{text:kanji:SentKanji}}" title="Sentence on Jisho">Jisho</a><a
+        <a href="https://jisho.org/search?keyword={{text:kanji:SentKanji}}" title="Sentence on Jisho">Jisho</a>
-            href="https://www.google.co.jp/search?q={{text:kanji:SentKanji}}&tbm=isch"
+        <a href="https://www.google.co.jp/search?q={{text:kanji:SentKanji}}&tbm=isch" title="Search images">Images</a>
-            title="Search images">Images</a>{{/SentKanji}}{{#VocabKanji}}<a
+        {{/SentKanji}}
-            href="http://www.weblio.jp/content/{{text:VocabKanji}}" title="Vocab on Weblio">Weblio</a><a
+        {{#VocabKanji}}
-            href="https://wadoku.de/search/?q={{text:VocabKanji}}" title="Vocab on Wadoku">Wadoku</a>{{/VocabKanji}}
+        <a href="http://www.weblio.jp/content/{{text:VocabKanji}}" title="Vocab on Weblio">Weblio</a>
+        <a href="https://wadoku.de/search/?q={{text:VocabKanji}}" title="Vocab on Wadoku">Wadoku</a>
+        {{/VocabKanji}}
     </footer>
 </div> <!-- /wrap -->
 
@@ -51,6 +55,7 @@
             elem.innerText = "Reveal English translation";
         }
     }
+
     function removePitchBrackets() {
         const tags = document.getElementById("pitchnum");
         if (tags !== null) {

templates/Japanese sentences/Recognition/front.html

@@ -1,6 +1,6 @@
 <!--
-mpvacious cards, version 13.0
+mpvacious cards, version 14.0
-Sat Nov 27 11:10:04 AM UTC 2021
+Thu Oct 20 02:37:35 PM UTC 2022
 -->
 
 <div class="wrap">

templates/Japanese sentences/template.css

@@ -19,7 +19,8 @@
         font-weight: 600;
     }
 
-    b, strong {
+    b,
+    strong {
         font-weight: 600;
     }
 }
@@ -33,8 +34,7 @@
 .card {
     background-color: #fffaf0;
     color: #2a1b0a;
-    font-family: "Noto Serif", "Noto Serif CJK JP", Yu Mincho, "Liberation Serif", "Times New Roman", Times, Georgia,
+    font-family: "Noto Serif", "Noto Serif CJK JP", Yu Mincho, "Liberation Serif", "Times New Roman", Times, Georgia, Serif;
-        Serif;
     font-size: 24px;
     text-align: left;
     line-height: 1.4;
@@ -78,7 +78,7 @@
 }
 
 hr {
-    margin: 2px 0;
+    margin: 8px 0;
     clear: both;
     border: 0;
     border-top: 1px solid #c9bcbc;
@@ -184,13 +184,13 @@ div.ensentence>a.hint:hover {
     border-radius: 3px;
     font-size: 12px;
     line-height: 14px;
+    user-select: none;
 }
 
 /* AnkiDroid replay button */
 
 .replaybutton {
     margin: 0;
-    margin-right: 3px;
     text-decoration: none;
 }
 
@@ -214,11 +214,14 @@ a.replay-button {
     top: -0.125em;
     position: relative;
     margin: 0;
+    user-select: none;
+    cursor: pointer;
 }
 
 a.replay-button svg {
     height: 1em;
     width: 1em;
+    user-select: none;
 }
 
 a.replay-button svg path {
@@ -233,29 +236,47 @@ a.replay-button svg circle {
 
 footer {
     font-size: 16px;
+    word-break: keep-all;
     text-align: center;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
 }
 
 footer>a {
     text-decoration: none;
+    cursor: pointer;
 }
 
-footer>a:after {
+footer>a:not(:last-child)::after {
     content: "·";
     color: brown;
     display: inline-block;
-    width: 6px;
+    padding: 0 2px;
-}
-
-footer>a:last-child:after {
-    content: "";
-    width: 0;
 }
 
 /* Vocab */
 
 .vocab {
+    display: flex;
+    flex-flow: row wrap;
     margin-top: 16px;
+    align-items: center;
+    gap: 5px;
+}
+
+.vocab > .reading,
+.vocab > .target_word {
+    word-break: keep-all;
+}
+
+.vocab > .target_word::before {
+    content: "【";
+}
+
+.vocab > .target_word::after {
+    content: "】";
 }
 
 .vocab div {
@@ -266,11 +287,12 @@ footer>a:last-child:after {
     display: none;
 }
 
-.vocab>.tags {
+.vocab .tags {
+    align-self: flex-start;
     vertical-align: top;
 }
 
-.notes>.tags {
+.notes .tags {
     vertical-align: bottom;
 }
 
@@ -287,9 +309,12 @@ footer>a:last-child:after {
     grid-auto-columns: minmax(100px, 1fr);
     grid-auto-rows: minmax(100px, auto);
 }
-.images br, .images > * {
+
+.images br,
+.images>* {
     display: none;
 }
+
 .images img {
     display: block;
     border-radius: 4px;
@@ -437,8 +462,22 @@ ol {
     background-color: rgba(0, 0, 0, 0.20);
 }
 
-/* Don't select furigana */
+/* Fix: Don't select furigana */
 
-.jpsentence ruby rt {
+ruby rt {
     user-select: none;
 }
+.jpsentence {
+    position: relative;
+}
+.jpsentence>.overlay {
+    position: absolute;
+    inset: 0;
+}
+.jpsentence>.background,
+.jpsentence>.overlay ruby rt {
+    visibility: hidden;
+}
+.jpsentence>.background ruby rt {
+    visibility: visible;
+}