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/forum/Composer.less

@@ -3,7 +3,7 @@
 
 .Composer {
   pointer-events: auto;
-  .box-shadow(0 2px 6px @shadow-color);
+  box-shadow: 0 2px 6px @shadow-color;
 
   &.minimized {
     height: 46px;
@@ -221,20 +221,20 @@
     right: 0;
     z-index: @zindex-composer;
     pointer-events: none;
-    .transition(left 0.2s);
+    transition: left 0.2s;
   }
   .Composer {
     border-radius: @border-radius @border-radius 0 0;
     background: fade(@body-bg, 95%);
     position: relative;
     height: 300px;
-    .transition(~"background 0.2s, box-shadow 0.2s");
+    transition: background 0.2s, box-shadow 0.2s;
 
     &.active, &.fullScreen {
       background: @body-bg;
     }
     &.active:not(.fullScreen) {
-      .box-shadow(~"0 0 0 2px @{primary-color}, 0 2px 6px @{shadow-color}");
+      box-shadow: 0 0 0 2px @primary-color, 0 2px 6px @shadow-color;
     }
     &.fullScreen {
       position: fixed;

less/forum/DiscussionPage.less

@@ -79,8 +79,8 @@
     background: @body-bg;
     padding-bottom: 40px;
     border-top: 1px solid @control-bg;
-    .box-shadow(0 6px 6px @shadow-color);
-    .transition(left 0.2s);
+    box-shadow: 0 6px 6px @shadow-color;
+    transition: left 0.2s;
 
     .affix & {
       position: fixed;
@@ -128,7 +128,7 @@
   .DiscussionPage-list {
     .panePinned & {
       left: 0;
-      .transition(none);
+      transition: none;
     }
   }
   // When the pane is pinned, move the other page content inwards

less/forum/NotificationsDropdown.less

@@ -37,7 +37,7 @@
   padding: 2px 4px 3px;
   line-height: 1em;
   border-radius: 10px;
-  .box-shadow(0 0 0 1px @header-bg);
+  box-shadow: 0 0 0 1px @header-bg;
   min-width: 16px;
   height: 16px;
   text-align: center;

less/forum/Post.less

@@ -65,7 +65,7 @@
     top: -10px;
     left: -100px;
     z-index: @zindex-dropdown;
-    .transition(~"opacity 0.2s, transform 0.2s");
+    transition: opacity 0.2s, transform 0.2s;
     transform: scale(0.95);
     transform-origin: left top;
     opacity: 0;
@@ -297,7 +297,7 @@
   float: right;
   position: relative;
 
-  .transition(opacity 0.2s);
+  transition: opacity 0.2s;
 
   .EventPost &, .Post--hidden:not(.revealContent) & {
     margin-top: -27px;

less/forum/PostStream.less

@@ -22,14 +22,8 @@
   50% {opacity: 1}
   100% {opacity: 0.5}
 }
-@-webkit-keyframes blink {
-  0% {opacity: 0.5}
-  50% {opacity: 1}
-  100% {opacity: 0.5}
-}
 .LoadingPost {
-  .animation(blink 1s linear);
-  .animation-iteration-count(infinite);
+  animation: blink 1s linear infinite;
 }
 .fakeText {
   display: inline-block;
@@ -63,46 +57,22 @@
   }
 }
 
-// .item.highlight .post {
-//   &:before {
-//     content: "";
-//     position: absolute;
-//     left: -30px;
-//     top: -5px;
-//     bottom: -5px;
-//     width: 5px;
-//     border-radius: @border-radius;
-//     background: @fl-primary-color;
-//   }
-// }
-@-webkit-keyframes pulsate {
-  0% {-webkit-transform: scale(1)}
-  50% {-webkit-transform: scale(1.02)}
-  100% {-webkit-transform: scale(1)}
-}
 @keyframes pulsate {
   0% {transform: scale(1)}
   50% {transform: scale(1.02)}
   100% {transform: scale(1)}
 }
 .pulsate {
-  .animation(pulsate 1s ease-in-out);
-  .animation-iteration-count(infinite);
+  animation: pulsate 1s ease-in-out infinite;
 }
 .flash {
-  .animation(pulsate 0.2s ease-in-out);
-  .animation-iteration-count(1);
+  animation: pulsate 0.2s ease-in-out;
 }
 
-@-webkit-keyframes fadeIn {
-  0% {opacity: 0}
-  100% {opacity: 1}
-}
 @keyframes fadeIn {
   0% {opacity: 0}
   100% {opacity: 1}
 }
 .fadeIn {
-  .animation(fadeIn 0.4s ease-in-out);
-  .animation-iteration-count(1);
+  animation: fadeIn 0.4s ease-in-out;
 }

less/forum/SignUpModal.less

@@ -1,48 +0,0 @@
-.SignUpModal-welcome {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: @border-radius;
-  text-align: center;
-  color: #fff;
-  font-size: 14px;
-
-  .light-contents();
-
-  .Avatar {
-    .Avatar--size(96px);
-    border: 4px solid @body-bg;
-    .box-shadow(0 2px 6px @shadow-color);
-  }
-  h3, p {
-    margin-bottom: 25px;
-  }
-  .Button {
-    font-size: 15px;
-    height: 50px;
-    padding: 15px 20px;
-  }
-  .darkenBackground {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-  }
-  .container {
-    width: auto !important;
-    padding: 50px 30px !important;
-    position: relative;
-  }
-}
-.SignUpModal--success .Modal-close .Button {
-  color: #fff;
-}
-
-@media @phone {
-  .SignUpModal-welcome .container {
-    padding-top: 56px + 60px;
-  }
-}

less/forum/Slidable.less

@@ -23,7 +23,7 @@
       color: #fff !important;
       border: 0;
       border-radius: 0;
-      .box-shadow(none);
+      box-shadow: none;
       padding: 20px 0;
       text-align: right;
 
@@ -40,14 +40,14 @@
       left: unset;
     }
     .Slidable-content {
-      .transition(~"box-shadow 0.2s, border-radius 0.2s");
+      transition: box-shadow 0.2s, border-radius 0.2s;
 
       .sliding& {
         position: relative;
         background: @control-bg;
         z-index: 2;
         border-radius: 2px;
-        .box-shadow(0 2px 6px @shadow-color);
+        box-shadow: 0 2px 6px @shadow-color;
       }
     }
   }

less/forum/UserCard.less

@@ -13,7 +13,7 @@
 }
 .UserCard--popover {
   width: 500px;
-  .box-shadow(0 2px 6px @shadow-color);
+  box-shadow: 0 2px 6px @shadow-color;
 
   &, .darkenBackground {
     border-radius: @border-radius;
@@ -64,7 +64,7 @@
   .Avatar {
     .Avatar--size(96px);
     border: 4px solid #fff;
-    .box-shadow(0 2px 6px @shadow-color);
+    box-shadow: 0 2px 6px @shadow-color;
 
     @media @phone {
       .Avatar--size(64px);