discourse/app/assets/stylesheets/common/components/user-card.scss

294 lines
5.1 KiB
SCSS

$card_width: 580px;
$avatar_width: 120px;
$avatar_margin: -50px; // negative margin makes avatars extend above cards
.animated-placeholder {
height: 20px;
position: relative;
}
.card-avatar-placeholder {
width: $avatar_width;
height: $avatar_width;
border-radius: 100%;
position: relative;
overflow: hidden;
&:before {
animation: placeHolderShimmer 4s linear infinite forwards;
position: absolute;
left: 0;
content: "";
background: linear-gradient(
to right,
$primary-very-low 10%,
$primary-low 18%,
$primary-very-low 33%
);
height: $avatar_width;
width: $card_width;
}
}
// shared styles for user and group cards
.user-card,
.group-card {
width: $card_width;
box-shadow: shadow("card");
color: $primary;
background: $secondary center center;
background-size: cover;
transition: opacity 0.2s, transform 0.2s;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
opacity: 0;
@include transform(scale(0.9));
&.show {
opacity: 1;
@include transform(scale(1));
}
.card-content {
padding: 10px;
background: rgba($secondary, 0.85);
margin-top: 80px;
&:after {
content: "";
display: block;
clear: both;
}
a.card-huge-avatar {
outline: none;
}
}
&.no-bg {
.card-content {
margin-top: 0;
}
}
.card-row:not(.first-row) {
margin-top: 0.5em;
}
// avatar - names - controls
.first-row {
.names {
padding-left: 1.25em;
.user-profile-link {
display: flex;
align-items: center;
}
.d-icon {
margin: 0 0.25em;
}
.name-username-wrapper {
margin-right: 0;
flex: 0 1 auto;
}
span {
display: block;
}
}
.usercard-controls {
list-style-type: none;
margin: 0;
button {
width: 100%;
}
}
}
.btn {
margin-bottom: 5px;
}
h1 {
line-height: $line-height-medium;
.d-icon {
color: $primary;
}
}
h3 {
display: inline;
margin-right: 0.5em;
color: $primary;
&.email,
.desc,
a {
color: $primary-high;
}
}
h1,
h2,
h3 {
margin: 0;
@include ellipsis;
}
h1,
h2 {
a {
color: $primary;
}
}
h2,
h3 {
font-weight: normal;
}
p {
margin: 0 0 5px 0;
}
}
// styles for user cards only
.user-card {
// avatar - names - controls
.first-row {
display: flex;
.avatar-placeholder {
width: $avatar_width;
height: $avatar_width;
}
.user-card-avatar {
margin-top: $avatar_margin;
}
.new-user a {
color: $primary-low-mid;
}
}
// user bio - suspension reason
.second-row {
max-height: 150px;
overflow: auto;
.bio {
a {
color: $primary;
text-decoration: underline;
}
a.mention {
text-decoration: none;
}
.overflow {
max-height: 60px;
overflow: hidden;
}
}
.suspended {
color: $danger;
.suspension-reason-title,
.suspension-date {
font-weight: bold;
}
}
.profile-hidden {
font-size: $font-up-1;
margin-top: 0.5em;
}
}
// featured topic
.featured-topic {
.desc {
color: $primary-high;
}
a {
color: $primary;
text-decoration: underline;
}
}
// location and website
.location-and-website {
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
.location,
.website-name {
display: flex;
overflow: hidden;
align-items: center;
.d-icon {
margin-right: 0.25em;
}
}
.website-name a,
.location span {
@include ellipsis;
color: $primary;
}
.location,
.local-time,
.website-name {
margin-right: 0.5em;
}
.website-name a {
text-decoration: underline;
}
}
// custom user fields
.public-user-fields {
margin: 0;
}
// badges
.badge-section {
display: flex;
align-items: flex-start;
.user-badge {
@include ellipsis;
background: $primary-very-low;
border: 1px solid $primary-low;
color: $primary;
}
.more-user-badges {
a {
@extend .user-badge;
}
}
}
}
// styles for group cards only
.group-card {
// avatar - names and controls
.first-row {
display: flex;
.group-card-avatar {
margin-top: $avatar_margin;
}
.avatar-flair {
display: flex;
background-size: contain;
background-repeat: no-repeat;
width: $avatar_width;
height: $avatar_width;
color: $primary;
.d-icon {
margin: auto;
font-size: $avatar_width / 1.5;
}
&.rounded {
border-radius: 50%;
}
}
}
// group bio
.second-row {
max-height: 150px;
overflow: auto;
.bio {
a {
color: $primary;
text-decoration: underline;
}
img {
max-width: 100%;
height: auto;
}
a.mention {
text-decoration: none;
}
.overflow {
max-height: 60px;
overflow: hidden;
}
}
}
}