mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-04-01 14:13:37 +03:00
Code Issues Projects Releases Packages Wiki Activity

Try fix that hard-to-reproduce avatar flicker

Browse source
This commit is contained in:
Lim Chee Aun 2024-09-25 09:42:30 +08:00
parent 1485f9e5d9
commit 4d35c9d2c3
2 changed files with 33 additions and 22 deletions

2
src/components/account-block.jsx
View file

@ -105,11 +105,13 @@ function AccountBlock({
} }
}} }}
> >
<div class="avatar-container">
<Avatar <Avatar
url={useAvatarStatic ? avatarStatic : avatar || avatarStatic} url={useAvatarStatic ? avatarStatic : avatar || avatarStatic}
size={avatarSize} size={avatarSize}
squircle={bot} squircle={bot}
/> />
</div>
<span class="account-block-content"> <span class="account-block-content">
{!hideDisplayName && ( {!hideDisplayName && (
<> <>

33
src/components/account-info.css
View file

@ -217,13 +217,13 @@
background-image: none; background-image: none;
} }
& + header .avatar + * { & + header .avatar-container + * {
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
opacity: 0 !important; opacity: 0 !important;
} }
&, &,
& + header .avatar { & + header .avatar-container {
transition: filter 0.3s ease-in-out; transition: filter 0.3s ease-in-out;
filter: none !important; filter: none !important;
} }
@ -250,17 +250,22 @@
-8px 0 24px var(--header-color-3, --bg-color), -8px 0 24px var(--header-color-3, --bg-color),
8px 0 24px var(--header-color-4, --bg-color); 8px 0 24px var(--header-color-4, --bg-color);
animation: fade-in 0.3s both ease-in-out 0.1s; animation: fade-in 0.3s both ease-in-out 0.1s;
}
.account-container header .avatar { .avatar-container {
/* box-shadow: -8px 0 24px var(--header-color-3, --bg-color),
8px 0 24px var(--header-color-4, --bg-color); */
overflow: initial;
filter: drop-shadow(-2px 0 4px var(--header-color-3, --bg-color)) filter: drop-shadow(-2px 0 4px var(--header-color-3, --bg-color))
drop-shadow(2px 0 4px var(--header-color-4, --bg-color)); drop-shadow(2px 0 4px var(--header-color-4, --bg-color));
} }
.account-container header .avatar:not(.has-alpha) img {
.avatar {
/* box-shadow: -8px 0 24px var(--header-color-3, --bg-color),
8px 0 24px var(--header-color-4, --bg-color); */
/* overflow: initial; */
&:not(.has-alpha) img {
border-radius: inherit; border-radius: inherit;
} }
}
}
.account-container main > *:first-child { .account-container main > *:first-child {
animation: fade-in 0.3s both ease-in-out 0.15s; animation: fade-in 0.3s both ease-in-out 0.15s;
@ -754,13 +759,17 @@
letter-spacing: -0.5px; letter-spacing: -0.5px;
mix-blend-mode: multiply; mix-blend-mode: multiply;
gap: 12px; gap: 12px;
}
.timeline-start .account-container header .account-block .avatar { .avatar-container {
width: 112px !important;
height: 112px !important;
filter: drop-shadow(-8px 0 8px var(--header-color-3, --bg-color)) filter: drop-shadow(-8px 0 8px var(--header-color-3, --bg-color))
drop-shadow(8px 0 8px var(--header-color-4, --bg-color)); drop-shadow(8px 0 8px var(--header-color-4, --bg-color));
} }
.avatar {
width: 112px !important;
height: 112px !important;
}
}
} }
#private-note-container { #private-note-container {