froala-editor
Version:
The next generation Javascript WYSIWYG HTML rich text editor made by devs for devs. High performance and modern design make it easy to use for developers and loved by users.
8 lines (6 loc) • 14.3 kB
CSS
/*!
* froala_editor v5.1.0 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2026 Froala Labs
*/
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-ai-assist-prompt-popup{width:94%;justify-self:center;box-shadow:0 2px 6px 0 rgba(0,0,0,0.25)}.fr-ai-assist-prompt-popup .fr-ai-assist-close-btn{position:absolute;left:-13px;top:-13px;border-radius:20px;background:#ECECEC;box-shadow:0 2px 6px 0 rgba(0,0,0,0.25);display:flex;width:30px;height:30px;justify-content:center}.fr-ai-assist-prompt-popup .fr-ai-assist-close-btn .fr-command.fr-btn{height:30px;margin:0;padding:0;background:transparent}.fr-ai-assist-prompt-popup .fr-ai-assist-close-btn .fr-command.fr-btn .fr-svg{margin:3px}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist{display:inline}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner{margin:0 20px}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-error-layer{display:none;background-color:#f8d7da;border:1px solid #f5c6cb;border-radius:4px;color:#721c24;padding:8px 12px;margin-bottom:8px;font-size:13px;line-height:1.4}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-error-layer:not(:empty){display:block}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-error-layer:before{content:"⚠ ";font-weight:bold}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-error-layer{transition:all 0.2s ease-in-out;opacity:1}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-error-layer:empty{opacity:0;height:0;padding:0;margin:0;border:none}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-response-layer{display:flex;padding:12px 12px 12px 16px;flex-direction:column;justify-content:center;gap:10px;border-radius:4px;border:1px solid #ECECEC;margin-bottom:10px}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-response-layer.fr-hidden{display:none}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-response-layer .fr-action-buttons{display:flex;align-items:center;z-index:4}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-response-layer .fr-action-buttons .fr-submit{border:1px solid #0098f7}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-response-layer .fr-action-buttons .fr-response-refresh{margin-left:10px}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-response-layer .fr-action-buttons .fr-ai-assist-label{margin-left:auto;color:#999;font-family:Arial;font-size:14px}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-response-layer .fr-ai-assist-response-content{max-height:200px;min-height:90px;overflow:auto;user-select:text}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer{display:flex;align-items:center;height:55px;border-radius:4px;border:1px solid #999;padding:0 10px}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-prompt-input{width:100%;border:none;border-radius:4px;font-family:Arial;font-size:16px}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-buttons{position:relative}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-buttons button[data-cmd="aiShortCuts"] .fr-svg path{fill:#0098f7}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-buttons button[data-cmd="aiShortCuts"][aria-expanded="true"]:after{border-top:0;border-bottom:4px solid #0098f7}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-buttons button[data-cmd="aiShortCuts"][aria-expanded="false"]:after{border-bottom:0;border-top:4px solid #0098f7}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-buttons button[data-cmd="aiShortCuts"]::after{border-left:4px solid transparent;border-right:4px solid transparent}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn{width:40px;height:40px;border-radius:4px;display:flex;padding:8px;align-items:center;gap:10px;outline:none;border:none;cursor:pointer}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn .fr-svg{stroke:#FFF}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .loader{display:inline-flex;gap:4px;align-items:center;padding:6px;user-select:none;-webkit-tap-highlight-color:transparent;flex:1}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .loader .dot{--i: 0;width:8px;height:8px;border-radius:999px;background:#5fb7ff;box-shadow:0 0 0 3px rgba(95,183,255,0.15) inset;transform-origin:center;opacity:0;transform:scale(0.28);animation:pop calc(0.55s + 0.20s * (4)) linear infinite;animation-delay:calc(var(--i) * 0.18s)}.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .loader .dot::after{content:"";position:absolute;pointer-events:none}@media (prefers-reduced-motion: reduce){.fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .loader .dot{animation:none;opacity:1;transform:scale(1)}}.fr-ai-assist-prompt-popup[data-state="disabled"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn{background-color:#999;cursor:not-allowed}.fr-ai-assist-prompt-popup[data-state="disabled"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .loader{display:none}.fr-ai-assist-prompt-popup[data-state="disabled"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer:not(.fr-not-disabled) .fr-command.fr-btn+.fr-ai-shortcuts-dropdown .fr-ai-shortcuts-label,.fr-ai-assist-prompt-popup[data-state="disabled"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer:not(.fr-not-disabled) .fr-command.fr-btn+.fr-ai-shortcuts-dropdown .fr-sr-only{color:gray}.fr-ai-assist-prompt-popup[data-state="disabled"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer.fr-not-disabled .fr-command.fr-btn+.fr-ai-shortcuts-dropdown{width:200px}.fr-ai-assist-prompt-popup[data-state="disabled"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer.fr-not-disabled .fr-command.fr-btn+.fr-ai-shortcuts-dropdown .fr-dropdown-wrapper{width:100%}.fr-ai-assist-prompt-popup[data-state="disabled"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer.fr-not-disabled .fr-command.fr-btn+.fr-ai-shortcuts-dropdown .fr-ai-shortcuts-label{display:none}.fr-ai-assist-prompt-popup[data-state="active"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn{background-color:#0098f7}.fr-ai-assist-prompt-popup[data-state="active"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn:hover,.fr-ai-assist-prompt-popup[data-state="active"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn:focus,.fr-ai-assist-prompt-popup[data-state="active"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn:active{background-color:#007acc}.fr-ai-assist-prompt-popup[data-state="active"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .loader{display:none}.fr-ai-assist-prompt-popup[data-state="active"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-command.fr-btn+.fr-ai-shortcuts-dropdown{width:200px}.fr-ai-assist-prompt-popup[data-state="active"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-command.fr-btn+.fr-ai-shortcuts-dropdown .fr-dropdown-wrapper{width:100%}.fr-ai-assist-prompt-popup[data-state="active"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-command.fr-btn+.fr-ai-shortcuts-dropdown .fr-ai-shortcuts-label{display:none}.fr-ai-assist-prompt-popup[data-state="progress"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn{background-color:#D9D9D9;padding:12px}.fr-ai-assist-prompt-popup[data-state="progress"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn .fr-svg{background-color:#000;stroke:#000;margin:0px;border-radius:2px;width:100%;height:100%}.fr-ai-assist-prompt-popup[data-state="progress"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn.fr-blink,.fr-ai-assist-prompt-popup[data-state="progress"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn:hover,.fr-ai-assist-prompt-popup[data-state="progress"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn:focus,.fr-ai-assist-prompt-popup[data-state="progress"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn.fr-selected{background-color:#a6a6a6}.fr-ai-assist-prompt-popup[data-state="progress"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-prompt-input{display:none}.fr-command.fr-btn+.fr-ai-shortcuts-dropdown[aria-hidden="true"]{overflow:hidden}.fr-command.fr-btn+.fr-ai-shortcuts-dropdown[aria-hidden="false"]{overflow:visible}.fr-command.fr-btn+.fr-ai-shortcuts-dropdown:not(.fr-not-disabled) .fr-ai-shortcuts-label{color:gray}.fr-command.fr-btn+.fr-ai-shortcuts-dropdown.fr-not-disabled{width:200px}.fr-command.fr-btn+.fr-ai-shortcuts-dropdown.fr-not-disabled .fr-dropdown-wrapper{width:100%}.fr-command.fr-btn+.fr-ai-shortcuts-dropdown.fr-not-disabled .fr-ai-shortcuts-label{display:none}.fr-command.fr-btn+.fr-ai-shortcuts-dropdown .fr-btn.fr-dropdown{display:flex;align-items:center;width:-webkit-fill-available}.fr-command.fr-btn+.fr-ai-shortcuts-dropdown .fr-btn.fr-dropdown:after{border:0;content:"";position:absolute;width:15px;height:11px;top:15px;background-size:contain;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDYgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjUgMC41MDAwNThMNC44NDY2NyA0Ljg0NjczQzUuMzYgNS4zNjAwNiA1LjM2IDYuMjAwMDYgNC44NDY2NyA2LjcxMzM5TDAuNSAxMS4wNjAxIiBzdHJva2U9IiM4MDgwODAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=")}.fr-command.fr-btn+.fr-ai-shortcuts-dropdown .fr-btn.fr-dropdown .fr-svg{margin-left:11px}.fr-command.fr-btn+.fr-ai-shortcuts-dropdown .fr-btn.fr-dropdown .fr-sr-only{display:contents;font-weight:400}.fr-toolbar .fr-command.fr-btn.fr-shortcut-active{fill:#333;background:#d6d6d6}.fr-toolbar .fr-command.fr-btn.fr-shortcut-active:after{border-top:0;border-bottom:4px solid #222}.fr-toolbar .fr-btn.fr-btn-active-popup[data-cmd="aiAssist"]{background:transparent}.fr-popup .fr-terms-conditions-layer code{user-select:text}@-webkit-keyframes pop{0%{-webkit-transform:scale(0.28);-moz-transform:scale(0.28);-ms-transform:scale(0.28);-o-transform:scale(0.28);-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}12%{-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-ms-transform:scale(1.06);-o-transform:scale(1.06);-webkit-opacity:1;-moz-opacity:1;opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}30%{-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);-o-transform:scale(0.9);-webkit-opacity:.95;-moz-opacity:.95;opacity:.95;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}48%{-webkit-transform:scale(0.38);-moz-transform:scale(0.38);-ms-transform:scale(0.38);-o-transform:scale(0.38);-webkit-opacity:.25;-moz-opacity:.25;opacity:.25;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}60%{-webkit-transform:scale(0.28);-moz-transform:scale(0.28);-ms-transform:scale(0.28);-o-transform:scale(0.28);-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}100%{-webkit-transform:scale(0.28);-moz-transform:scale(0.28);-ms-transform:scale(0.28);-o-transform:scale(0.28);-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}}@keyframes pop{0%{-webkit-transform:scale(0.28);-moz-transform:scale(0.28);-ms-transform:scale(0.28);-o-transform:scale(0.28);-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}12%{-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-ms-transform:scale(1.06);-o-transform:scale(1.06);-webkit-opacity:1;-moz-opacity:1;opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}30%{-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);-o-transform:scale(0.9);-webkit-opacity:.95;-moz-opacity:.95;opacity:.95;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}48%{-webkit-transform:scale(0.38);-moz-transform:scale(0.38);-ms-transform:scale(0.38);-o-transform:scale(0.38);-webkit-opacity:.25;-moz-opacity:.25;opacity:.25;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}60%{-webkit-transform:scale(0.28);-moz-transform:scale(0.28);-ms-transform:scale(0.28);-o-transform:scale(0.28);-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}100%{-webkit-transform:scale(0.28);-moz-transform:scale(0.28);-ms-transform:scale(0.28);-o-transform:scale(0.28);-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}}