heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

test transparency on user profiles

Browse source
This commit is contained in:
Insert5StarName 2023-10-09 04:38:31 +02:00
parent f6e43ffbd2
commit bdc9619f2d
5 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/frontend/src/components/MkContainer.vue
View file

@ -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 {

6
packages/frontend/src/components/MkInfo.vue
View file

@ -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);
} }
} }

6
packages/frontend/src/components/MkNotes.vue
View file

@ -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);
} }
} }

9
packages/frontend/src/pages/user/home.vue
View file

@ -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;

4
packages/frontend/src/pages/user/index.listenbrainz.vue
View file

@ -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
> >