obsqrbtz/goose-highlighter
1
0
Fork 0
mirror of https://github.com/obsqrbtz/goose-highlighter.git synced 2026-04-08 20:19:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix inputs styling

Browse Source
This commit is contained in:
Daniel Dada
2025-06-16 19:17:41 +03:00
parent 1fe6c1830e
commit 49a29e1379
2 changed files with 55 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
popup/popup.css
View File

@@ -63,6 +63,9 @@ select {
textarea { textarea {
height: 70px; height: 70px;
resize: vertical; resize: vertical;
background-color: var(--input-bg) !important;
color: var(--text-color) !important;
border: 1px solid var(--input-border) !important;
} }
input[type="color"] { input[type="color"] {
@@ -126,6 +129,9 @@ button:hover {
#wordList input[type="text"] { #wordList input[type="text"] {
flex: 2; flex: 2;
background-color: var(--input-bg) !important;
color: var(--text-color) !important;
border: 1px solid var(--input-border) !important;
} }
#wordList input[type="color"] { #wordList input[type="color"] {

58
popup/popup.js
View File

@@ -49,15 +49,55 @@ function updateListForm() {
function renderWords() { function renderWords() {
const list = lists[currentListIndex]; const list = lists[currentListIndex];
wordList.innerHTML = list.words.map((w, i) => ` wordList.innerHTML = ""; // Clear first
<div>
<input type="checkbox" data-index="${i}"> list.words.forEach((w, i) => {
<input value="${w.wordStr}" data-word-edit="${i}"> const container = document.createElement("div");
<input type="color" value="${w.background || list.background}" data-bg-edit="${i}">
<input type="color" value="${w.foreground || list.foreground}" data-fg-edit="${i}"> const cbSelect = document.createElement("input");
<label><input type="checkbox" ${w.active ? "checked" : ""} data-active-edit="${i}"> ${chrome.i18n.getMessage("word_active_label")}</label> cbSelect.type = "checkbox";
</div> cbSelect.dataset.index = i;
`).join("");
const inputWord = document.createElement("input");
inputWord.type = "text";
inputWord.value = w.wordStr;
inputWord.dataset.wordEdit = i;
const inputBg = document.createElement("input");
inputBg.type = "color";
inputBg.value = w.background || list.background;
inputBg.dataset.bgEdit = i;
const inputFg = document.createElement("input");
inputFg.type = "color";
inputFg.value = w.foreground || list.foreground;
inputFg.dataset.fgEdit = i;
const labelActive = document.createElement("label");
const cbActive = document.createElement("input");
cbActive.type = "checkbox";
if (w.active) cbActive.checked = true;
cbActive.dataset.activeEdit = i;
labelActive.appendChild(cbActive);
labelActive.appendChild(document.createTextNode(" " + chrome.i18n.getMessage("word_active_label")));
container.appendChild(cbSelect);
container.appendChild(inputWord);
container.appendChild(inputBg);
container.appendChild(inputFg);
container.appendChild(labelActive);
const styles = getComputedStyle(document.documentElement);
const bg = styles.getPropertyValue('--input-bg').trim();
const fg = styles.getPropertyValue('--text-color').trim();
const border = styles.getPropertyValue('--input-border').trim();
inputWord.style.backgroundColor = bg;
inputWord.style.color = fg;
inputWord.style.border = `1px solid ${border}`;
wordList.appendChild(container);
});
} }
listSelect.onchange = () => { listSelect.onchange = () => {