test transparency on user profiles
This commit is contained in:
parent
f6e43ffbd2
commit
bdc9619f2d
5 changed files with 22 additions and 10 deletions
|
@ -138,7 +138,8 @@ onUnmounted(() => {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
contain: content;
|
contain: content;
|
||||||
|
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;
|
||||||
|
@ -168,10 +169,12 @@ onUnmounted(() => {
|
||||||
top: var(--stickyTop, 0px);
|
top: var(--stickyTop, 0px);
|
||||||
left: 0;
|
left: 0;
|
||||||
color: var(--panelHeaderFg);
|
color: var(--panelHeaderFg);
|
||||||
background: var(--panelHeaderBg);
|
//background: var(--panelHeaderBg);
|
||||||
border-bottom: solid 0.5px var(--panelHeaderDivider);
|
border-bottom: solid 0.5px var(--panelHeaderDivider);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
|
background: color-mix(in srgb, var(--panelHeaderBg) 35%, transparent);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
|
|
@ -23,13 +23,15 @@ const props = defineProps<{
|
||||||
.root {
|
.root {
|
||||||
padding: 12px 14px;
|
padding: 12px 14px;
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
background: var(--infoBg);
|
background: color-mix(in srgb, var(--infoBg) 65%, transparent);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
color: var(--infoFg);
|
color: var(--infoFg);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
&.warn {
|
&.warn {
|
||||||
background: var(--infoWarnBg);
|
background: color-mix(in srgb, var(--infoWarnBg) 65%, transparent);
|
||||||
color: var(--infoWarnFg);
|
color: var(--infoWarnFg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -56,7 +56,8 @@ defineExpose({
|
||||||
.root {
|
.root {
|
||||||
&.noGap {
|
&.noGap {
|
||||||
> .notes {
|
> .notes {
|
||||||
background: var(--panel);
|
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -65,7 +66,8 @@ defineExpose({
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
|
|
||||||
.note {
|
.note {
|
||||||
background: var(--panel);
|
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -358,6 +358,7 @@ onUnmounted(() => {
|
||||||
left: -100%;
|
left: -100%;
|
||||||
top: -100%;
|
top: -100%;
|
||||||
right: -100%;
|
right: -100%;
|
||||||
|
bottom: -100%;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -373,6 +374,8 @@ onUnmounted(() => {
|
||||||
> .main {
|
> .main {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
|
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
|
||||||
> .banner-container {
|
> .banner-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -726,15 +729,17 @@ onUnmounted(() => {
|
||||||
|
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
.tl {
|
.tl {
|
||||||
background: var(--bg);
|
background-color: rgba(0, 0, 0, 0);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
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: var(--bg);
|
background: color-mix(in srgb, var(--bg) 65%, transparent);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
> button {
|
> button {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<MkContainer :foldable="true">
|
<MkContainer>
|
||||||
<template #header
|
<template #header
|
||||||
><i
|
><i
|
||||||
class="ph-headphones ph-bold ph-lg"
|
class="ph-headphones ph-bold ph-lg"
|
||||||
style="margin-right: 0.5em"
|
style="margin-right: 0.5em;"
|
||||||
></i
|
></i
|
||||||
>Music</template
|
>Music</template
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in a new issue