maxmustermann/synapse
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

initial styling of details picker

Browse source
This commit is contained in:
Bruno Windels 2021-01-29 11:35:05 +01:00
parent 7f5337d152
commit f3ea49f8af
2 changed files with 141 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
synapse/res/templates/sso.css Normal file
View file

@ -0,0 +1,119 @@
body {
font-family: "Inter", "Helvetica", "Arial", sans-serif;
font-size: 14px;
}
header {
max-width: 420px;
width: 100%;
margin: 24px auto;
text-align: center;
}
header p {
color: #8D99A5;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 14px;
}
h2 img {
vertical-align: middle;
margin-right: 8px;
}
label {
cursor: pointer;
}
main {
max-width: 300px;
width: 100%;
margin: 24px auto;
}
.username_input {
display: flex;
border: 2px solid #418DED;
border-radius: 8px;
padding: 12px;
position: relative;
margin: 16px 0;
align-items: center;
font-size: 12px;
}
.username_input label {
position: absolute;
top: -8px;
left: 14px;
font-size: 80%;
background: white;
padding: 2px;
}
.username_input input {
flex: 1;
display: block;
min-width: 0;
border: none;
}
.username_input div {
color: #8D99A5;
}
.primary-button {
border: none;
text-decoration: none;
padding: 12px;
color: white;
background-color: #418DED;
font-weight: bold;
display: block;
border-radius: 12px;
width: 100%;
margin: 16px 0;
cursor: pointer;
}
.idp-pick-details {
border: 1px solid #E9ECF1;
border-radius: 8px;
margin: 24px 0;
}
.idp-pick-details h2 {
margin: 0;
padding: 8px 12px;
}
.idp-pick-details .idp-detail {
border-top: 1px solid #E9ECF1;
padding: 12px;
}
.idp-pick-details .check-row {
display: flex;
align-items: center;
}
.idp-pick-details .check-row .name {
flex: 1;
}
.idp-pick-details .use, .idp-pick-details .idp-value {
color: #737D8C;
}
.idp-pick-details .avatar {
width: 53px;
height: 53px;
border-radius: 100%;
display: block;
margin-top: 8px;
}

35
synapse/res/templates/sso_auth_account_details.html
View file

@ -2,8 +2,11 @@
<html lang="en">
<head>
<title>Synapse Login</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<style type="text/css">
{% include "sso.css" without context %}
</style>
</head>
<body>
<header>
@ -18,32 +21,38 @@
<input type="text" name="username" id="field-username" autofocus required pattern="[a-z0-9\-=_\/\.]+">
<div class="postfix">:{{ server_name }}</div>
</div>
<input type="submit" value="Continue">
<input type="submit" value="Continue" class="primary-button">
<!-- {% if user_attributes %} -->
<section class="idp-pick-details">
<h2><img src="{{idp.idp_icon | mxc_to_http(16, 16)}}"/>Information from {{ idp.idp_name }}</h2>
<!-- {% if user_attributes.avatar_url %} -->
<div class="idp-detail idp-avatar">
<label for="idp-avatar" class="name">Avatar</label>
<label for="idp-avatar">Use</label>
<input type="checkbox" name="use_avatar" id="idp-avatar" value="true" checked>
<div class="check-row">
<label for="idp-avatar" class="name">Avatar</label>
<label for="idp-avatar" class="use">Use</label>
<input type="checkbox" name="use_avatar" id="idp-avatar" value="true" checked>
</div>
<img src="{{user_attributes.avatar_url}}" class="avatar" />
</div>
<!-- {% endif %} -->
<!-- {% if user_attributes.display_name %} -->
<div class="idp-detail">
<label for="idp-displayname" class="name">Display name</label>
<label for="idp-displayname">Use</label>
<input type="checkbox" name="use_display_name" id="idp-displayname" value="true" checked>
<div class="check-row">
<label for="idp-displayname" class="name">Display name</label>
<label for="idp-displayname" class="use">Use</label>
<input type="checkbox" name="use_display_name" id="idp-displayname" value="true" checked>
</div>
<p class="idp-value">{{ user_attributes.display_name }}</p>
</div>
<!-- {% endif %} -->
<!-- {% if user_attributes.email %} -->
<!-- {% for email in user_attributes.emails %} -->
<div class="idp-detail">
<label for="idp-email" class="name">E-mail</label>
<label for="idp-email">Use</label>
<input type="checkbox" name="use_email" id="idp-email" value="true" checked>
<p class="idp-value">{{ user_attributes.email }}</p>
<div class="check-row">
<label for="idp-email" class="name">E-mail</label>
<label for="idp-email{{loop.index}}" class="use">Use</label>
<input type="checkbox" name="use_email" id="idp-email{{loop.index}}" value="{{email}}" checked>
</div>
<p class="idp-value">{{ email }}</p>
</div>
<!-- {% endif %} -->
</section>