new sortable list implementation

sass/_default.scss

@@ -56,6 +56,7 @@ $PAGE_SIDE_MARGIN: 100px !default;
 //     BORDERS
 // **************
 $DEFAULT_BORDER: 1px solid black !default;
+$DEFAULT_BORDER_INVALID: 2px dashed $BUTTON_COLOR_CRITICAL !default;
 $DEFAULT_BORDER_RADIUS: 4px !default;
 
 // other variables can be found before the rule that uses them. they are usually constructed from these basic variables.
@@ -709,6 +710,11 @@ input[type="text"], input[type="password"], textarea, select {
   }
 }
 
+// lone required inputs managed by js
+input:not(form input):invalid {
+  border: $DEFAULT_BORDER_INVALID;
+}
+
 textarea {
   font-family: "Atkinson Hyperlegible Mono", monospace;
 }
@@ -966,54 +972,6 @@ $topic_locked_background: none !default;
   background-color: $topic_locked_background;
 }
 
-$draggable_topic_background: $ACCENT_COLOR !default;
-$draggable_topic_dragged_color: $BUTTON_COLOR !default;
-$draggable_topic_padding: $BIG_PADDING !default;
-$draggable_topic_margin: $MEDIUM_BIG_PADDING 0 !default;
-$draggable_topic_border: 5px outset !default;
-$draggable_topic_border_top: $draggable_topic_border $LIGHT !default;
-$draggable_topic_border_bottom: $draggable_topic_border $DARK_2 !default;
-.draggable-topic {
-  cursor: pointer;
-  user-select: none;
-  background-color: $draggable_topic_background;
-  padding: $draggable_topic_padding;
-  margin: $draggable_topic_margin;
-  border-top: $draggable_topic_border_top;
-  border-bottom: $draggable_topic_border_bottom;
-
-  &.dragged {
-    background-color: $draggable_topic_dragged_color;
-  }
-}
-
-$draggable_collection_background: $ACCENT_COLOR !default;
-$draggable_collection_dragged_color: $BUTTON_COLOR !default;
-$draggable_collection_default_color: $BUTTON_COLOR_2 !default;
-$draggable_collection_padding: $BIG_PADDING !default;
-$draggable_collection_margin: $MEDIUM_BIG_PADDING 0 !default;
-$draggable_collection_border: 5px outset !default;
-$draggable_collection_border_top: $draggable_collection_border $LIGHT !default;
-$draggable_collection_border_bottom: $draggable_collection_border $DARK_2 !default;
-.draggable-collection {
-  cursor: pointer;
-  user-select: none;
-  background-color: $draggable_collection_background;
-  padding: $draggable_collection_padding;
-  margin: $draggable_collection_margin;
-  border-top: $draggable_collection_border_top;
-  border-bottom: $draggable_collection_border_bottom;
-  
-  &.dragged {
-    background-color: $draggable_collection_dragged_color;
-  }
-
-  &.default {
-    background-color: $draggable_collection_default_color;
-  }
-}
-
-
 $post_editing_header_color: $LIGHT !default;
 .editing {
   background-color: $post_editing_header_color;
@@ -1415,6 +1373,7 @@ $settings_grid_gap: $MEDIUM_PADDING !default;
 $settings_grid_item_min_width: 600px !default;
 $settings_grid_fieldset_border: 1px solid $DEFAULT_FONT_COLOR_INVERSE !default;
 $settings_grid_fieldset_border_radius: $DEFAULT_BORDER_RADIUS !default;
+$settings_grid_fieldset_background_color: $DARK_1_LIGHTER !default;
 .settings-grid {
   display: grid;
   gap: $settings_grid_gap;
@@ -1425,7 +1384,7 @@ $settings_grid_fieldset_border_radius: $DEFAULT_BORDER_RADIUS !default;
   & fieldset {
     border: $settings_grid_fieldset_border;
     border-radius: $settings_grid_fieldset_border_radius;
-    background-color: $DARK_1_LIGHTER;
+    background-color: $settings_grid_fieldset_background_color;
   }
 }
 
@@ -1440,7 +1399,7 @@ h1 {
 
 $settings_badge_container_gap: $SMALL_PADDING !default;
 $settings_badge_container_border: $DEFAULT_BORDER !default;
-$settings_badge_container_border_invalid: 2px dashed red !default;
+$settings_badge_container_border_invalid: $DEFAULT_BORDER_INVALID !default;
 $settings_badge_container_border_radius: $DEFAULT_BORDER_RADIUS !default;
 $settings_badge_container_padding: $SMALL_PADDING $MEDIUM_PADDING !default;
 $settings_badge_container_margin: $MEDIUM_PADDING $ZERO_PADDING !default;
@@ -1552,3 +1511,73 @@ $rss_button_font_color_active: black !default;
     padding-right: $guide_section_padding_right_portrait;
   }
 }
+
+$sortable_item_background: $ACCENT_COLOR !default;
+$sortable_item_dragged_color: $BUTTON_COLOR !default;
+$sortable_item_immovable_color: $BUTTON_COLOR_2 !default;
+$sortable_item_padding: $BIG_PADDING !default;
+$sortable_item_margin: $MEDIUM_BIG_PADDING 0 !default;
+$sortable_item_border: 5px outset !default;
+$sortable_item_border_top: $sortable_item_border $LIGHT !default;
+$sortable_item_border_bottom: $sortable_item_border $DARK_2 !default;
+$sortable_item_gap: $MEDIUM_PADDING !default;
+ol.sortable-list {
+  list-style: none;
+  flex-grow: 1;
+  margin: 0;
+
+  li {
+    display: flex;
+    gap: $sortable_item_gap;
+    background-color: $sortable_item_background;
+    padding: $sortable_item_padding;
+    margin: $sortable_item_margin;
+    border-top: $sortable_item_border_top;
+    border-bottom: $sortable_item_border_bottom;
+  }
+
+  li.dragged {
+    background-color: $sortable_item_dragged_color;
+  }
+
+  li.immovable {
+    background-color: $sortable_item_immovable_color;
+  }
+
+  li.immovable .dragger {
+    cursor: not-allowed;
+  }
+}
+
+$sortable_item_grabber_padding: $SMALL_PADDING $MEDIUM_PADDING !default;
+.dragger {
+  display: flex;
+  align-items: center;
+  background-color: $DARK_2;
+  padding: $sortable_item_grabber_padding;
+  cursor: move;
+}
+
+$sortable_item_inner_gap: $MEDIUM_PADDING !default;
+.sortable-item-inner {
+  display: flex;
+  gap: $sortable_item_inner_gap;
+  flex-grow: 1;
+  flex-direction: column;
+
+  & > * {
+    flex-grow: 1;
+  }
+
+  &.row {
+    flex-direction: row;
+  }
+
+  &:not(.row) > * {
+    margin-right: auto;
+  }
+}
+
+.fg {
+  flex-grow: 1;
+}

sass/otomotone.scss

@@ -83,6 +83,8 @@ $br: 8px;
 
   $mention_font_color: $fc,
 
+  $settings_grid_fieldset_background_color: $lightish_accent,
+
   // $settings_badge_container_border_invalid: 2px dashed $crit,
 );