bring back the badge editor

data/static/css/style.css

@@ -201,7 +201,7 @@ button, .linkbutton, input[type="submit"], input[type="file"]::file-selector-but
   flex-direction: column;
 }
 
-input[type="text"], input[type="password"], textarea, select {
+input[type="text"], input[type="password"], input[type="url"], textarea, select {
   --main-color: hsl(from var(--bg-color-primary) h s calc(l + 10));
   --active-color: hsl(from var(--main-color) h s calc(l + 5));
   --border-color: hsl(from var(--main-color) h calc(s * 1.3) 25);
@@ -522,6 +522,7 @@ footer {
   border-radius: var(--base-padding);
   border: var(--base-padding) outset gray;
   box-shadow: 0px 0px 12px 2px #0006;
+  align-self: center;
   &::after {
     content: '';
     position: absolute;
@@ -964,11 +965,52 @@ ol.sortable-list {
     flex-direction: row;
   }
 
-  &:not(.row) > * {
+  &:not(.row):not(.full) > * {
     margin-right: auto;
   }
 }
 
+.badge-editor-badge-container {
+  display: flex;
+  align-items: baseline;
+  gap: var(--base-padding);
+
+  & > input[type=text], & > input[type=url] {
+    width: 100%;
+  }
+}
+
+.badge-editor-file-picker {
+  display: flex;
+  gap: var(--base-padding);
+  flex-direction: column;
+  align-items: center;
+  min-width: 150px;
+
+  & > input[type=file] {
+    width: 100%;
+
+    &::file-selector-button {
+      display: none;
+    }
+  }
+
+  &.hidden {
+    display: none;
+  }
+}
+
+.badge-editor-badge-select {
+  display: flex;
+  gap: var(--base-padding);
+  flex-direction: column;
+  align-items: center;
+  min-width: 200px;
+  & > select {
+    width: 100%;
+  }
+}
+
 .js-only {
   display: none;
 }
@@ -1038,4 +1080,9 @@ ol.sortable-list {
     width: 100%;
     text-align: center;
   }
+
+  .badge-editor-badge-container {
+    flex-direction: column;
+    align-items: center;
+  }
 }