From f109b7a762b83eaf86c95e42827dc8f9443e1cd3 Mon Sep 17 00:00:00 2001
From: maxpozdeev <maxpozdeev@gmail.com>
Date: Sat, 19 Nov 2022 21:28:16 +0300
Subject: [PATCH] * apply css appearance for select

---
 src/content/theme/dark.css               |  3 +++
 src/content/theme/images/select-dark.svg |  3 +++
 src/content/theme/images/select.svg      |  3 +++
 src/content/theme/style.css              | 20 +++++++++++++++++---
 4 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 src/content/theme/images/select-dark.svg
 create mode 100644 src/content/theme/images/select.svg

diff --git a/src/content/theme/dark.css b/src/content/theme/dark.css
index 5b6615c..a73faa9 100644
--- a/src/content/theme/dark.css
+++ b/src/content/theme/dark.css
@@ -29,6 +29,7 @@
     --color-error-bg: var(--color-bg);
     --color-info: #EFC300;
     --color-info-bg: var(--color-bg);
+    --color-input-bg: #1e1e1e;
 
     --color-toolbar: #3b3b3b;
     --color-btn-toolbar-hover: #555;
@@ -90,5 +91,7 @@
     --color-placeholder: #444;
     --color-placeholder-border: #555;
 
+    /*--svg-select: url(images/select-dark.svg);*/
+    --svg-select: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxNCI+PHBvbHlsaW5lIHBvaW50cz0iMiA2LCA3IDExLCAxMiA2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2FhYSIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
   }
 }
diff --git a/src/content/theme/images/select-dark.svg b/src/content/theme/images/select-dark.svg
new file mode 100644
index 0000000..e99c82a
--- /dev/null
+++ b/src/content/theme/images/select-dark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+<polyline points="2 6, 7 11, 12 6" stroke-width="2" stroke="#aaa" fill="none"/>
+</svg>
diff --git a/src/content/theme/images/select.svg b/src/content/theme/images/select.svg
new file mode 100644
index 0000000..0895202
--- /dev/null
+++ b/src/content/theme/images/select.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+<polyline points="2 6, 7 11, 12 6" stroke-width="2" stroke="#444" fill="none"/>
+</svg>
diff --git a/src/content/theme/style.css b/src/content/theme/style.css
index db19a96..24c9cc9 100644
--- a/src/content/theme/style.css
+++ b/src/content/theme/style.css
@@ -33,6 +33,7 @@
   --color-error-bg: #ff3333;
   --color-info: var(--color-text-reduced);
   --color-info-bg: #EFC300;
+  --color-input-bg: #fff;
 
   --color-toolbar: #ededed;
   --color-btn-toolbar-hover: #ddd;
@@ -97,6 +98,8 @@
   --color-placeholder: #ddd;
   --color-placeholder-border: #aaa;
 
+  /*--svg-select: url(images/select.svg);*/
+  --svg-select: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxNCI+PHBvbHlsaW5lIHBvaW50cz0iMiA2LCA3IDExLCAxMiA2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iIzQ0NCIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
 }
 
 /*	default style	*/
@@ -192,11 +195,16 @@ a { color: var(--color-link); cursor:pointer; text-decoration:underline; }
 .form-input {
   padding: 3px;
   border: 1px solid var(--color-border-default);
+  background-color: var(--color-input-bg);
   border-radius: 2px;
   transition: box-shadow .15s ease-in-out;
 }
 select.form-input {
-  padding:2px;
+  appearance: none;
+  -webkit-appearance: none; -moz-appearance: none;
+  background: var(--color-input-bg) var(--svg-select) no-repeat top 4px right 5px;
+  background-size: 1rem 1rem;
+  padding-right: calc(1rem + 10px);
 }
 .form-input:focus {
   outline: none;
@@ -971,10 +979,16 @@ li.mtt-item-hidden { display:none; }
   padding: 3px;
   border: 1px solid var(--color-border-default);
   border-radius: 2px;
-  /*background-color: var(--color-bg);*/
+  background-color: var(--color-input-bg);
   color: var(--color-text-default)
 }
-.mtt-settings-table select { padding:2px; }
+.mtt-settings-table select {
+  appearance: none;
+  -webkit-appearance: none; -moz-appearance: none;
+  background: var(--color-input-bg) var(--svg-select) no-repeat top 4px right 5px;
+  background-size: 1rem 1rem;
+  padding-right: calc(1rem + 10px);
+}
 .mtt-settings-table input:focus,
 .mtt-settings-table select:focus {
   outline:none;