From 1e317d11daec1c1aaad2adcfc4e4ae5f57fa6cd1 Mon Sep 17 00:00:00 2001
From: fen <fen@fen-vm.archfox.org>
Date: Wed, 9 Sep 2026 21:45:22 -0500
Subject: [PATCH] UI polish: placeholder slash, styled controls, admin link
 spacing (#123)

---
 internal/web/static/app.css     | 83 +++++++++++++++++++++++++++++++++
 internal/web/templates/new.html |  2 +-
 2 files changed, 84 insertions(+), 1 deletion(-)

diff --git a/internal/web/static/app.css b/internal/web/static/app.css
index 20732be..4dd8e73 100644
--- a/internal/web/static/app.css
+++ b/internal/web/static/app.css
@@ -544,3 +544,86 @@ a.admin-link:hover { color: var(--fg); text-decoration: underline; }
 .can-item-row { margin-top: 8px; }
 .can-item-row .can-item-title { width: 100%; margin-bottom: 6px; }
 .can-item-row .can-item-content { width: 100%; font-family: var(--mono, monospace); resize: vertical; }
+
+/* ============================================================
+   Styled controls (#123) — buttons, selects, checkboxes, radios
+   match the custom URL box house pattern: 1px var(--border) on
+   var(--bg), var(--radius) corners, accent border on focus, no
+   default browser chrome (appearance: none).
+   ============================================================ */
+
+/* selects: replace native chrome with a house-styled pill */
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
+  color: var(--fg);
+  font: inherit;
+  padding: 4px 30px 4px 12px;
+  cursor: pointer;
+  outline: none;
+  transition: border-color .12s ease, background-color .12s ease;
+}
+select:hover { border-color: var(--muted-fg); background-color: var(--surface-2); }
+select:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
+.editor-head select { padding: 4px 30px 4px 10px; }
+
+/* checkboxes and radios: custom drawn, accent when checked */
+input[type="checkbox"],
+input[type="radio"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 16px; height: 16px; margin: 0; flex-shrink: 0;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  cursor: pointer;
+  position: relative;
+  transition: border-color .12s ease, background-color .12s ease;
+}
+input[type="checkbox"] { border-radius: 4px; }
+input[type="radio"] { border-radius: 50%; }
+input[type="checkbox"]:hover,
+input[type="radio"]:hover { border-color: var(--muted-fg); }
+input[type="checkbox"]:checked,
+input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
+input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute; inset: 0;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l4 4 6-8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
+}
+input[type="radio"]:checked::after {
+  content: "";
+  position: absolute; inset: 3px;
+  border-radius: 50%;
+  background: var(--bg);
+}
+input[type="checkbox"]:focus-visible,
+input[type="radio"]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+/* buttons: every submit-style button gets the .btn treatment,
+   and .btn itself gains the house surface/border/hover pattern */
+button[type="submit"] {
+  background: var(--accent); color: var(--bg); border: 1px solid var(--accent);
+  border-radius: var(--radius); font: inherit; font-weight: 600;
+  padding: 8px 18px; cursor: pointer;
+  transition: filter .12s ease;
+}
+button[type="submit"]:hover { filter: brightness(1.08); }
+button[type="submit"]:focus-visible,
+.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.btn {
+  border: 1px solid var(--accent);
+}
+.btn:hover { filter: brightness(1.08); }
+
+/* settings: give the Admin link clear separation from the theme grid */
+.admin-link-row {
+  margin-top: 32px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border);
+}
diff --git a/internal/web/templates/new.html b/internal/web/templates/new.html
index 529168b..777ed47 100644
--- a/internal/web/templates/new.html
+++ b/internal/web/templates/new.html
@@ -65,7 +65,7 @@
     </div>
     <div class="float side-section">
       <h3>Custom URL</h3>
-      <input type="text" id="custom" class="custom-input" placeholder="/my-snippet">
+      <input type="text" id="custom" class="custom-input" placeholder="my-snippet">
       <div class="hint" style="margin-top:6px; font-size:19px;">Stays reserved while the paste exists</div>
     </div>
     <div class="float side-section">