CSS Code Housekeeping (#3026)

* refactor: Avatar classes refactor
* refactor: Badge classes refactor
* chore: Remove commented dead code
* chore: Remove SignUpModal dead CSS code
Flarum seem to have had some kind of user display in the sign up modal 
on successful sign up, which no longer exists.

https://github.com/flarum/core/blob/v0.1.0-beta/js/forum/src/components/SignUpModal.js#L111
* chore: Deprecate unneeded vendor mixins
* chore: Normalize property values format
Co-authored-by: David Wheatley <hi@davwheat.dev>
* chore: Remove @-webkit-keyframes
* chore: Combine animation properties
* chore: Avoid `all` for transition
* chore: translate3d is no longer necessary for hardware acceleration
* fix: Lost cursor pointer to normalize update
* chore: Use CSS variables for more things
* chore: Remove unecessary overspecification
Co-authored-by: David Wheatley <hi@davwheat.dev>

less/admin/AdminNav.less

@@ -52,20 +52,12 @@
 }
 
 @media @phone, @tablet {
-  .App-nav .AdminNav {
+  .AdminNav {
     .Dropdown-menu {
       > li {
-        .ExtensionListTitle {
-          color: @muted-color;
-          text-transform: uppercase;
-          margin: 25px 0 10px 15px;
-        }
-
         .ExtensionIcon {
           margin: -2px -29px;
-          width: 25px;
-          height: 25px;
-          font-size: 12.5px;
+          --size: 25px;
 
           .icon {
             margin: 0;
@@ -83,7 +75,7 @@
     top: @header-height;
     height: ~"calc(100vh - @{header-height})";
     width: @admin-pane-width;
-    .box-shadow(0 6px 6px @shadow-color);
+    box-shadow: 0 6px 6px @shadow-color;
     background: @body-bg;
     z-index: @zindex-pane;
     overflow-y: scroll;
@@ -157,18 +149,9 @@
           margin: 0 auto;
         }
 
-        .ExtensionListTitle {
-          color: @muted-color;
-          text-transform: uppercase;
-          margin: 25px 0 8px 15px;
-        }
-
         .ExtensionIcon {
-          width: 25px;
-          height: 25px;
-          font-size: 15px;
+          --size: 25px;
           margin-left: -29px;
-          vertical-align: middle;
         }
       }
     }
@@ -193,6 +176,12 @@
   padding-left: 5px;
 }
 
+.ExtensionListTitle {
+  color: @muted-color;
+  text-transform: uppercase;
+  margin: 25px 0 8px 15px;
+}
+
 .ExtensionListItem-Dot {
   height: 10px;
   width: 10px;

less/admin/ExtensionPage.less

@@ -1,13 +1,5 @@
 .ExtensionPage {
-
   &-header {
-    .ExtensionTitle {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      margin: 20px 0 15px;
-    }
-
     .helpText {
       margin-bottom: 5px;
     }
@@ -79,11 +71,8 @@
     }
 
     .ExtensionIcon {
-      width: 30px;
-      height: 30px;
-      font-size: 15px;
+      --size: 30px;
       margin-left: 0;
-      vertical-align: middle;
     }
 
     &TopItems {
@@ -123,7 +112,6 @@
   }
 
   &-permissions {
-
     .PermissionGrid-removeScope {
       display: none;
     }
@@ -140,6 +128,13 @@
   }
 }
 
+.ExtensionTitle {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 20px 0 15px;
+}
+
 .ExtensionInfo {
   margin-left: auto;
 

less/admin/ExtensionWidget.less

@@ -77,13 +77,14 @@
 }
 
 .ExtensionIcon {
-  width: 90px;
-  height: 90px;
+  --size: 90px;
+  width: var(--size);
+  height: var(--size);
   background: @control-bg;
   color: @control-color;
   border-radius: 6px;
   display: inline-flex;
-  font-size: 45px;
+  font-size: calc(~"var(--size) / 2");
   text-align: center;
   align-items: center;
   justify-content: center;

less/admin/PermissionsPage.less

@@ -114,7 +114,7 @@
       display: none;
     }
     .open .Dropdown-toggle {
-      .box-shadow(none);
+      box-shadow: none;
     }
   }
 }
@@ -128,7 +128,7 @@
   }
   .Badge {
     margin: -3px 3px -3px 0;
-    .box-shadow(none);
+    box-shadow: none;
   }
 }
 .PermissionGrid-section {