Fix up some CSS things stylelint was complaining about

And also disable a load of rules that feel like they're probably
causing more headaches than they fix.

.stylelintrc.js

@@ -3,5 +3,13 @@ module.exports = {
     "rules": {
         "indentation": 4,
         "comment-empty-line-before": null,
+        "declaration-empty-line-before": null,
+        "length-zero-no-unit": null,
+        "rule-empty-line-before": null,
+        "color-hex-length": null,
+        "max-empty-lines": null,
+        "number-no-trailing-zeros": null,
+        "number-leading-zero": null,
+        "selector-list-comma-newline-after": null,
     }
 }

res/css/structures/_AutoHideScrollbar.scss

@@ -14,6 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+/* This file has CSS for both native and non-native scrollbars in an
+ * order that's fairly logic to read but violates stylelints descending
+ * specificity rule, so turn it off for this file. It also duplicates
+ * a selector to separate the hiding/showing from the sizing.
+ */
+/* stylelint-disable no-descending-specificity, no-duplicate-selectors */
+
 /*
 1. for browsers that support native overlay auto-hiding scrollbars
 */

res/css/structures/_ContextualMenu.scss

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

res/css/structures/_FilePanel.scss

@@ -101,10 +101,10 @@ limitations under the License.
     padding-left: 0px;
 }
 
-.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: $primary-bg-color;
-}
-
 .mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
     padding-left: 0px;
 }
+
+.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: $primary-bg-color;
+}

res/css/structures/_LeftPanel.scss

@@ -67,11 +67,6 @@ limitations under the License.
     z-index: 6;
 }
 
-.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
-   flex: 0 0 160px;
-   margin-bottom: 9px;
-}
-
 .mx_LeftPanel .mx_BottomLeftMenu {
     order: 3;
 
@@ -82,6 +77,11 @@ limitations under the License.
     z-index: 1;
 }
 
+.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
+    flex: 0 0 160px;
+    margin-bottom: 9px;
+}
+
 .mx_LeftPanel .mx_BottomLeftMenu_options {
     margin-top: 18px;
 }

res/css/structures/_MyGroups.scss

@@ -52,7 +52,7 @@ limitations under the License.
     background-color: $roomheader-addroom-bg-color;
     position: relative;
 
-    &:before {
+    &::before {
         background-color: $roomheader-addroom-fg-color;
         mask: url('$(res)/img/icons-create-room.svg');
         mask-repeat: no-repeat;
@@ -113,8 +113,7 @@ limitations under the License.
     overflow-x: hidden;
 
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
-    flex-flow: wrap;
     align-content: flex-start;
 }
 
@@ -153,6 +152,7 @@ limitations under the License.
 
 .mx_GroupTile_profile .mx_GroupTile_groupId {
     font-size: 13px;
+    opacity: 0.7;
 }
 
 .mx_GroupTile_profile .mx_GroupTile_desc {
@@ -163,7 +163,3 @@ limitations under the License.
     max-height: 36px;
     overflow: hidden;
 }
-
-.mx_GroupTile_profile .mx_GroupTile_groupId {
-    opacity: 0.7;
-}

res/css/structures/_NotificationPanel.scss

@@ -83,14 +83,14 @@ limitations under the License.
     padding-right: 0px;
 }
 
-.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: $primary-bg-color;
-}
-
 .mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
     padding-left: 0px;
 }
 
+.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: $primary-bg-color;
+}
+
 .mx_NotificationPanel .mx_EventTile_content {
     margin-right: 0px;
 }

res/css/structures/_RoomStatusBar.scss

@@ -40,12 +40,12 @@ limitations under the License.
     opacity: 0.5;
     position: relative;
     top: -4px;
-/*
+    /*
     animation-duration: 1s;
     animation-name: bounce;
     animation-direction: alternate;
     animation-iteration-count: infinite;
-*/
+    */
 }
 
 .mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
