Merge pull request #7 from ChrisChrome/copilot/fix-theme-dropdowns

Fix select dropdown vertical offset in inline forms

public/css/style.css

@@ -56,7 +56,8 @@ label {
 	color: var(--muted);
 }
 
-input {
+input,
+select {
 	width: 100%;
 	padding: 10px 12px;
 	margin-bottom: 16px;
@@ -67,7 +68,25 @@ input {
 	font-size: 14px;
 }
 
-input:focus {
+select {
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	/* Chevron stroke color is #8b93a7, matching --muted (data URIs can't reference CSS variables). */
+	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+	background-repeat: no-repeat;
+	background-position: right 10px center;
+	background-size: 16px;
+	padding-right: 32px;
+}
+
+select option {
+	background: var(--panel);
+	color: var(--text);
+}
+
+input:focus,
+select:focus {
 	outline: none;
 	border-color: var(--accent);
 }
@@ -285,6 +304,11 @@ button.danger {
 	padding: 6px 8px;
 }
 
+.reader-card .field select {
+	/* Keep room for the chevron icon within the narrow 90px width. */
+	padding-right: 28px;
+}
+
 .reader-card .actions {
 	display: flex;
 	flex-wrap: wrap;
@@ -339,7 +363,8 @@ button.danger {
 	margin-bottom: 4px;
 }
 
-.inline-form input {
+.inline-form input,
+.inline-form select {
 	margin-bottom: 0;
 }