Set up the basic structure and functionality for the DJ management system
Initializes project structure, adds core components, and configures essential dependencies. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 3a22ac80-cd1d-4441-9e36-f24fc2f4c3de Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3478f7c3-db8c-4fca-9165-3adbdf1b5829/e8da43e7-d99c-4328-9fdc-485bdeecffc1.jpg
This commit is contained in:
spliceboti
@@ -0,0 +1,221 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 100%);
|
||||
--foreground: hsl(20, 14.3%, 4.1%);
|
||||
--muted: hsl(60, 4.8%, 95.9%);
|
||||
--muted-foreground: hsl(25, 5.3%, 44.7%);
|
||||
--popover: hsl(0, 0%, 100%);
|
||||
--popover-foreground: hsl(20, 14.3%, 4.1%);
|
||||
--card: hsl(0, 0%, 100%);
|
||||
--card-foreground: hsl(20, 14.3%, 4.1%);
|
||||
--border: hsl(20, 5.9%, 90%);
|
||||
--input: hsl(20, 5.9%, 90%);
|
||||
--primary: hsl(207, 90%, 54%);
|
||||
--primary-foreground: hsl(211, 100%, 99%);
|
||||
--secondary: hsl(60, 4.8%, 95.9%);
|
||||
--secondary-foreground: hsl(24, 9.8%, 10%);
|
||||
--accent: hsl(60, 4.8%, 95.9%);
|
||||
--accent-foreground: hsl(24, 9.8%, 10%);
|
||||
--destructive: hsl(0, 84.2%, 60.2%);
|
||||
--destructive-foreground: hsl(60, 9.1%, 97.8%);
|
||||
--ring: hsl(20, 14.3%, 4.1%);
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Custom colors for the DJ management system */
|
||||
--primary-50: hsl(207, 100%, 97%);
|
||||
--primary-100: hsl(207, 95%, 92%);
|
||||
--primary-500: hsl(207, 90%, 54%);
|
||||
--primary-600: hsl(207, 90%, 54%);
|
||||
--primary-700: hsl(207, 90%, 45%);
|
||||
--primary-900: hsl(207, 90%, 25%);
|
||||
|
||||
--slate-50: hsl(210, 40%, 98%);
|
||||
--slate-100: hsl(210, 40%, 96%);
|
||||
--slate-200: hsl(210, 16%, 93%);
|
||||
--slate-300: hsl(210, 14%, 83%);
|
||||
--slate-400: hsl(215, 16%, 47%);
|
||||
--slate-500: hsl(215, 16%, 47%);
|
||||
--slate-600: hsl(215, 19%, 35%);
|
||||
--slate-700: hsl(215, 25%, 27%);
|
||||
--slate-800: hsl(217, 33%, 17%);
|
||||
--slate-900: hsl(222, 47%, 11%);
|
||||
|
||||
--blue-100: hsl(219, 100%, 95%);
|
||||
--blue-600: hsl(219, 86%, 59%);
|
||||
--green-100: hsl(149, 80%, 90%);
|
||||
--green-600: hsl(149, 80%, 40%);
|
||||
--yellow-100: hsl(49, 100%, 90%);
|
||||
--yellow-600: hsl(49, 100%, 50%);
|
||||
--purple-100: hsl(270, 100%, 95%);
|
||||
--purple-600: hsl(270, 95%, 60%);
|
||||
--red-100: hsl(0, 100%, 95%);
|
||||
--red-600: hsl(0, 84%, 60%);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: hsl(240, 10%, 3.9%);
|
||||
--foreground: hsl(0, 0%, 98%);
|
||||
--muted: hsl(240, 3.7%, 15.9%);
|
||||
--muted-foreground: hsl(240, 5%, 64.9%);
|
||||
--popover: hsl(240, 10%, 3.9%);
|
||||
--popover-foreground: hsl(0, 0%, 98%);
|
||||
--card: hsl(240, 10%, 3.9%);
|
||||
--card-foreground: hsl(0, 0%, 98%);
|
||||
--border: hsl(240, 3.7%, 15.9%);
|
||||
--input: hsl(240, 3.7%, 15.9%);
|
||||
--primary: hsl(207, 90%, 54%);
|
||||
--primary-foreground: hsl(211, 100%, 99%);
|
||||
--secondary: hsl(240, 3.7%, 15.9%);
|
||||
--secondary-foreground: hsl(0, 0%, 98%);
|
||||
--accent: hsl(240, 3.7%, 15.9%);
|
||||
--accent-foreground: hsl(0, 0%, 98%);
|
||||
--destructive: hsl(0, 62.8%, 30.6%);
|
||||
--destructive-foreground: hsl(0, 0%, 98%);
|
||||
--ring: hsl(240, 4.9%, 83.9%);
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply font-sans antialiased bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom utilities for the DJ management system */
|
||||
.sidebar-transition {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
/* Calendar specific styles */
|
||||
.calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
/* Custom color utilities */
|
||||
.bg-primary-50 { background-color: var(--primary-50); }
|
||||
.bg-primary-100 { background-color: var(--primary-100); }
|
||||
.bg-primary-600 { background-color: var(--primary-600); }
|
||||
.bg-primary-700 { background-color: var(--primary-700); }
|
||||
|
||||
.text-primary-600 { color: var(--primary-600); }
|
||||
.text-primary-700 { color: var(--primary-700); }
|
||||
|
||||
.hover\:bg-primary-700:hover { background-color: var(--primary-700); }
|
||||
.hover\:bg-slate-200:hover { background-color: var(--slate-200); }
|
||||
|
||||
.bg-slate-50 { background-color: var(--slate-50); }
|
||||
.bg-slate-100 { background-color: var(--slate-100); }
|
||||
.bg-slate-200 { background-color: var(--slate-200); }
|
||||
.bg-slate-800 { background-color: var(--slate-800); }
|
||||
|
||||
.text-slate-300 { color: var(--slate-300); }
|
||||
.text-slate-400 { color: var(--slate-400); }
|
||||
.text-slate-500 { color: var(--slate-500); }
|
||||
.text-slate-600 { color: var(--slate-600); }
|
||||
.text-slate-700 { color: var(--slate-700); }
|
||||
.text-slate-800 { color: var(--slate-800); }
|
||||
|
||||
.border-slate-200 { border-color: var(--slate-200); }
|
||||
.border-slate-300 { border-color: var(--slate-300); }
|
||||
|
||||
.ring-primary-500 { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); }
|
||||
.focus\:ring-primary-500:focus { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); }
|
||||
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2); }
|
||||
|
||||
.bg-blue-100 { background-color: var(--blue-100); }
|
||||
.text-blue-600 { color: var(--blue-600); }
|
||||
|
||||
.bg-green-100 { background-color: var(--green-100); }
|
||||
.text-green-600 { color: var(--green-600); }
|
||||
|
||||
.bg-yellow-100 { background-color: var(--yellow-100); }
|
||||
.text-yellow-600 { color: var(--yellow-600); }
|
||||
|
||||
.bg-purple-100 { background-color: var(--purple-100); }
|
||||
.text-purple-600 { color: var(--purple-600); }
|
||||
|
||||
.bg-red-100 { background-color: var(--red-100); }
|
||||
.text-red-600 { color: var(--red-600); }
|
||||
|
||||
/* Form and input improvements */
|
||||
.form-field {
|
||||
@apply space-y-2;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
@apply text-sm font-medium text-slate-700;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
@apply w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
|
||||
}
|
||||
|
||||
.form-input:disabled {
|
||||
@apply bg-slate-50 text-slate-500;
|
||||
}
|
||||
|
||||
/* Button improvements */
|
||||
.btn-primary {
|
||||
@apply bg-primary-600 hover:bg-primary-700 text-white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-slate-100 hover:bg-slate-200 text-slate-700;
|
||||
}
|
||||
|
||||
/* Table improvements */
|
||||
.table-row {
|
||||
@apply hover:bg-slate-50 transition-colors;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
@apply px-6 py-4 whitespace-nowrap text-sm text-slate-900;
|
||||
}
|
||||
|
||||
/* Modal improvements */
|
||||
.modal-overlay {
|
||||
@apply fixed inset-0 bg-black bg-opacity-50 z-50;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@apply bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-screen overflow-y-auto;
|
||||
}
|
||||
|
||||
/* Loading animations */
|
||||
.loading-spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Responsive utilities */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar-mobile {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.sidebar-mobile.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user