gab-social/app/javascript/styles/gabsocial/components/user-panel.scss

118 lines
1.9 KiB
SCSS

.user-panel {
display: flex;
width: 265px;
flex-direction: column;
overflow-y: hidden;
@include gab-container-standards();
&__header {
display: block;
height: 112px;
width: 100%;
background: lighten($gab-background-container, 4%);
body.theme-gabsocial-light & {
background: darken($gab-background-container-light, 4%);
}
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: cover;
}
}
&__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-default-text-light;}
}
&:hover & {
&__name {
text-decoration: underline;
}
}
&__username {
display: block;
font-size: 14px;
line-height: 16px;
color: $gab-secondary-text;
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-default-text-light;}
font-size: 20px;
font-weight: 800;
line-height: 24px;
}
&__label {
display: block;
width: 100%;
color: $gab-secondary-text;
font-size: 12px;
line-height: 14px;
}
}
}