alex/yomichan
1
Fork 0
Code Releases Activity

Merge pull request #253 from toasted-nutbread/style-editor

Browse Source 
Popup style preview + themes
This commit is contained in:
Alex Yatskov 2019-10-13 08:58:40 -07:00 committed by GitHub
commit 320af99b76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 627 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ext/bg/css/settings.css
View File

@ -148,6 +148,15 @@ input[type=checkbox]#storage-persist-button-checkbox {
padding: 0;
}
#settings-popup-preview-frame {
background-color: transparent;
border: none;
margin: 0;
padding: 0;
width: 100%;
height: 320px;
}
[data-show-for-browser] {
display: none;
}

2
ext/bg/js/options.js
View File

@ -276,6 +276,8 @@ function profileOptionsCreateDefaults() {
compactTags: false,
compactGlossaries: false,
mainDictionary: '',
popupTheme: 'default',
popupOuterTheme: 'default',
customPopupCss: ''
},

4
ext/bg/js/search.js
View File

@ -118,6 +118,10 @@ class DisplaySearch extends Display {
return this.optionsContext;
}
setCustomCss() {
// No custom CSS
}
setIntroVisible(visible, animate) {
if (this.introVisible === visible) {
return;

161
ext/bg/js/settings-popup-preview.js Normal file
View File

@ -0,0 +1,161 @@
/*
* 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 terms 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/>.
*/
class SettingsPopupPreview {
constructor() {
this.frontend = null;
this.apiOptionsGetOld = apiOptionsGet;
this.popupShown = false;
this.themeChangeTimeout = null;
}
static create() {
const instance = new SettingsPopupPreview();
instance.prepare();
return instance;
}
async prepare() {
// Setup events
window.addEventListener('resize', (e) => this.onWindowResize(e), false);
window.addEventListener('message', (e) => this.onMessage(e), false);
const themeDarkCheckbox = document.querySelector('#theme-dark-checkbox');
if (themeDarkCheckbox !== null) {
themeDarkCheckbox.addEventListener('change', () => this.onThemeDarkCheckboxChanged(themeDarkCheckbox), false);
}
// Overwrite API functions
window.apiOptionsGet = (...args) => this.apiOptionsGet(...args);
// Overwrite frontend
this.frontend = Frontend.create();
window.yomichan_frontend = this.frontend;
this.frontend.setEnabled = function () {};
this.frontend.searchClear = function () {};
this.frontend.popup.childrenSupported = false;
this.frontend.popup.interactive = false;
await this.frontend.isPrepared();
// Update search
this.updateSearch();
}
async apiOptionsGet(...args) {
const options = await this.apiOptionsGetOld(...args);
options.general.enable = true;
options.general.debugInfo = false;
options.general.popupWidth = 400;
options.general.popupHeight = 250;
options.general.popupHorizontalOffset = 0;
options.general.popupVerticalOffset = 10;
options.general.popupHorizontalOffset2 = 10;
options.general.popupVerticalOffset2 = 0;
options.general.popupHorizontalTextPosition = 'below';
options.general.popupVerticalTextPosition = 'before';
options.scanning.selectText = false;
return options;
}
onWindowResize() {
if (this.frontend === null) { return; }
const textSource = this.frontend.textSourceLast;
if (textSource === null) { return; }
const elementRect = textSource.getRect();
const writingMode = textSource.getWritingMode();
const options = this.frontend.options;
this.frontend.popup.show(elementRect, writingMode, options);
}
onMessage(e) {
const {action, params} = e.data;
const handlers = SettingsPopupPreview.messageHandlers;
if (handlers.hasOwnProperty(action)) {
const handler = handlers[action];
handler(this, params);
}
}
onThemeDarkCheckboxChanged(node) {
document.documentElement.classList.toggle('dark', node.checked);
if (this.themeChangeTimeout !== null) {
clearTimeout(this.themeChangeTimeout);
}
this.themeChangeTimeout = setTimeout(() => {
this.themeChangeTimeout = null;
this.frontend.popup.updateTheme();
}, 300);
}
setText(text) {
const exampleText = document.querySelector('#example-text');
if (exampleText === null) { return; }
exampleText.textContent = text;
this.updateSearch();
}
setInfoVisible(visible) {
const node = document.querySelector('.placeholder-info');
if (node === null) { return; }
node.classList.toggle('placeholder-info-visible', visible);
}
setCustomCss(css) {
if (this.frontend === null) { return; }
this.frontend.popup.setCustomCss(css);
}
async updateSearch() {
const exampleText = document.querySelector('#example-text');
if (exampleText === null) { return; }
const textNode = exampleText.firstChild;
if (textNode === null) { return; }
const range = document.createRange();
range.selectNode(textNode);
const source = new TextSourceRange(range, range.toString(), null);
this.frontend.textSourceLast = null;
await this.frontend.searchSource(source, 'script');
await this.frontend.lastShowPromise;
if (this.frontend.popup.isVisible()) {
this.popupShown = true;
}
this.setInfoVisible(!this.popupShown);
}
}
SettingsPopupPreview.messageHandlers = {
setText: (self, {text}) => self.setText(text),
setCustomCss: (self, {css}) => self.setCustomCss(css)
};
SettingsPopupPreview.instance = SettingsPopupPreview.create();

48
ext/bg/js/settings.js
View File

@ -39,6 +39,8 @@ async function formRead(options) {
options.general.popupVerticalOffset = parseInt($('#popup-vertical-offset').val(), 10);
options.general.popupHorizontalOffset2 = parseInt($('#popup-horizontal-offset2').val(), 0);
options.general.popupVerticalOffset2 = parseInt($('#popup-vertical-offset2').val(), 10);
options.general.popupTheme = $('#popup-theme').val();
options.general.popupOuterTheme = $('#popup-outer-theme').val();
options.general.customPopupCss = $('#custom-popup-css').val();
options.audio.enabled = $('#audio-playback-enabled').prop('checked');
@ -107,6 +109,8 @@ async function formWrite(options) {
$('#popup-vertical-offset').val(options.general.popupVerticalOffset);
$('#popup-horizontal-offset2').val(options.general.popupHorizontalOffset2);
$('#popup-vertical-offset2').val(options.general.popupVerticalOffset2);
$('#popup-theme').val(options.general.popupTheme);
$('#popup-outer-theme').val(options.general.popupOuterTheme);
$('#custom-popup-css').val(options.general.customPopupCss);
$('#audio-playback-enabled').prop('checked', options.audio.enabled);
@ -248,6 +252,7 @@ async function onReady() {
showExtensionInformation();
formSetupEventListeners();
appearanceInitialize();
await audioSettingsInitialize();
await profileOptionsSetup();
@ -259,6 +264,49 @@ async function onReady() {
$(document).ready(utilAsync(onReady));
/*
* Appearance
*/
function appearanceInitialize() {
let previewVisible = false;
$('#settings-popup-preview-button').on('click', () => {
if (previewVisible) { return; }
showAppearancePreview();
previewVisible = true;
});
}
function showAppearancePreview() {
const container = $('#settings-popup-preview-container');
const buttonContainer = $('#settings-popup-preview-button-container');
const settings = $('#settings-popup-preview-settings');
const text = $('#settings-popup-preview-text');
const customCss = $('#custom-popup-css');
const frame = document.createElement('iframe');
frame.src = '/bg/settings-popup-preview.html';
frame.id = 'settings-popup-preview-frame';
window.wanakana.bind(text[0]);
text.on('input', () => {
const action = 'setText';
const params = {text: text.val()};
frame.contentWindow.postMessage({action, params}, '*');
});
customCss.on('input', () => {
const action = 'setCustomCss';
const params = {css: customCss.val()};
frame.contentWindow.postMessage({action, params}, '*');
});
container.append(frame);
buttonContainer.remove();
settings.css('display', '');
}
/*
* Audio
*/

4
ext/bg/search.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="yomichan-search">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
@ -7,6 +7,8 @@
<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/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>
<body>
<div class="container">

125
ext/bg/settings-popup-preview.html Normal file
View File

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Yomichan Popup Preview</title>
<link rel="stylesheet" type="text/css" href="/fg/css/client.css">
<style>
html {
transition: background-color 0.25s linear 0s, color 0.25s linear 0s;
color: #333333;
}
html.dark {
background-color: #1e1e1e;
color: #d4d4d4;
}
html, body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
width: 100%;
height: 100%;
font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
font-size: 14px;
}
iframe#yomichan-float {
resize: none;
}
.vertical-align-outer {
width: 100%;
height: 100%;
white-space: nowrap;
}
.vertical-align-outer::before {
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
}
.vertical-align-inner {
display: inline-block;
vertical-align: middle;
white-space: normal;
width: 100%;
}
.horizontal-size {
max-width: 400px;
padding: 15px;
margin: 0 auto;
}
.example-text-container {
font-size: 24px;
line-height: 1.25em;
height: 1.25em;
}
.popup-placeholder {
height: 250px;
padding-top: 10px;
border: 1px solid rgba(0, 0, 0, 0);
}
.placeholder-info {
visibility: hidden;
opacity: 0;
transition: opacity 0.5s linear 0s, visibility 0s linear 0.5s;
}
.placeholder-info.placeholder-info-visible {
visibility: visible;
opacity: 1;
transition: opacity 0.5s linear 0s, visibility 0s linear 0s;
}
.options {
float: right;
font-size: 14px;
line-height: 30px;
}
.theme-button {
display: inline-block;
margin-left: 0.5em;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
line-height: 0;
}
.theme-button>input {
vertical-align: middle;
margin: 0 0.25em 0 0;
padding: 0;
}
.theme-button>span {
vertical-align: middle;
}
.theme-button:hover>span {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="vertical-align-outer"><div class="vertical-align-inner"><div class="horizontal-size">
<div class="example-text-container">
<div class="options"><label class="theme-button"><input type="checkbox" id="theme-dark-checkbox" /><span>dark</span></label></div>
<span id="example-text">読め</span>
</div>
<div class="popup-placeholder">
<div class="vertical-align-outer"><div class="vertical-align-inner placeholder-info">
This page uses the dictionaries you have installed in order to show a preview.
If you see this message, make sure you have a dictionary installed.
</div></div>
</div>
</div></div></div>
<script src="/mixed/js/extension.js"></script>
<script src="/fg/js/api.js"></script>
<script src="/fg/js/document.js"></script>
<script src="/fg/js/frontend-api-receiver.js"></script>
<script src="/fg/js/popup.js"></script>
<script src="/fg/js/source.js"></script>
<script src="/fg/js/util.js"></script>
<script src="/fg/js/popup-proxy-host.js"></script>
<script src="/fg/js/frontend.js"></script>
<script src="/bg/js/settings-popup-preview.js"></script>
</body>
</html>

33
ext/bg/settings.html
View File

@ -231,10 +231,42 @@
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label for="popup-theme">Popup theme</label>
<select class="form-control" id="popup-theme">
<option value="default">Light</option>
<option value="dark">Dark</option>
</select>
</div>
<div class="col-xs-6">
<label for="popup-outer-theme">Popup shadow theme</label>
<select class="form-control" id="popup-outer-theme">
<option value="auto">Auto-detect</option>
<option value="default">Light</option>
<option value="dark">Dark</option>
</select>
</div>
</div>
</div>
<div class="form-group options-advanced">
<label for="custom-popup-css">Custom popup CSS</label>
<div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-css" class="form-control"></textarea></div>
</div>
<div class="form-group ignore-form-changes" style="display: none;" id="settings-popup-preview-settings">
<label for="settings-popup-preview-text">Popup preview text</label>
<input type="text" id="settings-popup-preview-text" class="form-control" value="読め">
</div>
<div class="form-group ignore-form-changes">
<div id="settings-popup-preview-button-container">
<button class="btn btn-default" id="settings-popup-preview-button">Show popup preview</button>
</div>
<div id="settings-popup-preview-container"></div>
</div>
</div>
<div>
@ -603,6 +635,7 @@
<script src="/mixed/lib/jquery.min.js"></script>
<script src="/mixed/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="/mixed/lib/handlebars.min.js"></script>
<script src="/mixed/lib/wanakana.min.js"></script>
<script src="/mixed/js/extension.js"></script>

8
ext/fg/css/client.css
View File

@ -21,7 +21,7 @@ iframe#yomichan-float {
all: initial;
background-color: #fff;
border: 1px solid #999;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: fixed;
resize: both;
visibility: hidden;
@ -29,6 +29,12 @@ iframe#yomichan-float {
box-sizing: border-box;
}
iframe#yomichan-float[data-yomichan-theme=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 {
border-left: none;
border-right: none;

12
ext/fg/float.html
View File

@ -1,18 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="yomichan-float">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title></title>
<link rel="stylesheet" href="/mixed/lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/mixed/css/display.css">
<style type="text/css">
.entry, .note {
padding-left: 10px;
padding-right: 10px;
}
</style>
<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>
<body>
<div id="spinner">

21
ext/fg/js/float.js
View File

@ -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)
};

8
ext/fg/js/frontend.js
View File

@ -44,6 +44,8 @@ class Frontend {
this.isPreparedPromiseResolve = null;
this.isPreparedPromise = new Promise((resolve) => { this.isPreparedPromiseResolve = resolve; });
this.lastShowPromise = Promise.resolve();
}
static create() {
@ -331,7 +333,7 @@ class Frontend {
} catch (e) {
if (window.yomichan_orphaned) {
if (textSource && this.options.scanning.modifier !== 'none') {
this.popup.showOrphaned(
this.lastShowPromise = this.popup.showOrphaned(
textSource.getRect(),
textSource.getWritingMode()
);
@ -369,7 +371,7 @@ class Frontend {
const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
const url = window.location.href;
this.popup.termsShow(
this.lastShowPromise = this.popup.termsShow(
textSource.getRect(),
textSource.getWritingMode(),
definitions,
@ -399,7 +401,7 @@ class Frontend {
const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
const url = window.location.href;
this.popup.kanjiShow(
this.lastShowPromise = this.popup.kanjiShow(
textSource.getRect(),
textSource.getWritingMode(),
definitions,

6
ext/fg/js/popup-proxy-host.js
View File

@ -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();

5
ext/fg/js/popup-proxy.js
View File

@ -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;

46
ext/fg/js/popup.js
View File

@ -85,6 +85,7 @@ class Popup {
async setOptions(options) {
this.options = options;
this.updateTheme();
}
async show(elementRect, writingMode) {
@ -269,6 +270,47 @@ class Popup {
}
}
updateTheme() {
this.container.dataset.yomichanTheme = this.getTheme(this.options.general.popupOuterTheme);
}
getTheme(themeName) {
if (themeName === 'auto') {
const color = [255, 255, 255];
Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.documentElement).backgroundColor));
Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.body).backgroundColor));
const dark = (color[0] < 128 && color[1] < 128 && color[2] < 128);
themeName = dark ? 'dark' : 'default';
}
return themeName;
}
static addColor(target, color) {
if (color === null) { return; }
const a = color[3];
if (a <= 0.0) { return; }
const aInv = 1.0 - a;
for (let i = 0; i < 3; ++i) {
target[i] = target[i] * aInv + color[i] * a;
}
}
static getColorInfo(cssColor) {
const m = /^\s*rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d\.]+)\s*)?\)\s*$/.exec(cssColor);
if (m === null) { return null; }
const m4 = m[4];
return [
Number.parseInt(m[1], 10),
Number.parseInt(m[2], 10),
Number.parseInt(m[3], 10),
m4 ? Math.max(0.0, Math.min(1.0, Number.parseFloat(m4))) : 1.0
];
}
async containsPoint(x, y) {
for (let popup = this; popup !== null && popup.isVisible(); popup = popup.child) {
const rect = popup.container.getBoundingClientRect();
@ -291,6 +333,10 @@ class Popup {
this.invokeApi('kanjiShow', {definitions, context});
}
async setCustomCss(css) {
this.invokeApi('setCustomCss', {css});
}
clearAutoPlayTimer() {
if (this.isInjected) {
this.invokeApi('clearAutoPlayTimer');

50
ext/mixed/css/display-dark.css Normal file
View File

@ -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;
}

50
ext/mixed/css/display-default.css Normal file
View File

@ -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;
}

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

@ -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;
}

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

@ -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) {