Make all 'font-size's and 'line-height's rem

res/css/_common.scss

@@ -16,6 +16,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+:root {
+    font-size: 15px;
+}
+
 html {
     /* hack to stop overscroll bounce on OSX and iOS.
        N.B. Breaks things when we have legitimate horizontal overscroll */
@@ -25,7 +29,7 @@ html {
 
 body {
     font-family: $font-family;
-    font-size: 15px;
+    font-size: 1rem;
     background-color: $primary-bg-color;
     color: $primary-fg-color;
     border: 0px;
@@ -60,7 +64,7 @@ b {
 h2 {
     color: $primary-fg-color;
     font-weight: 400;
-    font-size: 18px;
+    font-size: 1.2rem;
     margin-top: 16px;
     margin-bottom: 16px;
 }
@@ -76,7 +80,7 @@ input[type=search],
 input[type=password] {
     padding: 9px;
     font-family: $font-family;
-    font-size: 14px;
+    font-size: 0.933rem;
     font-weight: 600;
     min-width: 0;
 }
@@ -253,7 +257,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     color: $light-fg-color;
     z-index: 4012;
     font-weight: 300;
-    font-size: 15px;
+    font-size: 1rem;
     position: relative;
     padding: 25px 30px 30px 30px;
     max-height: 80%;
@@ -321,8 +325,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_Dialog_title {
-    font-size: 22px;
-    line-height: 36px;
+    font-size: 1.467rem;
+    line-height: 2.400rem;
     color: $dialog-title-fg-color;
 }
 
@@ -350,7 +354,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 
 .mx_Dialog_content {
     margin: 24px 0 68px;
-    font-size: 14px;
+    font-size: 0.933rem;
     color: $primary-fg-color;
     word-wrap: break-word;
 }
@@ -446,7 +450,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_TextInputDialog_input {
-    font-size: 15px;
+    font-size: 1rem;
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;

res/css/structures/_ContextualMenu.scss

@@ -36,7 +36,7 @@ limitations under the License.
     background-color: $menu-bg-color;
     color: $primary-fg-color;
     position: absolute;
-    font-size: 14px;
+    font-size: 0.933rem;
     z-index: 5001;
 }
 

res/css/structures/_CreateRoom.scss

@@ -26,7 +26,7 @@ limitations under the License.
     border-radius: 3px;
     border: 1px solid $strong-input-border-color;
     font-weight: 300;
-    font-size: 13px;
+    font-size: 0.867rem;
     padding: 9px;
     margin-top: 6px;
 }

res/css/structures/_FilePanel.scss

@@ -49,7 +49,7 @@ limitations under the License.
 
 .mx_FilePanel .mx_EventTile .mx_MFileBody_download {
     display: flex;
-    font-size: 14px;
+    font-size: 0.933rem;
     color: $event-timestamp-color;
 }
 
@@ -60,7 +60,7 @@ limitations under the License.
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody_size {
     flex: 1 0 0;
-    font-size: 11px;
+    font-size: 0.733rem;
     text-align: right;
     white-space: nowrap;
 }
@@ -80,7 +80,7 @@ limitations under the License.
     flex: 1 1 auto;
     line-height: initial;
     padding: 0px;
-    font-size: 11px;
+    font-size: 0.733rem;
     opacity: 1.0;
     color: $event-timestamp-color;
 }
@@ -90,7 +90,7 @@ limitations under the License.
     text-align: right;
     visibility: visible;
     position: initial;
-    font-size: 11px;
+    font-size: 0.733rem;
     opacity: 1.0;
     color: $event-timestamp-color;
 }

res/css/structures/_GroupView.scss

@@ -134,7 +134,7 @@ limitations under the License.
     overflow: hidden;
     color: $primary-fg-color;
     font-weight: bold;
-    font-size: 22px;
+    font-size: 1.467rem;
     padding-left: 19px;
     padding-right: 16px;
     /* why isn't text-overflow working? */
@@ -148,7 +148,7 @@ limitations under the License.
     max-height: 42px;
     color: $settings-grey-fg-color;
     font-weight: 300;
-    font-size: 13px;
+    font-size: 0.867rem;
     padding-left: 19px;
     margin-right: 16px;
     overflow: hidden;
@@ -196,7 +196,7 @@ limitations under the License.
     text-transform: uppercase;
     color: $h3-color;
     font-weight: 600;
-    font-size: 13px;
+    font-size: 0.867rem;
     margin-bottom: 10px;
 }
 
@@ -226,7 +226,7 @@ limitations under the License.
 .mx_GroupView_rooms_header_addRow_label {
     display: inline-block;
     vertical-align: top;
-    line-height: 24px;
+    line-height: 1.600rem;
     padding-left: 28px;
     color: $accent-color;
 }