@@ -173,12 +173,12 @@ limitations under the License.
     }
 
     .mx_RoomStatusBar_callBar {
-      height: 40px;
+        height: 40px;
-      line-height: 40px;
+        line-height: 40px;
     }
 
     .mx_RoomStatusBar_typingBar {
-      height: 40px;
+        height: 40px;
-      line-height: 40px;
+        line-height: 40px;
     }
 }

res/css/structures/_RoomSubList.scss

@@ -89,7 +89,7 @@ limitations under the License.
     flex: 0 0 16px;
     position: relative;
 
-    &:before {
+    &::before {
         background-color: $roomheader-addroom-fg-color;
         mask: url('$(res)/img/icons-room-add.svg');
         mask-repeat: no-repeat;
@@ -137,6 +137,26 @@ limitations under the License.
     padding: 0 8px;
 }
 
+.collapsed {
+    .mx_RoomSubList_scroll {
+        padding: 0;
+    }
+
+    .mx_RoomSubList_labelContainer {
+        margin-right: 14px;
+        margin-left: 2px;
+    }
+
+    .mx_RoomSubList_addRoom {
+        margin-left: 3px;
+        margin-right: 10px;
+    }
+
+    .mx_RoomSubList_label > span {
+        display: none;
+    }
+}
+
 // overflow indicators
 .mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
     &.mx_IndicatorScrollbar_topOverflow::before,
@@ -164,7 +184,7 @@ limitations under the License.
         background: linear-gradient(to top, $panel-gradient);
     }
 
-/*
+    /*
     // for now, we remove the bottomOverflow entirely as we don't want to
     // lose the screen real-estate due to a bg-colored gradient, but we also
     // don't want to use drop shadows and risk a confusing hierarchy of cards.
@@ -175,26 +195,5 @@ limitations under the License.
         margin: 0px -8px;
         background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.0));
     }
-*/
+    */
-}
-
-.collapsed {
-
-    .mx_RoomSubList_scroll {
-        padding: 0;
-    }
-
-    .mx_RoomSubList_labelContainer {
-        margin-right: 14px;
-        margin-left: 2px;
-    }
-
-    .mx_RoomSubList_addRoom {
-        margin-left: 3px;
-        margin-right: 10px;
-    }
-
-    .mx_RoomSubList_label > span {
-        display: none;
-    }
 }

res/css/structures/_RoomView.scss

@@ -86,36 +86,6 @@ limitations under the License.
     flex: 1 1 0;
 }
 
