194fc8da4c
- Fix pixel data storage to include user information (userId, username, timestamp) - Enhance zoom controls to center properly without drift - Improve mobile modal centering with flexbox layout - Add dynamic backend URL detection for network access - Fix CORS configuration for development mode - Add mobile-optimized touch targets and safe area support
104 lines
No EOL
2.4 KiB
CSS
104 lines
No EOL
2.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
scroll-behavior: smooth;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
body {
|
|
@apply bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.canvas-container {
|
|
@apply relative overflow-hidden bg-white dark:bg-gray-800 rounded-lg shadow-lg;
|
|
image-rendering: pixelated;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: crisp-edges;
|
|
}
|
|
|
|
.pixel {
|
|
@apply absolute cursor-crosshair;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.color-picker-button {
|
|
@apply w-8 h-8 rounded-full border-2 border-gray-300 dark:border-gray-600 cursor-pointer transition-all duration-200 hover:scale-110;
|
|
}
|
|
|
|
.color-picker-button.selected {
|
|
@apply border-4 border-blue-500 scale-110 shadow-lg;
|
|
}
|
|
|
|
.tool-button {
|
|
@apply p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200;
|
|
}
|
|
|
|
.tool-button.active {
|
|
@apply bg-blue-500 text-white hover:bg-blue-600;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Mobile-first touch optimizations */
|
|
.touch-target {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
}
|
|
|
|
/* Ensure crisp rendering on all devices */
|
|
.crisp-edges {
|
|
image-rendering: pixelated;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: crisp-edges;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
}
|
|
|
|
/* Mobile modal centering improvements */
|
|
.mobile-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
z-index: 50;
|
|
}
|
|
|
|
/* Safe area support for modern mobile devices */
|
|
@supports (padding: max(0px)) {
|
|
.mobile-modal {
|
|
padding-top: max(1rem, env(safe-area-inset-top));
|
|
padding-bottom: max(1rem, env(safe-area-inset-bottom));
|
|
padding-left: max(1rem, env(safe-area-inset-left));
|
|
padding-right: max(1rem, env(safe-area-inset-right));
|
|
}
|
|
}
|
|
} |