diff options
author | lonkaars <loek@pipeframe.xyz> | 2023-02-01 16:44:14 +0100 |
---|---|---|
committer | lonkaars <loek@pipeframe.xyz> | 2023-02-01 16:44:14 +0100 |
commit | c1e3683f87e865a43db9e0522f54bb0d2b763198 (patch) | |
tree | bdb130be8ae380eed1d78d601ddf0e24785ec55a /anki-card-template/card.css | |
parent | 6e6c93e4eed7ba9debcb84ad2f309f73bcd6cc1f (diff) |
multiple readings + css cleanup done3.3.0
Diffstat (limited to 'anki-card-template/card.css')
-rw-r--r-- | anki-card-template/card.css | 20 |
1 files changed, 8 insertions, 12 deletions
diff --git a/anki-card-template/card.css b/anki-card-template/card.css index 2d86e39..2f6edaa 100644 --- a/anki-card-template/card.css +++ b/anki-card-template/card.css @@ -501,45 +501,41 @@ body { opacity: 0; border-radius: 8px; } - -.extra-writings { - position: relative; - display: inline-flex; -} .extra-count { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } - #back .kanji .extra-writings { + position: relative; + display: inline-flex; border-radius: 8px; padding: 0 20px; } +/* multiple writings hover/hold expand */ #back #target-word-reading:hover .kanji .extra-writings .writing, #back #target-word-reading:hover .kanji .extra-writings .writing-separator { grid-template-columns: 1fr; } #back #target-word-reading:hover .kanji .extra-writings .extra-count { opacity: 0; } #back #target-word-reading:hover .kanji .extra-writings .writing .inner, #back #target-word-reading:hover .kanji .extra-writings .writing-separator .inner { opacity: 1; } #back #target-word-reading:hover .kanji .extra-writings { padding: 0; } -#back #target-word-reading:hover .kanji .extra-writings { gap: var(--writing-margin); } #back #target-word-reading:hover .kanji .extra-writings::after { width: 100%; height: 100%; opacity: 0; } +/* multiple writings as tags (vertical mobile layout only) */ .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; - padding: 0.5em 0; -} +.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; } .mobile #card.vertical-layout #back #target-word-reading:hover .kanji .extra-writings .writing { grid-template-rows: 1fr; } - .mobile #card.vertical-layout #back .kanji .writing-separator { display: none; } .mobile #card.vertical-layout #back #target-word-reading:hover .kanji .extra-writings .writing { padding: 0 var(--writing-padding); } +.mobile #card.vertical-layout #back #target-word-reading:hover .kanji .extra-writings { gap: var(--writing-margin); } |