natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: webkit blur effects

This commit is contained in:
freeplay 2023-07-01 19:21:26 -04:00
parent 6c3e96f24b
commit 61ad79ec17
2 changed files with 7 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/src/components/global/MkPageHeader.vue
View File

@ -307,6 +307,8 @@ onUnmounted(() => {
padding-inline: 24px; padding-inline: 24px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
@media (max-width: 500px) { @media (max-width: 500px) {
padding-inline: 16px; padding-inline: 16px;
&.tabs > .buttons > :deep(.follow-button > span) { &.tabs > .buttons > :deep(.follow-button > span) {
@ -345,8 +347,6 @@ onUnmounted(() => {
position: absolute; position: absolute;
inset: 0; inset: 0;
border-bottom: solid 0.5px var(--divider); border-bottom: solid 0.5px var(--divider);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
z-index: -1; z-index: -1;
} }
&::after { &::after {

20
packages/client/src/pages/user/home.vue
View File

@ -20,11 +20,11 @@
/> />
<div :key="user.id" class="_block main"> <div :key="user.id" class="_block main">
<div class="banner-container" :style="style"> <div class="banner-container">
<div <div
ref="bannerEl" ref="bannerEl"
class="banner" class="banner"
:style="style" :style="{ backgroundImage: `url('${user.bannerUrl}')` }"
></div> ></div>
<div class="fade"></div> <div class="fade"></div>
<div class="title"> <div class="title">
@ -405,13 +405,6 @@ let narrow = $ref<null | boolean>(null);
let rootEl = $ref<null | HTMLElement>(null); let rootEl = $ref<null | HTMLElement>(null);
let bannerEl = $ref<null | HTMLElement>(null); let bannerEl = $ref<null | HTMLElement>(null);
const style = $computed(() => {
if (props.user.bannerUrl == null) return {};
return {
backgroundImage: `url(${props.user.bannerUrl})`,
};
});
const age = $computed(() => { const age = $computed(() => {
return calcAge(props.user.birthday); return calcAge(props.user.birthday);
}); });
@ -502,7 +495,6 @@ onUnmounted(() => {
overflow: hidden; overflow: hidden;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
> .banner { > .banner {
height: 100%; height: 100%;
background-color: #26233a; background-color: #26233a;
@ -510,17 +502,15 @@ onUnmounted(() => {
background-position: center; background-position: center;
box-shadow: 0 0 128px var(--shadow) inset; box-shadow: 0 0 128px var(--shadow) inset;
will-change: background-position; will-change: background-position;
&::before {
&::after {
content: ""; content: "";
background-image: var(--blur, inherit);
position: fixed; position: fixed;
inset: 0; inset: 0;
background: var(--blur, inherit);
background-size: cover; background-size: cover;
background-position: center; background-position: center;
pointer-events: none; pointer-events: none;
opacity: 0.1; filter: blur(12px) opacity(.1);
filter: var(--blur, blur(10px));
} }
} }