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

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

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

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-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
-    font-size: 16px;
+    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;
 }

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

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;

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-top: 4px;
-    padding-bottom: 0px;
+    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;
 }
 

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 */

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;

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

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;

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 {

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;

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

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

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;

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;

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,

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;

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

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