From 5467ee359698be9c5f7a5f8d05edc75531e88b76 Mon Sep 17 00:00:00 2001
From: sienori <iilll7d6f@yahoo.co.jp>
Date: Thu, 28 Dec 2017 01:20:39 +0900
Subject: [PATCH] Add an option background color of translation panel

---
 simple-translate/_locales/en/messages.json |  3 +++
 simple-translate/options/options.css       | 12 ++++++++++--
 simple-translate/options/options.html      | 12 ++++++++++++
 simple-translate/simple-translate.js       |  1 +
 4 files changed, 26 insertions(+), 2 deletions(-)

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