Merge commit 'ad95c98054574080ac5d15584b3018d1db836531' into glitch-soc/merge-upstream

Conflicts:
- `package.json`:
  Upstream removed their direct dependency `autoprefixer`, which was textually adjacent
  to glitch-soc-only dependency `atrament`.
  Removed direct dependency on `autoprefixer`.
- `yarn.lock`:
  Upstream removed their direct dependency `autoprefixer`, which was textually adjacent
  to glitch-soc-only dependency `atrament`.
  Removed direct dependency on `autoprefixer`.

app/javascript/styles/mastodon/_mixins.scss

@@ -1,16 +1,3 @@
-@mixin avatar-radius {
-  border-radius: 4px;
-  background: transparent no-repeat;
-  background-position: 50%;
-  background-clip: padding-box;
-}
-
-@mixin avatar-size($size: 48px) {
-  width: $size;
-  height: $size;
-  background-size: $size $size;
-}
-
 @mixin search-input {
   outline: 0;
   box-sizing: border-box;

app/javascript/styles/mastodon/basics.scss

@@ -66,10 +66,6 @@ body {
     }
   }
 
-  &.lighter {
-    background: $ui-base-color;
-  }
-
   &.with-modals {
     overflow-x: hidden;
     overflow-y: scroll;
@@ -109,7 +105,6 @@ body {
   }
 
   &.embed {
-    background: lighten($ui-base-color, 4%);
     margin: 0;
     padding-bottom: 0;
 
@@ -122,15 +117,12 @@ body {
   }
 
   &.admin {
-    background: var(--background-color);
     padding: 0;
   }
 
   &.error {
     position: absolute;
     text-align: center;
-    color: $darker-text-color;
-    background: $ui-base-color;
     width: 100%;
     height: 100%;
     padding: 0;

app/javascript/styles/mastodon/components.scss

@@ -1980,17 +1980,15 @@ body > [data-popper-placement] {
 }
 
 .account__avatar {
-  @include avatar-radius;
-
   display: block;
   position: relative;
-  overflow: hidden;
 
   img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
+    border-radius: 4px;
   }
 
   &-inline {
@@ -2027,6 +2025,29 @@ body > [data-popper-placement] {
       font-size: 15px;
     }
   }
+
+  &__counter {
+    $height: 16px;
+    $h-padding: 5px;
+
+    position: absolute;
+    bottom: -3px;
+    inset-inline-end: -3px;
+    padding-left: $h-padding;
+    padding-right: $h-padding;
+    height: $height;
+    border-radius: $height;
+    min-width: $height - 2 * $h-padding; // to ensure that it is never narrower than a circle
+    line-height: $height + 1px; // to visually center the numbers
+    background-color: $ui-button-background-color;
+    color: $white;
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--background-color);
+    font-size: 11px;
+    font-weight: 500;
+    text-align: center;
+  }
 }
 
 a .account__avatar {
@@ -10215,6 +10236,12 @@ noscript {
       letter-spacing: 0.5px;
       line-height: 24px;
       color: $secondary-text-color;
+
+      bdi {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
     }
 
     .filtered-notifications-banner__badge {