80 lines
2.1 KiB
CSS
80 lines
2.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Custom friendly style */
|
|
.btn-primary {
|
|
@apply bg-primary text-white font-semibold rounded-lg px-4 py-2 shadow hover:bg-primary-light transition;
|
|
}
|
|
.btn-accent {
|
|
@apply bg-accent text-gray-900 font-semibold rounded-lg px-4 py-2 shadow hover:bg-accent-light transition;
|
|
}
|
|
.sidebar {
|
|
@apply bg-primary text-white min-h-screen p-0;
|
|
}
|
|
.sidebar .nav-link {
|
|
@apply text-white hover:bg-accent hover:text-gray-900 rounded px-3 py-2 transition block;
|
|
}
|
|
.table-header {
|
|
@apply bg-primary text-white;
|
|
}
|
|
.table-row:hover {
|
|
@apply bg-accent-light;
|
|
}
|
|
.alert-success {
|
|
@apply bg-primary-light text-white px-4 py-2 rounded shadow mb-2;
|
|
}
|
|
.alert-warning {
|
|
@apply bg-accent text-gray-900 px-4 py-2 rounded shadow mb-2;
|
|
}
|
|
input:focus, select:focus, textarea:focus {
|
|
@apply border-primary ring-2 ring-primary-light;
|
|
}
|
|
.card {
|
|
@apply rounded-lg shadow p-4 bg-white;
|
|
}
|
|
|
|
/* Login page specific styles */
|
|
.login-container {
|
|
@apply min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/10 via-accent/10 to-primary/20;
|
|
}
|
|
|
|
.login-card {
|
|
@apply bg-white/95 backdrop-blur-sm shadow-xl rounded-2xl border border-white/20 overflow-hidden;
|
|
}
|
|
|
|
.login-input {
|
|
@apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 transition duration-200;
|
|
}
|
|
|
|
.login-button {
|
|
@apply w-full py-3 bg-primary hover:bg-primary-dark text-white font-semibold rounded-lg transition duration-200 flex items-center justify-center;
|
|
}
|
|
|
|
.login-select {
|
|
@apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 transition duration-200 bg-white;
|
|
}
|
|
|
|
/* Custom animations */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.6s ease-out;
|
|
}
|
|
|
|
/* Glass morphism effect */
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
}
|