Merge remote-tracking branch 'origin/develop' into read_receipts

src/skins/vector/css/atoms/MemberAvatar.css

@@ -17,12 +17,14 @@ limitations under the License.
 .mx_MemberAvatar_image {
     z-index: 20;
     border-radius: 20px;
+    position: relative;
 }
 
 .mx_MemberAvatar_initial {
     position: absolute;
     color: #fff;
     text-align: center;
+    speak: none;
 }
 
 .mx_MemberAvatar {

src/skins/vector/css/atoms/RoomAvatar.css

@@ -22,4 +22,5 @@ limitations under the License.
     color: #fff;
     text-align: center;
     font-weight: normal ! important;
+    speak: none;
 }

src/skins/vector/css/atoms/Spinner.css

@@ -21,5 +21,12 @@ limitations under the License.
     -webkit-justify-content: center;
     align-items: center;
     justify-content: center;
+    width: 100%;
     height: 100%;
+    flex: 1;
+    -webkit-flex: 1;
+}
+
+.mx_MatrixChat_middlePanel .mx_Spinner {
+    height: auto;
 }

src/skins/vector/css/common.css

@@ -47,6 +47,14 @@ a:visited {
     color: #76cfa6;
 }
 
+/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
+   Stop the scrollbar view from pushing out the container's overall sizing, which causes
+   flexbox to adapt to the new size and cause the view to keep growing.
+ */
+.gm-scrollbar-container .gm-scroll-view {
+  position: absolute;
+}
+
 .mx_ContextualMenu_background {
     position: fixed;
     top: 0;
@@ -99,7 +107,7 @@ a:visited {
     height: 100%;
     background-color: #000;
     opacity: 0.2;
-    z-index: 2000;
+    z-index: 4000;
 }
 
 .mx_Dialog_wrapper {
@@ -124,7 +132,7 @@ a:visited {
     background-color: #fff;
     color: #747474;
     text-align: center;
-    z-index: 2010;
+    z-index: 4010;
     font-weight: 300;
     font-size: 16px;
     position: relative;

src/skins/vector/css/molecules/MessageComposer.css

@@ -16,29 +16,25 @@ limitations under the License.
 
 .mx_MessageComposer_wrapper {
     max-width: 960px;
-    height: 70px;
     vertical-align: middle;
     margin: auto;
-    background-color: #fff;
     border-top: 2px solid #e1dddd;
 }
 
 .mx_MessageComposer_row {
     display: table-row;
     width: 100%;
-    height: 70px;
 }
 
 .mx_MessageComposer .mx_MessageComposer_avatar {
     display: table-cell;
     padding-left: 10px;
     padding-right: 28px;
-    height: 70px;
+    vertical-align: middle;
 }
 
-.mx_MessageComposer .mx_MessageComposer_avatar img {
-    margin-top: 18px;
-    border-radius: 20px;
+.mx_MessageComposer .mx_MessageComposer_avatar .mx_MemberAvatar {
+    display: block;
 }
 
 .mx_MessageComposer_input {
@@ -49,17 +45,18 @@ limitations under the License.
 }
 
 .mx_MessageComposer_input textarea {
+    display: block;
     font-size: 15px;
     width: 100%;
-    height: 1.2em;
-    padding-top: 0.7em;
-    padding-bottom: 0.7em;
+    padding: 0px;
+    margin-top: 6px;
+    margin-bottom: 6px;
     border: 0px;
     resize: none;
     outline: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
-    box-shadow: none;    
+    box-shadow: none;
 
     /* needed for FF */
     font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;

src/skins/vector/css/molecules/RoomHeader.css

@@ -90,9 +90,9 @@ limitations under the License.
 
 .mx_RoomHeader_simpleHeader {
     line-height: 83px;
-    color: #76cfa6;
-    font-weight: 400;
-    font-size: 20px;
+    color: #454545;
+    font-size: 24px;
+    font-weight: bold;
     overflow: hidden;
     text-overflow: ellipsis;
 }
@@ -102,7 +102,7 @@ limitations under the License.
     vertical-align: middle;
     height: 28px;
     color: #454545;
-    font-weight: 800;
+    font-weight: bold;
     font-size: 24px;
     padding-left: 19px;
     padding-right: 16px;

src/skins/vector/css/molecules/RoomTile.css

@@ -104,9 +104,7 @@ limitations under the License.
 }
 
 .mx_RoomTile_unread,
-.mx_RoomTile_highlight,
-.mx_RoomTile_selected
-{
+.mx_RoomTile_highlight {
     font-weight: bold;
 }
 

src/skins/vector/css/organisms/RoomView.css

@@ -236,8 +236,8 @@ limitations under the License.
     order: 5;
 
     width: 100%;
-    -webkit-flex: 0 0 70px;
-    flex: 0 0 70px;
+    -webkit-flex: 0;
+    flex: 0;
     margin-right: 2px;
 }
 

src/skins/vector/css/pages/MatrixChat.css

@@ -97,7 +97,8 @@ limitations under the License.
     /* XXX: Hack: apparently if you try to nest a flex-box
      * within a non-flex-box within a flex-box, the height
      * of the innermost element gets miscalculated if the
-     * parents are both auto.
+     * parents are both auto.  Height has to be auto here
+     * for RoomView to correctly fit when the Toolbar is shown.
      * Ideally we'd launch straight into the RoomView at this
      * point, but instead we fudge it and make the middlePanel
      * flex itself.

src/skins/vector/css/templates/Login.css

@@ -17,6 +17,18 @@ limitations under the License.
 .mx_Login {
     width: 100%;
     height: 100%;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+
+    overflow: auto;
 }
 
 .mx_Login h2 {
@@ -28,8 +40,10 @@ limitations under the License.
 
 .mx_Login_box {
     width: 300px;
+    min-height: 450px;
+    padding-top: 50px;
+    padding-bottom: 50px;
     margin: auto;
-    padding-top: 100px;
 }
 
 .mx_Login_logo {