From 48b8aeaf6247f0fa0dc842d003e2cb6c7e4ebc40 Mon Sep 17 00:00:00 2001
From: Free <freeplay@duck.com>
Date: Wed, 26 Apr 2023 20:03:32 +0000
Subject: [PATCH] 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>
---
 .../src/components/MkSubNoteContent.vue       | 10 ++-
 packages/client/src/style.scss                | 75 ++++++++++++-------
 packages/client/src/ui/_common_/navbar.vue    | 12 +--
 3 files changed, 58 insertions(+), 39 deletions(-)

diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 132c4966d5..a345b23f54 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/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) {
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index c1a1820bcb..051edf6e0f 100644
--- a/packages/client/src/style.scss
+++ b/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_ {
 	&, * {
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 023b4d4933..380f77c3c4 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/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(
-						0deg,
-						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%
-					);
+					-webkit-mask-image: linear-gradient(var(--gradient));
+					mask-image: linear-gradient(var(--gradient));
 				}
 
 				> .account {