Matrix-Mirrors/synapse-product
1
0
Fork 0
mirror of https://git.anonymousland.org/anonymousland/synapse-product.git synced 2024-12-24 04:09:27 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve aesthetics and reusability of HTML templates. (#13652)

Browse Source 
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.
This commit is contained in:
Germain 2022-10-21 18:44:00 +01:00 committed by GitHub
parent d24346f530
commit 1d45ad8b2a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 673 additions and 722 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changelog.d/13652.feature Normal file
View File

@ -0,0 +1 @@
Improve aesthetics of HTML templates. Note that these changes do not retroactively apply to templates which have been [customised](https://matrix-org.github.io/synapse/latest/templates.html#templates) by server admins.

29
synapse/res/templates/_base.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
<style type="text/css">
{%- include 'style.css' without context %}
</style>
{% block header %}{% endblock %}
</head>
<body>
<header class="mx_Header">
{% if app_name == "Riot" %}
<img src="http://riot.im/img/external/riot-logo-email.png" width="83" height="83" alt="[Riot]"/>
{% elif app_name == "Vector" %}
<img src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/>
{% elif app_name == "Element" %}
<img src="https://static.element.io/images/email-logo.png" width="83" height="83" alt="[Element]"/>
{% else %}
<img src="http://matrix.org/img/matrix-120x51.png" width="120" height="51" alt="[matrix]"/>
{% endif %}
</header>
{% block body %}{% endblock %}
</body>
</html>

18
synapse/res/templates/account_previously_renewed.html
View File

@ -1,12 +1,6 @@
<!DOCTYPE html> {% extends "_base.html" %}
<html lang="en"> {% block title %}Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.{% endblock %}
<head>
<meta charset="UTF-8"> {% block body %}
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <p>Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</p>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> {% endblock %}
<title>Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</title>
</head>
<body>
Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.
</body>
</html>

18
synapse/res/templates/account_renewed.html
View File

@ -1,12 +1,6 @@
<!DOCTYPE html> {% extends "_base.html" %}
<html lang="en"> {% block title %}Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.{% endblock %}
<head>
<meta charset="UTF-8"> {% block body %}
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <p>Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</p>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> {% endblock %}
<title>Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</title>
</head>
<body>
Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.
</body>
</html>

22
synapse/res/templates/add_threepid.html
View File

@ -1,14 +1,8 @@
<!DOCTYPE html> {% extends "_base.html" %}
<html lang="en"> {% block title %}Request to add an email address to your Matrix account{% endblock %}
<head>
<meta charset="UTF-8"> {% block body %}
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <p>A request to add an email address to your Matrix account has been received. If this was you, please click the link below to confirm adding this email:</p>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <a href="{{ link }}">{{ link }}</a>
<title>Request to add an email address to your Matrix account</title> <p>If this was not you, you can safely ignore this email. Thank you.</p>
</head> {% endblock %}
<body>
<p>A request to add an email address to your Matrix account has been received. If this was you, please click the link below to confirm adding this email:</p>
<a href="{{ link }}">{{ link }}</a>
<p>If this was not you, you can safely ignore this email. Thank you.</p>
</body>
</html>

20
synapse/res/templates/add_threepid_failure.html
View File

@ -1,13 +1,7 @@
<!DOCTYPE html> {% extends "_base.html" %}
<html lang="en"> {% block title %}Request failed{% endblock %}
<head>
<meta charset="UTF-8"> {% block body %}
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <p>The request failed for the following reason: {{ failure_reason }}.</p>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <p>No changes have been made to your account.</p>
<title>Request failed</title> {% endblock %}
</head>
<body>
<p>The request failed for the following reason: {{ failure_reason }}.</p>
<p>No changes have been made to your account.</p>
</body>
</html>

18
synapse/res/templates/add_threepid_success.html
View File

@ -1,12 +1,6 @@
<!DOCTYPE html> {% extends "_base.html" %}
<html lang="en"> {% block title %}Your email has now been validated{% endblock %}
<head>
<meta charset="UTF-8"> {% block body %}
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <p>Your email has now been validated, please return to your client. You may now close this window.</p>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> {% endblock %}
<title>Your email has now been validated</title>
</head>
<body>
<p>Your email has now been validated, please return to your client. You may now close this window.</p>
</body>
</html>

28
synapse/res/templates/auth_success.html
View File

@ -1,21 +1,21 @@
<html> {% extends "_base.html" %}
<head> {% block title %}Success!{% endblock %}
<title>Success!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> {% block header %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/_matrix/static/client/register/style.css"> <link rel="stylesheet" href="/_matrix/static/client/register/style.css">
<script> <script>
if (window.onAuthDone) { if (window.onAuthDone) {
window.onAuthDone(); window.onAuthDone();
} else if (window.opener && window.opener.postMessage) { } else if (window.opener && window.opener.postMessage) {
window.opener.postMessage("authDone", "*"); window.opener.postMessage("authDone", "*");
} }
</script> </script>
</head> {% endblock %}
<body>
<div> {% block body %}
<p>Thank you</p> <div>
<p>You may now close this window and return to the application</p> <p>Thank you</p>
</div> <p>You may now close this window and return to the application</p>
</body> </div>
</html>
{% endblock %}

17
synapse/res/templates/invalid_token.html
View File

@ -1,12 +1,5 @@
<!DOCTYPE html> {% block title %}Invalid renewal token.{% endblock %}
<html lang="en">
<head> {% block body %}
<meta charset="UTF-8"> <p>Invalid renewal token.</p>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> {% endblock %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invalid renewal token.</title>
</head>
<body>
Invalid renewal token.
</body>
</html>

93
synapse/res/templates/notice_expiry.html
View File

@ -1,47 +1,46 @@
<!doctype html> {% extends "_base.html" %}
<html lang="en"> {% block title %}Notice of expiry{% endblock %}
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> {% block header %}
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css">
<style type="text/css"> {% include 'mail.css' without context %}
{% include 'mail.css' without context %} {% include "mail-%s.css" % app_name ignore missing without context %}
{% include "mail-%s.css" % app_name ignore missing without context %} {% include 'mail-expiry.css' without context %}
{% include 'mail-expiry.css' without context %} </style>
</style> {% endblock %}
</head>
<body> {% block body %}
<table id="page"> <table id="page">
<tr> <tr>
<td> </td> <td> </td>
<td id="inner"> <td id="inner">
<table class="header"> <table class="header">
<tr> <tr>
<td> <td>
<div class="salutation">Hi {{ display_name }},</div> <div class="salutation">Hi {{ display_name }},</div>
</td> </td>
<td class="logo"> <td class="logo">
{% if app_name == "Riot" %} {% if app_name == "Riot" %}
<img src="http://riot.im/img/external/riot-logo-email.png" width="83" height="83" alt="[Riot]"/> <img src="http://riot.im/img/external/riot-logo-email.png" width="83" height="83" alt="[Riot]"/>
{% elif app_name == "Vector" %} {% elif app_name == "Vector" %}
<img src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/> <img src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/>
{% elif app_name == "Element" %} {% elif app_name == "Element" %}
<img src="https://static.element.io/images/email-logo.png" width="83" height="83" alt="[Element]"/> <img src="https://static.element.io/images/email-logo.png" width="83" height="83" alt="[Element]"/>
{% else %} {% else %}
<img src="http://matrix.org/img/matrix-120x51.png" width="120" height="51" alt="[matrix]"/> <img src="http://matrix.org/img/matrix-120x51.png" width="120" height="51" alt="[matrix]"/>
{% endif %} {% endif %}
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="2"> <td colspan="2">
<div class="noticetext">Your account will expire on {{ expiration_ts|format_ts("%d-%m-%Y") }}. This means that you will lose access to your account after this date.</div> <div class="noticetext">Your account will expire on {{ expiration_ts|format_ts("%d-%m-%Y") }}. This means that you will lose access to your account after this date.</div>
<div class="noticetext">To extend the validity of your account, please click on the link below (or copy and paste it into a new browser tab):</div> <div class="noticetext">To extend the validity of your account, please click on the link below (or copy and paste it into a new browser tab):</div>
<div class="noticetext"><a href="{{ url }}">{{ url }}</a></div> <div class="noticetext"><a href="{{ url }}">{{ url }}</a></div>
</td> </td>
</tr> </tr>
</table> </table>
</td> </td>
<td> </td> <td> </td>
</tr> </tr>
</table> </table>
</body> {% endblock %}
</html>

116
synapse/res/templates/notif_mail.html
View File

@ -1,59 +1,57 @@
<!doctype html> {% block title %}New activity in room{% endblock %}
<html lang="en">
<head> {% block header %}
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <style type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> {%- include 'mail.css' without context %}
<style type="text/css"> {%- include "mail-%s.css" % app_name ignore missing without context %}
{%- include 'mail.css' without context %} </style>
{%- include "mail-%s.css" % app_name ignore missing without context %} {% endblock %}
</style>
</head> {% block body %}
<body> <table id="page">
<table id="page"> <tr>
<tr> <td> </td>
<td> </td> <td id="inner">
<td id="inner"> <table class="header">
<table class="header"> <tr>
<tr> <td>
<td> <div class="salutation">Hi {{ user_display_name }},</div>
<div class="salutation">Hi {{ user_display_name }},</div> <div class="summarytext">{{ summary_text }}</div>
<div class="summarytext">{{ summary_text }}</div> </td>
</td> <td class="logo">
<td class="logo"> {%- if app_name == "Riot" %}
{%- if app_name == "Riot" %} <img src="http://riot.im/img/external/riot-logo-email.png" width="83" height="83" alt="[Riot]"/>
<img src="http://riot.im/img/external/riot-logo-email.png" width="83" height="83" alt="[Riot]"/> {%- elif app_name == "Vector" %}
{%- elif app_name == "Vector" %} <img src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/>
<img src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/> {%- elif app_name == "Element" %}
{%- elif app_name == "Element" %} <img src="https://static.element.io/images/email-logo.png" width="83" height="83" alt="[Element]"/>
<img src="https://static.element.io/images/email-logo.png" width="83" height="83" alt="[Element]"/> {%- else %}
{%- else %} <img src="http://matrix.org/img/matrix-120x51.png" width="120" height="51" alt="[matrix]"/>
<img src="http://matrix.org/img/matrix-120x51.png" width="120" height="51" alt="[matrix]"/> {%- endif %}
{%- endif %} </td>
</td> </tr>
</tr> </table>
</table> {%- for room in rooms %}
{%- for room in rooms %} {%- include 'room.html' with context %}
{%- include 'room.html' with context %} {%- endfor %}
{%- endfor %} <div class="footer">
<div class="footer"> <a href="{{ unsubscribe_link }}">Unsubscribe</a>
<a href="{{ unsubscribe_link }}">Unsubscribe</a> <br/>
<br/> <br/>
<br/> <div class="debug">
<div class="debug"> Sending email at {{ reason.now|format_ts("%c") }} due to activity in room {{ reason.room_name }} because
Sending email at {{ reason.now|format_ts("%c") }} due to activity in room {{ reason.room_name }} because an event was received at {{ reason.received_at|format_ts("%c") }}
an event was received at {{ reason.received_at|format_ts("%c") }} which is more than {{ "%.1f"|format(reason.delay_before_mail_ms / (60*1000)) }} ({{ reason.delay_before_mail_ms }}) mins ago,
which is more than {{ "%.1f"|format(reason.delay_before_mail_ms / (60*1000)) }} ({{ reason.delay_before_mail_ms }}) mins ago, {%- if reason.last_sent_ts %}
{%- if reason.last_sent_ts %} and the last time we sent a mail for this room was {{ reason.last_sent_ts|format_ts("%c") }},
and the last time we sent a mail for this room was {{ reason.last_sent_ts|format_ts("%c") }}, which is more than {{ "%.1f"|format(reason.throttle_ms / (60*1000)) }} (current throttle_ms) mins ago.
which is more than {{ "%.1f"|format(reason.throttle_ms / (60*1000)) }} (current throttle_ms) mins ago. {%- else %}
{%- else %} and we don't have a last time we sent a mail for this room.
and we don't have a last time we sent a mail for this room. {%- endif %}
{%- endif %} </div>
</div> </div>
</div> </td>
</td> <td> </td>
<td> </td> </tr>
</tr> </table>
</table> {% endblock %}
</body>
</html>

19
synapse/res/templates/password_reset.html
View File

@ -1,14 +1,9 @@
<html lang="en"> {% block title %}Password reset{% endblock %}
<head>
<title>Password reset</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>A password reset request has been received for your Matrix account. If this was you, please click the link below to confirm resetting your password:</p>
<a href="{{ link }}">{{ link }}</a> {% block body %}
<p>A password reset request has been received for your Matrix account. If this was you, please click the link below to confirm resetting your password:</p>
<p>If this was not you, <strong>do not</strong> click the link above and instead contact your server administrator. Thank you.</p> <a href="{{ link }}">{{ link }}</a>
</body>
</html> <p>If this was not you, <strong>do not</strong> click the link above and instead contact your server administrator. Thank you.</p>
{% endblock %}

14
synapse/res/templates/password_reset_confirmation.html
View File

@ -1,10 +1,6 @@
<html lang="en"> {% block title %}Password reset confirmation{% endblock %}
<head>
<title>Password reset confirmation</title> {% block body %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--Use a hidden form to resubmit the information necessary to reset the password--> <!--Use a hidden form to resubmit the information necessary to reset the password-->
<form method="post"> <form method="post">
<input type="hidden" name="sid" value="{{ sid }}"> <input type="hidden" name="sid" value="{{ sid }}">
@ -15,6 +11,4 @@
If you did not mean to do this, please close this page and your password will not be changed.</p> If you did not mean to do this, please close this page and your password will not be changed.</p>
<p><button type="submit">Confirm changing my password</button></p> <p><button type="submit">Confirm changing my password</button></p>
</form> </form>
</body> {% endblock %}
</html>

14
synapse/res/templates/password_reset_failure.html
View File

@ -1,12 +1,6 @@
<html lang="en"> {% block title %}Password reset failure{% endblock %}
<head>
<title>Password reset failure</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>The request failed for the following reason: {{ failure_reason }}.</p>
{% block body %}
<p>The request failed for the following reason: {{ failure_reason }}.</p>
<p>Your password has not been reset.</p> <p>Your password has not been reset.</p>
</body> {% endblock %}
</html>

12
synapse/res/templates/password_reset_success.html
View File

@ -1,9 +1,5 @@
<html lang="en"> {% block title %}Password reset success{% endblock %}
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> {% block body %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Your email has now been validated, please return to your client to reset your password. You may now close this window.</p> <p>Your email has now been validated, please return to your client to reset your password. You may now close this window.</p>
</body> {% endblock %}
</html>

19
synapse/res/templates/recaptcha.html
View File

@ -1,10 +1,7 @@
<html> {% block title %}Authentication{% endblock %}
<head>
<title>Authentication</title> {% block header %}
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://www.recaptcha.net/recaptcha/api.js"
async defer></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="/_matrix/static/client/register/style.css"> <link rel="stylesheet" href="/_matrix/static/client/register/style.css">
<script> <script>
@ -12,8 +9,9 @@ function captchaDone() {
$('#registrationForm').submit(); $('#registrationForm').submit();
} }
</script> </script>
</head> {% endblock %}
<body>
{% block body %}
<form id="registrationForm" method="post" action="{{ myurl }}"> <form id="registrationForm" method="post" action="{{ myurl }}">
<div> <div>
{% if error is defined %} {% if error is defined %}
@ -37,5 +35,4 @@ function captchaDone() {
</div> </div>
</div> </div>
</form> </form>
</body> {% endblock %}
</html>

21
synapse/res/templates/registration.html
View File

@ -1,16 +1,11 @@
<html lang="en"> {% block title %}Registration{% endblock %}
<head>
<title>Registration</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>You have asked us to register this email with a new Matrix account. If this was you, please click the link below to confirm your email address:</p>
<a href="{{ link }}">Verify Your Email Address</a> {% block body %}
<p>You have asked us to register this email with a new Matrix account. If this was you, please click the link below to confirm your email address:</p>
<p>If this was not you, you can safely disregard this email.</p> <a href="{{ link }}">Verify Your Email Address</a>
<p>Thank you.</p> <p>If this was not you, you can safely disregard this email.</p>
</body>
</html> <p>Thank you.</p>
{% endblock %}

12
synapse/res/templates/registration_failure.html
View File

@ -1,9 +1,5 @@
<html lang="en"> {% block title %}Registration failure{% endblock %}
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> {% block body %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Validation failed for the following reason: {{ failure_reason }}.</p> <p>Validation failed for the following reason: {{ failure_reason }}.</p>
</body> {% endblock %}
</html>

13
synapse/res/templates/registration_success.html
View File

@ -1,10 +1,5 @@
<html lang="en"> {% block title %}Your email has now been validated{% endblock %}
<head>
<title>Your email has now been validated</title> {% block body %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Your email has now been validated, please return to your client. You may now close this window.</p> <p>Your email has now been validated, please return to your client. You may now close this window.</p>
</body> {% endblock %}
</html>

16
synapse/res/templates/registration_token.html
View File

@ -1,11 +1,10 @@
<html lang="en"> {% block title %}Authentication{% endblock %}
<head>
<title>Authentication</title> {% block header %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/_matrix/static/client/register/style.css"> <link rel="stylesheet" href="/_matrix/static/client/register/style.css">
</head> {% endblock %}
<body>
{% block body %}
<form id="registrationForm" method="post" action="{{ myurl }}"> <form id="registrationForm" method="post" action="{{ myurl }}">
<div> <div>
{% if error is defined %} {% if error is defined %}
@ -19,5 +18,4 @@
<input type="submit" value="Authenticate" /> <input type="submit" value="Authenticate" />
</div> </div>
</form> </form>
</body> {% endblock %}
</html>

49
synapse/res/templates/sso_account_deactivated.html
View File

@ -1,25 +1,24 @@
<!DOCTYPE html> {% block title %}SSO account deactivated{% endblock %}
<html lang="en">
<head> {% block header %}
<meta charset="UTF-8"> <style type="text/css">
<title>SSO account deactivated</title> {% include "sso.css" without context %}
<meta http-equiv="X-UA-Compatible" content="IE=edge"> </style>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> {% endblock %}
{% include "sso.css" without context %}
</style> {% block body %}
</head> <div class="error_page">
<body class="error_page"> <header>
<header> <h1>Your account has been deactivated</h1>
<h1>Your account has been deactivated</h1> <p>
<p> <strong>No account found</strong>
<strong>No account found</strong> </p>
</p> <p>
<p> Your account might have been deactivated by the server administrator.
Your account might have been deactivated by the server administrator. You can either try to create a new account or contact the server’s
You can either try to create a new account or contact the server’s administrator.
administrator. </p>
</p> </header>
</header> </div>
{% include "sso_footer.html" without context %} {% include "sso_footer.html" without context %}
</body> {% endblock %}
</html>

336
synapse/res/templates/sso_auth_account_details.html
View File

@ -1,189 +1,185 @@
<!DOCTYPE html> {% block title %}Create your account{% endblock %}
<html lang="en">
<head>
<title>Create your account</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
let wasKeyboard = false;
document.addEventListener("mousedown", function() { wasKeyboard = false; });
document.addEventListener("keydown", function() { wasKeyboard = true; });
document.addEventListener("focusin", function() {
if (wasKeyboard) {
document.body.classList.add("keyboard-focus");
} else {
document.body.classList.remove("keyboard-focus");
}
});
</script>
<style type="text/css">
{% include "sso.css" without context %}
body.keyboard-focus :focus, body.keyboard-focus .username_input:focus-within { {% block header %}
outline: 3px solid #17191C; <script type="text/javascript">
outline-offset: 4px; let wasKeyboard = false;
} document.addEventListener("mousedown", function() { wasKeyboard = false; });
document.addEventListener("keydown", function() { wasKeyboard = true; });
document.addEventListener("focusin", function() {
if (wasKeyboard) {
document.body.classList.add("keyboard-focus");
} else {
document.body.classList.remove("keyboard-focus");
}
});
</script>
<style type="text/css">
{% include "sso.css" without context %}
.username_input { body.keyboard-focus :focus, body.keyboard-focus .username_input:focus-within {
display: flex; outline: 3px solid #17191C;
border: 2px solid #418DED; outline-offset: 4px;
border-radius: 8px; }
padding: 12px;
position: relative;
margin: 16px 0;
align-items: center;
font-size: 12px;
}
.username_input.invalid { .username_input {
border-color: #FE2928; display: flex;
} border: 2px solid #418DED;
border-radius: 8px;
padding: 12px;
position: relative;
margin: 16px 0;
align-items: center;
font-size: 12px;
}
.username_input.invalid input, .username_input.invalid label { .username_input.invalid {
color: #FE2928; border-color: #FE2928;
} }
.username_input div, .username_input input { .username_input.invalid input, .username_input.invalid label {
line-height: 18px; color: #FE2928;
font-size: 14px; }
}
.username_input label { .username_input div, .username_input input {
position: absolute; line-height: 18px;
top: -5px; font-size: 14px;
left: 14px; }
font-size: 10px;
line-height: 10px;
background: white;
padding: 0 2px;
}
.username_input input { .username_input label {
flex: 1; position: absolute;
display: block; top: -5px;
min-width: 0; left: 14px;
border: none; font-size: 10px;
} line-height: 10px;
background: white;
padding: 0 2px;
}
/* only clear the outline if we know it will be shown on the parent div using :focus-within */ .username_input input {
@supports selector(:focus-within) { flex: 1;
.username_input input { display: block;
outline: none !important; min-width: 0;
} border: none;
} }
.username_input div { /* only clear the outline if we know it will be shown on the parent div using :focus-within */
color: #8D99A5; @supports selector(:focus-within) {
} .username_input input {
outline: none !important;
}
}
.idp-pick-details { .username_input div {
border: 1px solid #E9ECF1; color: #8D99A5;
border-radius: 8px; }
margin: 24px 0;
}
.idp-pick-details h2 { .idp-pick-details {
margin: 0; border: 1px solid #E9ECF1;
padding: 8px 12px; border-radius: 8px;
} margin: 24px 0;
}
.idp-pick-details .idp-detail { .idp-pick-details h2 {
border-top: 1px solid #E9ECF1; margin: 0;
padding: 12px; padding: 8px 12px;
display: block; }
}
.idp-pick-details .check-row {
display: flex;
align-items: center;
}
.idp-pick-details .check-row .name { .idp-pick-details .idp-detail {
flex: 1; border-top: 1px solid #E9ECF1;
} padding: 12px;
display: block;
}
.idp-pick-details .check-row {
display: flex;
align-items: center;
}
.idp-pick-details .use, .idp-pick-details .idp-value { .idp-pick-details .check-row .name {
color: #737D8C; flex: 1;
} }
.idp-pick-details .idp-value { .idp-pick-details .use, .idp-pick-details .idp-value {
margin: 0; color: #737D8C;
margin-top: 8px; }
}
.idp-pick-details .avatar { .idp-pick-details .idp-value {
width: 53px; margin: 0;
height: 53px; margin-top: 8px;
border-radius: 100%; }
display: block;
margin-top: 8px;
}
output { .idp-pick-details .avatar {
padding: 0 14px; width: 53px;
display: block; height: 53px;
} border-radius: 100%;
display: block;
margin-top: 8px;
}
output.error { output {
color: #FE2928; padding: 0 14px;
} display: block;
</style> }
</head>
<body> output.error {
<header> color: #FE2928;
<h1>Create your account</h1> }
<p>This is required. Continue to create your account on {{ server_name }}. You can't change this later.</p> </style>
</header> {% endblock %}
<main>
<form method="post" class="form__input" id="form"> {% block body %}
<div class="username_input" id="username_input"> <header>
<label for="field-username">Username (required)</label> <h1>Create your account</h1>
<div class="prefix">@</div> <p>This is required. Continue to create your account on {{ server_name }}. You can't change this later.</p>
<input type="text" name="username" id="field-username" value="{{ user_attributes.localpart }}" autofocus autocorrect="off" autocapitalize="none"> </header>
<div class="postfix">:{{ server_name }}</div> <main>
<form method="post" class="form__input" id="form">
<div class="username_input" id="username_input">
<label for="field-username">Username (required)</label>
<div class="prefix">@</div>
<input type="text" name="username" id="field-username" value="{{ user_attributes.localpart }}" autofocus autocorrect="off" autocapitalize="none">
<div class="postfix">:{{ server_name }}</div>
</div>
<output for="username_input" id="field-username-output"></output>
<input type="submit" value="Continue" class="primary-button">
{% if user_attributes.avatar_url or user_attributes.display_name or user_attributes.emails %}
<section class="idp-pick-details">
<h2>{% if idp.idp_icon %}<img src="{{ idp.idp_icon | mxc_to_http(24, 24) }}"/>{% endif %}Optional data from {{ idp.idp_name }}</h2>
{% if user_attributes.avatar_url %}
<label class="idp-detail idp-avatar" for="idp-avatar">
<div class="check-row">
<span class="name">Avatar</span>
<span class="use">Use</span>
<input type="checkbox" name="use_avatar" id="idp-avatar" value="true" checked>
</div> </div>
<output for="username_input" id="field-username-output"></output> <img src="{{ user_attributes.avatar_url }}" class="avatar" />
<input type="submit" value="Continue" class="primary-button"> </label>
{% if user_attributes.avatar_url or user_attributes.display_name or user_attributes.emails %} {% endif %}
<section class="idp-pick-details"> {% if user_attributes.display_name %}
<h2>{% if idp.idp_icon %}<img src="{{ idp.idp_icon | mxc_to_http(24, 24) }}"/>{% endif %}Optional data from {{ idp.idp_name }}</h2> <label class="idp-detail" for="idp-displayname">
{% if user_attributes.avatar_url %} <div class="check-row">
<label class="idp-detail idp-avatar" for="idp-avatar"> <span class="name">Display name</span>
<div class="check-row"> <span class="use">Use</span>
<span class="name">Avatar</span> <input type="checkbox" name="use_display_name" id="idp-displayname" value="true" checked>
<span class="use">Use</span> </div>
<input type="checkbox" name="use_avatar" id="idp-avatar" value="true" checked> <p class="idp-value">{{ user_attributes.display_name }}</p>
</div> </label>
<img src="{{ user_attributes.avatar_url }}" class="avatar" /> {% endif %}
</label> {% for email in user_attributes.emails %}
{% endif %} <label class="idp-detail" for="idp-email{{ loop.index }}">
{% if user_attributes.display_name %} <div class="check-row">
<label class="idp-detail" for="idp-displayname"> <span class="name">E-mail</span>
<div class="check-row"> <span class="use">Use</span>
<span class="name">Display name</span> <input type="checkbox" name="use_email" id="idp-email{{ loop.index }}" value="{{ email }}" checked>
<span class="use">Use</span> </div>
<input type="checkbox" name="use_display_name" id="idp-displayname" value="true" checked> <p class="idp-value">{{ email }}</p>
</div> </label>
<p class="idp-value">{{ user_attributes.display_name }}</p> {% endfor %}
</label> </section>
{% endif %} {% endif %}
{% for email in user_attributes.emails %} </form>
<label class="idp-detail" for="idp-email{{ loop.index }}"> </main>
<div class="check-row"> {% include "sso_footer.html" without context %}
<span class="name">E-mail</span> <script type="text/javascript">
<span class="use">Use</span> {% include "sso_auth_account_details.js" without context %}
<input type="checkbox" name="use_email" id="idp-email{{ loop.index }}" value="{{ email }}" checked> </script>
</div> {% endblock %}
<p class="idp-value">{{ email }}</p>
</label>
{% endfor %}
</section>
{% endif %}
</form>
</main>
{% include "sso_footer.html" without context %}
<script type="text/javascript">
{% include "sso_auth_account_details.js" without context %}
</script>
</body>
</html>

52
synapse/res/templates/sso_auth_bad_user.html
View File

@ -1,27 +1,25 @@
<!DOCTYPE html> {% block title %}Authentication failed{% endblock %}
<html lang="en">
<head> {% block header %}
<meta charset="UTF-8"> <style type="text/css">
<title>Authentication failed</title> {% include "sso.css" without context %}
<meta http-equiv="X-UA-Compatible" content="IE=edge"> </style>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> {% endblock %}
<style type="text/css">
{% include "sso.css" without context %} {% block body %}
</style> <div class="error_page">
</head> <header>
<body class="error_page"> <h1>That doesn't look right</h1>
<header> <p>
<h1>That doesn't look right</h1> <strong>We were unable to validate your {{ server_name }} account</strong>
<p> via single&nbsp;sign&#8209;on&nbsp;(SSO), because the SSO Identity
<strong>We were unable to validate your {{ server_name }} account</strong> Provider returned different details than when you logged in.
via single&nbsp;sign&#8209;on&nbsp;(SSO), because the SSO Identity </p>
Provider returned different details than when you logged in. <p>
</p> Try the operation again, and ensure that you use the same details on
<p> the Identity Provider as when you log into your account.
Try the operation again, and ensure that you use the same details on </p>
the Identity Provider as when you log into your account. </header>
</p> </div>
</header> {% include "sso_footer.html" without context %}
{% include "sso_footer.html" without context %} {% endblock %}
</body>
</html>

56
synapse/res/templates/sso_auth_confirm.html
View File

@ -1,30 +1,26 @@
<!DOCTYPE html> {% block title %}Confirm it's you{% endblock %}
<html lang="en">
<head> {% block header %}
<meta charset="UTF-8"> <style type="text/css">
<title>Confirm it's you</title> {% include "sso.css" without context %}
<meta http-equiv="X-UA-Compatible" content="IE=edge"> </style>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> {% endblock %}
<style type="text/css">
{% include "sso.css" without context %} {% block body %}
</style> <header>
</head> <h1>Confirm it's you to continue</h1>
<body> <p>
<header> A client is trying to {{ description }}. To confirm this action
<h1>Confirm it's you to continue</h1> re-authorize your account with single sign-on.
<p> </p>
A client is trying to {{ description }}. To confirm this action <p><strong>
re-authorize your account with single sign-on. If you did not expect this, your account may be compromised.
</p> </strong></p>
<p><strong> </header>
If you did not expect this, your account may be compromised. <main>
</strong></p> <a href="{{ redirect_url }}" class="primary-button">
</header> Continue with {{ idp.idp_name }}
<main> </a>
<a href="{{ redirect_url }}" class="primary-button"> </main>
Continue with {{ idp.idp_name }} {% include "sso_footer.html" without context %}
</a> {% endblock %}
</main>
{% include "sso_footer.html" without context %}
</body>
</html>

54
synapse/res/templates/sso_auth_success.html
View File

@ -1,29 +1,25 @@
<!DOCTYPE html> {% block title %}Authentication successful{% endblock %}
<html lang="en">
<head> {% block header %}
<meta charset="UTF-8"> <style type="text/css">
<title>Authentication successful</title> {% include "sso.css" without context %}
<meta http-equiv="X-UA-Compatible" content="IE=edge"> </style>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <script>
<style type="text/css"> if (window.onAuthDone) {
{% include "sso.css" without context %} window.onAuthDone();
</style> } else if (window.opener && window.opener.postMessage) {
<script> window.opener.postMessage("authDone", "*");
if (window.onAuthDone) { }
window.onAuthDone(); </script>
} else if (window.opener && window.opener.postMessage) { {% endblock %}
window.opener.postMessage("authDone", "*");
} {% block body %}
</script> <header>
</head> <h1>Thank you</h1>
<body> <p>
<header> Now we know it’s you, you can close this window and return to the
<h1>Thank you</h1> application.
<p> </p>
Now we know it’s you, you can close this window and return to the </header>
application. {% include "sso_footer.html" without context %}
</p> {% endblock %}
</header>
{% include "sso_footer.html" without context %}
</body>
</html>

34
synapse/res/templates/sso_error.html
View File

@ -1,19 +1,19 @@
<!DOCTYPE html> {% block title %}Authentication failed{% endblock %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Authentication failed</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
{% include "sso.css" without context %}
#error_code { {% block header %}
margin-top: 56px; {% if error == "unauthorised" %}
} <style type="text/css">
</style> {% include "sso.css" without context %}
</head>
<body class="error_page"> #error_code {
margin-top: 56px;
}
</style>
{% endif %}
{% endblock %}
{% block body %}
<div class="error_page">
{# If an error of unauthorised is returned it means we have actively rejected their login #} {# If an error of unauthorised is returned it means we have actively rejected their login #}
{% if error == "unauthorised" %} {% if error == "unauthorised" %}
<header> <header>
@ -66,5 +66,5 @@
} }
</script> </script>
{% endif %} {% endif %}
</body> </div>
</html> {% endblock %}

114
synapse/res/templates/sso_login_idp_picker.html
View File

@ -1,63 +1,59 @@
<!DOCTYPE html> {% block title %}Choose identity provider{% endblock %}
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Choose identity provider</title>
<style type="text/css">
{% include "sso.css" without context %}
.providers { {% block header %}
list-style: none; <style type="text/css">
padding: 0; {% include "sso.css" without context %}
}
.providers li { .providers {
margin: 12px; list-style: none;
} padding: 0;
}
.providers a { .providers li {
display: block; margin: 12px;
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 { .providers a {
width: 24px; display: block;
height: 24px; border-radius: 4px;
} border: 1px solid #17191C;
.providers a span { padding: 8px;
flex: 1; text-align: center;
} text-decoration: none;
</style> color: #17191C;
</head> display: flex;
<body> align-items: center;
<header> font-weight: bold;
<h1>Log in to {{ server_name }} </h1> }
<p>Choose an identity provider to log in</p>
</header> .providers a img {
<main> width: 24px;
<ul class="providers"> height: 24px;
{% for p in providers %} }
<li> .providers a span {
<a href="pick_idp?idp={{ p.idp_id }}&redirectUrl={{ redirect_url | urlencode }}"> flex: 1;
{% if p.idp_icon %} }
<img src="{{ p.idp_icon | mxc_to_http(32, 32) }}"/> </style>
{% endif %} {% endblock %}
<span>{{ p.idp_name }}</span>
</a> {% block body %}
</li> <header>
{% endfor %} <h1>Log in to {{ server_name }} </h1>
</ul> <p>Choose an identity provider to log in</p>
</main> </header>
{% include "sso_footer.html" without context %} <main>
</body> <ul class="providers">
</html> {% 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 %}

60
synapse/res/templates/sso_new_user_consent.html
View File

@ -1,33 +1,29 @@
<!DOCTYPE html> {% block title %}Agree to terms and conditions{% endblock %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Agree to terms and conditions</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
{% include "sso.css" without context %}
#consent_form { {% block header %}
margin-top: 56px; <style type="text/css">
} {% include "sso.css" without context %}
</style>
</head> #consent_form {
<body> margin-top: 56px;
<header> }
<h1>Your account is nearly ready</h1> </style>
<p>Agree to the terms to create your account.</p> {% endblock %}
</header>
<main> {% block body %}
{% include "sso_partial_profile.html" %} <header>
<form method="post" action="{{my_url}}" id="consent_form"> <h1>Your account is nearly ready</h1>
<p> <p>Agree to the terms to create your account.</p>
<input id="accepted_version" type="checkbox" name="accepted_version" value="{{ consent_version }}" required> </header>
<label for="accepted_version">I have read and agree to the <a href="{{ terms_url }}" target="_blank" rel="noopener">terms and conditions</a>.</label> <main>
</p> {% include "sso_partial_profile.html" %}
<input type="submit" class="primary-button" value="Continue"/> <form method="post" action="{{my_url}}" id="consent_form">
</form> <p>
</main> <input id="accepted_version" type="checkbox" name="accepted_version" value="{{ consent_version }}" required>
{% include "sso_footer.html" without context %} <label for="accepted_version">I have read and agree to the <a href="{{ terms_url }}" target="_blank" rel="noopener">terms and conditions</a>.</label>
</body> </p>
</html> <input type="submit" class="primary-button" value="Continue"/>
</form>
</main>
{% include "sso_footer.html" without context %}
{% endblock %}

75
synapse/res/templates/sso_redirect_confirm.html
View File

@ -1,41 +1,38 @@
<!DOCTYPE html> {% block title %}Continue to your account{% endblock %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Continue to your account</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
{% include "sso.css" without context %}
.confirm-trust { {% block header %}
margin: 34px 0; <style type="text/css">
color: #8D99A5; {% include "sso.css" without context %}
}
.confirm-trust strong {
color: #17191C;
}
.confirm-trust::before { .confirm-trust {
content: ""; margin: 34px 0;
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi41IDlDMTYuNSAxMy4xNDIxIDEzLjE0MjEgMTYuNSA5IDE2LjVDNC44NTc4NiAxNi41IDEuNSAxMy4xNDIxIDEuNSA5QzEuNSA0Ljg1Nzg2IDQuODU3ODYgMS41IDkgMS41QzEzLjE0MjEgMS41IDE2LjUgNC44NTc4NiAxNi41IDlaTTcuMjUgOUM3LjI1IDkuNDY1OTYgNy41Njg2OSA5Ljg1NzQ4IDggOS45Njg1VjEyLjM3NUM4IDEyLjkyNzMgOC40NDc3MiAxMy4zNzUgOSAxMy4zNzVIMTAuMTI1QzEwLjY3NzMgMTMuMzc1IDExLjEyNSAxMi45MjczIDExLjEyNSAxMi4zNzVDMTEuMTI1IDExLjgyMjcgMTAuNjc3MyAxMS4zNzUgMTAuMTI1IDExLjM3NUgxMFY5QzEwIDguOTY1NDggOS45OTgyNSA4LjkzMTM3IDkuOTk0ODQgOC44OTc3NkM5Ljk0MzYzIDguMzkzNSA5LjUxNzc3IDggOSA4SDguMjVDNy42OTc3MiA4IDcuMjUgOC40NDc3MiA3LjI1IDlaTTkgNy41QzkuNjIxMzIgNy41IDEwLjEyNSA2Ljk5NjMyIDEwLjEyNSA2LjM3NUMxMC4xMjUgNS43NTM2OCA5LjYyMTMyIDUuMjUgOSA1LjI1QzguMzc4NjggNS4yNSA3Ljg3NSA1Ljc1MzY4IDcuODc1IDYuMzc1QzcuODc1IDYuOTk2MzIgOC4zNzg2OCA3LjUgOSA3LjVaIiBmaWxsPSIjQzFDNkNEIi8+Cjwvc3ZnPgoK'); color: #8D99A5;
background-repeat: no-repeat; }
width: 24px; .confirm-trust strong {
height: 24px; color: #17191C;
display: block; }
float: left;
} .confirm-trust::before {
</style> content: "";
</head> background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi41IDlDMTYuNSAxMy4xNDIxIDEzLjE0MjEgMTYuNSA5IDE2LjVDNC44NTc4NiAxNi41IDEuNSAxMy4xNDIxIDEuNSA5QzEuNSA0Ljg1Nzg2IDQuODU3ODYgMS41IDkgMS41QzEzLjE0MjEgMS41IDE2LjUgNC44NTc4NiAxNi41IDlaTTcuMjUgOUM3LjI1IDkuNDY1OTYgNy41Njg2OSA5Ljg1NzQ4IDggOS45Njg1VjEyLjM3NUM4IDEyLjkyNzMgOC40NDc3MiAxMy4zNzUgOSAxMy4zNzVIMTAuMTI1QzEwLjY3NzMgMTMuMzc1IDExLjEyNSAxMi45MjczIDExLjEyNSAxMi4zNzVDMTEuMTI1IDExLjgyMjcgMTAuNjc3MyAxMS4zNzUgMTAuMTI1IDExLjM3NUgxMFY5QzEwIDguOTY1NDggOS45OTgyNSA4LjkzMTM3IDkuOTk0ODQgOC44OTc3NkM5Ljk0MzYzIDguMzkzNSA5LjUxNzc3IDggOSA4SDguMjVDNy42OTc3MiA4IDcuMjUgOC40NDc3MiA3LjI1IDlaTTkgNy41QzkuNjIxMzIgNy41IDEwLjEyNSA2Ljk5NjMyIDEwLjEyNSA2LjM3NUMxMC4xMjUgNS43NTM2OCA5LjYyMTMyIDUuMjUgOSA1LjI1QzguMzc4NjggNS4yNSA3Ljg3NSA1Ljc1MzY4IDcuODc1IDYuMzc1QzcuODc1IDYuOTk2MzIgOC4zNzg2OCA3LjUgOSA3LjVaIiBmaWxsPSIjQzFDNkNEIi8+Cjwvc3ZnPgoK');
<body> background-repeat: no-repeat;
<header> width: 24px;
<h1>Continue to your account</h1> height: 24px;
</header> display: block;
<main> float: left;
{% include "sso_partial_profile.html" %} }
<p class="confirm-trust">Continuing will grant <strong>{{ display_url }}</strong> access to your account.</p> </style>
<a href="{{ redirect_url }}" class="primary-button">Continue</a> {% endblock %}
</main>
{% include "sso_footer.html" without context %} {% block body %}
</body> <header>
</html> <h1>Continue to your account</h1>
</header>
<main>
{% include "sso_partial_profile.html" %}
<p class="confirm-trust">Continuing will grant <strong>{{ display_url }}</strong> access to your account.</p>
<a href="{{ redirect_url }}" class="primary-button">Continue</a>
</main>
{% include "sso_footer.html" without context %}
{% endblock %}

29
synapse/res/templates/style.css Normal file
View File

@ -0,0 +1,29 @@
html {
height: 100%;
}
body {
background: #f9fafb;
max-width: 680px;
margin: auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.mx_Header {
border-bottom: 3px solid #ddd;
margin-bottom: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
}
@media screen and (max-width: 1120px) {
body {
font-size: 20px;
}
h1 { font-size: 1rem; }
h2 { font-size: .9rem; }
h3 { font-size: .85rem; }
h4 { font-size: .8rem; }
}

16
synapse/res/templates/terms.html
View File

@ -1,11 +1,10 @@
<html> {% block title %}Authentication{% endblock %}
<head>
<title>Authentication</title> {% block header %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/_matrix/static/client/register/style.css"> <link rel="stylesheet" href="/_matrix/static/client/register/style.css">
</head> {% endblock %}
<body>
{% block body %}
<form id="registrationForm" method="post" action="{{ myurl }}"> <form id="registrationForm" method="post" action="{{ myurl }}">
<div> <div>
{% if error is defined %} {% if error is defined %}
@ -19,5 +18,4 @@
<input type="submit" value="Agree" /> <input type="submit" value="Agree" />
</div> </div>
</form> </form>
</body> {% endblock %}
</html>