alex/yomichan
1
Fork 0
Code Releases Activity

Use CSS variables for themes (#528)

Browse Source 
* Update formatting

* Merge default tag color with category-less tags

* Use CSS variables for colors

* Add dark theme colors

* Move color variables into display.css

* Remove old stylesheets

* Update headings

* Bump minimum Firefox version to support CSS var()

* Revert popular kanji text color
This commit is contained in:
toasted-nutbread 2020-05-10 14:07:25 -04:00 committed by GitHub
parent 5752b23a8e
commit 9742d5662b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 167 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ext/bg/search.html
View File

@ -14,8 +14,6 @@
<link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css"> <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="/mixed/css/display.css"> <link rel="stylesheet" type="text/css" href="/mixed/css/display.css">
<link rel="stylesheet" type="text/css" href="/mixed/css/display-default.css" data-yomichan-theme-name="default">
<link rel="stylesheet alternate" type="text/css" href="/mixed/css/display-dark.css" data-yomichan-theme-name="dark">
</head> </head>
<body> <body>
<div class="container"> <div class="container">

2
ext/fg/float.html
View File

@ -12,8 +12,6 @@
<link rel="icon" type="image/png" href="/mixed/img/icon64.png" sizes="64x64"> <link rel="icon" type="image/png" href="/mixed/img/icon64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/mixed/img/icon128.png" sizes="128x128"> <link rel="icon" type="image/png" href="/mixed/img/icon128.png" sizes="128x128">
<link rel="stylesheet" href="/mixed/css/display.css"> <link rel="stylesheet" href="/mixed/css/display.css">
<link rel="stylesheet" type="text/css" href="/mixed/css/display-default.css" data-yomichan-theme-name="default">
<link rel="stylesheet alternate" type="text/css" href="/mixed/css/display-dark.css" data-yomichan-theme-name="dark">
</head> </head>
<body> <body>
<div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div> <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>

2
ext/manifest.json
View File

@ -88,7 +88,7 @@
"applications": { "applications": {
"gecko": { "gecko": {
"id": "alex@foosoft.net", "id": "alex@foosoft.net",
"strict_min_version": "53.0" "strict_min_version": "55.0"
} }
} }
} }

103
ext/mixed/css/display-dark.css
View File

@ -1,103 +0,0 @@
/*
* Copyright (C) 2019-2020 Yomichan Authors
*
* This program is free software: you can redistribute it and/or modify
* it under the entrys of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
body { background-color: #1e1e1e; color: #d4d4d4; }
h2 { border-bottom-color: #2f2f2f; }
.navigation-header {
background-color: #1e1e1e;
border-bottom-color: #2f2f2f;
}
.entry+.entry { border-top-color: #2f2f2f; }
.kanji-glyph-data>tbody>tr>* { border-top-color: #3f3f3f; }
.tag { color: #e1e1e1; }
.tag[data-category=default] { background-color: #69696e; }
.tag[data-category=name] { background-color: #489148; }
.tag[data-category=expression] { background-color: #b07f39; }
.tag[data-category=popular] { background-color: #025caa; }
.tag[data-category=frequent] { background-color: #4490a7; }
.tag[data-category=archaism] { background-color: #b04340; }
.tag[data-category=dictionary] { background-color: #9057ad; }
.tag[data-category=frequency] { background-color: #489148; }
.tag[data-category=partOfSpeech] { background-color: #565656; }
.tag[data-category=search] { background-color: #69696e; }
.tag[data-category=pitch-accent-dictionary] { background-color: #6640be; }
.term-reasons { color: #888888; }
.term-expression>.term-expression-text .kanji-link {
border-bottom-color: #888888;
color: #cccccc;
}
.term-expression[data-frequency=popular]>.term-expression-text,
.term-expression[data-frequency=popular]>.term-expression-text .kanji-link {
color: #0275d8;
}
.term-expression[data-frequency=rare]>.term-expression-text,
.term-expression[data-frequency=rare]>.term-expression-text .kanji-link {
color: #666666;
}
.term-definition-list,
.term-pitch-accent-group-list,
.term-pitch-accent-disambiguation-list,
.kanji-glossary-list {
color: #888888;
}
.term-glossary,
.term-pitch-accent,
.kanji-glossary {
color: #d4d4d4;
}
.icon-checkbox:checked + label {
/* invert colors */
background-color: #d4d4d4;
color: #1e1e1e;
}
.term-pitch-accent-container { border-bottom-color: #2f2f2f; }
.term-pitch-accent-character:before { border-color: #ffffff; }
.term-pitch-accent-graph-line,
.term-pitch-accent-graph-line-tail,
#term-pitch-accent-graph-dot,
#term-pitch-accent-graph-dot-downstep,
#term-pitch-accent-graph-triangle {
stroke: #ffffff;
}
#term-pitch-accent-graph-dot,
#term-pitch-accent-graph-dot-downstep>circle:last-of-type {
fill: #ffffff;
}
.term-glossary-image-container {
background-color: #2f2f2f;
}
.term-glossary-image-container-overlay {
color: #888888;
}

