indicator stamp with white foreground color in dark mode2.1.1

1 files 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%; }