diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue
index 4ea553fc1e..8997faa9c2 100644
--- a/src/components/NcAvatar/NcAvatar.vue
+++ b/src/components/NcAvatar/NcAvatar.vue
@@ -85,6 +85,26 @@ export default {
```
+### Avatar on complex background
+
+```
+
+
+
+
+
+
+```
+
-
@@ -681,7 +703,6 @@ export default {
&--unknown {
position: relative;
- background-color: var(--color-text-maxcontrast);
}
&:not(&--unknown) {
@@ -716,14 +737,21 @@ export default {
}
}
- > .unknown {
- position: absolute;
- top: 0;
- left: 0;
- display: block;
- width: 100%;
- text-align: center;
- font-weight: normal;
+ .avatardiv__initials-wrapper {
+ height: var(--size);
+ width: var(--size);
+ background-color: var(--color-main-background);
+ border-radius: 50%;
+
+ .unknown {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+ width: 100%;
+ text-align: center;
+ font-weight: normal;
+ }
}
img {