From f23e64f0ca02494e6986d2e545fc44f3c7a3991a Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sun, 6 Aug 2023 10:25:22 +0800
Subject: [PATCH] Added hidden scrollbar class

---
 assets/css/tailwind.css              | 15 ++++++++--
 components/card/MarkdownRenderer.vue | 45 +++++++++++++++-------------
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index ecc92f5..71d01dd 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -16,9 +16,20 @@ body::-webkit-scrollbar,
 }
 
 input {
-	@apply bg-primary border-none p-2;
+	@apply border-none bg-primary p-2;
 }
 
 input:focus {
-	@apply bg-secondary border-none outline-none;
+	@apply border-none bg-secondary outline-none;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrollbar-hidden::-webkit-scrollbar {
+	display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.scrollbar-hidden {
+	-ms-overflow-style: none; /* IE and Edge */
+	scrollbar-width: none; /* Firefox */
 }
diff --git a/components/card/MarkdownRenderer.vue b/components/card/MarkdownRenderer.vue
index 60f5bd7..b83d4f8 100644
--- a/components/card/MarkdownRenderer.vue
+++ b/components/card/MarkdownRenderer.vue
@@ -1,20 +1,23 @@
 <script setup lang="ts">
 const note = useNote()
 const parsedMarkdown = computed(() => {
-    return stringToMarkdown(note.value.description)
+	return stringToMarkdown(note.value.description)
 })
 </script>
 
 <template>
-    <div class="flex h-full min-h-screen w-full flex-col items-center overflow-y-scroll bg-secondary px-12 py-4">
-        <div class="h-full max-h-full w-full" v-html="parsedMarkdown">
-        </div>
-    </div>
+	<div
+		class="scrollbar-hidden flex h-full min-h-screen w-full flex-col items-center overflow-y-scroll bg-secondary px-12 py-4">
+		<div
+			class="scrollbar-hidden h-full max-h-full w-full"
+			v-html="parsedMarkdown">
+		</div>
+	</div>
 </template>
 
 <style scoped>
 :deep(*) {
-    @apply my-4 text-[#E6EDF3];
+	@apply my-4 text-[#E6EDF3];
 }
 
 /* Headers */
@@ -24,64 +27,64 @@ const parsedMarkdown = computed(() => {
 :deep(h4),
 :deep(h5),
 :deep(h6) {
-    @apply border-b border-lightgray pb-2;
+	@apply border-b border-lightgray pb-2;
 }
 
 :deep(h1) {
-    @apply mt-12 text-4xl;
+	@apply mt-12 text-4xl;
 }
 
 :deep(h2) {
-    @apply text-2xl;
+	@apply text-2xl;
 }
 
 :deep(h3) {
-    @apply text-lg;
+	@apply text-lg;
 }
 
 :deep(h4) {
-    @apply text-base;
+	@apply text-base;
 }
 
 :deep(h5) {
-    @apply text-sm;
+	@apply text-sm;
 }
 
 :deep(h6) {
-    @apply text-xs;
+	@apply text-xs;
 }
 
 /* Lists */
 :deep(ul li),
 :deep(ol li) {
-    @apply my-2 pl-8;
+	@apply my-2 pl-8;
 }
 
 :deep(ul) {
-    @apply list-inside list-disc;
+	@apply list-inside list-disc;
 }
 
 :deep(ol) {
-    counter-reset: list;
+	counter-reset: list;
 }
 
 :deep(ol li::before) {
-    counter-increment: list;
-    content: counters(list, '.') ' ';
+	counter-increment: list;
+	content: counters(list, '.') ' ';
 }
 
 /* Checkbox */
 :deep(input[type='checkbox']) {
-    @apply mr-2;
+	@apply mr-2;
 }
 
 /* Code Block */
 :deep(pre) {
-    @apply bg-lightgray p-2;
+	@apply bg-lightgray p-2;
 }
 
 /* Quotes */
 :deep(blockquote) {
-    @apply border-l-4 border-l-[#E6EDF3] pl-4;
+	@apply border-l-4 border-l-[#E6EDF3] pl-4;
 }
 </style>