mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-22 13:03:05 +08:00
369cc65865
This commit modifies the composer buttons along the bottom, removing the old "Close" button in favour of a distinct "Discard" and a persistent "X" button. For **Discard**: * When there is any user-input content in the composer, clicking this button will bring up the draft confirmation modal. Users can then confirm the discard, decide to save their draft, or return to the editor. * When there is no user-input content in the composer, clicking this button will close the composer. * In this case, we should not prompt users with the draft confirmation modal. For the **"X"** button in the top-right of the composer on desktop and mobile: * When there is any user-input content in the composer, this should save the content as a draft and close the composer. We don’t need to bring up the draft confirmation in this case. * When there is no user-input content in the composer, this should close the composer without saving. Remove the Close button from the composer on desktop.
1182 lines
22 KiB
SCSS
Vendored
1182 lines
22 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
html.composer-open:not(.has-full-page-chat) {
|
|
#main-outlet {
|
|
padding-bottom: var(--composer-height);
|
|
transition: padding-bottom 250ms ease;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--composer-max-width--hide-preview: 740px;
|
|
}
|
|
|
|
.grippie {
|
|
cursor: row-resize;
|
|
padding: 0.25em 0;
|
|
background: var(--tertiary);
|
|
border-top-left-radius: var(--d-border-radius-large);
|
|
border-top-right-radius: var(--d-border-radius-large);
|
|
|
|
@media (pointer: coarse) {
|
|
padding: 0.35em 0;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
width: 1.5em;
|
|
margin: auto;
|
|
border-top: 3px double var(--tertiary-medium);
|
|
}
|
|
}
|
|
|
|
#reply-control {
|
|
position: fixed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
margin-inline: auto;
|
|
max-width: $reply-area-max-width;
|
|
width: 100%;
|
|
height: 0;
|
|
min-height: 0;
|
|
z-index: z("composer", "content");
|
|
transition:
|
|
height 0.2s,
|
|
max-width 0.2s,
|
|
padding-bottom 0.2s,
|
|
top 0.2s,
|
|
transform 0.2s,
|
|
min-height 0.2s;
|
|
background-color: var(--secondary);
|
|
box-shadow: var(--shadow-composer);
|
|
border-top-left-radius: var(--d-border-radius-large);
|
|
border-top-right-radius: var(--d-border-radius-large);
|
|
|
|
@media screen and (width <= 1200px) {
|
|
min-width: 0;
|
|
}
|
|
|
|
&.hide-preview {
|
|
max-width: var(--composer-max-width--hide-preview);
|
|
}
|
|
|
|
.reply-area {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0.5em;
|
|
|
|
@include viewport.until(sm) {
|
|
padding-bottom: max(env(safe-area-inset-bottom), 6px);
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
@include viewport.from(sm) {
|
|
margin: 0 auto;
|
|
height: calc(100% - 11px);
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.with-form-template {
|
|
overflow: auto;
|
|
flex: 1;
|
|
|
|
#mobile-file-upload {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.saving-text,
|
|
.draft-text {
|
|
display: none;
|
|
padding-left: 8px;
|
|
|
|
.spinner {
|
|
margin-left: 8px;
|
|
border-color: var(--secondary);
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
.d-icon {
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
|
|
&.open {
|
|
--min-height: 255px;
|
|
box-sizing: border-box;
|
|
height: var(--composer-height);
|
|
min-height: var(--min-height);
|
|
max-height: calc(100vh - var(--header-offset, 4em));
|
|
padding-bottom: var(--composer-ipad-padding);
|
|
|
|
@include viewport.until(sm) {
|
|
z-index: z("mobile-composer");
|
|
top: 0;
|
|
transform: none;
|
|
height: 100dvh;
|
|
max-height: unset;
|
|
}
|
|
}
|
|
|
|
&.draft,
|
|
&.saving {
|
|
height: 45px !important;
|
|
align-items: center;
|
|
background: var(--tertiary);
|
|
color: var(--secondary);
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
.composer-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding-right: 8px;
|
|
|
|
.toggle-toolbar {
|
|
display: none;
|
|
}
|
|
|
|
.d-icon {
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.draft {
|
|
cursor: pointer;
|
|
display: flex;
|
|
|
|
.draft-text {
|
|
display: block;
|
|
|
|
@include ellipsis;
|
|
}
|
|
|
|
.grippie,
|
|
.saving-text {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.saving .saving-text {
|
|
display: flex;
|
|
}
|
|
|
|
.reply-to {
|
|
color: var(--primary-high);
|
|
margin-bottom: 0.5em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
@include viewport.until(sm) {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.reply-details {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
max-width: calc(100% - 75px);
|
|
}
|
|
}
|
|
|
|
.composer-action-title {
|
|
display: flex;
|
|
align-items: center;
|
|
width: auto;
|
|
max-width: 100%;
|
|
min-width: 0; // allows shrinking when needed
|
|
|
|
.action-title {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: normal;
|
|
min-width: 0;
|
|
|
|
.topic-link,
|
|
.user-link,
|
|
.post-link {
|
|
margin-right: 8px;
|
|
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
|
|
.username {
|
|
margin-right: 5px;
|
|
max-width: 100px;
|
|
|
|
@include ellipsis;
|
|
|
|
@media screen and (width <= 500px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.d-icon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
img.avatar {
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
|
|
.composer-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
// Protection for languages with long strings on very small screens. This
|
|
// has no effect on most users but we need it for some cases. If this is
|
|
// not added, "add edit reason" will overlap with the composer controls
|
|
@include viewport.until(sm) {
|
|
.reply-details {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.display-edit-reason {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.composer-controls {
|
|
align-self: flex-start;
|
|
gap: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.whisper,
|
|
.display-edit-reason {
|
|
font-style: italic;
|
|
}
|
|
|
|
.whisper {
|
|
margin: 0 0.25em;
|
|
}
|
|
|
|
.unlist {
|
|
margin-left: 0.25em;
|
|
}
|
|
|
|
.display-edit-reason {
|
|
display: inline-flex;
|
|
|
|
a {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.d-icon {
|
|
padding: 0.3em 0.5em;
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
#edit-reason {
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.user-selector,
|
|
.title-and-category {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
position: relative;
|
|
gap: 0 0.5em;
|
|
}
|
|
|
|
.user-selector {
|
|
@include viewport.until(sm) {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@include viewport.from(sm) {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
}
|
|
|
|
.title-input {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1 1 50%;
|
|
|
|
input {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
.with-tags {
|
|
.title-input {
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
.mini-tag-chooser,
|
|
.category-chooser {
|
|
z-index: z("base");
|
|
}
|
|
}
|
|
|
|
.archetype-private_message & {
|
|
// PMs don't have categories, so we need a wider tag input
|
|
.mini-tag-chooser {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.category-input {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1 0 40%;
|
|
max-width: 40%;
|
|
margin: 0 0 8px 8px;
|
|
|
|
.category-chooser {
|
|
display: flex;
|
|
flex: 1 0 auto;
|
|
max-width: 100%;
|
|
width: auto;
|
|
|
|
&.has-selection {
|
|
.name {
|
|
font-size: var(--font-up-1);
|
|
}
|
|
}
|
|
|
|
.select-kit-header {
|
|
color: var(--primary-high);
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.select-kit-body {
|
|
max-width: 450px;
|
|
}
|
|
|
|
.selected-name {
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
|
|
.name {
|
|
display: flex;
|
|
max-width: 100%;
|
|
gap: 0 0.5em;
|
|
|
|
.badge-category {
|
|
overflow: hidden;
|
|
}
|
|
|
|
// This prevents the first category from being too-truncated at the expense of a long subcategory
|
|
> span:last-of-type:not(:first-of-type) {
|
|
flex-shrink: 10;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.with-tags.with-category {
|
|
.title-and-category {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.category-input {
|
|
margin-left: 0;
|
|
margin-bottom: 8px;
|
|
min-width: 0; // allows flex to shrink
|
|
flex-wrap: wrap;
|
|
max-width: calc(50% - 4px);
|
|
}
|
|
}
|
|
|
|
.add-warning {
|
|
color: var(--primary-high);
|
|
padding: 0.5em;
|
|
display: flex;
|
|
line-height: var(--line-height-medium);
|
|
margin: 0;
|
|
|
|
@include viewport.until(sm) {
|
|
margin-bottom: 0.15em;
|
|
}
|
|
|
|
input {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
.users-input,
|
|
.add-warning {
|
|
width: 100%;
|
|
}
|
|
|
|
.users-input .select-kit.multi-select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
#reply-title {
|
|
margin-bottom: 0.5em;
|
|
flex-basis: 50%;
|
|
width: unset;
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.category-input + .tags-input {
|
|
width: auto;
|
|
max-width: calc(50% - 0.25em);
|
|
}
|
|
|
|
.tags-input {
|
|
position: relative;
|
|
margin: 0 0 0.5em 0;
|
|
flex-grow: 1;
|
|
|
|
@include viewport.until(sm) {
|
|
width: 100%;
|
|
max-width: 50%;
|
|
}
|
|
|
|
.mini-tag-chooser {
|
|
z-index: z("composer", "dropdown");
|
|
width: 100%;
|
|
|
|
.select-kit-header {
|
|
color: var(--primary-high);
|
|
}
|
|
}
|
|
}
|
|
|
|
.wmd-controls {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
|
|
.mobile-view & {
|
|
&:not(.toolbar-visible) {
|
|
.d-editor-button-bar {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.submit-panel {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
margin-top: 0.5em;
|
|
|
|
@include viewport.until(sm) {
|
|
flex-wrap: wrap;
|
|
gap: 0.25em 0;
|
|
|
|
.create {
|
|
max-width: 50vw;
|
|
|
|
span {
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobile-file-upload {
|
|
&.hidden + .mobile-preview {
|
|
// Hide preview button while file is uploading to make room for upload progress
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.mobile-preview {
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
|
|
.save-or-cancel {
|
|
align-items: center;
|
|
display: flex;
|
|
flex: 0 1 auto;
|
|
margin-right: 1em;
|
|
|
|
@include viewport.until(sm) {
|
|
margin-right: 0.5em;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.btn-primary {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.cancel {
|
|
align-items: center;
|
|
display: flex;
|
|
margin-left: 1em;
|
|
line-height: normal;
|
|
color: var(--accent-color);
|
|
transition: color 250ms;
|
|
padding: 0;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
outline: none;
|
|
color: var(--danger);
|
|
}
|
|
|
|
&:active {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
.d-icon {
|
|
font-size: var(--font-up-2);
|
|
color: var(--primary-medium);
|
|
padding: 0.35em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.preview-template {
|
|
margin-left: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.discard {
|
|
@include viewport.from(sm) {
|
|
margin-left: auto;
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.discard-button {
|
|
color: var(--danger);
|
|
|
|
@include viewport.until(sm) {
|
|
.d-icon {
|
|
font-size: var(--font-up-2);
|
|
color: var(--primary-medium);
|
|
padding: 0.35em;
|
|
}
|
|
}
|
|
}
|
|
|
|
#draft-status,
|
|
#file-uploading {
|
|
color: var(--primary-high);
|
|
margin-right: 0.5em;
|
|
|
|
@include viewport.until(sm) {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
@include viewport.from(sm) {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
#file-uploading {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: auto;
|
|
|
|
a {
|
|
margin-left: 0.33em;
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.spinner {
|
|
margin-right: 0.33em;
|
|
}
|
|
}
|
|
|
|
#draft-status {
|
|
margin-left: auto;
|
|
|
|
.d-icon-user-pen {
|
|
color: var(--danger);
|
|
font-size: 20px;
|
|
vertical-align: -5.5px;
|
|
}
|
|
|
|
+ .btn-mini-toggle {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.composer-select-form-template {
|
|
margin-bottom: 8px;
|
|
width: 100%;
|
|
|
|
.name,
|
|
.formatted-selection,
|
|
.d-icon {
|
|
color: var(--primary-high);
|
|
}
|
|
}
|
|
|
|
.select-kit.is-expanded {
|
|
z-index: z("composer", "dropdown") + 1;
|
|
|
|
&.user-chooser {
|
|
// keeps user chooser a layer above AI autocomplete
|
|
z-index: z("composer", "dropdown") + 2;
|
|
}
|
|
}
|
|
|
|
@include viewport.from(sm) {
|
|
&.private-message {
|
|
.with-tags {
|
|
.title-and-category {
|
|
flex-wrap: nowrap;
|
|
gap: 0.5em;
|
|
|
|
.tags-input {
|
|
max-width: 50%;
|
|
flex: 1 1 auto;
|
|
}
|
|
}
|
|
|
|
.title-input {
|
|
max-width: 50%;
|
|
min-width: 0;
|
|
|
|
input {
|
|
min-width: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#private-message-users,
|
|
.users-input {
|
|
width: 100%;
|
|
flex: 0 0 auto;
|
|
|
|
&.can-warn {
|
|
// space for warning, inverse of mini-tag-chooser width
|
|
width: 60%;
|
|
}
|
|
}
|
|
|
|
.add-warning {
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
|
|
span {
|
|
// protects the space of the user input in case there's a very long translation
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.closed {
|
|
.grippie {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.md-table {
|
|
overflow-y: auto;
|
|
margin: 1em 0;
|
|
|
|
.mobile-view & {
|
|
table {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toggle-preview {
|
|
margin-left: auto;
|
|
transition: all 0.33s ease-out;
|
|
|
|
&.active {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
.draft-error {
|
|
color: var(--danger);
|
|
}
|
|
|
|
@keyframes blink_input_opacity_to_prevent_scrolling_when_focus {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Limiting to hover: none ensures we don't target touch-enabled desktops here
|
|
@media (hover: none) {
|
|
// This targets mobile/iPad/tablets and it goes together with
|
|
// the interactive-widget=resizes-content in the viewport meta tag
|
|
// for maximum browser compatibility (including Firefox on Android)
|
|
// see https://developer.chrome.com/blog/viewport-resize-behavior for context
|
|
.discourse-touch,
|
|
.mobile-device {
|
|
#reply-control {
|
|
// this might be overkill
|
|
// but on iPad with a physical keyboard the composer is shifted up on scroll
|
|
// this adds a solid box shadow below, looks cleaner
|
|
box-shadow: 0 150px 0 0 var(--secondary);
|
|
|
|
&.open {
|
|
z-index: z("mobile-composer");
|
|
}
|
|
|
|
&.draft,
|
|
&.saving {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.toggle-fullscreen {
|
|
display: none;
|
|
}
|
|
|
|
.submit-panel,
|
|
.composer-fields {
|
|
// this prevents touch events (i.e. accidental scrolls) from bubbling up
|
|
touch-action: none;
|
|
}
|
|
}
|
|
|
|
&.keyboard-visible #reply-control.open {
|
|
height: calc(var(--composer-vh, 1vh) * 100);
|
|
|
|
.grippie {
|
|
display: none;
|
|
}
|
|
|
|
.reply-area {
|
|
padding-bottom: 0.375em;
|
|
}
|
|
}
|
|
|
|
&.composer-open .with-topic-progress {
|
|
bottom: calc(var(--composer-height));
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobile-device {
|
|
#reply-control {
|
|
.grippie {
|
|
display: none;
|
|
}
|
|
|
|
&.show-preview {
|
|
.submit-panel {
|
|
padding-top: 0.5em;
|
|
z-index: z("fullscreen") + 1;
|
|
background-color: var(--secondary);
|
|
|
|
.cancel,
|
|
.mobile-file-upload,
|
|
.mobile-preview {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.d-editor-preview-wrapper {
|
|
position: absolute;
|
|
z-index: z("fullscreen");
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: var(--secondary);
|
|
border-bottom: 40px solid var(--secondary);
|
|
max-width: 100%;
|
|
margin: 0;
|
|
padding: 0.5em;
|
|
overflow: auto;
|
|
|
|
.d-editor-preview {
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
|
|
.composer-controls {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Safari in iOS/iPad does not handle well a bottom:0 fixed-positioned element,
|
|
// especially while the software keyboard is visible, so we top-anchor it here
|
|
// and shift it using transform
|
|
.ios-device {
|
|
#reply-control {
|
|
// the two properties below are equivalent to bottom: 0
|
|
top: calc(var(--composer-vh, 1vh) * 100);
|
|
transform: translateY(-100%);
|
|
bottom: unset;
|
|
}
|
|
|
|
&.footer-nav-visible {
|
|
#reply-control.draft,
|
|
#reply-control.saving {
|
|
margin-top: calc(
|
|
(var(--footer-nav-height) + env(safe-area-inset-bottom)) * -1
|
|
);
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// When an element (input, textearea) gets focus, iOS Safari tries to put it in the center
|
|
// by scrolling and zooming. We handle zooming with a meta tag. We used to handle scrolling
|
|
// using a complicated JS hack.
|
|
//
|
|
// However, iOS Safari doesn't scroll when the input has opacity of 0 or is clipped.
|
|
// We use this quirk and temporarily hide the element on focus
|
|
//
|
|
// Source https://gist.github.com/kiding/72721a0553fa93198ae2bb6eefaa3299
|
|
input:focus,
|
|
textarea:focus,
|
|
[contenteditable="true"]:focus-within {
|
|
animation: blink_input_opacity_to_prevent_scrolling_when_focus 0.01s;
|
|
}
|
|
}
|
|
|
|
.composer-popup {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
width: calc(60%);
|
|
max-height: 50%;
|
|
bottom: 4.2rem;
|
|
right: 1rem;
|
|
overflow-y: auto;
|
|
z-index: z("composer", "dropdown") + 1;
|
|
padding: 1.5em 1.5rem 0.75em 1.5rem;
|
|
box-shadow: var(--shadow-dropdown);
|
|
border-radius: var(--d-border-radius-large);
|
|
background: var(--secondary);
|
|
|
|
.show-preview & {
|
|
right: 1.5rem;
|
|
bottom: 4.2rem;
|
|
width: calc(50% - 2rem);
|
|
}
|
|
|
|
.blurb {
|
|
display: none;
|
|
}
|
|
|
|
> p,
|
|
h3 {
|
|
&:first-of-type {
|
|
margin-top: 0;
|
|
margin-right: 3em;
|
|
}
|
|
}
|
|
|
|
&.urgent {
|
|
background: var(--danger-low);
|
|
}
|
|
|
|
&.education-message {
|
|
background-color: var(--tertiary-low);
|
|
}
|
|
|
|
&.dominating-topic-message,
|
|
&.get-a-room {
|
|
bottom: unset;
|
|
padding: 2.25em 6em 2.5em 2.25em;
|
|
|
|
p {
|
|
font-size: var(--font-up-1);
|
|
}
|
|
|
|
button:not(.close) {
|
|
margin-top: 0.5em;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.btn.close {
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
top: 0;
|
|
color: var(--primary-medium);
|
|
font-size: var(--font-0);
|
|
|
|
.d-icon {
|
|
color: currentcolor;
|
|
font-size: var(--font-up-1);
|
|
margin: 0 0 0 0.25em;
|
|
}
|
|
|
|
.discourse-no-touch & {
|
|
&:active,
|
|
&:focus {
|
|
background: transparent;
|
|
|
|
.d-icon {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0 0 0 1.5em;
|
|
|
|
&.list,
|
|
&.topics {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
font-weight: normal;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
width: calc(50% - 65px);
|
|
}
|
|
|
|
.discourse-tags {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
|
|
.custom-body {
|
|
background-color: var(--tertiary-low);
|
|
|
|
p {
|
|
max-width: 98%;
|
|
}
|
|
}
|
|
|
|
.similar-topics {
|
|
.similar-topic {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
span.badge-wrapper {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.topic-title {
|
|
margin-bottom: 0.5em;
|
|
flex: 0 1 auto;
|
|
margin-right: 0.5em;
|
|
|
|
.d-icon {
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
span.topic {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.first-line {
|
|
flex: 1;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.second-line {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 0.5em;
|
|
|
|
.discourse-tags {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.fullscreen-composer {
|
|
overflow: hidden;
|
|
|
|
.profiler-results {
|
|
display: none;
|
|
}
|
|
|
|
#reply-control {
|
|
&.fullscreen {
|
|
// important needed because of inline styles when height is changed manually with grippie
|
|
height: 100vh !important;
|
|
max-height: 100%; // prevents devices from miscalculating using vh
|
|
z-index: z("header") + 1;
|
|
|
|
@supports (--custom: property) {
|
|
height: calc(var(--composer-vh, 1vh) * 100) !important;
|
|
}
|
|
|
|
.grippie {
|
|
display: none;
|
|
}
|
|
|
|
.d-editor-preview-wrapper {
|
|
margin-top: 1%;
|
|
}
|
|
|
|
.reply-to {
|
|
border-bottom: 1px solid var(--content-border-color);
|
|
margin-bottom: 0;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.d-editor-textarea-wrapper {
|
|
border: none;
|
|
}
|
|
|
|
&.show-preview .d-editor-textarea-wrapper {
|
|
border-right: 1px solid var(--content-border-color);
|
|
}
|
|
|
|
#draft-status,
|
|
#file-uploading {
|
|
margin-left: 0;
|
|
text-align: initial;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
background: var(--secondary);
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
z-index: -1;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.composer-fullscreen-prompt {
|
|
animation: fadeIn 1s ease-in-out;
|
|
animation-delay: 1.5s;
|
|
animation-direction: reverse;
|
|
animation-fill-mode: forwards;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 10%;
|
|
transform: translate(-50%, 0);
|
|
z-index: z("header") + 1;
|
|
background: var(--primary-very-high);
|
|
color: var(--secondary);
|
|
padding: 0.5em 0.75em;
|
|
pointer-events: none;
|
|
border-radius: 2px;
|
|
|
|
@media (prefers-reduced-motion) {
|
|
animation-duration: 0s;
|
|
}
|
|
|
|
.rtl & {
|
|
// R2 is not smart enough to support this swap
|
|
transform: translate(50%, 0);
|
|
}
|
|
|
|
kbd {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
// align the previewless composer with the topic content
|
|
#reply-control:not(.fullscreen).hide-preview {
|
|
--composer-internal-padding: 1em;
|
|
--layout-gap: 2em;
|
|
--topic-width: calc(
|
|
var(--topic-body-width) + (var(--topic-body-width-padding) * 2)
|
|
);
|
|
width: 100%;
|
|
max-width: calc(var(--topic-width) + var(--topic-avatar-width));
|
|
}
|
|
|
|
body:not(.has-sidebar-page) {
|
|
#reply-control:not(.fullscreen).hide-preview {
|
|
margin-left: 0.67em;
|
|
|
|
// 1100px is equivalent to --d-max-width
|
|
@media screen and (width >= 1110px) {
|
|
margin-left: calc(((100% - var(--d-max-width)) / 2) + 0.67em);
|
|
}
|
|
|
|
// 790px is equivalent to --topic-width
|
|
@media screen and (width < 790px) {
|
|
max-width: calc(100% - calc(0.67em * 2));
|
|
margin-left: 0.67em;
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
max-width: unset;
|
|
margin-inline: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
body.has-sidebar-page {
|
|
#reply-control:not(.fullscreen).hide-preview {
|
|
margin-left: calc(var(--d-sidebar-width) + var(--layout-gap));
|
|
|
|
// 1390px is equivalent to --d-max-width + --d-sidebar-width
|
|
@media screen and (width >= 1390px) {
|
|
left: calc(
|
|
(100% - var(--d-max-width) + var(--d-sidebar-width)) / 2
|
|
); // 50% of the whitespace
|
|
margin-left: var(--layout-gap);
|
|
}
|
|
|
|
// This is when the topic width starts to shrink
|
|
@media screen and (width <= 1180px) {
|
|
width: calc(100% - var(--d-sidebar-width) - var(--layout-gap) - 0.67em);
|
|
}
|
|
|
|
// sidebar shrinks
|
|
@media screen and (width <= 1000px) {
|
|
--layout-gap: 1em;
|
|
margin-left: calc(var(--d-sidebar-width) + var(--layout-gap));
|
|
}
|
|
}
|
|
}
|
