diff --git a/ext/bg/context.html b/ext/bg/context.html
index afd89207..76e4db2a 100644
--- a/ext/bg/context.html
+++ b/ext/bg/context.html
@@ -30,7 +30,12 @@
-
+
+
+
@@ -42,7 +47,11 @@
Enable content scanning
- Settings
+
+ Settings
+
+
+
Search
diff --git a/ext/bg/css/context.css b/ext/bg/css/context.css
index 773f79c6..447c5066 100644
--- a/ext/bg/css/context.css
+++ b/ext/bg/css/context.css
@@ -15,6 +15,13 @@
* along with this program. If not, see .
*/
+:root {
+ --badge-size: 16px;
+
+ --warning-color: #96751c;
+ --warning-color-light: #edc75e;
+}
+
body {
padding: 10px;
margin: 0;
@@ -50,8 +57,34 @@ label {
}
+/* Icons */
+.icon {
+ --icon-image: none;
+ --icon-size: contain;
+
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-position: center center;
+ -webkit-mask-mode: alpha;
+ -webkit-mask-size: var(--icon-size);
+ -webkit-mask-image: var(--icon-image);
+ mask-repeat: no-repeat;
+ mask-position: center center;
+ mask-mode: alpha;
+ mask-size: var(--icon-size);
+ mask-image: var(--icon-image);
+}
+.icon[data-icon=profile] { --icon-image: url(/mixed/img/profile.svg); }
+.icon[data-icon=cog] { --icon-image: url(/mixed/img/cog.svg); }
+.icon[data-icon=magnifying-glass] { --icon-image: url(/mixed/img/magnifying-glass.svg); }
+.icon[data-icon=exclamation-point-short] { --icon-image: url(/mixed/img/exclamation-point-short.svg); }
+.icon[data-icon=question-mark-circle] { --icon-image: url(/mixed/img/question-mark-circle.svg); }
+
+
+/* Page-specific styles */
.link-group {
- display: block;
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
line-height: 1.5em;
margin: 0 -10px;
padding: 0.5em 10px;
@@ -102,6 +135,9 @@ label {
.link-group-label {
vertical-align: middle;
}
+.link-group-badge {
+ margin-left: 0.5em;
+}
/* Toggle */
.toggle>input[type=checkbox] {
@@ -235,6 +271,7 @@ body[data-loaded=true] .toggle-group {
margin: 0;
padding: 2px 3px;
cursor: pointer;
+ position: relative;
}
.nav-button+.nav-button {
margin-left: -1px;
@@ -337,3 +374,69 @@ select.profile-select {
font-style: normal;
background-color: initial;
}
+
+.nav-button-warning-badge {
+ pointer-events: none;
+ width: 12px;
+ height: 6px;
+ position: absolute;
+ right: calc(50% - 6px);
+ top: -8px;
+ z-index: 1;
+}
+.nav-button-warning-badge-inner,
+.nav-button-warning-badge-outer {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #edc75e;
+
+ --icon-image: url(/mixed/img/material-down-arrow.svg);
+ --icon-size: contain;
+
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-position: center center;
+ -webkit-mask-mode: alpha;
+ -webkit-mask-size: var(--icon-size);
+ -webkit-mask-image: var(--icon-image);
+ mask-repeat: no-repeat;
+ mask-position: center center;
+ mask-mode: alpha;
+ mask-size: var(--icon-size);
+ mask-image: var(--icon-image);
+}
+.nav-button-warning-badge-inner {
+ margin: 1px 2px;
+}
+.nav-button-warning-badge-outer {
+ animation: nav-button-warning-badge-animation ease-in-out 2s alternate infinite;
+}
+@keyframes nav-button-warning-badge-animation {
+ 0% { opacity: 1; background-color: #edc75e; }
+ 100% { opacity: 1; background-color: #333333; }
+}
+
+.warning-badge {
+ position: relative;
+ width: var(--badge-size);
+ height: var(--badge-size);
+ margin: 0;
+ padding: 0;
+ background-color: var(--warning-color-light);
+ border-radius: 50%;
+ box-shadow: var(--shadow-vertical);
+}
+.warning-badge:not([hidden]) {
+ display: block;
+}
+.warning-badge>.icon {
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ background-color: var(--warning-color);
+}
diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index 53278951..725804c3 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -54,6 +54,7 @@
--modal-width-small: 400px;
--modal-height-small: 200px;
--modal-transition-offset: -64px;
+ --badge-size: 16px;
--link-color: var(--accent-color);
--link-color-hover: var(--accent-color-dark);
@@ -62,7 +63,7 @@
--outline-item-background-color: rgba(13, 13, 13, 0);
--outline-item-background-color-hover: rgba(13, 13, 13, 0.15);
--warning-color: #96751c;
- --warning-color-light: hsl(44, 80%, 65%);
+ --warning-color-light: #edc75e;
--dim-background-color: rgba(0, 0, 0, 0.5);
--content-dimmer-color: rgba(0, 0, 0, 0.1);
@@ -421,26 +422,10 @@ a.heading-link-light {
position: absolute;
right: calc(var(--outline-item-icon-size) * -0.125);
top: calc(var(--outline-item-icon-size) * -0.125);
- width: calc(var(--outline-item-icon-size) * 0.5);
- height: calc(var(--outline-item-icon-size) * 0.5);
- margin: 0;
- padding: 0;
- background-color: var(--warning-color-light);
- border-radius: calc(var(--outline-item-icon-size) * 0.5);
- box-shadow: var(--shadow-vertical);
}
.outline-item-left-warning-badge:not([hidden]) {
display: block;
}
-.outline-item-left-warning-badge>.icon {
- display: block;
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- background-color: var(--warning-color);
-}
.outline-item-label {
white-space: nowrap;
padding-left: var(--padding);
@@ -1970,6 +1955,29 @@ input.sentence-termination-character-input2 {
top: calc(1em * (3 / var(--font-size-no-units)));
}
+.warning-badge {
+ position: relative;
+ width: var(--badge-size);
+ height: var(--badge-size);
+ margin: 0;
+ padding: 0;
+ background-color: var(--warning-color-light);
+ border-radius: 50%;
+ box-shadow: var(--shadow-vertical);
+}
+.warning-badge:not([hidden]) {
+ display: block;
+}
+.warning-badge>.icon {
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ background-color: var(--warning-color);
+}
+
/* Generic layouts */
.margin-above {
@@ -2016,6 +2024,9 @@ input.sentence-termination-character-input2 {
flex-flow: row wrap;
align-items: center;
}
+.flex-margin-left {
+ margin-left: 0.5em;
+}
.flex-column-nowrap {
display: flex;
diff --git a/ext/bg/js/context-main.js b/ext/bg/js/context-main.js
index 65853514..e9833687 100644
--- a/ext/bg/js/context-main.js
+++ b/ext/bg/js/context-main.js
@@ -100,6 +100,7 @@ class DisplayController {
toggle.checked = extensionEnabled;
toggle.addEventListener('change', onToggleChanged, false);
}
+ this._updateDictionariesEnabledWarnings(options);
}
async _setupHotkeys() {
@@ -150,6 +151,26 @@ class DisplayController {
}]
);
}
+
+ async _updateDictionariesEnabledWarnings(options) {
+ const noDictionariesEnabledWarnings = document.querySelectorAll('.no-dictionaries-enabled-warning');
+ const dictionaries = await api.getDictionaryInfo();
+
+ let enabledCount = 0;
+ for (const {title} of dictionaries) {
+ if (
+ Object.prototype.hasOwnProperty.call(options.dictionaries, title) &&
+ options.dictionaries[title].enabled
+ ) {
+ ++enabledCount;
+ }
+ }
+
+ const hasEnabledDictionary = (enabledCount > 0);
+ for (const node of noDictionariesEnabledWarnings) {
+ node.hidden = hasEnabledDictionary;
+ }
+ }
}
(async () => {
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index 5dd85dd2..341d7f21 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -22,7 +22,7 @@