aboutsummaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
Diffstat (limited to 'ext')
-rw-r--r--ext/bg/js/settings/popup-elements.js2
-rw-r--r--ext/bg/js/settings/profile-controller.js2
-rw-r--r--ext/mixed/css/display.css300
-rw-r--r--ext/mixed/js/display-generator.js11
4 files changed, 173 insertions, 142 deletions
diff --git a/ext/bg/js/settings/popup-elements.js b/ext/bg/js/settings/popup-elements.js
index decb39e1..15de91e8 100644
--- a/ext/bg/js/settings/popup-elements.js
+++ b/ext/bg/js/settings/popup-elements.js
@@ -181,7 +181,7 @@ class StatusFooter extends PopupElement {
}
if (active) {
- target.dataset.active = true;
+ target.dataset.active = 'true';
if (!this.isVisible()) {
this.setVisible(true);
}
diff --git a/ext/bg/js/settings/profile-controller.js b/ext/bg/js/settings/profile-controller.js
index 286ce006..aa74b419 100644
--- a/ext/bg/js/settings/profile-controller.js
+++ b/ext/bg/js/settings/profile-controller.js
@@ -298,7 +298,7 @@ class ProfileController {
if (profile === null || this.profileCount <= 1) { return; }
this._removeProfileNameElement.textContent = profile.name;
- this._profileRemoveModal.node.dataset.profileIndex = profileIndex;
+ this._profileRemoveModal.node.dataset.profileIndex = `${profileIndex}`;
this._profileRemoveModal.setVisible(true);
}
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index edd1b3d7..5f7af62e 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -33,7 +33,6 @@
--thin-border-size: calc(1em / var(--font-size-no-units));
--expression-thin-border-size: calc(1em / (var(--expression-font-size-no-units) * var(--font-size-no-units)));
- --spinner-size-no-units: 32;
--action-button-size-no-units: 16;
--list-margin: 0.72em;
@@ -60,6 +59,17 @@
--expression-space-size: 0.5em;
+ --tag-font-size-no-units: calc(11 / 14);
+ --tag-font-size: calc(1em * var(--tag-font-size-no-units));
+ --tag-border-size-no-units: 0;
+ --tag-border-size: calc(1em * (var(--tag-border-size-no-units) / (var(--font-size-no-units) * var(--tag-font-size-no-units))));
+ --tag-border-style: none;
+ --tag-font-weight: bold;
+
+ --compact-list-separator: " | ";
+ --list-padding1: 1.4em;
+ --list-padding2: var(--list-padding1);
+
--animation-duration: 0.125s;
/* Colors */
@@ -68,8 +78,7 @@
--accent-color: #0275d8;
--link-color: var(--accent-color);
- --dark-text-color: #000000;
- --default-text-color: #333333;
+ --default-text-color: #000000;
--light-text-color: #777777;
--very-light-text-color: #999999;
--kanji-text-color: var(--default-text-color);
@@ -86,6 +95,7 @@
--pitch-accent-annotation-color: #000000;
--tag-text-color: #ffffff;
+ --tag-border-color: transparent;
--tag-default-background-color: #8a8a91;
--tag-name-background-color: #5cb85c;
--tag-expression-background-color: #f0ad4e;
@@ -124,7 +134,6 @@
--accent-color: #0275d8;
--link-color: var(--accent-color);
- --dark-text-color: #d8d8d8;
--default-text-color: #d4d4d4;
--light-text-color: #888888;
--very-light-text-color: #666666;
@@ -142,6 +151,7 @@
--pitch-accent-annotation-color: #ffffff;
--tag-text-color: #e1e1e1;
+ --tag-border-color: transparent;
--tag-default-background-color: #69696e;
--tag-name-background-color: #489148;
--tag-expression-background-color: #b07f39;
@@ -207,16 +217,6 @@ ol, ul {
margin-top: 0;
margin-bottom: var(--list-padding);
}
-#spinner {
- position: fixed;
- z-index: 1;
- right: 0.36em;
- bottom: 0.36em;
-}
-#spinner>img {
- width: calc(1em * (var(--spinner-size-no-units) / var(--font-size-no-units)));
- height: calc(1em * (var(--spinner-size-no-units) / var(--font-size-no-units)));
-}
h2 {
font-size: var(--h2-font-size);
font-weight: normal;
@@ -508,8 +508,8 @@ button.action-button {
.tag {
display: inline-block;
padding: 0.2em 0.6em 0.3em;
- font-size: 75%;
- font-weight: 700;
+ font-size: var(--tag-font-size);
+ font-weight: var(--tag-font-weight);
line-height: 1.25;
text-align: center;
white-space: nowrap;
@@ -517,6 +517,8 @@ button.action-button {
border-radius: 0.25em;
color: var(--tag-text-color);
background-color: var(--tag-default-background-color);
+ border: var(--tag-border-size) var(--tag-border-style) var(--tag-border-color);
+ margin-right: 0.375em;
}
.tag[data-category=name] {
background-color: var(--tag-name-background-color);
@@ -551,16 +553,6 @@ button.action-button {
.tag-inner {
display: block;
}
-.tag-list>.tag {
- margin-right: 0.375em;
-}
-
-:root:not([data-enable-search-tags=true]) .tag[data-category=search] {
- display: none;
-}
-:root[data-compact-tags=true] .tag[data-redundant=true] {
- display: none;
-}
/* Entries */
@@ -588,18 +580,21 @@ button.action-button {
width var(--entry-current-indicator-transition-duration) linear,
visibility 0s linear 0s;
}
-.term-expression .kanji-link {
+.kanji-link {
border-bottom: var(--expression-thin-border-size) dashed var(--kanji-border-color);
color: var(--kanji-text-color);
text-decoration: none;
cursor: pointer;
}
+.term-expression-text {
+ color: var(--kanji-text-color);
+}
.term-expression[data-frequency=popular] .term-expression-text,
-.term-expression[data-frequency=popular] .term-expression-text .kanji-link {
+.term-expression[data-frequency=popular] .kanji-link {
color: var(--kanji-popular-text-color);
}
.term-expression[data-frequency=rare] .term-expression-text,
-.term-expression[data-frequency=rare] .term-expression-text .kanji-link {
+.term-expression[data-frequency=rare] .kanji-link {
color: var(--kanji-rare-text-color);
}
.term-expression-text>ruby>rt {
@@ -718,25 +713,27 @@ button.action-button {
/* Definitions */
.term-definition-list {
margin: 0;
- padding: 0;
- list-style-type: none;
- color: var(--light-text-color);
-}
-.term-definition-list:not([data-count="0"]):not([data-count="1"]) {
- padding-left: 1.4em;
+ padding: 0 0 0 var(--list-padding1);
list-style-type: decimal;
}
-.term-glossary-list {
- margin: 0;
- padding: 0;
+.term-definition-list[data-count="0"],
+.term-definition-list[data-count="1"] {
+ padding-left: 0;
list-style-type: none;
}
-.term-glossary-list:not([data-count="0"]):not([data-count="1"]) {
- padding-left: 1.4em;
+.term-glossary-list {
+ margin: 0;
+ padding: 0 0 0 var(--list-padding2);
list-style-type: circle;
}
-.term-glossary {
- color: var(--dark-text-color);
+.term-glossary-list[data-count="0"],
+.term-glossary-list[data-count="1"] {
+ padding-left: 0;
+ list-style-type: none;
+}
+.term-definition-item::marker,
+.term-glossary-item::marker {
+ color: var(--light-text-color);
}
.term-definition-disambiguation-list[data-count="0"] {
display: none;
@@ -766,36 +763,6 @@ button.action-button {
}
-/* Conditional styles */
-:root:not([data-debug=true]) .debug-info {
- display: none;
-}
-:root[data-anki-enabled=false] .action-view-note,
-:root[data-anki-enabled=false] .action-add-note {
- display: none;
-}
-:root[data-audio-enabled=false] .action-play-audio {
- display: none;
-}
-: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-glossary-layout-mode=compact] .term-glossary-list {
- display: inline;
- list-style: none;
- padding-left: 0;
-}
-:root[data-glossary-layout-mode=compact] .term-glossary-list>li {
- display: inline;
-}
-:root[data-glossary-layout-mode=compact] .term-glossary-list>li:not(:first-child)::before {
- white-space: pre-wrap;
- content: " | ";
- display: inline;
-}
-
-
/* Pitch accent styles */
.entry[data-pitch-accent-count='0'] .term-pitch-accent-container {
display: none;
@@ -807,32 +774,37 @@ button.action-button {
}
.term-pitch-accent-group-list {
margin: 0;
- padding: 0;
- list-style-type: none;
- color: var(--light-text-color);
-}
-.term-pitch-accent-group-list:not([data-count="0"]):not([data-count="1"]) {
- padding-left: 1.4em;
+ padding: 0 0 0 var(--list-padding1);
list-style-type: decimal;
}
-.term-pitch-accent-list {
- margin: 0;
- padding: 0;
+.term-pitch-accent-group-list[data-count="0"],
+.term-pitch-accent-group-list[data-count="1"] {
+ padding-left: 0;
list-style-type: none;
- display: inline;
}
-.term-pitch-accent-list:not([data-count="0"]):not([data-count="1"]) {
- padding-left: 1.4em;
+.term-pitch-accent-list {
+ margin: 0;
+ padding: 0 0 0 var(--list-padding2);
list-style-type: circle;
display: block;
}
-.term-pitch-accent {
+.term-pitch-accent-list[data-count="0"],
+.term-pitch-accent-list[data-count="1"] {
+ padding-left: 0;
+ list-style-type: none;
display: inline;
- line-height: 1.5em;
- color: var(--dark-text-color);
}
-.term-pitch-accent-list:not([data-count="0"]):not([data-count="1"])>.term-pitch-accent {
+.term-pitch-accent-group::marker,
+.term-pitch-accent::marker {
+ color: var(--light-text-color);
+}
+.term-pitch-accent {
display: list-item;
+ line-height: 1.5;
+}
+.term-pitch-accent-list[data-count="0"] .term-pitch-accent,
+.term-pitch-accent-list[data-count="1"] .term-pitch-accent {
+ display: inline;
}
.term-pitch-accent-group-tag-list {
margin-right: 0.375em;
@@ -856,9 +828,6 @@ button.action-button {
.term-pitch-accent-tag-list:not([data-count="0"]) {
margin-right: 0.375em;
}
-.term-special-tags>.pitches {
- display: inline;
-}
.term-pitch-accent-character {
display: inline-block;
position: relative;
@@ -902,20 +871,6 @@ button.action-button {
vertical-align: middle;
}
-:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation-list[data-expression-count="0"],
-:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation[data-type=reading] {
- display: none;
-}
-:root[data-show-pitch-accent-downstep-notation=false] .term-pitch-accent-characters {
- display: none;
-}
-:root[data-show-pitch-accent-position-notation=false] .term-pitch-accent-position {
- display: none;
-}
-:root[data-show-pitch-accent-graph=false] .term-pitch-accent-details {
- display: none;
-}
-
/* Pitch accent graph styles */
.term-pitch-accent-graph {
@@ -1029,32 +984,6 @@ button.action-button {
content: "]";
}
-:root[data-glossary-layout-mode=compact] .term-glossary-image-container {
- display: none;
- position: absolute;
- left: 0;
- top: 100%;
- z-index: 1;
-}
-: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-glossary-layout-mode=compact] .term-glossary-image-link {
- position: relative;
- display: inline-block;
-}
-: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-glossary-layout-mode=compact]) .term-glossary-image-link-text {
- display: none;
-}
-:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-description {
- display: block;
-}
-
/* Kanji */
.kanji-glyph {
@@ -1098,16 +1027,16 @@ button.action-button {
}
.kanji-glossary-list {
margin: 0;
- padding: 0;
- list-style-type: none;
- color: var(--light-text-color);
-}
-.kanji-glossary-list:not([data-count="0"]):not([data-count="1"]) {
- padding-left: 1.4em;
+ padding: 0 0 0 var(--list-padding1);
list-style-type: decimal;
}
-.kanji-glossary {
- color: var(--dark-text-color);
+.kanji-glossary-list[data-count="0"],
+.kanji-glossary-list[data-count="1"] {
+ padding-left: 0;
+ list-style-type: none;
+}
+.kanji-glossary-item::marker {
+ color: var(--light-text-color);
}
@@ -1182,3 +1111,96 @@ button.action-button {
pointer-events: none;
z-index: 10;
}
+
+
+/* Conditional styles */
+:root:not([data-enable-search-tags=true]) .tag[data-category=search] {
+ display: none;
+}
+:root[data-compact-tags=true] .tag[data-redundant=true] {
+ display: none;
+}
+
+:root:not([data-debug=true]) .debug-info {
+ display: none;
+}
+:root[data-anki-enabled=false] .action-view-note,
+:root[data-anki-enabled=false] .action-add-note {
+ display: none;
+}
+:root[data-audio-enabled=false] .action-play-audio {
+ display: none;
+}
+: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-glossary-layout-mode=compact] .term-glossary-list {
+ display: inline;
+ list-style: none;
+ padding-left: 0;
+}
+:root[data-glossary-layout-mode=compact] .term-glossary-item {
+ display: inline;
+}
+:root[data-glossary-layout-mode=compact] .term-glossary-item:not(:first-child)::before {
+ white-space: pre-wrap;
+ content: var(--compact-list-separator);
+ display: inline;
+ color: var(--light-text-color);
+}
+
+:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation-list[data-expression-count="0"],
+:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation[data-type=reading] {
+ display: none;
+}
+:root[data-show-pitch-accent-downstep-notation=false] .term-pitch-accent-characters {
+ display: none;
+}
+:root[data-show-pitch-accent-position-notation=false] .term-pitch-accent-position {
+ display: none;
+}
+:root[data-show-pitch-accent-graph=false] .term-pitch-accent-details {
+ display: none;
+}
+
+:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .term-pitch-accent-list:not([data-has-tags=true]) {
+ display: inline;
+ list-style: none;
+ padding-left: 0;
+}
+:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .term-pitch-accent-list:not([data-has-tags=true]) .term-pitch-accent {
+ display: inline;
+}
+:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .term-pitch-accent-list:not([data-has-tags=true]) .term-pitch-accent:not(:first-child)::before {
+ white-space: pre-wrap;
+ content: var(--compact-list-separator);
+ display: inline;
+ color: var(--light-text-color);
+}
+
+:root[data-glossary-layout-mode=compact] .term-glossary-image-container {
+ display: none;
+ position: absolute;
+ left: 0;
+ top: 100%;
+ z-index: 1;
+}
+: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-glossary-layout-mode=compact] .term-glossary-image-link {
+ position: relative;
+ display: inline-block;
+}
+: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-glossary-layout-mode=compact]) .term-glossary-image-link-text {
+ display: none;
+}
+:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-description {
+ display: block;
+}
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index 0cf1e8c6..63140330 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -311,7 +311,7 @@ class DisplayGenerator {
node.title = details.notes;
inner.textContent = details.name;
node.dataset.category = details.category;
- if (details.redundant) { node.dataset.redundant = true; }
+ if (details.redundant) { node.dataset.redundant = 'true'; }
return node;
}
@@ -338,7 +338,16 @@ class DisplayGenerator {
const tag = this._createTag({notes: '', name: dictionary, category: 'pitch-accent-dictionary'});
node.querySelector('.term-pitch-accent-group-tag-list').appendChild(tag);
+ let hasTags = false;
+ for (const {tags} of pitches) {
+ if (tags.length > 0) {
+ hasTags = true;
+ break;
+ }
+ }
+
const n = node.querySelector('.term-pitch-accent-list');
+ n.dataset.hasTags = `${hasTags}`;
this._appendMultiple(n, this._createPitch.bind(this), pitches);
return node;