diff options
| author | lonkaars <loek@pipeframe.xyz> | 2023-02-23 16:12:03 +0100 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2023-02-23 16:12:03 +0100 |
| commit | 6ad84372eec1d6a22f09332a920b68b4a2c7bc54 (patch) | |
| tree | ca84636d321c87e80618a32dbf51737a35630b3b | |
| parent | ce3bc60a990e2aa7f97683ac3f34c2daff5c226d (diff) | |
custom tap highlight effect for mobile
| -rw-r--r-- | anki-card-template/card.css | 11 |
1 files changed, 11 insertions, 0 deletions
diff --git a/anki-card-template/card.css b/anki-card-template/card.css index be82248..6efacf3 100644 --- a/anki-card-template/card.css +++ b/anki-card-template/card.css @@ -24,6 +24,7 @@ --indicator-opacity: 50%; /* opacity of indicators in translations (word type) */ --pitch-accent-opacity: 70%; /* opacity of pitch accent indicator in reading field */ --reading-expand-transition: calc(300ms * var(--global-transition-scale)); /* hover expand transition duration for multiple readings */ + --active-transition: calc(80ms * var(--global-transition-scale)); } .mobile #card { --text-block-padding: 0.5em; @@ -547,3 +548,13 @@ rt { user-select: none; } #card.horizontal-layout #target-word-reading > * { vertical-align: middle; } + +/* mobile tap highlight */ +.mobile #card * { -webkit-tap-highlight-color: transparent; } +.mobile #card #sentence-translation .outer { + box-shadow: 0 0 0 0px currentColor; + transition-property: box-shadow; + transition-duration: var(--active-transition); +} +.mobile #card #sentence-translation .outer:active { box-shadow: 0 0 0 2px currentColor; } + |