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

Failed to ignore revisions in .git-blame-ignore-revs.

292 lines
5.1 KiB
SCSS
Raw Normal View History

$card_width: 580px;
$avatar_width: 120px;
$avatar_margin: -50px; // negative margin makes avatars extend above cards
2015-08-18 16:28:02 -04:00
2019-04-24 04:55:09 -04:00
.animated-placeholder {
height: 20px;
position: relative;
}
2019-04-24 04:55:09 -04:00
.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;
}
2019-04-24 04:55:09 -04:00
}
// shared styles for user and group cards
.user-card,
.group-card {
width: $card_width;
box-shadow: shadow("card");
color: $primary;
background: $secondary center center;
2015-10-15 20:10:02 -04:00
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));
}
2014-10-29 19:48:20 -04:00
.card-content {
padding: 10px;
background: rgba($secondary, 0.85);
2014-11-01 22:58:18 -04:00
margin-top: 80px;
2014-10-29 19:48:20 -04:00
&:after {
content: "";
2014-10-29 19:48:20 -04:00
display: block;
clear: both;
}
a.card-huge-avatar {
outline: none;
}
2014-10-29 19:48:20 -04:00
}
&.no-bg {
.card-content {
margin-top: 0;
}
2014-10-29 19:48:20 -04:00
}
.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 {
2018-01-12 17:27:38 -05:00
line-height: $line-height-medium;
Upgrade to FontAwesome 5 (take two) (#6673) * Add missing icons to set * Revert FA5 revert This reverts commit 42572ff * use new SVG syntax in locales * Noscript page changes (remove login button, center "powered by" footer text) * Cast wider net for SVG icons in settings - include any _icon setting for SVG registry (offers better support for plugin settings) - let themes store multiple pipe-delimited icons in a setting - also replaces broken onebox image icon with SVG reference in cooked post processor * interpolate icons in locales * Fix composer whisper icon alignment * Add support for stacked icons * SECURITY: enforce hostname to match discourse hostname This ensures that the hostname rails uses for various helpers always matches the Discourse hostname * load SVG sprite with pre-initializers * FIX: enable caching on SVG sprites * PERF: use JSONP for SVG sprites so they are served from CDN This avoids needing to deal with CORS for loading of the SVG Note, added the svg- prefix to the filename so we can quickly tell in dev tools what the file is * Add missing SVG sprite JSONP script to CSP * Upgrade to FA 5.5.0 * Add support for all FA4.7 icons - adds complete frontend and backend for renamed FA4.7 icons - improves performance of SvgSprite.bundle and SvgSprite.all_icons * Fix group avatar flair preview - adds an endpoint at /svg-sprites/search/:keyword - adds frontend ajax call that pulls icon in avatar flair preview even when it is not in subset * Remove FA 4.7 font files
2018-11-26 16:49:57 -05:00
.d-icon {
color: $primary;
2014-11-01 22:58:18 -04:00
}
}
h3 {
display: inline;
margin-right: 0.5em;
color: $primary;
2019-04-12 07:55:01 -04:00
&.email,
.desc,
a {
color: $primary-high;
}
}
h1,
h2,
h3 {
2018-05-08 15:38:55 -04:00
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 {
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 {
2018-12-14 22:16:18 -05:00
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%;
}
2014-04-16 06:02:57 -04:00
}
2014-04-14 01:58:36 -04:00
}
// 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;
}
}
}
2014-04-14 01:58:36 -04:00
}