summaryrefslogtreecommitdiff
path: root/ext/mixed
diff options
context:
space:
mode:
authorAlex Yatskov <FooSoft@users.noreply.github.com>2019-10-13 08:58:40 -0700
committerGitHub <noreply@github.com>2019-10-13 08:58:40 -0700
commit320af99b7676a37157e2d7207756dd502e6be608 (patch)
tree5c28a1abba2693b22b1f3f7932f69cabcbaa453c /ext/mixed
parent537d2ef532aa7b7498de13ab039bd23f28d32714 (diff)
parent57db18c31b117591982795c930cc9f07efc28641 (diff)
Merge pull request #253 from toasted-nutbread/style-editor
Popup style preview + themes
Diffstat (limited to 'ext/mixed')
-rw-r--r--ext/mixed/css/display-dark.css50
-rw-r--r--ext/mixed/css/display-default.css50
-rw-r--r--ext/mixed/css/display.css96
-rw-r--r--ext/mixed/js/display.js27
4 files changed, 169 insertions, 54 deletions
diff --git a/ext/mixed/css/display-dark.css b/ext/mixed/css/display-dark.css
new file mode 100644
index 00000000..34a0ccd1
--- /dev/null
+++ b/ext/mixed/css/display-dark.css
@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2019 Alex Yatskov <alex@foosoft.net>
+ * Author: Alex Yatskov <alex@foosoft.net>
+ *
+ * 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 <http://www.gnu.org/licenses/>.
+ */
+
+
+body { background-color: #1e1e1e; color: #d4d4d4; }
+
+hr { border-top-color: #2f2f2f; }
+
+.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-partOfSpeech { background-color: #565656; }
+
+.reasons { color: #888888; }
+.glossary li { color: #888888; }
+.glossary-item { color: #d4d4d4; }
+.label { color: #e1e1e1; }
+
+.expression .kanji-link {
+ border-bottom-color: #888888;
+ color: #CCCCCC;
+}
+
+.expression-popular, .expression-popular .kanji-link {
+ color: #0275d8;
+}
+
+.expression-rare, .expression-rare .kanji-link {
+ color: #666666;
+}
diff --git a/ext/mixed/css/display-default.css b/ext/mixed/css/display-default.css
new file mode 100644
index 00000000..176c5387
--- /dev/null
+++ b/ext/mixed/css/display-default.css
@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2019 Alex Yatskov <alex@foosoft.net>
+ * Author: Alex Yatskov <alex@foosoft.net>
+ *
+ * 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 <http://www.gnu.org/licenses/>.
+ */
+
+
+body { background-color: #ffffff; color: #333333; }
+
+hr { border-top-color: #eeeeee; }
+
+.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-partOfSpeech { background-color: #565656; }
+
+.reasons { color: #777777; }
+.glossary li { color: #777777; }
+.glossary-item { color: #000000; }
+.label { color: #ffffff; }
+
+.expression .kanji-link {
+ border-bottom-color: #777777;
+ color: #333333;
+}
+
+.expression-popular, .expression-popular .kanji-link {
+ color: #0275d8;
+}
+
+.expression-rare, .expression-rare .kanji-link {
+ color: #999999;
+}
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 8a4cf4a7..7ebad090 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -30,9 +30,31 @@
* General
*/
+html.yomichan-float:not([data-yomichan-theme]),
+html.yomichan-float:not([data-yomichan-theme]) body {
+ background-color: transparent;
+}
+
+body {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.42857143;
+ margin: 0;
+ border: 0;
+ padding: 0;
+}
+
hr {
padding: 0px;
margin: 0px;
+ border: 0;
+ border-top-width: 1px;
+ border-top-style: solid;
+}
+
+ol, ul {
+ margin-top: 0;
+ margin-bottom: 10px;
}
#spinner {
@@ -60,40 +82,10 @@ hr {
padding-bottom: 10px;
}
-.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-partOfSpeech {
- background-color: #565656;
+html:root.yomichan-float .entry,
+html:root.yomichan-float .note {
+ padding-left: 10px;
+ padding-right: 10px;
}
.actions .disabled {
@@ -103,6 +95,7 @@ hr {
.actions .disabled img {
-webkit-filter: grayscale(100%);
+ filter: grayscale(100%);
opacity: 0.25;
}
@@ -111,7 +104,7 @@ hr {
}
.actions {
- display: inline-block;
+ display: block;
float: right;
}
@@ -127,19 +120,11 @@ hr {
}
.expression .kanji-link {
- border-bottom: 1px #777 dashed;
- color: #333;
+ border-bottom-width: 1px;
+ border-bottom-style: dashed;
text-decoration: none;
}
-.expression-popular, .expression-popular .kanji-link {
- color: #0275d8;
-}
-
-.expression-rare, .expression-rare .kanji-link {
- color: #999;
-}
-
.expression .peek-wrapper {
font-size: 14px;
white-space: nowrap;
@@ -173,7 +158,6 @@ hr {
}
.reasons {
- color: #777;
display: inline-block;
}
@@ -199,14 +183,6 @@ hr {
content: " | ";
}
-.glossary li {
- color: #777;
-}
-
-.glossary-item {
- color: #000;
-}
-
div.glossary-item.compact-glossary {
display: inline;
}
@@ -234,3 +210,15 @@ div.glossary-item.compact-glossary {
.entry:not(.entry-current) .current {
display: none;
}
+
+.label {
+ display: inline;
+ padding: 0.2em 0.6em 0.3em;
+ font-size: 75%;
+ font-weight: 700;
+ line-height: 1;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: baseline;
+ border-radius: 0.25em;
+}
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index cd9f41bd..51a3dc22 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -29,6 +29,7 @@ class Display {
this.audioPlaying = null;
this.audioFallback = null;
this.audioCache = {};
+ this.styleNode = null;
this.eventListeners = [];
this.persistentEventListeners = [];
@@ -194,6 +195,32 @@ class Display {
async updateOptions(options) {
this.options = options ? options : await apiOptionsGet(this.getOptionsContext());
+ this.updateTheme(this.options.general.popupTheme);
+ this.setCustomCss(this.options.general.customPopupCss);
+ }
+
+ updateTheme(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) {
+ if (this.styleNode === null) {
+ if (css.length === 0) { return; }
+ this.styleNode = document.createElement('style');
+ }
+
+ this.styleNode.textContent = css;
+
+ const parent = document.head;
+ if (this.styleNode.parentNode !== parent) {
+ parent.appendChild(this.styleNode);
+ }
}
setInteractive(interactive) {