From ce3bc60a990e2aa7f97683ac3f34c2daff5c226d Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sat, 4 Feb 2023 13:28:13 +0100 Subject: pitch accent indicator css tweaks + note alignment fix --- anki-card-template/card.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'anki-card-template') diff --git a/anki-card-template/card.css b/anki-card-template/card.css index 502b677..be82248 100644 --- a/anki-card-template/card.css +++ b/anki-card-template/card.css @@ -316,7 +316,6 @@ rt { user-select: none; } .subtile .script-japanese { font-style: normal; } /* italic japanese looks weird */ /* word note style */ -#card #target-word-reading .kanji { position: relative; } #card #target-word-reading .note { line-height: 0; margin: 0; @@ -327,6 +326,7 @@ rt { user-select: none; } margin: 0; margin-bottom: 0.5em; } +.mobile #card.vertical-layout #target-word-reading .kanji { display: flex; } /* definitions */ #card #target-word-translation .definitions { @@ -398,11 +398,16 @@ rt { user-select: none; } /* indicator (pitch accent pattern) */ #target-word-reading .indicator::after { border: none; } #target-word-reading .indicator { + --pitch-accent-padding: 4px; position: relative; font-size: 80%; font-weight: bold; + width: calc(1em + var(--pitch-accent-padding)); + height: calc(1em + var(--pitch-accent-padding)); + display: inline-flex; + align-items: center; + justify-content: center; } -#target-word-reading .indicator .content { margin: 1px 6px; } #target-word-reading .indicator::before { border-radius: 6px; content: ""; @@ -530,7 +535,6 @@ rt { user-select: none; } .mobile #card.vertical-layout #back #target-word-reading:hover .kanji .extra-writings .writing::after { opacity: 20%; } .mobile #card.vertical-layout #back .kanji, .mobile #card.vertical-layout #back .kanji .extra-writings { flex-direction: column; } -.mobile #card.vertical-layout #back .kanji { padding-top: 0.5em; } .mobile #card.vertical-layout #back .kanji .extra-writings { padding: 0.5em 0; } .mobile #card.vertical-layout #back #target-word-reading:hover .kanji .extra-writings { padding: 0; } .mobile #card.vertical-layout #back .kanji .extra-writings .writing { grid-template-rows: 0fr; } -- cgit v1.2.3