mirror of
https://github.com/discourse/discourse.git
synced 2024-11-26 10:29:47 +08:00
61aeb2da90
* FEATURE: Inline topic summary. Cached version accessible to everyone. Anons and non-members of the `custom_summarization_allowed_groups_map` groups can see cached summaries for any accessible topic. After the first 12 hours and if the posts to summarize have changed, allowed users clicking on the button will automatically re-generate it. * Ensure chat summaries work and prevent model hallucinations when there are no messages.
1731 lines
33 KiB
SCSS
1731 lines
33 KiB
SCSS
.button-count.has-pending {
|
|
span {
|
|
background-color: var(--danger);
|
|
color: var(--secondary);
|
|
border-radius: 10px;
|
|
padding: 0.25em 0.5em;
|
|
display: inline-block;
|
|
font-size: 0.8em;
|
|
}
|
|
}
|
|
|
|
.placeholder-avatar {
|
|
display: inline-block;
|
|
width: 45px;
|
|
height: 45px;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
&:before {
|
|
animation: placeHolderShimmer 4s linear infinite forwards;
|
|
position: absolute;
|
|
left: 0;
|
|
content: "";
|
|
background: linear-gradient(
|
|
to right,
|
|
var(--primary-very-low) 10%,
|
|
var(--primary-low) 28%,
|
|
var(--primary-very-low) 43%
|
|
);
|
|
height: 45px;
|
|
width: 700px;
|
|
}
|
|
}
|
|
|
|
.placeholder-text {
|
|
margin-left: var(--topic-body-width-padding);
|
|
display: inline-block;
|
|
width: calc(100% - var(--topic-body-width-padding));
|
|
height: 1.5em;
|
|
margin-bottom: 0.6em;
|
|
}
|
|
|
|
.post-stream .placeholder .row {
|
|
display: flex;
|
|
}
|
|
|
|
.names {
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
span.first {
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-weight: bold;
|
|
}
|
|
|
|
span {
|
|
font-size: var(--font-0);
|
|
margin-right: 8px;
|
|
display: inline-block;
|
|
@include ellipsis;
|
|
vertical-align: middle;
|
|
a {
|
|
color: var(--primary-high-or-secondary-low);
|
|
}
|
|
}
|
|
.fa {
|
|
font-size: var(--font-down-1);
|
|
color: var(--primary-med-or-secondary-med);
|
|
}
|
|
.svg-icon-title {
|
|
margin-left: 3px;
|
|
margin-right: 0px;
|
|
}
|
|
.new_user a,
|
|
.user-title,
|
|
.user-title a {
|
|
color: var(--primary-med-or-secondary-med);
|
|
}
|
|
}
|
|
|
|
// global styles for the cooked HTML content in posts (and preview)
|
|
.cooked,
|
|
.d-editor-preview {
|
|
word-wrap: break-word;
|
|
line-height: var(--line-height-large);
|
|
|
|
> *:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 30px 0 10px;
|
|
line-height: var(--line-height-medium);
|
|
a.anchor {
|
|
opacity: 0;
|
|
transition: opacity 0.25s;
|
|
&:before {
|
|
content: svg-uri(
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 512 512" fill="#{$primary-medium}"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>'
|
|
);
|
|
line-height: 1.4;
|
|
margin-left: -20px;
|
|
padding-right: 4px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
// show when hovering where icon should be
|
|
// show when hovering header
|
|
.discourse-no-touch & a.anchor:hover,
|
|
.discourse-no-touch &:hover a.anchor {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--font-up-3-rem);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--font-up-2-rem);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--font-up-1-rem);
|
|
}
|
|
|
|
h4 {
|
|
font-size: var(--font-0-rem);
|
|
}
|
|
|
|
h5 {
|
|
font-size: var(--font-down-1-rem);
|
|
}
|
|
|
|
h6 {
|
|
font-size: var(--font-down-2-rem);
|
|
}
|
|
|
|
a {
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
mark {
|
|
text-decoration: none;
|
|
}
|
|
|
|
ins {
|
|
background-color: var(--success-low);
|
|
text-decoration: underline;
|
|
}
|
|
del {
|
|
background-color: var(--danger-low);
|
|
text-decoration: line-through;
|
|
}
|
|
mark {
|
|
background-color: var(--highlight);
|
|
}
|
|
// Prevents users from breaking posts with tag nesting
|
|
big {
|
|
font-size: 1.5rem;
|
|
}
|
|
small {
|
|
font-size: 0.75rem;
|
|
}
|
|
small small {
|
|
font-size: 0.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;
|
|
}
|
|
|
|
img:not(.thumbnail):not(.ytp-thumbnail-image):not(.emoji) {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: inline-block; // Ensure dimensions are maintained even after load error
|
|
|
|
@supports not (aspect-ratio: 1) {
|
|
// (see javascripts/discourse/app/initializers/image-aspect-ratio.js)
|
|
height: var(--calculated-height);
|
|
}
|
|
}
|
|
}
|
|
|
|
// add staff color
|
|
.moderator {
|
|
.regular > .cooked {
|
|
background-color: var(--highlight-bg);
|
|
}
|
|
.clearfix > .topic-meta-data > .names {
|
|
span.user-title {
|
|
color: var(--primary-high-or-secondary-low);
|
|
a {
|
|
background-color: var(--highlight-bg);
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic-meta-data {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.names {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.post-infos {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-status-message {
|
|
display: flex;
|
|
img.emoji {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
nav.post-controls {
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: var(--primary-low-mid);
|
|
|
|
.actions {
|
|
display: inline-flex;
|
|
text-align: right;
|
|
margin-left: auto;
|
|
|
|
// Some buttons can be doubled up, like likes or flags
|
|
.double-button {
|
|
display: inline-flex;
|
|
flex: 0 1 auto;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
button {
|
|
// It looks really confusing when one half a double button has an inner shadow on click.
|
|
&:active {
|
|
box-shadow: none;
|
|
}
|
|
&.my-likes,
|
|
&.read-indicator,
|
|
&.regular-likes {
|
|
// Like count on posts
|
|
.d-icon {
|
|
color: var(--primary-low-mid);
|
|
padding-left: 0.45em;
|
|
}
|
|
}
|
|
&.has-like {
|
|
// Like button after I've liked
|
|
.d-icon {
|
|
color: var(--love);
|
|
}
|
|
}
|
|
&[disabled] {
|
|
// Disabled like button
|
|
cursor: not-allowed;
|
|
}
|
|
&.button-count {
|
|
// Like count button
|
|
height: 100%; // sometimes the font might be shorter than the icon
|
|
&:not(.my-likes) {
|
|
padding-right: 0;
|
|
}
|
|
+ .toggle-like {
|
|
// Like button when like count is present
|
|
padding-left: 0.45em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
a,
|
|
button {
|
|
color: var(--primary-low-mid-or-secondary-high);
|
|
.d-icon {
|
|
opacity: 1;
|
|
}
|
|
display: inline-block;
|
|
}
|
|
|
|
button {
|
|
flex: 0 1 auto;
|
|
font-size: var(--font-up-1);
|
|
padding: 8px 10px;
|
|
vertical-align: top;
|
|
background: transparent;
|
|
border: none;
|
|
.d-icon {
|
|
// this avoids an issue where hovering off the icon
|
|
// removes the .d-hover class from the button prematurely
|
|
pointer-events: none;
|
|
}
|
|
&.d-hover,
|
|
&:focus,
|
|
&:active {
|
|
outline: none;
|
|
background: var(--primary-low);
|
|
color: var(--primary);
|
|
}
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
&.admin {
|
|
position: relative;
|
|
}
|
|
&.delete.d-hover,
|
|
&.delete:active,
|
|
&.delete:focus {
|
|
background: var(--danger);
|
|
color: var(--secondary);
|
|
.d-icon {
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
&.bookmarked .d-icon {
|
|
color: var(--tertiary);
|
|
}
|
|
&.create {
|
|
margin-right: 0;
|
|
color: var(--primary-high-or-secondary-low);
|
|
.d-icon {
|
|
color: var(--primary-high-or-secondary-low);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.show-replies {
|
|
font-size: var(--font-up-1);
|
|
font-size: inherit;
|
|
padding: 10px;
|
|
color: var(--primary-medium);
|
|
&:hover,
|
|
&:focus {
|
|
outline: none;
|
|
color: var(--primary);
|
|
background: var(--primary-low);
|
|
}
|
|
.d-icon {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
.d-button-label + .d-icon {
|
|
margin-left: 0.45em;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.deleted {
|
|
.regular > .cooked {
|
|
background-color: var(--danger-low-mid);
|
|
}
|
|
.topic-meta-data:not(.embedded-reply) {
|
|
color: var(--danger);
|
|
|
|
.post-info a,
|
|
a {
|
|
color: currentColor;
|
|
}
|
|
|
|
.d-icon {
|
|
color: currentColor;
|
|
}
|
|
}
|
|
nav.post-controls {
|
|
color: var(--danger);
|
|
|
|
.show-replies,
|
|
button.reply.create {
|
|
color: var(--danger);
|
|
.d-icon {
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
.widget-button {
|
|
&:hover {
|
|
color: currentColor;
|
|
background: var(--danger-low);
|
|
.d-icon {
|
|
color: currentColor;
|
|
}
|
|
}
|
|
&[disabled]:hover {
|
|
background-color: transparent;
|
|
cursor: not-allowed;
|
|
}
|
|
&.fade-out {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.d-icon {
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
.post-action {
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
|
|
@keyframes heartBump {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.5);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.has-like .d-icon.heart-animation {
|
|
animation: heartBump 0.4s;
|
|
}
|
|
|
|
@keyframes slideout {
|
|
from {
|
|
max-height: 60px;
|
|
}
|
|
|
|
to {
|
|
max-height: 9999px;
|
|
}
|
|
}
|
|
|
|
// 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: var(--primary-high-or-secondary-low);
|
|
padding: 12px 12px 0px 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;
|
|
.expanded-quote {
|
|
overflow: hidden;
|
|
animation: slideout 1s ease-in-out;
|
|
&.icon-only {
|
|
text-align: center;
|
|
font-size: var(--font-up-4);
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.quote-controls,
|
|
.quote-controls .d-icon {
|
|
color: var(--primary-low-mid-or-secondary-high);
|
|
}
|
|
|
|
.quote-controls {
|
|
.quote-toggle {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.cooked .highlight {
|
|
background-color: var(--tertiary-low);
|
|
padding: 2px;
|
|
margin: -2px;
|
|
}
|
|
|
|
.post-ignored {
|
|
font-style: italic;
|
|
}
|
|
|
|
.post-action {
|
|
color: var(--primary-medium);
|
|
.undo-action,
|
|
.act-action {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.small-user-list .unknown {
|
|
display: inline-block;
|
|
background-color: var(--primary-low);
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 50%;
|
|
vertical-align: middle;
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.post-hidden {
|
|
.topic-avatar,
|
|
.cooked,
|
|
.topic-meta-data,
|
|
.post-actions {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.topic-post.staged {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.quote-controls {
|
|
float: right;
|
|
display: flex;
|
|
align-items: center;
|
|
a {
|
|
margin-left: 0.3em;
|
|
}
|
|
}
|
|
|
|
.quote-button {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: z("dropdown");
|
|
background-color: var(--secondary);
|
|
border: 1px solid var(--primary-low);
|
|
box-shadow: var(--shadow-card);
|
|
flex-direction: column;
|
|
|
|
&.animated {
|
|
transition: top 0.1s linear, left 0.1s linear;
|
|
}
|
|
|
|
&.visible {
|
|
display: flex;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
}
|
|
|
|
.extra {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.fast-edit-container {
|
|
display: flex;
|
|
padding: 0.5em;
|
|
padding-top: 0;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
#fast-edit-input {
|
|
margin: 0;
|
|
width: 300px;
|
|
height: 90px;
|
|
}
|
|
|
|
.save-fast-edit {
|
|
margin-top: 0.5em;
|
|
}
|
|
}
|
|
|
|
.insert-quote + .quote-sharing {
|
|
border-left: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.btn-flat {
|
|
.d-icon {
|
|
color: var(--primary-high);
|
|
}
|
|
.discourse-no-touch & {
|
|
&:hover {
|
|
background-color: var(--tertiary-low);
|
|
}
|
|
}
|
|
}
|
|
|
|
.quote-sharing {
|
|
vertical-align: middle;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.quote-share-label {
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
&:hover {
|
|
.quote-share-label {
|
|
background: transparent;
|
|
opacity: 0;
|
|
max-width: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
.quote-share-label + .quote-share-buttons {
|
|
max-width: 10em;
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
// this pseudo element creates a transition buffer zone
|
|
// without it, the width change on hover can cause transition jitter
|
|
// the width is roughly wide enough to cover long translations of "share"
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
background: transparent;
|
|
height: 100%;
|
|
padding: 0.5em 4em;
|
|
z-index: -1; // below the buttons
|
|
}
|
|
}
|
|
|
|
.quote-share-label + .quote-share-buttons {
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
max-width: 0;
|
|
display: inline-flex;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-avatar,
|
|
.topic-avatar,
|
|
.user-card-avatar {
|
|
position: relative;
|
|
}
|
|
|
|
.topic-map {
|
|
background: var(--primary-very-low);
|
|
border: 1px solid var(--primary-low);
|
|
border-top: none; // would cause double top border
|
|
|
|
.avatars {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
a {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.avatar {
|
|
width: 2.15em;
|
|
height: 2.15em;
|
|
}
|
|
.post-count {
|
|
position: absolute;
|
|
right: 0;
|
|
border-radius: 100px;
|
|
padding: 0.15em 0.4em 0.2em;
|
|
text-align: center;
|
|
font-weight: normal;
|
|
font-size: var(--font-down-2);
|
|
line-height: var(--line-height-small);
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
margin-right: 0.33em;
|
|
}
|
|
|
|
section {
|
|
border-top: 1px solid var(--primary-low);
|
|
}
|
|
|
|
ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
h3 {
|
|
width: 100%;
|
|
margin-bottom: 0.33em;
|
|
color: var(--primary);
|
|
line-height: var(--line-height-large);
|
|
font-weight: normal;
|
|
font-size: var(--font-0);
|
|
}
|
|
|
|
h4 {
|
|
margin: 1px 0 2px 0;
|
|
color: var(--primary-med-or-secondary-med);
|
|
font-weight: normal;
|
|
font-size: var(--font-down-1);
|
|
line-height: var(--line-height-small);
|
|
}
|
|
|
|
span.domain {
|
|
font-size: var(--font-down-2);
|
|
color: var(--primary-med-or-secondary-med);
|
|
}
|
|
|
|
td {
|
|
vertical-align: top;
|
|
padding: 1px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.topic-links {
|
|
tr {
|
|
border: none;
|
|
}
|
|
.badge-notification {
|
|
margin: 1px 5px 2px 0;
|
|
}
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.btn {
|
|
margin-right: 0.5em;
|
|
|
|
&:last-child {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.participants {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
|
|
& + .controls {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
&.hide-names .user {
|
|
.username,
|
|
.group-name {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.user {
|
|
border: 1px solid var(--primary-low);
|
|
border-radius: 0.25em;
|
|
padding: 0;
|
|
margin: 0.125em 0.25em 0.125em 0;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 26px;
|
|
|
|
.user-link,
|
|
.group-link {
|
|
color: var(--primary-high);
|
|
|
|
&:hover {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
.avatar,
|
|
.d-icon-users {
|
|
margin-left: 0.25em;
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.username,
|
|
.group-name {
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.remove-invited {
|
|
display: flex;
|
|
flex: 1 0 0px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
height: calc(100% + 0.25em);
|
|
margin-right: -4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.add-remove-participant-btn {
|
|
.d-icon {
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
|
|
.toggle-summary {
|
|
.summarization-buttons {
|
|
display: flex;
|
|
}
|
|
|
|
.placeholder-summary {
|
|
padding-top: 0.5em;
|
|
}
|
|
|
|
.placeholder-summary-text {
|
|
display: inline-block;
|
|
height: 1em;
|
|
margin-top: 0.6em;
|
|
width: 100%;
|
|
}
|
|
|
|
.summarized-on {
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic-avatar,
|
|
.avatar-flair-preview,
|
|
.user-card-avatar,
|
|
.topic-map .poster,
|
|
.user-profile-avatar,
|
|
.user-image,
|
|
.latest-topic-list-item {
|
|
.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,
|
|
.collapsed-info .user-profile-avatar .avatar-flair,
|
|
.user-image .avatar-flair,
|
|
.latest-topic-list-item .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,
|
|
.user-profile-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: var(--font-up-4);
|
|
}
|
|
}
|
|
.topic-map .poster .avatar-flair {
|
|
right: 0;
|
|
background-size: 12px 12px;
|
|
width: 16px;
|
|
height: 16px;
|
|
bottom: -3px;
|
|
color: var(--primary);
|
|
&.rounded {
|
|
background-size: 12px 12px;
|
|
border-radius: 8px;
|
|
width: 16px;
|
|
height: 16px;
|
|
bottom: -2px;
|
|
right: 0;
|
|
}
|
|
.d-icon {
|
|
font-size: var(--font-down-2);
|
|
}
|
|
}
|
|
|
|
.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.
|
|
.cooked {
|
|
overflow: hidden;
|
|
|
|
.button-wrapper {
|
|
display: none;
|
|
}
|
|
}
|
|
.group-request {
|
|
border-top: 1px solid var(--primary-low);
|
|
padding-top: 0.5em;
|
|
}
|
|
&.highlighted {
|
|
animation: background-fade-highlight 2.5s ease-out;
|
|
}
|
|
.deleted & {
|
|
// Disable so the deleted background is visible immediately
|
|
&.highlighted {
|
|
animation: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-info {
|
|
flex: 0 0 auto;
|
|
margin-right: 0.5em;
|
|
|
|
&.post-date {
|
|
margin-right: 0;
|
|
}
|
|
&.via-email,
|
|
&.whisper,
|
|
&.post-locked {
|
|
.d-icon {
|
|
font-size: var(--font-0);
|
|
}
|
|
}
|
|
|
|
.wiki,
|
|
.last-wiki-edit {
|
|
color: var(--wiki);
|
|
}
|
|
|
|
&.via-email {
|
|
color: var(--primary-low-mid-or-secondary-high);
|
|
}
|
|
&.raw-email {
|
|
cursor: pointer;
|
|
}
|
|
&.edits {
|
|
.widget-button {
|
|
display: flex;
|
|
align-items: center;
|
|
.d-button-label {
|
|
order: 0;
|
|
padding-right: 0.25em;
|
|
color: var(--primary-med-or-secondary-med);
|
|
}
|
|
.d-icon {
|
|
order: 1;
|
|
color: var(--primary-med-or-secondary-med);
|
|
}
|
|
.discourse-no-touch & {
|
|
&:hover {
|
|
.d-button-label {
|
|
color: var(--primary-high);
|
|
}
|
|
.d-icon {
|
|
color: var(--primary-high);
|
|
}
|
|
}
|
|
}
|
|
&:focus {
|
|
@include default-focus;
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
pre {
|
|
code {
|
|
word-wrap: normal;
|
|
display: block;
|
|
padding: 0.5em;
|
|
color: var(--primary);
|
|
background: var(--blend-primary-secondary-5);
|
|
max-height: 500px;
|
|
}
|
|
|
|
.bidi-warning,
|
|
.bidi-warning span {
|
|
font-style: normal;
|
|
background-color: var(--highlight);
|
|
color: var(--danger);
|
|
cursor: help;
|
|
}
|
|
}
|
|
|
|
.codeblock-buttons {
|
|
display: block;
|
|
position: relative;
|
|
overflow: visible;
|
|
|
|
.codeblock-button-wrapper {
|
|
position: absolute;
|
|
display: flex;
|
|
}
|
|
|
|
.copy-cmd,
|
|
.fullscreen-cmd {
|
|
@include unselectable;
|
|
top: 0;
|
|
min-height: 0;
|
|
font-size: var(--font-down-2);
|
|
min-height: 0;
|
|
font-size: var(--font-down-2);
|
|
opacity: 0.7;
|
|
cursor: pointer;
|
|
|
|
&.action-complete {
|
|
cursor: auto;
|
|
.d-icon {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
.d-icon {
|
|
pointer-events: none;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
kbd {
|
|
align-items: center;
|
|
border: 1px solid var(--primary-low-mid);
|
|
background: var(--primary-very-low);
|
|
border-bottom-width: 2px;
|
|
border-radius: 3px;
|
|
box-sizing: border-box;
|
|
display: inline-flex;
|
|
gap: 0 0.5em; // space between text and images/emoji
|
|
font-size: var(--font-down-1);
|
|
justify-content: center;
|
|
line-height: var(--line-height-large);
|
|
margin: 0 0.15em;
|
|
min-width: 24px;
|
|
padding: 0.15em 0.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
|
|
calc(var(--topic-avatar-width) + var(--topic-body-width-padding));
|
|
color: var(--primary-med-or-secondary-high);
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-size: var(--font-down-1);
|
|
}
|
|
|
|
.who-liked,
|
|
.who-read {
|
|
transition: height 0.5s;
|
|
a {
|
|
margin: 0 0.25em 0.5em 0;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.cooked table,
|
|
.d-editor-preview table {
|
|
thead {
|
|
th {
|
|
text-align: left;
|
|
padding-bottom: 2px;
|
|
font-weight: bold;
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
td {
|
|
padding: 3px 3px 3px 0.5em;
|
|
}
|
|
}
|
|
|
|
.small-action {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&.deleted {
|
|
background-color: var(--danger-low-mid);
|
|
}
|
|
|
|
.topic-avatar,
|
|
.small-action-desc {
|
|
border-top: 1px solid var(--primary-low);
|
|
}
|
|
|
|
.topic-avatar {
|
|
display: flex;
|
|
align-self: stretch;
|
|
flex: 0 0 auto;
|
|
margin: 0;
|
|
padding-top: 1em;
|
|
width: var(--topic-avatar-width);
|
|
justify-content: center;
|
|
.d-icon {
|
|
font-size: var(--font-up-3);
|
|
width: var(--topic-avatar-width);
|
|
color: var(--primary-low-mid);
|
|
}
|
|
}
|
|
|
|
.small-action-desc {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
color: var(--primary-700);
|
|
padding: 1em 0 1em var(--topic-body-width-padding);
|
|
width: calc(
|
|
var(--topic-body-width) + (var(--topic-body-width-padding) * 2)
|
|
);
|
|
min-width: 0; // Allows flex container to shrink
|
|
|
|
.avatar {
|
|
margin-right: 0.5em;
|
|
float: left;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
padding: 0.15em 0.5em 0 0;
|
|
}
|
|
}
|
|
|
|
.small-action-contents {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.small-action-buttons {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.small-action-custom-message {
|
|
flex: 1 1 100%;
|
|
font-weight: normal;
|
|
margin-top: 0.5em;
|
|
word-break: break-word;
|
|
min-width: 0; // Allows content like oneboxes to shrink
|
|
color: var(--primary);
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
button {
|
|
background: transparent;
|
|
font-size: var(--font-down-1);
|
|
.d-icon {
|
|
color: var(--primary-500);
|
|
}
|
|
|
|
.discourse-no-touch & {
|
|
&:hover,
|
|
&:focus {
|
|
background: var(--primary-200);
|
|
.d-icon {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.topic-post-visited {
|
|
.topic-post-visited-line {
|
|
text-align: center;
|
|
border-bottom: 1px solid var(--danger-medium);
|
|
z-index: z("base") + 2; // ensures last visit border is on top of post borders
|
|
line-height: 0;
|
|
margin: 0;
|
|
margin-bottom: -1px;
|
|
color: var(--danger-medium);
|
|
font-size: var(--font-down-1);
|
|
width: calc(
|
|
var(--topic-body-width) + var(--topic-avatar-width) +
|
|
(var(--topic-body-width-padding) * 2)
|
|
);
|
|
.topic-post-visited-message {
|
|
background-color: var(--secondary);
|
|
padding: 0 0.5em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.whisper {
|
|
.post-info.whisper {
|
|
margin-left: 0.5em;
|
|
}
|
|
.topic-body {
|
|
.cooked {
|
|
font-style: italic;
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
}
|
|
|
|
a.mention,
|
|
a.mention-group {
|
|
// linked
|
|
@include mention;
|
|
}
|
|
|
|
.mention .emoji {
|
|
margin-left: 0.3em;
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
span.mention {
|
|
// unlinked, invalid mention
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.suggested-topics {
|
|
.topics {
|
|
padding-bottom: 15px;
|
|
}
|
|
.suggested-topics-message {
|
|
.badge-wrapper {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.large-image-placeholder {
|
|
> a {
|
|
&.link {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
> * {
|
|
overflow: hidden;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
> .d-icon {
|
|
color: var(--primary-med-or-secondary-med);
|
|
margin-right: 6px;
|
|
font-size: var(--font-0);
|
|
line-height: var(--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: var(--primary-med-or-secondary-med);
|
|
font-size: var(--font-down-1);
|
|
font-style: italic;
|
|
line-height: var(--line-height-large);
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
> span.badge-notification {
|
|
vertical-align: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.broken-image,
|
|
.blocked-hotlinked-placeholder {
|
|
&:not(a) {
|
|
color: var(--primary-low-mid-or-secondary-high);
|
|
}
|
|
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--primary-low);
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.d-icon {
|
|
margin: 16px;
|
|
font-size: var(--font-up-5);
|
|
}
|
|
|
|
.notice {
|
|
margin: 0 0.5em 0.5em 0.5em;
|
|
}
|
|
}
|
|
|
|
/* below standard tablet portrait ----------- */
|
|
|
|
.reply-to-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 2em;
|
|
max-width: 400px;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
margin: 0 0.25em;
|
|
}
|
|
}
|
|
|
|
// Select posts
|
|
|
|
.topic-post {
|
|
&.selected {
|
|
article.boxed {
|
|
.select-posts {
|
|
button.select-post {
|
|
background-color: var(--tertiary);
|
|
color: var(--secondary);
|
|
border-color: var(--tertiary);
|
|
}
|
|
}
|
|
.topic-body {
|
|
.contents:after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
article.boxed {
|
|
position: relative;
|
|
.select-posts {
|
|
position: absolute;
|
|
right: 5em;
|
|
z-index: z("dropdown");
|
|
top: 0.5em;
|
|
height: 100px;
|
|
button {
|
|
margin-left: 8px;
|
|
background-color: var(--primary-low);
|
|
color: var(--primary);
|
|
box-shadow: var(--shadow-dropdown);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 767px) {
|
|
.reply-to-tab {
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
.user-title {
|
|
float: left;
|
|
clear: left;
|
|
}
|
|
}
|
|
|
|
.signup-cta {
|
|
box-sizing: border-box;
|
|
max-width: calc(var(--topic-body-width) + 4.5em);
|
|
padding: 3em 5em 2em
|
|
calc(var(--topic-avatar-width + var(--topic-body-width-padding)));
|
|
@include breakpoint(mobile-extra-large) {
|
|
padding: 1.5em 1.5em 0.25em;
|
|
}
|
|
h3 {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
.buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin: 1.5em 0 1em;
|
|
> * {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.btn {
|
|
margin-right: 0.5em;
|
|
white-space: nowrap;
|
|
&.btn-remind {
|
|
background: var(--primary-very-low);
|
|
margin-right: auto;
|
|
@include hover {
|
|
background: var(--primary-medium);
|
|
}
|
|
}
|
|
@include breakpoint(mobile-extra-large) {
|
|
&.btn-primary {
|
|
margin-right: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-notice {
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
background-color: var(--tertiary-low);
|
|
border-top: 1px solid var(--primary-low);
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: calc(
|
|
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
|
|
var(--topic-avatar-width)
|
|
);
|
|
padding: var(--topic-body-width-padding);
|
|
padding-left: 0;
|
|
&.old {
|
|
background-color: unset;
|
|
color: var(--primary-medium);
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
.d-icon {
|
|
font-size: 2em;
|
|
width: var(--topic-avatar-width);
|
|
color: var(--primary-high);
|
|
margin-right: var(--topic-body-width-padding);
|
|
}
|
|
}
|
|
|
|
#topic-footer-buttons {
|
|
margin: var(--below-topic-margin) 0;
|
|
padding: 0;
|
|
|
|
.topic-footer-main-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: stretch; // aligns items by making them the same height
|
|
button,
|
|
details {
|
|
margin-right: 0.54em;
|
|
}
|
|
> * {
|
|
margin-bottom: 0.5em; // all immediate children should have a bottom margin in case of wrapping
|
|
}
|
|
.topic-admin-menu-button-container {
|
|
display: inline-flex;
|
|
.topic-admin-menu-button {
|
|
display: flex; // to make this button match siblings behavior, all of its parents need to be flex
|
|
}
|
|
}
|
|
}
|
|
|
|
.pinned-button:not(.is-hidden) + .topic-notifications-button {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.pinned-button,
|
|
.topic-notifications-button {
|
|
margin: 0.5em 0 1em;
|
|
|
|
.reason {
|
|
color: var(--primary-high);
|
|
display: inline-flex;
|
|
margin: 0;
|
|
align-items: center;
|
|
|
|
.dropdown-select-box {
|
|
.select-kit-selected-name {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.name {
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
margin-left: 0.5em;
|
|
line-height: var(--line-height-medium);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
iframe {
|
|
max-width: 100%;
|
|
max-height: #{"min(1000px, 200vh)"};
|
|
}
|
|
|
|
.post-admin-menu {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
width: auto;
|
|
max-width: 320px;
|
|
position: absolute;
|
|
text-align: left;
|
|
bottom: -2px;
|
|
right: 15px;
|
|
}
|
|
|
|
.posts-filtered-notice {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
background-color: var(--tertiary-low);
|
|
bottom: 0;
|
|
padding: 1em;
|
|
margin-top: 0.5em;
|
|
text-align: center;
|
|
z-index: 2;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
max-width: calc(
|
|
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
|
|
var(--topic-avatar-width)
|
|
);
|
|
|
|
.filtered-avatar {
|
|
margin: 0 0.5em;
|
|
+ .names {
|
|
flex: inherit;
|
|
}
|
|
}
|
|
|
|
.filtered-replies-show-all {
|
|
margin-left: 1em;
|
|
}
|
|
|
|
.filtered-user-row {
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
|
|
.pausable-animated-image {
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
> canvas,
|
|
> .animated-image-overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
> canvas {
|
|
background-color: var(--primary-very-low);
|
|
}
|
|
|
|
> .animated-image-overlay {
|
|
pointer-events: none;
|
|
text-align: right;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
> .d-icon {
|
|
cursor: pointer;
|
|
padding: 0.5em;
|
|
margin: 0.5em;
|
|
background-color: rgba(var(--always-black-rgb), 0.25);
|
|
color: var(--secondary-or-primary);
|
|
cursor: pointer;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
img.animated {
|
|
cursor: pointer;
|
|
}
|
|
|
|
html.no-touch
|
|
&:not(.paused-animated-image)
|
|
.animated:hover
|
|
+ .animated-image-overlay
|
|
.d-icon-pause {
|
|
display: initial;
|
|
}
|
|
|
|
&.paused-animated-image
|
|
.animated.manually-paused
|
|
+ .animated-image-overlay
|
|
.d-icon-play {
|
|
display: initial;
|
|
}
|
|
}
|
|
|
|
.paused-animated-image {
|
|
img.animated {
|
|
// need to keep the image hidden but clickable
|
|
// so the user can resume animation
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.open-popup-link {
|
|
position: sticky;
|
|
left: 1rem;
|
|
opacity: 0%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fullscreen-table-wrapper {
|
|
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
display: block;
|
|
position: relative;
|
|
|
|
&--buttons {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.fullscreen-table-modal .modal-inner-container,
|
|
.fullscreen-code-modal .modal-inner-container {
|
|
width: max-content;
|
|
max-width: 90%;
|
|
margin: 0 auto;
|
|
padding: 10px;
|
|
|
|
.modal-body {
|
|
padding-top: 0;
|
|
}
|
|
|
|
thead {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background-color: var(--secondary);
|
|
}
|
|
|
|
tbody {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
td {
|
|
padding: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.fullscreen-code-modal {
|
|
pre code {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
html.discourse-no-touch .fullscreen-table-wrapper:hover {
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 5px 0 rgba(var(--always-black-rgb), 0.1),
|
|
0 2px 10px 0 rgba(var(--always-black-rgb), 0.1);
|
|
.open-popup-link {
|
|
opacity: 100%;
|
|
}
|
|
}
|