asimex-visual-editor/dist/index.esm.css

A powerful visual page editor component for React applications

.visual-editor-container{background-color:#2d2d2d;display:flex;flex-direction:column;height:100vh;overflow:hidden}.editor-canvas-container{align-items:flex-start;background-color:#f5f5f5;display:flex;flex:1;justify-content:center;min-height:0;overflow:auto;padding:20px}.editor-canvas-container.preview-mode{align-items:center;background-color:#000;padding:0}.editor-canvas{background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.1);min-height:200px;min-width:300px;transition:all .3s ease}.editor-canvas.preview-mode{border:none;box-shadow:none;height:100%!important;width:100%!important}.editor-canvas.mobile{height:667px;margin:0 auto;max-width:375px;width:375px}.editor-canvas.tablet{height:1024px;margin:0 auto;max-width:768px;width:768px}.editor-canvas.desktop{height:800px;margin:0 auto;max-width:1200px;width:100%}@media (max-width:1024px){.editor-canvas-container:not(.preview-mode){padding:15px}}@media (max-width:768px){.editor-canvas-container:not(.preview-mode){padding:10px}.editor-canvas.desktop{height:600px;width:100%}}@media (max-width:480px){.editor-canvas-container:not(.preview-mode){padding:5px}}