fix: performance issues & respect blur option
This commit is contained in:
parent
363092d537
commit
d6ebbf5721
|
@ -139,7 +139,6 @@ onUnmounted(() => {
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
contain: content;
|
contain: content;
|
||||||
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
&.naked {
|
&.naked {
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
|
@ -173,7 +172,6 @@ onUnmounted(() => {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
background: color-mix(in srgb, var(--panelHeaderBg) 35%, transparent);
|
background: color-mix(in srgb, var(--panelHeaderBg) 35%, transparent);
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
|
|
@ -57,7 +57,6 @@ defineExpose({
|
||||||
&.noGap {
|
&.noGap {
|
||||||
> .notes {
|
> .notes {
|
||||||
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -67,7 +66,6 @@ defineExpose({
|
||||||
|
|
||||||
.note {
|
.note {
|
||||||
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -367,7 +367,7 @@ onUnmounted(() => {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
filter: blur(8px) opacity(0.6);
|
filter: var(--blur, blur(10px)) opacity(0.6);
|
||||||
// Funny CSS schenanigans to make background escape container
|
// Funny CSS schenanigans to make background escape container
|
||||||
left: -100%;
|
left: -100%;
|
||||||
top: -5%;
|
top: -5%;
|
||||||
|
@ -391,7 +391,6 @@ onUnmounted(() => {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
|
|
||||||
> .banner-container {
|
> .banner-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -755,7 +754,7 @@ onUnmounted(() => {
|
||||||
margin: calc(var(--margin) / 2) 0;
|
margin: calc(var(--margin) / 2) 0;
|
||||||
padding: calc(var(--margin) / 2) 0;
|
padding: calc(var(--margin) / 2) 0;
|
||||||
background: color-mix(in srgb, var(--bg) 65%, transparent);
|
background: color-mix(in srgb, var(--bg) 65%, transparent);
|
||||||
backdrop-filter: blur(16px);
|
backdrop-filter: var(--blur, blur(15px));
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
> button {
|
> button {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
|
@ -268,7 +268,6 @@ hr {
|
||||||
|
|
||||||
._panel {
|
._panel {
|
||||||
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue