alex/yomichan
1
Fork 0
Code Releases Activity

Improve expression variables (#1453)

Browse Source 
* Improve how colors are used for expressions

* Add more color definitions
This commit is contained in:
toasted-nutbread 2021-02-27 17:29:59 -05:00 committed by GitHub
parent c4b2e83cb4
commit c7caea7203
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
ext/css/display.css
View File

@ -108,7 +108,12 @@
--expression-text-color: var(--text-color); --expression-text-color: var(--text-color);
--expression-text-color-popular: var(--accent-color); --expression-text-color-popular: var(--accent-color);
--expression-text-color-rare: var(--text-color-light4); --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); --expression-kanji-border-color: var(--dark-border-color);
--light-border-color: #eeeeee; --light-border-color: #eeeeee;
@ -173,7 +178,12 @@
--expression-text-color: var(--text-color); --expression-text-color: var(--text-color);
--expression-text-color-popular: var(--accent-color); --expression-text-color-popular: var(--accent-color);
--expression-text-color-rare: var(--text-color-light4); --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); --expression-kanji-border-color: var(--dark-border-color);
--light-border-color: #2f2f2f; --light-border-color: #2f2f2f;
@ -818,19 +828,31 @@ button.action-button[data-icon=source-term]::before {
/* Expressions */ /* 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 { .expression-list {
display: inline; display: inline;
margin-right: var(--expression-list-end-space); margin-right: var(--expression-list-end-space);
} }
.expression { .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; 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 { .expression-details {
display: inline; display: inline;
} }
@ -861,11 +883,11 @@ button.action-button[data-icon=source-term]::before {
margin-left: var(--expression-reading-space); margin-left: var(--expression-reading-space);
} }
.expression-text { .expression-text {
color: var(--expression-text-color); color: var(--expression-current-text-color);
font-size: var(--expression-font-size); font-size: var(--expression-font-size);
} }
.expression-reading { .expression-reading {
color: var(--expression-text-color); color: var(--expression-current-reading-text-color);
font-size: var(--expression-reading-font-size); font-size: var(--expression-reading-font-size);
} }
.expression-list>.expression:not(:last-of-type)>.expression-text-container>.expression-text-outer::after { .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); font-size: var(--expression-reading-font-size);
} }
.expression-text>ruby>rt { .expression-text>ruby>rt {
color: var(--expression-furigana-text-color); color: var(--expression-current-furigana-text-color);
} }
.entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-text, .expression-kanji-link {
.entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-reading, border-bottom: var(--expression-thin-border-size) dashed var(--expression-current-kanji-border-color);
.entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-kanji-link { color: var(--expression-current-kanji-text-color);
color: var(--expression-text-color-popular); text-decoration: none;
} cursor: pointer;
.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);
} }
.entry[data-expression-multi=true] .expression-list-details { .entry[data-expression-multi=true] .expression-list-details {
display: block; display: block;