initial commit

frontend/src/styles/_bootstrap.scss

@@ -0,0 +1,101 @@
+@import 'bootstrap/scss/functions';
+
+@import "_variables";
+// Import all of Bootstrap's CSS
+@import "bootstrap/scss/bootstrap";
+
+.form-label {
+  font-size: $font-size-base; // Fixes crispy-bootstrap5 legend labels being too big
+  font-weight: bold;
+}
+//
+////body {
+////  background-color: $background-color;
+////}
+//
+
+//
+//// ===== Scrollbar CSS =====
+//* {
+//  scrollbar-width: thin;
+//  scrollbar-color: $scroll-thumb-color #dfe9eb;
+//}
+//
+//// Chrome, Edge and Safari
+//*::-webkit-scrollbar {
+//  height: 10px;
+//  width: 10px;
+//}
+//
+//*::-webkit-scrollbar-track {
+//  border-radius: 5px;
+//  background-color: $scroll-track-color;
+//}
+//
+//*::-webkit-scrollbar-track:hover {
+//  background-color: $scroll-thumb-active-color;
+//}
+//
+//*::-webkit-scrollbar-track:active {
+//  background-color: $scroll-thumb-active-color;
+//}
+//
+//*::-webkit-scrollbar-thumb {
+//  border-radius: 5px;
+//  background-color: $scroll-thumb-color;
+//}
+//
+//*::-webkit-scrollbar-thumb:hover {
+//  background-color: $scroll-thumb-active-color;
+//}
+//
+//*::-webkit-scrollbar-thumb:active {
+//  background-color: $scroll-thumb-active-color;
+//}
+//
+//// ===== Scrollbar CSS =====
+//
+//.gradient-background {
+//  background: linear-gradient(109deg, #652e7c, #1a7976);
+//  background-size: 120% 120%;
+//  animation: gradient-animation 8s ease infinite;
+//}
+//
+//@keyframes gradient-animation {
+//  0% {
+//    background-position: 0% 50%;
+//  }
+//
+//  50% {
+//    background-position: 100% 50%;
+//  }
+//
+//  100% {
+//    background-position: 0% 50%;
+//  }
+//}
+//
+
+//
+//.fade-me-in.htmx-added {
+//  opacity: 0;
+//}
+//
+//.fade-me-in {
+//  opacity: 1;
+//  transition: opacity 500ms ease-out;
+//}
+
+
+.offcanvas-size-xl {
+    --#{$prefix}offcanvas-width: min(95vw, 600px) !important;
+}
+.offcanvas-size-xxl {
+    --#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
+}
+.offcanvas-size-md { /* add Responsivenes to default offcanvas */
+    --#{$prefix}offcanvas-width: min(95vw, 400px) !important;
+}
+.offcanvas-size-sm {
+    --#{$prefix}offcanvas-width: min(95vw, 250px) !important;
+}

frontend/src/styles/_font-awesome.scss

@@ -0,0 +1,4 @@
+@import "@fortawesome/fontawesome-free/css/fontawesome.min.css";
+@import "@fortawesome/fontawesome-free/css/solid.min.css";
+@import "@fortawesome/fontawesome-free/css/regular.min.css";
+@import "@fortawesome/fontawesome-free/css/brands.min.css";

frontend/src/styles/_tailwind.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/styles/_tom-select.scss

@@ -0,0 +1,45 @@
+@import "tom-select/dist/css/tom-select.bootstrap5.min.css";
+@import "_variables.scss";
+
+/* FIX BOOTSTRAP STYLING FOR TOM SELECT */
+.ts-dropdown, .ts-control, .ts-control input {
+  color: var(--bs-body-color);
+}
+.ts-wrapper.plugin-remove_button .item .remove {
+  color: $red;
+}
+.plugin-clear_button .clear-button {
+  color: $red;
+  right: 60px;
+}
+
+.ts-wrapper.multi .ts-control > div.active {
+  background: $primary;
+  color: $body-color;
+  border: 0 solid rgba(0, 0, 0, 0);
+}
+
+.focus .ts-control {
+  color: $input-focus-color;
+  background-color: $input-focus-bg;
+  border-color: $input-focus-border-color;
+  //border-color: $form-select-focus-border-color;
+  outline: 0;
+  @if $enable-shadows {
+    @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+  } @else {
+    // Avoid using mixin so we can pass custom focus shadow properly
+    box-shadow: $input-focus-box-shadow;
+  }
+}
+
+.focus.ts-wrapper {
+  border-color: $form-select-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $form-select-focus-box-shadow;
+    }
+}

frontend/src/styles/_variables.scss

@@ -0,0 +1,33 @@
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #ebebeb !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #888 !default;
+$gray-700: #444 !default;
+$gray-800: #303030 !default;
+$gray-900: #222 !default;
+$black:    #000 !default;
+
+$blue:    #375a7f !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #e74c3c !default;
+$orange:  #fd7e14 !default;
+$yellow:  #fbb700 !default;
+$green:   #00bc8c !default;
+$teal:    #20c997 !default;
+$cyan:    #3498db !default;
+
+$primary:       $yellow !default;
+$secondary:     $gray-700 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+//$light:         $gray-500 !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   1.9 !default;

frontend/src/styles/style.scss

@@ -0,0 +1,15 @@
+@import "_variables";
+@import "_font-awesome.scss";
+@import "_tailwind.scss";
+@import "_bootstrap.scss";
+@import "_tom-select.scss";
+
+.sticky-sidebar {
+  position: sticky;
+  top: 10px;
+}
+
+// Somewhat prevents flickering when replacing with Tom-select
+select[multiple] {
+  visibility: hidden;
+}