Changeset d6bdbae in Klonkt

Timestamp:

06/21/2026 04:54:40 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

2520dcc

Parents:

421c2d4

Message:

style(instellingen): styled selects instead of bare native dropdowns

.set-form select received no styling → native look. Now same style as inputs:
appearance:none + custom chevron SVG, accent focus, full width. Affects the
Default Language and Timezone dropdowns (+ future selects in admin settings).

Co-Authored-By: Claude <noreply@…>

File:

• src/views/pages/admin-settings.ejs (modified) (1 diff)

src/views/pages/admin-settings.ejs

@@ -277 +277 @@
 .set-field textarea { resize: vertical; }
 .set-field input:focus, .set-field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
+/* Selects dezelfde nette stijl als de inputs i.p.v. de kale native dropdown:
+   eigen chevron, accent-focus, volle breedte. */
+.set-form select {
+  appearance: none; -webkit-appearance: none;
+  width: 100%; box-sizing: border-box;
+  padding: 0.55rem 2.2rem 0.55rem 0.7rem;
+  border: 1px solid var(--rule); border-radius: 6px;
+  background-color: var(--paper); color: var(--ink);
+  font: inherit; font-size: 0.95rem; cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat; background-position: right 0.7rem center;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.set-form select:hover { border-color: var(--ink-soft, #888); }
+.set-form select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
+.set-form select option { background: var(--paper); color: var(--ink); }
 .alert { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
 .alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }