style: New posts button
This commit is contained in:
parent
7fa2ed853a
commit
fc30217c69
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue