mjeditor/dist/mj-editor.css

A modern, plugin-extensible rich text editor for React with beautiful custom dialogs, notification system, and comprehensive editing features. Built with Slate.js for maximum flexibility.

@import "./editor.css";.mj-editor{background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.1);font-family:Lato,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}.mj-editor.light{background:#fff;color:#333}.mj-editor.dark{background:#2d3748;border-color:#4a5568;color:#e2e8f0}.mj-toolbar{align-items:center;background:#f8f9fa;border-bottom:1px solid #e2e8f0;border-radius:4px 4px 0 0;display:flex;flex-wrap:wrap;gap:1px;min-height:40px;padding:4px}.mj-editor.dark .mj-toolbar{background:#4a5568;border-bottom-color:#718096}.mj-toolbar-section{align-items:center;background:transparent;border-right:1px solid #e2e8f0;display:flex;gap:1px;padding:2px}.mj-editor.dark .mj-toolbar-section{border-right-color:#718096}.mj-toolbar-section:last-child{border-right:none}.mj-toolbar-button{align-items:center;background:transparent;border:1px solid transparent;border-radius:3px;color:#4a5568;cursor:pointer;display:flex;font-size:12px;font-weight:500;height:28px;justify-content:center;min-width:28px;position:relative;transition:all .15s ease;width:28px}.mj-toolbar-button:hover{background:#e2e8f0;border-color:#cbd5e0;color:#2d3748}.mj-toolbar-button.active{background:#3182ce;border-color:#3182ce;color:#fff}.mj-toolbar-button:disabled{cursor:not-allowed;opacity:.5}.mj-editor.dark .mj-toolbar-button{color:#e2e8f0}.mj-editor.dark .mj-toolbar-button:hover{background:#718096;border-color:#a0aec0;color:#f7fafc}.mj-editor.dark .mj-toolbar-button.active{background:#4299e1;border-color:#4299e1}.button-icon{align-items:center;display:flex;font-weight:700;justify-content:center;line-height:1}.dropdown-arrow{color:#48bb78;font-size:8px;font-weight:700;margin-left:2px}.mj-toolbar-button.active .dropdown-arrow{color:#fff}.mj-toolbar-dropdown-container{align-items:center;display:flex;position:relative}.mj-toolbar-dropdown{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348bb78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 4px center;background-repeat:no-repeat;background-size:12px;border:1px solid #cbd5e0;border-radius:3px;color:#4a5568;cursor:pointer;font-size:12px;font-weight:500;min-width:60px;padding:4px 20px 4px 8px}.mj-toolbar-dropdown:hover{background-color:#f7fafc;border-color:#a0aec0}.mj-toolbar-dropdown:focus{border-color:#3182ce;box-shadow:0 0 0 2px rgba(49,130,206,.2);outline:none}.mj-editor.dark .mj-toolbar-dropdown{background-color:#4a5568;border-color:#718096;color:#e2e8f0}.mj-editor.dark .mj-toolbar-dropdown:hover{background-color:#718096;border-color:#a0aec0}.dropdown-icon{color:#4a5568;font-size:12px;font-weight:700;left:6px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.mj-editor.dark .dropdown-icon{color:#e2e8f0}.mj-color-picker{display:inline-block;position:relative}.mj-color-picker-button{align-items:center;background:#fff;border:1px solid #cbd5e0;border-radius:3px;color:#4a5568;cursor:pointer;display:flex;font-size:12px;font-weight:700;height:28px;justify-content:center;position:relative;transition:all .15s ease;width:28px}.mj-color-picker-button:hover{background-color:#f7fafc;border-color:#a0aec0}.color-icon{font-weight:700;line-height:1}.mj-color-picker-dropdown{background:#fff;border:1px solid #cbd5e0;border-radius:4px;box-shadow:0 4px 6px rgba(0,0,0,.1);display:grid;gap:2px;grid-template-columns:repeat(8,1fr);left:0;min-width:200px;padding:8px;position:absolute;top:100%;z-index:1000}.mj-color-option{border:1px solid #e2e8f0;border-radius:2px;cursor:pointer;height:20px;transition:all .15s ease;width:20px}.mj-color-option:hover{border-color:#3182ce;transform:scale(1.1)}.mj-editor [data-slate-editor]{font-family:inherit;min-height:200px;outline:none;padding:16px}.mj-editor [data-slate-editor] p{margin:0 0 8px}.mj-editor [data-slate-editor] h1,.mj-editor [data-slate-editor] h2,.mj-editor [data-slate-editor] h3,.mj-editor [data-slate-editor] h4,.mj-editor [data-slate-editor] h5,.mj-editor [data-slate-editor] h6{font-weight:600;line-height:1.2;margin:16px 0 8px}.mj-editor [data-slate-editor] h1{font-size:2em}.mj-editor [data-slate-editor] h2{font-size:1.5em}.mj-editor [data-slate-editor] h3{font-size:1.25em}.mj-editor [data-slate-editor] h4{font-size:1em}.mj-editor [data-slate-editor] h5{font-size:.875em}.mj-editor [data-slate-editor] h6{font-size:.85em}.mj-editor [data-slate-editor] ol,.mj-editor [data-slate-editor] ul{margin:8px 0;padding-left:24px}.mj-editor [data-slate-editor] li{margin:4px 0}.mj-editor [data-slate-editor] blockquote{background:#f7fafc;border-left:4px solid #3182ce;font-style:italic;margin:16px 0;padding:8px 16px}.mj-editor [data-slate-editor] pre{background:#f7fafc;border:1px solid #e2e8f0;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875em;line-height:1.5;margin:16px 0;overflow-x:auto;padding:12px}.mj-editor.dark [data-slate-editor] pre{background:#2d3748;border-color:#4a5568;color:#e2e8f0}.mj-editor [data-slate-editor] code{background:#f7fafc;border:1px solid #e2e8f0;border-radius:3px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875em;padding:2px 4px}.mj-editor.dark [data-slate-editor] code{background:#2d3748;border-color:#4a5568;color:#e2e8f0}.mj-editor [data-slate-editor] a{color:#3182ce;text-decoration:underline}.mj-editor [data-slate-editor] a:hover{color:#2c5282}.mj-editor.dark [data-slate-editor] a{color:#63b3ed}.mj-editor.dark [data-slate-editor] a:hover{color:#90cdf4}.mj-editor [data-slate-editor] img{border-radius:4px;height:auto;margin:8px 0;max-width:100%}.mj-editor [data-slate-editor] table{border-collapse:collapse;margin:16px 0;width:100%}.mj-editor [data-slate-editor] td,.mj-editor [data-slate-editor] th{border:1px solid #e2e8f0;padding:8px 12px;text-align:left}.mj-editor [data-slate-editor] th{background:#f7fafc;font-weight:600}.mj-editor.dark [data-slate-editor] td,.mj-editor.dark [data-slate-editor] th{border-color:#4a5568}.mj-editor.dark [data-slate-editor] th{background:#4a5568}.mj-editor [data-slate-placeholder]{color:#a0aec0;font-size:.875em;font-style:italic;pointer-events:none;position:absolute}.mj-editor.dark [data-slate-placeholder]{color:#718096}.mj-editor:focus-within{border-color:#3182ce;box-shadow:0 0 0 2px rgba(49,130,206,.2)}.mj-editor.dark:focus-within{border-color:#4299e1;box-shadow:0 0 0 2px rgba(66,153,225,.2)}.mj-color-picker-button:focus,.mj-toolbar-button:focus,.mj-toolbar-dropdown:focus{outline:2px solid #3182ce;outline-offset:2px}.mj-editor.dark .mj-color-picker-button:focus,.mj-editor.dark .mj-toolbar-button:focus,.mj-editor.dark .mj-toolbar-dropdown:focus{outline-color:#4299e1}@media (max-width:768px){.mj-toolbar{align-items:stretch;flex-direction:column;gap:4px}.mj-toolbar-section{border-bottom:1px solid #e2e8f0;border-right:none;justify-content:center;padding:4px}.mj-toolbar-section:last-child{border-bottom:none}.mj-toolbar-button{height:32px;width:32px}.mj-toolbar-dropdown{min-width:80px}}@media print{.mj-toolbar{display:none!important}.mj-editor{border:none!important;box-shadow:none!important}}
/*# sourceMappingURL=mj-editor.css.map */