textcrafter/dist/styles.min.css

TextCrafter: A modern, customizable rich text editor for React. Supports rich formatting, media embedding and real-time collaboration. Ideal for content creators.

#editor-container.editor-canvas{font-family:Arial,sans-serif;overflow-y:auto;position:relative;text-align:start}#editor-container .default-editor-canvas{border:1px solid #ddd;border-radius:5px;padding:10px}#editor-container #content-area{min-height:300px;outline:none;padding-top:10px}#editor-container #editor-drop-overlay.drop-overlay{align-items:center;background:hsla(0,0%,100%,.85);border:2px dashed #2977ff;bottom:0;color:#2977ff;display:none;font-size:24px;font-weight:600;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:10}#editor-container #content-area blockquote{border-left:3px solid #ccc;color:#555;font-style:italic;margin:1em 0;padding-left:1em}#editor-container #content-area pre{background:#f4f4f4;border-radius:4px;font-family:monospace;overflow-x:auto;padding:10px}#toolbar.toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:10px}#toolbar.default-toolbar-class{background-color:#f3f3f3;border:1px solid #ddd;border-radius:5px;color:#000}#toolbar .toolbar-group{align-items:center;border-right:1px solid #ddd;display:flex;gap:4px;padding-right:8px}#toolbar .toolbar-group:last-child{border-right:none}#toolbar button,#toolbar select{font-size:14px;padding:4px 8px}#toolbar #image .image-insert-button,#toolbar button,#toolbar select{background-color:#fff;border:1px solid #ccc;border-radius:4px;color:currentColor;cursor:pointer;height:27px;min-width:30px;outline:none;transition:background-color .2s ease,border-color .2s ease}#toolbar #image .image-insert-button{align-items:center;display:flex;justify-content:center}#toolbar option{font-size:13px}#toolbar #color-group .color-picker{align-items:center;background-color:#fff;border:1px solid #ccc;border-radius:4px;display:flex;flex-direction:column;font-size:12px;font-weight:500;height:25.24px;justify-content:center;line-height:12px;min-width:30px;overflow:hidden;padding:0 5px;pointer-events:none}#toolbar #color-group input[type=color]{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:none;color:currentColor;cursor:pointer;height:7px;padding:0;pointer-events:auto;transition:background-color .2s ease,border-color .2s ease;width:30px}#toolbar #color-group input[type=color]::-webkit-color-swatch-wrapper{padding:0}#toolbar #color-group input[type=color]::-webkit-color-swatch{border:none;border-radius:0}.custom-color-swatch input[type=color]::-moz-color-swatch{border:none;border-radius:0}#toolbar .button-icon{fill:currentColor;align-items:center;display:flex;height:14px;justify-content:center;width:14px}#toolbar #color-group .color-picker:hover,#toolbar #image .image-insert-button:hover,#toolbar button:hover,#toolbar select:hover{background-color:#e0e0e0;border-color:#bbb}#toolbar button.active{background:#f0f7ff;color:#2977ff;font-weight:700}#toolbar select{-webkit-appearance:none;-moz-appearance:none;appearance:none}#toolbar #alignment-group .alignment-container,#toolbar #image,#toolbar #link,#toolbar #symbol-group .symbol-container,#toolbar #table-group .table-container{position:relative}#toolbar .alignment-selector-container,#toolbar .image-selector-container,#toolbar .link-selector-container,#toolbar .symbol-selector-container,#toolbar .table-selector-container{display:none;position:absolute;right:0;top:28px}#toolbar #alignment-group .alignment-container:hover .alignment-selector-container,#toolbar #image:hover .image-selector-container,#toolbar #link:hover .link-selector-container,#toolbar #symbol-group .symbol-container:hover .symbol-selector-container,#toolbar #table-group .table-container:hover .table-selector-container{display:block;z-index:10}#toolbar #alignment-group .alignment-container:hover .alignment-selector-show,#toolbar #image:hover .image-selector-show,#toolbar #link:hover .link-selector-show,#toolbar #symbol-group .symbol-container:hover .symbol-selector-show,#toolbar #table-group .table-container:hover .table-selector-show{background-color:#fff;border:1px solid #ddd;border-bottom-left-radius:5px;border-bottom-right-radius:5px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);display:flex;margin-top:5px}#toolbar #alignment-group .alignment-container:hover .alignment-option-button,#toolbar #image:hover .image-option-button{display:flex;gap:6px;padding:10px}#toolbar #link:hover .link-insert-option{display:flex;flex-direction:column;gap:6px;padding:10px}#toolbar #link:hover .link-insert-option .link-selected-text{align-items:center;background-color:rgba(95,143,225,.1);display:flex;font-size:12px;justify-content:space-between;padding:5px}#toolbar #link:hover .link-insert-option .link-selected-text .link-unselect-button{all:unset;color:#555;cursor:pointer;font-size:14px}#toolbar #link:hover .link-insert-option .link-selected-text .link-unselect-button:hover{color:#f90909}#toolbar #image .image-option-button .image-insert-url,#toolbar #link .link-insert-url{border:1px solid #ddd;border-radius:5px;display:flex;height:27px;overflow:hidden}#toolbar #image .image-option-button .image-insert-url input[type=url],#toolbar #link .link-insert-option input[type=url]{border:none;cursor:text;outline:none;padding:4px 5px}#toolbar #image .image-option-button .image-insert-url:focus-within,#toolbar #link .link-insert-url:focus-within{border-color:#88d1ee}#toolbar #image .image-option-button .image-insert-url .image-insert-url-button,#toolbar #link .link-insert-url .link-insert-url-button{all:unset;background-color:#f2f2f2;border-radius:4px;color:currentColor;cursor:pointer;font-size:14px;outline:none;padding:0 8px;transition:background-color .2s ease,border-color .2s ease}#toolbar #image .image-option-button .image-insert-url .image-insert-url-button:hover,#toolbar #link .link-insert-url .link-insert-url-button:hover{background:#f0f7ff;color:#2977ff}#toolbar .image-option-button input[type=file]{display:none}#toolbar #table-group .table-container:hover .table-option-button{display:flex;flex-direction:column;gap:5px;margin-top:10px;min-width:130px;padding:10px}#toolbar #symbol-group .symbol-container:hover .symbol-option-button{display:grid;gap:6px;grid-template-columns:repeat(3,1fr);min-width:130px;padding:10px}#toolbar .table-selector{background-color:#fff;display:inline-block;padding:10px;position:relative}#toolbar .table-selector-row{display:flex}#toolbar .table-selector-cell{border:1px solid #ddd;cursor:pointer;height:20px;width:20px}#toolbar .table-selector-cell.highlighted{background-color:#d0e8ff}#toolbar .table-selector-label{color:#333;font-size:14px;margin-top:5px;text-align:center}#editor-container #content-area .image-container{display:inline-block;margin:5px;position:relative}#editor-container #content-area .image-container img{height:auto;max-width:100%}#editor-container.editor-canvas-editable .image-container:after{align-items:center;background-color:#d20f0f;border-radius:2px;color:#fff;content:"remove";cursor:pointer;display:none;font-size:14px;justify-content:center;padding:3px 0;position:absolute;right:6px;top:6px;width:62px}#editor-container.editor-canvas-editable .image-container:hover:after{box-shadow:0 0 5px rgba(0,0,0,.5);display:flex}#editor-container #content-area a{color:#2977ff;cursor:pointer;text-decoration:underline}