alex/yomichan
1
Fork 0
Code Releases Activity

Create themes

Browse Source
This commit is contained in:
toasted-nutbread 2019-10-12 17:06:03 -04:00
parent ceaeeb32dd
commit c90bc75eb8
8 changed files with 134 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ext/bg/search.html
View File

@ -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 alternate" 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">

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;

2
ext/fg/float.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title></title>
<link rel="stylesheet" href="/mixed/css/display.css">
<link rel="stylesheet alternate" 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">

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

@ -85,6 +85,7 @@ class Popup {
async setOptions(options) {
this.options = options;
this.container.dataset.yomichanTheme = options.general.popupTheme;
}
async show(elementRect, writingMode) {

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

@ -0,0 +1,51 @@
/*
* 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,
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;
}

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

@ -0,0 +1,51 @@
/*
* 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,
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;
}

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

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

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

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