style login form

scss/styles.scss

@@ -322,3 +322,23 @@ body {
 .table_length, .table_filter {
     width: unset;
 }
+
+// login view
+#form-loginform {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    #field-loginform-user, #field-loginform-password {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+    }
+
+    #input-loginform-login {
+        margin-top: 2rem;
+        width: 200px;
+    }
+}

src/cone/app/browser/login.py

@@ -43,25 +43,20 @@ def prepare(self):
             'field:label:div:help:error:text',
             props={
                 'required': _('no_username_given', default='No username given'),
-                'label': _('username', default='Username'),
-                'label.class_add': 'col-sm-2',
-                'div.class_add': 'col-sm-5',
+                'label': _('username', default='Username')
             })
         form['password'] = factory(
             'field:label:div:help:*credentials:error:password',
             props={
                 'required': _('no_password_given', default='No password given'),
                 'label': _('password', default='Password'),
-                'label.class_add': 'col-sm-2',
-                'div.class_add': 'col-sm-5',
             },
             custom={
                 'credentials': ([self.login], [], [], []),
             })
         actions = form['form_actions'] = factory(
             'field:div',
             props={
-                'div.class_add': 'col-sm-offset-2 col-sm-5',
                 'structural': True,
             })
         actions['login'] = factory(
@@ -72,7 +67,7 @@ def prepare(self):
                 'handler': self.noop,
                 'next': self.next,
                 'label': _('login', default='Login'),
-                'div.class_add': 'col-sm-offset-2 col-sm-5',
+                'class_add': 'bg-primary text-light'
             })
         self.form = form
 

src/cone/app/browser/static/cone/cone.app.css

@@ -40,6 +40,9 @@
   color: #212529;
   background-color: #fff;
 }
+[data-bs-theme=light] #input-loginform-login {
+  color: #f8f9fa;
+}
 
 /* import everything where we need changed bootstrap variables for here */
 :root {
@@ -328,3 +331,20 @@ body {
 .table_length, .table_filter {
   width: unset;
 }
+
+#form-loginform {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+#form-loginform #field-loginform-user, #form-loginform #field-loginform-password {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+}
+#form-loginform #input-loginform-login {
+  margin-top: 2rem;
+  width: 200px;
+}