initial styling of details picker
This commit is contained in:
parent
7f5337d152
commit
f3ea49f8af
119
synapse/res/templates/sso.css
Normal file
119
synapse/res/templates/sso.css
Normal 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;
|
||||||
|
}
|
|
@ -2,8 +2,11 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Synapse Login</title>
|
<title>Synapse Login</title>
|
||||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
|
||||||
<meta charset="utf-8">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
@ -18,32 +21,38 @@
|
||||||
<input type="text" name="username" id="field-username" autofocus required pattern="[a-z0-9\-=_\/\.]+">
|
<input type="text" name="username" id="field-username" autofocus required pattern="[a-z0-9\-=_\/\.]+">
|
||||||
<div class="postfix">:{{ server_name }}</div>
|
<div class="postfix">:{{ server_name }}</div>
|
||||||
</div>
|
</div>
|
||||||
<input type="submit" value="Continue">
|
<input type="submit" value="Continue" class="primary-button">
|
||||||
<!-- {% if user_attributes %} -->
|
<!-- {% if user_attributes %} -->
|
||||||
<section class="idp-pick-details">
|
<section class="idp-pick-details">
|
||||||
<h2><img src="{{idp.idp_icon | mxc_to_http(16, 16)}}"/>Information from {{ idp.idp_name }}</h2>
|
<h2><img src="{{idp.idp_icon | mxc_to_http(16, 16)}}"/>Information from {{ idp.idp_name }}</h2>
|
||||||
<!-- {% if user_attributes.avatar_url %} -->
|
<!-- {% if user_attributes.avatar_url %} -->
|
||||||
<div class="idp-detail idp-avatar">
|
<div class="idp-detail idp-avatar">
|
||||||
<label for="idp-avatar" class="name">Avatar</label>
|
<div class="check-row">
|
||||||
<label for="idp-avatar">Use</label>
|
<label for="idp-avatar" class="name">Avatar</label>
|
||||||
<input type="checkbox" name="use_avatar" id="idp-avatar" value="true" checked>
|
<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" />
|
<img src="{{user_attributes.avatar_url}}" class="avatar" />
|
||||||
</div>
|
</div>
|
||||||
<!-- {% endif %} -->
|
<!-- {% endif %} -->
|
||||||
<!-- {% if user_attributes.display_name %} -->
|
<!-- {% if user_attributes.display_name %} -->
|
||||||
<div class="idp-detail">
|
<div class="idp-detail">
|
||||||
<label for="idp-displayname" class="name">Display name</label>
|
<div class="check-row">
|
||||||
<label for="idp-displayname">Use</label>
|
<label for="idp-displayname" class="name">Display name</label>
|
||||||
<input type="checkbox" name="use_display_name" id="idp-displayname" value="true" checked>
|
<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>
|
<p class="idp-value">{{ user_attributes.display_name }}</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- {% endif %} -->
|
<!-- {% endif %} -->
|
||||||
<!-- {% if user_attributes.email %} -->
|
<!-- {% for email in user_attributes.emails %} -->
|
||||||
<div class="idp-detail">
|
<div class="idp-detail">
|
||||||
<label for="idp-email" class="name">E-mail</label>
|
<div class="check-row">
|
||||||
<label for="idp-email">Use</label>
|
<label for="idp-email" class="name">E-mail</label>
|
||||||
<input type="checkbox" name="use_email" id="idp-email" value="true" checked>
|
<label for="idp-email{{loop.index}}" class="use">Use</label>
|
||||||
<p class="idp-value">{{ user_attributes.email }}</p>
|
<input type="checkbox" name="use_email" id="idp-email{{loop.index}}" value="{{email}}" checked>
|
||||||
|
</div>
|
||||||
|
<p class="idp-value">{{ email }}</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- {% endif %} -->
|
<!-- {% endif %} -->
|
||||||
</section>
|
</section>
|
||||||
|
|
Loading…
Reference in a new issue