-.mx_RoomView_body {
-    position: relative; //for .mx_RoomView_auxPanel_fullHeight
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-width: 0;
-}
-
-.mx_RoomView_body .mx_RoomView_timeline {
-    /* offset parent for mx_RoomView_topUnreadMessagesBar  */
-    position: relative;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.mx_RoomView_body {
-    .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner{
-        order: 2;
-    }
-}
-
-.mx_RoomView_body .mx_RoomView_statusArea {
-    order: 3;
-}
-
-.mx_RoomView_body .mx_MessageComposer {
-    order: 4;
-}
-
 .mx_RoomView_messagePanel {
     width: 100%;
     overflow-y: auto;
@@ -132,7 +102,7 @@ limitations under the License.
     position: relative;
 }
 
-.mx_RoomView_messagePanelSearchSpinner:before {
+.mx_RoomView_messagePanelSearchSpinner::before {
     background-color: $greyed-fg-color;
     mask: url('$(res)/img/feather-customised/search-input.svg');
     mask-repeat: no-repeat;
@@ -146,6 +116,62 @@ limitations under the License.
     height: 50px;
 }
 
+.mx_RoomView_body {
+    position: relative; //for .mx_RoomView_auxPanel_fullHeight
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+
+    .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner {
+        order: 2;
+    }
+}
+
+.mx_RoomView_body .mx_RoomView_timeline {
+    /* offset parent for mx_RoomView_topUnreadMessagesBar  */
+    position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_RoomView_statusArea {
+    width: 100%;
+    flex: 0 0 auto;
+
+    max-height: 0px;
+    background-color: $primary-bg-color;
+    z-index: 1000;
+    overflow: hidden;
+
+    transition: all .2s ease-out;
+}
+
+.mx_RoomView_statusArea_expanded {
+    max-height: 100px;
+}
+
+.mx_RoomView_statusAreaBox {
+    margin: auto;
+    min-height: 50px;
+}
+
+.mx_RoomView_statusAreaBox_line {
+    margin-left: 65px;
+    border-top: 1px solid $primary-hairline-color;
+    height: 1px;
+}
+
+
+.mx_RoomView_body .mx_RoomView_statusArea {
+    order: 3;
+}
+
+.mx_RoomView_body .mx_MessageComposer {
+    order: 4;
+}
+
 .mx_RoomView_messageListWrapper {
     min-height: 100%;
 
@@ -206,33 +232,6 @@ hr.mx_RoomView_myReadMarker {
     z-index: 1;
 }
 
-.mx_RoomView_statusArea {
-    width: 100%;
-    flex: 0 0 auto;
-
-    max-height: 0px;
-    background-color: $primary-bg-color;
-    z-index: 1000;
-    overflow: hidden;
-
-    transition: all .2s ease-out;
-}
-
-.mx_RoomView_statusArea_expanded {
-    max-height: 100px;
-}
-
-.mx_RoomView_statusAreaBox {
-    margin: auto;
-    min-height: 50px;
-}
-
-.mx_RoomView_statusAreaBox_line {
-    margin-left: 65px;
-    border-top: 1px solid $primary-hairline-color;
-    height: 1px;
-}
-
 .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
     background-color: $primary-bg-color;
 }

res/css/structures/_TabbedView.scss

@@ -50,7 +50,7 @@ limitations under the License.
     color: $tab-label-active-fg-color;
 }
 
-.mx_TabbedView_maskedIcon {;
+.mx_TabbedView_maskedIcon {
     margin-left: 6px;
     margin-right: 9px;
     margin-top: 1px;
@@ -59,7 +59,7 @@ limitations under the License.
     display: inline-block;
 }
 
-.mx_TabbedView_maskedIcon:before {
+.mx_TabbedView_maskedIcon::before {
     display: inline-block;
     background-color: $tab-label-icon-bg-color;
     mask-repeat: no-repeat;
@@ -71,7 +71,7 @@ limitations under the License.
     vertical-align: middle;
 }
 
-.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
+.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
     background-color: $tab-label-active-icon-bg-color;
 }
 

res/css/structures/_TagPanel.scss

@@ -36,7 +36,6 @@ limitations under the License.
 
     flex: none;
 
-    display: flex;
     justify-content: center;
     align-items: flex-start;
 
@@ -75,13 +74,13 @@ limitations under the License.
 
 .mx_TagPanel .mx_TagTile {
     margin: 9px 0;
-//  opacity: 0.5;
+    // opacity: 0.5;
     position: relative;
 }
 .mx_TagPanel .mx_TagTile:focus,
 .mx_TagPanel .mx_TagTile:hover,
 .mx_TagPanel .mx_TagTile.mx_TagTile_selected {
-//    opacity: 1;
+    // opacity: 1;
 }
 
 .mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {

res/css/structures/_TagPanelButtons.scss

@@ -23,12 +23,12 @@ limitations under the License.
     padding: 17px 0 3px 0;
 }
 
-.mx_TagPanelButtons > .mx_GroupsButton:before {
+.mx_TagPanelButtons > .mx_GroupsButton::before {
     mask: url('$(res)/img/feather-customised/users.svg');
     mask-position: center 11px;
 }
 
-.mx_TagPanelButtons > .mx_TagPanelButtons_report:before {
+.mx_TagPanelButtons > .mx_TagPanelButtons_report::before {
     mask: url('$(res)/img/feather-customised/life-buoy.svg');
     mask-position: center 9px;
 }
@@ -43,7 +43,7 @@ limitations under the License.
     /* overwrite mx_RoleButton inline-block */
     display: block !important;
 
-    &:before {
+    &::before {
         background-color: $tagpanel-bg-color;
         mask-repeat: no-repeat;
         content: '';