Spaces:
Running
Running
| /* Shared styles across all pages */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary-color: #3b82f6; /* blue-500 */ | |
| --secondary-color: #f59e0b; /* yellow-500 */ | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #111827; /* gray-900 */ | |
| color: #f9fafb; /* gray-50 */ | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1f2937; /* gray-800 */ | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #3b82f6; /* blue-500 */ | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #2563eb; /* blue-600 */ | |
| } | |
| /* Animation utilities */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.6s ease-out forwards; | |
| } | |
| /* Button styles */ | |
| .btn-primary { | |
| @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300; | |
| } | |
| .btn-secondary { | |
| @apply bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-6 rounded-lg transition duration-300; | |
| } | |
| /* Editor specific styles */ | |
| .canvas-container { | |
| background-color: #1f2937; /* gray-800 */ | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .toolbar-btn { | |
| padding: 0.75rem; | |
| border-radius: 0.5rem; | |
| background-color: #374151; /* gray-700 */ | |
| transition: background-color 0.2s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .toolbar-btn:hover { | |
| background-color: #4b5563; /* gray-600 */ | |
| } | |
| .tool-active { | |
| background-color: #3b82f6; /* blue-500 */ | |
| color: white; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .toolbar { | |
| flex-direction: row ; | |
| overflow-x: auto; | |
| padding: 0.5rem; | |
| } | |
| .toolbar .toolbar-btn { | |
| margin-right: 0.5rem; | |
| margin-bottom: 0; | |
| } | |
| } | |