diff options
| -rw-r--r-- | anki-card-template/card.css | 12 | ||||
| -rw-r--r-- | anki-card-template/card.html | 2 | ||||
| -rw-r--r-- | anki-card-template/card.js | 22 |
3 files changed, 31 insertions, 5 deletions
diff --git a/anki-card-template/card.css b/anki-card-template/card.css index a904f38..0f76b82 100644 --- a/anki-card-template/card.css +++ b/anki-card-template/card.css @@ -119,12 +119,17 @@ body { margin: 2em 0.5em 0.5em 0.5em; max-width: unset; padding: 10px; + opacity: 60%; + transition: opacity 0.3s; } /* tag style */ -#card #back #tags .tag { background-color: hsl(calc(1deg * var(--tag-hue)), 70%, 75%); } +#card #back #tags .tag { background-color: hsl(calc(1deg * var(--tag-hue)), 60%, 20%); } .nightMode #card #back #tags .tag, .night_mode #card #back #tags .tag { background-color: hsl(calc(1deg * var(--tag-hue)), 65%, 80%); } +#card #back #tags .tag .inner { color: white; } +.nightMode #card #back #tags .tag .inner, +.night_mode #card #back #tags .tag .inner { color: black; } #card #back #tags .tag { --tag-hue: 0; padding: 4px; @@ -145,7 +150,6 @@ body { transition-duration: 0.3s; transition-property: opacity, transform; white-space: nowrap; - color: black; min-height: 0; min-width: 0; user-select: none; @@ -153,6 +157,10 @@ body { } /* tag hover/hold expand */ +#card #back #tags:active, +#card #back #tags:hover { + opacity: 1; +} #card #back #tags:active .tag .inner, #card #back #tags:hover .tag .inner { transform: translate(0%, 0%); diff --git a/anki-card-template/card.html b/anki-card-template/card.html index 63f900a..4c509e7 100644 --- a/anki-card-template/card.html +++ b/anki-card-template/card.html @@ -26,7 +26,7 @@ </div> <hr id="separator"> <div id="back"> -<span id="target-word-reading" class="parse parse-format parse-brackets foreign">予期しない【よ・き・しない】<span class="note">uk</span></span> + <span id="target-word-reading" class="parse parse-format parse-brackets foreign">予期しない【よ・き・しない】(uk)</span> <span id="target-word-translation" class="parse parse-format native">Unexpected</span> <span id="sentence-translation" class="parse parse-format native spoiler hidden">"Dictionary" has quit unexpectedly</span> <span id="tags" class="parse parse-tags">tag1 tag2 tag example-long-tag-here</span> diff --git a/anki-card-template/card.js b/anki-card-template/card.js index beffd78..7e44b2e 100644 --- a/anki-card-template/card.js +++ b/anki-card-template/card.js @@ -12,6 +12,8 @@ HTMLElement.prototype.parse = function() { var italic = false; // currently italic var mode = "normal"; // normal, kanji, reading var out = ""; // output html + var note_head = 0; + var note_tail = 0; var alwaysvisisble = false; // if furigana is always visible (on front of card) var kanji = ""; // current kanji @@ -52,10 +54,26 @@ HTMLElement.prototype.parse = function() { } if (this.classList.contains("parse-brackets")) { - if (i == 0) { out += `<span class="kanji">`; } + if (i == 0) { + var match = input.match(/\((.+?)\)/); + // display "(note)" before kanji + if (match) { + out += `<span class="note">${match[1]}</span>`; + note_head = match.index; + note_tail = note_head + match[0].length; + } + // start kanji reading + out += `<span class="kanji">`; + continue; + } + // ignore note if parsed + if (i == note_head) { i += note_tail - 1; continue; } + // reading open bracket if (input[i] == '\u3010') { out += `</span><span class="reading"><span class="bracket">${input[i]}</span><span class="syllable">`; continue; } - if (input[i] == '\u30fb') { out += `</span><span class="syllable-separator">${input[i]}</span><span class="syllable">`; continue; } + // reading closing bracket if (input[i] == '\u3011') { out += `</span><span class="bracket">${input[i]}</span></span>`; continue; } + // interpunct (syllable separator) + if (input[i] == '\u30fb') { out += `</span><span class="syllable-separator">${input[i]}</span><span class="syllable">`; continue; } } if (this.classList.contains("parse-tags")) { |