aboutsummaryrefslogtreecommitdiff
path: root/ext/css/display.css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-02-27 14:04:52 -0500
committerGitHub <noreply@github.com>2021-02-27 14:04:52 -0500
commit1a7c2641652d6da3fa01a82091731aded26e0dc9 (patch)
tree9993af1e9e7976a082603feb0ac488aa1c9d2a63 /ext/css/display.css
parent9e7a76a1f121ad3622f9efd2867684560a9113db (diff)
Add standalone reading (#1448)
* Add option * Update display * Hide redundant readings * Improve label and description
Diffstat (limited to 'ext/css/display.css')
-rw-r--r--ext/css/display.css54
1 files changed, 49 insertions, 5 deletions
diff --git a/ext/css/display.css b/ext/css/display.css
index 02e33ad9..7c5be5f0 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -25,6 +25,8 @@
--disambiguation-separator: ', ';
--disambiguation-reading-separator: ':';
+ --expression-separator: '\3001';
+
/* Layout */
--font-size-no-units: 14;
--font-size: calc(1px * var(--font-size-no-units));
@@ -32,6 +34,9 @@
--query-parser-font-size: calc(1em * var(--query-parser-font-size-no-units));
--expression-font-size-no-units: 2;
--expression-font-size: calc(1em * var(--expression-font-size-no-units));
+ --expression-reading-font-size-scale: 0.75;
+ --expression-reading-font-size: calc(var(--expression-reading-font-size-scale) * var(--expression-font-size));
+ --expression-reading-space: 0.5em;
--h2-font-size-no-units: 1.25;
--h2-font-size: calc(1em * var(--h2-font-size-no-units));
@@ -790,18 +795,41 @@ button.action-button[data-icon=source-term]::before {
}
.term-expression-text-container {
display: inline-block;
+ margin-left: calc(-1 * var(--expression-reading-space));
+}
+.term-expression-text-outer {
+ display: inline-block;
+ position: relative;
+ margin-left: var(--expression-reading-space);
+}
+.term-expression-reading-outer {
+ display: none;
+ position: relative;
+ margin-left: var(--expression-reading-space);
}
.term-expression-text {
color: var(--kanji-text-color);
font-size: var(--expression-font-size);
- display: inline-block;
- position: relative;
+}
+.term-expression-reading {
+ color: var(--kanji-text-color);
+ font-size: var(--expression-reading-font-size);
+}
+.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-text-outer::after {
+ content: var(--expression-separator);
+ font-size: var(--expression-font-size);
+}
+.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-reading-outer::after {
+ content: var(--expression-separator);
+ font-size: var(--expression-reading-font-size);
}
.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .term-expression-text,
+.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .term-expression-reading,
.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .kanji-link {
color: var(--kanji-popular-text-color);
}
.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .term-expression-text,
+.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .term-expression-reading,
.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .kanji-link {
color: var(--kanji-rare-text-color);
}
@@ -842,9 +870,6 @@ button.action-button[data-icon=source-term]::before {
.term-expression-details>.frequencies {
display: none;
}
-.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-text::after {
- content: '\3001';
-}
.term-details {
display: inline;
}
@@ -854,6 +879,25 @@ button.action-button[data-icon=source-term]::before {
.entry[data-expression-multi=true] .term-details {
display: block;
}
+:root[data-term-display-mode=ruby-and-reading] .term-expression-text-outer::after,
+:root[data-term-display-mode=term-and-reading] .term-expression-text-outer::after {
+ display: none;
+}
+:root[data-term-display-mode=ruby-and-reading] .term-expression-reading-outer,
+:root[data-term-display-mode=term-and-reading] .term-expression-reading-outer {
+ display: inline-block;
+}
+:root[data-term-display-mode=ruby-and-reading] .term-expression[data-reading-is-same=true] .term-expression-text-outer::after,
+:root[data-term-display-mode=term-and-reading] .term-expression[data-reading-is-same=true] .term-expression-text-outer::after {
+ display: inline-block;
+}
+:root[data-term-display-mode=ruby-and-reading] .term-expression[data-reading-is-same=true] .term-expression-reading-outer,
+:root[data-term-display-mode=term-and-reading] .term-expression[data-reading-is-same=true] .term-expression-reading-outer {
+ display: none;
+}
+:root[data-term-display-mode=term-and-reading] .term-expression-text>ruby>rt {
+ display: none;
+}
/* Entry indicator */