react-smart-editor
Version:
React rich text editor with track changes functionality
2 lines • 6.62 kB
CSS
@font-face{font-display:block;font-family:react-smart-editor;font-style:normal;font-weight:400;src:url(fonts/react-smart-editor.eot?awmtp4);src:url(fonts/react-smart-editor.eot?awmtp4#iefix) format("embedded-opentype"),url(fonts/react-smart-editor.ttf?awmtp4) format("truetype"),url(fonts/react-smart-editor.woff?awmtp4) format("woff"),url(fonts/react-smart-editor.svg?awmtp4#react-smart-editor) format("svg")}[class*=" icon-"],[class^=icon-]{speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:react-smart-editor;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none}.icon-list-num:before{content:"\e900"}.icon-list:before{content:"\e901"}.icon-underline:before{content:"\e902"}.icon-italic:before{content:"\e903"}.icon-bold:before{content:"\e904"}.icon-link:before{content:"🔗"}.react-smart-editor{border:1px solid #ccc;box-sizing:border-box;height:100%;position:relative;&.input-view{min-height:0}ul{list-style-type:disc}ol,ul{padding-inline-start:1.5rem}ol{list-style-type:decimal}ul ul{list-style-type:circle}ol ol,ul ul{padding-inline-start:1rem}ol ol{list-style-type:lower-latin}ul ul ul{list-style-type:square}ol ol ol,ul ul ul{padding-inline-start:.5rem}ol ol ol{list-style-type:lower-roman}h1{font-size:2rem;font-weight:600;margin-bottom:1rem}h2{font-size:1.5rem;font-weight:500;margin-bottom:.5rem}h3{font-size:1.25rem;font-weight:400;margin-bottom:.25rem}h1,h2,h3{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;margin:0;padding:0}a{color:#1e88e5;cursor:pointer;text-decoration:underline;transition:color .2s ease}a:hover{color:#1565c0}}.react-smart-editor-content{height:calc(100% - 43px);position:relative;&.input-view{height:100%}}.formatting-toolbar-wrapper{background-color:#f1f1f1;position:sticky;z-index:1}.formatting-toolbar{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;gap:5px;padding:6px;position:relative;z-index:1}.toolbar-main-buttons{align-items:center;display:flex;gap:5px}.toolbar-expanded-buttons{align-items:center;border-top:1px solid #e0e0e0;display:none;gap:5px;padding-top:5px;width:100%}.toolbar-expanded-buttons.expanded{display:flex}.expand-button{align-items:center;background-color:#fff;border:1px solid #ccc;border-radius:3px;color:#000;cursor:pointer;display:flex;font-weight:700;height:30px;justify-content:center;margin:0;padding:0;transition:all .2s ease;width:30px}.expand-button:hover:not(:disabled){background-color:#e0e0e0}.expand-button.expanded i{transform:rotate(180deg)}.expand-button i{font-size:12px;transition:transform .2s ease}.icon-chevron-down:before{content:"▼"}.formatting-toolbar button{align-items:center;background-color:#fff;border:1px solid #ccc;border-radius:3px;color:#000;cursor:pointer;display:flex;font-weight:700;height:30px;justify-content:center;margin:0;padding:0;transition:all .2s ease;width:30px;&:disabled{cursor:not-allowed}}.formatting-toolbar select{border:1px solid #ccc;border-radius:3px;padding-block:0;&:disabled{cursor:not-allowed}}.formatting-toolbar button:hover:not(:disabled){background-color:#e0e0e0}.formatting-toolbar button.active{background-color:#e0e0e0;border-color:#999}.formatting-toolbar input[type=color]{border:1px solid #ccc;border-radius:3px;cursor:pointer;height:30px;padding:0;width:30px;&:disabled{cursor:not-allowed}}.formatting-toolbar input[type=color]::-webkit-color-swatch-wrapper{padding:0}.formatting-toolbar input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}.change-actions-toolbar{display:flex;gap:4px;button{border:none;border-radius:4px;color:#000;cursor:pointer;font-size:16px;height:30px;padding:0;width:30px;&.approve{background-color:#7fc682}&.reject{background-color:#cc7a74}}}.change-tooltip{background:#fff;border:1px solid #ccc;border-radius:4px;border-bottom-left-radius:0;box-shadow:0 2px 4px rgba(0,0,0,.1);color:#000;min-width:200px;padding:10px;position:fixed;text-align:start;transform:translate(-50%,-100%);z-index:1000}.change-tooltip:after{background:linear-gradient(135deg,#fff 45%,#ccc 0,transparent 55%);border-left:1px solid #ccc;bottom:-10px;content:"";height:10px;left:-.9px;position:absolute;width:10px}.change-info p{margin:0}.change-info-user{align-items:flex-start;display:flex;gap:10px;justify-content:space-between}.change-info-action{font-size:12px}.change-actions{display:flex;gap:4px;button{border:none;border-radius:4px;color:#000;cursor:pointer;height:20px;padding:0;width:20px;&:first-child{background-color:#7fc682}&:last-child{background-color:#cc7a74}}}.link-modal-inline{animation:slideIn .2s ease-in-out;background:#fff;border:1px solid #999;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.3);max-width:450px;min-width:350px;position:fixed;z-index:10001}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.link-modal-header{align-items:center;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;padding:16px 20px}.link-modal-header h3{color:#333;font-size:18px;font-weight:600;margin:0}.link-modal-close{align-items:center;background:none;border:none;border-radius:4px;color:#999;cursor:pointer;display:flex;font-size:28px;height:32px;justify-content:center;padding:0;transition:all .2s ease;width:32px}.link-modal-close:hover{background-color:#f5f5f5;color:#333}.link-modal-body{padding:20px}.link-modal-field{margin-bottom:16px}.link-modal-field:last-child{margin-bottom:0}.link-modal-field label{color:#333;display:block;font-size:14px;font-weight:500;margin-bottom:6px}.link-modal-field input{border:1px solid #ccc;border-radius:4px;box-sizing:border-box;font-size:14px;padding:8px 12px;transition:all .2s ease;width:100%}.link-modal-field input:focus{border-color:#4caf50;box-shadow:0 0 0 3px rgba(76,175,80,.1);outline:none}.link-modal-footer{border-top:1px solid #e0e0e0;display:flex;gap:10px;justify-content:space-between;padding:16px 20px}.link-modal-actions-left,.link-modal-actions-right{display:flex;gap:8px}.link-modal-button{border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;padding:8px 16px;transition:all .2s ease}.link-modal-button:disabled{cursor:not-allowed;opacity:.5}.link-modal-button.primary{background-color:#4caf50;color:#fff}.link-modal-button.primary:hover:not(:disabled){background-color:#45a049}.link-modal-button.secondary{background-color:#f5f5f5;color:#333}.link-modal-button.secondary:hover{background-color:#e0e0e0}.link-modal-button.danger{background-color:#f44336;color:#fff}.link-modal-button.danger:hover{background-color:#da190b}
/*# sourceMappingURL=index.esm.css.map */