changes

frontend/src/styles/_animations.scss

@@ -0,0 +1,87 @@
+/* ----------------------------------------------
+ * Generated by Animista on 2024-10-8 16:39:17
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation swing-in-top-fwd
+ * ----------------------------------------
+ */
+@-webkit-keyframes swing-in-top-fwd {
+  0% {
+    -webkit-transform: rotateX(-100deg);
+            transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+            transform-origin: top;
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: rotateX(0deg);
+            transform: rotateX(0deg);
+    -webkit-transform-origin: top;
+            transform-origin: top;
+    opacity: 1;
+  }
+}
+@keyframes swing-in-top-fwd {
+  0% {
+    -webkit-transform: rotateX(-100deg);
+            transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+            transform-origin: top;
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: rotateX(0deg);
+            transform: rotateX(0deg);
+    -webkit-transform-origin: top;
+            transform-origin: top;
+    opacity: 1;
+  }
+}
+
+.swing-in-top-fwd {
+	-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
+	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
+}
+
+//HTMX Loading
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+#transactions.htmx-request, #summary.htmx-request {
+  position: relative;
+  top: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    backdrop-filter: blur(4px);
+    z-index: 1;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    margin-top: -20px;
+    margin-left: -20px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid $primary;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    z-index: 2;
+  }
+}

frontend/src/styles/_bootstrap.scss

@@ -8,6 +8,31 @@
   font-size: $font-size-base; // Fixes crispy-bootstrap5 legend labels being too big
   font-weight: bold;
 }
+
+$theme-colors: map-merge($theme-colors, (
+  "primary": $primary
+));
+
+
+@media all and (min-width: 992px) {
+  .navbar .nav-item .dropdown-menu {
+    display: none;
+  }
+
+  .navbar .nav-item:hover .dropdown-menu {
+    display: block;
+    left: 0;
+  }
+
+  .navbar .nav-item .dropdown-menu {
+    margin-top: 0;
+  }
+}
+
+.table .col-auto {
+  width: 1%;
+  white-space: nowrap;
+}
 //
 ////body {
 ////  background-color: $background-color;

frontend/src/styles/_scrollbar.scss

@@ -0,0 +1,21 @@
+@import "variables";
+
+/* custom scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: $primary;
+  border-radius: 20px;
+  border: 4px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #ae8000;
+}

frontend/src/styles/_variables.scss

@@ -28,8 +28,9 @@ $info:          $cyan !default;
 $warning:       $yellow !default;
 $danger:        $red !default;
 //$light:         $gray-500 !default;
-$dark:          $gray-800 !default;
+$dark:          $gray-700 !default;
 
 $min-contrast-ratio:   1.9 !default;
 
-$nav-pills-link-active-color: $black
+$nav-pills-link-active-color: $gray-900;
+$dropdown-link-active-color: $gray-900;

frontend/src/styles/style.scss

@@ -1,8 +1,10 @@
-@import "_variables";
-@import "_font-awesome.scss";
-@import "_tailwind.scss";
-@import "_bootstrap.scss";
-@import "_tom-select.scss";
+@import "variables";
+@import "font-awesome.scss";
+@import "tailwind.scss";
+@import "bootstrap.scss";
+@import "tom-select.scss";
+@import "animations.scss";
+@import "scrollbar.scss";
 
 .sticky-sidebar {
   position: sticky;
@@ -13,3 +15,12 @@
 select[multiple] {
   visibility: hidden;
 }
+
+.font-base {
+  font-family: $font-family-base;
+}
+
+::selection {
+  color: $gray-800;
+  background-color: $primary;
+}