mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-25 03:18:54 +08:00
c8364b4e17
* Move Discard button closer to Reply * Make button not red * Fix trash can size on mobile --------- Co-authored-by: Martin Brennan <martin@discourse.org>
1174 lines
22 KiB
SCSS
Vendored
1174 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;
|
|
gap: var(--space-2);
|
|
|
|
@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-button {
|
|
&:hover {
|
|
color: var(--danger);
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
}
|
|
|
|
#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));
|
|
}
|
|
}
|
|
}
|
