diff --git a/simple-translate/icons/setting.png b/simple-translate/icons/setting.png
deleted file mode 100644
index 25b339d..0000000
Binary files a/simple-translate/icons/setting.png and /dev/null differ
diff --git a/simple-translate/popup/popup.css b/simple-translate/popup/popup.css
index 6f86c73..6b26662 100644
--- a/simple-translate/popup/popup.css
+++ b/simple-translate/popup/popup.css
@@ -22,6 +22,14 @@ body {
flex-direction: column;
}
+.hidden {
+ display: none;
+}
+
+svg {
+ pointer-events: none;
+}
+
#header {
padding: 10px;
background-color: var(--line);
@@ -41,15 +49,33 @@ body {
cursor: default;
}
+#header .rightButtons {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-end;
+}
+
#setting {
- height: 17px;
- width: 17px;
- background-image: url("/icons/setting.png");
- background-size: 17px;
- background-repeat: no-repeat;
+ display: flex;
+ align-items: center;
cursor: pointer;
}
+#setting svg {
+ flex-shrink: 0;
+ height: 18px;
+ width: 18px;
+ fill: var(--sub-text);
+ transform: rotate(180deg);
+ transition: fill 100ms, transform 300ms ease;
+}
+
+#setting:hover svg {
+ fill: var(--highlight);
+ transform: rotate(270deg);
+}
+
#main {
padding: 10px;
}
diff --git a/simple-translate/popup/popup.html b/simple-translate/popup/popup.html
index 8978ad2..b5a8c23 100644
--- a/simple-translate/popup/popup.html
+++ b/simple-translate/popup/popup.html
@@ -8,11 +8,41 @@
+
diff --git a/simple-translate/popup/popup.js b/simple-translate/popup/popup.js
index b4b3e13..279149b 100644
--- a/simple-translate/popup/popup.js
+++ b/simple-translate/popup/popup.js
@@ -48,6 +48,11 @@ function setLangList() {
langList.innerHTML = langListHtml;
}
+setTitles();
+function setTitles(){
+ document.getElementById("setting").title = browser.i18n.getMessage('settingsLabel');
+}
+
function alphabeticallySort(a, b) {
if (a[1].toString() > b[1].toString()) {
return 1;