From 4409f07c2ec4bad79198abe55a8863033139fc91 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 30 Nov 2015 15:49:27 +0000 Subject: [PATCH 1/7] oops, don't try to delete nonexistent tags when moving a room from conversations to favs or similar --- src/components/views/rooms/RoomDNDView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomDNDView.js b/src/components/views/rooms/RoomDNDView.js index 2729e15b7b..f096723f7f 100644 --- a/src/components/views/rooms/RoomDNDView.js +++ b/src/components/views/rooms/RoomDNDView.js @@ -68,7 +68,7 @@ var roomTileSource = { if (monitor.didDrop() && item.targetList.props.editable) { // if we moved lists, remove the old tag - if (item.targetList !== item.originalList) { + if (item.targetList !== item.originalList && item.originalList.props.tagName) { // commented out attempts to set a spinner on our target component as component is actually // the original source component being dragged, not our target. To fix we just need to // move all of this to endDrop in the target instead. FIXME later. From 2345624d31ca68c6f1b1bc81fda50846ed84bf1d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 30 Nov 2015 17:17:09 +0000 Subject: [PATCH 2/7] switch to Open Sans, juggling font-size appropriately (as Open Sans is physically larger for the same point size as Myriad Pro, irritatingly), and fix some really weird baseline CSS bugs in read receipts that were introduced. Hopefully this doesn't re-introduce the intermittent baseline offset bug for the initials on Chrome & FF --- src/skins/vector/css/atoms/ImageView.css | 10 +++++----- src/skins/vector/css/atoms/MemberAvatar.css | 4 +++- src/skins/vector/css/common.css | 16 ++++++++-------- src/skins/vector/css/molecules/EventTile.css | 10 ++++++---- src/skins/vector/css/molecules/MemberInfo.css | 4 ++-- src/skins/vector/css/molecules/MemberTile.css | 8 ++++---- .../vector/css/molecules/MessageComposer.css | 2 +- .../vector/css/molecules/RoomDropTarget.css | 2 +- src/skins/vector/css/molecules/RoomHeader.css | 6 +++--- src/skins/vector/css/molecules/RoomSettings.css | 4 ++-- src/skins/vector/css/molecules/RoomTile.css | 2 +- src/skins/vector/css/molecules/SearchBar.css | 4 ++-- src/skins/vector/css/molecules/ServerConfig.css | 2 +- src/skins/vector/css/organisms/CreateRoom.css | 2 +- src/skins/vector/css/organisms/MemberList.css | 6 +++--- src/skins/vector/css/organisms/RightPanel.css | 2 +- src/skins/vector/css/organisms/RoomDirectory.css | 7 +++---- src/skins/vector/css/organisms/RoomSubList.css | 2 +- src/skins/vector/css/organisms/RoomView.css | 2 +- src/skins/vector/css/templates/Login.css | 10 +++++----- 20 files changed, 54 insertions(+), 51 deletions(-) diff --git a/src/skins/vector/css/atoms/ImageView.css b/src/skins/vector/css/atoms/ImageView.css index 22ef343bee..9dd34f804e 100644 --- a/src/skins/vector/css/atoms/ImageView.css +++ b/src/skins/vector/css/atoms/ImageView.css @@ -87,13 +87,13 @@ limitations under the License. } .mx_ImageView_name { - font-size: 20px; + font-size: 18px; margin-bottom: 6px; pointer-events: all; } .mx_ImageView_metadata { - font-size: 16px; + font-size: 15px; opacity: 0.5; pointer-events: all; } @@ -105,13 +105,13 @@ limitations under the License. margin-bottom: 6px; border-radius: 5px; background-color: #454545; - font-size: 16px; + font-size: 14px; padding: 9px; border: 1px solid #fff; } .mx_ImageView_size { - font-size: 12px; + font-size: 11px; } .mx_ImageView_link { @@ -121,7 +121,7 @@ limitations under the License. .mx_ImageView_button { pointer-events: all; - font-size: 16px; + font-size: 15px; opacity: 0.5; margin-top: 18px; cursor: pointer; diff --git a/src/skins/vector/css/atoms/MemberAvatar.css b/src/skins/vector/css/atoms/MemberAvatar.css index 5f7d18cb5c..aa682cd479 100644 --- a/src/skins/vector/css/atoms/MemberAvatar.css +++ b/src/skins/vector/css/atoms/MemberAvatar.css @@ -15,11 +15,12 @@ limitations under the License. */ .mx_MemberAvatar { - position: relative; + /* remove position: relative as it breaks on FF - we have to ensure the parent element to the memberavatar has a position: relative instead. */; } .mx_MemberAvatar_initial { position: absolute; + z-index: 1; color: #fff; text-align: center; speak: none; @@ -28,4 +29,5 @@ limitations under the License. .mx_MemberAvatar_image { border-radius: 20px; + vertical-align: top; } diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index af2d4be4ab..1e6db6939e 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -22,13 +22,13 @@ html { } body { - /* Myriad Pro lacks combining diacritics, so these will fall through + /* Open Sans lacks combining diacritics, so these will fall through to the next font. Helevetica's diacritics however do not combine - nicely with Myriad Pro (on OSX, at least) and result in a huge + nicely with Open Sans (on OSX, at least) and result in a huge horizontal mess. Arial empirically gets it right, hence prioritising Arial here. */ - font-family: 'Myriad Pro', Arial, Helvetica, Sans-Serif; - font-size: 16px; + font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-size: 15px; color: #454545; border: 0px; margin: 0px; @@ -41,7 +41,7 @@ div.error { h2 { color: #454545; font-weight: 400; - font-size: 20px; + font-size: 18px; margin-top: 16px; margin-bottom: 16px; } @@ -129,7 +129,7 @@ a:visited { text-align: center; z-index: 4010; font-weight: 300; - font-size: 16px; + font-size: 15px; position: relative; border-radius: 8px; max-width: 80%; @@ -172,7 +172,7 @@ a:visited { height: 36px; border-radius: 36px; font-weight: 400; - font-size: 16px; + font-size: 15px; color: #fff; background-color: #76cfa6; margin-left: 8px; @@ -187,6 +187,6 @@ a:visited { padding: 12px; border-bottom: 1px solid #a4a4a4; font-weight: bold; - font-size: 20px; + font-size: 18px; line-height: 1.4; } diff --git a/src/skins/vector/css/molecules/EventTile.css b/src/skins/vector/css/molecules/EventTile.css index 152fde1f7c..56d7cf6852 100644 --- a/src/skins/vector/css/molecules/EventTile.css +++ b/src/skins/vector/css/molecules/EventTile.css @@ -25,9 +25,10 @@ limitations under the License. padding-left: 18px; padding-right: 12px; margin-left: -73px; - margin-top: -4px; + margin-top: -2px; float: left; position: relative; + top: 0px; } .mx_EventTile_avatar img { @@ -42,7 +43,7 @@ limitations under the License. .mx_EventTile .mx_SenderProfile { color: #454545; opacity: 0.5; - font-size: 14px; + font-size: 13px; margin-bottom: 4px; display: block; overflow-y: hidden; @@ -50,7 +51,7 @@ limitations under the License. .mx_EventTile .mx_MessageTimestamp { color: #acacac; - font-size: 12px; + font-size: 11px; } .mx_EventTile_line { @@ -74,6 +75,7 @@ limitations under the License. font-family: inherit ! important; white-space: normal ! important; line-height: inherit ! important; + font-size: 15px; } .mx_MessageTile_content .markdown-body h1, @@ -175,6 +177,6 @@ limitations under the License. .mx_EventTile_readAvatarRemainder { color: #acacac; - font-size: 12px; + font-size: 11px; position: absolute; } diff --git a/src/skins/vector/css/molecules/MemberInfo.css b/src/skins/vector/css/molecules/MemberInfo.css index ac11dde7c0..1c4ab3856c 100644 --- a/src/skins/vector/css/molecules/MemberInfo.css +++ b/src/skins/vector/css/molecules/MemberInfo.css @@ -38,7 +38,7 @@ limitations under the License. .mx_MemberInfo_profileField { font-color: #999999; - font-size: 14px; + font-size: 13px; position: relative; background-color: #fff; } @@ -51,7 +51,7 @@ limitations under the License. cursor: pointer; width: 100px; text-align: center; - font-size: 12px; + font-size: 11px; background-color: #888; color: #fff; font-weight: bold; diff --git a/src/skins/vector/css/molecules/MemberTile.css b/src/skins/vector/css/molecules/MemberTile.css index de34de595e..874710d9de 100644 --- a/src/skins/vector/css/molecules/MemberTile.css +++ b/src/skins/vector/css/molecules/MemberTile.css @@ -25,8 +25,8 @@ limitations under the License. display: table-cell; padding-left: 3px; padding-right: 12px; - padding-top: 2px; - padding-bottom: 0px; + padding-top: 4px; + padding-bottom: 4px; vertical-align: middle; width: 36px; height: 36px; @@ -55,13 +55,13 @@ limitations under the License. } .mx_MemberTile_userId { - font-size: 14px; + font-size: 13px; overflow: hidden; text-overflow: ellipsis; } .mx_MemberTile_presence { - font-size: 12px; + font-size: 11px; opacity: 0.5; } diff --git a/src/skins/vector/css/molecules/MessageComposer.css b/src/skins/vector/css/molecules/MessageComposer.css index 428d39e659..7a767e1f82 100644 --- a/src/skins/vector/css/molecules/MessageComposer.css +++ b/src/skins/vector/css/molecules/MessageComposer.css @@ -59,7 +59,7 @@ limitations under the License. box-shadow: none; /* needed for FF */ - font-family: 'Myriad Pro', Arial, Helvetica, Sans-Serif; + font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; } /* hack for FF as vertical alignment of custom placeholder text is broken */ diff --git a/src/skins/vector/css/molecules/RoomDropTarget.css b/src/skins/vector/css/molecules/RoomDropTarget.css index 4eea49e155..2e655c7376 100644 --- a/src/skins/vector/css/molecules/RoomDropTarget.css +++ b/src/skins/vector/css/molecules/RoomDropTarget.css @@ -15,7 +15,7 @@ limitations under the License. */ .mx_RoomDropTarget { - font-size: 14px; + font-size: 13px; margin-left: 10px; margin-right: 15px; padding-top: 5px; diff --git a/src/skins/vector/css/molecules/RoomHeader.css b/src/skins/vector/css/molecules/RoomHeader.css index 1a4fdbf329..d2633bbeb6 100644 --- a/src/skins/vector/css/molecules/RoomHeader.css +++ b/src/skins/vector/css/molecules/RoomHeader.css @@ -91,7 +91,7 @@ limitations under the License. .mx_RoomHeader_simpleHeader { line-height: 83px; color: #454545; - font-size: 24px; + font-size: 22px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; @@ -103,7 +103,7 @@ limitations under the License. height: 28px; color: #454545; font-weight: bold; - font-size: 24px; + font-size: 22px; padding-left: 19px; padding-right: 16px; text-overflow: ellipsis; @@ -141,7 +141,7 @@ limitations under the License. width: 260px; border: 1px solid #c7c7c7; font-weight: 300; - font-size: 14px; + font-size: 13px; padding: 9px; } diff --git a/src/skins/vector/css/molecules/RoomSettings.css b/src/skins/vector/css/molecules/RoomSettings.css index a669c5b2d1..dabdd55f09 100644 --- a/src/skins/vector/css/molecules/RoomSettings.css +++ b/src/skins/vector/css/molecules/RoomSettings.css @@ -39,7 +39,7 @@ limitations under the License. border-radius: 3px; border: 1px solid #c7c7c7; font-weight: 300; - font-size: 14px; + font-size: 13px; padding: 9px; margin-top: 6px; } @@ -59,7 +59,7 @@ limitations under the License. height: 36px; border-radius: 36px; font-weight: 400; - font-size: 16px; + font-size: 15px; color: #fff; background-color: #76cfa6; width: auto; diff --git a/src/skins/vector/css/molecules/RoomTile.css b/src/skins/vector/css/molecules/RoomTile.css index 37d2e1b62e..237c809227 100644 --- a/src/skins/vector/css/molecules/RoomTile.css +++ b/src/skins/vector/css/molecules/RoomTile.css @@ -18,7 +18,7 @@ limitations under the License. cursor: pointer; /* This fixes wrapping of long room names, but breaks drag & drop previews */ /* display: table-row; */ - font-size: 14px; + font-size: 13px; } .mx_RoomTile_avatar { diff --git a/src/skins/vector/css/molecules/SearchBar.css b/src/skins/vector/css/molecules/SearchBar.css index b116674bc5..762984f1f5 100644 --- a/src/skins/vector/css/molecules/SearchBar.css +++ b/src/skins/vector/css/molecules/SearchBar.css @@ -25,7 +25,7 @@ limitations under the License. display: inline block; border-radius: 3px; border: 1px solid #f0f0f0; - font-size: 16px; + font-size: 15px; padding: 9px; padding-left: 11px; margin-right: 17px; @@ -38,7 +38,7 @@ limitations under the License. border: 0px; border-radius: 36px; font-weight: 400; - font-size: 16px; + font-size: 15px; color: #fff; background-color: #76cfa6; width: auto; diff --git a/src/skins/vector/css/molecules/ServerConfig.css b/src/skins/vector/css/molecules/ServerConfig.css index db0572c841..58bdcfdf94 100644 --- a/src/skins/vector/css/molecules/ServerConfig.css +++ b/src/skins/vector/css/molecules/ServerConfig.css @@ -25,7 +25,7 @@ limitations under the License. .mx_ServerConfig_help:link { opacity: 0.8; - font-size: 14px; + font-size: 13px; font-weight: 300; color: #4a4a4a; } \ No newline at end of file diff --git a/src/skins/vector/css/organisms/CreateRoom.css b/src/skins/vector/css/organisms/CreateRoom.css index 578c79e6ea..feb8bbff36 100644 --- a/src/skins/vector/css/organisms/CreateRoom.css +++ b/src/skins/vector/css/organisms/CreateRoom.css @@ -26,7 +26,7 @@ limitations under the License. border-radius: 3px; border: 1px solid #c7c7c7; font-weight: 300; - font-size: 14px; + font-size: 13px; padding: 9px; margin-top: 6px; } diff --git a/src/skins/vector/css/organisms/MemberList.css b/src/skins/vector/css/organisms/MemberList.css index 774f177a4f..ce936d2c85 100644 --- a/src/skins/vector/css/organisms/MemberList.css +++ b/src/skins/vector/css/organisms/MemberList.css @@ -45,13 +45,13 @@ limitations under the License. } .mx_MemberList_invite { - font-family: 'Myriad Pro', Arial, Helvetica, Sans-Serif; + font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; border-radius: 3px; border: 1px solid #f0f0f0; padding: 9px; color: #454545; margin-left: 3px; - font-size: 16px; + font-size: 15px; margin-bottom: 8px; width: 180px; } @@ -69,7 +69,7 @@ limitations under the License. text-transform: uppercase; color: #3d3b39; font-weight: 600; - font-size: 14px; + font-size: 13px; padding-left: 3px; padding-right: 12px; margin-top: 8px; diff --git a/src/skins/vector/css/organisms/RightPanel.css b/src/skins/vector/css/organisms/RightPanel.css index bf473a4489..7e6029001c 100644 --- a/src/skins/vector/css/organisms/RightPanel.css +++ b/src/skins/vector/css/organisms/RightPanel.css @@ -66,7 +66,7 @@ limitations under the License. .mx_RightPanel_headerButton_badge { position: absolute; - top: 5px; + top: 4px; left: 28px; font-size: 12px; background-color: #76cfa6; diff --git a/src/skins/vector/css/organisms/RoomDirectory.css b/src/skins/vector/css/organisms/RoomDirectory.css index f53f055657..61fcfa6e3b 100644 --- a/src/skins/vector/css/organisms/RoomDirectory.css +++ b/src/skins/vector/css/organisms/RoomDirectory.css @@ -50,7 +50,7 @@ limitations under the License. border-radius: 3px; border: 1px solid #c7c7c7; font-weight: 300; - font-size: 14px; + font-size: 13px; padding: 9px; margin-top: 12px; margin-bottom: 12px; @@ -70,7 +70,7 @@ limitations under the License. .mx_RoomDirectory_table th { font-weight: 400; - font-size: 12px; + font-size: 11px; } .mx_RoomDirectory_table tbody { @@ -79,7 +79,6 @@ limitations under the License. .mx_RoomDirectory_table td { font-weight: 300; - font-size: 16px; overflow-x: hidden; text-overflow: ellipsis; } @@ -90,7 +89,7 @@ limitations under the License. .mx_RoomDirectory_table .mx_RoomDirectory_topic { font-weight: 400; - font-size: 12px; + font-size: 11px; } .mx_RoomDirectory_table td, diff --git a/src/skins/vector/css/organisms/RoomSubList.css b/src/skins/vector/css/organisms/RoomSubList.css index 57d23a3837..b143c998c0 100644 --- a/src/skins/vector/css/organisms/RoomSubList.css +++ b/src/skins/vector/css/organisms/RoomSubList.css @@ -29,7 +29,7 @@ limitations under the License. text-transform: uppercase; color: #3d3b39; font-weight: 600; - font-size: 14px; + font-size: 13px; padding-left: 12px; padding-right: 12px; margin-top: 8px; diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css index 94fff29068..81b0ef280f 100644 --- a/src/skins/vector/css/organisms/RoomView.css +++ b/src/skins/vector/css/organisms/RoomView.css @@ -204,7 +204,7 @@ limitations under the License. .mx_RoomView_connectionLostBar_desc { color: #454545; - font-size: 14px; + font-size: 13px; opacity: 0.5; } diff --git a/src/skins/vector/css/templates/Login.css b/src/skins/vector/css/templates/Login.css index 11fba43fbc..d1b28b1e59 100644 --- a/src/skins/vector/css/templates/Login.css +++ b/src/skins/vector/css/templates/Login.css @@ -55,7 +55,7 @@ limitations under the License. border-radius: 3px; border: 1px solid #c7c7c7; font-weight: 300; - font-size: 14px; + font-size: 13px; padding: 9px; margin-bottom: 14px; } @@ -68,12 +68,12 @@ limitations under the License. height: 40px; border: 0px; background-color: #76cfa6; - font-size: 16px; + font-size: 15px; color: #fff; } .mx_Login_label { - font-size: 14px; + font-size: 13px; opacity: 0.8; } @@ -85,7 +85,7 @@ limitations under the License. display: block; text-align: center; width: 100%; - font-size: 14px; + font-size: 13px; opacity: 0.8; } @@ -97,7 +97,7 @@ limitations under the License. display: block; text-align: center; width: 100%; - font-size: 14px; + font-size: 13px; opacity: 0.8; } From badfdb5e3eea1c7abf5bf01cd602e83210d4f1f7 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 30 Nov 2015 17:24:38 +0000 Subject: [PATCH 3/7] actually, seems FF is happy with this again now --- src/skins/vector/css/atoms/MemberAvatar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/atoms/MemberAvatar.css b/src/skins/vector/css/atoms/MemberAvatar.css index aa682cd479..3da56172d1 100644 --- a/src/skins/vector/css/atoms/MemberAvatar.css +++ b/src/skins/vector/css/atoms/MemberAvatar.css @@ -15,7 +15,7 @@ limitations under the License. */ .mx_MemberAvatar { - /* remove position: relative as it breaks on FF - we have to ensure the parent element to the memberavatar has a position: relative instead. */; + position: relative; } .mx_MemberAvatar_initial { From 1896ab67d18c860f97a2cfad2907337c461c1f9b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 1 Dec 2015 11:05:11 +0000 Subject: [PATCH 4/7] fix room avatar offset --- src/skins/vector/css/atoms/RoomAvatar.css | 1 + src/skins/vector/css/molecules/RoomTile.css | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/atoms/RoomAvatar.css b/src/skins/vector/css/atoms/RoomAvatar.css index 70a61eeb0f..f005b25176 100644 --- a/src/skins/vector/css/atoms/RoomAvatar.css +++ b/src/skins/vector/css/atoms/RoomAvatar.css @@ -15,6 +15,7 @@ limitations under the License. */ .mx_RoomAvatar { + vertical-align: middle; } .mx_RoomAvatar_initial { diff --git a/src/skins/vector/css/molecules/RoomTile.css b/src/skins/vector/css/molecules/RoomTile.css index 237c809227..5b8a2a9db0 100644 --- a/src/skins/vector/css/molecules/RoomTile.css +++ b/src/skins/vector/css/molecules/RoomTile.css @@ -25,12 +25,12 @@ limitations under the License. display: table-cell; padding-right: 8px; padding-top: 4px; - padding-bottom: 2px; + padding-bottom: 4px; padding-left: 18px; - vertical-align: middle; width: 24px; height: 24px; position: relative; + vertical-align: middle; } .mx_RoomTile_avatar img { From 99f47b8601dff7d1ff176f15b945154b8f66e9db Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 1 Dec 2015 11:07:12 +0000 Subject: [PATCH 5/7] match design spacing correctly --- src/skins/vector/css/molecules/RoomTile.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/molecules/RoomTile.css b/src/skins/vector/css/molecules/RoomTile.css index 5b8a2a9db0..898670d6d4 100644 --- a/src/skins/vector/css/molecules/RoomTile.css +++ b/src/skins/vector/css/molecules/RoomTile.css @@ -24,8 +24,8 @@ limitations under the License. .mx_RoomTile_avatar { display: table-cell; padding-right: 8px; - padding-top: 4px; - padding-bottom: 4px; + padding-top: 6px; + padding-bottom: 6px; padding-left: 18px; width: 24px; height: 24px; From f89dcacf073439b6094af9d596e53338a5e8d8a6 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 1 Dec 2015 11:11:32 +0000 Subject: [PATCH 6/7] fix bottomleftmenu layout a bit --- src/skins/vector/css/organisms/LeftPanel.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/organisms/LeftPanel.css b/src/skins/vector/css/organisms/LeftPanel.css index 37de0f0e54..7451d1677f 100644 --- a/src/skins/vector/css/organisms/LeftPanel.css +++ b/src/skins/vector/css/organisms/LeftPanel.css @@ -69,11 +69,12 @@ limitations under the License. } .mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options { - margin-top: 17px; + margin-top: 15px; width: 100%; } .mx_LeftPanel .mx_BottomLeftMenu img { border-radius: 0px; background-color: transparent; + vertical-align: middle; } \ No newline at end of file From 075d2b508d1dc9e1f5bfed91e5dc574a733fe850 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 1 Dec 2015 13:13:51 +0000 Subject: [PATCH 7/7] fix highlights on markdown --- src/skins/vector/css/molecules/EventTile.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/molecules/EventTile.css b/src/skins/vector/css/molecules/EventTile.css index 56d7cf6852..d924cff6a7 100644 --- a/src/skins/vector/css/molecules/EventTile.css +++ b/src/skins/vector/css/molecules/EventTile.css @@ -113,7 +113,9 @@ limitations under the License. color: #ddd; } -.mx_EventTile_highlight { +.mx_EventTile_highlight, +.mx_EventTile_highlight .markdown-body + { color: #FF0064; }