diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss index c9caa64bf41..95b097f41ed 100644 --- a/app/javascript/styles/accounts.scss +++ b/app/javascript/styles/accounts.scss @@ -1,6 +1,5 @@ .card { display: flex; - position: relative; background: $ui-base-color; background-size: cover; background-position: center; @@ -8,18 +7,6 @@ box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); overflow: hidden; - &::after { - background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8)); - display: block; - content: ""; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 1; - } - @media screen and (max-width: 700px) { border-radius: 0; box-shadow: none; @@ -30,17 +17,30 @@ padding: 60px 0 0; text-align: center; flex: auto; - z-index: 2; + + &::after { + background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8)); + display: block; + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 1; + } } .name { display: block; + position: relative; font-size: 20px; line-height: 18px * 1.5; color: $primary-text-color; font-weight: 500; text-align: center; text-shadow: 0 0 2px $base-shadow-color; + z-index: 2; small { display: block; @@ -51,9 +51,11 @@ } .avatar { + position: relative; @include avatar-size(120px); margin: 0 auto; margin-bottom: 15px; + z-index: 2; img { @include avatar-radius(); @@ -71,8 +73,10 @@ .details-counters { display: inline-flex; + position: relative; flex-direction: row; margin: 15px 0; + z-index: 2; } .counter { @@ -120,11 +124,13 @@ } .bio { + position: relative; font-size: 14px; line-height: 18px; margin: 15px 0; padding: 5px 10px; color: $ui-secondary-color; + z-index: 2; } .metadata {