chore: 🎨 format

This commit is contained in:
ThatOneCalculator 2023-07-09 20:46:58 -07:00
parent a5f84ec30b
commit 645480f889
No known key found for this signature in database
GPG key ID: 8703CACD01000000
3 changed files with 21 additions and 13 deletions

View file

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

View file

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

View file

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