monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Linear gradient no longer extends under metadata on account pages

This commit is contained in:
kibigo! 2017-06-28 01:10:28 -07:00
parent 03f9648377
commit 7b1d233f4f
1 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/javascript/styles/accounts.scss
View File

@ -1,6 +1,5 @@
.card {
display: flex;
position: relative;
background: $ui-base-color;
background-size: cover;
background-position: center;
@ -8,6 +7,17 @@
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
overflow: hidden;
@media screen and (max-width: 700px) {
border-radius: 0;
box-shadow: none;
}
.details {
position: relative;
padding: 60px 0 0;
text-align: center;
flex: auto;
&::after {
background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8));
display: block;
@ -19,28 +29,18 @@
height: 100%;
z-index: 1;
}
@media screen and (max-width: 700px) {
border-radius: 0;
box-shadow: none;
}
.details {
position: relative;
padding: 60px 0 0;
text-align: center;
flex: auto;
z-index: 2;
}
.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 {