diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index f8cc9ae5cc..2b704cfaac 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -718,7 +718,7 @@ body, top: 15px; .avatar { - border-radius: 4px; + border-radius: var(--avatar-border-radius); width: 40px; height: 40px; } @@ -769,7 +769,7 @@ body, top: 15px; .avatar { - border-radius: 4px; + border-radius: var(--avatar-border-radius); width: 40px; height: 40px; } @@ -1616,7 +1616,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/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 0dac18b07e..fba67c566f 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -2178,13 +2178,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 { @@ -8526,7 +8527,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/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index 9363e428b3..ac1f862a09 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/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/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 9e3bd11c34..8a056694f9 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -313,7 +313,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/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index 3a12809483..5b8ffbb4d7 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -114,4 +114,5 @@ $dismiss-overlay-width: 4rem; --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; }