1 files changed, 30 insertions, 15 deletions
diff --git a/internal/web/static/dashboard.css b/internal/web/static/dashboard.css
index 4ea0d43..7a66ba5 100644
--- a/internal/web/static/dashboard.css
+++ b/internal/web/static/dashboard.css
@@ -59,7 +59,7 @@ p { margin: 0.6em 0; }
 label { display: block; margin: 0.8em 0; 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; }
 label .muted { text-transform: none; letter-spacing: 0; }
 label code { text-transform: none; letter-spacing: 0; }
-input[type=text], input[type=password], input:not([type]), input[type=file], select, textarea {
+input[type=text], input[type=password], input[type=number], input:not([type]), input[type=file], select, textarea {
   width: 100%; max-width: 100%; padding: 0.5em 0.6em; margin-top: 0.25em; border: 2px solid #1d1a17; font: inherit; font-family: -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; text-transform: none; letter-spacing: 0; background: #fffdf8; color: #1d1a17; }
 input:focus, select:focus, textarea:focus, button:focus, .btn:focus { outline: 2px solid #c8541a; outline-offset: 1px; }
 input[type=color] { width: 4em; height: 2.3em; padding: 0.1em; margin-top: 0.25em; border: 2px solid #1d1a17; background: #fffdf8; }
@@ -145,19 +145,32 @@ details.help[open] summary { margin-bottom: 0.5em; }
 .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; }
+/* layout page: the column diagram, area cards with their module tables */
+.lay { margin: 0 0 1em; border: 2px solid #1d1a17; background: #f4efe4; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; }
+.lay-row { padding: 0.5em; background: #1d1a17; color: #f4efe4; }
+.lay-cols { overflow: hidden; padding: 0.5em 0; }
+.lay-col { float: left; padding: 1.6em 0.3em; border: 1px dashed #1d1a17; background: #fffdf8; }
+.lay-col.lay-main { background: #ebe5d6; }
+.lay .off { opacity: 0.4; text-decoration: line-through; }
+.lay-col.off { text-decoration: none; }
+.lay-col.empty { background: transparent; }
+.row input[type=number] { width: 6em; }
+.cardhead { overflow: hidden; }
+.cardhead h2 { float: left; margin-right: 1em; }
+.cardhead .switch { float: right; margin-top: -0.2em; }
+.card.area-off { border-style: dashed; box-shadow: none; }
+.card.area-off .modules, .card.area-off .addmod { opacity: 0.6; }
+table.modules { margin: 0.5em 0 1em; }
+table.modules td.order, table.modules td.actions { width: 1%; }
+table.modules th { width: 10em; }
+.addmod { border-top: 2px dashed #ddd6c7; padding-top: 0.6em; }
+.addmod label, .add label { display: inline-block; margin: 0 0.8em 0.4em 0; min-width: 14em; }
+.addmod select, .add select, .add input { width: auto; min-width: 14em; }
+.addmod button, .add button { vertical-align: bottom; margin-bottom: 0.4em; }
+.addrow { margin-top: 1em; border-top: 2px dashed #ddd6c7; padding-top: 0.6em; }
+.addrow .add { float: left; width: 48%; margin-right: 4%; }
+.addrow .add + .add { margin-right: 0; }
+textarea.mono { font-size: 0.9em; }
 .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; }
@@ -174,7 +187,9 @@ details.reset { margin-top: 1.6em; }
   .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%; }
+  .addrow .add { float: none; width: auto; margin-right: 0; }
+  .cardhead h2, .cardhead .switch { float: none; margin-top: 0; }
+  .cardhead .switch { display: block; margin-bottom: 0.6em; }
   .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; }