Tidy up _MessageComposer.pcss (#10767)

* Nesting: mx_MessageComposer

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Nesting: mx_MessageComposer_editor

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Nesting: mx_MessageComposer_input

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Nesting: mx_MessageComposer_formatbar

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Nesting: textarea

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Run prettier

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* stylelint

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2023-05-03 22:05:18 +00:00 committed by GitHub
parent 7df07d80ac
commit bbdca11a02
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -65,13 +65,15 @@ limitations under the License.
gap: 6px; gap: 6px;
} }
.mx_MessageComposer .mx_MessageComposer_avatar { .mx_MessageComposer {
position: absolute; .mx_MessageComposer_avatar {
left: 26px; position: absolute;
} left: 26px;
.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar { .mx_BaseAvatar {
display: block; display: block;
}
}
} }
.mx_MessageComposer_composecontrols { .mx_MessageComposer_composecontrols {
@ -114,6 +116,40 @@ limitations under the License.
align-items: flex-start; align-items: flex-start;
font-size: $font-14px; font-size: $font-14px;
margin-right: 6px; margin-right: 6px;
pre {
background-color: $rte-code-bg-color;
border-radius: 3px;
padding: 10px;
}
textarea {
display: block;
width: 100%;
padding: 0px;
margin-top: 6px;
margin-bottom: 6px;
border: 0px;
resize: none;
outline: none;
box-shadow: none;
color: $primary-content;
background-color: $background;
font-size: $font-14px;
max-height: 120px;
overflow: auto;
/* hack for FF as vertical alignment of custom placeholder text is broken */
&::-moz-placeholder {
line-height: 100%;
color: $accent;
opacity: 1;
}
&::-webkit-input-placeholder {
color: $accent;
}
}
} }
.mx_MessageComposer_editor { .mx_MessageComposer_editor {
@ -123,15 +159,16 @@ limitations under the License.
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
word-break: break-word; word-break: break-word;
}
/* FIXME: rather unpleasant hack to get rid of <p/> margins. */ /* FIXME: rather unpleasant hack to get rid of <p/> margins. */
/* really we should be mixing in markdown-body from gfm.css instead */ /* really we should be mixing in markdown-body from gfm.css instead */
.mx_MessageComposer_editor > :first-child { > :first-child {
margin-top: 0 !important; margin-top: 0 !important;
} }
.mx_MessageComposer_editor > :last-child {
margin-bottom: 0 !important; > :last-child {
margin-bottom: 0 !important;
}
} }
@keyframes visualbell { @keyframes visualbell {
@ -147,39 +184,6 @@ limitations under the License.
animation: 0.2s visualbell; animation: 0.2s visualbell;
} }
.mx_MessageComposer_input pre {
background-color: $rte-code-bg-color;
border-radius: 3px;
padding: 10px;
}
.mx_MessageComposer_input textarea {
display: block;
width: 100%;
padding: 0px;
margin-top: 6px;
margin-bottom: 6px;
border: 0px;
resize: none;
outline: none;
box-shadow: none;
color: $primary-content;
background-color: $background;
font-size: $font-14px;
max-height: 120px;
overflow: auto;
}
/* hack for FF as vertical alignment of custom placeholder text is broken */
.mx_MessageComposer_input textarea::-moz-placeholder {
line-height: 100%;
color: $accent;
opacity: 1;
}
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
color: $accent;
}
.mx_MessageComposer_button_highlight { .mx_MessageComposer_button_highlight {
@mixin composerButtonHighLight; @mixin composerButtonHighLight;
} }
@ -332,10 +336,10 @@ limitations under the License.
align-items: center; align-items: center;
font-size: $font-10px; font-size: $font-10px;
color: $info-plinth-fg-color; color: $info-plinth-fg-color;
}
.mx_MessageComposer_formatbar * { * {
margin-right: 4px; margin-right: 4px;
}
} }
.mx_MessageComposer_format_button, .mx_MessageComposer_format_button,