mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 00:25:53 +08:00
417 lines
6.9 KiB
SCSS
417 lines
6.9 KiB
SCSS
#reply-control {
|
|
position: fixed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
bottom: 0;
|
|
height: 0;
|
|
right: 0;
|
|
left: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 1475px;
|
|
width: 100%;
|
|
&.hide-preview {
|
|
max-width:740px;
|
|
}
|
|
@media screen and (max-width: 1200px) {
|
|
min-width: 0;
|
|
}
|
|
z-index: z("composer","content");
|
|
transition: height 250ms ease, background 250ms ease, transform 250ms ease, max-width 250ms ease;
|
|
background-color: $secondary;
|
|
box-shadow: 0 -1px 40px rgba(0,0,0, .12);
|
|
|
|
.reply-area {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.saving-text,
|
|
.draft-text {
|
|
display: none;
|
|
padding-left: 10px;
|
|
.spinner {
|
|
margin-left: 5px;
|
|
border-color: $secondary;
|
|
border-right-color: transparent;
|
|
}
|
|
i {
|
|
color: $secondary;
|
|
}
|
|
}
|
|
|
|
&.open {
|
|
height: 300px;
|
|
&.edit-title {
|
|
height: 400px; // more room when editing the title
|
|
}
|
|
}
|
|
|
|
&.closed {
|
|
height: 0 !important;
|
|
}
|
|
|
|
&.draft,
|
|
&.saving {
|
|
height: 40px !important;
|
|
align-items: center;
|
|
background: $tertiary;
|
|
color: $secondary;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
.composer-controls {
|
|
margin-left: auto;
|
|
display: flex;
|
|
padding-right: 5px;
|
|
.toggle-toolbar {
|
|
display: none;
|
|
}
|
|
.d-icon {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.draft {
|
|
cursor: pointer;
|
|
display: flex;
|
|
.draft-text {
|
|
display: block;
|
|
}
|
|
.grippie, .saving-text {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.saving .saving-text {
|
|
display: flex;
|
|
}
|
|
|
|
.reply-to {
|
|
color: $primary-high;
|
|
margin: 5px 0 10px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
i {
|
|
color: $primary-high;
|
|
}
|
|
.reply-details {
|
|
max-width: calc(100% - 175px);
|
|
flex: 1 1 auto;
|
|
white-space: nowrap;
|
|
}
|
|
.composer-action-title {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: auto;
|
|
max-width: 100%;
|
|
|
|
.avatar {
|
|
width: 20px;
|
|
}
|
|
|
|
.topic-link, .user-link, .post-link {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.username {
|
|
margin-right: 5px;
|
|
max-width: 100px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
@media screen and (max-width: 500px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.d-icon {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
img.avatar {
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
.composer-controls {
|
|
margin-left: auto;
|
|
margin-right: -5px;
|
|
button {
|
|
padding: 0 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.whisper,
|
|
.display-edit-reason {
|
|
font-style: italic;
|
|
}
|
|
|
|
#edit-reason {
|
|
margin: 4px;
|
|
}
|
|
|
|
.user-selector,
|
|
.title-and-category {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
align-items: center;
|
|
margin-bottom: 5px;
|
|
position: relative;
|
|
&.with-preview {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.title-input {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1 1 50%;
|
|
|
|
input {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
.with-tags {
|
|
.title-input {
|
|
flex: 1 1 100%;
|
|
}
|
|
}
|
|
|
|
.category-input {
|
|
display: flex;
|
|
flex: 1 0 35%;
|
|
margin: 0 0 5px 10px;
|
|
@media screen and (max-width: 955px) {
|
|
flex: 1 0 100%;
|
|
margin-left: 0;
|
|
}
|
|
.category-chooser {
|
|
display: flex;
|
|
flex: 1;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.with-tags {
|
|
.category-input {
|
|
flex-basis: 25%;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.add-warning {
|
|
margin-left: 1em;
|
|
display: flex;
|
|
input {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
#reply-title {
|
|
margin: 0 0 5px 0;
|
|
flex-basis: 50%;
|
|
}
|
|
|
|
.tag-chooser {
|
|
flex: 1 1 25%;
|
|
margin: 0 0 5px 10px;
|
|
background: $secondary;
|
|
@media all and (max-width: 900px) {
|
|
margin: 0;
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
&.select2-dropdown-open, &.select2-container-active {
|
|
border-color: $tertiary;
|
|
}
|
|
}
|
|
|
|
.wmd-controls {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.d-editor-button-bar .btn {
|
|
padding: 3px 8px;
|
|
@media all and (max-width: 800px) {
|
|
padding: 5px;
|
|
}
|
|
}
|
|
|
|
.submit-panel {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.save-or-cancel {
|
|
flex-basis: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
button {
|
|
flex: 0 0 auto;
|
|
}
|
|
.cancel {
|
|
margin-left: 10px;
|
|
}
|
|
#draft-status,
|
|
#file-uploading {
|
|
margin-left: 25px;
|
|
}
|
|
#file-uploading {
|
|
display: flex;
|
|
a {
|
|
margin-left: 5px;
|
|
color: $primary-high;
|
|
}
|
|
.spinner {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.composer-bottom-right {
|
|
flex-basis: 50%;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
.toggle-preview {
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
.create {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
#draft-status, #file-uploading {
|
|
color: $primary-high;
|
|
}
|
|
}
|
|
|
|
.cooked > *:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.autocomplete {
|
|
z-index: z("dropdown");
|
|
position: absolute;
|
|
width: 240px;
|
|
background-color: $secondary;
|
|
border: 1px solid $primary-low;
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
li {
|
|
.d-icon-users {
|
|
color: lighten($primary, 40%);
|
|
padding: 0 2px;
|
|
}
|
|
|
|
border-bottom: 1px solid $primary-low;
|
|
|
|
a {
|
|
padding: 5px;
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
span.username {
|
|
color: $primary;
|
|
}
|
|
span.name {
|
|
font-size: $font-down-1;
|
|
vertical-align: middle;
|
|
}
|
|
&.selected {
|
|
background-color: $tertiary-low;
|
|
}
|
|
@include hover {
|
|
background-color: $highlight-low;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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: $font-down-1;
|
|
line-height: $line-height-small;
|
|
padding: 1px 3.5px;
|
|
border-radius: 12px;
|
|
box-sizing: border-box;
|
|
border: 1px solid $primary-low;
|
|
&:hover {
|
|
background-color: $danger-low;
|
|
border: 1px solid $danger-medium;
|
|
text-decoration: none;
|
|
color: $danger;
|
|
}
|
|
}
|
|
|
|
div.ac-wrap {
|
|
overflow: auto;
|
|
max-height: 150px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
background-color: $secondary;
|
|
border: 1px solid $primary-medium;
|
|
div.item {
|
|
float: left;
|
|
padding: 4px 10px;
|
|
line-height: $line-height-large;
|
|
span {
|
|
display: inline-block;
|
|
line-height: $line-height-medium;
|
|
}
|
|
}
|
|
|
|
.ac-collapsed-button {
|
|
float: left;
|
|
border-radius: 20px;
|
|
position: relative;
|
|
top: -2px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
input[type="text"] {
|
|
float: left;
|
|
display: block;
|
|
box-shadow: none;
|
|
border: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.future-date-input {
|
|
.examples {
|
|
color: $primary-medium;
|
|
}
|
|
}
|
|
|
|
.md-table {
|
|
overflow-y: auto;
|
|
}
|