1 files changed, 44 insertions, 2 deletions
diff --git a/internal/web/static/dashboard.css b/internal/web/static/dashboard.css
index c3d1420..4ea0d43 100644
--- a/internal/web/static/dashboard.css
+++ b/internal/web/static/dashboard.css
@@ -125,14 +125,56 @@ details.help[open] summary { margin-bottom: 0.5em; }
 .thumb .meta { font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.4em; }
 .thumb .copy { font-size: 0.75em; margin: 0.4em 0; padding: 0.3em; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; }
 .imagepick { margin-top: 0.5em; padding-top: 0.5em; border-top: 2px dashed #ddd6c7; }
-.imagepick img.preview { display: block; max-width: 240px; max-height: 120px; margin-top: 0.4em; border: 2px solid #1d1a17; }
-.imagepick select { width: auto; max-width: 100%; }
+.imagepick > label { margin-bottom: 0.3em; }
+.imagepick .picks { overflow: hidden; margin: 0.4em 0 0; }
+.imagepick .pick { float: left; width: 120px; margin: 0 0.7em 0.7em 0; padding: 0.35em; border: 2px solid #ddd6c7; background: #fffdf8; text-align: center; font-size: 0.75em; text-transform: none; letter-spacing: 0; cursor: pointer; }
+.imagepick .pick:hover { border-color: #1d1a17; }
+.imagepick .pick input { display: block; width: auto; margin: 0 auto 0.3em; }
+.imagepick .pick img, .imagepick .pick .swatch { display: block; width: 100%; height: 64px; margin: 0 auto 0.3em; border: 1px solid #ddd6c7; background: #f4efe4; }
+.imagepick .pick img { object-fit: contain; }
+.imagepick .pick .swatch { line-height: 64px; font-size: 1.6em; color: #b8b0a3; }
+.imagepick .pick .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.imagepick .pick input:checked ~ img, .imagepick .pick input:checked ~ .swatch { border: 3px solid #c8541a; }
+
+/* ---- design page ---------------------------------------------------------- */
+.jumps { margin: 0 0 1.2em; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; }
+.jumps a { display: inline-block; margin: 0 0.8em 0.3em 0; color: #1d1a17; text-decoration: none; border-bottom: 2px solid #ddd6c7; }
+.jumps a:hover { border-color: #c8541a; }
+.presets { overflow: hidden; }
+.presets .preset { float: left; width: 8.5em; margin: 0 0.9em 0.9em 0; padding: 0.45em; background: #fffdf8; color: #1d1a17; font-size: 0.8em; text-align: center; }
+.presets .preset:hover { background: #ebe5d6; color: #1d1a17; }
+.presets .sw { display: inline-block; width: 22%; height: 2.2em; margin: 0 1%; border: 1px solid rgba(0,0,0,0.25); vertical-align: middle; }
+.presets .pname { display: block; margin-top: 0.4em; }
+/* menu position tiles + options that only apply to one layout; the show/hide is
+   pure CSS (:checked ~), and browsers without it simply show everything */
+.navpos { overflow: hidden; }
+.navpos > input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
+.navpos .tile { float: left; width: 8.5em; margin: 0.3em 0.9em 0.9em 0; padding: 0.5em 0.4em 0.4em; border: 2px solid #ddd6c7; background: #fffdf8; text-align: center; cursor: pointer; font-size: 0.75em; }
+.navpos .tile svg { display: block; width: 80px; height: 56px; margin: 0 auto 0.4em; border: 1px solid #ddd6c7; }
+.navpos .tile span { display: block; }
+.navpos .tile:hover { border-color: #1d1a17; }
+.navpos > input:checked + .tile { border-color: #c8541a; box-shadow: 3px 3px 0 #c8541a; }
+.navpos > input:focus + .tile { outline: 2px solid #c8541a; outline-offset: 1px; }
+.navpos .only-horizontal, .navpos .only-sidebar { clear: both; }
+#np-side:checked ~ .only-horizontal { display: none; }
+#np-below:checked ~ .only-sidebar, #np-top:checked ~ .only-sidebar { display: none; }
+.hoverpick { margin: 0.8em 0; }
+.hoverpick > input { width: auto; margin: 0 0.4em 0 0; vertical-align: middle; }
+.hoverpick > label.check { display: inline; margin: 0; }
+.hoverpick .hover-color { margin: 0.4em 0 0 1.6em; }
+.hoverpick > input:not(:checked) ~ .hover-color { display: none; }
+.savebar { position: sticky; bottom: 0; margin: 0 4px 0 0; padding: 0.8em 0; background: #f4efe4; border-top: 2px solid #1d1a17; }
+.savebar .btn { margin-left: 0.8em; }
+details.reset { margin-top: 1.6em; }
 
 /* ---- login --------------------------------------------------------------- */
 .login-brand { text-align: center; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; text-transform: uppercase; letter-spacing: 0.2em; margin: 2em 0 1em; }
 
 @media (max-width: 700px) {
   .cols .card, .row label, .thumb { float: none; width: auto; margin-right: 4px; }
+  .imagepick .pick { width: 46%; margin-right: 4%; }
+  .presets .preset { width: 46%; margin-right: 4%; }
+  .navpos .tile { width: 30%; margin-right: 3%; }
   .cols .card + .card { margin-right: 4px; }
   .topbar .links { float: none; display: block; margin-top: 0.3em; }
   .topbar .links a, .topbar .links form { margin-left: 0; margin-right: 1em; }