Discourse/discourse
Discourse/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-09-12 21:10:47 +08:00
Code Packages Activity Actions 7

UX: New style for staff highlight

Browse source 
Moved highlight to cooked content, also highlighting primary name (with shield) and title (if applicable). 

**Before**:
![image](https://user-images.githubusercontent.com/1681963/33724323-2269e79e-db3d-11e7-8c93-75b9dc9a1ab7.png)


**After**:
<img width="809" alt="screen shot 2017-12-06 at 3 55 31 pm" src="https://user-images.githubusercontent.com/1681963/33724287-09eb66de-db3d-11e7-8e02-0062ed2b8716.png">
This commit is contained in:
Kris 2017-12-07 12:40:39 -05:00 • committed by GitHub
parent 282633bc97
commit ef0d9d631c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

42
app/assets/stylesheets/common/base/topic-post.scss
View file

@ -23,7 +23,7 @@

span {
font-size: 0.929em;
padding-right: 8px;
margin-right: 8px;
display: inline-block;
max-width: 280px;
white-space: nowrap;
@ -38,7 +38,7 @@
margin-left: 3px;
color: dark-light-choose($primary-medium, $secondary-medium);
}
.new_user a, .user-title, .user-title a {
.new_user a, .user-title, .user-title a {
color: dark-light-choose($primary-medium, $secondary-medium);
}
}
@ -53,7 +53,6 @@
del { background-color: dark-light-choose($danger-low, scale-color($danger, $lightness: -60%)); }
}


.cooked, .d-editor-preview {
video {
max-width: 100%;
@ -62,6 +61,27 @@
top: 0;
}
}

// add staff color
.moderator {
.cooked {
background-color: dark-light-choose($highlight-low, $highlight-medium);
padding: 10px;
img:not(.thumbnail) {
max-width: 100%;
height: auto;
}
}
.names {
span.user-title, .first {
background-color: dark-light-choose($highlight-low, $highlight-medium);
color: dark-light-choose($primary-high, $secondary-low);
padding-left: 4px;
padding-right: 4px;
}
}
}

// we use aside to hold expandable quotes (versus, say, static blockquotes)
aside.quote {
margin-top: 1em;
@ -459,3 +479,19 @@ a.mention, a.mention-group {
font-size: 32px;
padding: 16px;
}

/* below standard tablet portrait ----------- */

@media all
and (max-width : 767px) {
.reply-to-tab {
span {display: none;}
}
.names {
span {display: block;}
}
.user-title {
float: left;
clear: left;
}
}