mirror of
https://github.com/discourse/discourse.git
synced 2024-11-28 22:16:17 +08:00
6b04967e2f
Locking a post prevents it from being edited. This is useful if the user has posted something which has been edited out, and the staff members don't want them to be able to edit it back in again.
578 lines
11 KiB
SCSS
578 lines
11 KiB
SCSS
.placeholder-avatar {
|
|
display: inline-block;
|
|
background-color: $primary-low;
|
|
width: 45px;
|
|
height: 45px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.placeholder-text {
|
|
display: inline-block;
|
|
background-color: $primary-low;
|
|
width: 100%;
|
|
height: 1.5em;
|
|
margin-bottom: 0.6em;
|
|
}
|
|
|
|
.names {
|
|
float: left;
|
|
|
|
span.first {
|
|
font-weight: bold;
|
|
}
|
|
|
|
span {
|
|
font-size: $font-0;
|
|
margin-right: 8px;
|
|
display: inline-block;
|
|
max-width: 280px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
a {
|
|
color: dark-light-choose($primary-high, $secondary-low);
|
|
}
|
|
}
|
|
.fa {
|
|
font-size: $font-down-1;
|
|
margin-left: 3px;
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
|
}
|
|
.new_user a, .user-title, .user-title a {
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
|
}
|
|
}
|
|
|
|
// global styles for the cooked HTML content in posts (and preview)
|
|
.cooked, .d-editor-preview {
|
|
word-wrap: break-word;
|
|
line-height: $line-height-large;
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: 30px 0 10px;
|
|
line-height: $line-height-medium;
|
|
}
|
|
|
|
h1 {
|
|
font-size: $font-up-4;
|
|
}
|
|
|
|
h2 {
|
|
font-size: $font-up-3;
|
|
}
|
|
|
|
h3 {
|
|
font-size: $font-up-2;
|
|
}
|
|
|
|
h4 {
|
|
font-size: $font-up-1;
|
|
}
|
|
|
|
h5 {
|
|
font-size: $font-0;
|
|
}
|
|
|
|
h6 {
|
|
font-size: $font-down-1;
|
|
}
|
|
|
|
a { word-wrap: break-word; }
|
|
ins { background-color: dark-light-choose($success-low, scale-color($success, $lightness: -60%)); }
|
|
del { background-color: dark-light-choose($danger-low, scale-color($danger, $lightness: -60%)); }
|
|
// Prevents users from breaking posts with tag nesting
|
|
big { font-size: 2rem; }
|
|
small { font-size: 0.75rem; }
|
|
small small { font-size: .75em; }
|
|
big big { font-size: 1em; }
|
|
sub sub sub {bottom: 0;}
|
|
sup sup sup {top: 0;}
|
|
}
|
|
|
|
.cooked, .d-editor-preview {
|
|
video {
|
|
max-width: 100%;
|
|
}
|
|
sup sup {
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
// add staff color
|
|
.moderator {
|
|
.regular > .cooked {
|
|
background-color: dark-light-choose($highlight-low, $highlight-medium);
|
|
padding: 10px;
|
|
img:not(.thumbnail) {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
.clearfix > .topic-meta-data > .names {
|
|
span.user-title {
|
|
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;
|
|
margin-bottom: 1em;
|
|
|
|
.badge-wrapper { margin-left: 5px; }
|
|
|
|
.title {
|
|
@include post-aside;
|
|
|
|
color: dark-light-choose($primary-high, $secondary-low);
|
|
// IE will screw up the blockquote underneath if bottom padding is 0px
|
|
padding: 12px 12px 1px 12px;
|
|
// blockquote is underneath this and has top margin
|
|
.avatar { margin-right: 7px; }
|
|
img { margin-top: -4px; }
|
|
@include unselectable;
|
|
}
|
|
|
|
// blockquote is docked within aside for content
|
|
blockquote {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.quote-controls, .quote-controls .d-icon {
|
|
color: dark-light-choose($primary-low-mid, $secondary-high);
|
|
}
|
|
|
|
.cooked .highlight {
|
|
background-color: $tertiary-low;
|
|
padding: 2px;
|
|
margin: -2px;
|
|
}
|
|
|
|
.post-action {
|
|
.undo-action, .act-action{
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.post-hidden {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.topic-post.staged {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
|
|
.quote-controls {
|
|
float: right;
|
|
display: flex;
|
|
.d-icon {
|
|
margin-left: 0.2em;
|
|
}
|
|
}
|
|
|
|
.quote-button {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: blend-primary-secondary(50%);
|
|
color: dark-light-choose($secondary, $primary);
|
|
padding: 10px;
|
|
z-index: z("dropdown");
|
|
opacity: 0.9;
|
|
|
|
.d-icon {
|
|
display: inline-block;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $primary-medium;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.topic-avatar, .user-card-avatar {
|
|
position: relative;
|
|
}
|
|
|
|
.topic-map {
|
|
|
|
.avatars {
|
|
> div {
|
|
float: left;
|
|
position: relative;
|
|
margin: 3px 0;
|
|
}
|
|
.post-count {
|
|
position: absolute;
|
|
right: 0;
|
|
border-radius: 100px;
|
|
padding: 3px 5px;
|
|
text-align: center;
|
|
font-weight: normal;
|
|
font-size: $font-down-2;
|
|
line-height: $line-height-small;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
float: left;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
}
|
|
|
|
.topic-avatar, .avatar-flair-preview, .user-card-avatar, .topic-map .poster {
|
|
.avatar-flair {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: -6px;
|
|
}
|
|
}
|
|
.topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair {
|
|
background-size: 20px 20px;
|
|
width: 20px;
|
|
height: 20px;
|
|
&.rounded {
|
|
background-size: 18px 18px;
|
|
border-radius: 12px;
|
|
width: 24px;
|
|
height: 24px;
|
|
bottom: -2px;
|
|
right: -8px;
|
|
}
|
|
}
|
|
.user-card-avatar .avatar-flair {
|
|
background-size: 40px 40px;
|
|
width: 40px;
|
|
height: 40px;
|
|
&.rounded {
|
|
background-size: 30px 30px;
|
|
border-radius: 24px;
|
|
width: 40px;
|
|
height: 40px;
|
|
bottom: -2px;
|
|
right: -4px;
|
|
}
|
|
.fa {
|
|
font-size: $font-up-4;
|
|
}
|
|
}
|
|
.topic-map .poster .avatar-flair {
|
|
right: 0;
|
|
background-size: 12px 12px;
|
|
width: 16px;
|
|
height: 16px;
|
|
bottom: -3px;
|
|
&.rounded {
|
|
background-size: 12px 12px;
|
|
border-radius: 8px;
|
|
width: 16px;
|
|
height: 16px;
|
|
bottom: -2px;
|
|
right: 0;
|
|
}
|
|
.fa {
|
|
font-size: $font-0;
|
|
}
|
|
}
|
|
.topic-avatar .poster-avatar-extra {
|
|
display: none;
|
|
}
|
|
|
|
.map {
|
|
&:first-of-type {
|
|
display: flex;
|
|
.buttons {
|
|
margin-left: auto;
|
|
order: 15;
|
|
.btn {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic-body {
|
|
// this is necessary for ANYTHING that extends past the right edge of
|
|
// the post body, such as an image in a deeply nested list, image in
|
|
// a deeply nested blockquote, and so on.. you get the idea.
|
|
.contents .cooked {
|
|
overflow: hidden;
|
|
}
|
|
&.highlighted {
|
|
animation: background-fade-highlight 2.5s ease-out;
|
|
}
|
|
}
|
|
|
|
// this ensures consistent top margin on topic posts even if the first line of a post
|
|
// is a top-margin-less element like a list or image.
|
|
.topic-body .regular {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.post-info {
|
|
|
|
&.via-email, &.whisper {
|
|
line-height: $line-height-medium;
|
|
}
|
|
&.via-email, &.whisper, &.post-locked {
|
|
margin-right: 5px;
|
|
.d-icon {
|
|
font-size: $font-0;
|
|
}
|
|
}
|
|
|
|
.wiki,
|
|
.last-wiki-edit {
|
|
color: green !important;
|
|
}
|
|
|
|
&.via-email {
|
|
color: dark-light-choose($primary-low-mid, $secondary-high);
|
|
}
|
|
&.raw-email {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
pre {
|
|
code {
|
|
word-wrap: normal;
|
|
display: block;
|
|
padding: 5px 10px;
|
|
color: $primary;
|
|
background: blend-primary-secondary(5%);
|
|
max-height: 500px;
|
|
}
|
|
}
|
|
|
|
kbd
|
|
{
|
|
background-color: $secondary;
|
|
border: 1px solid $primary-low;
|
|
border-radius: 3px;
|
|
box-shadow: 0 1px 0 rgba(0,0,0, .8);
|
|
color: $primary;
|
|
display: inline-block;
|
|
font-size: $font-down-1;
|
|
line-height: $line-height-large;
|
|
margin: 0 .1em;
|
|
padding: .1em .6em;
|
|
|
|
// don't allow more than 3 nested elements to prevent FF from crashing
|
|
// cf. http://what.thedailywtf.com/t/nested-elements/7927
|
|
// 3 levels are needed to prevent highlighted words being hidden
|
|
// cf. https://meta.discourse.org/t/word-disappears-when-searched-and-in-details-summary-kbd-b/25741
|
|
* * * { display: none; }
|
|
}
|
|
|
|
// we assume blockquotes have their own margins, so all blockquotes
|
|
// will remove margins from first (top) and last (bottom) child elements
|
|
blockquote > *:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
blockquote > *:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.gap {
|
|
padding: 0.25em 0 0.5em 4.3em;
|
|
color: dark-light-choose($primary-medium, $secondary-high);
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-size: $font-down-1;
|
|
}
|
|
|
|
.who-liked {
|
|
transition: height 0.5s;
|
|
a {
|
|
margin: 0 0.25em 0.5em 0;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
|
|
.cooked table, .d-editor-preview table {
|
|
thead {
|
|
border-bottom: 2px solid lighten($primary, 80%);
|
|
th {
|
|
text-align: left;
|
|
padding-bottom: 2px;
|
|
}
|
|
}
|
|
|
|
td,th {
|
|
padding: 3px 3px 3px 10px;
|
|
}
|
|
tr {
|
|
border-bottom: 1px solid lighten($primary, 80%);
|
|
}
|
|
}
|
|
|
|
.small-action {
|
|
max-width: 755px;
|
|
border-top: 1px solid $primary-low;
|
|
.topic-avatar {
|
|
padding: .67em 0;
|
|
border-top: none;
|
|
float: left;
|
|
i {
|
|
font-size: 2em;
|
|
width: 45px;
|
|
text-align: center;
|
|
color: dark-light-choose($primary-low-mid, $secondary-high);
|
|
}
|
|
}
|
|
|
|
.small-action.deleted {
|
|
background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -60%);
|
|
}
|
|
|
|
.small-action-desc.timegap {
|
|
color: dark-light-choose($primary-medium, $secondary-high);
|
|
}
|
|
|
|
.small-action-desc {
|
|
padding: 1em;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-size: $font-down-1;
|
|
color: dark-light-choose($primary-low-mid, $secondary-high);
|
|
|
|
.custom-message {
|
|
text-transform: none;
|
|
margin: 15px 0 5px;
|
|
font-weight: normal;
|
|
font-size: $font-up-1;
|
|
p {
|
|
margin: 5px 0;
|
|
line-height: $line-height-large;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
margin-right: 0.8em;
|
|
float: left;
|
|
}
|
|
|
|
> p {
|
|
margin: 0;
|
|
padding-top: 4px;
|
|
}
|
|
}
|
|
|
|
button {
|
|
background: transparent;
|
|
border: 0;
|
|
float: right;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
clear: both;
|
|
}
|
|
|
|
.whisper {
|
|
.post-info.whisper {
|
|
margin-left: 0.5em;
|
|
}
|
|
.topic-body {
|
|
.cooked {
|
|
font-style: italic;
|
|
color: $primary-medium;
|
|
}
|
|
}
|
|
}
|
|
|
|
a.mention, a.mention-group {
|
|
padding: 2px 4px;
|
|
color: dark-light-choose($primary-high, $secondary-low);
|
|
background: $primary-low;
|
|
border-radius: 8px;
|
|
font-weight: bold;
|
|
font-size: 0.93em;
|
|
}
|
|
|
|
.popup-menu {
|
|
h3 {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
#suggested-topics {
|
|
.topics {
|
|
padding-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
.large-image-placeholder {
|
|
> a {
|
|
|
|
&.link {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
> * { overflow: hidden; }
|
|
|
|
> i.fa {
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
|
margin-right: 6px;
|
|
font-size: $font-0;
|
|
line-height: $line-height-large;
|
|
}
|
|
|
|
> span.url {
|
|
display: inline-block;
|
|
max-width: 300px;
|
|
margin-right: 6px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
> span.help {
|
|
display: inline-block;
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
|
font-size: $font-down-1;
|
|
font-style: italic;
|
|
line-height: $line-height-large;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
> span.badge-notification {
|
|
vertical-align: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.broken-image, .large-image {
|
|
color: dark-light-choose($primary-low-mid, $secondary-high);
|
|
border: 1px solid $primary-low;
|
|
font-size: $font-up-5;
|
|
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;
|
|
}
|
|
}
|