Revert "fix: nav post button gradient transition (#10401) + half refactor ?"

This reverts commit 6031e11721.
This commit is contained in:
ThatOneCalculator 2023-07-09 21:08:24 -07:00
parent 645480f889
commit ce239565a7
No known key found for this signature in database
GPG Key ID: 8703CACD01000000

View File

@ -26,7 +26,7 @@
<MkA <MkA
v-click-anime v-click-anime
v-tooltip.noDelay.right="i18n.ts.timeline" v-tooltip.noDelay.right="i18n.ts.timeline"
class="nav-item index" class="item index"
active-class="active" active-class="active"
to="/" to="/"
exact exact
@ -46,7 +46,7 @@
v-tooltip.noDelay.right=" v-tooltip.noDelay.right="
i18n.ts[navbarItemDef[item].title] i18n.ts[navbarItemDef[item].title]
" "
class="nav-item _button" class="item _button"
:class="[item, { active: navbarItemDef[item].active }]" :class="[item, { active: navbarItemDef[item].active }]"
active-class="active" active-class="active"
:to="navbarItemDef[item].to" :to="navbarItemDef[item].to"
@ -66,9 +66,6 @@
<span <span
v-if="navbarItemDef[item].indicated" v-if="navbarItemDef[item].indicated"
class="indicator" class="indicator"
:class="{
animateIndicator: $store.state.animation,
}"
><i class="icon ph-circle ph-fill"></i ><i class="icon ph-circle ph-fill"></i
></span> ></span>
</component> </component>
@ -78,7 +75,7 @@
v-if="$i.isAdmin || $i.isModerator" v-if="$i.isAdmin || $i.isModerator"
v-click-anime v-click-anime
v-tooltip.noDelay.right="i18n.ts.controlPanel" v-tooltip.noDelay.right="i18n.ts.controlPanel"
class="nav-item _button" class="item _button"
active-class="active" active-class="active"
to="/admin" to="/admin"
> >
@ -91,7 +88,6 @@
updateAvailable updateAvailable
" "
class="indicator" class="indicator"
:class="{ animateIndicator: $store.state.animation }"
></span ></span
><i class="icon ph-door ph-bold ph-fw ph-lg"></i ><i class="icon ph-door ph-bold ph-fw ph-lg"></i
><span class="text">{{ i18n.ts.controlPanel }}</span> ><span class="text">{{ i18n.ts.controlPanel }}</span>
@ -99,24 +95,21 @@
<button <button
v-click-anime v-click-anime
v-tooltip.noDelay.right="i18n.ts.more" v-tooltip.noDelay.right="i18n.ts.more"
class="nav-item _button" class="item _button"
@click="more" @click="more"
> >
<i <i
class="icon ph-dots-three-outline ph-bold ph-fw ph-lg" class="icon ph-dots-three-outline ph-bold ph-fw ph-lg"
></i ></i
><span class="text">{{ i18n.ts.more }}</span> ><span class="text">{{ i18n.ts.more }}</span>
<span <span v-if="otherMenuItemIndicated" class="indicator"
v-if="otherMenuItemIndicated"
class="indicator"
:class="{ animateIndicator: $store.state.animation }"
><i class="icon ph-circle ph-fill"></i ><i class="icon ph-circle ph-fill"></i
></span> ></span>
</button> </button>
<MkA <MkA
v-click-anime v-click-anime
v-tooltip.noDelay.right="i18n.ts.settings" v-tooltip.noDelay.right="i18n.ts.settings"
class="nav-item _button" class="item _button"
active-class="active" active-class="active"
to="/settings" to="/settings"
> >
@ -127,7 +120,7 @@
<div class="bottom"> <div class="bottom">
<button <button
v-tooltip.noDelay.right="i18n.ts.note" v-tooltip.noDelay.right="i18n.ts.note"
class="nav-item _button post" class="item _button post"
data-cy-open-post-form data-cy-open-post-form
@click="os.post" @click="os.post"
> >
@ -224,7 +217,7 @@ function openAccountMenu(ev: MouseEvent) {
{ {
withExtraOperation: true, withExtraOperation: true,
}, },
ev, ev
); );
} }
@ -239,7 +232,7 @@ function more(ev: MouseEvent) {
src: ev.currentTarget ?? ev.target, src: ev.currentTarget ?? ev.target,
}, },
{}, {},
"closed", "closed"
); );
} }
</script> </script>
@ -272,128 +265,6 @@ function more(ev: MouseEvent) {
flex-direction: column; flex-direction: column;
} }
.nav-item {
position: relative;
display: flex;
align-items: center;
padding-inline: 30px;
line-height: 2.85rem;
margin-bottom: 0.5rem;
white-space: nowrap;
width: 100%;
text-align: left;
box-sizing: border-box;
color: var(--navFg);
&:before,
&.post::after {
content: "";
display: block;
width: calc(100% - 34px);
height: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 999px;
background: var(--accentedBg);
opacity: 0;
z-index: -2;
}
> .icon {
position: relative;
width: 32px;
margin-right: 8px;
}
> .indicator {
position: absolute;
top: 0;
left: 20px;
color: var(--navIndicator);
font-size: 8px;
}
> .animateIndicator {
animation: blink 1s infinite;
}
> .text {
position: relative;
font-size: 0.9em;
overflow: hidden;
text-overflow: ellipsis;
}
&:hover,
&:focus-within {
text-decoration: none;
color: var(--navHoverFg);
transition: color 0.4s ease;
}
&.active {
color: var(--navActive);
}
&:hover,
&:focus-within,
&.active {
color: var(--accent);
opacity: 1;
transition:
color 0.4s,
opacity 0.4s;
&::before {
opacity: 1;
}
}
}
.post {
padding-inline: 0;
color: var(--fgOnAccent);
font-weight: bold;
&::before {
opacity: 1;
background: linear-gradient(
90deg,
var(--buttonGradateA),
var(--buttonGradateB)
);
}
&::after {
background: var(--accentLighten) !important;
opacity: 0;
z-index: -1;
transition: opacity 0.2s;
}
&:hover,
&:focus-within,
&.active {
&::after {
opacity: 1;
}
}
> .icon,
> .text {
position: relative;
left: 3rem;
margin: 0;
width: auto;
color: var(--fgOnAccent);
transform: translateY(0em);
}
> .text {
margin-left: 1rem;
}
}
&:not(.iconOnly) { &:not(.iconOnly) {
> .body { > .body {
margin-left: -200px; margin-left: -200px;
@ -434,6 +305,57 @@ function more(ev: MouseEvent) {
> .bottom { > .bottom {
padding: 20px 0; padding: 20px 0;
> .post {
position: relative;
width: 100%;
height: 40px;
color: var(--fgOnAccent);
font-weight: bold;
text-align: left;
display: flex;
align-items: center;
&:before {
content: "";
display: block;
width: calc(100% - 38px);
height: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 999px;
background: linear-gradient(
90deg,
var(--buttonGradateA),
var(--buttonGradateB)
);
}
&:hover,
&:focus-within,
&.active {
&:before {
background: var(--accentLighten);
transition: all 0.4s ease;
}
}
> .icon,
> .text {
position: relative;
left: 3rem;
color: var(--fgOnAccent);
transform: translateY(0em);
}
> .text {
margin-left: 1rem;
}
}
> .instance { > .instance {
position: relative; position: relative;
display: block; display: block;
@ -471,6 +393,75 @@ function more(ev: MouseEvent) {
margin: 16px 16px; margin: 16px 16px;
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--divider);
} }
> .item {
position: relative;
display: flex;
align-items: center;
padding-left: 30px;
line-height: 2.85rem;
margin-bottom: 0.5rem;
white-space: nowrap;
width: 100%;
text-align: left;
box-sizing: border-box;
color: var(--navFg);
> .icon {
position: relative;
width: 32px;
margin-right: 8px;
}
> .indicator {
position: absolute;
top: 0;
left: 20px;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
}
> .text {
position: relative;
font-size: 0.9em;
overflow: hidden;
text-overflow: ellipsis;
}
&:hover,
&:focus-within {
text-decoration: none;
color: var(--navHoverFg);
transition: all 0.4s ease;
}
&.active {
color: var(--navActive);
}
&:hover,
&:focus-within,
&.active {
color: var(--accent);
transition: all 0.4s ease;
&:before {
content: "";
display: block;
width: calc(100% - 34px);
height: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 999px;
background: var(--accentedBg);
}
}
}
} }
} }
} }
@ -502,6 +493,52 @@ function more(ev: MouseEvent) {
> .bottom { > .bottom {
padding: 20px 0; padding: 20px 0;
> .post {
display: block;
position: relative;
width: 100%;
height: 52px;
margin-bottom: 16px;
text-align: center;
&:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 52px;
aspect-ratio: 1/1;
border-radius: 100%;
background: linear-gradient(
90deg,
var(--buttonGradateA),
var(--buttonGradateB)
);
}
&:hover,
&:focus-within,
&.active {
&:before {
background: var(--accentLighten);
transition: all 0.4s ease;
}
}
> .icon {
position: relative;
color: var(--fgOnAccent);
}
> .text {
display: none;
}
}
> .help { > .help {
position: relative; position: relative;
display: block; display: block;
@ -539,57 +576,68 @@ 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 {
padding: 1.1rem 0;
margin-bottom: 0.2rem;
text-align: center;
> .icon { > .item {
display: block; display: block;
margin: 0 auto; position: relative;
opacity: 0.7; padding: 1.1rem 0;
transform: translateY(0em); margin-bottom: 0.2rem;
} width: 100%;
text-align: center;
> .text { > .icon {
display: none; display: block;
} margin: 0 auto;
opacity: 0.7;
transform: translateY(0em);
}
> .indicator { > .text {
position: absolute; display: none;
top: 6px; }
left: 24px;
color: var(--navIndicator);
font-size: 8px;
}
> .animateIndicator { > .indicator {
animation: blink 1s infinite; position: absolute;
} top: 6px;
} left: 24px;
.post { color: var(--navIndicator);
width: 100%; font-size: 8px;
height: 52px; animation: blink 1s infinite;
margin-bottom: 16px; }
&:before,
&::after { &:hover,
inset: 0; &:focus-within,
margin: auto; &.active {
width: 52px; text-decoration: none;
aspect-ratio: 1/1; color: var(--accent);
} transition: all 0.4s ease;
> .icon {
left: unset; &:before {
} content: "";
> .text { display: block;
display: none; height: 100%;
aspect-ratio: 1;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 999px;
background: var(--accentedBg);
}
> .icon,
> .text {
opacity: 1;
}
}
}
} }
} }
} }
.nav-item { .item {
outline: none; outline: none;
&:focus-visible:before { &:focus-visible:before {
outline: auto; outline: auto;