diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss index 2dcd813692..1392ec6435 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss @@ -3,17 +3,21 @@ // --Matthew .mx_UserPill { - color: white; + color: $accent-fg-color; background-color: $accent-color; - padding: 2px 8px; + padding: 1px 5px 0px 2px; border-radius: 16px; } +.mx_UserPill img, .mx_RoomPill img { + vertical-align: -2px; + margin-right: 1px +} + .mx_RoomPill { - background-color: white; - color: $accent-color; - border: 1px solid $accent-color; - padding: 2px 8px; + background-color: $rte-room-pill-color; + color: $accent-fg-color; + padding: 1px 5px 0px 2px; border-radius: 16px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index 6c2216ddc6..43a5803099 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -100,6 +100,11 @@ limitations under the License. word-break: break-word; } +.mx_MessageComposer_input .DraftEditor-root .DraftEditor-editorContainer { + /* Ensure mx_UserPill and mx_RoomPill (see _RichText) are not obscured from the top */ + padding-top: 2px; +} + .mx_MessageComposer_input blockquote { color: $blockquote-fg-color; margin: 0 0 16px; diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index fc24af93e2..9701a48ffa 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -78,6 +78,7 @@ $voip-accept-color: #80f480; $rte-bg-color: #e9e9e9; $rte-code-bg-color: rgba(0, 0, 0, 0.04); +$rte-room-pill-color: #aaa; // ********************