aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--anki-card-template/card.css94
1 files changed, 79 insertions, 15 deletions
diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 885b0a7..0fc84ad 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -1,8 +1,8 @@
/* global parameters */
#card {
--max-column-width: 30em; /* max column width for text (~30 kana / ~50 latin characters) */
- --spoiler-transition: 300ms; /* spoiler hide/unhide transition duration */
- --tag-transition: 300ms; /* tag hover/tap expand transition duration */
+ --spoiler-transition: calc(300ms * var(--global-transition-scale)); /* spoiler hide/unhide transition duration */
+ --tag-transition: calc(300ms * var(--global-transition-scale)); /* tag hover/tap expand transition duration */
--separator-opacity: 20%; /* opacity of the answer separator */
--separator-weight: 2px; /* layout-dependent width/height of separator */
--spoiler-blur-padding: 4px; /* padding for the spoiler blur box */
@@ -20,6 +20,9 @@
--definition-marker-opacity: 50%; /* definition marker opacity (mobile vertical only) */
--indicator-stroke-weight: 1px; /* pitch accent / word type indicator stroke weight */
--sentence-highlight-contrast: 80%; /* opacity of non-highlighted text in sentence */
+ --global-transition-scale: 1.0; /* transition duration multiplier */
+ --indicator-opacity: 50%; /* opacity of indicators in translations (word type) */
+ --pitch-accent-opacity: 70%; /* opacity of pitch accent indicator in reading field */
}
.mobile #card {
--text-block-padding: 0.5em;
@@ -28,6 +31,57 @@
--indicator-stroke-weight: 1.2pt;
}
+/* no transitions (accessibility) */
+@media (prefers-reduced-motion) {
+ #card {
+ --global-transition-scale: 0;
+ }
+}
+/* high-contrast (accessibility) */
+@media (prefers-contrast: more) {
+ .spoiler.hidden .inner { opacity: 100% !important; }
+ .spoiler.hidden .outer::after { opacity: 40% !important; }
+
+ .spoiler:not(.inline) .outer,
+ .spoiler.inline { border: 2px solid currentColor; }
+ .spoiler.inline { margin: -2px; }
+
+ .subtile::before { content: "("; }
+ .subtile::after { content: ")"; }
+
+ #card {
+ --subtile-opacity: 100%;
+ --separator-opacity: 100%;
+ --separator-weight: 4px;
+ --indicator-opacity: 100%;
+ --sentence-highlight-contrast: 100%;
+ --pitch-accent-opacity: 100%;
+ }
+ .night_mode #target-word-reading .indicator::before {
+ background-color: transparent !important;
+ box-shadow: inset 0 0 0 2px currentColor;
+ opacity: 100% !important;
+ }
+
+ #card #back #tags { opacity: 1 !important; }
+ #tags .tag { background-color: currentColor !important; }
+ #tags .tag .inner { padding-left: 0; }
+ #card #back #tags:active .tag .inner,
+ #card #back #tags:hover .tag .inner { padding-left: 1em; }
+ #tags .tag .inner:before { background: var(--tag-color-dark); }
+ .night_mode #tags .tag .inner:before { background: var(--tag-color-light); }
+ #tags .tag .inner:before {
+ position: absolute;
+ left: 0.25em;
+ top: 50%;
+ content: "";
+ width: 1em;
+ height: 1em;
+ border-radius: 99999px;
+ transform: translate(-50%,-50%);
+ }
+}
+
/* default fonts */
body {
font-family: "Inter", "Hiragino Kaku Gothic ProN", sans-serif;
@@ -98,13 +152,18 @@ body {
content: "";
position: absolute;
inset: 0;
+ background-color: gray;
}
-.spoiler .inner { transition: filter var(--spoiler-transition); }
-.spoiler.hidden .inner { filter: blur(0.6rem); }
-.spoiler.visible .inner { filter: blur(0rem); }
-.spoiler .outer::after { transition: backdrop-filter var(--spoiler-transition); }
-.spoiler.hidden .outer::after { backdrop-filter: contrast(70%); }
-.spoiler.visible .outer::after { backdrop-filter: contrast(100%); }
+.spoiler .inner {
+ transition-property: filter, opacity;
+ transition-duration: var(--spoiler-transition);
+}
+.spoiler.hidden .inner { filter: blur(0.6rem); opacity: 75%; }
+.spoiler.visible .inner { filter: blur(0rem); opacity: 100%; }
+.spoiler .outer::after { transition: opacity var(--spoiler-transition); }
+.spoiler.hidden .outer::after { opacity: 25%; }
+.spoiler.visible .outer::after { opacity: 0%; }
+
/* inline spoilers */
.spoiler.inline {
overflow: hidden;
@@ -117,7 +176,6 @@ body {
display: inline;
}
-
/* fill display horizontally or vertically */
#card.horizontal-layout { width: 100vw; }
#card.vertical-layout { height: 100vh; }
@@ -185,8 +243,12 @@ body {
}
/* tag style */
-#card #back #tags .tag { background-color: hsl(calc(1deg * var(--tag-hue)), 60%, 20%); }
-.night_mode #card #back #tags .tag { background-color: hsl(calc(1deg * var(--tag-hue)), 65%, 80%); }
+#card #back #tags .tag {
+ --tag-color-light: hsl(calc(1deg * var(--tag-hue)), 60%, 20%);
+ --tag-color-dark: hsl(calc(1deg * var(--tag-hue)), 65%, 80%);
+}
+#card #back #tags .tag { background-color: var(--tag-color-light); }
+.night_mode #card #back #tags .tag { background-color: var(--tag-color-dark); }
#card #back #tags .tag .inner { color: white; }
.night_mode #card #back #tags .tag .inner { color: black; }
#card #back #tags .tag {
@@ -209,7 +271,7 @@ body {
left: 50%;
transform: translate(-50%, 0%);
transition-duration: var(--tag-transition);
- transition-property: opacity, transform;
+ transition-property: opacity, padding;
white-space: nowrap;
min-height: 0;
min-width: 0;
@@ -352,7 +414,7 @@ body {
z-index: -1;
position: absolute;
inset: 0;
- opacity: 70%;
+ opacity: var(--pitch-accent-opacity);
}
/* theme colors */
@@ -361,9 +423,11 @@ body {
.indicator .stamp::before,
#target-word-reading .indicator::before { background-color: black; }
.night_mode #target-word-translation .indicator .stamp::before,
-.night_mode #target-word-reading .indicator::before { background-color: white; opacity: 40%; }
+.night_mode #target-word-reading .indicator::before {
+ background-color: white; opacity: calc(0.45 * var(--pitch-accent-opacity));
+}
/* grey color in definitions */
#target-word-translation .indicator .stamp::before,
#target-word-translation .indicator > *:not(.stamp),
-#target-word-translation .indicator::after { opacity: 50%; }
+#target-word-translation .indicator::after { opacity: var(--indicator-opacity); }