chore: 🎨 format
This commit is contained in:
parent
a5f84ec30b
commit
645480f889
3 changed files with 21 additions and 13 deletions
|
@ -226,11 +226,13 @@ watch(
|
||||||
display: flex;
|
display: flex;
|
||||||
min-width: max-content;
|
min-width: max-content;
|
||||||
width: 110px;
|
width: 110px;
|
||||||
transition: width 0.2s cubic-bezier(0,0,0,1);
|
transition: width 0.2s cubic-bezier(0, 0, 0, 1);
|
||||||
[data-plyr="volume"] {
|
[data-plyr="volume"] {
|
||||||
width: 0;
|
width: 0;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
transition: margin 0.3s, opacity .2s 0.2s;
|
transition:
|
||||||
|
margin 0.3s,
|
||||||
|
opacity 0.2s 0.2s;
|
||||||
}
|
}
|
||||||
&:not(:hover):not(:focus-within) {
|
&:not(:hover):not(:focus-within) {
|
||||||
width: 0px;
|
width: 0px;
|
||||||
|
@ -238,7 +240,9 @@ watch(
|
||||||
[data-plyr="volume"] {
|
[data-plyr="volume"] {
|
||||||
margin-inline: 0px;
|
margin-inline: 0px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: margin 0.3s, opacity 0.1s;
|
transition:
|
||||||
|
margin 0.3s,
|
||||||
|
opacity 0.1s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,12 +26,13 @@
|
||||||
class="banner"
|
class="banner"
|
||||||
:style="{
|
:style="{
|
||||||
backgroundImage: `url('${user.bannerUrl}')`,
|
backgroundImage: `url('${user.bannerUrl}')`,
|
||||||
'--backgroundImageStatic': defaultStore
|
'--backgroundImageStatic':
|
||||||
.state.useBlurEffect && user.bannerUrl
|
defaultStore.state.useBlurEffect &&
|
||||||
? `url('${getStaticImageUrl(
|
user.bannerUrl
|
||||||
user.bannerUrl,
|
? `url('${getStaticImageUrl(
|
||||||
)}')`
|
user.bannerUrl,
|
||||||
: null,
|
)}')`
|
||||||
|
: null,
|
||||||
}"
|
}"
|
||||||
></div>
|
></div>
|
||||||
<div class="fade"></div>
|
<div class="fade"></div>
|
||||||
|
|
|
@ -285,7 +285,8 @@ function more(ev: MouseEvent) {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: var(--navFg);
|
color: var(--navFg);
|
||||||
|
|
||||||
&:before, &.post::after {
|
&:before,
|
||||||
|
&.post::after {
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
width: calc(100% - 34px);
|
width: calc(100% - 34px);
|
||||||
|
@ -342,7 +343,9 @@ function more(ev: MouseEvent) {
|
||||||
&.active {
|
&.active {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: color 0.4s, opacity 0.4s;
|
transition:
|
||||||
|
color 0.4s,
|
||||||
|
opacity 0.4s;
|
||||||
&::before {
|
&::before {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
@ -536,7 +539,6 @@ function more(ev: MouseEvent) {
|
||||||
width: calc(100% - 32px);
|
width: calc(100% - 32px);
|
||||||
border-top: solid 0.5px var(--divider);
|
border-top: solid 0.5px var(--divider);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.nav-item {
|
.nav-item {
|
||||||
|
@ -571,7 +573,8 @@ function more(ev: MouseEvent) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
&:before, &::after {
|
&:before,
|
||||||
|
&::after {
|
||||||
inset: 0;
|
inset: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width: 52px;
|
width: 52px;
|
||||||
|
|
Loading…
Reference in a new issue