From 2345624d31ca68c6f1b1bc81fda50846ed84bf1d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 30 Nov 2015 17:17:09 +0000 Subject: [PATCH] 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; }