From 5cbababc24cbcddb712eb894956b3643224dc056 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Thu, 26 Jan 2023 10:14:28 +0100 Subject: indicator stamp with white foreground color in dark mode --- anki-card-template/card.css | 38 ++++++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/anki-card-template/card.css b/anki-card-template/card.css index 574b560..693db90 100644 --- a/anki-card-template/card.css +++ b/anki-card-template/card.css @@ -18,6 +18,7 @@ --definition-marker-width: 2em; /* definition marker width (mobile vertical only) */ --definition-marker-height: 2px; /* definition marker height (mobile vertical only) */ --definition-marker-opacity: 50%; /* definition marker opacity (mobile vertical only) */ + --indicator-stroke-weight: 1.2pt; /* pitch accent / word type indicator stroke weight */ } .mobile #card { --text-block-padding: 0.5em; @@ -298,14 +299,20 @@ body { /* indicator (pitch accent or word type) */ .indicator { + position: relative; display: inline-block; padding: 1px 4px; margin: 0 0.25em; - border-radius: 4px; - border: 1.2pt solid currentColor; vertical-align: middle; + border: var(--indicator-stroke-weight) solid transparent; +} +.indicator::after { + content: ""; + position: absolute; + inset: calc(-1 * var(--indicator-stroke-weight)); + border-radius: 4px; + border: var(--indicator-stroke-weight) solid currentColor; } -#target-word-translation .indicator { opacity: 50%; } .indicator .script-japanese { font-size: 90%; vertical-align: middle; @@ -318,22 +325,29 @@ body { padding-left: 0; } .indicator .stamp { + position: relative; padding: 2px 4px; margin: 1px; margin-right: 3px; - border-radius: 2px; font-weight: bold; font-size: 90%; vertical-align: top; display: inline-block; } - -.indicator .stamp { - background-color: black; - color: white; -} -.night_mode .indicator .stamp { - background-color: white; - color: black; +.indicator .stamp::before { + content: ""; + position: absolute; + inset: 0; + border-radius: 2px; + z-index: -1; } +/* theme colors */ +.indicator .stamp { color: white; } +.indicator .stamp::before { background-color: black; } +.night_mode #target-word-translation .indicator .stamp::before { background-color: white; opacity: 40%; } + +/* grey color in definitions */ +#target-word-translation .indicator .stamp::before, +#target-word-translation .indicator > *:not(.stamp), +#target-word-translation .indicator::after { opacity: 50%; } -- cgit v1.2.3