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 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/bg/search.html') 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 From b34ff7ebe9004d85140cced007c67ca2c9f59396 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 13 Oct 2019 11:57:40 -0400 Subject: Change #yomichan-float to .yomichan-float Since there can be more than one popup, using a class makes more sense than an ID. --- ext/bg/search.html | 2 +- ext/bg/settings-popup-preview.html | 2 +- ext/fg/css/client.css | 12 ++++++------ ext/fg/float.html | 2 +- ext/fg/js/popup.js | 2 +- ext/mixed/css/display.css | 8 ++++---- 6 files changed, 14 insertions(+), 14 deletions(-) (limited to 'ext/bg/search.html') diff --git a/ext/bg/search.html b/ext/bg/search.html index 6930830a..9d28b358 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -1,5 +1,5 @@ - + diff --git a/ext/bg/settings-popup-preview.html b/ext/bg/settings-popup-preview.html index 3d426f7a..bfe4550c 100644 --- a/ext/bg/settings-popup-preview.html +++ b/ext/bg/settings-popup-preview.html @@ -24,7 +24,7 @@ font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif; font-size: 14px; } - iframe#yomichan-float { + iframe.yomichan-float { resize: none; } .vertical-align-outer { diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css index 4b824da3..633c88ef 100644 --- a/ext/fg/css/client.css +++ b/ext/fg/css/client.css @@ -17,7 +17,7 @@ */ -iframe#yomichan-float { +iframe.yomichan-float { all: initial; background-color: #fff; border: 1px solid #999; @@ -29,14 +29,14 @@ iframe#yomichan-float { box-sizing: border-box; } -iframe#yomichan-float[data-yomichan-theme=dark], -iframe#yomichan-float[data-yomichan-theme=auto][data-yomichan-site-color=dark] { +iframe.yomichan-float[data-yomichan-theme=dark], +iframe.yomichan-float[data-yomichan-theme=auto][data-yomichan-site-color=dark] { background-color: #1e1e1e; border: 1px solid #666; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } -iframe#yomichan-float.yomichan-float-full-width { +iframe.yomichan-float.yomichan-float-full-width { border-left: none; border-right: none; left: 0 !important; @@ -46,13 +46,13 @@ iframe#yomichan-float.yomichan-float-full-width { resize: none; } -iframe#yomichan-float.yomichan-float-full-width:not(.yomichan-float-above) { +iframe.yomichan-float.yomichan-float-full-width:not(.yomichan-float-above) { border-bottom: none; top: auto !important; bottom: 0 !important; } -iframe#yomichan-float.yomichan-float-full-width.yomichan-float-above { +iframe.yomichan-float.yomichan-float-full-width.yomichan-float-above { border-top: none; top: 0 !important; bottom: auto !important; diff --git a/ext/fg/float.html b/ext/fg/float.html index 2504f448..580a7963 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -1,5 +1,5 @@ - + diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index 73ed37e0..2a9670fc 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -27,7 +27,7 @@ class Popup { this.child = null; this.childrenSupported = true; this.container = document.createElement('iframe'); - this.container.id = 'yomichan-float'; + this.container.className = 'yomichan-float'; this.container.addEventListener('mousedown', e => e.stopPropagation()); this.container.addEventListener('scroll', e => e.stopPropagation()); this.container.setAttribute('src', chrome.extension.getURL('/fg/float.html')); diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index 7ebad090..7793ddeb 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -30,8 +30,8 @@ * General */ -html.yomichan-float:not([data-yomichan-theme]), -html.yomichan-float:not([data-yomichan-theme]) body { +html:root[data-yomichan-page=float]:not([data-yomichan-theme]), +html:root[data-yomichan-page=float]:not([data-yomichan-theme]) body { background-color: transparent; } @@ -82,8 +82,8 @@ ol, ul { padding-bottom: 10px; } -html:root.yomichan-float .entry, -html:root.yomichan-float .note { +html:root[data-yomichan-page=float] .entry, +html:root[data-yomichan-page=float] .note { padding-left: 10px; padding-right: 10px; } -- cgit v1.2.3