diff --git a/synapse/res/templates/sso.css b/synapse/res/templates/sso.css
index 46b309ea4e..338214f5d0 100644
--- a/synapse/res/templates/sso.css
+++ b/synapse/res/templates/sso.css
@@ -1,16 +1,26 @@
-body {
+body, input, select, textarea {
font-family: "Inter", "Helvetica", "Arial", sans-serif;
font-size: 14px;
color: #17191C;
}
-header {
+header, footer {
max-width: 480px;
width: 100%;
margin: 24px auto;
text-align: center;
}
+@media screen and (min-width: 800px) {
+ header {
+ margin-top: 90px;
+ }
+}
+
+header {
+ min-height: 60px;
+}
+
header p {
color: #737D8C;
line-height: 24px;
@@ -20,6 +30,10 @@ h1 {
font-size: 24px;
}
+a {
+ color: #418DED;
+}
+
.error_page h1 {
color: #FE2928;
}
@@ -47,6 +61,9 @@ main {
.primary-button {
border: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
text-decoration: none;
padding: 12px;
color: white;
@@ -63,8 +80,17 @@ main {
.profile {
display: flex;
+ flex-direction: column;
+ align-items: center;
justify-content: center;
- margin: 24px 0;
+ margin: 24px;
+ padding: 13px;
+ border: 1px solid #E9ECF1;
+ border-radius: 4px;
+}
+
+.profile.with-avatar {
+ margin-top: 42px; /* (36px / 2) + 24px*/
}
.profile .avatar {
@@ -72,17 +98,32 @@ main {
height: 36px;
border-radius: 100%;
display: block;
- margin-right: 8px;
+ margin-top: -32px;
+ margin-bottom: 8px;
}
.profile .display-name {
font-weight: bold;
margin-bottom: 4px;
+ font-size: 15px;
+ line-height: 18px;
}
.profile .user-id {
color: #737D8C;
+ font-size: 12px;
+ line-height: 12px;
}
-.profile .display-name, .profile .user-id {
- line-height: 18px;
+footer {
+ margin-top: 80px;
}
+
+footer svg {
+ display: block;
+ width: 46px;
+ margin: 0px auto 12px auto;
+}
+
+footer p {
+ color: #737D8C;
+}
\ No newline at end of file
|
