fylepad 2.0 (beta) - light.

Merge pull request #21 from imrofayel/fuma
imrofayel · Dec 24, 2024 · 1895d3f · 1895d3f
2 parents 284ac97 + 50d56a2
commit 1895d3f
Show file tree

Hide file tree

Showing 13 changed files with 1,038 additions and 930 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,4 @@
+
 ## fylepad — your perfect note-taking solution!
 
 <a href="https://github.com/imrofayel/fylepad/stargazers"><img src="https://img.shields.io/github/stars/imrofayel/fylepad" alt="GitHub Repo stars"/></a>
@@ -19,7 +20,4 @@ Some of the features include extended Markdown based rich editing support, auto-
 
 And the best part? The app is just `5 MB`! Surprised? with its Rust core, it's blazing fast, secure, and memory-efficient — because we are not giving you a Chromium browser under the hood. 💥
 
-This is just version `1.0` — there's a lot more to look forward to! Stay tuned! Feel free to reach out or follow me on GitHub. You can even join Rofayel Labs and become part of our team! 🕹️
-
-
-
+This is just version `1.0` — there's a lot more to look forward to! Stay tuned! Feel free to reach out or follow me on GitHub. You can even join Rofayel Labs and become part of our team! 🕹️
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1,104 +1,260 @@
-@font-face {
-    font-family: 'Gulzar Urdu';
-    src: url('/assets/fonts/Gulzar-Regular.ttf') format('truetype');
+@import url("https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+
+    --primary: 221 55% 41%; /* rgb(65 95 145) */
+    --surface-tint: 221 55% 41%; /* rgb(65 95 145) */
+    --on-primary: 0 0% 100%; /* rgb(255 255 255) */
+    --primary-container: 219 100% 92%; /* rgb(214 227 255) */
+    --opaque: 128, 63%, 93%;
+    --on-primary-container: 217 100% 12%; /* rgb(0 27 62) */
+    --secondary: 222 14% 39%; /* rgb(86 95 113) */
+    --on-secondary: 0 0% 100%; /* rgb(255 255 255) */
+    --secondary-container: 224 82% 92%; /* rgb(218 226 249) */
+    --on-secondary-container: 219 39% 12%; /* rgb(19 28 43) */
+    --tertiary: 293 16% 40%; /* rgb(112 85 117) */
+    --on-tertiary: 0 0% 100%; /* rgb(255 255 255) */
+    --tertiary-container: 293 100% 92%; /* rgb(250 216 253) */
+    --on-tertiary-container: 293 42% 13%; /* rgb(40 19 46) */
+    --error: 0 75% 42%; /* rgb(186 26 26) */
+    --on-error: 0 0% 100%; /* rgb(255 255 255) */
+    --error-container: 4 100% 92%; /* rgb(255 218 214) */
+    --on-error-container: 357 100% 13%; /* rgb(65 0 2) */
+    --background: 240 100% 98%; /* rgb(249 249 255) */
+    --on-background: 220 12% 11%; /* rgb(25 28 32) */
+    --surface: 240 100% 98%; /* rgb(249 249 255) */
+    --on-surface: 220 12% 11%; /* rgb(25 28 32) */
+    --surface-variant: 227 25% 90%; /* rgb(224 226 236) */
+    --on-surface-variant: 220 7% 29%; /* rgb(68 71 78) */
+    --outline: 222 5% 48%; /* rgb(116 119 127) */
+    --outline-variant: 225 19% 79%; /* rgb(196 198 208) */
+    --shadow: 0 0% 0%; /* rgb(0 0 0) */
+    --scrim: 0 0% 0%; /* rgb(0 0 0) */
+    --inverse-surface: 222 8% 20%; /* rgb(46 48 54) */
+    --inverse-on-surface: 240 23% 95%; /* rgb(240 240 247) */
+    --inverse-primary: 217 100% 83%; /* rgb(170 199 255) */
+    --primary-fixed: 219 100% 92%; /* rgb(214 227 255) */
+    --on-primary-fixed: 217 100% 12%; /* rgb(0 27 62) */
+    --primary-fixed-dim: 217 100% 83%; /* rgb(170 199 255) */
+    --on-primary-fixed-variant: 217 50% 31%; /* rgb(40 71 119) */
+    --secondary-fixed: 224 82% 92%; /* rgb(218 226 249) */
+    --on-secondary-fixed: 219 39% 12%; /* rgb(19 28 43) */
+    --secondary-fixed-dim: 222 33% 80%; /* rgb(190 198 220) */
+    --on-secondary-fixed-variant: 220 18% 30%; /* rgb(62 71 89) */
+    --tertiary-fixed: 293 100% 92%; /* rgb(250 216 253) */
+    --on-tertiary-fixed: 293 42% 13%; /* rgb(40 19 46) */
+    --tertiary-fixed-dim: 293 33% 81%; /* rgb(221 188 224) */
+    --on-tertiary-fixed-variant: 293 20% 35%; /* rgb(87 62 92) */
+    --surface-dim: 240 13% 86%; /* rgb(217 217 224) */
+    --surface-bright: 240 100% 98%; /* rgb(249 249 255) */
+    --surface-container-lowest: 0 0% 100%; /* rgb(255 255 255) */
+    --surface-container-low: 240 70% 97%; /* rgb(243 243 250) */
+    --surface-container: 240 30% 94%; /* rgb(237 237 244) */
+    --surface-container-high: 231 19% 92%; /* rgb(231 232 238) */
+    --surface-container-highest: 240 13% 90%; /* rgb(226 226 233) */
+  }
+
+  .dark {
+    --primary: 134 47% 71%; /* rgb(148 213 168) */
+    --surface-tint: 134 47% 71%; /* rgb(148 213 168) */
+    --on-primary: 149 100% 11%; /* rgb(0 57 30) */
+    --primary-container: 149 70% 19%; /* rgb(14 81 48) */
+    --on-primary-container: 134 77% 82%; /* rgb(176 241 195) */
+    --secondary: 127 16% 76%; /* rgb(182 204 185) */
+    --on-secondary: 143 23% 17%; /* rgb(33 53 39) */
+    --secondary-container: 135 15% 25%; /* rgb(55 75 61) */
+    --on-secondary-container: 130 42% 86%; /* rgb(209 232 213) */
+    --tertiary: 195 37% 75%; /* rgb(163 205 219) */
+    --on-tertiary: 196 94% 13%; /* rgb(2 54 64) */
+    --tertiary-container: 196 45% 24%; /* rgb(33 76 87) */
+    --on-tertiary-container: 195 82% 86%; /* rgb(190 234 247) */
+    --error: 0 100% 84%; /* rgb(255 180 171) */
+    --on-error: 357 100% 21%; /* rgb(105 0 5) */
+    --error-container: 357 100% 29%; /* rgb(147 0 10) */
+    --on-error-container: 4 100% 92%; /* rgb(255 218 214) */
+    --background: 140 17% 7%; /* rgb(15 21 17) */
+    --on-background: 125 5% 88%; /* rgb(223 228 221) */
+    --surface: 140 17% 7%; /* rgb(15 21 17) */
+    --on-surface: 125 5% 88%; /* rgb(223 228 221) */
+    --surface-variant: 120 6% 27%; /* rgb(65 73 66) */
+    --on-surface-variant: 120 2% 77%; /* rgb(192 201 192) */
+    --outline: 120 3% 56%; /* rgb(138 147 139) */
+    --outline-variant: 120 6% 27%; /* rgb(65 73 66) */
+    --shadow: 0 0% 0%; /* rgb(0 0 0) */
+    --scrim: 0 0% 0%; /* rgb(0 0 0) */
+    --inverse-surface: 125 5% 88%; /* rgb(223 228 221) */
+    --inverse-on-surface: 140 6% 18%; /* rgb(44 50 45) */
+    --inverse-primary: 149 41% 29%; /* rgb(44 106 70) */
+    --primary-fixed: 134 77% 82%; /* rgb(176 241 195) */
+    --on-primary-fixed: 149 100% 6%; /* rgb(0 33 15) */
+    --primary-fixed-dim: 134 47% 71%; /* rgb(148 213 168) */
+    --on-primary-fixed-variant: 149 70% 19%; /* rgb(14 81 48) */
+    --secondary-fixed: 130 42% 86%; /* rgb(209 232 213) */
+    --on-secondary-fixed: 141 44% 8%; /* rgb(12 31 19) */
+    --secondary-fixed-dim: 127 16% 76%; /* rgb(182 204 185) */
+    --on-secondary-fixed-variant: 135 15% 25%; /* rgb(55 75 61) */
+    --tertiary-fixed: 195 82% 86%; /* rgb(190 234 247) */
+    --on-tertiary-fixed: 195 100% 15%; /* rgb(0 31 38) */
+    --tertiary-fixed-dim: 195 37% 75%; /* rgb(163 205 219) */
+    --on-tertiary-fixed-variant: 196 45% 24%; /* rgb(33 76 87) */
+    --surface-dim: 140 17% 7%; /* rgb(15 21 17) */
+    --surface-bright: 140 5% 22%; /* rgb(53 59 54) */
+    --surface-container-lowest: 140 20% 5%; /* rgb(10 15 12) */
+    --surface-container-low: 140 9% 10%; /* rgb(24 29 25) */
+    --surface-container: 140 8% 12%; /* rgb(28 33 29) */
+    --surface-container-high: 140 5% 16%; /* rgb(38 43 39) */
+    --surface-container-highest: 140 5% 20%; /* rgb(49 54 49) */
+  }
+}
+
+.geist {
+  font-family: "Geist", serif;
+  font-optical-sizing: auto;
 }
 
 @font-face {
-    font-family: 'Amiri Arabic';
-    src: url('/assets/fonts/Amiri-Regular.ttf') format('truetype');
+  font-family: "Gulzar Urdu";
+  src: url("/assets/fonts/Gulzar-Regular.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'Anton';
-    src: url('/assets/fonts/Anton-Regular.ttf') format('truetype');
+  font-family: "Amiri Arabic";
+  src: url("/assets/fonts/Amiri-Regular.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'Bangers';
-    src: url('/assets/fonts/Bangers-Regular.ttf') format('truetype');
+  font-family: "Anton";
+  src: url("/assets/fonts/Anton-Regular.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'Bebas Neue';
-    src: url('/assets/fonts/BebasNeue-Regular.ttf') format('truetype');
+  font-family: "Bangers";
+  src: url("/assets/fonts/Bangers-Regular.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'Cairo Arabic';
-    src: url('/assets/fonts/Cairo.ttf') format('truetype');
+  font-family: "Bebas Neue";
+  src: url("/assets/fonts/BebasNeue-Regular.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'Dancing Script';
-    src: url('/assets/fonts/DancingScript-VariableFont_wght.ttf') format('truetype');
+  font-family: "Cairo Arabic";
+  src: url("/assets/fonts/Cairo.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'Inter';
-    src: url('/assets/fonts/Inter.ttf') format('truetype');
+  font-family: "Dancing Script";
+  src: url("/assets/fonts/DancingScript-VariableFont_wght.ttf")
+    format("truetype");
 }
 
 @font-face {
-    font-family: 'Libre Baskerville';
-    src: url('/assets/fonts/LibreBaskerville-Regular.ttf') format('truetype');
+  font-family: "Inter";
+  src: url("/assets/fonts/Inter.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'Outfit';
-    src: url('/assets/fonts/Outfit-VariableFont_wght.ttf') format('truetype');
+  font-family: "Libre Baskerville";
+  src: url("/assets/fonts/LibreBaskerville-Regular.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'Pacifico';
-    src: url('/assets/fonts/Pacifico-Regular.ttf') format('truetype');
+  font-family: "Outfit";
+  src: url("/assets/fonts/Outfit-VariableFont_wght.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'Permanent Marker';
-    src: url('/assets/fonts/PermanentMarker-Regular.ttf') format('truetype');
+  font-family: "Pacifico";
+  src: url("/assets/fonts/Pacifico-Regular.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'Playfair Display';
-    src: url('/assets/fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
+  font-family: "Permanent Marker";
+  src: url("/assets/fonts/PermanentMarker-Regular.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'Playpen Sans';
-    src: url('/assets/fonts/PlaypenSans-VariableFont_wght.ttf') format('truetype');
+  font-family: "Playfair Display";
+  src: url("/assets/fonts/PlayfairDisplay-VariableFont_wght.ttf")
+    format("truetype");
 }
 
 @font-face {
-    font-family: 'Prata';
-    src: url('/assets/fonts/Prata-Regular.ttf') format('truetype');
+  font-family: "Playpen Sans";
+  src: url("/assets/fonts/PlaypenSans-VariableFont_wght.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'Roboto Mono';
-    src: url('/assets/fonts/RobotoMono-VariableFont_wght.ttf') format('truetype');
+  font-family: "Prata";
+  src: url("/assets/fonts/Prata-Regular.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'SpaceGrotesk';
-    src: url('/assets/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
+  font-family: "Roboto Mono";
+  src: url("/assets/fonts/RobotoMono-VariableFont_wght.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: 'Helvetica Now';
-    src: url('/assets/fonts/HelveticaNowText-Regular.otf') format('opentype');
+  font-family: "SpaceGrotesk";
+  src: url("/assets/fonts/SpaceGrotesk-VariableFont_wght.ttf")
+    format("truetype");
 }
 
+@font-face {
+  font-family: "Helvetica Now";
+  src: url("/assets/fonts/HelveticaNowText-Regular.otf") format("opentype");
+}
 
-.roboto-mono{
-    font-family: "Roboto Mono", monospace;
-    font-optical-sizing: auto;
-    font-style: normal;
-  }
+.roboto-mono {
+  font-family: "Roboto Mono", monospace;
+  font-optical-sizing: auto;
+  font-style: normal;
+}
 
 .inter {
-    font-family: "Inter", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 * {
-    font-family: 'Inter';
-}
+  font-family: "Inter";
+}
+
+.drop-shadow-cool {
+  filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.04));
+}
+
+.drop-shadow-cooltop {
+  filter: drop-shadow(0px -0.3px 3px rgba(0, 0, 0, 0.04));
+}
+
+::-webkit-scrollbar {
+  width: 12px; /* Width of the scrollbar */
+  height: 12px; /* Height of the scrollbar for horizontal scrolling */
+}
+
+::-webkit-scrollbar-track {
+  background: transparent; /* Background of the scrollbar track */
+  @apply dark:bg-[#1f2920] rounded-full;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply dark:bg-[#3c4a3e] bg-gray-200;
+  border-radius: 1rem; /* Rounded corners for the thumb */
+  border: 3px solid transparent; /* Adds padding around the thumb */
+  background-clip: content-box; /* Ensures the thumb stays within bounds */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.7); /* Darker color on hover */
+  @apply dark:bg-[#2f3a32];
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent; /* Makes the corner between vertical and horizontal scrollbars transparent */
+}