gab-social/app/javascript/styles/gabsocial/components/user-panel.scss
2019-07-02 03:10:25 -04:00

120 lines
1.9 KiB
SCSS

.user-panel {
display: flex;
width: 285px;
flex-direction: column;
overflow-y: hidden;
border-radius: 10px;
background: $gab-background-container;
body.theme-gabsocial-light & {
@include light-theme-shadow();
background: $gab-background-container-light;
}
&__header {
display: block;
height: 112px;
width: 100%;
img {
display: block;
height: 100%;
width: 100%;
margin: 0;
object-fit: cover;
}
}
&__profile {
display: flex;
align-items: flex-start;
padding: 0 10px;
margin-top: -53px;
.account__avatar {
display: block;
width: 82px;
height: 82px;
border: 6px solid $gab-background-base;
body.theme-gabsocial-light & {border: 6px solid $gab-background-base-light;}
background-size: 82px 82px;
}
}
&__meta {
display: block;
padding: 6px 20px 17px 20px;
}
&__account {
a {
text-decoration: none;
color: $primary-text-color;
}
&__name {
display: block;
font-size: 20px;
font-weight: bold;
line-height: 24px;
color: #fff;
body.theme-gabsocial-light & {color: $gab-active-border;}
}
&:hover & {
&__name {
text-decoration: underline;
}
}
&__username {
display: block;
font-size: 14px;
line-height: 16px;
color: $gab-background-info;
text-decoration: none !important;
}
}
&__stats-block {
display: flex;
justify-content: space-between;
padding-top: 12px;
}
.user-panel-stats-item {
display: flex;
align-items: start;
justify-content: left;
flex-wrap: wrap;
flex-direction: column;
a {
text-decoration: none;
color: $primary-text-color;
&:hover {
opacity: 0.8;
}
}
&__value {
display: block;
width: 100%;
color: #fff;
body.theme-gabsocial-light & {color: $gab-active-border;}
font-size: 20px;
font-weight: 800;
line-height: 24px;
}
&__label {
display: block;
width: 100%;
color: $gab-background-info;
font-size: 12px;
line-height: 14px;
}
}
}