body { background-color: #f8f9fa; min-height: 100vh; } /* Editor.js styling */ .editor-wrapper { background: white; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); height: calc(100vh - 40px); margin: 20px; overflow: hidden; } .editor-container { height: 100%; min-height: 600px; overflow-y: auto; padding: 20px; border-right: 1px solid #eee; } .preview-container { height: 100%; overflow-y: auto; background: #fff; padding: 20px; } #editorjs { min-height: calc(100% - 60px); } .preview-frame { width: 100%; height: calc(100% - 60px); border: 1px solid #eee; border-radius: 4px; padding: 15px; overflow-y: auto; background: #fff; } .toolbar { padding: 10px 20px; background: #f8f9fa; border-bottom: 1px solid #eee; } .preview-toolbar { margin-bottom: 15px; padding: 10px; background: #f8f9fa; border-radius: 4px; border: 1px solid #eee; } .preview-toolbar .btn-group { display: inline-flex; } .preview-toolbar .btn { padding: 6px 12px; margin: 0; border: 1px solid #ddd; background: white; color: #333; } .preview-toolbar .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .preview-toolbar .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; } .preview-toolbar .btn.active { background: #e9ecef; box-shadow: inset 0 3px 5px rgba(0,0,0,.125); } .preview-toolbar .btn i { margin-right: 5px; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spin { animation: spin 1s infinite linear; display: inline-block; } .codex-editor__redactor { padding-bottom: 100px !important; } .ce-block__content, .ce-toolbar__content { max-width: 100% !important; } .ce-toolbar__plus { left: -30px !important; } .ce-toolbar__actions { right: -30px !important; } /* Editor.js Columns */ .ce-editorjsColumns_col { border: 2px solid #2196F3; padding: 10px; } /* Editor.js Button */ .anyButtonContainer { text-align: center; } .anyButtonContainer__inputHolder { margin-bottom: 10px; padding: 12px; } .anyButtonContainer__input { text-align: left; } .anyButtonContainer__registerButton, .anyButton__btn { display: inline-block !important; padding: 12px 24px !important; background-color: #2196f3 !important; border: 1px solid #2196f3 !important; text-decoration: none !important; border-radius: 4px !important; font-family: Arial, sans-serif !important; font-size: 16px !important; line-height: 1.4 !important; min-width: 120px !important; cursor: pointer !important; width: fit-content !important; color: #fff !important; box-sizing: border-box; } .anyButton__btn.btn--gray { background-color: #6c757d; border: 1px solid #6c757d; } .anyButton__btn.btn--primary { background-color: #2196f3; border: 1px solid #2196f3; } /* Editor.js Icon */ .ce-icon-tool__url { font-size: 12px; color: #000000; word-break: break-all; } /* Editor.js Button */ .cdx-input.anyButtonContainer__input.anyButtonContainer__input--text { color: #000; } .cdx-input.anyButtonContainer__input.anyButtonContainer__input--link { color: #2196F3 }