mirror of
https://github.com/discourse/discourse.git
synced 2024-12-24 06:06:51 +08:00
c98335e4e5
Animating the background-color property like this is not compositable for the browser, which means the animation is not smooth, and can contribute to the Cumulative Layout Shift web vital. For now, we're removing this, and may consider re-introducing an alternative version in future based on user feedback.
1652 lines
30 KiB
SCSS
1652 lines
30 KiB
SCSS
#main-outlet > .regular {
|
|
background: var(--d-content-background);
|
|
}
|
|
|
|
.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 {
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
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: 0.33em;
|
|
display: inline-block;
|
|
@include ellipsis;
|
|
vertical-align: middle;
|
|
|
|
a {
|
|
color: var(--primary-high-or-secondary-low);
|
|
outline-offset: -1px;
|
|
}
|
|
}
|
|
|
|
.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: 1.5;
|
|
|
|
> *:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 2rem 0 0.67rem;
|
|
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);
|
|
}
|
|
}
|
|
|
|
svg {
|
|
max-height: 2000px;
|
|
}
|
|
}
|
|
|
|
// 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-flex;
|
|
}
|
|
|
|
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,
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
outline: none;
|
|
background: var(--primary-low);
|
|
color: var(--primary);
|
|
}
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
|
|
&.admin {
|
|
position: relative;
|
|
}
|
|
|
|
// TODO (glimmer-post-menu): Go over the the d-hover style and remove the unnecessary ones when glimmer-post-menu replaces the widget version
|
|
&.delete.d-hover,
|
|
&.delete: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);
|
|
}
|
|
}
|
|
|
|
// .d-icon.heart-animation is the widget animation while .toggle-like.heart-animation is the glimmer-post-menu's
|
|
.has-like .d-icon.heart-animation,
|
|
.toggle-like.heart-animation .d-icon {
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
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;
|
|
|
|
.title {
|
|
@include post-aside;
|
|
|
|
color: var(--primary-high-or-secondary-low);
|
|
padding: 0.8em 0.8em 0 0.8em;
|
|
// blockquote is underneath this and has top margin
|
|
.avatar {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
img {
|
|
margin-top: -0.26em;
|
|
}
|
|
|
|
@include unselectable;
|
|
}
|
|
|
|
// blockquote is docked within aside for content
|
|
blockquote {
|
|
margin-top: 0;
|
|
|
|
.expanded-quote {
|
|
overflow: hidden;
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
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: 0.15em;
|
|
margin: -0.15em;
|
|
}
|
|
|
|
.post-ignored {
|
|
font-style: italic;
|
|
}
|
|
|
|
.post-action {
|
|
color: var(--primary-medium);
|
|
|
|
.undo-action,
|
|
.act-action {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.small-user-list {
|
|
.small-user-list-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.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 {
|
|
flex-direction: column;
|
|
|
|
&.visible {
|
|
display: flex;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
@media screen and (max-width: 420px) {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
.btn,
|
|
.ai-post-helper {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
&:hover {
|
|
.d-icon {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
.d-button-label {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.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-avatar,
|
|
.avatar-flair-preview,
|
|
.user-card-avatar,
|
|
.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-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;
|
|
}
|
|
}
|
|
|
|
.small-action-desc,
|
|
.topic-body {
|
|
&:focus-visible {
|
|
outline: 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 {
|
|
max-height: 2000px;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.reviewable .post-body,
|
|
.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;
|
|
|
|
&:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
&.deleted {
|
|
.topic-avatar,
|
|
.small-action-desc {
|
|
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;
|
|
height: auto;
|
|
|
|
.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;
|
|
|
|
.user-status-message {
|
|
user-select: none;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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: 7em;
|
|
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;
|
|
|
|
.d-icon {
|
|
color: inherit;
|
|
}
|
|
|
|
&.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);
|
|
}
|
|
}
|
|
|
|
html.anon #topic-footer-buttons {
|
|
display: flex;
|
|
justify-content: end;
|
|
}
|
|
|
|
#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 {
|
|
display: inline;
|
|
margin-inline: 0.25em;
|
|
position: sticky;
|
|
left: 1rem;
|
|
opacity: 0%;
|
|
white-space: nowrap;
|
|
transition: 0.25s ease-in-out opacity;
|
|
}
|
|
|
|
.fullscreen-table-wrapper {
|
|
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.fullscreen-code-modal {
|
|
pre code {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
.fullscreen-table-modal {
|
|
.d-modal__container {
|
|
width: auto;
|
|
}
|
|
|
|
.d-modal__body {
|
|
padding-top: 0;
|
|
|
|
thead {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background-color: var(--secondary);
|
|
}
|
|
|
|
td {
|
|
padding: 5px 6px 5px 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
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%;
|
|
}
|
|
}
|
|
|
|
.read-state {
|
|
position: absolute;
|
|
// We use absolute positioning here because we want it to display in the padding
|
|
align-self: center;
|
|
color: var(--tertiary-medium);
|
|
right: 0;
|
|
font-size: 0.571em;
|
|
|
|
&.read {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: visibility 1s, opacity ease-out 1s;
|
|
}
|
|
}
|