mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-23 09:45:46 +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
url={useAvatarStatic ? avatarStatic : avatar || avatarStatic}
size={avatarSize}
squircle={bot}
/>
<div class="avatar-container">
<Avatar
url={useAvatarStatic ? avatarStatic : avatar || avatarStatic}
size={avatarSize}
squircle={bot}
/>
</div>
<span class="account-block-content">
{!hideDisplayName && (
<>

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

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