Good progress on styling post-registration form

frontend-reactive/app/styles/app.css

@@ -3,7 +3,7 @@
 /* Note: CSS is fucking stupid. It applies styles not in the order classes are set on an element,
 * but in the order they appear in the css files */
 
-/* @import url("debug.css"); */
+/*@import url("debug.css");*/
 @import url("fonts.css");
 @import url("colors.css");
 @import url("util.css");

frontend-reactive/app/styles/auth/registerForm.css

@@ -1,3 +1,75 @@
 .registration-form {
-  background: var(--accent);
+  background: var(--secondary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: fit-content;
+}
+
+.registration-form-name-mail-wrapper {
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+}
+
+.registration-form-username {
+  width: max-content;
+}
+
+.registration-form-displayname-wrapper {
+  display: flex;
+}
+
+.registration-form-mail-wrapper {
+  display: flex;
+  width: max-content;
+  flex-direction: row;
+}
+
+.registration-form-mail-input {
+  width: max-content;
+  /*display: flex;*/
+  /*flex-grow: 1;*/
+}
+
+.registration-form-description-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.registration-form-gender-wrapper {
+}
+
+.registration-form-gender-info {
+}
+
+.register-form-being-wrapper {
+  margin: 1em;
+}
+
+.registration-form-being-info {
+}
+
+.register-form-default-post-mode-wrapper {
+  margin-bottom: 1em;
+}
+
+.registration-form-default-post-mode-info {
+}
+
+.register-form-follow-approval-wrapper {
+  margin-bottom: 0.5em;
+}
+
+.register-form-indexable-wrapper {
+  margin-bottom: 0.5em;
+}
+
+.register-form-custom-fields-wrapper {
+  flex-grow: 1;
+  width: 80%;
+  margin-bottom: 1em;
 }

frontend-reactive/app/styles/util.css

@@ -15,3 +15,7 @@
   margin-top: 0.2em;
   margin-bottom: 0.2em;
 }
+
+.filling-spacer {
+  flex-grow: 1;
+}

frontend-reactive/app/styles/util/mailEntry.css

@@ -1,6 +1,41 @@
 .mail-entry {
+  display: flex;
+  flex-direction: row;
 }
+
+.mail-input {
+  outline: 0;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.mail-input-ok {
+  border: 1px solid green;
+  box-shadow: 0px 0px 5px green;
+}
+
+.mail-input-error {
+  border: 1px solid red;
+  box-shadow: 0px 0px 5px red;
+}
+
+.mail-status {
+  /*margin: 0;*/
+  margin-top: 0.75em;
+  margin-left: 0.4em;
+}
+
 .mail-ok {
+  color: green;
+  /*margin-top: -0.25lh;*/
+  /*margin-bottom: -0.28lh;*/
+  font-size: 0.9lh;
+  margin: 0;
+  margin-left: 0.2em;
 }
-.mail-ok {
+
+.mail-error {
+  color: red;
+  margin-bottom: 0;
+  margin-left: 0.6em;
 }