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;line-height:normal;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{background-color:var(--textcrafter-button-bg);border:1px solid var(--textcrafter-border);border-radius:4px;color:currentColor;cursor:pointer;font-size:14px;height:27px;min-width:30px;outline:none;padding:4px 8px;transition:background-color .2s ease,border-color .2s ease}#toolbar select>option{background-color:var(--textcrafter-dropdown-bg)}#toolbar #image .image-insert-button{align-items:center;background-color:var(--textcrafter-button-bg);border:1px solid var(--textcrafter-border);border-radius:4px;color:currentColor;cursor:pointer;display:flex;height:27px;justify-content:center;min-width:30px;outline:none;transition:background-color .2s ease,border-color .2s ease}#toolbar option{font-size:13px}#toolbar #color-group .color-picker{align-items:center;background-color:var(--textcrafter-button-bg);border:1px solid var(--textcrafter-border);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:var(--textcrafter-button-bg-hover);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}#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:var(--textcrafter-dropdown-bg);border:1px solid var(--textcrafter-border);box-shadow:0 1px 2px 0 rgba(0,0,0,.05);display:flex}#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 var(--textcrafter-border);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:var(--textcrafter-button-secondary-bg);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:var(--textcrafter-button-secondary-bg-hover);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:var(--textcrafter-dropdown-bg);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{font-size:14px;margin-top:5px;text-align:center}#editor-container #content-area .image-container{display:inline-block;margin:5px;position:relative;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#editor-container #content-area .image-container img{cursor:move;display:block;height:auto;max-width:100%;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#editor-container.editor-canvas-editable .image-container:after{align-items:center;background-color:#d20f0f;border-radius:2px;color:#f2f2f2;content:"remove";cursor:pointer;display:none;font-size:12px;justify-content:center;padding:3px 0;position:absolute;right:6px;top:6px;width:50px}#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 .image-container.selected{outline:2px solid #2977ff;outline-offset:2px}#editor-container #content-area .image-container.selected img{pointer-events:auto}#editor-container.editor-canvas-editable .image-container.selected:before{background-color:#3085df;border-radius:2px;bottom:-6px;content:"";cursor:se-resize;height:20px;position:absolute;right:-6px;transition:background-color .2s ease;width:20px;z-index:50}#editor-container.editor-canvas-editable .image-container.selected:before:hover{background:#1e5fa8;box-shadow:0 0 4px rgba(0,0,0,.3)}#editor-container #content-area a{color:#2977ff;cursor:pointer;text-decoration:underline}