diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index f36bb436..3556a52e 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -85,6 +85,7 @@ class Popup { async setOptions(options) { this.options = options; + this.container.dataset.yomichanTheme = options.general.popupTheme; } async show(elementRect, writingMode) { diff --git a/ext/mixed/css/display-dark.css b/ext/mixed/css/display-dark.css new file mode 100644 index 00000000..75e42565 --- /dev/null +++ b/ext/mixed/css/display-dark.css @@ -0,0 +1,51 @@ +/* + * Copyright (C) 2019 Alex Yatskov + * Author: Alex Yatskov + * + * 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 . + */ + + +body, +html.yomichan-float 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..ce1008a8 --- /dev/null +++ b/ext/mixed/css/display-default.css @@ -0,0 +1,51 @@ +/* + * Copyright (C) 2019 Alex Yatskov + * Author: Alex Yatskov + * + * 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 . + */ + + +body, +html.yomichan-float 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 e88372bb..d899e9fc 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -30,12 +30,15 @@ * General */ +html.yomichan-float, +html.yomichan-float body { + background-color: transparent; +} + body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; - color: #333; - background-color: #fff; margin: 0; border: 0; padding: 0; @@ -45,7 +48,8 @@ hr { padding: 0px; margin: 0px; border: 0; - border-top: 1px solid #eee; + border-top-width: 1px; + border-top-style: solid; } ol, ul { @@ -84,42 +88,6 @@ html:root.yomichan-float .note { padding-right: 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; -} - .actions .disabled { pointer-events: none; cursor: default; @@ -152,19 +120,11 @@ html:root.yomichan-float .note { } .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; @@ -198,7 +158,6 @@ html:root.yomichan-float .note { } .reasons { - color: #777; display: inline-block; } @@ -224,14 +183,6 @@ html:root.yomichan-float .note { content: " | "; } -.glossary li { - color: #777; -} - -.glossary-item { - color: #000; -} - div.glossary-item.compact-glossary { display: inline; } @@ -266,7 +217,6 @@ div.glossary-item.compact-glossary { font-size: 75%; font-weight: 700; line-height: 1; - color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index cd9f41bd..2bf917aa 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -194,6 +194,17 @@ class Display { async updateOptions(options) { this.options = options ? options : await apiOptionsGet(this.getOptionsContext()); + this.updateTheme(this.options.general.popupTheme); + } + + 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'); + } } setInteractive(interactive) { -- cgit v1.2.3 From 883226b0451350a0c01841e6c9a192bbb76dd8b6 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 12 Oct 2019 17:12:34 -0400 Subject: Update how custom CSS is applied --- ext/bg/js/search.js | 4 ++++ ext/fg/js/float.js | 21 +-------------------- ext/fg/js/popup-proxy-host.js | 6 ++++++ ext/fg/js/popup-proxy.js | 5 +++++ ext/fg/js/popup.js | 4 ++++ ext/mixed/js/display.js | 16 ++++++++++++++++ 6 files changed, 36 insertions(+), 20 deletions(-) (limited to 'ext/mixed') diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 1d780d70..68afe47e 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -118,6 +118,10 @@ class DisplaySearch extends Display { return this.optionsContext; } + setCustomCss() { + // No custom CSS + } + setIntroVisible(visible, animate) { if (this.introVisible === visible) { return; diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index 5164cd8f..4b3cd848 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -21,7 +21,6 @@ class DisplayFloat extends Display { constructor() { super(document.querySelector('#spinner'), document.querySelector('#definitions')); this.autoPlayAudioTimer = null; - this.styleNode = null; this.optionsContext = { depth: 0, @@ -101,11 +100,6 @@ class DisplayFloat extends Display { async initialize(options, popupInfo, url, childrenSupported) { await super.initialize(options); - const css = options.general.customPopupCss; - if (css) { - this.setStyle(css); - } - const {id, depth, parentFrameId} = popupInfo; this.optionsContext.depth = depth; this.optionsContext.url = url; @@ -114,20 +108,6 @@ class DisplayFloat extends Display { popupNestedInitialize(id, depth, parentFrameId, url); } } - - setStyle(css) { - const parent = document.head; - - if (this.styleNode === null) { - this.styleNode = document.createElement('style'); - } - - this.styleNode.textContent = css; - - if (this.styleNode.parentNode !== parent) { - parent.appendChild(this.styleNode); - } - } } DisplayFloat.onKeyDownHandlers = { @@ -145,6 +125,7 @@ DisplayFloat.messageHandlers = { kanjiShow: (self, {definitions, context}) => self.kanjiShow(definitions, context), clearAutoPlayTimer: (self) => self.clearAutoPlayTimer(), orphaned: (self) => self.onOrphaned(), + setCustomCss: (self, {css}) => self.setCustomCss(css), initialize: (self, {options, popupInfo, url, childrenSupported}) => self.initialize(options, popupInfo, url, childrenSupported) }; diff --git a/ext/fg/js/popup-proxy-host.js b/ext/fg/js/popup-proxy-host.js index 74a5153a..bb323f64 100644 --- a/ext/fg/js/popup-proxy-host.js +++ b/ext/fg/js/popup-proxy-host.js @@ -45,6 +45,7 @@ class PopupProxyHost { containsPoint: ({id, x, y}) => this.containsPoint(id, x, y), termsShow: ({id, elementRect, writingMode, definitions, context}) => this.termsShow(id, elementRect, writingMode, definitions, context), kanjiShow: ({id, elementRect, writingMode, definitions, context}) => this.kanjiShow(id, elementRect, writingMode, definitions, context), + setCustomCss: ({id, css}) => this.setCustomCss(id, css), clearAutoPlayTimer: ({id}) => this.clearAutoPlayTimer(id) }); } @@ -126,6 +127,11 @@ class PopupProxyHost { return await popup.kanjiShow(elementRect, writingMode, definitions, context); } + async setCustomCss(id, css) { + const popup = this.getPopup(id); + return popup.setCustomCss(css); + } + async clearAutoPlayTimer(id) { const popup = this.getPopup(id); return popup.clearAutoPlayTimer(); diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js index e8d6bc98..6ea94b6a 100644 --- a/ext/fg/js/popup-proxy.js +++ b/ext/fg/js/popup-proxy.js @@ -88,6 +88,11 @@ class PopupProxy { return await this.invokeHostApi('kanjiShow', {id, elementRect, writingMode, definitions, context}); } + async setCustomCss(css) { + const id = await this.getPopupId(); + return await this.invokeHostApi('setCustomCss', {id, css}); + } + async clearAutoPlayTimer() { if (this.id === null) { return; diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index 3556a52e..5ca8643f 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -292,6 +292,10 @@ class Popup { this.invokeApi('kanjiShow', {definitions, context}); } + async setCustomCss(css) { + this.invokeApi('setCustomCss', {css}); + } + clearAutoPlayTimer() { if (this.isInjected) { this.invokeApi('clearAutoPlayTimer'); diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 2bf917aa..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 = []; @@ -195,6 +196,7 @@ 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) { @@ -207,6 +209,20 @@ class Display { } } + 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) { interactive = !!interactive; if (this.interactive === interactive) { return; } -- cgit v1.2.3 From 57db18c31b117591982795c930cc9f07efc28641 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 12 Oct 2019 18:10:01 -0400 Subject: Leave default stylesheet enabled by default --- ext/bg/search.html | 2 +- ext/fg/float.html | 2 +- ext/mixed/css/display-dark.css | 3 +-- ext/mixed/css/display-default.css | 3 +-- ext/mixed/css/display.css | 4 ++-- 5 files changed, 6 insertions(+), 8 deletions(-) (limited to 'ext/mixed') diff --git a/ext/bg/search.html b/ext/bg/search.html index 12b62797..6930830a 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -7,7 +7,7 @@ - + diff --git a/ext/fg/float.html b/ext/fg/float.html index 01bc4250..2504f448 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -5,7 +5,7 @@ - + diff --git a/ext/mixed/css/display-dark.css b/ext/mixed/css/display-dark.css index 75e42565..34a0ccd1 100644 --- a/ext/mixed/css/display-dark.css +++ b/ext/mixed/css/display-dark.css @@ -17,8 +17,7 @@ */ -body, -html.yomichan-float body { background-color: #1e1e1e; color: #d4d4d4; } +body { background-color: #1e1e1e; color: #d4d4d4; } hr { border-top-color: #2f2f2f; } diff --git a/ext/mixed/css/display-default.css b/ext/mixed/css/display-default.css index ce1008a8..176c5387 100644 --- a/ext/mixed/css/display-default.css +++ b/ext/mixed/css/display-default.css @@ -17,8 +17,7 @@ */ -body, -html.yomichan-float body { background-color: #ffffff; color: #333333; } +body { background-color: #ffffff; color: #333333; } hr { border-top-color: #eeeeee; } diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index d899e9fc..7ebad090 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -30,8 +30,8 @@ * General */ -html.yomichan-float, -html.yomichan-float body { +html.yomichan-float:not([data-yomichan-theme]), +html.yomichan-float:not([data-yomichan-theme]) body { background-color: transparent; } -- cgit v1.2.3