Merge dev: burn fix, version label, theme persistence, admin/settings UI, theme grid, CSP fix, docs

internal/web/static/app.css

@@ -40,47 +40,6 @@
   --ok: #3E6B3E; --warn: #7A5E1B; --err: #9E4054;
   --on-accent: #274a6b;
 }
-/* matching light/dark counterparts: same hue family, flipped lightness roles */
-/* Midnight Light: light counterpart of midnight (violet family) */
-[data-preset="midnight-light"] {
-  --bg: #F3EFF9; --surface: #FAF8FD; --surface-2: #E1D9EF;
-  --muted: #A99CC9; --muted-fg: #5F5390; --fg: #2B2140;
-  --accent: #7B5FC0; --border: #D8CEEC;
-  --ok: #3E6B3E; --warn: #7A5E1B; --err: #9E4054;
-  --on-accent: #FAF8FD;
-}
-/* Smooth Dark: dark counterpart of smooth (muted slate-violet family) */
-[data-preset="smooth-dark"] {
-  --bg: #23222E; --surface: #2C2B3A; --surface-2: #3B3A4D;
-  --muted: #7A7796; --muted-fg: #B5B1C9; --fg: #E8E7F0;
-  --accent: #A9A6C4; --border: #45435A;
-  --ok: #9CD49C; --warn: #E8C77B; --err: #F2A3B3;
-  --on-accent: #23222E;
-}
-/* Pastel Lavender Dark: dark counterpart (lavender family) */
-[data-preset="pastel-lavender-dark"] {
-  --bg: #2A2340; --surface: #352C50; --surface-2: #4A3E6B;
-  --muted: #8F7FB8; --muted-fg: #CBBEE8; --fg: #EFEAF8;
-  --accent: #B39DE4; --border: #4E4272;
-  --ok: #9CD49C; --warn: #E8C77B; --err: #F2A3B3;
-  --on-accent: #2A2340;
-}
-/* Pastel Peach Dark: dark counterpart (peach family) */
-[data-preset="pastel-peach-dark"] {
-  --bg: #3A241C; --surface: #4A2F24; --surface-2: #654234;
-  --muted: #B07A64; --muted-fg: #F0C4B0; --fg: #FBEBE2;
-  --accent: #F9826C; --border: #75503F;
-  --ok: #9CD49C; --warn: #E8C77B; --err: #F2A3B3;
-  --on-accent: #3A241C;
-}
-/* Pastel Cloud Dark: dark counterpart (pink cloud family, blue accent) */
-[data-preset="pastel-cloud-dark"] {
-  --bg: #33222E; --surface: #402C3A; --surface-2: #583D50;
-  --muted: #A87E97; --muted-fg: #E5C2D6; --fg: #FAEEF5;
-  --accent: #A2D2FF; --border: #644759;
-  --ok: #9CD49C; --warn: #E8C77B; --err: #F2A3B3;
-  --on-accent: #33222E;
-}
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
 body {
@@ -544,86 +503,3 @@ 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);
-}

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">

internal/web/templates/settings.html

@@ -21,12 +21,7 @@
     { id: 'smooth',          name: 'Smooth' },
     { id: 'pastel-lavender', name: 'Pastel Lavender' },
     { id: 'pastel-peach',    name: 'Pastel Peach' },
-    { id: 'pastel-cloud',    name: 'Pastel Cloud' },
-    { id: 'midnight-light',       name: 'Midnight Light' },
-    { id: 'smooth-dark',          name: 'Smooth Dark' },
-    { id: 'pastel-lavender-dark', name: 'Pastel Lavender Dark' },
-    { id: 'pastel-peach-dark',    name: 'Pastel Peach Dark' },
-    { id: 'pastel-cloud-dark',    name: 'Pastel Cloud Dark' }
+    { id: 'pastel-cloud',    name: 'Pastel Cloud' }
   ];
   var SWATCH_VARS = ['--bg', '--surface', '--surface-2', '--muted', '--accent'];