diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css
index 227f5030..0957c758 100644
--- a/ext/fg/css/client.css
+++ b/ext/fg/css/client.css
@@ -28,8 +28,8 @@ 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-outer-theme=dark],
+iframe.yomichan-float[data-outer-theme=auto][data-site-color=dark] {
background-color: #1e1e1e;
border: 1px solid #666;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
diff --git a/ext/fg/float.html b/ext/fg/float.html
index 36aedb7a..5874f44d 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 00afb773..b3af3d6f 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -186,8 +186,10 @@ class Popup extends EventDispatcher {
}
updateTheme() {
- this._frame.dataset.yomichanTheme = this._options.general.popupOuterTheme;
- this._frame.dataset.yomichanSiteColor = this._getSiteColor();
+ const {popupTheme, popupOuterTheme} = this._options.general;
+ this._frame.dataset.theme = popupTheme;
+ this._frame.dataset.outerTheme = popupOuterTheme;
+ this._frame.dataset.siteColor = this._getSiteColor();
}
async setCustomOuterCss(css, useWebExtensionApi) {
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index f9d5c25e..edd1b3d7 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -72,8 +72,10 @@
--default-text-color: #333333;
--light-text-color: #777777;
--very-light-text-color: #999999;
- --popuplar-kanji-text-color: var(--accent-color);
-
+ --kanji-text-color: var(--default-text-color);
+ --kanji-popular-text-color: var(--accent-color);
+ --kanji-rare-text-color: var(--very-light-text-color);
+ --kanji-furigana-text-color: inherit;
--reason-text-color: var(--light-text-color);
--light-border-color: #eeeeee;
@@ -115,7 +117,7 @@
--progress-bar-indicator-color: var(--accent-color);
--entry-current-indicator-color: var(--accent-color);
}
-:root[data-yomichan-theme=dark] {
+:root[data-theme=dark] {
/* Colors */
--background-color: #1e1e1e;
--glossary-image-background-color: #2f2f2f;
@@ -126,8 +128,10 @@
--default-text-color: #d4d4d4;
--light-text-color: #888888;
--very-light-text-color: #666666;
- --popuplar-kanji-text-color: var(--accent-color);
-
+ --kanji-text-color: var(--default-text-color);
+ --kanji-popular-text-color: var(--accent-color);
+ --kanji-rare-text-color: var(--very-light-text-color);
+ --kanji-furigana-text-color: inherit;
--reason-text-color: var(--light-text-color);
--light-border-color: #2f2f2f;
@@ -179,8 +183,8 @@
/* General */
-:root[data-yomichan-page=float]:not([data-yomichan-theme]),
-:root[data-yomichan-page=float]:not([data-yomichan-theme]) body {
+:root[data-page-type=popup]:not([data-theme]),
+:root[data-page-type=popup]:not([data-theme]) body {
background-color: transparent;
}
:root {
@@ -227,25 +231,25 @@ a {
/* Scrollbars */
-:root:not([data-yomichan-theme=light]) .scrollbar {
+:root:not([data-theme=default]) .scrollbar {
scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}
-:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar {
+:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar {
width: auto;
}
-:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-button {
+:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-button {
height: 0;
}
-:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-thumb {
+:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color);
}
-:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-track {
+:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-track {
background-color: var(--scrollbar-thumb-color);
}
-:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-track-piece {
+:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-track-piece {
background-color: var(--scrollbar-track-color);
}
-:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-corner {
+:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-corner {
background-color: var(--scrollbar-track-color);
}
@@ -586,17 +590,20 @@ button.action-button {
}
.term-expression .kanji-link {
border-bottom: var(--expression-thin-border-size) dashed var(--kanji-border-color);
- color: var(--default-text-color);
+ color: var(--kanji-text-color);
text-decoration: none;
cursor: pointer;
}
.term-expression[data-frequency=popular] .term-expression-text,
.term-expression[data-frequency=popular] .term-expression-text .kanji-link {
- color: var(--popuplar-kanji-text-color);
+ color: var(--kanji-popular-text-color);
}
.term-expression[data-frequency=rare] .term-expression-text,
.term-expression[data-frequency=rare] .term-expression-text .kanji-link {
- color: var(--very-light-text-color);
+ color: var(--kanji-rare-text-color);
+}
+.term-expression-text>ruby>rt {
+ color: var(--kanji-furigana-text-color);
}
.entry-header2,
.entry-header3 {
@@ -770,19 +777,19 @@ button.action-button {
:root[data-audio-enabled=false] .action-play-audio {
display: none;
}
-:root[data-compact-glossaries=true] .term-definition-tag-list,
-:root[data-compact-glossaries=true] .term-definition-disambiguation-list:not([data-count="0"]) {
+:root[data-glossary-layout-mode=compact] .term-definition-tag-list,
+:root[data-glossary-layout-mode=compact] .term-definition-disambiguation-list:not([data-count="0"]) {
display: inline;
}
-:root[data-compact-glossaries=true] .term-glossary-list {
+:root[data-glossary-layout-mode=compact] .term-glossary-list {
display: inline;
list-style: none;
padding-left: 0;
}
-:root[data-compact-glossaries=true] .term-glossary-list>li {
+:root[data-glossary-layout-mode=compact] .term-glossary-list>li {
display: inline;
}
-:root[data-compact-glossaries=true] .term-glossary-list>li:not(:first-child)::before {
+:root[data-glossary-layout-mode=compact] .term-glossary-list>li:not(:first-child)::before {
white-space: pre-wrap;
content: " | ";
display: inline;
@@ -1022,29 +1029,29 @@ button.action-button {
content: "]";
}
-:root[data-compact-glossaries=true] .term-glossary-image-container {
+:root[data-glossary-layout-mode=compact] .term-glossary-image-container {
display: none;
position: absolute;
left: 0;
top: 100%;
z-index: 1;
}
-:root[data-compact-glossaries=true] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .term-glossary-image-container {
+:root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .term-glossary-image-container {
bottom: 100%;
top: auto;
}
-:root[data-compact-glossaries=true] .term-glossary-image-link {
+:root[data-glossary-layout-mode=compact] .term-glossary-image-link {
position: relative;
display: inline-block;
}
-:root[data-compact-glossaries=true] .term-glossary-image-link:hover .term-glossary-image-container,
-:root[data-compact-glossaries=true] .term-glossary-image-link:focus .term-glossary-image-container {
+:root[data-glossary-layout-mode=compact] .term-glossary-image-link:hover .term-glossary-image-container,
+:root[data-glossary-layout-mode=compact] .term-glossary-image-link:focus .term-glossary-image-container {
display: block;
}
-:root:not([data-compact-glossaries=true]) .term-glossary-image-link-text {
+:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-link-text {
display: none;
}
-:root:not([data-compact-glossaries=true]) .term-glossary-image-description {
+:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-description {
display: block;
}
diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css
index d9024172..8c8f77e6 100644
--- a/ext/mixed/css/search.css
+++ b/ext/mixed/css/search.css
@@ -59,7 +59,7 @@
:root[data-loaded=true] {
--animation-duration: 0.125s;
}
-:root[data-yomichan-theme=dark] {
+:root[data-theme=dark] {
--text-color-default: #d8d8d8;
--background-color: #1e1e1e;
--shadow-color: rgba(255, 255, 255, 0.185);
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 807f585a..085a3237 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -786,7 +786,7 @@ class Display extends EventDispatcher {
const data = document.documentElement.dataset;
data.ankiEnabled = `${options.anki.enable}`;
data.audioEnabled = `${options.audio.enabled && options.audio.sources.length > 0}`;
- data.compactGlossaries = `${options.general.compactGlossaries}`;
+ data.glossaryLayoutMode = `${options.general.glossaryLayoutMode}`;
data.compactTags = `${options.general.compactTags}`;
data.enableSearchTags = `${options.scanning.enableSearchTags}`;
data.showPitchAccentDownstepNotation = `${options.general.showPitchAccentDownstepNotation}`;
@@ -796,7 +796,7 @@ class Display extends EventDispatcher {
}
_updateTheme(themeName) {
- document.documentElement.dataset.yomichanTheme = themeName;
+ document.documentElement.dataset.theme = themeName;
}
async _findDefinitions(isTerms, source, wildcardsEnabled, optionsContext) {
@@ -1461,7 +1461,7 @@ class Display extends EventDispatcher {
async _createNote(definition, mode, context, options, templates, injectMedia) {
const {
- general: {resultOutputMode, compactGlossaries, compactTags},
+ general: {resultOutputMode, glossaryLayoutMode, compactTags},
anki: {tags, checkForDuplicates, duplicateScope, kanji, terms, screenshot: {format, quality}},
audio: {sources, customSourceUrl}
} = options;
@@ -1501,7 +1501,7 @@ class Display extends EventDispatcher {
checkForDuplicates,
duplicateScope,
resultOutputMode,
- compactGlossaries,
+ glossaryLayoutMode,
compactTags,
modeOptions
});
diff --git a/test/test-options-util.js b/test/test-options-util.js
index 378338c9..2e59c7ea 100644
--- a/test/test-options-util.js
+++ b/test/test-options-util.js
@@ -278,7 +278,7 @@ function createProfileOptionsUpdatedTestData1() {
popupScaleRelativeToVisualViewport: true,
showGuide: true,
compactTags: false,
- compactGlossaries: false,
+ glossaryLayoutMode: 'default',
mainDictionary: '',
popupTheme: 'default',
popupOuterTheme: 'default',