148 lines
3.0 KiB
CSS
148 lines
3.0 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Custom styles */
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Leaflet map fixes */
|
|
.leaflet-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.leaflet-popup-content {
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* Custom components */
|
|
.card {
|
|
@apply bg-white rounded-lg shadow-md border border-gray-200;
|
|
}
|
|
|
|
.card-header {
|
|
@apply px-6 py-4 border-b border-gray-200;
|
|
}
|
|
|
|
.card-body {
|
|
@apply px-6 py-4;
|
|
}
|
|
|
|
.btn {
|
|
@apply px-4 py-2 rounded-md font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply bg-danger-600 text-white hover:bg-danger-700 focus:ring-danger-500;
|
|
}
|
|
|
|
.btn-success {
|
|
@apply bg-success-600 text-white hover:bg-success-700 focus:ring-success-500;
|
|
}
|
|
|
|
.status-indicator {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
}
|
|
|
|
.status-online {
|
|
@apply bg-success-100 text-success-800;
|
|
}
|
|
|
|
.status-offline {
|
|
@apply bg-danger-100 text-danger-800;
|
|
}
|
|
|
|
.status-warning {
|
|
@apply bg-warning-100 text-warning-800;
|
|
}
|
|
|
|
/* Animation classes */
|
|
.fade-in {
|
|
@apply animate-fade-in;
|
|
}
|
|
|
|
.slide-up {
|
|
@apply animate-slide-up;
|
|
}
|
|
|
|
/* Map marker pulse animation */
|
|
.marker-pulse {
|
|
@apply animate-pulse-slow;
|
|
}
|
|
|
|
/* Responsive table */
|
|
.table-responsive {
|
|
@apply overflow-x-auto;
|
|
}
|
|
|
|
.table {
|
|
@apply min-w-full divide-y divide-gray-200;
|
|
}
|
|
|
|
.table th {
|
|
@apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
|
|
}
|
|
|
|
.table td {
|
|
@apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
|
|
}
|
|
|
|
/* Mobile-responsive toast notifications */
|
|
.toast-container {
|
|
max-height: 50vh !important;
|
|
overflow-y: auto !important;
|
|
}
|
|
|
|
/* Mobile optimizations for toasts */
|
|
@media (max-width: 768px) {
|
|
.toast-container {
|
|
position: fixed !important;
|
|
top: 4rem !important; /* Below mobile header */
|
|
left: 0.5rem !important;
|
|
right: 0.5rem !important;
|
|
max-height: 40vh !important;
|
|
z-index: 9999 !important;
|
|
}
|
|
|
|
/* Make individual toasts smaller on mobile */
|
|
.toast-container > div {
|
|
max-width: none !important;
|
|
margin: 0 !important;
|
|
margin-bottom: 0.5rem !important;
|
|
font-size: 13px !important;
|
|
padding: 0.75rem !important;
|
|
border-radius: 0.5rem !important;
|
|
}
|
|
|
|
/* Limit the number of visible toasts on mobile */
|
|
.toast-container > div:nth-child(n+4) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Tablet optimizations */
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
.toast-container {
|
|
max-height: 60vh !important;
|
|
}
|
|
|
|
.toast-container > div:nth-child(n+6) {
|
|
display: none !important;
|
|
}
|
|
}
|