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/common/mixins/header-background.less

@@ -6,7 +6,7 @@
   right: 0;
   z-index: @zindex-header;
   border-bottom: 1px solid @control-bg;
-  .transition(~"box-shadow 0.2s, -webkit-transform 0.2s");
+  transition: box-shadow 0.2s, transform 0.2s;
 
   @media @phone {
     height: @header-height-phone;

less/common/mixins/vendor-prefixes.less

@@ -6,27 +6,34 @@
 
 // Animations
 // These remain for backwards compatibility with existing styles.
+/** @deprecated */
 .animation(@animation) {
   animation: @animation;
 }
+/** @deprecated */
 .animation-name(@name) {
   animation-name: @name;
 }
 .animation-duration(@duration) {
   animation-duration: @duration;
 }
+/** @deprecated */
 .animation-timing-function(@timing-function) {
   animation-timing-function: @timing-function;
 }
+/** @deprecated */
 .animation-delay(@delay) {
   animation-delay: @delay;
 }
+/** @deprecated */
 .animation-iteration-count(@iteration-count) {
   animation-iteration-count: @iteration-count;
 }
+/** @deprecated */
 .animation-direction(@direction) {
   animation-direction: @direction;
 }
+/** @deprecated */
 .animation-fill-mode(@fill-mode) {
   animation-fill-mode: @fill-mode;
 }
@@ -34,6 +41,7 @@
 // Backface visibility
 // Prevent browsers from flickering when using CSS 3D transforms.
 // Default value is `visible`, but can be changed to `hidden`
+/** @deprecated */
 .backface-visibility(@visibility) {
   // Safari
   -webkit-backface-visibility: @visibility;
@@ -42,17 +50,20 @@
 
 // Drop shadows
 // These remain for backwards compatibility with existing styles.
+/** @deprecated */
 .box-shadow(@shadow) {
   box-shadow: @shadow;
 }
 
 // Box sizing
 // These remain for backwards compatibility with existing styles.
+/** @deprecated */
 .box-sizing(@boxmodel) {
   box-sizing: @boxmodel;
 }
 
 // CSS3 Content Columns
+/** @deprecated */
 .content-columns(@column-count; @column-gap: @grid-gutter-width) {
   // Safari
   -webkit-column-count: @column-count;
@@ -63,6 +74,7 @@
 }
 
 // Optional hyphenation
+/** @deprecated */
 .hyphens(@mode: auto) {
   word-wrap: break-word;
   // Safari
@@ -81,63 +93,82 @@
 
 // Transformations
 // These remain for backwards compatibility with existing styles.
+/** @deprecated */
 .scale(@ratio) {
   transform: scale(@ratio);
 }
+/** @deprecated */
 .scale(@ratioX; @ratioY) {
   transform: scale(@ratioX, @ratioY);
 }
+/** @deprecated */
 .scaleX(@ratio) {
   transform: scaleX(@ratio);
 }
+/** @deprecated */
 .scaleY(@ratio) {
   transform: scaleY(@ratio);
 }
+/** @deprecated */
 .skew(@x; @y) {
   transform: skewX(@x) skewY(@y);
 }
+/** @deprecated */
 .translate(@x; @y) {
   transform: translate(@x, @y);
 }
+/** @deprecated */
 .translate3d(@x; @y; @z) {
   transform: translate3d(@x, @y, @z);
 }
+/** @deprecated */
 .rotate(@degrees) {
   transform: rotate(@degrees);
 }
+/** @deprecated */
 .rotateX(@degrees) {
   transform: rotateX(@degrees);
 }
+/** @deprecated */
 .rotateY(@degrees) {
   transform: rotateY(@degrees);
 }
+/** @deprecated */
 .perspective(@perspective) {
   perspective: @perspective;
 }
+/** @deprecated */
 .perspective-origin(@perspective) {
   perspective-origin: @perspective;
 }
+/** @deprecated */
 .transform-origin(@origin) {
   transform-origin: @origin;
 }
 
 // Transitions
 // These remain for backwards compatibility with existing styles.
+/** @deprecated */
 .transition(@transition) {
   transition: @transition;
 }
+/** @deprecated */
 .transition-property(@transition-property) {
   transition-property: @transition-property;
 }
+/** @deprecated */
 .transition-delay(@transition-delay) {
   transition-delay: @transition-delay;
 }
+/** @deprecated */
 .transition-duration(@transition-duration) {
   transition-duration: @transition-duration;
 }
+/** @deprecated */
 .transition-timing-function(@timing-function) {
   transition-timing-function: @timing-function;
 }
+/** @deprecated */
 .transition-transform(@transition) {
   transition: transform @transition;
 }