OAuth form: revamp account header styles

1 files changed, 30 insertions, 14 deletions

diff --git a/priv/static/instance/static.css b/priv/static/instance/static.css
index ccc48c294..1531a759c 100644
--- a/priv/static/instance/static.css
+++ b/priv/static/instance/static.css
@@ -46,14 +46,18 @@ body {
 
 .container {
   max-width: 400px;
-  padding: 20px;
   background-color: var(--foreground-color);
   border-radius: 4px;
+  overflow: hidden;
   margin: auto;
   margin-top: 35px;
   box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5);
 }
 
+.container__content {
+  padding: 0 20px;
+}
+
 h1 {
   margin: 0;
   font-size: 24px;
@@ -208,26 +212,38 @@ button:hover {
   font-size: 16px;
 }
 
-.account-header {
-  display: flex;
+.account-header__banner {
+  width: 100%;
+  height: 112px;
+  background-size: cover;
+  background-position: center;
 }
 
-.account-header .avatar {
-  display: flex;
-  max-width: 60px;
-  margin-right: 10px;
+.account-header__avatar {
+  width: 94px;
+  height: 94px;
+  background-size: cover;
+  background-position: center;
+  margin: -47px 10px 0;
+  border: 6px solid var(--foreground-color);
+  border-radius: 999px;
 }
 
-.account-header .avatar img {
-  width: 100%;
-  border-radius: 4px;
+.account-header__meta {
+  padding: 6px 20px 17px;
 }
 
-@media all and (max-width: 440px) {
-  .container {
-    margin-top: 0
-  }
+.account-header__display-name {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.account-header__nickname {
+  font-size: 14px;
+  color: var(--muted-text-color);
+}
 
+@media all and (max-width: 440px) {
   .scope {
     flex-basis: 0%;
   }