mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-29 20:59:07 +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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

43
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,16 +250,21 @@
-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), filter: drop-shadow(-2px 0 4px var(--header-color-3, --bg-color))
drop-shadow(2px 0 4px var(--header-color-4, --bg-color));
}
.avatar {
/* box-shadow: -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); */
overflow: initial; /* overflow: initial; */
filter: drop-shadow(-2px 0 4px var(--header-color-3, --bg-color))
drop-shadow(2px 0 4px var(--header-color-4, --bg-color)); &:not(.has-alpha) img {
} border-radius: inherit;
.account-container header .avatar:not(.has-alpha) img { }
border-radius: inherit; }
} }
.account-container main > *:first-child { .account-container main > *:first-child {
@ -754,12 +759,16 @@
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; filter: drop-shadow(-8px 0 8px var(--header-color-3, --bg-color))
height: 112px !important; drop-shadow(8px 0 8px var(--header-color-4, --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));
.avatar {
width: 112px !important;
height: 112px !important;
}
} }
} }