diff --git a/ext/src/ui/options/index.tsx b/ext/src/ui/options/index.tsx index 6bf09a1..1a5f7c1 100644 --- a/ext/src/ui/options/index.tsx +++ b/ext/src/ui/options/index.tsx @@ -21,10 +21,48 @@ const _ = browser.i18n.getMessage; // macOS styles browser.runtime.getPlatformInfo() .then(platformInfo => { - if (platformInfo.os === "mac") { - const link = document.createElement("link"); - link.rel = "stylesheet"; - link.href = "styles/mac.css"; + const link = document.createElement("link"); + link.rel = "stylesheet"; + + switch (platformInfo.os) { + case "mac": { + link.href = "styles/mac.css"; + break; + } + + // Fix issue with input[type="number"] height + case "linux": { + link.href = "styles/linux.css"; + + const input = document.createElement("input"); + const inputWrapper = document.createElement("div"); + + inputWrapper.append(input) + document.documentElement.append(inputWrapper); + + input.type = "text"; + const textInputHeight = window.getComputedStyle(input).height; + input.type = "number"; + const numberInputHeight = window.getComputedStyle(input).height; + + inputWrapper.remove(); + + if (numberInputHeight !== textInputHeight) { + const style = document.createElement("style"); + style.textContent = ` + input[type="number"] { + height: ${textInputHeight}; + } + `; + + document.body.append(style) + } + + break; + } + } + + if (link.href) { document.head.appendChild(link); } }); diff --git a/ext/src/ui/options/styles/index.css b/ext/src/ui/options/styles/index.css index d90b698..62be244 100644 --- a/ext/src/ui/options/styles/index.css +++ b/ext/src/ui/options/styles/index.css @@ -7,8 +7,8 @@ box-shadow: 0 0 1.5px 1px red; } -body { - margin: 20px 10px; +#root { + padding: 20px 10px; } #form { diff --git a/ext/src/ui/options/styles/linux.css b/ext/src/ui/options/styles/linux.css new file mode 100644 index 0000000..776055b --- /dev/null +++ b/ext/src/ui/options/styles/linux.css @@ -0,0 +1,15 @@ +:root { + --border-color: graytext; + --secondary-color: graytext; +} + +body { + padding: 20px 0; +} + +#root { + background-color: -moz-dialog; + border-radius: 5px; + color: -moz-dialogtext; + overflow: hidden; +}