diff --git a/src/browser_action/popup.css b/src/browser_action/popup.css
index 1f902d1..6576ed8 100644
--- a/src/browser_action/popup.css
+++ b/src/browser_action/popup.css
@@ -54,7 +54,7 @@ main > div + div {
border-top: 1px dotted rgb(var(--passive-grey));
}
-h4 {
+h4, h5 {
margin: 0;
}
@@ -66,6 +66,10 @@ label {
min-width: max-content;
}
+label ~ label {
+ margin-top: 1ch;
+}
+
button {
padding: 0;
border: none;
@@ -116,3 +120,7 @@ a {
:visited {
color: rgb(var(--accent));
}
+
+select:not([data-value="custom"]) ~ :is([for="font-family-custom"], [id="font-family-custom"]) {
+ display: none;
+}
diff --git a/src/browser_action/popup.html b/src/browser_action/popup.html
index 5fa12fc..fef75d0 100644
--- a/src/browser_action/popup.html
+++ b/src/browser_action/popup.html
@@ -32,7 +32,10 @@
Change Palette
+
+
+
diff --git a/src/browser_action/render_font_family.js b/src/browser_action/render_font_family.js
index 3c107c3..565922b 100644
--- a/src/browser_action/render_font_family.js
+++ b/src/browser_action/render_font_family.js
@@ -1,16 +1,28 @@
+const fontFamilySelect = document.getElementById('font-family');
+const customFontFamilyInput = document.getElementById('font-family-custom');
+
const writeFontFamily = async function ({ target: { value } }) {
+ fontFamilySelect.dataset.value = value;
browser.storage.local.set({ fontFamily: value });
};
+const writeCustomFontFamily = async function ({ target: { value } }) {
+ browser.storage.local.set({ customFontFamily: value });
+};
+
const renderFontFamily = async function () {
const { fontFamily = '' } = await browser.storage.local.get('fontFamily');
- const fontFamilySelect = document.getElementById('font-family');
+ const { customFontFamily = '' } = await browser.storage.local.get('customFontFamily');
fontFamilySelect.addEventListener('input', writeFontFamily);
+ customFontFamilyInput.addEventListener('input', writeCustomFontFamily);
[...fontFamilySelect.options].forEach(option => {
option.selected = option.value === fontFamily;
});
+ fontFamilySelect.dataset.value = fontFamily;
+
+ customFontFamilyInput.value = customFontFamily;
};
renderFontFamily();
diff --git a/src/main.js b/src/main.js
index 999011c..d78e8d2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -40,7 +40,12 @@ const applyCurrentPalette = async function () {
const applyFontFamily = async function () {
const { fontFamily = '' } = await browser.storage.local.get('fontFamily');
- document.documentElement.style.setProperty('--font-family', fontFamily);
+ const { customFontFamily = '' } = await browser.storage.local.get('customFontFamily');
+
+ document.documentElement.style.setProperty(
+ '--font-family',
+ fontFamily === 'custom' ? customFontFamily : fontFamily
+ );
};
const applyFontSize = async function () {
@@ -53,13 +58,13 @@ const onStorageChanged = async function (changes, areaName) {
return;
}
- const { currentPalette, fontFamily, fontSize } = changes;
+ const { currentPalette, fontFamily, customFontFamily, fontSize } = changes;
if (currentPalette || Object.keys(changes).some(key => key.startsWith('palette:'))) {
applyCurrentPalette();
}
- if (fontFamily) applyFontFamily();
+ if (fontFamily || customFontFamily) applyFontFamily();
if (fontSize) applyFontSize();
};