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 @@
+
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 @@
+
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;