Initial commit
This commit is contained in:
Developer
238
app/globals.css
Normal file
238
app/globals.css
Normal file
@@ -0,0 +1,238 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 255, 255, 255;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 15, 23, 42;
|
||||
--background-end-rgb: 15, 23, 42;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Modern Button Styles */
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-semibold bg-gradient-to-r from-primary to-primary-dark text-white shadow-md transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed border border-primary-dark/20;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-semibold bg-gradient-to-r from-secondary to-secondary-dark text-white shadow-md transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed border border-secondary-dark/20;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-semibold border-2 border-primary text-primary bg-white dark:bg-slate-800 transition-all duration-300 hover:bg-primary/5 dark:hover:bg-primary/10 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-gray-700 dark:text-gray-300 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-slate-700 active:scale-95 hover:-translate-y-0.5;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
@apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-semibold bg-gradient-to-r from-danger to-danger-dark text-white shadow-md transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed border border-danger-dark/20;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
@apply px-4 py-2 text-sm;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
@apply px-8 py-4 text-lg;
|
||||
}
|
||||
|
||||
/* Modern Input Styles */
|
||||
.input-field {
|
||||
@apply w-full px-4 py-3 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all duration-300 outline-none shadow-sm;
|
||||
}
|
||||
|
||||
.input-error {
|
||||
@apply border-danger focus:border-danger focus:ring-danger/30;
|
||||
}
|
||||
|
||||
/* Modern Card Styles */
|
||||
.card {
|
||||
@apply bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-200 dark:border-slate-700 transition-all duration-300 overflow-hidden;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
@apply shadow-md border-gray-300 dark:border-slate-600;
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply hover:shadow-elevation-2 hover:-translate-y-1 cursor-pointer;
|
||||
}
|
||||
|
||||
/* Section Container */
|
||||
.section-container {
|
||||
@apply py-16 md:py-20 lg:py-28;
|
||||
}
|
||||
|
||||
/* Badge Styles */
|
||||
.badge {
|
||||
@apply inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold bg-primary/10 text-primary dark:bg-primary/20;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
@apply bg-success/10 text-success dark:bg-success/20;
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
@apply bg-danger/10 text-danger dark:bg-danger/20;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
@apply bg-warning/10 text-warning dark:bg-warning/20;
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.hover-lift {
|
||||
@apply transition-transform duration-300 hover:-translate-y-1;
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-slideDown {
|
||||
animation: slideDown 0.8s ease-out;
|
||||
}
|
||||
|
||||
.animate-slideUp {
|
||||
animation: slideUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
}
|
||||
|
||||
.animate-pulse-soft {
|
||||
animation: pulseSoft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
/* Modern Modal Styles */
|
||||
.modal-overlay {
|
||||
@apply fixed inset-0 z-[9999] flex items-center justify-center bg-black/40 backdrop-blur-sm transition-opacity duration-300;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@apply relative z-10 w-full max-w-3xl max-h-[90vh] overflow-y-auto bg-white dark:bg-slate-800 rounded-xl shadow-2xl;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
@apply flex items-center justify-between px-6 py-4 bg-gradient-to-r from-primary/5 to-secondary/5 dark:from-primary/10 dark:to-secondary/10 border-b border-gray-200 dark:border-slate-700;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@apply text-xl font-bold text-gray-900 dark:text-white;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
@apply inline-flex items-center justify-center w-8 h-8 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-700 transition-all duration-200 hover:text-gray-700 dark:hover:text-gray-200;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
@apply px-6 py-6 space-y-4;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
@apply px-6 py-4 bg-gray-50 dark:bg-slate-700/50 border-t border-gray-200 dark:border-slate-700 flex gap-3 justify-end;
|
||||
}
|
||||
|
||||
/* Form input improvements */
|
||||
.input {
|
||||
@apply input-field;
|
||||
}
|
||||
|
||||
.input-with-icon {
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
@apply absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500 text-lg;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulseSoft {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scrollbar Styles */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-gray-100 dark:bg-slate-900;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-400 dark:bg-slate-600 rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-gray-500 dark:bg-slate-500;
|
||||
}
|
||||
Reference in New Issue
Block a user