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 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; }