super minor styling stuff (#9918)

Co-authored-by: Freeplay <Freeplay@duck.com>
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9918
Co-authored-by: Free <freeplay@duck.com>
Co-committed-by: Free <freeplay@duck.com>

packages/client/src/components/MkSubNoteContent.vue

@@ -251,14 +251,18 @@ let showContent = $ref(false);
 					min-height: 2em;
 					max-height: 5em;
 					filter: blur(4px);
+					:deep(span) {
+						animation: none !important;
+						transform: none !important;
+					}
+					:deep(img) {
+						filter: blur(12px);
+					}
 				}
 				:deep(.fade) {
 					inset: 0;
 					top: 40px;
 				}
-				:deep(span) {
-					animation: none !important;
-				}
 			}
 
 			:deep(.fade) {

packages/client/src/style.scss

@@ -12,6 +12,24 @@
 		--margin: var(--marginHalf);
 	}
 
+	// https://larsenwork.com/easing-gradients/
+	--gradient: hsl(0, 0%, 0%) 0%,
+		hsla(0, 0%, 0%, 0.987) 8.1%,
+		hsla(0, 0%, 0%, 0.951) 15.5%,
+		hsla(0, 0%, 0%, 0.896) 22.5%,
+		hsla(0, 0%, 0%, 0.825) 29%,
+		hsla(0, 0%, 0%, 0.741) 35.3%,
+		hsla(0, 0%, 0%, 0.648) 41.2%,
+		hsla(0, 0%, 0%, 0.55) 47.1%,
+		hsla(0, 0%, 0%, 0.45) 52.9%,
+		hsla(0, 0%, 0%, 0.352) 58.8%,
+		hsla(0, 0%, 0%, 0.259) 64.7%,
+		hsla(0, 0%, 0%, 0.175) 71%,
+		hsla(0, 0%, 0%, 0.104) 77.5%,
+		hsla(0, 0%, 0%, 0.049) 84.5%,
+		hsla(0, 0%, 0%, 0.013) 91.9%,
+		hsla(0, 0%, 0%, 0) 100%;
+
 	//--ad: rgb(255 169 0 / 10%);
 }
 
@@ -36,32 +54,6 @@ html {
 	text-size-adjust: 100%;
 	tab-size: 2;
 
-	&, * {
-		scrollbar-color: var(--scrollbarHandle) inherit;
-		scrollbar-width: thin;
-
-		&::-webkit-scrollbar {
-			width: 6px;
-			height: 6px;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: inherit;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--scrollbarHandle);
-
-			&:hover {
-				background: var(--scrollbarHandleHover);
-			}
-
-			&:active {
-				background: var(--accent);
-			}
-		}
-	}
-
 	&.f-1 {
 		font-size: 15px;
 	}
@@ -78,6 +70,37 @@ html {
 		font-family: sans-serif;
 	}
 }
+body::-webkit-scrollbar {
+	width: 12px;
+	height: 12px;
+
+}
+body::-webkit-scrollbar-thumb {
+	border-radius: 100px;
+	background-clip: content-box;
+	border: 3px solid transparent;
+}
+::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+::-webkit-scrollbar-track {
+	background: inherit;
+}
+::-webkit-scrollbar-thumb {
+	background: var(--scrollbarHandle);
+	min-height: 80px;
+
+	&:hover {
+		background: var(--scrollbarHandleHover);
+		background-clip: content-box;
+	}
+
+	&:active {
+		background: var(--accent);
+		background-clip: content-box;
+	}
+}
 
 html._themeChanging_ {
 	&, * {

packages/client/src/ui/_common_/navbar.vue

@@ -278,16 +278,8 @@ function more(ev: MouseEvent) {
 					height: 100%;
 					background-size: cover;
 					background-position: center center;
-					-webkit-mask-image: linear-gradient(
+					-webkit-mask-image: linear-gradient(var(--gradient));
-						0deg,
+					mask-image: linear-gradient(var(--gradient));
-						rgba(0, 0, 0, 0) 15%,
-						rgba(0, 0, 0, 0.75) 100%
-					);
-					mask-image: linear-gradient(
-						0deg,
-						rgba(0, 0, 0, 0) 15%,
-						rgba(0, 0, 0, 0.75) 100%
-					);
 				}
 
 				> .account {