103
ext/mixed/css/display-default.css
View File

@ -1,103 +0,0 @@
/*
* Copyright (C) 2019-2020 Yomichan Authors
*
* This program is free software: you can redistribute it and/or modify
* it under the entrys of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
body { background-color: #ffffff; color: #333333; }
h2 { border-bottom-color: #eeeeee; }
.navigation-header {
background-color: #ffffff;
border-bottom-color: #eeeeee;
}
.entry+.entry { border-top-color: #eeeeee; }
.kanji-glyph-data>tbody>tr>* { border-top-color: #dddddd; }
.tag { color: #ffffff; }
.tag[data-category=default] { background-color: #8a8a91; }
.tag[data-category=name] { background-color: #5cb85c; }
.tag[data-category=expression] { background-color: #f0ad4e; }
.tag[data-category=popular] { background-color: #0275d8; }
.tag[data-category=frequent] { background-color: #5bc0de; }
.tag[data-category=archaism] { background-color: #d9534f; }
.tag[data-category=dictionary] { background-color: #aa66cc; }
.tag[data-category=frequency] { background-color: #5cb85c; }
.tag[data-category=partOfSpeech] { background-color: #565656; }
.tag[data-category=search] { background-color: #8a8a91; }
.tag[data-category=pitch-accent-dictionary] { background-color: #6640be; }
.term-reasons { color: #777777; }
.term-expression>.term-expression-text .kanji-link {
border-bottom-color: #777777;
color: #333333;
}
.term-expression[data-frequency=popular]>.term-expression-text,
.term-expression[data-frequency=popular]>.term-expression-text .kanji-link {
color: #0275d8;
}
.term-expression[data-frequency=rare]>.term-expression-text,
.term-expression[data-frequency=rare]>.term-expression-text .kanji-link {
color: #999999;
}
.term-definition-list,
.term-pitch-accent-group-list,
.term-pitch-accent-disambiguation-list,
.kanji-glossary-list {
color: #777777;
}
.term-glossary,
.term-pitch-accent,
.kanji-glossary {
color: #000000;
}
.icon-checkbox:checked + label {
/* invert colors */
background-color: #333333;
color: #ffffff;
}
.term-pitch-accent-container { border-bottom-color: #eeeeee; }
.term-pitch-accent-character:before { border-color: #000000; }
.term-pitch-accent-graph-line,
.term-pitch-accent-graph-line-tail,
#term-pitch-accent-graph-dot,
#term-pitch-accent-graph-dot-downstep,
#term-pitch-accent-graph-triangle {
stroke: #000000;
}
#term-pitch-accent-graph-dot,
#term-pitch-accent-graph-dot-downstep>circle:last-of-type {
fill: #000000;
}
.term-glossary-image-container {
background-color: #eeeeee;
}
.term-glossary-image-container-overlay {
color: #777777;
}

184
ext/mixed/css/display.css
View File

