diff --git a/extras/popup/popup.css b/extras/popup/popup.css index d71c0304..7c51540e 100644 --- a/extras/popup/popup.css +++ b/extras/popup/popup.css @@ -68,15 +68,6 @@ a { .feature label { color: var(--primary-color); - position: relative; - top: -0.7rem; - margin-left: 0.5rem; -} - -.feature input[type="checkbox"] { - display: inline-block; - width: 1.25rem; - cursor: pointer; } .feature > span { @@ -108,9 +99,10 @@ a { margin-bottom: 0rem; } .feature p { - color: var(--secondary-color); + margin: 5px 0; opacity: 0.5; padding-right: 4rem; + color: var(--secondary-color); } .feature > input { @@ -121,11 +113,11 @@ a { .feature input { padding: 0.1vw; height: 2rem; - margin-left: 0.5vw; - background-color: var(--theme); + margin-left: auto; border-radius: 1rem; outline: none; border: 0px; + background-color: var(--theme); color: white; } @@ -133,7 +125,6 @@ a { color: var(--color); background-color: var(--feature-input-bg); padding-left: 1rem !important; - margin-bottom: 0.5rem; } .feature button { cursor: pointer; @@ -242,7 +233,7 @@ a { .feature input { padding: 0.1vw; height: 2rem; - margin-left: 0.5vw; + margin-left: auto; border-radius: 1rem; outline: none; border: 0px; @@ -250,6 +241,17 @@ a { background-color: var(--feature-input-bg); } +.feature input[type="checkbox"] { + display: inline-block; + width: 1.25rem; + min-width: 55px; + cursor: pointer; +} +.feature input[type="color"] { + padding: 0.1vw !important; + border-radius: 0.4rem; +} + /*Switch*/ .switch { position: relative; @@ -435,14 +437,17 @@ span.new-feature-tag.beta { } .special-switch { - position: relative; width: 55px; height: 28px; + margin-left: auto; transform: scale(80%); - float: right; position: relative; - top: -0.25rem; - margin: 0px; +} + +.feature .option { + display: flex; + margin: 5px 0; + align-items: center; } .feature table, diff --git a/extras/popup/popup.js b/extras/popup/popup.js index 03fb7138..3a391a4a 100644 --- a/extras/popup/popup.js +++ b/extras/popup/popup.js @@ -686,42 +686,33 @@ async function getFeatures() { for (var optionPlace in feature.options) { var option = feature.options[optionPlace]; var input = document.createElement("input"); + input.type = ["text", "checkbox", "number", "color"][option.type || 0]; input.dataset.id = option.id; input.dataset.feature = feature.id; - input.placeholder = option.name; - input.type = ["text", "checkbox", "number", "color"][option.type || 0]; var optionData = (await chrome.storage.sync.get(option.id))[option.id]; input.value = optionData || ""; + input.placeholder = `Enter ${input.type}`; + var optionDiv = document.createElement("div") + optionDiv.className = "option"; + var label = document.createElement("label"); + label.textContent = option.name; + optionDiv.appendChild(label) + if (input.type === "checkbox") { + input.checked = optionData || false; var specialLabel = document.createElement("label"); specialLabel.className = "special-switch"; - input.className = "checkbox" + input.classList.add = "checkbox" var span = document.createElement("span"); span.className = "slider round"; specialLabel.appendChild(input); specialLabel.appendChild(span); + optionDiv.appendChild(specialLabel) } else { - div.appendChild(input); - } - if (input.type === "checkbox") { - let table = document.createElement("table") - let tr = document.createElement("tr") - table.appendChild(tr) - - let td1 = document.createElement("td") - tr.appendChild(td1) - let td2 = document.createElement("td") - tr.appendChild(td2) - - div.appendChild(table) - - var label = document.createElement("label"); - label.textContent = option.name; - label.style.marginLeft = "0px" - td1.appendChild(label); - td2.appendChild(specialLabel) - input.checked = optionData || false; + optionDiv.appendChild(input) } + div.appendChild(optionDiv) + input.dataset.validation = btoa( JSON.stringify(option.validation || []) ); diff --git a/extras/style.css b/extras/style.css index 7f86b845..5ac4ce29 100644 --- a/extras/style.css +++ b/extras/style.css @@ -122,6 +122,7 @@ a { } .feature p { + margin: 5px 0; opacity: 0.5; font-size: 0.8rem; padding-right: 4rem; @@ -131,11 +132,10 @@ a { .feature input { padding: 0.1vw; height: 2rem; - margin-left: 0.5vw; + margin-left: auto; border-radius: 1rem; outline: none; padding-left: 1rem; - margin-bottom: 0.5rem; border: 0px; color: var(--primary-color); background-color: var(--feature-input-bg); @@ -144,8 +144,13 @@ a { .feature input[type="checkbox"] { display: inline-block; width: 1.25rem; + min-width: 55px; cursor: pointer; } +.feature input[type="color"] { + padding: 0.1vw; + border-radius: 0.4rem; +} .feature > input { display: block; @@ -188,9 +193,6 @@ a { .feature label { color: var(--primary-color); - position: relative; - top: -0.7rem; - margin-left: 0.5rem; } .feature > span { @@ -793,14 +795,17 @@ span.new-feature-tag.beta { } .special-switch { - position: relative; width: 55px; height: 28px; - margin: 0px; + margin-left: auto; transform: scale(80%); - float: right; position: relative; - top: -0.25rem; +} + +.feature .option { + display: flex; + margin: 5px 0; + align-items: center; } .feature table,