diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue
index 4ea553fc1e..2510e59ded 100644
--- a/src/components/NcAvatar/NcAvatar.vue
+++ b/src/components/NcAvatar/NcAvatar.vue
@@ -85,6 +85,27 @@ export default {
```
+### Avatar on complex background
+
+```
+
+
+
+
+
+
+```
+
-
@@ -405,13 +430,14 @@ export default {
lineHeight: this.size + 'px',
fontSize: Math.round(this.size * 0.55) + 'px',
}
-
- if (!this.iconClass && !this.avatarSrcSetLoaded) {
- const rgb = usernameToColor(this.getUserIdentifier)
- style.backgroundColor = 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.1)'
- }
return style
},
+ initialsWrapperStyle() {
+ const { r, g, b } = usernameToColor(this.getUserIdentifier)
+ return {
+ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,
+ }
+ },
initialsStyle() {
const { r, g, b } = usernameToColor(this.getUserIdentifier)
return {
@@ -681,7 +707,7 @@ export default {
&--unknown {
position: relative;
- background-color: var(--color-text-maxcontrast);
+ background-color: var(--color-main-background);
}
&:not(&--unknown) {
@@ -716,14 +742,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 {