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

This commit is contained in:
Matthew Hodgson 2015-11-30 17:17:09 +00:00
parent 4409f07c2e
commit 2345624d31
20 changed files with 54 additions and 51 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -204,7 +204,7 @@ limitations under the License.
.mx_RoomView_connectionLostBar_desc {
color: #454545;
font-size: 14px;
font-size: 13px;
opacity: 0.5;
}

View File

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