Updated theming

2025-09-06 18:51:10 -04:00
parent dc7b538be6
commit dae849bb90
11 changed files with 704 additions and 111 deletions
--- a/templates/base.html
+++ b/templates/base.html
@@ -115,6 +115,78 @@
            --gradient-to: #451a03;
        }

+        /* Light Theme */
+        .theme-light {
+            --primary-bg: #ffffff;
+            --secondary-bg: #f8fafc;
+            --tertiary-bg: #e2e8f0;
+            --accent-bg: #3b82f6;
+            --accent-hover: #2563eb;
+            --text-primary: #1e293b;
+            --text-secondary: #64748b;
+            --text-accent: #3b82f6;
+            --border-color: #cbd5e1;
+            --success-color: #059669;
+            --warning-color: #d97706;
+            --danger-color: #dc2626;
+            --gradient-from: #f8fafc;
+            --gradient-to: #ffffff;
+        }
+
+        /* Light Blue Theme */
+        .theme-light-blue {
+            --primary-bg: #f0f9ff;
+            --secondary-bg: #e0f2fe;
+            --tertiary-bg: #bae6fd;
+            --accent-bg: #0ea5e9;
+            --accent-hover: #0284c7;
+            --text-primary: #0c4a6e;
+            --text-secondary: #075985;
+            --text-accent: #0ea5e9;
+            --border-color: #7dd3fc;
+            --success-color: #059669;
+            --warning-color: #d97706;
+            --danger-color: #dc2626;
+            --gradient-from: #e0f2fe;
+            --gradient-to: #f0f9ff;
+        }
+
+        /* Light Green Theme */
+        .theme-light-green {
+            --primary-bg: #f0fdf4;
+            --secondary-bg: #dcfce7;
+            --tertiary-bg: #bbf7d0;
+            --accent-bg: #22c55e;
+            --accent-hover: #16a34a;
+            --text-primary: #14532d;
+            --text-secondary: #166534;
+            --text-accent: #22c55e;
+            --border-color: #86efac;
+            --success-color: #059669;
+            --warning-color: #d97706;
+            --danger-color: #dc2626;
+            --gradient-from: #dcfce7;
+            --gradient-to: #f0fdf4;
+        }
+
+        /* Light Purple Theme */
+        .theme-light-purple {
+            --primary-bg: #faf5ff;
+            --secondary-bg: #f3e8ff;
+            --tertiary-bg: #e9d5ff;
+            --accent-bg: #a855f7;
+            --accent-hover: #9333ea;
+            --text-primary: #581c87;
+            --text-secondary: #7c3aed;
+            --text-accent: #a855f7;
+            --border-color: #c4b5fd;
+            --success-color: #059669;
+            --warning-color: #d97706;
+            --danger-color: #dc2626;
+            --gradient-from: #f3e8ff;
+            --gradient-to: #faf5ff;
+        }
+
        /* Apply CSS custom properties */
        body {
            background-color: var(--primary-bg);
@@ -130,6 +202,27 @@
        .text-accent { color: var(--text-accent); }
        .border-theme { border-color: var(--border-color); }
        .bg-gradient-theme { background: linear-gradient(to bottom right, var(--gradient-from), var(--gradient-to)); }
+        
+        /* Fade-in animation for overlays */
+        .animate-fade-in {
+            animation: fadeIn 0.3s ease-out;
+        }
+        
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: scale(0.95) translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: scale(1) translateY(0);
+            }
+        }
+        
+        /* Smooth transitions for overlay elements */
+        .transition-all-smooth {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
    </style>
 </head>
 <body class="bg-primary text-primary min-h-screen">