diff --git a/packages/frontend/src/components/MkRemoteCaution.vue b/packages/frontend/src/components/MkRemoteCaution.vue index 0c7d07e342..12f9021843 100644 --- a/packages/frontend/src/components/MkRemoteCaution.vue +++ b/packages/frontend/src/components/MkRemoteCaution.vue @@ -19,7 +19,8 @@ defineProps<{ .root { font-size: 0.8em; padding: 16px; - background: var(--infoWarnBg); + background: color-mix(in srgb, var(--infoWarnBg) 65%, transparent); + backdrop-filter: blur(16px); color: var(--infoWarnFg); border-radius: var(--radius); overflow: clip; diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss index df2f953c50..e155fd1ba0 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -267,7 +267,8 @@ hr { } ._panel { - background: var(--panel); + background: color-mix(in srgb, var(--panel) 65%, transparent); + backdrop-filter: blur(16px); border-radius: var(--radius); overflow: clip; }