@mindfiredigital/page-builder
Version:
1 lines • 10.2 kB
CSS
body,html{background-color:#f4f4f9ab;display:flex;flex-direction:column;font-family:Arial,sans-serif;margin:0;overflow:hidden;padding:0}#preview-navbar{align-items:center;background-color:#f5f5f5;box-shadow:0 4px 4px -2px #0000001a;display:flex;justify-content:space-between;padding:10px}.preview-btn{background-color:initial;border:none;border-radius:4px;cursor:pointer;padding:8px}.preview-btn:hover{background-color:#bdc3c7}#app{background-color:#ffffff0a;box-shadow:0 4px 8px #0000001a;display:flex;height:calc(100vh - 85px)}#sidebar{background-color:#f5f5f5;box-shadow:0 2px 4px #0000001a;flex-shrink:0;margin-top:4px;overflow-y:auto;padding:8px;width:auto}#canvas{background-color:#fff;background-image:linear-gradient(90deg,#efefef 1px,#0000 0),linear-gradient(180deg,#efefef 1px,#0000 0);background-size:20px 20px;box-sizing:border-box;overflow-x:auto;overflow-y:auto;padding:5px;width:100%}#customization{background-color:#fff;border:1px solid #ecf0f1;box-shadow:0 2px 4px #0000001a;display:none;margin-top:4px;overflow:auto;padding:15px;right:0;width:240px}#sidebar h3{color:#ecf0f1;font-size:1.2em;margin-bottom:15px;text-align:center}.draggable{border-radius:8px;box-sizing:border-box;cursor:grab;max-width:100%;overflow:hidden;padding:8px;text-align:center;transition:background-color .3s}.draggable:hover{background-color:#bdc3c7;box-shadow:0 0 5px #0003;outline:none}.draggable:active{cursor:grabbing;opacity:.8}.component{background-color:#f9f9f9;border:1px solid #ddd;border-radius:5px;cursor:pointer;padding:15px;position:absolute;transition:box-shadow .3s}.component:hover{box-shadow:0 2px 8px #0003}.text-component{color:#333;font-size:16px}.button-component{background-color:#3498db;border:none;border-radius:5px;color:#fff;cursor:pointer;padding:10px 20px;transition:background-color .3s}.button-component:hover{background-color:#2980b9}.header-component{color:#333;font-size:24px;font-weight:700;margin:10px 0}.image-component{border-radius:5px;display:flex;height:300px;justify-content:center;max-width:100%;position:relative;width:300px}.preview-desktop{max-width:100%}.preview-tablet{max-width:768px}.preview-mobile,.preview-tablet{margin-left:auto;margin-right:auto}.preview-mobile{max-width:375px}.editable-component{border:1px solid #ddd;border-radius:4px;cursor:text;margin:5px;padding:10px;pointer-events:auto;position:relative}.component-resizer{overflow:hidden;resize:both}.container-highlight{outline:1px solid #3498db}.container-component .editable-component{pointer-events:auto}.container-component{border:.5px dashed #ccc;display:flex;flex-direction:column;margin:5px;min-height:100px;padding:10px;pointer-events:auto;position:relative}.component-icon{height:40px;object-fit:contain;width:40px}.nav-icon{height:24px;object-fit:contain;width:24px}.left-buttons,.right-buttons{display:flex;gap:10px}.center-text{color:#000708;display:flex;flex-grow:1;font-size:18px;font-weight:700;justify-content:center;text-align:center}.column-label,.component-label{background:#000000b3;border-radius:3px;color:#fff;display:none;font-size:12px;left:0;padding:2px 4px;pointer-events:none;position:absolute;top:1px;z-index:10}.column:hover .column-label,.editable-component:hover .component-label{display:block}.upload-btn{background-color:initial;border:none;border-radius:50%;color:#fff;cursor:pointer;display:none;font-size:18px;left:10px;opacity:.5;padding:5px;position:absolute;top:10px;transition:opacity .2s ease;z-index:10}.image-component:hover .upload-btn{display:block}.upload-btn:hover{background-color:rgba(0,0,0,.253);opacity:1}.notification{background-color:#4caf50;border-radius:5px;bottom:20px;box-shadow:0 4px 8px #0003;color:#fff;font-size:16px;opacity:0;padding:10px 20px;position:fixed;right:20px;transition:opacity .3s ease-in-out}.notification.visible{opacity:1}.notification.hidden{opacity:0}.dialog{align-items:center;background:#00000080;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.dialog.hidden{display:none}.dialog-content{background:#fff;border-radius:8px;padding:20px;text-align:center;width:300px}.dialog-btn{border:none;border-radius:4px;cursor:pointer;margin:10px;padding:10px 20px}#dialog-yes{background-color:#e74c3c;color:#fff}#dialog-no{background-color:#95a5a6;color:#fff}.component-controls{align-items:center;cursor:pointer;display:none;position:absolute;right:1px;top:1px;z-index:10}.delete-icon{cursor:pointer;height:16px;vertical-align:middle;width:16px}.editable-component:hover .component-controls{display:flex;gap:2px}.control-wrapper{align-items:center;display:flex;gap:10px;margin-bottom:10px}#controls{display:flex;flex-direction:column}.control-wrapper label{color:#333;display:block;font-size:14px;font-weight:500;margin-bottom:6px}.control-wrapper input[type=number]{border:1px solid #ccc;border-radius:4px;font-size:14px;margin-right:4px;padding:4px 8px;width:40px}.control-wrapper input[type=color]{border:none;border-radius:100%;cursor:pointer;height:25px;margin:0;overflow:hidden;padding:1px;width:25px}.control-wrapper select{appearance:none;background-color:#fff;border:1px solid #ccc;border-radius:4px;font-size:14px;padding:8px;width:60px}.control-wrapper .step-buttons{display:inline-flex;flex-direction:column;justify-content:center}.control-wrapper .step-buttons button{background-color:#f1f1f1;border:1px solid #ccc;border-radius:2px;cursor:pointer;font-size:12px;height:20px;line-height:20px;padding:0;text-align:center;user-select:none;width:40px}.control-wrapper .step-buttons button:hover{background-color:#e7e7e7}.control-wrapper .step-buttons button:active{background-color:#ddd}#component-name{background-color:#f5f5f5;border:2px solid #ddd;border-radius:5px;box-shadow:0 2px 4px #0000001a;color:#333;font-size:12px;font-weight:700;margin-bottom:20px;padding:3px;width:auto}#component-name span{color:#666;font-size:12px}#color-value{border:1px solid #ccc;border-radius:4px;color:#333;display:inline-block;font-size:13px}.close-button{align-items:center;background-color:initial;border:none;border-radius:50%;color:#070707;cursor:pointer;display:flex;font-size:30px;height:30px;justify-content:center;line-height:30px;position:absolute;right:10px;text-align:center;top:90px;transition:transform .2s;width:30px}.close-button:hover{background-color:#706e6e42;transform:scale(1.1)}#preview-modal{background-color:#fff;height:100%;left:0;overflow:auto;position:fixed;top:0;width:100%;z-index:9999}#close-modal-btn{background-color:#f5f5f5;border:none;border-radius:50%;color:#0a0909;cursor:pointer;font-size:18px;height:30px;left:10px;position:absolute;top:10px;transition:transform .2s;width:30px;z-index:10000}#close-modal-btn:hover{background-color:#bebebe;transform:scale(1.1)}.modal{align-items:center;background-color:#00000080;display:none;height:100%;justify-content:center;left:0;position:fixed;top:0;transition:opacity .3s ease;width:100%;z-index:1000}.modal.show{display:flex;opacity:1}.modal.hide{opacity:0}.modal-content{background-color:#fff;border-radius:8px;box-shadow:0 4px 6px #0000001a;display:flex;height:70%;max-height:600px;max-width:1000px;padding:10px;position:relative;width:90%}.modal-section{padding:10px;width:50%}.modal-section h2{font-size:18px;font-weight:700;margin-bottom:10px}.code-block{background-color:#342931;border:1px solid #ccc;border-radius:4px;color:#de8f5f;font-family:Courier New,monospace;font-size:14px;height:80%;line-height:1.5;overflow-y:auto;padding:10px;white-space:pre-wrap;width:95%}.tag{color:#66d9ef}.attribute{color:#a6e22e}.string{color:#e6db74}.property{color:#66d9ef}.value{color:#e6db74}.bracket{color:#ec8305}.button-wrapper{display:flex;flex-direction:column;padding:20px}.export-btn{background-color:#007bff;border:none;border-radius:5px;bottom:15px;color:#fff;cursor:pointer;font-size:14px;outline:none;padding:10px 20px;position:absolute;right:15px;text-align:center;transition:background-color .2s ease-in-out}.export-btn:hover{background-color:#0056b3}.layers-mode-toggle{display:flex;margin-bottom:10px}.layers-mode-toggle button{background-color:#f0f0f0;border:none;cursor:pointer;flex:1;padding:10px}.layers-mode-toggle button.active{background-color:#e0e0e0;font-weight:700}.hidden{display:none}ul{margin:0;padding:0}.layer-item,ul{list-style:none}.layer-item{align-items:center;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;padding:8px 12px;transition:background-color .3s ease}.layer-item:hover{background-color:#f9f9f9;transform:scale(1.02)}.layer-children{list-style:none;margin:0;max-height:0;padding:0;transition:max-height .3s ease,opacity .3s ease}.layer-expand-toggle{cursor:pointer;margin-right:8px}.layer-children.expanded{max-height:none;opacity:1}.drop-preview{background-color:#0000ff1a;border:2px dashed #0000ffb3;display:none;pointer-events:none;position:absolute}.drop-preview.visible{display:block}.close-btn{background:#0000;border:none;color:#333;cursor:pointer;font-size:24px;position:absolute;right:10px;top:10px}.close-btn:hover{color:red}.categoryHeading{margin:0;text-align:center}.video-component{align-items:center;background-color:#f0f0f0;border:1px solid #ccc;display:flex;height:300px;justify-content:center;position:relative;width:300px}.video-component video{display:none}.pencil-button{background:#0000;border:none;cursor:pointer;font-size:24px;left:10px;position:absolute;top:10px}.upload-text{color:#666;text-align:center}.table-component .button-container{opacity:0;pointer-events:none;transition:opacity .3s ease}.table-component:hover .button-container{opacity:1;pointer-events:auto}.link-component{align-items:center;border:none;display:flex;gap:8px;padding:8px}.link-component-label{color:blue;font-size:14px;margin:10px}.edit-link,.link-component-label{cursor:pointer;text-decoration:none}.edit-link{background-color:initial;border:none;bottom:1px;display:none;font-size:12px;left:4px;padding:4px 8px;position:absolute}.link-component:hover .edit-link{display:block}.edit-link-form{display:none;flex-direction:column;gap:8px;padding:8px}.input-field{margin-bottom:4px;padding:4px}.save-button{cursor:pointer;padding:4px 8px}.checkbox-label{align-items:center;display:flex}