Fixes read receipt avatar offset (#11483)

* Fixes read receipt avatar offset

Fixes https://github.com/vector-im/element-web/issues/26059

* Fix avatar collapsing in thread list

Fixes https://github.com/vector-im/element-web/issues/26064

* Make composer pills use new avatar design

Fixes https://github.com/vector-im/element-web/issues/26067

* Update snapshots

* Update UserInfo snapshot

* Update HTMLExport snapshot

* Fixes avatar placeholder font

Fixes https://github.com/vector-im/element-web/issues/26061
This commit is contained in:
Germain 2023-08-30 12:47:35 +01:00 committed by GitHub
parent 6cc42b7e2e
commit 6aa86a858f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 132 additions and 20 deletions

View file

@ -22,3 +22,10 @@ limitations under the License.
color: white !important;
}
}
button.mx_BaseAvatar {
/* The user agent stylesheet overrides the font-size in this scenario
And that breaks the alignment, emojis, and all sorts of things
*/
font-size: inherit;
}

View file

@ -79,7 +79,7 @@ limitations under the License.
height: $font-16px;
margin-inline-end: 0.24rem;
background: var(--avatar-background), $background;
color: $avatar-initial-color;
color: var(--avatar-color, $avatar-initial-color);
background-repeat: no-repeat;
background-size: $font-16px;
border-radius: $font-16px;

View file

@ -49,13 +49,11 @@ limitations under the License.
height: 100%;
.mx_BaseAvatar {
box-sizing: content-box;
position: absolute;
display: inline-block;
height: 14px;
width: 14px;
border: 1px solid $background;
border-radius: 100%;
width: 14px;
height: 14px;
will-change: left, top;
transition: left var(--transition-short) ease-out, top var(--transition-standard) ease-out;
}

View file

@ -123,6 +123,7 @@ limitations under the License.
.mx_ThreadSummary_avatar {
margin-inline-end: $spacing-8;
flex-shrink: 0;
}
.mx_ThreadSummary_icon {

View file

@ -148,8 +148,8 @@ limitations under the License.
background-size: $font-16px;
border-radius: $font-16px;
color: $avatar-initial-color;
font-weight: normal;
color: var(--avatar-color, $avatar-initial-color);
font-weight: bold;
font-size: $font-10-4px;
}
}