Merge branch 'login-style' into 'main'

Styling for login pages

See merge request !7

frontend/src/main.less

@@ -54,6 +54,11 @@ body, @{inputs}, @{buttons} {
 	&.error {
 		border-color: red;
 	}
+
+	&:focus-visible {
+		outline: none;
+		border-color: var(--accent2);
+	}
 }
 
 .input-error {
@@ -340,3 +345,20 @@ main {
 		opacity: 1;
 	}
 }
+
+.login-providers {
+	max-width: 50rem;
+	margin: 1rem auto;
+
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+
+	.provider + .provider {
+		margin-top: 0.5rem;
+	}
+
+	button {
+		width: 100%;
+	}
+}

schilder2000/templates/login.html.j2

@@ -10,6 +10,8 @@
 			{{ render_field(field) }}
 		{%- endfor -%}
 
-		<input type="submit" value="Anmelden" />
+		<div class="buttons">
+			<input type="submit" value="Anmelden" />
+		</div>
 	</form>
 {%- endblock main %}

schilder2000/templates/login_select.html.j2

@@ -5,10 +5,11 @@
 {%- endblock title %}
 
 {% block main -%}
-    Available login providers:
-    <ul>
+    <div class="login-providers">
         {% for provider in providers|sort(attribute='title') %}
-            <li><a href="{{ url_for(login_endpoint, provider=provider.name, next=next) }}">{{ provider.title }}</a></li>
+            <a class="provider" href="{{ url_for(login_endpoint, provider=provider.name, next=next) }}">
+                <button>Log In with {{ provider.title }}</button>
+            </a>
         {% endfor %}
-    </ul>
+    </div>
 {%- endblock %}