Style the converse-login-form and converse-registration-form elements

instead of the inner `<form>` elements.

Allows for more options to place other elements inside styled part.

src/plugins/controlbox/styles/_controlbox.scss

@@ -86,11 +86,6 @@
             font-weight: bold;
         }
 
-        #converse-login .conn-feedback {
-            text-align: center;
-            width: 100%;
-        }
-
         #chatrooms {
             padding: 0;
 

src/plugins/controlbox/styles/loginform.scss

@@ -5,19 +5,29 @@
 .conversejs {
     #controlbox {
         converse-login-form {
+            .converse-fullscreen & {
+                background-color: rgba(var(--background-color-rgb), 0.9);
+            }
             .btn {
                 color: var(--button-text-color);
             }
-            flex-direction: row;
-            height: 100%;
-            padding-bottom: 0;
-            padding-top: 0;
-
+            .login-anon {
+                height: auto;
+                white-space: normal;
+            }
+            .conn-feedback {
+                text-align: center;
+                width: 100%;
+            }
             .login-trusted {
                 .form-check-input {
                     margin-top: 0.35em;
                 }
             }
+            flex-direction: row;
+            padding-bottom: 0;
+            padding-top: 0;
+
         }
 
         .toggle-register-login {
@@ -58,8 +68,8 @@
                     margin-top: 0.5em;
                 }
 
-                #converse-register,
-                #converse-login {
+                converse-registration-form,
+                converse-login-form {
                     @include make-col(12);
                     padding-top: 0;
                     padding-bottom: 0;
@@ -106,8 +116,8 @@
                     display: block;
                 }
 
-                #converse-register,
-                #converse-login {
+                converse-registration-form,
+                converse-login-form {
                     margin: auto;
                     @include media-breakpoint-up(xs) {
                         padding: 1em 1em;

src/plugins/controlbox/templates/controlbox.js

@@ -23,8 +23,8 @@ function whenNotConnected(el) {
             ${connecting
                 ? html`<converse-spinner class="vertically-centered fade-in" />`
                 : el.model.get('active-form') === 'register'
-                  ? html`<converse-registration-form class="fade-in" />`
-                  : html`<converse-login-form class="fade-in" />`}
+                  ? html`<converse-registration-form class="fade-in rounded" />`
+                  : html`<converse-login-form class="fade-in rounded" />`}
             ${is_fullscreen ? html`<converse-footer></converse-footer>` : ''}
         </div>
     `;

src/plugins/controlbox/templates/loginform.js

@@ -147,7 +147,7 @@ export default (el) => {
     const connection_status = connfeedback.get('connection_status');
     const feedback_class = CONNECTION_STATUS_CSS_CLASS?.[connection_status] ?? 'none';
     const conn_feedback_message = connfeedback.get('message');
-    return html`<form id="converse-login" class="converse-form rounded" method="post" @submit=${el.onLoginFormSubmitted}>
+    return html`<form id="converse-login" class="converse-form" method="post" @submit=${el.onLoginFormSubmitted}>
         <div
             class="alert ${`alert-${feedback_class}`} conn-feedback mb-3 ${!conn_feedback_message ? 'd-none' : ''}"
             role="alert"

src/plugins/register/styles/register.scss

@@ -1,24 +1,36 @@
 @import "shared/styles/_mixins.scss";
 
 converse-registration-form {
-    height: 100%;
     padding-top: 0;
     padding-bottom: 0;
 
+    .converse-fullscreen & {
+        background-color: rgba(var(--background-color-rgb), 0.9);
+    }
+    legend {
+        width: 100%;
+        text-align: center;
+        margin: 0 auto 0.5em auto;
+    }
+    fieldset.buttons {
+        text-align: center;
+    }
+    .form-url {
+        display: block;
+        font-weight: normal;
+        margin: 1em 0;
+    }
     .alert {
         margin: auto;
         max-width: 50vw;
     }
-
     #converse-register {
         @include fade-in;
         padding-top: 0;
-        background-color: var(--background-color);
 
         .title {
             font-weight: bold;
         }
-
         .input-group {
             input {
                 height: auto;
@@ -28,17 +40,14 @@ converse-registration-form {
                 background-color: var(--background-color);
             }
         }
-
         .form-errors {
             color: var(--error-color);
             margin: 1em 0;
         }
-
         .form-help .url {
             font-weight: bold;
             color: var(--link-color);
         }
-
         .instructions {
             color: gray;
             font-size: 85%;

src/shared/styles/forms.scss

@@ -60,30 +60,6 @@
             }
         }
 
-        &#converse-register,
-        &#converse-login {
-            .converse-fullscreen & {
-                background-color: rgba(var(--background-color-rgb), 0.9);
-            }
-            legend {
-                width: 100%;
-                text-align: center;
-                margin: 0 auto 0.5em auto;
-            }
-            fieldset.buttons {
-                text-align: center;
-            }
-            .login-anon {
-                height: auto;
-                white-space: normal;
-            }
-            .form-url {
-                display: block;
-                font-weight: normal;
-                margin: 1em 0;
-            }
-        }
-
         &.converse-form {
             padding: 1.2rem;
 

src/shared/styles/themes/cyberpunk.scss

@@ -154,7 +154,8 @@
 
     #controlbox {
         .converse-fullscreen & {
-            #converse-login {
+            converse-registration-form,
+            converse-login-form {
                 box-shadow:
                     0 0 0.5rem 0 rgba(var(--pink-rgb), 0.6) inset,
                     0 0 2rem 0 rgba(var(--pink-rgb), 0.3) inset,