diff options
Diffstat (limited to 'anki-card-template/card.css')
| -rw-r--r-- | anki-card-template/card.css | 64 |
1 files changed, 63 insertions, 1 deletions
diff --git a/anki-card-template/card.css b/anki-card-template/card.css index 24c6f0a..2c5309a 100644 --- a/anki-card-template/card.css +++ b/anki-card-template/card.css @@ -33,7 +33,8 @@ body { /* separator color */ #separator { background-color: black; } -.nightMode #separator { background-color: white; } +.nightMode #separator, +.night_mode #separator { background-color: white; } /* separator size */ #card.horizontal-layout #separator { height: 10px; } @@ -105,3 +106,64 @@ body { /* display kana reading below kanji in vertical layout */ #card.vertical-layout #target-word-reading .reading { display: block; } +/* tag container */ +#card #back #tags { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 4px; + margin: 2em 0.5em 0.5em 0.5em; + max-width: unset; + padding: 10px; +} + +/* tag style */ +#card #back #tags .tag { background-color: hsl(calc(1deg * var(--tag-hue)), 70%, 75%); } +.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 { + --tag-hue: 0; + padding: 4px; + border-radius: 999px; + margin: 0; + transition-property: padding, grid-template-rows, grid-template-columns; + transition-duration: 0.3s; + overflow: hidden; + position: relative; + display: grid; + grid-template-rows: 0fr; + grid-template-columns: 0fr; +} +#card #back #tags .tag .inner { + position: relative; + opacity: 0; + transform: translate(-50%, -50%); + transition-duration: 0.3s; + transition-property: opacity, transform; + white-space: nowrap; + color: black; + min-height: 0; + min-width: 0; + user-select: none; + cursor: default; +} + +/* tag hover/hold expand */ +#card #back #tags:active .tag .inner, +#card #back #tags:hover .tag .inner { + transform: translate(0%, 0%); + opacity: 1; +} +#card #back #tags:active .tag, +#card #back #tags:hover .tag { + grid-template-rows: 1fr; + grid-template-columns: 1fr; + padding: 4px 12px; +} + +/* display tags vertically on mobile */ +.mobile #card.vertical-layout #back #tags { flex-direction: column; } +.mobile #card.vertical-layout #back #tags .tag { max-width: max-content; } + +.parse.empty { display: none !important; } |