@@ -258,7 +258,7 @@ limitations under the License.
 
 .mx_GroupView_membershipSection_description {
     /* To match textButton */
-    line-height: 34px;
+    line-height: 2.267rem;
 }
 
 .mx_GroupView_membershipSection_description .mx_BaseAvatar {

res/css/structures/_LeftPanel.scss

@@ -147,7 +147,7 @@ limitations under the License.
     }
 
     .mx_AccessibleButton {
-        font-size: 14px;
+        font-size: 0.933rem;
         margin: 4px 0 1px 9px;
         padding: 9px;
         padding-left: 42px;

res/css/structures/_MyGroups.scss

@@ -105,7 +105,7 @@ limitations under the License.
 .mx_MyGroups_placeholder {
     background-color: $info-plinth-bg-color;
     color: $info-plinth-fg-color;
-    line-height: 400px;
+    line-height: 26.667rem;
     border-radius: 10px;
     text-align: center;
 }
@@ -149,19 +149,19 @@ limitations under the License.
 
 .mx_GroupTile_profile .mx_GroupTile_name {
     margin: 0px;
-    font-size: 15px;
+    font-size: 1rem;
 }
 
 .mx_GroupTile_profile .mx_GroupTile_groupId {
-    font-size: 13px;
+    font-size: 0.867rem;
     opacity: 0.7;
 }
 
 .mx_GroupTile_profile .mx_GroupTile_desc {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-    font-size: 13px;
+    font-size: 0.867rem;
     max-height: 36px;
     overflow: hidden;
 }

res/css/structures/_NotificationPanel.scss

@@ -39,7 +39,7 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile_roomName {
     font-weight: bold;
-    font-size: 14px;
+    font-size: 0.933rem;
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a {
@@ -54,7 +54,7 @@ limitations under the License.
 .mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
     color: $primary-fg-color;
-    font-size: 12px;
+    font-size: 0.8rem;
     display: inline;
     padding-left: 0px;
 }

res/css/structures/_RightPanel.scss

@@ -96,7 +96,7 @@ limitations under the License.
 }
 
 .mx_RightPanel_headerButton_badge {
-    font-size: 8px;
+    font-size: 0.533rem;
     border-radius: 8px;
     color: $accent-fg-color;
     background-color: $accent-color;

res/css/structures/_RoomDirectory.scss

@@ -64,7 +64,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_table {
-    font-size: 12px;
+    font-size: 0.8rem;
     color: $primary-fg-color;
     width: 100%;
     text-align: left;
@@ -112,7 +112,7 @@ limitations under the License.
 
 .mx_RoomDirectory_name {
     display: inline-block;
-    font-size: 18px;
+    font-size: 1.2rem;
     font-weight: 600;
 }
 
@@ -124,7 +124,7 @@ limitations under the License.
     border-radius: 10px;
     display: inline-block;
     height: 20px;
-    line-height: 20px;
+    line-height: 1.333rem;
     padding: 0 5px;
     color: $accent-fg-color;
     background-color: $rte-room-pill-color;
@@ -136,7 +136,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_alias {
-    font-size: 12px;
+    font-size: 0.8rem;
     color: $settings-grey-fg-color;
 }
 
@@ -150,7 +150,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory > span {
-    font-size: 15px;
+    font-size: 1rem;
     margin-top: 0;
 
     .mx_AccessibleButton {

res/css/structures/_RoomStatusBar.scss

@@ -32,7 +32,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_callBar {
     height: 50px;
-    line-height: 50px;
+    line-height: 3.333rem;
 }
 
 .mx_RoomStatusBar_placeholderIndicator span {
@@ -94,7 +94,7 @@ limitations under the License.
     border-radius: 40px;
     width: 24px;
     height: 24px;
-    line-height: 24px;
+    line-height: 1.600rem;
     font-size: 0.8em;
     vertical-align: top;
     text-align: center;
@@ -132,7 +132,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_connectionLostBar_desc {
     color: $primary-fg-color;
-    font-size: 13px;
+    font-size: 0.867rem;
     opacity: 0.5;
     padding-bottom: 20px;
 }
@@ -145,7 +145,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_typingBar {
     height: 50px;
-    line-height: 50px;
+    line-height: 3.333rem;
 
     color: $primary-fg-color;
     opacity: 0.5;
@@ -155,7 +155,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_isAlone {
     height: 50px;
-    line-height: 50px;
+    line-height: 3.333rem;
 
     color: $primary-fg-color;
     opacity: 0.5;
@@ -174,11 +174,11 @@ limitations under the License.
 
     .mx_RoomStatusBar_callBar {
         height: 40px;
-        line-height: 40px;
+        line-height: 2.667rem;
     }
 
     .mx_RoomStatusBar_typingBar {
         height: 40px;
-        line-height: 40px;
+        line-height: 2.667rem;
     }
 }

res/css/structures/_RoomSubList.scss

@@ -68,15 +68,15 @@ limitations under the License.
     text-transform: uppercase;
     color: $roomsublist-label-fg-color;
     font-weight: 700;
-    font-size: 12px;
+    font-size: 0.8rem;
     margin-left: 8px;
 }
 
 .mx_RoomSubList_badge > div {
     flex: 0 0 auto;
     border-radius: 8px;
     font-weight: 600;
-    font-size: 12px;
+    font-size: 0.8rem;
     padding: 0 5px;
     color: $roomtile-badge-fg-color;
     background-color: $roomtile-name-color;

res/css/structures/_RoomView.scss

@@ -23,7 +23,7 @@ limitations under the License.
 .mx_RoomView_fileDropTarget {
     min-width: 0px;
     width: 100%;
-    font-size: 18px;
+    font-size: 1.2rem;
     text-align: center;
 
     pointer-events: none;
@@ -186,7 +186,7 @@ limitations under the License.
 
 .mx_RoomView_empty {
     flex: 1 1 auto;
-    font-size: 13px;
+    font-size: 0.867rem;
     padding-left: 3em;
     padding-right: 3em;
     margin-right: 20px;

res/css/structures/_TabbedView.scss

@@ -39,7 +39,7 @@ limitations under the License.
     cursor: pointer;
     display: block;
     border-radius: 3px;
-    font-size: 14px;
+    font-size: 0.933rem;
     min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
     margin-bottom: 6px;
     position: relative;