From cd84d86fd13f7d239b91b42fab461fb86667cd66 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 1 Nov 2017 19:45:59 +0000 Subject: [PATCH 1/2] CSS for room notification pills --- .../matrix-react-sdk/views/elements/_RichText.scss | 13 ++++++++----- 1 file changed, 8 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 0927cfbcbc..11dfee93d6 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,8 @@ // --Matthew .mx_UserPill, -.mx_RoomPill { +.mx_RoomPill, +.mx_AtRoomPill { border-radius: 16px; display: inline-block; height: 20px; @@ -24,9 +25,10 @@ padding-right: 5px; } -.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me { - color: $accent-fg-color; - background-color: $mention-user-pill-bg-color; +.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me, .mx_AtRoomPill { + /* !important because otherwise @room pills in links get their colours clobbered by links styles :( */ + color: $accent-fg-color !important; + background-color: $mention-user-pill-bg-color !important; padding-right: 5px; } @@ -39,7 +41,8 @@ } .mx_UserPill .mx_BaseAvatar, -.mx_RoomPill .mx_BaseAvatar { +.mx_RoomPill .mx_BaseAvatar, +.mx_AtRoomPill .mx_BaseAvatar { position: relative; left: -3px; top: 2px; From 65ea7a8460cfbe2bc93cd38b1f994a529efda19f Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 2 Nov 2017 10:37:25 +0000 Subject: [PATCH 2/2] Use more spercific selector instead of !important --- .../css/matrix-react-sdk/views/elements/_RichText.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 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 11dfee93d6..8b7c8f06bb 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 @@ -25,10 +25,10 @@ padding-right: 5px; } -.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me, .mx_AtRoomPill { - /* !important because otherwise @room pills in links get their colours clobbered by links styles :( */ - color: $accent-fg-color !important; - background-color: $mention-user-pill-bg-color !important; +.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me, +.mx_EventTile_content .mx_AtRoomPill { + color: $accent-fg-color; + background-color: $mention-user-pill-bg-color; padding-right: 5px; }