diff --git a/simple-translate/_locales/en/messages.json b/simple-translate/_locales/en/messages.json index 077cb49..7d69960 100644 --- a/simple-translate/_locales/en/messages.json +++ b/simple-translate/_locales/en/messages.json @@ -112,6 +112,9 @@ "fontSizeLabel": { "message": "Font size" }, + "bgColorLabel": { + "message": "Background color" + }, "informationLabel": { "message": "Information" diff --git a/simple-translate/options/options.css b/simple-translate/options/options.css index cc63b6d..ae12d9e 100644 --- a/simple-translate/options/options.css +++ b/simple-translate/options/options.css @@ -188,7 +188,8 @@ input { } input[type="number"], -input[type="text"] { +input[type="text"], +input[type="color"] { -moz-appearance: textfield; width: 50px; height: 30px; @@ -200,8 +201,10 @@ input[type="text"] { input[type="number"]:hover, input[type="text"]:hover, +input[type="color"]:hover, input[type="number"]:focus, -input[type="text"]:focus { +input[type="text"]:focus, +input[type="color"]:focus { border-color: var(--highlight); } @@ -209,6 +212,11 @@ input[type="text"] { width: 200px; } +input[type="color"] { + background-color: var(--main-bg); + padding: 5px; +} + .button { display: flex; flex-direction: column; diff --git a/simple-translate/options/options.html b/simple-translate/options/options.html index c4221ba..33cd148 100644 --- a/simple-translate/options/options.html +++ b/simple-translate/options/options.html @@ -242,6 +242,18 @@ + +
  • +
    +

    背景色

    +
    +
    + +
    +
  • diff --git a/simple-translate/simple-translate.js b/simple-translate/simple-translate.js index 8b8c9ee..d373e73 100644 --- a/simple-translate/simple-translate.js +++ b/simple-translate/simple-translate.js @@ -180,6 +180,7 @@ function panelPosition(e) { panel.style.maxWidth = S.get().width + "px"; panel.style.maxHeight = S.get().height + "px"; panel.style.fontSize = S.get().fontSize + "px"; + panel.style.backgroundColor = S.get().bgColor; }