style: New posts button

This commit is contained in:
freeplay 2023-06-25 17:07:01 -04:00
parent 7fa2ed853a
commit fc30217c69
2 changed files with 64 additions and 8 deletions

View File

@ -17,8 +17,13 @@
/>
<div v-if="queue > 0" class="new">
<button class="_buttonPrimary" @click="top()">
<button
class="_buttonPrimary _shadow"
@click="top()"
:class="{ instant: !$store.state.animation }"
>
{{ i18n.ts.newNoteRecived }}
<i class="ph-arrow-up ph-bold"></i>
</button>
</div>
<!-- <div v-if="!isMobile" class="tl _block">
@ -328,22 +333,63 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
@keyframes slideUp {
to {
transform: translateY(-100%);
opacity: 0;
}
}
.cmuxhskf {
--swiper-theme-color: var(--accent);
> .new {
position: sticky;
top: calc(var(--stickyTop, 0px) + 16px);
display: flex;
justify-content: center;
top: calc(var(--stickyTop, 0px) - 60px);
z-index: 1000;
width: 100%;
width: 600px;
height: 60px;
pointer-events: none;
margin-inline: auto;
z-index: 90000;
max-width: 600px;
box-shadow: 0 24px 24px -20px var(--accentedBg);
&::after {
content: "";
position: absolute;
inset: 0;
border: 2px solid var(--accent);
mask: linear-gradient(to right, transparent,black 40% 60%,transparent);
}
> button {
display: block;
margin: var(--margin) auto 0 auto;
padding: 8px 16px;
border-radius: 32px;
display: flex;
position: absolute;
top: 120%;
margin-inline: auto;
border-radius: 2em;
padding: .5em 1.2em;
background: var(--accentedBg);
border: 0;
color: var(--accent);
overflow: hidden;
pointer-events: all;
transform: translateY(-100%);
opacity: 0;
animation: reset .4s forwards cubic-bezier(0,.4,0,1.1),
slideUp 1s 5s forwards cubic-bezier(1,0,1,1);
&::before {
content: "";
position: absolute;
inset: 0;
background: var(--bg);
z-index: -1;
}
i {
margin-left: .7em;
border-left: 1px solid var(--accentedBg);
padding-left: .4em;
}
}
}

View File

@ -842,6 +842,16 @@ hr {
margin: 0;
}
@keyframes reset {
to {
transform: none;
opacity: 1;
}
}
.instant {
animation-duration: 0s !important;
}
@media(prefers-reduced-motion: no-preference) {
@keyframes scaleIn {
from {