summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ext/css/display.css58
1 files changed, 38 insertions, 20 deletions
diff --git a/ext/css/display.css b/ext/css/display.css
index 63213103..0b1c5f93 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -108,7 +108,12 @@
--expression-text-color: var(--text-color);
--expression-text-color-popular: var(--accent-color);
--expression-text-color-rare: var(--text-color-light4);
- --expression-furigana-text-color: inherit;
+ --expression-furigana-text-color: var(--expression-text-color);
+ --expression-furigana-text-color-popular: var(--expression-text-color-popular);
+ --expression-furigana-text-color-rare: var(--expression-text-color-rare);
+ --expression-reading-text-color: var(--expression-furigana-text-color);
+ --expression-reading-text-color-popular: var(--expression-furigana-text-color-popular);
+ --expression-reading-text-color-rare: var(--expression-furigana-text-color-rare);
--expression-kanji-border-color: var(--dark-border-color);
--light-border-color: #eeeeee;
@@ -173,7 +178,12 @@
--expression-text-color: var(--text-color);
--expression-text-color-popular: var(--accent-color);
--expression-text-color-rare: var(--text-color-light4);
- --expression-furigana-text-color: inherit;
+ --expression-furigana-text-color: var(--expression-text-color);
+ --expression-furigana-text-color-popular: var(--expression-text-color-popular);
+ --expression-furigana-text-color-rare: var(--expression-text-color-rare);
+ --expression-reading-text-color: var(--expression-furigana-text-color);
+ --expression-reading-text-color-popular: var(--expression-furigana-text-color-popular);
+ --expression-reading-text-color-rare: var(--expression-furigana-text-color-rare);
--expression-kanji-border-color: var(--dark-border-color);
--light-border-color: #2f2f2f;
@@ -818,19 +828,31 @@ button.action-button[data-icon=source-term]::before {
/* Expressions */
-.expression-kanji-link {
- border-bottom: var(--expression-thin-border-size) dashed var(--expression-kanji-border-color);
- color: var(--expression-text-color);
- text-decoration: none;
- cursor: pointer;
-}
.expression-list {
display: inline;
margin-right: var(--expression-list-end-space);
}
.expression {
+ --expression-current-text-color: var(--expression-text-color);
+ --expression-current-kanji-text-color: var(--expression-current-text-color);
+ --expression-current-kanji-border-color: var(--expression-kanji-border-color);
+ --expression-current-reading-text-color: var(--expression-reading-text-color);
+ --expression-current-furigana-text-color: var(--expression-furigana-text-color);
+
display: inline-block;
}
+.entry[data-expression-multi=true] .expression[data-frequency=popular] {
+ --expression-current-text-color: var(--expression-text-color-popular);
+ --expression-current-kanji-text-color: var(--expression-current-text-color-popular);
+ --expression-current-reading-text-color: var(--expression-reading-text-color-popular);
+ --expression-current-furigana-text-color: var(--expression-furigana-text-color-popular);
+}
+.entry[data-expression-multi=true] .expression[data-frequency=rare] {
+ --expression-current-text-color: var(--expression-text-color-rare);
+ --expression-current-kanji-text-color: var(--expression-current-text-color-rare);
+ --expression-current-reading-text-color: var(--expression-reading-text-color-rare);
+ --expression-current-furigana-text-color: var(--expression-furigana-text-color-rare);
+}
.expression-details {
display: inline;
}
@@ -861,11 +883,11 @@ button.action-button[data-icon=source-term]::before {
margin-left: var(--expression-reading-space);
}
.expression-text {
- color: var(--expression-text-color);
+ color: var(--expression-current-text-color);
font-size: var(--expression-font-size);
}
.expression-reading {
- color: var(--expression-text-color);
+ color: var(--expression-current-reading-text-color);
font-size: var(--expression-reading-font-size);
}
.expression-list>.expression:not(:last-of-type)>.expression-text-container>.expression-text-outer::after {
@@ -877,17 +899,13 @@ button.action-button[data-icon=source-term]::before {
font-size: var(--expression-reading-font-size);
}
.expression-text>ruby>rt {
- color: var(--expression-furigana-text-color);
-}
-.entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-text,
-.entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-reading,
-.entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-kanji-link {
- color: var(--expression-text-color-popular);
+ color: var(--expression-current-furigana-text-color);
}
-.entry[data-expression-multi=true] .expression[data-frequency=rare] .expression-text,
-.entry[data-expression-multi=true] .expression[data-frequency=rare] .expression-reading,
-.entry[data-expression-multi=true] .expression[data-frequency=rare] .expression-kanji-link {
- color: var(--expression-text-color-rare);
+.expression-kanji-link {
+ border-bottom: var(--expression-thin-border-size) dashed var(--expression-current-kanji-border-color);
+ color: var(--expression-current-kanji-text-color);
+ text-decoration: none;
+ cursor: pointer;
}
.entry[data-expression-multi=true] .expression-list-details {
display: block;