style: New posts button

packages/client/src/pages/timeline.vue

@@ -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;
+			display: flex;
-			margin: var(--margin) auto 0 auto;
+			position: absolute;
-			padding: 8px 16px;
+			top: 120%;
-			border-radius: 32px;
+			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;
+			}
 		}
 	}
 

packages/client/src/style.scss

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