1 files changed, 123 insertions, 21 deletions

diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 49e2362b..1d39dd6c 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -9,7 +9,6 @@
   --hairline:              color-mix(in srgb, CanvasText, Canvas 91%);  /* #e8e8e8 */
   --hairline-faint:        color-mix(in srgb, CanvasText, Canvas 94%);  /* #f1f1f1 */
   --border:                color-mix(in srgb, CanvasText, Canvas 87%);  /* #ddd */
-  --frame-fill:            color-mix(in srgb, CanvasText, Canvas 83%);  /* lightgrey */
   --field-border:          color-mix(in srgb, CanvasText, Canvas 60%);  /* #989898 */
   --handle-fill:           color-mix(in srgb, CanvasText, Canvas 60%);  /* #989898 as fill */
   --link-underline:        color-mix(in srgb, CanvasText, Canvas 69%);  /* #b0b0b0 */
@@ -1295,11 +1294,15 @@ input#menu_item_title {
    ============================================================ */
 
 #menu_item_list {
-  border-collapse: collapse;
-  padding: 5px 5px 5px 5px;
-  border: solid 5px var(--frame-fill);
-  background-color: var(--frame-fill);
-  border-radius: 5px;
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  max-width: 44rem;
+
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius);
+
+  padding: 0.5rem;
 }
 
 #menu_item_list tr:hover {
@@ -1307,33 +1310,132 @@ input#menu_item_title {
 }
 
 #menu_item_list td {
-  height: 20px;
+  padding: 0.4rem 0.5rem;
+  border-bottom: 1px solid var(--hairline);
+}
+
+#menu_item_list tr:last-child td {
+  border-bottom: none;
 }
 
 #menu_item_list td.menu_item_title {
-  width: 200px;
+  width: 100%;
+}
+
+.menu_item_translation {
+  display: block;
+  font-size: 0.85rem;
+  color: var(--text-muted);
 }
 
-#menu_item_list td.menu_sort_handle div {
-  background-color: var(--handle-fill);
-  height: 26px;
-  width: 26px;
+.menu_item_translation_locale {
+  font-variant: all-small-caps;
+  letter-spacing: 0.04em;
+  margin-right: 0.35rem;
 }
 
-#menu_item_list td.menu_sort_handle div:before {
-  content: "⇳";
-  font-size: 20px;
-  font-weight: bold;
+.menu_item_translation_absent {
+  font-style: italic;
+}
+
+#menu_item_list td.menu_item_action {
+  width: 1px;
+  white-space: nowrap;
   text-align: center;
-  vertical-align: center;
 }
 
-#menu_item_list td.menu_sort_handle div:hover {
-  cursor: grab;
+#menu_item_list td.menu_item_action a {
+  text-decoration: none;
 }
 
-.ui-state-highlight td {
-  height: 20px;
+#menu_item_list td.menu_item_action svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  vertical-align: middle;
+}
+
+#menu_item_list td.menu_sort_handle {
+  width: 1px;
+  white-space: nowrap;
+  color: var(--text-muted);
+}
+
+/* jQuery UI sortable binds mouse events, so drag never works on touch.
+   Below the desktop breakpoint the grip would advertise something that
+   cannot happen, and the width is better spent on the chevrons. */
+#menu_item_list .menu_grip {
+  display: none;
+}
+
+@media (min-width: 1016px) {
+  #menu_item_list .menu_grip {
+    display: inline-block;
+    cursor: grab;
+    vertical-align: middle;
+  }
+
+  #menu_item_list td.menu_sort_handle:active .menu_grip {
+    cursor: grabbing;
+  }
+}
+
+#menu_item_list form.menu_move {
+  display: inline-block;
+  margin: 0;
+}
+
+#menu_item_list form.menu_move button[type="submit"] {
+  padding: 0.15rem 0.2rem;
+  border: 1px solid transparent;
+  background-color: transparent;
+  color: var(--text-muted);
+  line-height: 1;
+}
+
+#menu_item_list form.menu_move button[type="submit"]:hover {
+  color: var(--text);
+  background-color: var(--surface-tint);
+}
+
+#menu_item_list form.menu_move button[type="submit"]:disabled {
+  opacity: 0.35;
+  cursor: default;
+  background-color: transparent;
+  color: var(--text-muted);
+}
+
+#menu_item_list td.menu_sort_handle svg {
+  width: 1.1rem;
+  height: 1.1rem;
+  vertical-align: middle;
+}
+
+#menu_item_list td.menu_sort_handle:active {
+  cursor: grabbing;
+}
+
+#menu_item_list td.menu_sort_handle svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  vertical-align: middle;
+}
+
+#menu_item_list tr.ui-state-highlight td {
+  height: 2.5rem;
+  background-color: var(--accent-surface);
+  border: 1px dashed var(--accent);
+}
+
+#menu_item_list form.button_to.destructive input[type="submit"],
+#menu_item_list form.button_to.destructive button[type="submit"] {
+  color: var(--danger);
+  background-color: transparent;
+}
+
+#menu_item_list form.button_to.destructive input[type="submit"]:hover,
+#menu_item_list form.button_to.destructive button[type="submit"]:hover {
+  color: var(--on-solid);
+  background-color: var(--danger-solid);
 }
 
 /* ============================================================