Change avatars border radius (mastodon#31390)

nileane · Aug 13, 2024 · f6d090f · f6d090f
1 parent 7e501c5
commit f6d090f
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 7 deletions.
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
@@ -697,7 +697,7 @@ body,
     top: 15px;
 
     .avatar {
-      border-radius: 4px;
+      border-radius: var(--avatar-border-radius);
       width: 40px;
       height: 40px;
     }
@@ -748,7 +748,7 @@ body,
     top: 15px;
 
     .avatar {
-      border-radius: 4px;
+      border-radius: var(--avatar-border-radius);
       width: 40px;
       height: 40px;
     }
@@ -1595,7 +1595,7 @@ a.sparkline {
       position: absolute;
       inset-inline-start: 15px;
       top: 15px;
-      border-radius: 4px;
+      border-radius: var(--avatar-border-radius);
       width: 40px;
       height: 40px;
     }

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -1996,13 +1996,14 @@ body > [data-popper-placement] {
 .account__avatar {
   display: block;
   position: relative;
+  border-radius: var(--avatar-border-radius);
 
   img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: 4px;
+    border-radius: var(--avatar-border-radius);
   }
 
   &-inline {
@@ -7975,7 +7976,7 @@ noscript {
       .account__avatar {
         background: var(--background-color);
         border: 1px solid var(--background-border-color);
-        border-radius: 4px;
+        border-radius: var(--avatar-border-radius);
       }
     }
   }

diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
@@ -81,7 +81,7 @@
       height: 100%;
       display: block;
       margin: 0;
-      border-radius: 4px;
+      border-radius: var(--avatar-border-radius);
     }
   }
 

diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
@@ -312,7 +312,7 @@ code {
       margin-bottom: 10px;
       max-width: 100%;
       height: auto;
-      border-radius: 4px;
+      border-radius: var(--avatar-border-radius);
       background: url('images/void.png');
 
       &[src$='missing.png'] {

diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
@@ -108,4 +108,5 @@ $font-monospace: 'mastodon-font-monospace' !default;
   --surface-background-color: #{darken($ui-base-color, 4%)};
   --surface-variant-background-color: #{$ui-base-color};
   --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
+  --avatar-border-radius: 8px;
 }