discourse/app/assets/stylesheets/desktop/poster_expansion.scss
cpradio 37ad1f96b5 UX: Add Suspension Message to User Card
Add the suspension message to the user card of the user. This replaces the about me (bio) just like it does on their profile page.
https://meta.discourse.org/t/profile-page-on-mobile-selecting-menu-item-should-jump-to-the-selected-content/19896/2
2014-09-10 19:30:32 -04:00

144 lines
2.2 KiB
SCSS

// styles that apply to the "share" popup when sharing a link to a post or topic
#user-expansion {
position: absolute;
width: 460px;
left: 20px;
z-index: 990;
box-shadow: 0 2px 6px rgba(0,0,0, .6);
margin-top: -2px;
background-color: $secondary;
padding: 12px 12px 5px 12px;
border: 1px solid scale-color-diff();
.avatar-placeholder {
width: 120px;
height: 120px;
float: left;
padding-right: 10px;
}
h1 {
display: inline-block;
min-width: 120px;
font-size: 25px;
line-height: 1.25;
display: block;
max-width: 280px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
a {
color: $primary;
}
}
h2 {
font-size: 15px;
line-height: 1.25;
font-weight: normal;
display: block;
max-width: 280px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
a {
color: $primary;
}
}
h3 {
font-size: 13px;
font-weight: normal;
margin-top: 0;
color: scale-color($primary, $lightness: 50%);
}
.groups {
font-size: 13px;
font-weight: normal;
margin-top: 0;
color: $primary;
.group-link {
color: $primary;
}
}
.metadata {
position: absolute;
right: 20px;
top: 10px;
max-width: 180px;
text-align: right;
}
.bottom {
clear: both;
padding-top: 10px;
}
.bio {
max-height: 100px;
overflow: auto;
margin-bottom: 10px;
img {
max-width: 100%;
}
}
img.avatar {
float: left;
padding-right: 10px;
}
p {
margin: 0 0 5px 0;
}
p.loading {
margin-top: 45px;
color: $primary;
}
.btn {
margin: 0 0 7px 0;
}
.new-user a {
color: scale-color($primary, $lightness: 70%);
}
&.show-badges {
width: 560px;
.names {
width: 250px;
float: left;
}
.badge-section {
margin-top: 10px;
float: left;
width: 300px;
h3 {
color: $primary;
font-size: 14px;
margin-bottom: -8px;
}
}
.more-user-badges {
@extend .user-badge;
padding: 3px 8px;
font-size: 13px;
}
}
.suspended {
color: $danger;
margin-bottom: 10px;
}
}