.user-panel { display: flex; width: 285px; 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; } } }