From 36e46590e0b3f65ca3907610535ac2af388990cb Mon Sep 17 00:00:00 2001 From: BowLuckie Date: Mon, 15 Jun 2026 21:55:20 +1000 Subject: [PATCH 1/6] basic increment popup --- background.js | 8 +++++++- manifest.json | 3 ++- popup.html | 13 +++++++++++++ popup.js | 5 +++++ 4 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 popup.html create mode 100644 popup.js diff --git a/background.js b/background.js index a6ea4fb..ad115fb 100644 --- a/background.js +++ b/background.js @@ -89,4 +89,10 @@ function resetNumImages() { // randomize positions function randomizeHair() { chrome.storage.sync.set( { "hairImages": [] } ); -} \ No newline at end of file +} + +chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { + if ( message.action == "popupCallIncrement" ) { + incrementNumImages(); + } +}) diff --git a/manifest.json b/manifest.json index 7798933..c5fc974 100644 --- a/manifest.json +++ b/manifest.json @@ -5,7 +5,8 @@ "version": "0.0.0.2", "author": "Anton Bovin | Ported to MV3 by ZenithKnight", "action": { - "default_icon": "assets/icons/icon128.png" + "default_icon": "assets/icons/icon128.png", + "default_popup": "popup.html" }, "icons": { "16": "assets/icons/icon16.png", diff --git a/popup.html b/popup.html new file mode 100644 index 0000000..6e23cde --- /dev/null +++ b/popup.html @@ -0,0 +1,13 @@ + + + + + + Hair on Screen Gui + + + + + + diff --git a/popup.js b/popup.js new file mode 100644 index 0000000..127c282 --- /dev/null +++ b/popup.js @@ -0,0 +1,5 @@ +document.getElementById("increment").addEventListener("click", () => { + chrome.runtime.sendMessage({ + action: "popupCallIncrement" + }) +}); From d4ab3a303cb8e636b9cd5bcf5a2c76423f49b07c Mon Sep 17 00:00:00 2001 From: BowLuckie Date: Mon, 15 Jun 2026 23:25:16 +1000 Subject: [PATCH 2/6] added more context menu options to gui --- background.js | 76 ++++++++++++++++++++++++++++------------- popup.html | 27 +++++++++++---- popup.js | 94 ++++++++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 163 insertions(+), 34 deletions(-) diff --git a/background.js b/background.js index ad115fb..67f5928 100644 --- a/background.js +++ b/background.js @@ -1,39 +1,41 @@ // generate the context menus brought up by clicking the browser action -chrome.storage.sync.get("numHairImages", function(items) { - var hairCount = items.hasOwnProperty("numHairImages") ? items.numHairImages : 1; - +chrome.storage.sync.get("numHairImages", function (items) { + var hairCount = items.hasOwnProperty("numHairImages") + ? items.numHairImages + : 1; + chrome.contextMenus.removeAll(); chrome.contextMenus.create({ title: hairCountText(hairCount), id: "hair_count", contexts: ["action"], - enabled: false + enabled: false, }); chrome.contextMenus.create({ title: "More hair!", id: "more_hair", - contexts: ["action"] + contexts: ["action"], }); chrome.contextMenus.create({ title: "Less hair!", id: "less_hair", - contexts: ["action"] + contexts: ["action"], }); chrome.contextMenus.create({ title: "Reset hair!", id: "reset_hair", - contexts: ["action"] + contexts: ["action"], }); chrome.contextMenus.create({ title: "Randomize hair!", id: "randomize_hair", - contexts: ["action"] + contexts: ["action"], }); chrome.contextMenus.create({ title: "(reload after updating)", id: "reload_prompt", contexts: ["action"], - enabled: false + enabled: false, }); }); @@ -52,47 +54,73 @@ function hairCountText(num) { // general function for updating the hair count function updateNumImages(updateFunction) { - chrome.storage.sync.get("numHairImages", function(items) { + chrome.storage.sync.get("numHairImages", function (items) { var numHairImages; if (items.hasOwnProperty("numHairImages")) { numHairImages = updateFunction(items.numHairImages); - } - else { + } else { numHairImages = updateFunction(1); } - - chrome.storage.sync.set( {"numHairImages": numHairImages } ); - - chrome.contextMenus.update("hair_count", { title: hairCountText(numHairImages) }); + + chrome.storage.sync.set({ numHairImages: numHairImages }); + + chrome.contextMenus.update("hair_count", { + title: hairCountText(numHairImages), + }); }); } // increment count function incrementNumImages() { - updateNumImages(function(num) { + updateNumImages(function (num) { return num + 1; }); } // decrement count function decrementNumImages() { - updateNumImages(function(num) { - return Math.max(0, num-1); + updateNumImages(function (num) { + return Math.max(0, num - 1); }); } // reset count to 1 function resetNumImages() { - updateNumImages( function() { return 1; } ); + updateNumImages(function () { + return 1; + }); } // randomize positions function randomizeHair() { - chrome.storage.sync.set( { "hairImages": [] } ); + chrome.storage.sync.set({ hairImages: [] }); } -chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { - if ( message.action == "popupCallIncrement" ) { +// connect popup and background +chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => { + let action = message.action; + + if (action == "getNumImages") { + chrome.storage.sync.get("numHairImages", (items) => { + sendResponse({ numImages: items.numHairImages ?? 1 }); + }); + return true; + } + + if (action == "popupCallIncrement") { incrementNumImages(); + sendResponse({}); + } else if (action == "popupCallDecrement") { + decrementNumImages(); + sendResponse({}); + } else if (action == "popupCallReset") { + resetNumImages(); + sendResponse({}); + } else if (action == "popupCallRandomize") { + randomizeHair(); + sendResponse({}); + } else if (action == "popupCallSetExact") { + updateNumImages(() => message.value); + sendResponse({}); } -}) +}); diff --git a/popup.html b/popup.html index 6e23cde..353a623 100644 --- a/popup.html +++ b/popup.html @@ -1,13 +1,28 @@ - + - - + + Hair on Screen Gui - - +

Hair Count:

+

0

+ + + + + + + + + + +

+ diff --git a/popup.js b/popup.js index 127c282..04e25fc 100644 --- a/popup.js +++ b/popup.js @@ -1,5 +1,91 @@ -document.getElementById("increment").addEventListener("click", () => { - chrome.runtime.sendMessage({ - action: "popupCallIncrement" - }) +document.addEventListener("DOMContentLoaded", () => { + main(); }); + +function main() { + update_count(true); + document.getElementById("increment").addEventListener("click", () => { + chrome.runtime.sendMessage( + { + action: "popupCallIncrement", + }, + () => { + update_count(); + }, + ); + }); + + document.getElementById("decrement").addEventListener("click", () => { + chrome.runtime.sendMessage( + { + action: "popupCallDecrement", + }, + () => { + update_count(); + }, + ); + }); + + document.getElementById("randomize").addEventListener("click", () => { + chrome.runtime.sendMessage( + { + action: "popupCallRandomize", + }, + () => { + needs_reset(); + }, + ); + }); + + document.getElementById("reset").addEventListener("click", () => { + chrome.runtime.sendMessage( + { + action: "popupCallReset", + }, + () => { + update_count(); + }, + ); + }); + + document.getElementById("countRequest").addEventListener("click", () => { + chrome.runtime.sendMessage({ action: "getNumImages" }, (response) => { + console.log(response.numImages); + }); + }); + + document.getElementById("exact").addEventListener("click", () => { + const value = parseInt(document.getElementById("exactIn").value, 10); + if (value >= 0 && value <= 2048) { + chrome.runtime.sendMessage( + { action: "popupCallSetExact", value: value }, + () => { + update_count(); + }, + ); + } else { + console.log("out of bounds"); + + let warning_text = document.getElementById("needsReset"); + warning_text.textContent = "hair amount must be between 0 and 2048!"; + } + }); +} + +function update_count(offrip = false) { + let counter = document.getElementById("counter"); + + chrome.runtime.sendMessage({ action: "getNumImages" }, (response) => { + counter.textContent = response.numImages; + }); + + if (!offrip) { + needs_reset(); + } +} + +function needs_reset() { + let warning_text = document.getElementById("needsReset"); + + warning_text.textContent = "Webpage must be reloaded for hair to be visible!"; +} From aafd567c8ae5d23c9598df677e05d34f5f64e91a Mon Sep 17 00:00:00 2001 From: BowLuckie Date: Tue, 16 Jun 2026 09:12:57 +1000 Subject: [PATCH 3/6] made pretty added svg icons, custom fonts, better coloring, light and dark mode and bumped manifest version --- manifest.json | 4 +- popup.css | 191 ++++++++++++++++++++++++++++++++++++++++++++++++++ popup.html | 84 ++++++++++++++++++---- popup.js | 23 +++--- 4 files changed, 272 insertions(+), 30 deletions(-) create mode 100644 popup.css diff --git a/manifest.json b/manifest.json index c5fc974..e88ea54 100644 --- a/manifest.json +++ b/manifest.json @@ -2,8 +2,8 @@ "manifest_version": 3, "name": "Hair on Screen", "description": "Displays a helpful hair on the screen", - "version": "0.0.0.2", - "author": "Anton Bovin | Ported to MV3 by ZenithKnight", + "version": "0.0.1", + "author": "Anton Bovin | Ported to MV3 by ZenithKnight | GUI made by BowLuckie", "action": { "default_icon": "assets/icons/icon128.png", "default_popup": "popup.html" diff --git a/popup.css b/popup.css new file mode 100644 index 0000000..7374385 --- /dev/null +++ b/popup.css @@ -0,0 +1,191 @@ +html, +body { + width: 500px; + height: 450px; + overflow: hidden; +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --bg: #f7f5f2; + --surface: #ffffff; + --border: #e2ddd8; + --text: #1a1916; + --muted: #8a8680; + --accent: #c1440e; + --accent-light: #fdf0eb; + --danger: #c1440e; + --mono: "DM Mono", monospace; + --sans: "DM Sans", sans-serif; +} + +@media (prefers-color-scheme: dark) { + :root { + --bg: #1a1916; + --surface: #232220; + --border: #2e2c29; + --text: #f0ede8; + --muted: #6b6860; + --accent: #e05a28; + --accent-light: #2a1a12; + --danger: #e05a28; + } +} + +body { + font-family: var(--sans); + background: var(--bg); + color: var(--text); +} + +.card { + background: var(--surface); + width: 100%; + height: 100%; + padding: 20px; +} + +.title { + font-family: var(--mono); + font-size: 11px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--muted); + margin-bottom: 0.5rem; +} + +.counter-display { + font-family: var(--mono); + font-size: 72px; + font-weight: 400; + line-height: 1; + color: var(--text); + margin-bottom: 0.25rem; + transition: color 0.15s; +} + +.counter-display.flash { + color: var(--accent); +} + +.divider { + border: none; + border-top: 1px solid var(--border); + margin: 1.5rem 0; +} + +.btn-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + margin-bottom: 8px; +} + +.btn-grid-2 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; +} + +button { + font-family: var(--sans); + font-size: 13px; + font-weight: 500; + color: var(--text); + background: var(--bg); + border: 1px solid var(--border); + border-radius: 10px; + padding: 10px 8px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 5px; + transition: + background 0.1s, + border-color 0.1s, + transform 0.08s; + white-space: nowrap; +} + +button:hover { + background: var(--border); + border-color: var(--muted); +} +button.danger { + border-color: var(--accent); + background: var(--accent-light); +} +button.danger:hover { + background: var(--accent-light); + filter: brightness(1.2); +} + +button:active { + transform: scale(0.96); +} +.exact-section { + margin-top: 8px; +} + +.exact-row { + display: flex; + gap: 8px; + margin-top: 8px; +} + +.exact-row input { + flex: 1; + font-family: var(--mono); + font-size: 13px; + color: var(--text); + background: var(--bg); + border: 1px solid var(--border); + border-radius: 10px; + padding: 10px 12px; + outline: none; + transition: border-color 0.15s; + min-width: 0; +} + +.exact-row input::placeholder { + color: var(--muted); +} +.exact-row input:focus { + border-color: var(--accent); +} + +.status { + margin-top: 1rem; + font-family: var(--mono); + font-size: 12px; + color: var(--muted); + min-height: 18px; + text-align: center; + transition: opacity 0.3s; +} + +.status.warn { + color: var(--accent); +} +.status.hidden { + opacity: 0; +} + +svg.icon { + width: 14px; + height: 14px; + stroke: currentColor; + fill: none; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + flex-shrink: 0; +} diff --git a/popup.html b/popup.html index 353a623..eefc169 100644 --- a/popup.html +++ b/popup.html @@ -3,26 +3,80 @@ - Hair on Screen Gui + Hair on Screen + + + + -

Hair Count:

-

0

+
+

Hair on screen

+

0

- - - - - - +
- +
+ + +
+ +
+ + +
+ +
+ +
+ + +
+ + +
-

diff --git a/popup.js b/popup.js index 04e25fc..9627227 100644 --- a/popup.js +++ b/popup.js @@ -48,14 +48,9 @@ function main() { ); }); - document.getElementById("countRequest").addEventListener("click", () => { - chrome.runtime.sendMessage({ action: "getNumImages" }, (response) => { - console.log(response.numImages); - }); - }); - document.getElementById("exact").addEventListener("click", () => { - const value = parseInt(document.getElementById("exactIn").value, 10); + const raw = parseInt(document.getElementById("exactIn").value, 10); + const value = isNaN(raw) ? 0 : raw; if (value >= 0 && value <= 2048) { chrome.runtime.sendMessage( { action: "popupCallSetExact", value: value }, @@ -64,10 +59,7 @@ function main() { }, ); } else { - console.log("out of bounds"); - - let warning_text = document.getElementById("needsReset"); - warning_text.textContent = "hair amount must be between 0 and 2048!"; + show_status("hair amount must be between 0 and 2048!", true); } }); } @@ -85,7 +77,12 @@ function update_count(offrip = false) { } function needs_reset() { - let warning_text = document.getElementById("needsReset"); + show_status("Webpage must be reloaded for changes to become visible!"); +} - warning_text.textContent = "Webpage must be reloaded for hair to be visible!"; +function show_status(text, isWarn = false) { + const el = document.getElementById("needsReset"); + el.textContent = text; + el.classList.remove("hidden"); + el.classList.toggle("warn", isWarn); } From 3a9b6b5f41307a8280e8297cb714cac4c91928e0 Mon Sep 17 00:00:00 2001 From: BowLuckie Date: Tue, 16 Jun 2026 09:34:33 +1000 Subject: [PATCH 4/6] added reload button to GUI --- manifest.json | 2 +- popup.css | 6 ++++++ popup.html | 17 ++++++++++++++--- popup.js | 8 ++++++++ 4 files changed, 29 insertions(+), 4 deletions(-) diff --git a/manifest.json b/manifest.json index e88ea54..e931c3f 100644 --- a/manifest.json +++ b/manifest.json @@ -13,7 +13,7 @@ "48": "assets/icons/icon48.png", "128": "assets/icons/icon128.png" }, - "permissions": ["contextMenus", "storage"], + "permissions": ["contextMenus", "storage", "tabs"], "background": { "service_worker": "background.js" }, diff --git a/popup.css b/popup.css index 7374385..c2fe795 100644 --- a/popup.css +++ b/popup.css @@ -189,3 +189,9 @@ svg.icon { stroke-linejoin: round; flex-shrink: 0; } + +.topRow { + display: flex; + justify-content: space-between; + align-items: flex-start; +} diff --git a/popup.html b/popup.html index eefc169..51f54d8 100644 --- a/popup.html +++ b/popup.html @@ -14,8 +14,19 @@
-

Hair on screen

-

0

+
+
+

Hair on screen

+

0

+
+ +
@@ -74,7 +85,7 @@
- +

You can toggle this popups visibility in the context menu for discrete pranking!

diff --git a/popup.js b/popup.js index 9627227..12cd307 100644 --- a/popup.js +++ b/popup.js @@ -48,6 +48,14 @@ function main() { ); }); + document.getElementById("reloadPage").addEventListener("click", () => { + chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { + chrome.tabs.reload(tabs[0].id, () => { + show_status("Page Reloaded!", false); + }); + }); + }); + document.getElementById("exact").addEventListener("click", () => { const raw = parseInt(document.getElementById("exactIn").value, 10); const value = isNaN(raw) ? 0 : raw; From b68f8f9ee53da3ef5f8d54bece2888889b5f9136 Mon Sep 17 00:00:00 2001 From: BowLuckie Date: Tue, 16 Jun 2026 10:11:24 +1000 Subject: [PATCH 5/6] allowed GUI to be disable + misc improvements and formatting --- background.js | 125 ++++++++++++++++++++++------------------------ content_script.js | 61 +++++++++++----------- popup.html | 7 ++- popup.js | 6 +++ 4 files changed, 103 insertions(+), 96 deletions(-) diff --git a/background.js b/background.js index 67f5928..8240d57 100644 --- a/background.js +++ b/background.js @@ -1,112 +1,109 @@ -// generate the context menus brought up by clicking the browser action chrome.storage.sync.get("numHairImages", function (items) { var hairCount = items.hasOwnProperty("numHairImages") ? items.numHairImages : 1; - chrome.contextMenus.removeAll(); - chrome.contextMenus.create({ - title: hairCountText(hairCount), - id: "hair_count", - contexts: ["action"], - enabled: false, - }); - chrome.contextMenus.create({ - title: "More hair!", - id: "more_hair", - contexts: ["action"], - }); - chrome.contextMenus.create({ - title: "Less hair!", - id: "less_hair", - contexts: ["action"], - }); - chrome.contextMenus.create({ - title: "Reset hair!", - id: "reset_hair", - contexts: ["action"], - }); - chrome.contextMenus.create({ - title: "Randomize hair!", - id: "randomize_hair", - contexts: ["action"], - }); - chrome.contextMenus.create({ - title: "(reload after updating)", - id: "reload_prompt", - contexts: ["action"], - enabled: false, + chrome.storage.local.get("guiEnabled", (data) => { + const enabled = data.guiEnabled ?? false; + updatePopup(enabled); + + chrome.contextMenus.removeAll(); + chrome.contextMenus.create({ + title: hairCountText(hairCount), + id: "hair_count", + contexts: ["action"], + enabled: false, + }); + chrome.contextMenus.create({ + title: "More hair!", + id: "more_hair", + contexts: ["action"], + }); + chrome.contextMenus.create({ + title: "Less hair!", + id: "less_hair", + contexts: ["action"], + }); + chrome.contextMenus.create({ + title: "Reset hair!", + id: "reset_hair", + contexts: ["action"], + }); + chrome.contextMenus.create({ + title: "Randomize hair!", + id: "randomize_hair", + contexts: ["action"], + }); + chrome.contextMenus.create({ + title: "Allow GUI menu", + id: "toggleGui", + type: "checkbox", + checked: enabled, + contexts: ["action"], + }); + chrome.contextMenus.create({ + title: "(reload after updating)", + id: "reload_prompt", + contexts: ["action"], + enabled: false, + }); }); }); -// handle context menu clicks -chrome.contextMenus.onClicked.addListener(function (info) { +chrome.contextMenus.onClicked.addListener((info) => { if (info.menuItemId == "more_hair") incrementNumImages(); else if (info.menuItemId == "less_hair") decrementNumImages(); else if (info.menuItemId == "randomize_hair") randomizeHair(); else if (info.menuItemId == "reset_hair") resetNumImages(); + else if (info.menuItemId == "toggleGui") toggleGui(info.checked); }); -// displays count function hairCountText(num) { return "Hair count: " + num; } -// general function for updating the hair count function updateNumImages(updateFunction) { chrome.storage.sync.get("numHairImages", function (items) { - var numHairImages; - if (items.hasOwnProperty("numHairImages")) { - numHairImages = updateFunction(items.numHairImages); - } else { - numHairImages = updateFunction(1); - } - + var numHairImages = items.hasOwnProperty("numHairImages") + ? updateFunction(items.numHairImages) + : updateFunction(1); chrome.storage.sync.set({ numHairImages: numHairImages }); - chrome.contextMenus.update("hair_count", { title: hairCountText(numHairImages), }); }); } -// increment count function incrementNumImages() { - updateNumImages(function (num) { - return num + 1; - }); + updateNumImages((num) => Math.min(2048, num + 1)); } - -// decrement count function decrementNumImages() { - updateNumImages(function (num) { - return Math.max(0, num - 1); - }); + updateNumImages((num) => Math.max(0, num - 1)); } - -// reset count to 1 function resetNumImages() { - updateNumImages(function () { - return 1; - }); + updateNumImages(() => 1); } - -// randomize positions function randomizeHair() { chrome.storage.sync.set({ hairImages: [] }); } -// connect popup and background +function updatePopup(enabled) { + chrome.action.setPopup({ popup: enabled ? "popup.html" : "" }); +} + +function toggleGui(checked) { + chrome.storage.local.set({ guiEnabled: checked }); + updatePopup(checked); +} + chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => { let action = message.action; - if (action == "getNumImages") { chrome.storage.sync.get("numHairImages", (items) => { sendResponse({ numImages: items.numHairImages ?? 1 }); }); return true; } - if (action == "popupCallIncrement") { incrementNumImages(); sendResponse({}); diff --git a/content_script.js b/content_script.js index e5017e0..97c5813 100644 --- a/content_script.js +++ b/content_script.js @@ -1,58 +1,58 @@ var w = 200; var h = 200; var imageUrls = [ - 'assets/h1.png', - 'assets/h2.png', - 'assets/h3.png', - 'assets/h4.png', - 'assets/h5.png', - 'assets/h6.png', - 'assets/h7.png', - 'assets/h8.png', - 'assets/h9.png', - 'assets/h10.png', - 'assets/h11.png', - 'assets/h12.png', - 'assets/h13.png', - 'assets/h14.png', - 'assets/h15.png' + "assets/h1.png", + "assets/h2.png", + "assets/h3.png", + "assets/h4.png", + "assets/h5.png", + "assets/h6.png", + "assets/h7.png", + "assets/h8.png", + "assets/h9.png", + "assets/h10.png", + "assets/h11.png", + "assets/h12.png", + "assets/h13.png", + "assets/h14.png", + "assets/h15.png", ]; render(); function render() { // get the number of images in the global store - chrome.storage.sync.get("numHairImages", function(items) { + chrome.storage.sync.get("numHairImages", function (items) { var numHairImages = 1; if (items.hasOwnProperty("numHairImages")) { numHairImages = items.numHairImages; } // if no image number in the store, store the default number else { - chrome.storage.sync.set( {"numHairImages": numHairImages } ); + chrome.storage.sync.set({ numHairImages: numHairImages }); } - + insertImages(numHairImages); }); } function insertImages(numHairImages) { - chrome.storage.sync.get("hairImages", function(items) { + chrome.storage.sync.get("hairImages", function (items) { var hairImages = []; var needUpdate = false; - + if (items.hasOwnProperty("hairImages")) { hairImages = items.hairImages; } - for (var i=0; i - Reload Page + Reload @@ -85,7 +85,10 @@ -

You can toggle this popups visibility in the context menu for discrete pranking!

+

+ You can toggle this popups visibility in the context menu for discrete + pranking! +

diff --git a/popup.js b/popup.js index 12cd307..332871c 100644 --- a/popup.js +++ b/popup.js @@ -70,6 +70,12 @@ function main() { show_status("hair amount must be between 0 and 2048!", true); } }); + + document.getElementById("exactIn").addEventListener("keydown", (k) => { + if (k.key === "Enter") { + document.getElementById("exact").click(); + } + }); } function update_count(offrip = false) { From 34f56f6598a5f42eb44ab6c38cae2d57bfbcfc3f Mon Sep 17 00:00:00 2001 From: BowLuckie Date: Tue, 16 Jun 2026 10:28:32 +1000 Subject: [PATCH 6/6] improved gui light mode contrast --- popup.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/popup.css b/popup.css index c2fe795..850259a 100644 --- a/popup.css +++ b/popup.css @@ -14,11 +14,11 @@ body { } :root { - --bg: #f7f5f2; + --bg: #ece8e2; --surface: #ffffff; - --border: #e2ddd8; - --text: #1a1916; - --muted: #8a8680; + --border: #d4cdc4; + --text: #15140f; + --muted: #6b675f; --accent: #c1440e; --accent-light: #fdf0eb; --danger: #c1440e; @@ -50,6 +50,7 @@ body { width: 100%; height: 100%; padding: 20px; + border: solid var(--accent) 2px; } .title {