From 8200bfcbadaf36b410085e21f4ca4955edf80aff Mon Sep 17 00:00:00 2001
From: Arkerthan <arkerthan@gmail.com>
Date: Sat, 19 Dec 2020 13:35:33 +0100
Subject: [PATCH] style <select> on options system properly
---
src/gui/css/options.css | 33 ++++++++++++++++++++++++++++-----
src/gui/options/options.js | 1 -
2 files changed, 28 insertions(+), 6 deletions(-)
diff --git a/src/gui/css/options.css b/src/gui/css/options.css
index b1210d5cd9c..d1d13a5cda8 100644
--- a/src/gui/css/options.css
+++ b/src/gui/css/options.css
@@ -71,11 +71,19 @@ div.options-group button.neutral:hover {
div.options-group input {
border: 2px solid var(--button-border-color);
min-width: unset; /* remove SC styling */
- width: 140px;
+ width: 12em;
+ /* move back so that the outline of a potential select overlaps in front */
+ position:relative;
+ z-index: 0;
+}
+
+.options-group input:hover, .options-group input:focus {
+ /* show highlighted border in front of neighbours */
+ z-index: 1
}
div.options-group input.number {
- width: 50px;
+ width: 4em;
}
div.options-group input.full-width {
@@ -88,18 +96,33 @@ div.options-group input.full-width {
width: 70vw
}
+.options-group select {
+ border: none; /* outline instead of border */
+ /* left & right outline overlap each other so we don't have a double border */
+ outline: solid 2px var(--button-border-color);
+ margin-left: 2px;
+ min-width: 12em;
+ /* move in front of a potential textbox, so the outline overlaps the border of the textbox */
+ position: relative;
+ z-index: 1;
+}
+
+.options-group select:hover {
+ outline: solid 2px #eee;
+}
+
/* double column */
@media only screen and (min-width: 1600px) {
- div.options-group.double {
+ .options-group.double {
grid-template-columns: max-content auto max-content auto;
}
- div.options-group.double .custom-row {
+ .options-group.double .custom-row {
width: 35vw
}
}
-
+/* other */
.subHeading {
width: 85%;
text-align: center;
diff --git a/src/gui/options/options.js b/src/gui/options/options.js
index eed4aae82e3..a6ffd817607 100644
--- a/src/gui/options/options.js
+++ b/src/gui/options/options.js
@@ -272,7 +272,6 @@ App.UI.OptionsGroup = (function() {
} else {
let matchFound = false;
let select = document.createElement("select");
- select.classList.add("rajs-list");
for (const value of this.valuePairs) {
let el = document.createElement("option");
--
GitLab