@ -15,6 +15,72 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
/*
* Variables
*/
:root {
--background-color: #ffffff;
--glossary-image-background-color: #eeeeee;
--dark-text-color: #000000;
--default-text-color: #333333;
--light-text-color: #777777;
--very-light-text-color: #999999;
--light-border-color: #eeeeee;
--medium-border-color: #dddddd;
--dark-border-color: #777777;
--popuplar-kanji-text-color: #0275d8;
--pitch-accent-annotation-color: #000000;
--tag-text-color: #ffffff;
--tag-default-background-color: #8a8a91;
--tag-name-background-color: #5cb85c;
--tag-expression-background-color: #f0ad4e;
--tag-popular-background-color: #0275d8;
--tag-frequent-background-color: #5bc0de;
--tag-archaism-background-color: #d9534f;
--tag-dictionary-background-color: #aa66cc;
--tag-frequency-background-color: #5cb85c;
--tag-part-of-speech-background-color: #565656;
--tag-search-background-color: #8a8a91;
--tag-pitch-accent-dictionary-background-color: #6640be;
}
:root[data-yomichan-theme=dark] {
--background-color: #1e1e1e;
--glossary-image-background-color: #2f2f2f;
--dark-text-color: #d8d8d8;
--default-text-color: #d4d4d4;
--light-text-color: #888888;
--very-light-text-color: #666666;
--light-border-color: #2f2f2f;
--medium-border-color: #3f3f3f;
--dark-border-color: #888888;
--popuplar-kanji-text-color: #0275d8;
--pitch-accent-annotation-color: #ffffff;
--tag-text-color: #e1e1e1;
--tag-default-background-color: #69696e;
--tag-name-background-color: #489148;
--tag-expression-background-color: #b07f39;
--tag-popular-background-color: #025caa;
--tag-frequent-background-color: #4490a7;
--tag-archaism-background-color: #b04340;
--tag-dictionary-background-color: #9057ad;
--tag-frequency-background-color: #489148;
--tag-part-of-speech-background-color: #565656;
--tag-search-background-color: #69696e;
--tag-pitch-accent-dictionary-background-color: #6640be;
}
/* /*
* Fonts * Fonts
@ -25,6 +91,7 @@
src: url('/mixed/ttf/kanji-stroke-orders.ttf'); src: url('/mixed/ttf/kanji-stroke-orders.ttf');
} }
/* /*
* General * General
*/ */
@ -45,6 +112,8 @@ body {
border: 0; border: 0;
padding: 0; padding: 0;
overflow-y: scroll; /* always show scroll bar */ overflow-y: scroll; /* always show scroll bar */
background-color: var(--background-color);
color: var(--default-text-color);
} }
ol, ul { ol, ul {
@ -68,10 +137,10 @@ h2 {
font-size: 1.25em; font-size: 1.25em;
font-weight: normal; font-weight: normal;
margin: 0.25em 0 0; margin: 0.25em 0 0;
border-bottom-width: 0.05714285714285714em; /* 14px * 1.25em => 1px */ border-bottom: 0.05714285714285714em solid var(--light-border-color); /* 14px * 1.25em => 1px */
border-bottom-style: solid;
} }
/* /*
* Navigation * Navigation
*/ */
@ -83,8 +152,8 @@ h2 {
height: 2.1em; height: 2.1em;
box-sizing: border-box; box-sizing: border-box;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
border-bottom-width: 0.07142857em; /* 14px => 1px */ border-bottom: 0.07142857em solid var(--light-border-color); /* 14px => 1px */
border-bottom-style: solid; background-color: var(--background-color);
z-index: 10; z-index: 10;
} }
@ -131,6 +200,12 @@ h2 {
user-select: none; user-select: none;
} }
.icon-checkbox:checked+label {
/* Invert colors */
background-color: var(--default-text-color);
color: var(--background-color);
}
#query-parser-content { #query-parser-content {
margin-top: 0.5em; margin-top: 0.5em;
font-size: 2em; font-size: 2em;
@ -206,11 +281,21 @@ button.action-button {
} }
.term-expression .kanji-link { .term-expression .kanji-link {
border-bottom-width: 0.03571428em; /* 28px => 1px */ border-bottom: 0.03571428em dashed var(--dark-border-color); /* 28px => 1px */
border-bottom-style: dashed; color: var(--default-text-color);
text-decoration: none; text-decoration: none;
} }
.term-expression[data-frequency=popular]>.term-expression-text,
.term-expression[data-frequency=popular]>.term-expression-text .kanji-link {
color: var(--popuplar-kanji-text-color);
}
.term-expression[data-frequency=rare]>.term-expression-text,
.term-expression[data-frequency=rare]>.term-expression-text .kanji-link {
color: var(--very-light-text-color);
}
.entry:not(.entry-current) .current { .entry:not(.entry-current) .current {
display: none; display: none;
} }
@ -225,6 +310,48 @@ button.action-button {
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
border-radius: 0.25em; border-radius: 0.25em;
color: var(--tag-text-color);
background-color: var(--tag-default-background-color);
}
.tag[data-category=name] {
background-color: var(--tag-name-background-color);
}
.tag[data-category=expression] {
background-color: var(--tag-expression-background-color);
}
.tag[data-category=popular] {
background-color: var(--tag-popular-background-color);
}
.tag[data-category=frequent] {
background-color: var(--tag-frequent-background-color);
}
.tag[data-category=archaism] {
background-color: var(--tag-archaism-background-color);
}
.tag[data-category=dictionary] {
background-color: var(--tag-dictionary-background-color);
}
.tag[data-category=frequency] {
background-color: var(--tag-frequency-background-color);
}
.tag[data-category=partOfSpeech] {
background-color: var(--tag-part-of-speech-background-color);
}
.tag[data-category=search] {
background-color: var(--tag-search-background-color);
}
.tag[data-category=pitch-accent-dictionary] {
background-color: var(--tag-pitch-accent-dictionary-background-color);
} }
.tag-inner { .tag-inner {
@ -249,8 +376,7 @@ button.action-button {
} }
.entry+.entry { .entry+.entry {
border-top-width: 0.07142857em; /* 14px => 1px */ border-top: 0.07142857em solid var(--light-border-color); /* 14px => 1px */
border-top-style: solid;
} }
.entry[data-type=term][data-expression-multi=true] .actions>.action-play-audio { .entry[data-type=term][data-expression-multi=true] .actions>.action-play-audio {
@ -259,6 +385,7 @@ button.action-button {
.term-reasons { .term-reasons {
display: inline-block; display: inline-block;
color: var(--light-text-color);
} }
.term-reasons>.term-reason+.term-reason-separator+.term-reason:before { .term-reasons>.term-reason+.term-reason-separator+.term-reason:before {
@ -346,6 +473,7 @@ button.action-button {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
color: var(--light-text-color);
} }
.term-definition-list:not([data-count="0"]):not([data-count="1"]) { .term-definition-list:not([data-count="0"]):not([data-count="1"]) {
@ -364,6 +492,10 @@ button.action-button {
list-style-type: circle; list-style-type: circle;
} }
.term-glossary {
color: var(--dark-text-color);
}
.term-definition-disambiguation-list[data-count="0"] { .term-definition-disambiguation-list[data-count="0"] {
display: none; display: none;
} }
@ -445,8 +577,7 @@ button.action-button {
} }
.term-pitch-accent-container { .term-pitch-accent-container {
border-bottom-width: 0.05714285714285714em; /* 14px * 1.25em => 1px */ border-bottom: 0.05714285714285714em solid var(--light-border-color); /* 14px * 1.25em => 1px */
border-bottom-style: solid;
padding-bottom: 0.25em; padding-bottom: 0.25em;
margin-bottom: 0.25em; margin-bottom: 0.25em;
} }
@ -455,6 +586,7 @@ button.action-button {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
color: var(--light-text-color);
} }
.term-pitch-accent-group-list:not([data-count="0"]):not([data-count="1"]) { .term-pitch-accent-group-list:not([data-count="0"]):not([data-count="1"]) {
@ -478,6 +610,7 @@ button.action-button {
.term-pitch-accent { .term-pitch-accent {
display: inline; display: inline;
line-height: 1.5em; line-height: 1.5em;
color: var(--dark-text-color);
} }
.term-pitch-accent-list:not([data-count="0"]):not([data-count="1"])>.term-pitch-accent { .term-pitch-accent-list:not([data-count="0"]):not([data-count="1"])>.term-pitch-accent {
@ -490,6 +623,7 @@ button.action-button {
.term-pitch-accent-disambiguation-list { .term-pitch-accent-disambiguation-list {
padding-right: 0.25em; padding-right: 0.25em;
color: var(--light-text-color);
} }
.term-pitch-accent-disambiguation-list:before { .term-pitch-accent-disambiguation-list:before {
@ -522,6 +656,9 @@ button.action-button {
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
.term-pitch-accent-character:before {
border-color: var(--pitch-accent-annotation-color);
}
.term-pitch-accent-character[data-pitch='high']:before { .term-pitch-accent-character[data-pitch='high']:before {
content: ""; content: "";
display: block; display: block;
@ -586,31 +723,36 @@ button.action-button {
.term-pitch-accent-graph-line, .term-pitch-accent-graph-line,
.term-pitch-accent-graph-line-tail { .term-pitch-accent-graph-line-tail {
fill: none; fill: none;
stroke: #000000; stroke: var(--pitch-accent-annotation-color);
stroke-width: 5; stroke-width: 5;
} }
.term-pitch-accent-graph-line-tail { .term-pitch-accent-graph-line-tail {
stroke-dasharray: 5 5; stroke-dasharray: 5 5;
} }
#term-pitch-accent-graph-dot { #term-pitch-accent-graph-dot {
fill: #000000; fill: var(--pitch-accent-annotation-color);
stroke: #000000; stroke: var(--pitch-accent-annotation-color);
stroke-width: 5; stroke-width: 5;
} }
#term-pitch-accent-graph-dot-downstep { #term-pitch-accent-graph-dot-downstep {
fill: none; fill: none;
stroke: #000000; stroke: var(--pitch-accent-annotation-color);
stroke-width: 5; stroke-width: 5;
} }
#term-pitch-accent-graph-dot-downstep>circle:last-of-type { #term-pitch-accent-graph-dot-downstep>circle:last-of-type {
fill: #000000; fill: var(--pitch-accent-annotation-color);
} }
#term-pitch-accent-graph-triangle { #term-pitch-accent-graph-triangle {
fill: none; fill: none;
stroke: #000000; stroke: var(--pitch-accent-annotation-color);
stroke-width: 5; stroke-width: 5;
} }
/*
* Glossary images
*/
.term-glossary-image-container { .term-glossary-image-container {
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
@ -620,6 +762,7 @@ button.action-button {
line-height: 0; line-height: 0;
font-size: 0.07142857em; /* 14px => 1px */ font-size: 0.07142857em; /* 14px => 1px */
overflow: hidden; overflow: hidden;
background-color: var(--glossary-image-background-color);
} }
.term-glossary-image-link { .term-glossary-image-link {
@ -642,6 +785,7 @@ button.action-button {
display: table; display: table;
table-layout: fixed; table-layout: fixed;
white-space: normal; white-space: normal;
color: var(--light-text-color);
} }
.term-glossary-item[data-has-image=true][data-image-load-state=load-error] .term-glossary-image-container-overlay:after { .term-glossary-item[data-has-image=true][data-image-load-state=load-error] .term-glossary-image-container-overlay:after {
@ -746,8 +890,7 @@ button.action-button {
} }
.kanji-glyph-data>tbody>tr>* { .kanji-glyph-data>tbody>tr>* {
border-top-width: 0.07142857em; /* 14px => 1px */ border-top: 0.07142857em solid var(--medium-border-color); /* 14px => 1px */
border-top-style: solid;
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
padding: 0.36em; padding: 0.36em;
@ -783,9 +926,14 @@ button.action-button {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
color: var(--light-text-color);
} }
.kanji-glossary-list:not([data-count="0"]):not([data-count="1"]) { .kanji-glossary-list:not([data-count="0"]):not([data-count="1"]) {
padding-left: 1.4em; padding-left: 1.4em;
list-style-type: decimal; list-style-type: decimal;
} }
.kanji-glossary {
color: var(--dark-text-color);
}

6
ext/mixed/js/display.js
View File

@ -399,12 +399,6 @@ class Display {
updateTheme(themeName) { updateTheme(themeName) {
document.documentElement.dataset.yomichanTheme = themeName; document.documentElement.dataset.yomichanTheme = themeName;
const stylesheets = document.querySelectorAll('link[data-yomichan-theme-name]');
for (const stylesheet of stylesheets) {
const match = (stylesheet.dataset.yomichanThemeName === themeName);
stylesheet.rel = (match ? 'stylesheet' : 'stylesheet alternate');
}
} }
setCustomCss(css) { setCustomCss(css) {