From 38899c6011b0496ac5a4c1e30c7d176e8b07d215 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Fri, 14 Jul 2017 17:23:16 +0100 Subject: [PATCH 1/4] CSS for decorated matrix.to links in the composer --- .../matrix-react-sdk/views/elements/_RichText.scss | 14 +++++++++----- .../views/rooms/_MessageComposer.scss | 5 +++++ 2 files changed, 14 insertions(+), 5 deletions(-) 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 2dcd8136..55819dbb 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 @@ -5,15 +5,19 @@ .mx_UserPill { color: white; 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: #aaa; + color: white; + 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 6c2216dd..43a58030 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; From de0fd588b66bcae31d9b65242135c0f58dbaac38 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Fri, 14 Jul 2017 17:51:25 +0100 Subject: [PATCH 2/4] Add $rte-room-pill-color: #aaa --- .../vector/css/matrix-react-sdk/views/elements/_RichText.scss | 2 +- src/skins/vector/css/themes/_base.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) 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 55819dbb..4fa083eb 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 @@ -15,7 +15,7 @@ } .mx_RoomPill { - background-color: #aaa; + background-color: $rte-room-pill-color; color: white; padding: 1px 5px 0px 2px; border-radius: 16px; diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index fc24af93..9701a48f 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; // ******************** From 18a6ee5a52c25ee7ed6421142d089cfe34657bdb Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Fri, 14 Jul 2017 17:52:11 +0100 Subject: [PATCH 3/4] white -> #fff --- .../vector/css/matrix-react-sdk/views/elements/_RichText.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 4fa083eb..e04f6972 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,7 +3,7 @@ // --Matthew .mx_UserPill { - color: white; + color: #fff; background-color: $accent-color; padding: 1px 5px 0px 2px; border-radius: 16px; @@ -16,7 +16,7 @@ .mx_RoomPill { background-color: $rte-room-pill-color; - color: white; + color: #fff; padding: 1px 5px 0px 2px; border-radius: 16px; } From a1b4b9992e25f6f2341e0bda7006b92930817587 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Fri, 14 Jul 2017 17:59:53 +0100 Subject: [PATCH 4/4] Use $accent-fg-color instead of #fff --- .../vector/css/matrix-react-sdk/views/elements/_RichText.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 e04f6972..1392ec64 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,7 +3,7 @@ // --Matthew .mx_UserPill { - color: #fff; + color: $accent-fg-color; background-color: $accent-color; padding: 1px 5px 0px 2px; border-radius: 16px; @@ -16,7 +16,7 @@ .mx_RoomPill { background-color: $rte-room-pill-color; - color: #fff; + color: $accent-fg-color; padding: 1px 5px 0px 2px; border-radius: 16px; }