From 6a8b909afbe1560be95f7ad0a3e19cfe4717aec6 Mon Sep 17 00:00:00 2001
From: FifthWit <fifthwitbusiness@gmail.com>
Date: Thu, 14 Aug 2025 14:01:01 -0500
Subject: Switched to tailwind/vite

---
 frontend/src/App.css | 229 +++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 223 insertions(+), 6 deletions(-)

(limited to 'frontend/src/App.css')

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 14a9972..a4c058b 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,3 +1,54 @@
+@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import "tailwindcss";
+
+@theme {
+  --color-rosewater: #f2d5cf;
+  --color-flamingo: #eebebe;
+  --color-pink: #f4b8e4;
+  --color-mauve: #ca9ee6;
+  --color-red: #e78284;
+  --color-maroon: #ea999c;
+  --color-peach: #ef9f76;
+  --color-yellow: #e5c890;
+  --color-green: #a6d189;
+  --color-teal: #81c8be;
+  --color-sky: #99d1db;
+  --color-sapphire: #85c1dc;
+  --color-blue: #8caaee;
+  --color-lavender: #babbf1;
+  --color-text: #c6d0f5;
+  --color-subtext1: #b5bfe2;
+  --color-subtext0: #a5adce;
+  --color-overlay2: #949cbb;
+  --color-overlay1: #838ba7;
+  --color-overlay0: #737994;
+  --color-surface2: #626880;
+  --color-surface1: #51576d;
+  --color-surface0: #414559;
+  --color-base: #303446;
+  --color-mantle: #292c3c;
+  --color-crust: #232634;
+
+  --color-primary: var(--color-mauve);
+  --color-secondary: var(--color-blue);
+  --color-accent: var(--color-peach);
+  --color-background: var(--color-base);
+  --color-surface: var(--color-surface0);
+  --color-muted: var(--color-overlay0);
+  --color-border: var(--color-surface2);
+  --color-input: var(--color-surface1);
+  --color-foreground: var(--color-text);
+  --color-success: var(--color-green);
+  --color-warning: var(--color-yellow);
+  --color-error: var(--color-red);
+  --color-info: var(--color-blue);
+
+  --font-barlow-condensed-regular: 'BarlowCondensed-Regular';
+  --font-barlow-condensed-bold: 'BarlowCondensed-Bold';
+  --font-barlow-semicondensed-regular: 'BarlowSemiCondensed-Regular';
+  --font-barlow-semicondensed-semibold: 'BarlowSemiCondensed-SemiBold';
+}
+
 main {
     overflow: auto;
     overflow-x: hidden;
@@ -10,33 +61,32 @@ main {
     padding-right: 30px;
 
     font-size: 40px;
-    font-family: BarlowSemiCondensed-Regular;
-    color: #cdcfdf;
+    font-family: var(--font-barlow-semicondensed-regular);
+    color: var(--color-text);
 
 }
 
 a {
     color: inherit;
-    width: fit-content;
 }
 
 body {
     overflow: hidden;
-    background-color: #141520;
+    background-color: var(--color-crust);
     margin: 0;
 }
 
 .loader {
     animation: loader 1.2s ease infinite;
     background-size: 400% 300%;
-    background-image: linear-gradient(-90deg, #202232 0%, #202232 25%, #2a2c41 50%, #202232 75%, #202232 100%);
+    background-image: linear-gradient(-90deg, var(--color-mantle) 0%, var(--color-mantle) 25%, var(--color-surface1) 50%, var(--color-mantle) 75%, var(--color-mantle) 100%);
     user-select: none;
 }
 
 .loader-text {
     animation: loader 1.2s ease infinite;
     background-size: 400% 300%;
-    background-image: linear-gradient(-90deg, #202232 0%, #202232 25%, #2a2c41 50%, #202232 75%, #202232 100%);
+    background-image: linear-gradient(-90deg, var(--color-mantle) 0%, var(--color-mantle) 25%, var(--color-surface1) 50%, var(--color-mantle) 75%, var(--color-mantle) 100%);
     user-select: none;
     color: #00000000;
     border-radius: 1000px;
@@ -76,6 +126,173 @@ body {
     }
 }
 
+/* Custom Tailwind utilities for Catppuccin Frappe theme */
+@layer utilities {
+  .bg-primary {
+    background-color: var(--color-primary);
+  }
+  
+  .bg-secondary {
+    background-color: var(--color-secondary);
+  }
+  
+  .bg-accent {
+    background-color: var(--color-accent);
+  }
+  
+  .bg-background {
+    background-color: var(--color-background);
+  }
+  
+  .bg-surface {
+    background-color: var(--color-surface);
+  }
+  
+  .bg-muted {
+    background-color: var(--color-muted);
+  }
+  
+  .text-primary {
+    color: var(--color-primary);
+  }
+  
+  .text-secondary {
+    color: var(--color-secondary);
+  }
+  
+  .text-accent {
+    color: var(--color-accent);
+  }
+  
+  .text-foreground {
+    color: var(--color-foreground);
+  }
+  
+  .text-muted {
+    color: var(--color-muted);
+  }
+  
+  .border-primary {
+    border-color: var(--color-primary);
+  }
+  
+  .border-secondary {
+    border-color: var(--color-secondary);
+  }
+  
+  .border-muted {
+    border-color: var(--color-border);
+  }
+  
+  .hover\:bg-primary:hover {
+    background-color: var(--color-primary);
+  }
+  
+  .hover\:bg-secondary:hover {
+    background-color: var(--color-secondary);
+  }
+  
+  .hover\:bg-surface:hover {
+    background-color: var(--color-surface);
+  }
+  
+  .hover\:text-primary:hover {
+    color: var(--color-primary);
+  }
+  
+  .focus\:ring-primary:focus {
+    --tw-ring-color: var(--color-primary);
+  }
+  
+  .triangle {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 8px solid var(--color-foreground);
+    display: inline-block;
+  }
+  
+  .sidebar-button-selected {
+    background-color: var(--color-primary) !important;
+    color: var(--color-background) !important;
+  }
+  
+  .sidebar-button-deselected {
+    background-color: var(--color-surface) !important;
+    color: var(--color-foreground) !important;
+  }
+  
+  .profileboard-record {
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    padding: 0.75rem;
+    margin-bottom: 0.5rem;
+    transition: all 0.2s ease;
+  }
+  
+  .profileboard-record:hover {
+    background-color: var(--color-surface1);
+  }
+  
+  .difficulty-rating {
+    width: 20px;
+    height: 20px;
+    background-color: var(--color-muted);
+    border-radius: 50%;
+    margin: 0 2px;
+    display: inline-block;
+  }
+  
+  .nav-button {
+    background-color: var(--color-surface);
+    color: var(--color-foreground);
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    padding: 0.5rem 1rem;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+  }
+  
+  .nav-button:hover {
+    background-color: var(--color-surface1);
+  }
+  
+  .record {
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    margin: 0.25rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .record:hover {
+    background-color: var(--color-surface1);
+  }
+  
+  .portal-count {
+    font-size: 3rem;
+    font-weight: bold;
+    color: var(--color-primary);
+  }
+  
+  .titles {
+    background-color: var(--color-accent);
+    color: var(--color-background);
+    padding: 0.25rem 0.5rem;
+    border-radius: 1rem;
+    font-size: 0.875rem;
+    margin-right: 0.5rem;
+    display: inline-block;
+  }
+}
+
 @font-face {
     font-family: 'BarlowCondensed-Bold';
     src: local('BarlowCondensed-Bold'), url(./fonts/BarlowCondensed-Bold.ttf) format('truetype');
-- 
cgit v1.2.3