diff --git a/res/css/_common.scss b/res/css/_common.scss
index 973103899d..639764150b 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -209,25 +209,25 @@ textarea {
 
 /* Expand thumbs on hoverover */
 .gm-scrollbar {
-    border-radius: 5px ! important;
+    border-radius: 5px !important;
 }
 .gm-scrollbar.-vertical {
     width: 6px;
-    transition: width 120ms ease-out ! important;
+    transition: width 120ms ease-out !important;
 }
 .gm-scrollbar.-vertical:hover,
 .gm-scrollbar.-vertical:active {
     width: 8px;
-    transition: width 120ms ease-out ! important;
+    transition: width 120ms ease-out !important;
 }
 .gm-scrollbar.-horizontal {
     height: 6px;
-    transition: height 120ms ease-out ! important;
+    transition: height 120ms ease-out !important;
 }
 .gm-scrollbar.-horizontal:hover,
 .gm-scrollbar.-horizontal:active {
     height: 8px;
-    transition: height 120ms ease-out ! important;
+    transition: height 120ms ease-out !important;
 }
 
 // These are magic constants which are excluded from tinting, to let themes
@@ -390,7 +390,7 @@ textarea {
 
     // flip colours for the secondary ones
     font-weight: 600;
-    border: 1px solid $accent-color ! important;
+    border: 1px solid $accent-color !important;
     color: $accent-color;
     background-color: $button-secondary-bg-color;
 }
@@ -407,7 +407,7 @@ textarea {
     filter: brightness($focus-brightness);
 }
 
-.mx_Dialog button.mx_Dialog_primary, .mx_Dialog  input[type="submit"].mx_Dialog_primary {
+.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
     color: $accent-fg-color;
     background-color: $accent-color;
     min-width: 156px;
diff --git a/res/css/views/context_menus/_RoomTileContextMenu.scss b/res/css/views/context_menus/_RoomTileContextMenu.scss
index f832691be4..4246474de3 100644
--- a/res/css/views/context_menus/_RoomTileContextMenu.scss
+++ b/res/css/views/context_menus/_RoomTileContextMenu.scss
@@ -48,7 +48,7 @@ limitations under the License.
 .mx_RoomTileContextMenu_tag_icon {
     padding-right: 8px;
     padding-left: 4px;
-    display: inline-block
+    display: inline-block;
 }
 
 .mx_RoomTileContextMenu_tag_icon_set {
diff --git a/res/css/views/context_menus/_TagTileContextMenu.scss b/res/css/views/context_menus/_TagTileContextMenu.scss
index 799151b198..46b279ce2d 100644
--- a/res/css/views/context_menus/_TagTileContextMenu.scss
+++ b/res/css/views/context_menus/_TagTileContextMenu.scss
@@ -33,7 +33,7 @@ limitations under the License.
 .mx_TagTileContextMenu_item_icon {
     padding-right: 8px;
     padding-left: 4px;
-    display: inline-block
+    display: inline-block;
 }
 
 .mx_TagTileContextMenu_separator {
diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss
index 113da004b8..9d258bcf55 100644
--- a/res/css/views/context_menus/_TopLeftMenu.scss
+++ b/res/css/views/context_menus/_TopLeftMenu.scss
@@ -89,5 +89,4 @@ limitations under the License.
             background-color: $menu-selected-color;
         }
     }
-
 }
diff --git a/res/css/views/dialogs/_AddressPickerDialog.scss b/res/css/views/dialogs/_AddressPickerDialog.scss
index b4d4a74cb5..2771ac4052 100644
--- a/res/css/views/dialogs/_AddressPickerDialog.scss
+++ b/res/css/views/dialogs/_AddressPickerDialog.scss
@@ -17,8 +17,7 @@ limitations under the License.
 
 /* Using a textarea for this element, to circumvent autofill */
 .mx_AddressPickerDialog_input,
-.mx_AddressPickerDialog_input:focus
-{
+.mx_AddressPickerDialog_input:focus {
     height: 26px;
     font-size: 14px;
     font-family: $font-family;
@@ -36,7 +35,7 @@ limitations under the License.
 }
 
 .mx_AddressPickerDialog .mx_Dialog_content {
-    min-height: 50px
+    min-height: 50px;
 }
 
 .mx_AddressPickerDialog_inputContainer {
diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss
index c63a1b8e7d..9d58c999c3 100644
--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@@ -45,13 +45,11 @@ limitations under the License.
     border-bottom: 1px solid #e5e5e5;
 }
 
-.mx_DevTools_inputRow
-{
+.mx_DevTools_inputRow {
     display: table-row;
 }
 
-.mx_DevTools_inputLabelCell
-{
+.mx_DevTools_inputLabelCell {
     display: table-cell;
     font-weight: bold;
     padding-right: 24px;
@@ -62,8 +60,7 @@ limitations under the License.
     width: 240px;
 }
 
-.mx_DevTools_inputCell input
-{
+.mx_DevTools_inputCell input {
     display: inline-block;
     border: 0;
     border-bottom: 1px solid $input-underline-color;
@@ -95,11 +92,11 @@ limitations under the License.
 
     // add default box-sizing for this scope
     &,
-    &:after,
-    &:before,
+    &::after,
+    &::before,
     & *,
-    & *:after,
-    & *:before,
+    & *::after,
+    & *::before,
     & + .mx_DevTools_tgl-btn {
         box-sizing: border-box;
         &::selection {
@@ -115,8 +112,8 @@ limitations under the License.
         position: relative;
         cursor: pointer;
         user-select: none;
-        &:after,
-        &:before {
+        &::after,
+        &::before {
             position: relative;
             display: block;
             content: "";
@@ -124,16 +121,16 @@ limitations under the License.
             height: 100%;
         }
 
-        &:after {
+        &::after {
             left: 0;
         }
 
-        &:before {
+        &::before {
             display: none;
         }
     }
 
-    &:checked + .mx_DevTools_tgl-btn:after {
+    &:checked + .mx_DevTools_tgl-btn::after {
         left: 50%;
     }
 }
@@ -144,8 +141,8 @@ limitations under the License.
         transition: all .2s ease;
         font-family: sans-serif;
         perspective: 100px;
-        &:after,
-        &:before {
+        &::after,
+        &::before {
             display: inline-block;
             transition: all .4s ease;
             width: 100%;
@@ -160,34 +157,34 @@ limitations under the License.
             border-radius: 4px;
         }
 
-        &:after {
+        &::after {
             content: attr(data-tg-on);
-            background: #02C66F;
+            background: #02c66f;
             transform: rotateY(-180deg);
         }
 
-        &:before {
-            background: #FF3A19;
+        &::before {
+            background: #ff3a19;
             content: attr(data-tg-off);
         }
 
-        &:active:before {
+        &:active::before {
             transform: rotateY(-20deg);
         }
     }
 
     &:checked + .mx_DevTools_tgl-btn {
-        &:before {
+        &::before {
             transform: rotateY(180deg);
         }
 
-        &:after {
+        &::after {
             transform: rotateY(0);
             left: 0;
-            background: #7FC6A6;
+            background: #7fc6a6;
         }
 
-        &:active:after {
+        &:active::after {
             transform: rotateY(20deg);
         }
     }
diff --git a/res/css/views/dialogs/_GroupAddressPicker.scss b/res/css/views/dialogs/_GroupAddressPicker.scss
index d6c961c0ec..20a7cc1047 100644
--- a/res/css/views/dialogs/_GroupAddressPicker.scss
+++ b/res/css/views/dialogs/_GroupAddressPicker.scss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_GroupAddressPicker_checkboxContainer{
+.mx_GroupAddressPicker_checkboxContainer {
     margin-top: 10px;
     display: flex;
 }
diff --git a/res/css/views/dialogs/_RoomSettingsDialog.scss b/res/css/views/dialogs/_RoomSettingsDialog.scss
index 60b35528a1..723eb237ad 100644
--- a/res/css/views/dialogs/_RoomSettingsDialog.scss
+++ b/res/css/views/dialogs/_RoomSettingsDialog.scss
@@ -17,19 +17,19 @@ limitations under the License.
 // ICONS
 // ==========================================================
 
-.mx_RoomSettingsDialog_settingsIcon:before {
+.mx_RoomSettingsDialog_settingsIcon::before {
     mask-image: url('$(res)/img/feather-customised/settings.svg');
 }
 
-.mx_RoomSettingsDialog_securityIcon:before {
+.mx_RoomSettingsDialog_securityIcon::before {
     mask-image: url('$(res)/img/feather-customised/lock.svg');
 }
 
-.mx_RoomSettingsDialog_rolesIcon:before {
+.mx_RoomSettingsDialog_rolesIcon::before {
     mask-image: url('$(res)/img/feather-customised/users-sm.svg');
 }
 
-.mx_RoomSettingsDialog_warningIcon:before {
+.mx_RoomSettingsDialog_warningIcon::before {
     mask-image: url('$(res)/img/feather-customised/warning-triangle.svg');
 }
 
diff --git a/res/css/views/dialogs/_UserSettingsDialog.scss b/res/css/views/dialogs/_UserSettingsDialog.scss
index 9665ee06b4..2a046ff501 100644
--- a/res/css/views/dialogs/_UserSettingsDialog.scss
+++ b/res/css/views/dialogs/_UserSettingsDialog.scss
@@ -17,34 +17,34 @@ limitations under the License.
 // ICONS
 // ==========================================================
 
-.mx_UserSettingsDialog_settingsIcon:before {
+.mx_UserSettingsDialog_settingsIcon::before {
     mask-image: url('$(res)/img/feather-customised/settings.svg');
 }
 
-.mx_UserSettingsDialog_voiceIcon:before {
+.mx_UserSettingsDialog_voiceIcon::before {
     mask-image: url('$(res)/img/feather-customised/phone.svg');
 }
 
-.mx_UserSettingsDialog_bellIcon:before {
+.mx_UserSettingsDialog_bellIcon::before {
     mask-image: url('$(res)/img/feather-customised/notifications.svg');
 }
 
-.mx_UserSettingsDialog_preferencesIcon:before {
+.mx_UserSettingsDialog_preferencesIcon::before {
     mask-image: url('$(res)/img/feather-customised/sliders.svg');
 }
 
-.mx_UserSettingsDialog_securityIcon:before {
+.mx_UserSettingsDialog_securityIcon::before {
     mask-image: url('$(res)/img/feather-customised/lock.svg');
 }
 
-.mx_UserSettingsDialog_helpIcon:before {
+.mx_UserSettingsDialog_helpIcon::before {
     mask-image: url('$(res)/img/feather-customised/help-circle.svg');
 }
 
-.mx_UserSettingsDialog_labsIcon:before {
+.mx_UserSettingsDialog_labsIcon::before {
     mask-image: url('$(res)/img/feather-customised/flag.svg');
 }
 
-.mx_UserSettingsDialog_flairIcon:before {
+.mx_UserSettingsDialog_flairIcon::before {
     mask-image: url('$(res)/img/feather-customised/flair.svg');
 }
diff --git a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
index 3f4c8d2da4..7ba5f01a76 100644
--- a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
+++ b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
@@ -20,8 +20,8 @@ limitations under the License.
 }
 
 .mx_CreateKeyBackupDialog_primaryContainer {
-    /*FIXME: plinth colour in new theme(s). background-color: $accent-color;*/
-    padding: 20px
+    /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
+    padding: 20px;
 }
 
 .mx_CreateKeyBackupDialog_primaryContainer::after {
diff --git a/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss b/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss
index f905516bd4..05ce158413 100644
--- a/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss
+++ b/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss
@@ -23,7 +23,7 @@ limitations under the License.
     padding-left: 45px;
     padding-bottom: 10px;
 
-    &:before {
+    &::before {
         mask: url("$(res)/img/e2e/lock-warning-filled.svg");
         mask-repeat: no-repeat;
         background-color: $primary-fg-color;
diff --git a/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss b/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
index 612c921038..415a2021cc 100644
--- a/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
+++ b/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
@@ -13,10 +13,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
- 
+
 .mx_RestoreKeyBackupDialog_primaryContainer {
-    /*FIXME: plinth colour in new theme(s). background-color: $accent-color;*/
-    padding: 20px
+    /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
+    padding: 20px;
 }
 
 .mx_RestoreKeyBackupDialog_passPhraseInput,
diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss
index 8d5fa5dc7b..d402f6c48f 100644
--- a/res/css/views/directory/_NetworkDropdown.scss
+++ b/res/css/views/directory/_NetworkDropdown.scss
@@ -36,7 +36,7 @@ limitations under the License.
     position: absolute;
     right: 10px;
     top: 16px;
-    width: 0
+    width: 0;
 }
 
 .mx_NetworkDropdown_networkoption {
diff --git a/res/css/views/elements/_AddressSelector.scss b/res/css/views/elements/_AddressSelector.scss
index 9871a7e881..d60aeeff62 100644
--- a/res/css/views/elements/_AddressSelector.scss
+++ b/res/css/views/elements/_AddressSelector.scss
@@ -20,9 +20,9 @@ limitations under the License.
     width: 485px;
     max-height: 116px;
     overflow-y: auto;
-	border-radius: 3px;
-	background-color: $primary-bg-color;
-	border: solid 1px $accent-color;
+    border-radius: 3px;
+    background-color: $primary-bg-color;
+    border: solid 1px $accent-color;
     cursor: pointer;
 }
 
diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 88cf2ce8ba..67b0d6d7df 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -128,8 +128,8 @@ limitations under the License.
 }
 
 .mx_ImageView_link {
-    color: $lightbox-fg-color ! important;
-    text-decoration: none ! important;
+    color: $lightbox-fg-color !important;
+    text-decoration: none !important;
 }
 
 .mx_ImageView_button {
diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss
index cf2c066589..262d78d880 100644
--- a/res/css/views/elements/_RichText.scss
+++ b/res/css/views/elements/_RichText.scss
@@ -33,7 +33,7 @@
 }
 
 .mx_UserPill_selected {
-    background-color: $accent-color ! important;
+    background-color: $accent-color !important;
 }
 
 /* More specific to override `.markdown-body a` color */
@@ -79,7 +79,7 @@
 
 .mx_Markdown_ITALIC {
     font-style: italic;
-/*
+    /*
     // interestingly, *not* using the explicit italic font
     // variant seems yield better results.
 
@@ -87,7 +87,7 @@
     // https://github.com/google/fonts/issues/1726
     transform: skewX(-14deg);
     display: inline-block;
-*/
+    */
 }
 
 .mx_Markdown_CODE {
diff --git a/res/css/views/elements/_Spinner.scss b/res/css/views/elements/_Spinner.scss
index aea5737918..01b4f23c2c 100644
--- a/res/css/views/elements/_Spinner.scss
+++ b/res/css/views/elements/_Spinner.scss
@@ -25,4 +25,4 @@ limitations under the License.
 
 .mx_MatrixChat_middlePanel .mx_Spinner {
     height: auto;
-}
\ No newline at end of file
+}
diff --git a/res/css/views/elements/_TextWithTooltip.scss b/res/css/views/elements/_TextWithTooltip.scss
index 5b34e7a3be..a7f9cb7483 100644
--- a/res/css/views/elements/_TextWithTooltip.scss
+++ b/res/css/views/elements/_TextWithTooltip.scss
@@ -16,4 +16,4 @@ limitations under the License.
 
 .mx_TextWithTooltip_tooltip {
     display: none;
-}
\ No newline at end of file
+}
diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss
index 3a6b6fb936..8f6204c942 100644
--- a/res/css/views/elements/_Tooltip.scss
+++ b/res/css/views/elements/_Tooltip.scss
@@ -36,8 +36,8 @@ limitations under the License.
     border-bottom: 7px solid transparent;
 }
 
-.mx_Tooltip_chevron:after {
-    content:'';
+.mx_Tooltip_chevron::after {
+    content: '';
     width: 0;
     height: 0;
     border-top: 6px solid transparent;
diff --git a/res/css/views/globals/_MatrixToolbar.scss b/res/css/views/globals/_MatrixToolbar.scss
index 1791d619ae..5fdf572f99 100644
--- a/res/css/views/globals/_MatrixToolbar.scss
+++ b/res/css/views/globals/_MatrixToolbar.scss
@@ -44,10 +44,9 @@ limitations under the License.
     flex: 1;
 }
 
-.mx_MatrixToolbar_link
-{
-    color: $accent-fg-color ! important;
-    text-decoration: underline ! important;
+.mx_MatrixToolbar_link {
+    color: $accent-fg-color !important;
+    text-decoration: underline !important;
     cursor: pointer;
 }
 
diff --git a/res/css/views/messages/_RoomAvatarEvent.scss b/res/css/views/messages/_RoomAvatarEvent.scss
index 9adce42eef..3db18c1d10 100644
--- a/res/css/views/messages/_RoomAvatarEvent.scss
+++ b/res/css/views/messages/_RoomAvatarEvent.scss
@@ -23,4 +23,4 @@ limitations under the License.
     display: inline;
     position: relative;
     top: 5px;
-}
\ No newline at end of file
+}
diff --git a/res/css/views/room_settings/_ColorSettings.scss b/res/css/views/room_settings/_ColorSettings.scss
index 39b087653d..fc6a4443ad 100644
--- a/res/css/views/room_settings/_ColorSettings.scss
+++ b/res/css/views/room_settings/_ColorSettings.scss
@@ -28,7 +28,7 @@ limitations under the License.
     position: absolute;
     left: 10px;
     top: 4px;
-    cursor: default ! important;
+    cursor: default !important;
 }
 
 .mx_ColorSettings_roomColorPrimary {
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index db38eebfca..09fdc28e78 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -198,7 +198,7 @@ $AppsDrawerBodyHeight: 273px;
     border-radius: 2px;
 }
 
-.mx_AppTileBody{
+.mx_AppTileBody {
     height: $AppsDrawerBodyHeight;
     width: 100%;
     overflow: hidden;
@@ -234,7 +234,7 @@ $AppsDrawerBodyHeight: 273px;
     background-color: $lightbox-bg-color;
     border: 1px solid rgba(0, 0, 0, 0);
     width: 200px;
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     transition: 0.3s;
     border-radius: 3px;
     margin: 5px;
@@ -248,7 +248,7 @@ $AppsDrawerBodyHeight: 273px;
 
 .mx_AppIconTile:hover {
     border: 1px solid $accent-color;
-    box-shadow: 0 0 10px 5px rgba(200,200,200,0.5);
+    box-shadow: 0 0 10px 5px rgba(200, 200, 200, 0.5);
 }
 
 .mx_AppIconTile_content {
@@ -271,8 +271,8 @@ $AppsDrawerBodyHeight: 273px;
 .mx_AppIconTile_image {
     padding: 10px;
     width: 75%;
-    max-width:100px;
-    max-height:100px;
+    max-width: 100px;
+    max-height: 100px;
     width: auto;
     height: auto;
 }
@@ -361,11 +361,11 @@ form.mx_Custom_Widget_Form div {
 }
 
 @keyframes mx_AppLoading_spinner_fadeIn_animation {
-    from { opacity: 0 }
-    to { opacity: 1 }
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
 
 
 .mx_AppLoading iframe {
-  display: none;
+    display: none;
 }
diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss
index 3bc0ea25a4..2d57a1783a 100644
--- a/res/css/views/rooms/_Autocomplete.scss
+++ b/res/css/views/rooms/_Autocomplete.scss
@@ -8,7 +8,7 @@
     border-bottom: none;
     border-radius: 4px 4px 0 0;
     max-height: 50vh;
-    overflow: auto
+    overflow: auto;
 }
 
 .mx_Autocomplete_ProviderSection {
@@ -32,7 +32,7 @@
 }
 
 .mx_Autocomplete_Completion_block * {
-     margin: 0 3px;
+    margin: 0 3px;
 }
 
 .mx_Autocomplete_Completion_pill {
@@ -54,7 +54,7 @@
     .mx_Autocomplete_Completion_title,
     .mx_Autocomplete_Completion_subtitle,
     .mx_Autocomplete_Completion_description {
-        /* Ellipsis for long names/subtitles/descriptions*/
+        /* Ellipsis for long names/subtitles/descriptions */
         max-width: 150px;
         white-space: nowrap;
         overflow: hidden;
diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss
index 44528a5624..6b2f0d8567 100644
--- a/res/css/views/rooms/_EntityTile.scss
+++ b/res/css/views/rooms/_EntityTile.scss
@@ -102,20 +102,17 @@ limitations under the License.
 .mx_EntityTile_unavailable .mx_EntityTile_avatar,
 .mx_EntityTile_unavailable .mx_EntityTile_name,
 .mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
-.mx_EntityTile_offline_beenactive .mx_EntityTile_name
-{
+.mx_EntityTile_offline_beenactive .mx_EntityTile_name {
     opacity: 0.5;
 }
 
 .mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
-.mx_EntityTile_offline_neveractive .mx_EntityTile_name
-{
+.mx_EntityTile_offline_neveractive .mx_EntityTile_name {
     opacity: 0.25;
 }
 
 .mx_EntityTile_unknown .mx_EntityTile_avatar,
-.mx_EntityTile_unknown .mx_EntityTile_name
-{
+.mx_EntityTile_unknown .mx_EntityTile_name {
     opacity: 0.25;
 }
 
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 9f14cf1b00..ba667a272b 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -122,8 +122,8 @@ limitations under the License.
 
 /* HACK to override line-height which is already marked important elsewhere */
 .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
-    font-size: 48px ! important;
-    line-height: 57px ! important;
+    font-size: 48px !important;
+    line-height: 57px !important;
 }
 
 /* this is used for the tile for the event which is selected via the URL.
@@ -136,8 +136,7 @@ limitations under the License.
 }
 
 .mx_EventTile:hover .mx_EventTile_line,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line
-{
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line {
     background-color: $event-selected-color;
 }
 
@@ -156,7 +155,7 @@ limitations under the License.
 }
 
 .mx_EventTile_encrypting {
-    color: $event-encrypting-color ! important;
+    color: $event-encrypting-color !important;
 }
 
 .mx_EventTile_sending {
@@ -189,7 +188,8 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     height: 22px;
     width: 250px;
     border-radius: 11px;
-    background: repeating-linear-gradient(
+    background:
+ repeating-linear-gradient(
         -45deg,
         var(--lozenge-color),
         var(--lozenge-color) 3px,
@@ -200,8 +200,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 }
 
 .mx_EventTile_highlight,
-.mx_EventTile_highlight .markdown-body
-{
+.mx_EventTile_highlight .markdown-body {
     color: $event-highlight-fg-color;
 
     .mx_EventTile_line {
@@ -418,9 +417,9 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 /* Various markdown overrides */
 
 .mx_EventTile_content .markdown-body {
-    font-family: inherit ! important;
-    white-space: normal ! important;
-    line-height: inherit ! important;
+    font-family: inherit !important;
+    white-space: normal !important;
+    line-height: inherit !important;
     color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
     font-size: 14px;
 }
@@ -442,7 +441,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 .mx_EventTile_content .markdown-body {
     pre, code {
-        font-family: $monospace-font-family ! important;
+        font-family: $monospace-font-family !important;
         // deliberate constants as we're behind an invert filter
         color: #333;
     }
@@ -470,13 +469,11 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     border: 1px solid transparent;
 }
 
-.mx_EventTile:hover .mx_EventTile_body pre
-{
+.mx_EventTile:hover .mx_EventTile_body pre {
     border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
 }
 
-.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton
-{
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
     visibility: visible;
 }
 
@@ -485,19 +482,17 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 .mx_EventTile_content .markdown-body h3,
 .mx_EventTile_content .markdown-body h4,
 .mx_EventTile_content .markdown-body h5,
-.mx_EventTile_content .markdown-body h6
-{
-    font-family: inherit ! important;
+.mx_EventTile_content .markdown-body h6 {
+    font-family: inherit !important;
     color: inherit;
 }
 
 
 /* Make h1 and h2 the same size as h3. */
 .mx_EventTile_content .markdown-body h1,
-.mx_EventTile_content .markdown-body h2
-{
+.mx_EventTile_content .markdown-body h2 {
     font-size: 1.5em;
-    border-bottom: none ! important; // override GFM
+    border-bottom: none !important; // override GFM
 }
 
 .mx_EventTile_content .markdown-body a {
@@ -506,7 +501,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 }
 
 .mx_EventTile_content .markdown-body .hljs {
-    display: inline ! important;
+    display: inline !important;
 }
 
 /*
@@ -595,8 +590,8 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     }
 
     .mx_EventTile_content .markdown-body {
-      p, ul, ol, dl, blockquote, pre, table {
-        margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
-      }
+        p, ul, ol, dl, blockquote, pre, table {
+            margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
+        }
     }
 }
diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.scss
index 968139671f..7f458092fb 100644
--- a/res/css/views/rooms/_JumpToBottomButton.scss
+++ b/res/css/views/rooms/_JumpToBottomButton.scss
@@ -55,7 +55,7 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_JumpToBottomButton_scrollDown:before {
+.mx_JumpToBottomButton_scrollDown::before {
     content: "";
     position: absolute;
     top: 0;
diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss
index bb38c41581..4a0a5fada7 100644
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/res/css/views/rooms/_MemberInfo.scss
@@ -126,7 +126,7 @@ limitations under the License.
 }
 
 .mx_MemberInfo_createRoom_label {
-    width: initial ! important;
+    width: initial !important;
     cursor: pointer;
 }
 
diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
index 0b9c7e2368..6e4465583c 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@@ -88,7 +88,7 @@ limitations under the License.
 }
 
 .mx_MemberList_invite.mx_AccessibleButton_disabled {
-    background-color: $greyed-fg-color;;
+    background-color: $greyed-fg-color;
     cursor: not-allowed;
 }
 
@@ -97,5 +97,4 @@ limitations under the License.
     background-repeat: no-repeat;
     background-position: center left;
     padding-left: 25px;
-
 }
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 708c29bb3e..6e17251cb0 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -122,16 +122,15 @@ limitations under the License.
 // FIXME: rather unpleasant hack to get rid of <p/> margins.
 // really we should be mixing in markdown-body from gfm.css instead
 .mx_MessageComposer_editor > :first-child {
-    margin-top: 0 ! important;
+    margin-top: 0 !important;
 }
 .mx_MessageComposer_editor > :last-child {
-    margin-bottom: 0 ! important;
+    margin-bottom: 0 !important;
 }
 
-@keyframes visualbell
-{
-    from { background-color: #faa }
-    to { background-color: $primary-bg-color }
+@keyframes visualbell {
+    from { background-color: #faa; }
+    to { background-color: $primary-bg-color; }
 }
 
 .mx_MessageComposer_input_error {
diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.scss
index f7417272b6..695d3fe006 100644
--- a/res/css/views/rooms/_PinnedEventTile.scss
+++ b/res/css/views/rooms/_PinnedEventTile.scss
@@ -74,4 +74,4 @@ limitations under the License.
     position: relative;
     top: 0;
     left: 0;
-}
\ No newline at end of file
+}
diff --git a/res/css/views/rooms/_PresenceLabel.scss b/res/css/views/rooms/_PresenceLabel.scss
index 682c849cee..26ed1aa6a3 100644
--- a/res/css/views/rooms/_PresenceLabel.scss
+++ b/res/css/views/rooms/_PresenceLabel.scss
@@ -17,4 +17,4 @@ limitations under the License.
 .mx_PresenceLabel {
     font-size: 11px;
     opacity: 0.5;
-}
\ No newline at end of file
+}
diff --git a/res/css/views/rooms/_ReplyPreview.scss b/res/css/views/rooms/_ReplyPreview.scss
index 5bf4adff27..4dc4cb2c40 100644
--- a/res/css/views/rooms/_ReplyPreview.scss
+++ b/res/css/views/rooms/_ReplyPreview.scss
@@ -24,7 +24,7 @@ limitations under the License.
     border-bottom: none;
     border-radius: 4px 4px 0 0;
     max-height: 50vh;
-    overflow: auto
+    overflow: auto;
 }
 
 .mx_ReplyPreview_section {
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index e7589f0e90..0ade689054 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -107,7 +107,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_settingsHint {
-    color: $settings-grey-fg-color ! important;
+    color: $settings-grey-fg-color !important;
 }
 
 .mx_RoomHeader_searchStatus {
@@ -134,17 +134,17 @@ limitations under the License.
 }
 
 .mx_RoomHeader_placeholder {
-    color: $settings-grey-fg-color ! important;
+    color: $settings-grey-fg-color !important;
 }
 
 .mx_RoomHeader_editable {
-    border-bottom: 1px solid $strong-input-border-color ! important;
+    border-bottom: 1px solid $strong-input-border-color !important;
     min-width: 150px;
     cursor: text;
 }
 
 .mx_RoomHeader_editable:focus {
-    border-bottom: 1px solid $accent-color ! important;
+    border-bottom: 1px solid $accent-color !important;
     outline: none;
     box-shadow: none;
 }
diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index 886f10dc4c..b51d720e4d 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -32,7 +32,7 @@ limitations under the License.
 }
 
 /* hide resize handles next to collapsed / empty sublists */
-.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle  {
+.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle {
     display: none;
 }
 
diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss
index 6ac5546f78..c7d03e3523 100644
--- a/res/css/views/rooms/_RoomPreviewBar.scss
+++ b/res/css/views/rooms/_RoomPreviewBar.scss
@@ -80,7 +80,7 @@ limitations under the License.
         flex-direction: row;
         padding: 3px 8px;
 
-        &>* {
+        & > * {
             margin-left: 12px;
         }
     }
@@ -91,7 +91,7 @@ limitations under the License.
         display: flex;
         flex-direction: column;
 
-        &>* {
+        & > * {
             margin: 4px;
         }
     }
@@ -109,7 +109,7 @@ limitations under the License.
     .mx_RoomPreviewBar_message {
         flex-direction: column;
 
-        &>* {
+        & > * {
             margin: 5px 0 20px 0;
         }
     }
@@ -120,7 +120,7 @@ limitations under the License.
             padding: 7px 50px;//extra wide
         }
 
-        &>* {
+        & > * {
             margin-top: 12px;
         }
     }
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index a1fc9bdca1..c13b988b8e 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -150,8 +150,7 @@ limitations under the License.
 }
 
 .mx_RoomTile_highlight .mx_RoomTile_badge,
-.mx_RoomTile_badge.mx_RoomTile_badgeRed
-{
+.mx_RoomTile_badge.mx_RoomTile_badgeRed {
     background-color: $warning-color;
 }
 
diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss
index a4b7a6aa51..77f19dac1c 100644
--- a/res/css/views/rooms/_TopUnreadMessagesBar.scss
+++ b/res/css/views/rooms/_TopUnreadMessagesBar.scss
@@ -24,7 +24,7 @@ limitations under the License.
     width: 38px;
 }
 
-.mx_TopUnreadMessagesBar:after {
+.mx_TopUnreadMessagesBar::after {
     content: "·";
     position: absolute;
     top: -8px;
@@ -49,7 +49,7 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_TopUnreadMessagesBar_scrollUp:before {
+.mx_TopUnreadMessagesBar_scrollUp::before {
     content: "";
     position: absolute;
     width: 38px;
diff --git a/res/css/views/settings/_DevicesPanel.scss b/res/css/views/settings/_DevicesPanel.scss
index e4856531d9..4113fc4ebc 100644
--- a/res/css/views/settings/_DevicesPanel.scss
+++ b/res/css/views/settings/_DevicesPanel.scss
@@ -48,4 +48,4 @@ limitations under the License.
 
 .mx_DevicesPanel_myDevice {
     font-weight: bold;
-}
\ No newline at end of file
+}
diff --git a/res/css/views/settings/_IntegrationsManager.scss b/res/css/views/settings/_IntegrationsManager.scss
index c5769d3645..8b51eb272e 100644
--- a/res/css/views/settings/_IntegrationsManager.scss
+++ b/res/css/views/settings/_IntegrationsManager.scss
@@ -41,4 +41,4 @@ limitations under the License.
 
 .mx_IntegrationsManager_error h3 {
     color: $warning-color;
-}
\ No newline at end of file
+}
diff --git a/res/css/views/settings/_Notifications.scss b/res/css/views/settings/_Notifications.scss
index 773ea055df..e6d09b9a2a 100644
--- a/res/css/views/settings/_Notifications.scss
+++ b/res/css/views/settings/_Notifications.scss
@@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_UserNotifSettings_tableRow
-{
+.mx_UserNotifSettings_tableRow {
     display: table-row;
 }
 
@@ -26,8 +25,7 @@ limitations under the License.
     width: 16px;
 }
 
-.mx_UserNotifSettings_labelCell
-{
+.mx_UserNotifSettings_labelCell {
     padding-bottom: 8px;
     width: 400px;
     display: table-cell;
@@ -93,4 +91,4 @@ limitations under the License.
     color: white;
     border: $warning-color;
     background-color: $warning-color;
-}
\ No newline at end of file
+}
diff --git a/res/css/views/settings/_ProfileSettings.scss b/res/css/views/settings/_ProfileSettings.scss
index a972162618..3e97a0ff6d 100644
--- a/res/css/views/settings/_ProfileSettings.scss
+++ b/res/css/views/settings/_ProfileSettings.scss
@@ -105,7 +105,7 @@ limitations under the License.
     margin: auto;
 }
 
-.mx_ProfileSettings_avatarOverlayImg:before {
+.mx_ProfileSettings_avatarOverlayImg::before {
     background-color: $settings-profile-overlay-placeholder-fg-color;
     mask: url("$(res)/img/feather-customised/upload.svg");
     mask-repeat: no-repeat;
@@ -119,7 +119,7 @@ limitations under the License.
     right: 0;
 }
 
-.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg:before {
+.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg::before {
     background-color: $settings-profile-overlay-fg-color !important;
 }
 
diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss
index def28bfbd2..7755ee6053 100644
--- a/res/css/views/settings/tabs/_SettingsTab.scss
+++ b/res/css/views/settings/tabs/_SettingsTab.scss
@@ -75,4 +75,4 @@ limitations under the License.
 
 .mx_SettingsTab a {
     color: $accent-color-alt;
-}
\ No newline at end of file
+}
diff --git a/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.scss
index 8bfc792dc3..5d0a8ed142 100644
--- a/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.scss
+++ b/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.scss
@@ -21,4 +21,4 @@ limitations under the License.
 .mx_RolesRoomSettingsTab_unbanBtn {
     margin-right: 10px;
     margin-bottom: 5px;
-}
\ No newline at end of file
+}
diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
index dfd046e672..b5a57dfefb 100644
--- a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
+++ b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
@@ -31,4 +31,4 @@ limitations under the License.
 
 .mx_SecurityRoomSettingsTab_encryptionSection {
     margin-bottom: 25px;
-}
\ No newline at end of file
+}
diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
index fa0d0edeb7..109edfff81 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
@@ -21,4 +21,4 @@ limitations under the License.
 
 .mx_HelpUserSettingsTab span.mx_AccessibleButton {
     word-break: break-word;
-}
\ No newline at end of file
+}
diff --git a/res/css/views/settings/tabs/user/_NotificationUserSettingsTab.scss b/res/css/views/settings/tabs/user/_NotificationUserSettingsTab.scss
index 3cebd2958e..b57c46a1d9 100644
--- a/res/css/views/settings/tabs/user/_NotificationUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_NotificationUserSettingsTab.scss
@@ -16,4 +16,4 @@ limitations under the License.
 
 .mx_NotificationUserSettingsTab .mx_SettingsTab_heading {
     margin-bottom: 10px; // Give some spacing between the title and the first elements
-}
\ No newline at end of file
+}
diff --git a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss
index 1c0a4b5864..b5a6693006 100644
--- a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss
@@ -54,4 +54,4 @@ limitations under the License.
 
 .mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
     margin-right: 10px;
-}
\ No newline at end of file
+}
diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index deb89a837c..b01fbf8c66 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -22,4 +22,4 @@ limitations under the License.
     padding: 6px;
     font-weight: bold;
     font-size: 13px;
-}
\ No newline at end of file
+}