From 2345624d31ca68c6f1b1bc81fda50846ed84bf1d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 30 Nov 2015 17:17:09 +0000 Subject: [PATCH 1/6] 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 22ef343be..9dd34f804 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 5f7d18cb5..aa682cd47 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 af2d4be4a..1e6db6939 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 152fde1f7..56d7cf685 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 ac11dde7c..1c4ab3856 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 de34de595..874710d9d 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 428d39e65..7a767e1f8 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 4eea49e15..2e655c737 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 1a4fdbf32..d2633bbeb 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 a669c5b2d..dabdd55f0 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 37d2e1b62..237c80922 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 b116674bc..762984f1f 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 db0572c84..58bdcfdf9 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 578c79e6e..feb8bbff3 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 774f177a4..ce936d2c8 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 bf473a448..7e6029001 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 f53f05565..61fcfa6e3 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 57d23a383..b143c998c 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 94fff2906..81b0ef280 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 11fba43fb..d1b28b1e5 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 2/6] 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 aa682cd47..3da56172d 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 3/6] 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 70a61eeb0..f005b2517 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 237c80922..5b8a2a9db 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 4/6] 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 5b8a2a9db..898670d6d 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 5/6] 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 37de0f0e5..7451d1677 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 6/6] 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 56d7cf685..d924cff6a 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; }