Add an option background color of translation panel

simple-translate/_locales/en/messages.json

@@ -112,6 +112,9 @@
     "fontSizeLabel": {
         "message": "Font size"
     },
+    "bgColorLabel": {
+        "message": "Background color"
+    },
 
     "informationLabel": {
         "message": "Information"

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;

simple-translate/options/options.html

@@ -242,6 +242,18 @@
                                     </label>
                                 </div>
                             </li>
+
+                            <li class="optionContainer new">
+                                <div class=optionText>
+                                    <p class=bgColorLabel>背景色</p>
+                                </div>
+                                <div class=optionForm>
+                                    <label>
+                                        <input id=bgColor class=saveByChange type=color value="#ffffff">
+
+                                    </label>
+                                </div>
+                            </li>
                         </ul>
                     </ul>
                 </li>

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;
 }