uzairayed2/layoutflow-studio

1/* Custom styles for LayoutFlow Studio */2:root {3    --primary-color: #3b82f6;4    --secondary-color: #64748b;5    --border-color: #e2e8f0;6    --background-color: #f8fafc;7    --toolbar-height: 48px;8    --sidebar-width: 280px;9    --code-panel-width: 320px;10}11 12* {13    box-sizing: border-box;14}15 16body {17    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;18    margin: 0;19    padding: 0;20}21 22/* Custom scrollbar */23::-webkit-scrollbar {24    width: 6px;25    height: 6px;26}27 28::-webkit-scrollbar-track {29    background: #f1f1f1;30    border-radius: 3px;31}32 33::-webkit-scrollbar-thumb {34    background: #cbd5e1;35    border-radius: 3px;36}37 38::-webkit-scrollbar-thumb:hover {39    background: #94a3b8;40}41 42/* Canvas grid pattern */43.canvas-grid {44    background-image: 45        linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),46        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);47    background-size: 20px 20px;48}49 50/* Element handles and selection */51.element-handle {52    position: absolute;53    width: 8px;54    height: 8px;55    background: var(--primary-color);56    border: 1px solid white;57    border-radius: 1px;58    z-index: 1000;59}60 61.element-handle.nw { top: -4px; left: -4px; cursor: nw-resize; }62.element-handle.ne { top: -4px; right: -4px; cursor: ne-resize; }63.element-handle.sw { bottom: -4px; left: -4px; cursor: sw-resize; }64.element-handle.se { bottom: -4px; right: -4px; cursor: se-resize; }65 66.selected-element {67    outline: 2px solid var(--primary-color);68    outline-offset: -1px;69}70 71.delete-cross {72    position: absolute;73    top: -8px;74    right: -8px;75    width: 16px;76    height: 16px;77    background: #ef4444;78    border-radius: 50%;79    color: white;80    display: flex;81    align-items: center;82    justify-content: center;83    font-size: 10px;84    cursor: pointer;85    opacity: 0;86    transition: opacity 0.2s;87}88 89.selected-element:hover .delete-cross {90    opacity: 1;91}92 93/* Snap guides */94.snap-guide {95    position: absolute;96    background: var(--primary-color);97    opacity: 0.3;98    z-index: 999;99}100 101.snap-guide.vertical {102    width: 1px;103    height: 100%;104}105 106.snap-guide.horizontal {107    width: 100%;108    height: 1px;109}110 111/* Drag preview */112.drag-preview {113    opacity: 0.7;114    border: 2px dashed var(--primary-color);115    background: rgba(59, 130, 246, 0.1);116}117 118/* Animation for new elements */119@keyframes fadeInUp {120    from {121        opacity: 0;122        transform: translateY(10px);123    }124    to {125        opacity: 1;126        transform: translateY(0);127    }128}129 130.new-element {131    animation: fadeInUp 0.2s ease-out;132}133 134/* Code panel syntax highlighting */135.code-block {136    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;137    font-size: 12px;138    line-height: 1.4;139}140 141/* Layer list animations */142.layer-item {143    transition: background-color 0.15s ease;144}145 146.layer-item.dragging {147    opacity: 0.5;148    background-color: rgba(59, 130, 246, 0.1);149}150 151/* Responsive adjustments */152@media (max-width: 1024px) {153    :root {154        --sidebar-width: 240px;155        --code-panel-width: 280px;156    }157}158 159@media (max-width: 768px) {160    .mobile-hidden {161        display: none;162    }163    164    :root {165        --sidebar-width: 200px;166        --code-panel-width: 250px;167    }168}