limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-14 05:57:32 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
freeplay 2023-07-09 00:22:17 -04:00
parent 621cdccd40
commit aa62f417b2
1 changed files with 167 additions and 231 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

398
packages/client/src/ui/_common_/navbar.vue
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="item index" class="nav-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="item _button" class="nav-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"
@ -78,7 +78,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="item _button" class="nav-item _button"
active-class="active" active-class="active"
to="/admin" to="/admin"
> >
@ -99,7 +99,7 @@
<button <button
v-click-anime v-click-anime
v-tooltip.noDelay.right="i18n.ts.more" v-tooltip.noDelay.right="i18n.ts.more"
class="item _button" class="nav-item _button"
@click="more" @click="more"
> >
<i <i
@ -116,7 +116,7 @@
<MkA <MkA
v-click-anime v-click-anime
v-tooltip.noDelay.right="i18n.ts.settings" v-tooltip.noDelay.right="i18n.ts.settings"
class="item _button" class="nav-item _button"
active-class="active" active-class="active"
to="/settings" to="/settings"
> >
@ -127,7 +127,7 @@
<div class="bottom"> <div class="bottom">
<button <button
v-tooltip.noDelay.right="i18n.ts.note" v-tooltip.noDelay.right="i18n.ts.note"
class="item _button post" class="nav-item _button post"
data-cy-open-post-form data-cy-open-post-form
@click="os.post" @click="os.post"
> >
@ -272,6 +272,125 @@ 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;
@ -312,57 +431,6 @@ 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;
@ -400,78 +468,6 @@ 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;
}
> .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: 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);
}
}
}
} }
} }
} }
@ -503,52 +499,6 @@ 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;
@ -587,70 +537,56 @@ function more(ev: MouseEvent) {
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--divider);
} }
> .item { }
display: block; }
position: relative; .nav-item {
padding: 1.1rem 0; padding: 1.1rem 0;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
width: 100%; text-align: center;
text-align: center;
> .icon { > .icon {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
opacity: 0.7; opacity: 0.7;
transform: translateY(0em); transform: translateY(0em);
} }
> .text { > .text {
display: none; display: none;
} }
> .indicator { > .indicator {
position: absolute; position: absolute;
top: 6px; top: 6px;
left: 24px; left: 24px;
color: var(--navIndicator); color: var(--navIndicator);
font-size: 8px; font-size: 8px;
} }
> .animateIndicator { > .animateIndicator {
animation: blink 1s infinite; animation: blink 1s infinite;
} }
}
&:hover, .post {
&:focus-within, width: 100%;
&.active { height: 52px;
text-decoration: none; margin-bottom: 16px;
color: var(--accent); &:before, &::after {
transition: all 0.4s ease; inset: 0;
margin: auto;
&:before { width: 52px;
content: ""; aspect-ratio: 1/1;
display: block; }
height: 100%; > .icon {
aspect-ratio: 1; left: unset;
margin: auto; }
position: absolute; > .text {
top: 0; display: none;
left: 0;
right: 0;
bottom: 0;
border-radius: 999px;
background: var(--accentedBg);
}
> .icon,
> .text {
opacity: 1;
}
}
}
} }
} }
} }
.item { .nav-item {
outline: none; outline: none;
&:focus-visible:before { &:focus-visible:before {
outline: auto; outline: auto;