aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2023-01-26 10:14:28 +0100
committerlonkaars <loek@pipeframe.xyz>2023-01-26 10:14:28 +0100
commit5cbababc24cbcddb712eb894956b3643224dc056 (patch)
treefc63d995c9fafb9fb77752ef1c3622a874e5ea69
parent239950485636c3b0490b8212384564303a785695 (diff)
indicator stamp with white foreground color in dark mode2.1.1
-rw-r--r--anki-card-template/card.css38
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%; }