b738bc7495
- Added package.json with dependencies for Next.js, React, and Tailwind CSS. - Created postcss.config.js for Tailwind CSS and autoprefixer integration. - Added SVG icon for the application in public/icons/icon.svg. - Created manifest.json for PWA support with app details and icon. - Configured Tailwind CSS in tailwind.config.js with custom colors and animations. - Set up TypeScript configuration in tsconfig.json for strict type checking and module resolution.
128 lines
2.7 KiB
CSS
128 lines
2.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--foreground-rgb: 0, 0, 0;
|
|
--background-rgb: 245, 245, 245;
|
|
--primary: 234, 88, 12;
|
|
--success: 34, 197, 94;
|
|
--warning: 234, 179, 8;
|
|
--danger: 239, 68, 68;
|
|
--info: 6, 182, 212;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
max-width: 100vw;
|
|
overflow-x: hidden;
|
|
height: 100%;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
body {
|
|
color: rgb(var(--foreground-rgb));
|
|
background: rgb(var(--background-rgb));
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
overscroll-behavior-y: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Mobile viewport height fix */
|
|
@supports (-webkit-touch-callout: none) {
|
|
.h-screen {
|
|
height: -webkit-fill-available;
|
|
}
|
|
.min-h-screen {
|
|
min-height: -webkit-fill-available;
|
|
}
|
|
}
|
|
|
|
/* Safe area insets for notched phones */
|
|
.safe-top {
|
|
padding-top: env(safe-area-inset-top);
|
|
}
|
|
|
|
.safe-bottom {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
/* Hide scrollbar but keep functionality */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Touch action optimization */
|
|
.touch-manipulation {
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* Prevent text selection on buttons */
|
|
button {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Leaflet container fix */
|
|
.leaflet-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Animation utilities */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from { transform: translateX(100%); }
|
|
to { transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes slideOutRight {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(100%); }
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.3s ease-out forwards;
|
|
}
|
|
|
|
/* Status badges */
|
|
.status-pending { @apply bg-gray-100 text-gray-700 border-gray-300; }
|
|
.status-assigned { @apply bg-blue-100 text-blue-700 border-blue-300; }
|
|
.status-collected { @apply bg-green-100 text-green-700 border-green-300; }
|
|
.status-problem { @apply bg-red-100 text-red-700 border-red-300; }
|
|
|
|
/* Card shadows */
|
|
.card-shadow {
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
|
}
|
|
|
|
.card-shadow-lg {
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
|
|
}
|
|
|
|
/* Pull to refresh indicator */
|
|
.pull-indicator {
|
|
transition: transform 0.2s ease-out;
|
|
}
|
|
|
|
/* Loading skeleton */
|
|
.skeleton {
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
|
|
@keyframes skeleton-loading {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|