mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-22 17:41:55 +08:00
c651983877
This commit takes the dragging behaviour of the grippie
element (the blue bar) at the top of the composer and makes
it into an ember Modifier for use in more places.
The first usage is to add a grippie resizer to the bottom of AceEditor
to followup f819b1ec4d, since
the `@resizable` option allows the user to vertically resize
the code editor.
Custom composer-related behaviour is now done via callbacks from
the modifier. The .grippie CSS class has been hoisted so the style
applies everywhere, then AceEditor modifies the appearance to blend
a bit better.
---------
Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
1329 lines
24 KiB
SCSS
Vendored
1329 lines
24 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);
|
|
|
|
@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);
|
|
|
|
@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");
|
|
}
|
|
}
|
|
|
|
&.draft,
|
|
&.saving {
|
|
height: 40px !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(--primary-high);
|
|
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;
|
|
}
|
|
}
|
|
|
|
#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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.autocomplete {
|
|
z-index: z("composer", "dropdown") + 1;
|
|
position: absolute;
|
|
max-width: 370px;
|
|
min-width: 300px;
|
|
background-color: var(--secondary);
|
|
border: 1px solid var(--primary-low);
|
|
box-shadow: var(--shadow-dropdown);
|
|
border-radius: 8px;
|
|
|
|
@include viewport.from(sm) {
|
|
max-width: 600px;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
li {
|
|
&:first-of-type a {
|
|
border-top-left-radius: 8px;
|
|
border-top-right-radius: 8px;
|
|
}
|
|
|
|
&:last-of-type a {
|
|
border-bottom-left-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
}
|
|
|
|
a {
|
|
@include ellipsis;
|
|
align-items: center;
|
|
color: var(--primary);
|
|
display: flex;
|
|
gap: 0.25em;
|
|
padding: 0.3em 1em;
|
|
|
|
@include hover {
|
|
background-color: var(--d-hover);
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.selected {
|
|
background-color: var(--d-selected);
|
|
|
|
.username,
|
|
.name,
|
|
.emoji-shortname {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.name {
|
|
display: contents;
|
|
font-size: var(--font-down-1);
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.user-status-message {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
|
|
.user-status-message-description {
|
|
@include ellipsis;
|
|
font-size: var(--font-down-2);
|
|
color: var(--primary-high);
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.relative-date {
|
|
font-size: var(--font-down-3);
|
|
}
|
|
}
|
|
|
|
.d-icon-users {
|
|
color: var(--primary-medium);
|
|
padding: 0 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ac-user {
|
|
li a {
|
|
padding: 0.5em 1em;
|
|
}
|
|
|
|
.emoji {
|
|
height: 0.75em;
|
|
width: 0.75em;
|
|
}
|
|
}
|
|
|
|
&.ac-emoji {
|
|
li:last-of-type a {
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.emoji {
|
|
margin-right: 0.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.ac-wrap.disabled {
|
|
input {
|
|
display: none;
|
|
}
|
|
|
|
.item a {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
div.ac-wrap div.item a.remove,
|
|
.remove-link {
|
|
margin-left: 4px;
|
|
font-size: var(--font-down-1);
|
|
line-height: var(--line-height-small);
|
|
padding: 1px 3.5px;
|
|
border-radius: 12px;
|
|
box-sizing: border-box;
|
|
border: 1px solid var(--primary-low);
|
|
|
|
&:hover {
|
|
background-color: var(--danger-low);
|
|
border: 1px solid var(--danger-medium);
|
|
text-decoration: none;
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
|
|
div.ac-wrap {
|
|
max-height: 150px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
min-height: 30px;
|
|
box-sizing: border-box;
|
|
|
|
div.item {
|
|
float: left;
|
|
padding: 4px 10px;
|
|
line-height: var(--line-height-large);
|
|
|
|
span {
|
|
display: inline-block;
|
|
line-height: var(--line-height-medium);
|
|
}
|
|
}
|
|
|
|
.ac-collapsed-button {
|
|
float: left;
|
|
border-radius: 20px;
|
|
position: relative;
|
|
top: -2px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
input[type="text"] {
|
|
float: left;
|
|
|
|
&.fullwidth-input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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,
|
|
.d-editor-button-bar {
|
|
// 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;
|
|
}
|
|
|
|
&.open.show-preview {
|
|
height: 70vh;
|
|
}
|
|
|
|
&.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.5rem;
|
|
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);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.d-editor-preview-wrapper {
|
|
margin-top: 1%;
|
|
}
|
|
|
|
.reply-to {
|
|
border-bottom: 1px solid var(--primary-low);
|
|
margin-bottom: 0;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.d-editor-textarea-wrapper {
|
|
border: none;
|
|
}
|
|
|
|
&.show-preview .d-editor-textarea-wrapper {
|
|
border-right: 1px solid var(--primary-low);
|
|
}
|
|
|
|
#draft-status,
|
|
#file-uploading {
|
|
margin-left: 0;
|
|
text-align: initial;
|
|
}
|
|
|
|
.composer-popup {
|
|
top: 30px;
|
|
}
|
|
|
|
&::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));
|
|
}
|
|
}
|
|
}
|
