anonymousland-synapse/synapse/res/templates/sso_login_idp_picker.html
Germain 1d45ad8b2a
Improve aesthetics and reusability of HTML templates. (#13652)
Use a base template to create a cohesive feel across the HTML
templates provided by Synapse.

Adds basic styling to the base template for a more user-friendly
look and feel.
2022-10-21 17:44:00 +00:00

60 lines
1.2 KiB
HTML

{% block title %}Choose identity provider{% endblock %}
{% block header %}
<style type="text/css">
{% include "sso.css" without context %}
.providers {
list-style: none;
padding: 0;
}
.providers li {
margin: 12px;
}
.providers a {
display: block;
border-radius: 4px;
border: 1px solid #17191C;
padding: 8px;
text-align: center;
text-decoration: none;
color: #17191C;
display: flex;
align-items: center;
font-weight: bold;
}
.providers a img {
width: 24px;
height: 24px;
}
.providers a span {
flex: 1;
}
</style>
{% endblock %}
{% block body %}
<header>
<h1>Log in to {{ server_name }} </h1>
<p>Choose an identity provider to log in</p>
</header>
<main>
<ul class="providers">
{% for p in providers %}
<li>
<a href="pick_idp?idp={{ p.idp_id }}&redirectUrl={{ redirect_url | urlencode }}">
{% if p.idp_icon %}
<img src="{{ p.idp_icon | mxc_to_http(32, 32) }}"/>
{% endif %}
<span>{{ p.idp_name }}</span>
</a>
</li>
{% endfor %}
</ul>
</main>
{% include "sso_footer.html" without context %}
{% endblock %}